/* ── Sistema visual: "terminal de datos" ───────────────────────────────────
   Regla que gobierna la paleta: EL ÚNICO COLOR DE LA INTERFAZ ES EL DATO. Todo
   el chrome —rail, bordes, botones, texto— es escala de grises. Los tres
   colores de resultado son los validados con el validador de dataviz (pasan
   las seis comprobaciones en todos los pares y en los dos modos): "fuera" y
   "palo" comparten el naranja y se separan por FORMA. Al no haber ningún color
   de marca, nada compite con una categoría de dato y esa validación sigue
   siendo válida.

   Los NOMBRES de los tokens se conservan porque goal.js, charts.js y views.js
   los usan en línea (var(--gol), var(--seq-400)…); lo que cambia son sus
   valores y el estilo de los componentes.

   Diseño oscuro-primero, con los tres estados de tema: sin atributo manda
   prefers-color-scheme; con atributo manda la elección del usuario.        */
:root {
  color-scheme: dark light;

  --page:        #0a0a0b;
  --surface:     #101013;
  --surface-2:   #17171b;
  --rail:        #0c0c0e;
  --ink:         #f2f2f0;
  --ink-2:       #9a9a96;
  --ink-muted:   #63635f;
  --grid:        #2c2c2a;
  --axis:        #45454a;
  --hairline:    #232327;
  --line-2:      #2e2e34;
  --muerto:      #26262b;

  --gol:         #199e70;
  --parado:      #3987e5;
  --fallado:     #d95926;

  --seq-100:     #0d366b;
  --seq-250:     #184f95;
  --seq-400:     #256abf;
  --seq-550:     #3987e5;
  --seq-700:     #86b6ef;

  /* Segunda rampa secuencial, para el REPARTO de zona: pocos en azul y muchos
     en verde. Va aparte de la azul a propósito, porque las dos rejillas se
     miran juntas y significan cosas distintas —dónde entra frente a dónde se
     tira—, y con el mismo color se confundirían.
     Comprobado: la luminosidad crece de forma monótona (0,042 → 0,557), así
     que se lee también en escala de grises y con daltonismo, y la cifra de
     cada celda pasa de 4,5:1 en las cinco. */
  /* Divergente para el enrejado de la tanda: naranja si lleva ventaja el que
     lanzó segundo, azul si el primero, gris en medio. Los dos extremos son los
     colores de resultado, ya validados entre sí; los pasos intermedios se
     comprobaron aparte: la cifra de cada caja pasa de 4,5:1 en las siete. */
  --div-0:       #f0a884;
  --div-1:       #d95926;
  --div-2:       #8a3a18;
  --div-3:       #2f2f35;
  --div-4:       #1d5292;
  --div-5:       #3987e5;
  --div-6:       #9cc4f2;

  --zon-100:     #123a6b;
  --zon-250:     #155f8f;
  --zon-400:     #118a86;
  --zon-550:     #1aa86a;
  --zon-700:     #7fd7a0;

  --good:        #0ca30c;
  --bad:         #e66767;

  --r:           3px;
  --pad:         14px;
  --font: system-ui, -apple-system, "Segoe UI", sans-serif;
  --num:  ui-monospace, "Cascadia Mono", "SF Mono", Consolas, "Liberation Mono", monospace;
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --page:      #ffffff;
    --surface:   #ffffff;
    --surface-2: #f6f6f4;
    --rail:      #fafaf8;
    --ink:       #101010;
    --ink-2:     #5c5c58;
    --ink-muted: #8c8c86;
    --grid:      #e1e0d9;
    --axis:      #b4b4ab;
    --hairline:  #e4e4de;
    --line-2:    #d3d3cc;
    --muerto:    #ebebe5;

    --gol:       #1baf7a;
    --parado:    #2a78d6;
    --fallado:   #eb6834;

    --seq-100:   #cde2fb;
    --seq-250:   #86b6ef;
    --seq-400:   #3987e5;
    --seq-550:   #1c5cab;
    --seq-700:   #0d366b;

    /* Igual que la azul, en claro se invierte la luminosidad pero NO el
       recorrido de color: pocos siguen siendo azules y muchos, verdes. */
    --div-0:     #a03c12;
    --div-1:     #d95926;
    --div-2:     #f3bfa4;
    --div-3:     #e3e3e0;
    --div-4:     #a9cdf6;
    --div-5:     #2470c9;
    --div-6:     #0f4a8f;

    --div-0:     #a03c12;
  --div-1:     #d95926;
  --div-2:     #f3bfa4;
  --div-3:     #e3e3e0;
  --div-4:     #a9cdf6;
  --div-5:     #2470c9;
  --div-6:     #0f4a8f;

  --zon-100:   #d3e6f9;
    --zon-250:   #93c4e8;
    --zon-400:   #4aa3a0;
    --zon-550:   #1c8055;
    --zon-700:   #0d5236;

    --good:      #006300;
    --bad:       #d03b3b;
  }
}

