diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue index 36d87c1..02506ac 100644 --- a/frontend/src/views/MapView.vue +++ b/frontend/src/views/MapView.vue @@ -1294,14 +1294,14 @@ function clearNavigation() { ═══════════════════════════════════════ */ .offers-sheet { position: fixed; - bottom: 64px; /* above bottom nav */ + bottom: calc(64px + env(safe-area-inset-bottom, 0px)); /* above bottom nav + safe area */ left: 0; right: 0; background: var(--bg-secondary); border-top: 1px solid var(--border-color); border-radius: 20px 20px 0 0; z-index: 1300; - padding: 0 0 1rem; + padding: 0 0 0.75rem; box-shadow: 0 -8px 32px rgba(0,0,0,0.25); } @@ -1600,7 +1600,7 @@ function clearNavigation() { .uber-search-panel { position: fixed; - top: 15px; /* Pequeño margen para que no choque con el borde */ + top: 70px; /* Debajo del header superior */ left: 0; right: 0; background: var(--header-bg); @@ -1608,25 +1608,26 @@ function clearNavigation() { -webkit-backdrop-filter: blur(30px); border-radius: 24px; box-shadow: 0 40px 100px rgba(0,0,0,0.6); - padding: 24px; + padding: 16px; z-index: 2500; border: 1px solid var(--border-color); transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); max-width: 500px; margin: 0 auto; + max-height: calc(100vh - 140px); /* Nunca sobrepasa la pantalla */ + overflow-y: auto; } /* Fix para que no se oculte al salir el teclado */ .uber-search-panel.is-focused { - top: 5px; /* Se pega más arriba pero sigue visible */ - transform: translateY(-5px); + top: 60px; box-shadow: 0 10px 40px rgba(0,0,0,0.4); } .uber-search-header { display: flex; align-items: center; - margin-bottom: 24px; + margin-bottom: 12px; } .back-btn { @@ -1652,11 +1653,11 @@ function clearNavigation() { .search-inputs-wrapper { display: flex; - gap: 20px; + gap: 16px; background: var(--bg-secondary); - padding: 20px; + padding: 14px; border-radius: 16px; - margin-bottom: 16px; + margin-bottom: 12px; border: 1px solid var(--border-color); }