/* Pizarra Criolla
   Layout: una columna de ancho de teléfono. La pizarra del estadio es la única pieza fuerte: el azul de la
   bandera con sus 8 estrellas (una por equipo), números blancos y bombillos amarillos; el rojo queda para
   lo que está en vivo y los avisos. Todo lo demás es hoja de anotación tranquila. Barra de secciones fija abajo.
   Sistema: 8 tamaños de letra en rem (respetan la letra que el usuario eligió en su teléfono), 5 espacios,
   3 radios, un solo azul de acción, una sola insignia por equipo. Las vistas agregan lo suyo en css/*.css. */
:root {
  --flag-y: #ffcc00;     /* bandera: amarillo */
  --flag-b: #00247d;     /* bandera: azul */
  --flag-r: #cf142b;     /* bandera: rojo */
  --paper: #f3f5f9;      /* fondo: hoja de anotación, sesgo azul */
  --card: #ffffff;       /* superficies */
  --ink: #0d1530;        /* texto principal */
  --ink-2: #414c66;      /* texto secundario */
  --muted: #5f6984;      /* ejes, etiquetas (contraste 5:1 sobre el fondo) */
  --rule: #dde2ec;       /* hairlines y esqueletos de carga */
  --rule-2: #c8cfdd;
  --board: #00247d;      /* la pizarra: azul de la bandera */
  --board-2: #0d3592;    /* celdas de la pizarra */
  --chalk: #ffffff;      /* números y estrellas */
  --chalk-dim: #aebce6;
  --bulb: #ffcc00;       /* bombillos B-S-O: amarillo de la bandera */
  --bulb-off: #1b4096;
  --live: #cf142b;       /* en vivo y avisos: el único rojo de la app */
  --stitch: var(--live); /* nombre anterior de --live */
  --accent: #00247d;     /* un solo azul para tocar: el de la bandera */
  --accent-soft: #e2e7f3; /* --accent al 12 % sobre la tarjeta: píldora de la pestaña activa */
  --on-accent: #ffffff;
  --badge-bg: #00247d;   /* insignia de equipo */
  --badge-fg: #ffffff;
  --away: #b98600;       /* visitante en los gráficos (dorado; validado para daltonismo) */
  --home: #1f4fb5;       /* home club en los gráficos (azul) */
  --viz-line: #414c66;
  --good: #157a3a;
  --bad: var(--live);    /* avisos (no derrotas: esas van en tinta secundaria) */
  --q1: #ffcc00; --q1-ink: #0d1530;   /* tabla: zona directa (amarillo de la bandera) */
  --q2: #dbe3f6; --q2-ink: #00247d;   /* tabla: comodín */
  /* percentiles: de azul (bajo) a dorado (alto); todos con 3:1 o más contra la tarjeta (la bola se distingue) */
  --pc-c2: #1f4fb5; --pc-c1: #6a86c4; --pc-m: #878ea0; --pc-h1: #a88a2a; --pc-h2: #b98600;
  /* gráficos del juego (css/graficos.css) */
  --g-li: #848ca0;       /* barras de presión (LI): 3,4:1 contra la tarjeta y 3,1:1 contra la hoja */
  --g-on-away: #1a1405;  /* número sobre la ficha dorada del visitante */
  --g-on-home: #ffffff;  /* número sobre la ficha azul del home club */
  --g-field: #f6f8f5;    /* mapa de batazos: grama, apenas teñida (el punto dorado queda a 3:1) */
  --g-dirt: #faf7f2;     /* mapa de batazos: tierra del cuadro (ídem) */
  /* la temporada fecha por fecha: los equipos no marcados (3,1:1 contra la tarjeta, lo que pide WCAG 1.4.11 para lo que
     hay que ver; el marcado va en --accent, más grueso y con halo) */
  --g-bump: #8a92a6;
  /* mapa de calor: un solo tono (el azul de la app), de poco a mucho, en 6 pasos, validado (--ordinal) contra la
     tarjeta; el número de cada celda en su color, a 4,77:1 o más */
  --g-heat-1: #a2b6e1; --g-heat-2: #849cd2; --g-heat-3: #6782c4; --g-heat-4: #4968b4; --g-heat-5: #2947a0; --g-heat-6: #0d238a;
  --g-on-heat-1: #0d1530; --g-on-heat-2: #0d1530; --g-on-heat-3: #0d1530; --g-on-heat-4: #ffffff; --g-on-heat-5: #ffffff; --g-on-heat-6: #ffffff;
  /* modo TV: la curva sobre la pizarra azul (los colores de los gráficos no se ven ahí); más de 4,5:1 contra --board */
  --tv-away: #e3b31c; --tv-home: #9db8ff;
  --fav: #b98600;        /* Mi equipo: la estrella de la lista del día (3,2:1 contra la tarjeta) */
  --bulb-edge: #414c66;  /* borde de una base ocupada sobre la tarjeta (el amarillo solo da 1,5:1 contra el blanco) */
  --shadow: 0 1px 2px rgba(13, 21, 48, .06), 0 6px 18px rgba(13, 21, 48, .07);
  --stars: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 220 96'%3E%3Cpath fill='white' d='M13.4,74.9 L15.1,79.8 L20.3,79.9 L16.2,83.0 L17.6,87.9 L13.4,85.0 L9.2,87.9 L10.6,83.0 L6.6,79.9 L11.7,79.8Z M29.5,41.4 L31.2,46.3 L36.4,46.4 L32.3,49.5 L33.8,54.4 L29.5,51.5 L25.3,54.4 L26.8,49.5 L22.7,46.4 L27.8,46.3Z M56.8,16.1 L58.5,21.0 L63.6,21.1 L59.6,24.2 L61.0,29.2 L56.8,26.2 L52.6,29.2 L54.0,24.2 L49.9,21.1 L55.1,21.0Z M91.4,2.5 L93.1,7.4 L98.3,7.5 L94.2,10.6 L95.6,15.6 L91.4,12.6 L87.2,15.6 L88.7,10.6 L84.6,7.5 L89.7,7.4Z M128.6,2.5 L130.3,7.4 L135.4,7.5 L131.3,10.6 L132.8,15.6 L128.6,12.6 L124.4,15.6 L125.8,10.6 L121.7,7.5 L126.9,7.4Z M163.2,16.1 L164.9,21.0 L170.1,21.1 L166.0,24.2 L167.4,29.2 L163.2,26.2 L159.0,29.2 L160.4,24.2 L156.4,21.1 L161.5,21.0Z M190.5,41.4 L192.2,46.3 L197.3,46.4 L193.2,49.5 L194.7,54.4 L190.5,51.5 L186.2,54.4 L187.7,49.5 L183.6,46.4 L188.8,46.3Z M206.6,74.9 L208.3,79.8 L213.4,79.9 L209.4,83.0 L210.8,87.9 L206.6,85.0 L202.4,87.9 L203.8,83.0 L199.7,79.9 L204.9,79.8Z'/%3E%3C/svg%3E");
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4h8L6 9z' fill='%23414c66'/%3E%3C/svg%3E");

  --font-display: "Big Shoulders Display", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", sans-serif;
  --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* escala tipográfica: 8 tamaños (a 16 px de letra base: 11,5 · 13 · 15 · 17 · 20 · 28 · 32 · 46).
     Big Shoulders solo de --fs-h2 para arriba (y en la insignia de equipo y las fichas tipo insignia). */
  --fs-cap: .72rem;      /* etiquetas en mayúsculas, ejes; nunca más chico que esto */
  --fs-sm: .8125rem;     /* texto secundario, tablas */
  --fs-body: .9375rem;   /* texto */
  --fs-lead: 1.0625rem;  /* nombres en tarjetas, texto destacado */
  --fs-h2: 1.25rem;      /* títulos de sección */
  --fs-num: 1.75rem;     /* números importantes */
  --fs-h1: 2rem;         /* título de pantalla */
  --fs-hero: 2.875rem;   /* carreras en la pizarra, cuenta regresiva */
  /* espacios y radios */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px;
  --r-s: 6px; --r-m: 12px; --r-l: 16px;
  /* movimiento: solo transform y opacity */
  --ease-out: cubic-bezier(.2, .8, .2, 1);        /* sale rápido y frena suave */
  --ease-rebote: cubic-bezier(.34, 1.56, .64, 1); /* un pelito de rebote, para números y bombillos */
  --t-toque: 90ms; --t-micro: 180ms; --t-pantalla: 260ms; --t-marcador: 420ms;
  --tabbar: calc(50px + .9rem); /* crece con la letra del teléfono */
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --flag-b: #2a55c9; /* el azul de la bandera se pierde sobre la noche; se aclara solo en la franja */
    --paper: #081026; --card: #111d3d; --ink: #eef1f8; --ink-2: #b7c0d8; --muted: #8b96b3;
    --rule: #24335c; --rule-2: #2f4070;
    --board: #0c3394; --board-2: #1641a6; --chalk: #ffffff; --chalk-dim: #b3c3ee; --bulb: #ffd21a; --bulb-off: #224aa8;
    --live: #f0475a; --accent: #ffcc00; --accent-soft: rgba(255, 204, 0, .16); --on-accent: #081026;
    --badge-bg: #1a47b3; --badge-fg: #ffffff;
    --away: #b88508; --home: #5b8ff0; --viz-line: #b7c0d8;
    --good: #4cc276;
    --q2: #1d3570; --q2-ink: #dbe3f6;
    /* marcadores con contraste de 3:1 o más contra la tarjeta */
    --pc-c2: #5b8ff0; --pc-c1: #6f86c0; --pc-m: #737a94; --pc-h1: #c9a43a; --pc-h2: #ffcc00;
    --g-li: #7d89a8; --g-on-home: #081026; --g-field: #16244a; --g-dirt: #1c2c55;
    --g-bump: #5f6a86; /* 3,07:1 contra la tarjeta de noche */
    /* de noche el mapa de calor se da vuelta: lo poco se hunde en la tarjeta y lo mucho se prende (número a 5,31:1 o más) */
    --g-heat-1: #2849ad; --g-heat-2: #4567c0; --g-heat-3: #6586d5; --g-heat-4: #86a3e6; --g-heat-5: #a9c0f6; --g-heat-6: #cfdeff;
    --g-on-heat-1: #ffffff; --g-on-heat-2: #ffffff; --g-on-heat-3: #081026; --g-on-heat-4: #081026; --g-on-heat-5: #081026; --g-on-heat-6: #081026;
    --tv-away: #ffd21a; --tv-home: #adc4ff;
    --fav: #ffcc00;
    --bulb-edge: #ffd21a;
    --shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .3);
    --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 4h8L6 9z' fill='%23b7c0d8'/%3E%3C/svg%3E");
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font: var(--fs-body)/1.45 var(--font-body);
  padding-bottom: calc(var(--tabbar) + env(safe-area-inset-bottom, 0px) + 12px);
  -webkit-tap-highlight-color: transparent;
}
[hidden] { display: none !important; }
a { color: var(--accent); text-decoration: none; }
/* el subrayado de :hover se queda pegado en el teléfono después de tocar: solo donde hay ratón */
@media (hover: hover) { a:hover { text-decoration: underline; } }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* :where no suma especificidad: las píldoras y tarjetas conservan su propio radio al recibir el foco */
:where(a, button, summary):focus-visible { border-radius: 4px; }
h1, h2, h3, h4 { text-wrap: balance; margin: 0; }
p { margin: 0; }
small { font: 400 var(--fs-sm)/1.3 var(--font-body); color: var(--muted); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- respuesta al toque ---------- */
/* La tarjeta se hunde un 2 % y los botones un 5 %. En iPhone :active necesita un touchstart (core.js). */
.gcard, .teams a, .glist a, .leaders li, .figs li, .btn, .chip, .db-btn, .tabs a {
  transition: transform var(--t-toque) var(--ease-out);
}
.gcard:active, .teams a:active, .glist a:active, .leaders li:active, .figs li:active { transform: scale(.98); }
.btn:active, .chip:active, .db-btn:active, .tabs a:active { transform: scale(.95); }
/* lo que se toca no se selecciona ni abre el menú de "copiar" al dejar el dedo (tablas y textos largos sí) */
.top, .tabs, .chips, .chip, .btn, .db-btn, .utabs, .seg, .gcard, .teams a, .glist a, .board, .countdown, .champ, .tchip {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* de la pizarra sí se copian la última jugada, el estadio y quién batea y quién lanza */
.board .lastplay, .board .bt-venue, .board .dc, .board .tn-ctx, .board .vs-out { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }

/* ---------- cabecera ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px var(--s3);
  padding: calc(env(safe-area-inset-top, 0px) + 6px) var(--s4) 6px;
  background: var(--paper);
}
/* franja tricolor bajo la cabecera, como la bandera en miniatura */
.top::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 6px; pointer-events: none;
  background: linear-gradient(to bottom, var(--flag-y) 0 33.4%, var(--flag-b) 33.4% 66.7%, var(--flag-r) 66.7% 100%);
}
/* el logotipo es el ícono de la app en miniatura: diamante blanco en un cuadrito azul.
   Sin espacio (pantalla angosta o letra grande), "Criolla" baja a una segunda línea; si aun así no cabe,
   la temporada (y la marca de en vivo) pasan abajo. Nunca empuja la página de lado. */
.brand {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  flex: 1 1 0%; min-width: min-content; max-width: max-content;
  font: 800 var(--fs-h2)/1 var(--font-display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink);
}
.brand:hover { text-decoration: none; }
.brand-mark { width: 30px; height: 30px; border-radius: 8px; background: var(--board); display: grid; place-items: center; flex: none; }
.brand-mark svg { display: block; }
.brand-t { display: flex; flex-wrap: wrap; column-gap: .28em; min-width: 0; line-height: .95; }
.brand em { font-style: normal; color: var(--accent); }
@media (max-width: 339.98px) {
  .brand em { display: none; }
  .top { padding-left: var(--s3); padding-right: var(--s3); column-gap: var(--s2); }
  .season select { padding: 0 26px 0 12px; min-width: calc(4em + 40px); background-position: right 10px center; }
}
.top-right { display: flex; align-items: center; gap: var(--s2); flex: none; margin-left: auto; }
.live-flag {
  position: relative; display: inline-flex; align-items: center; min-height: 26px;
  font: 700 var(--fs-cap)/1 var(--font-body); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
  color: #fff; background: var(--live); padding: 0 9px; border-radius: 999px;
}
.live-flag::after { content: ""; position: absolute; inset: -9px -4px; }
.live-flag:hover { text-decoration: none; }
.season select {
  -webkit-appearance: none; appearance: none;
  font: 600 var(--fs-sm)/1.2 var(--font-body); color: var(--ink);
  background: var(--card) var(--chev) no-repeat right 13px center / 11px 11px;
  border: 1px solid var(--rule-2); border-radius: 999px; min-height: 44px; padding: 0 32px 0 14px; cursor: pointer;
  min-width: calc(4em + 48px); /* lo que mide "2025-26": la píldora no salta cuando el "…" del arranque se llena */
}

/* ---------- contenedor ---------- */
/* --conn-h: el alto del aviso de conexión mientras se ve (core.js), para que no tape lo de arriba de la pantalla */
#view { max-width: 720px; margin: 0 auto; padding: calc(14px + var(--conn-h, 0px)) var(--s4) var(--s5); display: flex; flex-direction: column; gap: 20px; outline: none; }
#view > * { min-width: 0; }
.page-head { display: flex; flex-direction: column; gap: var(--s3); }
.page-head h1 { font: 800 var(--fs-h1)/1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.eyebrow { font: 700 var(--fs-cap)/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .09em; color: var(--muted); }
.sec { display: flex; flex-direction: column; gap: var(--s3); }
/* título de sección; la explicación queda detrás de la (i) */
.sec-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s2); }
.sec-head h2 { font: 800 var(--fs-h2)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .03em; }
.sh-i {
  display: grid; place-items: center; width: 44px; height: 44px; margin: -11px -11px -11px 0; padding: 0;
  border: 0; border-radius: 50%; background: none; color: var(--muted); cursor: pointer;
}
.sh-i svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.sh-i svg .dot { fill: currentColor; stroke: none; }
.sh-i[aria-expanded="true"] { color: var(--ink); }
.sh-i[aria-expanded="true"] svg .disc { fill: var(--ink); stroke: var(--ink); }
.sh-i[aria-expanded="true"] svg path { stroke: var(--paper); }
.sh-i[aria-expanded="true"] svg .dot { fill: var(--paper); }
.sec-sub { grid-column: 1 / -1; color: var(--ink-2); font-size: var(--fs-sm); margin-top: 6px; max-width: 62ch; }
.note { color: var(--muted); font-size: var(--fs-sm); max-width: 62ch; }
.fresh { color: var(--muted); font-size: var(--fs-sm); }
.fresh.off { color: var(--bad); }
.empty { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m); padding: 20px var(--s4); display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.empty-t { font-weight: 700; font-size: var(--fs-lead); }
.empty .btn + .btn { margin-left: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px;
  padding: 8px var(--s4); border-radius: 10px; border: 1px solid var(--accent);
  background: var(--accent); color: var(--on-accent); font: 600 var(--fs-body)/1.2 var(--font-body); cursor: pointer;
}
.btn:hover { text-decoration: none; }
@media (hover: hover) { .btn:hover { filter: brightness(1.05); } }
.btn.ghost { background: transparent; color: var(--accent); }

