Ponemos escala y calculamos millas

regla_portland.html

@@ -147,9 +147,11 @@
         <i class="fa-solid fa-crosshairs mr-1.5 animate-pulse"></i> <span id="status-text">Haz clic para añadir puntos en la carta (A -> B -> C...)</span>
       </div>
 
+<!--
       <div class="absolute bottom-3 right-3 bg-slate-950/80 border border-slate-800 text-[9.5px] text-slate-400 px-2.5 py-1 rounded-md backdrop-blur-sm pointer-events-none z-10">
         Usa el zoom o las barras de desplazamiento para explorar la carta
       </div>
+-->      
     </div>
 
   </main>
@@ -559,7 +561,6 @@
     }
 
     function updateReadouts() {
-      // Cálculo preciso unificado del Rumbo Verdadero (Rv) considerando la diferencia entre regla y brújula
       let baseReferenceAngle = (360 - state.rulerAngle) % 360;
       let rv = (state.rulerAngle + 90 - (state.diskAngle - baseReferenceAngle)) % 360;
       if (rv < 0) rv += 360;
@@ -609,10 +610,11 @@
       draw();
     }
 
-    canvas.addEventListener('mousedown', (e) => {
+    // --- GESTIÓN DE RATÓN Y TÁCTIL UNIFICADA ---
+    function handleInteractionStart(clientX, clientY) {
       const rect = canvas.getBoundingClientRect();
-      const clickX = e.clientX - rect.left;
-      const clickY = e.clientY - rect.top;
+      const clickX = clientX - rect.left;
+      const clickY = clientY - rect.top;
 
       if (state.mode === 'ADD_POINTS') {
         const nextChar = String.fromCharCode(65 + state.points.length);
@@ -629,7 +631,6 @@
           if (angleDeg < 0) angleDeg += 360;
           
           state.rulerAngle = Math.round(angleDeg);
-          // Configuración automática de la rosa según la orientación de la regla
           state.diskAngle = (360 - state.rulerAngle) % 360;
 
           document.getElementById('ruler-angle-slider').value = state.rulerAngle;
@@ -640,34 +641,75 @@
         }
 
         draw();
-        return;
+        return true;
       }
 
       const dist = Math.hypot(clickX - state.rulerX, clickY - state.rulerY);
-      if (dist < 250) {
+      // Radio de toque amplio para asegurar que coja la regla cómodamente en tablets (aprox 300px)
+      if (dist < 300) {
         state.isDragging = true;
         state.dragStartX = clickX - state.rulerX;
         state.dragStartY = clickY - state.rulerY;
         canvas.classList.remove('cursor-grab-custom');
         canvas.classList.add('cursor-grabbing');
+        return true; // Capturado por la regla
       }
-    });
+      return false; // Tocó fuera de la regla, permitir scroll del mapa
+    }
 
-    canvas.addEventListener('mousemove', (e) => {
+    function handleInteractionMove(clientX, clientY) {
       if (state.isDragging && state.mode === 'MOVE') {
         const rect = canvas.getBoundingClientRect();
-        state.rulerX = (e.clientX - rect.left) - state.dragStartX;
-        state.rulerY = (e.clientY - rect.top) - state.dragStartY;
+        state.rulerX = (clientX - rect.left) - state.dragStartX;
+        state.rulerY = (clientY - rect.top) - state.dragStartY;
         draw();
+        return true;
       }
-    });
+      return false;
+    }
 
-    window.addEventListener('mouseup', () => {
+    function handleInteractionEnd() {
       if (state.isDragging) {
         state.isDragging = false;
         canvas.classList.remove('cursor-grabbing');
         canvas.classList.add('cursor-grab-custom');
       }
+    }
+
+    // Eventos de Ratón
+    canvas.addEventListener('mousedown', (e) => {
+      handleInteractionStart(e.clientX, e.clientY);
+    });
+
+    canvas.addEventListener('mousemove', (e) => {
+      handleInteractionMove(e.clientX, e.clientY);
+    });
+
+    window.addEventListener('mouseup', () => {
+      handleInteractionEnd();
+    });
+
+    // Eventos Táctiles (Tablet / Móvil)
+    canvas.addEventListener('touchstart', (e) => {
+      if (e.touches.length === 1) {
+        const touch = e.touches[0];
+        const captured = handleInteractionStart(touch.clientX, touch.clientY);
+        if (captured || state.mode === 'ADD_POINTS') {
+          e.preventDefault(); // Evita scroll solo si estás moviendo la regla o añadiendo puntos
+        }
+      }
+    }, { passive: false });
+
+    canvas.addEventListener('touchmove', (e) => {
+      if (state.isDragging && e.touches.length === 1) {
+        const touch = e.touches[0];
+        handleInteractionMove(touch.clientX, touch.clientY);
+        e.preventDefault(); // Bloquea el scroll de la página mientras arrastras la regla
+      }
+    }, { passive: false });
+
+    canvas.addEventListener('touchend', () => {
+      handleInteractionEnd();
     });
 
     document.getElementById('disk-angle-slider').addEventListener('input', (e) => {