diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue index 422cde3..1f1fd3a 100644 --- a/frontend/src/views/MapView.vue +++ b/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;