/*
 * Diagnóstico · vistas de la aplicación (registro, preguntas y resultados).
 * Usa los tokens de css/base.css (con valores de respaldo).
 * Tipografía: Nohemi para toda la interfaz; IBM Plex Mono solo en detalles
 * técnicos (cronómetro, teclas). Pixelify queda solo en la portada.
 * Preguntas: laberinto (imagen) a la izquierda y cuatro programas de bloques
 * (imágenes) a la derecha.
 */

:root{
  --app-bg: var(--bg, #EEEFEC);
  --app-bg-2: var(--bg-2, #E6E7E3);
  --app-paper: var(--paper, #F7F8F5);
  --app-white: var(--white, #FFFFFF);
  --app-ink: var(--ink, #0A0A0A);
  --app-ink-2: var(--ink-2, #2B2B29);
  --app-muted: var(--muted, #6A6B67);
  --app-line: var(--line, #D5D6D1);
  --app-line-2: var(--line-2, #BFC0BB);
  --app-ok: var(--ok, #1E6B35);
  --app-bad: var(--bad, #A3261E);
  --app-sans: var(--font-sans, 'Nohemi', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif);
  --app-mono: var(--font-mono, 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  --app-gutter: var(--gutter, 30px);
  --app-radius: var(--radius, 2px);
  --app-max: 1240px;
  --qbar-h: 60px;

}

/* ---------- Contenedor de la app ---------- */
#app{
  min-height:100vh;
  background:var(--app-bg);
  color:var(--app-ink);
  font-family:var(--app-sans);
  font-size:16px;
  font-weight:400;
  line-height:1.5;
}
#app[hidden]{ display:none !important; }
#app [hidden], .dlg [hidden]{ display:none !important; }

.app-sr{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

#app h1:focus, #app h1:focus-visible{ outline:none; }
#app .ico{ width:16px; height:16px; flex:none; display:inline-block; }

/* Botones de la app (base.css los define en mono) */
#app .btn,
.dlg .btn{
  min-height:44px;
  padding:0 22px;
  font-family:var(--app-sans);
  font-weight:600;
  font-size:15px;
  letter-spacing:0;
}

.app-logo{ width:24px; height:24px; flex:none; color:var(--app-ink); }

.app-eyebrow{
  margin:0 0 18px;
  font-size:13px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--app-muted);
}

/* Filete fino (sustituye al bloque de líneas) */
.app-rule{
  height:0;
  margin:32px 0 28px;
  border:0;
  border-top:1px solid var(--app-line-2);
  max-width:560px;
}

.app-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 4px;
  border:0;
  background:none;
  color:var(--app-ink);
  font:inherit;
  font-size:15px;
  font-weight:500;
  cursor:pointer;
}
.app-link:hover{ text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; }

.app-notice{
  margin:0 0 20px;
  padding:14px 16px;
  border:1px solid var(--app-line-2);
  border-left:3px solid var(--app-ink);
  background:var(--app-paper);
  font-size:15px;
  line-height:1.5;
}
.app-notice--bad{ border-left-color:var(--app-bad); color:var(--app-bad); }

/* ---------- Barra superior (registro y resultados) ---------- */
.app-top{ border-bottom:1px solid var(--app-line); }
.app-top__in{
  max-width:var(--app-max);
  margin:0 auto;
  height:72px;
  padding:0 var(--app-gutter);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.app-brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:4px 0;
  border:0;
  background:none;
  color:var(--app-ink);
  font:inherit;
  cursor:pointer;
}
.app-brand__txt{
  font-weight:700;
  font-size:16px;
  letter-spacing:-.01em;
}
.app-top__who{
  margin:0;
  font-size:15px;
  color:var(--app-muted);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:50%;
}

/* ==========================================================================
   1. Registro
   ========================================================================== */
.reg__grid{
  max-width:var(--app-max);
  margin:0 auto;
  padding:64px var(--app-gutter) 96px;
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, 440px);
  gap:88px;
  align-items:start;
}
/* El título se mide con su columna (no con la ventana): así «DIAGNÓSTICO» no se parte en dos
   entre 1000 y 1050 px, donde la columna queda junto al formulario. */
.reg__intro{ container-type:inline-size; min-width:0; }
.reg__title{
  margin:0;
  font-weight:700;
  font-size:clamp(40px, min(6.6vw, 14.5cqi), 88px);
  line-height:1.05;
  letter-spacing:-.02em;
  overflow-wrap:anywhere;
}
.reg__sub{
  margin:10px 0 0;
  font-weight:500;
  font-size:clamp(18px, 2.2vw, 26px);
  line-height:1.15;
  letter-spacing:.04em;
  color:var(--app-ink-2);
}
.reg__lead{
  max-width:52ch;
  margin:0 0 36px;
  font-size:17px;
  line-height:1.55;
  color:var(--app-ink-2);
}
.reg__facts{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:24px;
  margin:0 0 40px;
}
.reg__fact{ border-top:1px solid var(--app-line-2); padding-top:12px; min-width:0; }
.reg__fact dt{
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--app-muted);
}
.reg__fact dd{
  margin:6px 0 0;
  font-weight:700;
  font-size:34px;
  line-height:1.05;
  letter-spacing:-.02em;
}
/* «Lo define el docente»: texto en vez de número, más pequeño para que quepa en la columna. */
.reg__fact.is-texto dd{ font-size:20px; line-height:1.15; letter-spacing:0; }
.reg__steps{
  list-style:none;
  margin:0 0 32px;
  padding:0;
  counter-reset:paso;
  display:grid;
  gap:14px;
}
.reg__steps li{
  counter-increment:paso;
  display:grid;
  grid-template-columns:36px minmax(0, 1fr);
  gap:6px;
  font-size:16px;
  line-height:1.5;
  color:var(--app-ink-2);
}
.reg__steps li::before{
  content:counter(paso, decimal-leading-zero);
  font-weight:600;
  font-size:14px;
  font-variant-numeric:tabular-nums;
  color:var(--app-muted);
  padding-top:2px;
}
.reg__guardado{ margin:0; font-size:14px; line-height:1.5; color:var(--app-muted); }
.reg__guardado.is-aviso{ color:var(--app-bad); font-weight:600; }

.reg__form{
  padding:34px 32px 30px;
  background:var(--app-paper);
  border:1px solid var(--app-line);
  border-radius:var(--app-radius);
}
.reg__formtitle{
  margin:0 0 10px;
  font-weight:700;
  font-size:28px;
  line-height:1.05;
  letter-spacing:-.02em;
}
.reg__formtitle + *:not(.reg__team){ margin-top:26px; }
.reg__team{ margin:0 0 24px; font-size:15px; line-height:1.5; color:var(--app-muted); }
.field{ margin:0 0 20px; }
.field__label{
  display:block;
  margin-bottom:8px;
  font-size:15px;
  font-weight:500;
}
.field__control{
  display:block;
  width:100%;
  height:48px;
  padding:0 14px;
  border:1px solid var(--app-line-2);
  border-radius:var(--app-radius);
  background:var(--app-white);
  color:var(--app-ink);
  font-family:var(--app-sans);
  font-size:16px;
  transition:border-color .15s ease, box-shadow .15s ease;
}
select.field__control{
  appearance:none;
  -webkit-appearance:none;
  padding-right:40px;
  background-image:linear-gradient(45deg, transparent 50%, var(--app-ink) 50%), linear-gradient(135deg, var(--app-ink) 50%, transparent 50%);
  background-position:calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size:5px 5px;
  background-repeat:no-repeat;
}
/* Mientras está la opción "Selecciona…", el texto va en gris como un placeholder. */
select.field__control:has(option[value=""]:checked){ color:var(--app-muted); }

/* Lista desplegable con diseño propio (Chrome/Edge 135+). Los demás navegadores
   muestran la lista nativa, pero el campo cerrado conserva este estilo. */
@supports (appearance: base-select){
  select.field__control,
  select.field__control::picker(select){
    appearance:base-select;
  }
  select.field__control{
    display:flex;
    align-items:center;
    padding-right:16px;
    background-image:none;
    cursor:pointer;
  }
  select.field__control::picker-icon{
    content:"";
    width:8px;
    height:8px;
    margin-left:auto;
    border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;
    color:var(--app-ink);
    transform:translateY(-2px) rotate(45deg);
    transition:transform .2s ease;
  }
  select.field__control:open::picker-icon{ transform:translateY(2px) rotate(-135deg); }
  select.field__control:open{ border-color:var(--app-ink); box-shadow:0 0 0 1px var(--app-ink); }

  select.field__control::picker(select){
    margin-top:6px;
    padding:6px;
    border:1px solid var(--app-ink);
    border-radius:var(--app-radius);
    background:var(--app-white);
    box-shadow:0 18px 40px rgba(10, 10, 10, .14);
    color:var(--app-ink);
    font-family:var(--app-sans);
    opacity:0;
    translate:0 -4px;
    transition:opacity .15s ease, translate .15s ease, overlay .15s allow-discrete, display .15s allow-discrete;
  }
  select.field__control:open::picker(select){ opacity:1; translate:0 0; }
  @starting-style{
    select.field__control:open::picker(select){ opacity:0; translate:0 -4px; }
  }

  /* La opción "Selecciona…" no aparece en la lista abierta. */
  select.field__control option[value=""]{ display:none; }
  select.field__control option{
    display:flex;
    align-items:center;
    gap:10px;
    min-height:42px;
    padding:0 12px;
    border-radius:var(--app-radius);
    font-size:16px;
    font-weight:500;
    color:var(--app-ink);
    cursor:pointer;
  }
  select.field__control option::checkmark{ display:none; }
  select.field__control option:hover,
  select.field__control option:focus-visible{
    outline:none;
    background:var(--app-bg-2);
  }
  select.field__control option:checked{
    background:var(--app-ink);
    color:var(--app-white);
    font-weight:600;
  }
}
@media (prefers-reduced-motion: reduce){
  select.field__control::picker(select),
  select.field__control::picker-icon{ transition:none; }
}

.field__control:hover{ border-color:var(--app-ink-2); }
.field__control:focus{ outline:none; border-color:var(--app-ink); box-shadow:0 0 0 1px var(--app-ink); }
/* Grado fijado por el enlace del grado (/702 → «702», sin desplegable): se lee, no se edita. */
.field__control--fijo,
.field__control--fijo:hover{ border-color:var(--app-line-2); background:var(--app-paper); font-weight:600; cursor:default; }
.field__control--fijo:focus{ border-color:var(--app-ink-2); box-shadow:none; }
.field__control[aria-invalid="true"]{ border-color:var(--app-bad); box-shadow:0 0 0 1px var(--app-bad); }
.field__help{ margin:7px 0 0; font-size:13px; color:var(--app-muted); }
.field__error{
  margin:8px 0 0;
  font-size:14px;
  line-height:1.4;
  color:var(--app-bad);
}
.reg__actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 18px;
  margin-top:28px;
}
#app .reg__submit{ min-height:48px; }
.reg__privacidad{ margin:20px 0 0; font-size:13px; color:var(--app-muted); line-height:1.5; }

/* «Hoja del docente conectada ✓» / «Este computador tiene N resultados sin enviar · Enviar ahora»:
   línea discreta en la portada (#hoja-estado) y en el registro (.reg__hoja). */
.reg__hoja{ margin-top:14px; }
.reg__hoja:empty{ display:none; }
/* En la portada, bajo «Comenzar»: separada del botón y sin pasar de un ancho de lectura. */
.hero__hoja{ margin-top:12px; max-width:34rem; }
.hoja-estado{
  margin:0;
  font-family:var(--app-sans);
  font-size:13.5px;
  font-weight:500;
  line-height:1.45;
  color:var(--app-muted);
}
.hoja-estado::before{
  content:"";
  display:inline-block;
  width:8px; height:8px;
  margin-right:8px;
  border-radius:50%;
  border:1px solid currentColor;
  vertical-align:1px;
}
.hoja-estado.is-ok{ color:var(--app-ok); }
.hoja-estado.is-ok::before{ background:currentColor; }
.hoja-estado.is-warn{ color:#8A4B00; font-weight:600; }
.hoja-estado.is-warn::before{ background:currentColor; animation:app-parpadeo 1.2s steps(2) infinite; }
.hoja-estado:focus{ outline:none; }
.hoja-estado__sep{ color:var(--app-muted); }
.hoja-estado__btn{
  display:inline;
  padding:6px 2px;
  border:0;
  background:none;
  color:var(--app-ink);
  font:inherit;
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  cursor:pointer;
}
.hoja-estado__btn:hover{ text-decoration-thickness:2px; }
.hoja-estado__btn:focus-visible{ outline:2px solid var(--app-ink); outline-offset:2px; }
.hoja-estado__btn:disabled{ color:var(--app-muted); text-decoration:none; cursor:progress; }
@media (prefers-reduced-motion: reduce){ .hoja-estado.is-warn::before{ animation:none; } }

/* ==========================================================================
   2. Preguntas
   Móvil y tableta: todo apilado (enunciado, laberinto, opciones) con scroll.
   Escritorio (≥ 1000 × 560): la pregunta cabe en una pantalla; ver "Responsivo".
   ========================================================================== */
.quiz{ min-height:100vh; display:flex; flex-direction:column; }

.qhead{
  position:sticky;
  top:0;
  z-index:30;
  background:var(--app-bg);
}
.qbar{
  height:var(--qbar-h);
  padding:0 var(--app-gutter);
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr);
  align-items:center;
  gap:20px;
}
.qbar__brand{ display:flex; align-items:center; gap:12px; min-width:0; }
.qbar__who{
  margin:0;
  display:flex;
  flex-direction:column;
  min-width:0;
  line-height:1.25;
}
.qbar__who-names{
  font-size:15px;
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.qbar__who-group{ font-size:13px; color:var(--app-muted); white-space:nowrap; }

/* Equipo en móvil (encima del enunciado) */
.qwho{
  display:none;
  margin:0 0 12px;
  font-size:14px;
  line-height:1.4;
}
.qwho-names{ font-weight:600; overflow-wrap:anywhere; }
.qwho-group{ color:var(--app-muted); white-space:nowrap; }
.qwho-group::before{ content:"·"; margin:0 8px; color:var(--app-line-2); }
.qbar__info{
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:12px;
  min-width:0;
}
.qbar__count{
  margin:0;
  font-size:16px;
  font-weight:500;
  white-space:nowrap;
}
.qbar__count strong{ font-weight:700; }
.qbar__meta{
  margin:0;
  font-size:14px;
  color:var(--app-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  min-width:0;
}
.qbar__meta::before{ content:"·"; margin-right:12px; color:var(--app-line-2); }
.qbar__right{ display:flex; align-items:center; justify-content:flex-end; gap:18px; }
.qbar__timer{
  margin:0;
  display:flex;
  align-items:baseline;
  gap:8px;
}
.qbar__timelabel{ font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--app-muted); }
.qbar__time{
  font-family:var(--app-mono);
  font-size:15px;
  font-weight:500;
  font-variant-numeric:tabular-nums;
  min-width:5ch;
  text-align:right;
}
.qbar__timer.is-low .qbar__time{ color:var(--app-bad); }
.qbar__sound{
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:36px;
  padding:0 12px;
  border:1px solid var(--app-line-2);
  border-radius:999px;
  background:transparent;
  color:var(--app-ink);
  font:inherit;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
}
.qbar__sound:hover{ border-color:var(--app-ink); }
.qbar__sound:focus-visible{ outline:2px solid var(--app-ink); outline-offset:2px; }
.qbar__sound[aria-pressed="false"]{ color:var(--app-muted); }
.qbar__sound .ico{ width:16px; height:16px; }
#app .qbar__exit{ min-height:36px; padding:0 16px; font-size:14px; }

.qprog{ height:2px; background:var(--app-line); }
.qprog__fill{
  display:block;
  height:100%;
  width:0;
  background:var(--app-ink);
  transition:width .25s ease;
}

/* Miniatura fija del laberinto (solo móvil/tableta) */
.qmini{
  position:absolute;
  left:0; right:0; top:100%;
  display:flex;
  align-items:center;
  gap:12px;
  width:100%;
  padding:8px var(--app-gutter);
  border:0;
  border-bottom:1px solid var(--app-line);
  background:var(--app-bg);
  color:var(--app-ink);
  font:inherit;
  text-align:left;
  cursor:zoom-in;
  visibility:hidden;
  opacity:0;
  transform:translateY(-6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
  box-shadow:0 8px 16px -12px rgba(10,10,10,.3);
}
.qmini.is-on{ visibility:visible; opacity:1; transform:none; }
.qmini__thumb{ width:64px; flex:none; border:1px solid var(--app-line-2); background:#fff; }
.qmini__thumb .maze{ aspect-ratio:1 / 1; }
.qmini__thumb{ border:0; background:none; }
.qmini__thumb .pic__alt{ font-size:10px; }
.qmini__txt{ display:flex; flex-direction:column; font-size:14px; line-height:1.35; }
.qmini__txt strong{ font-weight:600; }
.qmini__txt span{ color:var(--app-muted); font-size:13px; }

.qmain{
  flex:1;
  width:100%;
  max-width:1440px;
  margin:0 auto;
  padding:22px var(--app-gutter) 36px;
}
.qtext{
  margin:0 0 18px;
  font-size:23px;
  font-weight:600;
  line-height:1.25;
  letter-spacing:-.015em;
}
/* Enunciado con la píldora de intentos a la derecha (baja a su propia línea si no cabe). */
.qtitle{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px 20px;
  margin:0 0 18px;
}
.qtitle .qtext{ flex:1 1 24em; min-width:0; margin:0; }
.qwork{
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:24px;
  align-items:start;
}

/* Ventana del laberinto: tablero + pie con el resultado */
.qwin{
  --board-ar:1;
  width:100%;
  max-width:560px;
  margin:0;
  /* Al ejecutar en una sola columna, la página se desplaza al tablero sin taparlo con la barra. */
  scroll-margin-top:calc(var(--qbar-h) + 12px);
}
.qwin__view{
  display:block;
  width:100%;
  padding:0;
  border:0;
  border-radius:min(22px, 4.4%);
  background:none;
  cursor:zoom-in;
}
.qwin__view:focus-visible{ outline:2px solid var(--app-ink); outline-offset:3px; }
.qwin__view > .maze{
  aspect-ratio:1 / 1;
  border:1px solid var(--app-line-2);
  border-radius:var(--app-radius);
}
.qwin__foot{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:52px;
  margin-top:10px;
}
/* «El pollito mira hacia la derecha →» justo debajo del tablero (lo pone app.js: <p class="qdir">,
   opcionalmente con la flecha en <span class="qdir__flecha">). Una línea; --qdir-h le reserva su
   alto al tablero en el escritorio de una pantalla. */
.qwin:has(.qdir:not([hidden])){ --qdir-h:30px; }
.qdir{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:22px;
  margin:8px 0 0;
  padding:0 2px;
  font-size:14.5px;
  font-weight:600;
  line-height:1.3;
  color:#0A2240;
}
/* Punto rojo: el mismo color que el círculo con la flecha en el tablero. */
.qdir::before{
  content:"";
  flex:none;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#B22222;
  box-shadow:0 0 0 2px #fff;
}
.qdir__flecha{ display:inline-block; margin-left:2px; color:#B22222; font-size:1.2em; font-weight:700; line-height:1; }
/* Columna del tablero angosta (1093 × 526, 1024 × 519, 1024 × 768): la letra se ajusta al ancho
   (el texto más largo, «…hacia la izquierda ←», mide ~17,5 veces la letra) para no pasar a 2 líneas. */
@container qwin (max-width: 340px){
  .qdir{ gap:6px; font-size:clamp(12px, calc((100cqi - 26px) / 17.5), 14.5px); }
}
/* Hasta 3 líneas. El relleno va como borde transparente (el fondo se pinta debajo): así el
   recorte cae justo después de la última línea visible y no asoma media línea más. */
.qstatus{
  flex:1;
  min-width:0;
  margin:0;
  padding:0;
  border:solid transparent;
  border-width:8px 14px;
  border-radius:12px;
  font-size:14px;
  font-weight:600;
  line-height:1.3;
  display:-webkit-box;
  -webkit-line-clamp:3;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* Mientras camina el pollito el foco espera en el estado (tabindex −1): un contorno suave, sin tapar. */
.qstatus:focus{ outline:none; }
.qstatus:focus-visible{ outline:2px solid rgba(10, 34, 64, .4); outline-offset:1px; }
.qstatus.is-idle{ border-left-width:2px; font-weight:500; color:var(--app-muted); }
.qstatus.is-hecho{ border-left-width:2px; color:var(--app-ink-2); }
.qstatus.is-run{ background:#E8EEFF; color:#0033A0; }
.qstatus.is-ok{ background:#E3F6E8; color:#1E7A3C; }
.qstatus.is-err{ background:#FFE4E4; color:#B22222; }
/* Tras fallar los 2 intentos, el pollito recorre la correcta: informativo (ni rojo ni verde). */
.qstatus.is-demo{ background:#E7EDF6; color:#0A2240; }

/* Tras responder: recuadro rojo «¡Inténtalo de nuevo!» + «Recuerda que…» (pueden volver a
   intentarlo) o verde «¡Muy bien!». Es el mismo .qresult en los cuatro tipos de pregunta. */
@keyframes qresult-in{ from{ opacity:0; transform:translateY(4px); } to{ opacity:1; transform:none; } }
.qpanel--elegir > .qresult{ flex:none; }

/* Paneles de armar / predecir / encontrar el error y la práctica */
.qpanel{ display:flex; flex-direction:column; min-width:0; }
.qpanel[hidden]{ display:none !important; }
.qpanel__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:6px 14px;
  margin-bottom:10px;
}
.qpanel__head .qright__label{ margin:0; }
.qright__label--practica{ display:inline-flex; align-items:center; gap:8px; color:var(--app-ink); }
.qright__label--practica .ico{ width:15px; height:15px; }
.qeditor{
  position:relative;
  isolation:isolate;
  min-width:0;
  height:min(62vh, 500px);
  border:1px solid var(--app-line-2);
  border-radius:14px;
  background:var(--app-white);
  overflow:hidden;
}
.qeditor--predecir,
.qeditor--depurar{ overflow:auto; }
.qeditor.is-locked{ border-color:var(--app-line); }
.qeditor__falta{ margin:0; padding:24px; color:var(--app-muted); }
.qaviso{
  margin:10px 0 0;
  padding:10px 14px;
  border-radius:12px;
  background:#FFF4D6;
  color:#6B4A00;
  font-size:14.5px;
  font-weight:600;
  line-height:1.4;
}
.qaviso[hidden], .qresult[hidden]{ display:none; }
.qresult{
  margin:10px 0 0;
  padding:11px 16px 12px;
  border-left:4px solid;
  border-radius:12px;
  animation:qresult-in .25s ease;
}
@media (prefers-reduced-motion: reduce){ .qresult{ animation:none; } }
.qresult.is-ok{ background:#E3F6E8; border-color:#1E7A3C; color:#0F4D24; }
.qresult.is-bad{ background:#FFE4E4; border-color:#B22222; color:#5A1414; }
.qresult__t{ display:flex; align-items:center; gap:8px; margin:0; font-size:16px; font-weight:700; }
.qresult__t .ico{ width:18px; height:18px; }
.qresult.is-ok .qresult__t{ color:#1E7A3C; }
.qresult.is-bad .qresult__t{ color:#B22222; }
.qresult__x{ margin:4px 0 0; font-size:15px; line-height:1.45; }
.qacciones{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}
.qacciones__sp{ flex:1; }
.qacciones__txt{ flex:1; min-width:0; margin:0; font-size:14px; color:var(--app-muted); }
.qacciones .btn .ico{ width:15px; height:15px; }
#app .qacciones__run{ min-width:140px; }
/* Píldora de intentos junto al enunciado: «Intento 1 de 2», «Te queda 1 intento»… (24 px de alto:
   no agranda la fila del enunciado en el escritorio). */
.qintentos{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex:none;
  height:24px;
  margin:0;
  padding:0 11px 0 8px;
  border:1px solid var(--app-line-2);
  border-radius:999px;
  background:var(--app-white);
  font-size:13.5px;
  font-weight:600;
  line-height:1;
  color:var(--app-ink-2);
  white-space:nowrap;
}
.qintentos:empty{ display:none; }
.qintentos.is-quedan{ border-color:#E9B6B2; background:#FFF4F3; color:#8E1B1B; }
.qintentos.is-ok{ border-color:#A9D9B6; background:#EFF9F2; color:#155C2C; }
.qintentos.is-bad{ background:var(--app-paper); }
.qintentos__dots{ display:inline-flex; gap:4px; }
.qintentos__dots i{ width:10px; height:10px; border:1.5px solid var(--app-line-2); border-radius:50%; }
.qintentos__dots i.is-used{ background:#B22222; border-color:#B22222; }
.qintentos__dots i.is-ok{ background:#1E7A3C; border-color:#1E7A3C; }

/* Lista de bloques (revisión y respaldo del editor) */
.plist{ list-style:none; margin:0; padding:0; display:grid; gap:4px; font-size:13px; }
.plist__l{ padding-left:calc(var(--n, 0) * 14px); }
.plist__b{
  display:inline-block;
  padding:4px 10px;
  border:0;
  border-radius:7px;
  color:#fff;
  font:inherit;
  font-weight:600;
  line-height:1.3;
}
button.plist__b{ cursor:pointer; }
button.plist__b:disabled{ cursor:default; }
.plist__l--mov .plist__b{ background:#4C97FF; box-shadow:inset 0 -2px 0 #3373CC; }
.plist__l--ctl .plist__b{ background:#FFAB19; box-shadow:inset 0 -2px 0 #CF8B17; }
.plist__l.is-run .plist__b{ box-shadow:0 0 0 3px #FFE27A, 0 0 12px 2px rgba(255, 210, 74, .9); }
.plist__l.is-sel .plist__b{ outline:3px solid #0033A0; outline-offset:2px; }
.plist__l.is-error .plist__b{ outline:3px solid #B22222; outline-offset:2px; }
.plist__l.is-ok .plist__b{ outline:3px solid #1E7A3C; outline-offset:2px; }
.plist--grande{ padding:14px; gap:6px; font-size:16px; }
.plist__vacio{ margin:0; font-size:13px; color:var(--app-muted); overflow-wrap:anywhere; }
.qwin__btn{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  height:36px;
  min-width:36px;
  padding:0 12px;
  border:1px solid var(--app-line-2);
  border-radius:999px;
  background:var(--app-white);
  color:var(--app-ink);
  font:inherit;
  font-size:13.5px;
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
}
.qwin__btn:hover{ border-color:var(--app-ink); }
.qwin__btn:focus-visible{ outline:2px solid var(--app-ink); outline-offset:2px; }
.qwin__btn .ico{ width:15px; height:15px; }
.qwin__zoom{ width:36px; padding:0; cursor:zoom-in; }
/* Columna del tablero angosta (p. ej. 1366 × 657): "Ver de nuevo" solo con el icono. */
.qwin{ container:qwin / inline-size; }
@container qwin (max-width: 470px){
  .qwin__again{ width:36px; padding:0; }
  .qwin__again span{ display:none; }
}
/* Columna muy angosta (1024 × 768; zoom 125 %: 1093 × 526, 1024 × 519): los botones redondos van uno
   sobre otro a la derecha y la letra baja a 13 px, así el estado de la demostración («Así funciona con
   el bloque 6 corregido: el pollito llega con mamá gallina.») cabe entero en sus 3 líneas. En el
   teléfono no hace falta: no hay lupa y el estado usa casi todo el ancho. */
@media (min-width: 600px){
  @container qwin (max-width: 340px){
    .qwin__foot{
      display:grid;
      grid-template-columns:minmax(0, 1fr) auto;
      column-gap:8px;
      row-gap:6px;
      align-items:center;
    }
    .qwin__foot > .qstatus{ grid-column:1; grid-row:1 / span 2; font-size:13px; line-height:1.28; border-width:6px 10px; }
    .qwin__foot > .qstatus.is-idle,
    .qwin__foot > .qstatus.is-hecho{ border-left-width:2px; }
    .qwin__foot > .qwin__btn{ grid-column:2; height:34px; min-width:34px; width:34px; }
  }
}

/* Tablero del laberinto (estilo "Creador de caminos" de la profe).
   Las medidas se escalan con el ancho del marco (cqw) para verse bien
   también en miniatura (revisión y barra móvil). */
.board-frame{
  --eng-navy:#0A2240; --eng-azul:#0033A0; --eng-rojo:#B22222; --eng-rojo-lt:#FFE4E4;
  --tile-a:#F2F6FF; --tile-b:#D3DFF7; --tile-edge:#B6C7EA;
  --path-a:#FFE27A; --path-b:#FFD24A; --path-edge:#E0B32E;
  container-type:inline-size;
  width:100%;
  padding:min(12px, 2.4%);
  border-radius:min(22px, 4.4%);
  background:var(--eng-navy);
  box-shadow:0 14px 30px rgba(10, 34, 64, .22);
}
.board-frame--mini{ box-shadow:none; }
.board-wrap{ position:relative; }
.board{
  display:grid;
  gap:min(5px, 1.1cqw);
  user-select:none;
  -webkit-user-select:none;
}
.board .cell{
  position:relative;
  min-width:0;
  border-radius:min(9px, 1.9cqw);
  background:linear-gradient(145deg, var(--tile-a), var(--tile-b));
  box-shadow:inset 0 calc(-1 * min(3px, .6cqw)) 0 var(--tile-edge);
}
.board .cell::after{
  content:"";
  position:absolute;
  inset:22%;
  border-radius:min(6px, 1.3cqw);
  background:rgba(255, 255, 255, .4);
}
.board .cell.path{
  background:linear-gradient(145deg, var(--path-a), var(--path-b));
  box-shadow:inset 0 calc(-1 * min(3px, .6cqw)) 0 var(--path-edge);
}
.board .cell.path::after,
.board .cell.end::after{ display:none; }
.board .cell.end{ background:linear-gradient(145deg, var(--path-a), var(--path-b)); box-shadow:none; }
.board .cell.end .inner{ position:absolute; inset:9%; background:#fff; border-radius:min(7px, 1.5cqw); }
.board .cell img{
  position:absolute;
  inset:10%;
  width:80%;
  height:80%;
  max-width:none;
  pointer-events:none;
  transition:transform .35s cubic-bezier(.3, 1.4, .5, 1), translate .35s cubic-bezier(.3, 1.4, .5, 1), scale .35s ease;
}
.board .cell.visited{ box-shadow:inset 0 0 0 min(4px, .85cqw) var(--eng-azul); }
.board .cell.bad{ background:var(--eng-rojo-lt); box-shadow:inset 0 0 0 min(4px, .85cqw) var(--eng-rojo); }
/* Hacia dónde mira el pollito: círculo rojo con flecha blanca en el LADO hacia el que mira (arriba,
   derecha, abajo o izquierda), del 42 % de la casilla, montado sobre el borde de su casilla.
   Sin JS extra: .dir cubre la casilla (el caminante mide el 80 %: inset −12,5 %) y el <svg> es un
   cuadro 1,34 veces la casilla, centrado en ella, con el círculo (fondo) y la flecha (contenido,
   gracias al relleno) arriba al centro. app.js ya gira el <svg> «rotate(dir × 90°)»: al girar sobre el
   centro de la casilla, el círculo queda en el lado correcto y la flecha apunta hacia afuera; al
   caminar, gira alrededor del pollito con la misma transición. Rellenos en % del ancho de la casilla. */
.board-frame .dir{
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
}
.walker .dir{ inset:-12.5%; }
.board-frame .dir svg{
  position:absolute;
  left:-17%;
  top:-17%;
  width:134%;
  height:134%;
  max-width:none;
  box-sizing:border-box;
  padding:6% 52% 98%;
  overflow:visible;
  background:radial-gradient(circle closest-side at 50% 15.6716%, var(--eng-rojo) 0 84%, #fff calc(84% + .6px) calc(100% - .8px), rgba(255, 255, 255, 0) 100%);
  fill:none;
  stroke:#fff;
  stroke-width:2.9;
  stroke-linecap:round;
  stroke-linejoin:round;
  filter:drop-shadow(0 0 1.5px rgba(10, 34, 64, .45));
  scale:1.35; /* más grande y más afuera del pollito: el círculo rojo queda en ~0,47 de la casilla */
  transition:transform .3s;
}
.walker{
  position:absolute;
  z-index:3;
  pointer-events:none;
  transition:left .38s ease, top .38s ease;
}
.walker img{ display:block; width:100%; height:100%; max-width:none; transition:transform .3s, translate .3s, scale .3s; }
.walker.is-inst,
.walker.is-inst *{ transition:none !important; }
.walker.is-rapido img,
.walker.is-rapido .dir svg{ transition-duration:.08s; }
@keyframes tablero-shake{ 25%{ translate:-5% 0; } 75%{ translate:5% 0; } }
.walker.shake{ animation:tablero-shake .3s 2; }
@keyframes tablero-hop{
  0%, 100%{ translate:0 0; }
  30%{ translate:0 -22%; }
  55%{ translate:0 0; }
  75%{ translate:0 -10%; }
}
@keyframes tablero-hop-top{
  0%, 100%{ top:10%; }
  30%{ top:-6%; }
  55%{ top:10%; }
  75%{ top:3%; }
}
.walker.is-feliz{ animation:tablero-hop .75s ease-out; }
.board .cell .hen.is-feliz{ animation:tablero-hop-top .75s .08s ease-out; }
/* Predecir: casillas que se pueden tocar y marcas */
.board button.cell{
  display:block;
  width:100%;
  height:100%;
  margin:0;
  padding:0;
  border:0;
  font:inherit;
  color:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.board button.cell:disabled{ cursor:default; }
.board--elegible button.cell:not(:disabled):hover{ box-shadow:inset 0 0 0 min(3px, .7cqw) rgba(0, 51, 160, .5); }
.board button.cell:focus-visible{ outline:3px solid #fff; outline-offset:-3px; box-shadow:0 0 0 min(3px, .7cqw) var(--eng-azul); z-index:2; }
.board .cell.sel,
.board .cell.pred{ box-shadow:inset 0 0 0 min(4px, .85cqw) var(--eng-azul); }
.board .cell.pred-ok,
.board .cell.real{ box-shadow:inset 0 0 0 min(4px, .85cqw) #1E7A3C; }
.board .cell.pred-bad{ box-shadow:inset 0 0 0 min(4px, .85cqw) var(--eng-rojo); }
.board .cell.sel::before,
.board .cell.pred::before,
.board .cell.real::before{
  content:"";
  position:absolute;
  left:8%;
  top:8%;
  z-index:2;
  width:26%;
  height:26%;
  border-radius:50%;
  background:var(--eng-azul);
  box-shadow:0 0 0 min(2px, .45cqw) #fff;
}
.board .cell.pred-ok::before,
.board .cell.real::before{ background:#1E7A3C; }
.board .cell.pred-bad::before{ background:var(--eng-rojo); }
/* Obstáculo: piedra sobre el camino (no se puede pisar); ocupa toda la casilla, como en las
   imágenes. El cono es solo el respaldo si la piedra no carga. */
.board .cell.obst img.piedra{ inset:0; width:100%; height:100%; transition:none; }
.board .cell.obst .cono{ position:absolute; inset:13%; width:74%; height:74%; pointer-events:none; }
/* Predecir: casilla ya probada (y equivocada): ✗ roja; no se vuelve a elegir. */
.board .cell.probada,
.board--elegible button.cell.probada:not(:disabled):hover{
  background:var(--eng-rojo-lt);
  box-shadow:inset 0 0 0 min(3px, .7cqw) rgba(178, 34, 34, .5);
}
.board button.cell.probada{ cursor:not-allowed; }
.board .cell.probada::after{ display:none; }
.board .cell.probada::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  z-index:2;
  width:44%;
  height:44%;
  transform:translate(-50%, -50%);
  border-radius:50%;
  background:var(--eng-rojo) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.6 4.6l6.8 6.8M11.4 4.6l-6.8 6.8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") center / 72% no-repeat;
  box-shadow:0 0 0 min(2px, .45cqw) #fff;
}
/* Depurar: bloque ya probado que no era el equivocado: marco rojo punteado. */
.qeditor--depurar .diag-marco--error{ stroke-dasharray:10 7; }

/* Al llegar, el pollito se achica y mamá gallina se corre para que se vean los dos. */
.walker.llego img{ translate:-14% 12%; scale:.78; }
.board .cell.end.is-llegada .hen{ translate:17% -15%; scale:.8; }

/* Imagen con texto de respaldo (laberintos y programas) */
.pic{ position:relative; overflow:hidden; }
.pic img{
  display:block;
  width:100%;
  height:100%;
  max-width:none;
  object-fit:contain;
}
.maze{ background:#fff; }
.maze img{ position:absolute; inset:0; }
.pic.is-missing{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 16px;
  background:var(--app-paper);
}
.pic__alt{
  margin:0;
  max-height:100%;
  overflow:auto;
  font-size:15px;
  line-height:1.5;
  color:var(--app-ink-2);
  text-align:left;
}

.qright__label{
  margin:0 0 12px;
  font-size:12.5px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--app-muted);
}

/* Opciones: cada tarjeta es un <label> con un radio nativo; "Ampliar" va aparte */
.opts{ display:grid; grid-template-columns:minmax(0, 1fr); gap:12px; }
/* Tras «¡Inténtalo de nuevo!» el foco queda en el grupo de opciones (tabindex −1), no en una opción. */
.opts:focus{ outline:none; }
.opts:focus-visible{ outline:2px dashed var(--app-line-2); outline-offset:3px; }
.opt{
  position:relative;
  min-width:0;
  background:var(--app-white);
  border:1px solid var(--app-line);
  border-radius:var(--app-radius);
  transition:border-color .15s ease, box-shadow .15s ease;
}
.opt:hover{ border-color:var(--app-line-2); }
.opt.is-checked{ border-color:var(--app-ink); box-shadow:inset 0 0 0 1px var(--app-ink); }
.opt:has(.opt__input:focus-visible){ outline:2px solid var(--app-ink); outline-offset:3px; }
.opt__pick{
  display:grid;
  grid-template-columns:32px minmax(0, 1fr);
  gap:14px;
  height:100%;
  padding:12px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.opt__badge{
  grid-column:1;
  grid-row:1;
  align-self:start;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  border:1px solid var(--app-line-2);
  border-radius:50%;
  font-weight:600;
  font-size:15px;
  line-height:1;
  background:var(--app-white);
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.opt:hover .opt__badge{ border-color:var(--app-ink); }
.opt.is-checked .opt__badge{ background:var(--app-ink); border-color:var(--app-ink); color:var(--app-white); }
.opt__img{ grid-column:2; grid-row:1; min-width:0; min-height:0; }
/* La primera elección cuenta: las demás quedan desactivadas. */
.opt.is-disabled{ background:var(--app-paper); }
.opt.is-disabled:hover{ border-color:var(--app-line); }
.opt.is-disabled .opt__pick{ cursor:default; }
.opt.is-disabled .opt__img,
.opt.is-disabled .opt__badge{ opacity:.4; filter:grayscale(.5); }
.opt.is-disabled:hover .opt__badge{ border-color:var(--app-line-2); }
.opt__img img{ height:auto; object-position:left top; }
.opt__img.is-missing{ align-items:flex-start; justify-content:flex-start; min-height:96px; }

/* Opción ya probada que no funciona: ✗ roja y apagada (no se puede volver a elegir). Las demás
   siguen activas hasta que acierten; al acertar se bloquean todas. */
.opt__mal{
  display:none;
  position:absolute;
  left:12px;
  top:100px;
  z-index:1;
  width:32px;
  height:32px;
  place-items:center;
  border-radius:50%;
  background:#B22222;
  color:#fff;
  pointer-events:none;
}
.opt__mal .ico{ width:16px; height:16px; stroke-width:2.2; }
.opt.is-tried{ border-color:#E9B6B2; }
.opt.is-tried:hover{ border-color:#E9B6B2; }
.opt.is-tried .opt__mal{ display:grid; }
/* Tras fallar los 2 intentos: la correcta, con borde verde y el rótulo «Esta era la correcta»
   (no se ejecuta; queda bloqueada como las demás). */
.opt.is-correcta,
.opt.is-correcta:hover{ border-color:#1E7A3C; box-shadow:inset 0 0 0 2px #1E7A3C; background:#F3FBF5; }
.opt.is-correcta .opt__img,
.opt.is-correcta .opt__badge{ opacity:1; filter:none; }
.opt.is-correcta .opt__badge,
.opt.is-correcta:hover .opt__badge{ background:#1E7A3C; border-color:#1E7A3C; color:#fff; }
.opt__correcta{
  display:none;
  position:absolute;
  right:10px;
  bottom:10px;
  z-index:2;
  align-items:center;
  gap:6px;
  padding:6px 12px 6px 9px;
  border-radius:999px;
  background:#1E7A3C;
  color:#fff;
  font-size:14px;
  font-weight:700;
  line-height:1.15;
  pointer-events:none;
  box-shadow:0 0 0 3px #F3FBF5, 0 6px 14px -6px rgba(15, 77, 36, .55);
}
.opt__correcta .ico{ width:15px; height:15px; stroke-width:2.6; }
.opt.is-correcta .opt__correcta{ display:inline-flex; }
/* Mientras el pollito ejecuta la elección, las tarjetas no se pueden tocar. */
.opts.is-running .opt{ cursor:progress; }
.opts.is-running .opt__pick{ pointer-events:none; }

/* «Ver más abajo»: con programas muy altos, el recuadro de opciones se desplaza. */
.opts-wrap{ position:relative; min-width:0; }
.opts-mas{
  position:absolute;
  left:50%;
  bottom:12px;
  z-index:3;
  transform:translateX(-50%);
  display:inline-flex;
  align-items:center;
  gap:6px;
  height:34px;
  padding:0 14px 0 16px;
  border:0;
  border-radius:999px;
  background:var(--app-ink);
  color:var(--app-white);
  font:inherit;
  font-size:13.5px;
  font-weight:600;
  white-space:nowrap;
  box-shadow:0 8px 18px -6px rgba(10, 10, 10, .45);
  cursor:pointer;
}
.opts-mas .ico{ width:15px; height:15px; transform:rotate(90deg); }

/* "Ampliar" de cada opción: círculo con lupa debajo de la letra */
.opt__zoom{
  position:absolute;
  left:12px;
  top:56px;
  z-index:1;
  width:32px;
  height:32px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid var(--app-line);
  border-radius:50%;
  background:var(--app-white);
  color:var(--app-ink-2);
  cursor:zoom-in;
  transition:border-color .15s ease, color .15s ease;
}
.opt__zoom:hover{ border-color:var(--app-ink); color:var(--app-ink); }
.opt__zoom:focus-visible{ outline:2px solid var(--app-ink); outline-offset:2px; }
.opt__zoom .ico{ width:15px; height:15px; }
.opt__zoom-txt{
  position:absolute;
  width:1px; height:1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
}

/* Teclado en pantallas donde la página se desplaza (teléfono, tableta, escritorio muy bajo): el
   control enfocado con Tab nunca queda bajo la barra de arriba (ni bajo la miniatura del laberinto,
   cuando está) ni bajo el pie pegajoso. El tablero ya no necesita su scroll-margin propio (lo cubre
   el scroll-padding); con la miniatura visible se descuenta (se oculta al volver al tablero). */
:root{ --qfoot-h:70px; --qmini-h:81px; }
html:has(> body[data-view="quiz"]){
  scroll-padding-top:calc(var(--qbar-h) + 2px + 12px);
  scroll-padding-bottom:calc(var(--qfoot-h) + 12px);
}
html:has(> body[data-view="quiz"]):has(.qmini.is-on){ scroll-padding-top:calc(var(--qbar-h) + 2px + var(--qmini-h) + 12px); }
html:has(> body[data-view="quiz"]) .qwin{ scroll-margin-top:0; }
html:has(> body[data-view="quiz"]):has(.qmini.is-on) .qwin{ scroll-margin-top:calc(-1 * var(--qmini-h)); }

/* Pie de la prueba */
.qfoot{
  position:sticky;
  bottom:0;
  z-index:20;
  background:var(--app-bg);
  border-top:1px solid var(--app-line);
}
.qfoot__in{
  padding:12px var(--app-gutter);
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto auto;
  grid-template-areas:"prev nav hint next";
  align-items:center;
  gap:20px;
}
.qfoot__prev{ grid-area:prev; }
.qfoot__nav{ grid-area:nav; min-width:0; }
.qfoot__hint{ grid-area:hint; margin:0; font-size:13px; color:var(--app-muted); white-space:nowrap; }
.qfoot__hint kbd{
  display:inline-block;
  min-width:20px;
  padding:0 5px;
  border:1px solid var(--app-line-2);
  border-radius:3px;
  font-family:var(--app-mono);
  font-size:11px;
  line-height:18px;
  text-align:center;
  color:var(--app-ink-2);
  background:var(--app-paper);
}
.qfoot__next{ grid-area:next; min-width:148px; }

.qnav{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
}
.qnav li{ display:block; }
.qnav__dot{
  position:relative;
  display:block;
  width:12px;
  height:12px;
  padding:0;
  border:1px solid var(--app-line-2);
  border-radius:50%;
  background:transparent;
  cursor:pointer;
}
.qnav__dot::before{ content:""; position:absolute; inset:-5px; }
span.qnav__dot{ cursor:default; }
.qnav__dot:hover{ border-color:var(--app-ink); }
.qnav__dot.is-answered{ background:var(--app-ink); border-color:var(--app-ink); }
/* Empezada y con intentos por usar («les queda 1 intento»): medio llena. */
.qnav__dot.is-pending{ border-color:var(--app-ink); background:linear-gradient(90deg, var(--app-ink) 50%, transparent 50%); }
.qnav__dot.is-current{ border-color:var(--app-ink); box-shadow:0 0 0 2px var(--app-bg), 0 0 0 3px var(--app-ink); }
.qnav__dot:focus-visible{ outline:2px solid var(--app-ink); outline-offset:4px; }

/* ==========================================================================
   Diálogos
   ========================================================================== */
.dlg{
  width:calc(100% - 32px);
  max-width:500px;
  max-height:calc(100% - 32px);
  padding:0;
  border:1px solid var(--app-line-2);
  border-radius:4px;
  background:var(--app-bg);
  color:var(--app-ink);
  font-family:var(--app-sans);
  font-size:16px;
  line-height:1.5;
  box-shadow:0 24px 60px -24px rgba(10,10,10,.35);
}
.dlg::backdrop{ background:rgba(10,10,10,.36); }
.dlg__body{ padding:28px 28px 4px; }
.dlg__title{
  margin:0 0 12px;
  font-weight:700;
  font-size:24px;
  line-height:1.1;
  letter-spacing:-.02em;
}
/* «¿Son ustedes …?»: el foco empieza en el título (ningún botón elegido de antemano). */
.dlg__title[tabindex="-1"]:focus{ outline:none; }
.dlg__text{ margin:0; line-height:1.55; color:var(--app-ink-2); overflow-wrap:anywhere; }
.dlg__actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
  padding:24px 28px 26px;
}
/* Zoom: laberinto o programa en grande (el diálogo se ajusta a la imagen) */
.dlg--zoom{
  width:fit-content;
  min-width:min(380px, calc(100% - 32px));
  max-width:calc(100% - 32px);
}
.dlg--zoom .dlg__body{ padding:18px 20px 0; }
.dlg--zoom .dlg__title{ margin-bottom:12px; font-size:18px; }
.dlg--zoom .dlg__actions{ padding:16px 20px 18px; }
.zoom__frame{ border:1px solid var(--app-line-2); border-radius:var(--app-radius); background:#fff; }
.zoom__pic img{ margin:0 auto; }
.zoom__pic--maze img{
  width:min(calc(100dvh - 230px), calc(100vw - 80px), 900px);
  height:auto;
  aspect-ratio:auto;
}
.zoom__pic--prog{ padding:16px; }
.zoom__pic--prog img{
  width:auto;
  height:auto;
  max-height:min(calc(100dvh - 250px), 1100px);
  max-width:calc(100vw - 112px);
  object-position:center top;
}
.zoom__pic.is-missing{ min-height:160px; max-width:560px; }
/* 250 px: título, rellenos, texto de hasta 3 líneas y botones (sin desplazamiento interno). */
.zoom__board{ width:min(calc(100dvh - 250px), calc(100vw - 80px), 720px); margin-inline:auto; }
/* El texto no ensancha el diálogo más que el tablero. */
.zoom__cap{ width:0; min-width:100%; margin:14px 0 0; font-size:16px; color:var(--app-ink-2); }

/* «Ampliar el laberinto» en pantallas apaisadas (escritorio, zoom del navegador, tableta horizontal):
   el tablero ocupa todo el alto y el título, el enunciado y «Cerrar» van en una columna a su derecha.
   76 px = márgenes del diálogo (32) + rellenos (40) + bordes; 358 px = márgenes, rellenos, separación
   y la columna del texto (260). Así amplía de verdad: 1917 × 757 → 683 px (en la página, 481);
   1366 × 657 → 583 (390); 1093 × 526 (zoom 125 %) → 452 (283). */
@media (min-width: 700px) and (min-aspect-ratio: 1 / 1){
  .dlg--zoom:not(.dlg--prog) .dlg__box{
    display:grid;
    grid-template-columns:auto minmax(180px, 260px);
    grid-template-rows:auto auto auto minmax(0, 1fr) auto;
    grid-template-areas:"board title" "board cap" "board dir" "board ." "board acc";
    column-gap:24px;
    padding:20px;
  }
  .dlg--zoom:not(.dlg--prog) .dlg__body,
  .dlg--zoom:not(.dlg--prog) .zoom{ display:contents; }
  .dlg--zoom:not(.dlg--prog) .dlg__title{ grid-area:title; margin:0 0 12px; font-size:22px; }
  .dlg--zoom:not(.dlg--prog) .zoom__board,
  .dlg--zoom:not(.dlg--prog) .zoom__frame{ grid-area:board; align-self:start; }
  .dlg--zoom:not(.dlg--prog) .zoom__cap{ grid-area:cap; width:auto; min-width:0; margin:0; font-size:17px; line-height:1.45; overflow-wrap:anywhere; }
  /* Si app.js repite ahí «El pollito mira hacia…» (<p class="qdir">), va bajo el enunciado. */
  .dlg--zoom:not(.dlg--prog) .qdir{ grid-area:dir; margin-top:14px; }
  .dlg--zoom:not(.dlg--prog) .dlg__actions{ grid-area:acc; padding:16px 0 0; }
  .dlg--zoom:not(.dlg--prog) .dlg__actions .btn{ flex:1 1 auto; }
  .zoom__board{ width:min(calc(100dvh - 76px), calc(100vw - 358px), 900px); margin:0; }
  .zoom__pic--maze img{ width:min(calc(100dvh - 78px), calc(100vw - 360px), 900px); }
}
/* Tableta vertical: el diálogo usa casi todo el ancho (768 × 1024 → 710 px; en la página, 536). */
@media (min-width: 600px) and (max-aspect-ratio: 1 / 1){
  .dlg--zoom{ max-width:calc(100% - 16px); }
  .zoom__board{ width:min(calc(100dvh - 250px), calc(100vw - 58px), 900px); }
  .zoom__pic--maze img{ width:min(calc(100dvh - 230px), calc(100vw - 60px), 900px); }
}

/* ==========================================================================
   Aviso del resultado (al terminar el pollito): tarjeta grande en el centro,
   roja «¡Inténtalo de nuevo!» o verde «¡Muy bien!», sobre un velo azul marino
   suave. Empieza debajo de la barra de arriba (--aviso-top lo pone app.js).
   ========================================================================== */
.aviso{
  --aviso-top:0px;
  --aviso-c:#B22222; --aviso-lt:#FFE4E4; --aviso-oscuro:#8E1B1B;
  position:fixed;
  inset:var(--aviso-top) 0 0 0;
  width:auto;
  height:auto;
  max-width:none;
  max-height:none;
  margin:0;
  padding:16px;
  border:0;
  background:rgba(10, 34, 64, .46);
  color:var(--app-ink);
  font-family:var(--app-sans);
  font-size:16px;
  line-height:1.5;
  overflow:auto;
  overscroll-behavior:contain;
  animation:aviso-velo .2s ease-out;
}
.aviso[open]{ display:flex; }
.aviso::backdrop{ background:transparent; }
.aviso--ok{ --aviso-c:#1E7A3C; --aviso-lt:#E3F6E8; --aviso-oscuro:#155C2C; }
/* Sin intentos: azul marino (neutro), con la ampolleta: «mira cuál era la correcta». */
.aviso--fin{ --aviso-c:#0A2240; --aviso-lt:#E7EDF6; --aviso-oscuro:#061529; }
.aviso [hidden]{ display:none !important; }
@keyframes aviso-velo{ from{ background-color:rgba(10, 34, 64, 0); } }
@keyframes aviso-entra{
  from{ opacity:0; transform:translateY(18px) scale(.94); }
  to{ opacity:1; transform:none; }
}
.aviso__card{
  position:relative;
  width:100%;
  max-width:560px;
  margin:auto;
  padding:30px 34px 30px;
  border:3px solid var(--aviso-c);
  border-radius:22px;
  background:#fff;
  box-shadow:0 28px 70px -18px rgba(10, 34, 64, .65), 0 0 0 8px rgba(255, 255, 255, .22);
  text-align:center;
  overflow:hidden;
  animation:aviso-entra .34s cubic-bezier(.3, 1.35, .5, 1);
}
.aviso__card:focus{ outline:none; }
/* Franja de color arriba, detrás del sello. */
.aviso__card::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:74px;
  background:var(--aviso-lt);
}
.aviso__cabeza{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:18px;
  margin:0 0 14px;
}
.aviso__sello{
  display:grid;
  place-items:center;
  flex:none;
  width:92px;
  height:92px;
  border-radius:50%;
  background:var(--aviso-c);
  color:#fff;
  box-shadow:0 0 0 7px #fff, 0 10px 22px -6px var(--aviso-c);
}
.aviso__ico{ display:block; width:52px; height:52px; overflow:visible; }
.aviso--fin .aviso__sello{ width:80px; height:80px; }
.aviso--fin .aviso__ico{ width:46px; height:46px; }
.aviso__sprite{ display:block; width:66px; height:66px; flex:none; }
.aviso__sprite--pollito{ transform:scaleX(-1); animation:aviso-salto .7s .25s ease-out 2; }
.aviso__sprite--gallina{ animation:aviso-salto .7s .4s ease-out 2; }
@keyframes aviso-salto{
  0%, 100%{ translate:0 0; }
  30%{ translate:0 -20px; }
  55%{ translate:0 0; }
  75%{ translate:0 -7px; }
}
.aviso--mal .aviso__sello{ animation:aviso-no .5s .2s ease-in-out; }
@keyframes aviso-no{
  20%{ rotate:-12deg; }
  45%{ rotate:10deg; }
  70%{ rotate:-6deg; }
  100%{ rotate:0deg; }
}
.aviso__t{
  position:relative;
  margin:0;
  font-size:32px;
  font-weight:700;
  line-height:1.12;
  letter-spacing:-.02em;
  color:var(--aviso-c);
}
.aviso__x{
  position:relative;
  max-width:44ch;
  margin:12px auto 0;
  font-size:19px;
  font-weight:500;
  line-height:1.5;
  color:var(--app-ink-2);
  overflow-wrap:anywhere;
}
/* «Te queda 1 intento». */
.aviso__quedan{
  position:relative;
  display:block;
  width:fit-content;
  margin:14px auto 0;
  padding:6px 18px;
  border-radius:999px;
  background:var(--aviso-lt);
  color:var(--aviso-oscuro);
  font-size:18px;
  font-weight:700;
  line-height:1.3;
}
/* Sin intentos: dónde quedó señalada la correcta (en verde, como la tarjeta/casilla/bloque). */
.aviso__senal{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:10px;
  width:fit-content;
  max-width:100%;
  margin:14px auto 0;
  padding:10px 16px;
  border:2px solid #1E7A3C;
  border-radius:12px;
  background:#E3F6E8;
  color:#155C2C;
  font-size:18px;
  font-weight:700;
  line-height:1.35;
  text-align:left;
}
.aviso__senal .ico{ flex:none; width:22px; height:22px; margin-top:1px; stroke-width:2.6; }
.aviso__senal + .aviso__x{ margin-top:12px; font-size:18px; }
/* Sin intentos: «Ahora verán al pollito recorrer la correcta» (el botón es «▶ Ver cómo funciona»). */
.aviso__luego{
  position:relative;
  max-width:44ch;
  margin:12px auto 0;
  color:var(--aviso-c);
  font-size:18px;
  font-weight:700;
  line-height:1.35;
}
.aviso .aviso__btn .ico{ flex:none; width:18px; height:18px; }
.aviso .aviso__btn .ico path{ fill:currentColor; stroke-width:1.2; stroke-linejoin:round; }
.aviso__acc{ position:relative; margin-top:24px; }
.aviso .aviso__btn{
  min-width:220px;
  min-height:54px;
  padding:0 30px;
  border:2px solid var(--aviso-c);
  border-radius:12px;
  background:var(--aviso-c);
  color:#fff;
  font-family:var(--app-sans);
  font-size:19px;
  font-weight:700;
  letter-spacing:0;
}
.aviso .aviso__btn:hover{ background:var(--aviso-oscuro); border-color:var(--aviso-oscuro); color:#fff; }
.aviso .aviso__btn:focus-visible{ outline:3px solid #0A2240; outline-offset:3px; }
/* Acierto: la barrita de abajo se vacía mientras el aviso se cierra solo. */
.aviso__cuenta{
  position:absolute;
  left:0; bottom:0;
  width:100%;
  height:6px;
  background:var(--aviso-c);
  opacity:.55;
  transform-origin:left center;
  animation:aviso-cuenta linear forwards;
}
@keyframes aviso-cuenta{ from{ transform:scaleX(1); } to{ transform:scaleX(0); } }
/* Papelitos de colores (tarjeta verde). */
.aviso__confeti{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.aviso__confeti i{
  position:absolute;
  top:-14px;
  width:10px;
  height:14px;
  border-radius:2px;
  opacity:0;
  animation:aviso-papel 1.6s ease-in forwards;
}
@keyframes aviso-papel{
  0%{ opacity:1; transform:translate(0, 0) rotate(0deg); }
  85%{ opacity:1; }
  100%{ opacity:0; transform:translate(var(--deriva, 0px), 330px) rotate(var(--giro, 220deg)); }
}
@media (max-width: 599px){
  .aviso{ padding:12px; }
  .aviso__card{ padding:24px 20px 24px; border-radius:18px; }
  .aviso__card::before{ height:62px; }
  .aviso__sello{ width:78px; height:78px; }
  .aviso__ico{ width:44px; height:44px; }
  .aviso__sprite{ width:54px; height:54px; }
  .aviso__cabeza{ gap:12px; }
  .aviso__t{ font-size:26px; }
  .aviso__x{ font-size:18px; }
  .aviso .aviso__btn{ width:100%; min-width:0; }
}
/* Pantallas bajas (p. ej. 1366 × 657): un poco más compacta. */
@media (max-height: 700px) and (min-width: 600px){
  .aviso__card{ padding:24px 32px 26px; }
  .aviso__card::before{ height:66px; }
  .aviso__sello{ width:82px; height:82px; }
  .aviso__ico{ width:46px; height:46px; }
  .aviso__acc{ margin-top:20px; }
  /* Sin intentos: la tarjeta lleva además la explicación y «Ahora verán…»: sello más chico. */
  .aviso--fin .aviso__card{ padding-top:20px; }
  .aviso--fin .aviso__card::before{ height:56px; }
  .aviso--fin .aviso__cabeza{ margin-bottom:10px; }
  .aviso--fin .aviso__sello{ width:66px; height:66px; box-shadow:0 0 0 6px #fff, 0 8px 18px -6px var(--aviso-c); }
  .aviso--fin .aviso__ico{ width:38px; height:38px; }
  .aviso--fin .aviso__luego{ margin-top:10px; }
  .aviso--fin .aviso__acc{ margin-top:16px; }
}
/* Pantallas muy bajas (zoom 110–125 %: 1242 × 597, 1534 × 606, 1093 × 526): tarjeta más ancha y
   compacta para que el sello, el título, la explicación y el botón se vean sin desplazarse. */
@media (max-height: 620px) and (min-width: 600px){
  .aviso{ padding:10px 16px; }
  .aviso__card{ max-width:620px; padding:16px 28px 18px; border-radius:18px; }
  .aviso__card::before{ height:50px; }
  .aviso__cabeza{ gap:14px; margin-bottom:8px; }
  .aviso__sello{ width:60px; height:60px; box-shadow:0 0 0 5px #fff, 0 8px 16px -6px var(--aviso-c); }
  .aviso__ico{ width:34px; height:34px; }
  .aviso__sprite{ width:50px; height:50px; }
  .aviso__t{ font-size:26px; }
  .aviso__x{ max-width:56ch; margin-top:8px; font-size:18px; line-height:1.42; }
  .aviso__quedan{ margin-top:10px; padding:4px 16px; font-size:18px; }
  .aviso__senal{ margin-top:10px; padding:7px 14px; font-size:17px; }
  .aviso__senal .ico{ width:20px; height:20px; }
  .aviso__senal + .aviso__x{ margin-top:8px; font-size:17px; }
  .aviso__luego{ max-width:56ch; margin-top:8px; font-size:17px; }
  .aviso__acc{ margin-top:14px; }
  .aviso .aviso__btn{ min-height:48px; font-size:18px; }
  .aviso--fin .aviso__card{ padding-top:14px; }
  .aviso--fin .aviso__card::before{ height:44px; }
  .aviso--fin .aviso__cabeza{ margin-bottom:6px; }
  .aviso--fin .aviso__sello{ width:52px; height:52px; box-shadow:0 0 0 5px #fff, 0 6px 14px -6px var(--aviso-c); }
  .aviso--fin .aviso__ico{ width:30px; height:30px; }
  .aviso--fin .aviso__luego{ margin-top:8px; }
  .aviso--fin .aviso__acc{ margin-top:12px; }
}
/* Teléfonos bajos (360 × 740, 360 × 640…): sello y márgenes más chicos. */
@media (max-width: 599px) and (max-height: 760px){
  .aviso{ padding:10px; }
  .aviso__card{ padding:16px 16px 18px; }
  .aviso__card::before{ height:50px; }
  .aviso__cabeza{ margin-bottom:8px; }
  .aviso__sello{ width:60px; height:60px; box-shadow:0 0 0 5px #fff, 0 8px 16px -6px var(--aviso-c); }
  .aviso__ico{ width:34px; height:34px; }
  .aviso__sprite{ width:46px; height:46px; }
  .aviso__t{ font-size:23px; }
  .aviso__x{ margin-top:8px; font-size:17px; line-height:1.42; }
  .aviso__quedan{ margin-top:10px; padding:4px 14px; font-size:17px; }
  .aviso__senal{ margin-top:10px; padding:7px 12px; font-size:16.5px; }
  .aviso__senal .ico{ width:20px; height:20px; }
  .aviso__senal + .aviso__x{ margin-top:8px; font-size:16.5px; }
  .aviso__luego{ margin-top:8px; font-size:16.5px; }
  .aviso__acc{ margin-top:14px; }
  .aviso .aviso__btn{ min-height:48px; font-size:18px; }
  .aviso--fin .aviso__card::before{ height:44px; }
  .aviso--fin .aviso__sello{ width:52px; height:52px; }
  .aviso--fin .aviso__ico{ width:30px; height:30px; }
}
/* Red de seguridad: la tarjeta nunca es más alta que el espacio del aviso. Si aun así no cabe, solo
   la explicación se desplaza por dentro: el sello, el título y el botón siempre quedan a la vista (el
   botón tiene el foco al abrir, y antes eso desplazaba el aviso y escondía el sello y el título). */
.aviso__card{
  display:flex;
  flex-direction:column;
  max-height:100%;
}
.aviso__card > *{ flex:none; }
.aviso__card > .aviso__x{
  flex:0 1 auto;
  min-height:calc(3lh + 2px);
  overflow-y:auto;
  overscroll-behavior:contain;
}
@media (prefers-reduced-motion: reduce){
  .aviso, .aviso__card, .aviso__sello, .aviso__sprite, .aviso__confeti i, .aviso__cuenta{ animation:none !important; }
  .aviso__confeti, .aviso__cuenta{ display:none; }
}

/* ==========================================================================
   3. Resultados
   ========================================================================== */
.res-wrap{
  max-width:var(--app-max);
  margin:0 auto;
  padding:56px var(--app-gutter) 96px;
}
.res-hero{
  display:grid;
  grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr);
  gap:64px;
  align-items:end;
}
.res-hero__main{ min-width:0; }
.res-level{
  margin:0;
  font-weight:700;
  font-size:clamp(52px, 7.6vw, 100px);
  line-height:1.02;
  letter-spacing:-.025em;
  overflow-wrap:anywhere;
}
.res-desc{ max-width:50ch; margin:20px 0 0; font-size:17px; line-height:1.55; color:var(--app-ink-2); }
.res-meta{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
  gap:16px 28px;
  margin:36px 0 0;
}
.res-meta__item{ border-top:1px solid var(--app-line-2); padding-top:10px; min-width:0; }
.res-meta dt{ font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--app-muted); }
.res-meta dd{ margin:4px 0 0; font-size:16px; font-weight:500; overflow-wrap:anywhere; }

.res-score{
  padding:28px 30px 26px;
  border:1px solid var(--app-line);
  border-radius:var(--app-radius);
  background:var(--app-paper);
}
.res-score__label{ margin:0; font-size:12.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--app-muted); }
.res-score__num{
  margin:10px 0 0;
  font-size:clamp(64px, 7.6vw, 104px);
  font-weight:700;
  line-height:1;
  letter-spacing:-.03em;
  white-space:nowrap;
}
.res-score__total{ color:var(--app-muted); font-size:.45em; font-weight:600; letter-spacing:-.01em; }
.res-score__pct{ margin:10px 0 0; font-size:22px; font-weight:600; letter-spacing:-.01em; }
.res-scale{ margin-top:22px; }
.res-scale__bar{
  position:relative;
  height:6px;
  background:var(--app-line);
  border-radius:3px;
}
.res-scale__fill{
  position:absolute;
  left:0; top:0; bottom:0;
  background:var(--app-ink);
  border-radius:3px;
}
.res-scale__line{ position:absolute; top:-4px; bottom:-4px; width:1px; background:var(--app-line-2); }
.res-scale__ticks{ position:relative; height:18px; margin-top:8px; font-size:12px; color:var(--app-muted); font-variant-numeric:tabular-nums; }
.res-scale__tick{ position:absolute; top:0; transform:translateX(-50%); }

.res-bar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px 24px;
  margin:48px 0 0;
  padding:18px 0;
  border-top:1px solid var(--app-line-2);
  border-bottom:1px solid var(--app-line);
}
.res-envio{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 16px; min-width:0; flex:1 1 320px; }
.res-envio__msg{ margin:0; font-size:15px; line-height:1.5; display:flex; align-items:baseline; gap:10px; }
.res-envio__msg::before{
  content:"";
  flex:none;
  width:8px; height:8px;
  border-radius:50%;
  border:1px solid currentColor;
  transform:translateY(-1px);
}
.res-envio__msg.is-busy::before{ animation:app-parpadeo 1s steps(2) infinite; background:currentColor; }
.res-envio__msg:focus{ outline:none; }
.res-envio__msg.is-ok{ color:var(--app-ok); font-weight:600; }
.res-envio__msg.is-ok::before{ background:currentColor; }
.res-envio__msg.is-off{ color:var(--app-muted); }
/* «⚠ No se pudo enviar todavía: no apaguen el computador…»: bien visible (ámbar) hasta que se guarde. */
.res-envio__msg.is-queue{ color:#8A4B00; font-weight:600; }
.res-envio__msg.is-bad{ color:var(--app-bad); font-weight:600; }
/* El texto ya empieza con ✓ o ⚠: sin el punto delante. */
.res-envio__msg.is-ok::before,
.res-envio__msg.is-queue::before,
.res-envio__msg.is-bad::before{ display:none; }
#app .res-envio__retry{ min-height:36px; padding:0 16px; font-size:14px; }
.res-actions{ display:flex; flex-wrap:wrap; gap:10px; }
@keyframes app-parpadeo{ 50%{ opacity:.2; } }

.res-sec{ margin-top:64px; }
.res-sec__head{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  justify-content:space-between;
  gap:6px 24px;
  margin-bottom:18px;
}
.res-sec__title{
  margin:0;
  font-weight:700;
  font-size:30px;
  line-height:1.05;
  letter-spacing:-.02em;
}
.res-sec__note{ margin:0; font-size:14px; color:var(--app-muted); max-width:60ch; }

/* Por tema */
.res-temas{ list-style:none; margin:0; padding:0; border-top:1px solid var(--app-line-2); }
.res-tema{
  display:grid;
  grid-template-columns:minmax(160px, 240px) minmax(0, 1fr) 118px 112px;
  align-items:center;
  gap:24px;
  padding:16px 0;
  border-bottom:1px solid var(--app-line);
}
.res-tema__name{ font-size:16px; font-weight:500; }
.res-tema__bar{
  position:relative;
  height:6px;
  background:var(--app-line);
  border-radius:3px;
  overflow:hidden;
}
.res-tema__fill{
  position:absolute;
  left:0; top:0; bottom:0;
  background:var(--app-ink);
  border-radius:3px;
}
.res-tema__count{ display:flex; align-items:baseline; justify-content:flex-end; gap:10px; font-variant-numeric:tabular-nums; }
.res-tema__count strong{ font-weight:600; }
.res-tema__pct{ font-size:13px; color:var(--app-muted); min-width:4.5ch; text-align:right; }
.res-tema__tag{
  justify-self:start;
  padding:4px 10px;
  border:1px solid var(--app-ink);
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.res-tema__tag--empty{ border:0; padding:0; }
.res-tema.is-weak .res-tema__name{ font-weight:600; }

/* Revisión: laberinto + programa elegido (+ correcto si se revelan) */
.res-rev{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:16px;
}
.res-rev--full{ grid-template-columns:repeat(auto-fill, minmax(440px, 1fr)); }
.rev{
  display:flex;
  flex-direction:column;
  min-width:0;
  border:1px solid var(--app-line);
  border-radius:var(--app-radius);
  background:var(--app-white);
  overflow:hidden;
}
.rev--ok{ border-top:2px solid var(--app-ok); }
.rev--bad{ border-top:2px solid var(--app-bad); }
.rev--none{ border-top:2px solid var(--app-line-2); }
.rev__imgs{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  padding:14px 14px 12px;
  border-bottom:1px solid var(--app-line);
}
.rev__imgs:has(> .rev__fig:nth-child(3)){ grid-template-columns:repeat(3, minmax(0, 1fr)); }
.rev__fig{ margin:0; min-width:0; display:flex; flex-direction:column; gap:6px; }
.rev__cap{
  font-size:11.5px;
  font-weight:600;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--app-muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.rev__fig.is-ok .rev__cap{ color:var(--app-ok); }
.rev__fig.is-bad .rev__cap{ color:var(--app-bad); }
.rev__board{ min-width:0; }
.rev__board .board-frame{ border-radius:min(12px, 5%); }
.rev__pic{
  aspect-ratio:1 / 1;
  border:1px solid var(--app-line);
  border-radius:var(--app-radius);
  background:#fff;
}
.rev__pic img{ position:absolute; inset:0; }
.rev__pic--prog img{ inset:6px; width:calc(100% - 12px); height:calc(100% - 12px); object-position:left top; }
.rev__fig.is-ok .rev__pic{ border-color:var(--app-ok); }
.rev__fig.is-bad .rev__pic{ border-color:var(--app-bad); }
.rev__pic.is-missing{ padding:10px; }
.rev__pic.is-missing .pic__alt{ font-size:12.5px; line-height:1.4; }
.rev__body{ padding:12px 14px 14px; display:grid; gap:4px; min-width:0; }
.rev__head{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:2px 10px; }
.rev__num, .rev__res{ white-space:nowrap; }
.rev__num{ font-weight:600; font-size:15px; }
.rev__res{ display:inline-flex; align-items:center; gap:5px; font-size:14px; font-weight:600; }
.rev__res.is-ok{ color:var(--app-ok); }
.rev__res.is-bad{ color:var(--app-bad); }
.rev__res.is-none{ color:var(--app-muted); font-weight:500; }
.rev__tema{ margin:0; font-size:14px; color:var(--app-muted); }
.rev__plist{
  max-height:260px;
  padding:8px;
  border:1px solid var(--app-line);
  border-radius:var(--app-radius);
  background:#fff;
  overflow:auto;
}
.rev__fig.is-ok .rev__plist{ border-color:var(--app-ok); }
.rev__fig.is-bad .rev__plist{ border-color:var(--app-bad); }
.rev__det{ margin:2px 0 0; font-size:14px; color:var(--app-ink-2); }
.rev__why{ margin:6px 0 0; font-size:15px; line-height:1.55; color:var(--app-ink-2); }
.rev__why strong{ font-weight:600; }

/* ==========================================================================
   Responsivo
   ========================================================================== */
@media (min-width: 600px){
  .opts{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}

/* Escritorio con muy poca altura (< 500 px, p. ej. zoom 150 % o más): laberinto fijo a la izquierda,
   opciones 2 × 2 con scroll. El tablero se limita al alto que queda entre la barra y el pie pegajoso
   (22 px de separación + su pie de ~62 px + el pie de la prueba ~70 px + margen): así, al bajar para
   pulsar «Ejecutar», el contenedor no lo empuja bajo la barra mientras camina el pollito. */
@media (min-width: 1000px){
  .qmini{ display:none; }
  .qwork{ grid-template-columns:minmax(0, 2fr) minmax(0, 3fr); gap:32px; }
  .qwin{
    position:sticky;
    top:calc(var(--qbar-h) + 2px + 20px);
    width:min(100%, calc((100dvh - var(--qbar-h) - 190px - var(--qdir-h, 0px)) * var(--board-ar)));
  }
}

/* Escritorio: la pregunta entera cabe en una pantalla, sin desplazarse.
   Arriba el enunciado; a la izquierda el laberinto (cuadrado, tan grande como
   quepa); a la derecha las cuatro opciones, SIEMPRE en 2 × 2 (A B arriba, C D
   abajo), como pidió la docente. Las cuatro tarjetas miden siempre lo mismo, así
   los programas (mismo lienzo) se ven a la misma escala. El programa ocupa toda la
   tarjeta: la letra y la lupa van en las esquinas de arriba. Con programas muy
   altos (app.js fija --prog-h) cada fila mide al menos lo necesario para leerlos
   y se desplaza solo el recuadro de opciones («Ver más abajo»).
   Desde 500 px de alto (1366 × 657 con zoom 125 % = 1093 × 526; 1280 × 649 al 125 % = 1024 × 519):
   con menos de 600 px se compacta (ver abajo). app.js (MQ_ESCRITORIO) usa este mismo criterio. */
@media (min-width: 1000px) and (min-height: 500px){
  .quiz{
    height:100vh;
    height:100dvh;
    min-height:0;
    display:grid;
    grid-template-rows:auto minmax(0, 1fr) auto;
  }
  .qmain{
    max-width:none;
    min-height:0;
    padding:12px var(--app-gutter);
    display:grid;
    grid-template-rows:auto minmax(0, 1fr);
    gap:10px;
  }
  .qtext{ margin:0; font-size:22px; }
  .qtitle{ margin:0; }
  .qwork{
    min-height:0;
    container:qwork / size;
    grid-template-columns:auto minmax(0, 1fr);
    grid-template-rows:minmax(0, 1fr);
    gap:28px;
    align-items:stretch;
  }
  /* 64px = pie (52) + separación: el tablero y su pie caben en el alto disponible.
     --qdir-h: la línea «El pollito mira hacia…» bajo el tablero (0 si no está). */
  .qwin{
    position:static;
    align-self:start;
    width:min(calc((100cqh - 64px - var(--qdir-h, 0px)) * var(--board-ar)), 30cqw);
    max-width:none;
  }
  /* Poco alto: el tablero queda angosto y el mensaje de su pie puede ocupar 3 líneas (71 px). */
  @container qwork (max-height: 420px){
    .qwin{ width:min(calc((100cqh - 84px - var(--qdir-h, 0px)) * var(--board-ar)), 30cqw); }
  }
  /* Aviso de «no se puede guardar» encima del enunciado. */
  .qmain--aviso{ grid-template-rows:auto auto minmax(0, 1fr); }
  .qmain__aviso{ margin:0; padding:8px 14px; }
  .qright{ min-height:0; display:flex; flex-direction:column; }
  .qpanel{ flex:1; min-height:0; }
  .qeditor{ flex:1; height:auto; min-height:0; }
  /* «¡Inténtalo de nuevo!» y la pista «Recuerda que…» en el mismo párrafo: el recuadro mide una
     línea menos y le quita menos alto al editor (o a las opciones). */
  .qresult__t{ display:inline; margin-right:6px; }
  .qresult__t .ico{ display:inline-block; vertical-align:-3px; margin-right:6px; }
  .qresult__x{ display:inline; margin:0; }
  .qright__label{ margin-bottom:10px; }
  /* En elegir el rótulo repite el enunciado: solo para lectores de pantalla (más alto para los programas). */
  .qpanel--elegir > .qright__label{
    position:absolute;
    width:1px; height:1px;
    margin:-1px; padding:0;
    overflow:hidden;
    clip-path:inset(50%);
    white-space:nowrap;
  }
  .opts-wrap{ flex:1; min-height:0; display:flex; flex-direction:column; }
  /* Con programas muy altos (app.js fija --prog-h: alto natural × 0,165 + marco) cada fila mide al
     menos eso, así se leen; si las dos filas no caben, se desplaza solo el recuadro de opciones. */
  /* El relleno (compensado con margen negativo) deja ver el contorno de foco junto al borde. */
  .opts-box{ flex:1; min-height:0; container:opts / size; overflow-y:auto; overscroll-behavior:contain; margin:-5px; padding:5px; }
  .opts{
    height:auto;
    min-height:100%;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    grid-template-rows:repeat(2, max(var(--prog-h, 0px), calc((100cqh - 10px) / 2)));
    gap:10px;
  }
  .opt{ min-height:0; }
  /* El programa usa toda la tarjeta (centrado); la letra, la ✗ y la lupa van en las esquinas, en
     las franjas de 48 px de los lados (el programa nunca queda debajo). 14 px = relleno + borde
     (MARCO_OPCION en app.js). */
  .opt__pick{ display:block; position:relative; height:100%; padding:6px 48px; }
  .opt__badge{ position:absolute; left:8px; top:8px; z-index:1; }
  .opt__mal{ left:8px; top:48px; }
  .opt__zoom{ left:auto; right:8px; top:8px; }
  .opt__img{ height:100%; }
  .opt__img img{ position:absolute; inset:0; height:100%; object-position:center top; }
  .opt__img.is-missing{ min-height:0; }

  .qfoot{ position:static; }
  .qfoot__in{ padding-top:10px; padding-bottom:10px; }
}

@media (min-width: 1000px) and (min-height: 500px) and (max-height: 700px){
  .qtext{ font-size:20px; }
  .qmain{ padding-top:12px; padding-bottom:12px; gap:10px; }
}

/* Escritorio bajo (500–599 px: zoom 110–125 % en 1366 × 657, 125 % en 1917 × 757): todo más ceñido
   para que el tablero, el editor y «Ejecutar»/«Comprobar» quepan sin desplazarse. */
@media (min-width: 1000px) and (min-height: 500px) and (max-height: 599.98px){
  :root{ --qbar-h:52px; }
  .qbar__who-group{ line-height:1.2; }
  .qtext{ font-size:18px; }
  .qmain{ padding-top:8px; padding-bottom:8px; gap:8px; }
  .qwork{ gap:24px; }
  .qwin__foot{ margin-top:8px; }
  .qright__label{ margin-bottom:6px; font-size:12px; }
  .qpanel__head{ margin-bottom:6px; }
  .qacciones{ margin-top:8px; }
  .qaviso{ margin-top:8px; padding:7px 12px; font-size:14px; }
  /* «¡Inténtalo de nuevo!» + «Recuerda que…»: le quita menos alto al editor. */
  .qresult{ margin-top:8px; padding:7px 14px 8px; }
  .qresult__t{ font-size:15px; }
  .qresult__x{ margin-top:2px; font-size:14px; line-height:1.38; }
  .qfoot__in{ padding-top:6px; padding-bottom:6px; }
}

@media (max-width: 1099px){
  .qfoot__hint{ display:none; }
  .qfoot__in{ grid-template-columns:auto minmax(0, 1fr) auto; grid-template-areas:"prev nav next"; }
}

@media (max-width: 999px){
  .reg__grid{ grid-template-columns:minmax(0, 1fr); gap:48px; padding-top:44px; }
  .reg__form{ max-width:560px; }
  .res-hero{ grid-template-columns:minmax(0, 1fr); gap:36px; }
  /* Una sola columna: al ejecutar, la página sube al tablero para ver al pollito; el recuadro
     «¡Inténtalo de nuevo!» / «¡Muy bien!» va justo debajo (antes de las opciones o del editor). */
  .qpanel > .qresult{ order:-1; margin:0 0 14px; }
}

/* Cabecera del quiz entre 760 y 1099 px: el grupo de la derecha (reloj, sonido, salir) no se
   monta sobre el tema; por debajo de 1000 px el reloj y el sonido van sin rótulo. */
@media (max-width: 1099px){
  .qbar{ grid-template-columns:minmax(0, 1fr) minmax(0, auto) max-content; }
}
@media (max-width: 999px){
  .qbar{ gap:14px; }
  .qbar__right{ gap:10px; }
  .qbar__timelabel{ display:none; }
  .qbar__sound{ width:36px; padding:0; justify-content:center; }
  .qbar__sound-txt{ display:none; }
}

@media (max-width: 759px){
  .qbar{ grid-template-columns:auto minmax(0, 1fr) auto; gap:12px; }
  .qbar__who{ display:none; }
  .qwho{ display:block; }
  .qbar__info{ flex-direction:column; align-items:flex-start; gap:0; }
  .qbar__count{ font-size:15px; line-height:1.2; }
  /* Tema · nivel: hasta 2 líneas (antes se cortaba con «…»: «Bucles anidados · Inter…»). */
  .qbar__meta{
    max-width:100%;
    font-size:13px;
    line-height:1.2;
    white-space:normal;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow-wrap:anywhere;
  }
  .qbar__meta::before{ display:none; }
  #app .qbar__exit{ padding:0 12px; }
  :root{ --qfoot-h:calc(86px + env(safe-area-inset-bottom, 0px)); }
  .qfoot__in{
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:"nav nav" "prev next";
    gap:10px 10px;
    padding-top:10px;
    padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  }
  .qnav{ gap:5px; }
  .qnav__dot{ width:10px; height:10px; }
  .qfoot__next{ min-width:0; }
  .qfoot__prev[hidden] + .qfoot__nav{ grid-column:1 / -1; }
  .res-tema{
    grid-template-columns:minmax(0, 1fr) auto;
    grid-template-areas:"name count" "bar bar" "tag tag";
    gap:10px 12px;
  }
  .res-tema__name{ grid-area:name; }
  .res-tema__bar{ grid-area:bar; }
  .res-tema__count{ grid-area:count; }
  .res-tema__tag{ grid-area:tag; }
  .res-tema__tag--empty{ display:none; }
  .res-bar{ flex-direction:column; align-items:stretch; }
  .res-envio{ flex:0 0 auto; }
  .res-actions .btn{ flex:1 1 auto; }
}

@media (max-width: 599px){
  :root{ --app-gutter:16px; }
  .app-top__in{ height:62px; }
  /* Nombres largos: hasta 3 líneas dentro de la barra (la lista completa está en ESTUDIANTES). */
  .app-top__who{
    max-width:58%;
    white-space:normal;
    text-align:right;
    font-size:13px;
    line-height:1.3;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
    overflow:hidden;
    overflow-wrap:anywhere;
  }
  .reg__grid{ padding:36px var(--app-gutter) 64px; gap:40px; }
  .reg__lead{ font-size:16px; margin-bottom:32px; }
  .reg__facts{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:18px 16px; }
  .reg__fact dd{ font-size:30px; }
  .reg__form{ padding:26px 20px 22px; }
  .reg__formtitle{ font-size:24px; }
  .reg__actions .btn{ width:100%; }
  .qtext{ font-size:20px; }
  .qwin{ max-width:none; }
  .qacciones__txt{ flex-basis:100%; order:-1; }
  .qacciones .btn{ flex:1 1 auto; }
  #app .qacciones__run{ min-width:0; }
  .qacciones__sp{ display:none; }
  .opt__pick{ grid-template-columns:28px minmax(0, 1fr); gap:12px; padding:10px; }
  .opt__badge{ width:28px; height:28px; font-size:14px; }
  .opt__zoom{ left:10px; top:48px; width:28px; height:28px; }
  .opt__mal{ left:10px; top:86px; width:28px; height:28px; }
  .res-wrap{ padding-top:36px; }
  .res-desc{ font-size:16px; }
  .res-score{ padding:22px 20px 20px; }
  .res-sec{ margin-top:52px; }
  .res-sec__title{ font-size:26px; }
  .res-rev, .res-rev--full{ grid-template-columns:minmax(0, 1fr); gap:12px; }
  .rev__imgs{ gap:8px; padding:12px 12px 10px; }
  .rev__body{ padding:12px 12px 14px; }
  .dlg__body{ padding:24px 20px 4px; }
  .dlg__title{ font-size:22px; }
  .dlg__actions{ padding:20px; }
  .dlg__actions .btn{ flex:1 1 auto; }
  /* Zoom de un programa en el teléfono: tan ancho como la pantalla lo permite (más grande que
     la tarjeta); un programa alto hace desplazar el diálogo. */
  .dlg--prog{ max-width:calc(100% - 16px); }
  .dlg--prog .dlg__body{ padding-inline:12px; }
  /* En el teléfono el tablero de la página ya usa todo el ancho: el diálogo no lo puede agrandar.
     Se quita la lupa bajo el tablero; la miniatura fija (al bajar) sigue abriendo el laberinto,
     tan ancho como en la página (nunca más chico). */
  .qwin__zoom{ display:none; }
  .dlg--zoom:not(.dlg--prog){ max-width:calc(100% - 12px); }
  .dlg--zoom:not(.dlg--prog) .dlg__body{ padding:14px 10px 0; }
  .dlg--zoom:not(.dlg--prog) .dlg__actions{ padding:14px 10px 12px; }
  .zoom__board{ width:min(calc(100dvh - 190px), calc(100vw - 34px)); }
  .zoom__pic--maze img{ width:min(calc(100dvh - 170px), calc(100vw - 36px)); }
  .zoom__pic--prog{ padding:8px; }
  .zoom__pic--prog img{ max-width:calc(100vw - 56px); max-height:none; }
}

@media (max-width: 380px){
  .qbar__count{ font-size:14px; }
  .qnav{ gap:4px; }
  .qnav__dot{ width:9px; height:9px; }
}

@media (prefers-reduced-motion: reduce){
  .qmini, .qprog__fill, .opt, .opt__badge, .opt__zoom{ transition:none; }
  .board-frame *, .walker{ transition:none !important; animation:none !important; }
  .res-envio__msg.is-busy::before{ animation:none; }
}

/* ==========================================================================
   Impresión
   ========================================================================== */
@media print{
  @page{ margin:14mm; }
  html, body, #app{ background:#fff !important; }
  #landing, .dlg, .aviso, .app-top, .res-actions, .res-envio__retry, .qhead, .qfoot{ display:none !important; }
  #app{ min-height:0; font-size:12px; }
  *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; box-shadow:none !important; }
  .res-wrap{ padding:0; max-width:none; }
  .res-hero{ grid-template-columns:minmax(0, 1.25fr) minmax(0, 1fr); gap:28px; }
  .res-level{ font-size:48px; }
  .res-desc{ font-size:13px; }
  .res-score{ background:#fff; }
  .res-score__num{ font-size:56px; }
  .res-bar{ margin-top:18px; padding:8px 0; }
  .res-sec{ margin-top:24px; }
  .res-sec__title{ font-size:20px; }
  .res-tema{ padding:8px 0; }
  .res-tema, .rev, .res-hero, .res-score{ break-inside:avoid; page-break-inside:avoid; }
  .res-rev{ grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .res-rev--full{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  /* En papel no hay desplazamiento: los programas se imprimen completos. */
  .rev__plist{ max-height:none !important; overflow:visible !important; }
  .res-rev .plist{ font-size:10px; gap:2px; }
  .res-rev .plist__l{ padding-left:calc(var(--n, 0) * 8px); }
  .res-rev .plist__b{ padding:2px 6px; max-width:100%; overflow-wrap:anywhere; }
  .res-score__pct{ white-space:nowrap; font-size:18px; }
  .res-envio{ display:none !important; }
}