/* ═══════════════════════════════════════════
   Gran DT — IOSoccer SA  |  Estilos globales
   ═══════════════════════════════════════════ */

:root {
  --verde:     #00c853;
  --verde-osc: #009624;
  --negro:     #0a0a0a;
  --gris-1:    #111111;
  --gris-2:    #1a1a1a;
  --gris-3:    #2a2a2a;
  --gris-4:    #444444;
  --blanco:    #f0f0f0;
  --texto:     #cccccc;

  --legendary: #ffd700;
  --epic:      #c77dff;
  --rare:      #48cae4;
  --common:    #adb5bd;

  --font-titulo: 'Bebas Neue', sans-serif;
  --font-body:   'DM Sans', sans-serif;

  --radio: 8px;
  --sombra: 0 4px 24px rgba(0,0,0,0.5);
}

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

html { scroll-behavior: smooth; }

body {
  background: var(--negro);
  color: var(--texto);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }

/* ── NAVBAR ─────────────────────────────────────── */

.navbar {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0 2rem;
  height: 60px;
  background: var(--gris-1);
  border-bottom: 2px solid var(--verde);
  position: sticky; top: 0; z-index: 100;
}

.nav-logo {
  font-family: var(--font-titulo);
  font-size: 1.8rem;
  letter-spacing: 2px;
  color: var(--blanco);
}
.nav-logo span { color: var(--verde); }

.nav-links { display: flex; gap: 1.5rem; flex: 1; }
.nav-links a {
  font-size: 0.85rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
  color: var(--gris-4);
  transition: color .2s, border-color .2s;
}
.nav-links a:hover, .nav-links a.active {
  color: var(--verde);
  border-color: var(--verde);
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--gris-2);
  border: 1px solid var(--gris-3);
  border-radius: 20px;
  padding: 5px 8px 5px 12px;
  font-size: 0.78rem;
  margin-left: auto;
}
.nav-dt-label {
  color: var(--gris-4);
  font-size: 0.7rem;
  font-weight: 400;
  flex-shrink: 0;
}
#nav-nombre {
  color: var(--verde);
  font-weight: 600;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── BOTONES ─────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 22px;
  border-radius: var(--radio);
  font-family: var(--font-body);
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: none;
  transition: all .2s;
}
.btn-primary {
  background: var(--verde);
  color: var(--negro);
}
.btn-primary:hover { background: var(--verde-osc); }
.btn-ghost {
  background: transparent;
  border: 1.5px solid var(--gris-3);
  color: var(--texto);
}
.btn-ghost:hover { border-color: var(--verde); color: var(--verde); }
.btn-azar {
  background: transparent;
  border: 1.5px solid #9c6eff;
  color: #9c6eff;
}
.btn-azar:hover { background: rgba(156,110,255,.15); border-color: #b48fff; color: #b48fff; }

/* ── HERO ────────────────────────────────────────── */

.hero {
  text-align: center;
  padding: 80px 2rem 60px;
}
.hero-badge {
  display: inline-block;
  background: var(--gris-2);
  border: 1px solid var(--gris-3);
  color: var(--verde);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 20px;
  margin-bottom: 1.5rem;
}
.hero-title {
  font-family: var(--font-titulo);
  font-size: clamp(5rem, 15vw, 10rem);
  line-height: 0.9;
  color: var(--blanco);
  letter-spacing: 4px;
}
.hero-title span { color: var(--verde); }
.hero-sub {
  margin: 1.5rem auto;
  max-width: 500px;
  color: var(--gris-4);
  font-size: 1rem;
}
.hero-actions { display: flex; gap: 1rem; justify-content: center; margin-top: 2rem; }

/* ── HOME STATS ──────────────────────────────────── */

.home-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  max-width: 900px;
  margin: 0 auto 4rem;
  padding: 0 2rem;
}
.stat-card {
  background: var(--gris-2);
  border: 1px solid var(--gris-3);
  border-radius: var(--radio);
  padding: 2rem;
  text-align: center;
}
.stat-num {
  font-family: var(--font-titulo);
  font-size: 3rem;
  color: var(--verde);
}
.stat-label { font-size: 0.8rem; color: var(--gris-4); margin-top: 4px; }

/* ── RAREZA ──────────────────────────────────────── */

.home-rarity {
  max-width: 900px;
  margin: 0 auto 4rem;
  padding: 0 2rem;
}
.section-title {
  font-family: var(--font-titulo);
  font-size: 2rem;
  color: var(--blanco);
  letter-spacing: 2px;
  margin-bottom: 1.5rem;
}
.rarity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}
.rarity-card {
  background: var(--gris-2);
  border-radius: var(--radio);
  padding: 1.5rem;
  text-align: center;
  border-top: 3px solid;
}
.rarity-card.legendary { border-color: var(--legendary); }
.rarity-card.epic      { border-color: var(--epic); }
.rarity-card.rare      { border-color: var(--rare); }
.rarity-card.common    { border-color: var(--common); }

.rarity-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.rarity-card.legendary .rarity-icon { color: var(--legendary); }
.rarity-card.epic      .rarity-icon { color: var(--epic); }
.rarity-card.rare      .rarity-icon { color: var(--rare); }
.rarity-card.common    .rarity-icon { color: var(--common); }

.rarity-name { font-weight: 600; color: var(--blanco); }
.rarity-desc { font-size: 0.8rem; color: var(--gris-4); margin-top: 4px; }

/* ── SELECTOR DE FORMACIÓN ───────────────────────── */

.formacion-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.formacion-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gris-4);
  white-space: nowrap;
}
.formacion-btns { display: flex; gap: 0.4rem; }
.formacion-btn {
  background: var(--gris-2);
  border: 1.5px solid var(--gris-3);
  border-radius: 6px;
  padding: 5px 14px;
  color: var(--texto);
  font-family: var(--font-titulo);
  font-size: 1rem;
  letter-spacing: 1px;
  cursor: pointer;
  transition: all .2s;
}
.formacion-btn:hover { border-color: var(--verde); color: var(--verde); }
.formacion-btn.active {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--negro);
}

/* ── BADGES DE POSICIÓN ──────────────────────────── */

.pos-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-right: 4px;
  vertical-align: middle;
}
.pos-badge.FWD { background: rgba(255,107,53,0.2); color: #ff6b35; }
.pos-badge.MID { background: rgba(0,200,83,0.15);  color: var(--verde); }
.pos-badge.DEF { background: rgba(72,202,228,0.15); color: var(--rare); }
.pos-badge.GK  { background: rgba(255,215,0,0.15);  color: var(--legendary); }

/* ── SLOT VACÍO ──────────────────────────────────── */
/* .slot-vacio — dimensiones controladas por armar_equipo.html con !important */
.slot-vacio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: rgba(255,255,255,0.25);
  font-size: 1rem;
}
.slot-vacio small { font-size: 0.6rem; }

/* ── MODAL POS SELECTOR ──────────────────────────── */
.modal-pos-selector {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.modal-pos-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.modal-pos-label {
  font-size: 0.75rem;
  color: var(--gris-4);
  white-space: nowrap;
  min-width: 80px;
}

/* ── BUILDER LAYOUT ──────────────────────────────── */

.builder-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 1.5rem;
  padding: 1.5rem 2rem;
  min-height: calc(100vh - 60px);
  max-width: 1200px;
  margin: 0 auto;
}

/* ── PANEL CANCHA ────────────────────────────────── */

.panel-cancha {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.presupuesto-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 0.85rem;
}
.presupuesto-track {
  flex: 1;
  height: 6px;
  background: var(--gris-3);
  border-radius: 3px;
  overflow: hidden;
}
.presupuesto-fill {
  height: 100%;
  background: var(--verde);
  border-radius: 3px;
  width: 0%;
  transition: width .3s, background .3s;
}
.presupuesto-fill.peligro { background: #ff6b35; }

.cancha {
  background:
    repeating-linear-gradient(0deg, transparent, transparent 60px, rgba(255,255,255,0.03) 60px, rgba(255,255,255,0.03) 61px),
    linear-gradient(180deg, #0d2b0d 0%, #0a1f0a 100%);
  border: 2px solid #1a3d1a;
  border-radius: 12px;
  padding: 2rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  flex: 1;
  position: relative;
}
.cancha::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 120px; height: 120px;
  border: 1.5px solid rgba(255,255,255,0.06);
  border-radius: 50%;
}

.cancha-fila {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: nowrap;  /* sin wrap: las cartas van en una sola fila */
}

/* ── SLOTS ───────────────────────────────────────── */

/* .slot no fuerza tamaño fijo — la carta interna define el tamaño */
.slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: all .2s;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.3);
}
.slot:not(.ocupado):hover { color: var(--verde); }
.slot.ocupado { border: none !important; background: none !important; padding: 0 !important; cursor: default; }
/* X vieja eliminada — ahora se usa .slot-card-remove en builder.js */

.slot-mini {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  padding: 6px 4px;
  text-align: center;
  cursor: pointer;
}
.slot-mini.legendary { background: linear-gradient(135deg, #2d2000, #1a1a00); border: 1px solid var(--legendary); }
.slot-mini.epic      { background: linear-gradient(135deg, #1e0d2e, #110820); border: 1px solid var(--epic); }
.slot-mini.rare      { background: linear-gradient(135deg, #001f2d, #001218); border: 1px solid var(--rare); }
.slot-mini.common    { background: var(--gris-2); border: 1px solid var(--gris-3); }

.slot-rating {
  font-family: var(--font-titulo);
  font-size: 1.4rem;
  line-height: 1;
}
.slot-mini.legendary .slot-rating { color: var(--legendary); }
.slot-mini.epic      .slot-rating { color: var(--epic); }
.slot-mini.rare      .slot-rating { color: var(--rare); }
.slot-mini.common    .slot-rating { color: var(--common); }

.slot-foto {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  margin: 1px 0;
  border: 1.5px solid rgba(255,255,255,0.15);
}
.slot-pos    { font-size: 0.6rem; font-weight: 700; color: rgba(255,255,255,0.4); }
.slot-name   { font-size: 0.65rem; font-weight: 600; color: var(--blanco); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 82px; }
.slot-team   { font-size: 0.55rem; color: var(--gris-4); }
.slot-precio { font-size: 0.62rem; font-weight: 700; margin-top: 1px; }

/* ── BANCO ───────────────────────────────────────── */

.banca-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.1);
  border-radius: var(--radio);
}

.banca-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.banca-slots {
  display: flex;
  gap: 0.75rem;
  flex: 1;
  justify-content: center;
}

/* Slots en el banco: misma estructura que .slot pero horizontal */
.sup-slot {
  width: 90px;
  height: 115px;
  border-radius: var(--radio);
  border: 1.5px dashed rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  color: rgba(255,255,255,0.3);
  transition: border-color 0.15s, color 0.15s;
}
.sup-slot:hover       { border-color: var(--verde); color: var(--verde); }
.sup-slot.ocupado     { border-style: solid; border-color: transparent; padding: 0; }
.sup-slot.picking     {
  border-color: var(--verde);
  box-shadow: 0 0 0 2px rgba(0,200,83,0.3);
  animation: pulse-pick 1s infinite alternate;
}
/* X vieja eliminada — ahora se usa .slot-card-remove en builder.js */

@keyframes pulse-pick {
  from { box-shadow: 0 0 0 2px rgba(0,200,83,0.2); }
  to   { box-shadow: 0 0 0 4px rgba(0,200,83,0.45); }
}

/* ── CAPITÁN ─────────────────────────────────────── */

/* .cap-btn legacy eliminado — reemplazado por .role-btn en armar_equipo.html */

/* Modo picking suplente: highlight items de la lista */
.sup-picking-mode { cursor: pointer; }
.sup-picking-mode:hover { border-color: var(--verde) !important; }

.cancha-actions { display: flex; gap: 1rem; }
.guardar-msg { font-size: 0.85rem; padding: 4px 0; }
.guardar-msg.ok    { color: var(--verde); }
.guardar-msg.error { color: #ff6b35; }
.guardar-msg.info  { color: #48cae4; }

/* ── PANEL LISTA ──────────────────────────────────── */

.panel-lista {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  height: calc(100vh - 100px);
  position: sticky;
  top: 70px;
}

.lista-filtros { display: flex; flex-direction: column; gap: 0.5rem; }

.input-buscar {
  background: var(--gris-2);
  border: 1.5px solid var(--gris-4);
  border-radius: var(--radio);
  padding: 10px 14px;
  color: var(--blanco);
  font-family: var(--font-body);
  font-size: 0.85rem;
  width: 100%;
  outline: none;
  transition: border-color .2s;
}
.input-buscar:focus { border-color: var(--verde); }

.filtros-pos { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.filtro-btn {
  background: var(--gris-2);
  border: 1.5px solid var(--gris-3);
  border-radius: 20px;
  padding: 4px 14px;
  color: var(--texto);
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.filtro-btn:hover, .filtro-btn.active {
  background: var(--verde);
  border-color: var(--verde);
  color: var(--negro);
}

.lista-jugadores {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-right: 4px;
}
.lista-jugadores::-webkit-scrollbar { width: 4px; }
.lista-jugadores::-webkit-scrollbar-thumb { background: var(--gris-3); border-radius: 2px; }

/* ── JUGADOR ITEM (lista) ────────────────────────── */

.jug-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--gris-2);
  border: 1px solid var(--gris-3);
  border-radius: var(--radio);
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  transition: all .15s;
  border-left: 3px solid transparent;
  position: relative;
}
.jug-item:hover { border-color: var(--verde); background: var(--gris-3); }
.jug-item.legendary { border-left-color: var(--legendary); }
.jug-item.epic      { border-left-color: var(--epic); }
.jug-item.rare      { border-left-color: var(--rare); }
.jug-item.common    { border-left-color: var(--gris-4); }
.jug-item.ya-en-equipo { pointer-events: none; }
.jug-item.ya-en-equipo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  border-radius: var(--radio);
  pointer-events: none;
}
.jug-item.ya-en-equipo::after {
  content: "✓ Ya en equipo";
  position: absolute;
  bottom: 5px;
  right: 7px;
  font-size: 0.6rem;
  color: #4caf50;
  font-weight: 700;
  letter-spacing: 0.04em;
  pointer-events: none;
}

.jug-rating {
  font-family: var(--font-titulo);
  font-size: 1.4rem;
  min-width: 36px;
  text-align: center;
}
.jug-item.legendary .jug-rating { color: var(--legendary); }
.jug-item.epic      .jug-rating { color: var(--epic); }
.jug-item.rare      .jug-rating { color: var(--rare); }
.jug-item.common    .jug-rating { color: var(--common); }

.jug-info { flex: 1; min-width: 0; }
.jug-nombre { font-weight: 600; color: var(--blanco); font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jug-meta   { font-size: 0.72rem; color: var(--gris-4); }

.jug-precio { font-size: 0.8rem; font-weight: 700; white-space: nowrap; }
.liga-precio-d1 { color: #ff9800; }
.liga-precio-d2 { color: #42a5f5; }

/* ── FOTO JUGADOR (lista) ────────────────────────── */

.jug-foto {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--gris-3);
}
.jug-item.legendary .jug-foto { border-color: rgba(255,215,0,0.6); }
.jug-item.epic      .jug-foto { border-color: rgba(199,125,255,0.6); }
.jug-item.rare      .jug-foto { border-color: rgba(72,202,228,0.6); }

/* ── ESCUDO (lista) ──────────────────────────────── */

.jug-escudo {
  width: 13px;
  height: 13px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 3px;
}

/* ── LIGA BADGE ──────────────────────────────────── */

.liga-badge {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border-radius: 3px;
  margin-right: 4px;
  vertical-align: middle;
}
.liga-d1 { background: rgba(0,200,83,0.18);  color: var(--verde); }
.liga-d2 { background: rgba(72,202,228,0.15); color: var(--rare); }

/* ── MODAL ───────────────────────────────────────── */

.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.8);
  z-index: 200;
  align-items: center;
  justify-content: center;
}
.modal-overlay.visible { display: flex; }
.modal-card {
  background: var(--gris-1);
  border: 1px solid var(--gris-3);
  border-radius: 12px;
  padding: 2rem;
  max-width: 420px;
  width: 90%;
  position: relative;
  box-shadow: var(--sombra);
}
.modal-close {
  position: absolute; top: 12px; right: 14px;
  background: none; border: none;
  color: var(--gris-4); font-size: 1rem;
  cursor: pointer;
}
.modal-close:hover { color: var(--blanco); }

.modal-jugador { text-align: center; }

/* ── FOTO MODAL ──────────────────────────────────── */

.modal-foto {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 0.75rem;
  border: 3px solid var(--gris-3);
}
.modal-jugador.legendary .modal-foto { border-color: var(--legendary); }
.modal-jugador.epic      .modal-foto { border-color: var(--epic); }
.modal-jugador.rare      .modal-foto { border-color: var(--rare); }
.modal-jugador.common    .modal-foto { border-color: var(--common); }

/* ── ESCUDO MODAL ────────────────────────────────── */

.modal-escudo {
  width: 18px;
  height: 18px;
  object-fit: contain;
  vertical-align: middle;
  margin-right: 4px;
}

.modal-rating {
  font-family: var(--font-titulo);
  font-size: 5rem;
  line-height: 1;
}
.modal-jugador.legendary .modal-rating { color: var(--legendary); }
.modal-jugador.epic      .modal-rating { color: var(--epic); }
.modal-jugador.rare      .modal-rating { color: var(--rare); }
.modal-jugador.common    .modal-rating { color: var(--common); }

.modal-nombre { font-size: 1.3rem; font-weight: 700; color: var(--blanco); margin: 0.5rem 0 0.2rem; }
.modal-meta   { font-size: 0.8rem; color: var(--gris-4); margin-bottom: 1.5rem; }

.modal-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  text-align: left;
}
.modal-stat { background: var(--gris-2); border-radius: 6px; padding: 0.5rem 0.75rem; }
.modal-stat-val { font-weight: 700; color: var(--blanco); }
.modal-stat-key { font-size: 0.7rem; color: var(--gris-4); }

.modal-precio { font-size: 1.1rem; color: var(--verde); font-weight: 700; margin-bottom: 1rem; }

.modal-actions { display: flex; gap: 0.5rem; justify-content: center; }
.slot-select {
  background: var(--gris-2);
  border: 1.5px solid var(--gris-3);
  border-radius: var(--radio);
  padding: 8px 12px;
  color: var(--blanco);
  font-family: var(--font-body);
  font-size: 0.85rem;
  flex: 1;
}

/* ── PÁGINA GENÉRICA ─────────────────────────────── */

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2rem 2rem 1rem;
  max-width: 900px;
  margin: 0 auto;
}
.page-header h1 {
  font-family: var(--font-titulo);
  font-size: 2.5rem;
  color: var(--blanco);
  letter-spacing: 2px;
}

/* ── MI EQUIPO ───────────────────────────────────── */

.equipo-info {
  display: flex;
  gap: 2rem;
  padding: 1rem 2rem;
  background: var(--gris-2);
  border-bottom: 1px solid var(--gris-3);
  font-size: 0.85rem;
  max-width: 900px;
  margin: 0 auto 2rem;
  border-radius: var(--radio);
}
.equipo-cancha {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.equipo-fila { }
.equipo-fila-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--gris-4);
  margin-bottom: 0.75rem;
}
.equipo-fila-cards { display: flex; gap: 1rem; flex-wrap: wrap; }

.player-card-mini {
  background: var(--gris-2);
  border-radius: 10px;
  padding: 1.25rem 1rem;
  text-align: center;
  min-width: 110px;
  border-top: 3px solid;
}
.player-card-mini.legendary { border-color: var(--legendary); }
.player-card-mini.epic      { border-color: var(--epic); }
.player-card-mini.rare      { border-color: var(--rare); }
.player-card-mini.common    { border-color: var(--common); }

.pcm-rating {
  font-family: var(--font-titulo);
  font-size: 2.5rem;
  line-height: 1;
}
.player-card-mini.legendary .pcm-rating { color: var(--legendary); }
.player-card-mini.epic      .pcm-rating { color: var(--epic); }
.player-card-mini.rare      .pcm-rating { color: var(--rare); }
.player-card-mini.common    .pcm-rating { color: var(--common); }

.pcm-pos   { font-size: 0.65rem; font-weight: 700; color: var(--gris-4); margin: 2px 0; }
.pcm-name  { font-size: 0.8rem; font-weight: 700; color: var(--blanco); }
.pcm-team  { font-size: 0.7rem; color: var(--gris-4); }
.pcm-precio { font-size: 0.8rem; color: var(--verde); font-weight: 700; margin-top: 4px; }
.pcm-rarity { font-size: 0.65rem; color: var(--gris-4); }

/* ── RANKING ─────────────────────────────────────── */

.ranking-table {
  width: 100%;
  max-width: 700px;
  margin: 0 auto;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.ranking-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gris-4);
  border-bottom: 1px solid var(--gris-3);
}
.ranking-table td {
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--gris-2);
}
.ranking-table tr:hover td { background: var(--gris-2); }
.ranking-table tr.top-1 td { background: rgba(255,215,0,0.05); }
.ranking-table tr.top-2 td { background: rgba(192,192,192,0.05); }
.ranking-table tr.top-3 td { background: rgba(205,127,50,0.05); }

