feat(i18n-mobile): add bilingual support (Català / Castellano) for React Native app

Add lightweight i18n system matching the web app architecture.
Language persisted in AsyncStorage('ff-lang').

New files:
- src/i18n/locales/ca.js (~190 translation keys)
- src/i18n/locales/es.js (~190 translation keys)
- src/i18n/LanguageContext.jsx (Provider + AsyncStorage)
- src/i18n/useTranslation.js (hook)
- src/i18n/index.js (barrel export)

Modified 16 files:
- app/_layout.tsx: wrap with LanguageProvider, translate stack titles
- app/(tabs)/_layout.tsx: translate tab bar labels
- app/(tabs)/index.tsx: translate home screen
- app/(tabs)/search.tsx: translate search screen
- app/(tabs)/alerts.tsx: translate alerts screen
- app/(tabs)/profile.tsx: translate profile + add language selector (CA/ES)
- app/(tabs)/scan.tsx: translate scanner screen
- app/auth/login.tsx: translate login/register
- app/medicine/[id].tsx: translate medicine detail
- app/pharmacy/[id].tsx: translate pharmacy detail
- app/product/[source]/[id].tsx: translate product detail
- 5 components: MedicineCard, StockBadge, SearchBar, LoadingSpinner, BarcodeScanner

Language selector in Profile screen (globe icon + CA/ES toggle).
No routes changed. No API calls affected.

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>
   );