From 7f148e269d0f3b13b5a6b31e248814f65fcef7e55b218ce6b8268b282bf98cb0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C3=A9nich=20Bon=20=C4=86iri=C4=87?=
 <renich@woralelandia.com>
Date: Tue, 16 Jun 2026 11:23:20 -0600
Subject: [PATCH] fix(branding): improve desktop wrap, card tables, and enlarge
 elements
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Set #wrap background to transparent and remove its box shadow to prevent the header and nav from looking boxed and cut off.
- Convert tables to self-contained visual cards with white backgrounds, border-radii, and shadows.
- Enlarge body font size to 16px, table text to 15px, and nav/search elements to improve readability.

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 | 81 +++++++++++++++++++++++-----------
 1 file changed, 56 insertions(+), 25 deletions(-)

diff --git a/roles/koji_hub/tasks/main.yaml b/roles/koji_hub/tasks/main.yaml
index cdad03f..5b5656c 100644
--- a/roles/koji_hub/tasks/main.yaml
+++ b/roles/koji_hub/tasks/main.yaml
@@ -527,26 +527,26 @@
           #header {
               background-color: #0f172a; /* Slate 900 */
               border-bottom: 3px solid #10b981; /* Verde esmeralda de MxOS */
-              height: 60px; /* Altura ajustada del header */
+              height: 70px; /* Altura del header incrementada para mejor presencia */
               clear: left;
+              border-radius: 6px 6px 0 0; /* Bordes redondeados solo arriba */
           }
 
           #kojiLogo {
               float: left;
-              height: 50px; /* Logotipo redondo de 50px */
+              height: 54px; /* Logotipo redondo ligeramente más grande */
               width: auto;
-              margin-top: 5px;
-              margin-left: 15px;
+              margin-top: 8px;
+              margin-left: 20px;
           }
 
           #headerSearch {
               float: right;
-              margin-right: 15px;
-              height: 50px;
-              margin-top: 5px; /* Centrado vertical en el header de 60px */
+              margin-right: 20px;
+              height: 70px;
               display: flex;
               align-items: center;
-              gap: 8px;
+              gap: 10px;
           }
 
           /* Estilo para los inputs de búsqueda */
@@ -555,11 +555,12 @@
               background-color: #1e293b; /* Slate 800 */
               border: 1px solid #334155; /* Slate 700 */
               color: #f8fafc; /* Slate 50 */
-              border-radius: 4px;
-              padding: 4px 8px;
-              height: 28px;
-              font-size: 13px;
+              border-radius: 6px;
+              padding: 6px 12px;
+              height: 34px; /* Altura de inputs aumentada */
+              font-size: 14px;
               box-sizing: border-box;
+              transition: border-color 0.2s ease;
           }
 
           #headerSearch select:focus,
@@ -572,13 +573,14 @@
               background-color: #10b981;
               color: white;
               border: none;
-              border-radius: 4px;
-              padding: 0 16px;
-              height: 28px;
+              border-radius: 6px;
+              padding: 0 20px;
+              height: 34px;
               font-weight: 600;
-              font-size: 13px;
+              font-size: 14px;
               cursor: pointer;
               box-sizing: border-box;
+              transition: background-color 0.2s ease;
           }
 
           #headerSearch input[type="submit"]:hover {
@@ -590,21 +592,42 @@
               background-color: #1e293b; /* Slate 800 */
               border-bottom: 2px solid #10b981; /* Borde verde esmeralda */
               font-weight: bold;
-              height: 2.1em;
+              height: auto; /* Quitamos la altura rígida */
+          }
+
+          #mainNav ul {
+              display: flex;
+              flex-wrap: wrap;
+              padding: 0;
+              margin: 0;
+              list-style-type: none;
           }
 
           #mainNav ul li {
               background-color: #1e293b;
-              border-color: #1e293b;
+              border: none;
+              margin: 0;
+              float: none;
           }
 
           #mainNav ul li a {
-              color: #f8fafc; /* Texto claro */
+              display: block;
+              color: #cbd5e1; /* Slate 300 para no seleccionado */
+              text-decoration: none;
+              padding: 12px 20px !important; /* Mayor padding táctil y visual */
+              font-size: 14px !important;
+              font-family: inherit;
+              height: auto;
+              transition: all 0.2s ease;
           }
 
           #mainNav ul li:hover {
               background-color: #334155; /* Slate 700 */
-              border-color: #10b981;
+              border-color: transparent;
+          }
+
+          #mainNav ul li:hover a {
+              color: #ffffff;
           }
 
           /* Pestaña activa de la página actual */
@@ -620,25 +643,33 @@
           body#search #mainNav li#searchTab a,
           body#api #mainNav li#apiTab a {
               background-color: #10b981; /* Emerald 500 */
-              color: white;
+              color: white !important;
           }
 
           /* Cambiar colores de enlaces y botones globales */
           a {
               color: #10b981;
+              text-decoration: none;
+              font-weight: 500;
           }
 
           a:hover {
               color: #059669; /* Verde oscuro */
+              text-decoration: underline;
           }
 
-          /* --- ESTILOS DE TABLAS MEJORADOS --- */
+          /* --- ESTILOS DE TABLAS PREMIUM COMO TARJETAS --- */
 
-          /* Estilo general para todas las tablas (Información vertical y Listas) */
           table {
               width: 100% !important;
-              margin-bottom: 20px;
-              border-collapse: collapse;
+              margin-bottom: 30px;
+              border-collapse: separate; /* Cambiado a separate para soportar border-radius en las esquinas */
+              border-spacing: 0;
+              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); /* Sombra de tarjeta */
+              border: 1px solid #e2e8f0;
+              border-radius: 8px; /* Esquinas redondeadas en la tabla */
+              overflow: hidden;
           }
 
           /* Tablas de Información (Estructura Vertical: th a la izquierda, td a la derecha) */