/* ══════════════════════════════════════════════════════════════════
   COP · EL PERFIL — OPCIÓN A «VITRINA», CON PESTAÑAS
   (24/09/2026, ronda 9 · mudado de `probeta-perfil.css` + la opción A)
   ──────────────────────────────────────────────────────────────────
   Franco eligió la A: *«me gustó mucho la opción A con las tabs que
   muestran cada contenido abajo»*. Esta hoja es la de las DOS pantallas
   de perfil —`mi-perfil.html` y `perfil.html`— y la usa `cop-perfil-a.js`.
   ⚠⚠ SE MUDÓ, NO SE COPIÓ: las piezas vivían en la probeta de la ronda
   6; las probetas se borran con esta tanda.
   Sin cajas (regla 1): líneas, luz del acento y números en Anton.
   ══════════════════════════════════════════════════════════════════ */
.pp{
  --pp-c: var(--cop-acento-rgb, 12,149,235);
  --pp-oro: 255,194,51; --pp-plata: 200,212,228; --pp-bronce: 214,140,82;
  --pp-v: 34,197,94; --pp-r: 255,59,92;
}
.pp{color:#fff;font-family:var(--texto, Inter, sans-serif)}
.pp *{box-sizing:border-box}
.pp-anton{font-family:Anton, var(--texto, Inter), sans-serif;font-weight:400;letter-spacing:.3px}

/* ── título de sección: número + nombre ─────────────────────────── */
.pp-tit{display:flex;align-items:baseline;gap:var(--gap-md, .7rem);margin:0 0 1rem}
.pp-tit b{font-family:Anton, Inter, sans-serif;font-weight:400;font-size:var(--fs-2xl, 1.5rem);letter-spacing:.4px;text-transform:uppercase}
.pp-tit em{font-style:normal;font:800 .72rem Inter,sans-serif;letter-spacing:2px;color:rgb(var(--pp-c))}
/* ⚠ 28/09/2026 (tanda H): se fue la línea al lado del título. Franco: «quiero que elimines ese efecto que le ponés de una línea larga al lado de algunos títulos, no me gusta nada, sacala de toda la app». Lo controla `_h-lineas`. */
.pp-tit small{margin-left:auto;font:700 .78rem Inter,sans-serif;color:var(--text-dim,#9aa3b5);order:3}

/* ── insignias ──────────────────────────────────────────────────── */
/* ⚠ 26/09 (tanda B): los aros dorado/plata/bronce se borraron. Franco:
   «no los círculos dorados y plateados». Las dibuja cop-insignia.js/css. */

/* ── filtros ────────────────────────────────────────────────────── */
.pp-filtros{display:flex;gap:var(--gap-sm, .5rem);overflow-x:auto;scrollbar-width:none;margin:0 -1rem 1.1rem;padding:0 1rem}
.pp-filtros::-webkit-scrollbar{display:none}
.pp-chip{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--gap-sm, .5rem);height:36px;padding:0 var(--gap-md, .7rem);border-radius:var(--r-card, 14px);
  font:700 .8rem Inter,sans-serif;color:var(--text-dim,#9aa3b5);background:none;cursor:pointer;
  border:1px solid rgba(255,255,255,.1);transition:color .2s, border-color .2s, background .2s}
.pp-chip.activo{color:#fff;border-color:rgba(var(--pp-c),.8);background:rgba(var(--pp-c),.12)}
.pp-chip-logo{width:22px;height:22px;background:var(--tc-logo,none) center/contain no-repeat}

/* ── los números del filtro ─────────────────────────────────────── */
[data-numeros]{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap-xl, 1.2rem) var(--gap-md, .7rem);transition:opacity .16s, transform .16s}
[data-numeros].cambiando{opacity:0;transform:translateY(6px)}
.pp-num{display:flex;flex-direction:column;align-items:center;gap:.2rem;min-width:0}
.pp-num b{font-family:Anton, Inter, sans-serif;font-weight:400;font-size:1.7rem;line-height:1;font-variant-numeric:tabular-nums}
.pp-num small{font:700 .66rem Inter,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:var(--text-dim,#9aa3b5);text-align:center}
.pp-num--g b{color:rgb(var(--pp-v))} .pp-num--p b{color:rgba(var(--pp-r),.9)}
.pp-num[data-k="efec"]{grid-row:span 2;justify-content:center}
.pp-anillo{position:relative;width:92px;height:92px;display:grid;place-items:center}
.pp-anillo svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.pp-anillo circle{fill:none;stroke-width:5;stroke-linecap:round}
.pp-anillo .f{stroke:rgba(255,255,255,.08)}
.pp-anillo .t{stroke:rgb(var(--pp-c));stroke-dasharray:var(--v) 100;filter:drop-shadow(0 0 5px rgba(var(--pp-c),.7));animation:pp-anillo 1.2s cubic-bezier(.16,1,.3,1) .2s both}
@keyframes pp-anillo{from{stroke-dasharray:0 100}}
.pp-anillo b{font-size:var(--fs-2xl, 1.5rem)}
.pp-barra-gpe{grid-column:1/-1;display:flex;gap:3px;height:6px}
.pp-barra-gpe > *{display:block;height:100%;width:var(--w);border-radius:3px;text-decoration:none;transform-origin:left center;animation:pp-crece .8s cubic-bezier(.16,1,.3,1) .3s both}
.pp-barra-gpe i{background:rgb(var(--pp-v))} .pp-barra-gpe u{background:rgba(255,255,255,.35)} .pp-barra-gpe s{background:rgba(var(--pp-r),.8)}
@keyframes pp-crece{from{transform:scaleX(0)}}

/* ── por modo ───────────────────────────────────────────────────── */
.pp-modo{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--gap-md, .7rem);padding:.7rem 0;
  border-top:1px solid rgba(255,255,255,.07);transition:opacity .25s}
.pp-modo.apagado{opacity:.28}
.pp-modo-logo{width:44px;height:44px;background:var(--tc-logo,none) center/contain no-repeat;filter:drop-shadow(0 3px 8px rgba(0,0,0,.5))}
.pp-modo-txt{display:flex;flex-direction:column;gap:.15rem;min-width:0}
.pp-modo-txt b{font-size:var(--fs-md, .88rem);font-weight:800}
.pp-modo-txt small{font-size:var(--fs-xs, .72rem);color:var(--text-dim,#9aa3b5)}
.pp-modo-barra{height:3px;border-radius:2px;background:rgba(255,255,255,.07);margin-top:.3rem;overflow:hidden}
.pp-modo-barra i{display:block;height:100%;width:var(--w);border-radius:2px;background:linear-gradient(90deg, rgba(var(--tc-rgb,var(--pp-c)),.4), rgb(var(--tc-rgb,var(--pp-c))));
  transform-origin:left;animation:pp-crece .9s cubic-bezier(.16,1,.3,1) calc(.3s + var(--i,0) * .06s) both}
.pp-modo-max{display:flex;flex-direction:column;align-items:flex-end}
.pp-modo-max b{font-family:Anton, Inter, sans-serif;font-weight:400;font-size:var(--fs-xl, 1.3rem);line-height:1;font-variant-numeric:tabular-nums}
.pp-modo-max small{font:700 .6rem Inter,sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--text-faint,#5a6275)}

/* ── rachas ─────────────────────────────────────────────────────── */
.pp-racha{display:flex;align-items:center;gap:var(--gap-lg, 1rem);padding:var(--gap-md, .7rem) 0}
.pp-racha > b{flex:0 0 3.2rem;text-align:right;font-family:Anton, Inter, sans-serif;font-weight:400;font-size:2rem;line-height:1;color:rgb(var(--pp-c));font-variant-numeric:tabular-nums;text-shadow:0 0 18px rgba(var(--pp-c),.45)}
.pp-racha span{display:flex;flex-direction:column;min-width:0}
.pp-racha strong{font-size:var(--fs-md, .88rem);font-weight:800}
.pp-racha small{font-size:var(--fs-xs, .72rem);color:var(--text-dim,#9aa3b5)}
/* 26/09: actuales y mejores. La que está viva lleva una llama que late. */
.pa-rch-chips{margin-bottom:var(--gap-sm, .5rem)}
[data-rachas]{transition:opacity .16s ease}
[data-rachas].cambiando{opacity:0}
.pa-rch-tit{display:flex;align-items:center;gap:var(--gap-sm, .5rem);margin:1rem 0 .2rem;font:800 var(--fs-xs, .72rem) Inter,sans-serif;
  letter-spacing:1.3px;text-transform:uppercase;color:var(--text-dim,#9aa3b5)}
.pa-rch-tit--mejor{margin-top:var(--gap-2xl, 1.8rem)}
.pa-rch-punto{width:7px;height:7px;border-radius:50%;background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.6);animation:pa-vivo 1.8s ease-out infinite}
@keyframes pa-vivo{0%{box-shadow:0 0 0 0 rgba(34,197,94,.55)}100%{box-shadow:0 0 0 8px rgba(34,197,94,0)}}
.pa-rch-grupo .pp-racha{position:relative;border-bottom:1px solid rgba(255,255,255,.06)}
.pa-rch-grupo .pp-racha:last-child{border-bottom:0}
.pp-racha:not(.viva) > b{opacity:.55}
.pa-rch-tit--mejor + .pa-rch-grupo .pp-racha > b{opacity:1;color:rgb(var(--pp-c));}
.pp-racha-fuego{margin-left:auto;flex:0 0 auto;width:14px;height:18px;background:linear-gradient(180deg,#ffd166,#ff6b35);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M7 0c1 4 6 6 6 11a6 6 0 0 1-12 0c0-3 2-4 2-6 1 1 2 2 2 3 0-3 1-5 2-8z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 18'%3E%3Cpath d='M7 0c1 4 6 6 6 11a6 6 0 0 1-12 0c0-3 2-4 2-6 1 1 2 2 2 3 0-3 1-5 2-8z'/%3E%3C/svg%3E") center/contain no-repeat;
  animation:pa-llama 1.2s ease-in-out infinite;transform-origin:50% 100%}
@keyframes pa-llama{0%,100%{transform:scale(1)}50%{transform:scale(1.1,.94)}}

/* ── amigos ─────────────────────────────────────────────────────── */
/* el menú de orden de Amigos flota sobre la lista: el título va arriba de las filas */
#pa-amigos .pp-tit{position:relative;z-index:3}
/* ⚠ 26/09 (tanda C): la fila del amigo (.pp-amigo) se mudó a cop-amigos-lista.css; .pp-h2h queda para «Contra vos» */
.pp-h2h{display:flex;gap:2px;height:4px}
.pp-h2h > *{display:block;height:100%;width:var(--w);border-radius:2px;text-decoration:none;transform-origin:left;animation:pp-crece .8s cubic-bezier(.16,1,.3,1) calc(.3s + var(--i,0) * .06s) both}
.pp-h2h i{background:rgb(var(--pp-v))} .pp-h2h s{background:rgba(var(--pp-r),.75)}

/* ── equipos competitivos ───────────────────────────────────────── */
.pp-eq{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:var(--gap-lg, 1rem);padding:var(--gap-md, .7rem) var(--gap-lg, 1rem);
  border-radius:var(--r-card, 14px);color:#fff;text-decoration:none;
  border:1.5px solid transparent;
  background:linear-gradient(#0b0e14,#0b0e14) padding-box,
    radial-gradient(55% 60% at 0% 0%, rgb(var(--pp-c)) 0 18%, rgba(var(--pp-c),0) 66%) border-box,
    radial-gradient(55% 60% at 100% 100%, rgb(var(--pp-c)) 0 18%, rgba(var(--pp-c),0) 66%) border-box,
    linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.12)) border-box;
  background-origin:border-box}
.pp-eq + .pp-eq{margin-top:var(--gap-md, .7rem)}
.pp-eq-kit{width:50px;height:50px}
.pp-eq-kit img{width:100%;height:100%;object-fit:contain;display:block}
.pp-eq-txt{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.pp-eq-txt small{font:800 .62rem Inter,sans-serif;letter-spacing:1.4px;text-transform:uppercase;color:rgb(var(--pp-c))}
.pp-eq-txt b{font-size:var(--fs-base, 1rem);font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-eq-txt em{font-style:normal;font-size:var(--fs-xs, .72rem);color:var(--text-dim,#9aa3b5)}
.pp-eq-pos{display:flex;flex-direction:column;align-items:center;gap:.1rem}
.pp-eq-pos .cop-div{width:28px;height:39px}
.pp-eq-pos small{font:800 .72rem Inter,sans-serif;color:var(--text-dim,#9aa3b5)}
.pp-eq--vacio{background:none;border:1.5px dashed rgba(255,255,255,.14)}
.pp-eq--vacio .pp-eq-kit{border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12)}
.pp-eq--vacio small{color:var(--text-faint,#5a6275)}

/* ── la carta que sigue al dedo ─────────────────────────────────── */
[data-inclina]{perspective:900px}
[data-inclina] > .cjc{transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1);transform-style:preserve-3d;will-change:transform}
/* ══ LA CARTA QUE SE DA VUELTA (25/09/2026, tanda 12B) ═══════════════
   El frente es la carta de siempre y el dorso la espalda de la camiseta
   con nombre y número. Es un giro 3D (flip) de .7 s con salida suave; la
   inclinación con el puntero sigue funcionando encima. Con «menos
   movimiento» se cambia de cara sin girar. */
.pa-carta--gira{cursor:pointer;perspective:1200px;-webkit-tap-highlight-color:transparent}
.pa-carta--gira:focus-visible{outline:2px solid rgb(var(--pp-c,12,149,235));outline-offset:6px;border-radius:14px}
[data-inclina] > .pa-giro{position:relative;display:grid;transform-style:preserve-3d;will-change:transform;
  transform:rotateX(var(--rx,0deg)) rotateY(calc(var(--ry,0deg) + var(--vuelta,0deg)));
  transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.pa-carta--gira.vuelta{--vuelta:180deg}
.pa-giro > .pa-cara,.pa-giro > .pa-dorso{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.pa-giro > .pa-dorso{transform:rotateY(180deg);display:grid;place-items:center}
/* ⚠⚠ 26/09/2026 — AL DARSE VUELTA NO SE VE NADA DEL FRENTE. Franco: «con
   la rotación se eliminen los elementos de la tarjeta (…) los íconos de
   división, la camiseta, el logo de Clash of Picks y el nombre siguen en
   esa posición visible y tapan la camiseta». Las piezas de la carta tienen
   su propio 3D, y ahí `backface-visibility` del padre no llega. Se apaga
   cada cara a MITAD del giro (.35 s de .7 s): es cuando está de canto. */
.pa-giro > .pa-cara{transition:visibility 0s linear .35s}
.pa-giro > .pa-dorso{visibility:hidden;transition:visibility 0s linear .35s}
.pa-carta--gira.vuelta .pa-giro > .pa-cara{visibility:hidden}
.pa-carta--gira.vuelta .pa-giro > .pa-dorso{visibility:visible}
@media (prefers-reduced-motion: reduce){ .pa-giro > .pa-cara,.pa-giro > .pa-dorso{transition:none} }
.pa-dorso .cop-mini{--mini-w:min(190px, 72vw)}
.pa-giro-pista{margin:-.7rem 0 1rem;font:700 .72rem Inter,sans-serif;letter-spacing:1px;text-transform:uppercase;color:var(--text-faint,#5a6275)}
@media (prefers-reduced-motion: reduce){ [data-inclina] > .pa-giro{transition:none} }
[data-inclina].tocando > .cjc{transition:transform .08s linear}
[data-inclina] > .cjc::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:5;
  background:radial-gradient(40% 30% at var(--lx,50%) var(--ly,20%), rgba(255,255,255,.22), transparent 70%);mix-blend-mode:screen;opacity:0;transition:opacity .3s}
[data-inclina].tocando > .cjc::after{opacity:1}
/* flota sola mientras nadie la toca */
@keyframes pp-flota{0%,100%{translate:0 0}50%{translate:0 -6px}}
[data-inclina]{animation:pp-flota 5s ease-in-out 1.2s infinite}

/* ── la entrada ─────────────────────────────────────────────────── */
@keyframes pp-sube{from{opacity:0;transform:translateY(16px)}}
@keyframes pp-pop{0%{opacity:0;transform:scale(.6)}65%{opacity:1;transform:scale(1.06)}100%{opacity:1;transform:none}}
[data-revela] .pp-tit,[data-revela] .pp-modo,[data-revela] .pp-racha,[data-revela] .pp-eq,[data-revela] .pp-red,[data-revela] .pp-lugar,[data-revela] .pp-ent{
  animation:pp-sube .6s cubic-bezier(.16,1,.3,1) calc(.08s + var(--i,0) * .07s) both}
[data-revela] .pp-ins{animation:pp-pop .55s cubic-bezier(.2,.8,.2,1) calc(.1s + var(--i,0) * .06s) both}
[data-revela]:not(.vivo) *{animation-play-state:paused}

@media (prefers-reduced-motion: reduce){
  .pp *, [data-inclina]{animation:none !important;transition:none !important}
}

/* ══ LA COMPOSICIÓN «VITRINA» ════════════════════════════════════════
   La carta al centro, flotando sobre el fondo de la app, el alias, la división, la
   bio y las redes; abajo la tira de pestañas y UNA sección por vez. */
.pa{overflow-x:clip}
.pa-hero{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:1.2rem 0 var(--gap-xl, 1.2rem);isolation:isolate}
/* ⚠⚠ 28/09/2026 (tanda H) — SE BORRÓ `.pa-halo`, LA LUZ FIJA DE ATRÁS DE LA
   CARTA (radial + cónica a pantalla completa, con pulso). Franco: «tenés que
   eliminar ese efecto de luz fija atrás que ilumina todo, quiero que tenga el
   mismo fondo que tiene el fondo de página tradicional de la página de
   inicio». El fondo es el de toda la app (`cop-ui-fondo.css`); lo mide
   `_h-perfil` B2 contra index.html, píxel a píxel. No vuelve. */
.pa-carta{width:min(62vw,250px);margin-bottom:var(--gap-xl, 1.2rem);filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
/* ══ LA CABECERA EN DOS RENGLONES (28/09/2026, tanda H) ═════════════
   Franco: «tenés que poner el nombre grande y después abajo solamente
   división y el escudo y nivel y el número. Uno al lado del otro en el
   segundo renglón». Antes eran tres pisos: el alias, y al lado del escudo
   grande «División N» en Anton de 2rem con «Nivel N» abajo, en columna.
   · Renglón 1, el alias: Anton de display, UN renglón. Si no entra, lo
     achica `ajustarAlias()` (piso 22 px); recién ahí parte (`--parte`).
   · Renglón 2, en una sola línea y centrado: escudo a la altura del texto,
     «División N», un punto de acento y «Nivel N». La palabra va en blanco
     apagado y el número en blanco lleno: se leen los dos datos sin que uno
     le gane al otro. Sin nivel, no queda el punto colgando.
   · «Desde …» abajo, aparte y discreto. */
.pa-alias{box-sizing:border-box;width:100%;margin:0;font-family:Anton,Inter,sans-serif;font-weight:400;font-size:2.4rem;line-height:1.05;letter-spacing:.5px;text-transform:uppercase;
  white-space:nowrap}
.pa-alias--parte{white-space:normal;overflow-wrap:anywhere}
.pa-rango{display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:var(--gap-sm, .5rem);margin-top:var(--gap-md, .7rem);
  font:400 var(--fs-lg, 1.15rem)/1 Anton,Inter,sans-serif;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap}
.pa-rango-esc{display:flex;flex:0 0 auto}
.pa-rango-esc .cop-div{width:19px;height:26px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.45))}
.pa-rango b{font-weight:400;color:rgba(255,255,255,.62)}
.pa-rango b span{color:var(--text,#f4f6fb)}
.pa-rango-sep{flex:0 0 auto;width:4px;height:4px;border-radius:50%;margin-inline:var(--gap-xs, .3rem);background:rgba(var(--pp-c,12,149,235),.9)}
.pa-desde{margin:var(--gap-sm, .5rem) 0 0;font:600 var(--fs-xs, .72rem) Inter,sans-serif;letter-spacing:.3px;color:var(--text-faint,#5a6275)}
.pa-bio{max-width:32ch;margin:var(--gap-md, .7rem) auto 0;font-size:var(--fs-md, .88rem);line-height:1.45;color:rgba(255,255,255,.78);overflow-wrap:anywhere}
.pa .pf-redes{justify-content:center;margin-top:1rem}
/* el estilo del modo que más juega, debajo de la división */
.pa-estilo{display:inline-flex;align-items:center;gap:var(--gap-sm, .5rem);margin-top:var(--gap-lg, 1rem);
  font:700 .8rem Inter,sans-serif;color:var(--text-dim,#9aa3b5)}
.pa-estilo b{color:#fff;font-weight:800}
.pa-acciones{display:flex;gap:var(--gap-sm,.5rem);justify-content:center;margin-top:var(--gap-xl, 1.2rem);width:100%}
.pa-acciones .cop-b{flex:1 1 0;max-width:220px}
/* ⚠ 26/09/2026 (tanda de espacios): a 390 px «Jugadores del Equipo» tocaba
   el borde de su botón (dos botones de ~175 px con 1,2rem de aire a cada
   lado). En pantallas angostas el aire baja un escalón y la letra también:
   la altura y el radio del botón de la ley no se tocan. */
@media (max-width:420px){ .pa-acciones .cop-b{padding-inline:var(--gap-md, .7rem);font-size:var(--fs-md, .88rem);white-space:nowrap} }
.pa-stats{display:grid;grid-template-columns:repeat(3,1fr);width:100%;margin-top:var(--gap-xl, 1.2rem);border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.pa-stats > div{display:flex;flex-direction:column;align-items:center;gap:.2rem;padding:var(--gap-lg, 1rem) 0}
.pa-stats > div + div{border-left:1px solid rgba(255,255,255,.08)}
.pa-stats b{font-family:Anton,Inter,sans-serif;font-weight:400;font-size:1.6rem;line-height:1}
.pa-stats small{font:700 .62rem Inter,sans-serif;letter-spacing:1.3px;text-transform:uppercase;color:var(--text-dim,#9aa3b5)}
/* ⚠ LA TIRA DE PESTAÑAS SE QUEDA PEGADA ABAJO DE LA TOPBAR */
.pa-nav{position:sticky;top:var(--topbar-h,60px);z-index:20;display:flex;gap:1.2rem;overflow-x:auto;scrollbar-width:none;
  margin:0 -1rem 1.6rem;padding:var(--gap-md, .7rem) 1rem;background:linear-gradient(var(--bg,#0b0e14) 70%, rgba(11,14,20,0));}
.pa-nav::-webkit-scrollbar{display:none}
.pa-nav button{flex:0 0 auto;font:700 .86rem Inter,sans-serif;color:var(--text-dim,#9aa3b5);background:none;border:0;cursor:pointer;
  padding:.2rem 0 var(--gap-sm, .5rem);border-bottom:2px solid transparent;transition:color .2s,border-color .2s}
.pa-nav button.activo{color:#fff;border-color:rgb(var(--pp-c));text-shadow:0 0 14px rgba(var(--pp-c),.5)}
.pa-nav button:focus-visible{outline:2px solid rgb(var(--pp-c));outline-offset:3px;border-radius:4px}
/* ⚠ PESTAÑAS, NO SCROLL: una sección por vez, entra deslizándose hacia
   el lado de la pestaña tocada (direction-aware transition) */
.pa-sec{display:none;margin-bottom:2.4rem}
.pa-sec.activo{display:block;animation:pa-entra .42s cubic-bezier(.2,.8,.2,1) both}
.pa-paneles[data-dir="izq"] .pa-sec.activo{animation-name:pa-entra-izq}
@keyframes pa-entra{from{opacity:0;transform:translateX(26px)}}
@keyframes pa-entra-izq{from{opacity:0;transform:translateX(-26px)}}
.pa-ins{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem var(--gap-md, .7rem)}
.pa-vacio{margin:var(--gap-sm, .5rem) 0 0;font-size:var(--fs-md, .88rem);line-height:1.45;color:var(--text-dim,#9aa3b5);text-align:center}
.pa-mas{display:flex;justify-content:center;margin-top:1.2rem}
.pa-vacio--arriba{margin:0 0 1rem}
.pa-cargando{margin:3rem 0;text-align:center;font:700 .88rem Inter,sans-serif;color:var(--text-dim,#9aa3b5)}
.pa-modos{margin-top:var(--gap-xl, 1.2rem)}
.pa-acciones .cop-b{margin:0}
/* lo que la pantalla suma al final de «Duelos» (torneos, últimos duelos) */
.pa-extra{margin-top:2rem}
.pa-extra > h3{margin:0 0 var(--gap-md, .7rem);font:800 .72rem Inter,sans-serif;letter-spacing:1.6px;text-transform:uppercase;color:var(--text-dim,#9aa3b5)}
.pa-extra[hidden]{display:none}


/* el estilo en la fila de cada modo */
.pp-modo-est{display:inline-flex;align-items:center;gap:.3rem;margin-top:.25rem;font:700 .66rem Inter,sans-serif;
  letter-spacing:.6px;text-transform:uppercase;color:rgb(var(--est-rgb, 154,163,181))}
.pp-modo-est .cop-est-svg{width:16px;height:18px;filter:none}
.pp-modo-logo--sin{border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.14)}

/* ── «CONTRA VOS», en el perfil de otro ─────────────────────────── */
.pa-h2h{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem;text-align:center;padding:var(--gap-sm, .5rem) 0 1rem}
.pa-h2h-lado{display:flex;flex-direction:column;align-items:center;gap:.25rem;min-width:0}
.pa-h2h-lado b{font-family:Anton,Inter,sans-serif;font-weight:400;font-size:2.6rem;line-height:1}
.pa-h2h-lado small{font:700 .72rem Inter,sans-serif;color:var(--text-dim,#9aa3b5);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pa-h2h-lado.gana b{color:rgb(var(--pp-v))}
.pa-h2h-vs{font-family:Anton,Inter,sans-serif;color:var(--text-faint,#5a6275)}
.pa-h2h .pp-h2h{grid-column:1/-1;height:6px}

/* ── EL EDITOR: la bio y las redes (sólo en el perfil propio) ────── */
.pa-edit{display:flex;flex-direction:column;gap:var(--gap-lg, 1rem)}
.pa-campo{display:flex;flex-direction:column;gap:var(--gap-xs, .3rem)}
.pa-campo > span{font:800 .66rem Inter,sans-serif;letter-spacing:1.3px;text-transform:uppercase;color:var(--text-dim,#9aa3b5)}
.pa-campo textarea,.pa-red-in input{box-sizing:border-box;width:100%;border-radius:var(--r-card,14px);
  border:1px solid var(--card-border,#1e2330);background:var(--bg,#0b0e14);color:#fff;
  font:600 .92rem Inter,sans-serif;padding:.7rem var(--gap-lg, 1rem);outline:none;transition:border-color .2s}
.pa-campo textarea{min-height:88px;resize:vertical;line-height:1.4}
.pa-campo textarea:focus,.pa-red-in input:focus{border-color:rgb(var(--pp-c))}
.pa-campo small{align-self:flex-end;font:600 .7rem Inter,sans-serif;color:var(--text-faint,#5a6275)}
.pa-red-in{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:var(--gap-md, .7rem)}
.pa-red-in > i{display:grid;place-items:center;width:36px;height:36px;color:var(--text-dim,#9aa3b5)}
.pa-red-in > i svg{width:20px;height:20px;fill:currentColor}
.pa-edit-err{margin:0;font:700 .8rem Inter,sans-serif;color:#ff6b81}
.pa-edit-err[hidden]{display:none}
.pa-edit .cop-b{width:100%}

/* ── Tu camiseta: el editor se MUDÓ a Personalizar → Skin (09/10/2026,
   cop-cosmeticos.css, `.cos-cam-*`). Acá queda sólo la nota del club. */
.pa-cam-in{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.pa-cam-in select{box-sizing:border-box;width:100%;border-radius:var(--r-card,14px);
  border:1px solid var(--card-border,#1e2330);background:var(--bg,#0b0e14);color:#fff;
  font:600 1rem Inter,sans-serif;padding:var(--gap-md, .7rem);outline:none;transition:border-color .2s;min-height:44px;
  appearance:none;-webkit-appearance:none;padding-right:2rem;
  background-image:linear-gradient(45deg,transparent 50%,#9aa3b5 50%),linear-gradient(135deg,#9aa3b5 50%,transparent 50%);
  background-position:calc(100% - 16px) 55%,calc(100% - 11px) 55%;background-size:5px 5px;background-repeat:no-repeat}
.pa-cam-in select:focus{border-color:rgb(var(--pp-c))}
.pa-cam-nota{margin:0;font:600 .72rem Inter,sans-serif;color:var(--text-faint,#5a6275)}

@media (prefers-reduced-motion: reduce){
  .pa-sec.activo{animation:none}
}

/* 08/10/2026 · Franco: «en la página de perfil del usuario, eliminá ese fondo
   de cancha detrás de los holders de las tarjetas de equipo, tiene que quedar
   liso». Sin la foto de la cancha ni sus líneas: fondo liso. */
/* 16/10/2026 · Franco: «sacá el fondito de atrás de las tarjetas de la
   alineación elegida»: las cartas van directo sobre el fondo de la app. */
.cop-cancha-panel.pp-cancha{background:transparent;border-radius:0}
.pp-cancha .cn-lineas{display:none}