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/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}>