/*
 * SISTEMA DE DISEÑO — On The Record / Gazeta
 *
 * Procedencia de cada bloque (nada acá está estimado):
 *   - Tokens claro/oscuro y derivados: apps/mesa/estilo.css:34-68, gemelo literal de
 *     apps/movil/lib/sistema/tokens.dart:27-53 (muestreados de la lámina, no a ojo).
 *   - Medidas: apps/movil/lib/sistema/tokens.dart:57-75 (clase Medida).
 *   - Tipografía y @font-face: apps/mesa/estilo.css:13-32. Los .woff2 son subconjuntos
 *     latinos de los .ttf de la app móvil y se sirven del propio origen porque la CSP
 *     es `font-src 'self' data:` — Google Fonts está BLOQUEADO.
 *   - Componentes: apps/movil/lib/sistema/componentes.dart (Versalita:31, Regla:51,
 *     Tramado:70, Punteado:110, SelloDeMadurez:155, MarcaDeCapa:228, NoConsta:273) y
 *     su port web en apps/mesa/estilo.css:186-285 + assets/piezas.js:82-93.
 *
 * Cambios deliberados respecto de apps/mesa/estilo.css: este archivo es MÓVIL PRIMERO
 * (mesa es escritorio primero, con breakpoints hacia abajo) y da nombre propio a los
 * componentes que en mesa viven como estilos inline (marcaDeCapa en
 * apps/mesa/assets/vistas-redaccion.js:501-507).
 */

/* ── Tipografía ────────────────────────────────────────────────────────────
   Archivo = el SISTEMA (etiquetas, sellos, botones, cifras).
   Source Serif 4 = el CONTENIDO (titulares, cuerpo, citas).
   El reparto no se cruza. Copiar los .woff2 de apps/mesa/tipografia/. */

@font-face {
  font-family: Archivo;
  src: url("/tipografia/archivo.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/tipografia/source-serif-4.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("/tipografia/source-serif-4-italica.woff2") format("woff2");
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
}

/* ── Tokens ────────────────────────────────────────────────────────────────
   Cuatro colores por modo y ninguno más. El rojo es SÓLO para: la cita, la
   acción primaria y el rótulo fuerte. No hay verde de éxito ni amarillo de
   advertencia: este sistema no semaforiza, informa. */

:root {
  --fondo: #f3f2f2;
  --papel: #fff;
  --tinta: #201e1d;
  --rojo: #ec3013;
  /* Derivados: alphaBlend de tinta sobre papel (58 / 18 / 10 %). */
  --tinta-tenue: #7e7c7c;
  --regla: #d6d6d5;
  /* El panel oscuro sobre fondo claro (barra lateral, cabezal invertido). */
  --panel: #201e1d;
  --panel-tinta: #f2efec;
  --panel-tenue: #8a8785;
  --panel-regla: #3a3735;
  --panel-borde: #4e4b49;
  /* La trama: todo lo que NO es documento se dibuja rayado, nunca en color liso. */
  --trama: repeating-linear-gradient(-45deg, rgba(32, 30, 29, 0.1) 0 1.5px, transparent 1.5px 6px);
  --trama-fuerte: repeating-linear-gradient(-45deg, rgba(32, 30, 29, 0.3) 0 1.5px, transparent 1.5px 6px);

  /* Medidas — tokens.dart, clase Medida. */
  --regla-grosor: 2px;   /* la que ordena la página, siempre 2 */
  --regla-fina: 1px;     /* separa filas dentro de un bloque */
  --borde: 3px;          /* una caja que AFIRMA algo (NO CONSTA, lo que firmás) */
  --margen: 16px;
  --aire: 12px;
  --aire-chico: 8px;
  --radio: 0;            /* cero en TODO el sistema: un expediente no tiene esquinas redondeadas */

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0b0a0a;
    --papel: #151413;
    --tinta: #f2efec;
    /* El #EC3013 sobre #0B0A0A no llega a contraste de texto: se aclara. */
    --rojo: #ff6a4d;
    --tinta-tenue: #9a9694;
    --regla: #332f2d;
    --trama: repeating-linear-gradient(-45deg, rgba(242, 239, 236, 0.12) 0 1.5px, transparent 1.5px 6px);
    --trama-fuerte: repeating-linear-gradient(-45deg, rgba(242, 239, 236, 0.32) 0 1.5px, transparent 1.5px 6px);
    color-scheme: dark;
  }
}

