/* ══════════════════════════════════════════════════════════════════
   COP · LOS TRES RECUADROS DE UN TORNEO — el dibujo  (21/09/2026)
   ──────────────────────────────────────────────────────────────────
   Franco: *«dale más diseño a los recuadros o sección de info (…) son 3
   recuadros con diseño top»*.

   ANTES ERAN TRES TEXTOS SUELTOS en una fila: número arriba, rótulo
   abajo, sin caja. Se leía como una línea de estado y no como los tres
   datos que deciden si entrás o no a una sala.

   LO QUE HACE QUE SE VEAN COMO ALGO Y NO COMO TRES CAJITAS:
     · una sola pieza de tres columnas iguales, con las divisiones POR
       DENTRO —un separador de 1px entre columna y columna— en vez de
       tres marcos sueltos con aire entre ellos. Tres marcos en 330px de
       ancho gastan seis bordes y dos huecos en decir lo que un panel
       dice con dos líneas;
     · el degradé va en la PIEZA, no en cada caja, así la luz cruza los
       tres y se leen juntos;
     · el destacado no cambia de tamaño —eso rompería la grilla— sino
       de color y de brillo: es la misma caja, encendida.

   ⚠ LOS COLORES SALEN DE LOS TOKENS. Un dorado escrito a mano acá es un
   dorado que el día que cambie `--gold` va a quedar solo.
   ══════════════════════════════════════════════════════════════════ */

/* ══ 23/09/2026 · SIN CAJA, SÓLO LAS LÍNEAS DE ADENTRO ═══════════════
   Franco: *«cambiá el diseño de los recuadros de entrada, en juego y
   jugando: sin recuadro alrededor, sólo una línea vertical divisoria
   entre medio»*. Es la regla 1 del sistema —contenido separado por
   líneas sobre el fondo— y esta pieza era la única de la pantalla con
   marco. Se fueron el fondo, el degradé, el borde y el radio de la pieza;
   lo que la sigue leyendo como UNA fila son las dos líneas verticales y
   la luz del destacado.
   ⚠ LA LÍNEA SE VE (.12 de blanco, no .055): sin la caja alrededor, la
   división es lo único que ordena los tres datos. */
.cop-datos-torneo{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  align-items:stretch;
  position:relative;
}

/* ⚠ EL SEPARADOR ES UN BORDE IZQUIERDO Y NO UN `gap`: el borde se mide y
   se ve igual en las tres columnas; un `gap` no dibuja nada. */
.cdt-caja{
  position:relative;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.3rem; min-width:0;
  padding:var(--gap-xs, .3rem) var(--gap-xs, .3rem) .3rem;
  border-left:1px solid rgba(255,255,255,.12);
  /* LA ENTRADA ESCALONADA (stagger): cada dato sube un toque después que
     el anterior, con salida rápida y llegada lenta (ease-out) */
  opacity:0; transform:translateY(8px);
  transition:opacity .38s ease, transform .5s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i, 0) * 80ms);
}
.cdt-caja:first-child{ border-left:0 }
.cop-datos-torneo.entra .cdt-caja{ opacity:1; transform:none }

/* ⚠⚠ EL NÚMERO EN ANTON Y EL RÓTULO EN INTER, igual que en toda la app:
   es lo que hace que estos tres se lean como «datos de torneo» y no como
   un componente nuevo. El `min-width:0` del padre no alcanza para que el
   número se achique: hace falta acá también, porque el `inline-flex` de
   `<b>` tiene su propio ancho mínimo. */
.cdt-val{
  display:inline-flex; align-items:center; gap:.28rem; min-width:0;
  max-width:100%;
  font-family:'Anton','Arial Narrow',sans-serif; font-weight:400;
  font-size:clamp(1.05rem, 5.4vw, 1.42rem); line-height:1;
  color:var(--text, #f4f6fb);
  white-space:nowrap;
  font-variant-numeric:tabular-nums;   /* el contador no baila */
}
.cdt-val .cop-ico{ --cop-ico:15px; flex:0 0 auto }
.cdt-ico{
  display:inline-flex; width:15px; height:15px; flex:0 0 auto;
  color:var(--primary, #0c95eb);
}
.cdt-ico svg{ width:100%; height:100% }

.cdt-rot{
  font-family:'Inter',sans-serif; font-size:var(--fs-xs, .72rem); font-weight:700;
  letter-spacing:.07em; text-transform:uppercase;
  color:var(--text-faint, #5a6275);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%;
}

/* ══ EL DESTACADO ═════════════════════════════════════════════════
   ⚠ NO CRECE NI CAMBIA DE TIPOGRAFÍA: la grilla es de tres columnas
   iguales y cualquier cambio de tamaño desalinea las tres bases. Lo que
   cambia es la temperatura: el número en dorado y la luz de atrás. Es
   suficiente para que el ojo caiga ahí primero. */
.cdt-caja--top .cdt-val{ color:var(--gold, #ffc233) }
.cdt-caja--top .cdt-rot{ color:rgba(255,194,51,.72) }
/* ⚠ EL DESTACADO YA NO TIENE CAJA NI LÍNEA ARRIBA (23/09/2026): sin el
   marco de la pieza, un fondo dorado en una sola columna volvía a
   dibujar un recuadro. Lo encienden el número dorado y la luz de atrás,
   que late despacio (idle glow): es lo único vivo de la fila y marca
   dónde mirar. */
/* ⚠ LA LUZ ES UN HIJO Y NO UN PSEUDO (el porqué está en el JS). Va
   detrás del contenido y no intercepta el toque. */
.cdt-luz{ display:none }
.cdt-caja--top .cdt-luz{
  display:block; position:absolute; z-index:0; pointer-events:none;
  left:50%; top:-14px; width:96px; height:54px; transform:translateX(-50%);
  background:radial-gradient(closest-side, rgba(255,194,51,.34), transparent 72%);
  filter:blur(7px);
  animation:cdtLate 2.8s ease-in-out infinite alternate;
}
@keyframes cdtLate{ from{ opacity:.55 } to{ opacity:1 } }
.cdt-val, .cdt-rot{ position:relative; z-index:1 }

/* ⚠ SIN MOVIMIENTO, SIN ENTRADA: las cajas se dibujan puestas. El estado
   inicial es `opacity:0`, así que esto no es un adorno que se apaga —es
   lo que evita que la fila quede invisible. */
@media (prefers-reduced-motion: reduce){
  .cdt-caja{ opacity:1; transform:none; transition:none }
  .cdt-caja--top .cdt-luz{ animation:none }
}

/* pantallas angostas: el número manda, el rótulo cede */
@media (max-width:359px){
  .cdt-caja{ padding:.3rem .22rem .26rem }
  .cdt-rot{ font-size:var(--fs-xs, .72rem); letter-spacing:.04em }
}