/* ══════════════════════════════════════════════════════════════════
   COP · LA TARJETA DE PARTIDO (el componente de toda la app)
   ──────────────────────────────────────────────────────────────────
   Ronda 18, 24/09/2026. Franco: *«quiero que dejes full la página y las
   tarjetas de partidos, con este diseño como componente estándar que se
   va a utilizar en cada sección donde haya una tarjeta de partido»*.

   Es la C2 de la probeta (rondas 10 a 17), con lo que Franco eligió en
   cada vuelta:
     · cabecera grande: CP · fecha · hora ········· liga      (ronda 11)
     · una fila por equipo: camiseta · nombre · ANILLO de probabilidad ·
       puntos. El anillo se dibuja y el número sube al entrar en
       pantalla, con un destello al llegar                 (rondas 10-11)
     · pie: el ícono de jugadores (Dúo, en relieve) con la cantidad, y
       los dos botones                                     (rondas 12, 18)
     · la luz: NEÓN sin base, UN color por club — el de su camiseta
       (`COPLuces.rgbDeEquipo`) —; el anillo y los puntos del mismo color,
       lisos                                               (rondas 12-18)

   ⚠ PREFIJO `ctp-`: no pisa ninguna clase de las pantallas. Las clases
   viejas (`match-card`, `mc-play`, `mc-btn`…) que las pantallas usan
   para su JS se pasan por `clase` y en los botones, y NO traen estilo:
   `cop-ui-partido.css` sólo pinta `.cop-partidos > .cop-partido`, que
   esta tarjeta no usa.
   ⚠ Va DESPUÉS de `cop-borde.css` y `cop-boton.css` no hace falta: los
   botones son `.cop-b` y se dibujan solos; esta hoja sólo les da ancho.
   ══════════════════════════════════════════════════════════════════ */
