/* Spec 025 "Hoja de jugadas": papel, tinta y cancha. Mismos nombres de tokens que la spec 002 (las demás páginas los heredan),
   valores nuevos. Contrastes AA vigilados por scripts/capturas.mjs. Tipos del sistema, sin archivos (Principio V). */
:root {
  color-scheme: light dark;
  --fondo: #f5f2ea; --superficie: #fffdf7; --hundido: #efe9db; --corte: #f8f4ea; --borde: #dcd5c4;
  --texto: #13201a; --tenue: #56635b;
  --acento: #0a6b3d; --sobre-acento: #ffffff; --acento-suave: #e3f1e6; --oro: #8a5a00; --oro-vivo: #f2c14e;
  --gana: #13703a; --gana-suave: #e3f1e6; --pierde: #b4232a; --pierde-suave: #fbe6e3;
  --banda: #0a6b3d; --banda-suave: rgb(10 107 61 / .22); --punto: #13201a; --riel: #e7e1d2;
  --cancha-hondo: #0b3a24; --gis: #f4f1e6; --gis-tenue: #cfd8cf; --rojo-estadio: #ff9ea1;
  --qb-f: #ffe1ea; --qb-t: #9b1239;
  --rb-f: #d3f3ec; --rb-t: #0b6355;
  --wr-f: #dcecfd; --wr-t: #1c4c8c;
  --te-f: #ffe9d2; --te-t: #923210;
  --fx-f: #ece8fd; --fx-t: #5a24a8;
  --k-f: #eaf4d3; --k-t: #44560c;
  --df-f: #e3e8ef; --df-t: #2c3b50;
  --idp-f: #fbe4f4; --idp-t: #85185f;
  --letra: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --letra-num: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace;
  --letra-titulo: "Avenir Next Condensed", "Bahnschrift", "Roboto Condensed", "Arial Narrow", sans-serif-condensed, system-ui, sans-serif;
  --letra-nota: "Iowan Old Style", "Charter", "Georgia", serif;
  --t-12: 0.75rem; --t-13: 0.8125rem; --t-14: 0.875rem; --t-16: 1rem; --t-18: 1.125rem;
  --t-22: 1.375rem; --t-28: 1.75rem; --t-36: clamp(2.25rem, 1.4rem + 3.6vw, 3.5rem);
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-12: 48px;
  --radio-s: 6px; --radio: 10px; --radio-l: 14px;
  --sombra: 0 1px 2px rgb(19 32 26 / .05);
  --fila: 44px; --ancho: 1200px;
  --f5-f: #cdeed8; --f5-t: #0b5a2e; --f4-f: #e6f6ea; --f4-t: #146c38; --f3-f: #efe9db; --f3-t: #13201a; --f2-f: #fdecdc; --f2-t: #8a3b0a; --f1-f: #fbd9d9; --f1-t: #9b1c22;   /* spec 014: facilidad */
}
@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0b1310; --superficie: #111b16; --hundido: #17241d; --corte: #0e1813; --borde: #263a30;
    --texto: #ebf1ea; --tenue: #9fb0a5;
    --acento: #3ccf7e; --sobre-acento: #04140b; --acento-suave: #10291c; --oro: #f2c14e; --oro-vivo: #f2c14e;
    --gana: #4ade80; --gana-suave: #10291c; --pierde: #ff8b8f; --pierde-suave: #3a1416;
    --banda: #3ccf7e; --banda-suave: rgb(60 207 126 / .28); --punto: #ebf1ea; --riel: #1d2c25;
    --cancha-hondo: #08261a;
    --qb-f: #3d1224; --qb-t: #ff9fbd;
    --rb-f: #0e2f2a; --rb-t: #6fe3cc;
    --wr-f: #122844; --wr-t: #8cc2ff;
    --te-f: #3a2210; --te-t: #ffb77a;
    --fx-f: #251c45; --fx-t: #c4b2ff;
    --k-f: #232c0c; --k-t: #c6df76;
    --df-f: #1c2531; --df-t: #b3c3d8;
    --idp-f: #36112d; --idp-t: #f2a4dc;
    --sombra: none;
    --f5-f: #0f3a22; --f5-t: #7ee2a6; --f4-f: #10291c; --f4-t: #4ade80; --f3-f: #17241d; --f3-t: #ebf1ea; --f2-f: #3a2414; --f2-t: #ffb77a; --f1-f: #3a1416; --f1-t: #fb9b9b;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 400 var(--t-16)/1.55 var(--letra); -webkit-font-smoothing: antialiased; }
a { color: var(--acento); }
.ancho { max-width: var(--ancho); margin: 0 auto; padding: 0 var(--e-4); }
@media (min-width: 768px) { .ancho { padding: 0 var(--e-6); } }
:focus-visible { outline: 3px solid var(--oro); outline-offset: 2px; }

