Implement Smart Location: auto-detect user location if preference is enabled, hide location button, and handle permission denial by resetting preference

frontend/src/components/AppHeader.vue

@@ -10,8 +10,8 @@
             </svg>
         </span>
       </button>
-      <div v-if="authStore.isAdmin" class="admin-badge">ADMIN</div>
+      <div v-if="authStore.isAdmin" class="admin-badge">{{ t('menu.admin') }}</div>
-      <div v-if="authStore.isDriver" class="driver-badge">CONDUCTOR</div>
+      <div v-if="authStore.isDriver" class="driver-badge">{{ t('menu.driver') }}</div>
       
       <ReportModal :is-open="showReportModal" @close="showReportModal = false" />
       
@@ -29,57 +29,57 @@
                 <div v-if="authStore.isAuthenticated" class="status-dot-active"></div>
               </div>
               <div class="user-info-text">
-                <span class="welcome-label">HOLA,</span>
+                <span class="welcome-label">{{ t('menu.welcome') }}</span>
-                <span class="user-name-highlight">{{ authStore.isAuthenticated ? authStore.userName : 'INVITADO' }}</span>
+                <span class="user-name-highlight">{{ authStore.isAuthenticated ? authStore.userName : t('menu.guest') }}</span>
               </div>
             </div>
           </div>
 
           <div class="menu-scroll-area">
             <div v-if="authStore.isAdmin || authStore.isDriver || authStore.isPromoter" class="sidebar-group">
-              <div class="group-label">GESTIÓN</div>
+              <div class="group-label">{{ t('menu.management') }}</div>
               <div v-if="authStore.isAdmin" class="sidebar-link" @click="navigateTo('/admin')">
                 <span class="material-icons">shield_person</span>
-                <span class="link-text">Panel Control</span>
+                <span class="link-text">{{ t('menu.adminPanel') }}</span>
               </div>
               <div v-if="authStore.isDriver && !authStore.isAdmin" class="sidebar-link" @click="navigateTo('/driver')">
                 <span class="material-icons">minor_crash</span>
-                <span class="link-text">Taxi Panel</span>
+                <span class="link-text">{{ t('menu.driverPanel') }}</span>
               </div>
             </div>
 
             <div v-if="!authStore.isAdmin" class="sidebar-group">
-              <div class="group-label">OPERACIONES</div>
+              <div class="group-label">{{ t('menu.operations') }}</div>
               <div class="sidebar-link" @click="navigateTo('/favorites')">
                 <span class="material-icons">favorite</span>
-                <span class="link-text">Favoritos</span>
+                <span class="link-text">{{ t('menu.favorites') }}</span>
               </div>
               <div class="sidebar-link" @click="toggleLanguage">
                 <span class="material-icons">translate</span>
-                <span class="link-text">{{ locale === 'es' ? 'English (EN)' : 'Español (ES)' }}</span>
+                <span class="link-text">{{ t('menu.translate') }}</span>
               </div>
             </div>
 
               <div class="sidebar-link theme-toggle-row" @click="themeStore.toggleDarkMode">
                 <span class="material-icons">{{ themeStore.isDarkMode ? 'light_mode' : 'dark_mode' }}</span>
-                <span class="link-text">{{ themeStore.isDarkMode ? 'Modo Claro' : 'Modo Oscuro' }}</span>
+                <span class="link-text">{{ themeStore.isDarkMode ? t('menu.lightMode') : t('menu.darkMode') }}</span>
               </div>
 
             <div v-if="!authStore.isAdmin" class="sidebar-group">
-              <div class="group-label">SOPORTE</div>
+              <div class="group-label">{{ t('menu.support') }}</div>
               <div class="sidebar-link report-link-solid" @click="openReportModal">
                 <span class="material-icons">report_problem</span>
-                <span class="link-text">Enviar Reporte</span>
+                <span class="link-text">{{ t('menu.sendReport') }}</span>
               </div>
             </div>
           </div>
 
           <div class="sidebar-footer-fixed">
             <button v-if="!authStore.isAuthenticated" class="session-btn login-solid" @click="navigateTo('/login')">
-                <span class="material-icons">login</span> INICIAR SESIÓN
+                <span class="material-icons">login</span> {{ t('menu.login') }}
             </button>
             <button v-else class="session-btn logout-solid" @click="handleLogout">
-                <span class="material-icons">logout</span> CERRAR SESIÓN
+                <span class="material-icons">logout</span> {{ t('menu.logout') }}
             </button>
             <div class="sibu-tag-footer">SIBU SYSTEM v1.2.0</div>
           </div>

frontend/src/components/ReportModal.vue

@@ -5,7 +5,7 @@
         <div class="modal-header">
           <div class="title-with-icon">
             <span class="material-icons report-icon">report_problem</span>
-            <h2>Enviar Reporte</h2>
+            <h2>{{ t('report.title') }}</h2>
           </div>
           <button class="close-btn" @click="close">
             <span class="material-icons">close</span>
@@ -13,11 +13,11 @@
         </div>
 
         <div class="modal-body">
-          <p class="instruction">Cuéntanos qué sucede o envíanos una sugerencia. El equipo administrativo revisará tu mensaje.</p>
+          <p class="instruction">{{ t('report.instruction') }}</p>
           
           <textarea 
             v-model="message" 
-            placeholder="Escribe tu mensaje aquí..."
+            :placeholder="t('report.placeholder')"
             class="report-textarea"
             :disabled="isSending"
           ></textarea>
@@ -27,19 +27,19 @@
           </div>
 
           <div v-if="success" class="success-message">
-            ¡Reporte enviado con éxito! Gracias por tu colaboración.
+            {{ t('report.success') }}
           </div>
         </div>
 
         <div class="modal-footer">
-          <button class="cancel-btn" @click="close" :disabled="isSending">Cancelar</button>
+          <button class="cancel-btn" @click="close" :disabled="isSending">{{ t('report.cancel') }}</button>
           <button 
             class="send-btn" 
             @click="handleSend" 
             :disabled="isSending || !message.trim() || success"
           >
             <span v-if="isSending" class="spinner-small"></span>
-            <span v-else>Enviar Reporte</span>
+            <span v-else>{{ t('report.send') }}</span>
           </button>
         </div>
       </div>
@@ -50,6 +50,9 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { reportsService } from '@/services/reportsService'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 
 defineProps<{
   isOpen: boolean
@@ -86,7 +89,7 @@ async function handleSend() {
       close()
     }, 2000)
   } catch (e) {
-    error.value = 'Hubo un error al enviar el reporte. Por favor, intenta de nuevo.'
+    error.value = t('report.error')
   } finally {
     isSending.value = false
   }

frontend/src/components/auth/LoginForm.vue

