/* ==========================================================================
   ASODIB
   Archivo: assets/css/menu.css

   Menú principal y elementos de navegación del Portal Web.

   Responsabilidades:
   - Topbar pública.
   - Navbar pública.
   - Enlaces de navegación.
   - Dropdowns.
   - Buscador del menú.
   - Menú de usuario.
   - Responsive del menú.

   NO contiene:
   - Header institucional.
   - Sidebar administrativo.
   - Footer.
   - Estilos de módulos.
   ========================================================================== */

/* ==========================================================================
   TOPBAR PÚBLICO
   ========================================================================== */

.topbar-publico {
    padding: var(--espacio-2) 0;
    color: var(--color-blanco);
    background: var(--color-primario-hover);
    font-size: var(--texto-sm);
}

.topbar-publico a {
    color: var(--color-blanco);
    text-decoration: none;
}

.topbar-publico a:hover {
    color: var(--color-acento);
}

/* ==========================================================================
   NAVBAR
   ========================================================================== */

.navbar {
    position: relative;
    z-index: 1000;
    padding: var(--espacio-2) 0;
    background: linear-gradient(
        90deg,
        var(--color-primario),
        var(--color-primario-hover)
    );
    border-bottom: 3px solid var(--color-acento);
    box-shadow: var(--sombra-sm);
    transition:
        background-color var(--transicion-normal),
        box-shadow var(--transicion-normal);
}

.navbar .container {
    max-width: var(--ancho-maximo);
}

/* ==========================================================================
   MARCA
   ========================================================================== */

.navbar-brand {
    color: var(--color-blanco);
    font-size: var(--texto-xl);
    font-weight: 700;
}

.navbar-brand:hover {
    color: var(--color-blanco);
}

/* ==========================================================================
   MENÚ PRINCIPAL
   ========================================================================== */

.navbar-nav {
    gap: var(--espacio-1);
}

.navbar-nav .nav-link {
    position: relative;
    padding: var(--espacio-3) var(--espacio-4);
    color: var(--color-blanco);
    font-weight: 600;
    border-radius: var(--radio-md);
    transition:
        color var(--transicion-rapida),
        background-color var(--transicion-rapida);
}

.navbar-nav .nav-link:hover {
    color: var(--color-blanco);
    background: rgba(255, 255, 255, 0.14);
}

.navbar-nav .nav-link.active {
    color: var(--color-primario);
    background: var(--color-blanco);
}

.navbar-nav .nav-link::after {
    content: "";
    position: absolute;
    right: var(--espacio-3);
    bottom: 5px;
    left: var(--espacio-3);
    height: 2px;
    background: var(--color-acento);
    transform: scaleX(0);
    transition: transform var(--transicion-rapida);
}

.navbar-nav .nav-link:hover::after,
.navbar-nav .nav-link.active::after {
    transform: scaleX(1);
}

.navbar-nav i {
    margin-right: var(--espacio-2);
}

/* ==========================================================================
   BADGE DEL MENÚ
   ========================================================================== */

.badge-menu {
    margin-left: var(--espacio-2);
    font-size: var(--texto-xs);
}

/* ==========================================================================
   DROPDOWN
   ========================================================================== */

.dropdown-menu {
    padding: var(--espacio-2);
    margin-top: var(--espacio-2);
    border: 0;
    border-radius: var(--radio-md);
    box-shadow: var(--sombra-md);
    animation: menuFade var(--transicion-rapida) ease;
}

.dropdown-item {
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-sm);
    transition:
        color var(--transicion-rapida),
        background-color var(--transicion-rapida);
}

.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--color-primario);
    background: var(--color-gris-100);
}

.dropdown-divider {
    margin: var(--espacio-2) 0;
    border-top-color: var(--color-borde);
}

.dropdown-toggle::after {
    margin-left: var(--espacio-2);
}

/* ==========================================================================
   BUSCADOR
   ========================================================================== */

.navbar .form-control {
    border: 0;
    border-radius: var(--radio-xl);
}

.navbar .btn {
    border-radius: var(--radio-xl);
}

/* ==========================================================================
   BOTÓN TOGGLER
   ========================================================================== */

.navbar-toggler {
    border: 0;
}

.navbar-toggler:focus {
    box-shadow: none;
}

.navbar-toggler-icon {
    filter: brightness(0) invert(1);
}

/* ==========================================================================
   NAVBAR STICKY
   ========================================================================== */

.navbar.sticky-top {
    box-shadow: var(--sombra-md);
}

/* ==========================================================================
   USUARIO
   ========================================================================== */

.usuario-menu {
    color: var(--color-blanco);
    font-weight: 600;
}

.usuario-menu:hover {
    color: var(--color-blanco);
}

.usuario-avatar {
    width: 34px;
    height: 34px;
    object-fit: cover;
    border-radius: 50%;
}

/* ==========================================================================
   ANIMACIÓN DROPDOWN
   ========================================================================== */

@keyframes menuFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 992px) {
    .navbar-nav {
        gap: 0;
    }

    .navbar-nav .nav-link {
        padding: var(--espacio-3) var(--espacio-4);
    }

    .dropdown-menu {
        margin-top: 0;
        padding-left: var(--espacio-4);
        box-shadow: none;
        background: transparent;
    }

    .dropdown-item {
        color: var(--color-blanco);
    }

    .dropdown-item:hover,
    .dropdown-item:focus {
        color: var(--color-blanco);
        background: rgba(255, 255, 255, 0.10);
    }
}

@media (max-width: 768px) {
    .navbar {
        padding: var(--espacio-1) 0;
    }

    .navbar-collapse {
        margin-top: var(--espacio-3);
    }

    .navbar-nav .nav-link {
        border-radius: var(--radio-sm);
    }
}

@media (max-width: 576px) {
    .navbar-nav .nav-link {
        font-size: var(--texto-sm);
    }

    .navbar-brand {
        font-size: var(--texto-lg);
    }
}

/* ==========================================================================
   REDUCCIÓN DE MOVIMIENTO
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .navbar,
    .navbar-nav .nav-link,
    .dropdown-item {
        transition: none;
    }

    .dropdown-menu {
        animation: none;
    }
}