/* Paleta de la ficha: mismo tema global lima/noche del resto del sitio
   (cookie home_theme, toggle del header) — noche es la base. */
:root, :root[data-theme="noche"] {
  --bg: #121214; --fg: #ededed; --dim: #cfcfd6; --muted: #a9a9b2; --faint: #7a7a83;
  --line: #2c2c31; --line-soft: #242428; --field: #26262b; --field-line: #33333a;
  --border: #3a3a42; --danger: #ff6b6b;
  --ph-a: #1e1e22; --ph-b: #26262b; --fav-off: #5a5a63; --warn: #f0c419;
  --accent: #B8F500; --accent-fg: #0B0B0D;
}
:root[data-theme="lima"] {
  --bg: #f8faf9; --fg: #111827; --dim: #333; --muted: #6b7280; --faint: #9ca3af;
  --line: #e5e7eb; --line-soft: #f0f0f0; --field: #f4f4f4; --field-line: #eee;
  --border: #ccc; --danger: #d33;
  --ph-a: #ececec; --ph-b: #f4f4f4; --fav-off: #bbb; --warn: #a3790a;
  --accent: #B8F500; --accent-fg: #0B0B0D;
  --accent-ink: color-mix(in srgb, var(--accent) 45%, #1f3d00);
}

html, body { background: var(--bg); }

.event { max-width: 56rem; margin: 0 auto; padding: 1.25rem; font-family: system-ui, sans-serif; color: var(--fg); }

/* Móvil: una columna, orden natural del DOM (título, flyer, resto).
   Escritorio: título y flyer vuelven a su posición original — flyer a la
   izquierda, título arriba de la columna derecha, ambos vía grid-area. */
.event__body { display: grid; gap: 1.25rem; }
@media (min-width: 48rem) {
  .event__body {
    /* minmax(0, 1fr), no 1fr: con 1fr, una palabra larguísima en la descripción ensanchaba la columna
       derecha y dejaba la del flyer en 0 px (se veía el evento sin flyer). */
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    grid-template-areas: "notice notice" "aside title" "aside main";
    column-gap: 2.5rem; row-gap: 0; align-items: start;
  }
  .event__past-notice { grid-area: notice; }
  .event__head { grid-area: title; }
  /* El menú de arriba es fijo (.appnav, ~3,3 rem): sin este margen el flyer se metía debajo al hacer scroll. */
  .event__aside { grid-area: aside; position: sticky; top: 5rem; }
  .event__main { grid-area: main; }
}

/* Franja de quien administra el evento: un enlace, no un botón bajo el flyer. */
.event__admin { margin: 2rem 0 0; text-align: center; color: var(--muted); font-size: .85rem; }
.event__manage { margin-left: .25rem; color: var(--fg); font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }
.event__manage:hover { color: var(--accent-ink, var(--accent)); }
.event__flyer { aspect-ratio: 4 / 5; width: 100%; border-radius: 12px; object-fit: cover; display: block; }
.event__flyer--placeholder { background: repeating-linear-gradient(45deg, var(--ph-a), var(--ph-a) 12px, var(--ph-b) 12px, var(--ph-b) 24px); display: flex; align-items: center; justify-content: center; color: var(--faint); font-size: .85rem; }

.event__past-notice {
  margin: 0 0 2rem; padding: .7rem 1rem; border-radius: 9px;
  background: color-mix(in srgb, var(--warn) 18%, transparent);
  color: var(--warn); font-size: .9rem; font-weight: 600;
}
.event__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; margin: 0 0 .25rem; }
.event__name { flex: 1 1 14rem; min-width: 0; margin: 0; font-size: 2.1rem; line-height: 1.1; letter-spacing: -.02em; overflow-wrap: anywhere; }
.event__head-tools { display: flex; align-items: center; gap: .5rem; }
/* «Guardar» junto al título: estrella y texto en una pastilla, no un ícono suelto bajo el flyer. */
.event__head .favorite-toggle { display: inline-flex; align-items: center; gap: .4rem; padding: .4rem .8rem; border: 1px solid var(--line); border-radius: 999px; color: var(--fg); font-size: .85rem; font-weight: 600; line-height: 1.2; }
.event__head .favorite-toggle:hover { border-color: var(--fg); }
.event__head .favorite-toggle svg { width: 1rem; height: 1rem; }
.event__popular { font-size: .7rem; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); }

