/* ═══════════════════════════════════════════════════════════
   EL RELOJ Y LA ALARMA · Sepriori
   Hoja de estilos única. No editar para cambiar contenido.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  --ink: #03191E;
  --accent: #8B4514;
  --neutral: #BCB19E;
  --surface: #F4F0E2;
  --surface-deep: #263636;

  --ink-60: rgba(3, 25, 30, .60);
  --ink-40: rgba(3, 25, 30, .40);
  --ink-12: rgba(3, 25, 30, .12);
  --ink-06: rgba(3, 25, 30, .06);
  --accent-10: rgba(139, 69, 20, .10);

  --display: 'Space Grotesk', system-ui, sans-serif;
  --body: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;

  --ancho: 74ch;
  --radio: 10px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* ─────────── Barra superior ─────────── */

#barra {
  position: fixed; top: 0; left: 0; right: 0; height: 52px; z-index: 100;
  display: flex; align-items: center; gap: 18px; padding: 0 20px;
  background: rgba(244, 240, 226, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ink-12);
}

#marca {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); font-weight: 500;
  text-decoration: none; white-space: nowrap;
}

#progreso-pista { flex: 1; height: 3px; background: var(--ink-12); border-radius: 2px; overflow: hidden; }
#progreso-barra { height: 100%; width: 0; background: var(--accent); transition: width .35s ease; }

.btn {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  padding: 7px 13px; border: 1px solid var(--ink-12); border-radius: 6px;
  background: transparent; color: var(--ink-60); cursor: pointer;
  transition: all .16s ease; white-space: nowrap; font-weight: 500;
}
.btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-10); }
.btn[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--surface); }

/* ─────────── Índice lateral ─────────── */

#indice {
  position: fixed; top: 52px; bottom: 0; left: 0; width: 290px; z-index: 90;
  overflow-y: auto; padding: 20px 0 60px;
  background: var(--surface); border-right: 1px solid var(--ink-12);
  transform: translateX(-100%); transition: transform .25s ease;
}
#indice.abierto { transform: translateX(0); }

.idx-acto {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); padding: 20px 22px 7px; font-weight: 500;
}
.idx-item {
  display: flex; gap: 10px; padding: 6px 22px; cursor: pointer;
  font-size: 13.5px; line-height: 1.4; color: var(--ink-60);
  border-left: 2px solid transparent; transition: all .14s ease;
}
.idx-item:hover { color: var(--ink); background: var(--ink-06); }
.idx-item.activo { color: var(--ink); border-left-color: var(--accent); font-weight: 500; }
.idx-num { font-family: var(--mono); font-size: 11px; color: var(--ink-40); min-width: 20px; padding-top: 2px; }

/* ─────────── Contenedor ─────────── */

#escenario { padding-top: 52px; min-height: 100vh; transition: margin-left .25s ease; }

/* El índice abierto empuja el contenido en vez de taparlo (escritorio) */
@media (min-width: 1101px) {
  body.indice-abierto #escenario { margin-left: 290px; }
}

.escena {
  max-width: var(--ancho); margin: 0 auto; padding: 46px 26px 30px;
}

/* ─────────── Tipografía de escena ─────────── */

.esc-etiqueta {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 12px; font-weight: 500;
}
.esc-titulo {
  font-family: var(--display); font-weight: 600; font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.16; letter-spacing: -.018em; margin: 0 0 24px;
}
.esc-cuerpo > *:first-child { margin-top: 0; }
.esc-cuerpo p { margin: 0 0 17px; }
.esc-cuerpo strong { font-weight: 600; }
.esc-cuerpo em { font-style: italic; color: var(--ink-60); }
.esc-cuerpo code {
  font-family: var(--mono); font-size: .88em; background: var(--ink-06);
  padding: 1px 5px; border-radius: 4px;
}
.esc-cuerpo h3 {
  font-family: var(--display); font-weight: 600; font-size: 19px;
  margin: 34px 0 13px; letter-spacing: -.01em;
}

/* Citas destacadas */
.esc-cuerpo blockquote {
  margin: 26px 0; padding: 18px 22px;
  border-left: 3px solid var(--accent); background: var(--accent-10);
  border-radius: 0 var(--radio) var(--radio) 0;
  font-size: 17.5px; line-height: 1.55;
}
.esc-cuerpo blockquote p:last-child { margin-bottom: 0; }

