/* ================================================
   NAIRI - MOBILE MENU FIX + AESTHETIC UPGRADE
   Cargado al final para máxima prioridad en cascade
   ================================================ */

/* -----------------------------------------------
   1. FIX HEADER IMAGEN EN MÓVIL
   El main-optimized.css fuerza height:580px que deja
   un hueco vacío bajo la imagen responsive.
   ----------------------------------------------- */
@media (max-width: 990px) {
    #header,
    header#header {
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        /* Anular content-visibility:auto que reserva espacio fantasma */
        content-visibility: visible !important;
    }

    #header > div,
    header#header > div {
        height: auto !important;
    }

    #header picture,
    header#header picture {
        display: block !important;
    }

    #header img,
    header#header img {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
    }
}

/* -----------------------------------------------
   2. MENÚ MÓVIL - BASE (CERRADO)
   Se aplica sobre las reglas de herramientas-improvements
   que usaba .show (Bootstrap 4). Ahora usamos
   .nai-menu-open toggleado por nuestro JS.
   ----------------------------------------------- */
@media (max-width: 991.98px) {

    /* Asegurar que el nav sea positioning context para el dropdown absoluto */
    .nai_nav_bar {
        overflow: visible !important;
    }

    /* Estado CERRADO — 3 clases = especificidad (0,3,0), gana a herramientas */
    .navbar-collapse.nai_nav_collapse {
        /* Ocultamiento */
        display: none !important;
        visibility: hidden !important;
        opacity: 0;
        /* Posición fija: evita clipping de cualquier overflow del nav flex container */
        position: fixed !important;
        top: 80px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        /* Restaurar altura y overflow para la transición */
        height: auto !important;
        max-height: none !important;
        overflow: hidden !important;
        /* Animación de entrada */
        transform: translateY(-6px);
        transition: opacity 0.25s ease, transform 0.25s ease;
        /* Estética */
        background: linear-gradient(180deg,
            rgba(6, 28, 24, 0.97) 0%,
            rgba(10, 44, 40, 0.97) 100%) !important;
        backdrop-filter: blur(14px) !important;
        -webkit-backdrop-filter: blur(14px) !important;
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55) !important;
        border-top: 2px solid rgba(31, 121, 113, 0.55) !important;
        border-bottom: 1px solid rgba(31, 121, 113, 0.2) !important;
        border-radius: 0 0 12px 12px !important;
        z-index: 10000 !important;
        padding: 8px 0 20px !important;
        /* Resetear conflictos de flex heredados */
        flex-direction: column !important;
        align-items: stretch !important;
        justify-content: flex-start !important;
        margin: 0 !important;
    }

    /* Estado ABIERTO (0,3,0) > herramientas (0,2,0) */
    .navbar-collapse.nai_nav_collapse.nai-menu-open {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* Soporte de fallback Bootstrap 3 (.in) */
    .navbar-collapse.nai_nav_collapse.in {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: translateY(0) !important;
    }

    /* ---- Links dentro del menú móvil ---- */
    .nai_nav_collapse .nai_nav_links {
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        height: auto !important;
    }

    .nai_nav_collapse .nai_nav_links a,
    .nai_nav_collapse .nai_nav_ctool {
        display: block !important;
        width: 100% !important;
        padding: 15px 28px !important;
        font-size: 15px !important;
        font-weight: 500 !important;
        letter-spacing: 0.4px !important;
        color: rgba(255, 255, 255, 0.88) !important;
        text-align: left !important;
        text-decoration: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
        transition: background 0.18s ease, color 0.18s ease,
                    padding-left 0.18s ease !important;
        justify-content: flex-start !important;
        align-items: center !important;
        line-height: 1.5 !important;
        white-space: normal !important;
        height: auto !important;
        margin: 0 !important;
    }

    .nai_nav_collapse .nai_nav_links a:last-child {
        border-bottom: none !important;
    }

    .nai_nav_collapse .nai_nav_links a:hover,
    .nai_nav_collapse .nai_nav_links a:focus,
    .nai_nav_collapse .nai_nav_ctool:hover,
    .nai_nav_collapse .nai_nav_ctool:focus {
        background: rgba(31, 121, 113, 0.2) !important;
        color: #5fd9c8 !important;
        padding-left: 38px !important;
    }

    /* C-Tool: acento especial */
    .nai_nav_collapse .nai_nav_ctool {
        color: #2ecfba !important;
        font-weight: 700 !important;
        border-bottom: 1px solid rgba(46, 207, 186, 0.25) !important;
        padding-bottom: 16px !important;
        margin-bottom: 4px !important;
    }

    /* ---- Botón hamburguesa ---- */
    .nai_nav_bar .navbar-toggle {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 5px !important;
        width: 44px !important;
        height: 44px !important;
        padding: 10px !important;
        background: rgba(255, 255, 255, 0.05) !important;
        border: 1px solid rgba(255, 255, 255, 0.28) !important;
        border-radius: 8px !important;
        cursor: pointer !important;
        transition: border-color 0.22s ease, background 0.22s ease !important;
        margin-top: auto !important;
        margin-bottom: auto !important;
        float: right !important;
        position: relative !important;
        z-index: 10001 !important;
    }

    .nai_nav_bar .navbar-toggle:hover,
    .nai_nav_bar .navbar-toggle:focus {
        background: rgba(31, 121, 113, 0.18) !important;
        border-color: rgba(31, 121, 113, 0.8) !important;
        outline: none !important;
    }

    /* Barras del hamburger */
    .nai_nav_bar .navbar-toggle .icon-bar {
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        background-color: #ffffff !important;
        border-radius: 2px !important;
        transition: transform 0.3s ease, opacity 0.3s ease !important;
        transform-origin: center center !important;
        margin: 0 !important;
    }

    .nai_nav_bar .navbar-toggle .icon-bar + .icon-bar {
        margin-top: 0 !important;
    }

    /* Estado ABIERTO: hamburger → X */
    .nai_nav_bar .navbar-toggle.nai-open .icon-bar:nth-child(2) {
        transform: translateY(7px) rotate(45deg) !important;
    }
    .nai_nav_bar .navbar-toggle.nai-open .icon-bar:nth-child(3) {
        opacity: 0 !important;
        transform: scaleX(0) !important;
    }
    .nai_nav_bar .navbar-toggle.nai-open .icon-bar:nth-child(4) {
        transform: translateY(-7px) rotate(-45deg) !important;
    }
}

/* -----------------------------------------------
   3. DESKTOP — asegurar visibilidad normal
   ----------------------------------------------- */
@media (min-width: 992px) {
    .navbar-collapse.nai_nav_collapse {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        background: transparent !important;
        box-shadow: none !important;
        border-top: none !important;
        border-bottom: none !important;
        border-radius: 0 !important;
        transform: none !important;
        transition: none !important;
        padding: 0 !important;
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
        z-index: auto !important;
        width: auto !important;
    }

    .nai_nav_bar .navbar-toggle {
        display: none !important;
    }
}