/* barra: franja de cancha con rayas de yarda; la marca en condensada con la chapa ESP en oro */
.barra { background-color: var(--cancha-hondo); background-image: repeating-linear-gradient(90deg, transparent 0 79px, rgb(255 255 255 / .06) 79px 80px); color: var(--gis); }
.barra-in { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--e-4); min-height: 56px; }
.marca { display: inline-flex; align-items: center; gap: var(--e-2); color: var(--gis); text-decoration: none; }
.logo { width: 26px; height: 26px; flex: none; }
.palabra { font: 800 1.5rem/1 var(--letra-titulo); font-stretch: condensed; text-transform: uppercase; letter-spacing: .02em; }
.esp { font-size: var(--t-12); font-weight: 800; text-transform: uppercase; letter-spacing: .08em; padding: 1px 6px; border-radius: 3px; background: var(--oro-vivo); color: #1a1300; transform: translateY(-2px); }
/* spec 038: cinco destinos sin desplegables. Teléfono: barra fija abajo; desde 761 px, arriba en la cabecera. */
.barra-in { grid-template-columns: auto minmax(0, 1fr); }
.nav { position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(5, 1fr); padding-bottom: env(safe-area-inset-bottom); background: var(--cancha-hondo); border-top: 1px solid rgb(255 255 255 / .12); }
.nav a { display: grid; justify-items: center; align-content: center; gap: 2px; min-height: 56px; color: var(--gis-tenue); font-size: var(--t-12); font-weight: 700; text-decoration: none; }
.nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.nav a:hover, .nav a[aria-current] { color: var(--gis); }
.nav a[aria-current] svg { stroke: var(--oro-vivo); }
.nav .nav-jugar { color: var(--oro-vivo); }
body { padding-bottom: calc(57px + env(safe-area-inset-bottom)); }
.x { font-size: var(--t-13); color: var(--gis-tenue); text-decoration: none; white-space: nowrap; }
/* spec 043: X como botón a todo ancho; en el teléfono sólo el logo, desde 761 px "Síguenos", desde 1180 px la cuenta */
.barra-in { grid-template-columns: auto minmax(0, 1fr) auto; }
.barra .x { grid-column: -2 / -1; justify-self: end; display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2); min-width: 40px; min-height: 40px; padding: 0 var(--e-3); border-radius: 999px; background: var(--gis); color: var(--cancha-hondo); font-size: var(--t-14); font-weight: 800; }
.barra .x:hover { background: var(--oro-vivo); color: #1a1300; }
.barra .x svg { width: 16px; height: 16px; fill: currentColor; flex: none; }
.barra .x-corto, .barra .x-largo { display: none; }
@media (max-width: 760px) { .barra .x { padding: 0; } }
@media (max-width: 380px) { .palabra { font-size: 1.2rem; } }
@media (max-width: 760px) { body:has(.busca-grande) .barra .busca { display: none; } }
@media (min-width: 761px) {
  body { padding-bottom: 0; }
  .barra { position: sticky; top: 0; z-index: 10; }
  .barra-in { grid-template-columns: auto auto minmax(180px, 1fr) auto; }
  .nav { position: static; display: flex; gap: var(--e-1); padding: 0; background: none; border: 0; }
  .nav a { display: flex; align-items: center; gap: var(--e-2); min-height: 56px; padding: 0 var(--e-3); font-size: var(--t-14); }
  .nav svg { width: 18px; height: 18px; }
  .nav a[aria-current] { box-shadow: inset 0 -3px 0 var(--oro-vivo); }
  .barra .x-corto { display: inline; }
}
@media (min-width: 1180px) { .barra .x-corto { display: none; } .barra .x-largo { display: inline; } }

/* spec 038: buscador de jugadores (cabecera y portada) */
.busca { position: relative; min-width: 0; }
.busca input { width: 100%; min-height: 40px; padding: 0 var(--e-3) 0 34px; border: 1px solid rgb(255 255 255 / .25); border-radius: 999px; background: rgb(255 255 255 / .1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23cfd8cf' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E") no-repeat 11px 50% / 16px; color: var(--gis); font: inherit; font-size: var(--t-16); }
.busca input::placeholder { color: var(--gis-tenue); opacity: 1; }
.busca input:focus { outline: 3px solid var(--oro-vivo); outline-offset: 1px; }
.busca-lista { position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0; min-width: 260px; margin: 0; padding: var(--e-1); list-style: none; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: 0 8px 24px rgb(19 32 26 / .18); }
.barra .busca-lista { left: auto; }
.busca-lista a { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); min-height: 44px; padding: var(--e-2) var(--e-3); border-radius: var(--radio-s); color: var(--texto); text-decoration: none; }
.busca-lista a:hover, .busca-lista [aria-selected] a { background: var(--hundido); }
.busca-lista small { color: var(--tenue); white-space: nowrap; }
.busca-nada { padding: var(--e-3); color: var(--tenue); font-size: var(--t-14); }
.busca-grande input { min-height: 52px; border-color: var(--borde); background-color: var(--superficie); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2356635b' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E"); color: var(--texto); font-size: var(--t-18); }
.busca-grande input::placeholder { color: var(--tenue); }
.busca-grande .busca-lista { left: 0; }
.inicio .busca-grande { max-width: 640px; }

/* spec 038: portada corta */
.inicio { display: grid; gap: var(--e-3); padding: var(--e-5) 0 0; }
.inicio .ceja, .inicio .titular { margin: 0; }
.inicio .titular { font-size: clamp(2.2rem, 9.5vw, 4.5rem); line-height: .9; }
.inicio .titular small { font-size: var(--t-16); margin-top: var(--e-2); }
.cta { display: flex; align-items: center; gap: var(--e-3); margin: 0; font-size: var(--t-13); line-height: 1.3; color: var(--tenue); }
.cta .boton { flex: none; }
.inicio + .seccion-t, .ultimos .seccion-t { margin-top: var(--e-6); }
.ultimos { margin-top: var(--e-4); }
.art-corta { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.art-corta a { display: grid; gap: 0; padding: 6px var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); text-decoration: none; }
.art-corta a:hover { border-color: var(--acento); }
.art-corta .ceja { margin: 0; font-size: 11px; }
.art-corta b { font-size: var(--t-14); line-height: 1.3; }
@media (max-width: 760px) {
  .inicio ~ .seccion-t, .ultimos .seccion-t { margin: var(--e-5) 0 var(--e-2); }
  .inicio ~ .seccion-t h2, .ultimos .seccion-t h2 { font-size: 1.5rem; }
  .inicio ~ .carril .tarjeta li { padding: 4px 0; }
  .inicio ~ .carril .tarjeta h3 { font-size: 1.5rem; }
}
.tb-banca { margin: var(--e-2) 0 0; padding-top: var(--e-2); border-top: 1px solid var(--borde); font-size: var(--t-13); color: var(--tenue); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.juega-tarjeta { display: grid; gap: 2px; margin: var(--e-5) 0 0; padding: var(--e-3) var(--e-4); border-radius: var(--radio-l); background: var(--cancha-hondo); color: var(--gis-tenue); text-decoration: none; }
.juega-tarjeta b { font: 800 1.4rem/1.05 var(--letra-titulo); font-stretch: condensed; text-transform: uppercase; color: var(--oro-vivo); }
.juega-tarjeta:hover { box-shadow: 0 0 0 2px var(--oro-vivo); }
.confianza { margin: var(--e-4) 0 0; padding: var(--e-3) var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); font-size: var(--t-14); }
.confianza p { margin: 0 0 var(--e-2); }
.confianza .conf-links { margin: var(--e-2) 0 0; font-weight: 650; }
.conf-sem { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-1); margin: 0; }
.conf-sem > * { display: inline-grid; place-items: center; min-width: 36px; min-height: 26px; padding: 0 6px; border-radius: var(--radio-s); font-size: var(--t-12); font-weight: 800; text-decoration: none; }
.conf-sem .gana { background: var(--gana-suave); color: var(--gana); }
.conf-sem .pierde { background: var(--pierde-suave); color: var(--pierde); }
.conf-sem .empate { background: var(--hundido); color: var(--texto); }
.indice-alto .indice-pos { display: grid; gap: 2px; }
.indice-alto .indice-pos b { white-space: normal; }
.indice-alto .indice-pos small { text-align: left; }
details.anatomia { margin: var(--e-4) 0; padding: var(--e-3) var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
details.anatomia > summary { cursor: pointer; font-weight: 750; min-height: 28px; }

/* spec 038: pie con Análisis */
.pie-analisis h2 { margin: 0 0 var(--e-2); font-size: var(--t-18); text-transform: uppercase; }
.pie-analisis ul { display: flex; flex-wrap: wrap; gap: 0 var(--e-4); margin: 0 0 var(--e-3); padding: 0; list-style: none; }
.pie-analisis li a { display: inline-flex; align-items: center; min-height: 32px; font-weight: 650; }
.pie-analisis a[aria-current] { color: var(--texto); }

/* títulos: condensada del sistema; notas del coach en serif itálica */
.titulo, .cabecera { padding: var(--e-8) 0 var(--e-2); }
.ceja { margin: 0 0 var(--e-1); color: var(--acento); font-weight: 700; font-size: var(--t-12); text-transform: uppercase; letter-spacing: .12em; }
h1, h2 { font-family: var(--letra-titulo); font-stretch: condensed; }
h1 { margin: 0 0 var(--e-2); font-size: var(--t-36); line-height: .95; letter-spacing: 0; font-weight: 800; text-transform: uppercase; }
h2 { font-weight: 700; letter-spacing: .01em; }
.nota, .leyenda { color: var(--tenue); font-size: var(--t-14); }
.nota { font-family: var(--letra-nota); font-style: italic; font-size: .95rem; }
.resumen { font-size: var(--t-18); max-width: 65ch; }

/* chip de posición (color fijo por posición) */
.pos-qb { --pf: var(--qb-f); --pt: var(--qb-t); }
.pos-rb { --pf: var(--rb-f); --pt: var(--rb-t); }
.pos-wr { --pf: var(--wr-f); --pt: var(--wr-t); }
.pos-te { --pf: var(--te-f); --pt: var(--te-t); }
.pos-flex { --pf: var(--fx-f); --pt: var(--fx-t); }
.pos-k { --pf: var(--k-f); --pt: var(--k-t); }
.pos-def { --pf: var(--df-f); --pt: var(--df-t); }
.pos-idp, .pos-dl, .pos-lb, .pos-db { --pf: var(--idp-f); --pt: var(--idp-t); }
.pos { display: inline-block; min-width: 2.6em; padding: 1px 6px; border-radius: var(--radio-s); text-align: center; font-size: var(--t-12); font-weight: 800; letter-spacing: .03em; line-height: 1.3; background: var(--pf); color: var(--pt); }

/* controles: semana y posición */
.controles { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); margin: var(--e-4) 0 var(--e-3); }
.semana-sel { display: inline-flex; align-items: center; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.semana-sel .paso { display: grid; place-items: center; width: 44px; height: 44px; color: var(--texto); text-decoration: none; font-size: 22px; line-height: 1; }
.semana-sel .paso[aria-disabled] { color: var(--tenue); opacity: .55; }
.semana-sel details { position: relative; }
.semana-sel summary { list-style: none; cursor: pointer; height: 44px; padding: 0 var(--e-3); display: flex; align-items: center; gap: var(--e-2); font-weight: 750; border-inline: 1px solid var(--borde); }
.semana-sel summary::-webkit-details-marker { display: none; }
.semana-sel summary small { color: var(--tenue); font-weight: 500; }
.semana-sel ul { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 100%; margin: 0; padding: var(--e-1); list-style: none; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.semana-sel li a { display: flex; align-items: center; min-height: 44px; padding: 0 var(--e-3); border-radius: var(--radio-s); color: var(--texto); text-decoration: none; white-space: nowrap; }
.semana-sel li a:hover, .semana-sel li a[aria-current] { background: var(--hundido); font-weight: 700; }
.tabs { display: flex; gap: var(--e-2); overflow-x: auto; scrollbar-width: none; }
.tabs a { flex: none; display: grid; place-items: center; min-width: 56px; min-height: 44px; padding: 0 var(--e-3); border-radius: 999px; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto); text-decoration: none; font-weight: 750; font-size: var(--t-14); }
.tabs a[aria-current] { background: var(--pf); color: var(--pt); border-color: var(--pt); }
.subtabs { margin-top: calc(-1 * var(--e-2)); margin-bottom: var(--e-3); }

/* tabla de ranking: una fila por jugador, 44 px */
.tabla-caja { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio-l); background: var(--superficie); box-shadow: var(--sombra); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-14); font-variant-numeric: tabular-nums; }
th, td { height: var(--fila); padding: 0 var(--e-3); text-align: left; white-space: nowrap; border-bottom: 1px solid var(--borde); }
thead th { height: 36px; background: var(--hundido); color: var(--tenue); font-size: var(--t-12); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
tbody tr:last-child td { border-bottom: 0; }
.num { text-align: right; }
.lugar { width: 1%; color: var(--tenue); }
.ranking .jug { position: sticky; left: 0; background: var(--superficie); }
.ranking thead .jug { background: var(--hundido); z-index: 1; }
.nombre { font-weight: 650; }
.eq { margin-left: var(--e-2); color: var(--tenue); font-size: var(--t-12); }
.eq .pos { margin-right: var(--e-1); }
/* Spec 026: chapa de sleeper en waivers de /liga/ */
.chapa { display: inline-block; margin-left: var(--e-1); padding: 1px 6px; border: 1px solid var(--acento); border-radius: var(--radio-s); color: var(--acento); font-size: var(--t-12); font-weight: 800; text-decoration: none; }
.proy { font-weight: 750; font-size: var(--t-16); }
tbody tr:hover td { background: var(--hundido); }
tbody tr:hover .jug { background: var(--hundido); }
.sd { display: inline-block; padding: 1px 6px; border: 1px dashed var(--borde); border-radius: var(--radio-s); color: var(--tenue); font-size: var(--t-12); font-weight: 600; }
.nivel th, .nivel td { background: transparent; border-bottom: 2px solid var(--pt, var(--acento)); }
.nivel th { height: 44px; padding-top: var(--e-3); vertical-align: bottom; color: var(--pt, var(--acento)); font: 800 1.15rem/1 var(--letra-titulo); font-stretch: condensed; text-transform: uppercase; letter-spacing: .02em; text-align: left; }
.nivel th span { position: sticky; left: var(--e-3); }
.gana { color: var(--gana); font-weight: 700; }
.pierde { color: var(--pierde); font-weight: 700; }
.mejor { background: var(--acento-suave); font-weight: 800; }

/* spec 025: la cancha. Regla de 0 a N pts con una raya cada 5; franja piso-techo, raya en la proyección y rombo en lo que hizo. */
.vis { min-width: 180px; }
.cancha { position: relative; display: block; height: 14px; border-radius: 3px; background-color: var(--riel); background-image: repeating-linear-gradient(90deg, var(--borde) 0 1px, transparent 1px calc(100% / var(--marcas, 9))); }
.cancha::before { content: ""; position: absolute; top: 0; bottom: 0; left: calc(var(--p) * 100%); width: calc((var(--t) - var(--p)) * 100%); box-sizing: border-box; background: var(--banda-suave); border-inline: 2px solid var(--banda); }
.cancha::after { content: ""; position: absolute; top: -4px; bottom: -4px; width: 3px; margin-left: -1.5px; left: calc(var(--c) * 100%); border-radius: 2px; background: var(--punto); }
.rombo { position: absolute; z-index: 1; top: 50%; left: calc(var(--r) * 100%); width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; box-sizing: border-box; background: var(--oro-vivo); border: 2px solid var(--punto); transform: rotate(45deg); }
.rombo.fuera { background: var(--pierde); }
.extremos, .regla { position: relative; display: none; height: 12px; margin-top: 4px; font: 600 10px/1 var(--letra); color: var(--tenue); font-variant-numeric: tabular-nums; }
.regla { display: block; }
.extremos span, .regla span { position: absolute; left: calc(var(--x) * 100%); transform: translateX(calc(var(--x) * -100%)); white-space: nowrap; }
.real.dentro { color: var(--gana); }
.real.fuera { color: var(--pierde); }
.simbolos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; margin: 0 0 var(--e-3); font-size: var(--t-13); color: var(--tenue); }
.simbolos i { display: inline-block; vertical-align: -2px; margin-right: 6px; box-sizing: border-box; }
.s-rango { width: 22px; height: 10px; background: var(--banda-suave); border-inline: 2px solid var(--banda); }
.s-proy { width: 3px; height: 14px; background: var(--punto); }
.s-real { width: 10px; height: 10px; background: var(--oro-vivo); border: 2px solid var(--punto); transform: rotate(45deg); }
.ranking td.lugar { font: 800 1.2rem/1 var(--letra-titulo); font-stretch: condensed; color: var(--pt, var(--tenue)); }
.ranking td.proy { font: 800 1.2rem/1 var(--letra-titulo); font-stretch: condensed; }
/* cabecera del ranking: bloque con la posición; el mando se queda pegado arriba en pantalla ancha */
.cab-rank { display: grid; grid-template-columns: auto 1fr; gap: var(--e-4); align-items: center; }
.cab-rank .nota { margin: 0; }
.bloque-pos { padding: 10px 14px 6px; border-radius: var(--radio); background: var(--pf); color: var(--pt); font: 800 3.5rem/1 var(--letra-titulo); font-stretch: condensed; text-align: center; }
@media (max-width: 640px) { .bloque-pos { font-size: 2.25rem; padding: 8px 10px 4px; } .cab-rank { align-items: start; } }
@media (min-width: 761px) { .mando { position: sticky; top: 56px; z-index: 9; margin: 0 0 var(--e-3); padding: var(--e-2) 0; background: var(--fondo); border-bottom: 1px solid var(--borde); } }

@media (max-width: 640px) {
  .ranking:not([data-elegidas]) { table-layout: fixed; }
  th, td { padding: 0 var(--e-1); }
  .ranking th.lugar, .ranking td.lugar { width: 26px; padding-left: var(--e-2); }
  .ranking th.proy, .ranking td.proy { width: 44px; }
  .ranking th.pt, .ranking td.pt { width: 44px; }
  .ranking th.vis, .ranking td.vis { width: 62px; min-width: 0; padding-right: var(--e-2); }
  .ranking:not([data-elegidas]) .ancha { display: none; }
  .ranking[data-elegidas] .jug { width: 120px; max-width: 120px; overflow: hidden; }   /* spec 034: 6 px para el veredicto corto */
  .ranking .jug { overflow: hidden; }
  .nombre, .eq { display: block; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
  .eq { margin: 0; }
  .ranking .sd { padding: 0; border: 0; font-size: 10px; }
  .ranking thead th { letter-spacing: .02em; font-size: 11px; }
}

.leyenda { margin-top: var(--e-4); max-width: 80ch; }

/* portada (spec 025): titular, marcador de estadio, anatomía de una fila, los cinco de arriba y jugadas numeradas */
.hero { display: grid; gap: var(--e-6); padding: var(--e-8) 0 var(--e-4); }
.hero .cabecera { padding: 0; }
.titular { margin: 0; font-size: clamp(4.5rem, 16vw, 10rem); line-height: .82; }
.titular small { display: block; margin-top: var(--e-3); font-size: max(1.1rem, .2em); line-height: 1.15; font-weight: 600; letter-spacing: .02em; color: var(--tenue); }
.bajada { max-width: 34em; margin: var(--e-4) 0 0; font-size: var(--t-18); }
.estadio { position: relative; padding: var(--e-5); border-radius: var(--radio-l); background-color: var(--cancha-hondo); background-image: repeating-linear-gradient(90deg, transparent 0 39px, rgb(255 255 255 / .05) 39px 40px); color: var(--gis); }
.estadio h2 { margin: 0 0 var(--e-3); font: 700 var(--t-12)/1.4 var(--letra); letter-spacing: .14em; text-transform: uppercase; color: var(--oro-vivo); }
.estadio a { color: var(--oro-vivo); }
.estadio .nota { margin: var(--e-3) 0 0; color: var(--gis-tenue); }
.estadio .gana, .estadio .pierde { font-weight: 800; }
.estadio b.gana { color: var(--oro-vivo); }
.estadio b.pierde { color: var(--rojo-estadio); }
.duelo { display: grid; grid-template-columns: 1fr 28px 1fr; align-items: center; text-align: center; }
.duelo b { display: block; font: 800 4.5rem/1 var(--letra-titulo); font-stretch: condensed; font-variant-numeric: tabular-nums; color: var(--gis); }
.duelo .arriba b:not(.pierde) { color: var(--oro-vivo); }
.duelo span { display: block; font: 600 var(--t-12)/1.3 var(--letra); letter-spacing: .1em; text-transform: uppercase; color: var(--gis-tenue); }
.duelo .guion { height: 4px; border-radius: 2px; background: rgb(255 255 255 / .4); }
.serie { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(44px, 1fr); gap: 6px; margin: var(--e-4) 0 var(--e-1); overflow-x: auto; scrollbar-width: none; }
.serie > a, .serie > span { display: grid; grid-template-rows: 34px 34px auto auto; justify-items: center; color: var(--gis); text-decoration: none; background: linear-gradient(rgb(255 255 255 / .35), rgb(255 255 255 / .35)) 0 34px / 100% 1px no-repeat; }
.serie i { width: 100%; max-width: 40px; height: calc(4px + var(--h) * 30px); border-radius: 3px; }
.serie .gana i { grid-row: 1; align-self: end; background: var(--oro-vivo); }
.serie .pierde i { grid-row: 2; align-self: start; background: var(--rojo-estadio); }
.serie b { grid-row: 3; margin-top: 4px; font-size: var(--t-13); font-variant-numeric: tabular-nums; color: var(--gis); }
.serie .pierde b { color: var(--rojo-estadio); }
.serie > * > span { grid-row: 4; font-size: var(--t-12); color: var(--gis-tenue); }
.pie-e { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--e-3); margin-top: var(--e-3); padding-top: var(--e-3); border-top: 1px solid rgb(255 255 255 / .15); font-size: var(--t-13); line-height: 1.3; color: var(--gis-tenue); }
.pie-e b { display: block; margin-bottom: 2px; font: 800 1.6rem/1 var(--letra-titulo); font-stretch: condensed; color: var(--gis); font-variant-numeric: tabular-nums; }
.anatomia { margin: var(--e-4) 0; padding: var(--e-5); border: 1px solid var(--borde); border-radius: var(--radio-l); background: var(--superficie); }
.anatomia h2 { margin: 0; font-size: var(--t-28); text-transform: uppercase; }
.anatomia > .nota { margin: var(--e-1) 0 var(--e-4); max-width: 62ch; }
.ana-quien { margin: 0; font-size: var(--t-14); color: var(--tenue); }
.ana-quien b { margin-right: var(--e-1); font-size: var(--t-18); color: var(--texto); }
.campo-g { position: relative; margin: 72px 0 64px; }
.campo-g .cancha { height: 26px; }
.campo-g .cancha::after { top: -7px; bottom: -7px; width: 4px; margin-left: -2px; }
.llamada { position: absolute; left: calc(var(--x) * 100%); width: 112px; transform: translateX(calc(var(--x) * -100%)); text-align: center; font-size: var(--t-13); line-height: 1.25; }
.llamada.arriba { bottom: calc(100% + 8px); }
.llamada.abajo { top: calc(100% + 6px); }
.llamada b { display: block; font: 800 1.4rem/1.05 var(--letra-titulo); font-stretch: condensed; color: var(--texto); }
.llamada .nota { font-size: var(--t-13); }
@media (max-width: 560px) { .campo-g { margin-top: 84px; } .llamada { width: 88px; } .llamada b { font-size: 1.2rem; } }
.seccion-t { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); margin: var(--e-10) 0 var(--e-3); padding-bottom: 6px; border-bottom: 2px solid var(--texto); }
.seccion-t h2 { margin: 0; font-size: 2rem; line-height: 1; text-transform: uppercase; }
.seccion-t a { font-size: var(--t-14); font-weight: 650; }
.carril { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(272px, 84%); gap: var(--e-3); padding-bottom: var(--e-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.tarjeta { display: block; scroll-snap-align: start; padding: var(--e-3) var(--e-4); border: 1px solid var(--borde); border-top: 6px solid var(--pt); border-radius: 4px 4px var(--radio-l) var(--radio-l); background: var(--superficie); color: var(--texto); text-decoration: none; }
.tarjeta:hover { border-color: var(--pt); }
.tarjeta h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 var(--e-1); font: 800 1.75rem/1 var(--letra-titulo); font-stretch: condensed; color: var(--pt); }
.tarjeta h3 .mas { font: 650 var(--t-13) var(--letra); }
.tarjeta ol { margin: 0; padding: 0; list-style: none; }
.tarjeta li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "n q p" "n c c"; column-gap: var(--e-2); row-gap: 6px; align-items: center; padding: var(--e-2) 0; border-top: 1px solid var(--borde); }
.tarjeta li:first-child { border-top: 0; }
.tarjeta .n { grid-area: n; align-self: start; font: 800 1.5rem/1 var(--letra-titulo); font-stretch: condensed; color: var(--pt); }
.tarjeta .q { grid-area: q; min-width: 0; line-height: 1.25; }
.tarjeta .q b, .tarjeta .q small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tarjeta .q b { font-size: var(--t-14); }
.tarjeta .q small { color: var(--tenue); font-size: var(--t-12); }
.tarjeta .q .pos { margin-right: var(--e-1); }
.tarjeta .pts { grid-area: p; font: 800 1.25rem/1 var(--letra-titulo); font-stretch: condensed; font-variant-numeric: tabular-nums; }
.tarjeta .cancha { grid-area: c; height: 7px; }
.tarjeta .cancha::after { top: -3px; bottom: -3px; width: 2px; margin-left: -1px; }
/* Spec 026: sorpresas y sleepers en la portada; la tarjeta no es un enlace, el título lleva el suyo */
.tarjeta.lista { --pt: var(--texto); }
td.porque { min-width: 13em; padding-block: var(--e-2); white-space: normal; line-height: 1.3; font-size: var(--t-13); }
.tarjeta.lista .q small { white-space: normal; }
.tarjeta.lista > .nota { margin: var(--e-2) 0 0; font-size: var(--t-13); }
.mas { color: var(--acento); font-weight: 700; font-size: var(--t-14); }
.jugadas { display: grid; gap: var(--e-3); }
.jugada { position: relative; display: block; padding: var(--e-5); border: 1px solid var(--borde); border-radius: var(--radio-l); background: var(--superficie); color: var(--texto); text-decoration: none; }
.jugada:hover { border-color: var(--acento); }
.jugada.sin-flecha::after { content: none; }   /* spec 032: /jugar/, la caja no es enlace */
.jugada::after { content: "\2192"; position: absolute; top: var(--e-4); right: var(--e-5); font-size: 1.4rem; font-weight: 800; color: var(--acento); }
.jugada h3 { margin: 0 0 var(--e-1); padding-right: 2em; font: 800 1.75rem/1.05 var(--letra-titulo); font-stretch: condensed; text-transform: uppercase; }
.jugada .nota { margin: 0; }
.jugada ol { display: grid; gap: var(--e-2); margin: var(--e-3) 0 0; padding: 0; list-style: none; counter-reset: paso; }
.jugada li { counter-increment: paso; display: grid; grid-template-columns: 28px 1fr; gap: var(--e-3); align-items: start; font-size: var(--t-14); }
.jugada li::before { content: counter(paso); display: grid; place-items: center; width: 28px; height: 28px; box-sizing: border-box; border: 2px solid var(--acento); border-radius: 50%; color: var(--acento); font: 800 15px/1 var(--letra-titulo); }
@media (min-width: 800px) { .jugadas { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) {
  .hero { grid-template-columns: 1.1fr 1fr; align-items: end; padding-top: var(--e-12); }
  .carril { grid-auto-flow: row; grid-template-columns: repeat(5, 1fr); grid-auto-columns: auto; overflow: visible; }
  .carril.listas { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) { .duelo b { font-size: 3.5rem; } .pie-e b { font-size: 1.35rem; } }

.texto { max-width: 68ch; }
.texto h2 { font-size: var(--t-22); line-height: 1.2; margin: var(--e-8) 0 var(--e-2); }
.pie { margin-top: var(--e-12); padding-top: var(--e-4); padding-bottom: var(--e-8); border-top: 1px solid var(--borde); color: var(--tenue); font-size: var(--t-14); }
@media (max-width: 760px) { .pie { margin-top: var(--e-6); padding-bottom: var(--e-3); font-size: var(--t-12); line-height: 1.45; } .pie p { margin: var(--e-2) 0 0; } .pie-analisis ul { gap: 0 var(--e-3); } .pie-analisis li a { min-height: 28px; } }

/* spec 005: tu liga */
.aviso { margin: var(--e-3) 0; padding: var(--e-3) var(--e-4); border: 1px solid var(--borde); border-left: 4px solid var(--oro); border-radius: var(--radio); background: var(--superficie); font-size: var(--t-14); }
.aviso.error { border-left-color: var(--pierde); }
.aviso p { margin: 0; }
.aviso button { margin-top: var(--e-3); }
.buscar { margin: var(--e-4) 0; max-width: 640px; }
.buscar label { display: block; margin-bottom: var(--e-2); font-weight: 650; font-size: var(--t-14); }
.buscar-fila { display: flex; gap: var(--e-2); }
.buscar input { flex: 1; min-width: 0; height: 44px; padding: 0 var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); font: inherit; }
button { min-height: 44px; padding: 0 var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); font: 650 var(--t-14) var(--letra); cursor: pointer; }
button:hover { background: var(--hundido); }
.buscar textarea { display: block; width: 100%; box-sizing: border-box; margin-bottom: var(--e-2); padding: var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); font: inherit; font-size: var(--t-14); }
.buscar button { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
.opciones { display: grid; gap: var(--e-2); margin: var(--e-3) 0 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .opciones { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); } }
.opciones button { width: 100%; padding: var(--e-3) var(--e-4); text-align: left; }
.opciones b, .opciones small { display: block; }
.opciones small { color: var(--tenue); font-weight: 500; }
.liga-cab { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--e-3); margin: var(--e-6) 0 var(--e-2); }
.liga-cab h2 { margin: 0; font-size: var(--t-28); line-height: 1.15; overflow-wrap: anywhere; }
.liga-acciones { display: flex; flex-wrap: wrap; gap: var(--e-2); }
/* spec 040: Mi equipo con varios equipos */
.mis-equipos { margin: var(--e-4) 0; }
.mis-equipos h2, .todos h2 { margin: 0 0 var(--e-2); font-size: var(--t-18); }
.equipos-lista { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0 0 var(--e-3); padding: 0; list-style: none; }
.equipos-lista li { min-width: 0; max-width: 100%; }
.equipos-lista button { display: grid; max-width: 100%; padding: var(--e-2) var(--e-3); text-align: left; }
.equipos-lista b, .equipos-lista small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.equipos-lista small, .todos-q small { color: var(--tenue); font-weight: 500; font-size: var(--t-12); }
.equipos-lista button[aria-pressed="true"] { border: 2px solid var(--acento); background: var(--acento-suave); }
.mis-equipos .buscar { margin: 0; }
details.agregar { margin: var(--e-4) 0; padding: var(--e-2) var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
details.agregar > summary { cursor: pointer; font-weight: 750; min-height: 44px; display: flex; align-items: center; }
details.agregar .buscar { margin: var(--e-2) 0 var(--e-3); }
.todos-lista { display: grid; gap: var(--e-2); margin: var(--e-3) 0 0; padding: 0; list-style: none; }
.todos-lista li { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--e-2); padding: var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.todos-q { display: grid; gap: 2px; min-width: 0; }
.todos-pon { font-weight: 650; font-size: var(--t-14); }
.todos-pon:empty { display: none; }
details.mas-lista { margin-top: var(--e-2); }
details.mas-lista > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 650; color: var(--acento); }
.bloque { margin-top: var(--e-8); }
.bloque h2 { margin: 0 0 var(--e-1); font-size: var(--t-22); }
.bloque h3 { margin: var(--e-4) 0 var(--e-2); font-size: var(--t-16); }
.cargando, .ok { color: var(--tenue); }
.cambios { padding-left: var(--e-5); }
.cambios li { margin: var(--e-1) 0; }
.reglas { columns: 2 220px; padding-left: var(--e-5); font-size: var(--t-14); }
.liga-tabla .jug { position: sticky; left: 0; z-index: 1; background: var(--superficie); max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
.liga-tabla thead .jug { background: var(--hundido); }
.liga-tabla .nombre, .liga-tabla .eq { display: block; overflow: hidden; text-overflow: ellipsis; line-height: 1.25; }
.liga-tabla .eq { margin: 0; }
.liga-tabla a.nombre { color: var(--texto); text-decoration: none; }
.liga-tabla a.nombre:hover { color: var(--acento); text-decoration: underline; }
.liga-tabla .lugar-l { width: 1%; color: var(--tenue); font-size: var(--t-12); font-weight: 700; }
.liga-tabla .mio td { background: var(--acento-suave); }
.liga-tabla td small { color: var(--tenue); }
.liga-card { display: block; margin-top: var(--e-4); padding: var(--e-4); border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: var(--radio-l); background: var(--superficie); color: var(--texto); text-decoration: none; box-shadow: var(--sombra); }
.liga-card:hover { border-color: var(--acento); }
.liga-card b { display: block; font-size: var(--t-18); }
.liga-card span { color: var(--tenue); font-size: var(--t-14); }
@media (max-width: 640px) {
  .liga-tabla th, .liga-tabla td { padding: 0 var(--e-2); }
  .liga-tabla .proy { font-size: var(--t-14); }
}

/* spec 003: puntos reales, lesiones y página de jugador */
.nombre a { color: inherit; text-decoration: none; }
.nombre a:hover { text-decoration: underline; }
.real, .fin { text-align: right; }
.real { font-weight: 750; }
.les { display: inline-block; margin-right: var(--e-1); padding: 0 6px; border: 1px solid currentColor; border-radius: var(--radio-s); background: var(--hundido); font-size: 11px; font-weight: 800; line-height: 1.5; white-space: nowrap; }
.les-duda { color: var(--oro); }
.les-poco { color: var(--pierde); }
.les-fuera { color: var(--pierde); background: var(--pierde-suave); }
/* jugador (spec 025): nombre grande, fichas, proyección con su cancha */
.jug-cab { display: grid; gap: var(--e-5); padding: var(--e-8) 0 var(--e-4); }
.jug-cab .ceja { display: flex; align-items: center; gap: var(--e-2); }
.jug-cab h1 { margin: var(--e-2) 0; font-size: clamp(3.25rem, 11vw, 7rem); line-height: .86; overflow-wrap: anywhere; }
.jug-cab > .nota { grid-column: 1 / -1; margin: 0; }
.jug-sub { margin: 0 0 var(--e-3); color: var(--tenue); }
.fichas { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.fichas > p { margin: 0; padding: var(--e-2) var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio-s); background: var(--superficie); font-size: var(--t-13); }
.proy-grande { padding: var(--e-4) var(--e-5); border: 1px solid var(--borde); border-radius: var(--radio-l); background: var(--superficie); }
.proy-grande > p:last-child { margin-bottom: 0; }
.jug-cifra b { font: 800 4.5rem/1 var(--letra-titulo); font-stretch: condensed; font-variant-numeric: tabular-nums; }
.jug-cifra span { margin-left: var(--e-2); color: var(--tenue); font-size: var(--t-14); }
.jug-barra { margin: var(--e-5) 0 0; }
.jug-barra .cancha { height: 22px; }
.jug-barra .cancha::after { top: -6px; bottom: -6px; width: 4px; margin-left: -2px; }
.jug-cifras { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: var(--e-2); margin: var(--e-2) 0; font-size: var(--t-13); color: var(--tenue); line-height: 1.3; }
.jug-cifras span:nth-child(2) { text-align: center; }
.jug-cifras span:last-child { text-align: right; }
.jug-cifras b { display: block; font: 800 1.4rem/1.1 var(--letra-titulo); font-stretch: condensed; color: var(--texto); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .jug-cab { grid-template-columns: 1.2fr 1fr; align-items: end; } }
/* ¿Le atinamos?: una columna por semana; franja = rango publicado, raya = proyección, rombo = lo que hizo */
.atinamos { margin: var(--e-6) 0 var(--e-4); padding: var(--e-4) var(--e-5); border: 1px solid var(--borde); border-radius: var(--radio-l); background: var(--superficie); }
.atinamos h2 { margin: 0; font-size: var(--t-28); text-transform: uppercase; }
.atinamos > .nota { margin: var(--e-1) 0 0; }
.at-graf, .at-et { display: grid; grid-template-columns: 28px repeat(var(--n), minmax(0, 1fr)); gap: 0 var(--e-2); }
.at-graf { height: 240px; margin-top: var(--e-5); }
.at-eje { position: relative; font: 600 10px/1 var(--letra); color: var(--tenue); }
.at-eje span { position: absolute; right: 2px; bottom: calc(var(--x) * 100%); transform: translateY(calc(var(--x) * 100%)); }
.at-col { position: relative; border-left: 1px dashed var(--borde); }
.at-col::before { content: ""; position: absolute; left: 50%; width: 22px; margin-left: -11px; top: calc((1 - var(--t)) * 100%); bottom: calc(var(--p) * 100%); box-sizing: border-box; background: var(--banda-suave); border-block: 2px solid var(--banda); }
.at-col::after { content: ""; position: absolute; left: 50%; width: 30px; margin: -1.5px 0 0 -15px; height: 3px; top: calc((1 - var(--c)) * 100%); background: var(--punto); }
.at-col .rombo { left: 50%; top: calc((1 - var(--r)) * 100%); width: 14px; height: 14px; margin: -7px 0 0 -7px; }
.at-et { margin-top: var(--e-2); text-align: center; font-size: var(--t-12); line-height: 1.25; color: var(--tenue); }
.at-et b { display: block; font-size: var(--t-14); color: var(--texto); font-variant-numeric: tabular-nums; }
.atino { margin: var(--e-3) 0 0; padding: var(--e-2) var(--e-3); border-radius: var(--radio-s); background: var(--acento-suave); font-size: var(--t-14); }
.atino b { color: var(--acento); }
.jugador-tabla .sem { position: static; }
.jugador-tabla .sem .eq { margin-left: var(--e-2); }
@media (max-width: 640px) {
  .con-real:not([data-elegidas]) .vis { display: none; }
  .ranking th.real, .ranking td.real, .ranking th.lp, .ranking td.lp { width: 44px; }
  .ranking th.fin, .ranking td.fin { width: 54px; }
  .ranking thead th.fin, .ranking thead th.lp { font-size: 10px; letter-spacing: 0; padding: 0 2px; }
  .ranking th.sem, .ranking td.sem { width: 78px; }
  .jugador-tabla .sem .eq { margin: 0; }
  .ranking .les { margin-right: 2px; padding: 0 3px; font-size: 10px; }
}

/* spec 006: niveles y columnas elegidas */
.cols { position: relative; }
.cols summary { list-style: none; display: flex; align-items: center; min-height: 44px; padding: 0 var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); font: 650 var(--t-14) var(--letra); cursor: pointer; }
.cols summary::-webkit-details-marker { display: none; }
.cols summary::after { content: "\25BE"; margin-left: var(--e-2); color: var(--tenue); }
.cols-lista { position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; min-width: 12rem; padding: var(--e-1); background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.cols-lista label { display: flex; align-items: center; gap: var(--e-3); min-height: 44px; padding: 0 var(--e-3); border-radius: var(--radio-s); font-size: var(--t-14); cursor: pointer; }
.cols-lista label:hover { background: var(--hundido); }
.cols-lista input { width: 20px; height: 20px; accent-color: var(--acento); }
.ranking[data-ocultas~="piso"] .c-piso, .ranking[data-ocultas~="techo"] .c-techo, .ranking[data-ocultas~="rango"] .c-rango,
.ranking[data-ocultas~="modelo"] .c-modelo, .ranking[data-ocultas~="real"] .c-real, .ranking[data-ocultas~="termino"] .c-termino,
.ranking[data-ocultas~="snaps"] .c-snaps, .ranking[data-ocultas~="obj"] .c-obj, .ranking[data-ocultas~="acarr"] .c-acarr { display: none; }
/* spec 012: columnas de uso, ocultas hasta que se piden en Columnas o en ?cols= */
.ranking:not([data-elegidas]) .u { display: none; }
@media (max-width: 640px) { .ranking th.u, .ranking td.u { width: 36px; } .ranking thead th.u { font-size: 10px; letter-spacing: 0; padding: 0 2px; } .ranking td.u .sd { white-space: normal; line-height: 1.1; } }
@media (min-width: 641px) { .ranking[data-elegidas] .vis { min-width: 120px; } }
.nivel th { max-width: 0; overflow: visible; }   /* el texto desborda sobre las celdas vacías de la fila y no ensancha la tabla */

/* spec 007: trades */
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
button.primario { background: var(--acento); color: var(--sobre-acento); border-color: var(--acento); }
button.primario:hover { background: var(--acento); filter: brightness(1.08); }
.trades-controles { display: grid; gap: var(--e-3); max-width: 760px; }
.control { display: grid; gap: var(--e-1); margin: 0; padding: 0; border: 0; min-width: 0; }
.control > label, .control legend { font-weight: 650; font-size: var(--t-14); padding: 0; }
.control select { height: 44px; max-width: 100%; padding: 0 var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); font: inherit; }
.modos { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.modos legend { width: 100%; margin-bottom: var(--e-1); }
.modos label { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; padding: 0 var(--e-3); border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie); font-size: var(--t-14); font-weight: 650; cursor: pointer; }
.modos label:has(input:checked) { border-color: var(--acento); background: var(--acento-suave); }
.modos input { accent-color: var(--acento); margin: 0; }
.trade { margin: var(--e-3) 0; border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: var(--radio-l); background: var(--superficie); box-shadow: var(--sombra); overflow-wrap: anywhere; }
.trade-no { border-left-color: var(--pierde); }
.trade-cab { display: grid; gap: var(--e-1); padding: var(--e-3) var(--e-4); }
.trade-cab p { margin: 0; }
.lado { display: inline-block; min-width: 5.8em; margin-right: var(--e-2); color: var(--tenue); font-size: var(--t-12); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.trade-cifras { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); }
.etq { padding: 1px 8px; border-radius: 999px; font-size: var(--t-12); font-weight: 750; }
.etq-justo { background: var(--acento-suave); color: var(--gana); }
.etq-conviene { background: var(--hundido); color: var(--texto); }
.etq-no { background: var(--pierde-suave); color: var(--pierde); }
.mov { font-size: var(--t-13); }
.trade details { border-top: 1px solid var(--borde); padding: 0 var(--e-4) var(--e-3); }
.trade summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; font-weight: 700; color: var(--acento); }
.trade h3 { margin: var(--e-3) 0 var(--e-1); font-size: var(--t-14); }
.trade details p { margin: 0 0 var(--e-2); max-width: 75ch; }
.veredicto { margin: 0 0 var(--e-2); padding: 0; list-style: none; font-size: var(--t-14); }
.veredicto li { display: flex; gap: var(--e-2); margin: var(--e-1) 0; }
.veredicto .marca-c { flex: none; font-weight: 800; }
.veredicto .si .marca-c { color: var(--gana); }
.veredicto .no .marca-c { color: var(--pierde); }
.trade .tabla-caja { max-width: 640px; }
.semanas td small { color: var(--tenue); }
.semanas td .gana, .semanas td .pierde { margin-left: var(--e-1); font-size: var(--t-12); }
@media (max-width: 640px) {
  .semanas th, .semanas td { padding: 0 var(--e-2); font-size: var(--t-12); }
  .semanas td .gana, .semanas td .pierde { display: block; margin: 0; line-height: 1.2; }
  .semanas td small { display: block; line-height: 1.2; }
}
.mano { display: grid; gap: var(--e-4); }
@media (min-width: 768px) { .mano { grid-template-columns: 1fr 1fr; } .mano button { grid-column: 1 / -1; justify-self: start; } }
.mano fieldset { margin: 0; padding: var(--e-3); min-width: 0; border: 1px solid var(--borde); border-radius: var(--radio-l); background: var(--superficie); }
.mano legend { padding: 0 var(--e-1); font-weight: 700; }
.casillas { margin: 0; padding: 0; list-style: none; }
.casilla { display: flex; align-items: center; gap: var(--e-3); min-height: 44px; padding: var(--e-1) 0; border-bottom: 1px solid var(--borde); cursor: pointer; }
.casillas li:last-child .casilla { border-bottom: 0; }
.casilla input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--acento); }
.casilla .q { display: grid; min-width: 0; }
.casilla b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.casilla small { color: var(--tenue); font-size: var(--t-12); }
.casilla small .pos { margin-right: var(--e-1); }
.casilla.apagada { cursor: default; color: var(--tenue); }
.ok-fuerte { color: var(--gana); font-weight: 700; }
.trades-metodo { margin-top: var(--e-8); }
.trades-metodo h2 { margin: 0 0 var(--e-1); font-size: var(--t-18); color: var(--texto); }
.trades-metodo p { max-width: 75ch; }

