/* ══════════════════════════════════════════════════════════════════
   COP · LA TARJETA DE PARTIDO EN VIVO — UN SOLO ARCHIVO (27/08/2026)

   La tarjeta vertical de la portada: arriba el logo, «Vivo» y el minuto
   y cuánta gente lo está jugando; después la bandera y la liga; después
   los dos equipos con su camiseta y su marcador; y abajo los tres
   recuadros de cuotas con las tres iniciales de cada equipo.

   Franco, 27/08/2026: *«tenés que usar el mismo diseño que usamos para
   las tarjetas de Resultados en la página de inicio en la página de
   explorar para las tarjetas de la categoría "En Vivo Ahora", ya que
   muestran lo mismo y la de inicio es más completa y tiene un diseño
   vertical que se adecua mejor al tamaño de las tarjetas de explorar»*.

   ⚠⚠ POR QUÉ SALIÓ DE `app.html`. Explorar tenía su PROPIA tarjeta de
   en vivo (`.ex-v*`): el mismo partido, con las mismas dos camisetas y
   el mismo marcador, dibujado por segunda vez y sin las cuotas. «El
   mismo diseño» sólo es verdad si es el mismo archivo — copiado, las dos
   pantallas empiezan iguales y se separan en el primer retoque.

   ⚠ LO QUE NO SE MUDÓ, A PROPÓSITO: las reglas bajo `#colInicio`. Ésas
   no son la tarjeta: son cómo la portada compacta reparte su alto en
   una pantalla de teléfono (`--lv-base`, los `clamp` por dvh). Traerlas
   acá sería mudar el layout de una pantalla al componente de otra.

   ⚠ EL CARRUSEL VIENE CON ELLA (`.live-carousel`) porque el ancho de la
   tarjeta se calcula contra su hueco: son dos números que tienen que ser
   el mismo. La pantalla que la use en otro contenedor le pone el ancho
   desde afuera, que es lo que hace Explorar con `.ex-tira`.
   ══════════════════════════════════════════════════════════════════ */

/* ════════ EN VIVO — tarjetas de partido en vivo (home) ════════ */
/* ⚠ EL HUECO ES UNA VARIABLE porque la línea de la tarjeta lo necesita
   para caer exactamente en el medio: si se cambia el `gap`, la línea se
   acomoda sola. */
.live-carousel{
  --lv-hueco:.55rem;
  display:flex;gap:var(--lv-hueco);overflow-x:auto;
  padding:.3rem .2rem 1rem;scrollbar-width:none;
  /* ⚠ PASÓ A `mandatory` (Franco, 22/08/2026). Estaba en `proximity`
     desde que se probó el cambio y "no cambió nada": con tarjetas de
     230 px entraban dos y media, así que frenar en una o en otra daba
     casi lo mismo. Ahora la tarjeta ocupa TODO el ancho y se ve UNA
     sola por vez — ahí el freno sí decide qué mirás, y suelto dejaría
     media tarjeta de cada partido en pantalla. */
  -webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory;
}
.live-carousel::-webkit-scrollbar{display:none}

/* ⚠⚠ UNA TARJETA POR PANTALLA (Franco, 22/08/2026): "que las tarjetas
   de partidos en vivo ocupen todo el ancho de la pantalla de inicio,
   es decir una sola tarjeta visible a la vez". Antes eran de 230 px y
   entraban dos y media. El ancho de verdad lo fija la portada compacta
   (`#colInicio .live-card`), que sabe del recorte al borde físico;
   acá va el 100% para escritorio y para cualquier contexto sin esa
   media query. */
/* ⚠⚠ SIN CAJA, CON UNA LÍNEA VERTICAL AL MEDIO (Franco, 25/08/2026):
   *«no tienen que tener ningún tipo de borde arriba ni abajo, solamente
   una línea vertical entre medio de las 2 tarjetas que las separe; así
   como en las tarjetas de partidos hay una línea horizontal que separa
   una de la otra, acá es una vertical»*.

   Es EL MISMO criterio que `cop-ui-partido.css` —la fila de partido no
   tiene caja y se separa de la siguiente con una línea— girado 90°:
   acá las tarjetas van una al lado de la otra, así que la línea es
   vertical y la dibuja el `::after` de cada tarjeta contra su borde
   derecho. La última no la lleva (`:last-child`), igual que la última
   fila de la lista de partidos no lleva línea abajo.

   ⚠ LA LÍNEA ARRANCA Y TERMINA DONDE EL CONTENIDO, no en el borde de la
   caja: se mete `--lv-linea-aire` arriba y abajo, que es la misma
   decisión que el `left/right: var(--cop-pt-aire)` de la fila de
   partido. Una línea más alta que lo que separa se lee como el borde de
   otra cosa — que es justo lo que se acaba de sacar. */
