/* ============================================================
   BLINDAJE CSS (AISLAMIENTO) - VERSIÓN CORREGIDA
   ============================================================ */

/* 1. Contenedor Principal */
.quiz-maiz-wrapper {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    background-color: #f4f4f9 !important;
    display: flex !important;
    justify-content: center !important;
    align-items: flex-start !important;
    width: 100% !important;
    padding: 20px 0 !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
}

/* Resetear box-sizing */
.quiz-maiz-wrapper *, 
.quiz-maiz-wrapper *::before, 
.quiz-maiz-wrapper *::after {
    box-sizing: border-box !important;
}

/* 2. Estilos del Contenedor (Tarjeta) */
.quiz-maiz-wrapper .container {
    background-color: white !important;
    width: 90% !important;
    max-width: 800px !important;
    border-radius: 10px !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    padding: 30px !important;
    margin-bottom: 40px !important;
    position: relative !important;
    z-index: 1 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    border: none !important;
}

/* 3. Header */
.quiz-maiz-wrapper header {
    text-align: center !important;
    margin-bottom: 15px !important;
    border-bottom: 2px solid #eee !important;
    padding-bottom: 10px !important;
    background: none !important;
}

.quiz-maiz-wrapper header h1 {
    color: #e67e22 !important;
    margin: 0 !important;
    font-family: 'Segoe UI', Tahoma, sans-serif !important;
    font-weight: bold !important;
    font-size: 2em !important;
    line-height: 1.2 !important;
    text-transform: none !important;
}

.quiz-maiz-wrapper header p {
    color: #666 !important;
    font-family: inherit !important;
    font-size: 1rem !important;
    margin: 10px 0 !important;
}

/* 4. Preguntas */
.quiz-maiz-wrapper .question-block {
    margin-bottom: 15px !important;
    padding: 15px !important;
    border-bottom: 1px solid #f0f0f0 !important;
    background: transparent !important;
}

.quiz-maiz-wrapper .question-title {
    font-size: 1.1rem !important;
    color: #333 !important;
    margin-bottom: 15px !important;
    font-weight: bold !important;
    line-height: 1.4 !important;
}

/* 5. Opciones */
.quiz-maiz-wrapper .options-group {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

.quiz-maiz-wrapper .options-group input[type="radio"] {
    display: none !important; 
}

.quiz-maiz-wrapper .options-group label {
    display: block !important;
    padding: 12px 15px !important;
    background-color: #f9f9f9 !important;
    border: 1px solid #ddd !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    font-weight: normal !important;
    margin: 0 !important;
    width: 100% !important;
    color: #333 !important;
}

.quiz-maiz-wrapper .options-group label:hover {
    background-color: #f0f0f0 !important;
}

.quiz-maiz-wrapper .options-group input[type="radio"]:checked + label {
    background-color: #ffe0b2 !important;
    border-color: #e67e22 !important;
    color: #d35400 !important;
    font-weight: bold !important;
}

/* 6. Botón Enviar */
.quiz-maiz-wrapper button#send-btn {
    display: block !important;
    width: 100% !important;
    padding: 15px !important;
    border: none !important;
    border-radius: 5px !important;
    font-size: 1.2rem !important;
    font-weight: bold !important;
    margin-top: 20px !important;
    transition: all 0.3s ease !important;
    color: white !important;
    background-image: none !important;
    box-shadow: none !important;
    text-shadow: none !important;
}

.quiz-maiz-wrapper #send-btn:disabled {
    background-color: #bdc3c7 !important;
    cursor: not-allowed !important;
    opacity: 0.7 !important;
}

.quiz-maiz-wrapper #send-btn:not(:disabled) {
    background-color: #27ae60 !important;
    cursor: pointer !important;
}

.glow-effect {
    animation: glowing 1.5s infinite alternate !important;
}

