/*
 * El formulario publico. Escrito a mano, servido estatico: no hay Node en este
 * proyecto y no hay nada que compilar.
 *
 * Mobile-first, porque se responde desde el celular. Todo lo que se toca mide
 * al menos 44 px, que es lo que pide un dedo, y la tipografia no baja de 16 px,
 * que es lo que evita que el navegador del telefono haga zoom al enfocar un
 * campo.
 */

:root {
    --tinta: #1c1c1a;
    --tinta-suave: #5d5d57;
    --papel: #faf9f6;
    --tarjeta: #ffffff;
    --borde: #e2e0d8;
    --borde-fuerte: #c9c6ba;
    --acento: #2f5d50;
    --acento-suave: #eaf1ee;
    --alerta: #8a5a12;
    --alerta-suave: #fdf4e3;
    --falta: #9a3b2f;
}

@media (prefers-color-scheme: dark) {
    :root {
        --tinta: #ece9e2;
        --tinta-suave: #a8a49a;
        --papel: #16171a;
        --tarjeta: #1e2024;
        --borde: #32353b;
        --borde-fuerte: #4a4e56;
        --acento: #8fc7b4;
        --acento-suave: #223530;
        --alerta: #e3bd7e;
        --alerta-suave: #332a1b;
        --falta: #e39a8e;
    }
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--papel);
    color: var(--tinta);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.55;
}

.hoja {
    max-width: 34rem;
    margin: 0 auto;
    padding: 1.5rem 1rem 3rem;
}

h1 {
    font-size: 1.5rem;
    line-height: 1.25;
    margin: 0 0 0.5rem;
}

h2 {
    font-size: 1.15rem;
    margin: 0 0 0.5rem;
}

p {
    margin: 0 0 0.9rem;
}

.descripcion {
    color: var(--tinta-suave);
}

/* --- la hora de cierre ------------------------------------------------- */

.cuenta {
    position: sticky;
    top: 0;
    z-index: 2;
    margin: 0 -1rem 0.75rem;
    padding: 0.6rem 1rem;
    background: var(--papel);
    border-bottom: 1px solid var(--borde);
    color: var(--tinta-suave);
    font-size: 0.95rem;
}

/* Sin rojo y sin parpadeo: esto no es un examen. */
.cuenta--final {
    color: var(--tinta);
    font-weight: 600;
}

.cuenta__nota {
    margin: -0.25rem 0 1rem;
    color: var(--tinta-suave);
    font-size: 0.95rem;
}

/* --- bloques y preguntas ----------------------------------------------- */

.cabecera {
    margin-bottom: 1.5rem;
}

.bloque {
    margin-bottom: 2rem;
}

.bloque__titulo {
    padding-bottom: 0.4rem;
    border-bottom: 2px solid var(--borde-fuerte);
}

.pregunta {
    margin-bottom: 1rem;
    padding: 1rem;
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: 0.75rem;
}

.pregunta--falta {
    border-color: var(--falta);
}

.enunciado {
    margin: 0 0 0.75rem;
    font-size: 1.05rem;
    line-height: 1.4;
}

.etiqueta-obligatoria {
    display: inline-block;
    margin-left: 0.4rem;
    color: var(--tinta-suave);
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: lowercase;
    vertical-align: middle;
}

.ayuda {
    margin: -0.4rem 0 0.75rem;
    color: var(--tinta-suave);
    font-size: 0.9rem;
}

.falta {
    margin: 0.75rem 0 0;
    color: var(--falta);
    font-size: 0.9rem;
}

/* --- opciones ----------------------------------------------------------- */

.opciones {
    list-style: none;
    margin: 0;
    padding: 0;
}

.opciones li + li {
    margin-top: 0.4rem;
}

.opcion {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    min-height: 44px;
    padding: 0.55rem 0.75rem;
    border: 1px solid var(--borde);
    border-radius: 0.6rem;
    cursor: pointer;
}

.opcion:has(input:checked) {
    background: var(--acento-suave);
    border-color: var(--acento);
}

.opcion:has(input:disabled) {
    opacity: 0.45;
}

.opcion input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0;
    accent-color: var(--acento);
    flex: none;
}

/* --- escala ------------------------------------------------------------- */

.escala__numeros {
    display: flex;
    gap: 0.4rem;
    list-style: none;
    margin: 0.5rem 0;
    padding: 0;
}

