/* Página de compra: pasos claros, colores vivos y barra de pago fija en celular. */
:root {
  --buy-gold: #ffd76a;
  --buy-gold-grad: linear-gradient(135deg, #fff1b8 0%, #f3cd5c 35%, #c8922b 70%, #f7d978 100%);
  --buy-line: rgba(255, 210, 100, .5);
}
body[data-page="tickets"] {
  background:
    radial-gradient(1100px 520px at 85% -8%, rgba(236, 160, 60, .2), transparent 60%),
    radial-gradient(900px 500px at 0% 35%, rgba(236, 194, 79, .1), transparent 60%),
    radial-gradient(900px 600px at 100% 85%, rgba(190, 40, 60, .1), transparent 60%),
    #0b0c10 !important;
  color: #fbf7ee;
}

/* Encabezado: logo oficial en círculo (no se cambia), línea dorada. */
body[data-page="tickets"] .tickets-header {
  border-bottom: 1px solid transparent !important;
  border-image: linear-gradient(90deg, transparent, rgba(255, 214, 110, .8), transparent) 1 !important;
  background: rgba(12, 13, 16, .94) !important;
  backdrop-filter: blur(10px);
}
body[data-page="tickets"] .tickets-back { color: var(--buy-gold) !important; border-color: var(--buy-line) !important; }

/* Encabezado de pasos */
.tickets-intro h1 { color: #fffaf0 !important; text-shadow: 0 0 22px rgba(255, 200, 80, .25); }
.tickets-intro > p { color: var(--buy-gold) !important; letter-spacing: 3px; }
.buy-steps { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 14px auto 12px; padding: 0; }
.buy-steps li { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 8px; border: 1px solid var(--buy-line); border-radius: 999px; background: rgba(255, 210, 100, .06); font-weight: 700; font-size: 13px; color: #fbf7ee; }
.buy-steps b, .step-dot { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--buy-gold-grad); color: #1a1206; font-size: 13px; font-weight: 900; }
.step-dot { margin-right: 6px; vertical-align: middle; }

/* Tarjetas: contorno dorado visible */
body[data-page="tickets"] #eventos .card,
body[data-page="tickets"] #panel-boletos,
body[data-page="tickets"] #resumen-compra,
body[data-page="tickets"] #datos-comprador {
  border: 1px solid var(--buy-line) !important;
  background: linear-gradient(180deg, #15181d, #0e1115) !important;
  box-shadow: 0 0 24px rgba(236, 180, 60, .12), 0 18px 44px rgba(0, 0, 0, .45) !important;
}
body[data-page="tickets"] .date { color: #1a1206 !important; background: var(--buy-gold-grad) !important; border: 0 !important; font-weight: 900 !important; }

/* Patrocinador sin asignar: no mostrar el recuadro vacío */
body[data-page="tickets"] .presenting-sponsor.is-reserved { display: none !important; }

/* Precios por zona: tarjetas tocables y legibles */
.bsfe-price-box {
  cursor: pointer;
  border: 1px solid var(--buy-line) !important;
  background: linear-gradient(160deg, #1a1d23, #101216) !important;
  transition: transform .15s, border-color .15s, box-shadow .15s;
}
.bsfe-price-box:hover {
  border-color: var(--buy-gold) !important; transform: translateY(-2px);
  box-shadow: 0 0 18px rgba(255, 200, 80, .3); outline: none;
}
.bsfe-price-box strong { color: var(--buy-gold) !important; }
.bsfe-price-box .price { color: #fffaf0 !important; font-size: 20px !important; font-weight: 900 !important; }
.bsfe-price-box small { color: #ddd6c6 !important; font-size: 12px !important; line-height: 1.35 !important; }
.bsfe-price-box::after { content: "Ver en el plano ›"; display: block; margin-top: 6px; color: var(--buy-gold); font-size: 11px; font-weight: 800; }
@media (max-width: 760px) {
  /* Precios en carrusel horizontal: el plano queda cerca */
  .bsfe-price-strip {
    display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px !important; padding-bottom: 6px;
  }
  .bsfe-price-box { flex: 0 0 70%; scroll-snap-align: start; }
}

/* Mesa resaltada al venir desde su precio */
.bsfe-table.pulse { animation: buyPulse 1.4s ease 1; }
@keyframes buyPulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 215, 106, 0); } 40% { box-shadow: 0 0 0 10px rgba(255, 215, 106, .55); transform: scale(1.15); } }

/* Mesa seleccionada: dorado vivo */
.bsfe-table.selected, .bsfe-table[aria-pressed="true"] { background: var(--buy-gold-grad) !important; color: #1a1206 !important; box-shadow: 0 0 16px rgba(255, 200, 80, .7) !important; }

/* Botones principales */
#continuar-compra, #crear-orden, .bsfe-pop-continue, #pay-bar-go {
  background: var(--buy-gold-grad) !important; color: #1a1206 !important; border: 0 !important;
  font-weight: 900 !important; letter-spacing: 1px; min-height: 52px; border-radius: 12px !important;
  box-shadow: 0 0 20px rgba(240, 190, 70, .4), inset 0 1px 0 rgba(255, 255, 255, .6) !important; cursor: pointer;
}
#continuar-compra, #crear-orden { width: 100%; }
#continuar-compra:disabled { background: #2a2a2a !important; color: #8a8a8a !important; box-shadow: none !important; cursor: not-allowed; }
#resumen-compra h3, #datos-comprador h3 { color: #fffaf0 !important; }
#total-compra { color: var(--buy-gold) !important; font-size: 1.25em; }
#solo-mesa-help { color: #e8e2d4 !important; font-size: 14px !important; line-height: 1.45; margin-top: 12px; padding: 10px 12px; border-left: 3px solid var(--buy-gold); background: rgba(255, 210, 100, .06); border-radius: 6px; }
#datos-comprador label { color: #fbf7ee !important; font-weight: 700; }
#datos-comprador input { border: 1px solid #4a4536 !important; background: #0b0d10 !important; color: #fff !important; min-height: 48px; font-size: 16px !important; border-radius: 10px !important; }
#datos-comprador input:focus { border-color: var(--buy-gold) !important; outline: none; box-shadow: 0 0 0 3px rgba(255, 210, 100, .2); }
.pay-note { margin: 10px 0 0; color: #cfc8b9; font-size: 12.5px; text-align: center; }
.cantidad-ticket { min-height: 46px; min-width: 96px; font-size: 16px !important; border: 1px solid var(--buy-line) !important; border-radius: 10px !important; background: #0b0d10 !important; color: #fff !important; }

/* Barra de pago fija (celular) */
.pay-bar { display: none; }
@media (max-width: 820px) {
  .pay-bar:not([hidden]) {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 99995;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
    background: rgba(12, 13, 16, .97); border-top: 1px solid var(--buy-line);
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .6);
  }
  .pay-bar small { display: block; color: #cfc8b9; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; }
  .pay-bar strong { color: var(--buy-gold); font-size: 20px; }
  #pay-bar-go { flex: 0 0 auto; padding: 0 22px; min-height: 48px; }
  body.has-pay-bar { padding-bottom: 84px; }
  /* El botón de ayuda sube para no tapar la barra ni los precios */
  body.has-pay-bar #bsfeRobotBtn { bottom: 92px !important; }
  body[data-page="tickets"] #bsfeRobotBtn { padding: 6px !important; }
  body[data-page="tickets"] #bsfeRobotBtn span { display: none !important; }
}

/* La columna de la lista no debe crecer al ancho del plano: así el plano se ajusta a la pantalla. */
#lista-boletos { grid-template-columns: minmax(0, 1fr) !important; }
#lista-boletos > *, .bsfe-map-section, .bsfe-floor-card, .bsfe-floor-stack { min-width: 0 !important; max-width: 100%; }

/* Aviso para deslizar el plano en el celular */
.bsfe-floor-card { position: relative; }
.bsfe-floor-scroll.slides { scrollbar-width: thin; scrollbar-color: #d6b84c #15181d; }
.bsfe-floor-scroll.slides::before {
  content: "◀  Desliza para ver todo el plano  ▶";
  position: sticky; left: 0; display: block; width: max-content; margin: 0 auto 8px;
  padding: 6px 12px; border-radius: 999px; background: rgba(255, 210, 100, .14); border: 1px solid var(--buy-line);
  color: var(--buy-gold); font: 800 11px/1 Arial, sans-serif; letter-spacing: .5px;
}
.buy-steps li span { margin: 0 !important; line-height: 1.2; }
body[data-page="tickets"] .date, body[data-page="tickets"] .date * { color: #1a1206 !important; -webkit-text-fill-color: #1a1206 !important; opacity: 1 !important; }
#solo-mesa-help .mesa-elegida { display:block; color: var(--buy-gold); font-size:16px; margin-bottom:4px; }
#forma-pago { border: 1px solid var(--buy-line); border-radius: 12px; padding: 10px 12px; margin: 6px 0 12px; }
#forma-pago legend { color: var(--buy-gold); font-weight: 800; padding: 0 6px; }
#forma-pago label { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 8px; padding: 8px 0; cursor: pointer; }
#forma-pago label + label { border-top: 1px solid rgba(255, 210, 100, .15); }
#forma-pago b { color: var(--buy-gold); }
#forma-pago small { grid-column: 2 / 4; color: #cfc8b9; font-size: 12px; }
#forma-pago input { width: 20px; height: 20px; accent-color: #d6b84c; min-height: 0 !important; }
/* Plano: completo en el celular; botón para ampliar */
.plan-zoom { display: block; margin: 0 auto 10px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--buy-line);
  background: rgba(255, 210, 100, .12); color: var(--buy-gold); font: 800 13px/1 Arial, sans-serif; cursor: pointer; }
.plan-zoom[hidden] { display: none; }
/* Con el plano completo ya no hace falta el aviso de deslizar */
.bsfe-floor-scroll:not(.slides)::before { display: none; }
@media (max-width: 760px) {
  /* Precios en 2 columnas: se ven todos, sin cortar tarjetas */
  .bsfe-price-strip { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; overflow: visible; scroll-snap-type: none; }
  .bsfe-price-box { flex: none; min-width: 0; }
  .bsfe-price-box .price { font-size: 18px !important; }
}
.event-presenters { display: block; color: var(--buy-gold, #ecc24f); font-size: 11px; font-weight: 800; letter-spacing: 1.5px; margin-bottom: 6px; }
/* Página de compra: la imagen del evento a todo lo ancho, sin franjas negras */
body[data-page="tickets"] #eventos-lista .bsfe-event-card.has-banner { display: block !important; padding: 0 0 22px !important; overflow: hidden; }
body[data-page="tickets"] #eventos-lista .bsfe-event-card.has-banner > img {
  display: block; width: 100% !important; height: auto !important; max-height: none !important;
  margin: 0 0 18px !important; border-radius: 0 !important; background: none !important; object-fit: cover !important; }
body[data-page="tickets"] #eventos-lista .bsfe-event-card.has-banner > :not(img) { margin-left: 24px !important; margin-right: 24px !important; }