/* ═══ Media queries ══════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .shell { flex-direction: column; }
  /* La sidebar (Bienvenida/Proyectos/Configuración) se ocultaba entera en
     celular (display:none) sin ningún reemplazo — sin forma de salir de
     "Bienvenida" una vez ahí. Pasa a ser una barra fija abajo en vez de
     lateral, con los mismos 3 botones (más "Volver al escritorio" cuando
     está visible, ver index.html). body.task-mode .sidebar (pantallas.css)
     la sigue ocultando del todo durante un test, igual que en escritorio. */
  .sidebar {
    position: fixed; top: auto; bottom: 0; left: 0; right: 0;
    width: 100%; height: auto; flex-direction: row; align-items: stretch;
    z-index: 30;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -2px 10px rgba(13, 23, 34, .18);
  }
  .sidebar__brand { display: none; }
  .sidebar__nav { flex: 1; flex-direction: row; padding: 6px; gap: 4px; overflow: visible; }
  .sidebar__foot {
    display: flex; align-items: center; flex: none;
    padding: 6px; border-top: none;
  }
  .sidebar__ver { display: none; }
  /* El selector de idioma de la barra inferior es redundante en celular: la
     misma elección ya vive en Configuración, y la barra fija abajo tiene
     poco espacio para sumarle otro control. Se oculta acá sin tocar la
     lógica de #sidebar-back-link/standalone (index.html), que sigue
     decidiendo si el switcher existe en el DOM en primer lugar. */
  #sidebar-language-switcher { display: none; }
  .nav-item {
    flex-direction: column; height: auto; min-height: 52px;
    padding: 6px 4px; gap: 2px; border-radius: 10px;
  }
  .nav-label { font-size: 0.66rem; white-space: normal; text-align: center; line-height: 1.15; }
  #sidebar-back-link { margin: 0; }
  /* Deja espacio para que la barra fija no tape el contenido — mismo
     alto aproximado que la barra (padding + min-height del nav-item).
     En body.task-mode la barra ya vuelve a display:none (pantallas.css,
     igual que en escritorio), así que ese padding extra se saca ahí para
     no dejar un hueco vacío abajo durante un test. */
  .main { padding-bottom: 68px; }
  body.task-mode .main { padding-bottom: 0; }

  .split, .split--rev, .split--even { grid-template-columns: 1fr; }
  .test-domain-grid, .individual-test-grid { grid-template-columns: 1fr; }
  .kpi-row { gap: 10px; }
  .content { padding: 16px 16px 32px; }
}
@media (max-width: 520px) {
  .options-grid { grid-template-columns: 1fr; }
  .options-grid--wide { grid-template-columns: 1fr 1fr; }
  .stats-row { gap: 16px; }
  .test-domain-card { min-height: 0; padding: 18px; }
  .test-domain-card__mark { flex-basis: 40px; height: 40px; }
  .individual-test-card { min-height: 0; }
  .individual-test-card__header { flex-direction: column; gap: 7px; }
  .wizbar { align-items: stretch; flex-direction: column; }
  .wizbar .btn { width: 100%; }
}

/* ── Objetivos táctiles ─────────────────────────────────────────────────────
   Por tipo de dispositivo, no por ancho — cualquier pantalla sin hover fino,
   sin importar si también tiene mouse. La app no tenía ningún tratamiento
   táctil hasta ahora (cero @media pointer:coarse en todo el proyecto). .btn
   y .option-btn ya son generosos por su padding; el único objetivo compartido
   bajo 44px encontrado en la auditoría es .modal__close-btn (28×28px, en
   style/pantallas.css) — se agranda solo el área de toque (el ícono visual
   queda igual) para no cambiar la densidad visual del resto del modal. */
@media (pointer: coarse), (hover: none) {
  .btn { min-height: 44px; }
  .btn-mini, .btn-info, .glossary-btn { min-height: 44px; }
  .option-btn { min-height: 44px; }
  .field input, .field select { min-height: 44px; }
  .modal__close-btn {
    width: 44px; height: 44px;
    margin: -8px; /* compensa el área extra para no correr el resto del header */
  }
  .test-choice__key, .demo-keys, .instruction-demo kbd, .stroop-key__label { display: none; }
}