/* ---------- controles: chips para filtrar, pestañas subrayadas para cambiar de vista ---------- */
/* el relleno vertical deja sitio al área táctil de 44 px de cada chip (el contenedor recorta lo que se sale) */
.chips {
  display: flex; gap: 6px; overflow-x: auto; padding: 4px 0; margin: -4px 0; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 92%, transparent); mask-image: linear-gradient(90deg, #000 92%, transparent);
}
.chips::-webkit-scrollbar { display: none; }
/* espaciador del ancho de la zona que se desvanece: al llegar al final, el último chip queda fuera de la máscara */
.chips::after { content: ""; flex: 0 0 8%; }
.chip {
  position: relative; flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px;
  border-radius: 999px; border: 1px solid var(--rule-2);
  background: var(--card); color: var(--ink-2); font: 600 var(--fs-sm)/1.2 var(--font-body); white-space: nowrap;
}
.chip::after { content: ""; position: absolute; inset: -4px 0; }
.chip:hover { text-decoration: none; }
@media (hover: hover) { .chip:hover { border-color: var(--accent); } }
.chip.on { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

/* .utabs (y .seg, que se ve igual): contenedor de <a> o <button>; el activo lleva .on */
.utabs, .seg {
  display: flex; gap: var(--s5); max-width: 100%; overflow-x: auto; scrollbar-width: none;
  box-shadow: inset 0 -1px 0 var(--rule);
}
.utabs::-webkit-scrollbar, .seg::-webkit-scrollbar { display: none; }
.utabs > a, .utabs > button, .seg > a, .seg > button {
  position: relative; flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 2px; margin: 0;
  border: 0; border-radius: 0; background: none; color: var(--muted); font: 700 var(--fs-body)/1.2 var(--font-body);
  white-space: nowrap; cursor: pointer;
}
.utabs > a:hover, .seg > a:hover { text-decoration: none; }
@media (hover: hover) { .utabs > :hover, .seg > :hover { color: var(--ink); } }
.utabs > .on, .seg > .on { color: var(--ink); }
.utabs > .on::after, .seg > .on::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--accent);
}
.seg.mini { gap: var(--s4); }
.seg.mini > button, .seg.mini > a { font-size: var(--fs-sm); }

