Decouple map and schedule routes and expand offer images

frontend/src/views/MapView.vue

@@ -218,6 +218,8 @@ function prevPromo() {
 onUnmounted(() => {
   if (unitFetchInterval.value) clearInterval(unitFetchInterval.value);
   if (carouselTimer.value) clearInterval(carouselTimer.value);
+  // Limpiamos la selección al salir para que no afecte a la sección de Horarios
+  routeStore.clearSelection();
   // Clear all markers when component unmounts
   clearMapMarkers();
   
@@ -599,7 +601,7 @@ async function highlightOptimalStopForRoute() {
           <div id="map" class="map" :style="{ display: isLoaded ? 'block' : 'none' }"></div>
           
           <!-- Floating UI Elements -->
-          <div class="map-floating-controls">
+          <div class="map-floating-controls" :class="{ 'sheet-open': showPromos && couponStore.coupons.length > 0 }">
             <!-- Botón de Ofertas (FAB Simple) -->
             <button
               v-if="isLoaded && !showPromos"
@@ -942,23 +944,23 @@ async function highlightOptimalStopForRoute() {
    OFFERS BOTTOM SHEET
 ═══════════════════════════════════════ */
 .offers-sheet {
-  position: fixed;
+  left: 16px;
-  top: 50%;
+  right: 16px;
-  left: 50%;
+  bottom: 85px;
-  transform: translate(-50%, -50%);
+  width: auto;
-  width: 92%;
+  max-width: 500px;
-  max-width: 400px;
+  margin: 0 auto;
   background: rgba(255, 255, 255, 0.85);
   backdrop-filter: blur(20px) saturate(180%);
   -webkit-backdrop-filter: blur(20px) saturate(180%);
   border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 24px;
   z-index: 3000; /* Aumentado para estar sobre todo */
-  padding: 12px;
+  padding: 8px 0 12px; /* Reducimos el padding lateral a 0 */
   box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
   color: #000;
   overflow: hidden;
-  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
+  transition: all 0.6s cubic-bezier(0.32, 0.72, 0, 1);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -973,7 +975,7 @@ async function highlightOptimalStopForRoute() {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 0.25rem 0.5rem 0.5rem;
+  padding: 0 16px 8px; /* Padding para el header */
   margin-bottom: 4px;
 }
 
@@ -1019,8 +1021,8 @@ async function highlightOptimalStopForRoute() {
 .sheet-card-area {
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0;
-  padding: 0.25rem;
+  padding: 0;
   min-height: 100px;
 }
 
@@ -1054,7 +1056,8 @@ async function highlightOptimalStopForRoute() {
 
 .sheet-card {
   flex: 1;
-  height: 180px;
+  height: 200px; /* Un poco más alto para impacto visual */
+  margin: 0 8px; /* Pequeño margen para que no toque los bordes del todo */
   border-radius: 20px;
   background-size: cover;
   background-position: center;
@@ -1562,6 +1565,11 @@ html.light-theme .uber-search-trigger-compact {
   align-items: center;
   gap: 16px;
   z-index: 1100;
+  transition: bottom 0.6s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.map-floating-controls.sheet-open {
+  bottom: 300px; /* Sube para dejar espacio a las ofertas */
 }
 
 .promos-badge-wrapper {
@@ -1677,16 +1685,16 @@ html.light-theme .uber-search-trigger-compact {
   100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(254, 231, 21, 0); }
 }
 
-/* Bottom sheet transition - Fluid */
+/* Bottom sheet transition - Fluid Slide Up/Down */
 .sheet-slide-enter-active {
   transition: all 0.6s cubic-bezier(0.32, 0.72, 0, 1);
 }
 .sheet-slide-leave-active {
-  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+  transition: all 0.5s cubic-bezier(0.32, 0.72, 0, 1);
 }
 .sheet-slide-enter-from,
 .sheet-slide-leave-to {
-  transform: translate(-50%, -50%) scale(0.8);
+  transform: translateY(120%) scale(0.95);
   opacity: 0;
 }
 
@@ -1889,14 +1897,4 @@ html.light-theme .uber-search-trigger-compact {
   left: 15px;
   z-index: 10;
 }
-.map-floating-controls {
-  position: fixed;
-  /* Subir los botones FAB cuando el carrusel está abierto */
-  bottom: 85px;
-  right: 16px;
-  z-index: 1000;
-  display: flex;
-  flex-direction: column;
-  gap: 12px;
-}
 </style>