feat(map): implement navigation phases and premium ETACard design

frontend/src/components/map/ETACard.vue

@@ -2,7 +2,7 @@
   <Transition name="sheet-ui">
     <div v-if="isOpen" class="fixed inset-x-0 bottom-0 z-[9999] sm:max-w-md sm:mx-auto">
     <!-- Overlay transparente oscuro en fondo -->
-    <div class="fixed inset-0 bg-black/40 transition-opacity" @click="closeCard"></div>
+    <div class="fixed inset-0 bg-black/40 transition-opacity" @click="handleDismiss"></div>
 
     <!-- Bottom Sheet container -->
     <div 
@@ -156,7 +156,7 @@ defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: 'close'): void;
+  (e: 'close'): void;   // drag hacia abajo → pasar a fase navigating
   (e: 'refresh'): void;
 }>();
 
@@ -167,6 +167,8 @@ const isDragging = ref(false);
 const startY = ref(0);
 const DISMISS_THRESHOLD = 0.30; // 30% de la altura = cerrar
 
+let intervalId: number | undefined;
+
 function onTouchStart(e: TouchEvent) {
   startY.value = e.touches[0]?.clientY ?? 0;
   isDragging.value = true;
@@ -191,18 +193,13 @@ function onTouchEnd() {
   const draggedRatio = dragY.value / sheetHeight;
 
   if (draggedRatio >= DISMISS_THRESHOLD) {
-    // Arrastró suficiente → cerrar
-    emit('close');
+    handleDismiss();
   }
-  // Siempre resetear posición (snap back o después de cerrar)
   dragY.value = 0;
 }
 
-// ── AUTO REFRESH ─────────────────────────────────────
-let intervalId: number;
-
-function closeCard() {
-  emit('close');
+function handleDismiss() {
+  emit('close'); // 'close' en ETACard = drag dismiss = pasar a fase 'navigating'
 }
 
 onMounted(() => {