/* ── Confirm dialog ─────────────────────────────────────────────────────────── */
.confirm-dialog {
  max-width: 340px;
  width: calc(100% - 40px);
  border: none;
  border-radius: 22px;
  padding: 0;
  background: #fff;
  box-shadow: 0 24px 64px rgba(0,0,0,.22), 0 4px 12px rgba(0,0,0,.10);
  animation: cdlg-in .24s cubic-bezier(.34,1.56,.64,1) both;
}
.confirm-dialog--closing {
  animation: cdlg-out .18s ease-in both;
}
.confirm-dialog--wide { max-width: 460px; }
.confirm-dialog::backdrop {
  background: rgba(10,16,24,.52);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: cdlg-bd-in .2s ease both;
}
@keyframes cdlg-in {
  from { opacity: 0; transform: scale(.86) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes cdlg-out {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(.92) translateY(6px); }
}
@keyframes cdlg-bd-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.confirm-dialog__icon-wrap {
  display: flex;
  justify-content: center;
  padding: 30px 30px 0;
}
.confirm-dialog__icon-ring {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: #fff0ef;
  border: 2px solid #fdd;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.confirm-dialog__body {
  padding: 18px 28px 24px;
  text-align: center;
}
.confirm-dialog__title {
  margin: 0 0 8px;
  font-size: 1.06rem;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -.01em;
}
.confirm-dialog__msg {
  margin: 0;
  font-size: .88rem;
  color: var(--ink-soft);
  line-height: 1.6;
}

.confirm-dialog__keyword-wrap {
  padding: 0 28px 18px;
  text-align: center;
}
.confirm-dialog__keyword-label {
  display: block;
  font-size: .78rem;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.confirm-dialog__keyword-input + .confirm-dialog__keyword-label { margin-top: 14px; }
.confirm-dialog__keyword-input {
  width: 100%;
  box-sizing: border-box;
  font: inherit;
  font-size: .94rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-align: center;
  padding: 9px 12px;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
.confirm-dialog__keyword-input:focus {
  outline: none;
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192,57,43,.18);
}
.confirm-dialog__field-error {
  margin: 8px 0 0;
  color: var(--danger);
  font-size: .75rem;
  line-height: 1.4;
}
.confirm-dialog__body--wide { text-align: left; padding-bottom: 16px; }
.confirm-dialog__choices {
  display: grid;
  gap: 9px;
  margin: 0;
  padding: 0 28px 20px;
  border: 0;
}
.confirm-dialog__choice {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  cursor: pointer;
}
.confirm-dialog__choice:has(input:checked) {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 18%, transparent);
}
.confirm-dialog__choice input { margin-top: 3px; }
.confirm-dialog__choice span { display: grid; gap: 3px; }
.confirm-dialog__choice strong { color: var(--ink); font-size: .86rem; }
.confirm-dialog__choice small { color: var(--ink-soft); font-size: .76rem; line-height: 1.4; }

.confirm-dialog__foot {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  padding: 0 28px 28px;
}
.confirm-dialog__foot--single {
  grid-template-columns: 1fr;
}

.confirm-dialog__btn {
  padding: 11px 0;
  border-radius: 11px;
  font: inherit;
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s, border-color .14s, transform .1s, opacity .14s;
}
.confirm-dialog__btn--cancel {
  background: transparent;
  border: 1.5px solid var(--line);
  color: var(--ink-soft);
}
.confirm-dialog__btn--cancel:hover {
  background: var(--bg);
  border-color: var(--line-strong);
  color: var(--ink);
}
.confirm-dialog__btn--confirm {
  background: #c0392b;
  border: 1.5px solid #c0392b;
  color: #fff;
}
.confirm-dialog__btn--confirm:hover:not(:disabled) {
  background: #a93226;
  border-color: #a93226;
}
.confirm-dialog__btn--confirm:active:not(:disabled) {
  transform: scale(.97);
}
.confirm-dialog__btn--confirm:disabled {
  opacity: .38;
  cursor: not-allowed;
}

/* ─── Span de Dígitos (SD-D) ───────────────────────────────────────────────────
   Mismo criterio de corrección visual que TOL/WCST/SDMT/BTA/BS-D/Claves/PASAT:
   .screen--center fija min-height:80vh, que con contenido corto queda "pegado"
   arriba con vacío debajo. Esta sección también usaba tokens que nunca existieron
   en la hoja de estilos (--sp-1..4, --color-ok/err) — mismo bug ya corregido en
   BS-D/Claves/PASAT. Toda la interacción vive ahora en una tarjeta (.span-panel),
   mismo lenguaje visual que .pasat-panel/.claves-key, en vez de flotar sobre la
   pantalla. Sin contador "i/N" durante la presentación del dígito (ver comentario
   en helpers/tests/span-digitos.js). */
.screen--span.screen--center,
.screen--span-resp.screen--center { min-height: calc(100vh - 42px); }
.screen--span, .screen--span-resp { width: 100%; max-width: 460px; }

.span-panel {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  width: 100%;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(15, 30, 45, .06);
  padding: 32px 28px;
}
.span-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 100px;
  background: var(--paper); border: 1px solid var(--line);
  color: var(--ink-soft); font-size: .82rem; font-weight: 500;
}
.span-section { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.span-section-label {
  font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink-soft);
}
.span-digit {
  font-size: clamp(4rem, 15vw, 6.5rem);
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--ink);
  line-height: 1;
  min-width: 1ch;
  min-height: 1.1em;
  text-align: center;
  transition: opacity .1s;
}
.span-digit--blank { opacity: 0; }