/* spec 012: uso por semana y tendencias */
.uso { margin-top: var(--e-8); }
.uso h2, .tend h2 { font-size: var(--t-18); margin: 0 0 var(--e-3); display: flex; align-items: center; gap: var(--e-2); }
.tend { margin-top: var(--e-6); scroll-margin-top: var(--e-4); }
.tend h3 { font-size: var(--t-14); color: var(--tenue); margin: var(--e-4) 0 var(--e-2); text-transform: uppercase; letter-spacing: .06em; }
.uso-barras { display: flex; align-items: flex-end; gap: var(--e-1); height: 92px; margin: 0 0 var(--e-3); padding: var(--e-2); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); overflow: hidden; }
.uso-barras span { flex: 1 1 0; min-width: 0; max-width: 44px; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; }
.uso-barras b { font: 700 var(--t-12)/1 var(--letra-num); color: var(--texto); margin-bottom: 2px; }
.uso-barras span::before { content: ""; order: 1; width: 100%; height: calc(var(--v) * 52px); min-height: 2px; border-radius: 3px 3px 0 0; background: var(--banda); }
.uso-barras i { order: 2; font-style: normal; font-size: var(--t-12); color: var(--tenue); margin-top: 2px; }
.uso-antes { margin-top: var(--e-4); }
.uso-antes summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 700; }
.uso-tabla .sem, .tend-tabla .jug { position: static; }
.pie p { margin: 0 0 var(--e-2); }
@media (max-width: 640px) {
  .uso-tabla { table-layout: fixed; }
  .uso-tabla th.num, .uso-tabla td.num, .tend-tabla th.num, .tend-tabla td.num { width: 44px; }
  .uso-tabla thead th, .tend-tabla thead th { font-size: 10px; letter-spacing: 0; padding: 0 2px; white-space: normal; line-height: 1.15; }
  .tend-tabla { table-layout: fixed; }
}

