/* Descifra — «Panel de salidas». Fondo de estación de noche, paletas que giran y resultados en papel de billete.
   Letras: Archivo (estrecha en el panel, ancha en titulares) y Atkinson Hyperlegible Next para leer. */

@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url('/vendor/fuentes/archivo-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Archivo'; font-style: normal; font-display: swap; font-weight: 100 900; font-stretch: 62% 125%;
  src: url('/vendor/fuentes/archivo-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Atkinson'; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url('/vendor/fuentes/atkinson-latin.woff2') format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Atkinson'; font-style: normal; font-display: swap; font-weight: 200 800;
  src: url('/vendor/fuentes/atkinson-latin-ext.woff2') format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+2020, U+20A0-20AB, U+20AD-20C0; }

:root {
  --fondo: #0b0c0e;
  --fondo-2: #111216;
  --fondo-3: #17181d;
  --carcasa: #18191e;
  --carcasa-2: #202228;
  --borde: #2b2d35;
  --borde-2: #3a3d47;
  --flap-a: #26272d;
  --flap-b: #1d1e23;
  --flap-tinta: #f4efe2;
  --flap-junta: #08080a;
  --amarillo: #ffc62b;
  --amarillo-2: #ffd75e;
  --amarillo-tinta: #1a1400;
  --verde: #39d07f;
  --ambar: #ffad1f;
  --rojo: #ff5a4c;
  --azul: #72b6ff;
  --texto: #ecebe6;
  --texto-2: #b0afa8;
  --texto-3: #7b7a74;
  --papel: #f6f2e7;
  --papel-2: #ece6d6;
  --papel-borde: #d9d1bc;
  --tinta: #1c1b18;
  --tinta-2: #4f4c45;
  --tinta-3: #7c776c;
  --resalte: #ffe28a;
  --radio: 14px;
  --radio-s: 9px;
  --sombra: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 20px 50px -20px rgba(0, 0, 0, 0.8);
  --letra-lectura: 'Atkinson', system-ui, sans-serif;
  --letra-panel: 'Archivo', 'Arial Narrow', sans-serif;
  --escala: 1;
  --interlineado: 1.6;
  --fw: 22px;
  --fh: 34px;
  --fs: 25px;
  color-scheme: dark;
}
:root[data-tema='claro'] {
  --fondo: #e9e6dd;
  --fondo-2: #f1eee6;
  --fondo-3: #fbf9f3;
  --texto: #1c1b18;
  --texto-2: #4f4c45;
  --texto-3: #7c776c;
  --borde: #cfc8b5;
  --borde-2: #b9b19b;
  color-scheme: light;
}
:root[data-contraste='si'] {
  --texto-2: #e2e1dc;
  --texto-3: #c9c8c2;
  --tinta-2: #24221e;
  --tinta-3: #3d3a33;
  --borde: #6a6d78;
}
:root[data-contraste='si'][data-tema='claro'] { --texto-2: #22211e; --texto-3: #34322d; --borde: #5d5747; }
:root[data-lectura='sistema'] { --letra-lectura: system-ui, sans-serif; }
:root[data-interlineado='amplio'] { --interlineado: 1.9; }

*, *::before, *::after { box-sizing: border-box; }
html { font-size: calc(17px * var(--escala)); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
:root[data-movimiento='no'] { scroll-behavior: auto; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--texto);
  font-family: var(--letra-lectura);
  line-height: var(--interlineado);
  overflow-x: hidden;
}
/* Luz de andén: un degradado cálido arriba y grano muy fino. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background:
    radial-gradient(1200px 500px at 70% -10%, rgba(255, 198, 43, 0.09), transparent 60%),
    radial-gradient(900px 600px at -10% 10%, rgba(114, 182, 255, 0.06), transparent 60%),
    var(--fondo);
}
:root[data-tema='claro'] body::before {
  background: radial-gradient(1200px 500px at 70% -10%, rgba(255, 198, 43, 0.18), transparent 60%), var(--fondo);
}
img, svg { max-width: 100%; }
a { color: var(--amarillo); text-underline-offset: 3px; }
:root[data-tema='claro'] a { color: #8a5d00; }
button, input, select, textarea { font: inherit; color: inherit; }
::selection { background: var(--amarillo); color: var(--amarillo-tinta); }
:focus-visible { outline: 3px solid var(--amarillo); outline-offset: 2px; border-radius: 4px; }
.solo-lector { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.saltar { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--amarillo); color: var(--amarillo-tinta); padding: 10px 16px; border-radius: 8px; font-weight: 700; }
.saltar:focus { top: 12px; }

.contenedor { width: min(1240px, 100% - 32px); margin-inline: auto; }

/* ------------------------------------------------------------------ cabecera */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--fondo) 84%, transparent);
  backdrop-filter: blur(12px) saturate(1.2);
  border-bottom: 1px solid var(--borde);
}
.cabecera .contenedor { display: flex; align-items: center; gap: 18px; height: 64px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--texto); flex-shrink: 0; }
.logo-paletas { display: flex; gap: 2px; --fw: 15px; --fh: 22px; --fs: 16px; }
.logo-texto { font-family: var(--letra-panel); font-weight: 700; font-stretch: 85%; letter-spacing: 0.02em; font-size: 0.95rem; color: var(--texto-2); }
.nav { display: flex; gap: 2px; margin-left: auto; align-items: center; }
.nav a {
  font-family: var(--letra-panel);
  font-stretch: 88%;
  font-weight: 600;
  text-decoration: none;
  color: var(--texto-2);
  padding: 8px 11px;
  border-radius: 8px;
  font-size: 0.92rem;
  white-space: nowrap;
}
.nav a:hover { color: var(--texto); background: var(--fondo-3); }
.nav a[aria-current='page'] { color: var(--amarillo); background: color-mix(in srgb, var(--amarillo) 10%, transparent); }
.botones-cabecera { display: flex; gap: 6px; }
.boton-icono {
  width: 40px; height: 40px; display: grid; place-items: center;
  border: 1px solid var(--borde); background: var(--fondo-2); border-radius: 10px; cursor: pointer; color: var(--texto-2);
}
.boton-icono:hover { color: var(--texto); border-color: var(--borde-2); }
.boton-icono svg { width: 19px; height: 19px; }
.boton-icono[aria-pressed='false'] .icono-on { display: none; }
.boton-icono[aria-pressed='true'] .icono-off { display: none; }
.menu-movil { display: none; }
@media (max-width: 1060px) {
  .nav { display: none; }
  .nav.abierta {
    display: flex; position: fixed; top: 64px; left: 0; right: 0; bottom: 0; flex-direction: column; align-items: stretch;
    background: var(--fondo); padding: 16px; gap: 4px; overflow-y: auto; z-index: 40;
  }
  .nav.abierta a { font-size: 1.15rem; padding: 14px 16px; border-bottom: 1px solid var(--borde); border-radius: 0; }
  .menu-movil { display: grid; }
  .botones-cabecera { margin-left: auto; }
}
@media (max-width: 420px) { .logo-texto { display: none; } }