:root[data-theme="light"] {
  --page:      #ffffff;
  --surface:   #ffffff;
  --surface-2: #f6f6f4;
  --rail:      #fafaf8;
  --ink:       #101010;
  --ink-2:     #5c5c58;
  --ink-muted: #8c8c86;
  --grid:      #e1e0d9;
  --axis:      #b4b4ab;
  --hairline:  #e4e4de;
  --line-2:    #d3d3cc;
  --muerto:    #ebebe5;

  --gol:       #1baf7a;
  --parado:    #2a78d6;
  --fallado:   #eb6834;

  --seq-100:   #cde2fb;
  --seq-250:   #86b6ef;
  --seq-400:   #3987e5;
  --seq-550:   #1c5cab;
  --seq-700:   #0d366b;

  /* Igual que la azul, en claro se invierte la luminosidad pero NO el
     recorrido de color: pocos siguen siendo azules y muchos, verdes. */
  --zon-100:   #d3e6f9;
  --zon-250:   #93c4e8;
  --zon-400:   #4aa3a0;
  --zon-550:   #1c8055;
  --zon-700:   #0d5236;

  --good:      #006300;
  --bad:       #d03b3b;
}

/* ── Base ─────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font: 13px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { margin: 0; font-weight: 620; line-height: 1.2; }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -.02em; }
h2 { font-size: 11.5px; letter-spacing: .01em; }
h3 { font-size: 11px; }
p  { margin: 0 0 .6em; }
a  { color: inherit; }

button, input, select { font: inherit; color: inherit; }

:where(a, button, select, input):focus-visible {
  outline: 2px solid var(--ink); outline-offset: 1px;
}

/* Los números son el producto: siempre en cifra tabular. */
.mono, .num, td.num, th.num {
  font-family: var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.muted { color: var(--ink-muted); }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}

/* ── Pantalla de carga ─────────────────────────────────────────────────────
   Sin `both` ni retardo en las animaciones a propósito: con relleno hacia
   atrás los elementos se quedan en el fotograma inicial (opacidad 0) mientras
   la animación no avanza, y si el reloj de animación no corre la pantalla se
   queda en negro y la app inaccesible. El estado natural es visible; la
   animación solo adorna. El escalonado se hace con duraciones distintas.   */
#splash {
  position: fixed; inset: 0; z-index: 100; background: var(--page);
  display: grid; place-items: center; cursor: pointer; transition: opacity .45s ease;
}
#splash.off { opacity: 0; pointer-events: none; }
.sp-in { display: grid; justify-items: center; text-align: center; padding: 24px; }
.sp-mark { display: flex; align-items: center; gap: 12px; }
.sp-mark i {
  display: block; width: 6px; height: 42px; background: var(--ink);
  animation: sp-bar 1.1s cubic-bezier(.2, .7, .2, 1);
}
.sp-mark span {
  font-size: 34px; font-weight: 700; letter-spacing: .1em; animation: sp-in .55s ease;
}
.sp-tag { margin-top: 10px; color: var(--ink-2); font-size: 13px; animation: sp-in .75s ease; }
.sp-load { margin-top: 34px; width: 210px; animation: sp-in .95s ease; }
.sp-track { height: 2px; background: var(--line-2); overflow: hidden; }
.sp-track i { display: block; height: 100%; width: 0; background: var(--ink); }
.sp-txt {
  margin-top: 9px; display: flex; justify-content: space-between;
  font: 10px var(--num); color: var(--ink-muted);
  letter-spacing: .06em; text-transform: uppercase;
}
@keyframes sp-bar { from { height: 0; opacity: 0; } to { height: 42px; opacity: 1; } }
@keyframes sp-in  { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .sp-mark i, .sp-mark span, .sp-tag, .sp-load { animation: none; }
  #splash { transition: none; }
}

