/* ═══════════════════════════════════════════════════════════════
   CARGÁ LA BARRA — Capa de diseño (theme)
   ───────────────────────────────────────────────────────────────
   Se carga DESPUÉS de style.css y de los <style> inline de base.html.
   Contiene:
     1. Tokens de diseño  (reutilizables por pagina-mms)
     2. Navbar con dropdowns
     3. Home (hero + stats)
   Los tokens legacy (--verde, --gris-N, --blanco, --texto) quedan
   remapeados a la escala nueva, así el resto de las páginas heredan
   la mejora sin tocar una sola línea de su CSS.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ──────────────────────────────────────────────── */

:root {
  /* Superficies en capas (antes: 5 grises sin relación entre sí) */
  --gdt-bg:         #07090c;
  --gdt-surface-1:  #0d1014;
  --gdt-surface-2:  #14181e;
  --gdt-surface-3:  #1c222a;
  --gdt-border:     #232b35;
  --gdt-border-hi:  #323d4a;

  /* Acento con escala real */
  --gdt-accent:      #00e05a;
  --gdt-accent-hi:   #46ff8d;
  --gdt-accent-dim:  #00a844;
  --gdt-accent-soft: rgba(0, 224, 90, 0.12);
  --gdt-accent-line: rgba(0, 224, 90, 0.28);

  /* Jerarquía de texto (antes sólo había --blanco y --texto) */
  --gdt-text-hi:  #f2f5f7;
  --gdt-text:     #b8c2cc;
  --gdt-text-mid: #7f8b98;
  --gdt-text-lo:  #565f6a;

  /* Semánticos */
  --gdt-warn:   #ffb300;
  --gdt-danger: #ff5252;

  /* Radios / espaciado / sombras */
  --gdt-r-sm: 8px;
  --gdt-r-md: 12px;
  --gdt-r-lg: 18px;
  --gdt-r-pill: 999px;

  --gdt-shadow-sm: 0 2px 10px rgba(0, 0, 0, .35);
  --gdt-shadow-md: 0 10px 34px rgba(0, 0, 0, .5);
  --gdt-shadow-lg: 0 24px 64px rgba(0, 0, 0, .62);

  --gdt-nav-h: 60px;

  /* ── Remap de los tokens viejos → escala nueva ───────────── */
  --verde:     var(--gdt-accent);
  --verde-osc: var(--gdt-accent-dim);
  --negro:     var(--gdt-bg);
  --gris-1:    var(--gdt-surface-1);
  --gris-2:    var(--gdt-surface-2);
  --gris-3:    var(--gdt-border);
  --gris-4:    var(--gdt-text-mid);
  --blanco:    var(--gdt-text-hi);
  --texto:     var(--gdt-text);
}

body {
  background:
    radial-gradient(900px 520px at 50% -140px, rgba(0, 224, 90, .07), transparent 70%),
    var(--gdt-bg);
  background-attachment: fixed;
  color: var(--gdt-text);
  -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════════════════
   2. NAVBAR
   Markup nuevo: .navbar > .nav-brand + .nav-menu (.nav-item /
   .nav-group > .nav-trigger + .nav-drop) + .nav-right
   ═══════════════════════════════════════════════════════════════ */

.navbar {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  height: var(--gdt-nav-h);
  min-height: var(--gdt-nav-h);
  padding: 0 1.5rem;
  background: rgba(13, 16, 20, .86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid var(--gdt-border);
  position: sticky;
  top: 0;
  z-index: 200;
}

/* ── Marca ── */
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;           /* ← el logo ya no se parte en dos */
  white-space: nowrap;
}
.nav-brand-mark {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--gdt-accent), var(--gdt-accent-dim));
  color: #04140a;
  font-family: var(--font-titulo), sans-serif;
  font-size: 1.15rem;
  line-height: 1;
  padding-top: 3px;
  box-shadow: 0 0 0 1px rgba(0, 224, 90, .3), 0 4px 16px rgba(0, 224, 90, .22);
}
.nav-brand-text {
  font-family: var(--font-titulo), sans-serif;
  font-size: 1.45rem;
  letter-spacing: 1.5px;
  line-height: 1;
  color: var(--gdt-text-hi);
}
.nav-brand-text b { font-weight: inherit; color: var(--gdt-accent); }

/* ── Menú ── */
.nav-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.nav-item,
.nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 34px;
  padding: 0 11px;
  border: 0;
  background: transparent;
  border-radius: var(--gdt-r-sm);
  font-family: var(--font-body), sans-serif;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;       /* ← los ítems ya no se parten */
  color: var(--gdt-text-mid);
  cursor: pointer;
  transition: color .16s, background .16s;
}
.nav-item:hover,
.nav-trigger:hover,
.nav-group.open .nav-trigger {
  color: var(--gdt-text-hi);
  background: var(--gdt-surface-2);
}
.nav-item.active {
  color: var(--gdt-accent);
  background: var(--gdt-accent-soft);
}
.nav-group.has-active .nav-trigger { color: var(--gdt-accent); }

.nav-caret {
  width: 9px;
  height: 9px;
  flex-shrink: 0;
  opacity: .6;
  transition: transform .18s;
}
.nav-group.open .nav-caret { transform: rotate(180deg); }

/* ── Dropdown ── */
.nav-group { position: relative; }

.nav-drop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 236px;
  padding: 6px;
  background: var(--gdt-surface-1);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-md);
  box-shadow: var(--gdt-shadow-lg);
  display: flex;
  flex-direction: column;
  gap: 1px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .16s, transform .16s, visibility .16s;
  z-index: 260;
}
.nav-group.open .nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-drop a,
.nav-drop .nav-drop-locked {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--gdt-r-sm);
  font-size: .84rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--gdt-text);
  transition: background .14s, color .14s;
}
.nav-drop a:hover { background: var(--gdt-surface-3); color: var(--gdt-text-hi); }
.nav-drop a.active { color: var(--gdt-accent); background: var(--gdt-accent-soft); }

.nav-drop-ico {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  opacity: .55;
}
.nav-drop a:hover .nav-drop-ico,
.nav-drop a.active .nav-drop-ico { opacity: 1; }

.nav-drop .nav-drop-locked { color: var(--gdt-text-lo); }
.nav-drop .nav-drop-locked:hover { background: var(--gdt-surface-2); }
.nav-drop-sub {
  margin-left: auto;
  font-size: .64rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--gdt-text-lo);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-pill);
  padding: 1px 7px;
}

/* ── Zona derecha ── */
.nav-right {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
  flex-shrink: 0;
}

.nav-fecha-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 11px;
  border-radius: var(--gdt-r-pill);
  background: var(--gdt-accent-soft);
  border: 1px solid var(--gdt-accent-line);
  color: var(--gdt-accent-hi);
  font-size: .72rem;
  font-weight: 600;
  white-space: nowrap;
}
.nav-fecha-chip .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gdt-accent);
  box-shadow: 0 0 0 0 var(--gdt-accent-line);
  animation: gdtPulse 2s infinite;
}
@keyframes gdtPulse {
  0%   { box-shadow: 0 0 0 0 rgba(0, 224, 90, .5); }
  70%  { box-shadow: 0 0 0 7px rgba(0, 224, 90, 0); }
  100% { box-shadow: 0 0 0 0 rgba(0, 224, 90, 0); }
}

