/* El test de la ciudad. Se sirve tal cual, sin pasar por Tailwind: el juego es
   una pantalla cerrada con su propio mundo de colores, igual que el vóley. */
:root {
    --test-tinta: #22303c;
    --test-suave: #5b6b7a;
    --test-hoja: #ffffff;
    --test-borde: #e2e8f0;
    --test-marca: #3f52a8;
    --test-bien: #15803d;
    --test-bien-fondo: #dcfce7;
    --test-mal: #b91c1c;
    --test-mal-fondo: #fee2e2;
}

.test {
    max-width: 720px;
    margin: 0 auto 32px;
    color: var(--test-tinta);
    font-family: 'Baloo 2', ui-rounded, system-ui, sans-serif;
}

.test .hoja {
    background: var(--test-hoja);
    border: 1px solid var(--test-borde);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(34, 48, 60, .07);
    padding: 24px 20px 28px;
}

/*
  UN BOTÓN QUE SE PUEDE TOCAR CON EL DEDO.
  48 píxeles de alto es lo que mide la yema de un dedo adulto. Por debajo de
  eso, en el móvil se falla de tocar, y en un test de respuestas eso se vive
  como un fallo del que juega.
*/
.test .boton {
    display: inline-block;
    min-height: 48px;
    padding: 12px 28px;
    border: 0;
    border-radius: 999px;
    background: var(--test-marca);
    color: #fff;
    font: inherit;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: pointer;
    text-decoration: none;
}

.test .boton:hover { filter: brightness(1.08); }
.test .boton.hueco { background: transparent; color: var(--test-marca); box-shadow: inset 0 0 0 2px currentColor; }

/* ------------------------------------------------------------- La portada */

.test .cartel { text-align: center; }

.test .firma {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0 0 18px;
    color: var(--test-suave);
    font-size: .85rem;
}

.test .firma .logo { height: 26px; width: auto; }

.test .cartel h1 {
    margin: 0 0 4px;
    font-size: clamp(1.6rem, 5vw, 2.3rem);
    font-weight: 800;
    line-height: 1.15;
}

.test .dia {
    margin: 0 0 18px;
    color: var(--test-suave);
    font-size: .95rem;
    text-transform: lowercase;
}

.test .explica {
    margin: 0 auto 22px;
    max-width: 30rem;
    color: var(--test-suave);
    line-height: 1.5;
}

.test .ya {
    margin: 0 auto 20px;
    max-width: 30rem;
    padding: 12px 16px;
    border-radius: 12px;
    background: #f1f5f9;
    color: var(--test-tinta);
    font-weight: 600;
}

/* --------------------------------------------------------------- El test */

.test .marcha { margin-bottom: 18px; }

.test .cuenta {
    margin: 0 0 8px;
    color: var(--test-suave);
    font-size: .9rem;
    font-weight: 600;
}

.test .barra {
    height: 6px;
    border-radius: 999px;
    background: var(--test-borde);
    overflow: hidden;
}

.test .barra .hecho {
    display: block;
    height: 100%;
    width: 0;
    background: var(--test-marca);
    transition: width .25s ease;
}

.test .tema {
    margin: 0 0 6px;
    color: var(--test-marca);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.test .pregunta {
    margin: 0 0 20px;
    font-size: clamp(1.25rem, 4.2vw, 1.6rem);
    font-weight: 800;
    line-height: 1.25;
}

.test .opciones {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: grid;
    gap: 10px;
}

.test .opcion {
    width: 100%;
    min-height: 56px;
    padding: 12px 18px;
    border: 2px solid var(--test-borde);
    border-radius: 14px;
    background: #fff;
    color: inherit;
    font: inherit;
    font-size: 1.05rem;
    text-align: left;
    cursor: pointer;
}

.test .opcion:hover:enabled { border-color: var(--test-marca); }
.test .opcion:disabled { cursor: default; opacity: .75; }

/*
  EL ACIERTO Y EL FALLO NO SE DICEN SOLO CON COLOR.
  Quien no distingue el verde del rojo --uno de cada doce hombres-- vería dos
  botones iguales. Por eso además va un símbolo delante.
*/
.test .opcion.buena {
    border-color: var(--test-bien);
    background: var(--test-bien-fondo);
    opacity: 1;
    font-weight: 700;
}

.test .opcion.buena::before { content: '✓ '; color: var(--test-bien); font-weight: 900; }

.test .opcion.fallo {
    border-color: var(--test-mal);
    background: var(--test-mal-fondo);
    opacity: 1;
}

.test .opcion.fallo::before { content: '✗ '; color: var(--test-mal); font-weight: 900; }

.test .juicio {
    margin: 0 0 14px;
    min-height: 1.5em;
    font-weight: 700;
}

.test .juicio.acierto { color: var(--test-bien); }
.test .juicio.error { color: var(--test-mal); }

/* ----------------------------------------------------------- El resultado */

.test .final { text-align: center; }

.test .nota {
    margin: 0 0 6px;
    font-size: clamp(2rem, 8vw, 3rem);
    font-weight: 900;
    color: var(--test-marca);
}

.test .frase {
    margin: 0 0 4px;
    font-size: 1.15rem;
    font-weight: 700;
}

.test .manana {
    margin: 0 0 20px;
    color: var(--test-suave);
    font-size: .95rem;
}

.test .botones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 26px;
}

.test .repaso {
    list-style: none;
    margin: 0;
    padding: 0;
    text-align: left;
    border-top: 1px solid var(--test-borde);
}

.test .repaso li {
    display: flex;
    gap: 10px;
    padding: 14px 2px;
    border-bottom: 1px solid var(--test-borde);
    line-height: 1.35;
}

.test .repaso .marca { font-weight: 900; }
.test .repaso .marca.si { color: var(--test-bien); }
.test .repaso .marca.no { color: var(--test-mal); }
.test .repaso b { display: block; font-weight: 700; }
.test .repaso .era { display: block; margin-top: 2px; color: var(--test-suave); font-size: .95rem; }

@media (max-width: 480px) {
    .test .hoja { padding: 18px 14px 22px; border-radius: 14px; }
    .test .boton { width: 100%; }
    .test .botones .boton { width: auto; flex: 1 1 auto; }
}