/* estudio.css — tema «Estudio» del visor (body.theme-estudio, lecciones con metadata.kind = "lesson").
   Tokens del tablero «Sistema» del lienzo (docs/estudio/handoff_claude_design/canvas/project/Sistema.dc.html).
   Fuentes OFL servidas en local (player/fonts/): el portal funciona sin conexión. */

@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Atkinson Hyperlegible"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "JetBrains Mono"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); }

body.theme-estudio {
  /* Tema estudio_fantasia (spec aventura §5.5): pergamino oscuro, tinta clara, runa cian. Oscuro por defecto. */
  --bg: #1a1612; --surface: #2a241c;
  --glass: rgba(34, 29, 22, 0.94);
  --ink-e: #f1e9d8; --ink-e2: #b9ad97;
  --line-e: #4a4034;
  --accent: #5fd3e6; --accent-soft: #1f3a40;
  --ok: #8fd18a; --ok-soft: #1f3a22;
  --miss: #e08a5a; --miss-soft: #40261a;
  --f-read: "Atkinson Hyperlegible", system-ui, sans-serif;
  --f-code: "JetBrains Mono", Consolas, monospace;
  --fs-body: 22px; --fs-question: 28px; --fs-name: 15px;
  --lh-body: 1.5; --measure: 62ch;
  --radius-e: 14px; --gap: 16px; --tap: 52px;
  font-family: var(--f-read);
  background: var(--bg);
}
@media (max-width: 600px) {
  body.theme-estudio { --fs-body: 19px; --fs-question: 23px; }
}
@media (prefers-color-scheme: light) {
  body.theme-estudio:not([data-theme="dark"]) {
    --bg: #f1e9d8; --surface: #fbf6ea;
    --glass: rgba(251, 246, 234, 0.95);
    --ink-e: #2a241c; --ink-e2: #5f5546;
    --line-e: #cdbfa6;
    --accent: #1f7f91; --accent-soft: #d8eef2;
    --ok: #2f7a3a; --ok-soft: #dff2dd;
    --miss: #a64f1e; --miss-soft: #f7e1d2;
  }
}
body.theme-estudio::before { display: none; } /* sin grano de papel viejo */

/* ---------- Caja de diálogo en el tema ---------- */
body.theme-estudio .dialogue-frame {
  background: var(--glass);
  border: 1px solid var(--line-e);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  border-radius: var(--radius-e);
}
body.theme-estudio .dialogue-frame::before, body.theme-estudio .dialogue-frame::after { display: none; }
body.theme-estudio .speaker {
  font-family: var(--f-read); font-weight: 700; color: var(--accent);
  font-size: var(--fs-name); font-variant: small-caps; letter-spacing: 0.06em;
}
body.theme-estudio .stage .text, body.theme-estudio .stage.is-narrator .text {
  font-family: var(--f-read); color: var(--ink-e); font-style: normal;
}
body.theme-estudio .stage.is-narrator .text { color: var(--ink-e2); }
body.theme-estudio .hint { color: var(--ink-e2); }
body.theme-estudio .stage { background: var(--bg); }

/* La tarjeta sustituye a la caja: el texto sigue en la caja (para paginar), invisible. */
.stage.is-estudio .dialogue { visibility: hidden; }
.stage.is-estudio .vignette::after { opacity: 0.45; }

/* ---------- Barra de progreso (un segmento por pantalla) ---------- */
.es-progress {
  position: absolute; z-index: 8; left: 0; right: 0; top: calc(6px + var(--sat, 0px));
  display: flex; align-items: center; gap: 10px; padding: 0 calc(16px + var(--sar, 0px)) 0 calc(16px + var(--sal, 0px));
  pointer-events: none;
}
.es-segs { flex: 1; display: flex; gap: 3px; }
.es-segs i { flex: 1; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08); }
.es-segs i.hecho { background: var(--accent); }
.es-segs i.actual { background: var(--accent); opacity: 0.55; }
.es-segs i.q { height: 9px; margin-top: -2px; }
.es-progress .es-count, .es-card .es-count {
  font: 600 13px/1 var(--f-code); color: var(--ink-e); background: var(--glass); padding: 4px 8px; border-radius: 999px;
}

