/* =============================================================================
 * ESTILOS — Simulador Examen UCM PAS
 * =============================================================================
 * Salió de `index.html` en el paso F8 (ROADMAP.md §13.3). **Mudanza pura**: ni
 * una regla cambiada, ni una reordenada.
 *
 * ⚠️ UN SOLO FICHERO, y con el motivo medido — igual que en F6, no por pereza.
 * La partición evidente sería «motor de pieles» / «lo demás», pero **no existe**:
 * por encima del corte hay 11 reglas y las 11 son de pieles, pero por DEBAJO hay
 * **19 reglas más con `data-skin`** (el aspecto propio de pirata y arcade, que no
 * son solo tokens). Subirlas para que cuadre el reparto significaría reordenar la
 * cascada.
 *
 * ⚠️⚠️ Y ahí está la diferencia con los siete pasos anteriores: **el CSS depende
 * del ORDEN**. Una función de JavaScript se iza y da igual dónde viva; una regla
 * CSS que empata en especificidad gana por venir después. Mover reglas de sitio
 * NO es una mudanza pura, es un cambio de comportamiento que ningún test unitario
 * vería.
 *
 * El orden de carga vive en CUATRO sitios que no pueden divergir: `index.html`,
 * `sw.js` (CACHE_FILES), `nginx.conf` (Cache-Control) y `tests/`.
 * ============================================================================= */
/* ── MOTOR DE PIELES · EXCEPCIÓN ACOTADA a «sin variables CSS» (Motor A) ──
   Estos ~30 tokens son la ÚNICA capa con variables CSS. Los valores por
   defecto = piel «Clásica» = la app de siempre (idénticos a los hex que
   sustituyen → bajo Clásica no cambia ni un píxel). Cada piel redefine este
   bloque con :root[data-skin="…"]. En esta tanda solo se tokenizan COLORES;
   radio, grosor y fuentes se dejan literales de momento. */
:root{
  --bg:#e4e8f0; --bg-wide:#c8d0e0; --panel:#ffffff; --panel-2:#f4f6fb; --panel-3:#dde4ee;
  --ink:#111111; --ink-2:#333333; --muted:#555555; --muted-2:#888888;
  --line:#c0c8d8; --line-2:#aabbcc; --line-3:#999999;
  --accent:#1a5fb4; --accent-hover:#144d96; --accent-ink:#ffffff; --accent-2:#1a3a7a;
  --accent-soft:#dbeeff; --accent-soft-2:#cce4ff; --neutral:#1a5fb4; --accent-tint:#f0f6ff;
  --ok:#2a7a38; --ok-bg:#aaddb0; --ok-ink:#1a4020;
  --err:#aa2020; --err-bg:#f0a8a8; --err-ink:#660000;
  --warn:#c8a000; --warn-bg:#fff3cc; --warn-ink:#5c3000;
  /* ── Paleta tokenizada en la v1.32.0 ────────────────────────────────────
     Hasta aquí las cinco pieles fueron todas CLARAS, así que ~590 colores
     vivían en hex por todo el fichero sin que se notara. Una piel OSCURA los
     deja como islas blancas o como texto negro sobre negro, así que se
     tokenizaron en bloque. Cada token conserva el valor del miembro MÁS USADO
     de su grupo, y los grupos se formaron por CERCANÍA (Δ≤16 por canal), no
     por tono: así ninguna fusión llega a notarse y las cinco pieles anteriores
     quedan exactamente como estaban. Las pieles claras NO redefinen nada de
     esto: heredan de aquí. Tintes de caja: */
  --soft-info:#f0f4ff; --soft-info-2:#e8eaf0;
  --soft-blue:#c0d8f8; --soft-blue-2:#a8ccf0; --soft-blue-3:#dbeaff;
  --soft-warn:#fff8e1; --soft-warn-2:#f5d878;
  --soft-ok:#c8eacc;   --soft-ok-2:#e8f4e8;
  --soft-err:#ffe0cc;  --soft-err-2:#ffdddd; --soft-red:#f4c0c0;
  --soft-violet:#efe8f8; --soft-violet-2:#c0b8f0; --soft-violet-3:#ddd8f8;
  --soft-grey:#f0f0f0;
  /* Tintas que van DENTRO de esas cajas: */
  --ink-amber:#7a4400; --ink-blue:#2d1e7a; --ink-blue-2:#1a4a90; --ink-violet:#4a2070;
  --ink-grey:#777777; --ink-amber-2:#7a5c00; --ink-amber-3:#5a3e00; --ink-amber-4:#8a3000;
  --ink-blue-3:#0a1e50; --ink-violet-2:#1e0e60; --ink-amber-5:#9a7000; --ink-red:#880000;
  --ink-violet-3:#4a3a88; --ink-blue-4:#1a5fb4; --ink-blue-5:#002277; --ink-blue-6:#002266;
  --ink-blue-7:#666677; --ink-violet-4:#5040a0; --ink-green:#1a4020; --ink-red-2:#660000;
  --ink-blue-8:#1a3a6b; --ink-blue-9:#33415c; --ink-amber-6:#aa5500; --ink-red-3:#550000;
  --ink-violet-5:#6a3a8a; --ink-green-2:#1a5a1a;
  --radius:12px; --bw:2px;
  --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --font-mono:ui-monospace,'SF Mono',Menlo,monospace;
  --disp-tt:none; --disp-ls:0;
}

/* ═══ PIELES · cada bloque redefine tokens; se activan con data-skin en <html> ═══
   Rebranding «Sexy Foxy» (1.12.0). Terminal (piel oscura) llega en la 2ª tanda.
   En esta tanda las pieles cambian COLOR y FUENTE; radio/grosor/decoración → 1b-3. */
