/* compra.css · Flujo de compra (Butacas, Sectores, Checkout, Estados). Solo tokens del tema y semánticos. */

.compra-shell { min-height: 100dvh; }
.compra-main { max-width: 720px; display: flex; flex-direction: column; }
.compra { display: flex; flex-direction: column; min-height: 100dvh; }
.compra-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 8px; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 5; }
.compra-head-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 16px; }
.compra-head-txt span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compra-funciones { padding: 12px 16px 0; }
.chip-doble { flex-direction: column; justify-content: center; align-items: flex-start; line-height: 1.15; min-height: 52px; }
.chip-doble span { font-size: 12px; font-weight: 600; opacity: .75; }
.compra-lote { margin: 12px 16px 0; }
.compra-alerta { margin: 12px 16px 0; }
.compra-h2 { font-size: 17px; }
.compra-vacio { padding: 40px 20px; display: flex; flex-direction: column; gap: 12px; }

/* Leyenda y mapa */
.leyenda { display: flex; gap: 14px; padding: 12px 16px; overflow-x: auto; border-bottom: 1px solid var(--line); }
.leyenda span { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; font-size: 12px; }
.leyenda .seat { width: 14px; height: 14px; display: inline-block; --seat-color: var(--text); }
.mapa-wrap { position: relative; flex: 1; overflow: auto; min-height: 320px; padding: 18px 12px 70px; }
.mapa { --seat: 18px; display: flex; flex-direction: column; align-items: center; gap: 18px; width: max-content; min-width: 100%; margin: 0 auto; }
.escenario { width: 260px; height: 30px; border-radius: 0 0 120px 120px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; letter-spacing: .2em; color: var(--muted); }
.sector-mapa { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sector-mapa-tit { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; }
.sector-mapa-tit .punto { width: 10px; height: 10px; border-radius: 3px; }
.butacas { display: grid; gap: 4px; grid-auto-rows: var(--seat); align-items: center; }
.butacas .seat { width: var(--seat); height: var(--seat); cursor: pointer; }
.butacas .seat:disabled { cursor: not-allowed; }
.butacas .seat:not(:disabled):hover { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--seat-color); }
.butacas .seat:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.seat-accesible:not(.seat-selected):not(.seat-occupied)::after { content: ""; display: block; width: 40%; height: 40%; margin: auto; border-radius: 50%; background: var(--seat-color); }
.fila-label { font-size: 10px; font-weight: 700; color: var(--muted); text-align: center; }
.sector-general-mapa { width: min(320px, 90vw); padding: 14px; border-radius: var(--radius-base); border: 2px dashed var(--c); background: color-mix(in srgb, var(--c) 10%, transparent); display: flex; flex-direction: column; align-items: center; gap: 2px; }
.zoom { position: sticky; float: right; bottom: 12px; margin-right: 0; display: flex; flex-direction: column; border-radius: var(--radius-base); background: var(--surface); border: 1px solid var(--line); overflow: hidden; width: 44px; margin-top: -100px; }
.zoom button { width: 44px; height: 44px; border: 0; background: transparent; color: var(--text); font-size: 22px; cursor: pointer; }
.zoom button + button { border-top: 1px solid var(--line); }
.zoom button:disabled { color: var(--muted); opacity: .5; cursor: default; }

