/* ══════════════════════════════════════════════════════════════════
   COP · LA ESCALA DE PREMIOS — el dibujo  (21/09/2026)
   ──────────────────────────────────────────────────────────────────
   Nació adentro de `survival.html` como `.svm-pago` el mismo día, y se
   mudó acá cuando Doble o Nada pidió la misma lista con rondas en vez de
   tramos. El porqué del diseño, que sigue valiendo:

   ERAN RENGLONES IGUALES separados por una línea. Como tabla está bien;
   como pantalla de premios no dice lo único que se quiere ver de un
   vistazo, que es CUÁNTO MÁS PAGA LLEGAR MÁS ARRIBA.

   LAS TRES PIEZAS Y SU RAZÓN:
     · la BARRA de fondo, proporcional a lo que paga esa fila contra la
       que más paga de la lista: el salto se ve sin leer un número;
     · la MEDALLA con el número de fila, que ancla la fila a la izquierda
       ahora que no hay línea divisoria;
     · la fila destacada con el mismo dorado que el recuadro destacado de
       `cop-datos-torneo.css` — un idioma por pantalla, no dos acentos.

   ⚠ LA BARRA ES UN HIJO CON `width` EN LÍNEA Y NO UN `background-size`:
   se puede animar de 0 a su ancho, y un fondo no.
   ⚠ TODO LO QUE VA ENCIMA NECESITA `z-index:1`, porque la barra es un
   hermano y no un fondo.
   ══════════════════════════════════════════════════════════════════ */

/* ══ 23/09/2026 · SIN CAJA, UN RENGLÓN, EL NÚMERO DEL RANKING ═══════
   Franco: *«las tarjetas de recompensas también deben ser así, sin
   recuadro y con línea divisoria entre medio; los números tienen que ser
   los mismos que los de ranking, y el diseño más estético, con mejor
   presentación de todo en una sola línea»*.

   LO QUE CAMBIÓ Y POR QUÉ:
     · SIN CAJA: cada fila es un renglón sobre el fondo con una línea
       abajo, como toda lista de la app. Las cinco cajas apiladas eran
       el único bloque con marcos de la pantalla;
     · LA BARRA PROPORCIONAL AHORA ES LA LÍNEA DE ABAJO: la misma idea
       —cuánto más paga llegar más arriba— dibujada como un trazo de 2 px
       que se estira de izquierda a derecha al entrar (line drawing). Un
       fondo de color era, otra vez, una caja;
     · EL NÚMERO DE LA FILA ES EL DEL RANKING: Inter 800, 1.5rem, −1px,
       sin medalla. Se lee como «puesto» y no como un botón redondo;
     · UN SOLO RENGLÓN: nombre («Ronda 3») y detalle («×8 tu entrada»)
       uno al lado del otro, y el monto a la derecha detrás de una línea
       vertical — la misma división que los tres datos de arriba;
     · el monto sube hasta su valor al entrar (`COPContador`).
   ⚠ TODO LO QUE VA ENCIMA NECESITA `z-index:1`: la barra es un hermano. */

.cop-escala{ display:flex; flex-direction:column }

.cop-esc-fila{
  position:relative; display:flex; align-items:center; gap:.7rem;
  min-height:52px; padding:var(--gap-sm, .5rem) 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:var(--fs-md, .88rem); font-weight:700;
  opacity:0; transform:translateY(8px);
  transition:opacity .36s ease, transform .5s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i, 0) * 65ms);
}
.cop-escala.entra .cop-esc-fila{ opacity:1; transform:none }

/* la barra: un trazo sobre la línea de abajo, del largo de lo que paga */
.cop-esc-barra{
  position:absolute; left:0; bottom:-1px; z-index:0; height:2px; width:var(--w, 0%);
  border-radius:2px;
  background:linear-gradient(90deg, rgba(12,149,235,.85), rgba(12,149,235,.15));
  transform:scaleX(0); transform-origin:left center;
  transition:transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i, 0) * 65ms + 160ms);
}
.cop-escala.entra .cop-esc-barra{ transform:none }