/* Bloques de código / esquemas ASCII */
.esc-cuerpo pre {
  font-family: var(--mono); font-size: 12.5px; line-height: 1.55;
  background: var(--surface-deep); color: var(--surface);
  padding: 18px 20px; border-radius: var(--radio); overflow-x: auto;
  margin: 24px 0;
}
.esc-cuerpo pre code { background: none; padding: 0; color: inherit; font-size: inherit; }

/* Tablas */
.tabla-envoltura { overflow-x: auto; margin: 26px 0; }
.esc-cuerpo table {
  width: 100%; border-collapse: collapse; font-size: 14.5px;
  font-variant-numeric: tabular-nums;
}
.esc-cuerpo th {
  text-align: left; font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase; color: var(--accent);
  padding: 9px 12px; border-bottom: 1.5px solid var(--ink-12); vertical-align: bottom;
}
.esc-cuerpo td { padding: 9px 12px; border-bottom: 1px solid var(--ink-06); }
.esc-cuerpo tbody tr:hover { background: var(--ink-06); }
.esc-cuerpo td:not(:first-child), .esc-cuerpo th:not(:first-child) { text-align: right; }

/* Listas */
.esc-cuerpo ul, .esc-cuerpo ol { margin: 0 0 17px; padding-left: 22px; }
.esc-cuerpo li { margin-bottom: 8px; }

.esc-cuerpo u, .pv-pie u {
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
.esc-cuerpo mark, .pv-pie mark {
  background: rgba(139, 69, 20, .15);
  color: inherit; padding: .12em .3em; border-radius: 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* Cierre en cursiva */
.esc-cierre {
  margin-top: 30px; padding-top: 20px; border-top: 1px solid var(--ink-12);
  font-family: var(--display); font-style: italic; font-size: 18px;
  line-height: 1.5; color: var(--accent);
}

/* Portadilla de acto */
.acto-portada {
  min-height: calc(100vh - 52px);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 14px; padding: 40px 26px;
}
.acto-portada .num {
  font-family: var(--mono); font-size: 11px; letter-spacing: .2em;
  text-transform: uppercase; color: var(--accent);
}
.acto-portada .nom {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 6vw, 62px); letter-spacing: -.03em; line-height: 1.05;
}
.acto-portada .sub { color: var(--ink-60); max-width: 46ch; font-size: 16.5px; }

/* Marcador de pieza interactiva pendiente */
.pieza {
  margin: 28px 0; padding: 26px; border-radius: var(--radio);
  border: 1.5px dashed var(--neutral); background: var(--ink-06);
  text-align: center;
}
.pieza .rotulo {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.pieza .desc { font-size: 14.5px; color: var(--ink-60); max-width: 52ch; margin: 0 auto; }

/* ─────────── Navegación inferior ─────────── */

#navegacion {
  position: fixed; bottom: 0; left: 0; right: 0; height: 56px; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 20px; background: rgba(244, 240, 226, .93);
  backdrop-filter: blur(10px); border-top: 1px solid var(--ink-12);
}
#contador {
  font-family: var(--mono); font-size: 11px; color: var(--ink-40);
  letter-spacing: .08em; font-variant-numeric: tabular-nums;
}
#navegacion .btn:disabled { opacity: .3; cursor: default; }
#navegacion .btn:disabled:hover { border-color: var(--ink-12); color: var(--ink-60); background: transparent; }

/* ═══════════ MODO PROYECCIÓN ═══════════ */

body.proyeccion #escenario { padding-bottom: 56px; }
body.proyeccion .escena {
  min-height: calc(100vh - 108px);
  display: flex; flex-direction: column; justify-content: center;
  max-width: 68ch; padding: 34px 40px;
}
body.proyeccion { font-size: 25px; line-height: 1.55; }
body.proyeccion .esc-etiqueta { font-size: 13px; margin-bottom: 14px; }
body.proyeccion .esc-titulo { font-size: clamp(40px, 5.2vw, 66px); margin-bottom: 30px; line-height: 1.08; }
body.proyeccion .esc-cuerpo p { margin-bottom: 20px; }
body.proyeccion .esc-cuerpo h3 { font-size: 27px; margin: 34px 0 14px; }
body.proyeccion .esc-cuerpo table { font-size: 21px; }
body.proyeccion .esc-cuerpo th { font-size: 13px; padding: 11px 14px; }
body.proyeccion .esc-cuerpo td { padding: 11px 14px; }
body.proyeccion .esc-cuerpo pre { font-size: 18px; padding: 22px 26px; }
body.proyeccion .esc-cierre { font-size: 27px; margin-top: 34px; }
body.proyeccion blockquote { font-size: 26px; padding: 22px 28px; }
body.proyeccion .esc-cuerpo li { margin-bottom: 11px; }
body.proyeccion .acto-portada .nom { font-size: clamp(46px, 8vw, 92px); }
body.proyeccion .acto-portada .sub { font-size: 24px; max-width: 40ch; }
body.proyeccion .escena:not(.visible) { display: none; }