/* ---------- Tarjeta de pregunta ---------- */
.es-card {
  position: absolute; z-index: 9; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + var(--sab, 0px)); top: auto;
  width: min(calc(100% - 32px), 760px); max-height: calc(100% - 84px - var(--sat, 0px)); overflow-y: auto; /* deja ver Menú y Reportar */
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: var(--surface); color: var(--ink-e); border: 1px solid var(--line-e); border-radius: var(--radius-e);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
  padding: 22px 24px; display: flex; flex-direction: column; gap: 14px;
  font-family: var(--f-read); font-size: var(--fs-body); line-height: var(--lh-body);
  cursor: default;
}
.es-card[hidden] { display: none; }
.es-card.is-nudge { animation: es-nudge 320ms ease; }
@keyframes es-nudge { 25% { transform: translateX(calc(-50% - 6px)); } 75% { transform: translateX(calc(-50% + 6px)); } }
@media (prefers-reduced-motion: reduce) { .es-card.is-nudge { animation: none; outline: 3px solid var(--accent); } }
.es-kicker { font-size: var(--fs-name); font-weight: 700; letter-spacing: 0.06em; font-variant: small-caps; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.es-lang { font: 600 12px/1 var(--f-code); padding: 3px 6px; border-radius: 6px; background: var(--accent-soft); color: var(--accent); }
.es-q { margin: 0; font-size: var(--fs-question); line-height: 1.35; font-weight: 700; max-width: var(--measure); }
.es-hint { margin: 0; color: var(--ink-e2); font-size: 0.85em; }
.es-answer { padding: 12px 16px; border-radius: 12px; background: var(--accent-soft); }
.es-answer p { margin: 4px 0 0; }
.es-verdict { margin: 0; font-weight: 700; }
.es-verdict.is-ok { color: var(--ok); }
.es-verdict.is-miss { color: var(--miss); }
.es-explain { display: flex; flex-direction: column; gap: 6px; }
.es-explain p { margin: 0; }

.es-options, .es-rate, .es-conf, .es-levels { display: flex; flex-direction: column; gap: 10px; }
.es-rate, .es-conf, .es-levels { flex-direction: row; flex-wrap: wrap; }
.es-rate .es-opt, .es-conf .es-opt, .es-levels .es-opt { flex: 1 1 0; justify-content: center; min-width: 7em; padding: 10px 8px; white-space: nowrap; }
.es-opt {
  display: flex; gap: 14px; align-items: center; min-height: var(--tap); padding: 10px 16px;
  border: 2px solid var(--line-e); border-radius: 12px; background: var(--surface); color: var(--ink-e);
  font: inherit; font-size: 0.9em; line-height: 1.4; text-align: left; cursor: pointer;
}
.es-opt:hover:not([disabled]) { border-color: var(--accent); }
.es-opt:focus-visible, .es-primary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.es-opt kbd, .es-primary kbd { font: 600 0.8em var(--f-code); color: var(--ink-e2); background: none; border: 0; padding: 0; min-width: 1.2em; }
.es-opt-text { flex: 1; }
.es-opt.is-picked { border-color: var(--accent); background: var(--accent-soft); }
.es-opt.is-ok { border-color: var(--ok); background: var(--ok-soft); }
.es-opt.is-ok kbd, .es-opt.is-ok .es-tag { color: var(--ok); }
.es-opt.is-miss { border-style: dashed; border-color: var(--miss); background: var(--miss-soft); }
.es-opt.is-miss kbd, .es-opt.is-miss .es-tag { color: var(--miss); }
.es-opt.is-dim { opacity: 0.6; }
.es-opt[disabled] { cursor: default; opacity: 1; color: var(--ink-e); }
.es-opt.is-dim[disabled] { opacity: 0.6; }
.es-tag { font-size: 0.75em; font-weight: 700; white-space: nowrap; }

.es-actions { display: flex; justify-content: flex-end; }
.es-primary {
  min-height: var(--tap); padding: 0 22px; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--accent); color: #fff; font: 700 0.9em var(--f-read); display: inline-flex; align-items: center; gap: 12px;
}
.es-primary kbd { color: rgba(255, 255, 255, 0.75); }
.es-primary[disabled] { opacity: 0.45; cursor: default; }
.theme-estudio .es-primary { color: #0e1420; } .theme-estudio .es-primary kbd { color: rgba(14, 20, 32, 0.7); }

.es-label { font-size: 0.85em; color: var(--ink-e2); }
.es-text {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 6em;
  font: inherit; font-size: max(16px, 0.9em); /* ≥16 px: iOS no hace zoom al enfocar */
  color: var(--ink-e); background: var(--bg); border: 2px solid var(--line-e); border-radius: 12px; padding: 12px 14px;
}
.es-text:focus { outline: none; border-color: var(--accent); }
.es-yours { margin: 0; padding: 10px 14px; border-left: 4px solid var(--accent); background: var(--bg); border-radius: 0 12px 12px 0; white-space: pre-wrap; font-size: 0.9em; }
.es-point { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line-e); }
.es-point p { margin: 0; font-size: 0.9em; }
.es-model { border: 1px solid var(--line-e); border-radius: 12px; padding: 10px 14px; }
.es-model summary { cursor: pointer; font-weight: 700; color: var(--accent); min-height: 32px; display: flex; align-items: center; }
.es-model p { margin: 8px 0 0; font-size: 0.9em; }
.es-bullets { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 8px; }
.es-terms { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.es-terms code, .es-card code { font-family: var(--f-code); font-size: 0.8em; background: var(--accent-soft); color: var(--accent); padding: 3px 8px; border-radius: 6px; }

/* Revelación de una predicción: franja sobre la caja de diálogo, no bloquea */
.es-reveal {
  position: absolute; z-index: 7; left: 50%; transform: translateX(-50%); top: calc(24px + var(--sat, 0px));
  width: min(calc(100% - 32px), 760px);
  font-family: var(--f-read); font-size: calc(var(--fs-body) * 0.82); line-height: 1.45;
}
.es-reveal[hidden] { display: none; }
.es-reveal p { margin: 0; padding: 12px 16px; border-radius: 12px; background: var(--surface); color: var(--ink-e); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); border-left: 5px solid var(--accent); }
.es-reveal p.is-ok { border-left-color: var(--ok); }
.es-reveal p.is-miss { border-left-color: var(--miss); }