.nav-user {
  gap: .4rem;
  background: var(--gdt-surface-2);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-pill);
  padding: 3px 4px 3px 4px;
}
.nav-steam-user { display: flex; align-items: center; gap: 7px; padding-right: 4px; }
.nav-steam-avatar {
  width: 24px; height: 24px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--gdt-border-hi);
}
.nav-steam-nombre {
  font-size: .78rem;
  font-weight: 600;
  color: var(--gdt-text-hi);
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.btn-nav-logout { width: 24px !important; height: 24px !important; }

.btn-nav-login {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 16px;
  border-radius: var(--gdt-r-pill);
  background: var(--gdt-accent);
  color: #04140a;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background .16s, transform .16s;
}
.btn-nav-login:hover { background: var(--gdt-accent-hi); transform: translateY(-1px); }

#pwa-install-btn { flex-shrink: 0; }

/* ── Hamburguesa ── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 34px; height: 34px;
  padding: 0 7px;
  background: transparent;
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-sm);
  cursor: pointer;
  flex-shrink: 0;
}
.nav-hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  border-radius: 2px;
  background: var(--gdt-text-hi);
  transition: transform .2s, opacity .2s;
}

/* ── Nav responsive ─────────────────────────────────────────── */

/* Notebooks angostas: se achica todo antes de romper */
@media (max-width: 1180px) {
  .navbar { padding: 0 1rem; gap: .75rem; }
  .nav-item, .nav-trigger { padding: 0 8px; font-size: .72rem; }
  .nav-brand-text { font-size: 1.25rem; }
}

@media (max-width: 980px) {
  .nav-brand-text { display: none; }   /* queda sólo el mark cuadrado */
}

@media (max-width: 860px) {
  .nav-hamburger { display: flex !important; order: -1; }
  .navbar {
    position: sticky !important;
    height: var(--gdt-nav-h) !important;
    min-height: var(--gdt-nav-h) !important;
    padding: 0 .9rem !important;
  }
  .nav-brand-text { display: block; }

  .nav-menu {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    max-height: calc(100vh - var(--gdt-nav-h));
    overflow-y: auto;
    padding: .6rem;
    background: var(--gdt-surface-1);
    border-bottom: 1px solid var(--gdt-border);
    box-shadow: var(--gdt-shadow-md);
    display: none;
  }
  .nav-menu.nav-open { display: flex; }

  .nav-item, .nav-trigger {
    width: 100%;
    height: 44px;
    justify-content: flex-start;
    font-size: .84rem;
    padding: 0 12px;
  }
  .nav-trigger .nav-caret { margin-left: auto; }

  /* En mobile el dropdown es un acordeón, no un popover */
  .nav-drop {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: 0;
    background: transparent;
    min-width: 0;
    padding: 2px 0 6px 12px;
    border-left: 1px solid var(--gdt-border);
    margin: 0 0 4px 16px;
    display: none;
  }
  .nav-group.open .nav-drop { display: flex; }
  .nav-drop a, .nav-drop .nav-drop-locked { padding: 11px 10px; font-size: .88rem; }

  .nav-steam-nombre { display: none; }
  .nav-fecha-chip { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   3. HOME
   ═══════════════════════════════════════════════════════════════ */

/* ── Banner de fecha activa ── */
.gdt-datebar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 1.5rem;
  background: linear-gradient(90deg, transparent, var(--gdt-accent-soft), transparent);
  border-bottom: 1px solid var(--gdt-border);
  font-size: .8rem;
  color: var(--gdt-text);
  text-align: center;
  flex-wrap: wrap;
}
.gdt-datebar strong { color: var(--gdt-accent-hi); font-weight: 700; }
.gdt-datebar a {
  color: var(--gdt-accent);
  font-weight: 600;
  border-bottom: 1px solid var(--gdt-accent-line);
}
.gdt-datebar a:hover { color: var(--gdt-accent-hi); }

/* ── Hero ── */
.hero {
  position: relative;
  text-align: center;
  padding: 88px 1.5rem 64px;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(620px 300px at 50% 30%, rgba(0, 224, 90, .10), transparent 72%);
  pointer-events: none;
}
.hero > * { position: relative; }

.hero-badge {
  background: var(--gdt-surface-2);
  border: 1px solid var(--gdt-border);
  color: var(--gdt-accent);
  font-size: .68rem;
  letter-spacing: .18em;
  padding: 5px 15px;
  border-radius: var(--gdt-r-pill);
  margin-bottom: 1.75rem;
}

.hero-title {
  font-size: clamp(3.2rem, 11vw, 8rem);
  line-height: .88;
  letter-spacing: 2px;
  color: var(--gdt-text-hi);
  text-wrap: balance;
}
.hero-title span {
  color: var(--gdt-accent);
  text-shadow: 0 0 44px rgba(0, 224, 90, .35);
}

.hero-sub {
  margin: 1.4rem auto 0;
  max-width: 480px;
  color: var(--gdt-text-mid);
  font-size: .98rem;
  line-height: 1.65;
}

.hero-actions { margin-top: 2.25rem; flex-wrap: wrap; }

.btn-primary {
  background: var(--gdt-accent);
  color: #04140a;
  box-shadow: 0 6px 22px rgba(0, 224, 90, .22);
}
.btn-primary:hover {
  background: var(--gdt-accent-hi);
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0, 224, 90, .3);
}
.btn-ghost {
  border: 1px solid var(--gdt-border-hi);
  color: var(--gdt-text);
  background: var(--gdt-surface-1);
}
.btn-ghost:hover {
  border-color: var(--gdt-accent-line);
  color: var(--gdt-accent);
  background: var(--gdt-surface-2);
  transform: translateY(-2px);
}

/* ── Stats ── */
.home-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .85rem;
  max-width: 1000px;
  margin: 0 auto 3.5rem;
  padding: 0 1.5rem;
}
.stat-card {
  position: relative;
  background: var(--gdt-surface-1);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-lg);
  padding: 1.5rem 1.25rem;
  text-align: left;
  overflow: hidden;
  transition: border-color .2s, transform .2s, box-shadow .2s;
}
.stat-card::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gdt-accent-line), transparent);
  opacity: 0;
  transition: opacity .2s;
}
.stat-card:hover {
  border-color: var(--gdt-border-hi);
  transform: translateY(-3px);
  box-shadow: var(--gdt-shadow-md);
}
.stat-card:hover::after { opacity: 1; }

.stat-ico {
  width: 17px; height: 17px;
  color: var(--gdt-accent);
  opacity: .8;
  margin-bottom: .9rem;
  display: block;
}
.stat-num {
  font-family: var(--font-titulo), sans-serif;
  font-size: 2.65rem;
  line-height: 1;
  color: var(--gdt-text-hi);
  letter-spacing: 1px;
}
.stat-num-sm { font-size: 1.15rem; line-height: 1.3; color: var(--gdt-accent); }
.stat-label {
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gdt-text-lo);
  margin-top: .5rem;
}

@media (max-width: 900px) { .home-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) {
  .home-stats { grid-template-columns: 1fr; }
  .hero { padding: 56px 1.25rem 40px; }
  .hero-actions .btn { width: 100%; justify-content: center; }
}

/* ── Top DT ── */
.home-top-dt { max-width: 1000px; margin: 0 auto 1rem; padding: 0 1.5rem; }
.home-top-dt-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  background: linear-gradient(100deg, rgba(255, 179, 0, .08), var(--gdt-surface-1) 55%);
  border: 1px solid rgba(255, 179, 0, .22);
  border-radius: var(--gdt-r-lg);
}
.home-top-dt-ico { font-size: 1.5rem; line-height: 1; flex-shrink: 0; }
.home-top-dt-info { min-width: 0; flex: 1; }
.home-top-dt-label {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gdt-warn);
  font-weight: 700;
}
.home-top-dt-nombre {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--gdt-text-hi);
  margin-top: 2px;
}
.home-top-dt-club { font-size: .8rem; color: var(--gdt-text-lo); }
.home-top-dt-pts {
  font-family: var(--font-titulo), sans-serif;
  font-size: 1.9rem;
  color: var(--gdt-warn);
  flex-shrink: 0;
  letter-spacing: 1px;
}

/* ── Tarjetas chicas (capitán / transferido) ── */
.home-global-stats { max-width: 1000px !important; padding: 0 1.5rem !important; }
.hgs-card {
  background: var(--gdt-surface-1) !important;
  border: 1px solid var(--gdt-border) !important;
  border-radius: var(--gdt-r-md) !important;
  padding: 12px 16px !important;
  transition: border-color .2s;
}
.hgs-card:hover { border-color: var(--gdt-border-hi) !important; }
.hgs-ico { color: var(--gdt-accent) !important; }
.hgs-label { color: var(--gdt-text-lo) !important; }
.hgs-value { color: var(--gdt-text-hi) !important; }

/* ── Accesos rápidos / onboarding ── */
.onboarding-wrap { max-width: 1000px !important; padding: 0 1.5rem 4rem !important; }
.onboarding-titulo { letter-spacing: 2px !important; color: var(--gdt-text-hi) !important; }
.onboarding-step {
  background: var(--gdt-surface-1) !important;
  border: 1px solid var(--gdt-border) !important;
  border-radius: var(--gdt-r-lg) !important;
}
.onboarding-step:hover {
  border-color: var(--gdt-accent-line) !important;
  box-shadow: var(--gdt-shadow-md) !important;
}
.ob-num {
  background: var(--gdt-accent-soft) !important;
  color: var(--gdt-accent) !important;
  border: 1px solid var(--gdt-accent-line);
}
.ob-title { color: var(--gdt-text-hi) !important; }
.ob-desc { color: var(--gdt-text-mid) !important; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════
   4. BUILDER  (/armar)
   Cabecera reagrupada: identidad → toolbar → presupuesto.
   ═══════════════════════════════════════════════════════════════ */

.builder-layout { max-width: 1280px; gap: 1.25rem; }

.bld-head {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1rem 1.1rem;
  background: var(--gdt-surface-1);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-lg);
}

/* ── Identidad (nick + club) ── */
.bld-identity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .7rem;
}

.campo-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  /* style.css trae `align-items:center` (era una fila); sin pisarlo, al
     pasar a columna el caption quedaba centrado sobre el valor. */
  align-items: stretch;
  text-align: left;
  margin-bottom: 0;
  gap: 3px;
  padding: 8px 12px 9px;
  background: var(--gdt-surface-2);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-md);
  cursor: text;
  transition: border-color .16s, background .16s;
}
.campo-wrap:focus-within {
  border-color: var(--gdt-accent-line);
  background: var(--gdt-surface-3);
}
.campo-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gdt-text-lo);
}
.campo-wrap:focus-within .campo-label { color: var(--gdt-accent); }
.campo-input { font-size: .92rem; width: 100%; }
.campo-estado {
  position: absolute;
  right: 12px;
  bottom: 9px;
  font-size: .66rem;
}

