/* =================================================
   MOBILE FIXES - Color, Height, Icons
   ================================================= */

/* 1. MENÚ MOBILE - Fondo SECONDARY (casi negro) y altura completa */
/* Aplicar a TODOS los popups modales de Elementor en mobile */
[class*="elementor-popup-modal"] .dialog-widget-content,
#elementor-popup-modal-39841 .dialog-widget-content,
#elementor-popup-modal-36811 .dialog-widget-content {
    background-color: var(--e-global-color-secondary) !important;
    min-height: 100vh !important;
    height: 100vh !important;
}

/* [class*="elementor-popup-modal"],
[class*="elementor-popup-modal"] .elementor,
[class*="elementor-popup-modal"] .elementor-section {
    background-color: var(--e-global-color-secondary) !important;
} */

#elementor-popup-modal-39841 .dialog-message,
#elementor-popup-modal-36811 .dialog-message {
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    align-items: flex-start !important;
}

#elementor-popup-modal-39841,
#elementor-popup-modal-36811 {
    justify-content: center !important;
    align-items: flex-start !important;
}

/* Asegurar que el contenido del menú también use el color secondary */
@media (max-width: 991px) {
    #elementor-popup-modal-39841,
    #elementor-popup-modal-36811,
    #elementor-popup-modal-39841 .elementor,
    #elementor-popup-modal-36811 .elementor {
        background-color: var(--e-global-color-secondary) !important;
    }
    
    /* Altura completa del dialog */
    #elementor-popup-modal-39841 .dialog-widget-content,
    #elementor-popup-modal-36811 .dialog-widget-content {
        min-height: 100vh !important;
        height: 100vh !important;
        max-height: 100vh !important;
    }
}

/* 2. SIDEBAR MOBILE - Iconos Blancos */
.simple-sidebar-trigger {
    color: #FFFFFF !important;
    background-color: rgba(0, 0, 0, 0.8) !important;
    border: 1px solid #FFFFFF !important;
}

.simple-sidebar-trigger i,
.simple-sidebar-trigger svg,
.simple-sidebar-trigger::before,
.simple-sidebar-trigger::after {
    color: #FFFFFF !important;
    fill: #FFFFFF !important;
}

/* Icono de cierre del sidebar - OSCURO */
.simple-sidebar-close,
.sidebar-close-trigger,
.sidebar .close-trigger,
.sidebar .close-button {
    color: #000000 !important;
    background-color: #FFFFFF !important;
}

.simple-sidebar-close i,
.simple-sidebar-close svg,
.sidebar-close-trigger i,
.sidebar-close-trigger svg,
.sidebar .close-trigger i,
.sidebar .close-trigger svg {
    color: #000000 !important;
    fill: #000000 !important;
}

@media (max-width: 991px) {
    /* Trigger button del sidebar - BLANCO */
    .simple-sidebar-trigger {
        bottom: 20px !important;
        right: 20px !important;
        z-index: 999 !important;
        padding: 12px 16px !important;
        border-radius: 50px !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    }
    
    .simple-sidebar-trigger::before {
        content: "\f0b0" !important; /* Font Awesome filter icon */
        font-family: "Font Awesome 5 Free" !important;
        font-weight: 900 !important;
        color: #FFFFFF !important;
    }
}