/* ═══════════ MODO LECTURA ═══════════ */

body.lectura #navegacion { display: none; }
body.lectura #escenario { padding-bottom: 90px; }
body.lectura #indice { transform: translateX(0); }
body.lectura #escenario { margin-left: 290px; }
body.lectura .escena { border-bottom: 1px solid var(--ink-12); }
body.lectura .escena:last-child { border-bottom: none; }
body.lectura .acto-portada { min-height: 52vh; border-bottom: none; }

@media (max-width: 1100px) {
  body.lectura #escenario { margin-left: 0; }
  body.lectura #indice { transform: translateX(-100%); }
  body.lectura #indice.abierto { transform: translateX(0); }
}

/* ═══════════ MÓVIL — degrada a lectura ═══════════ */

@media (max-width: 820px) {
  body { font-size: 16px; }
  body.proyeccion { font-size: 16px; }
  body.proyeccion #escenario { padding-bottom: 90px; }
  body.proyeccion .escena {
    min-height: auto; display: block; padding: 34px 20px;
    border-bottom: 1px solid var(--ink-12); max-width: 100%;
  }
  body.proyeccion .escena:not(.visible) { display: block; }
  body.proyeccion .esc-titulo { font-size: 25px; margin-bottom: 20px; }
  body.proyeccion .esc-cuerpo table { font-size: 13.5px; }
  body.proyeccion .esc-cierre { font-size: 17px; }
  body.proyeccion blockquote { font-size: 17px; }
  #navegacion { display: none; }
  #modo-toggle { display: none; }
  .esc-cuerpo table { font-size: 13.5px; }
  .esc-cuerpo th, .esc-cuerpo td { padding: 7px 8px; }
  #indice { width: 84vw; }
}

/* ═══════════ IMPRESIÓN ═══════════ */

@media print {
  #barra, #navegacion, #indice { display: none !important; }
  #escenario { margin: 0 !important; padding: 0 !important; }
  .escena {
    display: block !important; min-height: auto !important;
    max-width: 100% !important; padding: 0 0 22px !important;
    page-break-inside: avoid;
  }
  .acto-portada { min-height: auto !important; page-break-before: always; padding: 30px 0 !important; }
  body { font-size: 11pt; background: #fff; }
  .esc-cuerpo pre { background: #f2f2f2; color: #000; border: 1px solid #ccc; }
  .pieza { border-style: solid; }
}



/* ═══════════════════════════════════════════════════════════
   PIEZAS INTERACTIVAS
   ═══════════════════════════════════════════════════════════ */

.pieza-viva {
  margin: 32px 0; padding: 0; border-radius: 14px;
  border: 1px solid var(--ink-12); background: #fbf9f1;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(3,25,30,.05), 0 8px 24px -12px rgba(3,25,30,.14);
}

.pv-cabecera {
  padding: 15px 22px 13px; border-bottom: 1px solid var(--ink-06);
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.pv-titulo {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent); font-weight: 500;
}
.pv-ayuda { font-size: 13px; color: var(--ink-40); }
.pv-lienzo { padding: 24px 22px; }
.pv-pie {
  padding: 15px 22px; border-top: 1px solid var(--ink-06);
  background: var(--ink-06); font-size: 14.5px; line-height: 1.55; min-height: 22px;
}
.pv-pie strong { color: var(--accent); }

body.proyeccion .pv-titulo { font-size: 13px; }
body.proyeccion .pv-ayuda { font-size: 17px; }
body.proyeccion .pv-pie { font-size: 20px; padding: 20px 26px; }
body.proyeccion .pv-lienzo { padding: 30px 26px; }

/* Controles */
.pv-controles { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
.pv-btn {
  font-family: var(--mono); font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  font-weight: 500; padding: 9px 16px; border-radius: 7px; cursor: pointer;
  border: 1px solid var(--ink); background: var(--ink); color: var(--surface);
  transition: all .16s ease;
}
.pv-btn:hover { background: var(--accent); border-color: var(--accent); }
.pv-btn.fantasma { background: transparent; color: var(--ink-60); border-color: var(--ink-12); }
.pv-btn.fantasma:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-10); }
.pv-btn:disabled { opacity: .35; cursor: default; }
.pv-btn:disabled:hover { background: var(--ink); border-color: var(--ink); }
body.proyeccion .pv-btn { font-size: 14px; padding: 12px 20px; }

.pv-etiqueta-fila {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ink-40); margin-bottom: 6px; font-weight: 500;
}
body.proyeccion .pv-etiqueta-fila { font-size: 12.5px; }

