/* /eventos (1192; carteles desde la 1194): la agenda y la ficha de un evento.
   El porqué, en SCHEMA. */

.ev-mandos {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-sm);
  margin-bottom: var(--e-lg);
}

.ev-provincia {
  min-height: 36px;
  padding: 0 var(--e-xl) 0 var(--e-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--text);
  font: inherit;
  font-size: var(--t-sm);
}

/* ── El cartel: una franja baja con el ambiente del evento (1196) ──
   Sin imagen subida, el color sale del LOGO, muy difuminado y oscurecido
   (`.ev-ambiente`); sin logo, del color del evento. Es siempre oscura: lo de
   encima es blanco o va en su chapa. */
.ev-cartel {
  --ev-color: var(--navy-solid);
  position: relative;
  display: grid;
  place-items: center;
  height: 88px;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(60% 130% at 25% 60%, color-mix(in srgb, var(--ev-color) 70%, transparent), transparent 65%),
    radial-gradient(40% 90% at 78% 20%, color-mix(in srgb, var(--ev-color) 30%, transparent), transparent 60%),
    #12161a;
}

.ev-ambiente {
  position: absolute;
  inset: -40%;
  z-index: -1;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(32px) saturate(1.4) brightness(0.55);
}

.ev-cartel.con-imagen {
  background-color: var(--ice);
  background-position: center;
  background-size: cover;
}

.ev-tipo,
.ev-cuenta {
  position: absolute;
  padding: 2px var(--e-sm);
  border-radius: var(--radius-pill);
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.03em;
}

.ev-tipo {
  top: var(--e-sm);
  left: var(--e-sm);
  background: rgba(0, 0, 0, 0.5);
  color: var(--blanco-fijo);
  text-transform: uppercase;
}

.ev-cuenta {
  right: var(--e-sm);
  bottom: var(--e-sm);
  background: #e4b44a;
  color: #1c1405;
}

/* La fecha, en una pastilla blanca como un sello. */
.ev-pastilla {
  position: absolute;
  top: var(--e-sm);
  right: var(--e-sm);
  display: grid;
  min-width: 48px;
  padding: var(--e-xs) var(--e-sm);
  border-radius: var(--radius-md);
  background: var(--blanco-fijo);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  color: #10202c;
  line-height: 1.05;
  text-align: center;
}

.ev-pastilla small {
  color: #c62a5c;
  font-size: var(--t-2xs);
  font-weight: 700;
  letter-spacing: 0.06em;
}

.ev-pastilla b {
  font-family: var(--font-display);
  font-size: var(--t-xl);
  font-weight: 800;
}

/* ── El logo (o sus siglas en su color) ── */
.ev-logo {
  --ev-color: var(--navy-solid);
  position: relative;
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 48px;
  height: 48px;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--ev-color);
  color: var(--blanco-fijo);
}

.ev-logo b {
  font-family: var(--font-display);
  font-size: var(--t-xs);
  letter-spacing: 0.04em;
}

.ev-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--white);
}

.ev-logo-cartel {
  width: 56px;
  height: 56px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}

.ev-logo-cartel b { font-size: var(--t-sm); }

.ev-logo.grande {
  width: 104px;
  height: 104px;
  margin: 4px;
  border-radius: var(--radius-xl);
  box-shadow: 0 0 0 4px var(--bg), var(--shadow-md);
}

.ev-logo.grande b { font-size: var(--t-2xl); }

/* ── La agenda: carteles por mes ── */
.ev-mes {
  display: flex;
  align-items: center;
  gap: var(--e-md);
  margin: var(--e-xl) 0 var(--e-md);
  color: var(--text-mid);
  font-family: var(--font-display);
  font-size: var(--t-lg);
}

.ev-mes::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.ev-carteles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--e-lg);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ev-tarjeta {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--white);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.ev-tarjeta:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.ev-tarjeta.pasado { opacity: 0.55; }
.ev-tarjeta.pasado .ev-cartel { filter: grayscale(1); }

.ev-tarjeta-enlace {
  display: flex;
  flex-direction: column;
  color: var(--text);
  text-decoration: none;
}

.ev-tarjeta-texto {
  display: grid;
  gap: 2px;
  padding: var(--e-md) var(--e-md) 0;
  min-width: 0;
}

.ev-tarjeta-texto strong {
  font-family: var(--font-display);
  font-size: var(--t-lg);
  line-height: 1.2;
}

.ev-tarjeta-enlace:hover strong { color: var(--navy); }

.ev-tarjeta-texto small {
  overflow: hidden;
  color: var(--text-mid);
  font-size: var(--t-xs);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ev-tarjeta-pie {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-sm) var(--e-md);
  margin-top: auto;
  padding: var(--e-md);
}

