/* ============================================================
   QIOSK v3 — interfaz del lector (plan §22, 23-09-2026)
   Capa sobre readqiosk.css + qiosk-v2.css + qiosk-bn.css. Se enciende con
   DISENO_V3=1 o con la previa firmada, así que se puede apagar en un segundo.

   Qué cambia y por qué:

   1. SEIS TAMAÑOS. Había 71 en las hojas públicas. Una escala corta es lo
      que hace que una interfaz se lea como un sistema y no como una suma de
      parches (T-22.2).
   2. SE ACABAN LAS ETIQUETAS GRITADAS. `.meta` y `.micro` iban en
      MAYÚSCULAS CON INTERLETRADO ANCHO y en monoespaciada, y salen en cada
      tarjeta, cada fila y cada pie. Es el detalle que más envejece la
      pantalla. Ahora: minúscula, peso 500, gris AA (T-22.10, T-22.11).
   3. SPACE MONO SOLO PARA CIFRAS. Es una fuente de datos, no de etiquetas.
   4. MENOS BORDES. Separa el espacio; la línea fina solo donde la
      estructura lo pide (T-22.3).
   5. MOVIMIENTO DE 150-200 ms y nada que se mueva solo (T-22.9).

   La identidad no se toca: blanco y negro plano, Inter, sin sombras ni
   degradados (docs/MARCA.md).
   ============================================================ */

:root{
  /* La escala. Seis, y ni uno más. */
  --t-meta:    .8125rem;   /* metadatos: sección, fecha, minutos */
  --t-sec:     .9375rem;   /* secundario: pies, notas, formularios */
  --t-cuerpo:  1.125rem;   /* cuerpo de lectura */
  --t-lista:   1.375rem;   /* titular de tarjeta o fila */
  --t-seccion: 1.875rem;   /* titular de sección */
  --t-titular: clamp(2.25rem, 5vw, 3.25rem);

  --paso: 160ms;           /* toda transición, igual de rápida */
}

/* ── 1. Etiquetas: se dejan de gritar ───────────────────────── */
.meta, .micro, .hora, .pie-fila .meta, .cifras-alta span, .ejemplo-eti,
.credito-ia, .hito .fecha, .radar-dia, .hoja-fuentes .medio,
.deck-cuenta, .deck-min, .deck-total, .deck-racha, .deck-lista .min,
.m3-grupo h2, .m3-favoritas h2, .panel-datos h2, .aviso-ok, .guardar{
  font-family:'Inter',system-ui,sans-serif;
  font-size:var(--t-meta);
  font-weight:500;
  text-transform:none;
  letter-spacing:0;
}
.meta, .micro, .hora{ color:var(--muted) }

/* La navegación, en minúscula y con el peso como jerarquía */
.nav a, .barra-app a{
  text-transform:none; letter-spacing:-.005em;
  font-size:var(--t-meta); font-weight:500;
}
.nav a[aria-current="page"]{ font-weight:700 }

/* Chips y píldoras: sin versalitas y sin borde */
.chip, .lector button, .btn-sec{
  text-transform:none; letter-spacing:0; font-size:var(--t-meta); font-weight:500;
}

/* ── 2. Space Mono, solo donde hay cifras ───────────────────── */
.cifra, .m3-dato, .dato, .num, .precio, .valor .cifra, .mercados .val,
.ticker .cifra, .hoy-cifra b, .ejemplo-datos, .cifras-alta b{
  font-family:'Space Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;
}
/* …y fuera de las etiquetas que la llevaban por inercia */
.mercados .nom, .ticker .nom, .deck-min, .deck-cuenta, .radar-dia,
.hoja-fuentes .medio, .hito .fecha, .m3-tabla th{
  font-family:'Inter',system-ui,sans-serif;
}

/* ── 3. Tipografía de lectura ───────────────────────────────── */
body{ font-size:var(--t-cuerpo) }
.cuerpo-lectura{ font-size:var(--t-cuerpo); line-height:1.65; max-width:38rem }
.cuerpo-lectura p{ margin:0 0 1.15em }
.entradilla, .promesa, .autor-bio p{ font-size:1.0625rem; line-height:1.6 }
.letra-pequena, .aviso, .pie-landing, .transparencia, .dato-vivo{ font-size:var(--t-sec) }

h1, .articulo h1, .landing h1{
  font-size:var(--t-titular); line-height:1.05; letter-spacing:-.035em; font-weight:700;
}
.titulo-seccion h1{ font-size:var(--t-seccion); letter-spacing:-.03em; line-height:1.15 }
.tarjeta h2, .tarjeta h3, .fila h3, .lista h3, .deck-tarjeta h2{
  font-size:var(--t-lista); line-height:1.25; letter-spacing:-.022em; font-weight:650;
}
.cuerpo-lectura h2{ font-size:1.5rem; line-height:1.2; letter-spacing:-.02em; margin:2em 0 .6em }
.cuerpo-lectura h3{ font-size:1.25rem; line-height:1.25; margin:1.6em 0 .4em }

