/* =============================================================================
   css/tickets.css — módulo de boletos (eventos, compra, confirmación, boleto)
   =============================================================================
   Convenciones: BEM con prefijo por componente (.tickets-* listado/layout,
   .event-* tarjeta/detalle, .ticket-* formulario/boleto), custom properties
   locales con fallback a los tokens REALES de marca (DESIGN.md sigue sin
   llenar — se usan los hex de styles.css :root directamente, no los
   genéricos que traen blog.css/catalog.css), breakpoints mobile-first en rem.
   ============================================================================= */

.tickets-wrap {
    --_ink:     var(--sombra, #383838);
    --_muted:   var(--archivo, #895961);
    --_accent:  var(--tierra, #C87A6A);
    --_accent-dark: var(--archivo, #895961);
    --_surface: var(--cream, #FAF6F4);
    --_border:  var(--piel, #E1B6AD);
    --_gold:    var(--oro, #AD783C);

    max-width: 72rem;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 4rem;
    color: var(--_ink);
}

.tickets-head { margin-bottom: 2rem; }
.tickets-head__title {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin: 0 0 .5rem;
}
.tickets-head__lead { color: var(--_muted); font-size: 1rem; margin: 0; }

.tickets-empty, .tickets-sold-out {
    background: var(--_surface);
    border: 1px solid var(--_border);
    border-radius: .75rem;
    padding: 2rem 1.5rem;
    text-align: center;
    color: var(--_muted);
}
.tickets-sold-out { color: var(--_accent-dark); font-weight: 500; }

/* ── Listado (eventos.php) ─────────────────────────────────────────────────── */

.tickets-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 1.5rem;
    grid-template-columns: 1fr;
}
@media (min-width: 40rem) { .tickets-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .tickets-grid { grid-template-columns: repeat(3, 1fr); } }

.event-card {
    background: #fff;
    border: 1px solid var(--_border);
    border-radius: .75rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform .2s, box-shadow .2s;
}
.event-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,.08); }

/* Imagen completa con su proporción natural (flyers verticales con el texto
   del evento); solo el hueco sin imagen conserva 16:9. Igual que en
   programme.css. */
.event-card__img {
    width: 100%;
    height: auto;
    display: block;
}
.event-card__img--placeholder {
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--_border), var(--_surface));
}
.event-card__body { padding: 1.25rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.event-card__date {
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--_gold);
}
.event-card__title {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 1.15rem;
    margin: 0;
}
.event-card__venue { font-size: .85rem; color: var(--_muted); margin: 0 0 .5rem; }
.event-card__body .btn-primary { margin-top: auto; align-self: flex-start; }

/* ── Detalle (evento.php) ──────────────────────────────────────────────────── */

/* Completa, sin recorte. max-height: un flyer vertical a todo el ancho mediría
   más que la pantalla y empujaría el precio y el botón de compra muy abajo. */
.event-detail__img { display: block; max-width: 100%; max-height: 80vh; width: auto; height: auto; margin: 0 auto 1.5rem; border-radius: .75rem; }

/* Volver al programa. Un evento se llega casi siempre desde la agenda, y sin
   esta salida la unica forma de regresar es el boton del navegador. */
.event-detail__back {
    display: inline-block;
    margin-bottom: 1rem;
    font-size: .875rem;
    letter-spacing: .04em;
    color: var(--_muted);
    text-decoration: none;
}
.event-detail__back:hover { color: var(--_gold); }

/* Misma etiqueta que encabeza la tarjeta en la agenda, para que al entrar al
   detalle se reconozca que es el mismo evento. */
.event-detail__cat {
    margin: 0 0 .35rem;
    font-size: .75rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--_gold);
}
.event-detail__title {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 3.5vw, 2.25rem);
    margin: 0 0 .5rem;
}
.event-detail__date { font-weight: 500; color: var(--_gold); margin: 0 0 .25rem; }
.event-detail__venue { color: var(--_muted); margin: 0 0 1.5rem; }
.event-detail__desc { line-height: 1.7; margin-bottom: 2rem; }

.ticket-buy-form {
    background: var(--_surface);
    border: 1px solid var(--_border);
    border-radius: .75rem;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 28rem;
}
.ticket-buy-form__field { display: flex; flex-direction: column; gap: .35rem; font-size: .9rem; }
.ticket-buy-form__field select {
    padding: .6rem .75rem;
    border: 1px solid var(--_border);
    border-radius: .4rem;
    font-size: 1rem;
    background: #fff;
}

/* ── Confirmación / cancelación (success.php / cancel.php) ────────────────── */

.tickets-status { max-width: 32rem; margin: 3rem auto; text-align: center; }
.tickets-status h1 { font-family: 'Playfair Display', serif; font-size: 1.6rem; margin-bottom: .75rem; }
.tickets-status p { color: var(--_muted); line-height: 1.6; }

/* ── Boleto (tickets/ver.php — página standalone, sin styles.css global) ──── */