.ev-desde {
  margin-left: auto;
  color: var(--warning);
  font-size: var(--t-sm);
  font-weight: 700;
}

.ev-van {
  display: inline-flex;
  align-items: center;
  gap: var(--e-xs);
  min-width: 0;
  color: var(--text-mid);
  font-size: var(--t-xs);
  white-space: nowrap;
}

.ev-caras { display: inline-flex; }

.ev-cara {
  display: inline-grid;
  background-size: cover;
  background-position: center;
  flex-shrink: 0;
  place-items: center;
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--white);
  color: var(--blanco-fijo);
  font-size: var(--t-2xs);
  font-weight: 700;
}

.ev-caras .ev-cara + .ev-cara { margin-left: calc(-1 * var(--e-sm)); }

/* «Voy» es una entrada (1197): muescas a los lados (una máscara) y un talón
   troquelado con cuántos van, en el color de la sección; ya marcado, en
   verde suave. Los colores son tokens: en oscuro el rosa es claro y el texto
   oscuro (`--acento-texto`). */
.ev-voy {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
  align-items: stretch;
  min-height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--acento), color-mix(in srgb, var(--acento) 78%, var(--blanco-fijo)));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--acento) 35%, transparent);
  color: var(--acento-texto);
  font: inherit;
  font-family: var(--font-display);
  font-size: var(--t-md);
  font-weight: 800;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s var(--ease);
  -webkit-mask: radial-gradient(circle 7px at 0 50%, transparent 6.5px, #000 7px) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 6.5px, #000 7px) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 7px at 0 50%, transparent 6.5px, #000 7px) left / 51% 100% no-repeat, radial-gradient(circle 7px at 100% 50%, transparent 6.5px, #000 7px) right / 51% 100% no-repeat;
}

.ev-voy:hover { transform: translateY(-1px) rotate(-1deg); color: var(--acento-texto); }

.ev-voy-cuerpo {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: var(--e-sm);
  padding: 0 var(--e-lg);
}

.ev-voy-talon {
  display: grid;
  place-items: center;
  min-width: 40px;
  padding: 0 var(--e-md) 0 var(--e-sm);
  border-left: 2px dashed color-mix(in srgb, var(--acento-texto) 45%, transparent);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}

.ev-voy[aria-pressed='true'] {
  background: var(--success-bg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--success) 50%, transparent);
  color: var(--success);
}

.ev-voy[aria-pressed='true'] .ev-voy-talon { border-left-color: color-mix(in srgb, var(--success) 45%, transparent); }

.ev-voy.peq { min-height: 40px; font-size: var(--t-sm); }
.ev-voy.peq .ev-voy-cuerpo { padding: 0 var(--e-md); }
.ev-voy.peq .ev-voy-talon { min-width: 32px; padding: 0 var(--e-sm); }

/* Los atajos de la ficha: círculos de 44 con la palabra debajo. */
.ev-atajos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--e-sm);
}

.ev-atajo {
  display: grid;
  justify-items: center;
  gap: var(--e-xs);
  min-width: 56px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text-mid);
  font: inherit;
  font-size: var(--t-xs);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.ev-atajo-ic {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--ice);
  color: var(--text);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}

.ev-atajo:hover { color: var(--text); }
.ev-atajo:hover .ev-atajo-ic { background: color-mix(in srgb, var(--acento) 16%, var(--ice)); color: var(--acento); }

.ev-desde + .ev-voy { margin-left: 0; }
.ev-van + .ev-voy { margin-left: auto; }

.ev-pasados { margin-top: var(--e-xl); }

/* ── La ficha: el cartel a lo ancho y la cabecera con todo lo que se lee ── */
.ev-volver {
  display: inline-flex;
  align-items: center;
  gap: var(--e-xs);
  min-height: 44px;
  margin-bottom: var(--e-sm);
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
}

.ev-cartel-ficha {
  height: 140px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
}

.ev-cartel-ficha .ev-tipo,
.ev-cartel-ficha .ev-cuenta {
  font-size: var(--t-xs);
}

.ev-cartel-ficha .ev-cuenta {
  top: var(--e-md);
  right: var(--e-md);
  bottom: auto;
}

.ev-cartel-ficha .ev-tipo {
  top: var(--e-md);
  left: var(--e-md);
}

.ev-cab {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    'logo texto acciones'
    'pie pie pie';
  gap: var(--e-lg) var(--e-xl);
  align-items: start;
  margin-bottom: var(--e-xl);
  padding: 0 var(--e-xl) var(--e-xl);
  border: 1px solid var(--border);
  border-top: 0;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  background: var(--white);
}

