Decouple route selection: Map uses persistent store state, Schedules uses local state. Map selection only persists on Map banner.

frontend/src/stores/route.ts

@@ -12,6 +12,7 @@ export const useRouteStore = defineStore('route', () => {
     const isLoadingRoutes = ref(false)
     const isLoadingStops = ref(false)
     const error = ref<string | null>(null)
+    const wasSelectedFromMap = ref(false)
     const lastFetched = ref<number>(0) // ⚡ CACHÉ ESTÁTICO RUTAS
     const stopsCache = ref<Map<string, { fetchedAt: number, stops: BusStop[] }>>(new Map()) // ⚡ CACHÉ ESTÁTICO PARADAS
 
@@ -78,6 +79,7 @@ export const useRouteStore = defineStore('route', () => {
         selectedRouteId.value = null
         selectedRouteName.value = null
         selectedRouteStops.value = []
+        wasSelectedFromMap.value = false
     }
 
     return {
@@ -88,6 +90,7 @@ export const useRouteStore = defineStore('route', () => {
         isLoadingRoutes,
         isLoadingStops,
         error,
+        wasSelectedFromMap,
         hasSelectedRoute,
         loadRoutes,
         loadRouteStops,

frontend/src/views/MapView.vue

@@ -47,7 +47,6 @@ const unitFetchInterval = ref<any>(null);
 const userCoords = ref<{ lat: number; lng: number } | null>(null);
 const optimalStopPulse = ref<any>(null);
 const showRouteDropdown = ref(false);
-const wasSelectedFromMap = ref(false);
 const isInternalSelection = ref(false);
 
 const alturaNavbar = ref(64);
@@ -238,7 +237,7 @@ async function initializeMap() {
   }
   
   // If we have a selected route AND it was from map, show its stops
-  if (routeStore.selectedRouteId && routeStore.selectedRouteStops.length > 0 && wasSelectedFromMap.value) {
+  if (routeStore.selectedRouteId && routeStore.selectedRouteStops.length > 0 && routeStore.wasSelectedFromMap) {
     updateMapMarkers();
   } else {
     // If no route or not from map, ensure it's clean (promos stay though)
@@ -265,7 +264,7 @@ watch(
     // 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;
+      routeStore.wasSelectedFromMap = false;
     }
 
     // ALWAYS clear markers first when route changes - do this immediately
@@ -279,7 +278,7 @@ watch(
     }
     
     if (routeId) {
-      if (wasSelectedFromMap.value) {
+      if (routeStore.wasSelectedFromMap) {
         // Only update map visuals if selection came from the Map search flow
         await updateMapMarkers(true);
       } else {
@@ -290,7 +289,7 @@ watch(
     } else {
       // Clear markers when no route is selected
       lastProcessedRouteId.value = null;
-      wasSelectedFromMap.value = false; // Reset selection origin
+      routeStore.wasSelectedFromMap = false; // Reset selection origin
       clearMapMarkers();
     }
   },
@@ -409,7 +408,7 @@ async function updatePromoMarkers() {
 async function selectRouteAndClose(routeId: string, routeName: string) {
   console.log(`🤖 JARVIS: Iniciando viaje hacia ${routeName}`);
   isInternalSelection.value = true;
-  wasSelectedFromMap.value = true;
+  routeStore.wasSelectedFromMap = true;
   await routeStore.selectRoute(routeId, routeName);
   showRouteDropdown.value = false;
   showUberSearch.value = false; // Close the expanded search panel
@@ -631,12 +630,12 @@ async function highlightOptimalStopForRoute() {
         </div>
 
         <!-- Uber-like Search Interface -->
-        <div class="uber-search-container" :class="{ 'compact-mode': routeStore.selectedRouteId && wasSelectedFromMap && !showUberSearch }">
+        <div class="uber-search-container" :class="{ 'compact-mode': routeStore.selectedRouteId && routeStore.wasSelectedFromMap && !showUberSearch }">
           <!-- Floating Triggers -->
           <div v-if="!showUberSearch" class="triggers-row">
             <!-- Shrunk Trigger (Icon only) - Only if selected from MAP -->
             <div 
-              v-if="routeStore.selectedRouteId && wasSelectedFromMap" 
+              v-if="routeStore.selectedRouteId && routeStore.wasSelectedFromMap" 
               class="uber-search-trigger circular" 
               @click="openUberSearch"
               :title="t('map.search')"
@@ -657,7 +656,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 && wasSelectedFromMap" 
+                v-if="paradaCercana && routeStore.selectedRouteId && !showETACard && !isBannerClosing && routeStore.wasSelectedFromMap" 
                 class="best-stop-banner-compact"
               >
               <div class="banner-icon-bg">
@@ -712,7 +711,7 @@ async function highlightOptimalStopForRoute() {
               v-for="route in routeStore.allRoutes" 
               :key="route.id" 
               class="uber-result-item"
-              :class="{ 'selected-route': route.id === routeStore.selectedRouteId && wasSelectedFromMap }"
+              :class="{ 'selected-route': route.id === routeStore.selectedRouteId && routeStore.wasSelectedFromMap }"
               @click="selectRouteAndClose(route.id, route.name)"
             >
               <div class="result-icon">

frontend/src/views/SchedulesView.vue

@@ -15,6 +15,11 @@ const routeStore = useRouteStore()
 const dropdownOpen = ref(false)
 const dayFilter = ref<'all' | 'today' | 'tomorrow'>('today')
 
+// SIBU | Estado local para independizar el selector de horarios del mapa
+const localSelectedRouteId = ref<string | null>(null)
+const localSelectedRouteName = ref<string | null>(null)
+const hasLocalSelection = computed(() => localSelectedRouteId.value !== null)
+
 // ── Tipos de día
 const DAY_TYPES: Record<string, string> = {
   'weekday':  t('schedules.types.weekday'),
@@ -123,7 +128,10 @@ function pickRoute(id: string, name: string) {
     item_id: name,
     properties: { route_id: id }
   })
-  routeStore.selectRoute(id, name)
+  
+  // SIBU | Solo actualizamos estado local (Independiente del mapa)
+  localSelectedRouteId.value = id
+  localSelectedRouteName.value = name
   scheduleStore.loadRouteSchedules(id)
 }
 
@@ -146,8 +154,13 @@ onMounted(async () => {
     const found = routeStore.allRoutes.find(r => r.id === queryRouteId)
     if (found) pickRoute(found.id, found.name)
   } else if (routeStore.selectedRouteId) {
-    // SIBU | Si venimos de otra vista (Mapa) con una ruta, cargamos sus horarios
+    // SIBU | Inicializamos con la ruta del mapa, pero a partir de aquí son independientes
-    scheduleStore.loadRouteSchedules(routeStore.selectedRouteId)
+    const mapRoute = routeStore.allRoutes.find(r => r.id === routeStore.selectedRouteId)
+    if (mapRoute) {
+       localSelectedRouteId.value = mapRoute.id
+       localSelectedRouteName.value = mapRoute.name
+       scheduleStore.loadRouteSchedules(mapRoute.id)
+    }
   }
 })
 
@@ -173,7 +186,7 @@ onUnmounted(() => {
     <!-- ── HEADER ── -->
     <header class="sch-header">
       <h1 class="sch-title">{{ t('schedules.title') }}</h1>
-      <p class="sch-subtitle" v-if="!routeStore.hasSelectedRoute">
+      <p class="sch-subtitle" v-if="!hasLocalSelection">
         {{ t('schedules.selectRoute') }}
       </p>
     </header>
@@ -185,7 +198,7 @@ onUnmounted(() => {
         <!-- Botón disparador -->
         <button
           class="selector-trigger"
-          :class="{ 'selector-trigger--active': routeStore.hasSelectedRoute }"
+          :class="{ 'selector-trigger--active': hasLocalSelection }"
           @click.stop="dropdownOpen = !dropdownOpen"
           :disabled="routeStore.isLoadingRoutes"
         >
@@ -193,8 +206,8 @@ onUnmounted(() => {
             <div class="trigger-icon">
               <span class="material-icons">directions_bus</span>
             </div>
-            <span class="trigger-text" :class="{ 'trigger-text--selected': routeStore.hasSelectedRoute }">
+            <span class="trigger-text" :class="{ 'trigger-text--selected': hasLocalSelection }">
-              {{ routeStore.isLoadingRoutes ? t('schedules.loadingRoutes') : (routeStore.selectedRouteName || t('schedules.placeholder')) }}
+              {{ routeStore.isLoadingRoutes ? t('schedules.loadingRoutes') : (localSelectedRouteName || t('schedules.placeholder')) }}
             </span>
           </div>
           <span class="material-icons trigger-arrow" :class="{ 'trigger-arrow--up': dropdownOpen }">
@@ -217,12 +230,12 @@ onUnmounted(() => {
                 v-for="r in routeStore.allRoutes"
                 :key="r.id"
                 class="dropdown-item"
-                :class="{ 'dropdown-item--active': r.id === routeStore.selectedRouteId }"
+                :class="{ 'dropdown-item--active': r.id === localSelectedRouteId }"
                 @click.stop="pickRoute(r.id, r.name)"
               >
                 <span class="material-icons dropdown-item-icon">directions_bus</span>
                 <span class="dropdown-item-name">{{ r.name }}</span>
-                <span v-if="r.id === routeStore.selectedRouteId" class="material-icons dropdown-item-check">check</span>
+                <span v-if="r.id === localSelectedRouteId" class="material-icons dropdown-item-check">check</span>
               </button>
               <div v-if="routeStore.allRoutes.length === 0" class="dropdown-empty">
                 {{ t('schedules.noRoutesAvailable') }}
@@ -234,7 +247,7 @@ onUnmounted(() => {
     </div>
 
     <!-- ── ESTADO VACÍO — sin ruta seleccionada ── -->
-    <div v-if="!routeStore.hasSelectedRoute" class="empty-state">
+    <div v-if="!hasLocalSelection" class="empty-state">
       <div class="empty-illustration">
         <svg width="80" height="80" viewBox="0 0 80 80" fill="none">
           <circle cx="40" cy="38" r="24" stroke="var(--active-color)" stroke-width="3.5" stroke-linecap="round" stroke-dasharray="6 4"/>
@@ -304,7 +317,7 @@ onUnmounted(() => {
               </span>
               <span v-if="i === 0 && getBusStatus(schedule.departure_time) === 'departing'" class="departing-pulse">{{ t('schedules.departing') || 'SALIENDO' }}</span>
             </div>
-            <p class="route-name">{{ routeStore.selectedRouteName }}</p>
+            <p class="route-name">{{ localSelectedRouteName }}</p>
             <p class="card-detail">
               <span class="material-icons card-detail-icon">schedule</span>
               {{ DAY_TYPES[schedule.schedule_type] || schedule.schedule_type }}