/* spec 013: glosario por columna (Popover del navegador), CSV, acuerdo e índices */
button.glosa { appearance: none; display: inline; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 0; background: none; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; text-align: inherit; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
button.glosa:hover { background: none; color: var(--texto); }
.glosa-pop { max-width: min(92vw, 380px); margin: auto; padding: var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); box-shadow: 0 12px 32px rgb(14 23 38 / .22); font-size: var(--t-14); line-height: 1.5; }
.glosa-pop p { margin: 0; }
.glosa-pop::backdrop { background: rgb(14 23 38 / .25); }
.csv, .csv-mini { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); font-weight: 650; font-size: var(--t-14); text-decoration: none; white-space: nowrap; }
.csv::before { content: "\2193"; margin-right: var(--e-2); color: var(--acento); font-weight: 800; }
.csv:hover, .csv-mini:hover { background: var(--hundido); }
.acuerdo { font-size: var(--t-13); font-weight: 700; }
.acuerdo-alto { color: var(--gana); }
.acuerdo-medio { color: var(--tenue); }
.acuerdo-bajo { color: var(--pierde); }
.ranking[data-ocultas~="acuerdo"] .c-acuerdo { display: none; }
.indice { margin: var(--e-4) 0 var(--e-6); }
.indice h2 { font-size: var(--t-22); margin: var(--e-4) 0 var(--e-3); }
.indice h3 { font-size: var(--t-16); margin: var(--e-4) 0 var(--e-2); }
.indice-lista { display: grid; gap: var(--e-2); margin: 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .indice-lista { grid-template-columns: repeat(2, 1fr); } }
.indice-lista li { display: flex; gap: var(--e-2); min-width: 0; }   /* spec 025: sin esto la tarjeta ROS ensanchaba la página a 390 px */
.indice-pos { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--e-3); min-height: 52px; padding: var(--e-2) var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); color: var(--texto); text-decoration: none; }
.indice-pos:hover { background: var(--hundido); }
.indice-pos > span:not(.pos), .indice-pos > b { flex: 1; min-width: 0; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.indice-pos small { color: var(--tenue); text-align: right; line-height: 1.25; }
.csv-mini { padding: 0 var(--e-3); }
.indice-grupo { margin-bottom: var(--e-2); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.indice-grupo summary { display: flex; align-items: center; gap: var(--e-3); min-height: 48px; padding: 0 var(--e-3); font-weight: 700; cursor: pointer; }
.indice-jug { columns: 16rem; margin: 0; padding: 0 var(--e-3) var(--e-3); list-style: none; }
.indice-jug li { display: flex; align-items: center; gap: var(--e-2); min-height: 44px; break-inside: avoid; }
.indice-jug small { color: var(--tenue); }
/* Spec 014: rivales y start/sit */
.fac { background: var(--ff); color: var(--ft); }
.fac-5 { --ff: var(--f5-f); --ft: var(--f5-t); } .fac-4 { --ff: var(--f4-f); --ft: var(--f4-t); } .fac-3 { --ff: var(--f3-f); --ft: var(--f3-t); }
.fac-2 { --ff: var(--f2-f); --ft: var(--f2-t); } .fac-1 { --ff: var(--f1-f); --ft: var(--f1-t); }
td.fac small, .ss-tabla small { display: block; font-size: 11px; font-weight: 600; white-space: nowrap; }
.ss-tabla small { white-space: normal; line-height: 1.3; }
.ss-tabla thead th.num { white-space: normal; overflow-wrap: anywhere; }
.ss-tabla th.jug { white-space: normal; overflow: visible; text-overflow: clip; min-width: 84px; line-height: 1.25; }
td.fac small { color: inherit; }
span.fac { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: var(--t-12); font-weight: 750; white-space: nowrap; }
.fac-leyenda { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: var(--e-3) 0 0; }
.rivales-tabla td.num, .rivales-tabla th.num { text-align: center; }
.elegidos { display: flex; flex-wrap: wrap; gap: var(--e-2); margin: 0 0 var(--e-3); }
.elegido { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 44px; padding: 0 0 0 var(--e-3); border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie); font-weight: 650; }
.elegido small { color: var(--tenue); }
.elegido button { min-width: 44px; min-height: 44px; border: 0; background: none; color: var(--texto); font-size: 20px; cursor: pointer; }
.veredicto { margin: var(--e-4) 0; padding: var(--e-4); border: 1px solid var(--acento); border-left-width: 6px; border-radius: var(--radio); background: var(--acento-suave); }
.veredicto .pon { margin: 0; font-size: var(--t-20, 20px); font-weight: 800; color: var(--texto); }
.ss-tabla th.jug { position: sticky; left: 0; z-index: 1; background: var(--superficie); text-align: left; }
.ss-tabla thead th.num { vertical-align: top; min-width: 88px; }
.ss-tabla thead th small { color: var(--tenue); }
.ss-tabla td.num { text-align: center; }
.ss-tabla .gana-col { background: var(--acento-suave); }
.marca-ss { display: block; margin-top: 2px; font-size: 11px; font-weight: 750; color: var(--acento); }
.marca-ss.techo { color: var(--oro); }
button.enlace { min-height: 44px; padding: 0; border: 0; background: none; color: var(--acento); font: inherit; font-weight: 700; text-decoration: underline; cursor: pointer; }
.boton { display: inline-grid; place-items: center; min-height: 44px; padding: 0 var(--e-4); border-radius: 999px; background: var(--acento); color: var(--sobre-acento); font-weight: 750; text-decoration: none; }

/* spec 015: roles, percentiles y lesiones */
.jug-rol { margin: 0 0 var(--e-3); font-size: var(--t-14); color: var(--tenue); }
.jug-rol b { color: var(--texto); }
.equipos { display: flex; flex-wrap: wrap; gap: var(--e-1); margin-top: var(--e-3); }
.equipos a { display: grid; place-items: center; min-width: 52px; min-height: 44px; padding: 0 var(--e-2); border: 1px solid var(--borde); border-radius: var(--radio-s); background: var(--superficie); color: var(--texto); text-decoration: none; font-weight: 750; font-size: var(--t-14); }
/* spec 041: filtros de /noticias/ */
.filtros { margin-top: var(--e-2); }
.filtros a[aria-current] { border-color: var(--acento); background: var(--acento-suave); }
.filtro-eq { margin-top: var(--e-2); }
.filtro-eq summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-weight: 750; }
.not-tit { margin: 0 0 var(--e-1); font-size: var(--t-16); }
.eq-sec { margin-top: var(--e-6); scroll-margin-top: var(--e-4); }
.eq-sec h2, .pctl-sec h2 { font-size: var(--t-18); margin: 0 0 var(--e-3); }
.eq-sec h2 small { font-size: var(--t-13); font-weight: 500; color: var(--tenue); margin-left: var(--e-2); }
.roles-tabla .jug, .les-tabla .jug { position: static; }
.rol { color: var(--texto); }
.rol-0 { color: var(--gana); }
.tenue { color: var(--tenue); }
.les-tabla td:not(.jug) { white-space: nowrap; }
.les-tabla td.prac { white-space: normal; line-height: 1.3; }   /* spec 037: un renglón por día, la fila crece */
.les-tabla td.prac span { display: block; }
.pctl-sec { margin-top: var(--e-8); }
.pctl { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-3); }
.pctl li { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: var(--e-3); row-gap: var(--e-1); padding: var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.pctl-n { font-weight: 750; }
.pctl-v { font: 700 var(--t-16)/1.2 var(--letra-num); text-align: right; }
.pctl-b { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 3ch; align-items: center; gap: var(--e-2); }
.pctl-barra { display: block; height: 10px; border-radius: 999px; background: linear-gradient(to right, var(--banda) calc(var(--v) * 100%), var(--riel) 0); }
.pctl-p { font: 700 var(--t-14)/1 var(--letra-num); text-align: right; }
.pctl li p { grid-column: 1 / -1; margin: 0; font-size: var(--t-13); color: var(--tenue); }
@media (min-width: 768px) {
  .pctl li { grid-template-columns: 11rem 5rem 1fr; }
  .pctl-b { grid-column: auto; }
  .pctl-v { text-align: left; }
}
@media (max-width: 640px) {
  .roles-tabla { table-layout: fixed; }
  .roles-tabla th.num, .roles-tabla td.num { width: 44px; }
  .roles-tabla thead th { font-size: 10px; letter-spacing: 0; padding: 0 2px; white-space: normal; line-height: 1.15; }
}

/* spec 017: boletín */
.bol-sec { margin-top: var(--e-6); scroll-margin-top: var(--e-4); }
.bol-sec h2 { font-size: var(--t-18); margin: 0 0 var(--e-2); }
.bol-sec h2 small { font-size: var(--t-13); font-weight: 500; color: var(--tenue); margin-left: var(--e-2); }
.bol-lista { list-style: none; margin: var(--e-3) 0 0; padding: 0; display: grid; gap: var(--e-2); }
.bol-nota { padding: var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.bol-nota p { margin: 0; }
.bol-quien { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2); margin-bottom: var(--e-1); }
.bol-quien .nombre { font-weight: 750; }
.bol-quien .eq { color: var(--tenue); font-size: var(--t-13); }
.bol-dir { margin-left: auto; font-size: var(--t-13); }
.bol-mal { color: var(--pierde); }
.bol-bien { color: var(--gana); }
.bol-pie { margin-top: var(--e-1); font-size: var(--t-13); color: var(--tenue); }
.jug-noticia { margin: 0 0 var(--e-3); font-size: var(--t-14); color: var(--tenue); }
.jug-noticia b { color: var(--texto); }

/* spec 033: artículos. Reusa el boletín (bol-*) para las notas; aquí sólo índice, fuente y cierre. */
.articulo .titulo h1 { font-size: clamp(1.45rem, 5.5vw, 2.2rem); line-height: 1.1; overflow-wrap: anywhere; }
.art-compartir { font-size: var(--t-14); color: var(--tenue); }
.art-fuente { margin-top: var(--e-2); font-size: var(--t-13); color: var(--tenue); }
.art-significa ul { margin: var(--e-2) 0 0; padding-left: 1.2em; display: grid; gap: var(--e-2); max-width: 70ch; }
.art-juego { margin-top: var(--e-6); }
.art-lista { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: grid; gap: var(--e-3); }
.art-lista li { padding: var(--e-3) var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.art-lista h3 { margin: 0 0 var(--e-1); font-size: var(--t-18); line-height: 1.25; }
.art-lista h3 a { color: var(--texto); }
.art-lista .nota { margin: 0; }

/* spec 004: ROS. Pts ROS, Playoffs y Cambio caben en 390 px; Pts/PJ y Desc. salen en pantalla ancha. */
@media (max-width: 640px) {
  .ranking.ros th.rn, .ranking.ros td.rn { width: 62px; }
  .ranking.ros th.rn { letter-spacing: 0; font-size: 10px; }
  .ranking.ros th.rn .glosa { letter-spacing: 0; font-size: 10px; }
}

/* spec 019: reportes de datos. Tabla ancha que se desplaza en su caja; el nombre queda fijo y legible a 390 px. */
.ranking.reporte-tabla { table-layout: auto; width: max-content; min-width: 100%; }
.reporte-tabla th, .reporte-tabla td { padding: 0 var(--e-2); }
.reporte-tabla th.jug, .reporte-tabla td.jug { width: 132px; min-width: 132px; max-width: 132px; }
.reporte-tabla th.num, .reporte-tabla td.num { width: auto; min-width: 44px; }
.reporte-tabla th.lugar, .reporte-tabla td.lugar { min-width: 28px; width: 28px; }
.reporte-tabla thead th { white-space: nowrap; font-size: 11px; }
.reporte-tabla .glosa { white-space: nowrap; }
.reporte-tabla th.txt, .reporte-tabla td.txt { text-align: left; white-space: nowrap; }   /* spec 021: ruta común */

/* spec 025: en el teléfono, cada fila del ranking semanal en dos renglones: arriba lugar, nombre, proyección y real; abajo la
   cancha con piso y techo en sus extremos. Con columnas elegidas (?cols=) vuelve la tabla de un renglón. K, DEF e IDP no tienen cancha. */
@media (max-width: 640px) {
  .ranking[data-semana]:not([data-elegidas]):not(.sin-pt) { table-layout: auto; }
  .ranking[data-semana]:not([data-elegidas]):not(.sin-pt) thead tr,
  .ranking[data-semana]:not([data-elegidas]):not(.sin-pt) tbody tr:not(.nivel) { display: grid; grid-template-columns: 28px 60px minmax(0, 1fr) 48px; grid-template-areas: "l j j p" "l e v v"; column-gap: var(--e-2); align-items: center; padding: 0 var(--e-3) 0 var(--e-2); }
  .ranking[data-semana].con-real:not([data-elegidas]) thead tr,
  .ranking[data-semana].con-real:not([data-elegidas]) tbody tr:not(.nivel) { grid-template-columns: 28px 60px minmax(0, 1fr) 44px 44px 36px; grid-template-areas: "l j j p r t" "l e v v v v"; }
  .ranking[data-semana]:not([data-elegidas]):not(.sin-pt) thead tr { background: var(--hundido); }
  .ranking[data-semana]:not([data-elegidas]):not(.sin-pt) tbody tr:not(.nivel) { padding-top: var(--e-2); padding-bottom: var(--e-3); border-bottom: 1px solid var(--borde); }
  .ranking[data-semana]:not([data-elegidas]):not(.sin-pt) tbody tr:not(.nivel):hover { background: var(--hundido); }
  .ranking[data-semana]:not([data-elegidas]):not(.sin-pt) :is(th, td) { width: auto; height: auto; padding: 0; border: 0; background: transparent; }
  .ranking[data-semana]:not([data-elegidas]):not(.sin-pt) thead th { height: 36px; }
  .ranking[data-semana]:not([data-elegidas]):not(.sin-pt) .lugar { grid-area: l; }
  .ranking[data-semana]:not([data-elegidas]):not(.sin-pt) td.lugar { align-self: start; padding-top: 2px; }
  .ranking[data-semana]:not([data-elegidas]):not(.sin-pt) .jug { grid-area: j; position: static; }
  .ranking[data-semana]:not([data-elegidas]):not(.sin-pt) .proy { grid-area: p; }
  .ranking[data-semana]:not([data-elegidas]):not(.sin-pt) td.ver-c { grid-area: e; align-self: start; padding-top: var(--e-2); }   /* spec 034 */
  .ranking[data-semana]:not([data-elegidas]):not(.sin-pt) thead .ver-c { display: none; }
  .ranking[data-semana]:not([data-elegidas]):not(.sin-pt) .c-real { grid-area: r; }
  .ranking[data-semana]:not([data-elegidas]):not(.sin-pt) .c-termino { grid-area: t; }
  .ranking[data-semana]:not([data-elegidas]):not(.sin-pt) :is(.c-piso, .c-techo, .ancha, .u, thead .vis) { display: none; }
  .ranking[data-semana]:not([data-elegidas]):not(.sin-pt) tbody .vis { grid-area: v; display: block; min-width: 0; padding-top: var(--e-2); }
  .ranking[data-semana]:not([data-elegidas]):not(.sin-pt) .extremos { display: block; }
  .ranking[data-semana]:not([data-elegidas]):not(.sin-pt) tr.nivel { display: block; }
  .ranking[data-semana]:not([data-elegidas]):not(.sin-pt) tr.nivel th { display: block; max-width: none; height: auto; padding: var(--e-5) var(--e-2) 6px; border-bottom: 2px solid var(--pt, var(--acento)); }
  .ranking[data-semana]:not([data-elegidas]):not(.sin-pt) tr.nivel td { display: none; }
  .ranking[data-elegidas] td.lugar, .ranking[data-elegidas] td.proy { font-size: 1rem; }
}

/* spec 030: formatos de liga y dynasty */
.pos-superflex, .formato-sel { --pf: var(--qb-f); --pt: var(--qb-t); }
.valor-barra { position: relative; display: block; height: 14px; border-radius: 3px; background: var(--riel); overflow: hidden; }
.valor-barra::before { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); background: var(--banda-suave); border-right: 2px solid var(--banda); box-sizing: border-box; }
/* Spec 028: gráficas en SVG. Color de la posición (--pt, AA sobre la superficie) y forma: el punto no depende sólo del color.
   En el teléfono se ven menos nombres, con letra más grande (et-angosto); el viewBox escala al ancho y nunca desborda. */
.graf { margin: var(--e-4) 0; padding: var(--e-3); border: 1px solid var(--borde); border-radius: var(--radio-l); background: var(--superficie); max-width: 760px; }
.graf-svg { display: block; width: 100%; height: auto; font-family: var(--letra); }
.graf-escalera .graf-svg { max-width: 640px; }
.graf .rejilla line { stroke: var(--riel); stroke-width: 1; }
.graf .eje text { fill: var(--tenue); font-size: 12px; }
.graf .eje .eje-t { fill: var(--texto); font-weight: 650; }
.graf .et text { fill: var(--texto); font-size: 12px; paint-order: stroke; stroke: var(--superficie); stroke-width: 4px; stroke-linejoin: round; }
.graf .et-angosto { display: none; }
.graf .guia { stroke: var(--tenue); stroke-width: .75; }
.graf .corte { stroke: var(--borde); stroke-width: 1.5; stroke-dasharray: 4 3; }
.graf .grupo-t { fill: var(--pt); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.graf .diagonal { stroke: var(--tenue); stroke-width: 1.5; stroke-dasharray: 6 4; }
.graf .b-elite, .graf .b-titular, .graf .p-encima { fill: var(--pt); }
.graf .b-flex { fill: var(--superficie); stroke: var(--pt); stroke-width: 2; }
.graf .b-resto { fill: var(--superficie); stroke: var(--tenue); stroke-width: 1.5; }
.graf .p-debajo { fill: var(--superficie); stroke: var(--pt); stroke-width: 2; }
.graf .linea { fill: none; stroke-width: 2.5; }
.graf .linea.cv-real { stroke: var(--pt); }
.graf .linea.cv-proy, .graf .linea.cv-parte { stroke: var(--tenue); stroke-width: 2; }
.graf .discontinua { stroke-dasharray: 6 4; }
.graf circle.cv-real { fill: var(--pt); }
.graf .cv-proy, .graf .cv-parte { fill: var(--superficie); stroke: var(--tenue); stroke-width: 2; }
.graf-leyenda { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); margin-top: var(--e-2); color: var(--tenue); font-size: var(--t-13); }
.graf-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.graf-ley { width: 16px; height: 16px; flex: none; }
.ley-diag { display: inline-block; width: 18px; border-top: 2px dashed var(--tenue); }
.graf-datos { margin: var(--e-3) 0; }
.graf-datos > summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; color: var(--acento); }
.graf-card > a { color: var(--texto); text-decoration: none; display: block; }
.graf-card > a b { font-size: var(--t-18); }
.graf-card > span { display: block; color: var(--tenue); font-size: var(--t-14); margin: var(--e-1) 0 var(--e-3); }
.graf-portada > .nota { margin: 0; }
.como-va figure { margin-top: var(--e-3); }
@media (max-width: 640px) {
  .graf { padding: var(--e-2); }
  .graf .et-ancho { display: none; }
  .graf .et-angosto { display: inline; }
  .graf .et-angosto text { font-size: 20px; }
  .graf .eje text, .graf .grupo-t { font-size: 19px; }
}
/* Spec 029: tablero de redraft. Teléfono: lista por ronda. Ancho: cuadrícula de rondas por equipo, serpiente (ronda par de vuelta). */
.tablero-caja { margin-top: var(--e-4); }
.equipos-cab { display: none; }
.ronda h2 { margin: var(--e-5) 0 var(--e-2); font: 800 var(--t-16)/1.2 var(--letra-titulo); text-transform: uppercase; letter-spacing: .04em; }
.picks { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.pick { display: grid; grid-template-columns: 3.2em 1fr; gap: 0 var(--e-2); align-items: baseline; padding: 6px var(--e-3); border-left: 4px solid var(--pt); border-radius: var(--radio-s); background: var(--superficie); min-width: 0; }
.pick .et { font: 700 var(--t-14) var(--letra-num); }
.pick .nombre { font-weight: 700; overflow-wrap: break-word; hyphens: auto; min-width: 0; }
.pick .pts { font: var(--t-13) var(--letra-num); }
.pick .eq, .pick .pts, .pick .otra { grid-column: 2; font-size: var(--t-13); color: var(--tenue); }
.pick .eq .pos { margin-right: var(--e-1); }
@media (min-width: 1000px) {
  .tablero-caja { overflow-x: auto; border: 1px solid var(--borde); border-radius: var(--radio-l); background: var(--superficie); padding: var(--e-2); }
  .tablero { display: grid; gap: var(--e-1); min-width: calc(var(--equipos) * 78px + 40px); }
  .equipos-cab, .ronda, .picks { display: grid; grid-template-columns: 32px repeat(var(--equipos), minmax(0, 1fr)); gap: var(--e-1); }
  .equipos-cab { list-style: none; margin: 0; padding: 0; font-size: var(--t-12); font-weight: 750; color: var(--tenue); text-align: center; }
  .ronda { grid-template-columns: 32px 1fr; }
  .ronda h2 { margin: 0; display: grid; place-items: center; font-size: var(--t-14); }
  .ronda h2 span { display: none; }
  .picks { grid-template-columns: repeat(var(--equipos), minmax(0, 1fr)); }
  .ronda:nth-of-type(even) .picks { direction: rtl; }
  .pick { direction: ltr; display: flex; flex-direction: column; gap: 1px; padding: 4px 6px; border-left: 0; border-top: 3px solid var(--pt); background: var(--pf); font-size: var(--t-12); line-height: 1.25; }
  .pick .et, .pick .pts, .pick .eq, .pick .otra { font-size: 11px; }
  .pick .nombre { color: var(--texto); }
  .pick .eq .pos { display: none; }
  .pick .eq, .pick .otra { color: var(--pt); }
}

/* spec 034: veredicto, tendencia y chapa de lesión en letra; texto para lectores de pantalla */
.sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ver { display: inline-block; min-width: 4.6em; padding: 2px 6px; border: 1px solid currentColor; border-radius: var(--radio-s); text-align: center; font-size: var(--t-12); font-weight: 800; line-height: 1.3; }
.ver-titular { color: var(--gana); background: var(--gana-suave); }
.ver-duda { color: var(--oro); background: var(--hundido); }
.ver-banca { color: var(--tenue); background: transparent; border-style: dashed; }
.ranking .ver-c { width: 1%; }
.tend { margin-left: var(--e-1); font-size: 11px; font-weight: 800; white-space: nowrap; }
.tend.sube { color: var(--gana); }
.tend.baja { color: var(--pierde); }
.acierto { margin: var(--e-3) 0 0; max-width: 80ch; font-size: var(--t-14); }
.controles.bajo { margin-top: var(--e-4); }
.ranking .nombre, .ranking .eq { display: block; line-height: 1.25; }   /* nombre arriba, equipo abajo: deja sitio al veredicto */
.ranking .eq { margin: 0; }
.ranking thead th.ver-c { letter-spacing: 0; }
.ranking .ver-c { padding: 0 var(--e-2); }
.ver-mini { display: none; margin-right: var(--e-1); }
@media (max-width: 640px) {
  .ranking th.ver-c, .ranking td.ver-c { width: 64px; padding: 0 2px; text-align: center; }
  .ranking .ver { min-width: 0; width: 100%; padding: 2px 0; font-size: 11px; box-sizing: border-box; }
  .ranking thead th.ver-c { font-size: 10px; letter-spacing: 0; }
  .ranking[data-elegidas] .ver-c { display: none; }   /* con columnas elegidas en el teléfono el veredicto va junto al equipo */
  .ranking[data-elegidas] .ver-mini { display: inline-block; min-width: 0; padding: 0 4px; font-size: 10px; }
}

/* spec 036: listas de titular y banca, waivers y qué hacer en tu liga */
.tb-grupo h2 { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2); }
.tb-grupo h2 .ver { font-size: var(--t-16); }
.tb-grupo h2 small { color: var(--tenue); font-size: var(--t-14); font-weight: 500; }
.tb-lista { margin: 0; padding: 0; list-style: none; border: 1px solid var(--borde); border-radius: var(--radio-l); background: var(--superficie); }
.tb-fila { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; gap: var(--e-2); align-items: start; min-height: var(--fila); padding: var(--e-2) var(--e-3); border-top: 1px solid var(--borde); }
.tb-fila:first-child { border-top: 0; }
.tb-l { color: var(--tenue); font-weight: 700; font-size: var(--t-13); padding-top: 2px; }
.tb-j a { font-weight: 650; color: inherit; }
.tb-j small { color: var(--tenue); }
.tb-razon { display: block; margin-top: 2px; color: var(--tenue); font-size: var(--t-13); }
.tb-p { font: 800 1.2rem/1 var(--letra-titulo); font-stretch: condensed; font-variant-numeric: tabular-nums; padding-top: 2px; }
.tb-indice { display: grid; gap: var(--e-3); margin: var(--e-4) 0; padding: 0; list-style: none; }
@media (min-width: 768px) { .tb-indice { grid-template-columns: repeat(2, 1fr); } }
.tb-tarjeta { display: grid; gap: 4px; min-height: 44px; padding: var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio-l); background: var(--superficie); color: var(--texto); text-decoration: none; }
.tb-tarjeta b { color: var(--pt); font: 800 1.5rem/1 var(--letra-titulo); font-stretch: condensed; }
.tb-tarjeta small { color: var(--tenue); }
.ss-tabla thead th .ver { display: inline-block; margin-top: 4px; }
.ss-tabla thead th .tb-razon { white-space: normal; font-weight: 500; text-transform: none; letter-spacing: 0; }
.trades-mini { padding-left: 1.2em; }
.trades-mini li { margin: var(--e-2) 0; }
/* spec 038: "Peor caso" y "Mejor caso" caben en dos renglones */
.ranking thead th.pt, .liga-tabla thead th.pt { white-space: normal; line-height: 1.1; }