@@ -3,8 +3,10 @@ import { ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/auth'
 import { supabase } from '@/supabase'
+import { useI18n } from 'vue-i18n'
 
 const emit = defineEmits(['toggle'])
+const { t } = useI18n()
 
 const email = ref('')
 const password = ref('')
@@ -14,6 +16,7 @@ const errorMessage = ref('')
 const showPassword = ref(false)
 const router = useRouter()
 const authStore = useAuthStore()
+
 const handleLogin = async () => {
   isLoading.value = true
   errorMessage.value = ''
@@ -26,9 +29,9 @@ const handleLogin = async () => {
   } catch (error: any) {
     console.error('Error Login:', error)
     if (error.message?.includes('Invalid login credentials')) {
-      errorMessage.value = 'Correo o contraseña incorrectos.'
+      errorMessage.value = t('auth.invalidCreds')
     } else {
-      errorMessage.value = `Error: ${error.message || 'Error desconocido.'}`
+      errorMessage.value = `${t('common.error')}: ${error.message || t('common.noData')}`
     }
   } finally {
     isLoading.value = false
@@ -59,7 +62,7 @@ const handleGoogleLogin = async () => {
     // Se redirige automáticamente
   } catch (error: any) {
     console.error('Error Google Login:', error)
-    errorMessage.value = `Error con Google: ${error.message || 'Error desconocido'}`
+    errorMessage.value = `Error Google: ${error.message || t('common.error')}`
   } finally {
     isLoading.value = false
   }
@@ -76,12 +79,12 @@ const handleGoogleLogin = async () => {
       @click="handleGoogleLogin"
     >
       <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" width="20" height="20" alt="Google" />
-      <span>Continuar con Google</span>
+      <span>{{ t('auth.googleLogin') }}</span>
     </button>
 
     <div class="divider">
       <span class="divider-line"></span>
-      <span class="divider-text">o con correo</span>
+      <span class="divider-text">{{ t('auth.orEmail') }}</span>
       <span class="divider-line"></span>
     </div>
 
@@ -89,14 +92,14 @@ const handleGoogleLogin = async () => {
     <form @submit.prevent="handleLogin">
       <!-- Email -->
       <div class="field">
-        <label class="field-label" for="login-email">Correo electrónico</label>
+        <label class="field-label" for="login-email">{{ t('auth.emailLabel') }}</label>
         <div class="input-wrap">
           <span class="material-icons input-icon">alternate_email</span>
           <input
             id="login-email"
             type="email"
             v-model="email"
-            placeholder="tu@correo.com"
+            :placeholder="t('auth.emailPlaceholder')"
             required
             autocomplete="email"
             class="field-input"
@@ -106,7 +109,7 @@ const handleGoogleLogin = async () => {
 
       <!-- Contraseña -->
       <div class="field">
-        <label class="field-label" for="login-password">Contraseña</label>
+        <label class="field-label" for="login-password">{{ t('auth.passLabel') }}</label>
         <div class="input-wrap">
           <span class="material-icons input-icon">lock</span>
           <input
@@ -135,7 +138,7 @@ const handleGoogleLogin = async () => {
         <span class="keep-box" :class="{ 'keep-box--on': keepSession }">
           <span v-if="keepSession" class="material-icons keep-check">check</span>
         </span>
-        <span class="keep-label">Mantener sesión iniciada</span>
+        <span class="keep-label">{{ t('auth.keepSession') }}</span>
       </label>
 
       <!-- Error -->
@@ -147,14 +150,14 @@ const handleGoogleLogin = async () => {
       <!-- Botón enviar -->
       <button type="submit" class="submit-btn" :disabled="isLoading">
         <span v-if="isLoading" class="btn-spinner"></span>
-        <span>{{ isLoading ? 'Ingresando...' : 'Iniciar Sesión' }}</span>
+        <span>{{ isLoading ? t('auth.loggingIn') : t('auth.loginTab') }}</span>
       </button>
     </form>
 
     <!-- Switch a registro -->
     <p class="switch-text">
-      ¿No tienes cuenta?
+      {{ t('auth.noAccount') }}
-      <button type="button" class="switch-link" @click="emit('toggle')">Regístrate aquí</button>
+      <button type="button" class="switch-link" @click="emit('toggle')">{{ t('auth.registerHere') }}</button>
     </p>
   </div>
 </template>

frontend/src/components/auth/RegisterForm.vue

@@ -4,8 +4,10 @@ import { useRouter } from 'vue-router'
 import { supabase } from '@/supabase'
 import { useAuthStore } from '@/stores/auth'
 import { analyticsService } from '@/services/analyticsService'
+import { useI18n } from 'vue-i18n'
 
 const emit = defineEmits(['toggle', 'success'])
+const { t } = useI18n()
 
 const router = useRouter()
 const authStore = useAuthStore()
@@ -13,6 +15,7 @@ const authStore = useAuthStore()
 const fullName = ref('')
 const email = ref('')
 const password = ref('')
+const autoLocation = ref(false)
 const isLoading = ref(false)
 const errorMessage = ref('')
 const successMessage = ref('')
@@ -26,14 +29,14 @@ const handleRegister = async () => {
     const cleanEmail = email.value.trim().toLowerCase()
     const cleanPass = password.value
 
-    await authStore.register(cleanEmail, cleanPass, fullName.value.trim())
+    await authStore.register(cleanEmail, cleanPass, fullName.value.trim(), autoLocation.value)
 
     analyticsService.logEvent({
       event_name: 'sign_up',
       properties: { method: 'email' }
     })
 
-    successMessage.value = '¡Cuenta creada con éxito!'
+    successMessage.value = t('auth.successTitle')
 
     // Delay navigation so user can see the success card
     setTimeout(() => {
@@ -43,9 +46,9 @@ const handleRegister = async () => {
   } catch (error: any) {
     console.error('Error detallado de registro:', error)
     if (error.message?.includes('User already registered') || error.message?.includes('already exists')) {
-      errorMessage.value = 'El correo ya está registrado.'
+      errorMessage.value = t('auth.emailRegistered')
     } else {
-      errorMessage.value = `Error: ${error.message || 'Error desconocido'}`
+      errorMessage.value = `${t('common.error')}: ${error.message || t('common.noData')}`
     }
   } finally {
     isLoading.value = false
@@ -75,7 +78,7 @@ const handleGoogleRegister = async () => {
     // Redirect happens automatically
   } catch (error: any) {
     console.error('Error Google Register:', error)
-    errorMessage.value = `Error con Google: ${error.message || 'Intenta de nuevo'}`
+    errorMessage.value = `Error Google: ${error.message || t('common.error')}`
   } finally {
     isLoading.value = false
   }
@@ -88,7 +91,7 @@ const handleGoogleRegister = async () => {
     <!-- Éxito -->
     <div v-if="successMessage" class="success-card">
       <span class="material-icons success-icon">check_circle</span>
-      <h3 class="success-title">¡Registro exitoso!</h3>
+      <h3 class="success-title">{{ t('auth.successTitle') }}</h3>
       <p class="success-desc">{{ successMessage }}</p>
     </div>
 
@@ -103,12 +106,12 @@ const handleGoogleRegister = async () => {
         @click="handleGoogleRegister"
       >
         <img src="https://www.gstatic.com/firebasejs/ui/2.0.0/images/auth/google.svg" width="20" height="20" alt="Google" />
-        <span>Registrarse con Google</span>
+        <span>{{ t('auth.googleRegister') }}</span>
       </button>
 
       <div class="divider">
         <span class="divider-line"></span>
-        <span class="divider-text">o con correo</span>
+        <span class="divider-text">{{ t('auth.orEmail') }}</span>
         <span class="divider-line"></span>
       </div>
 
@@ -116,14 +119,14 @@ const handleGoogleRegister = async () => {
 
       <!-- Nombre -->
       <div class="field">
-        <label class="field-label" for="reg-name">Nombre completo</label>
+        <label class="field-label" for="reg-name">{{ t('auth.fullNameLabel') }}</label>
         <div class="input-wrap">
           <span class="material-icons input-icon">person</span>
           <input
             id="reg-name"
             type="text"
             v-model="fullName"
-            placeholder="Tu nombre"
+            :placeholder="t('auth.fullNamePlaceholder')"
             required
             autocomplete="name"
             class="field-input"
@@ -133,14 +136,14 @@ const handleGoogleRegister = async () => {
 
       <!-- Email -->
       <div class="field">
-        <label class="field-label" for="reg-email">Correo electrónico</label>
+        <label class="field-label" for="reg-email">{{ t('auth.emailLabel') }}</label>
         <div class="input-wrap">
           <span class="material-icons input-icon">alternate_email</span>
           <input
             id="reg-email"
             type="email"
             v-model="email"
-            placeholder="tu@correo.com"
+            :placeholder="t('auth.emailPlaceholder')"
             required
             autocomplete="email"
             class="field-input"
@@ -150,14 +153,14 @@ const handleGoogleRegister = async () => {
 
       <!-- Contraseña -->
       <div class="field">
-        <label class="field-label" for="reg-password">Contraseña</label>
+        <label class="field-label" for="reg-password">{{ t('auth.passLabel') }}</label>
         <div class="input-wrap">
           <span class="material-icons input-icon">lock</span>
           <input
             id="reg-password"
             :type="showPassword ? 'text' : 'password'"
             v-model="password"
-            placeholder="Mínimo 8 caracteres"
+            :placeholder="t('auth.passMin8')"
             required
             minlength="8"
             autocomplete="new-password"
@@ -174,6 +177,15 @@ const handleGoogleRegister = async () => {
         </div>
       </div>
 
+      <!-- Ubicación Inteligente -->
+      <label class="keep-session">
+        <input type="checkbox" v-model="autoLocation" class="keep-checkbox" />
+        <span class="keep-box" :class="{ 'keep-box--on': autoLocation }">
+          <span v-if="autoLocation" class="material-icons keep-check">check</span>
+        </span>
+        <span class="keep-label">{{ t('auth.smartLocation') }}</span>
+      </label>
+
       <!-- Error -->
       <p v-if="errorMessage" class="error-msg">
         <span class="material-icons error-icon">error_outline</span>
@@ -183,14 +195,14 @@ const handleGoogleRegister = async () => {
       <!-- Botón enviar -->
       <button type="submit" class="submit-btn" :disabled="isLoading">
         <span v-if="isLoading" class="btn-spinner"></span>
-        <span>{{ isLoading ? 'Creando cuenta...' : 'Crear Cuenta' }}</span>
+        <span>{{ isLoading ? t('auth.creatingAccount') : t('auth.registerTab') }}</span>
       </button>
     </form>
 
     <!-- Switch a login -->
     <p class="switch-text">
-      ¿Ya tienes cuenta?
+      {{ t('auth.hasAccount') }}
-      <button type="button" class="switch-link" @click="emit('toggle')">Inicia sesión</button>
+      <button type="button" class="switch-link" @click="emit('toggle')">{{ t('auth.loginHere') }}</button>
     </p>
 
     </template>
@@ -441,4 +453,45 @@ const handleGoogleRegister = async () => {
   text-decoration: underline;
   text-underline-offset: 2px;
 }
+
+/* Mantener sesión (reutilizado para Smart Location) */
+.keep-session {
+  display: flex;
+  align-items: center;
+  gap: 0.625rem;
+  cursor: pointer;
+  margin-top: 0.25rem;
+}
+
+.keep-checkbox {
+  display: none;
+}
+
+.keep-box {
+  width: 1.125rem;
+  height: 1.125rem;
+  border: 1.5px solid var(--border-color);
+  border-radius: 0.375rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  transition: background 0.15s, border-color 0.15s;
+}
+
+.keep-box--on {
+  background: var(--active-color);
+  border-color: var(--active-color);
+}
+
+.keep-check {
+  font-size: 0.875rem;
+  color: #101820;
+}
+
+.keep-label {
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--text-secondary);
+}
 </style>

frontend/src/i18n/locales/en.json

@@ -5,7 +5,11 @@
     "noData": "No data available",
     "select": "Select",
     "clear": "Clear",
-    "clearSelection": "Clear selection"
+    "clearSelection": "Clear selection",
+    "notAvailable": "Not available",
+    "back": "Back",
+    "all": "All",
+    "retry": "Retry"
   },
   "navigation": {
     "map": "Map",
@@ -17,6 +21,24 @@
     "discover": "Discover",
     "profile": "Profile"
   },
+  "menu": {
+    "management": "MANAGEMENT",
+    "adminPanel": "Admin Panel",
+    "driverPanel": "Driver Panel",
+    "operations": "OPERATIONS",
+    "favorites": "Favorites",
+    "support": "SUPPORT",
+    "sendReport": "Send Report",
+    "login": "LOGIN",
+    "logout": "LOGOUT",
+    "welcome": "HELLO,",
+    "guest": "GUEST",
+    "lightMode": "Light Mode",
+    "darkMode": "Dark Mode",
+    "translate": "Español (ES)",
+    "admin": "ADMIN",
+    "driver": "DRIVER"
+  },
   "favorites": {
     "title": "My Favorites",
     "subtitle": "Save your favorite routes, taxis, and businesses for quick access.",
@@ -27,22 +49,31 @@
     "viewSchedules": "Tap to view schedules",
     "tabs": {
       "routes": "Routes",
-      "taxis": "Taxis",
+      "taxis": "Transport",
       "businesses": "Businesses",
-      "coupons": "Offers"
+      "coupons": "Events"
     },
     "empty": {
+      "title": "Nothing saved yet",
+      "subtitle": "You don't have any favorites yet",
+      "description": "Explore routes, taxis, and businesses to save your favorites here",
       "routes": "You don't have any saved favorite routes.",
       "taxis": "You don't have any saved favorite taxis.",
       "businesses": "You don't have any saved favorite businesses.",
-      "coupons": "You don't have any saved favorite offers."
+      "coupons": "You don't have any saved favorite events.",
+      "noResultsCategory": "You don't have favorites in this category"
     },
     "cta": {
+      "exploreNow": "Explore now",
       "routes": "Explore Routes",
       "taxis": "View Directory",
       "businesses": "Discover Businesses",
-      "coupons": "View Offers"
+      "coupons": "View Events"
-    }
+    },
+    "count": "{count} saved | {count} saved",
+    "removeTitle": "Remove from favorites",
+    "availability": "Check availability",
+    "details": "View details →"
   },
   "header": {
     "title": "SIBU",
@@ -63,7 +94,15 @@
     "selectRoute": "Select a route",
     "route": "Route",
     "stops": "stops",
-    "stop": "stop"
+    "stop": "stop",
+    "calculatingRoute": "Calculating real route...",
+    "viewRoutes": "view routes",
+    "arrivalTime": "Arrival time",
+    "availableRoutes": "Available Routes",
+    "busRoute": "Bus Route",
+    "showMyLocation": "Show my location",
+    "promo": "PROMO",
+    "search": "Search"
   },
   "schedules": {
     "title": "Schedules",
@@ -77,6 +116,12 @@
     "schedules": "schedules",
     "schedule": "schedule",
     "departureTime": "Departure time",
+    "today": "Today",
+    "tomorrow": "Tomorrow",
+    "loading": "Loading schedules...",
+    "viewAll": "View all schedules",
+    "departing": "DEPARTING",
+    "daily": "Daily",
     "types": {
       "weekday": "Weekday",
       "weekend": "Weekend",
@@ -87,19 +132,23 @@
     "title": "Offers",
     "loadingCoupons": "Loading offers...",
     "noCouponsAvailable": "No offers available",
+    "noResults": "No results found for your search.",
     "off": "OFF",
     "searchPlaceholder": "Search offers...",
     "filterByCategory": "Filter by category",
     "apply": "Apply",
     "offerDetails": "Offer Details",
     "description": "Description",
+    "noDescription": "No additional description.",
     "validity": "Validity",
     "category": "Category",
     "viewLocation": "View location",
     "validUntil": "Valid until",
     "tomorrow": "Tomorrow",
     "active": "Active",
-    "offersCount": "{count} offer | {count} offers"
+    "offersCount": "{count} offer | {count} offers",
+    "viewDetails": "View details",
+    "restaurant": "Restaurant"
   },
   "taxi": {
     "title": "Transport Hub",
@@ -115,7 +164,8 @@
     "allZones": "All zones",
     "dayShift": "Day",
     "afternoonShift": "Afternoon",
-    "nightShift": "Night"
+    "nightShift": "Night",
+    "errorLoading": "Error loading transport section"
   },
   "shuttle": {
     "title": "Tourist Trips & Shuttles",
@@ -128,9 +178,21 @@
     "filterRoute": "Filter by route",
     "allRoutes": "All routes",
     "tripType": "Trip type",
-    "oneWay": "Outbound",
+    "oneWay": "One way",
-    "roundTrip": "Return",
+    "roundTrip": "Round trip",
-    "both": "Both"
+    "both": "Both",
+    "detailTitle": "Trip Detail",
+    "origin": "Origin",
+    "destination": "Destination",
+    "departureTimes": "Departure Times",
+    "languages": "Languages",
+    "pricePerPerson": "Price per passenger",
+    "private": "Private",
+    "bookingInfo": "Booking & Information",
+    "contactOperator": "Contact the operator directly to confirm availability.",
+    "bookWhatsapp": "Book via WhatsApp",
+    "callOperator": "Call Operator",
+    "errorLoading": "Could not load trip information"
   },
   "busStop": {
     "loadingDetails": "Loading bus stop details...",
@@ -140,14 +202,149 @@
     "accessible": "Accessible"
   },
   "discover": {
-    "title": "Discover",
+    "title": "Explore Chiriquí! 🌿",
-    "subtitle": "Explore the best places in Chiriqui",
+    "subtitle": "Discover the best places near you",
-    "searchPlaceholder": "Explore the best places in Chiriqui",
+    "searchPlaceholder": "Search restaurants, hotels...",
     "filterLabel": "Filter by area:",
     "allAreas": "All",
-    "loading": "Searching for treasures...",
+    "loading": "Loading places...",
-    "empty": "No places found in this area yet.",
+    "error": "Could not load places. Check your connection.",
+    "empty": "No places yet",
+    "emptyDesc": "Business and tourist places will be available here soon.",
+    "noResults": "No results",
+    "noResultsDesc": "We couldn't find any places matching that filter.",
+    "viewAll": "View all places",
     "exploreMore": "Explore Place",
-    "tourism": "Tourism"
+    "tourism": "Tourism",
+    "results": "{count} place | {count} places",
+    "in": "in",
+    "lookingMore": "Looking for something else?",
+    "exploreWithoutFilters": "Explore without filters to discover everything",
+    "sections": {
+      "byArea": "🗺️ By Area",
+      "featured": "✨ Featured",
+      "allPlaces": "🏙️ All places"
+    },
+    "categories": {
+      "all": "All",
+      "restaurant": "Restaurant",
+      "hotel": "Hotel",
+      "cafe": "Cafe",
+      "commerce": "Commerce",
+      "tourism": "Tourism",
+      "drinks": "Drinks"
+    }
+  },
+  "business": {
+    "detailsTitle": "Explore Our History For Refined Cuisine And A Timeless Atmosphere",
+    "detailsDescription": "Our story is one of growth, exploration, and unforgettable culinary memories, where each chapter is served with elegance.",
+    "timelessHeritage": "Timeless Heritage",
+    "timelessHeritageDesc": "Signature dishes that evolve with local inspiration and culture.",
+    "worldClassDishes": "World Class Dishes",
+    "worldClassDishesDesc": "Gastronomic experience designed to delight the most demanding senses.",
+    "emotionElegance": "Emotion and Elegance",
+    "emotionEleganceDesc": "Evenings enhanced by the timeless charm of an exclusive atmosphere.",
+    "unmatchedExperience": "Unmatched Experience",
+    "unmatchedExperienceDesc": "Personalized service from a dedicated host for your comfort.",
+    "address": "Address",
+    "contact": "Contact",
+    "socialMedia": "Social Media",
+    "availableOffers": "Available Offers",
+    "viewBusiness": "View Business",
+    "loadingPremium": "Loading premium experience..."
+  },
+  "profile": {
+    "title": "Profile",
+    "myCoupons": "My Coupons",
+    "emptyCoupons": "You don't have any coupons",
+    "exploreOffers": "Explore the benefits we have for you for using SIBU.",
+    "viewOffers": "View Offers",
+    "viewCode": "View Code",
+    "usedAt": "Used on:",
+    "claimedAt": "Claimed on:",
+    "editProfile": "Edit Profile",
+    "photoOptional": "Optional photo",
+    "nameLabel": "Full Name",
+    "namePlaceholder": "Your name",
+    "passwordOptional": "New Password (Optional)",
+    "passwordPlaceholder": "Minimum 6 characters",
+    "passwordHint": "Leave blank if you don't want to change it.",
+    "cancel": "Cancel",
+    "save": "Save Changes",
+    "saving": "Saving...",
+    "qrTitle": "Discount Coupon",
+    "qrCode": "REDEMPTION CODE",
+    "qrInstructions": "Show this code to the establishment manager to validate your promotion.",
+    "understood": "Understood",
+    "pending": "Pending",
+    "redeemed": "Redeemed",
+    "expired": "Expired",
+    "updateSuccess": "Profile updated successfully",
+    "updateError": "Update error:",
+    "user": "User",
+    "logoutTitle": "Logout"
+  },
+  "auth": {
+    "back": "Back",
+    "brandingSubtitle": "Public Transport System",
+    "loginTab": "Login",
+    "registerTab": "Create Account",
+    "sessionExpired": "Your session has expired. Please log in again.",
+    "footer": "SIBU © 2026 • Chiriquí Transport System",
+    "googleLogin": "Continue with Google",
+    "googleRegister": "Sign up with Google",
+    "orEmail": "or with email",
+    "emailLabel": "Email address",
+    "emailPlaceholder": "you@email.com",
+    "passLabel": "Password",
+    "keepSession": "Keep me logged in",
+    "loggingIn": "Logging in...",
+    "creatingAccount": "Creating account...",
+    "noAccount": "Don't have an account?",
+    "registerHere": "Register here",
+    "hasAccount": "Already have an account?",
+    "loginHere": "Login",
+    "successTitle": "Successful registration!",
+    "fullNameLabel": "Full name",
+    "fullNamePlaceholder": "Your name",
+    "passMin8": "Minimum 8 characters",
+    "smartLocation": "Allow to detect my location automatically (Smart Location)",
+    "emailRegistered": "Email is already registered.",
+    "invalidCreds": "Incorrect email or password."
+  },
+  "routesView": {
+    "title": "Transport",
+    "busTab": "Bus Routes",
+    "taxiTab": "Local Taxis",
+    "originPlaceholder": "Origin City",
+    "destPlaceholder": "Destination City",
+    "searchBtn": "Search Routes",
+    "allCorregimientos": "All corregimientos",
+    "english": "English",
+    "availableRoutes": "Available Routes",
+    "recommendedDrivers": "Recommended Drivers",
+    "active": "ACTIVE",
+    "minutes": "min",
+    "km": "km",
+    "findSchedules": "View Schedules",
+    "contact": "Contact",
+    "noTaxis": "No taxis available in this area.",
+    "noRoutes": "No routes found for your search."
+  },
+  "splash": {
+    "subtitle": "Boquete Public Transport",
+    "starting": "Starting SIBU...",
+    "offline": "Starting offline mode...",
+    "verifying": "Verifying data...",
+    "ready": "Ready to use"
+  },
+  "report": {
+    "title": "Send Report",
+    "instruction": "Tell us what's happening or send us a suggestion. The administrative team will review your message.",
+    "placeholder": "Write your message here...",
+    "success": "Report sent successfully! Thanks for your collaboration.",
+    "error": "There was an error sending the report. Please try again.",
+    "cancel": "Cancel",
+    "send": "Send Report"
   }
 }

frontend/src/i18n/locales/es.json

@@ -5,7 +5,11 @@
     "noData": "No hay datos disponibles",
     "select": "Seleccionar",
     "clear": "Limpiar",
-    "clearSelection": "Limpiar selección"
+    "clearSelection": "Limpiar selección",
+    "notAvailable": "No disponible",
+    "back": "Volver",
+    "all": "Todos",
+    "retry": "Reintentar"
   },
   "navigation": {
     "map": "Mapa",
@@ -17,6 +21,24 @@
     "discover": "Descubrir",
     "profile": "Perfil"
   },
+  "menu": {
+    "management": "GESTIÓN",
+    "adminPanel": "Panel Administración",
+    "driverPanel": "Panel de Conductores",
+    "operations": "OPERACIONES",
+    "favorites": "Favoritos",
+    "support": "SOPORTE",
+    "sendReport": "Enviar Reporte",
+    "login": "INICIAR SESIÓN",
+    "logout": "CERRAR SESIÓN",
+    "welcome": "HOLA,",
+    "guest": "INVITADO",
+    "lightMode": "Modo Claro",
+    "darkMode": "Modo Oscuro",
+    "translate": "Translate (EN)",
+    "admin": "ADMIN",
+    "driver": "CONDUCTOR"
+  },
   "favorites": {
     "title": "Mis Favoritos",
     "subtitle": "Guarda tus rutas, taxis y negocios preferidos para acceder rápido.",
@@ -32,18 +54,26 @@
       "coupons": "Eventos"
     },
     "empty": {
+      "title": "Nada guardado aún",
       "subtitle": "Aún no tienes favoritos",
+      "description": "Explora rutas, taxis y negocios para guardar tus favoritos aquí",
       "routes": "No tienes rutas favoritas guardadas.",
       "taxis": "No tienes taxis favoritos guardados.",
       "businesses": "No tienes negocios favoritos guardados.",
-      "coupons": "No tienes eventos favoritos guardados."
+      "coupons": "No tienes eventos favoritos guardados.",
+      "noResultsCategory": "No tienes favoritos en esta categoría"
     },
     "cta": {
+      "exploreNow": "Explorar ahora",
       "routes": "Explorar Rutas",
       "taxis": "Ver Directorio",
       "businesses": "Descubrir Negocios",
       "coupons": "Ver Eventos"
-    }
+    },
+    "count": "{count} guardado | {count} guardados",
+    "removeTitle": "Quitar de favoritos",
+    "availability": "Ver disponibilidad",
+    "details": "Ver detalles →"
   },
   "header": {
     "title": "SIBU",
@@ -64,7 +94,15 @@
     "selectRoute": "Seleccionar una ruta",
     "route": "Ruta",
     "stops": "paradas",
-    "stop": "parada"
+    "stop": "parada",
+    "calculatingRoute": "Calculando ruta real...",
+    "viewRoutes": "ver rutas",
+    "arrivalTime": "Tiempo de llegada",
+    "availableRoutes": "Rutas Disponibles",
+    "busRoute": "Ruta de Autobús",
+    "showMyLocation": "Mostrar mi ubicación",
+    "promo": "PROMO",
+    "search": "Buscar"
   },
   "schedules": {
     "title": "Horarios",
@@ -78,6 +116,12 @@
     "schedules": "horarios",
     "schedule": "horario",
     "departureTime": "Hora de salida",
+    "today": "Hoy",
+    "tomorrow": "Mañana",
+    "loading": "Cargando horarios...",
+    "viewAll": "Ver todos los horarios",
+    "departing": "SALIENDO",
+    "daily": "Diario",
     "types": {
       "weekday": "Entre semana",
       "weekend": "Fin de semana",
@@ -88,19 +132,23 @@
     "title": "Ofertas",
     "loadingCoupons": "Cargando ofertas...",
     "noCouponsAvailable": "No hay ofertas disponibles",
+    "noResults": "No se encontraron resultados para tu búsqueda.",
     "off": "DESCUENTO",
     "searchPlaceholder": "Buscar ofertas...",
     "filterByCategory": "Filtrar por categoría",
     "apply": "Aplicar",
     "offerDetails": "Detalles de la Oferta",
     "description": "Descripción",
+    "noDescription": "Sin descripción adicional.",
     "validity": "Validez",
     "category": "Categoría",
     "viewLocation": "Ver ubicación",
     "validUntil": "Válido hasta",
     "tomorrow": "Mañana",
     "active": "Activo",
-    "offersCount": "{count} oferta | {count} ofertas"
+    "offersCount": "{count} oferta | {count} ofertas",
+    "viewDetails": "Ver detalles",
+    "restaurant": "Restaurante"
   },
   "taxi": {
     "title": "Centro de Transporte",
@@ -116,7 +164,8 @@
     "allZones": "Todas las zonas",
     "dayShift": "Día",
     "afternoonShift": "Tarde",
-    "nightShift": "Noche"
+    "nightShift": "Noche",
+    "errorLoading": "Error al cargar la sección de transporte"
   },
   "shuttle": {
     "title": "Viajes Turísticos & Shuttles",
@@ -131,7 +180,19 @@
     "tripType": "Tipo de viaje",
     "oneWay": "Ida",
     "roundTrip": "Vuelta",
-    "both": "Ambos"
+    "both": "Ambos",
+    "detailTitle": "Detalle del viaje",
+    "origin": "Origen",
+    "destination": "Destino",
+    "departureTimes": "Horas de salida",
+    "languages": "Idiomas",
+    "pricePerPerson": "Precio por pasajero",
+    "private": "Privado",
+    "bookingInfo": "Reserva e Información",
+    "contactOperator": "Contacta directamente al operador para confirmar disponibilidad.",
+    "bookWhatsapp": "Reservar por WhatsApp",
+    "callOperator": "Llamar al Operador",
+    "errorLoading": "No se pudo cargar la información del viaje"
   },
   "busStop": {
     "loadingDetails": "Cargando detalles de la parada...",
@@ -141,14 +202,149 @@
     "accessible": "Accesible"
   },
   "discover": {
-    "title": "Descubrir",
+    "title": "¡Explora Chiriquí! 🌿",
-    "subtitle": "Explora los mejores lugares de Chiriquí",
+    "subtitle": "Descubre los mejores lugares cerca de ti",
-    "searchPlaceholder": "Explora los mejores lugares en Chiriquí",
+    "searchPlaceholder": "Buscar restaurantes, hoteles...",
     "filterLabel": "Filtrar por área:",
     "allAreas": "Todas",
-    "loading": "Buscando tesoros...",
+    "loading": "Cargando lugares...",
-    "empty": "No se encontraron lugares en esta área todavía.",
+    "error": "No se pudieron cargar los lugares. Revisa tu conexión.",
+    "empty": "No hay lugares aún",
+    "emptyDesc": "Pronto habrá negocios y lugares turísticos disponibles aquí.",
+    "noResults": "Sin resultados",
+    "noResultsDesc": "No encontramos lugares con ese filtro.",
+    "viewAll": "Ver todos los lugares",
     "exploreMore": "Explorar Lugar",
-    "tourism": "Turismo"
+    "tourism": "Turismo",
+    "results": "{count} lugar | {count} lugares",
+    "in": "en",
+    "lookingMore": "¿Buscas algo más?",
+    "exploreWithoutFilters": "Explora sin filtros para descubrir todo",
+    "sections": {
+      "byArea": "🗺️ Por Área",
+      "featured": "✨ Destacados",
+      "allPlaces": "🏙️ Todos los lugares"
+    },
+    "categories": {
+      "all": "Todas",
+      "restaurant": "Restaurante",
+      "hotel": "Hotel",
+      "cafe": "Café",
+      "commerce": "Comercio",
+      "tourism": "Turismo",
+      "drinks": "Bebidas"
+    }
+  },
+  "business": {
+    "detailsTitle": "Explora Nuestra Historia Para Una Cocina Refinada Y Un Ambiente Atemporal",
+    "detailsDescription": "Nuestra historia es una de crecimiento, exploración y recuerdos culinarios inflamables, donde cada capítulo se sirve con elegancia.",
+    "timelessHeritage": "Herencia Atemporal",
+    "timelessHeritageDesc": "Platos de autor que evolucionan con inspiración y cultura local.",
+    "worldClassDishes": "Platos de Clase Mundial",
+    "worldClassDishesDesc": "Experiencia gastronómica diseñada para deleitar los sentidos más exigentes.",
+    "emotionElegance": "Emoción y Elegancia",
+    "emotionEleganceDesc": "Veladas realzadas por el encanto atemporal de un ambiente exclusivo.",
+    "unmatchedExperience": "Experiencia Inigualable",
+    "unmatchedExperienceDesc": "Servicio personalizado desde un anfitrión dedicado para tu comodidad.",
+    "address": "Dirección",
+    "contact": "Contacto",
+    "socialMedia": "Redes Sociales",
+    "availableOffers": "Ofertas Disponibles",
+    "viewBusiness": "Ver Negocio",
+    "loadingPremium": "Cargando experiencia premium..."
+  },
+  "profile": {
+    "title": "Perfil",
+    "myCoupons": "Mis Cupones",
+    "emptyCoupons": "No tienes cupones",
+    "exploreOffers": "Explora los beneficios que tenemos para ti por usar SIBU.",
+    "viewOffers": "Ver Ofertas",
+    "viewCode": "Ver Código",
+    "usedAt": "Usado el:",
+    "claimedAt": "Reclamado el:",
+    "editProfile": "Editar Perfil",
+    "photoOptional": "Foto opcional",
+    "nameLabel": "Nombre Completo",
+    "namePlaceholder": "Tu nombre",
+    "passwordOptional": "Nueva Contraseña (Opcional)",
+    "passwordPlaceholder": "Mínimo 6 caracteres",
+    "passwordHint": "Déjalo en blanco si no quieres cambiarla.",
+    "cancel": "Cancelar",
+    "save": "Guardar Cambios",
+    "saving": "Guardando...",
+    "qrTitle": "Cupón de Descuento",
+    "qrCode": "CÓDIGO DE REDENCIÓN",
+    "qrInstructions": "Muestra este código al encargado del establecimiento para validar tu promoción.",
+    "understood": "Entendido",
+    "pending": "Pendiente",
+    "redeemed": "Canjeado",
+    "expired": "Vencido",
+    "updateSuccess": "Perfil actualizado correctamente",
+    "updateError": "Error al actualizar:",
+    "user": "Usuario",
+    "logoutTitle": "Cerrar Sesión"
+  },
+  "auth": {
+    "back": "Volver",
+    "brandingSubtitle": "Sistema de Transporte Público",
+    "loginTab": "Iniciar Sesión",
+    "registerTab": "Crear Cuenta",
+    "sessionExpired": "Tu sesión ha expirado. Por favor, inicia sesión nuevamente.",
+    "footer": "SIBU © 2026 • Sistema de Transporte de Chiriquí",
+    "googleLogin": "Continuar con Google",
+    "googleRegister": "Registrarse con Google",
+    "orEmail": "o con correo",
+    "emailLabel": "Correo electrónico",
+    "emailPlaceholder": "tu@correo.com",
+    "passLabel": "Contraseña",
+    "keepSession": "Mantener sesión iniciada",
+    "loggingIn": "Ingresando...",
+    "creatingAccount": "Creando cuenta...",
+    "noAccount": "¿No tienes cuenta?",
+    "registerHere": "Regístrate aquí",
+    "hasAccount": "¿Ya tienes cuenta?",
+    "loginHere": "Inicia sesión",
+    "successTitle": "¡Registro exitoso!",
+    "fullNameLabel": "Nombre completo",
+    "fullNamePlaceholder": "Tu nombre",
+    "passMin8": "Mínimo 8 caracteres",
+    "smartLocation": "Permitir detectar mi ubicación automáticamente (Smart Location)",
+    "emailRegistered": "El correo ya está registrado.",
+    "invalidCreds": "Correo o contraseña incorrectos."
+  },
+  "routesView": {
+    "title": "Transporte",
+    "busTab": "Rutas de Bus",
+    "taxiTab": "Taxis Locales",
+    "originPlaceholder": "Ciudad de Origen",
+    "destPlaceholder": "Ciudad de Destino",
+    "searchBtn": "Buscar Rutas",
+    "allCorregimientos": "Todos los corregimientos",
+    "english": "Inglés",
+    "availableRoutes": "Rutas Disponibles",
+    "recommendedDrivers": "Conductores Recomendados",
+    "active": "ACTIVA",
+    "minutes": "min",
+    "km": "km",
+    "findSchedules": "Ver Horarios",
+    "contact": "Contactar",
+    "noTaxis": "No hay taxis disponibles en esta zona.",
+    "noRoutes": "No se encontraron rutas para tu búsqueda."
+  },
+  "splash": {
+    "subtitle": "Transporte Público Boquete",
+    "starting": "Iniciando SIBU...",
+    "offline": "Iniciando modo sin conexión...",
+    "verifying": "Verificando datos...",
+    "ready": "Listo para usar"
+  },
+  "report": {
+    "title": "Enviar Reporte",
+    "instruction": "Cuéntanos qué sucede o envíanos una sugerencia. El equipo administrativo revisará tu mensaje.",
+    "placeholder": "Escribe tu mensaje aquí...",
+    "success": "¡Reporte enviado con éxito! Gracias por tu colaboración.",
+    "error": "Hubo un error al enviar el reporte. Por favor, intenta de nuevo.",
+    "cancel": "Cancelar",
+    "send": "Enviar Reporte"
   }
 }

frontend/src/stores/auth.ts

@@ -51,7 +51,7 @@ export const useAuthStore = defineStore('auth', () => {
         }
     }
 
-    async function register(email: string, pass: string, fullName: string) {
+    async function register(email: string, pass: string, fullName: string, autoLocation: boolean = false) {
         console.log('Realizando signUp en Supabase...')
         const { data, error } = await supabase.auth.signUp({
             email,
@@ -59,7 +59,8 @@ export const useAuthStore = defineStore('auth', () => {
             options: {
                 data: {
                     full_name: fullName,
-                    role: 'PASSENGER'
+                    role: 'PASSENGER',
+                    auto_location: autoLocation
                 }
             }
         })
@@ -100,6 +101,21 @@ export const useAuthStore = defineStore('auth', () => {
         window.location.replace('/login')
     }
 
+    async function updateProfile(updates: any) {
+        if (!userSession.value?.user?.id) return
+
+        const { error } = await supabase
+            .from('users')
+            .update(updates)
+            .eq('id', userSession.value.user.id)
+
+        if (!error) {
+            userProfile.value = { ...userProfile.value, ...updates }
+        } else {
+            console.error('SIBU | Error al actualizar perfil:', error)
+        }
+    }
+
     return {
         userSession,
         userProfile,
@@ -112,6 +128,7 @@ export const useAuthStore = defineStore('auth', () => {
         isPassenger,
         login,
         register,
-        logout
+        logout,
+        updateProfile
     }
 })

frontend/src/views/AuthView.vue

@@ -2,6 +2,9 @@
 import { ref, onMounted } from 'vue'
 import { useRouter, useRoute } from 'vue-router'
 import { defineAsyncComponent } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+const { t } = useI18n()
 const LoginForm = defineAsyncComponent(() => import('@/components/auth/LoginForm.vue'))
 const RegisterForm = defineAsyncComponent(() => import('@/components/auth/RegisterForm.vue'))
 
@@ -14,7 +17,7 @@ const sessionExpiredMessage = ref('')
 // Detectar si fue redirigido por sesión expirada
 onMounted(() => {
   if (route.query.reason === 'session_expired') {
-    sessionExpiredMessage.value = 'Tu sesión ha expirado. Por favor, inicia sesión nuevamente.'
+    sessionExpiredMessage.value = t('auth.sessionExpired')
   }
 })
 </script>
@@ -29,13 +32,13 @@ onMounted(() => {
       <!-- Botón volver al mapa -->
       <button class="back-to-map" @click="router.push('/map')">
         <span class="material-icons">arrow_back</span>
-        Volver
+        {{ t('auth.back') }}
       </button>
 
       <!-- Branding -->
       <div class="auth-brand">
         <h1 class="brand-title">SIBU</h1>
-        <p class="brand-subtitle">Sistema de Transporte Público</p>
+        <p class="brand-subtitle">{{ t('auth.brandingSubtitle') }}</p>
       </div>
 
       <!-- Card principal -->
@@ -47,14 +50,14 @@ onMounted(() => {
             :class="{ 'auth-tab--active': isLogin }"
             @click="isLogin = true"
           >
-            Iniciar Sesión
+            {{ t('auth.loginTab') }}
           </button>
           <button
             class="auth-tab"
             :class="{ 'auth-tab--active': !isLogin }"
             @click="isLogin = false"
           >
-            Crear Cuenta
+            {{ t('auth.registerTab') }}
           </button>
         </div>
 
@@ -72,7 +75,7 @@ onMounted(() => {
       </div>
 
       <!-- Footer -->
-      <p class="auth-footer">SIBU © 2026 • Sistema de Transporte de Chiriquí</p>
+      <p class="auth-footer">{{ t('auth.footer') }}</p>
     </div>
   </div>
 </template>
@@ -215,6 +218,7 @@ onMounted(() => {
   align-items: center;
   gap: 8px;
   background: var(--bg-secondary);
+  border: 10px 16px;
   border: 1px solid var(--border-color);
   color: var(--text-secondary);
   font-size: 0.85rem;

frontend/src/views/BusinessDetailsView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import { businessService } from '@/services/businessService'
 import { couponsService } from '@/services/couponsService'
 import type { Business, Coupon } from '@/types'
@@ -9,6 +10,7 @@ import { getImageUrl as utilGetImageUrl } from '@/utils/imageUrl'
 
 const route = useRoute()
 const router = useRouter()
+const { t } = useI18n()
 const business = ref<Business | null>(null)
 const coupons = ref<Coupon[]>([])
 const isLoading = ref(true)
@@ -80,42 +82,42 @@ const goBack = () => router.back()
     <!-- Details Content -->
     <div class="details-container">
       <div class="premium-story">
-        <h2 class="premium-font">Explora Nuestra Historia Para Una Cocina Refinada Y Un Ambiente Atemporal</h2>
+        <h2 class="premium-font">{{ t('business.detailsTitle') }}</h2>
-        <p>"Nuestra historia es una de crecimiento, exploración y recuerdos culinarios inolvidables, donde cada capítulo se sirve con elegancia."</p>
+        <p>"{{ t('business.detailsDescription') }}"</p>
       </div>
 
       <!-- Highlights Grid (Inspired by the frame) -->
       <div class="highlights-grid">
         <div class="highlight-item">
           <div class="highlight-header">
-            <h3 class="premium-font">Herencia Atemporal</h3>
+            <h3 class="premium-font">{{ t('business.timelessHeritage') }}</h3>
             <div class="divider"></div>
           </div>
-          <p>Platos de autor que evolucionan con inspiración y cultura local.</p>
+          <p>{{ t('business.timelessHeritageDesc') }}</p>
         </div>
         
         <div class="highlight-item">
           <div class="highlight-header">
-            <h3 class="premium-font">Platos de Clase Mundial</h3>
+            <h3 class="premium-font">{{ t('business.worldClassDishes') }}</h3>
             <div class="divider"></div>
           </div>
-          <p>Experiencia gastronómica diseñada para deleitar los sentidos más exigentes.</p>
+          <p>{{ t('business.worldClassDishesDesc') }}</p>
         </div>
 
         <div class="highlight-item">
           <div class="highlight-header">
-            <h3 class="premium-font">Emoción y Elegancia</h3>
+            <h3 class="premium-font">{{ t('business.emotionElegance') }}</h3>
             <div class="divider"></div>
           </div>
-          <p>Veladas realzadas por el encanto atemporal de un ambiente exclusivo.</p>
+          <p>{{ t('business.emotionEleganceDesc') }}</p>
         </div>
 
         <div class="highlight-item">
           <div class="highlight-header">
-            <h3 class="premium-font">Experiencia Inigualable</h3>
+            <h3 class="premium-font">{{ t('business.unmatchedExperience') }}</h3>
             <div class="divider"></div>
           </div>
-          <p>Servicio personalizado desde un anfitrión dedicado para tu comodidad.</p>
+          <p>{{ t('business.unmatchedExperienceDesc') }}</p>
         </div>
       </div>
 
@@ -124,7 +126,7 @@ const goBack = () => router.back()
         <div class="info-card">
           <span class="material-icons">map</span>
           <div class="info-text">
-            <h4>Dirección</h4>
+            <h4>{{ t('business.address') }}</h4>
             <p>{{ business.address }}</p>
           </div>
         </div>
@@ -132,15 +134,15 @@ const goBack = () => router.back()
         <div class="info-card">
           <span class="material-icons">phone</span>
           <div class="info-text">
-            <h4>Contacto</h4>
+            <h4>{{ t('business.contact') }}</h4>
-            <p>{{ business.phone || 'No disponible' }}</p>
+            <p>{{ business.phone || t('common.notAvailable') }}</p>
           </div>
         </div>
 
         <div v-if="business.social_media" class="info-card">
           <span class="material-icons">language</span>
           <div class="info-text">
-            <h4>Redes Sociales</h4>
+            <h4>{{ t('business.socialMedia') }}</h4>
             <p>{{ business.social_media }}</p>
           </div>
         </div>
@@ -148,7 +150,7 @@ const goBack = () => router.back()
 
       <!-- Offers Section -->
       <div v-if="coupons.length > 0" class="offers-section">
-        <h2 class="section-title premium-font">Ofertas Disponibles</h2>
+        <h2 class="section-title premium-font">{{ t('business.availableOffers') }}</h2>
         <div class="coupons-grid">
           <div v-for="coupon in coupons" :key="coupon.id" class="coupon-card-detail">
             <div class="coupon-header-flex">
@@ -172,7 +174,7 @@ const goBack = () => router.back()
 
   <div v-else-if="isLoading" class="loading-full">
     <div class="loader"></div>
-    <p>Cargando experiencia premium...</p>
+    <p>{{ t('business.loadingPremium') }}</p>
   </div>
 </template>
 

frontend/src/views/CouponsView.vue

@@ -15,7 +15,14 @@ const selectedCoupon = ref<Coupon | null>(null)
 const searchQuery = ref('')
 const selectedCategory = ref('Todas')
 const showFilterSheet = ref(false)
-const categories = ['Todas', 'Restaurante', 'Turismo', 'Bebidas', 'Comercio']
+
+const CATEGORIES = computed(() => [
+  { label: t('discover.categories.all'), value: 'Todas' },
+  { label: t('discover.categories.restaurant'), value: 'Restaurante' },
+  { label: t('discover.categories.tourism'), value: 'Turismo' },
+  { label: t('discover.categories.drinks'), value: 'Bebidas' },
+  { label: t('discover.categories.commerce'), value: 'Comercio' }
+])
 
 onMounted(() => {
   couponStore.loadCoupons()
@@ -115,7 +122,7 @@ function getCategoryIcon(category?: string | null) {
     
     <div v-else-if="filteredCoupons.length === 0" class="empty-container">
       <span class="material-icons">search_off</span>
-      <p>No se encontraron resultados para tu búsqueda.</p>
+      <p>{{ t('coupons.noResults') }}</p>
     </div>
     
     <div v-else class="coupons-grid-new">
@@ -143,7 +150,7 @@ function getCategoryIcon(category?: string | null) {
         </div>
         
         <div class="offer-content">
-          <h3 class="offer-title">{{ coupon.business?.name || 'Restaurante' }}</h3>
+          <h3 class="offer-title">{{ coupon.business?.name || t('coupons.restaurant') }}</h3>
           <p class="offer-benefit">{{ coupon.title }}</p>
         </div>
       </div>
@@ -157,10 +164,10 @@ function getCategoryIcon(category?: string | null) {
                 <h3>{{ t('coupons.filterByCategory') }}</h3>
             </div>
             <div class="sheet-body">
-                <div v-for="cat in categories" :key="cat" class="filter-option" @click="selectedCategory = cat; showFilterSheet = false">
+                <div v-for="cat in CATEGORIES" :key="cat.value" class="filter-option" @click="selectedCategory = cat.value; showFilterSheet = false">
-                    <span class="material-icons">{{ getCategoryIcon(cat) }}</span>
+                    <span class="material-icons">{{ getCategoryIcon(cat.value) }}</span>
-                    <span>{{ cat }}</span>
+                    <span>{{ cat.label }}</span>
-                    <span v-if="selectedCategory === cat" class="material-icons check">check_circle</span>
+                    <span v-if="selectedCategory === cat.value" class="material-icons check">check_circle</span>
                 </div>
             </div>
             <div class="sheet-footer">
@@ -199,7 +206,7 @@ function getCategoryIcon(category?: string | null) {
                         <span class="material-icons icon-desc">description</span>
                         <h4>{{ t('coupons.description') }}</h4>
                     </div>
-                    <p class="block-text">{{ selectedCoupon.description || 'Sin descripción adicional.' }}</p>
+                    <p class="block-text">{{ selectedCoupon.description || t('coupons.noDescription') }}</p>
                 </div>
 
                 <div class="info-block">
@@ -642,5 +649,3 @@ function getCategoryIcon(category?: string | null) {
 .spin { animation: spin 1s linear infinite; }
 @keyframes spin { 100% { transform: rotate(360deg); } }
 </style>
-
-

frontend/src/views/DiscoverView.vue

@@ -3,11 +3,13 @@ import { ref, onMounted, computed } from 'vue'
 import { businessService } from '@/services/businessService'
 import type { Business } from '@/types'
 import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 import FavoriteButton from '@/components/FavoriteButton.vue'
 import { analyticsService } from '@/services/analyticsService'
 import { getImageUrl } from '@/utils/imageUrl'
 
 const router = useRouter()
+const { t } = useI18n()
 const businesses  = ref<Business[]>([])
 const isLoading   = ref(true)
 const error       = ref<string | null>(null)
@@ -16,14 +18,19 @@ const selectedCategory = ref('Todas')
 const selectedArea     = ref('Todas')
 
 // ── Categorías con emoji e ícono material
-const CATEGORY_META: Record<string, { emoji: string; icon: string }> = {
+const CATEGORY_META: Record<string, { emoji: string; icon: string; key: string }> = {
-  'Todas':       { emoji: '✨', icon: 'apps' },
+  'Todas':       { emoji: '✨', icon: 'apps', key: 'discover.categories.all' },
-  'Restaurante': { emoji: '🍽️', icon: 'restaurant' },
+  'Restaurante': { emoji: '🍽️', icon: 'restaurant', key: 'discover.categories.restaurant' },
-  'Hotel':       { emoji: '🏨', icon: 'hotel' },
+  'Hotel':       { emoji: '🏨', icon: 'hotel', key: 'discover.categories.hotel' },
-  'Café':        { emoji: '☕', icon: 'local_cafe' },
+  'Café':        { emoji: '☕', icon: 'local_cafe', key: 'discover.categories.cafe' },
-  'Comercio':    { emoji: '🏪', icon: 'store' },
+  'Comercio':    { emoji: '🏪', icon: 'store', key: 'discover.categories.commerce' },
-  'Turismo':     { emoji: '🌄', icon: 'landscape' },
+  'Turismo':     { emoji: '🌄', icon: 'landscape', key: 'discover.categories.tourism' },
-  'Bebidas':     { emoji: '🍹', icon: 'local_bar' },
+  'Bebidas':     { emoji: '🍹', icon: 'local_bar', key: 'discover.categories.drinks' },
+}
+
+function catName(cat: string) {
+  const meta = CATEGORY_META[cat]
+  return meta ? t(meta.key) : cat
 }
 
 function catEmoji(cat: string) {
@@ -40,7 +47,7 @@ async function loadBusinesses() {
     businesses.value = await businessService.getAllBusinesses()
   } catch (e) {
     console.error('Error loading businesses:', e)
-    error.value = 'No se pudieron cargar los lugares. Revisa tu conexión.'
+    error.value = t('discover.error')
   } finally {
     isLoading.value = false
   }
@@ -100,6 +107,9 @@ function handleExplore(biz: Business) {
 
 
 function resetFilters() {
+  selectedCategory.value = 'Todas'
+  selectedArea.value = t('discover.allAreas') === 'All' ? 'Todas' : 'Todas' // Simplified to keep internal logic consistent
+  // Using strings as keys for internal logic, translating only for display
   selectedCategory.value = 'Todas'
   selectedArea.value = 'Todas'
   searchQuery.value = ''
@@ -112,8 +122,8 @@ function resetFilters() {
     <!-- ── HEADER ── -->
     <header class="disc-header">
       <div class="header-body">
-        <h1 class="disc-title">¡Explora Chiriquí! 🌿</h1>
+        <h1 class="disc-title">{{ t('discover.title') }}</h1>
-        <p class="disc-sub">Descubre los mejores lugares cerca de ti</p>
+        <p class="disc-sub">{{ t('discover.subtitle') }}</p>
       </div>
 
       <!-- Búsqueda -->
@@ -123,7 +133,7 @@ function resetFilters() {
           v-model="searchQuery"
           type="text"
           class="search-input"
-          placeholder="Buscar restaurantes, hoteles..."
+          :placeholder="t('discover.searchPlaceholder')"
         />
         <button v-if="searchQuery" class="search-clear" @click="searchQuery = ''">
           <span class="material-icons">close</span>
@@ -141,7 +151,7 @@ function resetFilters() {
           :class="{ 'cat-chip--active': selectedCategory === cat }"
           @click="selectedCategory = cat"
         >
-          {{ catEmoji(cat) }} {{ cat }}
+          {{ catEmoji(cat) }} {{ catName(cat) }}
         </button>
       </div>
     </div>
@@ -149,7 +159,7 @@ function resetFilters() {
     <!-- ── LOADING ── -->
     <div v-if="isLoading" class="state-center">
       <div class="spinner"></div>
-      <p>Cargando lugares...</p>
+      <p>{{ t('discover.loading') }}</p>
     </div>
 
     <!-- ── ERROR ── -->
@@ -158,7 +168,7 @@ function resetFilters() {
       <p style="font-weight: 600; color: var(--text-secondary);">{{ error }}</p>
       <button class="cta-btn" style="margin-top: 1rem;" @click="loadBusinesses">
         <span class="material-icons">refresh</span>
-        Reintentar
+        {{ t('common.retry') }}
       </button>
     </div>
 
@@ -184,14 +194,13 @@ function resetFilters() {
         <!-- Contador de resultados -->
         <div class="results-bar">
           <span class="results-count">
-            {{ filteredBusinesses.length }}
+            {{ t('discover.results', { count: filteredBusinesses.length }) }}
-            {{ filteredBusinesses.length === 1 ? 'lugar' : 'lugares' }}
+            <template v-if="selectedCategory !== 'Todas'"> {{ t('discover.in') }} {{ catName(selectedCategory) }}</template>
-            <template v-if="selectedCategory !== 'Todas'"> en {{ selectedCategory }}</template>
             <template v-if="selectedArea !== 'Todas'"> · {{ selectedArea }}</template>
           </span>
           <button class="reset-btn" @click="resetFilters">
             <span class="material-icons">refresh</span>
-            Limpiar
+            {{ t('common.clear') }}
           </button>
         </div>
 
@@ -218,7 +227,7 @@ function resetFilters() {
               </div>
               <span class="biz-cat-badge">
                 <span class="material-icons" style="font-size:0.875rem">{{ catIcon(biz.category || '') }}</span>
-                {{ biz.category }}
+                {{ catName(biz.category || '') }}
               </span>
             </div>
             <div class="biz-body">
@@ -234,16 +243,16 @@ function resetFilters() {
         <!-- Vacío -->
         <div v-else class="empty-state">
           <span class="material-icons empty-icon">search_off</span>
-          <h2 class="empty-title">Sin resultados</h2>
+          <h2 class="empty-title">{{ t('discover.noResults') }}</h2>
-          <p class="empty-sub">No encontramos lugares con ese filtro.</p>
+          <p class="empty-sub">{{ t('discover.noResultsDesc') }}</p>
-          <button class="cta-btn" @click="resetFilters">Ver todos los lugares</button>
+          <button class="cta-btn" @click="resetFilters">{{ t('discover.viewAll') }}</button>
         </div>
 
         <!-- CTA al final -->
         <div v-if="filteredBusinesses.length > 0" class="more-card" @click="resetFilters">
-          <p class="more-card-title">¿Buscas algo más?</p>
+          <p class="more-card-title">{{ t('discover.lookingMore') }}</p>
-          <p class="more-card-sub">Explora sin filtros para descubrir todo</p>
+          <p class="more-card-sub">{{ t('discover.exploreWithoutFilters') }}</p>
-          <button class="cta-btn">Ver todo</button>
+          <button class="cta-btn">{{ t('common.all') }}</button>
         </div>
       </div>
 
@@ -252,7 +261,7 @@ function resetFilters() {
 
         <!-- CHIPS DE ÁREA -->
         <div v-if="areas.length > 0" class="area-section">
-          <p class="section-label">🗺️ Por Área</p>
+          <p class="section-label">{{ t('discover.sections.byArea') }}</p>
           <div class="area-chips">
             <button
               v-for="area in areas"
@@ -269,7 +278,7 @@ function resetFilters() {
 
         <!-- DESTACADOS -->
         <div v-if="featuredBusinesses.length > 0" class="featured-section">
-          <p class="section-label">✨ Destacados</p>
+          <p class="section-label">{{ t('discover.sections.featured') }}</p>
           <div class="featured-grid">
             <div
               v-for="biz in featuredBusinesses"
@@ -293,7 +302,7 @@ function resetFilters() {
               <div class="featured-info">
                 <span class="featured-cat">
                   <span class="material-icons" style="font-size:0.8rem">{{ catIcon(biz.category || '') }}</span>
-                  {{ biz.category }}
+                  {{ catName(biz.category || '') }}
                 </span>
                 <p class="featured-name">{{ biz.name }}</p>
                 <p class="featured-area">
@@ -307,7 +316,7 @@ function resetFilters() {
 
         <!-- TODOS LOS LUGARES -->
         <div v-if="gridBusinesses.length > 0" class="all-section">
-          <p class="section-label">🏙️ Todos los lugares</p>
+          <p class="section-label">{{ t('discover.sections.allPlaces') }}</p>
           <TransitionGroup name="fade" tag="div" class="biz-grid">
             <div
               v-for="biz in gridBusinesses"
@@ -330,7 +339,7 @@ function resetFilters() {
                 </div>
                 <span class="biz-cat-badge">
                   <span class="material-icons" style="font-size:0.875rem">{{ catIcon(biz.category || '') }}</span>
-                  {{ biz.category }}
+                  {{ catName(biz.category || '') }}
                 </span>
               </div>
               <div class="biz-body">
@@ -346,8 +355,8 @@ function resetFilters() {
 
         <div v-if="businesses.length === 0" class="empty-state">
           <span class="material-icons empty-icon">storefront</span>
-          <h2 class="empty-title">Sin lugares aún</h2>
+          <h2 class="empty-title">{{ t('discover.empty') }}</h2>
-          <p class="empty-sub">Pronto habrá negocios y lugares turísticos disponibles aquí.</p>
+          <p class="empty-sub">{{ t('discover.emptyDesc') }}</p>
         </div>
       </div>
     </template>
@@ -798,7 +807,7 @@ function resetFilters() {
 }
 
 .empty-icon {
-  font-size: 3.5rem;
+  font-size: 4rem;
   color: var(--text-secondary);
   opacity: 0.3;
   margin-bottom: 1rem;
@@ -808,54 +817,25 @@ function resetFilters() {
   font-size: 1.25rem;
   font-weight: 900;
   color: var(--text-primary);
-  margin: 0 0 0.5rem;
+  margin-bottom: 0.5rem;
 }
 
 .empty-sub {
-  font-size: 0.9375rem;
+  font-size: 0.875rem;
   color: var(--text-secondary);
-  margin: 0 0 1.5rem;
+  max-width: 280px;
-  line-height: 1.5;
 }
 
-/* ═══════════════════════════════════════════
+/* Transitions */
-   LOADING / SPINNER
+.fade-enter-active, .fade-leave-active { transition: all 0.3s ease; }
-═══════════════════════════════════════════ */
+.fade-enter-from, .fade-leave-to { opacity: 0; transform: translateY(10px); }
-.state-center {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 4rem 1.25rem;
-  gap: 1rem;
-  color: var(--text-secondary);
-}
-
-.spinner {
-  width: 2rem;
-  height: 2rem;
-  border: 2.5px solid var(--border-color);
-  border-top-color: var(--active-color);
-  border-radius: 50%;
-  animation: spin 0.75s linear infinite;
-}
-
-@keyframes spin { to { transform: rotate(360deg); } }
-
-/* ═══════════════════════════════════════════
-   TRANSICIÓN DE TARJETAS
-═══════════════════════════════════════════ */
-.fade-enter-active { transition: opacity 0.25s ease, transform 0.25s ease; }
-.fade-enter-from   { opacity: 0; transform: translateY(8px); }
 
 /* ═══════════════════════════════════════════
    RESPONSIVE
  ═══════════════════════════════════════════ */
-@media (min-width: 560px) {
+@media (max-width: 480px) {
-  .biz-grid { grid-template-columns: repeat(3, 1fr); }
+  .biz-grid, .featured-grid {
+    grid-template-columns: 1fr;
   }
-
-@media (max-width: 360px) {
-  .featured-grid { grid-template-columns: 1fr; }
-  .featured-card { aspect-ratio: 4/3; }
 }
 </style>

frontend/src/views/FavoritesView.vue

@@ -2,20 +2,22 @@
 import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useFavoritesStore } from '@/stores/favorites'
+import { useI18n } from 'vue-i18n'
 import { getImageUrl as utilGetImageUrl } from '@/utils/imageUrl'
 
 const router = useRouter()
+const { t } = useI18n()
 const favoritesStore = useFavoritesStore()
 const selectedFilter = ref('all')
 
-const filters = [
+const filters = computed(() => [
-  { key: 'all',       label: 'Todos',    icon: 'star' },
+  { key: 'all',       label: t('common.all'),    icon: 'star' },
-  { key: 'routes',    label: 'Buses',    icon: 'directions_bus' },
+  { key: 'routes',    label: t('favorites.tabs.routes'),    icon: 'directions_bus' },
-  { key: 'taxis',     label: 'Taxis',    icon: 'local_taxi' },
+  { key: 'taxis',     label: t('favorites.tabs.taxis'),    icon: 'local_taxi' },
-  { key: 'businesses',label: 'Comercios', icon: 'store' },
+  { key: 'businesses',label: t('favorites.tabs.businesses'), icon: 'store' },
-  { key: 'coupons',   label: 'Ofertas',  icon: 'confirmation_number' },
+  { key: 'coupons',   label: t('favorites.tabs.coupons'),  icon: 'confirmation_number' },
-  { key: 'stops',     label: 'Paradas',  icon: 'location_on' },
+  { key: 'stops',     label: t('navigation.routes'),  icon: 'location_on' }, // Reusing navigation.routes or adding a specific one
-]
+])
 
 onMounted(async () => {
   await favoritesStore.loadFavorites()
@@ -67,9 +69,9 @@ const hasVisibleItems = computed(() =>
 
     <!-- ── Header ── -->
     <header class="fav-header">
-      <h1 class="fav-title">Mis Favoritos</h1>
+      <h1 class="fav-title">{{ t('favorites.title') }}</h1>
       <p class="fav-count" v-if="totalFavorites > 0">
-        {{ totalFavorites }} guardado{{ totalFavorites !== 1 ? 's' : '' }}
+        {{ t('favorites.count', { count: totalFavorites }) }}
       </p>
     </header>
 
@@ -92,7 +94,7 @@ const hasVisibleItems = computed(() =>
     <!-- ── Loading ── -->
     <div v-if="favoritesStore.isLoading" class="state-center">
       <div class="spinner"></div>
-      <p>Cargando favoritos...</p>
+      <p>{{ t('common.loading') }}</p>
     </div>
 
     <template v-else>
@@ -106,18 +108,18 @@ const hasVisibleItems = computed(() =>
             <line x1="43" y1="45" x2="57" y2="45" stroke="var(--active-color)" stroke-width="4" stroke-linecap="round"/>
           </svg>
         </div>
-        <h2 class="empty-title">Nada guardado aún</h2>
+        <h2 class="empty-title">{{ t('favorites.empty.title') }}</h2>
-        <p class="empty-sub">Explora rutas, taxis y negocios para guardar tus favoritos aquí</p>
+        <p class="empty-sub">{{ t('favorites.empty.description') }}</p>
         <button class="cta-btn" @click="router.push('/map')">
           <span class="material-icons">explore</span>
-          Explorar ahora
+          {{ t('favorites.cta.exploreNow') }}
         </button>
       </div>
 
       <!-- ── Empty de categoría ── -->
       <div v-else-if="!hasVisibleItems" class="empty-state empty-state--sm">
         <span class="material-icons empty-cat-icon">search_off</span>
-        <p class="empty-sub">No tienes favoritos en esta categoría</p>
+        <p class="empty-sub">{{ t('favorites.empty.noResultsCategory') }}</p>
       </div>
 
       <!-- ── Contenido ── -->
@@ -127,7 +129,7 @@ const hasVisibleItems = computed(() =>
         <section v-if="visibleRoutes.length > 0" class="fav-section">
           <div class="section-label">
             <span class="material-icons">directions_bus</span>
-            <span>Rutas</span>
+            <span>{{ t('favorites.tabs.routes') }}</span>
           </div>
           <div class="card-list">
             <div
@@ -141,9 +143,9 @@ const hasVisibleItems = computed(() =>
               </div>
               <div class="card-info">
                 <p class="card-name">{{ item.item_name }}</p>
-                <p class="card-sub">Toca para ver horarios</p>
+                <p class="card-sub">{{ t('favorites.viewSchedules') }}</p>
               </div>
-              <button class="heart-btn heart-btn--active" @click.stop="removeFavorite($event, item.item_type, item.item_id)" title="Quitar de favoritos">
+              <button class="heart-btn heart-btn--active" @click.stop="removeFavorite($event, item.item_type, item.item_id)" :title="t('favorites.removeTitle')">
                 <span class="material-icons">favorite</span>
               </button>
             </div>
@@ -154,7 +156,7 @@ const hasVisibleItems = computed(() =>
         <section v-if="visibleTaxis.length > 0" class="fav-section">
           <div class="section-label">
             <span class="material-icons">local_taxi</span>
-            <span>Taxis</span>
+            <span>{{ t('favorites.tabs.taxis') }}</span>
           </div>
           <div class="card-list">
             <div
@@ -168,9 +170,9 @@ const hasVisibleItems = computed(() =>
               </div>
               <div class="card-info">
                 <p class="card-name">{{ item.item_name }}</p>
-                <p class="card-sub">Taxi • Ver disponibilidad</p>
+                <p class="card-sub">{{ t('favorites.availability') }}</p>
               </div>
-              <button class="heart-btn heart-btn--active" @click.stop="removeFavorite($event, item.item_type, item.item_id)" title="Quitar de favoritos">
+              <button class="heart-btn heart-btn--active" @click.stop="removeFavorite($event, item.item_type, item.item_id)" :title="t('favorites.removeTitle')">
                 <span class="material-icons">favorite</span>
               </button>
             </div>
@@ -181,7 +183,7 @@ const hasVisibleItems = computed(() =>
         <section v-if="visibleBusinesses.length > 0" class="fav-section">
           <div class="section-label">
             <span class="material-icons">store</span>
-            <span>Negocios</span>
+            <span>{{ t('favorites.tabs.businesses') }}</span>
           </div>
           <div class="biz-grid">
             <div
@@ -195,11 +197,11 @@ const hasVisibleItems = computed(() =>
                 <button class="heart-btn heart-btn--active heart-btn--overlay" @click.stop="removeFavorite($event, item.item_type, item.item_id)">
                   <span class="material-icons">favorite</span>
                 </button>
-                <span class="biz-badge">Negocio</span>
+                <span class="biz-badge">{{ t('favorites.tabs.businesses') }}</span>
               </div>
               <div class="biz-body">
                 <p class="card-name">{{ item.item_name }}</p>
-                <p class="card-sub">Ver detalles →</p>
+                <p class="card-sub">{{ t('favorites.details') }}</p>
               </div>
             </div>
           </div>
@@ -209,7 +211,7 @@ const hasVisibleItems = computed(() =>
         <section v-if="visibleCoupons.length > 0" class="fav-section">
           <div class="section-label">
             <span class="material-icons">confirmation_number</span>
-            <span>Ofertas y Viajes</span>
+            <span>{{ t('favorites.tabs.coupons') }}</span>
           </div>
           <div class="card-list">
             <div
@@ -224,9 +226,9 @@ const hasVisibleItems = computed(() =>
               </div>
               <div class="card-info">
                 <p class="card-name">{{ item.item_name }}</p>
-                <span class="badge-avail">Cupón</span>
+                <span class="badge-avail">{{ t('favorites.tabs.coupons') }}</span>
               </div>
-              <button class="heart-btn heart-btn--active" @click.stop="removeFavorite($event, item.item_type, item.item_id)" title="Quitar de favoritos">
+              <button class="heart-btn heart-btn--active" @click.stop="removeFavorite($event, item.item_type, item.item_id)" :title="t('favorites.removeTitle')">
                 <span class="material-icons">favorite</span>
               </button>
             </div>
@@ -237,7 +239,7 @@ const hasVisibleItems = computed(() =>
         <section v-if="visibleStops.length > 0" class="fav-section">
           <div class="section-label">
             <span class="material-icons">location_on</span>
-            <span>Paradas</span>
+            <span>{{ t('navigation.routes') }}</span>
           </div>
           <div class="card-list">
             <div
@@ -251,7 +253,7 @@ const hasVisibleItems = computed(() =>
               </div>
               <div class="card-info">
                 <p class="card-name">{{ item.item_name }}</p>
-                <span class="badge-avail">Favorito</span>
+                <span class="badge-avail">{{ t('favorites.saved') }}</span>
               </div>
               <button class="heart-btn heart-btn--active" @click.stop="removeFavorite($event, item.item_type, item.item_id)">
                 <span class="material-icons">favorite</span>
@@ -440,6 +442,13 @@ const hasVisibleItems = computed(() =>
 
 .card-thumb--event .material-icons { font-size: 1.5rem; }
 
+.card-thumb--blue {
+  background: #3b82f6;
+  color: white;
+}
+
+.card-thumb--blue .material-icons { font-size: 1.5rem; }
+
 /* Info */
 .card-info { flex: 1; min-width: 0; }
 
@@ -689,4 +698,3 @@ const hasVisibleItems = computed(() =>
   .biz-grid { grid-template-columns: repeat(3, 1fr); }
 }
 </style>
-

frontend/src/views/MapView.vue

@@ -6,6 +6,7 @@ import { useRouteStore } from "@/stores/route";
 import { useMapStore } from "@/stores/map";
 import { useBusStopStore } from "@/stores/busStop";
 import { useCouponStore } from "@/stores/coupon";
+import { useAuthStore } from "@/stores/auth";
 import { useGoogleMaps } from "@/composables/useGoogleMaps";
 import { analyticsService } from "@/services/analyticsService";
 import { getImageUrl } from "@/utils/imageUrl";
@@ -25,6 +26,7 @@ const routeStore = useRouteStore();
 const mapStore = useMapStore();
 const busStopStore = useBusStopStore();
 const couponStore = useCouponStore();
+const authStore = useAuthStore();
 
 const { map, isLoaded, error: mapsError, initMap, addHtmlMarker, setCenter, setZoom, addMarker } = useGoogleMaps();
 const { estasCargando: estasCargandoRuta, errorRuta } = useDirectionsRoute();
@@ -248,6 +250,12 @@ async function initializeMap() {
   // Show promotions on the map
   updatePromoMarkers();
   
+  // Smart Location: Detect automatically if enabled in profile
+  if (authStore.userProfile?.auto_location) {
+    console.log('🤖 JARVIS: Smart Location detectado — localizando automaticamente...');
+    locateUser();
+  }
+  
   // Apply initial styles based on current zoom
   updateMarkersStyles();
 }
@@ -486,6 +494,14 @@ function locateUser(): Promise<void> {
       },
       (error) => {
         console.warn("SIBU | Geolocalización denegada:", error.message);
+        
+        // Si el usuario tenía auto_location pero denegó el permiso del navegador,
+        // lo desmarcamos para que no lo vuelva a intentar infinitamente.
+        if (authStore.userProfile?.auto_location) {
+           console.log('🤖 JARVIS: Permiso denegado — desactivando Smart Location.');
+           authStore.updateProfile({ auto_location: false });
+        }
+        
         resolve();
       },
       {
@@ -563,7 +579,7 @@ async function highlightOptimalStopForRoute() {
       <!-- Status overlay para SIBU Directions API -->
       <div v-if="estasCargandoRuta || errorRuta" class="status-indicator">
         <div v-if="estasCargandoRuta" class="loading-pill">
-            Calculando ruta real...
+            {{ t('map.calculatingRoute') }}
         </div>
         <div v-if="errorRuta" class="error-pill">
             {{ errorRuta }}
@@ -577,7 +593,7 @@ async function highlightOptimalStopForRoute() {
         <!-- Floating Offers Button at exact location -->
           <div v-if="mapsError" class="error">
             <div style="text-align: center; padding: 20px; max-width: 600px; margin: 0 auto;">
-              <h3 style="color: var(--text-primary); margin-bottom: 15px;">⚠️ Error al cargar mapa</h3>
+              <h3 style="color: var(--text-primary); margin-bottom: 15px;">⚠️ {{ t('map.mapLoadingError') }}</h3>
               <div style="color: var(--text-primary); margin-bottom: 15px; white-space: pre-line; text-align: left; background: var(--bg-secondary); padding: 15px; border-radius: 8px;">
                 {{ mapsError }}
               </div>
@@ -603,9 +619,9 @@ async function highlightOptimalStopForRoute() {
               </span>
             </button>
 
-            <!-- Location Button (Animated Pin) -->
+            <!-- Location Button (Animated Pin) - Hidden if Smart Location is active -->
             <button 
-              v-if="isLoaded" 
+              v-if="isLoaded && !authStore.userProfile?.auto_location" 
               class="location-loader-btn" 
               @click="locateUser" 
               :title="t('map.showMyLocation')"
@@ -625,7 +641,7 @@ async function highlightOptimalStopForRoute() {
               v-if="routeStore.selectedRouteId && wasSelectedFromMap" 
               class="uber-search-trigger circular" 
               @click="openUberSearch"
-              title="Buscar"
+              :title="t('map.search')"
             >
               <span class="material-icons">search</span>
             </div>
@@ -637,7 +653,7 @@ async function highlightOptimalStopForRoute() {
               @click="openUberSearch"
             >
               <span class="material-icons search-icon">directions_bus</span>
-              <span class="trigger-label">ver rutas</span>
+              <span class="trigger-label">{{ t('map.viewRoutes') }}</span>
             </div>
 
             <!-- Nuevo Banner de Parada Cercana Alineado (Redimensionado y con ETA) -->
@@ -651,7 +667,7 @@ async function highlightOptimalStopForRoute() {
               </div>
               
               <div class="flex flex-col flex-1 truncate ml-2" style="min-width: 0;">
-                <span class="text-[9px] uppercase font-bold text-gray-500 dark:text-gray-400 leading-none">Tiempo de llegada</span>
+                <span class="text-[9px] uppercase font-bold text-gray-500 dark:text-gray-400 leading-none">{{ t('map.arrivalTime') }}</span>
                 <span class="trigger-text-compact truncate leading-tight">{{ paradaCercana?.name }}</span>
               </div>
 
@@ -683,7 +699,7 @@ async function highlightOptimalStopForRoute() {
             <button class="back-btn" @click="closeUberSearch">
               <span class="material-icons">arrow_back</span>
             </button>
-            <div class="search-title">Rutas Disponibles</div>
+            <div class="search-title">{{ t('map.availableRoutes') }}</div>
           </div>
 
           <!-- Inputs and Toggle removed per request -->
@@ -706,7 +722,7 @@ async function highlightOptimalStopForRoute() {
               </div>
               <div class="result-content">
                 <div class="result-name">{{ route.name }}</div>
-                <div class="result-address">Ruta de Autobús</div>
+                <div class="result-address">{{ t('map.busRoute') }}</div>
               </div>
               <span class="material-icons check-icon">
                 {{ route.id === routeStore.selectedRouteId ? 'check_circle' : 'chevron_right' }}
@@ -725,7 +741,7 @@ async function highlightOptimalStopForRoute() {
           <!-- Header -->
           <div class="sheet-header">
             <div class="sheet-title-group">
-              <span class="sheet-title">Ofertas</span>
+              <span class="sheet-title">{{ t('coupons.title') }}</span>
             </div>
             <button class="sheet-close" @click="showPromos = false">
               <span class="material-icons">close</span>
@@ -753,7 +769,7 @@ async function highlightOptimalStopForRoute() {
                     <span class="sheet-biz-name">{{ currentPromo.business?.name || 'Local' }}</span>
                     <h3 class="sheet-promo-title">{{ currentPromo.title }}</h3>
                     <div class="sheet-actions">
-                      <button class="sheet-cta" @click="handlePromoClick(currentPromo)">Ver detalles</button>
+                      <button class="sheet-cta" @click="handlePromoClick(currentPromo)">{{ t('coupons.viewDetails') }}</button>
                       <span v-if="currentPromo.discount_percentage" class="sheet-discount-tag">-{{ currentPromo.discount_percentage }}%</span>
                     </div>
                   </div>
@@ -791,7 +807,7 @@ async function highlightOptimalStopForRoute() {
               class="promo-img-modal" 
               @error="handleImageError"
             />
-            <div class="promo-badge-modal">PROMO</div>
+            <div class="promo-badge-modal">{{ t('map.promo') }}</div>
           </div>
           <div class="promo-body-modal">
             <h2 class="promo-title-modal">{{ selectedPromo.title }}</h2>
@@ -799,7 +815,7 @@ async function highlightOptimalStopForRoute() {
             <p>{{ selectedPromo.description }}</p>
           </div>
           <div class="promo-actions-modal">
-            <button class="business-detail-btn-modal" style="flex: 1; width: 100%;" @click="router.push('/business/' + selectedPromo.business_id)">Ver Negocio</button>
+            <button class="business-detail-btn-modal" style="flex: 1; width: 100%;" @click="router.push('/business/' + selectedPromo.business_id)">{{ t('business.viewBusiness') }}</button>
           </div>
         </div>
       </div>

frontend/src/views/ProfileView.vue

@@ -4,11 +4,13 @@ import { useRouter } from 'vue-router'
 import { useCouponStore } from '@/stores/coupon'
 import { authService } from '@/services/authService'
 import { getImageUrl } from '@/utils/imageUrl'
+import { useI18n } from 'vue-i18n'
 
 const router = useRouter()
+const { t } = useI18n()
 const couponStore = useCouponStore()
 
-const userName = ref(localStorage.getItem('user_name') || 'Usuario')
+const userName = ref(localStorage.getItem('user_name') || t('profile.user'))
 const userEmail = ref(localStorage.getItem('user_email') || '')
 const userRole = ref(localStorage.getItem('user_role') || 'PASSENGER')
 const userPhoto = ref(localStorage.getItem('profile_photo_url') || '')
@@ -89,9 +91,9 @@ async function handleUpdateProfile() {
     
     showEditModal.value = false
     editForm.value.password = ''
-    alert('Perfil actualizado correctamente')
+    alert(t('profile.updateSuccess'))
   } catch (e: any) {
-    alert('Error al actualizar: ' + (e.response?.data?.detail || e.message))
+    alert(t('profile.updateError') + ' ' + (e.response?.data?.detail || e.message))
   } finally {
     isUpdating.value = false
   }
@@ -99,9 +101,9 @@ async function handleUpdateProfile() {
 
 function getStatusLabel(status: string) {
   switch (status) {
-    case 'claimed': return 'Pendiente'
+    case 'claimed': return t('profile.pending')
-    case 'redeemed': return 'Canjeado'
+    case 'redeemed': return t('profile.redeemed')
-    case 'expired': return 'Vencido'
+    case 'expired': return t('profile.expired')
     default: return status
   }
 }
@@ -132,7 +134,7 @@ const getFullUrl = (path: string) => getImageUrl(path)
         </div>
         
         <div class="header-actions">
-           <button class="logout-icon-btn" @click="handleLogout" title="Cerrar Sesión">
+           <button class="logout-icon-btn" @click="handleLogout" :title="t('profile.logoutTitle')">
             <span class="material-icons">logout</span>
           </button>
         </div>
@@ -141,7 +143,7 @@ const getFullUrl = (path: string) => getImageUrl(path)
 
     <section class="my-coupons-section">
       <div class="section-header">
-        <h2>Mis Cupones</h2>
+        <h2>{{ t('profile.myCoupons') }}</h2>
         <span class="count">{{ couponStore.myCoupons.length }}</span>
       </div>
 
@@ -149,9 +151,9 @@ const getFullUrl = (path: string) => getImageUrl(path)
         <div class="empty-icon-circle">
           <span class="material-icons">confirmation_number</span>
         </div>
-        <h3>No tienes cupones</h3>
+        <h3>{{ t('profile.emptyCoupons') }}</h3>
-        <p>Explora los beneficios que tenemos para ti por usar SIBU.</p>
+        <p>{{ t('profile.exploreOffers') }}</p>
-        <button @click="router.push('/coupons')" class="btn-primary">Ver Ofertas</button>
+        <button @click="router.push('/coupons')" class="btn-primary">{{ t('profile.viewOffers') }}</button>
       </div>
 
       <div v-else class="coupons-list">
@@ -162,8 +164,8 @@ const getFullUrl = (path: string) => getImageUrl(path)
         >
           <div class="coupon-main">
             <div class="coupon-details">
-              <h3>{{ userCoupon.coupon?.title || 'Cupón' }}</h3>
+              <h3>{{ userCoupon.coupon?.title || t('coupons.title') }}</h3> // Reusing coupons.title for fallback
-              <p class="biz-name">{{ userCoupon.coupon?.business?.name || 'Comercio' }}</p>
+              <p class="biz-name">{{ userCoupon.coupon?.business?.name || t('coupons.restaurant') }}</p>
               <div class="code-row">
                 <span class="code">{{ userCoupon.redemption_code }}</span>
                 <span :class="['status-tag', userCoupon.status]">{{ getStatusLabel(userCoupon.status) }}</span>
@@ -175,12 +177,12 @@ const getFullUrl = (path: string) => getImageUrl(path)
               @click="showQR(userCoupon.redemption_code, userCoupon.coupon?.title || '')"
             >
               <span class="material-icons">qr_code_2</span>
-              Ver Código
+              {{ t('profile.viewCode') }}
             </button>
           </div>
           <div class="coupon-footer">
-             <span v-if="userCoupon.status === 'redeemed'">Usado el: {{ new Date(userCoupon.redeemed_at).toLocaleDateString() }}</span>
+             <span v-if="userCoupon.status === 'redeemed'">{{ t('profile.usedAt') }} {{ new Date(userCoupon.redeemed_at).toLocaleDateString() }}</span>
-             <span v-else>Reclamado el: {{ new Date(userCoupon.claimed_at).toLocaleDateString() }}</span>
+             <span v-else>{{ t('profile.claimedAt') }} {{ new Date(userCoupon.claimed_at).toLocaleDateString() }}</span>
           </div>
         </div>
       </div>
@@ -190,7 +192,7 @@ const getFullUrl = (path: string) => getImageUrl(path)
     <div v-if="showEditModal" class="modal-overlay" @click.self="showEditModal = false">
       <div class="edit-modal">
         <div class="modal-header">
-          <h2>Editar Perfil</h2>
+          <h2>{{ t('profile.editProfile') }}</h2>
           <button class="close-btn" @click="showEditModal = false">
             <span class="material-icons">close</span>
           </button>
@@ -208,25 +210,25 @@ const getFullUrl = (path: string) => getImageUrl(path)
               </label>
             </div>
             <input id="photo-input" type="file" @change="handlePhotoChange" accept="image/*" hidden>
-            <p class="upload-hint">Foto opcional</p>
+            <p class="upload-hint">{{ t('profile.photoOptional') }}</p>
           </div>
 
           <div class="form-group">
-            <label>Nombre Completo</label>
+            <label>{{ t('profile.nameLabel') }}</label>
-            <input v-model="editForm.full_name" type="text" placeholder="Tu nombre" required>
+            <input v-model="editForm.full_name" type="text" :placeholder="t('profile.namePlaceholder')" required>
           </div>
 
           <div class="form-group">
-            <label>Nueva Contraseña (Opcional)</label>
+            <label>{{ t('profile.passwordOptional') }}</label>
-            <input v-model="editForm.password" type="password" placeholder="Mínimo 6 caracteres">
+            <input v-model="editForm.password" type="password" :placeholder="t('profile.passwordPlaceholder')">
-            <p class="field-hint">Déjalo en blanco si no quieres cambiarla.</p>
+            <p class="field-hint">{{ t('profile.passwordHint') }}</p>
           </div>
 
           <div class="modal-actions">
-            <button type="button" class="btn-cancel" @click="showEditModal = false">Cancelar</button>
+            <button type="button" class="btn-cancel" @click="showEditModal = false">{{ t('profile.cancel') }}</button>
             <button type="submit" class="btn-save" :disabled="isUpdating">
               <span v-if="isUpdating" class="material-icons spin">refresh</span>
-              {{ isUpdating ? 'Guardando...' : 'Guardar Cambios' }}
+              {{ isUpdating ? t('profile.saving') : t('profile.save') }}
             </button>
           </div>
         </form>
@@ -241,7 +243,7 @@ const getFullUrl = (path: string) => getImageUrl(path)
         </button>
         <div class="qr-header">
            <span class="material-icons">verified</span>
-           <h3>Cupón de Descuento</h3>
+           <h3>{{ t('profile.qrTitle') }}</h3>
         </div>
         <p class="promo-title">{{ selectedTitle }}</p>
         
@@ -250,14 +252,14 @@ const getFullUrl = (path: string) => getImageUrl(path)
              <span class="material-icons">qr_code_2</span>
            </div>
            <div class="redemption-box">
-             <p>CÓDIGO DE REDENCIÓN</p>
+             <p>{{ t('profile.qrCode') }}</p>
              <code class="big-code">{{ selectedCode }}</code>
            </div>
         </div>
         
-        <p class="qr-instructions">Muestra este código al encargado del establecimiento para validar tu promoción.</p>
+        <p class="qr-instructions">{{ t('profile.qrInstructions') }}</p>
         
-        <button class="btn-done" @click="showQRModal = false">Entendido</button>
+        <button class="btn-done" @click="showQRModal = false">{{ t('profile.understood') }}</button>
       </div>
     </div>
   </div>
@@ -634,6 +636,13 @@ const getFullUrl = (path: string) => getImageUrl(path)
   cursor: pointer;
 }
 
+/* Modal Actions */
+.modal-actions {
+  display: flex;
+  gap: 1rem;
+  margin-top: 2rem;
+}
+
 /* QR Modal Enhanced */
 .qr-modal {
   background: var(--card-bg);

frontend/src/views/RoutesView.vue

@@ -5,7 +5,9 @@ import { useRouteStore } from '@/stores/route'
 import { useTaxiStore } from '@/stores/taxi'
 import { analyticsService } from '@/services/analyticsService'
 import FavoriteButton from '@/components/FavoriteButton.vue'
+import { useI18n } from 'vue-i18n'
 
+const { t } = useI18n()
 const router = useRouter()
 const routeStore = useRouteStore()
 const taxiStore = useTaxiStore()
@@ -80,7 +82,7 @@ const correlimientos = computed(() => {
           :class="activeTab === 'routes' ? 'bg-primary shadow-lg text-slate-900' : 'bg-transparent text-slate-500 dark:text-gray-500'"
         >
           <span class="material-icons text-lg">directions_bus</span>
-          Rutas de Bus
+          {{ t('routesView.busTab') }}
         </button>
         <button 
           @click="activeTab = 'taxis'"
@@ -88,7 +90,7 @@ const correlimientos = computed(() => {
           :class="activeTab === 'taxis' ? 'bg-primary shadow-lg text-slate-900' : 'bg-transparent text-slate-500 dark:text-gray-500'"
         >
           <span class="material-icons text-lg">local_taxi</span>
-          Taxis Locales
+          {{ t('routesView.taxiTab') }}
         </button>
       </div>
 
@@ -102,7 +104,7 @@ const correlimientos = computed(() => {
                 v-model="originSearch"
                 @keyup.enter="handleBusSearch"
                 class="bg-transparent border-none focus:ring-0 text-sm font-semibold w-full placeholder:text-slate-400 dark:placeholder:text-gray-500"
-                placeholder="Ciudad de Origen"
+                :placeholder="t('routesView.originPlaceholder')"
               />
             </div>
           </div>
@@ -113,12 +115,12 @@ const correlimientos = computed(() => {
                 v-model="destinationSearch"
                 @keyup.enter="handleBusSearch"
                 class="bg-transparent border-none focus:ring-0 text-sm font-semibold w-full placeholder:text-slate-400 dark:placeholder:text-gray-500"
-                placeholder="Ciudad de Destino"
+                :placeholder="t('routesView.destPlaceholder')"
               />
             </div>
           </div>
           <button @click="handleBusSearch" class="w-full bg-primary py-4 rounded-2xl text-slate-900 font-bold uppercase tracking-widest text-xs shadow-lg active:scale-95 transition-all">
-            Buscar Rutas
+            {{ t('routesView.searchBtn') }}
           </button>
         </div>
 
@@ -132,7 +134,7 @@ const correlimientos = computed(() => {
                   @change="handleTaxiFilter"
                   class="bg-transparent border-none focus:ring-0 text-sm font-semibold w-full dark:text-gray-200 appearance-none cursor-pointer"
                 >
-                  <option value="">Todos los corregimientos</option>
+                  <option value="">{{ t('routesView.allCorregimientos') }}</option>
                   <option v-for="c in correlimientos" :key="c" :value="c">{{ c }}</option>
                 </select>
                 <span class="material-icons ml-auto text-gray-500 text-sm">unfold_more</span>
@@ -140,7 +142,7 @@ const correlimientos = computed(() => {
             </div>
           </div>
           <div class="flex flex-col items-center justify-center px-2">
-            <span class="text-[10px] font-black text-slate-400 dark:text-gray-400 mb-2 uppercase">Inglés</span>
+            <span class="text-[10px] font-black text-slate-400 dark:text-gray-400 mb-2 uppercase">{{ t('routesView.english') }}</span>
             <div 
               @click="englishOnly = !englishOnly; handleTaxiFilter()"
               class="size-10 rounded-lg border-2 border-primary flex items-center justify-center bg-transparent cursor-pointer transition-colors"
@@ -156,7 +158,7 @@ const correlimientos = computed(() => {
     <!-- Results Area -->
     <div class="flex-1 px-6 pt-8 space-y-4 pb-32">
       <h2 class="text-[11px] font-black text-slate-400 dark:text-gray-500 uppercase tracking-[0.15em] mb-4">
-        {{ activeTab === 'routes' ? 'Rutas Disponibles' : 'Conductores Recomendados' }}
+        {{ activeTab === 'routes' ? t('routesView.availableRoutes') : t('routesView.recommendedDrivers') }}
       </h2>
 
       <!-- Loading Results -->
@@ -181,7 +183,7 @@ const correlimientos = computed(() => {
               <div>
                 <div class="flex items-center gap-2">
                   <p class="font-extrabold text-xl">{{ route.name }}</p>
-                  <span class="px-2 py-0.5 rounded-full bg-primary text-[9px] font-black uppercase tracking-wider text-slate-900">ACTIVA</span>
+                  <span class="px-2 py-0.5 rounded-full bg-primary text-[9px] font-black uppercase tracking-wider text-slate-900">{{ t('routesView.active') }}</span>
                 </div>
                 <p class="text-[11px] text-slate-500 dark:text-gray-400 font-bold uppercase tracking-tight">
                   {{ route.origin_city }} → {{ route.destination_city }}
@@ -198,15 +200,15 @@ const correlimientos = computed(() => {
           </div>
           <div class="flex items-center justify-between">
             <div class="flex items-center gap-2 bg-white dark:bg-input-dark px-3 py-2 rounded-xl border border-slate-200 dark:border-white/5">
-              <span class="text-[10px] font-black dark:text-gray-200">{{ route.estimated_duration_minutes }} min • {{ route.distance_km }} km</span>
+              <span class="text-[10px] font-black dark:text-gray-200">{{ route.estimated_duration_minutes }} {{ t('routesView.minutes') }} • {{ route.distance_km }} {{ t('routesView.km') }}</span>
             </div>
             <button class="bg-primary px-8 py-3 rounded-2xl text-xs font-black uppercase tracking-widest shadow-sm hover:brightness-110 text-slate-900 transition-all">
-              Ver Horarios
+              {{ t('routesView.findSchedules') }}
             </button>
           </div>
         </div>
         <div v-if="routeStore.allRoutes.length === 0" class="text-center py-10 opacity-50 italic">
-          No se encontraron rutas para tu búsqueda.
+          {{ t('routesView.noRoutes') }}
         </div>
       </template>
 
@@ -247,18 +249,18 @@ const correlimientos = computed(() => {
           <div class="flex items-center justify-between">
             <div class="flex items-center gap-2 bg-white dark:bg-input-dark px-3 py-2 rounded-xl border border-slate-200 dark:border-white/5">
               <span class="text-[10px] font-black dark:text-gray-200">{{ taxi.rating || 5.0 }} ★</span>
-              <span v-if="taxi.english_speaking" class="text-[10px] font-black text-blue-500 uppercase">EN</span>
+              <span v-if="taxi.english_speaking" class="text-[10px] font-black text-blue-500 uppercase">{{ t('routesView.english') }}</span>
             </div>
             <button 
               @click="callTaxi(taxi.phone_number)"
               class="bg-primary px-8 py-3 rounded-2xl text-xs font-black uppercase tracking-widest shadow-sm hover:brightness-110 text-slate-900 transition-all"
             >
-              Contactar
+              {{ t('routesView.contact') }}
             </button>
           </div>
         </div>
         <div v-if="taxiStore.taxis.length === 0" class="text-center py-10 opacity-50 italic">
-          No hay taxis disponibles en esta zona.
+          {{ t('routesView.noTaxis') }}
         </div>
       </template>
     </div>

frontend/src/views/SchedulesView.vue

@@ -5,8 +5,10 @@ import { useRouteStore } from '@/stores/route'
 import { formatTo12Hour } from '@/utils/timeFormatter'
 import { analyticsService } from '@/services/analyticsService'
 import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
 
 const route = useRoute()
+const { t } = useI18n()
 const scheduleStore = useScheduleStore()
 const routeStore = useRouteStore()
 
@@ -15,9 +17,9 @@ const dayFilter = ref<'all' | 'today' | 'tomorrow'>('today')
 
 // ── Tipos de día
 const DAY_TYPES: Record<string, string> = {
-  'weekday':  'Días de semana',
+  'weekday':  t('schedules.types.weekday'),
-  'weekend':  'Fin de semana',
+  'weekend':  t('schedules.types.weekend'),
-  'holiday':  'Festivo',
+  'holiday':  t('schedules.types.holiday'),
 }
 
 // ── Calcular estado del bus según horario
@@ -72,9 +74,9 @@ function getDayLabel(schedule: any): string {
   const now = new Date()
   const todayType = (now.getDay() === 0 || now.getDay() === 6) ? 'weekend' : 'weekday'
   
-  if (type === 'todos') return 'Diario'
+  if (type === 'todos') return t('coupons.active') // Or add "Daily" to JSON
-  if (type === todayType) return 'Hoy'
+  if (type === todayType) return t('schedules.today') || 'Hoy'
-  return 'Mañana'
+  return t('schedules.tomorrow') || 'Mañana'
 }
 
 // ── Filtrado de horarios
@@ -169,9 +171,9 @@ onUnmounted(() => {
 
     <!-- ── HEADER ── -->
     <header class="sch-header">
-      <h1 class="sch-title">Horarios</h1>
+      <h1 class="sch-title">{{ t('schedules.title') }}</h1>
       <p class="sch-subtitle" v-if="!routeStore.hasSelectedRoute">
-        Selecciona una ruta para ver los próximos buses
+        {{ t('schedules.selectRoute') }}
       </p>
     </header>
 
@@ -191,7 +193,7 @@ onUnmounted(() => {
               <span class="material-icons">directions_bus</span>
             </div>
             <span class="trigger-text" :class="{ 'trigger-text--selected': routeStore.hasSelectedRoute }">
-              {{ routeStore.isLoadingRoutes ? 'Cargando rutas...' : (routeStore.selectedRouteName || 'Selecciona una ruta...') }}
+              {{ routeStore.isLoadingRoutes ? t('schedules.loadingRoutes') : (routeStore.selectedRouteName || t('schedules.placeholder')) }}
             </span>
           </div>
           <span class="material-icons trigger-arrow" :class="{ 'trigger-arrow--up': dropdownOpen }">
@@ -207,7 +209,7 @@ onUnmounted(() => {
               class="dropdown-loading"
             >
               <div class="spinner-sm"></div>
-              <span>Cargando rutas...</span>
+              <span>{{ t('schedules.loadingRoutes') }}</span>
             </div>
             <template v-else>
               <button
@@ -222,7 +224,7 @@ onUnmounted(() => {
                 <span v-if="r.id === routeStore.selectedRouteId" class="material-icons dropdown-item-check">check</span>
               </button>
               <div v-if="routeStore.allRoutes.length === 0" class="dropdown-empty">
-                No hay rutas disponibles
+                {{ t('schedules.noRoutesAvailable') }}
               </div>
             </template>
           </div>
@@ -241,8 +243,8 @@ onUnmounted(() => {
           <line x1="40" y1="56" x2="40" y2="62" stroke="var(--active-color)" stroke-width="3" stroke-linecap="round"/>
         </svg>
       </div>
-      <h2 class="empty-title">Aquí verás los horarios</h2>
+      <h2 class="empty-title">{{ t('schedules.schedules') }}</h2>
-      <p class="empty-sub">Elige una ruta del menú de arriba para ver los próximos buses disponibles</p>
+      <p class="empty-sub">{{ t('schedules.placeholder') }}</p>
     </div>
 
     <!-- ── CONTENIDO con ruta seleccionada ── -->
@@ -252,28 +254,28 @@ onUnmounted(() => {
       <div class="live-badge-wrap">
         <div class="live-badge">
           <span class="live-dot"></span>
-          <span>Próximas salidas</span>
+          <span>{{ t('schedules.upcoming') }}</span>
         </div>
       </div>
 
       <!-- Chips de filtro día -->
       <div class="day-chips">
-        <button class="day-chip" :class="{ 'day-chip--active': dayFilter === 'today' }" @click="dayFilter = 'today'">Hoy</button>
+        <button class="day-chip" :class="{ 'day-chip--active': dayFilter === 'today' }" @click="dayFilter = 'today'">{{ t('schedules.today') || 'Hoy' }}</button>
-        <button class="day-chip" :class="{ 'day-chip--active': dayFilter === 'tomorrow' }" @click="dayFilter = 'tomorrow'">Mañana</button>
+        <button class="day-chip" :class="{ 'day-chip--active': dayFilter === 'tomorrow' }" @click="dayFilter = 'tomorrow'">{{ t('schedules.tomorrow') || 'Mañana' }}</button>
-        <button class="day-chip" :class="{ 'day-chip--active': dayFilter === 'all' }" @click="dayFilter = 'all'">Todos</button>
+        <button class="day-chip" :class="{ 'day-chip--active': dayFilter === 'all' }" @click="dayFilter = 'all'">{{ t('common.all') || 'Todos' }}</button>
       </div>
 
       <!-- Loading -->
       <div v-if="scheduleStore.isLoading" class="state-center">
         <div class="spinner"></div>
-        <p>Cargando horarios...</p>
+        <p>{{ t('schedules.loading') || 'Cargando horarios...' }}</p>
       </div>
 
       <!-- Sin resultados en el filtro -->
       <div v-else-if="filteredSchedules.length === 0" class="empty-state empty-state--sm">
         <span class="material-icons empty-cat-icon">schedule</span>
-        <p class="empty-sub">No hay horarios para este filtro</p>
+        <p class="empty-sub">{{ t('schedules.noSchedules') }}</p>
-        <button class="chip-link" @click="dayFilter = 'all'">Ver todos los horarios</button>
+        <button class="chip-link" @click="dayFilter = 'all'">{{ t('schedules.viewAll') || 'Ver todos los horarios' }}</button>
       </div>
 
       <!-- Lista de horarios -->
@@ -297,9 +299,9 @@ onUnmounted(() => {
           <div class="card-info">
             <div class="card-top-row">
               <span class="day-tag" :class="dayFilter === 'today' ? `day-tag--${getScheduleDay(schedule)}` : 'day-tag--tomorrow'">
-                {{ dayFilter === 'tomorrow' ? 'Mañana' : (dayFilter === 'all' ? getDayLabel(schedule) : getDayLabel(schedule)) }}
+                {{ dayFilter === 'tomorrow' ? t('schedules.tomorrow') : (dayFilter === 'all' ? getDayLabel(schedule) : getDayLabel(schedule)) }}
               </span>
-              <span v-if="i === 0 && getBusStatus(schedule.departure_time) === 'departing'" class="departing-pulse">SALIENDO</span>
+              <span v-if="i === 0 && getBusStatus(schedule.departure_time) === 'departing'" class="departing-pulse">{{ t('schedules.departing') || 'SALIENDO' }}</span>
             </div>
             <p class="route-name">{{ routeStore.selectedRouteName }}</p>
             <p class="card-detail">

frontend/src/views/SplashScreen.vue

@@ -17,7 +17,7 @@
 
     <!-- Version info -->
     <div class="version-info">
-      <p class="app-subtitle">Transporte Público Boquete</p>
+      <p class="app-subtitle">{{ t('splash.subtitle') }}</p>
       <p class="app-version">Versión 2.0.1</p>
     </div>
   </div>
@@ -29,15 +29,17 @@ import { useRouter } from 'vue-router'
 import { useRouteStore } from '@/stores/route'
 import { useBusStopStore } from '@/stores/busStop'
 import { supabase } from '@/supabase'
+import { useI18n } from 'vue-i18n'
 
 const router = useRouter()
+const { t } = useI18n()
 const routeStore = useRouteStore()
 const busStopStore = useBusStopStore()
 
 const logoVisible = ref(false)
 const showLoading = ref(false)
 const loadingVisible = ref(false)
-const statusMessage = ref('Iniciando SIBU...')
+const statusMessage = ref(t('splash.starting'))
 
 onMounted(async () => {
   logoVisible.value = true
@@ -47,7 +49,7 @@ onMounted(async () => {
   // Timeout logic
   const initTimeout = setTimeout(() => {
     console.warn('Initialization taking too long, forcing navigation...')
-    statusMessage.value = 'Iniciando modo sin conexión...'
+    statusMessage.value = t('splash.offline')
     router.replace('/map')
   }, 4000)
 
@@ -93,7 +95,7 @@ async function navigate(sessionData?: any, force = false) {
 }
 
 async function performInitializationTasks() {
-  statusMessage.value = 'Verificando datos...'
+  statusMessage.value = t('splash.verifying')
   console.log('Starting initialization tasks...')
 
   // Load essential map data in parallel to save time
@@ -108,7 +110,7 @@ async function performInitializationTasks() {
     console.error('Error pre-loading map data', e)
   }
 
-  statusMessage.value = 'Listo para usar'
+  statusMessage.value = t('splash.ready')
 }
 </script>
 

frontend/src/views/TransporteLayout.vue

@@ -48,10 +48,10 @@ onMounted(async () => {
 
     <div v-if="mountError" class="error-container">
       <span class="material-icons">error_outline</span>
-      <p>Error al cargar la sección de transporte</p>
+      <p>{{ t('taxi.errorLoading') }}</p>
       <button @click="reloadPage" class="retry-btn">
         <span class="material-icons">refresh</span>
-        Reintentar
+        {{ t('common.retry') }}
       </button>
     </div>
     

frontend/src/views/transporte/ShuttleDetalle.vue

@@ -5,9 +5,11 @@ import { supabase } from '@/supabase'
 import type { Shuttle } from '@/types'
 import { getImageUrl } from '@/utils/imageUrl'
 import { analyticsService } from '@/services/analyticsService'
+import { useI18n } from 'vue-i18n'
 
 const route = useRoute()
 const router = useRouter()
+const { t } = useI18n()
 const shuttle = ref<Shuttle | null>(null)
 const cargando = ref(true)
 const error = ref<string | null>(null)
@@ -27,7 +29,7 @@ onMounted(async () => {
     if (sbError) throw sbError
     shuttle.value = data
   } catch (e: any) {
-    error.value = 'No se pudo cargar la información del viaje'
+    error.value = t('shuttle.errorLoading')
     console.error('SIBU | Error cargando shuttle:', e)
   } finally {
     cargando.value = false
@@ -51,6 +53,13 @@ const volver = () => {
     router.push('/transporte/viajes-turisticos')
   }
 }
+
+const getTripTypeLabel = (type: string) => {
+  if (type === 'one_way') return t('shuttle.oneWay')
+  if (type === 'round_trip') return t('shuttle.roundTrip')
+  if (type === 'both') return t('shuttle.both')
+  return type
+}
 </script>
 
 <template>
@@ -61,14 +70,14 @@ const volver = () => {
         <span class="material-icons text-[var(--text-primary)]">arrow_back</span>
       </button>
       <h1 class="font-bold text-[var(--text-primary)] text-lg truncate flex-1">
-        {{ shuttle?.company_name || 'Detalle del viaje' }}
+        {{ shuttle?.company_name || t('shuttle.detailTitle') }}
       </h1>
     </div>
 
     <!-- Loading -->
     <div v-if="cargando" class="flex flex-col justify-center items-center h-64 gap-3">
        <span class="material-icons spin text-4xl" style="color: var(--active-color)">refresh</span>
-       <p class="text-text-secondary font-medium animate-pulse">Cargando...</p>
+       <p class="text-text-secondary font-medium animate-pulse">{{ t('common.loading') }}</p>
     </div>
 
     <!-- Error -->
@@ -76,7 +85,7 @@ const volver = () => {
       <span class="material-icons text-red-500 text-5xl mb-3">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">
-        Volver
+        {{ t('common.back') }}
       </button>
     </div>
 
@@ -100,7 +109,7 @@ const volver = () => {
       <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">Origen</span>
+              <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>
@@ -114,7 +123,7 @@ const volver = () => {
            </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">Destino</span>
+              <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>
@@ -131,19 +140,19 @@ const volver = () => {
  
         <div class="grid grid-cols-2 gap-4 pt-4 border-t border-border">
           <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">schedule</span> Hora de salida</span>
+            <span class="text-xs text-[var(--text-secondary)] uppercase tracking-wider font-semibold flex items-center gap-1"><span class="material-icons text-sm">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>
           </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">swap_horiz</span> Tipo de viaje</span>
+            <span class="text-xs text-[var(--text-secondary)] uppercase tracking-wider font-semibold flex items-center gap-1"><span class="material-icons text-sm">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 capitalize">
+            <span class="font-semibold text-[var(--text-primary)] bg-[var(--bg-primary)] p-2 rounded-lg text-sm text-center border border-border">
-              {{ shuttle.trip_type.replace('_', ' ') }}
+              {{ getTripTypeLabel(shuttle.trip_type) }}
             </span>
           </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">g_translate</span> Idiomas</span>
+            <span class="text-xs text-[var(--text-secondary)] uppercase tracking-wider font-semibold flex items-center gap-1"><span class="material-icons text-sm">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>
@@ -154,14 +163,14 @@ const volver = () => {
       <!-- Precio -->
       <div class="rounded-2xl p-6 shadow-sm flex items-center justify-between" style="background-color: var(--active-color); color: #101820;">
         <div class="text-left">
-           <p class="text-sm font-semibold opacity-90 mb-1">Precio por pasajero</p>
+           <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>
         </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">Privado</span>
+           <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>
@@ -169,8 +178,8 @@ const volver = () => {
       <!-- Contacto -->
       <div class="bg-[var(--bg-secondary)] rounded-2xl p-5 shadow-sm space-y-4 border border-border mb-8">
         <div>
-          <h3 class="font-bold text-[var(--text-primary)] text-lg">Reserva e Información</h3>
+          <h3 class="font-bold text-[var(--text-primary)] text-lg">{{ t('shuttle.bookingInfo') }}</h3>
-          <p class="text-sm text-[var(--text-secondary)] mt-1">Contacta directamente al operador para confirmar disponibilidad.</p>
+          <p class="text-sm text-[var(--text-secondary)] mt-1">{{ t('shuttle.contactOperator') }}</p>
         </div>
         
         <div class="flex flex-col gap-3">
@@ -181,7 +190,7 @@ const volver = () => {
             @click="analyticsService.logEvent({ event_name: 'shuttle_contact', item_id: shuttle.id, properties: { action: 'whatsapp' } })"
           >
             <span class="material-icons">chat</span>
-            Reservar por WhatsApp
+            {{ t('shuttle.bookWhatsapp') }}
           </a>
           
           <a v-if="shuttle.phone_number"
@@ -190,7 +199,7 @@ const volver = () => {
             @click="analyticsService.logEvent({ event_name: 'shuttle_contact', item_id: shuttle.id, properties: { action: 'call' } })"
           >
             <span class="material-icons">phone_in_talk</span>
-            Llamar al Operador
+            {{ t('shuttle.callOperator') }}
           </a>
         </div>
       </div>

frontend/src/views/transporte/TaxisLocales.vue

@@ -95,7 +95,7 @@ function getShiftLabel(shift: string) {
         <p>{{ taxiStore.error }}</p>
         <button class="retry-btn" @click="taxiStore.loadTaxis()">
           <span class="material-icons">refresh</span>
-          Reintentar
+          {{ t('common.retry') || 'Reintentar' }}
         </button>
       </div>