/* KAIROS ACADEMY TECH — kairos-lesson-deck.css · DECK.B1
 *
 * La ropa de una slide, en un sitio: la usan la página de presentar, la
 * previsualización del estudio y el PDF. Va con
 * `kairos-lesson-deck-render-v1.js`, que emite estas clases; separarlas sería
 * pedir que el profesor prepare una cosa y proyecte otra.
 *
 * Todo lo de aquí sale de una premisa: ESTO SE MIRA DESDE LA ÚLTIMA FILA.
 */
/* ── PROYECTAR NO ES LEER ─────────────────────────────────────────────────
   Esta página se mira desde la última fila, no desde el teclado. De ahí todo
   lo demás: un tamaño de letra que sale del ALTO de la ventana (no de un px
   fijo, que en un proyector 4:3 se sale), una sola idea por pantalla, y
   contraste alto sin fondo blanco — un blanco a pantalla completa en un aula
   a oscuras deslumbra y la gente deja de mirar. */
:root{--bg:#08071a;--panel:#17123a;--ink:#f6f4ff;--muted:#b3abd4;--gold:#e2c98e;--violet:#8d7bf7;--teal:#35d0ab}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;overflow:hidden;
  background:radial-gradient(circle at 12% 5%,#33206b99,transparent 34%),radial-gradient(circle at 90% 78%,#123c4b66,transparent 30%),var(--bg)}
.deck{position:relative;height:100%;display:flex;flex-direction:column}
.slide{flex:1;min-height:0;display:none;flex-direction:column;justify-content:center;gap:2.2vh;
  padding:max(5vh,env(safe-area-inset-top)) max(clamp(30px,7vw,124px),env(safe-area-inset-right))
    max(7vh,env(safe-area-inset-bottom)) max(clamp(30px,7vw,124px),env(safe-area-inset-left));
  text-align:left;overflow:hidden;isolation:isolate}
.slide{--deck-accent:#8d7bf7;--deck-accent-soft:#eeeafd;--deck-subject-ink:#2b2250}
/* One canonical deck, five visual grammars. These are editorial surfaces—not
   curricular illustrations—so they can vary by subject without claiming a
   fact that the Lesson did not provide. */
.slide.subject-math{background-image:linear-gradient(#35d0ab0b 1px,transparent 1px),linear-gradient(90deg,#35d0ab0b 1px,transparent 1px);background-size:48px 48px}
.slide.subject-science{background-image:radial-gradient(circle at 82% 24%,#35d0ab18 0 3%,transparent 3.4%),radial-gradient(circle at 78% 30%,transparent 0 10%,#35d0ab12 10.4% 10.8%,transparent 11.2%)}
.slide.subject-language{background-image:repeating-linear-gradient(0deg,transparent 0 42px,#91436f12 43px 44px)}
.slide.subject-social_studies{background-image:linear-gradient(105deg,#9b581f12 0 23%,transparent 23.2%),linear-gradient(90deg,transparent 68%,#e2c98e0b 68.2%)}
.slide.subject-arts{background-image:radial-gradient(ellipse at 15% 85%,#6849bd24,transparent 35%),radial-gradient(ellipse at 86% 18%,#91436f20,transparent 32%)}
.slide .kicker{color:color-mix(in srgb,var(--deck-accent) 54%,white)}
.slide .slide-mark{color:var(--deck-accent)}
.slide.frame-route::after,.slide.frame-sequence::after,.slide.frame-check::after{content:"";position:absolute;z-index:0;pointer-events:none}
.slide.frame-route::after{left:7vw;right:7vw;bottom:5vh;height:4px;background:linear-gradient(90deg,var(--deck-accent) 0 34%,#ffffff20 34%);border-radius:999px}
.slide.frame-sequence::after{left:clamp(24px,4vw,72px);top:18%;bottom:18%;width:3px;background:linear-gradient(var(--deck-accent),transparent);border-radius:999px}
.slide.frame-check::after{inset:clamp(18px,3vw,48px);border:2px solid color-mix(in srgb,var(--deck-accent) 52%,transparent);border-radius:clamp(18px,3vw,34px)}
.slide.layout-flow .concept-node{border-top-color:var(--deck-accent)}
.slide.layout-card_grid .task-index{color:color-mix(in srgb,var(--deck-accent) 62%,white)}
.slide.layout-worksheet .body,.slide.layout-worksheet .opts{max-width:34em}
.presentation-mode .slide{padding-top:max(13vh,calc(env(safe-area-inset-top) + 82px))}
.slide.on{display:flex}
.slide>*:not(.slide-mark){position:relative;z-index:1}
.slide-mark{position:absolute;z-index:0;right:clamp(24px,5vw,82px);top:clamp(20px,5vh,62px);
  width:clamp(86px,14vw,190px);aspect-ratio:1;opacity:.14;color:var(--violet);pointer-events:none}
.slide-mark svg{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2}
.slide-mark span{position:absolute;inset:0;display:grid;place-items:center;color:var(--gold);
  font:900 clamp(30px,7vw,84px)/1 Georgia,serif}
.kicker{color:var(--gold);font-size:clamp(11px,1.5vh,17px);font-weight:900;letter-spacing:.18em;text-transform:uppercase}
h1{margin:0;font-size:clamp(30px,7.2vh,86px);line-height:1.06;letter-spacing:-.02em}
h2{margin:0;font-size:clamp(24px,5.4vh,60px);line-height:1.1;letter-spacing:-.015em}
/* El tamaño sale del ALTO de la ventana, no de px fijos: en un proyector el
   ancho varía y el alto no. 3,8vh en 1080p son 41px — el suelo real para que
   la última fila lea sin entornar. */
.body{font-size:clamp(19px,3.45vh,40px);line-height:1.38;max-width:23em;color:#e8e4ff}
.body p{margin:0 0 .7em}
.body code{background:#ffffff14;border-radius:6px;padding:.1em .35em;font-size:.92em}
.body strong{color:#fff}
/* Una composición conceptual no añade ideas: distribuye fragmentos exactos
   del texto fuente en una ruta visual. El contenido conserva su orden y gana
   aire, jerarquía y una escala apta para smart board. */
.concept-diagram{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:stretch;gap:clamp(24px,4vw,66px);max-width:100%;position:relative}
.concept-diagram.points-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.concept-node{position:relative;min-height:clamp(170px,28vh,310px);display:flex;flex-direction:column;
  justify-content:space-between;gap:2vh;padding:clamp(22px,3vw,42px);border:1px solid #ffffff26;
  border-radius:clamp(20px,3vw,34px);background:linear-gradient(145deg,#ffffff12,#8d7bf710);
  box-shadow:0 24px 80px #0005,inset 0 1px #ffffff18}
.concept-node:nth-of-type(3n+1){border-top:4px solid var(--teal)}
.concept-node:nth-of-type(3n+3){border-top:4px solid var(--gold)}
.concept-index{font-size:clamp(11px,1.5vh,17px);font-weight:950;letter-spacing:.18em;color:var(--gold)}
.concept-node p{margin:0;font-size:clamp(18px,2.75vh,32px);line-height:1.32;color:#f4f1ff;font-weight:680}
.concept-link{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:clamp(34px,4vw,52px);
  aspect-ratio:1;border:1px solid #8d7bf766;border-radius:50%;background:#17123a;color:#cfc6ff;
  font-size:clamp(17px,2.6vh,28px);transform:translate(-50%,-50%)}
.concept-diagram.points-2 .concept-link{left:50%}
.concept-diagram.points-3 .concept-link:first-of-type{left:33.333%}
.concept-diagram.points-3 .concept-link:last-of-type{left:66.666%}
/* Práctica y transferencia tienen una forma distinta del texto explicativo:
   consignas literales, grandes y numeradas, que la clase puede ejecutar una
   por una. Sin conectores: el orden guía la actividad, no inventa causalidad. */
.task-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,38px);align-items:stretch}
.task-cards.cards-1{grid-template-columns:minmax(0,1fr);max-width:34em}
.task-cards.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.task-card{min-height:clamp(160px,25vh,280px);display:flex;flex-direction:column;gap:2vh;
  padding:clamp(20px,2.7vw,38px);border:1px solid #ffffff28;border-radius:clamp(18px,2.5vw,30px);
  background:linear-gradient(155deg,#ffffff14,#35d0ab0c);box-shadow:0 22px 70px #0004,inset 0 1px #ffffff1c}
.slide.apply .task-card{background:linear-gradient(155deg,#ffffff14,#e2c98e0d);border-color:#e2c98e45}
.task-index{font-size:clamp(11px,1.5vh,17px);font-weight:950;letter-spacing:.18em;color:var(--teal)}
.slide.apply .task-index{color:var(--gold)}
.task-card p{margin:auto 0;font-size:clamp(18px,2.65vh,31px);line-height:1.32;color:#f4f1ff;font-weight:680}
/* La pregunta y la discusión van SOLAS y centradas: son el momento en que la
   clase habla, y cualquier otra cosa en pantalla compite con eso. */
.slide.solo{justify-content:center;text-align:center;align-items:center}
.slide.solo .body{font-size:clamp(22px,5vh,54px);max-width:18em;line-height:1.25;text-align:center}
.slide.question:not(.solo) .body,.slide.talk:not(.solo) .body{padding:clamp(18px,3vh,34px);
  border:1px solid #ffffff1f;border-left:4px solid var(--gold);border-radius:22px;
  background:linear-gradient(120deg,#ffffff0d,#8d7bf70a);box-shadow:0 22px 70px #0003}
.slide.question.phase-prompt .body{border-left-color:var(--teal)}
.slide.hook{background:linear-gradient(120deg,#35d0ab12,transparent 58%)}
.slide.hook .kicker{color:var(--teal)}
.slide.model.phase-reveal{background:radial-gradient(circle at 78% 48%,#e2c98e16,transparent 36%)}
.slide.model.phase-reveal .kicker::before{content:"✓ ";color:var(--teal)}
.slide.continued .kicker{padding-right:clamp(90px,17vw,220px)}
.slide.cover{justify-content:center;text-align:center;align-items:center}
.slide.cover h1{font-size:clamp(34px,9vh,110px);max-width:16em}
.slide.cover .sub{color:var(--muted);font-size:clamp(16px,2.8vh,30px)}
.cover-layout{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);align-items:center;gap:clamp(24px,4vw,68px);width:100%;text-align:left}
.cover-copy{display:grid;gap:2vh;min-width:0}
.slide.cover .cover-layout h1{font-size:clamp(32px,7vh,78px)}
.slide.cover .cover-layout .fig img{max-height:70vh}
/* El tema `workbook` no es una piel arbitraria: enlaza una lección con su
   guía editorial aprobada. La superficie marfil, la tinta ciruela y el verde
   de apoyo reproducen la jerarquía del cuaderno sin proyectar una página
   blanca desnuda. Profesor, smartboard y exportación usan esta misma clase. */
.slide.theme-workbook{--deck-accent:#91436f;--deck-accent-soft:#faeaf3;--deck-subject-ink:#4c243c;color:#231c2b;
  background-color:#fbf8f2;background-image:linear-gradient(90deg,#91436f 0 9px,transparent 9px),radial-gradient(circle at 92% 10%,#f1dce833 0 14%,transparent 14.4%),repeating-linear-gradient(0deg,transparent 0 43px,#91436f0a 44px 45px)}
.slide.theme-workbook .kicker{color:#7b315c}.slide.theme-workbook h1,.slide.theme-workbook h2{color:#2a2030}
.slide.theme-workbook .sub,.slide.theme-workbook .fig figcaption,.slide.theme-workbook .cap{color:#5f5368}
.slide.theme-workbook .body,.slide.theme-workbook .body strong,.slide.theme-workbook .step .txt,.slide.theme-workbook .step .txt b{color:#2d2633}
.slide.theme-workbook .body code{background:#f0e7ef;color:#4c243c}
.slide.theme-workbook .slide-mark{color:#91436f;opacity:.09}.slide.theme-workbook .slide-mark span{color:#7b315c}
.slide.theme-workbook .fig img{background:#fff;border-color:#d8c8d4;box-shadow:0 18px 44px #4c243c1c}
.slide.theme-workbook .concept-node,.slide.theme-workbook .task-card{border-color:#d8c8d4;background:linear-gradient(145deg,#fff,#faeaf3);box-shadow:0 14px 34px #4c243c14}
.slide.theme-workbook .concept-node p,.slide.theme-workbook .task-card p{color:#2d2633}
.slide.theme-workbook .concept-index,.slide.theme-workbook .task-index{color:#7b315c}
.slide.theme-workbook .concept-link{border-color:#b889a8;background:#fff;color:#7b315c}
.slide.theme-workbook .student-action{border-color:#70b6a7;background:#e3f5f0;color:#174f46}
.slide.theme-workbook .student-action::before{background:#246f61;color:#fff}
.slide.theme-workbook.question:not(.solo) .body,.slide.theme-workbook.talk:not(.solo) .body{border-color:#d8c8d4;border-left-color:#91436f;background:#fff;box-shadow:0 14px 34px #4c243c12}
.slide.theme-workbook .step .n{background:#faeaf3;border-color:#b889a8;color:#6f2e55}
.slide.theme-workbook .opt{border-color:#cdb8c7;background:#fff;color:#2d2633}
.slide.theme-workbook.worked.rhythm-first .body,.slide.theme-workbook.worked.rhythm-even .body,.slide.theme-workbook.worked.rhythm-odd .body,.slide.theme-workbook.worked.rhythm-last .body{background:#fff;border-color:#91436f;box-shadow:0 14px 34px #4c243c12;color:#2d2633}
@media(max-width:720px){.cover-layout{grid-template-columns:1fr;overflow:auto}.slide.cover .cover-layout .fig img{max-height:38vh}}
/* El caso resuelto: los pasos NO se apilan como párrafos. Numerados y con su
   título, la clase sabe en cuál vas sin que se lo digas. */
.steps{display:flex;flex-direction:column;gap:1.6vh;max-width:30em}
.step{display:flex;gap:.8em;align-items:baseline}
.step .n{flex:none;width:1.7em;height:1.7em;border-radius:50%;display:grid;place-items:center;
  background:#8d7bf726;border:1px solid #8d7bf766;color:#cdc2ff;font-size:clamp(13px,1.9vh,21px);font-weight:900}
.step .txt{font-size:clamp(17px,3vh,34px);line-height:1.4}
.step .txt b{display:block;color:#fff;margin-bottom:.15em}
/* The steps of a worked example keep one sequence while changing visual beat.
   These treatments are structural only; they neither summarize nor add copy. */
.slide.worked.rhythm-first .body{padding:clamp(20px,3vw,40px);border-left:5px solid var(--deck-accent);border-radius:0 24px 24px 0;background:linear-gradient(90deg,color-mix(in srgb,var(--deck-accent) 15%,transparent),transparent)}
.slide.worked.rhythm-even .body{margin-left:auto;padding:clamp(20px,3vw,40px);border-right:5px solid var(--gold);border-radius:24px 0 0 24px;background:linear-gradient(270deg,#e2c98e14,transparent)}
.slide.worked.rhythm-odd .body{max-width:34em;padding:clamp(22px,3vw,42px);border-top:5px solid var(--teal);border-radius:24px;background:linear-gradient(145deg,#35d0ab12,#ffffff08);box-shadow:0 24px 70px #0004}
.slide.worked.rhythm-last{align-items:center;text-align:center;background-image:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--deck-accent) 19%,transparent),transparent 42%)}
.slide.worked.rhythm-last .body{max-width:26em;padding:clamp(22px,3vw,42px);border:1px solid color-mix(in srgb,var(--deck-accent) 48%,transparent);border-radius:30px;background:#ffffff0b;text-align:left}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(18px,3vw,48px);align-items:center;min-height:0}
.fig{min-width:0;display:flex;flex-direction:column;gap:1vh}
/* SVG SIN width PINTA LA COLUMNA ENTERA — el filósofo gigante. El renderizador
   emite viewBox y no width, así que las dimensiones se ponen AQUÍ, siempre. */
.fig svg{width:100%;height:auto;max-height:56vh;display:block;color:var(--ink)}
/* En una diapositiva con gráfica, el plano debe leerse desde el fondo del aula.
   El SVG trae max-width:560px en línea para las vistas pequeñas; aquí la
   proyección grande aprovecha su columna sin cambiar el tamaño del papel. */
@media (min-width:1100px) and (min-height:650px){
  .slide:has(.fig svg[role="img"]) .two{grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr)}
  .slide:has(.fig svg[role="img"]) .fig svg{max-width:none!important;max-height:63vh}
}
.fig img{width:100%;height:auto;max-height:56vh;display:block;object-fit:contain;border-radius:clamp(12px,2vw,24px);
  background:#ffffff08;border:1px solid #ffffff1f}
.fig figcaption,.cap{color:var(--muted);font-size:clamp(12px,1.9vh,20px);line-height:1.35}
.opts{display:flex;flex-wrap:wrap;gap:.8em;justify-content:center;margin-top:2.5vh}
.opt{border:1px solid #ffffff26;background:#ffffff0d;border-radius:999px;padding:.45em 1.1em;
  font-size:clamp(17px,3.2vh,36px);font-weight:800}
.deck-media{display:grid;gap:1.5vh;min-width:0;margin:0;max-width:min(1100px,100%)}
.deck-media video,.deck-media audio{display:block;width:100%;border-radius:18px;background:#000}
.deck-media video{max-height:58vh;object-fit:contain}
.deck-media audio{min-height:54px}
.deck-media figcaption{color:var(--muted);font-size:clamp(13px,1.9vh,20px);line-height:1.35}
.media-transcript{max-height:18vh;overflow:auto;border:1px solid #ffffff22;border-radius:14px;background:#ffffff0b;color:#ded9f5}
.media-transcript summary{cursor:pointer;padding:10px 14px;font-weight:850;color:var(--gold)}
.media-transcript p{margin:0;padding:0 14px 14px;white-space:pre-wrap;line-height:1.5;font-size:clamp(14px,1.9vh,20px)}
.media-print-fallback{display:none}
@media(max-width:720px){
  .slide{padding:5vh 26px 10vh;gap:1.6vh}
  .presentation-mode .slide{padding-top:max(104px,calc(env(safe-area-inset-top) + 84px))}
  .body{font-size:clamp(18px,3.1vh,30px)}
  .slide.solo .body{font-size:clamp(21px,4.2vh,38px)}
  .slide-mark{right:18px;top:18px;opacity:.1}
  .concept-diagram{grid-template-columns:1fr;gap:12px;overflow:auto}
  .concept-node{min-height:auto;padding:18px 20px}
  .concept-link{display:none}
  .task-cards,.task-cards.cards-1,.task-cards.cards-2{grid-template-columns:1fr;overflow:auto}
  .task-card{min-height:auto;padding:18px 20px}
  .two{grid-template-columns:1fr;overflow:auto}
  .fig img{max-height:40vh}
}
/* La orientación y la salida siempre viven arriba. No compiten con avanzar,
   notas o pantalla completa, que siguen siendo controles efímeros abajo. */
.present-topbar{position:fixed;z-index:20;top:0;left:0;right:0;min-height:76px;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(14px,3vw,34px);
  padding:max(12px,env(safe-area-inset-top)) max(18px,calc(env(safe-area-inset-right) + 18px)) 12px
    max(18px,calc(env(safe-area-inset-left) + 18px));
  background:linear-gradient(180deg,#08071af7 58%,#08071acc 82%,transparent);backdrop-filter:blur(14px)}
.present-back{display:inline-flex;align-items:center;gap:8px;color:var(--ink);text-decoration:none;
  border:1px solid #ffffff24;border-radius:12px;padding:9px 13px;font-size:13px;font-weight:850;
  background:#ffffff0b;white-space:nowrap}
.present-back:hover{background:#ffffff18}
.present-heading{min-width:0;display:flex;align-items:baseline;gap:12px}
.present-heading span{max-width:34vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--gold);font-size:11px;font-weight:900;letter-spacing:.12em;text-transform:uppercase}
.present-heading strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink);font-size:clamp(14px,1.8vw,22px)}
/* Navegar no puede depender de descubrir un control que aparece al mover el
   ratón. La barra básica queda quieta y las herramientas viven en un panel
   explícito: en proyección se entiende qué es cada cosa y nada tapa la slide. */
.bar{position:fixed;z-index:80;left:50%;bottom:max(12px,env(safe-area-inset-bottom));display:flex;align-items:center;gap:8px;
  width:max-content;max-width:calc(100% - 24px);padding:7px;border:1px solid #ffffff24;border-radius:16px;
  background:#0e0b26f2;box-shadow:0 16px 48px #0009;transform:translateX(-50%);font-size:13px;color:var(--muted)}
.bar button{background:#ffffff10;border:1px solid #ffffff24;color:var(--ink);border-radius:10px;
  min-width:44px;min-height:44px;padding:7px 12px;font-size:13px;font-weight:800;cursor:pointer}
.bar button:hover{background:#ffffff1c}.bar button:focus-visible{outline:3px solid var(--teal);outline-offset:2px}
.bar #toolsBtn[aria-expanded="true"]{border-color:#e2c98e88;background:#e2c98e1c;color:#f3e6c4}
.count{min-width:4.4em;font-variant-numeric:tabular-nums;font-weight:900;color:var(--ink);text-align:center}
.present-tools{position:absolute;left:50%;bottom:calc(100% + 10px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;
  width:min(720px,calc(100vw - 24px));max-height:min(58vh,460px);overflow:auto;padding:12px;border:1px solid #ffffff2b;border-radius:18px;
  background:#17123af7;box-shadow:0 24px 70px #000b;transform:translateX(-50%)}
.present-tools[hidden]{display:none}.present-tools button{width:100%;white-space:nowrap}
body.tools-open .kss{visibility:hidden}
.present-tools .dots{grid-column:1/-1;display:flex;gap:7px;justify-content:center;flex-wrap:wrap;max-width:none;margin:4px 0 0;padding-top:10px;border-top:1px solid #ffffff18}
.present-tools .dot{width:24px;min-width:24px;height:24px;min-height:24px;border-radius:50%;background:#ffffff2e;border:none;padding:0;cursor:pointer}
.dot{width:9px;height:9px;border-radius:50%;background:#ffffff2e;border:none;padding:0;cursor:pointer}
.dot.on{background:var(--gold)}
.dot.nota{box-shadow:0 0 0 2px #35d0ab55}
@media(max-width:720px){.bar{bottom:10px}.present-tools{grid-template-columns:repeat(2,minmax(0,1fr));max-height:62vh}.bar button{padding-inline:10px}}
/* Las notas son para el PROFESOR. Se abren con N, tapan poco, y jamás salen
   en el PDF que se reparte. */
.notas{position:fixed;right:clamp(14px,3vw,34px);bottom:64px;width:min(420px,42vw);max-height:44vh;overflow:auto;
  display:none;background:#0e0b26f2;border:1px solid #35d0ab44;border-radius:16px;padding:14px 16px;
  color:#d9f5ec;font-size:15px;line-height:1.45;box-shadow:0 24px 70px #000a}
.notas.on{display:block}
.notas b{display:block;color:var(--teal);font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:6px}
.aviso{position:fixed;inset:0;display:grid;place-items:center;padding:8vw;text-align:center;color:var(--muted);font-size:18px;line-height:1.6}

/* ── EL PDF SALE DE ESTA MISMA PÁGINA ────────────────────────────────────
   No hay un segundo generador para imprimir: `?print=1` enseña TODAS las
   slides una debajo de otra y el navegador las pagina. Si el PDF divergiera
   de lo proyectado sería otra vez «dos motores, cada uno con la mitad». */
@page{size:landscape;margin:12mm}
body.print{overflow:auto;background:#fff;color:#12102a}
body.print .bar,body.print .notas,body.print .present-topbar{display:none}
/* El botón de rescate. La página llama sola a `print()`, pero si el diálogo
   no abre —navegador que lo bloquea, pestaña en segundo plano— sin esto el
   profesor se queda en una página sin salida. No sale en el papel. */
.printbtn{display:none}
body.print .printbtn{display:block;position:fixed;top:14px;right:14px;z-index:9;
  background:#12102a;color:#fff;border:0;border-radius:11px;padding:10px 16px;
  font:inherit;font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 8px 26px #0003}
body.print .slide{display:flex!important;break-after:page;page-break-after:always;min-height:88vh;
  border-bottom:1px solid #ddd;color:#12102a;padding-top:5vh;background-image:none}
body.print .slide::after{display:none}
body.print .slide:last-child{break-after:auto;page-break-after:auto}
body.print .body,body.print .step .txt b,body.print h1,body.print h2{color:#12102a}
body.print .kicker{color:#7a5c12}
/* En pantalla el gris apagado descansa la vista; sobre papel blanco baja a
   2:1 de contraste y la leyenda de una figura deja de leerse. El papel no es
   la pantalla con otro fondo. */
body.print .sub,body.print figcaption,body.print .cap{color:#474163}
body.print code{background:#efecf9}
body.print .opt{border-color:#c9c4dd;background:#f5f3fb}
body.print .step .n{background:#ece8fb;border-color:#b9aef2;color:#3d2d8c}
body.print .fig svg{color:#12102a}
body.print .fig img{background:#fff;border-color:#d8d3e8}
body.print .task-card{background:#fff;border-color:#c9c4dd;box-shadow:none}
body.print .task-card p{color:#12102a}
body.print .deck-media video,body.print .deck-media audio,body.print .media-transcript{display:none}
body.print .media-print-fallback{display:block;border:2px solid #7a5c12;padding:20px;border-radius:14px;color:#12102a}
body.print .media-print-fallback p{font-size:18px;line-height:1.45}
body.print .media-print-fallback span{font-weight:800}
/* El diálogo de imprimir del navegador no pasa por `body.print`: llega con
   sus propias reglas. Se repite lo imprescindible para que «Imprimir» desde
   el menú dé lo mismo que el botón PDF. */
@media print{
  body{overflow:visible;background:#fff;color:#12102a}
  .bar,.notas,.printbtn,.present-topbar{display:none!important}
  .slide{display:flex!important;break-after:page;page-break-after:always;color:#12102a;background-image:none!important}
  .slide::after{display:none!important}
  .sub,figcaption,.cap{color:#474163}
  .kicker{color:#7a5c12}
  .fig svg{color:#12102a}
  .fig img{background:#fff;border-color:#d8d3e8}
  .task-card{background:#fff;border-color:#c9c4dd;box-shadow:none}
  .task-card p{color:#12102a}
  .deck-media video,.deck-media audio,.media-transcript{display:none!important}
  .media-print-fallback{display:block;border:2px solid #7a5c12;padding:20px;border-radius:14px;color:#12102a}
  .media-print-fallback p{font-size:18px;line-height:1.45}
  .media-print-fallback span{font-weight:800}
}
/* ── LAS COMPOSICIONES AUTORADAS DEL DECK DE PROYECCIÓN (10-10-2026) ──────
   Una lección declara sus diapositivas 16:9 para el salón: ilustraciones del
   cuaderno aprobado (nunca una página entera), jerarquía clara, poco texto y
   letra grande medida en alto de pantalla. Tema `workbook`: marfil, ciruela y
   verde de apoyo, los del cuaderno. Entrada, explicación, práctica y cierre
   tienen composiciones distintas (hero · cards · sound · dialogue · table ·
   prompt · check). */
.slide.authored{gap:1.6vh;padding-top:max(5vh,env(safe-area-inset-top));padding-bottom:max(5vh,env(safe-area-inset-bottom))}
.slide.authored .kicker{font-size:clamp(12px,2vh,22px)}
.slide.authored h1{font-size:clamp(40px,10vh,124px);line-height:.98;letter-spacing:-.03em;max-width:12em}
.slide.authored h2{font-size:clamp(28px,6.4vh,74px);line-height:1.04;letter-spacing:-.02em;max-width:16em}
.slide.authored .a-body{margin:0;font-size:clamp(20px,3.6vh,42px);line-height:1.3;max-width:28em;color:#e8e4ff}
.slide.authored .a-phrase{margin:1vh 0 0;font-size:clamp(30px,7vh,84px);line-height:1.05;font-weight:850;color:var(--teal)}
.slide.authored .a-note{margin:0;font-size:clamp(16px,2.8vh,32px);line-height:1.3;color:var(--muted);max-width:30em}
.slide.authored .a-copy{display:flex;flex-direction:column;gap:1.6vh;min-width:0}
.slide.authored .a-art{margin:0;display:grid;place-items:center;min-width:0}
.slide.authored .a-art-img{width:min(100%,38vh);max-height:48vh;height:auto;object-fit:contain}
/* hero / sound: texto a la izquierda, ilustración a la derecha */
.slide.authored.a-hero,.slide.authored.a-sound{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;column-gap:clamp(24px,4vw,72px)}
.slide.authored.a-hero.on,.slide.authored.a-sound.on{display:grid}
.slide.authored.a-sound .a-art-img{width:min(100%,30vh)}
/* tarjetas: 4 u 8 por fila, cada una con su ilustración */
.slide.authored .a-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,2vh,28px);margin-top:1vh}
.slide.authored .a-cards.cards-2{grid-template-columns:repeat(2,minmax(0,1fr))}.slide.authored .a-cards.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.slide.authored .a-cards.cards-5,.slide.authored .a-cards.cards-6{grid-template-columns:repeat(3,minmax(0,1fr))}
.slide.authored .a-cards.cards-7,.slide.authored .a-cards.cards-8{grid-template-columns:repeat(4,minmax(0,1fr))}
.slide.authored .a-card{display:flex;flex-direction:column;align-items:center;gap:1.2vh;padding:clamp(14px,2.6vh,30px) clamp(12px,1.6vw,26px);border:1px solid #ffffff26;border-radius:clamp(16px,2.6vh,30px);background:linear-gradient(145deg,#ffffff12,#8d7bf710);text-align:center;min-height:clamp(150px,30vh,330px);justify-content:center}
.slide.authored .a-card-img{width:min(60%,14vh);height:auto;max-height:14vh;object-fit:contain}
.slide.authored .a-card-n{display:grid;place-items:center;width:2em;height:2em;border-radius:50%;background:var(--deck-accent);color:#fff;font-size:clamp(16px,2.6vh,30px);font-weight:900}
.slide.authored .a-card-title{font-size:clamp(18px,3.1vh,36px);line-height:1.15;font-weight:850}
.slide.authored .a-card-sub{font-size:clamp(15px,2.5vh,28px);line-height:1.25;color:var(--teal);font-weight:750}
.slide.authored.a-goals .a-card{align-items:flex-start;text-align:left;min-height:clamp(120px,22vh,240px)}
/* fichas del abecedario */
.slide.authored .a-chips{display:flex;flex-wrap:wrap;gap:clamp(8px,1.2vh,16px);margin-top:1vh}
.slide.authored .a-chip{padding:.4em .8em;border:2px solid #ffffff33;border-radius:.6em;background:#ffffff0d;font-size:clamp(16px,3vh,34px);font-weight:850;white-space:nowrap}
/* diálogo a dos voces: cada hablante a un lado, las líneas alternan color y lado */
.slide.authored .a-stage{display:grid;grid-template-columns:clamp(90px,16vh,190px) minmax(0,1fr) clamp(90px,16vh,190px);align-items:end;gap:clamp(16px,2vw,40px);margin-top:1vh}
.slide.authored .a-speaker{display:flex;flex-direction:column;align-items:center;gap:.6vh}
.slide.authored .a-speaker span{padding:.25em .9em;border-radius:999px;background:#2a1d4f;color:#fff;font-size:clamp(14px,2.2vh,24px);font-weight:850}
.slide.authored .a-face{width:100%;height:auto;max-height:20vh;object-fit:contain}
.slide.authored .a-lines{display:flex;flex-direction:column;gap:clamp(8px,1.4vh,18px);align-self:center}
.slide.authored .a-line{margin:0;max-width:78%;padding:.45em .9em;border-radius:1.1em;font-size:clamp(20px,3.8vh,46px);line-height:1.2;font-weight:750}
.slide.authored .a-line.is-a{align-self:flex-start;background:#ffffff14;border-bottom-left-radius:.3em}
.slide.authored .a-line.is-b{align-self:flex-end;background:#35d0ab22;border-bottom-right-radius:.3em;color:#c9f7eb}
/* tabla tú / yo */
.slide.authored .a-table{width:100%;max-width:60em;border-collapse:separate;border-spacing:0 clamp(6px,1.2vh,14px);margin-top:1vh}
.slide.authored .a-table td{padding:.5em 1em;font-size:clamp(20px,3.8vh,46px);line-height:1.2;font-weight:750;background:#ffffff0f}
.slide.authored .a-table td:first-child{border-radius:.5em 0 0 .5em;color:#fff}
.slide.authored .a-table td:last-child{border-radius:0 .5em .5em 0;color:var(--teal);background:#35d0ab14}
/* consigna y comprobación: centradas, con ítems y opciones grandes */
.slide.authored.a-prompt,.slide.authored.a-check,.slide.authored.a-statement{align-items:center;text-align:center}
.slide.authored .a-items{display:flex;flex-direction:column;gap:clamp(6px,1.2vh,14px);align-items:flex-start;text-align:left;margin-top:.6vh}
.slide.authored .a-item{margin:0;font-size:clamp(20px,3.8vh,46px);line-height:1.25;font-weight:750}
.slide.authored .a-options .opt{font-size:clamp(20px,3.8vh,46px);padding:.4em 1em}
.slide.authored.a-check .a-options .opt:nth-child(1){border-color:#35d0ab88;background:#35d0ab1f}
.slide.authored.a-check .a-options .opt:nth-child(2){border-color:#e2c98e88;background:#e2c98e1f}
.slide.authored.a-check .a-options .opt:nth-child(3){border-color:#f28b9b88;background:#f28b9b1f}
/* tema cuaderno: marfil, ciruela y verde de apoyo */
.slide.authored.theme-workbook .a-body{color:#2d2633}
.slide.authored.theme-workbook .a-phrase{color:#087e78}
.slide.authored.theme-workbook .a-note{color:#5f5368}
.slide.authored.theme-workbook .a-card{border-color:#d8c8d4;background:linear-gradient(145deg,#fff,#faeaf3);box-shadow:0 14px 34px #4c243c14}
.slide.authored.theme-workbook .a-card-title{color:#2a2030}.slide.authored.theme-workbook .a-card-sub{color:#087e78}
.slide.authored.theme-workbook .a-chip{border-color:#cdb8c7;background:#fff;color:#4c243c}
.slide.authored.theme-workbook .a-line.is-a{background:#fff;color:#2a2030;box-shadow:0 10px 24px #4c243c12}
.slide.authored.theme-workbook .a-line.is-b{background:#faeaf3;color:#7b2857}
.slide.authored.theme-workbook .a-speaker span{background:#2a1d4f}
.slide.authored.theme-workbook .a-table td{background:#fff;color:#2a2030;box-shadow:0 6px 18px #4c243c0f}
.slide.authored.theme-workbook .a-table td:last-child{color:#087e78;background:#e3f5f0}
.slide.authored.theme-workbook .a-item{color:#2d2633}
.slide.authored.theme-workbook .a-options .opt{color:#2d2633}
.slide.authored.theme-workbook .a-art-img,.slide.authored.theme-workbook .a-card-img,.slide.authored.theme-workbook .a-face{mix-blend-mode:multiply}
@media(max-width:720px){
  .slide.authored.a-hero,.slide.authored.a-sound{grid-template-columns:1fr;overflow:auto}
  .slide.authored .a-cards,.slide.authored .a-cards.cards-5,.slide.authored .a-cards.cards-6,.slide.authored .a-cards.cards-7,.slide.authored .a-cards.cards-8{grid-template-columns:repeat(2,minmax(0,1fr));overflow:auto}
  .slide.authored .a-card{min-height:auto}
  .slide.authored .a-stage{grid-template-columns:64px 1fr 64px;gap:10px}
  .slide.authored .a-line{max-width:92%}
}
body.print .slide.authored .a-body,body.print .slide.authored .a-item,body.print .slide.authored .a-card-title{color:#12102a}

/* DISENO-001 (21-10-2026): una pieza de materia en el tablero. La dibuja el
   mismo lector que la tableta y el papel, sobre una hoja clara que ocupa la
   diapositiva; sus figuras (SVG) crecen con la pantalla. */
.slide.is-piece{justify-content:flex-start;gap:1.6vh}
.slide.is-piece h2{font-size:clamp(22px,3.2vw,46px)}
.slide.is-piece .piece-stage{flex:1;min-height:0;overflow:auto;background:#fffdf8;color:#202333;
  border-radius:clamp(12px,1.6vw,22px);padding:clamp(14px,2.2vw,34px);line-height:1.4;
  box-shadow:0 1px 0 #0000000d,0 18px 40px -24px #00000066}
.slide.is-piece .piece-stage .booklet,.slide.is-piece .piece-stage .lr-subject-block{background:transparent;color:inherit;max-width:none;margin:0;padding:0;border:0;box-shadow:none}
/* La pieza trae su propio título: el de la diapositiva sobra (queda la etiqueta del momento). */
.slide.is-piece:has(.piece-stage :is(h1,h2,h3)) > h2{display:none}
/* El papel está medido en px para A4; en el tablero se amplía entero, figuras incluidas. */
@media (min-width:1200px){.slide.is-piece .piece-stage>.deck-piece{zoom:1.25}}
@media (min-width:1600px){.slide.is-piece .piece-stage>.deck-piece{zoom:1.5}}
@media (min-width:2400px){.slide.is-piece .piece-stage>.deck-piece{zoom:2}}
.slide.is-piece .piece-stage svg{max-width:100%;height:auto}
.slide.is-piece .piece-text{font-size:clamp(17px,1.7vw,30px)}
.slide.is-piece .piece-text p{margin:0 0 .5em}