Fix: Map offers button design, bottom nav cleanup, sidebar theme toggle simplification, and tourist trip auto-scroll animation

frontend/src/views/TaxiView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, ref, computed } from 'vue'
+import { onMounted, ref, computed, watch, nextTick } from 'vue'
 import { useI18n } from 'vue-i18n'
 import { useTaxiStore } from '@/stores/taxi'
 import { useShuttleStore } from '@/stores/shuttle'
@@ -24,6 +24,24 @@ const shifts = ['all', 'dia', 'tarde', 'noche']
 const shuttleRouteFilter = ref('all')
 const shuttleTypeFilter = ref('all')
 const expandedShuttleId = ref<string | null>(null)
+const shuttleRefs = ref<Record<string, any>>({})
+
+const setShuttleRef = (el: any, id: string) => {
+  if (el) shuttleRefs.value[id] = el
+}
+
+watch(expandedShuttleId, async (newVal) => {
+  if (newVal) {
+    await nextTick()
+    const el = shuttleRefs.value[newVal]
+    if (el) {
+      // Small timeout to wait for the CSS height transition if any
+      setTimeout(() => {
+        el.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      }, 100)
+    }
+  }
+})
 
 const shuttleRoutes = computed(() => {
   const routes = shuttleStore.shuttles.map(s => `${s.origin} - ${s.destination}`)
@@ -167,6 +185,10 @@ function getShiftLabel(shift: string) {
       <div v-else-if="taxiStore.error" class="state-container">
         <span class="material-icons">error_outline</span>
         <p>{{ taxiStore.error }}</p>
+        <button class="retry-btn" @click="taxiStore.loadTaxis()">
+          <span class="material-icons">refresh</span>
+          Reintentar
+        </button>
       </div>
       
       <div v-else class="taxis-grid">
@@ -263,6 +285,7 @@ function getShiftLabel(shift: string) {
         <div 
           v-for="shuttle in filteredShuttles" 
           :key="shuttle.id" 
+          :ref="el => setShuttleRef(el, shuttle.id)"
           class="shuttle-card"
           :class="{ expanded: expandedShuttleId === shuttle.id }"
           :style="{ backgroundImage: `url(${shuttle.image_url || 'https://images.unsplash.com/photo-1544620347-c4fd4a3d5957?auto=format&fit=crop&q=80&w=2069'})` }"
@@ -431,6 +454,26 @@ function getShiftLabel(shift: string) {
   z-index: 1;
   box-shadow: 0 4px 15px rgba(254, 231, 21, 0.4);
 }
+.retry-btn {
+  margin-top: 1rem;
+  padding: 10px 20px;
+  background: var(--active-color);
+  color: #101820;
+  border: none;
+  border-radius: 12px;
+  font-weight: 800;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transition: transform 0.2s;
+}
+.retry-btn:active {
+  transform: scale(0.95);
+}
+.retry-btn .material-icons {
+  font-size: 18px;
+}
 
 /* =============================================
    SHUTTLE CARDS — DISEÑO PREMIUM CON FOTO