feat(UI): actualización de colores de ruta a amarillo y fix navegación transporte

frontend/src/views/MapView.vue

@@ -16,6 +16,8 @@ import { useETA } from "@/composables/useETA";
 const BusStopInfoModal = defineAsyncComponent(() => import("@/components/BusStopInfoModal.vue"));
 const ETACard = defineAsyncComponent(() => import("@/components/ETACard.vue"));
 import type { BusStop } from '@/types'
+import { useFlujoPrincipal } from "@/composables/useFlujoPrincipal";
+import { useMapState } from "@/composables/useMapState";
 
 const router = useRouter();
 const { t } = useI18n();
@@ -26,12 +28,16 @@ const busStopStore = useBusStopStore();
 const couponStore = useCouponStore();
 
 const { map, isLoaded, error: mapsError, initMap, addCleanMarker, addHtmlMarker, setCenter, setZoom, addMarker, clearAllOverlays } = useGoogleMaps();
-const { trazarRuta, limpiarRuta, estasCargando: estasCargandoRuta, errorRuta } = useDirectionsRoute();
+const { estasCargando: estasCargandoRuta, errorRuta } = useDirectionsRoute();
 const { encontrarParadaCercana, limpiarCaminata, paradaCercana, distanciaMetros, duracionCaminata } = useParadaCercana();
 const { calcularETA, busesActivos, cargando: etaCargando } = useETA();
 
+const { procesarSeleccionDeRuta } = useFlujoPrincipal();
+const { limpiarMapa: limpiarTodoCentralizado } = useMapState();
+
 const showETACard = ref(false);
 
+// Local old tracking states can be removed, but kept for compatibility or Uber flow:
 const markers = ref<any[]>([]);
 const promoMarkers = ref<any[]>([]);
 const userMarker = ref<any>(null);
@@ -149,9 +155,11 @@ async function clearAllMapData() {
        try { if (optimalStopPulse.value.setMap) optimalStopPulse.value.setMap(null); } catch(e){}
        optimalStopPulse.value = null;
     }
-    limpiarRuta();
     limpiarCaminata();
     showETACard.value = false;
+    
+    // Nueva Purgación Centralizada:
+    limpiarTodoCentralizado();
 
     // 7. Restaurar Solo Usuario tras un breve respiro
     await nextTick();
@@ -410,161 +418,41 @@ watch(
   { deep: true }
 );
 
