/* ========================================
   INDEPAR - Eventos de la comunidad (IND-0132, IND-0163)
   Complementa comunidad.v5.css; usa los tokens de styles.v8.css (paleta v1.0,
   docs/identidad/sistema-visual.md). Cada serie lleva un color propio SOLO
   como borde o filete (arena, rosa y durazno nunca van como texto): el texto
   siempre es --texto / --texto-2 y los chips se apoyan en --fondo-alt-2.
   IND-0163: quince series (seis nuevas con el mismo color que en la consola),
   chip «En línea», sede confirmada y precio publicado por actividad.
   ======================================== */

/* --- Colores por serie (quince series del calendario v4) --- */
.ev__destacado--cenas,   .ev__evento--cenas,   .ev__ficha--cenas   { --serie: var(--marca); }
.ev__destacado--cafe,    .ev__evento--cafe,    .ev__ficha--cafe    { --serie: var(--acento-texto); }
.ev__destacado--yoga,    .ev__evento--yoga,    .ev__ficha--yoga    { --serie: var(--superficie-oscura-2); }
.ev__destacado--fisico,  .ev__evento--fisico,  .ev__ficha--fisico  { --serie: #0F766E; }
.ev__destacado--hilos,   .ev__evento--hilos,   .ev__ficha--hilos   { --serie: var(--rosa); }
.ev__destacado--paginas, .ev__evento--paginas, .ev__ficha--paginas { --serie: var(--marca-oscuro); }
.ev__destacado--agua,    .ev__evento--agua,    .ev__ficha--agua    { --serie: var(--gris-1); }
.ev__destacado--madera,  .ev__evento--madera,  .ev__ficha--madera  { --serie: var(--acento); }
.ev__destacado--velas,   .ev__evento--velas,   .ev__ficha--velas   { --serie: #BE123C; }
.ev__destacado--tango,   .ev__evento--tango,   .ev__ficha--tango   { --serie: var(--marca-profundo); }
.ev__destacado--caminata,.ev__evento--caminata,.ev__ficha--caminata{ --serie: #4D7C0F; }
.ev__destacado--escena,  .ev__evento--escena,  .ev__ficha--escena  { --serie: #4338CA; }
.ev__destacado--corbata, .ev__evento--corbata, .ev__ficha--corbata { --serie: var(--acento-claro); }
.ev__destacado--curso,   .ev__evento--curso,   .ev__ficha--curso   { --serie: #374151; }
.ev__destacado--online,  .ev__evento--online,  .ev__ficha--online  { --serie: #0369A1; }

/* --- Intro --- */
.ev__aviso {
  max-width: 720px;
  margin: 1.25rem 0 0;
  padding: 0.9rem 1.2rem;
  background: var(--fondo-alt);
  border-left: 4px solid var(--acento);
  border-radius: 0 8px 8px 0;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--texto);
}

.ev__aviso a {
  color: var(--marca);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- Títulos de mes --- */
.ev__mes-titulo {
  font-size: 1.3rem;
  margin: 2rem 0 0.9rem;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.ev__mes-titulo:first-of-type {
  margin-top: 0.5rem;
}

.ev__mes-n {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--texto-2);
}

/* --- Chip de serie --- */
.ev__serie {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--texto-2);
  background: var(--fondo-alt-2);
  border-left: 3px solid var(--serie, var(--acento));
  border-radius: 0 6px 6px 0;
  padding: 0.15rem 0.6rem 0.15rem 0.5rem;
  line-height: 1.4;
}

/* Chips juntos (serie + modalidad) y chip «En línea» */
.ev__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}

.ev__modalidad {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--texto);
  background: var(--fondo-alt);
  border: 1px solid var(--linea);
  border-radius: 6px;
  padding: 0.12rem 0.55rem;
  line-height: 1.4;
}

/* Precio publicado de una actividad (solo cuando las tarifas están confirmadas) */
.ev__precio {
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}

/* --- Este mes no te pierdas --- */
.ev__destacados {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.2rem;
  margin-bottom: 1rem;
}

.ev__destacado {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-top: 4px solid var(--serie, var(--acento));
  border-radius: 8px;
  padding: 1.3rem 1.4rem 1.4rem;
}

.ev__destacado .k {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--acento-texto);
  font-weight: 700;
}

.ev__destacado h3 {
  color: var(--marca);
  font-size: 1.12rem;
  line-height: 1.35;
  margin: 0;
}

.ev__destacado p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--texto-2);
}

.ev__destacado .ev__serie {
  align-self: flex-start;
  margin-top: auto;
}

/* --- Calendario por mes --- */
.ev__salto {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0 0 1rem;
}

.ev__salto a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0.4rem 1rem;
  border: 1px solid var(--linea);
  border-radius: 999px;
  background: var(--blanco);
  color: var(--marca);
  font-weight: 600;
  font-size: 0.92rem;
}

.ev__salto a:hover,
.ev__salto a:focus-visible {
  background: var(--fondo-alt);
}

.ev__mes {
  margin-top: 0.5rem;
}

.ev__dias,
.ev__lista {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ev__dia {
  border-top: 1px solid var(--linea);
  padding: 1rem 0 1.1rem;
}

.ev__dia:last-child {
  border-bottom: 1px solid var(--linea);
}

.ev__fecha {
  font-family: 'Merriweather', Georgia, serif;
  font-size: 1.02rem;
  color: var(--texto);
  margin: 0 0 0.6rem;
}

.ev__evento {
  display: grid;
  grid-template-columns: 7.5rem 1fr auto;
  gap: 0.4rem 1rem;
  align-items: start;
  padding: 0.55rem 0 0.55rem 0.9rem;
  border-left: 3px solid var(--serie, var(--acento));
  margin-bottom: 0.4rem;
}

.ev__hora {
  font-weight: 600;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ev__cuerpo {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  min-width: 0;
}

.ev__nombre {
  color: var(--texto);
  font-weight: 500;
  line-height: 1.45;
}

.ev__cuerpo .ev__chips {
  align-self: flex-start;
}

.ev__sede {
  font-size: 0.88rem;
  color: var(--texto-2);
  max-width: 14rem;
  text-align: right;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.45rem;
}

/* IND-0164: botón «Apartar lugar» por actividad (≥ 44 px de alto) */
.ev__apartar {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.4rem 1rem;
  border: 1.5px solid var(--marca);
  border-radius: 8px;
  color: var(--marca);
  font-weight: 600;
  font-size: 0.92rem;
  white-space: nowrap;
  text-decoration: none;
}

.ev__apartar:hover,
.ev__apartar:focus-visible {
  background: var(--marca);
  color: #fff;
}

/* --- Catálogo de series --- */
.ev__series {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.3rem;
  margin-top: 1.5rem;
}

.ev__ficha {
  background: var(--blanco);
  border: 1px solid var(--linea);
  border-left: 4px solid var(--serie, var(--acento));
  border-radius: 8px;
  padding: 1.3rem 1.4rem 1.4rem;
}

.ev__ficha h3 {
  color: var(--marca);
  font-size: 1.12rem;
  line-height: 1.35;
  margin: 0 0 0.5rem;
}

.ev__ficha > p {
  margin: 0 0 0.9rem;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--texto-2);
}

.ev__ficha dl {
  margin: 0;
  display: grid;
  gap: 0.45rem;
}

.ev__ficha dl > div {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.5rem;
  font-size: 0.9rem;
  line-height: 1.5;
}

.ev__ficha dt {
  font-weight: 700;
  color: var(--acento-texto);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding-top: 0.15rem;
}

.ev__ficha dd {
  margin: 0;
  color: var(--texto);
}

/* --- Celular --- */
@media (max-width: 640px) {
  .ev__evento {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .ev__sede {
    max-width: none;
    text-align: left;
    align-items: flex-start;
  }

  .ev__ficha dl > div {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}