.live-card{
  position:relative;
  flex:0 0 100%;max-width:100%;scroll-snap-align:start;
  background:none;border:0;border-radius:0;
  overflow:visible;cursor:pointer;
  --lv-linea:var(--cop-pt-linea,rgba(255,255,255,.07));
  --lv-linea-aire:.35rem;
}
.live-card::after{
  content:"";position:absolute;top:var(--lv-linea-aire);bottom:var(--lv-linea-aire);
  /* justo en el medio del hueco que hay entre una tarjeta y la otra */
  right:calc(var(--lv-hueco,0px) / -2);
  width:1px;background:var(--lv-linea);pointer-events:none;
}
.live-card:last-child::after{display:none}
@media(min-width:761px){
  /* en escritorio la columna es ancha: una tarjeta al 100% quedaría
     enorme y con los dos equipos separados por medio metro de vacío */
  .live-card{flex:0 0 340px;max-width:340px}
}
/* sin caja no hay borde que iluminar: el hover ya no dice nada */
.live-card:active{transform:none}

/* ── cabecera: CP · Vivo · competencia · la gente ────────────────────
   ⚠⚠ LA CABECERA USA LA MISMA GRILLA QUE LAS FILAS DE EQUIPO
   (Franco, 23/08/2026: *«el logo de clash of picks debe estar alineado
   con las camisetas, el botón de vivo alineado con los nombres de los
   equipos»*).

   Antes cada fila se acomodaba sola —la cabecera con sus paddings, el
   cuerpo con los suyos— y quedaban dos columnas invisibles corridas
   entre sí por unos pocos píxeles: nada que se pueda nombrar, pero la
   tarjeta se veía torcida. Ahora hay UNA medida, `--lv-esc`, que manda
   el ancho de la camiseta Y el de la celda del logo, y el mismo `gap`
   en las dos filas. Así el logo cae exactamente sobre la camiseta y
   «Vivo» arranca exactamente donde arranca el nombre del equipo.

   ⚠ SI SE CAMBIA EL TAMAÑO DE LA CAMISETA, SE CAMBIA `--lv-esc` Y NADA
   MÁS. Ese es todo el punto: la portada la achica (más abajo) y la
   alineación se mantiene sola. */
.live-card{--lv-esc:34px;--lv-gap:.7rem;--lv-pad:.85rem}
.lv-head{
  display:grid;
  /* ⚠⚠ DOS COLUMNAS (27/08/2026). Eran tres: logo · estado · gente. La
     cuenta de gente bajó a la fila de la liga porque en 175 px de
     tarjeta las dos no entraban —el porqué, medido, está en
     `cop-tarjeta-vivo.js`—. Acá arriba queda lo que está pasando ahora:
     el escudo, y la píldora con la mitad y el minuto.
     ⚠ EL ESTADO SE QUEDA CON TODO EL ANCHO QUE SOBRA, que es lo que
     hacía falta: la píldora creció y el 1T/2T es nuevo. */
  grid-template-columns:var(--lv-esc) 1fr;
  align-items:center;gap:var(--lv-gap);
  padding:.45rem var(--lv-pad) 0;
}
/* ── la liga, una fila más del cuerpo: bandera + nombre ────────────
   ⚠ Alineada con la camiseta y con el logo: arranca en la MISMA
   columna, para que las cuatro filas de la tarjeta caigan sobre el
   mismo eje izquierdo.

   ⚠⚠ VIVE ADENTRO DE `.lv-body` (27/08/2026) — el porqué está escrito
   en `cop-tarjeta-vivo.js`, arriba del `return` de `html()`: es la única
   forma de que la distancia que la separa del primer equipo y del
   escudo de CP sea EXACTAMENTE la misma que hay entre los dos equipos
   en cualquier alto de pantalla. Por eso acá el `padding` es cero: el
   horizontal ya lo pone el cuerpo y el vertical lo pone el reparto. */
/* ⚠ TRES COLUMNAS Y LAS MISMAS QUE `.lv-team`: escudo · nombre · dato.
   La bandera cae sobre la camiseta, el nombre de la liga sobre el nombre
   del equipo y la cuenta de gente sobre el marcador. Es la misma grilla
   de las otras dos filas del cuerpo, así que el eje no se rompe. */
