/* ═══ Eventos (R-43) ══════════════════════════════════════════════════
   Una tarjeta por evento (card--accent-success: los eventos van en verde),
   con el estado en chips, la descripción con formato (.rich-text), los
   datos en una lista, la barra de cupo, la acción (anotarse o cancelar) y
   los anotados en un desplegable (.disclosure de base.css).
   Mobile-first: los datos van en dos columnas desde el celular. */

.events-list { margin-top: var(--space-lg); }
.events-list__items {
  display: grid;
  gap: var(--space-md);
}

.event-card {
  display: grid;
  gap: var(--space-sm);
}
.event-card__title { overflow-wrap: anywhere; }

/* ── Datos: cuándo y cuántos anotados ────────────────────────────── */
.event-card__facts {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}
.event-card__fact-label {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}
.event-card__fact-value {
  color: var(--color-data);
  font-family: var(--font-display);
  font-size: var(--font-size-heading-sm);
  font-weight: var(--font-weight-heavy);
  line-height: var(--line-height-heading);
  font-variant-numeric: tabular-nums;
}

/* ── Barra de cupo: verde mientras hay lugar, roja cuando no alcanza ── */
.event-capacity {
  height: var(--capacity-bar-height);
  overflow: hidden;
  background: var(--color-surface-raised);
  border-radius: var(--radius-pill);
}
.event-capacity__fill {
  display: block;
  width: var(--bar-value, 0%);
  height: 100%;
  background: var(--color-success);
  border-radius: inherit;
}
.event-capacity--full .event-capacity__fill { background: var(--color-danger); }

/* ── Acción: anotarse o cancelar ─────────────────────────────────── */
.event-card__action {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  padding-top: var(--space-xs);
  border-top: 1px solid var(--color-border);
}
.event-card__registered {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-text-muted);
}
.event-card__registered strong { color: var(--color-text); }

.event-registration {
  display: grid;
  gap: var(--space-sm);
  width: 100%;
}

/* ── Anotados ─────────────────────────────────────────────────────── */
.event-roster {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.event-roster__item {
  padding: var(--space-3xs) var(--space-sm);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  overflow-wrap: anywhere;
}

@media (min-width: 700px) {
  .event-card { padding: var(--space-lg); }
  /* El selector y el botón en una sola línea */
  .event-registration {
    grid-template-columns: 1fr auto;
    align-items: end;
  }
}