From 5c1b62f55a874014e5d9a271e4af819a0b9e3783 Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Sat, 4 Apr 2026 17:48:23 -0500
Subject: [PATCH] feat: redesign transport section with improved UX,
 accessibility, and type safety

- Replace native <select> filters with scrollable chip components (TransportFilterChips)
- Add skeleton shimmer loaders for taxi and shuttle cards (TaxiSkeletonCard, ShuttleSkeletonCard)
- Add search bar to TaxisLocales to filter by driver name
- Horizontal card layout on mobile for ViajesTuristicos, vertical on tablet+
- Add ARIA roles (tablist/tab, list/listitem, switch, alert, status) throughout
- Apply hover: hover media query so card hover effects don't trigger on touch
- Add prefers-reduced-motion support across all animations and transitions
- Add clear-filters button in empty states when filters are active
- Fix min-height to use 100dvh instead of 100vh for mobile nav bar
- Reduce tab slider animation from 0.5s to 0.32s
- Fix tsconfig: noUncheckedSideEffectImports false, add vite-plugin-pwa/client types
- Fix AppImage unused parameter warning (_e)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/components/AppImage.vue          |   2 +-
 .../transporte/ShuttleSkeletonCard.vue        | 167 +++++
 .../transporte/TaxiSkeletonCard.vue           | 139 ++++
 .../transporte/TransportFilterChips.vue       |  79 +++
 frontend/src/views/TransporteLayout.vue       |  91 ++-
 .../src/views/transporte/ShuttleDetalle.vue   | 364 ++++++++---
 .../src/views/transporte/TaxisLocales.vue     | 598 +++++++++++-------
 .../src/views/transporte/ViajesTuristicos.vue | 480 ++++++++------
 frontend/tsconfig.app.json                    |   4 +-
 9 files changed, 1392 insertions(+), 532 deletions(-)
 create mode 100644 frontend/src/components/transporte/ShuttleSkeletonCard.vue
 create mode 100644 frontend/src/components/transporte/TaxiSkeletonCard.vue
 create mode 100644 frontend/src/components/transporte/TransportFilterChips.vue

diff --git a/frontend/src/components/AppImage.vue b/frontend/src/components/AppImage.vue
index a7cb014..391c05a 100644
--- a/frontend/src/components/AppImage.vue
+++ b/frontend/src/components/AppImage.vue
@@ -44,7 +44,7 @@ function handleLoad() {
   isLoaded.value = true
 }
 
