/* =========================================================================
   DIOSES LEAGUE — Estilos
   Tema: estadio de noche + Minecraft (bloques, pasto) + cartas tipo FIFA.
   ========================================================================= */

:root {
  --bg:        #0b0f0d;
  --bg-2:      #11161300;
  --panel:     #141b17;
  --panel-2:   #1a231d;
  --line:      #26332b;
  --line-soft: #1e2a23;

  --grass:     #37c24a;   /* verde pasto / esmeralda */
  --grass-dk:  #1f8f30;
  --gold:      #f7c948;   /* rating / medallas */
  --gold-dk:   #c9971b;
  --diamond:   #45d3ff;
  --danger:    #ef4444;
  --purple:    #8b5cf6;

  --txt:       #eaf2ec;
  --txt-dim:   #9db1a4;
  /* era #64766c: daba 4.0 de contraste sobre el fondo y 3.63 sobre los paneles,
     y WCAG AA pide 4.5 para texto normal (este color se usa en textos de 10 a
     13px por todo el sitio). Este mantiene el mismo gris verdoso y pasa: 5.4
     sobre el fondo y 4.9 sobre panel. */
  --txt-mute:  #788c82;

  --radius:    14px;
  --radius-sm: 9px;
  --shadow:    0 18px 40px -18px rgba(0,0,0,.75);
  --ring:      0 0 0 1px var(--line);

  --font: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  color: var(--txt);
  background:
    radial-gradient(1100px 600px at 78% -8%, rgba(55,194,74,.16), transparent 60%),
    radial-gradient(900px 500px at 10% 0%, rgba(69,211,255,.08), transparent 55%),
    linear-gradient(180deg, #0c1310 0%, var(--bg) 40%);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }

.wrap { width: min(1180px, 92vw); margin-inline: auto; }

/* pixel/blocky accents */
.pixel { image-rendering: pixelated; }
.mono-num { font-variant-numeric: tabular-nums; }

/* ------------------------------- NAV ------------------------------------ */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(9,13,11,.82);
  border-bottom: 1px solid var(--line-soft);
}
.nav-inner { display: flex; align-items: center; gap: 18px; height: 64px; }
.nav-links { flex-wrap: nowrap; }
.brand { display: flex; align-items: center; gap: 11px; font-weight: 800; letter-spacing: .3px; }
.brand .logo-img { width: 48px; height: 48px; object-fit: contain; flex: none;
  filter: drop-shadow(0 3px 8px rgba(0,0,0,.5)); }
@media (max-width: 480px) { .brand .logo-img { width: 36px; height: 36px; } }
.brand b { font-size: 18px; }
.brand .sub { color: var(--grass); }
/* monograma para pantallas donde no entra "DiosesLeague" (se activa abajo) */
.brand .brand-short {
  display: none; font-size: 14px; font-weight: 900; letter-spacing: .5px; line-height: 1;
  padding: 5px 7px; border-radius: 8px; flex: none;
  background: linear-gradient(150deg, rgba(55,194,74,.18), rgba(240,185,61,.10));
  border: 1px solid rgba(240,185,61,.30);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.nav-links { display: flex; gap: 6px; margin-left: 8px; }
.nav-links a {
  padding: 8px 13px; border-radius: 9px; color: var(--txt-dim);
  font-weight: 600; font-size: 14.5px; transition: .15s; white-space: nowrap;
}
.nav-links a:hover { color: var(--txt); background: var(--panel-2); }
.nav-links a.active { color: var(--txt); background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.nav-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 10px; font-weight: 700; font-size: 14px;
  border: 1px solid transparent; transition: .15s; white-space: nowrap;
}
.btn-primary { background: linear-gradient(135deg, var(--grass), var(--grass-dk)); color: #06210c;
  box-shadow: 0 8px 20px -8px var(--grass-dk); }
.btn-primary:hover { filter: brightness(1.07); transform: translateY(-1px); }
.btn-ghost { background: var(--panel-2); color: var(--txt); border-color: var(--line); }
.btn-ghost:hover { background: var(--panel); border-color: var(--grass-dk); }
.btn-discord { background: #5865F2; color: #fff; }
.btn-discord:hover { filter: brightness(1.08); }
.btn-twitch { background: #9146FF; color: #fff; }
.btn-twitch:hover { filter: brightness(1.1); }
/* Donaciones: apagado a propósito. No lleva color de marca como Discord y
   Twitch porque no es un destino principal — es un agradecimiento. Se enciende
   en rojo recién al pasar por encima. */
.btn-donar { background: var(--panel-2); color: var(--txt-mute); border-color: var(--line); }
.btn-donar:hover { background: var(--panel); color: #ff5c7a; border-color: #ff5c7a; }
.btn-twitch svg, .btn-discord svg, .btn-donar svg { display: block; }
.btn-icon { width: 40px; height: 38px; padding: 0; justify-content: center; }

.nav-burger { display: none; }

/* menú móvil desplegable */
.nav-mobile { display: none; }
.nav-mobile.open { display: flex; flex-direction: column; border-top: 1px solid var(--line-soft); padding: 8px 4vw 12px; }
.nav-mobile a { padding: 12px 10px; border-radius: 9px; font-weight: 700; font-size: 15.5px; color: var(--txt-dim); }
.nav-mobile a.active, .nav-mobile a:hover { color: var(--txt); background: var(--panel-2); }

/* ------------------------------- HERO ----------------------------------- */
.hero { position: relative; padding: 62px 0 30px; overflow: hidden; }
.hero-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.tagline {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: var(--grass); background: rgba(55,194,74,.1); border: 1px solid rgba(55,194,74,.28);
}
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--grass);
  box-shadow: 0 0 0 0 rgba(55,194,74,.6); animation: pulse 1.8s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(55,194,74,.55)} 70%{box-shadow:0 0 0 10px rgba(55,194,74,0)} 100%{box-shadow:0 0 0 0 rgba(55,194,74,0)} }

.hero h1 { font-size: clamp(34px, 5vw, 56px); line-height: 1.03; font-weight: 900; letter-spacing: -1px; }
.hero h1 .g { color: var(--grass); }
.hero h1 .y { color: var(--gold); }
.hero p.lead { margin: 18px 0 26px; color: var(--txt-dim); font-size: 18px; max-width: 46ch; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 26px; margin-top: 34px; }
.hero-stats .st b { font-size: 26px; font-weight: 900; }
.hero-stats .st span { display: block; color: var(--txt-mute); font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .6px; }
.hero-stats .st b.g { color: var(--grass); }
.hero-stats .st b.y { color: var(--gold); }

/* tarjeta destacada del hero */
.hero-card-wrap { display: grid; place-items: center; }

/* --------------------------- CARTA JUGADOR ------------------------------ */
.pcard {
  --c1: #2a3a2f; --c2: #16211b; --accent: #f7c948;
  display: block; width: 260px; max-width: 100%; border-radius: 18px; padding: 18px 16px 16px; position: relative;
  background:
    linear-gradient(160deg, rgba(255,255,255,.06), transparent 40%),
    linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.08);
  overflow: hidden; transition: transform .2s, box-shadow .2s;
}
.pcard::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 60% at 50% -10%, rgba(255,255,255,.12), transparent 55%);
}
/* 50-69 · COMÚN (piedra, apagada a propósito) */
.pcard.tier-comun {
  --accent: #aeb6bc;
  background:
    linear-gradient(160deg, rgba(255,255,255,.04), transparent 42%),
    linear-gradient(120deg, #34393d, #191c1e);
}

/* 70-79 · BRONCE COBRE (sobrio, no muy vistoso) */
.pcard.tier-bronze {
  --accent: #d68a54;
  background:
    linear-gradient(160deg, rgba(255,255,255,.05), transparent 42%),
    linear-gradient(120deg, #4a3324, #24160d);
}
/* 80-84 · PLATA INTENSO (metálico, frío, lindo) */
.pcard.tier-silver {
  --accent: #eef4f9;
  background:
    linear-gradient(160deg, rgba(255,255,255,.14), transparent 40%),
    linear-gradient(118deg, #4c5760 0%, #262e35 34%, #5a6771 52%, #1f262c 72%, #3a444c 100%);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(220,232,244,.28);
}
/* 85-89 · ORO BRILLANTE */
.pcard.tier-gold {
  --accent: #ffd23f;
  background:
    linear-gradient(160deg, rgba(255,255,255,.16), transparent 40%),
    linear-gradient(118deg, #6f5416 0%, #3a2b08 34%, #866619 52%, #2c2007 72%, #4d3a0f 100%);
  box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,214,90,.32);
}
/* 90-99 · ELITE (oro premium + brillo animado + destello que barre) */
.pcard.tier-elite {
  --accent: #ffde5a;
  background:
    linear-gradient(160deg, rgba(255,255,255,.18), transparent 42%),
    linear-gradient(118deg, #82611250 0%, #3e2e06 30%, #a07d16 52%, #2e2205 74%, #5f4810 100%),
    linear-gradient(180deg, #4a3a10, #241b05);
  animation: glowGold 3.2s ease-in-out infinite;
}
/* 100 · CENTURIÓN (holográfico oro + celeste, máximo movimiento) */
.pcard.tier-cien {
  --accent: #66e6ff;
  background:
    linear-gradient(160deg, rgba(255,255,255,.20), transparent 44%),
    linear-gradient(125deg, #0e4553 0%, #124a6e 24%, #3a2f6e 48%, #7a5e18 70%, #0c1a2e 100%);
  background-size: 100% 100%, 300% 300%;
  animation: holoShift 6s ease-in-out infinite, glowCien 2.4s ease-in-out infinite;
}

/* destello que barre la carta (elite y cien) */
.pcard.tier-elite::before, .pcard.tier-cien::before {
  content: ""; position: absolute; top: -25%; left: -75%; width: 45%; height: 150%; z-index: 3;
  transform: skewX(-16deg); pointer-events: none;
  background: linear-gradient(100deg, transparent 15%, rgba(255,255,255,.5), transparent 85%);
}
.pcard.tier-elite::before { animation: shineSweep 4.5s ease-in-out 1.1s infinite; }
.pcard.tier-cien::before {
  animation: shineSweep 2.7s ease-in-out infinite;
  background: linear-gradient(100deg, transparent 12%, rgba(180,244,255,.65), rgba(255,255,255,.55), rgba(255,224,120,.5), transparent 88%);
}

@keyframes glowGold {
  0%, 100% { box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,222,90,.3), 0 0 18px -8px rgba(255,205,60,.5); }
  50%      { box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,222,90,.6), 0 0 32px -4px rgba(255,205,60,.8); }
}
@keyframes glowCien {
  0%, 100% { box-shadow: var(--shadow), inset 0 0 0 1px rgba(102,230,255,.4),  0 0 26px -8px rgba(102,230,255,.55), 0 0 22px -10px rgba(255,210,80,.4); }
  50%      { box-shadow: var(--shadow), inset 0 0 0 1px rgba(150,240,255,.85), 0 0 48px -3px rgba(102,230,255,.9),  0 0 40px -6px rgba(255,210,80,.6); }
}
@keyframes holoShift {
  0%   { background-position: 0% 0%, 0% 50%; }
  50%  { background-position: 0% 0%, 100% 50%; }
  100% { background-position: 0% 0%, 0% 50%; }
}
@keyframes shineSweep {
  0%   { left: -75%; }
  55%  { left: 135%; }
  100% { left: 135%; }
}

.pcard.link:hover { transform: translateY(-6px); box-shadow: 0 30px 55px -22px rgba(0,0,0,.85), inset 0 0 0 1px rgba(255,255,255,.14); }

/* fuente pixelada, para que los números peguen con el arte de la carta */
@font-face {
  font-family: "PixelDL";
  src: url("/assets/fonts/pixel.ttf") format("truetype");
  font-display: swap;
}

/* ====================== CARTA DE JUGADOR (diseño claro) =================== */
/* Una sola carta para todos; el color de acento cambia según la media.      */
.pcard-new {
  --w: 268px; --acc: #cbd5e1; --acc2: #94a3b8; --ink: #f2f6fa; --sub: #9fb0c4;
  --bg1: #3a4045; --bg2: #191c1f; --edge: rgba(255,255,255,.16);
  position: relative; display: block; width: var(--w); max-width: 100%;
  font-size: calc(var(--w) / 26.8);
  padding: 1.7em 1.5em 1.4em; border-radius: 2em; overflow: hidden;
  background: linear-gradient(150deg, var(--bg1) 0%, var(--bg2) 62%, var(--bg1) 100%);
  box-shadow: 0 1.6em 3em -1.2em rgba(0,0,0,.75), inset 0 0 0 1px var(--edge);
  color: var(--ink); font-family: var(--font);
  transition: transform .22s, box-shadow .22s;
}
/* chevron decorativo del fondo */
.pcard-new::before {
  content: ""; position: absolute; right: -3.5em; top: 5em; width: 13em; height: 13em;
  border-right: 1.5em solid rgba(255,255,255,.05); border-top: 1.5em solid rgba(255,255,255,.05);
  transform: rotate(45deg); border-radius: .4em; pointer-events: none;
}
.pcard-new.link:hover { transform: translateY(-7px); box-shadow: 0 2.2em 3.6em -1.1em rgba(0,0,0,.85), inset 0 0 0 1px var(--edge); }
.pcard-new > * { position: relative; z-index: 1; }

.pn-head { display: flex; justify-content: space-between; align-items: flex-start; }
.pn-media { line-height: .92; position: relative; }
.pn-media b { font-size: 3.5em; font-weight: 900; color: var(--acc); letter-spacing: -.02em; display: block; }
.pn-media hr { width: 1.5em; height: .18em; margin: .35em 0 .3em; border: 0; border-radius: .1em; background: var(--acc); }
.pn-media span { font-size: 1.35em; font-weight: 900; color: var(--ink); letter-spacing: .04em; }
.pn-top-right { display: grid; justify-items: end; gap: .55em; }
.pn-flag { padding: .3em; border-radius: .55em; background: rgba(255,255,255,.92); box-shadow: 0 .25em .6em rgba(20,40,80,.16); display: grid; }
.pn-flag .flag { width: 2.6em; height: auto; border-radius: .2em; }
.pn-team {
  display: inline-flex; align-items: center; gap: .35em; padding: .42em .85em; border-radius: .7em;
  background: var(--acc); color: #fff; font-weight: 900; font-size: 1.05em; letter-spacing: .04em;
  box-shadow: 0 .3em .7em -.15em rgba(47,127,246,.5);
}
.pn-skin { display: grid; place-items: center; margin: .5em 0 .2em; }
.pn-skin { position: relative; height: 8.6em; overflow: hidden; }
.pn-fb { position: relative; display: grid; place-items: center; width: 100%; height: 100%; }
.pn-fb svg { width: 5.4em; height: 5.4em; }
/* El muñeco de reserva se esconde cuando HAY una skin real.
   Antes quedaba detrás y asomaba por debajo de la imagen: se veía una carita
   suelta abajo del cuerpo.

   Se hace con :has() y no esperando el evento `load` porque ese evento NO se
   dispara si la imagen ya venía en la caché del navegador — o sea, fallaba
   justo en la segunda visita, que es la más común.
   Si la imagen falla de verdad, el oyente de `error` de app.js pone
   .sin-skin y el muñeco vuelve. */
.pn-fb:has(img) svg { display: none; }
.pn-fb.sin-skin svg { display: block; }
.pn-fb.sin-skin img { display: none; }
/* El servicio devuelve el CUERPO ENTERO y acá se recorta para que quede de la
   cintura para arriba. La cuenta no es al ojo:

   NMSR devuelve 512x869 en perspectiva isométrica. Ahí el cuerpo NO está
   repartido como en un dibujo plano: la cabeza pesa más porque está en
   perspectiva, y el torso termina cerca del 58% de la imagen.
   Para que la caja de 8.6em corte ahí  →  8.6 / 0.58 = 14.8em.

   ⚠️ ESTE NÚMERO DEPENDE DEL PROVEEDOR y ya cambió tres veces:
     mc-heads 240x576 (1:2,4)  → 15.4em
     minotar  240x480 (1:2)    → 13.8em
     NMSR     512x869 (1:1,7)  → 14.8em  ← el de ahora
   Si se cambia otra vez, medir de nuevo en vez de heredar el número. */
.pn-fb img { position: absolute; top: .2em; left: 50%; transform: translateX(-50%);
  width: auto; height: 14.8em; max-width: none;
  image-rendering: pixelated; filter: drop-shadow(0 .4em .7em rgba(0,0,0,.6)); }
.pn-name {
  text-align: center; font-size: 2.1em; font-weight: 900; letter-spacing: -.01em;
  color: var(--ink); text-transform: uppercase; margin: .35em 0 .1em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pn-name.largo { font-size: 1.5em; }
.pn-sep { display: flex; align-items: center; gap: .5em; margin: .55em 0 .2em; }
.pn-sep::before, .pn-sep::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--acc)); opacity: .45; }
.pn-sep::after { background: linear-gradient(90deg, var(--acc), transparent); }
.pn-sep i { width: .55em; height: .55em; background: var(--acc); transform: rotate(45deg); border-radius: .1em; }

.pn-stats { display: grid; grid-template-columns: repeat(3, 1fr); }
.pn-stats > div {
  display: grid; justify-items: center; gap: .1em; padding: .7em .2em .5em;
  border-right: 1px solid rgba(255,255,255,.1);
}
.pn-stats > div:nth-child(3n) { border-right: 0; }
.pn-stats > div:nth-child(-n+3) { border-bottom: 1px solid rgba(255,255,255,.1); }
.pn-stats b { font-size: 1.75em; font-weight: 900; color: var(--acc); line-height: 1; }
.pn-stats span { font-size: 1em; font-weight: 800; color: var(--sub); letter-spacing: .05em; }
.pn-stats svg { width: 1.5em; height: 1.5em; fill: var(--acc2); margin-top: .15em; }

.pn-foot {
  display: flex; align-items: center; justify-content: space-between; gap: .6em;
  margin-top: .9em; padding: .7em .8em; border-radius: 1.1em; background: rgba(0,0,0,.3);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}
.pn-estado {
  display: inline-flex; align-items: center; gap: .35em; padding: .45em .8em; border-radius: .7em;
  font-size: 1em; font-weight: 900; letter-spacing: .02em;
  background: rgba(55,194,74,.18); color: #7ee79a;
}
.pn-estado.libre { background: rgba(247,201,72,.18); color: #ffd979; }
/* presidente: violeta, para que no se confunda ni con "libre" (dorado) ni con
   "con equipo" (verde). No está en el mercado: dirige un club. */
.pn-estado.presi { background: rgba(139,92,246,.22); color: #c4b5fd; }
.pn-valor { text-align: right; line-height: 1.15; }
.pn-valor b { font-size: 1.55em; font-weight: 900; color: #6ee7a0; }
.pn-valor b small { font-size: .62em; font-weight: 800; }
.pn-valor span { display: block; font-size: .85em; font-weight: 800; color: var(--sub); letter-spacing: .05em; }

/* ------------- rarezas: cada tramo de media tiene su carta -------------
   LOS TRAMOS DE VERDAD los decide nivel() en app.js, y son estos:
     menos de 70 = bronce · 70-79 = plata · 80-89 = oro
     90-99 = elite · 100 = cien
   Estos comentarios estuvieron mal un tiempo (decían bronce 70-79, plata
   80-84, oro 85-89) y por eso nadie vio que el mercado pintaba los números
   con otra escala. Si cambiás un tramo, cambialo en nivel() y actualizá esto. */
/* sin uso: nivel() nunca devuelve "comun". Se deja por si vuelve un tramo bajo. */
.pcard-new.n-comun { --acc:#aeb6bc; --acc2:#8b959d; --bg1:#3a4045; --bg2:#191c1f; --sub:#8d99a4; }

/* ---------------------------- DE TRAJE -----------------------------------
   La carta de presidente. Es el mismo molde que las otras: solo cambia la
   paleta, porque el nivel de una carta ya se pinta con variables. Negro de
   esmoquin, filo dorado y el marfil de la camisa para los números. */
.pcard-new.n-presi {
  --acc:#f0ead6; --acc2:#c9a227; --ink:#f6f2e6; --sub:#a09781;
  --bg1:#232326; --bg2:#08080a; --edge: rgba(201,162,39,.42);
}
/* la solapa: una diagonal dorada tenue, que es lo que lee como saco */
.pcard-new.n-presi::after {
  content: ""; position: absolute; left: -20%; top: -10%; width: 60%; height: 130%;
  background: linear-gradient(105deg, transparent 46%, rgba(201,162,39,.10) 47%, transparent 55%);
  pointer-events: none;
}
.pn-presi-sello { display: grid; gap: .15em; line-height: 1; }
.pn-presi-sello span { font-size: 2.6em; }
.pn-presi-sello b {
  font-size: .95em; font-weight: 900; letter-spacing: .14em; color: var(--acc2);
}
.pn-presi-datos { display: grid; grid-template-columns: repeat(3, 1fr); }
.pn-presi-datos > div {
  display: grid; place-items: center; gap: .15em; padding: .75em .3em;
  border-right: 1px solid rgba(255,255,255,.1);
}
.pn-presi-datos > div:last-child { border-right: 0; }
.pn-presi-datos b { font-size: 1.45em; font-weight: 900; color: var(--acc); line-height: 1; }
.pn-presi-datos span { font-size: .95em; font-weight: 800; color: var(--sub); letter-spacing: .05em; text-align: center; }
/* en la de presidente el pie lleva el nombre del club, que puede ser largo */
.pcard-new.n-presi .pn-estado { max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* el botón de dar vuelta la carta */
/* --------------------- ACCIONES DEL PERFIL --------------------------------
   Antes eran ocho botones grises iguales en fila. Se leían como una lista sin
   jerarquía: el que hay que tocar y el que casi nunca se toca pesaban lo
   mismo, y ninguno decía para qué servía.
   Ahora cada uno es una ficha con icono y una línea de explicación. Se acomodan
   solas: entran las que entren por fila y bajan el resto. */
.pf-acciones {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: 10px; margin-top: 18px;
}
.pf-act {
  display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto;
  column-gap: 11px; align-items: center;
  padding: 12px 14px; border-radius: 14px; text-align: left;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--txt); font-family: var(--font); cursor: pointer;
  transition: transform .16s, border-color .16s, background .16s;
}
.pf-act:hover { transform: translateY(-2px); border-color: var(--line-soft); background: var(--panel); }
.pf-act .pf-ico { grid-row: 1 / 3; font-size: 21px; line-height: 1; }
.pf-act b { font-size: 13.5px; font-weight: 800; line-height: 1.25; }
.pf-act i { font-style: normal; font-size: 11.5px; color: var(--txt-mute); line-height: 1.3; }
/* la que hay que tocar sí o sí: verde, para que se vea primero */
.pf-act.destacada { border-color: rgba(55,194,74,.55); background: rgba(55,194,74,.10); }
.pf-act.destacada b { color: var(--grass); }
/* las de rol (presidente, scout, admin) van en dorado: no las tiene todo el mundo */
.pf-act.rol { border-color: rgba(247,201,72,.34); }
.pf-act.rol b { color: var(--gold); }

/* Salir NO es una acción del perfil: es irse. Va abajo, chica y aparte, para
   que no se toque de rebote mientras se busca otra cosa. */
.pf-salir {
  margin-top: 12px; padding: 7px 14px; border-radius: 999px;
  background: transparent; border: 1px solid rgba(229,72,77,.35);
  color: var(--danger, #e5484d); font-size: 12.5px; font-weight: 700;
  font-family: var(--font); cursor: pointer; transition: background .16s;
}
.pf-salir:hover { background: rgba(229,72,77,.12); }

/* La respuesta de la FAQ dentro de la conversación del bot. Trae su HTML
   propio (negritas, saltos, links), así que hay que darle aire y que los
   links no se pierdan sobre el fondo oscuro de la burbuja. */
.crm-resp { font-size: 13px; line-height: 1.6; color: var(--txt-dim); }
.crm-resp b { color: var(--txt); }
.crm-resp a { color: var(--grass); }

/* ------------------------ PARTIDOS (dashboard) ---------------------------
   Programar arriba, la lista abajo, y adentro de cada partido las dos
   alineaciones lado a lado. En pantalla chica se apilan. */
/* ⚠️ Eran siete casilleros en una sola fila de auto-fit: entraban todos
   apretados a 140px, los nombres de club quedaban cortados y el botón se salía
   del panel. Ahora los campos envuelven de a 165px y el botón se lleva su
   propia fila.
   El `min-width: 0` es lo que de verdad frena el desborde: sin él, un item de
   grid nunca se achica por debajo del ancho de su contenido, así que un
   <select> con "Associazione Cofla Calcio" adentro empujaba a los de al lado
   afuera del panel. */
.pd-form {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px 12px; align-items: end; padding: 12px 16px 14px;
}
.pd-form > * { min-width: 0; }
/* El min-width tiene que ir tambien en el INPUT, no solo en su label.
   Un <input type="datetime-local"> trae un ancho intrinseco propio —medido:
   237px— y no se achica por debajo de eso aunque tenga width:100%, asi que se
   salia 58px de su columna y se montaba encima del casillero de al lado. */
.pd-form .f-input { width: 100%; min-width: 0; }
/* Y ademas se le da lugar de verdad: achicarlo a la fuerza lo dejaba andando
   pero con la hora cortada, que es cambiar un problema por otro. Con dos
   columnas mide 319 y entra entero. */
.pd-form .pd-fecha { grid-column: span 2; }
.pd-form .btn { grid-column: 1 / -1; justify-self: start; height: 38px; }
.pd-msg { grid-column: 1 / -1; }
.pd-msg, .pd-msg2 { font-size: 12.5px; font-weight: 700; align-self: center; }
.pd-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.pd-lados { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .pd-lados { grid-template-columns: 1fr; } }
.pd-lado h4 { font-size: 13px; margin: 0 0 8px; color: var(--txt-dim); }
.pd-jug {
  display: grid; grid-template-columns: 1fr 62px 62px 34px; gap: 6px;
  align-items: center; padding: 5px 0; border-bottom: 1px solid var(--line);
}
.pd-jug:last-child { border-bottom: 0; }
.pd-check { display: flex; align-items: center; gap: 7px; font-size: 13px; cursor: pointer; }
.pd-check i { font-style: normal; font-size: 11px; color: var(--txt-mute); }
.pd-jug .f-input { padding: 5px 7px; font-size: 12.5px; text-align: center; }
.pd-mvp { cursor: pointer; text-align: center; font-size: 14px; }
.pd-mvp input { display: none; }
.pd-mvp { opacity: .3; transition: opacity .15s; }
.pd-mvp:has(input:checked) { opacity: 1; }
.pd-acts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 14px; }

/* La línea con TUS datos, arriba de la respuesta del bot. Va destacada
   porque es lo que la persona vino a saber: el reglamento de abajo es el
   respaldo de por qué. */
.ay-dato {
  margin: 6px 0 8px; padding: 8px 10px; border-radius: 9px;
  background: rgba(55,194,74,.12); border-left: 3px solid var(--grass);
  font-size: 13px; line-height: 1.5;
}
.ay-dato b { color: var(--grass); }

/* ------------------------ EL CARTEL DE "EN VIVO" -------------------------
   Va ARRIBA de la barra y en el flujo normal: empuja en vez de tapar. Los
   flotantes de esta web (ayuda, tickets) ya se pisaron una vez entre ellos y
   con el botón del hero, y no vale la pena sumar otro a esa pelea. */
.envivo {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 9px 16px; text-decoration: none; position: relative; overflow: hidden;
  background: linear-gradient(90deg, #7b2ff7 0%, #9146ff 45%, #7b2ff7 100%);
  color: #fff; font-weight: 800; font-size: 13.5px; letter-spacing: .2px;
}
.envivo:hover { filter: brightness(1.12); }
.envivo b { letter-spacing: .12em; }
.envivo-txt { font-weight: 600; opacity: .92; }
.envivo-cta {
  font-weight: 800; background: rgba(0,0,0,.24); padding: 3px 10px; border-radius: 999px;
}
/* el punto que late: es lo que hace que se lea "ahora" y no "hubo" */
.envivo-punto {
  width: 9px; height: 9px; border-radius: 50%; background: #ff4d4d; flex: none;
  box-shadow: 0 0 0 0 rgba(255,77,77,.75); animation: ev-latido 1.6s infinite;
}
@keyframes ev-latido {
  0%   { box-shadow: 0 0 0 0 rgba(255,77,77,.75); }
  70%  { box-shadow: 0 0 0 9px rgba(255,77,77,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,77,77,0); }
}
/* el brillo que cruza: movimiento sin marear */
.envivo::after {
  content: ""; position: absolute; inset: 0 auto 0 -40%; width: 40%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  animation: ev-brillo 3.4s linear infinite; pointer-events: none;
}
@keyframes ev-brillo { to { left: 110%; } }
/* En pantalla chica sobra el detalle: quedan el punto, EN VIVO y el botón. */
@media (max-width: 620px) { .envivo-txt { display: none; } }
/* Si alguien pidió menos animación en su sistema, se respeta. */
@media (prefers-reduced-motion: reduce) {
  .envivo-punto, .envivo::after { animation: none; }
  .envivo::after { display: none; }
}

/* el botón de Twitch de la barra, encendido mientras hay stream. La barra es
   sticky, así que esto sigue viéndose cuando el cartel ya quedó arriba. */
.btn-twitch.twitch-vivo {
  background: #e5484d !important; border-color: #e5484d !important; color: #fff !important;
  animation: ev-latido 1.6s infinite;
}

/* el panel del dashboard */
.ev-panel.prendido { border-color: rgba(145,70,255,.6); }
.ev-form { display: flex; gap: 10px; align-items: end; flex-wrap: wrap; padding: 12px 16px 14px; }
.ev-form > * { min-width: 0; }
.ev-msg { font-size: 12.5px; font-weight: 700; align-self: center; }

.carta-flip { display: grid; justify-items: center; gap: 10px; }
.carta-flip-btn { font-size: 13px; padding: 8px 14px; }
/* menos de 70 - bronce cobre */
.pcard-new.n-bronce { --acc:#e0955c; --acc2:#b9713c; --bg1:#4c3527; --bg2:#22150d; --sub:#bda28e;
  box-shadow: 0 1.6em 3em -1.2em rgba(0,0,0,.75), inset 0 0 0 1px rgba(224,149,92,.3); }
/* 70-79 - plata brillante */
.pcard-new.n-plata { --acc:#eef4f9; --acc2:#b9c6d2; --sub:#aebac6;
  background: linear-gradient(150deg,#5b6771 0%,#242b31 30%,#6d7b86 52%,#1f252a 74%,#454f58 100%);
  box-shadow: 0 1.6em 3em -1.2em rgba(0,0,0,.75), inset 0 0 0 1px rgba(230,240,250,.35); }
/* 80-89 - oro reluciente */
.pcard-new.n-oro { --acc:#ffd23f; --acc2:#d9a300; --sub:#c9b072;
  background: linear-gradient(150deg,#7d5f14 0%,#3a2b07 32%,#9c7717 52%,#2e2205 74%,#664c11 100%);
  animation: nGlowOro 3.2s ease-in-out infinite; }
/* 90-99 - elite: oro con toques celestes */
.pcard-new.n-elite { --acc:#ffe066; --acc2:#6fd8ff; --sub:#cbbf8e;
  background: linear-gradient(150deg,#8a6a15 0%,#2c3550 28%,#a8811a 50%,#1d2b3f 72%,#6d5411 100%);
  animation: nGlowElite 2.8s ease-in-out infinite; }
/* 100 - unica */
.pcard-new.n-cien { --acc:#8ef0ff; --acc2:#ffd23f; --sub:#a9d8e4;
  background: linear-gradient(140deg,#0e4a5c 0%,#134a72 22%,#3a2f6e 46%,#8a6a18 68%,#0c1a2e 100%);
  background-size: 300% 300%;
  animation: nHolo 6s ease-in-out infinite, nGlowCien 2.4s ease-in-out infinite; }
.pcard-new.n-cien .pn-media b { background: linear-gradient(180deg,#d9f8ff,#8ef0ff 45%,#ffd23f);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* ⚠️ EN UNA CARTA CON MARCO, ESTE BARRIDO NO VA. Es una franja inclinada que
   mide 150% de alto y arranca en left:-75%, y funciona porque la carta recorta
   lo que sobra. Las cartas con marco dejaron de recortar (el dibujo asoma por
   fuera), asi que la franja se escapaba y cruzaba la pantalla entera iluminando
   el estadio. Con marco el movimiento ya lo pone el marco, asi que se apaga.
   El `:not` es para no pisar el fondo, que usa este mismo ::after. */
.pcard-new[class*="pc-marco-"]:not([class*="pc-fondo-"])::after { display: none; }

/* destello que barre las cartas altas */
.pcard-new.n-oro::after, .pcard-new.n-elite::after, .pcard-new.n-cien::after {
  content: ""; position: absolute; top: -25%; left: -75%; width: 45%; height: 150%; z-index: 2;
  transform: skewX(-16deg); pointer-events: none;
  background: linear-gradient(100deg, transparent 15%, rgba(255,255,255,.26), transparent 85%);
  animation: nSweep 4.6s ease-in-out 1s infinite;
}
.pcard-new.n-cien::after { animation-duration: 2.9s;
  background: linear-gradient(100deg, transparent 12%, rgba(180,244,255,.5), rgba(255,255,255,.4), rgba(255,224,120,.4), transparent 88%); }

@keyframes nGlowOro   { 0%,100%{box-shadow:0 1.6em 3em -1.2em rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,214,90,.32), 0 0 1.4em -.7em rgba(255,205,60,.5)}
                        50%    {box-shadow:0 1.6em 3em -1.2em rgba(0,0,0,.75), inset 0 0 0 1px rgba(255,214,90,.62), 0 0 2.4em -.3em rgba(255,205,60,.85)} }
@keyframes nGlowElite { 0%,100%{box-shadow:0 1.6em 3em -1.2em rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,224,102,.36), 0 0 1.6em -.7em rgba(111,216,255,.45)}
                        50%    {box-shadow:0 1.6em 3em -1.2em rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,224,102,.72), 0 0 2.8em -.3em rgba(111,216,255,.8)} }
@keyframes nGlowCien  { 0%,100%{box-shadow:0 1.6em 3em -1.1em rgba(0,0,0,.85), inset 0 0 0 1px rgba(142,240,255,.42), 0 0 2em -.7em rgba(102,230,255,.6)}
                        50%    {box-shadow:0 1.6em 3em -1.1em rgba(0,0,0,.85), inset 0 0 0 1px rgba(160,245,255,.9), 0 0 3.4em -.2em rgba(102,230,255,.95)} }
@keyframes nHolo  { 0%,100%{background-position:0% 50%} 50%{background-position:100% 50%} }
@keyframes nSweep { 0%{left:-75%} 55%{left:135%} 100%{left:135%} }

.pcard-top { display: flex; justify-content: space-between; align-items: flex-start; }
.pcard-rating { text-align: center; line-height: 1; }
.pcard-rating .n { font-size: 40px; font-weight: 900; color: var(--accent); text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.pcard.tier-cien .pcard-rating .n {
  background: linear-gradient(180deg, #d4f7ff, #66e6ff 46%, #ffd23f);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  filter: drop-shadow(0 2px 7px rgba(102,230,255,.6));
}
.pcard.tier-cien .pcard-name { text-shadow: 0 0 14px rgba(102,230,255,.55); }
.pcard-rating .p { font-size: 13px; font-weight: 800; color: var(--txt); letter-spacing: 1px; margin-top: 2px; }
.pcard-flag { font-size: 22px; }
.pcard-tag {
  font-size: 11px; font-weight: 800; letter-spacing: 1px; color: var(--txt-dim);
  padding: 3px 7px; border-radius: 6px; background: rgba(0,0,0,.3);
}
.pcard-avatar { display: grid; place-items: center; margin: 6px 0 8px; }
.pcard-name {
  text-align: center; font-weight: 900; font-size: 20px; letter-spacing: .3px;
  text-transform: uppercase; margin-bottom: 12px;
}
.pcard-attrs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px 4px;
  border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px;
}
.pcard-attrs .a { text-align: center; }
.pcard-attrs .a b { display: block; font-size: 17px; font-weight: 900; }
.pcard-attrs .a span { font-size: 10.5px; color: var(--txt-dim); font-weight: 700; letter-spacing: .5px; }
.pcard-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 13px; font-size: 12.5px; }
.pcard-value { font-weight: 900; color: var(--accent); }
.pcard-value small { color: var(--txt-mute); font-weight: 700; }

/* --------------------------- SECCIONES ---------------------------------- */
.block { padding: 40px 0; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 16px; }
.sec-head h2 { font-size: 26px; font-weight: 900; letter-spacing: -.4px; display: flex; align-items: center; gap: 10px; }
.sec-head h2 .bar { width: 6px; height: 24px; border-radius: 3px; background: var(--grass); display: inline-block; }
.sec-head p { color: var(--txt-mute); font-size: 14px; }
.sec-head a.more { color: var(--grass); font-weight: 700; font-size: 14px; }

.grid-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 22px; justify-items: center; }

.two-col { display: grid; grid-template-columns: 1.3fr 1fr; gap: 26px; align-items: start; }

/* panel genérico */
.panel {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow);
}
.panel-head { display: flex; align-items: center; justify-content: space-between; padding: 15px 18px; border-bottom: 1px solid var(--line-soft); }
.panel-head h3 { font-size: 16px; font-weight: 800; display: flex; align-items: center; gap: 9px; }

/* ------------------------------ FEED ------------------------------------ */
.feed { display: flex; flex-direction: column; }
.feed-row { display: flex; align-items: center; gap: 13px; padding: 13px 18px; border-bottom: 1px solid var(--line-soft); transition: .15s; }
.feed-row:last-child { border-bottom: none; }
.feed-row:hover { background: rgba(255,255,255,.02); }
.feed-ic { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; font-size: 16px; flex: none; }
.feed-txt { flex: 1; font-size: 14px; }
.feed-txt b { font-weight: 800; }
.feed-txt .muted { color: var(--txt-mute); }
.feed-time { color: var(--txt-mute); font-size: 12px; white-space: nowrap; }
.feed-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase; padding: 3px 7px; border-radius: 6px; }

/* colores por tipo de movimiento */
.mv-fichaje   { background: rgba(55,194,74,.14);  color: var(--grass); }
.mv-oferta    { background: rgba(69,211,255,.14);  color: var(--diamond); }
.mv-libre     { background: rgba(247,201,72,.14);  color: var(--gold); }
.mv-transferible { background: rgba(239,68,68,.14); color: #fca5a5; }
.mv-renovacion { background: rgba(139,92,246,.16); color: #c4b5fd; }
.mv-cedido    { background: rgba(148,163,184,.14); color: #cbd5e1; }

/* ------------------------------ TABLA ----------------------------------- */
table.liga { width: 100%; border-collapse: collapse; font-size: 14px; }
table.liga th { text-align: right; color: var(--txt-mute); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; padding: 12px 10px; font-weight: 700; }
table.liga th.l, table.liga td.l { text-align: left; }
table.liga td { padding: 11px 10px; text-align: right; border-top: 1px solid var(--line-soft); }
table.liga tr:hover td { background: rgba(255,255,255,.02); }
table.liga .pos { color: var(--txt-mute); width: 26px; font-weight: 800; }
table.liga .team-cell { display: flex; align-items: center; gap: 10px; font-weight: 700; }
table.liga .pts { font-weight: 900; color: var(--grass); }
table.liga tr.top .pos { color: var(--gold); }

.team-crest { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; font-size: 11px; font-weight: 900; flex: none; box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }

/* --------------------------- MERCADO (lista) ---------------------------- */
.market-head { padding: 46px 0 8px; }
.market-head h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 900; letter-spacing: -1px; }
.market-head p { color: var(--txt-dim); margin-top: 8px; font-size: 16px; }
.market-banner {
  display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 12px 16px;
  border-radius: 12px; background: rgba(55,194,74,.1); border: 1px solid rgba(55,194,74,.28); font-weight: 700; font-size: 14.5px;
}

.toolbar { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin: 22px 0 18px; }
.search { flex: 1; min-width: 220px; position: relative; }
.search input {
  width: 100%; padding: 12px 14px 12px 40px; border-radius: 11px; font-size: 15px;
  background: var(--panel); border: 1px solid var(--line); color: var(--txt); outline: none; transition: .15s;
}
.search input:focus { border-color: var(--grass-dk); box-shadow: 0 0 0 3px rgba(55,194,74,.15); }
.search .ic { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--txt-mute); }
.select {
  padding: 11px 14px; border-radius: 11px; background: var(--panel); border: 1px solid var(--line);
  color: var(--txt); font-size: 14px; font-weight: 600; outline: none; cursor: pointer;
}
.select:focus { border-color: var(--grass-dk); }
.count-tag { color: var(--txt-mute); font-size: 13.5px; font-weight: 600; margin-left: auto; }

/* la plata de cada club en la lista del dashboard: es el dato que hay que
   mirar antes de aprobar un fichaje, y no estaba en ningún lado */
.acc-saldo { color: var(--gold); font-weight: 800; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.acc-saldo i { font-style: normal; font-size: 11px; color: var(--txt-mute); font-weight: 700; }

/* filas de jugadores */
.plist { display: flex; flex-direction: column; gap: 8px; }
.prow {
  display: grid; grid-template-columns: 44px 1.6fr 84px 1fr 1fr 110px 34px; align-items: center; gap: 14px;
  padding: 11px 16px; background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line-soft); border-radius: 12px; transition: .15s; cursor: pointer;
}
.prow:hover { border-color: var(--grass-dk); transform: translateX(3px); box-shadow: -6px 0 0 -3px var(--grass); }
.prow-media { text-align: center; }
.prow-media .m { font-size: 22px; font-weight: 900; line-height: 1; }
/* El número de media en las listas usa los MISMOS tramos y los MISMOS colores
   que la carta (ver .pcard-new.n-* más arriba): lo que se ve en el mercado
   tiene que coincidir con lo que se ve al abrir la ficha. Los nombres van en
   español igual que las clases de la carta, para que se note si se separan. */
.prow-media .m.t-cien   { color: #8ef0ff; text-shadow: 0 0 10px rgba(142,240,255,.5); }
.prow-media .m.t-elite  { color: #ffe066; }
.prow-media .m.t-oro    { color: #ffd23f; }
.prow-media .m.t-plata  { color: #eef4f9; }
.prow-media .m.t-bronce { color: #e0955c; }
.prow-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.prow-id .nm { min-width: 0; }
.prow-id .nm b { font-weight: 800; font-size: 15.5px; display: flex; align-items: center; gap: 7px; }
.prow-id .nm span { color: var(--txt-mute); font-size: 12.5px; }
.pos-chip { font-size: 11px; font-weight: 800; padding: 4px 8px; border-radius: 7px; background: rgba(255,255,255,.06); color: var(--txt-dim); letter-spacing: .5px; text-align: center; }
.pos-POR { background: rgba(247,201,72,.14); color: var(--gold); }
.pos-DEF { background: rgba(69,211,255,.14); color: var(--diamond); }
.pos-LAT { background: rgba(69,211,255,.12); color: var(--diamond); }
.pos-MED, .pos-MC { background: rgba(55,194,74,.14); color: var(--grass); }
.pos-EXT { background: rgba(139,92,246,.16); color: #c4b5fd; }
.pos-DEL { background: rgba(239,68,68,.14); color: #fca5a5; }
.prow-team { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--txt-dim); font-weight: 600; min-width: 0; }
.prow-team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.estado-chip { font-size: 11.5px; font-weight: 700; padding: 5px 9px; border-radius: 999px; white-space: nowrap; }
.e-con { background: rgba(148,163,184,.12); color: #cbd5e1; }
.e-libre { background: rgba(247,201,72,.14); color: var(--gold); }
/* Rechazada NO es lo mismo que cancelada: a una la bajó alguien a propósito y
   la otra se cayó sola cuando el jugador cerró con otro club. Compartían el
   dorado y se confundían de un vistazo. */
.e-rechazada { background: rgba(229,72,77,.16); color: #ff8b8f; }
.e-presi { background: rgba(139,92,246,.16); color: #c4b5fd; }
/* Amistoso confirmado (fase 81). Verde porque es lo único de esa lista que ya
   es un hecho: los demás estados todavía esperan que alguien decida. */
.e-confirmado { background: rgba(55,194,74,.16); color: #7ee89a; }
/* ---- Top estadísticas: el recuadro que rota solo ----
   Toma el ANCHO COMPLETO del panel de líderes y muestra dos rankings a la vez.
   Antes ocupaba una sola columna y al lado quedaba medio panel vacío. */
.top-attrs { grid-column: 1 / -1; }
.top-attrs h4 { display: flex; align-items: center; gap: .5em; flex-wrap: wrap; }
.top-attrs .ta-cual {
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  color: var(--grass); background: rgba(55,194,74,.14);
  padding: 3px 8px; border-radius: 999px;
}
/* los dos rankings, uno al lado del otro */
.top-attrs .ta-par {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px;
  min-height: 168px;          /* fijo, para que el panel no salte al cambiar */
}
.top-attrs .ta-col { min-width: 0; }
.top-attrs .ta-col h5 {
  margin: 0 0 2px; padding: 0 4px;
  font-size: 11px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase;
  color: var(--txt-mute);
}

/* flechas + puntitos */
.top-attrs .ta-nav { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 8px 0 2px; }
.top-attrs .ta-flecha {
  background: none; border: 0; cursor: pointer; padding: 2px 8px; line-height: 1;
  font-size: 17px; font-weight: 900; color: var(--txt-mute);
  border-radius: 7px; transition: color .18s, background .18s;
}
.top-attrs .ta-flecha:hover { color: var(--grass); background: rgba(55,194,74,.12); }
.top-attrs .ta-puntos { display: flex; gap: 5px; }
.top-attrs .ta-puntos i {
  width: 5px; height: 5px; border-radius: 50%; background: var(--line);
  transition: background .25s, transform .25s;
}
.top-attrs .ta-puntos i.on { background: var(--grass); transform: scale(1.35); }

/* entrada suave al cambiar de ranking */
@keyframes taEntra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.top-attrs .ta-par.ta-entra { animation: taEntra .28s ease-out; }

/* en celular los dos rankings no entran al lado: van uno abajo del otro */
@media (max-width: 560px) {
  .top-attrs .ta-par { grid-template-columns: 1fr; min-height: 0; gap: 10px; }
}

/* quien pidió menos movimiento no ve la animación (la rotación igual se frena
   sola al pasar el mouse por encima, y están las flechas) */
@media (prefers-reduced-motion: reduce) {
  .top-attrs .ta-par.ta-entra { animation: none; }
  .top-attrs .ta-puntos i, .top-attrs .ta-flecha { transition: none; }
}

/* ---- flechitas de variación de atributos (fase 32) ----
   Tres intensidades según el tamaño del salto: f1 es un retoque de 1-2
   puntos, f2 de 3-4 y f3 de 5 o más. Se van apagando a los 7 días, eso lo
   decide varAttr() en app.js. Van en em para que en la carta escalen junto
   con ella y en la ficha queden al tamaño del texto. */
.attr-var {
  font-style: normal; font-weight: 900; font-size: .62em; line-height: 1;
  margin-left: .3em; letter-spacing: -.02em; vertical-align: .18em;
  white-space: nowrap;
}
.attr-var.sube.f1 { color: #86c9a0; }
.attr-var.sube.f2 { color: #4fd483; }
.attr-var.sube.f3 { color: #14e05e; text-shadow: 0 0 .5em rgba(20,224,94,.55); }
.attr-var.baja.f1 { color: #d9a08a; }
.attr-var.baja.f2 { color: #f0724f; }
.attr-var.baja.f3 { color: #ff2d2d; text-shadow: 0 0 .5em rgba(255,45,45,.55); }

/* en la ficha el número del atributo es más grande, así que la flecha también */
.attr-bar .top b .attr-var { font-size: .7em; }

/* ============================ LA CANCHA (fase 39) =======================
   Proporción 3:4 con aspect-ratio para que se vea igual en cualquier ancho:
   si la cancha cambiara de forma, una formación armada en la compu quedaría
   deformada en el celular. */
/* Angosta y centrada, como se ve en el celular.
   El max-width es lo que faltaba: con solo width:100% y aspect-ratio 3/4, en
   la ficha del club —que va a todo el ancho— la cancha terminaba midiendo
   como 1500 x 2000 px y se comía la pantalla entera. */
/* ---- el armador ----
   Tres columnas: banca izquierda, cancha, banca derecha. Antes era solo la
   cancha centrada y a los costados quedaban dos manchas verdes vacías del
   ancho de media pantalla, con los suplentes escondidos en una barra abajo.
   Los costados son además zona para soltar: se arrastra una carta ahí y sale
   de la cancha. */
.armador {
  padding: 14px;
  display: grid; grid-template-columns: 1fr minmax(300px, 400px) 1fr;
  gap: 16px; align-items: start;
}
.armador .banca-barra { grid-column: 1 / -1; }
.cancha { width: 100%; max-width: 400px; margin-inline: auto; }

.banca-lado { display: grid; gap: 12px; align-content: start; min-width: 0; }
.bl-grupo {
  background: rgba(255,255,255,.03); border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 9px 10px 11px;
}
.bl-tit {
  font-size: 11.5px; font-weight: 800; color: var(--txt-dim);
  letter-spacing: .3px; margin-bottom: 8px; display: flex; gap: 6px; align-items: center;
}
.bl-tit span {
  background: rgba(255,255,255,.07); color: var(--txt-mute);
  border-radius: 999px; padding: 1px 7px; font-size: 10.5px;
}
.bl-cartas { display: flex; flex-wrap: wrap; gap: 8px; }
.bl-vacio { color: var(--txt-mute); font-size: 12px; padding: 4px 2px; }

/* En pantallas angostas los costados no entran: se apila todo y vuelve a
   mandar la barra de abajo, que es la que ya funcionaba en celular. */
@media (max-width: 900px) {
  .armador { grid-template-columns: 1fr; }
  .banca-lado { display: none; }
}
/* Y al revés: con los costados a la vista, la tira de abajo repetiría los
   mismos suplentes. Se esconde la LISTA, no la barra, porque ahí siguen
   viviendo Guardar, Vaciar y el mensaje. */
@media (min-width: 901px) {
  .banca-barra .banca-lista { display: none; }
}

/* encabezado: el dibujo táctico y la media del once */
.cancha-top {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 8px 12px; margin-bottom: 8px; border-radius: 10px;
  background: rgba(255,255,255,.04); border: 1px solid var(--line-soft);
  font-size: 11.5px; font-weight: 700; color: var(--txt-mute);
  letter-spacing: .04em; text-transform: uppercase;
}
.cancha-top b { color: var(--grass); font-size: 14px; margin-left: .4em; }

/* ---- la barra de suplentes, abajo de la cancha ---- */
.banca-barra {
  max-width: 400px; margin: 12px auto 0;
  border: 1px solid var(--line); border-radius: 12px;
  background: rgba(255,255,255,.02); overflow: hidden;
}
.banca-tog {
  width: 100%; text-align: left; cursor: pointer;
  background: rgba(255,255,255,.04); border: 0; padding: 10px 14px;
  font-family: inherit; font-size: 12px; font-weight: 800; color: var(--txt-dim);
  letter-spacing: .08em; text-transform: uppercase;
}
.banca-tog:hover { color: var(--grass); }
.banca-tog .bt-flecha { display: inline-block; transition: transform .2s; }
.banca-barra.plegada .bt-flecha { transform: rotate(-90deg); }
.banca-barra.plegada .banca-cuerpo { display: none; }
.banca-cuerpo { padding: 12px; }
.banca-acciones { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.banca-acciones #msgForm { font-size: 13px; font-weight: 700; }

@media (prefers-reduced-motion: reduce) { .banca-tog .bt-flecha { transition: none; } }
.cancha-cesped {
  position: relative; aspect-ratio: 3 / 4; width: 100%;
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, #14401f, #0e2e17);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.13);
}
/* las franjas del césped, para que se lea como una cancha de verdad */
.cancha-cesped::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.045) 0 8%, transparent 8% 16%);
}
/* Las zonas NO se marcan con líneas punteadas ni con etiquetas siempre a la
   vista: eso ensuciaba la cancha y encima "DEFENSAS" caía justo sobre la línea
   del medio y se leía tachado. Ahora la cancha está limpia y la zona se
   ilumina, con sus tres letras, solo cuando pasás el mouse por encima. */
.cancha-zona {
  position: absolute; left: 0; right: 0;
  display: flex; align-items: center; justify-content: flex-start;
  transition: background .18s;
}
/* La palabra va PEGADA AL BORDE IZQUIERDO y en vertical, no centrada: cuando
   estaba centrada caía justo encima de la carta del jugador de esa zona y le
   tapaba el nombre. Contra el borde no le pisa nada, porque las cartas nunca
   llegan al 6% de los costados (el arrastre las limita ahí). */
.cancha-zona span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  padding: 0 3px; margin-left: 2px;
  font-size: 15px; font-weight: 900; letter-spacing: .22em;
  color: #fff; opacity: 0; transition: opacity .18s;
  text-shadow: 0 2px 12px rgba(0,0,0,.9);
}
.cancha-zona:hover { background: rgba(255,255,255,.09); }
.cancha-zona:hover span { opacity: .95; }

/* La franja del arquero coincide con el área chica de abajo: así "el arquero
   va dentro del área" se ve, no hay que explicarlo. */
.z-del { top: 0;   height: 30%; }
.z-med { top: 30%; height: 25%; }
.z-def { top: 55%; height: 25%; }
.z-arq { top: 80%; height: 20%; }

@media (prefers-reduced-motion: reduce) {
  .cancha-zona, .cancha-zona span { transition: none; }
}

.cancha-lineas i { position: absolute; border: 2px solid rgba(255,255,255,.18); }
.l-medio { left: 0; right: 0; top: 50%; border-width: 0 0 2px; }
.l-circulo { left: 50%; top: 50%; width: 22%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%,-50%); }
/* 20% de alto para que el área coincida exacto con la franja del arquero */
.l-area { left: 25%; width: 50%; height: 20%; }
.l-area-ab { bottom: 0; border-width: 2px 2px 0; border-radius: 6px 6px 0 0; }
.l-area-ar { top: 0; border-width: 0 2px 2px; border-radius: 0 0 6px 6px; }
.cancha-lineas { position: absolute; inset: 0; pointer-events: none; }

/* la capa de jugadores no tapa el hover de las zonas, pero las cartas sí se
   agarran para arrastrar */
.cancha-jug { position: absolute; inset: 0; pointer-events: none; }
.cancha-slot { position: absolute; transform: translate(-50%,-50%); pointer-events: auto; }

/* ---- la mini-carta ---- */
.mini-c {
  display: grid; justify-items: center; gap: 1px; width: 74px; padding: 5px 4px 6px;
  border-radius: 10px; background: rgba(10,16,12,.86); cursor: grab;
  box-shadow: 0 3px 10px rgba(0,0,0,.5), inset 0 0 0 1.5px var(--acc, #37c24a);
  --acc: #37c24a;
}
.mini-c.n-bronce { --acc: #e0955c; } .mini-c.n-plata { --acc: #eef4f9; }
.mini-c.n-oro { --acc: #ffd23f; } .mini-c.n-elite { --acc: #ffe066; } .mini-c.n-cien { --acc: #8ef0ff; }
.mini-c:active { cursor: grabbing; }
.mini-c .mc-media { font-size: 13px; font-weight: 900; color: var(--acc); line-height: 1; }
.mini-c .mc-cara img, .mini-c .mc-cara svg { width: 34px; height: 34px; border-radius: 5px; display: block; }
.mini-c .mc-nom {
  font-size: 9.5px; font-weight: 800; color: #eaf2ec; max-width: 68px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* El puesto en la mini-carta: en la cancha es donde lo pararon (DFC, MCO…) y
   en la banca la posición de su ficha, que es lo que sirve para elegir a quién
   meter. Hereda los colores de .pos-* para que se lea igual que en las listas. */
.mini-c .mc-pos {
  font-size: 8.5px; font-weight: 900; letter-spacing: .4px;
  padding: 1px 5px; border-radius: 5px; line-height: 1.5;
}
.mini-c .mc-pie { display: flex; gap: 3px; align-items: center; }
.mini-c .mc-pie svg, .mini-c .mc-pie .crest-img { width: 14px !important; height: 14px !important; }

/* ---- la banca ----
   En fila y con scroll horizontal, como la tira de suplentes del FIFA: así la
   barra no crece hacia abajo por más suplentes que haya. */
.banca-lista {
  display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 8px;
  scrollbar-width: thin;
}
.banca-lista .mini-c { flex: none; }
.banca-lista:empty::after { content: "Todos en la cancha"; color: var(--txt-mute); font-size: 12.5px; padding: 8px 2px; }

/* ---- tablas del CRM ----
   Filas de una línea en vez de tabla: entran más datos a la vista y en celular
   se apilan solas sin scroll horizontal. */
.tabla-crm { display: flex; flex-direction: column; padding: 6px 0 10px; }
.crm-fila {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 16px; font-size: 13px; color: var(--txt-dim);
  border-bottom: 1px solid var(--line-soft);
}
.crm-fila:last-child { border-bottom: none; }

/* ---- lo que pasó en un partido, en la propia fila ----
   Antes había que abrir cada partido para saber quién hizo los goles, y por eso
   nadie los abría. */
.pd-resumen {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding: 0 16px 10px 112px; margin-top: -4px;
}
.pd-resumen.vacio {
  padding: 0 16px 10px 112px; color: var(--txt-mute); font-size: 12px; font-style: italic;
}
.pd-chip {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line-soft); color: var(--txt-dim);
  background: rgba(255,255,255,.03); white-space: nowrap;
}
.pd-chip.destaca { border-color: rgba(240,192,90,.4); color: #f0c05a; }
.pd-chip.apagado { color: var(--txt-mute); border-style: dashed; }
.pd-separador {
  font-size: 11px; text-transform: uppercase; letter-spacing: .07em;
  color: var(--txt-mute); padding: 14px 16px 6px;
  border-top: 1px solid var(--line-soft); margin-top: 8px;
}
@media (max-width: 640px) {
  .pd-resumen, .pd-resumen.vacio { padding-left: 16px; }
}

/* ##########################################################################
   ############  EL DASHBOARD NUEVO: LA CAPA VISUAL  ########################
   ##########################################################################

   Todo lo de acá abajo va colgado de #dash, así que NO toca el resto de la
   web: el mercado, el perfil y el diario se ven igual que siempre. Es una
   herramienta de trabajo y se le pide otra cosa que a una página que se mira.

   EL PROBLEMA QUE RESUELVE: el dashboard estaba hecho de paneles. Cada
   jugador era un panel entero —borde, degradado, sombra y cabecera de 15px— y
   con 242 jugadores eso son 242 paneles apilados. Se sentía infinito y lleno
   de cosas repetidas porque literalmente lo era.

   LA REGLA: una fila es una fila. El marco lo pone la sección, no cada cosa
   adentro de ella.
   ######################################################################## */

/* ---- los paneles: planos, sin degradado ni sombra ---- */
#dash .panel {
  background: var(--panel);
  box-shadow: none;
  border-radius: 10px;
  border-color: var(--line-soft);
}
#dash .panel-head { padding: 11px 14px; }
#dash .panel-head h3 { font-size: 14.5px; font-weight: 700; gap: 7px; }
#dash .count-tag { font-size: 11.5px; }
/* Menos aire entre secciones: eran 26px y con trece secciones son 340px de
   nada repartidos por la pantalla. */
#dash .wrap.block { padding-top: 10px; padding-bottom: 0; }

/* ---- CADA JUGADOR DEJA DE SER UN PANEL Y PASA A SER UNA FILA ---- */
#dash .dash-card {
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--line-soft);
}
#dash .dash-card:last-child { border-bottom: 0; }
#dash .dash-card > .panel-head {
  padding: 7px 12px; border-bottom: 0; gap: 10px;
}
#dash .dash-card > .panel-head h3 { font-size: 13.5px; font-weight: 600; }
#dash .dash-card:hover { background: rgba(255,255,255,.025); }
/* La que espera aprobación se marca con una línea al costado y no con un
   borde amarillo alrededor de todo: con veinte pendientes seguidas, veinte
   recuadros amarillos dejan de significar nada. */
#dash .dash-card.dash-pending {
  border-color: var(--line-soft);
  box-shadow: inset 3px 0 0 -0px rgba(247,201,72,.75);
}
#dash .dash-card.open { background: rgba(255,255,255,.03); }
#dash .dash-card .dash-form { padding: 10px 12px 14px; gap: 9px; }

/* ---- los botones adentro de una fila son chicos ---- */
#dash .dash-card .btn,
#dash .prow .btn,
#dash .crm-fila .btn { font-size: 12px; padding: 6px 11px; border-radius: 7px; }

/* ---- las filas de jugador del resto del dashboard ---- */
#dash .prow {
  background: transparent; border: 0; border-radius: 0;
  border-bottom: 1px solid var(--line-soft);
  padding: 8px 12px; gap: 12px;
}
#dash .prow:last-child { border-bottom: 0; }
/* Sin el desplazamiento ni la sombra al pasar por encima: en una lista de 242
   filas, cada una moviéndose al pasar el mouse es un temblor constante. */
#dash .prow:hover { transform: none; box-shadow: none; background: rgba(255,255,255,.03); border-color: var(--line-soft); }
#dash .prow-id .nm b { font-size: 14px; font-weight: 700; }
#dash .prow-media .m { font-size: 18px; }
#dash .test-list, #dash .test-box { padding-left: 12px; padding-right: 12px; }

/* ---- los formularios de "crear algo", detrás de un botón ----
   Crear un club se hace una vez por mes y ocupaba una pantalla entera todos
   los días. Lo que se usa siempre —la lista— va arriba y sola. */
#dash .dash-nuevo > summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 9px 14px; font-size: 13px; font-weight: 600; color: var(--txt-dim);
  border-top: 1px solid var(--line-soft);
}
#dash .dash-nuevo > summary::-webkit-details-marker { display: none; }
#dash .dash-nuevo > summary:hover { color: #4ddc86; background: rgba(77,220,134,.06); }
#dash .dash-nuevo[open] > summary { color: #4ddc86; border-bottom: 1px solid var(--line-soft); }
#dash .dash-nuevo .dash-form,
#dash .dash-nuevo .pd-form { display: grid; }

/* ---- los números grandes de las secciones, más chicos ----
   Un "3.982.500" a 34px es un cartel, no un dato: dentro de una sección de
   trabajo compite con las filas que hay que leer. */
#dash .stat-cell { padding: 11px 12px; border-radius: 9px; }
#dash .stat-cell b { font-size: 20px; }
#dash .stat-cell span { font-size: 10.5px; }
#dash .info-grid:not(.tira) { gap: 10px; margin-top: 12px; }

/* ---- los formularios de las secciones ---- */
#dash .pd-form, #dash .live-form { gap: 10px; padding: 12px 14px; }
#dash .f-label { font-size: 12.5px; }
#dash .f-input { padding: 8px 10px; font-size: 13.5px; }
/* ⚠️ EL HUECO DE LA LUPA. La regla general le deja 40px de margen a la
   izquierda para que la lupa no se coma el texto; ésta le achicaba TODO el
   relleno, incluido ese hueco, así que el texto arrancaba debajo del ícono y
   no se leía ni el "Buscar jugador..." ni lo que uno escribía. */
#dash .search input { padding: 9px 10px 9px 34px; font-size: 13.5px; }
#dash .muted-sm { font-size: 12.5px; }

/* ---- el buscador de todo y las pestañas, más juntos ---- */
#dash .dash-pest { margin-bottom: 0; }
#dash .dash-busca { margin-top: 4px; }

/* ================= LA FILA DE ARRIBA ======================================
   Buscador y números en UNA línea. Antes eran dos franjas separadas, y con la
   Bandeja y las pestañas sumaban cuatro tiras apiladas antes de ver un dato:
   las pestañas terminaban abajo del pliegue, o sea que la navegación del
   dashboard no se veía al entrar. */
#dash .dash-top {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 14px; padding-bottom: 6px;
}
/* El buscador manda y se estira; los números ocupan lo que les toca. */
#dash .dash-top .dash-busca { flex: 1 1 300px; margin: 0; }
#dash .dash-top .dash-busca input { padding: 9px 0; font-size: 14px; }
#dash .dash-top .info-grid.tira { flex: 0 1 auto; }
@media (max-width: 700px) {
  #dash .dash-top .info-grid.tira { width: 100%; }
}

/* ================= LA CABECERA DEL DASHBOARD, COMPACTA ====================
   Antes: un título de 40px que decía "Dashboard" en la página que se llama
   Dashboard, un subtítulo que explicaba lo que ya se ve, y trece recuadros
   grandes. Ochenta píxeles de nada arriba de la pantalla que más se usa.
   Ahora los números viven en una tira que se lee de un vistazo. */
.dash-cabecera { padding-top: 14px; }
.info-grid.tira {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 0;
}
.info-grid.tira .info-box {
  display: flex; align-items: baseline; gap: 7px;
  padding: 7px 12px; border-radius: 8px; min-width: 0;
  background: rgba(255,255,255,.03);
}
.info-grid.tira .info-box span {
  display: inline; margin: 0; font-size: 10.5px; letter-spacing: .04em;
  font-weight: 600; color: var(--txt-mute);
}
.info-grid.tira .info-box b { font-size: 14px; font-weight: 700; }
.info-grid.tira .info-box:hover { transform: none; background: rgba(77,220,134,.09); }

/* ================= LA ANALÍTICA =========================================== */
.an-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; }
.an-kpi {
  background: rgba(255,255,255,.03); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 13px 14px;
}
.an-kpi b { display: block; font-size: 23px; font-weight: 800; letter-spacing: -.02em; }
.an-kpi span { color: var(--txt-mute); font-size: 11.5px; }

.an-bloque { margin-top: 20px; }
.an-bloque > b { font-size: 14px; }
.an-barras { display: grid; gap: 7px; margin-top: 10px; }
.an-b {
  display: grid; grid-template-columns: minmax(96px, 150px) 1fr 52px 78px;
  gap: 10px; align-items: center; font-size: 12.5px; color: var(--txt-dim);
}
.an-b-barra { height: 9px; border-radius: 5px; background: rgba(255,255,255,.06); overflow: hidden; }
.an-b-barra i { display: block; height: 100%; background: #4ddc86; border-radius: 5px; }
/* Un escalón que se cae mucho no es "una barra más corta": es el problema. */
.an-b-barra i.cae { background: #f0787c; }
.an-b-v { text-align: right; font-family: var(--mono, ui-monospace, monospace); color: var(--txt); }
.an-b-x { text-align: right; color: var(--txt-mute); font-size: 11.5px; }
.an-aviso {
  margin-top: 12px; padding: 10px 13px; border-radius: 9px; font-size: 13px;
  background: rgba(240,120,124,.08); border: 1px solid rgba(240,120,124,.3); color: var(--txt-dim);
}
.an-aviso b { color: var(--txt); }
@media (max-width: 620px) {
  .an-b { grid-template-columns: 1fr 46px; }
  .an-b-barra, .an-b-x { grid-column: 1 / -1; }
}

/* ================= LOS SCOUTS Y SUS PAGOS ================================= */
.sc-f {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  padding: 11px 14px; border-radius: 9px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line-soft);
}
/* El que llegó a diez se marca: es el único dato que se mira de esta lista. */
.sc-f.listo { border-color: rgba(77,220,134,.4); background: rgba(77,220,134,.06); }
.sc-n b { font-size: 14.5px; }
.sc-n i, .sc-n2 i { display: block; color: var(--txt-mute); font-style: normal; font-size: 12px; margin-top: 2px; }
.sc-n2 { text-align: right; }
.sc-num {
  font-family: var(--mono, ui-monospace, monospace); font-size: 20px; font-weight: 700;
  color: var(--txt-dim);
}
.sc-num.listo { color: #4ddc86; }
.sc-acc { display: flex; gap: 6px; }
@media (max-width: 620px) {
  .sc-f { grid-template-columns: 1fr auto; }
  .sc-acc { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ================= LA FICHA ===============================================
   Un jugador en una pantalla: la carta arriba y su historia abajo. */
.ficha-res {
  margin-top: 8px; display: grid; gap: 2px; max-width: 420px;
  background: var(--card, #171b17); border: 1px solid var(--line);
  border-radius: 9px; padding: 5px;
}
.ficha-hit {
  display: flex; justify-content: space-between; gap: 10px; width: 100%;
  background: transparent; border: 0; border-radius: 6px; cursor: pointer;
  padding: 8px 10px; color: var(--txt); font-family: inherit; font-size: 13.5px; text-align: left;
}
.ficha-hit:hover { background: rgba(77,220,134,.10); }
.ficha-hit span { color: var(--txt-mute); font-size: 12px; }

.ficha-cab {
  display: grid; grid-template-columns: auto 1fr auto; gap: 20px;
  align-items: center; margin: 18px 0 4px;
}
/* La carta es la MISMA del mercado: acá solo se la achica un poco. */
.ficha-carta .pcard-new { width: 168px; transform: none; }
.ficha-nom { font-size: 21px; font-weight: 700; letter-spacing: -.01em; }
.ficha-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.mk-chip {
  font-size: 11.5px; padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--line-soft); color: var(--txt-dim);
}
.mk-chip.alerta { border-color: rgba(240,160,90,.45); color: #f0a05a; }
.ficha-cuentas { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--txt-mute); }
.ficha-cuentas b { color: var(--txt); font-size: 15px; margin-right: 3px; }
.ficha-valor { text-align: right; }
.ficha-valor b { display: block; font-size: 25px; font-weight: 800; letter-spacing: -.02em; }
.ficha-valor span { color: var(--txt-mute); font-size: 11.5px; }

.ficha-tabs { display: flex; gap: 3px; margin: 18px 0 0; border-bottom: 1px solid var(--line-soft); }
.ficha-tab {
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  padding: 8px 13px; cursor: pointer; color: var(--txt-mute);
  font-family: inherit; font-size: 13.5px; font-weight: 600;
}
.ficha-tab:hover { color: var(--txt); }
.ficha-tab.on { color: var(--txt); border-bottom-color: #4ddc86; }

.ficha-linea { display: grid; gap: 1px; margin-top: 8px; }
.fl-f {
  display: grid; grid-template-columns: 24px 1fr auto auto; gap: 12px;
  align-items: baseline; padding: 8px 10px; border-radius: 7px;
  font-size: 13.5px; color: var(--txt-dim);
}
.fl-f:hover { background: rgba(255,255,255,.03); }
.fl-f.alerta { border-left: 2px solid #f0a05a; background: rgba(240,160,90,.05); }
.fl-ex { color: var(--txt-mute); font-size: 12.5px; white-space: nowrap; }
.fl-cu { color: var(--txt-mute); font-size: 11.5px; white-space: nowrap; min-width: 62px; text-align: right; }
@media (max-width: 700px) {
  .ficha-cab { grid-template-columns: 1fr; }
  .ficha-valor { text-align: left; }
  .fl-f { grid-template-columns: 22px 1fr; }
  .fl-ex, .fl-cu { grid-column: 2; text-align: left; }
}

/* ================= LA MESA DEL EVENTO =====================================
   Una fila por participante y las seis casillas al lado. Con treinta personas
   cada columna de más es media pantalla de scroll, así que las casillas van
   angostas y el nombre se queda con lo que sobra. */
.mesa-cab, .mesa-f {
  display: grid; align-items: center; gap: 6px;
  /* ⚠️ CINCO COLUMNAS, NO DIEZ. Los seis atributos dejaron de ser seis
     columnas de la grilla y pasaron a vivir juntos en una sola celda, porque
     ahora cada uno lleva su etiqueta pegada: un arquero y un delantero no
     tienen las mismas seis, así que no pueden compartir encabezado. */
  grid-template-columns: 108px minmax(130px, 1.4fr) auto 92px 30px;
}
.mesa-cab {
  padding: 6px 8px; font-size: 10px; text-transform: uppercase;
  letter-spacing: .05em; color: var(--txt-mute);
}
.mesa-cab span { text-align: center; }
.mesa-cab span:nth-child(2) { text-align: left; }
.mesa-f {
  padding: 6px 8px; border-top: 1px solid var(--line-soft); font-size: 13px;
}
.mesa-f:hover { background: rgba(255,255,255,.02); }
.mesa-eq { width: 10px; height: 10px; border-radius: 50%; }
.mesa-n { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mesa-n i { color: var(--txt-mute); font-style: normal; font-size: 11px; margin-left: 5px; }

/* Las casillas son <input type=number> de verdad: se puede escribir el número
   o usar las flechas del teclado, que con treinta jugadores es mucho más
   rápido que apuntarle a un botón de +1. */
.mesa-a {
  width: 100%; text-align: center; font-family: var(--mono, ui-monospace, monospace);
  font-size: 13px; padding: 5px 2px; border-radius: 6px;
  background: var(--card, #171b17); border: 1px solid var(--line-soft); color: var(--txt);
  -moz-appearance: textfield; appearance: textfield;
}
.mesa-a::-webkit-outer-spin-button, .mesa-a::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.mesa-a:focus { outline: 2px solid #4ddc86; outline-offset: -1px; }
.mesa-a.cambiado { border-color: rgba(77,220,134,.55); color: #4ddc86; font-weight: 600; }

.mesa-m {
  text-align: center; font-family: var(--mono, ui-monospace, monospace);
  font-size: 12.5px; color: var(--txt-mute);
}
.mesa-m b { color: #4ddc86; }
.mesa-m.baja b { color: #f0787c; }
.mesa-x {
  background: transparent; border: 0; color: var(--txt-mute); cursor: pointer;
  font-size: 13px; padding: 4px; border-radius: 6px;
}
.mesa-x:hover { color: #f0787c; background: rgba(240,120,124,.12); }

/* En el teléfono no entran las seis columnas. Se muestran tres y el resto se
   ve girando el teléfono: preferible a apretar casillas de 20px. */
@media (max-width: 760px) {
  .mesa-cab, .mesa-f { grid-template-columns: 10px 1fr repeat(3, 46px) 66px 26px; }
  .mesa-cab span:nth-child(n+6):nth-child(-n+8),
  .mesa-f > .mesa-a:nth-of-type(n+4) { display: none; }
  .mesa-n i { display: none; }
}

/* ================= EL BUSCADOR DE TODO ====================================
   Una sola barra que busca en jugadores, clubes, tickets y negociaciones a la
   vez. Va debajo de las pestañas, ancha: es lo segundo que se usa después de
   la pantalla de Hoy. */
.dash-busca { position: relative; display: flex; align-items: center; gap: 10px;
  background: var(--card, #171b17); border: 1px solid var(--line-soft);
  border-radius: 10px; padding: 0 12px; }
.dash-busca:focus-within { border-color: rgba(77,220,134,.42); }
.db-ic { font-size: 14px; opacity: .7; flex: none; }
.dash-busca input {
  flex: 1; min-width: 0; background: transparent; border: 0; outline: none;
  color: var(--txt); font-family: inherit; font-size: 14.5px; padding: 12px 0;
}
.dash-busca input::placeholder { color: var(--txt-mute); }
.db-kbd {
  flex: none; font-family: var(--mono, ui-monospace, monospace); font-size: 11px;
  color: var(--txt-mute); border: 1px solid var(--line-soft);
  border-radius: 5px; padding: 2px 7px; background: rgba(255,255,255,.04);
}
.dash-busca:focus-within .db-kbd { opacity: 0; }

/* La lista flota por encima de las secciones: si empujara el contenido, cada
   letra que escribís movería medio dashboard. */
.db-res {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 40;
  max-height: 340px; overflow-y: auto;
  background: var(--card, #171b17); border: 1px solid var(--line);
  border-radius: 10px; box-shadow: 0 14px 40px rgba(0,0,0,.55);
  padding: 5px;
}
.db-item {
  display: grid; grid-template-columns: 78px 1fr auto; align-items: center; gap: 10px;
  width: 100%; text-align: left; cursor: pointer;
  background: transparent; border: 0; border-radius: 7px; padding: 9px 10px;
  color: var(--txt); font-family: inherit; font-size: 14px;
}
.db-item:hover, .db-item.marcado { background: rgba(77,220,134,.10); }
.db-tipo {
  font-family: var(--mono, ui-monospace, monospace); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .05em; color: var(--txt-mute);
  border: 1px solid var(--line-soft); border-radius: 999px;
  padding: 2px 0; text-align: center;
}
.db-item.marcado .db-tipo { color: #4ddc86; border-color: rgba(77,220,134,.35); }
.db-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-sub { color: var(--txt-mute); font-size: 12.5px; white-space: nowrap; }
.db-nada { padding: 14px 12px; color: var(--txt-mute); font-size: 13.5px; }
@media (max-width: 560px) {
  .db-kbd { display: none; }
  .db-item { grid-template-columns: 66px 1fr; }
  .db-sub { grid-column: 2; }
}

/* ================= LAS PESTAÑAS DEL DASHBOARD =============================
   Una barra, no un menú lateral: el dashboard ya es ancho y una columna a la
   izquierda le come el espacio donde viven las tablas. */
.dash-pest {
  display: flex; gap: 6px; flex-wrap: wrap;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 0; margin-bottom: 2px;
}
.dash-pest-b {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 15px; cursor: pointer;
  background: transparent; border: 0; border-bottom: 2px solid transparent;
  color: var(--txt-mute); font-family: inherit; font-size: 14px; font-weight: 600;
  border-radius: 8px 8px 0 0;
  transition: color .14s, background .14s, border-color .14s;
}
.dash-pest-b:hover { color: var(--txt); background: rgba(255,255,255,.04); }
.dash-pest-b:focus-visible { outline: 2px solid #4ddc86; outline-offset: -2px; }
/* La activa se marca con la línea de abajo, no con un fondo: un fondo lleno
   compite con los paneles que vienen justo debajo. */
.dash-pest-b.activa { color: var(--txt); border-bottom-color: #4ddc86; }
.pest-n {
  font-family: var(--mono, ui-monospace, monospace); font-size: 11px;
  background: rgba(255,255,255,.07); border-radius: 999px; padding: 1px 7px;
  color: var(--txt-mute); font-weight: 400;
}
.dash-pest-b.activa .pest-n { background: rgba(77,220,134,.16); color: #4ddc86; }
@media (max-width: 560px) {
  .dash-pest { gap: 2px; }
  .dash-pest-b { padding: 9px 11px; font-size: 13px; }
  .pest-n { display: none; }   /* en el teléfono el número no entra y no hace falta */
}

/* ================= LA PANTALLA DE HOY =====================================
   Lo primero del dashboard: solo lo que espera una decisión. Se distingue del
   resto con un borde de color y nada más — si tuviera un fondo llamativo
   competiría con el contenido en vez de ordenarlo. */
.hoy-panel { border-color: rgba(77,220,134,.32); }
.hoy-panel > .panel-head { border-bottom-color: rgba(77,220,134,.18); }
/* Los pendientes van EN FILA, no uno abajo del otro: son tres o cuatro cosas
   cortas, y apilados hacían que la Bandeja sola ocupara media pantalla y
   empujara todo el dashboard abajo del pliegue. */
.hoy-cuerpo {
  display: grid; gap: 6px; padding: 12px 14px 14px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  align-items: start;
}
.hoy-cuerpo > .bandeja-muro, .hoy-cuerpo > .hoy-limpio { grid-column: 1 / -1; }

.hoy-item {
  display: grid; grid-template-columns: auto 1fr auto;
  align-items: center; gap: 14px; width: 100%;
  padding: 11px 14px; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.035);
  border: 1px solid var(--line-soft);
  color: var(--txt); font-size: 14.5px; text-align: left;
  font-family: inherit;
  transition: background .14s, border-color .14s, transform .14s;
}
.hoy-item:hover { background: rgba(77,220,134,.09); border-color: rgba(77,220,134,.34); }
.hoy-item:active { transform: translateY(1px); }
.hoy-item:focus-visible { outline: 2px solid #4ddc86; outline-offset: 2px; }

/* El número es el dato, así que se lee antes que el texto. */
.hoy-n {
  font-family: var(--mono, ui-monospace, monospace);
  font-size: 19px; font-weight: 700; color: #4ddc86;
  min-width: 34px; text-align: right; font-variant-numeric: tabular-nums;
}
.hoy-que { color: var(--txt-dim); }
.hoy-flecha { color: var(--txt-mute); font-size: 15px; transition: transform .14s; }
.hoy-item:hover .hoy-flecha { transform: translateX(3px); color: #4ddc86; }

.hoy-limpio {
  padding: 16px 4px; color: var(--txt-dim); font-size: 14.5px; text-align: center;
}

/* ---- el muro: lo que pasó, necesite decisión o no ----
   Va debajo de los pendientes y se distingue por ser más chico y más apagado:
   son dos cosas distintas en el mismo panel, y si pesaran igual lo urgente
   dejaría de destacarse. */
.bandeja-muro { margin-top: 6px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.bm-cab { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; padding: 0 2px; }
.bm-cab b { font-size: 13px; }
/* 420px eran doce filas: la actividad es para enterarse de reojo, no para
   leerla entera, y a esa altura tapaba el dashboard que está abajo. */
.bm-lista { display: grid; gap: 2px; max-height: 236px; overflow-y: auto; }
.bm-f {
  display: grid; grid-template-columns: 22px 1fr auto; gap: 10px; align-items: baseline;
  padding: 7px 9px; border-radius: 7px; font-size: 13px; color: var(--txt-dim);
}
.bm-f[role="button"] { cursor: pointer; }
.bm-f[role="button"]:hover { background: rgba(255,255,255,.04); }
.bm-f:focus-visible { outline: 2px solid #4ddc86; outline-offset: -2px; }
.bm-ic { font-size: 13px; }
.bm-txt i {
  display: block; color: var(--txt-mute); font-style: normal; font-size: 12px;
  margin-top: 2px; overflow-wrap: anywhere;
}
.bm-cuando { color: var(--txt-mute); font-size: 11.5px; white-space: nowrap; }
/* Los mensajes entre presidentes son lo que más pediste ver: se marcan. */
.bm-f.es-charla { border-left: 2px solid #7aa5ff; }
.bm-f.es-charla .bm-txt i { color: var(--txt-dim); font-style: italic; }
/* Un pase raro o un aviso que no llegó no son "una cosa más que pasó". */
.bm-f.es-alerta { border-left: 2px solid #f0a05a; background: rgba(240,160,90,.05); }
@media (max-width: 560px) {
  .hoy-item { gap: 10px; padding: 10px 12px; font-size: 13.5px; }
  .hoy-n { font-size: 17px; min-width: 28px; }
}

/* El "ver más" de las listas largas. NO es el tope silencioso de antes: dice
   cuántas faltan, y la cuenta de arriba siempre dijo el total. */
.crm-mas {
  width: 100%; background: transparent; border: 0; border-top: 1px solid var(--line-soft);
  color: var(--txt-mute); font-family: inherit; font-size: 12.5px;
  padding: 11px; cursor: pointer;
}
.crm-mas:hover { color: #4ddc86; background: rgba(77,220,134,.06); }
.crm-mas:focus-visible { outline: 2px solid #4ddc86; outline-offset: -2px; }

/* ---- el ida y vuelta de una negociación, desplegable desde la fila ----
   La fila decía "aceptada · 20.000 LC" y nada más: no se veía si alguien
   aceptó la primera oferta o si fueron seis rondas de regateo. Los
   movimientos ya estaban guardados; faltaba mostrarlos. */
.crm-abrible { cursor: pointer; }
.crm-abrible::after {
  content: "▾"; color: var(--txt-mute); font-size: 11px; flex: none;
  transition: transform .15s;
}
.crm-abrible.abierta::after { transform: rotate(180deg); }
.crm-abrible.abierta { background: rgba(255,255,255,.04); }
.crm-abrible:focus-visible { outline: 2px solid var(--verde, #4ddc86); outline-offset: -2px; }

.crm-detalle { border-bottom: 1px solid var(--line-soft); }

/* ---- el ida y vuelta de una negociación, desplegado ----
   ⚠️ SE LLAMA neg-detalle A PROPÓSITO. Antes usaba `.crm-detalle`, que más
   abajo en esta misma hoja tiene `display:none` fijo para otra lista. Esa
   regla le ganaba al atributo `hidden`, así que la fila se marcaba como
   abierta y abajo no aparecía nada: parecía que ninguna negociación tenía
   historial cuando en realidad estaba todo guardado y dibujado. */
.neg-detalle { border-bottom: 1px solid var(--line-soft); background: rgba(255,255,255,.02); }
.neg-detalle[hidden] { display: none; }
.neg-caja { padding: 12px 16px 16px 26px; background: rgba(0,0,0,.16); }
.neg-cab {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 13px; color: var(--txt-dim); margin-bottom: 8px;
}
.neg-cab b { color: var(--txt); }
.neg-turno {
  background: rgba(255,255,255,.06); border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 2px 10px; font-size: 12px; color: var(--txt);
}
.neg-resumen {
  font-size: 12.5px; color: var(--txt-mute); margin-bottom: 10px;
  padding-bottom: 9px; border-bottom: 1px dashed var(--line-soft);
}
.neg-resumen b { color: var(--txt); }
.neg-pasos { display: grid; gap: 4px; }
.neg-paso {
  display: grid; align-items: center; gap: 10px;
  grid-template-columns: 20px minmax(120px, 1fr) 92px minmax(120px, 1.1fr) auto;
  font-size: 12.5px; color: var(--txt-dim);
  padding: 5px 9px; border-radius: 6px;
  border-left: 3px solid transparent;
  background: rgba(255,255,255,.03);
}
/* El color dice de qué lado vino la propuesta, y eso es lo que uno busca
   cuando lee un regateo: quién movió cada vez. */
.neg-paso.es-compra { border-left-color: #4ddc86; }
.neg-paso.es-venta  { border-left-color: #7aa5ff; }
.np-n { font-family: var(--mono, monospace); font-size: 11px; color: var(--txt-mute); }
.np-monto { font-family: var(--mono, monospace); color: var(--txt); font-variant-numeric: tabular-nums; }
.np-dif, .np-cuando { color: var(--txt-mute); font-size: 12px; }
.neg-vacio { font-size: 12.5px; color: var(--txt-mute); font-style: italic; }
@media (max-width: 640px) {
  .neg-paso { grid-template-columns: 18px 1fr auto; }
  .np-dif, .np-cuando { grid-column: 2 / -1; }
}
.crm-fila:hover { background: rgba(255,255,255,.03); }
.crm-fila b { color: var(--txt); font-weight: 700; }
.crm-fila i { color: var(--txt-mute); font-style: normal; }
.crm-fecha {
  font-family: var(--mono, ui-monospace, monospace); font-size: 11.5px;
  color: var(--txt-mute); flex: none; min-width: 96px;
}
.crm-que { flex: 1; min-width: 0; }
.crm-dato { font-weight: 800; color: var(--gold); flex: none; }
.crm-dato.sube { color: var(--grass); }
.crm-dato.baja { color: var(--danger, #e5484d); }

/* ---- el total a pagar, arriba de la lista de deudas ----
   Va grande y separado porque es el número que se mira el día de pago: cuánto
   hay que sacar del bolsillo en total, sin sumar a mano fila por fila. */
.deuda-total { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 16px 0; }
.deuda-total > div {
  flex: 1; min-width: 180px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02);
}
.deuda-total span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--txt-mute); }
.deuda-total b { display: block; font-size: 24px; font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums; }
.deuda-total i { font-style: normal; font-size: 12px; color: var(--txt-mute); }
.deuda-total .ok-todo { flex: 1; text-align: center; color: var(--grass); font-weight: 700; }
.crm-fila.pagada { opacity: .45; }
.crm-fila .b-pagar { font-size: 12px; padding: 6px 10px; flex: none; }

/* ======================= CRM: filas que se abren =========================
   Tickets y consultas del bot dejaron de ser listas para mirar y pasaron a
   ser listas para TRABAJAR: la fila se abre y adentro está la conversación
   entera y el formulario para contestar, sin salir del dashboard.         */
.crm-item { border-bottom: 1px solid var(--line-soft); }
.crm-item:last-child { border-bottom: none; }
.crm-item > .crm-fila { border-bottom: none; }
.crm-clic { cursor: pointer; user-select: none; }
.crm-clic:focus-visible { outline: 2px solid var(--grass); outline-offset: -2px; }
.crm-item.abierto > .crm-fila { background: rgba(255,255,255,.04); }
.crm-flecha { flex: none; color: var(--txt-mute); font-size: 12px; transition: transform .15s; }
.crm-item.abierto .crm-flecha { transform: rotate(180deg); }

/* Cerrado por defecto: la lista tiene que seguir leyéndose de un vistazo. */
.crm-detalle { display: none; padding: 4px 16px 16px; }
.crm-item.abierto .crm-detalle { display: block; }
.crm-cargando { padding: 14px 16px; color: var(--txt-mute); font-size: 13px; }

.crm-chat {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 340px; overflow-y: auto; padding: 12px;
  border: 1px solid var(--line-soft); border-radius: 12px;
  background: rgba(0,0,0,.22); margin-bottom: 10px;
}
.crm-resp textarea { width: 100%; resize: vertical; }
.crm-resp-btns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.crm-msg { font-size: 13px; }

/* la conversación completa de una persona con el bot, como un chat */
.crm-charla {
  display: flex; flex-direction: column; gap: 10px;
  max-height: 420px; overflow-y: auto; padding: 12px;
  border: 1px solid var(--line-soft); border-radius: 12px;
  background: rgba(0,0,0,.22); margin-top: 8px;
}

/* las apariciones sueltas de una misma pregunta al bot */
.crm-mini { margin-top: 8px; border: 1px solid var(--line-soft); border-radius: 12px; overflow: hidden; }
.crm-mini .crm-fila { padding: 7px 12px; font-size: 12.5px; }

/* ---- resumen de arriba: chips de tickets y números del bot ----
   Es la parte "CRM" de verdad: antes de leer una sola fila ya sabés por qué
   te están escribiendo y cuánto hay esperando. Los chips además filtran. */
.crm-resumen { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 2px; }
.crm-chip {
  display: flex; align-items: baseline; gap: 7px; cursor: pointer;
  font-family: inherit; color: var(--txt); text-align: left;
  background: rgba(255,255,255,.02); border: 1px solid var(--line);
  border-radius: 999px; padding: 7px 14px;
  transition: border-color .15s, background .15s;
}
.crm-chip:hover { border-color: var(--grass); background: rgba(255,255,255,.05); }
.crm-chip:focus-visible { outline: 2px solid var(--grass); outline-offset: 2px; }
.crm-chip.activo { border-color: var(--grass); background: rgba(55,194,74,.12); }
.crm-chip b { font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.crm-chip.urge b { color: var(--gold); }
.crm-chip span { font-size: 12.5px; font-weight: 700; }
.crm-chip i { font-style: normal; font-size: 11.5px; color: var(--txt-mute); }

.crm-kpi {
  flex: 1; min-width: 150px; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.02);
}
.crm-kpi b { display: block; font-size: 22px; font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums; }
.crm-kpi.urge b { color: var(--gold); }
.crm-kpi span { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--txt-mute); }
.crm-kpi i { font-style: normal; font-size: 12px; color: var(--txt-mute); }

@media (max-width: 640px) {
  .crm-fecha { min-width: 0; }
  .crm-resumen { padding: 12px 12px 2px; }
  .crm-detalle { padding: 4px 12px 14px; }
}

/* ---- interruptor lista ⇄ cartas del mercado ---- */
.vista-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; flex: none; }
.vista-btn {
  background: none; border: 0; cursor: pointer; padding: 9px 13px;
  font-size: 13px; font-weight: 700; color: var(--txt-mute);
  font-family: inherit; white-space: nowrap; transition: background .15s, color .15s;
}
.vista-btn + .vista-btn { border-left: 1px solid var(--line); }
.vista-btn:hover { color: var(--txt); background: rgba(255,255,255,.04); }
.vista-btn.on { background: rgba(55,194,74,.16); color: var(--grass); }

/* ---- paginador ----
   Solo se dibuja si hay más de una página: un "‹ 1 ›" muerto abajo de todo
   confunde más de lo que ayuda. */
.paginador { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; padding: 22px 0 4px; }
.paginador:empty { display: none; padding: 0; }
.paginador .pag-btn { font-size: 13px; padding: 8px 13px; min-width: 42px; justify-content: center; }
.paginador .pag-btn.on { background: rgba(55,194,74,.18); color: var(--grass); border-color: rgba(55,194,74,.45); }
.paginador .pag-btn:disabled { opacity: .35; cursor: default; }

/* buscador y lista DENTRO de una sección plegable del dashboard.
   Van con su padding propio porque antes colgaban sueltos del ancho de la
   página y ahora viven adentro del panel. */
.sec-toolbar { margin: 12px 16px 0; }
.sec-lista { display: grid; gap: 14px; padding: 14px 16px 16px; }

/* ---- secciones plegables del dashboard ----
   La flechita gira en vez de cambiar de símbolo: se entiende sin leer nada y
   deja claro que el contenido sigue ahí, guardado, no que se borró. */
.panel-head.plegable { cursor: pointer; user-select: none; }
.panel-head.plegable:hover h3 { color: var(--grass); }
.pleg-flecha {
  display: inline-block; margin-right: .45em; font-style: normal;
  font-size: .8em; color: var(--txt-mute); transition: transform .2s;
}
.panel.cerrado > .panel-head.plegable .pleg-flecha { transform: rotate(-90deg); }
/* ⚠️ EL !important NO ES PEREZA. Varios bloques de adentro de los paneles
   traen `style="display:grid"` escrito en la etiqueta —el formulario de crear
   un club, entre otros— y un estilo en línea le gana SIEMPRE a la hoja de
   estilos. Sin esto, esas secciones se veían abiertas con la flecha diciendo
   "cerrada": el formulario de club ocupaba una pantalla entera aunque la
   sección estuviera plegada. Se veía como que el plegado no funcionaba. */
.panel.cerrado > *:not(.panel-head) { display: none !important; }
.panel-head.plegable:focus-visible { outline: 2px solid var(--grass); outline-offset: -2px; border-radius: 8px; }

@media (prefers-reduced-motion: reduce) {
  .pleg-flecha { transition: none; }
}

/* cuántos quedaron después de filtrar, al lado de los filtros */
.toolbar-cuenta { color: var(--txt-mute); font-size: 13px; font-weight: 600; white-space: nowrap; align-self: center; }

/* (La barra de filtros del panel de scout vivía suelta en el <main> y se
   estiraba a todo el ancho de la ventana. Ahora va adentro del panel, como la
   de "Jugadores" del dashboard, y usa .sec-toolbar como todas las demás.) */

/* ---- aviso de "ya lo evaluaron" en el panel de scout ----
   Avisa, no bloquea: hay motivos legítimos para volver a evaluar enseguida,
   como corregir un número recién cargado. */
/* ⚠️ EL RELOJ Y EL ÚLTIMO MOVIMIENTO SE VEN DISTINTO. Pegados y con el mismo
   formato parecían una sola frase, y de ahí salía la confusión de que un ajuste
   de media corría los catorce días. El reloj manda; el movimiento es la letra
   chica de abajo. */
.sc-mov { opacity: .72; font-size: .93em; }
.dash-reloj {
  display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 999px;
  font-size: .88em; font-weight: 700; white-space: nowrap;
}
.dash-reloj.listo  { color: #6ff0a5; background: rgba(77, 220, 134, .12); }
.dash-reloj.espera { color: #ffd08a; background: rgba(255, 176, 46, .12); }
.sc-desde { display: block; margin-top: 3px; opacity: .75; font-size: .92em; }

.sc-aviso {
  padding: 8px 16px; font-size: 12.5px; color: var(--txt-dim);
  border-bottom: 1px solid var(--line-soft); background: rgba(255,255,255,.02);
}
.sc-aviso b { color: var(--txt); font-weight: 700; }
.sc-aviso.ojo { background: rgba(247,201,72,.09); color: #e8cf8a; }
.sc-aviso.ojo b { color: var(--gold); }
.panel.sc-reciente { border-color: rgba(247,201,72,.35); }

/* Ficha esperando su primer rating: es la cola de trabajo del scout, así que
   se marca en verde (hay algo para hacer) y no en amarillo (frená). */
.sc-aviso.pend { background: rgba(55,194,74,.10); color: #a6e3b0; }
.sc-aviso.pend b { color: var(--grass); }
.panel.sc-pendiente { border-color: rgba(55,194,74,.45); }

/* la misma línea, más chica, dentro de una ficha del dashboard */
.dash-eval { font-size: 12px; color: var(--txt-mute); padding: 2px 0 8px; }
.dash-eval b { color: var(--txt-dim); font-weight: 700; }
.dash-eval.ojo { color: var(--gold); }

/* campo apagado (hoy: la posición secundaria cuando elegís arquero).
   Se apaga en vez de esconderse para que se vea POR QUÉ no se puede elegir. */
.f-label.apagado { opacity: .5; }
.f-label.apagado .f-input { cursor: not-allowed; }
.f-nota { display: block; margin-top: 4px; font-size: 12px; color: var(--gold); font-weight: 600; }

/* el presidente en la cabecera del club: el nombre lleva al perfil */
.meta-presi a { color: #c4b5fd; font-weight: 700; text-decoration: none; }
.meta-presi a:hover { text-decoration: underline; }
.meta-presi i { color: var(--txt-mute); font-style: normal; }
.e-transferible { background: rgba(239,68,68,.14); color: #fca5a5; }
.e-escuchando { background: rgba(69,211,255,.14); color: var(--diamond); }
.e-cedido { background: rgba(139,92,246,.16); color: #c4b5fd; }
.prow-val { text-align: right; font-weight: 900; color: var(--gold); font-size: 15px; }
.prow-val small { display: block; color: var(--txt-mute); font-weight: 700; font-size: 10.5px; }
.prow-arrow { text-align: center; color: var(--txt-mute); }
.prow:hover .prow-arrow { color: var(--grass); }

.empty { text-align: center; color: var(--txt-mute); padding: 50px 0; font-size: 15px; }

/* ------------------------- AVATAR (bloque MC) --------------------------- */
.mc-avatar { border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); }

/* ---------------------- SKIN real de Minecraft -------------------------- */
.skin { position: relative; display: inline-block; flex: none; vertical-align: middle; }
.skin > svg, .skin > .skin-img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Mismo caso que en .pn-fb: el muñeco de reserva va DETRÁS y se veía a través
   de las partes transparentes del render. Si hay skin real, se esconde. */
.skin:has(.skin-img) > svg { display: none; }
.skin.sin-skin > svg { display: block; }
.skin.sin-skin > .skin-img { display: none; }
.skin-img { border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.14); image-rendering: pixelated; object-fit: cover; }

/* ------------------------- BANDERAS (SVG) ------------------------------- */
.flag { display: inline-block; border-radius: 3px; vertical-align: -3px; flex: none;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.3), 0 1px 2px rgba(0,0,0,.3); }
.pcard-flag .flag { vertical-align: middle; box-shadow: inset 0 0 0 1px rgba(255,255,255,.25), 0 1px 3px rgba(0,0,0,.4); }

/* --------------------------- PERFIL JUGADOR ----------------------------- */
.profile-hero { display: grid; grid-template-columns: 280px 1fr; gap: 34px; padding: 40px 0 10px; align-items: start; }
.profile-main h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 900; letter-spacing: -1px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.profile-sub { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin: 14px 0 20px; color: var(--txt-dim); font-weight: 600; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--panel-2); border: 1px solid var(--line); font-size: 13.5px; font-weight: 700; }
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-top: 8px; }
.info-box { background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px; padding: 14px 16px; }
.info-box span { display: block; color: var(--txt-mute); font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; margin-bottom: 5px; }
/* El color va explícito y no heredado: cuando el recuadro es un <button> (los
   atajos del dashboard) el navegador le mete su propio color negro, y el
   número quedaba negro sobre negro. Solo se veían los que tienen .g o .y. */
.info-box b { font-size: 17px; font-weight: 800; color: var(--txt); }
.info-box b.g { color: var(--grass); } .info-box b.y { color: var(--gold); }

.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 14px; margin-top: 24px; }
.stat-cell { background: linear-gradient(180deg, var(--panel), var(--panel-2)); border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px; text-align: center; }
.stat-cell b { display: block; font-size: 28px; font-weight: 900; }
.stat-cell span { color: var(--txt-mute); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }

/* barras de atributos */
.attr-bars { display: flex; flex-direction: column; gap: 13px; padding: 6px 2px; }
.attr-bar .top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 700; margin-bottom: 6px; }
.attr-bar .top b { color: var(--txt); }
.attr-bar .track { height: 9px; border-radius: 6px; background: var(--line); overflow: hidden; }
.attr-bar .fill { height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--grass-dk), var(--grass)); }
.attr-bar.hi .fill { background: linear-gradient(90deg, var(--gold-dk), var(--gold)); }

/* ---------------------------- PERFIL EQUIPO ----------------------------- */
.team-hero { display: flex; align-items: center; gap: 24px; padding: 42px 0 12px; flex-wrap: wrap; }
.team-crest-lg { width: 92px; height: 92px; border-radius: 18px; display: grid; place-items: center; font-size: 30px; font-weight: 900; flex: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.18), var(--shadow); }
.team-hero h1 { font-size: clamp(28px, 4vw, 44px); font-weight: 900; letter-spacing: -1px; }
.team-hero .team-meta { color: var(--txt-dim); margin-top: 6px; display: flex; gap: 14px; flex-wrap: wrap; font-weight: 600; }
.roster { display: flex; flex-direction: column; gap: 8px; }

/* trophies */
.trophy-list { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; }
.trophy { display: flex; align-items: center; gap: 11px; font-size: 14px; font-weight: 600; }
.trophy .t { font-size: 18px; }

/* --------------------------- EQUIPOS (grid) ----------------------------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 20px; }
.team-card {
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line-soft); border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow); transition: transform .18s, border-color .18s;
}
.team-card:hover { transform: translateY(-5px); border-color: var(--grass-dk); }
.team-card-top { display: flex; align-items: center; gap: 15px; padding: 20px; }
.tc-crest { width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center;
  font-size: 20px; font-weight: 900; background: rgba(0,0,0,.22); box-shadow: inset 0 0 0 2px rgba(255,255,255,.22); flex: none; }
.tc-name h3 { font-size: 19px; font-weight: 900; letter-spacing: -.3px; }
.tc-name span { font-size: 12.5px; font-weight: 600; opacity: .85; }
.team-card-body { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line-soft); }
.team-card-body > div { padding: 14px 8px; text-align: center; border-right: 1px solid var(--line-soft); }
.team-card-body > div:last-child { border-right: none; }
.team-card-body b { display: block; font-size: 19px; font-weight: 900; }
.team-card-body b.g { color: var(--grass); } .team-card-body b.y { color: var(--gold); }
.team-card-body span { font-size: 10.5px; color: var(--txt-mute); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }

/* ------------------- LÍDERES COMPACTOS (home) --------------------------- */
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; }
.mini-board { border-bottom: 1px solid var(--line-soft); padding: 6px 0 4px; }
.mini-board:nth-child(odd) { border-right: 1px solid var(--line-soft); }
.mini-board:nth-last-child(-n+2) { border-bottom: none; }
.mini-board h4 { font-size: 12.5px; font-weight: 800; color: var(--txt-dim); padding: 6px 16px 2px; letter-spacing: .3px; }
.mini-board .rank-row { padding: 6px 14px; }
@media (max-width: 520px) {
  .mini-grid { grid-template-columns: 1fr; }
  .mini-board:nth-child(odd) { border-right: none; }
  .mini-board:nth-last-child(-n+2) { border-bottom: 1px solid var(--line-soft); }
  .mini-board:last-child { border-bottom: none; }
}

/* --------------------------- RANKINGS ----------------------------------- */
.stat-panels { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.rank-list { display: flex; flex-direction: column; padding: 6px 0; }
.rank-row { display: flex; align-items: center; gap: 12px; padding: 9px 16px; transition: .15s; }
.rank-row:hover { background: rgba(255,255,255,.03); }
.rank-n { width: 24px; text-align: center; font-weight: 900; color: var(--txt-mute); font-size: 14px; flex: none; }
.rank-n.top { color: var(--gold); }
.rank-id { flex: 1; min-width: 0; }
.rank-id b { display: block; font-weight: 800; font-size: 14.5px; }
.rank-id span { color: var(--txt-mute); font-size: 12px; }
/* flex:none + nowrap: la columna del valor no se encoge ni parte la etiqueta.
   Sin esto, con un club de nombre largo ("Conguitos FC") y una etiqueta larga,
   las dos se montaban una encima de la otra. El que cede es el nombre de la
   izquierda, que ya corta con puntitos. */
.rank-val { text-align: right; flex: none; white-space: nowrap; }
.rank-val b { font-size: 17px; font-weight: 900; color: var(--grass); }
.rank-val span { display: block; font-size: 10.5px; color: var(--txt-mute); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
table.liga a:hover { color: var(--grass); }

/* --------------------------- FORM / SESIÓN ------------------------------ */
.f-label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--txt-dim); }
.f-input {
  padding: 11px 13px; border-radius: 10px; font-size: 15px; font-family: inherit;
  background: var(--bg); border: 1px solid var(--line); color: var(--txt); outline: none; transition: .15s;
}
.f-input:focus { border-color: var(--grass-dk); box-shadow: 0 0 0 3px rgba(55,194,74,.15); }
.session-btn { padding: 7px 12px; }
.session-avatar {
  width: 26px; height: 26px; min-width: 26px; border-radius: 50%;
  object-fit: cover; flex: none; display: block;
}
.session-btn { padding: 0; gap: 0; }

/* cartera del presidente (siempre visible en la barra) */
.wallet-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 10px;
  background: rgba(247,201,72,.1); border: 1px solid rgba(247,201,72,.35);
  color: var(--gold); font-weight: 800; font-size: 14px; white-space: nowrap;
  font-variant-numeric: tabular-nums; transition: .15s;
}
.wallet-chip:hover { background: rgba(247,201,72,.18); }
.wallet-chip .w-cr { font-size: 11px; opacity: .75; font-weight: 700; }
.wallet-chip .w-ic { font-size: 13px; }

/* ------------------------- CAMPANITA DE AVISOS -------------------------- */
.bell-wrap { position: relative; }
.bell-btn {
  width: 38px; height: 38px; border-radius: 10px; font-size: 16px;
  background: var(--panel-2); border: 1px solid var(--line); color: var(--txt);
  display: grid; place-items: center; position: relative; transition: .15s;
}
.bell-btn:hover { border-color: var(--grass-dk); }
.bell-dot {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 10.5px; font-weight: 900; display: grid; place-items: center;
  box-shadow: 0 0 0 2px var(--bg);
}
.bell-panel {
  display: none; position: absolute; right: 0; top: 46px; width: min(340px, 88vw); z-index: 80;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); overflow: hidden;
}
.bell-wrap.open .bell-panel { display: block; }
.bell-head {
  padding: 12px 15px; font-weight: 800; font-size: 14px;
  border-bottom: 1px solid var(--line-soft); display: flex; justify-content: space-between; align-items: center;
}
.bell-head span { color: var(--grass); font-size: 12px; font-weight: 700; }
.bell-list { max-height: 330px; overflow-y: auto; }
.bell-item {
  display: flex; gap: 10px; justify-content: space-between; align-items: flex-start;
  padding: 11px 15px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; transition: .15s;
}
.bell-item:last-child { border-bottom: none; }
.bell-item:hover { background: rgba(255,255,255,.03); }
.bell-item.unread { background: rgba(55,194,74,.07); }
.bell-item time { color: var(--txt-mute); font-size: 11px; white-space: nowrap; }
.bell-empty { padding: 26px 15px; text-align: center; color: var(--txt-mute); font-size: 13.5px; }

/* ------------------------------- MODAL ---------------------------------- */
/* ======================= COMPARADOR (punto 8) ============================
   Las dos barras crecen desde el centro hacia afuera, así de un vistazo se ve
   quién tiene más sin leer los números. */
/* La carta de verdad arriba de cada columna: es lo que hace que se entienda
   de un vistazo a quién estás comparando. */
.cmp-cartas { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 14px 16px 4px; }
.cmp-carta { display: flex; justify-content: center; }
.cmp-carta .pcard-new { width: 100%; max-width: 250px; font-size: 11px; }

.cmp-tabla { padding: 8px 16px 4px; }
/* Verde el que gana, rojo el que pierde, gris si empatan. Las barras
   encimadas de la primera versión eran confusas: había que medir largos para
   saber quién ganaba, en vez de leer un color. */
.cmp-fila { display: grid; grid-template-columns: 1fr 92px 1fr; gap: 8px;
  align-items: center; padding: 5px 0; }
.cmp-caja {
  padding: 9px 12px; border-radius: 10px; text-align: center;
  font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: rgba(255,255,255,.05); color: var(--txt-dim);
  border: 1px solid transparent;
}
.cmp-caja.gana   { background: rgba(55,194,74,.16);  color: #6ee79a; border-color: rgba(55,194,74,.4); }
.cmp-caja.pierde { background: rgba(229,72,77,.13);  color: #ff9a9d; border-color: rgba(229,72,77,.3); }
.cmp-lbl { text-align: center; font-size: 10.5px; font-weight: 800;
  letter-spacing: .08em; text-transform: uppercase; color: var(--txt-mute); }
.cmp-resumen { padding: 12px 16px 16px; text-align: center; color: var(--txt-dim); font-size: 13.5px; }
.cmp-resumen b { color: var(--txt); }

/* El comparador se abre ARRIBA de la lista del mercado y las cartas se le
   montaban encima: .plist tiene margen negativo y las cartas su propia
   sombra. Con esto el panel queda en su caja y la lista empieza abajo. */
#cmpCaja:not([hidden]) { position: relative; z-index: 2; margin-bottom: 22px; }

@media (max-width: 560px) {
  .cmp-carta .pcard-new { font-size: 9px; }
  .cmp-fila { grid-template-columns: 1fr 66px 1fr; gap: 5px; }
  .cmp-caja { padding: 7px 6px; font-size: 13px; }
}

/* ======================= OVERLAY PARA OBS (punto 6) ======================
   Fondo TRANSPARENTE a propósito: en OBS la fuente de navegador se apoya
   sobre el gameplay y un fondo opaco taparía el juego. Por eso también lleva
   sombra en el texto, que es lo único que lo mantiene legible sobre
   cualquier cosa que haya abajo. */
body.es-overlay { background: transparent !important; }
body.es-overlay #overlay {
  display: flex; flex-direction: column; gap: 10px; padding: 16px;
  /* width explícito: sin esto el contenedor se encogía a 32px (solo el
     padding) y las cajas salían aplastadas contra el borde. */
  width: 100%; max-width: 340px; box-sizing: border-box;
}
body.es-overlay.lado-der #overlay { margin-left: auto; }
.ov-caja {
  background: rgba(8,12,10,.82); border: 1px solid rgba(255,255,255,.12);
  border-left: 3px solid var(--grass); border-radius: 12px; padding: 10px 13px;
  backdrop-filter: blur(6px); text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.ov-tit { font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--grass); margin-bottom: 7px; }
.ov-fila { display: grid; grid-template-columns: 20px 1fr auto; gap: 8px; align-items: center;
  font-size: 13.5px; padding: 3px 0; }
.ov-pos { color: var(--txt-mute); font-weight: 800; font-size: 12px; }
.ov-eq { color: var(--txt); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-pts { color: var(--gold); font-weight: 900; font-variant-numeric: tabular-nums; }
.ov-partido { font-size: 15px; font-weight: 800; color: var(--txt); line-height: 1.35; }
.ov-sub { font-size: 12.5px; color: var(--txt-mute); margin-top: 3px; line-height: 1.4; }

/* ---------------- tu progreso, en pasos (perfil) ----------------
   Reemplaza al cartel suelto de "tu ficha está pendiente", que decía qué
   pasaba pero no qué hacer. Acá se ve el camino entero y dónde estás. */
.pasos { margin: 16px 0 0; padding: 14px 16px; border: 1px solid var(--line-soft);
  border-radius: 14px; background: rgba(255,255,255,.02); }
.pasos-fila { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.paso { display: flex; align-items: center; gap: 7px; flex: 1; min-width: 108px; }
/* la rayita que une un paso con el siguiente */
.paso + .paso::before { content: ""; height: 2px; flex: 1; background: var(--line); margin-right: 1px; }
.paso-bolita {
  width: 22px; height: 22px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 11px; font-weight: 800;
  background: var(--line); color: var(--txt-mute);
}
.paso-txt { font-size: 12.5px; font-weight: 700; color: var(--txt-mute); }
.paso.hecho .paso-bolita { background: var(--grass); color: #06210c; }
.paso.hecho .paso-txt { color: var(--txt-dim); }
.paso.hecho + .paso::before { background: var(--grass); }
.paso.ahora .paso-bolita { background: var(--gold); color: #2a1e00; box-shadow: 0 0 0 4px rgba(247,201,72,.16); }
.paso.ahora .paso-txt { color: var(--gold); }
.pasos-ahora { margin: 12px 0 0; font-size: 13px; color: var(--txt-dim); line-height: 1.5; }
.pasos-ahora b { color: var(--txt); }

/* ---------------- historial de valor (perfil) ---------------- */
.val-hist { margin-top: 14px; }
/* Valor y media, uno al lado del otro: son la misma historia contada en dos
   monedas y se leen juntos. En pantalla chica se apilan solos. */
.val-hist-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.val-hist-fila .val-hist { margin-top: 0; }
@media (max-width: 720px) { .val-hist-fila { grid-template-columns: 1fr; } }
.val-graf { padding: 6px 14px 12px; }
.val-graf svg { width: 100%; height: 90px; display: block; }
.val-pies { display: flex; justify-content: space-between; margin-top: 4px;
  font-size: 12px; font-weight: 700; color: var(--txt-dim); }
.val-pies .der { text-align: right; }
.val-pies i { display: block; font-style: normal; font-size: 10.5px;
  font-weight: 600; color: var(--txt-mute); text-transform: uppercase; letter-spacing: .5px; }

@media (max-width: 560px) {
  .paso-txt { font-size: 11.5px; }
  .paso { min-width: 84px; }
}

/* La tabla de posiciones es más ancha que un celular y ya scrollea dentro de
   su caja, pero no se notaba: quedaba cortada seca contra el borde y parecía
   rota. El degradado de la derecha dice "acá sigue". Se apoya en background-
   attachment: local, así que desaparece solo cuando llegás al final. */
.tabla-scroll {
  overflow-x: auto;
  background:
    linear-gradient(to right, var(--panel) 30%, rgba(11,15,13,0)) left / 24px 100% no-repeat local,
    linear-gradient(to left,  var(--panel) 30%, rgba(11,15,13,0)) right / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.5), rgba(0,0,0,0)) left / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.5), rgba(0,0,0,0)) right / 12px 100% no-repeat scroll;
}

/* Los flotantes se apartan del botón del hero en el celular.
   El botón ocupa todo el ancho y la burbuja le tapaba 55px del lado derecho
   al scrollear. Mientras el llamado a la acción está a la vista, se van. */
@media (max-width: 767px) {
  body.cta-tapado .ayuda-wrap,
  body.cta-tapado .tk-wrap,
  body.cta-tapado .ir-arriba {
    opacity: 0; visibility: hidden; pointer-events: none;
  }
}
.ayuda-wrap, .tk-wrap { transition: opacity .2s, visibility .2s; }

/* ---------------------- avisos flotantes (adiós alert) -------------------
   Abajo y centrados: arriba chocaban con la barra de navegación, que es fija.
   En el celular van a todo el ancho, que es donde el pulgar los alcanza.     */
.avisos {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  z-index: 120; display: flex; flex-direction: column; gap: 8px;
  width: min(430px, calc(100vw - 24px)); pointer-events: none;
}
.aviso {
  pointer-events: auto; display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 12px 12px 14px; border-radius: 12px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); box-shadow: 0 12px 30px -10px rgba(0,0,0,.8);
  animation: avisoEntra .22s ease-out;
}
.aviso p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--txt); flex: 1; white-space: pre-line; }
.aviso-ic { font-size: 15px; line-height: 1.3; flex: none; }
.aviso-x {
  flex: none; background: none; border: 0; cursor: pointer; color: var(--txt-mute);
  font-size: 13px; font-family: inherit; padding: 2px 4px; line-height: 1;
}
.aviso-x:hover { color: var(--txt); }
.aviso.ok    { border-color: rgba(55,194,74,.45); }
.aviso.error { border-color: rgba(229,72,77,.5); }
.aviso.yendose { animation: avisoSale .2s ease-in forwards; }
@keyframes avisoEntra { from { opacity: 0; transform: translateY(10px); } }
@keyframes avisoSale  { to   { opacity: 0; transform: translateY(8px); } }

/* el botón rojo del cartel de confirmar, para lo que no se puede deshacer */
.btn-peligro {
  background: linear-gradient(180deg, #e5484d, #b9333a); color: #fff; border: 0;
}
.btn-peligro:hover { filter: brightness(1.08); }

.modal-back {
  position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 18px;
  background: rgba(4,8,6,.75); backdrop-filter: blur(4px);
}
.modal {
  width: min(430px, 100%); padding: 22px 24px 20px; border-radius: 16px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.modal h3 { font-size: 19px; font-weight: 900; margin-bottom: 6px; }
.modal-sub { color: var(--txt-dim); font-size: 13.5px; margin-bottom: 16px; }
.modal-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.modal-chips .btn { font-size: 12.5px; padding: 7px 11px; }
.modal-info { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--txt-mute); }
.modal-info b { color: var(--txt); }
.modal-calc { margin-top: 10px; font-size: 13px; color: var(--txt-dim); }
.modal-calc b { color: var(--gold); }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 20px; }

/* ===================== ACCESIBILIDAD: FOCO VISIBLE ======================= */
/* Antes los botones y los links no marcaban nada al recorrerlos con Tab
   (outline: none heredado del reset), así que quien navega con teclado no
   sabía dónde estaba parado. WCAG 2.4.7. Se usa :focus-visible para que el
   anillo salga con el teclado y no con el mouse. */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--grass);
  outline-offset: 2px;
  border-radius: 6px;
}
/* sobre fondo verde el anillo verde no se ve: ahí va dorado */
.btn-primary:focus-visible, .btn-discord:focus-visible, .btn-twitch:focus-visible {
  outline-color: var(--gold);
}
/* saltar al contenido: primer tabulador de la página, invisible hasta enfocarlo */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 10000;
  background: var(--panel-2); color: var(--txt); border: 1px solid var(--line);
  padding: 10px 16px; border-radius: 10px; font-weight: 700; font-size: 14px;
  transition: top .15s;
}
.skip-link:focus { top: 12px; }

/* ======================= INTRO (cortina de entrada) ====================== */
/* Tapa la pantalla mientras la home carga detrás. Se va sola al terminar el
   video, con un toque, con Escape o si tarda mucho en arrancar. */
html.intro-abierto, html.intro-abierto body { overflow: hidden; }
.intro {
  position: fixed; inset: 0; z-index: 9999; background: #000;
  display: grid; place-items: center; cursor: pointer;
  opacity: 1; transition: opacity .45s ease;
}
.intro.fuera { opacity: 0; pointer-events: none; }
/* a pantalla completa, de borde a borde. Hay dos versiones del video (una
   horizontal y una vertical) y el script elige la que corresponde, así que
   "cover" llena la pantalla sin comerse el logo. */
.intro video { width: 100%; height: 100%; object-fit: cover; background: #000; }
.intro-btn {
  position: absolute; border: 1px solid rgba(255, 255, 255, .18);
  background: rgba(0, 0, 0, .45); color: #eaf2ec; backdrop-filter: blur(6px);
  border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 700;
  padding: 8px 14px; cursor: pointer; opacity: .55; transition: opacity .2s;
  display: inline-flex; align-items: center; gap: 6px; line-height: 1;
}
.intro-btn:hover { opacity: 1; }
.intro-skip { right: 18px; bottom: 18px; }
.intro-sound { left: 18px; bottom: 18px; }
@media (max-width: 560px) {
  .intro-btn { font-size: 12px; padding: 7px 12px; }
  .intro-skip { right: 12px; bottom: 12px; }
  .intro-sound { left: 12px; bottom: 12px; }
}
/* aviso discreto si el video tarda en llegar (conexión lenta) */
.intro-cargando {
  position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%);
  color: #9db1a4; font-size: 12.5px; font-weight: 700; letter-spacing: .4px;
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.intro-cargando.ver { opacity: .75; }

/* ----------------------------- OFERTAS ---------------------------------- */
.oferta-list { display: flex; flex-direction: column; }
.oferta-row {
  display: grid; grid-template-columns: 1.4fr auto auto; gap: 12px; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
}
.oferta-row:last-child { border-bottom: none; }
.oferta-monto { text-align: right; }
.oferta-monto b { display: block; font-size: 16px; font-weight: 900; color: var(--gold); }
.oferta-monto span { font-size: 10.5px; color: var(--txt-mute); font-weight: 700; text-transform: uppercase; }
.oferta-acts { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.oferta-acts .btn { font-size: 12px; padding: 7px 10px; }
@media (max-width: 620px) {
  .oferta-row { grid-template-columns: 1fr auto; }
  .oferta-acts { grid-column: 1 / -1; justify-content: flex-start; }
}

/* --- historial de la negociación (ida y vuelta) --- */
.neg-hist-slot { grid-column: 1 / -1; }
.neg-hist {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  background: rgba(255, 255, 255, .03); border: 1px solid var(--line-soft);
}
.neg-hist-t {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase;
  color: var(--txt-mute); margin-bottom: 8px; letter-spacing: .4px;
}
.neg-move {
  display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: baseline;
  padding: 5px 0; font-size: 13px; border-left: 3px solid transparent; padding-left: 9px;
}
.neg-move.is-buy  { border-left-color: rgba(55, 194, 74, .55); }
.neg-move.is-sell { border-left-color: rgba(240, 185, 61, .55); }
.neg-move .nm-club { color: var(--txt-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.neg-move b { color: var(--gold); font-weight: 800; }
.neg-move .nm-dif { font-size: 11px; color: var(--txt-mute); font-weight: 700; min-width: 74px; text-align: right; }
/* dentro del modal, si la negociación fue larga, que scrollee y no estire la ventana */
.modal .neg-hist { margin: 0 0 14px; max-height: 160px; overflow-y: auto; }

/* escudos oficiales: 2 capas pintadas con los colores del club */
.crest-wrap { display: inline-grid; place-items: center; flex: none; }
.crest-img { position: relative; display: inline-block; flex: none; vertical-align: middle;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.5)); }
.crest-img i { position: absolute; inset: 0; display: block;
  -webkit-mask-image: var(--m); mask-image: var(--m);
  -webkit-mask-size: contain; mask-size: contain;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center; }
.preview-crest { display: grid; place-items: center; padding: 10px 0 4px; }
.escudo-picker { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.escudo-opt {
  display: grid; place-items: center; padding: 7px; border-radius: 10px; cursor: pointer;
  background: var(--panel-2); border: 2px solid transparent; transition: .15s;
}
.escudo-opt:hover { border-color: var(--line); }
.escudo-opt.sel { border-color: var(--grass); background: rgba(55,194,74,.12); }
.escudo-opt input { display: none; }

/* cartera en el dashboard */
.wallet-box {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(247,201,72,.07); border: 1px solid rgba(247,201,72,.3);
}
.wallet-box .w-label { font-size: 12px; font-weight: 800; color: var(--gold); text-transform: uppercase; letter-spacing: .5px; }
.wallet-box input { width: 130px; font-weight: 800; color: var(--gold); }
.wallet-box .btn { font-size: 12.5px; padding: 8px 11px; }

/* jugadores en venta (mi equipo) */
.venta-head { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line-soft); }
.venta-head .search { min-width: 160px; }
.precio-tag { font-weight: 900; color: var(--gold); font-size: 14px; white-space: nowrap; }
.precio-tag small { display: block; color: var(--txt-mute); font-size: 10px; font-weight: 700; }

/* --------------------------- DASHBOARD (admin) --------------------------- */
.nav-links a.nav-dash, .nav-mobile a.nav-dash { color: var(--gold); }
.nav-links a.nav-dash.active, .nav-links a.nav-dash:hover { color: var(--gold); background: rgba(247,201,72,.1); }
.nav-links a.nav-pres, .nav-mobile a.nav-pres { color: var(--grass); }
.nav-links a.nav-pres.active, .nav-links a.nav-pres:hover { color: var(--grass); background: rgba(55,194,74,.1); }
.nav-links a.nav-scout, .nav-mobile a.nav-scout { color: var(--diamond); }
.nav-links a.nav-scout.active, .nav-links a.nav-scout:hover { color: var(--diamond); background: rgba(69,211,255,.1); }

/* cuentas y roles */
.acc-list { display: flex; flex-direction: column; }
.acc-row { display: flex; align-items: center; gap: 16px; padding: 13px 18px; border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
.acc-row:last-child { border-bottom: none; }
.acc-id { display: flex; align-items: center; gap: 10px; min-width: 190px; }
.acc-id b { display: block; font-size: 14.5px; }
.acc-id span { color: var(--txt-mute); font-size: 12px; }
.acc-badges { display: flex; gap: 7px; flex-wrap: wrap; flex: 1; }
.acc-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.acc-actions .btn { font-size: 12.5px; padding: 8px 11px; }
.acc-actions .select { padding: 8px 10px; font-size: 13px; }

/* panel de scout */
.sc-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 10px; padding: 14px 18px 16px; align-items: end; }
.sc-form .hl-sc input { border-color: rgba(69,211,255,.4); color: var(--diamond); font-weight: 800; }

/* Subtítulos y botonera del panel de scout.
   El botón va en su PROPIA fila a lo ancho y no como una celda más de la
   grilla: las columnas miden 84px y "✓ Guardar y aprobar" se salía de la
   cajita verde, con el texto pisando el borde. */
.sc-sub {
  grid-column: 1 / -1; font-size: 11.5px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--txt-mute); border-top: 1px solid var(--line-soft);
  padding-top: 12px; margin-top: 2px;
}
.sc-form .sc-sub:first-child { border-top: none; padding-top: 0; }
.sc-acciones {
  grid-column: 1 / -1; display: flex; gap: 10px; align-items: center;
  flex-wrap: wrap; margin-top: 6px;
}
.sc-acciones .btn { font-size: 13px; white-space: nowrap; }
.sc-msg { font-size: 13px; font-weight: 700; }

/* La ficha del scout se pliega igual que la del dashboard: cerrada es una
   línea. Con 51 jugadores, tenerlas todas abiertas convertía cualquier
   búsqueda en un viaje con la ruedita para abajo y otro para arriba. */
.sc-card .sc-form,
.sc-card .sc-aviso { display: none; }
.sc-card.open .sc-form { display: grid; }
.sc-card.open .sc-aviso { display: block; }
.sc-card .panel-head h3 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.sc-card > .panel-head { cursor: pointer; user-select: none; }
.panel.sc-card { height: fit-content; }

/* textarea del form de equipo */
textarea.f-input { resize: vertical; font-family: inherit; }
.f-input[type="color"] { padding: 3px; height: 40px; cursor: pointer; }
.dash-card.dash-pending { border-color: rgba(247,201,72,.45); }
.dash-card .panel-head h3 { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.dash-form {
  display: none; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 12px; padding: 16px 18px 18px; align-items: end;
}
.dash-card.open .dash-form { display: grid; }
/* panel de "jugador de prueba": un botón y una explicación, siempre visible */
.test-box { padding: 16px 18px 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.test-box .muted-sm { margin: 0; max-width: 70ch; line-height: 1.5; }
/* las fichas de prueba viven acá adentro, separadas de los jugadores reales */
.test-list { display: grid; gap: 12px; padding: 0 18px 18px; }
.dash-card.dash-test { border-style: dashed; background: rgba(255, 255, 255, .02); }
/* la ficha recién creada, resaltada un rato */
.dash-card.dash-nueva { border-color: rgba(55, 194, 74, .55); animation: nuevaFicha 2.4s ease-out 1; }
@keyframes nuevaFicha {
  0%, 60% { box-shadow: 0 0 0 2px rgba(55, 194, 74, .35); }
  100%    { box-shadow: 0 0 0 0 rgba(55, 194, 74, 0); }
}
.dash-card > .panel-head { cursor: pointer; user-select: none; }
.dash-form .f-label { min-width: 0; }
.dash-form .f-input, .sc-form .f-input { width: 100%; min-width: 0; }
.dash-mini { color: var(--txt-mute); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.chev { color: var(--txt-mute); transition: transform .2s; font-size: 13px; }
.dash-card.open .chev { transform: rotate(180deg); }
.dash-roles { grid-column: 1 / -1; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dash-roles .btn { font-size: 12.5px; padding: 8px 11px; }
.dash-roles .select { padding: 8px 10px; font-size: 13px; }
.muted-sm { color: var(--txt-mute); font-size: 13px; font-weight: 600; }
.dash-form .f-label.hl input { border-color: rgba(247,201,72,.4); color: var(--gold); font-weight: 800; }
.dash-form .f-label.sm { font-size: 11px; }
.dash-form .f-label.chk { display: flex; align-items: center; gap: 8px; padding-bottom: 10px; }
.dash-sub {
  grid-column: 1 / -1; font-size: 11.5px; font-weight: 800; letter-spacing: .6px;
  text-transform: uppercase; color: var(--txt-mute); border-top: 1px solid var(--line-soft);
  padding-top: 12px; margin-top: 2px;
}
.dash-save { grid-column: 1 / -1; justify-content: center; margin-top: 4px; }
.dash-msg { grid-column: 1 / -1; font-size: 13.5px; font-weight: 700; text-align: center; }

/* ------------------------------ FOOTER ---------------------------------- */
footer.ft { border-top: 1px solid var(--line-soft); margin-top: 50px; padding: 34px 0; color: var(--txt-mute); }
.ft-inner { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; align-items: center; font-size: 13.5px; }
.ft-inner .demo-note { color: var(--gold); font-weight: 700; }
/* aviso de autoría: tiene que leerse, no esconderse en letra chica */
.ft-aviso { max-width: 52ch; line-height: 1.55; text-align: right; }
.ft-aviso b { color: var(--txt-dim); }
@media (max-width: 720px) { .ft-aviso { text-align: left; } }

/* --------------------------- badge "DEMO" ------------------------------- */
.demo-pill {
  position: fixed; right: 14px; bottom: 14px; z-index: 60;
  background: rgba(247,201,72,.14); color: var(--gold); border: 1px solid rgba(247,201,72,.4);
  padding: 8px 13px; border-radius: 999px; font-size: 12.5px; font-weight: 800; letter-spacing: .3px;
  backdrop-filter: blur(6px);
}

/* ------------------------------ RESPONSIVE ------------------------------ */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 28px; }
  .hero-card-wrap { order: -1; }
  .two-col { grid-template-columns: 1fr; }
  .profile-hero { grid-template-columns: 1fr; }
  .profile-card-wrap { display: grid; place-items: center; }
}
/* ⚠️ ESTE CORTE ESTABA EN 860px Y ERA LA CAUSA DEL DESBORDE.
   Los links de la barra no se encogen, así que entre 861px y 1240px no
   entraban: la barra se salía de la pantalla hasta 160px y el visitante
   perdía de vista la campana y su foto. Medido con la sesión abierta y sin
   ella, en 33 anchos. Al subirlo a 1240 desaparece en todos.
   Y de paso se termina la BANDA MUERTA que había entre 861 y 900: ahí los
   íconos ya se escondían (regla de más abajo) pero el ☰ todavía no existía,
   así que Discord, Twitch y Donaciones no se podían abrir de ninguna forma.
   Los dos números tienen que seguir siendo EL MISMO. */
@media (max-width: 1240px) {
  .nav-links { display: none; }
  .nav-burger { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); color: var(--txt); flex: none; }
  .nav-cta { display: none; }
}
/* a 1024 (tablets apaisadas, Nest Hub) el carrito era lo que sobraba por 5px:
   el link "Mercado" ya está al lado, así que se va */
@media (max-width: 1080px) { .nav-cta { display: none; } }
/* Presidentes/scouts/admins suman links ("Mi equipo", "Scout", "Dashboard") y
   la cartera: la barra pide ~1180px y en 1024 se cortaba contra el borde.
   Para esas cuentas el menú ☰ entra antes.
   Subido de 1240 a 1400: con 1240 la barra del presidente se salía 24px justo
   ARRIBA del corte (1241-1279), que es el borde que no se había medido. */
@media (max-width: 1400px) {
  .nav.nav-plus .nav-links { display: none; }
  .nav.nav-plus .nav-burger {
    display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
    background: var(--panel-2); border: 1px solid var(--line); color: var(--txt); flex: none;
  }
  .nav.nav-plus .nav-cta { display: none; }
}
@media (max-width: 720px) {
  .nav-inner { gap: 10px; height: 58px; }
  .nav-right { gap: 8px; }
  .brand b { font-size: 16px; }
  .prow { grid-template-columns: 40px 1.4fr 64px 34px; }
  .prow-team, .prow-val, .prow-estado { display: none; }
  .hero { padding-top: 34px; }
  .hero-stats { flex-wrap: wrap; gap: 18px; }
}

/* ---- celulares BAJOS (iPhone SE y parecidos) ----
   La carta del hero mide 430px y va primera en celular. En una pantalla de
   667px de alto eso dejaba el botón "Explorar mercado" 206px ABAJO del
   pliegue: entrabas a la portada y no veías ni un botón.

   Se invierte el orden solo acá: primero el título, el texto y el botón —que
   juntos miden 322px y entran de sobra— y la carta queda justo abajo, sin
   achicarla. En celulares altos la carta sigue yendo primera, que es donde
   mejor se ve y donde el botón entra igual.

   El corte de 870px de alto sale de la cuenta: carta (430) + separación (28)
   + bloque de texto (322) + barra (59) + margen (34) = 873. */
@media (max-width: 767px) and (max-height: 870px) {
  .hero-card-wrap { order: 0; }
  .hero { padding-top: 24px; }
  .hero p.lead { margin: 14px 0 20px; font-size: 16.5px; }
  .hero-stats { margin-top: 22px; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .btn .hide-sm { display: none; }
  .sec-head { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .nav-inner { gap: 8px; }
  .nav-right { gap: 6px; }
  .btn-icon { width: 34px; height: 34px; }
  .btn-icon svg { width: 16px; height: 16px; }
  .brand b { font-size: 14.5px; }
  .nav-burger { width: 34px; height: 34px; }
  #sessionSlot .btn { padding: 0; font-size: 12.5px; }
  .session-avatar { width: 22px; height: 22px; min-width: 22px; }
}


/* ====================== ASISTENTE DE AYUDA (FAQ) ======================== */
.ayuda-wrap { position: fixed; right: 18px; bottom: 18px; z-index: 90; }
.ayuda-btn {
  width: 56px; height: 56px; border-radius: 50%; border: 0; font-size: 24px;
  background: linear-gradient(135deg, var(--grass), var(--grass-dk)); color: #06210c;
  box-shadow: 0 10px 26px -8px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.12);
  display: grid; place-items: center; transition: transform .18s;
}
.ayuda-btn:hover { transform: scale(1.08); }
.ayuda-panel {
  display: none; position: absolute; right: 0; bottom: 68px;
  width: min(370px, 90vw); height: min(520px, 72vh);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  flex-direction: column; overflow: hidden;
}
.ayuda-panel.open { display: flex; }
.ayuda-head {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 16px; border-bottom: 1px solid var(--line-soft);
  font-weight: 800; font-size: 15px; background: rgba(55,194,74,.08);
}
.ayuda-x { background: none; border: 0; color: var(--txt-mute); font-size: 16px; }
.ayuda-x:hover { color: var(--txt); }
.ayuda-msgs { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.ay-msg { max-width: 88%; padding: 10px 13px; border-radius: 13px; font-size: 14px; line-height: 1.55; }
.ay-msg.bot { align-self: flex-start; background: var(--panel-2); border: 1px solid var(--line-soft); border-bottom-left-radius: 4px; }
.ay-msg.yo { align-self: flex-end; background: rgba(55,194,74,.16); color: #d8f5de; border-bottom-right-radius: 4px; }
.ay-msg a { color: var(--grass); font-weight: 700; }
.ay-chips { display: flex; flex-direction: column; gap: 6px; }
.ay-chips button {
  text-align: left; padding: 9px 12px; border-radius: 10px; font-size: 13px; font-weight: 600;
  background: transparent; border: 1px solid var(--line); color: var(--txt-dim); transition: .15s;
}
.ay-chips button:hover { border-color: var(--grass-dk); color: var(--txt); background: var(--panel-2); }
.ayuda-form { display: flex; gap: 8px; padding: 11px; border-top: 1px solid var(--line-soft); }
.ayuda-form input {
  flex: 1; padding: 10px 13px; border-radius: 10px; font-size: 14px;
  background: var(--bg); border: 1px solid var(--line); color: var(--txt); outline: none;
}
.ayuda-form input:focus { border-color: var(--grass-dk); }
.ayuda-form button { padding: 10px 15px; }
@media (max-width: 480px) { .ayuda-wrap { right: 12px; bottom: 12px; } }

/* los recuadros del dashboard son atajos: se nota que se pueden tocar */
.info-grid.atajos { grid-template-columns: repeat(auto-fit, minmax(126px, 1fr)); }
.atajos .info-box {
  cursor: pointer; font-family: inherit; color: var(--txt); text-align: left;
  transition: border-color .15s, transform .15s;
}
.atajos .info-box:hover { border-color: var(--grass); transform: translateY(-2px); }
.atajos .info-box:focus-visible { outline: 2px solid var(--grass); outline-offset: 2px; }

/* ---- volver a los atajos ----
   Arriba de la burbuja de ayuda, no al lado: en el celular no hay ancho para
   tres cosas flotando en la misma esquina. Empieza invisible y sin poder
   tocarse, así no se come clics cuando no está.                            */
.ir-arriba {
  position: fixed; right: 18px; bottom: 86px; z-index: 90;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); background: var(--panel-2, var(--panel));
  color: var(--txt); font-size: 20px; font-family: inherit; line-height: 1;
  box-shadow: 0 8px 22px -8px rgba(0,0,0,.75);
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .18s, transform .18s, visibility .18s, border-color .15s;
}
.ir-arriba.visible { opacity: 1; visibility: visible; transform: none; }
.ir-arriba:hover { border-color: var(--grass); color: var(--grass); }
.ir-arriba:focus-visible { outline: 2px solid var(--grass); outline-offset: 2px; }

/* ------------------------------ TICKETS ---------------------------------
   Al lado de la burbuja de ayuda, no encima: son dos cosas distintas. El bot
   contesta al toque lo que ya sabemos; el ticket es para lo que necesita que
   un humano lo mire. La burbuja ocupa 56px + 18 de margen, así que este va a
   86px del borde. */
.tk-wrap { position: fixed; right: 86px; bottom: 18px; z-index: 90; }
.tk-btn {
  width: 56px; height: 56px; border-radius: 50%; border: 0; font-size: 23px; cursor: pointer;
  background: linear-gradient(135deg, #8b5cf6, #5b32c4); color: #fff;
  box-shadow: 0 10px 26px -8px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.12);
  display: grid; place-items: center; transition: transform .18s;
}
.tk-btn:hover { transform: scale(1.08); }
.tk-panel {
  display: none; position: absolute; right: 0; bottom: 68px;
  width: min(390px, 92vw); max-height: min(560px, 76vh);
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow);
  flex-direction: column; overflow: hidden;
}
.tk-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 15px; border-bottom: 1px solid var(--line-soft); flex: none;
}
.tk-x { background: none; border: 0; color: var(--txt-mute); font-size: 16px; cursor: pointer; }
.tk-body { padding: 14px 15px; overflow-y: auto; display: grid; gap: 10px; }
.tk-cargando { color: var(--txt-mute); font-size: 13px; text-align: center; padding: 20px; }
.tk-volver { background: none; border: 0; color: var(--grass); font-weight: 700; font-size: 13px; cursor: pointer; text-align: left; padding: 0; }

.tk-item {
  display: grid; gap: 4px; width: 100%; text-align: left; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid var(--line-soft);
  border-radius: 11px; padding: 10px 12px; font-family: inherit;
}
.tk-item:hover { border-color: var(--grass); }
.tk-item-top { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.tk-item-top b { color: var(--txt); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-item-sub { color: var(--txt-mute); font-size: 11.5px; }

.tk-form { display: grid; gap: 12px; }
.tk-form textarea { resize: vertical; font-family: inherit; }
.tk-asunto { display: grid; gap: 2px; }
.tk-asunto b { font-size: 15px; }
.tk-asunto span { color: var(--txt-mute); font-size: 12px; }
/* La captura va como miniatura: un link "ver la captura" obligaba a abrir otra
   pestaña para entender de qué habla la persona. Se limita el alto para que
   una foto vertical de celular no empuje la conversación fuera de pantalla. */
.tk-captura { display: block; margin: 8px 0; border-radius: 10px; overflow: hidden;
  border: 1px solid var(--line-soft); background: rgba(0,0,0,.25); line-height: 0; }
.tk-captura img { display: block; width: 100%; max-height: 260px; object-fit: contain; }
.tk-captura:hover { border-color: var(--grass); }

/* subir la captura: el input de archivo nativo, presentable */
.tk-file { padding: 9px 10px; font-size: 12.5px; cursor: pointer; }
.tk-file::file-selector-button {
  font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  margin-right: 10px; padding: 6px 11px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--panel-2, var(--panel)); color: var(--txt);
}
.tk-file::file-selector-button:hover { border-color: var(--grass); color: var(--grass); }
.tk-link { margin-top: 4px; }
.tk-link summary { cursor: pointer; color: var(--txt-mute); font-size: 12px; font-weight: 700; }
.tk-link input { margin-top: 8px; }

.tk-chat { display: grid; gap: 10px; max-height: 260px; overflow-y: auto; padding: 4px 0; }
.tk-msg-b { padding: 9px 11px; border-radius: 11px; background: rgba(255,255,255,.04); }
.tk-msg-b.admin { background: rgba(139,92,246,.14); border: 1px solid rgba(139,92,246,.3); }
.tk-msg-b .tk-quien { display: block; font-size: 11px; color: var(--txt-mute); font-weight: 700; margin-bottom: 3px; }
.tk-msg-b p { margin: 0; font-size: 13.5px; color: var(--txt-dim); white-space: pre-wrap; }
.tk-msg { font-size: 12.5px; font-weight: 700; margin: 0; }

@media (max-width: 480px) { .tk-wrap { right: 76px; bottom: 12px; } }

/* ---------------------------- CARTERA ----------------------------------- */
.conv-box { display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap; }
.conv-lado { text-align: center; }
.conv-lado b { display: block; font-size: 30px; font-weight: 900; color: var(--txt); letter-spacing: -.5px; }
.conv-lado.gold b { color: var(--gold); }
.conv-lado span { font-size: 13px; color: var(--txt-dim); font-weight: 700; line-height: 1.5; }
.conv-lado small { color: var(--txt-mute); font-weight: 600; }
.conv-igual { font-size: 30px; font-weight: 900; color: var(--grass); }
.pasos { margin: 0 0 14px 20px; color: var(--txt-dim); line-height: 1.9; }
.pasos li { padding-left: 4px; }
.pasos b { color: var(--txt); }


/* ------------------------- INDICADOR DE CARGA --------------------------- */
.cargando { display: flex; gap: 7px; justify-content: center; padding: 60px 0; }
.cargando span {
  width: 10px; height: 10px; border-radius: 50%; background: var(--grass);
  opacity: .35; animation: cargaPulso 1.1s ease-in-out infinite;
}
.cargando span:nth-child(2) { animation-delay: .16s; }
.cargando span:nth-child(3) { animation-delay: .32s; }
@keyframes cargaPulso {
  0%, 80%, 100% { opacity: .25; transform: scale(.8); }
  40%           { opacity: 1;   transform: scale(1.15); }
}

/* respeta a quien pidió menos animaciones en su sistema */
/* ⚠️ EL `body:not(.ov-vivo)` ES LO QUE HACE QUE EL DADO SE MUEVA.
   Esta regla apaga TODAS las animaciones de la página cuando el sistema pide
   menos movimiento, y está bien que exista: es para quien marcó en su
   computadora que no le muevan cosas en pantalla.

   Pero el overlay del stream no es la pantalla de nadie: es un gráfico de
   television que se mete en OBS y lo miran mil personas en Twitch. La
   preferencia del que transmite no tiene por qué apagarle la animación a todos
   los que miran. Y encima el Chromium de OBS suele informar `reduce` solo,
   porque no tiene de dónde sacar la preferencia del sistema.

   El síntoma era exactamente ese: el dado salía quieto con el cartel de
   "Tirando…" al lado. Medido: `animation-duration` calculado en 1e-05s, que es
   justo el `.01ms` de acá abajo. */
@media (prefers-reduced-motion: reduce) {
  body:not(.ov-vivo) *, body:not(.ov-vivo) *::before, body:not(.ov-vivo) *::after {
    animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important;
  }
}


/* ==================== ARREGLOS DE RESPONSIVE (auditoría) ================= */
/* Causa raíz del desborde en celular: los hijos de un grid/flex NO se
   encogen por debajo de su contenido salvo que se les diga. Una tabla ancha
   estiraba todo el contenedor y la página quedaba más ancha que la pantalla. */
.two-col > *, .grid-cards > *, .team-grid > *, .stat-panels > *,
.mini-grid > *, .panel, .prow > *, .oferta-row > *, .acc-row > * { min-width: 0; }

/* cualquier tabla dentro de un panel se desplaza sola en vez de estirar */
.panel table { max-width: 100%; }
#fullTable, #ligaBox { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* textos largos (nombres de club, Discord) cortan en vez de empujar */
.prow-id .nm b, .prow-id .nm span, .acc-id b, .acc-id span,
.rank-id b, .rank-id span, .tc-name h3 {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* red de seguridad: nada puede provocar scroll horizontal en el documento.
   ⚠️ EL `overflow-x` VA SOLO EN <html>, NUNCA TAMBIÉN EN <body>, y esto cuesta
   una tarde entera de no entender nada. El overflow de <html> se propaga a la
   ventana —o sea que recorta igual, la red de seguridad sigue puesta— y <html>
   se queda en `visible`. Pero <body> conserva el suyo, y un `overflow-x`
   distinto de visible convierte a <body> en un contenedor con scroll propio…
   que nunca scrollea, porque el que scrollea es la ventana.

   Consecuencia: TODO `position: sticky` de la página deja de pegarse. No falla,
   no avisa, no tira nada en la consola: el elemento simplemente se va hacia
   arriba como si el sticky no estuviera escrito. El índice del diario
   (.pd-indice) llevaba así desde que se escribió.

   `max-width` sí puede quedarse en los dos: eso no crea ningún scroller. */
html { max-width: 100%; overflow-x: hidden; }
body { max-width: 100%; }

@media (max-width: 720px) {
  /* el formulario del dashboard en una sola columna cómoda */
  .dash-form { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); }
  .dash-card .panel-head { flex-wrap: wrap; gap: 8px; }
  .dash-mini { white-space: normal; font-size: 11.5px; }
  /* filas del mercado sin apretar */
  .venta-head, .toolbar { gap: 8px; }
  .search { min-width: 100%; }
  /* la carta ocupa el ancho disponible sin pasarse */
  .pcard-new { --w: min(268px, 86vw); }
  /* modales cómodos en pantalla chica */
  .modal { padding: 18px 16px 16px; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; justify-content: center; }
  /* cartera: la conversión no se desarma */
  .conv-box { gap: 12px; }
  .conv-lado b { font-size: 24px; }
}

@media (max-width: 420px) {
  .hero-stats { gap: 14px; }
  .hero-stats .st b { font-size: 22px; }
  .stat-strip, .info-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
  .oferta-acts { width: 100%; }
  .oferta-acts .btn { flex: 1; justify-content: center; }
}


/* ============ RESPONSIVE v2 — barra y asistente en celular ============== */
/* Problema detectado: en pantallas chicas la barra amontonaba logo, nombre,
   Discord, Twitch, carrito, saldo, campana y foto. Todo encimado.
   Solución: en celular se muestra lo esencial y el resto va al menú ☰. */

@media (max-width: 900px) {
  .nav-inner { gap: 8px; height: 58px; }
  .nav-right { gap: 6px; }
}

/* Los íconos se van al menú ☰ EN EL MISMO ANCHO en que aparece el ☰, ni antes
   ni después. Estaban en 900 mientras el ☰ salía en 860, y esos 40px de
   diferencia eran una banda donde no había forma de llegar a ellos.
   Si algún día se mueve uno de los dos cortes, hay que mover el otro. */
@media (max-width: 1240px) {
  .nav-right .btn-discord,
  .nav-right .btn-twitch,
  .nav-right .btn-donar,
  .nav-right .nav-cta { display: none; }
}
/* y para las cuentas con rol, en su propio corte.
   ⚠️ EL `.nav-right` NO ES DECORATIVO. Sin él, `.nav.nav-plus .btn-discord`
   también le pega a los botones de adentro del menú ☰ —que son los mismos
   botones con las mismas clases— y entonces se esconden en los dos lados a la
   vez: los sacás de la barra y tampoco aparecen en el menú. */
@media (max-width: 1400px) {
  .nav.nav-plus .nav-right .btn-discord,
  .nav.nav-plus .nav-right .btn-twitch,
  .nav.nav-plus .nav-right .btn-donar,
  .nav.nav-plus .nav-right .nav-cta { display: none; }
}

@media (max-width: 560px) {
  /* no entra "DiosesLeague": queda el logo + el monograma DL */
  .brand .brand-full { display: none; }
  .brand .brand-short { display: inline-block; }
  .brand { gap: 7px; }
  .brand .logo-img { width: 34px; height: 34px; }
  .nav-inner { gap: 6px; }
  .nav-right { gap: 5px; }
  .wallet-chip { padding: 7px 9px; font-size: 12.5px; }
  .wallet-chip .w-ic { font-size: 11px; }
  .bell-btn, .nav-burger { width: 34px; height: 34px; font-size: 14px; }
  #sessionSlot .btn-icon { width: 34px; height: 34px; }
  .session-avatar { width: 22px; height: 22px; min-width: 22px; }
}

/* el menú ☰ ahora también trae los accesos que se ocultaron */
.nav-mobile .nav-extra {
  display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 10px 4px;
  border-top: 1px solid var(--line-soft); margin-top: 6px;
}
.nav-mobile .nav-extra .btn { flex: 1; justify-content: center; min-width: 96px; }
/* "Donaciones para Dioses League" no entra compartiendo fila con Discord y
   Twitch: con white-space:nowrap estiraba la fila y los apretaba. Se lleva su
   propio renglón. */
.nav-mobile .nav-extra .btn-donar { flex-basis: 100%; }

/* ---------------------- ASISTENTE a pantalla completa ------------------- */
/* Antes el panel se salía de la pantalla y no se leía. En celular ahora
   ocupa toda la pantalla, como una app de mensajería. */
@media (max-width: 620px) {
  .ayuda-wrap { right: 14px; bottom: 14px; }
  .ayuda-panel {
    position: fixed; inset: 0; width: 100%; height: 100%;
    border-radius: 0; border: 0; max-height: none;
  }
  .ayuda-panel.open { display: flex; }
  .ayuda-head { padding: 16px; font-size: 16px; padding-top: max(16px, env(safe-area-inset-top)); }
  .ayuda-x { font-size: 22px; padding: 4px 8px; }
  .ay-msg { max-width: 92%; font-size: 15px; }
  .ay-chips button { font-size: 14px; padding: 12px 14px; }
  .ayuda-form { padding: 12px; padding-bottom: max(12px, env(safe-area-inset-bottom)); }
  .ayuda-form input { font-size: 16px; }   /* 16px evita que el iPhone haga zoom */
}


/* ============ COLORES POR NIVEL (atributos y stats de la carta) ========== */
/* 50-59 rojo · 60-69 naranja · 70-79 amarillo · 80-99 verde · 100 celeste  */
.attr-bar .fill { transition: width .4s ease; }
.attr-bar.n-malo  .fill { background: linear-gradient(90deg, #a12727, #ef4444); }
.attr-bar.n-flojo .fill { background: linear-gradient(90deg, #b45309, #f59e0b); }
.attr-bar.n-medio .fill { background: linear-gradient(90deg, #a16207, #facc15); }
.attr-bar.n-bien  .fill { background: linear-gradient(90deg, var(--grass-dk), var(--grass)); }
.attr-bar.n-neon  .fill { background: linear-gradient(90deg, #21a5c9, #5eeaff);
  box-shadow: 0 0 10px -1px rgba(94,234,255,.8); }
.attr-bar.n-malo  .top b { color: #ff8080; }
.attr-bar.n-flojo .top b { color: #ffb14d; }
.attr-bar.n-medio .top b { color: #ffe066; }
.attr-bar.n-bien  .top b { color: #7ee79a; }
.attr-bar.n-neon  .top b { color: #7df0ff; text-shadow: 0 0 8px rgba(125,240,255,.7); }

.pn-stats .s-malo  b { color: #ff7b7b; }
.pn-stats .s-flojo b { color: #ffab4d; }
.pn-stats .s-medio b { color: #ffdf5c; }
.pn-stats .s-bien  b { color: #6ee79a; }
.pn-stats .s-neon  b { color: #7df0ff; text-shadow: 0 0 9px rgba(125,240,255,.75); }
.pn-stats .s-malo  svg { fill: #ff7b7b; } .pn-stats .s-flojo svg { fill: #ffab4d; }
.pn-stats .s-medio svg { fill: #ffdf5c; } .pn-stats .s-bien  svg { fill: #6ee79a; }
.pn-stats .s-neon  svg { fill: #7df0ff; }

/* ---- el chip del equipo/LIBRE ahora siempre se lee ---- */
.pn-team {
  background: rgba(0,0,0,.55) !important; color: #fff !important;
  box-shadow: inset 0 0 0 1px var(--acc), 0 .3em .7em -.15em rgba(0,0,0,.5) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.9);
}

/* ---- 90-99: dorada con el reflejo celeste que barre (como antes) ---- */
.pcard-new.n-elite {
  --acc: #ffd23f; --acc2: #ffe066; --sub: #cbbf8e;
  background: linear-gradient(150deg,#7d5f14 0%,#3a2b07 32%,#9c7717 52%,#2e2205 74%,#664c11 100%);
}
.pcard-new.n-elite::after {
  background: linear-gradient(100deg, transparent 10%,
    rgba(120,230,255,.55), rgba(190,245,255,.75), rgba(120,230,255,.5), transparent 90%) !important;
  animation-duration: 3.4s !important;
  filter: blur(.5px);
}
@keyframes nGlowElite {
  0%,100% { box-shadow: 0 1.6em 3em -1.2em rgba(0,0,0,.8), inset 0 0 0 1px rgba(255,214,90,.4),
                        0 0 1.6em -.8em rgba(102,220,255,.5); }
  50%     { box-shadow: 0 1.6em 3em -1.2em rgba(0,0,0,.8), inset 0 0 0 1px rgba(150,235,255,.75),
                        0 0 3em -.3em rgba(102,220,255,.9); }
}

/* La columna de arriba a la derecha de la carta va APILADA:
       bandera del país  →  escudo del club  →  las iniciales
   Antes el escudo y las iniciales compartían un mismo chip en línea y quedaba
   apretado. El escudo se dibuja apenas más chico que la bandera (2.2em contra
   los 2.6em de la bandera), que es como se ve equilibrado.
   Se fuerza a em porque la carta entera se mide en em: así el escudo crece y
   se achica junto con ella. */
.pn-crest { display: grid; justify-items: center; flex: none; }
.pn-crest .crest-img,
.pn-crest .crest-wrap,
.pn-crest .team-crest,
.pn-crest svg { width: 2.4em !important; height: 2.4em !important; }
/* ya sin escudo adentro, la chapa de las iniciales puede ser más compacta */
.pn-team { padding: .3em .75em; font-size: .95em; letter-spacing: .06em; }

/* resumen arriba de cada lista de negociaciones */
.oferta-resumen {
  padding: 10px 16px; font-size: 13px; color: var(--txt-dim);
  border-bottom: 1px solid var(--line-soft); background: rgba(255,255,255,.02);
}

/* ---- la fila de negociación se pisaba a sí misma ----
   Causa: el arreglo de responsive de la auditoría le puso min-width:0 a TODOS
   los hijos de .oferta-row para que nada desbordara en celular. Eso también
   dejó que la columna del monto se encoja por debajo de su propio texto, y
   "PROPUSISTE VOS" / "TE PROPONEN" es bastante más ancho que "15.800 LC": se
   salía de su columna y aterrizaba encima de "negociás con el otro club".
   Se resuelve al revés de como parece: el monto NO se encoge (es corto y
   siempre tiene que leerse entero) y el que cede es el nombre de la izquierda,
   que corta con puntitos. Los selectores van con > para ganarle en
   especificidad a la regla de la auditoría, que está más arriba. */
.oferta-row > .oferta-monto { min-width: max-content; }
.oferta-row > .oferta-monto b,
.oferta-row > .oferta-monto span { white-space: nowrap; }

.oferta-row > .prow-id .nm { min-width: 0; }
.oferta-row > .prow-id .nm b,
.oferta-row > .prow-id .nm span {
  display: block; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* en celular la fila pasa a dos columnas y los botones bajan solos: ahí el
   monto tampoco tiene que competir con el nombre */
@media (max-width: 620px) {
  .oferta-row > .oferta-monto { text-align: right; }
}

/* ------------- los pasos para entrar a la liga (Mi perfil) -------------- */
.pasos-liga { list-style: none; counter-reset: paso; margin: 0; padding: 8px 18px 18px; }
.pasos-liga li {
  counter-increment: paso; position: relative; padding: 0 0 18px 42px;
  border-left: 2px solid var(--line-soft); margin-left: 13px;
}
.pasos-liga li:last-child { border-left-color: transparent; padding-bottom: 4px; }
.pasos-liga li::before {
  content: counter(paso); position: absolute; left: -14px; top: -2px;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  background: var(--panel-2); border: 1px solid var(--line);
  color: var(--txt-mute); font-size: 12.5px; font-weight: 800;
}
.pasos-liga li.paso-ok::before {
  content: "✓"; background: var(--grass); border-color: var(--grass); color: #08120b;
}
.pasos-liga li.paso-ok { border-left-color: rgba(55, 194, 74, .4); }
.pasos-liga b { display: block; font-size: 15.5px; margin-bottom: 3px; }
.pasos-liga span { display: block; color: var(--txt-dim); font-size: 13.5px; line-height: 1.5; max-width: 62ch; }
.pasos-liga .btn { margin-top: 10px; }

/* ------------------------- PARTIDOS (fixture) --------------------------- */
.partido-list { display: flex; flex-direction: column; }
.partido-row {
  display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center;
  padding: 14px 18px; border-bottom: 1px solid var(--line-soft);
}
.partido-row:last-child { border-bottom: none; }
.p-fecha b { display: block; font-size: 14px; text-transform: capitalize; }
.p-fecha span { font-size: 12.5px; color: var(--txt-mute); }
.p-vs { display: flex; align-items: center; gap: 12px; font-weight: 700; }
.p-eq { display: flex; align-items: center; gap: 8px; font-size: 14.5px; }
.p-eq.der { justify-content: flex-end; }
.p-marcador {
  font-family: ui-monospace, Consolas, monospace; font-size: 17px; font-weight: 800;
  color: var(--gold); min-width: 58px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.p-acts { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.p-acts .btn { font-size: 12px; padding: 7px 10px; }
.p-notas { grid-column: 1 / -1; font-size: 13px; color: var(--txt-dim); }
@media (max-width: 860px) {
  .partido-row { grid-template-columns: 1fr; gap: 10px; }
  .p-vs { justify-content: space-between; }
  .p-eq.der { justify-content: flex-start; }
  .p-acts { justify-content: flex-start; }
}

/* ======================= EL PERIÓDICO (fase 83) ==========================
   Papel, no pantalla. El resto del sitio es oscuro y esto es sepia a
   propósito: abrir el diario tiene que sentirse como abrir otra cosa, no como
   otra pestaña de lo mismo.

   Las tipografías son las de sistema con serifas (Georgia y compañía). No se
   traen de ningún lado: la CSP no deja, no hay build, y una fuente de diario
   descargada son 200 KB para que la gente con conexión lenta vea la página
   armarse dos veces.                                                        */
.pd-fondo {
  background: #14100a;
  padding: 26px 14px 60px;
  min-height: 70vh;
}
.pd-hoja {
  max-width: 940px; margin-inline: auto;
  background: #f3e7cf;
  color: #211c14;
  padding: 34px 38px 30px;
  border-radius: 3px;
  box-shadow: 0 18px 50px rgba(0,0,0,.55);
  font-family: Georgia, "Times New Roman", "Nimbus Roman", serif;
  /* la manchita del papel viejo: dos degradados muy suaves, nada de imágenes */
  background-image:
    radial-gradient(ellipse at 12% 8%,  rgba(160,120,60,.10), transparent 55%),
    radial-gradient(ellipse at 88% 92%, rgba(120,90,40,.09),  transparent 60%);
}

/* ---- la cabecera, con sus filetes ---- */
.pd-cabecera { text-align: center; border-bottom: 3px double #2b2318; padding-bottom: 14px; margin-bottom: 22px; }
.pd-linea-fina {
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase;
  color: #6b5a3e; border-bottom: 1px solid #c9b48c; padding-bottom: 8px; margin-bottom: 10px;
}
.pd-nombre {
  font-size: clamp(34px, 7vw, 62px); line-height: 1; margin: 0 0 10px;
  font-weight: 900; letter-spacing: -1px; color: #17130d;
}
.pd-datos {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 20px;
  font-size: 12px; color: #5d4e35; letter-spacing: .6px; text-transform: uppercase;
}

/* ---- la nota de tapa ---- */
.pd-portada { text-align: center; margin-bottom: 26px; }
.pd-titular {
  font-size: clamp(26px, 5.2vw, 44px); line-height: 1.08; margin: 0 0 10px;
  font-weight: 900; color: #17130d;
}
.pd-bajada { font-size: 17px; font-style: italic; color: #4a3f2c; margin: 0 auto 14px; max-width: 640px; }
.pd-firma { font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #7a6844; margin-bottom: 14px; }
/* ⚠️ SIN hyphens: auto. Con guion automatico el navegador parte palabras al
   final de la columna, y en un texto a dos columnas eso deja media palabra de
   un lado y media del otro: se leyo "amistoso con cha-" | "lecos, azules
   contra verdes". Un diario de verdad separa en silabas bien; el navegador lo
   hace donde le cae, y encima justo en el salto de columna.
   Sin guiones el justificado abre un poco mas los espacios, que es mucho menos
   feo que una palabra rota al medio. */
.pd-cuerpo { text-align: justify; hyphens: none; -webkit-hyphens: none; }
/* Y lo resaltado no se parte NUNCA entre columnas: si algo esta marcado para
   que se lea de un vistazo, partirlo a la mitad lo arruina. */
.pd-cuerpo strong, .pd-cuerpo .pd-marca, .pd-cuerpo em {
  break-inside: avoid; -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
/* ⚠️ UN PÁRRAFO NO SE PARTE ENTRE COLUMNAS. En la portada quedaba
   "un lugar propio" al final de la columna izquierda y "donde entrenar" arriba
   de la derecha, cortando una frase en negrita al medio y dejando un hueco.
   En un titular de tapa eso es lo primero que se ve.
   break-inside en el <strong> no alcanza: es un elemento en línea y el corte
   lo decide el párrafo que lo contiene. Los párrafos de este diario son
   cortos, así que mantenerlos enteros no deja columnas desparejas. */
.pd-cuerpo p { margin: 0 0 11px; font-size: 15.5px; line-height: 1.62; break-inside: avoid; }
.pd-portada .pd-cuerpo { columns: 2; column-gap: 32px; column-rule: 1px solid #d3c09a; text-align: justify; }

/* ---- las notas de adentro ---- */
.pd-notas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px; border-top: 1px solid #c9b48c; padding-top: 20px; margin-bottom: 8px;
}
.pd-nota h3 {
  font-size: 20px; margin: 0 0 8px; font-weight: 800; color: #17130d;
  border-bottom: 2px solid #2b2318; padding-bottom: 5px;
}

/* ---- las secciones automáticas ---- */
.pd-secciones {
  border-top: 3px double #2b2318; margin-top: 22px; padding-top: 20px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 24px 32px;
}
.pd-sec h2 {
  font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; color: #17130d;
  margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid #2b2318;
}
/* ⚠️ UNA LISTA NO SE PARTE ENTRE COLUMNAS. Pasaba que el primer punto quedaba
   al final de la columna izquierda y los otros tres arriba de la derecha: se
   lee como dos listas distintas y encima queda feo. Una lista es una unidad.
   Va en el <ul> Y en el <li>: el <li> solo evita que se corte un renglón al
   medio, pero no impide que la lista se reparta entre columnas. */
.pd-cuerpo ul.pd-ul { break-inside: avoid; page-break-inside: avoid; }
.pd-cuerpo ul.pd-ul li { break-inside: avoid; }

.pd-lista { list-style: none; margin: 0; padding: 0; }
.pd-lista li {
  font-size: 14px; line-height: 1.45; padding: 6px 0;
  border-bottom: 1px dotted #c2ad85; display: flex; gap: 7px; align-items: baseline; flex-wrap: wrap;
}
.pd-lista li:last-child { border-bottom: 0; }
.pd-fecha { font-size: 11.5px; color: #7a6844; letter-spacing: .5px; white-space: nowrap; }
.pd-tag {
  font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  background: #e3d3b1; color: #5d4e35; padding: 2px 6px; border-radius: 3px;
}
.pd-resultados li b { font-size: 16px; }
.pd-eq { flex: 1; min-width: 0; }
.pd-rank .pd-n {
  font-weight: 900; color: #8a7448; min-width: 16px;
}
.pd-rank .pd-club { color: #6b5a3e; font-size: 12.5px; flex: 1; }
.pd-rank .pd-cifra { font-weight: 800; white-space: nowrap; }

.pd-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pd-tabla th {
  text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
  color: #6b5a3e; border-bottom: 1px solid #2b2318; padding: 4px 5px;
}
.pd-tabla td { padding: 5px; border-bottom: 1px dotted #c2ad85; }
.pd-tabla td:first-child { color: #8a7448; font-weight: 800; width: 22px; }

.pd-pie {
  margin-top: 26px; border-top: 3px double #2b2318; padding-top: 12px;
  text-align: center; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; color: #6b5a3e;
}


@media (max-width: 700px) {
  .pd-hoja { padding: 22px 18px 20px; }
  /* Una sola columna: el texto justificado en dos columnas de 140px es
     ilegible, y es exactamente lo que pasa en un celular. */
  .pd-portada .pd-cuerpo { columns: 1; }
  .pd-secciones { grid-template-columns: 1fr; }
}

/* El acceso al diario, arriba a la derecha del noticiero: justo el hueco que
   quedaba vacío al lado del título. Es de papel aunque esté sobre el sitio
   oscuro, para que se entienda de un vistazo que lleva a otra cosa. */
.nt-head { display: flex; justify-content: space-between; align-items: center; gap: 18px; flex-wrap: wrap; }
.nt-diario {
  display: flex; align-items: center; gap: 12px; text-decoration: none;
  background: linear-gradient(180deg, #f3e7cf, #e6d5b3);
  color: #211c14; padding: 12px 18px; border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0,0,0,.4); border: 1px solid #cbb68e;
  transition: .15s;
}
.nt-diario:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,.5); }
.nt-diario .ntd-ic { font-size: 26px; line-height: 1; }
.nt-diario .ntd-txt { display: grid; font-family: Georgia, "Times New Roman", serif; }
.nt-diario .ntd-txt b { font-size: 16.5px; font-weight: 900; letter-spacing: -.2px; }
.nt-diario .ntd-txt span { font-size: 11.5px; color: #6b5a3e; letter-spacing: .4px; }
@media (max-width: 560px) { .nt-diario { width: 100%; justify-content: center; } }

/* ---- la fila del plantel, en Mi equipo ----
   ⚠️ REDISEÑADA. Antes eran CINCO columnas (media, nombre, posicion, numeros,
   controles) y la del nombre podia encogerse hasta desaparecer: con los
   numeros y los tres controles peleando por el ancho, el nombre quedaba en una
   letra y el chip de posicion terminaba PISANDOLO. Se veia "F" con DEL encima.

   Ahora son TRES: media, un bloque de datos que se estira, y los controles.
   Adentro del bloque van dos renglones —identidad arriba, plata abajo— y el
   nombre es lo unico que puede encoger. Una sola columna flexible no se pelea
   con nadie. */
.prow-plantel {
  grid-template-columns: 40px 42px minmax(0, 1fr) auto;
  gap: 12px; align-items: center; padding: 12px 14px;
}
.prow-plantel .skin { flex: none; }

.pp-datos { display: grid; gap: 5px; min-width: 0; }
.pp-linea1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.pp-nom {
  font-weight: 800; font-size: 15.5px; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pp-dorsal { color: var(--txt-mute); font-weight: 700; font-size: 13px; }
.pp-linea2 { display: flex; gap: 16px; flex-wrap: wrap; }
.pp-linea2 span { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.pp-linea2 i {
  font-style: normal; font-size: 10px; letter-spacing: .6px; text-transform: uppercase;
  color: var(--txt-mute); font-weight: 700;
}
.pp-linea2 b { font-size: 13.5px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* La clausula en dorado: es el numero que le importa al presidente, porque es
   a partir de ahi que pierde la palabra sobre ese jugador. */
.pp-cl { color: var(--gold); }

.pp-acciones { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pp-acciones .f-input { width: 104px; }
.pp-acciones .btn { font-size: 12px; padding: 8px 10px; white-space: nowrap; }

/* En angosto la fila se acomoda sola en vez de pelearse por cuatro columnas:
   los controles bajan y toman el ancho completo. */
@media (max-width: 860px) {
  .prow-plantel { grid-template-columns: 38px 40px minmax(0, 1fr); }
  .pp-acciones { grid-column: 1 / -1; justify-content: flex-start; }
}


/* ======================= EL LECTOR DEL DIARIO ===========================
   El diario se abre encima de lo que estabas mirando y se pasa de pagina.
   El mismo lector se usa en el pop-up del noticiero, en la pagina /periodico
   y en la vista previa del dashboard.                                      */
.pd-modal { padding: 16px; }
/* ⚠️ height, NO max-height. Con max-height la caja también se encoge a su
   contenido, y entonces el flex:1 del lector no tiene nada que llenar: cada
   página quedaba del alto de su propio texto y el botón se movía. Es el
   eslabón que me faltaba y por el que estuve dando vueltas. */
.pd-caja {
  position: relative; width: min(980px, 96vw);
  height: min(94vh, 900px);
  display: flex; flex-direction: column;
}
.pd-cerrar {
  position: absolute; top: -6px; right: -6px; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%; border: 1px solid #cbb68e;
  background: #f3e7cf; color: #211c14; font-size: 17px; font-weight: 900;
  cursor: pointer; box-shadow: 0 4px 14px rgba(0,0,0,.5);
}
.pd-cerrar:hover { background: #fff6e4; }
.pd-previo {
  position: absolute; top: -6px; left: 0; z-index: 3;
  background: var(--gold); color: #1a1408; font-size: 11px; font-weight: 900;
  letter-spacing: 1px; text-transform: uppercase; padding: 5px 11px; border-radius: 999px;
}

.pd-lector { display: flex; flex-direction: column; min-height: 0; }

/* la barra de arriba: que numero es y como ir a los anteriores */
.pd-barra {
  position: relative; display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap; margin-bottom: 10px; padding-right: 46px;
}
.pd-cual { color: var(--txt-dim); font-size: 13px; }
.pd-numeros:disabled { opacity: .35; cursor: default; }

/* la lista de numeros anteriores */
.pd-menu {
  position: absolute; top: 100%; left: 0; z-index: 5; margin-top: 6px;
  background: var(--panel); border: 1px solid var(--line-soft); border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0,0,0,.6); padding: 6px;
  max-height: 320px; overflow-y: auto; min-width: 280px;
}
.pd-menu button {
  display: grid; width: 100%; text-align: left; gap: 1px; padding: 9px 11px;
  background: transparent; border: 0; border-radius: 8px; cursor: pointer; color: var(--txt);
}
.pd-menu button:hover { background: rgba(255,255,255,.06); }
.pd-menu button.act { background: rgba(55,194,74,.12); }
.pd-menu button b { font-size: 14px; }
.pd-menu button span { font-size: 11.5px; color: var(--txt-mute); }
.pd-menu button i { font-size: 12.5px; color: var(--txt-dim); font-style: italic; }

/* la hoja, que ahora es UNA pagina y no el diario entero */
/* ⚠️ TODAS LAS HOJAS MIDEN LO MISMO. Antes la hoja crecía con su contenido y
   las páginas iban de 290 a 642 px: el botón "Siguiente" se movía de lugar en
   cada vuelta, y como el diario se cierra al tocar afuera, apuntarle al botón
   viejo te sacaba del diario. Un lector no tiene que apuntar.
   El truco es darle altura acá: la hoja ya era flex:1 con overflow, o sea que
   estaba esperando un alto y nadie se lo daba. */
/* ⚠️ ACÁ ESTABA EL ERROR DE VERDAD, y no en la hoja.
   .pd-caja ya estaba limitada a 94vh, pero .pd-lector no la llenaba: sin
   flex:1 se encogía a su contenido, y entonces el flex:1 de la hoja crecía
   contra el CONTENIDO en vez de contra la caja. De ahí salía todo: páginas de
   distinto alto, el botón moviéndose, y —cuando le puse overflow:visible para
   tapar eso— la foto cortada y la rueda del mouse muerta.
   Con esta línea la hoja mide siempre lo mismo, el scroll interno vuelve a
   funcionar y el botón queda quieto sin ningún truco. */
.pd-lector { flex: 1; min-height: 0; }
.pd-lector .pd-hoja {
  flex: 1; min-height: 0;
  overflow-y: auto;
  margin: 0; max-width: none;
  /* en columna para poder mandar el folio abajo de todo */
  display: flex; flex-direction: column;
}
/* ⚠️ EL ARTÍCULO NO SE ESTIRA. Estirarlo (flex:1) le daba a las columnas un
   alto definido, y ahí el navegador deja de repartir el texto en dos columnas
   y empieza a FRAGMENTAR: aparecían columnas de más, la línea divisoria
   cruzaba el texto y el número de página quedaba en el medio de la hoja. Se
   veía roto y era esto.
   El contenido va con su alto natural, y lo que sobra se reparte arriba y
   abajo para que quede centrado en la hoja en vez de pegado al techo con un
   hueco enorme abajo. */
/* ⚠️ NADA DE margin:auto PARA CENTRAR ACÁ. La hoja scrollea, y un margen
   automático sobre un elemento flex que desborda deja la parte de arriba
   inalcanzable: no hay forma de scrollear hasta ella. El contenido arranca
   arriba y el folio se va al fondo, que es lo que hace un diario. */
.pd-lector .pd-hoja > article { flex: 0 0 auto; }
.pd-lector .pd-folio { margin-top: auto; }
.pd-folio {
  text-align: center; margin-top: 22px; padding-top: 10px;
  border-top: 1px solid #c9b48c; color: #7a6844; font-size: 12px; letter-spacing: 2px;
}

/* pasar de pagina */
/* La botonera no necesita ningún truco para quedarse quieta: la hoja de arriba
   mide siempre lo mismo, así que ésta cae siempre en el mismo lugar. Le puse
   sticky en un intento anterior y sobraba. */
.pd-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 12px; flex-wrap: wrap;
}
.pd-nav button:disabled { opacity: .3; cursor: default; }
.pd-paginas { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center; }
.pd-punto {
  width: 9px; height: 9px; border-radius: 50%; padding: 0; cursor: pointer;
  border: 1px solid #b9a377; background: transparent; transition: .15s;
}
.pd-punto:hover { background: #b9a377; transform: scale(1.3); }
.pd-punto.act { background: #f3e7cf; border-color: #f3e7cf; }
.pd-cuenta { color: var(--txt-mute); font-size: 12px; margin-left: 6px; }

/* una nota sola ocupando su pagina: se le da aire para que no quede pegada
   arriba en una hoja casi vacia */
.pd-nota-sola { padding-top: 8px; }
.pd-nota-sola h3 { font-size: 26px; }
.pd-nota-sola .pd-cuerpo { columns: 2; column-gap: 32px; column-rule: 1px solid #d3c09a; }

@media (max-width: 700px) {
  .pd-modal { padding: 10px; }
  .pd-caja { max-height: 96vh; }
  .pd-cerrar { top: -4px; right: -4px; width: 34px; height: 34px; }
  .pd-nota-sola .pd-cuerpo { columns: 1; }
  .pd-nav .btn { font-size: 12.5px; padding: 8px 11px; }
}

/* ---- las marcas del diario (fase 84) ----
   Lo que se pega con ###, -, !! y "" se dibuja acá. Le da variedad a la
   pagina: un diario que son ocho parrafos iguales no lo lee nadie. */
.pd-sub {
  font-size: 15px; font-weight: 900; margin: 14px 0 6px; color: #17130d;
  letter-spacing: .2px; break-after: avoid;
}
.pd-ul { margin: 0 0 11px; padding-left: 20px; }
.pd-ul li { font-size: 15px; line-height: 1.55; margin-bottom: 3px; }
.pd-destacado {
  margin: 12px 0; padding: 12px 14px; break-inside: avoid;
  background: rgba(160,120,60,.11); border-left: 4px solid #8a7448;
  font-size: 15px; line-height: 1.5; font-weight: 600;
}
.pd-cita {
  margin: 14px 0; padding: 4px 0 4px 16px; border-left: 3px solid #c2ad85;
  font-size: 19px; line-height: 1.4; font-style: italic; color: #3b3222;
  break-inside: avoid;
}
.pd-ayuda {
  background: rgba(0,0,0,.28); border: 1px solid var(--line-soft); border-radius: 8px;
  padding: 11px 13px; font-size: 12.5px; line-height: 1.6; color: var(--txt-dim);
  overflow-x: auto; margin: 8px 0 0; white-space: pre;
}

/* ---- elegir skin, para los que no tienen premium (fase 84) ---- */
.skin-elec {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 12px;
}
.skin-op {
  display: grid; justify-items: center; gap: 6px; padding: 10px 6px 8px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line-soft);
  border-radius: 12px; cursor: pointer; transition: .15s; color: var(--txt-dim);
}
.skin-op:hover { border-color: var(--grass-dk); transform: translateY(-2px); }
.skin-op.act { border-color: var(--grass); background: rgba(55,194,74,.10); color: var(--txt); }
.skin-op img { width: 100%; max-width: 78px; height: auto; display: block; }
.skin-op span { font-size: 12px; font-weight: 700; }

/* ================= EL DIARIO NEGRO (fase 85) =============================
   La esquina doblada abajo a la derecha de la hoja. Tiene que verse poco:
   un huevo de pascua que grita deja de ser un huevo de pascua. Se nota al
   pasar el mouse por encima y en el celular esta ahi para el que la toque. */
.pd-esquina {
  position: absolute; right: 0; bottom: 0; width: 34px; height: 34px;
  padding: 0; border: 0; cursor: pointer; background: transparent;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  transition: .18s;
}
.pd-esquina::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 50%, #d9c6a2 50%, #b39c70 100%);
  opacity: .55; transition: .18s;
}
.pd-esquina:hover { width: 52px; height: 52px; }
.pd-esquina:hover::after { opacity: 1; }
.pd-lector .pd-hoja { position: relative; }

/* la hoja dada vuelta: mismo papel, tinta al reves */
.pd-hoja.pd-negro {
  background: #14110c; color: #e6dcc6;
  background-image:
    radial-gradient(ellipse at 15% 10%, rgba(200,160,90,.07), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(160,120,50,.06), transparent 60%);
}
.pdn-cab { text-align: center; border-bottom: 3px double #6b5a3e; padding-bottom: 14px; margin-bottom: 22px; }
.pdn-linea {
  font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #9a855c;
  border-bottom: 1px solid #4a3f2c; padding-bottom: 8px; margin-bottom: 10px;
}
.pdn-nombre {
  font-size: clamp(30px, 6vw, 52px); line-height: 1; margin: 0 0 8px;
  font-weight: 900; letter-spacing: -1px; color: #f0e6cf;
}
.pdn-sub { font-size: 12px; color: #9a855c; letter-spacing: 1.4px; text-transform: uppercase; }
.pdn-nota { margin-bottom: 24px; }
.pdn-nota h3 {
  font-size: 23px; margin: 0 0 10px; font-weight: 800; color: #f0e6cf;
  border-bottom: 2px solid #6b5a3e; padding-bottom: 6px;
}
/* el cuerpo hereda de .pd-cuerpo pero con la tinta al reves */
.pd-negro .pd-cuerpo p, .pd-negro .pd-ul li { color: #ddd2ba; }
.pd-negro .pd-sub { color: #f0e6cf; }
.pd-negro .pd-destacado {
  background: rgba(200,160,90,.09); border-left-color: #9a855c; color: #f0e6cf;
}
.pd-negro .pd-cita { border-left-color: #6b5a3e; color: #cdbf9f; }
.pdn-pie { text-align: center; border-top: 3px double #6b5a3e; padding-top: 16px; margin-top: 10px; }

/* ============ EL DIARIO, SEGUNDA MANO DE PINTURA (fase 85+) ==============
   Papel de verdad, color en los titulares y lugar para las skins y las
   viñetas. Antes eran siete paginas de texto corrido y pesaba leerlo.      */

/* ---- el papel ----
   Tres capas encima del sepia: fibras finas cruzadas, manchas de humedad y un
   veteado suave. Todo con degradados, nada de imagenes: la CSP no deja traer
   archivos y una textura en PNG son cien kilobytes por cada visita. */
.pd-hoja {
  background-image:
    repeating-linear-gradient(90deg, rgba(120,90,45,.030) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  rgba(120,90,45,.026) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse 40% 30% at 12% 8%,  rgba(150,110,50,.13), transparent 70%),
    radial-gradient(ellipse 35% 25% at 88% 92%, rgba(125,95,42,.12), transparent 70%),
    radial-gradient(ellipse 30% 40% at 96% 30%, rgba(140,105,48,.10), transparent 70%),
    radial-gradient(ellipse 25% 20% at 4% 68%,  rgba(140,105,48,.09), transparent 70%),
    linear-gradient(168deg, #f6ebd6 0%, #f1e4c9 45%, #ecdcbd 100%);
  box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 0 70px rgba(120,90,45,.10);
}
/* el borde apenas gastado, como una hoja que se manipulo */
.pd-lector .pd-hoja { border: 1px solid rgba(120,90,45,.30); }

/* ---- color en los titulares ----
   El rojo de tinta es el que usan los diarios para lo que quieren que se lea
   primero. Se reserva para los titulos de nota y para los realces: si se usara
   en todos lados dejaria de destacar nada. */
.pd-hoja { --tinta-roja: #a8321f; --tinta-suave: #7a6844; }
.pd-nota h3, .pd-nota-sola h3 {
  color: var(--tinta-roja);
  border-bottom: 2px solid rgba(168,50,31,.35);
}
.pd-sub { color: var(--tinta-roja); }
.pd-sec h2 { color: var(--tinta-roja); border-bottom-color: rgba(168,50,31,.4); }
.pd-titular { color: #16120c; }
.pd-marca {
  background: linear-gradient(180deg, transparent 58%, rgba(247,201,72,.55) 58%);
  color: inherit; padding: 0 2px; border-radius: 2px;
}
.pd-negro { --tinta-roja: #e8836f; --tinta-suave: #9a855c; }
.pd-negro .pd-marca { background: linear-gradient(180deg, transparent 58%, rgba(200,160,90,.40) 58%); }

/* ---- las skins de los jugadores ----
   Van flotadas: el texto las rodea como en un diario, en vez de partir la
   pagina en dos. */
.pd-figura {
  float: right; width: 132px; margin: 2px 0 10px 18px; text-align: center;
  break-inside: avoid;
}
.pd-figura-hueco {
  background: radial-gradient(ellipse at 50% 88%, rgba(120,90,45,.20), transparent 62%);
  min-height: 108px; display: flex; align-items: flex-end; justify-content: center;
}
.pd-figura img { width: 100%; height: auto; display: block; filter: drop-shadow(0 5px 9px rgba(0,0,0,.30)); }
.pd-figura figcaption {
  font-size: 11.5px; line-height: 1.35; color: var(--tinta-suave);
  border-top: 1px solid rgba(120,90,45,.35); padding-top: 5px; margin-top: 5px;
  font-style: italic;
}
.pd-negro .pd-figura figcaption { color: #9a855c; border-top-color: #4a3f2c; }
/* En la portada, que es a dos columnas, una figura flotada de 132px deja
   columnas de nada. Ahi va centrada y ocupando su propio bloque. */
.pd-portada .pd-figura { float: none; width: 150px; margin: 10px auto 14px; }

/* El campo de la clave del Diario Negro. Fuera de la vista, NO con
   display:none: un campo con display:none no se puede enfocar y entonces el
   teclado del celular no sube, que es justo para lo que existe. */
.pd-clave {
  position: absolute; left: -9999px; top: 0;
  width: 1px; height: 1px; opacity: 0; border: 0; padding: 0;
}

/* ---- la foto grande, a lo ancho de la columna ----
   No es una skin recortada: es una foto de verdad, así que va sin float y con
   marco, como la foto principal de un diario. El sepia leve y el fondo de papel
   la meten adentro de la hoja; sin eso queda una captura de pantalla pegada
   arriba de una textura. */
/* ⚠️ La foto grande cruza LAS DOS COLUMNAS, como la foto principal de un
   diario de verdad. Metida adentro de una columna era un bloque altísimo que
   no se puede partir: dejaba esa columna larguísima y la otra por la mitad,
   con un hueco enorme abajo que se leía como un error de armado. */
.pd-foto { margin: 14px 0 16px; break-inside: avoid; column-span: all; }
.pd-foto img {
  width: 100%; height: auto; display: block;
  border: 1px solid rgba(90,68,34,.45);
  padding: 5px; background: rgba(255,251,240,.55);
  box-shadow: 0 3px 10px rgba(0,0,0,.22);
  filter: sepia(.16) contrast(1.03) saturate(.94);
}
.pd-foto figcaption {
  font-size: 11.5px; line-height: 1.4; color: var(--tinta-suave);
  font-style: italic;
  border-top: 1px solid rgba(120,90,45,.35); padding-top: 5px; margin-top: 6px;
}
.pd-negro .pd-foto img {
  background: rgba(30,26,18,.55); border-color: #4a3f2c;
  filter: sepia(.30) brightness(.82) contrast(1.05);
}
.pd-negro .pd-foto figcaption { color: #9a855c; border-top-color: #4a3f2c; }
/* ⚠️ TOPE DE ANCHO A LAS FOTOS, medido con las imágenes YA CARGADAS.
   A lo ancho de la hoja, una foto apaisada mide 525px de alto ella sola: las
   páginas con foto daban 1030 y 1005px contra 288-448 de las demás. Eso era
   la desigualdad de tamaño de verdad.
   (La primera medición decía 688 y era mentira: las fotos llevan
   loading="lazy" y fuera de pantalla no cargan nunca, así que medían 12px de
   alto. Trampa 39 — cuando un número no cuadra con lo que se ve, el que miente
   es el número.) */
.pd-portada .pd-foto { max-width: 620px; margin-inline: auto; }
.pd-nota-sola .pd-foto { max-width: 640px; margin-inline: auto; }

/* ---- las viñetas dibujadas ---- */
.pd-vineta { text-align: center; margin: 14px 0; break-inside: avoid; }
.pd-vineta svg { width: 62px; height: 62px; color: var(--tinta-suave); opacity: .85; }
.pd-negro .pd-vineta svg { color: #8a7448; }

@media (max-width: 700px) {
  .pd-figura { float: none; width: 130px; margin: 12px auto; }
  .pd-vineta svg { width: 50px; height: 50px; }
}

/* ⚠️ El Diario Negro va al FINAL y repite la textura entera.
   La del papel claro termina en un degradado OPACO, y un background-image
   opaco tapa el background-color por debajo: no alcanzaba con decir "el fondo
   es negro", habia que redibujar las capas. Si manana se cambia la textura del
   papel, hay que cambiar esta tambien. */
.pd-hoja.pd-negro {
  background-color: #14110c;
  background-image:
    repeating-linear-gradient(90deg, rgba(210,170,90,.030) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(0deg,  rgba(210,170,90,.024) 0 1px, transparent 1px 4px),
    radial-gradient(ellipse 40% 30% at 12% 8%,  rgba(200,160,90,.10), transparent 70%),
    radial-gradient(ellipse 35% 25% at 88% 92%, rgba(180,140,70,.09), transparent 70%),
    linear-gradient(168deg, #1a1610 0%, #14110c 45%, #100d09 100%);
  box-shadow: 0 18px 50px rgba(0,0,0,.65), inset 0 0 70px rgba(0,0,0,.55);
  border-color: rgba(200,160,90,.22);
}

/* ---- las paginas de secciones automaticas ----
   Con tres secciones: la primera (la lista larga de fichajes) se queda con la
   columna izquierda entera y las otras dos se apilan a la derecha. Antes iban
   dos por pagina en dos columnas iguales y quedaba media hoja en blanco abajo
   a la derecha. */
.pd-secciones-3 {
  grid-template-columns: 1.15fr 1fr;
  align-items: start;
}
.pd-secciones-3 > :first-child { grid-row: span 2; }
/* Con una sola no tiene sentido partir en dos columnas */
.pd-secciones-1 { grid-template-columns: 1fr; }

@media (max-width: 700px) {
  .pd-secciones-3 { grid-template-columns: 1fr; }
  .pd-secciones-3 > :first-child { grid-row: auto; }
}

/* Las viñetas que son archivo (pelota, arco, guante). Van en negro, como un
   grabado impreso, y con un pelo de transparencia para que no griten mas que
   el texto. En el Diario Negro se invierten: negro sobre negro no se ve. */
.pd-vineta img { width: 72px; height: 72px; object-fit: contain; display: inline-block; opacity: .82; }
.pd-negro .pd-vineta img { filter: invert(1); opacity: .72; }
@media (max-width: 700px) { .pd-vineta img { width: 58px; height: 58px; } }

/* La moneda es la unica vineta a color: dorada. No se invierte en el Diario
   Negro porque un invert la dejaria celeste; el dorado funciona sobre los dos
   fondos, y ademas es el color de la plata de la liga. */
.pd-negro .pd-vineta img.v-color { filter: none; opacity: .95; }
.pd-vineta img.v-color { opacity: 1; }

/* La casilla de "prueba completa" del panel de scout (fase 87). Va apagada por
   defecto: un ajuste suelto -el +1 por ganar un 2v2- NO tiene que reiniciar el
   reloj de los 14 dias. Solo la prueba entera lo hace. */
.sc-prueba-lbl {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  font-size: 12.5px; color: var(--txt-dim); user-select: none;
  padding: 6px 10px; border: 1px dashed var(--line-soft); border-radius: 9px;
}
.sc-prueba-lbl:hover { border-color: var(--grass-dk); color: var(--txt); }
.sc-prueba-lbl input { accent-color: var(--grass); }
.sc-prueba-lbl b { color: var(--txt); }
.sc-prueba-lbl:has(input:checked) { border-style: solid; border-color: var(--grass); background: rgba(55,194,74,.08); }

/* La casilla de prueba completa en el dashboard (fase 88). Se distingue de
   "Destacado" con el borde punteado, para que no se confundan de un vistazo. */
.dash-prueba-lbl { border: 1px dashed var(--line-soft); border-radius: 9px; padding: 6px 10px; }
.dash-prueba-lbl:has(input:checked) { border-style: solid; border-color: var(--grass); background: rgba(55,194,74,.08); }
.dash-prueba-lbl b { color: var(--txt); }


/* ================= LA FICHA ADENTRO DE LA TARJETA =========================
   La carta, los avisos y la historia del jugador, arriba del formulario que lo
   edita. Van en la misma tarjeta a propósito: antes eran dos secciones con dos
   buscadores para la misma persona. */
#dash .ficha-en-card { padding: 14px 16px 4px; border-bottom: 1px solid var(--line-soft); }
#dash .ficha-en-card:empty { display: none; padding: 0; border: 0; }
/* ⚠️ Y SE PLIEGA CON LA TARJETA. El formulario se esconde solo porque
   .dash-form nace en display:none, pero esto vive afuera del formulario: sin
   esta regla, un jugador que abriste una vez se quedaba con su carta y su
   historia colgando para siempre aunque lo cerraras. */
#dash .dash-card:not(.open) .ficha-en-card { display: none; }
#dash .ficha-en-card .ficha-linea { max-height: 320px; overflow-y: auto; }
/* Adentro de una tarjeta el título de la ficha sobra: el nombre ya está en la
   cabecera de la tarjeta, a diez píxeles de acá. */
#dash .ficha-en-card .ficha-cab > .ficha-nom { display: none; }


/* ================= LA TARJETA DE UN CLUB ==================================
   Se abre igual que la de un jugador y adentro tiene TODO lo del club: los
   datos, el escudo, los tres colores, la plata y el plantel. Antes era un
   renglón con "renombrar" (por un prompt del navegador) y "borrar", y el resto
   solo lo podía tocar el presidente desde Mi equipo. */
#dash .club-card .club-crest { display: inline-flex; }
#dash .club-card .club-nom { font-weight: 700; }

/* El escudo grande manda en la primera columna y se ve mientras tocás los
   colores: elegir a ciegas entre diez escudos serían diez guardados. */
.club-preview {
  grid-row: span 3; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; padding: 10px;
  background: rgba(0,0,0,.2); border: 1px solid var(--line-soft); border-radius: 12px;
}
.cp-tag {
  font-family: var(--mono, ui-monospace, monospace); font-size: 13px;
  font-weight: 700; letter-spacing: .1em; color: var(--txt-dim);
}

.club-escudos { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; }
.ce-b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; padding: 0; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid var(--line-soft);
  border-radius: 10px; transition: border-color .14s, background .14s;
}
.ce-b:hover { background: rgba(77,220,134,.08); border-color: rgba(77,220,134,.34); }
.ce-b.on { border-color: #4ddc86; background: rgba(77,220,134,.12); }
.ce-b:focus-visible { outline: 2px solid #4ddc86; outline-offset: 2px; }

/* El plantel: filas cortas, y cada una lleva a la ficha de ese jugador. */
.club-plantel {
  grid-column: 1 / -1; display: grid; gap: 4px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
.cp-j {
  display: grid; grid-template-columns: 22px 1fr auto auto; gap: 9px;
  align-items: center; padding: 6px 9px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid var(--line-soft);
  color: var(--txt); font-family: inherit; font-size: 13px; text-align: left;
}
.cp-j:hover { background: rgba(77,220,134,.09); border-color: rgba(77,220,134,.34); }
.cp-j i { color: var(--txt-mute); font-style: normal; font-size: 12px; }
.cp-j span {
  font-family: var(--mono, ui-monospace, monospace); font-size: 12px;
  color: var(--txt-dim); font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .club-preview { grid-row: auto; grid-column: 1 / -1; }
}

/* ⚠️ El campo de la plata volvía a medir el ancho entero. .wallet-box input le
   pone 130px, pero más abajo .dash-form .f-input le pone width:100%, y esa
   gana por venir después. Con la caja adentro de un formulario del dashboard
   —la del club y la del presidente— el número quedaba de lado a lado y los
   botones de +10.000 y -10.000 se iban a otro renglón. */
#dash .wallet-box input.f-input { width: 130px; min-width: 130px; }


/* ============ LA FICHA: LA CARTA MÁS GRANDE Y LAS DOS LÍNEAS ==============
   La carta estaba a 168px y quedaba flaquísima, con media pantalla vacía al
   lado. Ahora es del tamaño en el que se lee, y el hueco lo ocupa lo único que
   la ficha no podía contar: cómo se movió el jugador en el tiempo. */
.ficha-carta .pcard-new { width: 208px; transform: none; }
.ficha-cab {
  grid-template-columns: auto minmax(170px, 1fr) auto auto;
  align-items: center;
}

.ficha-graf { display: grid; gap: 10px; min-width: 0; }
.gh-caja {
  padding: 8px 10px 6px; border-radius: 10px; min-width: 0;
  background: rgba(255,255,255,.03); border: 1px solid var(--line-soft);
}
.gh-tit {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--txt-mute); margin-bottom: 4px;
}
/* El SVG se estira con la caja (preserveAspectRatio="none"): el alto lo pone
   el CSS y el ancho lo decide el lugar que haya. */
.gh-svg { display: block; width: 100%; height: 46px; }
.gh-pie {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  font-size: 11px; color: var(--txt-mute); margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.gh-pie b { color: var(--txt-dim); font-size: 11.5px; }
.gh-pie b.sube { color: #4ddc86; }
.gh-pie b.baja { color: #f0605a; }
.gh-vacio { font-size: 12px; color: var(--txt-mute); padding: 12px 0 10px; }

/* Una cuenta que entró con Discord y nunca hizo su ficha. Va al final de la
   lista de jugadores, punteada, para que se vea que no es un jugador. */
.dash-card.cuenta-card { border-style: dashed; opacity: .92; }
.dash-card.cuenta-card .session-avatar { width: 22px; height: 22px; border-radius: 50%; }

@media (max-width: 1100px) {
  .ficha-cab { grid-template-columns: auto 1fr; }
  .ficha-graf { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; }
  .ficha-valor { grid-column: 2; text-align: right; }
}
@media (max-width: 700px) {
  .ficha-graf { grid-template-columns: 1fr; }
}


/* ================= EL HEXÁGONO DE ATRIBUTOS ===============================
   Los seis atributos en sus puntas. Las barras dicen el número; esto dice la
   FORMA, que es lo que seis barras apiladas no cuentan. */
.hx { display: block; width: 100%; max-width: 260px; height: auto; color: var(--txt-mute); }
.hx-lbl {
  font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  fill: var(--txt-mute); text-transform: uppercase;
}
.hx-val {
  font-size: 12px; font-weight: 800;
  font-family: var(--mono, ui-monospace, monospace);
}
.hx-pie {
  display: flex; align-items: center; gap: 6px; justify-content: center;
  font-size: 11px; color: var(--txt-mute); margin-top: -2px;
}
.hx-antes {
  width: 16px; height: 0; border-top: 1.5px dashed #8a8f8a; display: inline-block;
}

/* en la ficha del dashboard: ocupa el hueco que quedaba al lado de la carta */
.ficha-hex { width: 244px; max-width: 100%; }
/* en el perfil público: centrado arriba de las barras */
.perfil-hex { display: flex; flex-direction: column; align-items: center; margin-bottom: 10px; }

@media (max-width: 1100px) {
  .ficha-hex { grid-column: 1 / -1; justify-self: center; }
}


/* ================= EL MOVIMIENTO DEL MERCADO ==============================
   Cinco números y cuatro dibujos, todos sacados de las mismas negociaciones que
   la sección de abajo ya tenía pedidas. */
.mk-graf {
  display: grid; gap: 12px; margin-top: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.mk-fila {
  display: grid; gap: 18px; margin-top: 4px;
  grid-template-columns: minmax(310px, auto) minmax(280px, 1fr);
  align-items: start;
}
/* El hexágono de seis clubes trae etiquetas largas, así que su marco es más
   ancho que el de atributos y necesita lugar para estirarse. */
.mk-hex .hx, .gh-caja .hx { max-width: 330px; }
.mk-hex { display: flex; justify-content: center; }
@media (max-width: 800px) {
  .mk-fila { grid-template-columns: 1fr; }
}


/* ================= EL CONTROL DEL OVERLAY (dashboard) =====================
   Una botonera, no una pantalla para leer: se usa con una mano, con la otra
   jugando y sin mirarla mucho. */
.st-url {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 10px; margin-bottom: 6px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line-soft);
}
.st-url code {
  font-family: var(--mono, ui-monospace, monospace); font-size: 12.5px;
  color: var(--grass); word-break: break-all; flex: 1; min-width: 200px;
}
.st-busca { position: relative; max-width: 340px; }
.st-res {
  position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--card, #171b17); border: 1px solid var(--line);
  border-radius: 10px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.5);
}
.st-elegidos {
  display: grid; gap: 8px; margin: 10px 0;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.st-slot {
  padding: 9px 12px; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px dashed var(--line-soft);
}
.st-slot.lleno { border-style: solid; border-color: rgba(77,220,134,.45); background: rgba(77,220,134,.08); }
.st-slot span { display: block; font-size: 10.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--txt-mute); font-weight: 700; }
.st-slot i { font-style: normal; text-transform: none; letter-spacing: 0; }
.st-slot b { font-size: 15px; }
.st-botones { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
.st-marcador, .st-anuncio { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.st-marcador .select { max-width: 190px; }
.st-vs { color: var(--txt-mute); font-size: 13px; }
.st-anuncio .st-texto { flex: 1; min-width: 220px; }
.st-nada { margin-left: auto; }

/* ================= EL OVERLAY EN MODO VIVO ================================
   Lo que ve OBS. Fondo transparente, todo grande: se mira en un stream a
   ochocientos de ancho, no en un monitor a treinta centímetros. */
/* La grilla de nueve lugares. Cada capa cae en la celda que le elegiste, así
   se pueden tener el marcador arriba, la carta abajo a la izquierda y un
   cartel abajo sin que uno tape al otro. */
/* ⚠️ EL ESCENARIO MIDE SIEMPRE 1920×1080. Antes la grilla se estiraba al
   ancho que hubiera: abriendo el overlay en una pestaña angosta para ver cómo
   quedaba, cada columna medía doscientos píxeles y una carta de trescientos se
   salía y se montaba sobre la de al lado. En OBS —que pide 1920×1080— eso no
   pasaba, o sea que la vista previa mentía sobre el resultado.
   Ahora el escenario tiene medidas fijas y se achica ENTERO, como una foto. */
body.ov-vivo #overlay {
  position: fixed; inset: 0; overflow: hidden; pointer-events: none;
  /* ⚠️ ACA ESTABA EL CORTE DE LA CARTA, Y TARDE CINCO INTENTOS EN VERLO.
     Arriba, `body.es-overlay #overlay` le pone `max-width: 340px` y
     `padding: 16px` con `box-sizing: border-box`: son las medidas del overlay
     VIEJO, el recuadrito en la esquina. O sea 340 - 32 = 308px de contenido.

     Esta regla pisaba `position` y `overflow` pero NO el `max-width`. Asi que
     el escenario de 1920 vivia adentro de una caja de 308 con
     `overflow: hidden`, y todo lo que pasara de esos 308 se recortaba: la
     carta de 480 perdia la tercera columna de atributos y media punta del
     nombre. Justo lo que se veia.

     Y POR QUE NO LO VI ANTES, que es lo que importa: yo medi siempre
     `offsetWidth`, que devuelve el tamaño de MAQUETA y es CIEGO al recorte.
     Daba 480 y yo cantaba "esta bien". El unico dato que lo delataba eran mis
     propias capturas, cortadas a la misma altura, y las descarte diciendo que
     era el recorte del panel. Estaba mirando la prueba y explicandola.

     El cartel de version tampoco lo delataba: es `position: fixed`, asi que se
     escapa del `overflow` del padre y se veia entero. Por eso decia que todo
     estaba bien mientras la carta se cortaba al lado. */
  width: auto; max-width: none; max-height: none; padding: 0;
}
.ov-escenario {
  position: absolute; top: 0; left: 0; width: 1920px; height: 1080px;
  display: grid; padding: 40px; gap: 22px;
  grid-template-columns: 1fr 1fr 1fr;
  /* ⚠️ TRES FILAS IGUALES, no "auto 1fr auto". Con auto, una capa alta abajo
     se llevaba TODO el alto y la fila del medio quedaba en cero: lo que
     estuviera en el medio desaparecía sin decir nada. Un tercio cada una es
     predecible: lo que pongas en el medio siempre tiene su lugar. */
  grid-template-rows: 1fr 1fr 1fr;
  /* El transform lo escribe el JS: achica y centra en un solo paso. El origen
     tiene que ser la esquina para que la cuenta del corrimiento sea exacta. */
  transform-origin: 0 0;
}
/* ⚠️ CADA CELDA CON SU FILA Y SU COLUMNA ESCRITAS. Antes se dejaba que la
   grilla las acomodara en el orden en que estaban, y con la regla de esconder
   las vacías pasaba esto: si arriba-izquierda estaba vacía, desaparecía del
   reparto y TODAS las demás se corrían un lugar. Poniendo el marcador arriba
   al centro terminaba arriba a la izquierda, y el que lo puso pensaba que el
   selector de lugar no funcionaba.

   ⚠️ Y EN COLUMNA. Dos capas en el mismo lugar se apilan una abajo de la otra;
   una al lado de la otra se salían de la celda y se cortaban. */
.ov-cel { display: flex; flex-direction: column; gap: 14px; min-width: 0; min-height: 0; }
.ov-ai { grid-area: 1/1; justify-content: flex-start; align-items: flex-start; }
.ov-ac { grid-area: 1/2; justify-content: flex-start; align-items: center; }
.ov-ad { grid-area: 1/3; justify-content: flex-start; align-items: flex-end; }
.ov-mi { grid-area: 2/1; justify-content: center;     align-items: flex-start; }
.ov-mc { grid-area: 2/2; justify-content: center;     align-items: center; }
.ov-md { grid-area: 2/3; justify-content: center;     align-items: flex-end; }
.ov-bi { grid-area: 3/1; justify-content: flex-end;   align-items: flex-start; }
.ov-bc { grid-area: 3/2; justify-content: flex-end;   align-items: center; }
.ov-bd { grid-area: 3/3; justify-content: flex-end;   align-items: flex-end; }
.ov-cartas { display: flex; align-items: center; gap: 22px; animation: ovEntra .45s ease-out 1; }
.ov-carta { display: flex; flex-direction: column; align-items: center; gap: 6px; }
/* ⚠️ EL TAMAÑO SE MIDE CONTRA 1920, NO CONTRA UN MONITOR. Todo esto arrancó
   con las medidas del overlay viejo, que era un recuadrito en la esquina de una
   página normal: 11 y 13 píxeles de letra. Puesto en un lienzo de 1920 eso es
   el 0,7% del alto — en el stream, que la gente mira a 800 de ancho, no se lee
   NADA. Acá todo va al doble o al triple: la referencia es "¿se lee en un
   celular mirando el stream?", no "¿se lee en mi monitor?". */
/* ⚠️ 480 Y NO 400. La carta tiene medidas propias adentro —la grilla de seis
   atributos, la skin, el pie— y por debajo de 465 su contenido NO se achica:
   se sale y la carta lo recorta con sus bordes redondeados. A 400 faltaba la
   ultima columna de atributos y parecia que la carta estaba cortada por la
   pantalla, cuando se estaba cortando a si misma. Medido: a 460 todavia se
   corta, a 480 no. */
/* ⚠️ SE TOCA --w, NO width. ACA ESTABA EL CORTE, Y ESTUVO CINCO VECES.
   La carta esta hecha para escalarse desde su variable: `--w: 268px` manda el
   ancho Y el `font-size: calc(var(--w) / 26.8)`, y todo lo de adentro
   —padding, numeros, la grilla de atributos— esta en `em` colgado de ahi.

   Poniendo `width: 480px` a secas, la caja se estiraba a 480 pero adentro
   seguia todo calculado para 268. Y como la carta tiene `max-width: 100%`, en
   el Chromium de OBS —que resuelve el ancho del padre por contenido antes de
   aplicar el 480— el 100% se resolvia contra los ~300px del contenido natural
   y CLAVABA la carta en 301: la grilla ya habia repartido sus columnas para
   480, asi que la tercera quedaba afuera y `overflow: hidden` se la comia.

   Medido: en mi navegador la carta daba 480 y las seis casillas adentro; en su
   OBS, misma version y misma escala, daba 301 y cuatro casillas. La diferencia
   no era el codigo ni el cache: era que el ancho dependia de una cuenta que
   cada navegador resuelve en distinto orden.

   Tocando --w no hay nada que resolver: el ancho y el contenido salen del
   mismo numero. Y de paso la letra pasa de 10px a 18px, que es lo que hay que
   leer en un stream. */
.ov-carta { width: 480px; flex: 0 0 auto; }
.ov-carta .pcard-new { --w: 480px; width: 480px; max-width: none; transform: none; }
.ov-hex { width: 200px; }
.ov-hex .hx { max-width: 200px; color: rgba(255,255,255,.55); }
.ov-vs {
  font-size: 36px; font-weight: 900; letter-spacing: -.02em; color: #f7c948;
  text-shadow: 0 3px 18px rgba(0,0,0,.75);
}
@keyframes ovEntra {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

.ov-marcador {
  display: flex; align-items: center; gap: 26px; animation: ovEntra .35s ease-out 1;
  padding: 18px 30px; border-radius: 20px;
  background: rgba(8,12,9,.88); border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 18px 50px rgba(0,0,0,.6);
}
.ovm-eq { display: flex; align-items: center; gap: 12px; }
.ovm-eq b { font-size: 26px; font-weight: 800; white-space: nowrap; }
.ovm-n {
  font-family: var(--mono, ui-monospace, monospace); font-size: 56px; font-weight: 900;
  color: #4ddc86; display: flex; align-items: center; gap: 12px;
  font-variant-numeric: tabular-nums;
}
.ovm-n i { color: var(--txt-mute); font-style: normal; font-size: 34px; }

.ov-anuncio {
  padding: 20px 34px; border-radius: 18px; max-width: 70vw; text-align: center;
  font-size: 32px; font-weight: 800; line-height: 1.25;
  background: rgba(8,12,9,.9); border: 1px solid rgba(247,201,72,.4);
  color: #f7c948; box-shadow: 0 18px 50px rgba(0,0,0,.6);
  animation: ovEntra .35s ease-out 1;
}

.ov-evento .ove-lista {
  display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0;
}
.ov-evento .ove-lista span {
  padding: 4px 10px; border-radius: 999px; font-size: 15px; font-weight: 700;
  background: rgba(77,220,134,.14); border: 1px solid rgba(77,220,134,.3);
}


/* ⚠️ EL DASHBOARD MIENTRAS SE ARMA. El HTML se dibuja de golpe y las tres
   cosas que le dan la forma nueva —las pestañas, el orden de la cabecera y el
   plegado— pasan al final, después de varios pedidos a la base. Entremedio se
   veía el dashboard VIEJO por un segundo y después saltaba al nuevo. */
#dash.dash-armando > *:not(.dash-cargando) { display: none !important; }
.dash-cargando {
  padding: 90px 20px; text-align: center; color: var(--txt-mute); font-size: 15px;
}
.dash-cargando::after {
  content: ""; display: block; width: 26px; height: 26px; margin: 16px auto 0;
  border: 2px solid var(--line); border-top-color: #4ddc86; border-radius: 50%;
  animation: dashGira .8s linear infinite;
}
@keyframes dashGira { to { transform: rotate(360deg); } }


/* ---- una capa del control, con su interruptor y su lugar ---- */
.st-capa {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border-radius: 11px; margin-bottom: 7px;
  background: rgba(255,255,255,.02); border: 1px solid var(--line-soft);
  transition: border-color .14s, background .14s;
}
.st-capa.on { border-color: rgba(77,220,134,.45); background: rgba(77,220,134,.07); }
.st-sw { display: flex; align-items: center; gap: 8px; cursor: pointer; min-width: 190px; }
.st-sw span { font-weight: 700; font-size: 13.5px; }
.st-sw input { width: 17px; height: 17px; accent-color: #4ddc86; cursor: pointer; }
.st-capa .st-pos { font-size: 12px; padding: 7px 9px; }
.st-capa-cuerpo {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  flex: 1; min-width: 220px;
}
.st-capa-cuerpo .search { min-width: 180px; max-width: 260px; }
.st-capa-cuerpo .select { max-width: 165px; font-size: 12.5px; }
.st-elegido { font-size: 12.5px; font-weight: 700; color: var(--txt-dim); }
.st-capa.on .st-elegido { color: #4ddc86; }


/* ================= EL OVERLAY EN VIVO: TODO AL DOBLE =======================
   Estas medidas pisan a las del overlay viejo (?ver=), que sigue siendo un
   recuadrito en la esquina de una página normal y no se toca. Acá el lienzo es
   de 1920 y lo mira gente en un celular. */
body.ov-vivo .ov-caja {
  padding: 20px 26px; border-radius: 18px; border-left-width: 5px;
  min-width: 300px;
}
body.ov-vivo .ov-tit { font-size: 20px; margin-bottom: 12px; letter-spacing: .08em; }
body.ov-vivo .ov-fila { grid-template-columns: 34px 1fr auto; gap: 14px; font-size: 26px; padding: 5px 0; }
body.ov-vivo .ov-pos { font-size: 22px; }
body.ov-vivo .ov-pts { font-size: 26px; }
body.ov-vivo .ov-partido { font-size: 32px; line-height: 1.25; }
body.ov-vivo .ov-sub { font-size: 22px; margin-top: 8px; }

/* El marcador: siglas cuando el nombre es largo, y todo más grande. */
.ov-marcador { padding: 22px 38px; gap: 30px; }
.ovm-eq b { font-size: 40px; }
.ovm-n { font-size: 76px; gap: 16px; }
.ovm-n i { font-size: 46px; }

.ov-anuncio { font-size: 46px; padding: 26px 44px; border-radius: 22px; }

.ov-evento .ove-lista span { font-size: 24px; padding: 6px 14px; }


/* ================= LA MESA DEL EVENTO, CORREGIDA ==========================
   Las etiquetas de los atributos van EN CADA FILA y no arriba: un arquero y un
   delantero no tienen las mismas seis columnas, así que un encabezado
   compartido siempre le miente a alguien. */
.mesa-cab-attrs {
  font-size: 10.5px; letter-spacing: .04em; color: var(--txt-mute);
  text-transform: none; opacity: .8;
}
.mesa-attrs { display: flex; gap: 6px; align-items: flex-end; }
.mesa-c { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mesa-c i {
  font-style: normal; font-size: 9px; font-weight: 800; letter-spacing: .06em;
  color: var(--txt-mute); text-align: center;
}
/* El chaleco pasa de ser un cuadradito a un desplegable: hay suplentes y la
   gente se cambia de color a mitad de la noche. */
.mesa-eq-sel {
  background: transparent; border: 1px solid var(--line-soft); border-radius: 7px;
  padding: 5px 6px; font-family: inherit; font-size: 11.5px; font-weight: 800;
  cursor: pointer; max-width: 104px; outline: none;
}
.mesa-eq-sel:focus-visible { border-color: #4ddc86; }
.mesa-eq-sel option { color: var(--txt); background: var(--card, #171b17); }

.ev-parte {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-bottom: 12px; padding: 10px 12px; border-radius: 9px;
  background: rgba(77,220,134,.06); border: 1px solid rgba(77,220,134,.28);
}


/* ================= UN EVENTO VIEJO, ABIERTO ===============================
   Era un renglón que decía "Chalecos · 31/8 · ganó azul". Todo lo que pasó esa
   noche estaba guardado y no había forma de mirarlo. */
#dash .ev-card { border-radius: 11px; margin-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
#dash .ev-card:not(.open) .ev-cuerpo { display: none; }
.ev-detalle { padding: 4px 14px 14px; }
.ev-resumen {
  display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px;
  color: var(--txt-mute); margin-bottom: 10px;
}
.ev-resumen b { color: var(--txt); }

.ev-jugaron {
  display: grid; gap: 3px; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
}
.ev-j {
  display: grid; grid-template-columns: 8px 1fr auto auto; gap: 9px; align-items: baseline;
  padding: 5px 8px; border-radius: 7px; font-size: 13px;
  background: rgba(255,255,255,.02);
}
.ev-j-col { width: 8px; height: 8px; border-radius: 50%; align-self: center; }
.ev-j i { font-style: normal; font-size: 11.5px; color: var(--txt-mute); }
.ev-j-m {
  font-family: var(--mono, ui-monospace, monospace); font-size: 12px;
  color: var(--txt-dim); font-variant-numeric: tabular-nums;
}
.ev-j-m.sube { color: #4ddc86; }
.ev-j-m.baja { color: #f0605a; }

.ev-editar { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.ev-e-gana { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; padding-bottom: 8px; }
.ev-e-gana label { display: flex; align-items: center; gap: 6px; font-size: 13px;
  color: var(--txt-dim); cursor: pointer; }
.ev-acciones {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px;
  padding-top: 12px; border-top: 1px solid var(--line-soft);
}
.ev-acciones .btn { font-size: 12.5px; padding: 7px 11px; }


/* ================= EL FIXTURE, UNA FECHA POR PANTALLA =====================
   Antes eran las trece fechas apiladas: con 91 partidos, una tira de varios
   metros donde para ver contra quién jugás en tres semanas había que bajar a
   ojo contando títulos. Un fixture se lee de a una fecha. */
.fx {
  border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  background: var(--panel);
}
.fx-barra {
  display: grid; grid-template-columns: 48px 1fr 48px; align-items: center;
  padding: 14px 12px; background: rgba(255,255,255,.03);
  border-bottom: 1px solid var(--line-soft);
}
.fx-tit { text-align: center; }
.fx-tit b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.01em; }
.fx-tit span { display: block; font-size: 13px; color: var(--txt-mute); margin-top: 2px; }
.fx-flecha {
  width: 42px; height: 42px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.05); border: 1px solid var(--line-soft);
  color: var(--txt); font-size: 24px; line-height: 1; font-family: inherit;
  transition: background .14s, border-color .14s;
}
.fx-flecha:hover:not(:disabled) { background: rgba(77,220,134,.14); border-color: rgba(77,220,134,.45); }
.fx-flecha:disabled { opacity: .25; cursor: default; }
.fx-flecha:focus-visible { outline: 2px solid #4ddc86; outline-offset: 2px; }

.fx-cab, .fx-f {
  display: grid; grid-template-columns: 74px 108px minmax(280px, 1fr) minmax(160px, 210px);
  gap: 10px; align-items: center;
}
.fx-cab {
  padding: 9px 14px; font-size: 10.5px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--txt-mute);
  border-bottom: 1px solid var(--line-soft); background: rgba(0,0,0,.18);
}
.fx-cab span:nth-child(3) { text-align: center; }
.fx-f {
  padding: 12px 14px; border-bottom: 1px solid var(--line-soft);
  transition: background .14s;
}
.fx-f:last-child { border-bottom: 0; }
.fx-f:hover { background: rgba(255,255,255,.025); }
.fx-f.jugado { background: rgba(77,220,134,.04); }

.fx-dia b { display: block; font-size: 13px; font-weight: 800; }
.fx-dia i { display: block; font-style: normal; font-size: 12px; color: var(--txt-mute); }
.fx-hora b { display: block; font-size: 15px; font-weight: 800;
  font-family: var(--mono, ui-monospace, monospace); }
.fx-hora i { display: block; font-style: normal; font-size: 10.5px; color: var(--txt-mute); }
.fx-hora b.fx-pend { font-size: 12.5px; font-family: inherit; color: var(--gold); }

.fx-vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.fx-eq { display: flex; align-items: center; gap: 10px; min-width: 0; }
.fx-eq.loc { justify-content: flex-end; }
.fx-eq b { font-size: 14.5px; font-weight: 700; }
.fx-res {
  min-width: 62px; text-align: center; font-size: 21px; font-weight: 900;
  font-family: var(--mono, ui-monospace, monospace); font-variant-numeric: tabular-nums;
}
.fx-res i { font-style: normal; font-size: 13px; font-weight: 700; color: var(--txt-mute); }

.fx-est b { display: block; font-size: 13px; font-weight: 700; }
.fx-est i { display: block; font-style: normal; font-size: 11.5px; color: var(--txt-mute); margin-top: 2px; }

.fx-pie {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  justify-content: space-between; padding: 12px 14px;
  border-top: 1px solid var(--line-soft); background: rgba(0,0,0,.18);
}
.fx-saltos { display: flex; gap: 4px; flex-wrap: wrap; }
.fx-salto {
  min-width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  background: rgba(255,255,255,.04); border: 1px solid var(--line-soft);
  color: var(--txt-mute); font-family: inherit; font-size: 12.5px; font-weight: 700;
}
.fx-salto:hover { color: var(--txt); border-color: rgba(77,220,134,.4); }
.fx-salto.on { background: rgba(77,220,134,.16); border-color: #4ddc86; color: #4ddc86; }

@media (max-width: 780px) {
  /* En el teléfono la tabla se rompe: cada partido pasa a ser una tarjeta con
     el cruce arriba y el resto abajo. Cuatro columnas de 74px no entran. */
  .fx-cab { display: none; }
  .fx-f { grid-template-columns: 1fr 1fr; gap: 8px 12px; }
  .fx-vs { grid-column: 1 / -1; order: -1; }
  .fx-eq b { font-size: 13px; }
  .fx-est { text-align: right; }
}


/* ---- el conmutador Fixture / Lista en el dashboard ---- */
.pd-vistas { display: flex; gap: 4px; }
.pd-vista {
  padding: 8px 13px; border-radius: 9px; cursor: pointer;
  background: rgba(255,255,255,.03); border: 1px solid var(--line-soft);
  color: var(--txt-mute); font-family: inherit; font-size: 13px; font-weight: 700;
}
.pd-vista:hover { color: var(--txt); }
.pd-vista.on { background: rgba(77,220,134,.13); border-color: #4ddc86; color: #4ddc86; }

/* El fixture adentro del dashboard: filas que se abren. */
#dash .fx { border-radius: 0; border-left: 0; border-right: 0; }
#dash .fx-f.fx-clic { cursor: pointer; }
#dash .fx-f.fx-clic:hover { background: rgba(77,220,134,.06); }
#dash .fx-f.abierto { background: rgba(77,220,134,.09); }
#dash .fx-cab, #dash .fx-f {
  grid-template-columns: 68px 100px minmax(240px, 1fr) minmax(140px, 190px) 24px;
}
.fx-abrir { color: var(--txt-mute); font-size: 13px; transition: transform .18s; }
#dash .fx-f.abierto .fx-abrir { transform: rotate(180deg); color: #4ddc86; }
.fx-det { border-bottom: 1px solid var(--line-soft); background: rgba(0,0,0,.22); }
@media (max-width: 780px) {
  #dash .fx-cab { display: none; }
  #dash .fx-f { grid-template-columns: 1fr 1fr; }
}


/* ============ EL PARTIDO DEL CLUB, ARRIBA A LA DERECHA ====================
   Lo primero que ve un presidente. Grande porque coordinar el horario tiene
   plazo: si se vence, la hora la pone un admin y el club se entera cuando ya
   está puesta. */
/* ⚠️ LAS DOS COLUMNAS TIENEN PISO Y TECHO. Con "1fr auto", la tarjeta del
   partido pedia sus 420px y se los quedaba: al titulo le sobraban cincuenta
   pixeles y "Associazione Cofla Calcio" salia UNA LETRA POR RENGLON, con la
   tarjeta al lado pareciendo que estaba encima.

   Ahora el titulo no baja de 280 —si no entra, la fila se parte en dos, que es
   lo correcto— y la tarjeta puede achicarse hasta cero antes de aplastar a
   nadie. minmax en las dos: sin el piso, una gana; sin el techo, la otra. */
.me-cab {
  display: grid; gap: 24px; align-items: start;
  grid-template-columns: minmax(280px, 1fr) minmax(0, 420px);
}
.me-cab-txt { min-width: 0; }
/* Un nombre de club largo no puede empujar todo lo demas. */
.me-cab-txt h1 { overflow-wrap: anywhere; }
.me-cab-nums, .me-cab .market-banner { grid-column: 1 / -1; }
.me-partido-hueco { width: 100%; min-width: 0; }

.me-partido {
  width: 100%; display: grid; gap: 6px; cursor: pointer; text-align: left;
  padding: 18px 22px; border-radius: 18px; font-family: inherit; color: var(--txt);
  background: linear-gradient(140deg, rgba(77,220,134,.16), rgba(77,220,134,.05));
  border: 2px solid rgba(77,220,134,.5);
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.me-partido:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(0,0,0,.45); }
.me-partido:focus-visible { outline: 3px solid #4ddc86; outline-offset: 3px; }
.me-partido.espera { background: linear-gradient(140deg, rgba(247,201,72,.14), rgba(247,201,72,.04));
  border-color: rgba(247,201,72,.45); }
.me-partido.listo { background: linear-gradient(140deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border-color: var(--line); }

.mp-fecha {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-mute);
}
.mp-vs { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mp-vs b { font-size: 16px; font-weight: 800; }
.mp-vs i { font-style: normal; font-size: 12px; color: var(--txt-mute); font-weight: 700; }
.mp-estado { font-size: 20px; font-weight: 900; letter-spacing: -.01em; margin-top: 4px; }
.me-partido.urge  .mp-estado { color: #4ddc86; }
.me-partido.espera .mp-estado { color: #f7c948; }
.mp-sub { font-size: 13px; color: var(--txt-dim); }

/* ⚠️ LATE SOLO CUANDO TE TOCA. Un botón que late siempre deja de llamar la
   atención a los dos días, y entonces la única forma de saber si hay algo
   pendiente vuelve a ser leerlo — que es justo lo que el movimiento evitaba. */
.me-partido.late { animation: mpLate 2.2s ease-in-out infinite; }
@keyframes mpLate {
  0%, 100% { box-shadow: 0 0 0 0 rgba(77,220,134,.45); }
  50%      { box-shadow: 0 0 0 12px rgba(77,220,134,0); }
}
@media (prefers-reduced-motion: reduce) {
  /* Para quien pidió que el sistema no le mueva cosas. Sigue destacándose por
     el color y el borde, que es lo que de verdad lo hace visible. */
  .me-partido.late { animation: none; border-color: #4ddc86; }
}

.me-partido-caja { width: 100%; min-width: 0; margin-top: 10px; }
.mp-panel {
  padding: 16px 18px; border-radius: 14px; display: grid; gap: 12px;
  background: var(--panel); border: 1px solid var(--line);
}
.mp-donde b { display: block; font-size: 14px; }
.mp-donde span { font-size: 12.5px; color: var(--txt-mute); }
.mp-listo b { display: block; font-size: 16px; color: #4ddc86; }
.mp-listo span { font-size: 12.5px; color: var(--txt-mute); }
.mp-propuesta {
  padding: 10px 12px; border-radius: 10px;
  background: rgba(247,201,72,.09); border: 1px solid rgba(247,201,72,.3);
}
.mp-propuesta.tuya { background: rgba(77,220,134,.09); border-color: rgba(77,220,134,.3); }
.mp-propuesta span { display: block; font-size: 11.5px; color: var(--txt-mute); }
.mp-propuesta b { display: block; font-size: 15px; margin: 2px 0; }
.mp-propuesta i { font-style: normal; font-size: 11px; color: var(--txt-mute); }
.mp-acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.mp-form { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: end; }
.mp-mx { font-style: normal; color: var(--gold); font-size: 10.5px; }
.mp-nota { margin: 0; line-height: 1.5; }
.mp-hist { border-top: 1px solid var(--line-soft); padding-top: 10px; display: grid; gap: 4px; }
.mp-hist > b { font-size: 12.5px; }
.mp-h {
  display: grid; grid-template-columns: 20px auto auto 1fr; gap: 7px;
  align-items: baseline; font-size: 12.5px; color: var(--txt-dim);
}
.mp-h i { font-style: normal; color: var(--txt-mute); }
.mp-h-cu { text-align: right; color: var(--txt-mute); font-size: 11.5px; }

/* 1100 y no 900: a 950 el titulo entra justo y queda feo. Mejor que la tarjeta
   baje una fila antes de tiempo que verla peleando por el ancho. */
@media (max-width: 1100px) {
  .me-cab { grid-template-columns: minmax(0, 1fr); }
  .me-partido-hueco, .me-partido-caja { width: 100%; max-width: 560px; }
  .mp-form { grid-template-columns: 1fr; }
}


/* ============= LOS HORARIOS QUE ESPERAN AL ADMIN ==========================
   El orden manda: arriba los que tienen dos clubes esperando un botón, abajo
   los que no esperan nada tuyo. Mezclados, los urgentes se pierden entre 90. */
#dash .panel.ha-urge { border-color: rgba(77,220,134,.4); }
.ha-grupo { margin-bottom: 16px; }
.ha-grupo > b { font-size: 14px; }
.ha-grupo .muted-sm { margin: 3px 0 9px; }
.ha-lista { display: grid; gap: 6px; }
.ha-f {
  display: grid; grid-template-columns: 40px minmax(180px, 1fr) auto auto;
  gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: 10px;
  background: rgba(255,255,255,.03); border: 1px solid var(--line-soft);
}
.ha-f.venc { border-color: rgba(247,201,72,.4); background: rgba(247,201,72,.06); }
.ha-f.chico { padding: 7px 10px; font-size: 12.5px; background: transparent; }
.ha-fecha {
  font-family: var(--mono, ui-monospace, monospace); font-size: 12px; font-weight: 800;
  color: var(--txt-mute);
}
.ha-cruce { font-size: 13.5px; font-weight: 700; min-width: 0; }
.ha-cruce i { font-style: normal; font-weight: 600; color: var(--txt-mute); }
.ha-quien { display: block; font-size: 11.5px; margin-top: 2px; }
.ha-hora b { display: block; font-size: 13px; }
.ha-hora i { font-style: normal; font-size: 11px; color: var(--txt-mute); }
.ha-elegir { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ha-elegir .select { font-size: 12.5px; padding: 7px 9px; }
.ha-mx { font-style: normal; font-size: 10.5px; color: var(--gold); }
.ha-turno, .ha-plazo { font-size: 12px; color: var(--txt-mute); }
.ha-f .btn { font-size: 12.5px; padding: 8px 12px; }
.ha-msg { grid-column: 1 / -1; font-size: 12.5px; font-weight: 700; }
.ha-neg { margin-top: 6px; border-top: 1px solid var(--line-soft); padding-top: 10px; }
.ha-neg > summary { cursor: pointer; font-size: 13.5px; font-weight: 700; }
/* la nota del ida y vuelta, en la pantalla del presidente */
.mp-h-nota {
  margin: -2px 0 8px 26px; padding: 7px 10px; border-radius: 8px;
  background: rgba(255,255,255,.04); border-left: 2px solid var(--grass);
  font-size: 12.5px; color: var(--txt-mute); line-height: 1.45;
}
.mp-nota-campo { display: block; margin-top: 8px; }
@media (max-width: 820px) {
  .ha-f { grid-template-columns: 40px 1fr; }
  .ha-elegir, .ha-f .btn { grid-column: 1 / -1; }
}


/* ================= LOS AVISOS A LA LIGA ===================================
   Cada uno dice a cuántos les va a llegar ANTES de apretarlo: mandar algo a
   ciento cuarenta personas sin saber a cuántas es como se manda dos veces. */
#dash .panel.av-hay { border-color: rgba(247,201,72,.4); }
.av-lista { display: grid; gap: 8px; }
.av-f {
  display: grid; grid-template-columns: 30px minmax(200px, 1fr) auto auto;
  gap: 12px; align-items: center;
  padding: 12px 14px; border-radius: 11px;
  background: rgba(247,201,72,.06); border: 1px solid rgba(247,201,72,.3);
}
.av-f.listo { background: rgba(255,255,255,.02); border-color: var(--line-soft); opacity: .75; }
.av-ico { font-size: 20px; }
.av-txt b { display: block; font-size: 14px; }
.av-txt i { display: block; font-style: normal; font-size: 12.5px; color: var(--txt-mute); margin-top: 2px; }
.av-n { text-align: right; }
.av-n b { display: block; font-size: 19px; font-weight: 800;
  font-family: var(--mono, ui-monospace, monospace); }
.av-n b.g { color: #4ddc86; }
.av-n i { font-style: normal; font-size: 10.5px; color: var(--txt-mute); }
.av-f .btn { font-size: 12.5px; padding: 8px 12px; }
.av-msg { grid-column: 1 / -1; font-size: 12.5px; font-weight: 700; }
@media (max-width: 700px) {
  .av-f { grid-template-columns: 30px 1fr; }
  .av-n, .av-f .btn { grid-column: 2; justify-self: start; text-align: left; }
}


/* ================= LA ENCUESTA DEL DIARIO (fase 105) ======================
   Una pregunta adentro de la nota, que se vota ahi mismo.
   ⚠️ Los resultados aparecen RECIEN DESPUES DE VOTAR: mostrando los numeros
   antes, la primera respuesta arrastra a todas las demas — el que entra ve
   "80% que si" y vota que si sin pensarlo. */
.pd-encuesta { margin: 18px 0; }
.enc {
  border: 2px solid var(--tinta, #1a1a17); border-radius: 4px;
  padding: 14px 16px; background: rgba(0,0,0,.03);
}
.enc-cab { margin-bottom: 10px; }
.enc-chapa {
  display: inline-block; font-size: 10px; font-weight: 900; letter-spacing: .16em;
  text-transform: uppercase; padding: 2px 8px; margin-bottom: 6px;
  background: var(--tinta, #1a1a17); color: var(--papel, #f4f1e8);
}
.enc-cab b { display: block; font-size: 17px; line-height: 1.25; }
.enc-cab i { display: block; font-size: 13px; opacity: .72; margin-top: 3px; }
.enc-ops { display: grid; gap: 5px; }
.enc-op {
  position: relative; display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 9px 12px; cursor: pointer; overflow: hidden;
  background: transparent; border: 1px solid currentColor; border-radius: 3px;
  font-family: inherit; font-size: 14px; color: inherit; text-align: left;
}
.enc-op:hover:not(:disabled) { background: rgba(0,0,0,.06); }
.enc-op:disabled { cursor: default; opacity: .8; }
.enc-op.mio { border-width: 2px; font-weight: 700; }
/* La barra va DETRAS del texto, no al lado: al lado, la opcion mas votada
   empuja el texto y las cuatro filas quedan desalineadas. */
.enc-barra {
  position: absolute; left: 0; top: 0; bottom: 0;
  background: rgba(0,0,0,.11); transition: width .5s ease-out;
}
.enc-txt { position: relative; flex: 1; min-width: 0; }
.enc-pct { position: relative; font-weight: 800; font-variant-numeric: tabular-nums; }
.enc-pct i { font-style: normal; font-size: 11px; opacity: .6; margin-left: 5px; }
.enc-tilde { position: relative; font-weight: 900; }
.enc-pie {
  display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 8px; font-size: 12px; opacity: .75;
}
.enc-msg { font-weight: 700; }


/* El boton de publicar la fecha en Discord, debajo del fixture del dashboard. */
.pd-discord {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  padding: 12px 14px; border-top: 1px solid var(--line-soft);
}
.pd-discord .btn { font-size: 12.5px; padding: 8px 12px; }
.pd-discord .muted-sm { flex: 1; min-width: 200px; }


/* La bajada de una seccion automatica del diario ("Fecha 1 - este fin de
   semana"), para no repetir el dato en cada uno de los siete renglones. */
.pd-sec-nota {
  font-size: 12.5px; font-style: italic; opacity: .72; margin: -4px 0 8px;
}


/* ⚠️ LA ENCUESTA NO SE PARTE ENTRE COLUMNAS. El diario se arma en dos columnas
   y la segunda encuesta quedaba cortada al medio: el titulo en una columna y
   las opciones en la otra. break-inside la mantiene entera; si no entra en lo
   que queda de columna, salta completa a la siguiente. */
.pd-encuesta, .enc {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
}


/* ⚠️ EL CARTEL DE "LA FUENTE MIDE MAL". Todo el overlay esta diseñado para
   1920x1080; con otra medida entra igual pero achicado a un rincon, y desde la
   pantalla no hay forma de saber por que. Es feo a proposito: tiene que
   molestar hasta que se arregle, y se va solo cuando la medida es la correcta. */
.ov-medida {
  position: fixed; left: 0; right: 0; top: 0; z-index: 99;
  padding: 14px 20px; text-align: center; font-family: inherit;
  background: #ff2d95; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
.ov-medida b { display: block; font-size: 22px; font-weight: 900; }
.ov-medida span { display: block; font-size: 15px; margin-top: 4px; opacity: .95; }


/* Cuando una capa no entra en su tercio de pantalla, se ACHICA entera en vez de
   cortarse. Pasa con el duelo —dos cartas de 480 mas el VS son casi mil— y con
   cualquier nombre de club largo. El factor lo calcula el JS midiendo; aca solo
   queda el punto de apoyo para que se achique hacia su esquina y no se corra al
   medio de la pantalla. */
.ov-ai > *, .ov-mi > *, .ov-bi > * { transform-origin: left center; }
.ov-ad > *, .ov-md > *, .ov-bd > * { transform-origin: right center; }
.ov-ac > *, .ov-mc > *, .ov-bc > * { transform-origin: center center; }


/* ==================== EL DADO DEL PRESIDENTE ==============================
   Un dado que sale en pantalla tiene que leerse en un segundo y desde un
   celular: el número grande, la actividad grande, y el resto chico.

   ⚠️ LA ANIMACIÓN DURA Y PARA. Un dado que gira para siempre es un adorno;
   este gira ochocientos milisegundos y se planta en su cara, que es lo que
   hace que se entienda que salió ESE número y no otro. */
/* ⚠️ EN COLUMNA Y CENTRADO: equipo arriba, dado en el medio, el reto
   abajo. A los costados del dado no va nada.

   Estaba en fila y el cubo —que es de 200 y no se achica— quedaba pegado al
   texto: el nombre del equipo empezaba justo donde terminaba el dado. La
   solución no era achicar el dado sino darle lugar a todo. */
.ov-dado {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  width: 480px; gap: 8px;
  padding: 26px 38px 32px; border-radius: 26px;
  background: linear-gradient(145deg, rgba(18,20,24,.94), rgba(28,32,38,.94));
  border: 2px solid rgba(255,255,255,.14);
  border-left: 6px solid var(--gold, #e8b93b);
  box-shadow: 0 18px 46px rgba(0,0,0,.55);
  animation: ovdEntra .4s ease-out 1;
}
/* ⚠️ UN CUBO DE VERDAD, CON LAS SEIS CARAS. Antes era un cuadrado plano con el
   emoji del reto que había salido, y eso es un cartel, no un dado: no se veía
   que hubiera sorteo. Acá están las seis dibujadas y girando, así que se ven
   pasar las otras cinco antes de que se plante en la que tocó — que es lo que
   hace que se entienda, y lo que hace que se grite en el chat.

   Y NO LLEVAN NÚMEROS. Cada cara es su reto: el emoji y el nombre corto. El
   número del dado no le importa a nadie; lo que importa es qué te tocó. */
/* ⚠️ LOS DIEZ SEGUNDOS ESTÁN ESCRITOS TRES VECES, A PROPÓSITO, Y TIENEN QUE
   SEGUIR IGUALES: el rodado del cubo, cuánto dura el cartel de "Tirando…" y
   cuánto tarda en aparecer el resultado. Si se cambia uno hay que cambiar los
   tres, o el reto se ve antes de que el dado pare.

   Estaban colgados de una variable --tira, que es más prolijo. Los saqué
   mientras buscaba por qué el dado no se movía, culpando al var(); la culpa era
   de la regla de `prefers-reduced-motion`, no del var(). Quedan literales
   igual: son tres números que se leen de un vistazo justo al lado de la
   animación que los usa, y este dado ya costó demasiado como para volver a
   moverle una pieza que hoy funciona. */
.ov-dado { position: relative; }
/* ⚠️ EL HUECO ES MÁS GRANDE QUE EL CUBO, Y TIENE QUE SERLO. Un cubo de 200
   inclinado no ocupa 200: la diagonal proyectada se va a unos 250, y en el
   rebote del final escala un 8% más. Con el hueco justo de 200, el dado se
   comía el aire de abajo y quedaba pegado al título — se veía como si el texto
   estuviera encima del dado.
   El cubo NO cambia de tamaño: lo que cambia es el lugar que tiene para girar. */
/* ⚠️ 310 Y NO 270: EL HUECO TIENE QUE AGUANTAR EL CUBO EN CUALQUIER ÁNGULO.
   Parado ocupa 200, pero girando pasa por posiciones donde la diagonal
   proyectada llega a unos 285, y en el rebote del final escala un 8% más: 307.
   Con el hueco en 270 se salía por arriba MIENTRAS GIRABA y tapaba el escudo y
   el nombre del equipo — quieto se veía bien, y por eso no saltaba a la vista.
   El cubo sigue midiendo 200: lo que crece es el lugar donde gira. */
.ovd-escena {
  flex: 0 0 auto; width: 310px; height: 310px; perspective: 1100px;
  display: grid; place-items: center;
}
/* ⚠️ DOS CAPAS, Y ES A PROPÓSITO.
   · .ovd-giro da las vueltas, con una animación de números fijos que empieza y
     termina en la misma orientación (todas vueltas enteras).
   · .ovd-cubo tiene, quieto, el giro de la cara que salió.
   Al terminar, el de afuera vuelve a cero y queda a la vista la cara del de
   adentro. En pantalla es idéntico a hacerlo todo junto, pero la animación no
   necesita saber qué salió — y eso es lo que la arregla.

   Antes era una sola animación que terminaba en `calc(var(--rx) - 13deg)`. La
   partí en dos creyendo que el var() adentro del @keyframes era lo que dejaba
   el dado quieto en OBS — no lo era, era la regla de `prefers-reduced-motion`.
   Se queda partida igual porque así la animación no depende de qué cara salió,
   que es una cosa menos que pueda salir mal en vivo. */
.ovd-giro {
  position: relative; width: 200px; height: 200px;
  transform-style: preserve-3d;
  animation: ovdGira 10s cubic-bezier(.05,.55,.12,1) 1 both;   /* ← los tres iguales */
}
.ovd-cubo { position: absolute; inset: 0; transform-style: preserve-3d; }
/* ⚠️ EL DADO ES DE LA LIGA, NO UN DADO GENÉRICO. Era blanco de plantilla y
   podía ser de cualquier juego. Ahora usa lo mismo que toda la página: el
   verde pasto en los bordes, el fondo oscuro de los paneles y el oro en el
   texto. Sobre el gameplay de Minecraft, un cubo oscuro con el borde verde
   encendido se recorta muchísimo mejor que uno blanco — el blanco se pierde
   contra el cielo y contra la nieve. */
.ovd-cara {
  position: absolute; inset: 0; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(55,194,74,.16), transparent 62%),
    linear-gradient(155deg, #1e2a23 0%, #0d1210 58%, #17201b 100%);
  border: 3px solid var(--grass, #37c24a);
  box-shadow:
    inset 0 0 26px rgba(55,194,74,.18),
    inset 0 -9px 0 rgba(0,0,0,.42),
    inset 0 3px 0 rgba(255,255,255,.10);
  color: var(--txt, #eaf2ec);
}
/* El dibujo de la cara. `crispEdges` va en el SVG; acá solo el tamaño. */
.ovd-ico { width: 104px; height: 104px; display: block; }
/* Las seis caras de un cubo de 200: media arista son 100px. */
.ovd-c1 { transform: translateZ(100px); }
.ovd-c2 { transform: rotateY(90deg)   translateZ(100px); }
.ovd-c3 { transform: rotateY(180deg)  translateZ(100px); }
.ovd-c4 { transform: rotateY(-90deg)  translateZ(100px); }
.ovd-c5 { transform: rotateX(90deg)   translateZ(100px); }
.ovd-c6 { transform: rotateX(-90deg)  translateZ(100px); }
.ovd-corto {
  font-size: 19px; font-weight: 900; text-transform: uppercase;
  letter-spacing: .06em; text-align: center; padding: 0 8px; line-height: 1.1;
  color: var(--gold, #f7c948);
}
/* ⚠️ EL RESULTADO ARRANCA TAPADO. Antes se leía el reto desde el primer
   cuadro, con el dado todavía girando al lado: no había ningún misterio que
   mirar. `both` con el retraso es lo que lo mantiene invisible hasta que el
   dado se planta — sin eso aparecería de una y el retraso no serviría. */
/* ⚠️ EL RESULTADO OCUPA SU LUGAR AUNQUE ESTÉ INVISIBLE, y el "Tirando…"
   va encima suyo, no antes. Si fueran uno abajo del otro, al aparecer el reto
   la caja crecería de golpe y el dado saltaría para arriba justo en el momento
   de más atención. Con `opacity: 0` el hueco ya está reservado desde el
   principio y no se mueve nada. */
.ovd-abajo { position: relative; width: 100%; }
.ovd-txt {
  display: flex; flex-direction: column; gap: 8px; min-width: 0;
  animation: ovdRevela .5s cubic-bezier(.2,1.7,.4,1) 10s both;  /* ← los tres iguales */
}
/* El cartel de la espera ocupa el lugar del resultado mientras rueda, y se va
   en el mismo instante en que el otro entra. */
.ovd-espera {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  animation: ovdEsconde .25s ease-out 10s both;                 /* ← los tres iguales */
}
.ovd-espera b {
  font-size: 40px; font-weight: 900; color: #fff; line-height: 1.1;
  animation: ovdLatir .55s ease-in-out infinite;
}
.ovd-espera span {
  font-size: 24px; font-weight: 800; color: var(--gold, #e8b93b);
  text-transform: uppercase; letter-spacing: .06em;
}
.ovd-eq { display: flex; align-items: center; justify-content: center; gap: 12px; }
.ovd-eq img, .ovd-eq svg { width: 48px; height: 48px; flex: 0 0 auto; }
.ovd-eq span {
  font-size: 26px; font-weight: 900; color: var(--gold, #e8b93b);
  text-transform: uppercase; letter-spacing: .06em; line-height: 1.15;
}
/* 38 y no 44: al lado de un cubo de 200 quedan unos 310px de columna, y "Un
   jugador menos al rival" a 44 se partia en tres lineas con una sola palabra
   en la ultima. El titulo mas largo es el que manda el tamaño. */
.ovd-tit { font-size: 40px; font-weight: 900; color: #fff; line-height: 1.12; }
.ovd-sub { font-size: 23px; color: var(--txt-mute, #9aa4b2); line-height: 1.35; }

@keyframes ovdEntra { from { opacity: 0; transform: translateY(18px); } }
/* Dos vueltas enteras en los dos ejes y se planta en la cara que salió. El
   --rx y el --ry los escribe el JS con el giro de esa cara. */
/* Ocho vueltas en un eje y seis en el otro, en diez segundos. Todas enteras,
   así que termina exactamente donde empezó y no corre la cara de adentro.

   ⚠️ LA CURVA ES CASI RECTA Y FRENA AL FINAL. Nueve segundos girando parejo y
   el último desacelerando es lo que da el suspenso. Un frenado repartido en los
   diez se ve como un carrusel que se apaga, no como un dado.

   ⚠️ Y SE PLANTA INCLINADO. De frente se ve un cuadrado y vuelve a parecer un
   cartel plano; la inclinación va en el transform de adentro, no acá.

   El 94% pasa de largo y el 100% vuelve: ese golpecito para atrás es lo que
   hace que se lea como algo que se acomoda y no como una foto que se detuvo. */
@keyframes ovdGira {
  0%   { transform: rotateX(0deg)    rotateY(0deg)    scale(.55); }
  94%  { transform: rotateX(2902deg) rotateY(2182deg) scale(1.08); }
  100% { transform: rotateX(2880deg) rotateY(2160deg) scale(1); }
}
@keyframes ovdRevela {
  from { opacity: 0; transform: translateX(-26px) scale(.9); }
  to   { opacity: 1; transform: none; }
}
@keyframes ovdEsconde {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; }
}
@keyframes ovdLatir {
  0%, 100% { opacity: .55; }
  50%      { opacity: 1; }
}

/* La fila del dashboard: el botón de tirar tiene que saltar a la vista. */
.st-dado-sale { font-size: 13px; font-weight: 800; color: var(--gold, #e8b93b); }
.st-dado-usados { font-size: 12px; }


/* ============= EL CARTEL QUE DICE QUÉ VERSIÓN ESTÁ CORRIENDO =============
   Arriba a la izquierda, verde, encima de todo. Se va solo a los 20 segundos.
   Está para una sola cosa: que una captura de OBS diga qué versión cargó, sin
   que nadie tenga que adivinarlo desde afuera. */
.ov-diag {
  position: fixed; top: 8px; left: 8px; z-index: 99;
  background: rgba(8,10,12,.92); color: #4ddc86;
  border: 2px solid #4ddc86; border-radius: 10px;
  padding: 8px 14px; font-size: 20px; font-weight: 800;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  letter-spacing: .02em; pointer-events: none;
}
.ov-diag b { color: #fff; font-size: 22px; }


/* ---- horarios: lo confirmado y lo que todavía no se puede tocar ----
   El panel mezclaba los 91 partidos de las 13 fechas. Ahora cada grupo dice
   qué es de un vistazo y con un color distinto: verde lo cerrado, gris lo que
   ni siquiera está abierto. */
.ha-grupo.ha-ok > b { color: var(--grass); }
.ha-f.hecho { opacity: .85; border-left: 3px solid var(--grass); }
.ha-listo { color: var(--grass); font-weight: 800; font-size: 12.5px; white-space: nowrap; }
.ha-grupo.ha-cerrado {
  border: 1px dashed var(--line); border-radius: 12px;
  padding: 12px 14px; background: rgba(255,255,255,.02);
}
.ha-grupo.ha-cerrado > b { color: var(--txt-dim); }


/* ---- los horarios, adentro del panel de Partidos ----
   Sub-bloque, no panel: adentro de otro panel, un panel completo mete dos
   bordes y dos cabeceras y se lee como si fueran dos cosas distintas. */
.ha-sub {
  margin: 0 16px 14px; border: 1px solid var(--line);
  border-radius: 12px; background: rgba(255,255,255,.02);
}
.ha-sub.ha-urge { border-color: var(--grass); box-shadow: 0 0 0 1px rgba(55,194,74,.25); }
.ha-sub-cab {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 14px; border-bottom: 1px solid var(--line-soft);
}
.ha-sub-cab b { font-size: 14px; color: var(--txt); }
.ha-sub.ha-urge .ha-sub-cab b { color: var(--grass); }
.ha-sub-cuerpo { padding: 14px; }
@media (max-width: 640px) { .ha-sub { margin: 0 10px 12px; } }


/* ==================== LA COLA DE FICHAS ==================================
   Una fila por persona esperando, la más vieja arriba. Tiene que poder
   recorrerse rápido: el que aprueba hace treinta seguidas. */
.cola-panel { border-color: rgba(247,201,72,.35); }
.cola-panel .panel-head h3 { color: var(--gold); }
.cola-acts {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 16px; border-bottom: 1px solid var(--line-soft);
}
.cola-todas { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--txt-dim); cursor: pointer; }
.cola-lista { display: grid; }
.cola-f {
  display: grid; grid-template-columns: 22px minmax(0,1fr) auto auto auto;
  gap: 12px; align-items: center; padding: 9px 16px;
  border-bottom: 1px solid var(--line-soft);
}
.cola-f:last-child { border-bottom: 0; }
/* Los que llevan más de una semana se marcan: en una cola, lo que importa no
   es cuántos hay sino a quién se le está haciendo tarde. */
.cola-f.vieja { border-left: 3px solid var(--gold); }
.cola-quien { display: flex; align-items: center; gap: 9px; min-width: 0; }
.cola-quien b { color: var(--txt); font-size: 14px; }
.cola-quien i { color: var(--txt-mute); font-size: 12.5px; font-style: normal; }
.cola-dato { color: var(--txt-dim); font-size: 12.5px; white-space: nowrap; }
.cola-espera { color: var(--txt-mute); font-size: 12.5px; white-space: nowrap; }
.cola-espera.urge { color: var(--gold); font-weight: 800; }
.cola-f .btn { font-size: 12px; padding: 6px 11px; }
@media (max-width: 700px) {
  .cola-f { grid-template-columns: 22px 1fr auto; row-gap: 6px; }
  .cola-dato, .cola-espera { grid-column: 2; }
}


/* ============ ARREGLOS DE RESPONSIVE (auditoría del 5/9) =================
   Los tres salieron de mirar el dashboard en un celular de verdad. */

/* 1 · LAS NOTIFICACIONES SE SALÍAN POR LA IZQUIERDA.
   El panel es `position: absolute; right: 0` colgado de la campana, y mide
   `min(340px, 88vw)`. En un teléfono la campana está a unos 90px del borde
   derecho, así que 88vw hacia la izquierda se pasa de la pantalla: se leía
   "ificaciones" en vez de "Notificaciones" y cada aviso empezaba cortado.
   Debajo de 700px se ancla a la PANTALLA y no a la campana. */
@media (max-width: 700px) {
  .bell-panel {
    position: fixed; top: 66px; left: 10px; right: 10px; width: auto;
  }
  .bell-list { max-height: 60vh; }
}

/* 2 · "EXPLORAR MERCADO" SALÍA CORTADO EN EL MENÚ.
   Los tres botones tenían `flex: 1 1 0%`, que reparte el ancho en partes
   iguales sin mirar el texto: los tres a 106px cuando "⚽ Explorar mercado"
   necesita 130. Con `nowrap` y `overflow: visible`, la palabra se salía del
   botón y parecía cortada contra el de al lado.
   Ahora cada uno pide lo que necesita y la fila baja al renglón siguiente
   cuando no entran: es mejor tres botones en dos filas que tres cortados. */
/* El selector repite `.nav-mobile` a proposito: la regla original es
   `.nav-mobile .nav-extra .btn` y con un selector mas corto esta perdia por
   especificidad aunque estuviera mas abajo. Escrita mas corta no hacia nada. */
.nav-mobile .nav-extra .btn { flex: 0 1 auto; min-width: max-content; }


/* ================= LOS CINCO TITULARES EN EL OVERLAY =====================
   ⚠️ SE SALE DE LA GRILLA DE NUEVE, A PROPÓSITO. Cinco cartas de 480 son 2400
   píxeles: no entran en la pantalla, mucho menos en un tercio de ella. A 320
   son 1600 más separaciones, que sí entra en los 1920. Así que esta capa se
   estira de borde a borde de la fila que le toque, en vez de vivir en una
   celda.

   El escenario está posicionado, así que un hijo absoluto se mide contra él y
   los 40px de cada lado son su mismo margen. */
.ov-cinco {
  position: absolute; left: 40px; right: 40px;
  display: flex; justify-content: center; align-items: flex-end; gap: 14px;
  /* Entra SOLO con opacidad, no con ovEntra. Aquella termina en
     `transform: none` y le borraria el translateY(-50%) que centra la fila del
     medio: la capa aparecia bien y despues saltaba hacia abajo. */
  animation: ovcEntra .4s ease-out 1;
}
@keyframes ovcEntra { from { opacity: 0; } to { opacity: 1; } }
.ov-cinco.ovc-a { top: 40px; }
.ov-cinco.ovc-m { top: 50%; transform: translateY(-50%); }
.ov-cinco.ovc-b { bottom: 40px; }
/* 352 y no 320: cinco cartas mas cuatro separaciones de 14 dan 1816, y el
   escenario deja 1840 libres entre margenes. Es el maximo que entra sin que se
   toquen. */
.ovc-carta { flex: 0 0 auto; width: 352px; }
/* --w y no width: de esa variable cuelgan la letra y el padding de adentro.
   Tocando solo `width` queda una caja chica con la letra de una carta grande,
   que fue lo que recortó la carta del overlay durante cinco intentos. */
.ovc-carta .pcard-new { --w: 352px; width: 352px; max-width: none; transform: none; }
@media (max-width: 1500px) { .ovc-carta { width: 270px; } .ovc-carta .pcard-new { --w: 270px; width: 270px; } }


/* ---- el armador de los cinco titulares, en el dashboard ----
   Una fila por jugador con su tilde: se recorre con el ojo y se marca con el
   dedo, que es lo que se hace treinta segundos antes de que arranque. */
.st-cinco-lista {
  flex: 1 1 100%; display: grid; gap: 4px; margin-top: 8px;
  max-height: 260px; overflow-y: auto;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.st-cinco-f {
  display: grid; grid-template-columns: 18px minmax(0,1fr) auto; gap: 8px;
  align-items: center; padding: 6px 9px; border-radius: 9px;
  border: 1px solid var(--line-soft); cursor: pointer; font-size: 13px;
}
.st-cinco-f:hover { border-color: var(--line); background: rgba(255,255,255,.03); }
.st-cinco-f.on { border-color: var(--grass); background: rgba(55,194,74,.08); }
.st-cinco-f b { color: var(--txt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-cinco-f i { color: var(--txt-mute); font-style: normal; font-size: 12px; white-space: nowrap; }
.st-cinco-f span { grid-column: 2 / -1; color: var(--txt-mute); font-size: 11.5px; }
.st-cinco-cuenta { font-weight: 800; color: var(--gold); }


/* ---- el carrusel de rankings por atributo ----
   Ocho paneles fijos ocupan media pantalla; en uno solo que los va pasando,
   ocupan lo mismo que cualquier otro ranking y se miran igual. */
.car-panel .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.car-nav { display: flex; align-items: center; gap: 8px; }
.car-b {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--txt-dim);
  width: 26px; height: 26px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1;
}
.car-b:hover { border-color: var(--grass); color: var(--txt); }
.car-puntos { color: var(--txt-mute); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 30px; text-align: center; }
/* La altura queda fija: sin esto, al pasar de un ranking de 5 a uno de 3 la
   página entera pega un salto y lo que estabas leyendo abajo se mueve. */
.car-cuerpo { min-height: 250px; }


/* ================= EL DIARIO, AHORA SE LEE DESLIZANDO ====================
   Antes era una hoja por vez con flechas. Pasar de página obliga a decidir
   "¿sigo o no?" en cada corte; deslizar es el gesto que ya se hace sin pensar,
   y el diario se lee sobre todo en el teléfono. */
/* ⚠️ EN COLUMNA FLEX, NO EN GRILLA. Era `display: grid` y adentro del modal
   —que le da un alto definido— las filas de una grilla se ACHICAN para entrar
   en ese alto en vez de desbordar. Cada sección quedaba de ochenta píxeles con
   el texto saliéndose por abajo, encima del título de la siguiente: se leía "El
   Diario de la Liga" atrás de "El MVP de la fecha".
   Con flex en columna y `flex: 0 0 auto` en cada hoja, nadie se encoge: el
   contenido manda el alto y el que scrollea es el rollo. */
.pd-rollo { display: flex; flex-direction: column; gap: 26px; }
.pd-rollo > .pd-hoja { flex: 0 0 auto; }
.pd-seccion { scroll-margin-top: 76px; }

/* El índice de arriba: pegajoso, para poder saltar sin volver arriba. */
.pd-indice {
  position: sticky; top: 58px; z-index: 6;
  display: flex; gap: 8px; overflow-x: auto; padding: 10px 2px; margin-bottom: 14px;
  background: linear-gradient(180deg, var(--bg) 65%, transparent);
  scrollbar-width: thin;
}
.pd-ix {
  flex: 0 0 auto; padding: 6px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel);
  color: var(--txt-dim); font-size: 12.5px; font-weight: 700; text-decoration: none;
  white-space: nowrap; max-width: 210px; overflow: hidden; text-overflow: ellipsis;
}
.pd-ix:hover { border-color: var(--grass); color: var(--txt); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }


/* ============ EL ROLLO SCROLLEA, NO CADA HOJA ============================
   ⚠️ ESTO ES LO QUE DEJABA MUERTA LA RUEDA DEL MOUSE. El diario vive en un
   modal de alto fijo (.pd-caja, 94vh) y el scroll estaba puesto en .pd-hoja,
   porque antes había UNA hoja por vez y esa hoja era todo el contenido.

   Al apilar las cinco secciones, cada una sigue siendo un .pd-hoja: cinco
   cajas con scroll propio, ninguna con nada que scrollear, y el rollo entero
   desbordando un contenedor que no scrollea. La rueda no encontraba a nadie
   que la escuchara y el navegador se la pasaba a la página de atrás.

   Ahora el que scrollea es el rollo y las hojas vuelven a ser hojas. */
.pd-lector .pd-rollo {
  flex: 1; min-height: 0; overflow-y: auto;
  /* Y que la rueda NO se escape a la página de atrás al llegar al final:
     eso es lo que hace que el fondo se mueva cuando uno cree estar leyendo. */
  overscroll-behavior: contain;
  padding-right: 4px;
}
.pd-lector .pd-rollo .pd-hoja {
  flex: 0 0 auto; overflow: visible; min-height: 0;
  display: block; margin-inline: auto; max-width: 940px;
}
.pd-lector .pd-rollo .pd-folio { margin-top: 22px; }
/* El índice queda afuera del rollo, así que no hace falta que sea pegajoso
   adentro del modal: ya está siempre arriba. */
.pd-lector .pd-indice { position: static; top: auto; }


/* ---- varios jugadores en fila, para la portada ---- */
.pd-figuras { margin: 14px 0 16px; break-inside: avoid; }
.pd-figuras-fila {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end;
  gap: 10px 14px;
}
.pd-figura-mini { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.pd-figura-mini .pd-figura-hueco img { display: block; height: 92px; width: auto; }
.pd-figura-mini b {
  font-family: Georgia, "Times New Roman", serif; font-size: 10.5px; font-weight: 700;
  color: #6b5a3c; letter-spacing: .04em; max-width: 84px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.pd-figuras figcaption {
  text-align: center; font-size: 11.5px; color: #7a6844; font-style: italic; margin-top: 8px;
}

/* ---- el editor de hora del admin ----
   Arranca escondido en las filas que ya tienen hora y se despliega entero
   debajo del cruce, para no apretujar la fila cuando esta abierto. */
/* ⚠️ EL EDITOR ES UNA FILA PROPIA, NO PARTE DE LA GRILLA. Con `display:contents`
   los dos campos, el cartelito y el boton entraban como celdas sueltas de la
   grilla de cuatro columnas de .ha-f: cada uno se estiraba a lo ancho de su
   columna y la fila pasaba a medir tres renglones. Ahora es UNA celda que
   ocupa todo el ancho y adentro acomoda lo suyo. */
.ha-editor {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap; padding-top: 8px; margin-top: 2px;
  border-top: 1px dashed var(--line-soft);
}
.ha-editor[hidden] { display: none; }
.ha-elegir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ha-elegir .f-input { width: auto; min-width: 0; padding: 6px 9px; font-size: 13px; }
.ha-elegir input[type="date"] { min-width: 140px; }
.ha-elegir input[type="time"] { min-width: 96px; }
.ha-mx { font-style: normal; font-size: 11.5px; color: var(--txt-mute); white-space: nowrap; }
/* los tres botones juntos, sin estirarse */
.ha-botones { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.ha-editar, .ha-renegociar { white-space: nowrap; }
.ha-f .ha-botones .btn { font-size: 12px; padding: 7px 10px; }
@media (max-width: 820px) {
  .ha-botones { grid-column: 1 / -1; justify-content: flex-start; }
  .ha-elegir { width: 100%; }
  .ha-elegir .f-input { flex: 1 1 120px; }
}

/* ===================== LOS COSMÉTICOS DE LA CARTA =========================
   ⚠️ CONTORNO NO ES MARCO. El contorno es el borde que la carta ya tiene según
   tu media —la clase `n-bronce`, `n-plata`, `n-oro`— y NO se toca nunca: es lo
   que dice de un vistazo cuánto vale un jugador, y si un cosmético pudiera
   pisarlo, la carta dejaría de informar. El marco es un adorno que se apoya
   ENCIMA, por dentro del contorno. Los dos se ven juntos.

   Todo esto se apoya en `--w` y en `em`, igual que el resto de la carta, así
   que funciona igual a 268 px en el mercado que a 480 px en el overlay.
   ========================================================================= */

/* ---- color del nombre ---- */
.pc-col-verde   .pn-name { color: #4ddc86; }
.pc-col-celeste .pn-name { color: #7fd6ff; }
.pc-col-azul    .pn-name { color: #5b8cff; }
.pc-col-rojo    .pn-name { color: #ff5b5b; }
.pc-col-violeta .pn-name { color: #c07dff; }
.pc-col-dorado  .pn-name { color: #f7c948; text-shadow: 0 0 .5em rgba(247,201,72,.45); }
/* el cromado y el prisma no son un color: son un degradado recortado sobre la
   letra, por eso el color del texto va transparente */
.pc-col-cromo .pn-name, .pc-col-prisma .pn-name, .pc-col-fantasy .pn-name,
.pc-col-aurora .pn-name, .pc-col-cristal .pn-name, .pc-col-nebula .pn-name {
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.pc-col-cromo .pn-name {
  background-image: linear-gradient(180deg, #fff, #9fb4c4 45%, #fff 55%, #6f8494);
}
.pc-col-prisma .pn-name {
  background-image: linear-gradient(92deg, #ff5b8a, #ffd166, #4ddc86, #5bd1ff, #c07dff, #ff5b8a);
  background-size: 300% 100%;
  animation: pcPrisma 5s linear infinite;
}
@keyframes pcPrisma { to { background-position: 300% 0; } }
.pc-col-fantasy .pn-name {
  background-image: linear-gradient(92deg, #9b6bff, #ffd9a0, #6be0ff, #9b6bff);
  background-size: 260% 100%;
  animation: pcPrisma 6s linear infinite;
  filter: drop-shadow(0 0 .4em rgba(155,107,255,.6));
}
/* Los otros tres de la coleccion. Se distinguen entre si de lejos: la aurora
   es verde y turquesa y se mueve despacio, el cristal es hielo quieto con
   filo, y la nebula es violeta profundo con rosa. */
.pc-col-aurora .pn-name {
  background-image: linear-gradient(92deg, #4ddc86, #6be0ff, #b9ffea, #4ddc86);
  background-size: 260% 100%;
  animation: pcPrisma 9s linear infinite;
  filter: drop-shadow(0 0 .45em rgba(77,220,134,.55));
}
.pc-col-cristal .pn-name {
  background-image: linear-gradient(168deg, #ffffff, #cfefff 40%, #8ec9ee 58%, #ffffff);
  filter: drop-shadow(0 .06em .1em rgba(20,60,90,.75));
}
.pc-col-nebula .pn-name {
  background-image: linear-gradient(100deg, #6a2bd9, #ff6ad5 45%, #c9a6ff 70%, #6a2bd9);
  background-size: 240% 100%;
  animation: pcPrisma 7s linear infinite;
  filter: drop-shadow(0 0 .5em rgba(255,106,213,.5));
}

/* ---- tipografía del nombre ---- */
/* ⚠️ LAS FUENTES VAN EN EL REPOSITORIO, NO EN GOOGLE FONTS. La politica de
   seguridad de la pagina solo deja cargar cosas de nuestro propio dominio, asi
   que un <link> a fonts.googleapis.com no traeria nada — y ademas seria contarle
   a Google quien entra a la pagina.

   ⚠️ Y ANTES NINGUNA SE VEIA. Estaban pedidas por nombre del sistema —"Stencil
   Std", "Old English Text MT", "Copperplate Gothic Bold", "Papyrus"— y ninguna
   de esas viene instalada en Windows ni en el celular: las cinco caian en la
   misma letra de respaldo. Sacar la tipografia Gotica y la Stencil daba
   exactamente la misma carta, que es el peor premio posible.

   El navegador descarga el archivo recien cuando una carta usa esa clase, asi
   que tener doce no le cuesta nada al que no tiene ninguna. */
@font-face { font-family: "dl-inter";      src: url("/assets/fonts/inter.woff2") format("woff2");      font-weight: 900; font-display: swap; }
@font-face { font-family: "dl-archivo";    src: url("/assets/fonts/archivo.woff2") format("woff2");    font-weight: 400; font-display: swap; }
@font-face { font-family: "dl-montserrat"; src: url("/assets/fonts/montserrat.woff2") format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: "dl-sora";       src: url("/assets/fonts/sora.woff2") format("woff2");       font-weight: 800; font-display: swap; }
@font-face { font-family: "dl-outfit";     src: url("/assets/fonts/outfit.woff2") format("woff2");     font-weight: 900; font-display: swap; }
@font-face { font-family: "dl-oxanium";    src: url("/assets/fonts/oxanium.woff2") format("woff2");    font-weight: 700; font-display: swap; }
@font-face { font-family: "dl-rajdhani";   src: url("/assets/fonts/rajdhani.woff2") format("woff2");   font-weight: 700; font-display: swap; }
@font-face { font-family: "dl-cinzel";     src: url("/assets/fonts/cinzel.woff2") format("woff2");     font-weight: 700; font-display: swap; }
@font-face { font-family: "dl-marcellus";  src: url("/assets/fonts/marcellus.woff2") format("woff2");  font-weight: 400; font-display: swap; }
@font-face { font-family: "dl-cinzeldec";  src: url("/assets/fonts/cinzeldec.woff2") format("woff2");  font-weight: 900; font-display: swap; }
@font-face { font-family: "dl-pirata";     src: url("/assets/fonts/pirata.woff2") format("woff2");     font-weight: 400; font-display: swap; }
@font-face { font-family: "dl-uncial";     src: url("/assets/fonts/uncial.woff2") format("woff2");     font-weight: 400; font-display: swap; }

/* comun · normal, limpia, base */
.pc-letra-inter      .pn-name { font-family: "dl-inter", system-ui, sans-serif; font-weight: 900; letter-spacing: -.01em; }
.pc-letra-archivo    .pn-name { font-family: "dl-archivo", Impact, sans-serif; font-weight: 400; letter-spacing: .01em; }
.pc-letra-montse     .pn-name { font-family: "dl-montserrat", system-ui, sans-serif; font-weight: 800; letter-spacing: .03em; }
/* poco comun · mas moderna y tecnologica */
.pc-letra-sora       .pn-name { font-family: "dl-sora", system-ui, sans-serif; font-weight: 800; letter-spacing: .02em; }
.pc-letra-outfit     .pn-name { font-family: "dl-outfit", system-ui, sans-serif; font-weight: 900; letter-spacing: .04em; }
/* raro · gaming, deportiva */
.pc-letra-oxanium    .pn-name { font-family: "dl-oxanium", system-ui, sans-serif; font-weight: 700; letter-spacing: .05em; }
.pc-letra-rajdhani   .pn-name { font-family: "dl-rajdhani", system-ui, sans-serif; font-weight: 700; letter-spacing: .07em; }
/* epico · prestigio, coleccion */
.pc-letra-cinzel     .pn-name { font-family: "dl-cinzel", Georgia, serif; font-weight: 700; letter-spacing: .07em; }
.pc-letra-marcellus  .pn-name { font-family: "dl-marcellus", Georgia, serif; font-weight: 400; letter-spacing: .09em; }
/* legendario · unica, monumental */
.pc-letra-cinzeldec  .pn-name {
  font-family: "dl-cinzeldec", Georgia, serif; font-weight: 900; letter-spacing: .05em;
  text-shadow: 0 .06em 0 rgba(0,0,0,.55), 0 -.03em 0 rgba(255,255,255,.35);
}
.pc-letra-pirata     .pn-name { font-family: "dl-pirata", Georgia, serif; font-weight: 400; letter-spacing: .04em; }
/* y la de la coleccion Fantasy */
.pc-letra-fantasy    .pn-name { font-family: "dl-uncial", Georgia, serif; font-weight: 400; letter-spacing: .05em; }
.pc-letra-fantasyrey .pn-name {
  font-family: "dl-cinzeldec", Georgia, serif; font-weight: 900; letter-spacing: .06em;
  text-shadow: 0 0 .5em rgba(201,166,255,.7), 0 .06em 0 rgba(0,0,0,.6);
}
/* la viva respira: es la única con movimiento */
/* La viva respira Y tiene su letra: sin fuente propia el premio legendario se
   veia igual que una carta sin tipografia, solo que moviendose. */
.pc-letra-viva .pn-name {
  font-family: "dl-cinzeldec", Georgia, serif; font-weight: 900;
  animation: pcViva 2.4s ease-in-out infinite; transform-origin: center;
}
@keyframes pcViva {
  0%, 100% { letter-spacing: .02em; transform: scaleY(1); }
  50%      { letter-spacing: .08em; transform: scaleY(1.06); }
}

/* ---- el apodo, abajo del nombre ----
   ⚠️ EL ESTILO ACOMPAÑA AL RANGO. "Joven promesa" y "Leyenda" no pueden verse
   igual: si el mejor apodo del catálogo se lee con la misma letra gris que el
   más común, sacarlo deja de significar algo. */
/* ⚠️ EL APODO SE LEE, NO SE INSINUA. A .82em y pegado al nombre era una linea
   de letra chica: "EL ULTIMO 10" o "DIAMANTE EN BRUTO" son premios legendarios y
   se veian como una aclaracion. Mas cuerpo, y aire arriba y abajo para que no
   parezca ni parte del nombre ni de los atributos. */
.pn-apodo {
  margin: .18em 0 .34em; font-size: 1.02em; font-weight: 900;
  letter-spacing: .13em; text-transform: uppercase; text-align: center;
  line-height: 1.15;
}
.pn-apodo.r-comun { color: #9fb0a7; letter-spacing: .1em; font-size: .9em; }
.pn-apodo.r-poco  { color: #c3cfc8; }
.pn-apodo.r-raro  { color: #f0c04a; }
.pn-apodo.r-epico { color: #c07dff; text-shadow: 0 0 .6em rgba(192,125,255,.5); }
.pn-apodo.r-leg {
  background-image: linear-gradient(92deg, #f7e08a, #fff6cf, #c99a2a, #f7e08a);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pcPrisma 4.5s linear infinite;
}
.pn-apodo.r-fantasy {
  background-image: linear-gradient(92deg, #9b6bff, #ffd9a0, #6be0ff, #9b6bff);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pcPrisma 4s linear infinite;
}

/* ---- fondos ----
   Van DETRÁS de todo con un pseudo-elemento del contenedor, así que no tapan
   la skin ni los números.

   ⚠️ SON ILUSTRACIONES A LA MEDIDA DE LA CARTA, NO TEXTURAS. Cada una viene
   dibujada con el centro oscuro y el dibujo contra los bordes, justamente para
   que el nombre y los números se lean por encima. Por eso van enteras, sin
   máscara ni opacidad a la mitad: apagarlas sería tapar el trabajo que ya trae
   hecho la imagen. La versión anterior eran degradados de CSS y se notaba.

   ⚠️ LA BASE VA CON LA MISMA ESPECIFICIDAD QUE LAS HIJAS. Antes esta regla era
   `.pcard-new[class*=...]` —dos selectores— y cada fondo era `.pc-fondo-x`, uno
   solo: la base ganaba, y como usa el atajo `background`, les borraba la imagen
   a todas. Se veia el hueco oscuro y ningun fondo. Por eso ahora todas empiezan
   con `.pcard-new`. */
/* ⚠️ PISA AL DESTELLO DE LAS CARTAS DE ORO, QUE USA ESTE MISMO ::after. Ese
   destello es una franja angosta e inclinada (45% de ancho, 150% de alto,
   skew y una animacion que la hace barrer la carta), y como `inset` no toca
   `width`, `height`, `transform` ni `animation`, el fondo heredaba las cuatro:
   se veia una tira diagonal del dibujo cruzando la carta y deslizandose. Por
   eso hay que apagarlas una por una. La carta de oro pierde el barrido cuando
   tiene fondo puesto — el fondo es el premio, el barrido es decoracion. */
.pcard-new[class*="pc-fondo-"]::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: auto; height: auto; transform: none; animation: none;
  background: center/100% 100% no-repeat; opacity: 1;
}
.pcard-new.pc-fondo-liso::after   { background-image: url("/assets/sobres/fondos/liso.webp"); }
.pcard-new.pc-fondo-banco::after  { background-image: url("/assets/sobres/fondos/banco.webp"); }
.pcard-new.pc-fondo-gradas::after { background-image: url("/assets/sobres/fondos/gradas.webp"); }
.pcard-new.pc-fondo-pixel::after  { background-image: url("/assets/sobres/fondos/pixel.webp"); }
.pcard-new.pc-fondo-estadioanim::after { background-image: url("/assets/sobres/fondos/estadioanim.webp"); }
.pcard-new.pc-fondo-mineanim::after    { background-image: url("/assets/sobres/fondos/mineanim.webp"); }
.pcard-new.pc-fondo-fantasy::after     { background-image: url("/assets/sobres/fondos/fantasy.webp"); }
/* ⚠️ EL FANTASY ES EL FONDO LEGENDARIO DE LA COLECCION, asi que no se conforma
   con el respiro que tienen los otros animados: ademas del acercamiento le pasa
   un resplandor rosa por encima que late a otro ritmo. Dos animaciones
   desfasadas hacen que nunca se vea igual dos veces seguidas — con una sola, el
   ojo le encuentra el ciclo enseguida. */
.pcard-new.pc-fondo-fantasy { position: relative; }
.pcard-new.pc-fondo-fantasy::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit; display: block; width: auto; height: auto;
  border: 0; transform: none;
  background:
    radial-gradient(58% 38% at 24% 22%, rgba(255, 92, 214, .55), transparent 70%),
    radial-gradient(52% 34% at 78% 68%, rgba(107, 224, 255, .45), transparent 72%);
  mix-blend-mode: screen;
  animation: pcFantasyVive 5.2s ease-in-out infinite alternate;
}
@keyframes pcFantasyVive {
  from { opacity: .35; transform: scale(1)    translateY(0); filter: saturate(1); }
  to   { opacity: .95; transform: scale(1.12) translateY(-3%); filter: saturate(1.5); }
}

/* ---- los wallpapers ----
   Son de dos clases y se tratan distinto.

   LOS TRES DE AMBIENTE (liso, cancha, fantasy) son ilustraciones enteras: van
   recortadas a la carta (`cover`) y con una sombra encima, porque tienen color
   por todos lados y sin apagarlas se comen la media y los atributos.

   LOS SEIS PERSONAJES son skins de Minecraft recortadas, y ahi el problema es
   otro: arriba de ellas va la skin del jugador, y dos munecos encimados en el
   centro de la carta no se entienden. Por eso el personaje se apoya ABAJO Y A
   LA DERECHA, mas grande que la carta y cortado por el borde, como el jugador
   grande de una portada: el hueco de arriba al medio —donde esta la cabeza del
   dueno de la carta— le queda libre. Y va atenuado, que es lo que separa "el
   fondo" de "el jugador".

   ⚠️ CADA CAPA DEL FONDO TIENE SU MEDIDA Y SU POSICION. La sombra va primera
   (arriba de todo) y a pantalla completa; el dibujo va segunda (abajo) con su
   propio tamano. Si se les diera una sola medida a las dos, o la sombra no
   taparia toda la carta o el personaje saldria estirado. */
.pcard-new[class*="pc-fondo-w-"]::after {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.pcard-new[class*="pc-fondo-w-"] {
  --vidrio: linear-gradient(180deg, rgba(5,9,7,.74) 0%, rgba(5,9,7,.42) 34%,
                                     rgba(5,9,7,.52) 62%, rgba(5,9,7,.88) 100%);
}
.pcard-new.pc-fondo-w-simple::after  { background-image: var(--vidrio), url("/assets/sobres/wall/simple.jpg"); }
.pcard-new.pc-fondo-w-cancha::after  { background-image: var(--vidrio), url("/assets/sobres/wall/cancha.jpg"); }
.pcard-new.pc-fondo-w-fantasy::after { background-image: var(--vidrio), url("/assets/sobres/wall/fantasy.jpg"); }

/* ---- los wallpapers de personaje ----
   ⚠️ NO ES LA SKIN SOLA: ES UN BANNER. Pegar el muñeco sobre el dorado de la
   carta da media figura flotando en la nada — que es lo que habia. Cada uno
   tiene ahora su fondo con los colores de su camiseta, un abanico de rayos que
   gira detras y un resplandor que respira, y recien encima de todo eso va el
   personaje. Ese fondo va en su propia capa (.pn-banner) y no en el ::after de
   la carta, porque asi puede llevar dos pseudo-elementos propios y animarse con
   transformaciones, que es lo unico que se mueve barato.

   ⚠️ Y LOS LEGENDARIOS SE TIENEN QUE NOTAR DE LEJOS. Es la diferencia entre un
   premio que queres que te salga y uno que te sale. Los dos legendarios suman
   un destello que barre la carta, el resplandor mas fuerte y los rayos girando
   al doble. */
.pn-banner {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(162deg, var(--b1) 0%, #070c09 74%);
}
/* ⚠️ EL FONDO ES UNA FOTO, NO CAPAS DE CSS. Se probo armar estos escenarios con
   degradados —cesped a franjas, un arco hecho de lineas, el rombo de la bandera
   con un conic-gradient— y se ven exactamente como lo que son: figuras
   geometricas. Un estadio de noche con la tribuna llena, la niebla y los
   reflectores partiendola no se dibuja con rectangulos. Las seis se generaron
   en la maquina (dl-imagenes/banners.py), una por jugador y con los colores de
   su seleccion o su club.

   ⚠️ Y VIENEN CON EL CENTRO OSCURECIDO DE FABRICA. Encima va siempre la skin del
   duenio de la carta: el script les pinta una sombra ovalada arriba al medio
   antes de guardarlas, asi el munequito no se pierde contra la tribuna. Eso no
   se puede resolver con una capa de CSS sin apagar tambien los bordes, que son
   justo lo que da el ambiente. */
.pc-fondo-p-comandante .pn-banner { background: url("/assets/sobres/banner/comandante.webp") center/cover no-repeat; }
.pc-fondo-p-goat       .pn-banner { background: url("/assets/sobres/banner/goat.webp") center/cover no-repeat; }
.pc-fondo-p-diegote    .pn-banner { background: url("/assets/sobres/banner/diegote.webp") center/cover no-repeat; }
.pc-fondo-p-reypele    .pn-banner { background: url("/assets/sobres/banner/reypele.webp") center/cover no-repeat; }
.pc-fondo-p-principe   .pn-banner { background: url("/assets/sobres/banner/principe.webp") center/cover no-repeat; }
.pc-fondo-p-kiki       .pn-banner { background: url("/assets/sobres/banner/kiki.webp") center/cover no-repeat; }

/* ⚠️ DE RARO PARA ABAJO NO SE MUEVE NI APARECE EL ABANICO. Antes solo le
   apagaba la animacion y quedaba un abanico quieto cruzando la carta, que se
   veia peor que si girara: una estrella de rayas pegada encima del dibujo. */
.pc-fondo-p-kiki .pn-banner::before,
.pc-fondo-p-principe .pn-banner::before { display: none; }

/* el abanico de rayos, girando despacio detras del jugador */
.pn-banner::before {
  content: ""; position: absolute; left: 50%; top: 6%;
  width: 200%; aspect-ratio: 1; translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 255, 255, .5) 0deg 1.6deg, transparent 1.6deg 15deg);
  opacity: .16; animation: pcBanRayos 44s linear infinite;
}
@keyframes pcBanRayos { to { rotate: 360deg; } }
/* y el personaje, apoyado abajo a la derecha y cortado por el borde */
.pn-banner::after {
  content: ""; position: absolute; inset: 0;
  background: var(--figura) no-repeat right -24% bottom -4% / auto 66%;
  filter: drop-shadow(-.3em .2em .5em rgba(0, 0, 0, .55));
}

.pc-fondo-p-comandante { --b1: #7a0c1e; --b2: rgba(255,88,88,.55);  --b3: rgba(255,214,120,.5);
                         --figura: url("/assets/sobres/wall/comandante.webp"); }
.pc-fondo-p-goat       { --b1: #0d4a7a; --b2: rgba(134,206,255,.6);  --b3: rgba(255,255,255,.45);
                         --figura: url("/assets/sobres/wall/goat.webp"); }
.pc-fondo-p-diegote    { --b1: #0f3b6b; --b2: rgba(116,172,223,.6);  --b3: rgba(255,222,140,.4);
                         --figura: url("/assets/sobres/wall/diegote.webp"); }
.pc-fondo-p-reypele    { --b1: #0a5c2b; --b2: rgba(255,223,0,.5);    --b3: rgba(255,255,255,.4);
                         --figura: url("/assets/sobres/wall/reypele.webp"); }
.pc-fondo-p-principe   { --b1: #5c0a2c; --b2: rgba(90,130,255,.55);  --b3: rgba(255,206,100,.4);
                         --figura: url("/assets/sobres/wall/principe.webp"); }
.pc-fondo-p-kiki       { --b1: #0b1f4b; --b2: rgba(230,51,41,.5);    --b3: rgba(255,255,255,.4);
                         --figura: url("/assets/sobres/wall/kiki.webp"); }

/* la sombra que deja leer los numeros, encima del banner */
.pcard-new[class*="pc-fondo-p-"] {
  --vidrio: linear-gradient(196deg, rgba(6,10,8,.5) 0%, rgba(6,10,8,.12) 30%,
                                     rgba(6,10,8,.42) 64%, rgba(6,10,8,.88) 100%);
}
.pcard-new[class*="pc-fondo-p-"]::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  width: auto; height: auto; transform: none; animation: none; opacity: 1;
  background: var(--vidrio);
}

/* ---- los dos legendarios ---- */
.pc-fondo-p-comandante .pn-banner::before,
.pc-fondo-p-goat .pn-banner::before { opacity: .6; animation-duration: 22s; }
/* el resplandor que late detras del jugador */
.pc-fondo-p-comandante .pn-banner,
.pc-fondo-p-goat .pn-banner { animation: pcBanLeyenda 3.6s ease-in-out infinite; }
@keyframes pcBanLeyenda {
  0%, 100% { filter: saturate(1) brightness(1); }
  50%      { filter: saturate(1.35) brightness(1.16); }
}
/* y un destello que barre la carta de punta a punta */
.pc-fondo-p-comandante .pn-banner,
.pc-fondo-p-goat .pn-banner { position: absolute; }
.pcard-new.pc-fondo-p-comandante .pn-banner > i,
.pcard-new.pc-fondo-p-goat .pn-banner > i {
  content: ""; position: absolute; top: -40%; left: -60%;
  width: 46%; height: 200%; transform: rotate(16deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent);
  mix-blend-mode: screen;
  animation: pcBanDestello 4.2s ease-in-out infinite;
}
@keyframes pcBanDestello {
  0%, 58% { left: -60%; }
  100%    { left: 130%; }
}

/* ⚠️ Y LOS NUMEROS LLEVAN SOMBRA. La columna de la derecha cae justo sobre el
   personaje, y una camiseta roja o un short blanco son fondos con los que el
   verde de un atributo pelea. La sombra los despega de lo que haya atras, sea
   lo que sea — no depende de que el dibujo sea oscuro. */
.pcard-new[class*="pc-fondo-p-"] .pn-stats b,
.pcard-new[class*="pc-fondo-p-"] .pn-stats span,
.pcard-new[class*="pc-fondo-p-"] .pn-name,
.pcard-new[class*="pc-fondo-p-"] .pn-media b,
.pcard-new[class*="pc-fondo-p-"] .pn-valor { text-shadow: 0 .08em .3em rgba(0, 0, 0, .95); }

/* Con un personaje atras, la skin del dueno se corre a la izquierda y se hace
   un poco mas chica: asi los dos se ven enteros en vez de pisarse. */
.pcard-new[class*="pc-fondo-p-"] .pn-skin { justify-items: start; padding-left: .6em; }
.pcard-new[class*="pc-fondo-p-"] .pn-skin > * { transform: scale(.86); }

/* El de "estadio de noche" es una foto, no una ilustración con el centro
   vaciado: esa sí necesita que la apaguemos para que se lea la carta. */
.pcard-new.pc-fondo-noche::after {
  background: center/cover no-repeat url("/assets/sobres/estadio.jpg"); opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, #000 0 62%, transparent 88%);
  mask-image: linear-gradient(180deg, #000 0 62%, transparent 88%);
}
/* Los que el catálogo vende como animados respiran. El dibujo es fijo; el
   movimiento lo pone la carta, no el archivo. */
.pcard-new.pc-fondo-pixel::after,
.pcard-new.pc-fondo-estadioanim::after,
.pcard-new.pc-fondo-mineanim::after,
.pcard-new.pc-fondo-fantasy::after { animation: pcFondoVive 7s ease-in-out infinite alternate; }
@keyframes pcFondoVive {
  from { transform: scale(1);    filter: brightness(.95); }
  to   { transform: scale(1.06); filter: brightness(1.15); }
}

/* ---- marcos ----
   ⚠️ SON IMÁGENES, Y VAN ENCIMA DE LA CARTA ENTERA. La primera versión los
   dibujaba como un `border` de color por dentro del contorno; ahora cada marco
   es un PNG ilustrado con el centro transparente, así que se apoya sobre TODA
   la carta y el hueco del medio deja ver la skin, el nombre y los números.

   ⚠️ Y EL CONTORNO DE LA MEDIA SIGUE DEBAJO. El marco no lo reemplaza: un
   jugador de oro con el marco de hielo sigue teniendo su borde dorado asomando
   por detrás. Eso es a propósito — el contorno dice cuánto vale el jugador y un
   cosmético no puede taparlo.

   ⚠️ `100% 100%` y no `cover`: el marco está dibujado a la proporción exacta de
   la carta (0,623), así que estirarlo a la medida es lo correcto. Con `cover`,
   en una carta un pixel más angosta se recorta el borde y se pierde el filo. */
.pn-marco {
  /* ⚠️ AL MISMO NIVEL QUE EL TEXTO, NO ENCIMA. Estaba en z-index 2 y le pasaba
     por arriba al "84" y a "VALOR DE MERCADO" cuando el dibujo se metia un poco
     mas adentro de la cuenta: no se veia corrido, se veia CORTADO. Con el mismo
     nivel gana el que va despues en el HTML, que es el contenido, asi que en el
     peor caso el numero se apoya sobre el adorno y se sigue leyendo. */
  /* ⚠️ UN SOLO NUMERO PARA LOS TRECE, Y ESE ES EL ARREGLO. Acá decía
     `inset: var(--sob, -5%)` con un comentario largo explicando que cada marco
     asomaba "su propio margen transparente medido". Precioso, salvo que
     `--sob` NO ESTABA DEFINIDO EN NINGÚN LADO: los trece caían en el -5% de
     reserva.

     Y ese -5% ni siquiera es simétrico. En CSS el `inset` de izquierda y
     derecha se mide contra el ANCHO y el de arriba y abajo contra el ALTO: en
     una carta de 268×430 eso son 13px a los costados y 21px arriba y abajo. El
     dibujo salía estirado a lo alto. Eso era lo que se veía como "el marco no
     es simétrico".

     Encima ningún dibujo estaba centrado en su propia imagen —el de plata
     tenía 2,34% de aire a la izquierda y 1,72% a la derecha— así que el marco
     quedaba corrido sin que nadie lo hubiera dibujado así.

     Ahora eso no se arregla acá: se arregla en los ARCHIVOS. Los trece se
     regeneraron con `db/marcos_normalizar.py`, que recorta cada dibujo a lo que
     realmente pinta y lo vuelve a guardar ocupando exactamente la caja de la
     carta, con un 8% parejo de aire alrededor para el resplandor. Por eso acá
     hay un solo número: -8%, el mismo aire, para los trece. El día que entre un
     marco nuevo se le pasa el script y entra derecho.

     ⚠️ Y 116% EN LA MASCARA MAS ABAJO ES ESTE MISMO 8%: 100 + 8 + 8. Los dos
     números están atados; si se toca AIRE en el script, se tocan los dos. */
  position: absolute; inset: -8%; z-index: 1;
  pointer-events: none; border: 0;
  background: center/100% 100% no-repeat;
}
.pc-marco-bronce  .pn-marco { background-image: url("/assets/sobres/marcos/bronce.webp?m=2"); }
.pc-marco-plata   .pn-marco { background-image: url("/assets/sobres/marcos/plata.webp?m=2"); }
.pc-marco-oro     .pn-marco { background-image: url("/assets/sobres/marcos/oro.webp?m=2"); }
.pc-marco-fuego   .pn-marco { background-image: url("/assets/sobres/marcos/fuego.webp?m=2"); }
.pc-marco-hielo   .pn-marco { background-image: url("/assets/sobres/marcos/hielo.webp?m=2"); }
.pc-marco-veneno  .pn-marco { background-image: url("/assets/sobres/marcos/veneno.webp?m=2"); }
.pc-marco-void    .pn-marco { background-image: url("/assets/sobres/marcos/void.webp?m=2"); }
.pc-marco-holo    .pn-marco { background-image: url("/assets/sobres/marcos/holo.webp?m=2"); }
.pc-marco-dioses  .pn-marco { background-image: url("/assets/sobres/marcos/dioses.webp?m=2"); }
.pc-marco-rey     .pn-marco { background-image: url("/assets/sobres/marcos/rey.webp?m=2"); }
.pc-marco-fantasy .pn-marco { background-image: url("/assets/sobres/marcos/fantasy.webp?m=2"); }
.pc-marco-bosque  .pn-marco { background-image: url("/assets/sobres/marcos/bosque.webp?m=2"); }
.pc-marco-viva    .pn-marco { background-image: url("/assets/sobres/marcos/viva.webp?m=2"); }

/* ---- los marcos animados ----
   ⚠️ CADA UNO CON LO SUYO, NO TODOS CON EL MISMO DESTELLO BLANCO. Antes los
   cuatro animados compartian un `pcMarcoLate` que subia y bajaba un resplandor
   blanco: el marco Fantasy latia igual que el de Rey de la Noche y que el de la
   liga, asi que ninguno se sentia distinto — y el legendario tiene que ser lo
   que uno quiere que le salga. Ahora el resplandor es del color del marco y el
   movimiento tambien cambia: el Fantasy respira rosa y le cruza un brillo, el
   Rey de la Noche palpita frio y lento, el de la liga pulsa en verde y azul, y
   la Carta en movimiento se mueve de verdad.

   El resplandor va como `drop-shadow` y no como `box-shadow` porque el marco es
   un PNG recortado: box-shadow dibujaria el halo del rectangulo, no el del
   dibujo. */

/* Fantasy · rosa y violeta, lo mas destacado del catalogo */
/* ⚠️ EL MARCO NO LEVITA NI PARPADEA ENTERO. Antes hacia dos cosas a la vez y
   ninguna se leia: la carta entera crecia un 1,2% —eso era el "como flotando"—
   y encima todo el dibujo se prendia de rosa al mismo tiempo, asi que no habia
   un DONDE. Un marco que se ilumina entero es un marco que parpadea.

   Ahora la animacion tiene un recorrido y se cuenta sola: la gema de abajo
   enciende fuerte, de ahi salen dos rayos que suben por los dos costados
   siguiendo el contorno, y al llegar arriba encienden la corona de gemas. Una
   vuelta, un camino, un final.

   ⚠️ LOS DOS RAYOS NO SE DIBUJAN: LOS DIBUJA LA MASCARA. Lo que sube es UNA
   franja de luz horizontal, pero recortada con la silueta del marco lo unico
   que queda encendido de esa franja son los dos rieles de los costados, que es
   justo donde el marco tiene dibujo a esa altura. Dos rayos gratis, y siempre
   pegados al contorno por mas que cambie el dibujo. Por eso tambien funciona
   sola la gema y la corona: abajo del todo y arriba del todo el marco es ancho,
   asi que la misma franja enciende la pieza entera.

   La franja se mueve con `background-position` y no con `transform`: el
   transform mueve TODA la capa, mascara incluida, y entonces el recorte viaja
   junto con la luz y no recorta nada. */
.pc-marco-fantasy .pn-marco {
  animation: pcFantasyAura 4.6s ease-in-out infinite;
}
/* El resplandor de afuera acompana el recorrido: fuerte en la gema, tenue
   mientras la luz sube, y fuerte otra vez en la corona. */
@keyframes pcFantasyAura {
  0%       { filter: drop-shadow(0 0 1.5em rgba(255, 92, 214, .9)) saturate(1.22) brightness(1.02); }
  16%      { filter: drop-shadow(0 0 1.7em rgba(255, 92, 214, .95)) saturate(1.26) brightness(1.04); }
  34%      { filter: drop-shadow(0 0 .55em rgba(255, 92, 214, .42)) saturate(1) brightness(.9); }
  62%      { filter: drop-shadow(0 0 .8em rgba(255, 120, 228, .55)) saturate(1.06) brightness(.94); }
  84%      { filter: drop-shadow(0 0 2.1em rgba(255, 150, 240, 1))
                     drop-shadow(0 0 3.4em rgba(155, 107, 255, .75))
                     saturate(1.35) brightness(1.16); }
  100%     { filter: drop-shadow(0 0 1.5em rgba(255, 92, 214, .9)) saturate(1.22) brightness(1.02); }
}

.pc-marco-fantasy .pn-marco::after {
  content: ""; position: absolute; inset: 0;
  -webkit-mask: url("/assets/sobres/marcos/fantasy.webp?m=2") center/100% 100% no-repeat;
          mask: url("/assets/sobres/marcos/fantasy.webp?m=2") center/100% 100% no-repeat;
  /* Blanco en el nucleo y rosa en los bordes: asi la pieza encendida se lee
     como luz y no como una mancha de color encima del dibujo. */
  /* ⚠️ ANGOSTA Y CON EL NUCLEO BLANCO. Con la franja ancha y rosa, la pieza
     encendida no se distinguia del marco —que ya es rosa— y la animacion se
     veia como un parpadeo general. Angosta se lee el borde de la luz, o sea
     DONDE esta; blanca en el centro se lee como luz y no como color. */
  background:
    radial-gradient(64% 60% at 50% 50%,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 190, 250, .95) 26%,
      rgba(255, 120, 240, .6) 52%,
      rgba(190, 90, 255, .22) 74%,
      transparent 88%);
  background-repeat: no-repeat;
  background-size: 150% 17%;
  filter: blur(.5px);
  mix-blend-mode: screen; pointer-events: none;
  animation: pcFantasySube 4.6s cubic-bezier(.45, .05, .5, .95) infinite;
}
@keyframes pcFantasySube {
  /* la gema de abajo prende y se queda un rato */
  0%   { background-position: 50% 112%; opacity: 0; }
  6%   { background-position: 50% 100%; opacity: 1; }
  26%  { background-position: 50% 100%; opacity: 1; }
  /* los dos rayos suben por el contorno */
  76%  { background-position: 50% 0%;   opacity: 1; }
  /* y encienden la corona */
  94%  { background-position: 50% 0%;   opacity: 1; }
  100% { background-position: 50% -10%; opacity: 0; }
}

/* Rey de la Noche · frio, lento, azul de luna */
.pc-marco-rey .pn-marco { animation: pcReyLate 5.2s ease-in-out infinite; }
@keyframes pcReyLate {
  0%, 100% { filter: drop-shadow(0 0 .5em rgba(120, 170, 255, .4)) brightness(.98); }
  50%      { filter: drop-shadow(0 0 2.2em rgba(150, 200, 255, .9))
                     drop-shadow(0 0 4em rgba(60, 90, 200, .6)) brightness(1.18); }
}

/* Dioses League · el verde y el azul de la liga, a ritmo de himno */
.pc-marco-dioses .pn-marco { animation: pcDiosesLate 2.9s ease-in-out infinite; }
@keyframes pcDiosesLate {
  0%, 100% { filter: drop-shadow(0 0 .5em rgba(77, 220, 134, .45)); }
  50%      { filter: drop-shadow(0 0 1.8em rgba(77, 220, 134, .95))
                     drop-shadow(0 0 3em rgba(91, 140, 255, .65)) brightness(1.12); }
}

/* Carta en movimiento · es la unica que se mueve ella, no su resplandor */
.pc-marco-viva .pn-marco { animation: pcVivaMarco 4.6s ease-in-out infinite; }
@keyframes pcVivaMarco {
  0%, 100% { transform: scale(1) rotate(0deg);      filter: drop-shadow(0 0 .6em rgba(255, 210, 90, .5)); }
  25%      { transform: scale(1.018) rotate(.5deg); }
  50%      { transform: scale(1.03) rotate(0deg);   filter: drop-shadow(0 0 2.2em rgba(255, 210, 90, .95)) brightness(1.15); }
  75%      { transform: scale(1.018) rotate(-.5deg); }
}

/* Bosque de Cristal · turquesa y oro, respiracion larga */
.pc-marco-bosque .pn-marco { animation: pcBosqueLate 4.4s ease-in-out infinite; }
@keyframes pcBosqueLate {
  0%, 100% { filter: drop-shadow(0 0 .5em rgba(107, 224, 255, .4)); }
  50%      { filter: drop-shadow(0 0 1.9em rgba(107, 224, 255, .9))
                     drop-shadow(0 0 3em rgba(255, 210, 120, .5)) brightness(1.1); }
}

.pc-marco-holo .pn-marco { animation: pcMarcoHolo 5s linear infinite; }
@keyframes pcMarcoHolo {
  0%   { filter: hue-rotate(0deg)   saturate(1.1) brightness(1); }
  50%  { filter: hue-rotate(180deg) saturate(1.4) brightness(1.12); }
  100% { filter: hue-rotate(360deg) saturate(1.1) brightness(1); }
}

/* ⚠️ CON MARCO, LA CARTA NO SE ACOMODA POR DENTRO: SE ACHICA ENTERA.
   La versión anterior solo agregaba relleno, y entonces "SIN EQUIPO" caía en
   dos renglones y "VALOR DE MERCADO" se cortaba: el texto seguía midiendo lo
   mismo dentro de un hueco más chico. Ahora, junto con el relleno, baja el
   font-size en la misma proporción — el ancho útil y la letra se achican los
   dos, así que adentro del marco la carta se ve exactamente igual que sin él,
   nada más que más chica. Por eso cada marco tiene sus tres números y no un
   valor común: el de Rey de la Noche se come el doble de borde que el de
   bronce.

   ⚠️ Y SE LE FIJA LA PROPORCIÓN. El alto lo decidía el contenido, así que con
   el relleno crecía y la carta dejaba de medir 0,623 — el marco, que se estira
   a la medida, salía deformado. Con `aspect-ratio` la carta mide siempre lo que
   mide el dibujo, y lo que sobra se reparte entre las filas en vez de
   acumularse abajo. */
/* ⚠️ CON MARCO, LA CARTA NO RECORTA. El dibujo asoma por fuera de la caja, y
   `overflow: hidden` lo cortaria en seco justo en el borde de la carta — que es
   exactamente lo que hay que evitar. Lo unico que ese recorte tapaba era el
   chevron decorativo del fondo, asi que se apaga aca.

   La sombra vuelve a ser `filter` y no `box-shadow`: la caja de la carta ya no
   es el borde que se ve, asi que una sombra pegada a la caja se dibujaria por
   DENTRO del marco. */
/* ⚠️ LA CARTA SE RECORTA CON LA SILUETA DEL MARCO. Este es el fondo del asunto
   y lo que se veia en las esquinas de arriba: la carta es un RECTANGULO y el
   marco no. Donde el dibujo se curva —las dos esquinas de arriba, al costado de
   la corona, la base— el rectangulo de la carta asomaba por fuera del marco, y
   ahi el marco deja de ser el borde de la carta y pasa a ser un adorno apoyado
   sobre un rectangulo mas grande que el.

   Redondear la esquina no alcanza: un radio es un arco parejo y estas siluetas
   no lo son. Y pasarse de radio deja la esquina VACIA, que fue el intento de
   antes. La unica forma de que el contorno de la carta SEA el marco es
   recortarla con la forma del marco.

   La mascara es la silueta del dibujo con los huecos rellenos, generada de cada
   .webp (el canal alfa, inundado desde afuera). Va al 110%, que es exactamente
   la caja del marco, asi carta y dibujo coinciden.

   ⚠️ Y LA SILUETA VA ENGORDADA Y CON EL FILO BLANDO. Al ras, la mascara se come
   el resplandor de los marcos animados —es un drop-shadow, o sea que cae por
   FUERA del dibujo, y la mascara lo corta en seco—. Engordada un 2% y con el
   borde difuminado, la esquina cuadrada desaparece igual y el brillo sigue
   saliendo. */
.pcard-new[class*="pc-marco-"] {
  /* 116% = la caja de la carta mas el 8% de aire de cada lado, o sea
     exactamente la medida del archivo del marco. Antes decía 110%, que no era
     la medida de nada: la máscara cortaba 3% adentro del dibujo de un lado y
     dejaba asomar el rectángulo de la carta del otro. */
  -webkit-mask: var(--sil) center / 116% 116% no-repeat;
          mask: var(--sil) center / 116% 116% no-repeat;
  aspect-ratio: 990 / 1589;
  display: flex; flex-direction: column;
  overflow: visible;
  box-shadow: none;
  filter: drop-shadow(0 1.2em 1.6em rgba(0, 0, 0, .6));
  /* ⚠️ LA ESQUINA SE REDONDEA LO JUSTO, Y "LO JUSTO" ES POCO. El radio estaba
     medido contra el HUECO del marco —por donde asoma la carta— y no contra su
     SILUETA, que es lo que tapa. Son cosas distintas y la diferencia era de
     cinco veces: 9,66em en el Fantasy cuando el dibujo ya tapa entero a los
     2,04em. Con ese radio la carta se recortaba en un arco enorme y por el
     hueco no se veia la carta: se veia la PAGINA, negra, en las cuatro
     esquinas. Eso es lo que hacia que el marco pareciera chico y despegado,
     sobre todo con un wallpaper detras, donde el dibujo se cortaba de golpe.

     Los numeros de abajo salen de recorrer la diagonal de cada dibujo desde la
     esquina hacia adentro y anotar desde donde el alpha ya tapa de verdad, mas
     un respiro. Medidos, no mirados. */
  border-radius: var(--esq, 2em);
}
/* y el fondo acompana a la esquina, si no queda cuadrado abajo del marco */
.pcard-new[class*="pc-marco-"]::after { border-radius: inherit; }

.pc-marco-bronce  { --sil: url("/assets/sobres/marcos/silueta/bronce.webp?m=2"); }
.pc-marco-plata   { --sil: url("/assets/sobres/marcos/silueta/plata.webp?m=2"); }
.pc-marco-oro     { --sil: url("/assets/sobres/marcos/silueta/oro.webp?m=2"); }
.pc-marco-hielo   { --sil: url("/assets/sobres/marcos/silueta/hielo.webp?m=2"); }
.pc-marco-holo    { --sil: url("/assets/sobres/marcos/silueta/holo.webp?m=2"); }
.pc-marco-void    { --sil: url("/assets/sobres/marcos/silueta/void.webp?m=2"); }
.pc-marco-fuego   { --sil: url("/assets/sobres/marcos/silueta/fuego.webp?m=2"); }
.pc-marco-veneno  { --sil: url("/assets/sobres/marcos/silueta/veneno.webp?m=2"); }
.pc-marco-bosque  { --sil: url("/assets/sobres/marcos/silueta/bosque.webp?m=2"); }
.pc-marco-dioses  { --sil: url("/assets/sobres/marcos/silueta/dioses.webp?m=2"); }
.pc-marco-fantasy { --sil: url("/assets/sobres/marcos/silueta/fantasy.webp?m=2"); }
.pc-marco-rey     { --sil: url("/assets/sobres/marcos/silueta/rey.webp?m=2"); }
.pc-marco-viva    { --sil: url("/assets/sobres/marcos/silueta/viva.webp?m=2"); }
/* ⚠️ NO SE PUEDE ESTIRAR EL FONDO HASTA EL MARCO, Y SE PROBO. La idea era que
   el anillo que el marco asoma por fuera de la carta tuviera carta atras y no
   la pagina, para que el marco dejara de verse apoyado encima. El problema es
   que el fondo de la carta es un RECTANGULO y la silueta del marco no: estos
   dibujos son de reja calada, con huecos grandes entre los adornos de las
   esquinas y alrededor de la corona. Estirar el rectangulo hasta el borde del
   dibujo no rellena los huecos del marco: dibuja un rectangulo gris ASOMANDO
   por todos lados, que es muchisimo peor que el negro de antes.

   Para que funcionara habria que recortar ese fondo con la silueta del marco,
   y ahi no rellena nada: solo pinta donde el dibujo ya tapa. O sea que no hay
   nada que ganar por este lado. El chevron decorativo se sigue apagando, que
   es para lo unico que estaba este ::before. */
.pcard-new[class*="pc-marco-"]::before { display: none; }
.pcard-new[class*="pc-marco-"] .pn-skin  { margin-top: auto; }
.pcard-new[class*="pc-marco-"] .pn-stats { margin-top: auto; }
.pcard-new[class*="pc-marco-"] .pn-foot  { margin-top: auto; }

/* ⚠️ ESTAS TRECE LINEAS SALEN DE MEDIR, NO DE MIRAR, y las escribe
   `db/marcos_normalizar.py`. No se tocan a mano: se corre el script y se
   pegan. Cada dibujo tiene su propio grosor —el hueco del de bronce empieza al
   5,9% de cada lado y el del Rey de la Noche al 18,9%— asi que darles a los
   trece el mismo relleno no puede salir bien: en los finos el contenido se sale
   por los costados y en los gruesos el dibujo se come la media, el nombre y el
   pie. Es exactamente lo que pasaba.

   El script recorre cada marco DESDE EL CENTRO HACIA AFUERA y anota donde
   empieza el dibujo. Desde el borde no sirve: varios son de reja calada —el de
   veneno, el de bosque— y se pararia en el primer hueco del propio marco.

   ⚠️ Y MIDE DONDE VIVE EL CONTENIDO, NO EN EL PEOR PUNTO. Arriba, lo que hay es
   la media a la izquierda y la bandera a la derecha: el centro esta VACIO, asi
   que la corona del Rey de la Noche puede meterse todo lo que quiera y no tiene
   por que empujar la media para abajo. Por eso el relleno de arriba se mide en
   dos franjas laterales y se saltea el centro. Abajo el pie ocupa casi todo el
   ancho, asi que ahi si se mide entero.

   ⚠️ EL RELLENO VA EN PORCENTAJE, NO EN em, Y NO ES LO MISMO. En em depende de
   la letra, y la letra depende del hueco, que es lo que estamos tratando de
   respetar: la cuenta se muerde la cola y por eso los numeros viejos no cerraban
   nunca. En porcentaje el relleno es una fraccion de la carta y se acabo.

   OJO CON UNA TRAMPA DE CSS: el padding en porcentaje se mide SIEMPRE contra el
   ANCHO, tambien el de arriba y el de abajo. Los verticales de abajo ya vienen
   convertidos por el script (fraccion del alto x 1589/990); si se escriben a
   mano hay que hacer esa cuenta.

   ⚠️ Y LA LETRA SE ACHICA SOLA. Toda la carta esta escrita en em, asi que lo
   que el contenido OCUPA es proporcional a la letra: si el hueco del marco deja
   el 62% del ancho y la carta normal usa el 88,8%, la letra tiene que valer
   62/88,8 de lo normal para entrar igual de comoda. Lo mismo a lo alto, y manda
   el mas exigente de los dos. Sin esto, en los gruesos los seis atributos se
   desbordan y el pie se mete abajo del dibujo. */
/* >>> medidas de los marcos · las escribe db/marcos_normalizar.py <<< */
.pc-marco-bosque   { --esq: 0.84em; font-size: calc(var(--w) / 31.6); padding: 17.76% 10.11% 16.36% 9.79%; }
.pc-marco-bronce   { --esq: 0.59em; font-size: calc(var(--w) / 28.0); padding: 9.01% 6.04% 8.86% 5.89%; }
.pc-marco-dioses   { --esq: 0.92em; font-size: calc(var(--w) / 31.4); padding: 16.04% 10.57% 17.29% 10.42%; }
.pc-marco-fantasy  { --esq: 2.51em; font-size: calc(var(--w) / 36.0); padding: 21.36% 16.83% 26.67% 16.98%; }
.pc-marco-fuego    { --esq: 0.75em; font-size: calc(var(--w) / 32.6); padding: 17.76% 9.48% 20.42% 9.32%; }
.pc-marco-hielo    { --esq: 0.59em; font-size: calc(var(--w) / 31.2); padding: 14.64% 10.73% 17.92% 10.42%; }
.pc-marco-holo     { --esq: 0.50em; font-size: calc(var(--w) / 28.6); padding: 8.23% 8.54% 8.39% 8.39%; }
.pc-marco-oro      { --esq: 1.09em; font-size: calc(var(--w) / 29.0); padding: 11.20% 6.83% 11.67% 7.14%; }
.pc-marco-plata    { --esq: 0.59em; font-size: calc(var(--w) / 28.5); padding: 10.73% 6.04% 9.64% 5.26%; }
.pc-marco-rey      { --esq: 1.59em; font-size: calc(var(--w) / 42.0); padding: 31.98% 18.86% 33.39% 18.86%; }
.pc-marco-veneno   { --esq: 1.26em; font-size: calc(var(--w) / 29.7); padding: 13.08% 9.79% 12.45% 10.11%; }
.pc-marco-viva     { --esq: 1.42em; font-size: calc(var(--w) / 38.5); padding: 17.76% 19.01% 33.07% 19.17%; }
.pc-marco-void     { --esq: 0.84em; font-size: calc(var(--w) / 29.2); padding: 10.89% 9.95% 12.76% 8.39%; }
/* >>> fin medidas de los marcos <<< */

/* ---- partículas ----
   ⚠️ CAEN, NO ORBITAN. Catorce dibujos girando en circulo alrededor del nombre
   se leian como una calcomania puesta encima de la carta: el movimiento no
   tenia nada que ver con lo que hay abajo. Cayendo de arriba a abajo, en
   columnas distintas y a velocidades distintas, pasan POR la carta — como la
   nieve que cae delante de un cartel, no como algo pegado.

   ⚠️ Y VAN DETRAS DEL NOMBRE Y DE LOS NUMEROS. Por eso en el HTML se dibujan
   antes que el marco y antes que el contenido: con el mismo nivel, manda el que
   viene despues. Una particula tapando la media es exactamente "algo que se le
   pego arriba".

   El numero de cada una (--i) decide la columna, el tamaño, la demora y cuanto
   tarda en caer, asi que no hay dos cayendo juntas. */
.pn-part {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  overflow: hidden; border-radius: inherit; opacity: .9;
}
.pn-part i {
  position: absolute;
  /* ⚠️ LA COLUMNA Y LA DEMORA NO PUEDEN SALIR DE --i DERECHO. Salian: la
     particula 3 caia en la columna 3 y con la demora 3, asi que las catorce
     formaban una diagonal perfecta bajando en fila — se veia como una espiral
     saliendo del centro, no como algo cayendo. Ahora el HTML les manda --x y
     --d de una lista desordenada a mano, que es lo mas parecido al azar que
     puede tener una hoja de estilos. */
  left: calc(var(--x) * 1%);
  /* en reposo quedan repartidas a lo largo de la carta; la caida las mueve */
  top: calc(-4% + var(--d) * 15%);
  width: 2.3em; height: 2.3em; margin-left: -1.15em;
  background-repeat: no-repeat; background-size: 200% 200%;
  filter: drop-shadow(0 0 .3em rgba(0, 0, 0, .5));
  animation: pcCae 7s linear infinite;
  animation-delay: calc(var(--d) * -1s);
  animation-duration: calc(5.4s + var(--x) * .026s);
}
/* las cuatro celdas de la lámina, repartidas según el número de la partícula */
.pn-part i:nth-child(4n+1) { background-position:   0%   0%; }
.pn-part i:nth-child(4n+2) { background-position: 100%   0%; }
.pn-part i:nth-child(4n+3) { background-position:   0% 100%; }
.pn-part i:nth-child(4n+4) { background-position: 100% 100%; }
@keyframes pcCae {
  0%   { top: -14%; opacity: 0; transform: translateX(0)     rotate(0deg)   scale(.8); }
  12%  { opacity: 1; }
  50%  { transform: translateX(.9em)  rotate(150deg) scale(1.08); }
  88%  { opacity: 1; }
  100% { top: 106%; opacity: 0; transform: translateX(-.5em) rotate(300deg) scale(.8); }
}
/* ⚠️ Y CON LAS ANIMACIONES APAGADAS HAY QUE APAGAR LA CAIDA, no solo dejar
   puesto el reposo. Una animacion infinita con la duracion en casi cero sigue
   mandando: el navegador aplica su ultimo cuadro —abajo de todo y con opacidad
   0— y le gana a la regla de arriba. Con `animation: none` vuelve a valer el
   lugar que les da el CSS y quedan repartidas por la carta, quietas, que es
   exactamente lo que pide alguien que apago las animaciones. */
@media (prefers-reduced-motion: reduce) {
  .pn-part i { animation: none; opacity: 1; }
}
.pc-part-chispas .pn-part i { background-image: url("/assets/sobres/part/chispas.webp"); }
.pc-part-hojas   .pn-part i { background-image: url("/assets/sobres/part/hojas.webp"); }
.pc-part-nieve   .pn-part i { background-image: url("/assets/sobres/part/nieve.webp"); }
.pc-part-aura    .pn-part i { background-image: url("/assets/sobres/part/aura.webp"); width: 3em; height: 3em; margin-left: -1.5em; }
/* ⚠️ LA LAMINA FANTASY TIENE CUATRO DIBUJOS Y SON DOS PREMIOS. Uno se queda
   con la estrella y el mandala, el otro con la galaxia y la llama: repartirlos
   da dos sets que de lejos no se confunden, en vez de dos veces lo mismo con
   otro nombre. */
.pc-part-fantasy .pn-part i, .pc-part-nebulosa .pn-part i {
  background-image: url("/assets/sobres/part/fantasy.webp");
  width: 2.8em; height: 2.8em; margin-left: -1.4em;
}
.pc-part-fantasy .pn-part i:nth-child(2n+1) { background-position:   0%   0%; }
.pc-part-fantasy .pn-part i:nth-child(2n)   { background-position:   0% 100%; }
.pc-part-nebulosa .pn-part i:nth-child(2n+1) { background-position: 100%   0%; }
.pc-part-nebulosa .pn-part i:nth-child(2n)   { background-position: 100% 100%; }

/* ---- el grabado de tapa, adentro del lector ---- */
/* ⚠️ VA A SANGRE Y CON FILETE, como un grabado impreso. Un borde redondeado y
   una sombra lo harían ver como una foto pegada sobre el papel; una línea fina
   arriba y abajo es como se separa un grabado del texto en un diario. */
.pd-tapa {
  margin: 18px 0 20px; border-top: 2px solid rgba(23, 19, 9, .55);
  border-bottom: 2px solid rgba(23, 19, 9, .55); padding: 10px 0;
}
.pd-tapa img {
  display: block; width: 100%; height: auto;
  /* Mezclada con el papel: el blanco del grabado desaparece contra el fondo y
     queda solo la tinta, que es lo que pasa cuando algo se imprime de verdad. */
  mix-blend-mode: multiply;
}
/* En el Diario Negro se invierte, igual que las viñetas: el mismo grabado, en
   blanco sobre negro. Una foto invertida sería un negativo; esto es tinta. */
.pd-negro .pd-tapa { border-color: rgba(200, 160, 90, .35); }
.pd-negro .pd-tapa img { filter: invert(1); mix-blend-mode: screen; }

/* ================== EL SOBRE DIARIO ======================================
   ⚠️ UNA FRANJA, NO UNA PAGINA. La primera version media QUINIENTOS TREINTA Y
   CUATRO pixeles de alto: titulo, subtitulo, numero gigante, siete casilleros
   enormes, boton, herramientas y el inventario, todo apilado. Eso no es una
   recompensa diaria, es una seccion. Una recompensa diaria se mira dos
   segundos, se aprieta y se sigue.

   ⚠️ Y LO DE ADMIN VIVE AFUERA. Adentro ensuciaba justo lo que hay que poder
   mirar -como lo va a ver un jugador- y ademas se parecia demasiado al boton
   de abrir, que es el que gasta el dia. */
.sb-diario { position: relative; margin: 14px 16px; }

/* ⚠️ LA RACHA SUBE DE NIVEL Y LA CAJA SE TINE ENTERA. Una racha de tres dias y
   una de treinta se dibujaban exactamente igual, o sea que llegar no se notaba.
   Cada tramo cambia --ac (el color) y --ac2 (el oscuro), y de ahi salen el
   numero, el borde, el resplandor, las pelotas hechas y el boton. Es la unica
   forma de que una racha larga se SIENTA distinta de una corta sin escribirlo.

   El color no es cualquiera: es el del sobre al que estas llegando. Verde
   mientras son diarios, plata a partir del primero de Plata, oro a partir del
   de Oro, y violeta cuando ya diste dos vueltas enteras. */
.sd-caja { --ac: #37c24a; --ac2: #1d7a2c; --ac-txt: #06200c; }
.sd-caja.sd-n-plata   { --ac: #d7e2dc; --ac2: #7e8c85; --ac-txt: #141a17; }
.sd-caja.sd-n-oro     { --ac: #f7c948; --ac2: #a07a10; --ac-txt: #1d1503; }
.sd-caja.sd-n-leyenda { --ac: #b06bff; --ac2: #6c2fb8; --ac-txt: #17082b; }

.sd-caja {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center;
  padding: 18px 22px; border-radius: 16px;
  border: 1px solid color-mix(in srgb, var(--ac) 32%, transparent);
  background: #0a1210;
}
/* ⚠️ EL FONDO ES UNA IMAGEN HECHA PARA ESTA FRANJA, no la foto de la carta.
   wall/cancha.jpg es vertical y con el circulo central en el medio: estirada a
   166px de alto se veia lo que era, una foto de pasto recortada, y las rayas
   del cesped quedaban gigantes atras del texto. Esta se genero apaisada, con la
   tribuna arriba, el cesped abajo y el centro OSCURO, que es donde van el
   numero y el boton. */
.sd-fondo {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("/assets/sobres/wall/franja.webp") center/cover no-repeat;
  opacity: .5;
}
.sd-caja::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(110% 130% at 88% 50%, color-mix(in srgb, var(--ac) 20%, transparent), transparent 58%),
              linear-gradient(90deg, rgba(10,18,16,.9) 0 28%, transparent 62%);
}
.sd-caja > *:not(.sd-fondo):not(.sd-brillo) { position: relative; z-index: 1; }

/* El barrido de luz, SOLO cuando hay algo para abrir. Es la diferencia entre
   una caja que espera y una caja que llama. */
.sd-brillo { display: none; }
.sd-listo .sd-brillo {
  display: block; position: absolute; top: 0; bottom: 0; width: 38%;
  z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.07), transparent);
  animation: sdBarrido 4.2s ease-in-out 1s infinite;
}
@keyframes sdBarrido { 0% { left: -40%; } 60%, 100% { left: 110%; } }

/* ---- la racha ---- */
.sd-racha { position: relative; text-align: center; flex: 0 0 auto; }
.sd-racha b {
  display: flex; align-items: center; gap: 4px; justify-content: center;
  font: 900 40px/1 var(--font); letter-spacing: -.03em; color: var(--ac);
  text-shadow: 0 0 22px color-mix(in srgb, var(--ac) 55%, transparent);
}
.sd-racha b i { font-style: normal; }
.sd-listo .sd-racha b { animation: sdLate 2.4s ease-in-out infinite; }
@keyframes sdLate { 0%,100% { transform: scale(1); } 50% { transform: scale(1.05); } }
.sd-racha span {
  display: block; margin-top: 4px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; color: var(--txt-mute);
}
.sd-racha u {
  display: block; margin-top: 5px; text-decoration: none;
  font-size: 10.5px; font-weight: 700; color: var(--gold); opacity: .85;
}

/* el +1 que sube cuando la racha avanza */
.sd-mas1 {
  position: absolute; left: 50%; top: 0; transform: translateX(-50%);
  font: 900 26px var(--font); color: var(--ac); pointer-events: none;
  text-shadow: 0 0 16px color-mix(in srgb, var(--ac) 85%, transparent);
  animation: sdSube 1.5s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes sdSube {
  0%   { opacity: 0; transform: translate(-50%, 14px) scale(.6); }
  25%  { opacity: 1; transform: translate(-50%, -6px) scale(1.15); }
  60%  { opacity: 1; transform: translate(-50%, -28px) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -52px) scale(.9); }
}

/* ---- la semana: siete pelotas ----
   ⚠️ PELOTAS Y NO CUADRADOS. Un cuadrado con un numero adentro es un
   calendario; una pelota con un numero adentro es futbol, y esta pantalla es de
   una liga de futbol. Va dibujada con degradados y no con una imagen: pesa cero,
   se tiñe de verde cuando el dia esta hecho, y a 34px una foto de pelota se ve
   como una mancha. */
.sd-medio { min-width: 0; }
.sd-semana { display: flex; gap: 7px; margin-bottom: 12px; align-items: center; }
.sd-dia {
  position: relative; flex: 0 0 auto; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 10%,  #121512 0 11%, transparent 12%),
    radial-gradient(circle at 10% 60%,  #121512 0 9%,  transparent 10%),
    radial-gradient(circle at 90% 60%,  #121512 0 9%,  transparent 10%),
    radial-gradient(circle at 50% 104%, #121512 0 10%, transparent 11%),
    radial-gradient(circle at 34% 28%, #6d7a72, #3a443e 72%, #222926);
  box-shadow: inset 0 -2px 5px rgba(0,0,0,.5);
}
.sd-dia em {
  font-style: normal; font: 900 12.5px var(--font); color: #0b0f0d;
  position: relative; z-index: 1; text-shadow: 0 1px 0 rgba(255,255,255,.25);
}
/* hecha: la pelota se pone verde liga */
.sd-dia.hecho {
  background:
    radial-gradient(circle at 50% 10%,  var(--ac-txt) 0 11%, transparent 12%),
    radial-gradient(circle at 10% 60%,  var(--ac-txt) 0 9%,  transparent 10%),
    radial-gradient(circle at 90% 60%,  var(--ac-txt) 0 9%,  transparent 10%),
    radial-gradient(circle at 50% 104%, var(--ac-txt) 0 10%, transparent 11%),
    radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--ac) 70%, #fff), var(--ac) 68%, var(--ac2));
  box-shadow: inset 0 -2px 5px rgba(0,0,0,.4), 0 0 12px color-mix(in srgb, var(--ac) 45%, transparent);
}
.sd-dia.hecho em { color: var(--ac-txt); text-shadow: 0 1px 0 rgba(255,255,255,.3); }
/* hoy: la pelota blanca, encendida */
.sd-dia.hoy {
  background:
    radial-gradient(circle at 50% 10%,  #16181a 0 11%, transparent 12%),
    radial-gradient(circle at 10% 60%,  #16181a 0 9%,  transparent 10%),
    radial-gradient(circle at 90% 60%,  #16181a 0 9%,  transparent 10%),
    radial-gradient(circle at 50% 104%, #16181a 0 10%, transparent 11%),
    radial-gradient(circle at 34% 28%, #ffffff, #e2e8e4 70%, #b3bdb7);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--ac) 55%, transparent),
              0 0 20px color-mix(in srgb, var(--ac) 55%, transparent);
  animation: sdPica 1.9s ease-in-out infinite;
}
.sd-dia.hoy em { color: #0b0f0d; }
@keyframes sdPica {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

/* ⚠️ EL SOBRE CHIQUITO, NO UN EMOJI DE MEDALLA. Reusa el mismo --arte que el
   pack grande, asi que el dia que cambie el dibujo cambia en los dos lados. */
.sd-dia.sd-premio {
  width: 40px; height: 40px; border-radius: 10px;
  background: rgba(0,0,0,.4); box-shadow: none;
  border: 1px solid rgba(255,255,255,.12);
}
.sd-dia.sd-premio.hoy {
  border-color: var(--grass);
  box-shadow: 0 0 0 2px rgba(55,194,74,.3), 0 0 20px rgba(55,194,74,.45);
  animation: none;
}
.sd-mini {
  display: block; width: 28px; height: 28px;
  background: var(--arte) center/contain no-repeat;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
.sd-dia.sd-premio.hoy .sd-mini { animation: sdLate 1.8s ease-in-out infinite; }

/* ---- el pie ---- */
.sd-pie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sd-btn {
  font-size: 14px; font-weight: 900; padding: 10px 18px; border: 0; color: #06140a;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ac) 78%, #fff), var(--ac2));
  box-shadow: 0 .6em 1.4em -.6em color-mix(in srgb, var(--ac) 80%, transparent);
}
.sd-btn:hover:not([disabled]) { filter: brightness(1.08); transform: translateY(-1px); }
.sd-btn[disabled] {
  background: rgba(255,255,255,.06); color: var(--txt-mute); box-shadow: none; cursor: default;
}
.sd-nota { font-size: 12.5px; color: var(--txt-dim); }
.sd-nota b { color: var(--txt); }
.sd-perdida {
  grid-column: 1 / -1; margin-top: 4px; padding: 8px 12px; border-radius: 9px;
  font-size: 12.5px; background: rgba(240,90,90,.12);
  border: 1px solid rgba(240,90,90,.32); color: #f0a05a;
}
.sd-perdida b { color: #ff8a8a; }

/* ---- el sobre ---- */
.sd-pack { position: relative; flex: 0 0 auto; display: grid; place-items: center; }
.sd-pack .sb-pack { width: 86px; height: 128px; animation: sdFlota 4.5s ease-in-out infinite; }
.sd-pack .sb-pack-bits { display: none; }
.sd-halo {
  position: absolute; width: 128px; height: 128px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--ac) 32%, transparent), transparent 68%); filter: blur(5px);
}
@keyframes sdFlota {
  0%, 100% { transform: translateY(0) rotate(-2.5deg); }
  50%      { transform: translateY(-8px) rotate(2.5deg); }
}

/* ---- el confeti ----
   ⚠️ SE DIBUJA Y SE BORRA, no queda nunca. Son treinta trocitos con su propia
   direccion y su propio giro, escritos en el estilo de cada uno: sin eso los
   treinta salen iguales y no es confeti, es una cortina. Al segundo y medio la
   capa entera se saca del documento. */
.sd-confeti { position: absolute; z-index: 3; pointer-events: none; }
.sd-confeti i {
  position: absolute; top: 50%; left: var(--x); width: 7px; height: 11px;
  background: var(--c); border-radius: 1px; opacity: 0;
  animation: sdConfeti var(--t) cubic-bezier(.15,.7,.4,1) var(--d) forwards;
}
@keyframes sdConfeti {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(.6); }
  100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--g)) scale(1); }
}

/* Mientras se esta mirando un dia simulado, la caja lo dice: si no, es muy
   facil creer que la racha de verdad es la que se ve. */
.sd-simulado { outline: 1px dashed rgba(255,255,255,.28); outline-offset: 3px; }
.sd-simulado .sd-racha::after {
  content: "simulado"; position: absolute; left: 50%; bottom: -14px;
  transform: translateX(-50%); font-size: 9px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--txt-mute); white-space: nowrap;
}

/* ---- las herramientas de admin, AFUERA de la caja ---- */
.sd-herramientas {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 12px; padding: 9px 12px; border-radius: 9px;
  border: 1px dashed rgba(255,255,255,.16); background: rgba(0,0,0,.22);
}
.sd-h-tit { font-size: 12px; color: var(--txt-mute); }
.sd-h-bt { display: flex; gap: 7px; flex-wrap: wrap; }
.sd-h-bt .btn { font-size: 12px; padding: 5px 10px; }

@media (max-width: 760px) {
  .sd-caja { grid-template-columns: auto 1fr; }
  .sd-pack { display: none; }
  .sd-semana { flex-wrap: wrap; }
}

/* el inventario */
.sb-inventario { margin-top: 14px; border-top: 1px solid var(--line-soft); padding-top: 12px; }
.sb-inv-cab { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; font-size: 14px; }
.sb-inv-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.sb-inv-item {
  font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 999px;
  border: 1px solid var(--line-soft); color: var(--txt-dim);
}
.sb-inv-item i { font-style: normal; opacity: .7; margin-left: 4px; }
.sb-inv-item.r-comun { border-color: rgba(192,133,82,.5);  color: #c08552; }
.sb-inv-item.r-poco  { border-color: rgba(195,207,200,.5); color: #c3cfc8; }
.sb-inv-item.r-raro  { border-color: rgba(63,169,255,.5);  color: #3fa9ff; }
.sb-inv-item.r-epico { border-color: rgba(176,107,255,.5); color: #b06bff; }
.sb-inv-item.r-leg   { border-color: rgba(255,176,46,.55); color: #ffb02e; }
.sb-inv-vacio { font-size: 13px; color: var(--txt-mute); }

/* ---- el dossier de la fecha, en el taller del diario ---- */
.pd-dossier {
  display: grid; gap: 10px; padding: 14px 16px; border-radius: 12px;
  border: 1px solid rgba(111, 216, 255, .28); background: rgba(111, 216, 255, .06);
}
.pd-dossier-cab b { display: block; font-size: 14.5px; font-weight: 800; color: #6fd8ff; }
.pd-dossier-cab span { display: block; margin-top: 3px; font-size: 13px; color: var(--txt-dim); line-height: 1.5; }
/* ⚠️ MONOESPACIADA Y A PROPÓSITO. El dossier tiene columnas alineadas con
   espacios —la tabla, los goles, las medias— y con una tipografía normal esas
   columnas se desarman y hay que leer renglón por renglón. */
.pd-dossier-txt {
  font: 12.5px/1.6 ui-monospace, "Cascadia Code", Consolas, monospace;
  white-space: pre; overflow-x: auto; resize: vertical;
}

/* ================= EL DIARIO EN LA PORTADA ==============================
   ⚠️ SE VE COMO PAPEL, NO COMO UN PANEL MÁS. Toda la portada es verde y negro;
   si esta franja usara la misma paleta, sería la cuarta caja oscura de la
   pantalla y nadie la miraría. Un papel crudo en medio de todo eso se lee
   como otra cosa —que es lo que es— y encima ya es el idioma del diario
   cuando se abre. */
.hd-caja {
  display: grid; grid-template-columns: 1.55fr 1fr; gap: 26px;
  margin: 26px 0 4px; padding: 24px 28px;
  border-radius: 16px; cursor: pointer;
  background: linear-gradient(145deg, #f4efe2 0%, #e9e2d1 100%);
  border: 1px solid rgba(0, 0, 0, .25);
  box-shadow: 0 1.4em 2.6em -1em rgba(0, 0, 0, .7);
  color: #17140d;
  transition: transform .18s, box-shadow .18s;
}
.hd-caja:hover, .hd-caja:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 1.9em 3.2em -1em rgba(0, 0, 0, .8);
  outline: 0;
}
/* ⚠️ LA TAPA VA A LA IZQUIERDA Y NO ARRIBA. Cruzada de lado a lado quedaba
   preciosa y empujaba el titular ciento cincuenta píxeles para abajo, o sea
   fuera de lo primero que se ve, que es exactamente lo contrario de para qué
   subimos el diario al hero. De costado ocupa alto que la franja YA tenía. */
.hd-caja.hd-con-tapa { grid-template-columns: .85fr 1.5fr 1fr; }
.hd-tapa { margin: 0; align-self: stretch; border-radius: 10px; overflow: hidden;
  border: 1px solid rgba(0, 0, 0, .22); background: #e3dbc8; }
.hd-tapa img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 1080px) {
  /* Antes de que la tapa apriete al titular contra el borde, se va: el número
     y lo que hay adentro valen más que la ilustración. */
  .hd-caja.hd-con-tapa { grid-template-columns: 1.55fr 1fr; }
  .hd-tapa { display: none; }
}
.hd-cabecera {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-bottom: 9px; margin-bottom: 11px;
  border-bottom: 2px solid rgba(0, 0, 0, .35);
  font: 800 12.5px/1 var(--font); letter-spacing: .06em; text-transform: uppercase;
}
.hd-marca { color: #17140d; }
.hd-num   { color: #6b5f45; }
.hd-fecha { color: #8a7c5e; margin-left: auto; text-transform: none; letter-spacing: .02em; }
/* La tipografía del diario: el titular es lo único que tiene que gritar. */
.hd-titular {
  font: 900 clamp(22px, 2.6vw, 33px)/1.12 var(--font);
  letter-spacing: -.015em; margin: 0 0 9px; color: #12100a;
}
.hd-bajada { margin: 0 0 15px; color: #4a4232; font-size: 15px; line-height: 1.55; }
.hd-cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hd-negro { color: #4a4232; font-size: 13px; font-weight: 700; }
.hd-negro b { color: #17140d; }

/* ⚠️ LOS PUNTOS SON LOS TÍTULOS DE LAS NOTAS, no un resumen aparte. Ya están
   escritos y ya dicen lo que pasó: es la lista que hace entrar. */
.hd-puntos { border-left: 2px solid rgba(0, 0, 0, .18); padding-left: 22px; }
.hd-puntos-t {
  display: block; margin-bottom: 9px;
  font: 800 11.5px/1 var(--font); letter-spacing: .08em; text-transform: uppercase; color: #8a7c5e;
}
.hd-puntos ol { margin: 0; padding: 0; list-style: none; counter-reset: hd; }
.hd-puntos li {
  counter-increment: hd; position: relative; padding: 6px 0 6px 26px;
  font-size: 14.5px; font-weight: 700; line-height: 1.35; color: #241f14;
  border-bottom: 1px dashed rgba(0, 0, 0, .13);
}
.hd-puntos li:last-child { border-bottom: 0; }
.hd-puntos li::before {
  content: counter(hd); position: absolute; left: 0; top: 7px;
  width: 17px; height: 17px; border-radius: 50%;
  background: #17140d; color: #f4efe2;
  font: 800 10.5px/17px var(--font); text-align: center;
}
@media (max-width: 860px) {
  .hd-caja { grid-template-columns: 1fr; gap: 18px; padding: 20px; }
  .hd-puntos { border-left: 0; border-top: 2px solid rgba(0,0,0,.18); padding: 14px 0 0; }
  .hd-fecha { margin-left: 0; width: 100%; }
}

/* ---- el cartel de la proxima prueba, en la ficha del jugador ---- */
.pf-reloj {
  display: flex; gap: 13px; align-items: flex-start;
  margin: 16px 0 4px; padding: 13px 16px; border-radius: 12px;
  border: 1px solid var(--line-soft); background: rgba(255, 255, 255, .03);
}
.pf-reloj-ico { font-size: 21px; line-height: 1.1; }
.pf-reloj b { display: block; font-size: 15.5px; font-weight: 800; }
.pf-reloj i { display: block; margin-top: 3px; font-style: normal;
  color: var(--txt-dim); font-size: 13px; line-height: 1.5; }
.pf-reloj.listo  { border-color: rgba(77, 220, 134, .42); background: rgba(77, 220, 134, .08); }
.pf-reloj.listo b { color: var(--grass); }
.pf-reloj.espera { border-color: rgba(247, 201, 72, .35); background: rgba(247, 201, 72, .07); }
.pf-reloj.espera b { color: var(--gold); }

/* ---- los dos tramos del panel de scout ---- */
/* ⚠️ EL TRAMO ES UN TITULO, NO UNA FICHA. Va chato, angosto y pegado a lo que
   encabeza: si tuviera el mismo peso que una tarjeta, dos titulos y catorce
   fichas se leen como dieciseis cosas en vez de dos grupos. */
.sc-tramo {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 16px 4px 7px; border-bottom: 1px solid var(--line-soft); margin-bottom: 4px;
  font-size: 14.5px;
}
.sc-tramo b { font-weight: 800; }
.sc-tramo.t-nueva b { color: #6fd8ff; }
.sc-tramo.t-toca  b { color: var(--grass); }
.sc-tramo.t-espera b { color: var(--txt-mute); }
.sc-tramo-ayuda { color: var(--txt-mute); font-size: 12.5px; font-weight: 600; }
.sc-tramo:first-child { padding-top: 4px; }
#scVerEspera.on { background: rgba(255,255,255,.08); color: var(--txt); }

/* ---- en venta: el chip de la lista y la etiqueta de la carta ---- */
/* ⚠️ NARANJA Y NO VERDE. El verde de la web quiere decir "todo bien / esta
   disponible"; en venta no es un estado bueno ni malo, es una OPORTUNIDAD y
   tiene que saltar sobre los otros chips sin parecer una alarma. */
.estado-chip.e-venta {
  background: rgba(255, 176, 46, .14); border-color: rgba(255, 176, 46, .5);
  color: #ffb02e; font-weight: 800;
}
.pn-venta {
  position: absolute; left: 50%; bottom: .9em; transform: translateX(-50%);
  z-index: 5; pointer-events: none; white-space: nowrap;
  padding: .3em .8em; border-radius: 999px;
  background: rgba(12, 9, 3, .92); border: 1px solid rgba(255, 176, 46, .55);
  color: #ffb02e; font: 800 1.05em/1 var(--font);
  box-shadow: 0 .3em .8em rgba(0, 0, 0, .55);
}
/* el boton del filtro, prendido */
.mk-venta.on {
  background: rgba(255, 176, 46, .16); border-color: rgba(255, 176, 46, .6);
  color: #ffb02e;
}
.mk-venta[disabled] { opacity: .45; cursor: default; }

/* ---- el sticker pegado en la carta ---- */
/* ⚠️ VA COLGADO DE LA MEDIA, ARRIBA A LA IZQUIERDA. Estuvo en el sector
   derecho del recuadro de la foto, y ahi choca de frente con los wallpapers de
   personaje: esos dibujos tienen al jugador parado justo de ese lado, asi que
   el sticker le quedaba encima de la cara. Los dos son premios y ninguno puede
   tapar al otro.

   Arriba a la izquierda no hay nada que pisar en NINGUNA carta: debajo del
   numero de la media empieza el hueco de la foto, y la skin del dueno va
   centrada. Asi el sticker manda en su rincon, el personaje del wallpaper se ve
   entero a la derecha, y la skin sigue en el medio sin correrse.

   ⚠️ Y CUELGA DE .pn-media, NO DE LA CARTA. La referencia tiene que ser algo
   que ya este por dentro del marco: cada marco come un relleno distinto —el de
   Rey de la Noche el doble que el de bronce— asi que una medida contra el borde
   de la carta le quedaria bien a uno y por afuera al otro. La media siempre
   esta adentro, mida lo que mida el dibujo. */
.pn-sticker {
  position: absolute; left: -.1em; top: 100%; margin-top: .5em;
  transform: rotate(-7deg);
  width: 5.6em; height: 5.6em;
  z-index: 4; pointer-events: none;
  filter: drop-shadow(0 .25em .5em rgba(0,0,0,.65));
}
/* El del club es el escudo, que ya lo tenemos dibujado en la página: va como
   contenido adentro, no como un <img> con una ruta. */
.pn-sticker > svg, .pn-sticker > img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* El animado es el mismo escudo, dado vuelta cada tanto: no hay un segundo
   dibujo que mantener y se nota igual que es el premio de arriba. */
.pn-sticker.gira { animation: pcStickerGira 5s ease-in-out infinite; }
@keyframes pcStickerGira {
  0%, 62%, 100% { transform: rotate(-9deg) scale(1); }
  74%           { transform: rotate(-9deg) rotateY(180deg) scale(1.12); }
  88%           { transform: rotate(-9deg) rotateY(360deg) scale(1); }
}
/* ======================= SOBRES (boceto, solo admins) =====================
   La pinta es a propósito la de un sobre de FIFA: el sobre parado, la banda de
   color en diagonal, el precio abajo y la carta que sale girando. Es un idioma
   que la gente ya sabe leer — nadie necesita que le expliquen qué es un sobre
   dorado — y copiarlo es más rápido que enseñar uno nuevo.

   Lo que NO se copia es la paleta: acá el color de marca es el verde de la
   liga y el tridente, no el azul de EA. Un sobre tiene que parecerse a un
   sobre y seguir siendo de Dioses League.
   ========================================================================= */

.sb-panel { --sb-borde: #1e2a24; }

.sb-aviso {
  margin: 14px 16px 0; padding: 12px 14px; border-radius: 10px;
  background: rgba(247, 201, 72, .09); border: 1px solid rgba(247, 201, 72, .3);
  color: var(--gold); font-size: 14px; line-height: 1.5;
}

/* ---- la tienda: los tres sobres uno al lado del otro ---- */
/* La tienda no es una lista: es una vidriera. Tres sobres parados sobre un
   pasto oscuro, con la luz cayendo de arriba — el mismo estadio del teatro,
   apagado. Antes eran tres rectangulos negros y no habia nada que mirar. */
.sb-tienda {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 16px; padding: 26px 16px 22px; margin: 16px 16px 0; border-radius: 18px;
  position: relative; overflow: hidden;
  background:
    radial-gradient(80% 60% at 50% -12%, rgba(190,225,255,.10), transparent 62%),
    radial-gradient(120% 80% at 50% 128%, rgba(28,110,60,.22), transparent 60%),
    linear-gradient(180deg, #070c09, #050807);
  border: 1px solid #16211b;
}
/* los dos haces de luz de la vidriera */
.sb-tienda::before, .sb-tienda::after {
  content: ""; position: absolute; top: -30%; width: 30%; height: 150%;
  background: linear-gradient(180deg, rgba(220,240,255,.13), transparent 70%);
  filter: blur(26px); pointer-events: none;
}
.sb-tienda::before { left: 4%; transform: rotate(14deg); }
.sb-tienda::after  { right: 4%; transform: rotate(-14deg); }
.sb-tienda-item {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 18px 14px 16px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(20,29,24,.72), rgba(8,13,10,.72));
  border: 1px solid var(--sb-borde); backdrop-filter: blur(2px);
  cursor: pointer; transition: transform .18s, border-color .18s, box-shadow .18s;
}
/* Se levanta al pasarle por encima. Sin esto no hay forma de saber que el
   sobre se puede tocar, y el que no lo sabe cree que la pantalla no anda. */
.sb-tienda-item:hover, .sb-tienda-item:focus-visible {
  transform: translateY(-6px); border-color: #35604b; outline: none;
  box-shadow: 0 22px 44px -22px #000, 0 0 40px -18px rgba(77,220,134,.6);
}
/* El sobre se levanta y se inclina un poco, como si lo agarraras de la mesa. */
.sb-tienda-item:hover .sb-pack { transform: translateY(-6px) rotate(-2deg) scale(1.05); }
.sb-pack { transition: transform .22s cubic-bezier(.2,.8,.3,1); }
/* y la sombra en el piso, que es lo que hace que este parado y no pegado */
.sb-tienda-item .sb-pack::after {
  content: ""; position: absolute; left: 12%; right: 12%; bottom: -16px; height: 14px;
  border-radius: 50%; background: #000; filter: blur(9px); opacity: .65;
  transition: transform .22s, opacity .22s;
}
.sb-tienda-item:hover .sb-pack::after { transform: scale(.82); opacity: .45; }
.sb-tienda-txt { text-align: center; }
.sb-lema { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.sb-odds { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sb-odds span {
  font-size: 11.5px; padding: 3px 8px; border-radius: 999px;
  color: var(--c); border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  background: color-mix(in srgb, var(--c) 10%, transparent);
}
.sb-odds b { font-weight: 800; }
.sb-odds-2 { margin-top: 6px; }
.sb-seg { color: var(--muted) !important; border-color: var(--sb-borde) !important;
          background: none !important; }
.sb-abrir { width: 100%; }

/* ---- el sobre ----
   ⚠️ ES UNA FOTO DEL PACKAGING, NO UN RECTANGULO DIBUJADO. Lo anterior era un
   degradado con una banda en diagonal, un brillo que cruzaba y el logo pegado
   arriba: se entendia que era un sobre, pero se veia como una tarjeta. El arte
   trae el foil arrugado, el borde dentado y el escudo estampado, y ninguna de
   esas tres cosas se puede dibujar con degradados.

   La caja mide lo que mide el dibujo (460x684), asi que el sobre llega justo a
   los bordes y los cantos del 3D le quedan pegados al filo. */
.sb-pack {
  position: relative; width: 168px; height: 250px; flex: 0 0 auto;
  background: var(--arte) center/contain no-repeat;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .6));
  display: grid; place-items: center; text-align: center;
}
/* El diario usa el bronce: es el sobre gratis y el bronce es la rareza de
   abajo en toda la web, asi que se lee solo que es el mas modesto. */
.sb-pack-diario  { --arte: url("/assets/sobres/packs/diario.webp"); }
.sb-pack-plata   { --arte: url("/assets/sobres/packs/plata.webp"); }
.sb-pack-oro     { --arte: url("/assets/sobres/packs/oro.webp"); }
.sb-pack-fantasy { --arte: url("/assets/sobres/packs/fantasy.webp"); }

/* ---- el sobre partiendose ----
   ⚠️ NO SON RAYAS DE LUZ ENCIMA DEL SOBRE: ES EL SOBRE CORTADO EN DOS. Dibujar
   grietas por arriba es pegarle un stencil — el sobre sigue entero abajo y no
   se mueve nada. Aca el mismo arte se pinta DOS veces y a cada copia se le
   recorta una mitad con la misma linea dentada, una el negativo de la otra. Son
   dos pedazos de verdad: se separan, se inclinan, y entre medio aparece el
   hueco. Por eso el sobre grande no lleva el dibujo de fondo — se lo llevan las
   mitades, y si lo tuviera se veria el sobre entero abajo cuando se abren.

   La linea es la misma en las tres piezas (mitad izquierda, mitad derecha y la
   luz del medio): si no coinciden al pixel, el corte se nota falso. */
.sb-pack-gr { background-image: none; }
.sb-mitad {
  position: absolute; inset: 0;
  background: var(--arte) center/contain no-repeat;
  will-change: transform;
}
.sb-mitad-a {
  clip-path: polygon(0 0, 46% 0, 52% 9%, 44% 19%, 55% 30%, 47% 41%, 57% 52%,
                     46% 63%, 54% 74%, 45% 85%, 51% 94%, 47% 100%, 0 100%);
}
.sb-mitad-b {
  clip-path: polygon(46% 0, 100% 0, 100% 100%, 47% 100%, 51% 94%, 45% 85%,
                     54% 74%, 46% 63%, 57% 52%, 47% 41%, 55% 30%, 44% 19%, 52% 9%);
}
/* la luz que se escapa por el tajo, siguiendo el mismo dentado */
.sb-fisura {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg,
    color-mix(in srgb, var(--c) 40%, transparent), #fff 45%, #fff 55%,
    color-mix(in srgb, var(--c) 40%, transparent));
  /* ⚠️ EL TAJO SE CIERRA EN LAS PUNTAS. Un rectangulo de luz de arriba a abajo
     se ve como un tubo puesto encima y ademas asoma por fuera del sobre. Asi,
     angosto arriba y abajo y ancho en el medio, se lee como algo que se esta
     abriendo desde el centro. */
  clip-path: polygon(45.4% 1%, 49.8% 9%, 40.6% 19%, 50.6% 30%, 42% 41%, 51.8% 52%,
                     41% 63%, 49.6% 74%, 41.6% 85%, 48.8% 94%, 46.4% 99%,
                     47.6% 99%, 53.2% 94%, 48.4% 85%, 58.4% 74%, 51% 63%,
                     62.2% 52%, 52% 41%, 59.4% 30%, 47.4% 19%, 54.2% 9%, 46.6% 1%);
  filter: blur(1px)
          drop-shadow(0 0 calc(4px + var(--luz, 0) * 18px) var(--c))
          drop-shadow(0 0 calc(8px + var(--luz, 0) * 44px) var(--c))
          brightness(calc(.8 + var(--luz, 0) * 1.6));
}
/* ⚠️ SOLO EN LA CARA, NO EN EL PRISMA. El contenedor del 3D lleva la misma
   clase del sobre para pintarle los cantos, asi que sin el `.sb-pack` de
   adelante el dibujo entero aparecia tambien de fondo, detras de las seis
   caras. */
.sb-pack3d[class*="sb-pack-"] { background-image: none; }

.sb-pack-bits {
  position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);
  font: 800 13px system-ui, sans-serif; color: #0b100d;
  background: var(--c); padding: 4px 12px; border-radius: 999px;
}
/* Los cantos del Fantasy acompanan al arte: violeta y oro, los unicos dos que
   no son metal. */
.sb-pack-fantasy .p3-izq, .sb-pack-fantasy .p3-der {
  background: linear-gradient(180deg, #9b6bff, #3d1f6b 45%, #9b6bff);
}
.sb-pack-fantasy .p3-arriba, .sb-pack-fantasy .p3-abajo {
  background: repeating-linear-gradient(90deg, #9b6bff 0 6px, #ffd9a0 6px 12px);
}

/* ⚠️ CON UN SCOUT EN LA CANCHA, LA CARTA SE CORRE. El premio y el scout caian
   los dos en el medio, asi que la placa le tapaba la cara y el cuerpo: se veia
   media figura asomando por detras de un cartel. Corriendo el bloque de premios
   hacia el lado contrario, los dos se ven enteros. */
.sb-fig-izq .sb-premios { transform: translateX(16%); }
.sb-fig-der .sb-premios { transform: translateX(-16%); }
@media (max-width: 760px) {
  .sb-fig-izq .sb-premios, .sb-fig-der .sb-premios { transform: none; }
}

/* el aviso de "tu nombre de Minecraft está mal, y sabemos cuál era" */
.skin-arreglo {
  margin-top: 10px; padding: 10px 12px; border-radius: 10px;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  background: rgba(255, 176, 46, .1); border: 1px solid rgba(255, 176, 46, .45);
  color: #ffd9a0; font-size: 13px; line-height: 1.4;
}
.skin-arreglo b { color: #fff; }

/* ---- el cartel de mercado cerrado ----
   Va arriba de todo y empuja la página, como el de stream en vivo: es una
   condición de la liga entera, no un detalle de una pantalla. */
.merc-cerrado {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  justify-content: center; text-align: center;
  padding: 9px 16px; font: 14px system-ui; color: #ffd9a0;
  background: linear-gradient(90deg, #2a1608, #43230a 50%, #2a1608);
  border-bottom: 1px solid rgba(255, 176, 46, .45);
}
.merc-cerrado b { color: #ffb02e; letter-spacing: .04em; }
.merc-txt { color: #e6cfae; }
.merc-abre {
  color: #0f0a04; background: #ffb02e; font-weight: 800;
  border-radius: 999px; padding: 3px 12px; text-transform: capitalize;
}
@media (max-width: 620px) { .merc-txt { display: none; } }

/* ---- el editor de carta (solo su duenio) ---- */
/* ⚠️ EL CUERPO LLEVA SU PROPIO MARGEN. Sin esto tenia padding CERO y los dos
   lados quedaban pegados al borde del panel: los selectores arrancaban sobre
   la linea de la izquierda y la carta terminaba justo encima de la de la
   derecha — con la sombra y el brillo del marco cayendo por fuera, que es lo
   que se veia como una carta superpuesta al panel. El aviso de arriba ya venia
   con sus 16px (.sb-aviso), asi que ademas no coincidian entre si. */
.ed-cuerpo {
  display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start;
  padding: 16px 16px 20px;
}
.ed-controles { display: grid; gap: 10px; flex: 1 1 260px; min-width: 240px; }
.ed-campo { display: grid; gap: 4px; }
.ed-campo > span { color: #9fb0a7; font: 600 12px system-ui; letter-spacing: .04em; }
.ed-campo select, .ed-campo input {
  font: 600 14px system-ui; color: #eaf2ec; background: rgba(10, 16, 13, .9);
  border: 1px solid rgba(255, 255, 255, .16); border-radius: 9px; padding: 8px 10px;
  width: 100%;
}
.ed-campo select:focus, .ed-campo input:focus {
  outline: 0; border-color: #4ddc86; box-shadow: 0 0 0 2px rgba(77, 220, 134, .22);
}
.ed-botones { display: flex; gap: 8px; margin-top: 4px; }
.ed-vista { flex: 0 0 auto; display: grid; place-items: start center; }
.ed-vista .pcard-new { --w: 268px; }
@media (max-width: 700px) { .ed-vista { width: 100%; justify-items: center; } }

/* ---- el apodo que escribe el jugador ---- */
.sb-apodo-form {
  position: absolute; top: 7%; left: 50%; transform: translateX(-50%);
  display: grid; gap: 7px; justify-items: center; z-index: 5; opacity: 0;
  background: rgba(10, 16, 13, .88); border: 1px solid rgba(255, 176, 46, .5);
  border-radius: 14px; padding: 12px 16px; min-width: 280px;
  box-shadow: 0 0 2.4em -.6em rgba(255, 176, 46, .8);
}
.sb-apodo-form label { color: #ffd98a; font: 900 12px system-ui; letter-spacing: .16em; text-transform: uppercase; }
.sb-apodo-linea { display: flex; gap: 8px; }
.sb-apodo-in {
  font: 800 15px system-ui; letter-spacing: .08em; text-transform: uppercase;
  color: #eaf2ec; background: rgba(0, 0, 0, .5);
  border: 1px solid rgba(255, 255, 255, .25); border-radius: 9px; padding: 8px 12px;
  width: 190px;
}
.sb-apodo-in:focus { outline: 0; border-color: #ffb02e; box-shadow: 0 0 0 2px rgba(255, 176, 46, .3); }
.sb-apodo-nota { color: #9fb0a7; font: 12px system-ui; }
.sb-apodo-espera { color: #ffd98a; font: 600 13px system-ui; }

/* ---- la ruleta del boost ----
   ⚠️ AL COSTADO Y EN COLUMNA, NO CRUZANDO LA CARTA. Puesta arriba y en fila,
   tapaba la media y el nombre; puesta abajo, la placa del premio. A la derecha
   hay una franja vertical que no usa nadie, y ademas en columna la ruleta se
   parece a lo que es: una lista de la que sale sorteado uno.

   Y va encendida. Con los casilleros apagados esperando, no se entendia que
   estaban por sortearse: parecian deshabilitados. */
.sb-ruleta {
  position: absolute; top: 50%; right: 4%; transform: translateY(-50%);
  display: grid; gap: 10px; justify-items: center; z-index: 4; opacity: 0;
}
.sb-ruleta-t {
  color: #fff; font: 900 13px system-ui; letter-spacing: .18em; text-transform: uppercase;
  background: linear-gradient(160deg, #b06bff, #6c2fb8);
  border: 1px solid #d5b3ff; border-radius: 10px; padding: 7px 16px;
  box-shadow: 0 0 1.8em -.4em #b06bff;
}
.sb-ruleta-fila { display: grid; gap: 6px; justify-items: stretch; min-width: 96px; }
.sb-rl {
  font: 900 14px system-ui; letter-spacing: .1em; text-align: center; color: #eaf2ec;
  background: rgba(18, 26, 22, .92); border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 9px; padding: 8px 12px; transition: none;
}
.sb-rl.gira {
  color: #0b100d; background: #fff; border-color: #fff;
  box-shadow: 0 0 1.6em -.2em #fff; transform: scale(1.06);
}
.sb-rl.toco {
  color: #fff; background: linear-gradient(160deg, #c99bff, #7a33d6);
  border-color: #eadcff; box-shadow: 0 0 2em -.2em #b06bff; transform: scale(1.06);
}

/* ---- la marca del boost en la carta ----
   ⚠️ NO PUEDE PARECERSE A LA FLECHITA DE VARIACION. El verde y el rojo de al
   lado del numero ya significan "subio o bajo la media esta semana". El boost
   es otra cosa —el atributo va a crecer mas rapido en las proximas pruebas— asi
   que es una pastilla violeta con un mas, pegada arriba a la derecha del
   atributo, con una forma y un color que no existen en ningun otro lugar de la
   carta. */
.pn-stats > div { position: relative; }
.pn-boost {
  position: absolute; top: -.35em; right: .1em;
  width: 1.25em; height: 1.25em; border-radius: 50%;
  display: grid; place-items: center;
  font: 900 .85em/1 system-ui; font-style: normal; color: #fff;
  background: linear-gradient(160deg, #c99bff, #7a33d6);
  box-shadow: 0 0 0 .09em rgba(255, 255, 255, .55), 0 .1em .3em rgba(0, 0, 0, .6);
  animation: pcBoostLate 2.2s ease-in-out infinite;
}
@keyframes pcBoostLate {
  0%, 100% { box-shadow: 0 0 0 .09em rgba(255,255,255,.5), 0 .1em .3em rgba(0,0,0,.6); }
  50%      { box-shadow: 0 0 0 .09em rgba(255,255,255,.85), 0 0 .9em rgba(176,107,255,.9); }
}

/* ---- el simulador ---- */
.sb-sim {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
  justify-content: space-between;
  margin: 0 16px; padding: 14px 16px; border-radius: 12px;
  background: #0c1210; border: 1px solid var(--sb-borde);
}
.sb-sim-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.sb-sim-out { margin: 12px 16px 0; padding: 14px 16px; border-radius: 12px;
              background: #0c1210; border: 1px solid var(--sb-borde); }
.sb-sim-out h5 { margin: 0 0 12px; font-size: 15px; }
.sb-barras { display: grid; gap: 8px; margin-bottom: 12px; }
.sb-barra { display: grid; grid-template-columns: 108px 1fr 176px; gap: 10px; align-items: center; }
.sb-barra-n { font-size: 13px; color: var(--c); font-weight: 700; }
.sb-barra-riel { height: 10px; border-radius: 999px; background: #131b17; overflow: hidden; }
.sb-barra-riel i { display: block; height: 100%; background: var(--c); border-radius: 999px; }
.sb-barra-v { font-size: 12.5px; color: var(--text); text-align: right; }
.sb-barra-v em { color: var(--muted); font-style: normal; }

/* ---- el catálogo ---- */
.sb-cat { padding: 6px 16px 18px; display: grid; gap: 22px; }
.sb-grupo-h { display: flex; align-items: center; gap: 10px; margin: 10px 0 12px; }
.sb-grupo-h h4 { margin: 0; font-size: 16px; color: var(--c); }
.sb-punto { width: 12px; height: 12px; border-radius: 4px; background: var(--c);
            box-shadow: 0 0 12px color-mix(in srgb, var(--c) 70%, transparent); }
.sb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px; }

/* ---- la carta de un premio ----
   ⚠️ EL COLOR DEL BORDE ES EL DATO. Antes de leer una palabra ya sabés si te
   fue bien: bronce, plata, oro, morado o el dorado del legendario. Si todas las
   cartas fueran iguales habría que leer la etiqueta para saber qué salió, y
   para entonces el momento ya pasó. */
.sb-carta {
  position: relative; overflow: hidden; padding: 14px 14px 13px; border-radius: 13px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--c) 13%, #0c1210), #0a0f0c 72%);
  border: 1px solid color-mix(in srgb, var(--c) 42%, transparent);
}
.sb-carta-brillo {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 12% -12%,
              color-mix(in srgb, var(--c) 26%, transparent), transparent 62%);
  pointer-events: none;
}
.sb-chip {
  display: inline-block; font: 800 10.5px system-ui, sans-serif; letter-spacing: .07em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 999px;
  color: #0b100d; background: var(--c);
}
.sb-carta-fam { margin-top: 9px; font-size: 11.5px; color: var(--muted);
                text-transform: uppercase; letter-spacing: .06em; }
.sb-carta-n { margin: 3px 0 6px; font-size: 15.5px; color: var(--text); line-height: 1.25; }
.sb-carta-d { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.45; }
.sb-solo-totw { display: inline-block; margin-top: 8px; font-size: 11.5px; color: var(--gold); }

/* el legendario respira: es el único con animación propia */
.sb-r-leg { border-color: var(--c); animation: sbLeg 2.6s ease-in-out infinite; }
@keyframes sbLeg {
  0%, 100% { box-shadow: 0 0 0 rgba(247, 224, 138, 0); }
  50%      { box-shadow: 0 0 22px rgba(247, 224, 138, .28); }
}

/* ===================== EL TEATRO DE APERTURA ==============================
   Un estadio de noche dibujado entero con degradados: ni una imagen, ni un
   video. Un MP4 por apertura serian varios megas cada vez que alguien abre un
   sobre, y en el celular eso es esperar mirando un cuadrado negro. Esto pesa
   cero y arranca en el mismo cuadro.
   ========================================================================= */

.sb-teatro {
  position: fixed; inset: 0; z-index: 9000; overflow: hidden;
  display: grid; place-items: center;
  background: #04070a;
  perspective: 1400px;
}

/* ---- el estadio ---- */
.sb-estadio { position: absolute; inset: 0; overflow: hidden; }
/* ⚠️ UNA FOTO, NO DEGRADADOS. La primera version dibujaba el estadio con
   gradientes: reflectores de linea recta, tribuna de puntitos, piso de
   degradado verde. Se veia hecho a mano, como un juego de los ochenta, y no
   habia forma de arreglarlo con mas CSS — el problema era la herramienta, no
   el codigo. Esta imagen la genero un modelo de imagenes y pesa 120 KB. */
.sb-cielo {
  position: absolute; inset: 0;
  background: #04070a url("/assets/sobres/estadio.jpg") center/cover no-repeat;
  transform: scale(1.12); filter: brightness(.62) saturate(.9);
  transition: transform 4s ease-out, filter 1s;
}
/* la camara se acerca despacito durante toda la apertura */
.sb-entra .sb-cielo { transform: scale(1.26); transition-duration: 9s; }
/* y en el ultimo tramo se acerca de golpe: el zoom que se acelera es lo que
   avisa que algo esta por pasar */
.sb-tiembla .sb-cielo { transform: scale(1.45); transition: transform var(--dur, 2s) cubic-bezier(.6,0,.9,.4); }
.sb-explota .sb-cielo { filter: brightness(1.5) saturate(1.1); transition: filter .18s; }
.sb-muestra .sb-cielo { filter: brightness(.5) saturate(.85); transition: filter .7s; }
/* la tribuna: miles de puntitos fuera de foco */


/* los conos de los reflectores */
.sb-haz {
  position: absolute; top: -18%; width: 26vmin; height: 105%;
  background: linear-gradient(180deg, rgba(226,240,255,.16), rgba(226,240,255,.03) 55%, transparent 78%);
  filter: blur(14px); transform-origin: 50% 0;
  opacity: 0; transition: opacity .8s;
}
.sb-haz-0 { left: 6%;  transform: rotate(19deg); }
.sb-haz-1 { left: 26%; transform: rotate(9deg); }
.sb-haz-2 { right: 26%; transform: rotate(-9deg); }
.sb-haz-3 { right: 6%; transform: rotate(-19deg); }
.sb-entra .sb-haz { opacity: 1; }
.sb-tiembla .sb-haz { animation: sbHaz 1.9s ease-in-out infinite alternate; }
@keyframes sbHaz { to { opacity: .55; filter: blur(22px); } }

/* las dos torres de luz, arriba a los costados */


/* el piso que refleja */
.sb-piso {
  position: absolute; left: -10%; right: -10%; bottom: 0; height: 34%;
  background: linear-gradient(180deg, rgba(120,200,255,.05), rgba(60,200,120,.10) 40%, transparent);
  border-top: 1px solid rgba(160,220,255,.10);
  filter: blur(2px);
}

/* ---- la escena ---- */
/* La perspectiva vive en la escena: si la pusiera en el sobre, cada cara
   tendria su propio punto de fuga y el volumen se deformaria al girar. */
.sb-escena { perspective: 1200px; perspective-origin: 50% 45%;
             position: relative; display: grid; place-items: center;
             width: min(92vw, 900px); height: min(78vh, 720px); }

/* el resplandor que crece detras del sobre mientras tiembla */
.sb-halo {
  position: absolute; width: 40vmin; height: 40vmin; border-radius: 50%;
  background: radial-gradient(circle, var(--c), transparent 62%);
  opacity: 0; filter: blur(40px); transform: scale(.4);
  transition: opacity 1.6s, transform 1.6s;
}
.sb-tiembla .sb-halo {
  opacity: .6; transform: scale(1.15);
  animation: sbLate 1.1s ease-in-out infinite alternate;
}
@keyframes sbLate { to { opacity: .95; transform: scale(1.5); } }
.sb-explota .sb-halo { opacity: 0; transition: opacity .35s; }

/* ---- el sobre ---- */
/* ⚠️ TRES CAPAS ANIDADAS, Y ES LA CLAVE DE TODO. Un elemento solo puede tener
   UN `transform` a la vez: la animacion del temblor pisaba a la de la entrada,
   asi que entre un momento y el otro el sobre quedaba completamente quieto. Por
   eso se veia como tres imagenes pegadas con cortes y no como un video.
   Anidadas, cada capa aporta lo suyo y el sobre no se detiene nunca. */
.sb-pack-vivo, .sb-pack-orbita { transform-style: preserve-3d; }
.sb-pack-vivo {
  position: relative;
  transform: translateY(70vh) scale(.45); opacity: 0;
  transition: transform 1.2s cubic-bezier(.14,.8,.24,1), opacity .6s;
}
.sb-entra .sb-pack-vivo { transform: translateY(0) scale(1); opacity: 1; }

/* la capa que NUNCA para: gira y flota de principio a fin */
.sb-pack-orbita { transform-style: preserve-3d; }
@keyframes sbOrbita {
  0%   { transform: translateY(0) rotateZ(-3deg) rotateY(-14deg); }
  25%  { transform: translateY(-10px) rotateZ(0deg) rotateY(0deg); }
  50%  { transform: translateY(-2px) rotateZ(3deg) rotateY(14deg); }
  75%  { transform: translateY(-12px) rotateZ(0deg) rotateY(0deg); }
  100% { transform: translateY(0) rotateZ(-3deg) rotateY(-14deg); }
}
/* mientras tiembla, gira mas rapido: la escena entera se acelera */
.sb-tiembla .sb-pack-orbita { animation-duration: 1.6s; }

/* el temblor, que CRECE. Uno parejo se lee como un error de la pantalla; uno
   que va a mas se lee como algo que esta por reventar, que es el punto. Dura
   lo que dure la espera de esa rareza. */
.sb-tiembla .sb-pack-sacude {
  animation: sbSacude var(--dur, 2s) cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes sbSacude {
  0%   { transform: translate(0,0) rotate(0) scale(1); }
  20%  { transform: translate(-2px,1px) rotate(-.6deg) scale(1.03); }
  35%  { transform: translate(3px,-2px) rotate(.9deg) scale(1.06); }
  50%  { transform: translate(-5px,3px) rotate(-1.5deg) scale(1.09); }
  62%  { transform: translate(6px,-3px) rotate(1.8deg) scale(1.12); }
  74%  { transform: translate(-8px,4px) rotate(-2.4deg) scale(1.16); }
  84%  { transform: translate(9px,-5px) rotate(3deg) scale(1.2); }
  92%  { transform: translate(-11px,6px) rotate(-3.6deg) scale(1.25); }
  100% { transform: translate(13px,-7px) rotate(4.4deg) scale(1.32); }
}
.sb-explota .sb-pack-vivo { animation: sbSeVa2 .32s ease-in forwards; }
@keyframes sbSeVa2 { to { transform: scale(2.1); opacity: 0; filter: blur(12px); } }

.sb-pack-gr { width: 232px; height: 345px; }

/* ⚠️ EL PRISMA NECESITA QUE ESTA CAPA SE ADELANTE EN Z. El sobre tiene la cara
   del frente a 15 px de profundidad; cualquier hijo de la orbita que no se
   adelante queda por DENTRO del prisma, detras de esa cara, y no se ve nunca.
   Va en pixeles a secas y no en un calc: un calc invalido deja el transform en
   `none` sin avisar, y ahi las grietas vuelven a quedar atras del sobre. */
.sb-pack-orbita { position: relative; }
.sb-frente3d {
  position: absolute; inset: 0; pointer-events: none;
  transform: translateZ(18px); transform-style: flat;
}

/* ---- la luz que se escapa por las grietas ----
   Del color de la rareza, y es lo unico de toda la apertura que adelanta el
   premio: cuando el sobre ya esta por reventar, el resplandor que sale de
   adentro dice si vale la pena mirar. */
.sb-fuga {
  position: absolute; top: 50%; left: 50%; width: 130%; height: 95%;
  margin: -47.5% 0 0 -65%; opacity: 0; pointer-events: none;
  mix-blend-mode: screen; border-radius: 50%;
  background: radial-gradient(closest-side, #fff 0%,
              color-mix(in srgb, var(--c) 85%, #fff) 22%,
              color-mix(in srgb, var(--c) 70%, transparent) 52%, transparent 78%);
  filter: blur(6px);
}

/* Las grietas dibujadas encima del sobre se fueron: lo que se parte ahora es el
   sobre mismo, ahi arriba. Lo unico que queda es el resplandor general. */

/* ---- el scout que entra a la cancha ----
   Va DELANTE del estadio y DETRAS de la carta.

   ⚠️ ARRANCA APAGADO Y FUERA DE LUGAR. Su entrada se hace con un `fromTo` que
   no se aplica hasta que le toca, asi que hasta ese momento vale lo que diga el
   CSS: sin `opacity: 0` la imagen se ve desde el primer cuadro —entera, en el
   medio y sin posicionar— y despues "entra" alguien que ya estaba. Esta regla
   se habia perdido en un cambio anterior y por eso volvio a pasar.

   ⚠️ Y SE LIMITA TAMBIEN POR ANCHO. El festejo de Ponopro es una foto apaisada:
   con el alto solo, ocupa la pantalla entera y le tapa el premio. */
.sb-figura {
  position: absolute; bottom: 3%; z-index: 2; pointer-events: none;
  opacity: 0;
  height: min(56vh, 470px); width: auto;
  max-width: 40vw; object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 1.4em 1.6em rgba(0, 0, 0, .7));
}
.sb-figura-izq { left: 1.5%; }
.sb-figura-der { right: 1.5%; }
/* sin GSAP no hay entrada, pero el premio tiene que verse igual */
.sb-listo .sb-figura { opacity: 1; }
@media (max-width: 760px) {
  .sb-figura { height: 34vh; max-width: 52vw; }
  .sb-figura-izq { left: -4%; }
  .sb-figura-der { right: -4%; }
}

/* ---- la explosion ---- */
/* ⚠️ SE PEGAN CON `screen` Y SOBRE NEGRO, sin recortar. Ese modo de mezcla hace
   desaparecer el negro solo, asi que el borde del fuego se funde en la escena
   en vez de tener el contorno duro de un recorte. Recortarlas habria sido mas
   trabajo y peor resultado. */
/* ⚠️ SE TINEN DEL COLOR DE LA RAREZA Y SE DESVANECEN EN EL BORDE.
   Eran dos JPG azulados fijos: un legendario reventaba en azul igual que un
   comun. Con `grayscale` + `sepia` la foto queda en un tono unico y el
   `hue-rotate` la lleva al color que toca — los valores estan mas abajo, uno
   por rareza.

   Y el rectangulo oscuro que se veia en los costados era el borde del JPG: sus
   esquinas no son negras sino gris verdoso (24,33,28), asi que `screen` no las
   hacia desaparecer y quedaba la caja marcada. La mascara redonda las apaga
   antes de llegar al filo, y de paso no importa como venga la imagen. */
.sb-estallido, .sb-humo {
  position: absolute; width: min(150vmin, 1400px); height: min(150vmin, 1400px);
  background: center/contain no-repeat; mix-blend-mode: screen;
  opacity: 0; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 54%, transparent 92%);
          mask-image: radial-gradient(closest-side, #000 54%, transparent 92%);
  filter: grayscale(1) sepia(1)
          hue-rotate(calc(var(--tono, 40deg) - 40deg))
          saturate(var(--sat, 2.2)) brightness(1.05);
}
.sb-niv-comun { --tono: 25deg;  --sat: 1.9; }
.sb-niv-poco  { --tono: 150deg; --sat: .5; }
.sb-niv-raro  { --tono: 205deg; --sat: 2.6; }
.sb-niv-epico { --tono: 272deg; --sat: 2.8; }
.sb-niv-leg   { --tono: 38deg;  --sat: 3.4; }
.sb-estallido { background-image: url("/assets/sobres/estallido.jpg"); }
.sb-humo { background-image: url("/assets/sobres/humo.jpg"); }
.sb-explota .sb-estallido { animation: sbEstallido 1.5s cubic-bezier(.12,.75,.25,1) forwards; }
@keyframes sbEstallido {
  0%   { opacity: 0; transform: scale(.12) rotate(0); }
  12%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5) rotate(14deg); }
}
.sb-explota .sb-humo { animation: sbHumo 2.6s ease-out forwards; }
@keyframes sbHumo {
  0%   { opacity: 0; transform: scale(.3); }
  25%  { opacity: .85; }
  100% { opacity: 0; transform: scale(1.25) rotate(-10deg); }
}
/* En el legendario el estallido es dorado y en el epico violeta: se le gira el
   tono al vuelo en vez de generar tres imagenes distintas. */
.sb-niv-leg .sb-estallido, .sb-niv-leg .sb-humo { filter: hue-rotate(-72deg) saturate(1.5) brightness(1.15); }
.sb-niv-epico .sb-estallido, .sb-niv-epico .sb-humo { filter: hue-rotate(96deg) saturate(1.3); }

.sb-fogonazo {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: #fff; opacity: 0;
}
.sb-explota .sb-fogonazo { animation: sbFogonazo .55s ease-out forwards; }
@keyframes sbFogonazo {
  0%   { opacity: 1; box-shadow: 0 0 0 0 #fff; }
  30%  { opacity: 1; box-shadow: 0 0 90px 60px rgba(255,255,255,.95); }
  100% { opacity: 0; box-shadow: 0 0 260px 190px rgba(255,255,255,0); }
}

.sb-anillo {
  position: absolute; width: 40px; height: 40px; border-radius: 50%;
  border: 5px solid var(--c); opacity: 0;
}
.sb-explota .sb-anillo { animation: sbAnillo .85s cubic-bezier(.15,.75,.3,1) forwards; }
.sb-anillo-2 { border-color: #7fd0ff; }
.sb-explota .sb-anillo-2 { animation-delay: .1s; animation-duration: 1s; }
@keyframes sbAnillo {
  0%   { opacity: 1; transform: scale(.2); border-width: 14px; }
  100% { opacity: 0; transform: scale(16); border-width: 1px; }
}

/* los rayos que salen del centro */
.sb-rayos {
  position: absolute; width: 150vmax; height: 150vmax; opacity: 0;
  background: repeating-conic-gradient(from 0deg,
    rgba(210,240,255,.55) 0deg 1.1deg, transparent 1.1deg 5deg);
  mask-image: radial-gradient(circle, #000 8%, rgba(0,0,0,.6) 30%, transparent 62%);
  -webkit-mask-image: radial-gradient(circle, #000 8%, rgba(0,0,0,.6) 30%, transparent 62%);
}
.sb-explota .sb-rayos { animation: sbRayos 1.1s ease-out forwards; }
.sb-muestra .sb-rayos { animation: sbRayosGira 26s linear infinite; opacity: .18; }
@keyframes sbRayos {
  0%   { opacity: 0; transform: scale(.2) rotate(0); }
  25%  { opacity: .9; }
  100% { opacity: .18; transform: scale(1) rotate(24deg); }
}
@keyframes sbRayosGira { to { transform: rotate(360deg); } }

/* los cubos que salen volando */
.sb-escombros { position: absolute; inset: 0; pointer-events: none; }
.sb-cubo {
  position: absolute; top: 50%; left: 50%; width: var(--t); height: var(--t);
  margin: calc(var(--t) / -2) 0 0 calc(var(--t) / -2);
  background: linear-gradient(150deg, #dfe9e4, #8fa39a);
  border-radius: 2px; opacity: 0;
}
.sb-explota .sb-cubo { animation: sbCubo 1.4s cubic-bezier(.1,.7,.3,1) var(--dem) forwards; }
@keyframes sbCubo {
  0%   { opacity: 1; transform: rotate(var(--a)) translateX(0) rotate(0) scale(1); }
  100% { opacity: 0; transform: rotate(var(--a)) translateX(var(--d)) rotate(var(--g)) scale(.3); }
}


/* ---- la carta del premio ----
   ⚠️ ESTO ES LO QUE SE COMPRA. La primera version era un rectangulo ancho con
   una etiqueta y dos renglones: exactamente la forma de un mensaje de error.
   Ahora es una carta PARADA -el arte arriba, la banda de rareza, el nombre en
   grande-, que es la forma que ya significa "premio" en cualquier juego. */
.sb-item {
  position: relative; width: 288px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(178deg,
    color-mix(in srgb, var(--c) 22%, #0b1210) 0%,
    #080d0b 46%, color-mix(in srgb, var(--c2) 40%, #080d0b) 100%);
  border: 2px solid color-mix(in srgb, var(--c) 62%, transparent);
  box-shadow: 0 26px 70px -22px #000,
              0 0 70px -14px color-mix(in srgb, var(--c) 65%, transparent),
              inset 0 1px 0 color-mix(in srgb, var(--c) 45%, transparent);
}
/* el resplandor detras del arte */
.sb-item-aura {
  position: absolute; left: 50%; top: 96px; width: 260px; height: 260px;
  transform: translate(-50%, -50%); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 55%, transparent), transparent 68%);
  filter: blur(18px);
  animation: sbAura 3.4s ease-in-out infinite alternate;
}
@keyframes sbAura { to { transform: translate(-50%,-50%) scale(1.18); opacity: .7; } }

.sb-item-arte {
  position: relative; height: 190px; display: grid; place-items: center;
  padding: 18px 18px 0;
}
.sb-item-arte img {
  max-width: 100%; max-height: 100%; object-fit: contain;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,.7));
  animation: sbFlota 4.2s ease-in-out infinite alternate;
}
@keyframes sbFlota { to { transform: translateY(-9px) scale(1.04); } }

.sb-item-banda {
  position: relative; margin: 12px 0 0; padding: 7px 0;
  font: 900 12.5px/1 system-ui, sans-serif; letter-spacing: .18em;
  text-transform: uppercase; text-align: center; color: #0b100d;
  background: linear-gradient(90deg, transparent, var(--c) 12%, var(--c) 88%, transparent);
}
.sb-item-cuerpo { padding: 14px 20px 20px; text-align: center; }
.sb-item-fam {
  font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase;
  color: color-mix(in srgb, var(--c) 75%, #9fb0a7);
}
.sb-item-n { margin: 6px 0 8px; font-size: 21px; line-height: 1.2; color: var(--text); }
.sb-item-d { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* el brillo que cruza la carta al aparecer, como el reflejo de una plastificada */
.sb-item-lustre {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(104deg, transparent 38%, rgba(255,255,255,.3) 48%, transparent 58%);
  transform: translateX(-130%);
}
.sb-muestra .sb-item-lustre {
  animation: sbLustre 1.2s ease-out both;
  animation-delay: calc(var(--i) * .34s + .5s);
}

/* el legendario respira y le gira un halo por detras */
.sb-r-leg.sb-item { animation: sbLeg 2.6s ease-in-out infinite; }
.sb-r-leg .sb-item-aura { animation-duration: 1.8s; }

/* el emblema chiquito en el catalogo */
.sb-carta-mini {
  position: absolute; right: -18px; top: -16px; width: 104px; height: 104px;
  object-fit: contain; opacity: .22; pointer-events: none;
  filter: drop-shadow(0 4px 10px #000);
}

/* ---- las cartas del premio ---- */
.sb-premios {
  /* z-index 3: por delante del scout que entra (2). La carta siempre gana. */
  position: absolute; z-index: 3; display: flex; gap: 24px; flex-wrap: wrap;
  align-items: center; justify-content: center; opacity: 0; pointer-events: none;
}
/* la carta del jugador, al lado del premio */
.sb-jugador { animation: sbSube .8s cubic-bezier(.16,.9,.24,1) both; }
.sb-muestra .sb-jugador .pcard-new {
  --w: 250px;
  box-shadow: 0 26px 70px -20px #000, 0 0 80px -14px color-mix(in srgb, var(--c) 55%, transparent);
}
.sb-muestra .sb-premios { opacity: 1; pointer-events: auto; }
.sb-muestra .sb-premios .sb-item {
  animation: sbSube .78s cubic-bezier(.16,.9,.24,1) both;
  animation-delay: calc(var(--i) * .34s);
}
/* ⚠️ SUBE DESDE ABAJO Y GIRA, no aparece de golpe. En la referencia la carta
   emerge del humo: ese recorrido es lo que la hace sentir un premio y no un
   cartel de aviso. */
@keyframes sbSube {
  0%   { transform: translateY(90px) rotateX(46deg) scale(.8); opacity: 0; filter: blur(8px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { transform: translateY(0) rotateX(0) scale(1); opacity: 1; }
}

@keyframes sbLustre { to { transform: translateX(130%); } }



/* ===================== EL SOBRE EN 3D ====================================
   ⚠️ SEIS CARAS, NO UNA IMAGEN GIRADA. Un rectangulo plano al llegar a 90
   grados desaparece, y ahi se nota que no hay volumen. Con las seis puestas en
   el espacio el sobre tiene canto: se le ve el grosor al girar y la luz le pega
   distinto a cada lado.

   ⚠️ Y CADA CARA VA `backface-visibility: hidden`. Sin eso se ve el REVERSO de
   la cara de atras a traves del frente —el logo espejado flotando por dentro—
   y el efecto se cae entero.
   ========================================================================= */
.sb-pack3d {
  --pw: 232px; --ph: 345px; --pd: 30px;
  position: relative; width: var(--pw); height: var(--ph);
  transform-style: preserve-3d;
}
.sb-pack3d .p3 {
  position: absolute; top: 50%; left: 50%; border-radius: 14px;
  backface-visibility: hidden;
  box-shadow: inset 0 0 2em rgba(0,0,0,.35);
}
/* frente y atras: del tamano del sobre */
.p3-frente, .p3-atras {
  width: var(--pw); height: var(--ph);
  margin: calc(var(--ph) / -2) 0 0 calc(var(--pw) / -2);
}
/* ⚠️ LA CARA DEL FRENTE VA SIN LA SOMBRA INTERIOR DEL PRISMA. El dibujo del
   sobre tiene el borde recortado, asi que la sombra —que se pinta sobre el
   rectangulo entero de la cara— quedaba como una losa oscura flotando
   alrededor del sobre. Y el selector tiene que llevar `.sb-pack3d` adelante:
   `.p3-frente` solo pierde contra `.sb-pack3d .p3`, que es la que la pone. */
.sb-pack3d .p3-frente { transform: translateZ(calc(var(--pd) / 2)); box-shadow: none; }
.p3-frente .sb-pack { position: absolute; inset: 0; width: 100%; height: 100%; }
.p3-atras {
  transform: rotateY(180deg) translateZ(calc(var(--pd) / 2));
  background: linear-gradient(200deg, var(--c2), #06090b 60%, var(--c2));
}
/* los cantos: el grosor del foil */
.p3-izq, .p3-der {
  width: var(--pd); height: var(--ph);
  margin: calc(var(--ph) / -2) 0 0 calc(var(--pd) / -2);
  background: linear-gradient(180deg, var(--c), var(--c2) 45%, var(--c));
}
.p3-izq { transform: rotateY(-90deg) translateZ(calc(var(--pw) / 2)); filter: brightness(.7); }
.p3-der { transform: rotateY(90deg)  translateZ(calc(var(--pw) / 2)); filter: brightness(.8); }
.p3-arriba, .p3-abajo {
  width: var(--pw); height: var(--pd);
  margin: calc(var(--pd) / -2) 0 0 calc(var(--pw) / -2);
  /* el borde dentado de un sobre de figuritas de verdad */
  background:
    repeating-linear-gradient(90deg, var(--c) 0 6px, var(--c2) 6px 12px);
}
.p3-arriba { transform: rotateX(90deg)  translateZ(calc(var(--ph) / 2)); filter: brightness(1.05); }
.p3-abajo  { transform: rotateX(-90deg) translateZ(calc(var(--ph) / 2)); filter: brightness(.45); }

/* Sin brillo pintado encima del frente: el arte ya trae los reflejos del foil
   y superponerle una franja blanca recta los ensuciaba. */

@media (max-width: 700px) {
  .sb-pack3d { --pw: 176px; --ph: 244px; --pd: 20px; }
}

/* ---- la etiqueta del premio ----
   Chica y al costado: lo que se mira es la carta, no esto. Antes acá había una
   carta entera describiendo el premio y competía con la de verdad. */
/* Se sube un poco: abajo va el nombre de la rareza y el boton, y con la carta
   centrada las etiquetas se le montaban encima. */
.sb-premios { flex-direction: column; gap: 14px; transform: translateY(-3vh); }
.sb-placas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.sb-eti {
  min-width: 190px; max-width: 300px; padding: 11px 16px; border-radius: 12px;
  text-align: center; backdrop-filter: blur(3px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 16%, rgba(8,13,10,.85)), rgba(8,13,10,.85));
  border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  box-shadow: 0 14px 34px -16px #000, 0 0 34px -12px color-mix(in srgb, var(--c) 60%, transparent);
}
/* ⚠️ EL WALLPAPER SE VE, NO SE CUENTA. Es lo unico del catalogo que no va
   en la carta pero si es una imagen: si no se muestra, "Wallpaper: El Diez" no
   le dice nada a nadie. Va con la proporcion de un celular, que es lo que es. */
.sb-eti-img {
  display: block; width: 74px; aspect-ratio: 9 / 16; object-fit: cover;
  margin: 0 auto 10px; border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent);
  box-shadow: 0 8px 20px -8px #000;
}
/* ⚠️ EL LEGENDARIO NO ES "OTRO COLOR MAS". Es el premio que la gente espera,
   asi que su etiqueta se mueve: el borde late, el nombre lleva un degradado
   dorado que corre y la chapa de la rareza brilla. Un raro, al lado, es una
   etiqueta quieta — y esa diferencia se nota sin leer. */
.sb-eti.sb-r-leg {
  border-color: rgba(255, 176, 46, .75);
  box-shadow: 0 0 0 1px rgba(255, 176, 46, .35), 0 0 2.4em -.6em rgba(255, 176, 46, .8);
  animation: sbEtiLeg 2.6s ease-in-out infinite;
}
@keyframes sbEtiLeg {
  0%, 100% { box-shadow: 0 0 0 1px rgba(255,176,46,.3),  0 0 1.6em -.8em rgba(255,176,46,.6); }
  50%      { box-shadow: 0 0 0 1px rgba(255,176,46,.75), 0 0 3.2em -.4em rgba(255,176,46,1); }
}
.sb-eti.sb-r-leg .sb-eti-n {
  background-image: linear-gradient(92deg, #ffd98a, #fff3cf 30%, #ffb02e 55%, #ffd98a);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: pcPrisma 4s linear infinite;
}
.sb-eti.sb-r-leg .sb-eti-r { color: #17110a; }

.sb-eti-r {
  display: inline-block; font: 900 10px/1 system-ui, sans-serif; letter-spacing: .16em;
  text-transform: uppercase; color: #0b100d; background: var(--c);
  padding: 4px 9px; border-radius: 999px;
}
.sb-eti-n { display: block; margin-top: 8px; font-size: 16px; color: var(--text); line-height: 1.25; }
.sb-eti-d { display: block; margin-top: 5px; font-size: 12.5px; font-style: normal; color: var(--muted); line-height: 1.45; }
.sb-eti-nota { display: block; margin-top: 5px; font-size: 11.5px; font-style: normal;
               color: color-mix(in srgb, var(--c) 80%, #9fb0a7); letter-spacing: .04em; }
.sb-r-leg.sb-eti { animation: sbLeg 2.6s ease-in-out infinite; }

/* la carta del jugador manda en el centro */
/* ⚠️ EL ANCHO SE ATA AL ALTO DE LA PANTALLA. La carta mide 1,6 veces su ancho,
   asi que con 300 px fijos en una ventana baja quedaba cortada arriba y las
   etiquetas se montaban sobre el pie. Atada a vh entra siempre. */
.sb-jugador .pcard-new { --w: clamp(190px, 30vh, 300px); }
.sb-jugador { filter: drop-shadow(0 26px 70px #000); }

@media (max-width: 700px) {
  .sb-jugador .pcard-new { --w: min(260px, 74vw); }
  .sb-eti { min-width: 0; max-width: 86vw; }
}

/* ---- el pie ---- */
.sb-teatro-pie {
  position: absolute; bottom: 2.5vh; display: flex; align-items: center; gap: 20px;
  opacity: 0; transform: translateY(14px); pointer-events: none;
}
.sb-listo .sb-teatro-pie { opacity: 1; transform: none; pointer-events: auto;
                           transition: opacity .5s, transform .5s; }
.sb-teatro-r {
  font: 900 clamp(20px, 3.4vw, 34px)/1 system-ui, sans-serif;
  letter-spacing: .14em; text-transform: uppercase; color: var(--c);
  text-shadow: 0 0 30px color-mix(in srgb, var(--c) 70%, transparent);
}

/* ---- cuanto mas raro, mas escandalo ----
   Un comun no puede sonar igual que un legendario. Si el show es siempre el
   mismo, la rareza deja de significar algo. */
/* ⚠️ LA RAREZA TINE LA ESCENA ENTERA, no solo la carta del final. Si el estadio
   se ve igual para un comun que para un legendario, el color deja de ser un
   dato y pasa a ser decoracion. El haz de los reflectores, el resplandor, los
   rayos y hasta el fogonazo toman el color que salio. */
.sb-teatro .sb-haz {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--c) 28%, rgba(226,240,255,.16)),
    transparent 78%);
}
.sb-teatro .sb-fogonazo { background: color-mix(in srgb, var(--c) 35%, #fff); }
.sb-teatro .sb-rayos {
  background: repeating-conic-gradient(from 0deg,
    color-mix(in srgb, var(--c) 55%, rgba(210,240,255,.55)) 0deg 1.1deg, transparent 1.1deg 5deg);
}
.sb-niv-comun .sb-halo { opacity: .3 !important; }
.sb-niv-epico .sb-rayos, .sb-niv-leg .sb-rayos { filter: saturate(1.4); }
.sb-niv-leg .sb-cubo { background: linear-gradient(150deg, #ffe9a8, #c99a2a); }
.sb-niv-leg .sb-teatro { background: #0a0703; }
.sb-niv-leg .sb-muestra .sb-premios .sb-carta { animation-duration: .95s; }
.sb-niv-leg .sb-anillo-2 { border-color: var(--c); }

@media (max-width: 700px) {
  .sb-pack-gr { width: 176px; height: 244px; }
  .sb-muestra .sb-premios .sb-carta { width: min(300px, 86vw); }
  .sb-premios { gap: 12px; }
  .sb-teatro-pie { bottom: 3vh; gap: 12px; }
}

@media (max-width: 700px) {
  .sb-barra { grid-template-columns: 92px 1fr; }
  .sb-barra-v { grid-column: 2; text-align: left; }
  .sb-sim { flex-direction: column; align-items: flex-start; }
  .sb-muestra .sb-premios .sb-carta { width: min(300px, 86vw); }
}

/* ================== MIS COSMÉTICOS · el armario ==========================
   ⚠️ SE VE EL DIBUJO, NO EL NOMBRE. La primera versión era una pared de
   noventa y un botones de texto —"Marco de fuego", "Marco de hielo", "Marco
   del vacío"— y había que leerlos uno por uno para adivinar cuál era cuál. Un
   adorno se elige mirándolo. Acá cada pieza se dibuja como se va a ver.

   ⚠️ Y VIVE EN UN BOX QUE SE ABRE, NO EN LA PÁGINA. Metido en el perfil
   empujaba todo lo demás dos pantallas para abajo. Un botón, un box grande, y
   al cerrarlo el perfil sigue donde estaba.                                */

/* ---- el botón, adentro de la fila de acciones del perfil ----
   ⚠️ NO TIENE PANEL PROPIO Y ESO ES EL ARREGLO. La primera versión era una
   barra suelta abajo de "Cómo entrar a la liga": dos pantallas de scroll por
   debajo de la carta que va a cambiar, o sea invisible. Ahora es un `.pf-act`
   más, al lado de "Descargar mi carta" y "Cambiar de posición", que es donde
   está todo lo que se hace con la carta propia. Hereda el estilo de esa fila:
   acá solo va el acento de color, para que se note cuál es el nuevo. */
.pf-act.mc-act { border-color: rgba(176, 107, 255, .4); }
.pf-act.mc-act:hover { border-color: rgba(176, 107, 255, .75); }

/* ---- el box ---- */
.mc-modal { padding: 16px; }
.mc-caja {
  position: relative; display: flex; gap: 20px;
  width: min(1080px, 96vw); height: min(92vh, 840px);
  padding: 20px; border-radius: 18px;
  background: linear-gradient(180deg, var(--panel), var(--panel-2));
  border: 1px solid var(--line); box-shadow: var(--shadow);
}
.mc-cerrar {
  position: absolute; top: -10px; right: -10px; width: 36px; height: 36px; z-index: 2;
  border-radius: 50%; border: 1px solid var(--line); background: var(--panel);
  color: var(--txt); font: 900 15px var(--font); cursor: pointer;
}
.mc-cerrar:hover { background: var(--panel-2); color: #fff; }

/* la izquierda: tu carta, quieta.
   ⚠️ ANCHO FIJO, NO `auto`. Con ancho por contenido, el renglon de aviso
   —«Marco de bronce» todavia no te salio. Es comun.— ensanchaba esta columna,
   la de la derecha se achicaba, y la grilla pasaba de cuatro columnas a tres:
   TODAS las cartitas cambiaban de tamano y de lugar cada vez que tocabas algo.
   Se veia como si la pantalla saltara sola. Con un ancho fijo el aviso envuelve
   adentro y a la derecha no le pasa nada. */
.mc-izq { flex: 0 0 292px; width: 292px; display: grid; gap: 12px; align-content: start; }
.mc-carta { display: grid; place-items: start center; }
.mc-carta .pcard-new { --w: 282px; }
.mc-acciones { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mc-msg { font: 600 12px var(--font); color: var(--txt-dim); min-height: 1em; flex: 1 1 100%; }
.mc-msg.bien { color: var(--grass); }
.mc-msg.mal  { color: #ff8a8a; }

/* la derecha: las pestañas y la grilla */
/* ⚠️ min-height: 0 TAMBIÉN, no solo min-width. Un hijo de flex no baja de su
   contenido salvo que se lo pidas, así que en vertical —donde la caja se apila
   y esta columna es la de abajo— la grilla crecía hasta sus 934px y se llevaba
   el box entero para afuera de la pantalla en vez de scrollear por dentro. */
.mc-der { flex: 1 1 auto; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.mc-tabs { display: flex; gap: 7px; flex-wrap: wrap; }
.mc-tab {
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  background: rgba(0,0,0,.28); color: var(--txt-dim); cursor: pointer;
  font: 700 12.5px var(--font); padding: 6px 13px;
}
.mc-tab i { font-style: normal; opacity: .6; margin-left: 3px; font-size: 11px; }
.mc-tab:hover { color: var(--txt); background: rgba(255,255,255,.07); }
.mc-tab.on {
  color: #06140a; background: linear-gradient(180deg, #5ee06f, #2ba13c);
  border-color: transparent; box-shadow: 0 .5em 1.2em -.7em rgba(55,194,74,.9);
}
.mc-tab.on i { opacity: .75; }

/* ⚠️ EL QUE SCROLLEA ES ESTO Y NO EL BOX. Si scrolleara el box entero, la
   carta de la izquierda se iría hacia arriba y habría que volver a subir para
   ver el efecto de cada cosa que te probás — que es lo único que importa acá. */
.mc-grid {
  flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: 10px; align-content: start; padding: 2px 4px 8px 2px;
  scrollbar-width: thin;
  /* ⚠️ max-content Y NO auto, O LAS CARTAS SALEN CORTADAS. La grilla tiene
     altura definida (llena lo que le deja el box) y cada pieza lleva
     `overflow: hidden`, que le pone mínimo CERO: entre las dos cosas las filas
     se repartían el alto disponible —157px para cartas de 223— y todas las
     cartitas aparecían guillotinadas por abajo, sin pie y sin valor de
     mercado, como si estuvieran mal dibujadas. Con max-content cada fila mide
     lo que mide su contenido y lo que sobra se scrollea, que es lo que se
     quería desde el principio. */
  grid-auto-rows: max-content;
}
.mc-grid-carta   { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); }
.mc-grid-nombre  { grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); }
.mc-grid-sticker { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.mc-grid-cons    { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }

/* ---- una pieza ----
   ⚠️ LA RAREZA SE DICE CON COLOR, NO CON UN PUNTEADO. El borde de lo
   bloqueado era `dashed`, y un punteado de un pixel come el color: a esa
   medida el dorado del legendario y el plateado del poco común se ven casi
   iguales, así que el escalón —que es la única jerarquía que tiene el
   catálogo— no se leía de un vistazo.

   Ahora el borde es sólido siempre y además hay un resplandor del color de la
   rareza subiendo desde abajo. Muy tenue: el premio sigue siendo el dibujo, y
   un fondo fuerte pelearía justo contra lo que hay que mirar. La diferencia
   entre lo que tenés y lo que no la marcan la intensidad, el candado y la
   opacidad, no el tipo de línea. */
.mc-it {
  position: relative; display: grid; place-items: center; overflow: hidden;
  padding: 8px; border-radius: 13px; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--c-r, #888) 55%, transparent);
  background:
    radial-gradient(130% 95% at 50% 106%,
      color-mix(in srgb, var(--c-r, #888) 15%, transparent), transparent 68%),
    rgba(0, 0, 0, .34);
  transition: transform .13s, box-shadow .13s, background .13s, border-color .13s;
}
.mc-it:focus-visible { outline: 2px solid var(--grass); outline-offset: 2px; }

/* lo que ya tenés: el mismo color pero encendido, y con halo */
.mc-it.tengo {
  border-color: var(--c-r, rgba(255,255,255,.3));
  background:
    radial-gradient(130% 95% at 50% 106%,
      color-mix(in srgb, var(--c-r, #888) 26%, transparent), transparent 70%),
    rgba(0, 0, 0, .3);
  box-shadow: 0 .5em 1.4em -1em var(--c-r, transparent);
}
.mc-it.tengo:hover { transform: translateY(-2px); box-shadow: 0 .6em 1.5em -.7em var(--c-r); }

/* ⚠️ LO PUESTO SE MARCA CON EL BORDE Y EL FONDO, NUNCA TAPANDO EL DIBUJO. Un
   tilde grande encima del marco esconde justo lo que se está eligiendo.
   Va DESPUÉS de .tengo a propósito: lo puesto siempre es algo que tenés, así
   que si estuviera antes ganaría .tengo por orden y nunca se vería el anillo. */
.mc-it.puesto {
  border-color: var(--c-r);
  background:
    radial-gradient(130% 95% at 50% 106%,
      color-mix(in srgb, var(--c-r) 36%, transparent), transparent 74%),
    rgba(0, 0, 0, .24);
  box-shadow: 0 0 0 2px var(--c-r), 0 .6em 1.4em -.8em var(--c-r);
}
/* ⚠️ LO BLOQUEADO NO VA EN BLANCO Y NEGRO. Se apaga con opacidad y nada más:
   grisearlo borraría justo lo que hay que poder ver —el color del nombre
   prismático, el fuego del marco— y la vidriera dejaría de vender. */
.mc-it.falta { cursor: default; opacity: .72; }
.mc-it.falta:hover { opacity: .88; }
.mc-lock, .mc-rep {
  position: absolute; z-index: 3; top: 5px; border-radius: 999px;
  background: rgba(4,8,6,.82); font: 700 10px var(--font); padding: 2px 6px;
}
.mc-lock { right: 5px; }
.mc-rep  { left: 5px; color: var(--gold); }

/* Las cinco rarezas, las mismas de SOB_RAREZAS.
   ⚠️ SIEMPRE PEGADAS A .mc-it / .mc-cons-it, NUNCA `.r-leg` a secas. Esas
   clases ya las usan el apodo de la carta (.pn-apodo.r-leg) y el inventario
   del dashboard (.sb-inv-item.r-leg): una regla suelta les cambiaría una
   variable a pantallas que no tienen nada que ver con ésta. */
.mc-it.r-comun, .mc-cons-it.r-comun { --c-r: #c08552; }
.mc-it.r-poco,  .mc-cons-it.r-poco  { --c-r: #c3cfc8; }
.mc-it.r-raro,  .mc-cons-it.r-raro  { --c-r: #3fa9ff; }
.mc-it.r-epico, .mc-cons-it.r-epico { --c-r: #b06bff; }
.mc-it.r-leg,   .mc-cons-it.r-leg   { --c-r: #ffb02e; }

/* ---- los tres dibujos ---- */
/* 1 · la silueta de la carta VACIA, para marcos, fondos y particulas.
   ⚠️ VACIA, SIN TU CARTA ADENTRO. Dibujaba una carta de verdad —tu media, tu
   skin, tus seis atributos— abajo de cada marco, y eso hacia dos cosas mal: a
   la izquierda del box ya esta tu carta entera y en grande, asi que a la
   derecha se repetia setenta veces algo que ya estas mirando; y peor, mostraba
   el premio ya puesto en doce marcos que no tenes, o sea que gastaba de
   antemano la sorpresa de abrir el sobre. Lo que se elige es el DIBUJO.

   La caja se queda con la proporcion de la carta (990/1589, la misma que usan
   los marcos) y con su redondeo, pero sin fondo, sin sombra y sin el chevron
   de adorno: lo unico que se ve es la pieza. */
.mc-mini { --w: 128px; pointer-events: none; }
.mc-vacia {
  aspect-ratio: 990 / 1589;
  background: none; box-shadow: none; padding: 0;
}
.mc-vacia::before { display: none; }
/* ⚠️ EL MARCO NECESITA UN PELO DE RELLENO O EL DE BRONCE NO SE VE. Los dibujos
   oscuros —bronce, void, veneno— sobre el hueco negro del box quedaban
   invisibles: el casillero se veia vacio y parecia roto. Esto NO es la carta:
   es un velo del 4,5% que la mascara del marco recorta con la silueta, o sea
   apenas lo justo para que el filo del dibujo tenga contra que recortarse.
   Y como la mascara es la silueta del marco, el relleno dibuja ademas la forma
   exacta de la carta con sus muescas y sus adornos: se entiende que es un
   marco incluso en los que casi no tienen dibujo. */
.mc-vacia.mc-solo-marco { background: rgba(255, 255, 255, .12); }

/* Las particulas son lo unico que necesita algo atras: cayendo sobre el vacio
   no se entiende que es una carta y los copos claros se pierden contra el
   panel. Una lamina oscura con el filo de la carta alcanza. */
.mc-vacia.mc-solo-part {
  background: linear-gradient(160deg, rgba(58,64,69,.55), rgba(25,28,31,.85));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
}

/* 2 · el nombre, para colores, tipografías y apodos.
   ⚠️ REUSA .pcard-new PARA HEREDAR SUS VARIABLES. Los colores están escritos
   como `.pc-col-prisma .pn-name` y varios usan --ink y --acc, que se definen
   en .pcard-new; copiar la paleta acá sería tenerla en dos lados. Esto solo le
   saca la CAJA —fondo, sombra, padding, el chevron de adorno— y deja el texto. */
.mc-nombre {
  --w: 360px;
  width: 100%; padding: 6px 10px; border-radius: 0;
  background: none; box-shadow: none; overflow: visible; pointer-events: none;
}
.mc-nombre::before { display: none; }
.mc-nombre .pn-name { margin: 0; }
.mc-nombre .pn-apodo { margin: 0; font-size: 1.7em; }

/* 3 · el sticker, que es el dibujo y nada más */
.mc-stk { display: grid; place-items: center; height: 86px; pointer-events: none; }
.mc-stk img, .mc-stk svg { width: 76px; height: 76px; object-fit: contain; }
.mc-stk-sin { font-size: 40px; opacity: .35; }
.mc-stk.gira { animation: mcGira 6s linear infinite; }
@keyframes mcGira { to { transform: rotate(360deg); } }

/* ---- los consumibles ----
   ⚠️ SON LA EXCEPCIÓN Y VAN CON TEXTO. Un dado para tu club no tiene dibujo:
   no se pone en la carta, se usa. Inventarle un ícono sería decorar. */
.mc-nota {
  grid-column: 1 / -1; margin: 0 0 4px;
  font: 12.5px var(--font); color: var(--txt-mute); line-height: 1.5;
}
.mc-cons-it {
  border: 1px solid color-mix(in srgb, var(--c-r, #888) 55%, transparent);
  border-radius: 11px; padding: 10px 12px; display: grid; gap: 4px;
  align-content: start;
  background:
    radial-gradient(130% 110% at 50% 108%,
      color-mix(in srgb, var(--c-r, #888) 14%, transparent), transparent 70%),
    rgba(0, 0, 0, .3);
}
.mc-cons-it.tengo {
  border-color: var(--c-r);
  background:
    radial-gradient(130% 110% at 50% 108%,
      color-mix(in srgb, var(--c-r) 24%, transparent), transparent 72%),
    rgba(0, 0, 0, .26);
  box-shadow: 0 .5em 1.4em -1em var(--c-r);
}
.mc-cons-it b { font: 800 13px var(--font); color: var(--c-r); }
.mc-cons-it b i { font-style: normal; color: var(--gold); font-size: 11px; }
.mc-cons-it em { font: 12px var(--font); color: var(--txt-dim); font-style: normal; line-height: 1.45; }
.mc-cons-it.falta { opacity: .6; }

@media (max-width: 860px) {
  /* ⚠️ EN VERTICAL LA CARTA VA ARRIBA Y NO SE VA. Apilada y scrolleando con
     todo lo demás, probarse un marco sería bajar, tocar y volver a subir. */
  .mc-caja { flex-direction: column; gap: 12px; padding: 14px; height: 94vh; }
  /* Acá la columna pasa a ser una fila arriba de todo, así que el ancho fijo
     de 292px sobra y la dejaría angosta: vuelve a ocupar lo que haya. */
  .mc-izq {
    position: sticky; top: 0; z-index: 2; flex: 0 0 auto; width: auto;
    grid-template-columns: auto 1fr;
    align-items: start; gap: 10px; background: var(--panel); padding-bottom: 8px;
  }
  .mc-carta .pcard-new { --w: 138px; }
  .mc-acciones { align-content: start; }
  .mc-msg { flex: 1 1 100%; }
  .mc-grid-nombre { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .mc-modal { padding: 8px; }
  .mc-caja { padding: 12px; }
  .mc-cerrar { top: -6px; right: -6px; width: 32px; height: 32px; }
  /* Dos columnas justas en un teléfono: ni una carta sola y enorme por fila ni
     tres del tamaño de una uña. La cartita se queda en 128 —achicarla más deja
     los marcos finos irreconocibles, que es lo único que hay que poder ver. */
  .mc-grid-carta { grid-template-columns: repeat(2, 1fr); }
}