.lv-liga{
  display:grid;grid-template-columns:var(--lv-esc) 1fr auto;
  align-items:center;gap:var(--lv-gap);
  padding:0;min-width:0;
}
/* ⚠⚠ DEL TAMAÑO DE LA CAMISETA (Franco, 27/08/2026): *«poner la liga del
   partido y la bandera de la misma con el mismo tamaño que las camisetas
   y los nombres de los equipos»*. Antes medía 22 px de ancho contra los
   34 de la camiseta: en la misma columna, y sin embargo más chica.
   Ahora el ancho sale de `--lv-esc`, la MISMA medida que manda la
   camiseta y la celda del logo — así sigue igual cuando la portada
   achica la tarjeta, sin un segundo número que mantener a mano.
   ⚠ `aspect-ratio` Y NO UN ALTO FIJO: una bandera es 4:3 y un alto
   escrito a mano la deforma o la recorta. Además el `<span>` vacío —el
   que se dibuja cuando la liga no tiene país— reserva el mismo lugar,
   así la fila no cambia de alto según haya bandera o no. */
.lv-liga-bandera{
  width:100%;max-width:var(--lv-esc);height:auto;aspect-ratio:4/3;
  object-fit:cover;border-radius:3px;
  display:block;justify-self:center;
}
/* ⚠ Y EL NOMBRE, DEL TAMAÑO DEL NOMBRE DEL EQUIPO (misma frase de
   Franco). El peso y el color NO cambian: sigue en 500 y en `--text-dim`
   contra los 700 en blanco de los equipos, que es lo que lo mantiene
   legible como dato secundario aunque ahora mida lo mismo. */
.lv-liga .lv-comp{text-align:left;font-size:var(--fs-base, 1rem)}
/* ⚠ la liga es lo único elástico de la fila: los otros tres son datos
   cortos y fijos, y el nombre de la liga ya sabe cortarse con puntos */
.lv-head .lv-comp{min-width:0}
.lv-cp{display:flex;align-items:center;justify-content:center;padding:0}
.lv-cp img{width:100%;max-width:22px;height:auto;object-fit:contain;display:block}
/* ⚠ 09/10/2026: la píldora «VIVO» + 1T/2T + minuto se MUDÓ a
   `cop-en-vivo.css` (la usan también las tarjetas de historial y el duelo).
   Acá queda sólo el apagado de prematch, que es de esta tarjeta. */
