/* ════════════════════════════════════════════════════════════════════
   cop-duelos-pagos.css — el contador de duelos pagos (tanda 1 · 29/09/2026)
   Sin caja: se apoya sobre el fondo, como el resto de las secciones.
   Una línea con la cuenta en Anton · la barra de dos tramos (entero y
   mitad) con la marca de dónde estás · el estado en palabras.
   El acento es el de la competencia (--cop-acento-rgb): violeta en
   División League, celeste en los drafts.
   ════════════════════════════════════════════════════════════════════ */
.cop-dp{
  --dp-a: var(--cop-acento-rgb, 12,149,235);
  display:flex; flex-direction:column; gap:var(--gap-sm, .5rem);
  box-sizing:border-box; width:100%; min-width:0;
  padding:var(--gap-lg, 1rem) 0;
}
.cop-dp[hidden]{ display:none }

.cop-dp-cab{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--gap-md, .7rem); min-width:0 }
.cop-dp-rot{ font:700 var(--fs-sm, .8rem)/1.2 'Inter', sans-serif; letter-spacing:.08em; text-transform:uppercase;
  color:var(--text-dim, #9aa3b5); white-space:nowrap }
.cop-dp-cuenta{ display:inline-flex; align-items:baseline; white-space:nowrap; font-variant-numeric:tabular-nums }
.cop-dp-cuenta b{ font-family:'Anton', sans-serif; font-weight:400; font-size:1.9rem; line-height:1; color:var(--text, #f4f6fb) }
.cop-dp-cuenta span{ font-family:'Anton', sans-serif; font-size:var(--fs-lg, 1.15rem); line-height:1; color:var(--text-faint, #5a6275); margin-left:.1rem }
.cop-dp-cuenta--chica b{ font-size:var(--fs-xl, 1.3rem) }
.cop-dp-cuenta--chica span{ font-size:var(--fs-md, .88rem) }

/* ── la barra (13/10/2026): dos tramos con su leyenda abajo ── */
.cop-dp-barra{ position:relative; display:flex; gap:4px; height:12px; margin-top:var(--gap-xs, .3rem) }
.cop-dp-tramo{ position:relative; display:block; height:100%; border-radius:99px; flex-grow:0; flex-shrink:0;
  background:rgba(255,255,255,.07); box-shadow:inset 0 1px 2px rgba(0,0,0,.45) }
.cop-dp-tramo > i{ position:absolute; inset:0 auto 0 0; display:block; border-radius:inherit;
  transition:width .9s cubic-bezier(.16,1,.3,1) }
.cop-dp-tramo--entero > i{ background:linear-gradient(90deg, rgba(var(--dp-a),.55), rgb(var(--dp-a))) }
.cop-dp-tramo--mitad > i{ background:linear-gradient(90deg, rgba(var(--dp-a),.3), rgba(var(--dp-a),.6)) }
/* el borde del lleno brilla: es «dónde estás» */
.cop-dp-borde::after{ content:''; position:absolute; right:-1px; top:50%; width:16px; height:16px; border-radius:50%;
  transform:translate(40%, -50%); background:radial-gradient(circle, #fff 0 22%, rgba(var(--dp-a),.9) 23% 45%, rgba(var(--dp-a),0) 70%);
  animation:cop-dp-late 1.8s ease-in-out infinite }
@keyframes cop-dp-late{ 50%{ opacity:.55; transform:translate(40%, -50%) scale(.8) } }
.cop-dp-leyenda{ display:flex; gap:4px }
.cop-dp-leyenda > span{ flex-grow:0; flex-shrink:0; display:flex; align-items:baseline; gap:.35rem; min-width:0;
  font:700 var(--fs-xs, .72rem)/1 'Inter', sans-serif; color:var(--text-faint, #5a6275); font-variant-numeric:tabular-nums; white-space:nowrap }
.cop-dp-leyenda b{ color:var(--text-dim, #9aa3b5); font-weight:800 }

/* ── el estado en palabras ──────────────────────────────────────── */
.cop-dp-estado, .cop-dp-regla{ margin:0; font:600 var(--fs-md, .88rem)/1.35 'Inter', sans-serif; color:var(--text, #f4f6fb) }
.cop-dp-regla{ color:var(--text-dim, #9aa3b5) }
.cop-dp-regla b{ color:var(--text, #f4f6fb) }
.cop-dp-estado{ display:flex; align-items:baseline; gap:var(--gap-sm, .5rem) }
.cop-dp-estado > i{ flex:0 0 auto; width:8px; height:8px; border-radius:50%; transform:translateY(-1px); background:var(--ok, #22c55e) }
.cop-dp-estado[data-estado="mitad"] > i{ background:var(--gold, #ffc233) }
.cop-dp-estado[data-estado="sin_monedas"] > i{ background:var(--text-faint, #5a6275) }
.cop-dp-estado[data-estado="sin_monedas"]{ color:var(--text-dim, #9aa3b5) }

/* ── Draft: su tope propio ──────────────────────────────────────── */
.cop-dp-draft{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--gap-md, .7rem);
  padding-top:var(--gap-sm, .5rem); border-top:1px solid rgba(255,255,255,.07) }
.cop-dp-draft-regla{ font:600 var(--fs-md, .88rem)/1.3 'Inter', sans-serif; color:var(--text-dim, #9aa3b5); text-align:right }
.cop-dp-draft-regla b{ color:var(--text, #f4f6fb) }

@media (prefers-reduced-motion: reduce){ .cop-dp-tramo > i{ transition:none } .cop-dp-borde::after{ animation:none } }

/* adentro de la «i» del modo: la sección ya se llama «Duelos pagos» */
[data-mi-dp].cop-dp{ padding-top:var(--gap-xs, .3rem) }
[data-mi-dp] .cop-dp-cab{ justify-content:flex-start }
[data-mi-dp] .cop-dp-rot{ display:none }