/* =========================================================================
   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;
  --txt-mute:  #64766c;

  --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); }
.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); }
.btn-twitch svg, .btn-discord 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; }
.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; border-radius: 1.1em; }
/* el servicio devuelve el cuerpo entero: lo recortamos para que quede
   de la cintura para arriba (medio cuerpo). */
.pn-fb img { position: absolute; top: .2em; left: 50%; transform: translateX(-50%);
  width: auto; height: 15.4em; 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; }
.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 ------------- */
/* 50-69 - comun (piedra apagada) */
.pcard-new.n-comun { --acc:#aeb6bc; --acc2:#8b959d; --bg1:#3a4045; --bg2:#191c1f; --sub:#8d99a4; }
/* 70-79 - 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); }
/* 80-84 - 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); }
/* 85-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; }

/* 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; }

/* 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; }
.prow-media .m.t-cien { color: #66e6ff; text-shadow: 0 0 10px rgba(102,230,255,.5); }
.prow-media .m.t-comun { color: #aeb6bc; }
.prow-media .m.t-elite { color: var(--gold); }
.prow-media .m.t-gold { color: var(--gold); }
.prow-media .m.t-silver { color: #eef4f9; }
.prow-media .m.t-bronze { color: #d68a54; }
.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); }
.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%; }
.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; }
.info-box b { font-size: 17px; font-weight: 800; }
.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; }
.rank-val { text-align: right; }
.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 ---------------------------------- */
.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; }

/* ----------------------------- 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; }
}

/* 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; }

/* 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; }
.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; }

/* --------------------------- 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; }
}
@media (max-width: 860px) {
  .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; }
}
@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; }
  .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; } }

/* ---------------------------- 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 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::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 */
html, body { max-width: 100%; overflow-x: hidden; }

@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; }
}