/* spec 039: una sola interfaz de Rankings: tres pestañas, chips con Todos, el draft dentro de Resto de temporada y la ayuda plegada */
.vistas { display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 0 var(--e-3); border-bottom: 2px solid var(--borde); }
.vistas a { display: grid; place-items: center; min-height: 44px; padding: 0 var(--e-2); color: var(--tenue); font-weight: 750; font-size: var(--t-14); text-align: center; text-decoration: none; line-height: 1.15; }
.vistas a[aria-current] { color: var(--texto); box-shadow: inset 0 -3px 0 var(--acento); }
.vistas a:hover { color: var(--texto); }
.draft-hoy { margin: 0 0 var(--e-3); font-size: var(--t-14); font-weight: 650; }
details.ayuda { margin: var(--e-3) 0; padding: var(--e-2) var(--e-4); border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
details.ayuda > summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; font-weight: 750; }
details.ayuda .leyenda { margin-bottom: var(--e-2); }

/* Spec 044: sleepers en la portada, una franja que no alarga la página. */
.mirar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-2); margin: var(--e-3) 0 0; }
.mirar a { display: grid; min-width: 0; padding: 6px 10px; border: 1px solid var(--borde); border-radius: var(--radio-s); background: var(--superficie); color: var(--texto); text-decoration: none; }
.mirar a b { color: var(--acento); font-size: var(--t-14); }
.mirar a span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }