/* Página de Eventos - la actividad del club. Reutiliza tokens/base/variant-comunidad (skin B). */

/* --- Calendario: hero + agenda fusionados (info arriba del todo) --- */
.evcal { background: var(--bg); border-bottom: var(--rule) solid var(--ink); padding-top: var(--space-5); }
.evcal h1.display { font-size: clamp(2.4rem, 1.5rem + 4vw, 4rem); line-height: 0.95; }
.evcal__lead { font-size: var(--fs-lg); color: var(--ink-soft); max-width: 54ch; margin-top: var(--space-3); }
.evcal__cta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.evcal__note { font-family: var(--font-mono); font-size: 0.72rem; color: var(--gray-700); margin-top: var(--space-3); }

/* Lo fijo, en una banda con separadores (filete arriba/abajo; NO ficha con borde de 4 lados) */
.fijo { margin: var(--space-6) 0 var(--space-5); display: grid; grid-template-columns: 1fr; align-items: start; border-block: var(--rule) solid var(--ink); }
.fijo__item { padding: var(--space-4) 0; border-top: 2px solid var(--gray-200); }
.fijo__item:first-child { border-top: 0; }
.fijo__item b { display: block; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-lg); line-height: 1.1; letter-spacing: var(--tracking-tight); color: var(--ink); }
.fijo__item span { display: block; margin-top: 0.3rem; font-size: var(--fs-base); color: var(--ink-soft); }
.fijo__item a { color: var(--accent-ink); text-decoration: underline; }

/* Filtros */
.filters { display: flex; flex-wrap: wrap; gap: var(--space-2); padding-block: var(--space-4) var(--space-3); align-items: center; }
.filters__label { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-700); margin-right: var(--space-2); }
.filter { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.5em 1.1em; border: var(--rule) solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; transition: background .12s, color .12s; }
.filter:hover { background: var(--gray-100); }
.filter.on { background: var(--green-dark); color: #fff; }

/* Lista de eventos */
.ev-list { display: grid; gap: var(--space-3); }
.ev { display: grid; grid-template-columns: 64px 1fr; gap: var(--space-3); padding: var(--space-3); border: var(--rule) solid var(--ink); background: #fff; transition: transform .12s ease, box-shadow .12s ease; }
.ev:hover { transform: translate(-3px,-3px); box-shadow: var(--shadow-hard); }
.ev[hidden] { display: none; }
.ev__date { text-align: center; font-family: var(--font-mono); line-height: 1; border-right: var(--rule) solid var(--gray-200); padding-right: var(--space-2); }
.ev__date b { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--ink); }
.ev__date span { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-700); }
.ev__date .rec { font-size: 0.66rem; color: var(--accent-ink); display: block; margin-top: 0.2rem; }
.ev__main { display: flex; flex-direction: column; gap: 0.4rem; }
.ev__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.ev__main h3 { font-size: var(--fs-h3); }
.ev__main p { color: var(--ink-soft); max-width: 60ch; }
.ev__cta { align-self: start; white-space: nowrap; }

/* Tags: tipo (color sólido) + acceso (contorno) */
.tagx { font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.32em 0.6em; border: 2px solid var(--ink); display: inline-flex; align-items: center; }
.tagx--meetup { background: var(--green-dark); color: #fff; }
.tagx--torneo { background: var(--spark-ink); color: #fff; }
.tagx--taller { background: var(--ink); color: #fff; }
.tagx--nino { background: var(--green-dark); color: #fff; }
.tagx--access { background: #fff; color: var(--ink); }
.tagx--free { background: var(--green-tint); color: var(--green-dark); border-color: var(--green-dark); }

/* --- Cierre: apúntate al club --- */
.ev-cierre { background: var(--accent); color: #fff; border-block: var(--rule-thick) solid var(--ink); text-align: center; }
.ev-cierre h2 { color: #fff; max-width: 22ch; margin-inline: auto; }
.ev-cierre p { color: #fff; font-size: var(--fs-lg); max-width: 48ch; margin: var(--space-2) auto 0; }
.ev-cierre__cta { margin-top: var(--space-3); display: inline-flex; flex-wrap: wrap; gap: var(--space-2); justify-content: center; }
.ev-cierre .btn--spark { background: #fff; color: var(--spark-ink); border-color: var(--ink); }
.ev-cierre .btn--ghost { color: #fff; border-color: #fff; }
.ev-cierre__note { color: #fff; font-family: var(--font-mono); font-size: 0.78rem; margin-top: var(--space-3); }

/* Estado vacío del filtro */
.ev-empty { border: var(--rule) solid var(--ink); background: #fff; padding: var(--space-4); font-size: var(--fs-base); color: var(--ink-soft); }
.ev-empty[hidden] { display: none; }
.ev-empty a { color: var(--accent-ink); text-decoration: underline; }

/* --- Breakpoints --- */
@media (min-width: 640px) {
  .ev { grid-template-columns: 80px 1fr auto; align-items: center; }
  .ev__cta { align-self: center; }
}
@media (min-width: 760px) {
  .evcal__head { display: grid; grid-template-columns: 1fr auto; gap: var(--space-5); align-items: end; }
  .evcal__cta { justify-content: flex-end; }
  .fijo { grid-template-columns: repeat(4, 1fr); }
  .fijo__item { padding: var(--space-4) var(--space-4); border-top: 0; border-left: 2px solid var(--gray-200); }
  .fijo__item:first-child { border-left: 0; }
}

/* Badge de fecha: margen suficiente para nombres de mes (AGO-SEP, NOV...), no solo números */
.ev__date { min-width: 3.1em; padding: 0.1em var(--space-3) 0.1em 0.2em; }
.ev__date b { font-size: 1.7rem; letter-spacing: -0.01em; }