/* Cifra grande */
.pv-cifra {
  font-family: var(--display); font-weight: 700; font-size: 34px;
  letter-spacing: -.02em; line-height: 1; font-variant-numeric: tabular-nums;
}
body.proyeccion .pv-cifra { font-size: 46px; }
.pv-cifra.acento { color: var(--accent); }

/* Rejilla de métricas */
.pv-metricas { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(128px, 1fr)); }
.pv-metrica {
  padding: 14px 16px; border-radius: 10px; background: var(--surface);
  border: 1px solid var(--ink-06);
}
.pv-metrica .rot {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ink-40); margin-bottom: 7px; font-weight: 500;
}
body.proyeccion .pv-metrica .rot { font-size: 12px; }

/* SVG dentro de piezas */
.pieza-viva svg { display: block; width: 100%; height: auto; overflow: visible; }
.pieza-viva svg text { font-family: var(--mono); }

/* Casillas horarias */
.pv-celda { transition: fill .3s ease, stroke .3s ease; }

/* Apuesta */
.pv-apuesta { display: flex; gap: 10px; flex-wrap: wrap; }
.pv-opcion {
  flex: 1 1 auto; min-width: 92px; padding: 15px 12px; border-radius: 10px;
  border: 1.5px solid var(--ink-12); background: var(--surface); cursor: pointer;
  text-align: center; transition: all .16s ease;
  font-family: var(--display); font-weight: 600; font-size: 21px;
}
.pv-opcion:hover { border-color: var(--accent); background: var(--accent-10); }
.pv-opcion.elegida { border-color: var(--ink); background: var(--ink); color: var(--surface); }
.pv-opcion.correcta { border-color: #0F6E56; background: #E1F5EE; color: #04342C; }
.pv-opcion.fallada { border-color: var(--accent); background: var(--accent-10); color: var(--accent); }
body.proyeccion .pv-opcion { font-size: 27px; padding: 20px 16px; }

/* Deslizador */
.pv-deslizador { width: 100%; margin: 8px 0 4px; accent-color: var(--accent); height: 26px; }

/* Selector */
.pv-selector {
  font-family: var(--body); font-size: 14px; padding: 8px 12px;
  border: 1px solid var(--ink-12); border-radius: 7px;
  background: var(--surface); color: var(--ink); cursor: pointer;
}
body.proyeccion .pv-selector { font-size: 18px; padding: 11px 15px; }

@media (max-width: 820px) {
  .pv-lienzo { padding: 18px 15px; }
  .pv-cabecera, .pv-pie { padding: 13px 15px; }
  .pv-cifra { font-size: 27px; }
}

/* Hoja de cálculo dentro de piezas */
.hc-marco { position: relative; overflow: hidden; border-radius: 9px; border: 1px solid var(--ink-12); background: #fff; }
.hc-scroll { overflow-x: auto; }
.hc {
  border-collapse: collapse; font-family: var(--mono); font-size: 11.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap; min-width: 100%;
}
.hc th, .hc td { border: 1px solid #e6e2d6; padding: 5px 9px; text-align: right; }
.hc thead th {
  background: #efece0; color: var(--accent); font-weight: 500; font-size: 10px;
  letter-spacing: .06em; position: sticky; top: 0;
}
.hc .esquina, .hc .num {
  background: #efece0; color: var(--ink-40); text-align: center;
  font-size: 10px; width: 46px; position: sticky; left: 0;
}
.hc tbody tr { transition: background .35s ease; }
.hc tr.grupo-a td:not(.num) { background: rgba(139,69,20,.13); }
.hc tr.grupo-b td:not(.num) { background: rgba(3,25,30,.05); }
.hc td.pid { text-align: left; color: var(--accent); }
.hc td.uno { background: var(--ink) !important; color: var(--surface); font-weight: 500; }
.hc tr.puntos td { color: var(--ink-40); text-align: center; letter-spacing: .3em; border-color: #e6e2d6; }
.hc-desvanece {
  position: absolute; top: 0; right: 0; bottom: 0; width: 54px; pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,0), #fff 78%);
  opacity: 0; transition: opacity .2s ease;
}
.hc-marco.desborda .hc-desvanece { opacity: 1; }
.hc-marco.ajusta .hc { width: 100%; }
.hc-marco.ajusta .hc th, .hc-marco.ajusta .hc td { padding: 5px 6px; }
.hc-nota {
  font-family: var(--mono); font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-40); margin-top: 9px; text-align: right;
}
body.proyeccion .hc { font-size: 15px; }
body.proyeccion .hc thead th { font-size: 12.5px; }
body.proyeccion .hc .num, body.proyeccion .hc .esquina { font-size: 12px; width: 56px; }
body.proyeccion .hc-nota { font-size: 13px; }
@media (max-width: 820px) { .hc { font-size: 10px; } .hc th, .hc td { padding: 4px 6px; } }

/* ═══════════════════════════════════════════════════════════
   GLOSARIO EMERGENTE
   ═══════════════════════════════════════════════════════════ */

.termino {
  font: inherit; color: var(--accent); background: rgba(139,69,20,.09);
  border: none; border-bottom: 1.5px dotted var(--accent);
  padding: 0 3px; border-radius: 3px 3px 0 0; cursor: pointer;
  transition: background .15s ease;
}
.termino:hover { background: rgba(139,69,20,.2); }
.termino::after { content: ' ⌖'; font-size: .75em; opacity: .65; }

#ficha-fondo {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(3,25,30,.42); backdrop-filter: blur(7px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
  animation: apareceFondo .18s ease;
}
#ficha-fondo[hidden] { display: none; }
@keyframes apareceFondo { from { opacity: 0 } to { opacity: 1 } }

#ficha {
  position: relative; max-width: 620px; width: 100%; max-height: 84vh; overflow-y: auto;
  background: var(--surface); border-radius: 16px; padding: 34px 38px 28px;
  box-shadow: 0 24px 70px -18px rgba(3,25,30,.55);
  animation: subeFicha .22s cubic-bezier(.2,.8,.3,1);
}
@keyframes subeFicha { from { transform: translateY(16px); opacity: 0 } to { transform: none; opacity: 1 } }