/* ── Toolbar (liga + formación) ── */
.bld-toolbar {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding: .55rem .7rem;
  background: var(--gdt-surface-2);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-md);
}
.bld-tool {
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
  min-width: 0;
}
.bld-tool-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gdt-text-lo);
  flex-shrink: 0;
}
.bld-tool-sep {
  width: 1px;
  align-self: stretch;
  background: var(--gdt-border);
  flex-shrink: 0;
}
.bld-toolbar .liga-tabs-hint {
  font-size: .68rem;
  color: var(--gdt-text-lo);
  font-style: normal;
}

/* Segmented control compartido por liga y formación */
.liga-tabs-inline,
.formacion-btns {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--gdt-bg);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-sm);
}
.liga-tabs-inline .liga-tab,
.formacion-btns .formacion-btn {
  height: 27px;
  padding: 0 13px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  font-family: var(--font-body), sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gdt-text-mid);
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.liga-tabs-inline .liga-tab:hover,
.formacion-btns .formacion-btn:hover { color: var(--gdt-text-hi); }
.liga-tabs-inline .liga-tab.active,
.formacion-btns .formacion-btn.active {
  background: var(--gdt-accent);
  color: #04140a;
}

/* ── Presupuesto ── */
.presupuesto-bar {
  display: flex;
  align-items: center;
  gap: .9rem;
  padding: .1rem .2rem;
}
.presupuesto-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gdt-text-lo);
  flex-shrink: 0;
}
.presupuesto-track {
  flex: 1;
  height: 7px;
  min-width: 80px;
  background: var(--gdt-bg);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-pill);
  overflow: hidden;
}
.presupuesto-fill {
  height: 100%;
  border-radius: var(--gdt-r-pill);
  background: linear-gradient(90deg, var(--gdt-accent-dim), var(--gdt-accent));
  transition: width .35s cubic-bezier(.22,1,.36,1), background .25s;
}
.presupuesto-fill.peligro {
  background: linear-gradient(90deg, #c77b00, var(--gdt-warn));
}

#presupuesto-texto {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
  flex-shrink: 0;
  min-width: 108px;
}
#presupuesto-texto strong {
  font-family: var(--font-titulo), sans-serif;
  font-size: 1.3rem;
  letter-spacing: 1px;
  color: var(--gdt-accent);
}
.presupuesto-sub {
  font-size: .64rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--gdt-text-lo);
}
.presupuesto-bar.es-ajustado #presupuesto-texto strong { color: var(--gdt-warn); }
.presupuesto-bar.es-excedido #presupuesto-texto strong { color: var(--gdt-danger); }
.presupuesto-bar.es-excedido .presupuesto-fill {
  background: linear-gradient(90deg, #a32020, var(--gdt-danger));
}

/* ── Banner de fecha / transferencias ── */
.fecha-activa-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
  max-width: 1280px;
  margin: 1rem auto -.25rem;
  padding: .6rem 1.1rem;
  border-radius: var(--gdt-r-md);
  font-size: .78rem;
}
.fecha-activa-banner.banner-transferencia {
  background: var(--gdt-accent-soft);
  border: 1px solid var(--gdt-accent-line);
  color: var(--gdt-text);
}
.fecha-activa-banner.banner-partido {
  background: rgba(255, 179, 0, .09);
  border: 1px solid rgba(255, 179, 0, .3);
  color: var(--gdt-warn);
}
.fecha-activa-banner strong { color: var(--gdt-text-hi); }
.tb-ico {
  width: 13px;
  height: 13px;
  vertical-align: -2px;
  margin-right: 3px;
}
.transfer-banner-sep { color: var(--gdt-text-lo); }
.transfer-banner-cierre { color: var(--gdt-warn); font-weight: 600; }
.transfer-banner-count { color: var(--gdt-text-hi); font-weight: 600; }

/* ── Panel de la lista ── */
.input-buscar,
.input-select-equipo {
  background: var(--gdt-surface-2);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-md);
  color: var(--gdt-text-hi);
}
.input-buscar:focus,
.input-select-equipo:focus {
  border-color: var(--gdt-accent-line);
  outline: none;
}
.jug-item {
  background: var(--gdt-surface-1);
  border: 1px solid var(--gdt-border);
  border-left-width: 3px;
  border-radius: var(--gdt-r-md);
}
.jug-item:hover {
  background: var(--gdt-surface-2);
  border-color: var(--gdt-border-hi);
}
.jug-item:hover.tier-d1  { border-left-color: #ff8c00; }
.jug-item:hover.tier-d2  { border-left-color: #4a90ff; }
.jug-item:hover.tier-vet { border-left-color: #ffd200; }

/* ── Cancha ── */
.cancha {
  border-radius: var(--gdt-r-lg);
  border: 1px solid #1c3a22;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 60px,
      rgba(255,255,255,.028) 60px, rgba(255,255,255,.028) 61px),
    linear-gradient(180deg, #0c2417 0%, #071710 100%);
}

/* ── Responsive del builder ── */
@media (max-width: 1080px) {
  .builder-layout { grid-template-columns: 1fr 330px; }
}
/* BUG: esta regla de 1080px no tenía freno para abajo y, como theme.css
   carga después de style.css, en un celular le ganaba a la regla de una
   sola columna que hay en style.css. Resultado: en 360px el layout seguía
   siendo "1fr 330px", la lista se quedaba con 330 de los 360 y la cancha
   se aplastaba a cero — quedaba una tirita negra pegada al borde. Como el
   contenedor tiene overflow-x:hidden, la página no scrolleaba al costado
   y el problema pasaba desapercibido. */
@media (max-width: 860px) {
  .builder-layout { grid-template-columns: minmax(0, 1fr) !important; }
  .panel-cancha, .panel-lista { min-width: 0; }

  .bld-identity { grid-template-columns: 1fr; }
  .bld-toolbar { gap: .7rem; }
  .bld-tool-sep { display: none; }
  .bld-tool { width: 100%; justify-content: flex-start; }
  .presupuesto-bar { flex-wrap: wrap; }
  .presupuesto-track { order: 3; width: 100%; flex-basis: 100%; }
  #presupuesto-texto { margin-left: auto; }
  .fecha-activa-banner { margin: .75rem 1rem -.25rem; font-size: .72rem; }
}

/* ── Pill deslizante (script.js `_initTabIndicator`) ─────────────
   El sistema viejo le daba a cada barra un pill distinto: verde
   sólido en formación, gris con borde verde en liga. Acá se unifica:
   pill sólido de acento en las tres barras. Lleva !important porque
   las reglas inline de base.html también lo usan.               ── */
.liga-tabs-inline .tab-pill,
.formacion-btns   .tab-pill,
.meq-liga-tabs    .tab-pill,
.filtros-pos      .tab-pill {
  background: var(--gdt-accent) !important;
  border: 0 !important;
  border-radius: 6px !important;
}
.filtros-pos .tab-pill { border-radius: var(--gdt-r-pill) !important; }

.liga-tabs-inline.tab-pill-ready .liga-tab,
.formacion-btns.tab-pill-ready   .formacion-btn,
.meq-liga-tabs.tab-pill-ready    .meq-liga-tab,
.filtros-pos.tab-pill-ready      .filtro-btn {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--gdt-text-mid) !important;
}
.liga-tabs-inline.tab-pill-ready .liga-tab.active,
.formacion-btns.tab-pill-ready   .formacion-btn.active,
.meq-liga-tabs.tab-pill-ready    .meq-liga-tab.active,
.filtros-pos.tab-pill-ready      .filtro-btn.active {
  color: #04140a !important;
  font-weight: 700;
}
.liga-tabs-inline.tab-pill-ready .liga-tab:hover:not(.active),
.formacion-btns.tab-pill-ready   .formacion-btn:hover:not(.active),
.meq-liga-tabs.tab-pill-ready    .meq-liga-tab:hover:not(.active),
.filtros-pos.tab-pill-ready      .filtro-btn:hover:not(.active) {
  color: var(--gdt-text-hi) !important;
}

/* Barra de filtros de posición del panel derecho */
.filtros-pos {
  display: flex;
  gap: 2px;
  padding: 2px;
  background: var(--gdt-bg);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-pill);
}
.filtros-pos .filtro-btn {
  flex: 1;
  height: 27px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  border-radius: var(--gdt-r-pill);
  font-family: var(--font-body), sans-serif;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--gdt-text-mid);
  cursor: pointer;
}
.filtro-disponibles-label { font-size: .72rem; color: var(--gdt-text-mid); }

/* ── .liga-tabs-bar (Ranking, Mercado, Puntos IOS) ───────────────
   Era el único segmented control que quedaba distinto: botones con
   borde de 2px y pill gris con borde verde. Se alinea con el resto. */
