/* Corrección para menús desplegables en dispositivos móviles */

/* Estilos generales para el menú móvil */
@media (max-width: 991px) {
    /* Asegurar que los submenús se vean cuando se abren */
    #navbar_menu.small-screen ul ul.open {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: 1000px !important;
        transition: none !important;
        position: static !important;
    }
    
    /* Hacer que el botón de submenú sea más visible y clickeable */
    #navbar_menu.small-screen .submenu-button {
        background-color: rgba(0, 0, 0, 0.05);
        z-index: 100 !important;
        width: 46px !important;
        height: 46px !important;
        cursor: pointer !important;
        display: block !important;
    }
    
    #navbar_menu.small-screen .submenu-button.submenu-opened {
        background-color: #009FE3;
    }
    
    /* Mejorar la visibilidad del botón de abrir submenú */
    #navbar_menu.small-screen .submenu-button:after,
    #navbar_menu.small-screen .submenu-button:before {
        background-color: #009FE3;
        width: 8px !important;
        height: 2px !important;
        display: block !important;
        position: absolute !important;
        content: '' !important;
    }
    
    /* Asegurar que el signo "+" sea visible */
    #navbar_menu.small-screen .submenu-button:before {
        width: 2px !important;
        height: 8px !important;
        top: 19px !important;
        right: 22px !important;
    }
    
    #navbar_menu.small-screen .submenu-button:after {
        top: 22px !important;
        right: 19px !important;
    }
    
    #navbar_menu.small-screen .submenu-button.submenu-opened:after {
        background-color: #fff;
    }
    
    #navbar_menu.small-screen .submenu-button.submenu-opened:before {
        display: none !important;
    }
    
    /* Mejorar la apariencia de los submenús */
    #navbar_menu.small-screen ul ul {
        box-shadow: none;
        padding-left: 10px;
        background-color: #f9f9f9;
        position: static !important;
        width: 100% !important;
        display: none; /* Inicialmente oculto */
    }
    
    #navbar_menu.small-screen ul ul.open {
        display: block !important;
    }
    
    #navbar_menu.small-screen ul ul li {
        border-top: 1px solid rgba(120, 120, 120, 0.1);
        width: 100% !important;
    }
    
    #navbar_menu.small-screen ul ul li a {
        padding: 12px 25px;
        color: #333 !important;
        width: 100% !important;
        display: block !important;
    }
    
    #navbar_menu.small-screen ul ul li:hover > a {
        background-color: #009FE3;
        color: #fff !important;
    }
    
    /* Arreglo crítico: mostrar submenús cuando están abiertos */
    #navbar_menu.small-screen ul li.has-sub.open > ul {
        display: block !important;
        max-height: 1000px !important;
        opacity: 1 !important;
        visibility: visible !important;
        position: static !important;
        left: 0 !important;
        width: 100% !important;
    }
    
    /* Prevenir que el menú se cierre al hacer clic */
    #navbar_menu.small-screen ul.open {
        display: block !important;
    }
    
    /* Estilos para menú abierto */
    #navbar_menu.small-screen ul li.has-sub {
        position: relative;
    }
    
    /* Arreglo para el botón de menú */
    #navbar_menu.small-screen #menu-button {
        position: absolute;
        left: 20px;
        width: 45px;
        height: 45px;
        cursor: pointer;
        z-index: 200;
    }
    
    #navbar_menu.small-screen #menu-button.menu-opened {
        background-color: #009FE3;
    }
    
    #navbar_menu.small-screen #menu-button.menu-opened::after,
    #navbar_menu.small-screen #menu-button.menu-opened::before {
        background-color: #fff;
    }
    
    /* Estructura del menú */
    #navbar_menu.small-screen ul {
        width: 100% !important;
        position: absolute !important;
        top: 100% !important;
        background: #fff !important;
        left: 0 !important;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
        z-index: 999 !important;
    }
    
    #navbar_menu.small-screen > ul {
        max-height: 350px;
        overflow-y: auto;
    }
    
    /* Asegurar visualización de elementos */
    #navbar_menu.small-screen, 
    #navbar_menu.small-screen ul, 
    #navbar_menu.small-screen ul li, 
    #navbar_menu.small-screen ul li a {
        width: 100%;
        display: block;
        position: relative;
    }
}

/* Arreglos específicos para dispositivos muy pequeños */
@media (max-width: 767px) {
    #navbar_menu.small-screen ul ul li a {
        padding: 10px 20px;
    }
    
    /* Ajustar posición del botón de menú */
    #navbar_menu.small-screen #menu-button {
        top: -60px;
    }
    
    /* Mejorar la visibilidad del menú abierto */
    #navbar_menu.small-screen > ul.open {
        max-height: 80vh;
        overflow-y: auto;
        padding-bottom: 50px;
        display: block !important;
    }
    
    /* Evitar que el menú se cierre inesperadamente */
    #navbar_menu > ul {
        transition: none !important;
    }
}

/* Garantizar que el menú no desaparezca con transiciones */
@media (max-width: 991px) {
    /* Eliminar transiciones que puedan causar problemas */
    #navbar_menu > ul,
    #navbar_menu > ul > li > ul,
    #navbar_menu > ul > li > ul > li > ul {
        transition: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* Asegurar visibilidad de submenús cuando están abiertos */
    #navbar_menu.small-screen .submenu-button.submenu-opened + a + ul,
    #navbar_menu.small-screen .submenu-button.submenu-opened + ul,
    #navbar_menu.small-screen ul li.has-sub.open > ul {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: static !important;
        height: auto !important;
        overflow: visible !important;
    }
    
    /* Forzar visibilidad de enlaces en submenús abiertos */
    #navbar_menu.small-screen ul li.has-sub.open > ul > li > a {
        display: block !important;
    }
    
    /* Arreglo para prevenir el colapso del menú */
    #navbar_menu.small-screen ul {
        overflow: hidden;
    }
    
    /* Gestión de eventos de clic en enlaces */
    #navbar_menu.small-screen ul li:not(.has-sub) > a {
        pointer-events: auto;
    }
    
    /* Corregir ruta de navegación para dispositivos móviles */
    #navbar_menu.small-screen ul.first-ul > li.active > a {
        color: #632e62 !important;
        background-color: rgba(99, 46, 98, 0.1);
    }
}