From 9c7050436b339d1dd4e492c1f9552b46a0086329 Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Wed, 4 Mar 2026 12:14:19 -0500
Subject: [PATCH] fix(map): add 'Cerrar ruta' button to ETACard + show
 ArrivalBanner X in both eta/navigating phases

---
 frontend/src/components/map/ETACard.vue | 21 ++++++++++++++++-----
 frontend/src/views/MapView.vue          |  5 +++--
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/map/ETACard.vue b/frontend/src/components/map/ETACard.vue
index 5f603f2..649a4a9 100644
--- a/frontend/src/components/map/ETACard.vue
+++ b/frontend/src/components/map/ETACard.vue
@@ -22,10 +22,20 @@
         @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>
+      <!-- Barra superior: hint de drag + botón cerrar ruta -->
+      <div class="flex items-center justify-between mt-1 mb-0">
+        <p class="text-[10px] text-gray-400 pointer-events-none">
+          Desliza hacia abajo para minimizar
+        </p>
+        <button
+          @click="$emit('close-route')"
+          class="flex items-center gap-1 px-2.5 py-1 rounded-full bg-red-50 dark:bg-red-900/30 text-red-500 dark:text-red-400 text-[11px] font-bold hover:bg-red-100 dark:hover:bg-red-900/50 transition-colors"
+          title="Cerrar ruta"
+        >
+          <span class="material-icons" style="font-size:14px">close</span>
+          Cerrar ruta
+        </button>
+      </div>
 
       <!-- Cabecera de la parada -->
       <div v-if="stopName" class="mt-4 flex items-start gap-4 pb-4 border-b border-gray-100 dark:border-gray-800">
@@ -156,7 +166,8 @@ defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: 'close'): void;   // drag hacia abajo → pasar a fase navigating
+  (e: 'close'): void;        // drag hacia abajo → pasar a fase navigating (minimizar)
+  (e: 'close-route'): void;  // botón X → cerrar ruta completamente
   (e: 'refresh'): void;
 }>();
 
diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
index 244290e..c2ea137 100644
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -631,8 +631,8 @@ watch([() => authStore.userProfile?.auto_location, isLoaded], ([canLocate, loade
         >
           <template #extra-triggers>
             <ArrivalBanner 
-              :is-visible="routePhase === 'navigating' && !!(paradaCercana && routeStore.selectedRouteId && !isBannerClosing)"
-              :stop-name="paradaCercana?.name || ''"
+              :is-visible="(routePhase === 'navigating' || routePhase === 'eta') && !!(routeStore.selectedRouteId && !isBannerClosing)"
+              :stop-name="paradaCercana?.name || routeStore.selectedRouteName || ''"
               :is-loading="etaCargando"
               :has-active-buses="busesActivos.length > 0"
               :eta-value="busesActivos[0]?.etaMinutos ?? 0"
@@ -688,6 +688,7 @@ watch([() => authStore.userProfile?.auto_location, isLoaded], ([canLocate, loade
       :buses="busesActivos"
       :is-loading="etaCargando"
       @close="handleETACardDismiss"
+      @close-route="animateAndReload"
       @refresh="paradaCercana && routeStore.selectedRouteId ? calcularETA(routeStore.selectedRouteId, paradaCercana) : null"
     />
   </div>