/* =================================
   HEADER CLASICO (con Variables CSS y Variantes)
   ================================= */

/* Aplicar variables y estilos base al header */
.header.header-theme-clasico {
    /* Usar variables con fallbacks */
    background: var(--header-bg-color, #fff);
    border-bottom: 1px solid var(--header-border-color, #e5e5e5);
    position: sticky;
    top: 0;
    z-index: 1000; /* Asegurar que esté por encima del contenido */
    transition: background-color var(--header-transition-speed, 0.3s) ease;
}

.header.header-theme-clasico .header__inner {
    max-width: 1400px; /* O usar una variable global */
    margin: 0 auto;
    display: flex;
    align-items: center;
    /* justify-content y flex-direction cambiarán según la variante */
    padding: var(--header-padding-y, 10px) var(--header-padding-x, 1rem);
    position: relative; /* Para algunos posicionamientos si fuera necesario */
}

/* --- Logo --- */
.header.header-theme-clasico .header__logo img {
    display: block; /* Evita espacio extra debajo */
    height: var(--header-logo-height, 40px); /* Controlado por variable */
    width: auto; /* Mantiene proporción */
    transition: height var(--header-transition-speed, 0.3s) ease;
}

/* --- Botón Toggle Móvil --- */
.header.header-theme-clasico .header__toggle {
    display: none; /* Oculto en desktop */
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--mobile-toggle-color, #333); /* Variable para color */
    padding: 0.5rem;
    z-index: 10; /* Encima de otros elementos si se solapan */
}

.header.header-theme-clasico .header__toggle:hover {
    color: var(--header-accent-color, #007bff); /* Color de acento al hover */
}

.header.header-theme-clasico .nav {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    gap: var(--nav-gap, 1.5rem); /* Espacio entre items controlado por variable */
}

.header.header-theme-clasico .nav__item {
    position: relative;
}

.header.header-theme-clasico .nav__item > a {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem; /* Podría ser variable */
    gap: 0.4em;
    color: var(--nav-link-color, #333); /* Variable */
    font-size: var(--nav-link-font-size, 1rem); /* Variable */
    text-decoration: none;
    background-color: var(--nav-link-hover-bg-color, transparent); /* Variable */
    transition: color var(--header-transition-speed, 0.3s) ease,
        background-color var(--header-transition-speed, 0.3s) ease;
    border-radius: 4px; /* Pequeño redondeo opcional */
}

.header.header-theme-clasico .nav__item > a:hover,
.header.header-theme-clasico .nav__item > a:focus {
    color: var(--nav-link-hover-color, #007bff); /* Variable */
    background-color: var(--nav-link-hover-bg-color, transparent); /* Variable */
    outline: none;
}

.header.header-theme-clasico .nav__item > a .fa-xs {
    font-size: 0.65em;
    opacity: 0.7;
    margin-left: 0.2em;
    transition: transform var(--header-transition-speed, 0.3s) ease;
}

.header.header-theme-clasico .nav__item.has-dropdown:hover > a .fa-chevron-down {
    transform: rotate(180deg);
}

/* --- Dropdown (Desktop) --- */
.header.header-theme-clasico .nav__item.has-dropdown > .dropdown {
    position: absolute;
    top: calc(100% + 10px); /* Espacio desde el item padre */
    left: 0;
    background: var(--dropdown-bg-color, #fff); /* Variable */
    box-shadow: var(--dropdown-shadow, 0 4px 12px rgba(0, 0, 0, 0.1)); /* Variable */
    border-radius: 8px;
    min-width: 200px;
    z-index: 200;
    border: 1px solid var(--dropdown-border-color, #eee); /* Variable */
    list-style: none;
    padding: 0.5rem; /* Espacio interior */
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity var(--header-transition-speed, 0.3s) ease,
        visibility 0s var(--header-transition-speed, 0.3s) linear, transform var(--header-transition-speed, 0.3s) ease;
}

.header.header-theme-clasico .nav__item.has-dropdown:hover > .dropdown,
.header.header-theme-clasico .nav__item.has-dropdown:focus-within > .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s;
}

.header.header-theme-clasico .dropdown li {
    position: relative;
}

.header.header-theme-clasico .dropdown li a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: var(--dropdown-link-font-size, 1rem); /* Variable */
    padding: 0.75rem 1rem;
    color: var(--dropdown-link-color, #333); /* Color de texto base */
    text-decoration: none;
    white-space: nowrap;
    background-color: transparent; /* <-- CORREGIDO: Fondo base transparente */
    border-radius: 6px;
    transition: background-color var(--header-transition-speed, 0.2s) ease,
        color var(--header-transition-speed, 0.2s) ease;
}

.header.header-theme-clasico .dropdown li a:hover,
.header.header-theme-clasico .dropdown li a:focus {
    background-color: var(--dropdown-link-hover-bg-color, #f7f7f7); /* Variable */
    color: var(--dropdown-link-hover-color, #007bff); /* Variable */
    outline: none;
}

.header.header-theme-clasico .dropdown li a .fa-chevron-right {
    font-size: 0.7em;
    opacity: 0.6;
    margin-left: 1em;
}

/* Sub-Dropdown */
.header.header-theme-clasico .dropdown li.has-dropdown > ul {
    position: absolute;
    top: -0.5rem; /* Ajustar para alinear con padding del padre */
    left: calc(100% + 0.5rem); /* Espacio lateral */
    background: var(--dropdown-bg-color, #fff); /* Variable */
    box-shadow: var(--dropdown-shadow, 0 4px 12px rgba(0, 0, 0, 0.1)); /* Variable */
    border-radius: 8px;
    min-width: 180px;
    z-index: 210;
    border: 1px solid var(--dropdown-border-color, #eee); /* Variable */
    list-style: none;
    padding: 0.5rem;
    margin: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: opacity var(--header-transition-speed, 0.3s) ease,
        visibility 0s var(--header-transition-speed, 0.3s) linear, transform var(--header-transition-speed, 0.3s) ease;
}

.header.header-theme-clasico .dropdown li.has-dropdown:hover > ul,
.header.header-theme-clasico .dropdown li.has-dropdown:focus-within > ul {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition-delay: 0s;
}

/* --- Botones de Acción --- */
.header.header-theme-clasico .header__actions {
    display: flex;
    align-items: center;
    /* No añadir flex:1 aquí, dejar que tome su tamaño natural */
}

/* Estilos base si NO usas PixelUI (mejor usar las clases de PixelUI) */
/* .header.header-theme-clasico .header__actions .btn { padding: 0.5rem 1rem; } */

/* =================================
        VARIANTES DE LAYOUT
   ================================= */

/* --- Variante Normal (default) --- */
.header.header-theme-clasico.layout-normal .header__inner {
    justify-content: space-between;
}

.header.header-theme-clasico.layout-normal .header__nav {
    flex: 1; /* Ocupa espacio disponible */
    margin: 0 2rem; /* Margen entre logo/acciones */
    display: flex;
    justify-content: flex-start; /* Alinea items a la izquierda por defecto */
}

/* --- Variante Funcional --- */
.header.header-theme-clasico.layout-funcional .header__inner {
    justify-content: space-between; /* Logo izq, Acciones der */
}

.header.header-theme-clasico.layout-funcional .header__nav {
    flex: 1; /* Ocupa espacio */
    margin: 0 1rem; /* Menos margen que normal */
    display: flex;
    justify-content: center; /* Centra la lista ul.nav */
}

.header.header-theme-clasico.layout-funcional .nav {
    /* El ul.nav se centrará dentro del .header__nav */
    /* Podría necesitar width: auto; o similar si no se centra bien */
    display: inline-flex; /* Para que no ocupe todo el ancho si .header__nav es flex */
}

/* --- Variante Comercial --- */
.header.header-theme-clasico.layout-comercial .header__inner {
    flex-direction: column; /* Apila los elementos */
    justify-content: center; /* Centra verticalmente (ahora que es columna) */
    align-items: center; /* Centra horizontalmente */
    padding-top: var(--header-padding-y, 15px); /* Más padding arriba/abajo */
    padding-bottom: var(--header-padding-y, 15px);
}

.header.header-theme-clasico.layout-comercial .header__logo {
    margin-bottom: 1rem; /* Espacio debajo del logo */
    /* El logo ya está centrado por align-items: center en el inner */
}

.header.header-theme-clasico.layout-comercial .header__nav {
    margin: 0; /* Sin margen lateral */
    /* La nav se centrará por align-items: center en el inner */
    /* Podría necesitar un width: 100% y text-align: center si los items no se centran */
    order: 2; /* Se asegura que va después del logo */
    width: 100%; /* Ocupa ancho para centrar bien */
    display: flex;
    justify-content: center; /* Centra el UL */
}

.header.header-theme-clasico.layout-comercial .nav {
    justify-content: center; /* Centra los LIs dentro del UL */
    width: auto; /* Ocupa solo lo necesario */
    padding: 0.5rem 0; /* Espacio arriba/abajo */
}

.header.header-theme-clasico.layout-comercial .header__actions {
    /* Las acciones podrían ir arriba a la derecha o debajo del menú */
    /* Opción 1: Arriba derecha (posición absoluta relativa a .header__inner) */
    position: absolute;
    top: var(--header-padding-y, 15px);
    right: var(--header-padding-x, 1rem);
    /* Asegurarse que tenga align-self: flex-start; si no está ya */

    /* Opción 2: Debajo del menú (quitar absolute y añadir margen) */
    /* margin-top: 1rem; */
    /* order: 3; */ /* Después de la nav */
}

/* Esconder toggle en layout comercial desktop */
.header.header-theme-clasico.layout-comercial .header__toggle {
    /* Podría requerir posición absoluta también si las acciones están absolutas */
    position: absolute;
    top: var(--header-padding-y, 15px);
    left: var(--header-padding-x, 1rem); /* O right si se prefiere */
    /* Importante: Este toggle solo debe mostrarse en móvil */
}

/* --- Variante Expandido (Nuevo - Basado en Funcional) --- */
.header.header-theme-clasico.layout-expandido .header__inner {
    justify-content: space-between; /* Mantiene Logo izq, Acciones der */
}

.header.header-theme-clasico.layout-expandido .header__nav {
    flex: 1; /* Ocupa espacio disponible */
    margin: 0 1rem; /* Mismo margen que funcional */
    display: flex;
    /* === CAMBIO PRINCIPAL === */
    justify-content: flex-end; /* Alinea la lista ul.nav a la derecha */
    /* ======================== */
}

.header.header-theme-clasico.layout-expandido .nav {
    /* El ul.nav se alineará a la derecha dentro del .header__nav */
    display: inline-flex; /* Para que no ocupe todo el ancho si .header__nav es flex */
    /* No necesita cambios respecto a funcional aquí */
}

/* =================================
        RESPONSIVE / MOBILE
   ================================= */
@media (max-width: 991.98px) {
    /* Punto de quiebre común para menú móvil (ajustar si es necesario) */
    .header.header-theme-clasico .header__inner {
        /* Asegurar space-between en móvil para logo y toggle */
        justify-content: space-between;
        /* Quitar flex-direction column si estaba en comercial */
        flex-direction: row;
        position: relative; /* Para elementos absolutos internos si los hubiera */
    }

    .header.header-theme-clasico .header__toggle {
        display: block; /* Mostrar toggle */
    }

    .header.header-theme-clasico.layout-comercial .header__nav {
        display: none; /* Ocultar nav desktop en móvil */
    }

    .header.header-theme-clasico.layout-funcional .header__nav {
        display: none; /* Ocultar nav desktop en móvil */
    }

    /* Si el layout es comercial, el logo y toggle deben estar centrados */
    .header.header-theme-clasico.layout-comercial .header__inner {
        justify-content: center; /* Centra el logo y toggle */
        align-items: center; /* Asegura que estén centrados verticalmente */
    }

    .header.header-theme-clasico .header__nav,
    .header.header-theme-clasico .header__actions {
        display: none; /* Ocultar nav desktop y acciones desktop */
    }

    /* Asegurar que el logo no se vea afectado por layout comercial en móvil */
    .header.header-theme-clasico.layout-comercial .header__logo {
        margin-bottom: 0;
    }

    /* Quitar posicionamiento absoluto de acciones/toggle en móvil si se usó */
    .header.header-theme-clasico.layout-comercial .header__actions,
    .header.header-theme-clasico.layout-comercial .header__toggle {
        position: static;
    }

    .header.header-theme-clasico.layout-comercial .header__actions {
        display: none; /* Ocultar acciones desktop también en comercial móvil */
    }

    .header.header-theme-clasico.layout-expandido .header__nav {
        display: none; /* Ocultar nav desktop en móvil */
    }
}

/* =================================
        ESTILOS MENÚ MÓVIL (DRAWER)
   ================================= */
.mobile-menu {
    position: fixed;
    top: 0;
    left: 0;
    width: 90%;
    max-width: 500px;
    box-shadow: 0px 0px 12px 5px #00000030;
    height: 100vh;
    background: var(--mobile-menu-bg-color, #fff);
    visibility: hidden;
    transform: translateX(-100%); /* empujado a la izquierda */
    transition: transform 0.4s ease, visibility 0s 0.4s;
    z-index: 1050;
}

/* Estado abierto */
.mobile-menu.is-open {
    visibility: visible;
    transform: translateX(0); /* entra */
    transition: 0.4s ease;
    opacity: 1; /* Asegura que sea visible */
}

.mobile-menu__panel {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Evita scroll del panel principal */
}

.mobile-menu__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--header-padding-y, 10px) 1rem; /* Padding similar al header */
    border-bottom: 1px solid var(--header-border-color, #e5e5e5); /* Variable */
    flex-shrink: 0; /* Evita que se encoja */
}

.mobile-menu__logo {
    height: 40px;
    width: auto;
}

.mobile-menu__close {
    background: none;
    border: none;
    font-size: 1.3rem;
    color: var(--mobile-menu-close-color, #333); /* Variable */
    cursor: pointer;
    padding: 0.5rem;
}

.mobile-menu__close:hover {
    color: var(--header-accent-color, #007bff); /* Variable */
}

.mobile-menu__body {
    flex-grow: 1; /* Ocupa el resto del espacio */
    overflow-y: auto; /* Scroll si el contenido es largo */
    overflow-x: hidden; /* Evita scroll horizontal */
    position: relative; /* Para posicionar los sub-paneles */
}

.mobile-menu .menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute; /* Todos los niveles son absolutos */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--mobile-menu-bg-color, #fff); /* Fondo consistente */
    transform: translateX(100%); /* Ocultos a la derecha */
    transition: transform var(--header-transition-speed, 0.4s) cubic-bezier(0.23, 1, 0.32, 1);
    visibility: hidden;
    overflow-y: auto; /* Scroll independiente por nivel */
}

.mobile-menu .menu-list.is-active {
    transform: translateX(0);
    visibility: visible;
    z-index: 1; /* Nivel activo visible */
}

.mobile-menu .menu-list[data-level="1"] {
    position: static; /* El nivel 1 es estático dentro del body */
    transform: none;
    visibility: visible;
    height: auto; /* Altura automática para nivel 1 */
    overflow-y: visible;
}

.mobile-menu .menu-list li {
    border-bottom: 1px solid var(--header-border-color, #e5e5e5); /* Separador */
    padding: 0px 22px;
    transition: ease-in-out var(--header-transition-speed, 0.2s);
}

.mobile-menu .menu-list li:hover {
    background-color: var(--mobile-menu-item-hover-bg-color, #f0f0f0); /* Fondo al hover */
}

.mobile-menu .menu-list li:last-child {
    border-bottom: none;
}

.mobile-menu .menu-list li a,
.mobile-menu .menu-list li span {
    /* Para items con submenu */
    display: flex; /* Usar flex para alinear */
    justify-content: space-between; /* Pone el icono > al final */
    align-items: center;
    padding: 0.9rem 0; /* Padding vertical */
    color: var(--mobile-menu-link-color, #333); /* Variable */
    text-decoration: none;
    font-size: 0.95rem;
    transition: background-color var(--header-transition-speed, 0.2s) ease;
    cursor: pointer;
}

.mobile-menu .menu-list li span .fa-chevron-right,
.mobile-menu .menu-list li span .fa-chevron-left {
    font-size: 0.8em;
    opacity: 0.6;
}

.mobile-menu .menu-list .back-btn span {
    justify-content: flex-start; /* Alinea "Volver" a la izquierda */
    gap: 0.7em;
    color: var(--header-accent-color, #007bff); /* Color acento para "Volver" */
    font-weight: 500;
}

.mobile-menu .menu-list .back-btn {
    border-bottom-color: var(--header-accent-color, #007bff); /* Línea más gruesa o de color */
    border-bottom-width: 2px;
    margin-bottom: 0.5rem; /* Espacio después de volver */
}

/* Estilos para botones de acción en móvil */
.mobile-menu .menu-list .mobile-actions-divider {
    border-bottom: none; /* Quitar borde si hay divisor */
    padding: 1rem 0;
}

.mobile-menu .menu-list .mobile-actions-divider hr {
    border: none;
    border-top: 1px solid var(--header-border-color, #e5e5e5);
    margin: 0;
}

.mobile-menu .menu-list li.mt-3 {
    /* Para el botón secundario */
    border-bottom: none; /* Quitar borde al separador del botón secundario */
}

.mobile-menu .menu-list li .btn {
    width: 100%;
    text-align: center;
    padding: 0.8rem 1rem; /* Padding botones móvil */
    margin-top: 0.5rem; /* Espacio si hay varios botones */
    display: block; /* Asegura que ocupa el LI */
}

.mobile-menu .menu-list li:has(.btn) {
    border-bottom: none; /* Quitar borde si el LI contiene un botón */
    padding: 0.5rem 0; /* Reducir padding vertical del LI */
}

/* Overlay (opcional, si se usa) */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    z-index: 1040; /* Debajo del menú, encima del contenido */
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--header-transition-speed, 0.4s) ease,
        visibility 0s var(--header-transition-speed, 0.4s) linear;
}

.mobile-menu.is-open + .mobile-menu-overlay {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* --- Estilos Base para Contenedor de Acciones --- */
.header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem; /* Espacio entre botones/links/iconos */
}

/* --- Estilo Botón de Acción (Tipo 'button') --- */
.header__action-button {
    display: inline-flex; /* Alinea icono y texto */
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 1px solid transparent; /* Borde base */
    cursor: pointer;
    transition: color var(--header-transition-speed, 0.3s) ease,
        background-color var(--header-transition-speed, 0.3s) ease,
        border-color var(--header-transition-speed, 0.3s) ease;
    white-space: nowrap; /* Evita que el texto se parta */
}

.header__action-button.is-primary {
    background-color: var(--action-btn-primary-bg);
    color: var(--action-btn-primary-text);
    border-color: var(--action-btn-primary-border);
    padding: var(--action-btn-primary-padding);
    border-radius: var(--action-btn-primary-radius);
    font-size: var(--action-btn-primary-fontsize);
}

.header__action-button.is-primary:hover,
.header__action-button.is-primary:focus {
    background-color: var(--action-btn-primary-hover-bg);
    color: var(--action-btn-primary-hover-text);
    border-color: var(--action-btn-primary-hover-border);
    outline: none;
}

.header__action-button.is-secondary {
    background-color: var(--action-btn-secondary-bg);
    color: var(--action-btn-secondary-text);
    border: 1px solid var(--action-btn-secondary-border); /* Borde visible */
    padding: var(--action-btn-secondary-padding);
    border-radius: var(--action-btn-secondary-radius);
    font-size: var(--action-btn-primary-fontsize);
}

.header__action-button.is-secondary:hover,
.header__action-button.is-secondary:focus {
    background-color: var(--action-btn-secondary-hover-bg);
    color: var(--action-btn-secondary-hover-text);
    border-color: var(--action-btn-secondary-hover-border);
    outline: none;
}

/* --- Estilo Link de Acción (Tipo 'link') --- */
.header__action-link {
    display: inline-flex;
    align-items: center;
    color: var(--action-link-color);
    font-size: var(--action-link-size);
    text-decoration: var(--action-link-decoration);
    padding: 0.5rem; /* Añadir algo de padding para facilitar click */
    transition: color var(--header-transition-speed, 0.3s) ease;
}

.header__action-link:hover,
.header__action-link:focus {
    color: var(--action-link-hover-color);
    text-decoration: var(--action-link-hover-decoration);
    outline: none;
}

/* --- Estilo Icono de Acción (Tipo 'icon') --- */
.header__action-icon {
    display: inline-flex; /* O flex si quieres centrar */
    align-items: center;
    justify-content: center;
    padding: var(--action-icon-padding);
    background-color: var(--action-icon-bg);
    border-radius: var(--action-icon-radius);
    text-decoration: none;
    transition: background-color var(--header-transition-speed, 0.3s) ease;
}

.header__action-icon i {
    color: var(--action-icon-color);
    font-size: var(--action-icon-size);
    transition: color var(--header-transition-speed, 0.3s) ease;
    line-height: 1; /* Asegura que el icono no añada altura extra */
}

.header__action-icon:hover,
.header__action-icon:focus {
    background-color: var(--action-icon-hover-bg);
    outline: none;
}

.header__action-icon:hover i,
.header__action-icon:focus i {
    color: var(--action-icon-hover-color);
}

/* --- Estilos Adicionales --- */
.visually-hidden {
    /* Para accesibilidad de iconos solos */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.me-1 {
    margin-right: 0.4em;
} /* Espacio entre icono y texto */
.me-2 {
    margin-right: 0.5rem;
} /* Espacio entre botones/links desktop */

/* --- Estilos para Acciones en Menú Móvil --- */
.mobile-menu .mobile-action-item {
    padding: 0; /* Quitar padding del LI si el enlace/botón ya lo tiene */
    border-bottom: none; /* Quitar borde usual de items de menú */
}

.mobile-menu .mobile-action-item:first-of-type {
    margin-top: 0.5rem; /* Espacio después del divisor <hr> */
}

.mobile-menu .mobile-action-item .btn-block {
    /* Clase helper para ocupar ancho */
    display: block;
    width: 100%;
    text-align: center; /* Centrar texto/icono */
}

.mobile-menu .mobile-action-item .header__action-button,
.mobile-menu .mobile-action-item .header__action-link {
    padding-top: 0.8rem; /* Ajustar padding vertical para móvil */
    padding-bottom: 0.8rem;
}

.mobile-menu .mobile-action-item .header__action-icon {
    padding: 0.8rem; /* Ajustar padding para iconos en móvil */
}

.mobile-menu .mt-2 {
    /* Margen entre botones/links móviles */
    margin-top: 0.5rem;
}