/* ---------- «Hoy» y repaso (portada del lector) ---------- */
body.theme-estudio #reader-cover { background: var(--bg); color: var(--ink-e); }
body.theme-estudio .reader-card.es-hoy, body.theme-estudio .reader-card.es-repaso { color: var(--ink-e); font-family: var(--f-read); font-size: var(--fs-body); }
.es-hoy h1 { margin: 0; font: 700 2.2em/1.1 var(--f-read); color: var(--ink-e); }
.es-plan { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; color: var(--ink-e2); }
.es-hoy .es-primary, .es-link-btn { justify-content: center; text-decoration: none; }
.es-link { text-align: center; color: var(--accent); min-height: 44px; display: flex; align-items: center; justify-content: center; }
.reader-card.es-repaso { position: static; transform: none; width: min(760px, 100%); max-height: none; }

@media (max-width: 600px) {
  .es-card { padding: 16px 16px; gap: 12px; bottom: calc(10px + var(--sab, 0px)); width: calc(100% - 20px); }
  .es-rate .es-opt, .es-conf .es-opt, .es-levels .es-opt { min-width: 0; }
}

/* La portada del lector trae títulos dorados y botón dorado: en el tema, tinta y azul */
body.theme-estudio .reader-card h2.es-q { color: var(--ink-e); text-transform: none; letter-spacing: 0; font-size: 1.15em; }
body.theme-estudio .reader-card .primary.es-primary { background: var(--accent); color: #fff; border: 0; }
body.theme-estudio .reader-card .primary.es-primary { color: #0e1420; }
/* En pantallas táctiles las teclas sobran */
@media (hover: none) { .es-card kbd, .es-hoy kbd, .es-primary kbd { display: none; } }
/* Lector: «Reportar» y «Menú» bajo la barra de progreso, sin tapar la caja de texto */
body.theme-estudio[data-reader="1"] .reader-report-btn,
body.theme-estudio[data-reader="1"] .reader-menu-btn { top: calc(22px + var(--sat, 0px)); bottom: auto; }
body.theme-estudio[data-reader="1"] .es-reveal { top: calc(76px + var(--sat, 0px)); }

/* ---------- v2: consecuencia, drill, teaser ---------- */
.es-kicker.is-ok { color: var(--ok); }
.es-kicker.is-miss { color: var(--miss); }
.es-speaker { font-size: var(--fs-name); font-weight: 700; font-variant: small-caps; letter-spacing: 0.06em; color: var(--accent); }
.es-line { margin: 0; font-size: 1.05em; }
.es-line.is-narrator { color: var(--ink-e2); font-style: italic; }
.es-item { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line-e); }
.es-item:first-of-type { border-top: 0; padding-top: 0; }
.es-item-q { margin: 0; font-weight: 700; font-size: 0.95em; }
.es-item.is-wait { opacity: 0.45; pointer-events: none; }
.es-item .es-options { flex-direction: row; }
.es-item .es-opt { flex: 1 1 0; }
.stage.is-teaser .speaker { display: block; }
.stage.is-teaser .speaker::before { content: "Post-créditos · "; color: var(--ink-e2); font-variant: normal; letter-spacing: 0; }
.stage.is-teaser .dialogue-frame { border-color: var(--accent); }
/* Entrenamiento en móvil: una opción por fila, que las respuestas no se partan en columnas estrechas */
@media (max-width: 600px) {
  .es-item .es-options { flex-direction: column; }
}

/* ---------- modo aventura (spec 2026-10-26 §5.5): panel de piedra, HUD de runas, cinemática ---------- */
body.theme-estudio .es-card, body.theme-estudio .es-reveal p, body.theme-estudio .dialogue-frame {
  border: 2px solid var(--line-e);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 18px 50px rgba(0, 0, 0, 0.45);
  background: var(--glass);
}
body.theme-estudio .es-kicker, body.theme-estudio .speaker { color: var(--accent); }
body.theme-estudio .es-segs i { background: rgba(241, 233, 216, 0.25); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3); }
body.theme-estudio .es-segs i.hecho { background: var(--accent); box-shadow: 0 0 6px var(--accent); }
body.theme-estudio .es-segs i.q { border-radius: 2px; transform: rotate(45deg) scale(0.8); } /* marcas de runa */
body.theme-estudio .es-opt { background: rgba(0, 0, 0, 0.18); }
body.theme-estudio .es-opt.is-picked { background: var(--accent-soft); }

