/*
 * nav-active-overrides.css — Estilos GLOBALES para el NavMenu
 * ============================================================
 * PROPÓSITO: Este archivo debe ser GLOBAL (no .razor.css scoped) porque:
 *
 * 1. Las clases añadidas por JS (active-parent, dropdown-hover-open) no
 *    reciben el atributo de scoping de Blazor [b-xxxx]. CSS scoped fallaría.
 *
 * 2. Blazor <NavLink> renderiza <a> que PUEDEN no recibir [b-xxxx] del
 *    componente padre. Las reglas .custom-nav-item[b-xxxx] del CSS scoped
 *    no aplican a esas <a>, dejando el ::before sin definir y sin hover.
 *    Los <span> de dropdown-toggle SÍ reciben [b-xxxx] (HTML directo en
 *    NavMenu.razor) y funcionan con el CSS scoped. Pero para garantizar
 *    uniformidad, definimos aquí el baseline que aplica a ambos elementos.
 *
 * REGLA DE ORO: Todo estilo que dependa de una clase añadida/quitada por JS
 * va aquí. Todo lo demás va en NavMenu.razor.css.
 */


/* ═══════════════════════════════════════════════════════════════════════════
   SECCIÓN 0: GLOBAL BASELINE — Aplica a TODOS los .custom-nav-item
   ═══════════════════════════════════════════════════════════════════════════
   FIX RAÍZ: Define layout, tipografía, ::before y hover de forma global
   para que tanto <a> (NavLink) como <span> (dropdown-toggle) sean idénticos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── S0-A: Layout Desktop ────────────────────────────────── */
@media (min-width: 992px) {

    /* Override Bootstrap .nav-link padding + altura + display
       para CUALQUIER .custom-nav-item dentro del navbar */
    .navbar .navbar-nav .custom-nav-item,
    .navbar .navbar-nav .nav-link.custom-nav-item,
    .navbar-expand-lg .navbar-nav .nav-link.custom-nav-item {
        padding: 0 0.875rem !important;    /* px-3.5 = 14px */
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
        box-sizing: border-box !important;
        position: relative !important;     /* Contexto para ::before */
        background: transparent !important;
        text-decoration: none !important;
        color: inherit !important;
        border: none !important;
        margin: 0 !important;
        gap: 0.25rem !important;
        cursor: pointer;
        line-height: normal !important;
    }

    /* Tipografía .nav-text — aplica a los spans dentro de NavLink también */
    .navbar .nav-text {
        font-size: 13px !important;
        font-weight: 600 !important;
        color: #1F2937 !important;
        line-height: 1.5 !important;
        letter-spacing: normal !important;
        display: inline-flex;
        align-items: center;
        transition: color 0.2s ease;
    }

    /* ── S0-B: Underline ::before — DEFINIDO GLOBALMENTE ──
       CRÍTICO: si el <a> de NavLink no tiene [b-xxxx], el ::before del
       CSS scoped no existe. Al definirlo aquí (global), existe en TODOS. */
    .navbar .navbar-nav .custom-nav-item::before {
        content: '' !important;
        position: absolute !important;
        bottom: 12px !important;           /* Offset para quedar cerca del texto (navbar full-height) */
        left: 0.5rem !important;           /* React: left-2 = 8px */
        right: 0.5rem !important;          /* React: right-2 = 8px */
        height: 3px !important;            /* React: h-[3px] */
        background-color: rgba(211, 47, 47, 0.4) !important; /* 40% opacity — semitransparente en hover */
        border-radius: 9999px !important;
        transform: scaleX(0) !important;   /* oculto por defecto */
        transform-origin: center !important;
        transition: transform 0.22s ease !important;
        pointer-events: none !important;
        z-index: 1 !important;
    }

    /* ── S0-C: Triggers de HOVER — aplica a TODOS (simples + dropdowns) ──
       Dispara tanto el color del texto como la animación del underline.
       Para dropdowns, lo hace inmediatamente en hover; el panel abre con
       delay de 350ms via JS (dropdown-hover-open). No hay conflicto. */
    .navbar .nav-item:hover > .custom-nav-item::before {
        transform: scaleX(1) !important;
        background-color: #D32F2F !important;
    }

    .navbar .nav-item:hover > .custom-nav-item .nav-text {
        color: #D32F2F !important;
    }

    /* ── S0-C2: Triggers de ACTIVE — Blazor NavLink agrega .active al <a> ──
       CRÍTICO: El CSS scoped (.razor.css) compila como .nav-link.active[b-xxxx]::before,
       pero el <a> generado por NavLink NO recibe el atributo [b-xxxx] de NavMenu.
       Por eso el selector scoped nunca matchea. Esta regla global es el fallback
       que garantiza que el underline y el color rojo se muestren en la ruta activa. */
    .navbar .nav-link.active::before,
    .navbar .custom-nav-item.active::before {
        transform: scaleX(1) !important;
        background-color: #D32F2F !important;
    }

    .navbar .nav-link.active .nav-text,
    .navbar .custom-nav-item.active .nav-text {
        color: #D32F2F !important;
    }
}

