/* --- Variables CSS Globales para el Header --- */
:root {
    --header-bg-color: #ffffff;
    --header-text-color: #333333;
    --header-link-hover-color: #007bff;
    
    --brand-main-color: #2c3e50; 
    --brand-ai-color-start: #007bff; 
    --brand-ai-color-end: #00C6FF;   
    --brand-text-font-weight-main: 700;
    --brand-text-font-weight-ai: 800;

    --header-button-primary-bg: #007bff;
    --header-button-primary-text: #ffffff;
    --header-button-primary-hover-bg: #0056b3;
    --header-button-secondary-bg: #6c757d;
    --header-button-secondary-text: #ffffff;
    --header-button-secondary-hover-bg: #545b62;
    --header-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    --header-height: 80px;
    --header-padding-vertical: 0;
    --header-padding-horizontal: 20px;
    --header-z-index: 1000;
    --font-family-sans-serif: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Variables para Submenús */
    --submenu-bg-color: #ffffff;
    --submenu-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    --submenu-link-color: #454545;
    --submenu-link-hover-color: #007bff;
    --submenu-link-hover-bg: #f0f8ff; /* Azul muy claro */
    --submenu-border-color: #e9ecef;
    --submenu-item-padding: 10px 20px;

    /* Variables de base (asumiendo que estaban en base.css) */
    --primary: #007bff; /* Color primario, usado en footer */
    --dark: #2c3e50; /* Color oscuro, usado en footer */
    --transition: all 0.3s ease; /* Transición general */

    /* Colores para formularios de login/registro */
    --form-input-bg: #FFFACD; /* Amarillo claro */
    --form-input-border: #FFD700; /* Amarillo oscuro */
    --form-input-focus-border: #FFA500; /* Naranja al enfocar */
    --form-button-bg: #FFA500; /* Naranja */
    --form-button-hover-bg: #FF8C00; /* Naranja más oscuro */
    --form-text-color: #333;
    --form-label-color: #555;
    --form-link-color: #007bff;
    --form-link-hover-color: #0056b3;
}

/* --- Estilos Base del Header --- */
.site-header {
    background-color: var(--header-bg-color);
    box-shadow: var(--header-shadow);
    height: var(--header-height);
    padding: var(--header-padding-vertical) var(--header-padding-horizontal);
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: var(--header-z-index);
    font-family: var(--font-family-sans-serif);
    display: flex; /* Asegurarse de que el header es flex para alinear contenido */
    align-items: center;
    justify-content: space-between;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    width: 100%; /* Asegura que el contenedor ocupe el ancho completo */
}

/* --- Logo y Branding con SVG --- */
.site-branding .brand-logo-link {
    text-decoration: none;
    display: inline-flex; 
    align-items: center; 
    gap: 10px; 
    transition: opacity 0.3s ease;
}

.site-branding .brand-logo-link:hover {
    opacity: 0.85; 
}

.site-branding .brand-icon {
    flex-shrink: 0; 
}

.site-branding .brand-text {
    font-size: 1.9rem; 
    display: flex; 
    align-items: baseline; 
    line-height: 1; 
}

.site-branding .brand-text-main {
    color: var(--brand-main-color);
    font-weight: var(--brand-text-font-weight-main);
}

.site-branding .brand-text-ai {
    font-weight: var(--brand-text-font-weight-ai);
    background: linear-gradient(45deg, var(--brand-ai-color-start), var(--brand-ai-color-end));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
    padding-left: 2px; 
    text-shadow: 1px 1px 3px rgba(0, 86, 179, 0.05);
}

/* --- Navegación Principal --- */
.main-navigation {
    flex-grow: 1; /* Permite que la navegación ocupe el espacio disponible */
    display: flex;
    justify-content: center; /* Centra el menú en el espacio disponible */
}

.main-navigation .nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
}

.main-navigation .nav-menu li {
    margin-left: 25px;
    position: relative; /* Necesario para posicionar los submenús */
}

.main-navigation .nav-menu a {
    text-decoration: none;
    color: var(--header-text-color);
    font-weight: 500;
    font-size: 1rem;
    padding: 10px 5px;
    position: relative;
    transition: color 0.3s ease, border-bottom-color 0.3s ease;
    display: flex; /* Para alinear icono y texto con el dropdown indicator */
    align-items: center;
}

