feat(i18n): add bilingual support (Català / Castellano)

Add lightweight i18n system using React Context + useTranslation hook.
No external dependencies. Language persisted in localStorage('ff-lang').

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

Modified 22 files:
- main.jsx: wrap App with LanguageProvider
- App.test.jsx: add LanguageProvider wrapper for tests
- 13 user components: BottomNav, HomeView, LoginModal, SearchView,
  ProfileView, AlertsView, ScannerView, PharmacyList, MedicineResults,
  ProductResults, SavedNotifications, ErrorBoundary, SearchBar
- 6 admin components: AdminView, LoginForm, PharmacyManagement,
  MedicineManagement, PharmacyMedicineLink, PharmacyProductLink

ProfileView includes language selector (globe icon + modal CA/ES)
placed next to the Theme selector.

No routes changed. No API calls affected. No navigation changes.

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: 'search', label: 'Buscar', Icon: IconSearch },
-    { id: 'scan', label: 'Escanear', Icon: IconScan, elevated: true },
-    { id: 'alerts', label: 'Avisos', Icon: IconBell, badge: badgeCount > 0, badgeCount },
-    { id: 'profile', label: 'Usuario', Icon: IconUser },
+    { id: 'home', label: t('nav.home'), Icon: IconHome },
+    { id: 'search', label: t('nav.search'), Icon: IconSearch },
+    { id: 'scan', label: t('nav.scan'), Icon: IconScan, elevated: true },
+    { id: 'alerts', label: t('nav.alerts'), Icon: IconBell, badge: badgeCount > 0, badgeCount },
+    { 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>
-          <p style={{ color: '#666' }}>Ha ocurrido un error inesperado. Por favor, recarga la página.</p>
+          <h2>{t('error.title')}</h2>
+          <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.'
-            : 'Inicia sesión para gestionar tu perfil y notificaciones.'}
+            ? t('login.registerDescription')
+            : 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 ? 'Crear cuenta' : 'Iniciar sesión')}
+                ? (isRegister ? t('login.creating') : t('login.loggingIn'))
+                : (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'
-                : 'Notificarme cuando esté disponible'
+                ? t('medicine.disableNotifications')
+                : t('medicine.enableNotifications')
           }
           title={
             !currentUser
-              ? 'Inicia sesión para activar notificaciones'
+              ? t('medicine.loginForNotifications')
               : subscribed
-                ? 'Notificaciones activadas — clic para desactivar'
-                : 'Notificarme cuando este medicamento esté en una farmacia'
+                ? t('medicine.notificationsActivated')
+                : t('medicine.notifyWhenAvailable')
           }
         >
           {subscribed && currentUser ? '🔔' : '🔕'}
         </button>
       </div>
       <div className="medicine-card-body">