:root[data-skin="pirata"]{
  --bg:#e3d0a4; --bg-wide:#d3ba86; --panel:#f2e6c4; --panel-2:#e7d4a6; --panel-3:#e2d1a0;
  --ink:#2f2012; --muted:#7c6437; --muted-2:#9a8253;
  --line:#a9884f; --line-2:#c0a066; --line-3:#8c6f38;
  --accent:#123f63; --accent-hover:#0d3150; --accent-ink:#f4e8c9; --accent-2:#b8862f;
  --accent-soft:#e7dab2; --accent-soft-2:#d3c39a; --neutral:#123f63; --accent-tint:#ece0bb;
  --ok:#4c7a38; --ok-bg:#d6e2ac; --ok-ink:#2f4d1e;
  --err:#9e3327; --err-bg:#e7c6a3; --err-ink:#5e1a12;
  --warn:#b8862f; --warn-bg:#efdca6; --warn-ink:#5c3f10;
  --radius:9px; --bw:2px;
  --font-body:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --font-display:"Copperplate","Copperplate Gothic Bold","Palatino Linotype",Palatino,Georgia,serif;
  --disp-tt:uppercase; --disp-ls:.07em;
}
:root[data-skin="arcade"]{
  --bg:#cbd79a; --bg-wide:#b9c884; --panel:#b3c583; --panel-2:#a7ba76; --panel-3:#9fb26e;
  --ink:#12320f; --muted:#3c5730; --muted-2:#4f6b40;
  --line:#12320f; --line-2:#2c4a22; --line-3:#12320f;
  --accent:#e0392a; --accent-hover:#b52c20; --accent-ink:#fff7e6; --accent-2:#f7c700;
  --accent-soft:#c9d98f; --accent-soft-2:#b0d06a; --neutral:#3c5730; --accent-tint:#bccd82;
  --ok:#2f7d2f; --ok-bg:#bfe08a; --ok-ink:#173d17;
  --err:#c62828; --err-bg:#eeb4a6; --err-ink:#5a1210;
  --warn:#c98a00; --warn-bg:#f2d774; --warn-ink:#4d3600;
  --radius:0px; --bw:3px;
  --font-body:"Courier New",ui-monospace,monospace;
  --font-display:Impact,"Arial Black","Haettenschweiler",sans-serif;
  --disp-tt:uppercase; --disp-ls:.04em;
}
:root[data-skin="comic"]{
  --bg:#fff6df; --bg-wide:#ffedc4; --panel:#ffffff; --panel-2:#fff0d0; --panel-3:#ffe7b8;
  --ink:#141414; --muted:#5b5b5b; --muted-2:#7a7a7a;
  --line:#141414; --line-2:#141414; --line-3:#3a3a3a;
  --accent:#2b6cd4; --accent-hover:#1f52a6; --accent-ink:#ffffff; --accent-2:#ffd23f;
  --accent-soft:#d7e6fb; --accent-soft-2:#bcd6f7; --neutral:#2b6cd4; --accent-tint:#e8f1fd;
  --ok:#159a37; --ok-bg:#c9f2c3; --ok-ink:#0c5a20;
  --err:#e5322d; --err-bg:#ffd2cf; --err-ink:#8a1512;
  --warn:#f0a500; --warn-bg:#ffe9a8; --warn-ink:#6a4a00;
  --radius:13px; --bw:3px;
  --font-body:"Comic Sans MS","Comic Sans","Chalkboard SE",ui-rounded,sans-serif;
  --font-display:Impact,"Arial Black","Haettenschweiler",sans-serif;
  --disp-tt:uppercase; --disp-ls:.01em;
}
:root[data-skin="anime"]{
  --bg:#eceae3; --bg-wide:#dcd9cf; --panel:#faf9f5; --panel-2:#e6e4db; --panel-3:#dedbd0;
  --ink:#16130f; --muted:#6b675e; --muted-2:#847f74;
  --line:#16130f; --line-2:#2a2620; --line-3:#4a453c;
  --accent:#ec5a1c; --accent-hover:#c34712; --accent-ink:#16130f; --accent-2:#1f6f9e;
  --accent-soft:#e7e4d8; --accent-soft-2:#f6d3bf; --neutral:#1f6f9e; --accent-tint:#efece1;
  --ok:#2f8f4f; --ok-bg:#cfe6cf; --ok-ink:#184a29;
  --err:#d21f1f; --err-bg:#f2ccc6; --err-ink:#6e1210;
  --warn:#c98a00; --warn-bg:#f0e2b8; --warn-ink:#4d3600;
  --radius:5px; --bw:2px;
  --font-body:"Helvetica Neue",Arial,"Liberation Sans",system-ui,sans-serif;
  --font-display:"Arial Narrow","Roboto Condensed",Impact,"Haettenschweiler",sans-serif;
  --disp-tt:uppercase; --disp-ls:.02em;
}
/* ── TERMINAL (v1.32.0): la PRIMERA piel oscura ────────────────────────────
   Es la que obligó a tokenizar la paleta entera: las cinco anteriores son
   claras, así que ~590 colores fijos en hex daban igual. Aquí se invierte
   todo, y por eso esta piel redefine también los `--soft-*` (tintes de caja,
   que pasan a fondos oscuros) y los `--ink-*` (las tintas que van dentro, que
   pasan a claras). Fósforo verde sobre negro, monoespaciada y sin curvas
   (`--radius:0`), que es lo que hace que se lea como una consola. */
/* ── UCM (v1.40.3) ─────────────────────────────────────────────────────────
   Piel institucional, SOBRIA por encargo. Colores corporativos exactos:
     Rojo UCM  #B71234 (Pantone 200 C)   Plata  #979492
     Negro     #1E1E1E (Pantone Black C) Oro    #9B8942

   Tres decisiones que no son obvias:

   · **`--err` NO es el rojo corporativo, sino un granate más profundo.**
     `--accent` (botones principales) sí lo es, y si los dos fueran el mismo
     rojo, un botón de acción y un fallo se leerían igual — en una app donde
     rojo = respuesta incorrecta, eso es inaceptable. El granate mantiene la
     familia cromática sin colisionar.
   · **El oro va EXACTO (#9B8942) aunque dé 3,47 sobre blanco.** Es color de
     marca: retocarlo para ganar contraste sería inventarse la identidad. Y aun
     así mejora al `--warn` de la Clásica (2,48). Se usa en rellenos y bordes,
     no como texto pequeño.
   · **La plata no se usa tal cual para texto.** #979492 sobre blanco da 2,9, que
     no es legible; se emplea oscurecida en `--muted*` y aclarada en `--line*`,
     que es donde una plata funciona: estructura, no tinta.

   Como el resto de pieles CLARAS, redefine los 33 tokens de identidad y hereda
   los tintes de caja de `:root`, que ya son claros. Solo Terminal necesita los
   70, por ser oscura: ahí un token heredado sería una isla blanca. */
:root[data-skin="ucm"]{
  --bg:#f4f3f2; --bg-wide:#e6e3e1; --panel:#ffffff; --panel-2:#f9f8f7; --panel-3:#ebe8e6;
  --ink:#1e1e1e; --muted:#5f5c5a; --muted-2:#767270;
  --line:#cbc8c6; --line-2:#dedbd9; --line-3:#a9a5a3;
  --accent:#b71234; --accent-hover:#8e0e28; --accent-ink:#ffffff; --accent-2:#9b8942;
  --accent-soft:#f7e6ea; --accent-soft-2:#efd3da; --neutral:#6b6764; --accent-tint:#fbf2f4;
  --ok:#2f6b3f; --ok-bg:#dbe8dd; --ok-ink:#1e4529;
  --err:#8f1229; --err-bg:#f5dde2; --err-ink:#6d0c1e;
  --warn:#9b8942; --warn-bg:#f1ead6; --warn-ink:#544a1e;
  --radius:8px; --bw:2px;
  --font-body:-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  --font-display:Georgia,'Times New Roman','Liberation Serif',serif;
  --disp-tt:none; --disp-ls:.01em;
}
/* Sobriedad institucional: los títulos en serif con un filete rojo debajo, que
   es el recurso gráfico de toda la papelería de la UCM. Nada de sombras ni
   mayúsculas forzadas, al revés que Pirata o Terminal. */
:root[data-skin="ucm"] .screen-title,
:root[data-skin="ucm"] .app-title{font-family:var(--font-display)}
:root[data-skin="ucm"] .screen-title{border-bottom:2px solid var(--accent);padding-bottom:5px}

:root[data-skin="terminal"]{
  --bg:#05080a; --bg-wide:#010304; --panel:#0a1210; --panel-2:#0e1a16; --panel-3:#13241d;
  --ink:#3dff6e; --ink-2:#2ee060; --muted:#22bf52; --muted-2:#1da849;
  --line:#1b4a2e; --line-2:#246b3f; --line-3:#2e8f52;
  --accent:#3dff6e; --accent-hover:#7dffa8; --accent-ink:#04120a; --accent-2:#00cc44;
  --accent-soft:#0d2a1a; --accent-soft-2:#123c24; --neutral:#22bf52; --accent-tint:#081d13;
  --ok:#3dff6e; --ok-bg:#0d2a1a; --ok-ink:#7dffa8;
  --err:#ff5f56; --err-bg:#2c0f0d; --err-ink:#ff9d97;
  --warn:#ffc233; --warn-bg:#2b2410; --warn-ink:#ffd97a;
  /* Tintes de caja: de pastel claro a fondo oscuro teñido */
  --soft-info:#0a1620; --soft-info-2:#0d1a18;
  --soft-blue:#102a3c; --soft-blue-2:#0e2434; --soft-blue-3:#0c1e2c;
  --soft-warn:#241f0d; --soft-warn-2:#3a3110;
  --soft-ok:#0d2a1a;   --soft-ok-2:#0a2014;
  --soft-err:#2c1410;  --soft-err-2:#30120f; --soft-red:#3a1512;
  --soft-violet:#191338; --soft-violet-2:#221a44; --soft-violet-3:#1d1640;
  --soft-grey:#141a18;
  /* Las tintas de dentro, al revés: de oscuras a claras, cada una en su tono */
  --ink-amber:#ffc233;  --ink-amber-2:#ffd166; --ink-amber-3:#e8b04d;
  --ink-amber-4:#ff9d5c; --ink-amber-5:#ffd97a; --ink-amber-6:#ffb066;
  --ink-blue:#a8b4ff;   --ink-blue-2:#66d9ff;  --ink-blue-3:#8fb8ff;
  --ink-blue-4:#66c2ff; --ink-blue-5:#93b0ff;  --ink-blue-6:#8aa8ff;
  --ink-blue-7:#9aa8b4; --ink-blue-8:#7fb8e0;  --ink-blue-9:#93aac4;
  --ink-violet:#d0a6ff; --ink-violet-2:#b9a0ff; --ink-violet-3:#c2b0ff;
  --ink-violet-4:#c9a6ff; --ink-violet-5:#dcaeff;
  --ink-red:#ff8f8f;    --ink-red-2:#ff9d97;   --ink-red-3:#ffa8a8;
  --ink-green:#7dffa8;  --ink-green-2:#8fffb5;
  --ink-grey:#8fa89b;
  --radius:0px; --bw:1px;
  --font-body:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;
  --font-display:ui-monospace,"SF Mono",Menlo,Consolas,"Courier New",monospace;
  --disp-tt:uppercase; --disp-ls:.09em;
}
/* Líneas de barrido, como el Arcade tiene su trama: son 2 px de gradiente
   repetido, sin coste de imagen ni de red. */