.liga-tabs-bar {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--gdt-bg);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-sm);
}
.liga-tabs-bar .liga-tab {
  height: 30px;
  padding: 0 18px;
  border: 0;
  background: transparent;
  border-radius: 6px;
  font-size: .76rem;
  letter-spacing: .05em;
  color: var(--gdt-text-mid);
  display: inline-flex;
  align-items: center;
}
.liga-tabs-bar .liga-tab:hover { border-color: transparent; color: var(--gdt-text-hi); }
.liga-tabs-bar .liga-tab.active {
  background: var(--gdt-accent);
  border-color: transparent;
  color: #04140a;
}
.liga-tabs-bar .tab-pill {
  background: var(--gdt-accent) !important;
  border: 0 !important;
  border-radius: 6px !important;
}
.liga-tabs-bar.tab-pill-ready .liga-tab {
  background: transparent !important;
  border-color: transparent !important;
  color: var(--gdt-text-mid) !important;
}
.liga-tabs-bar.tab-pill-ready .liga-tab.active { color: #04140a !important; }
.liga-tabs-bar.tab-pill-ready .liga-tab:hover:not(.active) { color: var(--gdt-text-hi) !important; }

/* ═══════════════════════════════════════════════════════════════
   5. EXPLORADOR DE JUGADORES  (/jugadores)
   ═══════════════════════════════════════════════════════════════ */

.jug-explorer-filters,
.explorer-count,
.explorer-grid,
.explorer-pager { max-width: 1180px; padding-left: 1.5rem; padding-right: 1.5rem; }

.explorer-filter-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .85rem;
  padding: .7rem .8rem;
  background: var(--gdt-surface-1);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-lg);
}

.ex-tool { display: flex; align-items: center; gap: .5rem; min-width: 0; }
.ex-tool-label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gdt-text-lo);
  flex-shrink: 0;
}

/* ── Buscador con icono y botón de limpiar ── */
.explorer-search-wrap {
  position: relative;
  flex: 1 1 220px;
  min-width: 190px;
  display: flex;
  align-items: center;
}
.ex-search-ico {
  position: absolute;
  left: 11px;
  width: 15px; height: 15px;
  color: var(--gdt-text-lo);
  pointer-events: none;
}
.jug-explorer-filters .input-buscar {
  width: 100%;
  height: 34px;
  padding: 0 32px 0 33px;
  background: var(--gdt-surface-2);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-md);
  color: var(--gdt-text-hi);
  font-size: .85rem;
}
.jug-explorer-filters .input-buscar:focus {
  border-color: var(--gdt-accent-line);
  background: var(--gdt-surface-3);
}
.jug-explorer-filters .input-buscar::placeholder { color: var(--gdt-text-lo); }
.ex-clear {
  position: absolute;
  right: 7px;
  display: grid;
  place-items: center;
  width: 20px; height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--gdt-surface-3);
  color: var(--gdt-text-mid);
  cursor: pointer;
}
.ex-clear:hover { background: var(--gdt-border-hi); color: var(--gdt-text-hi); }
.ex-clear svg { width: 10px; height: 10px; }
.ex-clear[hidden] { display: none; }

/* ── Selects ── */
.input-sort {
  height: 34px;
  padding: 0 30px 0 11px;
  background: var(--gdt-surface-2);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-md);
  color: var(--gdt-text-hi);
  font-size: .82rem;
  max-width: 190px;
  /* Flecha propia: la nativa se ve clarísima sobre fondo oscuro en Windows */
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f8b98' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 11px;
}
.input-sort:focus { border-color: var(--gdt-accent-line); }
.input-sort option { background: var(--gdt-surface-2); color: var(--gdt-text-hi); }

/* ── Limpiar filtros ── */
.ex-reset {
  height: 34px;
  padding: 0 13px;
  margin-left: auto;
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-md);
  background: transparent;
  color: var(--gdt-text-mid);
  font-family: var(--font-body), sans-serif;
  font-size: .76rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: color .15s, border-color .15s, background .15s;
}
.ex-reset:hover {
  color: var(--gdt-danger);
  border-color: rgba(255, 82, 82, .4);
  background: rgba(255, 82, 82, .08);
}
.ex-reset[hidden] { display: none; }

.explorer-count {
  font-size: .74rem;
  letter-spacing: .03em;
  color: var(--gdt-text-lo);
  padding-top: .9rem;
  padding-bottom: .6rem;
}

/* ── Grilla y tarjetas ── */
.explorer-grid {
  grid-template-columns: repeat(auto-fill, minmax(196px, 1fr));
  gap: .85rem;
}
.ex-card {
  background: var(--gdt-surface-1);
  border: 1px solid var(--gdt-border);
  border-top-width: 3px;
  border-radius: var(--gdt-r-lg);
  transition: transform .18s, box-shadow .18s, border-color .18s;
}
.ex-card:hover {
  transform: translateY(-3px);
  border-color: var(--gdt-border-hi);
  box-shadow: var(--gdt-shadow-md);
}
.ex-nombre { color: var(--gdt-text-hi); }
.ex-club   { color: var(--gdt-text-lo); }
.ex-stat   { color: var(--gdt-text-mid); }
.ex-stat strong { color: var(--gdt-text-hi); }

.ex-ico { width: 11px; height: 11px; vertical-align: -1px; margin-right: 2px; }
.inactivo-badge {
  background: rgba(255, 179, 0, .12) !important;
  color: var(--gdt-warn) !important;
  border-color: rgba(255, 179, 0, .3) !important;
}

/* ── Paginador: mismo aspecto que el del ranking ── */
.explorer-pager { gap: 4px; padding-bottom: 3rem; }
.pager-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gdt-surface-1);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-sm);
  color: var(--gdt-text-mid);
  font-size: .8rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pager-btn:hover:not(:disabled):not(.active) {
  background: var(--gdt-surface-3);
  color: var(--gdt-text-hi);
  border-color: var(--gdt-border-hi);
}
.pager-btn.active {
  background: var(--gdt-accent);
  border-color: var(--gdt-accent);
  color: #04140a;
  cursor: default;
}
.pager-btn:disabled { opacity: .32; cursor: not-allowed; }
.pager-arrow { padding: 0; }
.pager-arrow svg { width: 14px; height: 14px; }
.pager-info { color: var(--gdt-text-lo); font-size: .8rem; margin: 0 2px; }

@media (max-width: 900px) {
  .explorer-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}
@media (max-width: 700px) {
  .explorer-filter-row { gap: .6rem; }
  .ex-tool { width: 100%; }
  .ex-tool .filtros-pos, .ex-tool .input-sort { flex: 1; max-width: none; }
  .ex-reset { margin-left: 0; width: 100%; }
}

/* ───────────────────────────────────────────────────────────────
   Tarjeta de jugador — reconstruida
   El problema viejo: `.ex-precio-wrap` era un item de flex EN FLUJO
   dentro de `.ex-card-top`, que centraba la foto. Como su ancho
   cambiaba según si había delta y/o insignia de inactivo, la foto
   caía en un sitio distinto en cada tarjeta y la grilla se veía
   movida. Ahora la tarjeta es un grid de filas fijas y cada dato
   tiene su lugar: foto → identidad → stats → precio.
   ─────────────────────────────────────────────────────────────── */

.ex-card {
  display: grid;
  grid-template-rows: auto auto 1fr auto;   /* las stats empujan el pie abajo */
  /* Sin esta columna, la grilla se dimensiona al contenido más ancho: las
     filas medían 207px dentro de una tarjeta de 164 y el overflow:hidden
     se comía el club, la tercera estadística y la variación de precio.
     minmax(0, 1fr) obliga a que la fila nunca pase el ancho de la tarjeta. */
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding: 0;
  overflow: hidden;
}

/* ── Fila 1: foto centrada + marcadores en las esquinas ── */
.ex-head {
  position: relative;
  display: flex;
  justify-content: center;      /* la foto SIEMPRE al centro */
  padding: 1rem .75rem .6rem;
  background:
    radial-gradient(60% 80% at 50% 0%, rgba(255,255,255,.035), transparent 70%);
}
.ex-foto-wrap { position: relative; width: 62px; height: 62px; flex-shrink: 0; }
.ex-foto,
.ex-foto-ph {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gdt-border);
  background: var(--gdt-surface-2);
  display: block;
}
.ex-foto-wrap.sin-foto .ex-foto { display: none; }
.ex-foto-wrap.sin-foto::after,
.ex-foto-ph::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--gdt-border);
  background:
    radial-gradient(circle at 50% 38%, var(--gdt-surface-3) 0 34%, transparent 35%),
    radial-gradient(ellipse at 50% 108%, var(--gdt-surface-3) 0 42%, transparent 43%),
    var(--gdt-surface-2);
}
.ex-card:hover .ex-foto { border-color: var(--gdt-border-hi); }

