/* ════════════════════════════════════════════════════════════════════
   COP · EN VIVO — LA PÍLDORA «VIVO» + 1T/2T + MINUTO (09/10/2026)
   ────────────────────────────────────────────────────────────────────
   Franco: «cuando ese partido está en juego (…) tenés que poner el cartel
   de en vivo y el tiempo del partido de la misma forma que mostrás en las
   tarjetas de partidos en vivo en la página de inicio (…) usar mismos
   componentes y mantener la coherencia en toda la página».
   ⚠ SE MUDÓ DE `cop-tarjeta-vivo.css`, NO SE COPIÓ: es la pieza de la
   portada, y ahora la usan también las tarjetas de historial
   (`COPDuelo`) y adentro del duelo. El dibujante es `COPEnVivo.html()`.
   ════════════════════════════════════════════════════════════════════ */
/* ⚠⚠ «VIVO», NO «LIVE», Y ADENTRO DE UNA PÍLDORA (Franco, 23/08/2026:
   *«ese nuevo diseño del botón de en vivo que en lugar de decir live
   tiene que decir "Vivo" con los minutos puestos así»*). El estado y el
   minuto son DOS datos y ahora se leen como dos: la píldora dice que el
   partido está en juego, y el reloj de al lado dice desde cuándo.
   ⚠ El rojo se queda en la píldora y NO se le da al minuto entero: con
   todo rojo, el número competía con el marcador. */
.lv-live{
  display:inline-flex;align-items:center;gap:var(--gap-sm, .5rem);
  /* ⚠ sin padding: la celda ya está donde tiene que estar (la grilla de
     `.lv-head` la alinea con el nombre del equipo). Un padding acá la
     correría justo lo que se acaba de alinear. */
  padding:0;
  font-family:'Inter',sans-serif;font-size:var(--fs-xs, .72rem);font-weight:700;
  letter-spacing:.4px;color:#ff3b47;white-space:nowrap;
  /* ⚠⚠ UNA PERILLA PARA LOS DOS DATOS EN ROJO (Franco, 30/08/2026,
     puntos 16 y 17): *«el 1T y el 2T tienen que estar en el tamaño de la
     V de Vivo, y el VIVO todo en mayúsculas en ese tamaño»*.
     Antes eran DOS números sueltos —la píldora en .785 y el 1T/2T en
     .72— y esa diferencia de medio punto era todo el defecto: en la
     misma fila y en el mismo rojo, uno se leía más chico que el otro sin
     que nada lo justificara.
     ⚠ ES UNA PERILLA Y NO EL MISMO NÚMERO ESCRITO DOS VECES, porque
     `explorar.html` achica esta tarjeta y ahí también tienen que seguir
     midiendo igual: allá pisaba `.lv-pill` y `.lv-parte` por separado
     —con .7 y .6— y volvía a abrir la misma diferencia. Ahora escribe
     `--lv-vivo` una vez y los dos la siguen. */
  --lv-vivo:.785rem;
}
/* ⚠⚠ MÁS GRANDE Y RECTANGULAR (Franco, 27/08/2026): *«quiero que el
   botón de vivo tenga la letra 2 puntos más grande y el recuadro que la
   rodea sea rectangular con las esquinas redondeadas bien; que se note
   que están redondeadas pero tampoco tanto»*.
     · la letra: .66rem → .785rem, que son los 2 px pedidos (10,6 → 12,6)
     · la forma: el radio BAJA de 8 a 7 px. Suena al revés y no lo es —
       lo que hacía que se leyera como una píldora no era el radio sino
       el alto: con 15 px de caja, 8 de radio es más de la mitad y las
       esquinas se juntan en una curva continua. Con la letra más grande
       y este aire la caja pasa a ~24 px, y 7 px de radio se leen como
       lo que Franco pidió: esquinas redondeadas de un rectángulo. */
/* ⚠⚠ Y NO SE COMPRIME NUNCA (27/08/2026). Los tres datos de esta fila
   —la píldora, la mitad y el minuto— son de largo fijo: no hay nada que
   «ceder» adentro de ellos. Sin `flex:0 0 auto` el flex los achicaba
   antes que desbordar, y el resultado era el texto saliéndose de su
   propio borde: se vio en la foto, «Vivo2T60'» encima del marco rojo, y
   ninguna medición lo detectaba porque las cajas seguían adentro de la
   tarjeta. Ahora, si algún día no entran, DESBORDAN — que es feo pero se
   ve, y el arnés lo caza midiendo si el minuto se pasa del borde. */
