/* ====================================================
   HAMBURGER MENU & MOBILE NAVBAR (DEFINITIVO)
==================================================== */
/* Ocultar el botón por defecto en PC */
.hamburger-btn {
    display: none !important;
}

/* Solo se aplica en pantallas de móvil/tablet */
@media (max-width: 900px) {
    
    /* 1. Forzar que la barra sea SIEMPRE horizontal (ignora modern.css) */
    .navbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 65px !important;
        padding: 0 20px !important;
        display: flex !important;
        flex-direction: row !important; /* CRÍTICO: Evita que se rompa en <480px */
        align-items: center !important;
        justify-content: space-between !important;
        flex-wrap: nowrap !important;
        z-index: 9999 !important;
        background: linear-gradient(90deg, rgba(15, 15, 18, 0.98), rgba(23, 23, 25, 0.95)) !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.5) !important;
    }

    /* 2. Evitar que la barra tape el contenido superior de la web */
    body {
        padding-top: 65px !important;
    }

    /* 3. Diseño del botón Hamburguesa */
    .hamburger-btn {
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        width: 30px !important;
        height: 22px !important;
        background: transparent !important;
        border: none !important;
        cursor: pointer !important;
        z-index: 10000 !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    .hamburger-btn span {
        width: 100% !important;
        height: 3px !important;
        background-color: var(--accent, #ffffff) !important;
        border-radius: 10px !important;
        transition: all 0.3s ease-in-out !important;
        transform-origin: center !important;
    }

    /* Animación fluida para convertirse en una "X" */
    .hamburger-btn.active span:nth-child(1) {
        transform: translateY(9.5px) rotate(45deg) !important;
    }
    .hamburger-btn.active span:nth-child(2) {
        opacity: 0 !important;
    }
    .hamburger-btn.active span:nth-child(3) {
        transform: translateY(-9.5px) rotate(-45deg) !important;
    }

    /* 4. Contenedor del Menú Desplegable */
    .nav-links {
        position: fixed !important;
        top: -100vh !important; /* Empieza oculto arriba fuera de la pantalla */
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        height: calc(100vh - 65px) !important;
        background: rgba(15, 15, 18, 0.98) !important;
        backdrop-filter: blur(10px) !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 30px 0 !important;
        gap: 20px !important;
        z-index: 9998 !important;
        opacity: 0 !important;
        transition: top 0.4s ease, opacity 0.4s ease !important; /* Animación de caída */
    }

    /* clase que activa JavaScript para mostrarlo */
    .nav-links.active {
        top: 65px !important; /* Baja hasta colocarse bajo la navbar */
        opacity: 1 !important;
    }

    /* 5. Diseño de los enlaces dentro del menú móvil */
    .nav-links li {
        width: 100% !important;
        text-align: center !important;
        border: none !important;
    }

    .nav-links a {
        display: inline-block !important;
        font-size: 1.2rem !important;
        font-weight: 700 !important;
        padding: 15px !important;
        color: var(--text-primary, #fff) !important;
        border: none !important;
    }

    .nav-auth {
        flex-direction: column !important;
        width: 100% !important;
        margin-top: 20px !important;
    }
}