/* ⚠⚠ LA MISMA LETRA QUE `.rk-rank-num` (cop-tarjeta-ranking.css, «LA
   REGLA FIJA»). Se escribe acá y no se hereda porque esta fila no es una
   `.rk-card`; el arnés `_juego-dn-sv` mide las dos en la misma página y
   se pone rojo si se separan. */
.cop-esc-med{
  position:relative; z-index:1; flex:0 0 2rem; text-align:center;
  font-family:'Inter',sans-serif; font-size:var(--fs-2xl, 1.5rem); font-weight:800;
  line-height:1; letter-spacing:-1px;
  color:var(--text, #f4f6fb);
  font-variant-numeric:tabular-nums;
}

.cop-esc-rot{
  position:relative; z-index:1; flex:1; min-width:0;
  display:flex; align-items:baseline; gap:.5rem;
  font-family:'Anton','Arial Narrow',sans-serif; font-weight:400;
  font-size:var(--fs-base, 1rem); letter-spacing:.4px; color:#fff; white-space:nowrap;
}
.cop-esc-rot em{
  font-family:'Inter',sans-serif; font-style:normal; font-weight:600;
  font-size:var(--fs-xs, .72rem); color:var(--text-dim, #9aa3b5);
  letter-spacing:0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* la línea vertical antes del monto: la misma división que los datos */
.cop-esc-monto{
  position:relative; z-index:1; flex:0 0 auto;
  display:inline-flex; align-items:center; justify-content:flex-end; gap:var(--gap-xs, .3rem);
  min-width:5.4rem; padding-left:var(--gap-md, .7rem); align-self:stretch;
  border-left:1px solid rgba(255,255,255,.12);
  font-family:'Anton','Arial Narrow',sans-serif; font-weight:400; font-size:var(--fs-lg, 1.15rem);
  color:var(--gold, #ffc233); font-variant-numeric:tabular-nums;
}
.cop-esc-monto .cop-ico{ --cop-ico:16px }

/* ⚠ SE MARCA UNA SOLA FILA: pintar las cinco haría que el escalón más
   bajo parezca un premio. Sin caja: el número y el nombre en dorado, la
   barra dorada y una luz detrás del número que late despacio. */
.cop-esc-fila--top .cop-esc-med,
.cop-esc-fila--top .cop-esc-rot{ color:var(--gold, #ffc233) }
.cop-esc-fila--top .cop-esc-barra{
  background:linear-gradient(90deg, var(--gold, #ffc233), rgba(255,194,51,.2));
}
.cop-esc-fila--top::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  left:-14px; top:50%; width:64px; height:48px; transform:translateY(-50%);
  background:radial-gradient(closest-side, rgba(255,194,51,.28), transparent 72%);
  filter:blur(6px);
  animation:escLate 2.8s ease-in-out infinite alternate;
}
@keyframes escLate{ from{ opacity:.5 } to{ opacity:1 } }

/* ⚠ SIN MOVIMIENTO: las filas se dibujan puestas y las barras ya en su
   largo. El estado inicial es `opacity:0` y `scaleX(0)`, así que esto no
   es un adorno que se apaga — es lo que evita una lista en blanco. */
@media (prefers-reduced-motion: reduce){
  .cop-esc-fila{ opacity:1; transform:none; transition:none }
  .cop-esc-barra{ transition:none; transform:none }
  .cop-esc-fila--top::before{ animation:none }
}
/* teléfonos angostos: el detalle cede antes que el monto */
@media (max-width:359px){
  .cop-esc-fila{ gap:.5rem }
  .cop-esc-monto{ min-width:4.6rem; padding-left:var(--gap-md, .7rem); font-size:var(--fs-lg, 1.15rem) }
}