/* La serie: bracket, camino, previa del partido y mundial. Dueño: V3b (PLAN.md §V.7).
   Salió de componentes.css / pantallas.css en V2-A: solo mudanza de bloques, ninguna regla cambió. */

/* K2d — la previa del partido: tu fuerza contra la del rival y la p que el motor tira. */
.previa {
  margin: var(--s-2) 0;
  padding: var(--s-2) var(--s-3);
  background: var(--bg-raised);
  border: 1px solid var(--line);
}
/* V3b: la previa del acompañante (la completa, abierta) conserva el aire de siempre. */
.previa--completa { margin-top: 0; padding: var(--s-3); }
/* V3b: en el escenario, UNA línea (la p, contra quién y lo que define el partido) y el desglose detrás de un desplegable. */
.previa-resumen > summary,
.serie-resumen > summary { list-style: none; cursor: pointer; }
.previa-resumen > summary::-webkit-details-marker,
.serie-resumen > summary::-webkit-details-marker { display: none; }
.previa-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-1) var(--s-3); min-width: 0; }
.previa-linea-p { display: inline-flex; align-items: baseline; gap: var(--s-1); }
.previa-linea-pct { font-family: var(--font-display); font-size: var(--fs-5); color: var(--live); line-height: 1; font-variant-numeric: tabular-nums; }
.previa-linea-etq { font-size: var(--fs-0); color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.06em; }
.previa-linea-rival { font-size: var(--fs-2); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.previa-linea-sub { font-size: var(--fs-1); color: var(--ink-dim); min-width: 0; overflow-wrap: anywhere; }
.previa-linea-mas,
.serie-linea-mas { margin-left: auto; font-size: var(--fs-0); color: var(--ice-dim); text-transform: uppercase; letter-spacing: var(--track-label); white-space: nowrap; }
.previa-linea-mas::after,
.serie-linea-mas::after { content: ' ▾'; }
.previa-resumen[open] > summary .previa-linea-mas::after,
.serie-resumen[open] > summary .serie-linea-mas::after { content: ' ▴'; }
.previa-detalle { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }

.previa-cabecera { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-2); }
.previa-titulo { font-family: var(--font-display); font-size: var(--fs-3); color: var(--ink); text-transform: uppercase; letter-spacing: 0.04em; }
.previa-sub { font-size: var(--fs-1); color: var(--ink-dim); }
.previa-porque { margin-top: var(--s-2); font-size: var(--fs-2); color: var(--ink); overflow-wrap: anywhere; }
.previa-duelo { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--s-2); margin: var(--s-2) 0; }
.previa-lado { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: var(--s-1); min-width: 0; }
.previa-lado > :first-child { grid-row: span 2; align-self: center; }
.previa-lado--rival { text-align: right; grid-template-columns: 1fr auto; }
.previa-lado--rival > :first-child { grid-column: 2; grid-row: 1 / span 2; }
.previa-nombre { font-size: var(--fs-1); color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* A 375 px los nombres de org largos no se cortan ("Team Secre…"): bajan de renglón. */
@media (max-width: 479px) {
  .previa-nombre { white-space: normal; overflow-wrap: anywhere; }
}
.previa-fuerza { font-family: var(--font-display); font-size: var(--fs-5); color: var(--ink); font-variant-numeric: tabular-nums; }
.previa-p { display: flex; flex-direction: column; align-items: center; }
.previa-pct { font-family: var(--font-display); font-size: var(--fs-6); color: var(--live); line-height: 1; font-variant-numeric: tabular-nums; }
.previa-linea-regla, .previa-regla { font-family: var(--font-display); color: var(--live); line-height: 1.1; text-wrap: balance; }
.previa-linea-regla { font-size: var(--fs-2); }
.previa-regla { font-size: var(--fs-3); text-align: center; max-width: 18ch; }
.previa-pct-label { font-size: var(--fs-0); color: var(--ink-mute); text-transform: uppercase; letter-spacing: 0.06em; }
.previa-desglose { display: grid; grid-template-columns: 1fr auto; gap: 2px var(--s-3); margin: 0; font-size: var(--fs-1); }
.previa-desglose dt { color: var(--ink-dim); }
.previa-desglose dd { margin: 0; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.previa-desglose dd[data-signo="up"] { color: var(--up); }
.previa-desglose dd[data-signo="down"] { color: var(--down); }
.previa-nota { margin-top: var(--s-2); font-size: var(--fs-1); color: var(--ink-mute); }
.option-prob { margin-top: var(--s-1); font-size: var(--fs-1); color: var(--live); font-variant-numeric: tabular-nums; }
.resultado-prob { margin-top: var(--s-1); font-size: var(--fs-0); color: var(--ink-mute); }

/* --- K4-C: la línea de crónica (un evento que resolvió tu perfil) y el perfil en la ficha --- */
.log-cronica-planteo {
  font-size: var(--fs-1);
  color: var(--ink-dim);
  margin-bottom: var(--s-1);
}
.log-cronica-perfil {
  color: var(--ice-dim);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  font-size: var(--fs-1);
}
.ficha-perfil {
  margin-left: var(--s-2);
  padding: 0 var(--s-2);
  border: 1px solid var(--line);
  font-size: var(--fs-1);
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--ice-dim);
}

/* K5-A: el Mundial en una tarjeta del feed (components/mundial.js). Compacta: entra en 375 px. */
.mundial { display: flex; flex-direction: column; gap: 6px; border-left: 3px solid var(--gold-deep); }
.mundial--campeon { border-left-color: var(--gold); }
.mundial-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.mundial-titulo { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.mundial-resultado { font-size: 0.85em; opacity: 0.85; }
.mundial-texto { font-size: 0.9em; }
.mundial-swiss { display: flex; flex-direction: column; gap: 4px; }
.mundial-rotulo { font-size: 0.72em; text-transform: uppercase; letter-spacing: 0.06em; opacity: 0.7; }
.mundial-cruces { display: flex; flex-wrap: wrap; gap: 4px; }
.mundial-cruce { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 1px 6px; border-radius: 4px; font-size: 0.78em; background: var(--line-faint); }
.mundial-cruce-res { font-weight: 700; }
.mundial-cruce--w .mundial-cruce-res { color: var(--up); }
.mundial-cruce--l .mundial-cruce-res { color: var(--down); }
.mundial-cruce-rival { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 9em; }
.mundial-bracket { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-items: center; }
.mundial-etapa { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mundial-serie { display: flex; flex-direction: column; padding: 2px 4px; border-radius: 4px; font-size: 0.72em; background: var(--bg-raised); min-width: 0; }
.mundial-serie--tuya { outline: 1px solid var(--gold); background: var(--gold-fill); }
.mundial-equipo { display: flex; justify-content: space-between; gap: 4px; opacity: 0.6; min-width: 0; }
.mundial-equipo--gano { opacity: 1; font-weight: 600; }
.mundial-equipo-nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.mundial-campeon { font-size: 0.8em; opacity: 0.85; }

/* ==========================================================================
   7. EL BRACKET Y EL CAMINO DE LA SERIE (fase T6)
   Visible mientras `state.serie.activa`. `serie.mapas` + `serie.quemados`
   son la mecánica más distintiva del juego (Fearless draft) y hasta esta
   fase eran una línea de texto plana.
   ========================================================================== */

.serie-contexto {
  margin-top: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--bg-raised);
  border-left: 3px solid var(--gold);
}
/* V3b: el tablero completo (el del acompañante, abierto) conserva el aire de siempre. */
.serie-contexto--completo { margin-top: 0; padding: var(--s-3) var(--s-4); }

/* V3b: en el escenario, el marcador en UNA línea (rival, marcador, mapa n de N, Fearless) y el camino detrás de un desplegable. */
.serie-linea { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-3); min-width: 0; }
.serie-linea-duelo { display: inline-flex; align-items: center; gap: var(--s-2); min-width: 0; }
.serie-linea-score { display: inline-flex; align-items: baseline; gap: var(--s-1); font-family: var(--font-display); font-size: var(--fs-5); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1; }
.serie-linea-rival { font-size: var(--fs-2); color: var(--ink); min-width: 0; overflow-wrap: anywhere; }
.serie-linea-dato { font-size: var(--fs-1); color: var(--ink-dim); }
.serie-detalle { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--line); }