.span-hint { margin: 0; font-size: .95rem; text-align: center; color: var(--ink); max-width: 34ch; }

/* Casillas de respuesta separadas: una por dígito esperado, en vez de un campo de
   texto libre — mismo lenguaje visual que .pasat-response-value/.claves-cell. */
.span-boxes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.span-box {
  width: 46px; height: 56px;
  font-size: 1.5rem; font-weight: 700; text-align: center;
  color: var(--ink); font-variant-numeric: tabular-nums;
  /* Borde más oscuro que --line-strong (~1.8:1): estas son las casillas donde el
     participante ve/escribe su respuesta real, no un separador decorativo, y
     necesitan el 3:1 de WCAG 1.4.11 para límites de componentes de interfaz. */
  background: var(--paper); border: 2px solid #808c96; border-radius: var(--radius-sm);
}
.span-box:focus {
  outline: none; border-color: var(--accent); box-shadow: var(--focus);
}

/* El padding de 32px/28px del panel resta ancho útil en ~360px — para spans
   largos (7-9 dígitos) las casillas ya envuelven (flex-wrap), pero menos
   padding deja más espacio antes de que eso pase. */
@media (max-width: 400px) {
  .span-panel { padding: 20px 14px; gap: 16px; }
}

/* ─── Búsqueda de Símbolos (BS-D) ─────────────────────────────────────────────
   Esta sección usaba tokens que nunca existieron en la hoja de estilos
   (--sp-1..4, --bg-raised, --ink-muted): al ser var() sin fallback e inválidos,
   cada declaración se descartaba en cascada (gap quedaba en "normal", fondos en
   transparente, color heredado del texto normal en vez de un tono más suave) —
   no era un problema de "falta pulir", sino de reglas rotas que nunca llegaron a
   aplicarse. Se reescribe con los tokens reales del sistema de diseño y el mismo
   lenguaje visual (chips, cards) del resto de los tests.
   Además, el WAIS-IV (y toda la batería Wechsler) deja el tiempo como información
   solo del examinador — por eso ya no hay cronómetro visible (helpers/tests/
   busqueda-simbolos.js), igual que en el SDMT. */