.lv-pill{
  display:inline-flex;align-items:center;gap:var(--gap-xs, .3rem);flex:0 0 auto;
  padding:.3rem .5rem;border-radius:7px;
  border:1.5px solid rgba(255,59,71,.55);
  font-size:var(--lv-vivo);font-weight:800;letter-spacing:.3px;line-height:1;
  /* ⚠⚠ «VIVO» EN MAYÚSCULAS (Franco, 30/08/2026, punto 17). Va en el
     CSS y no en el texto que escribe el JS: el dato es «vivo», y que se
     muestre gritado es una decisión de cómo se ve, no de qué dice. Si
     mañana la píldora se usa en un lugar donde tiene que ir en
     minúsculas, se cambia acá y no se toca el dibujante.
     ⚠ Y ALCANZA TAMBIÉN A «Próximo», a propósito: son los dos estados
     de la MISMA píldora, y uno en mayúsculas y el otro no se leería
     como dos componentes distintos. */
  text-transform:uppercase;
}
/* ⚠ LA MITAD DEL PARTIDO, EN ROJO Y A LA IZQUIERDA DEL NÚMERO (misma
   frase de Franco: *«un 1T/2T en rojo a la izquierda del número de los
   minutos»*). El rojo se escribe acá y no se hereda de `.lv-live`
   porque el minuto de al lado NO es rojo —esa decisión es del 23/08: en
   rojo competía con el marcador— y en prematch la fila entera se apaga.
   Que el 1T/2T sea rojo tiene que ser una decisión propia, no un efecto
   secundario de dónde está colgado. */
.lv-parte{
  flex:0 0 auto;
  /* ⚠ EL TAMAÑO ES EL DE LA PÍLDORA, por la perilla de `.lv-live`
     (Franco, punto 16). Ver la explicación larga allá arriba. */
  font-family:'Inter',sans-serif;font-size:var(--lv-vivo);font-weight:800;
  letter-spacing:.3px;line-height:1;color:#ff3b47;
}
/* ⚠ EL MINUTO TAMBIÉN CRECE (.72 → .9rem): era el dato más chico de una
   fila que ahora tiene la píldora grande al lado, y quedaba como una
   nota al pie de lo que está pasando.
   ⚠⚠ Y DEJA DE SER ROJO, que es lo que el comentario de `.lv-live` de
   acá arriba viene diciendo desde el 23/08 («el rojo se queda en la
   píldora y NO se le da al minuto entero») y que en realidad NUNCA fue
   verdad: `.lv-live` pinta rojo y el minuto lo heredaba. Se veía en la
   foto —«2T 60'» era un solo bloque rojo— y ahí quedó claro por qué
   importa: si el minuto ya es rojo, pedir el 1T/2T «en rojo» no
   distingue nada. Ahora el número va en el mismo blanco del marcador y
   el rojo marca sólo lo que está en juego: la píldora y la mitad. */
/* ⚠⚠ Y LA TIPOGRAFÍA PASA A SER LA DE LOS EQUIPOS (Franco, 30/08/2026,
   punto 15): *«los minutos tienen que estar en la misma tipografía que
   los nombres de los equipos»*. El minuto era lo ÚNICO de esta fila
   escrito en monoespaciada: en una tarjeta donde todo lo demás es Inter,
   el «60'» se leía como pegado de otra pantalla.
   ⚠ SE VA LA FAMILIA, NO EL TAMAÑO. Franco distingue las dos cosas en
   esta misma lista —el punto de al lado pide el 1T/2T «al tamaño de la V
   de Vivo»—, así que «misma tipografía» es la letra, no la medida. El
   .9rem se queda: es una decisión del 27/08 («era el dato más chico de
   una fila que ahora tiene la píldora grande al lado») y no hay por qué
   deshacerla de costado.
   ⚠ `tabular-nums` SOBREVIVE AL CAMBIO, y es lo único que hacía falta de
   la monoespaciada: sin él, el minuto cambia de ancho al pasar de 9' a
   10' y la fila entera se corre sola cada vez que avanza el reloj. */
.lv-min{
  flex:0 0 auto;
  font-family:'Inter',sans-serif;
  font-size:var(--fs-md, .88rem);font-weight:700;font-variant-numeric:tabular-nums;
  color:#e8ecf4;
}
.lv-dot{
  width:6px;height:6px;border-radius:50%;background:#ff3b47;flex:0 0 auto;
  box-shadow:none;
  animation:lvPulse 1.4s ease-in-out infinite;
}
@keyframes lvPulse{0%,100%{opacity:1}50%{opacity:.3}}