/* Pizarra Criolla · css/fichas.css
   Fichas de equipo y de jugador: el bloque de pizarra con los 5 números clave, la rejilla de números y los
   percentiles. Usa los tokens y componentes de styles.css; aquí solo lo propio de las fichas. */

/* ---------- volver: flecha alineada con el borde, 48 px de toque ---------- */
.crumbs .fi-back { display: inline-flex; align-items: center; gap: 2px; margin: -12px 0 -12px -12px; padding: 0 12px 0 6px; font-weight: 600; }
.fi-back .ic { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fi-back:hover { text-decoration: none; }
@media (hover: hover) { .fi-back:hover span { text-decoration: underline; } }

/* ---------- barra de arriba: la miga a la izquierda; compartir y comparar a la derecha ---------- */
/* Los botones miden 48 px de toque pero ocupan en la fila lo mismo que la miga (márgenes negativos): la barra no crece
   con ellos. Si no caben (letra muy grande), las acciones bajan a una segunda fila, a la derecha. " con…" va escondido y
   sale solo si cabe: así, en un teléfono sin consultas de contenedor, queda "Comparar" (el lector oye siempre
   "Comparar con…"). */
.fi-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--s2); min-width: 0; container-type: inline-size; }
.fi-acts { display: flex; align-items: center; gap: 2px; flex: none; margin-left: auto; margin-right: -12px; }
.fi-act {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 48px; min-height: 48px;
  margin: -12px 0; padding: 0 12px; border: 0; border-radius: 999px; background: none; color: var(--accent); cursor: pointer;
  font: 600 var(--fs-body)/1.2 var(--font-body); white-space: nowrap; transition: transform var(--t-toque) var(--ease-out);
}
.fi-act:active { transform: scale(.95); }
@media (hover: hover) { .fi-act:hover { background: var(--accent-soft); } }
.fi-act .ic { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.fi-act .ic circle { fill: currentColor; stroke: none; }
.fi-cmp .cmp-x { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: pre; }
@container (min-width: 21.5em) {
  .fi-cmp .cmp-x { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}
.sk-x .fi-act { color: var(--rule); pointer-events: none; }

/* ---------- aviso: se muestran los datos de otra temporada (la elegida no tiene juegos de él) ---------- */
/* arriba de la pizarra, en el tinte del color de acción: "Datos de 2025-26: todavía no juega en 2026-27." */
.fi-aviso {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; padding: 10px var(--s3) 10px 14px;
  border-radius: var(--r-m); background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent);
  color: var(--ink); font-size: var(--fs-sm); line-height: 1.4;
}
.fi-aviso b { font-weight: 700; white-space: nowrap; }
.fi-aviso .sk-tx { background: var(--rule-2); }

/* ---------- carreras por inning: la caja del mapa de calor y la línea de lo más notorio ---------- */
.fi-heat { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m); padding: 10px var(--s2) 8px; min-width: 0; }
.fi-heat-t { font-size: var(--fs-sm); color: var(--ink-2); max-width: 62ch; min-height: 1.45em; }
/* Mientras llegan los datos (equipos.js), la caja guarda el alto que tendrá el mapa con la letra de la persona: las
   cuentas de CH.heat (charts.js) para su forma según el ancho, que es 'vuelta' (los innings hacia abajo) en lo angosto,
   'arriba' (el nombre encima de cada fila) en el teléfono común e 'izq' en lo ancho; debajo, la escala. La línea de lo
   más notorio va apagada, con un texto del mismo largo. Así el mapa llega sin mover lo de abajo. Sin consultas de
   contenedor, la forma 'arriba'. */