/* interruptor: <label class="tog"><input type="checkbox" role="switch"> Texto</label> */
.tog { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font: 600 var(--fs-body)/1.25 var(--font-body); color: var(--ink-2); cursor: pointer; }
.tog input[type=checkbox] { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--accent); }
.tog input[type=checkbox][role=switch] {
  -webkit-appearance: none; appearance: none; position: relative; width: 42px; height: 26px; border-radius: 999px;
  background: var(--muted); cursor: pointer;
}
.tog input[type=checkbox][role=switch]::before {
  content: ""; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--card); box-shadow: 0 1px 2px rgba(0, 0, 0, .25); transition: transform var(--t-micro) var(--ease-out);
}
.tog input[type=checkbox][role=switch]:checked { background: var(--accent); }
.tog input[type=checkbox][role=switch]:checked::before { transform: translateX(16px); background: var(--on-accent); }
.tog input[type=checkbox][role=switch]:focus-visible { outline-offset: 3px; border-radius: 999px; }

/* fila completa tocable: .rowlink en la fila y .stretch en su enlace principal; los demás enlaces quedan encima */
.rowlink { position: relative; }
.stretch::after { content: ""; position: absolute; inset: 0; }
.stretch:hover { text-decoration: none; }
.stretch:focus-visible { outline: none; }
.stretch:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: inherit; }
.rowlink a:not(.stretch), .rowlink button, .rowlink input, .rowlink select, .rowlink summary { position: relative; z-index: 1; }

