/* ============================================================
   POTRERO · el álbum
   ------------------------------------------------------------
   La idea: cada jugador es una figurita, y la rareza de su
   figurita sale de su palmarés. El resto del sitio es la página
   del álbum: callada, de tinta y papel, para que las figuritas
   sean lo único que brilla.

   Tres reglas que ordenan todo lo de abajo:
     1. UN solo color de marca (el verde) y se usa poco. Los
        degradés verde→dorado de antes estaban en todos lados y
        por eso no significaban nada.
     2. El dorado/plata/bronce NO son decoración: son rareza.
        Si algo es dorado, es porque ganó algo.
     3. El movimiento tiene peso y dura poco. Nada flota.
   ============================================================ */
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:400 800;font-stretch:62% 125%;
  font-display:swap;src:url(fonts/archivo-var-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Archivo";font-style:normal;font-weight:400 800;font-stretch:62% 125%;
  font-display:swap;src:url(fonts/archivo-var-latin-ext.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,
    U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,
    U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  /* Carbon frio, no la tierra calida de antes. Decision del 02-sep:
     el blanco y negro sobre tierra "quedaba raro". Se eligio un color de
     marca (abajo) y el fondo se enfrio para que el celeste se lea limpio. */
  --bg:#0b1016; --bg2:#0f151c; --card:#121922; --card2:#182230;
  --line:#1f2a36; --line2:#33404e;
  --txt:#eef3f7; --mut:#aebac6; --dim:#7f8c99;
  /* --dim y --mut son colores de TEXTO y cumplen AA contra las tres
     superficies (--dim da 4,6 sobre --card2 en el peor caso). Si algo tiene
     que verse mas apagado se baja el peso o el tamanio, no el contraste.
     Para trazos y bordes, que no son texto, esta --inerte. */
  --inerte:#5c6875;

  /* EL COLOR DE MARCA: celeste. Elegido el 02-sep entre tres opciones
     (celeste sobre carbon, fucsia sobre tierra, arcilla). Gano porque es el
     unico que no le pisa el terreno a nada que ya signifique algo: ni al oro
     (campeon), ni al bronce (promocion), ni a la amarilla y la roja
     (tarjetas), ni al verde y rojo del dato comparado.

     Donde va, y en ningun otro lado: el isotipo, la pestania activa, la
     etiqueta del titular, el boton primario, el chip activo, el foco del
     buscador. Un color que esta en todos lados no significa nada: eso ya
     paso con el verde y por eso se habia sacado todo. */
  --acento:#62c4f0; --sobre-acento:#071119; --acento-suave:#62c4f01f;

  /* El resto del presupuesto cromatico sigue yendo a TRES cosas:
       1. logro    -> los metales (oro, plata, bronce). Si algo brilla, gano.
       2. tarjetas -> amarilla y roja literales, las del futbol.
       3. dato comparado -> mas/menos, y NUNCA solos: siempre con signo y con
          la referencia escrita al lado. */
  --dato-mas:#4ecb86; --dato-menos:#e8736e;
  --amarilla:#f2c53d; --roja:#ea5a50;

  /* Metales = rareza. Un solo lugar donde se definen. */
  --bronce:#c2793c; --plata:#ccd3d6; --oro:#e9b545; --gold:#e9b545;

  --shadow:0 18px 48px -24px #000, 0 2px 8px -4px #0008;
  --shadow-fig:0 30px 60px -30px #000, 0 4px 14px -6px #000a;
  /* Un solo easing para todo: salida rápida, frenada larga. Es lo
     que hace que el movimiento se sienta con peso y no elástico. */
  --ease:cubic-bezier(.22,1,.36,1);
  --r:14px; --r-lg:20px;
}
*{box-sizing:border-box}
/* El atributo `hidden` pone display:none al nivel del navegador, y cualquier
   regla de display propia le gana. Con la constelacion en display:flex, alternar
   lista/mapa mostraba las dos cosas a la vez. */
[hidden]{display:none !important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);
  color:var(--txt);
  font:15px/1.55 "Archivo",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-variant-numeric:tabular-nums;   /* que los números no bailen entre filas */
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* La trama del cartón. Es casi invisible a propósito: se nota que
   hay textura, no se ve el patrón. */
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:
    radial-gradient(900px 480px at 50% -12%,#1a1815 0%,transparent 70%),
    repeating-linear-gradient(90deg,#ffffff03 0 1px,transparent 1px 3px)}
h1,h2,h3{margin:0;letter-spacing:-.015em}
button,select,input{font:inherit;color:inherit}
::selection{background:var(--txt);color:var(--bg)}

/* Condensada para nombres y números grandes: es el gesto de la
   figurita (el apellido entra siempre, por largo que sea). */
.cond{font-stretch:78%;letter-spacing:-.005em}
.num-xl{font-stretch:75%;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important}
}

/* ---------- Header ---------- */
header{position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(18px) saturate(1.3);
  border-bottom:1px solid var(--line);padding:12px 24px;display:flex;align-items:center;gap:28px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px}
/* La marca es la palabra: la O es el circulo central de la cancha con el punto
   del saque, en celeste. No hay isotipo aparte (03-sep-2026). */
.brand h1{font-size:20px;font-weight:800;letter-spacing:.2em;font-stretch:88%;display:inline-flex;align-items:center}
.brand h1 .o{width:.92em;height:.92em;margin:0 .2em 0 .02em;color:var(--acento);flex:none}
.brand p{margin:0;color:var(--dim);font-size:11px;letter-spacing:.06em;text-transform:uppercase}
nav#tabs{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
nav#tabs::-webkit-scrollbar{display:none}
/* La pestaña activa se marca con una línea abajo, no con una
   píldora verde. Menos ruido y el verde queda libre para señalar
   cosas que importan. */
nav#tabs button{background:transparent;border:none;color:var(--mut);padding:11px 14px 12px;min-height:44px;
  cursor:pointer;font-weight:600;position:relative;flex:0 0 auto;white-space:nowrap;
  transition:color .2s var(--ease)}
nav#tabs button::after{content:"";position:absolute;left:14px;right:14px;bottom:2px;height:2px;
  border-radius:2px;background:var(--acento);transform:scaleX(0);opacity:0;
  transition:transform .32s var(--ease),opacity .2s}
nav#tabs button:hover{color:var(--txt)}
nav#tabs button.active{color:var(--txt)}
nav#tabs button.active::after{transform:scaleX(1);opacity:1}
.resumen{margin-left:auto;color:var(--dim);font-size:11.5px;text-align:right;line-height:1.4;
  letter-spacing:.01em}
.resumen b{color:var(--mut);font-weight:700}

main{max-width:1120px;margin:0 auto;padding:28px 24px 90px;position:relative;z-index:1}
.tab{display:none}
.tab.active{display:block}
/* Entrada escalonada: los hijos directos aparecen uno atrás del
   otro. El delay lo pone JS en --i. */
.stagger>*{animation:rise .5s var(--ease) both;animation-delay:calc(var(--i,0)*38ms)}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- Search / hero ---------- */
.hero{text-align:center;padding:42px 0 26px}
.hero h2{font-size:clamp(28px,5vw,44px);font-weight:800;margin-bottom:8px;font-stretch:80%;
  letter-spacing:-.025em;line-height:1.05}
.hero h2 span{color:var(--txt);text-decoration:underline;
  text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-color:var(--acento)}
.hero p{color:var(--mut);margin:0 auto 24px;max-width:46ch}
.searchbar{position:relative;max-width:600px;margin:0 auto}
/* Lupa como SVG inline (data URI): no hay request extra ni depende de
   que la fuente traiga el glifo. */
.searchbar::before{content:"";position:absolute;left:18px;top:50%;width:18px;height:18px;
  transform:translateY(-50%);background:currentColor;color:var(--dim);transition:color .2s var(--ease);
  -webkit-mask:var(--lupa) center/contain no-repeat;mask:var(--lupa) center/contain no-repeat}
.searchbar:focus-within::before{color:var(--txt)}
:root{--lupa:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M16.5 16.5 21 21'/%3E%3C/svg%3E")}
.searchbar input{width:100%;background:var(--card);border:1px solid var(--line2);border-radius:12px;
  padding:16px 18px 16px 48px;color:var(--txt);outline:none;font-size:16px;
  transition:border-color .2s,box-shadow .2s;box-shadow:var(--shadow)}
.searchbar input::placeholder{color:var(--dim)}
.searchbar input:focus{border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-suave),var(--shadow)}
#q-team{padding-left:18px}
.searchbar#plain::before{content:none}

.filtros{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:20px}
.filtros label{display:flex;flex-direction:column;gap:6px;font-size:11px;color:var(--mut);
  text-transform:uppercase;letter-spacing:.05em;font-weight:600}
.filtros select,.h2h-pick select{background:var(--card);border:1px solid var(--line2);border-radius:11px;
  padding:11px 13px;color:var(--txt);min-width:160px;cursor:pointer;outline:none;
  /* 44 px y 16 px no son estetica: por debajo de 16 px iOS hace zoom al enfocar
     el campo y descoloca el layout, y 44 es el area tactil minima. */
  min-height:44px;font-size:16px}
.filtros select:focus{border-color:var(--txt)}

/* ---------- Las ligas, como lista ----------
   Eran once tarjetas grandes distinguidas solo por un color arbitrario: un
   indice de base de datos ocupando la pantalla de entrada. Ahora son una lista
   compacta y sin color, que es lo que son: la procedencia del dato. Lo que va
   arriba es el buscador, porque la primera pregunta de cualquiera es "estoy yo". */
.constelacion{display:flex;flex-direction:column;margin-top:6px;
  border-top:1px solid var(--line)}
.liga-row{display:flex;align-items:baseline;gap:14px;width:100%;text-align:left;
  background:transparent;border:none;border-bottom:1px solid var(--line);
  padding:14px 4px;min-height:56px;cursor:pointer;color:inherit;font:inherit;
  transition:background .16s var(--ease)}
.liga-row:hover{background:var(--card)}
.liga-row:focus-visible{outline:2px solid var(--txt);outline-offset:-2px}
.lr-nom{font-weight:700;font-size:15px;font-stretch:92%;flex:0 0 auto;min-width:9.5em}
.lr-anios{color:var(--dim);font-size:12px;font-weight:600;flex:0 0 auto}
.lr-n{color:var(--mut);font-size:13px;margin-left:auto;flex:0 0 auto;
  font-variant-numeric:tabular-nums}
.lr-n b{color:var(--txt);font-weight:700}
.lr-n + .lr-n{margin-left:0;min-width:8.5em;text-align:right}
/* En mobile no entran en una linea sin que un nombre largo ("Liga Nuñez FEM")
   empuje las cifras y rompa la alineacion de toda la lista. Van en dos lineas
   con una grilla, asi las columnas de numeros quedan alineadas entre filas, que
   es lo unico que importa para poder compararlas de un vistazo. */
@media(max-width:760px){
  .liga-row{display:grid;grid-template-columns:1fr auto;gap:3px 10px;
    align-items:baseline;padding:12px 4px}
  .lr-nom{min-width:0;grid-column:1}
  .lr-anios{grid-column:2;text-align:right}
  .lr-n{margin-left:0;font-size:12.5px;grid-column:1;justify-self:start}
  .lr-n + .lr-n{grid-column:2;min-width:0;text-align:right;justify-self:end}
}

