/* EL TABLERO DE LA CLASE (13-10-2026): la cáscara de la maqueta clase-tres-vistas
   (vista Display) sobre los renderers existentes de #screen. Cabecera
   «K KAIROS CLASSROOM · ● Contenido · Momento · Lección», escenario y, al pie,
   el guía de la clase con la línea que dice. Los renderers, el emparejamiento,
   el blackout y la autoridad no cambian: esta hoja sólo reparte el alto y viste.
   Medido para 1920×1080 y 1280×720; en el espejo del docente (?embed=1) el pie
   no se enseña. Los módulos fijos (franja de equipos, ruleta, emoción) siguen
   encima: la franja empuja el pie hacia arriba (body.rv-has-strip). */
.approved-display{--display-head:64px;--display-foot:0px;--display-strip:0px;--display-stage:calc(100dvh - var(--display-head) - var(--display-foot) - var(--display-strip));min-height:100dvh;display:flex;flex-direction:column;background:radial-gradient(ellipse at 50% 25%,#332262 0,transparent 62%),radial-gradient(#8f80bb30 1px,transparent 1px),#0c0a20;background-size:auto,31px 31px,auto;color:#f2efff}
/* La franja de equipos sólo resta su alto cuando está (14-10-2026): antes se restaba siempre
   (--rv-strip-h existe en :root desde que carga route-view) y el escenario dejaba 84 px de
   banda vacía, mitad arriba y mitad abajo, en el mapa y en la página del cuaderno. */
body.rv-has-strip .approved-display{--display-strip:var(--rv-strip-h)}
.approved-display[hidden],.approved-display [hidden]{display:none!important}
.approved-display.has-guide,.approved-display:not(.is-embed){--display-foot:96px}
.approved-display.is-embed{--display-foot:0px}
.approved-display.is-embed .d-foot{display:none!important}
body.rv-has-strip .approved-display{padding-bottom:var(--rv-strip-h)}
/* Cabecera */
.approved-display .d-head,.approved-display .d-foot{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:12px 34px;color:#c7bedc;border-bottom:1px solid #4c3b62}
.approved-display .d-head{min-height:var(--display-head);padding-right:300px;font-size:clamp(12px,1.2vw,19px);flex:none}
.approved-display .d-brand{white-space:nowrap;letter-spacing:.08em;display:flex;align-items:center;gap:10px;font-size:.8em}
.approved-display .d-brand>span{font:700 30px Georgia,serif;color:#e1c888}
.approved-display .d-head b{color:#7ee0ce;font-weight:700;white-space:nowrap}
.approved-display #displayLesson{max-width:36%;text-align:right;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* El botón fijo de voz vive en la cabecera: centrado en su alto y con sitio reservado a la derecha. */
body:has(.approved-display:not([hidden])) .voice-toggle{top:calc((var(--display-head) - 54px)/2);right:24px}
/* Escenario: cada vista a pantalla completa ocupa exactamente el hueco entre cabecera y pie. */
.approved-display #screen.d-main{flex:1;min-height:0;width:100%;margin:0;display:flex;flex-direction:column;justify-content:center}
.approved-display #screen>section,.approved-display #screen>.slide{min-height:var(--display-stage)!important;width:100%}
.approved-display #screen>.game,.approved-display #screen>.walk-stage,.approved-display #screen>.rv,.approved-display #screen>.hkv,.approved-display #screen>.ctv,.approved-display #screen>.esc,.approved-display #screen>.wcv,.approved-display #screen>.lectura,.approved-display #screen>.chess-stage,.approved-display #screen>.tournament-stage,body.rv-has-strip .approved-display #screen>.game,body.rv-has-strip .approved-display #screen>.walk-stage,body.rv-has-strip .approved-display #screen>.esc,body.rv-has-strip .approved-display #screen>.wcv,body.rv-has-strip .approved-display #screen>.rv{height:var(--display-stage);min-height:0!important}
.approved-display #screen>.chess-stage,.approved-display #screen>.tournament-stage,.approved-display #screen>.lectura{overflow:auto}
.approved-display .game{background:transparent;padding:clamp(14px,2vh,26px) 4vw}
.approved-display .game-card{background:transparent;border:0;border-radius:0;box-shadow:none;width:min(1300px,100%);padding:10px 0}
.approved-display .game:not(.is-lobby):not(.is-race) h1{font-size:clamp(30px,4vw,64px);line-height:1.12;letter-spacing:-.035em}
.approved-display .choices{gap:16px}.approved-display .choice{border-radius:18px;box-shadow:0 7px #06041366}
/* El guía ya habla desde el pie: la insignia dentro de la tarjeta sobra. */
.approved-display.has-guide .guide-voice{display:none}
/* Sala de espera (maqueta: «PREPÁRATE · contenido» · «Tu próxima misión empieza aquí.»). */
.approved-display .world-kicker{margin:0 0 10px;color:#7ee0ce;font-weight:900;letter-spacing:.16em;text-transform:uppercase;font-size:clamp(13px,1vw,22px)}
.approved-display .lobby-ready{margin:0 0 4px;color:#f2efff;font-size:clamp(26px,2.6vw,52px);font-weight:850;letter-spacing:-.03em;line-height:1.1;text-transform:none}
.approved-display .lobby-ready b{color:#e1c888}
.approved-display .lobby-windows{--win-h:max(44px,calc((var(--display-stage) - 700px)/var(--rows,1) - 14px))}
/* Trivia en actividad: «PREGUNTA n DE N · TRIVIA» con el reloj a la derecha; debajo de las opciones, qué hacer. */
.approved-display .question-meta{display:flex;justify-content:space-between;align-items:center;gap:16px;text-align:left}
.approved-display .question-meta .eyebrow{text-align:left}
.approved-display .display-clock{flex:none;display:grid;place-items:center;width:72px;height:72px;border:5px solid #5ed8c0;border-radius:50%;color:#6ce1cb;font-size:25px;font-weight:800;font-variant-numeric:tabular-nums;transition:color .3s,border-color .3s}
.approved-display .display-clock.is-urgent{color:#ff8a8a;border-color:#ff6b6b;animation:display-urgent 1s steps(2,jump-none) infinite}
.approved-display .display-clock[hidden]{display:none!important}
@keyframes display-urgent{50%{color:#ffd0d0}}
.approved-display .display-hint{margin:14px auto 0;color:#c2b6d8;font-size:clamp(18px,1.4vw,30px);line-height:1.35;text-wrap:balance}
/* Presupuesto vertical de la pregunta (1080 y 720 sin desplazar): titular a ≤5vh, figura a ≤30vh, opciones a ≤3.1vh. */
.approved-display .game.is-question h1{margin:8px auto 14px;font-size:clamp(36px,min(3vw,5vh),64px)}
.approved-display .question-visual .question-figure{max-height:min(30vh,480px)}
.approved-display .game.is-question .choice{padding:clamp(12px,1.4vh,22px) 24px;font-size:clamp(26px,min(1.8vw,3.1vh),40px)}
.approved-display .game.is-question .choices{margin-top:14px}
.approved-display .game.is-question .metrics{margin-top:12px;row-gap:4px}
.approved-display .game.is-question .metrics .display-hint{margin:0;color:#f2efff;font-weight:700}
.approved-display .game.is-question .game-card{padding-block:0}
/* En 1080 la columna de competición enseña a los tres primeros; en 720, a los dos primeros. */
@media(max-height:1100px){.approved-display .competition-rail .live-player:nth-child(n+4){display:none}}
/* Carrera: los carriles se reparten el escenario, no la ventana. */
.approved-display .race-track{--lane-h:clamp(34px,calc((var(--display-stage) - 470px)/var(--lanes,1) - var(--gap)),72px)}
/* Láminas: el renderizador compartido mide en vh; si no cabe, se desplaza dentro de la lámina, nunca la página. */
.approved-display #screen>.slide{overflow:auto;max-height:var(--display-stage)}
@media(max-height:820px){.approved-display .competition-rail .live-player:nth-child(n+3){display:none}.approved-display .competition-rail{padding:10px}.approved-display .competition-rail .live-player{padding:6px 10px}.approved-display .game.is-question .question-visual{min-height:0}
.approved-display .game.is-question h1{margin:6px auto 10px;font-size:clamp(26px,4.4vh,40px)}.approved-display .display-clock{width:64px;height:64px;border-width:5px;font-size:26px}.approved-display .question-visual .question-figure{max-height:20vh}.approved-display .game.is-question{padding-block:8px}.approved-display .game.is-question .choice{padding:1.2vh 18px;font-size:clamp(20px,2.8vh,30px)}.approved-display .game.is-question .choices{margin-top:10px;gap:10px}.approved-display .game.is-question .metrics{margin-top:8px;font-size:clamp(14px,2.2vh,20px)}
.approved-display .game.is-reveal .live-player:nth-child(n+5){display:none}.approved-display .game.is-reveal h1{margin:6px auto 8px;font-size:clamp(26px,4.4vh,40px)}
.approved-display .race-clock{font-size:clamp(40px,9vh,84px)}.approved-display .race-head h1{font-size:clamp(20px,3.6vh,40px)}.approved-display .race-track{--lane-h:clamp(30px,calc((var(--display-stage) - 400px)/var(--lanes,1) - var(--gap)),60px);--flag-h:36px}
.approved-display .school-standings{gap:8px}.approved-display .school-standing{padding:10px 16px}
.approved-display .reveal-summary{margin:14px auto;gap:10px}.approved-display .reveal-stat{padding:10px}.approved-display .reveal-stat b{font-size:clamp(34px,6vh,52px)}.approved-display .reveal-stat span{font-size:16px}
.approved-display .live-board{gap:8px}.approved-display .live-player{padding:6px 12px;grid-template-columns:34px 44px minmax(0,1fr) auto}.approved-display .live-avatar{width:44px;height:44px}.approved-display .live-player-copy b{font-size:18px}.approved-display .live-player strong{font-size:24px}
.approved-display .podium-crown{font-size:34px;margin:0}.approved-display .game.is-ended h1{font-size:clamp(24px,4.4vh,34px);margin:2px auto 4px}.approved-display .ev-pface{width:clamp(64px,11vh,110px)!important;height:clamp(64px,11vh,110px)!important}.approved-display .ev-place-1 .ev-pface{width:clamp(80px,14vh,140px)!important;height:clamp(80px,14vh,140px)!important}.approved-display .ev-rest{display:flex}.approved-display .game.is-ended .display-hint{margin-top:6px;font-size:clamp(15px,2.4vh,22px)}
.approved-display .tournament-stage{align-content:start}.approved-display .tournament-card{padding:clamp(14px,2.4vh,36px)}.approved-display .tournament-head{margin-bottom:12px}
/* Portátil o proyector a 720: la sala de espera cabe sin desplazar (medido a 1280×720). */
.approved-display .game.is-lobby .game-card{padding:4px 0}.approved-display .world-kicker{margin-bottom:6px}.approved-display .lobby-head{gap:12px}.approved-display .lobby-title strong{font-size:clamp(20px,3.6vh,30px)}.approved-display .lobby-chip,.approved-display .lobby-code{padding:8px 18px;font-size:clamp(14px,2.2vh,20px)}
.approved-display .lobby-room{margin-top:10px;padding:12px 24px}.approved-display .lobby-ready{font-size:clamp(22px,3.6vh,34px);margin:0}
.approved-display .lobby-attendance{margin:0;gap:10px}.approved-display .lobby-attendance strong{font-size:clamp(44px,8vh,72px)}.approved-display .lobby-attendance span{font-size:clamp(18px,3vh,26px)}
.approved-display .lobby-building{padding-top:44px;margin-top:6px;width:min(72%,1100px)}.approved-display .lobby-roof{height:70px}.approved-display .lobby-flag{display:none}.approved-display .lobby-school{padding:4px 22px;font-size:clamp(14px,2.4vh,20px)}
.approved-display .lobby-windows{padding:10px 24px 12px;--win-h:max(56px,calc((var(--display-stage) - 430px)/var(--rows,1) - 12px))}.approved-display .lobby-window{border-width:4px;border-radius:12px}.approved-display .lobby-name{font-size:clamp(11px,1.7vh,16px)}
.approved-display .lobby-foot{margin-top:8px;font-size:clamp(14px,2.4vh,20px)}}
/* Cierre: «MISIÓN COMPLETADA», la corona y el podio real de la emoción. */
.approved-display .podium-crown{font-size:clamp(40px,5vh,72px);line-height:1;margin:4px 0 0}
.approved-display .game.is-ended h1{color:#e8ce87;margin:6px auto 10px;font-size:clamp(32px,min(3vw,5vh),60px)}
.approved-display .game.is-ended .game-card{padding-top:0}
/* Pie: el guía de la clase */
.approved-display .d-foot{min-height:var(--display-foot);margin-top:auto;border-top:1px solid #4c3b62;border-bottom:0;padding-block:12px;flex:none}
.approved-display .coach{display:flex;align-items:center;gap:16px;min-width:0;flex:1 1 auto}
.approved-display #displayGuideFace{width:60px;height:60px;flex:none;border:2px solid #b7a0ff;border-radius:50%;background:#211a36;overflow:hidden;transition:box-shadow .3s}
.approved-display #displayGuideFace svg{width:100%;height:100%;display:block}
.approved-display #displayGuideFace.is-speaking{box-shadow:0 0 0 4px #7ee0ce55,0 0 28px #7ee0ce66}
.approved-display #displayGuideName{color:#c7b4ff;font-size:clamp(12px,.9vw,16px);display:block;margin-bottom:4px;font-weight:800}
.approved-display #displayGuideText{font-size:clamp(16px,1.5vw,26px);line-height:1.35;display:block;max-width:1400px;color:#f2efff;text-wrap:pretty}
/* Blackout covers the whole display, including the shell. */
.approved-display.is-blackout{background:#000}.approved-display.is-blackout>.d-head,.approved-display.is-blackout>.d-foot{visibility:hidden}
.approved-display.is-blackout .blackout{z-index:100}
@media(max-width:760px){.approved-display{--display-head:60px}.approved-display.has-guide{--display-foot:84px}.approved-display .d-head,.approved-display .d-foot{padding:10px 16px;gap:12px}.approved-display .d-head{padding-right:64px;flex-wrap:wrap}.approved-display #displayLesson{display:none}.approved-display .d-brand{font-size:11px}.approved-display .d-head b{font-size:12px;white-space:normal}.approved-display .game{padding:16px}.approved-display .game-card{padding:8px 0}.approved-display .choice{font-size:20px;padding:20px}.approved-display #displayGuideText{font-size:15px}.approved-display #displayGuideFace{width:44px;height:44px}.approved-display .display-clock{width:56px;height:56px;font-size:20px;border-width:4px}body:has(.approved-display:not([hidden])) .voice-toggle{top:auto}}
@media(min-width:1200px) and (min-height:600px){.approved-display{--display-head:76px}.approved-display.has-guide,.approved-display:not(.is-embed){--display-foot:112px}.approved-display .d-head{padding-right:360px}body:has(.approved-display:not([hidden])) .voice-toggle{top:calc((var(--display-head) - 66px)/2)}.approved-display .game-card{width:min(92vw,2400px)}.approved-display .d-head{font-size:22px}.approved-display .d-brand{font-size:17px}.approved-display .display-clock{width:96px;height:96px;border-width:6px;font-size:36px}.approved-display #displayGuideFace{width:76px;height:76px}.approved-display .d-foot{padding-block:14px}}
@media(prefers-reduced-motion:reduce){.approved-display *{scroll-behavior:auto!important}.approved-display .display-clock.is-urgent{animation:none}}
/* The slide narration is already visible in the contextual footer. Keep the
   existing speech/chunk controller alive without a second overlapping bubble. */
body:has(.approved-display.has-guide:not([hidden]))>.kss{display:none!important}
/* EL FONDO SE VE (14-10-2026, el dueño: «fondo visible»). El cielo del taller
   (course-detail/workspace/workspace.css: resplandor central y dos capas de
   estrellas doradas y lila) a escala de pizarra: puntos de 1,6–2 px que se ven a
   3 m. Las vistas del escenario dejan de pintar su propio fondo opaco y una capa
   fija titila despacio (sólo opacidad, compuesta en la GPU; quieta con movimiento
   reducido). El color sólido lo pone el body, así la capa queda entre los dos. */
.approved-display{background:radial-gradient(circle at 12px 36px,#e3ca8c80 1.6px,transparent 2.4px),radial-gradient(circle at 67px 94px,#ded8ff4d 1.4px,transparent 2.2px),radial-gradient(circle at 140px 160px,#8adfce38 1.2px,transparent 2px),radial-gradient(ellipse at 50% 40%,#2b2a6ab3 0,transparent 64%),radial-gradient(circle at 6% 0,#4b2c9a66,transparent 40%),radial-gradient(circle at 96% 100%,#0f6b6052,transparent 38%);background-size:173px 197px,257px 223px,311px 283px,auto,auto,auto}
body:has(.approved-display:not([hidden])){background:#0d0b24}
.approved-display::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(circle at 40px 70px,#fff8e6cc 1.8px,transparent 2.8px),radial-gradient(circle at 210px 30px,#e3ca8cbb 1.6px,transparent 2.6px),radial-gradient(circle at 120px 240px,#c1afffaa 1.6px,transparent 2.6px);background-size:389px 347px,463px 419px,521px 487px;opacity:.35;animation:display-twinkle 6s ease-in-out infinite alternate;will-change:opacity}
@keyframes display-twinkle{to{opacity:.85}}
/* lesson-display-convergence.css pinta #screen y #screen>.game de noche sólida (1,0,0 y 1,1,0): aquí gana el cielo. */
.approved-display #screen.d-main,.approved-display #screen>:is(.game,.rv,.wcv,.esc,.ctv,.walk-stage,.lectura,.chess-stage,.tournament-stage){background:transparent}
.approved-display.is-blackout::before{display:none}
/* Legible desde el fondo del aula: la línea del guía sube a 30 px en el tablero. */
@media(min-width:1200px) and (min-height:600px){.approved-display #displayGuideText{font-size:clamp(20px,1.6vw,30px)}.approved-display #displayGuideName{font-size:clamp(14px,.95vw,18px)}}
@media(prefers-reduced-motion:reduce){.approved-display::before{animation:none}}
/* El menú de pantalla conserva su esquina; el audio de entrada está en el flujo del pie. */
body:has(.approved-display:not([hidden])) .display-menu{left:auto;right:clamp(12px,1.6vw,28px);bottom:calc((var(--foot-h,96px) - 48px)/2);align-items:flex-end}
body.rv-has-strip:has(.approved-display:not([hidden])) .display-menu{bottom:calc(var(--rv-strip-h) + (var(--foot-h,96px) - 48px)/2)}
@media(min-width:1200px) and (min-height:600px){body:has(.approved-display:not([hidden])){--foot-h:112px}body:has(.approved-display:not([hidden])) .display-menu{bottom:calc((var(--foot-h) - 64px)/2)}body.rv-has-strip:has(.approved-display:not([hidden])) .display-menu{bottom:calc(var(--rv-strip-h) + (var(--foot-h) - 64px)/2)}}
@media(max-width:760px){body:has(.approved-display:not([hidden])){--foot-h:84px}}
/* Con el pie oculto (espejo del docente) el menú vuelve a su esquina. Desde el 16-10-2026 el pie
   siempre está (código y hora), con guía o sin él, así que ya no hay caso «sin guía». */
body:has(.approved-display.is-embed:not([hidden])) .display-menu{bottom:clamp(12px,2vw,24px)}
body.rv-has-strip:has(.approved-display.is-embed:not([hidden])) .display-menu{bottom:calc(var(--rv-strip-h) + 12px)}

/* Budget the question against its stage, including the guide footer. At tablet
   heights the illustration yields space before the answers or instructions do. */
.approved-display #screen > .game.is-question { overflow:auto; }
.approved-display #screen > .game.is-question .game-card { flex:none; }
@media(max-height:820px) {
  .approved-display #screen > .game.is-question { justify-content:flex-start; }
  .approved-display #screen > .game.is-question .question-meta { min-height:48px; }
  .approved-display #screen > .game.is-question .display-clock { width:48px;height:48px;font-size:22px;border-width:4px; }
  .approved-display #screen > .game.is-question .question-live-grid { align-items:stretch; }
  .approved-display #screen > .game.is-question .question-figure { max-height:clamp(64px,calc(var(--display-stage) - 330px),144px); }
  .approved-display #screen > .game.is-question .competition-rail .live-player:nth-child(n+2) { display:none; }
  .approved-display #screen > .game.is-question .competition-rail { padding:8px; }
  .approved-display #screen > .game.is-question .choices { gap:8px;margin-top:8px; }
  .approved-display #screen > .game.is-question .choice { padding:8px 12px; }
  .approved-display #screen > .game.is-question .metrics { margin-top:8px; }
}
@media(max-width:760px) {
  .approved-display #screen > .game.is-question .question-live-grid { grid-template-columns:minmax(0,1fr); }
  .approved-display #screen > .game.is-question .competition-rail { display:none; }
}

/* The podium highlights three places; the remaining received results stay
   visible, including on a laptop. Long classes scroll within the stage. */
.approved-display #screen > .game.is-ended{overflow:auto;align-items:start;justify-items:center}
.approved-display .final-participation{margin:8px 0 12px;color:#c7bedc;font-size:clamp(16px,1.5vw,26px);line-height:1.4}
.approved-display .game.is-ended .ev-rest{display:flex;max-width:100%;gap:8px;margin:12px auto}
.approved-display .game.is-ended .ev-rest li{font-size:clamp(14px,1.4vw,22px);padding:6px 12px 6px 6px;white-space:normal}
.approved-display .game.is-ended .ev-rest .ev-mface{width:36px;height:36px;flex:none}
@media(max-height:820px){
  .approved-display #screen > .game.is-ended h1{font-size:32px;line-height:1.1;margin:6px auto}
  .approved-display #screen > .game.is-ended .podium-crown{font-size:24px}
  .approved-display .game.is-ended .ev-place-1 .ev-block{height:50px}
  .approved-display .game.is-ended .ev-place-2 .ev-block{height:36px}
  .approved-display .game.is-ended .ev-place-3 .ev-block{height:26px}
}

/* The school crest has its own space at the far right, beyond audio controls. */
.approved-display .d-head{position:relative;padding-right:380px}
.approved-display .d-kairos-logo{width:44px;height:44px;object-fit:contain;flex:none}
.approved-display .d-school{position:absolute;right:24px;top:50%;transform:translateY(-50%);width:48px;height:48px;overflow:hidden;border-radius:10px;background:#fff;display:grid;place-items:center}
.approved-display .d-school[hidden]{display:none}
.approved-display .d-school img{width:100%;height:100%;object-fit:contain}
.approved-display #displayLesson{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
body:has(.approved-display:not([hidden])) .voice-toggle{top:5px;right:88px;max-width:260px}
@media(min-width:1200px) and (min-height:600px){.approved-display .d-head{padding-right:440px}.approved-display .d-school{width:56px;height:56px}.approved-display .d-kairos-logo{width:52px;height:52px}body:has(.approved-display:not([hidden])) .voice-toggle{top:5px;right:100px;max-width:320px}}
@media(max-width:760px){.approved-display .d-head{padding:8px 76px 8px 12px;gap:6px 12px;min-height:72px}.approved-display{--display-head:72px}.approved-display .d-kairos-logo{width:30px;height:30px}.approved-display .d-head b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.approved-display .d-school{right:16px;width:40px;height:40px}body:has(.approved-display:not([hidden])) .voice-toggle{top:auto;bottom:12px;right:16px}}

.approved-display .d-head b{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ══════════════════════════════════════════════════════════════════════════
   EL TABLERO HABLA EL IDIOMA DEL TALLER (16-10-2026, el dueño: «mejorar el
   display» mientras miraba el recorrido del taller, PR #3637). La misma paleta
   —oro #e3ca8c, menta #8adfce, violeta #c1afff sobre la noche #0d0b24—, las
   fichas (píldoras con borde #4a4163 sobre #ffffff0a), las tarjetas en degradado
   #1b1833→#15132a con sombra, y el hito del camino: un círculo numerado con
   borde #6f5e8a (hecho = menta sobre #16342f; ahora = oro con halo; por venir =
   trazo discontinuo). Esta capa va por ENCIMA de los renderers (route-view,
   entrada-view, escape-view, emocion-view, los juegos de index.html) y sólo
   viste: el DOM, el contrato de datos y la previa del taller (?preview=1&embed=1)
   no cambian. Todo lo que se mueve es opacidad y transform, y con
   prefers-reduced-motion se queda quieto. Contraste medido ≥ 7:1 en el texto
   principal (scratch contraste.mjs, 1920×1080). */
.approved-display{--t-gold:#e3ca8c;--t-mint:#8adfce;--t-violet:#c1afff;--t-line:#4a4163;--t-ink:#f1f0ff;--t-muted:#c9c4dd;--t-card:linear-gradient(135deg,#1b1833f0,#15132af0);--t-card-on:linear-gradient(120deg,#2d2742f0,#1b2238f0)}
/* ── Cabecera: marca · hito del paso · «● Contenido · Momento» · camino · lección ── */
.approved-display .d-head{gap:clamp(12px,1.3vw,26px);border-bottom-color:var(--t-line);background:linear-gradient(180deg,#0d0b24f0,#0d0b2499)}
.approved-display .d-brand>strong{color:var(--t-gold);letter-spacing:.16em}
.approved-display .d-step{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:center;gap:clamp(10px,.9vw,18px)}
.approved-display .d-step>b{min-width:0;padding:5px 14px;border:1px solid var(--t-line);border-radius:999px;background:#ffffff0a;color:#9fe8d6;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.approved-display .d-hito{flex:none;display:grid;place-items:center;width:40px;height:40px;border:2px solid #a68b54;border-radius:50%;background:#191530;color:var(--t-gold);font-weight:800;font-size:17px;line-height:1;font-variant-numeric:tabular-nums;box-shadow:0 0 0 4px #0d0b24,0 0 20px #e3ca8c55}
.approved-display .d-hito.is-done{background:#16342f;border-color:var(--t-mint);color:var(--t-mint);box-shadow:0 0 0 4px #0d0b24}
.approved-display .d-hito.is-soon{border-style:dashed;color:var(--t-muted);box-shadow:0 0 0 4px #0d0b24}
.approved-display .d-path{flex:none;display:flex;align-items:center;gap:6px;margin:0;padding:0 2px;list-style:none}
.approved-display .d-path li{width:9px;height:9px;border:2px solid #6f5e8a;border-radius:50%;background:transparent;transition:background .3s,border-color .3s,transform .3s}
.approved-display .d-path li.is-done{border-color:var(--t-mint);background:var(--t-mint)}
.approved-display .d-path li.is-now{border-color:var(--t-gold);background:var(--t-gold);transform:scale(1.3);box-shadow:0 0 0 3px #e3ca8c33,0 0 12px #e3ca8c99}
.approved-display #displayLesson{color:var(--t-muted)}
/* Transición entre pasos: al alternar data-enter, el hito, la escena y el camino vuelven a entrar. */
.approved-display[data-enter="0"] .d-step>*{animation:d-step-0 .55s cubic-bezier(.2,.8,.3,1) both}
.approved-display[data-enter="1"] .d-step>*{animation:d-step-1 .55s cubic-bezier(.2,.8,.3,1) both}
.approved-display[data-enter] .d-step>b{animation-delay:.06s}.approved-display[data-enter] .d-step>.d-path{animation-delay:.12s}
@keyframes d-step-0{from{opacity:0;transform:translateY(-10px)}}@keyframes d-step-1{from{opacity:0;transform:translateY(-10px)}}
.approved-display .d-hito:not(.is-done):not(.is-soon){animation:d-hito-pulse 2.4s ease-in-out infinite}
@keyframes d-hito-pulse{0%,100%{box-shadow:0 0 0 4px #0d0b24,0 0 0 7px #e3ca8c22,0 0 20px #e3ca8c55}50%{box-shadow:0 0 0 4px #0d0b24,0 0 0 11px #e3ca8c0a,0 0 20px #e3ca8c55}}
/* ── Pie: el guía a la izquierda; a la derecha el código de la clase y la hora ── */
.approved-display .d-foot{border-top-color:var(--t-line);background:linear-gradient(0deg,#0d0b24f0,#0d0b2499)}
.approved-display .d-status{flex:none;margin-left:auto;display:flex;align-items:center;gap:clamp(10px,1vw,18px);padding-right:calc(clamp(12px,1.6vw,28px) + 60px)}
.approved-display .d-code{display:inline-flex;align-items:center;gap:10px;padding:7px 16px;border:1px solid #a68b5466;border-radius:999px;background:#e3ca8c0a;color:var(--t-muted);font-size:clamp(13px,.9vw,18px);font-weight:700;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.approved-display .d-code b{color:var(--t-gold);font-size:1.55em;letter-spacing:.16em;font-variant-numeric:tabular-nums;font-weight:850}
.approved-display .d-clock{color:var(--t-ink);font-size:clamp(24px,1.8vw,38px);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;white-space:nowrap}
.approved-display .d-clock:empty{display:none}
@media(min-width:1200px) and (min-height:600px){.approved-display .d-hito{width:46px;height:46px;font-size:20px}.approved-display .d-path li{width:11px;height:11px}.approved-display .d-path{gap:8px}.approved-display .d-status{padding-right:calc(clamp(12px,1.6vw,28px) + 78px)}.approved-display .d-code{padding:9px 20px}}
/* Entre 760 y 1500 px la cabecera comparte sitio con el botón de voz: el camino de puntos se guarda y la ficha de la escena no se come el título de la lección. */
@media(max-width:1500px){.approved-display .d-path{display:none}.approved-display .d-step>b{flex:0 1 auto;max-width:min(100%,34vw)}.approved-display #displayLesson{max-width:26%}}
@media(max-width:760px){.approved-display .d-path,.approved-display .d-code{display:none}.approved-display .d-hito{width:32px;height:32px;font-size:14px}.approved-display .d-step>b{padding:3px 10px}.approved-display .d-status{padding-right:0}.approved-display .d-clock{font-size:18px}}
/* ── El mapa del recorrido (route-view): el colegio como tarjeta, las salas como fichas ── */
.approved-display .rv-eyebrow{letter-spacing:.18em}
.approved-display .rv-roof:before{background:#262142}
.approved-display .rv-sign{border-color:#a68b5488;background:#16132a;color:var(--t-gold);letter-spacing:.2em}
.approved-display .rv-floor{background:var(--t-card);box-shadow:inset 0 0 0 1px var(--t-line),0 10px 30px #06041a40;border-radius:0 0 20px 20px}
.approved-display .rv-room{border-width:calc(3*var(--rv-u));border-color:var(--t-line);background:#100e26;color:#d8d2ee;border-radius:calc(20*var(--rv-u))}
.approved-display .rv-room.is-future{border-style:dashed;border-color:#4a416399;background:#100e2680;color:#aaa2ca}
.approved-display .rv-room.is-past{opacity:.78}
.approved-display .rv-room-n{background:#16132a;border:2px solid #6f5e8a;color:#d8c9a5;box-shadow:0 0 0 3px #0d0b24}
.approved-display .rv-room.is-past .rv-room-n{background:#16342f;border-color:var(--t-mint);color:var(--t-mint)}
.approved-display .rv-room.is-future .rv-room-n{border:2px dashed #8e86b366;background:transparent;color:var(--kind)}
.approved-display .rv-room.is-current{border-color:var(--t-gold);background:linear-gradient(180deg,#f6e7bd,#e3ca8c);color:#241f32;box-shadow:0 0 0 1px #e3ca8c33,0 18px 44px #06041a80,0 0 60px #e3ca8c44}
.approved-display .rv-room.is-current .rv-room-n{background:#241f32;border-color:#241f32;color:var(--t-gold);box-shadow:none}
.approved-display .rv-count{background:#241f32;color:var(--t-gold)}
.approved-display .rv-waiting{color:#241f32}
.approved-display .rv-card{border-radius:calc(22*var(--rv-u));background:linear-gradient(135deg,#1b1833f6,#15132af6);box-shadow:inset 0 0 0 calc(2*var(--rv-u)) var(--kind),0 10px 30px #06041a66}
.approved-display .rv-card-pages,.approved-display .rv-clock,.approved-display .rv-step-score,.approved-display .rv-entry-unit{color:var(--t-gold)}
.approved-display .rv-clock.is-over{color:#ff8a7a}
.approved-display .rv-clock-wrap small,.approved-display .rv-card-clock small{color:var(--t-muted)}
.approved-display .rv-group{background:#1b1833f0;border-width:calc(3*var(--rv-u))}
.approved-display .rv-step-card{background:linear-gradient(180deg,#1b1833f6,#15132af6)}
.approved-display .rv-step-score small{color:var(--t-muted)}
.approved-display .rv-entry-goals{border-color:#8adfce55;background:#8adfce12}
.approved-display .rv-entry-goals li::before,.approved-display .rv-entry-goals-title{color:var(--t-mint)}
.approved-display .rv-idle-brand{color:var(--t-gold)}
.approved-display .rv-idle-date{color:var(--t-muted)}
.approved-display .rv-idle-next{border-color:#8adfce66;background:#8adfce12}
.approved-display #screen>.rv.rv-idle{background:radial-gradient(circle at 50% 44%,#285d8f 0%,#153c66 39%,#111936 82%)}
.approved-display .rv-sheet{background:#241f32}
.approved-display .rv-paper-turn,.approved-display .rv-paper-tools{background:#1b1833ee}
.approved-display .rv-editorial-page img{border-color:var(--t-gold)}
.rv-strip{background:linear-gradient(180deg,#120f2cf2,#0d0b24fc)!important;border-top-color:var(--t-line,#4a4163)!important}
body:has(.approved-display:not([hidden])) .rv-sweep-dots li.is-now{background:var(--t-gold,#e3ca8c)}
/* ── La Entrada (entrada-view) y el escape (escape-view) ── */
.approved-display .ent-card{border-color:var(--t-line);border-radius:calc(22*var(--rv-u));background:linear-gradient(135deg,#1b1833e6,#15132ae6);box-shadow:0 10px 30px #06041a40}
.approved-display .ent-card h2,.approved-display .ent-pie{color:var(--t-mint)}
.approved-display .ent mark{background:var(--t-gold);color:#241f32;box-shadow:0 calc(6*var(--rv-u)) 0 #a68b54}
.approved-display .ent-recuerda{border-color:#e3ca8c55;background:#e3ca8c10}
.approved-display .ent-cuenta,.approved-display .ent-pct{color:var(--t-gold)}
.approved-display .ent-barra i{background:linear-gradient(90deg,var(--t-mint),var(--t-gold))}
.approved-display .ent-respuestas-t,.approved-display .ent-lesson{color:var(--t-muted)}
.approved-display .esc{--esc-gold:#e3ca8c;--esc-mint:#8adfce;--esc-muted:#c9c4dd}
/* ── Los juegos de index.html: sala de espera, pregunta, revelado, cierre, carrera, lectura ── */
.approved-display .lobby-chip{border-color:#8adfce66;background:#8adfce14;color:#a7eadb}
.approved-display .lobby-code{border-color:var(--t-line);background:#ffffff0a;color:var(--t-muted)}
.approved-display .lobby-code b,.approved-display .lobby-attendance strong,.approved-display .lobby-school,.approved-display .code{color:var(--t-gold)}
.approved-display .lobby-room{border:1px solid var(--t-line);border-radius:20px;background:linear-gradient(135deg,#1b183399,#15132a99);box-shadow:0 10px 30px #06041a40}
.approved-display .lobby-roof{background:#262142}
.approved-display .lobby-school{border-color:#a68b5488;background:#16132a}
.approved-display .lobby-windows{background:#1b1833;border-radius:0 0 20px 20px;box-shadow:inset 0 0 0 1px var(--t-line)}
.approved-display .lobby-window{border-color:#4a4163;background:#100e26}
.approved-display .lobby-window.is-on{background:linear-gradient(145deg,#f6e7bd,#e3ca8c);box-shadow:0 0 22px #e3ca8c55}
.approved-display .lobby-live{background:var(--t-mint);box-shadow:0 0 22px #8adfce88}
.approved-display .lobby-title small,.approved-display .world-kicker,.approved-display .game .eyebrow,.approved-display .race-strip-title{color:var(--t-mint)}
.approved-display .lobby-foot,.approved-display .metrics,.approved-display .lobby-attendance span{color:var(--t-muted)}
.approved-display .live-player{border-color:var(--t-line);background:linear-gradient(135deg,#1b1833d9,#15132ad9)}
.approved-display .live-player:nth-child(1){border-color:#e3ca8c80;background:linear-gradient(145deg,#e3ca8c1a,#15132ad9)}
.approved-display .live-rank,.approved-display .live-player strong{color:var(--t-gold)}
.approved-display .competition-rail{border-color:var(--t-line);border-radius:20px;background:#15132a99}
.approved-display .question-visual{border-color:var(--t-line);border-radius:20px}
.approved-display .reveal-stat{border-color:var(--t-line);border-radius:18px;background:#1b183399}
.approved-display .reveal-stat b,.approved-display .game.is-ended h1,.approved-display .race-clock,.approved-display .school-place,.approved-display .tournament-round,.approved-display .chess-answer{color:var(--t-gold)}
.approved-display .display-clock{border-color:var(--t-mint);color:var(--t-mint)}
.approved-display .scene-prompt,.approved-display .chess-answer{border-color:#a68b5466;background:#e3ca8c0d}
.approved-display .race-lane{border-color:var(--t-line)}
.approved-display .race-lane.is-finished{border-color:#e3ca8c80;background:#e3ca8c14}
.approved-display .race-lane.is-finished .race-runner{border-color:var(--t-gold);background:linear-gradient(145deg,#e3ca8c26,#ffffff0a)}
.approved-display .race-lane.is-finished .race-steps{color:var(--t-gold)}
.approved-display .race-strip{border-top-color:var(--t-line)}
.approved-display .tournament-card,.approved-display .school-standing{border-color:var(--t-line)}
.approved-display .tcol{border-color:var(--t-line);border-radius:18px;background:#1b183399}
.approved-display .tcol.end{border-color:#8adfce55;background:#8adfce14}
.approved-display .lectura .eyebrow{color:var(--t-gold)}
.approved-display .guide-voice{border-color:var(--t-line)}
/* ── La emoción (emocion-view pinta sobre body) ── */
body:has(.approved-display:not([hidden])) .ev-eyebrow{color:#8adfce}
body:has(.approved-display:not([hidden])) .ev-count{color:#e3ca8c;text-shadow:0 0 calc(70*var(--ev-u,1px)) #e3ca8c70}
body:has(.approved-display:not([hidden])) .ev-count.is-go{color:#8adfce;text-shadow:0 0 calc(70*var(--ev-u,1px)) #8adfce70}
body:has(.approved-display:not([hidden])) .ev-line{border-color:#e3ca8c;background:#e3ca8c22;color:#e3ca8c}
body:has(.approved-display:not([hidden])) .ev-fuse i{background:linear-gradient(90deg,#e3ca8c,#8adfce)}
body:has(.approved-display:not([hidden])) .ev-sub{color:#e3ca8c}
/* ── Espera y emparejado: la misma paleta antes de que haya clase ── */
.pair{--gold:#e3ca8c;--mint:#8adfce;--teal:#8adfce;border-color:#4a4163}
.pair-entry{border-color:#4a4163}
.pair-bubble cite{color:#5d49b8}
/* ── Medidas exactas (16-10-2026, medido con sonda2.mjs): la cabecera rendía 77 px con --display-head
   a 76 (imagen 52 + relleno 24 + borde 1) y el tablero desbordaba 1 px desde el 13-10; a 64 px de
   cabecera eran 5 px. Ahora la cabecera mide EXACTAMENTE su variable y centra lo que lleva. Sin el
   botón de voz (modos sin narración) la cabecera recupera los 380–440 px que le reservaba. En
   «Entre clases» no hay código ni guía y el reloj ya es gigante en el escenario: el pie se va. */
@media(min-width:761px){.approved-display .d-head{height:var(--display-head);min-height:0;padding-block:0;align-items:center}}
body:has(.voice-toggle[hidden]) .approved-display .d-head{padding-right:calc(clamp(12px,1.6vw,28px) + 92px)}
.approved-display[data-mode="idle"]:not(.has-guide){--display-foot:0px}
.approved-display[data-mode="idle"]:not(.has-guide) .d-foot{display:none}
/* Las Salas (rooms-view, `.rm`) no estaban en la lista de vistas que miden el escenario: con cabecera y pie
   desbordaban 188 px a 1080p (medido 16-10-2026, también en main). Entran en el presupuesto como las demás. */
.approved-display #screen>.rm{height:var(--display-stage);min-height:0!important;background:transparent}
/* ── Quieto con movimiento reducido ── */
@media(prefers-reduced-motion:reduce){.approved-display[data-enter] .d-step>*,.approved-display .d-hito{animation:none!important}.approved-display .d-path li{transition:none}}
/* EL «⋯» NO TAPA LA HORA (16-10-2026). Desde el 14-10 el botón del menú vive en el pie, a la derecha,
   y caía encima del código de la clase y la hora (medido en la pizarra de Código Héroe a 674 px de ancho).
   El pie le guarda su sitio: 48 px del botón + su margen. */
body:has(.approved-display:not([hidden])) .approved-display .d-foot{padding-right:calc(clamp(12px,1.6vw,28px) + 60px)}
/* Las opciones en la proyección (17-10-2026): con fichas en pantalla, ellas
   son lo que la clase busca desde el fondo del aula. La figura y el marcador
   ceden alto para que las cuatro quepan sin desplazar la página. */
.approved-display #screen > .game.is-question:has(.choices) .question-figure{max-height:min(20vh,400px)}
@media(max-height:1100px){.approved-display #screen > .game.is-question:has(.choices) .competition-rail .live-player:nth-child(n+3){display:none}}

/* Entrance: an instruction for the class, with optional audio in document flow. */
.approved-display.is-instruction #displayGuideFace{display:none}
.approved-display .d-actions{display:flex;align-items:center;flex:none;min-width:0}
.approved-display.is-instruction .d-foot{gap:clamp(12px,2vw,28px)}
.approved-display.is-instruction .coach{flex:1 1 0;min-width:0}
.approved-display.is-instruction #displayGuideName{color:#7ee0ce;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(12px,1vw,17px)}
.approved-display.is-instruction #displayGuideText{font-size:clamp(16px,1.65vw,28px);line-height:1.3}
.approved-display.is-instruction .d-status{display:none}
@media(max-width:600px){.approved-display.is-instruction .d-foot{flex-wrap:wrap}.approved-display.is-instruction .coach{flex-basis:100%}.approved-display.is-instruction .d-actions{margin-left:auto}.approved-display.is-instruction{--display-foot:142px}}