/* ══════════════════════════════════════════════════════════════════
   cop-estilo-jugador.css · LAS TRES INSIGNIAS DE ESTILO  (24/09/2026)
   El dibujo lo arma `cop-estilo-jugador.js`; acá van el tamaño, los
   colores de cada pieza y el encendido de los galones.
   ⚠ Todo sale de `--est-rgb`, que la insignia trae puesto: el mismo
   CSS pinta las tres, y una cuarta el día que exista.
   ══════════════════════════════════════════════════════════════════ */
.cop-est{
  display:inline-flex;flex-direction:column;align-items:center;gap:.3rem;
  flex:0 0 auto;line-height:1;
}
.cop-est-svg{
  display:block;width:var(--est-tam, 56px);height:calc(var(--est-tam, 56px) * 72 / 64);
  overflow:visible;
  filter:drop-shadow(0 0 10px rgba(var(--est-rgb),.32));
}
.cop-est--sin .cop-est-svg{filter:none}
.cop-est .est-hex{stroke-width:2.2;stroke-linejoin:round}
.cop-est .est-hex-in{fill:none;stroke:rgba(var(--est-rgb),.22);stroke-width:1;stroke-linejoin:round}
.cop-est .est-sim{fill:rgb(var(--est-rgb))}
.cop-est .est-sim-luz{fill:rgba(255,255,255,.55)}
.cop-est .est-sim-borde{fill:none;stroke:rgb(var(--est-rgb));stroke-width:2;stroke-linejoin:round}
.cop-est .est-sim-txt{
  fill:rgba(var(--est-rgb),.9);
  font:800 17px/1 Inter, system-ui, sans-serif;
}
/* los galones: apagados son la escala, encendidos el nivel */
.cop-est .est-galon{
  fill:none;stroke:rgba(255,255,255,.13);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;
}
.cop-est .est-galon.on{stroke:rgb(var(--est-rgb))}

.cop-est-nombre{
  font-family:Inter, system-ui, sans-serif;font-weight:800;
  font-size:var(--fs-xs, .72rem);letter-spacing:1.3px;text-transform:uppercase;
  color:rgb(var(--est-rgb));white-space:nowrap;
}
.cop-est--sin .cop-est-nombre{color:var(--text-faint, #5a6275)}

/* ── EL ENCENDIDO ────────────────────────────────────────────────────
   Cuando la insignia aparece (su contenedor recibe `.vivo`, el mismo
   gancho de las estadísticas del duelo), el hexágono entra con un pop y
   los galones se prenden de abajo hacia arriba, uno por vez.
   ⚠ Sin `.vivo` alrededor (la insignia suelta, en el perfil) no hay
   animación: queda quieta y completa desde el primer cuadro. */
@keyframes cop-est-pop{
  0%  {opacity:0;transform:scale(.6) rotate(-8deg)}
  65% {opacity:1;transform:scale(1.08) rotate(1deg)}
  100%{opacity:1;transform:none}
}
@keyframes cop-est-galon{
  0%  {stroke:rgba(255,255,255,.13)}
  60% {stroke:#fff}
  100%{stroke:rgb(var(--est-rgb))}
}
[data-revela] .cop-est-svg{animation:cop-est-pop .6s cubic-bezier(.2,.8,.2,1) .35s both}
[data-revela] .cop-est .est-galon.on{
  animation:cop-est-galon .5s ease-out both;
  animation-delay:calc(.8s + (2 - var(--g, 0)) * .14s);
}
@media (prefers-reduced-motion: reduce){
  [data-revela] .cop-est-svg,
  [data-revela] .cop-est .est-galon.on{animation:none !important}
}