/* ═══════════════════════════════════════════════════════════════════════
   RTP JOKER LAB — Cuaderno cuadriculado de laboratorio
   Sistema BYQ « Nerdstack ». Tomado tal cual: el cuerpo de peso ligero
   frente a titulares de peso normal y bajo contraste, la etiqueta mono de
   10 px con 0.75 px de interletra reservada a taxonomía y cabeceras de
   tabla, el ritmo de sección de 80/120/160/200 px, el lienzo crema cálido,
   los acentos pastel empleados como categoría —nunca como adorno— y los
   estados funcionales de pase, aviso y corrección, que en este sistema
   jamás decoran.
   Adaptado: el pliego prohíbe tarjetas, sombras y esquinas redondeadas, de
   modo que la elevación de Nerdstack la asume la propia retícula
   milimetrada; la paleta pasa a papel cuadriculado, grafito, azul de
   laboratorio y rojo de corrección, y las familias a Courier New para
   cifras y rótulos y un serif de lectura para el texto corrido. El gráfico
   que el pliego pedía en SVG se dibuja con celdas de la cuadrícula, porque
   el proyecto no admite un solo archivo gráfico.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --papel:#F4F6F2; --cuadro:#D7E0D2;
  --grafito:#3A3F46;
  --grafito-72:rgba(58,63,70,.72);
  --grafito-48:rgba(58,63,70,.48);
  --grafito-24:rgba(58,63,70,.24);
  --azul:#2C5F8A; --rojo:#B3402E;
  --mono:"Courier New",Courier,"Nimbus Mono PS",monospace;
  --serif:Charter,Georgia,"Iowan Old Style","Times New Roman",serif;
  --t-caption:10px; --t-body-sm:13px; --t-body:16px; --t-body-lg:20px;
  --t-h-sm:20px; --t-h:32px; --t-h-lg:40px; --t-display-sm:48px; --t-display:64px;
  --s-4:4px;--s-8:8px;--s-12:12px;--s-16:16px;--s-20:20px;--s-24:24px;--s-32:32px;
  --s-48:48px;--s-64:64px;--s-80:80px;--s-120:120px;--s-160:160px;--s-200:200px;
  --hoja:640px;            /* ancho de la columna del cuaderno */
  --margen:132px;          /* campo izquierdo para las notas   */
  --celda:22px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:24px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.001ms!important}}
body{margin:0;color:var(--grafito);font-family:var(--serif);font-size:var(--t-body);
  line-height:1.6;overflow-x:clip;
  background:
    repeating-linear-gradient(90deg,transparent 0 calc(var(--celda) - 1px),var(--cuadro) calc(var(--celda) - 1px) var(--celda)),
    repeating-linear-gradient(0deg,transparent 0 calc(var(--celda) - 1px),var(--cuadro) calc(var(--celda) - 1px) var(--celda)),
    var(--papel)}
a{color:inherit}
:focus-visible{outline:2px solid var(--rojo);outline-offset:2px}
h1,h2,h3{margin:0;font-family:var(--mono);font-weight:400;letter-spacing:-.01em}
h1{font-size:var(--t-h-lg);line-height:1.2}
h2{font-size:var(--t-h);line-height:1.25}
h3{font-size:var(--t-h-sm);line-height:1.2}
p{margin:0 0 var(--s-20)}
p:last-child{margin-bottom:0}
@media(max-width:479px){h1{font-size:var(--t-h)}h2{font-size:var(--t-h-sm)}}

/* ═══ La hoja: columna de 640 px con campo izquierdo ═════════════════ */
.hoja{width:100%;max-width:calc(var(--hoja) + var(--margen) + 48px);margin:0 auto;
  padding-inline:24px;display:grid;grid-template-columns:var(--margen) minmax(0,1fr);
  gap:0 var(--s-32)}
@media(max-width:767px){.hoja{grid-template-columns:1fr;gap:var(--s-12)}}
.campo{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.75px;
  text-transform:uppercase;color:var(--grafito-48);text-align:right;padding-top:6px}
@media(max-width:767px){.campo{text-align:left}}
.texto{min-width:0}
.texto>*+*{margin-top:var(--s-20)}

/* ═══ Secciones y línea de corte entre pliegos ═══════════════════════ */
.pliego{padding-block:var(--s-80)}
.pliego.corta{padding-block:var(--s-48)}
.corte{border:0;border-top:1px dashed var(--grafito-24);margin:0}
.js-on .revelar{opacity:0;transition:opacity 300ms ease}
.js-on .revelar.visto{opacity:1}
.filete{height:1px;background:var(--grafito-24);transform-origin:left}
.js-on .filete{transform:scaleX(0);transition:transform 400ms ease}
.js-on .filete.visto{transform:scaleX(1)}

