/* ══════════════════════════════════════════════════════════════════════════
   El simulador, vestido con la identidad de ONDA.

   ESTA HOJA YA NO DEFINE NI UN COLOR. Los nombres que usa el resto del
   archivo --bg, --ink, --accent...-- quedan servidos por los tokens de
   /onda/marca-onda.css, que salen del Manual de Identidad ONDA. El dia que
   el manual cambie un valor, cambia aca sin tocar esta hoja.

   Antes habia 60 colores literales y cada uno estaba escrito tres veces
   --claro, @media oscuro y [data-theme=dark]--. Nada escribia nunca ese
   atributo, asi que un tercio de la hoja era una rama muerta.

   ─── COMO SE CUMPLEN LAS REGLAS DEL MANUAL ──────────────────────────────

   EL CIAN, DOS APARICIONES COMO MAXIMO POR PANTALLA. Las de aqui son:
       1. la accion principal: el boton que continua
       2. lo que esta ocurriendo ahora: la barra de avance del examen, o el
          anillo de foco del campo activo -- y solo hay uno a la vez
   Por eso DEJARON de ser cian el borde de las opciones, el hover de las
   tarjetas, el recuadro del reproductor, el hueco de la frase y el
   antetitulo: eran la tercera, la cuarta y la quinta aparicion, y con eso
   el cian deja de señalar. Van en gris, que es lo que el manual pide para
   lo que no esta ocurriendo. Quien lo aplica es identidad.css.

   LOS ESTADOS NO SON MARCA. Acierto, aviso y error salen de --dato-*:
   señalan el dato, no la identidad, y por eso no son cian.

   EL TEMA LO DECIDE ONDA: oscuro por defecto, claro cuando el sistema lo
   pide. Esta hoja ya no lo decide, lo hereda.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  /* Superficies y texto: los roles semanticos de ONDA, con los nombres que
     el resto de esta hoja ya usaba. */
  --bg:      var(--sup-fondo);
  --surface: var(--sup-superficie);
  --ink:     var(--sup-texto);
  --muted:   var(--sup-tenue);
  --line:    var(--sup-borde);

  /* LA SEÑAL. El cian, y solo para lo que esta ocurriendo. */
  --senal:     var(--sup-accion);
  /* El texto SOBRE el cian va en noche, y NO en --sup-accion-sobre: en el tema
     oscuro ese token trae espuma --que es casi blanca-- y el cian de pantalla
     tambien es claro, asi que el texto del boton principal quedaba sin leerse.
     Es la misma correccion que hace el portal de Authelia. En el tema claro el
     cian es --onda-cian-print, que si es oscuro, y ahi el blanco corresponde. */
  --senal-ink: var(--onda-noche);

  /* El acento ESTRUCTURAL. Es lo que antes era --accent y pintaba de cian
     media pantalla: bordes activos, hovers, recuadros. Un borde de texto
     marca igual de bien sin gastar la señal. */
  --accent:     var(--sup-texto);
  --accent-ink: var(--sup-fondo);

  /* Fondos sutiles, derivados del tema en curso en vez de escritos a mano.
     Antes cada uno tenia tres literales; ahora siguen al tema solos. */
  --soft: color-mix(in srgb, var(--sup-texto) 7%, var(--sup-superficie));
  --chip: color-mix(in srgb, var(--sup-texto) 9%, var(--sup-superficie));
  --mark: color-mix(in srgb, var(--dato-atencion) 34%, var(--sup-superficie));

  /* Estados de dato. */
  --good: var(--dato-positivo);
  --warn: var(--dato-atencion);
  --bad:  var(--dato-critico);

  /* Tipografia de ONDA, servida desde /onda/fuentes.css. */
  --display: var(--onda-sans);
  --body:    var(--onda-sans);
  --mono:    var(--onda-mono);
}

/* Los controles nativos --barras de desplazamiento, selectores de fecha--
   siguen al mismo tema. Replica la logica de marca-onda.css porque
   `color-scheme` no es una variable y no se puede heredar con var(). */