.fi-heat-espera { container-type: inline-size; }
.fi-heat-res {
  display: flex; flex-direction: column; gap: 6px;
  --heat-svg: calc(var(--fs-cap) * 1.7 + 3 * (var(--fs-sm) * 1.5 + max(26px, var(--fs-cap) * 2.1) + 8px) - 7px);
}
@container (max-width: 23.1em) { .fi-heat-res { --heat-svg: calc(var(--fs-cap) * 1.25 + 5px + 10 * (max(26px, var(--fs-sm) * 2) + 2px)); } }
@container (min-width: 30.5em) { .fi-heat-res { --heat-svg: calc(var(--fs-cap) * 1.7 + 3 * (max(26px, var(--fs-sm) * 2.1) + 2px) - 1px); } }
.fi-heat-res .sk { height: var(--heat-svg); }
.fi-heat-res .fi-heat-sk-ley { align-self: center; width: 40%; height: calc(var(--fs-sm) * 1.45); }
.fi-heat-espera + .fi-heat-t { min-height: 2.9em; } /* respaldo: el texto apagado ya ocupa sus renglones */

/* ---------- índice de equipos: la fila entera se toca ---------- */
.fi-idx a { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 72px; padding: var(--s3) var(--s4) var(--s3) var(--s3); }
.fi-idx .tm-name { gap: 2px; overflow-wrap: anywhere; hyphens: auto; }
.fi-idx .tm-name b { font: 700 var(--fs-lead)/1.2 var(--font-body); }
.fi-idx .tm-rec { gap: 4px; }
.fi-idx .tm-rec b { font: 800 var(--fs-num)/1 var(--font-display); letter-spacing: .01em; }
.fi-idx .tm-rec small { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--ink-2); }
/* con la letra grande del teléfono (o en 320 px), el récord baja debajo del nombre */
@media (max-width: 20em) {
  .fi-idx a { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "chip name" "chip rec"; row-gap: 6px; }
  .fi-idx .tchip { grid-area: chip; }
  .fi-idx .tm-name { grid-area: name; }
  .fi-idx .tm-rec { grid-area: rec; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: var(--s2); text-align: left; }
}
/* con la letra grande la insignia se achica, para que el nombre no parta en 3 líneas (la media query en em sigue a
   la letra del sistema: 22em son 352 px con la letra normal, así que en 360 px no cambia nada) */
@media (max-width: 22em) {
  .teams .tchip.xl { font-size: var(--fs-lead); border-radius: var(--r-s); }
}

/* ---------- la pizarra de la ficha: azul de la bandera con las 8 estrellas ---------- */
.fh {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s4) var(--s4) 14px; border-radius: var(--r-l); box-shadow: var(--shadow);
  background: var(--board) radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .08), transparent 60%);
  color: var(--chalk);
}
.fh::before {
  content: ""; position: absolute; right: 12px; top: 10px; width: 150px; height: 66px; opacity: .2; pointer-events: none;
  background: var(--stars) center / contain no-repeat;
}
.fh > * { position: relative; }
.fh .eyebrow { color: var(--chalk-dim); }
/* "temporada 2025-26" no se parte (ni en el guion): si no cabe, baja entera */
.fh-nw { white-space: nowrap; }
.fh h1, .fh .sk-h1 { font: 800 var(--fs-h1)/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; overflow-wrap: break-word; }
.fh-meta { font-size: var(--fs-sm); color: var(--chalk-dim); }
.fh a { color: inherit; }

/* equipo: insignia grande y nombre; debajo, el récord como las carreras del marcador */
/* el nombre se queda al lado de la insignia mientras quepa su palabra más larga; si no, baja entero */
.fh-id { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); min-width: 0; }
.fh-id h1, .fh-id .sk-h1 { flex: 1 0 auto; width: min-content; max-width: 100%; }
.fh-rec { display: flex; align-items: center; gap: var(--s4); flex-wrap: wrap; margin-top: var(--s1); }
.fh-rec > b { font: 800 var(--fs-hero)/.95 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.fh-rec p { display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-sm); color: var(--chalk-dim); }
.fh-rec strong { font: 700 var(--fs-lead)/1.1 var(--font-body); color: var(--chalk); }
.fh-rec .lead strong { color: var(--bulb); }

/* jugador: la insignia del equipo en la línea de arriba lleva a su ficha (toque de 44 px sin mover nada) */
.fh-eb { line-height: 1.7; }
.fh-tm { position: relative; }
.fh-tm .tchip { margin-right: 6px; vertical-align: 1px; }
.fh-tm::after { content: ""; position: absolute; inset: -13px -6px; }
.fh-tm:hover { text-decoration: none; }
@media (hover: hover) { .fh-tm:hover span { text-decoration: underline; } }