-        <p><strong>Principio Activo:</strong> {medicine.active_ingredient}</p>
-        <p><strong>Dosis:</strong> {medicine.dosage} • <strong>Forma:</strong> {medicine.form}</p>
+        <p><strong>{t('medicine.principioActivo')}</strong> {medicine.active_ingredient}</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'
-                : 'Notificarme cuando llegue a esta farmacia'
+                ? t('pharmacy.disableNotificationsPharmacy')
+                : t('pharmacy.notifyWhenArrives')
           }
           title={
             !currentUser
-              ? 'Inicia sesión para activar notificaciones'
+              ? t('pharmacy.loginForNotifications')
               : subscribed
-                ? 'Notificaciones activadas para esta farmacia — clic para desactivar'
-                : 'Notificarme cuando llegue a esta farmacia'
+                ? t('pharmacy.notificationsActivatedPharmacy')
+                : 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',
-  parapharmacy: 'Parafarmacia',
-  dermocosmética: 'Dermocosmética',
-  'Fórmulas lácteas': 'Fórmulas lácteas',
-  vitaminas: 'Vitaminas',
-  analgésicos: 'Analgésicos'
+  otc: 'product.sinReceta',
+  parapharmacy: 'product.parapharmacy',
+  dermocosmética: 'product.dermocosmetica',
+  'Fórmulas lácteas': 'product.formulasLacteas',
+  vitaminas: 'product.vitamins',
+  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>
-          <button className="saved-notifications-close" onClick={onClose} aria-label="Cerrar">×</button>
+          <h2>{t('savedNotifications.title')}</h2>
+          <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>
-          <p>Introduce tus credenciales para acceder al panel de administración</p>
+          <h2>{t('admin.login.title')}</h2>
+          <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>Busca medicamentos para vincularlos a farmacias en la pestaña "Link Medicine".</p>
+        <p>ℹ️ {t('admin.medicine.description')} <strong>{t('admin.medicine.cimaApi')}</strong> {t('admin.medicine.cimaDescription')}</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> Nº Registro:</strong> {medicine.nregistro} • 
-                  {medicine.generic ? ' Genérico' : ' Marca'}
+                  <strong>{t('admin.medicine.laboratory')}</strong> {medicine.laboratory} • 
+                  <strong> {t('admin.medicine.registrationNumber')}</strong> {medicine.nregistro} • 
+                  {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 = [
-  { id: 'custom', label: 'Coordenadas personalizadas', lat: '', lon: '', radio: '' },
-  {
-    id: 'rubi',
-    label: 'Ejemplo: Área de Rubí (1.5 km)',
-    lat: '41.5631',
-    lon: '2.0038',
-    radio: '1500',
-  },
-];
+function getRegionPresets(t) {
+  return [
+    { id: 'custom', label: t('admin.pharmacy.customCoordinates'), lat: '', lon: '', radio: '' },
+    {
+      id: 'rubi',
+      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.
-          Elige una <strong>fuente de datos</strong>: <strong>OpenStreetMap</strong> es gratuita (sin clave);{' '}
+          <strong>{t('admin.pharmacy.searchCity')}</strong> establece latitud, longitud y radio para el filtro de mapa y las importaciones.
+          {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="openData">URL de datos abiertos JSON</option>
+              <option value="webhook">{t('admin.pharmacy.webhookLegacy')}</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'
-                  : `Importar desde ${importMode === 'osm' ? 'Overpass' : 'OpenStreetMap'}`}
+                  ? t('admin.pharmacy.importUrl')
+                  : `${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>
-            <p className="hours-editor-hint">Marca un día como <em>Cerrado</em> si la farmacia no abre ese día.</p>
+            <legend>{t('admin.pharmacy.openingHours')}</legend>
+            <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
-            {filterByRegion && ' (dentro del radio)'}
+            {t('admin.pharmacy.showing')} {displayedPharmacies.length} {t('admin.pharmacy.of')} {pharmacies.length} farmacias
+            {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.'
-                : '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.empty')
+                : 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.dosage && `Dosis: ${selectedMedicine.dosage} • `}
-                Nº Registro: {selectedMedicine.nregistro}
+                {selectedMedicine.active_ingredient && `${t('admin.linkMedicine.activeIngredient')} ${selectedMedicine.active_ingredient} • `}
+                {selectedMedicine.dosage && `${t('admin.linkMedicine.dosage')} ${selectedMedicine.dosage} • `}
+                {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 newStock = prompt('Introduce nuevo stock:', pm.stock || '0');
+                        const newPrice = prompt(t('admin.linkMedicine.newPrice'), pm.price || '');
+                        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.brands && `Marca: ${selectedProduct.brands} • `}
-                {selectedProduct.price != null && `Precio: ${selectedProduct.price}€ • `}
+                {selectedProduct.brand && `${t('admin.linkProduct.brand')} ${selectedProduct.brand} • `}
+                {selectedProduct.brands && `${t('admin.linkProduct.brand')} ${selectedProduct.brands} • `}
+                {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 newStock = prompt('Introduce nuevo stock:', pp.stock || '0');
+                        const newPrice = prompt(t('admin.linkProduct.newPrice'), pp.price || '');
+                        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>
-    <ErrorBoundary>
-      <App />
-    </ErrorBoundary>
+    <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>
-          <p>Autenticación requerida</p>
+          <h1>{t('admin.title')}</h1>
+          <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>
-            <p>Gestiona farmacias y medicamentos</p>
+            <h1>{t('admin.title')}</h1>
+            <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>
-          <p className="alerts-subtitle">Mantente al día con tus medicamentos.</p>
+          <h2 className="alerts-title">{t('alerts.title')}</h2>
+          <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 
+                <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-sub">Selecciona una imagen existente</p>
+                      <p className="profile-avatar-upload-title">{t('profile.chooseFromGallery')}</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: '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: '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: '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: 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: 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>
-          <p className="scanner-desc">Escanea el código de barras de tu tarjeta sanitaria para ver tus recetas activas</p>
+          <h2 className="scanner-heading">{t('scanner.title')}</h2>
+          <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>
-            <p className="rx-subtitle">Toca un medicamento para ver disponibilidad en farmacias cercanas.</p>
+            <h3 className="rx-title">{t('scanner.activePrescriptions')}</h3>
+            <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.';
-        else if (err.code === 2) msg = 'Ubicación no disponible. Verifica que el GPS esté activado.';
-        else if (err.code === 3) msg = 'La ubicación tardó demasiado. Intenta de nuevo o verifica tu conexión.';
+        if (err.code === 1) msg = t('search.locationDenied');
+        else if (err.code === 2) msg = t('search.locationUnavailable');
+        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>Dosis:</strong> {selectedMedicine.dosage}</span>
-                <span><strong>Forma:</strong> {selectedMedicine.form}</span>
+                <span><strong>{t('search.activeIngredient')}</strong> {selectedMedicine.active_ingredient}</span>
+                <span><strong>{t('search.dosage')}</strong> {selectedMedicine.dosage}</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'
-                        : '📍 Ordenar por distancia'}
+                        ? t('search.sortBySavedLocation')
+                        : 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>
                 )}