/* Desde 1180 px el tablero (o la previa) entero está en el acompañante y el escenario NO lo repite: ni la línea ni su desplegable
   (menos números a la vista, y lo que se decide queda solo). Qué trae el acompañante lo dice el atributo
   data-acompanante de #acompanante (ui/acompanante.js). En un plan de serie o en el Swiss el acompañante es el tablero, no la previa:
   ahí la previa SÍ queda en el escenario, con su desplegable. Debajo de 1180 px no hay acompañante y las dos líneas son todo el contexto. */
@media (min-width: 1180px) {
  .shell:has(#acompanante[data-acompanante="serie"], #acompanante[data-acompanante="swiss"]) .serie-contexto:not(.serie-contexto--completo),
  .shell:has(#acompanante[data-acompanante="previa"]) .previa:not(.previa--completa) { display: none; }
}

.serie-bracket { display: flex; gap: var(--s-1); margin-bottom: var(--s-2); }
.serie-bracket-paso {
  flex: 1 1 0;
  padding: var(--s-1) var(--s-2);
  text-align: center;
  background: var(--bg-sunken);
  border-radius: var(--r-sharp);
  font-family: var(--font-display);
  font-size: var(--fs-0);
  font-weight: 700;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--ink-mute);
}
.serie-bracket-paso--superada { background: var(--up); color: var(--bg-void); }
.serie-bracket-paso--actual {
  background: var(--live);
  color: var(--bg-void);
  animation: latir-vivo-suave 2s var(--ease-in-out) infinite;
}
@keyframes latir-vivo-suave {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}
.serie-camino { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.serie-mapa {
  padding: 2px var(--s-2);
  border-radius: var(--r-sharp);
  font-size: var(--fs-1);
  font-variant-numeric: tabular-nums;
}
.serie-mapa--ganado  { background: var(--up-fill); color: var(--up); }
.serie-mapa--perdido { background: var(--down-fill); color: var(--down); }

.serie-cierres-lista {
  margin-top: var(--s-2);
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.serie-cierre-item {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  font-size: var(--fs-0);
}

.serie-cierre-tag {
  font-family: var(--font-display);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.serie-cierre-item--ganado .serie-cierre-tag {
  color: var(--up);
}

.serie-cierre-item--perdido .serie-cierre-tag {
  color: var(--down);
}

.serie-cierre-texto {
  color: var(--ink-dim);
}

/* V3b: el separador del marcador en la línea no es el de 28 px del tablero grande; y el resumen del Swiss del acompañante
   cuenta el récord entero en vez de cortarlo con "…". */
.serie-linea-score .serie-score-sep { font-size: inherit; }
/* El tablero de la serie del acompañante (~340 px) no entra con el chip al lado del nombre y el marcador de 64 px: el escudo
   va arriba del nombre, el nombre baja de renglón entre palabras (nunca "KI…") y el marcador es más chico. */
.serie-contexto--completo .serie-scoreboard { gap: var(--s-2); }
.serie-contexto--completo .serie-score { font-size: var(--fs-7); }
.serie-contexto--completo .serie-lado { flex-direction: column; gap: var(--s-1); text-align: center; justify-content: flex-start; }
.serie-contexto--completo .serie-lado--rival { flex-direction: column-reverse; justify-content: flex-end; }
.serie-contexto--completo .serie-lado-nombre { font-size: var(--fs-2); white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: break-word; max-width: 100%; }

/* C1b (PLANUI §0.3, 6.2): la fila de mapas (components/serie.js, crearFilaDeMapas). Una tesela por mapa: el número y el
   marcador arriba, VICTORIA o DERROTA en --up / --down, tu campeón con su cara y con qué salió el rival. La usan el relato
   (los mapas de una serie que no frenó, y el mapa ya contado en el cara a cara) y la tarjeta de post-serie. */
/* flex y no una grilla auto-fill: con un tope de ancho, la grilla aportaba seis columnas a su ancho mínimo y empujaba la
   página entera a 645 px en un celular */
.rl-mapas { display: flex; flex-wrap: wrap; gap: 6px; }
.rl-mapa {
  --rl-res: var(--up);
  position: relative; display: grid; gap: 4px; align-content: start; flex: 0 0 auto; width: 128px; min-width: 0; padding: 8px 10px 9px 12px;
  border-radius: 8px; background: var(--panel); box-shadow: inset 0 0 0 1px var(--linea);
  overflow: hidden; text-shadow: none;
}
.rl-mapa[data-resultado='L'] { --rl-res: var(--down); }
.rl-mapa::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--rl-res); box-shadow: 0 0 10px var(--rl-res); }
.rl-mapa-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font: 600 10.5px / 1 var(--f-mono); letter-spacing: var(--tracking-mono); color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.rl-mapa-marcador { letter-spacing: 0.04em; color: var(--ink-dim); }
.rl-mapa-res { font: 800 15px / 1 var(--f-display); font-stretch: var(--ancho-titulo); letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap; color: var(--rl-res); }
.rl-mapa-camp { display: flex; align-items: center; gap: 6px; min-width: 0; font: 600 13px / 1.15 var(--f-cuerpo); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-mapa-camp .campeon-tile { flex: none; width: 18px; height: 18px; border-radius: 50%; }
.rl-mapa-camp .campeon-tile-ini { font-size: 7px; }
.rl-mapa-rival { font: 500 11px / 1.2 var(--f-mono); color: var(--ink-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rl-mapa--grande { width: 240px; padding: 10px 14px 12px 16px; }
.rl-mapa--grande .rl-mapa-res { font-size: 22px; }
.rl-mapa--grande .rl-mapa-camp { font-size: 15px; }
.rl-mapa--grande .rl-mapa-camp .campeon-tile { width: 24px; height: 24px; }
@media (max-width: 640px) {
  .rl-mapas { gap: 5px; }
  .rl-mapa { width: calc((100% - 10px) / 3); padding: 7px 8px 8px 10px; }
  .rl-mapa--grande { width: min(240px, 100%); }
  .rl-mapa-res { font-size: 13px; letter-spacing: 0; }
  .rl-mapa--grande .rl-mapa-res { font-size: 19px; }
}

/* W1-D (PLANUI §0.7, W3): "tan cerca", la final perdida en el mapa que la definía (placa de cierre, components/caraACara.js) */
.tx-cierre-cerca {
  display: grid; justify-items: center; gap: 6px; max-width: min(620px, 92%); margin: 0; padding: 10px 16px;
  text-align: center; border-radius: var(--r-panel); background: var(--tx-cerca-fondo);
}
.tx-cierre-cerca b { font: 900 clamp(22px, 2.6vw, 32px) / 1 var(--f-display); font-stretch: var(--ancho-titulo); text-transform: uppercase; color: var(--tx-cerca); }
.tx-cierre-cerca span { font-size: 16px; line-height: 1.4; color: var(--ink); text-wrap: balance; }
@media (max-width: 560px) { .tx-cierre-cerca span { font-size: 14px; } }
/* el Continuar de "tan cerca" (el botón del kit de los momentos, `.mo-seguir`, en el flujo de la placa) */
.tx-cierre-seguir { position: static; transform: none; pointer-events: auto; margin-top: 4px; }