/* ============================================
   DESIGN TOKENS
   ============================================ */
:root {
    /* Typography */
    --font-family:          'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-base:       18px;   /* body text, paragraphs */
    --font-size-sm:         17px;   /* labels, instructions, slider value */
    --font-size-xs:         15px;   /* tick numbers */
    --font-size-lg:         21px;   /* question text */
    --font-size-h1:         30px;   /* screen titles */
    --font-size-btn:        18px;   /* buttons, inputs, option labels */

    /* Colors — text */
    --color-text-dark:      #2c3e50;
    --color-text-body:      #2c3e50;
    --color-text-muted:     #888;
    --color-text-subtle:    #777;
    --color-text-strong:    #444;

    /* Colors — UI */
    --color-accent:         #5b7fa5;
    --color-accent-dark:    #4a6e94;
    --color-accent-light:   #ddeaf7;
    --color-accent-hover:   #f0f5fa;
    --color-border:         #d0d7e0;
    --color-bg-input:       #fafafa;
    --color-bg-slider:      #e0e0e0;
    --color-bg-fill:        #bbb;
    --color-bg-tick:        #aaa;
    --color-thumb:          #777;
    --color-thumb-border:   #666;
    --color-disabled-bg:    #b0bec5;
    --color-disabled-text:  #eceff1;

    /* Layout */
    --max-width-content:    1200px;
    --max-width-box:        900px;
    --max-width-trial:      1100px;
    --max-width-slider:     780px;
    --box-padding:          50px 80px;
    --trial-padding:        18px 70px 14px 70px;
    --max-height-box:       92vh;
}

/* ============================================
   ESTILOS GENERALES
   ============================================ */
body {
    background-color: #f5f5f5;
    font-family: var(--font-family);
    overflow: hidden;
}

.jspsych-content {
    max-width: var(--max-width-content);
    font-size: var(--font-size-base);
    line-height: 1.6;
}

/* ============================================
   PANTALLA DE BIENVENIDA
   ============================================ */
.welcome-container {
    background: white;
    border-radius: 12px;
    padding: var(--box-padding);
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    max-width: var(--max-width-box);
    max-height: var(--max-height-box);
    overflow-y: auto;
    margin: 0 auto;
    text-align: center;
}

.welcome-container h1 {
    font-size: var(--font-size-h1);
    color: var(--color-text-dark);
    margin-bottom: 24px;
    font-weight: 600;
}

.welcome-container p {
    font-size: var(--font-size-base);
    color: var(--color-text-body);
    text-align: justify;
    margin-bottom: 16px;
}

.welcome-container .instruction {
    margin-top: 32px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-style: italic;
}

.welcome-container .imagen-container {
    text-align: center;
    margin: 18px 0;
}

.welcome-container .imagen-container img {
    max-width: 100%;
    max-height: 45vh;
    border-radius: 8px;
}

/* ============================================
   TRIAL - CONTENEDOR GENERAL
   ============================================ */
.trial-container {
    background: white;
    border-radius: 12px;
    padding: var(--trial-padding);
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    max-width: var(--max-width-trial);
    max-height: var(--max-height-box);
    overflow-y: auto;
    margin: 0 auto;
}

.trial-container .texto-superior {
    font-size: var(--font-size-base);
    color: var(--color-text-dark);
    text-align: center;
    margin-bottom: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.trial-container .imagen-container {
    text-align: center;
    margin-bottom: 10px;
}

.trial-container .imagen-container img {
    max-width: 100%;
    max-height: 44vh;
    border-radius: 8px;
}

.trial-container .texto-inferior {
    font-size: var(--font-size-base);
    color: var(--color-text-dark);
    text-align: center;
    margin-bottom: 6px;
    font-weight: 500;
    line-height: 1.4;
}

/* ============================================
   SLIDER PERSONALIZADO (ESTILO QUALTRICS)
   ============================================ */
.custom-slider-wrapper {
    width: 100%;
    max-width: var(--max-width-slider);
    margin: 0 auto;
    padding: 4px 0 6px 0;
}

.slider-labels-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 4px;
    padding: 0 2px;
}

.slider-labels-top span {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    font-weight: 600;
}

.slider-ticks-numbers {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
    padding: 0 2px;
}

.slider-ticks-numbers span {
    font-size: var(--font-size-xs);
    color: var(--color-text-subtle);
    width: 30px;
    text-align: center;
}

.slider-track-container {
    position: relative;
    width: 100%;
    height: 36px;
    display: flex;
    align-items: center;
}

/* Barra de fondo */
.slider-track {
    position: absolute;
    width: 100%;
    height: 14px;
    background: var(--color-bg-slider);
    border-radius: 7px;
    top: 50%;
    transform: translateY(-50%);
}

/* Barra de relleno */
.slider-fill {
    position: absolute;
    height: 14px;
    background: var(--color-bg-fill);
    border-radius: 7px 0 0 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
    transition: width 0.05s ease;
}

