/* Ticketera Bohemia — EL PASE HOLOGRÁFICO (Opción B). Lo comparten la entrada, «Mis entradas», la portada, la cabina de Quito Secreto,
   «Mis ventas» y la puerta. Reglas fijas: el QR siempre sobre una placa clara y opaca, sin efectos encima; «reducir movimiento» lo deja quieto;
   sin estilos en línea. Lo que cambia al vuelo (inclinación, sello) lo escribe assets/js/ticketera-cyber.js con setProperty. */
.tkx-escena, .tkx-vitrina, .tkx-pase, .tkx-ampliado {
    --neon: #3ddc84; --cian: #4de3ff; --viol: #a47bff; --ambar: #ff9a3c;
    --mono: 'JetBrains Mono', ui-monospace, 'DejaVu Sans Mono', 'Courier New', monospace;
    --serif: 'Fraunces', Georgia, serif; --sans: 'Inter', system-ui, sans-serif;
    --brass: #c9a24b; --brass-hi: #efd48a; --brass-lo: #6e5120; --apagado: #9a8f78;
}
@keyframes tkx-entra { from { opacity: 0; transform: translateY(10px); } }
/* ====================================================================== EL PASE HOLOGRÁFICO (entrada a pantalla completa) ====================================================================== */
.tkx-pagina { display: block; }
@media (min-width: 900px) {
    .tk-body-entrada .tk-principal { max-width: 1000px; }
    .tkx-pagina { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 26px; align-items: center; }
}
.tkx-escena { position: relative; overflow-x: clip; height: 560px; perspective: 900px; display: flex; align-items: center; justify-content: center; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.tkx-lluvia { position: absolute; inset: 0; pointer-events: none; overflow: hidden; -webkit-mask: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); mask: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent); }
.tkx-lluvia span { position: absolute; top: -100%; writing-mode: vertical-rl; font: 11px/1.1 var(--mono); color: var(--neon); opacity: 0.2; letter-spacing: 0.05em; animation: tkx-cae linear infinite; white-space: nowrap; }
@keyframes tkx-cae { to { transform: translateY(200%); } }
.tkx-suelo { position: absolute; left: -10%; right: -10%; bottom: -8px; height: 160px; transform: perspective(260px) rotateX(62deg); transform-origin: 50% 100%; opacity: 0.9;
    background: repeating-linear-gradient(90deg, rgba(61, 220, 132, 0.35) 0 1px, transparent 1px 34px), repeating-linear-gradient(0deg, rgba(61, 220, 132, 0.35) 0 1px, transparent 1px 26px);
    -webkit-mask: radial-gradient(ellipse at 50% 100%, #000 10%, transparent 70%); mask: radial-gradient(ellipse at 50% 100%, #000 10%, transparent 70%); }
.tkx-anillo { position: absolute; left: 50%; top: 47%; width: 380px; height: 380px; margin: -190px 0 0 -190px; opacity: 0.55; animation: tkx-giro 60s linear infinite; pointer-events: none; }
.tkx-anillo text { font: 14px var(--mono); fill: var(--cian); }
@keyframes tkx-giro { to { transform: rotate(360deg); } }
.tkx-base { position: absolute; left: 50%; bottom: 16px; width: 200px; height: 38px; margin-left: -100px; border-radius: 50%;
    background: radial-gradient(ellipse at 50% 40%, #0c2418 0 40%, transparent 41%), conic-gradient(from 0deg, var(--brass-lo), var(--brass-hi), var(--brass-lo), var(--brass), var(--brass-lo));
    box-shadow: 0 0 30px rgba(61, 220, 132, 0.35), 0 6px 12px #000; }
.tkx-base::after { content: ''; position: absolute; inset: 7px 24px; border-radius: 50%; border: 2px solid var(--neon); box-shadow: 0 0 14px var(--neon), inset 0 0 12px rgba(61, 220, 132, 0.6); }
.tkx-vol { position: relative; width: 270px; height: 410px; margin-bottom: 44px; transform-style: preserve-3d; }
@media (min-width: 900px) { .tkx-vol { scale: 1.12; margin-bottom: 60px; } .tkx-escena { height: 620px; } }
.tkx-haz { position: absolute; left: 50%; bottom: -54px; width: 270px; height: 440px; margin-left: -135px; clip-path: polygon(34% 100%, 66% 100%, 100% 0, 0 0); background: linear-gradient(0deg, rgba(61, 220, 132, 0.36), rgba(61, 220, 132, 0.04) 70%, transparent); opacity: 0.34; pointer-events: none; }
.tkx-rayo { position: absolute; left: -10px; right: -10px; bottom: 100%; height: 3px; background: linear-gradient(90deg, transparent, #c9ffe0, transparent); box-shadow: 0 0 16px 4px rgba(61, 220, 132, 0.9); opacity: 0; z-index: 6; pointer-events: none; }
.tkx-vol:focus-visible { outline: 2px solid var(--cian); outline-offset: 8px; border-radius: 16px; }
.tkx-tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--fy, 0px)); clip-path: inset(-40px); cursor: grab; will-change: transform; outline-offset: 6px; }
.tkx-carta { position: absolute; inset: 0; transform-style: preserve-3d; transition: transform 0.85s cubic-bezier(0.3, 1.2, 0.4, 1); }
.tkx-carta.volteada { transform: rotateY(180deg); }
.tkx-cara { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; border: 1px solid rgba(61, 220, 132, 0.65);
    background: linear-gradient(160deg, rgba(9, 32, 22, 0.9), rgba(4, 12, 9, 0.95) 60%, rgba(18, 10, 36, 0.9)); box-shadow: 0 0 26px rgba(61, 220, 132, 0.32), inset 0 0 34px rgba(61, 220, 132, 0.1); color: #ece3d0; }
.tkx-dorso { transform: rotateY(180deg); padding: 16px 16px 14px; display: flex; flex-direction: column; gap: 8px; }
.tkx-flyer { position: relative; height: 128px; overflow: hidden; background: linear-gradient(135deg, #10261b, #1a1233); }
.tkx-flyer img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: saturate(1.15) contrast(1.05); }
.tkx-flyer::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.28) 0 1px, transparent 1px 3px), linear-gradient(180deg, transparent 40%, rgba(3, 10, 7, 0.96)); }
.tkx-kicker { position: absolute; left: 12px; top: 10px; z-index: 2; padding: 3px 8px; border-radius: 3px; background: rgba(3, 10, 7, 0.78); border: 1px solid rgba(61, 220, 132, 0.35); font: 700 9px var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--neon); text-shadow: 0 0 8px #000; }
.tkx-cuerpo { position: relative; padding: 0 16px 14px; margin-top: -28px; }
.tkx-tit { font: 600 22px/1.1 var(--serif); letter-spacing: 0.02em; color: #fff; text-shadow: 0 0 12px rgba(61, 220, 132, 0.5); margin: 0 0 5px; min-height: 1.1em; overflow-wrap: anywhere; }
.tk-principal h1.tkx-tit { font-size: 22px; letter-spacing: 0.02em; margin: 0 0 5px; }
.tkx-dato { font: 600 11px var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cian); margin: 0 0 9px; min-height: 1.2em; }
.tkx-estado { display: inline-block; font: 700 10px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--neon); border: 1px solid #1c7a49; border-radius: 4px; padding: 3px 8px; background: rgba(61, 220, 132, 0.1); box-shadow: 0 0 12px rgba(61, 220, 132, 0.4); margin-bottom: 8px; }
.tkx-estado-usada { color: var(--apagado); border-color: #3a3322; background: rgba(0, 0, 0, 0.3); box-shadow: none; }
.tkx-fila { display: flex; gap: 12px; align-items: flex-end; justify-content: space-between; }
.tkx-qr { position: relative; z-index: 3; flex: none; width: 150px; height: 150px; padding: 7px; background: #e9f6ee; border-radius: 8px; overflow: hidden; box-shadow: 0 0 18px rgba(61, 220, 132, 0.35); line-height: 0; }
.tkx-qr .qr-svg, .tkx-qr svg { display: block; width: 100%; height: 100%; }
.tkx-usada .tkx-qr, .tkx-estado-usada ~ .tkx-fila .tkx-qr { opacity: 0.55; filter: saturate(0.3); }
.tkx-lado { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.tkx-sello { position: relative; width: 58px; height: 58px; border-radius: 50%; flex: none; background: conic-gradient(from var(--ang, 0deg), #3ddc84, #4de3ff, #a47bff, #efd48a, #3ddc84); box-shadow: 0 0 16px rgba(77, 227, 255, 0.55); }
.tkx-sello::before { content: ''; position: absolute; inset: 5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #10261b, #03090a); }
.tkx-sello::after { content: '☉'; position: absolute; inset: 0; display: grid; place-items: center; font: 22px var(--mono); color: var(--brass-hi); text-shadow: 0 0 10px var(--brass-hi); }
.tkx-usada .tkx-sello, .tkx-apagado { filter: grayscale(1) brightness(0.55); box-shadow: none; }
.tkx-selcap { font: 8.5px/1.3 var(--mono); letter-spacing: 0.12em; color: var(--apagado); text-transform: uppercase; text-align: center; }
.tkx-brillo { position: absolute; z-index: 2; inset: 0; border-radius: 16px; pointer-events: none; background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.16) 44%, rgba(77, 227, 255, 0.22) 50%, rgba(164, 123, 255, 0.16) 56%, transparent 68%); background-size: 260% 100%; background-position: var(--bx, 0%) 0; mix-blend-mode: screen; }
.tkx-d-tit { font: 600 9.5px var(--mono); letter-spacing: 0.2em; color: var(--neon); text-transform: uppercase; }
.tkx-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 10px; margin: 0; font: 12px/1.35 var(--mono); }
.tkx-dl dt { color: var(--cian); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; padding-top: 2px; opacity: 0.85; }
.tkx-dl dd { margin: 0; overflow-wrap: anywhere; }
.tkx-dd { font: 12px/1.45 var(--sans); color: #cfd9d2; margin: 2px 0 0; }
.tkx-pista { position: relative; margin: 4px 0 2px; text-align: center; font: 600 9.5px var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--apagado); }
.tkx-acciones { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 10px 0 4px; }
.tkx-acciones .btn { flex: 1 1 140px; text-align: center; }
/* QR ampliado: placa clara a toda pantalla, sin ningún efecto encima (para la puerta) */
.tkx-ampliado { position: fixed; inset: 0; z-index: 90; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 14px; padding: 20px; background: #f4faf6; cursor: pointer; }
.tkx-ampliado.abierto { display: flex; }
.tkx-ampliado:focus { outline: none; }
.tkx-ampliado .qr-svg, .tkx-ampliado svg { width: min(86vw, 62vh, 460px); height: auto; display: block; shape-rendering: crispEdges; }
.tkx-ampliado p { margin: 0; font: 600 12px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: #234; }
html.tkx-ampliar-abierto body { overflow: hidden; }

/* secuencia de entrada del pase (solo en la primera visita de cada sesión) */
@keyframes tkx-aparece { from { opacity: 0; } }
@keyframes tkx-haz { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0.34; } }
@keyframes tkx-materializa { from { clip-path: inset(100% 0 0 0); } }
@keyframes tkx-rayo { 0% { bottom: 0; opacity: 1; } 92% { opacity: 1; } 100% { bottom: 100%; opacity: 0; } }
html.tkx-intro .tkx-suelo, .tkx-play .tkx-suelo { animation: tkx-aparece 1.2s ease-out 0.4s both; }
html.tkx-intro .tkx-base, .tkx-play .tkx-base { animation: tkx-aparece 1s ease-out 0.3s both; }
html.tkx-intro .tkx-anillo, .tkx-play .tkx-anillo { animation: tkx-aparece 1.4s ease-out 1.2s both, tkx-giro 60s linear infinite; }
html.tkx-intro .tkx-haz, .tkx-play .tkx-haz { animation: tkx-haz 2.6s ease-out 0.9s both; }
html.tkx-intro .tkx-tilt, .tkx-play .tkx-tilt { animation: tkx-materializa 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both; }
html.tkx-intro .tkx-rayo, .tkx-play .tkx-rayo { animation: tkx-rayo 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.5s both; }
html.tkx-intro .tkx-qr, .tkx-play .tkx-qr { animation: tkx-qr-late 1.2s ease-in-out 1.9s 2 both; }
@keyframes tkx-qr-late { 50% { box-shadow: 0 0 34px 6px rgba(61, 220, 132, 0.85); } }
html.tkx-intro .tkx-pista, html.tkx-intro .tkx-acciones, .tkx-play .tkx-vit-pie { animation: tkx-aparece 1s ease-out 2.2s both; }
html.tkx-intro .tkx-der > * { animation: tkx-entra 0.7s ease-out both; animation-delay: calc(2s + var(--k, 0) * 0.15s); }
html.tkx-intro .tkx-der > *:nth-child(2) { --k: 1; } html.tkx-intro .tkx-der > *:nth-child(3) { --k: 2; } html.tkx-intro .tkx-der > *:nth-child(4) { --k: 3; }

/* ====================================================================== PASE DE VITRINA (sin QR: portada, cabina, roles) ====================================================================== */
.tkx-vitrina { position: relative; margin: 18px 0; color: #ece3d0; text-align: left; }
.tkx-vit-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 0 4px 2px; }
.tkx-vit-t { margin: 0; font: 600 11px var(--mono); letter-spacing: 0.22em; text-transform: uppercase; color: var(--cian); }
.tkx-vit-s { margin: 0; font: 10px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--apagado); }
.tkx-vit-tira { display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 2px 8px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tkx-vit-tira::-webkit-scrollbar { display: none; }
.tkx-vit-item { flex: 0 0 min(300px, 84%); scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; }
.tkx-vit-tira:has(> .tkx-vit-item:only-child) { justify-content: center; }
.tkx-vit-tira:has(> .tkx-vit-item:only-child) .tkx-vit-item { flex-basis: min(340px, 100%); }
@media (min-width: 900px) {
    .tkx-vit-tira { gap: 14px; scrollbar-width: thin; scrollbar-color: rgba(61, 220, 132, 0.5) transparent; }
    .tkx-vit-tira::-webkit-scrollbar { display: block; height: 6px; }
    .tkx-vit-tira::-webkit-scrollbar-thumb { background: rgba(61, 220, 132, 0.5); border-radius: 3px; }
    .tkx-vit-item { flex-basis: 300px; }
    .tkx-vit-tira:has(> .tkx-vit-item:nth-child(-n+2):last-child) { justify-content: center; }
}
.tkx-vit .tkx-escena { height: 470px; width: 100%; }
.tkx-vit .tkx-vol { width: 246px; height: 350px; margin-bottom: 40px; }
.tkx-vit .tkx-haz { width: 246px; height: 380px; margin-left: -123px; }
.tkx-vit .tkx-anillo { width: 330px; height: 330px; margin: -165px 0 0 -165px; top: 44%; }
.tkx-vit .tkx-flyer { height: 150px; }
.tkx-vit .tkx-tit { font-size: 20px; }
.tkx-vit .tkx-fila { align-items: center; }
.tkx-vit-info { display: flex; flex-direction: column; gap: 6px; min-width: 0; align-items: flex-start; }
.tkx-vit-nota { margin: 0; font: 11px/1.4 var(--mono); letter-spacing: 0.06em; color: #cfd9d2; }
.tkx-vit-pie { display: inline-block; margin: -4px 0 6px; padding: 6px 4px; font: 700 11px var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--neon); text-decoration: none; text-shadow: 0 0 10px rgba(61, 220, 132, 0.7); }
.tkx-vit-pie:hover { color: #c9ffe0; }
.tkx-vit-pie:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }
.tkx-vit-texto { margin: 2px 4px 0; font: 11.5px/1.5 var(--mono); letter-spacing: 0.04em; color: var(--apagado); text-align: center; }
.tkx-vit-aviso { color: var(--ambar); }
.tkx-sello[data-g="v"]::after { content: '♃'; }
.tkx-sello[data-g="p"]::after { content: '♂'; }
.tkx-sello[data-g="d"]::after { content: '✦'; }
.tkx-sello[data-g="e"]::after { content: '☽'; }
.tkx-rol-vendedor .tkx-cara, .tkx-rol-puerta .tkx-cara { border-color: rgba(77, 227, 255, 0.7); box-shadow: 0 0 26px rgba(77, 227, 255, 0.3), inset 0 0 34px rgba(77, 227, 255, 0.1); }
.tkx-rol-dignidad .tkx-cara { border-color: rgba(164, 123, 255, 0.8); box-shadow: 0 0 28px rgba(164, 123, 255, 0.38), inset 0 0 34px rgba(164, 123, 255, 0.12); }
.tkx-rol-dignidad .tkx-kicker { color: #d9c9ff; border-color: rgba(164, 123, 255, 0.6); }
.tkx-rol-dignidad .tkx-estado { color: #d9c9ff; border-color: #6b4fd0; background: rgba(164, 123, 255, 0.14); box-shadow: 0 0 12px rgba(164, 123, 255, 0.45); }
.tkx-rol-vendedor .tkx-estado, .tkx-rol-puerta .tkx-estado { color: var(--cian); border-color: #1c7a88; background: rgba(77, 227, 255, 0.1); box-shadow: 0 0 12px rgba(77, 227, 255, 0.4); }
/* el pase de rol con el enlace QR (Mis ventas): misma placa clara */
.tkx-qr-chico { width: 112px; height: 112px; }
/* Mis entradas: selector de pases (celdas de energía) */
.tkx-sel-pases { display: flex; gap: 5px; margin: 6px 0 4px; }
.tkx-sel-pases button { flex: 1; height: 28px; border-radius: 3px; border: 1px solid rgba(61, 220, 132, 0.35); background: rgba(61, 220, 132, 0.04); color: var(--neon); font: 700 10px var(--mono); cursor: pointer; transition: background 0.2s, box-shadow 0.2s; }
.tkx-sel-pases button.on { background: var(--neon); color: #03140b; box-shadow: 0 0 12px var(--neon); border-color: #c9ffe0; }
.tkx-sel-pases button:focus-visible { outline: 2px solid var(--cian); outline-offset: 2px; }
.tkx-pase.tkx-oculto { display: none; }
/* pase estático (puerta: sin escena, sin movimiento) */
.tkx-solo { position: relative; display: flex; gap: 14px; align-items: center; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(77, 227, 255, 0.55); margin: 8px 0 12px;
    background: linear-gradient(160deg, rgba(9, 32, 22, 0.88), rgba(4, 12, 9, 0.94) 60%, rgba(18, 10, 36, 0.88)); box-shadow: 0 0 20px rgba(77, 227, 255, 0.18); color: #ece3d0; }
.tkx-solo .tkx-sello { width: 46px; height: 46px; }
.tkx-solo .tkx-sello::after { font-size: 18px; }
.tkx-solo .tkx-sello::before { inset: 4px; }
.tkx-solo b { display: block; font: 600 17px var(--serif); color: #fff; }
.tkx-solo span { display: block; font: 600 10px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cian); }
.tkx-solo p { margin: 2px 0 0; font: 11px var(--mono); color: #cfd9d2; }
@media (prefers-reduced-motion: reduce) {
    .tkx-lluvia span, .tkx-anillo { animation: none !important; }
    .tkx-carta { transition: none; }
    .tkx-tilt { cursor: default; }
}
.tkx-boletos { margin: 6px 0 18px; }
.tkx-nota-pase { text-align: center; margin: 2px 6px 14px; }