/* ------------------------------------------------------------------ paletas */
.flap {
  position: relative;
  display: inline-block;
  width: var(--fw);
  height: var(--fh);
  font-family: var(--letra-panel);
  font-stretch: 72%;
  font-weight: 650;
  font-size: var(--fs);
  line-height: var(--fh);
  text-align: center;
  color: var(--flap-tinta);
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05), 0 2px 3px rgba(0, 0, 0, 0.55);
  flex-shrink: 0;
}
.flap-mitad, .flap-hoja {
  position: absolute;
  left: 0;
  right: 0;
  height: 50%;
  overflow: hidden;
  backface-visibility: hidden;
}
.flap-mitad > span, .flap-hoja > span { display: block; height: var(--fh); }
.flap-arriba, .flap-cae { top: 0; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, #2c2d33, var(--flap-a)); }
.flap-abajo, .flap-sube { bottom: 0; border-radius: 0 0 3px 3px; background: linear-gradient(180deg, var(--flap-b), #18191d); }
.flap-abajo > span, .flap-sube > span { transform: translateY(-50%); }
.flap-arriba::after, .flap-cae::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--flap-junta); }
.flap-hoja { visibility: hidden; z-index: 2; }
.flap-cae { transform-origin: 50% 100%; }
.flap-sube { transform-origin: 50% 0; }
.flap.flap-gira .flap-cae { visibility: visible; animation: cae calc(var(--paso, 64ms) * 0.5) ease-in forwards; }
.flap.flap-gira .flap-sube { visibility: visible; transform: rotateX(90deg); animation: sube calc(var(--paso, 64ms) * 0.5) ease-out calc(var(--paso, 64ms) * 0.5) forwards; }
@keyframes cae { from { transform: perspective(200px) rotateX(0); filter: brightness(1); } to { transform: perspective(200px) rotateX(-90deg); filter: brightness(0.6); } }
@keyframes sube { from { transform: perspective(200px) rotateX(90deg); filter: brightness(1.3); } to { transform: perspective(200px) rotateX(0); filter: brightness(1); } }
/* Los ejes laterales de cada paleta. */
.flap::before, .flap::after {
  content: '';
  position: absolute;
  top: calc(50% - 2px);
  width: 2px;
  height: 4px;
  background: #050506;
  z-index: 3;
}
.flap::before { left: 0; }
.flap::after { right: 0; }
.flap-fila { display: inline-flex; gap: 2px; }
.flap-fila.amarillo .flap { color: var(--amarillo); }
.flap-fila.verde .flap { color: var(--verde); }
.flap-fila.ambar .flap { color: var(--ambar); }
.flap-fila.rojo .flap { color: var(--rojo); }
.flap-fila.tenue .flap { color: #b8b2a2; }

/* ------------------------------------------------------------------ portada */
.portada { padding: 40px 0 28px; }
.portada-rejilla { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: 34px; align-items: start; }
@media (max-width: 1060px) { .portada-rejilla { grid-template-columns: 1fr; } }
.antetitulo {
  display: inline-flex; align-items: center; gap: 10px; font-family: var(--letra-panel); font-stretch: 80%; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; font-size: 0.78rem; color: var(--amarillo);
}
.antetitulo::before { content: ''; width: 26px; height: 8px; border-radius: 2px; background: var(--amarillo); }
h1.titular {
  font-family: var(--letra-panel);
  font-weight: 800;
  font-stretch: 82%;
  font-size: clamp(2.3rem, 5.2vw, 4.1rem);
  line-height: 0.98;
  letter-spacing: -0.01em;
  margin: 14px 0 14px;
  text-wrap: balance;
}
h1.titular em { font-style: normal; color: var(--amarillo); }
.entradilla { color: var(--texto-2); font-size: 1.12rem; max-width: 34em; margin: 0 0 22px; text-wrap: pretty; }

/* La ventanilla: donde se pega el papel. */
.ventanilla {
  background: linear-gradient(180deg, var(--carcasa-2), var(--carcasa));
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  overflow: hidden;
}
:root[data-tema='claro'] .ventanilla { background: #fffdf8; }
.pestanas { display: flex; gap: 2px; padding: 8px 8px 0; border-bottom: 1px solid var(--borde); overflow-x: auto; scrollbar-width: none; }
.pestanas::-webkit-scrollbar { display: none; }
.pestana {
  display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; cursor: pointer; padding: 10px 13px 11px;
  color: var(--texto-2); border-radius: 9px 9px 0 0; font-weight: 600; font-size: 0.93rem; white-space: nowrap; position: relative;
}
.pestana svg { width: 17px; height: 17px; }
.pestana:hover { color: var(--texto); }
.pestana[aria-selected='true'] { color: var(--texto); background: var(--fondo-2); }
.pestana[aria-selected='true']::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: -1px; height: 3px; border-radius: 3px; background: var(--amarillo); }
:root[data-tema='claro'] .pestana[aria-selected='true'] { background: #f3efe4; }
.panel-entrada { padding: 14px; }
.panel-entrada[hidden] { display: none; }
.area-texto {
  width: 100%;
  min-height: 210px;
  resize: vertical;
  border: 1px solid var(--borde);
  border-radius: 10px;
  background: var(--fondo);
  padding: 14px 15px;
  line-height: 1.55;
  font-size: 1rem;
}
:root[data-tema='claro'] .area-texto { background: #fff; }
.area-texto::placeholder { color: var(--texto-3); }
.area-texto.arrastrando { border-color: var(--amarillo); background: color-mix(in srgb, var(--amarillo) 8%, var(--fondo)); }
.campo { display: grid; gap: 6px; }
.campo label, .etiqueta { font-weight: 600; font-size: 0.9rem; color: var(--texto-2); }
.entrada {
  width: 100%; border: 1px solid var(--borde); background: var(--fondo); border-radius: 10px; padding: 12px 14px; min-height: 46px;
}
:root[data-tema='claro'] .entrada { background: #fff; }
select.entrada { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--texto-2) 50%), linear-gradient(135deg, var(--texto-2) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 34px; }
.zona-fichero {
  display: grid; place-items: center; text-align: center; gap: 8px; border: 2px dashed var(--borde-2); border-radius: 12px; padding: 34px 16px;
  color: var(--texto-2); cursor: pointer; min-height: 210px;
}
.zona-fichero:hover, .zona-fichero.arrastrando { border-color: var(--amarillo); color: var(--texto); }
.zona-fichero svg { width: 40px; height: 40px; color: var(--amarillo); }
.zona-fichero strong { color: var(--texto); font-size: 1.05rem; }
.opciones-entrada { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 0 14px 14px; }
@media (max-width: 560px) { .opciones-entrada { grid-template-columns: 1fr; } }
.barra-accion { display: flex; align-items: center; gap: 12px; padding: 14px; border-top: 1px solid var(--borde); flex-wrap: wrap; }
.barra-accion .nota { color: var(--texto-3); font-size: 0.86rem; flex: 1 1 200px; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; border: 1px solid var(--borde-2); background: var(--fondo-3);
  border-radius: 11px; padding: 11px 16px; cursor: pointer; font-weight: 600; text-decoration: none; color: var(--texto); min-height: 44px;
}
.boton:hover { border-color: var(--texto-3); }
.boton svg { width: 18px; height: 18px; flex-shrink: 0; }
.boton-principal {
  background: var(--amarillo); color: var(--amarillo-tinta); border-color: transparent; font-family: var(--letra-panel); font-stretch: 85%;
  font-weight: 800; font-size: 1.12rem; letter-spacing: 0.02em; padding: 12px 22px; text-transform: uppercase;
  box-shadow: 0 8px 26px -10px color-mix(in srgb, var(--amarillo) 70%, transparent), 0 1px 0 rgba(255, 255, 255, 0.5) inset;
}
.boton-principal:hover { background: var(--amarillo-2); }
.boton-principal:disabled { opacity: 0.6; cursor: progress; }
.boton-pequeno { min-height: 36px; padding: 7px 11px; font-size: 0.88rem; border-radius: 9px; }
.boton-fantasma { background: transparent; }
.ejemplos { display: grid; gap: 8px; }
.ejemplo {
  display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: center; text-align: left; border: 1px solid var(--borde);
  border-radius: 11px; background: var(--fondo); padding: 11px 13px; cursor: pointer;
}
.ejemplo:hover { border-color: var(--amarillo); }
.ejemplo b { grid-row: span 2; font-family: var(--letra-panel); font-stretch: 75%; color: var(--amarillo); font-size: 1.3rem; width: 34px; text-align: center; }
.ejemplo span { color: var(--texto-3); font-size: 0.86rem; }
.ejemplo strong { font-weight: 650; }

/* ------------------------------------------------------------------ el panel (carcasa) */
.panel {
  --fw: 21px;
  --fh: 33px;
  --fs: 24px;
  position: relative;
  background: linear-gradient(180deg, #1c1d22, #141519);
  border: 1px solid #2c2e36;
  border-radius: 16px;
  box-shadow: 0 0 0 6px #0e0f12, 0 0 0 7px #2a2c33, 0 40px 80px -30px rgba(0, 0, 0, 0.9), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  padding: 0 0 16px;
  overflow: hidden;
}
.panel-cabeza {
  display: flex; align-items: center; gap: 12px; padding: 11px 16px; background: var(--amarillo); color: var(--amarillo-tinta);
  font-family: var(--letra-panel); font-weight: 800; font-stretch: 78%; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.95rem;
}
.panel-cabeza svg { width: 22px; height: 22px; }
.panel-cabeza .reloj { margin-left: auto; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; font-size: 1.05rem; }
.panel-cabeza .subtitulo { opacity: 0.66; font-weight: 700; }
.panel-cuerpo { padding: 14px 16px 0; display: grid; gap: 9px; }
.panel-columnas {
  display: grid; grid-template-columns: var(--col-etiqueta, 132px) 1fr; gap: 12px; color: #8a8678; font-family: var(--letra-panel);
  font-stretch: 75%; font-weight: 700; letter-spacing: 0.1em; font-size: 0.72rem; text-transform: uppercase; padding-bottom: 2px;
  border-bottom: 1px solid #2a2b31;
}
.panel-linea { display: grid; grid-template-columns: var(--col-etiqueta, 132px) 1fr; gap: 12px; align-items: center; min-width: 0; }
.panel-etiqueta {
  font-family: var(--letra-panel); font-stretch: 72%; font-weight: 700; letter-spacing: 0.06em; color: var(--amarillo);
  font-size: 0.86rem; text-transform: uppercase; line-height: 1.15;
}
.panel-valor { display: grid; gap: 3px; min-width: 0; overflow: hidden; }
.panel-detalle { color: #8f8a7c; font-size: 0.78rem; font-family: var(--letra-panel); font-stretch: 85%; letter-spacing: 0.02em; margin-top: 2px; }
.panel-traduccion { display: grid; gap: 4px; padding: 6px 0; border-bottom: 1px dashed #2b2c32; }
.panel-traduccion:last-child { border-bottom: 0; }
.panel-traduccion .flecha { color: var(--amarillo); font-family: var(--letra-panel); font-size: 0.75rem; letter-spacing: 0.1em; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.panel-traduccion .flecha::before { content: ''; height: 1px; width: 18px; background: currentColor; }
.lampara { width: 12px; height: 12px; border-radius: 50%; background: #3a3b40; box-shadow: 0 0 0 2px #0b0b0d inset; flex-shrink: 0; }
.lampara.verde { background: var(--verde); box-shadow: 0 0 12px var(--verde), 0 0 0 2px rgba(0, 0, 0, 0.35) inset; }
.lampara.ambar { background: var(--ambar); box-shadow: 0 0 12px var(--ambar); animation: parpadeo 1.2s steps(2) infinite; }
.lampara.rojo { background: var(--rojo); box-shadow: 0 0 14px var(--rojo); animation: parpadeo 0.8s steps(2) infinite; }
@keyframes parpadeo { 50% { opacity: 0.35; } }
:root[data-movimiento='no'] .lampara { animation: none; }
.panel-pie {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 16px 0; padding-top: 12px; border-top: 1px solid #2a2b31;
  color: #8f8a7c; font-size: 0.8rem; font-family: var(--letra-panel); font-stretch: 85%; letter-spacing: 0.03em;
}
.cuenta-atras { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; --fw: 34px; --fh: 50px; --fs: 38px; }
.cuenta-atras .rotulo { font-family: var(--letra-panel); font-stretch: 75%; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--flap-tinta); font-size: 1rem; }
.tornillo { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #6a6c74, #2a2b30 70%); }
.tornillo::after { content: ''; position: absolute; left: 1px; right: 1px; top: 3px; height: 1px; background: #15161a; transform: rotate(35deg); }
.tornillo.a { left: 7px; bottom: 7px; } .tornillo.b { right: 7px; bottom: 7px; }
@media (max-width: 640px) {
  .panel { --fw: 15px; --fh: 25px; --fs: 18px; --col-etiqueta: 1fr; }
  .panel-linea, .panel-columnas { grid-template-columns: 1fr; gap: 4px; }
  .panel-columnas span:last-child { display: none; }
  .cuenta-atras { --fw: 26px; --fh: 40px; --fs: 30px; }
}

/* ------------------------------------------------------------------ resultados */
.resultado { padding: 10px 0 60px; scroll-margin-top: 80px; }
.resultado[hidden] { display: none; }
.franja-resultado {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 0 18px; color: var(--texto-2); font-size: 0.92rem;
  border-bottom: 1px solid var(--borde); margin-bottom: 22px;
}
.franja-resultado .chips { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borde); border-radius: 999px; padding: 4px 11px; font-size: 0.84rem;
  color: var(--texto-2); background: var(--fondo-2); white-space: nowrap;
}
.chip b { color: var(--texto); font-weight: 700; }
.rejilla-resultado { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 1000px) { .rejilla-resultado { grid-template-columns: 1fr; } }
.columna { display: grid; gap: 22px; min-width: 0; }

/* Billete: papel claro con muesca y trepado. */
.billete {
  position: relative;
  background: var(--papel);
  color: var(--tinta);
  border-radius: var(--radio);
  padding: 22px 24px 22px 30px;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 24px 50px -28px rgba(0, 0, 0, 0.85);
}
.billete::before {
  content: '';
  position: absolute;
  left: 11px;
  top: 14px;
  bottom: 14px;
  width: 6px;
  background: radial-gradient(circle, rgba(0, 0, 0, 0.16) 2px, transparent 2.5px) 0 0 / 6px 11px repeat-y;
}
:root[data-tema='claro'] .billete { box-shadow: 0 0 0 1px var(--papel-borde), 0 18px 40px -26px rgba(0, 0, 0, 0.45); }
.billete a { color: #8a5300; }
.billete h2, .tarjeta h2 {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-family: var(--letra-panel); font-stretch: 82%;
  font-weight: 800; font-size: 1.35rem; line-height: 1.15; letter-spacing: 0.005em;
}
.billete h2 .numero {
  display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 7px; background: var(--tinta); color: var(--papel);
  font-size: 0.95rem; flex-shrink: 0;
}
.billete h3 { font-family: var(--letra-panel); font-stretch: 85%; font-weight: 750; font-size: 1.05rem; margin: 18px 0 8px; }
.billete p { margin: 0 0 10px; }
.billete .tenue, .tarjeta .tenue { color: var(--tinta-3); font-size: 0.9rem; }
.tarjeta .tenue { color: var(--texto-3); }
.billete-acciones { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 14px; }
.billete .boton { background: transparent; border-color: var(--papel-borde); color: var(--tinta); }
.billete .boton:hover { border-color: var(--tinta-3); background: var(--papel-2); }
.resumen-grande { font-size: 1.24rem; line-height: 1.55; text-wrap: pretty; margin: 0; }
.resumen-grande mark { background: linear-gradient(transparent 52%, var(--resalte) 52%); color: inherit; padding: 0 1px; }

.tarjeta {
  background: var(--fondo-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 20px 22px;
}
.tarjeta h2 { color: var(--texto); font-size: 1.18rem; }
.tarjeta h2 svg { width: 20px; height: 20px; color: var(--amarillo); }

/* Lista de lo que hay que hacer. */
.tareas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tarea { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; padding: 11px 12px; border-radius: 11px; background: var(--papel-2); }
.tarea input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: #1c1b18; }
.tarea.hecha .tarea-texto { text-decoration: line-through; color: var(--tinta-3); }
.tarea-texto strong { font-weight: 750; }
.tarea ul { margin: 6px 0 0; padding-left: 18px; color: var(--tinta-2); }
.consejos { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.consejos li { display: grid; grid-template-columns: 18px 1fr; gap: 9px; color: var(--tinta-2); font-size: 0.96rem; }
.consejos li::before { content: '→'; font-weight: 800; color: #9c6a00; }

/* Plazo y calendario. */
.plazo-cabeza { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; }
.plazo-fecha { font-family: var(--letra-panel); font-stretch: 80%; font-weight: 800; font-size: 1.9rem; line-height: 1.05; }
.plazo-fecha small { display: block; font-size: 0.95rem; font-weight: 600; color: var(--tinta-2); margin-top: 4px; font-stretch: 90%; }
.sello {
  display: inline-flex; align-items: center; gap: 7px; border: 2px solid currentColor; border-radius: 8px; padding: 5px 10px;
  font-family: var(--letra-panel); font-stretch: 78%; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; transform: rotate(-3deg);
}
.sello.verde { color: #15803d; } .sello.ambar { color: #b45309; } .sello.rojo { color: #c0261a; } .sello.gris { color: var(--tinta-3); }
.calendario { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 14px; }
.calendario .dia-semana { font-size: 0.72rem; text-align: center; color: var(--tinta-3); font-weight: 700; text-transform: uppercase; }
.calendario .dia {
  position: relative; aspect-ratio: 1; display: grid; place-items: center; border-radius: 7px; font-variant-numeric: tabular-nums;
  font-size: 0.9rem; background: rgba(0, 0, 0, 0.04); color: var(--tinta-3);
}
.calendario .dia.cuenta { background: #1c1b18; color: var(--papel); font-weight: 700; }
.calendario .dia.inhabil { background: repeating-linear-gradient(135deg, rgba(0, 0, 0, 0.05) 0 4px, rgba(0, 0, 0, 0.09) 4px 8px); }
.calendario .dia.festivo { color: #c0261a; font-weight: 700; }
.calendario .dia.notificacion { outline: 2px solid #1c1b18; outline-offset: -2px; color: var(--tinta); }
.calendario .dia.vence { background: var(--rojo); color: #fff; font-weight: 800; }
.calendario .dia.hoy::after { content: ''; position: absolute; bottom: 4px; width: 5px; height: 5px; border-radius: 50%; background: var(--amarillo-oscuro, #c99400); }
.calendario .mes { grid-column: 1 / -1; font-family: var(--letra-panel); font-stretch: 85%; font-weight: 750; margin-top: 8px; text-transform: capitalize; }
.leyenda { display: flex; gap: 14px; flex-wrap: wrap; font-size: 0.82rem; color: var(--tinta-3); margin-top: 10px; }
.leyenda i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }
.ajustes-plazo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.billete .entrada { background: #fffdf7; border-color: var(--papel-borde); color: var(--tinta); }
@media (max-width: 560px) { .ajustes-plazo { grid-template-columns: 1fr; } .plazo-cabeza { grid-template-columns: 1fr; } }

/* La carta en claro. */
.conmutador { display: inline-flex; padding: 3px; border-radius: 11px; background: var(--papel-2); gap: 2px; }
.conmutador button { border: 0; background: transparent; padding: 7px 12px; border-radius: 8px; cursor: pointer; font-weight: 650; font-size: 0.9rem; color: var(--tinta-2); }
.conmutador button[aria-pressed='true'] { background: var(--tinta); color: var(--papel); }
.carta { font-size: 1.06rem; line-height: 1.75; margin-top: 14px; }
.carta p { margin: 0 0 14px; }
.carta .seccion-titulo {
  font-family: var(--letra-panel); font-stretch: 80%; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.86rem;
  color: #8a5300; margin: 22px 0 8px; display: flex; align-items: center; gap: 8px;
}
.carta .seccion-titulo::after { content: ''; flex: 1; height: 1px; background: var(--papel-borde); }
.carta .dispositiva { background: #fff5d1; border-radius: 8px; box-shadow: -10px 0 0 #fff5d1, 10px 0 0 #fff5d1; }
.cambio { background: linear-gradient(transparent 58%, #ffe9a6 58%); border-radius: 2px; cursor: help; transition: background 0.2s; }
.cambio:hover, .cambio:focus { background: #ffe08a; outline: none; }
.cambio.borrado { display: none; }
.carta.ver-cambios .cambio.borrado { display: inline; background: none; text-decoration: line-through; color: #c0261a; opacity: 0.8; }
.carta.ver-cambios .cambio .original { text-decoration: line-through; color: #c0261a; margin-right: 4px; }
.carta .cambio .original { display: none; }
.carta.ver-cambios .cambio .original { display: inline; }
.termino { border-bottom: 2px dotted #a0742a; cursor: help; }
.termino:hover, .termino:focus { background: #fff1c2; outline: none; }
.sigla { border-bottom: 1px dashed #7c776c; cursor: help; }
.recien { animation: aparece 0.6s ease-out both; }
@keyframes aparece { from { background: #ffd75e; } }
:root[data-movimiento='no'] .recien { animation: none; }

/* Burbuja de explicación. */
.burbuja {
  position: fixed; z-index: 60; max-width: min(380px, calc(100vw - 24px)); background: #15161a; color: #efece3; border: 1px solid #34363f;
  border-radius: 12px; padding: 14px 16px; box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.7); font-size: 0.95rem; line-height: 1.5;
}
.burbuja[hidden] { display: none; }
.burbuja h4 { margin: 0 0 6px; font-family: var(--letra-panel); font-stretch: 82%; font-weight: 800; font-size: 1.1rem; color: var(--amarillo); }
.burbuja .sustituto { display: inline-block; font-size: 0.8rem; background: var(--amarillo); color: var(--amarillo-tinta); padding: 1px 8px; border-radius: 99px; font-weight: 700; margin-bottom: 6px; }
.burbuja p { margin: 0 0 6px; }
.burbuja .ejemplo-b { color: #b9b5a8; font-style: italic; }
.burbuja .ojo { color: #ffc9a0; }
.burbuja .norma { color: #8f8a7c; font-size: 0.82rem; }
.burbuja a { font-size: 0.86rem; }

/* Palabras y datos. */
.palabras { display: grid; gap: 10px; }
.palabra { padding: 10px 0; border-bottom: 1px solid var(--borde); }
.palabra:last-child { border-bottom: 0; }
.palabra dt { font-weight: 750; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.palabra dt .s { font-size: 0.82rem; color: var(--amarillo); font-weight: 600; }
.palabra dd { margin: 3px 0 0; color: var(--texto-2); }
.datos { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 0; }
.datos dt { color: var(--texto-3); font-size: 0.88rem; }
.datos dd { margin: 0; font-weight: 600; word-break: break-word; }
.datos .personal { filter: blur(4px); transition: filter 0.2s; cursor: pointer; }
.datos .personal.visto { filter: none; }
.medidor { display: grid; gap: 10px; }
.medidor .barra { height: 12px; border-radius: 99px; background: var(--fondo-3); overflow: hidden; position: relative; }
.medidor .barra i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; background: linear-gradient(90deg, var(--rojo), var(--ambar), var(--verde)); }
.medidor-fila { display: grid; grid-template-columns: 90px 1fr 60px; gap: 10px; align-items: center; font-size: 0.9rem; }
.medidor-fila b { text-align: right; font-variant-numeric: tabular-nums; }
.lista-simple { margin: 0; padding-left: 20px; display: grid; gap: 6px; }
.recurso { padding: 12px 14px; border-radius: 11px; background: var(--papel-2); margin-top: 8px; }
.recurso strong { display: block; }
.aviso {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 11px; font-size: 0.93rem;
  background: color-mix(in srgb, var(--amarillo) 12%, var(--fondo-2)); border: 1px solid color-mix(in srgb, var(--amarillo) 35%, transparent);
}
.billete .aviso { background: #fff1c2; border-color: #f0d07a; color: var(--tinta); }
.aviso svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: var(--amarillo); }
.billete .aviso svg { color: #9c6a00; }
.cargando { display: flex; align-items: center; gap: 10px; color: var(--texto-2); padding: 12px 0; }
.cargando::before { content: ''; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--borde-2); border-top-color: var(--amarillo); animation: gira 0.8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }
.error { color: #ffb4a8; background: rgba(255, 90, 76, 0.1); border: 1px solid rgba(255, 90, 76, 0.35); border-radius: 11px; padding: 12px 14px; }
:root[data-tema='claro'] .error { color: #9b1c10; }

/* ------------------------------------------------------------------ secciones y páginas */
.pagina { padding: 34px 0 70px; }
.pagina-cabeza { display: grid; gap: 8px; margin-bottom: 26px; }
.pagina-cabeza h1 { font-family: var(--letra-panel); font-weight: 800; font-stretch: 80%; font-size: clamp(2rem, 4.2vw, 3.1rem); line-height: 1; margin: 6px 0 4px; }
.pagina-cabeza p { color: var(--texto-2); max-width: 46em; margin: 0; font-size: 1.06rem; }
.buscador { position: relative; }
.buscador svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 19px; height: 19px; color: var(--texto-3); pointer-events: none; }
.buscador .entrada { padding-left: 44px; font-size: 1.05rem; min-height: 52px; }
.filtros { display: flex; gap: 6px; flex-wrap: wrap; margin: 14px 0 20px; }
.filtro { border: 1px solid var(--borde); background: var(--fondo-2); border-radius: 99px; padding: 6px 13px; cursor: pointer; font-size: 0.88rem; color: var(--texto-2); }
.filtro[aria-pressed='true'] { background: var(--amarillo); color: var(--amarillo-tinta); border-color: transparent; font-weight: 700; }
.letras { display: flex; gap: 3px; flex-wrap: wrap; margin-bottom: 18px; }
.letras a, .letras span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 7px; background: var(--fondo-2); border: 1px solid var(--borde); text-decoration: none; color: var(--texto); font-family: var(--letra-panel); font-weight: 700; }
.letras span { color: var(--texto-3); opacity: 0.5; }
.rejilla-fichas { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ficha {
  display: grid; gap: 6px; align-content: start; padding: 16px 18px; border-radius: 13px; background: var(--fondo-2); border: 1px solid var(--borde);
  text-decoration: none; color: var(--texto);
}
a.ficha:hover { border-color: var(--amarillo); }
.ficha h3 { margin: 0; font-family: var(--letra-panel); font-stretch: 85%; font-weight: 750; font-size: 1.12rem; line-height: 1.2; }
.ficha p { margin: 0; color: var(--texto-2); font-size: 0.95rem; }
.ficha .meta { font-size: 0.78rem; color: var(--texto-3); text-transform: uppercase; letter-spacing: 0.06em; font-family: var(--letra-panel); font-weight: 700; }
.lista-terminos { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0 28px; }
.entrada-glosario { padding: 14px 0; border-bottom: 1px solid var(--borde); scroll-margin-top: 90px; }
.entrada-glosario h3 { margin: 0 0 4px; font-family: var(--letra-panel); font-stretch: 85%; font-weight: 750; font-size: 1.12rem; }
.entrada-glosario h3 a { color: var(--texto); text-decoration: none; }
.entrada-glosario h3 a:hover { color: var(--amarillo); }
.entrada-glosario p { margin: 0; color: var(--texto-2); }
.entrada-glosario .s { color: var(--amarillo); font-size: 0.85rem; font-weight: 700; }
.articulo { max-width: 760px; }
.articulo h2 { font-family: var(--letra-panel); font-stretch: 82%; font-weight: 800; font-size: 1.5rem; margin: 30px 0 10px; }
.articulo p, .articulo li { color: var(--texto-2); }
.articulo strong { color: var(--texto); }
.pasos { counter-reset: paso; list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pasos li { counter-increment: paso; display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; }
.pasos li::before {
  content: counter(paso); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: var(--amarillo);
  color: var(--amarillo-tinta); font-family: var(--letra-panel); font-weight: 800;
}
.dos-columnas { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; align-items: start; }
@media (max-width: 900px) { .dos-columnas { grid-template-columns: 1fr; } }
.documento-escrito {
  background: #fff; color: #111; border-radius: 6px; padding: 40px 44px; font-family: Georgia, 'Times New Roman', serif; font-size: 15px; line-height: 1.6;
  white-space: pre-wrap; box-shadow: 0 24px 50px -28px rgba(0, 0, 0, 0.85); min-height: 400px;
}
.documento-escrito .hueco { background: #fff1b8; border-bottom: 1px dashed #b88a00; padding: 0 2px; }
@media (max-width: 560px) { .documento-escrito { padding: 24px 18px; font-size: 14px; } }
.formulario { display: grid; gap: 12px; }
.ajuste { display: grid; grid-template-columns: 1fr auto; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--borde); }
.ajuste p { margin: 2px 0 0; color: var(--texto-3); font-size: 0.9rem; }
.interruptor { position: relative; width: 52px; height: 30px; flex-shrink: 0; }
.interruptor input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; z-index: 1; }
.interruptor span { position: absolute; inset: 0; border-radius: 99px; background: var(--borde-2); transition: background 0.15s; }
.interruptor span::after { content: ''; position: absolute; left: 3px; top: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.interruptor input:checked + span { background: var(--amarillo); }
.interruptor input:checked + span::after { transform: translateX(22px); }
.interruptor input:focus-visible + span { outline: 3px solid var(--amarillo); outline-offset: 2px; }
.pie { border-top: 1px solid var(--borde); padding: 34px 0 50px; color: var(--texto-3); font-size: 0.9rem; }
.pie-rejilla { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 26px; }
@media (max-width: 800px) { .pie-rejilla { grid-template-columns: 1fr 1fr; } }
.pie h3 { color: var(--texto-2); font-family: var(--letra-panel); font-stretch: 85%; font-size: 0.95rem; margin: 0 0 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.pie ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.pie a { color: var(--texto-2); text-decoration: none; }
.pie a:hover { color: var(--amarillo); }
.contador-grande { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 18px; }
.contador-grande div { display: grid; }
.contador-grande b { font-family: var(--letra-panel); font-stretch: 78%; font-weight: 800; font-size: 1.9rem; color: var(--texto); line-height: 1; font-variant-numeric: tabular-nums; }
.contador-grande span { color: var(--texto-3); font-size: 0.82rem; }
.tostada {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 70; background: var(--amarillo); color: var(--amarillo-tinta);
  padding: 11px 18px; border-radius: 11px; font-weight: 700; box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.7); max-width: calc(100vw - 32px);
}
.tostada[hidden] { display: none; }
.marcador { background: linear-gradient(transparent 55%, color-mix(in srgb, var(--amarillo) 55%, transparent) 55%); }
.kbd { font-family: ui-monospace, monospace; font-size: 0.8rem; border: 1px solid var(--borde-2); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; color: var(--texto-2); }
.paleta-buscar { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.6); display: grid; align-items: start; justify-items: center; padding: 10vh 16px 16px; }
.paleta-buscar[hidden] { display: none; }
.paleta-caja { width: min(680px, 100%); background: var(--fondo-2); border: 1px solid var(--borde-2); border-radius: 16px; overflow: hidden; box-shadow: 0 40px 90px -20px rgba(0, 0, 0, 0.9); }
.paleta-caja .entrada { border: 0; border-bottom: 1px solid var(--borde); border-radius: 0; font-size: 1.15rem; min-height: 60px; padding-left: 20px; background: transparent; }
.paleta-resultados { max-height: 60vh; overflow-y: auto; padding: 6px; }
.paleta-resultados a { display: grid; grid-template-columns: 90px 1fr; gap: 10px; padding: 10px 12px; border-radius: 10px; text-decoration: none; color: var(--texto); }
.paleta-resultados a:hover, .paleta-resultados a.activo { background: var(--fondo-3); }
.paleta-resultados .tipo { font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--amarillo); font-family: var(--letra-panel); font-weight: 700; padding-top: 3px; }
.paleta-resultados small { display: block; color: var(--texto-3); }
.vacio { color: var(--texto-3); padding: 20px; text-align: center; }

/* ------------------------------------------------------------------ impresión */
@media print {
  :root { --fondo: #fff; --texto: #000; --texto-2: #222; }
  body::before, .cabecera, .pie, .portada, .billete-acciones, .conmutador, .ajustes-plazo, .boton, .franja-resultado .chips, .burbuja, .no-imprimir { display: none !important; }
  .billete, .tarjeta { box-shadow: none; border: 1px solid #999; background: #fff; color: #000; break-inside: avoid; }
  .rejilla-resultado { grid-template-columns: 1fr; }
  .documento-escrito { box-shadow: none; padding: 0; }
  .solo-escrito body > *:not(main) { display: none !important; }
}