.event__details { margin: 1.1rem 0 0; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.event__detail { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: .75rem; padding: .85rem 1rem; align-items: center; }
.event__detail + .event__detail { border-top: 1px solid var(--line); }
.event__detail dt { color: var(--faint); font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.event__detail dt svg { display: block; }
.vh { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.event__detail dd { min-width: 0; margin: 0; color: var(--fg); font-weight: 600; line-height: 1.35; }
.event__producer { display: flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--fg); }
.event__producer-link { color: inherit; text-decoration: none; }
.event__producer-link:hover { color: var(--accent-ink, var(--accent)); text-decoration: underline; text-underline-offset: 3px; }
.event__producer-logo { width: 1.5rem; height: 1.5rem; border-radius: 50%; object-fit: cover; }
.event__address { margin: .6rem 0 0; color: var(--dim); font-size: .85rem; font-weight: 400; }
@media (max-width: 28rem) {
  .event__detail { grid-template-columns: 1fr; gap: .2rem; }
}
.event__detail-title, .event__detail-sub { display: block; }
.event__detail-sub { margin-top: .15rem; color: var(--muted); font-size: .85rem; font-weight: 400; }
/* Escritorio: fecha y lugar en dos columnas con un divisor, sin caja. */
@media (min-width: 40rem) {
  .event__details.event__meta { display: grid; grid-template-columns: 1fr 1fr; border: 0; border-radius: 0; overflow: visible; }
  .event__meta .event__detail { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; padding: .4rem 1.5rem; }
  .event__meta .event__detail:first-child { padding-left: 0; }
  .event__meta .event__detail + .event__detail { border-top: 0; border-left: 1px solid var(--line); }
  .event__meta .event__detail dt { color: var(--muted); }
  .event__meta .event__detail dt svg { width: 1.7rem; height: 1.7rem; }
  .event__meta .event__detail-title { font-size: 1.1rem; }
}

.event__social { margin: .75rem 0 0; font-size: .85rem; color: var(--muted); }

.event__age { display: inline-block; padding: .2rem .55rem; border: 1px solid var(--danger); color: var(--danger); border-radius: 6px; font-size: .8rem; font-weight: 600; }

.event__description { margin: 1.1rem 0 0; padding: 1.1rem 1rem; border: 1px solid var(--line); border-radius: 12px; color: var(--dim); }
.event__description-title { margin: 0 0 .6rem; color: var(--fg); font-size: 1rem; font-weight: 700; }
.event__description-body { line-height: 1.55; overflow-wrap: anywhere; }
.event__description-body p { margin: 0 0 .7rem; }
.event__description-body p:last-child { margin-bottom: 0; }
.event__description-body .event-desc__heading { margin: 1.1rem 0 .4rem; color: var(--fg); line-height: 1.25; }
.event__description-body h3.event-desc__heading { font-size: 1.15rem; }
.event__description-body h4.event-desc__heading { font-size: 1rem; }
.event__description-body .event-desc__heading:first-child { margin-top: 0; }

.event__buybox { margin-top: 2rem; padding: .3rem 1.25rem 1.35rem; border: 1px solid var(--line); border-radius: 12px; }

.event__tickets { margin-top: .5rem; }
.event__tier {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "info qty" "price qty";
  align-items: center; column-gap: 1rem; row-gap: .2rem; padding: 1rem 0; border-bottom: 1px solid var(--line);
}
.event__tier > .event__tier-info { grid-area: info; }
.event__tier > .event__tier-price { grid-area: price; }
.event__tier > :last-child:not(.event__tier-info):not(.event__tier-price) { grid-area: qty; }
.event__tier:last-child { border-bottom: 0; }
.event__tier-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.event__tier-name { font-size: 1.02rem; font-weight: 700; }
.event__tier-name--toggle {
  display: flex; align-items: center; gap: .3rem; padding: 0; border: 0;
  background: none; color: inherit; font: inherit; font-weight: 600; cursor: pointer; text-align: left;
}
.event__tier-chevron { flex-shrink: 0; transition: transform .2s ease; }
.event__tier-name--toggle[aria-expanded="true"] .event__tier-chevron { transform: rotate(180deg); }
/* Truco de "grid-template-rows" para animar de alto 0 a auto sin JS. */
.event__tier-desc {
  display: grid; grid-template-rows: 0fr; transition: grid-template-rows .2s ease;
}
.event__tier-desc.is-open { grid-template-rows: 1fr; }
.event__tier-desc-inner {
  overflow: hidden; margin: 0; color: var(--dim); font-size: .82rem; font-weight: 400;
}
.event__tier-desc.is-open .event__tier-desc-inner { margin-top: .2rem; }
.event__discount {
  display: flex; align-items: center; gap: .75rem; margin: .8rem 0 .2rem; padding: .7rem .85rem; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: color-mix(in srgb, var(--accent) 10%, var(--bg));
}
.event__discount-icon { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent); color: var(--accent-fg); }
.event__discount-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .05rem; font-size: .95rem; }
.event__discount-text small { color: var(--muted); font-size: .8rem; }
.event__discount-remove { flex: none; margin-left: auto; display: grid; place-items: center; width: 2.1rem; height: 2.1rem; padding: 0; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.event__discount-remove:hover { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.event__discount--off { justify-content: space-between; border-color: var(--line); background: none; color: var(--muted); font-size: .85rem; }
.event__tier-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .5rem; color: var(--fg); font-size: 1rem; font-weight: 400; }
.event__tier-price-old { order: 2; color: var(--muted); font-size: .85rem; font-weight: 500; }
.event__tier-badge { order: 3; padding: .1rem .5rem; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: .72rem; font-weight: 700; }
/* Estado sin compra (Agotado, Cerrado, Próximamente): pastilla gris. */
.event__tier-soldout { flex: none; padding: .4rem .9rem; border-radius: 8px; background: color-mix(in srgb, var(--fg) 9%, transparent); color: color-mix(in srgb, var(--fg) 75%, var(--muted)); font-size: .88rem; font-weight: 500; }
.event__closed { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--muted); }