.ev-cab > .ev-logo {
  grid-area: logo;
  margin-top: -56px;
}

.ev-cab-texto {
  grid-area: texto;
  display: grid;
  justify-items: start;
  gap: var(--e-xs);
  min-width: 0;
  padding-top: var(--e-lg);
}

.ev-cab h1 {
  margin: 0;
  font-size: var(--t-3xl);
  line-height: 1.1;
  text-wrap: balance;
  overflow-wrap: anywhere;
}

.ev-cuando-largo {
  margin: 0;
  color: var(--text);
  font-weight: 600;
}

.ev-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-xs);
}

.ev-chapa {
  padding: 1px var(--e-sm);
  border-radius: var(--radius-pill);
  background: var(--ice);
  color: var(--acento);
  font-size: var(--t-2xs);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ev-desc {
  max-width: 70ch;
  margin: var(--e-xs) 0 0;
  color: var(--text-mid);
  white-space: pre-line;
}

/* El pie de la cabecera (1198): los datos a la izquierda y los atajos a la
   derecha, a la misma altura (PINGU: «abajo de la tarjeta, a la derecha de la
   ubicación»). */
.ev-cab-pie {
  grid-area: pie;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-md) var(--e-xl);
  padding-top: var(--e-md);
  border-top: 1px solid var(--border);
}

/* Dónde, juegos, web, Instagram y TCG Map Spain: chapas como las de una tienda. */
.ev-datos {
  display: flex;
  flex: 1 1 320px;
  flex-wrap: wrap;
  align-self: center;
  gap: var(--e-sm);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--t-sm);
}

.ev-datos li {
  display: inline-flex;
  align-items: center;
  gap: var(--e-xs);
  min-height: 36px;
  max-width: 100%;
  padding: 0 var(--e-md);
  border-radius: var(--radius-pill);
  background: var(--ice);
  font-weight: 600;
}

.ev-datos svg {
  flex-shrink: 0;
  color: var(--acento);
}

.ev-datos span,
.ev-datos a {
  overflow-wrap: anywhere;
}

.ev-datos a { color: inherit; }

.ev-acciones {
  grid-area: acciones;
  width: 272px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--e-sm);
  padding-top: var(--e-lg);
}

.ev-acciones > * {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-xs);
}

.ev-oculto {
  min-height: 44px;
  color: var(--text-mid);
  font-size: var(--t-sm);
}

/* La rejilla de la ficha (1196, PINGU: «que esté bien alineada»): las cajas
   de una fila miden lo mismo. Arriba Entradas y, al lado, Quién va (y Cuándo
   si los días tienen horarios distintos); abajo, Dónde a lo ancho. */
.ev-rejilla {
  display: grid;
  align-items: stretch;
  gap: var(--e-lg);
}

@media (min-width: 900px) {
  .ev-rejilla { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .ev-r-ancha { grid-column: 1 / -1; }
}

.ev-r-lado {
  display: flex;
  flex-direction: column;
  gap: var(--e-lg);
  min-width: 0;
}

.ev-r-lado > :last-child { flex: 1; }

.ev-donde {
  display: grid;
  align-items: center;
  gap: var(--e-lg);
}

@media (min-width: 900px) {
  .ev-donde { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
}

.ev-donde-texto {
  display: grid;
  justify-items: start;
  gap: var(--e-sm);
}

.ev-donde-texto h2 { margin: 0; }

.ev-caja {
  display: grid;
  align-content: start;
  gap: var(--e-md);
  padding: var(--e-xl);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  background: var(--white);
}

.ev-caja h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-lg);
}

/* Las entradas, como entradas: con su talón troquelado. */
.ev-entradas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr));
  gap: var(--e-md);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ev-entrada {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--e-md) var(--e-xl) var(--e-md) var(--e-md);
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--ice);
}

.ev-entrada::after {
  content: '';
  position: absolute;
  top: 0;
  right: var(--e-lg);
  bottom: 0;
  border-left: 2px dashed var(--border-strong);
}

.ev-entrada b { font-size: var(--t-sm); }

.ev-entrada-precio {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  font-weight: 800;
  line-height: 1.15;
}

.ev-entrada small {
  color: var(--text-mid);
  font-size: var(--t-xs);
}

