/* A-LAB — Equipos (directorio de clubes). Usa alab-tokens.css, alab-ui.css y alab-shell.css.
   Las clases de las tarjetas las genera equipos.js: no renombrar. */

.page--wide { max-width: none; }
[hidden] { display: none !important; }

.teams-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.teams-toolbar__search { width: 280px; }
.teams-toolbar__season { width: 110px; }

.teams-toolbar__sort { width: 150px; }

/* Grilla ------------------------------------------------------- */
.teams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }

.team-card {
  display: flex; flex-direction: column; gap: 14px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  color: var(--ink); text-decoration: none; cursor: pointer;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease), transform .15s var(--ease);
}
.team-card:hover { border-color: var(--brand); box-shadow: var(--shadow-float); transform: translateY(-2px); text-decoration: none; color: var(--ink); }
.team-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.tc-top { display: flex; align-items: center; gap: 12px; min-width: 0; }
.tc-logo { width: 44px; height: 44px; object-fit: contain; flex: none; }
.tc-name { flex: 1; min-width: 0; font-family: var(--font-display); font-size: 1.1rem; font-weight: 500; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; overflow-wrap: anywhere; }
.tc-pos { flex: none; font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 600; color: var(--brand); background: var(--ok-bg); border-radius: 999px; padding: 3px 9px; font-variant-numeric: tabular-nums; }

.tc-stats { display: flex; align-items: center; gap: 14px; font-size: var(--fs-sm); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tc-stats b { font-family: var(--font-mono); font-weight: 600; color: var(--ink); font-size: var(--fs-md); }
.tc-form { margin-left: auto; display: inline-flex; gap: 4px; }
.tc-dot { width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center; font-family: var(--font-mono); font-size: 10px; font-weight: 600; color: #fff; }
.tc-dot--G { background: var(--brand); }
.tc-dot--E { background: #b5ad9c; }
.tc-dot--P { background: #c0533f; }
.tc-coach { font-size: var(--fs-sm); color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.loader, .empty-msg {
  grid-column: 1 / -1; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 56px 20px; color: var(--ink-3); font-size: var(--fs-md); text-align: center;
}

@media (max-width: 760px) {
  .teams-toolbar { width: 100%; }
  .teams-toolbar__search { flex: 1 1 200px; width: auto; }
  .teams-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
  }