.screen--bs.screen--center { min-height: calc(100vh - 42px); }
.screen--bs { width: 100%; max-width: 720px; }
.bs-panel { display: flex; flex-direction: column; align-items: center; gap: 26px; width: 100%; }

.bs-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-soft); font-size: .82rem; font-weight: 500;
  box-shadow: 0 1px 2px rgba(15, 30, 45, .05);
}
.bs-chip strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.bs-compare-row { display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap; }
.bs-target-area, .bs-search-area {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.bs-label {
  margin: 0; font-weight: 700; font-size: .76rem; letter-spacing: .05em; text-transform: uppercase;
  color: var(--ink-soft);
}
.bs-target, .bs-search-row {
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(15, 30, 45, .06);
}
.bs-target { padding: 16px 20px; gap: 10px; }
.bs-search-row { gap: 10px; padding: 14px 18px; }
.bs-search-cell { display: flex; align-items: center; justify-content: center; }
.bs-arrow { font-size: 1.6rem; font-weight: 300; color: var(--muted); align-self: center; }

.bs-response-row { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
.bs-btn { min-width: 210px; }

.bs-feedback { text-align: center; font-size: 1.1rem; font-weight: 700; min-height: 1.4em; }
.bs-feedback--ok  { color: var(--ok); }
.bs-feedback--err { color: var(--danger); }
.bs-sym { display: block; color: var(--ink); }

.bs-end-message { margin: 0; color: var(--ink-soft); font-size: 1.05rem; font-weight: 500; }

/* ─── Claves (CL-D) ───────────────────────────────────────────────────────────
   La hoja real del WAIS-IV Claves no presenta un ítem a la vez: es una grilla
   densa (~135 casillas) toda visible/desplazable a la vez, con la clave arriba.
   .screen--claves-sheet replica ese formato (mismo principio que .screen--pd-sheet
   en percepcion-diferencias.js/CSS — "matriz completa" en vez de presentación
   serial), en vez del ítem único anterior. .screen--claves (a secas) se conserva
   solo para el mensaje breve de "Tiempo finalizado".
   Esta sección también usaba tokens que nunca existieron en la hoja de estilos
   (--sp-1..4, --bg-raised, --ink-muted) — mismo bug ya corregido en BS-D. El
   cronómetro no es visible (helpers/tests/claves.js) — mismo criterio que SDMT/BS-D. */
.screen--claves.screen--center { min-height: calc(100vh - 42px); }
.screen--claves { width: 100%; max-width: 720px; }

/* .screen--claves-sheet centra su contenido verticalmente cuando es corto (práctica,
   10 celdas) sin romper el caso denso (prueba real, 135 celdas, que debe scrollear
   desde arriba). margin:auto en .claves-sheet__inner es la técnica "overflow-safe":
   si el contenido es más chico que min-height, los márgenes automáticos se reparten
   y centran; si es más grande, se resuelven a 0 en vez de generar overflow negativo
   (a diferencia de place-items:center / justify-content:center, que recortarían el
   borde superior del contenido cuando excede el contenedor). */
.screen--claves-sheet {
  display: flex; flex-direction: column;
  min-height: calc(100vh - 42px);
  width: 100%; max-width: 1000px; margin: 0 auto;
}
.claves-sheet__inner { width: 100%; margin: auto 0; }
.claves-sheet__toolbar {
  position: sticky; top: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 12px 4px; margin-bottom: 10px;
  background: var(--paper); border-bottom: 1px solid var(--line);
}
.claves-sheet__footer {
  position: sticky; bottom: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 10px 4px 14px; margin-top: 10px;
  background: var(--paper); border-top: 1px solid var(--line);
}

.claves-key {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(15, 30, 45, .06);
  padding: 16px 10px; width: 100%; max-width: 640px;
}
.claves-key--instr { margin: 18px 0; }
.claves-key-cell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 2px 12px; }
.claves-key-cell + .claves-key-cell { border-left: 1px solid var(--line); }
.claves-key-digit {
  font-size: .9rem; font-weight: 700; color: var(--accent-dark);
  background: var(--accent-soft); border-radius: 100px; min-width: 15px;
  text-align: center; padding: 1px 8px; font-variant-numeric: tabular-nums;
}
.claves-key-sym { color: var(--ink); }

.claves-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 7px 14px; border-radius: 100px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--ink-soft); font-size: .82rem; font-weight: 500;
  box-shadow: 0 1px 2px rgba(15, 30, 45, .05);
}
.claves-chip strong { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }

.claves-matrix {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 6px; padding: 4px;
}
.claves-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 52px; flex: 0 0 auto;
  padding: 6px 2px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.claves-cell__digit { font-size: .95rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.claves-cell__slot { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; }
.claves-cell--active { border-color: var(--accent); border-width: 2px; box-shadow: 0 0 0 3px var(--accent-soft); }
.claves-cell--done { background: var(--paper); }
.claves-cell--ok  { border-color: var(--ok); }
.claves-cell--err { border-color: var(--danger); background: #fdf4f3; }

.claves-choices { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; max-width: 480px; }
.claves-choice {
  display: flex; align-items: center; justify-content: center;
  width: 60px; height: 60px; padding: 0;
  background: var(--surface); border: 2px solid var(--line); border-radius: var(--radius-sm);
  cursor: pointer; transition: border-color 120ms, transform 80ms, box-shadow 120ms;
}
.claves-choice:hover, .claves-choice:focus-visible {
  border-color: var(--accent); outline: none; transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(15, 30, 45, .1);
}
.claves-choice:active { transform: translateY(0); }

.claves-feedback { font-size: 1.1rem; font-weight: 700; min-height: 1.4em; text-align: center; }
.claves-feedback--ok  { color: var(--ok); }
.claves-feedback--err { color: var(--danger); }
.claves-sym { display: block; color: var(--ink); }

.claves-end-message { margin: 0; color: var(--ink-soft); font-size: 1.05rem; font-weight: 500; }

/* ─── Modo tarea en celular: el botón de salir (.task-exit-btn / .arcade-exit-btn,
   siempre position:fixed arriba a la derecha) no reserva espacio en el flujo, así
   que en pantallas angostas el texto de estado centrado de TMT y Laberintos (el
   único par de tests con una barra de progreso propia arriba del tablero) puede
   quedar tapado detrás. Se reserva el mismo ancho aproximado del botón a ambos
   lados para que el texto siga centrado dentro del área libre en vez de
   recortarse contra él. */
@media (max-width: 480px) {
  body.task-mode .trial__topbar,
  body.task-mode .digital-maze-progress,
  body.task-mode .digital-maze-instruction { padding: 0 78px; }
}

/* Contrato móvil común de tareas: cada instrumento conserva su geometría propia,
   pero el panel y el estímulo se centran dentro del ancho realmente disponible.
   Los textos de controles pueden envolver en vez de escapar de su contenedor. */
@media (max-width: 600px) {
  body.task-mode #app,
  body.task-mode .test-runtime {
    width: 100%; min-width: 0; align-items: center;
  }
  body.task-mode .test-runtime > .screen {
    width: 100%; min-width: 0; margin-inline: auto;
  }
  body.task-mode :is(
    .trial__stimulus,
    .stroop-stimulus,
    .sdmt-stim-block,
    .pasat-section,
    .corsi-panel,
    .rotacion-panel,
    .span-section
  ) {
    align-self: center; max-width: 100%; min-width: 0; margin-inline: auto;
  }
  body.task-mode .screen :is(h1, h2, h3, p, label),
  body.task-mode .screen :is(.btn, .option-btn, .test-choice, .stroop-key) {
    max-width: 100%; min-width: 0; overflow-wrap: anywhere;
  }
  body.task-mode .screen :is(.btn, .option-btn, .test-choice) { white-space: normal; }
}