/* Chip de OVR pegado a la foto */
.ex-ovr {
  position: absolute;
  /* style.css lo tenía con `top: .45rem`; si no se anula, `top` le gana a
     `bottom` y el chip queda arriba en vez de pegado a la foto. */
  top: auto;
  right: auto;
  bottom: -3px;
  left: -5px;
  display: grid;
  place-items: center;
  min-width: 26px;
  height: 22px;
  padding: 2px 5px 0;
  border-radius: var(--gdt-r-pill);
  background: var(--gdt-surface-3);
  border: 1.5px solid var(--gdt-bg);
  font-family: var(--font-titulo), sans-serif;
  font-size: .92rem;
  line-height: 1;
  letter-spacing: .5px;
  color: var(--gdt-text-hi);
  cursor: help;
}
/* OVR desactualizado: mismo lugar, color distinto — el detalle va en el title */
/* Relleno SOLIDO en vez de un amarillo translucido: sobre la superficie
   oscura el rgba de baja opacidad se ve lavado. */
.ex-ovr.viejo {
  background: #3d2e06;
  color: #ffc53d;
  border-color: var(--gdt-bg);
  box-shadow: inset 0 0 0 1.5px rgba(255, 179, 0, .65);
}
.ex-ovr.sin { color: var(--gdt-text-lo); font-size: .8rem; }

/* Esquinas: inactividad (izq) y liga (der, sólo en "Otros") */
.ex-flag {
  position: absolute;
  top: .55rem;
  left: .55rem;
  display: inline-flex;
  align-items: center;
  height: 19px;
  padding: 0 6px;
  border-radius: var(--gdt-r-pill);
  background: #3d2e06;
  border: 1px solid rgba(255, 179, 0, .6);
  color: #ffc53d;
  font-size: .62rem;
  font-weight: 700;
  white-space: nowrap;
  cursor: help;
}
.ex-head .tier-badge {
  position: absolute;
  top: .55rem;
  right: .55rem;
  font-size: .58rem !important;
  padding: 2px 6px !important;
}

/* ── Fila 2: identidad ── */
.ex-id { padding: .15rem .8rem .55rem; text-align: center; }
.ex-nombre {
  font-size: .88rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gdt-text-hi);
  margin-bottom: .35rem;
  /* Dos líneas como máximo: los nombres largos ya no estiran la tarjeta */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.2em;
}
.ex-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  min-width: 0;
}
/* Trampa clásica de flexbox: un hijo de un contenedor flex arranca con
   min-width:auto, o sea que se niega a achicarse por debajo de su
   contenido. Por eso "Freestyle Master Soccer" no se cortaba con "…":
   estiraba la fila y la tarjeta se lo comía con su overflow:hidden.
   Con min-width:0 el puntos suspensivos funciona. */
.ex-club-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  flex: 0 1 auto;
  max-width: 100%;
}
.ex-club { min-width: 0; }
.ex-meta > * { min-width: 0; }
.ex-escudo { width: 13px; height: 13px; flex-shrink: 0; }
.ex-club {
  font-size: .7rem;
  color: var(--gdt-text-lo);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Fila 3: stats en tres columnas alineadas ── */
.ex-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 0;
  padding: .55rem .5rem;
  border-top: 1px solid var(--gdt-border);
  border-bottom: 1px solid var(--gdt-border);
  background: rgba(0, 0, 0, .18);
}
.ex-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 0;
}
.ex-stat + .ex-stat { border-left: 1px solid var(--gdt-border); }
.ex-stat b {
  font-size: .92rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--gdt-text-hi);
  font-variant-numeric: tabular-nums;
}
.ex-stat span {
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gdt-text-lo);
}

/* ── Fila 4: precio ── */
.ex-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: .55rem .8rem .65rem;
}
.ex-precio {
  position: static;            /* antes era absolute, arriba a la derecha */
  font-family: var(--font-titulo), sans-serif;
  font-size: 1.15rem;
  line-height: 1;
  letter-spacing: .5px;
  font-weight: 400;
  color: var(--gdt-text-hi);
}
.precio-delta {
  gap: 1px;
  padding: 2px 6px;
  border-radius: var(--gdt-r-pill);
  font-size: .68rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.delta-up   { color: var(--gdt-accent-hi); background: rgba(0, 224, 90, .18);  border: 1px solid rgba(0, 224, 90, .34); }
.delta-down { color: #ff8a8a;              background: rgba(255, 82, 82, .18); border: 1px solid rgba(255, 82, 82, .34); }
.delta-neu  { color: var(--gdt-text-lo);   background: transparent; border: 1px solid transparent; padding: 2px 4px; }
.pd-ico     { width: 9px; height: 9px; flex-shrink: 0; }

@media (max-width: 480px) {
  .ex-head { padding: .8rem .5rem .5rem; }
  .ex-foto, .ex-foto-ph, .ex-foto-wrap { width: 54px; height: 54px; }
  .ex-nombre { font-size: .82rem; }
  .ex-precio { font-size: 1.05rem; }
}

/* ═══════════════════════════════════════════════════════════════
   6. PERFIL DE JUGADOR  (/jugador/<id>)
   ═══════════════════════════════════════════════════════════════ */

.perfil-wrap { max-width: 860px; padding: 1.25rem 1.5rem 4rem; }

/* ── Volver ── */
.perfil-breadcrumb a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px 0 9px;
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-pill);
  background: var(--gdt-surface-1);
  color: var(--gdt-text-mid);
  font-size: .76rem;
  font-weight: 600;
}
.perfil-breadcrumb a:hover {
  color: var(--gdt-text-hi);
  border-color: var(--gdt-border-hi);
  background: var(--gdt-surface-2);
}
.perfil-breadcrumb a svg { width: 14px; height: 14px; }

/* ── Cabecera ── */
.perfil-header {
  background: var(--gdt-surface-1);
  border: 1px solid var(--gdt-border);
  border-left-width: 4px;
  border-radius: var(--gdt-r-lg);
  padding: 1.5rem;
  gap: 1.25rem;
  align-items: center;
}
.perfil-foto,
.perfil-foto-placeholder {
  border: 2px solid var(--gdt-border);
  background: var(--gdt-surface-2);
}
.perfil-nombre {
  font-size: clamp(1.8rem, 5vw, 2.5rem);
  color: var(--gdt-text-hi);
  letter-spacing: 1.5px;
}
.perfil-club { color: var(--gdt-text-mid); }
.perfil-badges { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: .5rem; }

.perfil-precio {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-titulo), sans-serif;
  font-size: 1.7rem;
  font-weight: 400;
  letter-spacing: .5px;
  line-height: 1;
  margin-bottom: .7rem;
}
.pf-delta-ico { width: 11px; height: 11px; margin-right: 1px; }

.perfil-link-ext {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
  color: var(--gdt-text-lo);
  font-size: .74rem;
}
.perfil-link-ext:hover { color: var(--gdt-accent); }
.perfil-link-ext svg { width: 12px; height: 12px; }

/* ── Títulos de sección ── */
.perfil-section { margin-bottom: 1.75rem; }
.perfil-section-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 1.15rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--gdt-text-hi);
  border-bottom: 1px solid var(--gdt-border);
  padding-bottom: .5rem;
  margin-bottom: 1rem;
}
.perfil-stats-nota {
  font-family: var(--font-body), sans-serif;
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: none;
  color: var(--gdt-text-lo);
  margin-left: auto;
}

/* Selector de cohorte (antes tenía los colores metidos en el atributo style) */
.pf-cohorte-sel {
  margin-left: 4px;
  height: 28px;
  padding: 0 28px 0 10px;
  background: var(--gdt-surface-2);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-sm);
  color: var(--gdt-text-hi);
  font-family: var(--font-body), sans-serif;
  font-size: .76rem;
  letter-spacing: .02em;
  text-transform: none;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237f8b98' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px;
}
.pf-cohorte-sel:focus { border-color: var(--gdt-accent-line); outline: none; }
.pf-cohorte-sel option { background: var(--gdt-surface-2); color: var(--gdt-text-hi); }

/* ── Estadísticas ── */
.perfil-stats-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .6rem; }
.perfil-stat {
  background: var(--gdt-surface-1);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-md);
  padding: .8rem .6rem .7rem;
  transition: border-color .18s, transform .18s;
}
.perfil-stat:hover { border-color: var(--gdt-border-hi); transform: translateY(-2px); }
.pf-stat-ico {
  width: 15px;
  height: 15px;
  display: block;
  margin: 0 auto .45rem;
  color: var(--gdt-accent);
  opacity: .75;
}
.perfil-stat-val {
  font-family: var(--font-titulo), sans-serif;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: .5px;
  color: var(--gdt-text-hi);
}
.perfil-stat-lbl {
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gdt-text-lo);
  margin-top: 5px;
}

/* ── Presencia en equipos ── */
.perfil-en-eq-item {
  flex: 1;
  background: var(--gdt-surface-1);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-lg);
  padding: 1.1rem 1.25rem;
}
.perfil-en-eq-num { letter-spacing: 1px; }
.perfil-en-eq-lbl {
  font-size: .66rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gdt-text-lo);
  margin-top: 6px;
}