/* ── Barra superior ───────────────────────────────────────────────────── */
header.top {
  height: 40px; display: flex; align-items: center; gap: 12px;
  padding: 0 12px; border-bottom: 1px solid var(--hairline);
  background: var(--rail); position: sticky; top: 0; z-index: 20;
}
.brand {
  display: flex; align-items: center; gap: 7px; flex: none;
  font-weight: 680; letter-spacing: .04em; font-size: 12px;
  background: none; border: 0; padding: 0; cursor: pointer; color: inherit;
}
.brand i { display: block; width: 3px; height: 14px; background: var(--ink); }

.cmd {
  flex: 1; min-width: 0; max-width: 420px; height: 26px;
  border: 1px solid var(--line-2); background: var(--surface); border-radius: var(--r);
  display: flex; align-items: center; gap: 8px; padding: 0 8px;
  color: var(--ink-muted); font-size: 12px; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-align: left;
}
.cmd kbd {
  margin-left: auto; font: 10px var(--num); border: 1px solid var(--line-2);
  border-radius: 2px; padding: 1px 4px; color: var(--ink-muted);
}
.top-meta {
  margin-left: auto; display: flex; gap: 14px;
  font: 10px var(--num); color: var(--ink-muted);
}

.tbtn {
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  border-radius: var(--r); height: 24px; padding: 0 9px; font-size: 11px;
  cursor: pointer; flex: none;
}
.tbtn:hover { color: var(--ink); border-color: var(--axis); }
.icon-btn {
  border: 1px solid var(--line-2); background: var(--surface); color: var(--ink-2);
  border-radius: var(--r); width: 26px; height: 24px; cursor: pointer;
  display: grid; place-items: center; flex: none;
}
.icon-btn:hover { color: var(--ink); border-color: var(--axis); }

.lang { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r);
  overflow: hidden; flex: none; }
.lang button {
  border: 0; border-right: 1px solid var(--line-2); background: var(--surface);
  color: var(--ink-muted); font: 10px var(--num); letter-spacing: .04em;
  padding: 0 6px; height: 24px; cursor: pointer; text-transform: uppercase;
}
.lang button:last-child { border-right: 0; }
.lang button:hover { color: var(--ink); }
.lang button[aria-current="true"] { background: var(--ink); color: var(--page); font-weight: 700; }

/* ── Estructura ───────────────────────────────────────────────────────── */
.wrap { display: grid; grid-template-columns: 188px 1fr; min-height: calc(100vh - 40px); }

.rail {
  border-right: 1px solid var(--hairline); background: var(--rail);
  padding: 10px 0; position: sticky; top: 40px;
  height: calc(100vh - 40px); overflow-y: auto;
}
.rail-h {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--ink-muted); padding: 12px 12px 5px;
}
.rail button {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 5px 12px; border: 0; border-left: 2px solid transparent;
  background: none; color: var(--ink-2); font-size: 12.5px;
  text-align: left; cursor: pointer;
}
.rail button:hover { color: var(--ink); background: var(--surface); }
.rail button[aria-current="page"] {
  color: var(--ink); border-left-color: var(--ink);
  background: var(--surface); font-weight: 560;
}
.rail button .k { margin-left: auto; font: 10px var(--num); color: var(--ink-muted); }

/* Tira de secciones en móvil: el rail se oculta y sin esto la app se queda
   sin navegación. Desplazable, porque las secciones son más de cinco. */
.mnav { display: none; }

.shell { min-width: 0; padding: 0 0 40px; }
section.screen { display: none; }
section.screen.on { display: block; }