/* la línea de números grandes: cada casilla se reparte el ancho; el número se achica con la pizarra (cqi) para que
   quepa en 360 px sin bajar de 18 px, y nunca pasa de --fs-num */
.fh-line {
  display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); margin: 6px 0 0;
  background: var(--board-2); border-radius: 10px; container-type: inline-size;
}
.fh-line > div { min-width: 0; padding: 10px 2px 9px; text-align: center; }
.fh-line > div + div { box-shadow: -1px 0 0 rgba(255, 255, 255, .12); }
/* las siglas van escritas tal cual (wRC+ lleva minúscula): sin text-transform */
.fh-line dt { font: 700 var(--fs-cap)/1.15 var(--font-body); letter-spacing: .06em; color: var(--chalk-dim); overflow-wrap: anywhere; }
.fh-line abbr { text-decoration: none; cursor: help; }
.fh-line dd { margin: 6px 0 0; font: 800 var(--fs-h2)/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
@supports (font-size: 1cqi) { .fh-line dd { font-size: min(var(--fs-num), calc(37cqi / var(--n, 5))); } }
.fh-line .top1 dd { color: var(--bulb); }
.fh-foot { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; font-size: var(--fs-sm); color: var(--chalk-dim); }
.fh-foot span { background: rgba(0, 0, 0, .2); border-radius: 14px; padding: 4px 10px; }
.fh-foot b { color: var(--chalk); font-variant-numeric: tabular-nums; }

/* ---------- casillas del equipo: un número grande y su puesto entre los 8 ---------- */
/* una sola tarjeta con líneas finas; 3 columnas (2 con la letra grande del teléfono) */
.ftiles, .fgrid {
  display: grid; margin: 0; padding: 0; list-style: none; overflow: hidden;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m);
}
/* cada casilla dibuja su raya de arriba y de la izquierda, corrida 1 px afuera: las del borde quedan recortadas */
.ftiles > *, .fgrid > div { margin: -1px 0 0 -1px; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); min-width: 0; }
.ftiles { grid-template-columns: repeat(auto-fill, minmax(max(6.2rem, 30%), 1fr)); }
.ftiles li { display: flex; flex-direction: column; gap: 4px; padding: 10px var(--s3) var(--s3); }
.ft-l { flex: 1; font: 600 var(--fs-sm)/1.25 var(--font-body); color: var(--muted); }
.ft-v { font: 800 var(--fs-num)/1.05 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .01em; }
/* sin espacio (360 px), el texto baja debajo de la regla */
.ft-r { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font: 600 var(--fs-sm)/1.2 var(--font-body); color: var(--ink-2); white-space: nowrap; }
.ftiles li.best .ft-r { color: var(--ink); font-weight: 700; }
/* la regla de 8 puntos: el puesto del equipo marcado (el 1.º, en dorado) */
.ft-m { display: inline-flex; gap: 2px; flex: none; }
.ft-m i { width: 5px; height: 5px; border-radius: 50%; background: var(--rule-2); }
.ft-m i.on { width: 7px; height: 7px; margin: -1px 0; background: var(--ink); }
.ftiles li.best .ft-m i.on { background: var(--pc-h2); }

