/* ============================================================
   ASYNC-LEAGUES — Liga Asincrónica estilo OSM (Fase 5)
   Reusa tokens y componentes de lm-tokens.css/liga-master.css
   (tabla, hints, botones auxiliares) — acá solo lo específico
   de esta pantalla.
   ============================================================ */

.async-wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 20px 16px 60px;
  color: var(--lm-text-1, var(--text));
}
.async-title { font-size: 1.4rem; font-weight: 800; margin: 6px 0 2px; }
.async-sub { color: var(--lm-text-3, var(--text-muted)); font-size: 0.88rem; margin-bottom: 18px; }
.async-lb-title { font-size: 0.95rem; font-weight: 700; margin: 20px 0 8px; }

.async-crear-card {
  background: var(--lm-surface-2, var(--bg-surface));
  border: 1px solid var(--lm-tbl-border, rgba(128,128,128,0.18));
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.async-crear-card h3 { font-size: 0.9rem; margin: 0; }
.async-horarios { display: flex; gap: 8px; }
.async-horario-btn {
  flex: 1; padding: 8px; border-radius: 8px; border: 1px solid var(--lm-tbl-border, rgba(128,128,128,0.2));
  background: transparent; color: var(--lm-text-2, var(--text)); font-weight: 700; cursor: pointer;
}
.async-horario-btn.active { border-color: #059669; background: rgba(5,150,105,0.12); color: #059669; }

.async-liga-list { display: flex; flex-direction: column; gap: 6px; }
.async-liga-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 12px; border-radius: 10px;
  background: var(--lm-surface-2, var(--bg-surface));
  border: 1px solid var(--lm-tbl-border, rgba(128,128,128,0.14));
  cursor: pointer;
}
.async-liga-row:hover { border-color: #059669; }
.async-liga-row-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.async-liga-row-info small { color: var(--lm-text-3, var(--text-muted)); font-size: 0.72rem; }
.async-liga-badge { font-size: 0.68rem; font-weight: 800; padding: 3px 8px; border-radius: 6px; text-transform: uppercase; white-space: nowrap; }
.async-liga-badge.lobby { background: rgba(217,164,6,0.18); color: #d9a406; }
.async-liga-badge.activa { background: rgba(5,150,105,0.18); color: #059669; }

.async-jugadores-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.async-jugador-chip {
  padding: 5px 10px; border-radius: 8px; font-size: 0.8rem; font-weight: 700;
  background: var(--lm-surface-2, var(--bg-surface)); border: 1px solid var(--lm-tbl-border, rgba(128,128,128,0.14));
}
.async-jugador-chip small { color: var(--lm-text-3, var(--text-muted)); font-weight: 500; margin-left: 4px; }

.async-club-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 6px; max-height: 40vh; overflow-y: auto; margin-top: 8px;
}
.async-club-card {
  padding: 8px 10px; border-radius: 8px; border: 1px solid var(--lm-tbl-border, rgba(128,128,128,0.16));
  background: var(--lm-surface-2, var(--bg-surface)); color: var(--lm-text-1, var(--text));
  font-size: 0.78rem; font-weight: 700; text-align: left; cursor: pointer;
}
.async-club-card:hover { border-color: #059669; background: rgba(5,150,105,0.1); }
.async-club-card small { display: block; color: var(--lm-text-3, var(--text-muted)); font-weight: 500; }

.async-mi-club {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 12px; border-radius: 10px;
  background: rgba(5,150,105,0.08); border: 1px solid rgba(5,150,105,0.25);
}