From 23b7bd453970192592e203d6b1de2783c89b84ee Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Sat, 28 Feb 2026 22:08:34 -0500
Subject: [PATCH] fix: fully decouple schedules from map search UI and center
 offers

---
 frontend/src/views/MapView.vue | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
index b9718cc..403b4c6 100644
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -51,6 +51,7 @@ const showRouteDropdown = ref(false);
 const routeCardRef = ref<HTMLElement | null>(null);
 const mappingSequenceId = ref(0);
 const wasSelectedFromMap = ref(false);
+const isInternalSelection = ref(false);
 
 const alturaNavbar = ref(64);
 // Search state
@@ -259,6 +260,12 @@ async function initializeMap() {
 watch(
   () => routeStore.selectedRouteId,
   async (routeId, oldRouteId) => {
+    // Si la selección no viene de dentro de MapView (selectRouteAndClose),
+    // reseteamos el flag de origen Mapa para que el buscador no se "fije"
+    if (!isInternalSelection.value) {
+      wasSelectedFromMap.value = false;
+    }
+
     // ALWAYS clear markers first when route changes - do this immediately
     if (oldRouteId !== routeId) {
       console.log(`Route changing from ${oldRouteId} to ${routeId} - clearing markers`)
@@ -395,6 +402,7 @@ async function updatePromoMarkers() {
 
 async function selectRouteAndClose(routeId: string, routeName: string) {
   console.log(`🤖 JARVIS: Iniciando viaje hacia ${routeName}`);
+  isInternalSelection.value = true;
   wasSelectedFromMap.value = true;
   await routeStore.selectRoute(routeId, routeName);
   showRouteDropdown.value = false;
@@ -404,6 +412,7 @@ async function selectRouteAndClose(routeId: string, routeName: string) {
   if (routeStore.selectedRouteStops.length > 0) {
     await highlightOptimalStopForRoute();
   }
+  isInternalSelection.value = false;
 }
 async function updateActiveUnits() {
   if (!isLoaded.value) return;
@@ -607,7 +616,7 @@ async function highlightOptimalStopForRoute() {
         </div>
 
         <!-- Uber-like Search Interface -->
-        <div class="uber-search-container" :class="{ 'compact-mode': routeStore.selectedRouteId && !showUberSearch }">
+        <div class="uber-search-container" :class="{ 'compact-mode': routeStore.selectedRouteId && wasSelectedFromMap && !showUberSearch }">
           <!-- Floating Triggers -->
           <div v-if="!showUberSearch" class="triggers-row">
             <!-- Shrunk Trigger (Icon only) - Only if selected from MAP -->
@@ -633,7 +642,7 @@ async function highlightOptimalStopForRoute() {
             <!-- Nuevo Banner de Parada Cercana Alineado (Redimensionado y con ETA) -->
             <Transition name="banner-slide">
               <div 
-                v-if="paradaCercana && routeStore.selectedRouteId && !showETACard && !isBannerClosing" 
+                v-if="paradaCercana && routeStore.selectedRouteId && !showETACard && !isBannerClosing && wasSelectedFromMap" 
                 class="best-stop-banner-compact"
               >
               <div class="banner-icon-bg">
@@ -932,9 +941,9 @@ async function highlightOptimalStopForRoute() {
 ═══════════════════════════════════════ */
 .offers-sheet {
   position: fixed;
-  bottom: 80px; /* Separado del borde inferior/menú */
+  top: 50%;
   left: 50%;
-  transform: translateX(-50%) translateY(0);
+  transform: translate(-50%, -50%);
   width: 92%;
   max-width: 400px;
   background: rgba(255, 255, 255, 0.85);
@@ -947,7 +956,7 @@ async function highlightOptimalStopForRoute() {
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
   color: #000;
   overflow: hidden;
-  transition: transform 0.6s cubic-bezier(0.32, 0.72, 0, 1), opacity 0.5s ease;
+  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -1701,7 +1710,7 @@ html.light-theme .uber-search-trigger-compact {
 }
 .sheet-slide-enter-from,
 .sheet-slide-leave-to {
-  transform: translateX(-50%) translateY(110%) scale(0.95);
+  transform: translate(-50%, -50%) scale(0.8);
   opacity: 0;
 }