.event__map-embed { margin-top: 1.5rem; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.event__map-embed iframe { display: block; width: 100%; height: 260px; border: 0; }

/* YouTube: 16:9 fluido. Spotify: alto fijo recomendado por su propio embed
   (tapa + lista de tracks), no aspect-ratio. */
.event__media-embed { margin-top: 1.5rem; border-radius: 12px; overflow: hidden; aspect-ratio: 16 / 9; }
.event__media-embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.event__media-embed--spotify { aspect-ratio: auto; height: 352px; }

.event__organizer { margin-top: 1.1rem; padding: 1.1rem 1rem; border: 1px solid var(--line); border-radius: 12px; }
.event__organizer-title { margin: 0 0 .6rem; color: var(--fg); font-size: 1rem; font-weight: 700; }
.event__organizer-links { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .75rem; }
.event__organizer-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem; border: 1px solid var(--line); border-radius: 8px;
  color: var(--dim);
}
.event__organizer-link:hover { color: var(--fg); border-color: var(--fg); }

.qty { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.qty button { width: 2.4rem; height: 2.4rem; border: 0; background: var(--field); color: var(--fg); font-size: 1rem; line-height: 1; cursor: pointer; }
.qty button:disabled { color: var(--faint); cursor: not-allowed; }
.qty input { width: 2.5rem; text-align: center; border: 0; border-left: 1px solid var(--field-line); border-right: 1px solid var(--field-line); padding: .35rem 0; background: var(--bg); color: var(--fg); -moz-appearance: textfield; }
.qty input::-webkit-outer-spin-button, .qty input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.event__sum { margin: 1rem 0 0; display: grid; gap: .35rem; font-size: .9rem; }
.event__sum[hidden], .event__sum [hidden] { display: none; }
.event__sum > div { display: flex; justify-content: space-between; gap: 1rem; }
.event__sum dt { color: var(--muted); }
.event__sum dd { margin: 0; }
.event__sum-total { margin-top: .25rem; padding-top: .5rem; border-top: 1px solid var(--border); font-weight: 700; font-size: 1rem; }
.event__sum-total dt { color: inherit; }
.event__buybox-hint { margin: 1rem 0; font-size: .78rem; color: var(--warn); text-align: center; }
.event__buy { display: block; width: 100%; margin-top: .6rem; padding: .9rem; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-fg); font-size: 1rem; font-weight: 600; cursor: pointer; transition: background .15s; }
.event__buy:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 85%, var(--fg)); }
.event__buy:disabled { opacity: .4; cursor: not-allowed; }
.event__signin { display: block; margin-top: 1rem; font-size: .9rem; color: var(--muted); }
.favorite-toggle { border: 0; background: none; padding: .2rem; line-height: 0; color: var(--fav-off); cursor: pointer; }
.favorite-toggle--on { color: var(--fg); }

.event__modal { border: 1px solid var(--line); border-radius: 14px; padding: 2.25rem 2rem; width: min(92vw, 28rem); background: var(--bg); color: var(--fg); box-shadow: 0 20px 60px rgba(0, 0, 0, .4); font: inherit; text-align: center; }
.event__modal::backdrop { background: rgba(0, 0, 0, .6); }
.event__modal p { margin: 0 0 1.75rem; font-size: 1.15rem; line-height: 1.5; }
.event__modal button { display: block; width: 100%; padding: .85rem 1.1rem; border: 0; border-radius: 8px; background: var(--accent); color: var(--accent-fg); font: inherit; font-size: 1rem; font-weight: 600; cursor: pointer; }