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

frontend/src/composables/useDirectionsRoute.ts

@@ -1,5 +1,7 @@
 import { ref } from 'vue';
 
+import { useMapState } from './useMapState';
+
 export interface Parada {
     id: number;
     nombre: string;
@@ -11,15 +13,15 @@ export interface Parada {
 export function useDirectionsRoute() {
     const estasCargando = ref<boolean>(false);
     const errorRuta = ref<string | null>(null);
-    const renderizadoresActivos = ref<google.maps.DirectionsRenderer[]>([]);
+    const { registrarRenderer, renderers } = useMapState();
 
     // Limpia los tramos anteriores dibujados en el mapa
     const limpiarRuta = () => {
-        if (renderizadoresActivos.value.length > 0) {
-            renderizadoresActivos.value.forEach((renderer) => {
+        if (renderers.value.length > 0) {
+            renderers.value.forEach((renderer) => {
                 renderer.setMap(null);
             });
-            renderizadoresActivos.value = [];
+            renderers.value = [];
         }
         errorRuta.value = null;
     };
@@ -76,18 +78,18 @@ export function useDirectionsRoute() {
                         suppressMarkers: true, // SIBU maneja los suyos propios
                         preserveViewport: true, // No auto centrar en cada tramo para evitar parpadeos visuales
                         polylineOptions: isPast ? {
-                            strokeColor: '#9CA3AF', // Gris Tailwind 400
+                            strokeColor: '#FDE68A', // amarillo muy tenue
                             strokeWeight: 3,
                             strokeOpacity: 0.4
                         } : {
-                            strokeColor: '#1D4ED8', // Azul Tailwind 700
+                            strokeColor: '#FBBF24', // amarillo principal
                             strokeWeight: 5,
                             strokeOpacity: 0.95
                         }
                     });
 
                     renderer.setDirections(response);
-                    renderizadoresActivos.value.push(renderer);
+                    registrarRenderer(renderer);
 
                 } catch (err: any) {
                     console.warn(`SIBU | Tramo ${i} falló: `, err);