.es-hud {
  position: absolute; z-index: 8; left: calc(12px + var(--sal, 0px)); top: calc(26px + var(--sat, 0px));
  display: flex; align-items: center; gap: 10px; pointer-events: none;
}
.es-hud[hidden] { display: none; }
.es-retrato {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 0;
  border: 2px solid var(--accent); background: var(--glass); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}
.es-runas { display: flex; align-items: center; gap: 4px; }
.es-runa {
  width: 14px; height: 14px; border: 2px solid var(--accent); transform: rotate(45deg); border-radius: 3px;
  background: linear-gradient(135deg, var(--accent-soft), transparent); opacity: 0.95;
}
.es-runa.is-rota { border-color: var(--miss); background: linear-gradient(135deg, var(--miss-soft) 40%, transparent 41%, transparent 59%, var(--miss-soft) 60%); animation: es-runa-rota 420ms ease; }
.es-runa-extra { font: 700 13px var(--f-code); color: var(--miss); margin-left: 4px; }
@keyframes es-runa-rota { 0% { transform: rotate(45deg) scale(1.6); opacity: 0; } 100% { transform: rotate(45deg) scale(1); opacity: 0.95; } }
body[data-reader="1"].theme-estudio .reader-report-btn { top: calc(90px + var(--sat, 0px)); } /* deja sitio al HUD */

.es-cine {
  position: absolute; inset: 0; z-index: 12; background: #000; display: flex; align-items: center; justify-content: center;
}
.es-cine[hidden] { display: none; }
.es-cine video { width: 100%; height: 100%; object-fit: cover; }
.es-cine.is-fin { z-index: 1; pointer-events: none; } /* último fotograma como fondo: la caja y la tarjeta encima */
.es-cine.is-fin .es-cine-btn { display: none; }
.es-cine-btn {
  position: absolute; right: calc(16px + var(--sar, 0px)); bottom: calc(16px + var(--sab, 0px)); z-index: 2;
  min-height: 44px; padding: 0 18px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.55); color: #fff; font: 700 15px var(--f-read); cursor: pointer; backdrop-filter: blur(6px);
}
.es-cine-btn[hidden] { display: none; }
.es-cine-ver { right: auto; bottom: auto; min-height: 56px; padding: 0 28px; font-size: 18px; border-color: var(--accent); }
.stage.is-cine .dialogue, .stage.is-cine .es-card, .stage.is-cine .es-reveal { visibility: hidden; }
.stage.is-cine .es-cine.is-fin ~ .dialogue { visibility: visible; }