/* ── 4. Menos bordes, más aire ──────────────────────────────── */
.chip, .tarjeta, .quick-view, .caja, .bloque, .ejemplo-sobre{
  border:0;
}
.chip{ background:var(--bg-alt) }
.chip[aria-current="page"], .chip.activo{ background:var(--text); color:var(--bg) }
.fila{ border:0; border-bottom:1px solid var(--line) }
.fila:last-child{ border-bottom:0 }
.ejemplo-sobre{ background:var(--bg-alt); padding:var(--e5) }

/* ── 5. Movimiento: corto, y solo como respuesta ────────────── */
a, button, .chip, .btn, .fila{ transition:opacity var(--paso) ease, transform var(--paso) ease, background-color var(--paso) ease }
@media (prefers-reduced-motion: reduce){
  a, button, .chip, .btn, .fila{ transition:none }
}

/* ── 6. Móvil: el cuerpo baja a 17 px y los titulares respiran ─ */
@media (max-width: 40rem){
  body, .cuerpo-lectura{ font-size:1.0625rem }
  .tarjeta h2, .tarjeta h3, .fila h3, .lista h3{ font-size:1.25rem }
  .titulo-seccion h1{ font-size:1.625rem }
}

/* ── 7. Los que se escapaban por heredar en `em` ─────────────
   Medido en el navegador: la portada tenía 21 tamaños distintos en pantalla
   aunque el CSS declarase menos, porque varios componentes usan em o % y
   heredaban del padre. Estos son los que quedaban fuera de la escala. */
.idioma, .btn, .nav-alta, .n, .tema b, .tema span{ font-size:var(--t-meta) }
.hoy-lema, .letra-pequena, .solo-lector{ font-size:var(--t-sec) }
.hoy-dia{ font-size:var(--t-seccion); letter-spacing:-.03em }
.logo, .marca-pie{ font-size:var(--t-lista); letter-spacing:-.055em }
.tarjeta p, .fila p, .lista p, .deck-tarjeta p{ font-size:var(--t-sec); line-height:1.5 }

/* Los botones tampoco gritan: verbo claro, minúscula, Inter (T-22.10) */
.btn, .btn-sec, .deck-leer, .deck-empezar, button{
  font-family:'Inter',system-ui,sans-serif;
  text-transform:none; letter-spacing:0; font-weight:600;
}

/* ── 8. Misma especificidad que la capa v2 ───────────────────
   qiosk-v2.css escribe `.v2 .algo` (dos clases), así que mis reglas de una
   clase perdían aunque fueran después. Se repiten con el prefijo .v2: mismo
   peso y gana la última, que es esta. */
.v2 .meta, .v2 .micro, .v2 .hora, .v2 .n, .v2 .idioma, .v2 .btn, .v2 .nav-alta,
.v2 .nav a, .v2 .chip, .v2 .deck-min, .v2 .deck-cuenta, .v2 .radar-dia{
  font-size:var(--t-meta); text-transform:none; letter-spacing:0;
  font-family:'Inter',system-ui,sans-serif;
}
.v2 .hoy-lema, .v2 .solo-lector, .v2 .letra-pequena, .v2 .tema b, .v2 .tema span,
.v2 .tarjeta p, .v2 .fila p, .v2 .lista p{
  font-size:var(--t-sec);
}
.v2 .cuerpo-lectura, .v2 .cuerpo-lectura p{ font-size:var(--t-cuerpo) }
.v2 .tarjeta h2, .v2 .tarjeta h3, .v2 .fila h3, .v2 .lista h3, .v2 .deck-tarjeta h2,
.v2 .logo, .v2 .marca-pie{
  font-size:var(--t-lista); letter-spacing:-.022em;
}
.v2 .logo, .v2 .marca-pie{ letter-spacing:-.055em; font-weight:700 }
.v2 .hoy-dia, .v2 .titulo-seccion h1{ font-size:var(--t-seccion); letter-spacing:-.03em }
.v2 .articulo h1, .v2 .landing h1{ font-size:var(--t-titular); letter-spacing:-.035em }
.v2 .cuerpo-lectura h2{ font-size:1.5rem }
.v2 .cuerpo-lectura h3{ font-size:1.25rem }

@media (max-width: 40rem){
  .v2 .cuerpo-lectura, .v2 .cuerpo-lectura p{ font-size:1.0625rem }
  .v2 .tarjeta h2, .v2 .tarjeta h3, .v2 .fila h3, .v2 .lista h3{ font-size:1.25rem }
  .v2 .hoy-dia, .v2 .titulo-seccion h1{ font-size:1.625rem }
}

