/*
 * Hay ansiedad reactiva documentada y la ansiedad degrada exactamente atención
 * y memoria operativa. Así que el diseño no es cosmética: tipografía grande,
 * mucho aire, cero rojo de castigo, cero cuentas atrás agresivas.
 *
 * El color solo marca estado cuando aporta información; nunca "has fallado".
 */

:root {
    --ink: #1c2024;
    --ink-soft: #4a5560;
    --ink-faint: #79838d;
    --paper: #fbfaf8;
    --card: #ffffff;
    --line: #e2e0dc;
    --accent: #2f6f6b;
    --accent-soft: #e6f0ef;
    --warm: #a9682f;
    --warm-soft: #f7efe6;
    --focus: #1f5f9e;

    --radius: 10px;
    --gap: 1.25rem;
    --measure: 34rem;

    color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--paper);
    color: var(--ink);
    font: 400 1.125rem/1.6 ui-serif, Georgia, "Iowan Old Style", serif;
    padding-bottom: 4rem;
}

h1, h2, h3 { line-height: 1.25; font-weight: 600; margin: 0 0 0.5em; }
h1 { font-size: 1.75rem; }
h2 { font-size: 1.375rem; }
h3 { font-size: 1.125rem; }
p { margin: 0 0 1em; max-width: var(--measure); }

a { color: var(--focus); }

:focus-visible {
    outline: 3px solid var(--focus);
    outline-offset: 2px;
    border-radius: 4px;
}

.skip-link {
    position: absolute; left: -9999px;
    background: var(--card); padding: 0.75rem 1rem; z-index: 10;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Cabecera ----------------------------------------------------------- */

.site-header {
    border-bottom: 1px solid var(--line);
    background: var(--card);
}
.site-header nav {
    display: flex; align-items: center; gap: 1.5rem;
    max-width: 60rem; margin: 0 auto; padding: 0.875rem 1.25rem;
    font-size: 1rem;
}
.site-header ul {
    display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0;
    flex: 1;
}
.site-header a { color: var(--ink-soft); text-decoration: none; }
.site-header a:hover, .site-header a[aria-current] { color: var(--accent); text-decoration: underline; }
.brand { font-weight: 600; color: var(--ink) !important; }

main {
    max-width: 60rem;
    margin: 0 auto;
    padding: 2rem 1.25rem;
}
main:focus { outline: none; }

/* --- Bloques ------------------------------------------------------------ */

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: var(--gap);
}

.stack > * + * { margin-top: var(--gap); }

.grid-2 {
    display: grid;
    gap: var(--gap);
    grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.note {
    background: var(--accent-soft);
    border-left: 4px solid var(--accent);
    padding: 0.875rem 1.125rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 1rem;
}
.note + .note { margin-top: 0.75rem; }

.note--warm { background: var(--warm-soft); border-left-color: var(--warm); }

.muted { color: var(--ink-faint); font-size: 0.9375rem; }

.error {
    background: var(--warm-soft);
    border-left: 4px solid var(--warm);
    padding: 0.875rem 1.125rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    font-size: 1rem;
}

/* --- Formularios -------------------------------------------------------- */

label { display: block; font-size: 1rem; font-weight: 600; margin-bottom: 0.375rem; }

input[type="text"], input[type="email"], input[type="password"],
input[type="number"], textarea, select {
    width: 100%;
    font: inherit;
    font-size: 1.0625rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--card);
    color: inherit;
}
textarea { min-height: 8rem; resize: vertical; line-height: 1.7; }
input[type="number"] { max-width: 8rem; }

.field + .field { margin-top: 1.125rem; }
.hint-text { font-size: 0.9375rem; color: var(--ink-faint); font-weight: 400; margin: 0.25rem 0 0; }