/* barrido de runas al cambiar de pantalla */
.stage.is-estudio-wipe::before {
  content: ""; position: absolute; inset: 0; z-index: 11; pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(95, 211, 230, 0.35) 50%, transparent 100%);
  animation: es-wipe 300ms ease-out forwards;
}
@keyframes es-wipe { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .stage.is-estudio-wipe::before { animation: none; display: none; } }

/* Hechizo: un personaje invoca un vídeo explicativo (stickman) sobre el decorado. */
.es-hechizo {
  position: absolute; inset: 0; z-index: 13; display: flex; align-items: center; justify-content: center;
  padding: calc(16px + var(--sat, 0px)) calc(16px + var(--sar, 0px)) calc(16px + var(--sab, 0px)) calc(16px + var(--sal, 0px));
  background: radial-gradient(circle at 50% 50%, rgba(8, 20, 32, 0.55), rgba(0, 0, 0, 0.8));
}
.es-hechizo[hidden] { display: none; }
.es-hechizo-runas {
  position: absolute; left: 50%; top: 50%; width: min(70vmin, 420px); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; border: 3px solid var(--accent); opacity: 0; pointer-events: none;
  box-shadow: 0 0 24px var(--accent), inset 0 0 24px var(--accent-soft);
  background: repeating-conic-gradient(from 0deg, var(--accent-soft) 0deg 6deg, transparent 6deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 54%, #000 55%, #000 70%, transparent 71%, transparent 84%, #000 85%);
  mask: radial-gradient(circle, transparent 54%, #000 55%, #000 70%, transparent 71%, transparent 84%, #000 85%);
}
.es-hechizo.is-invocando .es-hechizo-runas { animation: es-invocar 900ms ease-out forwards; }
@keyframes es-invocar {
  0% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  60% { opacity: 1; transform: scale(1) rotate(160deg); }
  100% { opacity: 0; transform: scale(1.25) rotate(240deg); }
}
.es-hechizo-marco {
  position: relative; margin: 0; width: min(100%, 880px); display: flex; flex-direction: column; gap: 8px;
  padding: 10px; border-radius: 16px; border: 2px solid var(--accent); background: rgba(10, 18, 28, 0.92);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 28px rgba(95, 211, 230, 0.35);
  animation: es-marco 260ms ease-out;
}
.es-hechizo-marco[hidden] { display: none; }
.es-hechizo-marco figcaption { color: #fff; font: 700 15px var(--f-read); padding: 2px 4px; }
.es-hechizo-marco video { width: 100%; max-height: calc(100dvh - 160px); aspect-ratio: 16 / 9; object-fit: contain; background: #fff; border-radius: 10px; }
.es-hechizo-acciones { display: flex; justify-content: flex-end; gap: 8px; }
.es-hechizo-acciones .es-cine-btn { position: static; }
.es-hechizo-acciones .es-cine-btn kbd { font-size: 11px; opacity: 0.7; margin-left: 4px; }
@keyframes es-marco { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: scale(1); } }
.stage.is-hechizo .dialogue, .stage.is-hechizo .es-card, .stage.is-hechizo .es-reveal { visibility: hidden; }
.es-hechizo-chip {
  position: absolute; z-index: 9; left: calc(16px + var(--sal, 0px)); top: calc(90px + var(--sat, 0px));
  min-height: 44px; padding: 0 14px; border-radius: 22px; border: 1px solid var(--accent);
  background: rgba(10, 18, 28, 0.7); color: #fff; font: 700 14px var(--f-read); cursor: pointer; backdrop-filter: blur(6px);
}
.es-hechizo-chip[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) {
  .es-hechizo.is-invocando .es-hechizo-runas, .es-hechizo-marco { animation: none; }
}