/* ── Paneles ──────────────────────────────────────────────────────────────
   Sin tarjetas: paneles a sangre separados por filetes de 1 px. La densidad es
   la que hace que esto se lea como una herramienta y no como un folleto.   */
.card {
  border-bottom: 1px solid var(--hairline);
  padding: 12px var(--pad); min-width: 0;
}
.card > h2 { margin-bottom: 1px; display: flex; align-items: baseline; gap: 8px; }
.card > h2 .hint { margin-left: auto; font: 10px var(--num); color: var(--ink-muted); font-weight: 400; }
.card > .sub { color: var(--ink-muted); font-size: 11px; margin: 0 0 10px; }
.card > h1 + .sub { font-size: 12px; color: var(--ink-2); }

.grid2 { display: grid; grid-template-columns: 1fr; }
@media (min-width: 860px) {
  .grid2 { grid-template-columns: 1fr 1fr; }
  .grid2 > .card { border-right: 1px solid var(--hairline); }
  .grid2 > .card:last-child { border-right: 0; }
}

/* Cabecera de entidad (ficha, tanda, pantallas con título grande) */
.ident { padding: 10px var(--pad) 12px; border-bottom: 1px solid var(--hairline); }
.ident-row { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.ident .acts { margin-left: auto; display: flex; gap: 6px; padding-bottom: 2px; }

/* ── Indicadores ──────────────────────────────────────────────────────── */
.tiles {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  margin: 10px 0 0;
}
.tile { padding: 10px 12px; border-right: 1px solid var(--hairline); min-width: 0; }
.tile:last-child { border-right: 0; }
.tile .k {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .09em; color: var(--ink-muted);
}
.tile .v {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: 19px; font-weight: 600; letter-spacing: -.03em; line-height: 1.2; margin-top: 2px;
}
.tile .n { font-size: 10.5px; color: var(--ink-muted); }

.hero-n {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: clamp(38px, 6vw, 58px); font-weight: 650;
  letter-spacing: -.045em; line-height: .95;
}

/* ── Leyenda ──────────────────────────────────────────────────────────── */
.legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 11px; color: var(--ink-2); }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend svg { display: block; overflow: visible; }

/* ── Controles ────────────────────────────────────────────────────────── */
.controls { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.controls select, .controls input[type="search"], .controls input[type="number"] {
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink);
  border-radius: var(--r); padding: 4px 6px; font-size: 11.5px; min-width: 0; max-width: 230px;
}
.controls label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-muted);
  min-width: 0;
}

.seg { display: inline-flex; border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.seg button {
  border: 0; border-right: 1px solid var(--line-2); background: none;
  color: var(--ink-2); font-size: 11.5px; padding: 4px 10px; cursor: pointer;
}
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed="true"] { background: var(--ink); color: var(--page); font-weight: 580; }

