:root {
  --bg: #f6f5f1;
  --surface: #ffffff;
  --text: #1d1f24;
  --muted: #5d6270;
  --border: #dedcd4;
  --accent: #b3261e;
  --accent-soft: #fbe9e7;
  --on-accent: #ffffff;
  --ok: #1e7a46;
  --ok-soft: #e3f4ea;
  --bad: #b3261e;
  --bad-soft: #fbe9e7;
  --focus: #2457c5;
  --sign-ground: #ecebe6;
  --radius: 12px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #15161a;
    --surface: #1f2127;
    --text: #ececef;
    --muted: #a3a7b3;
    --border: #33363f;
    --accent: #ff8a80;
    --accent-soft: #3a2220;
    --on-accent: #1d1f24;
    --ok: #6fd39b;
    --ok-soft: #1b3326;
    --bad: #ff8a80;
    --bad-soft: #3a2220;
    --focus: #8fb0ff;
    --sign-ground: #3a3d46;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --bg: #15161a;
    --surface: #1f2127;
    --text: #ececef;
    --muted: #a3a7b3;
    --border: #33363f;
    --accent: #ff8a80;
    --accent-soft: #3a2220;
    --on-accent: #1d1f24;
    --ok: #6fd39b;
    --ok-soft: #1b3326;
    --bad: #ff8a80;
    --bad-soft: #3a2220;
    --focus: #8fb0ff;
    --sign-ground: #3a3d46;
    color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

/* Cabecera */
.cabecera {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.cabecera-inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
  justify-content: space-between;
}
.etiqueta {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent);
}
h1 { margin: 0; font-size: 24px; line-height: 1.25; text-wrap: balance; }
.grupos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.grupo {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  cursor: pointer;
}
.grupo:hover { border-color: var(--muted); }
.grupo[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.grupo .avance { opacity: .75; margin-left: 6px; font-weight: 400; font-variant-numeric: tabular-nums; }
.grupo:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.marcador { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.marcador-cifras { display: flex; align-items: baseline; gap: 8px; }
.usuario { font-size: 14px; color: var(--muted); }
.usuario strong { color: var(--text); }
.enlace {
  font: inherit;
  background: none;
  border: 0;
  padding: 0;
  margin-left: 8px;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.marcador-num { font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; }
.marcador-txt { font-size: 14px; color: var(--muted); }

/* Navegación de secciones */
.secciones {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 5;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 12px max(16px, calc((100% - 860px) / 2 + 16px));
  scrollbar-width: thin;
}
.chip {
  flex: none;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
}
.chip:hover { border-color: var(--muted); }
.chip[aria-current="true"] {
  background: var(--text);
  color: var(--bg);
  border-color: var(--text);
}
.chip .avance { opacity: .7; margin-left: 6px; font-variant-numeric: tabular-nums; }

/* Contenido */
.contenido { max-width: 860px; margin: 0 auto; padding: 24px 16px 48px; }

.seccion-cab {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}
.seccion-cab h2 { margin: 0; font-size: 20px; }
.seccion-cab p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }

.barra { height: 6px; background: var(--border); border-radius: 99px; overflow: hidden; margin-bottom: 20px; }
.barra > span { display: block; height: 100%; background: var(--ok); width: 0; transition: width .3s; }
@media (prefers-reduced-motion: reduce) { .barra > span { transition: none; } }

/* Tarjeta de pregunta */
.pregunta {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  margin-bottom: 14px;
}
.pregunta-num { font-size: 13px; color: var(--muted); font-weight: 600; margin: 0 0 4px; }
.pregunta-txt { margin: 0 0 14px; font-size: 17px; font-weight: 600; }

.opciones { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.opcion {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
}
.opcion:hover { border-color: var(--muted); }
.opcion input { margin-top: 4px; accent-color: var(--text); flex: none; }
.opcion .letra { font-weight: 700; color: var(--muted); }
.opcion.correcta { border-color: var(--ok); background: var(--ok-soft); }
.opcion.incorrecta { border-color: var(--bad); background: var(--bad-soft); }
.bloqueada .opcion { cursor: default; }
.bloqueada .opcion:hover { border-color: var(--border); }
.bloqueada .opcion.correcta:hover { border-color: var(--ok); }
.bloqueada .opcion.incorrecta:hover { border-color: var(--bad); }

.acciones { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.btn {
  font: inherit;
  font-weight: 600;
  font-size: 15px;
  border-radius: 10px;
  padding: 10px 18px;
  cursor: pointer;
  border: 1px solid transparent;
}
.btn-primario { background: var(--accent); color: var(--on-accent); }
.btn-primario:disabled { opacity: .45; cursor: not-allowed; }
.btn-secundario { background: transparent; color: var(--text); border-color: var(--border); }
.btn-secundario:hover { border-color: var(--muted); }
.btn:focus-visible, .chip:focus-visible, .opcion:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }

.resultado { margin-top: 12px; padding: 12px 14px; border-radius: 10px; font-size: 15px; }
.resultado.ok { background: var(--ok-soft); color: var(--ok); }
.resultado.mal { background: var(--bad-soft); color: var(--bad); }
.resultado strong { display: block; margin-bottom: 2px; }
.resultado .fundamento { color: var(--text); font-size: 14px; }

.navegacion { display: flex; justify-content: space-between; gap: 10px; margin-top: 24px; }

/* Imágenes de señales */
.senal {
  margin: 0 0 14px;
  display: flex;
  justify-content: center;
  padding: 16px;
  background: var(--sign-ground);
  border-radius: 10px;
}
.senal-img { width: 160px; max-width: 60%; height: auto; }
.senal-img[data-estado="cargando"], .opcion-img[data-estado="cargando"] {
  min-height: 110px;
  min-width: 110px;
  border-radius: 8px;
  background: var(--border);
}
.img-error {
  font: inherit;
  font-size: 14px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px dashed var(--bad);
  background: var(--bad-soft);
  color: var(--bad);
  cursor: pointer;
}
.senal-img[src*="img/a3b/"], .senal-img[src^="data:image/png"] { width: auto; max-width: 100%; max-height: 260px; }
.opciones-img { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.opciones-img .opcion { flex-direction: column; align-items: center; text-align: center; }
.opciones-img .opcion > span { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.opcion-img {
  width: 96px;
  height: 96px;
  object-fit: contain;
  padding: 6px;
  background: var(--sign-ground);
  border-radius: 8px;
}

/* Buscador */
.buscador { display: grid; gap: 6px; margin-bottom: 18px; }
.buscador-etq { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.buscador-fila { display: flex; gap: 8px; }
.buscador-fila input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 16px;
  padding: 11px 14px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
}
.buscador-fila input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.resultados-resumen { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.resultado-busqueda .opcion { cursor: default; }
mark { background: #ffe08a; color: inherit; border-radius: 3px; padding: 0 1px; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) mark { background: #6b5a14; } }
:root[data-theme="dark"] mark { background: #6b5a14; }
.pregunta.destacada { outline: 3px solid var(--accent); outline-offset: 2px; transition: outline-color .3s; }

/* Teoría de cada sección */
.teoria {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 14px;
  display: grid;
  gap: 16px;
}
.teoria h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
}
.teoria-intro { margin: -8px 0 0; font-size: 17px; font-weight: 600; max-width: 68ch; text-wrap: balance; }
.teoria-tema { display: grid; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.teoria-tema h4 { margin: 0; font-size: 16px; }
.teoria-tema ul { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.teoria-tema li { max-width: 72ch; }
.teoria-tema li::marker { color: var(--accent); }
.teoria-senales { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.teoria-senal {
  margin: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
}
.teoria-senal-img {
  display: grid;
  place-items: center;
  height: 120px;
  padding: 6px;
  border-radius: 8px;
  background: var(--sign-ground);
}
.teoria-img { max-width: 100%; max-height: 108px; width: auto; height: auto; object-fit: contain; }
.teoria-img[data-estado="cargando"] { width: 90px; height: 90px; border-radius: 8px; background: var(--border); }
.teoria-senal figcaption { display: grid; gap: 2px; font-size: 14px; }
.teoria-senal-nombre { font-size: 12px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.teoria-fin {
  display: grid;
  gap: 10px;
  justify-items: start;
  padding: 16px;
  border-radius: 10px;
  background: var(--accent-soft);
}
.teoria-fin p { margin: 0; font-weight: 600; }
.teoria-repaso {
  margin-bottom: 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.teoria-repaso > summary {
  cursor: pointer;
  padding: 12px 16px;
  font-weight: 600;
  color: var(--accent);
}
.teoria-repaso > summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.teoria-repaso[open] > summary { border-bottom: 1px solid var(--border); }
.teoria-repaso .teoria { border: 0; margin: 0; border-radius: 0 0 var(--radius) var(--radius); }

/* Simulacro de examen */
.sc-inicio { display: grid; gap: 14px; }
.sc-inicio h2 { margin: 0; font-size: 22px; }
.sc-inicio h3 { margin: 10px 0 0; font-size: 17px; }
.sc-intro { margin: 0; max-width: 68ch; }
.sc-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.sc-op {
  font: inherit;
  text-align: left;
  display: grid;
  gap: 6px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.sc-op:hover { border-color: var(--accent); }
.sc-op:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sc-op-titulo { font-weight: 700; font-size: 17px; }
.sc-op-detalle { color: var(--muted); font-size: 14px; }
.sc-op-accion { color: var(--accent); font-weight: 700; font-size: 14px; margin-top: 4px; }
.sc-reglas { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 14px; }
.sc-fuente { margin: 0; font-size: 13px; color: var(--muted); }
.sc-vacio { margin: 0; color: var(--muted); font-size: 14px; }
.sc-tabla-env { overflow-x: auto; }
.sc-tabla { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface); border-radius: 10px; overflow: hidden; }
.sc-tabla th, .sc-tabla td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
.sc-tabla th { font-size: 12px; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
.sc-tabla .num { font-variant-numeric: tabular-nums; }
.sc-acc { white-space: nowrap; display: flex; gap: 10px; }
.sc-acc .enlace { margin-left: 0; font-size: 13px; }
.sc-borrar-si { font-weight: 700; }
.sc-abandonar-fila { margin: 0; text-align: right; }
.sc-abandonar-fila .enlace { font-size: 14px; color: var(--muted); }
.sc-pill { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.sc-pill[data-ok="1"] { background: var(--ok-soft); color: var(--ok); }
.sc-pill[data-ok="0"] { background: var(--bad-soft); color: var(--bad); }

.sc-examen { display: grid; gap: 12px; }
.sc-barra {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 4;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.sc-barra p { margin: 0; }
.sc-tipo { font-weight: 700; }
.sc-respondidas { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sc-reloj-caja { font-size: 13px; color: var(--muted); display: flex; align-items: baseline; gap: 8px; }
.sc-reloj { font-size: 26px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.sc-reloj[data-alerta="1"] { color: var(--bad); }
.sc-aviso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--bad-soft);
  color: var(--bad);
  font-weight: 600;
}
.sc-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; }
.sc-rejilla button {
  font: inherit;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.sc-rejilla button[data-resp="1"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.sc-rejilla button[aria-current="true"] { outline: 2px solid var(--accent); outline-offset: 1px; }
.sc-rejilla button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.opcion.elegida { border-color: var(--text); background: var(--sign-ground); }
.sc-nav { display: flex; flex-wrap: wrap; gap: 10px; }
.sc-nav #sc-finalizar { margin-left: auto; }
.sc-confirmar {
  padding: 16px;
  border-radius: var(--radius);
  border: 1px solid var(--accent);
  background: var(--accent-soft);
  display: grid;
  gap: 10px;
}
.sc-confirmar p { margin: 0; font-weight: 600; }

.sc-veredicto {
  display: grid;
  gap: 6px;
  justify-items: start;
  padding: 22px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  margin-bottom: 18px;
}
.sc-veredicto[data-ok="1"] { background: var(--ok-soft); border-color: var(--ok); }
.sc-veredicto[data-ok="0"] { background: var(--bad-soft); border-color: var(--bad); }
.sc-veredicto p { margin: 0; }
.sc-veredicto-titulo { font-size: 28px; font-weight: 800; }
.sc-veredicto[data-ok="1"] .sc-veredicto-titulo { color: var(--ok); }
.sc-veredicto[data-ok="0"] .sc-veredicto-titulo { color: var(--bad); }
.sc-nota { font-size: 40px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.sc-detalle { font-size: 14px; color: var(--text); max-width: 70ch; margin-bottom: 8px !important; }
.sc-errores-titulo { font-size: 18px; margin: 0 0 12px; }
.sc-error .opcion { cursor: default; }
.sc-etq { font-size: 13px; }
.sc-fundamento { margin: 10px 0 0; font-size: 14px; color: var(--muted); }

/* Probabilidad de aprobar */
.sc-probabilidad { display: grid; gap: 12px; }
.pb {
  --pb-color: var(--muted);
  display: grid;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
}
.pb[data-nivel="alto"] { --pb-color: var(--ok); }
.pb[data-nivel="medio"] { --pb-color: #b07800; }
.pb[data-nivel="bajo"] { --pb-color: var(--bad); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pb[data-nivel="medio"] { --pb-color: #ffcc66; } }
:root[data-theme="dark"] .pb[data-nivel="medio"] { --pb-color: #ffcc66; }
.pb p { margin: 0; }
.pb-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px; }
.pb-etq { font-size: 13px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.pb-num { font-size: 44px; font-weight: 800; line-height: 1.05; color: var(--pb-color); font-variant-numeric: tabular-nums; }
.pb-meta { text-align: right; font-size: 14px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pb-barra { position: relative; height: 10px; border-radius: 99px; background: var(--border); }
.pb-barra > span { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: var(--pb-color); transition: width .4s; }
.pb-barra > i { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text); opacity: .6; }
@media (prefers-reduced-motion: reduce) { .pb-barra > span { transition: none; } }
.pb-texto { font-size: 14px; color: var(--muted); }
.pb-partes { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.pb-parte { display: grid; gap: 2px; padding: 10px 12px; border-radius: 10px; background: var(--bg); border: 1px solid var(--border); }
.pb-parte[data-debil="1"] { border-color: var(--bad); }
.pb-parte-nom { font-size: 13px; color: var(--muted); }
.pb-parte-aviso { font-size: 12px; font-weight: 700; color: var(--bad); }
.pb-plan { padding: 12px 14px; border-radius: 10px; background: var(--sign-ground); }
.pb-plan-tit { font-weight: 700; margin-bottom: 6px !important; }
.pb-plan ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; font-size: 15px; }
.pb-como summary { cursor: pointer; font-size: 14px; color: var(--accent); font-weight: 600; }
.pb-como p { margin-top: 6px; font-size: 14px; color: var(--muted); max-width: 72ch; }
.sc-prob { font-weight: 700; font-size: 15px; }
.sc-prob[data-sube="1"] { color: var(--ok); }
.sc-prob[data-sube="-1"] { color: var(--bad); }
@media (max-width: 560px) { .pb-meta { text-align: left; } .pb-num { font-size: 38px; } }

/* Mis errores */
.er-cab { display: grid; gap: 10px; margin-bottom: 16px; }
.er-cab h2 { margin: 0; font-size: 22px; }
.er-filtros { display: flex; flex-wrap: wrap; gap: 8px; }
.er-filtros .chip[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.er-resumen { margin: 0; font-size: 14px; color: var(--muted); }
.er-resumen:empty { display: none; }
.er-vacio {
  margin: 0;
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  background: var(--surface);
}
.er-veces {
  display: inline-block;
  white-space: nowrap;
  margin-left: 8px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  background: var(--bad-soft);
  color: var(--bad);
}
.er-tarjeta .opcion { cursor: default; }
.er-etq { display: block; font-size: 12px; margin-top: 2px; }
.opcion.correcta .er-etq { color: var(--ok); }
.opcion.incorrecta .er-etq { color: var(--bad); }
.er-sin { margin: 10px 0 0; font-size: 14px; font-weight: 600; color: var(--bad); }
#er-finalizar { margin-left: auto; }
.er-dominadas { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.er-dominadas li { max-width: 72ch; }
.er-dominadas li::marker { content: "✔ "; color: var(--ok); }

/* Mis más falladas (historial) */
.hi-item .opcion { cursor: default; }
.hi-cab { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 10px; }
.hi-pos {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--bad-soft);
  color: var(--bad);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.hi-dato { display: grid; gap: 4px; flex: 1; min-width: 0; }
.hi-dato strong { color: var(--bad); font-variant-numeric: tabular-nums; }
.hi-barra { height: 6px; border-radius: 99px; background: var(--border); overflow: hidden; max-width: 320px; }
.hi-barra > span { display: block; height: 100%; background: var(--bad); }
.hi-meta { font-size: 13px; color: var(--muted); }

/* Examen práctico: simulador 3D */
.contenido.practico { max-width: 1100px; display: grid; gap: 14px; }
.sim {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 78vh;
  border-radius: var(--radius);
  overflow: hidden;
  background: #9fc3df;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
#sim-lienzo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.sim-hud {
  position: absolute;
  inset: 10px 10px auto 10px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  pointer-events: none;
}
.sim-panel, .sim-estado {
  background: rgba(16, 18, 24, .72);
  color: #fff;
  border-radius: 10px;
  padding: 10px 12px;
}
.sim-panel { max-width: min(440px, 62%); }
.sim-panel p, .sim-estado p { margin: 0; }
.sim-titulo { font-weight: 700; font-size: 15px; }
.sim-texto { font-size: 13px; opacity: .9; margin-top: 2px !important; }
.sim-progreso { font-size: 12px; color: #ffd54f; margin-top: 4px !important; font-variant-numeric: tabular-nums; }
.sim-progreso:empty { display: none; }
.sim-estado { text-align: right; min-width: 116px; }
.sim-vel { font-size: 26px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.sim-vel small { font-size: 12px; font-weight: 400; opacity: .8; }
.sim-vel[data-exceso="1"] { color: #ff8a80; }
.sim-faltas { font-size: 13px; margin-top: 4px !important; }
.sim-faltas[data-estado="leve"] { color: #ffd54f; }
.sim-faltas[data-estado="grave"] { color: #ff8a80; }
.sim-dirs { display: flex; justify-content: flex-end; gap: 6px; margin-top: 4px !important; font-size: 16px; }
.sim-dirs span { opacity: .25; color: #7dff8a; }
.sim-dirs span[data-on="1"] { opacity: 1; }
.sim-aviso {
  position: absolute;
  left: 50%;
  top: 34%;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 16px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 15px;
  background: rgba(16, 18, 24, .8);
  color: #fff;
  pointer-events: none;
  text-align: center;
  max-width: 90%;
}
.sim-aviso[data-tipo="grave"] { background: rgba(179, 38, 30, .92); }
.sim-aviso[data-tipo="leve"] { background: rgba(176, 120, 0, .92); }
.sim-aviso[data-tipo="ok"] { background: rgba(30, 122, 70, .92); }

.sim-tactil {
  position: absolute;
  inset: auto 10px 10px 10px;
  display: none;
  justify-content: space-between;
  align-items: flex-end;
  gap: 8px;
}
@media (pointer: coarse) { .sim-tactil { display: flex; } }
.sim-t-grupo { display: flex; gap: 8px; }
.sim-t-dirs { flex-direction: column; gap: 6px; }
.sim-tactil button {
  font: inherit;
  font-weight: 700;
  font-size: 18px;
  min-width: 64px;
  min-height: 56px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .5);
  background: rgba(16, 18, 24, .55);
  color: #fff;
  touch-action: none;
}
.sim-t-dirs button { font-size: 12px; min-height: 34px; min-width: 76px; }
.sim-tactil button[data-on="1"] { background: rgba(255, 255, 255, .35); }

.sim-resultado {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 12, 16, .55);
  padding: 16px;
  overflow: auto;
}
.sim-res-caja {
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius);
  padding: 20px 22px;
  width: min(440px, 100%);
  display: grid;
  gap: 8px;
}
.sim-res-caja h2 { margin: 0; font-size: 24px; }
.sim-resultado[data-aprobado="1"] h2 { color: var(--ok); }
.sim-resultado[data-aprobado="0"] h2 { color: var(--bad); }
.sim-res-caja p { margin: 0; }
.sim-res-caja ul { margin: 0; padding-left: 20px; font-size: 14px; }
.sim-res-caja li[data-grave="1"] { color: var(--bad); }
.sim-res-nota { font-size: 12px; color: var(--muted); }
.sim-error {
  position: absolute;
  inset: auto 16px 16px;
  background: var(--bad-soft);
  color: var(--bad);
  padding: 10px;
  border-radius: 8px;
}

.sim-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.sim-teclas { margin: 0; font-size: 13px; color: var(--muted); max-width: 70ch; }
.sim-botones { display: flex; gap: 8px; flex-wrap: wrap; }
.sim-intentos { margin: 0; font-size: 14px; color: var(--muted); }

.guia {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px 22px;
  max-width: 860px;
}
.guia h2 { margin: 0 0 8px; font-size: 20px; }
.guia h3 { margin: 18px 0 6px; font-size: 16px; }
.guia p, .guia li { max-width: 72ch; }
.guia p { margin: 0; }
.guia ul { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
.guia-nota { margin-top: 16px !important; font-size: 13px; color: var(--muted); }

@media (max-width: 640px) {
  .sim { aspect-ratio: 3 / 4; }
  .sim-hud { inset: 8px 8px auto 8px; gap: 6px; }
  .sim-panel { max-width: 64%; padding: 8px 10px; }
  .sim-estado { min-width: 0; padding: 8px 10px; }
  .sim-titulo { font-size: 13px; }
  .sim-texto { font-size: 11px; }
  .sim-vel { font-size: 20px; }
  .sim-tactil { inset: auto 6px 6px 6px; gap: 4px; }
  .sim-t-grupo { gap: 4px; }
  .sim-tactil button { min-width: 0; width: 58px; min-height: 52px; font-size: 14px; padding: 0; }
  .sim-t-dirs button { width: 64px; min-height: 30px; font-size: 11px; }
}

/* Pantalla de inicio */
.inicio {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 560px;
  display: grid;
  gap: 10px;
}
.inicio h2 { margin: 0; font-size: 20px; }
.inicio p { margin: 0; color: var(--muted); }
.inicio label { font-weight: 600; margin-top: 6px; }
.inicio-fila { display: flex; flex-wrap: wrap; gap: 10px; }
.inicio-fila input {
  flex: 1 1 200px;
  font: inherit;
  font-size: 16px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: var(--text);
}
.inicio-fila input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.aviso { color: var(--bad) !important; font-size: 14px; }
.anteriores-tit { margin-top: 8px !important; font-size: 14px; }
.anteriores-lista { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }

.pie {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 16px 32px;
  font-size: 13px;
  color: var(--muted);
}
.pie a { color: inherit; }

@media (max-width: 560px) {
  .teoria { padding: 16px; }
  .teoria-intro { font-size: 15px; }
  .teoria-senales { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .marcador { align-items: flex-start; }
  h1 { font-size: 20px; }
  .pregunta { padding: 14px; }
  .pregunta-txt { font-size: 16px; }
}