Merge pull request 'feat(i18n): add bilingual support (Català / Castellano)' (#41) from feat/i18n-bilingual-ca-es into main

Reviewed-on: #41

apps/frontend-mobile/app/(tabs)/_layout.tsx

@@ -3,6 +3,7 @@ import { Ionicons } from '@expo/vector-icons';
 import { View, StyleSheet, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { useThemeContext } from '../../components/ThemeProvider';
+import { useTranslation } from '../../src/i18n';
 import { shadows } from '../../constants/theme';
 
 const TABLET_MIN_WIDTH = 768;
@@ -25,6 +26,7 @@ export default function TabLayout() {
   const { width } = useWindowDimensions();
   const isTablet = width >= TABLET_MIN_WIDTH;
   const { colors } = useThemeContext();
+  const { t } = useTranslation();
   // Use safe area insets if available, otherwise use standard Android nav bar height
   const bottomPadding = insets.bottom > 0 ? insets.bottom : ANDROID_NAV_BAR_HEIGHT;
 
@@ -62,7 +64,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="index"
         options={{
-          title: 'Inicio',
+          title: t('nav.home'),
           tabBarIcon: ({ color, size }) => (
             <Ionicons name="home" size={size} color={color} />
           ),
@@ -71,7 +73,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="search"
         options={{
-          title: 'Buscar',
+          title: t('nav.search'),
           tabBarIcon: ({ color, size }) => (
             <Ionicons name="search" size={size} color={color} />
           ),
@@ -80,7 +82,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="scan"
         options={{
-          title: 'Escanear',
+          title: t('nav.scan'),
           tabBarIcon: ({ color, size }) => <ScanIcon color={color} size={size} />,
           tabBarLabel: () => null,
         }}
@@ -88,7 +90,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="alerts"
         options={{
-          title: 'Avisos',
+          title: t('nav.alerts'),
           tabBarIcon: ({ color, size }) => (
             <Ionicons name="notifications" size={size} color={color} />
           ),
@@ -103,7 +105,7 @@ export default function TabLayout() {
       <Tabs.Screen
         name="profile"
         options={{
-          title: 'Perfil',
+          title: t('nav.profile'),
           tabBarIcon: ({ color, size }) => (
             <Ionicons name="person" size={size} color={color} />
           ),

apps/frontend-mobile/app/(tabs)/alerts.tsx

@@ -6,6 +6,7 @@ import { useThemeContext } from '../../components/ThemeProvider';
 import { useAuth } from '../../hooks/useAuth';
 import { spacing, borderRadius, shadows } from '../../constants/theme';
 import { LoadingSpinner } from '../../components/LoadingSpinner';
+import { useTranslation } from '../../src/i18n';
 import api from '../../services/api';
 
 const TABLET_MIN_WIDTH = 768;
@@ -22,6 +23,7 @@ interface NotificationItem {
 }
 
 export default function AlertsScreen() {
+  const { t } = useTranslation();
   const router = useRouter();
   const { width } = useWindowDimensions();
   const isTablet = width >= TABLET_MIN_WIDTH;
@@ -54,7 +56,7 @@ export default function AlertsScreen() {
       );
       setItems(merged);
     } catch (err: any) {
-      setError(err.message || 'No se pudieron cargar las notificaciones');
+      setError(err.message || t('alerts.loadError'));
     } finally {
       setIsLoading(false);
     }
@@ -63,12 +65,12 @@ export default function AlertsScreen() {
   async function handleDelete(item: NotificationItem) {
     const key = `${item.scope}:${item.id}`;
     Alert.alert(
-      'Eliminar notificación',
+      t('alerts.delete'),
-      `¿Eliminar la notificación de ${item.medicine_name || item.medicine_nregistro}?`,
+      `${t('alerts.deleteConfirm')} ${item.medicine_name || item.medicine_nregistro}?`,
       [
-        { text: 'Cancelar', style: 'cancel' },
+        { text: t('alerts.cancel'), style: 'cancel' },
         {
-          text: 'Eliminar',
+          text: t('alerts.confirmDelete'),
           style: 'destructive',
           onPress: async () => {
             setDeletingId(key);
@@ -78,7 +80,7 @@ export default function AlertsScreen() {
               });
               setItems(prev => prev.filter(i => !(i.scope === item.scope && i.id === item.id)));
             } catch (err: any) {
-              Alert.alert('Error', err.message || 'No se pudo eliminar');
+              Alert.alert('Error', err.message || t('alerts.deleteError'));
             } finally {
               setDeletingId(null);
             }
@@ -105,8 +107,8 @@ export default function AlertsScreen() {
               />
               <Text style={[styles.chipText, { color: colors.onPrimaryContainer }]}>
                 {item.scope === 'pharmacy'
-                  ? item.pharmacy_name || `Farmacia #${item.pharmacy_id}`
+                  ? item.pharmacy_name || `${t('alerts.pharmacy')} #${item.pharmacy_id}`
-                  : 'Cualquier farmacia'}
+                  : t('alerts.anyPharmacy')}
               </Text>
             </View>
             {item.pharmacy_address && (
@@ -132,22 +134,22 @@ export default function AlertsScreen() {
   }
 
   if (isLoading || authLoading) {
-    return <LoadingSpinner message="Cargando notificaciones..." />;
+    return <LoadingSpinner message={t('alerts.loading')} />;
   }
 
   if (!isAuthenticated) {
     return (
       <View style={[styles.container, styles.centered, { backgroundColor: colors.background }]}>
         <Ionicons name="lock-closed-outline" size={64} color={colors.border} />
-        <Text style={[styles.loginTitle, { color: colors.text }]}>Inicia sesión para continuar</Text>
+        <Text style={[styles.loginTitle, { color: colors.text }]}>{t('alerts.loginRequired')}</Text>
         <Text style={[styles.loginSubtitle, { color: colors.textSecondary }]}>
-          Necesitas estar autenticado para ver tus notificaciones
+          {t('alerts.loginDescription')}
         </Text>
         <TouchableOpacity
           style={[styles.loginButton, { backgroundColor: colors.primary }]}
           onPress={() => router.push('/auth/login')}
         >
-          <Text style={[styles.loginButtonText, { color: colors.onPrimaryContainer }]}>Iniciar Sesión</Text>
+          <Text style={[styles.loginButtonText, { color: colors.onPrimaryContainer }]}>{t('alerts.loginBtn')}</Text>
         </TouchableOpacity>
       </View>
     );
@@ -156,9 +158,9 @@ export default function AlertsScreen() {
   return (
     <View style={[styles.container, { backgroundColor: colors.background }]}>
       <View style={[styles.header, isTablet && styles.headerTablet]}>
-        <Text style={[styles.title, isTablet && styles.titleTablet, { color: colors.text }]}>Notificaciones Guardadas</Text>
+        <Text style={[styles.title, isTablet && styles.titleTablet, { color: colors.text }]}>{t('alerts.title')}</Text>
         <Text style={[styles.subtitle, isTablet && styles.subtitleTablet, { color: colors.textSecondary }]}>
-          Recibe avisos cuando medicamentos sin stock se repongan
+          {t('alerts.description')}
         </Text>
       </View>
 
@@ -166,7 +168,7 @@ export default function AlertsScreen() {
         <View style={[styles.errorContainer, isTablet && styles.errorContainerTablet, { backgroundColor: colors.dangerContainer }]}>
           <Text style={[styles.errorText, { color: colors.danger }]}>{error}</Text>
           <TouchableOpacity onPress={loadNotifications} style={styles.retryButton}>
-            <Text style={[styles.retryText, { color: colors.primary }]}>Reintentar</Text>
+            <Text style={[styles.retryText, { color: colors.primary }]}>{t('alerts.retry')}</Text>
           </TouchableOpacity>
         </View>
       )}
@@ -174,9 +176,9 @@ export default function AlertsScreen() {
       {!error && items.length === 0 && (
         <View style={styles.emptyContainer}>
           <Ionicons name="notifications-off-outline" size={isTablet ? 80 : 64} color={colors.border} />
-          <Text style={[styles.emptyTitle, isTablet && styles.emptyTitleTablet, { color: colors.text }]}>Sin notificaciones</Text>
+          <Text style={[styles.emptyTitle, isTablet && styles.emptyTitleTablet, { color: colors.text }]}>{t('alerts.empty')}</Text>
           <Text style={[styles.emptyText, isTablet && styles.emptyTextTablet, { color: colors.textSecondary }]}>
-            Toca la campana en una farmacia sin stock para recibir notificaciones cuando se reponga.
+            {t('alerts.emptyDescription')}
           </Text>
         </View>
       )}

apps/frontend-mobile/app/(tabs)/index.tsx

@@ -3,6 +3,7 @@ import { View, Text, StyleSheet, TouchableOpacity, Image, useWindowDimensions }
 import { Ionicons } from '@expo/vector-icons';
 import { useRouter } from 'expo-router';
 import { useThemeContext } from '../../components/ThemeProvider';
+import { useTranslation } from '../../src/i18n';
 import { spacing, borderRadius, shadows } from '../../constants/theme';
 
 const TABLET_MIN_WIDTH = 768;
@@ -12,6 +13,7 @@ export default function HomeScreen() {
   const { width } = useWindowDimensions();
   const isTablet = width >= TABLET_MIN_WIDTH;
   const { colors } = useThemeContext();
+  const { t } = useTranslation();
 
   return (
     <View style={[styles.container, { backgroundColor: colors.background }]}>
@@ -23,7 +25,7 @@ export default function HomeScreen() {
         />
         <Text style={[styles.brandName, isTablet && styles.brandNameTablet, { color: colors.text }]}>FarmaClic</Text>
         <Text style={[styles.description, isTablet && styles.descriptionTablet, { color: colors.textSecondary }]}>
-          Encuentra tus medicamentos en farmacias cercanas
+          {t('home.description')}
         </Text>
       </View>
 
@@ -37,7 +39,7 @@ export default function HomeScreen() {
             <Ionicons name="search" size={isTablet ? 28 : 24} color={colors.onPrimaryContainer} />
           </View>
           <View style={styles.cardContent}>
-            <Text style={[styles.cardLabel, isTablet && styles.cardLabelTablet, { color: colors.onPrimaryContainer }]}>Buscar Medicamento</Text>
+            <Text style={[styles.cardLabel, isTablet && styles.cardLabelTablet, { color: colors.onPrimaryContainer }]}>{t('home.searchMedicine')}</Text>
             <Ionicons name="chevron-forward" size={20} color={colors.onPrimaryContainer} style={{ opacity: 0.7 }} />
           </View>
         </TouchableOpacity>
@@ -51,7 +53,7 @@ export default function HomeScreen() {
             <Ionicons name="scan" size={isTablet ? 28 : 24} color="#ffffff" />
           </View>
           <View style={styles.cardContent}>
-            <Text style={[styles.cardLabel, styles.cardLabelScan, isTablet && styles.cardLabelTablet]}>Escanear TSI</Text>
+            <Text style={[styles.cardLabel, styles.cardLabelScan, isTablet && styles.cardLabelTablet]}>{t('home.scanTSI')}</Text>
             <Ionicons name="chevron-forward" size={20} color="#ffffff" style={{ opacity: 0.7 }} />
           </View>
         </TouchableOpacity>

apps/frontend-mobile/app/(tabs)/profile.tsx

@@ -6,6 +6,7 @@ import * as ImagePicker from 'expo-image-picker';
 import { useAuth } from '../../hooks/useAuth';
 import { useThemeContext } from '../../components/ThemeProvider';
 import { useThemeStore, ThemeMode } from '../../store/themeStore';
+import { useTranslation } from '../../src/i18n';
 import { spacing, borderRadius, shadows } from '../../constants/theme';
 import api from '../../services/api';
 
@@ -62,10 +63,10 @@ interface Address {
   created_at: string;
 }
 
-const THEME_OPTIONS: { mode: ThemeMode; label: string; icon: string }[] = [
+const THEME_OPTIONS: { mode: ThemeMode; labelKey: string; icon: string }[] = [
-  { mode: 'system', label: 'Sistema', icon: 'phone-portrait-outline' },
+  { mode: 'system', labelKey: 'profile.themeSystem', icon: 'phone-portrait-outline' },
-  { mode: 'light', label: 'Claro', icon: 'sunny-outline' },
+  { mode: 'light', labelKey: 'profile.themeLight', icon: 'sunny-outline' },
-  { mode: 'dark', label: 'Oscuro', icon: 'moon-outline' },
+  { mode: 'dark', labelKey: 'profile.themeDark', icon: 'moon-outline' },
 ];
 
 export default function ProfileScreen() {
@@ -74,6 +75,7 @@ export default function ProfileScreen() {
   const isTablet = width >= TABLET_MIN_WIDTH;
   const { user, isAuthenticated, isLoading, logout, isAdmin } = useAuth();
   const { colors, isDark } = useThemeContext();
+  const { t, lang, setLang } = useTranslation();
   const themeMode = useThemeStore((s) => s.mode);
   const setThemeMode = useThemeStore((s) => s.setMode);
 
@@ -146,10 +148,10 @@ export default function ProfileScreen() {
       });
       setFirstName(res.data.first_name || '');
       setLastName(res.data.last_name || '');
-      setConfigFeedback({ type: 'ok', text: 'Perfil guardado.' });
+      setConfigFeedback({ type: 'ok', text: t('profile.profileSaved') });
       setTimeout(() => setShowConfig(false), 1200);
     } catch (err: any) {
-      setConfigFeedback({ type: 'err', text: err.message || 'Error al guardar' });
+      setConfigFeedback({ type: 'err', text: err.message || t('profile.saveError') });
     } finally { setConfigSaving(false); }
   }
 
@@ -164,7 +166,7 @@ export default function ProfileScreen() {
 
   async function handleTakePhoto() {
     const { status } = await ImagePicker.requestCameraPermissionsAsync();
-    if (status !== 'granted') { Alert.alert('Permiso requerido', 'Necesitamos permiso para acceder a la cámara.'); return; }
+    if (status !== 'granted') { Alert.alert(t('profile.cameraPermission'), t('profile.cameraPermissionDesc')); return; }
     const result = await ImagePicker.launchCameraAsync({ allowsEditing: true, aspect: [1, 1], quality: 0.8, base64: true });
     if (!result.canceled && result.assets[0]?.base64) {
       const dataUri = `data:${result.assets[0].mimeType};base64,${result.assets[0].base64}`;
@@ -204,12 +206,12 @@ export default function ProfileScreen() {
 
   async function handleAddressSave() {
     const addr = formAddress.trim();
-    if (!addr) { setFormError('La dirección es obligatoria'); return; }
+    if (!addr) { setFormError(t('profile.addressRequired')); return; }
     setFormSaving(true); setFormError('');
     try {
       const url = editingAddressId ? `/api/addresses/${editingAddressId}` : '/api/addresses';
       const res = await fetch(url, { method: editingAddressId ? 'PUT' : 'POST', headers: { 'Content-Type': 'application/json' }, credentials: 'include', body: JSON.stringify({ address: addr, label: formLabel.trim(), is_default: formDefault }) });
-      if (!res.ok) { const err = await res.json().catch(() => ({})); throw new Error(err.error || 'Error al guardar'); }
+      if (!res.ok) { const err = await res.json().catch(() => ({})); throw new Error(err.error || t('profile.saveError')); }
       setShowAddressForm(false); setEditingAddressId(null); loadAddresses();
     } catch (err: any) { setFormError(err.message); } finally { setFormSaving(false); }
   }
@@ -223,9 +225,9 @@ export default function ProfileScreen() {
   }
 
   const handleLogout = () => {
-    Alert.alert('Cerrar Sesión', '¿Estás seguro que deseas cerrar sesión?', [
+    Alert.alert(t('profile.logoutTitle'), t('profile.logoutConfirm'), [
-      { text: 'Cancelar', style: 'cancel' },
+      { text: t('profile.logoutCancel'), style: 'cancel' },
-      { text: 'Cerrar Sesión', style: 'destructive', onPress: async () => { await logout(); router.replace('/auth/login'); } },
+      { text: t('profile.logoutConfirmBtn'), style: 'destructive', onPress: async () => { await logout(); router.replace('/auth/login'); } },
     ]);
   };
 
@@ -246,12 +248,12 @@ export default function ProfileScreen() {
           <View style={[styles.authIconCircle, { backgroundColor: colors.primaryContainer }]}>
             <Ionicons name="person-outline" size={isTablet ? 60 : 48} color={colors.primary} />
           </View>
-          <Text style={[styles.authTitle, isTablet && styles.authTitleTablet, { color: colors.text }]}>Inicia Sesión</Text>
+          <Text style={[styles.authTitle, isTablet && styles.authTitleTablet, { color: colors.text }]}>{t('profile.loginTitle')}</Text>
           <Text style={[styles.authSubtitle, isTablet && styles.authSubtitleTablet, { color: colors.textSecondary }]}>
-            Inicia sesión para acceder a tu perfil, notificaciones y más
+            {t('profile.loginDescription')}
           </Text>
           <TouchableOpacity style={[styles.authButton, { backgroundColor: colors.primary }]} onPress={() => router.push('/auth/login')}>
-            <Text style={[styles.authButtonText, { color: colors.onPrimaryContainer }]}>Iniciar Sesión</Text>
+            <Text style={[styles.authButtonText, { color: colors.onPrimaryContainer }]}>{t('profile.loginBtn')}</Text>
           </TouchableOpacity>
         </View>
       </View>
@@ -287,15 +289,15 @@ export default function ProfileScreen() {
         <View style={[styles.card, { backgroundColor: colors.card }, shadows.card]}>
           <View style={styles.cardHeader}>
             <Ionicons name="person-outline" size={18} color={colors.primary} />
-            <Text style={[styles.cardTitle, { color: colors.text }]}>Datos personales</Text>
+            <Text style={[styles.cardTitle, { color: colors.text }]}>{t('profile.personalData')}</Text>
           </View>
           <View style={styles.infoGrid}>
             <View style={[styles.infoBox, { backgroundColor: colors.surfaceLow }]}>
-              <Text style={[styles.infoLabel, { color: colors.textSecondary }]}>Nombre</Text>
+              <Text style={[styles.infoLabel, { color: colors.textSecondary }]}>{t('profile.firstName')}</Text>
               <Text style={[styles.infoValue, { color: colors.text }]}>{firstName || '—'}</Text>
             </View>
             <View style={[styles.infoBox, { backgroundColor: colors.surfaceLow }]}>
-              <Text style={[styles.infoLabel, { color: colors.textSecondary }]}>Apellidos</Text>
+              <Text style={[styles.infoLabel, { color: colors.textSecondary }]}>{t('profile.lastName')}</Text>
               <Text style={[styles.infoValue, { color: colors.text }]}>{lastName || '—'}</Text>
             </View>
           </View>
@@ -306,7 +308,7 @@ export default function ProfileScreen() {
       <View style={[styles.card, { backgroundColor: colors.card }, shadows.card]}>
         <View style={styles.cardHeader}>
           <Ionicons name={getThemeModeIcon()} size={18} color={colors.primary} />
-          <Text style={[styles.cardTitle, { color: colors.text }]}>Apariencia</Text>
+          <Text style={[styles.cardTitle, { color: colors.text }]}>{t('profile.appearance')}</Text>
         </View>
         <View style={[styles.themePills, { backgroundColor: colors.surfaceLow }]}>
           {THEME_OPTIONS.map((opt) => (
@@ -316,7 +318,30 @@ export default function ProfileScreen() {
               onPress={() => setThemeMode(opt.mode)}
             >
               <Ionicons name={opt.icon as any} size={16} color={themeMode === opt.mode ? colors.onPrimaryContainer : colors.textSecondary} />
-              <Text style={[styles.themePillText, { color: themeMode === opt.mode ? colors.onPrimaryContainer : colors.textSecondary }]}>{opt.label}</Text>
+              <Text style={[styles.themePillText, { color: themeMode === opt.mode ? colors.onPrimaryContainer : colors.textSecondary }]}>{t(opt.labelKey)}</Text>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </View>
+
+      {/* Language card */}
+      <View style={[styles.card, { backgroundColor: colors.card }, shadows.card]}>
+        <View style={styles.cardHeader}>
+          <Ionicons name="globe-outline" size={18} color={colors.primary} />
+          <Text style={[styles.cardTitle, { color: colors.text }]}>{t('profile.language')}</Text>
+        </View>
+        <View style={[styles.themePills, { backgroundColor: colors.surfaceLow }]}>
+          {[
+            { value: 'ca' as const, labelKey: 'profile.languageCatalan', icon: 'language-outline' },
+            { value: 'es' as const, labelKey: 'profile.languageSpanish', icon: 'language-outline' },
+          ].map((opt) => (
+            <TouchableOpacity
+              key={opt.value}
+              style={[styles.themePill, lang === opt.value && { backgroundColor: colors.primary }]}
+              onPress={() => setLang(opt.value)}
+            >
+              <Ionicons name={opt.icon as any} size={16} color={lang === opt.value ? colors.onPrimaryContainer : colors.textSecondary} />
+              <Text style={[styles.themePillText, { color: lang === opt.value ? colors.onPrimaryContainer : colors.textSecondary }]}>{t(opt.labelKey)}</Text>
             </TouchableOpacity>
           ))}
         </View>
@@ -328,7 +353,7 @@ export default function ProfileScreen() {
           <View style={[styles.menuIconCircle, { backgroundColor: colors.surfaceLow }]}>
             <Ionicons name="settings-outline" size={20} color={colors.primary} />
           </View>
-          <Text style={[styles.menuLabel, { color: colors.text }]}>Configuración</Text>
+          <Text style={[styles.menuLabel, { color: colors.text }]}>{t('profile.config')}</Text>
           <Ionicons name="chevron-forward" size={18} color={colors.textSecondary} />
         </TouchableOpacity>
 
@@ -338,7 +363,7 @@ export default function ProfileScreen() {
           <View style={[styles.menuIconCircle, { backgroundColor: colors.surfaceLow }]}>
             <Ionicons name="location-outline" size={20} color={colors.primary} />
           </View>
-          <Text style={[styles.menuLabel, { color: colors.text }]}>Mis Direcciones</Text>
+          <Text style={[styles.menuLabel, { color: colors.text }]}>{t('profile.myAddresses')}</Text>
           <Ionicons name="chevron-forward" size={18} color={colors.textSecondary} />
         </TouchableOpacity>
 
@@ -349,7 +374,7 @@ export default function ProfileScreen() {
               <View style={[styles.menuIconCircle, { backgroundColor: colors.surfaceLow }]}>
                 <Ionicons name="shield-outline" size={20} color={colors.primary} />
               </View>
-              <Text style={[styles.menuLabel, { color: colors.text }]}>Panel Admin</Text>
+              <Text style={[styles.menuLabel, { color: colors.text }]}>{t('profile.admin')}</Text>
               <Ionicons name="chevron-forward" size={18} color={colors.textSecondary} />
             </TouchableOpacity>
           </>
@@ -361,7 +386,7 @@ export default function ProfileScreen() {
         <View style={[styles.card, { backgroundColor: colors.card }, shadows.card]}>
           <View style={styles.cardHeader}>
             <Ionicons name="time-outline" size={18} color={colors.primary} />
-            <Text style={[styles.cardTitle, { color: colors.text }]}>Búsquedas recientes</Text>
+            <Text style={[styles.cardTitle, { color: colors.text }]}>{t('profile.recentSearches')}</Text>
           </View>
           {searchHistory.map((item, i) => (
             <React.Fragment key={item.id}>
@@ -381,7 +406,7 @@ export default function ProfileScreen() {
       {/* Logout */}
       <TouchableOpacity style={[styles.logoutCard, { backgroundColor: colors.card, borderColor: isDark ? '#5a2020' : '#fecaca' }]} onPress={handleLogout}>
         <Ionicons name="log-out-outline" size={20} color={colors.danger} />
-        <Text style={[styles.logoutText, { color: colors.danger }]}>Cerrar Sesión</Text>
+        <Text style={[styles.logoutText, { color: colors.danger }]}>{t('profile.logout')}</Text>
       </TouchableOpacity>
 
       <View style={{ height: spacing.xl }} />
@@ -394,16 +419,16 @@ export default function ProfileScreen() {
           <View style={[styles.modalSheet, { backgroundColor: colors.card }]}>
             <View style={[styles.modalHandle, { backgroundColor: colors.border }]} />
             <View style={[styles.modalHeader, { borderBottomColor: colors.surfaceLow }]}>
-              <Text style={[styles.modalTitle, { color: colors.text }]}>Cambiar Avatar</Text>
+              <Text style={[styles.modalTitle, { color: colors.text }]}>{t('profile.changeAvatar')}</Text>
               <TouchableOpacity onPress={() => setShowAvatarModal(false)} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
                 <Ionicons name="close" size={24} color={colors.textSecondary} />
               </TouchableOpacity>
             </View>
             <View style={[styles.avatarTabBar, { borderBottomColor: colors.surfaceLow }]}>
-              {(['presets', 'colors', 'upload'] as const).map((t) => (
+              {(['presets', 'colors', 'upload'] as const).map((tab) => (
-                <TouchableOpacity key={t} style={[styles.avatarTabBtn, avatarTab === t && { borderBottomColor: colors.primary }]} onPress={() => setAvatarTab(t)}>
+                <TouchableOpacity key={tab} style={[styles.avatarTabBtn, avatarTab === tab && { borderBottomColor: colors.primary }]} onPress={() => setAvatarTab(tab)}>
-                  <Ionicons name={t === 'presets' ? 'person-outline' : t === 'colors' ? 'color-palette-outline' : 'cloud-upload-outline'} size={18} color={avatarTab === t ? colors.primary : colors.textSecondary} />
+                  <Ionicons name={tab === 'presets' ? 'person-outline' : tab === 'colors' ? 'color-palette-outline' : 'cloud-upload-outline'} size={18} color={avatarTab === tab ? colors.primary : colors.textSecondary} />
-                  <Text style={[styles.avatarTabLabel, { color: avatarTab === t ? colors.primary : colors.textSecondary }]}>{t === 'presets' ? 'Prediseñado' : t === 'colors' ? 'Colores' : 'Subir'}</Text>
+                  <Text style={[styles.avatarTabLabel, { color: avatarTab === tab ? colors.primary : colors.textSecondary }]}>{tab === 'presets' ? t('profile.presetAvatar') : tab === 'colors' ? t('profile.colors') : t('profile.upload')}</Text>
                 </TouchableOpacity>
               ))}
             </View>
@@ -433,8 +458,8 @@ export default function ProfileScreen() {
                       <Ionicons name="camera-outline" size={28} color={colors.primary} />
                     </View>
                     <View style={{ flex: 1 }}>
-                      <Text style={[styles.uploadTitle, { color: colors.text }]}>Tomar foto</Text>
+                      <Text style={[styles.uploadTitle, { color: colors.text }]}>{t('profile.takePhoto')}</Text>
-                      <Text style={[styles.uploadSub, { color: colors.textSecondary }]}>Usa la cámara de tu dispositivo</Text>
+                      <Text style={[styles.uploadSub, { color: colors.textSecondary }]}>{t('profile.takePhotoDesc')}</Text>
                     </View>
                     <Ionicons name="chevron-forward" size={18} color={colors.textSecondary} />
                   </TouchableOpacity>
@@ -443,8 +468,8 @@ export default function ProfileScreen() {
                       <Ionicons name="images-outline" size={28} color={colors.primary} />
                     </View>
                     <View style={{ flex: 1 }}>
-                      <Text style={[styles.uploadTitle, { color: colors.text }]}>Elegir de galería</Text>
+                      <Text style={[styles.uploadTitle, { color: colors.text }]}>{t('profile.chooseGallery')}</Text>
-                      <Text style={[styles.uploadSub, { color: colors.textSecondary }]}>Selecciona una imagen existente</Text>
+                      <Text style={[styles.uploadSub, { color: colors.textSecondary }]}>{t('profile.chooseGalleryDesc')}</Text>
                     </View>
                     <Ionicons name="chevron-forward" size={18} color={colors.textSecondary} />
                   </TouchableOpacity>
@@ -461,28 +486,28 @@ export default function ProfileScreen() {
           <View style={[styles.modalSheet, { backgroundColor: colors.card }]}>
             <View style={[styles.modalHandle, { backgroundColor: colors.border }]} />
             <View style={[styles.modalHeader, { borderBottomColor: colors.surfaceLow }]}>
-              <Text style={[styles.modalTitle, { color: colors.text }]}>Configuración</Text>
+              <Text style={[styles.modalTitle, { color: colors.text }]}>{t('profile.configTitle')}</Text>
               <TouchableOpacity onPress={() => setShowConfig(false)} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
                 <Ionicons name="close" size={24} color={colors.textSecondary} />
               </TouchableOpacity>
             </View>
             <ScrollView style={styles.modalBody} contentContainerStyle={{ paddingBottom: spacing.xl }}>
               {[
-                { label: 'Nombre', value: configFirstName, onChange: setConfigFirstName, placeholder: 'Tu nombre', icon: 'person-outline' },
+                { labelKey: 'profile.firstNameLabel', placeholderKey: 'profile.firstNamePlaceholder', value: configFirstName, onChange: setConfigFirstName, icon: 'person-outline' },
-                { label: 'Apellidos', value: configLastName, onChange: setConfigLastName, placeholder: 'Tus apellidos', icon: 'person-outline' },
+                { labelKey: 'profile.lastNameLabel', placeholderKey: 'profile.lastNamePlaceholder', value: configLastName, onChange: setConfigLastName, icon: 'person-outline' },
-                { label: 'Correo electrónico', value: configEmail, onChange: setConfigEmail, placeholder: 'tu@email.com', icon: 'mail-outline', keyboard: 'email-address' as const },
+                { labelKey: 'profile.email', placeholder: 'tu@email.com', value: configEmail, onChange: setConfigEmail, icon: 'mail-outline', keyboard: 'email-address' as const },
-                { label: 'Ciudad', value: configCity, onChange: setConfigCity, placeholder: 'Tu ciudad', icon: 'business-outline' },
+                { labelKey: 'profile.city', placeholderKey: 'profile.cityPlaceholder', value: configCity, onChange: setConfigCity, icon: 'business-outline' },
-                { label: 'Dirección', value: configAddress, onChange: setConfigAddress, placeholder: 'Calle Mayor 1, Madrid', icon: 'location-outline' },
+                { labelKey: 'profile.address', placeholderKey: 'profile.addressPlaceholder', value: configAddress, onChange: setConfigAddress, icon: 'location-outline' },
               ].map((field) => (
-                <View key={field.label} style={styles.modalField}>
+                <View key={field.labelKey} style={styles.modalField}>
-                  <Text style={[styles.modalLabel, { color: colors.textSecondary }]}>{field.label}</Text>
+                  <Text style={[styles.modalLabel, { color: colors.textSecondary }]}>{t(field.labelKey)}</Text>
                   <View style={[styles.modalInputRow, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]}>
                     <Ionicons name={field.icon as any} size={18} color={colors.textSecondary} style={{ marginRight: spacing.sm }} />
                     <TextInput
                       style={[styles.modalInput, { color: colors.text }]}
                       value={field.value}
                       onChangeText={field.onChange}
-                      placeholder={field.placeholder}
+                      placeholder={field.placeholderKey ? t(field.placeholderKey) : field.placeholder}
                       placeholderTextColor={colors.textSecondary}
                       keyboardType={field.keyboard}
                       autoCapitalize="none"
@@ -501,10 +526,10 @@ export default function ProfileScreen() {
 
               <View style={styles.modalActions}>
                 <TouchableOpacity style={[styles.modalCancelBtn, { borderColor: colors.border }]} onPress={() => setShowConfig(false)} disabled={configSaving}>
-                  <Text style={[styles.modalCancelText, { color: colors.text }]}>Cancelar</Text>
+                  <Text style={[styles.modalCancelText, { color: colors.text }]}>{t('profile.cancel')}</Text>
                 </TouchableOpacity>
                 <TouchableOpacity style={[styles.modalSaveBtn, { backgroundColor: colors.primary }, configSaving && { opacity: 0.6 }]} onPress={handleConfigSave} disabled={configSaving}>
-                  {configSaving ? <ActivityIndicator color={colors.onPrimaryContainer} /> : <Text style={[styles.modalSaveText, { color: colors.onPrimaryContainer }]}>Guardar</Text>}
+                  {configSaving ? <ActivityIndicator color={colors.onPrimaryContainer} /> : <Text style={[styles.modalSaveText, { color: colors.onPrimaryContainer }]}>{t('profile.save')}</Text>}
                 </TouchableOpacity>
               </View>
             </ScrollView>
@@ -518,7 +543,7 @@ export default function ProfileScreen() {
           <View style={[styles.modalSheet, { backgroundColor: colors.card }]}>
             <View style={[styles.modalHandle, { backgroundColor: colors.border }]} />
             <View style={[styles.modalHeader, { borderBottomColor: colors.surfaceLow }]}>
-              <Text style={[styles.modalTitle, { color: colors.text }]}>Mis Direcciones</Text>
+              <Text style={[styles.modalTitle, { color: colors.text }]}>{t('profile.addressesTitle')}</Text>
               <TouchableOpacity onPress={() => { setShowAddresses(false); setShowAddressForm(false); }} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
                 <Ionicons name="close" size={24} color={colors.textSecondary} />
               </TouchableOpacity>
@@ -527,22 +552,22 @@ export default function ProfileScreen() {
               {showAddressForm ? (
                 <View>
                   <View style={styles.modalField}>
-                    <Text style={[styles.modalLabel, { color: colors.textSecondary }]}>Dirección</Text>
+                    <Text style={[styles.modalLabel, { color: colors.textSecondary }]}>{t('profile.addressLabel')}</Text>
                     <View style={[styles.modalInputRow, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]}>
                       <Ionicons name="location-outline" size={18} color={colors.textSecondary} style={{ marginRight: spacing.sm }} />
-                      <TextInput style={[styles.modalInput, { color: colors.text }]} value={formAddress} onChangeText={setFormAddress} placeholder="Calle Mayor 1, Madrid" placeholderTextColor={colors.textSecondary} editable={!formSaving} />
+                      <TextInput style={[styles.modalInput, { color: colors.text }]} value={formAddress} onChangeText={setFormAddress} placeholder={t('profile.addressPlaceholder')} placeholderTextColor={colors.textSecondary} editable={!formSaving} />
                     </View>
                   </View>
                   <View style={styles.modalField}>
-                    <Text style={[styles.modalLabel, { color: colors.textSecondary }]}>Etiqueta (opcional)</Text>
+                    <Text style={[styles.modalLabel, { color: colors.textSecondary }]}>{t('profile.addressOptional')}</Text>
                     <View style={[styles.modalInputRow, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]}>
                       <Ionicons name="pricetag-outline" size={18} color={colors.textSecondary} style={{ marginRight: spacing.sm }} />
-                      <TextInput style={[styles.modalInput, { color: colors.text }]} value={formLabel} onChangeText={setFormLabel} placeholder="Casa, Trabajo..." placeholderTextColor={colors.textSecondary} editable={!formSaving} />
+                      <TextInput style={[styles.modalInput, { color: colors.text }]} value={formLabel} onChangeText={setFormLabel} placeholder={t('profile.addressLabelPlaceholder')} placeholderTextColor={colors.textSecondary} editable={!formSaving} />
                     </View>
                   </View>
                   <TouchableOpacity style={styles.checkboxRow} onPress={() => setFormDefault(!formDefault)} disabled={formSaving}>
                     <Ionicons name={formDefault ? 'checkbox' : 'square-outline'} size={22} color={formDefault ? colors.primary : colors.textSecondary} />
-                    <Text style={[styles.checkboxLabel, { color: colors.text }]}>Dirección predeterminada</Text>
+                    <Text style={[styles.checkboxLabel, { color: colors.text }]}>{t('profile.defaultAddress')}</Text>
                   </TouchableOpacity>
                   {formError ? (
                     <View style={[styles.modalFeedback, { backgroundColor: colors.dangerContainer, borderColor: isDark ? '#5a2020' : '#fecaca' }]}>
@@ -551,10 +576,10 @@ export default function ProfileScreen() {
                   ) : null}
                   <View style={styles.modalActions}>
                     <TouchableOpacity style={[styles.modalCancelBtn, { borderColor: colors.border }]} onPress={() => { setShowAddressForm(false); setFormError(''); }} disabled={formSaving}>
-                      <Text style={[styles.modalCancelText, { color: colors.text }]}>Cancelar</Text>
+                      <Text style={[styles.modalCancelText, { color: colors.text }]}>{t('profile.cancel')}</Text>
                     </TouchableOpacity>
                     <TouchableOpacity style={[styles.modalSaveBtn, { backgroundColor: colors.primary }, formSaving && { opacity: 0.6 }]} onPress={handleAddressSave} disabled={formSaving}>
-                      {formSaving ? <ActivityIndicator color={colors.onPrimaryContainer} /> : <Text style={[styles.modalSaveText, { color: colors.onPrimaryContainer }]}>{editingAddressId ? 'Actualizar' : 'Añadir'}</Text>}
+                      {formSaving ? <ActivityIndicator color={colors.onPrimaryContainer} /> : <Text style={[styles.modalSaveText, { color: colors.onPrimaryContainer }]}>{editingAddressId ? t('profile.update') : t('profile.add')}</Text>}
                     </TouchableOpacity>
                   </View>
                 </View>
@@ -567,7 +592,7 @@ export default function ProfileScreen() {
                       {user?.address && (
                         <View style={[styles.addrCard, { borderColor: colors.primary, backgroundColor: isDark ? '#1a3a1c' : '#eaf7ec' }]}>
                           <View style={{ flex: 1 }}>
-                            <Text style={[styles.addrBadge, { color: colors.primary }]}>Principal</Text>
+                            <Text style={[styles.addrBadge, { color: colors.primary }]}>{t('profile.mainAddress')}</Text>
                             <Text style={[styles.addrText, { color: colors.text }]}>{user.address}</Text>
                           </View>
                           <Ionicons name="checkmark-circle" size={20} color={colors.primary} />
@@ -580,7 +605,7 @@ export default function ProfileScreen() {
                             <Text style={[styles.addrText, { color: colors.text }]}>{addr.address}</Text>
                             {!addr.is_default && (
                               <TouchableOpacity onPress={() => handleSetDefault(addr.id)}>
-                                <Text style={[styles.addrDefaultLink, { color: colors.primary }]}>Marcar como predeterminada</Text>
+                                <Text style={[styles.addrDefaultLink, { color: colors.primary }]}>{t('profile.setDefault')}</Text>
                               </TouchableOpacity>
                             )}
                           </View>
@@ -596,7 +621,7 @@ export default function ProfileScreen() {
                       ))}
                       <TouchableOpacity style={[styles.addAddrBtn, { borderColor: colors.border }]} onPress={openAddAddressForm}>
                         <Ionicons name="add-circle-outline" size={20} color={colors.primary} />
-                        <Text style={[styles.addAddrText, { color: colors.primary }]}>Añadir dirección</Text>
+                        <Text style={[styles.addAddrText, { color: colors.primary }]}>{t('profile.addAddress')}</Text>
                       </TouchableOpacity>
                     </View>
                   )}

apps/frontend-mobile/app/(tabs)/scan.tsx

@@ -4,6 +4,7 @@ import { Ionicons } from '@expo/vector-icons';
 import { useRouter } from 'expo-router';
 import * as ImagePicker from 'expo-image-picker';
 import { useThemeContext } from '../../components/ThemeProvider';
+import { useTranslation } from '../../src/i18n';
 import { spacing, borderRadius, shadows } from '../../constants/theme';
 
 const TABLET_MIN_WIDTH = 768;
@@ -13,6 +14,7 @@ export default function ScanTabScreen() {
   const { width } = useWindowDimensions();
   const isTablet = width >= TABLET_MIN_WIDTH;
   const { colors } = useThemeContext();
+  const { t } = useTranslation();
   const [manualNumber, setManualNumber] = useState('');
   const [selectedImage, setSelectedImage] = useState<string | null>(null);
 
@@ -20,8 +22,8 @@ export default function ScanTabScreen() {
     const { status } = await ImagePicker.requestCameraPermissionsAsync();
     if (status !== 'granted') {
       Alert.alert(
-        'Permiso requerido',
+        t('scanner.cameraPermission'),
-        'Necesitamos acceso a la cámara para tomar fotos del dispositivo.'
+        t('scanner.cameraPermissionDesc')
       );
       return;
     }
@@ -41,8 +43,8 @@ export default function ScanTabScreen() {
     const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
     if (status !== 'granted') {
       Alert.alert(
-        'Permiso requerido',
+        t('scanner.galleryPermission'),
-        'Necesitamos acceso a la galería para seleccionar fotos.'
+        t('scanner.galleryPermissionDesc')
       );
       return;
     }
@@ -61,7 +63,7 @@ export default function ScanTabScreen() {
   const handleManualSubmit = () => {
     const trimmed = manualNumber.trim();
     if (trimmed.length === 0) {
-      Alert.alert('Campo requerido', 'Por favor, introduce el número de la tarjeta.');
+      Alert.alert(t('scanner.fieldRequired'), t('scanner.fieldRequiredDesc'));
       return;
     }
     router.push(`/medicine/${trimmed}`);
@@ -76,9 +78,9 @@ export default function ScanTabScreen() {
         <View style={[styles.iconContainer, isTablet && styles.iconContainerTablet, { backgroundColor: colors.primaryContainer }]}>
           <Ionicons name="scan" size={isTablet ? 80 : 64} color={colors.scanButton} />
         </View>
-        <Text style={[styles.title, isTablet && styles.titleTablet, { color: colors.text }]}>Escanear TSI</Text>
+        <Text style={[styles.title, isTablet && styles.titleTablet, { color: colors.text }]}>{t('scanner.title')}</Text>
         <Text style={[styles.description, isTablet && styles.descriptionTablet, { color: colors.textSecondary }]}>
-          Escanea el código de barras de tu tarjeta sanitaria para encontrar tus medicamentos
+          {t('scanner.description')}
         </Text>
         <TouchableOpacity
           style={[styles.primaryButton, shadows.scanButton, isTablet && styles.primaryButtonTablet]}
@@ -87,14 +89,14 @@ export default function ScanTabScreen() {
         >
           <Ionicons name="scan" size={isTablet ? 28 : 24} color="#ffffff" />
           <Text style={[styles.primaryButtonText, isTablet && styles.primaryButtonTextTablet]}>
-            Iniciar escaneo
+            {t('scanner.startScan')}
           </Text>
         </TouchableOpacity>
 
         {/* Separator */}
         <View style={styles.separator}>
           <View style={[styles.separatorLine, { backgroundColor: colors.border }]} />
-          <Text style={[styles.separatorText, { color: colors.textSecondary }]}>o</Text>
+          <Text style={[styles.separatorText, { color: colors.textSecondary }]}>{t('scanner.or')}</Text>
           <View style={[styles.separatorLine, { backgroundColor: colors.border }]} />
         </View>
 
@@ -103,10 +105,10 @@ export default function ScanTabScreen() {
           <Ionicons name="camera" size={24} color={colors.primary} />
           <View style={styles.optionTextContainer}>
             <Text style={[styles.optionTitle, isTablet && styles.optionTitleTablet, { color: colors.text }]}>
-              Subir foto del dispositivo
+              {t('scanner.uploadPhoto')}
             </Text>
             <Text style={[styles.optionDescription, isTablet && styles.optionDescriptionTablet, { color: colors.textSecondary }]}>
-              Toma o selecciona una foto del dispositivo sanitario
+              {t('scanner.uploadDescription')}
             </Text>
           </View>
         </View>
@@ -117,7 +119,7 @@ export default function ScanTabScreen() {
             onPress={handleTakePhoto}
           >
             <Ionicons name="camera-outline" size={20} color={colors.primary} />
-            <Text style={[styles.photoButtonText, { color: colors.primary }]}>Tomar foto</Text>
+            <Text style={[styles.photoButtonText, { color: colors.primary }]}>{t('scanner.takePhoto')}</Text>
           </TouchableOpacity>
           <TouchableOpacity
             style={[styles.photoButton, isTablet && styles.photoButtonTablet, { backgroundColor: colors.primaryContainer, borderColor: colors.primary }]}
@@ -125,13 +127,13 @@ export default function ScanTabScreen() {
             onPress={handleSelectFromGallery}
           >
             <Ionicons name="images-outline" size={20} color={colors.primary} />
-            <Text style={[styles.photoButtonText, { color: colors.primary }]}>Galería</Text>
+            <Text style={[styles.photoButtonText, { color: colors.primary }]}>{t('scanner.gallery')}</Text>
           </TouchableOpacity>
         </View>
         {selectedImage && (
           <View style={styles.imagePreviewContainer}>
             <Ionicons name="checkmark-circle" size={20} color={colors.success} />
-            <Text style={[styles.imagePreviewText, { color: colors.success }]}>Foto seleccionada correctamente</Text>
+            <Text style={[styles.imagePreviewText, { color: colors.success }]}>{t('scanner.photoSelected')}</Text>
           </View>
         )}
 
@@ -140,17 +142,17 @@ export default function ScanTabScreen() {
           <Ionicons name="keypad" size={24} color={colors.primary} />
           <View style={styles.optionTextContainer}>
             <Text style={[styles.optionTitle, isTablet && styles.optionTitleTablet, { color: colors.text }]}>
-              Introducir número manualmente
+              {t('scanner.manualEntry')}
             </Text>
             <Text style={[styles.optionDescription, isTablet && styles.optionDescriptionTablet, { color: colors.textSecondary }]}>
-              Escribe el número de tu tarjeta sanitaria
+              {t('scanner.manualDescription')}
             </Text>
           </View>
         </View>
         <View style={styles.manualInputRow}>
           <TextInput
             style={[styles.manualInput, isTablet && styles.manualInputTablet, { backgroundColor: colors.card, borderColor: colors.border, color: colors.text }]}
-            placeholder="Introduce el número de tarjeta"
+            placeholder={t('scanner.manualPlaceholder')}
             placeholderTextColor={colors.textSecondary}
             value={manualNumber}
             onChangeText={setManualNumber}

apps/frontend-mobile/app/(tabs)/search.tsx

@@ -14,6 +14,7 @@ import { useThemeContext } from '../../components/ThemeProvider';
 import { spacing, borderRadius } from '../../constants/theme';
 import { Medicine } from '../../types';
 import { config } from '../../constants/config';
+import { useTranslation } from '../../src/i18n';
 
 const TABLET_MIN_WIDTH = 768;
 
@@ -25,6 +26,7 @@ const suggestions = [
 ];
 
 export default function SearchScreen() {
+  const { t } = useTranslation();
   const { width } = useWindowDimensions();
   const isTablet = width >= TABLET_MIN_WIDTH;
   const { isAuthenticated } = useAuth();
@@ -68,7 +70,7 @@ export default function SearchScreen() {
         const data = await searchMedicines(debouncedQuery);
         setResults(data);
       } catch (err) {
-        setError('Error al buscar medicamentos');
+        setError(t('search.error'));
         console.error(err);
       } finally {
         setIsLoading(false);
@@ -106,7 +108,7 @@ export default function SearchScreen() {
       {query.length >= 2 && (results.length + products.length) > 0 && (
         <View style={styles.resultsSummary}>
           <Text style={[styles.resultsSummaryText, { color: colors.textSecondary }]}>
-            {results.length + products.length} resultados encontrados
+            {results.length + products.length} {t('search.resultsFound')}
           </Text>
         </View>
       )}
@@ -114,7 +116,7 @@ export default function SearchScreen() {
       {showSuggestions && (
         <>
           <View style={[styles.suggestionsSection, isTablet && styles.suggestionsSectionTablet]}>
-            <Text style={[styles.sectionTitle, { color: colors.text }]}>Sugerencias</Text>
+            <Text style={[styles.sectionTitle, { color: colors.text }]}>{t('search.suggestions')}</Text>
             <View style={styles.suggestionsGrid}>
               {suggestions.map((s) => (
                 <TouchableOpacity
@@ -134,7 +136,7 @@ export default function SearchScreen() {
 
           {isAuthenticated && recentSearches.length > 0 && (
             <View style={[styles.recentSection, isTablet && styles.recentSectionTablet]}>
-              <Text style={[styles.sectionTitle, { color: colors.text }]}>Búsquedas recientes</Text>
+              <Text style={[styles.sectionTitle, { color: colors.text }]}>{t('search.recentSearches')}</Text>
               {recentSearches.map((term) => (
                 <TouchableOpacity
                   key={term}
@@ -154,7 +156,7 @@ export default function SearchScreen() {
         </>
       )}
 
-      {isLoading && <LoadingSpinner message="Buscando..." />}
+      {isLoading && <LoadingSpinner message={t('search.loading')} />}
 
       {error && (
         <View style={[styles.errorContainer, isTablet && styles.errorContainerTablet, { backgroundColor: colors.dangerContainer }]}>
@@ -164,7 +166,7 @@ export default function SearchScreen() {
 
       {!isLoading && !error && results.length === 0 && products.length === 0 && query.length >= 2 && (
         <View style={styles.emptyContainer}>
-          <Text style={[styles.emptyText, { color: colors.textSecondary }]}>No se encontraron resultados</Text>
+          <Text style={[styles.emptyText, { color: colors.textSecondary }]}>{t('search.noResults')}</Text>
         </View>
       )}
 
@@ -176,7 +178,7 @@ export default function SearchScreen() {
           <>
             {products.length > 0 && (
               <View style={styles.section}>
-                <Text style={[styles.sectionTitle, { color: colors.text }]}>Parafarmacia</Text>
+                <Text style={[styles.sectionTitle, { color: colors.text }]}>{t('search.parapharmacy')}</Text>
                 {products.map((product) => (
                   <TouchableOpacity
                     key={`${product.source}-${product.id || product._id}`}
@@ -187,7 +189,7 @@ export default function SearchScreen() {
                     <View style={styles.productInfo}>
                       <View style={styles.badges}>
                         <View style={[styles.sourceBadge, { backgroundColor: '#16a34a' }]}>
-                          <Text style={styles.badgeText}>Parafarmacia</Text>
+                          <Text style={styles.badgeText}>{t('search.parapharmacy')}</Text>
                         </View>
                       </View>
                       <Text style={[styles.productName, { color: colors.text }]} numberOfLines={1}>{product.name}</Text>

apps/frontend-mobile/app/_layout.tsx

@@ -8,6 +8,7 @@ import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { useAuthStore } from '../store/authStore';
 import { registerForPushNotifications, addNotificationListener, addNotificationResponseListener } from '../services/notifications';
 import { ThemeProvider, useThemeContext } from '../components/ThemeProvider';
+import { LanguageProvider, useTranslation } from '../src/i18n';
 import { initFaro } from '../services/faro';
 
 // Boot Faro RUM once, as early as possible.
@@ -21,6 +22,7 @@ const bgDark = require('../assets/bg_dark.png');
 function RootLayoutInner() {
   const { checkAuth } = useAuthStore();
   const { colors, isDark } = useThemeContext();
+  const { t } = useTranslation();
   const notificationListener = useRef<ReturnType<typeof addNotificationListener>>();
   const responseListener = useRef<ReturnType<typeof addNotificationResponseListener>>();
 
@@ -56,30 +58,30 @@ function RootLayoutInner() {
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
         <Stack.Screen
           name="medicine/[id]"
-          options={{ title: 'Medicamento' }}
+          options={{ title: t('stack.medicine') }}
         />
         <Stack.Screen
           name="pharmacy/[id]"
-          options={{ title: 'Farmacia' }}
+          options={{ title: t('stack.pharmacy') }}
         />
         <Stack.Screen
           name="scanner"
           options={{
-            title: 'Escanear',
+            title: t('stack.scanner'),
             headerShown: false,
           }}
         />
         <Stack.Screen
           name="auth/login"
           options={{
-            title: 'Iniciar Sesión',
+            title: t('stack.login'),
             headerShown: false,
           }}
         />
         <Stack.Screen
           name="auth/register"
           options={{
-            title: 'Registrarse',
+            title: t('stack.register'),
             headerShown: false,
           }}
         />
@@ -112,11 +114,13 @@ export default function RootLayout() {
     <GestureHandlerRootView style={styles.root}>
       <SafeAreaProvider>
         <QueryClientProvider client={queryClient}>
+          <LanguageProvider>
             <ThemeProvider>
               <ThemedBackground>
                 <RootLayoutInner />
               </ThemedBackground>
             </ThemeProvider>
+          </LanguageProvider>
         </QueryClientProvider>
       </SafeAreaProvider>
     </GestureHandlerRootView>

apps/frontend-mobile/app/auth/login.tsx

@@ -22,6 +22,7 @@ import {
   saveBiometricCredentials,
   getBiometricUsername,
 } from '../../services/biometrics';
+import { useTranslation } from '../../src/i18n';
 
 type Tab = 'login' | 'register';
 
@@ -29,6 +30,7 @@ export default function LoginScreen() {
   const router = useRouter();
   const { login } = useAuthStore();
   const { colors } = useThemeContext();
+  const { t } = useTranslation();
   const [tab, setTab] = useState<Tab>('login');
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
@@ -64,17 +66,17 @@ export default function LoginScreen() {
 
   const handleSubmit = async () => {
     if (!username.trim() || !password) {
-      Alert.alert('Error', 'Por favor completa todos los campos');
+      Alert.alert(t('login.alert.error'), t('login.alert.fillFields'));
       return;
     }
 
     if (isRegister) {
       if (password.length < 8) {
-        Alert.alert('Error', 'La contraseña debe tener al menos 8 caracteres');
+        Alert.alert(t('login.alert.error'), t('login.alert.passwordLength'));
         return;
       }
       if (password !== confirmPassword) {
-        Alert.alert('Error', 'Las contraseñas no coinciden');
+        Alert.alert(t('login.alert.error'), t('login.alert.passwordMismatch'));
         return;
       }
     }
@@ -83,8 +85,8 @@ export default function LoginScreen() {
     try {
       if (isRegister) {
         await register(username.trim(), password);
-        Alert.alert('Éxito', 'Cuenta creada correctamente', [
+        Alert.alert(t('login.alert.success'), t('login.alert.accountCreated'), [
-          { text: 'OK', onPress: () => setTab('login') },
+          { text: t('login.alert.ok'), onPress: () => setTab('login') },
         ]);
       } else {
         await login(username.trim(), password);
@@ -95,8 +97,8 @@ export default function LoginScreen() {
       }
     } catch (error) {
       Alert.alert(
-        'Error',
+        t('login.alert.error'),
-        isRegister ? 'No se pudo crear la cuenta' : 'Credenciales incorrectas'
+        isRegister ? t('login.alert.createError') : t('login.alert.wrongCredentials')
       );
     } finally {
       setIsLoading(false);
@@ -105,7 +107,7 @@ export default function LoginScreen() {
 
   const handleBiometricLogin = async () => {
     if (!biometricUsername) {
-      Alert.alert('Error', 'No hay credenciales biométricas guardadas');
+      Alert.alert(t('login.alert.error'), t('login.alert.noBiometrics'));
       return;
     }
 
@@ -116,10 +118,10 @@ export default function LoginScreen() {
         await login(biometricUsername, '');
         router.replace('/(tabs)');
       } else {
-        Alert.alert('Error', 'Autenticación biométrica fallida');
+        Alert.alert(t('login.alert.error'), t('login.alert.biometricFailed'));
       }
     } catch (error) {
-      Alert.alert('Error', 'Error en la autenticación biométrica');
+      Alert.alert(t('login.alert.error'), t('login.alert.biometricError'));
     } finally {
       setIsLoading(false);
     }
@@ -158,7 +160,7 @@ export default function LoginScreen() {
                 !isRegister && styles.tabTextActive,
               ]}
             >
-              Iniciar Sesión
+              {t('login.tab.login')}
             </Text>
           </TouchableOpacity>
           <TouchableOpacity
@@ -176,7 +178,7 @@ export default function LoginScreen() {
                 isRegister && styles.tabTextActive,
               ]}
             >
-              Crear Cuenta
+              {t('login.tab.register')}
             </Text>
           </TouchableOpacity>
         </View>
@@ -185,12 +187,12 @@ export default function LoginScreen() {
         <View style={[styles.card, { backgroundColor: colors.card }, shadows.card]}>
           {/* Header */}
           <Text style={[styles.title, { color: colors.text }]}>
-            {isRegister ? 'Crea tu cuenta' : 'Bienvenido de nuevo'}
+            {isRegister ? t('login.title.register') : t('login.title.login')}
           </Text>
           <Text style={[styles.subtitle, { color: colors.textSecondary }]}>
             {isRegister
-              ? 'Guarda tu dirección y recibe notificaciones cuando lleguen medicamentos.'
+              ? t('login.subtitle.register')
-              : 'Inicia sesión para gestionar tu perfil y notificaciones.'}
+              : t('login.subtitle.login')}
           </Text>
 
           {/* Username */}
@@ -200,7 +202,7 @@ export default function LoginScreen() {
               style={[styles.input, { color: colors.text }]}
               value={username}
               onChangeText={setUsername}
-              placeholder="Usuario"
+              placeholder={t('login.username')}
               placeholderTextColor={colors.textSecondary}
               autoCapitalize="none"
               autoCorrect={false}
@@ -215,7 +217,7 @@ export default function LoginScreen() {
               style={[styles.input, { color: colors.text }]}
               value={password}
               onChangeText={setPassword}
-              placeholder="Contraseña"
+              placeholder={t('login.password')}
               placeholderTextColor={colors.textSecondary}
               secureTextEntry
               autoComplete={isRegister ? 'new-password' : 'current-password'}
@@ -230,7 +232,7 @@ export default function LoginScreen() {
                 style={[styles.input, { color: colors.text }]}
                 value={confirmPassword}
                 onChangeText={setConfirmPassword}
-                placeholder="Confirmar contraseña"
+                placeholder={t('login.confirmPassword')}
                 placeholderTextColor={colors.textSecondary}
                 secureTextEntry
                 autoComplete="new-password"
@@ -242,10 +244,10 @@ export default function LoginScreen() {
           {isRegister && (
             <View style={styles.hints}>
               <Text style={[styles.hint, { color: colors.textSecondary }]}>
-                <Ionicons name="information-circle-outline" size={14} color={colors.textSecondary} /> 3-32 caracteres para el usuario
+                <Ionicons name="information-circle-outline" size={14} color={colors.textSecondary} /> {t('login.hint.username')}
               </Text>
               <Text style={[styles.hint, { color: colors.textSecondary }]}>
-                <Ionicons name="information-circle-outline" size={14} color={colors.textSecondary} /> Mínimo 8 caracteres para la contraseña
+                <Ionicons name="information-circle-outline" size={14} color={colors.textSecondary} /> {t('login.hint.password')}
               </Text>
             </View>
           )}
@@ -260,7 +262,7 @@ export default function LoginScreen() {
               <Ionicons name="hourglass" size={20} color={colors.onPrimaryContainer} />
             ) : (
               <Text style={[styles.buttonText, { color: colors.onPrimaryContainer }]}>
-                {isRegister ? 'Crear Cuenta' : 'Iniciar Sesión'}
+                {isRegister ? t('login.tab.register') : t('login.tab.login')}
               </Text>
             )}
           </TouchableOpacity>
@@ -273,7 +275,7 @@ export default function LoginScreen() {
               disabled={isLoading}
             >
               <Ionicons name="finger-print" size={22} color={colors.primary} />
-              <Text style={[styles.biometricText, { color: colors.primary }]}>Iniciar con biometría</Text>
+              <Text style={[styles.biometricText, { color: colors.primary }]}>{t('login.biometric')}</Text>
             </TouchableOpacity>
           )}
         </View>
@@ -284,7 +286,7 @@ export default function LoginScreen() {
           onPress={() => setTab(isRegister ? 'login' : 'register')}
         >
           <Text style={[styles.linkText, { color: colors.primary }]}>
-            {isRegister ? '¿Ya tienes cuenta? Inicia sesión' : '¿No tienes cuenta? Regístrate'}
+            {isRegister ? t('login.link.toLogin') : t('login.link.toRegister')}
           </Text>
         </TouchableOpacity>
       </View>

apps/frontend-mobile/app/medicine/[id].tsx

@@ -11,6 +11,7 @@ import { LoadingSpinner } from '../../components/LoadingSpinner';
 import { useThemeContext } from '../../components/ThemeProvider';
 import { spacing, borderRadius } from '../../constants/theme';
 import { Medicine, PharmacyMedicine } from '../../types';
+import { useTranslation } from '../../src/i18n';
 
 function haversineKm(lat1: number, lon1: number, lat2: number, lon2: number): number {
   const R = 6371;
@@ -43,6 +44,7 @@ export default function MedicineDetailScreen() {
   const router = useRouter();
   const { colors } = useThemeContext();
   const { isAuthenticated } = useAuth();
+  const { t } = useTranslation();
   const [medicine, setMedicine] = useState<Medicine | null>(null);
   const [pharmacies, setPharmacies] = useState<PharmacyMedicine[]>([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -86,7 +88,7 @@ export default function MedicineDetailScreen() {
     try {
       const { status } = await Location.requestForegroundPermissionsAsync();
       if (status !== 'granted') {
-        setLocationError('Permiso de ubicación denegado');
+        setLocationError(t('medicine.locationDenied'));
         setLocating(false);
         return;
       }
@@ -95,7 +97,7 @@ export default function MedicineDetailScreen() {
       setUserPosition({ lat: pos.coords.latitude, lon: pos.coords.longitude });
       setSortByDistance(true);
     } catch {
-      setLocationError('No se pudo obtener tu ubicación');
+      setLocationError(t('medicine.locationError'));
     } finally {
       setLocating(false);
     }
@@ -156,13 +158,13 @@ export default function MedicineDetailScreen() {
   };
 
   if (isLoading) {
-    return <LoadingSpinner message="Cargando medicamento..." />;
+    return <LoadingSpinner message={t('medicine.loading')} />;
   }
 
   if (!medicine) {
     return (
       <View style={[styles.errorContainer, { backgroundColor: colors.background }]}>
-        <Text style={[styles.errorText, { color: colors.textSecondary }]}>Medicamento no encontrado</Text>
+        <Text style={[styles.errorText, { color: colors.textSecondary }]}>{t('medicine.notFound')}</Text>
       </View>
     );
   }
@@ -190,23 +192,23 @@ export default function MedicineDetailScreen() {
       </View>
 
       <View style={[styles.infoSection, { backgroundColor: colors.card }]}>
-        <InfoRow label="Principio activo" value={medicine.active_ingredient} colors={colors} />
+        <InfoRow label={t('medicine.activeIngredient')} value={medicine.active_ingredient} colors={colors} />
-        <InfoRow label="Laboratorio" value={medicine.laboratory} colors={colors} />
+        <InfoRow label={t('medicine.laboratory')} value={medicine.laboratory} colors={colors} />
-        <InfoRow label="Forma farmacéutica" value={medicine.form} colors={colors} />
+        <InfoRow label={t('medicine.form')} value={medicine.form} colors={colors} />
-        <InfoRow label="Dosificación" value={medicine.dosage} colors={colors} />
+        <InfoRow label={t('medicine.dosage')} value={medicine.dosage} colors={colors} />
         <InfoRow
-          label="Precio"
+          label={t('medicine.price')}
-          value={medicine.precio != null ? `${medicine.precio.toFixed(2)} €` : 'No disponible'}
+          value={medicine.precio != null ? `${medicine.precio.toFixed(2)} €` : t('medicine.notAvailable')}
           colors={colors}
         />
-        <InfoRow label="Registro" value={medicine.nregistro} colors={colors} />
+        <InfoRow label={t('medicine.registration')} value={medicine.nregistro} colors={colors} />
       </View>
 
       {locatedPharmacies.length > 0 && (
         <View style={[styles.mapContainer, { backgroundColor: colors.surfaceVariant }]}>
           <Ionicons name="map-outline" size={48} color={colors.textSecondary} />
           <Text style={[styles.mapPlaceholder, { color: colors.textSecondary }]}>
-            Mapa próximamente…
+            {t('medicine.mapSoon')}
           </Text>
         </View>
       )}
@@ -214,7 +216,7 @@ export default function MedicineDetailScreen() {
       <View style={styles.pharmaciesSection}>
         <View style={styles.pharmaciesHeader}>
           <Text style={[styles.sectionTitle, { color: colors.text }]}>
-            Farmacias ({sortedPharmacies.length})
+            {t('medicine.pharmacies')} ({sortedPharmacies.length})
           </Text>
           <TouchableOpacity
             style={[styles.sortButton, sortByDistance && styles.sortButtonActive, { backgroundColor: sortByDistance ? colors.primary : colors.primaryContainer, borderColor: colors.primary }]}
@@ -224,10 +226,10 @@ export default function MedicineDetailScreen() {
             <Ionicons name="location" size={16} color={sortByDistance ? '#fff' : colors.primary} />
             <Text style={[styles.sortButtonText, sortByDistance && styles.sortButtonTextActive, { color: sortByDistance ? '#fff' : colors.primary }]}>
               {locating
-                ? 'Localizando…'
+                ? t('medicine.locating')
                 : sortByDistance
-                  ? 'Distancia · Reset'
+                  ? t('medicine.distanceReset')
-                  : 'Ordenar por distancia'}
+                  : t('medicine.sortByDistance')}
             </Text>
           </TouchableOpacity>
         </View>
@@ -236,13 +238,13 @@ export default function MedicineDetailScreen() {
           <View style={[styles.locationErrorContainer, { backgroundColor: colors.dangerContainer }]}>
             <Text style={[styles.locationErrorText, { color: colors.danger }]}>{locationError}</Text>
             <TouchableOpacity onPress={handleSortByDistance}>
-              <Text style={[styles.retryText, { color: colors.primary }]}>Reintentar</Text>
+              <Text style={[styles.retryText, { color: colors.primary }]}>{t('medicine.retry')}</Text>
             </TouchableOpacity>
           </View>
         )}
 
         {sortedPharmacies.length === 0 ? (
-          <Text style={[styles.noPharmacies, { color: colors.textSecondary }]}>No hay farmacias disponibles</Text>
+          <Text style={[styles.noPharmacies, { color: colors.textSecondary }]}>{t('medicine.noPharmacies')}</Text>
         ) : (
           sortedPharmacies.map((pharm) => {
             const lat = getPharmacyLat(pharm);
@@ -271,10 +273,10 @@ export default function MedicineDetailScreen() {
                     {pharm.price != null ? (
                       <Text style={[styles.price, { color: colors.primary }]}>{pharm.price.toFixed(2)} €</Text>
                     ) : (
-                      <Text style={[styles.price, { color: colors.primary }]}>Consultar precio</Text>
+                      <Text style={[styles.price, { color: colors.primary }]}>{t('medicine.checkPrice')}</Text>
                     )}
                     {pharm.stock > 0 && (
-                      <Text style={[styles.stock, { color: colors.textSecondary }]}>Stock: {pharm.stock}</Text>
+                      <Text style={[styles.stock, { color: colors.textSecondary }]}>{t('pharmacy.stock')}{pharm.stock}</Text>
                     )}
                   </View>
                 </TouchableOpacity>
@@ -284,7 +286,7 @@ export default function MedicineDetailScreen() {
                     onPress={() => handleDirections(lat, lon)}
                   >
                     <Ionicons name="navigate" size={16} color={colors.primary} />
-                    <Text style={[styles.directionsText, { color: colors.primary }]}>Cómo llegar</Text>
+                    <Text style={[styles.directionsText, { color: colors.primary }]}>{t('medicine.howToGet')}</Text>
                   </TouchableOpacity>
                 )}
               </View>

apps/frontend-mobile/app/pharmacy/[id].tsx

@@ -10,12 +10,14 @@ import { LoadingSpinner } from '../../components/LoadingSpinner';
 import { useThemeContext } from '../../components/ThemeProvider';
 import { spacing, borderRadius } from '../../constants/theme';
 import { Pharmacy, PharmacyMedicine } from '../../types';
+import { useTranslation } from '../../src/i18n';
 
 export default function PharmacyDetailScreen() {
   const { id } = useLocalSearchParams<{ id: string }>();
   const router = useRouter();
   const { colors } = useThemeContext();
   const { isAuthenticated } = useAuth();
+  const { t } = useTranslation();
   const [pharmacy, setPharmacy] = useState<Pharmacy | null>(null);
   const [medicines, setMedicines] = useState<PharmacyMedicine[]>([]);
   const [isLoading, setIsLoading] = useState(true);
@@ -77,13 +79,13 @@ export default function PharmacyDetailScreen() {
   };
 
   if (isLoading) {
-    return <LoadingSpinner message="Cargando farmacia..." />;
+    return <LoadingSpinner message={t('pharmacy.loading')} />;
   }
 
   if (!pharmacy) {
     return (
       <View style={[styles.errorContainer, { backgroundColor: colors.background }]}>
-        <Text style={[styles.errorText, { color: colors.textSecondary }]}>Farmacia no encontrada</Text>
+        <Text style={[styles.errorText, { color: colors.textSecondary }]}>{t('pharmacy.notFound')}</Text>
       </View>
     );
   }
@@ -97,12 +99,12 @@ export default function PharmacyDetailScreen() {
       <View style={[styles.actionsRow, { backgroundColor: colors.card, borderBottomColor: colors.separator }]}>
         <TouchableOpacity style={styles.actionButton} onPress={handleCall}>
           <Ionicons name="call" size={20} color={colors.primary} />
-          <Text style={[styles.actionText, { color: colors.primary }]}>Llamar</Text>
+          <Text style={[styles.actionText, { color: colors.primary }]}>{t('pharmacy.call')}</Text>
         </TouchableOpacity>
 
         <TouchableOpacity style={styles.actionButton} onPress={handleDirections}>
           <Ionicons name="navigate" size={20} color={colors.primary} />
-          <Text style={[styles.actionText, { color: colors.primary }]}>Cómo llegar</Text>
+          <Text style={[styles.actionText, { color: colors.primary }]}>{t('pharmacy.howToGet')}</Text>
         </TouchableOpacity>
       </View>
 
@@ -143,11 +145,11 @@ export default function PharmacyDetailScreen() {
 
       <View style={styles.medicinesSection}>
         <Text style={[styles.sectionTitle, { color: colors.text }]}>
-          Medicamentos ({medicines.length})
+          {t('pharmacy.medications')} ({medicines.length})
         </Text>
 
         {medicines.length === 0 ? (
-          <Text style={[styles.noMedicines, { color: colors.textSecondary }]}>No hay medicamentos disponibles</Text>
+          <Text style={[styles.noMedicines, { color: colors.textSecondary }]}>{t('pharmacy.noMedications')}</Text>
         ) : (
           medicines.map((med) => {
             const isSub = subscribedMeds.has(med.medicine_nregistro);
@@ -159,11 +161,11 @@ export default function PharmacyDetailScreen() {
                 >
                   <View style={styles.medicineInfo}>
                     <Text style={[styles.medicineName, { color: colors.text }]}>{med.medicine_name}</Text>
-                    <Text style={[styles.medicineNregistro, { color: colors.textSecondary }]}>Reg: {med.medicine_nregistro}</Text>
+                    <Text style={[styles.medicineNregistro, { color: colors.textSecondary }]}>{t('pharmacy.reg')}{med.medicine_nregistro}</Text>
                   </View>
                   <View style={styles.medicineStock}>
                     <Text style={[styles.price, { color: colors.primary }]}>{med.price.toFixed(2)} €</Text>
-                    <Text style={[styles.stock, { color: colors.textSecondary }]}>Stock: {med.stock}</Text>
+                    <Text style={[styles.stock, { color: colors.textSecondary }]}>{t('pharmacy.stock')}{med.stock}</Text>
                   </View>
                 </TouchableOpacity>
                 {isAuthenticated && (
@@ -177,7 +179,7 @@ export default function PharmacyDetailScreen() {
                       color={isSub ? '#fff' : colors.textSecondary}
                     />
                     <Text style={[styles.bellText, { color: isSub ? '#fff' : colors.textSecondary }]}>
-                      {isSub ? 'Notificaciones activas' : 'Notificarme cuando haya stock'}
+                      {isSub ? t('pharmacy.notificationsActive') : t('pharmacy.notifyWhenAvailable')}
                     </Text>
                   </TouchableOpacity>
                 )}

apps/frontend-mobile/app/product/[source]/[id].tsx

@@ -5,10 +5,12 @@ import { getProduct, Product } from '../../../services/products';
 import { LoadingSpinner } from '../../../components/LoadingSpinner';
 import { useThemeContext } from '../../../components/ThemeProvider';
 import { spacing, borderRadius } from '../../../constants/theme';
+import { useTranslation } from '../../../src/i18n';
 
 export default function ProductDetailScreen() {
   const { source, id } = useLocalSearchParams<{ source: string; id: string }>();
   const { colors } = useThemeContext();
+  const { t } = useTranslation();
   const [product, setProduct] = useState<Product | null>(null);
   const [isLoading, setIsLoading] = useState(true);
   const [error, setError] = useState(false);
@@ -35,13 +37,13 @@ export default function ProductDetailScreen() {
   }, [source, id]);
 
   if (isLoading) {
-    return <LoadingSpinner message="Cargando producto..." />;
+    return <LoadingSpinner message={t('product.loading')} />;
   }
 
   if (error || !product) {
     return (
       <View style={[styles.errorContainer, { backgroundColor: colors.background }]}>
-        <Text style={[styles.errorText, { color: colors.textSecondary }]}>Producto no encontrado</Text>
+        <Text style={[styles.errorText, { color: colors.textSecondary }]}>{t('product.notFound')}</Text>
       </View>
     );
   }
@@ -54,7 +56,7 @@ export default function ProductDetailScreen() {
         <Image source={{ uri: product.image_url }} style={styles.image} resizeMode="contain" />
       ) : (
         <View style={[styles.imagePlaceholder, { backgroundColor: colors.surfaceLow }]}>
-          <Text style={[styles.placeholderText, { color: colors.textSecondary }]}>Sin imagen</Text>
+          <Text style={[styles.placeholderText, { color: colors.textSecondary }]}>{t('product.noImage')}</Text>
         </View>
       )}
 
@@ -62,7 +64,7 @@ export default function ProductDetailScreen() {
         <View style={styles.nameRow}>
           <Text style={[styles.name, { color: colors.text }]}>{product.name}</Text>
           <View style={[styles.badge, { backgroundColor: isCima ? '#2b5bb5' : '#4caf50' }]}>
-            <Text style={styles.badgeText}>{isCima ? 'CIMA' : 'Parafarmacia'}</Text>
+            <Text style={styles.badgeText}>{isCima ? 'CIMA' : t('product.parapharmacy')}</Text>
           </View>
         </View>
         {product.brand ? (
@@ -75,45 +77,45 @@ export default function ProductDetailScreen() {
 
       {isCima ? (
         <View style={[styles.infoSection, { backgroundColor: colors.card }]}>
-          <Text style={[styles.sectionTitle, { color: colors.text }]}>Detalles CIMA</Text>
+          <Text style={[styles.sectionTitle, { color: colors.text }]}>{t('product.cimaDetails')}</Text>
           {product.active_ingredient && (
-            <InfoRow label="Principio activo" value={product.active_ingredient} colors={colors} />
+            <InfoRow label={t('product.activeIngredient')} value={product.active_ingredient} colors={colors} />
           )}
           {product.dosage && (
-            <InfoRow label="Dosificación" value={product.dosage} colors={colors} />
+            <InfoRow label={t('product.dosage')} value={product.dosage} colors={colors} />
           )}
           {product.form && (
-            <InfoRow label="Forma farmacéutica" value={product.form} colors={colors} />
+            <InfoRow label={t('product.form')} value={product.form} colors={colors} />
           )}
           {product.prescription && (
-            <InfoRow label="Tipo de dispensación" value={product.prescription} colors={colors} />
+            <InfoRow label={t('product.dispensation')} value={product.prescription} colors={colors} />
           )}
-          <InfoRow label="Comercializado" value={product.commercialized ? 'Sí' : 'No'} colors={colors} />
+          <InfoRow label={t('product.commercialized')} value={product.commercialized ? t('product.yes') : t('product.no')} colors={colors} />
         </View>
       ) : (
         <View style={[styles.infoSection, { backgroundColor: colors.card }]}>
-          <Text style={[styles.sectionTitle, { color: colors.text }]}>Información del producto</Text>
+          <Text style={[styles.sectionTitle, { color: colors.text }]}>{t('product.productInfo')}</Text>
           {product.price != null && (
-            <InfoRow label="Precio" value={`${product.price} €`} colors={colors} />
+            <InfoRow label={t('product.price')} value={`${product.price} €`} colors={colors} />
           )}
           {product.original_price != null && product.original_price > (product.price || 0) && (
-            <InfoRow label="Precio anterior" value={`${product.original_price} €`} colors={colors} />
+            <InfoRow label={t('product.previousPrice')} value={`${product.original_price} €`} colors={colors} />
           )}
           {product.category && (
-            <InfoRow label="Categoría" value={product.category} colors={colors} />
+            <InfoRow label={t('product.category')} value={product.category} colors={colors} />
           )}
           {product.brand && (
-            <InfoRow label="Marca" value={product.brand} colors={colors} />
+            <InfoRow label={t('product.brand')} value={product.brand} colors={colors} />
           )}
           {product.source_url && (
-            <InfoRow label="Fuente" value={product.source || 'Parafarmacia'} colors={colors} />
+            <InfoRow label={t('product.source')} value={product.source || t('product.parapharmacy')} colors={colors} />
           )}
         </View>
       )}
 
       {isCima && product.photos && product.photos.length > 0 && (
         <View style={[styles.infoSection, { backgroundColor: colors.card }]}>
-          <Text style={[styles.sectionTitle, { color: colors.text }]}>Imágenes</Text>
+          <Text style={[styles.sectionTitle, { color: colors.text }]}>{t('product.images')}</Text>
           <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.photosScroll}>
             {product.photos.map((photo, i) => (
               <View key={i} style={styles.photoItem}>

apps/frontend-mobile/components/BarcodeScanner.tsx

@@ -4,6 +4,7 @@ import { CameraView, useCameraPermissions } from 'expo-camera';
 import { Ionicons } from '@expo/vector-icons';
 import { useThemeContext } from './ThemeProvider';
 import { spacing, borderRadius } from '../constants/theme';
+import { useTranslation } from '../src/i18n';
 
 interface BarcodeScannerProps {
   onBarcodeScanned: (barcode: string) => void;
@@ -14,6 +15,7 @@ export function BarcodeScanner({ onBarcodeScanned, onClose }: BarcodeScannerProp
   const [permission, requestPermission] = useCameraPermissions();
   const [scanned, setScanned] = useState(false);
   const { colors } = useThemeContext();
+  const { t } = useTranslation();
 
   if (!permission) {
     return <View style={styles.container} />;
@@ -23,15 +25,15 @@ export function BarcodeScanner({ onBarcodeScanned, onClose }: BarcodeScannerProp
     return (
       <View style={[styles.permissionContainer, { backgroundColor: colors.background }]}>
         <Ionicons name="camera" size={64} color={colors.textSecondary} />
-        <Text style={[styles.permissionTitle, { color: colors.text }]}>Permiso de cámara requerido</Text>
+        <Text style={[styles.permissionTitle, { color: colors.text }]}>{t('barcodeScanner.permissionRequired')}</Text>
         <Text style={[styles.permissionText, { color: colors.textSecondary }]}>
-          Necesitamos acceso a la cámara para escanear códigos de barras
+          {t('barcodeScanner.permissionDesc')}
         </Text>
         <TouchableOpacity style={[styles.permissionButton, { backgroundColor: colors.primary }]} onPress={requestPermission}>
-          <Text style={styles.permissionButtonText}>Conceder permiso</Text>
+          <Text style={styles.permissionButtonText}>{t('barcodeScanner.grantPermission')}</Text>
         </TouchableOpacity>
         <TouchableOpacity style={styles.cancelButton} onPress={onClose}>
-          <Text style={[styles.cancelButtonText, { color: colors.textSecondary }]}>Cancelar</Text>
+          <Text style={[styles.cancelButtonText, { color: colors.textSecondary }]}>{t('barcodeScanner.cancel')}</Text>
         </TouchableOpacity>
       </View>
     );
@@ -63,7 +65,7 @@ export function BarcodeScanner({ onBarcodeScanned, onClose }: BarcodeScannerProp
         </View>
         
         <Text style={styles.instruction}>
-          Apunta la cámara al código de barras del medicamento
+          {t('barcodeScanner.scanningHint')}
         </Text>
         
         <TouchableOpacity style={styles.closeButton} onPress={onClose}>
@@ -77,7 +79,7 @@ export function BarcodeScanner({ onBarcodeScanned, onClose }: BarcodeScannerProp
             style={[styles.scanAgainButton, { backgroundColor: colors.primary }]}
             onPress={() => setScanned(false)}
           >
-            <Text style={styles.scanAgainText}>Escanear de nuevo</Text>
+            <Text style={styles.scanAgainText}>{t('barcodeScanner.scanAgain')}</Text>
           </TouchableOpacity>
         </View>
       )}

apps/frontend-mobile/components/LoadingSpinner.tsx

@@ -2,18 +2,20 @@ import React from 'react';
 import { View, ActivityIndicator, Text, StyleSheet } from 'react-native';
 import { useThemeContext } from './ThemeProvider';
 import { spacing } from '../constants/theme';
+import { useTranslation } from '../src/i18n';
 
 interface LoadingSpinnerProps {
   message?: string;
 }
 
-export function LoadingSpinner({ message = 'Cargando...' }: LoadingSpinnerProps) {
+export function LoadingSpinner({ message }: LoadingSpinnerProps) {
   const { colors } = useThemeContext();
+  const { t } = useTranslation();
 
   return (
     <View style={styles.container}>
       <ActivityIndicator size="large" color={colors.primary} />
-      <Text style={[styles.message, { color: colors.textSecondary }]}>{message}</Text>
+      <Text style={[styles.message, { color: colors.textSecondary }]}>{message ?? t('loadingSpinner.loading')}</Text>
     </View>
   );
 }

apps/frontend-mobile/components/MedicineCard.tsx

@@ -6,6 +6,7 @@ import { useThemeContext } from './ThemeProvider';
 import { spacing, borderRadius } from '../constants/theme';
 import { StockBadge } from './StockBadge';
 import { Medicine } from '../types';
+import { useTranslation } from '../src/i18n';
 
 const TABLET_MIN_WIDTH = 768;
 
@@ -18,6 +19,7 @@ export function MedicineCard({ medicine }: MedicineCardProps) {
   const { width } = useWindowDimensions();
   const isTablet = width >= TABLET_MIN_WIDTH;
   const { colors } = useThemeContext();
+  const { t } = useTranslation();
 
   const handlePress = () => {
     router.push(`/medicine/${medicine.nregistro}`);
@@ -44,7 +46,7 @@ export function MedicineCard({ medicine }: MedicineCardProps) {
         <View style={styles.priceContainer}>
           <Ionicons name="pricetag" size={14} color={colors.textSecondary} />
           <Text style={[styles.price, isTablet && styles.priceTablet, { color: colors.primary }]}>
-            {medicine.precio != null ? `${medicine.precio.toFixed(2)} €` : 'Sin precio'}
+            {medicine.precio != null ? `${medicine.precio.toFixed(2)} €` : t('medicineCard.noPrice')}
           </Text>
         </View>
 

apps/frontend-mobile/components/SearchBar.tsx

@@ -3,6 +3,7 @@ import { View, TextInput, StyleSheet, TouchableOpacity, useWindowDimensions } fr
 import { Ionicons } from '@expo/vector-icons';
 import { useThemeContext } from './ThemeProvider';
 import { spacing, borderRadius } from '../constants/theme';
+import { useTranslation } from '../src/i18n';
 
 const TABLET_MIN_WIDTH = 768;
 
@@ -14,7 +15,7 @@ interface SearchBarProps {
 }
 
 export function SearchBar({
-  placeholder = 'Buscar medicamentos...',
+  placeholder,
   onSearch,
   value,
   onChangeText
@@ -22,6 +23,7 @@ export function SearchBar({
   const { width } = useWindowDimensions();
   const isTablet = width >= TABLET_MIN_WIDTH;
   const { colors } = useThemeContext();
+  const { t } = useTranslation();
   const [localValue, setLocalValue] = useState(value || '');
 
   const handleChange = (text: string) => {
@@ -44,7 +46,7 @@ export function SearchBar({
       <Ionicons name="search" size={20} color={colors.textSecondary} style={styles.icon} />
       <TextInput
         style={[styles.input, isTablet && styles.inputTablet, { color: colors.text }]}
-        placeholder={placeholder}
+        placeholder={placeholder ?? t('search.placeholder')}
         placeholderTextColor={colors.textSecondary}
         value={localValue}
         onChangeText={handleChange}

apps/frontend-mobile/components/StockBadge.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
 import { useThemeContext } from './ThemeProvider';
 import { borderRadius, spacing } from '../constants/theme';
+import { useTranslation } from '../src/i18n';
 
 interface StockBadgeProps {
   stock: number;
@@ -9,6 +10,7 @@ interface StockBadgeProps {
 
 export function StockBadge({ stock }: StockBadgeProps) {
   const { colors, isDark } = useThemeContext();
+  const { t } = useTranslation();
 
   const getBadgeColors = () => {
     if (stock === 0) {
@@ -25,7 +27,7 @@ export function StockBadge({ stock }: StockBadgeProps) {
   return (
     <View style={[styles.badge, { backgroundColor: badgeColors.bg }]}>
       <Text style={[styles.text, { color: badgeColors.text }]}>
-        {stock === 0 ? 'Sin stock' : stock < 5 ? `Bajo (${stock})` : `Disponible (${stock})`}
+        {stock === 0 ? t('stockBadge.outOfStock') : stock < 5 ? `${t('stockBadge.lowStock')} (${stock})` : `${t('stockBadge.inStock')} (${stock})`}
       </Text>
     </View>
   );

apps/frontend-mobile/src/i18n/LanguageContext.jsx

@@ -0,0 +1,50 @@
+import React, { createContext, useState, useCallback, useMemo } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import es from './locales/es';
+import ca from './locales/ca';
+
+const locales = { es, ca };
+const STORAGE_KEY = 'ff-lang';
+
+function getInitialLang() {
+  // Default to 'es' - will be updated from AsyncStorage in the provider
+  return 'es';
+}
+
+export const LanguageContext = createContext(null);
+
+export function LanguageProvider({ children }) {
+  const [lang, setLangState] = useState(getInitialLang);
+  const [ready, setReady] = useState(false);
+
+  // Load saved language on mount
+  React.useEffect(() => {
+    AsyncStorage.getItem(STORAGE_KEY).then((saved) => {
+      if (saved === 'ca' || saved === 'es') {
+        setLangState(saved);
+      }
+      // Default to 'es' if no saved preference
+      setReady(true);
+    }).catch(() => {
+      setReady(true);
+    });
+  }, []);
+
+  const setLang = useCallback((newLang) => {
+    if (newLang !== 'ca' && newLang !== 'es') return;
+    setLangState(newLang);
+    AsyncStorage.setItem(STORAGE_KEY, newLang).catch(() => {});
+  }, []);
+
+  const t = useCallback((key) => {
+    return locales[lang]?.[key] || locales.es[key] || key;
+  }, [lang]);
+
+  const value = useMemo(() => ({ lang, setLang, t, ready }), [lang, setLang, t, ready]);
+
+  return (
+    <LanguageContext.Provider value={value}>
+      {children}
+    </LanguageContext.Provider>
+  );
+}

apps/frontend-mobile/src/i18n/index.js

@@ -0,0 +1,2 @@
+export { LanguageProvider } from './LanguageContext';
+export { useTranslation } from './useTranslation';

apps/frontend-mobile/src/i18n/locales/ca.js

@@ -0,0 +1,228 @@
+const ca = {
+  // Tab bar
+  'nav.home': 'Inici',
+  'nav.search': 'Cercar',
+  'nav.scan': 'Escanejar',
+  'nav.alerts': 'Alertes',
+  'nav.profile': 'Perfil',
+
+  // Stack screens
+  'stack.medicine': 'Medicament',
+  'stack.pharmacy': 'Farmàcia',
+  'stack.scanner': 'Escanejar',
+  'stack.login': 'Iniciar Sessió',
+  'stack.register': 'Registrar-se',
+
+  // Home
+  'home.description': 'Trobeu els vostres medicaments a farmàcies properes',
+  'home.searchMedicine': 'Cercar Medicament',
+  'home.scanTSI': 'Escanejar TSI',
+
+  // Search
+  'search.placeholder': 'Cercar medicaments...',
+  'search.suggestions': 'Suggeriments',
+  'search.recentSearches': 'Cerques recents',
+  'search.loading': 'Cercant...',
+  'search.noResults': 'No s\'han trobat resultats',
+  'search.resultsFound': 'resultats trobats',
+  'search.parapharmacy': 'Parafarmàcia',
+  'search.error': 'Error en cercar medicaments',
+
+  // Login
+  'login.tab.login': 'Iniciar Sessió',
+  'login.tab.register': 'Crear Compte',
+  'login.title.login': 'Benvingut de nou',
+  'login.title.register': 'Crea el teu compte',
+  'login.subtitle.login': 'Inicia sessió per gestionar el teu perfil i notificacions.',
+  'login.subtitle.register': 'Desa la teva adreça i rep notificacions quan arribin medicaments.',
+  'login.username': 'Usuari',
+  'login.password': 'Contrasenya',
+  'login.confirmPassword': 'Confirmar contrasenya',
+  'login.hint.username': '3-32 caràcters per a l\'usuari',
+  'login.hint.password': 'Mínim 8 caràcters per a la contrasenya',
+  'login.biometric': 'Iniciar amb biometria',
+  'login.link.toLogin': 'Ja tens compte? Inicia sessió',
+  'login.link.toRegister': 'No tens compte? Registra\'t',
+  'login.alert.error': 'Error',
+  'login.alert.fillFields': 'Si us plau, completeu tots els camps',
+  'login.alert.passwordLength': 'La contrasenya ha de tenir almenys 8 caràcters',
+  'login.alert.passwordMismatch': 'Les contrasenyes no coincideixen',
+  'login.alert.success': 'Èxit',
+  'login.alert.accountCreated': 'Compte creat correctament',
+  'login.alert.ok': 'D\'acord',
+  'login.alert.createError': 'No s\'ha pogut crear el compte',
+  'login.alert.wrongCredentials': 'Credencials incorrectes',
+  'login.alert.noBiometrics': 'No hi ha credencials biomètriques guardades',
+  'login.alert.biometricFailed': 'Autenticació biomètrica fallida',
+  'login.alert.biometricError': 'Error en l\'autenticació biomètrica',
+
+  // Scanner
+  'scanner.title': 'Escanejar TSI',
+  'scanner.description': 'Escanegeu el codi de barres de la vostra targeta sanitària per trobar els vostres medicaments',
+  'scanner.startScan': 'Iniciar escaneig',
+  'scanner.or': 'o',
+  'scanner.uploadPhoto': 'Pujar foto del dispositiu',
+  'scanner.uploadDescription': 'Tireu o seleccioneu una foto del dispositiu sanitari',
+  'scanner.takePhoto': 'Fer foto',
+  'scanner.gallery': 'Galeria',
+  'scanner.photoSelected': 'Foto seleccionada correctament',
+  'scanner.manualEntry': 'Introduir número manualment',
+  'scanner.manualDescription': 'Escriviu el número de la vostra targeta sanitària',
+  'scanner.manualPlaceholder': 'Introduïu el número de targeta',
+  'scanner.cameraPermission': 'Permís de càmera requerit',
+  'scanner.cameraPermissionDesc': 'Necessitem accés a la càmera per fer fotos del dispositiu.',
+  'scanner.galleryPermission': 'Permís requerit',
+  'scanner.galleryPermissionDesc': 'Necessitem accés a la galeria per seleccionar fotos.',
+  'scanner.fieldRequired': 'Camp requerit',
+  'scanner.fieldRequiredDesc': 'Si us plau, introduïu el número de la targeta.',
+
+  // Alerts
+  'alerts.title': 'Notificacions Desades',
+  'alerts.description': 'Rebeu avisos quan medicaments sense estoc es repoixin',
+  'alerts.loading': 'Carregant notificacions...',
+  'alerts.loginRequired': 'Inicieu sessió per continuar',
+  'alerts.loginDescription': 'Necessiteu estar autenticat per veure les vostres notificacions',
+  'alerts.loginBtn': 'Iniciar Sessió',
+  'alerts.empty': 'Sense notificacions',
+  'alerts.emptyDescription': 'Toqueu la campana a una farmàcia sense estoc per rebre notificacions quan es repoixi.',
+  'alerts.retry': 'Tornar a provar',
+  'alerts.delete': 'Eliminar notificació',
+  'alerts.deleteConfirm': 'Eliminar la notificació de',
+  'alerts.cancel': 'Cancel·lar',
+  'alerts.confirmDelete': 'Eliminar',
+  'alerts.deleteError': 'No s\'ha pogut eliminar',
+  'alerts.loadError': 'No s\'han pogut carregar les notificacions',
+  'alerts.pharmacy': 'Farmàcia',
+  'alerts.anyPharmacy': 'Qualsevol farmàcia',
+
+  // Profile
+  'profile.title': 'Perfil',
+  'profile.loginTitle': 'Iniciar Sessió',
+  'profile.loginDescription': 'Inicieu sessió per accedir al vostre perfil, notificacions i més',
+  'profile.loginBtn': 'Iniciar Sessió',
+  'profile.personalData': 'Dades personals',
+  'profile.firstName': 'Nom',
+  'profile.lastName': 'Cognoms',
+  'profile.appearance': 'Aparença',
+  'profile.config': 'Configuració',
+  'profile.myAddresses': 'Les Meves Adreces',
+  'profile.admin': 'Panell Admin',
+  'profile.recentSearches': 'Cerques recents',
+  'profile.logout': 'Tancar Sessió',
+  'profile.logoutConfirm': 'Esteu segur que voleu tancar la sessió?',
+  'profile.logoutTitle': 'Tancar Sessió',
+  'profile.logoutCancel': 'Cancel·lar',
+  'profile.logoutConfirmBtn': 'Tancar Sessió',
+  'profile.changeAvatar': 'Canviar Avatar',
+  'profile.presetAvatar': 'Predissenyat',
+  'profile.colors': 'Colors',
+  'profile.upload': 'Pujar',
+  'profile.takePhoto': 'Fer foto',
+  'profile.takePhotoDesc': 'Useu la càmera del vostre dispositiu',
+  'profile.chooseGallery': 'Trieu de galeria',
+  'profile.chooseGalleryDesc': 'Seleccioneu una imatge existent',
+  'profile.configTitle': 'Configuració',
+  'profile.firstNameLabel': 'Nom',
+  'profile.firstNamePlaceholder': 'El vostre nom',
+  'profile.lastNameLabel': 'Cognoms',
+  'profile.lastNamePlaceholder': 'Els vostres cognoms',
+  'profile.email': 'Correu electrònic',
+  'profile.city': 'Ciutat',
+  'profile.cityPlaceholder': 'La vostra ciutat',
+  'profile.address': 'Adreça',
+  'profile.addressPlaceholder': 'Carrer Major 1, Barcelona',
+  'profile.cancel': 'Cancel·lar',
+  'profile.save': 'Desar',
+  'profile.profileSaved': 'Perfil desat.',
+  'profile.saveError': 'Error en desar',
+  'profile.addressRequired': 'L\'adreça és obligatòria',
+  'profile.addressesTitle': 'Les Meves Adreces',
+  'profile.addressLabel': 'Adreça',
+  'profile.addressOptional': 'Etiqueta (opcional)',
+  'profile.addressLabelPlaceholder': 'Casa, Treball...',
+  'profile.defaultAddress': 'Adreça predeterminada',
+  'profile.update': 'Actualitzar',
+  'profile.add': 'Afegir',
+  'profile.mainAddress': 'Principal',
+  'profile.setDefault': 'Establir com a predeterminada',
+  'profile.addAddress': 'Afegir adreça',
+  'profile.cameraPermission': 'Permís requerit',
+  'profile.cameraPermissionDesc': 'Necessitem permís per accedir a la càmera.',
+  'profile.themeSystem': 'Sistema',
+  'profile.themeLight': 'Clar',
+  'profile.themeDark': 'Fosc',
+  'profile.language': 'Idioma',
+  'profile.languageTitle': 'Idioma de l\'aplicació',
+  'profile.languageCatalan': 'Català',
+  'profile.languageSpanish': 'Castellà',
+
+  // Medicine detail
+  'medicine.loading': 'Carregant medicament...',
+  'medicine.notFound': 'Medicament no trobat',
+  'medicine.activeIngredient': 'Principi actiu',
+  'medicine.laboratory': 'Laboratori',
+  'medicine.form': 'Forma farmacèutica',
+  'medicine.dosage': 'Dosificació',
+  'medicine.price': 'Preu',
+  'medicine.notAvailable': 'No disponible',
+  'medicine.registration': 'Registre',
+  'medicine.mapSoon': 'Mapa properament…',
+  'medicine.pharmacies': 'Farmàcies',
+  'medicine.locating': 'Localitzant…',
+  'medicine.distanceReset': 'Distància · Restablir',
+  'medicine.sortByDistance': 'Ordenar per distància',
+  'medicine.retry': 'Tornar a provar',
+  'medicine.noPharmacies': 'No hi ha farmàcies disponibles',
+  'medicine.checkPrice': 'Consultar preu',
+  'medicine.howToGet': 'Com arribar',
+  'medicine.locationDenied': 'Permís d\'ubicació denegat',
+  'medicine.locationError': 'No s\'ha pogut obtenir la vostra ubicació',
+
+  // Pharmacy detail
+  'pharmacy.loading': 'Carregant farmàcia...',
+  'pharmacy.notFound': 'Farmàcia no trobada',
+  'pharmacy.call': 'Trucar',
+  'pharmacy.howToGet': 'Com arribar',
+  'pharmacy.medications': 'Medicaments',
+  'pharmacy.noMedications': 'No hi ha medicaments disponibles',
+  'pharmacy.reg': 'Reg: ',
+  'pharmacy.stock': 'Estoc: ',
+  'pharmacy.notificationsActive': 'Notificacions actives',
+  'pharmacy.notifyWhenAvailable': 'Notificar-me quan hi hagi estoc',
+
+  // Product detail
+  'product.loading': 'Carregant producte...',
+  'product.notFound': 'Producte no trobat',
+  'product.noImage': 'Sense imatge',
+  'product.parapharmacy': 'Parafarmàcia',
+  'product.cimaDetails': 'Detalls CIMA',
+  'product.activeIngredient': 'Principi actiu',
+  'product.dosage': 'Dosificació',
+  'product.form': 'Forma farmacèutica',
+  'product.dispensation': 'Tipus de dispensació',
+  'product.commercialized': 'Comercialitzat',
+  'product.yes': 'Sí',
+  'product.no': 'No',
+  'product.productInfo': 'Informació del producte',
+  'product.price': 'Preu',
+  'product.previousPrice': 'Preu anterior',
+  'product.category': 'Categoria',
+  'product.brand': 'Marca',
+  'product.source': 'Font',
+  'product.images': 'Imatges',
+
+  // Components
+  'medicineCard.noPrice': 'Sense preu',
+  'stockBadge.outOfStock': 'Sense estoc',
+  'stockBadge.lowStock': 'Baix',
+  'stockBadge.inStock': 'Disponible',
+  'loadingSpinner.loading': 'Carregant...',
+  'barcodeScanner.permissionRequired': 'Permís de càmera requerit',
+  'barcodeScanner.permissionDesc': 'Necessitem accés a la càmera per escanejar codis de barres',
+  'barcodeScanner.grantPermission': 'Concedir permís',
+  'barcodeScanner.cancel': 'Cancel·lar',
+  'barcodeScanner.scanningHint': 'Apunteu la càmera al codi de barres del medicament',
+  'barcodeScanner.scanAgain': 'Escanejar de nou',
+};
+
+export default ca;

apps/frontend-mobile/src/i18n/locales/es.js

@@ -0,0 +1,228 @@
+const es = {
+  // Tab bar
+  'nav.home': 'Inicio',
+  'nav.search': 'Buscar',
+  'nav.scan': 'Escanear',
+  'nav.alerts': 'Avisos',
+  'nav.profile': 'Perfil',
+
+  // Stack screens
+  'stack.medicine': 'Medicamento',
+  'stack.pharmacy': 'Farmacia',
+  'stack.scanner': 'Escanear',
+  'stack.login': 'Iniciar Sesión',
+  'stack.register': 'Registrarse',
+
+  // Login / Register
+  'login.tab.login': 'Iniciar Sesión',
+  'login.tab.register': 'Crear Cuenta',
+  'login.title.login': 'Bienvenido de nuevo',
+  'login.title.register': 'Crea tu cuenta',
+  'login.subtitle.login': 'Inicia sesión para gestionar tu perfil y notificaciones.',
+  'login.subtitle.register': 'Guarda tu dirección y recibe notificaciones cuando lleguen medicamentos.',
+  'login.username': 'Usuario',
+  'login.password': 'Contraseña',
+  'login.confirmPassword': 'Confirmar contraseña',
+  'login.hint.username': '3-32 caracteres para el usuario',
+  'login.hint.password': 'Mínimo 8 caracteres para la contraseña',
+  'login.biometric': 'Iniciar con biometría',
+  'login.link.toLogin': '¿Ya tienes cuenta? Inicia sesión',
+  'login.link.toRegister': '¿No tienes cuenta? Regístrate',
+  'login.alert.error': 'Error',
+  'login.alert.fillFields': 'Por favor completa todos los campos',
+  'login.alert.passwordLength': 'La contraseña debe tener al menos 8 caracteres',
+  'login.alert.passwordMismatch': 'Las contraseñas no coinciden',
+  'login.alert.success': 'Éxito',
+  'login.alert.accountCreated': 'Cuenta creada correctamente',
+  'login.alert.ok': 'OK',
+  'login.alert.createError': 'No se pudo crear la cuenta',
+  'login.alert.wrongCredentials': 'Credenciales incorrectas',
+  'login.alert.noBiometrics': 'No hay credenciales biométricas guardadas',
+  'login.alert.biometricFailed': 'Autenticación biométrica fallida',
+  'login.alert.biometricError': 'Error en la autenticación biométrica',
+
+  // Home
+  'home.description': 'Encuentra tus medicamentos en farmacias cercanas',
+  'home.searchMedicine': 'Buscar Medicamento',
+  'home.scanTSI': 'Escanear TSI',
+
+  // Search
+  'search.placeholder': 'Buscar medicamentos...',
+  'search.suggestions': 'Sugerencias',
+  'search.recentSearches': 'Búsquedas recientes',
+  'search.loading': 'Buscando...',
+  'search.noResults': 'No se encontraron resultados',
+  'search.resultsFound': 'resultados encontrados',
+  'search.parapharmacy': 'Parafarmacia',
+  'search.error': 'Error al buscar medicamentos',
+
+  // Scanner
+  'scanner.title': 'Escanear TSI',
+  'scanner.description': 'Escanea el código de barras de tu tarjeta sanitaria para encontrar tus medicamentos',
+  'scanner.startScan': 'Iniciar escaneo',
+  'scanner.or': 'o',
+  'scanner.uploadPhoto': 'Subir foto del dispositivo',
+  'scanner.uploadDescription': 'Toma o selecciona una foto del dispositivo sanitario',
+  'scanner.takePhoto': 'Tomar foto',
+  'scanner.gallery': 'Galería',
+  'scanner.photoSelected': 'Foto seleccionada correctamente',
+  'scanner.manualEntry': 'Introducir número manualmente',
+  'scanner.manualDescription': 'Escribe el número de tu tarjeta sanitaria',
+  'scanner.manualPlaceholder': 'Introduce el número de tarjeta',
+  'scanner.cameraPermission': 'Permiso de cámara requerido',
+  'scanner.cameraPermissionDesc': 'Necesitamos acceso a la cámara para tomar fotos del dispositivo.',
+  'scanner.galleryPermission': 'Permiso requerido',
+  'scanner.galleryPermissionDesc': 'Necesitamos acceso a la galería para seleccionar fotos.',
+  'scanner.fieldRequired': 'Campo requerido',
+  'scanner.fieldRequiredDesc': 'Por favor, introduce el número de la tarjeta.',
+
+  // Alerts
+  'alerts.title': 'Notificaciones Guardadas',
+  'alerts.description': 'Recibe avisos cuando medicamentos sin stock se repongan',
+  'alerts.loading': 'Cargando notificaciones...',
+  'alerts.loginRequired': 'Inicia sesión para continuar',
+  'alerts.loginDescription': 'Necesitas estar autenticado para ver tus notificaciones',
+  'alerts.loginBtn': 'Iniciar Sesión',
+  'alerts.empty': 'Sin notificaciones',
+  'alerts.emptyDescription': 'Toca la campana en una farmacia sin stock para recibir notificaciones cuando se reponga.',
+  'alerts.retry': 'Reintentar',
+  'alerts.delete': 'Eliminar notificación',
+  'alerts.deleteConfirm': '¿Eliminar la notificación de',
+  'alerts.cancel': 'Cancelar',
+  'alerts.confirmDelete': 'Eliminar',
+  'alerts.deleteError': 'No se pudo eliminar',
+  'alerts.loadError': 'No se pudieron cargar las notificaciones',
+  'alerts.pharmacy': 'Farmacia',
+  'alerts.anyPharmacy': 'Cualquier farmacia',
+
+  // Profile
+  'profile.title': 'Perfil',
+  'profile.loginTitle': 'Inicia Sesión',
+  'profile.loginDescription': 'Inicia sesión para acceder a tu perfil, notificaciones y más',
+  'profile.loginBtn': 'Iniciar Sesión',
+  'profile.personalData': 'Datos personales',
+  'profile.firstName': 'Nombre',
+  'profile.lastName': 'Apellidos',
+  'profile.appearance': 'Apariencia',
+  'profile.config': 'Configuración',
+  'profile.myAddresses': 'Mis Direcciones',
+  'profile.admin': 'Panel Admin',
+  'profile.recentSearches': 'Búsquedas recientes',
+  'profile.logout': 'Cerrar Sesión',
+  'profile.logoutConfirm': '¿Estás seguro que deseas cerrar sesión?',
+  'profile.logoutTitle': 'Cerrar Sesión',
+  'profile.logoutCancel': 'Cancelar',
+  'profile.logoutConfirmBtn': 'Cerrar Sesión',
+  'profile.changeAvatar': 'Cambiar Avatar',
+  'profile.presetAvatar': 'Prediseñado',
+  'profile.colors': 'Colores',
+  'profile.upload': 'Subir',
+  'profile.takePhoto': 'Tomar foto',
+  'profile.takePhotoDesc': 'Usa la cámara de tu dispositivo',
+  'profile.chooseGallery': 'Elegir de galería',
+  'profile.chooseGalleryDesc': 'Selecciona una imagen existente',
+  'profile.configTitle': 'Configuración',
+  'profile.firstNameLabel': 'Nombre',
+  'profile.firstNamePlaceholder': 'Tu nombre',
+  'profile.lastNameLabel': 'Apellidos',
+  'profile.lastNamePlaceholder': 'Tus apellidos',
+  'profile.email': 'Correo electrónico',
+  'profile.city': 'Ciudad',
+  'profile.cityPlaceholder': 'Tu ciudad',
+  'profile.address': 'Dirección',
+  'profile.addressPlaceholder': 'Calle Mayor 1, Madrid',
+  'profile.cancel': 'Cancelar',
+  'profile.save': 'Guardar',
+  'profile.profileSaved': 'Perfil guardado.',
+  'profile.saveError': 'Error al guardar',
+  'profile.addressRequired': 'La dirección es obligatoria',
+  'profile.addressesTitle': 'Mis Direcciones',
+  'profile.addressLabel': 'Dirección',
+  'profile.addressOptional': 'Etiqueta (opcional)',
+  'profile.addressLabelPlaceholder': 'Casa, Trabajo...',
+  'profile.defaultAddress': 'Dirección predeterminada',
+  'profile.update': 'Actualizar',
+  'profile.add': 'Añadir',
+  'profile.mainAddress': 'Principal',
+  'profile.setDefault': 'Marcar como predeterminada',
+  'profile.addAddress': 'Añadir dirección',
+  'profile.cameraPermission': 'Permiso requerido',
+  'profile.cameraPermissionDesc': 'Necesitamos permiso para acceder a la cámara.',
+  'profile.themeSystem': 'Sistema',
+  'profile.themeLight': 'Claro',
+  'profile.themeDark': 'Oscuro',
+  'profile.language': 'Idioma',
+  'profile.languageTitle': 'Idioma de la aplicación',
+  'profile.languageCatalan': 'Català',
+  'profile.languageSpanish': 'Castellano',
+
+  // Medicine detail
+  'medicine.loading': 'Cargando medicamento...',
+  'medicine.notFound': 'Medicamento no encontrado',
+  'medicine.activeIngredient': 'Principio activo',
+  'medicine.laboratory': 'Laboratorio',
+  'medicine.form': 'Forma farmacéutica',
+  'medicine.dosage': 'Dosificación',
+  'medicine.price': 'Precio',
+  'medicine.notAvailable': 'No disponible',
+  'medicine.registration': 'Registro',
+  'medicine.mapSoon': 'Mapa próximamente…',
+  'medicine.pharmacies': 'Farmacias',
+  'medicine.locating': 'Localizando…',
+  'medicine.distanceReset': 'Distancia · Reset',
+  'medicine.sortByDistance': 'Ordenar por distancia',
+  'medicine.retry': 'Reintentar',
+  'medicine.noPharmacies': 'No hay farmacias disponibles',
+  'medicine.checkPrice': 'Consultar precio',
+  'medicine.howToGet': 'Cómo llegar',
+  'medicine.locationDenied': 'Permiso de ubicación denegado',
+  'medicine.locationError': 'No se pudo obtener tu ubicación',
+
+  // Pharmacy detail
+  'pharmacy.loading': 'Cargando farmacia...',
+  'pharmacy.notFound': 'Farmacia no encontrada',
+  'pharmacy.call': 'Llamar',
+  'pharmacy.howToGet': 'Cómo llegar',
+  'pharmacy.medications': 'Medicamentos',
+  'pharmacy.noMedications': 'No hay medicamentos disponibles',
+  'pharmacy.reg': 'Reg: ',
+  'pharmacy.stock': 'Stock: ',
+  'pharmacy.notificationsActive': 'Notificaciones activas',
+  'pharmacy.notifyWhenAvailable': 'Notificarme cuando haya stock',
+
+  // Product detail
+  'product.loading': 'Cargando producto...',
+  'product.notFound': 'Producto no encontrado',
+  'product.noImage': 'Sin imagen',
+  'product.parapharmacy': 'Parafarmacia',
+  'product.cimaDetails': 'Detalles CIMA',
+  'product.activeIngredient': 'Principio activo',
+  'product.dosage': 'Dosificación',
+  'product.form': 'Forma farmacéutica',
+  'product.dispensation': 'Tipo de dispensación',
+  'product.commercialized': 'Comercializado',
+  'product.yes': 'Sí',
+  'product.no': 'No',
+  'product.productInfo': 'Información del producto',
+  'product.price': 'Precio',
+  'product.previousPrice': 'Precio anterior',
+  'product.category': 'Categoría',
+  'product.brand': 'Marca',
+  'product.source': 'Fuente',
+  'product.images': 'Imágenes',
+
+  // Components
+  'medicineCard.noPrice': 'Sin precio',
+  'stockBadge.outOfStock': 'Sin stock',
+  'stockBadge.lowStock': 'Bajo',
+  'stockBadge.inStock': 'Disponible',
+  'loadingSpinner.loading': 'Cargando...',
+  'barcodeScanner.permissionRequired': 'Permiso de cámara requerido',
+  'barcodeScanner.permissionDesc': 'Necesitamos acceso a la cámara para escanear códigos de barras',
+  'barcodeScanner.grantPermission': 'Conceder permiso',
+  'barcodeScanner.cancel': 'Cancelar',
+  'barcodeScanner.scanningHint': 'Apunta la cámara al código de barras del medicamento',
+  'barcodeScanner.scanAgain': 'Escanear de nuevo',
+};
+
+export default es;

apps/frontend-mobile/src/i18n/useTranslation.js

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { LanguageContext } from './LanguageContext';
+
+export function useTranslation() {
+  const ctx = useContext(LanguageContext);
+  if (!ctx) throw new Error('useTranslation must be used within LanguageProvider');
+  return ctx;
+}

apps/frontend/src/App.test.jsx

@@ -1,8 +1,13 @@
 import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { render, screen, fireEvent, act } from '@testing-library/react'
+import { LanguageProvider } from './i18n'
 import HomeView from './views/HomeView.jsx'
 import SearchView from './views/SearchView.jsx'
 
+function Wrapper({ children }) {
+  return <LanguageProvider>{children}</LanguageProvider>
+}
+
 beforeEach(() => {
   vi.useFakeTimers()
 })
@@ -16,14 +21,14 @@ describe('HomeView', () => {
   it('renders two action buttons on the home screen', () => {
     const onSearch = vi.fn()
     const onScan = vi.fn()
-    render(<HomeView onSearchClick={onSearch} onScanClick={onScan} />)
+    render(<HomeView onSearchClick={onSearch} onScanClick={onScan} />, { wrapper: Wrapper })
     expect(screen.getByRole('button', { name: /buscar medicamento/i })).toBeInTheDocument()
     expect(screen.getByRole('button', { name: /escanear tsi/i })).toBeInTheDocument()
   })
 
   it('calls onSearchClick when Buscar Medicamento is clicked', async () => {
     const onSearch = vi.fn()
-    render(<HomeView onSearchClick={onSearch} onScanClick={vi.fn()} />)
+    render(<HomeView onSearchClick={onSearch} onScanClick={vi.fn()} />, { wrapper: Wrapper })
     fireEvent.click(screen.getByRole('button', { name: /buscar medicamento/i }))
     expect(onSearch).toHaveBeenCalledTimes(1)
   })
@@ -31,13 +36,13 @@ describe('HomeView', () => {
 
 describe('SearchView', () => {
   it('renders search bar with placeholder', () => {
-    render(<SearchView />)
+    render(<SearchView />, { wrapper: Wrapper })
     expect(screen.getByPlaceholderText(/escriba el nombre del medicamento/i)).toBeInTheDocument()
   })
 
   it('does not fetch for queries shorter than 2 chars', async () => {
     const fetchMock = vi.spyOn(globalThis, 'fetch')
-    render(<SearchView />)
+    render(<SearchView />, { wrapper: Wrapper })
 
     fireEvent.change(screen.getByPlaceholderText(/escriba el nombre del medicamento/i), {
       target: { value: 'a' },
@@ -59,7 +64,7 @@ describe('SearchView', () => {
       json: async () => medicines,
     })
 
-    render(<SearchView />)
+    render(<SearchView />, { wrapper: Wrapper })
 
     fireEvent.change(screen.getByPlaceholderText(/escriba el nombre del medicamento/i), {
       target: { value: 'ibu' },
@@ -81,7 +86,7 @@ describe('SearchView', () => {
       json: async () => medicines,
     })
 
-    render(<SearchView />)
+    render(<SearchView />, { wrapper: Wrapper })
     const input = screen.getByPlaceholderText(/escriba el nombre del medicamento/i)
 
     fireEvent.change(input, { target: { value: 'ibu' } })

apps/frontend/src/components/BottomNav.jsx

@@ -1,13 +1,15 @@
 import { IconHome, IconSearch, IconScan, IconBell, IconUser } from './icons';
+import { useTranslation } from '../i18n';
 import './BottomNav.css';
 
 function BottomNav({ activeTab, onChange, isLoggedIn, badgeCount }) {
+  const { t } = useTranslation();
   const tabs = [
-    { id: 'home', label: 'Inicio', Icon: IconHome },
+    { id: 'home', label: t('nav.home'), Icon: IconHome },
-    { id: 'search', label: 'Buscar', Icon: IconSearch },
+    { id: 'search', label: t('nav.search'), Icon: IconSearch },
-    { id: 'scan', label: 'Escanear', Icon: IconScan, elevated: true },
+    { id: 'scan', label: t('nav.scan'), Icon: IconScan, elevated: true },
-    { id: 'alerts', label: 'Avisos', Icon: IconBell, badge: badgeCount > 0, badgeCount },
+    { id: 'alerts', label: t('nav.alerts'), Icon: IconBell, badge: badgeCount > 0, badgeCount },
-    { id: 'profile', label: 'Usuario', Icon: IconUser },
+    { id: 'profile', label: t('nav.profile'), Icon: IconUser },
   ];
 
   return (

apps/frontend/src/components/ErrorBoundary.jsx

@@ -1,6 +1,9 @@
 import React from 'react';
+import { LanguageContext } from '../i18n/LanguageContext';
 
 export default class ErrorBoundary extends React.Component {
+  static contextType = LanguageContext;
+
   constructor(props) {
     super(props);
     this.state = { hasError: false, error: null };
@@ -25,6 +28,7 @@ export default class ErrorBoundary extends React.Component {
 
   render() {
     if (this.state.hasError) {
+      const t = this.context?.t || ((k) => k);
       return (
         <div style={{
           padding: '2rem',
@@ -32,8 +36,8 @@ export default class ErrorBoundary extends React.Component {
           fontFamily: 'system-ui, sans-serif',
           color: '#333',
         }}>
-          <h2>Algo salió mal</h2>
+          <h2>{t('error.title')}</h2>
-          <p style={{ color: '#666' }}>Ha ocurrido un error inesperado. Por favor, recarga la página.</p>
+          <p style={{ color: '#666' }}>{t('error.description')}</p>
           <button
             onClick={() => window.location.reload()}
             style={{
@@ -47,7 +51,7 @@ export default class ErrorBoundary extends React.Component {
               fontSize: '1rem',
             }}
           >
-            Recargar
+            {t('error.reload')}
           </button>
         </div>
       );

apps/frontend/src/components/LoginModal.jsx

@@ -1,7 +1,9 @@
 import React, { useState, useEffect, useRef } from 'react';
+import { useTranslation } from '../i18n';
 import './LoginModal.css';
 
 function LoginModal({ onLogin, onClose, initialMode = 'login' }) {
+  const { t } = useTranslation();
   const [mode, setMode] = useState(initialMode === 'register' ? 'register' : 'login');
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
@@ -25,7 +27,7 @@ function LoginModal({ onLogin, onClose, initialMode = 'login' }) {
     const u = username.trim();
     if (!u || !password) return;
     if (mode === 'register' && password.length < 8) {
-      setError('La contraseña debe tener al menos 8 caracteres');
+      setError(t('login.passwordError'));
       return;
     }
     setLoading(true);
@@ -40,12 +42,12 @@ function LoginModal({ onLogin, onClose, initialMode = 'login' }) {
       });
       const data = await res.json().catch(() => ({}));
       if (!res.ok) {
-        setError(data.error || (mode === 'register' ? 'No se pudo crear la cuenta' : 'Inicio de sesión fallido'));
+        setError(data.error || (mode === 'register' ? t('login.registerError') : t('login.loginError')));
       } else {
         onLogin(data.user);
       }
     } catch {
-      setError('Error de red — inténtalo de nuevo');
+      setError(t('login.networkError'));
     } finally {
       setLoading(false);
     }
@@ -71,7 +73,7 @@ function LoginModal({ onLogin, onClose, initialMode = 'login' }) {
             onClick={() => setMode('login')}
             disabled={loading}
           >
-            Iniciar sesión
+            {t('login.login')}
           </button>
           <button
             type="button"
@@ -81,20 +83,20 @@ function LoginModal({ onLogin, onClose, initialMode = 'login' }) {
             onClick={() => setMode('register')}
             disabled={loading}
           >
-            Crear cuenta
+            {t('login.register')}
           </button>
         </div>
 
-        <h2 id="modal-title">{isRegister ? 'Crea tu cuenta' : 'Bienvenido de nuevo'}</h2>
+        <h2 id="modal-title">{isRegister ? t('login.createAccount') : t('login.welcomeBack')}</h2>
         <p className="modal-sub">
           {isRegister
-            ? 'Guarda tu dirección y recibe notificaciones cuando lleguen medicamentos.'
+            ? t('login.registerDescription')
-            : 'Inicia sesión para gestionar tu perfil y notificaciones.'}
+            : t('login.loginDescription')}
         </p>
 
         <form onSubmit={handleSubmit} noValidate>
           <div className="modal-field">
-            <label htmlFor="modal-username">Usuario</label>
+            <label htmlFor="modal-username">{t('login.username')}</label>
             <input
               id="modal-username"
               type="text"
@@ -107,11 +109,11 @@ function LoginModal({ onLogin, onClose, initialMode = 'login' }) {
               maxLength={isRegister ? 32 : undefined}
             />
             {isRegister && (
-              <p className="modal-hint">3–32 caracteres: letras, dígitos o guión bajo.</p>
+              <p className="modal-hint">{t('login.usernameHint')}</p>
             )}
           </div>
           <div className="modal-field">
-            <label htmlFor="modal-password">Contraseña</label>
+            <label htmlFor="modal-password">{t('login.password')}</label>
             <input
               id="modal-password"
               type="password"
@@ -122,7 +124,7 @@ function LoginModal({ onLogin, onClose, initialMode = 'login' }) {
               minLength={isRegister ? 8 : undefined}
             />
             {isRegister && (
-              <p className="modal-hint">Al menos 8 caracteres.</p>
+              <p className="modal-hint">{t('login.passwordHint')}</p>
             )}
           </div>
           {error && <p className="modal-error">{error}</p>}
@@ -133,7 +135,7 @@ function LoginModal({ onLogin, onClose, initialMode = 'login' }) {
               onClick={onClose}
               disabled={loading}
             >
-              Cancelar
+              {t('login.cancel')}
             </button>
             <button
               type="submit"
@@ -141,8 +143,8 @@ function LoginModal({ onLogin, onClose, initialMode = 'login' }) {
               disabled={loading || !username.trim() || !password}
             >
               {loading
-                ? (isRegister ? 'Creando…' : 'Iniciando sesión…')
+                ? (isRegister ? t('login.creating') : t('login.loggingIn'))
-                : (isRegister ? 'Crear cuenta' : 'Iniciar sesión')}
+                : (isRegister ? t('login.createAccountBtn') : t('login.loginBtn'))}
             </button>
           </div>
         </form>

apps/frontend/src/components/MedicineResults.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from '../i18n';
 import './MedicineResults.css';
 import {
   pushSupported,
@@ -8,10 +9,11 @@ import {
 } from '../utils/notifications.js';
 
 function MedicineResults({ medicines, onSelect, query, currentUser, onLoginRequest }) {
+  const { t } = useTranslation();
   if (medicines.length === 0 && query.length >= 2) {
     return (
       <div className="no-results">
-        <p>No se encontraron medicamentos para "{query}"</p>
+        <p>{t('medicine.noResults')} "{query}"</p>
       </div>
     );
   }
@@ -32,6 +34,7 @@ function MedicineResults({ medicines, onSelect, query, currentUser, onLoginReque
 }
 
 function MedicineCard({ medicine, onSelect, currentUser, onLoginRequest }) {
+  const { t } = useTranslation();
   const nregistro = medicine.nregistro || medicine.id;
   const [subscribed, setSubscribed] = useState(() => isSubscribedLocally(nregistro));
   const [busy, setBusy] = useState(false);
@@ -49,7 +52,7 @@ function MedicineCard({ medicine, onSelect, currentUser, onLoginRequest }) {
       return;
     }
     if (!supported) {
-      setError('Las notificaciones requieren iOS 16.4+ y este sitio instalado como app (Compartir → Añadir a Pantalla de Inicio).');
+      setError(t('pharmacy.notificationsRequired'));
       return;
     }
     if (busy) return;
@@ -65,7 +68,7 @@ function MedicineCard({ medicine, onSelect, currentUser, onLoginRequest }) {
       }
     } catch (err) {
       console.error('[notify] toggle failed:', err);
-      setError(err.message || 'No se pudo actualizar la suscripción');
+      setError(err.message || t('medicine.subscriptionError'));
     } finally {
       setBusy(false);
     }
@@ -83,29 +86,29 @@ function MedicineCard({ medicine, onSelect, currentUser, onLoginRequest }) {
           aria-pressed={subscribed && !!currentUser}
           aria-label={
             !currentUser
-              ? 'Inicia sesión para activar notificaciones'
+              ? t('medicine.loginForNotifications')
               : subscribed
-                ? 'Desactivar notificaciones para este medicamento'
+                ? t('medicine.disableNotifications')
-                : 'Notificarme cuando esté disponible'
+                : t('medicine.enableNotifications')
           }
           title={
             !currentUser
-              ? 'Inicia sesión para activar notificaciones'
+              ? t('medicine.loginForNotifications')
               : subscribed
-                ? 'Notificaciones activadas — clic para desactivar'
+                ? t('medicine.notificationsActivated')
-                : 'Notificarme cuando este medicamento esté en una farmacia'
+                : t('medicine.notifyWhenAvailable')
           }
         >
           {subscribed && currentUser ? '🔔' : '🔕'}
         </button>
       </div>
       <div className="medicine-card-body">
-        <p><strong>Principio Activo:</strong> {medicine.active_ingredient}</p>
+        <p><strong>{t('medicine.principioActivo')}</strong> {medicine.active_ingredient}</p>
-        <p><strong>Dosis:</strong> {medicine.dosage} • <strong>Forma:</strong> {medicine.form}</p>
+        <p><strong>{t('medicine.dosis')}</strong> {medicine.dosage} • <strong>{t('medicine.forma')}</strong> {medicine.form}</p>
         {error && <p className="notify-error" onClick={e => e.stopPropagation()}>{error}</p>}
       </div>
       <div className="medicine-card-footer">
-        <span className="view-pharmacies">Ver farmacias →</span>
+        <span className="view-pharmacies">{t('medicine.viewPharmacies')}</span>
       </div>
     </div>
   );

apps/frontend/src/components/PharmacyList.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from '../i18n';
 import './PharmacyList.css';
 import { haversineKm, formatDistance } from '../utils/geo';
 import { getOpenStatus } from '../utils/hours';
@@ -10,10 +11,11 @@ import {
 } from '../utils/notifications.js';
 
 function PharmacyList({ pharmacies, loading, userPosition, medicine, currentUser, onLoginRequest }) {
+  const { t } = useTranslation();
   if (loading) {
     return (
       <div className="loading-pharmacies">
-        <p>Cargando farmacias...</p>
+        <p>{t('pharmacy.loading')}</p>
       </div>
     );
   }
@@ -21,7 +23,7 @@ function PharmacyList({ pharmacies, loading, userPosition, medicine, currentUser
   if (pharmacies.length === 0) {
     return (
       <div className="no-pharmacies">
-        <p>No se encontraron farmacias con este medicamento</p>
+        <p>{t('pharmacy.notFound')}</p>
       </div>
     );
   }
@@ -29,7 +31,7 @@ function PharmacyList({ pharmacies, loading, userPosition, medicine, currentUser
   return (
     <div className="pharmacy-list">
       <h3 className="pharmacy-list-title">
-        Disponible en {pharmacies.length} {pharmacies.length === 1 ? 'farmacia' : 'farmacias'}
+        {t('pharmacy.availableAt')} {pharmacies.length} {pharmacies.length === 1 ? t('pharmacy.pharmacy') : t('pharmacy.pharmacies')}
       </h3>
       <div className="pharmacy-grid">
         {pharmacies.map((pharmacy) => {
@@ -55,6 +57,7 @@ function PharmacyList({ pharmacies, loading, userPosition, medicine, currentUser
 }
 
 function PharmacyCard({ pharmacy, distanceKm, medicine, currentUser, onLoginRequest, userPosition }) {
+  const { t } = useTranslation();
   const nregistro = medicine?.nregistro || medicine?.id;
   const supported = pushSupported();
   const outOfStock = pharmacy.stock !== undefined && pharmacy.stock <= 0;
@@ -77,7 +80,7 @@ function PharmacyCard({ pharmacy, distanceKm, medicine, currentUser, onLoginRequ
       return;
     }
     if (!supported) {
-      setError('Las notificaciones requieren iOS 16.4+ y este sitio instalado como app (Compartir → Añadir a Pantalla de Inicio).');
+      setError(t('pharmacy.notificationsRequired'));
       return;
     }
     if (busy) return;
@@ -93,7 +96,7 @@ function PharmacyCard({ pharmacy, distanceKm, medicine, currentUser, onLoginRequ
       }
     } catch (err) {
       console.error('[notify] pharmacy toggle failed:', err);
-      setError(err.message || 'No se pudo actualizar la suscripción');
+      setError(err.message || t('medicine.subscriptionError'));
     } finally {
       setBusy(false);
     }
@@ -118,17 +121,17 @@ function PharmacyCard({ pharmacy, distanceKm, medicine, currentUser, onLoginRequ
               aria-pressed={subscribed && !!currentUser}
               aria-label={
             !currentUser
-              ? 'Inicia sesión para activar notificaciones'
+              ? t('pharmacy.loginForNotifications')
               : subscribed
-                ? 'Desactivar notificaciones para esta farmacia'
+                ? t('pharmacy.disableNotificationsPharmacy')
-                : 'Notificarme cuando llegue a esta farmacia'
+                : t('pharmacy.notifyWhenArrives')
           }
           title={
             !currentUser
-              ? 'Inicia sesión para activar notificaciones'
+              ? t('pharmacy.loginForNotifications')
               : subscribed
-                ? 'Notificaciones activadas para esta farmacia — clic para desactivar'
+                ? t('pharmacy.notificationsActivatedPharmacy')
-                : 'Notificarme cuando llegue a esta farmacia'
+                : t('pharmacy.notifyWhenArrives')
               }
             >
               {subscribed && currentUser ? '🔔' : '🔕'}
@@ -161,7 +164,7 @@ function PharmacyCard({ pharmacy, distanceKm, medicine, currentUser, onLoginRequ
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
               <polygon points="3 11 22 2 13 21 11 13 3 11" />
             </svg>
-            Cómo llegar
+            {t('pharmacy.howToGet')}
           </a>
         )}
         <div className="pharmacy-pricing">
@@ -170,7 +173,7 @@ function PharmacyCard({ pharmacy, distanceKm, medicine, currentUser, onLoginRequ
           )}
           {pharmacy.stock !== undefined && (
             <span className={`stock ${pharmacy.stock > 20 ? 'in-stock' : pharmacy.stock > 0 ? 'low-stock' : 'out-of-stock'}`}>
-              {pharmacy.stock > 20 ? '✓ En Stock' : pharmacy.stock > 0 ? `⚠ Stock Bajo (${pharmacy.stock})` : '✗ Sin Stock'}
+              {pharmacy.stock > 20 ? t('pharmacy.inStock') : pharmacy.stock > 0 ? `${t('pharmacy.lowStock')} (${pharmacy.stock})` : t('pharmacy.outOfStock')}
             </span>
           )}
         </div>

apps/frontend/src/components/ProductResults.jsx

@@ -1,13 +1,14 @@
 import React from 'react';
+import { useTranslation } from '../i18n';
 import './ProductResults.css';
 
 const categoryLabels = {
-  otc: 'Sin Receta',
+  otc: 'product.sinReceta',
-  parapharmacy: 'Parafarmacia',
+  parapharmacy: 'product.parapharmacy',
-  dermocosmética: 'Dermocosmética',
+  dermocosmética: 'product.dermocosmetica',
-  'Fórmulas lácteas': 'Fórmulas lácteas',
+  'Fórmulas lácteas': 'product.formulasLacteas',
-  vitaminas: 'Vitaminas',
+  vitaminas: 'product.vitamins',
-  analgésicos: 'Analgésicos'
+  analgésicos: 'product.analgesics'
 };
 
 const sourceColors = {
@@ -27,10 +28,11 @@ const sourceLabels = {
 };
 
 function ProductResults({ products, onSelect }) {
+  const { t } = useTranslation();
   if (!products || products.length === 0) {
     return (
       <div className="no-results">
-        <p>No se encontraron productos</p>
+        <p>{t('product.noResults')}</p>
       </div>
     );
   }
@@ -49,6 +51,7 @@ function ProductResults({ products, onSelect }) {
 }
 
 function ProductCard({ product, onSelect }) {
+  const { t } = useTranslation();
   const nutriScore = product.nutriscore;
   const nutriScoreColors = {
     a: '#16a34a',
@@ -83,7 +86,7 @@ function ProductCard({ product, onSelect }) {
             {sourceLabels[product.source]}
           </span>
           <span className="category-badge">
-            {categoryLabels[product.category] || product.category}
+            {categoryLabels[product.category] ? t(categoryLabels[product.category]) : product.category}
           </span>
           {product.source === 'openfoodfacts' && nutriScore && (
             <span
@@ -101,21 +104,21 @@ function ProductCard({ product, onSelect }) {
 
         <div className="product-card-body">
           {product.brand && (
-            <p><strong>Marca:</strong> {product.brand}</p>
+            <p><strong>{t('product.brand')}</strong> {product.brand}</p>
           )}
           {product.price != null && (
-            <p className="product-price"><strong>Precio:</strong> {product.price} €</p>
+            <p className="product-price"><strong>{t('product.price')}</strong> {product.price} €</p>
           )}
           {product.source === 'cima' && product.active_ingredient && (
-            <p><strong>Principio Activo:</strong> {product.active_ingredient}</p>
+            <p><strong>{t('product.activeIngredient')}</strong> {product.active_ingredient}</p>
           )}
           {product.source === 'cima' && product.dosage && (
-            <p><strong>Dosis:</strong> {product.dosage}</p>
+            <p><strong>{t('product.dosage')}</strong> {product.dosage}</p>
           )}
         </div>
 
         <div className="product-card-footer">
-          <span className="view-details">Ver detalles →</span>
+          <span className="view-details">{t('product.viewDetails')}</span>
         </div>
       </div>
     </div>

apps/frontend/src/components/SavedNotifications.jsx

@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from 'react';
+import { useTranslation } from '../i18n';
 import './SavedNotifications.css';
 
 function SavedNotifications({ onClose, onNotificationChange }) {
+  const { t } = useTranslation();
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [items, setItems] = useState([]);
@@ -21,7 +23,7 @@ function SavedNotifications({ onClose, onNotificationChange }) {
         ].sort((a, b) => (b.created_at || '').localeCompare(a.created_at || ''));
         setItems(merged);
       } catch (err) {
-        if (!cancelled) setError(err.message || 'No se pudieron cargar las notificaciones guardadas');
+        if (!cancelled) setError(err.message || t('savedNotifications.loadError'));
       } finally {
         if (!cancelled) setLoading(false);
       }
@@ -43,7 +45,7 @@ function SavedNotifications({ onClose, onNotificationChange }) {
       setItems(prev => prev.filter(i => !(i.scope === item.scope && i.id === item.id)));
       onNotificationChange?.();
     } catch (err) {
-      setError(err.message || 'No se pudo eliminar la notificación');
+      setError(err.message || t('savedNotifications.deleteError'));
     } finally {
       setBusyId(null);
     }
@@ -53,15 +55,15 @@ function SavedNotifications({ onClose, onNotificationChange }) {
     <div className="saved-notifications-backdrop" onClick={onClose}>
       <div className="saved-notifications-modal" onClick={e => e.stopPropagation()}>
         <div className="saved-notifications-header">
-          <h2>🔔 Notificaciones Guardadas</h2>
+          <h2>{t('savedNotifications.title')}</h2>
-          <button className="saved-notifications-close" onClick={onClose} aria-label="Cerrar">×</button>
+          <button className="saved-notifications-close" onClick={onClose} aria-label={t('savedNotifications.close')}>×</button>
         </div>
         <div className="saved-notifications-body">
-          {loading && <p className="saved-notifications-status">Cargando…</p>}
+          {loading && <p className="saved-notifications-status">{t('savedNotifications.loading')}</p>}
           {!loading && error && <p className="saved-notifications-error">{error}</p>}
           {!loading && !error && items.length === 0 && (
             <p className="saved-notifications-empty">
-              Aún no hay notificaciones guardadas. Toca la campana 🔕 en una farmacia sin stock para recibir notificaciones cuando se reponga.
+              {t('savedNotifications.empty')}
             </p>
           )}
           {!loading && !error && items.length > 0 && (
@@ -78,7 +80,7 @@ function SavedNotifications({ onClose, onNotificationChange }) {
                         {item.scope === 'pharmacy' ? (
                           <>
                             <span className="saved-notifications-chip saved-notifications-chip--pharmacy">
-                              🏥 {item.pharmacy_name || `Farmacia #${item.pharmacy_id}`}
+                              🏥 {item.pharmacy_name || `${t('savedNotifications.anyPharmacy')} #${item.pharmacy_id}`}
                             </span>
                             {item.pharmacy_address && (
                               <span className="saved-notifications-address">{item.pharmacy_address}</span>
@@ -86,7 +88,7 @@ function SavedNotifications({ onClose, onNotificationChange }) {
                           </>
                         ) : (
                           <span className="saved-notifications-chip">
-                            Cualquier farmacia
+                            {t('savedNotifications.anyPharmacy')}
                           </span>
                         )}
                       </div>
@@ -96,9 +98,9 @@ function SavedNotifications({ onClose, onNotificationChange }) {
                       className="saved-notifications-remove"
                       onClick={() => handleDelete(item)}
                       disabled={busyId === key}
-                      aria-label="Eliminar notificación"
+                      aria-label={t('savedNotifications.delete')}
                     >
-                      {busyId === key ? '…' : 'Eliminar'}
+                      {busyId === key ? '…' : t('savedNotifications.delete')}
                     </button>
                   </li>
                 );

apps/frontend/src/components/SearchBar.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
+import { useTranslation } from '../i18n';
 import './SearchBar.css';
 
 function SearchBar({ value, onChange, placeholder }) {
+  const { t } = useTranslation();
   return (
     <div className="search-bar-container">
       <div className="search-bar">
@@ -22,7 +24,7 @@ function SearchBar({ value, onChange, placeholder }) {
           <button
             className="clear-button"
             onClick={() => onChange('')}
-            aria-label="Limpiar búsqueda"
+            aria-label={t('search.clear')}
           >
             ✕
           </button>

apps/frontend/src/components/admin/LoginForm.jsx

@@ -1,7 +1,9 @@
 import React, { useState } from 'react';
+import { useTranslation } from '../../i18n';
 import './LoginForm.css';
 
 function LoginForm({ onLogin }) {
+  const { t } = useTranslation();
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [error, setError] = useState('');
@@ -25,14 +27,14 @@ function LoginForm({ onLogin }) {
       const data = await response.json();
 
       if (!response.ok) {
-        throw new Error(data.error || 'Inicio de sesión fallido');
+        throw new Error(data.error || t('admin.login.failed'));
       }
 
       // Success - notify parent component
       onLogin(data.user);
     } catch (error) {
       console.error('Login error:', error);
-      setError(error.message || 'Usuario o contraseña inválidos');
+      setError(error.message || t('admin.login.invalidCredentials'));
     } finally {
       setLoading(false);
     }
@@ -42,8 +44,8 @@ function LoginForm({ onLogin }) {
     <div className="login-container">
       <div className="login-box">
         <div className="login-header">
-          <h2>🔐 Acceso Administración</h2>
+          <h2>{t('admin.login.title')}</h2>
-          <p>Introduce tus credenciales para acceder al panel de administración</p>
+          <p>{t('admin.login.description')}</p>
         </div>
 
         <form onSubmit={handleSubmit} className="login-form">
@@ -54,13 +56,13 @@ function LoginForm({ onLogin }) {
           )}
 
           <div className="form-group">
-            <label htmlFor="username">Usuario</label>
+            <label htmlFor="username">{t('admin.login.username')}</label>
             <input
               id="username"
               type="text"
               value={username}
               onChange={(e) => setUsername(e.target.value)}
-              placeholder="Introduce usuario"
+              placeholder={t('admin.login.usernamePlaceholder')}
               required
               autoFocus
               disabled={loading}
@@ -68,13 +70,13 @@ function LoginForm({ onLogin }) {
           </div>
 
           <div className="form-group">
-            <label htmlFor="password">Contraseña</label>
+            <label htmlFor="password">{t('admin.login.password')}</label>
             <input
               id="password"
               type="password"
               value={password}
               onChange={(e) => setPassword(e.target.value)}
-              placeholder="Introduce contraseña"
+              placeholder={t('admin.login.passwordPlaceholder')}
               required
               disabled={loading}
             />
@@ -85,16 +87,16 @@ function LoginForm({ onLogin }) {
             className="login-button"
             disabled={loading || !username || !password}
           >
-            {loading ? 'Iniciando sesión...' : 'Iniciar sesión'}
+            {loading ? t('admin.login.loggingIn') : t('admin.login.loginBtn')}
           </button>
         </form>
 
         <div className="login-footer">
           <p className="help-text">
-            Credenciales por defecto: <code>admin</code> / <code>admin123</code>
+            {t('admin.login.defaultCredentials')} <code>admin</code> / <code>admin123</code>
           </p>
           <p className="warning-text">
-            ⚠️ ¡Cambia la contraseña por defecto tras el primer inicio de sesión!
+            {t('admin.login.changePasswordWarning')}
           </p>
         </div>
       </div>

apps/frontend/src/components/admin/MedicineManagement.jsx

@@ -1,9 +1,11 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from '../../i18n';
 import './AdminComponents.css';
 
 const SEARCH_DEBOUNCE_MS = 400;
 
 function MedicineManagement() {
+  const { t } = useTranslation();
   const [searchQuery, setSearchQuery] = useState('');
   const [medicines, setMedicines] = useState([]);
   const [loading, setLoading] = useState(false);
@@ -29,7 +31,7 @@ function MedicineManagement() {
       } catch (error) {
         if (error.name === 'AbortError') return;
         console.error('Error searching medicines:', error);
-        alert('Error al buscar medicamentos en la API CIMA');
+        alert(t('admin.medicine.loadError'));
       } finally {
         if (!controller.signal.aborted) setLoading(false);
       }
@@ -44,47 +46,47 @@ function MedicineManagement() {
   return (
     <div className="admin-section">
       <div className="section-header">
-        <h2>Buscar Medicamentos (API CIMA)</h2>
+        <h2>{t('admin.medicine.title')}</h2>
       </div>
 
       <div className="info-box">
-        <p>ℹ️ Los medicamentos ahora se obtienen directamente de la <strong>API de CIMA</strong> (Agencia Española de Medicamentos y Productos Sanitarios).</p>
+        <p>ℹ️ {t('admin.medicine.description')} <strong>{t('admin.medicine.cimaApi')}</strong> {t('admin.medicine.cimaDescription')}</p>
-        <p>Busca medicamentos para vincularlos a farmacias en la pestaña "Link Medicine".</p>
+        <p>{t('admin.medicine.linkDescription')}</p>
       </div>
 
       <div className="admin-form">
         <div className="form-group">
-          <label>Buscar medicamentos</label>
+          <label>{t('admin.medicine.search')}</label>
           <input
             type="text"
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
-            placeholder="Escribe el nombre de un medicamento..."
+            placeholder={t('admin.medicine.searchPlaceholder')}
           />
         </div>
       </div>
 
-      {loading && <div className="loading">Buscando en API CIMA...</div>}
+      {loading && <div className="loading">{t('admin.medicine.searching')}</div>}
 
       {!loading && medicines.length > 0 && (
         <div className="admin-list">
-          <p className="info-text">Se encontraron {medicines.length} medicamentos</p>
+          <p className="info-text">{t('admin.medicine.found')} {medicines.length} {t('admin.medicine.medications')}</p>
           {medicines.map((medicine) => (
             <div key={medicine.nregistro} className="admin-item">
               <div className="item-content">
                 <h4>{medicine.name}</h4>
                 {medicine.active_ingredient && (
-                  <p><strong>Principio Activo:</strong> {medicine.active_ingredient}</p>
+                  <p><strong>{t('admin.medicine.activeIngredient')}</strong> {medicine.active_ingredient}</p>
                 )}
                 <p>
-                  {medicine.dosage && <span><strong>Dosis:</strong> {medicine.dosage}</span>}
+                  {medicine.dosage && <span><strong>{t('admin.medicine.dosage')}</strong> {medicine.dosage}</span>}
                   {medicine.dosage && medicine.form && ' • '}
-                  {medicine.form && <span><strong>Forma:</strong> {medicine.form}</span>}
+                  {medicine.form && <span><strong>{t('admin.medicine.form')}</strong> {medicine.form}</span>}
                 </p>
                 <p className="medicine-meta">
-                  <strong>Laboratorio:</strong> {medicine.laboratory} • 
+                  <strong>{t('admin.medicine.laboratory')}</strong> {medicine.laboratory} • 
-                  <strong> Nº Registro:</strong> {medicine.nregistro} • 
+                  <strong> {t('admin.medicine.registrationNumber')}</strong> {medicine.nregistro} • 
-                  {medicine.generic ? ' Genérico' : ' Marca'}
+                  {medicine.generic ? ` ${t('admin.medicine.generic')}` : ` ${t('admin.medicine.brand')}`}
                 </p>
               </div>
             </div>
@@ -93,7 +95,7 @@ function MedicineManagement() {
       )}
 
       {!loading && searchQuery.trim().length >= 2 && medicines.length === 0 && (
-        <p className="empty-state">No se encontraron medicamentos con ese nombre.</p>
+        <p className="empty-state">{t('admin.medicine.noResults')}</p>
       )}
     </div>
   );

apps/frontend/src/components/admin/PharmacyManagement.jsx

@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import './AdminComponents.css';
 import { DAY_KEYS, DAY_LABEL } from '../../utils/hours';
+import { useTranslation } from '../../i18n';
 
 function emptyHoursDraft() {
   const draft = {};
@@ -55,18 +56,20 @@ function haversineMeters(lat1, lon1, lat2, lon2) {
   return 2 * R * Math.asin(Math.sqrt(Math.min(1, a)));
 }
 
-const REGION_PRESETS = [
+function getRegionPresets(t) {
-  { id: 'custom', label: 'Coordenadas personalizadas', lat: '', lon: '', radio: '' },
+  return [
+    { id: 'custom', label: t('admin.pharmacy.customCoordinates'), lat: '', lon: '', radio: '' },
     {
       id: 'rubi',
-    label: 'Ejemplo: Área de Rubí (1.5 km)',
+      label: t('admin.pharmacy.areaExample'),
       lat: '41.5631',
       lon: '2.0038',
       radio: '1500',
     },
-];
+  ];
+}
 
-async function geocodeErrorMessage(response) {
+async function geocodeErrorMessage(response, t) {
   const text = await response.text();
   let body = {};
   try {
@@ -76,19 +79,21 @@ async function geocodeErrorMessage(response) {
   }
   if (typeof body.error === 'string' && body.error.trim()) return body.error;
   if (response.status === 401) {
-    return 'Sesión expirada o no has iniciado sesión. Inicia sesión de nuevo en el panel Admin y reintenta.';
+    return t('admin.pharmacy.sessionExpired');
   }
   if (response.status === 404) {
     const looksLikeHtml = /<!DOCTYPE|<html[\s>]/i.test(text || '');
     if (looksLikeHtml) {
-      return 'La app no pudo conectar con la API (404). Usa http://localhost:3000 con frontend y backend activos.';
+      return t('admin.pharmacy.apiNotFound');
     }
-    return 'Servicio de geocodificación no encontrado. Actualiza el backend y reinícialo.';
+    return t('admin.pharmacy.geocodingNotFound');
   }
-  return `Búsqueda fallida (HTTP ${response.status}).`;
+  return `${t('admin.pharmacy.searchFailed')} ${response.status}).`;
 }
 
 function PharmacyManagement() {
+  const { t } = useTranslation();
+  const REGION_PRESETS = getRegionPresets(t);
   const [pharmacies, setPharmacies] = useState([]);
   const [loading, setLoading] = useState(false);
   const [saving, setSaving] = useState(false);
@@ -132,7 +137,7 @@ function PharmacyManagement() {
       setPharmacies(data);
     } catch (error) {
       console.error('Error fetching pharmacies:', error);
-      alert('Error al cargar farmacias');
+      alert(t('admin.pharmacy.loadError'));
     } finally {
       setLoading(false);
     }
@@ -165,7 +170,7 @@ function PharmacyManagement() {
     e?.preventDefault();
     const q = cityQuery.trim();
     if (!q) {
-      setCityLookupMessage({ type: 'err', text: 'Introduce una ciudad o lugar.' });
+      setCityLookupMessage({ type: 'err', text: t('admin.pharmacy.enterCity') });
       return;
     }
     setCityLookupLoading(true);
@@ -175,7 +180,7 @@ function PharmacyManagement() {
         credentials: 'include',
       });
       if (!response.ok) {
-        throw new Error(await geocodeErrorMessage(response));
+        throw new Error(await geocodeErrorMessage(response, t));
       }
       const data = await response.json();
       setRegionLat(String(data.lat));
@@ -253,7 +258,7 @@ function PharmacyManagement() {
       const lon = parseFloat(regionLon);
       const radio = parseFloat(regionRadio);
       if (!Number.isFinite(lat) || !Number.isFinite(lon) || !Number.isFinite(radio)) {
-        throw new Error('Establece latitud, longitud y radio (usa Buscar ciudad o un preset).');
+        throw new Error(t('admin.pharmacy.setCoordinates'));
       }
       const response = await fetch('/api/admin/pharmacies/import-external', {
         method: 'POST',
@@ -307,7 +312,7 @@ function PharmacyManagement() {
 
         if (!response.ok) {
           const error = await response.json();
-          throw new Error(error.error || 'Error al actualizar farmacia');
+          throw new Error(error.error || t('admin.pharmacy.updateError'));
         }
       } else {
         const response = await fetch('/api/admin/pharmacies', {
@@ -319,16 +324,16 @@ function PharmacyManagement() {
 
         if (!response.ok) {
           const error = await response.json();
-          throw new Error(error.error || 'Error al crear farmacia');
+          throw new Error(error.error || t('admin.pharmacy.createError'));
         }
       }
 
       resetForm();
       fetchPharmacies();
-      alert(editingPharmacy ? '¡Farmacia actualizada!' : '¡Farmacia añadida!');
+      alert(editingPharmacy ? t('admin.pharmacy.updated') : t('admin.pharmacy.created'));
     } catch (error) {
       console.error('Error saving pharmacy:', error);
-      alert(`Error al guardar farmacia: ${error.message}`);
+      alert(`${t('admin.pharmacy.saveError')}: ${error.message}`);
     } finally {
       setSaving(false);
     }
@@ -348,7 +353,7 @@ function PharmacyManagement() {
   };
 
   const handleDelete = async (id) => {
-    if (!confirm('¿Estás seguro de que quieres eliminar esta farmacia?')) return;
+    if (!confirm(t('admin.pharmacy.deleteConfirm'))) return;
 
     try {
       const response = await fetch(`/api/admin/pharmacies/${id}`, {
@@ -356,13 +361,13 @@ function PharmacyManagement() {
         credentials: 'include',
       });
 
-      if (!response.ok) throw new Error('Error al eliminar farmacia');
+      if (!response.ok) throw new Error(t('admin.pharmacy.deleteError'));
 
       fetchPharmacies();
-      alert('¡Farmacia eliminada!');
+      alert(t('admin.pharmacy.deleted'));
     } catch (error) {
       console.error('Error deleting pharmacy:', error);
-      alert('Error al eliminar farmacia');
+      alert(t('admin.pharmacy.deleteError'));
     }
   };
 
@@ -391,7 +396,7 @@ function PharmacyManagement() {
   return (
     <div className="admin-section">
       <div className="section-header">
-        <h2>Gestionar Farmacias</h2>
+        <h2>{t('admin.pharmacy.title')}</h2>
         <button
           type="button"
           className="btn-primary"
@@ -400,15 +405,15 @@ function PharmacyManagement() {
             setShowForm(true);
           }}
         >
-          + Añadir Nueva Farmacia
+          {t('admin.pharmacy.addNew')}
         </button>
       </div>
 
       <div className="pharmacy-tools-card">
-        <h3>Ciudad, región e importación</h3>
+        <h3>{t('admin.pharmacy.citySearch')}</h3>
         <p className="pharmacy-tools-hint">
-          <strong>Buscar ciudad</strong> establece latitud, longitud y radio para el filtro de mapa y las importaciones.
+          <strong>{t('admin.pharmacy.searchCity')}</strong> establece latitud, longitud y radio para el filtro de mapa y las importaciones.
-          Elige una <strong>fuente de datos</strong>: <strong>OpenStreetMap</strong> es gratuita (sin clave);{' '}
+          {t('admin.pharmacy.chooseOne')} <strong>fuente de datos</strong>: <strong>OpenStreetMap</strong> es gratuita (sin clave);{' '}
           <strong>URL de datos abiertos</strong> carga JSON alojado por ti. Geocodificación usa{' '}
           <a href="https://www.openstreetmap.org/copyright" target="_blank" rel="noreferrer">
             OpenStreetMap
@@ -418,11 +423,11 @@ function PharmacyManagement() {
 
         <form className="city-lookup-form" onSubmit={handleCityLookup}>
           <div className="form-group city-lookup-input-wrap">
-            <label htmlFor="city-finder">Buscar ciudad</label>
+            <label htmlFor="city-finder">{t('admin.pharmacy.searchCity')}</label>
             <input
               id="city-finder"
               type="search"
-              placeholder="Ej: Rubí, Madrid, Valencia…"
+              placeholder={t('admin.pharmacy.cityPlaceholder')}
               value={cityQuery}
               onChange={(e) => {
                 setCityQuery(e.target.value);
@@ -436,7 +441,7 @@ function PharmacyManagement() {
             className="btn-secondary city-lookup-submit"
             disabled={cityLookupLoading}
           >
-            {cityLookupLoading ? 'Buscando…' : 'Buscar ciudad'}
+            {cityLookupLoading ? t('admin.pharmacy.searching') : t('admin.pharmacy.searchCity')}
           </button>
         </form>
         {cityLookupMessage && (
@@ -449,7 +454,7 @@ function PharmacyManagement() {
         )}
 
         <div className="region-presets">
-          <label htmlFor="region-preset">Preset de área</label>
+          <label htmlFor="region-preset">{t('admin.pharmacy.areaPreset')}</label>
           <select
             id="region-preset"
             value={regionPreset}
@@ -465,7 +470,7 @@ function PharmacyManagement() {
 
         <div className="region-grid">
           <div className="form-group">
-            <label htmlFor="region-lat">Latitud</label>
+            <label htmlFor="region-lat">{t('admin.pharmacy.latitude')}</label>
             <input
               id="region-lat"
               type="text"
@@ -476,7 +481,7 @@ function PharmacyManagement() {
             />
           </div>
           <div className="form-group">
-            <label htmlFor="region-lon">Longitud</label>
+            <label htmlFor="region-lon">{t('admin.pharmacy.longitude')}</label>
             <input
               id="region-lon"
               type="text"
@@ -487,7 +492,7 @@ function PharmacyManagement() {
             />
           </div>
           <div className="form-group">
-            <label htmlFor="region-radio">Radio (m)</label>
+            <label htmlFor="region-radio">{t('admin.pharmacy.radius')} (m)</label>
             <input
               id="region-radio"
               type="text"
@@ -501,7 +506,7 @@ function PharmacyManagement() {
 
         <div className="import-mode-row">
           <div className="form-group import-mode-select-wrap">
-            <label htmlFor="import-mode">Fuente de datos</label>
+            <label htmlFor="import-mode">{t('admin.pharmacy.dataSource')}</label>
             <select
               id="import-mode"
               value={importMode}
@@ -511,15 +516,15 @@ function PharmacyManagement() {
               }}
             >
               <option value="osm">OpenStreetMap (Overpass, gratuito)</option>
-              <option value="webhook">n8n webhook (heredado)</option>
+              <option value="webhook">{t('admin.pharmacy.webhookLegacy')}</option>
-              <option value="openData">URL de datos abiertos JSON</option>
+              <option value="openData">{t('admin.pharmacy.openDataJson')}</option>
             </select>
           </div>
         </div>
 
         {importMode === 'openData' && (
           <div className="form-group open-data-url-row">
-            <label htmlFor="open-data-url">URL JSON</label>
+            <label htmlFor="open-data-url">{t('admin.pharmacy.jsonUrl')}</label>
             <input
               id="open-data-url"
               type="url"
@@ -539,12 +544,12 @@ function PharmacyManagement() {
             disabled={importing}
           >
             {importing
-              ? 'Importando…'
+              ? t('admin.pharmacy.importing')
               : importMode === 'webhook'
-                ? 'Importar desde webhook'
+                ? t('admin.pharmacy.importWebhook')
                 : importMode === 'openData'
-                  ? 'Importar desde URL'
+                  ? t('admin.pharmacy.importUrl')
-                  : `Importar desde ${importMode === 'osm' ? 'Overpass' : 'OpenStreetMap'}`}
+                  : `${t('admin.pharmacy.importFrom')} ${importMode === 'osm' ? 'Overpass' : 'OpenStreetMap'}`}
           </button>
           <label className="filter-region-toggle">
             <input
@@ -552,7 +557,7 @@ function PharmacyManagement() {
               checked={filterByRegion}
               onChange={(e) => setFilterByRegion(e.target.checked)}
             />
-            Mostrar solo farmacias dentro del radio
+            {t('admin.pharmacy.showWithinRadio')}
           </label>
         </div>
 
@@ -568,10 +573,10 @@ function PharmacyManagement() {
 
       {showForm && (
         <form className="admin-form" onSubmit={handleSubmit}>
-          <h3>{editingPharmacy ? 'Editar Farmacia' : 'Añadir Nueva Farmacia'}</h3>
+          <h3>{editingPharmacy ? t('admin.pharmacy.edit') : t('admin.pharmacy.add')}</h3>
 
           <div className="form-group">
-            <label>Nombre *</label>
+            <label>{t('admin.pharmacy.name')}</label>
             <input
               type="text"
               value={formData.name}
@@ -581,7 +586,7 @@ function PharmacyManagement() {
           </div>
 
           <div className="form-group">
-            <label>Dirección *</label>
+            <label>{t('admin.pharmacy.address')}</label>
             <input
               type="text"
               value={formData.address}
@@ -591,7 +596,7 @@ function PharmacyManagement() {
           </div>
 
           <div className="form-group">
-            <label>Teléfono</label>
+            <label>{t('admin.pharmacy.phone')}</label>
             <input
               type="text"
               value={formData.phone}
@@ -601,7 +606,7 @@ function PharmacyManagement() {
 
           <div className="form-row">
             <div className="form-group">
-              <label>Latitud</label>
+              <label>{t('admin.pharmacy.latitude')}</label>
               <input
                 type="number"
                 step="any"
@@ -611,7 +616,7 @@ function PharmacyManagement() {
             </div>
 
             <div className="form-group">
-              <label>Longitud</label>
+              <label>{t('admin.pharmacy.longitude')}</label>
               <input
                 type="number"
                 step="any"
@@ -622,8 +627,8 @@ function PharmacyManagement() {
           </div>
 
           <fieldset className="hours-editor">
-            <legend>Horario de apertura</legend>
+            <legend>{t('admin.pharmacy.openingHours')}</legend>
-            <p className="hours-editor-hint">Marca un día como <em>Cerrado</em> si la farmacia no abre ese día.</p>
+            <p className="hours-editor-hint">{t('admin.pharmacy.dayClosed')}</p>
             {DAY_KEYS.map((day) => {
               const d = hoursDraft[day];
               return (
@@ -635,14 +640,14 @@ function PharmacyManagement() {
                       checked={d.closed}
                       onChange={(e) => updateDay(day, { closed: e.target.checked })}
                     />
-                    Cerrado
+                    {t('admin.pharmacy.closed')}
                   </label>
                   <input
                     type="time"
                     value={d.open}
                     disabled={d.closed}
                     onChange={(e) => updateDay(day, { open: e.target.value })}
-                    aria-label={`${DAY_LABEL[day]} abre a las`}
+                    aria-label={`${DAY_LABEL[day]} ${t('admin.pharmacy.opensAt')}`}
                   />
                   <span className="hours-sep">–</span>
                   <input
@@ -650,7 +655,7 @@ function PharmacyManagement() {
                     value={d.close}
                     disabled={d.closed}
                     onChange={(e) => updateDay(day, { close: e.target.value })}
-                    aria-label={`${DAY_LABEL[day]} cierra a las`}
+                    aria-label={`${DAY_LABEL[day]} ${t('admin.pharmacy.closesAt')}`}
                   />
                 </div>
               );
@@ -659,28 +664,28 @@ function PharmacyManagement() {
 
           <div className="form-actions">
             <button type="submit" className="btn-primary" disabled={saving}>
-              {saving ? 'Guardando...' : editingPharmacy ? 'Actualizar' : 'Añadir'} Farmacia
+              {saving ? t('admin.pharmacy.saving') : editingPharmacy ? `${t('admin.pharmacy.update')} Farmacia` : `${t('admin.pharmacy.create')} Farmacia`}
             </button>
             <button type="button" className="btn-secondary" onClick={resetForm} disabled={saving}>
-              Cancelar
+              {t('admin.pharmacy.cancel')}
             </button>
           </div>
         </form>
       )}
 
       {loading ? (
-        <div className="loading">Cargando farmacias...</div>
+        <div className="loading">{t('admin.pharmacy.loading')}</div>
       ) : (
         <div className="admin-list">
           <p className="list-meta">
-            Mostrando {displayedPharmacies.length} de {pharmacies.length} farmacias
+            {t('admin.pharmacy.showing')} {displayedPharmacies.length} {t('admin.pharmacy.of')} {pharmacies.length} farmacias
-            {filterByRegion && ' (dentro del radio)'}
+            {filterByRegion && ` ${t('admin.pharmacy.withinRadio')}`}
           </p>
           {displayedPharmacies.length === 0 ? (
             <p className="empty-state">
               {pharmacies.length === 0
-                ? 'Aún no hay farmacias. Importa desde webhook o añade una manualmente.'
+                ? t('admin.pharmacy.empty')
-                : 'No hay farmacias en este radio con coordenadas. Amplía el radio, busca otra ciudad o desactiva el filtro de región.'}
+                : t('admin.pharmacy.noResults')}
             </p>
           ) : (
             displayedPharmacies.map((pharmacy) => (
@@ -697,10 +702,10 @@ function PharmacyManagement() {
                 </div>
                 <div className="item-actions">
                   <button type="button" className="btn-edit" onClick={() => handleEdit(pharmacy)}>
-                    Editar
+                    {t('admin.pharmacy.editBtn')}
                   </button>
                   <button type="button" className="btn-delete" onClick={() => handleDelete(pharmacy.id)}>
-                    Eliminar
+                    {t('admin.pharmacy.deleteBtn')}
                   </button>
                 </div>
               </div>

apps/frontend/src/components/admin/PharmacyMedicineLink.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { useTranslation } from '../../i18n';
 import './AdminComponents.css';
 
 const MAX_PHARMACY_RESULTS = 25;
@@ -8,6 +9,7 @@ function normalize(s) {
 }
 
 function PharmacyMedicineLink() {
+  const { t } = useTranslation();
   const [pharmacies, setPharmacies] = useState([]);
   const [medicineSearch, setMedicineSearch] = useState('');
   const [medicineResults, setMedicineResults] = useState([]);
@@ -111,7 +113,7 @@ function PharmacyMedicineLink() {
     e.preventDefault();
     
     if (!selectedMedicine) {
-      alert('Por favor, selecciona un medicamento primero');
+      alert(t('admin.linkMedicine.selectMedicineFirst'));
       return;
     }
 
@@ -131,16 +133,16 @@ function PharmacyMedicineLink() {
         body: JSON.stringify(payload)
       });
 
-      if (!response.ok) throw new Error('Error al vincular medicamento a farmacia');
+      if (!response.ok) throw new Error(t('admin.linkMedicine.linkError'));
 
       resetForm();
       if (selectedPharmacy) {
         fetchPharmacyMedicines(selectedPharmacy.id);
       }
-      alert('¡Medicamento vinculado a la farmacia correctamente!');
+      alert(t('admin.linkMedicine.linkSuccess'));
     } catch (error) {
       console.error('Error linking medicine:', error);
-      alert('Error al vincular medicamento a farmacia');
+      alert(t('admin.linkMedicine.linkError'));
     }
   };
 
@@ -153,18 +155,18 @@ function PharmacyMedicineLink() {
         body: JSON.stringify({ price, stock })
       });
 
-      if (!response.ok) throw new Error('Error al actualizar');
+      if (!response.ok) throw new Error(t('admin.linkMedicine.updateError'));
 
       fetchPharmacyMedicines(selectedPharmacy.id);
-      alert('¡Actualizado correctamente!');
+      alert(t('admin.linkMedicine.updateSuccess'));
     } catch (error) {
       console.error('Error updating:', error);
-      alert('Error al actualizar');
+      alert(t('admin.linkMedicine.updateError'));
     }
   };
 
   const handleDelete = async (id) => {
-    if (!confirm('¿Eliminar este medicamento de la farmacia?')) return;
+    if (!confirm(t('admin.linkMedicine.deleteConfirm'))) return;
 
     try {
       const response = await fetch(`/api/admin/pharmacy-medicines/${id}`, {
@@ -172,13 +174,13 @@ function PharmacyMedicineLink() {
         credentials: 'include'
       });
 
-      if (!response.ok) throw new Error('Error al eliminar');
+      if (!response.ok) throw new Error(t('admin.linkMedicine.deleteError'));
 
       fetchPharmacyMedicines(selectedPharmacy.id);
-      alert('¡Medicamento eliminado de la farmacia!');
+      alert(t('admin.linkMedicine.deleteSuccess'));
     } catch (error) {
       console.error('Error deleting:', error);
-      alert('Error al eliminar medicamento');
+      alert(t('admin.linkMedicine.deleteError'));
     }
   };
 
@@ -216,11 +218,11 @@ function PharmacyMedicineLink() {
 
   return (
     <div className="admin-section">
-      <h2>Vincular Medicamento a Farmacia</h2>
+      <h2>{t('admin.linkMedicine.title')}</h2>
 
       <form className="admin-form" onSubmit={handleSubmit}>
         <div className="form-group">
-          <label>Farmacia *</label>
+          <label>{t('admin.linkMedicine.pharmacy')}</label>
           <input
             ref={pharmacyInputRef}
             type="text"
@@ -235,7 +237,7 @@ function PharmacyMedicineLink() {
             }}
             onFocus={() => setPharmacyDropdownOpen(true)}
             onBlur={() => setTimeout(() => setPharmacyDropdownOpen(false), 150)}
-            placeholder={pharmacies.length ? `Buscar entre ${pharmacies.length} farmacias por nombre o dirección…` : 'Cargando farmacias…'}
+            placeholder={pharmacies.length ? `${t('admin.linkMedicine.searchPharmacy')} ${pharmacies.length} ${t('admin.linkMedicine.pharmacies')}` : t('admin.linkMedicine.loadingPharmacies')}
             autoComplete="off"
             required={!selectedPharmacy}
           />
@@ -243,7 +245,7 @@ function PharmacyMedicineLink() {
             <div className="medicine-search-results">
               {filteredPharmacies.length === 0 ? (
                 <div className="search-result-item search-result-item--empty">
-                  <span>No hay farmacias que coincidan con "{pharmacyQuery}"</span>
+                  <span>{t('admin.linkMedicine.noPharmacies')} "{pharmacyQuery}"</span>
                 </div>
               ) : (
                 filteredPharmacies.map((pharmacy) => (
@@ -264,14 +266,14 @@ function PharmacyMedicineLink() {
               <p>✅ Selected: <strong>{selectedPharmacy.name}</strong></p>
               <p className="medicine-details">{selectedPharmacy.address}</p>
               <button type="button" className="btn-small" onClick={clearPharmacy}>
-                Cambiar farmacia
+                {t('admin.linkMedicine.changePharmacy')}
               </button>
             </div>
           )}
         </div>
 
         <div className="form-group">
-          <label>Buscar Medicamento (API CIMA) *</label>
+          <label>{t('admin.linkMedicine.medicine')}</label>
           <input
             type="text"
             value={medicineSearch}
@@ -279,10 +281,10 @@ function PharmacyMedicineLink() {
               setMedicineSearch(e.target.value);
               setSelectedMedicine(null);
             }}
-            placeholder="Escribe para buscar medicamentos en CIMA..."
+            placeholder={t('admin.linkMedicine.searchMedicine')}
             required
           />
-          {searching && <p className="loading-text">Buscando...</p>}
+          {searching && <p className="loading-text">{t('admin.linkMedicine.searching')}</p>}
           
           {medicineResults.length > 0 && !selectedMedicine && (
             <div className="medicine-search-results">
@@ -304,9 +306,9 @@ function PharmacyMedicineLink() {
             <div className="selected-medicine-info">
               <p>✅ Selected: <strong>{selectedMedicine.name}</strong></p>
               <p className="medicine-details">
-                {selectedMedicine.active_ingredient && `Principio activo: ${selectedMedicine.active_ingredient} • `}
+                {selectedMedicine.active_ingredient && `${t('admin.linkMedicine.activeIngredient')} ${selectedMedicine.active_ingredient} • `}
-                {selectedMedicine.dosage && `Dosis: ${selectedMedicine.dosage} • `}
+                {selectedMedicine.dosage && `${t('admin.linkMedicine.dosage')} ${selectedMedicine.dosage} • `}
-                Nº Registro: {selectedMedicine.nregistro}
+                {t('admin.linkMedicine.registrationNumber')} {selectedMedicine.nregistro}
               </p>
               <button 
                 type="button" 
@@ -316,7 +318,7 @@ function PharmacyMedicineLink() {
                   setMedicineSearch('');
                 }}
               >
-                Cambiar medicamento
+                {t('admin.linkMedicine.changeMedicine')}
               </button>
             </div>
           )}
@@ -324,7 +326,7 @@ function PharmacyMedicineLink() {
 
         <div className="form-row">
           <div className="form-group">
-            <label>Precio (€)</label>
+            <label>{t('admin.linkMedicine.price')}</label>
             <input
               type="number"
               step="0.01"
@@ -335,7 +337,7 @@ function PharmacyMedicineLink() {
           </div>
 
           <div className="form-group">
-            <label>Stock</label>
+            <label>{t('admin.linkMedicine.stock')}</label>
             <input
               type="number"
               value={formData.stock}
@@ -347,21 +349,21 @@ function PharmacyMedicineLink() {
 
         <div className="form-actions">
           <button type="submit" className="btn-primary">
-            Vincular Medicamento
+            {t('admin.linkMedicine.linkBtn')}
           </button>
           <button type="button" className="btn-secondary" onClick={resetForm}>
-            Reiniciar
+            {t('admin.linkMedicine.reset')}
           </button>
         </div>
       </form>
 
       {selectedPharmacy && (
         <div className="pharmacy-medicines-section">
-          <h3>Medicamentos en {selectedPharmacy.name}</h3>
+          <h3>{t('admin.linkMedicine.medicationsIn')} {selectedPharmacy.name}</h3>
           {loading ? (
-            <div className="loading">Cargando...</div>
+            <div className="loading">{t('admin.linkMedicine.loading')}</div>
           ) : pharmacyMedicines.length === 0 ? (
-            <p className="empty-state">Aún no hay medicamentos vinculados a esta farmacia.</p>
+            <p className="empty-state">{t('admin.linkMedicine.empty')}</p>
           ) : (
             <div className="admin-list">
               {pharmacyMedicines.map((pm) => (
@@ -369,7 +371,7 @@ function PharmacyMedicineLink() {
                   <div className="item-content">
                     <h4>{pm.medicine_name}</h4>
                     <p>
-                      <strong>Precio:</strong> {pm.price ? `€${parseFloat(pm.price).toFixed(2)}` : 'No definido'} • 
+                      <strong>{t('admin.linkMedicine.priceLabel')}</strong> {pm.price ? `€${parseFloat(pm.price).toFixed(2)}` : t('admin.linkMedicine.undefined')} •
                       <strong> Stock:</strong> {pm.stock || 0}
                     </p>
                   </div>
@@ -377,17 +379,17 @@ function PharmacyMedicineLink() {
                     <button 
                       className="btn-edit"
                       onClick={() => {
-                        const newPrice = prompt('Introduce nuevo precio:', pm.price || '');
+                        const newPrice = prompt(t('admin.linkMedicine.newPrice'), pm.price || '');
-                        const newStock = prompt('Introduce nuevo stock:', pm.stock || '0');
+                        const newStock = prompt(t('admin.linkMedicine.newStock'), pm.stock || '0');
                         if (newPrice !== null && newStock !== null) {
                           handleUpdate(pm.id, newPrice ? parseFloat(newPrice) : null, parseInt(newStock) || 0);
                         }
                       }}
                     >
-                      Actualizar
+                      {t('admin.linkMedicine.update')}
                     </button>
                     <button className="btn-delete" onClick={() => handleDelete(pm.id)}>
-                      Eliminar
+                      {t('admin.linkMedicine.delete')}
                     </button>
                   </div>
                 </div>

apps/frontend/src/components/admin/PharmacyProductLink.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useMemo, useRef } from 'react';
+import { useTranslation } from '../../i18n';
 import './AdminComponents.css';
 
 const MAX_PHARMACY_RESULTS = 25;
@@ -8,6 +9,7 @@ function normalize(s) {
 }
 
 function PharmacyProductLink() {
+  const { t } = useTranslation();
   const [pharmacies, setPharmacies] = useState([]);
   const [productSearch, setProductSearch] = useState('');
   const [productResults, setProductResults] = useState([]);
@@ -130,7 +132,7 @@ function PharmacyProductLink() {
     e.preventDefault();
     
     if (!selectedProduct) {
-      alert('Por favor, selecciona un producto primero');
+      alert(t('admin.linkProduct.selectProductFirst'));
       return;
     }
 
@@ -156,16 +158,16 @@ function PharmacyProductLink() {
         body: JSON.stringify(payload)
       });
 
-      if (!response.ok) throw new Error('Error al vincular producto a farmacia');
+      if (!response.ok) throw new Error(t('admin.linkProduct.linkError'));
 
       resetForm();
       if (selectedPharmacy) {
         fetchPharmacyProducts(selectedPharmacy.id);
       }
-      alert('¡Producto vinculado a la farmacia correctamente!');
+      alert(t('admin.linkProduct.linkSuccess'));
     } catch (error) {
       console.error('Error linking product:', error);
-      alert('Error al vincular producto a farmacia');
+      alert(t('admin.linkProduct.linkError'));
     }
   };
 
@@ -178,18 +180,18 @@ function PharmacyProductLink() {
         body: JSON.stringify({ price, stock })
       });
 
-      if (!response.ok) throw new Error('Error al actualizar');
+      if (!response.ok) throw new Error(t('admin.linkProduct.updateError'));
 
       fetchPharmacyProducts(selectedPharmacy.id);
-      alert('¡Actualizado correctamente!');
+      alert(t('admin.linkProduct.updateSuccess'));
     } catch (error) {
       console.error('Error updating:', error);
-      alert('Error al actualizar');
+      alert(t('admin.linkProduct.updateError'));
     }
   };
 
   const handleDelete = async (id) => {
-    if (!confirm('¿Eliminar este producto de la farmacia?')) return;
+    if (!confirm(t('admin.linkProduct.deleteConfirm'))) return;
 
     try {
       const response = await fetch(`/api/admin/pharmacy-products/${id}`, {
@@ -197,13 +199,13 @@ function PharmacyProductLink() {
         credentials: 'include'
       });
 
-      if (!response.ok) throw new Error('Error al eliminar');
+      if (!response.ok) throw new Error(t('admin.linkProduct.deleteError'));
 
       fetchPharmacyProducts(selectedPharmacy.id);
-      alert('¡Producto eliminado de la farmacia!');
+      alert(t('admin.linkProduct.deleteSuccess'));
     } catch (error) {
       console.error('Error deleting:', error);
-      alert('Error al eliminar producto');
+      alert(t('admin.linkProduct.deleteError'));
     }
   };
 
@@ -266,11 +268,11 @@ function PharmacyProductLink() {
 
   return (
     <div className="admin-section">
-      <h2>Vincular Producto a Farmacia</h2>
+      <h2>{t('admin.linkProduct.title')}</h2>
 
       <form className="admin-form" onSubmit={handleSubmit}>
         <div className="form-group">
-          <label>Farmacia *</label>
+          <label>{t('admin.linkProduct.pharmacy')}</label>
           <input
             ref={pharmacyInputRef}
             type="text"
@@ -285,7 +287,7 @@ function PharmacyProductLink() {
             }}
             onFocus={() => setPharmacyDropdownOpen(true)}
             onBlur={() => setTimeout(() => setPharmacyDropdownOpen(false), 150)}
-            placeholder={pharmacies.length ? `Buscar entre ${pharmacies.length} farmacias por nombre o dirección…` : 'Cargando farmacias…'}
+            placeholder={pharmacies.length ? `${t('admin.linkProduct.searchPharmacy')} ${pharmacies.length} ${t('admin.linkProduct.pharmacies')}` : t('admin.linkProduct.loadingPharmacies')}
             autoComplete="off"
             required={!selectedPharmacy}
           />
@@ -293,7 +295,7 @@ function PharmacyProductLink() {
             <div className="medicine-search-results">
               {filteredPharmacies.length === 0 ? (
                 <div className="search-result-item search-result-item--empty">
-                  <span>No hay farmacias que coincidan con "{pharmacyQuery}"</span>
+                  <span>{t('admin.linkProduct.noPharmacies')} "{pharmacyQuery}"</span>
                 </div>
               ) : (
                 filteredPharmacies.map((pharmacy) => (
@@ -314,14 +316,14 @@ function PharmacyProductLink() {
               <p>✅ Selected: <strong>{selectedPharmacy.name}</strong></p>
               <p className="medicine-details">{selectedPharmacy.address}</p>
               <button type="button" className="btn-small" onClick={clearPharmacy}>
-                Cambiar farmacia
+                {t('admin.linkProduct.changePharmacy')}
               </button>
             </div>
           )}
         </div>
 
         <div className="form-group">
-          <label>Buscar Producto (CIMA / Parafarmacia) *</label>
+          <label>{t('admin.linkProduct.product')}</label>
           <input
             type="text"
             value={productSearch}
@@ -329,10 +331,10 @@ function PharmacyProductLink() {
               setProductSearch(e.target.value);
               setSelectedProduct(null);
             }}
-            placeholder="Escribe para buscar medicamentos o productos de parafarmacia..."
+            placeholder={t('admin.linkProduct.searchProduct')}
             required
           />
-          {searching && <p className="loading-text">Buscando...</p>}
+          {searching && <p className="loading-text">{t('admin.linkProduct.searching')}</p>}
 
           {productResults.length > 0 && !selectedProduct && (
             <div className="medicine-search-results">
@@ -356,9 +358,9 @@ function PharmacyProductLink() {
             <div className="selected-medicine-info">
               <p>✅ Selected: <strong>{selectedProduct.product_name || selectedProduct.name}</strong></p>
               <p className="medicine-details">
-                {selectedProduct.brand && `Marca: ${selectedProduct.brand} • `}
+                {selectedProduct.brand && `${t('admin.linkProduct.brand')} ${selectedProduct.brand} • `}
-                {selectedProduct.brands && `Marca: ${selectedProduct.brands} • `}
+                {selectedProduct.brands && `${t('admin.linkProduct.brand')} ${selectedProduct.brands} • `}
-                {selectedProduct.price != null && `Precio: ${selectedProduct.price}€ • `}
+                {selectedProduct.price != null && `${t('admin.linkProduct.price')} ${selectedProduct.price}€ • `}
                 {getSourceBadge(selectedProduct.source || 'parapharmacy')}
                 {' '}
                 {selectedProduct._id || selectedProduct.id || selectedProduct.nregistro}
@@ -371,7 +373,7 @@ function PharmacyProductLink() {
                   setProductSearch('');
                 }}
               >
-                Cambiar producto
+                {t('admin.linkProduct.changeProduct')}
               </button>
             </div>
           )}
@@ -379,7 +381,7 @@ function PharmacyProductLink() {
 
         <div className="form-row">
           <div className="form-group">
-            <label>Precio (€)</label>
+            <label>{t('admin.linkProduct.priceInput')}</label>
             <input
               type="number"
               step="0.01"
@@ -390,7 +392,7 @@ function PharmacyProductLink() {
           </div>
 
           <div className="form-group">
-            <label>Stock</label>
+            <label>{t('admin.linkProduct.stock')}</label>
             <input
               type="number"
               value={formData.stock}
@@ -402,21 +404,21 @@ function PharmacyProductLink() {
 
         <div className="form-actions">
           <button type="submit" className="btn-primary">
-            Vincular Producto
+            {t('admin.linkProduct.linkBtn')}
           </button>
           <button type="button" className="btn-secondary" onClick={resetForm}>
-            Reiniciar
+            {t('admin.linkProduct.reset')}
           </button>
         </div>
       </form>
 
       {selectedPharmacy && (
         <div className="pharmacy-medicines-section">
-          <h3>Productos en {selectedPharmacy.name}</h3>
+          <h3>{t('admin.linkProduct.productsIn')} {selectedPharmacy.name}</h3>
           {loading ? (
-            <div className="loading">Cargando...</div>
+            <div className="loading">{t('admin.linkProduct.loading')}</div>
           ) : pharmacyProducts.length === 0 ? (
-            <p className="empty-state">Aún no hay productos vinculados a esta farmacia.</p>
+            <p className="empty-state">{t('admin.linkProduct.empty')}</p>
           ) : (
             <div className="admin-list">
               {pharmacyProducts.map((pp) => (
@@ -427,7 +429,7 @@ function PharmacyProductLink() {
                       {getSourceBadge(pp.product_source)}
                     </h4>
                     <p>
-                      <strong>Precio:</strong> {pp.price ? `€${parseFloat(pp.price).toFixed(2)}` : 'No definido'} • 
+                      <strong>{t('admin.linkProduct.priceLabel')}</strong> {pp.price ? `€${parseFloat(pp.price).toFixed(2)}` : t('admin.linkProduct.undefined')} • 
                       <strong> Stock:</strong> {pp.stock || 0}
                     </p>
                   </div>
@@ -435,17 +437,17 @@ function PharmacyProductLink() {
                     <button 
                       className="btn-edit"
                       onClick={() => {
-                        const newPrice = prompt('Introduce nuevo precio:', pp.price || '');
+                        const newPrice = prompt(t('admin.linkProduct.newPrice'), pp.price || '');
-                        const newStock = prompt('Introduce nuevo stock:', pp.stock || '0');
+                        const newStock = prompt(t('admin.linkProduct.newStock'), pp.stock || '0');
                         if (newPrice !== null && newStock !== null) {
                           handleUpdate(pp.id, newPrice ? parseFloat(newPrice) : null, parseInt(newStock) || 0);
                         }
                       }}
                     >
-                      Actualizar
+                      {t('admin.linkProduct.update')}
                     </button>
                     <button className="btn-delete" onClick={() => handleDelete(pp.id)}>
-                      Eliminar
+                      {t('admin.linkProduct.delete')}
                     </button>
                   </div>
                 </div>

apps/frontend/src/i18n/LanguageContext.jsx

@@ -0,0 +1,40 @@
+import React, { createContext, useState, useCallback, useMemo } from 'react';
+import es from './locales/es';
+import ca from './locales/ca';
+
+const locales = { es, ca };
+
+function getInitialLang() {
+  try {
+    const saved = localStorage.getItem('ff-lang');
+    if (saved === 'ca' || saved === 'es') return saved;
+  } catch {}
+  const browserLang = navigator.language || navigator.userLanguage || '';
+  return browserLang.startsWith('ca') ? 'ca' : 'es';
+}
+
+export const LanguageContext = createContext(null);
+
+export function LanguageProvider({ children }) {
+  const [lang, setLangState] = useState(getInitialLang);
+
+  const setLang = useCallback((newLang) => {
+    if (newLang !== 'ca' && newLang !== 'es') return;
+    setLangState(newLang);
+    try {
+      localStorage.setItem('ff-lang', newLang);
+    } catch {}
+  }, []);
+
+  const t = useCallback((key) => {
+    return locales[lang]?.[key] || locales.es[key] || key;
+  }, [lang]);
+
+  const value = useMemo(() => ({ lang, setLang, t }), [lang, setLang, t]);
+
+  return (
+    <LanguageContext.Provider value={value}>
+      {children}
+    </LanguageContext.Provider>
+  );
+}

apps/frontend/src/i18n/index.js

@@ -0,0 +1,2 @@
+export { LanguageProvider } from './LanguageContext';
+export { useTranslation } from './useTranslation';

apps/frontend/src/i18n/locales/ca.js

@@ -0,0 +1,414 @@
+const ca = {
+  // BottomNav
+  'nav.home': 'Inici',
+  'nav.search': 'Cercar',
+  'nav.scan': 'Escanejar',
+  'nav.alerts': 'Alertes',
+  'nav.profile': 'Usuari',
+
+  // HomeView
+  'home.description': 'Trobeu els vostres medicaments a farmàcies properes',
+  'home.searchMedicine': 'Cercar Medicament',
+  'home.scanTSI': 'Escanejar TSI',
+
+  // SearchBar
+  'search.placeholder': 'Escriviu el nom del medicament',
+  'search.clear': 'Netejar cerca',
+
+  // SearchView
+  'search.suggestions': 'Suggeriments',
+  'search.recentResults': 'Resultats Recents',
+  'search.findNearby': 'Cerca a prop teu',
+  'search.resultsFound': 'resultats trobats',
+  'search.parapharmacy': 'Parafarmàcia',
+  'search.activeIngredient': 'Principi Actiu',
+  'search.dosage': 'Dosificació',
+  'search.form': 'Forma',
+  'search.backToSearch': '← Tornar a la cerca',
+  'search.sortByDistance': '📍 Ordenar per distància',
+  'search.sortBySavedLocation': '📍 Ordenar per ubicació desada',
+  'search.sortedByDistance': '📍 Ordenat per distància · Restablir',
+  'search.locating': '📍 Localitzant…',
+  'search.usingSavedAddress': 'Usant la vostra adreça desada',
+  'search.usingRecentLocation': 'Usant ubicació recent',
+  'search.retry': 'Tornar a provar',
+  'search.locationDenied': 'Permís d\'ubicació denegat. Permeteu l\'accés a la ubicació al vostre navegador.',
+  'search.locationUnavailable': 'Ubicació no disponible. Verifiqueu que el GPS estigui activat.',
+  'search.locationTimeout': 'L\'ubicació ha trigat massa. Torneu-ho a provar o verifiqueu la vostra connexió.',
+  'search.locationError': 'No s\'ha pogut obtenir la vostra ubicació',
+  'search.searching': 'Cercant...',
+
+  // MedicineResults
+  'medicine.noResults': 'No s\'han trobat medicaments per a',
+  'medicine.principioActivo': 'Principi Actiu:',
+  'medicine.dosis': 'Dosificació:',
+  'medicine.forma': 'Forma:',
+  'medicine.viewPharmacies': 'Veure farmàcies →',
+  'medicine.loginForNotifications': 'Inicieu sessió per activar notificacions',
+  'medicine.disableNotifications': 'Desactivar notificacions per a aquest medicament',
+  'medicine.enableNotifications': 'Notificar-me quan estigui disponible',
+  'medicine.notificationsActivated': 'Notificacions activades — clic per desactivar',
+  'medicine.notifyWhenAvailable': 'Notificar-me quan aquest medicament estigui a una farmàcia',
+  'medicine.subscriptionError': 'No s\'ha pogut actualitzar la subscripció',
+
+  // PharmacyList
+  'pharmacy.loading': 'Carregant farmàcies...',
+  'pharmacy.notFound': 'No s\'han trobat farmàcies amb aquest medicament',
+  'pharmacy.availableAt': 'Disponible a',
+  'pharmacy.pharmacy': 'farmàcia',
+  'pharmacy.pharmacies': 'farmàcies',
+  'pharmacy.howToGet': 'Com arribar',
+  'pharmacy.inStock': '✓ En Estoc',
+  'pharmacy.lowStock': '⚠ Estoc Baix',
+  'pharmacy.outOfStock': '✗ Sense Estoc',
+  'pharmacy.loginForNotifications': 'Inicieu sessió per activar notificacions',
+  'pharmacy.disableNotificationsPharmacy': 'Desactivar notificacions per a aquesta farmàcia',
+  'pharmacy.notifyWhenArrives': 'Notificar-me quan arribi a aquesta farmàcia',
+  'pharmacy.notificationsActivatedPharmacy': 'Notificacions activades per a aquesta farmàcia — clic per desactivar',
+  'pharmacy.notificationsRequired': 'Les notificacions requereixen iOS 16.4+ i aquest lloc instal·lat com a app (Compartir → Afegir a Pantalla d\'Inici).',
+
+  // ProductResults
+  'product.sinReceta': 'Sense Recepta',
+  'product.parapharmacy': 'Parafarmàcia',
+  'product.dermocosmetica': 'Dermocosmètica',
+  'product.formulasLacteas': 'Fórmules Làctees',
+  'product.vitamins': 'Vitamines',
+  'product.analgesics': 'Analgèsics',
+  'product.noResults': 'No s\'han trobat productes',
+  'product.brand': 'Marca:',
+  'product.price': 'Preu:',
+  'product.activeIngredient': 'Principi Actiu:',
+  'product.dosage': 'Dosificació:',
+  'product.viewDetails': 'Veure detalls →',
+
+  // LoginModal
+  'login.login': 'Iniciar sessió',
+  'login.register': 'Crear compte',
+  'login.welcomeBack': 'Benvingut de nou',
+  'login.createAccount': 'Crea el teu compte',
+  'login.registerDescription': 'Desa la teva adreça i rep notificacions quan arribin medicaments.',
+  'login.loginDescription': 'Inicia sessió per gestionar el teu perfil i notificacions.',
+  'login.username': 'Usuari',
+  'login.usernameHint': '3–32 caràcters: lletres, dígits o guió baix.',
+  'login.password': 'Contrasenya',
+  'login.passwordHint': 'Almenys 8 caràcters.',
+  'login.cancel': 'Cancel·lar',
+  'login.creating': 'Creant…',
+  'login.loggingIn': 'Iniciant sessió…',
+  'login.createAccountBtn': 'Crear compte',
+  'login.loginBtn': 'Iniciar sessió',
+  'login.passwordError': 'La contrasenya ha de tenir almenys 8 caràcters',
+  'login.registerError': 'No s\'ha pogut crear el compte',
+  'login.loginError': 'Error d\'inici de sessió',
+  'login.networkError': 'Error de xarxa — torneu-ho a provar',
+
+  // AlertsView
+  'alerts.title': 'Les Meves Alertes',
+  'alerts.subtitle': 'Mantingueu-vos al dia amb els vostres medicaments.',
+  'alerts.loading': 'Carregant alertes...',
+  'alerts.loginRequired': 'Si us plau, inicieu sessió per veure les vostres alertes.',
+  'alerts.loadError': 'No s\'han pogut carregar les alertes.',
+  'alerts.availability': 'Disponibilitat',
+  'alerts.noSubscriptions': 'No teniu subscripcions de disponibilitat.',
+  'alerts.notifyWhenAvailable': 'Notificar-me quan estigui disponible',
+  'alerts.deleteError': 'No s\'ha pogut eliminar l\'alerta de disponibilitat.',
+  'alerts.pharmacy': 'Farmàcia',
+
+  // ScannerView
+  'scanner.title': 'Escanejar TSI',
+  'scanner.description': 'Escanegeu el codi de barres de la vostra targeta sanitària per veure les vostres receptes actives',
+  'scanner.openCamera': 'Obrir càmera',
+  'scanner.orUploadPhoto': 'O pugeu una foto de la vostra TSI',
+  'scanner.takePhoto': 'Fer foto',
+  'scanner.uploadFromGallery': 'Pujar de galeria',
+  'scanner.scanImage': 'Escanejar imatge',
+  'scanner.discard': 'Descartar',
+  'scanner.enterCIP': 'O introduïu el codi CIP manualment',
+  'scanner.cipPlaceholder': 'Codi CIP de 16 dígits',
+  'scanner.search': 'Cercar',
+  'scanner.scanning': 'Apunteu al codi de barres',
+  'scanner.openingCamera': 'Obrint càmera…',
+  'scanner.processingImage': 'Processant imatge…',
+  'scanner.tsiScanned': 'TSI Escanejada',
+  'scanner.activePrescriptions': 'Receptes Actives',
+  'scanner.tapToFind': 'Toqueu un medicament per veure disponibilitat a farmàcies properes.',
+  'scanner.loadingPrescriptions': 'Carregant receptes…',
+  'scanner.noPrescriptions': 'No s\'han trobat receptes actives per a aquesta targeta.',
+  'scanner.scanAnother': 'Escanejar una altra targeta',
+  'scanner.tryAgain': 'Tornar a provar',
+  'scanner.scannerUnavailable': 'L\'escàner no està disponible en aquest dispositiu.',
+  'scanner.cameraPermissionDenied': 'Permís de càmera denegat. Activeu-lo a la configuració o introduïu el codi CIP manualment.',
+  'scanner.invalidBarcode': 'Codi de barres invàlid. Torneu-ho a provar o introduïu el CIP manualment.',
+  'scanner.cameraNotAvailable': 'Càmera no disponible en aquest navegador.',
+  'scanner.invalidCIP': 'Format CIP invàlid. Ha de tenir 16 caràcters alfanumèrics.',
+  'scanner.enterCIPError': 'Introduïu un codi CIP.',
+  'scanner.cameraPermissionWeb': 'Permís de càmera denegat. Permeteu l\'accés i torneu-ho a provar.',
+  'scanner.noCamera': 'No s\'ha detectat cap càmera. Introduïu el codi CIP manualment.',
+  'scanner.imageReadError': 'No s\'ha pogut llegir la imatge. Proveu amb una altra foto.',
+  'scanner.invalidCIPDetected': 'CIP detectat no té format vàlid. Introduïu el codi manualment.',
+  'scanner.scanError': 'Error en escanejar:',
+  'scanner.unknownError': 'Error desconegut',
+  'scanner.cameraError': 'Error de càmera:',
+  'scanner.imageProcessError': 'Error en processar la imatge:',
+
+  // ProfileView
+  'profile.name': 'Nom',
+  'profile.lastName': 'Cognoms',
+  'profile.config': 'Configuració',
+  'profile.myAddresses': 'Les Meves Adreces',
+  'profile.theme': 'Tema',
+  'profile.themeAuto': 'Automàtic',
+  'profile.themeLight': 'Clar',
+  'profile.themeDark': 'Fosc',
+  'profile.admin': 'Panell d\'Administració',
+  'profile.logout': 'Tancar Sessió',
+  'profile.uploadingPhoto': 'Pujant foto...',
+  'profile.recentSearches': 'Les vostres cerques recents:',
+  'profile.delete': 'Eliminar',
+  'profile.changeAvatar': 'Canviar Avatar',
+  'profile.presetAvatar': 'Predissenyat',
+  'profile.colors': 'Colors',
+  'profile.upload': 'Pujar',
+  'profile.chooseFromGallery': 'Trieu de galeria',
+  'profile.selectExistingImage': 'Seleccioneu una imatge existent',
+  'profile.imageTooBig': 'La imatge no pot superar els 5 MB',
+  'profile.imageSaveError': 'Error en desar la imatge. Proveu amb una altra foto.',
+  'profile.imageConnectionError': 'Error de connexió en desar la imatge.',
+  'profile.imageProcessError': 'Error en processar la imatge.',
+  'profile.configTitle': 'Configuració',
+  'profile.firstName': 'Nom',
+  'profile.firstNamePlaceholder': 'El vostre nom',
+  'profile.lastNamePlaceholder': 'Els vostres cognoms',
+  'profile.email': 'Correu electrònic',
+  'profile.emailPlaceholder': 'el_vostre@email.com',
+  'profile.city': 'Ciutat',
+  'profile.cityPlaceholder': 'La vostra ciutat',
+  'profile.address': 'Adreça',
+  'profile.addressPlaceholder': 'Carrer Major 1, Barcelona',
+  'profile.cancel': 'Cancel·lar',
+  'profile.saving': 'Desant...',
+  'profile.save': 'Desar',
+  'profile.profileSaved': 'Perfil desat.',
+  'profile.saveError': 'Error en desar',
+  'profile.addressesTitle': 'Les Meves Adreces',
+  'profile.addressLabel': 'Adreça',
+  'profile.addressOptional': 'Etiqueta (opcional)',
+  'profile.addressLabelPlaceholder': 'Ex: Casa, Treball, Segona residència',
+  'profile.defaultAddress': 'Adreça predeterminada',
+  'profile.add': 'Afegir',
+  'profile.update': 'Actualitzar',
+  'profile.loadingAddresses': 'Carregant adreces...',
+  'profile.mainAddress': 'Adreça principal',
+  'profile.default': 'Predeterminada',
+  'profile.setDefault': 'Establir com a predeterminada',
+  'profile.addMore': 'Afegir més',
+  'profile.addressRequired': 'L\'adreça és obligatòria',
+  'profile.addressSaveError': 'Error en desar l\'adreça',
+  'profile.themeTitle': 'Tema de visualització',
+  'profile.themeDescription': 'Trieu com es veu l\'aplicació. En mode automàtic, s\'adapta al tema del vostre dispositiu.',
+  'profile.themeAutoDesc': 'Seguir sistema',
+  'profile.themeLightDesc': 'Sempre clar',
+  'profile.themeDarkDesc': 'Sempre fosc',
+  'profile.language': 'Idioma',
+  'profile.languageTitle': 'Idioma de l\'aplicació',
+  'profile.languageCatalan': 'Català',
+  'profile.languageSpanish': 'Castellà',
+
+  // SavedNotifications
+  'savedNotifications.title': '🔔 Notificacions Desades',
+  'savedNotifications.close': 'Tancar',
+  'savedNotifications.loading': 'Carregant…',
+  'savedNotifications.empty': 'Encara no hi ha notificacions desades. Toqueu la campana 🔕 a una farmàcia sense estoc per rebre notificacions quan es reposi.',
+  'savedNotifications.anyPharmacy': 'Qualsevol farmàcia',
+  'savedNotifications.delete': 'Eliminar notificació',
+  'savedNotifications.loadError': 'No s\'han pogut carregar les notificacions desades',
+  'savedNotifications.deleteError': 'No s\'ha pogut eliminar la notificació',
+
+  // ErrorBoundary
+  'error.title': 'Alguna cosa ha fallat',
+  'error.description': 'Ha ocorregut un error inesperat. Si us plau, recarregueu la pàgina.',
+  'error.reload': 'Recarregar',
+
+  // AdminView
+  'admin.title': '⚙️ Panell d\'Administració',
+  'admin.authRequired': 'Autenticació requerida',
+  'admin.managePharmacies': 'Gestioneu farmàcies i medicaments',
+  'admin.logout': 'Tancar sessió',
+  'admin.checkingAuth': 'Comprovant autenticació...',
+  'admin.pharmacies': '🏥 Farmàcies',
+  'admin.medicines': '💊 Medicaments',
+  'admin.linkMedicine': '🔗 Vincular Medicament a Farmàcia',
+  'admin.linkProduct': '🍎 Vincular Producte a Farmàcia',
+
+  // LoginForm
+  'admin.login.title': '🔐 Accés Administració',
+  'admin.login.description': 'Introduïu les vostres credencials per accedir al panell d\'administració',
+  'admin.login.username': 'Usuari',
+  'admin.login.usernamePlaceholder': 'Introduïu usuari',
+  'admin.login.password': 'Contrasenya',
+  'admin.login.passwordPlaceholder': 'Introduïu contrasenya',
+  'admin.login.loggingIn': 'Iniciant sessió...',
+  'admin.login.loginBtn': 'Iniciar sessió',
+  'admin.login.defaultCredentials': 'Credencials per defecte:',
+  'admin.login.changePasswordWarning': '⚠️ Canvieu la contrasenya per defecte després del primer inici de sessió!',
+  'admin.login.failed': 'Error d\'inici de sessió',
+  'admin.login.invalidCredentials': 'Usuari o contrasenya invàlids',
+
+  // PharmacyManagement
+  'admin.pharmacy.title': 'Gestionar Farmàcies',
+  'admin.pharmacy.addNew': '+ Afegir Nova Farmàcia',
+  'admin.pharmacy.edit': 'Editar Farmàcia',
+  'admin.pharmacy.add': 'Afegir Nova Farmàcia',
+  'admin.pharmacy.name': 'Nom *',
+  'admin.pharmacy.address': 'Adreça *',
+  'admin.pharmacy.phone': 'Telèfon',
+  'admin.pharmacy.latitude': 'Latitud',
+  'admin.pharmacy.longitude': 'Longitud',
+  'admin.pharmacy.openingHours': 'Horari d\'obertura',
+  'admin.pharmacy.closed': 'Tancat',
+  'admin.pharmacy.opensAt': 'obre a les',
+  'admin.pharmacy.closesAt': 'tanca a les',
+  'admin.pharmacy.saving': 'Desant...',
+  'admin.pharmacy.update': 'Actualitzar',
+  'admin.pharmacy.create': 'Afegir',
+  'admin.pharmacy.cancel': 'Cancel·lar',
+  'admin.pharmacy.loading': 'Carregant farmàcies...',
+  'admin.pharmacy.showing': 'Mostrant',
+  'admin.pharmacy.of': 'de',
+  'admin.pharmacy.withinRadio': '(dins del radi)',
+  'admin.pharmacy.empty': 'Encara no hi ha farmàcies. Importeu des de webhook o afegiu-ne una manualment.',
+  'admin.pharmacy.noResults': 'No hi ha farmàcies en aquest radi amb coordenades. Amplieu el radi, cerqueu una altra ciutat o desactiveu el filtre de regió.',
+  'admin.pharmacy.editBtn': 'Editar',
+  'admin.pharmacy.deleteBtn': 'Eliminar',
+  'admin.pharmacy.deleteConfirm': 'Esteu segur que voleu eliminar aquesta farmàcia?',
+  'admin.pharmacy.updated': 'Farmàcia actualitzada!',
+  'admin.pharmacy.created': 'Farmàcia afegida!',
+  'admin.pharmacy.deleted': 'Farmàcia eliminada!',
+  'admin.pharmacy.loadError': 'Error en carregar farmàcies',
+  'admin.pharmacy.updateError': 'Error en actualitzar farmàcia',
+  'admin.pharmacy.createError': 'Error en crear farmàcia',
+  'admin.pharmacy.deleteError': 'Error en eliminar farmàcia',
+  'admin.pharmacy.citySearch': 'Ciutat, regió i importació',
+  'admin.pharmacy.searchCity': 'Cercar ciutat',
+  'admin.pharmacy.chooseOne': 'Trieu-ne una',
+  'admin.pharmacy.openDataUrl': 'URL de dades obertes',
+  'admin.pharmacy.cityPlaceholder': 'Ex: Rubí, Madrid, València…',
+  'admin.pharmacy.searching': 'Cercant…',
+  'admin.pharmacy.areaPreset': 'Preset d\'àrea',
+  'admin.pharmacy.customCoordinates': 'Coordenades personalitzades',
+  'admin.pharmacy.areaExample': 'Exemple: Àrea de Rubí (1,5 km)',
+  'admin.pharmacy.enterCity': 'Introduïu una ciutat o lloc.',
+  'admin.pharmacy.setCoordinates': 'Establiu latitud, longitud i radi (useu Cercar ciutat o un preset).',
+  'admin.pharmacy.dataSource': 'Font de dades',
+  'admin.pharmacy.webhookLegacy': 'n8n webhook (heretat)',
+  'admin.pharmacy.openDataJson': 'URL de dades obertes JSON',
+  'admin.pharmacy.jsonUrl': 'URL JSON',
+  'admin.pharmacy.importing': 'Important…',
+  'admin.pharmacy.importWebhook': 'Importar des de webhook',
+  'admin.pharmacy.importUrl': 'Importar des d\'URL',
+  'admin.pharmacy.importFrom': 'Importar des de',
+  'admin.pharmacy.showWithinRadio': 'Mostrar només farmàcies dins del radi',
+  'admin.pharmacy.sessionExpired': 'Sessió expirada o no heu iniciat sessió. Inicieu sessió de nou al panell Admin i torneu-ho a provar.',
+  'admin.pharmacy.apiNotFound': 'L\'app no ha pogut connectar amb l\'API (404). Useu http://localhost:3000 amb frontend i backend actius.',
+  'admin.pharmacy.geocodificationNotFound': 'Servei de geocodificació no trobat. Actualitzeu el backend i reinicieu-lo.',
+  'admin.pharmacy.searchFailed': 'Cerca fallida (HTTP',
+  'admin.pharmacy.dayClosed': 'Marqueu un dia com a Tancat si la farmàcia no obre aquest dia.',
+  'admin.pharmacy.saveError': 'Error en desar farmàcia',
+  'admin.pharmacy.radius': 'Radi (m)',
+
+  // MedicineManagement
+  'admin.medicine.title': 'Cercar Medicaments (API CIMA)',
+  'admin.medicine.description': 'Els medicaments s\'obtenen directament de la',
+  'admin.medicine.cimaApi': 'API de CIMA',
+  'admin.medicine.cimaDescription': '(Agència Espanyola de Medicaments i Productes Sanitaris).',
+  'admin.medicine.linkDescription': 'Cerqueu medicaments per vincular-los a farmàcies a la pestanya "Link Medicine".',
+  'admin.medicine.search': 'Cercar medicaments',
+  'admin.medicine.searchPlaceholder': 'Escriviu el nom d\'un medicament...',
+  'admin.medicine.searching': 'Cercant a API CIMA...',
+  'admin.medicine.found': 'S\'han trobat',
+  'admin.medicine.medications': 'medicaments',
+  'admin.medicine.activeIngredient': 'Principi Actiu:',
+  'admin.medicine.dosage': 'Dosificació:',
+  'admin.medicine.form': 'Forma:',
+  'admin.medicine.laboratory': 'Laboratori:',
+  'admin.medicine.registrationNumber': 'Nº Registre:',
+  'admin.medicine.generic': 'Genèric',
+  'admin.medicine.brand': 'Marca',
+  'admin.medicine.noResults': 'No s\'han trobat medicaments amb aquest nom.',
+  'admin.medicine.loadError': 'Error en cercar medicaments a l\'API CIMA',
+
+  // PharmacyMedicineLink
+  'admin.linkMedicine.title': 'Vincular Medicament a Farmàcia',
+  'admin.linkMedicine.pharmacy': 'Farmàcia *',
+  'admin.linkMedicine.searchPharmacy': 'Cercar entre',
+  'admin.linkMedicine.pharmacies': 'farmàcies per nom o adreça…',
+  'admin.linkMedicine.loadingPharmacies': 'Carregant farmàcies…',
+  'admin.linkMedicine.noPharmacies': 'No hi ha farmàcies que coincideixin amb',
+  'admin.linkMedicine.changePharmacy': 'Canviar farmàcia',
+  'admin.linkMedicine.medicine': 'Cercar Medicament (API CIMA) *',
+  'admin.linkMedicine.searchMedicine': 'Escriviu per cercar medicaments a CIMA...',
+  'admin.linkMedicine.searching': 'Cercant...',
+  'admin.linkMedicine.activeIngredient': 'Principi actiu:',
+  'admin.linkMedicine.dosage': 'Dosificació:',
+  'admin.linkMedicine.registrationNumber': 'Nº Registre:',
+  'admin.linkMedicine.changeMedicine': 'Canviar medicament',
+  'admin.linkMedicine.price': 'Preu (€)',
+  'admin.linkMedicine.stock': 'Estoc',
+  'admin.linkMedicine.linkBtn': 'Vincular Medicament',
+  'admin.linkMedicine.reset': 'Restablir',
+  'admin.linkMedicine.medicationsIn': 'Medicaments a',
+  'admin.linkMedicine.loading': 'Carregant...',
+  'admin.linkMedicine.empty': 'Encara no hi ha medicaments vinculats a aquesta farmàcia.',
+  'admin.linkMedicine.priceLabel': 'Preu:',
+  'admin.linkMedicine.undefined': 'No definit',
+  'admin.linkMedicine.newPrice': 'Introduïu nou preu:',
+  'admin.linkMedicine.newStock': 'Introduïu nou estoc:',
+  'admin.linkMedicine.update': 'Actualitzar',
+  'admin.linkMedicine.delete': 'Eliminar',
+  'admin.linkMedicine.selectMedicineFirst': 'Si us plau, seleccioneu un medicament primer',
+  'admin.linkMedicine.linkSuccess': 'Medicament vinculat a la farmàcia correctament!',
+  'admin.linkMedicine.linkError': 'Error en vincular medicament a farmàcia',
+  'admin.linkMedicine.updateSuccess': 'Actualitzat correctament!',
+  'admin.linkMedicine.updateError': 'Error en actualitzar',
+  'admin.linkMedicine.deleteConfirm': 'Eliminar aquest medicament de la farmàcia?',
+  'admin.linkMedicine.deleteSuccess': 'Medicament eliminat de la farmàcia!',
+  'admin.linkMedicine.deleteError': 'Error en eliminar medicament',
+
+  // PharmacyProductLink
+  'admin.linkProduct.title': 'Vincular Producte a Farmàcia',
+  'admin.linkProduct.pharmacy': 'Farmàcia *',
+  'admin.linkProduct.searchPharmacy': 'Cercar entre',
+  'admin.linkProduct.pharmacies': 'farmàcies per nom o adreça…',
+  'admin.linkProduct.loadingPharmacies': 'Carregant farmàcies…',
+  'admin.linkProduct.noPharmacies': 'No hi ha farmàcies que coincideixin amb',
+  'admin.linkProduct.changePharmacy': 'Canviar farmàcia',
+  'admin.linkProduct.product': 'Cercar Producte (CIMA / Parafarmàcia) *',
+  'admin.linkProduct.searchProduct': 'Escriviu per cercar medicaments o productes de parafarmàcia...',
+  'admin.linkProduct.searching': 'Cercant...',
+  'admin.linkProduct.brand': 'Marca:',
+  'admin.linkProduct.price': 'Preu:',
+  'admin.linkProduct.changeProduct': 'Canviar producte',
+  'admin.linkProduct.priceInput': 'Preu (€)',
+  'admin.linkProduct.stock': 'Estoc',
+  'admin.linkProduct.linkBtn': 'Vincular Producte',
+  'admin.linkProduct.reset': 'Restablir',
+  'admin.linkProduct.productsIn': 'Productes a',
+  'admin.linkProduct.loading': 'Carregant...',
+  'admin.linkProduct.empty': 'Encara no hi ha productes vinculats a aquesta farmàcia.',
+  'admin.linkProduct.priceLabel': 'Preu:',
+  'admin.linkProduct.undefined': 'No definit',
+  'admin.linkProduct.newPrice': 'Introduïu nou preu:',
+  'admin.linkProduct.newStock': 'Introduïu nou estoc:',
+  'admin.linkProduct.update': 'Actualitzar',
+  'admin.linkProduct.delete': 'Eliminar',
+  'admin.linkProduct.selectProductFirst': 'Si us plau, seleccioneu un producte primer',
+  'admin.linkProduct.linkSuccess': 'Producte vinculat a la farmàcia correctament!',
+  'admin.linkProduct.linkError': 'Error en vincular producte a farmàcia',
+  'admin.linkProduct.updateSuccess': 'Actualitzat correctament!',
+  'admin.linkProduct.updateError': 'Error en actualitzar',
+  'admin.linkProduct.deleteConfirm': 'Eliminar aquest producte de la farmàcia?',
+  'admin.linkProduct.deleteSuccess': 'Producte eliminat de la farmàcia!',
+  'admin.linkProduct.deleteError': 'Error en eliminar producte',
+};
+
+export default ca;

apps/frontend/src/i18n/locales/es.js

@@ -0,0 +1,416 @@
+const es = {
+  // BottomNav
+  'nav.home': 'Inicio',
+  'nav.search': 'Buscar',
+  'nav.scan': 'Escanear',
+  'nav.alerts': 'Avisos',
+  'nav.profile': 'Usuario',
+
+  // HomeView
+  'home.description': 'Encuentra tus medicamentos en farmacias cercanas',
+  'home.searchMedicine': 'Buscar Medicamento',
+  'home.scanTSI': 'Escanear TSI',
+
+  // SearchBar
+  'search.placeholder': 'Escriba el nombre del medicamento',
+  'search.clear': 'Limpiar búsqueda',
+
+  // SearchView
+  'search.suggestions': 'Sugerencias',
+  'search.recentResults': 'Resultados Recientes',
+  'search.findNearby': 'Encontrar cerca',
+  'search.resultsFound': 'resultados encontrados',
+  'search.parapharmacy': 'Parafarmacia',
+  'search.activeIngredient': 'Ingrediente Activo',
+  'search.dosage': 'Dosis',
+  'search.form': 'Forma',
+  'search.backToSearch': '← Volver a búsqueda',
+  'search.sortByDistance': '📍 Ordenar por distancia',
+  'search.sortBySavedLocation': '📍 Ordenar por ubicación guardada',
+  'search.sortedByDistance': '📍 Ordenado por distancia · Reset',
+  'search.locating': '📍 Localizando…',
+  'search.usingSavedAddress': 'Usando tu dirección guardada',
+  'search.usingRecentLocation': 'Usando ubicación reciente',
+  'search.retry': 'Reintentar',
+  'search.locationDenied': 'Permiso de ubicación denegado. Permite el acceso a la ubicación en tu navegador.',
+  'search.locationUnavailable': 'Ubicación no disponible. Verifica que el GPS esté activado.',
+  'search.locationTimeout': 'La ubicación tardó demasiado. Intenta de nuevo o verifica tu conexión.',
+  'search.locationError': 'No se pudo obtener tu ubicación',
+  'search.searching': 'Buscando...',
+
+  // MedicineResults
+  'medicine.noResults': 'No se encontraron medicamentos para',
+  'medicine.principioActivo': 'Principio Activo:',
+  'medicine.dosis': 'Dosis:',
+  'medicine.forma': 'Forma:',
+  'medicine.viewPharmacies': 'Ver farmacias →',
+  'medicine.loginForNotifications': 'Inicia sesión para activar notificaciones',
+  'medicine.disableNotifications': 'Desactivar notificaciones para este medicamento',
+  'medicine.enableNotifications': 'Notificarme cuando esté disponible',
+  'medicine.notificationsActivated': 'Notificaciones activadas — clic para desactivar',
+  'medicine.notifyWhenAvailable': 'Notificarme cuando este medicamento esté en una farmacia',
+  'medicine.subscriptionError': 'No se pudo actualizar la suscripción',
+
+  // PharmacyList
+  'pharmacy.loading': 'Cargando farmacias...',
+  'pharmacy.notFound': 'No se encontraron farmacias con este medicamento',
+  'pharmacy.availableAt': 'Disponible en',
+  'pharmacy.pharmacy': 'farmacia',
+  'pharmacy.pharmacies': 'farmacias',
+  'pharmacy.howToGet': 'Cómo llegar',
+  'pharmacy.inStock': '✓ En Stock',
+  'pharmacy.lowStock': '⚠ Stock Bajo',
+  'pharmacy.outOfStock': '✗ Sin Stock',
+  'pharmacy.loginForNotifications': 'Inicia sesión para activar notificaciones',
+  'pharmacy.disableNotificationsPharmacy': 'Desactivar notificaciones para esta farmacia',
+  'pharmacy.notifyWhenArrives': 'Notificarme cuando llegue a esta farmacia',
+  'pharmacy.notificationsActivatedPharmacy': 'Notificaciones activadas para esta farmacia — clic para desactivar',
+  'pharmacy.notificationsRequired': 'Las notificaciones requieren iOS 16.4+ y este sitio instalado como app (Compartir → Añadir a Pantalla de Inicio).',
+
+  // ProductResults
+  'product.sinReceta': 'Sin Receta',
+  'product.parapharmacy': 'Parafarmacia',
+  'product.dermocosmetica': 'Dermocosmética',
+  'product.formulasLacteas': 'Fórmulas lácteas',
+  'product.vitamins': 'Vitaminas',
+  'product.analgesics': 'Analgésicos',
+  'product.noResults': 'No se encontraron productos',
+  'product.brand': 'Marca:',
+  'product.price': 'Precio:',
+  'product.activeIngredient': 'Principio Activo:',
+  'product.dosage': 'Dosis:',
+  'product.viewDetails': 'Ver detalles →',
+
+  // LoginModal
+  'login.login': 'Iniciar sesión',
+  'login.register': 'Crear cuenta',
+  'login.welcomeBack': 'Bienvenido de nuevo',
+  'login.createAccount': 'Crea tu cuenta',
+  'login.registerDescription': 'Guarda tu dirección y recibe notificaciones cuando lleguen medicamentos.',
+  'login.loginDescription': 'Inicia sesión para gestionar tu perfil y notificaciones.',
+  'login.username': 'Usuario',
+  'login.usernameHint': '3–32 caracteres: letras, dígitos o guión bajo.',
+  'login.password': 'Contraseña',
+  'login.passwordHint': 'Al menos 8 caracteres.',
+  'login.cancel': 'Cancelar',
+  'login.creating': 'Creando…',
+  'login.loggingIn': 'Iniciando sesión…',
+  'login.createAccountBtn': 'Crear cuenta',
+  'login.loginBtn': 'Iniciar sesión',
+  'login.passwordError': 'La contraseña debe tener al menos 8 caracteres',
+  'login.registerError': 'No se pudo crear la cuenta',
+  'login.loginError': 'Inicio de sesión fallido',
+  'login.networkError': 'Error de red — inténtalo de nuevo',
+
+  // AlertsView
+  'alerts.title': 'Mis Avisos',
+  'alerts.subtitle': 'Mantente al día con tus medicamentos.',
+  'alerts.loading': 'Cargando avisos...',
+  'alerts.loginRequired': 'Por favor, inicia sesión para ver tus avisos.',
+  'alerts.loadError': 'No se pudieron cargar los avisos.',
+  'alerts.availability': 'Disponibilidad',
+  'alerts.noSubscriptions': 'No tienes suscripciones de disponibilidad.',
+  'alerts.notifyWhenAvailable': 'Notificarme cuando esté disponible',
+  'alerts.deleteError': 'No se pudo eliminar la alerta de disponibilidad.',
+  'alerts.pharmacy': 'Farmacia',
+
+  // ScannerView
+  'scanner.title': 'Escanear TSI',
+  'scanner.description': 'Escanea el código de barras de tu tarjeta sanitaria para ver tus recetas activas',
+  'scanner.openCamera': 'Abrir cámara',
+  'scanner.orUploadPhoto': 'O sube una foto de tu TSI',
+  'scanner.takePhoto': 'Hacer foto',
+  'scanner.uploadFromGallery': 'Subir de galería',
+  'scanner.scanImage': 'Escanear imagen',
+  'scanner.discard': 'Descartar',
+  'scanner.enterCIP': 'O introduce el código CIP manualmente',
+  'scanner.cipPlaceholder': 'Código CIP de 16 dígitos',
+  'scanner.search': 'Buscar',
+  'scanner.scanning': 'Apunta al código de barras',
+  'scanner.openingCamera': 'Abriendo cámara…',
+  'scanner.processingImage': 'Procesando imagen…',
+  'scanner.tsiScanned': 'TSI Escaneada',
+  'scanner.activePrescriptions': 'Recetas Activas',
+  'scanner.tapToFind': 'Toca un medicamento para ver disponibilidad en farmacias cercanas.',
+  'scanner.loadingPrescriptions': 'Cargando recetas…',
+  'scanner.noPrescriptions': 'No se encontraron recetas activas para esta tarjeta.',
+  'scanner.scanAnother': 'Escanear otra tarjeta',
+  'scanner.tryAgain': 'Intentar de nuevo',
+  'scanner.scannerUnavailable': 'El escáner no está disponible en este dispositivo.',
+  'scanner.cameraPermissionDenied': 'Permiso de cámara denegado. Actívalo en ajustes o introduce el código CIP manualmente.',
+  'scanner.invalidBarcode': 'Código de barras inválido. Intenta de nuevo o introduce el CIP manualmente.',
+  'scanner.cameraNotAvailable': 'Cámara no disponible en este navegador.',
+  'scanner.invalidCIP': 'Formato CIP inválido. Debe tener 16 caracteres alfanuméricos.',
+  'scanner.enterCIPError': 'Introduce un código CIP.',
+  'scanner.cameraPermissionWeb': 'Permiso de cámara denegado. Permite el acceso e intenta de nuevo.',
+  'scanner.noCamera': 'No se detectó ninguna cámara. Introduce el código CIP manualmente.',
+  'scanner.imageReadError': 'No se pudo leer la imagen. Intenta con otra foto.',
+  'scanner.invalidCIPDetected': 'CIP detectado no tiene formato válido. Introduce el código manualmente.',
+  'scanner.scanError': 'Error al escanear:',
+  'scanner.unknownError': 'Error desconocido',
+  'scanner.cameraError': 'Error de cámara:',
+  'scanner.imageProcessError': 'Error al procesar la imagen:',
+
+  // ProfileView
+  'profile.name': 'Nombre',
+  'profile.lastName': 'Apellidos',
+  'profile.config': 'Configuración',
+  'profile.myAddresses': 'Mis Direcciones',
+  'profile.theme': 'Tema',
+  'profile.themeAuto': 'Automático',
+  'profile.themeLight': 'Claro',
+  'profile.themeDark': 'Oscuro',
+  'profile.admin': 'Panel de Administración',
+  'profile.logout': 'Cerrar Sesión',
+  'profile.uploadingPhoto': 'Subiendo foto...',
+  'profile.recentSearches': 'Tus búsquedas recientes:',
+  'profile.delete': 'Eliminar',
+  'profile.changeAvatar': 'Cambiar Avatar',
+  'profile.presetAvatar': 'Prediseñado',
+  'profile.colors': 'Colores',
+  'profile.upload': 'Subir',
+  'profile.chooseFromGallery': 'Elegir de galería',
+  'profile.selectExistingImage': 'Selecciona una imagen existente',
+  'profile.imageTooBig': 'La imagen no puede superar los 5 MB',
+  'profile.imageSaveError': 'Error al guardar la imagen. Intenta con otra foto.',
+  'profile.imageConnectionError': 'Error de conexión al guardar la imagen.',
+  'profile.imageProcessError': 'Error al procesar la imagen.',
+  'profile.configTitle': 'Configuración',
+  'profile.firstName': 'Nombre',
+  'profile.firstNamePlaceholder': 'Tu nombre',
+  'profile.lastNamePlaceholder': 'Tus apellidos',
+  'profile.email': 'Correo electrónico',
+  'profile.emailPlaceholder': 'tu@email.com',
+  'profile.city': 'Ciudad',
+  'profile.cityPlaceholder': 'Tu ciudad',
+  'profile.address': 'Dirección',
+  'profile.addressPlaceholder': 'Calle Mayor 1, Madrid',
+  'profile.cancel': 'Cancelar',
+  'profile.saving': 'Guardando...',
+  'profile.save': 'Guardar',
+  'profile.profileSaved': 'Perfil guardado.',
+  'profile.saveError': 'Error al guardar',
+  'profile.addressesTitle': 'Mis Direcciones',
+  'profile.addressLabel': 'Dirección',
+  'profile.addressOptional': 'Etiqueta (opcional)',
+  'profile.addressLabelPlaceholder': 'Ej: Casa, Trabajo, Segunda residencia',
+  'profile.defaultAddress': 'Dirección predeterminada',
+  'profile.add': 'Añadir',
+  'profile.update': 'Actualizar',
+  'profile.loadingAddresses': 'Cargando direcciones...',
+  'profile.mainAddress': 'Dirección principal',
+  'profile.default': 'Predeterminada',
+  'profile.setDefault': 'Establecer como predeterminada',
+  'profile.addMore': 'Añadir más',
+  'profile.addressRequired': 'La dirección es obligatoria',
+  'profile.addressSaveError': 'Error al guardar la dirección',
+  'profile.themeTitle': 'Tema de visualización',
+  'profile.themeDescription': 'Elige cómo se ve la aplicación. En modo automático, se adapta al tema de tu dispositivo.',
+  'profile.themeAutoDesc': 'Seguir sistema',
+  'profile.themeLightDesc': 'Siempre claro',
+  'profile.themeDarkDesc': 'Siempre oscuro',
+  'profile.language': 'Idioma',
+  'profile.languageTitle': 'Idioma de la aplicación',
+  'profile.languageCatalan': 'Català',
+  'profile.languageSpanish': 'Castellano',
+
+  // SavedNotifications
+  'savedNotifications.title': '🔔 Notificaciones Guardadas',
+  'savedNotifications.close': 'Cerrar',
+  'savedNotifications.loading': 'Cargando…',
+  'savedNotifications.empty': 'Aún no hay notificaciones guardadas. Toca la campana 🔕 en una farmacia sin stock para recibir notificaciones cuando se reponga.',
+  'savedNotifications.anyPharmacy': 'Cualquier farmacia',
+  'savedNotifications.delete': 'Eliminar notificación',
+  'savedNotifications.loadError': 'No se pudieron cargar las notificaciones guardadas',
+  'savedNotifications.deleteError': 'No se pudo eliminar la notificación',
+
+  // ErrorBoundary
+  'error.title': 'Algo salió mal',
+  'error.description': 'Ha ocurrido un error inesperado. Por favor, recarga la página.',
+  'error.reload': 'Recargar',
+
+  // AdminView
+  'admin.title': '⚙️ Panel de Administración',
+  'admin.authRequired': 'Autenticación requerida',
+  'admin.managePharmacies': 'Gestiona farmacias y medicamentos',
+  'admin.logout': 'Cerrar sesión',
+  'admin.checkingAuth': 'Comprobando autenticación...',
+  'admin.pharmacies': '🏥 Farmacias',
+  'admin.medicines': '💊 Medicamentos',
+  'admin.linkMedicine': '🔗 Vincular Medicamento a Farmacia',
+  'admin.linkProduct': '🍎 Vincular Producto a Farmacia',
+
+  // LoginForm
+  'admin.login.title': '🔐 Acceso Administración',
+  'admin.login.description': 'Introduce tus credenciales para acceder al panel de administración',
+  'admin.login.username': 'Usuario',
+  'admin.login.usernamePlaceholder': 'Introduce usuario',
+  'admin.login.password': 'Contraseña',
+  'admin.login.passwordPlaceholder': 'Introduce contraseña',
+  'admin.login.loggingIn': 'Iniciando sesión...',
+  'admin.login.loginBtn': 'Iniciar sesión',
+  'admin.login.defaultCredentials': 'Credenciales por defecto:',
+  'admin.login.changePasswordWarning': '⚠️ ¡Cambia la contraseña por defecto tras el primer inicio de sesión!',
+  'admin.login.failed': 'Inicio de sesión fallido',
+  'admin.login.invalidCredentials': 'Usuario o contraseña inválidos',
+
+  // PharmacyManagement
+  'admin.pharmacy.title': 'Gestionar Farmacias',
+  'admin.pharmacy.addNew': '+ Añadir Nueva Farmacia',
+  'admin.pharmacy.edit': 'Editar Farmacia',
+  'admin.pharmacy.add': 'Añadir Nueva Farmacia',
+  'admin.pharmacy.name': 'Nombre *',
+  'admin.pharmacy.address': 'Dirección *',
+  'admin.pharmacy.phone': 'Teléfono',
+  'admin.pharmacy.latitude': 'Latitud',
+  'admin.pharmacy.longitude': 'Longitud',
+  'admin.pharmacy.radius': 'Radio',
+  'admin.pharmacy.openingHours': 'Horario de apertura',
+  'admin.pharmacy.closed': 'Cerrado',
+  'admin.pharmacy.opensAt': 'abre a las',
+  'admin.pharmacy.closesAt': 'cierra a las',
+  'admin.pharmacy.saving': 'Guardando...',
+  'admin.pharmacy.update': 'Actualizar',
+  'admin.pharmacy.create': 'Añadir',
+  'admin.pharmacy.cancel': 'Cancelar',
+  'admin.pharmacy.loading': 'Cargando farmacias...',
+  'admin.pharmacy.showing': 'Mostrando',
+  'admin.pharmacy.of': 'de',
+  'admin.pharmacy.withinRadio': '(dentro del radio)',
+  'admin.pharmacy.empty': 'Aún no hay farmacias. Importa desde webhook o añade una manualmente.',
+  'admin.pharmacy.noResults': 'No hay farmacias en este radio con coordenadas. Amplía el radio, busca otra ciudad o desactiva el filtro de región.',
+  'admin.pharmacy.editBtn': 'Editar',
+  'admin.pharmacy.deleteBtn': 'Eliminar',
+  'admin.pharmacy.deleteConfirm': '¿Estás seguro de que quieres eliminar esta farmacia?',
+  'admin.pharmacy.updated': '¡Farmacia actualizada!',
+  'admin.pharmacy.created': '¡Farmacia añadida!',
+  'admin.pharmacy.deleted': '¡Farmacia eliminada!',
+  'admin.pharmacy.loadError': 'Error al cargar farmacias',
+  'admin.pharmacy.saveError': 'Error al guardar farmacia',
+  'admin.pharmacy.updateError': 'Error al actualizar farmacia',
+  'admin.pharmacy.createError': 'Error al crear farmacia',
+  'admin.pharmacy.deleteError': 'Error al eliminar farmacia',
+  'admin.pharmacy.citySearch': 'Ciudad, región e importación',
+  'admin.pharmacy.searchCity': 'Buscar ciudad',
+  'admin.pharmacy.chooseOne': 'Elije una',
+  'admin.pharmacy.openDataUrl': 'URL de datos abiertos',
+  'admin.pharmacy.cityPlaceholder': 'Ej: Rubí, Madrid, Valencia…',
+  'admin.pharmacy.searching': 'Buscando…',
+  'admin.pharmacy.areaPreset': 'Preset de área',
+  'admin.pharmacy.customCoordinates': 'Coordenadas personalizadas',
+  'admin.pharmacy.areaExample': 'Ejemplo: Área de Rubí (1.5 km)',
+  'admin.pharmacy.enterCity': 'Introduce una ciudad o lugar.',
+  'admin.pharmacy.setCoordinates': 'Establece latitud, longitud y radio (usa Buscar ciudad o un preset).',
+  'admin.pharmacy.dataSource': 'Fuente de datos',
+  'admin.pharmacy.webhookLegacy': 'n8n webhook (heredado)',
+  'admin.pharmacy.openDataJson': 'URL de datos abiertos JSON',
+  'admin.pharmacy.jsonUrl': 'URL JSON',
+  'admin.pharmacy.importing': 'Importando…',
+  'admin.pharmacy.importWebhook': 'Importar desde webhook',
+  'admin.pharmacy.importUrl': 'Importar desde URL',
+  'admin.pharmacy.importFrom': 'Importar desde',
+  'admin.pharmacy.showWithinRadio': 'Mostrar solo farmacias dentro del radio',
+  'admin.pharmacy.sessionExpired': 'Sesión expirada o no has iniciado sesión. Inicia sesión de nuevo en el panel Admin y reintenta.',
+  'admin.pharmacy.apiNotFound': 'La app no pudo conectar con la API (404). Usa http://localhost:3000 con frontend y backend activos.',
+  'admin.pharmacy.geocodingNotFound': 'Servicio de geocodificación no encontrado. Actualiza el backend y reinícialo.',
+  'admin.pharmacy.searchFailed': 'Búsqueda fallida (HTTP',
+  'admin.pharmacy.dayClosed': 'Marca un día como Cerrado si la farmacia no abre ese día.',
+  'admin.pharmacy.saveError': 'Error al guardar farmacia',
+  'admin.pharmacy.radius': 'Radio (m)',
+
+  // MedicineManagement
+  'admin.medicine.title': 'Buscar Medicamentos (API CIMA)',
+  'admin.medicine.description': 'Los medicamentos ahora se obtienen directamente de la',
+  'admin.medicine.cimaApi': 'API de CIMA',
+  'admin.medicine.cimaDescription': '(Agencia Española de Medicamentos y Productos Sanitarios).',
+  'admin.medicine.linkDescription': 'Busca medicamentos para vincularlos a farmacias en la pestaña "Link Medicine".',
+  'admin.medicine.search': 'Buscar medicamentos',
+  'admin.medicine.searchPlaceholder': 'Escribe el nombre de un medicamento...',
+  'admin.medicine.searching': 'Buscando en API CIMA...',
+  'admin.medicine.found': 'Se encontraron',
+  'admin.medicine.medications': 'medicamentos',
+  'admin.medicine.activeIngredient': 'Principio Activo:',
+  'admin.medicine.dosage': 'Dosis:',
+  'admin.medicine.form': 'Forma:',
+  'admin.medicine.laboratory': 'Laboratorio:',
+  'admin.medicine.registrationNumber': 'Nº Registro:',
+  'admin.medicine.generic': 'Genérico',
+  'admin.medicine.brand': 'Marca',
+  'admin.medicine.noResults': 'No se encontraron medicamentos con ese nombre.',
+  'admin.medicine.loadError': 'Error al buscar medicamentos en la API CIMA',
+
+  // PharmacyMedicineLink
+  'admin.linkMedicine.title': 'Vincular Medicamento a Farmacia',
+  'admin.linkMedicine.pharmacy': 'Farmacia *',
+  'admin.linkMedicine.searchPharmacy': 'Buscar entre',
+  'admin.linkMedicine.pharmacies': 'farmacias por nombre o dirección…',
+  'admin.linkMedicine.loadingPharmacies': 'Cargando farmacias…',
+  'admin.linkMedicine.noPharmacies': 'No hay farmacias que coincidan con',
+  'admin.linkMedicine.changePharmacy': 'Cambiar farmacia',
+  'admin.linkMedicine.medicine': 'Buscar Medicamento (API CIMA) *',
+  'admin.linkMedicine.searchMedicine': 'Escribe para buscar medicamentos en CIMA...',
+  'admin.linkMedicine.searching': 'Buscando...',
+  'admin.linkMedicine.activeIngredient': 'Principio activo:',
+  'admin.linkMedicine.dosage': 'Dosis:',
+  'admin.linkMedicine.registrationNumber': 'Nº Registro:',
+  'admin.linkMedicine.changeMedicine': 'Cambiar medicamento',
+  'admin.linkMedicine.price': 'Precio (€)',
+  'admin.linkMedicine.stock': 'Stock',
+  'admin.linkMedicine.linkBtn': 'Vincular Medicamento',
+  'admin.linkMedicine.reset': 'Reiniciar',
+  'admin.linkMedicine.medicationsIn': 'Medicamentos en',
+  'admin.linkMedicine.loading': 'Cargando...',
+  'admin.linkMedicine.empty': 'Aún no hay medicamentos vinculados a esta farmacia.',
+  'admin.linkMedicine.priceLabel': 'Precio:',
+  'admin.linkMedicine.undefined': 'No definido',
+  'admin.linkMedicine.newPrice': 'Introduce nuevo precio:',
+  'admin.linkMedicine.newStock': 'Introduce nuevo stock:',
+  'admin.linkMedicine.update': 'Actualizar',
+  'admin.linkMedicine.delete': 'Eliminar',
+  'admin.linkMedicine.selectMedicineFirst': 'Por favor, selecciona un medicamento primero',
+  'admin.linkMedicine.linkSuccess': '¡Medicamento vinculado a la farmacia correctamente!',
+  'admin.linkMedicine.linkError': 'Error al vincular medicamento a farmacia',
+  'admin.linkMedicine.updateSuccess': '¡Actualizado correctamente!',
+  'admin.linkMedicine.updateError': 'Error al actualizar',
+  'admin.linkMedicine.deleteConfirm': '¿Eliminar este medicamento de la farmacia?',
+  'admin.linkMedicine.deleteSuccess': '¡Medicamento eliminado de la farmacia!',
+  'admin.linkMedicine.deleteError': 'Error al eliminar medicamento',
+
+  // PharmacyProductLink
+  'admin.linkProduct.title': 'Vincular Producto a Farmacia',
+  'admin.linkProduct.pharmacy': 'Farmacia *',
+  'admin.linkProduct.searchPharmacy': 'Buscar entre',
+  'admin.linkProduct.pharmacies': 'farmacias por nombre o dirección…',
+  'admin.linkProduct.loadingPharmacies': 'Cargando farmacias…',
+  'admin.linkProduct.noPharmacies': 'No hay farmacias que coincidan con',
+  'admin.linkProduct.changePharmacy': 'Cambiar farmacia',
+  'admin.linkProduct.product': 'Buscar Producto (CIMA / Parafarmacia) *',
+  'admin.linkProduct.searchProduct': 'Escribe para buscar medicamentos o productos de parafarmacia...',
+  'admin.linkProduct.searching': 'Buscando...',
+  'admin.linkProduct.brand': 'Marca:',
+  'admin.linkProduct.price': 'Precio:',
+  'admin.linkProduct.changeProduct': 'Cambiar producto',
+  'admin.linkProduct.priceInput': 'Precio (€)',
+  'admin.linkProduct.stock': 'Stock',
+  'admin.linkProduct.linkBtn': 'Vincular Producto',
+  'admin.linkProduct.reset': 'Reiniciar',
+  'admin.linkProduct.productsIn': 'Productos en',
+  'admin.linkProduct.loading': 'Cargando...',
+  'admin.linkProduct.empty': 'Aún no hay productos vinculados a esta farmacia.',
+  'admin.linkProduct.priceLabel': 'Precio:',
+  'admin.linkProduct.undefined': 'No definido',
+  'admin.linkProduct.newPrice': 'Introduce nuevo precio:',
+  'admin.linkProduct.newStock': 'Introduce nuevo stock:',
+  'admin.linkProduct.update': 'Actualizar',
+  'admin.linkProduct.delete': 'Eliminar',
+  'admin.linkProduct.selectProductFirst': 'Por favor, selecciona un producto primero',
+  'admin.linkProduct.linkSuccess': '¡Producto vinculado a la farmacia correctamente!',
+  'admin.linkProduct.linkError': 'Error al vincular producto a farmacia',
+  'admin.linkProduct.updateSuccess': '¡Actualizado correctamente!',
+  'admin.linkProduct.updateError': 'Error al actualizar',
+  'admin.linkProduct.deleteConfirm': '¿Eliminar este producto de la farmacia?',
+  'admin.linkProduct.deleteSuccess': '¡Producto eliminado de la farmacia!',
+  'admin.linkProduct.deleteError': 'Error al eliminar producto',
+};
+
+export default es;

apps/frontend/src/i18n/useTranslation.js

@@ -0,0 +1,8 @@
+import { useContext } from 'react';
+import { LanguageContext } from './LanguageContext';
+
+export function useTranslation() {
+  const ctx = useContext(LanguageContext);
+  if (!ctx) throw new Error('useTranslation must be used within LanguageProvider');
+  return ctx;
+}

apps/frontend/src/main.jsx

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
 import ErrorBoundary from './components/ErrorBoundary';
+import { LanguageProvider } from './i18n';
 import './index.css';
 import { initNativeShell } from './utils/native';
 import { initFaro } from './utils/faro';
@@ -20,9 +21,11 @@ window.addEventListener('unhandledrejection', (event) => {
 
 ReactDOM.createRoot(document.getElementById('root')).render(
   <React.StrictMode>
+    <LanguageProvider>
       <ErrorBoundary>
         <App />
       </ErrorBoundary>
+    </LanguageProvider>
   </React.StrictMode>
 );
 

apps/frontend/src/views/AdminView.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from '../i18n';
 import '../App.css';
 import './AdminView.css';
 import LoginForm from '../components/admin/LoginForm';
@@ -8,6 +9,7 @@ import PharmacyMedicineLink from '../components/admin/PharmacyMedicineLink';
 import PharmacyProductLink from '../components/admin/PharmacyProductLink';
 
 function AdminView() {
+  const { t } = useTranslation();
   const [authenticated, setAuthenticated] = useState(false);
   const [user, setUser] = useState(null);
   const [loading, setLoading] = useState(true);
@@ -60,7 +62,7 @@ function AdminView() {
   if (loading) {
     return (
       <div className="app-main">
-        <div className="loading">Comprobando autenticación...</div>
+        <div className="loading">{t('admin.checkingAuth')}</div>
       </div>
     );
   }
@@ -69,8 +71,8 @@ function AdminView() {
     return (
       <>
         <header className="app-header">
-          <h1>⚙️ Panel de Administración</h1>
+          <h1>{t('admin.title')}</h1>
-          <p>Autenticación requerida</p>
+          <p>{t('admin.authRequired')}</p>
         </header>
         <main className="app-main">
           <LoginForm onLogin={handleLogin} />
@@ -84,13 +86,13 @@ function AdminView() {
       <header className="app-header">
         <div className="admin-header-content">
           <div>
-            <h1>⚙️ Panel de Administración</h1>
+            <h1>{t('admin.title')}</h1>
-            <p>Gestiona farmacias y medicamentos</p>
+            <p>{t('admin.managePharmacies')}</p>
           </div>
           <div className="admin-user-info">
             <span>👤 {user?.username}</span>
             <button className="logout-button" onClick={handleLogout}>
-              Cerrar sesión
+              {t('admin.logout')}
             </button>
           </div>
         </div>
@@ -102,25 +104,25 @@ function AdminView() {
             className={`admin-tab ${activeTab === 'pharmacies' ? 'active' : ''}`}
             onClick={() => setActiveTab('pharmacies')}
           >
-            🏥 Farmacias
+            {t('admin.pharmacies')}
           </button>
           <button 
             className={`admin-tab ${activeTab === 'medicines' ? 'active' : ''}`}
             onClick={() => setActiveTab('medicines')}
           >
-            💊 Medicamentos
+            {t('admin.medicines')}
           </button>
           <button 
             className={`admin-tab ${activeTab === 'link' ? 'active' : ''}`}
             onClick={() => setActiveTab('link')}
           >
-            🔗 Vincular Medicamento a Farmacia
+            {t('admin.linkMedicine')}
           </button>
           <button 
             className={`admin-tab ${activeTab === 'link-product' ? 'active' : ''}`}
             onClick={() => setActiveTab('link-product')}
           >
-            🍎 Vincular Producto a Farmacia
+            {t('admin.linkProduct')}
           </button>
         </div>
 

apps/frontend/src/views/AlertsView.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from '../i18n';
 import './AlertsView.css';
 
 const iconMap = {
@@ -15,6 +16,7 @@ const iconMap = {
 };
 
 function AlertsView({ onNotificationChange, onNavigateToMedicine }) {
+  const { t } = useTranslation();
   const [availability, setAvailability] = useState([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -26,7 +28,7 @@ function AlertsView({ onNotificationChange, onNavigateToMedicine }) {
 
       const notifsRes = await fetch('/api/notifications/mine', { credentials: 'include' });
       if (notifsRes.status === 401) {
-        setError('Por favor, inicia sesión para ver tus avisos.');
+        setError(t('alerts.loginRequired'));
         setLoading(false);
         return;
       }
@@ -43,7 +45,7 @@ function AlertsView({ onNotificationChange, onNavigateToMedicine }) {
       setAvailability(mergedAvailability);
     } catch (err) {
       console.error('Error fetching availability notifications:', err);
-      setError('No se pudieron cargar los avisos.');
+      setError(t('alerts.loadError'));
     } finally {
       setLoading(false);
     }
@@ -87,7 +89,7 @@ function AlertsView({ onNotificationChange, onNavigateToMedicine }) {
       }
     } catch (err) {
       console.error(err);
-      setError('No se pudo eliminar la alerta de disponibilidad.');
+      setError(t('alerts.deleteError'));
     }
   };
 
@@ -95,21 +97,21 @@ function AlertsView({ onNotificationChange, onNavigateToMedicine }) {
     <div className="alerts-view">
       <main className="alerts-main">
         <div className="alerts-header">
-          <h2 className="alerts-title">Mis Avisos</h2>
+          <h2 className="alerts-title">{t('alerts.title')}</h2>
-          <p className="alerts-subtitle">Mantente al día con tus medicamentos.</p>
+          <p className="alerts-subtitle">{t('alerts.subtitle')}</p>
         </div>
 
-        {loading && <p className="alerts-status" style={{ textAlign: 'center', padding: '2rem' }}>Cargando avisos...</p>}
+        {loading && <p className="alerts-status" style={{ textAlign: 'center', padding: '2rem' }}>{t('alerts.loading')}</p>}
         {!loading && error && <p className="alerts-error" style={{ color: 'var(--error)', textAlign: 'center', padding: '2rem' }}>{error}</p>}
 
         {!loading && !error && (
           <>
             {/* Availability Section */}
             <section className="alerts-section">
-              <h3 className="alerts-section-title" style={{ marginBottom: '1rem' }}>Disponibilidad</h3>
+              <h3 className="alerts-section-title" style={{ marginBottom: '1rem' }}>{t('alerts.availability')}</h3>
               <div className="alerts-list">
                 {availability.length === 0 ? (
-                  <p className="alerts-empty" style={{ color: 'var(--on-surface-variant)', fontStyle: 'italic' }}>No tienes suscripciones de disponibilidad.</p>
+                  <p className="alerts-empty" style={{ color: 'var(--on-surface-variant)', fontStyle: 'italic' }}>{t('alerts.noSubscriptions')}</p>
                 ) : (
                   availability.map((alert) => {
                     const cardColor = alert.scope === 'pharmacy' ? 'primary' : 'tertiary';
@@ -132,7 +134,7 @@ function AlertsView({ onNotificationChange, onNavigateToMedicine }) {
                             {alert.scope === 'pharmacy' ? (
                               <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', marginTop: '0.25rem' }}>
                                 <span className={`alert-badge alert-badge--${cardColor}`} style={{ width: 'fit-content' }}>
-                                  🏥 {alert.pharmacy_name || `Farmacia #${alert.pharmacy_id}`}
+                                  🏥 {alert.pharmacy_name || `${t('alerts.pharmacy')} #${alert.pharmacy_id}`}
                                 </span>
                                 {alert.pharmacy_address && (
                                   <p className="alert-address-text" style={{ fontSize: '0.9rem', color: 'var(--on-surface-variant)', margin: 0 }}>
@@ -142,7 +144,7 @@ function AlertsView({ onNotificationChange, onNavigateToMedicine }) {
                               </div>
                             ) : (
                               <span className={`alert-badge alert-badge--${cardColor}`} style={{ width: 'fit-content', marginTop: '0.25rem' }}>
-                                🔔 Notificarme cuando esté disponible
+                                🔔 {t('alerts.notifyWhenAvailable')}
                               </span>
                             )}
                           </div>

apps/frontend/src/views/HomeView.jsx

@@ -1,7 +1,9 @@
 import React from 'react';
+import { useTranslation } from '../i18n';
 import './HomeView.css';
 
 function HomeView({ onScanClick, onSearchClick }) {
+  const { t } = useTranslation();
   return (
     <div className="home-view">
       <div className="home-hero">
@@ -9,7 +11,7 @@ function HomeView({ onScanClick, onSearchClick }) {
           <img src="/farmaclic_logo_home.png" alt="FarmaClic" className="home-logo" />
           <img src="/farmaclic_text.png" alt="FarmaClic" className="home-brand-name" />
         </div>
-        <p className="home-desc">Encuentra tus medicamentos en farmacias cercanas</p>
+        <p className="home-desc">{t('home.description')}</p>
       </div>
 
       <div className="home-cards">
@@ -21,7 +23,7 @@ function HomeView({ onScanClick, onSearchClick }) {
             </svg>
           </div>
           <div className="home-card-text">
-            <span className="home-card-label">Buscar Medicamento</span>
+            <span className="home-card-label">{t('home.searchMedicine')}</span>
             <span className="home-card-arrow">
               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                 <polyline points="9 18 15 12 9 6" />
@@ -41,7 +43,7 @@ function HomeView({ onScanClick, onSearchClick }) {
             </svg>
           </div>
           <div className="home-card-text">
-            <span className="home-card-label">Escanear TSI</span>
+            <span className="home-card-label">{t('home.scanTSI')}</span>
             <span className="home-card-arrow">
               <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                 <polyline points="9 18 15 12 9 6" />

apps/frontend/src/views/ProfileView.jsx

@@ -1,4 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
+import { useTranslation } from '../i18n';
 import './ProfileView.css';
 
 const AVATARS = [
@@ -35,6 +36,7 @@ function resolveAvatarUrl(url) {
 }
 
 function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, theme, onThemeChange }) {
+  const { t, lang, setLang } = useTranslation();
   const [firstName, setFirstName] = useState(currentUser?.first_name || '');
   const [lastName, setLastName] = useState(currentUser?.last_name || '');
   const [avatarUrl, setAvatarUrl] = useState(resolveAvatarUrl(currentUser?.avatar_url));
@@ -60,6 +62,9 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
   // Theme modal state
   const [showTheme, setShowTheme] = useState(false);
 
+  // Language modal state
+  const [showLanguage, setShowLanguage] = useState(false);
+
   // Addresses modal state
   const [showAddresses, setShowAddresses] = useState(false);
   const [addresses, setAddresses] = useState([]);
@@ -143,7 +148,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
     e?.preventDefault();
     const addr = formAddress.trim();
     if (!addr) {
-      setFormError('La dirección es obligatoria');
+      setFormError(t('profile.addressRequired'));
       return;
     }
     setFormSaving(true);
@@ -163,7 +168,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
       });
       if (!res.ok) {
         const err = await res.json().catch(() => ({}));
-        throw new Error(err.error || 'Error al guardar la dirección');
+        throw new Error(err.error || t('profile.addressSaveError'));
       }
       setShowAddressForm(false);
       setEditingAddressId(null);
@@ -222,16 +227,16 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
       });
       if (!res.ok) {
         const err = await res.json().catch(() => ({}));
-        throw new Error(err.error || `Error al guardar (HTTP ${res.status})`);
+        throw new Error(err.error || t('profile.saveError'));
       }
       const updated = await res.json();
       onProfileSaved?.(updated);
       setFirstName(updated.first_name || '');
       setLastName(updated.last_name || '');
-      setConfigFeedback({ type: 'ok', text: 'Perfil guardado.' });
+      setConfigFeedback({ type: 'ok', text: t('profile.profileSaved') });
       setTimeout(() => setShowConfig(false), 1200);
     } catch (err) {
-      setConfigFeedback({ type: 'err', text: err.message || 'Error al guardar' });
+      setConfigFeedback({ type: 'err', text: err.message || t('profile.saveError') });
     } finally {
       setConfigSaving(false);
     }
@@ -246,7 +251,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
     setUploading(true);
 
     if (file.size > 5 * 1024 * 1024) {
-      setUploadError('La imagen no puede superar los 5 MB');
+      setUploadError(t('profile.imageTooBig'));
       setUploading(false);
       return;
     }
@@ -268,17 +273,17 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
             onProfileSaved?.(updated);
           } else {
             setAvatarUrl(resolveAvatarUrl(currentUser?.avatar_url));
-            setUploadError('Error al guardar la imagen. Intenta con otra foto.');
+            setUploadError(t('profile.imageSaveError'));
           }
         } catch (err) {
           setAvatarUrl(resolveAvatarUrl(currentUser?.avatar_url));
-          setUploadError('Error de conexión al guardar la imagen.');
+          setUploadError(t('profile.imageConnectionError'));
         }
         setUploading(false);
       };
       reader.readAsDataURL(file);
     } catch (err) {
-      setUploadError('Error al procesar la imagen.');
+      setUploadError(t('profile.imageProcessError'));
       setUploading(false);
     }
   }
@@ -371,18 +376,18 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
           onChange={handleAvatarUpload}
           style={{ display: 'none' }}
         />
-        {uploading && <p className="profile-section-sub">Subiendo foto...</p>}
+        {uploading && <p className="profile-section-sub">{t('profile.uploadingPhoto')}</p>}
         {uploadError && <p className="profile-feedback profile-feedback--err">{uploadError}</p>}
       </div>
 
       {/* Read-only Name Section */}
       <div className="profile-info-cards">
         <div className="profile-info-card">
-          <p className="info-card-label">Nombre</p>
+          <p className="info-card-label">{t('profile.name')}</p>
           <p className="info-card-value">{firstName || '—'}</p>
         </div>
         <div className="profile-info-card">
-          <p className="info-card-label">Apellidos</p>
+          <p className="info-card-label">{t('profile.lastName')}</p>
           <p className="info-card-value">{lastName || '—'}</p>
         </div>
       </div>
@@ -395,7 +400,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
               <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" />
             </svg>
           </div>
-          <span className="menu-item-label">Configuración</span>
+          <span className="menu-item-label">{t('profile.config')}</span>
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="menu-item-chevron">
             <polyline points="9 18 15 12 9 6" />
           </svg>
@@ -407,7 +412,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
               <path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z" />
             </svg>
           </div>
-          <span className="menu-item-label">Mis Direcciones</span>
+          <span className="menu-item-label">{t('profile.myAddresses')}</span>
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="menu-item-chevron">
             <polyline points="9 18 15 12 9 6" />
           </svg>
@@ -419,9 +424,24 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
               <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z" />
             </svg>
           </div>
-          <span className="menu-item-label">Tema</span>
+          <span className="menu-item-label">{t('profile.theme')}</span>
           <span className="menu-item-theme-label">
-            {theme === 'auto' ? 'Automático' : theme === 'light' ? 'Claro' : 'Oscuro'}
+            {theme === 'auto' ? t('profile.themeAuto') : theme === 'light' ? t('profile.themeLight') : t('profile.themeDark')}
+          </span>
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="menu-item-chevron">
+            <polyline points="9 18 15 12 9 6" />
+          </svg>
+        </button>
+
+        <button className="profile-menu-item" onClick={() => setShowLanguage(true)}>
+          <div className="menu-item-icon menu-item-icon--tertiary">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+              <path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z" />
+            </svg>
+          </div>
+          <span className="menu-item-label">{t('profile.language')}</span>
+          <span className="menu-item-theme-label">
+            {lang === 'es' ? t('profile.languageSpanish') : t('profile.languageCatalan')}
           </span>
           <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="menu-item-chevron">
             <polyline points="9 18 15 12 9 6" />
@@ -430,14 +450,14 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
 
         {searchHistory.length > 0 && (
           <div className="profile-search-history">
-            <p className="profile-section-sub">Tus búsquedas recientes:</p>
+            <p className="profile-section-sub">{t('profile.recentSearches')}</p>
             {searchHistory.map((item) => (
               <div key={item.id} className="profile-search-item">
                 <span className="profile-search-address">{item.address}</span>
                 <button
                   className="profile-search-delete"
                   onClick={() => handleDeleteSearch(item.id)}
-                  title="Eliminar"
+                  title={t('profile.delete')}
                 >
                   <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
                     <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
@@ -455,7 +475,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
                 <path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94l-.36-2.54c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.07.62-.07.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z" />
               </svg>
             </div>
-            <span className="menu-item-label">Panel de Administración</span>
+            <span className="menu-item-label">{t('profile.admin')}</span>
             <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className="menu-item-chevron">
               <polyline points="9 18 15 12 9 6" />
             </svg>
@@ -469,7 +489,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
             <path d="M17 7l-1.41 1.41L18.17 11H8v2h10.17l-2.58 2.58L17 17l5-5zM4 5h8V3H4c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h8v-2H4V5z" />
           </svg>
         </div>
-        <span>Cerrar Sesión</span>
+        <span>{t('profile.logout')}</span>
       </button>
 
       {/* Avatar Modal */}
@@ -477,7 +497,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
         <div className="profile-modal-backdrop" onClick={() => setShowAvatarModal(false)}>
           <div className="profile-modal profile-modal-avatar" onClick={(e) => e.stopPropagation()}>
             <div className="profile-modal-header">
-              <h3>Cambiar Avatar</h3>
+              <h3>{t('profile.changeAvatar')}</h3>
               <button className="profile-modal-close" onClick={() => setShowAvatarModal(false)}>×</button>
             </div>
             <div className="profile-avatar-tabs">
@@ -488,7 +508,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
                 <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                   <path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" />
                 </svg>
-                <span>Prediseñado</span>
+                <span>{t('profile.presetAvatar')}</span>
               </button>
               <button
                 className={`profile-avatar-tab ${avatarTab === 'colors' ? 'profile-avatar-tab--active' : ''}`}
@@ -497,7 +517,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
                 <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                   <path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-1.01 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z" />
                 </svg>
-                <span>Colores</span>
+                <span>{t('profile.colors')}</span>
               </button>
               <button
                 className={`profile-avatar-tab ${avatarTab === 'upload' ? 'profile-avatar-tab--active' : ''}`}
@@ -506,7 +526,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
                 <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                   <path d="M9 16h6v-6h4l-7-7-7 7h4zm-4 2h14v2H5z" />
                 </svg>
-                <span>Subir</span>
+                <span>{t('profile.upload')}</span>
               </button>
             </div>
             <div className="profile-modal-body">
@@ -545,8 +565,8 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
                       </svg>
                     </div>
                     <div>
-                      <p className="profile-avatar-upload-title">Elegir de galería</p>
+                      <p className="profile-avatar-upload-title">{t('profile.chooseFromGallery')}</p>
-                      <p className="profile-avatar-upload-sub">Selecciona una imagen existente</p>
+                      <p className="profile-avatar-upload-sub">{t('profile.selectExistingImage')}</p>
                     </div>
                   </button>
                 </div>
@@ -561,57 +581,57 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
         <div className="profile-modal-backdrop" onClick={() => setShowConfig(false)}>
           <div className="profile-modal" onClick={(e) => e.stopPropagation()}>
             <div className="profile-modal-header">
-              <h3>Configuración</h3>
+              <h3>{t('profile.configTitle')}</h3>
               <button className="profile-modal-close" onClick={() => setShowConfig(false)}>×</button>
             </div>
             <form onSubmit={handleConfigSave} className="profile-modal-body">
               <div className="profile-modal-field">
-                <label>Nombre</label>
+                <label>{t('profile.firstName')}</label>
                 <input
                   type="text"
                   value={configFirstName}
                   onChange={(e) => setConfigFirstName(e.target.value)}
-                  placeholder="Tu nombre"
+                  placeholder={t('profile.firstNamePlaceholder')}
                   disabled={configSaving}
                 />
               </div>
               <div className="profile-modal-field">
-                <label>Apellidos</label>
+                <label>{t('profile.lastName')}</label>
                 <input
                   type="text"
                   value={configLastName}
                   onChange={(e) => setConfigLastName(e.target.value)}
-                  placeholder="Tus apellidos"
+                  placeholder={t('profile.lastNamePlaceholder')}
                   disabled={configSaving}
                 />
               </div>
               <div className="profile-modal-field">
-                <label>Correo electrónico</label>
+                <label>{t('profile.email')}</label>
                 <input
                   type="email"
                   value={configEmail}
                   onChange={(e) => setConfigEmail(e.target.value)}
-                  placeholder="tu@email.com"
+                  placeholder={t('profile.emailPlaceholder')}
                   disabled={configSaving}
                 />
               </div>
               <div className="profile-modal-field">
-                <label>Ciudad</label>
+                <label>{t('profile.city')}</label>
                 <input
                   type="text"
                   value={configCity}
                   onChange={(e) => setConfigCity(e.target.value)}
-                  placeholder="Tu ciudad"
+                  placeholder={t('profile.cityPlaceholder')}
                   disabled={configSaving}
                 />
               </div>
               <div className="profile-modal-field">
-                <label>Dirección</label>
+                <label>{t('profile.address')}</label>
                 <input
                   type="text"
                   value={configAddress}
                   onChange={(e) => setConfigAddress(e.target.value)}
-                  placeholder="Calle Mayor 1, Madrid"
+                  placeholder={t('profile.addressPlaceholder')}
                   disabled={configSaving}
                 />
               </div>
@@ -622,10 +642,10 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
 
               <div className="profile-modal-actions">
                 <button type="button" className="profile-btn-cancel" onClick={() => setShowConfig(false)} disabled={configSaving}>
-                  Cancelar
+                  {t('profile.cancel')}
                 </button>
                 <button type="submit" className="profile-btn-primary" disabled={configSaving}>
-                  {configSaving ? 'Guardando...' : 'Guardar'}
+                  {configSaving ? t('profile.saving') : t('profile.save')}
                 </button>
               </div>
             </form>
@@ -638,29 +658,29 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
         <div className="profile-modal-backdrop" onClick={() => { setShowAddresses(false); setShowAddressForm(false); }}>
           <div className="profile-modal profile-modal-addresses" onClick={(e) => e.stopPropagation()}>
             <div className="profile-modal-header">
-              <h3>Mis Direcciones</h3>
+              <h3>{t('profile.addressesTitle')}</h3>
               <button className="profile-modal-close" onClick={() => { setShowAddresses(false); setShowAddressForm(false); }}>×</button>
             </div>
             <div className="profile-modal-body">
               {showAddressForm && (
                 <form onSubmit={handleAddressSave} className="profile-address-form">
                   <div className="profile-modal-field">
-                    <label>Dirección</label>
+                    <label>{t('profile.addressLabel')}</label>
                     <input
                       type="text"
                       value={formAddress}
                       onChange={(e) => setFormAddress(e.target.value)}
-                      placeholder="Calle Mayor 1, Madrid"
+                      placeholder={t('profile.addressPlaceholder')}
                       disabled={formSaving}
                     />
                   </div>
                   <div className="profile-modal-field">
-                    <label>Etiqueta (opcional)</label>
+                    <label>{t('profile.addressOptional')}</label>
                     <input
                       type="text"
                       value={formLabel}
                       onChange={(e) => setFormLabel(e.target.value)}
-                      placeholder="Ej: Casa, Trabajo, Segunda residencia"
+                      placeholder={t('profile.addressLabelPlaceholder')}
                       disabled={formSaving}
                     />
                   </div>
@@ -671,15 +691,15 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
                       onChange={(e) => setFormDefault(e.target.checked)}
                       disabled={formSaving}
                     />
-                    <span>Dirección predeterminada</span>
+                    <span>{t('profile.defaultAddress')}</span>
                   </label>
                   {formError && <p className="profile-feedback profile-feedback--err">{formError}</p>}
                   <div className="profile-modal-actions">
                     <button type="button" className="profile-btn-cancel" onClick={() => { setShowAddressForm(false); setFormError(''); }} disabled={formSaving}>
-                      Cancelar
+                      {t('profile.cancel')}
                     </button>
                     <button type="submit" className="profile-btn-primary" disabled={formSaving}>
-                      {formSaving ? 'Guardando...' : editingAddressId ? 'Actualizar' : 'Añadir'}
+                      {formSaving ? t('profile.saving') : editingAddressId ? t('profile.update') : t('profile.add')}
                     </button>
                   </div>
                 </form>
@@ -687,15 +707,15 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
               {!showAddressForm && (
                 <>
                   {addressesLoading ? (
-                    <p className="profile-section-sub">Cargando direcciones...</p>
+                    <p className="profile-section-sub">{t('profile.loadingAddresses')}</p>
                   ) : (
                     <div className="profile-address-list">
                       {currentUser?.address && (
                         <div className="profile-address-item profile-address-item--default">
                           <div className="profile-address-item-info">
-                            <span className="profile-address-label">Dirección principal</span>
+                            <span className="profile-address-label">{t('profile.mainAddress')}</span>
                             <span className="profile-address-text">{currentUser.address}</span>
-                            <span className="profile-address-badge">Predeterminada</span>
+                            <span className="profile-address-badge">{t('profile.default')}</span>
                           </div>
                         </div>
                       )}
@@ -705,16 +725,16 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
                             {addr.label && <span className="profile-address-label">{addr.label}</span>}
                             <span className="profile-address-text">{addr.address}</span>
                             <button className="profile-address-set-default" onClick={() => handleSetDefault(addr.id)}>
-                              Establecer como predeterminada
+                              {t('profile.setDefault')}
                             </button>
                           </div>
                           <div className="profile-address-item-actions">
-                            <button className="profile-address-btn-icon" onClick={() => openEditAddressForm(addr)} title="Editar">
+                            <button className="profile-address-btn-icon" onClick={() => openEditAddressForm(addr)} title={t('profile.edit')}>
                               <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                                 <path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" />
                               </svg>
                             </button>
-                            <button className="profile-address-btn-icon profile-address-btn-icon--delete" onClick={() => handleDeleteAddress(addr.id)} title="Eliminar">
+                            <button className="profile-address-btn-icon profile-address-btn-icon--delete" onClick={() => handleDeleteAddress(addr.id)} title={t('profile.delete')}>
                               <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
                                 <path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z" />
                               </svg>
@@ -728,7 +748,7 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
                     <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                       <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
                     </svg>
-                    <span>Añadir más</span>
+                    <span>{t('profile.addMore')}</span>
                   </button>
                 </>
               )}
@@ -742,16 +762,16 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
         <div className="profile-modal-backdrop" onClick={() => setShowTheme(false)}>
           <div className="profile-modal profile-modal-theme" onClick={(e) => e.stopPropagation()}>
             <div className="profile-modal-header">
-              <h3>Tema de visualización</h3>
+              <h3>{t('profile.themeTitle')}</h3>
               <button className="profile-modal-close" onClick={() => setShowTheme(false)}>×</button>
             </div>
             <div className="profile-modal-body">
-              <p className="profile-section-sub">Elige cómo se ve la aplicación. En modo automático, se adapta al tema de tu dispositivo.</p>
+              <p className="profile-section-sub">{t('profile.themeDescription')}</p>
               <div className="profile-theme-options">
                 {[
-                  { value: 'auto', label: 'Automático', desc: 'Seguir sistema', icon: 'M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z' },
+                  { value: 'auto', label: t('profile.themeAuto'), desc: t('profile.themeAutoDesc'), icon: 'M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z' },
-                  { value: 'light', label: 'Claro', desc: 'Siempre claro', icon: 'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.42 0-.39.39-.39 1.03 0 1.42l1.06 1.06c.39.39 1.03.39 1.42 0s.39-1.03 0-1.42L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.42 0-.39.39-.39 1.03 0 1.42l1.06 1.06c.39.39 1.03.39 1.42 0 .39-.39.39-1.03 0-1.42l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.42-.39-.39-1.03-.39-1.42 0l-1.06 1.06c-.39.39-.39 1.03 0 1.42s1.03.39 1.42 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.42-.39-.39-1.03-.39-1.42 0l-1.06 1.06c-.39.39-.39 1.03 0 1.42s1.03.39 1.42 0l1.06-1.06z' },
+                  { value: 'light', label: t('profile.themeLight'), desc: t('profile.themeLightDesc'), icon: 'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.42 0-.39.39-.39 1.03 0 1.42l1.06 1.06c.39.39 1.03.39 1.42 0s.39-1.03 0-1.42L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.42 0-.39.39-.39 1.03 0 1.42l1.06 1.06c.39.39 1.03.39 1.42 0 .39-.39.39-1.03 0-1.42l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.42-.39-.39-1.03-.39-1.42 0l-1.06 1.06c-.39.39-.39 1.03 0 1.42s1.03.39 1.42 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.42-.39-.39-1.03-.39-1.42 0l-1.06 1.06c-.39.39-.39 1.03 0 1.42s1.03.39 1.42 0l1.06-1.06z' },
-                  { value: 'dark', label: 'Oscuro', desc: 'Siempre oscuro', icon: 'M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z' },
+                  { value: 'dark', label: t('profile.themeDark'), desc: t('profile.themeDarkDesc'), icon: 'M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z' },
                 ].map(({ value, label, desc, icon }) => (
                   <button
                     key={value}
@@ -774,6 +794,41 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, them
           </div>
         </div>
       )}
+
+      {/* Language Modal */}
+      {showLanguage && (
+        <div className="profile-modal-backdrop" onClick={() => setShowLanguage(false)}>
+          <div className="profile-modal profile-modal-theme" onClick={(e) => e.stopPropagation()}>
+            <div className="profile-modal-header">
+              <h3>{t('profile.languageTitle')}</h3>
+              <button className="profile-modal-close" onClick={() => setShowLanguage(false)}>×</button>
+            </div>
+            <div className="profile-modal-body">
+              <div className="profile-theme-options">
+                {[
+                  { value: 'es', label: t('profile.languageSpanish'), icon: 'M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z' },
+                  { value: 'ca', label: t('profile.languageCatalan'), icon: 'M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z' },
+                ].map(({ value, label, icon }) => (
+                  <button
+                    key={value}
+                    type="button"
+                    className={`profile-theme-btn ${lang === value ? 'profile-theme-btn--active' : ''}`}
+                    onClick={() => {
+                      setLang(value);
+                      setShowLanguage(false);
+                    }}
+                  >
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+                      <path d={icon} />
+                    </svg>
+                    <span className="profile-theme-btn-label">{label}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 }

apps/frontend/src/views/ScannerView.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useCallback, useRef } from 'react';
+import { useTranslation } from '../i18n';
 import { BarcodeScanner, BarcodeFormat } from '@capacitor-mlkit/barcode-scanning';
 import { Capacitor } from '@capacitor/core';
 import { BrowserMultiFormatReader } from '@zxing/browser';
@@ -25,6 +26,7 @@ function playBeep() {
 }
 
 function ScannerView({ onClose, onSelectMedicine }) {
+  const { t } = useTranslation();
   const videoRef = useRef(null);
   const streamRef = useRef(null);
   const rafRef = useRef(null);
@@ -78,7 +80,7 @@ function ScannerView({ onClose, onSelectMedicine }) {
     try {
       const supported = await BarcodeScanner.isSupported();
       if (!supported) {
-        setErrorMsg('El escáner no está disponible en este dispositivo.');
+        setErrorMsg(t('scanner.scannerUnavailable'));
         setPhase('error');
         return;
       }
@@ -87,7 +89,7 @@ function ScannerView({ onClose, onSelectMedicine }) {
       if (permission.camera !== 'granted') {
         const request = await BarcodeScanner.requestPermissions();
         if (request.camera !== 'granted') {
-          setErrorMsg('Permiso de cámara denegado. Actívalo en ajustes o introduce el código CIP manualmente.');
+          setErrorMsg(t('scanner.cameraPermissionDenied'));
           setPhase('error');
           return;
         }
@@ -104,7 +106,7 @@ function ScannerView({ onClose, onSelectMedicine }) {
       const rawValue = barcode?.rawValue;
 
       if (!rawValue || !CIP_REGEX.test(rawValue)) {
-        setErrorMsg('Código de barras inválido. Intenta de nuevo o introduce el CIP manualmente.');
+        setErrorMsg(t('scanner.invalidBarcode'));
         setPhase('error');
         return;
       }
@@ -118,7 +120,7 @@ function ScannerView({ onClose, onSelectMedicine }) {
         setPhase('idle');
         return;
       }
-      setErrorMsg(`Error al escanear: ${err.message || 'Error desconocido'}`);
+      setErrorMsg(`${t('scanner.scanError')} ${err.message || t('scanner.unknownError')}`);
       setPhase('error');
     }
   }
@@ -128,7 +130,7 @@ function ScannerView({ onClose, onSelectMedicine }) {
     console.log('[Scanner] Iniciando escaneo web...');
     try {
       if (!navigator.mediaDevices?.getUserMedia) {
-        setErrorMsg('Cámara no disponible en este navegador.');
+        setErrorMsg(t('scanner.cameraNotAvailable'));
         setPhase('error');
         return;
       }
@@ -206,11 +208,11 @@ function ScannerView({ onClose, onSelectMedicine }) {
       console.error('[Scanner] Error general:', err);
       stopCamera();
       if (err.name === 'NotAllowedError') {
-        setErrorMsg('Permiso de cámara denegado. Permite el acceso e intenta de nuevo.');
+        setErrorMsg(t('scanner.cameraPermissionWeb'));
       } else if (err.name === 'NotFoundError') {
-        setErrorMsg('No se detectó ninguna cámara. Introduce el código CIP manualmente.');
+        setErrorMsg(t('scanner.noCamera'));
       } else {
-        setErrorMsg(`Error de cámara: ${err.message || 'Error desconocido'}`);
+        setErrorMsg(`${t('scanner.cameraError')} ${err.message || t('scanner.unknownError')}`);
       }
       setPhase('error');
     }
@@ -228,12 +230,12 @@ function ScannerView({ onClose, onSelectMedicine }) {
     e.preventDefault();
     const cip = manualCip.trim();
     if (!cip) {
-      setErrorMsg('Introduce un código CIP.');
+      setErrorMsg(t('scanner.enterCIPError'));
       setPhase('error');
       return;
     }
     if (!CIP_REGEX.test(cip)) {
-      setErrorMsg('Formato CIP inválido. Debe tener 16 caracteres alfanuméricos.');
+      setErrorMsg(t('scanner.invalidCIP'));
       setPhase('error');
       return;
     }
@@ -268,14 +270,14 @@ function ScannerView({ onClose, onSelectMedicine }) {
       const data = await ocrRes.json();
 
       if (!ocrRes.ok) {
-        setErrorMsg(data.error || 'No se pudo leer la imagen. Intenta con otra foto.');
+        setErrorMsg(data.error || t('scanner.imageReadError'));
         setPhase('error');
         return;
       }
 
       const cip = data.cip;
       if (!CIP_REGEX.test(cip)) {
-        setErrorMsg(`CIP detectado "${cip}" no tiene formato válido. Introduce el código manualmente.`);
+        setErrorMsg(t('scanner.invalidCIPDetected'));
         setPhase('error');
         return;
       }
@@ -286,7 +288,7 @@ function ScannerView({ onClose, onSelectMedicine }) {
       setPhase('prescriptions');
       fetchPrescriptions(cip);
     } catch (err) {
-      setErrorMsg(`Error al procesar la imagen: ${err.message || 'Error desconocido'}`);
+      setErrorMsg(`${t('scanner.imageProcessError')} ${err.message || t('scanner.unknownError')}`);
       setPhase('error');
     } finally {
       setOcrLoading(false);
@@ -330,8 +332,8 @@ function ScannerView({ onClose, onSelectMedicine }) {
               <path d="M7 8v8M11 8v8M15 8v8M19 8v8" />
             </svg>
           </div>
-          <h2 className="scanner-heading">Escanear TSI</h2>
+          <h2 className="scanner-heading">{t('scanner.title')}</h2>
-          <p className="scanner-desc">Escanea el código de barras de tu tarjeta sanitaria para ver tus recetas activas</p>
+          <p className="scanner-desc">{t('scanner.description')}</p>
         </div>
 
         {phase !== 'prescriptions' && (
@@ -343,7 +345,7 @@ function ScannerView({ onClose, onSelectMedicine }) {
                 </svg>
                 <p className="scan-error-text">{errorMsg}</p>
                 <button className="scan-btn scan-btn--outline" onClick={() => { setErrorMsg(''); setPhase('idle'); }}>
-                  Intentar de nuevo
+                  {t('scanner.tryAgain')}
                 </button>
               </div>
             )}
@@ -355,18 +357,18 @@ function ScannerView({ onClose, onSelectMedicine }) {
                     <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
                     <circle cx="12" cy="13" r="4" />
                   </svg>
-                  Abrir cámara
+                  {t('scanner.openCamera')}
                 </button>
 
                 <div className="upload-section">
-                  <label className="upload-label">O sube una foto de tu TSI</label>
+                  <label className="upload-label">{t('scanner.orUploadPhoto')}</label>
                   <div className="upload-row">
                     <button className="upload-option" onClick={() => cameraInputRef.current?.click()}>
                       <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                         <path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z" />
                         <circle cx="12" cy="13" r="4" />
                       </svg>
-                      <span>Hacer foto</span>
+                      <span>{t('scanner.takePhoto')}</span>
                     </button>
                     <button className="upload-option" onClick={() => galleryInputRef.current?.click()}>
                       <svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
@@ -374,7 +376,7 @@ function ScannerView({ onClose, onSelectMedicine }) {
                         <circle cx="8.5" cy="8.5" r="1.5" />
                         <polyline points="21 15 16 10 5 21" />
                       </svg>
-                      <span>Subir de galería</span>
+                      <span>{t('scanner.uploadFromGallery')}</span>
                     </button>
                   </div>
                   <input
@@ -405,14 +407,14 @@ function ScannerView({ onClose, onSelectMedicine }) {
                   <div className="corner bl" />
                   <div className="corner br" />
                 </div>
-                <p className="scanner-hint">Apunta al código de barras</p>
+                <p className="scanner-hint">{t('scanner.scanning')}</p>
               </div>
             )}
 
             {phase === 'scanning' && isNative && (
               <div className="scanning-active">
                 <div className="scanner-spinner" />
-                <p>Abriendo cámara…</p>
+                <p>{t('scanner.openingCamera')}</p>
               </div>
             )}
 
@@ -424,7 +426,7 @@ function ScannerView({ onClose, onSelectMedicine }) {
                 {ocrLoading ? (
                   <div className="scanning-active">
                     <div className="scanner-spinner" />
-                    <p>Procesando imagen…</p>
+                    <p>{t('scanner.processingImage')}</p>
                   </div>
                 ) : (
                   <div className="photo-preview-actions">
@@ -434,14 +436,14 @@ function ScannerView({ onClose, onSelectMedicine }) {
                         <line x1="9" y1="20" x2="15" y2="20" />
                         <line x1="12" y1="4" x2="12" y2="20" />
                       </svg>
-                      Escanear imagen
+                      {t('scanner.scanImage')}
                     </button>
                     <button className="scan-btn scan-btn--ghost" onClick={handlePhotoDiscard}>
                       <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
                         <line x1="18" y1="6" x2="6" y2="18" />
                         <line x1="6" y1="6" x2="18" y2="18" />
                       </svg>
-                      Descartar
+                      {t('scanner.discard')}
                     </button>
                   </div>
                 )}
@@ -449,20 +451,20 @@ function ScannerView({ onClose, onSelectMedicine }) {
             )}
 
             <form className="cip-form" onSubmit={handleManualSubmit}>
-              <label className="cip-label" htmlFor="cip-input">O introduce el código CIP manualmente</label>
+              <label className="cip-label" htmlFor="cip-input">{t('scanner.enterCIP')}</label>
               <div className="cip-row">
                 <input
                   id="cip-input"
                   className="cip-input"
                   type="text"
-                  placeholder="Código CIP de 16 dígitos"
+                  placeholder={t('scanner.cipPlaceholder')}
                   value={manualCip}
                   onChange={(e) => setManualCip(e.target.value)}
                   maxLength={16}
                   autoComplete="off"
                   spellCheck={false}
                 />
-                <button type="submit" className="scan-btn scan-btn--primary">Buscar</button>
+                <button type="submit" className="scan-btn scan-btn--primary">{t('scanner.search')}</button>
               </div>
             </form>
           </>
@@ -475,23 +477,23 @@ function ScannerView({ onClose, onSelectMedicine }) {
                 <path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zM9 6c0-1.66 1.34-3 3-3s3 1.34 3 3v2H9V6zm3 10c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z" />
               </svg>
               <div>
-                <p className="cip-badge-label">TSI Escaneada</p>
+                <p className="cip-badge-label">{t('scanner.tsiScanned')}</p>
                 <p className="cip-badge-value">{scannedCip}</p>
               </div>
             </div>
 
-            <h3 className="rx-title">Recetas Activas</h3>
+            <h3 className="rx-title">{t('scanner.activePrescriptions')}</h3>
-            <p className="rx-subtitle">Toca un medicamento para ver disponibilidad en farmacias cercanas.</p>
+            <p className="rx-subtitle">{t('scanner.tapToFind')}</p>
 
             {loadingPrescriptions && (
               <div className="rx-loading">
                 <div className="scanner-spinner" />
-                <p>Cargando recetas…</p>
+                <p>{t('scanner.loadingPrescriptions')}</p>
               </div>
             )}
 
             {!loadingPrescriptions && prescriptions.length === 0 && (
-              <p className="rx-empty">No se encontraron recetas activas para esta tarjeta.</p>
+              <p className="rx-empty">{t('scanner.noPrescriptions')}</p>
             )}
 
             <ul className="rx-list">
@@ -523,7 +525,7 @@ function ScannerView({ onClose, onSelectMedicine }) {
                 <polyline points="1 4 1 10 7 10" />
                 <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10" />
               </svg>
-              Escanear otra tarjeta
+              {t('scanner.scanAnother')}
             </button>
           </div>
         )}

apps/frontend/src/views/SearchView.jsx

@@ -5,6 +5,7 @@ import ProductResults from '../components/ProductResults';
 import PharmacyList from '../components/PharmacyList';
 import PharmacyMap from '../components/PharmacyMap';
 import { haversineKm, getUserPosition, hasCachedPosition } from '../utils/geo';
+import { useTranslation } from '../i18n';
 import './SearchView.css';
 
 const suggestions = [
@@ -15,6 +16,7 @@ const suggestions = [
 ];
 
 function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigateToProduct }) {
+  const { t } = useTranslation();
   const [searchQuery, setSearchQuery] = useState(initialQuery);
   const [medicines, setMedicines] = useState([]);
   const [products, setProducts] = useState([]);
@@ -193,11 +195,11 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
         console.error('Error saving search history:', err);
       }
     } catch (err) {
-      let msg = 'No se pudo obtener tu ubicación';
+      let msg = t('search.locationError');
       if (err && typeof err.code === 'number') {
-        if (err.code === 1) msg = 'Permiso de ubicación denegado. Permite el acceso a la ubicación en tu navegador.';
+        if (err.code === 1) msg = t('search.locationDenied');
-        else if (err.code === 2) msg = 'Ubicación no disponible. Verifica que el GPS esté activado.';
+        else if (err.code === 2) msg = t('search.locationUnavailable');
-        else if (err.code === 3) msg = 'La ubicación tardó demasiado. Intenta de nuevo o verifica tu conexión.';
+        else if (err.code === 3) msg = t('search.locationTimeout');
       }
       setLocationError(msg);
     } finally {
@@ -223,15 +225,15 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
         <SearchBar
           value={searchQuery}
           onChange={setSearchQuery}
-          placeholder="Escriba el nombre del medicamento"
+          placeholder={t('search.placeholder')}
         />
 
-        {loading && <div className="loading">Buscando...</div>}
+        {loading && <div className="loading">{t('search.searching')}</div>}
 
         {!searchQuery && !selectedMedicine && (
           <>
             <section className="suggestions-section">
-              <h2 className="section-title">Sugerencias</h2>
+              <h2 className="section-title">{t('search.suggestions')}</h2>
               <div className="suggestions-grid">
                 {suggestions.map((s, i) => (
                   <button
@@ -252,7 +254,7 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
 
             {currentUser && recentSearches.length > 0 && (
               <section className="recent-section">
-                <h2 className="section-title">Resultados Recientes</h2>
+                <h2 className="section-title">{t('search.recentResults')}</h2>
                 <div className="recent-list">
                   {recentSearches.map((r) => (
                     <div
@@ -285,7 +287,7 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
                           <circle cx="12" cy="12" r="10" />
                           <polyline points="12 6 12 12 16 14" />
                         </svg>
-                        Encontrar cerca
+                        {t('search.findNearby')}
                       </button>
                     </div>
                   ))}
@@ -299,7 +301,7 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
           <>
             <div className="results-summary">
               {(medicines.length + products.length) > 0 && (
-                <span>{medicines.length + products.length} resultados encontrados</span>
+                <span>{medicines.length + products.length} {t('search.resultsFound')}</span>
               )}
             </div>
 
@@ -318,7 +320,7 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
 
             {products.length > 0 && (
               <div className="products-section">
-                <h3 className="section-subtitle">Parafarmacia</h3>
+                <h3 className="section-subtitle">{t('search.parapharmacy')}</h3>
                 <ProductResults
                   products={products}
                   onSelect={(p) => {
@@ -340,9 +342,9 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
             <div className="medicine-info">
               <h2>{selectedMedicine.name}</h2>
               <div className="medicine-details">
-                <span><strong>Ingrediente Activo:</strong> {selectedMedicine.active_ingredient}</span>
+                <span><strong>{t('search.activeIngredient')}</strong> {selectedMedicine.active_ingredient}</span>
-                <span><strong>Dosis:</strong> {selectedMedicine.dosage}</span>
+                <span><strong>{t('search.dosage')}</strong> {selectedMedicine.dosage}</span>
-                <span><strong>Forma:</strong> {selectedMedicine.form}</span>
+                <span><strong>{t('search.form')}</strong> {selectedMedicine.form}</span>
               </div>
               <button
                 className="back-button"
@@ -351,7 +353,7 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
                   setPharmacies([]);
                 }}
               >
-                ← Volver a búsqueda
+                {t('search.backToSearch')}
               </button>
             </div>
 
@@ -363,24 +365,24 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigate
                   disabled={locating}
                 >
                   {locating
-                    ? '📍 Localizando…'
+                    ? t('search.locating')
                     : sortByDistance
-                      ? '📍 Ordenado por distancia · Reset'
+                      ? t('search.sortedByDistance')
                       : hasSavedCoords
-                        ? '📍 Ordenar por ubicación guardada'
+                        ? t('search.sortBySavedLocation')
-                        : '📍 Ordenar por distancia'}
+                        : t('search.sortByDistance')}
                 </button>
                 {sortByDistance && positionSource === 'profile' && (
-                  <span className="location-source">Usando tu dirección guardada</span>
+                  <span className="location-source">{t('search.usingSavedAddress')}</span>
                 )}
                 {sortByDistance && positionSource === 'cached' && (
-                  <span className="location-source">Usando ubicación reciente</span>
+                  <span className="location-source">{t('search.usingRecentLocation')}</span>
                 )}
                 {locationError && (
                   <span className="location-error">
                     {locationError}
                     <button className="retry-location-btn" onClick={handleSortByDistance}>
-                      Reintentar
+                      {t('search.retry')}
                     </button>
                   </span>
                 )}