chore: apply finalized MapView and ETA card fixes

frontend/src/components/ETACard.vue

@@ -5,11 +5,26 @@
 
     <!-- Bottom Sheet container -->
     <div 
-      class="relative bg-white dark:bg-gray-900 rounded-t-3xl shadow-2xl p-5 transform transition-transform duration-300 ease-out flex flex-col gap-4 max-h-[85vh] overflow-y-auto"
-      :class="isOpen ? 'translate-y-0' : 'translate-y-full'"
+      ref="sheetRef"
+      class="relative bg-white dark:bg-gray-900 rounded-t-3xl shadow-2xl p-5 transform flex flex-col gap-4 max-h-[85vh] overflow-y-auto"
+      :style="{
+        transform: `translateY(${dragY}px)`,
+        transition: isDragging ? 'none' : 'transform 0.3s ease-out'
+      }"
+      @touchstart="onTouchStart"
+      @touchmove="onTouchMove"
+      @touchend="onTouchEnd"
     >
-      <!-- Indicador de arrastre (visual) -->
-      <div class="absolute top-3 left-1/2 -translate-x-1/2 w-12 h-1.5 bg-gray-300 dark:bg-gray-600 rounded-full cursor-pointer" @click="closeCard"></div>
+      <!-- Pestaña de arrastre (visual + funcional) -->
+      <div
+        class="absolute top-3 left-1/2 -translate-x-1/2 w-12 h-1.5 bg-gray-300 dark:bg-gray-600 rounded-full cursor-grab active:cursor-grabbing"
+        @touchstart="onTouchStart"
+      ></div>
+
+      <!-- Indicador visual de que se puede arrastrar -->
+      <p class="text-center text-[10px] text-gray-400 mt-1 mb-0 pointer-events-none">
+        Desliza hacia abajo para cerrar
+      </p>
 
       <!-- Cabecera de la parada -->
       <div class="mt-4 flex items-start gap-4 pb-4 border-b border-gray-100 dark:border-gray-800">
@@ -115,7 +130,7 @@
 </template>
 
 <script setup lang="ts">
-import { onMounted, onUnmounted } from 'vue';
+import { ref, onMounted, onUnmounted } from 'vue';
 import type { BusETA } from '@/composables/useETA';
 
 defineProps<{
@@ -132,6 +147,45 @@ const emit = defineEmits<{
   (e: 'refresh'): void;
 }>();
 
+// ── DRAG TO DISMISS ──────────────────────────────────
+const sheetRef = ref<HTMLElement | null>(null);
+const dragY = ref(0);           // desplazamiento actual del drag
+const isDragging = ref(false);
+const startY = ref(0);
+const DISMISS_THRESHOLD = 0.30; // 30% de la altura = cerrar
+
+function onTouchStart(e: TouchEvent) {
+  startY.value = e.touches[0]?.clientY ?? 0;
+  isDragging.value = true;
+  dragY.value = 0;
+}
+
+function onTouchMove(e: TouchEvent) {
+  if (!isDragging.value) return;
+  const delta = (e.touches[0]?.clientY ?? 0) - startY.value;
+  // Solo permitir arrastrar hacia ABAJO (delta positivo)
+  if (delta > 0) {
+    dragY.value = delta;
+    e.preventDefault(); // evitar scroll del contenido mientras arrastra
+  }
+}
+
+function onTouchEnd() {
+  if (!isDragging.value) return;
+  isDragging.value = false;
+
+  const sheetHeight = sheetRef.value?.offsetHeight ?? 400;
+  const draggedRatio = dragY.value / sheetHeight;
+
+  if (draggedRatio >= DISMISS_THRESHOLD) {
+    // Arrastró suficiente → cerrar
+    emit('close');
+  }
+  // Siempre resetear posición (snap back o después de cerrar)
+  dragY.value = 0;
+}
+
+// ── AUTO REFRESH ─────────────────────────────────────
 let intervalId: number;
 
 function closeCard() {