#ficha-cerrar {
  position: absolute; top: 14px; right: 16px; width: 34px; height: 34px;
  border: none; background: transparent; color: var(--ink-40);
  font-size: 26px; line-height: 1; cursor: pointer; border-radius: 8px;
}
#ficha-cerrar:hover { background: var(--ink-06); color: var(--ink); }

.ficha-sub {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--accent); font-weight: 500; margin-bottom: 8px;
}
#ficha-titulo {
  font-family: var(--display); font-weight: 600; font-size: 30px;
  letter-spacing: -.02em; margin: 0 0 18px;
}
.ficha-cuerpo { font-size: 16.5px; line-height: 1.6; }
.ficha-cuerpo p { margin: 0 0 14px; }
.ficha-cuerpo p:last-child { margin-bottom: 0; }
.ficha-pie {
  margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--ink-12);
  font-family: var(--mono); font-size: 11px; color: var(--ink-40);
}
.ficha-pie:empty { display: none; }

body.proyeccion #ficha { max-width: 760px; padding: 42px 46px 34px; }
body.proyeccion #ficha-titulo { font-size: 38px; }
body.proyeccion .ficha-cuerpo { font-size: 21px; }
body.proyeccion .ficha-sub { font-size: 13px; }

@media (max-width: 820px) {
  #ficha { padding: 28px 22px 22px; }
  #ficha-titulo { font-size: 24px; }
  .ficha-cuerpo { font-size: 15.5px; }
}

