/* ══════════════════════════════════════════════════════════════════
   PARTIDOS — jornadas, alineaciones y el NVP de cada jugador por partido
   Usa los tokens de scout.css (colores, --S serif, --G sans, --M etiquetas).
   Tres columnas en pantallas anchas (jornada · partido · jugador), dos en
   escritorio normal y una en tablet y movil, donde se navega entre pantallas.
   ══════════════════════════════════════════════════════════════════ */

/* ── Selector de seccion en la barra lateral ── */
.seccion-switch {
  display: flex; gap: 4px; padding: 3px;
  border: 1px solid var(--rule); border-radius: 999px;
  margin: 18px 28px 0;
}
.seccion-switch button {
  flex: 1; min-height: 36px; border: 0; border-radius: 999px; background: transparent;
  color: var(--ink-soft); cursor: pointer; display: grid; place-items: center; padding: 0;
}
.seccion-switch button svg { width: 21px; height: 21px; }
.seccion-switch button:hover { color: var(--purple); }
.seccion-switch button.on { background: var(--purple); color: var(--paper); }
/* En movil el selector va en la barra superior; el del menu seria una
   segunda copia al abrirlo (misma altura que el breakpoint de scout.css). */
@media (max-width: 768px) { .sidebar-drawer .seccion-switch { display: none; } }
@media (max-width: 480px) {
  .sidebar-top .seccion-switch { max-width: 220px !important; margin: 0 4px !important; }
}

/* En modo partidos se esconde lo que es de la ficha de jugador */
body.modo-partidos #main-content > :not(#partidos-root) { display: none !important; }
body.modo-partidos .sidebar-filters,
body.modo-partidos .sidebar-search { display: none; }
#partidos-root { display: none; }
body.modo-partidos #partidos-root { display: block; }
/* Trivia (static/trivia.css) */
body.modo-trivia #main-content > :not(#trivia-root) { display: none !important; }
body.modo-radio #main-content > :not(#radio-root) { display: none !important; }
body.modo-radio .sidebar-filters,
body.modo-radio .sidebar-search { display: none; }
body.modo-trivia .sidebar-filters,
body.modo-trivia .sidebar-search { display: none; }

/* ── Estructura ── */
.pt { --pt-gap: 28px; color: var(--ink); font-family: var(--G); }
.pt-head { display: flex; flex-direction: column; gap: 6px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
.pt-eyebrow { font-family: var(--M); font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-faint); }
.pt-title { font-family: var(--S); font-style: italic; font-size: 28px; line-height: 1; font-weight: 400; margin: 0; }
.pt-cols { display: grid; gap: var(--pt-gap); padding-top: 24px; align-items: start; }

