/* ══════════════════════════════════════════════════════════════════
   COP · LAS RONDAS DE UN TORNEO Y LAS PESTAÑAS DE SU MENÚ
   (24/09/2026, ronda 9 — reemplaza a la escalera del 21/09)
   ──────────────────────────────────────────────────────────────────
   Las tarjetas las dibuja `COPDuelo` con su hoja (`cop-tarjeta-duelo.css`
   + `cop-ui-partido.css`); acá sólo va lo que es de ESTE menú:
     · el estado apagado de la ronda que viene
     · la entrada y el festejo de una ronda ganada
     · las pestañas Rondas / Recompensas / Jugadores
   ⚠⚠ LA ESCALERA VIEJA (`.cop-rondas`, `.cop-rd`, `.rd-num`, el eje que
   se llenaba) SE BORRÓ: Franco pidió las tarjetas de la app en su lugar
   y dejar su CSS era dejar un dibujo muerto esperando volver.
   ══════════════════════════════════════════════════════════════════ */

/* ── la ronda que viene: se ve, no se toca ─────────────────────────
   ⚠ `.4` ES LA REGLA DEL SISTEMA para lo deshabilitado («se apaga, no se
   esconde»). Se apaga la tarjeta entera y no cada pieza: así la luz de
   las camisetas baja junto con el texto y no queda un halo encendido
   sobre una tarjeta muerta. */
.cop-rondas-t > .rd-futura{opacity:.4;pointer-events:none}

/* ── la ronda sin partido: un renglón con candado ──────────────────
   ⚠ Mismo aire lateral y misma línea divisoria que una fila de partido
   (`--cop-pt-aire`, `--cop-pt-linea`), así no parece de otra lista. */
.cop-rondas-t > .rd-sorteo{
  display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:var(--gap-md, .7rem);
  padding:1rem var(--cop-pt-aire, 22px);
  border-top:1px solid var(--cop-pt-linea, rgba(255,255,255,.07));
  font-family:'Inter',sans-serif;
}
.rd-sorteo-ico{width:18px;height:18px;color:var(--text-dim, #9aa3b5)}
.rd-sorteo-ico svg{width:100%;height:100%;display:block}
.rd-sorteo-n{font-weight:800;font-size:var(--fs-sm, .8rem);letter-spacing:1.2px;text-transform:uppercase;color:#fff}
.rd-sorteo-t{justify-self:end;text-align:right;font-weight:600;font-size:var(--fs-sm, .8rem);color:var(--text-dim, #9aa3b5)}

/* ── la entrada: las tarjetas suben en cascada ─────────────────────
   ⚠ Desde un estado VISIBLE: si la animación no corre (menos movimiento
   pedido, o la capa se abrió sin repintar), la tarjeta ya está. */
@keyframes rd-sube{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.cop-rondas-t > .rd-card{animation:rd-sube .45s cubic-bezier(.16,1,.3,1) both}
.cop-rondas-t > .rd-card:nth-child(2){animation-delay:.06s}
.cop-rondas-t > .rd-card:nth-child(3){animation-delay:.12s}
.cop-rondas-t > .rd-card:nth-child(4){animation-delay:.18s}
.cop-rondas-t > .rd-card:nth-child(5){animation-delay:.24s}
/* la apagada termina en .4, no en 1 */
.cop-rondas-t > .rd-futura{animation-name:rd-sube-tenue}
@keyframes rd-sube-tenue{from{opacity:0;transform:translateY(12px)}to{opacity:.4;transform:none}}

/* ── el festejo: pop + un destello que cruza una sola vez ──────────── */
@keyframes rd-festeja{
  0%  {transform:scale(.96)}
  45% {transform:scale(1.02)}
  100%{transform:none}
}
@keyframes rd-destello{from{transform:translateX(-120%)}to{transform:translateX(120%)}}
.cop-rondas-t > .rd-festeja{position:relative;overflow:hidden;
  animation:rd-festeja .7s cubic-bezier(.2,.8,.2,1) var(--rd-d, 0s) both}
.cop-rondas-t > .rd-festeja::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg, transparent 40%, rgba(34,197,94,.22) 50%, transparent 60%);
  animation:rd-destello .9s cubic-bezier(.2,.8,.2,1) var(--rd-d, 0s) both;
}

@media (prefers-reduced-motion: reduce){
  .cop-rondas-t > .rd-card,.cop-rondas-t > .rd-festeja,.cop-rondas-t > .rd-festeja::after{animation:none !important}
  .cop-rondas-t > .rd-festeja::after{display:none}
}

/* ── LAS PESTAÑAS DEL MENÚ DE TORNEO ───────────────────────────────
   ⚠ LA TIRA ES `.cop-tabs.cop-tabs--full` (`cop-ui-tabs.css`), la de toda
   la app: acá sólo se le da el aire con la tarjeta de arriba y con el
   contenido de abajo, que es la separación canónica (`--gap-lg`).
   ⚠ `[hidden]` PROPIO: el panel declara `display` y sin esta línea un
   panel escondido se seguiría viendo (el bug que ya apareció siete
   veces en la app). */
.tm-tabs{margin:var(--gap-xl, 1.2rem) 0 var(--gap-lg, 1rem)}
.tm-panel{display:block}
.tm-panel[hidden]{display:none}
@keyframes tm-entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.tm-panel:not([hidden]){animation:tm-entra .3s cubic-bezier(.16,1,.3,1) both}
@media (prefers-reduced-motion: reduce){ .tm-panel:not([hidden]){animation:none} }

/* ── 08/10/2026 · Survival: la ronda que viene con la tarjeta NORMAL ──
   (`futuraNormal`). Se ve entera y Estadísticas se toca; lo único apagado
   es «Jugar Ahora», que viene `disabled` desde el componente. */
.cop-rondas-t > .rd-futura.rd-futura--normal{opacity:1;pointer-events:auto;animation-name:rd-sube}

/* ── 08/10/2026 · LAS RONDAS QUE VIENEN, APAGADAS ───────────────────────
   Franco (Survival): «tienen que aparecer con el estilo bloqueado encima
   para que se destaque visualmente la ronda activa» → y después: «no
   tiene que tener ese candado, simplemente tienen que estar apagadas las
   tarjetas sin los colores vivos». Sin color y más tenues; Estadísticas
   se sigue tocando. */
.cop-rondas-t > .rd-futura.rd-futura--normal{filter:grayscale(1) brightness(.62);opacity:.7}