-function handleError(e: Event) {
+function handleError(_e: Event) {
   isError.value = true
   isLoaded.value = true
 }
diff --git a/frontend/src/components/transporte/ShuttleSkeletonCard.vue b/frontend/src/components/transporte/ShuttleSkeletonCard.vue
new file mode 100644
index 0000000..fac50a5
--- /dev/null
+++ b/frontend/src/components/transporte/ShuttleSkeletonCard.vue
@@ -0,0 +1,167 @@
+<template>
+  <div class="shuttle-skeleton glass-effect" aria-hidden="true">
+    <!-- image area -->
+    <div class="sk-image"></div>
+    <!-- body -->
+    <div class="sk-body">
+      <div class="sk-route">
+        <div class="sk-line sk-loc"></div>
+        <div class="sk-arrow"></div>
+        <div class="sk-line sk-loc"></div>
+      </div>
+      <div class="sk-tags">
+        <div class="sk-tag"></div>
+        <div class="sk-tag sk-tag--sm"></div>
+      </div>
+      <div class="sk-footer">
+        <div class="sk-price"></div>
+        <div class="sk-btn-circle"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes shimmer {
+  0% { background-position: -400px 0; }
+  100% { background-position: 400px 0; }
+}
+
+.shimmer {
+  background: linear-gradient(
+    90deg,
+    var(--bg-secondary) 25%,
+    var(--border-color) 50%,
+    var(--bg-secondary) 75%
+  );
+  background-size: 800px 100%;
+  animation: shimmer 1.4s infinite linear;
+  border-radius: 0.5rem;
+}
+
+.shuttle-skeleton {
+  border-radius: 1.5rem;
+  overflow: hidden;
+  border: 1px solid var(--border-color);
+  background: var(--card-bg);
+  display: flex;
+  flex-direction: column;
+}
+
+.sk-image {
+  height: 180px;
+  width: 100%;
+  background: linear-gradient(
+    90deg,
+    var(--bg-secondary) 25%,
+    var(--border-color) 50%,
+    var(--bg-secondary) 75%
+  );
+  background-size: 800px 100%;
+  animation: shimmer 1.4s infinite linear;
+}
+
+.sk-body {
+  padding: 1.25rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.sk-route {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.sk-line {
+  background: linear-gradient(
+    90deg,
+    var(--bg-secondary) 25%,
+    var(--border-color) 50%,
+    var(--bg-secondary) 75%
+  );
+  background-size: 800px 100%;
+  animation: shimmer 1.4s infinite linear;
+  border-radius: 0.375rem;
+  height: 14px;
+}
+
+.sk-loc {
+  width: 80px;
+}
+
+.sk-arrow {
+  width: 20px;
+  height: 12px;
+  border-radius: 3px;
+  background: var(--border-color);
+  flex-shrink: 0;
+}
+
+.sk-tags {
+  display: flex;
+  gap: 0.75rem;
+}
+
+.sk-tag {
+  height: 24px;
+  width: 80px;
+  border-radius: 0.5rem;
+  background: linear-gradient(
+    90deg,
+    var(--bg-secondary) 25%,
+    var(--border-color) 50%,
+    var(--bg-secondary) 75%
+  );
+  background-size: 800px 100%;
+  animation: shimmer 1.4s infinite linear;
+}
+
+.sk-tag--sm {
+  width: 60px;
+}
+
+.sk-footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-top: 1rem;
+  border-top: 1px solid var(--border-color);
+}
+
+.sk-price {
+  height: 28px;
+  width: 64px;
+  border-radius: 0.375rem;
+  background: linear-gradient(
+    90deg,
+    var(--bg-secondary) 25%,
+    var(--border-color) 50%,
+    var(--bg-secondary) 75%
+  );
+  background-size: 800px 100%;
+  animation: shimmer 1.4s infinite linear;
+}
+
+.sk-btn-circle {
+  width: 44px;
+  height: 44px;
+  border-radius: 50%;
+  background: linear-gradient(
+    90deg,
+    var(--bg-secondary) 25%,
+    var(--border-color) 50%,
+    var(--bg-secondary) 75%
+  );
+  background-size: 800px 100%;
+  animation: shimmer 1.4s infinite linear;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sk-image, .sk-line, .sk-tag, .sk-price, .sk-btn-circle {
+    animation: none;
+    background: var(--bg-secondary);
+  }
+}
+</style>
diff --git a/frontend/src/components/transporte/TaxiSkeletonCard.vue b/frontend/src/components/transporte/TaxiSkeletonCard.vue
new file mode 100644
index 0000000..8fdc10a
--- /dev/null
+++ b/frontend/src/components/transporte/TaxiSkeletonCard.vue
@@ -0,0 +1,139 @@
+<template>
+  <div class="taxi-skeleton glass-effect" aria-hidden="true">
+    <div class="sk-top">
+      <div class="sk-avatar"></div>
+      <div class="sk-info">
+        <div class="sk-line sk-name"></div>
+        <div class="sk-line sk-meta"></div>
+      </div>
+    </div>
+    <div class="sk-chips">
+      <div class="sk-chip"></div>
+      <div class="sk-chip sk-chip--sm"></div>
+    </div>
+    <div class="sk-btn"></div>
+  </div>
+</template>
+
+<style scoped>
+@keyframes shimmer {
+  0% { background-position: -400px 0; }
+  100% { background-position: 400px 0; }
+}
+
+.sk-base {
+  background: linear-gradient(
+    90deg,
+    var(--bg-secondary) 25%,
+    var(--border-color) 50%,
+    var(--bg-secondary) 75%
+  );
+  background-size: 800px 100%;
+  animation: shimmer 1.4s infinite linear;
+  border-radius: 0.5rem;
+}
+
+.taxi-skeleton {
+  border-radius: 1.5rem;
+  padding: 1.25rem;
+  border: 1px solid var(--border-color);
+  display: flex;
+  flex-direction: column;
+  gap: 1.25rem;
+  background: var(--card-bg);
+}
+
+.sk-top {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.sk-avatar {
+  width: 56px;
+  height: 56px;
+  border-radius: 1rem;
+  flex-shrink: 0;
+  composes: sk-base;
+  background: linear-gradient(
+    90deg,
+    var(--bg-secondary) 25%,
+    var(--border-color) 50%,
+    var(--bg-secondary) 75%
+  );
+  background-size: 800px 100%;
+  animation: shimmer 1.4s infinite linear;
+}
+
+.sk-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.sk-line {
+  border-radius: 0.375rem;
+  background: linear-gradient(
+    90deg,
+    var(--bg-secondary) 25%,
+    var(--border-color) 50%,
+    var(--bg-secondary) 75%
+  );
+  background-size: 800px 100%;
+  animation: shimmer 1.4s infinite linear;
+}
+
+.sk-name {
+  height: 16px;
+  width: 60%;
+}
+
+.sk-meta {
+  height: 12px;
+  width: 40%;
+}
+
+.sk-chips {
+  display: flex;
+  gap: 0.5rem;
+}
+
+.sk-chip {
+  height: 28px;
+  width: 90px;
+  border-radius: 0.75rem;
+  background: linear-gradient(
+    90deg,
+    var(--bg-secondary) 25%,
+    var(--border-color) 50%,
+    var(--bg-secondary) 75%
+  );
+  background-size: 800px 100%;
+  animation: shimmer 1.4s infinite linear;
+}
+
+.sk-chip--sm {
+  width: 70px;
+}
+
+.sk-btn {
+  height: 48px;
+  border-radius: 1.125rem;
+  background: linear-gradient(
+    90deg,
+    var(--bg-secondary) 25%,
+    var(--border-color) 50%,
+    var(--bg-secondary) 75%
+  );
+  background-size: 800px 100%;
+  animation: shimmer 1.4s infinite linear;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .sk-avatar, .sk-line, .sk-chip, .sk-btn {
+    animation: none;
+    background: var(--bg-secondary);
+  }
+}
+</style>
diff --git a/frontend/src/components/transporte/TransportFilterChips.vue b/frontend/src/components/transporte/TransportFilterChips.vue
new file mode 100644
index 0000000..814e284
--- /dev/null
+++ b/frontend/src/components/transporte/TransportFilterChips.vue
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+defineProps<{
+  options: { value: string; label: string; icon?: string }[]
+  modelValue: string
+  label?: string
+}>()
+
+defineEmits<{ 'update:modelValue': [value: string] }>()
+</script>
+
+<template>
+  <div class="filter-chips-group" :aria-label="label">
+    <button
+      v-for="opt in options"
+      :key="opt.value"
+      class="filter-chip"
+      :class="{ 'filter-chip--active': modelValue === opt.value }"
+      :aria-pressed="modelValue === opt.value"
+      @click="$emit('update:modelValue', opt.value)"
+    >
+      <span v-if="opt.icon" class="material-icons notranslate chip-icon" translate="no" aria-hidden="true">{{ opt.icon }}</span>
+      {{ opt.label }}
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.filter-chips-group {
+  display: flex;
+  gap: 0.5rem;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+  padding-bottom: 2px; /* prevent clipping active border-bottom */
+}
+
+.filter-chips-group::-webkit-scrollbar {
+  display: none;
+}
+
+.filter-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  padding: 0.5rem 1rem;
+  border-radius: 99px;
+  border: 1.5px solid var(--border-color);
+  background: var(--bg-primary);
+  color: var(--text-secondary);
+  font-size: 0.8125rem;
+  font-weight: 700;
+  white-space: nowrap;
+  cursor: pointer;
+  scroll-snap-align: start;
+  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.15s ease;
+  min-height: 40px;
+}
+
+.filter-chip:active {
+  transform: scale(0.95);
+}
+
+.filter-chip--active {
+  background: var(--active-color);
+  border-color: var(--active-color);
+  color: #101820;
+}
+
+.chip-icon {
+  font-size: 1rem;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .filter-chip {
+    transition: none;
+  }
+}
+</style>
diff --git a/frontend/src/views/TransporteLayout.vue b/frontend/src/views/TransporteLayout.vue
index 83256de..904745d 100644
--- a/frontend/src/views/TransporteLayout.vue
+++ b/frontend/src/views/TransporteLayout.vue
@@ -6,7 +6,6 @@ import { useRoute } from 'vue-router'
 const { t } = useI18n()
 const route = useRoute()
 
-// Solo mostrar el header con tabs en las vistas principales
 const isMainView = computed(() => {
   return route.name === 'TaxisLocales' || route.name === 'ViajesTuristicos'
 })
@@ -18,7 +17,6 @@ const reloadPage = () => {
 
 onMounted(async () => {
   try {
-    // Aquí iría cualquier inicialización global del layout si fuera necesaria
     console.log('Transporte Hub mounted')
   } catch (e) {
     console.error('Error mounting Transporte Hub:', e)
@@ -31,30 +29,44 @@ onMounted(async () => {
   <div class="taxi-view">
     <header v-if="isMainView" class="header-main">
       <h1 class="brand-title">{{ t('taxi.title') }}</h1>
-      <div class="hub-tabs">
+      <nav class="hub-tabs" role="tablist" :aria-label="t('taxi.title')">
         <div class="tabs-background">
-          <router-link to="/transporte/taxis" class="hub-tab" active-class="active" exact-active-class="active">
-            <span class="material-icons notranslate" translate="no">local_taxi</span>
+          <router-link
+            to="/transporte/taxis"
+            class="hub-tab"
+            role="tab"
+            :aria-selected="!route.path.includes('viajes-turisticos')"
+            active-class="active"
+            exact-active-class="active"
+          >
+            <span class="material-icons notranslate" translate="no" aria-hidden="true">local_taxi</span>
             {{ t('taxi.tabLocal') }}
           </router-link>
-          <router-link to="/transporte/viajes-turisticos" class="hub-tab" active-class="active" :class="{ 'active': route.path.includes('viajes-turisticos') }">
-            <span class="material-icons notranslate" translate="no">directions_bus</span>
+          <router-link
+            to="/transporte/viajes-turisticos"
+            class="hub-tab"
+            role="tab"
+            :aria-selected="route.path.includes('viajes-turisticos')"
+            active-class="active"
+            :class="{ 'active': route.path.includes('viajes-turisticos') }"
+          >
+            <span class="material-icons notranslate" translate="no" aria-hidden="true">directions_bus</span>
             {{ t('taxi.tabIntercity') }}
           </router-link>
-          <div class="tab-slider" :class="{ 'slide-right': !route.path.includes('taxis') }"></div>
+          <div class="tab-slider" :class="{ 'slide-right': route.path.includes('viajes-turisticos') }" aria-hidden="true"></div>
         </div>
-      </div>
+      </nav>
     </header>
 
-    <div v-if="mountError" class="error-container">
-      <span class="material-icons notranslate" translate="no">error_outline</span>
+    <div v-if="mountError" class="error-container" role="alert">
+      <span class="material-icons notranslate" translate="no" aria-hidden="true">error_outline</span>
       <p>{{ t('taxi.errorLoading') }}</p>
       <button @click="reloadPage" class="retry-btn">
-        <span class="material-icons notranslate" translate="no">refresh</span>
+        <span class="material-icons notranslate" translate="no" aria-hidden="true">refresh</span>
         {{ t('common.retry') }}
       </button>
     </div>
-    
+
     <router-view v-else v-slot="{ Component }">
       <transition name="fade" mode="out-in">
         <keep-alive>
@@ -67,21 +79,21 @@ onMounted(async () => {
 
 <style scoped>
 .taxi-view {
-  min-height: 100vh;
+  min-height: 100dvh;
   position: relative;
   padding: 0 0 150px;
 }
 
 .header-main {
-    padding: 24px 16px;
-    text-align: center;
+  padding: 24px 16px;
+  text-align: center;
 }
 
 .brand-title {
-    color: var(--header-text);
-    font-size: 1.5rem;
-    font-weight: 800;
-    margin: 0;
+  color: var(--header-text);
+  font-size: 1.5rem;
+  font-weight: 800;
+  margin: 0;
 }
 
 /* Transport Hub Tabs */
@@ -114,7 +126,7 @@ onMounted(async () => {
   font-size: 0.9rem;
   cursor: pointer;
   z-index: 2;
-  transition: color 0.3s;
+  transition: color 0.2s;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -122,6 +134,13 @@ onMounted(async () => {
   text-decoration: none;
   overflow: hidden;
   position: relative;
+  min-height: 44px;
+  border-radius: 12px;
+}
+
+.hub-tab:focus-visible {
+  outline: 2px solid var(--active-color);
+  outline-offset: 2px;
 }
 
 .hub-tab::after {
@@ -135,7 +154,7 @@ onMounted(async () => {
   border-radius: 50%;
   opacity: 0;
   transform: translate(-50%, -50%) scale(0);
-  transition: all 0.5s ease;
+  transition: all 0.4s ease;
 }
 
 .hub-tab:active::after {
@@ -162,7 +181,7 @@ onMounted(async () => {
   width: calc(50% - 6px);
   background: #FEE715;
   border-radius: 12px;
-  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
+  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
   z-index: 1;
   box-shadow: 0 4px 20px rgba(254, 231, 21, 0.4);
   will-change: transform;
@@ -172,15 +191,31 @@ onMounted(async () => {
   transform: translateX(calc(100% + 4px));
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .tab-slider {
+    transition: none;
+  }
+  .hub-tab {
+    transition: none;
+  }
+}
+
 .fade-enter-active,
 .fade-leave-active {
-  transition: opacity 0.2s ease;
+  transition: opacity 0.18s ease;
 }
 .fade-enter-from,
 .fade-leave-to {
   opacity: 0;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .fade-enter-active,
+  .fade-leave-active {
+    transition: none;
+  }
+}
+
 .error-container {
   display: flex;
   flex-direction: column;
@@ -209,10 +244,16 @@ onMounted(async () => {
   display: flex;
   align-items: center;
   gap: 8px;
-  transition: transform 0.2s;
+  transition: transform 0.15s ease;
+  min-height: 44px;
 }
 
 .retry-btn:active {
   transform: scale(0.95);
 }
+
+.retry-btn:focus-visible {
+  outline: 2px solid var(--active-color);
+  outline-offset: 2px;
+}
 </style>
diff --git a/frontend/src/views/transporte/ShuttleDetalle.vue b/frontend/src/views/transporte/ShuttleDetalle.vue
index 89082ad..53be8bd 100644
--- a/frontend/src/views/transporte/ShuttleDetalle.vue
+++ b/frontend/src/views/transporte/ShuttleDetalle.vue
@@ -21,7 +21,7 @@ onMounted(async () => {
     cargando.value = true
     const shuttleId = route.params.id as string
 
-    // In a real app we might just get from the store, but directly from Supabase is safe to ensure it always works with Deep Links!
+    // Fetch directly from Supabase to ensure deep links always work
     const { data, error: sbError } = await supabase
       .from('shuttles')
       .select('*')
@@ -39,19 +39,16 @@ onMounted(async () => {
 })
 
 const parsePrice = (priceVal?: number | string | null): string => {
-  if (!priceVal) return '0.00';
-  const num = typeof priceVal === 'string' ? parseFloat(priceVal) : priceVal;
-  return Number.isNaN(num) ? '0.00' : num.toFixed(2);
-};
+  if (!priceVal) return '0.00'
+  const num = typeof priceVal === 'string' ? parseFloat(priceVal) : priceVal
+  return Number.isNaN(num) ? '0.00' : num.toFixed(2)
+}
 
 const volver = () => {
-  // Leer la ruta padre desde el meta de la ruta actual
   const rutaPadre = route.meta.padre as string | undefined
-
   if (rutaPadre) {
     router.push({ name: rutaPadre })
   } else {
-    // Fallback seguro
     router.push('/transporte/viajes-turisticos')
   }
 }
@@ -65,11 +62,18 @@ const getTripTypeLabel = (type: string) => {
 </script>
 
 <template>
-  <div class="shuttle-detalle-container bg-[var(--bg-primary)] pb-24 min-h-screen relative">
-    <!-- Header con botón volver (Solid background to avoid overlap on scroll) -->
-    <div class="sticky top-0 z-50 bg-[var(--bg-primary)] border-b border-border flex items-center gap-3 px-4 py-3 shadow-md" style="padding-top: max(env(safe-area-inset-top), 12px);">
-      <button @click="volver" class="p-2 rounded-full hover:bg-[var(--hover-bg)] flex items-center justify-center transition">
-        <span class="material-icons text-[var(--text-primary)] notranslate" translate="no">arrow_back</span>
+  <div class="shuttle-detalle bg-[var(--bg-primary)] pb-24 min-h-dvh relative">
+    <!-- Sticky header -->
+    <div
+      class="sticky top-0 z-50 bg-[var(--bg-primary)] border-b border-[var(--border-color)] flex items-center gap-3 px-4 shadow-sm"
+      style="padding-top: max(env(safe-area-inset-top), 12px); padding-bottom: 12px;"
+    >
+      <button
+        @click="volver"
+        class="back-btn"
+        :aria-label="t('common.back')"
+      >
+        <span class="material-icons notranslate" translate="no" aria-hidden="true">arrow_back</span>
       </button>
       <h1 class="font-bold text-[var(--text-primary)] text-lg truncate flex-1">
         {{ shuttle?.company_name || t('shuttle.detailTitle') }}
@@ -84,129 +88,158 @@ const getTripTypeLabel = (type: string) => {
     </div>
 
     <!-- Loading -->
-    <div v-if="cargando" class="flex flex-col justify-center items-center h-64 gap-3 w-full">
-       <LoadingBranded :message="t('common.loading') || 'Cargando detalle...'" icon="airport_shuttle" />
+    <div v-if="cargando" class="flex flex-col justify-center items-center h-64 gap-3 w-full" aria-busy="true">
+      <LoadingBranded :message="t('common.loading') || 'Cargando detalle...'" icon="airport_shuttle" />
     </div>
 
     <!-- Error -->
-    <div v-else-if="error" class="flex flex-col items-center justify-center h-64 px-6 text-center">
-      <span class="material-icons text-red-500 text-5xl mb-3 notranslate" translate="no">error_outline</span>
+    <div v-else-if="error" class="flex flex-col items-center justify-center h-64 px-6 text-center" role="alert">
+      <span class="material-icons text-red-500 text-5xl mb-3 notranslate" translate="no" aria-hidden="true">error_outline</span>
       <p class="text-red-500 font-medium">{{ error }}</p>
-      <button @click="volver" class="mt-6 px-6 py-2 bg-text-primary text-surface font-bold rounded-full shadow hover:opacity-90 transition">
+      <button
+        @click="volver"
+        class="mt-6 px-6 py-3 bg-[var(--text-primary)] text-[var(--bg-primary)] font-bold rounded-full shadow hover:opacity-90 transition active:scale-95 min-h-[44px]"
+      >
         {{ t('common.back') }}
       </button>
     </div>
 
-    <!-- Contenido completo -->
+    <!-- Content -->
     <div v-else-if="shuttle" class="px-4 py-4 space-y-4 max-w-lg mx-auto animate-fade-in">
-      <!-- Imagen -->
-      <div v-if="shuttle.image_url" class="relative w-full h-56 md:h-64 rounded-2xl overflow-hidden shadow-sm">
-        <AppImage 
+
+      <!-- Hero image -->
+      <div
+        v-if="shuttle.image_url"
+        class="relative w-full rounded-2xl overflow-hidden shadow-sm"
+        style="aspect-ratio: 16/9;"
+      >
+        <AppImage
           :src="shuttle.image_url"
           type="shuttle"
-          :alt="shuttle.company_name"
-          imgClass="w-full h-full object-cover" 
+          :alt="`Imagen de ${shuttle.company_name || 'shuttle'}`"
+          imgClass="w-full h-full object-cover"
         />
-        <div class="absolute bottom-3 left-3 bg-[var(--bg-primary)]/90 backdrop-blur-sm px-3 py-1 rounded-full text-sm font-bold shadow-sm flex items-center gap-1">
-           <span class="material-icons text-sm notranslate" style="color: var(--active-color)" translate="no">directions_bus</span>
-           {{ shuttle.vehicle_type }}
+        <div
+          class="absolute bottom-3 left-3 bg-[var(--bg-primary)]/90 backdrop-blur-sm px-3 py-1 rounded-full text-sm font-bold shadow-sm flex items-center gap-1"
+          aria-hidden="true"
+        >
+          <span class="material-icons text-sm notranslate" style="color: var(--active-color)" translate="no">directions_bus</span>
+          {{ shuttle.vehicle_type }}
         </div>
       </div>
 
-      <!-- Rutas Origen - Destino prominente -->
-      <div class="bg-[var(--bg-secondary)] rounded-2xl p-5 shadow-sm space-y-3 border border-border">
-         <div class="flex items-center justify-between">
-           <div class="flex flex-col flex-1">
-              <span class="text-xs text-[var(--text-secondary)] font-semibold mb-1 uppercase tracking-wider">{{ t('shuttle.origin') }}</span>
-              <span class="font-bold text-[var(--text-primary)] text-lg leading-tight break-words">
-                {{ shuttle.origin }}
-              </span>
-           </div>
-           
-           <div class="flex flex-col items-center px-4 shrink-0">
-             <span class="text-xs text-[var(--text-secondary)] font-bold mb-1">{{ shuttle.estimated_duration }}</span>
-             <div class="w-16 border-t-2 border-dashed border-border relative my-1">
-                 <span class="material-icons absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-[var(--text-secondary)] bg-[var(--bg-secondary)] px-1 text-sm notranslate" translate="no">east</span>
-             </div>
-           </div>
-           
-           <div class="flex flex-col flex-1 text-right">
-              <span class="text-xs text-[var(--text-secondary)] font-semibold mb-1 uppercase tracking-wider">{{ t('shuttle.destination') }}</span>
-              <span class="font-bold text-[var(--text-primary)] text-lg leading-tight break-words">
-                {{ shuttle.destination }}
-              </span>
-           </div>
-         </div>
+      <!-- Route card -->
+      <div
+        class="bg-[var(--bg-secondary)] rounded-2xl p-5 shadow-sm space-y-3 border border-[var(--border-color)]"
+        :aria-label="`Ruta de ${shuttle.origin} a ${shuttle.destination}`"
+      >
+        <div class="flex items-center justify-between">
+          <div class="flex flex-col flex-1">
+            <span class="route-sublabel">{{ t('shuttle.origin') }}</span>
+            <span class="route-city">{{ shuttle.origin }}</span>
+          </div>
+
+          <div class="flex flex-col items-center px-4 shrink-0" aria-hidden="true">
+            <span class="route-duration">{{ shuttle.estimated_duration }}</span>
+            <div class="route-line relative my-1">
+              <span class="material-icons route-arrow notranslate" translate="no">east</span>
+            </div>
+          </div>
+
+          <div class="flex flex-col flex-1 text-right">
+            <span class="route-sublabel">{{ t('shuttle.destination') }}</span>
+            <span class="route-city">{{ shuttle.destination }}</span>
+          </div>
+        </div>
       </div>
 
-      <!-- Info principal -->
-      <div class="bg-[var(--bg-secondary)] rounded-2xl p-5 shadow-sm space-y-4 border border-border">
+      <!-- Info card -->
+      <div class="bg-[var(--bg-secondary)] rounded-2xl p-5 shadow-sm space-y-4 border border-[var(--border-color)]">
         <div>
           <h2 class="text-xl font-bold text-[var(--text-primary)]">{{ shuttle.company_name }}</h2>
-          <p class="text-[var(--text-secondary)] text-sm mt-1 leading-relaxed" v-if="shuttle.description" style="white-space: pre-wrap;">{{ shuttle.description }}</p>
+          <p
+            v-if="shuttle.description"
+            class="text-[var(--text-secondary)] text-sm mt-1 leading-relaxed"
+            style="white-space: pre-wrap;"
+          >{{ shuttle.description }}</p>
         </div>
- 
-        <div class="grid grid-cols-2 gap-4 pt-4 border-t border-border">
+
+        <dl class="grid grid-cols-2 gap-4 pt-4 border-t border-[var(--border-color)]">
           <div class="flex flex-col gap-1">
-            <span class="text-xs text-[var(--text-secondary)] uppercase tracking-wider font-semibold flex items-center gap-1"><span class="material-icons text-sm notranslate" translate="no">schedule</span> {{ t('shuttle.departureTimes') }}</span>
-            <span class="font-semibold text-[var(--text-primary)] bg-[var(--bg-primary)] p-2 rounded-lg text-sm text-center border border-border">
-              {{ shuttle.departure_times }}
-            </span>
+            <dt class="info-label">
+              <span class="material-icons text-sm notranslate" translate="no" aria-hidden="true">schedule</span>
+              {{ t('shuttle.departureTimes') }}
+            </dt>
+            <dd class="info-value">{{ shuttle.departure_times }}</dd>
           </div>
           <div class="flex flex-col gap-1">
-            <span class="text-xs text-[var(--text-secondary)] uppercase tracking-wider font-semibold flex items-center gap-1"><span class="material-icons text-sm notranslate" translate="no">swap_horiz</span> {{ t('shuttle.tripType') }}</span>
-            <span class="font-semibold text-[var(--text-primary)] bg-[var(--bg-primary)] p-2 rounded-lg text-sm text-center border border-border">
-              {{ getTripTypeLabel(shuttle.trip_type) }}
-            </span>
+            <dt class="info-label">
+              <span class="material-icons text-sm notranslate" translate="no" aria-hidden="true">swap_horiz</span>
+              {{ t('shuttle.tripType') }}
+            </dt>
+            <dd class="info-value">{{ getTripTypeLabel(shuttle.trip_type) }}</dd>
           </div>
-          <div class="flex flex-col gap-1" v-if="shuttle.english_speaking">
-            <span class="text-xs text-[var(--text-secondary)] uppercase tracking-wider font-semibold flex items-center gap-1"><span class="material-icons text-sm notranslate" translate="no">g_translate</span> {{ t('shuttle.languages') }}</span>
-            <span class="font-semibold text-[var(--text-primary)] bg-[var(--bg-primary)] p-2 rounded-lg text-sm text-center border border-border">
-              Español · English
-            </span>
+          <div v-if="shuttle.english_speaking" class="flex flex-col gap-1">
+            <dt class="info-label">
+              <span class="material-icons text-sm notranslate" translate="no" aria-hidden="true">g_translate</span>
+              {{ t('shuttle.languages') }}
+            </dt>
+            <dd class="info-value">Español · English</dd>
           </div>
-        </div>
+        </dl>
       </div>
 
-      <!-- Precio -->
-      <div class="rounded-2xl p-6 shadow-sm flex items-center justify-between" style="background-color: var(--active-color); color: #101820;">
+      <!-- Price card -->
+      <div
+        class="rounded-2xl p-6 shadow-sm flex items-center justify-between"
+        style="background-color: var(--active-color); color: #101820;"
+        aria-label="Precios"
+      >
         <div class="text-left">
-           <p class="text-sm font-semibold opacity-90 mb-1">{{ t('shuttle.pricePerPerson') }}</p>
-           <div class="flex items-baseline gap-1">
-             <span class="text-lg font-bold opacity-80">$</span>
-             <span class="text-4xl font-black tracking-tight">{{ parsePrice(shuttle.price_per_person) }}</span>
-           </div>
+          <p class="text-sm font-semibold opacity-90 mb-1">{{ t('shuttle.pricePerPerson') }}</p>
+          <div class="flex items-baseline gap-1">
+            <span class="text-lg font-bold opacity-70" aria-hidden="true">$</span>
+            <span class="text-4xl font-black tracking-tight">{{ parsePrice(shuttle.price_per_person) }}</span>
+          </div>
         </div>
-        <div class="p-3 rounded-xl bg-black/10 backdrop-blur-sm" v-if="shuttle.price_private_trip">
-           <span class="text-xs font-bold uppercase tracking-wider opacity-90 block mb-1">{{ t('shuttle.private') }}</span>
-           <span class="font-black text-lg">${{ parsePrice(shuttle.price_private_trip) }}</span>
+        <div
+          v-if="shuttle.price_private_trip"
+          class="p-3 rounded-xl bg-black/10 backdrop-blur-sm"
+        >
+          <span class="text-xs font-bold uppercase tracking-wider opacity-90 block mb-1">{{ t('shuttle.private') }}</span>
+          <span class="font-black text-lg">${{ parsePrice(shuttle.price_private_trip) }}</span>
         </div>
       </div>
 
-      <!-- Contacto -->
-      <div class="bg-[var(--bg-secondary)] rounded-2xl p-5 shadow-sm space-y-4 border border-border mb-8">
+      <!-- Contact card -->
+      <div class="bg-[var(--bg-secondary)] rounded-2xl p-5 shadow-sm space-y-4 border border-[var(--border-color)] mb-8">
         <div>
           <h3 class="font-bold text-[var(--text-primary)] text-lg">{{ t('shuttle.bookingInfo') }}</h3>
           <p class="text-sm text-[var(--text-secondary)] mt-1">{{ t('shuttle.contactOperator') }}</p>
         </div>
-        
+
         <div class="flex flex-col gap-3">
-          <a v-if="shuttle.contact_whatsapp"
-            :href="`https://wa.me/${shuttle.contact_whatsapp.replace(/\+/g, '')}?text=Hola,%20me%20gustaría%20información%20sobre%20el%20shuttle%20de%20${shuttle.origin}%20a%20${shuttle.destination}`"
+          <a
+            v-if="shuttle.contact_whatsapp"
+            :href="`https://wa.me/${shuttle.contact_whatsapp.replace(/[^0-9]/g, '')}?text=${encodeURIComponent(`Hola, me gustaría información sobre el shuttle de ${shuttle.origin} a ${shuttle.destination}`)}`"
             target="_blank"
-            class="flex justify-center items-center gap-2 p-3.5 bg-[#25D366] text-white rounded-xl font-bold hover:opacity-90 transition active:scale-95"
+            rel="noopener noreferrer"
+            class="contact-btn contact-btn--whatsapp"
+            :aria-label="`Reservar por WhatsApp con ${shuttle.company_name || 'el operador'}`"
             @click="analyticsService.logEvent({ event_name: 'shuttle_contact', entity_type: 'shuttle', entity_id: shuttle.id, entity_name: shuttle.company_name || 'shuttle', properties: { action: 'whatsapp' } })"
           >
-            <span class="material-icons notranslate" translate="no">chat</span>
+            <span class="material-icons notranslate" translate="no" aria-hidden="true">chat</span>
             {{ t('shuttle.bookWhatsapp') }}
           </a>
-          
-          <a v-if="shuttle.phone_number"
+
+          <a
+            v-if="shuttle.phone_number"
             :href="`tel:${shuttle.phone_number}`"
-            class="flex justify-center items-center gap-2 p-3.5 bg-[var(--bg-primary)] text-[var(--text-primary)] rounded-xl font-bold hover:bg-[var(--hover-bg)] transition active:scale-95 border border-border"
+            class="contact-btn contact-btn--call"
+            :aria-label="`Llamar al operador: ${shuttle.phone_number}`"
             @click="analyticsService.logEvent({ event_name: 'shuttle_contact', entity_type: 'shuttle', entity_id: shuttle.id, entity_name: shuttle.company_name || 'shuttle', properties: { action: 'call' } })"
           >
-            <span class="material-icons notranslate" translate="no">phone_in_talk</span>
+            <span class="material-icons notranslate" translate="no" aria-hidden="true">phone_in_talk</span>
             {{ t('shuttle.callOperator') }}
           </a>
         </div>
@@ -217,20 +250,155 @@ const getTripTypeLabel = (type: string) => {
 
 <style scoped>
 .animate-fade-in {
-  animation: fadeIn 0.3s ease-out forwards;
+  animation: fadeIn 0.25s ease-out forwards;
 }
 
 @keyframes fadeIn {
-  from { opacity: 0; transform: translateY(10px); }
+  from { opacity: 0; transform: translateY(8px); }
   to { opacity: 1; transform: translateY(0); }
 }
 
-.spin {
-  animation: spin 1s infinite linear;
+@media (prefers-reduced-motion: reduce) {
+  .animate-fade-in {
+    animation: none;
+  }
 }
 
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+/* Back button */
+.back-btn {
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  color: var(--text-primary);
+  transition: background 0.15s ease;
+  flex-shrink: 0;
+}
+
+.back-btn:hover {
+  background: var(--bg-secondary);
+}
+
+.back-btn:focus-visible {
+  outline: 2px solid var(--active-color);
+  outline-offset: 2px;
+}
+
+/* Route card */
+.route-sublabel {
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-secondary);
+  margin-bottom: 0.25rem;
+}
+
+.route-city {
+  font-weight: 800;
+  color: var(--text-primary);
+  font-size: 1rem;
+  line-height: 1.25;
+  word-break: break-words;
+}
+
+.route-duration {
+  font-size: 0.75rem;
+  font-weight: 700;
+  color: var(--text-secondary);
+  margin-bottom: 0.25rem;
+}
+
+.route-line {
+  width: 64px;
+  border-top: 2px dashed var(--border-color);
+}
+
+.route-arrow {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  color: var(--text-secondary);
+  background: var(--bg-secondary);
+  padding: 0 4px;
+  font-size: 0.875rem;
+}
+
+/* Info labels */
+.info-label {
+  font-size: 0.75rem;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  font-weight: 700;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.info-value {
+  font-weight: 600;
+  color: var(--text-primary);
+  background: var(--bg-primary);
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.625rem;
+  font-size: 0.875rem;
+  text-align: center;
+  border: 1px solid var(--border-color);
+}
+
+/* Contact buttons */
+.contact-btn {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.625rem;
+  padding: 0.875rem;
+  border-radius: 0.875rem;
+  font-weight: 700;
+  font-size: 0.9375rem;
+  text-decoration: none;
+  transition: opacity 0.15s ease, transform 0.15s ease;
+  min-height: 52px;
+}
+
+.contact-btn:active {
+  transform: scale(0.97);
+}
+
+.contact-btn:focus-visible {
+  outline: 2px solid var(--active-color);
+  outline-offset: 2px;
+}
+
+.contact-btn--whatsapp {
+  background: #25D366;
+  color: #fff;
+}
+
+.contact-btn--whatsapp:hover {
+  opacity: 0.92;
+}
+
+.contact-btn--call {
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  border: 1px solid var(--border-color);
+}
+
+.contact-btn--call:hover {
+  background: var(--bg-secondary);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .contact-btn, .back-btn {
+    transition: none;
+  }
 }
 </style>
diff --git a/frontend/src/views/transporte/TaxisLocales.vue b/frontend/src/views/transporte/TaxisLocales.vue
index 89083a8..c215507 100644
--- a/frontend/src/views/transporte/TaxisLocales.vue
+++ b/frontend/src/views/transporte/TaxisLocales.vue
@@ -7,7 +7,8 @@ import type { Taxi } from '@/types'
 import FavoriteButton from '@/components/FavoriteButton.vue'
 import AppImage from '@/components/AppImage.vue'
 import AuthGuard from '@/components/common/AuthGuard.vue'
-import LoadingBranded from '@/components/common/LoadingBranded.vue'
+import TaxiSkeletonCard from '@/components/transporte/TaxiSkeletonCard.vue'
+import TransportFilterChips from '@/components/transporte/TransportFilterChips.vue'
 
 const { t } = useI18n()
 const taxiStore = useTaxiStore()
@@ -15,68 +16,87 @@ const taxiStore = useTaxiStore()
 const selectedZone = ref('all')
 const selectedShift = ref('all')
 const onlyEnglish = ref(false)
-
-const corregimientos = ['all', 'Boquete', 'David - Boquete', 'Boquete - David', 'Aeropuerto - Boquete']
-const shifts = ['all', 'dia', 'tarde', 'noche']
+const searchQuery = ref('')
 
 // Infinite Scroll
 const displayLimit = ref(12)
 const observerTarget = ref<HTMLElement | null>(null)
 let observer: IntersectionObserver | null = null
 
+const zoneOptions = computed(() => [
+  { value: 'all', label: t('taxi.allZones') },
+  { value: 'Boquete', label: 'Boquete' },
+  { value: 'David - Boquete', label: 'David → Boquete' },
+  { value: 'Boquete - David', label: 'Boquete → David' },
+  { value: 'Aeropuerto - Boquete', label: 'Aeropuerto → Boquete' },
+])
+
+const shiftOptions = computed(() => [
+  { value: 'all', label: t('common.all'), icon: 'schedule' },
+  { value: 'dia', label: t('taxi.dayShift'), icon: 'wb_sunny' },
+  { value: 'tarde', label: t('taxi.afternoonShift'), icon: 'wb_twilight' },
+  { value: 'noche', label: t('taxi.nightShift'), icon: 'nights_stay' },
+])
+
 function fetchData() {
   taxiStore.loadTaxis()
 }
 
 function handleRefocus() {
-  // Recarga silenciosa: no congela la UI si ya hay datos
   taxiStore.silentReload()
 }
 
 onMounted(async () => {
-    analyticsService.logEvent({ event_name: 'screen_view', screen_name: 'TaxisLocales' })
-    window.addEventListener('app-refocus', handleRefocus)
+  analyticsService.logEvent({ event_name: 'screen_view', screen_name: 'TaxisLocales' })
+  window.addEventListener('app-refocus', handleRefocus)
 
-    // Infinite Scroll Observer
-    observer = new IntersectionObserver((entries) => {
-      if (entries[0]?.isIntersecting) {
-        displayLimit.value += 12
-      }
-    }, { rootMargin: '400px' })
-
-    if (observerTarget.value && observer) {
-      observer.observe(observerTarget.value)
+  observer = new IntersectionObserver((entries) => {
+    if (entries[0]?.isIntersecting) {
+      displayLimit.value += 12
     }
+  }, { rootMargin: '400px' })
 
-    if(taxiStore.taxis.length === 0) {
-        await fetchData()
-    }
+  if (observerTarget.value && observer) {
+    observer.observe(observerTarget.value)
+  }
+
+  if (taxiStore.taxis.length === 0) {
+    await fetchData()
+  }
 })
 
 onUnmounted(() => {
-    window.removeEventListener('app-refocus', handleRefocus)
-    if (observer) {
-      observer.disconnect()
-    }
+  window.removeEventListener('app-refocus', handleRefocus)
+  if (observer) observer.disconnect()
 })
 
-watch([selectedZone, selectedShift, onlyEnglish], () => {
+watch([selectedZone, selectedShift, onlyEnglish, searchQuery], () => {
   displayLimit.value = 12
 })
 
 const filteredTaxis = computed(() => {
+  const q = searchQuery.value.trim().toLowerCase()
   return taxiStore.taxis.filter(taxi => {
     const matchesZone = selectedZone.value === 'all' || taxi.corregimiento === selectedZone.value
-    // Ahora comprueba si el turno seleccionado está en el array de turnos del taxi
     const matchesShift = selectedShift.value === 'all' || (taxi.shifts && taxi.shifts.includes(selectedShift.value))
     const matchesEnglish = !onlyEnglish.value || taxi.english_speaking
-    return matchesZone && matchesShift && matchesEnglish
+    const matchesSearch = !q || taxi.owner_name.toLowerCase().includes(q)
+    return matchesZone && matchesShift && matchesEnglish && matchesSearch
   })
 })
 
-const visibleTaxis = computed(() => {
-  return filteredTaxis.value.slice(0, displayLimit.value)
-})
+const visibleTaxis = computed(() => filteredTaxis.value.slice(0, displayLimit.value))
+
+const hasActiveFilters = computed(() =>
+  selectedZone.value !== 'all' || selectedShift.value !== 'all' || onlyEnglish.value || searchQuery.value.trim() !== ''
+)
+
+function clearFilters() {
+  selectedZone.value = 'all'
+  selectedShift.value = 'all'
+  onlyEnglish.value = false
+  searchQuery.value = ''
+}
 
 const isOnline = (taxi: Taxi) => {
   if (!taxi.shifts) return false
@@ -89,12 +109,12 @@ const getShiftsDisplay = (taxi: Taxi) => {
 }
 
 const handleCall = (taxi: Taxi) => {
-  analyticsService.logEvent({ 
-    event_name: 'taxi_click', 
+  analyticsService.logEvent({
+    event_name: 'taxi_click',
     entity_type: 'taxi',
     entity_id: taxi.id,
     entity_name: taxi.owner_name,
-    properties: { 
+    properties: {
       action: 'call',
       taxi_id: taxi.id,
       plate: taxi.license_plate
@@ -110,87 +130,140 @@ function getShiftLabel(shift: string) {
   return shift
 }
 </script>
+
 <template>
   <div class="taxis-locales">
-<div class="filters-container">
-        <div class="filter-card glass-effect">
-          <div class="selectors-side">
-            <div class="select-group-premium">
-              <div class="group-content">
-                <label>{{ t('taxi.allZones') }}</label>
-                <select v-model="selectedZone">
-                  <option value="all">{{ t('taxi.allZones') }}</option>
-                  <option v-for="zone in corregimientos.filter(z => z !== 'all')" :key="zone" :value="zone">{{ zone }}</option>
-                </select>
-              </div>
-            </div>
-            <div class="select-group-premium">
-              <div class="group-content">
-                <label>{{ t('taxi.shift') }}</label>
-                <select v-model="selectedShift">
-                  <option value="all">{{ t('taxi.shift') }}</option>
-                  <option v-for="s in shifts.filter(x => x !== 'all')" :key="s" :value="s">{{ getShiftLabel(s) }}</option>
-                </select>
-              </div>
-            </div>
-          </div>
-          <div class="lang-toggle-side">
-            <div class="lang-pill" :class="{ 'lang-pill--active': onlyEnglish }" @click="onlyEnglish = !onlyEnglish">
-              <span class="material-icons notranslate" translate="no">{{ onlyEnglish ? 'check_circle' : 'language' }}</span>
-              <span>English</span>
-            </div>
-          </div>
-        </div>
-      </div>
-      
-      <div v-if="taxiStore.isLoading" class="state-container">
-        <LoadingBranded :message="t('taxi.loadingTaxis') || 'Cargando taxis...'" icon="local_taxi" />
-      </div>
-      
-      <div v-else-if="taxiStore.error" class="state-container">
-        <span class="material-icons notranslate" translate="no">error_outline</span>
-        <p>{{ taxiStore.error }}</p>
-        <button class="retry-btn" @click="taxiStore.loadTaxis()">
-          <span class="material-icons notranslate" translate="no">refresh</span>
-          {{ t('common.retry') || 'Reintentar' }}
+    <!-- FILTERS -->
+    <div class="filters-wrap">
+      <!-- Search -->
+      <div class="search-bar">
+        <span class="material-icons search-icon notranslate" translate="no" aria-hidden="true">search</span>
+        <input
+          v-model="searchQuery"
+          type="search"
+          :placeholder="t('taxi.allZones') + '...'"
+          class="search-input"
+          :aria-label="'Buscar conductor'"
+        />
+        <button
+          v-if="searchQuery"
+          class="search-clear"
+          @click="searchQuery = ''"
+          :aria-label="t('common.clear')"
+        >
+          <span class="material-icons notranslate" translate="no" aria-hidden="true">close</span>
         </button>
       </div>
-      
-      <AuthGuard
-        :title="t('discover.auth.title')"
-        :message="t('shuttle.auth.message')"
-      >
-        <div class="taxis-grid">
-          <div v-for="taxi in visibleTaxis" :key="taxi.id" v-memo="[taxi.id]" class="taxi-card-new glass-effect">
+
+      <!-- Zone chips -->
+      <div class="filter-section">
+        <span class="filter-label">{{ t('taxi.area') }}</span>
+        <TransportFilterChips
+          v-model="selectedZone"
+          :options="zoneOptions"
+          :label="t('taxi.area')"
+        />
+      </div>
+
+      <!-- Shift chips -->
+      <div class="filter-section">
+        <span class="filter-label">{{ t('taxi.shift') }}</span>
+        <TransportFilterChips
+          v-model="selectedShift"
+          :options="shiftOptions"
+          :label="t('taxi.shift')"
+        />
+      </div>
+
+      <!-- English toggle -->
+      <div class="filter-section">
+        <button
+          class="lang-pill"
+          :class="{ 'lang-pill--active': onlyEnglish }"
+          role="switch"
+          :aria-checked="onlyEnglish"
+          @click="onlyEnglish = !onlyEnglish"
+        >
+          <span class="material-icons notranslate" translate="no" aria-hidden="true">
+            {{ onlyEnglish ? 'check_circle' : 'language' }}
+          </span>
+          <span>{{ t('taxi.englishSpeakers') }}</span>
+        </button>
+      </div>
+    </div>
+
+    <!-- LOADING SKELETONS -->
+    <div v-if="taxiStore.isLoading" class="taxis-grid" aria-busy="true" aria-label="Cargando conductores...">
+      <TaxiSkeletonCard v-for="n in 6" :key="n" />
+    </div>
+
+    <!-- ERROR -->
+    <div v-else-if="taxiStore.error" class="state-container" role="alert">
+      <span class="material-icons notranslate state-icon state-icon--error" translate="no" aria-hidden="true">error_outline</span>
+      <p>{{ taxiStore.error }}</p>
+      <button class="retry-btn" @click="taxiStore.loadTaxis()">
+        <span class="material-icons notranslate" translate="no" aria-hidden="true">refresh</span>
+        {{ t('common.retry') }}
+      </button>
+    </div>
+
+    <!-- GRID -->
+    <AuthGuard
+      v-else
+      :title="t('discover.auth.title')"
+      :message="t('shuttle.auth.message')"
+    >
+      <div class="taxis-grid" role="list" :aria-label="'Conductores disponibles'">
+        <div
+          v-for="taxi in visibleTaxis"
+          :key="taxi.id"
+          v-memo="[taxi.id]"
+          class="taxi-card glass-effect"
+          role="listitem"
+        >
           <div class="card-top">
             <div class="driver-avatar-wrap">
-              <div class="driver-avatar">
-                <AppImage 
-                  :src="taxi.image_url" 
+              <div class="driver-avatar" aria-hidden="true">
+                <AppImage
+                  :src="taxi.image_url"
                   type="taxi"
-                  alt="Driver"
+                  alt=""
                 />
               </div>
-              <div class="driver-status" :class="{ 'status-online': isOnline(taxi) }"></div>
+              <div
+                class="driver-status"
+                :class="{ 'status-online': isOnline(taxi) }"
+                :aria-label="isOnline(taxi) ? 'Disponible' : 'No disponible'"
+                role="img"
+              ></div>
             </div>
+
             <div class="driver-info">
-              <div class="flex items-center gap-2 mb-0.5">
+              <div class="name-row">
                 <h3 class="driver-name">{{ taxi.owner_name }}</h3>
-                <span v-if="taxi.is_accessible" class="material-icons text-blue-500 text-sm notranslate" title="Accesible para personas con discapacidad" translate="no">accessible</span>
+                <span
+                  v-if="taxi.is_accessible"
+                  class="material-icons accessible-icon notranslate"
+                  :title="'Accesible para personas con discapacidad'"
+                  translate="no"
+                  aria-label="Vehículo accesible"
+                  role="img"
+                >accessible</span>
               </div>
               <div class="driver-meta">
-                <div class="rating-stars">
-                  <span class="material-icons star-filled notranslate" translate="no">star</span>
+                <div class="rating-stars" :aria-label="`Calificación ${(taxi.rating || 5).toFixed(1)} de 5`">
+                  <span class="material-icons star-filled notranslate" translate="no" aria-hidden="true">star</span>
                   <span class="rating-value">{{ (taxi.rating || 5).toFixed(1) }}</span>
                 </div>
-                <span class="meta-dot">·</span>
+                <span class="meta-dot" aria-hidden="true">·</span>
                 <span class="shift-badge">{{ getShiftsDisplay(taxi) }}</span>
               </div>
             </div>
+
             <div class="fav-icon-wrapper">
-              <FavoriteButton 
-                item-type="taxi" 
-                :item-id="taxi.id" 
+              <FavoriteButton
+                item-type="taxi"
+                :item-id="taxi.id"
                 :item-name="taxi.owner_name"
                 :item-image="taxi.image_url || undefined"
               />
@@ -199,22 +272,27 @@ function getShiftLabel(shift: string) {
 
           <div class="card-details">
             <div class="detail-item" v-if="taxi.corregimiento">
-              <span class="material-icons detail-icon notranslate" translate="no">location_on</span>
+              <span class="material-icons detail-icon notranslate" translate="no" aria-hidden="true">location_on</span>
               <span class="detail-text">{{ taxi.corregimiento }}</span>
             </div>
             <div class="detail-item" v-if="taxi.vehicle_type">
-              <span class="material-icons detail-icon notranslate" translate="no">local_taxi</span>
+              <span class="material-icons detail-icon notranslate" translate="no" aria-hidden="true">local_taxi</span>
               <span class="detail-text">{{ taxi.vehicle_type }}</span>
             </div>
             <div class="detail-item" v-if="taxi.english_speaking">
-              <span class="material-icons detail-icon notranslate" translate="no">g_translate</span>
+              <span class="material-icons detail-icon notranslate" translate="no" aria-hidden="true">g_translate</span>
               <span class="detail-text">{{ t('taxi.englishLabel') }}</span>
             </div>
           </div>
 
           <div class="card-actions">
-            <a :href="`tel:${taxi.phone_number}`" class="call-btn-premium" @click="handleCall(taxi)">
-              <span class="material-icons notranslate" translate="no">phone_in_talk</span>
+            <a
+              :href="`tel:${taxi.phone_number}`"
+              class="call-btn"
+              :aria-label="`Llamar a ${taxi.owner_name}, ${taxi.phone_number}`"
+              @click="handleCall(taxi)"
+            >
+              <span class="material-icons notranslate" translate="no" aria-hidden="true">phone_in_talk</span>
               <div class="btn-content">
                 <span class="btn-label">{{ t('taxi.callNow') }}</span>
                 <span class="btn-subtext">{{ taxi.phone_number }}</span>
@@ -224,138 +302,169 @@ function getShiftLabel(shift: string) {
         </div>
 
         <!-- Infinite Scroll Trigger -->
-        <div ref="observerTarget" class="h-10 w-full mt-4"></div>
+        <div ref="observerTarget" class="scroll-trigger" aria-hidden="true"></div>
 
-        <div v-if="filteredTaxis.length === 0" class="empty-state">
-          <span class="material-icons notranslate" translate="no">no_accounts</span>
-          <p>{{ t('taxi.noTaxisAvailable') }}</p>
+        <!-- EMPTY STATE -->
+        <div v-if="filteredTaxis.length === 0" class="empty-state" role="status">
+          <span class="material-icons notranslate empty-icon" translate="no" aria-hidden="true">no_accounts</span>
+          <p class="empty-title">{{ t('taxi.noTaxisAvailable') }}</p>
+          <button v-if="hasActiveFilters" class="clear-filters-btn" @click="clearFilters">
+            <span class="material-icons notranslate" translate="no" aria-hidden="true">filter_alt_off</span>
+            {{ t('common.clear') }}
+          </button>
         </div>
-        </div>
-      </AuthGuard>
-    
+      </div>
+    </AuthGuard>
   </div>
 </template>
 
 <style scoped>
-/* FILTROS PREMIUM */
-.filters-container {
-  padding: 0 1rem 1.5rem;
-}
-
-.filter-card {
-  border-radius: 1rem;
-  padding: 0.75rem 1rem;
+/* FILTERS */
+.filters-wrap {
+  padding: 0 1rem 1rem;
   display: flex;
   flex-direction: column;
-  gap: 0.75rem;
-  border: 1px solid var(--border-color);
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
-  background: var(--card-bg);
+  gap: 0.875rem;
 }
 
-@media (min-width: 640px) {
-  .filter-card {
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-  }
-}
-
-.selectors-side {
-  flex: 1;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.5rem;
-}
-
-.select-group-premium {
+.search-bar {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-radius: 0.75rem;
-  padding: 0.5rem 0.75rem;
-  transition: all 0.3s ease;
+  background: var(--bg-secondary);
+  border: 1.5px solid var(--border-color);
+  border-radius: 0.875rem;
+  padding: 0 0.875rem;
+  transition: border-color 0.18s ease;
+  min-height: 48px;
 }
 
-.select-group-premium:focus-within {
+.search-bar:focus-within {
   border-color: var(--active-color);
-  box-shadow: 0 0 0 3px rgba(254, 231, 21, 0.1);
+  box-shadow: 0 0 0 3px rgba(254, 231, 21, 0.12);
 }
 
-.group-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-}
-
-.group-content label {
-  font-size: 0.65rem;
-  font-weight: 800;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
+.search-icon {
   color: var(--text-secondary);
-  line-height: 1;
-  margin-bottom: 0.25rem;
+  font-size: 1.25rem;
+  flex-shrink: 0;
 }
 
-.group-content select {
+.search-input {
+  flex: 1;
   background: transparent;
   border: none;
-  color: var(--text-primary);
-  font-weight: 700;
-  font-size: 0.9375rem;
   outline: none;
+  color: var(--text-primary);
+  font-size: 0.9375rem;
+  font-weight: 600;
+  padding: 0.75rem 0;
+}
+
+.search-input::placeholder {
+  color: var(--text-secondary);
+  font-weight: 500;
+}
+
+.search-clear {
+  background: none;
+  border: none;
+  color: var(--text-secondary);
   cursor: pointer;
-  padding: 0;
-  width: 100%;
+  display: flex;
+  align-items: center;
+  padding: 4px;
+  border-radius: 50%;
+  min-width: 28px;
+  min-height: 28px;
+  justify-content: center;
+}
+
+.search-clear:hover {
+  background: var(--bg-primary);
+}
+
+.filter-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.filter-label {
+  font-size: 0.75rem;
+  font-weight: 800;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-secondary);
 }
 
 .lang-pill {
   display: inline-flex;
   align-items: center;
-  gap: 0.25rem;
+  gap: 0.375rem;
   padding: 0.5rem 1rem;
   background: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-radius: 0.75rem;
+  border: 1.5px solid var(--border-color);
+  border-radius: 99px;
   font-weight: 700;
-  font-size: 0.875rem;
+  font-size: 0.8125rem;
   color: var(--text-secondary);
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: all 0.18s ease;
+  min-height: 40px;
+  align-self: flex-start;
 }
 
 .lang-pill--active {
-  background: rgba(254, 231, 21, 0.1);
+  background: rgba(254, 231, 21, 0.12);
   border-color: var(--active-color);
   color: var(--active-color);
 }
 
-/* GRID Y TARJETAS PREMIUM */
-.taxis-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
-  gap: 1.5rem;
-  padding: 1.5rem 1rem;
+.lang-pill:focus-visible {
+  outline: 2px solid var(--active-color);
+  outline-offset: 2px;
 }
 
-.taxi-card-new {
+/* GRID */
+.taxis-grid {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+  padding: 0.5rem 1rem 1.5rem;
+}
+
+@media (min-width: 640px) {
+  .taxis-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (min-width: 1024px) {
+  .taxis-grid {
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* CARD */
+.taxi-card {
   border-radius: 1.5rem;
   padding: 1.25rem;
   border: 1px solid var(--border-color);
-  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
   display: flex;
   flex-direction: column;
   gap: 1.25rem;
   background: var(--card-bg);
+  cursor: default;
 }
 
-.taxi-card-new:hover {
-  transform: translateY(-8px);
-  border-color: var(--active-color);
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+@media (hover: hover) {
+  .taxi-card:hover {
+    transform: translateY(-6px);
+    border-color: var(--active-color);
+    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
+  }
 }
 
 .card-top {
@@ -401,14 +510,31 @@ function getShiftLabel(shift: string) {
 
 .driver-info {
   flex: 1;
+  min-width: 0;
+}
+
+.name-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  margin-bottom: 0.25rem;
 }
 
 .driver-name {
-  margin: 0 0 0.25rem;
-  font-size: 1.125rem;
+  margin: 0;
+  font-size: 1.0625rem;
   font-weight: 800;
   color: var(--text-primary);
   line-height: 1.2;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.accessible-icon {
+  font-size: 1.125rem;
+  color: #3b82f6;
+  flex-shrink: 0;
 }
 
 .driver-meta {
@@ -446,10 +572,14 @@ function getShiftLabel(shift: string) {
   text-transform: capitalize;
 }
 
+.fav-icon-wrapper {
+  flex-shrink: 0;
+}
+
 .card-details {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.75rem;
+  gap: 0.5rem;
 }
 
 .detail-item {
@@ -459,7 +589,7 @@ function getShiftLabel(shift: string) {
   background: var(--bg-secondary);
   padding: 0.375rem 0.75rem;
   border-radius: 0.75rem;
-  font-size: 0.75rem;
+  font-size: 0.8125rem;
   font-weight: 700;
   color: var(--text-secondary);
 }
@@ -473,30 +603,38 @@ function getShiftLabel(shift: string) {
   margin-top: auto;
 }
 
-.call-btn-premium {
+.call-btn {
   display: flex;
   align-items: center;
-  gap: 1rem;
+  gap: 0.875rem;
   width: 100%;
   padding: 0.75rem 1.25rem;
   background: var(--active-color);
   color: #101820;
   border-radius: 1.125rem;
   text-decoration: none;
-  transition: all 0.3s ease;
+  transition: transform 0.18s ease, box-shadow 0.18s ease;
   box-shadow: 0 4px 15px rgba(254, 231, 21, 0.2);
+  min-height: 52px;
 }
 
-.call-btn-premium:hover {
-  transform: scale(1.02);
-  box-shadow: 0 6px 20px rgba(254, 231, 21, 0.35);
+.call-btn:focus-visible {
+  outline: 2px solid #101820;
+  outline-offset: 2px;
 }
 
-.call-btn-premium:active {
-  transform: scale(0.98);
+@media (hover: hover) {
+  .call-btn:hover {
+    transform: scale(1.02);
+    box-shadow: 0 6px 20px rgba(254, 231, 21, 0.35);
+  }
 }
 
-.call-btn-premium .material-icons {
+.call-btn:active {
+  transform: scale(0.97);
+}
+
+.call-btn .material-icons {
   font-size: 1.5rem;
 }
 
@@ -518,23 +656,53 @@ function getShiftLabel(shift: string) {
   opacity: 0.7;
 }
 
+/* STATES */
+.scroll-trigger {
+  height: 40px;
+  width: 100%;
+  grid-column: 1 / -1;
+}
+
 .empty-state {
-  grid-column-start: 1;
-  grid-column-end: -1;
+  grid-column: 1 / -1;
   text-align: center;
-  padding: 4rem 2rem;
+  padding: 3.5rem 2rem;
   color: var(--text-secondary);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
 }
 
-.empty-state .material-icons {
-  font-size: 4rem;
-  margin-bottom: 1rem;
-  opacity: 0.5;
+.empty-icon {
+  font-size: 3.5rem;
+  opacity: 0.4;
 }
 
-.empty-state p {
-  font-size: 1.125rem;
+.empty-title {
+  font-size: 1rem;
   font-weight: 600;
+  margin: 0;
+}
+
+.clear-filters-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1.25rem;
+  background: var(--bg-secondary);
+  border: 1.5px solid var(--border-color);
+  border-radius: 99px;
+  font-weight: 700;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: border-color 0.18s ease, background 0.18s ease;
+  min-height: 44px;
+}
+
+.clear-filters-btn:hover {
+  border-color: var(--active-color);
 }
 
 .state-container {
@@ -544,17 +712,15 @@ function getShiftLabel(shift: string) {
   justify-content: center;
   padding: 4rem 2rem;
   gap: 1rem;
+  text-align: center;
 }
 
-.spin {
-  animation: spin 1s infinite linear;
+.state-icon {
   font-size: 3rem;
-  color: var(--active-color);
 }
 
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.state-icon--error {
+  color: #ef4444;
 }
 
 .retry-btn {
@@ -568,16 +734,22 @@ function getShiftLabel(shift: string) {
   border-radius: 99px;
   font-weight: 800;
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: transform 0.15s ease;
+  min-height: 44px;
 }
 
-.retry-btn:hover {
-  transform: scale(1.05);
+.retry-btn:active {
+  transform: scale(0.97);
 }
 
-@media (max-width: 600px) {
-    .taxis-grid {
-        grid-template-columns: 1fr;
-    }
+@media (prefers-reduced-motion: reduce) {
+  .taxi-card,
+  .call-btn,
+  .lang-pill,
+  .search-bar,
+  .retry-btn,
+  .clear-filters-btn {
+    transition: none;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/src/views/transporte/ViajesTuristicos.vue b/frontend/src/views/transporte/ViajesTuristicos.vue
index 501e580..0f4d392 100644
--- a/frontend/src/views/transporte/ViajesTuristicos.vue
+++ b/frontend/src/views/transporte/ViajesTuristicos.vue
@@ -6,7 +6,8 @@ import { useShuttleStore } from '@/stores/shuttle'
 import AuthGuard from '@/components/common/AuthGuard.vue'
 import AppImage from '@/components/AppImage.vue'
 import { analyticsService } from '@/services/analyticsService'
-import LoadingBranded from '@/components/common/LoadingBranded.vue'
+import ShuttleSkeletonCard from '@/components/transporte/ShuttleSkeletonCard.vue'
+import TransportFilterChips from '@/components/transporte/TransportFilterChips.vue'
 
 const { t } = useI18n()
 const shuttleStore = useShuttleStore()
@@ -15,6 +16,19 @@ const router = useRouter()
 const shuttleCategoryFilter = ref('all')
 const shuttleTypeFilter = ref('all')
 
+const categoryOptions = computed(() => [
+  { value: 'all', label: t('shuttle.allAreas') || 'Todas', icon: 'grid_view' },
+  { value: 'local', label: t('shuttle.local') || 'Local', icon: 'place' },
+  { value: 'interprovincial', label: t('shuttle.interprovincial') || 'Interprovincial', icon: 'route' },
+])
+
+const typeOptions = computed(() => [
+  { value: 'all', label: t('common.all'), icon: 'swap_horiz' },
+  { value: 'one_way', label: t('shuttle.oneWay'), icon: 'arrow_forward' },
+  { value: 'round_trip', label: t('shuttle.roundTrip'), icon: 'sync_alt' },
+  { value: 'both', label: t('shuttle.both'), icon: 'directions' },
+])
+
 const filteredShuttles = computed(() => {
   return shuttleStore.shuttles.filter(shuttle => {
     const matchesCategory = shuttleCategoryFilter.value === 'all' || shuttle.category === shuttleCategoryFilter.value
@@ -23,152 +37,153 @@ const filteredShuttles = computed(() => {
   })
 })
 
+const hasActiveFilters = computed(() =>
+  shuttleCategoryFilter.value !== 'all' || shuttleTypeFilter.value !== 'all'
+)
+
+function clearFilters() {
+  shuttleCategoryFilter.value = 'all'
+  shuttleTypeFilter.value = 'all'
+}
+
 const verDetalle = (shuttleId: string, shuttleName: string) => {
-    analyticsService.logEvent({
-      event_name: 'view_details',
-      entity_type: 'shuttle',
-      entity_id: shuttleId,
-      entity_name: shuttleName
-    })
-    router.push({
-        name: 'ShuttleDetalle',
-        params: { id: shuttleId }
-    })
+  analyticsService.logEvent({
+    event_name: 'view_details',
+    entity_type: 'shuttle',
+    entity_id: shuttleId,
+    entity_name: shuttleName
+  })
+  router.push({ name: 'ShuttleDetalle', params: { id: shuttleId } })
 }
 
 function fetchData() {
-    shuttleStore.loadShuttles()
+  shuttleStore.loadShuttles()
 }
 
 function handleRefocus() {
-    // Recarga silenciosa: no congela la UI si ya hay datos
-    shuttleStore.silentReload()
+  shuttleStore.silentReload()
 }
 
 onMounted(async () => {
-    analyticsService.logEvent({ event_name: 'screen_view', screen_name: 'ViajesTuristicos' })
-    window.addEventListener('app-refocus', handleRefocus)
-    if(shuttleStore.shuttles.length === 0) {
-        await fetchData()
-    }
+  analyticsService.logEvent({ event_name: 'screen_view', screen_name: 'ViajesTuristicos' })
+  window.addEventListener('app-refocus', handleRefocus)
+  if (shuttleStore.shuttles.length === 0) {
+    await fetchData()
+  }
 })
 
 onUnmounted(() => {
-    window.removeEventListener('app-refocus', handleRefocus)
+  window.removeEventListener('app-refocus', handleRefocus)
 })
 </script>
 
 <template>
   <div class="viajes-turisticos">
-    <!-- FILTROS PREMIUM -->
-    <div class="filters-container">
-      <div class="filter-card glass-effect">
-        <div class="selectors-side">
-          <!-- Ruta Select -->
-          <div class="select-group-premium">
-            <div class="group-content">
-              <label>{{ t('shuttle.category') || 'Categoría' }}</label>
-              <select v-model="shuttleCategoryFilter">
-                <option value="all">{{ t('shuttle.allAreas') || 'Todas las áreas' }}</option>
-                <option value="local">Local</option>
-                <option value="interprovincial">Interprovincial</option>
-              </select>
-            </div>
-          </div>
-
-          <!-- Tipo de Viaje Select -->
-          <div class="select-group-premium">
-            <div class="group-content">
-              <label>{{ t('shuttle.tripType') }}</label>
-              <select v-model="shuttleTypeFilter">
-                <option value="all">{{ t('shuttle.tripType') }}</option>
-                <option value="one_way">{{ t('shuttle.oneWay') }}</option>
-                <option value="round_trip">{{ t('shuttle.roundTrip') }}</option>
-                <option value="both">{{ t('shuttle.both') }}</option>
-              </select>
-            </div>
-          </div>
-        </div>
+    <!-- FILTERS -->
+    <div class="filters-wrap">
+      <div class="filter-section">
+        <span class="filter-label">{{ t('shuttle.category') }}</span>
+        <TransportFilterChips
+          v-model="shuttleCategoryFilter"
+          :options="categoryOptions"
+          :label="t('shuttle.category')"
+        />
+      </div>
+      <div class="filter-section">
+        <span class="filter-label">{{ t('shuttle.tripType') }}</span>
+        <TransportFilterChips
+          v-model="shuttleTypeFilter"
+          :options="typeOptions"
+          :label="t('shuttle.tripType')"
+        />
       </div>
     </div>
 
-    <!-- ESTADOS -->
-    <div v-if="shuttleStore.isLoading" class="state-container">
-      <LoadingBranded :message="t('taxi.loadingTaxis') || 'Cargando viajes...'" icon="airport_shuttle" />
+    <!-- LOADING SKELETONS -->
+    <div v-if="shuttleStore.isLoading" class="shuttles-grid" aria-busy="true" aria-label="Cargando viajes...">
+      <ShuttleSkeletonCard v-for="n in 4" :key="n" />
     </div>
 
-    <div v-else-if="shuttleStore.error" class="state-container">
-      <span class="material-icons notranslate" translate="no">error_outline</span>
+    <!-- ERROR -->
+    <div v-else-if="shuttleStore.error" class="state-container" role="alert">
+      <span class="material-icons notranslate state-icon state-icon--error" translate="no" aria-hidden="true">error_outline</span>
       <p>{{ shuttleStore.error }}</p>
       <button class="retry-btn" @click="shuttleStore.loadShuttles()">
-        <span class="material-icons notranslate" translate="no">refresh</span>
-        {{ t('common.retry') || 'Reintentar' }}
+        <span class="material-icons notranslate" translate="no" aria-hidden="true">refresh</span>
+        {{ t('common.retry') }}
       </button>
     </div>
 
-    <!-- GRID PREMIUM CON AUTHGUARD -->
+    <!-- GRID -->
     <AuthGuard
       v-else
       :title="t('shuttle.auth.title') || 'Viajes Exclusivos'"
       :message="t('shuttle.auth.message') || 'Regístrate para reservar tus viajes, ver horarios detallados y tarifas de grupo.'"
     >
-      <div class="shuttles-grid">
-        <div 
-          v-for="shuttle in filteredShuttles" 
-          :key="shuttle.id" 
+      <div class="shuttles-grid" role="list" :aria-label="'Viajes disponibles'">
+        <article
+          v-for="shuttle in filteredShuttles"
+          :key="shuttle.id"
           v-memo="[shuttle.id]"
-          class="shuttle-card-premium glass-effect"
+          class="shuttle-card glass-effect"
+          role="listitem"
+          :aria-label="`${shuttle.origin} a ${shuttle.destination}${shuttle.company_name ? ', ' + shuttle.company_name : ''}`"
           @click="verDetalle(shuttle.id, shuttle.company_name || `${shuttle.origin}-${shuttle.destination}`)"
+          @keydown.enter="verDetalle(shuttle.id, shuttle.company_name || `${shuttle.origin}-${shuttle.destination}`)"
+          tabindex="0"
         >
-          <div class="card-image-wrap">
-            <AppImage 
-              :src="shuttle.image_url" 
+          <!-- Image — desktop full, mobile strip -->
+          <div class="card-image-wrap" aria-hidden="true">
+            <AppImage
+              :src="shuttle.image_url"
               type="shuttle"
               imgClass="shuttle-img"
-              alt="Shuttle"
+              alt=""
             />
             <div class="company-tag" v-if="shuttle.company_name">
-              <span class="material-icons notranslate" translate="no">business</span>
+              <span class="material-icons notranslate" translate="no" aria-hidden="true">business</span>
               {{ shuttle.company_name }}
             </div>
           </div>
 
-          <div class="card-body-premium">
+          <div class="card-body">
             <div class="route-header">
-              <div class="route-main">
-                <span class="location-name">{{ shuttle.origin }}</span>
-                <span class="material-icons separator-icon notranslate" translate="no">east</span>
-                <span class="location-name">{{ shuttle.destination }}</span>
-              </div>
+              <span class="location-name">{{ shuttle.origin }}</span>
+              <span class="material-icons separator-icon notranslate" translate="no" aria-hidden="true">east</span>
+              <span class="location-name">{{ shuttle.destination }}</span>
             </div>
 
             <div class="card-meta">
               <div class="meta-tag">
-                <span class="material-icons notranslate" translate="no">directions_bus</span>
+                <span class="material-icons notranslate" translate="no" aria-hidden="true">directions_bus</span>
                 <span>{{ shuttle.vehicle_type }}</span>
               </div>
               <div class="meta-tag" v-if="shuttle.estimated_duration">
-                <span class="material-icons notranslate" translate="no">schedule</span>
+                <span class="material-icons notranslate" translate="no" aria-hidden="true">schedule</span>
                 <span>{{ shuttle.estimated_duration }}</span>
               </div>
             </div>
 
-            <div class="card-footer-premium">
+            <div class="card-footer">
               <div class="price-container">
                 <span class="price-label">{{ t('shuttle.from') || 'Desde' }}</span>
-                <span class="price-val">${{ shuttle.price_per_person }}</span>
+                <span class="price-val" :aria-label="`Precio desde $${shuttle.price_per_person}`">${{ shuttle.price_per_person }}</span>
               </div>
-              <button class="view-details-btn">
+              <div class="view-details-btn" aria-hidden="true">
                 <span class="material-icons notranslate" translate="no">chevron_right</span>
-              </button>
+              </div>
             </div>
           </div>
-        </div>
+        </article>
 
         <!-- EMPTY STATE -->
-        <div v-if="filteredShuttles.length === 0" class="empty-state">
-          <span class="material-icons notranslate" translate="no">directions_bus_filled</span>
-          <p>{{ t('shuttle.noShuttles') }}</p>
+        <div v-if="filteredShuttles.length === 0" class="empty-state" role="status">
+          <span class="material-icons notranslate empty-icon" translate="no" aria-hidden="true">directions_bus_filled</span>
+          <p class="empty-title">{{ t('shuttle.noShuttles') }}</p>
+          <button v-if="hasActiveFilters" class="clear-filters-btn" @click="clearFilters">
+            <span class="material-icons notranslate" translate="no" aria-hidden="true">filter_alt_off</span>
+            {{ t('common.clear') }}
+          </button>
         </div>
       </div>
     </AuthGuard>
@@ -180,93 +195,104 @@ onUnmounted(() => {
   padding-bottom: 2rem;
 }
 
-/* FILTROS CONSISTENTES */
-.filters-container {
-  padding: 0 1rem 1.5rem;
-}
-
-.filter-card {
-  border-radius: 1rem;
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--border-color);
-  background: var(--card-bg);
-  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
-}
-
-.selectors-side {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.5rem;
-}
-
-.select-group-premium {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-  background: var(--bg-primary);
-  border: 1px solid var(--border-color);
-  border-radius: 0.75rem;
-  padding: 0.5rem 0.75rem;
-  transition: all 0.3s ease;
-}
-
-.select-group-premium:focus-within {
-  border-color: var(--active-color);
-}
-
-.group-content {
-  flex: 1;
+/* FILTERS */
+.filters-wrap {
+  padding: 0 1rem 1rem;
   display: flex;
   flex-direction: column;
+  gap: 0.875rem;
 }
 
-.group-content label {
-  font-size: 0.65rem;
+.filter-section {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.filter-label {
+  font-size: 0.75rem;
   font-weight: 800;
   text-transform: uppercase;
+  letter-spacing: 0.06em;
   color: var(--text-secondary);
-  margin-bottom: 0.125rem;
 }
 
-.group-content select {
-  background: transparent;
-  border: none;
-  color: var(--text-primary);
-  font-weight: 700;
-  font-size: 0.9375rem;
-  outline: none;
-  width: 100%;
-}
-
-/* GRID Y CARDS PREMIUM */
+/* GRID — single column on mobile, 2-col on tablet, 3-col on desktop */
 .shuttles-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-  gap: 1.5rem;
-  padding: 0 1rem;
+  grid-template-columns: 1fr;
+  gap: 1rem;
+  padding: 0.5rem 1rem 1.5rem;
 }
 
-.shuttle-card-premium {
-  border-radius: 1.5rem;
+@media (min-width: 640px) {
+  .shuttles-grid {
+    grid-template-columns: repeat(2, 1fr);
+    gap: 1.25rem;
+  }
+}
+
+@media (min-width: 1024px) {
+  .shuttles-grid {
+    grid-template-columns: repeat(3, 1fr);
+    gap: 1.5rem;
+  }
+}
+
+/* CARD — horizontal on mobile, vertical on tablet+ */
+.shuttle-card {
+  border-radius: 1.25rem;
   overflow: hidden;
   border: 1px solid var(--border-color);
   background: var(--card-bg);
-  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
+  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
   cursor: pointer;
+  /* Horizontal layout on mobile */
   display: flex;
-  flex-direction: column;
+  flex-direction: row;
 }
 
-.shuttle-card-premium:hover {
-  transform: translateY(-8px);
-  border-color: var(--active-color);
-  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+.shuttle-card:focus-visible {
+  outline: 2px solid var(--active-color);
+  outline-offset: 2px;
 }
 
+@media (min-width: 480px) {
+  /* Vertical card layout on larger screens */
+  .shuttle-card {
+    flex-direction: column;
+  }
+}
+
+@media (hover: hover) {
+  .shuttle-card:hover {
+    transform: translateY(-5px);
+    border-color: var(--active-color);
+    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.18);
+  }
+
+  .shuttle-card:hover .view-details-btn {
+    background: var(--active-color);
+    color: #101820;
+    border-color: var(--active-color);
+    transform: rotate(-45deg);
+  }
+}
+
+/* Image: small strip on mobile, full-width on larger */
 .card-image-wrap {
   position: relative;
-  height: 180px;
-  width: 100%;
+  width: 100px;
+  min-height: 120px;
+  flex-shrink: 0;
+}
+
+@media (min-width: 480px) {
+  .card-image-wrap {
+    width: 100%;
+    min-height: unset;
+    height: 170px;
+  }
 }
 
 .shuttle-img {
@@ -277,71 +303,101 @@ onUnmounted(() => {
 
 .company-tag {
   position: absolute;
-  top: 1rem;
-  left: 1rem;
+  top: 0.75rem;
+  left: 0.75rem;
   background: rgba(0, 0, 0, 0.7);
   backdrop-filter: blur(8px);
-  padding: 0.375rem 0.75rem;
-  border-radius: 0.75rem;
+  padding: 0.25rem 0.625rem;
+  border-radius: 0.625rem;
   color: #fff;
-  font-size: 0.75rem;
+  font-size: 0.7rem;
   font-weight: 700;
   display: flex;
   align-items: center;
-  gap: 0.5rem;
+  gap: 0.375rem;
   border: 1px solid rgba(255, 255, 255, 0.2);
+  /* Hide on mobile to save space */
+  display: none;
 }
 
-.card-body-premium {
-  padding: 1.25rem;
+@media (min-width: 480px) {
+  .company-tag {
+    display: flex;
+  }
+}
+
+.card-body {
+  padding: 0.875rem;
   display: flex;
   flex-direction: column;
-  gap: 1rem;
+  gap: 0.625rem;
+  flex: 1;
+  min-width: 0;
 }
 
-.route-main {
+@media (min-width: 480px) {
+  .card-body {
+    padding: 1.125rem;
+    gap: 0.875rem;
+  }
+}
+
+.route-header {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
+  gap: 0.5rem;
   flex-wrap: wrap;
 }
 
 .location-name {
-  font-size: 1.125rem;
+  font-size: 0.9375rem;
   font-weight: 800;
   color: var(--text-primary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 80px;
+}
+
+@media (min-width: 480px) {
+  .location-name {
+    font-size: 1.0625rem;
+    max-width: none;
+  }
 }
 
 .separator-icon {
   color: var(--active-color);
-  font-size: 1.25rem;
+  font-size: 1.125rem;
+  flex-shrink: 0;
 }
 
 .card-meta {
   display: flex;
-  gap: 1rem;
+  flex-wrap: wrap;
+  gap: 0.5rem;
 }
 
 .meta-tag {
   display: flex;
   align-items: center;
-  gap: 0.375rem;
+  gap: 0.25rem;
   color: var(--text-secondary);
-  font-size: 0.875rem;
+  font-size: 0.75rem;
   font-weight: 600;
 }
 
 .meta-tag .material-icons {
-  font-size: 1.125rem;
+  font-size: 1rem;
   color: var(--active-color);
 }
 
-.card-footer-premium {
-  margin-top: 0.5rem;
+.card-footer {
+  margin-top: auto;
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding-top: 1rem;
+  padding-top: 0.625rem;
   border-top: 1px solid var(--border-color);
 }
 
@@ -351,21 +407,27 @@ onUnmounted(() => {
 }
 
 .price-label {
-  font-size: 0.65rem;
+  font-size: 0.6875rem;
   font-weight: 700;
   text-transform: uppercase;
   color: var(--text-secondary);
 }
 
 .price-val {
-  font-size: 1.5rem;
+  font-size: 1.375rem;
   font-weight: 900;
   color: var(--active-color);
 }
 
+@media (min-width: 480px) {
+  .price-val {
+    font-size: 1.5rem;
+  }
+}
+
 .view-details-btn {
-  width: 44px;
-  height: 44px;
+  width: 40px;
+  height: 40px;
   border-radius: 50%;
   background: var(--bg-secondary);
   border: 1px solid var(--border-color);
@@ -373,17 +435,11 @@ onUnmounted(() => {
   display: flex;
   align-items: center;
   justify-content: center;
-  transition: all 0.3s ease;
+  transition: all 0.25s ease;
+  flex-shrink: 0;
 }
 
-.shuttle-card-premium:hover .view-details-btn {
-  background: var(--active-color);
-  color: #101820;
-  border-color: var(--active-color);
-  transform: rotate(-45deg);
-}
-
-/* ESTADOS */
+/* STATES */
 .state-container {
   display: flex;
   flex-direction: column;
@@ -393,15 +449,12 @@ onUnmounted(() => {
   text-align: center;
 }
 
-.spin {
-  animation: spin 1s infinite linear;
+.state-icon {
   font-size: 3rem;
-  color: var(--active-color);
 }
 
-@keyframes spin {
-  from { transform: rotate(0deg); }
-  to { transform: rotate(360deg); }
+.state-icon--error {
+  color: #ef4444;
 }
 
 .retry-btn {
@@ -415,21 +468,62 @@ onUnmounted(() => {
   border-radius: 99px;
   font-weight: 800;
   cursor: pointer;
-  transition: all 0.3s ease;
+  transition: transform 0.15s ease;
+  min-height: 44px;
+}
+
+.retry-btn:active {
+  transform: scale(0.97);
 }
 
 .empty-state {
-  grid-column-start: 1;
-  grid-column-end: -1;
+  grid-column: 1 / -1;
   text-align: center;
-  padding: 4rem 2rem;
+  padding: 3.5rem 2rem;
   color: var(--text-secondary);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 1rem;
 }
 
-.empty-state .material-icons {
-  font-size: 4rem;
-  margin-bottom: 1rem;
-  opacity: 0.5;
+.empty-icon {
+  font-size: 3.5rem;
+  opacity: 0.4;
 }
 
+.empty-title {
+  font-size: 1rem;
+  font-weight: 600;
+  margin: 0;
+}
+
+.clear-filters-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.625rem 1.25rem;
+  background: var(--bg-secondary);
+  border: 1.5px solid var(--border-color);
+  border-radius: 99px;
+  font-weight: 700;
+  font-size: 0.875rem;
+  color: var(--text-primary);
+  cursor: pointer;
+  transition: border-color 0.18s ease;
+  min-height: 44px;
+}
+
+.clear-filters-btn:hover {
+  border-color: var(--active-color);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .shuttle-card,
+  .view-details-btn,
+  .retry-btn,
+  .clear-filters-btn {
+    transition: none;
+  }
+}
 </style>
diff --git a/frontend/tsconfig.app.json b/frontend/tsconfig.app.json
index 1bbebb0..c3a3ef5 100644
--- a/frontend/tsconfig.app.json
+++ b/frontend/tsconfig.app.json
@@ -2,7 +2,7 @@
   "extends": "@vue/tsconfig/tsconfig.dom.json",
   "compilerOptions": {
     "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "types": ["vite/client", "google.maps"],
+    "types": ["vite/client", "google.maps", "vite-plugin-pwa/client"],
     "baseUrl": ".",
     "paths": {
       "@/*": ["./src/*"]
@@ -14,7 +14,7 @@
     "noUnusedParameters": true,
     "erasableSyntaxOnly": true,
     "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
+    "noUncheckedSideEffectImports": false
   },
   "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue"]
 }