.rank-pos    { font-size: 1.2rem; }
.rank-nombre { font-weight: 600; color: var(--blanco); }
.rank-puntos { font-weight: 700; color: var(--verde); }

/* ── UTILITARIOS ─────────────────────────────────── */

.loading {
  text-align: center;
  padding: 3rem;
  color: var(--gris-4);
  font-size: 0.9rem;
}
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  color: var(--gris-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

/* ── NOMBRE DEL CLUB (armar equipo) ──────────────── */

/* ── LIGA TABS ───────────────────────────────────────── */

.liga-tabs-bar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.liga-tab {
  padding: 7px 20px;
  border-radius: 6px;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  cursor: pointer;
  border: 2px solid var(--gris-3);
  background: transparent;
  color: var(--gris-4);
  transition: all .2s;
  text-transform: uppercase;
}
.liga-tab:hover { border-color: var(--gris-4); color: var(--texto); }
.liga-tab.active {
  background: var(--gris-2);
  border-color: var(--verde);
  color: var(--blanco);
}
.liga-tab.tiene-equipo::after {
  content: " ✓";
  color: var(--verde);
  font-size: 0.85em;
}
.liga-tabs-hint {
  font-size: 0.7rem;
  color: var(--gris-4);
  margin-left: 0.5rem;
}

/* ── FECHA ACTIVA BANNER ─────────────────────────────── */

.fecha-activa-banner {
  background: rgba(255, 152, 0, 0.1);
  border: 1px solid rgba(255, 152, 0, 0.4);
  border-radius: var(--radio);
  padding: 0.7rem 1rem;
  font-size: 0.82rem;
  color: #ff9800;
  font-weight: 600;
  margin-bottom: 0.75rem;
}

/* ── CAMPO INPUTS (DT nick + club nombre) ────────────── */

.campo-wrap {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 1rem;
  background: var(--gris-2);
  border-radius: var(--radio);
  margin-bottom: 0.6rem;
  border: 1px solid var(--gris-3);
}
.campo-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  color: var(--blanco);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
}
.campo-input::placeholder { color: var(--gris-4); font-weight: 400; }
.campo-estado {
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}
.campo-estado.ok    { color: var(--verde); }
.campo-estado.error { color: #ff5252; }

/* ── MI EQUIPO ────────────────────────────────────── */

/* Header */
.meq-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--gris-2);
  border-radius: var(--radio);
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.25rem;
  border-left: 4px solid var(--verde);
}
.meq-club-nombre {
  font-family: var(--font-titulo);
  font-size: 2rem;
  color: var(--blanco);
  letter-spacing: 1px;
  line-height: 1.1;
}
.meq-club-meta {
  font-size: 0.75rem;
  color: var(--gris-4);
  margin-top: 4px;
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  align-items: center;
}
.meq-sep { opacity: 0.35; }
.meq-pts-box { text-align: right; flex-shrink: 0; }
.meq-pts-num {
  font-family: var(--font-titulo);
  font-size: 3rem;
  color: var(--verde);
  line-height: 1;
}
.meq-pts-label { font-size: 0.65rem; color: var(--gris-4); text-transform: uppercase; letter-spacing: 1px; margin-top: 2px; }

/* Fechas grid */
.meq-fechas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.meq-fecha-card {
  background: var(--gris-2);
  border-radius: var(--radio);
  padding: 0.9rem 1rem;
  border: 1px solid var(--gris-3);
}
.meq-fecha-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}
.meq-fecha-label { font-size: 0.8rem; font-weight: 700; color: var(--blanco); }
.meq-fecha-pts   { font-size: 1.1rem; font-weight: 700; color: var(--verde); }
.meq-fecha-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.meq-chip {
  font-size: 0.7rem;
  background: var(--gris-3);
  border-radius: 4px;
  padding: 2px 7px;
  color: var(--texto);
  white-space: nowrap;
}
.meq-chip.pos b { color: var(--verde); }
.meq-chip.neg b { color: #ff5252; }

.meq-sin-fechas {
  font-size: 0.82rem;
  color: var(--gris-4);
  background: var(--gris-2);
  border-radius: var(--radio);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.5rem;
  border: 1px dashed var(--gris-3);
}

/* Campo */
.meq-campo {
  background: linear-gradient(160deg, #132613 0%, #1b3d1b 50%, #132613 100%);
  border-radius: 14px;
  padding: 1.75rem 1.5rem;
  border: 1px solid rgba(0, 200, 83, 0.12);
  margin-top: 0.5rem;
}
.meq-campo-inner {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 860px;
  margin: 0 auto;
}

/* Filas del campo */
.meq-fila {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.meq-fila-label {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: rgba(255,255,255,0.3);
}
.meq-fila-cards {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

/* Tarjeta jugador */
.meq-card {
  background: rgba(10, 10, 10, 0.88);
  border-radius: 10px;
  width: 90px;
  flex-shrink: 0;
  border-top: 3px solid var(--common);
  overflow: hidden;
  text-align: center;
}
.meq-card.legendary { border-top-color: var(--legendary); }
.meq-card.epic      { border-top-color: var(--epic); }
.meq-card.rare      { border-top-color: var(--rare); }
.meq-card.common    { border-top-color: var(--common); }

.meq-card-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0.6rem 0.5rem 0.3rem;
}
.meq-foto {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.meq-foto-placeholder {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gris-3);
  flex-shrink: 0;
}
.meq-rating {
  font-family: var(--font-titulo);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--blanco);
}
.meq-card.legendary .meq-rating { color: var(--legendary); }
.meq-card.epic      .meq-rating { color: var(--epic); }
.meq-card.rare      .meq-rating { color: var(--rare); }
.meq-card.common    .meq-rating { color: var(--common); }

.meq-card-body { padding: 0 0.5rem 0.7rem; }
.meq-pos-badge {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--gris-4);
  text-transform: uppercase;
  margin-bottom: 2px;
}
.meq-name  { font-size: 0.72rem; font-weight: 700; color: var(--blanco); line-height: 1.2; }
.meq-team  { font-size: 0.63rem; color: var(--gris-4); margin-top: 2px; }
.meq-escudo { width: 11px; height: 11px; object-fit: contain; vertical-align: middle; margin-right: 2px; }
.meq-precio { font-size: 0.7rem; color: var(--verde); font-weight: 700; margin-top: 4px; }

/* ── RANKING EXTENDIDO ───────────────────────────── */

.ranking-table { max-width: 100%; }

.col-pos   { width: 40px; }
.col-dt    { color: var(--gris-4); font-size: 0.8rem; }
.rank-club { font-size: 0.95rem; }
.rank-dt   { font-size: 0.8rem; }
.rank-fecha-col { font-size: 0.68rem !important; text-align: center; max-width: 80px; }
.rank-fecha-pts { text-align: center; font-size: 0.85rem; color: var(--texto); }
.rank-puntos    { color: var(--verde); font-size: 1rem; }
.rank-costo     { font-size: 0.82rem; }
.text-dim       { color: var(--gris-4); }

/* ── ADMIN PANEL ─────────────────────────────────── */

.admin-wrap { max-width: 900px; margin: 0 auto; padding: 2rem 1rem; }

.admin-login-box {
  max-width: 360px;
  margin: 6rem auto;
  background: var(--gris-2);
  border-radius: var(--radio);
  padding: 2.5rem 2rem;
  text-align: center;
  box-shadow: var(--sombra);
}
.admin-title { font-family: var(--font-titulo); font-size: 2rem; color: var(--blanco); margin-bottom: 0.25rem; }
.admin-sub   { font-size: 0.82rem; color: var(--gris-4); margin-bottom: 1.25rem; }

.admin-login-form { display: flex; flex-direction: column; gap: 0.75rem; }
.input-admin {
  background: var(--gris-3);
  border: 1px solid var(--gris-4);
  border-radius: var(--radio);
  color: var(--blanco);
  font-family: var(--font-body);
  font-size: 0.9rem;
  padding: 0.6rem 0.85rem;
  outline: none;
  width: 100%;
  transition: border-color 0.2s;
}
.input-admin:focus { border-color: var(--verde); }

.admin-error    { font-size: 0.78rem; color: #ff5252; margin-top: 0.5rem; min-height: 1.2em; }
.admin-error.ok { color: var(--verde); }

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
}

.admin-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
.admin-stat-card {
  background: var(--gris-2);
  border-radius: var(--radio);
  padding: 1rem;
  text-align: center;
  border: 1px solid var(--gris-3);
}
.admin-stat-card.verde { border-color: rgba(0,200,83,0.35); background: rgba(0,200,83,0.07); }
.admin-stat-num   { font-family: var(--font-titulo); font-size: 2rem; color: var(--blanco); }
.admin-stat-label { font-size: 0.7rem; color: var(--gris-4); text-transform: uppercase; letter-spacing: 1px; }

.admin-section {
  background: var(--gris-2);
  border-radius: var(--radio);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid var(--gris-3);
}
.admin-section h3 { font-size: 1rem; font-weight: 700; color: var(--blanco); margin-bottom: 1rem; }
.admin-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1rem;
}

.admin-form-box {
  background: var(--gris-3);
  border-radius: var(--radio);
  padding: 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.admin-form-btns { display: flex; gap: 0.5rem; }

.fecha-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--gris-3);
  border-radius: var(--radio);
  padding: 0.9rem 1.1rem;
  margin-bottom: 0.6rem;
  border-left: 3px solid var(--gris-4);
  gap: 1rem;
}
.fecha-card.abierta { border-left-color: var(--verde); }
.fecha-card.cerrada { border-left-color: var(--gris-4); opacity: 0.8; }

.fecha-card-info  { display: flex; flex-direction: column; gap: 3px; }
.fecha-card-label { font-weight: 700; color: var(--blanco); font-size: 0.95rem; }
.fecha-card-meta  { font-size: 0.72rem; color: var(--gris-4); }
.fecha-card-pts   { font-size: 0.75rem; color: var(--gris-4); }
.fecha-card-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

.fecha-estado-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 7px;
  border-radius: 3px;
  margin-left: 6px;
  vertical-align: middle;
}
.badge-abierta { background: rgba(0,200,83,0.18); color: var(--verde); }
.badge-cerrada { background: rgba(100,100,100,0.2); color: var(--gris-4); }

.btn-sm { font-size: 0.78rem; padding: 0.35rem 0.85rem; }

.admin-modal-card { max-width: 560px; }

/* ═══════════════════════════════════════════
   PÁGINA DE AYUDA
   ═══════════════════════════════════════════ */

.ayuda-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}