/* ── S0-D: Layout Móvil ─────────────────────────────────── */
@media (max-width: 991.98px) {

    /* Baseline para TODOS los enlaces en móvil */
    .navbar .navbar-nav .custom-nav-item,
    .navbar .navbar-nav .nav-link.custom-nav-item {
        padding: 12px 16px !important;
        width: 100% !important;
        display: flex !important;
        justify-content: flex-start !important;
        align-items: center !important;
        height: auto !important;
        border-radius: 0.75rem !important;
        text-decoration: none !important;
        color: inherit !important;
        background: transparent !important;
        border: none !important;
        border-left: 3px solid transparent !important; /* Reserva espacio para el borde activo sin layout shift */
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Los dropdown-toggle empujan el chevron a la derecha */
    .navbar .navbar-nav span.custom-nav-item.dropdown-toggle {
        justify-content: space-between !important;
    }

    /* Tipografía .nav-text en móvil: 15px para legibilidad táctil */
    .navbar .nav-text {
        font-size: 0.9375rem !important;
        font-weight: 600 !important;
        color: var(--scout-text-gray) !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECCIÓN 1: ACTIVE-PARENT (clase añadida por JS post-render)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Active-Parent: texto rojo ───────────────────────────── */
.nav-item.active-parent > .custom-nav-item .nav-text,
.nav-item.dropdown.active-parent > span .nav-text,
.nav-item.dropdown.active-parent > .dropdown-toggle .nav-text,
.nav-item.dropdown.active-parent > span.custom-nav-item .nav-text {
    color: #D32F2F !important;
}

/* ── Active-Parent: chevron rojo ─────────────────────────── */
.nav-item.active-parent > .custom-nav-item .icon-chevron-down,
.nav-item.dropdown.active-parent > span .icon-chevron-down,
.nav-item.dropdown.active-parent > .dropdown-toggle .icon-chevron-down,
.nav-item.dropdown.active-parent > span.custom-nav-item .icon-chevron-down {
    color: #D32F2F !important;
}

/* ── Active-Parent: underline rojo sólido ────────────────── */
.nav-item.active-parent > .custom-nav-item::before,
.nav-item.dropdown.active-parent > span::before,
.nav-item.dropdown.active-parent > .dropdown-toggle::before,
.nav-item.dropdown.active-parent > span.custom-nav-item::before {
    transform: scaleX(1) !important;
    background-color: #D32F2F !important;
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECCIÓN 2: DROPDOWN-HOVER-OPEN (clase añadida por JS con delay 350ms)
   ═══════════════════════════════════════════════════════════════════════════
   IMPORTANTE: El :hover CSS puro fue eliminado de NavMenu.razor.css para
   el PANEL. Solo .dropdown-hover-open controla la apertura del panel.
   El hover de texto/underline sí usa :hover (Sección 0-C).
   ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 992px) {
    /* Abrir el panel */
    .nav-item.dropdown.dropdown-hover-open > .dropdown-panel {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(-50%) translateY(0) !important;
        pointer-events: auto !important;
    }

    /* Chevron rotado cuando panel está abierto */
    .nav-item.dropdown.dropdown-hover-open .icon-chevron-down {
        transform: rotate(180deg) !important;
        color: #D32F2F !important;
    }

    /* Texto rojo cuando panel está abierto */
    .nav-item.dropdown.dropdown-hover-open .nav-text {
        color: #D32F2F !important;
    }

    /* Underline rojo sólido cuando panel está abierto */
    .nav-item.dropdown.dropdown-hover-open > .custom-nav-item::before,
    .nav-item.dropdown.dropdown-hover-open > span::before,
    .nav-item.dropdown.dropdown-hover-open > .dropdown-toggle::before {
        transform: scaleX(1) !important;
        background-color: #D32F2F !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   SECCIÓN 3: ACTIVE-PARENT EN MÓVIL
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 991.98px) {
    .nav-item.active-parent > .custom-nav-item,
    .nav-item.dropdown.active-parent > span,
    .nav-item.dropdown.active-parent > .dropdown-toggle,
    .nav-item.dropdown.active-parent > span.dropdown-toggle,
    .nav-item.dropdown.active-parent > span.custom-nav-item {
        color: #D32F2F !important;
        background-color: #FEF2F2 !important;
        border-left: 3px solid #D32F2F !important;
    }

    .nav-item.active-parent > .custom-nav-item .nav-text,
    .nav-item.dropdown.active-parent > span .nav-text,
    .nav-item.dropdown.active-parent > .dropdown-toggle .nav-text {
        color: #D32F2F !important;
    }

    .nav-item.active-parent .icon-chevron-down {
        color: #D32F2F !important;
    }
}