diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue index 6c34284..a784168 100644 --- a/frontend/src/views/MapView.vue +++ b/frontend/src/views/MapView.vue @@ -831,13 +831,14 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target search - +
directions_bus + ver rutas
@@ -1416,24 +1417,65 @@ async function calculateWalkingPath(origin: { lat: number, lng: number }, target background: var(--header-bg); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); - height: 56px; - border-radius: 18px; + height: 44px; /* Tamaño compacto ajustado */ + border-radius: 12px; display: flex; align-items: center; - padding: 0 20px; + padding: 0 16px; box-shadow: var(--shadow); cursor: pointer; border: 1px solid var(--border-color); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); - width: 100%; /* Take full width of container */ + width: 100%; max-width: 500px; } +.uber-search-trigger-compact { + background: var(--active-color) !important; + color: #101820 !important; /* Texto oscuro para el amarillo SIBU */ + height: 44px; /* Tamaño del logo / botones header */ + border-radius: 12px; + display: flex; + align-items: center; + gap: 8px; + padding: 0 16px; + box-shadow: 0 4px 12px rgba(0,0,0,0.2); + cursor: pointer; + border: none; + transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); + width: fit-content; + pointer-events: auto; +} + +/* En modo claro, el botón es azul, usamos texto blanco */ +html.light-theme .uber-search-trigger-compact { + color: #ffffff !important; +} + +.uber-search-trigger-compact:hover { + transform: translateY(-2px); + box-shadow: 0 6px 16px rgba(0,0,0,0.3); +} + +.uber-search-trigger-compact .search-icon { + margin: 0; + font-size: 20px; + color: inherit !important; +} + +.trigger-label { + font-size: 0.9rem; + font-weight: 800; + text-transform: uppercase; + letter-spacing: 0.02em; + white-space: nowrap; +} + .uber-search-trigger.circular { - width: 60px; + width: 44px; /* Mantener cuadrado */ padding: 0; justify-content: center; - border-radius: 20px; + border-radius: 12px; } .triggers-row {