@media (max-width: 640px) {
  .perfil-header { flex-direction: column; text-align: center; }
  .perfil-badges, .perfil-club, .perfil-precio { justify-content: center; }
  .perfil-en-equipos { flex-direction: column; }
  .perfil-section-title { font-size: 1rem; }
  .perfil-stats-nota { margin-left: 0; flex-basis: 100%; }
}

/* ── Iconos que reemplazaron emojis en base.html ─────────────────
   Los emojis se dimensionaban con font-size; un SVG necesita medida
   explícita, así que acá va el tamaño de cada uno. */
#blocker-icon svg   { width: 38px; height: 38px; color: var(--gdt-warn); }
#encamino-lock svg  { width: 38px; height: 38px; color: var(--gdt-accent); }
.encamino-juego-ico { display: inline-flex; align-items: center; justify-content: center; width: 26px; }
.encamino-juego-ico svg { width: 21px; height: 21px; color: var(--gdt-accent); }
.encamino-juego-soon .encamino-juego-ico svg { color: var(--gdt-text-lo); }
.encamino-badge-soon svg { width: 12px; height: 12px; vertical-align: -2px; }

#pwa-install-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--gdt-r-sm);
}
#pwa-install-btn svg { width: 16px; height: 16px; }

/* ── Iconos de la biblioteca (static/icons.js) ───────────────────
   Tamaño por defecto; cada contexto lo ajusta con su propia clase. */
.gdt-ico {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  vertical-align: -.125em;
  display: inline-block;
}
/* Medallas del podio: el ícono es uno solo y el puesto lo da el color. */
.gdt-ico.oro    { color: #f2c94c; }
.gdt-ico.plata  { color: #cbd5e1; }
.gdt-ico.bronce { color: #cd7f32; }

/* ── Perfil de juego (48 subcategorías) ──────────────────────────
   La columna del nombre medía 9.5rem y la etiqueta de virtud iba
   pegada al nombre, así que "Participación · Mago del balón" partía
   la celda en dos renglones y cada fila quedaba de distinto alto. */
.pf48-cat {
  background: var(--gdt-surface-1);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-md);
  transition: border-color .16s;
}
.pf48-cat:hover { border-color: var(--gdt-border-hi); }

.pf48-head {
  grid-template-columns: 11.5rem 1fr 2.8rem 1.1rem;
  min-height: 52px;               /* todas las filas miden igual */
  padding: .55rem .9rem;
}
.pf48-head:hover,
.pf48-cat.abierta .pf48-head { background: var(--gdt-surface-2); }

.pf48-nombre {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
  min-width: 0;
}
.pf48-cat-nom {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  font-size: .88rem;
  line-height: 1.2;
  color: var(--gdt-text-hi);
}
/* Cada categoría lleva su ícono (GDT.catIcon). Antes solo se veía uno
   cuando el jugador tenía una virtud en esa categoría, así que unas filas
   tenían ícono y otras no. */
.pf48-cat-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.15rem;
  height: 1.15rem;
  flex-shrink: 0;
  border-radius: 5px;
  background: var(--gdt-surface-3);
  color: var(--gdt-text-mid);
}
.pf48-cat-ico .gdt-ico { width: .72rem; height: .72rem; }
.pf48-cat.abierta .pf48-cat-ico { color: var(--gdt-text-hi); }
.pf48-etq {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .68rem;
  font-weight: 600;
  line-height: 1.2;
  color: #c9a3ff;
  min-width: 0;
}
.pf48-etq-ico { width: 11px; height: 11px; flex-shrink: 0; }

.pf48-barra { background: var(--gdt-bg); height: 7px; }
.pf48-val   { font-size: .95rem; }

.pf48-flecha { color: var(--gdt-text-lo); display: grid; place-items: center; }
.pf48-flecha svg { width: 13px; height: 13px; }
.pf48-cat.abierta .pf48-flecha { color: var(--gdt-text-hi); }

.pf48-subs { border-top: 1px solid var(--gdt-border); padding-top: .5rem; }
.pf48-sub  { grid-template-columns: 11.5rem 1fr 2.8rem 1.1rem; }
.pf48-sub-nombre { color: var(--gdt-text-mid); }

/* Habilidades especiales */
.pf48-glob-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(168, 85, 247, .16);
  border: 1px solid rgba(168, 85, 247, .45);
  color: #ddd6fe;
}
.pf48-glob-tag .gdt-ico { width: 12px; height: 12px; }
.pf48-nota { color: var(--gdt-text-lo); }

/* Etiquetas dentro de la carta */
.c-glbl .c-ico, .c-clbl .c-ico { width: 9px; height: 9px; margin-right: 3px; vertical-align: -1px; }

@media (max-width: 600px) {
  .pf48-head, .pf48-sub { grid-template-columns: 8.5rem 1fr 2.4rem 1rem; gap: .5rem; }
  .pf48-cat-nom { font-size: .8rem; }
  .pf48-etq { font-size: .62rem; }
}

/* ── Tildes de pseudo-elementos ──────────────────────────────────
   `content:` no acepta markup, así que estas tres tildes (que antes
   eran el carácter ✓) se dibujan como imagen de fondo SVG. */
.jug-item.ya-en-equipo::after,
.liga-tab.tiene-equipo::after,
.ayuda-regla::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300e05a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m4 12 5.5 5.5L20 7'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
}
.jug-item.ya-en-equipo::after {
  background-position: left center;
  background-size: 11px;
  padding-left: 14px;
}
.liga-tab.tiene-equipo::after {
  display: inline-block;
  width: 11px;
  height: 11px;
  margin-left: 5px;
  background-size: contain;
  background-position: center;
  vertical-align: -1px;
}
.ayuda-regla::before {
  display: inline-block;
  width: 13px;
  height: 13px;
  background-size: contain;
  background-position: center;
}

/* ── Cabecera del perfil: resumen a la derecha ───────────────────
   La cabecera ocupaba todo el ancho con la foto y el nombre a la
   izquierda y media tarjeta vacía a la derecha. */
.perfil-header { display: flex; }
.perfil-info { flex: 1; min-width: 0; }

.perfil-resumen {
  display: grid;
  grid-template-columns: repeat(4, minmax(52px, auto));
  gap: 0;
  flex-shrink: 0;
  align-self: stretch;
  align-items: center;
  padding-left: 1.25rem;
  border-left: 1px solid var(--gdt-border);
}
.pr-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0 .85rem;
}
.pr-item + .pr-item { border-left: 1px solid var(--gdt-border); }
.pr-val {
  font-family: var(--font-titulo), sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: .5px;
  color: var(--gdt-text-hi);
  font-variant-numeric: tabular-nums;
}
.pr-item.viejo .pr-val { color: var(--gdt-warn); }
.pr-lbl {
  font-size: .56rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gdt-text-lo);
}

/* ── Sección de la carta ── */
.carta-section {
  display: flex;
  justify-content: center;
  padding: 1.25rem;
  background:
    radial-gradient(70% 60% at 50% 0%, rgba(255,255,255,.028), transparent 70%),
    var(--gdt-surface-1);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-lg);
}

@media (max-width: 760px) {
  .perfil-resumen {
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    padding: .9rem 0 0;
    margin-top: .9rem;
    border-left: 0;
    border-top: 1px solid var(--gdt-border);
  }
  .pr-item { padding: 0 .4rem; }
  .pr-val { font-size: 1.3rem; }
}


/* ══════════════════════════════════════════════════════════════════
   9. MERCADO
   ──────────────────────────────────────────────────────────────────
   El tablero tenia 3 columnas metidas en 680px (unos 215px cada una),
   asi que las tarjetas salian apretadas. Ahora el ancho acompaña y las
   columnas se reacomodan solas: 3 -> 2 -> 1 segun entra.

   Tambien se saco el selector de columnas de celular: dependia de un
   `window.innerWidth` leido UNA sola vez al renderizar, asi que si
   entrabas en escritorio y achicabas la ventana quedaban las tres
   columnas ocultas y ningun boton para mostrarlas — pagina en blanco.
   ══════════════════════════════════════════════════════════════════ */
.mkt-wrap { max-width: 1180px; }
.mkt-wrap .liga-tabs-bar { margin-bottom: 1rem; }

.mkt-columns {
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: .9rem;
}

.mkt-col {
  display: flex;
  flex-direction: column;
  background: var(--gdt-surface-1);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-lg);
  overflow: hidden;
}
/* style.css pintaba estas clases cuando iban en la cabecera; ahora van en
   la columna entera, asi que hay que devolverle el fondo neutro. */
.mkt-col-up, .mkt-col-down, .mkt-col-inact {
  background: var(--gdt-surface-1);
  color: inherit;
}

.mkt-col-header {
  gap: .5rem;
  padding: .6rem .75rem;
  border-radius: 0;
  border-bottom: 1px solid var(--gdt-border);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.mkt-col-tit { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mkt-col-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  flex-shrink: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, .07);
  font-size: inherit;
}
.mkt-col-icon .gdt-ico { width: .85rem; height: .85rem; }

