Refactor: Map UI improvements, ETA metrics, Schedule fixes, and Transport Detail styling

frontend/src/views/MapView.vue

@@ -98,6 +98,7 @@ function selectStopFromSearch(stop: BusStop) {
 }
 
 function openUberSearch() {
+  showPromos.value = false; // Cerramos ofertas para evitar solapamiento
   showUberSearch.value = true;
   showRoutesToggle.value = true; // Forzar que al abrir estemos en modo rutas
 }
@@ -180,6 +181,10 @@ function closeBusStopModal() {
   selectedBusStop.value = null;
 }
 
+function reloadPage() {
+  window.location.reload();
+}
+
 function handlePromoClick(promo: any) {
   selectedPromo.value = promo;
   showPromoModal.value = true;
@@ -503,7 +508,9 @@ async function updateActiveUnits() {
   if (!isLoaded.value) return;
   
   try {
-    // No-op for now. Backend is purely Supabase now.
+    if (routeStore.selectedRouteId && paradaCercana.value) {
+      await calcularETA(routeStore.selectedRouteId, paradaCercana.value as BusStop);
+    }
   } catch (e) {
     console.error('Failed to update active units', e);
   }
@@ -841,21 +848,35 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target
               <span class="trigger-label">ver rutas</span>
             </div>
 
-            <!-- Nuevo Banner de Parada Cercana Alineado -->
+            <!-- Nuevo Banner de Parada Cercana Alineado (Redimensionado y con ETA) -->
             <div 
               v-if="paradaCercana && routeStore.selectedRouteId && !showETACard" 
-              class="uber-search-trigger best-stop-banner"
+              class="best-stop-banner-compact"
             >
-              <span class="material-icons text-yellow-500 mr-3">directions_bus</span>
-              <div class="flex flex-col flex-1 truncate">
-                <span class="text-[10px] uppercase font-bold text-yellow-500 leading-tight">Parada cercana</span>
-                <span class="trigger-text truncate leading-tight">{{ paradaCercana?.name }}</span>
+              <div class="banner-icon-bg">
+                <span class="material-icons text-white text-[16px]">directions_bus</span>
               </div>
-              <div class="text-[11px] font-bold bg-gray-100 dark:bg-gray-800 px-2 py-1 rounded-lg ml-2 whitespace-nowrap">
-                {{ (distanciaMetros && distanciaMetros < 1000) ? Math.round(distanciaMetros) + 'm' : (distanciaMetros ? (distanciaMetros / 1000).toFixed(1) + 'km' : '') }}
+              
+              <div class="flex flex-col flex-1 truncate ml-2">
+                <span class="text-[9px] uppercase font-bold text-gray-500 dark:text-gray-400 leading-none">Tiempo de llegada</span>
+                <span class="trigger-text-compact truncate leading-tight">{{ paradaCercana?.name }}</span>
               </div>
-              <button @click.stop="clearAllMapData" class="ml-3 p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
-                <span class="material-icons text-[20px] text-gray-400 hover:text-red-500">close</span>
+
+              <div class="eta-badge">
+                <template v-if="etaCargando">
+                  <div class="eta-loader"></div>
+                </template>
+                <template v-else-if="busesActivos.length > 0">
+                  <span class="eta-value">{{ busesActivos[0].etaMinutos > 0 ? busesActivos[0].etaMinutos : '0' }}</span>
+                  <span class="eta-unit">min</span>
+                </template>
+                <template v-else>
+                  <span class="eta-unit">-- min</span>
+                </template>
+              </div>
+
+              <button @click.stop="reloadPage" class="ml-2 p-1 rounded-full hover:bg-gray-200 dark:hover:bg-gray-700 transition-colors">
+                <span class="material-icons text-[18px] text-gray-400 hover:text-red-500">close</span>
               </button>
             </div>
 
@@ -1531,6 +1552,76 @@ html.light-theme .uber-search-trigger-compact {
   max-width: none;
 }
 
+.best-stop-banner-compact {
+  flex: 1;
+  background: var(--header-bg);
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  height: 40px; /* Más compacto (de 44px a 40px) */
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  border: 1px solid var(--border-color);
+  max-width: none;
+  pointer-events: auto;
+}
+
+.banner-icon-bg {
+  background: #EAB308; /* yellow-500 */
+  width: 24px;
+  height: 24px;
+  border-radius: 6px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.trigger-text-compact {
+  color: var(--text-primary);
+  font-size: 0.95rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.eta-badge {
+  background: rgba(234, 179, 8, 0.1); /* yellow-500 with opacity */
+  color: #EAB308;
+  padding: 2px 8px;
+  border-radius: 6px;
+  display: flex;
+  align-items: baseline;
+  gap: 2px;
+  font-weight: 800;
+  margin-left: 8px;
+  border: 1px solid rgba(234, 179, 8, 0.2);
+}
+
+.eta-value {
+  font-size: 1.1rem;
+  line-height: 1;
+}
+
+.eta-unit {
+  font-size: 0.7rem;
+  text-transform: uppercase;
+}
+
+.eta-loader {
+  width: 14px;
+  height: 14px;
+  border: 2px solid #EAB308;
+  border-top-color: transparent;
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+@keyframes spin {
+  to { transform: rotate(360deg); }
+}
+
 .uber-search-panel {
   position: fixed;
   top: 70px; /* Debajo del header superior */