button, .button {
    font: inherit;
    font-size: 1.0625rem;
    padding: 0.625rem 1.25rem;
    border-radius: 8px;
    border: 1px solid var(--accent);
    background: var(--accent);
    color: #fff;
    cursor: pointer;
}
button:hover { background: #275c58; }
button[disabled] { opacity: 0.5; cursor: not-allowed; }

button.secondary {
    background: transparent;
    color: var(--accent);
}
button.secondary:hover { background: var(--accent-soft); }

.link-button {
    background: none; border: none; color: var(--ink-soft);
    padding: 0; font-size: 1rem; text-decoration: underline; cursor: pointer;
}
.link-button:hover { background: none; color: var(--accent); }

.actions { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; align-items: center; }

/* --- Presentación de estímulos ------------------------------------------ */

.stimulus {
    display: grid;
    place-items: center;
    min-height: 14rem;
    font-size: 2.5rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
}

.progress {
    height: 6px;
    background: var(--line);
    border-radius: 3px;
    overflow: hidden;
    margin-top: 1rem;
}
.progress > span {
    display: block; height: 100%;
    background: var(--accent);
    transition: width 200ms linear;
}

/* --- Diálogo (módulo A) -------------------------------------------------- */

.dialogue { max-width: var(--measure); }
.turn { margin-bottom: 1rem; }
.turn .speaker { font-weight: 600; color: var(--accent); font-size: 0.9375rem; display: block; }
.turn p { margin: 0.125rem 0 0; }

/* --- Texto de lectura (módulo E) ------------------------------------------ */

.reading-text { max-width: var(--measure); line-height: 1.6; }
.reading-text p { margin: 0 0 1rem; }
.reading-text p:last-child { margin-bottom: 0; }

/* --- Rejilla (módulo C) -------------------------------------------------- */

.grid-wrap { overflow-x: auto; }
table.grid { border-collapse: collapse; width: 100%; font-size: 1rem; }
table.grid th, table.grid td {
    border: 1px solid var(--line);
    padding: 0.5rem;
    text-align: left;
    vertical-align: middle;
}
table.grid th { background: var(--accent-soft); font-weight: 600; }
table.grid td select { min-width: 10rem; }
table.grid tr.flagged td { background: var(--warm-soft); }

ol.clues { max-width: var(--measure); padding-left: 1.5rem; }
ol.clues li { margin-bottom: 0.5rem; }

/* --- Listas de opciones -------------------------------------------------- */

.options { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.options li { margin: 0; }
.options label {
    display: flex; align-items: center; gap: 0.625rem;
    font-weight: 400; margin: 0;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--line); border-radius: 8px;
    background: var(--card); cursor: pointer;
}
.options input { width: auto; margin: 0; }
.options label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

/* --- Métricas y curvas --------------------------------------------------- */

.metric { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
.metric:last-child { border-bottom: none; }
.metric .value { font-weight: 600; font-variant-numeric: tabular-nums; }

.goal { border-bottom: 1px solid var(--line); padding: 1rem 0; }
.goal:last-child { border-bottom: none; }
.goal-scale { display: flex; gap: 0.25rem; flex-wrap: wrap; margin-top: 0.5rem; }
.goal-scale button {
    width: 2.5rem; padding: 0.375rem 0; text-align: center;
    background: var(--card); color: var(--ink-soft); border-color: var(--line);
    font-variant-numeric: tabular-nums;
}
.goal-scale button[aria-pressed="true"] { background: var(--accent); color: #fff; border-color: var(--accent); }

svg.spark { display: block; width: 100%; height: 3.5rem; overflow: visible; }
svg.spark path { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
svg.spark circle { fill: var(--accent); }

.loading { color: var(--ink-faint); }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}

/* --- Módulo D: vigilancia ------------------------------------------------ */

/*
 * El estímulo va centrado y los distractores a los lados, fuera del punto de
 * fijación. Si compartieran la misma línea de lectura dejarían de ser
 * distractores periféricos y pasarían a ser parte del estímulo.
 */
.stimulus-frame {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 1rem;
}
.stimulus-frame .stimulus { border: none; background: none; min-height: 11rem; }

.distractor {
    color: var(--ink-faint);
    font-size: 1.125rem;
    opacity: 0.55;
    text-align: center;
    user-select: none;
}
.distractor:first-child { text-align: right; }

button.respond {
    width: 100%;
    padding: 1.25rem;
    font-size: 1.25rem;
    /* Sin transición: cualquier animación aquí falsea la percepción de la
       propia latencia, que es justo lo que se está midiendo. */
    transition: none;
}
button.respond.pressed { background: var(--warm); border-color: var(--warm); }
button.respond:disabled { opacity: 0.4; }

/* --- Nivel ---------------------------------------------------------------- */

.level-row { padding-bottom: 0.75rem; border-bottom: 1px solid var(--line); }
.level-row:last-child { border-bottom: none; }
.level-row .metric { border-bottom: none; padding-bottom: 0.25rem; }
.level-row .muted { margin: 0.25rem 0 0; font-size: 0.875rem; }

.level-bar { display: flex; gap: 3px; }
.level-bar span {
    flex: 1;
    height: 8px;
    border-radius: 2px;
    background: var(--line);
}
.level-bar span.on { background: var(--accent); }

/* --- Repaso final --------------------------------------------------------- */

/*
 * El rojo aparece SOLO aquí, al cerrar la sesión. Durante el ejercicio el
 * error se trata como "todavía no", porque hay ansiedad reactiva documentada y
 * marcar en rojo mientras se intenta empeora justo lo que se entrena. Pero al
 * repasar hace falta ver con claridad qué falló: sin eso no hay corrección.
 */
ul.review { list-style: none; padding: 0; margin: 0 0 1rem; display: grid; gap: 2px; }
ul.review li {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    padding: 0.5rem 0.75rem;
    border-left: 4px solid transparent;
    border-radius: 0 6px 6px 0;
    font-size: 1rem;
}
ul.review .word { font-weight: 600; }
ul.review .tag { font-size: 0.875rem; color: var(--ink-faint); }

.review-ok   { background: var(--accent-soft); border-left-color: var(--accent); }
.review-warn { background: var(--warm-soft);   border-left-color: var(--warm); }
.review-bad  { background: #fbecec;            border-left-color: #a33a3a; }
.review-bad .word { color: #8c2f2f; }
.review-bad .tag  { color: #a33a3a; }

.note--good { background: var(--accent-soft); border-left-color: var(--accent); }

/* Bloque "por qué ha salido así". Va antes que las cifras y con más peso
   visual que ellas: la explicación es el producto de la pantalla final, no
   un adorno alrededor del número. */
.why-item {
    border-left: 3px solid var(--accent);
    padding: 0.1rem 0 0.1rem 0.9rem;
    margin: 0 0 1.1rem;
}
.why-item h3 {
    margin: 0 0 0.3rem;
    font-size: 1rem;
    color: var(--accent);
}
.why-item p {
    margin: 0;
    line-height: 1.55;
}

.more-metrics {
    margin-top: 1.2rem;
}
.more-metrics summary {
    cursor: pointer;
    color: var(--muted);
    font-size: 0.92rem;
    padding: 0.4rem 0;
}