.tickets-wrap--ticket {
    margin: 0;
    padding: 0;
    background: var(--cream, #FAF6F4);
    font-family: 'DM Sans', sans-serif;
    min-height: 100vh;
}
.ticket-view {
    max-width: 24rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    text-align: center;
}
.ticket-view__event {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: 1.4rem;
    margin: 0 0 .35rem;
    color: var(--sombra, #383838);
}
.ticket-view__meta, .ticket-view__venue {
    color: var(--archivo, #895961);
    font-size: .9rem;
    margin: 0 0 .25rem;
}
.ticket-view__qr {
    margin: 1.75rem auto;
    display: flex;
    justify-content: center;
}
.ticket-view__qr svg { width: 100%; max-width: 16rem; height: auto; }
.ticket-view__status {
    font-weight: 600;
    padding: .5rem 1rem;
    border-radius: 999px;
    display: inline-block;
    font-size: .85rem;
}
.ticket-view__status--issued     { background: #E7F3E8; color: #2E7D32; }
.ticket-view__status--checked_in { background: #FDECEA; color: #B0281E; }
.ticket-view__status--void       { background: #EEE; color: #666; }
.ticket-view__hint { color: var(--archivo, #895961); font-size: .8rem; margin-top: 1rem; }

/* ── Candado de compra: se ve cuando no hay sesión de comprador ───────────── */
.ticket-login-gate {
  border: 1px solid #E1B6AD;
  background: #FAF6F4;
  padding: 1.5rem 1.625rem;
  margin: 1.5rem 0 0;
}

.ticket-login-gate__text {
  margin: 0 0 1.125rem;
  line-height: 1.6;
  color: #383838;
}

/* "Ya tengo cuenta": secundario junto al botón principal; en móvil baja a su
   propio renglón. padding-block: área táctil de ~32px (WCAG 2.2 pide 24px). */
.ticket-login-gate__alt {
  display: inline-block;
  margin-left: 1.25rem;
  padding-block: .375rem;
  font-size: .875rem;
  color: var(--archivo, #895961);
}

/* ── Boletos del evento (evento.php): visibles con o sin sesión ─────────── */
.event-tickets {
  margin-top: 2rem;
  scroll-margin-top: 5rem; /* nav fijo de 64px: al volver de /cuenta/ con #tickets no queda tapado */
}

.event-tickets__title {
  margin: 0 0 .75rem;
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem;
  font-weight: 400;
}

.event-tickets__list {
  max-width: 36rem;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--piel, #E1B6AD);
  list-style: none;
}

.event-tier {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .125rem 1rem;
  padding: .875rem 0;
  border-bottom: 1px solid var(--piel, #E1B6AD);
}

.event-tier__name { font-weight: 500; }

.event-tier__price {
  font-family: 'Playfair Display', serif;
  font-size: 1.125rem;
  text-align: right;
  color: var(--archivo, #895961);
}

.event-tier__left {
  grid-column: 1 / -1;
  font-size: .8125rem;
  color: #6f6660; /* 5.3:1 sobre crema */
}

.event-tier.is-sold-out { opacity: .55; }

.event-tickets .ticket-buy-form { margin-top: 1.5rem; }

/* Mismo ancho que la lista: aviso, botones y boletos se leen como una columna. */
.event-tickets .ticket-login-gate { max-width: 36rem; }

@media (max-width: 30rem) {
  .ticket-login-gate__alt { display: block; margin: .75rem 0 0; }
}

/* Quién compra: evita la sorpresa de que los boletos lleguen a un correo
   distinto del que el visitante tenía en mente. */
.ticket-buy-form__who {
  margin: 0 0 1rem;
  font-size: .875rem;
  line-height: 1.5;
  color: #895961;
}

/* ── Confirmación de compra (tickets/success.php) ──────────────────────────
   Centrada y angosta: es una pantalla de una sola idea. El resumen va en
   tarjeta porque el comprador acaba de pagar y lo primero que busca es
   confirmar QUÉ compró, no leer un párrafo.                                 */

.purchase {
    max-width: 34rem;
    margin: 2rem auto 0;
    text-align: center;
}

/* El icono es decorativo (aria-hidden): el estado ya lo dice el <h1>. */
.purchase__mark {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.purchase__mark--ok   { background: #E7F3E8; color: #2f7d3a; }
.purchase__mark--warn { background: #FDECEA; color: #B0281E; }
.purchase__mark--wait { background: var(--_surface); color: var(--_muted); }

.purchase__title {
    font-family: 'Playfair Display', serif;
    font-weight: 600;
    font-size: clamp(1.5rem, 3.5vw, 2rem);
    line-height: 1.25;
    margin: 0 0 .75rem;
    color: var(--_ink);
}

.purchase__lead {
    margin: 0 auto 2rem;
    max-width: 28rem;
    line-height: 1.6;
    color: var(--_muted);
}

.purchase__card {
    text-align: left;
    background: var(--_surface);
    border: 1px solid var(--_border);
    border-radius: .75rem;
    padding: 1.5rem 1.625rem;
    margin: 2rem 0 1.5rem;
}

.purchase__event {
    font-family: 'Playfair Display', serif;
    font-size: 1.1875rem;
    margin: 0 0 .25rem;
    color: var(--_ink);
}

.purchase__when { margin: 0 0 1.25rem; color: var(--_muted); font-size: .9375rem; }

.purchase__rows { margin: 0; padding: 1.125rem 0 0; border-top: 1px dashed var(--_border); }

.purchase__rows > div {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .3125rem 0;
}

.purchase__rows dt {
    font-size: .75rem;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--_muted);
}

.purchase__rows dd { margin: 0; text-align: right; color: var(--_ink); }
.purchase__total { font-weight: 700; font-size: 1.0625rem; }

.purchase__sent {
    margin: 0 0 2rem;
    line-height: 1.6;
    font-size: .9375rem;
    color: var(--_muted);
}

.purchase__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 1.5rem;
    align-items: center;
    justify-content: center;
    margin-top: 1.5rem;
}

.purchase__link { color: var(--_accent-dark); }