/* Rejilla de cuadritos para la pieza de prevalencia */
.rej { display: grid; gap: 2px; grid-template-columns: repeat(40, 1fr); }
.rej i {
  display: block; aspect-ratio: 1; border-radius: 1.5px;
  background: var(--ink-12); transition: background .3s ease, opacity .3s ease;
}
.rej i.prev { background: var(--accent); }
.rej i.inc { background: var(--ink); }
.rej i.fuera { background: transparent; box-shadow: inset 0 0 0 1px rgba(139,69,20,.35); opacity: .55; }
@media (max-width: 820px) { .rej { grid-template-columns: repeat(25, 1fr); } }

/* ═══════════════════════════════════════════════════════════
   TARJETA DE AUTOR
   ═══════════════════════════════════════════════════════════ */

#autor, #autor-pastilla {
  position: fixed; right: 20px; bottom: 70px; z-index: 80;
  transition: transform .18s ease, box-shadow .18s ease;
}

#autor {
  width: 250px; padding: 15px 16px 14px; border-radius: 13px;
  background: rgba(252, 250, 244, .93); backdrop-filter: blur(12px);
  border: 1px solid var(--ink-12);
  box-shadow: 0 2px 6px rgba(3,25,30,.05), 0 14px 34px -16px rgba(3,25,30,.34);
}
#autor:hover { box-shadow: 0 2px 8px rgba(3,25,30,.07), 0 20px 44px -16px rgba(3,25,30,.42); }
#autor[hidden], #autor-pastilla[hidden] { display: none; }

#autor-pliega {
  position: absolute; top: 8px; right: 9px; width: 22px; height: 22px;
  border: none; background: transparent; color: var(--ink-40);
  font-size: 17px; line-height: 1; cursor: pointer; border-radius: 6px;
}
#autor-pliega:hover { background: var(--ink-06); color: var(--ink); }

.au-cab { display: flex; align-items: center; gap: 11px; }
.au-sigla {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--ink); color: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; font-size: 13.5px; letter-spacing: .02em;
}
.au-sigla.peq { width: 24px; height: 24px; font-size: 10px; }
.au-nombre { font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 1.2; }
.au-cred {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em;
  color: var(--accent); margin-top: 2px; font-weight: 500;
}

.au-cuerpo { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ink-12); }
.au-cuerpo p { margin: 0 0 10px; font-size: 12.5px; line-height: 1.42; color: var(--ink-60); }
.au-cta {
  display: block; text-align: center; text-decoration: none;
  background: var(--accent); color: var(--surface);
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 500; padding: 10px 12px; border-radius: 8px;
  transition: background .16s ease, transform .16s ease;
}
.au-cta:hover { background: var(--ink); transform: translateY(-1px); }

#autor-pastilla {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 13px 7px 8px; border-radius: 100px; cursor: pointer;
  background: rgba(252, 250, 244, .93); backdrop-filter: blur(12px);
  border: 1px solid var(--ink-12);
  font-family: var(--body); font-size: 12.5px; font-weight: 500; color: var(--ink-60);
  box-shadow: 0 8px 22px -12px rgba(3,25,30,.34);
}
#autor-pastilla:hover { color: var(--ink); border-color: var(--accent); }

body.lectura #autor, body.lectura #autor-pastilla { bottom: 20px; }

body.proyeccion #autor { width: 292px; padding: 18px 19px 17px; }
body.proyeccion .au-nombre { font-size: 18px; }
body.proyeccion .au-cred { font-size: 11px; }
body.proyeccion .au-cuerpo p { font-size: 14.5px; }
body.proyeccion .au-cta { font-size: 12px; padding: 12px 14px; }
body.proyeccion .au-sigla { width: 42px; height: 42px; font-size: 16px; border-radius: 50%; }

@media (max-width: 820px) {
  #autor { width: 208px; right: 12px; bottom: 12px; padding: 12px 13px 11px; }
  #autor-pastilla { right: 12px; bottom: 12px; font-size: 11.5px; }
  .au-cuerpo p { font-size: 11.5px; }
  .au-nombre { font-size: 13.5px; }
}

