/* Los tokens de CLAUDE.md, sin variantes claras: la web es oscura como la app.
   No hay `prefers-color-scheme` porque la paleta sólo está medida sobre
   material oscuro — la contraparte clara de cada token no existe todavía. */
:root {
  --ink: #101725;
  --abyss: #0A0F1A;
  --matte: #1E222E;
  --matte-high: #272C3A;
  --line: #2E3444;
  --chalk: #ECEEF5;
  --mute: #8C93A8;
  --iris: #9B87F5;
  --iris-deep: #6C4FD6;
  --win: #73FFD0;
  --loss: #D13838;
  --ancho: 46rem;
}
* { box-sizing: border-box; }
html { color-scheme: dark; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--chalk);
  font-family: Archivo, "Helvetica Neue", Arial, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* Cifras tabulares en todo dato numérico, sin excepción. */
.cifra, td.n, th.n, .dato { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
main { max-width: var(--ancho); margin: 0 auto; padding: 0 1.25rem 6rem; }
header.sitio {
  max-width: var(--ancho); margin: 0 auto; padding: 1.5rem 1.25rem;
  display: flex; gap: 1.25rem; align-items: baseline; flex-wrap: wrap;
}
header.sitio a.marca {
  font-weight: 600; font-stretch: 125%; letter-spacing: .02em;
  color: var(--chalk); text-decoration: none; margin-right: auto;
}
/* El `gap` del cabecero separa la marca del `nav`, no los enlaces entre sí: sin
   esto los cuatro se leen como una sola frase. Con tres pasaba desapercibido. */
header.sitio nav { display: flex; gap: 1.1rem; flex-wrap: wrap; }
header.sitio nav a { color: var(--mute); text-decoration: none; font-size: .94rem; }
header.sitio nav a:hover, header.sitio nav a:focus { color: var(--chalk); }
h1 { font-size: 2.1rem; line-height: 1.2; font-stretch: 112%; font-weight: 600; margin: 1.5rem 0 .75rem; }
h2 { font-size: 1.3rem; margin: 2.75rem 0 .5rem; font-weight: 600; }
h3 { font-size: 1.02rem; margin: 1.75rem 0 .35rem; font-weight: 600; color: var(--chalk); }
p { margin: .75rem 0; }
.entrada { font-size: 1.12rem; color: var(--mute); max-width: 36rem; }
a { color: var(--iris); }
.tarjeta {
  background: linear-gradient(180deg, var(--matte-high), var(--matte));
  border: 1px solid var(--line); border-radius: 14px;
  padding: 1.25rem 1.35rem; margin: 1.25rem 0;
}
.numerote { font-size: 2.6rem; font-weight: 600; font-stretch: 125%; line-height: 1.1; display: block; }
.pie { color: var(--mute); font-size: .88rem; }
table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: .94rem; }
th, td { text-align: left; padding: .5rem .6rem; border-bottom: 1px solid var(--line); }
th { color: var(--mute); font-weight: 500; font-size: .84rem; }
td.n, th.n { text-align: right; }
.malo { color: var(--loss); }
.bueno { color: var(--win); }
.tabla-envuelta { overflow-x: auto; }
.boton {
  display: inline-block; background: var(--iris); color: var(--ink);
  padding: .7rem 1.4rem; border-radius: 11px; text-decoration: none; font-weight: 600;
}
.boton.segundo { background: transparent; color: var(--chalk); border: 1px solid var(--line); }
ul { padding-left: 1.2rem; }
li { margin: .35rem 0; }
footer {
  border-top: 1px solid var(--line); margin-top: 4rem; padding: 1.5rem 1.25rem 3rem;
  max-width: var(--ancho); margin-left: auto; margin-right: auto;
  color: var(--mute); font-size: .86rem;
}
footer a { color: var(--mute); }
.aviso {
  border: 1px solid var(--line); border-left: 3px solid var(--iris-deep);
  border-radius: 0 10px 10px 0; padding: .9rem 1.1rem; margin: 1.5rem 0;
  color: var(--mute); font-size: .92rem; background: var(--abyss);
}

