/* Lo común de las vistas «Pistas» (/ancha) y «Hemeroteca» (/explorador), rediseñadas el 18/10/2026
   a petición de Lino: la paleta, la cabecera (.techo) y el pie son COPIA LITERAL de web/index.html,
   para que la barra de arriba sea la misma en las cuatro vistas. Si cambia allí, cambiar aquí. */
/* ── paleta ────────────────────────────────────────────────────────────── */
/* Tamaños: 16 px de base y NINGÚN texto por debajo de 14 px (regla desde el 16/10/2026, a
   petición de Lino; las etiquetas en mono y los ejes iban a 11-13 px y no se leían). */
/* Oscuro por defecto: gris oscuro y cálido de fondo, medido sobre el blog de ClickHouse (desde el
   16/10/2026; antes negro puro): un degradado en diagonal de #191918 a #292925, tarjetas en #1E1E1D
   que apenas se distinguen del fondo y se recortan por su borde, y la cabecera translúcida. El
   verde claro #86EFAC es el color principal (marcas, franjas, botones, resaltados; Lino, 13/11/2026: hasta entonces, el amarillo #FFF45F heredado de Itnig). El claro solo si
   se pide desde el botón de tema.
   Sobre el verde el texto va NEGRO (--sobre-acento): el blanco no se leería. Donde el verde
   es texto se usa --acento-txt, que en el tema claro pasa a un verde oscuro legible sobre blanco.
   Contraste sobre la tarjeta (#1E1E1D): texto 15:1 · suave 10:1 · tenue 5:1 · verde 12:1 ·
   azul 7:1 · negro sobre verde 13:1. */
