/* 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);
  clip-path: var(--clip-corte-sm);
}
/* 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-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%; }