:root{ color-scheme: dark; }
@media (prefers-color-scheme: light){ :root:not([data-tema="oscuro"]){ color-scheme: light; } }
:root[data-tema="claro"]{ color-scheme: light; }

/* El reverso de la señal, en el tema claro. */
@media (prefers-color-scheme: light){ :root:not([data-tema="oscuro"]){ --senal-ink: #FFFFFF; } }
:root[data-tema="claro"]{ --senal-ink: #FFFFFF; }

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:16px/1.55 var(--body);-webkit-text-size-adjust:100%}
.wrap{max-width:780px;margin:0 auto;padding:20px 16px 56px}
h1,h2,h3{font-family:var(--display);line-height:1.2;text-wrap:balance;margin:0}
h1{font-size:1.75rem;font-weight:700;letter-spacing:-.01em}
h2{font-size:1.15rem;font-weight:600;margin-bottom:10px}
h3{font-size:1rem;font-weight:600}
p{margin:0 0 10px}
.muted{color:var(--muted)}
.small{font-size:.86rem}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
section{margin-top:28px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
.tile{display:flex;flex-direction:column;gap:6px;text-align:left;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;cursor:pointer;color:var(--ink);font:inherit}
.tile:hover{border-color:var(--accent)}
.tile b{font-weight:600;font-size:.95rem}
.chip{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.03em;padding:2px 8px;border-radius:99px;background:var(--chip);color:var(--muted)}
/* Las cuatro destrezas. Matices CATEGORICOS, no de estado ni de marca: el
   manual de ONDA define seis colores y ninguno cubre este caso --la lista de
   tareas alterna R R R L R L W W S S S W S, y el color es lo que deja ver de
   un vistazo cuanto hay de cada destreza y donde--. Se declaran aqui como
   extension local, que es lo que son.
   Derivados sobre la superficie: siguen al tema con UNA regla en vez de tres,
   y al 16 por ciento no le compiten al cian. Antes el modo oscuro los apagaba
   a gris y la lista perdia esa lectura; ahora el matiz sobrevive en los dos. */
.chip.R{background:color-mix(in srgb,#22528F 16%,var(--surface));color:color-mix(in srgb,#22528F 52%,var(--ink))}
.chip.L{background:color-mix(in srgb,#7A2E8E 16%,var(--surface));color:color-mix(in srgb,#7A2E8E 52%,var(--ink))}
.chip.W{background:color-mix(in srgb,#8A4E00 16%,var(--surface));color:color-mix(in srgb,#8A4E00 52%,var(--ink))}
.chip.S{background:color-mix(in srgb,#1C6B43 16%,var(--surface));color:color-mix(in srgb,#1C6B43 52%,var(--ink))}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 1rem var(--body);padding:11px 18px;border-radius:9px;border:1px solid var(--accent);background:var(--accent);color:var(--accent-ink);cursor:pointer;min-height:44px}
.btn.secondary{background:transparent;color:var(--accent)}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--ink)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.big{font-size:1.05rem;padding:13px 22px}
button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible,.tok:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.mode-card h2{margin:6px 0 6px}
.mode-card ul{margin:8px 0 14px;padding-left:18px;color:var(--muted);font-size:.92rem}
.eyebrow{font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
/* Score scale */
.scale{position:relative;height:46px;margin:14px 0 4px}
.scale .bar{position:absolute;left:0;right:0;top:14px;height:14px;border-radius:7px;overflow:hidden;display:flex}
.scale .seg{height:100%}
.scale .tick{position:absolute;top:32px;font:500 .72rem var(--mono);color:var(--muted);transform:translateX(-50%)}
.scale .goal{position:absolute;top:8px;height:26px;border:2px solid var(--ink);border-radius:6px}
.scale .goal span{position:absolute;top:-20px;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.72rem;font-weight:600}
.scale .you{position:absolute;top:2px;width:2px;height:38px;background:var(--bad)}
.scale .you span{position:absolute;top:40px;left:50%;transform:translateX(-50%);font:600 .72rem var(--mono);color:var(--bad);white-space:nowrap}
.legend{display:flex;flex-wrap:wrap;gap:12px;font-size:.8rem;color:var(--muted);margin-top:22px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
table.hist{width:100%;border-collapse:collapse;font-size:.9rem}
table.hist th,table.hist td{padding:8px 6px;border-bottom:1px solid var(--line);text-align:center}
table.hist th:first-child,table.hist td:first-child{text-align:left}
table.hist td{font-family:var(--mono);font-variant-numeric:tabular-nums}
.tablewrap{overflow-x:auto}
/* Exam */
.topbar{position:sticky;top:0;z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
.topbar .in{max-width:780px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px}
.topbar .task{flex:1;min-width:0}
.topbar .task b{display:block;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.topbar .task span{font-size:.78rem;color:var(--muted)}
.timer{font:600 1.25rem var(--mono);font-variant-numeric:tabular-nums;padding:4px 10px;border-radius:8px;background:var(--chip);min-width:84px;text-align:center}
/* Queda poco tiempo. Ambar de dato, no cian: el cian señala lo que esta
   ocurriendo, no lo que se acaba. */
.timer.low{background:color-mix(in srgb,var(--warn) 22%,var(--surface));color:var(--warn)}
.timer small{display:block;font:500 .62rem var(--body);color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.progress{height:3px;background:var(--line)}
.progress div{height:100%;background:var(--accent);transition:width .3s}
/* La tarea queda centrada en el alto disponible. Read and Select son tres
   lineas, y pegadas al borde superior dejaban dos tercios de pantalla vacia
   en una computadora.
   Centrado CON MARGENES AUTOMATICOS y no con justify-content:center: en una
   columna flexible, un margen automatico colapsa a cero cuando no sobra
   espacio, mientras que justify-content:center desborda por ARRIBA y corta el
   principio de los textos largos de lectura, que es justo lo que no se puede
   perder. Con el truco, las tareas cortas se centran y las largas se
   comportan como antes. */
.stage{max-width:780px;margin:0 auto;padding:18px 16px 110px;min-height:calc(100dvh - 150px);display:flex;flex-direction:column}
.stage::before{content:"";margin-top:auto}
.stage::after{content:"";margin-bottom:auto}
.qhead{font-weight:600;margin-bottom:12px}
.footer{position:fixed;left:0;right:0;bottom:0;background:var(--surface);border-top:1px solid var(--line);z-index:5}
.footer .in{max-width:780px;margin:0 auto;padding:10px 16px;display:flex;justify-content:space-between;gap:10px;align-items:center}
.bigword{font:600 2.3rem var(--display);text-align:center;padding:34px 10px;letter-spacing:.01em}
.yn{display:grid;grid-template-columns:1fr 1fr;gap:12px;max-width:420px;margin:0 auto}
.yn .btn{min-height:58px;font-size:1.1rem}
.passage{font-size:1.04rem;line-height:1.85}
.gapin{font:500 1rem var(--mono);border:none;border-bottom:2px solid var(--accent);background:var(--soft);color:var(--ink);padding:1px 2px;border-radius:3px 3px 0 0;text-transform:lowercase}
.gapin.ok{border-color:var(--good)}
.gapin.bad{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 17%,var(--surface))}
select.dd{font:inherit;font-size:.98rem;padding:2px 4px;border-radius:6px;border:1px solid var(--accent);background:var(--soft);color:var(--ink);max-width:100%}
textarea{width:100%;min-height:170px;font:inherit;font-size:1rem;line-height:1.55;padding:12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--ink);resize:vertical}
input.line{width:100%;font:inherit;padding:10px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.counter{font-size:.8rem;color:var(--muted);text-align:right;margin-top:4px}
.opts{display:grid;gap:10px}
.opt{display:flex;gap:10px;align-items:flex-start;text-align:left;width:100%;font:inherit;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface);color:var(--ink);cursor:pointer}
.opt:hover{border-color:var(--accent)}
.opt.sel{border-color:var(--accent);background:var(--soft)}
.opt.right{border-color:var(--good);background:color-mix(in srgb,var(--good) 15%,var(--surface))}
.opt.wrong{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 15%,var(--surface))}
.opt .k{font:600 .85rem var(--mono);color:var(--muted);min-width:18px}
.play{display:flex;align-items:center;gap:12px;padding:14px;border:1px dashed var(--accent);border-radius:12px;background:var(--soft);margin-bottom:14px}
.play .btn{min-width:150px}
.nb{white-space:nowrap}
.tok{cursor:pointer;border-radius:3px;padding:1px 0}
.tok.on{background:var(--mark)}
.tok.ans{box-shadow:inset 0 -3px 0 var(--good)}
.gap-sent{display:inline-block;padding:0 8px;border:2px dashed var(--accent);border-radius:6px;color:var(--accent);font-weight:600}
/* Las fotos son SVG dibujados para fondo claro: el papel de ONDA se queda
   claro en los dos temas, o el dibujo desaparece. */
.photo{border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--onda-papel);max-width:520px;margin:0 auto 12px}
.photo svg{display:block;width:100%;height:auto}
.phase{display:inline-block;font-size:.8rem;font-weight:600;padding:3px 10px;border-radius:99px;background:var(--chip);margin-bottom:10px}
.phase.go{background:var(--accent);color:var(--accent-ink)}
.speakbox{border:1px solid var(--line);border-radius:12px;padding:16px;background:var(--surface)}
.bul{margin:8px 0 0;padding-left:20px}
.convo{display:grid;gap:8px;margin-bottom:14px}
.bubble{padding:9px 12px;border-radius:12px;max-width:86%;font-size:.95rem}
.bubble.o{background:var(--chip);justify-self:start}
.bubble.y{background:var(--soft);justify-self:end}
.bubble .who{display:block;font-size:.72rem;font-weight:600;color:var(--muted)}
.fb{margin-top:14px;padding:12px 14px;border-radius:10px;border:1px solid var(--line);background:var(--surface)}
.fb.ok{border-color:var(--good)}.fb.no{border-color:var(--bad)}
.fb b.ok{color:var(--good)}.fb b.no{color:var(--bad)}
.toast{position:fixed;left:50%;bottom:86px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:10px 14px;border-radius:10px;font-size:.9rem;z-index:20;max-width:90%}
.confirm{background:var(--surface);border:1px solid var(--bad);border-radius:10px;padding:12px;margin-bottom:12px}
/* Results */
.hero-score{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.hero-score .num{font:700 3.4rem/1 var(--mono);font-variant-numeric:tabular-nums}
.skills{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:14px}
.skill{border:1px solid var(--line);border-radius:10px;padding:12px;background:var(--surface)}
.skill .v{font:700 1.7rem var(--mono);font-variant-numeric:tabular-nums}
.skill .pending{font-size:.85rem;color:var(--warn);font-weight:600}
.crit{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center;margin:8px 0}
.crit select{font:inherit;padding:6px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
.evalitem{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.minibars{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.minibars span{font-size:.75rem;padding:2px 8px;border-radius:6px;background:var(--chip)}
.fix{font-size:.9rem;margin:4px 0}
.fix s{color:var(--bad)}.fix ins{color:var(--good);text-decoration:none;font-weight:600}
details{border-top:1px solid var(--line);padding:10px 0}
summary{cursor:pointer;font-weight:600}
.revline{font-size:.92rem;padding:6px 0;border-bottom:1px dashed var(--line)}
@media (max-width:520px){h1{font-size:1.45rem}.bigword{font-size:1.9rem}.hero-score .num{font-size:2.8rem}.timer{min-width:70px;font-size:1.1rem}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}