/* --- VARIABLES GLOBALES Y CONFIGURACIÓN BASE --- */
:root {
    --background-color: #ffffff;
    --text-color: #000000;
    --primary-color: #000000;
    --secondary-color: #f0f0f0;
    --border-color: #e0e0e0;
    --disabled-color: #cccccc;
    --error-color: #d32f2f;
    --font-family: 'Inter', -apple-system, BlinkMacSystem-Font, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

html, body {
    height: 100%;
    margin: 0;
    font-family: var(--font-family);
    background-color: var(--background-color);
    color: var(--text-color);
    -webkit-tap-highlight-color: transparent;
}

#app-container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* --- ESTRUCTURA DE PANTALLAS Y TRANSICIONES --- */
.screen {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    opacity: 1;
    transition: opacity 0.5s ease-in-out;
    justify-content: center;
    align-items: center;
    padding: 20px;
    overflow-y: auto; /* Permite el scroll si el contenido es más alto que la pantalla */
    justify-content: flex-start; /* Alinea el contenido al inicio para un scroll natural */
}

.screen.hidden {
    display: none;
    opacity: 0;
}

/* --- BOTONES Y ELEMENTOS COMUNES --- */
.primary-button {
    background-color: var(--primary-color);
    color: var(--background-color);
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    -webkit-appearance: none;
}
.primary-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.primary-button:disabled {
    background-color: var(--disabled-color);
    cursor: not-allowed;
}

.secondary-button {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border: 1px solid var(--border-color);
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
    -webkit-appearance: none;
}
.secondary-button:hover:not(:disabled) {
    background-color: #e6e6e6;
}
.secondary-button:disabled {
    background-color: var(--secondary-color);
    color: var(--disabled-color);
    cursor: not-allowed;
}

/* --- PANTALLA DE CARGA --- */
.loading-content { text-align: center; }
.powered-by { font-size: 12px; margin-bottom: 4px; color: #777; }
.brand-name { font-size: 48px; margin: 0; }
.loading-bar-container { width: 150px; height: 4px; background-color: #eee; border-radius: 2px; margin: 20px auto; overflow: hidden; }
.loading-bar { width: 0%; height: 100%; background-color: var(--primary-color); border-radius: 2px; animation: load 1.5s ease-in-out forwards; }
@keyframes load { 0% { width: 0%; } 100% { width: 100%; } }

/* --- PANTALLA DE BIENVENIDA --- */
.welcome-content { text-align: center; max-width: 400px; }
#welcome-title { margin-bottom: 8px; }
#welcome-subtitle { color: #555; margin-bottom: 24px; line-height: 1.5; }
#invitation-code { width: 100%; padding: 12px; font-size: 16px; border: 1px solid var(--border-color); border-radius: 8px; margin-bottom: 16px; box-sizing: border-box; text-align: center; }
.error-message { color: var(--error-color); font-size: 14px; margin-top: 10px; }

/* --- PANTALLA DE ENCUESTA --- */
.survey-screen-flex-fix {
    position: relative; /* Necesario para posicionar el footer */
    height: 100%; /* Ocupa toda la altura del contenedor padre */
    padding: 0;
    justify-content: flex-start;
}
.survey-header { padding: 20px 20px 10px 20px; width: 100%; box-sizing: border-box; }
.progress-bar-container { width: 100%; height: 6px; background-color: #eee; border-radius: 3px; overflow: hidden; }
#progress-bar { width: 0%; height: 100%; background-color: var(--primary-color); transition: width 0.5s ease-out; }
.question-content { 
    overflow-y: auto; /* Permite el scroll vertical */
    padding: 20px 0 100px 0; /* Aumenta el padding inferior para dejar espacio al footer y se quita padding lateral */
    text-align: center; width: 100%; max-width: 600px; margin: 0 auto; box-sizing: border-box; height: 100%; }
.question-number { font-size: 14px; color: #777; margin-bottom: 16px; }
.question-text { font-size: 22px; font-weight: 600; line-height: 1.4; margin: 0 0 24px 0; }
.situation-text { background-color: #f7f7f7; border-radius: 8px; padding: 16px; font-style: italic; color: #555; margin-bottom: 16px; text-align: left; }

.likert-options { display: flex; justify-content: space-between; gap: 10px; margin: 20px 0; }
.likert-button { width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--border-color); background-color: transparent; font-size: 18px; cursor: pointer; transition: all 0.2s; }
.likert-button:hover { border-color: var(--primary-color); }
.likert-button.selected { background-color: var(--primary-color); color: var(--background-color); border-color: var(--primary-color); transform: scale(1.1); }
.likert-labels { display: flex; justify-content: space-between; font-size: 12px; color: #777; }

.survey-footer { 
    position: absolute; /* Fija el footer en la parte inferior */
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 20px; box-sizing: border-box; display: flex; justify-content: flex-end; align-items: center; border-top: 1px solid #f0f0f0; background-color: var(--background-color); 
}
.nav-button-prev { background: none; border: none; padding: 10px; color: var(--primary-color); cursor: pointer; }
.nav-button-prev:disabled { color: var(--disabled-color); }
.nav-button-next { min-width: 120px; }

/* Contenedores de respuesta de dilema */
.response-choice-container { display: flex; gap: 10px; justify-content: center; margin-bottom: 20px; }
.response-choice-button { background: var(--secondary-color); color: var(--text-color); border: 1px solid var(--border-color); padding: 10px 20px; border-radius: 20px; cursor: pointer; transition: all 0.2s; }
.response-choice-button.selected { background: var(--primary-color); color: var(--background-color); border-color: var(--primary-color); }
.response-input-container { display: none; width: 100%; }
.response-input-container.active { display: block; }
#response-text-area { width: 100%; font-family: var(--font-family); font-size: 16px; padding: 12px; border: 1px solid var(--border-color); border-radius: 8px; resize: vertical; box-sizing: border-box; }

/* Controles de audio */
.recorder-ui { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.recorder-status { font-size: 14px; color: #555; min-height: 20px; }
audio#audio-playback { width: 100%; margin: 15px 0; }
.recorder-actions button { background: none; border: 1px solid var(--primary-color); color: var(--primary-color); padding: 10px 20px; font-size: 14px; font-weight: 600; border-radius: 8px; cursor: pointer; margin: 0 5px; transition: background-color 0.2s, color 0.2s; }
.recorder-actions button:hover:not(:disabled) { background-color: var(--primary-color); color: var(--background-color); }
.recorder-actions button:disabled { border-color: var(--disabled-color); color: var(--disabled-color); cursor: not-allowed; }

/* --- PANTALLAS DE ESTADO (PROCESANDO, GRACIAS) --- */
.centered-content { text-align: center; max-width: 400px; }
.centered-content h2 { margin-bottom: 8px; }
.centered-content p { color: #555; line-height: 1.5; }
.spinner { margin: 20px auto; border: 4px solid #f3f3f3; border-top: 4px solid var(--primary-color); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

/* INICIO: Estilos para la barra de progreso de análisis */
.analysis-bar { margin-top: 20px; }
#analysis-progress-bar { width: 0%; height: 100%; background-color: var(--primary-color); transition: width 0.5s linear; }
#analysis-progress-bar.animate { animation: analyze 60s linear forwards; }
@keyframes analyze { 0% { width: 0%; } 100% { width: 100%; } }
/* FIN: Estilos para la barra de progreso de análisis */

/* INICIO: Estilos para la nueva pantalla de resultados */
.results-card {
    background-color: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    padding: 24px;
    max-width: 500px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
    text-align: center;
    margin: 0 20px; /* Añade margen lateral para que no pegue a los bordes en pantallas pequeñas */
}
#results-title {
    font-size: 24px;
    margin-top: 0;
    margin-bottom: 12px;
}
#results-description {
    color: #333;
    line-height: 1.6;
    margin-bottom: 24px;
}
.feedback-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color);
}
.feedback-section h3 {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 16px;
}
#accuracy-feedback-container {
    margin-top: 24px;
}
/* FIN: Estilos para la nueva pantalla de resultados */

@media (max-width: 480px) {
    .question-text { font-size: 18px; }
    .likert-options { gap: 5px; }
    .likert-button { width: 40px; height: 40px; font-size: 16px; }
    .results-actions { flex-direction: column; }
}