/* ── 9. Los últimos que rozaban la escala sin entrar ─────────
   Medido elemento a elemento en el navegador: 11,2 px en el botón de tema,
   12,16 px en los enlaces del aviso del pie y 22,4 px en el titular del
   bloque de alta. Tres casi-tamaños que no aportaban nada. */
.v2 .cab .tema, .v2 .cab .idioma, .v2 .aviso a, .v2 .aviso,
.v2 .pie-sitio nav a, .v2 .migas, .v2 .migas a, .v2 .pie-datos a{
  font-size:var(--t-meta);
}
.v2 .pie-alta h2, .v2 .otros-temas h2{ font-size:var(--t-lista); letter-spacing:-.022em }
.v2 .pie-alta p, .v2 .aviso-archivada, .v2 .transparencia{ font-size:var(--t-sec) }

/* ── 10. La escala, cerrada en la portada ────────────────────
   Estos son los componentes de la portada v2 medidos uno a uno. Cada uno
   entra en uno de los seis tamaños: no hay "casi 15" ni "casi 20". */
.v2 .hoy-lema,
.v2 .cuando b,
.v2 .portada-buscar span,
.v2 .pestanas a,
.v2 .bloque-hoy a,
.v2 .bloque-hoy li a,
.v2 .pieza .dentro p,
.v2 .pieza.destacada .dentro p,
.v2 .solo-lector{
  font-size:var(--t-sec);
}
.v2 .bloque-hoy span, .v2 .bloque-hoy .micro{ font-size:var(--t-meta) }
.v2 .bloque-hoy b{ font-size:var(--t-lista) }   /* la cifra manda */
.v2 .pieza .dentro h3{ font-size:var(--t-lista); line-height:1.25; letter-spacing:-.022em }
.v2 .pieza.destacada .dentro h3,
.v2 .hoy-dia{ font-size:var(--t-seccion); line-height:1.12; letter-spacing:-.03em }
.v2 .cab .logo{ font-size:var(--t-lista) }

/* ── 11. Portada: jerarquía y aire (T-22.7) ──────────────────
   Alineado a la izquierda, sin cajas y separando por espacio. La pieza
   principal pesa; el resto es una lista que se recorre con el ojo. */
.v2 .portada .pieza{ border:0; background:transparent }
.v2 .portada .pieza + .pieza{ margin-top:var(--e6) }
.v2 .portada .rejilla{ gap:var(--e7) }
.v2 .portada .pieza .dentro{ padding:var(--e3) 0 0 }
.v2 .portada .pieza img,
.v2 .portada .pieza .deck-img,
.v2 .portada .pieza .miniatura{ border-radius:14px }
/* El bloque de /hoy es la llamada a la acción de la portada: panel de tinta
   con el texto en papel. Le puse fondo claro y dejó el texto blanco sobre
   blanco —invisible— hasta que lo medí en el navegador (23-09). */
.v2 .portada .bloque-hoy{ border:0; background:var(--text); color:var(--bg); border-radius:14px; padding:var(--e5) }
.v2 .portada .bloque-hoy b, .v2 .portada .bloque-hoy span,
.v2 .portada .bloque-hoy p{ color:var(--bg) }
/* El enlace del panel es un botón sin clase: papel de fondo, tinta encima.
   Sin esto heredaba el blanco del panel y quedaba blanco sobre blanco. */
.v2 .portada .bloque-hoy a{ background:var(--bg); color:var(--text); font-weight:600 }
.v2 .portada .pestanas{ border-bottom:1px solid var(--line); gap:var(--e5) }
.v2 .portada .pestanas a{ border:0; padding:0 0 var(--e3); font-weight:500 }
.v2 .portada .pestanas a[aria-current="page"]{ font-weight:700; box-shadow:inset 0 -2px 0 var(--text) }
.v2 .portada > h2, .v2 .portada .titulo-bloque{ font-size:var(--t-meta); font-weight:600; color:var(--muted) }
.v2 .portada-buscar{ border:0; background:var(--bg-alt); border-radius:12px }

/* La fecha del día: es un dato, así que mono y tamaño de metadato. */
.v2 .portada .hoy .cuando b{ font-size:var(--t-meta) }

/* ── 12. Retícula de dos columnas (T-22.7) ───────────────────
   Lo último a la izquierda; a la derecha lo que solo tiene Qiosk: el Radar
   IA con su estado, el seguimiento de China–Europa y el boletín. En móvil,
   una sola columna y la derecha debajo, en el mismo orden. */