:root[data-skin="terminal"] .wrap{
  background-image:repeating-linear-gradient(0deg,rgba(61,255,110,.035) 0 1px,transparent 1px 3px)}
:root[data-skin="terminal"] .screen-title,
:root[data-skin="terminal"] .app-title{text-shadow:0 0 6px rgba(61,255,110,.45)}
/* ── Campos de entrada en pantallas TÁCTILES ──────────────────────────────
 *
 * ⚠️ Los 16 px NO son estéticos, son el umbral exacto de iOS Safari: al enfocar
 * un campo con menos, **amplía la página él solo** y no siempre la devuelve. La
 * app tiene 30 campos entre 11 y 15 px (3 en el HTML y 27 generados por JS con
 * estilo en línea), así que el problema es real.
 *
 * Durante mucho tiempo esto se tapó con `maximum-scale=1` en el viewport, que
 * evita el salto… **bloqueando también el zoom con dos dedos**. Es decir: se
 * pagaba con accesibilidad un problema que se puede resolver aquí.
 *
 * `pointer: coarse` acota la regla a lo que se maneja con el dedo. En el PC los
 * campos siguen a su tamaño compacto de siempre, que es donde ese diseño tiene
 * sentido; en móvil y tableta suben a 16, que además son objetivos más cómodos.
 *
 * El `!important` es necesario y no es pereza: los 27 campos generados por JS
 * llevan el tamaño en el atributo `style`, y un estilo en línea gana a cualquier
 * regla de la hoja. Cambiarlos uno a uno alteraría también el aspecto en
 * escritorio, que es justo lo que no queremos.
 */
@media (pointer: coarse) {
  input, textarea, select { font-size: 16px !important }
}

/* ── Reset y base ──────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0 }
html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.5;
}
.wrap { max-width: 600px; margin: 0 auto; padding: 0 0 100px }

/* ── Layout para pantallas anchas (> 768px) ───────────────────────────────
   La app mantiene su columna de 600px pero con más aire y presencia visual. */
@media (min-width: 768px) {
  body { background: var(--bg-wide) }
  .wrap {
    box-shadow: 0 4px 40px rgba(0,0,0,0.15);
    border-radius: 14px;
    overflow: clip; /* clip (no hidden): recorta el border-radius sin crear scroll container, para no romper el sticky de .stt/.stb */
    margin-top: 24px;
    margin-bottom: 24px;
  }
  .screen { border-radius: 0 }
  /* En s0: los filtros de tema y opciones en dos columnas */
  .g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px }
  /* Cards más amplias */
  .card { padding: 1.1rem 1.25rem }
}

/* ── Layout para pantallas muy anchas (> 1100px) ──────────────────────────
   En pantallas grandes la columna se expande ligeramente. */
@media (min-width: 1100px) {
  .wrap { max-width: 700px }
}

/* ── Pantallas ─────────────────────────────────────────────────────────── */
.screen      { display: none }
.screen.on   { display: block }
.screen-pad  { padding: 1.5rem }

/* Cabecera estándar de pantalla: título + botón volver */
.screen-hdr  { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px }
.screen-title{ font-size: 20px; font-weight: 700; color: var(--ink) }

/* ── Botones de ancho completo ─────────────────────────────────────────── */
.bp { display: block; width: 100%; padding: 14px; border-radius: 12px; font-size: 15px; font-weight: 700; background: var(--accent); color:var(--accent-ink); text-align: center; cursor: pointer; user-select: none }
.bp:hover { background: var(--accent-hover) }
.bs { display: block; width: 100%; padding: 13px; border-radius: 12px; font-size: 15px; font-weight: 700; background: var(--panel); color: var(--ink); text-align: center; cursor: pointer; user-select: none; border: 2px solid var(--line-3) }
.bs:hover { background:var(--soft-info) }
.bd { display: block; width: 100%; padding: 13px; border-radius: 12px; font-size: 15px; font-weight: 700; background: var(--panel); color: var(--err); text-align: center; cursor: pointer; user-select: none; border: 2px solid var(--err) }
.bd:hover { background:var(--soft-err-2) }

/* ── Botones inline (no ancho completo) ────────────────────────────────── */
/* Base inline */
.btn-i {
  display: inline-flex; align-items: center; font-weight: 700;
  border-radius: 8px; cursor: pointer; user-select: none;
}
/* Tamaños */
.btn-sm  { padding: 7px 12px;  font-size: 13px }
.btn-md  { padding: 10px 18px; font-size: 14px; border-radius: 9px }
.btn-xs  { padding: 7px 10px;  font-size: 12px }
/* Variantes de color */
.btn-back    { border: 2px solid var(--line-2); background: var(--panel); color:var(--ink-2) }
.btn-blue-o  { border: 2px solid var(--accent); background: var(--panel); color: var(--accent) }
.btn-blue-f  { border: 2px solid var(--accent); background: var(--accent); color:var(--accent-ink) }
.btn-navy-f  { border: 2px solid var(--accent-2); background: var(--accent-2); color:var(--accent-ink) }
.btn-green-o { border: 2px solid var(--ok); background: var(--panel); color: var(--ok-ink) }
/* Gemela en rojo de la verde (v1.31.0): la pareja «↑ agujero / ↓ dominada» del
   veredicto por eje necesitaba las dos, y no había contorno rojo en la familia. */
.btn-red-o   { border: 2px solid var(--err); background: var(--panel); color: var(--err-ink) }
/* Rojo a relleno (v1.33.0): el «aceptar» de los modales que borran algo
   irreversible. A contorno no se distingue del de cancelar de un vistazo. */