/* ── Desplegable con bandera ──────────────────────────────────────────── */
.combo { position: relative; display: inline-block; }
.combo-bt {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink);
  border-radius: var(--r); padding: 4px 7px; font-size: 11.5px; cursor: pointer;
  max-width: 250px;
}
.combo-bt:hover { border-color: var(--axis); }
.combo-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-bt svg:last-child { flex: none; color: var(--ink-muted); }
.bandera { flex: none; display: block; border-radius: 1px; }
.combo-todas {
  width: 16px; height: 11px; flex: none; border-radius: 1px;
  background: var(--surface-2); border: 1px solid var(--line-2);
}
.combo-pop {
  position: absolute; z-index: 40; top: calc(100% + 3px); left: 0; min-width: 270px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .38); padding: 6px;
}
.combo-pop[hidden] { display: none; }
.combo-q {
  width: 100%; background: var(--page); border: 1px solid var(--line-2);
  color: var(--ink); border-radius: var(--r); padding: 5px 7px; font-size: 11.5px;
}
.combo-lista { list-style: none; margin: 5px 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
.combo-lista li[hidden] { display: none; }
.combo-lista button {
  width: 100%; display: flex; align-items: center; gap: 8px;
  background: none; border: 0; color: var(--ink-2); cursor: pointer;
  padding: 5px 6px; border-radius: var(--r); font-size: 11.5px; text-align: left;
}
.combo-lista button:hover { background: var(--surface-2); color: var(--ink); }
.combo-lista button[aria-selected="true"] { color: var(--ink); font-weight: 580; }
.combo-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-n { margin-left: auto; font: 10px var(--num); color: var(--ink-muted); }

/* El evolutivo se escala a lo ancho del panel; su viewBox es de proporción
   fija, así que un tope evita que el texto salga desproporcionado. */
.chart.evo { max-width: 560px; }

/* ── Buscador ─────────────────────────────────────────────────────────── */
.search-wrap { position: relative; }
.search-wrap input {
  width: 100%; background: var(--surface); border: 1px solid var(--line-2); color: var(--ink);
  border-radius: var(--r); padding: 8px 10px; font-size: 13px;
}
.results { list-style: none; margin: 6px 0 0; padding: 0; }
.results li + li { border-top: 1px solid var(--hairline); }
.results button {
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 7px 4px; display: flex; align-items: baseline; gap: 10px; color: inherit;
}
.results button:hover { background: var(--surface-2); }
.results .nm { font-weight: 560; font-size: 12.5px; }
.results .meta {
  margin-left: auto; color: var(--ink-muted); white-space: nowrap;
  font: 11px var(--num);
}

/* ── Tablas ───────────────────────────────────────────────────────────── */
.tbl-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 11.5px; }
th, td { text-align: left; padding: 4px 9px; white-space: nowrap; }
th {
  color: var(--ink-muted); font-weight: 500; font-size: 9.5px;
  text-transform: uppercase; letter-spacing: .08em;
  border-bottom: 1px solid var(--line-2); padding: 6px 9px;
  background: var(--rail);
}
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
td { border-bottom: 1px solid var(--hairline); }
tbody tr:hover td { background: var(--surface-2); }
td.num, th.num { text-align: right; }
.rowlink { cursor: pointer; }

.pill {
  display: inline-block; padding: 0 6px; border-radius: 2px;
  font-size: 10.5px; border: 1px solid var(--line-2); color: var(--ink-2);
}

/* ── Tira de últimos lanzamientos ─────────────────────────────────────── */
.strip { display: flex; flex-wrap: wrap; gap: 3px; }
.strip i {
  width: 20px; height: 20px; border-radius: 2px; display: grid; place-items: center;
  font-style: normal; font-size: 10px; font-weight: 700; color: #fff;
}

/* ── Tooltip ──────────────────────────────────────────────────────────── */
#tip {
  position: fixed; z-index: 60; pointer-events: none; opacity: 0; transition: opacity .1s;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 6px 9px; font-size: 11.5px; line-height: 1.4;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35); max-width: 260px;
}
#tip.on { opacity: 1; }
#tip b { font-weight: 620; }

/* ── Gráficos ─────────────────────────────────────────────────────────── */
.chart { width: 100%; height: auto; display: block; overflow: visible; }
/* El viewBox del gráfico de puntos es fijo: sin tope, en un panel ancho se
   escalaría entero y el texto saldría desproporcionado. */
.chart.dot { max-width: 620px; }

.bar-row {
  display: grid; grid-template-columns: minmax(72px, 32%) 1fr auto;
  gap: 9px; align-items: center; padding: 2px 0;
}
.bar-row .lbl {
  font-size: 11.5px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.bar-track { display: block; background: var(--surface-2); border-radius: 2px; height: 10px; overflow: hidden; }
/* display:block explícito: son <span>, y en línea ignorarían alto y ancho. */
.bar-fill { display: block; height: 100%; border-radius: 2px; background: var(--seq-400); }
.bar-row .val {
  font: 11px var(--num); font-variant-numeric: tabular-nums;
  color: var(--ink); min-width: 54px; text-align: right;
}

/* ── Desglose por lado ────────────────────────────────────────────────── */
.sb-block + .sb-block { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--hairline); }
.sb-title {
  font-size: 11px; font-weight: 620; display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-2);
}
.sb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--hairline); }
.sb-col { background: var(--surface-2); padding: 8px 10px; }
.sb-hdr { font-size: 9.5px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .09em; }
.sb-pct {
  font-family: var(--num); font-variant-numeric: tabular-nums;
  font-size: 17px; font-weight: 620; line-height: 1.2; letter-spacing: -.03em;
}
.sb-track { height: 4px; background: var(--grid); border-radius: 2px; overflow: hidden; margin: 5px 0 5px; }
.sb-track span { display: block; height: 100%; background: var(--seq-400); border-radius: 2px; }
.sb-n { font-size: 10.5px; color: var(--ink-muted); }
.sb-det { display: flex; gap: 8px; font: 10.5px var(--num); margin-top: 3px; }
.sb-sum { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 10px; font-size: 11.5px; color: var(--ink-2); }