.v2 .portada .doble{
  display:grid; grid-template-columns:minmax(0,1fr) 20rem; gap:var(--e7);
  align-items:start; margin-top:var(--e6);
}
.v2 .portada .columna-izq{ display:grid; gap:var(--e6) }
.v2 .portada .columna-der{ display:grid; gap:var(--e6); position:sticky; top:var(--e5) }
.v2 .portada .titulo-bloque{
  font-size:var(--t-meta); font-weight:600; color:var(--muted);
  margin:0 0 var(--e3); text-transform:none; letter-spacing:0;
}
.v2 .portada .caja-lateral{ border:0; padding:0 }
.v2 .portada .caja-lateral + .caja-lateral{ border-top:1px solid var(--line); padding-top:var(--e5) }
.v2 .portada .lista-lateral{ list-style:none; margin:0; padding:0; display:grid; gap:var(--e4) }
.v2 .portada .lista-lateral li{ display:grid; gap:2px }
.v2 .portada .lista-lateral a{ font-size:var(--t-sec); font-weight:600; line-height:1.35; text-decoration:none }
.v2 .portada .lista-lateral a:hover{ text-decoration:underline }
.v2 .portada .lista-lateral .meta{ font-size:var(--t-meta) }
.v2 .portada .lista-lateral.numerada li{ grid-template-columns:2rem 1fr; align-items:baseline }
.v2 .portada .lista-lateral .n{ font-family:'Space Mono',monospace; color:var(--muted); font-size:var(--t-meta) }
.v2 .portada .caja-alta .captacion-form{ display:grid; gap:var(--e3); margin:var(--e3) 0 }
.v2 .portada .caja-alta p{ font-size:var(--t-sec) }

@media (max-width: 60rem){
  .v2 .portada .doble{ grid-template-columns:1fr }
  .v2 .portada .columna-der{ position:static }
}

/* ── 13. Tira de datos del día (T-22.6) ──────────────────────
   Va bajo la cabecera y es lo primero que dice "esto mira datos". Cifras en
   Space Mono, sube/baja con ▲▼ y signo (nunca color: docs/MARCA.md), y cada
   dato enlaza a su página. En móvil se desliza sin barra a la vista. */
.v2 .mercados{
  display:flex; gap:var(--e6); align-items:baseline;
  padding:var(--e3) var(--e5); border-bottom:1px solid var(--line);
  overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  background:var(--bg);
}
.v2 .mercados::-webkit-scrollbar{ display:none }
.v2 .mercados .item{
  display:flex; gap:var(--e2); align-items:baseline; white-space:nowrap;
  text-decoration:none; color:inherit; border:0;
}
.v2 .mercados .item:hover .val{ text-decoration:underline }
.v2 .mercados .nom{
  font-size:var(--t-meta); color:var(--muted); font-family:'Inter',system-ui,sans-serif;
  text-transform:none; letter-spacing:0; font-weight:500;
}
.v2 .mercados .val{
  font-family:'Space Mono',ui-monospace,monospace; font-variant-numeric:tabular-nums;
  font-size:var(--t-meta); font-weight:700;
}
/* La variación, incluida la de los valores planos (clase vacía): mismo
   tamaño que el resto de la tira, o se cuela un séptimo tamaño. */
.v2 .mercados .item > span{
  font-family:'Space Mono',ui-monospace,monospace; font-size:var(--t-meta); color:var(--muted);
}
.v2 .mercados .item > .nom{ font-family:'Inter',system-ui,sans-serif }
.v2 .mercados .hora-dato{ margin-left:auto; opacity:.8 }
@media (max-width: 40rem){
  .v2 .mercados{ gap:var(--e5); padding-left:var(--e4); padding-right:var(--e4) }
  .v2 .mercados .hora-dato{ margin-left:var(--e5) }
}

/* ── 14. Cabecera limpia y compacta (T-22.5) ─────────────────
   Sin líneas, fondo papel, pegada arriba. Al bajar se encoge y recupera
   pantalla sin perder la navegación.

   El tamaño cambia de golpe, no en transición: animar `padding` o
   `font-size` obliga al navegador a recalcular la maqueta en cada fotograma
   y la regla §0.2 lo prohíbe (la prueba me lo tumbó, con razón). Lo único
   que se anima es el logo, con `transform: scale`, que es de pintura. */
.v2 .cab{
  position:sticky; top:0; z-index:20; background:var(--bg); border-bottom:0;
}
.v2 .cab .logo{ transform-origin:left center; transition:transform var(--paso) ease }
html.compacta body.v2 .cab{ padding-top:var(--e2); padding-bottom:var(--e2) }
html.compacta body.v2 .cab .logo{ transform:scale(.82) }
html.compacta body.v2 .mercados{ display:none }   /* la tira no persigue al lector */
@media (prefers-reduced-motion: reduce){
  .v2 .cab .logo{ transition:none }
}