.ayuda-hero {
  text-align: center;
  padding: 2.5rem 0 1.5rem;
  border-bottom: 1px solid var(--gris-3);
  margin-bottom: 1.5rem;
}
.ayuda-titulo {
  font-family: var(--font-titulo);
  font-size: 2.8rem;
  letter-spacing: 0.04em;
  color: var(--blanco);
  margin-bottom: 0.5rem;
}
.ayuda-sub {
  color: var(--gris-4);
  font-size: 1rem;
}

/* Índice */
.ayuda-indice {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  padding: 1rem;
  background: var(--gris-2);
  border-radius: var(--radio);
}
.ayuda-indice-item {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  background: var(--gris-3);
  color: var(--texto);
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.ayuda-indice-item:hover {
  background: var(--verde);
  color: #000;
}

/* Secciones */
.ayuda-seccion {
  margin-bottom: 2.5rem;
  scroll-margin-top: 80px;
}
.ayuda-seccion-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--verde);
}
.ayuda-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--verde);
  color: #000;
  font-family: var(--font-titulo);
  font-size: 1.1rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.ayuda-seccion-header h2 {
  font-family: var(--font-titulo);
  font-size: 1.5rem;
  letter-spacing: 0.04em;
  color: var(--blanco);
}
.ayuda-contenido {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  padding-left: 0.25rem;
}
.ayuda-contenido p {
  line-height: 1.65;
  color: var(--texto);
}
.ayuda-h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--blanco);
  margin-top: 0.5rem;
}

/* Listas numeradas */
.ayuda-lista {
  padding-left: 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  color: var(--texto);
  line-height: 1.6;
}

/* Tips */
.ayuda-tip {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  background: rgba(0,200,83,0.07);
  border-left: 3px solid var(--verde);
  border-radius: 0 var(--radio) var(--radio) 0;
  padding: 0.65rem 0.9rem;
  font-size: 0.88rem;
  color: var(--texto);
  line-height: 1.55;
}
.ayuda-tip-icon { flex-shrink: 0; }

/* Reglas */
.ayuda-reglas {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.ayuda-regla {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--texto);
  line-height: 1.55;
}
.ayuda-regla::before {
  content: "✓";
  color: var(--verde);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

/* Ejemplo */
.ayuda-ejemplo {
  background: var(--gris-2);
  border-radius: var(--radio);
  padding: 0.65rem 0.9rem;
  font-size: 0.88rem;
  color: var(--texto);
}
.ayuda-ejemplo-label {
  font-weight: 700;
  color: var(--legendary);
  margin-right: 0.4rem;
}

/* Formaciones */
.ayuda-formaciones {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.ayuda-form-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--texto);
}
.ayuda-form-badge {
  background: var(--gris-3);
  color: var(--blanco);
  font-weight: 700;
  font-size: 0.8rem;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  letter-spacing: 0.02em;
}

/* Tabla de puntos */
.ayuda-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.ayuda-tabla thead tr {
  background: var(--gris-3);
}
.ayuda-tabla th {
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-weight: 700;
  color: var(--blanco);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.ayuda-tabla td {
  padding: 0.4rem 0.75rem;
  border-bottom: 1px solid var(--gris-3);
  color: var(--texto);
}
.ayuda-tabla tr:last-child td { border-bottom: none; }
.pts-pos { font-weight: 700; color: var(--verde); }
.pts-neg { font-weight: 700; color: #ff6b35; }

/* Ligas grid */
.ayuda-ligas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.ayuda-liga-card {
  background: var(--gris-2);
  border-radius: var(--radio);
  padding: 1rem 1.1rem;
  border-top: 3px solid transparent;
}
.ayuda-liga-card.liga-d1 { border-top-color: rgba(255,140,0,.7); }
.ayuda-liga-card.liga-d2 { border-top-color: rgba(74,144,255,.7); }
.ayuda-liga-titulo {
  font-family: var(--font-titulo);
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  color: var(--blanco);
  margin-bottom: 0.4rem;
}
.ayuda-liga-card p { font-size: 0.88rem; color: var(--texto); line-height: 1.55; }

/* FAQ */
.ayuda-faq .ayuda-seccion-header .ayuda-num {
  background: var(--gris-3);
  color: var(--verde);
  border: 2px solid var(--verde);
}
.faq-item {
  border: 1px solid var(--gris-3);
  border-radius: var(--radio);
  overflow: hidden;
}
.faq-pregunta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.85rem 1rem;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--blanco);
  background: var(--gris-2);
  user-select: none;
  transition: background 0.15s;
  gap: 0.75rem;
}
.faq-pregunta:hover { background: var(--gris-3); }
.faq-chevron { flex-shrink: 0; color: var(--verde); }
.faq-respuesta {
  display: none;
  padding: 0.75rem 1rem;
  font-size: 0.88rem;
  color: var(--texto);
  background: var(--gris-1);
  line-height: 1.6;
}
.faq-item.open .faq-respuesta { display: block; }

/* Responsive */
@media (max-width: 600px) {
  .ayuda-ligas-grid { grid-template-columns: 1fr; }
  .ayuda-titulo { font-size: 2rem; }
  .ayuda-indice { gap: 0.35rem; }
}

/* ─────────────────────────── */
.admin-import-form { display: flex; flex-direction: column; }
.admin-label {
  font-size: 0.75rem;
  color: var(--gris-4);
  margin-bottom: 0.25rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.admin-textarea {
  width: 100%;
  min-height: 200px;
  background: var(--gris-3);
  border: 1px solid var(--gris-4);
  border-radius: var(--radio);
  color: var(--blanco);
  font-family: monospace;
  font-size: 0.8rem;
  padding: 0.75rem;
  outline: none;
  resize: vertical;
  margin-top: 0.75rem;
}
.admin-textarea:focus { border-color: var(--verde); }

.admin-pre {
  background: var(--gris-1);
  border-radius: 6px;
  padding: 0.75rem 1rem;
  font-family: monospace;
  font-size: 0.75rem;
  color: var(--rare);
  overflow-x: auto;
  margin-top: 0.5rem;
}

.admin-formato-hint {
  font-size: 0.8rem;
  color: var(--gris-4);
  cursor: pointer;
}
.admin-formato-hint summary { list-style: none; user-select: none; }
.admin-formato-hint summary:hover { color: var(--blanco); }

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.admin-table th {
  text-align: left;
  padding: 0.6rem 0.75rem;
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gris-4);
  border-bottom: 1px solid var(--gris-3);
}
.admin-table td {
  padding: 0.7rem 0.75rem;
  border-bottom: 1px solid var(--gris-3);
}
.admin-table tr:last-child td { border-bottom: none; }

.admin-empty {
  text-align: center;
  padding: 1.5rem;
  color: var(--gris-4);
  font-size: 0.85rem;
}

/* ════════════════════════════════════════════════════
   AUTH — LOGIN / REGISTRO
   ════════════════════════════════════════════════════ */

.auth-page {
  min-height: 100vh;
  background: var(--negro);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}

.auth-card {
  background: var(--gris-1);
  border: 1px solid var(--gris-3);
  border-radius: 14px;
  padding: 2.5rem 2rem;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--sombra);
}

.auth-logo {
  font-family: var(--font-titulo);
  font-size: 2.8rem;
  letter-spacing: 3px;
  color: var(--blanco);
  text-align: center;
  margin-bottom: 2px;
}
.auth-logo span { color: var(--verde); }

.auth-tagline {
  text-align: center;
  font-size: 0.75rem;
  color: var(--gris-4);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin-bottom: 1.75rem;
}

.auth-tabs {
  display: flex;
  border-bottom: 1.5px solid var(--gris-3);
  margin-bottom: 1.5rem;
}
.auth-tab {
  flex: 1;
  background: none;
  border: none;
  padding: 0.6rem 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gris-4);
  cursor: pointer;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  transition: color .2s, border-color .2s;
}
.auth-tab.active { color: var(--verde); border-color: var(--verde); }
.auth-tab:hover:not(.active) { color: var(--texto); }

.auth-field { margin-bottom: 1rem; }
.auth-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gris-4);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.auth-hint { font-size: 0.68rem; text-transform: none; letter-spacing: 0; }
.input-auth {
  width: 100%;
  background: var(--gris-2);
  border: 1.5px solid var(--gris-3);
  border-radius: var(--radio);
  color: var(--blanco);
  font-family: var(--font-body);
  font-size: 0.95rem;
  padding: 0.65rem 0.9rem;
  outline: none;
  transition: border-color .2s;
}
.input-auth:focus { border-color: var(--verde); }
.input-auth::placeholder { color: var(--gris-4); }

.auth-error {
  font-size: 0.78rem;
  color: #ff5252;
  margin-top: 0.5rem;
  min-height: 1.1em;
}

.auth-btn {
  width: 100%;
  justify-content: center;
  margin-top: 0.5rem;
  font-size: 0.9rem;
  padding: 0.75rem;
}

/* ── Botones de navbar ───────────────────────────── */

.btn-nav-logout {
  background: transparent;
  border: none;
  color: var(--gris-4);
  cursor: pointer;
  font-size: 0.68rem;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, color .15s;
  padding: 0;
  margin-left: 2px;
  /* Área táctil extendida sin cambiar el visual */
  position: relative;
}
.btn-nav-logout::after {
  content: '';
  position: absolute;
  inset: -12px;
}
.btn-nav-logout:hover { background: rgba(255,82,82,0.15); color: #ff5252; }

.btn-nav-login {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--verde);
  border: 1.5px solid var(--verde);
  padding: 4px 12px;
  border-radius: 5px;
  transition: background .2s, color .2s;
}
.btn-nav-login:hover { background: var(--verde); color: var(--negro); }

/* ════════════════════════════════════════════════════
   TRANSFERENCIAS — BANNER
   ════════════════════════════════════════════════════ */

.banner-transferencia {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  background: rgba(0,200,83,0.07);
  border: 1px solid rgba(0,200,83,0.25);
  color: var(--texto);
}

.banner-partido {
  background: rgba(255,82,82,0.08);
  border: 1px solid rgba(255,82,82,0.35);
  color: #ff6b6b;
}

.transfer-banner-label { font-size: 0.8rem; }
.transfer-banner-sep   { color: var(--gris-4); }
.transfer-banner-count { font-size: 0.78rem; color: var(--gris-4); }

.transfer-dots { display: inline-flex; gap: 5px; align-items: center; }
.transfer-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  display: inline-block;
}
.transfer-dot.libre { background: var(--verde); box-shadow: 0 0 6px rgba(0,200,83,0.5); }
.transfer-dot.usada { background: var(--gris-3); }

/* ════════════════════════════════════════════════════
   EXPLORADOR DE JUGADORES
   ════════════════════════════════════════════════════ */

.jug-explorer-filters {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem 1rem;
}

.explorer-filter-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.explorer-search-wrap { flex: 1; min-width: 180px; }
.jug-explorer-filters .input-buscar {
  width: 100%;
  background: var(--gris-2);
  border: 1.5px solid var(--gris-4);
  border-radius: var(--radio);
  color: var(--blanco);
  font-family: var(--font-body);
  font-size: 0.88rem;
  padding: 0.6rem 0.9rem;
  outline: none;
  transition: border-color .2s;
}
.jug-explorer-filters .input-buscar:focus { border-color: var(--verde); }
.jug-explorer-filters .input-buscar::placeholder { color: var(--gris-4); }

.explorer-sort-wrap {}
.input-sort {
  background: var(--gris-2);
  border: 1.5px solid var(--gris-3);
  border-radius: var(--radio);
  color: var(--blanco);
  font-family: var(--font-body);
  font-size: 0.85rem;
  padding: 0.55rem 0.85rem;
  outline: none;
  cursor: pointer;
  transition: border-color .2s;
}
.input-sort:focus { border-color: var(--verde); }

.explorer-count {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem 0.75rem;
  font-size: 0.78rem;
  color: var(--gris-4);
}

.explorer-grid {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

/* ── Paginación del explorador ──────────────────────────── */
.explorer-pager {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem 3rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.explorer-pager.hidden { display: none; }
.pager-btn {
  background: var(--gris-2);
  color: var(--blanco);
  border: 1px solid var(--gris-3);
  border-radius: 8px;
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.pager-btn:hover:not(:disabled) { background: var(--gris-3); }
.pager-btn:disabled { opacity: 0.4; cursor: default; }
.pager-btn.active {
  background: var(--verde, #2ecc71);
  border-color: var(--verde, #2ecc71);
  color: #06240f;
}
.pager-info { font-size: 0.85rem; color: var(--gris-4); margin: 0 0.4rem; }

@media (max-width: 900px) {
  .explorer-grid { grid-template-columns: repeat(3, 1fr); }
}

/* Tarjeta del explorador */
.ex-card {
  display: block;
  background: var(--gris-2);
  border-radius: 10px;
  border-top: 3px solid var(--common);
  overflow: hidden;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s;
  cursor: pointer;
}
.ex-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.4); }

.ex-card.legendary { border-top-color: var(--legendary); }
.ex-card.epic      { border-top-color: var(--epic); }
.ex-card.rare      { border-top-color: var(--rare); }
.ex-card.common    { border-top-color: var(--common); }
.ex-card.tier-d1   { border-top-color: #ff8c00; }
.ex-card.tier-d2   { border-top-color: #4a90ff; }
.ex-card.tier-vet  { border-top-color: #ffd200; }

.ex-card-top {
  position: relative;
  display: flex;
  justify-content: center;
  padding: 0.75rem 0.75rem 0.4rem;
  background: rgba(0,0,0,0.2);
}
.ex-foto {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--gris-3);
}
.ex-foto-placeholder {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gris-3);
}
.ex-precio {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  font-size: 0.75rem;
  font-weight: 800;
}

.ex-card-body { padding: 0.6rem 0.75rem 0.75rem; }
.ex-nombre { font-size: 0.85rem; font-weight: 700; color: var(--blanco); line-height: 1.2; margin-bottom: 0.3rem; }
.ex-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--gris-4);
  margin-bottom: 0.4rem;
}
.ex-escudo { width: 13px; height: 13px; object-fit: contain; vertical-align: middle; }
.ex-club   { font-size: 0.7rem; color: var(--gris-4); }
.ex-stats {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 0.35rem;
}
.ex-stat { font-size: 0.68rem; color: var(--gris-4); }
.ex-stat strong { color: var(--texto); }
.ex-rarity { font-size: 0.62rem; font-weight: 700; }
.rarity-legendary { color: var(--legendary); }
.rarity-epic      { color: var(--epic); }
.rarity-rare      { color: var(--rare); }
.rarity-common    { color: var(--common); }

/* ════════════════════════════════════════════════════
   PERFIL DE JUGADOR
   ════════════════════════════════════════════════════ */

.perfil-wrap {
  max-width: 700px;
  margin: 0 auto;
  padding: 1.5rem 2rem 4rem;
}

.perfil-breadcrumb {
  margin-bottom: 1rem;
  font-size: 0.8rem;
}
.perfil-breadcrumb a { color: var(--gris-4); }
.perfil-breadcrumb a:hover { color: var(--verde); }

.perfil-header {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  background: var(--gris-2);
  border-radius: 14px;
  padding: 1.75rem;
  margin-bottom: 1.5rem;
  border-left: 4px solid var(--common);
}
.perfil-header.legendary { border-left-color: var(--legendary); }
.perfil-header.epic      { border-left-color: var(--epic); }
.perfil-header.rare      { border-left-color: var(--rare); }
.perfil-header.common    { border-left-color: var(--common); }

.perfil-foto-wrap {}
.perfil-foto {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--gris-3);
  display: block;
}
.perfil-foto-placeholder {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: var(--gris-3);
}

.perfil-info { flex: 1; }
.perfil-badges { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 0.6rem; }
.rarity-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  vertical-align: middle;
}
.rarity-badge.rarity-legendary { background: rgba(255,215,0,0.15);   color: var(--legendary); }
.rarity-badge.rarity-epic      { background: rgba(199,125,255,0.15); color: var(--epic); }
.rarity-badge.rarity-rare      { background: rgba(72,202,228,0.15);  color: var(--rare); }
.rarity-badge.rarity-common    { background: rgba(173,181,189,0.1);  color: var(--common); }