:root {
  --noche:#191918; --noche2:#292925; --panel:#1E1E1D; --alto:#272726; --borde:#363634; --borde2:#434341;
  /* tenue y vecino, un punto más claros que antes (16/10): a 13 px el #8F8F87 se leía justo */
  --texto:#F4F4EF; --suave:#CFCFC7; --tenue:#A6A69E; --vecino:#9A9A92;
  --sig:#5FA8FF; --sig-txt:#8CC0FF;            /* vía por significado */
  --pal:#86EFAC; --pal-txt:#86EFAC;            /* vía por palabras, el color de la casa */
  --acento:#86EFAC;          /* el principal: marcas, franjas, bordes activos */
  /* rellenos verdes con texto negro: el suave es el normal y el activo; el fuerte, al pasar
     el ratón (al revés hasta el 18/10/2026, Lino: el activo debe ser el menos fuerte) */
  --acento-solido:#86EFAC;   /* al pasar el ratón */
  --acento-h:#BBF7D0;        /* relleno normal y activo de botones, píldoras y etiquetas */
  --acento-txt:#86EFAC;      /* cuando el verde es texto */
  --sobre-acento:#111111;
  --sombra:0 1px 2px rgba(0,0,0,.6), 0 12px 30px -16px rgba(0,0,0,.9);
  --sombra-alta:0 2px 8px rgba(0,0,0,.6), 0 24px 56px -24px rgba(134,239,172,.18);
  /* la cabecera: translúcida de verdad, lo que pasa por debajo se ve desenfocado */
  --velo:rgba(27,27,27,.66); --velo-borde:rgba(255,255,255,.07);
  /* fondo del fragmento encontrado: un tinte muy suave, que se note sin emborronar */
  --foco-fondo:color-mix(in srgb, var(--acento) 8%, transparent);
  --r:10px; --r-s:8px;
  /* fondo del bloque de título, fecha, resumen e invitado de cada tarjeta */
  --ficha-fondo:#252524;
  /* alto de la caja de texto del momento en el Lector cuando no se puede medir el hueco (pantalla
     estrecha): proporcional a la ventana, con tope por abajo y por arriba (Lino, 18/10/2026) */
  --alto-texto:clamp(200px, 35vh, 480px);
}
:root[data-tema="claro"] {
  --noche:#F6F6F1; --panel:#FFFFFF; --alto:#ECECE4; --borde:#D9D9D0; --borde2:#B9B9AE;
  --ficha-fondo:#F4F4EE;
  /* vecino: en claro, bastante más claro que el texto para que el fragmento encontrado se
     distinga de lo de alrededor (con #52524C no se notaba; aviso de Lino del 16/10). 4,6:1 */
  --texto:#121212; --suave:#45453F; --tenue:#64645D; --vecino:#7C7C74;
  --sig:#0B69C7; --sig-txt:#0A58A8;
  /* el verde como texto, en claro, es un verde oscuro (7:1 sobre blanco) */
  --pal:#22C55E; --pal-txt:#166534;
  --acento:#22C55E; --acento-solido:#86EFAC; --acento-h:#BBF7D0; --acento-txt:#166534;
  --sobre-acento:#111111;
  --sombra:0 1px 2px rgba(16,20,28,.06), 0 8px 24px -12px rgba(16,20,28,.2);
  --sombra-alta:0 2px 6px rgba(16,20,28,.1), 0 18px 48px -20px rgba(16,20,28,.35);
  --noche2:#F6F6F1; --velo:rgba(246,246,241,.86); --velo-borde:var(--borde);
  --foco-fondo:color-mix(in srgb, #86EFAC 22%, transparent);   /* subrayador sobre blanco */
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
/* El fondo es un degradado en diagonal, algo más claro hacia la derecha (el mismo gesto que el
   blog de ClickHouse), fijo para que no se mueva al desplazarse */
body { margin:0; color:var(--texto);
  background:linear-gradient(275deg, var(--noche2) 0%, var(--noche) 100%) fixed;
  font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:16px; line-height:1.55;
  -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column; }
main { flex:1; }
:focus-visible { outline:2px solid var(--acento); outline-offset:3px; border-radius:4px; }
button { font:inherit; cursor:pointer; border:0; background:none; color:inherit; }

/* ── cabecera ──────────────────────────────────────────────────────────── */
.techo { position:sticky; top:0; z-index:40; background:var(--velo);
  backdrop-filter:blur(18px) saturate(1.2); -webkit-backdrop-filter:blur(18px) saturate(1.2);
  border-bottom:1px solid var(--velo-borde); }
.techo .fila { max-width:1800px; margin:0 auto; padding:12px 26px;
  display:flex; gap:18px; align-items:center; }
/* El logo es el botón de inicio: lleva a la portada del buscador */
.logo { font-family:"Bricolage Grotesque",system-ui,sans-serif; font-weight:800;
  font-size:19px; letter-spacing:-.03em; font-variation-settings:"wdth" 88;
  white-space:nowrap; display:flex; align-items:center; gap:9px;
  color:inherit; text-decoration:none; }
.logo i { width:11px; height:11px; border-radius:3px; background:var(--acento);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--acento) 18%, transparent); font-style:normal;
  transform:rotate(45deg); transition:transform .25s, box-shadow .25s; }
.logo span { font-weight:500; font-variation-settings:"wdth" 100; color:var(--tenue);
  letter-spacing:0; font-size:15px; }
.logo:hover i { transform:rotate(225deg); box-shadow:0 0 0 6px color-mix(in srgb, var(--acento) 22%, transparent); }
.logo:hover span { color:var(--suave); }
.menu { display:flex; gap:4px; }
.menu a { font-size:14.5px; font-weight:500; color:var(--suave); text-decoration:none;
  padding:7px 13px; border-radius:999px; border:1px solid transparent;
  transition:border-color .15s, color .15s, background .15s; }
.menu a:hover { color:var(--texto); border-color:var(--borde2); background:var(--panel); }
/* Móvil: la cabecera va en dos filas (Lino, 18/10/2026; en una sola se salía por la derecha y la
   página entera medía más que la pantalla). Arriba el logo, Guías y los selectores de vista y
   tema, sin sus rótulos (llevan aria-label y title); abajo el buscador a todo el ancho. Por
   debajo de 380 px Guías se oculta (sigue en el pie). */
