From 1cd83f5fb34d5f9f2b61f82620165cd9a7cf25b2 Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Fri, 27 Feb 2026 22:40:16 -0500
Subject: [PATCH] fix: improve route visibility and lift offers banner

---
 frontend/src/composables/useDirectionsRoute.ts |  8 ++++----
 frontend/src/composables/useFlujoPrincipal.ts  | 10 ++++++++--
 frontend/src/views/MapView.vue                 |  6 +++---
 3 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/frontend/src/composables/useDirectionsRoute.ts b/frontend/src/composables/useDirectionsRoute.ts
index 2815492..4619012 100644
--- a/frontend/src/composables/useDirectionsRoute.ts
+++ b/frontend/src/composables/useDirectionsRoute.ts
@@ -35,7 +35,7 @@ export function useDirectionsRoute() {
             return;
         }
 
-        limpiarRuta();
+        // NOTA: No llamamos a limpiarRuta() aquí para poder encadenar llamadas (dibujar fondo + trazado activo)
         estasCargando.value = true;
         errorRuta.value = null;
 
@@ -98,9 +98,9 @@ export function useDirectionsRoute() {
                             const polyline = new google.maps.Polyline({
                                 path: path,
                                 map: map,
-                                strokeColor: isPast ? '#FDE68A' : '#FBBF24',
-                                strokeWeight: isPast ? 3 : 5,
-                                strokeOpacity: isPast ? 0.4 : 0.95,
+                                strokeColor: isPast ? '#9CA3AF' : '#FBBF24', // Gris para lo lejano, Amarillo para lo cercano
+                                strokeWeight: isPast ? 4 : 6,
+                                strokeOpacity: isPast ? 0.6 : 1.0,
                                 icons: isPast ? [{
                                     icon: { path: 'M 0,-1 0,1', strokeOpacity: 1, scale: 2 },
                                     offset: '0',
diff --git a/frontend/src/composables/useFlujoPrincipal.ts b/frontend/src/composables/useFlujoPrincipal.ts
index f83ea32..0d9435c 100644
--- a/frontend/src/composables/useFlujoPrincipal.ts
+++ b/frontend/src/composables/useFlujoPrincipal.ts
@@ -82,8 +82,14 @@ export const useFlujoPrincipal = () => {
                 return;
             }
 
-            // ── PASO 5: Dibujar tramo relevante (azul vivo) ───────
-            const idx = paradasFormateadas.findIndex(p => p.longitud === paradaCercanaFound.longitude && p.latitud === paradaCercanaFound.latitude)
+            // ── PASO 5: Dibujar tramo relevante (Amarillo Vivo) ───────
+            // Usar una comparación más robusta que incluya proximidad o nombre
+            const idx = paradasFormateadas.findIndex(p => {
+                const samePos = Math.abs(p.longitud - paradaCercanaFound.longitude) < 0.0001 &&
+                    Math.abs(p.latitud - paradaCercanaFound.latitude) < 0.0001;
+                return samePos || p.nombre === paradaCercanaFound.name;
+            });
+
             if (idx !== -1) {
                 const tramoRelevante = paradasFormateadas.slice(idx)
                 if (tramoRelevante.length > 1) {
diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
index ba70f51..f08b266 100644
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -1209,8 +1209,8 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
 ═══════════════════════════════════════ */
 .offers-sheet {
   position: fixed;
-  /* Base 72px (altura menú) + 16px espacio visual + safe area */
-  bottom: calc(72px + 16px + env(safe-area-inset-bottom, 0px));
+  /* Base 72px (altura menú) + 40px espacio visual + safe area */
+  bottom: calc(72px + 40px + env(safe-area-inset-bottom, 0px));
   left: 10px;
   right: 10px;
   background: #fff;
@@ -1236,7 +1236,7 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
 @media (max-width: 900px) {
   .offers-sheet {
     /* En móvil más espacio aún por el menú nativo */
-    bottom: calc(80px + env(safe-area-inset-bottom, 0px));
+    bottom: calc(100px + env(safe-area-inset-bottom, 0px));
     left: 8px;
     right: 8px;
   }