/* COPDuelosPro — la página de Duelos Pro (19/10/2026, tanda 15). Ver cop-duelos-pro.js */
html.dp-trabado, html.dp-trabado body{ overflow:hidden }
.cop-cab > .cop-cab-accion{ margin-right:-4px } /* como Liga Fundadores: la cabecera no va dentro de .cop-main */
.dp-main{ display:flex; flex-direction:column; gap:var(--gap-lg, 1rem); padding-block:var(--gap-sm, .5rem) calc(var(--bb-h, 58.5px) + var(--gap-2xl, 1.5rem)) }
.dp-tsec{ padding:0 var(--cop-aire, 16px); margin:var(--gap-lg, 1rem) 0 var(--gap-sm, .5rem) }
#dpLista, .dp-col{ display:flex; flex-direction:column; gap:var(--gap-2xl, 1.5rem) }
.dp-item .cop-duelo{ cursor:pointer }
.dp-vacio{ margin:var(--gap-xl, 1.3rem) 0; padding:0 var(--cop-aire, 16px); text-align:center; font:600 var(--fs-md, .88rem)/1.5 Inter, sans-serif; color:var(--text-dim, #9aa3b5) }
.dp-vacio--chico{ margin:var(--gap-sm, .5rem) 0; text-align:left; font-size:var(--fs-sm, .8rem) }

/* ── el anillo del % ─────────────────────────────────────────────── */
.dp-anillo{ position:relative; display:inline-grid; place-items:center; width:48px; height:48px; flex:none }
.dp-anillo svg{ position:absolute; inset:0; width:100%; height:100%; rotate:-90deg }
.dp-an-fondo{ fill:none; stroke:rgba(255,255,255,.1); stroke-width:4 }
.dp-an-arco{ fill:none; stroke:#0c95eb; stroke-width:4; stroke-linecap:round; transition:stroke-dasharray .6s cubic-bezier(.2,.8,.2,1) }
.dp-anillo b{ position:relative; font:400 var(--fs-md, .88rem)/1 Anton, Impact, sans-serif; color:#fff; letter-spacing:.01em }
.dp-anillo b small{ font-size:.62em; margin-left:1px; color:var(--text-dim, #9aa3b5) }
.dp-anillo--chico{ width:36px; height:36px }
.dp-anillo--chico b{ font-size:var(--fs-xs, .72rem) }

/* ── picks de la comunidad ───────────────────────────────────────── */
.dp-pick{ padding:var(--gap-sm, .5rem) var(--cop-aire, 16px) 0 }
.dp-com{ display:flex; align-items:center; justify-content:space-between; gap:var(--gap-sm, .5rem); margin:0 0 var(--gap-sm, .5rem);
  font:800 var(--fs-xs, .72rem)/1.2 Inter, sans-serif; letter-spacing:.08em; text-transform:uppercase; color:var(--text-dim, #9aa3b5) }
.dp-premio{ display:inline-flex; align-items:center; gap:4px; letter-spacing:0; text-transform:none; font-weight:700; color:#fff; white-space:nowrap }
.dp-premio b{ color:#ffd27a }
.dp-premio .cop-ico--moneda, .dp-cobrado .cop-ico--moneda{ width:16px; height:16px }
.dp-lados{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-md, .7rem) }
.dp-lado{ all:unset; box-sizing:border-box; position:relative; display:flex; align-items:center; gap:var(--gap-sm, .5rem); min-width:0;
  padding:var(--gap-sm, .5rem) var(--gap-md, .7rem); border-radius:var(--r-card, 14px); border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.03);
  cursor:pointer; transition:border-color .2s, background .2s, transform .15s }
.dp-lado:not([disabled]):active{ transform:scale(.98) }
.dp-lado[disabled]{ cursor:default }
.dp-lado-txt{ display:flex; flex-direction:column; gap:2px; min-width:0 }
.dp-lado-txt b{ font:800 var(--fs-sm, .8rem)/1.2 Inter, sans-serif; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dp-lado-txt small{ font:500 var(--fs-xs, .72rem)/1.2 Inter, sans-serif; color:var(--text-dim, #9aa3b5); white-space:nowrap }
.dp-lado--conf{ border-color:#0c95eb; background:rgba(12,149,235,.16) }
.dp-lado--mio{ border-color:#0c95eb; background:rgba(12,149,235,.1) }
.dp-tu{ position:absolute; top:-9px; right:10px; padding:2px 8px; border-radius:999px; background:#0c95eb; color:#fff;
  font:800 .64rem/1.3 Inter, sans-serif; font-style:normal; text-transform:uppercase; letter-spacing:.06em }
.dp-nota{ margin:var(--gap-sm, .5rem) 0 0; text-align:center; font:500 var(--fs-xs, .72rem)/1.4 Inter, sans-serif; color:var(--text-dim, #9aa3b5) }
.dp-nota:empty{ display:none }

/* el % con el que arrancó, debajo de cada jugador */
.dp-inicios{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-md, .7rem) }
.dp-ini{ display:flex; flex-direction:column; align-items:center; gap:4px; text-align:center }
.dp-ini > small{ font:600 var(--fs-xs, .72rem)/1.25 Inter, sans-serif; color:var(--text-dim, #9aa3b5) }
.dp-ini--mio > small{ color:#5fbbff }
.dp-tu--ini{ position:static }

/* ── historial ───────────────────────────────────────────────────── */
.dp-stats{ display:grid; grid-template-columns:1fr 1fr; gap:var(--gap-lg, 1rem) var(--gap-md, .7rem); padding:var(--gap-md, .7rem) var(--cop-aire, 16px) }
.dp-stats > div{ display:flex; flex-direction:column; gap:4px; padding-left:var(--gap-md, .7rem); border-left:2px solid rgba(12,149,235,.5) }
.dp-stats b{ font:400 var(--fs-2xl, 1.5rem)/1 Anton, Impact, sans-serif; color:#fff; letter-spacing:.01em }
.dp-stats b small{ font-size:.6em; color:var(--text-dim, #9aa3b5); margin-left:2px }
.dp-stats span{ font:600 var(--fs-xs, .72rem)/1.3 Inter, sans-serif; color:var(--text-dim, #9aa3b5) }
.dp-cobrado{ display:flex; align-items:center; justify-content:center; gap:5px; margin:0; padding:0 var(--cop-aire, 16px);
  font:600 var(--fs-sm, .8rem)/1.3 Inter, sans-serif; color:var(--text-dim, #9aa3b5) }
.dp-cobrado b{ color:#ffd27a }

/* ── jugador pro ─────────────────────────────────────────────────── */
.dp-flyer{ display:flex; flex-direction:column; align-items:center; gap:var(--gap-md, .7rem); margin:var(--gap-lg, 1rem) var(--cop-aire, 16px); text-align:center }
.dp-flyer > p{ margin:0; font:500 var(--fs-md, .88rem)/1.5 Inter, sans-serif; color:var(--text-dim, #9aa3b5); max-width:34ch }
.dp-flyer--pro{ position:relative; padding:var(--gap-2xl, 1.5rem) 0 var(--gap-lg, 1rem) }
.dp-fly-luz{ position:absolute; inset:-10% -20% auto; height:70%; pointer-events:none; z-index:-1;
  background:radial-gradient(50% 55% at 50% 40%, rgba(255,196,64,.22), transparent 70%); animation:dp-respira 5s ease-in-out infinite }
.dp-fly-logos{ display:flex; align-items:center; gap:var(--gap-md, .7rem) }
.dp-fly-logos img{ width:min(30vw, 120px); height:auto; filter:drop-shadow(0 8px 18px rgba(0,0,0,.5)); animation:dp-flota 4s ease-in-out infinite }
.dp-fly-logos img + span + img{ animation-delay:-2s }
.dp-fly-logos span{ font:400 var(--fs-xl, 1.3rem)/1 Anton, Impact, sans-serif; color:var(--text-dim, #9aa3b5) }
.dp-flyer h2{ margin:0; font:400 var(--fs-2xl, 1.5rem)/1 Anton, Impact, sans-serif; text-transform:uppercase; color:#fff; letter-spacing:.02em }
.dp-flyer p b{ color:#fff }
.dp-fly-pasos{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--gap-sm, .5rem); width:100%; max-width:360px; text-align:left }
.dp-fly-pasos li{ display:flex; align-items:center; gap:var(--gap-md, .7rem); font:600 var(--fs-sm, .8rem)/1.35 Inter, sans-serif; color:#fff }
.dp-fly-pasos li b{ flex:none; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; border:1px solid rgba(255,196,64,.6); color:#ffd27a;
  font:400 var(--fs-sm, .8rem)/1 Anton, Impact, sans-serif }
.dp-crear{ display:flex; width:calc(100% - 2 * var(--cop-aire, 16px)); max-width:520px; margin:var(--gap-sm, .5rem) auto 0 }
.dp-mios{ display:flex; flex-direction:column; padding:0 var(--cop-aire, 16px) }
.dp-mio{ display:flex; align-items:center; gap:var(--gap-md, .7rem); padding-block:var(--gap-md, .7rem); border-top:1px solid rgba(255,255,255,.08) }
.dp-mio:first-child{ border-top:0 }
.dp-mio-sk{ flex:none; --mini-w:40px }
.dp-mio-txt{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto }
.dp-mio-txt b{ font:800 var(--fs-base, 1rem)/1.2 Inter, sans-serif; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dp-mio-txt span{ font:500 var(--fs-xs, .72rem)/1.3 Inter, sans-serif; color:var(--text-dim, #9aa3b5); overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dp-mio-acc{ display:flex; gap:var(--gap-sm, .5rem); flex:none }
.dp-espera{ font:600 var(--fs-xs, .72rem)/1 Inter, sans-serif; color:var(--text-dim, #9aa3b5) }

/* ── crear desafío (página entera) ───────────────────────────────── */
.dp-hoja{ position:fixed; inset:0; z-index:1200; display:flex; flex-direction:column; background:var(--bg, #0b0e14); padding:env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px) }
.dp-hoja[hidden]{ display:none }
.dp-hoja-cab{ position:relative; flex:none }
.dp-hoja-cuerpo{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:0 var(--cop-aire, 16px) var(--gap-xl, 1.3rem) }
.dp-paso + .dp-paso{ margin-top:var(--gap-xl, 1.3rem) }
.dp-paso .cop-tsec{ display:flex; align-items:center; gap:var(--gap-sm, .5rem); margin:var(--gap-md, .7rem) 0 }
.dp-n{ display:grid; place-items:center; width:26px; height:26px; border-radius:50%; background:#0c95eb; color:#fff; font:400 var(--fs-sm, .8rem)/1 Anton, Impact, sans-serif; flex:none }
.dp-buscar{ box-sizing:border-box; width:100%; height:44px; padding:0 var(--gap-lg, 1rem); border-radius:var(--r-card, 14px); border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04); color:#fff; font:500 var(--fs-base, 1rem)/1 Inter, sans-serif; outline:none }
.dp-buscar:focus{ border-color:#0c95eb }
.dp-chips{ display:flex; gap:var(--gap-sm, .5rem); margin:var(--gap-md, .7rem) 0; flex-wrap:wrap }
.dp-chips--scroll{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; margin-inline:calc(-1 * var(--cop-aire, 16px)); padding-inline:var(--cop-aire, 16px) }
.dp-chips--scroll::-webkit-scrollbar{ display:none }
.dp-rivales{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--gap-md, .7rem) }
.dp-rival{ all:unset; box-sizing:border-box; display:flex; flex-direction:column; align-items:center; gap:4px; min-width:0; padding:var(--gap-md, .7rem) 4px;
  border-radius:var(--r-card, 14px); border:1px solid rgba(255,255,255,.08); cursor:pointer; text-align:center; --mini-w:52px; transition:border-color .2s, background .2s }
.dp-rival > b{ max-width:100%; font:800 var(--fs-sm, .8rem)/1.2 Inter, sans-serif; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dp-rival > small{ font:500 var(--fs-xs, .72rem)/1 Inter, sans-serif; color:var(--text-dim, #9aa3b5) }
.dp-tags{ display:flex; gap:3px; min-height:15px }
.dp-tags i{ font:800 .6rem/1.5 Inter, sans-serif; font-style:normal; text-transform:uppercase; letter-spacing:.05em; padding:0 5px; border-radius:4px; background:rgba(255,255,255,.08); color:var(--text-dim, #9aa3b5) }
.dp-tags .dp-tag-pro{ background:rgba(255,196,64,.14); color:#ffd27a }
.dp-sel{ border-color:#0c95eb !important; background:rgba(12,149,235,.14) !important }
.dp-partidos{ display:flex; flex-direction:column; gap:var(--gap-sm, .5rem) }
.dp-ptd{ all:unset; box-sizing:border-box; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:var(--gap-sm, .5rem);
  padding:var(--gap-sm, .5rem) var(--gap-md, .7rem); border-radius:var(--r-card, 14px); border:1px solid rgba(255,255,255,.08); cursor:pointer; transition:border-color .2s, background .2s }
.dp-ptd-eq{ display:flex; align-items:center; gap:6px; min-width:0 }
.dp-ptd-eq--v{ justify-content:flex-end; text-align:right }
.dp-ptd-eq img{ width:30px; height:30px; object-fit:contain; flex:none }
.dp-ptd-eq b{ font:700 var(--fs-sm, .8rem)/1.2 Inter, sans-serif; color:#fff; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dp-ptd-mid{ display:flex; flex-direction:column; align-items:center; gap:2px; text-align:center }
.dp-ptd-mid small{ font:600 .62rem/1.1 Inter, sans-serif; color:var(--text-dim, #9aa3b5); text-transform:uppercase; letter-spacing:.04em; max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.dp-ptd-mid b{ font:700 var(--fs-xs, .72rem)/1.1 Inter, sans-serif; color:#fff; white-space:nowrap }
.dp-hoja-pie{ flex:none; display:flex; flex-direction:column; gap:var(--gap-sm, .5rem); padding:var(--gap-md, .7rem) var(--cop-aire, 16px) var(--gap-lg, 1rem); border-top:1px solid rgba(255,255,255,.07); background:var(--bg, #0b0e14) }
.dp-resumen{ display:flex; justify-content:space-between; gap:var(--gap-md, .7rem); font:600 var(--fs-xs, .72rem)/1.3 Inter, sans-serif; color:var(--text-dim, #9aa3b5) }
.dp-resumen:empty{ display:none }
.dp-resumen b{ color:#fff }
.dp-hoja-pie .cop-b{ display:flex; width:100%; max-width:520px; margin:0 auto }
.dp-msj{ margin:0; text-align:center; font:600 var(--fs-sm, .8rem)/1.4 Inter, sans-serif; color:#ff8a92 }
.dp-msj:empty{ display:none }

/* ── piezas de la guía ───────────────────────────────────────────── */
.dp-g-carta{ display:block; width:34px; height:46px; border-radius:7px; border:1.5px solid rgba(12,149,235,.8); background:linear-gradient(160deg, rgba(12,149,235,.35), rgba(12,149,235,.05)) }
.dp-g-an .dp-anillo{ width:64px; height:64px }
.dp-g-an .dp-anillo b{ font-size:var(--fs-lg, 1.15rem) }
.dp-g-premio{ display:inline-flex; align-items:center; gap:6px; font:400 2.4rem/1 Anton, Impact, sans-serif; color:#ffd27a }
.dp-g-premio .cop-ico--moneda{ width:36px; height:36px }

@keyframes dp-flota{ 0%,100%{ translate:0 0 } 50%{ translate:0 -6px } }
@keyframes dp-respira{ 0%,100%{ opacity:.7 } 50%{ opacity:1 } }
@media (min-width:900px){
  .dp-main{ max-width:1100px; margin:0 auto; width:100% }
  #dpLista, .dp-col{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--gap-2xl, 1.5rem) }
  .dp-stats{ grid-template-columns:repeat(4, 1fr) }
  .dp-rivales{ grid-template-columns:repeat(5, minmax(0, 1fr)) }
}
@media (max-width:359px){ .dp-rivales{ grid-template-columns:repeat(2, minmax(0, 1fr)) } .dp-anillo{ width:42px; height:42px } }
@media (prefers-reduced-motion: reduce){ .dp-lado, .dp-an-arco{ transition:none } .dp-fly-luz, .dp-fly-logos img{ animation:none } }