@media print { #autor, #autor-pastilla { display: none !important; } }

/* ─────────── Llamada grande en las portadillas de acto ─────────── */

.acto-cta {
  margin-top: 34px; padding: 22px 26px; border-radius: 14px;
  background: rgba(139,69,20,.09); border: 1px solid rgba(139,69,20,.28);
  max-width: 460px; text-align: left;
}
.acto-cta .rot {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 9px; font-weight: 500;
}
.acto-cta p { margin: 0 0 14px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.acto-cta .firma {
  font-family: var(--mono); font-size: 10.5px; color: var(--ink-40);
  margin-top: 12px; letter-spacing: .06em;
}
body.proyeccion .acto-cta { max-width: 560px; padding: 26px 30px; }
body.proyeccion .acto-cta p { font-size: 19px; }
body.proyeccion .acto-cta .rot { font-size: 12px; }
@media (max-width: 820px) { .acto-cta { padding: 18px 18px; } .acto-cta p { font-size: 14px; } }

/* ═══════════════════════════════════════════════════════════
   TAMAÑO DE LETRA · escala todo el material de una vez
   ═══════════════════════════════════════════════════════════ */

body.tam-s  { font-size: 15px; }
body.tam-l  { font-size: 19px; }
body.tam-xl { font-size: 21px; }

body.proyeccion.tam-s  { font-size: 21px; }
body.proyeccion.tam-l  { font-size: 29px; }
body.proyeccion.tam-xl { font-size: 34px; }

body.tam-s .esc-titulo  { font-size: clamp(22px, 2.9vw, 32px); }
body.tam-l .esc-titulo  { font-size: clamp(29px, 3.9vw, 43px); }
body.tam-xl .esc-titulo { font-size: clamp(32px, 4.4vw, 48px); }

body.proyeccion.tam-s .esc-titulo  { font-size: clamp(34px, 4.4vw, 56px); }
body.proyeccion.tam-l .esc-titulo  { font-size: clamp(46px, 6vw, 76px); }
body.proyeccion.tam-xl .esc-titulo { font-size: clamp(52px, 7vw, 88px); }

body.tam-s  .esc-cuerpo table { font-size: 13px; }
body.tam-l  .esc-cuerpo table { font-size: 16.5px; }
body.tam-xl .esc-cuerpo table { font-size: 18.5px; }
body.proyeccion.tam-s  .esc-cuerpo table { font-size: 18px; }
body.proyeccion.tam-l  .esc-cuerpo table { font-size: 24px; }
body.proyeccion.tam-xl .esc-cuerpo table { font-size: 28px; }

body.tam-s  .esc-cuerpo pre, body.tam-s  blockquote { font-size: 14px; }
body.tam-l  .esc-cuerpo pre { font-size: 14px; }
body.tam-l  blockquote { font-size: 20px; }
body.tam-xl .esc-cuerpo pre { font-size: 15px; }
body.tam-xl blockquote { font-size: 22px; }
body.proyeccion.tam-l  blockquote { font-size: 30px; }
body.proyeccion.tam-xl blockquote { font-size: 35px; }

body.tam-s  .esc-cierre { font-size: 16px; }
body.tam-l  .esc-cierre { font-size: 21px; }
body.tam-xl .esc-cierre { font-size: 24px; }
body.proyeccion.tam-l  .esc-cierre { font-size: 31px; }
body.proyeccion.tam-xl .esc-cierre { font-size: 36px; }

body.tam-l  .pv-pie, body.tam-l  .ficha-cuerpo { font-size: 16.5px; }
body.tam-xl .pv-pie, body.tam-xl .ficha-cuerpo { font-size: 18.5px; }
body.proyeccion.tam-l  .pv-pie { font-size: 23px; }
body.proyeccion.tam-xl .pv-pie { font-size: 27px; }

/* En tamaños grandes, la columna se ensancha para no partir demasiado */
body.proyeccion.tam-l .escena  { max-width: 62ch; }
body.proyeccion.tam-xl .escena { max-width: 58ch; }

#btn-tamano #tam-rot { font-weight: 600; }

/* ═══════════ ACCESIBILIDAD ═══════════ */

:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.salta-al-contenido {
  position: absolute; left: -9999px; top: 8px; z-index: 200;
  background: var(--ink); color: var(--surface); padding: 10px 16px;
  border-radius: 6px; font-family: var(--mono); font-size: 12px;
}
.salta-al-contenido:focus { left: 8px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}