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

frontend/split.py

@@ -0,0 +1,149 @@
+import re
+
+with open('src/views/TaxiView.vue', 'r', encoding='utf-8') as f:
+    text = f.read()
+
+# Just extract the content using regex
+template_match = re.search(r'<template>(.*?)</template>\s*<style', text, re.DOTALL)
+if template_match:
+    template_content = template_match.group(1)
+    
+    # Split by tabs
+    tab1_match = re.search(r'<!-- TAB 1: LOCAL TAXIS -->(.*?)<!-- TAB 2: INTERCITY SHUTTLES -->', template_content, re.DOTALL)
+    tab2_match = re.search(r'<!-- TAB 2: INTERCITY SHUTTLES -->(.*?)</div>\s*$', template_content, re.DOTALL)
+    
+    if tab1_match and tab2_match:
+        tab1_code = tab1_match.group(1)
+        tab2_code = tab2_match.group(1)
+        
+        # Clean up the `<template v-if="currentTab === 'local'">` wrapper
+        tab1_code = re.sub(r'<template v-if="currentTab === \'local\'">', '', tab1_code)
+        tab1_code = re.sub(r'</template>\s*$', '', tab1_code.strip())
+        
+        tab2_code = re.sub(r'<template v-else>', '', tab2_code)
+        tab2_code = re.sub(r'</template>\s*$', '', tab2_code.strip())
+
+        # Read style
+        style_match = re.search(r'<style scoped>(.*?)</style>', text, re.DOTALL)
+        style_content = style_match.group(1) if style_match else ""
+        
+        # Create TaxisLocales.vue
+        taxis_script = """<script setup lang="ts">
+import { onMounted, ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { useTaxiStore } from '@/stores/taxi'
+import { analyticsService } from '@/services/analyticsService'
+import type { Taxi } from '@/types'
+import FavoriteButton from '@/components/FavoriteButton.vue'
+import { getImageUrl } from '@/utils/imageUrl'
+
+const { t } = useI18n()
+const taxiStore = useTaxiStore()
+const router = useRouter()
+
+const selectedZone = ref('all')
+const selectedShift = ref('all')
+const onlyEnglish = ref(false)
+
+const corregimientos = ['all', 'Boquete', 'David - Boquete', 'Boquete - David', 'Aeropuerto - Boquete']
+const shifts = ['all', 'dia', 'tarde', 'noche']
+
+onMounted(async () => {
+    analyticsService.logEvent({ event_name: 'screen_view', screen_name: 'TaxisLocales' })
+    if(taxiStore.taxis.length === 0) {
+        await taxiStore.loadTaxis()
+    }
+})
+
+const filteredTaxis = computed(() => {
+  return taxiStore.taxis.filter(taxi => {
+    const matchesZone = selectedZone.value === 'all' || taxi.corregimiento === selectedZone.value
+    const matchesShift = selectedShift.value === 'all' || taxi.shift === selectedShift.value
+    const matchesEnglish = !onlyEnglish.value || taxi.english_speaking
+    return matchesZone && matchesShift && matchesEnglish
+  })
+})
+
+const handleCall = (taxi: Taxi) => {
+  analyticsService.logEvent({ 
+    event_name: 'taxi_click', 
+    item_id: taxi.owner_name,
+    properties: { 
+      action: 'call',
+      taxi_id: taxi.id,
+      plate: taxi.license_plate
+    }
+  })
+  window.location.href = `tel:${taxi.phone_number}`
+}
+
+function getShiftLabel(shift: string) {
+  if (shift === 'dia') return t('taxi.dayShift')
+  if (shift === 'tarde') return t('taxi.afternoonShift')
+  if (shift === 'noche') return t('taxi.nightShift')
+  return shift
+}
+</script>"""
+        
+        with open('src/views/transporte/TaxisLocales.vue', 'w', encoding='utf-8') as f:
+            f.write(taxis_script + f"\n<template>\n  <div class=\"taxis-locales\">\n{tab1_code}\n  </div>\n</template>\n\n<style scoped>\n{style_content}\n</style>")
+            
+        # Create ViajesTuristicos.vue
+        viajes_script = """<script setup lang="ts">
+import { onMounted, ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useShuttleStore } from '@/stores/shuttle'
+import { analyticsService } from '@/services/analyticsService'
+import { getImageUrl } from '@/utils/imageUrl'
+
+const { t } = useI18n()
+const shuttleStore = useShuttleStore()
+const router = useRouter()
+
+const shuttleRouteFilter = ref('all')
+const shuttleTypeFilter = ref('all')
+const shuttleRefs = ref<Record<string, any>>({})
+
+const setShuttleRef = (el: any, id: string) => {
+  if (el) shuttleRefs.value[id] = el
+}
+
+const shuttleRoutes = computed(() => {
+  const routes = shuttleStore.shuttles.map(s => `${s.origin} - ${s.destination}`)
+  return [...new Set(routes)].sort()
+})
+
+const filteredShuttles = computed(() => {
+  return shuttleStore.shuttles.filter(shuttle => {
+    const routeName = `${shuttle.origin} - ${shuttle.destination}`
+    const matchesRoute = shuttleRouteFilter.value === 'all' || routeName === shuttleRouteFilter.value
+    const matchesType = shuttleTypeFilter.value === 'all' || shuttle.trip_type === shuttleTypeFilter.value
+    return matchesRoute && matchesType
+  })
+})
+
+const verDetalle = (shuttleId: number) => {
+    router.push({
+        name: 'ShuttleDetalle',
+        params: { id: shuttleId }
+    })
+}
+
+onMounted(async () => {
+    analyticsService.logEvent({ event_name: 'screen_view', screen_name: 'ViajesTuristicos' })
+    if(shuttleStore.shuttles.length === 0) {
+        await shuttleStore.loadShuttles()
+    }
+})
+</script>"""
+        tab2_code = tab2_code.replace("router.push(`/shuttle/${shuttle.id}`);", "verDetalle(shuttle.id);")
+        with open('src/views/transporte/ViajesTuristicos.vue', 'w', encoding='utf-8') as f:
+            f.write(viajes_script + f"\n<template>\n  <div class=\"viajes-turisticos\">\n{tab2_code}\n  </div>\n</template>\n\n<style scoped>\n{style_content}\n</style>")
+            
+        print("Success!")
+    else:
+        print("Could not find tabs")
+else:
+    print("Could not find template")

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) {
+        if (renderers.value.length > 0) {
-            renderizadoresActivos.value.forEach((renderer) => {
+            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);

frontend/src/composables/useFlujoPrincipal.ts

@@ -0,0 +1,203 @@
+import { ref } from 'vue'
+import { useMapState } from './useMapState'
+import { useDirectionsRoute } from './useDirectionsRoute'
+import { useParadaCercana } from './useParadaCercana'
+import type { BusStop } from '@/types'
+
+export const useFlujoPrincipal = () => {
+    const { limpiarMapa, registrarMarker } = useMapState()
+    const { encontrarParadaCercana } = useParadaCercana()
+    const { trazarRuta } = useDirectionsRoute()
+    const cargando = ref(false)
+    const errorMsg = ref('')
+
+    // Simulated obtenerUbicacion (since it was just navigator.geolocation)
+    const obtenerUbicacion = (): Promise<{ lat: number, lng: number }> => {
+        return new Promise((resolve, reject) => {
+            if (!navigator.geolocation) return reject(new Error('No geolocation'))
+            navigator.geolocation.getCurrentPosition(
+                (pos) => resolve({ lat: pos.coords.latitude, lng: pos.coords.longitude }),
+                (err) => reject(err),
+                { enableHighAccuracy: true, timeout: 8000, maximumAge: 30000 }
+            )
+        })
+    }
+
+    const procesarSeleccionDeRuta = async (
+        _ruta: { id: string },
+        paradas: BusStop[],
+        map: google.maps.Map | undefined
+    ) => {
+        if (!map) return
+
+        try {
+            // ── PASO 1: Limpiar todo lo que había antes ──────────
+            limpiarMapa()
+            cargando.value = true
+
+            // ── PASO 2: Obtener ubicación ──
+            // Paradas ya vienen precargadas desde store para evitar doble fetch
+            let ubicacion: { lat: number, lng: number } | null = null;
+            try {
+                ubicacion = await obtenerUbicacion();
+            } catch (err) {
+                console.warn('SIBU | No se pudo obtener ubicación', err);
+            }
+
+            // Format Paradas for trazarRuta
+            const paradasFormateadas = paradas.map((p, i) => ({
+                id: typeof p.id === 'string' ? parseInt(p.id) || i : p.id || i,
+                nombre: p.name,
+                latitud: p.latitude,
+                longitud: p.longitude,
+                orden: i
+            }));
+
+            // Si no hay paradas o muy pocas, abortar
+            if (paradasFormateadas.length < 2) return;
+
+            if (!ubicacion) {
+                // Fallback: solo dibujar la ruta sin parada cercana (o podríamos no hacer zoom guiado)
+                await trazarRuta(paradasFormateadas, map, false);
+                return;
+            }
+
+            // ── PASO 3: Dibujar ruta completa (fondo, gris tenue) ─
+            await trazarRuta(paradasFormateadas, map, true);
+
+            // ── PASO 4: Calcular parada más cercana ───────────────
+            await encontrarParadaCercana(ubicacion, paradas, map)
+            // Buscamos manualmente porque encontrarParadaCercana guarda en su propio ref interno que no retornamos fácil
+            // o podemos usar useParadaCercana().paradaCercana.value
+            // Actually, refactor from useParadaCercana: finding the closest
+
+            const { paradaCercana } = useParadaCercana()
+            await encontrarParadaCercana(ubicacion, paradas, undefined) // sin mapa para no dibujar polilínea vieja por encima
+
+            const paradaCercanaFound = paradaCercana.value
+
+            if (!paradaCercanaFound) {
+                return;
+            }
+
+            // ── PASO 5: Dibujar tramo relevante (azul vivo) ───────
+            const idx = paradasFormateadas.findIndex(p => p.longitud === paradaCercanaFound.longitude && p.latitud === paradaCercanaFound.latitude)
+            if (idx !== -1) {
+                const tramoRelevante = paradasFormateadas.slice(idx)
+                if (tramoRelevante.length > 1) {
+                    await trazarRuta(tramoRelevante, map, false)
+                }
+            }
+
+            // ── PASO 6: Marcador de parada cercana ────────────────
+            registrarMarker(
+                new google.maps.Marker({
+                    position: { lat: paradaCercanaFound.latitude, lng: paradaCercanaFound.longitude },
+                    map,
+                    icon: {
+                        path: google.maps.SymbolPath.CIRCLE,
+                        fillColor: '#F59E0B',
+                        fillOpacity: 1,
+                        strokeColor: '#FFFFFF',
+                        strokeWeight: 3,
+                        scale: 12
+                    },
+                    title: paradaCercanaFound.name,
+                    zIndex: 10
+                })
+            )
+
+            // ── PASO 7: Pulso animado en ubicación del usuario ────
+            dibujarPulsoUsuario(ubicacion, map)
+
+            // ── PASO 8: Zoom centrado en usuario + parada cercana ─
+            hacerZoomAlTramoRelevante(ubicacion, paradaCercanaFound, map)
+
+        } catch (error) {
+            console.error('SIBU | Error procesando ruta:', error)
+            errorMsg.value = 'No se pudo cargar la ruta'
+        } finally {
+            cargando.value = false
+        }
+    }
+
+    // PULSO ANIMADO EN LA UBICACIÓN DEL USUARIO:
+    const dibujarPulsoUsuario = (
+        ubicacion: { lat: number, lng: number },
+        map: google.maps.Map
+    ) => {
+        const { registrarCircle, registrarMarker } = useMapState()
+
+        // Círculo exterior pulsante (efecto ripple)
+        registrarCircle(
+            new google.maps.Circle({
+                map,
+                center: ubicacion,
+                radius: 80,              // metros
+                fillColor: '#3B82F6',
+                fillOpacity: 0.15,
+                strokeColor: '#3B82F6',
+                strokeOpacity: 0.4,
+                strokeWeight: 1,
+                zIndex: 1
+            })
+        )
+
+        // Punto central sólido del usuario
+        registrarMarker(
+            new google.maps.Marker({
+                position: ubicacion,
+                map,
+                icon: {
+                    path: google.maps.SymbolPath.CIRCLE,
+                    fillColor: '#3B82F6',    // azul
+                    fillOpacity: 1,
+                    strokeColor: '#FFFFFF',
+                    strokeWeight: 3,
+                    scale: 9
+                },
+                title: 'Tu ubicación',
+                zIndex: 20               // encima de todo
+            })
+        )
+    }
+
+    // ZOOM QUE MUESTRA USUARIO Y PARADA CERCANA:
+    const hacerZoomAlTramoRelevante = (
+        ubicacion: { lat: number, lng: number },
+        paradaCercana: BusStop,
+        map: google.maps.Map
+    ) => {
+        const bounds = new google.maps.LatLngBounds()
+
+        // Incluir solo estos dos puntos clave
+        bounds.extend(new google.maps.LatLng(ubicacion.lat, ubicacion.lng))
+        bounds.extend(
+            new google.maps.LatLng(paradaCercana.latitude, paradaCercana.longitude)
+        )
+
+        // Ajustar zoom con padding generoso para que se vean bien
+        map.fitBounds(bounds, {
+            top: 100,     // espacio para la navbar
+            bottom: 200,  // espacio para el bottom sheet de ETA
+            left: 60,
+            right: 60
+        })
+
+        // Asegurar zoom mínimo para que se vea el contexto de la calle
+        google.maps.event.addListenerOnce(
+            map,
+            'bounds_changed',
+            () => {
+                if ((map.getZoom() ?? 0) > 17) {
+                    map.setZoom(17) // no acercar demasiado
+                }
+                if ((map.getZoom() ?? 0) < 14) {
+                    map.setZoom(14) // no alejar demasiado
+                }
+            }
+        )
+    }
+
+    return { procesarSeleccionDeRuta, cargando, errorMsg }
+}

frontend/src/composables/useGoogleMaps.ts

@@ -1,6 +1,7 @@
 /** Composable for Google Maps integration */
 import { ref, shallowRef, onMounted } from 'vue'
 import { setOptions, importLibrary } from '@googlemaps/js-api-loader'
+import { useMapState } from './useMapState'
 
 const getApiKey = () => import.meta.env.VITE_GOOGLE_MAPS_API_KEY || ''
 
@@ -13,6 +14,11 @@ export function useGoogleMaps() {
     const map = shallowRef<google.maps.Map | null>(null)
     const isLoaded = ref(false)
     const error = ref<string | null>(null)
+    const {
+        registrarMarker,
+        registrarPolyline,
+        limpiarMapa: limpiarTodoCentralizado
+    } = useMapState()
 
     // Escuchar errores globales de autenticación de Google
     if (typeof window !== 'undefined') {
@@ -139,6 +145,8 @@ export function useGoogleMaps() {
             icon: options?.icon,
         })
 
+        registrarMarker(marker)
+
         if (options?.onDragEnd) {
             marker.addListener('dragend', () => {
                 const pos = marker.getPosition()
@@ -192,6 +200,7 @@ export function useGoogleMaps() {
                 fontWeight: '900',
             },
         })
+        registrarMarker(marker)
 
         if (onClick) {
             marker.addListener('click', onClick)
@@ -211,7 +220,7 @@ export function useGoogleMaps() {
     function addCleanMarker(
         position: { lat: number; lng: number },
         title: string,
-        type: 'normal' | 'cercana' | 'origen' | 'destino',
+        type: 'normal' | 'cercana' | 'origen' | 'destino' | 'pasada',
         onClick?: () => void
     ): google.maps.Marker | null {
         if (!map.value) {
@@ -221,25 +230,25 @@ export function useGoogleMaps() {
 
         const iconoParadaNormal = {
             path: google.maps.SymbolPath.CIRCLE,
-            fillColor: '#3B82F6',       // azul
+            fillColor: '#FBBF24',       // amarillo
             fillOpacity: 1,
-            strokeColor: '#FFFFFF',     // borde blanco limpio
+            strokeColor: '#FFFFFF',
             strokeWeight: 2,
             scale: 7
         };
 
         const iconoParadaCercana = {
             path: google.maps.SymbolPath.CIRCLE,
-            fillColor: '#F59E0B',       // amarillo/naranja
+            fillColor: '#F59E0B',       // amarillo intenso
             fillOpacity: 1,
             strokeColor: '#FFFFFF',
             strokeWeight: 3,
-            scale: 10
+            scale: 12
         };
 
         const iconoOrigen = {
             path: google.maps.SymbolPath.CIRCLE,
-            fillColor: '#10B981',       // verde
+            fillColor: '#FBBF24',       // amarillo
             fillOpacity: 1,
             strokeColor: '#FFFFFF',
             strokeWeight: 3,
@@ -248,18 +257,28 @@ export function useGoogleMaps() {
 
         const iconoDestino = {
             path: google.maps.SymbolPath.CIRCLE,
-            fillColor: '#EF4444',       // rojo
+            fillColor: '#D97706',       // amarillo oscuro
             fillOpacity: 1,
             strokeColor: '#FFFFFF',
             strokeWeight: 3,
             scale: 10
         };
 
+        const iconoParadaPasada = {
+            path: google.maps.SymbolPath.CIRCLE,
+            fillColor: '#FDE68A',       // amarillo tenue
+            fillOpacity: 0.5,
+            strokeColor: '#FFFFFF',
+            strokeWeight: 1,
+            scale: 5
+        };
+
         const iconos = {
             normal: iconoParadaNormal,
             cercana: iconoParadaCercana,
             origen: iconoOrigen,
-            destino: iconoDestino
+            destino: iconoDestino,
+            pasada: iconoParadaPasada
         };
 
         const marker = new google.maps.Marker({
@@ -268,6 +287,7 @@ export function useGoogleMaps() {
             title,
             icon: iconos[type],
         });
+        registrarMarker(marker);
 
         if (onClick) {
             const infoWindow = new google.maps.InfoWindow({
@@ -352,6 +372,7 @@ export function useGoogleMaps() {
 
         const overlay = new CustomOverlay(new google.maps.LatLng(position.lat, position.lng));
         overlay.setMap(map.value);
+        registrarMarker(overlay);
 
         // Track for cleanup
         if (!globalOverlays.has(map.value)) {
@@ -376,6 +397,7 @@ export function useGoogleMaps() {
             strokeWeight: 5,
             map: map.value,
         })
+        registrarPolyline(polyline)
 
         // Track in global overlay tracker
         if (map.value) {
@@ -483,6 +505,7 @@ export function useGoogleMaps() {
         if (!map.value) {
             return
         }
+        limpiarTodoCentralizado()
         clearAllOverlaysForMap(map.value)
     }
 

frontend/src/composables/useMapState.ts

@@ -0,0 +1,116 @@
+import { ref } from 'vue'
+
+// Registro global de todo lo que está en el mapa
+const markers = ref<google.maps.Marker[]>([])
+const renderers = ref<google.maps.DirectionsRenderer[]>([])
+const polylines = ref<google.maps.Polyline[]>([])
+const infoWindows = ref<google.maps.InfoWindow[]>([])
+const circles = ref<google.maps.Circle[]>([])
+
+// Singleton pattern using composable
+export const useMapState = () => {
+
+    const registrarMarker = (marker: any) => {
+        if (marker) markers.value.push(marker as google.maps.Marker)
+        return marker
+    }
+
+    // Registrar un renderer
+    const registrarRenderer = (renderer: google.maps.DirectionsRenderer) => {
+        if (renderer) renderers.value.push(renderer)
+        return renderer
+    }
+
+    // Registrar una polyline
+    const registrarPolyline = (polyline: google.maps.Polyline) => {
+        if (polyline) polylines.value.push(polyline)
+        return polyline
+    }
+
+    // Registrar un circle
+    const registrarCircle = (circle: google.maps.Circle) => {
+        if (circle) circles.value.push(circle)
+        return circle
+    }
+
+    // Registrar un InfoWindow
+    const registrarInfoWindow = (infoWindow: google.maps.InfoWindow) => {
+        if (infoWindow) infoWindows.value.push(infoWindow)
+        return infoWindow
+    }
+
+    // ⚠️ FUNCIÓN CRÍTICA: limpiar ABSOLUTAMENTE TODO del mapa
+    const limpiarMapa = () => {
+        // Eliminar markers
+        markers.value.forEach(m => {
+            try {
+                if (m && typeof m.setMap === 'function') m.setMap(null)
+                if (m && typeof (m as any).remove === 'function') (m as any).remove() // para HTML markers custom
+                if (m && google?.maps?.event?.clearInstanceListeners) {
+                    google.maps.event.clearInstanceListeners(m)
+                }
+            } catch (e) {
+                console.warn('Error limpiando marker', e)
+            }
+        })
+        markers.value = []
+
+        // Eliminar renderers de Directions
+        renderers.value.forEach(r => {
+            try {
+                if (r && typeof r.setMap === 'function') r.setMap(null)
+                if (r && typeof r.setDirections === 'function') r.setDirections({ routes: [] } as any)
+            } catch (e) {
+                console.warn('Error limpiando renderer', e)
+            }
+        })
+        renderers.value = []
+
+        // Eliminar polylines
+        polylines.value.forEach(p => {
+            try {
+                if (p && typeof p.setMap === 'function') p.setMap(null)
+            } catch (e) {
+                console.warn('Error limpiando polyline', e)
+            }
+        })
+        polylines.value = []
+
+        // Cerrar y limpiar infoWindows
+        infoWindows.value.forEach(iw => {
+            try {
+                if (iw && typeof iw.close === 'function') iw.close()
+            } catch (e) {
+                console.warn('Error limpiando infowindow', e)
+            }
+        })
+        infoWindows.value = []
+
+        // Eliminar circles (pulso de ubicación) // Added custom HTML markers too since they often act as circles
+        circles.value.forEach(c => {
+            try {
+                if (c && typeof c.setMap === 'function') c.setMap(null)
+                if (c && typeof (c as any).remove === 'function') (c as any).remove()
+            } catch (e) {
+                console.warn('Error limpiando circle', e)
+            }
+        })
+        circles.value = []
+
+        console.log('SIBU | Mapa limpiado completamente ✓')
+    }
+
+    return {
+        markers,
+        renderers,
+        polylines,
+        infoWindows,
+        circles,
+        registrarMarker,
+        registrarRenderer,
+        registrarPolyline,
+        registrarCircle,
+        registrarInfoWindow,
+        limpiarMapa
+    }
+}

frontend/src/composables/useParadaCercana.ts

@@ -1,5 +1,6 @@
 import { ref } from 'vue';
 import type { BusStop } from '@/types';
+import { useMapState } from './useMapState';
 
 // Fórmula Haversine para distancia en línea recta (km)
 function getHaversineDistance(lat1: number, lon1: number, lat2: number, lon2: number): number {
@@ -18,6 +19,7 @@ export function useParadaCercana() {
     const paradaCercana = ref<BusStop | null>(null);
     const distanciaMetros = ref<number>(0);
     const duracionCaminata = ref<number>(0);
+    const { registrarPolyline } = useMapState();
     const caminandoPolyline = ref<google.maps.Polyline | null>(null);
 
     const limpiarCaminata = () => {
@@ -103,20 +105,22 @@ export function useParadaCercana() {
         if (map && mejorRutaPuntos.length > 0) {
             caminandoPolyline.value = new google.maps.Polyline({
                 path: mejorRutaPuntos,
-                strokeColor: '#1E40AF',
+                strokeColor: '#F59E0B',
                 strokeOpacity: 0,
-                strokeWeight: 4,
+                strokeWeight: 3,
                 icons: [{
                     icon: {
                         path: 'M 0,-1 0,1',
                         strokeOpacity: 1,
-                        scale: 3
+                        scale: 3,
+                        strokeColor: '#F59E0B'
                     },
                     offset: '0',
-                    repeat: '20px'
+                    repeat: '12px'
                 }],
                 map: map
             });
+            registrarPolyline(caminandoPolyline.value);
         }
     };
 

frontend/src/router/index.ts

@@ -40,14 +40,33 @@ const router = createRouter({
             component: () => import('@/views/BusStopDetailsView.vue'),
         },
         {
-            path: '/taxi',
+            path: '/transporte',
-            name: 'taxi',
+            component: () => import('@/views/TransporteLayout.vue'),
-            component: () => import('@/views/TaxiView.vue'),
+            children: [
-        },
+                {
-        {
+                    path: '',
-            path: '/shuttle/:id',
+                    redirect: '/transporte/viajes-turisticos'
-            name: 'shuttle-details',
+                },
-            component: () => import('@/views/ShuttleDetalleView.vue'),
+                {
+                    path: 'viajes-turisticos',
+                    name: 'ViajesTuristicos',
+                    component: () => import('@/views/transporte/ViajesTuristicos.vue')
+                },
+                {
+                    path: 'viajes-turisticos/:id',
+                    name: 'ShuttleDetalle',
+                    component: () => import('@/views/transporte/ShuttleDetalle.vue'),
+                    meta: {
+                        padre: 'ViajesTuristicos',
+                        titulo: 'Detalle del viaje'
+                    }
+                },
+                {
+                    path: 'taxis',
+                    name: 'TaxisLocales',
+                    component: () => import('@/views/transporte/TaxisLocales.vue')
+                }
+            ]
         },
 
         // ─── Vistas de Descubrir ─────────────────────────────────────────────

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')
+  limpiarTodoCentralizado()
-  
-  // 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;
 }
 
 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;
+  const selectedRouteObj = routeStore.allRoutes.find(r => r.id === currentRequestRouteId) || { id: currentRequestRouteId, short_name: currentRequestRouteId };
-  console.log(`🤖 JARVIS: Iniciando dibujo de markers (Secuencia: ${thisSeq})`)
+  
-
+  // Llamar al procesador de flujo principal, lo cual limpia el mapa y centra.
-  try {
+  await procesarSeleccionDeRuta(selectedRouteObj, stops as BusStop[], map.value);
-    await nextTick();
+  
-    await new Promise(resolve => setTimeout(resolve, 30));
+  // Agregar todos los stops como marcadores 'normales' para que se vean en el mapa
-
+  const { paradaCercana } = useParadaCercana();
-    // Abortar si la secuencia cambió durante la espera
+  
-    if (mappingSequenceId.value !== thisSeq || !routeStore.selectedRouteId) {
+  stops.forEach(stop => {
-      return;
+      // Evitar sobre dibujar si es la cercana (useFlujoPrincipal ya se encargó)
-    }
+      if (paradaCercana.value && stop.id === paradaCercana.value.id) return;
-
+      
-    clearMapMarkers();
+      addCleanMarker(
-    limpiarRuta();
+          { lat: stop.latitude, lng: stop.longitude },
-
+          stop.name,
-    let pastStops: any[] = [];
+          'normal',
-    let relevantStops: any[] = [...stops];
+          () => handleBusStopClick(stop)
-
+      );
-    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.
-      }
-  }
 }
 
 function updateMarkersStyles() {

frontend/src/views/TransporteLayout.vue

@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import { useI18n } from 'vue-i18n'
+import { useRoute } from 'vue-router'
+
+const { t } = useI18n()
+const route = useRoute()
+</script>
+
+<template>
+  <div class="taxi-view">
+    <header class="header-main">
+      <h1 class="brand-title">{{ t('taxi.title') }}</h1>
+      <div class="hub-tabs">
+        <div class="tabs-background">
+          <router-link to="/transporte/taxis" class="hub-tab" active-class="active" exact-active-class="active">
+            <span class="material-icons">local_taxi</span>
+            {{ t('taxi.tabLocal') }}
+          </router-link>
+          <router-link to="/transporte/viajes-turisticos" class="hub-tab" active-class="active" :class="{ 'active': route.path.includes('viajes-turisticos') }">
+            <span class="material-icons">directions_bus</span>
+            {{ t('taxi.tabIntercity') }}
+          </router-link>
+          <div class="tab-slider" :style="{ left: route.path.includes('taxis') ? '4px' : 'calc(50% + 2px)' }"></div>
+        </div>
+      </div>
+    </header>
+    
+    <router-view v-slot="{ Component }">
+      <transition name="fade" mode="out-in">
+        <keep-alive>
+          <component :is="Component" />
+        </keep-alive>
+      </transition>
+    </router-view>
+  </div>
+</template>
+
+<style scoped>
+.taxi-view {
+  min-height: 100vh;
+  position: relative;
+  padding: 0 0 150px;
+}
+
+.header-main {
+    padding: 24px 16px;
+    text-align: center;
+}
+
+.brand-title {
+    color: var(--header-text);
+    font-size: 1.5rem;
+    font-weight: 800;
+    margin: 0;
+}
+
+/* Transport Hub Tabs */
+.hub-tabs {
+  margin-top: 24px;
+  display: flex;
+  justify-content: center;
+}
+
+.tabs-background {
+  background: var(--bg-secondary);
+  padding: 4px;
+  border-radius: 16px;
+  display: flex;
+  position: relative;
+  border: 1px solid var(--border-color);
+  width: 100%;
+  max-width: 400px;
+}
+
+.hub-tab {
+  flex: 1;
+  padding: 12px;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  font-weight: 700;
+  font-size: 0.9rem;
+  cursor: pointer;
+  z-index: 2;
+  transition: color 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  text-decoration: none;
+}
+
+.hub-tab.active {
+  color: #101820 !important;
+}
+
+.hub-tab .material-icons {
+  font-size: 18px;
+}
+
+.tab-slider {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  width: calc(50% - 6px);
+  background: #FEE715;
+  border-radius: 12px;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1;
+  box-shadow: 0 4px 15px rgba(254, 231, 21, 0.4);
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

frontend/src/views/transporte/ShuttleDetalle.vue

@@ -39,13 +39,25 @@ const parsePrice = (priceVal?: number | string | null): string => {
   const num = typeof priceVal === 'string' ? parseFloat(priceVal) : priceVal;
   return Number.isNaN(num) ? '0.00' : num.toFixed(2);
 };
+
+const volver = () => {
+  // Leer la ruta padre desde el meta de la ruta actual
+  const rutaPadre = route.meta.padre as string | undefined
+
+  if (rutaPadre) {
+    router.push({ name: rutaPadre })
+  } else {
+    // Fallback seguro
+    router.push('/transporte/viajes-turisticos')
+  }
+}
 </script>
 
 <template>
   <div class="shuttle-detalle-container bg-surface pb-24 min-h-screen relative">
     <!-- Header con botón volver -->
     <div class="sticky top-0 z-10 bg-surface border-b border-border flex items-center gap-3 px-4 py-3 shadow-sm" style="padding-top: max(env(safe-area-inset-top), 12px);">
-      <button @click="router.back()" class="p-2 rounded-full hover:bg-hover flex items-center justify-center transition">
+      <button @click="volver" class="p-2 rounded-full hover:bg-hover flex items-center justify-center transition">
         <span class="material-icons text-text-primary">arrow_back</span>
       </button>
       <h1 class="font-bold text-text-primary text-lg truncate flex-1">
@@ -63,7 +75,7 @@ const parsePrice = (priceVal?: number | string | null): string => {
     <div v-else-if="error" class="flex flex-col items-center justify-center h-64 px-6 text-center">
       <span class="material-icons text-red-500 text-5xl mb-3">error_outline</span>
       <p class="text-red-500 font-medium">{{ error }}</p>
-      <button @click="router.back()" class="mt-6 px-6 py-2 bg-text-primary text-surface font-bold rounded-full shadow hover:opacity-90 transition">
+      <button @click="volver" class="mt-6 px-6 py-2 bg-text-primary text-surface font-bold rounded-full shadow hover:opacity-90 transition">
         Volver
       </button>
     </div>

frontend/src/views/transporte/TaxisLocales.vue

@@ -1,9 +1,8 @@
 <script setup lang="ts">
 import { onMounted, ref, computed } from 'vue'
-import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
 import { useTaxiStore } from '@/stores/taxi'
-import { useShuttleStore } from '@/stores/shuttle'
 import { analyticsService } from '@/services/analyticsService'
 import type { Taxi } from '@/types'
 import FavoriteButton from '@/components/FavoriteButton.vue'
@@ -11,9 +10,8 @@ import { getImageUrl } from '@/utils/imageUrl'
 
 const { t } = useI18n()
 const taxiStore = useTaxiStore()
-const shuttleStore = useShuttleStore()
+const router = useRouter()
 
-const currentTab = ref<'local' | 'intercity'>('local')
 const selectedZone = ref('all')
 const selectedShift = ref('all')
 const onlyEnglish = ref(false)
@@ -21,37 +19,11 @@ const onlyEnglish = ref(false)
 const corregimientos = ['all', 'Boquete', 'David - Boquete', 'Boquete - David', 'Aeropuerto - Boquete']
 const shifts = ['all', 'dia', 'tarde', 'noche']
 
-// Shuttle Filters
-const shuttleRouteFilter = ref('all')
-const shuttleTypeFilter = ref('all')
-const router = useRouter()
-const shuttleRefs = ref<Record<string, any>>({})
-
-const setShuttleRef = (el: any, id: string) => {
-  if (el) shuttleRefs.value[id] = el
-}
-
-
-const shuttleRoutes = computed(() => {
-  const routes = shuttleStore.shuttles.map(s => `${s.origin} - ${s.destination}`)
-  return [...new Set(routes)].sort()
-})
-
-const filteredShuttles = computed(() => {
-  return shuttleStore.shuttles.filter(shuttle => {
-    const routeName = `${shuttle.origin} - ${shuttle.destination}`
-    const matchesRoute = shuttleRouteFilter.value === 'all' || routeName === shuttleRouteFilter.value
-    const matchesType = shuttleTypeFilter.value === 'all' || shuttle.trip_type === shuttleTypeFilter.value
-    return matchesRoute && matchesType
-  })
-})
-
 onMounted(async () => {
-  analyticsService.logEvent({ event_name: 'screen_view', screen_name: 'TransportHub' })
+    analyticsService.logEvent({ event_name: 'screen_view', screen_name: 'TaxisLocales' })
-  await Promise.all([
+    if(taxiStore.taxis.length === 0) {
-    taxiStore.loadTaxis(),
+        await taxiStore.loadTaxis()
-    shuttleStore.loadShuttles()
+    }
-  ])
 })
 
 const filteredTaxis = computed(() => {
@@ -63,7 +35,6 @@ const filteredTaxis = computed(() => {
   })
 })
 
-
 const handleCall = (taxi: Taxi) => {
   analyticsService.logEvent({ 
     event_name: 'taxi_click', 
@@ -77,7 +48,6 @@ const handleCall = (taxi: Taxi) => {
   window.location.href = `tel:${taxi.phone_number}`
 }
 
-
 function getShiftLabel(shift: string) {
   if (shift === 'dia') return t('taxi.dayShift')
   if (shift === 'tarde') return t('taxi.afternoonShift')
@@ -85,38 +55,9 @@ function getShiftLabel(shift: string) {
   return shift
 }
 </script>
-
 <template>
-  <div class="taxi-view">
+  <div class="taxis-locales">
-    <header class="header-main">
+<div class="filters-container">
-      <h1 class="brand-title">{{ t('taxi.title') }}</h1>
-      <!-- Tab Switcher Premium -->
-      <div class="hub-tabs">
-        <div class="tabs-background">
-          <button 
-            class="hub-tab" 
-            :class="{ active: currentTab === 'local' }" 
-            @click="currentTab = 'local'"
-          >
-            <span class="material-icons">local_taxi</span>
-            {{ t('taxi.tabLocal') }}
-          </button>
-          <button 
-            class="hub-tab" 
-            :class="{ active: currentTab === 'intercity' }" 
-            @click="currentTab = 'intercity'"
-          >
-            <span class="material-icons">directions_bus</span>
-            {{ t('taxi.tabIntercity') }}
-          </button>
-          <div class="tab-slider" :style="{ left: currentTab === 'local' ? '4px' : 'calc(50% + 2px)' }"></div>
-        </div>
-      </div>
-    </header>
-
-    <!-- TAB 1: LOCAL TAXIS -->
-    <template v-if="currentTab === 'local'">
-      <div class="filters-container">
         <div class="filter-card">
           <div class="selectors-side">
             <div class="select-group">
@@ -208,100 +149,12 @@ function getShiftLabel(shift: string) {
           <p>{{ t('taxi.noTaxisAvailable') }}</p>
         </div>
       </div>
-    </template>
+    
-
-    <!-- TAB 2: INTERCITY SHUTTLES -->
-    <template v-else>
-      <div class="filters-container">
-        <div class="filter-card">
-          <div class="selectors-side">
-            <div class="select-group">
-              <span class="material-icons">route</span>
-              <select v-model="shuttleRouteFilter">
-                <option value="all">{{ t('shuttle.allRoutes') }}</option>
-                <option v-for="route in shuttleRoutes" :key="route" :value="route">{{ route }}</option>
-              </select>
-            </div>
-            <div class="select-group">
-              <span class="material-icons">sync_alt</span>
-              <select v-model="shuttleTypeFilter">
-                <option value="all">{{ t('shuttle.tripType') }}</option>
-                <option value="one_way">{{ t('shuttle.oneWay') }}</option>
-                <option value="round_trip">{{ t('shuttle.roundTrip') }}</option>
-                <option value="both">{{ t('shuttle.both') }}</option>
-              </select>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <div v-if="shuttleStore.isLoading" class="state-container">
-        <span class="material-icons spin">refresh</span>
-        <p>{{ t('taxi.loadingTaxis') }}</p>
-      </div>
-
-      <div v-else-if="shuttleStore.error" class="state-container">
-        <span class="material-icons">error_outline</span>
-        <p>{{ shuttleStore.error }}</p>
-      </div>
-
-      <div v-else class="shuttles-grid">
-        <!-- OVERLAY BACKDROP when a card is expanded -->
-        <div 
-          v-for="shuttle in filteredShuttles" 
-          :key="shuttle.id" 
-          v-memo="[shuttle.id]"
-          :ref="el => setShuttleRef(el, shuttle.id)"
-          class="shuttle-card"
-          @click="() => { 
-            analyticsService.logEvent({ event_name: 'shuttle_view_detailed', item_id: shuttle.id });
-            router.push(`/shuttle/${shuttle.id}`);
-          }"
-        >
-          <img 
-            :src="getImageUrl(shuttle.image_url, 'shuttle')" 
-            loading="lazy" 
-            decoding="async"
-            class="shuttle-card-bg"
-            @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'shuttle')"
-          />
-          <!-- Collapsed info (always visible) -->
-          <div class="shuttle-main-info">
-            <div class="shuttle-header-mini">
-              <div class="company-badge" v-if="shuttle.company_name">
-                <span class="material-icons">business</span>
-                {{ shuttle.company_name }}
-              </div>
-            </div> <!-- Close shuttle-header-mini -->
-
-            <div class="shuttle-route-compact" v-if="shuttle.origin && shuttle.destination">
-              <span class="route-text">{{ shuttle.origin }}</span>
-              <span class="material-icons route-arrow">east</span>
-              <span class="route-text">{{ shuttle.destination }}</span>
-            </div>
-
-            <div class="shuttle-tags">
-              <div class="vehicle-tag-mini">
-                <span class="material-icons">directions_bus</span>
-                {{ shuttle.vehicle_type }}
-              </div>
-              <div class="expand-indicator">
-                <span class="material-icons">chevron_right</span>
-              </div>
-            </div>
-          </div> <!-- Close shuttle-main-info -->
-        </div>
-
-        <div v-if="filteredShuttles.length === 0" class="empty-state">
-          <span class="material-icons">directions_bus_filled</span>
-          <p>{{ t('shuttle.noShuttles') }}</p>
-        </div>
-      </div>
-    </template>
   </div>
 </template>
 
 <style scoped>
+
 /* Transport Hub Tabs */
 .hub-tabs {
   margin-top: 24px;
@@ -1060,4 +913,5 @@ function getShiftLabel(shift: string) {
         grid-template-columns: 1fr;
     }
 }
-</style>
+
+</style>

frontend/src/views/transporte/ViajesTuristicos.vue

@@ -0,0 +1,901 @@
+<script setup lang="ts">
+import { onMounted, ref, computed } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useShuttleStore } from '@/stores/shuttle'
+import { analyticsService } from '@/services/analyticsService'
+import { getImageUrl } from '@/utils/imageUrl'
+
+const { t } = useI18n()
+const shuttleStore = useShuttleStore()
+const router = useRouter()
+
+const shuttleRouteFilter = ref('all')
+const shuttleTypeFilter = ref('all')
+const shuttleRefs = ref<Record<string, any>>({})
+
+const setShuttleRef = (el: any, id: string) => {
+  if (el) shuttleRefs.value[id] = el
+}
+
+const shuttleRoutes = computed(() => {
+  const routes = shuttleStore.shuttles.map(s => `${s.origin} - ${s.destination}`)
+  return [...new Set(routes)].sort()
+})
+
+const filteredShuttles = computed(() => {
+  return shuttleStore.shuttles.filter(shuttle => {
+    const routeName = `${shuttle.origin} - ${shuttle.destination}`
+    const matchesRoute = shuttleRouteFilter.value === 'all' || routeName === shuttleRouteFilter.value
+    const matchesType = shuttleTypeFilter.value === 'all' || shuttle.trip_type === shuttleTypeFilter.value
+    return matchesRoute && matchesType
+  })
+})
+
+const verDetalle = (shuttleId: number) => {
+    router.push({
+        name: 'ShuttleDetalle',
+        params: { id: shuttleId }
+    })
+}
+
+onMounted(async () => {
+    analyticsService.logEvent({ event_name: 'screen_view', screen_name: 'ViajesTuristicos' })
+    if(shuttleStore.shuttles.length === 0) {
+        await shuttleStore.loadShuttles()
+    }
+})
+</script>
+<template>
+  <div class="viajes-turisticos">
+<div class="filters-container">
+        <div class="filter-card">
+          <div class="selectors-side">
+            <div class="select-group">
+              <span class="material-icons">route</span>
+              <select v-model="shuttleRouteFilter">
+                <option value="all">{{ t('shuttle.allRoutes') }}</option>
+                <option v-for="route in shuttleRoutes" :key="route" :value="route">{{ route }}</option>
+              </select>
+            </div>
+            <div class="select-group">
+              <span class="material-icons">sync_alt</span>
+              <select v-model="shuttleTypeFilter">
+                <option value="all">{{ t('shuttle.tripType') }}</option>
+                <option value="one_way">{{ t('shuttle.oneWay') }}</option>
+                <option value="round_trip">{{ t('shuttle.roundTrip') }}</option>
+                <option value="both">{{ t('shuttle.both') }}</option>
+              </select>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div v-if="shuttleStore.isLoading" class="state-container">
+        <span class="material-icons spin">refresh</span>
+        <p>{{ t('taxi.loadingTaxis') }}</p>
+      </div>
+
+      <div v-else-if="shuttleStore.error" class="state-container">
+        <span class="material-icons">error_outline</span>
+        <p>{{ shuttleStore.error }}</p>
+      </div>
+
+      <div v-else class="shuttles-grid">
+        <!-- OVERLAY BACKDROP when a card is expanded -->
+        <div 
+          v-for="shuttle in filteredShuttles" 
+          :key="shuttle.id" 
+          v-memo="[shuttle.id]"
+          :ref="el => setShuttleRef(el, shuttle.id)"
+          class="shuttle-card"
+          @click="() => { 
+            analyticsService.logEvent({ event_name: 'shuttle_view_detailed', item_id: shuttle.id });
+            verDetalle(shuttle.id);
+          }"
+        >
+          <img 
+            :src="getImageUrl(shuttle.image_url, 'shuttle')" 
+            loading="lazy" 
+            decoding="async"
+            class="shuttle-card-bg"
+            @error="(e) => (e.target as HTMLImageElement).src = getImageUrl(null, 'shuttle')"
+          />
+          <!-- Collapsed info (always visible) -->
+          <div class="shuttle-main-info">
+            <div class="shuttle-header-mini">
+              <div class="company-badge" v-if="shuttle.company_name">
+                <span class="material-icons">business</span>
+                {{ shuttle.company_name }}
+              </div>
+            </div> <!-- Close shuttle-header-mini -->
+
+            <div class="shuttle-route-compact" v-if="shuttle.origin && shuttle.destination">
+              <span class="route-text">{{ shuttle.origin }}</span>
+              <span class="material-icons route-arrow">east</span>
+              <span class="route-text">{{ shuttle.destination }}</span>
+            </div>
+
+            <div class="shuttle-tags">
+              <div class="vehicle-tag-mini">
+                <span class="material-icons">directions_bus</span>
+                {{ shuttle.vehicle_type }}
+              </div>
+              <div class="expand-indicator">
+                <span class="material-icons">chevron_right</span>
+              </div>
+            </div>
+          </div> <!-- Close shuttle-main-info -->
+        </div>
+
+        <div v-if="filteredShuttles.length === 0" class="empty-state">
+          <span class="material-icons">directions_bus_filled</span>
+          <p>{{ t('shuttle.noShuttles') }}</p>
+        </div>
+      </div>
+    
+  </div>
+</template>
+
+<style scoped>
+
+/* Transport Hub Tabs */
+.hub-tabs {
+  margin-top: 24px;
+  display: flex;
+  justify-content: center;
+}
+
+.tabs-background {
+  background: var(--bg-secondary);
+  padding: 4px;
+  border-radius: 16px;
+  display: flex;
+  position: relative;
+  border: 1px solid var(--border-color);
+  width: 100%;
+  max-width: 400px;
+}
+
+.hub-tab {
+  flex: 1;
+  padding: 12px;
+  border: none;
+  background: transparent;
+  color: var(--text-secondary);
+  font-weight: 700;
+  font-size: 0.9rem;
+  cursor: pointer;
+  z-index: 2;
+  transition: color 0.3s;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+}
+
+.hub-tab.active {
+  color: #101820 !important;
+}
+
+.hub-tab .material-icons {
+  font-size: 18px;
+}
+
+.tab-slider {
+  position: absolute;
+  top: 4px;
+  bottom: 4px;
+  width: calc(50% - 6px);
+  background: #FEE715;
+  border-radius: 12px;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  z-index: 1;
+  box-shadow: 0 4px 15px rgba(254, 231, 21, 0.4);
+}
+.retry-btn {
+  margin-top: 1rem;
+  padding: 10px 20px;
+  background: var(--active-color);
+  color: #101820;
+  border: none;
+  border-radius: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: transform 0.2s;
+}
+.retry-btn:active {
+  transform: scale(0.95);
+}
+.retry-btn .material-icons {
+  font-size: 18px;
+}
+
+/* =============================================
+   SHUTTLE CARDS — DISEÑO PREMIUM CON FOTO
+   ============================================= */
+
+/* Backdrop modal al expandir */
+.shuttle-modal-backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.65);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  z-index: 50;
+  animation: fadeIn 0.25s ease;
+}
+
+@keyframes fadeIn {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+
+/* Grid de cards */
+.shuttles-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+  gap: 16px;
+  padding: 20px 16px;
+  position: relative;
+}
+
+/* ---- La tarjeta base ---- */
+.shuttle-card {
+  border-radius: 20px;
+  border: 1px solid rgba(255,255,255,0.12);
+  position: relative;
+  min-height: 170px;
+  display: flex;
+  flex-direction: column;
+  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+  cursor: pointer;
+  overflow: hidden;
+  background: linear-gradient(135deg, #0d1b2a 0%, #1a2a40 50%, #101820 100%);
+}
+
+.shuttle-card-bg {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  z-index: 0;
+}
+
+/* Overlay oscuro base (compacto) */
+.shuttle-card::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.93) 0%,
+    rgba(0, 0, 0, 0.65) 55%,
+    rgba(0, 0, 0, 0.30) 100%
+  );
+  z-index: 1;
+  transition: background 0.4s ease;
+}
+
+/* Cuando está expandida, reforzar el overlay inferior */
+.shuttle-card.expanded {
+  border-color: #FEE715;
+  box-shadow: 0 0 0 2px #FEE715, 0 24px 50px rgba(0, 0, 0, 0.7);
+  z-index: 60;
+  position: relative;
+}
+
+.shuttle-card.expanded::before {
+  background: linear-gradient(
+    to top,
+    rgba(0, 0, 0, 0.97) 0%,
+    rgba(0, 0, 0, 0.80) 45%,
+    rgba(0, 0, 0, 0.40) 100%
+  );
+}
+
+/* Todos los hijos van sobre el overlay */
+.shuttle-main-info,
+.shuttle-details {
+  position: relative;
+  z-index: 2;
+  padding: 18px 20px;
+}
+
+.shuttle-main-info {
+  padding-bottom: 14px;
+}
+
+/* Fila superior: badge empresa + precio */
+.shuttle-header-mini {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 14px;
+}
+
+.company-badge {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  background: rgba(0, 0, 0, 0.60);
+  color: #FEE715;
+  padding: 5px 11px;
+  border-radius: 10px;
+  font-size: 0.75rem;
+  font-weight: 800;
+  border: 1px solid rgba(254, 231, 21, 0.45);
+  backdrop-filter: blur(8px);
+  -webkit-backdrop-filter: blur(8px);
+  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
+  letter-spacing: 0.02em;
+}
+
+.company-badge .material-icons {
+  font-size: 14px;
+}
+
+.price-pill {
+  background: #FEE715;
+  color: #101820;
+  padding: 5px 11px;
+  border-radius: 10px;
+  font-weight: 900;
+  font-size: 1rem;
+  display: flex;
+  align-items: baseline;
+  gap: 1px;
+  box-shadow: 0 4px 12px rgba(254, 231, 21, 0.35);
+}
+
+.price-pill .currency {
+  font-size: 0.8rem;
+  font-weight: 900;
+}
+
+.price-pill .amount {
+  font-size: 1rem;
+  font-weight: 900;
+}
+
+.price-pill-label {
+  font-size: 0.7rem;
+  font-weight: 700;
+  margin-left: 1px;
+  opacity: 0.75;
+}
+
+/* Ruta origen → destino */
+.shuttle-route-compact {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 1.1rem;
+  font-weight: 900;
+  color: #ffffff;
+  text-shadow: 0 2px 8px rgba(0,0,0,0.9), 0 0 20px rgba(0,0,0,0.6);
+  margin-bottom: 14px;
+  letter-spacing: -0.01em;
+}
+
+.route-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.route-arrow {
+  color: #FEE715;
+  font-size: 20px;
+  flex-shrink: 0;
+  filter: drop-shadow(0 0 4px rgba(254,231,21,0.6));
+}
+
+/* Fila inferior: tipo vehículo + expand arrow */
+.shuttle-tags {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.vehicle-tag-mini {
+  padding: 5px 10px;
+  background: rgba(255, 255, 255, 0.12);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  border-radius: 8px;
+  font-size: 0.72rem;
+  font-weight: 700;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  color: #ffffff;
+  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
+  border: 1px solid rgba(255, 255, 255, 0.20);
+}
+
+.vehicle-tag-mini .material-icons {
+  font-size: 15px;
+  color: #FEE715;
+}
+
+.expand-indicator {
+  color: #FEE715;
+  display: flex;
+  align-items: center;
+  filter: drop-shadow(0 0 4px rgba(254,231,21,0.5));
+}
+
+/* =============================================
+   CONTENIDO EXPANDIDO
+   ============================================= */
+.shuttle-details {
+  padding-top: 0;
+  animation: slideDown 0.3s ease-out;
+}
+
+@keyframes slideDown {
+  from { opacity: 0; transform: translateY(-8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+/* Separador dashed */
+.shuttle-separator {
+  height: 1px;
+  background: linear-gradient(to right, transparent, rgba(255,255,255,0.25), transparent);
+  margin: 0 20px 16px;
+}
+
+.shuttle-body {
+  padding: 0 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+  margin-bottom: 20px;
+}
+
+.info-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.info-row .material-icons {
+  color: #FEE715;
+  font-size: 22px;
+  flex-shrink: 0;
+  filter: drop-shadow(0 0 4px rgba(254,231,21,0.4));
+}
+
+.info-row .label {
+  font-size: 0.65rem;
+  color: rgba(255, 255, 255, 0.55);
+  margin: 0;
+  text-transform: uppercase;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+}
+
+.info-row .value {
+  font-size: 0.95rem;
+  color: #ffffff;
+  margin: 2px 0 0;
+  font-weight: 700;
+  text-shadow: 0 1px 6px rgba(0,0,0,0.9);
+}
+
+/* ---- Bloque de precios ---- */
+.price-block {
+  padding: 14px 20px;
+  background: rgba(0, 0, 0, 0.40);
+  border-top: 1px solid rgba(255,255,255,0.08);
+  border-bottom: 1px solid rgba(255,255,255,0.08);
+  margin-bottom: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.price-row-main {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+}
+
+.price-amount-big {
+  font-size: 2rem;
+  font-weight: 900;
+  color: #FEE715;
+  text-shadow: 0 0 20px rgba(254,231,21,0.4), 0 2px 8px rgba(0,0,0,0.9);
+  line-height: 1;
+}
+
+.price-label-big {
+  font-size: 0.85rem;
+  color: rgba(255,255,255,0.75);
+  font-weight: 600;
+  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
+}
+
+.price-row-secondary {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.price-icon-secondary {
+  font-size: 16px;
+  color: rgba(255,255,255,0.55);
+}
+
+.price-amount-secondary {
+  font-size: 1rem;
+  font-weight: 800;
+  color: rgba(255,255,255,0.85);
+  text-shadow: 0 1px 4px rgba(0,0,0,0.8);
+}
+
+.price-label-secondary {
+  font-size: 0.78rem;
+  color: rgba(255,255,255,0.55);
+  font-weight: 600;
+}
+
+/* ---- Botones de contacto ---- */
+.contact-buttons {
+  display: flex;
+  gap: 10px;
+  padding: 0 20px 20px;
+}
+
+.contact-btn {
+  flex: 1;
+  height: 52px;
+  border-radius: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  font-size: 0.95rem;
+  font-weight: 700;
+  cursor: pointer;
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+  text-decoration: none;
+  border: none;
+  letter-spacing: 0.01em;
+}
+
+.btn-call {
+  background: rgba(255, 255, 255, 0.10);
+  color: #ffffff;
+  border: 1.5px solid rgba(255, 255, 255, 0.30);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
+  text-shadow: 0 1px 4px rgba(0,0,0,0.6);
+}
+
+.btn-call:hover {
+  background: rgba(255, 255, 255, 0.18);
+  border-color: rgba(255, 255, 255, 0.50);
+  transform: translateY(-2px);
+}
+
+.btn-call .material-icons { font-size: 20px; }
+
+.btn-whatsapp {
+  background: #25d366;
+  color: #ffffff;
+  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.35);
+}
+
+.btn-whatsapp:hover {
+  background: #1ebe5a;
+  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.50);
+  transform: translateY(-2px);
+}
+
+.btn-whatsapp .material-icons { font-size: 20px; }
+
+/* Original Styles */
+.taxi-view {
+  min-height: 100vh;
+  position: relative;
+  padding: 0 0 150px;
+}
+
+/* Tarjetas claras y elegantes */
+.filter-card,
+.taxi-card-new {
+  background: var(--card-bg);
+  border: 1px solid var(--border-color);
+}
+
+.header-main {
+    padding: 24px 16px;
+    text-align: center;
+}
+
+.brand-title {
+    color: var(--header-text);
+    font-size: 1.5rem;
+    font-weight: 800;
+    margin: 0;
+}
+
+.filters-container {
+    padding: 0 16px 24px;
+}
+
+.filter-card {
+    background: var(--card-bg);
+    border-radius: 20px;
+    padding: 16px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    border: 1px solid var(--border-color);
+    box-shadow: 0 2px 8px var(--shadow);
+}
+
+.selectors-side {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.select-group {
+    background: var(--bg-secondary);
+    border: 1.5px solid #fee715;
+    border-radius: 12px;
+    padding: 8px 12px;
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.select-group .material-icons {
+    color: #fee715;
+    font-size: 20px;
+}
+
+.select-group select {
+    background: transparent;
+    border: none;
+    color: var(--text-primary);
+    width: 100%;
+    font-size: 0.9rem;
+    outline: none;
+}
+
+.select-group select option {
+    background: var(--card-bg);
+    color: var(--text-primary);
+}
+
+.lang-toggle-side {
+    padding-left: 20px;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 8px;
+}
+
+.lang-text {
+    color: var(--text-primary);
+    font-weight: 700;
+    font-size: 0.9rem;
+}
+
+/* Custom Checkbox */
+.checkbox-container {
+    display: block;
+    position: relative;
+    width: 28px;
+    height: 28px;
+    cursor: pointer;
+}
+
+.checkbox-container input {
+    visibility: hidden;
+    width: 0;
+    height: 0;
+}
+
+.checkmark {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 28px;
+    width: 28px;
+    background-color: transparent;
+    border: 2px solid #fee715;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+}
+
+.checkbox-container input:checked ~ .checkmark {
+    background-color: #fee715;
+}
+
+.checkmark:after {
+    content: "";
+    position: absolute;
+    display: none;
+}
+
+.checkbox-container input:checked ~ .checkmark:after {
+    display: block;
+}
+
+.checkbox-container .checkmark:after {
+    left: 9px;
+    top: 5px;
+    width: 6px;
+    height: 12px;
+    border: solid #101820;
+    border-width: 0 3px 3px 0;
+    transform: rotate(45deg);
+}
+
+/* Grid & Cards */
+.taxis-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
+    gap: 24px;
+    padding: 24px 0;
+}
+
+.taxi-card-new {
+    background: var(--card-bg);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+    border-radius: 20px;
+    padding: 16px;
+    border: 1px solid var(--border-color);
+    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.taxi-card-new:hover {
+    transform: translateY(-8px);
+    border-color: var(--active-color);
+    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
+}
+
+.card-top {
+    display: flex;
+    align-items: center;
+    gap: 16px;
+    position: relative;
+}
+
+.driver-avatar {
+    width: 44px;
+    height: 44px;
+    border-radius: 12px;
+    overflow: hidden;
+    background: var(--bg-secondary);
+    border: 2px solid var(--border-color);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.driver-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.driver-info h3 {
+    margin: 0 0 2px;
+    color: var(--text-primary);
+    font-size: 1rem;
+    font-weight: 800;
+    letter-spacing: -0.01em;
+}
+
+.rating-stars {
+    display: flex;
+    gap: 4px;
+}
+
+.rating-stars .material-icons {
+    color: var(--active-color);
+    font-size: 18px;
+    filter: drop-shadow(0 0 5px rgba(254, 231, 21, 0.5));
+}
+
+.fav-icon-wrapper {
+    position: absolute;
+    top: -4px;
+    right: -4px;
+}
+
+.card-mid {
+    padding: 12px 16px;
+    background: var(--bg-secondary);
+    border-radius: 16px;
+    border: 1px solid var(--border-color);
+}
+
+.contact-info {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.ph-icon {
+    color: var(--active-color);
+    font-size: 20px;
+}
+
+.phone-num {
+    color: var(--text-primary);
+    font-size: 1rem;
+    font-weight: 700;
+}
+
+.call-btn-main {
+    width: 100%;
+    padding: 18px;
+    background: linear-gradient(135deg, #fee715 0%, #facc15 100%);
+    color: #101820;
+    border: none;
+    border-radius: 16px;
+    font-size: 1rem;
+    font-weight: 900;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    cursor: pointer;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    box-shadow: 0 10px 20px rgba(254, 231, 21, 0.15);
+}
+
+.call-btn-main:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 15px 30px rgba(254, 231, 21, 0.25);
+}
+
+.state-container, .empty-state {
+    padding: 100px 24px;
+    text-align: center;
+    background: var(--header-bg);
+    border-radius: 32px;
+    border: 2px dashed var(--border-color);
+}
+
+.state-container .material-icons, .empty-state .material-icons {
+    font-size: 64px;
+    margin-bottom: 24px;
+    color: var(--active-color);
+    opacity: 0.5;
+}
+
+.spin {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+@media (max-width: 600px) {
+    .taxis-grid, .shuttles-grid {
+        grid-template-columns: 1fr;
+    }
+}
+
+</style>