/* ---------- el resto de los números del jugador: rejilla compacta ---------- */
.fgrid { grid-template-columns: repeat(auto-fill, minmax(max(4.6rem, 22%), 1fr)); }
.fgrid > div { padding: 9px 10px 10px; }
.fgrid dt { font: 700 var(--fs-cap)/1.15 var(--font-body); letter-spacing: .05em; color: var(--muted); }
.fgrid dd { margin: 4px 0 0; font: 700 var(--fs-lead)/1.2 var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- percentiles: la bola lleva el número; de azul (peor) a dorado (mejor) ---------- */
.fpc {
  display: flex; flex-direction: column; margin: 0; padding: 10px var(--s3) 6px; list-style: none;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m);
  --ball: calc(var(--fs-sm) * 2.05);
  overflow: hidden; /* la capa de la bola, corrida con translateX, no debe ensanchar la página */
}
.fpc li { display: grid; grid-template-columns: 6.6em minmax(0, 1fr) 3.4em; align-items: center; gap: 10px; min-height: 38px; font-size: var(--fs-sm); }
/* color: el tono más cercano (sN) y, si el teléfono sabe mezclar, el punto exacto entre dos tonos (--a, --b y --w los pone equipos.js) */
.fpc li { --pcc: var(--pc-m); }
.fpc li.s0 { --pcc: var(--pc-c2); } .fpc li.s1 { --pcc: var(--pc-c1); } .fpc li.s3 { --pcc: var(--pc-h1); } .fpc li.s4 { --pcc: var(--pc-h2); }
@supports (color: color-mix(in srgb, red 50%, blue)) { .fpc li[style] { --pcc: color-mix(in srgb, var(--b) var(--w), var(--a)); } }
.fpc-l { color: var(--ink-2); }
.fpc-v { color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.fpc-t { position: relative; height: 6px; margin: 0 calc(var(--ball) / 2); border-radius: 3px; background: var(--rule); }
/* la marca del promedio (50) */
.fpc-t::after { content: ""; position: absolute; z-index: 1; left: 50%; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; border-radius: 1px; background: var(--rule-2); }
.fpc-f {
  position: absolute; inset: 0; border-radius: 3px; background: var(--pcc); opacity: .55;
  transform: scaleX(var(--p)); transform-origin: left center;
}
/* la bola corre sobre una capa del ancho de la barra: translateX en % de ese ancho la pone en su percentil */
.fpc-b { position: absolute; z-index: 2; inset: 0; transform: translateX(calc(var(--p) * 100%)); }
.fpc-b b {
  position: absolute; left: 0; top: 50%; width: var(--ball); height: var(--ball); margin: calc(var(--ball) / -2) 0 0 calc(var(--ball) / -2);
  display: grid; place-items: center; border-radius: 50%; background: var(--pcc); box-shadow: 0 0 0 2px var(--card);
  font: 700 var(--fs-sm)/1 var(--font-body); font-variant-numeric: tabular-nums; color: #0d1530;
}
.fpc li.lo .fpc-b b { color: #fff; }
.fpc li.fpc-leg { min-height: 0; padding-top: 2px; }
.fpc-leg-t { display: grid; grid-template-columns: 1fr auto 1fr; font: 600 var(--fs-cap)/1.2 var(--font-body); color: var(--muted); }
.fpc-leg-t span:first-child { text-align: left; }
.fpc-leg-t span:last-child { text-align: right; }
/* al abrir la ficha la barra se llena y la bola corre hasta su lugar (una sola vez; solo transform) */
.fpc.anim .fpc-f { animation: fpc-llena 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
.fpc.anim .fpc-b { animation: fpc-corre 700ms var(--ease-out) both; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes fpc-llena { from { transform: scaleX(0); } }
@keyframes fpc-corre { from { transform: translateX(0); } }
/* con la letra muy grande, la barra baja a su propia línea */
@media (max-width: 20em) {
  /* la bola sobresale media altura por arriba y por abajo de la barra: ese es el espacio entre filas */
  .fpc li:not(.fpc-leg) { grid-template-columns: minmax(0, 1fr) auto; row-gap: calc(var(--ball) / 2); padding: 4px 0 calc(var(--ball) / 2 - 2px); }
  .fpc li:not(.fpc-leg) .fpc-t { grid-column: 1 / -1; grid-row: 2; }
  .fpc li.fpc-leg { grid-template-columns: minmax(0, 1fr); }
  .fpc-leg > span:not(.fpc-leg-t) { display: none; }
}

/* ---------- calendario y tablas: filas enteras tocables ---------- */
/* el rival, "vs. ZUL Águilas". Nunca se corta a media palabra sin "…":
   - si la lista mide menos de 18em (360 px con la letra al 125% o más), ninguna fila lleva el nombre: queda "vs. ZUL",
     con la sigla de la insignia, y el nombre solo para el lector de pantalla. Así todas las filas quedan iguales;
   - si no, el nombre ocupa lo que quede y, si no cabe entero, termina en "…";
   - y si a una fila le quedan menos de 3em (la hora de los próximos es más ancha), su nombre salta a una segunda
     línea que no se ve: la caja mide una línea y corta lo demás. */
.cal .glist { container-type: inline-size; }
.fi-opp {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; column-gap: 6px;
  min-width: 0; height: 1.45em; line-height: 1.45; overflow: hidden; white-space: nowrap;
}
.fi-opp-v { display: inline-flex; align-items: center; gap: 6px; }
/* "vs." y "en" del mismo ancho: las insignias quedan en columna */
.fi-opp-p { min-width: 1.45em; }
.fi-opp-n { flex: 1 1 3em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 18em) {
  .fi-opp-n { position: absolute; width: 1px; height: 1px; clip: rect(0 0 0 0); }
}
.glist b.fi-live { color: var(--live); }
/* 44 px de toque por fila; el tinte al tocar, mezclado donde el teléfono sabe (color-mix) y el del fondo donde no.
   El segundo selector alcanza la primera columna, que es fija al deslizar y lleva su propio fondo (styles.css). */
.tbl tr.fi-tap { height: 2.75rem; cursor: pointer; }
.tbl tr.fi-tap:active > *, .tbl-wrap.sticky .tbl tr.fi-tap:active > * { background: var(--paper); }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .tbl tr.fi-tap:active > *, .tbl-wrap.sticky .tbl tr.fi-tap:active > * { background: color-mix(in srgb, var(--accent) 9%, var(--card)); }
}

/* ---------- esqueletos de Equipos y de las fichas (equipos.js): la maqueta real, apagada ---------- */
/* el texto de muestra no se ve: da el alto y el ancho de lo que viene; su fondo, línea por línea, es la barra gris */
.sk-tx {
  color: transparent; background: var(--rule); border-radius: var(--r-s);
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.fh .sk-tx, .cp-h .sk-tx { background: var(--board-2); }
.fh-line .sk-tx { background: rgba(255, 255, 255, .1); }
.tchip.sk-chip { background: var(--rule); color: transparent; }
.fh .tchip.sk-chip { background: var(--board-2); }
/* los enlaces de la maqueta no llevan a nada: ni se tocan ni se iluminan */
.sk-x a { color: var(--rule); pointer-events: none; }

/* ---------- comparador (js/comparar.js) ---------- */
/* las dos tarjetas lado a lado: dos pizarras chicas con la insignia, el apellido grande y una línea de números */
.cp-heads { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
.cp-h {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: var(--s3);
  border-radius: var(--r-l); box-shadow: var(--shadow); color: var(--chalk);
  background: var(--board) radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .08), transparent 60%);
}
.cp-eb { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font: 700 var(--fs-cap)/1.3 var(--font-body); letter-spacing: .05em; text-transform: uppercase; color: var(--chalk-dim); overflow-wrap: anywhere; -webkit-hyphens: auto; hyphens: auto; }
.cp-eb > span { min-width: 0; }
.cp-eb .tchip { flex: none; }
.cp-rol { color: var(--chalk); font-weight: 600; }
.cp-h .tchip.sk-chip { background: var(--board-2); color: transparent; }
.skel .cp-chg { display: inline-flex; align-items: center; }
.cp-n { font: 600 var(--fs-sm)/1.25 var(--font-body); color: var(--chalk-dim); overflow-wrap: anywhere; hyphens: auto; }
.cp-n b { display: block; font: 800 var(--fs-h2)/1.05 var(--font-display); text-transform: uppercase; letter-spacing: .02em; color: var(--chalk); }
.cp-n a { color: inherit; }
@media (hover: hover) { .cp-n a:hover { text-decoration: none; } .cp-n a:hover b { text-decoration: underline; } }
.cp-h a:focus-visible { outline-color: var(--bulb); }
.cp-sub { font-size: var(--fs-sm); line-height: 1.3; color: var(--chalk-dim); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.cp-chg {
  align-self: flex-start; margin-top: auto; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .4); border-radius: 999px;
  background: none; color: var(--chalk); font: 600 var(--fs-sm)/1.2 var(--font-body); cursor: pointer; transition: transform var(--t-toque) var(--ease-out);
}
.cp-chg:active { transform: scale(.95); }
.cp-chg:focus-visible { outline-color: var(--bulb); }
/* el lado que falta: hueco punteado con su botón */
.cp-h.cp-vacio { justify-content: center; gap: var(--s3); color: var(--ink-2); background: var(--card); border: 1.5px dashed var(--rule-2); box-shadow: none; }
.cp-vacio .cp-sub { color: var(--ink-2); font-size: var(--fs-body); }
.cp-vacio .btn { align-self: flex-start; }
.cp-why .btn { margin-top: 2px; }

/* "Mejor en": una línea por jugador */
.cp-best { display: flex; flex-direction: column; gap: 6px; padding: var(--s3) var(--s4); background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m); }
.cp-best p { font-size: var(--fs-body); line-height: 1.4; color: var(--ink-2); }
.cp-best b { color: var(--ink); }

/* los números lado a lado: el de cada uno a su lado y la sigla en medio; el mejor, en negrita con un punto hacia la sigla.
   Con poco espacio (la letra grande; también sin consultas de contenedor) el relleno y los números se achican y la sigla
   puede partirse ("AVE / rival"); con espacio, los de siempre. */
.cp-tw { container-type: inline-size; }
.cp-t {
  width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m); overflow: hidden;
}
.cp-t th, .cp-t td { padding: 9px var(--s2); border-bottom: 1px solid var(--rule); }
.cp-t tbody tr:last-child > * { border-bottom: 0; }
.cp-t thead th { font: 700 var(--fs-sm)/1.2 var(--font-body); color: var(--ink); text-align: center; overflow-wrap: anywhere; }
.cp-t thead th:first-child { text-align: left; }
.cp-t thead th:last-child { text-align: right; }
.cp-t tbody th { width: 1%; text-align: center; white-space: normal; font: 700 var(--fs-cap)/1.2 var(--font-body); letter-spacing: .04em; color: var(--muted); }
.cp-t td { width: 50%; font: 600 var(--fs-body)/1.2 var(--font-body); color: var(--ink-2); white-space: nowrap; }
@container (min-width: 17.5em) {
  .cp-t th, .cp-t td { padding-left: var(--s3); padding-right: var(--s3); }
  .cp-t td { font-size: var(--fs-lead); }
  .cp-t tbody th { white-space: nowrap; }
}
.cp-t td:first-child { text-align: left; }
.cp-t td:last-child { text-align: right; }
.cp-t td.cp-w { color: var(--ink); font-weight: 800; }
.cp-t td.cp-w::after, .cp-t td.cp-w::before { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.cp-t td.cp-w:first-child::after { content: ""; margin-left: 6px; }
.cp-t td.cp-w:last-child::before { content: ""; margin-right: 6px; }

/* percentiles: el nombre del número arriba y las dos barras de la ficha debajo (el apellido en lugar de la sigla) */
.fpc.cp-pct > li.cp-ph { display: block; min-height: 0; padding: 10px 0 0; font: 700 var(--fs-cap)/1.2 var(--font-body); letter-spacing: .05em; color: var(--ink); }
.fpc.cp-pct > li.cp-ph:first-child { padding-top: 2px; }
.fpc.cp-pct > li.cp-pg { display: block; min-height: 0; }
.cp-pgl { margin: 0; padding: 0; list-style: none; }
.cp-pw { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-pn-t { color: var(--muted); font-size: var(--fs-cap); }

@media (prefers-color-scheme: dark) {
  /* de noche todos los tonos de los percentiles son claros: número oscuro en la bola */
  .fpc-b b, .fpc li.lo .fpc-b b { color: #050a1a; }
}