Maria Jose 13/08/2026

1. Selecciona la zona: Elige la sección del evento y la cantidad de boletos que necesitas.
2. Selecciona tus asientos: Escoge tus lugares preferidos directamente en el mapa interactivo.
3. Agrega al carrito: Guarda tus asientos seleccionados para asegurar tu reserva temporal.
4. FINALIZA TU COMPRA: Haz clic en pagar e ingresa tus datos para completar tu pago seguro.

// Reparado: Sintaxis clásica compatible de lectura táctil arrays if (e.touches && e.touches.length > 0) { cX = e.touches[0].clientX; cY = e.touches[0].clientY; } else if (e.changedTouches && e.changedTouches.length > 0) { cX = e.changedTouches[0].clientX; cY = e.changedTouches[0].clientY; } return { x: ((cX - rect.left) / rect.width) * canvas.width, y: ((cY - rect.top) / rect.height) * canvas.height }; } function alIniciar(e) { isDragging = true; haArrastrado = false; const coords = obtenerCoordenadas(e); startX = coords.x; startY = coords.y; } function alMover(e) { if (!isDragging || !zoomActivo) return; const coords = obtenerCoordenadas(e); const dx = coords.x - startX; const dy = coords.y - startY; if (Math.abs(dx) > 3 || Math.abs(dy) > 3) { haArrastrado = true; offsetX += dx; offsetY += dy; offsetX = Math.max(-450, Math.min(450, offsetX)); offsetY = Math.max(-450, Math.min(450, offsetY)); startX = coords.x; startY = coords.y; dibujarMapa(); } } function alFinalizar(e) { if (!isDragging) return; isDragging = false; if (!haArrastrado) { // --- SISTEMA INTERACTIVO TÁCTIL Y ZOOM (RESTRUCTURADO) --- function obtenerCoordenadas(e) { const rect = canvas.getBoundingClientRect(); let cX = e.clientX; let cY = e.clientY; if (e.touches && e.touches.length > 0) { cX = e.touches[0].clientX; cY = e.touches[0].clientY; } else if (e.changedTouches && e.changedTouches.length > 0) { cX = e.changedTouches[0].clientX; cY = e.changedTouches[0].clientY; } return { x: ((cX - rect.left) / rect.width) * canvas.width, y: ((cY - rect.top) / rect.height) * canvas.height }; } function alIniciar(e) { isDragging = true; haArrastrado = false; const coords = obtenerCoordenadas(e); startX = coords.x; startY = coords.y; } function alMover(e) { if (!isDragging || !zoomActivo) return; const coords = obtenerCoordenadas(e); const dx = (coords.x - startX) / 2.5; const dy = (coords.y - startY) / 2.5; if (Math.abs(dx) > 1 || Math.abs(dy) > 1) { haArrastrado = true; offsetX += dx; offsetY += dy; offsetX = Math.max(-800, Math.min(800, offsetX)); offsetY = Math.max(-800, Math.min(800, offsetY)); startX = coords.x; startY = coords.y; dibujarMapa(); } } function alFinalizar(e) { if (!isDragging) return; isDragging = false; if (!haArrastrado) { const coords = obtenerCoordenadas(e); let clickX = coords.x; let clickY = coords.y; let dxCentro = clickX - cx; let dyCentro = clickY - cy; let distCentro = Math.sqrt(dxCentro * dxCentro + dyCentro * dyCentro); if (distCentro < 110 || distCentro > 510) { zoomActivo = !zoomActivo; if (!zoomActivo) { offsetX = 0; offsetY = 0; } dibujarMapa(); return; } if (zoomActivo) { clickX = (clickX - cx - offsetX) / 2.5 + cx; clickY = (clickY - cy - offsetY) / 2.5 + cy; } let asientoEncontrado = listaAsientos.find(asiento => { const dx = clickX - asiento.x; const dy = clickY - asiento.y; return Math.sqrt(dx * dx + dy * dy) < (asiento.r * 1.5); }); if (asientoEncontrado) { if (!asientoEncontrado.ocupadoFijo) { asientoEncontrado.seleccionado = !asientoEncontrado.seleccionado; actualizarCalculos(); dibujarMapa(); } } } } canvas.addEventListener('mousedown', alIniciar); canvas.addEventListener('mousemove', alMover); canvas.addEventListener('mouseup', alFinalizar); canvas.addEventListener('touchstart', alIniciar, { passive: true }); canvas.addEventListener('touchmove', alMover, { passive: true }); canvas.addEventListener('touchend', alFinalizar); canvas.addEventListener('dblclick', function() { zoomActivo = !zoomActivo; if (!zoomActivo) { offsetX = 0; offsetY = 0; } dibujarMapa(); }); inicializarAsientos(); setTimeout(dibujarMapa, 300); })();