.main-navigation .nav-menu a i {
    margin-right: 6px;
    font-size: 0.9em;
}

.main-navigation .nav-menu a .dropdown-indicator {
    margin-left: 5px;
    font-size: 0.7em;
    transition: transform 0.3s ease;
}

.main-navigation .nav-menu li:hover > a .dropdown-indicator {
    transform: rotate(180deg);
}


.main-navigation .nav-menu a:hover,
.main-navigation .nav-menu .current-menu-item > a, /* Joomla class para item activo */
.main-navigation .nav-menu .active > a { /* Joomla class para item activo */
    color: var(--header-link-hover-color);
}

.main-navigation .nav-menu > li > a::after { /* Solo para items principales */
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--header-link-hover-color);
    transition: width 0.3s ease;
}

.main-navigation .nav-menu > li:hover > a::after,
.main-navigation .nav-menu > .current-menu-item > a::after,
.main-navigation .nav-menu > .active > a::after {
    width: 100%;
}

/* --- Estilos para Submenús --- */
.main-navigation .sub-menu {
    list-style: none;
    margin: 0;
    padding: 8px 0; /* Espaciado interno vertical del contenedor del submenú */
    position: absolute;
    top: 100%; /* Se posiciona justo debajo del ítem padre */
    left: 0;
    min-width: 280px; /* Ancho mínimo del submenú */
    background-color: var(--submenu-bg-color);
    box-shadow: var(--submenu-shadow);
    border-radius: 8px; /* Bordes redondeados para el submenú */
    z-index: var(--header-z-index) + 10; /* Asegurar que esté sobre otros elementos */
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    border: 1px solid var(--submenu-border-color);
}

.main-navigation li:hover > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.main-navigation .sub-menu li {
    margin-left: 0; /* Resetear margen para ítems de submenú */
    width: 100%;
}

.main-navigation .sub-menu a {
    color: var(--submenu-link-color);
    padding: var(--submenu-item-padding);
    display: block; /* Ocupar todo el ancho del li */
    width: 100%;
    font-size: 0.9rem;
    font-weight: 400;
    white-space: normal; /* Permitir que el texto del submenú se ajuste */
    line-height: 1.4;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.main-navigation .sub-menu a:hover {
    background-color: var(--submenu-link-hover-bg);
    color: var(--submenu-link-hover-color);
}

/* Estilos específicos para el submenú de Herramientas (más detallado) */
.main-navigation .sub-menu a strong {
    display: block;
    font-weight: 600;
    color: var(--header-text-color); /* O un color específico para el título */
    margin-bottom: 2px;
}
.main-navigation .sub-menu a small {
    display: block;
    font-size: 0.8em;
    color: #777;
    margin-bottom: 5px;
}
.main-navigation .sub-menu a .submenu-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85em;
    color: var(--header-link-hover-color);
    font-weight: 500;
}
.main-navigation .sub-menu a .submenu-action i {
    font-size: 0.9em;
    transition: transform 0.2s ease;
}
.main-navigation .sub-menu a:hover .submenu-action i {
    transform: translateX(3px);
}

.main-navigation .sub-menu li:not(:last-child) > a {
   /* border-bottom: 1px solid var(--submenu-border-color); */ /* Opcional: línea divisoria */
}


/* --- Botones de Acción (Acceso/Registro) --- */
.header-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre los elementos de acción */
}

.header-actions .btn {
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 25px;
    font-weight: 600;
    font-size: 0.95rem;
    transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    white-space: nowrap; /* Evita que el texto del botón se rompa */
}

.header-actions .btn i {
    margin-right: 8px;
}

.header-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.header-actions .btn-login {
    background-color: var(--header-button-secondary-bg);
    color: var(--header-button-secondary-text);
}

.header-actions .btn-login:hover {
    background-color: var(--header-button-secondary-hover-bg);
}

.header-actions .btn-register {
    background-color: var(--header-button-primary-bg);
    color: var(--header-button-primary-text);
}

.header-actions .btn-register:hover {
    background-color: var(--header-button-primary-hover-bg);
}

