fix: decouple map search from global selection and fix offers anchoring/masking

frontend/src/views/MapView.vue

@@ -50,6 +50,7 @@ const optimalStopPulse = ref<any>(null);
 const showRouteDropdown = ref(false);
 const routeCardRef = ref<HTMLElement | null>(null);
 const mappingSequenceId = ref(0);
+const wasSelectedFromMap = ref(false);
 
 const alturaNavbar = ref(64);
 // Search state
@@ -276,6 +277,7 @@ watch(
     } else {
       // Clear markers when no route is selected
       lastProcessedRouteId.value = null;
+      wasSelectedFromMap.value = false; // Reset selection origin
       clearMapMarkers();
     }
   },
@@ -393,6 +395,7 @@ async function updatePromoMarkers() {
 
 async function selectRouteAndClose(routeId: string, routeName: string) {
   console.log(`🤖 JARVIS: Iniciando viaje hacia ${routeName}`);
+  wasSelectedFromMap.value = true;
   await routeStore.selectRoute(routeId, routeName);
   showRouteDropdown.value = false;
   showUberSearch.value = false; // Close the expanded search panel
@@ -607,9 +610,9 @@ async function highlightOptimalStopForRoute() {
         <div class="uber-search-container" :class="{ 'compact-mode': routeStore.selectedRouteId && !showUberSearch }">
           <!-- Floating Triggers -->
           <div v-if="!showUberSearch" class="triggers-row">
-            <!-- Shrunk Trigger (Icon only) -->
+            <!-- Shrunk Trigger (Icon only) - Only if selected from MAP -->
             <div 
-              v-if="routeStore.selectedRouteId" 
+              v-if="routeStore.selectedRouteId && wasSelectedFromMap" 
               class="uber-search-trigger circular" 
               @click="openUberSearch"
               title="Buscar"
@@ -685,7 +688,7 @@ async function highlightOptimalStopForRoute() {
               v-for="route in routeStore.allRoutes" 
               :key="route.id" 
               class="uber-result-item"
-              :class="{ 'selected-route': route.id === routeStore.selectedRouteId }"
+              :class="{ 'selected-route': route.id === routeStore.selectedRouteId && wasSelectedFromMap }"
               @click="selectRouteAndClose(route.id, route.name)"
             >
               <div class="result-icon">
@@ -702,9 +705,11 @@ async function highlightOptimalStopForRoute() {
           </div> <!-- Fin uber-results -->
         </div> <!-- Fin uber-search-panel -->
       </Transition>
-    </div> <!-- Fin uber-search-container -->
+        </div> <!-- Ends uber-search-container -->
+      </div> <!-- Ends map-view -->
+    </div> <!-- Ends map-side -->
 
-        <!-- Offers Floating Card (Uber Eats style) -->
+    <!-- Offers Floating Card (Uber Eats style) - OUTSIDE map-side to avoid anchoring -->
     <Transition name="sheet-slide">
         <div v-if="showPromos && couponStore.coupons.length > 0" class="offers-sheet">
           <!-- Header -->
@@ -746,7 +751,6 @@ async function highlightOptimalStopForRoute() {
                   <span class="sheet-biz-name">{{ currentPromo.business?.name || 'Local' }}</span>
                   <h3 class="sheet-promo-title">{{ currentPromo.title }}</h3>
                   <button class="sheet-cta" @click="handlePromoClick(currentPromo)">Ver detalles</button>
-                    <!-- CTA to business removed for simplification -->
                 </div>
               </div>
             </Transition>
@@ -768,8 +772,6 @@ async function highlightOptimalStopForRoute() {
           </div>
         </div>
       </Transition>
-        </div>
-      </div>
 
     <!-- Modal for details removed as per request to eliminate extra markings -->
 
@@ -929,7 +931,7 @@ async function highlightOptimalStopForRoute() {
    OFFERS BOTTOM SHEET
 ═══════════════════════════════════════ */
 .offers-sheet {
-  position: absolute;
+  position: fixed;
   bottom: 80px; /* Separado del borde inferior/menú */
   left: 50%;
   transform: translateX(-50%) translateY(0);
@@ -940,7 +942,7 @@ async function highlightOptimalStopForRoute() {
   -webkit-backdrop-filter: blur(20px) saturate(180%);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 24px;
-  z-index: 2000;
+  z-index: 3000; /* Aumentado para estar sobre todo */
   padding: 12px;
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
   color: #000;