/* --- SUBMENÚS MULTINIVEL --- */
/* En escritorios (Desktop) se despliega hacia la izquierda/derecha */
@media (min-width: 992px) {
    .dropdown-submenu .dropdown-menu {
        top: 0;
        right: 100%; /* Despliega a la izquierda para evitar salirse de la pantalla */
        left: auto;
        margin-top: -6px;
    }
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
}

/* En celulares (Mobile) los submenús se despliegan indentados hacia abajo */
@media (max-width: 991.98px) {
    .dropdown-submenu .dropdown-menu {
        position: relative !important;
        transform: none !important;
        border: none !important;
        box-shadow: none !important;
        padding-left: 1.25rem !important;
        display: none; /* Oculto por defecto */
        background-color: #f8f9fa; /* Fondo ligero para diferenciar el subnivel */
        border-left: 3px solid #0d6efd !important; /* Indicador visual azul */
        margin-top: 0.25rem;
        margin-bottom: 0.25rem;
    }

    /* Muestra el submenú en móvil cuando el JS añade la clase 'show' */
    .dropdown-submenu .dropdown-menu.show {
        display: block !important;
    }
}