@keyframes glowing {
    0% { box-shadow: 0 0 5px #2ecc71; transform: scale(1); }
    100% { box-shadow: 0 0 20px #27ae60, 0 0 10px #2ecc71; transform: scale(1.02); }
}

/* 7. Modales (Overlays) */
/* ESTILOS BASE DEL MODAL (VISIBLE) */
#modal-overlay, #success-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.6) !important;
    z-index: 99999 !important;
    
    /* Por defecto FLEX para centrar, PERO la clase .hide (abajo) lo anulará */
    display: flex !important; 
    justify-content: center !important;
    align-items: center !important;
    
    opacity: 1 !important;
    transition: opacity 0.3s ease !important;
    margin: 0 !important;
    padding: 0 !important;
}

.quiz-maiz-wrapper .modal-content {
    background-color: white !important;
    padding: 30px !important;
    border-radius: 10px !important;
    width: 100% !important;
    max-width: 500px !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important;
    animation: slideDown 0.4s ease !important;
    text-align: center !important;
    margin: 0 20px !important;
    position: relative !important;
}

.quiz-maiz-wrapper .modal-content form {
    text-align: left !important;
}

.quiz-maiz-wrapper .success-content {
    text-align: center !important;
    border-top: 5px solid #27ae60 !important;
}

@keyframes slideDown {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.quiz-maiz-wrapper .modal-content h2 {
    margin-top: 0 !important;
    color: #e67e22 !important;
    font-family: 'Segoe UI', sans-serif !important;
    font-size: 1.8rem !important;
}

.quiz-maiz-wrapper .form-group {
    margin-bottom: 15px !important;
}

.quiz-maiz-wrapper .form-group label {
    display: block !important;
    font-weight: bold !important;
    margin-bottom: 5px !important;
    color: #333 !important;
    font-size: 1rem !important;
}

.quiz-maiz-wrapper .form-group input:not([type="checkbox"]) {
    width: 100% !important;
    padding: 10px !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    box-sizing: border-box !important;
    font-size: 1rem !important;
    background-color: #fff !important;
    color: #333 !important;
    height: auto !important;
    line-height: normal !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.quiz-maiz-wrapper .form-group-checkbox {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 20px 0 !important;
    padding: 10px !important;
    background-color: #f9f9f9 !important;
    border-radius: 5px !important;
}

.quiz-maiz-wrapper .form-group-checkbox input {
    width: 20px !important;
    height: 20px !important;
    margin: 0 !important;
    cursor: pointer !important;
}

.quiz-maiz-wrapper .modal-buttons {
    display: flex !important;
    gap: 10px !important;
}

.quiz-maiz-wrapper .submit-btn, 
.quiz-maiz-wrapper .cancel-btn {
    border: none !important;
    padding: 12px !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    flex: 1 !important;
    font-weight: bold !important;
    font-size: 1rem !important;
    color: white !important;
    text-transform: none !important;
}

.quiz-maiz-wrapper .submit-btn { background-color: #27ae60 !important; }
.quiz-maiz-wrapper .cancel-btn { background-color: #e74c3c !important; }

.quiz-maiz-wrapper #error-msg {
    color: red !important;
    font-weight: bold !important;
    text-align: center !important;
    margin-top: 10px !important;
    display: block !important;
}

/* 8. Custom Dropdown (Banderas) */
.quiz-maiz-wrapper .phone-input-group {
    display: flex !important;
    gap: 10px !important;
}

.quiz-maiz-wrapper .contact-field {
    position: relative !important;
    width: 110px !important;
    flex-shrink: 0 !important;
}

.quiz-maiz-wrapper .custom-dropdown {
    position: relative !important;
    width: 100% !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    background-color: white !important;
    cursor: pointer !important;
    user-select: none !important;
    height: 42px !important;
    display: flex !important; 
    align-items: center !important;
    padding: 0 !important;
}

.quiz-maiz-wrapper .selected-option {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5px 10px !important;
    height: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.quiz-maiz-wrapper .selected-option img, 
.quiz-maiz-wrapper .options li img {
    width: 24px !important;
    height: auto !important;
    margin-right: 5px !important;
    display: block !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.quiz-maiz-wrapper .selected-option span { 
    font-size: 0.9rem !important; 
    color: #333 !important; 
}

.quiz-maiz-wrapper .arrow { 
    font-size: 0.7rem !important; 
    color: #666 !important; 
    margin-left: 5px !important; 
}

.quiz-maiz-wrapper .custom-dropdown .options {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    width: 100% !important;
    background-color: white !important;
    border: 1px solid #ccc !important;
    border-radius: 5px !important;
    list-style: none !important; 
    padding: 0 !important;
    margin: 5px 0 0 0 !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    display: none;
    z-index: 10000 !important;
    max-height: 150px !important;
    overflow-y: auto !important;
    text-align: left !important;
}

.quiz-maiz-wrapper .custom-dropdown.open .options { display: block !important; }

.quiz-maiz-wrapper .custom-dropdown .options li {
    padding: 8px 10px !important;
    display: flex !important;
    align-items: center !important;
    transition: background-color 0.2s !important;
    font-size: 0.9rem !important;
    margin: 0 !important; 
    border-bottom: 1px solid #eee !important;
    background: white !important;
}

.quiz-maiz-wrapper .custom-dropdown .options li:hover { 
    background-color: #f0f0f0 !important; 
}

/* =========================================================
   CORRECCIÓN CRÍTICA: FORZAR OCULTAMIENTO DE VENTANAS
   Esto asegura que si tienen la clase .hide, NO se muestren
   aunque tengan un ID fuerte.
   ========================================================= */
div#modal-overlay.hide, 
div#success-overlay.hide,
.quiz-maiz-wrapper .hide {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    z-index: -9999 !important;
    pointer-events: none !important;
}