/* ---------- Grilla de figuritas chicas ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:20px}
.pcard{display:flex;align-items:center;gap:13px;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:11px 14px;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .28s var(--ease),border-color .2s,background .2s,box-shadow .28s var(--ease)}
.pcard::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--metal,var(--line2));transition:width .28s var(--ease)}
/* Mismo código de metales que la figurita y el ranking */
.pcard.r0{--metal:transparent} .pcard.r1{--metal:var(--bronce)} .pcard.r2{--metal:var(--plata)}
.pcard.r3{--metal:var(--oro)}
.pcard.r4{--metal:var(--oro)}
.pcard.r4::before{background:linear-gradient(180deg,#e9b545,#fff2cd,#ccd3d6,#e9b545)}
.pcard:hover{border-color:var(--line2);transform:translateY(-2px);box-shadow:var(--shadow);background:var(--card2)}
.pcard:hover::before{width:4px}
.pcard .meta{min-width:0;flex:1}
.pcard .nom{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-stretch:88%}
.pcard .sub{color:var(--mut);font-size:12px;margin-top:1px}
.pcard .big{text-align:center;flex:0 0 auto}
.pcard .big b{font-size:22px;color:var(--gold);font-weight:800;line-height:1;font-stretch:78%}
.pcard .big span{display:block;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}

/* ---------- Avatars & crests ---------- */
/* Sin foto, el avatar es un recuadro de tinta con las iniciales en el
   metal del jugador. Antes eran todos verdes: en una lista de 100
   filas eso era una pared de verde que no decía nada. */
.avatar{width:44px;height:44px;border-radius:9px;flex:0 0 auto;object-fit:cover;
  display:flex;align-items:center;justify-content:center;font-weight:800;
  color:color-mix(in srgb,var(--metal,#6e675e) 85%,var(--txt));
  background:linear-gradient(165deg,var(--card2),var(--bg2));font-size:14px;font-stretch:78%;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--metal,#39352f) 34%,var(--line2))}
.avatar.lg{width:104px;height:104px;font-size:34px;border-radius:14px}
.crest{width:38px;height:38px;flex:0 0 auto;object-fit:contain;
  filter:drop-shadow(0 3px 6px #0007);background:#ffffff08;border-radius:8px;padding:3px}
.crest.lg{width:84px;height:84px}
.crest.ph{display:flex;align-items:center;justify-content:center;font-weight:800;color:var(--mut);
  background:var(--card2);font-size:14px;font-stretch:80%}

/* ---------- Ficha (player / team) ---------- */
#ficha,#team-ficha{margin-top:26px}
.perfil{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;margin-bottom:14px;box-shadow:var(--shadow)}

/* ============================================================
   LA FIGURITA
   ------------------------------------------------------------
   El jugador es una carta, y la rareza sale del palmarés, que ya
   calculamos ponderando división y formato. Los cortes:
     común 0 · bronce 1-9 · plata 10-29 · oro 30-59 · leyenda 60+
   No es decorativo: es la forma más rápida de ver, sin leer un
   número, si el tipo ganó cosas.
   ============================================================ */
.fig-wrap{display:grid;grid-template-columns:296px 1fr;gap:26px;align-items:start}
/* `width:100%` no es decorativo: todos los hijos son absolutos, así que
   sin ancho explícito la carta mide 0 apenas algo la haga shrink-to-fit
   (por ejemplo el `margin:0 auto` del breakpoint de celular). */
.fig{position:relative;width:100%;aspect-ratio:63/88;border-radius:16px;overflow:hidden;
  background:var(--card2);isolation:isolate;box-shadow:var(--shadow-fig);
  transform-style:preserve-3d;transition:transform .5s var(--ease);will-change:transform}
/* El marco: 2 capas, un borde de metal y un filete interior claro,
   que es lo que hace que se lea como carta impresa y no como div. */
.fig::before{content:"";position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:16px;
  border:2px solid var(--metal,#3a3630);
  box-shadow:inset 0 0 0 1px #00000060, inset 0 0 0 3.5px color-mix(in srgb,var(--metal,#3a3630) 28%,transparent)}
/* El brillo: una banda diagonal que sigue al puntero. Es lo que
   hace que la carta parezca laminada. */
.fig::after{content:"";position:absolute;inset:-40%;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(105deg,transparent 38%,#ffffff26 47%,#ffffffd0 50%,#ffffff26 53%,transparent 62%);
  transform:translateX(calc(var(--mx,.5) * 90% - 45%));
  transition:opacity .35s var(--ease);mix-blend-mode:overlay}
.fig:hover::after,.fig:focus-visible::after{opacity:.55}

.fig-foto{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top center}
/* Sin foto, la carta no puede quedar vacía: van las iniciales grandes
   sobre la trama diagonal del cartón. La mayoría de los 108.708
   jugadores no tiene foto, así que este es el caso normal, no el raro. */
.fig-ph{position:absolute;inset:0;z-index:1;display:flex;align-items:center;justify-content:center;
  font-size:112px;font-weight:800;font-stretch:68%;letter-spacing:-.04em;
  color:transparent;-webkit-text-stroke:2px color-mix(in srgb,var(--metal,#4a453d) 55%,transparent);
  background:
    repeating-linear-gradient(48deg,#ffffff07 0 2px,transparent 2px 9px),
    radial-gradient(130% 85% at 50% 8%,color-mix(in srgb,var(--metal,#4a453d) 13%,var(--card2)),#0c0b0a 72%)}
/* Degradé de abajo para que el nombre se lea sobre cualquier foto */
.fig-shade{position:absolute;inset:0;z-index:2;
  background:linear-gradient(180deg,transparent 34%,#0a0908cc 66%,#080706f5 100%)}

.fig-top{position:absolute;top:0;left:0;right:0;z-index:5;display:flex;align-items:flex-start;
  justify-content:space-between;padding:13px 14px;gap:8px}
/* El tier solo no explica nada. Abajo va el motivo ("279 goles"), que es
   lo que hace que la carta se condiga con el perfil de al lado. */
.fig-rar{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--metal,#8a8378);background:#0a09088c;backdrop-filter:blur(6px);
  border:1px solid color-mix(in srgb,var(--metal,#3a3630) 45%,transparent);
  padding:4px 8px;border-radius:5px;white-space:nowrap;line-height:1.15}
.fig-rar i{display:block;font-style:normal;font-weight:600;font-size:11px;
  letter-spacing:.04em;text-transform:none;color:#ffffff9c;margin-top:2px}
/* El escudo va en un disco claro con aro de metal, que es como lo
   resuelve una figurita de verdad. No es decoración: la mitad de los
   escudos de la fuente son PNG con fondo blanco, y sobre la carta
   oscura quedaban como un cuadrado blanco pegado. Dentro del disco,
   los de fondo blanco y los transparentes se ven igual. */
.fig-crest{width:38px;height:38px;object-fit:contain;padding:4px;border-radius:50%;
  background:#efeae0;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--metal,#3a3630) 75%,transparent),0 4px 12px -4px #000c}

.fig-body{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:0 16px 15px}
.fig-nom{font-size:13px;font-weight:600;color:#ffffffa8;letter-spacing:.1em;text-transform:uppercase;
  font-stretch:80%;line-height:1}
.fig-ape{font-size:clamp(24px,3.1vw,34px);font-weight:800;font-stretch:70%;line-height:.98;
  letter-spacing:-.01em;text-transform:uppercase;margin-top:3px;
  text-shadow:0 2px 14px #000c}
.fig-linea{height:2px;border-radius:2px;margin:11px 0 10px;
  background:linear-gradient(90deg,var(--metal,#3a3630),transparent)}
.fig-cifras{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.fig-cifras div{text-align:center}
.fig-cifras b{display:block;font-size:19px;font-weight:800;font-stretch:74%;line-height:1}
.fig-cifras span{display:block;font-size:11px;color:#ffffff70;text-transform:uppercase;
  letter-spacing:.1em;margin-top:3px}

/* --- Los cinco metales --- */
.fig.r0{--metal:#4a453d}
.fig.r1{--metal:var(--bronce)}
.fig.r2{--metal:var(--plata)}
.fig.r3{--metal:var(--oro)}
.fig.r4{--metal:var(--oro)}
.fig.r3 .fig-ape,.fig.r4 .fig-ape{color:#fff4d8}
/* Leyenda: el marco es holográfico y gira despacio. Se lo ganó. */
.fig.r4{background:var(--card2)}
/* La paleta es dorada, no arcoíris: un holograma de figurita cara, no
   un teclado gamer. El verde entra una sola vez porque es la marca. */
.fig.r4::before{border-color:transparent;
  background:conic-gradient(from var(--holo,0deg),
    #e9b545,#fff2cd,#e9b545,#cfd6d3,#b9c0c3,#e9b545) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  animation:holo 7s linear infinite}
@keyframes holo{to{--holo:360deg}}
@property --holo{syntax:"<angle>";initial-value:0deg;inherits:false}

/* Al lado de la figurita: los datos, en tono callado */
.fig-datos{min-width:0}
/* El palmarés vive en la columna de la derecha, al lado de la carta:
   antes arrancaba debajo de la figurita y dejaba media pantalla
   vacía en escritorio. */
.fig-datos .perfil{margin-top:14px;margin-bottom:0;padding:18px}
.fig-datos .dni{color:var(--dim);font-size:12.5px;letter-spacing:.04em}
.fig-datos h2{font-size:clamp(24px,3vw,32px);font-weight:800;font-stretch:80%;line-height:1.05;
  letter-spacing:-.02em}
.fig-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}
.gtag{font-size:11px;padding:3px 9px;border-radius:6px;background:#ffffff0a;color:var(--mut);
  border:1px solid var(--line2);white-space:nowrap}

/* La ficha de equipo sigue usando la cabecera vieja: mismo lenguaje,
   sin figurita (un club no es una persona). */
.hero-card{background:linear-gradient(160deg,var(--card2),var(--card));border-color:var(--line2)}
.perfil-top{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.perfil-top h2{font-size:26px;font-weight:800;font-stretch:82%}
.perfil-top .dni{color:var(--mut);font-size:13px;margin-top:3px}
.perfil-top .tag{display:inline-flex;gap:6px;margin-top:8px;flex-wrap:wrap}

.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:8px;margin-top:18px}
.stat{background:var(--bg2);border:1px solid var(--line);border-radius:11px;padding:13px 10px;text-align:center}
.stat b{font-size:25px;display:block;font-weight:800;line-height:1.05;font-stretch:74%}
.stat span{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.09em;margin-top:4px;display:block}
/* Los goles NO van en oro: el oro es logro, y hacer un gol no es ganar algo.
   Las tarjetas si van en su color, que es literalmente el color de la tarjeta. */
.stat.g b{color:var(--txt)} .stat.f b{color:var(--txt)}
.stat.a b{color:var(--amarilla)} .stat.r b{color:var(--roja)}
.stat.t b{color:var(--oro)} .stat.p b{color:var(--txt)}
/* los títulos son lo que más se mira: que resalten sobre el resto */
.stat.t{background:linear-gradient(180deg,#e9b5451f,var(--bg2));border-color:#e9b54540}

/* goals chart */
.chart{margin-top:8px}
.chart .bars{display:flex;align-items:flex-end;gap:10px;height:150px;padding:6px 2px 0}
.chart .col{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0;cursor:default}
.chart .bar{width:100%;max-width:44px;border-radius:7px 7px 3px 3px;transition:height .5s cubic-bezier(.2,.8,.2,1);
  position:relative;min-height:4px}
.chart .bar.asc{background:var(--dato-mas)}
.chart .bar.desc{background:linear-gradient(180deg,#ff6b6b,#c0392b)}
.chart .bar.promo{background:linear-gradient(180deg,#ffab40,#e07b00)}
.chart .bar.norm{background:linear-gradient(180deg,#5bc0ff,#2f80c0)}
.chart .bval{font-size:12px;font-weight:800;color:var(--txt)}
.chart .blabel{font-size:11px;color:var(--dim);text-align:center;line-height:1.15;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;transform:rotate(0)}
.legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:14px;font-size:11px;color:var(--mut)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px;vertical-align:middle}

/* tables */
.tw{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
.tw table{min-width:max-content}
table{width:100%;border-collapse:collapse;margin-top:4px;font-size:14px}
th,td{padding:10px 12px;text-align:left;border-bottom:1px solid var(--line)}
th{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.05em;font-weight:700}
tbody tr{transition:.12s}
tbody tr:hover{background:#ffffff06}
td.num,th.num{text-align:center}
tbody tr:last-child td{border-bottom:none}
.sec-title{font-size:12px;color:var(--dim);text-transform:uppercase;letter-spacing:.08em;margin:0 0 10px;font-weight:700}

/* La liga se identifica por su nombre, no por un color. Ver la nota en app.js:
   doce tonos sin jerarquia entre si que ademas competian con el oro. */
.liga-badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:11px;
  font-weight:700;letter-spacing:.03em;color:var(--mut);background:transparent;
  border:1px solid var(--line2);white-space:nowrap}
.badge{display:inline-block;padding:2px 10px;border-radius:20px;font-size:11px;font-weight:800;letter-spacing:.02em}
.badge.asc{background:#4ecb8622;color:var(--dato-mas)}
.badge.desc{background:#e8736e22;color:var(--dato-menos)}
.badge.promo{background:#d08a4a22;color:var(--bronce)}
.badge.norm{background:#ffffff0d;color:var(--mut)}
/* La división de un título usa la misma escala de metales que la
   rareza: A oro, B plata, C bronce. Antes usaba el verde/naranja de
   ascenso y promoción, que en el gráfico de al lado significan otra
   cosa. */
.badge.div1{background:#e9b5451f;color:var(--oro);box-shadow:inset 0 0 0 1px #e9b54540}
.badge.div2{background:#ccd3d61a;color:var(--plata);box-shadow:inset 0 0 0 1px #ccd3d636}
.badge.div3{background:#c2793c1f;color:var(--bronce);box-shadow:inset 0 0 0 1px #c2793c40}
.badge.div0,.badge.div4{background:#ffffff0d;color:var(--mut)}
.tipo-pill{color:var(--dim);font-size:12px}
.tor-nom{font-weight:600}
.tor-sub{color:var(--dim);font-size:11.5px;margin-top:1px}
.lv{color:var(--dim);font-weight:600;font-size:11px;margin-right:4px;vertical-align:1px}

/* palmarés */
.pal-list{display:flex;flex-direction:column;gap:8px}
.pal-item{display:flex;align-items:center;gap:12px;background:var(--bg2);border:1px solid var(--line);
  border-radius:11px;padding:11px 14px;font-size:14px}
.pal-ic{flex:0 0 auto;display:grid;place-items:center;width:24px;height:24px}
.pal-item b{font-weight:700}
.pal-cuenta{text-transform:none;letter-spacing:0;color:var(--mut);font-weight:400}
.pal-cuenta b{color:var(--txt);font-weight:800}
/* El puntaje va chico y al costado: sirve para ordenar un ranking, no es
   una cantidad de nada. Ponerlo como titular hacia que "3,80 palmares"
   pareciera un dato que se puede contar. */
.pal-pts{float:right;color:var(--dim);font-weight:700;letter-spacing:.02em}
.pal-item.sub{opacity:.85}
.pal-yr{color:var(--dim);font-size:12px}

/* podio por género */
.podios{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:26px}
.podios.solo{grid-template-columns:1fr}
.podio{background:linear-gradient(180deg,#151b18,#10141200);border:1px solid var(--line);border-radius:var(--r);
  padding:18px 16px 0;box-shadow:var(--shadow)}
.podio h3{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--mut);text-align:center;margin-bottom:16px}
.podio h3 b{color:var(--txt)}
.podio-row{display:flex;align-items:flex-end;justify-content:center;gap:8px}
.pilar{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;cursor:pointer;min-width:0;
  transition:.16s}
.pilar:hover{transform:translateY(-4px)}
.pilar .pa{position:relative}
.pilar .crown{position:absolute;top:-16px;left:50%;transform:translateX(-50%);font-size:18px}
.pilar .avatar{border-width:3px}
.pilar.p1 .avatar{width:74px;height:74px;box-shadow:0 0 0 3px var(--gold),0 8px 22px -8px var(--gold)}
.pilar.p2 .avatar{width:58px;height:58px;box-shadow:0 0 0 3px #cfd6d3}
.pilar.p3 .avatar{width:58px;height:58px;box-shadow:0 0 0 3px #d08b52}
.pilar .pn{font-size:12px;font-weight:700;text-align:center;line-height:1.2;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pilar .pv{font-size:20px;font-weight:900;color:var(--gold);line-height:1}
.pilar .pv small{font-size:11px;color:var(--dim);font-weight:600;display:block;text-transform:uppercase;letter-spacing:.06em}
.trofeos{display:flex;gap:3px;flex-wrap:wrap;justify-content:center;min-height:16px}
.trofeo{display:inline-flex;align-items:center;gap:2px;line-height:1}
.trofeo b{font-size:11px;font-weight:700}
.base{width:100%;margin-top:4px;border-radius:8px 8px 0 0;display:flex;align-items:flex-start;justify-content:center;
  padding-top:7px;font-weight:900;font-size:16px;color:#04120a}
.pilar.p1 .base{height:56px;background:linear-gradient(180deg,var(--gold),#c99a1e)}
.pilar.p2 .base{height:40px;background:linear-gradient(180deg,#cfd6d3,#9aa4a0)}
.pilar.p3 .base{height:30px;background:linear-gradient(180deg,#d08b52,#a56636)}

/* rankings */
.rank-list{display:flex;flex-direction:column;gap:7px}
.rank-row{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:12px;padding:10px 15px;cursor:pointer;position:relative;overflow:hidden;
  transition:transform .25s var(--ease),border-color .2s,background .2s}
/* Mismo código de metales que la figurita: r0 común … r4 leyenda */
.rank-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--metal,transparent)}
.rank-row.r0::before{background:transparent}
.rank-row.r1{--metal:var(--bronce)} .rank-row.r2{--metal:var(--plata)}
.rank-row.r3{--metal:var(--oro)} .rank-row.r4{--metal:var(--oro)}
.rank-row.r4 .avatar{box-shadow:inset 0 0 0 1px var(--oro)}
.rank-row.r4::before{background:linear-gradient(180deg,#e9b545,#fff2cd,#ccd3d6,#e9b545)}
.rank-row:hover{transform:translateX(3px);border-color:var(--line2);background:var(--card2)}
.rank-pos{width:30px;text-align:center;font-weight:800;color:var(--dim);font-size:15px;flex:0 0 auto}
.rank-row.top .rank-pos{font-size:20px}

/* el nombre trunca; los trofeos quedan fuera del truncado para no perderse */
.rank-name{flex:1;min-width:0;font-weight:600}
.rn-top{display:flex;align-items:center;gap:5px;min-width:0}
.rn-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rn-tr{flex:0 0 auto;display:flex;gap:2px}
.rank-sub{color:var(--dim);font-size:12px;font-weight:400}
.rank-bar{flex:0 0 130px;height:8px;background:#ffffff0d;border-radius:5px;overflow:hidden}
.rank-bar i{display:block;height:100%;background:var(--line2);border-radius:5px}
.rank-val{flex:0 0 auto;text-align:right;min-width:52px;font-weight:800;color:var(--gold);font-size:18px}

/* clásicos */
.clasicos{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px;margin-top:8px}
.clasico{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;
  cursor:pointer;transition:.16s;position:relative}
.clasico:hover{border-color:var(--line2);transform:translateY(-3px);box-shadow:var(--shadow);background:var(--card2)}
.cl-rank{color:var(--dim);font-weight:800;font-size:13px}
.cl-teams{display:flex;align-items:center;gap:10px}
.cl-side{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;min-width:0}
.cl-side span{font-size:12px;font-weight:600;text-align:center;line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.cl-mid{text-align:center;flex:0 0 auto;padding:0 4px}
.cl-mid b{font-size:26px;font-weight:900;color:var(--txt);line-height:1;display:block}
.cl-mid small{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.cl-record{text-align:center;margin-top:12px;color:var(--mut);font-size:13px;font-weight:700}
.cl-record .w{color:var(--txt)}
.cl-record .cl-g{display:block;color:var(--dim);font-size:11px;font-weight:400;margin-top:2px}
.cl-bar{height:6px;border-radius:4px;overflow:hidden;display:flex;margin-top:8px;border:1px solid var(--line)}
.cl-bar .a{background:var(--txt)} .cl-bar .e{background:var(--inerte)} .cl-bar .b{background:var(--dim)}

/* El índice de rivalidad va como número suelto, no en una pastilla
   verde: es un dato de la tarjeta, no una etiqueta. */
/* El score y el puesto van en una fila propia arriba de la tarjeta. Estaban
   los dos en position:absolute y al agregarle el rotulo "rivalidad" al numero
   se montaba sobre el escudo del equipo de la izquierda. */
.cl-head{display:flex;align-items:baseline;justify-content:space-between;
  gap:10px;margin-bottom:10px}
.cl-score{display:flex;align-items:baseline;gap:6px;color:var(--txt);font-weight:800;
  font-size:15px;font-stretch:76%;letter-spacing:-.01em}

/* comparar */
.cmp-pick{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:16px;max-width:760px;margin:0 auto 8px}
.cmp-pick .vs{font-weight:900;color:var(--dim);font-size:18px;padding-top:12px}
.cmp-slot{position:relative}
.cmp-slot input{width:100%;background:var(--card);border:1px solid var(--line2);border-radius:12px;
  padding:13px 15px;color:var(--txt);outline:none}
.cmp-slot input:focus{border-color:var(--txt)}
.cmp-res{position:absolute;top:52px;left:0;right:0;z-index:10;background:var(--card2);border:1px solid var(--line2);
  border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.cmp-opt{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer}
.cmp-opt:hover{background:#ffffff08}
.cmp-opt .avatar{width:34px;height:34px;font-size:12px}
.cmp-opt span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.cmp-opt b{color:var(--gold)}
.cmp-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;margin-bottom:14px}
.cmp-p{text-align:center;cursor:pointer}
.cmp-ovr{font-size:40px;font-weight:900;line-height:1;margin-top:8px}
.cmp-nm{font-weight:700;font-size:14px;margin-top:2px}
.radar-wrap{display:flex;flex-direction:column;align-items:center}
.radar{width:100%;max-width:340px;height:auto;overflow:visible}
.radar-leg{display:flex;gap:18px;font-size:12px;color:var(--mut);font-weight:600;margin-top:2px}
.radar-leg i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:6px;vertical-align:middle}
.cmp-table{max-width:520px;margin:6px auto 0}
.cmp-table td{padding:9px 14px;border-bottom:1px solid var(--line)}
.cmp-table .cmp-lbl{text-align:center;color:var(--mut);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
.cmp-table .cw{color:var(--gold);font-weight:800}
.cmp-table td.num{font-weight:700;font-size:16px}

/* h2h */
.riv-banner{display:flex;align-items:center;justify-content:center;gap:24px;background:
    linear-gradient(135deg,#1a231e,#14181666);border:1px solid var(--line2);border-radius:var(--r);
  padding:16px 22px;margin-bottom:14px;flex-wrap:wrap}
.riv-score{text-align:center;font-size:44px;font-weight:800;font-stretch:74%;color:var(--txt);line-height:1}
.riv-score small{display:block;font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.1em;
  font-stretch:100%;font-weight:600;margin-top:4px}
.riv-brk{display:flex;gap:20px;flex-wrap:wrap;color:var(--mut);font-size:13px}
.riv-brk b{color:var(--txt);font-weight:800}
.h2h-pick{display:grid;grid-template-columns:1fr auto 1fr;align-items:start;gap:16px;margin-bottom:22px;
  position:relative;z-index:5}   /* el desplegable tiene que tapar lo de abajo */
.h2h-pick .vs{padding-top:12px}
.h2h-pick .vs{font-weight:900;color:var(--dim);font-size:18px}
.h2h-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;
  background:var(--card);border:1px solid var(--line2);border-radius:var(--r);padding:26px;margin-bottom:16px;box-shadow:var(--shadow)}
.h2h-score .side{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.h2h-score .side h3{font-size:16px}
.h2h-score .num{font-size:46px;font-weight:900;line-height:1}
.h2h-score .win{color:var(--txt)} .h2h-score .mid{color:var(--mut);font-size:12px}
.h2h-bar{height:10px;border-radius:6px;overflow:hidden;display:flex;margin:16px 0 4px;border:1px solid var(--line)}
.h2h-bar .a{background:var(--txt)} .h2h-bar .e{background:var(--inerte)} .h2h-bar .b{background:var(--dim)}

.volver{background:var(--card);border:1px solid var(--line2);color:var(--txt);cursor:pointer;
  padding:9px 16px;border-radius:10px;font-weight:600;margin-bottom:16px;transition:.15s;min-height:44px}
.volver:hover{background:var(--card2);border-color:var(--line2);color:var(--txt)}

.loading{color:var(--mut);padding:26px 0;text-align:center}
.loading::after{content:"";display:inline-block;width:16px;height:16px;margin-left:8px;border:2px solid var(--line2);
  border-top-color:var(--txt);border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle}
@keyframes spin{to{transform:rotate(360deg)}}
/* Un estado vacio dice tres cosas: que paso, que hacer, y la salida honesta.
   Los de antes decian "Sin resultados" y nada mas, que suena a producto roto
   cuando en realidad lo mas probable es que la liga de esa persona no este:
   son 11 de los 351 organizadores relevados. */
.empty{padding:40px 20px;text-align:center;max-width:44ch;margin:0 auto}
.empty b{display:block;font-size:16px;font-weight:700;color:var(--txt);margin-bottom:8px;
  font-stretch:92%}
.empty span{display:block;color:var(--mut);font-size:14px;line-height:1.55}

/* ---------- Esqueletos de carga ----------
   Reemplazan al texto centrado sobre pantalla negra. La ficha tarda 3,5 s en
   resolver y ese es justo el momento en que llega alguien por un link del
   grupo: lo que ve en ese rato decide si se queda. El esqueleto ademas reserva
   el alto real, asi el layout no salta cuando entran los datos. */
.skel{display:flex;gap:18px;padding:18px 0}
.skel.col{flex-direction:column;gap:10px}
.sk-fig{width:132px;aspect-ratio:63/88;border-radius:var(--r-lg);flex:0 0 auto}
.sk-col{flex:1;display:flex;flex-direction:column;gap:10px}
.sk-row{display:flex;gap:8px;margin-top:6px}
.sk-box{flex:1;height:64px;border-radius:var(--r)}
.sk-l{height:16px;border-radius:8px}
.sk-fig,.sk-box,.sk-l{
  background:linear-gradient(100deg,var(--card) 30%,var(--card2) 50%,var(--card) 70%);
  background-size:220% 100%;animation:sk 1.4s var(--ease) infinite}
@keyframes sk{to{background-position:-120% 0}}
@media(prefers-reduced-motion:reduce){
  .sk-fig,.sk-box,.sk-l{animation:none;background:var(--card)}
}
@media(max-width:760px){
  .skel{flex-direction:column;align-items:center}
  .sk-fig{width:180px}
  .sk-col{width:100%}
}

/* ---------- Clasicos: cada numero con su rotulo ----------
   Antes decia "4 · 1 · 4" sin aclarar de quien era cada uno, y abajo
   "4.7/pp · friccion 2.99", que son los nombres internos del calculo. */
.cl-score small{font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--dim)}
.cl-record{display:flex;flex-direction:column;gap:3px;font-size:13px;color:var(--mut)}
.cl-record b{color:var(--txt);font-weight:700;min-width:1.4em;display:inline-block}

/* ============================================================
   MOBILE  ·  el usuario está en la cancha, con el teléfono
   Breakpoint único a 760px: por debajo de eso los 7 tabs ya no
   entran en una fila y todos los grids de 2-3 columnas se rompen.
   ============================================================ */
/* El fundido entre pestañas lo hace el navegador (View Transitions).
   Corto y sin desplazamiento: es un cambio de página del álbum, no
   una diapositiva. */
::view-transition-old(root){animation:vt-out .16s var(--ease) both}
::view-transition-new(root){animation:vt-in .28s var(--ease) both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0;transform:translateY(6px)}}

@media(max-width:760px){
  /* La figurita pasa arriba y a lo ancho, con el tope justo para que
     entre entera sin scrollear. */
  .fig-wrap{grid-template-columns:1fr;gap:18px}
  .fig{max-width:270px;margin:0 auto}
  .fig-datos h2{text-align:center}
  .fig-datos .dni{text-align:center}
  .fig-tags{justify-content:center}

  /* --- Header: la fila de tabs pasa a carrusel horizontal.
         Sin esto el nav fuerza el documento a 672px y TODA la
         página scrollea de costado. --- */
  header{gap:10px;padding:10px 14px}
  .resumen{display:none}
  .brand{gap:10px;min-height:44px}
  .brand h1{font-size:16px;letter-spacing:.14em}
  .brand p{font-size:11px}
  nav#tabs{flex:1 0 100%;order:2;margin:0 -14px;padding:2px 14px;
    scroll-snap-type:x proximity;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent)}
  nav#tabs button{padding:9px 14px;font-size:14px;scroll-snap-align:start}

  main{padding:18px 14px 70px}
  .hero{padding:22px 0 16px}
  .hero h2{font-size:22px}
  .hero p{font-size:14px;margin-bottom:16px}
  .perfil{padding:16px 14px}
  .perfil-top h2{font-size:20px}
  .perfil-top{gap:14px}
  .avatar.lg{width:76px;height:76px;font-size:26px;border-width:2px}

  /* --- Grids de tarjetas: una columna. minmax(240..320px) desborda
         en pantallas de 320-360px. --- */
  .cards,.constelacion,.clasicos{grid-template-columns:1fr}

  /* --- Filtros: 6 selects apilados comían media pantalla antes de
         ver un solo dato. 2 columnas = 3 filas.
         font-size 16px es obligatorio: por debajo, iOS hace zoom
         automático al tocar el campo y descoloca el layout. --- */
  .filtros{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
  .filtros select,.h2h-pick select,.cmp-slot input{font-size:16px;min-height:44px}
  .filtros select{min-width:0;width:100%;padding:11px 10px}

  /* --- Tablas: scroll horizontal propio, nunca del body --- */
  .tw{margin:0 -14px;padding:0 14px}
  table{font-size:13px}
  th,td{padding:9px 10px}

  /* --- Stats en grilla pareja de 3 --- */
  .stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:16px}
  .stat{min-width:0;padding:11px 4px}
  .stat b{font-size:20px}

  /* --- Gráfico de goles: con 15+ torneos las barras quedaban en
         astillas de 4px. Ancho fijo por barra + scroll. --- */
  .chart .bars{gap:6px;overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .chart .col{flex:0 0 42px}
  .legend{gap:10px;font-size:11px}

  /* --- Podios: uno arriba del otro. En 2 columnas cada pilar
         quedaba en 50px de ancho. --- */
  .podios{grid-template-columns:1fr;gap:12px}
  .pilar.p1 .avatar{width:64px;height:64px}
  .pilar.p2 .avatar,.pilar.p3 .avatar{width:52px;height:52px}

  /* --- Rankings --- */
  .rank-bar{display:none}
  .rank-row{gap:10px;padding:9px 12px}
  .rank-val{font-size:16px;min-width:44px}
  .rank-name{font-size:14px}

  /* --- Comparador: de 3 columnas (cabeza | radar | cabeza) a
         las dos cabezas arriba y el radar a todo el ancho abajo.
         Antes el radar quedaba en ~100px con labels de 5px. --- */
  .cmp-pick{grid-template-columns:1fr;gap:8px;margin-bottom:4px}
  .cmp-pick .vs{padding-top:0;text-align:center;font-size:14px}
  .cmp-head{grid-template-columns:1fr 1fr;grid-template-areas:"a b" "r r";gap:12px}
  .cmp-head .cmp-p:first-child{grid-area:a}
  .cmp-head .radar-wrap{grid-area:r}
  .cmp-head .cmp-p:last-child{grid-area:b}
  .cmp-ovr{font-size:32px}
  .radar{max-width:100%}
  .cmp-table td{padding:9px 8px}

  /* --- Head to head --- */
  .h2h-pick{grid-template-columns:1fr;gap:8px}
  .h2h-pick .vs{text-align:center}
  .h2h-score{padding:18px 10px;gap:8px}
  .h2h-score .num{font-size:32px}
  .h2h-score .side h3{font-size:13px}
  .crest.lg{width:60px;height:60px}
  .riv-banner{gap:12px;padding:14px;justify-content:center}
  .riv-score{font-size:30px}
  .riv-brk{gap:14px;font-size:12px;justify-content:center}

  /* --- Clásicos --- */
  .cl-mid b{font-size:22px}
  .cl-record{font-size:12px}

  /* --- Tap targets: 44px es el mínimo de Apple HIG --- */
  .volver{padding:12px 16px}
  nav#tabs button,.cmp-opt{min-height:44px;display:flex;align-items:center}
  nav#tabs button{justify-content:center}
}


/* ============================================================
   LA LÁMINA · el plantel de un equipo en un torneo
   La grilla es de cromos chicos, no de figuritas grandes: una
   lámina son 20-50 jugadores y la gracia es verlos juntos, como
   la página de un álbum. El cromo repite el código de metales de
   la figurita grande, así una carta se lee igual en los dos
   tamaños.
   ============================================================ */
/* El header es sticky: sin esto el scrollIntoView deja el título de la
   lámina tapado debajo de la barra. */
#lamina{scroll-margin-top:96px}
@media(max-width:760px){#lamina{scroll-margin-top:130px}}
.lam-row{cursor:pointer}
.lam-row:hover{background:#ffffff0a}
.lamina{background:linear-gradient(170deg,var(--card2),var(--card))}
.lam-head{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:20px}
.lam-tit{flex:1;min-width:0}
.lam-tit h3{font-size:20px;font-weight:800;font-stretch:84%}
.lam-tor{font-size:15px;color:var(--txt);margin-top:2px;font-stretch:90%}
.lam-tor b{color:var(--gold);font-weight:800}
.lam-sub{color:var(--dim);font-size:11.5px;margin-top:2px}
/* "Faltan N" es el titular de la lamina: el hueco es el mensaje, y se tiene
   que leer en el telefono sin buscarlo. Antes era un numero chico a la
   derecha que decia cuantos HABIA, no cuantos faltaban. La barra va en gris:
   el oro es de los logros y el celeste del boton. */
.lam-faltan{display:flex;align-items:center;gap:14px 24px;flex-wrap:wrap;margin:0 0 18px;
  padding:14px 16px;background:var(--card);border:1px solid var(--line2);border-radius:var(--r)}
.lf-num{flex:1 1 200px;min-width:0}
.lf-num b{display:block;font-size:36px;font-weight:800;font-stretch:74%;line-height:1}
.lam-faltan.ok .lf-num b{color:var(--dato-mas)}
.lf-num span{display:block;font-size:12.5px;color:var(--mut);margin-top:6px}
.lf-barra{height:6px;border-radius:3px;background:var(--line);margin-top:10px;overflow:hidden}
.lf-barra i{display:block;height:100%;background:var(--mut);border-radius:3px}
.lf-acc{flex:1 1 280px;min-width:0}
.lf-acc p{margin:0 0 8px;font-size:13px;color:var(--mut);line-height:1.45}
/* Los inscriptos que no jugaron van aparte y mas apagados: estan en la
   lista de buena fe, pero no son el equipo que jugo ese torneo. */
.lam-corte{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.08em;
  font-weight:700;margin:22px 0 10px;display:flex;align-items:center;gap:10px}
.lam-corte::after{content:"";flex:1;height:1px;background:var(--line)}
.lam-corte b{color:var(--mut);font-weight:800}
.cromos.banca{opacity:.62}
.cromos.banca .cromo:hover{opacity:1}
.cr-pj{position:absolute;top:5px;left:5px;background:#0a0908d9;color:var(--mut);
  font-size:11px;font-weight:700;padding:1px 5px;border-radius:20px;letter-spacing:.03em}
.lam-pie{color:var(--dim);font-size:12px;margin:16px 0 0;line-height:1.5}

.cromos{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:10px}
.cromo{position:relative;border-radius:9px;overflow:hidden;cursor:pointer;background:var(--bg2);
  box-shadow:inset 0 0 0 1.5px var(--metal,#332f2a);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease)}
.cromo:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1.5px var(--metal,#4a453d),var(--shadow)}
.cromo.r0{--metal:#332f2a} .cromo.r1{--metal:var(--bronce)} .cromo.r2{--metal:var(--plata)}
.cromo.r3{--metal:var(--oro)} .cromo.r4{--metal:var(--oro)}
.cromo.r4{box-shadow:inset 0 0 0 1.5px var(--oro),0 0 14px -6px var(--oro)}
/* Sin foto el cromo se apaga: es el hueco del álbum, y se nota. */
.cromo.falta{opacity:.55;box-shadow:inset 0 0 0 1.5px #2a2724}
.cromo.falta:hover{opacity:.85}
.cr-foto{aspect-ratio:1/1;overflow:hidden;background:
  radial-gradient(120% 90% at 50% 0%,var(--card2),#0c0b0a)}
.cr-foto img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
.cr-ph{width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  font-size:30px;font-weight:800;font-stretch:70%;color:transparent;
  -webkit-text-stroke:1.5px color-mix(in srgb,var(--metal,#4a453d) 60%,transparent)}
.cr-pie{padding:6px 7px 7px;background:#0a0908}
.cr-pila{display:block;font-size:11px;color:var(--dim);text-transform:uppercase;
  letter-spacing:.08em;line-height:1}
.cr-ape{display:block;font-size:12px;font-weight:800;font-stretch:74%;text-transform:uppercase;
  line-height:1.1;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cr-gol{position:absolute;top:5px;right:5px;background:#0a0908d9;color:var(--gold);
  font-size:11px;font-weight:800;padding:1px 6px;border-radius:20px;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--metal,#4a453d) 50%,transparent)}

@media(max-width:760px){
  .cromos{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:8px}
  .lam-head{gap:12px}
  .lf-num b{font-size:32px}
}

/* ============================================================
   EL TITULAR DE LA FICHA
   ------------------------------------------------------------
   Una sola cifra grande, elegida por el server segun lo que ese
   jugador efectivamente tiene. Antes habia ocho cajas iguales y
   en el jugador mediano siete decian cero.

   La regla de jerarquia: si al entornar los ojos se ve mas de una
   cosa grande, esta mal.
   ============================================================ */
.titular{margin:22px 0 4px;padding:24px 0;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.tt-k{font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acento)}
.tt-v b{font-size:clamp(48px,11vw,64px);font-weight:800;font-stretch:74%;
  letter-spacing:-.03em;line-height:.95;display:block;margin:8px 0 2px}
.tt-u{font-size:15px;color:var(--mut)}
.tt-d{font-size:13px;color:var(--dim);margin-top:6px;max-width:44ch}

/* La cadena hasta el goleador historico. Es lo que hace global al producto: el
   94,4% de la plataforma llega, y el camino cruza ligas que ninguna liga sola
   podria unir. */
.cadena{margin-top:20px;position:relative}
.cd{display:flex;align-items:center;gap:11px;padding:6px 0;position:relative}
.cd:not(:last-child)::after{content:"";position:absolute;left:14px;top:35px;bottom:-6px;
  width:1px;background:var(--line2)}
.cd .c{width:29px;height:29px;flex:0 0 auto;border-radius:50%;background:var(--card2);
  border:1px solid var(--line2);display:grid;place-items:center;font-size:11px;
  font-weight:700;color:var(--dim);z-index:1}
.cd .c.on{border-color:var(--acento);color:var(--acento)}
.cd .c.fin{border-color:var(--gold);color:var(--gold)}
.cd b{font-size:13px;font-weight:600;display:block}
.cd i{font-size:11px;color:var(--dim);font-style:normal;display:block;margin-top:1px}

/* Los numeros completos, en una linea. Un cero aca es un dato; en una caja
   grande era un juicio. */
.resumen-num{color:var(--mut);font-size:13.5px;margin:14px 0 0}


/* ============================================================
   LAS MARCAS DE LOGRO
   ------------------------------------------------------------
   Reemplazan a los emojis. El significado de aquellos vivia en
   un `title=`, que en un telefono no existe nunca, y el dibujo
   lo elegia el sistema operativo, no la marca.

   Heredan el color con currentColor: la clase de metal la pone
   quien las usa, y el metal es el UNICO color que llevan.
   ============================================================ */
.mk{flex:0 0 auto;vertical-align:-.14em}
.oro{color:var(--gold)}
.plata{color:#ccd3d6}
.bronce{color:#d08a4a}

/* El puesto del podio: el numero en su metal. Antes era una medalla emoji, que
   ademas no se podia leer con lector de pantalla. */
.rank-pos.oro{color:var(--gold)}
.rank-pos.plata{color:#ccd3d6}
.rank-pos.bronce{color:#d08a4a}
td.num.oro{color:var(--gold);font-weight:800}
td.num.plata{color:#ccd3d6;font-weight:800}
td.num.bronce{color:#d08a4a;font-weight:800}

/* El texto que solo leen los lectores de pantalla. Las marcas son mudas para
   quien no las ve, asi que el significado va aca y no en un `title=`. */
/* Con `position:absolute` el span se posicionaba respecto de <main>, en la x
   del <td> DENTRO de una tabla scrolleada: a 375px la pagina del equipo media
   829px por un texto invisible. Los contenedores .tw son ahora el contexto. */
.tw{position:relative}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0}

/* ============================================================
   RANKINGS · el alcance
   ------------------------------------------------------------
   Antes habia seis desplegables apilados que ocupaban el primer
   viewport entero en 375 px: se veian seis filtros antes que un
   solo nombre. Arriba queda lo unico que define QUE ranking
   estas mirando, y el resto vive en un <details>.

   Arranca en "Todas las ligas" a proposito. La escala de las
   once ligas es el producto.
   ============================================================ */
.rk-head{padding:26px 0 4px}
.rk-head h2{font-size:clamp(26px,6vw,36px);font-weight:800;font-stretch:80%;
  letter-spacing:-.025em;line-height:1.05}
.rk-head h2 span{color:var(--txt);text-decoration:underline;
  text-decoration-thickness:3px;text-underline-offset:6px;text-decoration-color:var(--line2)}
.rk-head p{color:var(--mut);margin:6px 0 0;font-size:14px}

.rk-metric{display:flex;align-items:center;gap:10px;margin:18px 0 12px;flex-wrap:wrap}
.rk-metric label{font-size:11px;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--dim)}
.rk-metric select{background:var(--card);border:1px solid var(--line2);border-radius:11px;
  padding:11px 13px;color:var(--txt);min-height:44px;font-size:16px;cursor:pointer;outline:none;
  flex:1;min-width:200px;max-width:320px}
.rk-metric select:focus{border-color:var(--txt)}

/* Botones de verdad, no divs con onclick: asi andan con teclado y los anuncia
   un lector de pantalla. */
.alcance{display:flex;gap:6px;overflow-x:auto;padding:2px 0 10px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.alcance::-webkit-scrollbar{display:none}
.chip{background:transparent;border:1px solid var(--line2);color:var(--mut);
  border-radius:999px;padding:9px 14px;font:inherit;font-size:13px;font-weight:600;
  white-space:nowrap;cursor:pointer;min-height:44px;flex:0 0 auto;
  display:inline-flex;align-items:center;gap:7px;transition:.16s var(--ease)}
.chip:hover{border-color:var(--line2);color:var(--txt)}
.chip small{font-size:11px;font-weight:600;color:var(--dim)}
.chip.on{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}
.chip.on small{color:var(--bg);opacity:.66}
.chip:focus-visible{outline:2px solid var(--txt);outline-offset:2px}

.mas-filtros{margin:0 0 18px}
.mas-filtros summary{cursor:pointer;color:var(--mut);font-size:13px;font-weight:600;
  padding:10px 0;min-height:44px;display:flex;align-items:center;gap:6px;
  list-style:none;user-select:none}
.mas-filtros summary::-webkit-details-marker{display:none}
.mas-filtros summary::before{content:"+";font-weight:800;color:var(--dim)}
.mas-filtros[open] summary::before{content:"−"}
.mas-filtros summary:hover{color:var(--txt)}
.mas-filtros .filtros{margin-top:6px}

/* ============================================================
   COMPARTIR
   ------------------------------------------------------------
   Era el unico mecanismo de crecimiento del producto y no
   existia: cero botones en todo el front, cero Open Graph, y
   ruteo por hash, que hace imposible una vista previa.
   ============================================================ */
.barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.compartir{margin-left:auto;display:inline-flex;align-items:center;gap:7px;
  background:var(--txt);color:var(--bg);border:1px solid var(--txt);
  border-radius:var(--r);padding:10px 16px;min-height:44px;font:inherit;
  font-size:14px;font-weight:700;cursor:pointer;
  transition:opacity .16s var(--ease),background .16s var(--ease)}
.compartir:hover{opacity:.88}
.compartir:focus-visible{outline:2px solid var(--txt);outline-offset:2px}
/* El acuse de "link copiado" es el mismo boton cambiando de texto: una
   notificacion flotante para confirmar un click es ruido. */
.compartir.ok{background:transparent;color:var(--dato-mas);border-color:var(--dato-mas)}
.compartir.ok svg{display:none}

/* Bajar la figurita. Secundario respecto de compartir: la mayoria va a pasar el
   link, no a guardarse la imagen. Por eso es fantasma y compartir es solido. */
.bajar{display:inline-flex;align-items:center;gap:7px;margin-left:auto;
  background:transparent;color:var(--mut);border:1px solid var(--line2);
  border-radius:var(--r);padding:10px 14px;min-height:44px;font:inherit;
  font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:color .16s var(--ease),border-color .16s var(--ease)}
.bajar:hover{color:var(--txt);border-color:var(--txt)}
.bajar:focus-visible{outline:2px solid var(--txt);outline-offset:2px}
/* Con los dos botones, el que empuja a la derecha es el primero. */
.bajar + .compartir{margin-left:0}
/* En mobile los tres a ancho completo eran tres bloques enormes arriba de la
   ficha. El volver ocupa su renglon y las dos acciones comparten el siguiente:
   son pares entre si y secundarias respecto de la ficha. */
@media(max-width:560px){
  .barra{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .barra .volver{grid-column:1 / -1}
  .bajar,.compartir{margin-left:0;justify-content:center;padding:10px 8px}
}

/* ============================================================
   RECLAMAR LA FICHA
   ------------------------------------------------------------
   La conversion mas importante del producto. "Reclamar" y no
   "crear cuenta": la carrera ya existia y ya era suya.
   ============================================================ */
.reclamo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;margin:18px 0 4px}
.reclamo b{display:block;font-size:15px;font-weight:700}
.reclamo span{display:block;color:var(--mut);font-size:13px;margin-top:4px;
  line-height:1.5;max-width:52ch}
.reclamo .btn-primario{margin-left:auto}
/* Ya reclamada por su jugador: es un dato, no una llamada a la accion. */
.reclamo.tenue{background:transparent;border-style:dashed;padding:12px 16px}
.reclamo.tenue b{font-weight:600;color:var(--mut);font-size:13.5px;
  display:flex;align-items:center;gap:7px}
.reclamo.propia b{display:flex;align-items:center;gap:8px;color:var(--dato-mas)}
/* En disputa: ni verde ni rojo. No hay culpables, hay dos carreras mezcladas. */
.reclamo.aviso{border-color:var(--line2);background:var(--card2)}

.btn-primario{display:inline-flex;align-items:center;justify-content:center;
  background:var(--acento);color:var(--sobre-acento);border:1px solid var(--acento);
  border-radius:var(--r-chico);padding:11px 18px;min-height:44px;font:inherit;
  font-size:14px;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:opacity .16s var(--ease)}
.btn-primario:hover{opacity:.88}
.btn-primario:disabled{opacity:.5;cursor:default}
.btn-primario:focus-visible{outline:2px solid var(--txt);outline-offset:2px}

.reclamo-form{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-top:14px}
.reclamo-form label{display:flex;flex-direction:column;gap:6px;font-size:11px;
  font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.reclamo-form input{background:var(--bg);border:1px solid var(--line2);
  border-radius:var(--r-chico);padding:11px 13px;color:var(--txt);font:inherit;
  /* 16 px: por debajo, iOS hace zoom al enfocar el campo. */
  font-size:16px;min-height:44px;outline:none;min-width:170px}
.reclamo-form input:focus{border-color:var(--txt)}
.reclamo-msg{font-size:13.5px;margin:12px 0 0;color:var(--mut);line-height:1.5;max-width:52ch}
.reclamo-msg.ok{color:var(--dato-mas)}
.reclamo-msg.mal{color:var(--dato-menos)}
/* Antes de Google: que se gana, en tres renglones y no en un parrafo. Las
   vinietas van en gris: el celeste es del boton, y aca el boton es uno solo. */
.reclamo.libre{align-items:center}
.rl-txt{flex:1;min-width:0}
.rl-gana{margin:10px 0 8px;padding:0;list-style:none;display:grid;gap:5px}
.rl-gana li{position:relative;padding-left:16px;font-size:13.5px;color:var(--txt);line-height:1.4}
.rl-gana li::before{content:"";position:absolute;left:1px;top:.52em;width:6px;height:6px;
  border-radius:50%;background:var(--mut)}

/* Pasale su ficha: una fila liviana debajo de la caja, punteada para que no
   compita con el reclamo, que es la accion de la duenia de la ficha. */
.pasale{display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;margin:10px 0 4px;
  padding:12px 16px;border:1px dashed var(--line2);border-radius:var(--r)}
.pasale > span{flex:1;min-width:200px;font-size:13.5px;color:var(--mut);line-height:1.45}
.pasale b{color:var(--txt);font-weight:700}
.grupo-acc{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:560px){
  .grupo-acc{width:100%}
  .grupo-acc .btn-primario{flex:1}
}

@media(max-width:560px){
  .reclamo{flex-direction:column;align-items:stretch}
  .reclamo .btn-primario{margin-left:0;width:100%}
  .reclamo-form{flex-direction:column;align-items:stretch}
  .reclamo-form input,.reclamo-form .btn-primario{width:100%}
}

/* ============================================================
   TU LUGAR EN EL HEADER
   ------------------------------------------------------------
   Despues de reclamar la ficha el sitio no se acordaba de vos:
   decia "esta ficha es tuya" y no habia forma de volver. Un
   producto de identidad tiene que tener siempre a la vista la
   puerta a lo tuyo.
   ============================================================ */
.yo{display:flex;align-items:center;gap:8px;margin-left:auto;order:3}
.yo-chip{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  color:var(--txt);background:var(--card);border:1px solid var(--line2);
  border-radius:999px;padding:6px 14px 6px 6px;min-height:44px;
  font-size:13.5px;font-weight:600;transition:border-color .16s var(--ease)}
.yo-chip:hover{border-color:var(--txt)}
.yo-chip:focus-visible{outline:2px solid var(--txt);outline-offset:2px}
.yo-av{width:30px;height:30px;border-radius:50%;background:var(--card2);
  border:1px solid var(--line2);display:grid;place-items:center;
  font-size:11px;font-weight:700;color:var(--mut);flex:0 0 auto}
.yo-entrar,.yo-salir{color:var(--mut);text-decoration:none;font-size:13px;
  font-weight:600;padding:11px 12px;min-height:44px;display:inline-flex;
  align-items:center;border-radius:var(--r-chico)}
.yo-entrar{border:1px solid var(--line2);color:var(--txt)}
.yo-entrar:hover,.yo-salir:hover{color:var(--txt);border-color:var(--txt)}
.yo-entrar:focus-visible,.yo-salir:focus-visible{outline:2px solid var(--txt);outline-offset:2px}

/* En mobile el resumen de la plataforma se cae: el header ya tiene marca,
   pestanias y ahora la puerta a lo tuyo, y eso es lo que importa en 375 px.
   El resumen sigue estando en la home, que es donde se lee. */
@media(max-width:760px){
  .yo{order:2}
  .yo-txt{display:none}
  .yo-chip{padding:6px;border-radius:50%}
  .resumen{display:none}
}

/* La foto que sube la persona. El input va escondido adentro de un <label>: el
   file picker nativo no se puede estilar y un boton con JS pierde el teclado. */
.subir{position:relative;cursor:pointer}
.subir:focus-within{outline:2px solid var(--txt);outline-offset:2px}
.reclamo.ocupado{opacity:.7;pointer-events:none}
.foto-msg{font-size:13px;margin:10px 0 0;color:var(--mut);line-height:1.5}
.foto-msg.ok{color:var(--dato-mas)}
.foto-msg.mal{color:var(--dato-menos)}

/* ============================================================
   EL MAPA
   ------------------------------------------------------------
   Es una VISTA de Inicio, no una pestania nueva: una entrada por
   concepto en la navegacion. Las ligas son la procedencia del
   dato y se pueden ver como lista o sobre el mapa.
   ============================================================ */
.vistas{display:flex;align-items:center;justify-content:space-between;
  gap:16px;margin-top:34px;flex-wrap:wrap}
.toggle{display:inline-flex;border:1px solid var(--line2);border-radius:999px;
  padding:3px;gap:2px}
.toggle button{background:transparent;border:none;color:var(--mut);font:inherit;
  font-size:13px;font-weight:600;padding:11px 18px;min-height:44px;
  border-radius:999px;cursor:pointer;transition:.16s var(--ease)}
.toggle button:hover{color:var(--txt)}
.toggle button.on{background:var(--txt);color:var(--bg)}
.toggle button:focus-visible{outline:2px solid var(--txt);outline-offset:2px}

#mapa{height:min(62vh,540px);border-radius:var(--r);margin-top:12px;
  border:1px solid var(--line);background:var(--card);z-index:0}
/* Leaflet viene con su propio look claro. Se le baja el brillo para que no sea
   un rectangulo blanco en medio de una pagina de tinta. */
#mapa .leaflet-tile-pane{filter:saturate(.75) brightness(.82) contrast(1.05)}
#mapa .leaflet-control-attribution{background:#0b0a09cc;color:var(--dim);
  font-size:11px}
#mapa .leaflet-control-attribution a{color:var(--mut)}
#mapa .leaflet-popup-content-wrapper,#mapa .leaflet-popup-tip{
  background:var(--card2);color:var(--txt);border:1px solid var(--line2)}
#mapa .leaflet-popup-content{font-size:13px;line-height:1.5;margin:12px 14px}
#mapa .leaflet-popup-content small{color:var(--mut)}
#mapa .leaflet-popup-close-button{color:var(--mut)}
.mapa-pie{font-size:13px;color:var(--mut);margin-top:12px;line-height:1.6}
.mapa-pie b{color:var(--txt)}
.mapa-pie .tenue{color:var(--dim);display:inline}

/* El editor de sedes. Solo se dibuja para quien esta en POTRERO_ADMIN. */
.admin{margin-top:20px}
.sede-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px;align-items:end;margin-bottom:6px}
.sede-form label{display:flex;flex-direction:column;gap:6px;font-size:11px;
  font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--dim)}
.sede-form label.ancha{grid-column:span 2}
.sede-form input,.sede-form select{background:var(--bg);border:1px solid var(--line2);
  border-radius:var(--r-chico);padding:11px 13px;color:var(--txt);font:inherit;
  font-size:16px;min-height:44px;outline:none}
.sede-form input:focus,.sede-form select:focus{border-color:var(--txt)}
.sede-msg{font-size:13px;color:var(--dim);margin:10px 0 18px;line-height:1.5}
.sede-msg.ok{color:var(--dato-mas)} .sede-msg.mal{color:var(--dato-menos)}
.sede-msg.aviso{color:var(--amarilla)}
.admin td.dir{color:var(--mut);font-size:12.5px;max-width:22ch}
.mini{background:transparent;border:1px solid var(--line2);color:var(--mut);
  border-radius:var(--r-chico);padding:8px 12px;min-height:44px;font:inherit;
  font-size:12.5px;font-weight:600;cursor:pointer}
.mini:hover{color:var(--txt);border-color:var(--txt)}
@media(max-width:560px){ .sede-form label.ancha{grid-column:span 1} }
.sede-form .op{text-transform:none;letter-spacing:0;color:var(--inerte);font-weight:400}


/* ============================================================
   LA PREVIA
   ------------------------------------------------------------
   El proximo partido del equipo, arriba de todo en su pagina. Es
   la primera pantalla del sitio que mira para adelante (V2.md).
   El acento va en la etiqueta y en el "que se juega"; el dia va
   en cal, grande, como el titular de la ficha.
   ============================================================ */
.previa{background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg);
  padding:22px 24px;margin:0 0 18px;position:relative;overflow:hidden}
.previa::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acento)}
.pv-k{font-size:11px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--acento);
  display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pv-k span:last-child{color:var(--dim)}
.pv-dia{font-size:clamp(34px,7vw,46px);font-weight:800;font-stretch:76%;letter-spacing:-.02em;
  line-height:.95;margin:10px 0 2px}
.pv-sub{color:var(--mut);font-size:14px}
.pv-vs{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  margin:18px 0 12px;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.pv-eq{display:flex;align-items:center;gap:10px;min-width:0}
.pv-eq.der{flex-direction:row-reverse;text-align:right}
.pv-eq b{display:block;font-weight:800;font-stretch:80%;font-size:17px;line-height:1.05;
  overflow:hidden;text-overflow:ellipsis}
.pv-eq small{display:block;color:var(--dim);font-size:11.5px;margin-top:3px}
.pv-x{color:var(--dim);font-weight:800;font-stretch:75%;font-size:18px}
.pv-forma{display:inline-flex;gap:3px;vertical-align:middle;margin-top:6px}
.pv-forma i{width:9px;height:12px;border-radius:1px;background:var(--line2);display:inline-block}
.pv-forma i.G{background:var(--dato-mas)} .pv-forma i.P{background:var(--dato-menos)}
.pv-forma i.E{background:var(--mut)}
.pv-fila{display:flex;justify-content:space-between;gap:12px;font-size:13.5px;padding:8px 0;
  border-bottom:1px solid var(--line)}
.pv-fila:last-of-type{border-bottom:0}
.pv-fila .k{color:var(--dim)} .pv-fila .v{text-align:right;font-weight:600}
.pv-fila .v a{color:var(--txt);text-decoration:underline;text-decoration-color:var(--line2);
  text-underline-offset:3px}
.pv-juega{display:inline-block;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 8px;border:1px solid var(--acento);color:var(--acento);border-radius:6px}
.pv-acciones{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px}
.pv-tabla{margin-top:14px}
/* La tabla scrollea adentro de su caja: con los nombres en nowrap, a 375px
   empujaba la pagina entera de costado (829px medidos). */
.pv-tabla table{width:100%;border-collapse:collapse;font-size:13px}
.pv-tabla .tw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:8px}
.pv-tabla td,.pv-tabla th{padding:6px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
.pv-tabla th{color:var(--dim);font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;text-align:left}
.pv-tabla td.num,.pv-tabla th.num{text-align:right;font-variant-numeric:tabular-nums}
.pv-tabla tr.yo td{color:var(--txt);font-weight:700;background:var(--acento-suave)}
.pv-tabla tr.riv td{color:var(--txt)}
.pv-tabla .bd{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;vertical-align:middle;background:transparent}
.pv-tabla .bd.ascenso{background:var(--dato-mas)} .pv-tabla .bd.promocion{background:var(--bronce)}
.pv-tabla .bd.descenso{background:var(--dato-menos)}
@media(max-width:600px){.pv-eq b{font-size:15px}.previa{padding:18px 16px}}
.tt-prox{margin-top:10px;font-size:13px}
.tt-prox a{color:var(--acento);text-decoration:none;font-weight:600}

/* Otras fichas con el mismo nombre en la liga. Aviso, no alarma: va en carta
   normal, con la lista tocable. */
.homonimos{margin:14px 0 4px;padding:14px 16px;background:var(--card);border:1px solid var(--line2);
  border-radius:var(--r)}
.homonimos p{margin:0 0 10px;font-size:13.5px;color:var(--mut);line-height:1.45}
.homonimos p b{color:var(--txt);font-weight:600}
.homonimos .hm{display:block;padding:9px 0;border-top:1px solid var(--line);text-decoration:none;color:var(--txt)}
.homonimos .hm b{font-weight:700;font-stretch:92%;display:block}
.homonimos .hm span{display:block;font-size:12px;color:var(--dim);margin-top:2px}
.homonimos .hm:hover b{color:var(--acento)}

/* Seguir a mi equipo, en la cabecera del club */
.seguir-caja{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:10px 0 4px}
.btn-primario.sec{background:transparent;color:var(--txt);border-color:var(--line2)}
.btn-primario.sec:hover{border-color:var(--txt);opacity:1}
.seguir-msg{font-size:12.5px;color:var(--dim)}

/* Pasale su ficha: el plantel propio, con links */
.plantel-propio{background:var(--card);border:1px solid var(--line2);border-radius:var(--r-lg);
  padding:20px 22px;margin:0 0 18px}
.plantel-propio .pl-txt{color:var(--mut);font-size:13.5px;margin:0 0 12px;max-width:60ch}
.pl-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:4px 16px}
.pl{display:flex;align-items:center;gap:10px;padding:7px 0;text-decoration:none;color:var(--txt);
  border-bottom:1px solid var(--line);min-height:44px}
.pl b{display:block;font-weight:600;font-stretch:92%;font-size:14px}
.pl small{display:block;color:var(--dim);font-size:11.5px}
.pl:hover b{color:var(--acento)}

/* Cargar el dia donde la liga no lo publica */
.pv-cargar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.pv-cargar label{width:100%;font-size:13px;color:var(--mut)}
.pv-cargar input{background:var(--card2);border:1px solid var(--line2);color:var(--txt);font:inherit;font-size:16px;
  padding:0 10px;height:44px;border-radius:var(--r-chico);min-width:0}
.pv-cargar input[type=date]{flex:1 1 150px} .pv-cargar input[type=time]{flex:0 1 120px}
.pv-cargar input:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-suave)}
.pv-cargar-nota{margin-top:12px;font-size:13px;color:var(--dim)}
.pv-cargar-nota a{color:var(--acento)}

/* Falta tu torneo */
.pedido{display:grid;gap:8px;margin:14px auto 0;max-width:420px;text-align:left}
.pedido input{background:var(--card2);border:1px solid var(--line2);color:var(--txt);font:inherit;font-size:16px;
  padding:0 12px;height:44px;border-radius:var(--r-chico);width:100%}
.pedido input:focus{outline:none;border-color:var(--acento);box-shadow:0 0 0 3px var(--acento-suave)}
.pedido-ok{margin-top:12px;color:var(--dato-mas);font-weight:600}

/* El cromo de un menor: cuenta para el equipo, pero no tiene nombre ni ficha.
   Sin cursor de link, porque no lleva a ningun lado. */
.cromo.anonimo{cursor:default;opacity:.72}
.cromo.anonimo .cr-ape{font-style:italic;font-weight:600}

/* ---------- El vestuario ----------
   El espacio cerrado del equipo (muro.py). Se ve como una conversación, no
   como una tabla: es el único lugar del sitio donde la gente escribe. */
.vestuario{border-color:var(--acc-borde,var(--line))}
.mu-nuevo{display:block;margin-bottom:18px}
.mu-nuevo textarea{width:100%;background:var(--bg);border:1px solid var(--line);border-radius:10px;
  color:var(--fg);font:inherit;font-size:15px;padding:12px 14px;resize:vertical;min-height:64px}
.mu-nuevo textarea:focus{outline:2px solid var(--acento);outline-offset:1px;border-color:var(--acento)}
.mu-acciones{display:flex;align-items:center;gap:12px;margin-top:10px;flex-wrap:wrap}
.mu-adj{cursor:pointer;font-size:14px;font-weight:600;color:var(--acento);
  border:1px solid var(--line);border-radius:8px;padding:8px 12px}
.mu-adj:hover{border-color:var(--acento)}
.mu-elegidos{font-size:13px;color:var(--dim);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mu-barra{height:3px;background:var(--line);border-radius:2px;margin-top:10px;overflow:hidden}
.mu-barra div{height:100%;width:0;background:var(--acento);transition:width .25s}
.mu-lista{display:flex;flex-direction:column;gap:14px}
.mu-pub{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--bg)}
.mu-cab{display:flex;align-items:baseline;gap:10px}
.mu-cab b{font-weight:700;cursor:pointer}
.mu-cab b:hover{color:var(--acento)}
.mu-fecha{font-size:12px;color:var(--dim)}
.mu-x{margin-left:auto;background:none;border:0;color:var(--dim);font-size:18px;line-height:1;cursor:pointer;padding:0 4px}
.mu-x:hover{color:var(--menos,#E8736E)}
.mu-txt{margin:8px 0 0;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
.mu-med{display:block;width:100%;max-height:520px;object-fit:contain;border-radius:10px;
  margin-top:12px;background:#000}
.mu-resps{display:flex;flex-direction:column;gap:6px;margin-top:12px}
/* La respuesta fluye como texto y no como fila flex: con flex, la cruz de
   borrar se iba al extremo derecho y en el telefono caia sola en un renglon. */
.mu-resp{font-size:14px;line-height:1.5;color:var(--fg)}
.mu-resp b{font-weight:700;cursor:pointer;margin-right:6px}
/* La fecha no se parte en dos renglones: "hace 1" arriba y "min" abajo
   se leia como un error. */
.mu-resp .mu-fecha{margin-left:6px;white-space:nowrap}
.mu-resp .mu-x{margin-left:2px;font-size:15px;vertical-align:baseline}
.mu-form-r{margin-top:10px}
.mu-form-r input{width:100%;background:transparent;border:0;border-top:1px solid var(--line);
  color:var(--fg);font:inherit;font-size:14px;padding:10px 2px 0}
.mu-form-r input:focus{outline:none;border-top-color:var(--acento)}
.mu-vacio{color:var(--dim);font-size:15px;line-height:1.55;margin:0}

/* "Esta ficha también soy yo": el dueño junta sus fichas partidas. */
.unir-fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  border-top:1px solid var(--line);padding:10px 0;font-size:14px}
.unir-fila small{color:var(--dim)}
.unir-no{max-width:34ch;line-height:1.4}
.hm-fila{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hm-fila .hm{flex:1;min-width:min(100%,260px)}
/* Con quien jugo esa ficha. Ocupa la fila entera debajo, no la columna de la
   accion: son cinco nombres y en el telefono no entran al costado. */
.hm-con{flex:1 0 100%;font-size:12.5px;color:var(--txt);line-height:1.5;
  margin:-2px 0 2px;padding-left:2px}
.hm-con:empty{display:none}
.hm-con span{color:var(--dim)}
.hm-accion{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
/* Forzar la union es del admin y es la excepcion, no la accion normal: va
   discreto y debajo del motivo, nunca como boton principal. */
.hm-accion .forzar{font-size:12.5px;padding:7px 12px;min-height:36px;opacity:.75}
.hm-accion .forzar:hover{opacity:1}

/* Una fila por nombre en el buscador: tres tarjetas iguales parecen un error. */
.pcard.grupo{cursor:pointer}
.pcard.grupo .big b{color:var(--dim)}
.pcard.grupo.abierto{border-color:var(--acento)}
.grupo-abre{border-left:2px solid var(--line);margin:0 0 10px 14px;padding-left:12px}
.grupo-nota{color:var(--dim);font-size:13.5px;line-height:1.5;margin:8px 0 10px}

/* La puerta de salida, al pie de la ficha (06-sep).
   Deliberadamente sobria y plegada: tiene que ser facil de encontrar para
   quien la busca y no un boton rojo que le grite "andate" a todo el mundo. */
.salida{margin-top:18px}
.salida summary{cursor:pointer;font-size:14px;color:var(--mut);padding:6px 0;
  min-height:44px;display:flex;align-items:center}
.salida summary:hover{color:var(--txt)}
.salida p{font-size:13.5px;color:var(--mut);line-height:1.55;margin:8px 0;max-width:56ch}
.salida form{display:grid;gap:10px;margin:14px 0;max-width:420px}
.salida label{display:grid;gap:4px;font-size:12px;color:var(--mut)}
.salida input{background:var(--bg);border:1px solid var(--line2);
  border-radius:var(--r-chico);padding:11px 13px;color:var(--txt);font:inherit;
  /* 16 px: por debajo, iOS hace zoom al enfocar el campo. */
  font-size:16px;min-height:44px;outline:none}
.salida input:focus{border-color:var(--txt)}
.salida .btn-primario{justify-self:start}
.salida .tenue{font-size:12px}
/* El sitio no tiene una regla global para <a>: cada componente estiliza los
   suyos. Sin esto el link de privacidad salia con el azul por defecto del
   navegador, que sobre fondo oscuro no se lee. */
.salida a{color:var(--acento);text-decoration:underline;
  text-decoration-color:var(--line2);text-underline-offset:3px}
.salida a:hover{text-decoration-color:var(--acento)}
.salida .cuenta-borrar{margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.salida .chk{display:flex;flex-direction:row;align-items:center;gap:8px;font-size:13px}
.salida .chk input{min-height:auto;width:auto;accent-color:var(--acento)}

/* ============================================================
   EL VESTUARIO · el espacio cerrado del equipo
   ------------------------------------------------------------
   Es la unica pantalla del sitio que no es "pagina de album":
   es un lugar. El resto es tinta y papel y esto tiene madera,
   chapa y pasto, porque la referencia es un vestuario de verdad
   y porque conviene que se sienta distinto de lo publico: lo
   que se sube aca lo ven doce personas, no internet.

   Lo que NO hay, y no se inventa: numero de camiseta (cargado
   en 0 de 2.499.778 inscripciones), puesto, titulares y minutos
   del gol. La camiseta lleva el apellido, que es lo que la
   fuente si publica, y la pizarra la arma el equipo a mano.
   ============================================================ */
.vest-cab{display:flex;gap:16px;align-items:flex-start;padding:20px 0 4px}
.vest-cab .esc{width:64px;height:64px;flex:none;border-radius:12px;background:var(--card2);
  display:grid;place-items:center;overflow:hidden;border:1px solid var(--line)}
.vest-cab .esc img{width:100%;height:100%;object-fit:contain}
.vest-cab h2{margin:0 0 2px;font-size:clamp(22px,4.4vw,34px);font-stretch:80%;letter-spacing:-.01em}
.vest-cab .donde{color:var(--mut);font-size:14px;margin:0 0 6px}
.vest-cab .cerrado{color:var(--dim);font-size:12.5px;display:flex;align-items:center;gap:6px}
.vest-cab .cerrado svg{width:13px;height:13px;flex:none}
.vest-pos{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.vest-pos span{font-size:12px;font-weight:700;padding:5px 10px;border-radius:999px;
  background:var(--card2);border:1px solid var(--line);color:var(--mut);white-space:nowrap}

/* ---- el panel: madera oscura, como los lockers ---- */
.vest-panel{margin-top:22px;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  background:
    linear-gradient(180deg,#1a1410 0%,#141017 60%,#11151c 100%);
  position:relative}
.vest-panel::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(90deg,#0000 0 38px,#ffffff08 38px 39px)}
.vest-panel > *{position:relative}
.vest-panel h3{margin:0;font-size:12px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim);font-weight:700}
.vest-barra{display:flex;gap:12px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding:16px 18px;border-bottom:1px solid #ffffff12}
.vest-barra .rival{font-size:15px;color:var(--txt);font-weight:700}
.vest-barra .rival small{display:block;color:var(--dim);font-weight:400;font-size:12.5px;margin-top:2px}

/* ---- la pizarra ---- */
.piz-ctrl{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:14px 18px}
.piz-ctrl select{background:var(--card);border:1px solid var(--line2);border-radius:9px;
  color:var(--txt);font:inherit;font-size:14px;font-weight:700;padding:9px 11px}
.piz-ctrl button{background:transparent;border:1px solid var(--line2);border-radius:9px;
  color:var(--mut);font:inherit;font-size:13px;font-weight:700;padding:9px 13px;cursor:pointer}
.piz-ctrl button:hover{border-color:var(--txt);color:var(--txt)}
.piz-ctrl .ayuda{color:var(--dim);font-size:12.5px;flex:1 1 180px;min-width:0}
/* La cancha es vertical: esto se abre con el telefono, desde la cancha. */
.cancha{position:relative;margin:0 18px 18px;aspect-ratio:3/4;max-width:520px;border-radius:12px;
  background:linear-gradient(180deg,#14351f 0%,#102a19 50%,#14351f 100%);
  border:2px solid #ffffff1f;overflow:hidden;touch-action:manipulation}
.cancha .lineas{position:absolute;inset:0;pointer-events:none}
.cancha .lineas i{position:absolute;border:1.5px solid #ffffff2b}
.cancha .lineas .mitad{left:0;right:0;top:50%;border-width:1.5px 0 0}
.cancha .lineas .circulo{left:50%;top:50%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%}
.cancha .lineas .area-ab{left:22%;right:22%;bottom:0;height:13%;border-width:1.5px 1.5px 0}
.cancha .lineas .area-ar{left:22%;right:22%;top:0;height:13%;border-width:0 1.5px 1.5px}
.piz-slot{position:absolute;transform:translate(-50%,-50%);width:66px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:3px;-webkit-tap-highlight-color:transparent}
.piz-slot .hueco{width:38px;height:38px;border-radius:50%;border:2px dashed #ffffff40;
  display:grid;place-items:center;color:#ffffff59;font-size:11px;font-weight:800;
  transition:border-color .15s,background .15s}
.piz-slot:hover .hueco,.piz-slot.destino .hueco{border-color:var(--acento);background:#ffffff14}
.piz-slot .puesto{font-size:9.5px;letter-spacing:.1em;color:#ffffff73;font-weight:800;text-transform:uppercase}
.piz-slot .quien{width:40px;height:40px;border-radius:50%;background:var(--card2);
  border:2px solid var(--line2);display:grid;place-items:center;font-size:12.5px;font-weight:800;
  color:var(--txt);font-stretch:75%}
.piz-slot .ape{font-size:10.5px;font-weight:800;color:#fff;text-transform:uppercase;
  max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  text-shadow:0 1px 3px #000c;font-stretch:70%}
.piz-slot.lleno .hueco{display:none}

/* En desktop la cancha y el banco van uno al lado del otro: sola, la cancha
   dejaba medio ancho de pantalla vacio a la derecha. En el telefono es una
   columna, que es como se usa. */
@media (min-width:900px){
  /* La columna de la cancha va acotada, no a "todo lo que sobre": con el ancho
     completo la relacion 3/4 la estiraba a 957px de alto y el panel quedaba
     dominado por pasto vacio. 470px de ancho son 626 de alto, que entra en una
     pantalla de notebook sin scrollear. */
  .piz-cuerpo{display:grid;grid-template-columns:minmax(0,470px) minmax(240px,1fr);
    gap:8px;align-items:start}
  .piz-cuerpo .cancha{max-width:none;margin-right:0}
  .piz-cuerpo .piz-banco{padding:0 18px 18px 4px}
  .piz-cuerpo .piz-banco .chips{align-content:flex-start}
}

/* ---- el banco ---- */
.piz-banco{padding:0 18px 18px}
.piz-banco .tit{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.piz-banco .chips{display:flex;gap:7px;flex-wrap:wrap}
.piz-chip{background:var(--card);border:1px solid var(--line2);border-radius:999px;color:var(--mut);
  font:inherit;font-size:12.5px;font-weight:700;padding:7px 12px;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.piz-chip:hover{border-color:var(--txt);color:var(--txt)}
.piz-chip.elegido{background:var(--acento);border-color:var(--acento);color:var(--sobre-acento)}
.piz-chip.usado{opacity:.35;text-decoration:line-through}
.piz-chip .g{color:var(--dim);font-weight:800;margin-left:5px}
.piz-chip.elegido .g{color:var(--sobre-acento);opacity:.75}
.piz-nota{color:var(--dim);font-size:12.5px;padding:0 18px 16px;margin:0}

/* ---- las camisetas colgadas ---- */
.vest-perchero{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:14px;
  padding:22px 18px 20px;background:linear-gradient(180deg,#0f0c0a,#11151c);
  border:1px solid var(--line);border-top:0;border-radius:0 0 16px 16px;margin-top:-16px;
  position:relative}
/* el fierro del perchero */
.vest-perchero::before{content:"";position:absolute;left:14px;right:14px;top:10px;height:3px;
  border-radius:2px;background:linear-gradient(180deg,#5b626a,#2b3138)}
.camiseta{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;
  color:inherit;cursor:pointer}
.camiseta .percha{width:2px;height:12px;background:#6b7280}
.camiseta .tela{width:100%;aspect-ratio:1/1.08;position:relative;border-radius:8px 8px 5px 5px;
  background:linear-gradient(180deg,var(--card2),var(--card));border:1px solid var(--line2);
  display:grid;place-items:center;padding:16px 8px 8px;
  clip-path:polygon(0 14%,18% 0,82% 0,100% 14%,100% 100%,0 100%)}
/* el cuello */
.camiseta .tela::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:34%;height:13%;border-radius:0 0 999px 999px;background:var(--bg2)}
.camiseta .ape{font-size:12px;font-weight:800;text-transform:uppercase;text-align:center;
  line-height:1.1;font-stretch:70%;color:var(--txt);overflow-wrap:anywhere}
.camiseta .dato{font-size:11px;color:var(--dim);text-align:center;line-height:1.3}
.camiseta .dato b{color:var(--mut);font-weight:800}
.camiseta.jugo .tela{border-color:var(--line2)}
.camiseta.suplente .tela{opacity:.5;border-style:dashed}
.camiseta.vos .tela{border-color:var(--txt)}
.camiseta.vos .dato b{color:var(--txt)}
.camiseta.menor{cursor:default}
.camiseta.menor .ape{color:var(--dim);font-style:italic}
.vest-sep{display:flex;align-items:center;gap:10px;grid-column:1/-1;margin:6px 0 0}
.vest-sep span{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:700}
.vest-sep i{flex:1;height:1px;background:var(--line)}

@media (max-width:640px){
  .vest-cab{gap:12px}
  .vest-cab .esc{width:48px;height:48px}
  .cancha{margin:0 12px 14px;aspect-ratio:3/4.2}
  .piz-slot{width:56px}
  .piz-slot .hueco,.piz-slot .quien{width:34px;height:34px}
  .piz-slot .quien{font-size:11px}
  .vest-perchero{grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:10px;padding:20px 12px 16px}
  .piz-ctrl,.piz-banco,.vest-barra{padding-left:12px;padding-right:12px}
  .piz-nota{padding-left:12px;padding-right:12px}
}