.perfil-nombre { font-family: var(--font-titulo); font-size: 2.4rem; color: var(--blanco); letter-spacing: 1px; line-height: 1.1; margin-bottom: 0.4rem; }
.perfil-club {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--gris-4);
  margin-bottom: 0.5rem;
}
.perfil-escudo { width: 22px; height: 22px; object-fit: contain; }
.perfil-precio { font-size: 1.2rem; font-weight: 800; margin-bottom: 0.5rem; }
.perfil-link-ext {
  font-size: 0.75rem;
  color: var(--gris-4);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.perfil-link-ext:hover { color: var(--verde); }

.perfil-section { margin-bottom: 1.5rem; }
.perfil-section-title {
  font-family: var(--font-titulo);
  font-size: 1.3rem;
  letter-spacing: 1px;
  color: var(--blanco);
  margin-bottom: 0.85rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--gris-3);
}

.perfil-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.75rem;
}
.perfil-stat {
  background: var(--gris-2);
  border-radius: 8px;
  padding: 0.85rem 0.75rem;
  text-align: center;
  border: 1px solid var(--gris-3);
}
.perfil-stat-val { font-size: 1.5rem; font-weight: 700; color: var(--blanco); line-height: 1; }
.perfil-stat-lbl { font-size: 0.68rem; color: var(--gris-4); margin-top: 4px; }

.perfil-en-equipos {
  display: flex;
  gap: 1rem;
}
.perfil-en-eq-item {
  background: var(--gris-2);
  border-radius: 8px;
  padding: 1rem 1.5rem;
  text-align: center;
  border: 1px solid var(--gris-3);
  min-width: 120px;
}
.perfil-en-eq-num { font-family: var(--font-titulo); font-size: 2.5rem; line-height: 1; }
.perfil-en-eq-lbl { font-size: 0.72rem; color: var(--gris-4); margin-top: 4px; }

.perfil-temporadas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.temp-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 5px;
  background: var(--gris-2);
  border: 1px solid var(--gris-3);
  color: var(--texto);
}
.temp-badge.div-d1 { border-color: rgba(0,200,83,0.3);   background: rgba(0,200,83,0.06); }
.temp-badge.div-d2 { border-color: rgba(72,202,228,0.3); background: rgba(72,202,228,0.06); }
.temp-badge.div-d3 { border-color: var(--gris-3); }
.temp-div { font-size: 0.6rem; color: var(--gris-4); }

/* ── RANKING v2 ──────────────────────────────────────────────── */

.rk2-meta {
  max-width: 860px;
  margin: 0 auto 0.75rem;
  padding: 0 0.5rem;
}
.rk2-meta-inner {
  font-size: 0.78rem;
  color: var(--gris-4);
  display: flex;
  flex-wrap: nowrap;
  gap: 0.4rem;
  align-items: center;
}
.rk2-meta-inner span { white-space: nowrap; }
.rk2-meta-sep { opacity: 0.4; }

.rk2-wrap {
  overflow-x: auto;
  border-radius: var(--radio);
  border: 1px solid var(--gris-3);
  max-width: 900px;
}

.rk2-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
  white-space: nowrap;
}

.rk2-table th {
  padding: 0.55rem 0.9rem;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gris-4);
  border-bottom: 1px solid var(--gris-3);
  background: var(--gris-1);
  text-align: left;
}

.rk2-table td {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  vertical-align: middle;
}

.rk2-table tr:last-child td { border-bottom: none; }
.rk2-table tr:hover td      { background: var(--gris-2); }

.rk2-table tr.top-1 td { background: rgba(255,215,0,0.05); }
.rk2-table tr.top-2 td { background: rgba(192,192,192,0.04); }
.rk2-table tr.top-3 td { background: rgba(205,127,50,0.04); }
.rk2-table tr.top-1:hover td { background: rgba(255,215,0,0.09); }
.rk2-table tr.top-2:hover td { background: rgba(192,192,192,0.08); }
.rk2-table tr.top-3:hover td { background: rgba(205,127,50,0.08); }

.rk2-th-pos   { width: 40px; text-align: center !important; }
.rk2-th-total { text-align: right !important; min-width: 70px; }
.rk2-th-fecha { text-align: right !important; min-width: 44px; }

.rk2-pos { text-align: center; font-size: 1rem; width: 40px; }

.rk2-club-cell {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 160px;
}
.rk2-club-nom {
  font-weight: 700;
  color: var(--blanco);
  font-size: 0.88rem;
}
.rk2-dt-nom {
  font-size: 0.7rem;
  color: var(--gris-4);
}