.mkt-col-count {
  margin-left: auto;
  flex-shrink: 0;
  font-size: .7rem;
  font-weight: 700;
  padding: 1px 7px;
  border-radius: var(--gdt-r-pill);
  background: rgba(255, 255, 255, .08);
  color: var(--gdt-text);
  opacity: 1;
}

.mkt-col-up    .mkt-col-header { background: rgba(0, 224, 90, .09);  color: var(--gdt-accent-hi); border-bottom-color: rgba(0, 224, 90, .22); }
.mkt-col-down  .mkt-col-header { background: rgba(255, 82, 82, .09); color: #ff8a8a;              border-bottom-color: rgba(255, 82, 82, .22); }
.mkt-col-inact .mkt-col-header { background: rgba(255, 179, 0, .09); color: #ffc74d;              border-bottom-color: rgba(255, 179, 0, .24); }
.mkt-col-up    .mkt-col-icon   { background: rgba(0, 224, 90, .16); }
.mkt-col-down  .mkt-col-icon   { background: rgba(255, 82, 82, .16); }
.mkt-col-inact .mkt-col-icon   { background: rgba(255, 179, 0, .16); }

.mkt-list { gap: .4rem; padding: .55rem; }

.mkt-empty {
  margin: 0;
  padding: 1.6rem .75rem;
  text-align: center;
  color: var(--gdt-text-lo);
  font-size: .78rem;
}

/* Grilla fija: puesto | foto | nombre | precios. Con flex, el ancho del
   nombre movia la columna de precios y ninguna tarjeta alineaba con la de
   arriba. */
.mkt-card {
  display: grid;
  grid-template-columns: 1.05rem 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: .55rem;
  padding: .45rem .6rem;
  background: var(--gdt-surface-2);
  border: 1px solid var(--gdt-border);
  border-left-width: 3px;
  border-radius: var(--gdt-r-md);
}
.mkt-card:hover {
  background: var(--gdt-surface-3);
  border-color: var(--gdt-border-hi);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3);
}
/* Despues del :hover, para que al pasar el mouse no se pierda el color de liga */
.mkt-card.tier-d1, .mkt-card.tier-d1:hover { border-left-color: var(--gdt-accent); }
.mkt-card.tier-d2, .mkt-card.tier-d2:hover { border-left-color: #a78bfa; }

.mkt-rank {
  font-size: .78rem;
  font-weight: 700;
  color: var(--gdt-text-lo);
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.mkt-list .mkt-card:first-child .mkt-rank { color: var(--gdt-text-hi); }

.mkt-foto-wrap {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--gdt-surface-3);
}
.mkt-foto, .mkt-foto-ph {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
.mkt-foto { object-fit: cover; }
.mkt-foto-ph {
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .85rem;
  color: var(--gdt-text-mid);
  background: var(--gdt-surface-3);
}

.mkt-info   { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mkt-nombre { font-size: .85rem; color: var(--gdt-text-hi); }
.mkt-meta   { gap: .35rem; }
.mkt-club   { font-size: .68rem; color: var(--gdt-text-mid); }

.mkt-precios       { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; flex-shrink: 0; }
.mkt-precio-actual { font-size: .95rem; font-weight: 700; color: var(--gdt-text-hi); font-variant-numeric: tabular-nums; }
.mkt-precio-ant    { font-size: .63rem; color: var(--gdt-text-lo); font-variant-numeric: tabular-nums; }

.mkt-inact {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: .62rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(255, 179, 0, .18);
  border: 1px solid rgba(255, 179, 0, .38);
  color: #ffc74d;
  white-space: nowrap;
}
.mkt-inact-ico { width: 9px; height: 9px; flex-shrink: 0; }

@media (max-width: 420px) {
  .mkt-card { grid-template-columns: .9rem 30px minmax(0, 1fr) auto; gap: .45rem; padding: .4rem .5rem; }
  .mkt-foto-wrap { width: 30px; height: 30px; }
  .mkt-nombre { font-size: .8rem; }
}

/* ══════════════════════════════════════════════════════════════════
   10. AYUDA
   ──────────────────────────────────────────────────────────────────
   Eran 15 apartados en una columna de 820px con el índice como una
   tira de chips arriba: apenas scrolleabas perdías la referencia de
   dónde estabas y para cambiar de tema había que volver al principio.
   Ahora el índice es una barra lateral fija que marca el apartado
   actual, y arriba tiene un buscador que filtra apartados y preguntas.
   ══════════════════════════════════════════════════════════════════ */
.ayuda-wrap { max-width: 1240px; padding: 1.5rem 1.25rem 4rem; }

.ayuda-hero {
  text-align: left;
  padding: 1rem 0 1.5rem;
  border-bottom: 1px solid var(--gdt-border);
  margin-bottom: 1.5rem;
}
.ayuda-titulo { font-size: 2.6rem; letter-spacing: .04em; color: var(--gdt-text-hi); }
.ayuda-sub    { color: var(--gdt-text-mid); font-size: .95rem; }

.ayuda-layout { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 1.6rem; align-items: start; }
.ayuda-side, .ayuda-main { min-width: 0; }

.ayuda-side { position: sticky; top: 76px; display: flex; flex-direction: column; gap: .6rem; }

.ayuda-buscador {
  display: flex; align-items: center; gap: .5rem;
  background: var(--gdt-surface-1);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-pill);
  padding: .45rem .85rem;
  transition: border-color .15s;
}
.ayuda-buscador:focus-within { border-color: var(--gdt-accent); }
.ayuda-buscador .gdt-ico { width: 14px; height: 14px; color: var(--gdt-text-lo); flex-shrink: 0; }
.ayuda-buscador input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  color: var(--gdt-text-hi);
  font-family: var(--font-body), sans-serif;
  font-size: .84rem;
}
.ayuda-buscador input::placeholder { color: var(--gdt-text-lo); }

.ayuda-indice {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--gdt-surface-1);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-lg);
  padding: .5rem;
  margin-bottom: 0;
  max-height: calc(100vh - 150px);
  overflow-y: auto;
  scrollbar-width: thin;
}
.ayuda-indice-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .42rem .6rem;
  border-radius: var(--gdt-r-sm);
  background: none;
  font-size: .82rem; font-weight: 600;
  color: var(--gdt-text-mid);
  white-space: normal;
  line-height: 1.25;
  transition: background .15s, color .15s;
}
.ayuda-indice-item span {
  flex-shrink: 0;
  width: 1.35rem; height: 1.35rem;
  display: grid; place-items: center;
  border-radius: 6px;
  background: var(--gdt-surface-3);
  color: var(--gdt-text-lo);
  font-family: var(--font-titulo), sans-serif;
  font-size: .82rem; line-height: 1;
  padding-top: 2px;
  transition: background .15s, color .15s;
}
.ayuda-indice-item:hover { background: var(--gdt-surface-2); color: var(--gdt-text-hi); }
.ayuda-indice-item.activo { background: var(--gdt-accent-soft); color: var(--gdt-accent-hi); }
.ayuda-indice-item.activo span { background: var(--gdt-accent); color: #04140a; }
.ayuda-indice-item.oculto { display: none; }

.ayuda-sin-resultados {
  display: none;
  margin: 0 0 1rem;
  padding: 1.6rem;
  text-align: center;
  color: var(--gdt-text-lo);
  font-size: .88rem;
  background: var(--gdt-surface-1);
  border: 1px dashed var(--gdt-border);
  border-radius: var(--gdt-r-lg);
}

/* Cada apartado es una tarjeta: se distinguen entre sí sin depender
   solo del espacio en blanco. */
.ayuda-seccion {
  background: var(--gdt-surface-1);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-lg);
  padding: 1.25rem 1.5rem 1.5rem;
  margin-bottom: .9rem;
  scroll-margin-top: 86px;
}
.ayuda-seccion-header { border-bottom: 1px solid var(--gdt-border); padding-bottom: .6rem; }
.ayuda-num {
  border-radius: 9px;
  font-size: 1.05rem;
  padding-top: 3px;
  box-shadow: 0 0 0 1px rgba(0, 224, 90, .25);
}
.ayuda-seccion-header h2 { font-size: 1.4rem; color: var(--gdt-text-hi); }
.ayuda-contenido p { color: var(--gdt-text); }
.ayuda-h3 { color: var(--gdt-text-hi); }

.ayuda-tip {
  background: rgba(27, 142, 250, .08);
  border: 1px solid rgba(27, 142, 250, .28);
  border-left: 3px solid rgba(27, 142, 250, .6);
  border-radius: var(--gdt-r-md);
  color: var(--gdt-text);
}
.ayuda-tip-icon .gdt-ico { width: 14px; height: 14px; color: #7cb8fb; }

.ayuda-ejemplo {
  background: var(--gdt-surface-2);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-md);
}
.ayuda-ejemplo-label { color: var(--gdt-accent-hi); }