/* ---------- insignia de equipo: una sola en toda la app (en lugar de logos) ---------- */
/* <span class="tchip [s|xl] [inv]">ABR</span>; inv (o dentro de la pizarra) para fondos azules */
.tchip, .bt-abbr {
  display: inline-grid; place-items: center; flex: none; min-width: 2.75em; height: 1.65em; padding: 0 .4em;
  border-radius: var(--r-s); background: var(--badge-bg); color: var(--badge-fg);
  font: 800 var(--fs-body)/1 var(--font-display); letter-spacing: .07em; text-indent: .07em; text-transform: uppercase;
  white-space: nowrap; vertical-align: middle; font-variant-numeric: normal;
}
.tchip.s { font-size: var(--fs-sm); border-radius: 5px; }
.tchip.xl { font-size: var(--fs-num); border-radius: 10px; }
.tchip.inv, .board .tchip, .countdown .tchip, .champ .tchip, .series-score .tchip, .bt-abbr { background: var(--chalk); color: var(--board); }
.tlink, .plink { color: var(--ink); font-weight: 600; }
@media (hover: hover) { .tlink:hover, .plink:hover { color: var(--accent); } }

/* ---------- esqueletos de carga (estáticos: sin brillo animado) ---------- */
.skel, .skel-in { display: flex; flex-direction: column; gap: 20px; }
.sk { display: block; flex: none; background: var(--rule); border-radius: var(--r-s); }
.board .sk { background: var(--board-2); }
.skel .bt-runs { color: var(--board-2); }
.sk-row { display: flex; align-items: center; gap: var(--s3); min-width: 0; overflow: hidden; }
.sk-col { display: flex; flex-direction: column; gap: var(--s2); min-width: 0; flex: 1; }
.sk-card { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m); padding: var(--s3) var(--s4); display: flex; flex-direction: column; gap: var(--s3); }
.sk-list { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m); }
.sk-list > .sk-row { padding: var(--s3) var(--s4); min-height: 56px; }
.sk-list > .sk-row + .sk-row { border-top: 1px solid var(--rule); }
/* tarjeta de juego: la misma rejilla de .gcard.gc (css/juegos.css), con la columna de estado tras una raya */
.sk-card.sk-gc { display: grid; grid-template-columns: minmax(0, 1fr) 5.5rem; gap: 0; padding: 0; }
.sk-gc-t { display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 10px 14px 10px 16px; min-width: 0; }
.sk-gc-t > .sk-row { min-height: 30px; gap: 10px; }
.sk-gc-s { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px 4px; border-left: 1px solid var(--rule); }
.sk-gc-f { grid-column: 1 / -1; display: flex; align-items: center; min-height: calc(var(--fs-sm) * 1.45 + 17px); padding: 0 14px 0 16px; border-top: 1px solid var(--rule); }
/* Maquetas con las clases de la pantalla real (juego y Tabla en core.js): un texto de muestra que no se ve ocupa lo
   mismo que el de verdad, también si parte en dos líneas; insignias, píldoras, flechas y enlaces, apagados; y nada
   de la maqueta se toca. */
