From 25a413ac69ff02cd2b32df6863d780d708f3e069 Mon Sep 17 00:00:00 2001
From: marsalva <info@marsalva.es>
Date: Sun, 13 Sep 2026 17:30:23 +0000
Subject: [PATCH] Swipe: el modal ahora se desliza en horizontal siguiendo al
 dedo

---
 calendario.html | 47 +++++++++++++++++++++++++++++++++++------------
 1 file changed, 35 insertions(+), 12 deletions(-)

diff --git a/calendario.html b/calendario.html
index 76e140d..d11f1e0 100644
--- a/calendario.html
+++ b/calendario.html
@@ -1122,9 +1122,9 @@
         (function initServiceModalSwipeBack() {
             const modalEl = document.getElementById('serviceModal');
             if (!modalEl) return;
-            let swipeStartX = 0, swipeStartY = 0, swipeTracking = false;
+            let swipeStartX = 0, swipeStartY = 0, swipeTracking = false, swipeDx = 0, swipeCancelled = false;
             const EDGE_ZONE = 35; // px desde el borde izquierdo donde debe empezar el gesto
-            const SWIPE_THRESHOLD = 90; // px minimos de desplazamiento horizontal para considerar 'volver'
+            const SWIPE_THRESHOLD = 90; // px minimos para considerar 'volver'
 
             modalEl.addEventListener('touchstart', (e) => {
                 if (!e.touches || e.touches.length !== 1) return;
@@ -1133,27 +1133,50 @@
                     swipeStartX = t.clientX;
                     swipeStartY = t.clientY;
                     swipeTracking = true;
-                    // Evita que iOS/el navegador interprete este toque en el borde como su propio gesto de "volver"
-                    e.preventDefault();
+                    swipeCancelled = false;
+                    swipeDx = 0;
+                    modalEl.style.transition = 'none'; // seguimos el dedo sin animacion mientras arrastra
+                    e.preventDefault(); // evita que iOS interprete esto como su propio gesto de "volver"
                 } else {
                     swipeTracking = false;
                 }
             }, { passive: false });
 
             modalEl.addEventListener('touchmove', (e) => {
-                if (!swipeTracking) return;
-                // Seguimos bloqueando el gesto nativo mientras dura nuestro swipe
+                if (!swipeTracking || swipeCancelled) return;
+                const t = e.touches[0];
+                const dx = t.clientX - swipeStartX;
+                const dy = t.clientY - swipeStartY;
+                if (Math.abs(dy) > 60 && Math.abs(dy) > Math.abs(dx)) {
+                    // Movimiento mas vertical que horizontal: no era un swipe de volver, lo cancelamos
+                    swipeCancelled = true;
+                    modalEl.style.transition = '';
+                    modalEl.style.transform = '';
+                    return;
+                }
+                swipeDx = Math.max(0, dx);
+                modalEl.style.transform = `translateX(${swipeDx}px)`; // el modal sigue al dedo en horizontal
                 e.preventDefault();
             }, { passive: false });
 
-            modalEl.addEventListener('touchend', (e) => {
+            modalEl.addEventListener('touchend', () => {
                 if (!swipeTracking) return;
                 swipeTracking = false;
-                const t = e.changedTouches[0];
-                const dx = t.clientX - swipeStartX;
-                const dy = t.clientY - swipeStartY;
-                if (dx > SWIPE_THRESHOLD && Math.abs(dy) < 60) {
-                    closeModal();
+                if (swipeCancelled) return;
+                modalEl.style.transition = 'transform 0.22s ease-out';
+                if (swipeDx > SWIPE_THRESHOLD) {
+                    modalEl.style.transform = 'translateX(100%)'; // termina de salir hacia la derecha
+                    setTimeout(() => {
+                        modalEl.style.transition = '';
+                        modalEl.style.transform = '';
+                        closeModal();
+                    }, 220);
+                } else {
+                    modalEl.style.transform = 'translateX(0px)'; // no llego al umbral: vuelve a su sitio
+                    setTimeout(() => {
+                        modalEl.style.transition = '';
+                        modalEl.style.transform = '';
+                    }, 220);
                 }
             }, { passive: true });
         })();