/* Competicion | temporada | equipo: una fila sobre las tres columnas */
.pt-selectores {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(0, 1.2fr) auto; gap: 12px;
  padding: 18px 0; border-bottom: 1px solid var(--rule); max-width: 990px;
}
.pt-filtro { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.pt-filtro select {
  width: 100%; min-height: 40px; padding: 0 32px 0 12px; appearance: none; -webkit-appearance: none;
  border: 1px solid var(--rule); border-radius: 8px; color: var(--ink); cursor: pointer;
  font-family: var(--G); font-size: 14px; font-weight: 600;
  background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b6470' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 12px center;
}
.pt-filtro select:disabled { cursor: default; color: var(--ink-soft); background-image: none; }
.pt-filtro select:focus-visible { outline: 2px solid var(--purple); outline-offset: 1px; }
.pt-selectores-nota { grid-column: 1 / -1; margin: 0; }
/* El interruptor "Datos de temporada": junto a los filtros */
.pt-filtro-vista { padding-left: 8px; }
.pt-toggle {
  width: 52px; height: 30px; margin: 5px 0; padding: 0; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--paper-deep, var(--rule)); cursor: pointer; position: relative; transition: background .15s;
}
.pt-toggle span {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--paper);
  box-shadow: 0 1px 2px oklch(0 0 0 / .25); transition: transform .15s;
}
.pt-toggle[aria-checked="true"] { background: var(--purple); border-color: var(--purple); }
.pt-toggle[aria-checked="true"] span { transform: translateX(22px); }
.pt-toggle:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pt-toggle, .pt-toggle span { transition: none; } }
@media (max-width: 560px) {
  .pt-selectores { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .pt-filtro:first-child { grid-column: 1 / -1; }
  .pt-filtro-vista { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; padding-left: 0; }
  .pt-filtro-vista .pt-toggle { margin: 0; }
}
/* Los datos de temporada, a todo el ancho: una lista por columna */
.pt-temp { padding-top: 24px; }
.pt-temp-head { display: flex; flex-direction: column; gap: 6px; }
.pt-temp-head h2 { font-family: var(--S); font-size: 24px; font-weight: 400; line-height: 1.15; margin: 0; }
.pt-temp-grid { container-type: inline-size; }
.pt-temp-grid .pt-section { margin-top: 22px; min-width: 0; }
/* Los datos de temporada van en filas: una lista por puesto ocupa la fila entera, con una
   columna por puesto (.pt-puestos); dos listas sin puesto comparten fila (.pt-fila2). Cuando no
   caben se apilan todas: los puestos van en tres columnas o en una, nunca en dos y una suelta. */
.pt-fila2, .pt-puestos { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 32px; align-items: start; }
.pt-fila2 .pt-section, .pt-puestos > div { min-width: 0; }
@container (min-width: 600px) { .pt-fila2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container (min-width: 700px) { .pt-puestos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pt-col { min-width: 0; }
.pt-col-partido { container-type: inline-size; }

/* Ancho: jornada · partido · jugador */
@media (min-width: 1360px) {
  .pt-cols { grid-template-columns: 290px minmax(0, 1fr) 320px; }
  .pt-back { display: none !important; }
}
/* Escritorio normal: jornada · (partido o jugador) */
@media (min-width: 900px) and (max-width: 1359px) {
  .pt-cols { grid-template-columns: 280px minmax(0, 1fr); }
  .pt[data-pantalla="jugador"] .pt-col-partido { display: none; }
  .pt:not([data-pantalla="jugador"]) .pt-col-jugador { display: none; }
  .pt-col-jornada .pt-back, .pt-col-partido .pt-back { display: none !important; }
}
/* Tablet y movil: una pantalla a la vez */
@media (max-width: 899px) {
  .pt-cols { grid-template-columns: minmax(0, 1fr); padding-top: 16px; }
  .pt[data-pantalla="jornada"] .pt-col-partido,
  .pt[data-pantalla="jornada"] .pt-col-jugador,
  .pt[data-pantalla="partido"] .pt-col-jornada,
  .pt[data-pantalla="partido"] .pt-col-jugador,
  .pt[data-pantalla="jugador"] .pt-col-jornada,
  .pt[data-pantalla="jugador"] .pt-col-partido { display: none; }
  .pt:not([data-pantalla="jornada"]) .pt-selectores,
  .pt:not([data-pantalla="jornada"]) .pt-avisos { display: none; }
}

.pt-back {
  display: inline-flex; align-items: center; min-height: 44px; margin: -8px 0 8px;
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: var(--G); font-size: 15px; font-weight: 600; color: var(--purple);
}
.pt-label { font-family: var(--M); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.pt-h2 { font-family: var(--S); font-weight: 400; font-size: 21px; margin: 0; }
.pt-note { font-size: 12px; line-height: 1.45; color: var(--ink-faint); margin: 8px 0 0; }
.pt-empty { padding: 32px 0; color: var(--ink-faint); font-family: var(--S); font-style: italic; }
.pt-section { margin-top: 26px; display: flex; flex-direction: column; gap: 8px; }

/* ── Columna de la jornada ── */
.pt-comps { display: flex; flex-wrap: wrap; gap: 6px; }
.pt-chip {
  min-height: 34px; padding: 0 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule); background: transparent; color: var(--ink-soft);
  font-family: var(--G); font-size: 13px; font-weight: 600;
}
.pt-chip.on { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pt-stepper { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 18px 0 6px; }
.pt-stepper h2 { font-family: var(--S); font-weight: 400; font-size: 30px; line-height: 1.1; margin: 0; text-align: center; }
.pt-stepper h2 em { color: var(--purple); }
.pt-stepper small { display: block; font-family: var(--G); font-size: 13px; color: var(--ink-faint); text-align: center; margin-top: 2px; }
.pt-round-btn {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--rule); background: transparent; color: var(--ink); font-size: 18px;
}
.pt-round-btn:disabled { opacity: .35; cursor: default; }
.pt-season { font-family: var(--G); font-size: 13px; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); color: var(--ink); padding: 6px 8px; }
.pt-dia { font-family: var(--M); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); padding: 12px 2px 4px; }
.pt-match {
  display: flex; align-items: stretch; width: 100%; text-align: left; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); color: var(--ink);
  overflow: hidden; padding: 0; margin-bottom: 8px; font: inherit;
}
.pt-match:hover { border-color: var(--purple-soft); }
.pt-match.sel { border: 1.5px solid var(--purple); background: var(--purple-soft); }
.pt-match-teams { flex: 1; min-width: 0; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.pt-match-teams span { display: flex; justify-content: space-between; gap: 8px; font-size: 14px; font-weight: 600; }
.pt-match-teams b { font-family: var(--S); font-weight: 400; }
.pt-match-teams .gana { font-weight: 700; }
.pt-match-fig { width: 112px; flex-shrink: 0; border-left: 1px solid var(--rule-soft); padding: 8px 10px; display: flex; flex-direction: column; justify-content: center; gap: 3px; background: var(--paper-warm); }
.pt-match.sel .pt-match-fig { background: transparent; }
.pt-match-fig .n { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; line-height: 1.15; }
.pt-match-fig .n.sin { color: var(--ink-faint); font-weight: 500; }
.pt-match-j { font-family: var(--M); font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); }
.pt-stepper-eq { justify-content: flex-start; }
.pt-stepper-eq h2 { text-align: left; font-size: 26px; }
.pt-stepper-eq small { text-align: left; }