/* ═══ BLOQUE 3.0 — Lomo del cuaderno en lugar de cabecera ═══════════ */
.lomo{border-bottom:1px solid var(--grafito-24);background:rgba(244,246,242,.86)}
.lomo .hoja{padding-block:var(--s-16);align-items:baseline}
.lomo .titulo{font-family:var(--mono);font-size:var(--t-body);text-decoration:none}
.lomo nav{display:flex;flex-wrap:wrap;gap:var(--s-16)}
.lomo nav a{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.75px;
  text-transform:uppercase;color:var(--grafito-72);text-decoration:none;
  border-bottom:1px solid transparent}
.lomo nav a:hover{border-bottom-color:var(--azul);color:var(--azul)}
.lomo .edad{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.75px;
  color:var(--grafito-48);margin-left:auto}
.lomo .fila{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s-16) var(--s-24);
  grid-column:2}
@media(max-width:767px){.lomo .fila{grid-column:1}}

/* ═══ BLOQUE 4.0 — Primera página del pliego ════════════════════════ */
.encabezado-hoja{display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.75px;
  text-transform:uppercase;color:var(--grafito-48);
  border-bottom:1px solid var(--grafito-24);padding-bottom:var(--s-8)}
.lead{font-size:var(--t-body-lg);line-height:1.6}
.acciones{display:flex;flex-wrap:wrap;gap:var(--s-16);align-items:center}

/* ═══ BLOQUE 5.0 — Línea de datos de entrada ════════════════════════ */
.entrada{font-family:var(--mono);font-size:var(--t-body-sm);line-height:1.8;
  border-block:1px solid var(--grafito-24);padding-block:var(--s-12)}
.entrada span{display:inline-block;margin-right:var(--s-24)}
.entrada b{font-weight:400;color:var(--azul)}
.pendiente{color:var(--rojo)}

/* ═══ BLOQUE 8.0 — Cálculo en columna ═══════════════════════════════ */
.calculo{font-family:var(--mono);font-size:var(--t-body-sm);line-height:2}
.calculo div{display:grid;grid-template-columns:1fr auto;gap:var(--s-24);
  border-bottom:1px solid var(--grafito-24)}
.calculo div.total{border-bottom:3px double var(--grafito)}
.calculo .num{text-align:right;white-space:nowrap}

/* ═══ BLOQUE 9.0 — Gráfico de dispersión a lápiz ════════════════════
   Dibujado con celdas de la propia cuadrícula: sin svg ni archivo. */
.dispersion{display:grid;grid-template-columns:repeat(24,1fr);align-items:end;
  gap:2px;height:180px;border-left:1px solid var(--grafito);
  border-bottom:1px solid var(--grafito);padding:0 2px 2px}
.dispersion i{display:block;background:var(--grafito-24);height:var(--h)}
.dispersion i.media{background:var(--azul)}
.leyenda{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.75px;
  text-transform:uppercase;color:var(--grafito-48)}

/* ═══ BLOQUE 10.0 — Tabla sin cebra ni estados de color ═════════════ */
.tabla-lab{width:100%;border-collapse:collapse;font-family:var(--mono);
  font-size:var(--t-body-sm)}
.tabla-lab caption{text-align:left;font-size:var(--t-caption);letter-spacing:.75px;
  text-transform:uppercase;color:var(--grafito-48);padding-bottom:var(--s-8)}
.tabla-lab th{text-align:left;font-weight:400;font-size:var(--t-caption);
  letter-spacing:.75px;text-transform:uppercase;color:var(--grafito-48);
  border-bottom:1px solid var(--grafito);padding:var(--s-8) var(--s-8) var(--s-8) 0}
.tabla-lab td{padding:var(--s-8) var(--s-8) var(--s-8) 0;
  border-bottom:1px solid var(--grafito-24);vertical-align:top}
.tabla-lab sup{color:var(--azul)}
.desliza{overflow-x:auto}
.notas-pie{font-family:var(--mono);font-size:var(--t-caption);line-height:1.9;
  color:var(--grafito-72);border-top:1px solid var(--grafito-24);padding-top:var(--s-12)}

/* ═══ BLOQUE 11.0 — Correcciones en rojo ════════════════════════════ */
.correccion{font-family:var(--mono);font-size:var(--t-body-sm);line-height:1.9}
.correccion div{border-bottom:1px solid var(--grafito-24);padding-block:var(--s-8)}
.tachado{text-decoration:line-through;color:var(--grafito-48)}
.marca-roja{color:var(--rojo)}

/* ═══ BLOQUE 14.0/20.0 — Listas numeradas al margen y materiales ════ */
.numerada{list-style:none;margin:0;padding:0}
.numerada li{display:grid;grid-template-columns:var(--s-32) 1fr;gap:var(--s-16);
  padding-block:var(--s-12);border-bottom:1px solid var(--grafito-24)}
.numerada b{font-family:var(--mono);font-size:var(--t-body-sm);font-weight:400;
  color:var(--azul)}