.rk2-fecha-pts {
  text-align: right;
  font-size: 0.82rem;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.rk2-fecha-pts.pos { color: var(--verde); }
.rk2-fecha-pts.neg { color: #ff5252; }

.rk2-total-pts {
  text-align: right;
  font-weight: 800;
  color: var(--verde);
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

/* ── MI EQUIPO v2 ─────────────────────────────────────────────── */

.meq2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--gris-2);
  border-radius: var(--radio);
  padding: 1rem 1.25rem;
  margin-bottom: 0.75rem;
  border-left: 3px solid var(--verde);
}

.meq2-left { flex: 1; min-width: 0; }

.meq2-club {
  font-family: var(--font-titulo);
  font-size: 1.6rem;
  color: var(--blanco);
  letter-spacing: 1px;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.meq2-meta {
  font-size: 0.75rem;
  color: var(--gris-4);
  margin-top: 3px;
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  align-items: center;
}
.meq2-sep      { opacity: 0.35; }
.meq2-guardado { color: var(--gris-4); }

.meq2-pts { text-align: right; flex-shrink: 0; }
.meq2-pts-num {
  font-family: var(--font-titulo);
  font-size: 2.4rem;
  color: var(--verde);
  line-height: 1;
}
.meq2-pts-lbl {
  font-size: 0.6rem;
  color: var(--gris-4);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}

/* Historial chips */
.meq2-historial {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.meq2-hist-chip {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--gris-2);
  border: 1px solid var(--gris-3);
  border-radius: 6px;
  padding: 4px 10px;
  cursor: default;
}
.meq2-hist-label {
  font-size: 0.72rem;
  color: var(--gris-4);
  white-space: nowrap;
}
.meq2-hist-pts {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--texto);
}
.meq2-hist-chip.pos .meq2-hist-pts { color: var(--verde); }
.meq2-hist-chip.neg .meq2-hist-pts { color: #ff5252; }
.meq2-hist-chip.pos { border-color: rgba(0,200,83,0.25); }
.meq2-hist-chip.neg { border-color: rgba(255,82,82,0.25); }

.meq2-sin-fechas {
  font-size: 0.8rem;
  color: var(--gris-4);
  background: var(--gris-2);
  border-radius: var(--radio);
  padding: 0.7rem 1rem;
  margin-bottom: 1rem;
  border: 1px dashed var(--gris-3);
}

/* Plantel */
.meq2-plantel {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.meq2-fila {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.meq2-fila-lbl {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gris-4);
  width: 110px;
  flex-shrink: 0;
  padding-top: 0.85rem;
  text-align: right;
}

.meq2-fila-jugs {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.meq2-jug {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--gris-2);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  border-left: 3px solid var(--common);
}
.meq2-jug.legendary { border-left-color: var(--legendary); }
.meq2-jug.epic      { border-left-color: var(--epic); }
.meq2-jug.rare      { border-left-color: var(--rare); }
.meq2-jug.common    { border-left-color: var(--common); }

.meq2-jug-foto {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.meq2-jug-foto-ph {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gris-3);
  flex-shrink: 0;
}

.meq2-jug-info {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  min-width: 0;
}

.meq2-jug-nombre {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--blanco);
}

.meq2-jug-club {
  font-size: 0.72rem;
  color: var(--gris-4);
  display: flex;
  align-items: center;
  gap: 3px;
}

.meq2-jug-esc {
  width: 13px;
  height: 13px;
  object-fit: contain;
  vertical-align: middle;
}

.meq2-jug-precio {
  font-size: 0.78rem;
  font-weight: 700;
  flex-shrink: 0;
  margin-left: auto;
}

/* ── FECHA CIERRE ─────────────────────────────────────────────── */

.fecha-cierre {
  font-size: 0.72rem;
  color: #ff9800;
  background: rgba(255,152,0,0.1);
  border: 1px solid rgba(255,152,0,0.25);
  border-radius: 4px;
  padding: 1px 7px;
}

.transfer-banner-cierre {
  font-size: 0.78rem;
  color: #ff9800;
}

/* ── ADMIN SECCION ───────────────────────────────────────────── */

.btn-nav-login {
  background: var(--verde);
  color: var(--negro);
  padding: 5px 14px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
}
.btn-nav-login:hover { background: var(--verde-osc); color: var(--negro); }

/* (btn-nav-logout defined above) */

/* ══════════════════════════════════════════════════════════════
   LIGA TIER BADGES — reemplaza raridades (D1=naranja, D2=azul, Vet=amarillo)
   ══════════════════════════════════════════════════════════════ */

.tier-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.tier-d1  { background: rgba(255,140,0,.18); color: #ff8c00; border: 1px solid rgba(255,140,0,.35); }
.tier-d2  { background: rgba(64,120,255,.18); color: #4a90ff; border: 1px solid rgba(64,120,255,.35); }
.tier-vet { background: rgba(255,210,0,.18); color: #ffd200; border: 1px solid rgba(255,210,0,.35); }

/* ══════════════════════════════════════════════════════════════
   ADMIN — btn-danger
   ══════════════════════════════════════════════════════════════ */

.btn-danger {
  background: transparent;
  border: 1px solid rgba(220,50,50,.5);
  color: #e05555;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  transition: background .15s;
}
.btn-danger:hover { background: rgba(220,50,50,.12); }

/* ══════════════════════════════════════════════════════════════
   JUGADOR PERFIL — stats nota
   ══════════════════════════════════════════════════════════════ */

.perfil-stats-nota {
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--gris-4);
  text-transform: lowercase;
  margin-left: 0.4rem;
}

/* ══════════════════════════════════════════════════════════════
   RANKING — centrado y con ancho máximo
   ══════════════════════════════════════════════════════════════ */

.rk2-outer {
  max-width: 860px;
  margin: 0 auto;
}

/* ══════════════════════════════════════════════════════════════
   MI EQUIPO v3 — formación visual + lista plantel
   ══════════════════════════════════════════════════════════════ */

.meq3-wrap {
  max-width: 700px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Header */
.meq3-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: var(--gris-2);
  border-radius: 8px;
  border: 1px solid var(--gris-3);
}
.meq3-club {
  font-family: "Bebas Neue", sans-serif;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--blanco);
}
.meq3-meta {
  font-size: 0.72rem;
  color: var(--gris-4);
  margin-top: 0.3rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.1rem 0.25rem;
}
.meq3-meta-item { white-space: nowrap; }
.meq3-sep { color: var(--gris-3); flex-shrink: 0; }
.meq3-guardado { color: var(--gris-4); }
.meq3-pts { text-align: right; flex-shrink: 0; }
.meq3-pts-num {
  font-family: "Bebas Neue", sans-serif;
  font-size: 2rem;
  line-height: 1;
  color: var(--verde);
}
.meq3-pts-lbl { font-size: 0.65rem; color: var(--gris-4); text-transform: uppercase; }

/* Historial chips */
.meq3-historial {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.meq3-hist-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.72rem;
  background: var(--gris-2);
  border: 1px solid var(--gris-3);
  cursor: default;
}
.meq3-hist-chip.pos { border-color: rgba(100,200,100,.4); }
.meq3-hist-chip.neg { border-color: rgba(220,80,80,.4); }
.meq3-hist-label { color: var(--gris-4); }
.meq3-hist-pts { font-weight: 700; }
.meq3-hist-chip.pos .meq3-hist-pts { color: var(--verde); }
.meq3-hist-chip.neg .meq3-hist-pts { color: #e05555; }
.meq3-sin-fechas { font-size: 0.78rem; color: var(--gris-4); }

/* Campo visual */
.meq3-campo {
  background: linear-gradient(to bottom, #1b4d30 0%, #2d7a4a 45%, #2d7a4a 55%, #1b4d30 100%);
  border: 2px solid rgba(255,255,255,.08);
  border-radius: 10px;
  padding: 1rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  position: relative;
}
/* Línea del centro */
.meq3-campo::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%;
  top: 50%;
  height: 1px;
  background: rgba(255,255,255,.12);
  pointer-events: none;
}

.meq3-campo-fila {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.meq3-campo-jug {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 72px;
}
.meq3-campo-foto-wrap {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.25);
  background: var(--gris-3);
  flex-shrink: 0;
}
.meq3-campo-jug.tier-d1  .meq3-campo-foto-wrap { border-color: rgba(255,140,0,.7); }
.meq3-campo-jug.tier-d2  .meq3-campo-foto-wrap { border-color: rgba(74,144,255,.7); }
.meq3-campo-jug.tier-vet .meq3-campo-foto-wrap { border-color: rgba(255,210,0,.7); }
.meq3-campo-foto { width: 100%; height: 100%; object-fit: cover; }
.meq3-campo-foto-ph {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; font-weight: 700; color: var(--gris-4);
}
.meq3-campo-nombre {
  font-size: 0.62rem;
  font-weight: 600;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.meq3-campo-tier {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 1px 5px;
  border-radius: 3px;
}
.meq3-campo-tier.tier-d1  { background: rgba(255,140,0,.3); color: #ffb347; }
.meq3-campo-tier.tier-d2  { background: rgba(74,144,255,.3); color: #7ab8ff; }
.meq3-campo-tier.tier-vet { background: rgba(255,210,0,.3); color: #ffe066; }

/* Capitán badge en Mi Equipo */
.meq3-campo-jug { position: relative; }
.meq3-cap-badge {
  position: absolute;
  top: -6px; left: 50%; transform: translateX(-50%);
  font-size: 0.75rem;
  color: #ffd700;
  text-shadow: 0 0 6px rgba(255,215,0,.8);
  line-height: 1;
  pointer-events: none;
}
.meq3-campo-jug.meq3-capitan .meq3-campo-foto-wrap {
  border-color: #ffd700 !important;
  box-shadow: 0 0 8px rgba(255,215,0,.5);
}

/* Banco de suplentes en Mi Equipo */
.meq3-banca {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: rgba(255,255,255,.04);
  border-top: 1px solid rgba(255,255,255,.08);
  border-radius: 0 0 12px 12px;
}
.meq3-banca-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--gris-4);
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  flex-shrink: 0;
}
.meq3-banca-slots {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}
.meq3-banca-jug {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  width: 64px;
  opacity: 0.75;
}
.meq3-banca-jug .meq3-campo-foto-wrap {
  width: 38px; height: 38px;
  border-style: dashed;
}

/* Hint de capitán en Armar Equipo */
.capitan-hint {
  font-size: 0.72rem;
  color: #ffd700;
  text-align: center;
  margin-top: 0.4rem;
  opacity: 0.8;
}

/* Plantel lista compacta */
.meq3-plantel {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.meq3-pl-titulo {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gris-4);
  padding-bottom: 0.2rem;
  border-bottom: 1px solid var(--gris-3);
  margin-bottom: 0.25rem;
}
.meq3-pl-grupo { display: flex; flex-direction: column; gap: 0.3rem; }

.meq3-pl-jug {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  background: var(--gris-2);
  border-left: 3px solid var(--gris-3);
}
.meq3-pl-jug.tier-d1  { border-left-color: #ff8c00; }
.meq3-pl-jug.tier-d2  { border-left-color: #4a90ff; }
.meq3-pl-jug.tier-vet { border-left-color: #ffd200; }

.meq3-pl-foto {
  width: 30px; height: 30px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.meq3-pl-foto-ph {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--gris-3);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.8rem; font-weight: 700; color: var(--gris-4);
  flex-shrink: 0;
}
.meq3-pl-esc { width: 14px; height: 14px; object-fit: contain; vertical-align: middle; margin-right: 2px; }
.meq3-pl-info { flex: 1; min-width: 0; }
.meq3-pl-nombre { display: block; font-size: 0.8rem; font-weight: 600; color: var(--blanco); line-height: 1.2; }
.meq3-pl-club { display: block; font-size: 0.68rem; color: var(--gris-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.meq3-pl-right { display: flex; flex-direction: column; align-items: flex-end; gap: 0.15rem; flex-shrink: 0; }
.meq3-tier-badge {
  font-size: 0.58rem; font-weight: 700;
  padding: 1px 5px; border-radius: 3px;
  text-transform: uppercase; letter-spacing: .04em;
}
.meq3-tier-badge.tier-d1  { background: rgba(255,140,0,.18); color: #ff8c00; }
.meq3-tier-badge.tier-d2  { background: rgba(74,144,255,.18); color: #4a90ff; }
.meq3-tier-badge.tier-vet { background: rgba(255,210,0,.18); color: #ffd200; }
.meq3-pl-precio { font-size: 0.7rem; color: var(--gris-4); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   MI EQUIPO — header centrado + tabs debajo
   ══════════════════════════════════════════════════════════════ */

.meq-header-wrap {
  max-width: 700px;
  margin: 0 auto 1rem;
}

/* Campo SVG overlay */
.meq3-campo {
  position: relative;
}
.meq3-campo-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.meq3-campo-fila {
  position: relative;
  z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   ARMAR EQUIPO — liga tabs + formación en la misma fila
   ══════════════════════════════════════════════════════════════ */

.liga-formacion-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.liga-tabs-inline {
  display: flex;
  gap: 0.25rem;
}

/* ══════════════════════════════════════════════════════════════
   BUILDER — tier colors para slot-mini, jug-item, modal-jugador
   ══════════════════════════════════════════════════════════════ */

/* Slot en la cancha */
.slot-mini.tier-d1  { background: linear-gradient(135deg, #2a1200, #1a0a00); border: 1px solid rgba(255,140,0,.5); }
.slot-mini.tier-d2  { background: linear-gradient(135deg, #001525, #000e1a); border: 1px solid rgba(74,144,255,.5); }
.slot-mini.tier-vet { background: linear-gradient(135deg, #2a2000, #1a1500); border: 1px solid rgba(255,210,0,.5); }

/* Lista de jugadores */
.jug-item.tier-d1  { border-left-color: #ff8c00; }
.jug-item.tier-d2  { border-left-color: #4a90ff; }
.jug-item.tier-vet { border-left-color: #ffd200; }

/* Foto en el modal */
.modal-jugador.tier-d1  .modal-foto { border-color: rgba(255,140,0,.6); }
.modal-jugador.tier-d2  .modal-foto { border-color: rgba(74,144,255,.6); }
.modal-jugador.tier-vet .modal-foto { border-color: rgba(255,210,0,.6); }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE  (≤ 768px)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* ── NAVBAR ─────────────────────────────────────────────── */
  .navbar {
    height: auto;
    padding: 0.55rem 1rem;
    gap: 0.75rem;
    position: relative;
  }
  .nav-hamburger { display: flex; }
  #nav-fecha-chip-wrap { display: none; }
  .nav-links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--negro);
    border-bottom: 1px solid var(--gris-3);
    padding: 0.5rem 0 1rem;
    z-index: 200;
    gap: 0;
  }
  .nav-links.nav-open { display: flex; }
  .nav-links a,
  .nav-links .nav-link-locked {
    padding: 0.75rem 1.5rem;
    border-radius: 0;
    font-size: 1rem;
    border-bottom: 1px solid var(--gris-2);
    display: block;
    white-space: normal;
  }
  .nav-links a:last-child,
  .nav-links .nav-link-locked:last-child { border-bottom: none; }
  .nav-user { font-size: 0.75rem; margin-left: auto; }
  .nav-logo { font-size: 1.5rem; }

  /* ── PAGE HEADERS ───────────────────────────────────────── */
  .page-header {
    padding: 1.2rem 1rem 0.6rem;
  }
  .page-header h1 { font-size: 2rem; }

  .meq-header-wrap { padding: 0 1rem; }

  /* ── HERO ────────────────────────────────────────────────── */
  .hero { padding: 40px 1rem 30px; }
  .hero-actions { flex-direction: column; align-items: center; }
  .home-stats { padding: 0 1rem; }

  /* ── BUILDER — ARMAR EQUIPO ─────────────────────────────── */
  .builder-layout {
    grid-template-columns: minmax(0, 1fr);
    padding: 0.75rem 1rem;
    min-height: auto;
    gap: 1rem;
    overflow-x: hidden;
  }
  .panel-cancha { min-width: 0; overflow-x: hidden; }
  .panel-lista {
    height: auto;
    position: static;
    max-height: none;
    min-width: 0;
  }
  .lista-jugadores {
    max-height: 55vh;
  }
  .liga-formacion-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .slot { width: 70px; height: 92px; }
  .slot-mini { min-height: 88px; }
  .cancha { padding: 1.25rem 0.5rem; gap: 1rem; overflow-x: hidden; }
  .cancha-fila { gap: 0.5rem; }
  .fecha-activa-banner { font-size: 0.75rem; }

  /* ── MODAL ───────────────────────────────────────────────── */
  .modal-card {
    width: 96vw;
    max-height: 88vh;
    overflow-y: auto;
    padding: 1.5rem 1rem;
    border-radius: 12px 12px 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    top: auto;
    border-bottom: none;
  }
  .modal-overlay.visible {
    align-items: flex-end;
  }

  /* ── EXPLORADOR DE JUGADORES ─────────────────────────────── */
  .jug-explorer-filters { padding: 0 1rem 0.75rem; }
  .explorer-count       { padding: 0 1rem 0.5rem; }
  .explorer-grid {
    grid-template-columns: repeat(2, 1fr);
    padding: 0 1rem 2rem;
    gap: 0.65rem;
  }
  .explorer-filter-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  .explorer-search-wrap { width: 100%; min-width: 0; }
  .explorer-sort-wrap { width: 100%; }
  .input-sort { width: 100%; }

  /* ── RANKING ─────────────────────────────────────────────── */
  .rk2-outer { padding: 0 0.75rem; }
  .rk2-meta  { padding: 0 0.75rem; }
  .rk2-table { font-size: 0.78rem; }
  .rk2-table th, .rk2-table td { padding: 0.5rem 0.6rem; }
  .rk2-club-nom { font-size: 0.82rem; }
  .rk2-dt-nom   { font-size: 0.7rem; }

  /* ── MI EQUIPO ───────────────────────────────────────────── */
  .meq3-wrap { padding: 0 1rem; }
  .meq3-campo { padding: 1.2rem 0.5rem; gap: 0.75rem; }
  .meq3-campo-jug { width: 60px; }
  .meq3-campo-foto-wrap { width: 38px; height: 38px; }
  .meq3-campo-nombre { font-size: 0.55rem; }
  .meq3-header { gap: 0.75rem; align-items: center; }
  .meq3-club { font-size: 1.25rem; }
  .meq3-pts-num { font-size: 1.7rem; }
  .meq3-historial { gap: 0.3rem; }
  .meq3-hist-chip { padding: 4px 8px; font-size: 0.72rem; }

  /* ── PERFIL JUGADOR ──────────────────────────────────────── */
  .perfil-wrap { padding: 0 1rem; }
  .perfil-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }
  .perfil-stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .perfil-temporadas { gap: 0.3rem; }

  /* ── BANCO / CAPITÁN ────────────────────────────────────── */
  .banca-wrap { gap: 0.4rem; }
  .banca-slots { gap: 0.5rem; }
}

/* ════════════════════════════════════════════════════
   BADGE DE VARIACIÓN DE PRECIO
   ════════════════════════════════════════════════════ */

.precio-delta {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 4px;
  white-space: nowrap;
}
.delta-up   { color: #00e676; background: rgba(0,230,118,.12); }
.delta-down { color: #ff5252; background: rgba(255,82,82,.12); }

/* En tarjeta explorer */
.ex-precio-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}

/* En perfil jugador */
.perfil-precio { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* ════════════════════════════════════════════════════
   MERCADO
   ════════════════════════════════════════════════════ */

.page-sub {
  font-size: 0.82rem;
  color: var(--gris-4);
  margin-top: 0.25rem;
}

.mkt-wrap { max-width: 680px; margin: 0 auto; }
.mkt-wrap .liga-tabs-bar { margin-bottom: 0.75rem; }

.mkt-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 0;
}
@media (max-width: 640px) { .mkt-columns { grid-template-columns: 1fr; } }

.mkt-col-header {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radio) var(--radio) 0 0;
  font-weight: 700;
  font-size: 0.82rem;
}
.mkt-col-up   { background: rgba(0,230,118,.12); color: #00e676; }
.mkt-col-down { background: rgba(255,82,82,.12);  color: #ff5252; }
.mkt-col-icon { font-size: 1rem; }
.mkt-col-count { margin-left: auto; font-size: 0.72rem; opacity: .7; }

.mkt-list { display: flex; flex-direction: column; gap: 0.3rem; padding-top: 0.3rem; }

.mkt-empty {
  padding: 1rem;
  text-align: center;
  color: var(--gris-4);
  font-size: 0.82rem;
}

.mkt-card {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--gris-2);
  border: 1px solid var(--gris-3);
  border-radius: var(--radio);
  padding: 0.35rem 0.6rem;
  transition: background .15s, border-color .15s;
  cursor: pointer;
  text-decoration: none;
}
.mkt-card:hover { background: var(--gris-3); border-color: var(--gris-4); }
.mkt-card.tier-d1 { border-left: 3px solid var(--verde); }
.mkt-card.tier-d2 { border-left: 3px solid var(--epic); }

.mkt-foto-wrap { flex-shrink: 0; width: 28px; height: 28px; }
.mkt-foto      { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.mkt-foto-ph {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--gris-3);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.78rem; color: var(--gris-4);
}

.mkt-info     { flex: 1; min-width: 0; }
.mkt-nombre   { font-weight: 600; font-size: 0.82rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkt-meta     { display: flex; align-items: center; gap: 0.3rem; margin-top: 1px; }
.mkt-club     { font-size: 0.7rem; color: var(--gris-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mkt-precios        { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; flex-shrink: 0; }
.mkt-precio-actual  { font-weight: 700; font-size: 0.88rem; color: var(--blanco); }
.mkt-precio-ant     { font-size: 0.65rem; color: var(--gris-4); }

/* ════════════════════════════════════════════════════
   PERFIL DE USUARIO
   ════════════════════════════════════════════════════ */

.prf-wrap { max-width: 700px; margin: 0 auto; padding: 1.5rem 1rem; }

.prf-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.prf-avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--verde);
  color: var(--negro);
  font-size: 1.8rem;
  font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.prf-nombre-dt  { font-family: var(--font-titulo); font-size: 1.6rem; letter-spacing: 1px; }
.prf-username   { font-size: 0.8rem; color: var(--gris-4); margin-top: 2px; }

.prf-liga-tabs  { margin-bottom: 1.25rem; }

.prf-liga-panel { display: none; }
.prf-liga-panel.active { display: block; }

.prf-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.prf-stat-card {
  background: var(--gris-2);
  border: 1px solid var(--gris-3);
  border-radius: var(--radio);
  padding: 0.75rem;
  text-align: center;
}
.prf-stat-num { font-family: var(--font-titulo); font-size: 1.6rem; color: var(--verde); line-height: 1; }
.prf-stat-lbl { font-size: 0.72rem; color: var(--gris-4); margin-top: 4px; }

.prf-club-info {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--gris-2);
  border: 1px solid var(--gris-3);
  border-radius: var(--radio);
  padding: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}
.prf-club-nombre { font-weight: 700; font-size: 1.05rem; }
.prf-club-meta   { font-size: 0.78rem; color: var(--gris-4); }

.prf-historial-titulo {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gris-4);
  margin-bottom: 0.5rem;
}
.prf-historial {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}
.prf-hist-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: var(--gris-2);
  border: 1px solid var(--gris-3);
  border-radius: 6px;
  padding: 5px 10px;
  min-width: 44px;
  cursor: default;
}
.prf-hist-chip.pos { border-color: rgba(0,200,83,.4); background: rgba(0,200,83,.06); }
.prf-hist-chip.neg { border-color: rgba(255,82,82,.4); background: rgba(255,82,82,.06); }
.prf-hist-lbl { font-size: 0.65rem; color: var(--gris-4); }
.prf-hist-pts { font-size: 0.82rem; font-weight: 700; }
.prf-hist-chip.pos .prf-hist-pts { color: var(--verde); }
.prf-hist-chip.neg .prf-hist-pts { color: #ff5252; }

.prf-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* ════════════════════════════════════════════════════
   HISTORIAL DE RATINGS — jugador.html
   ════════════════════════════════════════════════════ */

.perfil-rating-historial {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.perfil-rat-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  min-width: 52px;
  background: var(--gris-2);
  border: 1px solid var(--gris-3);
  cursor: default;
}
.perfil-rat-chip.rat-hi  { border-color: rgba(0,200,83,.5);  background: rgba(0,200,83,.08); }
.perfil-rat-chip.rat-mid { border-color: rgba(255,193,7,.35); background: rgba(255,193,7,.06); }
.perfil-rat-chip.rat-lo  { border-color: rgba(255,82,82,.4);  background: rgba(255,82,82,.06); }
.perfil-rat-label { font-size: 0.62rem; color: var(--gris-4); margin-bottom: 2px; }
.perfil-rat-val   { font-weight: 700; font-size: 1rem; line-height: 1; }
.perfil-rat-chip.rat-hi  .perfil-rat-val { color: var(--verde); }
.perfil-rat-chip.rat-mid .perfil-rat-val { color: #ffc107; }
.perfil-rat-chip.rat-lo  .perfil-rat-val { color: #ff5252; }
.perfil-rat-pts { font-size: 0.62rem; color: var(--gris-4); margin-top: 2px; }

/* ════════════════════════════════════════════════════
   HOME — MEJOR DT
   ════════════════════════════════════════════════════ */

.stat-num-sm { font-size: 1rem !important; }

.home-top-dt {
  max-width: 520px;
  margin: 0 auto 2rem;
}
.home-top-dt-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(135deg, rgba(255,215,0,.08), rgba(255,215,0,.03));
  border: 1px solid rgba(255,215,0,.3);
  border-radius: var(--radio);
  padding: 1rem 1.25rem;
}
.home-top-dt-ico  { font-size: 1.8rem; flex-shrink: 0; }
.home-top-dt-info { flex: 1; }
.home-top-dt-label  { font-size: 0.72rem; color: rgba(255,215,0,.7); text-transform: uppercase; letter-spacing: .5px; }
.home-top-dt-nombre { font-family: var(--font-titulo); font-size: 1.4rem; letter-spacing: 1px; color: #ffd700; line-height: 1.1; }
.home-top-dt-club   { font-size: 0.8rem; color: var(--gris-4); margin-top: 2px; }
.home-top-dt-pts    { font-family: var(--font-titulo); font-size: 2rem; color: #ffd700; flex-shrink: 0; }

/* ════════════════════════════════════════════════════
   ADMIN — MÉTRICAS Y LOG
   ════════════════════════════════════════════════════ */

.admin-met-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.admin-met-stat {
  background: var(--gris-2);
  border: 1px solid var(--gris-3);
  border-radius: var(--radio);
  padding: 0.75rem 1rem;
  text-align: center;
  min-width: 110px;
}
.admin-met-titulo {
  font-size: 0.78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--gris-4);
  margin-bottom: 0.5rem;
}
.admin-met-list { display: flex; flex-direction: column; gap: 0.3rem; }
.admin-met-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.4rem 0.75rem;
  background: var(--gris-2);
  border-radius: 6px;
  font-size: 0.85rem;
}
.admin-met-rank  { font-weight: 700; color: var(--verde); width: 18px; }
.admin-met-name  { flex: 1; }
.admin-met-count { color: var(--gris-4); font-size: 0.78rem; }

/* ── Vice-capitán ─────────────────────────────────────────── */
.vice-btn {
  position: absolute;
  bottom: 2px;
  right: 2px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 3px;
  color: rgba(255,255,255,0.5);
  font-size: 9px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  transition: all .15s;
}
.vice-btn:hover,
.vice-btn.vice-activo {
  background: #2196f3;
  border-color: #2196f3;
  color: #fff;
}
.meq3-vice-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: #2196f3;
  color: #fff;
  font-size: 9px;
  font-weight: 700;
  width: 16px;
  height: 16px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;

/* ═══════════════════════════════════════════════════════════
   MI EQUIPO v4 — diseño profesional
   ═══════════════════════════════════════════════════════════ */

/* ── Wrapper general ─────────────────────────────────────── */
.meq4-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 0 3rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ── Header ──────────────────────────────────────────────── */
.meq4-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  background: var(--gris-2);
  border: 1px solid var(--gris-3);
  border-radius: 14px;
  padding: 1.4rem 1.6rem;
}
.meq4-header-main { flex: 1; min-width: 0; }
.meq4-club-name {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--blanco);
  letter-spacing: -0.5px;
  line-height: 1.1;
  margin-bottom: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meq4-header-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--gris-4);
}
.meq4-meta-dt strong { color: var(--blanco); }
.meq4-meta-sep { opacity: 0.3; }
.meq4-meta-saved { color: var(--gris-4); }
.meq4-pts-box {
  text-align: right;
  flex-shrink: 0;
}
.meq4-pts-num {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--verde);
  line-height: 1;
  letter-spacing: -1px;
}
.meq4-pts-lbl {
  font-size: 0.62rem;
  color: var(--gris-4);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 2px;
}
.meq4-fechas-jugadas {
  font-size: 0.7rem;
  color: var(--gris-4);
  margin-top: 4px;
}

/* ── Historial de fechas ─────────────────────────────────── */
.meq4-historial {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.meq4-hist-chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 0.45rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--gris-3);
  background: var(--gris-2);
  cursor: default;
  min-width: 52px;
  transition: border-color .15s;
}
.meq4-hist-chip:hover { border-color: var(--gris-4); }
.meq4-hist-chip.pos { border-color: rgba(0,200,83,.35); background: rgba(0,200,83,.06); }
.meq4-hist-chip.neg { border-color: rgba(220,80,80,.35); background: rgba(220,80,80,.06); }
.meq4-hist-chip.neu { border-color: var(--gris-3); }
.meq4-hist-fecha {
  font-size: 0.65rem;
  color: var(--gris-4);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.meq4-hist-pts {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--blanco);
}
.meq4-hist-chip.pos .meq4-hist-pts { color: var(--verde); }
.meq4-hist-chip.neg .meq4-hist-pts { color: #e05555; }
.meq4-sin-fechas {
  font-size: 0.8rem;
  color: var(--gris-4);
  padding: 0.5rem 0;
}

/* ── Campo de fútbol ─────────────────────────────────────── */
.meq4-campo {
  position: relative;
  background: linear-gradient(180deg, #1a3a22 0%, #1e4428 40%, #1a3a22 100%);
  border-radius: 14px;
  overflow: hidden;
  padding: 1.8rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  min-height: 420px;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: inset 0 0 60px rgba(0,0,0,0.3);
}
.meq4-campo-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

/* ── Fila del campo ──────────────────────────────────────── */
.meq4-campo-fila {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 1.2rem;
  position: relative;
  z-index: 1;
}

/* ── Slot de jugador ─────────────────────────────────────── */
.meq4-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  position: relative;
  width: 72px;
}
.meq4-slot-banca { width: 68px; }

/* Foto */
.meq4-slot-foto-wrap {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  border: 2.5px solid rgba(255,255,255,0.3);
  background: var(--gris-2);
  flex-shrink: 0;
  transition: border-color .2s;
}
.meq4-slot.tier-d1  .meq4-slot-foto-wrap { border-color: rgba(255,140,0,.8); }
.meq4-slot.tier-d2  .meq4-slot-foto-wrap { border-color: rgba(74,144,255,.8); }
.meq4-slot.tier-vet .meq4-slot-foto-wrap { border-color: rgba(255,210,0,.8); }
.meq4-slot.meq4-cap .meq4-slot-foto-wrap { border-color: var(--verde); box-shadow: 0 0 0 2px rgba(0,200,83,.35); }
.meq4-slot-foto { width: 100%; height: 100%; object-fit: cover; }
.meq4-slot-foto-ph {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  color: rgba(255,255,255,0.6);
  background: rgba(255,255,255,0.05);
}

/* Nombre */
.meq4-slot-nombre {
  font-size: 0.62rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  line-height: 1.2;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,0.7);
}

/* Puntos en campo */
.meq4-slot-pts {
  font-size: 0.6rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 20px;
  text-align: center;
  letter-spacing: 0.3px;
}
.meq4-slot-pts.pos { background: rgba(0,200,83,.25); color: #4eff8e; }
.meq4-slot-pts.neg { background: rgba(220,80,80,.25); color: #ff7070; }
.meq4-slot-pts.neu { background: rgba(255,255,255,.1); color: rgba(255,255,255,.5); }

/* Badges capitán / vice */
.meq4-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.meq4-badge-cap  { background: var(--verde); color: #000; }
.meq4-badge-vice { background: #2196f3; color: #fff; }

/* ── Banco ───────────────────────────────────────────────── */
.meq4-banca {
  background: rgba(0,0,0,.18);
  border-radius: 10px;
  padding: 0.9rem 1.2rem;
  border: 1px solid rgba(255,255,255,0.07);
}
.meq4-banca-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: rgba(255,255,255,0.4);
  margin-bottom: 0.75rem;
}
.meq4-banca-slots {
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}

/* ── Tabla de estadísticas ───────────────────────────────── */
.meq4-stats-section {
  background: var(--gris-2);
  border: 1px solid var(--gris-3);
  border-radius: 14px;
  overflow: hidden;
}
.meq4-stats-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--gris-4);
  padding: 1rem 1.4rem 0.7rem;
  border-bottom: 1px solid var(--gris-3);
}
.meq4-stats-table-wrap {
  overflow-x: auto;
}
.meq4-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
}
.meq4-stats-table th,
.meq4-stats-table td {
  padding: 0.65rem 0.9rem;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.meq4-stats-table tr:last-child td { border-bottom: none; }
.meq4-stats-table thead th {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gris-4);
  background: rgba(255,255,255,0.02);
  white-space: nowrap;
}
.meq4-th-num    { text-align: center; width: 40px; }
.meq4-th-pts    { text-align: center; width: 60px; }
.meq4-th-precio { text-align: right; width: 60px; }
.meq4-td-num    { text-align: center; color: var(--gris-4); }
.meq4-td-pts    { text-align: center; font-weight: 700; }
.meq4-td-precio { text-align: right; color: var(--verde); font-weight: 600; font-size: 0.78rem; }
.meq4-stats-table tbody tr:hover { background: rgba(255,255,255,0.025); }
.meq4-row-sup { opacity: 0.7; }

/* Celda jugador */
.meq4-row-player {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.meq4-row-foto {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1.5px solid var(--gris-3);
}
.meq4-row-foto-ph {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: #000;
}
.meq4-row-foto-ph.tier-d1  { background: rgba(255,140,0,.6); color: #fff; }
.meq4-row-foto-ph.tier-d2  { background: rgba(74,144,255,.6); color: #fff; }
.meq4-row-foto-ph.tier-vet { background: rgba(255,210,0,.6); color: #000; }
.meq4-row-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.meq4-row-nombre {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--blanco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meq4-row-club {
  font-size: 0.67rem;
  color: var(--gris-4);
  display: flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.meq4-row-escudo {
  width: 12px;
  height: 12px;
  object-fit: contain;
  vertical-align: middle;
}
.meq4-row-cap {
  color: var(--verde);
  font-size: 0.75rem;
}
.meq4-row-sup-tag {
  font-size: 0.6rem;
  background: rgba(255,255,255,.1);
  color: var(--gris-4);
  border-radius: 3px;
  padding: 0 3px;
  font-weight: 700;
  letter-spacing: 0.5px;
  vertical-align: middle;
}

/* Valores destacados en tabla */
.meq4-stat-gol  { color: var(--verde); font-weight: 700; }
.meq4-stat-asis { color: #48cae4; font-weight: 700; }
.meq4-stat-am   { color: #f4c430; font-weight: 700; }
.pts-pos { color: var(--verde); }
.pts-neg { color: #e05555; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 600px) {
  .meq4-header { padding: 1rem 1rem; gap: 1rem; }
  .meq4-club-name { font-size: 1.25rem; }
  .meq4-pts-num { font-size: 2rem; }
  .meq4-campo { padding: 1.2rem 0.5rem; gap: 0.8rem; }
  .meq4-slot { width: 56px; }
  .meq4-slot-banca { width: 52px; }
  .meq4-slot-foto-wrap { width: 38px; height: 38px; }
  .meq4-slot-nombre { font-size: 0.55rem; }
  .meq4-campo-fila { gap: 0.7rem; }
  .meq4-stats-table th,
  .meq4-stats-table td { padding: 0.5rem 0.6rem; }
  .meq4-banca-slots { gap: 0.9rem; }
}

/* ═══════════════════════════════════════════════════════════
   MI EQUIPO — player cards compactas
   ═══════════════════════════════════════════════════════════ */

/* ── Wrapper ─────────────────────────────────────────────── */
.mc-wrap {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 0 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* ── Header ──────────────────────────────────────────────── */
.mc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--gris-1);
  border: 1px solid var(--gris-3);
  border-radius: 10px;
  padding: 0.8rem 1.1rem;
}
.mc-club-name {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--blanco);
  letter-spacing: -0.3px;
  line-height: 1.1;
  margin-bottom: 0.18rem;
}
.mc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.22rem;
  font-size: 0.7rem;
  color: var(--gris-4);
}
.mc-meta strong { color: var(--texto); }
.mc-sep { opacity: 0.3; }
.mc-pts-total { flex-shrink: 0; text-align: right; }
.mc-pts-num {
  font-size: 1.9rem;
  font-weight: 900;
  color: var(--verde);
  line-height: 1;
  letter-spacing: -1px;
}
.mc-pts-lbl {
  font-size: 0.62rem;
  color: var(--gris-4);
  margin-top: 1px;
}

/* ── Historial de fechas ─────────────────────────────────── */
.mc-hist {
  display: flex;
  flex-wrap: wrap;
  gap: 0.28rem;
}
.mc-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.28rem;
  padding: 0.2rem 0.55rem;
  border-radius: 5px;
  border: 1px solid var(--gris-3);
  background: var(--gris-1);
  font-size: 0.68rem;
  color: var(--gris-4);
  cursor: default;
  white-space: nowrap;
}
.mc-chip strong { font-weight: 800; color: var(--texto); }
.mc-chip.pos { border-color: rgba(0,200,83,.35); background: rgba(0,200,83,.07); }
.mc-chip.neg { border-color: rgba(220,80,80,.35); background: rgba(220,80,80,.07); }
.mc-chip.pos strong { color: var(--verde); }
.mc-chip.neg strong { color: #e05555; }

/* ── Sección por posición ────────────────────────────────── */
.mc-plantel { display: flex; flex-direction: column; gap: 0.7rem; }
.mc-pos-section { display: flex; flex-direction: column; gap: 0.35rem; }
.mc-pos-label {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding-left: 2px;
}
.mc-pos-fwd   { color: #ff8080; }
.mc-pos-mid   { color: #80c080; }
.mc-pos-def   { color: #7ab3f5; }
.mc-pos-gk    { color: #f5c842; }
.mc-pos-banca { color: var(--gris-4); }

/* ── Grid de cards ───────────────────────────────────────── */
.mc-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 0.45rem;
}

/* ── Card individual ─────────────────────────────────────── */
.mc-card {
  background: var(--gris-1);
  border: 1px solid var(--gris-3);
  border-top-width: 2px;
  border-radius: 8px;
  padding: 0.6rem 0.65rem 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.22rem;
  transition: border-color .15s, background .15s;
}
.mc-card:hover { background: var(--gris-2); border-color: #383838; }
.mc-card.tier-d1  { border-top-color: rgba(255,140,0,.75); }
.mc-card.tier-d2  { border-top-color: rgba(74,144,255,.75); }
.mc-card.tier-vet { border-top-color: rgba(255,210,0,.85); }
.mc-card.mc-card-sup { opacity: 0.58; }

/* Top: foto + pos pill */
.mc-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.18rem;
}
.mc-foto-wrap { position: relative; flex-shrink: 0; }
.mc-foto {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 1.5px solid var(--gris-3);
  display: block;
}
.mc-foto-ph {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  background: rgba(255,255,255,.08);
  border: 1.5px solid var(--gris-3);
}
.mc-badge {
  position: absolute;
  bottom: -2px;
  right: -3px;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  font-size: 7px;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid var(--negro);
}
.mc-cap  { background: var(--verde); color: #000; }
.mc-vice { background: #2196f3;      color: #fff; }

.mc-pos-pill {
  font-size: 0.56rem;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 4px;
  letter-spacing: 0.2px;
  background: rgba(255,255,255,.07);
  color: var(--gris-4);
}
.mc-pos-pill.FWD { background: rgba(255,100,100,.12); color: #ff8888; }
.mc-pos-pill.MID { background: rgba(100,200,100,.12); color: #80c080; }
.mc-pos-pill.DEF { background: rgba(74,144,255,.12);  color: #7ab3f5; }
.mc-pos-pill.GK  { background: rgba(245,200,66,.12);  color: #f5c842; }

/* Nombre */
.mc-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--blanco);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.15;
}

/* Club + precio */
.mc-club-price {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.25rem;
}
.mc-club {
  font-size: 0.62rem;
  color: var(--gris-4);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1;
}
.mc-price {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--verde);
  flex-shrink: 0;
}

/* Stats */
.mc-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.25rem;
  margin-top: 0.25rem;
  padding-top: 0.3rem;
  border-top: 1px solid rgba(255,255,255,.05);
}
.mc-stat {
  font-size: 0.62rem;
  color: var(--gris-4);
  white-space: nowrap;
}
.mc-stat strong { font-weight: 700; }
.mc-gol  strong { color: var(--verde); }
.mc-asis strong { color: #48cae4; }
.mc-save strong { color: #a78bfa; }
.mc-am   strong { color: #f4c430; }

.mc-stat-pts {
  margin-left: auto;
  font-size: 0.7rem;
  font-weight: 800;
  padding: 1px 7px;
  border-radius: 20px;
}
.mc-stat-pts.pos { background: rgba(0,200,83,.14); color: var(--verde); }
.mc-stat-pts.neg { background: rgba(220,80,80,.14); color: #e05555; }
.mc-stat-pts.neu { color: var(--gris-4); }

.mc-no-data {
  font-size: 0.62rem;
  color: var(--gris-4);
  opacity: 0.6;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 560px) {
  .mc-header { gap: 0.6rem; }
  .mc-club-name { font-size: 1rem; }
  .mc-pts-num { font-size: 1.55rem; }
  .mc-cards-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
}

/* ═══════════════════════════════════════════════════════════
   MI EQUIPO — sobre ex-card
   ═══════════════════════════════════════════════════════════ */

/* ── MI EQUIPO — filas compactas estilo Mercado ────────────── */
.meq-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 0 3rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

/* Info bar superior */
.meq-info-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--gris-2);
  border: 1px solid var(--gris-3);
  border-radius: 10px;
  padding: 0.75rem 1.1rem;
}
.meq-info-left { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.meq-club-title { font-size: 1.1rem; font-weight: 800; color: var(--blanco); line-height: 1.1; }
.meq-info-meta  { font-size: 0.7rem; color: var(--gris-4); }
.meq-info-meta strong { color: var(--texto); }
.meq-dot { margin: 0 0.2rem; opacity: 0.35; }
.meq-total-pts { flex-shrink: 0; text-align: right; }
.meq-total-num { display: block; font-size: 1.8rem; font-weight: 900; color: var(--verde); line-height: 1; letter-spacing: -1px; }
.meq-total-lbl { font-size: 0.62rem; color: var(--gris-4); }

/* Historial chips */
.meq-hist-row { display: flex; flex-wrap: wrap; gap: 0.28rem; }
.meq-chip {
  display: inline-flex; align-items: center; gap: 0.28rem;
  padding: 0.18rem 0.55rem; border-radius: 5px;
  border: 1px solid var(--gris-3); background: var(--gris-2);
  font-size: 0.68rem; color: var(--gris-4); white-space: nowrap;
}
.meq-chip strong { font-weight: 800; color: var(--texto); }
.meq-chip.pos { border-color: rgba(0,200,83,.35); background: rgba(0,200,83,.07); }
.meq-chip.neg { border-color: rgba(220,80,80,.35); background: rgba(220,80,80,.07); }
.meq-chip.pos strong { color: var(--verde); }
.meq-chip.neg strong { color: #e05555; }

/* Sección por posición */
.meq-pos-section { display: flex; flex-direction: column; gap: 0.3rem; }
.meq-pos-label { font-size: 0.58rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; padding-left: 2px; }
.meq-pos-fwd   { color: #ff8080; }
.meq-pos-mid   { color: #80c080; }
.meq-pos-def   { color: #7ab3f5; }
.meq-pos-gk    { color: #f5c842; }
.meq-pos-banca { color: var(--gris-4); }

/* Lista de filas (igual que .mkt-list) */
.meq-list { display: flex; flex-direction: column; gap: 0.25rem; }

/* Fila de jugador — hereda .mkt-card, solo overrides */
.mkt-card.meq-row { cursor: pointer; color: inherit; }
.mkt-card.tier-vet { border-left: 3px solid #ffd200; }

/* Suplentes */
.meq-sup { opacity: 0.6; }

/* Badges capitán / vice — inline dentro del nombre */
.meq-badge-cap,
.meq-badge-vice {
  display: inline-flex; align-items: center; justify-content: center;
  width: 14px; height: 14px; border-radius: 50%;
  font-size: 7px; font-weight: 900; vertical-align: middle; margin-left: 2px;
}
.meq-badge-cap  { background: var(--verde); color: #000; }
.meq-badge-vice { background: #2196f3; color: #fff; }

/* Columna derecha: pts + precio */
.meq-right {
  display: flex; flex-direction: column; align-items: flex-end;
  gap: 2px; flex-shrink: 0;
}
.meq-pts-badge {
  font-size: 0.7rem; font-weight: 800;
  padding: 1px 6px; border-radius: 20px; white-space: nowrap;
}
.meq-pts-pos { background: rgba(0,200,83,.18); color: var(--verde); }
.meq-pts-neg { background: rgba(220,80,80,.18); color: #e05555; }
.meq-pts-neu { background: rgba(255,255,255,.08); color: var(--gris-4); }
.meq-price   { font-size: 0.7rem; font-weight: 700; color: var(--verde); }

/* Mini stats bajo el meta */
.meq-stats-mini { font-size: 0.63rem; color: var(--gris-4); margin-top: 1px; }

@media (max-width: 560px) {
  .meq-info-bar { gap: 0.6rem; }
  .meq-club-title { font-size: 0.9rem; }
  .meq-total-num { font-size: 1.4rem; }
}

/* ═══════════════════════════════════════════════════════════
   NAVBAR — Chip de fecha activa
═══════════════════════════════════════════════════════════ */
.nav-fecha-chip {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.02em;
  padding: 0.2rem 0.55rem; border-radius: 50px; white-space: nowrap;
  background: rgba(0,200,83,0.15); color: var(--verde);
  border: 1px solid rgba(0,200,83,0.25);
}

/* ═══════════════════════════════════════════════════════════
   RANKING — Movimiento de posición
═══════════════════════════════════════════════════════════ */
.rk2-th-mov  { width: 2.5rem; text-align: center; color: var(--gris-5); font-size: 0.75rem; }
.rk2-pos-mov { text-align: center; }
.rk2-mov     { font-size: 0.75rem; font-weight: 700; }
.rk2-mov-up   { color: #00e676; }
.rk2-mov-down { color: #ff5252; }
.rk2-mov-neu  { color: var(--gris-4); }

/* ═══════════════════════════════════════════════════════════
   HOME — Dashboard sections
═══════════════════════════════════════════════════════════ */
.home-section   { margin-top: 2.5rem; }
.home-section-title {
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.07em; color: var(--gris-5); margin-bottom: 0.75rem;
}
.home-dash-row  { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.home-dash-card {
  flex: 1; min-width: 220px;
  background: var(--gris-2); border: 1px solid var(--gris-3);
  border-radius: var(--radio); padding: 1rem 1.25rem;
}
.home-dash-card-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--gris-5); margin-bottom: 0.4rem; }
.home-dash-card-val   { font-size: 1.15rem; font-weight: 800; }
.home-dash-card-sub   { font-size: 0.78rem; color: var(--verde); margin-top: 0.2rem; }

.home-prices-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 0.5rem; margin-top: 0.5rem;
}
.home-price-card {
  display: flex; align-items: center; gap: 0.6rem;
  background: var(--gris-2); border: 1px solid var(--gris-3);
  border-radius: var(--radio); padding: 0.45rem 0.7rem;
  text-decoration: none; color: inherit; transition: background .15s;
}
.home-price-card:hover { background: var(--gris-3); }
.home-price-card-delta { font-size: 0.9rem; font-weight: 800; min-width: 3rem; }

.home-top-ranking    { display: flex; flex-direction: column; gap: 0.35rem; }
.home-rank-row       { display: flex; align-items: center; gap: 0.5rem; }
.home-rank-pos       { font-size: 0.85rem; min-width: 1.6rem; }
.home-rank-info      { flex: 1; min-width: 0; }
.home-rank-club      { font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-rank-dt        { font-size: 0.7rem; color: var(--gris-5); }
.home-rank-pts       { font-size: 0.85rem; font-weight: 800; color: var(--verde); white-space: nowrap; }

/* ═══════════════════════════════════════════════════════════
   JUGADOR — Comparar jugadores
═══════════════════════════════════════════════════════════ */
.cmp-search-wrap { position: relative; max-width: 400px; margin-bottom: 1rem; }
.cmp-dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 100;
  background: var(--gris-2); border: 1px solid var(--gris-3);
  border-radius: var(--radio); overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.cmp-dd-item {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.45rem 0.75rem; cursor: pointer; font-size: 0.83rem;
  transition: background .12s;
}
.cmp-dd-item:hover { background: var(--gris-3); }
.cmp-dd-name  { flex: 1; font-weight: 600; }
.cmp-dd-club  { font-size: 0.75rem; color: var(--gris-5); }

.cmp-table-wrap { overflow-x: auto; }
.cmp-table {
  width: 100%; border-collapse: collapse; font-size: 0.85rem;
}
.cmp-table th, .cmp-table td { padding: 0.4rem 0.6rem; }
.cmp-th-player { text-align: center; font-weight: 700; font-size: 0.8rem; padding-bottom: 0.6rem; }
.cmp-th-stat   { width: 40%; text-align: center; }
.cmp-lbl       { text-align: center; font-size: 0.78rem; color: var(--gris-5); font-weight: 600; }
.cmp-val       { text-align: center; font-weight: 700; font-size: 0.9rem; padding: 0.35rem 0.5rem; }
.cmp-table tbody tr:nth-child(odd)  { background: rgba(255,255,255,.02); }
.cmp-table tbody tr:nth-child(even) { background: rgba(255,255,255,.04); }
.cmp-win { color: var(--verde); }

/* ═══════════════════════════════════════════════════════════
   MI EQUIPO — Fila compacta (una línea)
═══════════════════════════════════════════════════════════ */
.meq-fila {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.25rem 0.6rem;
  background: var(--gris-2); border: 1px solid var(--gris-3);
  border-radius: var(--radio); text-decoration: none; color: inherit;
  transition: background .15s; cursor: pointer; min-height: 0;
}
.meq-fila:hover { background: var(--gris-3); }
.meq-fila.tier-d1 { border-left: 3px solid var(--verde); }
.meq-fila.tier-d2 { border-left: 3px solid var(--epic); }
.meq-fila.tier-vet { border-left: 3px solid #ffd200; }
.meq-fila-pos   { flex-shrink: 0; font-size: 0.65rem; padding: 1px 5px; }
.meq-fila-nombre {
  flex: 1; font-size: 0.82rem; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.meq-fila-club {
  display: flex; align-items: center; gap: 0.3rem;
  font-size: 0.72rem; color: var(--gris-5); white-space: nowrap;
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════
   ANIMACIONES GLOBALES
═══════════════════════════════════════════════════════════ */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.95); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-14px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

/* ── HOME ────────────────────────────────────────────────── */
.hero {
  animation: fadeUp .55s cubic-bezier(.22,1,.36,1) both;
}
.home-stats {
  animation: fadeUp .55s .15s cubic-bezier(.22,1,.36,1) both;
}
.home-top-dt {
  animation: fadeUp .5s .25s cubic-bezier(.22,1,.36,1) both;
}

/* ── RANKING ─────────────────────────────────────────────── */
.rk2-outer {
  animation: fadeUp .5s .1s cubic-bezier(.22,1,.36,1) both;
}
.rk2-table tbody tr {
  animation: fadeUp .35s both;
}
.rk2-table tbody tr:nth-child(1)  { animation-delay: .08s; }
.rk2-table tbody tr:nth-child(2)  { animation-delay: .12s; }
.rk2-table tbody tr:nth-child(3)  { animation-delay: .16s; }
.rk2-table tbody tr:nth-child(4)  { animation-delay: .20s; }
.rk2-table tbody tr:nth-child(5)  { animation-delay: .24s; }
.rk2-table tbody tr:nth-child(6)  { animation-delay: .27s; }
.rk2-table tbody tr:nth-child(7)  { animation-delay: .30s; }
.rk2-table tbody tr:nth-child(n+8){ animation-delay: .32s; }

/* ── JUGADORES (explorador) ─────────────────────────────── */
.jug-explorer-filters {
  animation: fadeUp .4s .05s cubic-bezier(.22,1,.36,1) both;
}
.explorer-count {
  animation: fadeIn .3s .2s both;
}
.ex-card {
  animation: scaleIn .35s both;
}
/* Stagger de hasta 12 cartas */
.ex-card:nth-child(1)  { animation-delay: .04s; }
.ex-card:nth-child(2)  { animation-delay: .07s; }
.ex-card:nth-child(3)  { animation-delay: .10s; }
.ex-card:nth-child(4)  { animation-delay: .13s; }
.ex-card:nth-child(5)  { animation-delay: .16s; }
.ex-card:nth-child(6)  { animation-delay: .19s; }
.ex-card:nth-child(7)  { animation-delay: .22s; }
.ex-card:nth-child(8)  { animation-delay: .25s; }
.ex-card:nth-child(9)  { animation-delay: .28s; }
.ex-card:nth-child(10) { animation-delay: .30s; }
.ex-card:nth-child(11) { animation-delay: .32s; }
.ex-card:nth-child(12) { animation-delay: .34s; }
.ex-card:nth-child(n+13){ animation-delay: .36s; }

/* ── PERFIL JUGADOR ──────────────────────────────────────── */
.perfil-breadcrumb {
  animation: slideRight .35s .05s cubic-bezier(.22,1,.36,1) both;
}
.perfil-header {
  animation: fadeUp .45s .1s cubic-bezier(.22,1,.36,1) both;
}
.perfil-section {
  animation: fadeUp .4s both;
}
.perfil-section:nth-child(3) { animation-delay: .12s; }
.perfil-section:nth-child(4) { animation-delay: .18s; }
.perfil-section:nth-child(5) { animation-delay: .24s; }
.perfil-section:nth-child(6) { animation-delay: .30s; }
.perfil-section:nth-child(7) { animation-delay: .35s; }

/* ── MI EQUIPO — animaciones manejadas en el template inline ── */

/* ── ARMAR EQUIPO ────────────────────────────────────────── */
.panel-cancha {
  animation: slideRight .45s .05s cubic-bezier(.22,1,.36,1) both;
}
.panel-lista {
  animation: slideLeft .45s .1s cubic-bezier(.22,1,.36,1) both;
}
.cancha-slot {
  transition: transform .15s, box-shadow .15s, border-color .15s;
}
.cancha-slot:hover {
  transform: scale(1.04);
  box-shadow: 0 0 0 2px var(--verde);
}

/* ── MERCADO ─────────────────────────────────────────────── */
.mkt-card {
  animation: fadeUp .35s both;
  transition: background .15s, border-color .15s, transform .12s, box-shadow .15s;
}
.mkt-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.35);
}
.mkt-card:nth-child(1)  { animation-delay: .04s; }
.mkt-card:nth-child(2)  { animation-delay: .07s; }
.mkt-card:nth-child(3)  { animation-delay: .10s; }
.mkt-card:nth-child(4)  { animation-delay: .13s; }
.mkt-card:nth-child(5)  { animation-delay: .16s; }
.mkt-card:nth-child(6)  { animation-delay: .19s; }
.mkt-card:nth-child(7)  { animation-delay: .22s; }
.mkt-card:nth-child(8)  { animation-delay: .25s; }
.mkt-card:nth-child(n+9){ animation-delay: .28s; }

/* ── NAVBAR chip ─────────────────────────────────────────── */
.nav-fecha-chip {
  animation: fadeIn .4s .3s both;
  transition: background .2s, color .2s;
}

/* ── DROPDOWN comparar ───────────────────────────────────── */
.cmp-dropdown[style*="block"] {
  animation: scaleIn .18s cubic-bezier(.22,1,.36,1) both;
  transform-origin: top center;
}

/* ── Respeta preferencia de movimiento reducido ──────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-delay:    .01ms !important;
    transition-duration:.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   TOAST — Alertas flotantes
═══════════════════════════════════════════════════════════ */

#toast-container {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
  max-width: 340px;
  width: calc(100vw - 3rem);
}
.toast {
  background: var(--gris-2);
  border: 1px solid var(--gris-3);
  border-radius: 8px;
  padding: 0.75rem 1.1rem;
  font-size: 0.85rem;
  color: var(--blanco);
  pointer-events: all;
  cursor: pointer;
  animation: slideLeft .25s cubic-bezier(.22,1,.36,1) both;
  word-break: break-word;
  box-shadow: 0 4px 16px rgba(0,0,0,.45);
  line-height: 1.4;
}
.toast-ok    { border-left: 3px solid var(--verde); }
.toast-error { border-left: 3px solid #ff5252; }
.toast-info  { border-left: 3px solid #48cae4; }
.toast-out   { animation: fadeOut .25s forwards; }

@keyframes fadeOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}

/* ═══════════════════════════════════════════════════════════
   HAMBURGER — Botón menú móvil
═══════════════════════════════════════════════════════════ */

.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  background: none;
  border: 1px solid var(--gris-3);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: border-color .2s;
}
.nav-hamburger:hover { border-color: var(--verde); }
.nav-hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--blanco);
  border-radius: 2px;
  transition: transform .22s cubic-bezier(.22,1,.36,1), opacity .18s;
  transform-origin: center;
}
.nav-hamburger-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ═══════════════════════════════════════════════════════════
   NAV — Candado para usuarios no autenticados
═══════════════════════════════════════════════════════════ */

.nav-link-locked {
  opacity: 0.45;
  cursor: pointer;
}
.nav-link-locked:hover {
  opacity: 0.7;
  color: var(--blanco);
}

/* ═══════════════════════════════════════════════════════════
   ERROR PAGES — 404 / 500
═══════════════════════════════════════════════════════════ */

.error-page {
  text-align: center;
  padding: 6rem 2rem 4rem;
  animation: fadeUp .5s cubic-bezier(.22,1,.36,1) both;
}
.error-code {
  font-family: var(--font-titulo);
  font-size: clamp(5rem, 20vw, 9rem);
  color: var(--verde);
  line-height: 1;
  letter-spacing: -2px;
}
.error-title {
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  font-weight: 700;
  color: var(--blanco);
  margin: 0.5rem 0 1rem;
}
.error-sub {
  font-size: 0.95rem;
  color: var(--gris-5);
  max-width: 380px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}
.error-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════
   RANKING — Club link
═══════════════════════════════════════════════════════════ */

.rk2-club-link {
  text-decoration: none;
  color: inherit;
  transition: color .15s;
}
.rk2-club-link:hover {
  color: var(--verde);
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════
   EQUIPO DT (vista pública) — equipo_dt.html
═══════════════════════════════════════════════════════════ */

.eqdt-header-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.eqdt-back {
  font-size: 0.85rem;
  color: var(--gris-5);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: color .15s;
}
.eqdt-back:hover { color: var(--verde); }
.eqdt-share-btn {
  font-size: 0.82rem;
  padding: 0.4rem 0.9rem;
}
.eqdt-score-bar {
  background: var(--gris-2);
  border: 1px solid var(--gris-3);
  border-radius: var(--radio);
  padding: 1rem 1.4rem;
  display: flex;
  gap: 2rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.eqdt-score-bar-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.eqdt-score-label {
  font-size: 0.72rem;
  color: var(--gris-5);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.eqdt-score-val {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--verde);
  font-family: var(--font-titulo);
}
.eqdt-score-val.neg { color: #ff5252; }

/* Share button in Mi Equipo header */
.meq-share-btn {
  font-size: 0.82rem;
  padding: 0.4rem 0.85rem;
}

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE MÓVIL — Nuevos componentes
═══════════════════════════════════════════════════════════ */

@media (max-width: 700px) {

  /* ── Toast en móvil: ancho completo, pegado a los bordes ── */
  #toast-container {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    max-width: none;
    width: auto;
  }

  /* ── Error page ── */
  .error-page { padding: 4rem 1.5rem 3rem; }

  /* ── Equipo DT (vista pública) ── */
  .eqdt-header-wrap { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .eqdt-score-bar { gap: 1rem; padding: 0.85rem 1rem; }
  .eqdt-score-val { font-size: 1.15rem; }

  /* ── Mi Equipo share btn ── */
  .meq-share-btn { font-size: 0.78rem; padding: 0.35rem 0.7rem; }
}

@media (max-width: 480px) {
  /* ── Toast más compacto ── */
  .toast { font-size: 0.8rem; padding: 0.65rem 0.9rem; }

  /* ── Error actions column ── */
  .error-actions { flex-direction: column; align-items: center; }
  .error-actions .btn { width: 100%; max-width: 260px; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   TAB SYSTEM — Sliding pill + content transitions
   ═══════════════════════════════════════════════════════════════ */

/* ── Sliding pill (liga-tabs-bar) ───────────────────────────── */
.liga-tabs-bar {
  position: relative;
}

/* Pill element injected by JS */
.tab-pill {
  position: absolute;
  top: 0; left: 0;
  border-radius: 6px;
  background: var(--gris-2);
  border: 2px solid var(--verde);
  z-index: 0;
  pointer-events: none;
  will-change: left, width, top, height;
  transition:
    left   0.32s cubic-bezier(.22,1,.36,1),
    width  0.32s cubic-bezier(.22,1,.36,1),
    top    0.32s cubic-bezier(.22,1,.36,1),
    height 0.32s cubic-bezier(.22,1,.36,1);
}

/* Once pill is active, the buttons themselves become transparent */
.liga-tabs-bar.tab-pill-ready .liga-tab {
  background:   transparent !important;
  border-color: transparent !important;
  position: relative;
  z-index: 1;
}
.liga-tabs-bar.tab-pill-ready .liga-tab.active {
  background:   transparent !important;
  border-color: transparent !important;
}
.liga-tabs-bar.tab-pill-ready .liga-tab:hover:not(.active) {
  border-color: transparent !important;
  color: var(--texto);
}

/* ── Sliding underline (meq-liga-tabs, auth-tabs) ───────────── */
.meq-liga-tabs,
.auth-tabs {
  position: relative;
}
.meq-liga-tab,
.auth-tab {
  position: relative;
  z-index: 1;
}
.tab-underline {
  position: absolute;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--color-text-primary, #f0f0f0);
  z-index: 0;
  pointer-events: none;
  will-change: left, width;
  transition:
    left  0.32s cubic-bezier(.22,1,.36,1),
    width 0.32s cubic-bezier(.22,1,.36,1);
}
/* Hide individual active border once underline is initialized */
.meq-liga-tabs.tab-pill-ready .meq-liga-tab {
  border-bottom-color: transparent !important;
  transition: color 0.15s !important;
}
.auth-tabs.tab-pill-ready .auth-tab {
  border-bottom-color: transparent !important;
  border-color: transparent !important;
  transition: color 0.18s !important;
}

/* ── Content exit / enter keyframes ────────────────────────── */
@keyframes tabExitLeft {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(-22px) scale(.985); }
}
@keyframes tabExitRight {
  from { opacity: 1; transform: translateX(0) scale(1); }
  to   { opacity: 0; transform: translateX(22px) scale(.985); }
}
@keyframes tabEnterFromRight {
  from { opacity: 0; transform: translateX(28px) scale(.99); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes tabEnterFromLeft {
  from { opacity: 0; transform: translateX(-28px) scale(.99); }
  to   { opacity: 1; transform: translateX(0) scale(1); }
}

.tab-exit-left        { animation: tabExitLeft       0.13s cubic-bezier(.4,0,1,1)   forwards; }
.tab-exit-right       { animation: tabExitRight      0.13s cubic-bezier(.4,0,1,1)   forwards; }
.tab-enter-from-right { animation: tabEnterFromRight 0.26s cubic-bezier(.22,1,.36,1) both; }
.tab-enter-from-left  { animation: tabEnterFromLeft  0.26s cubic-bezier(.22,1,.36,1) both; }

/* ══════════════════════════════════════════════════════════════
   ANIMACIONES DE ENTRADA — POR PÁGINA
   ══════════════════════════════════════════════════════════════ */

/* ── Global: encabezado de página (.page-header) ────────────── */
.page-header {
  animation: fadeUp 0.42s 0.04s cubic-bezier(.22,1,.36,1) both;
}

/* ── Login / Registro ───────────────────────────────────────── */
.auth-card {
  animation: fadeUp 0.45s cubic-bezier(.22,1,.36,1) both;
}

/* ── Mercado: tabs y columnas ───────────────────────────────── */
.mkt-wrap .liga-tabs-bar {
  animation: fadeUp 0.38s 0.08s cubic-bezier(.22,1,.36,1) both;
}
.mkt-col:nth-child(1) {
  animation: fadeUp 0.4s 0.12s cubic-bezier(.22,1,.36,1) both;
}
.mkt-col:nth-child(2) {
  animation: fadeUp 0.4s 0.20s cubic-bezier(.22,1,.36,1) both;
}

/* ── Ranking: tabs de liga ──────────────────────────────────── */
.liga-tabs-bar:not(.prf-liga-tabs) {
  animation: fadeUp 0.38s 0.07s cubic-bezier(.22,1,.36,1) both;
}
/* Evitar doble animación cuando el liga-tabs-bar está dentro de
   un padre ya animado (.jug-explorer-filters, .mkt-wrap) */
.jug-explorer-filters .liga-tabs-bar,
.mkt-wrap .liga-tabs-bar {
  animation: none;
}
.mkt-wrap .liga-tabs-bar {
  animation: fadeUp 0.38s 0.08s cubic-bezier(.22,1,.36,1) both;
}

/* ── Ayuda: hero, índice, secciones con stagger ─────────────── */
.ayuda-hero {
  animation: fadeUp 0.5s 0.04s cubic-bezier(.22,1,.36,1) both;
}
.ayuda-indice {
  animation: fadeUp 0.45s 0.10s cubic-bezier(.22,1,.36,1) both;
}
.ayuda-seccion {
  animation: fadeUp 0.4s 0.12s cubic-bezier(.22,1,.36,1) both;
}
/* Las secciones son hijos 3..N de .ayuda-wrap (1=hero, 2=indice) */
.ayuda-seccion:nth-child(4)  { animation-delay: 0.16s; }
.ayuda-seccion:nth-child(5)  { animation-delay: 0.20s; }
.ayuda-seccion:nth-child(6)  { animation-delay: 0.24s; }
.ayuda-seccion:nth-child(7)  { animation-delay: 0.28s; }
.ayuda-seccion:nth-child(8)  { animation-delay: 0.32s; }
.ayuda-seccion:nth-child(9)  { animation-delay: 0.36s; }
.ayuda-seccion:nth-child(10) { animation-delay: 0.38s; }
.ayuda-seccion:nth-child(11) { animation-delay: 0.40s; }

/* ── Perfil DT ──────────────────────────────────────────────── */
.prf-header           { animation: fadeUp 0.42s 0.05s cubic-bezier(.22,1,.36,1) both; }
.prf-liga-tabs        { animation: fadeUp 0.40s 0.10s cubic-bezier(.22,1,.36,1) both; }
.prf-stats-row        { animation: fadeUp 0.40s 0.15s cubic-bezier(.22,1,.36,1) both; }
.prf-club-info        { animation: fadeUp 0.38s 0.20s cubic-bezier(.22,1,.36,1) both; }
.prf-historial-titulo { animation: fadeUp 0.35s 0.23s cubic-bezier(.22,1,.36,1) both; }
.prf-historial        { animation: fadeUp 0.35s 0.26s cubic-bezier(.22,1,.36,1) both; }
.prf-actions          { animation: fadeUp 0.35s 0.29s cubic-bezier(.22,1,.36,1) both; }
.prf-stat-card {
  transition: transform 0.15s, box-shadow 0.15s;
}
.prf-stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.prf-hist-chip {
  transition: transform 0.12s, border-color 0.12s;
}
.prf-hist-chip:hover {
  transform: translateY(-2px);
  border-color: var(--gris-4);
}

/* ── liga-tabs-inline pill (builder D1/D2) ──────────────────── */
.liga-tabs-inline {
  position: relative;
}
.liga-tabs-inline.tab-pill-ready .liga-tab {
  background:   transparent !important;
  border-color: transparent !important;
  position: relative;
  z-index: 1;
}
.liga-tabs-inline.tab-pill-ready .liga-tab.active {
  background:   transparent !important;
  border-color: transparent !important;
}
.liga-tabs-inline.tab-pill-ready .liga-tab:hover:not(.active) {
  border-color: transparent !important;
  color: var(--texto);
}

/* ── formacion-btns pill (verde) ────────────────────────────── */
.formacion-btns {
  position: relative;
}
.formacion-btns .tab-pill {
  background:    var(--verde);
  border-color:  var(--verde);
}
.formacion-btns.tab-pill-ready .formacion-btn {
  background:   transparent !important;
  border-color: transparent !important;
  color:        var(--texto) !important;
  position: relative;
  z-index: 1;
}
.formacion-btns.tab-pill-ready .formacion-btn.active {
  color: var(--negro) !important;
}
.formacion-btns.tab-pill-ready .formacion-btn:hover:not(.active) {
  color: var(--verde) !important;
}

/* ── filtros-pos pill (verde, pill-shape) ───────────────────── */
.filtros-pos {
  position: relative;
}
.filtros-pos .tab-pill {
  background:    var(--verde);
  border-color:  var(--verde);
  border-radius: 20px;
}
.filtros-pos.tab-pill-ready .filtro-btn {
  background:   transparent !important;
  border-color: transparent !important;
  color:        var(--texto) !important;
  position: relative;
  z-index: 1;
}
.filtros-pos.tab-pill-ready .filtro-btn.active {
  color: var(--negro) !important;
}
.filtros-pos.tab-pill-ready .filtro-btn:hover:not(.active) {
  color: var(--verde) !important;
}

/* ── Feedback táctil: micro-press en todos los tabs ─────────── */
.liga-tab:active,
.formacion-btn:active,
.filtro-btn:active,
.meq-liga-tab:active,
.auth-tab:active {
  transform: scale(0.93);
}

/* ── Onboarding (index, non-logged-in) ──────────────────────── */
.onboarding-wrap {
  max-width: 600px;
  margin: 2.5rem auto 0;
  padding: 0 1rem 3rem;
}
.onboarding-titulo {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gris-4, #999);
  margin-bottom: 1.2rem;
  text-align: center;
}
.onboarding-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.onboarding-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 0.5px solid var(--borde, #e8e8e8);
}
.onboarding-step:last-child { border-bottom: none; }
.ob-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--verde, #16a34a);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.ob-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--texto, #111);
  margin-bottom: 3px;
}
.ob-desc {
  font-size: 13px;
  color: var(--gris-4, #777);
  line-height: 1.45;
}
.onboarding-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.5rem;
  flex-wrap: wrap;
}

/* ── Blocker overlay (errores que impiden una acción) ────────── */
#blocker-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
#blocker-overlay.blocker-visible {
  display: flex;
  background: rgba(0,0,0,.75);
  backdrop-filter: blur(4px);
  animation: blockerFadeIn .2s ease both;
}
#blocker-overlay.blocker-visible #blocker-card {
  animation: blockerCardPop .25s cubic-bezier(.34,1.4,.64,1) both;
}
@keyframes blockerFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#blocker-card {
  background: #1c1c1c;
  border: 1.5px solid #ff4444;
  border-radius: 16px;
  padding: 2rem 2rem 1.6rem;
  max-width: 400px;
  width: 100%;
  text-align: center;
  box-shadow: 0 0 0 6px rgba(255,68,68,.12), 0 32px 80px rgba(0,0,0,.8);
}
@keyframes blockerCardPop {
  from { opacity: 0; transform: scale(.84) translateY(16px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}
#blocker-icon {
  font-size: 2.6rem;
  line-height: 1;
  margin-bottom: .75rem;
}
#blocker-msg {
  font-size: 15px;
  font-weight: 500;
  color: #f0f0f0;
  line-height: 1.55;
  margin-bottom: 1.4rem;
}
#blocker-btn {
  background: #ff4444;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background .14s;
  width: 100%;
}
#blocker-btn:hover { background: #e63333; }

/* ── Toast error más agresivo ────────────────────────────────── */
.toast-error {
  background: #2a0a0a !important;
  border-left: 3px solid #ff4444 !important;
  color: #ffcccc !important;
  font-weight: 500 !important;
}

/* ── Banner partido — más agresivo ───────────────────────────── */
.fecha-activa-banner.banner-partido {
  background: #4a0000 !important;
  border-color: #ff4444 !important;
  color: #ff9999 !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  animation: bannerPulse 2s ease-in-out infinite !important;
}
@keyframes bannerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,68,68,0); }
  50%       { box-shadow: 0 0 0 4px rgba(255,68,68,.25); }
}

/* ── Shake en botón cuando falla validación ──────────────────── */
@keyframes btnShake {
  0%,100% { transform: translateX(0); }
  20%     { transform: translateX(-6px); }
  40%     { transform: translateX(6px); }
  60%     { transform: translateX(-4px); }
  80%     { transform: translateX(4px); }
}
.btn-shake { animation: btnShake .4s cubic-bezier(.36,.07,.19,.97) both; }