/* Avisos: seguir un equipo y la lista de los que sigues */
.pt-seguir {
  min-height: 40px; padding: 0 16px; margin: 4px 0 6px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--purple); background: transparent; color: var(--purple);
  font-family: var(--G); font-size: 14px; font-weight: 600;
}
.pt-seguir.on { background: var(--purple-soft); border-color: var(--purple-soft); color: var(--purple-deep); }
.pt-seguir { display: inline-flex; align-items: center; gap: 8px; }
.pt-campana { width: 18px; height: 18px; flex-shrink: 0; }
.pt-avisos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; border-bottom: 1px solid var(--rule-soft); max-width: 820px; }
.pt-seguido {
  display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 0 4px 0 12px; border-radius: 999px;
  background: var(--paper-warm); border: 1px solid var(--rule); font-size: 13px; font-weight: 600;
}
.pt-seguido button { border: 0; background: none; cursor: pointer; color: var(--ink-faint); min-width: 28px; min-height: 28px; font-size: 12px; }
.pt-link { border: 0; background: none; cursor: pointer; color: var(--purple); font-family: var(--G); font-size: 13px; font-weight: 600; text-decoration: underline; min-height: 32px; }
.pt-avisos-msg { flex-basis: 100%; margin: 0; }

/* ── Discos de NVP (nota del partido) ── */
.pt-disco {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-sizing: border-box;
  width: 34px; height: 34px; border-radius: 999px; font-family: var(--S); font-size: 14px; font-weight: 400;
  background: var(--paper); color: var(--ink); border: 1.5px solid var(--ink);
}
.pt-disco.sm { width: 28px; height: 28px; font-size: 13px; }
.pt-disco.lg { width: 40px; height: 40px; font-size: 15px; }
.pt-disco.b-top { background: var(--purple); color: var(--paper); border-color: var(--purple); }
.pt-disco.b-alto { background: var(--gold-soft); border-color: var(--gold); }
.pt-disco.b-medio { background: var(--paper); border-color: var(--ink); }
.pt-disco.b-bajo { background: var(--paper); color: var(--burgundy); border-color: var(--burgundy); }
.pt-disco.b-nulo { background: var(--paper-deep); color: var(--ink-faint); border: 1px dashed var(--slate); }
.pt-leyenda { display: flex; flex-wrap: wrap; gap: 8px 14px; font-size: 12px; color: var(--ink-soft); }
.pt-leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.pt-leyenda .pt-disco { width: 14px; height: 14px; }

