From 0a6a0e8f7e993918f469f6ce3f8b3c3650573858 Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Wed, 4 Mar 2026 13:42:45 -0500
Subject: [PATCH] style(map): move 'Cerrar ruta' pill design to ArrivalBanner X
 button and remove from ETACard to avoid redundancy

---
 frontend/src/components/map/ArrivalBanner.vue |  8 ++++++--
 frontend/src/components/map/ETACard.vue       | 19 ++++---------------
 frontend/src/views/MapView.vue                |  1 -
 3 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/map/ArrivalBanner.vue b/frontend/src/components/map/ArrivalBanner.vue
index 017c615..c44884f 100644
--- a/frontend/src/components/map/ArrivalBanner.vue
+++ b/frontend/src/components/map/ArrivalBanner.vue
@@ -28,8 +28,12 @@
         </template>
       </div>
 
-      <button @click.stop="$emit('close')" class="ml-2 p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
-        <span class="material-icons text-[18px] text-gray-400 hover:text-red-500">close</span>
+      <button 
+        @click.stop="$emit('close')" 
+        class="ml-2 shrink-0 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"
+      >
+        <span class="material-icons" style="font-size:14px">close</span>
+        Cerrar ruta
       </button>
     </div>
   </Transition>
diff --git a/frontend/src/components/map/ETACard.vue b/frontend/src/components/map/ETACard.vue
index 649a4a9..5bd89ea 100644
--- a/frontend/src/components/map/ETACard.vue
+++ b/frontend/src/components/map/ETACard.vue
@@ -22,20 +22,10 @@
         @touchstart="onTouchStart"
       ></div>
 
-      <!-- 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>
+      <!-- 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 minimizar
+      </p>
 
       <!-- 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">
@@ -167,7 +157,6 @@ defineProps<{
 
 const emit = defineEmits<{
   (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 c2ea137..c7cb89a 100644
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -688,7 +688,6 @@ 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>