/* Sectores sin numerar */
.sectores-lista { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.sector-card { display: flex; flex-direction: column; gap: 14px; padding: 16px; border-radius: var(--radius-card); background: var(--surface); border: 2px solid transparent; }
.sector-card.on { border-color: var(--color-primary); }
.sector-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.sector-card-nombre { display: flex; align-items: center; gap: 8px; }
.sector-card-nombre .punto { width: 12px; height: 12px; border-radius: 4px; }
.sector-card-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.stepper { display: flex; align-items: center; gap: 4px; }
.stepper span { min-width: 32px; text-align: center; font-weight: 800; font-size: 18px; }
.stepper button { width: 44px; height: 44px; border-radius: var(--radius-base); border: 0; background: var(--surface-2); color: var(--text); font-size: 22px; font-weight: 700; cursor: pointer; }
.stepper button.on { background: var(--color-primary); color: var(--color-on-primary); }
.stepper button:disabled { opacity: .4; cursor: default; }

/* Barra inferior */
.compra-barra { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px 20px 18px; background: var(--surface); border-top: 1px solid var(--line); z-index: 5; margin-top: auto; }
.compra-barra-fila { display: flex; align-items: center; gap: 14px; }
.compra-total { display: flex; flex-direction: column; gap: 2px; flex: 0 0 auto; }
/* En celulares angostos el botón se achica en vez de empujar la barra fuera de la pantalla. */
.compra-barra-fila > .btn { min-width: 0; padding-left: 12px; padding-right: 12px; text-align: center; }
.chips-sel { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-sel { min-height: 36px; display: flex; align-items: center; gap: 6px; padding: 0 10px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--bg); color: var(--text); font-weight: 700; font-size: 13px; cursor: pointer; }
.chip-sel span { color: var(--muted); }
.tipo-butaca { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; font-weight: 700; }
.tipo-butaca select { min-height: 40px; border-radius: var(--radius-base); border: 1.5px solid var(--line); background: var(--bg); padding: 0 10px; }

/* Checkout */
.timer { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--surface-2); color: var(--text); font-size: 15px; font-weight: 600; position: sticky; top: 61px; z-index: 4; }
.timer-urgente { background: var(--warning); color: var(--on-warning); }
.timer-vencida { background: var(--danger); color: var(--on-danger); }
.timer-link { color: inherit; font-weight: 800; }
.checkout { display: flex; flex-direction: column; gap: 28px; padding: 20px 20px 32px; }
.checkout-evento { display: flex; gap: 14px; align-items: center; }
.checkout-thumb { flex: 0 0 64px; height: 64px; border-radius: var(--radius-base); background: var(--surface-2); background-size: cover; background-position: center; position: relative; overflow: hidden; }
.checkout-sec { display: flex; flex-direction: column; gap: 12px; }
.checkout-sec h2 { font-size: 18px; }
.checkout-item { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; }
.checkout-item-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.link-accion { align-self: flex-start; min-height: 32px; padding: 0; border: 0; background: none; color: var(--ink); font-weight: 700; font-size: 14px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cupon-form { display: flex; gap: 10px; align-items: flex-start; }
.cupon-form input { text-transform: uppercase; letter-spacing: .06em; }
.error-campo { margin: 0; display: flex; gap: 6px; align-items: center; color: var(--danger); font-size: 14px; font-weight: 600; }
.cupon-aplicado { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 14px; border-radius: var(--radius-base); background: var(--surface-2); }
.linea { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.linea-sep { height: 1px; background: var(--line); }
.linea-total { font-size: 18px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.4; }
.check input { width: 22px; height: 22px; flex: 0 0 22px; accent-color: var(--color-primary); margin: 0; }
.checkout-pagar { display: flex; flex-direction: column; gap: 10px; }

/* Bottom sheet de reserva por vencer */
.hoja-fondo { position: fixed; inset: 0; background: rgba(5, 4, 9, .72); z-index: 20; }
.hoja { position: fixed; left: 0; right: 0; bottom: 0; z-index: 21; display: flex; flex-direction: column; gap: 16px; padding: 12px 24px 28px; border-radius: 24px 24px 0 0; background: var(--surface); border-top: 1px solid var(--line); max-width: 720px; margin: 0 auto; }
.hoja h2 { font-size: 24px; line-height: 1.15; }
.hoja p { margin: 0; }
.hoja-asa { align-self: center; width: 40px; height: 5px; border-radius: 3px; background: var(--line); }
.hoja-icono { width: 56px; height: 56px; border-radius: 50%; background: var(--warning); color: var(--on-warning); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 26px; }

/* Estados */
.estado-compra { display: flex; flex-direction: column; gap: 20px; padding: 64px 24px 28px; min-height: 100dvh; }
.estado-glifo { width: 88px; height: 88px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 40px; }
.estado-compra h1 { font-size: 28px; line-height: 1.12; }
.estado-cuerpo { margin: 0; font-size: 16px; line-height: 1.5; color: var(--muted); }
.estado-timer { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-base); background: var(--surface-2); font-size: 15px; }
.estado-filas { display: flex; flex-direction: column; }
.estado-filas div { display: flex; justify-content: space-between; gap: 12px; padding: 12px 16px; border-top: 1px solid var(--line); font-size: 15px; }
.estado-filas div:first-child { border-top: 0; }
.estado-filas div span:last-child { text-align: right; font-weight: 700; }
.estado-ctas { display: flex; flex-direction: column; gap: 8px; margin-top: auto; }

/* Pago simulado */
.pago-sim { display: flex; flex-direction: column; gap: 14px; padding: 32px 20px; }
.pago-sim-card { display: flex; flex-direction: column; gap: 4px; padding: 20px; }

@media (min-width: 900px) {
  .compra-main { padding: 0 20px; }
  .estado-compra { min-height: auto; padding-top: 48px; }
}

/* Mis entradas (diseño: Entradas) */
.mis-entradas { display: flex; flex-direction: column; }
.mis-head { display: flex; flex-direction: column; gap: 14px; padding: 20px 20px 0; border-bottom: 1px solid var(--line); }
.mis-head-fila { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mis-offline { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--ok); }
.mis-tabs { display: flex; gap: 4px; }
.mis-tabs a { min-height: 44px; display: flex; align-items: center; padding: 0 14px; border-bottom: 3px solid transparent; color: var(--muted); font-weight: 800; font-size: 15px; text-decoration: none; }
.mis-tabs a.on { border-bottom-color: var(--color-primary); color: var(--text); }
.mis-lista { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 24px; }
.mis-vacio { display: flex; flex-direction: column; gap: 12px; padding: 24px 0; }
.mis-vacio p { margin: 0; }
.ticket { display: flex; flex-direction: column; border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); color: var(--text); text-decoration: none; position: relative; overflow: hidden; }
.ticket-pasada { opacity: .7; }
.ticket-top { display: flex; gap: 14px; padding: 16px; }
.ticket-fecha { width: 60px; flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 8px 0; border-radius: var(--radius-base); background: var(--surface-2); color: var(--text); }
.ticket-fecha.on { background: var(--color-primary); color: var(--color-on-primary); }
.ticket-fecha span:first-child { font-size: 11px; font-weight: 800; letter-spacing: .08em; }
.ticket-dia { font-family: var(--font-display); font-size: 24px; font-weight: 800; line-height: 1; }
.ticket-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ticket-info strong { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 17px; line-height: 1.15; }
.ticket-estado { align-self: flex-start; margin-top: 4px; padding: 4px 8px; border-radius: 6px; border: 1.5px solid var(--info); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.ticket-corte { position: relative; height: 0; border-top: 2px dashed var(--line); margin: 0 18px; }
.ticket-corte::before, .ticket-corte::after { content: ""; position: absolute; top: -11px; width: 20px; height: 20px; border-radius: 50%; background: var(--bg); }
.ticket-corte::before { left: -29px; }
.ticket-corte::after { right: -29px; }
.ticket-bottom { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; font-size: 14px; }
.ticket-cta { display: flex; align-items: center; gap: 6px; font-weight: 800; color: var(--ink); flex: 0 0 auto; }

/* Entrada con QR (diseño: EntradaQR). Blanco fijo: el lector necesita contraste máximo. */
.qr-pantalla { min-height: 100dvh; background: #FFFFFF; color: #0B0A12; display: flex; flex-direction: column; }
.qr-franja { height: 8px; background: var(--color-primary); }
.qr-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 0; }
.qr-num { font-size: 14px; font-weight: 800; }
.qr-cuerpo { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 8px 24px 0; }
.qr-titulo { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.qr-titulo h1 { font-size: 24px; line-height: 1.1; color: #0B0A12; }
.qr-titulo span { font-size: 15px; color: #45404F; }
.qr-marco { width: min(300px, 80vw); aspect-ratio: 1; padding: 16px; border-radius: 16px; border: 2px solid #0B0A12; background: #FFFFFF; }
.qr-marco svg { width: 100%; height: 100%; }
.qr-anulada { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; background: #F1EEF6; }
.qr-anulada strong { font-size: 22px; }
.qr-codigo { font-family: 'JetBrains Mono', ui-monospace, monospace; font-size: 15px; font-weight: 700; letter-spacing: .08em; }
.qr-datos { display: flex; width: 100%; max-width: 340px; border: 1.5px solid #D9D3E6; border-radius: 12px; }
.qr-datos div { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-left: 1.5px solid #D9D3E6; }
.qr-datos div:first-child { border-left: 0; }
.qr-datos span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: #5D566E; }
.qr-datos strong { font-size: 18px; }
.qr-titular { font-size: 14px; color: #45404F; text-align: center; }
.qr-nav { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; }
.qr-nav a { width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid #D9D3E6; display: flex; align-items: center; justify-content: center; color: #0B0A12; }
.qr-nav a.off { opacity: .3; pointer-events: none; }
.qr-puntos { display: flex; gap: 6px; }
.qr-puntos span { width: 8px; height: 8px; border-radius: 4px; background: #D9D3E6; }
.qr-puntos span.on { width: 22px; background: #0B0A12; }
.qr-tip { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px 24px; font-size: 13px; color: #45404F; }