/* ── Figuras de la jornada ── */
.pt-fig-row {
  display: flex; align-items: center; gap: 10px; min-height: 48px; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--rule-soft); background: none; padding: 0; color: var(--ink); font: inherit;
}
.pt-fig-row .pos { width: 14px; font-family: var(--S); font-size: 16px; color: var(--ink-faint); }
.pt-fig-row .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.pt-fig-row .txt b { font-size: 14px; }
.pt-fig-row .txt small { font-size: 12px; color: var(--ink-faint); }
.pt-linea { margin: 14px 0 0; font-family: var(--M); font-size: 10px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--purple); }
.pt-fig-row .pt-x { min-width: 44px; font-family: var(--S); font-size: 15px; color: var(--purple); font-variant-numeric: tabular-nums; }

/* ── Partido ── */
.pt-score { display: flex; align-items: center; justify-content: center; gap: 18px; }
.pt-score .eq { flex: 1; font-size: 18px; font-weight: 700; }
.pt-score .eq.l { text-align: right; }
.pt-score .res { font-family: var(--S); font-size: 40px; line-height: 1; white-space: nowrap; }
.pt-score-sub { text-align: center; font-size: 13px; color: var(--ink-faint); margin-top: 6px; }
/* Goles y asistencias bajo el marcador, cada lado bajo su equipo */
.pt-goles { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 12px; margin-top: 10px; font-size: 13px; line-height: 1.45; }
.pt-goles > div { display: flex; flex-direction: column; min-width: 0; }
.pt-goles .l { text-align: right; align-items: flex-end; }
.pt-goles .sep { width: 1px; background: var(--rule); }
.pt-goles .asi, .pt-goles .sin { font-size: 12px; color: var(--ink-faint); }
.pt-goles .sin { font-style: italic; }
.pt-goles em { font-style: normal; color: var(--ink-faint); font-size: 12px; }
.pt-goles .roja { display: inline-flex; align-items: center; gap: 5px; }
.pt-goles .l .roja { justify-content: flex-end; }
.pt-goles .roja i { display: inline-block; width: 8px; height: 11px; border-radius: 1.5px; background: var(--burgundy); }
.pt-figura {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer; margin-top: 16px;
  padding: 14px 16px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper-warm); color: var(--ink); font: inherit;
}
.pt-figura .num { font-family: var(--S); font-weight: 200; font-size: 40px; line-height: 1; color: oklch(0.52 0.12 72); }
.pt-figura .txt { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pt-figura .txt b { font-size: 17px; }
.pt-figura .txt small { font-size: 13px; color: var(--ink-soft); }
.pt-aviso { margin-top: 14px; padding: 10px 12px; border: 1px dashed var(--slate); border-radius: 10px; font-size: 13px; color: var(--ink-soft); }
.pt-tabs { display: flex; justify-content: center; border-bottom: 1px solid var(--rule); margin-top: 18px; }
.pt-tabs button {
  min-height: 44px; padding: 0 16px; border: 0; background: none; cursor: pointer; margin-bottom: -1px;
  border-bottom: 2px solid transparent; font-family: var(--G); font-size: 14px; font-weight: 600; color: var(--ink-faint);
}
.pt-tabs button.on { border-bottom-color: var(--purple); color: var(--ink); font-weight: 700; }
.pt-tab { margin-top: 16px; }

/* Alineaciones */
.pt-ali { display: grid; gap: 24px; }
@container (min-width: 620px) {
  .pt-ali { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); }
}
.pt-eqline { display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
/* Alto fijo y generoso, como FotMob (media cancha ~ una pantalla de movil):
   con el alto atado al ancho (358/600) cada linea de jugadores tenia ~57 px y
   los nombres se montaban. Con 1.200 px son ~120 px por linea. */
.pt-pitch {
  position: relative; margin: 8px 0; height: 945px;
  border-radius: 14px; background: oklch(0.955 0.014 150); border: 1px solid oklch(0.87 0.02 150); overflow: hidden;
}
.pt-pitch .ln { position: absolute; border-color: oklch(0.84 0.025 150); border-style: solid; border-width: 0; }
.pt-pitch .mid { left: 0; right: 0; top: 50%; border-top-width: 1px; }
.pt-pitch .circ { left: 50%; top: 50%; width: 25%; aspect-ratio: 1; transform: translate(-50%, -50%); border-width: 1px; border-radius: 999px; }
.pt-pitch .box-t { left: 22%; right: 22%; top: -1px; height: 7%; border-width: 0 1px 1px; }
.pt-pitch .box-b { left: 22%; right: 22%; bottom: -1px; height: 7%; border-width: 1px 1px 0; }
.pt-pitch .circ { width: 32%; }
.pt-pl {
  position: absolute; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 3px;
  min-width: 44px; border: 0; background: none; padding: 0; cursor: pointer; font: inherit;
}
.pt-pl .nm {
  font-size: 13px; font-weight: 700; line-height: 1.15; padding: 2px 6px; border-radius: 4px; white-space: nowrap;
  background: color-mix(in oklch, var(--paper) 85%, transparent); color: var(--ink);
  max-width: 84px; overflow: hidden; text-overflow: ellipsis;
}
.pt-pl .pt-disco.lg { width: 48px; height: 48px; font-size: 18px; }
.pt-pl.sel .pt-disco { outline: 3px solid var(--purple); outline-offset: 2px; }
.pt-sub {
  display: flex; align-items: center; gap: 12px; min-height: 48px; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--rule-soft); background: none; padding: 0; color: var(--ink); font: inherit;
}
.pt-sub .txt { flex: 1; display: flex; flex-direction: column; }
.pt-sub .txt b { font-size: 15px; }
.pt-sub .txt small { font-size: 12px; color: var(--ink-faint); }