/* ── Base ──────────────────────────────────────────────────────────────── */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: Archivo, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--rojo); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font-family: inherit; cursor: pointer; color: inherit; }
img { max-width: 100%; display: block; }
::selection { background: var(--rojo); color: #fff; }
:focus-visible { outline: 3px solid var(--rojo); outline-offset: 2px; }

/* ── Versalita ─────────────────────────────────────────────────────────────
   La etiqueta del sistema: 10px / 700 / .16em / MAYÚSCULAS. Está en toda la
   lámina y es lo que da el aire de expediente. En mesa se llama `.rotulo`. */

.rotulo,
.versalita {
  font: 700 10px/1 Archivo;
  letter-spacing: 1.6px;       /* == 10px * .16em */
  text-transform: uppercase;
}
.rotulo--tenue { color: var(--tinta-tenue); }
.rotulo--rojo { color: var(--rojo); }

/* ── Regla ─────────────────────────────────────────────────────────────────
   La línea de 2px que ordena la página. Grosor >= 2 va en tinta; la fina, en
   --regla (tokens.dart:62). */

.regla { height: var(--regla-grosor); background: var(--tinta); border: 0; margin: 0; }
.regla--fina { height: var(--regla-fina); background: var(--regla); }

/* ── Tramado ───────────────────────────────────────────────────────────────
   La textura de lo NO TERMINADO (madurez «en construcción») y de lo que NO ES
   DOCUMENTO (capa conjetura). Que compartan textura es deliberado: las dos
   cosas son «todavía no». Paso 6px, trazo 1.5px, -45°. */

.trama { background-image: var(--trama); }
.trama--fuerte { background-image: var(--trama-fuerte); }

/* ── Punteado ──────────────────────────────────────────────────────────────
   El borde de lo SÓLO DECLARADO (hoja de ruta, espacio publicitario reservado,
   QR al publicar). En Flutter: guion 5 / hueco 4 (componentes.dart:134). */

.punteado { border: 1px dashed var(--regla); }
.punteado--tenue { border-color: var(--tinta-tenue); color: var(--tinta-tenue); }

/* ── SelloDeMadurez / sellos ───────────────────────────────────────────────
   Viaja con el servicio a TODA superficie: nada en construcción se ve como
   producción. La variante NO se elige a mano: sale del vocabulario cerrado
   (apps/mesa/assets/vocabulario.js:20-26). produccion→tinta · parcial→rojo ·
   casi→linea · construccion→trama · hoja_de_ruta→punteado. */

.sello {
  font: 700 9px/1 Archivo;
  letter-spacing: 1.4px;
  padding: 5px 7px;
  display: inline-block;
  white-space: nowrap;
}
.sello--tinta { background: var(--tinta); color: var(--papel); }
.sello--rojo { background: var(--rojo); color: #fff; }
.sello--linea { border: 1px solid var(--tinta); }
.sello--trama { border: 1px solid var(--tinta); background-image: var(--trama); }
.sello--punteado { border: 1px dashed var(--tinta-tenue); color: var(--tinta-tenue); }
.sello--alerta { color: var(--rojo); border: 1px solid var(--rojo); }

/* ── MarcaDeCapa ───────────────────────────────────────────────────────────
   El cuadradito al margen. Cuatro capas que no se mezclan:
     documento  → sólido        (existe en el archivo, con procedencia)
     atestacion → filo rojo 2px (alguien lo dijo, consta cuándo)
     lectura    → filo gris 2px (interpretación humana, atribuida)
     conjetura  → tramada       (todo lo demás, incluido lo que escribió un modelo)
   En Plaza mapea al nivel del perfil: registrado=lectura · firmante=atestacion ·
   acreditado=documento (BRIEF-FRONT.md:505-506). */

.capa {
  width: 16px;
  height: 16px;
  flex: none;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: -2px;
}
.capa--documento { background: var(--tinta); }
.capa--atestacion { border: 2px solid var(--rojo); }
.capa--lectura { border: 2px solid var(--regla); }
.capa--conjetura { border: 1px solid var(--regla); background-image: var(--trama-fuerte); }

/* ── NoConsta ──────────────────────────────────────────────────────────────
   EL COMPONENTE CENTRAL DEL PRODUCTO. El vacío con causa es de primera clase,
   no un estado de error: se diseña como cualquier otro bloque, con su borde de
   3px, su título en Archivo 800 y su causa en Source Serif.

   Nunca se sustituye por un cero, una lista vacía muda ni un «todo tranquilo».
   `comoSeArregla` va APARTE, en punteado: la causa dice qué pasó, el arreglo
   dice qué haría falta, y mezclarlos convierte un hecho en una promesa.

   Marcado (apps/mesa/assets/piezas.js:82-93):
     <div class="causa">
       <h3>NO CONSTA</h3>
       <p><strong>Causa: </strong>…texto de la API…</p>
       <div class="causa__regla"></div>
       <span class="rotulo rotulo--tenue">CÓMO SE ARREGLA</span>
       <p class="causa__arreglo">…</p>
     </div>                                                                  */

.causa { border: var(--borde) solid var(--tinta); padding: 17px; }
.causa h3 { margin: 0; font: 800 20px/1.05 Archivo; letter-spacing: -0.3px; }
.causa p { margin: 9px 0 0; font: 400 15px/1.5 "Source Serif 4", Georgia, serif; }
.causa strong { font-weight: 600; }
.causa__regla { height: 1px; background: var(--regla); margin: 15px 0 11px; }
.causa__arreglo { color: var(--tinta-tenue); font-size: 14px; }
/* El bloque de arreglo suelto, cuando va fuera de la caja. */
.causa--arreglo { border: 1px dashed var(--regla); padding: 15px; }
.causa--arreglo p { color: var(--tinta-tenue); font-size: 14px; }

/* El registro de consulta dentro de un NoConsta (componentes.dart:322-349):
   qué se miró y con qué resultado. Una fuente que NO SE PUDO consultar va en
   rojo — no es «0 coincidencias», es «no se sabe». */
.causa__registro { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; }
.causa__registro span:first-child { font: 400 14px/1.4 "Source Serif 4", Georgia, serif; }
.causa__registro span:last-child { font: 400 14px/1.4 "Source Serif 4", Georgia, serif; color: var(--tinta-tenue); text-align: right; }
.causa__registro--falla span:last-child { color: var(--rojo); }

/* ── Contenido ─────────────────────────────────────────────────────────── */

.serif { font: 400 15px/1.5 "Source Serif 4", Georgia, serif; }
.titular h1 { margin: 0; font: 800 36px/1.02 Archivo; letter-spacing: -0.8px; }
.titular__ceja { display: block; font: 700 10px/1 Archivo; letter-spacing: 1.7px; color: var(--rojo); margin-bottom: 9px; }

/* ── Botones ───────────────────────────────────────────────────────────────
   Primaria roja, secundaria de contorno, nunca de color. Sin radio. */

.boton {
  height: 50px;
  padding: 0 20px;
  background: var(--tinta);
  border: 0;
  color: var(--papel);
  font: 800 12px/1 Archivo;
  letter-spacing: 1.9px;
}
.boton--rojo { background: var(--rojo); color: #fff; }
.boton--linea { background: none; border: var(--regla-grosor) solid var(--tinta); color: var(--tinta); }
.boton--chico { height: auto; padding: 5px 7px; font: 700 9px/1 Archivo; letter-spacing: 1.4px; background: none; border: 1px solid var(--tinta); color: var(--tinta); }
.boton[disabled] { opacity: 0.45; cursor: not-allowed; }

/* ── Cifras y barras ───────────────────────────────────────────────────────
   Un valor que no existe se dibuja como raya (—), NUNCA como cero: un 0 medido
   y un dato ausente se ven distinto porque son cosas distintas
   (apps/mesa/assets/piezas.js:112-118). Una barra sin tope declarado se dibuja
   punteada y vacía, no llena al 0%. */

.cifra { font: 800 38px/1 Archivo; letter-spacing: -1.2px; }
.cifra--rojo { color: var(--rojo); }
.cifras { display: grid; gap: 2px; background: var(--regla); border: 1px solid var(--regla); }
.cifras > div { background: var(--papel); padding: 18px; display: flex; flex-direction: column; gap: 7px; }

.barra { height: 8px; background: var(--regla); position: relative; }
.barra i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--tinta); }
.barra--rojo i { background: var(--rojo); }
.barra--sin { height: 8px; border: 1px dashed var(--regla); background: none; }

.huella { font: 500 13px/1.4 Archivo; letter-spacing: 0.5px; word-break: break-all; }

/* ── Listas densas ─────────────────────────────────────────────────────────
   La densidad es una virtud: un periodista quiere ver diez notas, no tres
   tarjetas gigantes. El gap de 2px sobre fondo --regla dibuja los separadores
   sin un solo border. */

.lista { display: flex; flex-direction: column; gap: 2px; background: var(--regla); }
.lista > * { background: var(--papel); }

.pieza { border-left: var(--borde) solid var(--rojo); padding-left: 13px; display: flex; flex-direction: column; gap: 8px; }
.pieza h3 { margin: 0; font: 600 18px/1.3 "Source Serif 4", Georgia, serif; text-wrap: pretty; }
.pieza__meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pieza__nota { font: 400 14px/1 "Source Serif 4", Georgia, serif; color: var(--tinta-tenue); }

.cabecera {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid var(--regla);
  padding-bottom: 8px;
  margin-bottom: 16px;
}

/* ── Cadena de custodia ────────────────────────────────────────────────────
   Cada acto con quién lo hizo y cuándo. El último punto va en rojo porque es
   donde está la pieza ahora (apps/mesa/assets/piezas.js:155-168). */

.cadena { display: flex; flex-direction: column; }
.cadena__paso { display: flex; gap: 11px; }
.cadena__eje { display: flex; flex-direction: column; align-items: center; }
.cadena__punto { width: 10px; height: 10px; background: var(--tinta); margin-top: 4px; flex: none; }
.cadena__punto--vivo { background: var(--rojo); }
.cadena__linea { width: 1px; flex: 1; background: var(--regla); }
.cadena__cuerpo { padding-bottom: 14px; }
.cadena__cuerpo p { margin: 0; font: 600 15px/1.3 "Source Serif 4", Georgia, serif; }
.cadena__cuerpo span { font: 500 11px/1.3 Archivo; color: var(--tinta-tenue); }

/* ── La marca: la cadena ───────────────────────────────────────────────────
   Cuatro eslabones y un eje; el tercero en rojo — la firma. Geometría de
   apps/mesa/estilo.css:112-117 (caja de 40px), derivada del branding en
   apps/movil/lib/sistema/marca.dart (caja de 320). */

.marca { position: relative; width: 40px; height: 40px; flex: none; }
.marca i { position: absolute; background: var(--tinta); }
.marca i:nth-child(1) { left: 18.5px; top: 5.5px; width: 2.25px; height: 29px; }
.marca i:nth-child(2) { left: 6.5px; top: 6.5px; width: 10px; height: 10px; }
.marca i:nth-child(3) { left: 23px; top: 15px; width: 10px; height: 10px; background: var(--rojo); }
.marca i:nth-child(4) { left: 6.5px; top: 23.5px; width: 10px; height: 10px; }

/* ── Espera ────────────────────────────────────────────────────────────────
   Dice QUÉ está haciendo. Sin eso la pantalla parece rota, y un esqueleto
   infinito es una pantalla inventada. */

.cargando { font: 700 10px/1 Archivo; letter-spacing: 1.6px; color: var(--tinta-tenue); padding: 22px 0; }
.cargando::after { content: " ·"; animation: latido 1s steps(4) infinite; }
@keyframes latido { to { content: " ····"; } }

@media (prefers-reduced-motion: reduce) {
  .cargando::after { animation: none; }
  * { animation: none !important; }
}

/* ── Armazón, móvil primero ────────────────────────────────────────────────
   El cronista trabaja en la calle, con una mano y con sol: la columna única es
   el default y las grillas aparecen recién en pantalla ancha. */

.hoja { width: 100%; padding: var(--margen); }
.tramo { display: flex; flex-direction: column; gap: 2px; background: var(--regla); }
.columna { background: var(--papel); padding: var(--margen); }
.costado { background: var(--fondo); padding: var(--margen); display: flex; flex-direction: column; gap: var(--margen); }

@media (min-width: 700px) {
  .columna { padding: 22px 24px; }
  .costado { padding: 26px 24px; }
}
@media (min-width: 1180px) {
  .hoja { max-width: 1180px; margin: 0 auto; padding: 20px 20px 64px; }
  .tramo { display: grid; border-bottom: var(--regla-grosor) solid var(--tinta); }
  .tramo--dos { grid-template-columns: 1fr 420px; }
  .tramo--tres { grid-template-columns: 1fr 1fr 372px; }
}

/* ══ DIARIO DE LA GENTE — layout de la app (sobre el sistema, no en su lugar) ══ */
* { box-sizing: border-box; }
body { margin: 0; background: var(--fondo); color: var(--tinta);
  font: 400 17px/1.5 "Source Serif 4", Georgia, serif; }
.hoja { max-width: 720px; margin: 0 auto; padding: 0 var(--margen) 64px;
  background: var(--papel); min-height: 100vh; }
a { color: var(--tinta); }
.boton { font: 700 12px/1 Archivo; letter-spacing: .12em; padding: 12px 18px;
  background: var(--rojo); color: #fff; border: 0; border-radius: var(--radio); cursor: pointer; }
.boton--linea { background: none; color: var(--tinta); border: 1px solid var(--tinta); }
select { font: 400 14px/1.2 Archivo; padding: 9px; border: 1px solid var(--regla);
  border-radius: 0; background: var(--papel); color: var(--tinta); max-width: 100%; }

/* cabecera — el sistema de mesa la hace flex (cabecera de consola); acá es
   la portada de un diario: bloque apilado, kicker arriba, marca, bajada. */
.cabecera { display: block; padding-top: 22px; }
.cabecera__kicker { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.cabezal { font: 800 clamp(34px, 9vw, 58px)/0.95 Archivo; letter-spacing: -1.5px; margin: 10px 0 4px; }
.bajada { font-style: italic; color: var(--tinta-tenue); margin: 0 0 14px; }

/* la pregunta omnisciente */
.omni { padding: 22px 0; }
.omni__invitacion { font-size: 19px; line-height: 1.45; max-width: 58ch; margin: 8px 0 14px; }
.omni__caja { display: flex; gap: var(--aire-chico); flex-wrap: wrap; }
.omni__caja input { flex: 1 1 260px; font: 400 17px/1.3 "Source Serif 4", Georgia, serif;
  padding: 12px; border: var(--borde) solid var(--tinta); border-radius: 0;
  background: var(--papel); color: var(--tinta); }
.omni__caja input:focus { outline: 2px solid var(--rojo); outline-offset: 2px; }
/* La pregunta crece hacia adentro, no hacia abajo: ni la respuesta ni la
   lista de preguntas desplazan los titulares de la tapa. */
#respuesta { margin-top: 16px; max-height: 420px; overflow-y: auto; }
#preguntasRecientes { max-height: 230px; overflow-y: auto; }
.resp { border-left: var(--regla-grosor) solid var(--rojo); padding: 4px 0 4px 14px; }
.resp p { margin: 6px 0; }
.resp__citas a { display: block; font: 500 11px/1.6 Archivo; color: var(--tinta-tenue);
  text-decoration: none; }
.resp__acciones { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
#preguntasRecientes { margin-top: 18px; }
.qreciente { display: block; font: 400 15px/1.5 "Source Serif 4", Georgia, serif;
  color: var(--tinta); text-decoration: none; padding: 6px 0;
  border-bottom: var(--regla-fina) solid var(--regla); }
.qreciente .rotulo { margin-right: 8px; }

/* principal */
.principal { padding: 20px 0; }
.principal h2 { font: 700 clamp(24px, 6vw, 36px)/1.1 "Source Serif 4", Georgia, serif;
  letter-spacing: -0.5px; margin: 6px 0 8px; }
.principal a { text-decoration: none; }
.principal__resumen { color: var(--tinta-tenue); max-width: 60ch; }

.tapa-secundaria { display: block; text-decoration: none; color: var(--tinta);
  padding: 10px 0; border-bottom: var(--regla-fina) solid var(--regla); }
.tapa-secundaria h3 { font: 700 20px/1.25 "Source Serif 4", Georgia, serif;
  margin: 4px 0 0; letter-spacing: -0.2px; }
.tapa-secundaria:hover h3 { color: var(--rojo); }

/* secciones de la gente */
.secciones { padding: 4px 0 20px; }
.seccion { margin-top: 18px; }
.seccion__cabeza { display: flex; align-items: baseline; gap: 10px; }
.seccion__cabeza h3 { font: 800 16px/1 Archivo; letter-spacing: .04em; text-transform: uppercase; margin: 0; }
.seccion__inauguro { font: 400 12px/1.4 Archivo; color: var(--tinta-tenue); }

/* frescas */
.frescas { padding: 20px 0; }
.fresca { display: flex; gap: 12px; padding: 12px 0;
  border-bottom: var(--regla-fina) solid var(--regla); align-items: flex-start; }
.fresca__foto { width: 92px; height: 64px; object-fit: cover; flex: none; }
.fresca__cuerpo { min-width: 0; }
.fresca__cuerpo a { display: block; font: 600 17px/1.3 "Source Serif 4", Georgia, serif;
  text-decoration: none; margin: 4px 0; }
.fresca__cuerpo .rotulo { display: inline-block; }
.fresca__replicas { cursor: pointer; border: 0; margin-left: 8px; }

/* compromisos y expedientes */
.compromisos, .expedientes { padding: 20px 0; }
.compromisos input[type="text"], .expedientes input[type="text"],
.ventana__filtros input[type="text"] {
  width: 100%; font: 400 15px/1.3 "Source Serif 4", Georgia, serif; padding: 10px;
  border: 1px solid var(--regla); border-radius: 0; background: var(--papel);
  color: var(--tinta); margin: 6px 0 10px; }
.compromisos input:focus, .expedientes input:focus { outline: 2px solid var(--rojo); }
.compromiso { padding: 14px 0; border-bottom: var(--regla-fina) solid var(--regla); }
.compromiso__texto { font: italic 500 18px/1.4 "Source Serif 4", Georgia, serif; margin: 0 0 10px; }
.compromiso__pie { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.compromiso__pie a { text-decoration: none; }
.compromiso__votos { display: flex; gap: 8px; flex-wrap: wrap; }
.compromiso__votos .boton { background: none; color: var(--tinta);
  border: 1px solid var(--tinta); }
.compromiso__votos .boton b { color: var(--rojo); margin-left: 4px; }
.compromiso__votos .boton:disabled { opacity: .5; cursor: wait; }
.expediente { border: var(--regla-fina) solid var(--regla); padding: 12px; margin: 12px 0; }
.expediente__cabeza { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.expediente__voto { padding: 10px 0 4px; border-top: var(--regla-fina) solid var(--regla);
  margin-top: 10px; }
.expediente__voto p { margin: 6px 0; font-size: 15.5px; }
.expediente__voto a { font: 700 12px/1 Archivo; letter-spacing: .1em; text-decoration: none; }

/* la banda de la canción y el reel */
.banda-cancion { display: block; border: var(--borde) solid var(--tinta); padding: 14px;
  margin: 18px 0; text-decoration: none; color: var(--tinta); }
.banda-cancion:hover { background: var(--fondo); }
.banda-cancion strong { display: block; font: 800 30px/1 Archivo; letter-spacing: -0.5px;
  margin: 6px 0; color: var(--rojo); }
.banda-cancion__texto { font-size: 14px; color: var(--tinta-tenue); }
.reel__marco iframe { border: var(--borde) solid var(--tinta); }
.reel__controles { display: flex; gap: 10px; align-items: center; justify-content: space-between;
  margin: 12px 0; flex-wrap: wrap; }
.reel__palabra { font: 700 16px/1 Archivo; letter-spacing: .06em; }
.reel__placa { border: var(--borde) solid var(--tinta); padding: 40px 20px; text-align: center; }
.reel__placa h2 { font: 800 clamp(30px, 8vw, 46px)/1 Archivo; margin: 10px 0; }
.reel__web { font: 700 18px/1 Archivo; color: var(--rojo); }
.reel__invita { font: italic 400 22px/1.4 "Source Serif 4", Georgia, serif; }
.reel__lema { font: 700 17px/1.5 Archivo; }
.verso { line-height: 2.2; }
.palabra { font: 400 17px/1.3 "Source Serif 4", Georgia, serif; background: none;
  border: 0; border-bottom: var(--regla-fina) solid var(--rojo); color: var(--tinta);
  cursor: pointer; padding: 0 1px; }
.palabra:hover { background: var(--fondo); }
.palabra--falta { color: var(--tinta-tenue); text-decoration: line-through;
  text-decoration-color: var(--rojo); border: 0; cursor: help; }

/* ══ Pantalla grande: el diario a página completa ══
   Mobile-first intacto; de 1000px para arriba la hoja se abre en columnas
   como un diario digital: principal + carril lateral, frescas a tres
   columnas, compromisos y expedientes lado a lado. */
@media (min-width: 1000px) {
  .hoja {
    max-width: 1240px; padding: 0 48px 72px;
    display: grid; column-gap: 44px; row-gap: 0;
    grid-template-columns: 2.2fr 1fr;
    align-items: start;
  }
  /* Colocación simple: lo ancho ocupa las dos columnas; principal+secciones
     y compromisos+expedientes se emparejan solos por el flujo del grid. */
  .hoja > .cabecera, .hoja > .omni, .hoja > .frescas,
  .hoja > .ventanas, .hoja > .pie { grid-column: 1 / -1; }
  .hoja > .principal, .hoja > .compromisos { grid-column: 1; }
  .hoja > .secciones, .hoja > .expedientes { grid-column: 2; }
  .hoja > hr.regla { display: none; }

  .cabecera { text-align: center; padding-top: 30px; }
  .cabecera__kicker { justify-content: center; gap: 28px; }
  .cabezal { font-size: clamp(52px, 6vw, 84px); margin: 14px 0 6px; }
  .bajada { font-size: 19px; }

  .omni { border-top: var(--regla-grosor) solid var(--tinta);
    border-bottom: var(--regla-fina) solid var(--regla); padding: 26px 0;
    display: grid; grid-template-columns: 1.1fr 1.4fr; column-gap: 44px; }
  .omni > .rotulo { grid-column: 1 / -1; }
  .omni__invitacion { margin-top: 10px; }
  .omni__caja { align-self: start; margin-top: 10px; }
  #respuesta, #preguntasRecientes { grid-column: 1 / -1; }

  .principal { padding-top: 26px; }
  .principal h2 { font-size: clamp(34px, 3.2vw, 46px); }
  .principal__resumen { font-size: 19px; }

  .secciones { padding-top: 26px;
    border-left: var(--regla-fina) solid var(--regla); padding-left: 28px; }

  .frescas { border-top: var(--regla-grosor) solid var(--tinta);
    margin-top: 26px; padding-top: 18px; }
  #frescasLista { display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 0 36px; }
  #frescasLista > .pie__texto, #frescasLista > .causa { grid-column: 1 / -1; }
  .fresca { flex-direction: column; }
  .fresca__foto { width: 100%; height: 150px; }

  .compromisos { border-top: var(--regla-grosor) solid var(--tinta);
    margin-top: 26px; padding-top: 18px; }
  .expedientes { border-top: var(--regla-grosor) solid var(--tinta);
    margin-top: 26px; padding-top: 18px;
    border-left: var(--regla-fina) solid var(--regla); padding-left: 28px; }

  .ventanas { border-top: var(--regla-grosor) solid var(--tinta);
    margin-top: 26px; padding-top: 24px; }
  .pie { text-align: center; }
  .pie__texto { margin-left: auto; margin-right: auto; }
}

/* compartir */
.modal__cabeza { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 12px; }
.modal__texto { font: 600 16px/1.4 "Source Serif 4", Georgia, serif; }
.compartir__vista { max-height: 46vh; overflow: auto; }
.compartir__formatos, .compartir__acciones { display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 12px; align-items: center; }
.compartir__acciones .boton { text-decoration: none; display: inline-block; }

/* ventanas */
.ventanas { display: grid; grid-template-columns: 1fr; gap: var(--margen); padding: 20px 0; }
@media (min-width: 640px) { .ventanas { grid-template-columns: 1fr 1fr 1fr; } }
.ventana { border: var(--borde) solid var(--tinta); padding: 14px; display: block;
  text-decoration: none; color: var(--tinta); }
.ventana--enlace:hover { background: var(--fondo); }
.ventana__texto { font-size: 14px; color: var(--tinta-tenue); margin: 8px 0 10px; }
.ventana__arte { width: 100%; height: auto; margin-top: 8px; color: var(--tinta); }
.ventana__filtros { display: grid; gap: 8px; margin: 10px 0; }

/* pie */
.pie__texto { font-size: 13.5px; color: var(--tinta-tenue); max-width: 62ch; }

/* modales */
.modal { border: var(--borde) solid var(--tinta); border-radius: 0; padding: 18px;
  max-width: min(560px, 92vw); background: var(--papel); color: var(--tinta); }
.modal::backdrop { background: rgba(32,30,29,.55); }
.modal table { border-collapse: collapse; width: 100%; font: 400 14px/1.5 Archivo; }
.modal th { text-align: left; font: 700 10px/1 Archivo; letter-spacing: .14em;
  text-transform: uppercase; color: var(--tinta-tenue); padding: 6px 8px;
  border-bottom: var(--regla-grosor) solid var(--tinta); }
.modal td { padding: 6px 8px; border-bottom: var(--regla-fina) solid var(--regla); }
.modal__cerrar { float: right; background: none; border: 0; font: 700 16px/1 Archivo;
  cursor: pointer; color: var(--tinta); }
.placa-lienzo { width: 100%; border: var(--regla-fina) solid var(--regla); }

/* tablas del markdown (respuestas y notas) — scroll propio, jamás desborde */
.tabla-scroll { overflow-x: auto; margin: 12px 0; }
.tabla-md { border-collapse: collapse; font: 400 14px/1.5 Archivo; min-width: 480px; }
.tabla-md th { text-align: left; font: 700 10px/1 Archivo; letter-spacing: 1.4px;
  text-transform: uppercase; color: var(--tinta-tenue); padding: 6px 10px;
  border-bottom: var(--regla-grosor) solid var(--tinta); }
.tabla-md td { padding: 6px 10px; border-bottom: var(--regla-fina) solid var(--regla); }
.resp__cuerpo h2 { font: 700 18px/1.3 "Source Serif 4", Georgia, serif; margin: 14px 0 6px; }
.resp__cuerpo p { margin: 6px 0; }
.img-md { max-width: 100%; height: auto; border: 1px solid var(--regla); margin: 12px 0; }