.sk-t { color: transparent; background: var(--rule); border-radius: var(--r-s); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.board .sk-t { background: var(--board-2); }
.skel-in { pointer-events: none; }
.skel .tchip, .skel .bt-abbr { background: var(--rule); color: transparent; }
.skel .board .tchip, .skel .bt-abbr { background: var(--board-2); }
.skel .board .pill { background: var(--board-2); border-color: var(--board-2); color: transparent; }
.skel .crumbs a, .skel .cols-help summary { color: var(--rule); }

/* ---------- tablas ---------- */
.tbl-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m); -webkit-overflow-scrolling: touch; }
.tbl { border-collapse: separate; border-spacing: 0; width: 100%; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.tbl th, .tbl td { padding: 8px 9px; text-align: right; white-space: nowrap; border-bottom: 1px solid var(--rule); }
.tbl thead th { font-size: var(--fs-cap); letter-spacing: .03em; color: var(--muted); font-weight: 700; background: var(--card); }
.tbl thead th button { all: unset; cursor: pointer; }
.tbl tbody tr:last-child > * { border-bottom: 0; }
.tbl tfoot td { font-weight: 700; border-top: 1px solid var(--rule-2); border-bottom: 0; }
.tbl .name { text-align: left; font-weight: 600; }
.tbl .name small { margin-left: 2px; }
.tbl .num { color: var(--muted); text-align: center; width: 1%; }
.tbl .hl { background: var(--accent-soft); font-weight: 700; }
@supports (color: color-mix(in srgb, red 50%, blue)) { .tbl .hl { background: color-mix(in srgb, var(--accent) 10%, transparent); } }
.tbl-wrap.sticky .tbl tr > :first-child, .tbl-wrap.sticky .tbl tr > .name:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); }
.tbl-wrap.sticky .tbl.standings tr > :nth-child(2) { position: sticky; left: 32px; z-index: 1; background: var(--card); box-shadow: 1px 0 0 var(--rule); }
.tbl-wrap.sticky .tbl:not(.standings) tr > :first-child { box-shadow: 1px 0 0 var(--rule); }
.tbl .sub { color: var(--muted); margin-right: 3px; }
.tbl.box .name { max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
.meter { display: inline-block; width: 56px; height: 6px; border-radius: 3px; background: var(--rule); margin-right: 8px; vertical-align: middle; overflow: hidden; }
.meter i { display: block; height: 100%; background: var(--accent); border-radius: 3px; }
.meter-cell b { display: inline-block; min-width: 3.2em; }
.h2h td { text-align: center; }
.h2h td.up { color: var(--good); font-weight: 700; }
.h2h td.self { color: var(--muted); }

/* ---------- barra de fechas ---------- */
.datebar { display: grid; grid-template-columns: 48px 1fr 48px; align-items: center; gap: var(--s2); }
.db-btn {
  display: grid; place-items: center; height: 48px; border-radius: var(--r-m); border: 1px solid var(--rule-2); background: var(--card);
  font: 600 var(--fs-num)/1 var(--font-body); color: var(--ink);
}
.db-btn:hover { text-decoration: none; }
@media (hover: hover) { .db-btn:hover { border-color: var(--accent); } }
.db-btn.off { opacity: .3; }
.db-mid { text-align: center; position: relative; min-width: 0; }
.db-date { display: block; font: 800 var(--fs-h2)/1.1 var(--font-display); text-transform: uppercase; letter-spacing: .02em; cursor: pointer; text-wrap: balance; }
.db-sub { font-size: var(--fs-sm); color: var(--ink-2); margin-top: 3px; }
/* el selector de fecha (invisible) cubre todo el centro de la barra: se toca en cualquier parte de la fecha;
   "ir a hoy" y "en vivo" quedan encima */
.db-input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.db-sub a, .db-sub .db-live { position: relative; z-index: 1; }

/* ---------- cuenta regresiva y campeón ---------- */
.countdown, .champ {
  background: var(--board); color: var(--chalk); border-radius: var(--r-l); padding: 18px 18px 20px;
  display: flex; flex-direction: column; gap: 6px; box-shadow: var(--shadow);
  position: relative; overflow: hidden;
}
/* las 8 estrellas de la bandera, una por cada equipo de la liga */
.countdown::before, .champ::before, .board::before {
  content: ""; position: absolute; pointer-events: none;
  background: var(--stars) center / contain no-repeat;
}
.countdown::before, .champ::before { right: 14px; top: 14px; width: 168px; height: 73px; opacity: .22; }
.countdown > *, .champ > *, .board > * { position: relative; }
.countdown .eyebrow, .champ .eyebrow { color: var(--chalk-dim); }
.cd-big { font: 800 var(--fs-hero)/1 var(--font-display); text-transform: uppercase; color: var(--bulb); letter-spacing: .01em; font-variant-numeric: tabular-nums; }
.cd-game { font-size: var(--fs-lead); }
.cd-meta { color: var(--chalk-dim); font-size: var(--fs-sm); }
.champ-t { font: 800 var(--fs-h1)/1.05 var(--font-display); text-transform: uppercase; }
.champ p:not(.eyebrow):not(.champ-t) { color: var(--chalk-dim); font-size: var(--fs-body); }
.champ a { color: var(--chalk); text-decoration: underline; }

/* ---------- lista de juegos ---------- */
.games { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 700px) { .games { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.gcard {
  min-width: 0;
  display: flex; flex-direction: column; gap: 6px; padding: var(--s3) 14px; border-radius: 14px;
  background: var(--card); border: 1px solid var(--rule); color: var(--ink); box-shadow: var(--shadow);
}
.gcard:hover { text-decoration: none; }
@media (hover: hover) { .gcard:hover { border-color: var(--rule-2); } }

.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 8px; border-radius: 999px;
  font: 700 var(--fs-cap)/1.3 var(--font-body); text-transform: uppercase; letter-spacing: .06em; white-space: nowrap;
  border: 1px solid var(--rule-2); color: var(--ink-2);
}
.pill.live { background: var(--live); border-color: var(--live); color: #fff; }
.pill.live i { width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: pulse 1.6s ease-in-out infinite; }
.pill.pre { text-transform: none; letter-spacing: 0; font-size: var(--fs-sm); }
.pill.warn { border-color: var(--bad); color: var(--bad); }
@keyframes pulse { 50% { opacity: .25; } }

.bases rect { fill: transparent; stroke: var(--muted); stroke-width: 1.4; }
.bases rect.on { fill: var(--bulb); stroke: var(--bulb-edge); }
.outs { display: inline-flex; gap: 3px; }
.outs i { width: 8px; height: 8px; border-radius: 50%; border: 1.4px solid var(--muted); }
.outs i.on { background: var(--ink-2); border-color: var(--ink-2); }

/* ---------- la pizarra ---------- */
.board {
  background: var(--board); color: var(--chalk); border-radius: var(--r-l); padding: 14px 14px var(--s3);
  box-shadow: var(--shadow); display: flex; flex-direction: column; gap: var(--s2);
  background-image: radial-gradient(120% 80% at 0% 0%, rgba(255, 255, 255, .07), transparent 60%);
  position: relative; overflow: hidden;
  container-type: inline-size; /* el duelo y las filas de equipo se acomodan al ancho de la pizarra, no al de la pantalla */
}
.board::before { left: 50%; top: 34px; width: 230px; height: 100px; margin-left: -115px; opacity: .09; }
.bt-status { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: var(--fs-sm); color: var(--chalk-dim); }
.bt-status .pill { border-color: var(--chalk-dim); color: var(--chalk); }
.bt-status .pill.live { border-color: var(--live); }
/* en oscuro el rojo de "en vivo" se aclara y el blanco encima queda en 3,6:1: la píldora usa el rojo de la bandera (5,5:1) */
@media (prefers-color-scheme: dark) { .pill.live, .bt-status .pill.live { background: var(--flag-r); border-color: var(--flag-r); } }
.bt-venue { margin-left: auto; font-size: var(--fs-sm); }
.bt-row { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s3); }
.bt-abbr { font-size: var(--fs-lead); }
.bt-name { color: var(--chalk); font-weight: 600; font-size: var(--fs-lead); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 44 px de toque sin mover el diseño */
.bt-name { padding-block: 10px; margin-block: -10px; }
.bt-name small { color: var(--chalk-dim); margin-left: 6px; }
.bt-name:hover { color: var(--chalk); }
.bt-runs { font: 800 var(--fs-hero)/.95 var(--font-display); min-width: 1.3em; text-align: right; color: var(--chalk-dim); font-variant-numeric: tabular-nums; }
.bt-row.lead .bt-runs { color: var(--chalk); }
.bt-line { overflow-x: auto; margin: 4px -4px 0; scrollbar-width: none; }
.bt-line::-webkit-scrollbar { display: none; }
.bt-line table { border-collapse: separate; border-spacing: 2px; width: 100%; font: 800 var(--fs-h2)/1 var(--font-display); font-variant-numeric: tabular-nums; }
.bt-line th { color: var(--chalk-dim); font: 600 var(--fs-cap)/1 var(--font-body); padding: 2px 0; text-align: center; }
.bt-line tbody th { text-align: left; padding-right: 3px; font-weight: 700; letter-spacing: .04em; }
.bt-line td { background: var(--board-2); text-align: center; padding: 5px 0; min-width: 19px; border-radius: 4px; }
.bt-line td.cur { box-shadow: inset 0 0 0 1.5px var(--bulb); }
/* C, H y E: cada cifra en su casilla oscura (a 360 px "14 13 1" no se lee "14131") y fijas a la derecha cuando la
   línea se desliza (extrainnings, letra grande). Fondo opaco, y la sombra tapa la separación de 2 px alrededor, para
   que no se vean pasar los innings por debajo. --rhe: ancho de cada columna, dos cifras y un poco de aire. */
.bt-line table { --rhe: calc(var(--fs-h2) * 1.2); }
.bt-line .rhe {
  position: sticky; right: 0; z-index: 1; width: var(--rhe); min-width: var(--rhe);
  background: var(--board); box-shadow: 0 0 0 2px var(--board); color: var(--chalk-dim);
}
.bt-line .rhe:nth-last-child(2) { right: calc(var(--rhe) + 2px); }
.bt-line .rhe:nth-last-child(3) { right: calc(2 * var(--rhe) + 4px); }
.bt-line td.rhe {
  padding: 5px 3px; color: var(--chalk);
  background: linear-gradient(rgba(0, 0, 0, .28), rgba(0, 0, 0, .28)) var(--board);
}
.bt-line td.r { color: var(--bulb); }
/* pizarra muy angosta (360 px con letra grande): el récord baja bajo el nombre, y las carreras y los espacios se
   achican un poco para que quepa el nombre entero */
@container (max-width: 18rem) {
  .bt-row { column-gap: var(--s2); }
  .bt-name small { display: block; margin: 2px 0 0; }
  .bt-runs { font-size: calc(var(--fs-num) * 1.4); min-width: 1.1em; }
}
.lastplay { font-size: var(--fs-sm); color: var(--chalk); background: rgba(0, 0, 0, .18); border-radius: var(--s2); padding: var(--s2) 10px; }

/* repetición */
.replay { display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m); padding: 10px var(--s3); }
.rp-row { display: flex; align-items: center; gap: var(--s3); }
.rp-play { flex: none; min-width: 112px; }
.replay input[type=range] { flex: 1; min-width: 0; accent-color: var(--accent); height: 44px; margin: 0; }
.rp-label { font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* ---------- gráficos ---------- */
.viz { position: relative; width: 100%; }
.viz svg { display: block; width: 100%; height: auto; overflow: visible; touch-action: pan-y; }
.wp-chart, .line-chart { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m); padding: 10px var(--s2) 4px; }
.viz-plot { fill: transparent; }
.viz-grid { stroke: var(--rule); stroke-width: 1; }
.viz-base { stroke: var(--rule-2); stroke-width: 1; }
.viz-ref { stroke: var(--muted); stroke-width: 1; }
.viz-area.away { fill: var(--away); opacity: .14; }
.viz-area.home { fill: var(--home); opacity: .14; }
.viz-area.one { fill: var(--accent); opacity: .1; }
.viz-line { fill: none; stroke: var(--viz-line); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.viz-line.one { stroke: var(--accent); }
.viz-tick { fill: var(--muted); font: 500 var(--fs-cap) var(--font-body); font-variant-numeric: tabular-nums; }
.viz-lab { fill: var(--ink-2); font: 700 var(--fs-cap) var(--font-body); letter-spacing: .04em; }
.viz-end { fill: var(--ink); font: 700 var(--fs-sm) var(--font-body); }
.viz-dot { stroke: var(--card); stroke-width: 2; fill: var(--viz-line); }
.viz-dot.away { fill: var(--away); }
.viz-dot.home { fill: var(--home); }
.viz-dot.one { fill: var(--accent); }
.viz-cross-line { stroke: var(--ink-2); stroke-width: 1; }
.viz-tip {
  position: absolute; top: -6px; transform: translateY(-100%); z-index: 5; pointer-events: none;
  background: var(--ink); color: var(--paper); font-size: var(--fs-sm); line-height: 1.35; padding: var(--s2) 10px;
  border-radius: var(--s2); max-width: min(300px, 100%); box-shadow: var(--shadow);
}
.viz-tip b { display: block; margin-bottom: 2px; }
.viz-tip-num { display: block; margin-top: 4px; font-weight: 700; font-variant-numeric: tabular-nums; }
.viz-key { font-size: var(--fs-sm); color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
/* cada entrada de la leyenda (<span> con su cuadrito y su texto) no se parte: el cuadrito no queda solo al final */
.viz-key > * { white-space: nowrap; }
.k { display: inline-block; width: 10px; height: 10px; border-radius: 3px; vertical-align: -1px; margin-right: 4px; }
.k.away { background: var(--away); }
.k.home { background: var(--home); }
/* el porcentaje de ganar (.wp-now) está entero en css/juegos.css */

/* figuras y jugadas clave */
.figs, .keys, .leaders, .teams, .splits, .glist, .steps { list-style: none; margin: 0; padding: 0; }
.figs { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m); }
.figs li { display: grid; grid-template-columns: 2.2em 1fr auto; align-items: center; gap: 10px; padding: 10px var(--s3); border-bottom: 1px solid var(--rule); }
.figs li:last-child { border-bottom: 0; }
.fig-n { font: 700 var(--fs-sm)/1 var(--font-body); color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.figs li.worst { grid-template-columns: 1fr auto; }
.figs li.worst .fig-n { grid-column: 1 / -1; text-align: left; font: 700 var(--fs-cap) var(--font-body); text-transform: uppercase; letter-spacing: .07em; }
.fig-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fig-who small { display: flex; align-items: center; gap: 6px; }
.fig-v { font: 800 var(--fs-num)/1 var(--font-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fig-v small { margin-left: 3px; }
.keys { display: flex; flex-direction: column; gap: var(--s2); }
.keys li { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m); padding: 10px var(--s3); display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-body); }
.key-h { display: flex; justify-content: space-between; gap: var(--s2); font-size: var(--fs-cap); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.key-h b { color: var(--ink); letter-spacing: 0; text-transform: none; font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }

/* box score, jugadas, datos */
.box-team { display: flex; flex-direction: column; gap: var(--s2); }
.box-team + .box-team { margin-top: 14px; }
.box-team h3 { font: 800 var(--fs-h2)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .03em; display: flex; align-items: center; gap: var(--s2); }
[role=tabpanel] { padding-top: 6px; }
.half { margin-bottom: var(--s3); }
.half h4 { font: 800 var(--fs-sm)/1.2 var(--font-body); text-transform: uppercase; letter-spacing: .07em; color: var(--ink); }
.half h4 { margin-bottom: 6px; }
/* solo los hijos directos: dentro de un turno abierto hay otras listas (la secuencia de la zona) que no son filas */
.half > ol { list-style: none; margin: 0; padding: 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m); }
.half > ol > li { padding: 9px var(--s3); border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; gap: 2px; font-size: var(--fs-body); }
.half > ol > li:last-child { border-bottom: 0; }
/* jugada con carrera: raya amarilla a la izquierda y fondo teñido de amarillo sobre la tarjeta (no sobre transparente:
   en oscuro daba un gris pardo); sin color-mix (Chrome < 111), el fondo de la hoja */
.half > ol > li.score { background: var(--paper); box-shadow: inset 3px 0 0 var(--bulb); }
@supports (color: color-mix(in srgb, red 50%, blue)) { .half > ol > li.score { background: color-mix(in srgb, var(--bulb) 14%, var(--card)); } }
.half > ol > li > p:first-child { display: flex; justify-content: space-between; gap: 10px; }
.pl-ev { font-weight: 700; }
.pl-d { color: var(--muted); font-size: var(--fs-sm); font-variant-numeric: tabular-nums; }
.pl-meta { color: var(--muted); font-size: var(--fs-sm); }
.info { display: grid; grid-template-columns: max-content 1fr; gap: var(--s2) 14px; margin: 0; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m); padding: var(--s3) 14px; font-size: var(--fs-body); }
.info dt { color: var(--muted); }
.info dd { margin: 0; min-width: 0; }
.probs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 420px) { .probs { grid-template-columns: 1fr; } }
.prob { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m); padding: var(--s3); display: flex; flex-direction: column; gap: 4px; }
.prob-t { font-size: var(--fs-sm); color: var(--muted); display: flex; gap: 6px; align-items: center; }
.prob-n { font-weight: 700; font-size: var(--fs-lead); }
.prob-l { font-size: var(--fs-sm); color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* tabla: suerte y series */
.luck { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m); padding: 6px var(--s3); }
.luck-row { display: grid; align-items: center; gap: 10px; padding: 6px 0; font-size: var(--fs-sm); } /* columnas: css/tablas.css */
.luck-t { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.luck-bar { position: relative; height: 14px; }
.luck-bar::before { content: ""; position: absolute; left: 50%; top: -4px; bottom: -4px; width: 1px; background: var(--rule-2); }
.luck-bar i { position: absolute; top: 2px; height: 10px; background: var(--ink-2); }
.luck-bar i.pos { left: 50%; border-radius: 0 4px 4px 0; }
.luck-bar i.neg { right: 50%; border-radius: 4px 0 0 4px; }
.luck-v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.series-score { display: flex; gap: 10px; }
.series-score p { flex: 1; background: var(--board); color: var(--chalk); border-radius: var(--r-m); padding: var(--s3); display: flex; align-items: center; gap: var(--s2); font-weight: 600; min-width: 0; }
.series-score b { margin-left: auto; font: 800 var(--fs-h1)/1 var(--font-display); color: var(--bulb); font-variant-numeric: tabular-nums; }

/* líderes */
.leaders { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m); }
.leaders li { display: grid; grid-template-columns: 2em 1fr auto; gap: 10px; align-items: center; padding: 10px var(--s3); border-bottom: 1px solid var(--rule); }
.leaders li:last-child { border-bottom: 0; }
.ld-rank { font: 700 var(--fs-sm)/1 var(--font-body); color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.leaders li:nth-child(-n+3) .ld-rank { color: var(--ink); }
.ld-who { min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; }
.ld-who small { flex-basis: 100%; font-variant-numeric: tabular-nums; }
.ld-v { font: 800 var(--fs-num)/1 var(--font-display); font-variant-numeric: tabular-nums; }

/* equipos */
.teams { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m); }
.teams li + li { border-top: 1px solid var(--rule); }
.teams a { display: grid; grid-template-columns: auto 1fr auto; gap: var(--s3); align-items: center; padding: var(--s3); color: var(--ink); }
.teams a:hover { text-decoration: none; }
@media (hover: hover) { .teams a:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); } }
.tm-name { font-weight: 700; display: flex; flex-direction: column; min-width: 0; }
.tm-rec { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; }
.splits { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--s2); }
.splits li { background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: var(--s2) 10px; display: flex; align-items: baseline; gap: 6px; font-size: var(--fs-sm); }
.splits span { color: var(--ink-2); flex: 1; min-width: 0; }
.splits b { font-variant-numeric: tabular-nums; }
.cal { display: grid; gap: var(--s3); }
@media (min-width: 640px) { .cal { grid-template-columns: 1fr 1fr; } }
.cal h3 { font-size: var(--fs-cap); text-transform: uppercase; letter-spacing: .06em; color: var(--muted); margin-bottom: 6px; }
.glist { background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-m); }
.glist li + li { border-top: 1px solid var(--rule); }
.glist a { display: grid; grid-template-columns: 4.2em 1fr auto; gap: var(--s2); align-items: center; min-height: 44px; padding: 9px var(--s3); color: var(--ink); font-size: var(--fs-body); }
.glist a:hover { text-decoration: none; }
@media (hover: hover) { .glist a:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); } }
.glist b { font-variant-numeric: tabular-nums; }
.glist b.w { color: var(--good); }
.glist b.l { color: var(--ink-2); }