.ev-entrada.vip {
  border-color: color-mix(in srgb, #e4b44a 55%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, #e4b44a 22%, var(--ice)), var(--ice) 70%);
}

.ev-entrada.vip b,
.ev-entrada.vip .ev-entrada-precio { color: var(--warning); }

.ev-entrada.gratis .ev-entrada-precio { color: var(--success); }

.ev-comprar {
  align-self: flex-start;
  margin-top: var(--e-xs);
  color: var(--navy);
  font-size: var(--t-sm);
  font-weight: 700;
}

/* Los días, cada uno con su horario. */
.ev-dias {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr));
  gap: var(--e-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ev-dia {
  display: flex;
  align-items: center;
  gap: var(--e-md);
  padding: var(--e-sm) var(--e-md);
  border-radius: var(--radius-lg);
  background: var(--ice);
}

.ev-dia b {
  font-family: var(--font-display);
  font-size: var(--t-2xl);
  line-height: 1;
}

.ev-dia span {
  color: var(--text-mid);
  font-size: var(--t-sm);
  line-height: 1.3;
}

.ev-dia em {
  display: block;
  color: var(--text);
  font-style: normal;
  font-weight: 600;
}

.ev-cuantos { margin: 0; }
.ev-cuantos b { font-family: var(--font-display); font-size: var(--t-xl); }
.ev-cuantos small { color: var(--text-dim); }

.ev-gente {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--e-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.ev-gente a {
  display: flex;
  align-items: center;
  gap: var(--e-sm);
  min-height: 44px;
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
}

.ev-gente a span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dónde: un plano dibujado que lleva al mapa de verdad. */
.ev-mapa {
  position: relative;
  display: grid;
  place-items: center;
  height: 120px;
  border-radius: var(--radius-lg);
  background:
    linear-gradient(90deg, transparent 48%, color-mix(in srgb, var(--navy) 25%, transparent) 48% 52%, transparent 52%),
    linear-gradient(0deg, transparent 58%, color-mix(in srgb, var(--navy) 18%, transparent) 58% 61%, transparent 61%),
    linear-gradient(35deg, transparent 30%, color-mix(in srgb, var(--text) 6%, transparent) 30% 33%, transparent 33%),
    var(--ice);
}

.ev-mapa-pin {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--acento);
  color: var(--acento-texto);
  box-shadow: var(--shadow-md);
}

/* «Cómo llegar», tarjeta-enlace (1197): el icono en su cuadrito, lo que hace
   y la flecha. */
.ev-llegar {
  display: flex;
  align-items: center;
  gap: var(--e-md);
  width: 100%;
  min-height: 52px;
  padding: var(--e-xs) var(--e-md) var(--e-xs) var(--e-xs);
  border-radius: var(--radius-lg);
  background: var(--ice);
  color: var(--text);
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s var(--ease);
}

.ev-llegar:hover { background: color-mix(in srgb, var(--acento) 10%, var(--ice)); color: var(--text); }

.ev-llegar > svg { margin-left: auto; color: var(--text-dim); }

.ev-llegar small {
  display: block;
  color: var(--text-mid);
  font-size: var(--t-xs);
  font-weight: 400;
}

.ev-llegar-ic {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--acento) 16%, var(--ice));
  color: var(--acento);
}

/* ── El móvil: un cartel a lo ancho y la cabecera en una columna ── */
@media (max-width: 700px) {
  /* Los filtros, en UNA fila que se desliza (1040). */
  .ev-mandos {
    flex-wrap: nowrap;
    margin-inline: calc(-1 * var(--e-lg));
    padding-inline: var(--e-lg);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .ev-mandos > * { flex-shrink: 0; }
  .ev-cartel-ficha { height: 88px; }

  .ev-datos { gap: var(--e-xs); font-size: var(--t-xs); }
  .ev-datos li { min-height: 32px; padding: 0 var(--e-sm); }

  .ev-cab {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      'logo .'
      'texto texto'
      'acciones acciones'
      'pie pie';
    gap: var(--e-md);
    padding: 0 var(--e-lg) var(--e-lg);
  }

  .ev-cab > .ev-logo { margin-top: -40px; }
  .ev-logo.grande { width: 72px; height: 72px; }
  .ev-logo.grande b { font-size: var(--t-xl); }
  .ev-cab-texto { padding-top: 0; }
  .ev-cab h1 { font-size: var(--t-2xl); }

  .ev-acciones {
    width: auto;
    padding-top: 0;
  }

  .ev-cab-pie { padding-top: var(--e-md); }
  .ev-cab-pie .ev-atajos { flex: 1 1 100%; justify-content: space-around; }

  .ev-caja { padding: var(--e-lg); }
}

@media (prefers-reduced-motion: reduce) {
  .ev-tarjeta,
  .ev-voy,
  .ev-atajo-ic,
  .ev-llegar { transition: none; }

  .ev-tarjeta:hover,
  .ev-voy:hover { transform: none; }
}