/**
 * Hoja de estilos complementaria para la barra de navegación.
 * NOTA: Algunos de estos estilos, como el backdrop-filter, también están definidos
 * en 'themes.css' bajo la clase '.modern-navbar'. Se recomienda consolidar
 * estos estilos en un solo lugar para evitar redundancias.
 */

.navbar {
    /* Aplica un efecto de desenfoque al contenido que está detrás de la barra de navegación. */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    /* Asegura que el navbar tenga el z-index más alto */
    position: sticky !important;
    z-index: 9998 !important;
}

.navbar-nav .nav-link.active {
    /* Resalta el enlace de la página actual con un fondo sutil. */
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 0.375rem;
}

.dropdown-menu {
    /* Estilos para los menús desplegables, dándoles un aspecto flotante. */
    border: none;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border-radius: 0.5rem;
    z-index: 9999 !important; /* Asegura que el menú se muestre sobre otros elementos incluyendo tablas */
    position: absolute !important; /* Fuerza posicionamiento absoluto */
}

.dropdown-item:hover {
    /* Mejora la retroalimentación visual al pasar el cursor sobre un elemento del menú. */
    background-color: var(--bs-primary);
    color: white;
}

.dropdown-header {
    /* Estilo para los títulos dentro de un menú desplegable. */
    color: var(--bs-primary);
    font-weight: 600;
}

/* Estilos para la vista móvil (cuando el menú se colapsa). */
@media (max-width: 991.98px) {
    .navbar-nav {
        /* Añade espacio vertical a la lista de enlaces en la vista móvil. */
        padding: 1rem 0;
    }
    .dropdown-menu {
        /* En móvil, los menús desplegables pierden la sombra y ganan un borde para integrarse mejor. */
        box-shadow: none;
        border: 1px solid rgba(0, 0, 0, 0.1);
    }
}

/* Fix para los modales de Bootstrap - deben aparecer por encima del navbar */
body .modal {
    z-index: 2100 !important;
}

.modal-backdrop {
    z-index: 2099 !important;
}

.modal-dialog {
    margin-top: 50px !important; /* Ajusta este valor según sea necesario */
}