/* ══════════════════════════════════════════════════════════════════════════════════
   Spec 032 · Directorio de canchas.

   Todo sale de tokens.css: ni un #hex ni un px sueltos (sistema de diseño, CONGELADO).
   Las acciones son botones de 44 px de alto: se tocan en la calle, con una mano y con
   prisa (lección de UX-012).
   ══════════════════════════════════════════════════════════════════════════════════ */

.cancha-card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.cancha-card__nombre {
  font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl);
  color: var(--color-text); line-height: 1.1;
}

.cancha-card__zona {
  font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-muted);
}

.cancha-card__dir { margin: 0; font-size: var(--text-sm); color: var(--color-text-2); }

/* Se envuelven en cuantas filas hagan falta: con tres acciones no caben en línea en un
   móvil estrecho, y partir un botón es peor que bajarlo. */
.cancha-card__acciones { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.cancha-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; padding: 0 var(--space-3);
  font-size: var(--text-sm); font-weight: 600;
  color: var(--color-text); text-decoration: none;
  background: var(--color-surface-2); border: 1px solid var(--color-border);
  border-radius: var(--radius-2xl);
}

.cancha-btn:hover { border-color: var(--color-primary); color: var(--color-primary); }

/* El número, más pequeño y apagado: acompaña al botón, no compite con él. */
.cancha-btn__sub { font-weight: 400; font-size: var(--text-xs); color: var(--color-text-muted); }

/* El CTA ocupa toda la fila y va en verde de marca: es la única acción que devuelve a la
   app; las otras tres mandan fuera. */
.cancha-btn--cta {
  justify-content: center; width: 100%; margin-top: var(--space-1);
  color: var(--color-bg); background: var(--color-primary); border-color: var(--color-primary);
}

.cancha-btn--cta:hover { color: var(--color-bg); opacity: .9; }

/* ── Buscador (delta 2026-08-24) ─────────────────────────────────────────────────
   El campo manda y el botón ocupa lo justo; en móvil estrecho el botón baja solo. */
.cancha-buscador { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.cancha-buscador .app-field { flex: 1 1 12rem; min-width: 0; }

/* El contador de partidos: existe para explicar el orden, no para competir con el nombre. */
.cancha-card__jugadas {
  margin: 0; font-size: var(--text-xs); color: var(--color-text-muted);
}

/* Aviso del filtro por distrito: informa sin gritar, y lleva la salida pegada. */
.cancha-aviso {
  margin: 0; font-size: var(--text-sm); color: var(--color-text-2);
}
.cancha-aviso a { color: var(--color-primary); }