/* ── El terminal ───────────────────────────────────────────────────────────
   La única página con controles. Van con el mismo material mate que las
   tarjetas: la web no tiene los dos planos de la app —no hay contenido en
   movimiento debajo— así que un vidrio aquí sería decoración sin función. */
.controles {
  display: flex; flex-wrap: wrap; gap: .75rem 1.1rem; align-items: flex-end;
  background: var(--matte); border: 1px solid var(--line); border-radius: 12px;
  padding: .9rem 1.1rem; margin: 1.5rem 0 1rem;
}
.control { display: flex; flex-direction: column; gap: .25rem; }
.control label { color: var(--mute); font-size: .8rem; }
.control select {
  background: var(--abyss); color: var(--chalk); border: 1px solid var(--line);
  border-radius: 8px; padding: .4rem .55rem; font: inherit; font-size: .9rem;
}
.interruptor { display: flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--chalk); }
.interruptor input { accent-color: var(--iris); width: 1rem; height: 1rem; }
.recuento { color: var(--mute); font-size: .88rem; margin: .25rem 0 0; }

/* Ordenar es un botón, no un `th` con un `onclick`: el teclado tiene que poder
   llegar y el lector de pantalla tiene que poder anunciar el orden. */
table.rejilla th button {
  background: none; border: 0; padding: 0; margin: 0; font: inherit;
  color: var(--mute); cursor: pointer; text-align: inherit;
}
table.rejilla th button:hover, table.rejilla th button:focus { color: var(--chalk); }
table.rejilla th[aria-sort] button { color: var(--chalk); }
table.rejilla th[aria-sort] button::after { content: " ↓"; }
table.rejilla th[aria-sort="ascending"] button::after { content: " ↑"; }
table.rejilla { font-size: .88rem; }
table.rejilla td { white-space: nowrap; }
/* Una celda por debajo de su mínimo de muestra se enseña, pero apagada: sigue
   estando —esconderla haría creer que esa combinación no se probó— y no compite
   por la vista con las que sí se pueden presentar. */
table.rejilla tr.bajo-minimo td { color: var(--mute); }
table.rejilla tr.bajo-minimo td.destacada { color: var(--mute); }
/* «Cruza cero» va como texto, no como color: `iris` y `mute` son isoluminantes
   —1.047:1— y una diferencia que sólo es de tono no existe en gris. */
.marca { font-size: .8rem; color: var(--mute); }
.marca.firme { color: var(--chalk); }
.vacia { color: var(--mute); }
.leyenda { color: var(--mute); font-size: .86rem; }
.leyenda code { color: var(--chalk); }
.comparacion td.destacada { font-weight: 600; }
/* Un intervalo partido por la mitad se lee como dos cifras sueltas. La
   tabla vive dentro de `.tabla-envuelta`, que desplaza si hace falta. */
.comparacion td.n { white-space: nowrap; }

/* La rejilla se sale de la medida de lectura a propósito.

   Con el ancho de prosa —46rem— las trece columnas no caben y las tres que
   caen fuera son el intervalo, la t y «¿cruza cero?»: exactamente las que
   convierten la tabla en un dato y no en un menú. Un lector veía una columna
   de rendimientos en verde y no llegaba nunca al intervalo.

   Se centra sobre el eje de `main` en vez de tocar `main`, para que la prosa
   conserve su medida; el ancho se limita al hueco real de la ventana, así que
   el cuerpo de la página nunca se desplaza en horizontal. */
.desbordada {
  /* `2.5rem` es el relleno de `main`, así que por debajo del ancho máximo el
     bloque cae exactamente sobre el borde de la prosa en vez de a cuatro
     píxeles. Y sigue siendo mayor que cualquier barra de desplazamiento
     clásica, así que el cuerpo no se desplaza en horizontal. */
  width: min(74rem, calc(100vw - 2.5rem));
  margin-left: 50%;
  transform: translateX(-50%);
}