.live-card.is-pre .lv-min{color:var(--text-dim)}
.live-card.is-pre .lv-pill{border-color:var(--card-border,#232833)}
.live-card.is-pre .lv-live{color:var(--text-dim)}
.live-card.is-pre .lv-dot{background:var(--text-dim);box-shadow:none;animation:none}
.lv-comp{
  padding:0;
  font-family:'Inter',sans-serif;font-size:var(--fs-xs, .72rem);font-weight:500;
  color:var(--text-dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}

/* ── cuerpo: la liga y los dos equipos, uno debajo del otro ────────
   ⚠ TRES FILAS DESDE EL 27/08/2026 (la liga entró acá; el porqué está en
   `cop-tarjeta-vivo.js`). El `gap` de .3rem es el que separa las tres
   por igual, que es exactamente lo que Franco pidió.
   ⚠⚠ SE FUE `.lv-main` Y CON ÉL EL BOTÓN «Jugá En Vivo» (Franco,
   25/08/2026: *«eliminá el botón de jugá en vivo de las tarjetas de
   resultados en vivo»*). Ese envoltorio existía SOLO para sentar el
   botón al costado de los equipos; sin botón no tiene nada que
   sostener, y el cuerpo vuelve a ser lo que es: dos filas de equipo.
   ⚠ La tarjeta sigue siendo clickeable entera (`data-url`), así que la
   acción no se perdió: se dejó de duplicar. */
.lv-body{padding:.3rem var(--lv-pad);display:flex;flex-direction:column;gap:.3rem;
  flex:1 1 auto;justify-content:center;min-height:0}

/* ── LAS CUOTAS EN VIVO, ABAJO Y EN FILA (Franco, 23/08/2026) ───────
   *«las cuotas abajo con el sistema de cuotas tradicional no ese
   americano… los recuadros de las cuotas deben decir el nombre y la
   cuota abajo, y tener la misma forma que las chips y el botón de jugar
   en vivo»*.

   ⚠ ANTES ESTABAN ARRIBA, EN LA CABECERA, y no fue un capricho: en la
   tanda del 22/08 se probaron al costado de los equipos y MIDIERON MAL
   —el nombre quedaba en 44 px, «Boca Juniors» se leía «Bo…»—, así que
   se las mandó a la cabecera, que era el único lugar con aire. Ahora
   tienen su propia fila abajo, que es donde Franco las quiere y donde
   además entra el nombre del equipo entero.

   ⚠ EL NÚMERO ES DECIMAL, no americano (+160). Es el formato con el que
   la API las publica y el que se usa en el resto del país; convertirlo
   sería inventar una segunda forma de decir lo mismo.

   ⚠ NO SE DICE «CUOTA» EN NINGUNA PARTE VISIBLE — regla del proyecto
   (los puntos son valoración propia). Acá se muestra el número tal como
   lo publica la casa porque es información EN VIVO del partido.

   ⚠⚠ NO SON CAJAS NI BOTONES: SON TEXTO (Franco, 23/08/2026, segunda
   vuelta: *«las cuotas deben ser visibles y no tener recuadro alrededor,
   solo tener el nombre y la cuota sin fondo diferente al fondo de la
   tarjeta»*). La vuelta anterior les dio la forma del botón de jugar, y
   con eso la tarjeta pasó a tener cuatro cosas que parecían clickeables
   y una sola que lo era. **Ninguna cuota lleva a ningún lado** —todavía
   no se puede jugar a una— así que ahora tampoco lo aparenta.
   ⚠ Y EL NÚMERO SUBE DE TAMAÑO Y PASA A BLANCO. Sin caja que lo
   sostenga, el contraste tiene que venir del texto: si se sacaba el
   recuadro y se dejaba el número chico y azul, quedaba flotando y menos
   legible que antes — que es lo contrario de lo que Franco pidió en la
   primera mitad de la misma frase («deben ser visibles»). */
/* ⚠⚠ VUELVEN A SER RECUADROS, Y FIJOS (Franco, 25/08/2026): *«agregar
   de forma fija los 3 recuadros de cuotas del resultado del partido…
   las 3 una al lado de la otra abajo de los nombres de los equipos, con
   las 3 iniciales de cada equipo como indicador de quién es»*.
   Es una vuelta atrás sobre la decisión del 23/08 —que las había dejado
   sin caja— y es de Franco: la referencia nueva las muestra con su
   recuadro. Se anota para que no se lea como un descuido.
   ⚠ «FIJAS» = LA FILA ESTÁ SIEMPRE, aunque el número no haya llegado.
   Antes la fila entera solo existía en partidos en vivo con `ev`, así
   que la tarjeta cambiaba de alto según el partido; ahora el lugar está
   reservado y lo que falta es el número, no la fila. */
/* ⚠⚠ `--lv-pad` CON RESPALDO (27/08/2026). La fila de cuotas dejó de ser
   sólo de la tarjeta en vivo: desde hoy la usan también las tarjetas de
   Partidos Calientes en Explorar, que no son `.live-card` y por lo tanto
   no declaran esa variable. Sin el respaldo, `padding` queda INVÁLIDO
   entero —una variable sin valor invalida toda la declaración— y la fila
   sale pegada a los dos bordes de la tarjeta. Es una falla silenciosa:
   no hay error, sólo se ve mal. */
.lv-cuotas{
  display:grid;grid-template-columns:repeat(3,1fr);gap:.3rem;
  padding:.1rem var(--lv-pad, .6rem) .5rem;flex:0 0 auto;
}
/* ⚠⚠ 18/09/2026 — LA CUOTA NO ES UN BOTÓN, Y AHORA TAMPOCO LO PARECE.
   Franco: *«eliminá ese diseño de botón y solamente dejá las cuotas con
   las 3 iniciales del equipo o las de “EMP” (…) eso es un indicador, no
   un botón para cargar predicciones»*.
   El 27/08 había pedido el marco del botón de estadísticas y esa nota
   ya decía, textual, *«no es un botón aunque lo parezca»*: el dibujo
   prometía un toque que la pantalla nunca hizo. Las tres clases de
   `cop-borde` se fueron del MARCADO (`cop-tarjeta-vivo.js`), así que
   acá no queda nada del recuadro: sin fondo, sin marco y sin radio.
   ⚠ EL AIRE VERTICAL BAJA de .42 a .18 rem: ese relleno era para
   separar del marco, y sin marco separa de la nada. Lo que se gana son
   ~12 px de alto de tarjeta en una pantalla donde el alto se pelea.
   ⚠ LO QUE NO CAMBIA: los dos tamaños de letra, el hueco entre la
   inicial y el número, y que la fila esté SIEMPRE (aunque el número no
   haya llegado). Franco pidió sacar el botón, no mover los datos. */
.lv-cuota{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* ⚠ *«que la letra de las iniciales… tenga más distancia con el número
     de la cuota»*: de .05 a .26 rem. Es el hueco, no el padding: el
     padding separa del marco, esto separa los dos datos entre sí. */
  gap:.26rem;min-width:0;
  padding:.18rem .15rem;
}
/* la inicial arriba, el número abajo
   ⚠ UN PUNTO MÁS CHICA (Franco, 27/08/2026: *«que la letra de las
   iniciales sea 1 punto más chica»*): .6 → .54rem, que son los ~1 px
   pedidos (9,6 → 8,6). */
.lv-cuota span{
  font-family:'Inter',sans-serif;font-size:.54rem;font-weight:700;letter-spacing:.4px;
  color:var(--text-dim);line-height:1.1;
  max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lv-cuota b{
  font-family:'Inter',sans-serif;font-size:var(--fs-sm, .8rem);font-weight:800;
  color:#fff;line-height:1.2;font-variant-numeric:tabular-nums;
}
/* el % al lado de los puntos, más chico y apagado (07/10/2026) */
.lv-cuota b{display:inline-flex;align-items:baseline;gap:.22rem;white-space:nowrap}
.lv-cuota .lv-pct{font-style:normal;font-size:.82em;font-weight:700;color:var(--primary,#0c95eb)}
/* mientras no llegaron: el lugar ocupado, sin números inventados */
.lv-cuotas.cargando .lv-cuota b{color:transparent;background:rgba(255,255,255,.07);
  border-radius:4px;min-width:30px;display:inline-block;height:.9em}
@media(max-width:360px){
  .lv-cuotas{gap:.22rem}
  .lv-cuota span{font-size:.5rem}
  .lv-cuota b{font-size:var(--fs-xs, .72rem)}
}
/* ── LA GENTE QUE ESTÁ JUGANDO ESTE PARTIDO ─────────────────────────
   ⚠ «—» MIENTRAS NO SE SABE, Y CERO CUANDO ES CERO: son dos cosas
   distintas y la app ya aprendió a distinguirlas (`cop-jugando.js`).
   Un número inventado al lado de un partido real es peor que un guion. */
.lv-gente{
  display:inline-flex;align-items:center;gap:.28rem;
  padding:0;
  font-family:'Inter',sans-serif;font-size:var(--fs-xs, .72rem);font-weight:600;
  color:var(--text-dim);white-space:nowrap;
}
.lv-gente svg{width:13px;height:13px;flex:0 0 auto}
/* ⚠ LA MISMA GRILLA QUE `.lv-head` (ver el comentario de allá): la
   camiseta ocupa `--lv-esc` y el nombre arranca después de `--lv-gap`,
   que es exactamente donde arranca «Vivo» en la fila de arriba. */
.lv-team{display:grid;grid-template-columns:var(--lv-esc) 1fr auto;align-items:center;gap:var(--lv-gap)}
/* ⚠⚠ SIN CAJA DETRÁS DE LA CAMISETA (Franco, 23/08/2026: *«las
   camisetas no deben tener ese contorno de color gris detrás, deben ser
   como las que usas en las tarjetas de partidos sin fondo para que las
   luces se vean bien»*). Es LA MISMA decisión que ya estaba tomada en
   `cop-ui-partido.css` —«sin caja alrededor de la camiseta: la camiseta
   ya es la figura»— y que acá no se había aplicado.
   ⚠ Y `contain`, NO `cover`: con `cover` el dibujo se recorta contra la
   caja de 34 px y se le comen los hombros. Sin fondo, el recorte se
   nota el doble. */
.lv-flag{
  width:var(--lv-esc);height:var(--lv-esc);flex:0 0 auto;
  display:grid;place-items:center;overflow:hidden;
  background:none;border:0;box-shadow:none;border-radius:0;
}
.lv-flag img{width:100%;height:100%;object-fit:contain;display:block}
.lv-name{
  font-family:'Inter',sans-serif;font-size:var(--fs-base, 1rem);font-weight:700;
  color:#fff;letter-spacing:.1px;line-height:1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.lv-score{
  flex:0 0 auto;min-width:34px;height:30px;padding:0 var(--gap-sm, .5rem);
  display:inline-flex;align-items:center;justify-content:center;
  border:none;border-radius:0;background:transparent;
  font-family:'JetBrains Mono','SFMono-Regular',ui-monospace,Menlo,Consolas,monospace;
  font-size:var(--fs-md, .88rem);font-weight:500;color:#e8ecf4;font-variant-numeric:tabular-nums;
}
.live-card.is-pre .lv-score{color:var(--text-dim)}