/* ── Patrón de lados ──────────────────────────────────────────────────── */
.sp-seq { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; }
.sp-chip {
  width: 22px; height: 22px; border-radius: var(--r); display: grid; place-items: center;
  color: #fff; font-size: 12px; font-weight: 700; flex: none;
}
.sp-conn { color: var(--ink-muted); font: 10px var(--num); flex: none; }
.sp-conn.sp-chg { color: var(--ink); font-weight: 700; }
.sp-sum { margin: 12px 0 0; font-size: 12px; color: var(--ink-2); }
.sp-sum b { color: var(--ink); font-weight: 620; }

/* ── Modal de detalle ─────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 50; display: none;
  align-items: center; justify-content: center; padding: 16px;
  background: rgba(0, 0, 0, .62);
}
.overlay.on { display: flex; }
.overlay-box {
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r);
  padding: 16px; width: 100%; max-width: 460px; max-height: 90vh;
  overflow: auto; position: relative;
}
.overlay-close {
  position: absolute; top: 9px; right: 9px; width: 26px; height: 26px;
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface-2);
  cursor: pointer; color: var(--ink-2); font-size: 12px; line-height: 1;
}
.overlay-close:hover { color: var(--ink); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 12px 0 8px; }

.empty { color: var(--ink-muted); font-size: 12px; padding: 16px 0; text-align: center; }

.back {
  border: 0; background: none; cursor: pointer; color: var(--ink-muted);
  padding: 8px var(--pad) 0; font-size: 11px;
  display: inline-flex; align-items: center; gap: 6px;
}
.back:hover { color: var(--ink); }

.note { font-size: 10.5px; color: var(--ink-muted); margin-top: 9px; }

.loading { display: grid; place-items: center; min-height: 60vh; color: var(--ink-muted); gap: 12px; }
.spin {
  width: 24px; height: 24px; border-radius: 50%;
  border: 2px solid var(--grid); border-top-color: var(--ink);
  animation: sp .8s linear infinite;
}
@keyframes sp { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spin { animation: none; } }


/* ── Juego ────────────────────────────────────────────────────────────── */
.jg-equipos { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.jg-equipo {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r);
  color: var(--ink); cursor: pointer; font-size: 13px; text-align: left;
}
.jg-equipo:hover { border-color: var(--ink); background: var(--surface-2); }
.jg-eq-nm { font-weight: 560; }
.jg-eq-n { margin-left: auto; font: 10px var(--num); color: var(--ink-muted); }

.jg-barra { display: inline-flex; width: 96px; height: 9px; border-radius: 2px; overflow: hidden; }
.jg-barra i { display: block; height: 100%; }
tr.jg-sel td { background: var(--surface-2); }
tr.jg-sel td:first-child { box-shadow: inset 2px 0 0 var(--ink); }
.jg-jugar:not(:disabled) { background: var(--ink); color: var(--page); border-color: var(--ink); font-weight: 580; }

.jg-marcador {
  display: grid; gap: 6px; padding: 12px var(--pad);
  border-bottom: 1px solid var(--hairline); background: var(--rail);
}
.jg-lado { display: flex; align-items: center; gap: 10px; }
/* `min-width: 0` y `flex-shrink` son lo que impide que el marcador desborde:
   una tanda larga dibuja una bola por lanzamiento y en móvil se salía de la
   pantalla. Con 14 por lado medía 438 px sobre 390. Ahora las bolas se
   reparten en varias líneas y el nombre del equipo cede sitio. */
