/* ==========================================================================
   PREVENCIÓN DE OVERFLOW HORIZONTAL
   ========================================================================== */

/* Prevenir scroll horizontal en móvil */
@media (max-width: 992px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    #page {
        overflow-x: hidden;
        max-width: 100vw;
    }
    
    .site-header {
        max-width: 100vw;
        overflow-x: hidden;
    }
    
    .container {
        max-width: 100%;
        overflow-x: hidden;
    }
    
    .header-wrapper {
        max-width: 100%;
        overflow-x: hidden;
    }

    .mobile-menu-col-widget {
        padding: 20px;
        border-radius: 10px;
    }
}

/* ==========================================================================
   MENÚ MÓVIL AVANZADO - CON SOPORTE PARA 3 NIVELES
   ========================================================================== */

/* Overlay (fondo oscuro) */
.mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.7);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9998; /* Justo debajo del panel */
    overflow: hidden;
}

.mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Panel del Menú */
.mobile-menu-panel {
    position: fixed;
    top: 0; /* Cambiado de 80px a 0 para cubrir toda la pantalla */
    left: -100%;
    width: 350px;
    max-width: 90vw;
    height: 100vh; /* Altura completa */
    background: #fff;
    box-shadow: 5px 0 15px rgba(0, 0, 0, 0.2);
    /* overflow-y: auto;
    overflow-x: hidden; */  /* Previene que el boton se salga de posicion */
    transition: left 0.3s ease;
    z-index: 9999; /* Mayor que el header */
}

.menu-mobile-content {
    overflow-y: scroll;
    position: relative;
    display: block;
    height: 100%;
    width: 100%;
}

.mobile-menu-panel.active {
    left: 0;
}

.mobile-menu-logo img {
    max-height: 40px;
    width: auto;
}

.mobile-menu-logo a {
    font-size: 20px;
    font-weight: 700;
    color: #f8f9fa;
    text-decoration: none;
}

/* Header del Panel */
.mobile-menu-header {
    display: flex; /* Cambiado de 'none' a 'flex' para que se vea */
    justify-content: center; /*cambia a space-beween para icono de cerrar*/
    align-items: center;
    padding: 20px;
    background: #211718;
    border-bottom: 1px solid #2b2122;
}

/* Menu estado original 
.mobile-menu-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
    padding: 5px;
    line-height: 1;
} */

.mobile-menu-close {
    background: #ffffff;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #333;
    padding: 10px;
    line-height: 1;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    top: 2%;
    position: absolute;
    right: -6%;
    z-index: 10;
}

.mobile-message-central {
    padding: 10px;
}

.mobile-message-central p {
    font-size: 14px;
    margin-bottom: 0;
}

.mobile-menu-search .search-form__field {
    background-color: #ffffffa3;
}

.nube-contact-list {
    padding-left: 0px;
}

.nube-contact-list li i {
    margin-right: 10px;
}

.mobile-menu-contact .nube-social-links {
    margin-top: 30px;
    margin-bottom: 20px;
}

/* ==========================================================================
   NAVEGACIÓN MÓVIL
   ========================================================================== */
.mobile-first-menu {
    padding: 0px 0px 20px 0px;
    border-bottom: 1px solid #dee2e6;
    border-top: 1px solid #dee2e6;
    margin-top: 20px;
}

.mobile-second-menu {
    padding: 20px 0px;
    border-bottom: 1px solid #dee2e6;
}

.mobile-primary-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.mobile-primary-menu li {
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
}

.mobile-primary-menu a {
    display: block;
    padding: 15px 20px;
    color: #333;
    text-decoration: none;
    font-weight: 300;
    transition: all 0.3s ease;
    position: relative;
}

/* ==========================================================================
   ENLACES PADRES DESACTIVADOS (tienen hijos)
   ========================================================================== */

/**
 * Los enlaces con hijos NO deben navegar a ninguna página
 * Solo deben actuar como triggers para abrir/cerrar submenús
 */
.mobile-primary-menu .menu-item-has-children > a {
    cursor: pointer;
}

/* Agregar indicador visual de que es clickeable para desplegar */
.mobile-primary-menu .menu-item-has-children > a:active {
    background: #e9ecef;
}

/* ==========================================================================
   SUBMENÚS - NIVEL 1
   ========================================================================== */