/* --- Estilos para la información del usuario y tokens --- */
.user-info-display {
    display: flex;
    align-items: center;
    gap: 15px;
    font-size: 0.95rem;
    color: var(--header-text-color);
    font-weight: 500;
    white-space: nowrap; /* Evita que la información se rompa */
}

.user-info-display .user-name,
.user-info-display .user-tokens {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 20px;
    background-color: #f0f0f0; /* Un fondo sutil para destacarlos */
    border: 1px solid #e0e0e0;
}

.user-info-display .user-tokens {
    background-color: #d4edda; /* Un verde claro para los tokens */
    color: #155724; /* Texto verde oscuro */
    border-color: #c3e6cb;
}
.user-info-display .user-tokens i {
    color: #28a745; /* Icono verde */
}
.user-info-display .user-name i {
    color: var(--header-link-hover-color); /* Icono azul */
}


/* --- Menú Hamburguesa (Móvil) --- */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--header-text-color);
    font-size: 1.8rem;
    cursor: pointer;
    padding: 10px;
}

.menu-toggle:hover {
    color: var(--header-link-hover-color);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* --- Diseño Responsivo --- */
@media (max-width: 991.98px) { /* Tablets */
    .main-navigation .nav-menu li {
        margin-left: 15px; /* Reducir espaciado entre ítems principales */
    }
    .header-actions .btn {
        padding: 8px 15px;
        font-size: 0.9rem;
    }
    .site-branding .brand-text {
        font-size: 1.7rem; 
    }
    .site-branding .brand-logo-link {
        gap: 8px;
    }

    /* Estilos para submenús en tablets si se quiere comportamiento diferente */
    .main-navigation .sub-menu {
        min-width: 250px; /* Ajustar ancho del submenú si es necesario */
    }

    .user-info-display {
        font-size: 0.85rem;
        gap: 10px;
    }
    .user-info-display .user-name,
    .user-info-display .user-tokens {
        padding: 3px 8px;
    }
}

@media (max-width: 767.98px) { /* Móviles */
    .header-container {
        position: relative;
    }

    .menu-toggle {
        display: block;
        order: 3; 
        margin-left: auto;
    }

    .main-navigation {
        order: 2;
        flex-grow: 1;
        margin-right: auto; 
        justify-content: flex-start; /* Alinea el menú a la izquierda en móvil */
    }
    
    .header-actions {
        display: flex; /* Mostrar acciones en móvil, pero reorganizarlas */
        order: 1; /* Moverlas al principio para que el toggle esté al final */
        flex-basis: 100%; /* Ocupar todo el ancho disponible */
        justify-content: flex-end; /* Alinear a la derecha */
        padding-bottom: 10px; /* Espacio debajo de los elementos de acción */
        border-bottom: 1px solid #eee; /* Separador */
    }

    /* Ocultar botones de login/registro en móvil si el usuario está logueado */
    .header-actions .btn-login,
    .header-actions .btn-register {
        display: none; /* Ocultar por defecto en móvil */
    }
    .header-actions .user-info-display {
        display: flex; /* Asegurarse de que se muestre en móvil si está logueado */
    }
    
    /* Menú principal en móvil */
    .main-navigation .nav-menu {
        display: none; /* Oculto por defecto */
        flex-direction: column;
        position: absolute;
        top: var(--header-height); /* Ajusta la posición para que no se superponga */
        left: 0;
        width: 100%;
        background-color: var(--header-bg-color);
        box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        padding: 15px 0;
        border-top: 1px solid var(--submenu-border-color);
    }

    .main-navigation.toggled .nav-menu { /* Cuando el menú hamburguesa está activo */
        display: flex;
    }

    .main-navigation .nav-menu li {
        margin: 0;
        width: 100%;
    }

    .main-navigation .nav-menu a { /* Estilo general para ítems de menú en móvil */
        display: block; /* Ocupar todo el ancho */
        padding: 12px 20px;
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }
    .main-navigation .nav-menu li:last-child > a { /* Quitar borde del último ítem */
        border-bottom: none;
    }

    .main-navigation .nav-menu > li > a::after { /* Quitar subrayado de hover en móvil */
        display: none;
    }

    /* Submenús en móvil */
    .main-navigation .sub-menu {
        position: static; /* Los submenús se muestran en línea, no flotantes */
        width: 100%;
        box-shadow: none;
        border: none;
        border-top: 1px dashed #ddd; /* Separador visual */
        padding: 0;
        opacity: 1; /* Siempre visible si el padre está abierto */
        visibility: visible;
        transform: none;
        display: none; /* Oculto hasta que se active el padre */
        background-color: #f9f9f9; /* Un fondo ligeramente diferente para submenús */
    }
    
    .main-navigation .nav-menu li.menu-item-has-children.open > .sub-menu {
        display: block; /* Mostrar submenú si el padre tiene la clase 'open' (manejado por JS) */
    }

    .main-navigation .sub-menu a {
        padding-left: 35px; /* Indentación para ítems de submenú */
        font-size: 0.85rem;
    }
    .main-navigation .sub-menu a i { /* Iconos más pequeños en submenú móvil */
        font-size: 0.8em;
    }

    /* Estilos para el indicador de dropdown en móvil */
    .main-navigation .nav-menu a .dropdown-indicator {
        /* El JS debería manejar el toggle de la rotación si se hace clic en el padre */
    }
    .main-navigation .nav-menu li.menu-item-has-children.open > a .dropdown-indicator {
        transform: rotate(180deg);
    }


    .site-branding .brand-text {
        font-size: 1.6rem; 
    }
     .site-branding .brand-logo-link {
        gap: 6px;
    }
}

@media (max-width: 480px) {
    .site-branding .brand-text {
        font-size: 1.4rem;
    }
    .header-container {
        padding: 0 10px;
    }
     /* Los botones de acción ahora son controlados por el bloque principal de .header-actions */
    .menu-toggle {
        font-size: 1.6rem;
    }
}
```

Tienes razón, el problema ahora no es con el header en sí, sino con el **estilo del formulario de login** y otros elementos de los componentes de Joomla que se muestran en las páginas internas. El código CSS que me proporcionaste es el de tu `header.css` (que controla el encabezado), pero el formulario de login es un componente de Joomla que tiene sus propias clases HTML.

Para que el formulario de login (y otros formularios de Joomla) se vea como en la imagen que me enviaste (campos amarillos, botón naranja, etc.), necesitas **añadir estilos CSS específicos que apunten a las clases HTML que Joomla usa para sus formularios**.

Ya te proporcioné un bloque de CSS para formularios en el chat anterior. Ahora, vamos a asegurarnos de que ese CSS esté bien ubicado y que apunte a las clases correctas.

**Dónde colocar este CSS:**

Lo más lógico es colocar estos estilos en un archivo CSS que se cargue globalmente en tu plantilla, como:

* `templates/eduai/css/sections/base.css` (si quieres que estos estilos afecten a todos los formularios del sitio).
* `templates/eduai/css/sections/header.css` (si consideras que estos estilos de formulario son parte del "estilo principal" de tu sitio, aunque el nombre `header.css` no sea el más descriptivo para formularios).
* Podrías incluso crear un nuevo archivo como `templates/eduai/css/sections/forms.css` y cargarlo en `templates/eduai/index.php` con `$theme->add_css('sections/forms.css');`. Esta sería la opción más limpia.

**Aquí está el CSS que necesitas añadir o verificar en uno de tus archivos CSS globales:**


```css
/* --- Estilos para formularios de Joomla (com_users, etc.) --- */

/* Variables de color para formularios, si no están ya en :root */
:root {
    --form-input-bg: #FFFACD; /* Amarillo claro */
    --form-input-border: #FFD700; /* Amarillo oscuro */
    --form-input-focus-border: #FFA500; /* Naranja al enfocar */
    --form-button-bg: #FFA500; /* Naranja */
    --form-button-hover-bg: #FF8C00; /* Naranja más oscuro */
    --form-text-color: #333;
    --form-label-color: #555;
    --form-link-color: #007bff;
    --form-link-hover-color: #0056b3;
}

/* Contenedor principal del formulario de login/logout */
/* Esta clase 'custom-joomla-form-wrapper' la añadimos en templates/eduai/html/com_users/default.php */
.custom-joomla-form-wrapper {
    max-width: 450px; /* Ancho máximo del formulario */
    margin: 50px auto; /* Centrar y dar espacio arriba/abajo */
    padding: 30px;
    background-color: #ffffff; /* Fondo blanco */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Sombra suave */
    border: 1px solid #e0e0e0; /* Borde ligero */
}

/* Estilos para los campos de entrada de Joomla */
/* Clases comunes de Joomla/Bootstrap para inputs: .form-control, input[type="text"], etc. */
.com-users-login input[type="text"],
.com-users-login input[type="email"],
.com-users-login input[type="password"],
.com-users-login input[type="number"],
.com-users-login textarea,
.com-users-login select,
.form-control /* Clase genérica de Bootstrap/Joomla */
{
    background-color: var(--form-input-bg);
    border: 1px solid var(--form-input-border);
    border-radius: 8px;
    padding: 10px 15px;
    font-size: 1rem;
    color: var(--form-text-color);
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
    height: auto; /* Asegura que la altura no sea fija por Bootstrap */
    line-height: 1.5; /* Espaciado de línea para el texto */
}

.com-users-login input[type="text"]:focus,
.com-users-login input[type="email"]:focus,
.com-users-login input[type="password"]:focus,
.com-users-login input[type="number"]:focus,
.com-users-login textarea:focus,
.com-users-login select:focus,
.form-control:focus {
    border-color: var(--form-input-focus-border);
    box-shadow: 0 0 0 3px rgba(255, 165, 0, 0.2);
    outline: none;
}

/* Estilos para las etiquetas de los campos */
.com-users-login label,
.control-label { /* Clase común de Joomla para etiquetas */
    font-weight: 600;
    color: var(--form-label-color);
    margin-bottom: 5px;
    display: block;
    font-size: 0.95rem;
}

/* Contenedores de grupo de formulario (para espaciado) */
.com-users-login .control-group,
.com-users-login .form-group {
    margin-bottom: 15px;
}

/* Estilo para el botón principal de login/submit */
.com-users-login .btn-primary, /* Clase de Bootstrap para botón primario */
.com-users-login .custom-login-button { /* Clase personalizada para el botón de login */
    background-color: var(--form-button-bg);
    color: white;
    border: none;
    border-radius: 8px;
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%; /* Para que ocupe todo el ancho */
    box-sizing: border-box;
}

.com-users-login .btn-primary:hover,
.com-users-login .custom-login-button:hover {
    background-color: var(--form-button-hover-bg);
    transform: translateY(-1px);
}

/* Estilo para el checkbox "Recuérdame" */
.com-users-login__remember .form-check-input {
    width: 1.2em; /* Tamaño del checkbox */
    height: 1.2em;
    margin-right: 8px;
    flex-shrink: 0;
    accent-color: var(--form-button-bg); /* Color del checkmark */
}
.com-users-login__remember .form-check-label {
    display: inline-block;
    margin-bottom: 0;
    font-weight: normal;
    color: var(--form-text-color);
}
.com-users-login__remember {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}


/* Estilos para los enlaces de opciones (¿Olvidó su contraseña?, etc.) */
.com-users-login__options.custom-form-links {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee; /* Separador sutil */
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center; /* Centrar los enlaces */
}

.com-users-login__options.custom-form-links a {
    color: var(--form-link-color);
    text-decoration: none;
    transition: color 0.2s ease, text-decoration 0.2s ease;
    font-size: 0.95rem;
}

.com-users-login__options.custom-form-links a:hover {
    text-decoration: underline;
    color: var(--form-link-hover-color);
}

/* Estilos para el page-header si se muestra el título de la página */
.com-users-login .page-header h1 {
    font-size: 1.8rem;
    color: var(--brand-main-color); /* O el color de título que prefieras */
    text-align: center;
    margin-bottom: 25px;
}

/* Estilos para el formulario de logout (para consistencia) */
.custom-logout-form .btn-primary {
    background-color: var(--form-button-bg);
    color: white;
}
.custom-logout-form .btn-primary:hover {
    background-color: var(--form-button-hover-bg);
}

/* Responsive adjustments */
@media (max-width: 575.98px) {
    .custom-joomla-form-wrapper {
        margin: 20px auto;
        padding: 20px;
        border-radius: 8px;
    }
    .com-users-login .page-header h1 {
        font-size: 1.5rem;
    }
}