@media (max-width:700px) {
  .logo span, .reloj { display:none; }
  .techo .fila { padding:10px 14px; gap:8px 10px; flex-wrap:wrap; }
  .menu { margin-left:auto; }
  .menu a { padding:6px 10px; }
  .util { gap:8px; }
  .selector > span { display:none; }
  .selector select { padding:6px 8px; }
  .buscador { order:3; flex:1 1 100%; min-width:0; gap:6px; }
  input[type=search] { padding:10px 12px 10px 38px; font-size:15px; min-width:0; }
  .buscador svg { left:13px; }
  .lanzar { padding:10px 14px; font-size:14px; }
}
@media (max-width:380px) {
  .menu { display:none; }
  .util { margin-left:auto; }
}
.buscador { flex:1; display:flex; gap:9px; min-width:240px; position:relative; }
.buscador svg { position:absolute; left:15px; top:50%; transform:translateY(-50%);
  width:17px; height:17px; color:var(--tenue); pointer-events:none; }
input[type=search] { flex:1; font:inherit; font-size:16.5px; padding:11px 15px 11px 42px;
  border:1px solid var(--borde2); border-radius:999px; background:var(--panel);
  color:var(--texto); transition:border-color .15s, box-shadow .15s; }
input[type=search]:focus { outline:none; border-color:var(--acento);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--acento) 16%, transparent); }
.lanzar { padding:11px 22px; border-radius:999px; font-weight:700; font-size:15.5px;
  background:var(--acento-h); color:var(--sobre-acento);
  box-shadow:0 6px 20px -8px color-mix(in srgb, var(--acento) 75%, transparent);
  transition:transform .12s, background .12s; }
.lanzar:hover { transform:translateY(-1px); background:var(--acento-solido); }
/* sin texto no se puede buscar: el botón se apaga y el formulario no se envía */
.lanzar:disabled { opacity:.45; cursor:not-allowed; transform:none; box-shadow:none; }
.lanzar:disabled:hover { background:var(--acento-h); }
.util { display:flex; align-items:center; gap:14px; font-size:14px; color:var(--tenue); }
.util a { color:var(--suave); text-decoration:none; border-bottom:1px solid transparent; }
.util a:hover { color:var(--texto); border-color:var(--borde2); }
.reloj { font-family:"IBM Plex Mono",monospace; font-variant-numeric:tabular-nums; }
/* Selectores de vista (Lector, Explorador, Original, Ancha) y de tema (claro, oscuro) en la cabecera,
   pedidos por Lino el 16/10/2026: los mismos en todas las vistas; cambiar de vista conserva la búsqueda. */
.selector { display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--tenue); }
.selector select { font:inherit; font-size:14px; color:var(--suave); cursor:pointer; padding:6px 10px;
  border:1px solid var(--borde2); border-radius:999px; background:var(--panel); }
.selector select:hover { color:var(--texto); border-color:var(--acento); }
.selector select:focus { outline:none; border-color:var(--acento); }

/* Selectores de pesos y de distancia: servían para comparar la ponderación de los cuatro
   campos y la distancia de corrección de erratas. Ocultos desde el 16/10/2026: producción
   usa los valores por defecto (campos por igual, Levenshtein). Siguen en el HTML porque
   ?pesos= y ?distancia= en la URL siguen funcionando para comparar.
   Ver ../Evaluacion/RESULTADOS-REMEDIDA-AFINADO.md */
.pesos { display:none; align-items:center; gap:6px; }
.pesos select { font:inherit; font-size:14px; color:var(--suave); cursor:pointer;
  padding:5px 9px; border:1px solid var(--borde2); border-radius:999px;
  background:var(--panel); max-width:190px; }
.pesos select:hover { color:var(--texto); }
.pesos select:focus { outline:none; border-color:var(--acento); }
.pesos select.puesto { color:var(--pal-txt); border-color:color-mix(in srgb, var(--pal) 45%, var(--borde2)); }