.mobile-primary-menu a:hover,
.mobile-primary-menu .current-menu-item > a {
    background: #f8f9fa;
    color: #1a1a1a;
    padding-left: 25px;
}

.mobile-primary-menu .sub-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    background: #e8ecf0;
    display: none; /* Oculto por defecto */
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

/* Cuando está abierto */
.mobile-primary-menu .menu-item-has-children.open > .sub-menu {
    display: block;
    max-height: 1000px; /* Suficientemente alto para cualquier contenido */
}

.mobile-primary-menu .sub-menu a {
    padding-left: 40px;
    font-size: 15px;
}

/* ==========================================================================
   SUBMENÚS - NIVEL 2 (sub-submenú)
   ========================================================================== */
.mobile-primary-menu .sub-menu .sub-menu {
    background: #f1f5f8;
}

.mobile-primary-menu .sub-menu .sub-menu a {
    padding-left: 60px; /* Más indentado */
    font-size: 15px;
}

/* ==========================================================================
   SUBMENÚS - NIVEL 3 (tercer nivel)
   ========================================================================== */

.mobile-primary-menu .sub-menu .sub-menu .sub-menu {
    background: #dee2e6;
}

.mobile-primary-menu .sub-menu .sub-menu .sub-menu a {
    padding-left: 80px; /* Aún más indentado */
    font-size: 12px;
}

/* ==========================================================================
   INDICADORES DE SUBMENÚS (Flechas)
   ========================================================================== */

/**
 * Todos los items que tienen hijos muestran una flecha
 */
.mobile-primary-menu li.menu-item-has-children > a::after {
    content: '\f107'; /* Flecha abajo de Font Awesome */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    float: right;
    transition: transform 0.3s ease;
    font-size: 12px;
    color: #666;
    margin-left: 5px;
}

/* Rotar flecha cuando el submenú está abierto */
.mobile-primary-menu li.menu-item-has-children.open > a::after {
    transform: rotate(180deg);
    color: #1a1a1a;
}

/* ==========================================================================
   BADGE DE NIVEL (Opcional - para debugging)
   ========================================================================== */

/**
 * Puedes agregar badges visuales para identificar niveles durante desarrollo
 * Elimina esto en producción
 */

/*
.mobile-primary-menu > li > a::before {
    content: 'L1';
    background: #007bff;
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 3px;
    margin-right: 8px;
}

.mobile-primary-menu .sub-menu > li > a::before {
    content: 'L2';
    background: #28a745;
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 3px;
    margin-right: 8px;
}

.mobile-primary-menu .sub-menu .sub-menu > li > a::before {
    content: 'L3';
    background: #ffc107;
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 3px;
    margin-right: 8px;
}
*/

/* ==========================================================================
   ESTADOS ACTIVOS
   ========================================================================== */

/* Item activo en el menú */
/* .mobile-primary-menu .current-menu-item > a {
    border-left: 3px solid #1a1a1a;
    background: #e7f3ff;
    color: #1a1a1a;
} */

/* Item padre del item activo */
/* .mobile-primary-menu .current-menu-ancestor > a {
    color: #1a1a1a;
    font-weight: 600;
} */

/* ==========================================================================
   ANIMACIONES DE SUBMENÚS
   ========================================================================== */
/**
 * Animación suave al abrir/cerrar submenús
 */
 
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.mobile-primary-menu .menu-item-has-children.open > .sub-menu {
    animation: slideDown 0.3s ease;
}

/* ==========================================================================
   DESKTOP: OCULTAR MENÚ MÓVIL
   ========================================================================== */

@media (min-width: 993px) {
    .mobile-menu-panel,
    .mobile-menu-overlay {
        display: none !important;
    }
}

/* ==========================================================================
   MEJORAS DE UX
   ========================================================================== */

/**
 * Área táctil más grande en móvil (mejor usabilidad)
 */
@media (max-width: 992px) {
    .mobile-primary-menu a {
        min-height: 44px;
        display: flex;
        align-items: center;
    }

    /* .mobile-primary-menu .open a {
        background: red;
    }
    
    .mobile-primary-menu a:hover,
    .mobile-primary-menu .current-menu-item > a {
        background: #f1f5f8;
        color: #1a1a1a;
    }

    .mobile-primary-menu a:active {
        background: #e9ecef;
    } */
}