.jg-eq { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  min-width: 0; flex: 0 1 150px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.jg-bolas { display: flex; gap: 4px; flex-wrap: wrap; min-width: 0; flex: 1 1 auto; }
.jg-b { width: 13px; height: 13px; border-radius: 50%; display: block; }
.jg-gol { background: var(--gol); }
.jg-parado { background: var(--parado); }
.jg-fuera { background: var(--fallado); }
.jg-vacia { background: none; border: 1px solid var(--line-2); }
.jg-goles { margin-left: auto; font: 17px var(--num); font-weight: 650; }

/* La portería es el mando del juego: se lleva el ancho de la tarjeta. */
.jg-porteria { max-width: 620px; margin: 4px auto 0; cursor: crosshair; }
.jg-casilla {
  fill: rgba(128, 128, 128, .13); stroke: var(--ink-2); stroke-width: .8;
  stroke-dasharray: 3 2; cursor: pointer; transition: fill .1s;
}
.jg-casilla:hover { fill: rgba(128, 128, 128, .34); stroke: var(--ink);
  stroke-width: 1.6; stroke-dasharray: none; }

.jg-ultimo { display: grid; gap: 6px; }
.jg-res { font-size: 15px; font-weight: 650; }
.jg-res.jg-gol { color: var(--gol); }
.jg-res.jg-parado { color: var(--parado); }
.jg-res.jg-fuera { color: var(--fallado); }
.jg-frase { margin: 0; font-size: 12.5px; color: var(--ink-2); }
.jg-razon { margin: 0; font-size: 12px; color: var(--ink-2);
  border-left: 2px solid var(--line-2); padding-left: 9px; }
.jg-razon b { color: var(--ink); }

.jg-elige { display: flex; flex-wrap: wrap; gap: 8px; }
.jg-cand {
  display: grid; gap: 2px; padding: 9px 13px; background: var(--surface);
  border: 1px solid var(--line-2); border-radius: var(--r); color: var(--ink);
  cursor: pointer; text-align: left;
}
.jg-cand:hover { border-color: var(--ink); }
.jg-cand span { font: 10.5px var(--num); color: var(--ink-muted); }

/* ── Móvil ────────────────────────────────────────────────────────────── */
@media (max-width: 980px) {
  .wrap { grid-template-columns: 1fr; }
  .rail { display: none; }
  .top-meta { display: none; }
  .cmd { max-width: none; }

  .mnav {
    display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
    position: sticky; top: 40px; z-index: 19;
    background: var(--rail); border-bottom: 1px solid var(--hairline); padding: 5px 8px;
  }
  .mnav::-webkit-scrollbar { display: none; }
  .mnav button {
    flex: none; padding: 5px 10px; border: 0; border-radius: var(--r);
    background: none; color: var(--ink-2); font-size: 12px; cursor: pointer; white-space: nowrap;
  }
  .mnav button[aria-current="page"] { background: var(--ink); color: var(--page); font-weight: 580; }

  .tiles { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); }
  .tile { border-bottom: 1px solid var(--hairline); }
}

@media (max-width: 560px) {
  .cmd { display: none; }   /* en móvil la búsqueda vive en la tira de secciones */
  .brand { margin-right: auto; }
}

/* ── Duelo hipotético ─────────────────────────────────────────────────────
   El buscador libre: aquí no se filtra en cascada a propósito, porque el
   sentido de la pantalla es cruzar a dos que nunca se vieron. */