.btn-red-f   { border: 2px solid var(--err); background: var(--err); color: var(--accent-ink) }
.btn-orange-o{ border: 2px solid #aa6600; background: var(--panel); color: var(--ink-amber) }
.btn-grey-o  { border: 2px solid var(--line); background: var(--panel); color: var(--muted) }
.btn-amber-f { border: 2px solid #aa6600; background: #aa6600; color:var(--accent-ink) }

/* Navegación de examen */
.bn { flex: 1; padding: 12px 8px; border-radius: 10px; background: var(--panel); color: var(--ink); font-size: 14px; font-weight: 700; text-align: center; cursor: pointer; user-select: none; border: 2px solid var(--line-2) }
.bn:hover { background:var(--soft-info); border-color: var(--accent); color: var(--accent) }
.bn.act { background: var(--accent-soft); border-color: var(--accent); color: var(--accent) }
/* El color va en TOKEN y no en hex (regla dura del proyecto). Llevaba
   `color:#aaa`, que sobre `--soft-grey` da 2,04 y no se lee — en la Clásica
   igual que en cualquier piel clara. Sobrevivió porque el barrido de contraste
   solo se pasaba a Terminal, donde `--soft-grey` es oscuro y el gris claro sí
   contrastaba. Lo destapó la piel UCM al ser la primera CLARA auditada.
   `--muted-2` sube a 3,11 en Clásica y 4,18 en UCM, y sigue leyéndose como
   deshabilitado: el relleno gris y el `not-allowed` ya lo dicen. */
.bn.dis { color: var(--muted-2); background:var(--soft-grey); border-color: var(--line-3); cursor: not-allowed; pointer-events: none }

/* ── Opciones de respuesta ─────────────────────────────────────────────── */
.opt { width: 100%; padding: 13px 14px; border: 2px solid var(--line-2); border-radius: 12px; background: var(--panel); cursor: pointer; display: flex; align-items: flex-start; gap: 10px; user-select: none; margin-bottom: 9px }
.opt:hover { border-color: var(--accent); background: var(--accent-tint) }
.opt.sel { border: 2px solid var(--accent); background: var(--accent-soft-2) }
.oc { width: 28px; height: 28px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: var(--panel-3); color:var(--ink-2); border: 2px solid var(--line-2) }
.opt.sel .oc { background: var(--accent); color:var(--accent-ink); border-color: var(--accent) }

/* ── Cards y estructuras contenedoras ──────────────────────────────────── */
.card   { background: var(--panel); border-radius: 12px; border: 2px solid var(--line); padding: 1rem; margin-bottom: 12px }
.card-lg{ background: var(--panel); border-radius: 14px; border: 2px solid var(--line); padding: 1.25rem; margin-bottom: 14px }

/* ── Grids de stats ────────────────────────────────────────────────────── */
.g2 { display: grid; grid-template-columns: 1fr 1fr;         gap: 10px }
.g3 { display: grid; grid-template-columns: repeat(3, 1fr);  gap: 10px }
.sc { border-radius: 8px; padding: .7rem; text-align: center }
.sv { font-size: 22px; font-weight: 700 }
.sl { font-size: 11px; margin-top: 2px; font-weight: 700 }

/* ── Barras de progreso ────────────────────────────────────────────────── */
.bgr { height: 5px; background: var(--line); border-radius: 3px }
.bgf { height: 100%; border-radius: 3px; transition: width .3s }
.progbar-sm { flex: 1; height: 6px; background:var(--soft-info-2); border-radius: 3px; overflow: hidden }

/* ── Cronómetro ────────────────────────────────────────────────────────── */
.tmr   { font-family: monospace; font-size: 16px; font-weight: 700; padding: 5px 11px; border-radius: 7px; background: var(--accent-soft); color: var(--ink-blue-3); letter-spacing: 1px; border: 2px solid #88aadd; display: inline-block }
.tmr.w { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn) }
.tmr.d { background:var(--soft-err-2);    color: var(--err-ink); border-color: #cc4444; animation: bl 1s infinite }
@keyframes bl { 50% { opacity: .5 } }

/* ── Badges y etiquetas ────────────────────────────────────────────────── */
.bdg { display: inline-block; padding: 3px 9px; border-radius: 20px; font-size: 12px; font-weight: 700; border: 2px solid }
.tg  { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; margin-left: 5px; border: 1px solid }
.tr  { background:var(--soft-violet-3); color: var(--ink-violet-2); border-color: #7060b8 }
.ta  { background:var(--soft-red); color: var(--err-ink);  border-color: #bb4444 }
.tm  { background:var(--soft-blue); color: var(--ink-blue-3);  border-color: #5588cc }

/* Badges inline en cabecera de examen */
.badge-propia { padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; background:var(--soft-ok); color: var(--ok-ink); border: 1px solid var(--ok); margin-left: 2px }
.badge-prueba { padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; background:var(--soft-err); color: var(--ink-amber-4); border: 1px solid #cc6600 }
.badge-vistas { padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 600; background:var(--soft-info-2); color: var(--ink-blue-7);    border: 1px solid var(--line) }
.badge-examen { padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; background:var(--soft-violet-3); color: var(--ink-blue); border: 1px solid #7060b8; margin-left: 2px }
.badge-cuarentena { padding: 2px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; background:var(--soft-warn); color: var(--ink-amber); border: 1px solid #e09000; margin-left: 2px }

/* ── Cabeceras de sección (dentro de cards) ────────────────────────────── */
.section-lbl { font-size: 11px; font-weight: 700; color: var(--muted-2); margin-bottom: 5px }
.section-div { border-top: 1px solid #e8eaf0; margin: 8px 0 }

/* ── Toggles ───────────────────────────────────────────────────────────── */
.toggle-row { display: flex; align-items: center; justify-content: space-between; cursor: pointer; margin-bottom: 6px }
.tog-track  { width: 40px; height: 22px; border-radius: 11px; border: 2px solid var(--line-2); background: var(--line-2); position: relative; transition: background .2s; flex-shrink: 0 }
.tog-dot    { position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: var(--panel); transition: left .2s }

/* ── Caja de info azul ─────────────────────────────────────────────────── */
.info-tip { background: var(--accent-soft); border-radius: 10px; padding: .8rem; margin-bottom: 14px; border: 2px solid #88aadd }

/* ── Cabeceras sticky del examen ───────────────────────────────────────── */
.stt { position: sticky; top: 0; z-index: 20; background: var(--bg); border-bottom: 2px solid var(--line); padding: .9rem 1.25rem .7rem }
.stb { position: sticky; bottom: 0; z-index: 20; background: var(--bg); border-top: 2px solid var(--line); padding: .9rem 1.25rem }

/* ── Mapa de preguntas ─────────────────────────────────────────────────── */
.mpb       { background:var(--soft-info-2); border-bottom: 2px solid #b8c0d0; padding: .85rem 1.25rem }
.mapa-grid { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 10px }
.mapa-lbl  { font-size: 11px; font-weight: 700; margin-bottom: 5px }
.mapa-legend     { display: flex; gap: 14px; font-size: 11px; font-weight: 700; flex-wrap: wrap }
.mapa-legend-dot { display: inline-block; width: 11px; height: 11px; border-radius: 2px; vertical-align: middle; margin-right: 3px }
.mb      { width: 32px; height: 32px; border-radius: 7px; font-size: 12px; font-weight: 700; border: 2px solid #8899aa; background: var(--panel); color:var(--ink-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; user-select: none }
.mb:hover{ border-color: var(--accent); color: var(--accent) }
.mb.mr   { background:var(--soft-ok); color: var(--ok-ink); border-color: #4a8a54 }
.mb.mc   { border: 2px solid var(--accent); color: var(--accent); background: var(--accent-soft) }
.mb.res  { background:var(--soft-violet-3); color: var(--ink-blue); border-color: #7060b8 }
.mb.res.mr{ background:var(--soft-violet-2); color: var(--ink-violet-2); border-color: #5040a0 }
/* Bandera de pregunta dudosa */
.flag-btn{ padding: 2px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; user-select: none; border: 2px solid var(--line); background: var(--panel); color: var(--muted-2) }

/* ── Pregunta y su nota ℹ (aviso de revisión; el 📝 apunte NO se ve aquí) ── */
.q-text  { font-size: 16px; line-height: 1.75; color: var(--ink); font-weight: 600; margin-bottom: 10px; background: var(--panel); padding: 14px 16px; border-radius: 10px; border: 2px solid var(--line) }
.q-note  { font-size: 12px; line-height: 1.5; color: var(--ink-amber-3); background:var(--soft-warn); border: 1px solid #f0c040; border-radius: 7px; padding: 8px 12px; margin-bottom: 6px }

/* ── Filtros de corrección ─────────────────────────────────────────────── */
.fr { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px }
.fb { padding: 6px 12px; font-size: 12px; font-weight: 700; border-radius: 14px; border: 2px solid var(--line-2); background: var(--panel); color:var(--ink-2); cursor: pointer; user-select: none }
.fb:hover { border-color: var(--accent); color: var(--accent) }
.fb.on { background: var(--accent); color:var(--accent-ink); border-color: var(--accent) }
/* Pestañas de s9 (#preg-tabs). Se estiliza vía el CONTENEDOR porque
   setTabPreguntas() reescribe className='fb'/'fb on' y borraría cualquier clase
   extra que se le pusiera a los chips.

   ⚠️⚠️ HISTORIA, que es lo que justifica cómo está hecho ahora: esto fue una
   rejilla AFINADA A MANO cinco veces — 4+3 hasta la v1.8.0; ⭐ la llevó a 4+4;
   🏷 Etiquetas la cuadró en 3×3 en la v1.22.0; la v1.24.0 la devolvió a 4+4 al
   quitar 📈 Métricas; y la v1.39.1 la dejó en 3 columnas con los bordes por
   `:nth-child`. Cada vez que cambiaba el número de pestañas, había que retocarla.

   Y rompió a la sexta: al ocultarle 🧩 Clusters a quien no es administrador
   quedaban OCHO, y `display:none` **no saca al elemento de la cuenta de
   `:nth-child`**, así que los bordes se seguían dibujando sobre nueve posiciones.

   AHORA NO SE CUENTA NADA. Es un flex que envuelve, y cada chip pide
   `flex: 1 1 <base>`: **cada línea se reparte el ancho entera**, tenga los chips
   que tenga. Ocho, nueve o catorce salen bien sin tocar el CSS, y de regalo es
   responsive — en una ventana estrecha caben dos por línea y en una ancha cinco.

   Las juntas NO son bordes: son el `gap`, con el color del contenedor asomando
   por debajo. Por eso no hay reglas por posición, que es lo que había que
   mantener a mano. */
#preg-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: 14px; border: 2px solid var(--line-2); border-radius: 12px; overflow: hidden; background: var(--line-2) }
#preg-tabs .fb { flex: 1 1 150px; display: flex; align-items: center; justify-content: center; text-align: center; border: 0; border-radius: 0; padding: 9px 4px; gap: 3px; min-height: 38px; background: var(--panel) }
/* La línea que dice qué es la pestaña abierta. Discreta y siempre presente: no
   compite con el contenido, pero está antes de que haga falta preguntarse. */
/* Una sola clase para las líneas de «qué es esta pestaña», en las tres pantallas
   con subpestañas. Antes de esto, s3 y s11 no explicaban NADA pese a ser las que
   más números enseñan. */
.ayuda-tab, #preg-ayuda { font-size: 12px; line-height: 1.45; color: var(--muted); background: var(--panel-2); border-left: 3px solid var(--line-2); border-radius: 0 7px 7px 0; padding: 7px 10px; margin: 0 0 12px }

/* ── Tus marcas: la segunda tira de s9 ─────────────────────────────────────
   Mismo destino que las de arriba —cambian el panel— pero MENOS PESO, porque son
   otra cosa: no son de dónde viene la pregunta, sino cómo la has marcado tú. Y
   esas cuatro ya viven como chips dentro de la barra de filtros de cada pestaña,
   así que aquí son atajos, no la única puerta.
   Flujo libre con `flex-wrap`, sin contar cuántas hay: misma lección que arriba. */
#preg-marcas { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: -6px 0 14px }
#preg-marcas .marcas-lbl { font-size: 9.5px; font-weight: 700; letter-spacing: .1em; color: var(--muted-2); padding-right: 2px }
#preg-marcas .mk { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 13px; border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: 11.5px; font-weight: 600; cursor: pointer; user-select: none }
#preg-marcas .mk:hover { border-color: var(--accent); color: var(--accent) }
#preg-marcas .mk.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink) }
#preg-tabs .fb:hover { border-color: var(--line-2); background:var(--soft-info) }
#preg-tabs .fb.on, #preg-tabs .fb.on:hover { background: var(--accent); color:var(--accent-ink); border-color: var(--line-2) }
@media (max-width: 480px) { #preg-tabs .fb { font-size: 11px; padding: 8px 2px } }

/* Subpestañas de s3 y s11 (v1.19.4). Misma chapa que #preg-tabs, pero en UNA
   fila que se reparte sola entre las que haya (grid-auto-flow: column), así que
   sirve igual para 3 que para 4. Se estiliza vía el contenedor porque
   setTabStats()/setTabCoach() reescriben className='fb'/'fb on' y borrarían
   cualquier clase extra del chip. */
.subtabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin-bottom: 14px;
           border: 2px solid var(--line-2); border-radius: 12px; overflow: hidden; background: var(--panel) }
.subtabs .fb { display: flex; align-items: center; justify-content: center; text-align: center;
               border: 0; border-radius: 0; padding: 9px 4px }
.subtabs .fb + .fb { border-left: 2px solid var(--line-2) }
.subtabs .fb:hover { border-color: var(--line-2); background: var(--accent-soft) }
.subtabs .fb.on, .subtabs .fb.on:hover { background: var(--accent); color: var(--accent-ink) }
@media (max-width: 480px) { .subtabs .fb { font-size: 11px; padding: 8px 2px } }

/* ── Diálogo de confirmación ───────────────────────────────────────────── */
.cfm { background:var(--soft-warn); border: 2px solid #d4a820; border-radius: 10px; padding: 1rem }

/* ── Bloques de detalle en corrección (db = detail block) ──────────────── */
.db    { border-radius: 12px; padding: 1rem; margin-bottom: 10px; border: 2px solid }
.db.ok { background: var(--ok-bg); border-color: var(--ok) }
.db.er { background: var(--err-bg); border-color: var(--err) }
.db.bl { background:var(--soft-warn-2); border-color: #9a7000 }
.db.an { background:var(--soft-violet-2); border-color: #5040a0 }
.db.mo { background:var(--soft-blue-2); border-color: #1a50a0 }
/* Reserva sin activar: veladura rayada de "no puntúa" sobre el color de resultado */
.db.rsv-off { background-image: repeating-linear-gradient(135deg, #ffffff66 0 8px, #ffffff00 8px 16px) }
.rsv-band   { background:var(--soft-violet); border: 1px solid #8878cc; color: var(--ink-blue); font-size: 12px; font-weight: 700; border-radius: 7px; padding: 6px 10px; margin-bottom: 8px; text-align: center }
/* Anuladas ("nada se mueve"): la pregunta queda en su sitio con banda, contenido
   atenuado y marca ⊘ superpuesta; la reserva que puntúa lleva banda verde ACTIVA */
.anu-band { background:var(--soft-violet-3); border: 1px solid #5040a0; color: var(--ink-blue); font-size: 12px; font-weight: 700; border-radius: 7px; padding: 6px 10px; margin-bottom: 8px; text-align: center }
.act-band { background:var(--soft-ok); border: 1px solid var(--ok); color: var(--ok-ink); font-size: 12px; font-weight: 700; border-radius: 7px; padding: 6px 10px; margin-bottom: 8px; text-align: center }
.anu-wrap { position: relative }
.anu-dim  { opacity: .55 }
.anu-mark { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) rotate(-18deg); font-size: 96px; font-weight: 700; color: var(--ink-violet-4); opacity: .16; line-height: 1; pointer-events: none; user-select: none }
.db h3 { font-size: 15px; font-weight: 700; color: var(--ink); margin-bottom: 9px; line-height: 1.6 }
.db .dm{ font-size: 12px; font-weight: 700; color: var(--ink); margin-bottom: 7px; display: flex; justify-content: space-between; align-items: center }
.do    { display: flex; align-items: flex-start; gap: 6px; font-size: 14px; padding: 4px 6px; border-radius: 4px; margin-bottom: 2px; color: var(--ink) }
.do.gd { background: rgba(0,80,0,.2);   font-weight: 700 }
.do.bd { background: rgba(120,0,0,.18); font-weight: 700 }
.do.md { background: rgba(0,40,120,.18);font-weight: 700 }

/* ── Impugnaciones ─────────────────────────────────────────────────────── */
.ir  { margin-top: 10px; padding-top: 10px; border-top: 2px dashed var(--muted-2) }
.ita { width: 100%; padding: 9px; border: 2px solid var(--line-3); border-radius: 7px; font-family: inherit; font-size: 13px; color: var(--ink); background: var(--panel); resize: vertical; min-height: 72px; margin: 8px 0 }
.vr  { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px }
.rh  { background:var(--soft-violet-2); border-radius: 10px; padding: .75rem 1rem; margin: 14px 0 8px; border: 2px solid #7060b8 }

/* ── Toggle de modo prueba ─────────────────────────────────────────────── */
.mtog     { border-radius: 10px; padding: .85rem 1rem; cursor: pointer; user-select: none; display: flex; align-items: center; gap: 10px; margin-bottom: 14px }
.mtog.on  { background:var(--soft-ok); border: 2px solid #4a8a54 }
.mtog.off { background:var(--soft-err); border: 2px solid #cc6600 }
.mdot     { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; flex-shrink: 0 }
.mtog.on  .mdot { background: var(--ok); color:var(--accent-ink) }
.mtog.off .mdot { background: #cc6600; color:var(--accent-ink) }

/* ── Input PIN ─────────────────────────────────────────────────────────── */
.pin-input       { width: 100%; padding: 14px; font-size: 24px; font-weight: 700; text-align: center; letter-spacing: 8px; border: 2px solid var(--line-2); border-radius: 12px; background: var(--panel); color: var(--ink); font-family: monospace }
.pin-input:focus { outline: none; border-color: var(--accent) }

/* ── Tarjetas de modo (bienvenida) ─────────────────────────────────────── */
.mode-card       { border-radius: 14px; padding: 1.25rem; border: 2px solid var(--line); background: var(--panel); cursor: pointer; user-select: none; margin-bottom: 12px; display: flex; align-items: center; gap: 14px }
.mode-card:hover { border-color: var(--accent); background: var(--accent-tint) }
.mode-icon       { font-size: 32px; flex-shrink: 0 }

/* ── Estadísticas ──────────────────────────────────────────────────────── */
.scard { border-radius: 10px; padding: .85rem; text-align: center; border: 2px solid }
.sn    { font-size: 28px; font-weight: 700 }
.sl2   { font-size: 11px; font-weight: 700; margin-top: 3px }
.qrow  { display: flex; justify-content: space-between; align-items: flex-start; padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,.1) }
.qrow:last-child { border: none }
.fbar  { height: 5px; border-radius: 3px; margin-top: 4px }
.owner-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; background: var(--accent-soft); color: var(--ink-blue-2); border: 1px solid #88aadd; margin-left: 6px }
.guest-badge { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700; background:var(--soft-warn-2); color: var(--warn-ink);  border: 1px solid var(--warn); margin-left: 6px }

/* ── Flash cards (s8) ──────────────────────────────────────────────────── */
.fc-note     { font-size: 12px; color: var(--accent-2); background:var(--soft-info); border: 1px solid #88aadd; border-radius: 6px; padding: 6px 10px; margin-bottom: 10px }
.fc-reveal   { text-align: center; padding: 12px; font-size: 14px; font-weight: 700; border-radius: 10px; cursor: pointer; border: 2px solid var(--accent); background: var(--panel); color: var(--accent); user-select: none }
.fc-eval-row { display: flex; gap: 8px }
.fc-eval-btn { flex: 1; text-align: center; padding: 12px 6px; font-size: 13px; font-weight: 700; border-radius: 10px; cursor: pointer; user-select: none }
.fc-eval-si  { background:var(--soft-ok); color: var(--ok-ink); border: 2px solid var(--ok) }
.fc-eval-no  { background: var(--err-bg); color: var(--err-ink);  border: 2px solid var(--err) }
.fc-eval-nc  { background:var(--soft-grey); color: var(--muted);     border: 2px solid var(--line) }
.fc-stat     { text-align: center }
.fc-stat-n   { font-size: 28px; font-weight: 700 }
.fc-stat-l   { font-size: 12px; color: var(--muted) }

/* ── Caja invitado ─────────────────────────────────────────────────────── */

/* ── Banner offline ────────────────────────────────────────────────────── */
.offline-warn { background: var(--warn-bg); color: var(--warn-ink); border: 2px solid var(--warn) }
.offline-ok   { background:var(--soft-ok); color: var(--ok-ink); border: 2px solid var(--ok) }

/* ── Editor de apuntes con formato (v1.18.0) ──────────────────────────── */
/* El chrome del editor (barra, fondos, separadores) va con tokens de piel. El
   contenido del apunte —color de texto, borde de tabla, color de enlace— va en
   hex: es TU texto, y no debe cambiar de aspecto porque cambies de piel. */
.ap-editor-wrap { margin-top: 4px }
.ap-bar   { display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
            padding: 5px 6px; background: var(--panel-2);
            border: 2px solid #88aadd; border-bottom: none; border-radius: 7px 7px 0 0 }
.ap-bar-tabla, .ap-bar-nueva { border-radius: 0; border-top: 1px dashed var(--line-2) }
/* La fila de tabla NO se esconde: se APAGA. Se ve siempre —así se sabe que los
   controles existen— y solo se puede pulsar con la selección dentro de una
   tabla, porque `vertical-align` fuera de una celda no hace nada y añadir una
   fila tampoco. `pointer-events:none` mata el clic; el `tabindex` lo quita del
   recorrido con Tab, que el ratón no cubre. */
.ap-bar-off { opacity: .38; filter: grayscale(1); pointer-events: none }
.ap-b     { display: inline-flex; align-items: center; justify-content: center;
            min-width: 26px; height: 26px; padding: 0 6px; font-size: 13px;
            font-weight: 700; border-radius: 5px; cursor: pointer;
            user-select: none; color: var(--ink); background: var(--panel) }
.ap-b:hover { background: var(--accent-soft) }
.ap-sep   { width: 1px; height: 20px; margin: 0 3px; background: var(--line-2) }
.ap-col   { width: 18px; height: 18px; border-radius: 4px; cursor: pointer;
            border: 1px solid var(--line-3) }
.ap-edit  { padding: 8px 9px; background: var(--panel); color:var(--ink);
            border: 2px solid #88aadd; border-radius: 0 0 7px 7px;
            font-size: 13px; line-height: 1.6; outline: none;
            overflow-wrap: break-word; overflow-x: auto }
.ap-edit:focus { border-color: var(--accent) }

/* Borrador automático (v1.19.5): la línea de estado bajo el cuadro y la barra
   que ofrece recuperar. Son chrome del editor, así que van con tokens de piel
   igual que la barra de herramientas. La línea reserva su alto aunque esté
   vacía: si no, el cuadro daría un salto en cuanto empiezas a escribir. */
.ap-estado { padding: 3px 3px 0; min-height: 16px;
             font-size: 11px; line-height: 1.4; color: var(--muted-2) }
.ap-aviso  { display: flex; align-items: center; flex-wrap: wrap; gap: 7px;
             margin-bottom: 4px; padding: 5px 8px; border-radius: 7px;
             font-size: 11px; font-weight: 700; color: var(--warn-ink);
             background: var(--warn-bg); border: 1px solid var(--warn) }
.ap-aviso .ap-b { height: 22px; font-size: 11px; border: 1px solid var(--warn) }

/* Contenido con formato, tanto mientras lo escribes como ya guardado. El reset
   global (* { margin:0; padding:0 }) deja las listas sin sangría —viñetas y
   números fuera del cuadro— y las tablas sin separación: esto se lo devuelve,
   y solo aquí dentro. */
.ap-rt ul, .ap-rt ol, .ap-edit ul, .ap-edit ol { padding-left: 22px; margin: 3px 0 }
.ap-rt li, .ap-edit li { margin: 1px 0 }
/* Una viñeta distinta por nivel (v1.19.5). Sin esto, una lista anidada pinta
   los cinco niveles con el mismo icono y el esquema deja de leerse de un
   vistazo, que es justo para lo que sirve anidar. Los niveles 4 y 5 usan
   marcador de CADENA (Chrome/Edge ≥79, Firefox ≥39, Safari ≥17); en algo más
   antiguo esos dos se quedan sin viñeta, pero conservan su sangría.
   La cadena de selectores basta porque `_apunteSangrar` crea la sublista
   SIEMPRE del mismo tipo que su madre: los niveles no mezclan ul con ol. */
.ap-rt ul ul,             .ap-edit ul ul             { list-style-type: circle }
.ap-rt ul ul ul,          .ap-edit ul ul ul          { list-style-type: square }
.ap-rt ul ul ul ul,       .ap-edit ul ul ul ul       { list-style-type: '‣ ' }
.ap-rt ul ul ul ul ul,    .ap-edit ul ul ul ul ul    { list-style-type: '– ' }
.ap-rt ol ol,             .ap-edit ol ol             { list-style-type: lower-alpha }
.ap-rt ol ol ol,          .ap-edit ol ol ol          { list-style-type: lower-roman }
.ap-rt p,  .ap-edit p  { margin: 2px 0 }
.ap-rt a,  .ap-edit a  { color: var(--ink-blue-4); text-decoration: underline }
.ap-rt table, .ap-edit table { border-collapse: collapse; margin: 5px 0 }
.ap-rt th, .ap-rt td, .ap-edit th, .ap-edit td {
            border: 1px solid #88aadd; padding: 3px 7px; vertical-align: top }
.ap-rt th, .ap-edit th { background:var(--soft-blue-3); font-weight: 700 }
/* Imágenes (v1.18.1). `display:block` evita el hueco bajo la línea base que
   deja un <img> en línea; `max-width` las mete en el ancho del apunte por
   grande que sea el original. */
.ap-rt img, .ap-edit img { display: block; max-width: 100%; height: auto;
            margin: 5px 0; border-radius: 6px; border: 1px solid #88aadd }
.ap-rt img { cursor: zoom-in }

/* ── 🌀 Rosco y 🔤 Ahorcado (v1.30.0 «Takoyaki 8») ─────────────────────────
   Las letras del rosco se colocan en círculo con `left`/`top` en PORCENTAJE
   (los calcula `_roscoPos`), no en píxeles: así el rosco entero escala solo con
   el ancho disponible y no hace falta ni recalcular al girar el móvil ni un
   segundo diseño para pantalla pequeña. `aspect-ratio` lo mantiene redondo.
   La medida sale de la cuenta que aprieta: 25 letras sobre una circunferencia
   de radio 42% dejan 2πr/25 ≈ 10,6% de sitio a cada una, así que la casilla
   mide 10% y quedan holgadas. */
.rosco-ring { position: relative; width: 100%; max-width: 300px; aspect-ratio: 1;
              margin: 0 auto 12px }
.rosco-l { position: absolute; transform: translate(-50%, -50%);
           width: 10%; height: 10%; display: flex; align-items: center;
           justify-content: center; border-radius: 50%; border: 2px solid;
           font-size: 12px; font-weight: 700; line-height: 1 }
.rosco-centro { position: absolute; left: 50%; top: 50%; width: 56%;
                transform: translate(-50%, -50%); text-align: center }
/* El dibujo del ahorcado y la palabra conviven en una fila que se parte sola:
   la palabra pide 190px como mínimo, así que en un móvil estrecho el dibujo se
   va arriba y en cuanto hay sitio se ponen lado a lado. Sin media query. */
.ahorc-fila { display: flex; flex-wrap: wrap; align-items: center; gap: 12px;
              justify-content: center; margin: 6px 0 10px }
.ahorc-dibujo { flex: 0 0 118px; max-width: 118px }
.ahorc-palabra { flex: 1 1 190px; min-width: 0 }
@media (min-width: 768px) {
  .rosco-ring { max-width: 420px }
  .rosco-l { font-size: 17px }
  .ahorc-dibujo { flex-basis: 168px; max-width: 168px }
}

/* ── Estilos de impresión ──────────────────────────────────────────────── */
@media print {
  /* Una piel OSCURA no se imprime (v1.32.0): el papel es blanco y el fósforo
     verde sobre blanco no se lee. Se devuelven los tokens esenciales a sus
     valores claros, de modo que lo impreso sale igual con cualquier piel. */
  :root {
    --bg:#ffffff; --bg-wide:#ffffff; --panel:#ffffff; --panel-2:#ffffff; --panel-3:#eeeeee;
    --ink:#111111; --ink-2:#333333; --muted:#555555; --muted-2:#888888;
    --line:#c0c8d8; --line-2:#aabbcc; --line-3:#999999;
    --accent:#1a5fb4; --accent-ink:#ffffff;
    --ok:#2a7a38; --ok-bg:#aaddb0; --ok-ink:#1a4020;
    --err:#aa2020; --err-bg:#f0a8a8; --err-ink:#660000;
    --warn:#c8a000; --warn-bg:#fff3cc; --warn-ink:#5c3000;
    --soft-info:#f0f4ff; --soft-warn:#fff8e1; --soft-ok:#c8eacc; --soft-err:#ffe0cc;
    --ink-amber:#7a4400; --ink-blue:#2d1e7a; --ink-blue-2:#1a4a90; --ink-red:#880000;
    --ink-green:#1a4020; --ink-violet:#4a2070;
  }
  .no-print { display: none !important }
  /* Una tabla o una imagen del apunte partidas entre dos páginas no se entienden. */
  .ap-rt table { page-break-inside: avoid }
  .ap-rt img   { page-break-inside: avoid; max-width: 100% }
  body { background: #fff !important; font-size: 12px }
  .print-q { margin-bottom: 16px; border-bottom: 1px solid #ddd; padding-bottom: 10px }
  .print-q-num { font-weight: 700; color: var(--ink-blue-4) }
  .print-opt { margin: 2px 0 2px 12px; font-size: 12px }
  .print-opt.correct { font-weight: 700; color: var(--ink-green) }
  .print-opt.chosen  { font-weight: 700; color: var(--ink-red-2); text-decoration: line-through }
}

/* ── Accesibilidad (v1.34.0) ───────────────────────────────────────────────
   El proyecto no usa <button> por regla dura, así que los 327 elementos
   clicables son <div>/<span>/<i>. `a11yIniciar()` los hace operables con
   teclado en tiempo de ejecución; esto es la mitad visual: SIN un anillo de
   foco no se sabe dónde estás al tabular, que es tanto como no poder usarlo.
   `:focus-visible` y no `:focus` a propósito: así el anillo sale con el
   teclado pero no al hacer clic con el ratón. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}
/* El campo del PIN se quedaba sin ninguna marca de foco por su `outline:none`
   histórico; recupera la suya, coherente con el resto. */
.pin-input:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px }

/* ── Sistema de tooltips contextuales ─────────────────────────────────── */
.tip-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  font-size: 10px; font-weight: 700; font-style: normal;
  background: var(--line); color:var(--muted);
  cursor: pointer; user-select: none;
  vertical-align: middle; margin-left: 5px;
  flex-shrink: 0;
}
.tip-icon:hover { background: var(--accent); color:var(--accent-ink) }

/* Panel flotante del tooltip */
.tooltip-box {
  position: fixed;
  z-index: 2000;
  background: #1a2a40;
  color: #e8f0ff;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 400;
  padding: 10px 14px;
  border-radius: 10px;
  max-width: min(280px, calc(100vw - 32px));
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  pointer-events: none;
  /* v1.34.0: los saltos de línea del `data-tip` se respetan. Hasta aquí todos
     los tooltips eran de una tirada, así que no cambia ninguno; lo pide la
     chuleta de atajos de teclado, que es una lista. */
  white-space: pre-line;
}

/* ═══ DECORACIÓN POR PIEL (1b-3) · reglas ADITIVAS sobre las clases reales;
   solo aplican con data-skin activo → Clásica no se ve afectada. ═══ */

/* ── PIRATA · pergamino, doble filete, títulos de cartel ── */
:root[data-skin="pirata"] .screen-title,
:root[data-skin="pirata"] .app-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em}
:root[data-skin="pirata"] .card,
:root[data-skin="pirata"] .card-lg,
:root[data-skin="pirata"] .q-text{border-style:double;border-width:3px}
:root[data-skin="pirata"] .bp{border:3px double var(--accent-2)}
:root[data-skin="pirata"] .wrap{background-color:var(--bg);
  background-image:repeating-linear-gradient(45deg,rgba(120,85,30,.05) 0 1px,transparent 1px 4px),
    repeating-linear-gradient(-45deg,rgba(120,85,30,.04) 0 1px,transparent 1px 5px)}

/* ── ARCADE · pixel: sin radios, bordes gruesos, sombra dura ── */
:root[data-skin="arcade"] .screen-title,
:root[data-skin="arcade"] .app-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em}
:root[data-skin="arcade"] .bp,:root[data-skin="arcade"] .bs,:root[data-skin="arcade"] .bd,
:root[data-skin="arcade"] .card,:root[data-skin="arcade"] .card-lg,:root[data-skin="arcade"] .opt,
:root[data-skin="arcade"] .oc,:root[data-skin="arcade"] .tmr,:root[data-skin="arcade"] .bdg,
:root[data-skin="arcade"] .btn-i{border-radius:0}
:root[data-skin="arcade"] .card,:root[data-skin="arcade"] .card-lg,:root[data-skin="arcade"] .opt{border-width:3px}
:root[data-skin="arcade"] .bp{border:3px solid var(--ink);box-shadow:4px 4px 0 var(--ink)}
:root[data-skin="arcade"] .wrap{background-image:repeating-linear-gradient(0deg,rgba(18,50,15,.05) 0 2px,transparent 2px 4px)}

/* ── CÓMIC · filete negro grueso + sombra dura + trama benday ── */
:root[data-skin="comic"] .screen-title,
:root[data-skin="comic"] .app-title{font-family:var(--font-display);text-transform:uppercase}
:root[data-skin="comic"] .card,:root[data-skin="comic"] .card-lg,:root[data-skin="comic"] .opt{border-width:3px;border-color:#141414}
:root[data-skin="comic"] .bp{border:3px solid #141414}
:root[data-skin="comic"] .bp,:root[data-skin="comic"] .card,:root[data-skin="comic"] .card-lg{box-shadow:4px 4px 0 #141414}
:root[data-skin="comic"] .wrap{background-image:radial-gradient(rgba(43,108,212,.14) 1.3px,transparent 1.5px);background-size:10px 10px}

/* ── ANIME · manga: sombra de tinta, títulos condensados, trama de tono ── */
:root[data-skin="anime"] .screen-title,
:root[data-skin="anime"] .app-title{font-family:var(--font-display);text-transform:uppercase;font-style:italic;letter-spacing:.02em}
:root[data-skin="anime"] .card,:root[data-skin="anime"] .card-lg,:root[data-skin="anime"] .q-text{border-width:2px;border-color:var(--ink)}
:root[data-skin="anime"] .bp{border:2px solid var(--ink);box-shadow:5px 5px 0 var(--accent);font-style:italic}
:root[data-skin="anime"] .card,:root[data-skin="anime"] .card-lg,:root[data-skin="anime"] .q-text{box-shadow:3px 3px 0 var(--ink)}
:root[data-skin="anime"] .wrap{background-image:radial-gradient(rgba(20,17,12,.11) 1px,transparent 1.4px);background-size:7px 7px}



/* ═══ LA IMAGEN DE CASA · fondo de la piel Clásica ════════════════════════
   Clásica es la piel por defecto y la identidad de la app, así que lleva la
   ilustración de fondo. Las otras seis NO: cada una tiene su propio mundo y una
   foto fija se pelearía con Terminal, que es oscura, o con Arcade.

   `html:not([data-skin])` es exactamente «la Clásica»: `setSkin()` BORRA el
   atributo para ella y lo pone para las demás.

   ⚠️⚠️ El velo es alto —y no por timidez—. Clásica es una piel CLARA: sus tokens
   de texto son negros sobre claro, y bajar el velo dejaría texto oscuro sobre
   imagen oscura en cuanto algo no viva dentro de una tarjeta. Con el velo así, la
   ilustración se intuye —da carácter— sin cambiarle la naturaleza a la piel ni
   estorbar a quien lee durante horas. Es la diferencia entre un fondo y un ruido.

   `fixed` a propósito: si se desplazara con el contenido, el movimiento tiraría
   del ojo en cada scroll. */
html:not([data-skin]):not(.en-portada),
html:not([data-skin]):not(.en-portada) body {
  background-image: linear-gradient(rgba(228, 232, 240, .48), rgba(228, 232, 240, .66)), url('/img/fondo.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

/* ⚠️ El ÚNICO texto de la app que vive fuera de una tarjeta es la versión de la
   cabecera, y con el velo bajo se perdía contra el dibujo. Se le sube el contraste
   y se le pone una pastilla translúcida: es la excepción que confirma por qué el
   resto del fondo puede ser visible — todo lo demás se lee sobre `--panel`. */
html:not([data-skin]):not(.en-portada) #app-version-inicio {
  color: var(--muted);
  background: rgba(255, 255, 255, .62);
  border-radius: 6px;
  padding: 1px 6px;
}

/* ═══ PORTADA · la pantalla de acceso ══════════════════════════════════════
   El fondo va SOLO aquí, y no en toda la app, por dos motivos medidos:

   1. La app se mira HORAS leyendo texto denso. Una imagen detrás compite con lo
      único que importa y obliga a meter un velo para que se lea — y con velo ya
      no se ve la imagen, así que pagas el coste sin llevarte lo bonito.
   2. Hay SIETE pieles, una de ellas oscura. Un fondo fijo que luce en Clásica se
      pelea con Terminal.

   En la portada no aplica ninguno de los dos: no hay nada que leer, se ve tres
   segundos, y el hueco central de la imagen está compuesto justo para lo que va
   encima.

   ⚠️ La clase va en el BODY y la pone `showS()`. Puesta en la pantalla salía un
   recuadro con imagen en mitad de la página: una pantalla mide lo que mide su
   contenido, no el viewport. */
html.en-portada, body.en-portada {
  background-image: linear-gradient(rgba(9, 16, 34, .22), rgba(9, 16, 34, .62)), url('/img/fondo.webp');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  min-height: 100vh;
}
/* La tarjeta del formulario: cristal sobre la imagen, no un bloque opaco que la
   tape. El contraste del texto lo garantiza el velo del body, no la tarjeta. */
body.en-portada #s-pin.portada {
  background: rgba(16, 26, 51, .55);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 16px;
  padding: 30px 26px 34px;
  margin: 8vh auto 0;
  max-width: 380px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
  color: #eef2fb;
}
body.en-portada .app-title,
.portada .screen-title,
.portada span[style*="font-weight:700"] { color: #ffffff !important }
.portada p, .portada label { color: #c3d0ea !important }
/* Los campos siguen siendo claros: escribir sobre fondo oscuro cansa, y el
   formulario es lo único con lo que se interactúa aquí. */
.portada .pin-input {
  background: rgba(255, 255, 255, .96);
  border-color: rgba(255, 255, 255, .3);
  color: #111111;
}


/* ⚠️ Que pulsando el contador `‹ 12/50 ›` se abra el MAPA no lo adivina nadie, y
   el `title` que lo explicaba solo existe con ratón: en el iPhone y el iPad,
   donde más se estudia, no aparece jamás. El icono lo dice sin gastar sitio en
   una barra que se afinó al píxel — y va en `::before` para que el contador
   guarde solo el número, que es lo que comprueban los tests de navegación. */
#correc-nav-pos::before { content: "🗺 "; font-size: 11px }

/* ═══ GUÍA DE USO dentro de la app ════════════════════════════════════════
   Tipografía de LECTURA, no de interfaz: la guía se lee de corrido, así que la
   línea es más alta y el ancho está limitado — un párrafo de 120 caracteres no
   se lee, se escanea. */
#ayuda-indice { display: flex; flex-wrap: wrap; gap: 5px }
.ayuda-ix { padding: 5px 10px; border-radius: 13px; border: 1px solid var(--line); background: var(--panel-2); color: var(--ink-2); font-size: 12px; font-weight: 600; cursor: pointer; user-select: none }
.ayuda-ix:hover { border-color: var(--accent); color: var(--accent) }

.md-cuerpo { line-height: 1.65; color: var(--ink-2); font-size: 14.5px }
.md-cuerpo p { margin: 0 0 10px; max-width: 68ch }
.md-cuerpo h2 { font-size: 19px; font-weight: 700; color: var(--ink); margin: 26px 0 10px; padding-top: 10px; border-top: 2px solid var(--line) }
.md-cuerpo h2:first-child { margin-top: 0; border-top: 0; padding-top: 0 }
.md-cuerpo h3 { font-size: 15.5px; font-weight: 700; color: var(--ink); margin: 18px 0 7px }
.md-cuerpo h4 { font-size: 14px; font-weight: 700; color: var(--ink-2); margin: 14px 0 6px }
.md-cuerpo ul { margin: 0 0 10px 20px }
.md-cuerpo li { margin-bottom: 4px; max-width: 66ch }
.md-cuerpo code { background: var(--panel-3); border-radius: 4px; padding: 1px 5px; font-size: 12.5px }
.md-cuerpo pre { background: var(--panel-3); border-radius: 8px; padding: 10px 12px; overflow-x: auto; margin: 0 0 12px }
.md-cuerpo pre code { background: none; padding: 0; font-size: 12px; line-height: 1.5 }
.md-cuerpo blockquote { border-left: 3px solid var(--accent); background: var(--soft-info); border-radius: 0 8px 8px 0; padding: 8px 12px; margin: 0 0 12px }
.md-cuerpo blockquote p { margin: 0; max-width: none }
.md-cuerpo hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0 }
/* ⚠️ La tabla scrollea DENTRO de su caja: la guía tiene 136 filas y alguna es
   ancha, y sin esto empujaría la página entera de lado en el móvil. */
.md-tabla { overflow-x: auto; margin: 0 0 12px }
.md-cuerpo table { border-collapse: collapse; font-size: 13px; min-width: 100% }
.md-cuerpo th, .md-cuerpo td { border: 1px solid var(--line); padding: 5px 9px; text-align: left; vertical-align: top }
.md-cuerpo th { background: var(--panel-2); font-weight: 700; color: var(--ink); white-space: nowrap }