/* Paleta de Colores SUAVES/PROFESIONALES: 
    #4A4E69 (Dark Slate Blue - Principal) 
    #9A8C98 (Rosy Mauve - Neutro)
    #C9CAD9 (Light Blue Gray - Fondo)
    #E63946 (Red/Danger - Suave)
    #A8DADC (Powder Blue - Soporte)
    #FFFFFF (White Text) 
*/

body {
    font-family: 'Montserrat', sans-serif; 
    background-color: #f0f8ff; 
    color: #333;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    transition: background-color 0.8s ease-in-out; 
    overflow-x: hidden; /* ¡CLAVE! Evita el desbordamiento horizontal */
}

/* Contenedor principal de la encuesta */
#sa-survey-container {
    /*background-color: rgba(255, 255, 255, 0.95);*/
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25); 
    width: 90%;
    max-width: 650px;
    text-align: center;
    min-height: 600px;
    box-sizing: border-box; 
    margin-bottom: 80px; /* Espacio para el botón fijo inferior */
}

/* Transiciones de pantalla */
.sa-screen {
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
}

.sa-hidden-screen {
    opacity: 0;
    transform: translateY(20px);
    display: none;
}

.sa-active-screen {
    opacity: 1;
    transform: translateY(0);
    display: block;
}

/* Pantalla de Introducción y Títulos */
.sa-main-title {
    color: #4A4E69; 
    font-size: 3em;
    font-weight: 800;
    word-break: break-word; /* Asegura que el texto largo se rompa en móvil */
}

.sa-subtitle {
    color: #9A8C98; 
    font-size: 1.5em;
    margin-bottom: 30px;
}

.sa-intro-text {
    font-size: 1.2em;
    margin-bottom: 20px;
    color: #555;
}

.sa-disclaimer {
    color: #E63946; 
    font-size: 0.9em;
    margin-top: 15px;
    font-weight: bold;
}

.sa-intro-buttons {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    margin-top: 30px;
}

/* ESTILO DE PREGUNTAS */
.sa-question-card {
    padding: 20px 0;
}

.sa-question-card h3 {
    color: white; 
    font-size: 1.1em;
    margin-bottom: 15px;
}

.sa-question-text {
    font-size: 2.2em; 
    color: white; 
    font-weight: 700;
    margin-bottom: 25px;
    word-break: break-word; /* Romper palabras largas si es necesario */
}

/* Estilo para la explicación (Corregida la fuente para legibilidad) */
.sa-explanation {
    font-style: italic;
    color: white; 
    margin: 20px auto;
    max-width: 95%; /* Asegurar que no esté demasiado estrecho en móvil */
    
    font-size: 1.05em; /* Ligeramente más grande para mejor lectura */
    text-align: left; /* Alineación izquierda para el bloque de texto */
    line-height: 1.5; /* Espaciado de línea para legibilidad */
}

/* --- Botones Genéricos y de Acción --- */
.sa-btn {
    border: none;
    border-radius: 30px;
    font-size: 1.5em;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s, transform 0.1s;
    color: white; 
    min-width: 150px;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Botón de Inicio Principal */
.sa-btn-start {
    background-color: #4A4E69;
    padding: 18px 45px;
    font-size: 1.6em;
    box-shadow: 0 4px #3a3f5a;
}
.sa-btn-start:active {
    transform: translateY(4px);
    box-shadow: none;
}

.sa-btn-whatsapp{
    background-color: #25d366;
    color: white;
    padding: 12px 30px;
    font-size: 1.2em;
    font-weight: 600;
    border: 2px solid #128c7e;
    
    margin: 1rem;
}
.sa-btn-secondary:active {
    transform: translateY(4px);
    box-shadow: none;
}

/* Botón Secundario (Cancelar / Regresar) */
.sa-btn-secondary {
    background-color: #C9CAD9;
    color: #4A4E69;
    padding: 12px 30px;
    font-size: 1.2em;
    font-weight: 600;
    border: 2px solid #9A8C98;
    box-shadow: 0 4px #8a7c88;
}
.sa-btn-secondary:active {
    transform: translateY(4px);
    box-shadow: none;
}



/* Botón de Cancelar Fijo (¡ESTO SOLUCIONA EL DESBORDAMIENTO!) */
.sa-cancel-fixed {
    position: fixed; /* Usar 'fixed' para mantenerlo en su lugar */
    bottom: 0; /* Anclado al fondo */
    left: 0;
    right: 0;
    transform: none; /* Eliminar el transform: translateX(-50%) */
    width: 100%; /* Ocupar todo el ancho */
    max-width: none;
    padding: 15px 0; /* Padding vertical, ya no necesita horizontal */
    font-size: 1.3em;
    z-index: 10; 
    background-color: #C9CAD9; /* Fondo para que no se vea a través */
    border-radius: 0;
    border-top: 1px solid #9A8C98; /* Borde superior sutil */
    
    /* Centrar el texto/enlace */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Botones SÍ/NO */
.sa-button-group {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
.sa-button-group button {
    padding: 15px 40px;
    margin: 15px;
    font-size: 1.5em;
}
.sa-button-group .sa-btn-yes {
    background-color: #E63946; 
    box-shadow: 0 4px #b82d38;
}
.sa-button-group .sa-btn-no {
    background-color: #A8DADC; 
    color: #4A4E69;
    box-shadow: 0 4px #85b0b3;
}

/* Estilos de la pantalla de resultados */
/* ... (El resto de estilos de resultados se mantienen) ... */


/* Responsive adjustment (Ajustes clave para móvil) */
@media (max-width: 650px) {
    #sa-survey-container {
        padding: 20px; 
        width: 100%; 
        border-radius: 0; 
        box-shadow: none; /* Eliminar sombra para una apariencia más limpia en full-screen */
        margin-bottom: 70px; /* Espacio para el botón fijo inferior */
    }
    
    .sa-main-title {
        font-size: 2em; /* Títulos más pequeños */
    }
    
    .sa-question-text {
        font-size: 1.6em; /* Preguntas más pequeñas */
    }
    
    .sa-explanation {
        font-size: 0.95em; /* Legibilidad máxima */
        padding: 10px;
    }
    
    

    /* Agrupar botones SÍ/NO verticalmente */
    .sa-button-group, .sa-helpline-buttons {
        flex-direction: column;
        gap: 10px;
    }
    
    .sa-button-group button, .sa-helpline-buttons .sa-btn, .sa-intro-buttons .sa-btn-start {
        width: 100%;
        margin: 5px 0;
    }
    
    /* Ajuste final del botón fijo para que se vea limpio */
    .sa-cancel-fixed {
        height: 50px; /* Altura fija para el área del botón */
        font-size: 1.1em;
        line-height: 50px;
        text-align: center;
    }
    .sa-cancel-fixed.sa-btn-secondary {
        /* Sobrescribir estilos del botón secundario para el fijo */
        border: none;
        box-shadow: none;
        padding: 0;
    }
}