/* Produce / Cuesta */
.pt-pc { display: grid; gap: 28px; }
@container (min-width: 640px) { .pt-pc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pt-filtros { display: flex; gap: 6px; flex-wrap: wrap; }
.pt-chart { position: relative; height: 340px; border: 1px solid var(--rule); border-radius: 14px; background: var(--paper); }
.pt-chart .area { position: absolute; left: 30px; right: 12px; top: 16px; bottom: 26px; border-left: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.pt-chart svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.pt-chart .ax { position: absolute; font-size: 11px; color: var(--ink-faint); }
.pt-chart .tag { position: absolute; font-family: var(--M); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.pt-chart .zona { position: absolute; font-size: 11px; font-weight: 600; }
.pt-pt { position: absolute; width: 0; height: 0; border: 0; background: none; padding: 0; cursor: pointer; }
/* Zona tocable de 32px alrededor del punto: el punto mide 12-14px */
.pt-pt::before { content: ''; position: absolute; left: -16px; top: -16px; width: 32px; height: 32px; border-radius: 999px; }
.pt-pt.sel i { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--ink); }
.pt-pt span.hover { display: none; background: var(--paper); padding: 1px 4px; border-radius: 4px; z-index: 2; }
@media (hover: hover) { .pt-pt:hover span.hover { display: block; } }
/* La tarjeta del punto tocado */
.pt-tip { position: absolute; width: 0; height: 0; z-index: 3; }
.pt-tip .caja {
  position: absolute; transform: translateX(var(--tx, 0)); display: flex; gap: 10px; align-items: flex-start;
  width: max-content; max-width: 230px; padding: 10px 12px; border-radius: 12px;
  background: var(--paper); border: 1px solid var(--rule); box-shadow: 0 6px 20px oklch(0.2 0.02 300 / .14);
}
.pt-tip .txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pt-tip b { font-size: 14px; }
.pt-tip small { font-size: 12px; line-height: 1.35; color: var(--ink-soft); }
.pt-tip .pt-link { align-self: flex-start; padding: 0; min-height: 30px; }
.pt-pt i { position: absolute; box-sizing: border-box; }
.pt-pt i.loc { left: -7px; top: -7px; width: 14px; height: 14px; border-radius: 999px; background: var(--purple); border: 1.5px solid var(--paper); }
.pt-pt i.vis { left: -6px; top: -6px; width: 12px; height: 12px; border-radius: 2px; background: oklch(0.72 0.12 78); border: 1.5px solid oklch(0.52 0.12 72); }
.pt-pt span { position: absolute; top: -8px; white-space: nowrap; font-size: 11px; font-weight: 700; }
.pt-uno {
  display: flex; align-items: center; gap: 8px; min-height: 40px; width: 100%; text-align: left; cursor: pointer;
  border: 0; border-bottom: 1px solid var(--rule-soft); background: none; padding: 0; color: var(--ink); font: inherit;
}
.pt-uno .txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }
.pt-uno .txt b { font-size: 14px; }
.pt-uno .txt small { font-size: 11px; color: var(--ink-faint); }
.pt-bars { width: 150px; flex-shrink: 0; display: flex; align-items: center; }
.pt-bars .c, .pt-bars .p { width: 74px; display: flex; align-items: center; gap: 4px; font-size: 11px; }
.pt-bars .c { justify-content: flex-end; color: var(--burgundy); }
.pt-bars .p { color: var(--purple-deep); }
.pt-bars .axis { width: 1px; height: 22px; background: var(--slate); }
.pt-bars i { display: block; height: 10px; }
.pt-bars .c i { background: var(--burgundy); border-radius: 3px 0 0 3px; }
.pt-bars .p i { background: var(--purple); border-radius: 0 3px 3px 0; }

/* Equipos */
.pt-eq { display: grid; gap: 28px; }
@container (min-width: 640px) { .pt-eq { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.pt-eq-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pt-eq-card { padding: 14px; border: 1px solid var(--rule); border-radius: 14px; display: flex; flex-direction: column; gap: 2px; }
.pt-eq-card.gana { border: 1.5px solid var(--purple); background: color-mix(in oklch, var(--purple-soft) 45%, transparent); }
.pt-eq-card b { font-size: 14px; }
.pt-eq-card .num { font-family: var(--S); font-weight: 400; font-size: 44px; line-height: 1.05; }
.pt-eq-card small { font-size: 12px; color: var(--ink-soft); }
.pt-hbar { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.pt-hbar > span:first-child { width: 58px; }
.pt-hbar .track { flex: 1; height: 8px; border-radius: 4px; background: var(--rule-soft); }
.pt-hbar .track i { display: block; height: 8px; border-radius: 4px; }
.pt-hbar strong { width: 44px; text-align: right; }
.pt-lineas-row { display: grid; grid-template-columns: 30px minmax(0, 1fr) 76px minmax(0, 1fr) 30px; align-items: center; gap: 6px; min-height: 42px; border-bottom: 1px solid var(--rule-soft); }
.pt-lineas-row .num { font-family: var(--S); font-size: 18px; text-align: center; color: var(--ink-faint); }
.pt-lineas-row .num.gana { color: var(--ink); font-weight: 700; }
.pt-lineas-row .lab { text-align: center; font-size: 13px; font-weight: 600; }
.pt-lineas-row i { display: block; height: 12px; }
.pt-cuida { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: center; min-height: 42px; border-bottom: 1px solid var(--rule-soft); }
.pt-cuida .num { font-family: var(--S); font-size: 18px; text-align: center; color: var(--ink-faint); }
.pt-cuida .num.gana { color: var(--ink); font-weight: 700; }
.pt-cuida .lab { text-align: center; font-size: 13px; color: var(--ink-soft); }
.pt-sostuvo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pt-caro { margin-top: 4px; padding: 8px 10px; border-radius: 10px; border: 1px dashed var(--burgundy); font-size: 12px; line-height: 1.35; color: var(--ink-soft); }
.pt-caro strong { color: var(--burgundy); }

/* ── Jugador en el partido ── */
.pt-jug-h { display: flex; flex-direction: column; gap: 4px; }
.pt-jug-h h2 { font-family: var(--S); font-weight: 400; font-size: 32px; line-height: 1.1; margin: 0; }
.pt-jug-h h2 em { color: var(--purple); }
.pt-jug-h div { font-size: 14px; color: var(--ink-soft); }
.pt-nota { margin-top: 18px; padding: 18px 16px; border: 1px solid var(--rule); border-radius: 14px; display: flex; gap: 16px; align-items: center; background: var(--paper-warm); }
.pt-nota .izq { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 92px; flex-shrink: 0; }
.pt-nota .num { font-family: var(--S); font-weight: 200; font-size: 56px; line-height: 1; color: oklch(0.52 0.12 72); }
.pt-nota .der { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.pt-cmp { display: grid; grid-template-columns: minmax(0, 1fr) 56px 64px 24px; font-size: 14px; }
.pt-cmp > div { padding: 8px 0; border-bottom: 1px solid var(--rule-soft); }
.pt-cmp .hd { font-family: var(--M); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); border-bottom-color: var(--rule); }
.pt-cmp .r { text-align: right; }
.pt-cmp .hoy { font-weight: 700; }
.pt-cmp .med { color: var(--ink-faint); }
.pt-cmp .up { color: var(--purple); }
.pt-cmp .down { color: var(--burgundy); }
.pt-cmp .eq { color: var(--ink-faint); }
.pt-perd { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pt-perd div { padding: 12px; border: 1px solid var(--rule); border-radius: 12px; display: flex; flex-direction: column; gap: 2px; }
.pt-perd b { font-family: var(--S); font-weight: 400; font-size: 21px; }
.pt-perd small { font-size: 12px; color: var(--ink-soft); }
.pt-skill { display: flex; align-items: center; gap: 10px; min-height: 34px; }
.pt-skill > span:first-child { width: 84px; font-size: 14px; }
.pt-skill .track { flex: 1; height: 6px; border-radius: 3px; background: var(--rule-soft); }
.pt-skill .track i { display: block; height: 6px; border-radius: 3px; }
.pt-skill .val { width: 26px; text-align: right; font-size: 14px; font-weight: 600; }
.pt-btn {
  display: flex; align-items: center; justify-content: center; min-height: 46px; width: 100%; margin-top: 22px;
  border-radius: 12px; border: 1px solid var(--ink); background: transparent; color: var(--ink);
  font-family: var(--G); font-weight: 700; font-size: 15px; cursor: pointer;
}
.pt-btn:hover { border-color: var(--purple); color: var(--purple); }

@media (max-width: 480px) {
  .pt-score .res { font-size: 34px; }
  .pt-score .eq { font-size: 16px; }
  .pt-match-fig { width: 104px; }
}

/* Por que esta nota */
.pt-pq { display: grid; gap: 12px; }
@container (min-width: 460px) { .pt-pq { grid-template-columns: 1fr 1fr; } }
.pt-pq ul { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pt-pq li { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; border-bottom: 1px solid var(--rule-soft); padding-bottom: 5px; }
.pt-pq li b { font-weight: 600; white-space: nowrap; font-size: 12.5px; color: var(--ink-soft); }
.pt-pq > div:first-child li b { color: var(--purple); }
.pt-pq > div:last-child li b { color: var(--burgundy); }

/* ── Las tres lecturas (lo generado, lo ejecutado, el resultado) ── */
.pt-lecturas { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--rule-soft); border-radius: 10px; background: var(--paper-warm); display: flex; flex-direction: column; gap: 6px; }
.pt-lec-fila { display: grid; grid-template-columns: minmax(0, 1.25fr) auto minmax(0, 1fr); gap: 10px; align-items: baseline; }
.pt-lec-fila .lab { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.pt-lec-fila .lab b { font-size: 14px; font-weight: 600; }
.pt-lec-fila .lab small { font-size: 11.5px; color: var(--ink-faint); }
.pt-lec-fila .marc { font-family: var(--S); font-size: 19px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pt-lec-fila .ver { font-size: 13px; color: var(--purple); text-align: right; min-width: 0; }
.pt-lecturas .pt-note { margin-top: 2px; }

.pt-lec-tabla { --lec: 64px; display: flex; flex-direction: column; margin-top: 4px; max-width: 760px; }
.pt-lec-cab, .pt-lec-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) repeat(3, var(--lec)); gap: 6px; align-items: center; }
.pt-lec-cab { padding: 0 6px 6px; border-bottom: 1px solid var(--ink); font-family: var(--M); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); }
.pt-lec-cab button { all: unset; cursor: pointer; text-align: right; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; }
.pt-lec-cab button { white-space: nowrap; }
.pt-lec-cab button.on { color: var(--purple); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 2px; }
.pt-lec-cab button:focus-visible, .pt-lec-row:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }
.pt-lec-row { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: 22px minmax(0, 1fr) repeat(3, var(--lec)); gap: 6px; align-items: center; padding: 8px 6px; border-bottom: 1px solid var(--rule-soft); font-size: 14px; }
.pt-lec-row:hover, .pt-lec-row.on { background: var(--paper-warm); }
.pt-lec-row .pos { font-family: var(--S); color: var(--ink-faint); }
.pt-lec-row .eq { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.pt-lec-row .n { text-align: right; font-variant-numeric: tabular-nums; }
.pt-lec-row .n.d { font-size: 13px; color: var(--ink-faint); }
.pt-lec-row .n .mas { color: var(--green, #1F7A4D); }
.pt-lec-row .n .menos { color: var(--burgundy, #A8323E); }
.pt-lec-row .n.pts { font-family: var(--S); font-size: 16px; }
.pt-lec-det { padding: 10px 6px 12px 34px; border-bottom: 1px solid var(--rule-soft); background: var(--paper-warm); display: flex; flex-direction: column; gap: 6px; }
.pt-lec-det p { margin: 0; font-size: 13.5px; line-height: 1.4; }
.pt-lec-det .pt-label { display: block; }
.pt-lec-det button { all: unset; cursor: pointer; font-weight: 600; color: var(--purple); }
.pt-lec-det button:hover { text-decoration: underline; }
.pt-lec-det small { color: var(--ink-faint); font-size: 12.5px; }
.pt-lec-det b.mas { color: var(--green, #1F7A4D); }
.pt-lec-det b.menos { color: var(--burgundy, #A8323E); }
/* Los movimientos de un equipo, en goles: a favor y en contra */
.pt-lec-gol { display: flex; flex-direction: column; max-width: 360px; margin: 2px 0 4px; font-size: 13.5px; }
.pt-lec-gol > div { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, 64px); gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--rule-soft); align-items: baseline; }
.pt-lec-gol > div.cab { font-family: var(--M); font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-faint); border-bottom-color: var(--ink); }
.pt-lec-gol .n { text-align: right; font-variant-numeric: tabular-nums; }
.pt-lec-gol .n.fin { font-family: var(--S); font-size: 15px; }
/* La leyenda: que es cada columna, a la vista (en el celular no hay cursor para el titulo) */
.pt-lec-ley { margin: 6px 0 0; max-width: 760px; display: flex; flex-direction: column; gap: 5px; }
.pt-lec-ley > div { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.pt-lec-ley dt { font-family: var(--M); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.pt-lec-ley dd { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-faint); }
@media (max-width: 560px) {
  .pt-lec-tabla { --lec: 54px; }
  .pt-lec-cab { font-size: 8.5px; letter-spacing: 0; }
  .pt-lec-row { font-size: 13px; gap: 4px; padding: 9px 2px; }
  .pt-lec-cab { gap: 4px; padding: 0 2px 6px; }
  .pt-lec-det { padding-left: 14px; }
  .pt-lec-fila { grid-template-columns: minmax(0, 1fr) auto; }
  .pt-lec-fila .ver { grid-column: 1 / -1; text-align: left; margin-top: -4px; }
}

/* Cómo leer la nota del partido: cerrado por defecto, debajo del por qué */
.pt-como { margin-top: 14px; border-top: 1px solid var(--rule-soft); padding-top: 10px; }
.pt-como > summary { cursor: pointer; font-size: 13.5px; font-weight: 600; color: var(--purple); list-style: none; }
.pt-como > summary::-webkit-details-marker { display: none; }
.pt-como > summary::before { content: '+ '; }
.pt-como[open] > summary::before { content: '− '; }
.pt-como p { font-size: 13.5px; line-height: 1.5; margin: 8px 0 0; color: var(--ink-soft); }
.pt-como .pt-como-tit { font-weight: 600; color: var(--ink); margin-top: 14px; }
.pt-como-pos { margin-top: 10px; }
.pt-como-pos .pt-como-lado { font-size: 12.5px; font-weight: 600; margin: 6px 0 0; color: var(--ink); }
.pt-como-pos ul { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.pt-como-pos li { font-size: 13.5px; border-left: 2px solid var(--rule); padding-left: 10px; }
.pt-como-pos li small { color: var(--ink-faint); font-size: 12px; }
.pt-como-pos li p { margin: 3px 0 0; font-size: 13px; }
.pt-como-n { font-family: var(--font-display, inherit); color: var(--purple); font-weight: 600; margin-left: 4px; }