/* más */
.steps { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-body); max-width: 64ch; }
.steps li { padding-left: 14px; position: relative; }
.steps li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 1px; transform: rotate(45deg); background: var(--accent); }
.sec > p { max-width: 64ch; }

/* ---------- barra de secciones ---------- */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: grid; grid-template-columns: repeat(5, 1fr);
  padding: 0 4px env(safe-area-inset-bottom, 0px);
  background: var(--card); border-top: 1px solid var(--rule);
}
.tabs a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 6px;
  min-height: var(--tabbar); padding: 8px 0 6px; min-width: 0;
  color: var(--muted); font: 600 var(--fs-cap)/1.15 var(--font-body); letter-spacing: .01em; text-align: center;
}
/* píldora detrás del ícono de la pestaña activa */
.tabs a::before {
  content: ""; position: absolute; top: 4px; left: 50%; width: 56px; height: 32px; margin-left: -28px; border-radius: 999px;
  background: var(--accent-soft); opacity: 0; transform: scaleX(.5);
  transition: transform var(--t-pantalla) var(--ease-out), opacity var(--t-micro) linear;
}
.tabs a.on::before { opacity: 1; transform: none; }
.tabs a:hover { text-decoration: none; }
@media (hover: hover) { .tabs a:hover { color: var(--ink); } }
.tabs a.on { color: var(--accent); font-weight: 700; }
.tabs svg { position: relative; flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tabs a.on svg { stroke-width: 2.2; }
.tabs span { position: relative; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (prefers-color-scheme: dark) { .tabs a.on { color: var(--ink); } .tabs a.on svg { color: var(--accent); } }

@media (prefers-reduced-motion: reduce) {
  /* sin transiciones (con 1 ms igual se creaba una por cada cambio: cientos al arrastrar la curva); las animaciones
     terminan al instante para que quede su estado final */
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition: none !important; }
  .pill.live i { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* explicaciones de las columnas (en el teléfono no hay "pasar el ratón") */
.cols-help { font-size: var(--fs-sm); color: var(--ink-2); margin-top: -2px; }
.cols-help summary { min-height: 44px; padding: 12px 0; cursor: pointer; color: var(--accent); font-weight: 600; }
.cols-help dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px var(--s3); margin: 4px 0 0; background: var(--card); border: 1px solid var(--rule); border-radius: 10px; padding: 10px var(--s3); }
.cols-help dt { font-weight: 700; color: var(--ink); }
.cols-help dd { margin: 0; }

/* jugada a jugada: cambios, robos, corredor colocado en extrainnings */
.half > ol > li.act { background: var(--paper); }
@supports (color: color-mix(in srgb, red 50%, blue)) { .half > ol > li.act { background: color-mix(in srgb, var(--ink) 4%, var(--card)); } }
.half > ol > li.act p { font-size: var(--fs-sm); color: var(--ink-2); }