/* ══════════════════════════════════════════════════════════════════
   COP · LA LISTA DE AMIGOS (26/09/2026, tanda C) · la arma cop-amigos-lista.js
   Filas sin caja (regla 1): se separan con una línea. El número del
   puesto, la camiseta del amigo, su nombre con la división, sus partidos
   y el cara a cara CONTIGO en Anton, con la barrita partida.
   ⚠ El menú de orden es `cop-menu-filtro.css` (.re-filter / .re-menu).
   ══════════════════════════════════════════════════════════════════ */
.cal-lista{display:flex;flex-direction:column;box-sizing:border-box}
.cal-lista[hidden]{display:none}
.cal-fila{--cal-c:var(--cop-acento-rgb, 12,149,235);
  display:grid;grid-template-columns:1.5rem 52px minmax(0,1fr) auto;
  grid-template-areas:"pos kit nom h2h" "pos kit meta h2h";align-items:center;gap:.3rem var(--gap-md, .7rem);
  padding:var(--gap-md, .7rem) 0;border-top:1px solid rgba(255,255,255,.07);color:inherit;text-decoration:none;box-sizing:border-box;min-width:0}
.cal-fila:first-child{border-top:0}
/* con «Desafiar»: el botón va ABAJO del cara a cara, en la fila de los datos,
   así el nombre conserva todo el ancho (a 390 px se cortaba en «Pa…») */
.cal-lista--accion .cal-fila{grid-template-columns:1.5rem 48px minmax(0,1fr) auto;
  grid-template-areas:"pos kit nom h2h" "pos kit meta acc";row-gap:.5rem}
.cal-txt{display:contents}
.cal-pos{grid-area:pos}.cal-kit{grid-area:kit}.cal-nom{grid-area:nom;align-self:end}.cal-meta{grid-area:meta;align-self:start}
.cal-h2h{grid-area:h2h}.cal-accion{grid-area:acc}
.cal-lista--accion .cal-h2h{align-self:end}
.cal-pos{font:400 var(--fs-md, .88rem)/1 Anton,Inter,sans-serif;letter-spacing:.5px;color:var(--text-faint,#5a6275);font-variant-numeric:tabular-nums}
.cal-fila:nth-child(-n+3) .cal-pos{color:rgb(var(--cal-c))}
.cal-kit{width:52px;height:52px;display:block}
.cal-lista--accion .cal-kit{width:48px;height:48px}
.cal-kit img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45))}
.cal-nom{display:flex;align-items:center;gap:var(--gap-sm, .5rem);min-width:0}
.cal-nom b{font-size:var(--fs-base, 1rem);font-weight:800;color:var(--text,#f4f6fb);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cal-nom .cop-div{width:18px;height:25px;flex:0 0 auto}
.cal-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.1rem .7rem;white-space:nowrap;min-width:0;font-size:var(--fs-xs, .72rem);color:var(--text-dim,#9aa3b5);line-height:1.2}
.cal-meta b{color:var(--text,#f4f6fb);font-weight:700;font-variant-numeric:tabular-nums}
.cal-meta i{display:none}  /* sin «·»: al partir renglón quedaba colgando */

/* el cara a cara: vos – él */
.cal-h2h{display:flex;flex-direction:column;align-items:flex-end;gap:.3rem;min-width:4.2rem}
.cal-h2h b{display:flex;align-items:baseline;gap:.12rem;font:400 var(--fs-xl, 1.3rem)/1 Anton,Inter,sans-serif;letter-spacing:.3px;color:var(--text,#f4f6fb);font-variant-numeric:tabular-nums}
.cal-h2h b em{font-style:normal;color:var(--text-faint,#5a6275)}
.cal-h2h b i{font-style:normal}
.cal-h2h--vos b i:first-child{color:rgb(var(--cal-c))}
.cal-h2h--el b i:last-child{color:var(--text-dim,#9aa3b5)}
.cal-h2h small{font-size:var(--fs-xs, .72rem);color:var(--text-faint,#5a6275);white-space:nowrap}
.cal-h2h--nada b{color:var(--text-faint,#5a6275)}
.cal-barra{display:flex;gap:2px;width:4.2rem;height:3px}
.cal-barra i,.cal-barra s{display:block;height:100%;border-radius:2px;width:var(--w)}
.cal-barra i{background:rgb(var(--cal-c))}
.cal-barra s{background:rgba(255,255,255,.28);margin-left:auto}
.cal-accion{justify-self:end;align-self:start}

/* el botón «por …» y su menú (el cuerpo es .re-filter / .re-menu) */
.cal-orden{position:relative;display:inline-flex;min-width:0;max-width:100%}
.cal-orden .re-filter{width:auto;justify-content:flex-end;--re-alto:28px;padding:0;font-size:var(--fs-sm, .8rem);font-weight:700;
  color:var(--text-dim,#9aa3b5);text-transform:none;letter-spacing:0}
.cal-orden .re-filter svg{width:14px;height:14px}
.cal-orden-txt{overflow:hidden;text-overflow:ellipsis}
.cal-orden .re-menu{right:0;left:auto;min-width:230px}
@media (hover:hover) and (pointer:fine){
  a.cal-fila:hover .cal-nom b{color:rgb(var(--cal-c))}
  .cal-orden .re-filter:hover{color:var(--text,#f4f6fb)}
}

/* cambiar el orden: la lista vuelve a entrar escalonada */
.cal-fila{animation:cal-entra .45s cubic-bezier(.2,.8,.2,1) calc(var(--i,0) * .04s) backwards}
@keyframes cal-entra{from{opacity:0;transform:translateY(6px)}}
@media (prefers-reduced-motion: reduce){ .cal-fila{animation:none} }
@media (max-width:370px){
  .cal-fila,.cal-lista--accion .cal-fila{column-gap:var(--gap-sm, .5rem);grid-template-columns:1.2rem 42px minmax(0,1fr) auto}
  .cal-kit,.cal-lista--accion .cal-kit{width:42px;height:42px}
  .cal-h2h{min-width:3.4rem}.cal-barra{width:3.4rem}
}