fix(branding): restore round logo and fix mainNav stylesheet import

- Correct the relative stylesheet import path to '../../koji.css' in the theme file to restore base styles and resolve the unstyled vertical navigation menu list.
- Restore the round logo layout scaled to 50px of height.
- Style the mainNav tabs menu with Slate/Emerald colors to match the theme.

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

@@ -413,7 +413,7 @@
 
     - name: Convert main logo SVG to PNG
       ansible.builtin.command:
-        cmd: "rsvg-convert -w 250 --keep-aspect-ratio -o /tmp/mxos-koji.png /home/renich/Projects/MxOS/mxos.svg"
+        cmd: "rsvg-convert -h 50 --keep-aspect-ratio -o /tmp/mxos-koji.png /home/renich/Projects/MxOS/sitio/static/images/logo.svg"
         creates: /tmp/mxos-koji.png
 
     - name: Convert favicon logo SVG to PNG
@@ -459,30 +459,112 @@
         group: root
         mode: "0644"
         content: |
-          @import url("../default/koji.css");
+          @import url("../../koji.css");
 
           body {
               font-family: 'Inter', system-ui, -apple-system, sans-serif;
           }
 
           #header {
-              background-color: #0f172a; /* Pizarra oscuro */
+              background-color: #0f172a; /* Slate 900 */
               border-bottom: 3px solid #10b981; /* Verde esmeralda de MxOS */
+              height: 60px; /* Altura ajustada del header */
+              clear: left;
           }
 
-          #header a {
+          #kojiLogo {
-              color: #10b981;
+              float: left;
+              height: 50px; /* Logotipo redondo de 50px */
+              width: auto;
+              margin-top: 5px;
+              margin-left: 15px;
           }
 
-          #header h1 {
+          #headerSearch {
-              background-image: url("images/koji.png");
+              float: right;
-              background-repeat: no-repeat;
+              margin-right: 15px;
-              background-position: left center;
+              height: 50px;
-              height: 60px;
+              margin-top: 5px; /* Centrado vertical en el header de 60px */
-              padding-left: 270px; /* Suficiente espacio para la imagen de 250px */
+              display: flex;
+              align-items: center;
+              gap: 8px;
           }
 
-          /* Cambiar colores de enlaces y botones */
+          /* Estilo para los inputs de búsqueda */
+          #headerSearch select,
+          #headerSearch input[type="text"] {
+              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;
+              box-sizing: border-box;
+          }
+
+          #headerSearch select:focus,
+          #headerSearch input[type="text"]:focus {
+              border-color: #10b981;
+              outline: none;
+          }
+
+          #headerSearch input[type="submit"] {
+              background-color: #10b981;
+              color: white;
+              border: none;
+              border-radius: 4px;
+              padding: 0 16px;
+              height: 28px;
+              font-weight: 600;
+              font-size: 13px;
+              cursor: pointer;
+              box-sizing: border-box;
+          }
+
+          #headerSearch input[type="submit"]:hover {
+              background-color: #059669;
+          }
+
+          /* Estilización del Menú de Pestañas (#mainNav) */
+          #mainNav {
+              background-color: #1e293b; /* Slate 800 */
+              border-bottom: 2px solid #10b981; /* Borde verde esmeralda */
+              font-weight: bold;
+              height: 2.1em;
+          }
+
+          #mainNav ul li {
+              background-color: #1e293b;
+              border-color: #1e293b;
+          }
+
+          #mainNav ul li a {
+              color: #f8fafc; /* Texto claro */
+          }
+
+          #mainNav ul li:hover {
+              background-color: #334155; /* Slate 700 */
+              border-color: #10b981;
+          }
+
+          /* Pestaña activa de la página actual */
+          body#summary #mainNav li#summaryTab a,
+          body#tasks #mainNav li#tasksTab a,
+          body#tags #mainNav li#tagsTab a,
+          body#builds #mainNav li#buildsTab a,
+          body#packages #mainNav li#packagesTab a,
+          body#users #mainNav li#usersTab a,
+          body#hosts #mainNav li#hostsTab a,
+          body#buildtargets #mainNav li#buildtargetsTab a,
+          body#reports #mainNav li#reportsTab a,
+          body#search #mainNav li#searchTab a,
+          body#api #mainNav li#apiTab a {
+              background-color: #10b981; /* Emerald 500 */
+              color: white;
+          }
+
+          /* Cambiar colores de enlaces y botones globales */
           a {
               color: #10b981;
           }