+// Replaced by useMapState central clearing
 function clearMapMarkers() {
-  console.log('clearMapMarkers called - clearing bus stop markers')
-  
-  // Do NOT call clearAllOverlays() here as it wipes out EVERYTHING (including POIs)
-  // Instead, clear only the markers we track locally for routes
-
-  // Also clear our local tracking and ensure markers are removed
-  const markerCount = markers.value.length
-  markers.value.forEach((marker: any) => {
-    if (marker) {
-      // Remove marker from map
-      if (marker.setMap) {
-        marker.setMap(null);
-      }
-      // Also try to remove it if it has a remove method
-      if (typeof marker.remove === 'function') {
-        marker.remove();
-      }
-    }
-  });
-  // Clear the array
-  markers.value = [];
-  console.log(`Cleared ${markerCount} local markers`)
-
-  // Clear polyline
-  if (polyline.value) {
-    polyline.value.setMap(null);
-    polyline.value = null;
-  }
-  
-  // Clear walking polyline
-  if (walkingPolyline.value) {
-    walkingPolyline.value.setMap(null);
-    walkingPolyline.value = null;
-  }
-  if (walkingPolylineBorder.value) {
-    walkingPolylineBorder.value.setMap(null);
-    walkingPolylineBorder.value = null;
-  }
-
-  // Clear optimal pulse
-  if (optimalStopPulse.value) {
-    if (typeof optimalStopPulse.value.setMap === 'function') {
-      optimalStopPulse.value.setMap(null);
-    }
-    optimalStopPulse.value = null;
-  }
-  
-  // Clear directions route
-  limpiarRuta();
-  limpiarCaminata();
-  showETACard.value = false;
+  limpiarTodoCentralizado()
 }
 
 async function updateMapMarkers() {
-  if (!isLoaded.value) return;
+  if (!isLoaded.value || !map.value) return;
 
-  // Incrementar ID de secuencia para invalidar dibujos previos
-  mappingSequenceId.value++;
-  const thisSeq = mappingSequenceId.value;
-  
   const currentRequestRouteId = routeStore.selectedRouteId;
   const stops = [...routeStore.selectedRouteStops];
   
   if (!currentRequestRouteId || stops.length === 0) {
     clearMapMarkers();
-    limpiarRuta();
     return;
   }
-
-  isUpdatingMarkers.value = true;
-  console.log(`🤖 JARVIS: Iniciando dibujo de markers (Secuencia: ${thisSeq})`)
-
-  try {
-    await nextTick();
-    await new Promise(resolve => setTimeout(resolve, 30));
-
-    // Abortar si la secuencia cambió durante la espera
-    if (mappingSequenceId.value !== thisSeq || !routeStore.selectedRouteId) {
-      return;
-    }
-
-    clearMapMarkers();
-    limpiarRuta();
-
-    let pastStops: any[] = [];
-    let relevantStops: any[] = [...stops];
-
-    if (paradaCercana.value) {
-      const idx = stops.findIndex(s => s.id === paradaCercana.value?.id);
-      if (idx > 0) {
-        pastStops = stops.slice(0, idx + 1); // overlap that 1 point for continuous mapping
-        relevantStops = stops.slice(idx);
-      }
-    }
-
-    const newMarkers: any[] = [];
-    
-    // Paradas del tramo relevante: mostrar con clean markers
-    relevantStops.forEach((stop, index) => {
-        let tipo: 'normal' | 'cercana' | 'origen' | 'destino' = 'normal';
-
-        if (paradaCercana.value && stop.id === paradaCercana.value.id) tipo = 'cercana';
-        else if (index === relevantStops.length - 1) tipo = 'destino';
-        else if (!paradaCercana.value && index === 0) tipo = 'origen';
-        
-        const marker = addCleanMarker(
-            { lat: stop.latitude, lng: stop.longitude },
-            stop.name,
-            tipo,
-            () => handleBusStopClick(stop)
-        );
-        if (marker) newMarkers.push(marker);
-    });
-
-    markers.value = newMarkers;
-
-    // Dibujar en paralelo ambos tramos
-    const renderPromises = [];
-    if (pastStops.length > 1 && map.value) {
-        renderPromises.push(trazarRuta(pastStops.map((p, i) => ({
-            id: i, nombre: p.name, latitud: p.latitude, longitud: p.longitude, orden: i
-        })), map.value, true));
-    }
-    if (relevantStops.length > 1 && map.value) {
-        renderPromises.push(trazarRuta(relevantStops.map((p, i) => ({
-            id: i, nombre: p.name, latitud: p.latitude, longitud: p.longitude, orden: i
-        })), map.value, false));
-    }
-    await Promise.all(renderPromises);
-
-    // Zoom automático al tramo que le importa al usuario
-    if (map.value) {
-        const bounds = new google.maps.LatLngBounds();
-        if (userCoords.value) {
-            bounds.extend(userCoords.value);
-        }
-        relevantStops.forEach(p => bounds.extend({ lat: p.latitude, lng: p.longitude }));
-        
-        // Timeout para que los directions renderers también ajusten bounds si preserveViewport estaba false (actualmente es true)
-        setTimeout(() => {
-          if (map.value && bounds.getNorthEast() && bounds.getSouthWest()) {
-             map.value.fitBounds(bounds, { top: 80, bottom: 120, left: 20, right: 20 });
-          }
-        }, 150);
-    }
-    
-  } catch (err) {
-      console.error('❌ JARVIS: Error en updateMapMarkers:', err);
-  } finally {
-      if (mappingSequenceId.value === thisSeq) {
-        isUpdatingMarkers.value = false;
-        // updateMarkersStyles NO hace falta para "clean markers". Lo mantenemos en caso sea forzado.
-      }
-  }
+  
+  const selectedRouteObj = routeStore.allRoutes.find(r => r.id === currentRequestRouteId) || { id: currentRequestRouteId, short_name: currentRequestRouteId };
+  
+  // Llamar al procesador de flujo principal, lo cual limpia el mapa y centra.
+  await procesarSeleccionDeRuta(selectedRouteObj, stops as BusStop[], map.value);
+  
+  // Agregar todos los stops como marcadores 'normales' para que se vean en el mapa
+  const { paradaCercana } = useParadaCercana();
+  
+  stops.forEach(stop => {
+      // Evitar sobre dibujar si es la cercana (useFlujoPrincipal ya se encargó)
+      if (paradaCercana.value && stop.id === paradaCercana.value.id) return;
+      
+      addCleanMarker(
+          { lat: stop.latitude, lng: stop.longitude },
+          stop.name,
+          'normal',
+          () => handleBusStopClick(stop)
+      );
+  });
 }
 
 function updateMarkersStyles() {