.ayuda-tabla-wrap {
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-md);
  /* overflow-x: auto, NO hidden. Estas tablas son más anchas que un
     teléfono y tienen que poder scrollearse al costado; con hidden las
     últimas columnas quedaban cortadas sin forma de llegar a ellas. */
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}
.ayuda-tabla { min-width: 320px; }
.ayuda-tabla thead tr { background: var(--gdt-surface-2); }
.ayuda-tabla th { color: var(--gdt-text-lo); letter-spacing: .06em; }
.ayuda-tabla td { color: var(--gdt-text); border-bottom-color: var(--gdt-border); }
.ayuda-tabla tbody tr:hover { background: var(--gdt-surface-2); }

.ayuda-liga-card {
  background: var(--gdt-surface-2);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-md);
}
.ayuda-form-item { background: var(--gdt-surface-2); border: 1px solid var(--gdt-border); border-radius: var(--gdt-r-md); }

/* Preguntas frecuentes */
.ayuda-faq { border-top: none; padding-top: 1.25rem; margin-top: 0; }
.faq-item {
  background: var(--gdt-surface-2);
  border: 1px solid var(--gdt-border);
  border-radius: var(--gdt-r-md);
  overflow: hidden;
}
.faq-pregunta {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  color: var(--gdt-text-hi);
}
.faq-pregunta:hover { background: var(--gdt-surface-3); }
.faq-chevron { display: flex; color: var(--gdt-accent); flex-shrink: 0; }
.faq-chevron .gdt-ico { width: 12px; height: 12px; transition: transform .2s; }
.faq-item.open .faq-chevron .gdt-ico { transform: rotate(90deg); }
.faq-respuesta { color: var(--gdt-text); border-top: 1px solid var(--gdt-border); }

.ayuda-badge-v, .ayuda-badge-p { border-radius: 5px; }

@media (max-width: 980px) {
  /* minmax(0,1fr) y no 1fr: si no, las columnas se dimensionan al
     contenido más ancho y el índice horizontal estiraba la página
     14px más allá de la pantalla. */
  .ayuda-layout { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
  .ayuda-side, .ayuda-main { min-width: 0; }
  .ayuda-side { position: sticky; top: 60px; z-index: 5; background: var(--gdt-bg); padding: .5rem 0; }
  .ayuda-indice {
    flex-direction: row; overflow-x: auto; max-height: none;
    gap: 4px; scrollbar-width: none;
  }
  .ayuda-indice::-webkit-scrollbar { display: none; }
  .ayuda-indice-item { white-space: nowrap; flex-shrink: 0; }
}
@media (max-width: 640px) {
  .ayuda-wrap { padding: 1rem .9rem 3rem; }
  .ayuda-titulo { font-size: 1.9rem; }
  .ayuda-seccion { padding: 1rem 1rem 1.15rem; }
  .ayuda-seccion-header h2 { font-size: 1.15rem; }
  .ayuda-tabla { font-size: .82rem; }
  .ayuda-tabla th, .ayuda-tabla td { padding: .4rem .6rem; }
  .ayuda-tip, .faq-pregunta, .faq-respuesta { font-size: .83rem; }
  .ayuda-ligas-grid { grid-template-columns: 1fr; }
}

/* ══════════════════════════════════════════════════════════════════
   11. CELULAR — correcciones medidas en un navegador real
   ──────────────────────────────────────────────────────────────────
   Esto NO es diseño: son arreglos de cosas que se rompen o molestan
   en un teléfono, encontradas midiendo el layout a 390px y 360px con
   Chrome, no a ojo.

   Va con !important a propósito: varias páginas definen su <style>
   DESPUÉS de theme.css (los que están dentro de {% block content %}),
   así que en un empate de especificidad ganarían ellas.
   ══════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── 1. El zoom de iPhone ──────────────────────────────────────
     Safari en iOS hace zoom a TODA la página cuando tocás un campo
     de texto con letra de menos de 16px, y después no vuelve solo:
     hay que hacer pellizco para salir. Pasaba en los 17 campos del
     sitio (buscadores, filtros, formularios). 16px lo evita. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important;
  }
  /* Excepción: el selector de rol vive dentro de la carta del jugador, que
     mide 88px. Con 16px no entraba ni "Defensor" y quedaba "Defen" cortado
     sin puntos suspensivos. Va más chico y con "…" cuando no entra: al
     tocarlo, iOS y Android abren igual la lista completa. */
  .slot-rol-sel {
    font-size: 12px !important;
    text-overflow: ellipsis;
  }

  /* ── 2. Objetivos táctiles ────────────────────────────────────
     Varios botones medían 18–27px de alto. Con el dedo eso se falla.
     El mínimo cómodo es ~34px. */
  .btn-nav-logout { width: 34px !important; height: 34px !important; }

  .btn-sm,
  .adm-doc-tog,
  .hof-btn-mini,
  .meq-chip,
  .prf2-chip,
  .perfil-link-ext,
  .adm-ayuda-toggle,
  .ayuda-indice-item,
  .pager-btn,
  .liga-tab,
  .prf2-liga-tab,
  .mkt-col-tab,
  .faq-pregunta {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
  }
  .faq-pregunta { display: flex; }
  .ayuda-indice-item { display: flex; }

  .hof-btn-quitar { width: 34px !important; height: 34px !important; }

  /* Las casillas de tildar son diminutas por defecto */
  input[type="checkbox"], input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    flex-shrink: 0;
  }

  /* ── 3. Texto demasiado chico para leer ───────────────────────
     Se suben solo los que son información de la interfaz. Los que
     viven dentro de la carta del jugador se dejan: esa carta tiene
     una proporción fija y agrandarle la letra la desarma. */
  .fg-cell-name, .fg-cell-club { font-size: 10.5px !important; }
  .fg-cell-auto-tag            { font-size: 9.5px  !important; }
  .slot-card-nombre            { font-size: 10.5px !important; }
  .slot-card-precio,
  .slot-card-pos               { font-size: 9.5px  !important; }
  .res-score-label             { font-size: 10px   !important; }
  .res-eqf-pos, .res-eqf-bonus { font-size: 9.5px  !important; }
  .res-temp-badge              { font-size: 9.5px  !important; }
  .pr-lbl                      { font-size: 9.8px  !important; }
  .adm-riesgo                  { font-size: 9.8px  !important; }
  .logro-desc,
  .logros-tier-cuenta          { font-size: 10px   !important; }
  .gi-tag-mini                 { font-size: 10px   !important; }
}

/* ── 11b. Últimos detalles de celular, todos medidos ────────────── */
@media (max-width: 768px) {
  /* Botones que seguían por debajo del mínimo cómodo */
  #fg-btn-rendirse {
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
  }
  .gdt-datebar a { min-height: 34px; display: inline-flex; align-items: center; }

  /* Campos cuya caja seguía midiendo 21px de alto aunque la letra ya
     fuera de 16px: el alto lo fijaba el padding de la página. */
  .campo-input, #ayuda-q, .hof-input, .input-admin, .input-buscar, .input-sort {
    min-height: 34px;
  }
  .ayuda-buscador { padding: .3rem .85rem; }

  /* HUECO GRANDE EN LOS FILTROS DE JUGADORES:
     .explorer-search-wrap tiene "flex: 1 1 220px". En escritorio la fila
     va en horizontal y ese 220px es un ancho. En celular la fila pasa a
     columna (style.css) y entonces el mismo 220px se convierte en ALTO:
     el buscador quedaba dentro de una caja de 220px de alto con el campo
     flotando en el medio, y lo mismo el bloque de posición. Eran dos
     agujeros negros de 200px en medio de los filtros. */
  .explorer-search-wrap,
  .explorer-sort-wrap,
  .ex-tool {
    flex: 0 0 auto;
    min-height: 0;
  }

  /* El selector de temporada del perfil se pasaba 6px de la pantalla al
     agrandarle la letra a 16px. */
  .pf-cohorte-sel {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* La casilla de tildar es chica por naturaleza: lo que se agranda es
     la etiqueta entera, que es lo que uno toca. */
  .filtro-disponibles-label {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: 0 .35rem;
  }

  /* Nombres de equipo en Resultados: entraban 11 caracteres y el resto
     se perdía ("ESCUDEROS DE LA …"). En dos renglones entran enteros. */
  .res-team-name {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.2;
  }
}

/* ── Jugadores que no juegan esta temporada ─────────────────── */
/* Se muestran en gris y no se pueden elegir. No se los saca de la
   lista a proposito: si desaparecieran de golpe, el DT que los tiene
   en su equipo no entenderia que paso. */
.jug-item.jug-inactivo { cursor: not-allowed; }
.jug-item.jug-inactivo:hover { transform: none; }
.jug-inactivo-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #ffb4b4;
  background: rgba(229, 57, 53, .16);
  border: 1px solid rgba(229, 57, 53, .35);
  white-space: nowrap;
}
@media (max-width: 768px) {
  .jug-inactivo-tag { font-size: 9px; padding: 1px 5px; margin-left: 4px; }
}