.inp {
  width: 100%; padding: 8px 10px; font: inherit; color: var(--ink);
  background: var(--surface-2); border: 1px solid var(--line-2); border-radius: var(--r);
}
.inp:focus { outline: 2px solid var(--ink-2); outline-offset: 1px; }
.picklist { list-style: none; margin: 8px 0 0; padding: 0; max-height: 320px; overflow-y: auto; }
.picklist li { border-top: 1px solid var(--hairline); }
.picklist li.empty { padding: 10px 2px; color: var(--ink-muted); font-size: 12.5px; }
.picklist button {
  display: flex; width: 100%; gap: 10px; align-items: baseline; justify-content: space-between;
  padding: 8px 2px; background: none; border: 0; color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.picklist button:hover { background: var(--surface-2); }
.picklist .meta { font: 12px var(--num); color: var(--ink-muted); }
.hip-sel { display: flex; gap: 12px; align-items: center; margin: 6px 0 0; }
.hip-sel b { font-size: 15px; }

/* El nombre del equipo en la ficha lleva a su pantalla. Se marca con subrayado
   punteado y no con color: el único color de la interfaz sigue siendo el dato. */
.eqlink { color: inherit; text-decoration: underline; text-decoration-style: dotted;
  text-underline-offset: 3px; }
.eqlink:hover { text-decoration-style: solid; }

/* Aviso de muestra corta: gris como todo el chrome, con un filete a la
   izquierda para que se lea antes que la nota de al lado. */
.aviso { margin: 0 0 8px; padding: 8px 0 8px 10px; font-size: 12.5px;
  color: var(--ink-2); border-left: 2px solid var(--line-2); }

/* Distintivo de "equipo" en el buscador: sin color, como todo el chrome. */
.tag { display:inline-block; margin-left:7px; padding:1px 5px; border-radius:2px;
  border:1px solid var(--line-2); background:var(--surface-2);
  font:10px var(--num); letter-spacing:.06em; text-transform:uppercase;
  color:var(--ink-muted); vertical-align:1px; }

/* La matriz del primer intercambio. Las celdas llevan el color del dato; los
   rótulos, como todo el chrome, van en gris. */
table.mx { border-collapse: separate; border-spacing: 2px; margin: 4px auto 0;
  max-width: 420px; }
table.mx th { font-size: 11.5px; font-weight: 600; color: var(--ink-2);
  padding: 4px 8px; text-align: center; }
table.mx th.mx-eje { font: 10.5px var(--num); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-muted); padding-bottom: 2px; }
table.mx th.mx-fila { text-align: right; white-space: nowrap; }
.mx-c { width: 92px; height: 62px; text-align: center; border-radius: var(--r);
  vertical-align: middle; }
.mx-c b { display: block; font: 19px/1.1 var(--num); font-weight: 650;
  font-variant-numeric: tabular-nums; }
.mx-c span { display: block; margin-top: 2px; font: 11px var(--num); opacity: .78; }
.mx-vacia { background: var(--muerto); color: var(--ink-muted);
  font: 15px var(--num); }

/* Selector de varios valores. Hereda casi todo de .combo; solo añade la marca
   de seleccionado, el contador y el ancho, que aquí puede quedarse corto. */
.combo-m .combo-bt { min-width: 130px; }
.combo-tic { display: inline-block; width: 12px; font: 11px var(--num);
  color: var(--ink); flex: 0 0 auto; }
.combo-cuenta { display: inline-block; min-width: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--ink-2); color: var(--page);
  font: 10px/15px var(--num); text-align: center; }
.combo-limpiar { font-style: italic; }
.filtros { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.filtros label { display: flex; gap: 6px; align-items: center;
  font-size: 12px; color: var(--ink-2); }

/* El enrejado de la tanda. Los rótulos de fila van dentro del SVG, así que
   aquí solo hace falta que el dibujo pueda desplazarse cuando no cabe.

   `width: auto` es lo importante: `.chart` lo estira al 100 % del panel, y en
   una tarjeta ancha eso escalaba el enrejado al triple y salían unas cajas
   enormes. A su tamaño natural se ve entero de una vez, y si no cabe —en
   móvil— se desplaza. */
.ar-scroll { overflow-x: auto; margin-top: 6px; }
svg.ar { display: block; width: auto; max-width: none; height: auto;
  margin-inline: auto; }

/* Lo último que ha entrado: el equipo va debajo del nombre, en gris, para que
   la fila diga de quién es sin gastar otra columna. */
.ult-eq { display: block; font-size: 11px; color: var(--ink-muted); }
table.ult td { vertical-align: top; }