.indice-hojas{list-style:none;margin:0;padding:0}
.indice-hojas li{border-bottom:1px solid var(--grafito-24)}
.indice-hojas a{display:grid;grid-template-columns:var(--s-48) 1fr;gap:var(--s-16);
  padding-block:var(--s-16);text-decoration:none}
.indice-hojas a:hover .t{color:var(--azul)}
.indice-hojas .n{font-family:var(--mono);font-size:var(--t-body-sm);color:var(--grafito-48)}
.indice-hojas .t{font-family:var(--mono);font-size:var(--t-body)}
.indice-hojas .g{display:block;margin-top:var(--s-4);font-family:var(--serif);
  font-size:var(--t-body-sm);line-height:1.54;color:var(--grafito-72)}

/* ═══ BLOQUE 17.0 — Recuadro a mano ═════════════════════════════════ */
.recuadro{border:1px solid var(--grafito);padding:var(--s-24)}
.recuadro.azul{border-color:var(--azul)}

/* ═══ BLOQUE 19.0 — Nota de juego responsable ═══════════════════════ */
.pliego.inversa{background:var(--grafito);color:var(--papel)}
.inversa .campo,.inversa .leyenda{color:rgba(244,246,242,.48)}
.inversa .recuadro{border-color:rgba(244,246,242,.32)}
.inversa a{color:var(--papel)}
.lista-limpia{list-style:none;margin:0;padding:0}
.lista-limpia li{padding-block:var(--s-12);border-top:1px solid rgba(244,246,242,.24)}
.lista-limpia b{font-family:var(--mono);font-weight:400;display:block}
.lista-limpia span{display:block;margin-top:var(--s-4);font-size:var(--t-body-sm);
  line-height:1.54;color:rgba(244,246,242,.72)}

/* ═══ BLOQUE 22.0 — Preguntas al pie del pliego ═════════════════════ */
.consultas{border-top:1px solid var(--grafito)}
.consulta{border-bottom:1px solid var(--grafito-24)}
.consulta .tirador{width:100%;display:grid;grid-template-columns:1fr auto;gap:var(--s-16);
  background:none;border:0;padding:var(--s-16) 0;cursor:pointer;text-align:left;
  font-family:var(--mono);font-size:var(--t-body);color:inherit;align-items:baseline}
.signo{font-family:var(--mono);color:var(--rojo)}
.cuerpo-q{max-height:0;overflow:hidden;transition:max-height 300ms ease}
.cuerpo-q.abierto{max-height:460px}
.cuerpo-q:not(.abierto) .dentro{visibility:hidden}
.dentro{padding-bottom:var(--s-24);font-size:var(--t-body);line-height:1.6}

/* ═══ Acción, aviso y divulgación ═══════════════════════════════════ */
.cta{display:inline-flex;align-items:center;gap:var(--s-12);background:var(--azul);
  color:var(--papel);padding:12px 22px;font-family:var(--mono);font-size:var(--t-body-sm);
  letter-spacing:.5px;text-decoration:none;transition:background 300ms ease}
.cta:hover{background:var(--grafito)}
.chevron{display:inline-block;width:6px;height:6px;flex:none;
  border-right:1.5px solid currentColor;border-top:1.5px solid currentColor;transform:rotate(45deg)}
.aviso{font-family:var(--mono);font-size:var(--t-caption);letter-spacing:.75px;
  text-transform:uppercase;color:var(--grafito-72)}
.inversa .aviso{color:rgba(244,246,242,.72)}
.divulgacion{font-family:var(--mono);font-size:var(--t-caption);line-height:1.8;
  color:var(--grafito-72)}
.inversa .divulgacion{color:rgba(244,246,242,.72)}
.enlace{color:var(--azul);text-decoration:underline;text-underline-offset:2px}
.inversa .enlace{color:var(--papel)}

/* ═══ BLOQUE 23.0 — Contratapa ══════════════════════════════════════ */
.pie-sitio{background:var(--grafito);color:var(--papel);padding-block:var(--s-64)}
.pie-sitio .marco{width:100%;max-width:calc(var(--hoja) + var(--margen) + 48px);
  margin:0 auto;padding-inline:24px}
.pie-cols{display:grid;grid-template-columns:1fr 1.6fr;gap:var(--s-48)}
@media(max-width:767px){.pie-cols{grid-template-columns:1fr;gap:var(--s-24)}}
.pie-marca{font-family:var(--mono);font-size:var(--t-h-sm)}
.pie-nota{margin-top:var(--s-8);font-size:var(--t-body-sm);line-height:1.54;
  color:rgba(244,246,242,.72)}
.pie-sitio nav{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:var(--s-8) var(--s-24)}
.pie-sitio nav a{font-family:var(--mono);font-size:var(--t-body-sm);
  color:rgba(244,246,242,.72);text-decoration:none}
.pie-sitio nav a:hover{color:var(--papel)}
.legal{margin-top:var(--s-20);font-family:var(--mono);font-size:var(--t-caption);
  line-height:1.8;color:rgba(244,246,242,.48)}