fix(branding): improve table width, page font sizes, and buildinfo alignment

- Scope table responsiveness (display: block) strictly within the mobile media query. This restores table widths back to 100% on desktop layout.
- Refine table styles by differentiating layout tables (table.data-list, table.list) from vertical key-value information tables (table th), giving them a clean layout with right-aligned headers and Slate 100 background.
- Increase page font-size base, padding, and add a drop-shadowed white container wrapper for a modern, clean visual presentation.
- Theme h4 table headers with Slate 900 and a 4px Emerald border accent to override Koji's default blue.

Co-developed-by: Gemini AI <renich+gemini@woralelandia.com>
Signed-off-by: Rénich Bon Ćirić <renich@woralelandia.com>

roles/koji_hub/tasks/main.yaml

@@ -475,8 +475,53 @@
         content: |
           @import url("../../koji.css");
 
+          /* Reset de fuente base y legibilidad global */
           body {
               font-family: 'Inter', system-ui, -apple-system, sans-serif;
+              font-size: 14px;
+              line-height: 1.6;
+              color: #334155; /* Slate 700 */
+              background-color: #f8fafc;
+          }
+
+          #wrap {
+              background-color: #ffffff;
+              box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05), 0 2px 4px -2px rgb(0 0 0 / 0.05);
+              border-radius: 8px;
+              margin: 20px auto;
+              max-width: 1400px;
+              padding: 10px 0;
+          }
+
+          #innerwrap {
+              padding: 0;
+          }
+
+          h2, h3 {
+              color: #0f172a;
+              font-weight: 700;
+              margin-top: 25px;
+              margin-bottom: 15px;
+          }
+
+          /* Encabezados de tablas/sección de Koji */
+          h4 {
+              background-color: #0f172a !important; /* Slate 900 */
+              color: #f8fafc !important;
+              border-left: 4px solid #10b981; /* Detalle verde esmeralda */
+              padding: 10px 15px;
+              font-weight: 600;
+              font-size: 15px;
+              border-radius: 4px;
+              margin: 20px 0 15px 0;
+          }
+
+          h4 a {
+              color: #10b981 !important;
+          }
+
+          h4 a:hover {
+              color: #059669 !important;
           }
 
           #header {
@@ -587,34 +632,98 @@
               color: #059669; /* Verde oscuro */
           }
 
-          th {
+          /* --- ESTILOS DE TABLAS MEJORADOS --- */
-              background-color: #1e293b !important;
+
-              color: #f8fafc !important;
+          /* Estilo general para todas las tablas (Información vertical y Listas) */
+          table {
+              width: 100% !important;
+              margin-bottom: 20px;
+              border-collapse: collapse;
           }
 
+          /* Tablas de Información (Estructura Vertical: th a la izquierda, td a la derecha) */
+          table th {
+              font-weight: 600;
+              color: #0f172a; /* Slate 900 */
+              background-color: #f1f5f9; /* Slate 100 */
+              border-bottom: 1px solid #e2e8f0;
+              border-right: 1px solid #e2e8f0;
+              text-align: right;
+              padding: 8px 15px;
+              width: 180px;
+              font-size: 13px;
+          }
+
+          table td {
+              padding: 8px 15px;
+              border-bottom: 1px solid #e2e8f0;
+              color: #334155;
+              font-size: 13px;
+              vertical-align: middle;
+          }
+
+          /* Tablas de Listas de Datos (Estructura Horizontal: th arriba, td abajo) */
+          table.data-list, 
+          table.list {
+              width: 100% !important;
+          }
+
+          table.data-list th,
+          table.list th,
+          tr.list-header th {
+              background-color: #1e293b !important; /* Slate 800 */
+              color: #f8fafc !important;
+              font-weight: 600;
+              text-align: left;
+              border-bottom: 2px solid #10b981 !important; /* Borde inferior verde */
+              border-right: none;
+              padding: 10px 15px;
+              font-size: 13px;
+          }
+
+          table.data-list td,
+          table.list td {
+              border-bottom: 1px solid #e2e8f0;
+              border-right: none;
+              text-align: left;
+              padding: 10px 15px;
+          }
+
+          /* Filas alternas y hover en listas */
+          table.data-list tr:nth-child(even),
+          table.list tr:nth-child(even) {
+              background-color: #f8fafc;
+          }
+
+          table.data-list tr:hover,
+          table.list tr:hover {
+              background-color: #f1f5f9;
+          }
+
+          /* Botones */
           .button, input[type="submit"], input[type="button"] {
               background-color: #10b981;
               color: white;
               border: none;
               border-radius: 4px;
-              padding: 4px 12px;
+              padding: 6px 16px;
+              font-weight: 600;
+              font-size: 13px;
               cursor: pointer;
+              transition: background-color 0.2s ease;
           }
 
           .button:hover, input[type="submit"]:hover, input[type="button"]:hover {
               background-color: #059669;
           }
 
-          /* Tablas Responsivas */
-          table {
-              display: block;
-              width: 100%;
-              overflow-x: auto;
-              -webkit-overflow-scrolling: touch;
-          }
-
           /* --- ESTILOS RESPONSIVOS PARA MÓVILES (Media Queries) --- */
           @media (max-width: 768px) {
+              #wrap {
+                  margin: 5px;
+                  padding: 5px;
+              }
+
               #header {
                   height: auto;
                   min-height: 110px;
@@ -669,5 +778,15 @@
                   text-align: center;
                   margin: 10px 0;
               }
+
+              /* Tablas Responsivas en Móvil (convierten a scroll horizontal) */
+              table, 
+              table.data-list, 
+              table.list {
+                  display: block;
+                  width: 100% !important;
+                  overflow-x: auto;
+                  -webkit-overflow-scrolling: touch;
+              }
           }
       notify: Restart httpd