/* Ticket del pase con el QR en espera (CREATIVO, 11 nov, idea C «troquel que salta»; Andrea aún no ha elegido entre A, B y C:
   la idea vive en compra-ticket.js, en IDEA). Mientras se elige día y hora y mientras Square confirma, el QR es un señuelo tenue;
   al confirmarse el pago, el talón asienta y el QR real se abre desde el centro. Solo transform, opacity y clip-path.
   Los estados finales están aquí; el movimiento lo pone compra-ticket.js y no corre con prefers-reduced-motion. */
.ticket{--m:11px;--corte:150px;position:relative;width:min(100%,320px);margin:0 auto;border-radius:12px;background:var(--c,#fff);color:var(--tx,#333);
  -webkit-mask:radial-gradient(circle var(--m) at 0 var(--corte),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--m) at 100% var(--corte),#0000 97%,#000) right/51% 100% no-repeat;
  mask:radial-gradient(circle var(--m) at 0 var(--corte),#0000 97%,#000) left/51% 100% no-repeat,radial-gradient(circle var(--m) at 100% var(--corte),#0000 97%,#000) right/51% 100% no-repeat}
.ticket::after{content:"";position:absolute;left:calc(var(--m) + 6px);right:calc(var(--m) + 6px);top:var(--corte);border-top:1px dotted currentColor;opacity:.5;pointer-events:none}
.ticket p{margin:0}
.ticket-arriba{display:flex;flex-direction:column;height:var(--corte);padding:14px 18px 12px}
.ticket-arriba .etq,.ticket-estado{margin:0;font:400 12px/15px var(--t-greed);letter-spacing:1px;text-transform:uppercase;color:inherit}
.ticket-nombre{margin:6px 0 0;font:400 38px/36px var(--t-hue);letter-spacing:-.5px;color:inherit}
.ticket-datos{display:flex;justify-content:space-between;gap:12px;margin-top:auto;font:400 14px/17px var(--t-suisse)}
.ticket-reserva{text-align:right;text-wrap:balance}
.ticket-talon{display:grid;justify-items:center;gap:10px;padding:22px 18px 18px;transform-origin:50% 0}
.ticket-qr{position:relative;width:176px;height:176px;border-radius:8px;background:#fff;color:#000;overflow:hidden}
.ticket-capa{position:absolute;inset:10px;display:grid;place-items:center}
.ticket-capa svg{display:block;max-width:100%;max-height:100%;fill:#000}
.ticket-senuelo svg{width:100%;height:100%;opacity:.16}
.ticket-estado{text-align:center;text-wrap:balance;outline:0}
.ticket .reintentar{color:inherit}
.ticket .reintentar:focus-visible{outline:2px solid currentColor;outline-offset:2px}
.ticket:not([data-estado="real"]) .ticket-real{clip-path:circle(0 at 50% 50%)}
.ticket[data-estado="real"] .ticket-senuelo{opacity:0}
.ticket[data-estado="error"] .ticket-talon{transform:translateY(-4px) rotate(-2.4deg)}

/* Vuelta de Square: la confirmación es el ticket, sin la hoja blanca (Andrea, 11 nov: «esto ya no tendría sentido»). */
.compra-confirmacion{display:grid;justify-items:center;gap:20px;margin:24px auto 56px;max-width:420px;text-align:center}
.compra-confirmacion h1{margin:0;font:400 40px/1 var(--t-hue);letter-spacing:-.02em;text-wrap:balance}
.compra-confirmacion p{margin:0}
.compra-confirmacion .ticket{text-align:left}
.compra-confirmacion a{display:inline-flex;align-items:center;min-height:44px}
.compra-vuelta:not([data-estado="consultando"],[data-estado="pendiente"],[data-estado="emitido"]) .compra-confirmacion,
.compra-vuelta:has(.compra-confirmacion):is([data-estado="consultando"],[data-estado="pendiente"],[data-estado="emitido"]) .billete{display:none}
/* La línea «Tu reserva» va en la barra de pago, junto a «Pagar». */
.compra-resumen:has(.compra-resumen-reserva) .compra-pago{grid-row:1/span 5}
.compra-resumen-reserva{font:400 14px/18px var(--t-suisse)}
.compra-resumen-reserva .etq{margin-right:6px}
.compra-resumen-reserva a{color:inherit;text-underline-offset:3px}
.compra-resumen-reserva a:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
.compra-resumen-reserva[hidden]{display:none}