/* css/menu.css - VERSIÓN REUTILIZABLE */

/* =======================================================
   1. ESTRUCTURA BASE (Aplica a Celular y PC)
   ======================================================= */
nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1.5rem;
    position: relative;
    z-index: 1000;
    height: 100%;
}

nav ul.nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
}

nav ul.nav-links li a {
    text-decoration: none;
    display: block;
}

/* =======================================================
   2. DISEÑO EXCLUSIVO DE ESCRITORIO (Pantallas Grandes)
   ======================================================= */
@media (min-width: 992px) { 

    nav {
        padding: 1rem 5%;
    }

    /* LA BARRA HORIZONTAL */
    nav ul.nav-links {
        display: flex !important;
        flex-direction: row;
        gap: 20px;
        position: static;
        width: auto;
        height: auto;
        background: transparent;
        box-shadow: none;
        align-items: center;
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: none !important;
    }

    nav ul.nav-links li {
        width: auto;
        margin: 0;
    }

    nav ul.nav-links li a {
        color: #fff;
        font-size: 1.1rem;
        padding: 8px 15px;
        border-radius: 5px;
        transition: all 0.3s ease;
        text-align: center;
        /* Quitamos los reseteos agresivos para permitir que el estilo active fluya */
    }

    /* Hover en PC */
    nav ul.nav-links li a:hover {
        background-color: rgba(255, 255, 255, 0.2);
    }

    /* BOTÓN ACTIVO EN PC - REUTILIZANDO TU ESTILO ORIGINAL */
    .nav-links a.active {
        /* Eliminamos los !important que "limpiaban" el diseño.
           Ahora, si en otro CSS definiste un gradiente o borde, aquí se verá. */
        font-weight: bold;
        color: #fff !important;
        
        /* Mantenemos un fondo sutil solo por si tu estilo anterior 
           era exclusivo para el menú lateral, para que en PC tenga base. */
        background-color: rgba(255, 255, 255, 0.25);
        
        /* Quitamos las cancelaciones para que el diseño previo herede correctamente */
    }
}