/*
* Mega Menu Mobile CSS - Vertical Layout
* Estilos específicos para el menú móvil vertical con despliegue hacia abajo
* Aplicando estilos de la versión desktop
*/

.custom-mega-menu-mobile {
    width: 100%;
    max-width: 100%;
    background: #ffffff;
    font-family: 'DINNextRoundedLTPro', sans-serif;
    position: relative;
    z-index: 100;
    overflow-x: hidden;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* Aplicar fuente global a todos los elementos del menú móvil */
.custom-mega-menu-mobile * {
    font-family: 'DINNextRoundedLTPro', sans-serif !important;
}

/* NIVEL 1: Menú principal vertical */
.main-menu-mobile-vertical {
    list-style: none;
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow-x: hidden;
}

.menu-item-mobile-vertical {
    border-bottom: 1px solid #e0e0e0;
    position: relative;
    margin: 0;
    padding: 0;
}

.menu-item-mobile-vertical:last-child {
    border-bottom: none;
}

.menu-item-header-vertical {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 20px;
    background: #ffffff;
    cursor: pointer;
    transition: all 0.3s ease;
    user-select: none;
    gap: 12px;
}

.menu-item-header-vertical:hover {
    background-color: #f8f9fa;
}

.menu-link-mobile-vertical {
    font-family: 'DINNextRoundedLTPro', sans-serif;
    text-decoration: none;
    color: #02648f;
    font-size: 18px;
    font-weight: 400;
    flex: 1;
    padding: 5px 0;
    transition: color 0.3s ease;
    white-space: nowrap;
    display: block;
}

.menu-link-mobile-vertical:hover {
    color: #fe5000;
}

.menu-toggle-mobile-vertical {
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    color: #02648f;
    transition: all 0.3s ease;
}

.menu-toggle-mobile-vertical:hover {
    color: #fe5000;
}

.menu-arrow-vertical {
    transition: transform 0.3s ease;
}

/* NIVEL 2: Submenús que se despliegan hacia abajo */
.submenu-level-2-mobile-vertical {
    background-color: #ffffff;
    border-top: 1px solid #e0e0e0;
}

.submenu-content-vertical {
    padding: 0;
}

.submenu-item-mobile-vertical {
    border-bottom: 1px solid #e0e0e0;
}

.submenu-item-mobile-vertical:last-child {
    border-bottom: none;
}

.submenu-item-header-vertical {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px 12px 40px;
    background: #ffffff;
    cursor: pointer;
    transition: background-color 0.3s ease;
    user-select: none;
    gap: 12px;
}

.submenu-item-header-vertical:hover {
    background-color: #FE5000;
}

.submenu-link-mobile-vertical {
    font-family: 'DINNextRoundedLTPro', sans-serif;
    text-decoration: none;
    color: #02648f;
    font-size: 16px;
    font-weight: 400;
    flex: 1;
    padding: 3px 0;
    transition: color 0.3s ease;
    display: block;
}

.submenu-link-mobile-vertical:hover {
    color: #ffffff;
}

.submenu-link-mobile-vertical strong {
    color: #fe5000;
    font-weight: 700;
}

.submenu-link-mobile-vertical:hover strong {
    color: #ffffff;
}

.submenu-toggle-mobile-vertical {
    background: none;
    border: none;
    padding: 3px;
    cursor: pointer;
    color: #02648f;
    transition: color 0.3s ease;
}

.submenu-toggle-mobile-vertical:hover {
    color: #ffffff;
}

.submenu-arrow-vertical {
    transition: transform 0.3s ease;
}

/* NIVEL 3: Elementos de grid en columnas */
.submenu-level-3-mobile-vertical {
    background-color: #FE5000;
}

.level-3-grid-vertical {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px 5px;
    width: 100%;
    box-sizing: border-box;
}

.level-3-item-mobile-vertical {
    margin: 0;
    width: 100%;
    box-sizing: border-box;
}

.level-3-item-mobile-vertical:last-child {
    border-bottom: none;
}
.hamburger-menu-toggle{
    margin-top: 27px !important;
}
.level-3-item-header-vertical {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
    border-radius: 4px;
    user-select: none;
    gap: 12px;
}

.nivel-3-enlace-mobile-vertical {
    font-family: 'DINNextRoundedLTPro', sans-serif;
    text-decoration: none;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    flex: 1;
    padding: 2px 0;
    transition: color 0.3s ease;
    display: block;
}

.nivel-3-enlace-mobile-vertical:hover {
    color: #ffffff;
}

.level3-toggle-mobile-vertical {
    background: none;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: #ffffff;
    transition: color 0.3s ease;
}

.level3-toggle-mobile-vertical:hover {
    color: #ffffff;
}

.level3-arrow-vertical {
    transition: transform 0.3s ease;
}

/* NIVEL 4: Elementos finales */
.submenu-level-4-mobile-vertical {
    padding: 5px 0;
}

.level-4-item-mobile-vertical a{
    color: #ffffff !important;
}

.level-4-item-mobile-vertical:last-child {
    border-bottom: none;
}

.nivel-4-enlace-mobile-vertical {
    font-family: 'DINNextRoundedLTPro', sans-serif;
    display: block;
    text-decoration: none;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    padding: 6px 12px 6px 20px;
    background: transparent;
    transition: all 0.3s ease;
}

.nivel-4-enlace-mobile-vertical:hover {
    color: #ffffff; /* Texto blanco al hover */
    background-color: transparent; /* Sin fondo al hover */
    padding-left: 25px;
}

/* Media content */
.media-content-mobile-vertical {
    padding: 10px;
    background-color: #ffffff;
    border-top: 1px solid #dee2e6;
    text-align: center;
}

.menu-media-mobile-vertical {
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.menu-media-video-mobile-vertical {
    max-height: 150px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .level-3-grid-vertical {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .menu-item-header-vertical {
        padding: 12px 15px;
    }
    
    .submenu-item-header-vertical {
        padding: 10px 15px 10px 30px;
    }
    
    .level-3-item-header-vertical {
        padding: 8px 10px;
    }
    
    .nivel-4-enlace-mobile-vertical {
        padding: 5px 10px 5px 15px;
        font-size: 11px;
    }
    
    .nivel-4-enlace-mobile-vertical:hover {
        padding-left: 18px;
    }
    
    .menu-link-mobile-vertical {
        font-size: 15px;
    }
    
    .submenu-link-mobile-vertical {
        font-size: 14px;
    }
    
    .nivel-3-enlace-mobile-vertical {
        font-size: 12px;
    }
}

/* Animaciones suaves */
.submenu-level-2-mobile-vertical,
.submenu-level-3-mobile-vertical,
.submenu-level-4-mobile-vertical {
    transition: all 0.3s ease;
}

/* Estados activos */
.menu-item-mobile-vertical.active .menu-item-header-vertical {
    background-color: #f8f9fa;
}

.menu-item-mobile-vertical.active .menu-link-mobile-vertical {
    color: #fe5000;
}

.submenu-item-mobile-vertical.active .submenu-item-header-vertical {
    background-color: #fe5000;
}

.submenu-item-mobile-vertical.active .submenu-link-mobile-vertical {
    color: #ffffff;
}

/* Opciones finales del menú móvil - Estilos nivel 2 */
.mobile-menu-final-options {
    border-top: 1px solid #e0e0e0;
    padding: 0;
    background: #ffffff;
    font-family: 'DINNextRoundedLTPro', sans-serif;
}

/* Aplicar estilos de nivel 2 a las opciones finales */
.mobile-menu-final-options .submenu-item-mobile-vertical {
    border-bottom: 1px solid #e0e0e0;
}

.mobile-menu-final-options .submenu-item-mobile-vertical:last-child {
    border-bottom: none;
}

.mobile-menu-final-options .submenu-item-header-vertical {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #ffffff; /* Fondo blanco */
    cursor: pointer;
    transition: background-color 0.3s ease;
    user-select: none;
    gap: 12px;
}

.mobile-menu-final-options .submenu-item-header-vertical:hover {
    background-color: #FE5000; /* Fondo naranja al hover */
}

.mobile-menu-final-options .submenu-link-mobile-vertical {
    font-family: 'DINNextRoundedLTPro', sans-serif;
    text-decoration: none;
    color: #02648f; /* Texto azul */
    font-size: 16px;
    font-weight: 400;
    flex: 1;
    padding: 3px 0;
    transition: color 0.3s ease;
    display: block;
}

.mobile-menu-final-options .submenu-link-mobile-vertical:hover {
    color: #ffffff; /* Texto blanco al hover */
}

.mobile-menu-final-options .submenu-toggle-mobile-vertical {
    background: none;
    border: none;
    padding: 3px;
    cursor: pointer;
    color: #02648f; /* Iconos azules */
    transition: color 0.3s ease;
}

.mobile-menu-final-options .submenu-toggle-mobile-vertical:hover {
    color: #ffffff; /* Iconos blancos al hover */
}

.mobile-menu-final-options .submenu-arrow-vertical {
    transition: transform 0.3s ease;
}

/* Submenús de las opciones finales */
.mobile-menu-final-options .submenu-level-2-mobile-vertical {
    background-color: #ffffff; /* Fondo blanco */
    border-top: 1px solid #e0e0e0;
}

.mobile-menu-final-options .submenu-content-vertical {
    padding: 0;
}

.mobile-menu-final-options .submenu-content-vertical .submenu-item-mobile-vertical {
    border-bottom: 1px solid #e0e0e0;
}

.mobile-menu-final-options .submenu-content-vertical .submenu-item-mobile-vertical:last-child {
    border-bottom: none;
}

.mobile-menu-final-options .submenu-content-vertical .submenu-link-mobile-vertical {
    display: block;
    padding: 10px 20px 10px 40px;
    color: #02648f; /* Texto azul */
    text-decoration: none;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.3s ease;
}

.mobile-menu-final-options .submenu-content-vertical .submenu-link-mobile-vertical:hover {
    color: #ffffff; /* Texto blanco al hover */
    background-color: #FE5000; /* Fondo naranja al hover */
    padding-left: 45px;
}

/* Estado activo para Vivofácil Corporativo */
.mobile-menu-final-options .submenu-item-mobile-vertical[data-id="corporate"].active .submenu-item-header-vertical {
    background-color: #FE5000; /* Fondo naranja cuando está activo */
}

.mobile-menu-final-options .submenu-item-mobile-vertical[data-id="corporate"].active .submenu-link-mobile-vertical {
    color: #ffffff; /* Texto blanco cuando está activo */
}

.mobile-menu-final-options .submenu-item-mobile-vertical[data-id="corporate"].active .submenu-toggle-mobile-vertical {
    color: #ffffff; /* Icono blanco cuando está activo */
}

/* Items del menú corporativo activo - sin bordes */
.mobile-menu-final-options .submenu-item-mobile-vertical[data-id="corporate"].active .submenu-level-2-mobile-vertical {
    background-color: #FE5000; /* Fondo naranja */
    border-top: none; /* Sin borde superior */
}

.mobile-menu-final-options .submenu-item-mobile-vertical[data-id="corporate"].active .submenu-content-vertical .submenu-item-mobile-vertical {
    border-bottom: none; /* Sin bordes entre items */
}

.mobile-menu-final-options .submenu-item-mobile-vertical[data-id="corporate"].active .submenu-content-vertical .submenu-link-mobile-vertical {
    color: #ffffff; /* Texto blanco */
    background-color: transparent; /* Sin fondo */
    border: none; /* Sin bordes */
}

.mobile-menu-final-options .submenu-item-mobile-vertical[data-id="corporate"].active .submenu-content-vertical .submenu-link-mobile-vertical:hover {
    color: #ffffff; /* Texto blanco al hover */
    background-color: rgba(255, 255, 255, 0.2); /* Fondo semitransparente al hover */
}

/* Contenedor del selector de idioma original */
.language-selector-mobile-container {
    padding: 15px 20px;
    border-top: 1px solid #e0e0e0;
    background: #ffffff;
    font-family: 'DINNextRoundedLTPro', sans-serif;
}

/* Asegurar que el selector de idioma original mantenga sus estilos */
.language-selector-mobile-container * {
    font-family: inherit !important;
}

/* Hacer que el selector de idioma sea visible en el menú móvil */
.language-selector-mobile-container .language-selector-responsive {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Estilos para el fallback del selector de idioma */
.language-selector-fallback {
    display: flex;
    align-items: center;
    font-family: 'DINNextRoundedLTPro', sans-serif;
}

.language-selector-fallback a {
    transition: all 0.3s ease;
}

.language-selector-fallback a:hover {
    background-color: #02648f !important;
    color: #ffffff !important;
}