Fix offers layout, implement glassmorphism navigation, and optimize image display

frontend/src/views/MapView.vue

@@ -944,12 +944,13 @@ async function highlightOptimalStopForRoute() {
    OFFERS BOTTOM SHEET
 ═══════════════════════════════════════ */
 .offers-sheet {
-  left: 16px;
-  right: 16px;
+  position: fixed;
+  left: 0;
+  right: 0;
   bottom: 85px;
-  width: auto;
-  max-width: 500px;
   margin: 0 auto;
+  width: calc(100% - 32px);
+  max-width: 500px;
   background: rgba(255, 255, 255, 0.85);
   backdrop-filter: blur(20px) saturate(180%);
   -webkit-backdrop-filter: blur(20px) saturate(180%);
@@ -1019,27 +1020,36 @@ async function highlightOptimalStopForRoute() {
 .sheet-close .material-icons { font-size: 1.125rem; }
 
 .sheet-card-area {
+  position: relative;
   display: flex;
   align-items: center;
-  gap: 0;
+  justify-content: center;
+  width: 100%;
   padding: 0;
-  min-height: 100px;
+  min-height: 200px;
 }
 
 .sheet-nav {
-  flex-shrink: 0;
-  width: 28px;
-  height: 28px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+  width: 36px;
+  height: 36px;
   border-radius: 50%;
   border: none;
-  background: rgba(0, 0, 0, 0.05);
-  color: var(--text-secondary);
+  background: rgba(255, 255, 255, 0.4);
+  backdrop-filter: blur(8px);
+  color: #101820;
   display: flex;
   align-items: center;
   justify-content: center;
   cursor: pointer;
   transition: all 0.2s;
 }
+
+.sheet-nav:first-of-type { left: 12px; }
+.sheet-nav:last-of-type { right: 12px; }
 .sheet-nav:disabled { opacity: 0.1; cursor: default; }
 .sheet-nav:not(:disabled):hover { 
   background: var(--active-color); 
@@ -1055,9 +1065,9 @@ async function highlightOptimalStopForRoute() {
 }
 
 .sheet-card {
-  flex: 1;
-  height: 200px; /* Un poco más alto para impacto visual */
-  margin: 0 8px; /* Pequeño margen para que no toque los bordes del todo */
+  width: 100%;
+  height: 200px; 
+  margin: 0; 
   border-radius: 20px;
   background-size: cover;
   background-position: center;