.escala__numeros li {
    flex: 1;
}

.escala__numero {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    border: 1px solid var(--borde);
    border-radius: 0.6rem;
    cursor: pointer;
}

.escala__numero:has(input:checked) {
    background: var(--acento-suave);
    border-color: var(--acento);
    font-weight: 600;
}

.escala__numero input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.escala__extremo {
    display: block;
    color: var(--tinta-suave);
    font-size: 0.85rem;
}

/* --- texto libre -------------------------------------------------------- */

.campo {
    width: 100%;
    padding: 0.7rem;
    background: var(--papel);
    color: var(--tinta);
    border: 1px solid var(--borde-fuerte);
    border-radius: 0.6rem;
    font: inherit;
}

.campo--largo {
    resize: vertical;
}

.campo:focus-visible,
.opcion:focus-within,
.escala__numero:focus-within {
    outline: 2px solid var(--acento);
    outline-offset: 2px;
}

/* --- avisos y carteles -------------------------------------------------- */

.aviso {
    padding: 0.75rem 1rem;
    border-radius: 0.6rem;
    font-size: 0.95rem;
}

.aviso--nombres {
    background: var(--acento-suave);
    color: var(--tinta);
}

.aviso--falta {
    border: 1px solid var(--falta);
    color: var(--falta);
}

.cartel {
    margin-bottom: 0.9rem;
    padding: 0.85rem 1rem;
    background: var(--alerta-suave);
    border-left: 4px solid var(--alerta);
    border-radius: 0.4rem;
    font-size: 0.95rem;
}

.cartel p:last-of-type {
    margin-bottom: 0;
}

.cartel__gracias {
    margin-top: 0.75rem;
    font-weight: 600;
}

.cartel__botones {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.75rem;
}

/* Lo que queda cuando alguien apago el cartel: discreto, pero con la vuelta
   atras a la vista. */
.descartado {
    margin: -0.25rem 0 0.9rem;
    color: var(--tinta-suave);
    font-size: 0.9rem;
}

.enlace {
    padding: 0;
    background: none;
    border: 0;
    color: var(--acento);
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
}

/* --- botones ------------------------------------------------------------ */

.boton {
    display: inline-block;
    min-height: 48px;
    padding: 0.75rem 1.25rem;
    border: 1px solid var(--acento);
    border-radius: 0.6rem;
    background: var(--acento);
    color: var(--papel);
    font: inherit;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
}

.boton--enviar {
    width: 100%;
}

.boton--reportar,
.boton--descartar {
    min-height: 44px;
    padding: 0.5rem 0.9rem;
    background: transparent;
    font-size: 0.9rem;
}

.boton--reportar {
    border-color: var(--alerta);
    color: var(--alerta);
}

/* Contradecir al cartel es la salida tranquila, no la principal: mismo tamaño
   que reportar, sin el color de alerta. */
.boton--descartar {
    border-color: var(--borde-fuerte);
    color: var(--tinta-suave);
    font-weight: 400;
}

.envio {
    margin-top: 1.5rem;
}

/* --- pantallas de una sola cosa ----------------------------------------- */

.pantalla,
.pacto {
    padding: 1.25rem;
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: 0.75rem;
}

.pacto__punto {
    padding-left: 0.9rem;
    border-left: 3px solid var(--borde-fuerte);
}

.devuelto {
    margin-top: 1.5rem;
}

.devuelto__item {
    margin-bottom: 1rem;
    padding: 0.9rem 1rem;
    background: var(--tarjeta);
    border: 1px solid var(--borde);
    border-radius: 0.6rem;
}

.devuelto__item h2 {
    font-size: 0.9rem;
    color: var(--tinta-suave);
    font-weight: 600;
}

.devuelto__item p {
    margin: 0;
    white-space: pre-wrap;
}

.pie {
    max-width: 34rem;
    margin: 0 auto;
    padding: 0 1rem 2.5rem;
    color: var(--tinta-suave);
    font-size: 0.85rem;
    text-align: center;
}

@media (min-width: 40rem) {
    .hoja {
        padding-top: 2.5rem;
    }

    .cuenta {
        margin-left: 0;
        margin-right: 0;
        border-radius: 0 0 0.5rem 0.5rem;
    }
}