From 62ff09b6a08b74e66580e704c26c94f5844f4dab Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Sat, 28 Feb 2026 00:33:57 -0500
Subject: [PATCH] feat: align and enlarge top stop banner and fix X
 functionality

---
 frontend/src/views/MapView.vue | 49 ++++++++++++++++++++--------------
 1 file changed, 29 insertions(+), 20 deletions(-)

diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
index 898f126..6c34284 100644
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -116,6 +116,7 @@ async function clearAllMapData() {
   destinationQuery.value = "";
   stopSearchQuery.value = "";
   showETACard.value = false;
+  paradaCercana.value = null; // Borrar banner superior
 
   // 2. Invalidar hilos en curso
   mappingSequenceId.value++;
@@ -767,25 +768,8 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
         </div>
       </div>
 
-      <!-- Banner de Parada Más Cercana Inteligente (Chip Compacto) -->
-      <div
-        v-if="paradaCercana && routeStore.selectedRouteId && !showETACard"
-        class="fixed z-[1050] px-3 transition-all duration-300 pointer-events-none"
-        :style="{ top: (alturaNavbar + 8) + 'px', right: '16px' }"
-      >
-        <div class="bg-white/95 dark:bg-gray-900/95 backdrop-blur-sm rounded-2xl shadow-lg border border-yellow-400/50 px-3 py-1.5 flex items-center gap-2 max-w-[220px] pointer-events-auto">
-          <span class="material-icons text-yellow-500" style="font-size:16px">directions_bus</span>
-          <span class="text-xs font-bold text-gray-800 dark:text-white truncate flex-1">
-            {{ paradaCercana?.name }}
-          </span>
-          <span class="text-[10px] text-gray-500 whitespace-nowrap">
-            {{ (distanciaMetros && distanciaMetros < 1000) ? Math.round(distanciaMetros) + 'm' : (distanciaMetros ? (distanciaMetros / 1000).toFixed(1) + 'km' : '') }}
-          </span>
-          <button @click="clearAllMapData" class="text-gray-400 hover:text-gray-600 shrink-0 p-0.5 ml-1">
-            <span class="material-icons" style="font-size:14px">close</span>
-          </button>
-        </div>
-      </div>
+      <!-- Banner de Parada Más Cercana (Movido a triggers-row para alineación) -->
+      <!-- Comentado fuera de aquí, lo pondremos abajo -->
 
       <div class="map-container">
         <!-- Floating Offers Button at exact location -->
@@ -854,7 +838,24 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
               @click="openUberSearch"
             >
               <span class="material-icons search-icon">directions_bus</span>
-              <span class="trigger-text">Ver Rutas</span>
+            </div>
+
+            <!-- Nuevo Banner de Parada Cercana Alineado -->
+            <div 
+              v-if="paradaCercana && routeStore.selectedRouteId && !showETACard" 
+              class="uber-search-trigger best-stop-banner"
+            >
+              <span class="material-icons text-yellow-500 mr-3">directions_bus</span>
+              <div class="flex flex-col flex-1 truncate">
+                <span class="text-[10px] uppercase font-bold text-yellow-500 leading-tight">Parada cercana</span>
+                <span class="trigger-text truncate leading-tight">{{ paradaCercana?.name }}</span>
+              </div>
+              <div class="text-[11px] font-bold bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-lg ml-2 whitespace-nowrap">
+                {{ (distanciaMetros && distanciaMetros < 1000) ? Math.round(distanciaMetros) + 'm' : (distanciaMetros ? (distanciaMetros / 1000).toFixed(1) + 'km' : '') }}
+              </div>
+              <button @click.stop="clearAllMapData" class="ml-3 p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
+                <span class="material-icons text-[20px] text-gray-400 hover:text-red-500">close</span>
+              </button>
             </div>
 
           </div>
@@ -1480,6 +1481,14 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
   letter-spacing: -0.01em;
 }
 
+.best-stop-banner {
+  flex: 1; /* Ocupa el espacio restante al lado de la búsqueda circular */
+  background: var(--header-bg);
+  border: 1px solid var(--border-color);
+  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
+  max-width: none;
+}
+
 .uber-search-panel {
   position: fixed;
   top: 70px; /* Debajo del header superior */