/* Input range real (transparente, encima de todo) */
.custom-slider-input {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 36px;
    background: transparent;
    position: relative;
    z-index: 2;
    cursor: pointer;
    margin: 0;
}

/* Thumb - Chrome/Edge/Safari */
.custom-slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    margin-top: -4px;
    border-radius: 50%;
    background: var(--color-thumb);
    border: 2px solid var(--color-thumb-border);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
    transition: background 0.15s ease;
}

.custom-slider-input::-webkit-slider-thumb:hover {
    background: var(--color-text-muted);
}

/* Thumb - Firefox */
.custom-slider-input::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-thumb);
    border: 2px solid var(--color-thumb-border);
    cursor: pointer;
    box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* Track invisible en Chrome */
.custom-slider-input::-webkit-slider-runnable-track {
    height: 14px;
    background: transparent;
}

/* Track invisible en Firefox */
.custom-slider-input::-moz-range-track {
    height: 14px;
    background: transparent;
}

/* Tick marks */
.slider-tickmarks {
    display: flex;
    justify-content: space-between;
    padding: 0 2px;
    margin-top: -2px;
}

.slider-tickmarks span {
    width: 1px;
    height: 8px;
    background: var(--color-bg-tick);
}

/* Valor actual */
.slider-value-display {
    text-align: center;
    margin-top: 6px;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.slider-value-display strong {
    color: var(--color-text-strong);
    font-size: var(--font-size-base);
}

/* ============================================
   FASE DE APRENDIZAJE — SELECCIÓN MÚLTIPLE
   ============================================ */
.learning-question-text {
    font-size: var(--font-size-lg);
    color: var(--color-text-dark);
    text-align: center;
    margin-bottom: 18px;
    font-weight: 500;
    line-height: 1.5;
}

.learning-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
}

.learning-option-label {
    display: block;
    padding: 10px 18px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: var(--font-size-btn);
    color: var(--color-text-dark);
    background: var(--color-bg-input);
    transition: border-color 0.15s ease, background 0.15s ease;
    text-align: left;
    user-select: none;
}

/* Pantalla de PREGUNTA del learning: imagen + texto + 3 opciones + botón.
   Como hay más elementos que en la pantalla INFO, se reduce la imagen y se
   compacta el padding del contenedor para que TODO entre en una sola vista
   sin necesidad de scroll. */
.trial-container.learning-question {
    padding: 10px 50px 12px 50px;
}

.trial-container.learning-question .imagen-container {
    margin-bottom: 6px;
}

.trial-container.learning-question .imagen-container img {
    max-height: 40vh;
}

.learning-option-label:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-hover);
}

.learning-option-label.selected {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
    font-weight: 600;
}

/* ============================================
   PREGUNTAS SOCIODEMOGRÁFICAS
   ============================================ */
.socio-input {
    display: block;
    margin: 8px auto 16px;
    padding: 10px 14px;
    width: 60%;
    max-width: 320px;
    font-size: var(--font-size-btn);
    border: 2px solid var(--color-border);
    border-radius: 8px;
    text-align: center;
    background: var(--color-bg-input);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.socio-input:focus {
    outline: none;
    border-color: var(--color-accent);
    background: #fff;
}

/* Oculta las flechas del input numérico */
.socio-input[type="number"]::-webkit-outer-spin-button,
.socio-input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.socio-input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.socio-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 10px 0 20px;
    text-align: left;
}

.socio-option-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border: 2px solid var(--color-border);
    border-radius: 8px;
    cursor: pointer;
    font-size: var(--font-size-btn);
    color: var(--color-text-dark);
    background: var(--color-bg-input);
    transition: border-color 0.15s ease, background 0.15s ease;
    user-select: none;
}

.socio-option-label:hover {
    border-color: var(--color-accent);
    background: var(--color-accent-hover);
}

.socio-option-label input[type="radio"] {
    margin: 0;
    cursor: pointer;
}

.socio-option-label:has(input[type="radio"]:checked) {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
    font-weight: 600;
}

/* Botón continuar — reserva su espacio aunque esté oculto, para que el
   layout no crezca al aparecer y todo el trial quepa en una pantalla. */
.btn-continuar {
    visibility: hidden;
    display: block;
    margin: 10px auto 0;
    padding: 10px 40px;
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: var(--font-size-btn);
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-continuar:hover {
    background: var(--color-accent-dark);
}

.btn-continuar.visible {
    visibility: visible;
}

.btn-continuar.visible:disabled {
    background: var(--color-disabled-bg);
    color: var(--color-disabled-text);
    cursor: not-allowed;
}

/* Fila con Previous (izquierda) + Continue (derecha) */
.btn-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    gap: 16px;
}

.btn-row .btn-continuar {
    margin: 0;
}

.btn-previous {
    display: block;
    padding: 10px 40px;
    background: white;
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
    border-radius: 8px;
    font-size: var(--font-size-btn);
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn-previous:hover {
    background: var(--color-accent-hover);
}