.ctp{
  --ctp-bg: var(--bg, #0f0f0f);
  position:relative;box-sizing:border-box;width:100%;display:block;
  color:#fff;font-family:Inter, system-ui, sans-serif;
  background:var(--ctp-bg);overflow:hidden;
}
.ctp[hidden]{display:none}
.ctp *{box-sizing:border-box}
.ctp + .ctp::after{content:"";position:absolute;top:0;left:var(--ctp-aire, 22px);right:var(--ctp-aire, 22px);height:1px;
  background:var(--card-border, #1e2330)}  /* la línea entre tarjetas, con el aire de los costados (como antes) */

/* ⚠⚠ RONDA 19 (24/09/2026): LAS MEDIDAS Y LA LUZ DE ANTES. Franco: «quedó
   demasiado grande la tarjeta, no me gusta, quiero que hagas todo del tamaño
   de antes en cuanto a camiseta, nombres, tamaño de la fuente, etc. y tenés
   que eliminar las luces de la izquierda nuevas y usar las de antes (…)
   manteniendo la estructura actual con los usuarios y botones de
   estadísticas y jugar ahora abajo, con los círculos de porcentaje y los
   recuadros de puntos a la derecha».
   Los números son los MEDIDOS en la tarjeta vieja (`cop-ui-partido.css` +
   `cop-franjas-equipo.css`) a 390 px: aire lateral 22 px (16 abajo de 360),
   camiseta 44, nombre 15,2 px/700, cabecera 12,5 px, chip 52 × 30,
   botones de 36. El neón y su resplandor se fueron. */
.ctp{--ctp-aire:22px}
@media (max-width:359px){ .ctp{--ctp-aire:16px} }

/* ── la cabecera: CP · fecha · hora ·········· liga ──────────────── */
.ctp-cab{display:flex;align-items:center;gap:var(--gap-md, .7rem);padding:1.05rem var(--ctp-aire) .55rem;min-width:0}
.ctp-cab > img{width:26px;height:26px;object-fit:contain;flex:0 0 auto}
.ctp-cuando{display:flex;align-items:baseline;gap:var(--gap-md, .7rem);flex:0 0 auto}
.ctp-fecha{font-weight:600;font-size:var(--fs-sm, .8rem);white-space:nowrap}
.ctp-hora{font-weight:500;font-size:var(--fs-sm, .8rem);color:var(--text-dim, #9aa3b5);white-space:nowrap}
.ctp-liga{margin-left:auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-weight:600;font-size:var(--fs-sm, .8rem);color:var(--text-dim, #9aa3b5);text-align:right}

/* ── una fila por equipo ─────────────────────────────────────────── */
.ctp-fila{--rgb:150,158,176;position:relative;isolation:isolate;display:grid;align-items:center;min-width:0;
  grid-template-columns:44px minmax(0,1fr) auto auto;column-gap:var(--gap-md, .7rem);padding:0 var(--ctp-aire);min-height:44px}
.ctp-fila + .ctp-fila{margin-top:8px}
.ctp-kit{position:relative;display:grid;place-items:center}
.ctp-kit img{position:relative;width:44px;height:44px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.45))}
.ctp-nom{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-width:0;
  font-weight:700;font-size:var(--fs-base, 1rem);line-height:1.15;letter-spacing:-.2px;overflow-wrap:normal;word-break:normal}

/* LA LUZ · LA DE ANTES (`cop-franjas-equipo.css`, 22/08): una pared de color
   que nace en el BORDE de la pantalla y muere donde empieza el nombre. Las
   dos filas se tocan en el medio a pleno y se apagan hacia afuera con una
   máscara (arriba en la de arriba, abajo en la de abajo).
   ⚠ El color es el del club (ronda 18, uno solo), llevado a su intensidad
   (`rgbDeEquipo`): con el color crudo, el azul oscuro de Boca no se veía. */
.ctp-fila::before{content:"";position:absolute;z-index:-1;pointer-events:none;left:0;
  width:calc((var(--ctp-aire) + 44px + .65rem) * 1.12);
  top:var(--ctp-arriba, -1rem);bottom:var(--ctp-abajo, -1rem);
  background:linear-gradient(90deg, rgba(var(--rgb),.95) 0%, rgba(var(--rgb),.74) 26%, rgba(var(--rgb),.40) 52%,
    rgba(var(--rgb),.14) 74%, rgba(var(--rgb),0) 92%);
  -webkit-mask-image:var(--ctp-mask);mask-image:var(--ctp-mask);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}
.ctp-fila:nth-of-type(1)::before{--ctp-arriba:-1rem;--ctp-abajo:-4px;
  --ctp-mask:linear-gradient(to top, #000 0%, rgba(0,0,0,.9) 24%, rgba(0,0,0,.5) 56%, rgba(0,0,0,.12) 80%, transparent 92%)}
.ctp-fila:nth-of-type(2)::before{--ctp-arriba:-4px;--ctp-abajo:-1rem;
  --ctp-mask:linear-gradient(to bottom, #000 0%, rgba(0,0,0,.9) 24%, rgba(0,0,0,.5) 56%, rgba(0,0,0,.12) 80%, transparent 92%)}

/* EL ANILLO: la probabilidad de que gane, liso, del color del club */
.ctp-pct{position:relative;width:40px;height:40px;display:grid;place-items:center;
  font-weight:800;font-size:.6rem;font-variant-numeric:tabular-nums;cursor:pointer}
.ctp-pct svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ctp-pct circle{fill:none;stroke-width:3}  /* ronda 21: trazo más fino y número más chico: el número respira adentro del aro */
.ctp-pct .f{stroke:rgba(255,255,255,.08)}
.ctp-pct .t{stroke:rgb(var(--rgb));stroke-linecap:round;stroke-dasharray:var(--v, 0) 100}
.ctp-num-c{position:relative;white-space:nowrap}
.ctp-num-c small{font-size:1em}

/* sin dato: el anillo vacío y una raya, nunca un número de relleno */
.ctp-pct--sin{cursor:default;color:var(--text-faint, #5a6275)}
.ctp-pct--sin .t{display:none}

/* LOS PUNTOS: lo que paga acertar que gana */
/* ⚠ 26/09: ANCHO FIJO. Con la escala nueva (--fs-md .88) «1.250» pedía 54 px y
   corría la columna (_ronda8 TP11). La columna del chip es FIJA: el ancho no lo
   decide el número. */
.ctp-pts{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;width:52px;min-width:0;height:30px;padding:0 .2rem;white-space:nowrap;letter-spacing:-.2px;
  font-weight:800;font-size:var(--fs-md, .88rem);font-variant-numeric:tabular-nums;color:#fff;
  --borde-rgb:var(--rgb);--borde-radio:10px;--borde-fondo:var(--ctp-bg)}
.ctp-pts:empty{visibility:hidden}

/* ── el pie: jugadores · Estadísticas · Jugar ────────────────────── */
.ctp-pie{display:grid;grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--gap-md, .7rem);padding:.8rem var(--ctp-aire) 1.05rem}
.ctp-pie--solo{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.ctp-pie--uno{grid-template-columns:auto minmax(0,1fr)}
.ctp-pie--solo.ctp-pie--uno{grid-template-columns:minmax(0,1fr)}
.ctp-pie .cop-b{width:100%}
.ctp-gente{display:inline-flex;align-items:center;gap:var(--gap-sm, .5rem);padding:0 .3rem 0 .1rem;color:var(--text-dim, #9aa3b5);
  min-width:3.6rem}  /* ancho fijo: con «6» y con «1.3K» los botones miden lo mismo en toda la lista */
.ctp-gente .cop-ico-svg,.ctp-gente > svg{width:18px;height:18px;flex:0 0 auto}
.ctp-gente b{font-weight:700;font-size:var(--fs-md, .88rem);color:#fff;font-variant-numeric:tabular-nums}
/* la marca de ejemplo, donde iría la liga */
.ctp-ej{font:800 .6rem Inter, sans-serif;letter-spacing:1.4px;text-transform:uppercase;
  color:var(--gold, #ffc233);padding:.12rem var(--gap-sm, .5rem);border-radius:999px;border:1px solid rgba(255,194,51,.6)}

/* ── LA ANIMACIÓN DEL ANILLO (ronda 11) ─────────────────────────────
   Al entrar en pantalla el anillo se DIBUJA desde cero y el número sube
   a la par; al llegar, un destello de su color. Una sola vez. */
.ctp-pct.vivo .t{animation:ctp-anillo 1.1s cubic-bezier(.16,1,.3,1) var(--d,0s) both}
@keyframes ctp-anillo{from{stroke-dasharray:0 100}}
.ctp-pct::after{content:"";position:absolute;inset:-2px;border-radius:50%;pointer-events:none;opacity:0;
  box-shadow:0 0 0 2px rgba(var(--rgb),.9), 0 0 16px 2px rgba(var(--rgb),.55)}
.ctp-pct.vivo::after{animation:ctp-destello .7s ease-out calc(var(--d,0s) + 1s) both}
@keyframes ctp-destello{0%{opacity:0;transform:scale(.9)}35%{opacity:1}100%{opacity:0;transform:scale(1.25)}}
@media (prefers-reduced-motion: reduce){ .ctp-pct .t,.ctp-pct::after{animation:none !important} }

/* ── pantallas angostas ─────────────────────────────────────────── */
@media (max-width:359px){
  .ctp-pie{gap:var(--gap-sm, .5rem)}
  .ctp-pts{width:48px;padding:0 .15rem}
}

/* ══ LA FILA DE RESULTADOS (08/10/2026) — `COPTarjetaPartido.fila()` ══
   Las medidas son las de la lista de Resultados (`.lg-match`): camiseta
   chica, nombre a 1rem/600, el marcador en su columna, chip + anillo, y
   la hora en la columna de la derecha. Sin la luz de la tarjeta grande. */
.ctp--res{display:flex;align-items:center;gap:var(--gap-md, .7rem);background:transparent;overflow:visible;
  padding:var(--gap-md, .7rem) 0}
.ctp--res + .ctp--res::after{display:none}
.ctpr-filas{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:var(--gap-xs, .3rem)}
.ctp--res .ctp-fila{padding:0;min-height:40px;grid-template-columns:24px minmax(0,1fr) auto auto;column-gap:var(--gap-sm, .45rem)}
.ctp--res-fin .ctp-fila{grid-template-columns:24px minmax(0,1fr) 1.4rem auto auto}
.ctp--res .ctp-fila + .ctp-fila{margin-top:0}
.ctp--res .ctp-fila::before{display:none}
.ctp--res .ctp-kit img{width:24px;height:24px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.4))}
.ctp--res .ctp-nom{font-weight:600}
.ctpr-gol{font-weight:700;font-size:var(--fs-base, 1rem);text-align:center;font-variant-numeric:tabular-nums;color:var(--text-dim, #9aa3b5)}
.ctpr-gana .ctpr-gol{color:#fff}
/* ⚠ apagado: el chip y el anillo del que no ganó (y de los dos si es empate) */
.ctpr-off .ctp-pts,.ctpr-off .ctp-pct{opacity:.32;filter:grayscale(1)}
.ctpr-off .ctp-nom{color:var(--text-dim, #9aa3b5)}
.ctpr-der{flex:0 0 3.2rem;display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:2px;text-align:right}
.ctpr-hora{font-weight:600;font-size:var(--fs-md, .88rem);color:var(--text-dim, #9aa3b5);font-variant-numeric:tabular-nums}
@media (max-width:359px){
  .ctp--res .ctp-fila{column-gap:var(--gap-xs, .3rem)}
  .ctp--res .ctp-pts{width:46px}
  .ctpr-der{flex-basis:2.8rem}
}

/* 09/10/2026 · en juego: sólo el marcador, en blanco y alineado a la derecha */
.ctp--res-vivo .ctpr-gol{color:#fff;margin-left:auto;font-size:var(--fs-lg, 1.15rem)}