/* ── pie ───────────────────────────────────────────────────────────────── */
.pie { border-top:1px solid var(--borde); margin-top:40px; background:var(--panel); }
.pie .fila { max-width:1800px; margin:0 auto; padding:26px 26px 30px; display:flex; flex-wrap:wrap;
  gap:14px 40px; align-items:flex-start; font-size:14px; color:var(--tenue); }
.pie .columna { display:flex; flex-direction:column; gap:7px; min-width:180px; }
.pie .columna b { color:var(--suave); font-weight:600; font-size:14px; letter-spacing:.05em;
  text-transform:uppercase; font-family:"IBM Plex Mono",monospace; }
.pie a { color:var(--suave); text-decoration:none; border-bottom:1px solid transparent; }
.pie a:hover { color:var(--texto); border-color:var(--acento); }
.pie .nota { flex:1 1 260px; max-width:46ch; margin:0; line-height:1.5; }

/* ── piezas compartidas por las dos vistas nuevas ──────────────────────── */
[hidden] { display:none !important; }
.sr-solo { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); }
.aviso-consulta { font-size:15px; color:var(--tenue); margin:0 0 10px; }
.aviso-consulta b { color:var(--texto); font-weight:500; }
.aviso-consulta a { color:var(--sig-txt); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--sig) 45%, transparent); }
.aviso-consulta a:hover { border-bottom-color:var(--sig); }
.aviso-consulta.corregida { font-size:16px; line-height:1.65; color:var(--suave); }
.aviso-consulta.corregida b { font-weight:700; }
.nada { color:var(--tenue); font-size:16px; padding:34px 0; text-align:center;
  border:1px dashed var(--borde); border-radius:var(--r); }
/* Etiquetas: titulares en verde suave con letra negra, entidades en gris; el fuerte al pasar */
.entidad { display:inline-block; font-size:14px; padding:3px 11px; border-radius:999px;
  border:1px solid var(--borde); background:var(--alto); color:var(--suave);
  white-space:nowrap; text-decoration:none; cursor:pointer;
  transition:border-color .15s, color .15s, background .15s; }
a.entidad:hover { color:var(--sobre-acento); background:var(--acento-solido); border-color:var(--acento-solido); }
.entidad.titular { background:var(--acento-h); border-color:var(--acento-h); color:var(--sobre-acento); font-weight:500; }
/* El texto de un momento: el fragmento en el color del texto, lo de alrededor en gris */
.vecino { color:var(--vecino); }
.foco { color:var(--texto); background:var(--foco-fondo); border-radius:3px; padding:.06em .12em;
  box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.foco em, .cita-txt em { font-style:normal; font-weight:700; color:var(--pal-txt);
  text-decoration:underline; text-decoration-color:color-mix(in srgb, var(--pal) 55%, transparent);
  text-underline-offset:3px; text-decoration-thickness:1px; }
.cargando { height:3px; background:linear-gradient(90deg, transparent, var(--acento), transparent);
  background-size:40% 100%; background-repeat:no-repeat; animation:barrido 1.1s infinite linear; }
@keyframes barrido { from { background-position:-40% 0; } to { background-position:140% 0; } }
@media (prefers-reduced-motion: reduce) {
  * { transition:none !important; animation:none !important; }
  html { scroll-behavior:auto; }
}

/* Rótulo antes de la vía «Mismo tema» (comun.js, rotuloTema): el nombre del tema busca ese tema */
.rotulo-tema { font:700 16px/1.3 "Bricolage Grotesque",system-ui,sans-serif; letter-spacing:-.01em; color:var(--texto); }
.rotulo-tema a { color:var(--pal-txt); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px;
  text-decoration-color:color-mix(in srgb, var(--pal-txt) 45%, transparent); }
.rotulo-tema a:hover, .rotulo-tema a:focus-visible { text-decoration-color:var(--pal-txt); }