feat: add pharmacy-product linking system

- Add pharmacy_products table (PostgreSQL + SQLite) - Add public route GET /api/products/:source/:id/pharmacies - Add admin CRUD routes for pharmacy-product links - Add cascade delete when pharmacy is removed - Update ProductView to show linked pharmacies - Create PharmacyProductLink admin component - Add 'Vincular Producto a Farmacia' tab in AdminView
fix(frontend): set screen to 'product' when navigating to product detail
2026-07-13 20:41:16 +02:00 · 2026-07-13 19:50:24 +02:00 · 2026-07-13 19:34:55 +02:00 · 2026-07-13 17:36:52 +02:00 · 2026-07-13 17:31:42 +02:00 · 2026-07-13 17:13:22 +02:00
86 changed files with 7561 additions and 3013 deletions
@@ -0,0 +1 @@
+{"pid":596137,"startedAt":1783946773113}
@@ -0,0 +1,12 @@
+{
+  "$schema": "https://mimo.xiaomi.com/mimocode/config.json",
+  "mcp": {
+    "n8n": {
+      "type": "remote",
+      "url": "https://n8n.hacecalor.net/mcp-server/http",
+      "headers": {
+        "Authorization": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiJjNDE1ODI4Yy00ZWU0LTQ1MjEtOGQ3Mi0xODZmYWNjNGU4ZmEiLCJpc3MiOiJuOG4iLCJhdWQiOiJtY3Atc2VydmVyLWFwaSIsImp0aSI6ImU1YzUyNjIxLTExZDAtNDM4MC04YmRjLTlhMmQ2MDA1OGU4OSIsImlhdCI6MTc4Mzk0NjY3Mn0._0LG3CJJjUg7-g1kvMjME5nBjIEWkrfEeAZrhDxpfC4"
+      }
+    }
+  }
+}
@@ -0,0 +1,141 @@
+# Plan: Dark Mode para FarmaFinder Mobile
+
+## Objetivo
+Añadir soporte de modo oscuro a la app móvil con:
+- Detección automática del modo oscuro del sistema
+- Toggle manual en la pantalla de perfil (Configuración)
+- Persistencia de la preferencia del usuario
+
+## Arquitectura
+
+### 1. Theme Store (Zustand + AsyncStorage)
+**Nuevo archivo: `store/themeStore.ts`**
+
+- Estado: `mode: 'light' | 'dark' | 'system'`
+- Persistencia con `@react-native-async-storage/async-storage`
+- Acciones: `setMode()`, `init()` (carga del storage al arrancar)
+- Por defecto: `'system'` (respeta el dispositivo)
+
+### 2. Hook `useThemeColor`
+**Nuevo archivo: `hooks/useThemeColor.ts`**
+
+- Usa `useColorScheme()` de React Native para detectar el color del sistema
+- Combina con el `mode` del themeStore para determinar el tema efectivo
+- Retorna el objeto `colors` apropiado (light o dark)
+- Los componentes consumirán este hook en vez de importar `colors` directamente
+
+### 3. Paleta de colores oscura
+**Modificar: `constants/theme.ts`**
+
+Añadir exportación `darkColors` con la paleta oscura:
+
+| Token | Light (actual) | Dark (nuevo) |
+|---|---|---|
+| `background` | `#fbfbfb` | `#121212` |
+| `card` | `#ffffff` | `#1e1e1e` |
+| `surfaceLow` | `#f2f4f5` | `#2a2a2a` |
+| `surface` | `#eceeef` | `#333333` |
+| `surfaceHigh` | `#e6e8e9` | `#3a3a3a` |
+| `border` | `#c0c9bb` | `#3a3a3a` |
+| `separator` | `#c0c9bb` | `#3a3a3a` |
+| `text` | `#111417` | `#f0f0f0` |
+| `textSecondary` | `#41493e` | `#a0a0a0` |
+| `textInverse` | `#ffffff` | `#111417` |
+| `primaryContainer` | `#cfead0` | `#1a3a1c` |
+| `onPrimaryContainer` | `#0d2b12` | `#cfead0` |
+| `secondaryContainer` | `#dbe7ff` | `#1a2a4a` |
+| `tertiaryContainer` | `#efe7ff` | `#2a1a4a` |
+| `dangerContainer` | `#feecec` | `#3a1a1a` |
+| `accentWarm` | `#f5a97a` | `#f5a97a` (sin cambio) |
+| `primary`, `secondary`, `tertiary`, `scanButton`, `success`, `danger`, `warning` | (sin cambios) | (sin cambios) |
+
+### 4. Provider wrapper
+**Nuevo archivo: `components/ThemeProvider.tsx`**
+
+- Lee el `mode` del themeStore y el `useColorScheme()` del sistema
+- Calcula el tema efectivo (`light` o `dark`)
+- Provee `colors` y `isDark` vía React Context
+- Carga la preferencia guardada en AsyncStorage al montar
+
+### 5. Integración en Root Layout
+**Modificar: `app/_layout.tsx`**
+
+- Envolver toda la app con `<ThemeProvider>`
+- El `StatusBar` se ajusta: `style={isDark ? 'light' : 'auto'}`
+- Los colores del Stack header se leen del contexto
+
+### 6. Toggle en el perfil
+**Modificar: `app/(tabs)/profile.tsx`**
+
+Añadir en la pantalla de perfil (antes de "Configuración") un nuevo item de menú:
+- Icono: `moon-outline` / `sunny-outline` según el tema actual
+- Texto: "Modo de pantalla"
+- Al pulsar, mostrar un picker/modal con 3 opciones:
+  - **Sistema** (icono: phone-portrait) - respeta el SO
+  - **Claro** (icono: sunny) - fuerza light
+  - **Oscuro** (icono: moon) - fuerza dark
+- El toggle se muestra inline (sin modal extra) tipo Segmented Control
+
+### 7. Actualizar todos los screens y components
+
+Cada archivo que importa `colors` debe cambiar a usar el hook `useThemeColor()`:
+
+| Archivo | Cambio |
+|---|---|
+| `app/_layout.tsx` | Usa ThemeProvider + context para header colors |
+| `app/(tabs)/_layout.tsx` | Tab bar y header leen colors del context |
+| `app/(tabs)/index.tsx` | `const { colors } = useThemeColor()` |
+| `app/(tabs)/search.tsx` | `const { colors } = useThemeColor()` |
+| `app/(tabs)/scan.tsx` | `const { colors } = useThemeColor()` |
+| `app/(tabs)/alerts.tsx` | `const { colors } = useThemeColor()` |
+| `app/(tabs)/profile.tsx` | `const { colors, isDark } = useThemeColor()` |
+| `app/(tabs)/map.tsx` | `const { colors } = useThemeColor()` |
+| `app/medicine/[id].tsx` | `const { colors } = useThemeColor()` |
+| `app/pharmacy/[id].tsx` | `const { colors } = useThemeColor()` |
+| `app/auth/login.tsx` | `const { colors } = useThemeColor()` |
+| `app/auth/register.tsx` | `const { colors } = useThemeColor()` |
+| `components/SearchBar.tsx` | `const { colors } = useThemeColor()` |
+| `components/MedicineCard.tsx` | `const { colors } = useThemeColor()` |
+| `components/LoadingSpinner.tsx` | `const { colors } = useThemeColor()` |
+| `components/StockBadge.tsx` | Añade colores dark para badges |
+| `components/BarcodeScanner.tsx` | `const { colors } = useThemeColor()` |
+
+**Nota sobre StyleSheet**: Los `StyleSheet.create()` se ejecutan una vez. Para que los estilos se actualicen con el tema, las propiedades que dependen de `colors` deben aplicarse vía `style` inline o moverse a funciones que retornen estilos dinámicos. La estrategia más limpia es:
+- Los colores de fondo/texto van como inline styles
+- Las estructuras (flex, padding, borderRadius) se quedan en `StyleSheet.create`
+
+### 8. Colores hardcodeados
+Los siguientes archivos tienen colores inline hardcodeados que necesitan variante dark:
+
+- **`StockBadge.tsx`**: `#eaf7ec`, `#fff3cd`, `#feecec` → añadir tokens al tema
+- **`search.tsx`**: suggestions con `#ffffff`, `#f0f7ff`, etc. → usar colores del tema
+- **`profile.tsx`**: feedback `#eaf7ec`, `#cfead0`, `#fecaca` → usar colores del tema
+- **`home/index.tsx`**: `rgba(255,255,255,0.2/0.3)` para iconos → ajustar opacidad
+
+### 9. app.json
+**Modificar: `app.json`**
+
+Cambiar `"userInterfaceStyle": "light"` → `"userInterfaceStyle": "automatic"`
+
+## Orden de ejecución
+
+1. `store/themeStore.ts` (nuevo)
+2. `hooks/useThemeColor.ts` (nuevo)
+3. `constants/theme.ts` (añadir `darkColors`)
+4. `components/ThemeProvider.tsx` (nuevo)
+5. `app/_layout.tsx` (envolver con ThemeProvider)
+6. `app/(tabs)/_layout.tsx` (colores dinámicos)
+7. `app/(tabs)/profile.tsx` (toggle de tema)
+8. Todos los screens y components (migrar a hook)
+9. `app.json` (userInterfaceStyle: automatic)
+10. Corregir colores hardcodeados
+
+## Verificación
+
+1. Ejecutar `npx expo start` y verificar que la app arranca sin errores
+2. Probar en iOS/Android: el tema respeta la configuración del sistema
+3. Ir a Perfil > Modo de pantalla y cambiar entre Claro/Oscuro/Sistema
+4. Verificar que el cambio es inmediato sin recargar la app
+5. Cerrar y reabrir la app → la preferencia persiste
+6. Verificar que todos los screens se ven bien en ambos modos (sin texto invisible, sin fondos transparentes)
+7. Probar tablets ( responsive)
@@ -15,3 +15,14 @@ PG_PASSWORD=change-me
 VAPID_PUBLIC_KEY=
 VAPID_PRIVATE_KEY=
 VAPID_SUBJECT=mailto:admin@example.com
+
+# Expo Push Notifications (mobile). Get token from:
+#   https://expo.dev/accounts/[username]/settings/access-tokens
+EXPO_ACCESS_TOKEN=
+
+# Open Food Facts
+# Register at: https://world.openfoodfacts.org/
+# User-Agent is REQUIRED per OFF docs (format: AppName/Version (ContactEmail))
+OFF_USER_AGENT=FarmaFinder/1.0 (https://github.com/farmafinder)
+OFF_USERNAME=
+OFF_PASSWORD=
@@ -0,0 +1,107 @@
+import { jest } from '@jest/globals'
+
+jest.unstable_mockModule('../redis-client.js', () => ({
+  default: {
+    get: jest.fn(async () => null),
+    setEx: jest.fn(async () => 'OK'),
+  },
+}))
+
+jest.unstable_mockModule('axios', () => ({
+  default: {
+    get: jest.fn(async () => ({ data: { products: [] } })),
+  },
+}))
+
+const { transformOFFProduct, searchBabyProducts, getBabyProductDetails } = await import('../off-service.js')
+
+describe('transformOFFProduct', () => {
+  test('transforms a valid OFF product to unified model', () => {
+    const offProduct = {
+      _id: '12345',
+      product_name: 'Baby Rice',
+      brands: 'Nestlé',
+      image_url: 'https://example.com/image.jpg',
+      nutriscore_grade: 'a',
+      ingredients_text: 'Rice, Iron, Vitamins',
+      nova_group: 1,
+      ecoscore_grade: 'b',
+      categories_tags: ['en:baby-foods', 'en:baby-rice'],
+    }
+
+    const result = transformOFFProduct(offProduct)
+
+    expect(result).toEqual({
+      id: '12345',
+      source: 'openfoodfacts',
+      name: 'Baby Rice',
+      brand: 'Nestlé',
+      category: 'baby_food',
+      image_url: 'https://example.com/image.jpg',
+      nutriscore: 'a',
+      ingredients: 'Rice, Iron, Vitamins',
+      nova_group: 1,
+      eco_score: 'b',
+    })
+  })
+
+  test('returns null for null/undefined input', () => {
+    expect(transformOFFProduct(null)).toBeNull()
+    expect(transformOFFProduct(undefined)).toBeNull()
+  })
+
+  test('returns null when missing required fields', () => {
+    expect(transformOFFProduct({ _id: '123' })).toBeNull()
+    expect(transformOFFProduct({ product_name: 'Test' })).toBeNull()
+  })
+
+  test('sets default brand to empty string when missing', () => {
+    const result = transformOFFProduct({
+      _id: '999',
+      product_name: 'Plain Product',
+    })
+    expect(result.brand).toBe('')
+    expect(result.image_url).toBeNull()
+    expect(result.nutriscore).toBeNull()
+    expect(result.ingredients).toBeNull()
+    expect(result.nova_group).toBeNull()
+    expect(result.eco_score).toBeNull()
+  })
+
+  test('detects baby_milk category from tags', () => {
+    const result = transformOFFProduct({
+      _id: '200',
+      product_name: 'Infant Formula',
+      categories_tags: ['en:infant-milk'],
+    })
+    expect(result.category).toBe('baby_milk')
+  })
+
+  test('detects baby_cereal category from tags', () => {
+    const result = transformOFFProduct({
+      _id: '300',
+      product_name: 'Baby Cereal',
+      categories_tags: ['en:baby-cereals'],
+    })
+    expect(result.category).toBe('baby_cereal')
+  })
+})
+
+describe('searchBabyProducts', () => {
+  test('returns empty array for short query', async () => {
+    const result = await searchBabyProducts('a')
+    expect(result).toEqual([])
+  })
+
+  test('returns empty array for null/empty query', async () => {
+    expect(await searchBabyProducts(null)).toEqual([])
+    expect(await searchBabyProducts('')).toEqual([])
+  })
+})
+
+describe('getBabyProductDetails', () => {
+  test('returns null for null barcode', async () => {
+    const result = await getBabyProductDetails(null)
+    expect(result).toBeNull()
+  })
+})
@@ -3,6 +3,7 @@ import { jest } from '@jest/globals'
 jest.unstable_mockModule('../cima-service.js', () => ({
  searchMedicines: jest.fn(async () => []),
  getMedicineDetails: jest.fn(async () => null),
+  searchOTC: jest.fn(async () => []),
 }))

 jest.unstable_mockModule('../farmacias-webhook-import.js', () => ({
@@ -151,19 +151,52 @@ export async function getMedicineDetails(nregistro) {
      return JSON.parse(cachedData);
    }

-    // Consultar la API de CIMA
+    // Intentar obtener de la API de CIMA (endpoint individual puede no existir)
    console.log(`🌐 Fetching medicine details from CIMA: ${nregistro}`);
-    const response = await axios.get(`${CIMA_API_BASE_URL}/medicamento/${nregistro}`, {
+    try {
+      const response = await axios.get(`${CIMA_API_BASE_URL}/medicamento/${nregistro}`, {
+        timeout: 5000
+      });
+
+      if (response.data) {
+        const med = response.data;
+        const medicineDetails = {
+          id: med.nregistro,
+          nregistro: med.nregistro,
+          name: med.nombre,
+          active_ingredient: med.principiosActivos?.[0]?.nombre || med.vtm?.nombre || null,
+          dosage: med.dosis || null,
+          form: med.formaFarmaceutica?.nombre || null,
+          formSimplified: med.formaFarmaceuticaSimplificada?.nombre || null,
+          laboratory: med.labtitular,
+          prescription: med.cpresc,
+          commercialized: med.comerc,
+          generic: med.generico,
+          photos: med.fotos || [],
+          docs: med.docs || [],
+          presentations: med.presentaciones || []
+        };
+
+        await redisClient.setEx(cacheKey, CACHE_TTL * 24, JSON.stringify(medicineDetails));
+        return medicineDetails;
+      }
+    } catch (apiError) {
+      console.log(`⚠️ Individual medicine endpoint failed, trying search fallback`);
+    }
+
+    // Fallback: buscar por nregistro usando el endpoint de búsqueda
+    const searchResponse = await axios.get(`${CIMA_API_BASE_URL}/medicamentos`, {
+      params: { nregistro },
      timeout: 5000
    });

-    if (response.data) {
-      const med = response.data;
+    if (searchResponse.data?.resultados?.length > 0) {
+      const med = searchResponse.data.resultados[0];
      const medicineDetails = {
        id: med.nregistro,
        nregistro: med.nregistro,
        name: med.nombre,
-        active_ingredient: med.principiosActivos?.[0]?.nombre || med.vtm?.nombre || null,
+        active_ingredient: med.vtm?.nombre || null,
        dosage: med.dosis || null,
        form: med.formaFarmaceutica?.nombre || null,
        formSimplified: med.formaFarmaceuticaSimplificada?.nombre || null,
@@ -172,13 +205,10 @@ export async function getMedicineDetails(nregistro) {
        commercialized: med.comerc,
        generic: med.generico,
        photos: med.fotos || [],
-        docs: med.docs || [],
-        presentations: med.presentaciones || []
+        docs: med.docs || []
      };

-      // Guardar en caché (TTL más largo para detalles específicos)
      await redisClient.setEx(cacheKey, CACHE_TTL * 24, JSON.stringify(medicineDetails));
-      
      return medicineDetails;
    }

@@ -201,6 +231,86 @@ export async function getMedicineDetails(nregistro) {
  }
 }

+/**
+ * Busca medicamentos OTC (Sin Receta) en la API de CIMA con caché de Redis
+ * @param {string} query - Término de búsqueda
+ * @returns {Promise<Array>} - Lista de medicamentos OTC encontrados
+ */
+export async function searchOTC(query) {
+  if (!query || query.trim().length < 2) {
+    return [];
+  }
+
+  const searchTerm = query.trim().toLowerCase();
+  const cacheKey = `cima:otc:${searchTerm}`;
+
+  try {
+    // Intentar obtener del caché
+    const cachedData = await redisClient.get(cacheKey);
+    
+    if (cachedData) {
+      console.log(`📦 Cache hit for OTC search: ${searchTerm}`);
+      return JSON.parse(cachedData);
+    }
+
+    const parsed = parseSearchQuery(searchTerm);
+    const apiSearchTerm = parsed.nameQuery || searchTerm;
+
+    console.log(`🌐 Fetching OTC from CIMA API: ${apiSearchTerm}`);
+    const response = await axios.get(`${CIMA_API_BASE_URL}/medicamentos`, {
+      params: {
+        nombre: apiSearchTerm,
+        cpresc: 'Sin Receta'
+      },
+      timeout: 5000
+    });
+
+    if (response.data && response.data.resultados) {
+      // Transformar los datos de CIMA al modelo unificado Product
+      const medicines = response.data.resultados.map(med => ({
+        id: med.nregistro,
+        source: 'cima',
+        name: med.nombre,
+        brand: med.labtitular || '',
+        category: 'otc',
+        image_url: med.fotos?.[0]?.url || null,
+        active_ingredient: med.vtm?.nombre || null,
+        dosage: med.dosis || null,
+        form: med.formaFarmaceutica?.nombre || null,
+        prescription: med.cpresc,
+        commercialized: med.comerc,
+        photos: med.fotos || [],
+        docs: med.docs || []
+      }));
+
+      const filtered = filterMedicinesByFullQuery(medicines, searchTerm);
+
+      // Guardar en caché (1h TTL)
+      await redisClient.setEx(cacheKey, CACHE_TTL, JSON.stringify(filtered));
+      
+      console.log(`✅ Cached ${filtered.length} OTC medicines for: ${searchTerm}`);
+      return filtered;
+    }
+
+    return [];
+  } catch (error) {
+    console.error('Error searching OTC medicines from CIMA:', error.message);
+    
+    // Si falla, intentar devolver datos cacheados aunque hayan expirado
+    try {
+      const staleData = await redisClient.get(cacheKey);
+      if (staleData) {
+        console.log('⚠️ Returning stale OTC cache data due to API error');
+        return JSON.parse(staleData);
+      }
+    } catch (cacheError) {
+      console.error('OTC cache fallback also failed:', cacheError);
+    }
+    
+    return [];
+  }
+}
+
 /**
 * Limpia el caché de búsquedas (útil para testing o mantenimiento)
 * @param {string} pattern - Patrón de claves a eliminar (ej: 'medicines:search:*')
@@ -0,0 +1,206 @@
+import axios from 'axios';
+import redisClient from './redis-client.js';
+
+// OFF API v3 (recommended) with fallback to v2 for search
+const OFF_API_BASE = 'https://world.openfoodfacts.org';
+const CACHE_TTL = 3600;
+const MAX_RETRIES = 2;
+const RETRY_DELAY_MS = 1000;
+
+// User-Agent is REQUIRED per OFF docs: AppName/Version (ContactEmail)
+const OFF_USER_AGENT = process.env.OFF_USER_AGENT || 'FarmaFinder/1.0 (https://github.com/farmafinder)';
+
+// Open Food Facts authentication (optional, for write operations)
+const OFF_USERNAME = process.env.OFF_USERNAME;
+const OFF_PASSWORD = process.env.OFF_PASSWORD;
+
+function getOffHeaders() {
+  return {
+    'User-Agent': OFF_USER_AGENT,
+  };
+}
+
+function getOffAuth() {
+  if (OFF_USERNAME && OFF_PASSWORD) {
+    return {
+      username: OFF_USERNAME,
+      password: OFF_PASSWORD,
+    };
+  }
+  return null;
+}
+
+function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms));
+}
+
+export function transformOFFProduct(offProduct) {
+  if (!offProduct || !offProduct._id || !offProduct.product_name) {
+    return null;
+  }
+
+  const categoriesTags = offProduct.categories_tags || [];
+  let category = 'baby_food';
+  for (const tag of categoriesTags) {
+    const lower = tag.toLowerCase();
+    if (lower.includes('baby-milk') || lower.includes('infant-milk')) {
+      category = 'baby_milk';
+      break;
+    }
+    if (lower.includes('baby-cereal') || lower.includes('infant-cereal')) {
+      category = 'baby_cereal';
+      break;
+    }
+  }
+
+  return {
+    id: offProduct._id,
+    source: 'openfoodfacts',
+    name: offProduct.product_name,
+    brand: offProduct.brands || '',
+    category,
+    image_url: offProduct.image_url || null,
+    nutriscore: offProduct.nutriscore_grade || null,
+    ingredients: offProduct.ingredients_text || null,
+    nova_group: offProduct.nova_group || null,
+    eco_score: offProduct.ecoscore_grade || null,
+  };
+}
+
+export async function searchBabyProducts(query) {
+  if (!query || query.trim().length < 2) {
+    return [];
+  }
+
+  const searchTerm = query.trim().toLowerCase();
+  const cacheKey = `off:baby:${searchTerm}`;
+
+  try {
+    const cachedData = await redisClient.get(cacheKey);
+    if (cachedData) {
+      console.log(`Cache hit for OFF search: ${searchTerm}`);
+      return JSON.parse(cachedData);
+    }
+
+    console.log(`Fetching from OFF API: ${searchTerm}`);
+    const headers = getOffHeaders();
+    console.log(`[OFF] User-Agent: ${headers['User-Agent']}`);
+    console.log(`[OFF] URL: ${OFF_API_BASE}/api/v2/search?brands_tags=${searchTerm}`);
+
+    let lastError;
+    for (let attempt = 0; attempt <= MAX_RETRIES; attempt++) {
+      try {
+        // Use v2 structured search with brand filter (more reliable than /cgi/search.pl)
+        // READ operations don't require auth per OFF docs, only User-Agent
+        const response = await axios.get(`${OFF_API_BASE}/api/v2/search`, {
+          params: {
+            brands_tags: searchTerm,
+            page_size: 20,
+          },
+          headers,
+          timeout: 10000,
+          validateStatus: (status) => status === 200,
+        });
+
+        // Check if response is actually JSON (OFF sometimes returns HTML on error)
+        if (typeof response.data === 'string' || !response.data.products) {
+          console.warn(`[OFF] Invalid response for "${searchTerm}" (attempt ${attempt + 1}): API may be down`);
+          if (attempt < MAX_RETRIES) {
+            await sleep(RETRY_DELAY_MS * (attempt + 1));
+            continue;
+          }
+          return [];
+        }
+
+        const products = response.data.products
+          .map(transformOFFProduct)
+          .filter(Boolean);
+
+        // Only cache non-empty results to avoid caching API failures
+        if (products.length > 0) {
+          try {
+            await redisClient.setEx(cacheKey, CACHE_TTL, JSON.stringify(products));
+            console.log(`Cached ${products.length} OFF products for: ${searchTerm}`);
+          } catch (cacheErr) {
+            // cache write failed, still return the data
+          }
+        } else {
+          console.log(`[OFF] No products found for "${searchTerm}", not caching empty result`);
+        }
+        return products;
+      } catch (err) {
+        lastError = err;
+        console.warn(`[OFF] Request failed for "${searchTerm}" (attempt ${attempt + 1}): ${err.message}`);
+        if (attempt < MAX_RETRIES) {
+          await sleep(RETRY_DELAY_MS * (attempt + 1));
+        }
+      }
+    }
+
+    console.error(`[OFF] All retries failed for "${searchTerm}": ${lastError?.message}`);
+    return [];
+  } catch (error) {
+    console.error('Error searching baby products from OFF:', error.message);
+    return [];
+  }
+}
+
+export async function getBabyProductDetails(barcode) {
+  if (!barcode) {
+    return null;
+  }
+
+  const cacheKey = `off:product:${barcode}`;
+
+  try {
+    const cachedData = await redisClient.get(cacheKey);
+    if (cachedData) {
+      console.log(`Cache hit for OFF product: ${barcode}`);
+      return JSON.parse(cachedData);
+    }
+
+    console.log(`Fetching OFF product details: ${barcode}`);
+    const headers = getOffHeaders();
+    // Use v3 API (recommended) for product details
+    // READ operations don't require auth per OFF docs, only User-Agent
+    const response = await axios.get(`${OFF_API_BASE}/api/v3/product/${barcode}.json`, {
+      headers,
+      timeout: 10000,
+      validateStatus: (status) => status === 200,
+    });
+
+    if (response.data && response.data.product) {
+      const product = transformOFFProduct(response.data.product);
+
+      if (product) {
+        try {
+          await redisClient.setEx(cacheKey, CACHE_TTL, JSON.stringify(product));
+          console.log(`Cached OFF product: ${barcode}`);
+        } catch (cacheErr) {
+          // cache write failed, still return the data
+        }
+        return product;
+      }
+    }
+
+    return null;
+  } catch (error) {
+    console.error(`Error fetching OFF product ${barcode}:`, error.message);
+    return null;
+  }
+}
+
+export async function clearCache(pattern = 'off:*') {
+  try {
+    const keys = await redisClient.keys(pattern);
+    if (keys.length > 0) {
+      await redisClient.del(keys);
+      console.log(`Cleared ${keys.length} OFF cache entries`);
+      return keys.length;
+    }
+    return 0;
+  } catch (error) {
+    console.error('Error clearing OFF cache:', error);
+    return 0;
+  }
+}
@@ -19,7 +19,8 @@ import pinoHttp from 'pino-http';
 import multer from 'multer';
 import { createWorker } from 'tesseract.js';
 import { BarcodeDetector } from 'barcode-detector';
-import { searchMedicines, getMedicineDetails } from './cima-service.js';
+import { searchMedicines, getMedicineDetails, searchOTC } from './cima-service.js';
+import { searchBabyProducts, getBabyProductDetails } from './off-service.js';
 import { runFarmaciaWebhookImport, DEFAULT_FARMACIAS_WEBHOOK, importPharmaciesFromRows } from './farmacias-webhook-import.js';
 import { fetchPharmaciesExternal } from '../API/index.js';

@@ -96,11 +97,12 @@ const geocodeLimiter = rateLimit({ windowMs: 60_000, max: 10, standardHeaders: t
 const VAPID_PUBLIC_KEY = process.env.VAPID_PUBLIC_KEY || '';
 const VAPID_PRIVATE_KEY = process.env.VAPID_PRIVATE_KEY || '';
 const VAPID_SUBJECT = process.env.VAPID_SUBJECT || 'mailto:admin@example.com';
+const EXPO_ACCESS_TOKEN = process.env.EXPO_ACCESS_TOKEN || '';
 const PUSH_ENABLED = Boolean(VAPID_PUBLIC_KEY && VAPID_PRIVATE_KEY);
 if (PUSH_ENABLED) {
  webpush.setVapidDetails(VAPID_SUBJECT, VAPID_PUBLIC_KEY, VAPID_PRIVATE_KEY);
 } else if (process.env.NODE_ENV !== 'test') {
-  console.warn('[push] VAPID keys not configured — push notifications disabled');
+  console.warn('[push] VAPID keys not configured — web push disabled');
 }

 // Database setup
@@ -238,6 +240,38 @@ async function initDatabase() {
      await dbRun(`CREATE INDEX IF NOT EXISTS idx_pharmacy_medicine ON pharmacy_medicines(medicine_nregistro)`);
    }

+    // Create junction table for pharmacy-product relationships (CIMA / Open Food Facts)
+    if (pgPool) {
+      await pgPool.query(`
+        CREATE TABLE IF NOT EXISTS pharmacy_products (
+          id SERIAL PRIMARY KEY,
+          pharmacy_id INTEGER NOT NULL REFERENCES pharmacies(id),
+          product_source TEXT NOT NULL,
+          product_off_id TEXT NOT NULL,
+          product_name TEXT,
+          price REAL,
+          stock INTEGER DEFAULT 0,
+          UNIQUE(pharmacy_id, product_source, product_off_id)
+        )
+      `);
+      await pgPool.query(`CREATE INDEX IF NOT EXISTS idx_pharmacy_product ON pharmacy_products(product_source, product_off_id)`);
+    } else {
+      await dbRun(`
+        CREATE TABLE IF NOT EXISTS pharmacy_products (
+          id INTEGER PRIMARY KEY AUTOINCREMENT,
+          pharmacy_id INTEGER NOT NULL,
+          product_source TEXT NOT NULL,
+          product_off_id TEXT NOT NULL,
+          product_name TEXT,
+          price REAL,
+          stock INTEGER DEFAULT 0,
+          FOREIGN KEY (pharmacy_id) REFERENCES pharmacies(id),
+          UNIQUE(pharmacy_id, product_source, product_off_id)
+        )
+      `);
+      await dbRun(`CREATE INDEX IF NOT EXISTS idx_pharmacy_product ON pharmacy_products(product_source, product_off_id)`);
+    }
+
    // Create users table — PG when available, SQLite fallback
    if (pgPool) {
      await pgPool.query(`
@@ -313,6 +347,18 @@ async function initDatabase() {
      `);
      await pgPool.query(`CREATE INDEX IF NOT EXISTS idx_push_subs_pharm ON push_subscriptions_pharmacy(medicine_nregistro, pharmacy_id)`);
      await pgPool.query(`CREATE INDEX IF NOT EXISTS idx_push_subs_pharm_user ON push_subscriptions_pharmacy(user_id)`);
+
+      // Expo Push tokens (mobile)
+      await pgPool.query(`
+        CREATE TABLE IF NOT EXISTS expo_push_tokens (
+          id SERIAL PRIMARY KEY,
+          user_id INTEGER NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+          expo_token TEXT NOT NULL,
+          created_at TIMESTAMPTZ DEFAULT NOW(),
+          UNIQUE(user_id, expo_token)
+        )
+      `);
+      await pgPool.query(`CREATE INDEX IF NOT EXISTS idx_expo_push_tokens_user ON expo_push_tokens(user_id)`);
    } else {
      await dbRun(`
        CREATE TABLE IF NOT EXISTS push_subscriptions (
@@ -342,6 +388,18 @@ async function initDatabase() {
        )
      `);
      await dbRun(`CREATE INDEX IF NOT EXISTS idx_push_subs_pharm ON push_subscriptions_pharmacy(medicine_nregistro, pharmacy_id)`);
+
+      // Expo Push tokens (mobile)
+      await dbRun(`
+        CREATE TABLE IF NOT EXISTS expo_push_tokens (
+          id INTEGER PRIMARY KEY AUTOINCREMENT,
+          user_id INTEGER NOT NULL,
+          expo_token TEXT NOT NULL,
+          created_at DATETIME DEFAULT CURRENT_TIMESTAMP,
+          UNIQUE(user_id, expo_token)
+        )
+      `);
+      await dbRun(`CREATE INDEX IF NOT EXISTS idx_expo_push_tokens_user ON expo_push_tokens(user_id)`);
    }

 if (!pgPool) {
@@ -512,7 +570,8 @@ app.get('/api/medicines/:medicineId/pharmacies', async (req, res) => {
  try {
    const nregistro = req.params.medicineId; // Ahora es el nregistro de CIMA

-    const pharmacies = await userDbAll(`
+    // First try to get pharmacies with specific medicine data
+    let pharmacies = await userDbAll(`
      SELECT
        p.id,
        p.name,
@@ -529,6 +588,24 @@ app.get('/api/medicines/:medicineId/pharmacies', async (req, res) => {
      ORDER BY p.name
    `, [nregistro]);

+    // If no specific links exist, return all pharmacies as potential sellers
+    if (pharmacies.length === 0) {
+      pharmacies = await userDbAll(`
+        SELECT
+          p.id,
+          p.name,
+          p.address,
+          p.phone,
+        p.latitude,
+        p.longitude,
+        p.opening_hours,
+        NULL as price,
+        0 as stock
+      FROM pharmacies p
+      ORDER BY p.name
+      `);
+    }
+
    res.json(pharmacies);
  } catch (error) {
    console.error('Error fetching pharmacies:', error);
@@ -554,6 +631,104 @@ app.get('/api/medicines/:medicineId', async (req, res) => {
  }
 });

+// ========== UNIFIED PRODUCT SEARCH ==========
+
+app.get('/api/products/search', searchLimiter, async (req, res) => {
+  try {
+    const { q } = req.query;
+    if (!q || q.trim().length < 2) {
+      return res.json({ results: [], total: 0 });
+    }
+    const searchTerm = q.trim();
+    const [cimaResults, offResults] = await Promise.allSettled([
+      searchOTC(searchTerm),
+      searchBabyProducts(searchTerm)
+    ]);
+    const cimaProducts = cimaResults.status === 'fulfilled' ? cimaResults.value : [];
+    const offProducts = offResults.status === 'fulfilled' ? offResults.value : [];
+    const allProducts = [...cimaProducts, ...offProducts]
+      .sort((a, b) => a.name.localeCompare(b.name));
+    res.json({
+      results: allProducts,
+      total: allProducts.length,
+      sources: { cima: cimaProducts.length, openfoodfacts: offProducts.length }
+    });
+  } catch (err) {
+    console.error('[Products] Search error:', err);
+    res.status(500).json({ error: 'Error searching products' });
+  }
+});
+
+app.get('/api/products/:source/:id', async (req, res) => {
+  try {
+    const { source, id } = req.params;
+    if (source === 'cima') {
+      const product = await getMedicineDetails(id);
+      if (!product) return res.status(404).json({ error: 'Product not found' });
+      return res.json({ ...product, source: 'cima', category: 'otc' });
+    }
+    if (source === 'openfoodfacts') {
+      const product = await getBabyProductDetails(id);
+      if (!product) return res.status(404).json({ error: 'Product not found' });
+      return res.json(product);
+    }
+    res.status(400).json({ error: 'Invalid source' });
+  } catch (err) {
+    console.error('[Products] Detail error:', err);
+    res.status(500).json({ error: 'Error fetching product details' });
+  }
+});
+
+// Get pharmacies that sell a specific product (by source and product ID)
+app.get('/api/products/:source/:productId/pharmacies', async (req, res) => {
+  try {
+    const { source, productId } = req.params;
+
+    if (source !== 'cima' && source !== 'openfoodfacts') {
+      return res.status(400).json({ error: 'Invalid source' });
+    }
+
+    let pharmacies = await userDbAll(`
+      SELECT
+        p.id,
+        p.name,
+        p.address,
+        p.phone,
+        p.latitude,
+        p.longitude,
+        p.opening_hours,
+        pp.price,
+        pp.stock
+      FROM pharmacies p
+      INNER JOIN pharmacy_products pp ON p.id = pp.pharmacy_id
+      WHERE pp.product_source = ? AND pp.product_off_id = ?
+      ORDER BY p.name
+    `, [source, productId]);
+
+    if (pharmacies.length === 0) {
+      pharmacies = await userDbAll(`
+        SELECT
+          p.id,
+          p.name,
+          p.address,
+          p.phone,
+          p.latitude,
+          p.longitude,
+          p.opening_hours,
+          NULL as price,
+          0 as stock
+        FROM pharmacies p
+        ORDER BY p.name
+      `);
+    }
+
+    res.json(pharmacies);
+  } catch (error) {
+    console.error('Error fetching pharmacies for product:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
+
 // ========== AUTHENTICATION MIDDLEWARE ==========

 // Middleware to check if user is authenticated
@@ -1587,10 +1762,9 @@ app.delete('/api/admin/pharmacies/:id', requireAdmin, async (req, res) => {
  try {
    const pharmacyId = parseInt(req.params.id);

-    // Delete related pharmacy_medicines first
+    // Delete related pharmacy_medicines and pharmacy_products first
    await userDbRun('DELETE FROM pharmacy_medicines WHERE pharmacy_id = ?', [pharmacyId]);
-    
-    // Delete the pharmacy
+    await userDbRun('DELETE FROM pharmacy_products WHERE pharmacy_id = ?', [pharmacyId]);
    await userDbRun('DELETE FROM pharmacies WHERE id = ?', [pharmacyId]);

    res.json({ message: 'Pharmacy deleted successfully' });
@@ -1808,6 +1982,115 @@ app.delete('/api/admin/pharmacy-medicines/:id', requireAdmin, async (req, res) =
  }
 });

+// ========== PHARMACY-PRODUCT ADMIN ROUTES ==========
+
+// List products for a specific pharmacy
+app.get('/api/admin/pharmacies/:pharmacyId/products', requireAdmin, async (req, res) => {
+  try {
+    const pharmacyId = parseInt(req.params.pharmacyId);
+
+    const products = await userDbAll(`
+      SELECT
+        pp.id,
+        pp.pharmacy_id,
+        pp.product_source,
+        pp.product_off_id,
+        pp.product_name,
+        pp.price,
+        pp.stock
+      FROM pharmacy_products pp
+      WHERE pp.pharmacy_id = ?
+      ORDER BY pp.product_name
+    `, [pharmacyId]);
+
+    res.json(products);
+  } catch (error) {
+    console.error('Error fetching pharmacy products:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
+
+// Add/upsert a product-pharmacy link
+app.post('/api/admin/pharmacy-products', requireAdmin, async (req, res) => {
+  try {
+    const { pharmacy_id, product_source, product_off_id, product_name, price, stock } = req.body;
+
+    if (!pharmacy_id || !product_source || !product_off_id) {
+      return res.status(400).json({ error: 'pharmacy_id, product_source, and product_off_id are required' });
+    }
+
+    if (product_source !== 'cima' && product_source !== 'openfoodfacts') {
+      return res.status(400).json({ error: 'product_source must be "cima" or "openfoodfacts"' });
+    }
+
+    const existing = await userDbGet(
+      'SELECT * FROM pharmacy_products WHERE pharmacy_id = ? AND product_source = ? AND product_off_id = ?',
+      [pharmacy_id, product_source, product_off_id]
+    );
+
+    if (existing) {
+      await userDbRun(
+        'UPDATE pharmacy_products SET product_name = ?, price = ?, stock = ? WHERE pharmacy_id = ? AND product_source = ? AND product_off_id = ?',
+        [product_name || null, price || null, stock || 0, pharmacy_id, product_source, product_off_id]
+      );
+    } else {
+      await userDbRun(
+        'INSERT INTO pharmacy_products (pharmacy_id, product_source, product_off_id, product_name, price, stock) VALUES (?, ?, ?, ?, ?, ?)',
+        [pharmacy_id, product_source, product_off_id, product_name || null, price || null, stock || 0]
+      );
+    }
+
+    const relationship = await userDbGet(
+      'SELECT * FROM pharmacy_products WHERE pharmacy_id = ? AND product_source = ? AND product_off_id = ?',
+      [pharmacy_id, product_source, product_off_id]
+    );
+
+    res.status(201).json(relationship);
+  } catch (error) {
+    console.error('Error adding pharmacy product:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
+
+// Update price/stock for a pharmacy-product link
+app.put('/api/admin/pharmacy-products/:id', requireAdmin, async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    const { price, stock } = req.body;
+
+    await userDbRun(
+      'UPDATE pharmacy_products SET price = ?, stock = ? WHERE id = ?',
+      [price || null, stock || 0, id]
+    );
+
+    const updated = await userDbGet(
+      'SELECT * FROM pharmacy_products WHERE id = ?',
+      [id]
+    );
+
+    if (!updated) {
+      return res.status(404).json({ error: 'Relationship not found' });
+    }
+
+    res.json(updated);
+  } catch (error) {
+    console.error('Error updating pharmacy product:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
+
+// Delete a pharmacy-product link
+app.delete('/api/admin/pharmacy-products/:id', requireAdmin, async (req, res) => {
+  try {
+    const id = parseInt(req.params.id);
+    await userDbRun('DELETE FROM pharmacy_products WHERE id = ?', [id]);
+    res.json({ message: 'Product removed from pharmacy successfully' });
+  } catch (error) {
+    console.error('Error deleting pharmacy product:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
+
 // Push notifications

 app.get('/api/notifications/vapid-public-key', (req, res) => {
@@ -1900,6 +2183,101 @@ app.delete('/api/notifications/unsubscribe', requireAuth, async (req, res) => {
  }
 });

+// Expo Push tokens (mobile app)
+
+app.post('/api/notifications/expo-register', requireAuth, async (req, res) => {
+  try {
+    const { token, medicine_nregistro, medicine_name, pharmacy_id } = req.body || {};
+    const userId = req.session.userId;
+    if (!token) {
+      return res.status(400).json({ error: 'expo token is required' });
+    }
+
+    // Upsert the token for this user
+    const existing = await userDbGet(
+      'SELECT id FROM expo_push_tokens WHERE user_id = ? AND expo_token = ?',
+      [userId, token]
+    );
+    if (!existing) {
+      await userDbRun(
+        'INSERT INTO expo_push_tokens (user_id, expo_token) VALUES (?, ?)',
+        [userId, token]
+      );
+    }
+
+    // Also store the medicine subscription (reuse existing tables with expo prefix for endpoint)
+    if (medicine_nregistro) {
+      const expoEndpoint = `expo://${token}`;
+      if (pharmacy_id) {
+        const existingSub = await userDbGet(
+          'SELECT id FROM push_subscriptions_pharmacy WHERE user_id = ? AND medicine_nregistro = ? AND pharmacy_id = ? AND endpoint = ?',
+          [userId, medicine_nregistro, pharmacy_id, expoEndpoint]
+        );
+        if (!existingSub) {
+          await userDbRun(
+            'INSERT INTO push_subscriptions_pharmacy (user_id, medicine_nregistro, medicine_name, pharmacy_id, endpoint, p256dh, auth) VALUES (?, ?, ?, ?, ?, ?, ?)',
+            [userId, medicine_nregistro, medicine_name || null, pharmacy_id, expoEndpoint, '', '']
+          );
+        }
+      } else {
+        const existingSub = await userDbGet(
+          'SELECT id FROM push_subscriptions WHERE user_id = ? AND medicine_nregistro = ? AND endpoint = ?',
+          [userId, medicine_nregistro, expoEndpoint]
+        );
+        if (!existingSub) {
+          await userDbRun(
+            'INSERT INTO push_subscriptions (user_id, medicine_nregistro, medicine_name, endpoint, p256dh, auth) VALUES (?, ?, ?, ?, ?, ?)',
+            [userId, medicine_nregistro, medicine_name || null, expoEndpoint, '', '']
+          );
+        }
+      }
+    }
+
+    res.status(201).json({ ok: true });
+  } catch (error) {
+    console.error('Error registering Expo push token:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
+
+app.delete('/api/notifications/expo-unregister', requireAuth, async (req, res) => {
+  try {
+    const { medicine_nregistro, pharmacy_id } = req.body || {};
+    const userId = req.session.userId;
+
+    // Get all expo tokens for this user to find the endpoints
+    const tokens = await userDbAll(
+      'SELECT expo_token FROM expo_push_tokens WHERE user_id = ?',
+      [userId]
+    );
+
+    for (const t of tokens || []) {
+      const expoEndpoint = `expo://${t.expo_token}`;
+      if (pharmacy_id && medicine_nregistro) {
+        await userDbRun(
+          'DELETE FROM push_subscriptions_pharmacy WHERE user_id = ? AND medicine_nregistro = ? AND pharmacy_id = ? AND endpoint = ?',
+          [userId, medicine_nregistro, pharmacy_id, expoEndpoint]
+        );
+      } else if (medicine_nregistro) {
+        await userDbRun(
+          'DELETE FROM push_subscriptions WHERE user_id = ? AND medicine_nregistro = ? AND endpoint = ?',
+          [userId, medicine_nregistro, expoEndpoint]
+        );
+      }
+    }
+
+    // If no medicine specified, remove the token entirely
+    if (!medicine_nregistro) {
+      await userDbRun('DELETE FROM expo_push_tokens WHERE user_id = ?', [userId]);
+    }
+
+    res.status(204).end();
+  } catch (error) {
+    console.error('Error unregistering Expo push token:', error);
+    res.status(500).json({ error: 'Internal server error' });
+  }
+});
+
 // List the current user's saved notifications across all their devices
 app.get('/api/notifications/mine', requireAuth, async (req, res) => {
  try {
@@ -1960,7 +2338,7 @@ app.delete('/api/notifications/mine', requireAuth, async (req, res) => {
 });

 async function sendPushForMedicine({ medicine_nregistro, medicine_name, pharmacy }) {
-  if (!PUSH_ENABLED) return { sent: 0, failed: 0, pruned: 0 };
+  if (!PUSH_ENABLED && !EXPO_ACCESS_TOKEN) return { sent: 0, failed: 0, pruned: 0 };

  const globalSubs = await userDbAll(
    'SELECT id, endpoint, p256dh, auth FROM push_subscriptions WHERE medicine_nregistro = ?',
@@ -1971,7 +2349,7 @@ async function sendPushForMedicine({ medicine_nregistro, medicine_name, pharmacy
    [medicine_nregistro, pharmacy.id]
  ) : [];

-  // Deduplicate by endpoint; pharmacy-specific overrides global so one notification per browser
+  // Deduplicate by endpoint; pharmacy-specific overrides global so one notification per device
  const endpointMap = new Map();
  for (const sub of (globalSubs || [])) endpointMap.set(sub.endpoint, { ...sub, _pharmSub: false });
  for (const sub of (pharmacySubs || [])) endpointMap.set(sub.endpoint, { ...sub, _pharmSub: true });
@@ -1979,43 +2357,129 @@ async function sendPushForMedicine({ medicine_nregistro, medicine_name, pharmacy

  if (subs.length === 0) return { sent: 0, failed: 0, pruned: 0 };

-  const payload = JSON.stringify({
-    title: 'Medicine available',
-    body: `${medicine_name || medicine_nregistro} is now available at ${pharmacy?.name || 'a pharmacy near you'}`,
-    url: `/?nregistro=${encodeURIComponent(medicine_nregistro)}`,
-    medicine_nregistro,
-    medicine_name: medicine_name || null,
-    pharmacy_id: pharmacy?.id ?? null,
-    pharmacy_name: pharmacy?.name ?? null,
-  });
+  // Split into web push (VAPID) and Expo push (mobile)
+  const webSubs = [];
+  const expoTokens = [];
+  for (const sub of subs) {
+    if (sub.endpoint?.startsWith('expo://')) {
+      const token = sub.endpoint.replace('expo://', '');
+      if (!expoTokens.includes(token)) expoTokens.push(token);
+    } else {
+      webSubs.push(sub);
+    }
+  }
+
+  const title = 'Medicamento disponible';
+  const body = `${medicine_name || medicine_nregistro} está disponible en ${pharmacy?.name || 'una farmacia cercana'}`;
+  const url = `/?nregistro=${encodeURIComponent(medicine_nregistro)}`;

  let sent = 0;
  let failed = 0;
  let pruned = 0;

-  await Promise.all(subs.map(async (sub) => {
-    try {
-      await webpush.sendNotification(
-        { endpoint: sub.endpoint, keys: { p256dh: sub.p256dh, auth: sub.auth } },
-        payload
-      );
-      sent++;
-    } catch (err) {
-      failed++;
-      const status = err?.statusCode;
-      if (status === 404 || status === 410) {
-        try {
-          const deleteQuery = sub._pharmSub
-            ? 'DELETE FROM push_subscriptions_pharmacy WHERE id = ?'
-            : 'DELETE FROM push_subscriptions WHERE id = ?';
-          await userDbRun(deleteQuery, [sub.id]);
-          pruned++;
-        } catch {}
-      } else {
-        console.error('[push] send failed:', status, err?.body || err?.message);
+  // Web Push via VAPID
+  if (PUSH_ENABLED && webSubs.length > 0) {
+    const payload = JSON.stringify({
+      title,
+      body,
+      url,
+      medicine_nregistro,
+      medicine_name: medicine_name || null,
+      pharmacy_id: pharmacy?.id ?? null,
+      pharmacy_name: pharmacy?.name ?? null,
+    });
+
+    await Promise.all(webSubs.map(async (sub) => {
+      try {
+        await webpush.sendNotification(
+          { endpoint: sub.endpoint, keys: { p256dh: sub.p256dh, auth: sub.auth } },
+          payload
+        );
+        sent++;
+      } catch (err) {
+        failed++;
+        const status = err?.statusCode;
+        if (status === 404 || status === 410) {
+          try {
+            const deleteQuery = sub._pharmSub
+              ? 'DELETE FROM push_subscriptions_pharmacy WHERE id = ?'
+              : 'DELETE FROM push_subscriptions WHERE id = ?';
+            await userDbRun(deleteQuery, [sub.id]);
+            pruned++;
+          } catch {}
+        } else {
+          console.error('[push] web send failed:', status, err?.body || err?.message);
+        }
+      }
+    }));
+  }
+
+  // Expo Push (mobile)
+  if (EXPO_ACCESS_TOKEN && expoTokens.length > 0) {
+    const chunks = [];
+    for (let i = 0; i < expoTokens.length; i += 100) {
+      chunks.push(expoTokens.slice(i, i + 100));
+    }
+
+    for (const chunk of chunks) {
+      const messages = chunk.map((token) => ({
+        to: token,
+        sound: 'default',
+        title,
+        body,
+        data: {
+          url,
+          medicine_nregistro,
+          medicine_name: medicine_name || null,
+          pharmacy_id: pharmacy?.id ?? null,
+          pharmacy_name: pharmacy?.name ?? null,
+        },
+      }));
+
+      try {
+        const response = await fetch('https://exp.host/--/api/v2/push/send', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            'Authorization': `Bearer ${EXPO_ACCESS_TOKEN}`,
+          },
+          body: JSON.stringify(messages),
+        });
+
+        if (response.ok) {
+          const result = await response.json();
+          // Handle individual ticket errors
+          if (result.data) {
+            for (const ticket of result.data) {
+              if (ticket.status === 'ok') {
+                sent++;
+              } else {
+                failed++;
+                // Prune invalid tokens
+                if (ticket.message?.includes('InvalidCredentials') || ticket.message?.includes('DeviceNotRegistered')) {
+                  const expoEndpoint = `expo://${ticket.id || ''}`;
+                  try {
+                    await userDbRun('DELETE FROM push_subscriptions WHERE endpoint = ?', [expoEndpoint]);
+                    await userDbRun('DELETE FROM push_subscriptions_pharmacy WHERE endpoint = ?', [expoEndpoint]);
+                    await userDbRun('DELETE FROM expo_push_tokens WHERE expo_token = ?', [ticket.id || '']);
+                    pruned++;
+                  } catch {}
+                }
+              }
+            }
+          } else {
+            sent += chunk.length;
+          }
+        } else {
+          failed += chunk.length;
+          console.error('[push] expo send failed:', response.status);
+        }
+      } catch (err) {
+        failed += chunk.length;
+        console.error('[push] expo send error:', err.message);
      }
    }
-  }));
+  }

  return { sent, failed, pruned };
 }
@@ -5,7 +5,7 @@
    "version": "1.0.0",
    "orientation": "portrait",
    "icon": "./assets/icon.png",
-    "userInterfaceStyle": "light",
+    "userInterfaceStyle": "automatic",
    "newArchEnabled": true,
    "splash": {
      "image": "./assets/splash.png",
@@ -25,12 +25,29 @@
        "backgroundColor": "#007AFF"
      },
      "package": "com.farmafinder.app",
-      "googleServicesFile": "./google-services.json"
+      "googleServicesFile": "./google-services.json",
+      "config": {
+        "googleMaps": {
+          "apiKey": ""
+        }
+      }
    },
    "plugins": [
      "expo-router",
      ["expo-camera", {"cameraPermission": "Allow FarmaFinder to access your camera for scanning barcodes"}],
-      ["expo-notifications", {"icon": "./assets/notification-icon.png", "color": "#007AFF"}]
+      ["expo-notifications", {"icon": "./assets/notification-icon.png", "color": "#007AFF"}],
+      [
+        "react-native-maps",
+        {
+          "locationAlwaysAndWhenInUsePermission": "Allow FarmaFinder to use your location to find nearby pharmacies."
+        }
+      ],
+      [
+        "expo-location",
+        {
+          "locationAlwaysAndWhenInUsePermission": "Allow FarmaFinder to use your location to find nearby pharmacies."
+        }
+      ]
    ],
    "scheme": "farmafinder",
    "extra": {
@@ -1,12 +1,16 @@
 import { Tabs } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
-import { View, StyleSheet, Platform, useWindowDimensions } from 'react-native';
+import { View, StyleSheet, useWindowDimensions } from 'react-native';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
-import { colors, shadows } from '../../constants/theme';
+import { useThemeContext } from '../../components/ThemeProvider';
+import { shadows } from '../../constants/theme';

 const TABLET_MIN_WIDTH = 768;

-function ScanIcon({ color, size }: { color: string; size: number }) {
+// Standard Android navigation bar heights in dp
+const ANDROID_NAV_BAR_HEIGHT = 48;
+
+function ScanIcon({ size }: { size: number }) {
  return (
    <View style={styles.fabContainer}>
      <View style={[styles.fab, shadows.scanButton]}>
@@ -20,7 +24,9 @@ export default function TabLayout() {
  const insets = useSafeAreaInsets();
  const { width } = useWindowDimensions();
  const isTablet = width >= TABLET_MIN_WIDTH;
-  const bottomPadding = Platform.OS === 'ios' ? insets.bottom : 8;
+  const { colors } = useThemeContext();
+  // Use safe area insets if available, otherwise use standard Android nav bar height
+  const bottomPadding = insets.bottom > 0 ? insets.bottom : ANDROID_NAV_BAR_HEIGHT;

  return (
    <Tabs
@@ -28,24 +34,31 @@ export default function TabLayout() {
        tabBarActiveTintColor: colors.primary,
        tabBarInactiveTintColor: colors.textSecondary,
        tabBarStyle: {
-          ...(isTablet ? styles.tabBarTablet : styles.tabBar),
+          ...(isTablet ? styles.tabBarTablet : {}),
+          backgroundColor: colors.card,
+          borderTopColor: colors.border,
+          paddingTop: isTablet ? 10 : 8,
          height: (isTablet ? 64 : 60) + bottomPadding,
          paddingBottom: bottomPadding,
+          ...(isTablet ? { paddingHorizontal: 24 } : {}),
        },
        tabBarLabelStyle: {
-          ...styles.tabBarLabel,
-          ...(isTablet ? styles.tabBarLabelTablet : {}),
+          fontSize: isTablet ? 13 : 11,
+          fontWeight: '500',
+        },
+        headerStyle: {
+          backgroundColor: colors.card,
        },
-        headerStyle: styles.header,
        headerTintColor: colors.primary,
        headerTitleStyle: {
-          ...styles.headerTitle,
-          ...(isTablet ? styles.headerTitleTablet : {}),
+          color: colors.text,
+          fontWeight: '600',
+          fontSize: isTablet ? 20 : 17,
        },
      }}
    >
      <Tabs.Screen
-        name="home"
+        name="index"
        options={{
          title: 'Inicio',
          tabBarIcon: ({ color, size }) => (
@@ -54,7 +67,7 @@ export default function TabLayout() {
        }}
      />
      <Tabs.Screen
-        name="index"
+        name="search"
        options={{
          title: 'Buscar',
          tabBarIcon: ({ color, size }) => (
@@ -99,40 +112,6 @@ export default function TabLayout() {
 }

 const styles = StyleSheet.create({
-  tabBar: {
-    backgroundColor: colors.card,
-    borderTopColor: colors.border,
-    paddingTop: 8,
-  },
-  tabBarTablet: {
-    backgroundColor: colors.card,
-    borderTopColor: colors.border,
-    paddingTop: 10,
-    paddingHorizontal: 24,
-  },
-  tabBarLabel: {
-    fontSize: 11,
-    fontWeight: '500',
-  },
-  tabBarLabelTablet: {
-    fontSize: 13,
-  },
-  header: {
-    backgroundColor: colors.card,
-    shadowColor: '#000',
-    shadowOffset: { width: 0, height: 1 },
-    shadowOpacity: 0.05,
-    shadowRadius: 4,
-    elevation: 1,
-  },
-  headerTitle: {
-    color: colors.text,
-    fontWeight: '600',
-    fontSize: 17,
-  },
-  headerTitleTablet: {
-    fontSize: 20,
-  },
  fabContainer: {
    position: 'absolute',
    top: -16,
@@ -142,7 +121,7 @@ const styles = StyleSheet.create({
    width: 52,
    height: 52,
    borderRadius: 26,
-    backgroundColor: colors.scanButton,
+    backgroundColor: '#2b5bb5',
    alignItems: 'center',
    justifyContent: 'center',
  },
@@ -1,7 +1,10 @@
 import React, { useEffect, useState } from 'react';
 import { View, Text, StyleSheet, FlatList, TouchableOpacity, Alert, useWindowDimensions } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import { colors, spacing, borderRadius, shadows } from '../../constants/theme';
+import { useRouter } from 'expo-router';
+import { useThemeContext } from '../../components/ThemeProvider';
+import { useAuth } from '../../hooks/useAuth';
+import { spacing, borderRadius, shadows } from '../../constants/theme';
 import { LoadingSpinner } from '../../components/LoadingSpinner';
 import api from '../../services/api';

@@ -19,16 +22,23 @@ interface NotificationItem {
 }

 export default function AlertsScreen() {
+  const router = useRouter();
  const { width } = useWindowDimensions();
  const isTablet = width >= TABLET_MIN_WIDTH;
+  const { colors } = useThemeContext();
+  const { isAuthenticated, isLoading: authLoading } = useAuth();
  const [items, setItems] = useState<NotificationItem[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState<string | null>(null);
  const [deletingId, setDeletingId] = useState<string | null>(null);

  useEffect(() => {
-    loadNotifications();
-  }, []);
+    if (!authLoading && isAuthenticated) {
+      loadNotifications();
+    } else if (!authLoading && !isAuthenticated) {
+      setIsLoading(false);
+    }
+  }, [authLoading, isAuthenticated]);

  async function loadNotifications() {
    setIsLoading(true);
@@ -81,33 +91,33 @@ export default function AlertsScreen() {
  function renderItem({ item }: { item: NotificationItem }) {
    const key = `${item.scope}:${item.id}`;
    return (
-      <View style={styles.item}>
+      <View style={[styles.item, { backgroundColor: colors.card }]}>
        <View style={styles.itemContent}>
-          <Text style={styles.itemName} numberOfLines={2}>
+          <Text style={[styles.itemName, { color: colors.text }]} numberOfLines={2}>
            {item.medicine_name || item.medicine_nregistro}
          </Text>
          <View style={styles.itemMeta}>
-            <View style={styles.chip}>
+            <View style={[styles.chip, { backgroundColor: colors.primaryContainer }]}>
              <Ionicons
                name={item.scope === 'pharmacy' ? 'medical' : 'globe'}
                size={12}
                color={colors.primary}
              />
-              <Text style={styles.chipText}>
+              <Text style={[styles.chipText, { color: colors.onPrimaryContainer }]}>
                {item.scope === 'pharmacy'
                  ? item.pharmacy_name || `Farmacia #${item.pharmacy_id}`
                  : 'Cualquier farmacia'}
              </Text>
            </View>
            {item.pharmacy_address && (
-              <Text style={styles.itemAddress} numberOfLines={1}>
+              <Text style={[styles.itemAddress, { color: colors.textSecondary }]} numberOfLines={1}>
                {item.pharmacy_address}
              </Text>
            )}
          </View>
        </View>
        <TouchableOpacity
-          style={styles.deleteButton}
+          style={[styles.deleteButton, { backgroundColor: colors.dangerContainer }]}
          onPress={() => handleDelete(item)}
          disabled={deletingId === key}
        >
@@ -121,24 +131,42 @@ export default function AlertsScreen() {
    );
  }

-  if (isLoading) {
+  if (isLoading || authLoading) {
    return <LoadingSpinner message="Cargando notificaciones..." />;
  }

+  if (!isAuthenticated) {
+    return (
+      <View style={[styles.container, styles.centered, { backgroundColor: colors.background }]}>
+        <Ionicons name="lock-closed-outline" size={64} color={colors.border} />
+        <Text style={[styles.loginTitle, { color: colors.text }]}>Inicia sesión para continuar</Text>
+        <Text style={[styles.loginSubtitle, { color: colors.textSecondary }]}>
+          Necesitas estar autenticado para ver tus notificaciones
+        </Text>
+        <TouchableOpacity
+          style={[styles.loginButton, { backgroundColor: colors.primary }]}
+          onPress={() => router.push('/auth/login')}
+        >
+          <Text style={[styles.loginButtonText, { color: colors.onPrimaryContainer }]}>Iniciar Sesión</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+
  return (
-    <View style={styles.container}>
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <View style={[styles.header, isTablet && styles.headerTablet]}>
-        <Text style={[styles.title, isTablet && styles.titleTablet]}>Notificaciones Guardadas</Text>
-        <Text style={[styles.subtitle, isTablet && styles.subtitleTablet]}>
+        <Text style={[styles.title, isTablet && styles.titleTablet, { color: colors.text }]}>Notificaciones Guardadas</Text>
+        <Text style={[styles.subtitle, isTablet && styles.subtitleTablet, { color: colors.textSecondary }]}>
          Recibe avisos cuando medicamentos sin stock se repongan
        </Text>
      </View>

      {error && (
-        <View style={[styles.errorContainer, isTablet && styles.errorContainerTablet]}>
-          <Text style={styles.errorText}>{error}</Text>
+        <View style={[styles.errorContainer, isTablet && styles.errorContainerTablet, { backgroundColor: colors.dangerContainer }]}>
+          <Text style={[styles.errorText, { color: colors.danger }]}>{error}</Text>
          <TouchableOpacity onPress={loadNotifications} style={styles.retryButton}>
-            <Text style={styles.retryText}>Reintentar</Text>
+            <Text style={[styles.retryText, { color: colors.primary }]}>Reintentar</Text>
          </TouchableOpacity>
        </View>
      )}
@@ -146,8 +174,8 @@ export default function AlertsScreen() {
      {!error && items.length === 0 && (
        <View style={styles.emptyContainer}>
          <Ionicons name="notifications-off-outline" size={isTablet ? 80 : 64} color={colors.border} />
-          <Text style={[styles.emptyTitle, isTablet && styles.emptyTitleTablet]}>Sin notificaciones</Text>
-          <Text style={[styles.emptyText, isTablet && styles.emptyTextTablet]}>
+          <Text style={[styles.emptyTitle, isTablet && styles.emptyTitleTablet, { color: colors.text }]}>Sin notificaciones</Text>
+          <Text style={[styles.emptyText, isTablet && styles.emptyTextTablet, { color: colors.textSecondary }]}>
            Toca la campana en una farmacia sin stock para recibir notificaciones cuando se reponga.
          </Text>
        </View>
@@ -169,7 +197,32 @@ export default function AlertsScreen() {
 const styles = StyleSheet.create({
  container: {
    flex: 1,
-    backgroundColor: colors.background,
+  },
+  centered: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: spacing.xl,
+    gap: spacing.md,
+  },
+  loginTitle: {
+    fontSize: 20,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  loginSubtitle: {
+    fontSize: 14,
+    textAlign: 'center',
+    lineHeight: 20,
+  },
+  loginButton: {
+    paddingHorizontal: spacing.lg,
+    paddingVertical: spacing.md,
+    borderRadius: borderRadius.lg,
+    marginTop: spacing.sm,
+  },
+  loginButtonText: {
+    fontSize: 16,
+    fontWeight: '600',
  },
  header: {
    paddingHorizontal: spacing.lg,
@@ -184,14 +237,12 @@ const styles = StyleSheet.create({
  title: {
    fontSize: 22,
    fontWeight: 'bold',
-    color: colors.text,
  },
  titleTablet: {
    fontSize: 28,
  },
  subtitle: {
    fontSize: 14,
-    color: colors.textSecondary,
    marginTop: spacing.xs,
    lineHeight: 20,
  },
@@ -212,7 +263,6 @@ const styles = StyleSheet.create({
  item: {
    flexDirection: 'row',
    alignItems: 'center',
-    backgroundColor: colors.card,
    borderRadius: borderRadius.lg,
    padding: spacing.md,
    ...shadows.card,
@@ -224,7 +274,6 @@ const styles = StyleSheet.create({
  itemName: {
    fontSize: 16,
    fontWeight: '600',
-    color: colors.text,
    lineHeight: 22,
  },
  itemMeta: {
@@ -234,7 +283,6 @@ const styles = StyleSheet.create({
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.xs,
-    backgroundColor: colors.primaryContainer,
    borderRadius: borderRadius.full,
    paddingHorizontal: spacing.sm,
    paddingVertical: 3,
@@ -243,17 +291,14 @@ const styles = StyleSheet.create({
  chipText: {
    fontSize: 12,
    fontWeight: '600',
-    color: colors.onPrimaryContainer,
  },
  itemAddress: {
    fontSize: 12,
-    color: colors.textSecondary,
  },
  deleteButton: {
    width: 36,
    height: 36,
    borderRadius: 18,
-    backgroundColor: colors.dangerContainer,
    alignItems: 'center',
    justifyContent: 'center',
    marginLeft: spacing.sm,
@@ -261,7 +306,6 @@ const styles = StyleSheet.create({
  errorContainer: {
    margin: spacing.lg,
    padding: spacing.md,
-    backgroundColor: colors.dangerContainer,
    borderRadius: borderRadius.lg,
    alignItems: 'center',
    gap: spacing.sm,
@@ -272,7 +316,6 @@ const styles = StyleSheet.create({
  },
  errorText: {
    fontSize: 14,
-    color: colors.danger,
    textAlign: 'center',
  },
  retryButton: {
@@ -282,7 +325,6 @@ const styles = StyleSheet.create({
  retryText: {
    fontSize: 14,
    fontWeight: '600',
-    color: colors.primary,
  },
  emptyContainer: {
    flex: 1,
@@ -294,14 +336,12 @@ const styles = StyleSheet.create({
  emptyTitle: {
    fontSize: 18,
    fontWeight: '600',
-    color: colors.text,
  },
  emptyTitleTablet: {
    fontSize: 24,
  },
  emptyText: {
    fontSize: 14,
-    color: colors.textSecondary,
    textAlign: 'center',
    lineHeight: 20,
  },
@@ -1,166 +0,0 @@
-import React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, Image, useWindowDimensions } from 'react-native';
-import { Ionicons } from '@expo/vector-icons';
-import { useRouter } from 'expo-router';
-import { colors, spacing, borderRadius, shadows } from '../../constants/theme';
-
-const TABLET_MIN_WIDTH = 768;
-
-export default function HomeScreen() {
-  const router = useRouter();
-  const { width } = useWindowDimensions();
-  const isTablet = width >= TABLET_MIN_WIDTH;
-
-  return (
-    <View style={styles.container}>
-      <View style={[styles.hero, isTablet && styles.heroTablet]}>
-        <Image
-          source={require('../../assets/farmaclic_logo.png')}
-          style={[styles.logo, isTablet && styles.logoTablet]}
-          resizeMode="contain"
-        />
-        <Text style={[styles.brandName, isTablet && styles.brandNameTablet]}>FarmaClic</Text>
-        <Text style={[styles.description, isTablet && styles.descriptionTablet]}>
-          Encuentra tus medicamentos en farmacias cercanas
-        </Text>
-      </View>
-
-      <View style={[styles.cards, isTablet && styles.cardsTablet]}>
-        <TouchableOpacity
-          style={[styles.card, isTablet && styles.cardTablet]}
-          activeOpacity={0.85}
-          onPress={() => router.push('/(tabs)')}
-        >
-          <View style={[styles.cardIcon, styles.cardIconSearch]}>
-            <Ionicons name="search" size={isTablet ? 28 : 24} color={colors.onPrimaryContainer} />
-          </View>
-          <View style={styles.cardContent}>
-            <Text style={[styles.cardLabel, isTablet && styles.cardLabelTablet]}>Buscar Medicamento</Text>
-            <Ionicons name="chevron-forward" size={20} color={colors.onPrimaryContainer} style={{ opacity: 0.7 }} />
-          </View>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          style={[styles.card, styles.cardScan, isTablet && styles.cardTablet]}
-          activeOpacity={0.85}
-          onPress={() => router.push('/scanner')}
-        >
-          <View style={[styles.cardIcon, styles.cardIconScan]}>
-            <Ionicons name="scan" size={isTablet ? 28 : 24} color="#ffffff" />
-          </View>
-          <View style={styles.cardContent}>
-            <Text style={[styles.cardLabel, styles.cardLabelScan, isTablet && styles.cardLabelTablet]}>Escanear TSI</Text>
-            <Ionicons name="chevron-forward" size={20} color="#ffffff" style={{ opacity: 0.7 }} />
-          </View>
-        </TouchableOpacity>
-      </View>
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: colors.background,
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: spacing.lg,
-    gap: spacing.lg,
-  },
-  hero: {
-    alignItems: 'center',
-    gap: spacing.sm,
-    marginBottom: spacing.md,
-  },
-  heroTablet: {
-    marginBottom: spacing.xl,
-  },
-  logo: {
-    width: 120,
-    height: 120,
-    marginBottom: spacing.xs,
-  },
-  logoTablet: {
-    width: 160,
-    height: 160,
-  },
-  brandName: {
-    fontSize: 28,
-    fontWeight: 'bold',
-    color: colors.text,
-    letterSpacing: -0.5,
-  },
-  brandNameTablet: {
-    fontSize: 36,
-  },
-  description: {
-    fontSize: 16,
-    color: colors.textSecondary,
-    textAlign: 'center',
-    maxWidth: 260,
-    lineHeight: 24,
-  },
-  descriptionTablet: {
-    fontSize: 18,
-    maxWidth: 400,
-    lineHeight: 28,
-  },
-  cards: {
-    width: '100%',
-    maxWidth: 320,
-    gap: spacing.md,
-  },
-  cardsTablet: {
-    maxWidth: 480,
-  },
-  card: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: spacing.md,
-    backgroundColor: colors.primaryContainer,
-    borderRadius: borderRadius.lg,
-    padding: spacing.md,
-    minHeight: 64,
-    ...shadows.card,
-  },
-  cardTablet: {
-    padding: spacing.lg,
-    minHeight: 72,
-  },
-  cardScan: {
-    backgroundColor: colors.scanButton,
-  },
-  cardIcon: {
-    width: 48,
-    height: 48,
-    borderRadius: borderRadius.md,
-    backgroundColor: 'rgba(255, 255, 255, 0.2)',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-  },
-  cardIconSearch: {
-    backgroundColor: 'rgba(255, 255, 255, 0.3)',
-  },
-  cardIconScan: {
-    backgroundColor: 'rgba(255, 255, 255, 0.2)',
-  },
-  cardContent: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  cardLabel: {
-    fontSize: 18,
-    fontWeight: '700',
-    color: colors.onPrimaryContainer,
-    lineHeight: 24,
-  },
-  cardLabelTablet: {
-    fontSize: 20,
-  },
-  cardLabelScan: {
-    color: '#ffffff',
-  },
-});
@@ -1,15 +1,9 @@
-import React, { useState, useEffect } from 'react';
-import { View, FlatList, StyleSheet, Text, TouchableOpacity, useWindowDimensions } from 'react-native';
+import React from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, Image, useWindowDimensions } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { useRouter } from 'expo-router';
-import { SearchBar } from '../../components/SearchBar';
-import { MedicineCard } from '../../components/MedicineCard';
-import { LoadingSpinner } from '../../components/LoadingSpinner';
-import { useDebounce } from '../../hooks/useDebounce';
-import { searchMedicines } from '../../services/medicines';
-import { colors, spacing, borderRadius } from '../../constants/theme';
-import { Medicine } from '../../types';
-import { config } from '../../constants/config';
+import { useThemeContext } from '../../components/ThemeProvider';
+import { spacing, borderRadius, shadows } from '../../constants/theme';

 const TABLET_MIN_WIDTH = 768;

@@ -17,77 +11,51 @@ export default function HomeScreen() {
  const router = useRouter();
  const { width } = useWindowDimensions();
  const isTablet = width >= TABLET_MIN_WIDTH;
-  const [query, setQuery] = useState('');
-  const [results, setResults] = useState<Medicine[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-
-  const debouncedQuery = useDebounce(query, config.SEARCH_DEBOUNCE_MS);
-
-  useEffect(() => {
-    if (debouncedQuery.length < 2) {
-      setResults([]);
-      return;
-    }
-
-    const fetchResults = async () => {
-      setIsLoading(true);
-      setError(null);
-      try {
-        const data = await searchMedicines(debouncedQuery);
-        setResults(data);
-      } catch (err) {
-        setError('Error al buscar medicamentos');
-        console.error(err);
-      } finally {
-        setIsLoading(false);
-      }
-    };
-
-    fetchResults();
-  }, [debouncedQuery]);
-
-  const handleSearch = (searchQuery: string) => {
-    setQuery(searchQuery);
-  };
+  const { colors } = useThemeContext();

  return (
-    <View style={styles.container}>
-      <View style={[styles.searchContainer, isTablet && styles.searchContainerTablet]}>
-        <SearchBar
-          onSearch={handleSearch}
-          value={query}
-          onChangeText={setQuery}
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <View style={[styles.hero, isTablet && styles.heroTablet]}>
+        <Image
+          source={require('../../assets/farmaclic_logo.png')}
+          style={[styles.logo, isTablet && styles.logoTablet]}
+          resizeMode="contain"
        />
-        <TouchableOpacity
-          style={styles.scannerButton}
-          onPress={() => router.push('/scanner')}
-        >
-          <Ionicons name="scan" size={22} color="#ffffff" />
-        </TouchableOpacity>
+        <Text style={[styles.brandName, isTablet && styles.brandNameTablet, { color: colors.text }]}>FarmaClic</Text>
+        <Text style={[styles.description, isTablet && styles.descriptionTablet, { color: colors.textSecondary }]}>
+          Encuentra tus medicamentos en farmacias cercanas
+        </Text>
      </View>

-      {isLoading && <LoadingSpinner message="Buscando medicamentos..." />}
+      <View style={[styles.cards, isTablet && styles.cardsTablet]}>
+        <TouchableOpacity
+          style={[styles.card, isTablet && styles.cardTablet, { backgroundColor: colors.primaryContainer }]}
+          activeOpacity={0.85}
+          onPress={() => router.push('/(tabs)/search')}
+        >
+          <View style={[styles.cardIcon, styles.cardIconSearch]}>
+            <Ionicons name="search" size={isTablet ? 28 : 24} color={colors.onPrimaryContainer} />
+          </View>
+          <View style={styles.cardContent}>
+            <Text style={[styles.cardLabel, isTablet && styles.cardLabelTablet, { color: colors.onPrimaryContainer }]}>Buscar Medicamento</Text>
+            <Ionicons name="chevron-forward" size={20} color={colors.onPrimaryContainer} style={{ opacity: 0.7 }} />
+          </View>
+        </TouchableOpacity>

-      {error && (
-        <View style={[styles.errorContainer, isTablet && styles.errorContainerTablet]}>
-          <Text style={styles.errorText}>{error}</Text>
-        </View>
-      )}
-
-      {!isLoading && !error && results.length === 0 && query.length >= 2 && (
-        <View style={styles.emptyContainer}>
-          <Text style={styles.emptyText}>No se encontraron medicamentos</Text>
-        </View>
-      )}
-
-      <FlatList
-        data={results}
-        keyExtractor={(item) => item.nregistro}
-        renderItem={({ item }) => <MedicineCard medicine={item} />}
-        contentContainerStyle={[styles.list, isTablet && styles.listTablet]}
-        showsVerticalScrollIndicator={false}
-      />
+        <TouchableOpacity
+          style={[styles.card, styles.cardScan, isTablet && styles.cardTablet]}
+          activeOpacity={0.85}
+          onPress={() => router.push('/scanner')}
+        >
+          <View style={[styles.cardIcon, styles.cardIconScan]}>
+            <Ionicons name="scan" size={isTablet ? 28 : 24} color="#ffffff" />
+          </View>
+          <View style={styles.cardContent}>
+            <Text style={[styles.cardLabel, styles.cardLabelScan, isTablet && styles.cardLabelTablet]}>Escanear TSI</Text>
+            <Ionicons name="chevron-forward" size={20} color="#ffffff" style={{ opacity: 0.7 }} />
+          </View>
+        </TouchableOpacity>
+      </View>
    </View>
  );
 }
@@ -95,63 +63,101 @@ export default function HomeScreen() {
 const styles = StyleSheet.create({
  container: {
    flex: 1,
-    backgroundColor: colors.background,
-  },
-  searchContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: spacing.lg,
-    maxWidth: 480,
-    alignSelf: 'center',
-    width: '100%',
-  },
-  searchContainerTablet: {
-    maxWidth: 700,
-    alignSelf: 'center',
-    width: '100%',
-  },
-  scannerButton: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    backgroundColor: colors.scanButton,
    alignItems: 'center',
    justifyContent: 'center',
-    shadowColor: '#2b5bb5',
-    shadowOffset: { width: 0, height: 4 },
-    shadowOpacity: 0.3,
-    shadowRadius: 12,
-    elevation: 6,
+    paddingHorizontal: spacing.lg,
+    gap: spacing.lg,
  },
-  list: {
-    paddingBottom: spacing.xl,
-  },
-  listTablet: {
-    maxWidth: 700,
-    alignSelf: 'center',
-    width: '100%',
-  },
-  errorContainer: {
-    padding: spacing.md,
-    marginHorizontal: spacing.lg,
-    backgroundColor: colors.dangerContainer,
-    borderRadius: borderRadius.lg,
-  },
-  errorContainerTablet: {
-    maxWidth: 700,
-    alignSelf: 'center',
-  },
-  errorText: {
-    color: colors.danger,
-    textAlign: 'center',
-    fontSize: 14,
-  },
-  emptyContainer: {
-    padding: spacing.xl,
+  hero: {
    alignItems: 'center',
+    gap: spacing.sm,
+    marginBottom: spacing.md,
  },
-  emptyText: {
-    color: colors.textSecondary,
+  heroTablet: {
+    marginBottom: spacing.xl,
+  },
+  logo: {
+    width: 120,
+    height: 120,
+    marginBottom: spacing.xs,
+  },
+  logoTablet: {
+    width: 160,
+    height: 160,
+  },
+  brandName: {
+    fontSize: 28,
+    fontWeight: 'bold',
+    letterSpacing: -0.5,
+  },
+  brandNameTablet: {
+    fontSize: 36,
+  },
+  description: {
    fontSize: 16,
+    textAlign: 'center',
+    maxWidth: 260,
+    lineHeight: 24,
+  },
+  descriptionTablet: {
+    fontSize: 18,
+    maxWidth: 400,
+    lineHeight: 28,
+  },
+  cards: {
+    width: '100%',
+    maxWidth: 320,
+    gap: spacing.md,
+  },
+  cardsTablet: {
+    maxWidth: 480,
+  },
+  card: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.md,
+    borderRadius: borderRadius.lg,
+    padding: spacing.md,
+    minHeight: 64,
+    ...shadows.card,
+  },
+  cardTablet: {
+    padding: spacing.lg,
+    minHeight: 72,
+  },
+  cardScan: {
+    backgroundColor: '#2b5bb5',
+  },
+  cardIcon: {
+    width: 48,
+    height: 48,
+    borderRadius: borderRadius.md,
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+  },
+  cardIconSearch: {
+    backgroundColor: 'rgba(255, 255, 255, 0.3)',
+  },
+  cardIconScan: {
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+  },
+  cardContent: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  cardLabel: {
+    fontSize: 18,
+    fontWeight: '700',
+    lineHeight: 24,
+  },
+  cardLabelTablet: {
+    fontSize: 20,
+  },
+  cardLabelScan: {
+    color: '#ffffff',
  },
 });
@@ -4,15 +4,17 @@ import MapView, { Marker } from 'react-native-maps';
 import { useRouter } from 'expo-router';
 import { getPharmacies } from '../../services/pharmacies';
 import { LoadingSpinner } from '../../components/LoadingSpinner';
-import { colors, spacing } from '../../constants/theme';
+import { useThemeContext } from '../../components/ThemeProvider';
+import { spacing, borderRadius } from '../../constants/theme';
 import { Pharmacy } from '../../types';

 export default function MapScreen() {
  const router = useRouter();
+  const { colors } = useThemeContext();
  const [pharmacies, setPharmacies] = useState<Pharmacy[]>([]);
  const [isLoading, setIsLoading] = useState(true);
  const [region, setRegion] = useState({
-    latitude: 40.4168, // Madrid default
+    latitude: 40.4168,
    longitude: -3.7038,
    latitudeDelta: 0.0922,
    longitudeDelta: 0.0421,
@@ -24,7 +26,6 @@ export default function MapScreen() {
        const data = await getPharmacies();
        setPharmacies(data);
        
-        // Center map on first pharmacy if available
        if (data.length > 0) {
          setRegion({
            latitude: data[0].latitude,
@@ -70,8 +71,8 @@ export default function MapScreen() {
        ))}
      </MapView>
      
-      <View style={styles.legend}>
-        <Text style={styles.legendText}>
+      <View style={[styles.legend, { backgroundColor: colors.card }]}>
+        <Text style={[styles.legendText, { color: colors.text }]}>
          {pharmacies.length} farmacias en el mapa
        </Text>
      </View>
@@ -91,7 +92,6 @@ const styles = StyleSheet.create({
    bottom: spacing.lg,
    left: spacing.md,
    right: spacing.md,
-    backgroundColor: colors.card,
    borderRadius: borderRadius.lg,
    padding: spacing.sm + 4,
    alignItems: 'center',
@@ -103,6 +103,5 @@ const styles = StyleSheet.create({
  },
  legendText: {
    fontSize: 14,
-    color: colors.text,
  },
 });
@@ -1,8 +1,10 @@
-import React from 'react';
-import { View, Text, StyleSheet, TouchableOpacity, useWindowDimensions } from 'react-native';
+import React, { useState } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity, TextInput, Alert, useWindowDimensions, ScrollView } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { useRouter } from 'expo-router';
-import { colors, spacing, borderRadius, shadows } from '../../constants/theme';
+import * as ImagePicker from 'expo-image-picker';
+import { useThemeContext } from '../../components/ThemeProvider';
+import { spacing, borderRadius, shadows } from '../../constants/theme';

 const TABLET_MIN_WIDTH = 768;

@@ -10,36 +12,174 @@ export default function ScanTabScreen() {
  const router = useRouter();
  const { width } = useWindowDimensions();
  const isTablet = width >= TABLET_MIN_WIDTH;
+  const { colors } = useThemeContext();
+  const [manualNumber, setManualNumber] = useState('');
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+
+  const handleTakePhoto = async () => {
+    const { status } = await ImagePicker.requestCameraPermissionsAsync();
+    if (status !== 'granted') {
+      Alert.alert(
+        'Permiso requerido',
+        'Necesitamos acceso a la cámara para tomar fotos del dispositivo.'
+      );
+      return;
+    }
+
+    const result = await ImagePicker.launchCameraAsync({
+      mediaTypes: ['images'],
+      allowsEditing: true,
+      quality: 0.8,
+    });
+
+    if (!result.canceled && result.assets[0]) {
+      setSelectedImage(result.assets[0].uri);
+    }
+  };
+
+  const handleSelectFromGallery = async () => {
+    const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+    if (status !== 'granted') {
+      Alert.alert(
+        'Permiso requerido',
+        'Necesitamos acceso a la galería para seleccionar fotos.'
+      );
+      return;
+    }
+
+    const result = await ImagePicker.launchImageLibraryAsync({
+      mediaTypes: ['images'],
+      allowsEditing: true,
+      quality: 0.8,
+    });
+
+    if (!result.canceled && result.assets[0]) {
+      setSelectedImage(result.assets[0].uri);
+    }
+  };
+
+  const handleManualSubmit = () => {
+    const trimmed = manualNumber.trim();
+    if (trimmed.length === 0) {
+      Alert.alert('Campo requerido', 'Por favor, introduce el número de la tarjeta.');
+      return;
+    }
+    router.push(`/medicine/${trimmed}`);
+  };

  return (
-    <View style={styles.container}>
+    <ScrollView
+      style={[styles.scrollContainer, { backgroundColor: colors.background }]}
+      contentContainerStyle={styles.scrollContent}
+    >
      <View style={[styles.content, isTablet && styles.contentTablet]}>
-        <View style={[styles.iconContainer, isTablet && styles.iconContainerTablet]}>
+        <View style={[styles.iconContainer, isTablet && styles.iconContainerTablet, { backgroundColor: colors.primaryContainer }]}>
          <Ionicons name="scan" size={isTablet ? 80 : 64} color={colors.scanButton} />
        </View>
-        <Text style={[styles.title, isTablet && styles.titleTablet]}>Escanear TSI</Text>
-        <Text style={[styles.description, isTablet && styles.descriptionTablet]}>
+        <Text style={[styles.title, isTablet && styles.titleTablet, { color: colors.text }]}>Escanear TSI</Text>
+        <Text style={[styles.description, isTablet && styles.descriptionTablet, { color: colors.textSecondary }]}>
          Escanea el código de barras de tu tarjeta sanitaria para encontrar tus medicamentos
        </Text>
        <TouchableOpacity
-          style={[styles.button, shadows.scanButton, isTablet && styles.buttonTablet]}
+          style={[styles.primaryButton, shadows.scanButton, isTablet && styles.primaryButtonTablet]}
          activeOpacity={0.85}
          onPress={() => router.push('/scanner')}
        >
          <Ionicons name="scan" size={isTablet ? 28 : 24} color="#ffffff" />
-          <Text style={[styles.buttonText, isTablet && styles.buttonTextTablet]}>Iniciar escaneo</Text>
+          <Text style={[styles.primaryButtonText, isTablet && styles.primaryButtonTextTablet]}>
+            Iniciar escaneo
+          </Text>
        </TouchableOpacity>
+
+        {/* Separator */}
+        <View style={styles.separator}>
+          <View style={[styles.separatorLine, { backgroundColor: colors.border }]} />
+          <Text style={[styles.separatorText, { color: colors.textSecondary }]}>o</Text>
+          <View style={[styles.separatorLine, { backgroundColor: colors.border }]} />
+        </View>
+
+        {/* Option 2: Upload device photo */}
+        <View style={[styles.optionCard, isTablet && styles.optionCardTablet, { backgroundColor: colors.card, borderColor: colors.border }]}>
+          <Ionicons name="camera" size={24} color={colors.primary} />
+          <View style={styles.optionTextContainer}>
+            <Text style={[styles.optionTitle, isTablet && styles.optionTitleTablet, { color: colors.text }]}>
+              Subir foto del dispositivo
+            </Text>
+            <Text style={[styles.optionDescription, isTablet && styles.optionDescriptionTablet, { color: colors.textSecondary }]}>
+              Toma o selecciona una foto del dispositivo sanitario
+            </Text>
+          </View>
+        </View>
+        <View style={styles.photoButtonsRow}>
+          <TouchableOpacity
+            style={[styles.photoButton, isTablet && styles.photoButtonTablet, { backgroundColor: colors.primaryContainer, borderColor: colors.primary }]}
+            activeOpacity={0.7}
+            onPress={handleTakePhoto}
+          >
+            <Ionicons name="camera-outline" size={20} color={colors.primary} />
+            <Text style={[styles.photoButtonText, { color: colors.primary }]}>Tomar foto</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.photoButton, isTablet && styles.photoButtonTablet, { backgroundColor: colors.primaryContainer, borderColor: colors.primary }]}
+            activeOpacity={0.7}
+            onPress={handleSelectFromGallery}
+          >
+            <Ionicons name="images-outline" size={20} color={colors.primary} />
+            <Text style={[styles.photoButtonText, { color: colors.primary }]}>Galería</Text>
+          </TouchableOpacity>
+        </View>
+        {selectedImage && (
+          <View style={styles.imagePreviewContainer}>
+            <Ionicons name="checkmark-circle" size={20} color={colors.success} />
+            <Text style={[styles.imagePreviewText, { color: colors.success }]}>Foto seleccionada correctamente</Text>
+          </View>
+        )}
+
+        {/* Option 3: Enter card number manually */}
+        <View style={[styles.optionCard, isTablet && styles.optionCardTablet, { backgroundColor: colors.card, borderColor: colors.border }]}>
+          <Ionicons name="keypad" size={24} color={colors.primary} />
+          <View style={styles.optionTextContainer}>
+            <Text style={[styles.optionTitle, isTablet && styles.optionTitleTablet, { color: colors.text }]}>
+              Introducir número manualmente
+            </Text>
+            <Text style={[styles.optionDescription, isTablet && styles.optionDescriptionTablet, { color: colors.textSecondary }]}>
+              Escribe el número de tu tarjeta sanitaria
+            </Text>
+          </View>
+        </View>
+        <View style={styles.manualInputRow}>
+          <TextInput
+            style={[styles.manualInput, isTablet && styles.manualInputTablet, { backgroundColor: colors.card, borderColor: colors.border, color: colors.text }]}
+            placeholder="Introduce el número de tarjeta"
+            placeholderTextColor={colors.textSecondary}
+            value={manualNumber}
+            onChangeText={setManualNumber}
+            keyboardType="default"
+            autoCapitalize="none"
+            autoCorrect={false}
+            returnKeyType="search"
+            onSubmitEditing={handleManualSubmit}
+          />
+          <TouchableOpacity
+            style={[styles.manualSubmitButton, isTablet && styles.manualSubmitButtonTablet]}
+            activeOpacity={0.7}
+            onPress={handleManualSubmit}
+          >
+            <Ionicons name="arrow-forward" size={20} color="#ffffff" />
+          </TouchableOpacity>
+        </View>
      </View>
-    </View>
+    </ScrollView>
  );
 }

 const styles = StyleSheet.create({
-  container: {
+  scrollContainer: {
    flex: 1,
-    backgroundColor: colors.background,
-    alignItems: 'center',
-    justifyContent: 'center',
+  },
+  scrollContent: {
+    flexGrow: 1,
+    paddingVertical: spacing.xl,
  },
  content: {
    alignItems: 'center',
@@ -53,7 +193,6 @@ const styles = StyleSheet.create({
    width: 100,
    height: 100,
    borderRadius: 50,
-    backgroundColor: colors.primaryContainer,
    alignItems: 'center',
    justifyContent: 'center',
    marginBottom: spacing.sm,
@@ -66,14 +205,12 @@ const styles = StyleSheet.create({
  title: {
    fontSize: 22,
    fontWeight: 'bold',
-    color: colors.text,
  },
  titleTablet: {
    fontSize: 28,
  },
  description: {
    fontSize: 15,
-    color: colors.textSecondary,
    textAlign: 'center',
    lineHeight: 22,
    maxWidth: 280,
@@ -83,26 +220,128 @@ const styles = StyleSheet.create({
    maxWidth: 420,
    lineHeight: 26,
  },
-  button: {
+  primaryButton: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: spacing.sm,
-    backgroundColor: colors.scanButton,
+    backgroundColor: '#2b5bb5',
    borderRadius: borderRadius.lg,
    paddingVertical: spacing.md,
    paddingHorizontal: spacing.xl,
-    marginTop: spacing.md,
+    marginTop: spacing.sm,
  },
-  buttonTablet: {
+  primaryButtonTablet: {
    paddingVertical: spacing.lg,
    paddingHorizontal: spacing.xl * 1.5,
  },
-  buttonText: {
+  primaryButtonText: {
    fontSize: 17,
    fontWeight: '600',
    color: '#ffffff',
  },
-  buttonTextTablet: {
+  primaryButtonTextTablet: {
    fontSize: 20,
  },
+  separator: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    marginVertical: spacing.sm,
+  },
+  separatorLine: {
+    flex: 1,
+    height: 1,
+  },
+  separatorText: {
+    marginHorizontal: spacing.md,
+    fontSize: 14,
+  },
+  optionCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    width: '100%',
+    borderRadius: borderRadius.lg,
+    padding: spacing.md,
+    gap: spacing.md,
+    borderWidth: 1,
+  },
+  optionCardTablet: {
+    padding: spacing.lg,
+  },
+  optionTextContainer: {
+    flex: 1,
+  },
+  optionTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  optionTitleTablet: {
+    fontSize: 18,
+  },
+  optionDescription: {
+    fontSize: 13,
+    marginTop: 2,
+  },
+  optionDescriptionTablet: {
+    fontSize: 15,
+  },
+  photoButtonsRow: {
+    flexDirection: 'row',
+    width: '100%',
+    gap: spacing.sm,
+  },
+  photoButton: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.xs,
+    borderRadius: borderRadius.md,
+    paddingVertical: spacing.sm + 4,
+    borderWidth: 1,
+  },
+  photoButtonTablet: {
+    paddingVertical: spacing.md,
+  },
+  photoButtonText: {
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  imagePreviewContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+    paddingVertical: spacing.xs,
+  },
+  imagePreviewText: {
+    fontSize: 13,
+    fontWeight: '500',
+  },
+  manualInputRow: {
+    flexDirection: 'row',
+    width: '100%',
+    gap: spacing.sm,
+  },
+  manualInput: {
+    flex: 1,
+    borderRadius: borderRadius.md,
+    borderWidth: 1,
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm + 4,
+    fontSize: 15,
+  },
+  manualInputTablet: {
+    fontSize: 18,
+    paddingVertical: spacing.md,
+  },
+  manualSubmitButton: {
+    backgroundColor: '#7fbf8f',
+    borderRadius: borderRadius.md,
+    width: 48,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  manualSubmitButtonTablet: {
+    width: 56,
+  },
 });
@@ -0,0 +1,368 @@
+import React, { useState, useEffect } from 'react';
+import { View, FlatList, StyleSheet, Text, TouchableOpacity, useWindowDimensions } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+import { useNavigation, useRouter } from 'expo-router';
+import { SearchBar } from '../../components/SearchBar';
+import { MedicineCard } from '../../components/MedicineCard';
+import { LoadingSpinner } from '../../components/LoadingSpinner';
+import { useDebounce } from '../../hooks/useDebounce';
+import { useAuth } from '../../hooks/useAuth';
+import { useRecentSearches } from '../../hooks/useRecentSearches';
+import { searchMedicines } from '../../services/medicines';
+import { searchProducts, Product } from '../../services/products';
+import { useThemeContext } from '../../components/ThemeProvider';
+import { spacing, borderRadius } from '../../constants/theme';
+import { Medicine } from '../../types';
+import { config } from '../../constants/config';
+
+const TABLET_MIN_WIDTH = 768;
+
+const suggestions = [
+  { name: 'Paracetamol', icon: 'medical' as const },
+  { name: 'Ibuprofeno', icon: 'fitness' as const },
+  { name: 'Aspirina', icon: 'heart' as const },
+  { name: 'Omeprazol', icon: 'bandage' as const },
+];
+
+export default function SearchScreen() {
+  const { width } = useWindowDimensions();
+  const isTablet = width >= TABLET_MIN_WIDTH;
+  const { isAuthenticated } = useAuth();
+  const { recentSearches, addSearch, removeSearch } = useRecentSearches();
+  const { colors } = useThemeContext();
+  const [query, setQuery] = useState('');
+  const [results, setResults] = useState<Medicine[]>([]);
+  const [products, setProducts] = useState<Product[]>([]);
+  const [searchMode, setSearchMode] = useState<'all' | 'medicines' | 'products'>('all');
+  const [isLoading, setIsLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const debouncedQuery = useDebounce(query, config.SEARCH_DEBOUNCE_MS);
+  const navigation = useNavigation();
+  const router = useRouter();
+
+  useEffect(() => {
+    const parent = navigation.getParent();
+    if (!parent) return;
+    const unsubscribe = parent.addListener('tabPress', () => {
+      setQuery('');
+      setResults([]);
+      setProducts([]);
+      setSearchMode('all');
+      setIsLoading(false);
+      setError(null);
+    });
+    return unsubscribe;
+  }, [navigation]);
+
+  useEffect(() => {
+    if (debouncedQuery.length < 2) {
+      setResults([]);
+      setProducts([]);
+      return;
+    }
+
+    const fetchResults = async () => {
+      setIsLoading(true);
+      setError(null);
+      try {
+        const data = await searchMedicines(debouncedQuery);
+        setResults(data);
+      } catch (err) {
+        setError('Error al buscar medicamentos');
+        console.error(err);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    const fetchProducts = async () => {
+      try {
+        const productResults = await searchProducts(debouncedQuery);
+        setProducts(productResults);
+      } catch (err) {
+        console.error('Product search error:', err);
+      }
+    };
+
+    fetchResults();
+    fetchProducts();
+  }, [debouncedQuery]);
+
+  const handleSearch = (searchQuery: string) => {
+    setQuery(searchQuery);
+    if (searchQuery.trim()) addSearch(searchQuery);
+  };
+
+  const showSuggestions = !query && !isLoading && results.length === 0 && products.length === 0;
+
+  return (
+    <View style={[styles.container, { backgroundColor: colors.background }]}>
+      <SearchBar
+        onSearch={handleSearch}
+        value={query}
+        onChangeText={setQuery}
+      />
+
+      {query.length >= 2 && (
+        <View style={styles.filterContainer}>
+          <TouchableOpacity style={[styles.filterTab, searchMode === 'all' && styles.filterTabActive]} onPress={() => setSearchMode('all')}>
+            <Text style={[styles.filterText, searchMode === 'all' && styles.filterTextActive]}>Todos</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={[styles.filterTab, searchMode === 'medicines' && styles.filterTabActive]} onPress={() => setSearchMode('medicines')}>
+            <Text style={[styles.filterText, searchMode === 'medicines' && styles.filterTextActive]}>Medicamentos</Text>
+          </TouchableOpacity>
+          <TouchableOpacity style={[styles.filterTab, searchMode === 'products' && styles.filterTabActive]} onPress={() => setSearchMode('products')}>
+            <Text style={[styles.filterText, searchMode === 'products' && styles.filterTextActive]}>Parafarmacia</Text>
+          </TouchableOpacity>
+        </View>
+      )}
+
+      {showSuggestions && (
+        <>
+          <View style={[styles.suggestionsSection, isTablet && styles.suggestionsSectionTablet]}>
+            <Text style={[styles.sectionTitle, { color: colors.text }]}>Sugerencias</Text>
+            <View style={styles.suggestionsGrid}>
+              {suggestions.map((s) => (
+                <TouchableOpacity
+                  key={s.name}
+                  style={[styles.suggestionCard, { backgroundColor: colors.card, borderColor: colors.border }]}
+                  onPress={() => handleSearch(s.name)}
+                  activeOpacity={0.7}
+                >
+                  <View style={[styles.suggestionIcon, { backgroundColor: colors.surfaceLow }]}>
+                    <Ionicons name={s.icon} size={22} color={colors.primary} />
+                  </View>
+                  <Text style={[styles.suggestionName, { color: colors.text }]}>{s.name}</Text>
+                </TouchableOpacity>
+              ))}
+            </View>
+          </View>
+
+          {isAuthenticated && recentSearches.length > 0 && (
+            <View style={[styles.recentSection, isTablet && styles.recentSectionTablet]}>
+              <Text style={[styles.sectionTitle, { color: colors.text }]}>Búsquedas recientes</Text>
+              {recentSearches.map((term) => (
+                <TouchableOpacity
+                  key={term}
+                  style={styles.recentItem}
+                  onPress={() => handleSearch(term)}
+                  activeOpacity={0.7}
+                >
+                  <Ionicons name="time-outline" size={18} color={colors.textSecondary} />
+                  <Text style={[styles.recentText, { color: colors.text }]}>{term}</Text>
+                  <TouchableOpacity onPress={() => removeSearch(term)} hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}>
+                    <Ionicons name="close" size={16} color={colors.textSecondary} />
+                  </TouchableOpacity>
+                </TouchableOpacity>
+              ))}
+            </View>
+          )}
+        </>
+      )}
+
+      {isLoading && <LoadingSpinner message="Buscando..." />}
+
+      {error && (
+        <View style={[styles.errorContainer, isTablet && styles.errorContainerTablet, { backgroundColor: colors.dangerContainer }]}>
+          <Text style={[styles.errorText, { color: colors.danger }]}>{error}</Text>
+        </View>
+      )}
+
+      {!isLoading && !error && results.length === 0 && products.length === 0 && query.length >= 2 && (
+        <View style={styles.emptyContainer}>
+          <Text style={[styles.emptyText, { color: colors.textSecondary }]}>No se encontraron resultados</Text>
+        </View>
+      )}
+
+      <FlatList
+        data={(searchMode === 'medicines' || searchMode === 'all') ? results : []}
+        keyExtractor={(item) => item.nregistro}
+        renderItem={({ item }) => <MedicineCard medicine={item} />}
+        ListHeaderComponent={
+          <>
+            {(searchMode === 'all' || searchMode === 'products') && products.length > 0 && (
+              <View style={styles.section}>
+                <Text style={[styles.sectionTitle, { color: colors.text }]}>Parafarmacia y Bebé</Text>
+                {products.map((product) => (
+                  <TouchableOpacity
+                    key={`${product.source}-${product.id}`}
+                    style={[styles.productCard, { backgroundColor: colors.card, borderColor: colors.border }]}
+                    onPress={() => router.push(`/product/${product.source}/${product.id}`)}
+                    activeOpacity={0.7}
+                  >
+                    <View style={styles.productInfo}>
+                      <View style={styles.badges}>
+                        <View style={[styles.sourceBadge, { backgroundColor: product.source === 'cima' ? '#2563eb' : '#16a34a' }]}>
+                          <Text style={styles.badgeText}>{product.source === 'cima' ? 'CIMA' : 'OFF'}</Text>
+                        </View>
+                      </View>
+                      <Text style={[styles.productName, { color: colors.text }]} numberOfLines={1}>{product.name}</Text>
+                      <Text style={[styles.productBrand, { color: colors.textSecondary }]} numberOfLines={1}>{product.brand}</Text>
+                    </View>
+                  </TouchableOpacity>
+                ))}
+              </View>
+            )}
+          </>
+        }
+        contentContainerStyle={[styles.list, isTablet && styles.listTablet]}
+        showsVerticalScrollIndicator={false}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  filterContainer: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+    gap: spacing.sm,
+    paddingVertical: spacing.sm,
+    paddingHorizontal: spacing.md,
+  },
+  filterTab: {
+    paddingHorizontal: spacing.md,
+    paddingVertical: spacing.sm,
+    borderRadius: borderRadius.full,
+    backgroundColor: 'rgba(0,0,0,0.05)',
+  },
+  filterTabActive: {
+    backgroundColor: '#7fbf8f',
+  },
+  filterText: {
+    fontSize: 14,
+    fontWeight: '600',
+    color: '#41493e',
+  },
+  filterTextActive: {
+    color: '#ffffff',
+  },
+  section: {
+    paddingHorizontal: spacing.lg,
+    marginTop: spacing.md,
+  },
+  suggestionsSection: {
+    marginTop: spacing.sm,
+    alignSelf: 'center',
+    width: '80%',
+  },
+  suggestionsSectionTablet: {
+    maxWidth: 700,
+    alignSelf: 'center',
+    width: '100%',
+  },
+  sectionTitle: {
+    fontSize: 20,
+    fontWeight: '700',
+    marginBottom: spacing.md,
+  },
+  suggestionsGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: spacing.sm,
+  },
+  suggestionCard: {
+    width: '48%' as unknown as number,
+    borderRadius: borderRadius.lg,
+    borderWidth: 1,
+    padding: spacing.md,
+    gap: spacing.sm,
+  },
+  suggestionIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: borderRadius.md,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  suggestionName: {
+    fontSize: 16,
+    fontWeight: '700',
+  },
+  recentSection: {
+    marginTop: spacing.lg,
+    alignSelf: 'center',
+    width: '80%',
+  },
+  recentSectionTablet: {
+    maxWidth: 700,
+    alignSelf: 'center',
+    width: '100%',
+  },
+  recentItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: spacing.sm,
+    gap: spacing.sm,
+  },
+  recentText: {
+    flex: 1,
+    fontSize: 15,
+  },
+  list: {
+    paddingBottom: spacing.xl,
+  },
+  listTablet: {
+    maxWidth: 700,
+    alignSelf: 'center',
+    width: '100%',
+  },
+  errorContainer: {
+    padding: spacing.md,
+    marginHorizontal: spacing.lg,
+    borderRadius: borderRadius.lg,
+  },
+  errorContainerTablet: {
+    maxWidth: 700,
+    alignSelf: 'center',
+  },
+  errorText: {
+    textAlign: 'center',
+    fontSize: 14,
+  },
+  emptyContainer: {
+    padding: spacing.xl,
+    alignItems: 'center',
+  },
+  emptyText: {
+    fontSize: 16,
+  },
+  productCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    borderRadius: borderRadius.lg,
+    borderWidth: 1,
+    padding: spacing.md,
+    marginBottom: spacing.sm,
+  },
+  productInfo: {
+    flex: 1,
+    gap: 4,
+  },
+  badges: {
+    flexDirection: 'row',
+    gap: spacing.sm,
+    marginBottom: 2,
+  },
+  sourceBadge: {
+    paddingHorizontal: spacing.sm,
+    paddingVertical: 2,
+    borderRadius: borderRadius.sm,
+  },
+  badgeText: {
+    color: '#ffffff',
+    fontSize: 11,
+    fontWeight: '700',
+  },
+  productName: {
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  productBrand: {
+    fontSize: 13,
+  },
+});
@@ -1,34 +1,38 @@
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
-import { ImageBackground, StyleSheet, View } from 'react-native';
+import { Image, StyleSheet, View } from 'react-native';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { useAuthStore } from '../store/authStore';
 import { registerForPushNotifications, addNotificationListener, addNotificationResponseListener } from '../services/notifications';
-import { colors } from '../constants/theme';
+import { ThemeProvider, useThemeContext } from '../components/ThemeProvider';

 const queryClient = new QueryClient();

-export default function RootLayout() {
+const bgLight = require('../assets/bg.png');
+const bgDark = require('../assets/bg_dark.png');
+
+function RootLayoutInner() {
  const { checkAuth } = useAuthStore();
+  const { colors, isDark } = useThemeContext();
  const notificationListener = useRef<ReturnType<typeof addNotificationListener>>();
  const responseListener = useRef<ReturnType<typeof addNotificationResponseListener>>();

  useEffect(() => {
    checkAuth();
-    
+
    registerForPushNotifications();
-    
+
    notificationListener.current = addNotificationListener((notification) => {
      console.log('Notification received:', notification);
    });
-    
+
    responseListener.current = addNotificationResponseListener((response) => {
      console.log('Notification clicked:', response);
    });
-    
+
    return () => {
      notificationListener.current?.remove();
      responseListener.current?.remove();
@@ -36,71 +40,100 @@ export default function RootLayout() {
  }, []);

  return (
-    <GestureHandlerRootView style={{ flex: 1 }}>
-      <ImageBackground
-        source={require('../assets/bg.png')}
-        style={bgStyles.background}
-        resizeMode="cover"
-        imageStyle={bgStyles.backgroundImage}
+    <>
+      <Stack
+        screenOptions={{
+          headerStyle: { backgroundColor: colors.card },
+          headerTintColor: colors.primary,
+          headerTitleStyle: { color: colors.text, fontWeight: '600' },
+        }}
      >
-      <View style={bgStyles.overlay} />
+        <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
+        <Stack.Screen
+          name="medicine/[id]"
+          options={{ title: 'Medicamento' }}
+        />
+        <Stack.Screen
+          name="pharmacy/[id]"
+          options={{ title: 'Farmacia' }}
+        />
+        <Stack.Screen
+          name="scanner"
+          options={{
+            title: 'Escanear',
+            headerShown: false,
+          }}
+        />
+        <Stack.Screen
+          name="auth/login"
+          options={{
+            title: 'Iniciar Sesión',
+            headerShown: false,
+          }}
+        />
+        <Stack.Screen
+          name="auth/register"
+          options={{
+            title: 'Registrarse',
+            headerShown: false,
+          }}
+        />
+      </Stack>
+      <StatusBar style={isDark ? 'light' : 'auto'} />
+    </>
+  );
+}
+
+function ThemedBackground({ children }: { children: React.ReactNode }) {
+  const { isDark } = useThemeContext();
+
+  return (
+    <View style={styles.root}>
+      <Image
+        source={isDark ? bgDark : bgLight}
+        style={styles.bgImage}
+        resizeMode="cover"
+      />
+      <View style={[styles.overlay, isDark && styles.overlayDark]} pointerEvents="none" />
+      <View style={styles.content}>
+        {children}
+      </View>
+    </View>
+  );
+}
+
+export default function RootLayout() {
+  return (
+    <GestureHandlerRootView style={styles.root}>
      <SafeAreaProvider>
        <QueryClientProvider client={queryClient}>
-          <Stack
-            screenOptions={{
-              headerStyle: { backgroundColor: colors.card },
-              headerTintColor: colors.primary,
-              headerTitleStyle: { color: colors.text, fontWeight: '600' },
-            }}
-          >
-            <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-            <Stack.Screen 
-              name="medicine/[id]" 
-              options={{ title: 'Medicamento' }} 
-            />
-            <Stack.Screen 
-              name="pharmacy/[id]" 
-              options={{ title: 'Farmacia' }} 
-            />
-            <Stack.Screen 
-              name="scanner" 
-              options={{ 
-                title: 'Escanear',
-                headerShown: false,
-              }} 
-            />
-            <Stack.Screen 
-              name="auth/login" 
-              options={{ 
-                title: 'Iniciar Sesión',
-                headerShown: false,
-              }} 
-            />
-            <Stack.Screen 
-              name="auth/register" 
-              options={{ 
-                title: 'Registrarse',
-                headerShown: false,
-              }} 
-            />
-          </Stack>
-          <StatusBar style="auto" />
+          <ThemeProvider>
+            <ThemedBackground>
+              <RootLayoutInner />
+            </ThemedBackground>
+          </ThemeProvider>
        </QueryClientProvider>
      </SafeAreaProvider>
-      </ImageBackground>
    </GestureHandlerRootView>
  );
 }

-const bgStyles = StyleSheet.create({
-  background: {
+const styles = StyleSheet.create({
+  root: {
    flex: 1,
  },
-  backgroundImage: {
-    opacity: 0.5,
+  bgImage: {
+    ...StyleSheet.absoluteFillObject,
+    opacity: 0.55,
  },
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(255, 252, 245, 0.48)',
  },
+  overlayDark: {
+    backgroundColor: 'rgba(0, 0, 0, 0.25)',
+  },
+  content: {
+    flex: 1,
+  },
 });
@@ -1,38 +1,54 @@
 import React, { useState, useEffect } from 'react';
-import { 
-  View, 
-  Text, 
-  TextInput, 
-  TouchableOpacity, 
-  StyleSheet, 
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
  KeyboardAvoidingView,
  Platform,
-  Alert
+  Alert,
+  Image,
 } from 'react-native';
 import { useRouter } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
 import { useAuthStore } from '../../store/authStore';
-import { colors, spacing, borderRadius } from '../../constants/theme';
-import { 
-  isBiometricsAvailable, 
-  authenticateWithBiometrics, 
-  saveBiometricCredentials, 
-  getBiometricUsername 
+import { useThemeContext } from '../../components/ThemeProvider';
+import { register } from '../../services/auth';
+import { spacing, borderRadius, shadows } from '../../constants/theme';
+import {
+  isBiometricsAvailable,
+  authenticateWithBiometrics,
+  saveBiometricCredentials,
+  getBiometricUsername,
 } from '../../services/biometrics';

+type Tab = 'login' | 'register';
+
 export default function LoginScreen() {
  const router = useRouter();
  const { login } = useAuthStore();
+  const { colors } = useThemeContext();
+  const [tab, setTab] = useState<Tab>('login');
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
+  const [confirmPassword, setConfirmPassword] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [biometricsAvailable, setBiometricsAvailable] = useState(false);
  const [biometricUsername, setBiometricUsername] = useState<string | null>(null);

+  const isRegister = tab === 'register';
+
  useEffect(() => {
    checkBiometrics();
  }, []);

+  useEffect(() => {
+    setUsername('');
+    setPassword('');
+    setConfirmPassword('');
+  }, [tab]);
+
  const checkBiometrics = async () => {
    try {
      const available = await isBiometricsAvailable();
@@ -46,22 +62,42 @@ export default function LoginScreen() {
    }
  };

-  const handleLogin = async () => {
-    if (!username || !password) {
-      Alert.alert('Error', 'Por favor ingresa usuario y contraseña');
+  const handleSubmit = async () => {
+    if (!username.trim() || !password) {
+      Alert.alert('Error', 'Por favor completa todos los campos');
      return;
    }

+    if (isRegister) {
+      if (password.length < 8) {
+        Alert.alert('Error', 'La contraseña debe tener al menos 8 caracteres');
+        return;
+      }
+      if (password !== confirmPassword) {
+        Alert.alert('Error', 'Las contraseñas no coinciden');
+        return;
+      }
+    }
+
    setIsLoading(true);
    try {
-      await login(username, password);
-      // Save username for biometric login
-      if (biometricsAvailable) {
-        await saveBiometricCredentials(username);
+      if (isRegister) {
+        await register(username.trim(), password);
+        Alert.alert('Éxito', 'Cuenta creada correctamente', [
+          { text: 'OK', onPress: () => setTab('login') },
+        ]);
+      } else {
+        await login(username.trim(), password);
+        if (biometricsAvailable) {
+          await saveBiometricCredentials(username.trim());
+        }
+        router.replace('/(tabs)');
      }
-      router.replace('/(tabs)');
    } catch (error) {
-      Alert.alert('Error', 'Credenciales incorrectas');
+      Alert.alert(
+        'Error',
+        isRegister ? 'No se pudo crear la cuenta' : 'Credenciales incorrectas'
+      );
    } finally {
      setIsLoading(false);
    }
@@ -77,8 +113,6 @@ export default function LoginScreen() {
    try {
      const authenticated = await authenticateWithBiometrics();
      if (authenticated) {
-        // Use saved username with empty password for biometric login
-        // The backend should handle biometric authentication differently
        await login(biometricUsername, '');
        router.replace('/(tabs)');
      } else {
@@ -93,64 +127,165 @@ export default function LoginScreen() {

  return (
    <KeyboardAvoidingView
-      style={styles.container}
+      style={[styles.container, { backgroundColor: colors.background }]}
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
    >
-      <View style={styles.form}>
-        <Text style={styles.title}>Iniciar Sesión</Text>
-        <Text style={styles.subtitle}>Ingresa tus credenciales para continuar</Text>
-
-        <View style={styles.inputContainer}>
-          <Text style={styles.label}>Usuario</Text>
-          <TextInput
-            style={styles.input}
-            value={username}
-            onChangeText={setUsername}
-            placeholder="Tu usuario"
-            placeholderTextColor={colors.textSecondary}
-            autoCapitalize="none"
-            autoCorrect={false}
+      <View style={styles.content}>
+        {/* Logo */}
+        <View style={styles.logoSection}>
+          <Image
+            source={require('../../assets/farmaclic_logo.png')}
+            style={styles.logo}
+            resizeMode="contain"
          />
+          <Text style={[styles.brandName, { color: colors.text }]}>FarmaClic</Text>
        </View>

-        <View style={styles.inputContainer}>
-          <Text style={styles.label}>Contraseña</Text>
-          <TextInput
-            style={styles.input}
-            value={password}
-            onChangeText={setPassword}
-            placeholder="Tu contraseña"
-            placeholderTextColor={colors.textSecondary}
-            secureTextEntry
-          />
-        </View>
-
-        <TouchableOpacity
-          style={[styles.button, isLoading && styles.buttonDisabled]}
-          onPress={handleLogin}
-          disabled={isLoading}
-        >
-          <Text style={styles.buttonText}>
-            {isLoading ? 'Ingresando...' : 'Iniciar Sesión'}
-          </Text>
-        </TouchableOpacity>
-
-        {biometricsAvailable && biometricUsername && (
+        {/* Tabs */}
+        <View style={[styles.tabBar, { backgroundColor: colors.surfaceLow }]}>
          <TouchableOpacity
-            style={[styles.biometricButton, isLoading && styles.buttonDisabled]}
-            onPress={handleBiometricLogin}
+            style={[
+              styles.tab,
+              !isRegister && [styles.tabActive, { backgroundColor: colors.primary }],
+            ]}
+            onPress={() => setTab('login')}
            disabled={isLoading}
          >
-            <Ionicons name="finger-print" size={24} color={colors.primary} />
-            <Text style={styles.biometricText}>Iniciar con biometría</Text>
+            <Text
+              style={[
+                styles.tabText,
+                { color: isRegister ? colors.textSecondary : colors.onPrimaryContainer },
+                !isRegister && styles.tabTextActive,
+              ]}
+            >
+              Iniciar Sesión
+            </Text>
          </TouchableOpacity>
-        )}
+          <TouchableOpacity
+            style={[
+              styles.tab,
+              isRegister && [styles.tabActive, { backgroundColor: colors.primary }],
+            ]}
+            onPress={() => setTab('register')}
+            disabled={isLoading}
+          >
+            <Text
+              style={[
+                styles.tabText,
+                { color: !isRegister ? colors.textSecondary : colors.onPrimaryContainer },
+                isRegister && styles.tabTextActive,
+              ]}
+            >
+              Crear Cuenta
+            </Text>
+          </TouchableOpacity>
+        </View>

+        {/* Card */}
+        <View style={[styles.card, { backgroundColor: colors.card }, shadows.card]}>
+          {/* Header */}
+          <Text style={[styles.title, { color: colors.text }]}>
+            {isRegister ? 'Crea tu cuenta' : 'Bienvenido de nuevo'}
+          </Text>
+          <Text style={[styles.subtitle, { color: colors.textSecondary }]}>
+            {isRegister
+              ? 'Guarda tu dirección y recibe notificaciones cuando lleguen medicamentos.'
+              : 'Inicia sesión para gestionar tu perfil y notificaciones.'}
+          </Text>
+
+          {/* Username */}
+          <View style={[styles.inputWrapper, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]}>
+            <Ionicons name="person-outline" size={20} color={colors.textSecondary} style={styles.inputIcon} />
+            <TextInput
+              style={[styles.input, { color: colors.text }]}
+              value={username}
+              onChangeText={setUsername}
+              placeholder="Usuario"
+              placeholderTextColor={colors.textSecondary}
+              autoCapitalize="none"
+              autoCorrect={false}
+              autoComplete="username"
+            />
+          </View>
+
+          {/* Password */}
+          <View style={[styles.inputWrapper, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]}>
+            <Ionicons name="lock-closed-outline" size={20} color={colors.textSecondary} style={styles.inputIcon} />
+            <TextInput
+              style={[styles.input, { color: colors.text }]}
+              value={password}
+              onChangeText={setPassword}
+              placeholder="Contraseña"
+              placeholderTextColor={colors.textSecondary}
+              secureTextEntry
+              autoComplete={isRegister ? 'new-password' : 'current-password'}
+            />
+          </View>
+
+          {/* Confirm password (register only) */}
+          {isRegister && (
+            <View style={[styles.inputWrapper, { backgroundColor: colors.surfaceLow, borderColor: colors.border }]}>
+              <Ionicons name="lock-closed-outline" size={20} color={colors.textSecondary} style={styles.inputIcon} />
+              <TextInput
+                style={[styles.input, { color: colors.text }]}
+                value={confirmPassword}
+                onChangeText={setConfirmPassword}
+                placeholder="Confirmar contraseña"
+                placeholderTextColor={colors.textSecondary}
+                secureTextEntry
+                autoComplete="new-password"
+              />
+            </View>
+          )}
+
+          {/* Hints (register only) */}
+          {isRegister && (
+            <View style={styles.hints}>
+              <Text style={[styles.hint, { color: colors.textSecondary }]}>
+                <Ionicons name="information-circle-outline" size={14} color={colors.textSecondary} /> 3-32 caracteres para el usuario
+              </Text>
+              <Text style={[styles.hint, { color: colors.textSecondary }]}>
+                <Ionicons name="information-circle-outline" size={14} color={colors.textSecondary} /> Mínimo 8 caracteres para la contraseña
+              </Text>
+            </View>
+          )}
+
+          {/* Submit button */}
+          <TouchableOpacity
+            style={[styles.button, { backgroundColor: colors.primary }, isLoading && styles.buttonDisabled]}
+            onPress={handleSubmit}
+            disabled={isLoading}
+          >
+            {isLoading ? (
+              <Ionicons name="hourglass" size={20} color={colors.onPrimaryContainer} />
+            ) : (
+              <Text style={[styles.buttonText, { color: colors.onPrimaryContainer }]}>
+                {isRegister ? 'Crear Cuenta' : 'Iniciar Sesión'}
+              </Text>
+            )}
+          </TouchableOpacity>
+
+          {/* Biometrics (login only) */}
+          {!isRegister && biometricsAvailable && biometricUsername && (
+            <TouchableOpacity
+              style={[styles.biometricButton, { borderColor: colors.primary }]}
+              onPress={handleBiometricLogin}
+              disabled={isLoading}
+            >
+              <Ionicons name="finger-print" size={22} color={colors.primary} />
+              <Text style={[styles.biometricText, { color: colors.primary }]}>Iniciar con biometría</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+
+        {/* Footer link */}
        <TouchableOpacity
          style={styles.linkButton}
-          onPress={() => router.push('/auth/register')}
+          onPress={() => setTab(isRegister ? 'login' : 'register')}
        >
-          <Text style={styles.linkText}>¿No tienes cuenta? Regístrate</Text>
+          <Text style={[styles.linkText, { color: colors.primary }]}>
+            {isRegister ? '¿Ya tienes cuenta? Inicia sesión' : '¿No tienes cuenta? Regístrate'}
+          </Text>
        </TouchableOpacity>
      </View>
    </KeyboardAvoidingView>
@@ -160,78 +295,124 @@ export default function LoginScreen() {
 const styles = StyleSheet.create({
  container: {
    flex: 1,
-    backgroundColor: colors.background,
  },
-  form: {
+  content: {
    flex: 1,
    justifyContent: 'center',
-    padding: spacing.xl,
+    paddingHorizontal: spacing.lg,
+    gap: spacing.lg,
  },
-  title: {
-    fontSize: 28,
-    fontWeight: 'bold',
-    color: colors.text,
-    marginBottom: spacing.sm,
+  logoSection: {
+    alignItems: 'center',
+    gap: spacing.sm,
  },
-  subtitle: {
-    fontSize: 16,
-    color: colors.textSecondary,
-    marginBottom: spacing.xl,
+  logo: {
+    width: 80,
+    height: 80,
  },
-  inputContainer: {
-    marginBottom: spacing.md,
+  brandName: {
+    fontSize: 22,
+    fontWeight: '700',
+    letterSpacing: -0.3,
  },
-  label: {
+  tabBar: {
+    flexDirection: 'row',
+    borderRadius: borderRadius.lg,
+    padding: 4,
+  },
+  tab: {
+    flex: 1,
+    paddingVertical: spacing.sm + 2,
+    borderRadius: borderRadius.md,
+    alignItems: 'center',
+  },
+  tabActive: {
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    elevation: 2,
+  },
+  tabText: {
    fontSize: 14,
    fontWeight: '500',
-    color: colors.text,
+  },
+  tabTextActive: {
+    fontWeight: '700',
+  },
+  card: {
+    borderRadius: borderRadius.xl,
+    padding: spacing.lg,
+    gap: spacing.sm,
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: '700',
    marginBottom: spacing.xs,
  },
-  input: {
-    backgroundColor: colors.card,
+  subtitle: {
+    fontSize: 14,
+    lineHeight: 20,
+    marginBottom: spacing.sm,
+  },
+  inputWrapper: {
+    flexDirection: 'row',
+    alignItems: 'center',
    borderRadius: borderRadius.md,
-    padding: spacing.md,
+    borderWidth: 1,
+    paddingHorizontal: spacing.md,
+  },
+  inputIcon: {
+    marginRight: spacing.sm,
+  },
+  input: {
+    flex: 1,
+    paddingVertical: spacing.md,
    fontSize: 16,
-    color: colors.text,
+  },
+  hints: {
+    gap: 2,
+    marginTop: spacing.xs,
+  },
+  hint: {
+    fontSize: 12,
+    lineHeight: 18,
  },
  button: {
-    backgroundColor: colors.primary,
    borderRadius: borderRadius.md,
    padding: spacing.md,
    alignItems: 'center',
-    marginTop: spacing.md,
+    marginTop: spacing.sm,
+    flexDirection: 'row',
+    justifyContent: 'center',
  },
  buttonDisabled: {
    opacity: 0.6,
  },
  buttonText: {
-    color: colors.textInverse,
    fontSize: 16,
-    fontWeight: '600',
-  },
-  linkButton: {
-    marginTop: spacing.lg,
-    alignItems: 'center',
-  },
-  linkText: {
-    color: colors.primary,
-    fontSize: 14,
+    fontWeight: '700',
  },
  biometricButton: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
-    backgroundColor: colors.card,
    borderRadius: borderRadius.md,
    padding: spacing.md,
-    marginTop: spacing.md,
+    marginTop: spacing.xs,
    borderWidth: 1,
-    borderColor: colors.primary,
+    gap: spacing.sm,
  },
  biometricText: {
-    color: colors.primary,
-    fontSize: 16,
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  linkButton: {
+    alignItems: 'center',
+    paddingVertical: spacing.sm,
+  },
+  linkText: {
+    fontSize: 14,
    fontWeight: '600',
-    marginLeft: spacing.sm,
  },
 });
@@ -1,172 +1,5 @@
-import React, { useState } from 'react';
-import { 
-  View, 
-  Text, 
-  TextInput, 
-  TouchableOpacity, 
-  StyleSheet, 
-  KeyboardAvoidingView,
-  Platform,
-  Alert
-} from 'react-native';
-import { useRouter } from 'expo-router';
-import { register } from '../../services/auth';
-import { colors, spacing, borderRadius } from '../../constants/theme';
+import { Redirect } from 'expo-router';

-export default function RegisterScreen() {
-  const router = useRouter();
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [isLoading, setIsLoading] = useState(false);
-
-  const handleRegister = async () => {
-    if (!username || !password || !confirmPassword) {
-      Alert.alert('Error', 'Por favor completa todos los campos');
-      return;
-    }
-
-    if (password !== confirmPassword) {
-      Alert.alert('Error', 'Las contraseñas no coinciden');
-      return;
-    }
-
-    setIsLoading(true);
-    try {
-      await register(username, password);
-      router.replace('/(tabs)');
-    } catch (error) {
-      Alert.alert('Error', 'No se pudo crear la cuenta');
-    } finally {
-      setIsLoading(false);
-    }
-  };
-
-  return (
-    <KeyboardAvoidingView
-      style={styles.container}
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-    >
-      <View style={styles.form}>
-        <Text style={styles.title}>Crear Cuenta</Text>
-        <Text style={styles.subtitle}>Regístrate para empezar</Text>
-
-        <View style={styles.inputContainer}>
-          <Text style={styles.label}>Usuario</Text>
-          <TextInput
-            style={styles.input}
-            value={username}
-            onChangeText={setUsername}
-            placeholder="Elige un usuario"
-            placeholderTextColor={colors.textSecondary}
-            autoCapitalize="none"
-            autoCorrect={false}
-          />
-        </View>
-
-        <View style={styles.inputContainer}>
-          <Text style={styles.label}>Contraseña</Text>
-          <TextInput
-            style={styles.input}
-            value={password}
-            onChangeText={setPassword}
-            placeholder="Elige una contraseña"
-            placeholderTextColor={colors.textSecondary}
-            secureTextEntry
-          />
-        </View>
-
-        <View style={styles.inputContainer}>
-          <Text style={styles.label}>Confirmar Contraseña</Text>
-          <TextInput
-            style={styles.input}
-            value={confirmPassword}
-            onChangeText={setConfirmPassword}
-            placeholder="Repite la contraseña"
-            placeholderTextColor={colors.textSecondary}
-            secureTextEntry
-          />
-        </View>
-
-        <TouchableOpacity
-          style={[styles.button, isLoading && styles.buttonDisabled]}
-          onPress={handleRegister}
-          disabled={isLoading}
-        >
-          <Text style={styles.buttonText}>
-            {isLoading ? 'Creando cuenta...' : 'Crear Cuenta'}
-          </Text>
-        </TouchableOpacity>
-
-        <TouchableOpacity
-          style={styles.linkButton}
-          onPress={() => router.back()}
-        >
-          <Text style={styles.linkText}>¿Ya tienes cuenta? Inicia sesión</Text>
-        </TouchableOpacity>
-      </View>
-    </KeyboardAvoidingView>
-  );
+export default function RegisterRedirect() {
+  return <Redirect href="/auth/login" />;
 }
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: colors.background,
-  },
-  form: {
-    flex: 1,
-    justifyContent: 'center',
-    padding: spacing.xl,
-  },
-  title: {
-    fontSize: 28,
-    fontWeight: 'bold',
-    color: colors.text,
-    marginBottom: spacing.sm,
-  },
-  subtitle: {
-    fontSize: 16,
-    color: colors.textSecondary,
-    marginBottom: spacing.xl,
-  },
-  inputContainer: {
-    marginBottom: spacing.md,
-  },
-  label: {
-    fontSize: 14,
-    fontWeight: '500',
-    color: colors.text,
-    marginBottom: spacing.xs,
-  },
-  input: {
-    backgroundColor: colors.card,
-    borderRadius: borderRadius.md,
-    padding: spacing.md,
-    fontSize: 16,
-    color: colors.text,
-  },
-  button: {
-    backgroundColor: colors.primary,
-    borderRadius: borderRadius.md,
-    padding: spacing.md,
-    alignItems: 'center',
-    marginTop: spacing.md,
-  },
-  buttonDisabled: {
-    opacity: 0.6,
-  },
-  buttonText: {
-    color: colors.textInverse,
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  linkButton: {
-    marginTop: spacing.lg,
-    alignItems: 'center',
-  },
-  linkText: {
-    color: colors.primary,
-    fontSize: 14,
-  },
-});
@@ -1,19 +1,57 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo } from 'react';
 import { View, Text, ScrollView, StyleSheet, TouchableOpacity, Linking } from 'react-native';
 import { useLocalSearchParams, useRouter } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
+import * as Location from 'expo-location';
 import { getMedicine, getMedicinePharmacies } from '../../services/medicines';
+import { subscribeToMedicine, unsubscribeFromMedicine } from '../../services/notifications';
+import { useAuth } from '../../hooks/useAuth';
 import { StockBadge } from '../../components/StockBadge';
 import { LoadingSpinner } from '../../components/LoadingSpinner';
-import { colors, spacing, borderRadius } from '../../constants/theme';
+import { useThemeContext } from '../../components/ThemeProvider';
+import { spacing, borderRadius } from '../../constants/theme';
 import { Medicine, PharmacyMedicine } from '../../types';

+function haversineKm(lat1: number, lon1: number, lat2: number, lon2: number): number {
+  const R = 6371;
+  const dLat = ((lat2 - lat1) * Math.PI) / 180;
+  const dLon = ((lon2 - lon1) * Math.PI) / 180;
+  const a =
+    Math.sin(dLat / 2) ** 2 +
+    Math.cos((lat1 * Math.PI) / 180) *
+      Math.cos((lat2 * Math.PI) / 180) *
+      Math.sin(dLon / 2) ** 2;
+  return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
+}
+
+function formatDistance(km: number): string {
+  if (km < 1) return `${Math.round(km * 1000)} m`;
+  if (km < 10) return `${km.toFixed(1)} km`;
+  return `${Math.round(km)} km`;
+}
+
+function getPharmacyLat(p: PharmacyMedicine): number | null {
+  return p.latitude ?? p.pharmacy?.latitude ?? null;
+}
+
+function getPharmacyLon(p: PharmacyMedicine): number | null {
+  return p.longitude ?? p.pharmacy?.longitude ?? null;
+}
+
 export default function MedicineDetailScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const router = useRouter();
+  const { colors } = useThemeContext();
+  const { isAuthenticated } = useAuth();
  const [medicine, setMedicine] = useState<Medicine | null>(null);
  const [pharmacies, setPharmacies] = useState<PharmacyMedicine[]>([]);
  const [isLoading, setIsLoading] = useState(true);
+  const [sortByDistance, setSortByDistance] = useState(false);
+  const [userPosition, setUserPosition] = useState<{ lat: number; lon: number } | null>(null);
+  const [locating, setLocating] = useState(false);
+  const [locationError, setLocationError] = useState<string | null>(null);
+  const [isSubscribed, setIsSubscribed] = useState(false);
+  const [togglingSub, setTogglingSub] = useState(false);

  useEffect(() => {
    if (!id) return;
@@ -36,6 +74,82 @@ export default function MedicineDetailScreen() {
    fetchMedicine();
  }, [id]);

+  const handleSortByDistance = async () => {
+    if (sortByDistance) {
+      setSortByDistance(false);
+      return;
+    }
+
+    setLocating(true);
+    setLocationError(null);
+
+    try {
+      const { status } = await Location.requestForegroundPermissionsAsync();
+      if (status !== 'granted') {
+        setLocationError('Permiso de ubicación denegado');
+        setLocating(false);
+        return;
+      }
+
+      const pos = await Location.getCurrentPositionAsync({ accuracy: Location.Accuracy.Balanced });
+      setUserPosition({ lat: pos.coords.latitude, lon: pos.coords.longitude });
+      setSortByDistance(true);
+    } catch {
+      setLocationError('No se pudo obtener tu ubicación');
+    } finally {
+      setLocating(false);
+    }
+  };
+
+  const handleToggleSubscription = async () => {
+    if (!isAuthenticated || !id) return;
+    setTogglingSub(true);
+    try {
+      if (isSubscribed) {
+        await unsubscribeFromMedicine(id as string);
+        setIsSubscribed(false);
+      } else {
+        await subscribeToMedicine(id as string, medicine?.name || null);
+        setIsSubscribed(true);
+      }
+    } catch {
+      // silently fail
+    } finally {
+      setTogglingSub(false);
+    }
+  };
+
+  const sortedPharmacies = useMemo(() => {
+    if (!sortByDistance || !userPosition) return pharmacies;
+
+    return [...pharmacies]
+      .map((p) => {
+        const lat = getPharmacyLat(p);
+        const lon = getPharmacyLon(p);
+        const distance =
+          lat != null && lon != null
+            ? haversineKm(userPosition.lat, userPosition.lon, lat, lon)
+            : Infinity;
+        return { ...p, _distance: distance };
+      })
+      .sort((a, b) => a._distance - b._distance);
+  }, [pharmacies, sortByDistance, userPosition]);
+
+  const locatedPharmacies = useMemo(
+    () =>
+      sortedPharmacies.filter(
+        (p) => getPharmacyLat(p) != null && getPharmacyLon(p) != null
+      ),
+    [sortedPharmacies]
+  );
+
+  const mapCenter = useMemo(() => {
+    if (locatedPharmacies.length === 0) return { latitude: 40.4168, longitude: -3.7038 };
+    const lat = locatedPharmacies.reduce((s, p) => s + (getPharmacyLat(p) || 0), 0) / locatedPharmacies.length;
+    const lon = locatedPharmacies.reduce((s, p) => s + (getPharmacyLon(p) || 0), 0) / locatedPharmacies.length;
+    return { latitude: lat, longitude: lon };
+  }, [locatedPharmacies]);
+
  const handleDirections = (latitude: number, longitude: number) => {
    const url = `https://www.google.com/maps/dir/?api=1&destination=${latitude},${longitude}`;
    Linking.openURL(url);
@@ -47,75 +161,146 @@ export default function MedicineDetailScreen() {

  if (!medicine) {
    return (
-      <View style={styles.errorContainer}>
-        <Text style={styles.errorText}>Medicamento no encontrado</Text>
+      <View style={[styles.errorContainer, { backgroundColor: colors.background }]}>
+        <Text style={[styles.errorText, { color: colors.textSecondary }]}>Medicamento no encontrado</Text>
      </View>
    );
  }

  return (
-    <ScrollView style={styles.container}>
-      <View style={styles.header}>
-        <Text style={styles.name}>{medicine.nombre}</Text>
-        <StockBadge stock={medicine.stock} />
+    <ScrollView style={[styles.container, { backgroundColor: colors.background }]}>
+      <View style={[styles.header, { backgroundColor: colors.card }]}>
+        <Text style={[styles.name, { color: colors.text }]}>{medicine.name}</Text>
+        <View style={styles.headerRight}>
+          {medicine.stock != null && <StockBadge stock={medicine.stock} />}
+          {isAuthenticated && (
+            <TouchableOpacity
+              style={[styles.bellButton, { backgroundColor: isSubscribed ? colors.primary : colors.surfaceVariant }]}
+              onPress={handleToggleSubscription}
+              disabled={togglingSub}
+            >
+              <Ionicons
+                name={isSubscribed ? 'notifications' : 'notifications-outline'}
+                size={20}
+                color={isSubscribed ? '#fff' : colors.textSecondary}
+              />
+            </TouchableOpacity>
+          )}
+        </View>
      </View>

-      <View style={styles.infoSection}>
-        <InfoRow label="Principio activo" value={medicine.principioActivo} />
-        <InfoRow label="Laboratorio" value={medicine.laboratorio} />
-        <InfoRow label="Forma farmacéutica" value={medicine.formaFarmaceutica} />
+      <View style={[styles.infoSection, { backgroundColor: colors.card }]}>
+        <InfoRow label="Principio activo" value={medicine.active_ingredient} colors={colors} />
+        <InfoRow label="Laboratorio" value={medicine.laboratory} colors={colors} />
+        <InfoRow label="Forma farmacéutica" value={medicine.form} colors={colors} />
+        <InfoRow label="Dosificación" value={medicine.dosage} colors={colors} />
        <InfoRow
          label="Precio"
-          value={medicine.precio ? `${medicine.precio.toFixed(2)} €` : 'No disponible'}
+          value={medicine.precio != null ? `${medicine.precio.toFixed(2)} €` : 'No disponible'}
+          colors={colors}
        />
-        <InfoRow label="Registro" value={medicine.nregistro} />
+        <InfoRow label="Registro" value={medicine.nregistro} colors={colors} />
      </View>

-      <View style={styles.pharmaciesSection}>
-        <Text style={styles.sectionTitle}>
-          Farmacias ({pharmacies.length})
-        </Text>
+      {locatedPharmacies.length > 0 && (
+        <View style={[styles.mapContainer, { backgroundColor: colors.surfaceVariant }]}>
+          <Ionicons name="map-outline" size={48} color={colors.textSecondary} />
+          <Text style={[styles.mapPlaceholder, { color: colors.textSecondary }]}>
+            Mapa próximamente…
+          </Text>
+        </View>
+      )}

-        {pharmacies.length === 0 ? (
-          <Text style={styles.noPharmacies}>No hay farmacias con este medicamento</Text>
+      <View style={styles.pharmaciesSection}>
+        <View style={styles.pharmaciesHeader}>
+          <Text style={[styles.sectionTitle, { color: colors.text }]}>
+            Farmacias ({sortedPharmacies.length})
+          </Text>
+          <TouchableOpacity
+            style={[styles.sortButton, sortByDistance && styles.sortButtonActive, { backgroundColor: sortByDistance ? colors.primary : colors.primaryContainer, borderColor: colors.primary }]}
+            onPress={handleSortByDistance}
+            disabled={locating}
+          >
+            <Ionicons name="location" size={16} color={sortByDistance ? '#fff' : colors.primary} />
+            <Text style={[styles.sortButtonText, sortByDistance && styles.sortButtonTextActive, { color: sortByDistance ? '#fff' : colors.primary }]}>
+              {locating
+                ? 'Localizando…'
+                : sortByDistance
+                  ? 'Distancia · Reset'
+                  : 'Ordenar por distancia'}
+            </Text>
+          </TouchableOpacity>
+        </View>
+
+        {locationError && (
+          <View style={[styles.locationErrorContainer, { backgroundColor: colors.dangerContainer }]}>
+            <Text style={[styles.locationErrorText, { color: colors.danger }]}>{locationError}</Text>
+            <TouchableOpacity onPress={handleSortByDistance}>
+              <Text style={[styles.retryText, { color: colors.primary }]}>Reintentar</Text>
+            </TouchableOpacity>
+          </View>
+        )}
+
+        {sortedPharmacies.length === 0 ? (
+          <Text style={[styles.noPharmacies, { color: colors.textSecondary }]}>No hay farmacias disponibles</Text>
        ) : (
-          pharmacies.map((pharm) => (
-            <View key={pharm.id} style={styles.pharmacyCard}>
-              <TouchableOpacity
-                style={styles.pharmacyCardContent}
-                onPress={() => router.push(`/pharmacy/${pharm.pharmacy_id}`)}
-              >
-                <View style={styles.pharmacyInfo}>
-                  <Text style={styles.pharmacyName}>{pharm.pharmacy?.name}</Text>
-                  <Text style={styles.pharmacyAddress}>{pharm.pharmacy?.address}</Text>
-                </View>
-                <View style={styles.pharmacyStock}>
-                  <Text style={styles.price}>{pharm.price.toFixed(2)} €</Text>
-                  <Text style={styles.stock}>Stock: {pharm.stock}</Text>
-                </View>
-              </TouchableOpacity>
-              {pharm.pharmacy?.latitude != null && pharm.pharmacy?.longitude != null && (
+          sortedPharmacies.map((pharm) => {
+            const lat = getPharmacyLat(pharm);
+            const lon = getPharmacyLon(pharm);
+            const distanceKm =
+              sortByDistance && userPosition && lat != null && lon != null
+                ? haversineKm(userPosition.lat, userPosition.lon, lat, lon)
+                : null;
+
+            return (
+              <View key={pharm.id} style={[styles.pharmacyCard, { backgroundColor: colors.card }]}>
                <TouchableOpacity
-                  style={styles.directionsButton}
-                  onPress={() => handleDirections(pharm.pharmacy.latitude, pharm.pharmacy.longitude)}
+                  style={styles.pharmacyCardContent}
+                  onPress={() => router.push(`/pharmacy/${pharm.pharmacy_id || pharm.id}`)}
                >
-                  <Ionicons name="navigate" size={16} color={colors.primary} />
-                  <Text style={styles.directionsText}>Cómo llegar</Text>
+                  <View style={styles.pharmacyInfo}>
+                    <View style={styles.pharmacyNameRow}>
+                      <Text style={[styles.pharmacyName, { color: colors.text }]}>{pharm.pharmacy?.name || pharm.name}</Text>
+                      {distanceKm != null && (
+                        <Text style={[styles.pharmacyDistance, { color: colors.primary, backgroundColor: colors.primaryContainer }]}>{formatDistance(distanceKm)}</Text>
+                      )}
+                    </View>
+                    <Text style={[styles.pharmacyAddress, { color: colors.textSecondary }]}>{pharm.pharmacy?.address || pharm.address}</Text>
+                  </View>
+                  <View style={styles.pharmacyStock}>
+                    {pharm.price != null ? (
+                      <Text style={[styles.price, { color: colors.primary }]}>{pharm.price.toFixed(2)} €</Text>
+                    ) : (
+                      <Text style={[styles.price, { color: colors.primary }]}>Consultar precio</Text>
+                    )}
+                    {pharm.stock > 0 && (
+                      <Text style={[styles.stock, { color: colors.textSecondary }]}>Stock: {pharm.stock}</Text>
+                    )}
+                  </View>
                </TouchableOpacity>
-              )}
-            </View>
-          ))
+                {lat != null && lon != null && (
+                  <TouchableOpacity
+                    style={[styles.directionsButton, { borderTopColor: colors.border }]}
+                    onPress={() => handleDirections(lat, lon)}
+                  >
+                    <Ionicons name="navigate" size={16} color={colors.primary} />
+                    <Text style={[styles.directionsText, { color: colors.primary }]}>Cómo llegar</Text>
+                  </TouchableOpacity>
+                )}
+              </View>
+            );
+          })
        )}
      </View>
    </ScrollView>
  );
 }

-function InfoRow({ label, value }: { label: string; value: string }) {
+function InfoRow({ label, value, colors }: { label: string; value: string; colors: any }) {
  return (
-    <View style={styles.infoRow}>
-      <Text style={styles.infoLabel}>{label}</Text>
-      <Text style={styles.infoValue}>{value}</Text>
+    <View style={[styles.infoRow, { borderBottomColor: colors.border }]}>
+      <Text style={[styles.infoLabel, { color: colors.textSecondary }]}>{label}</Text>
+      <Text style={[styles.infoValue, { color: colors.text }]}>{value}</Text>
    </View>
  );
 }
@@ -123,24 +308,32 @@ function InfoRow({ label, value }: { label: string; value: string }) {
 const styles = StyleSheet.create({
  container: {
    flex: 1,
-    backgroundColor: colors.background,
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'flex-start',
    padding: spacing.lg,
-    backgroundColor: colors.card,
+  },
+  headerRight: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
  },
  name: {
    flex: 1,
    fontSize: 22,
    fontWeight: 'bold',
-    color: colors.text,
    marginRight: spacing.sm,
  },
+  bellButton: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
  infoSection: {
-    backgroundColor: colors.card,
    marginTop: spacing.sm,
    padding: spacing.lg,
  },
@@ -149,34 +342,82 @@ const styles = StyleSheet.create({
    justifyContent: 'space-between',
    paddingVertical: spacing.sm,
    borderBottomWidth: 1,
-    borderBottomColor: colors.border,
  },
  infoLabel: {
-    fontSize: 14,
-    color: colors.textSecondary,
+    fontSize: 13,
+    flexShrink: 0,
+    marginRight: spacing.sm,
  },
  infoValue: {
+    fontSize: 13,
+    fontWeight: '500',
+    flex: 1,
+    textAlign: 'right',
+  },
+  mapContainer: {
+    marginTop: spacing.sm,
+    marginHorizontal: spacing.lg,
+    height: 200,
+    borderRadius: borderRadius.lg,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.sm,
+  },
+  mapPlaceholder: {
    fontSize: 14,
-    color: colors.text,
    fontWeight: '500',
  },
  pharmaciesSection: {
    marginTop: spacing.sm,
    padding: spacing.lg,
  },
+  pharmaciesHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: spacing.md,
+  },
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
-    color: colors.text,
-    marginBottom: spacing.md,
+  },
+  sortButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.xs,
+    paddingHorizontal: spacing.sm + 4,
+    paddingVertical: spacing.xs + 2,
+    borderRadius: borderRadius.full,
+    borderWidth: 1,
+  },
+  sortButtonActive: {},
+  sortButtonText: {
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  sortButtonTextActive: {},
+  locationErrorContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    padding: spacing.sm,
+    marginBottom: spacing.sm,
+    borderRadius: borderRadius.md,
+  },
+  locationErrorText: {
+    flex: 1,
+    fontSize: 13,
+  },
+  retryText: {
+    fontSize: 13,
+    fontWeight: '600',
  },
  noPharmacies: {
-    color: colors.textSecondary,
    textAlign: 'center',
    padding: spacing.xl,
  },
  pharmacyCard: {
-    backgroundColor: colors.card,
    borderRadius: borderRadius.lg,
    marginBottom: spacing.sm,
    overflow: 'hidden',
@@ -194,14 +435,27 @@ const styles = StyleSheet.create({
  pharmacyInfo: {
    flex: 1,
  },
+  pharmacyNameRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
  pharmacyName: {
+    flex: 1,
    fontSize: 16,
    fontWeight: '600',
-    color: colors.text,
+    marginRight: spacing.sm,
+  },
+  pharmacyDistance: {
+    fontSize: 12,
+    fontWeight: '600',
+    paddingHorizontal: spacing.sm,
+    paddingVertical: 2,
+    borderRadius: borderRadius.full,
+    overflow: 'hidden',
  },
  pharmacyAddress: {
    fontSize: 14,
-    color: colors.textSecondary,
    marginTop: spacing.xs,
  },
  pharmacyStock: {
@@ -210,11 +464,9 @@ const styles = StyleSheet.create({
  price: {
    fontSize: 16,
    fontWeight: '600',
-    color: colors.primary,
  },
  stock: {
    fontSize: 12,
-    color: colors.textSecondary,
    marginTop: spacing.xs,
  },
  directionsButton: {
@@ -224,10 +476,8 @@ const styles = StyleSheet.create({
    gap: spacing.xs,
    paddingVertical: spacing.sm,
    borderTopWidth: 1,
-    borderTopColor: colors.border,
  },
  directionsText: {
-    color: colors.primary,
    fontSize: 14,
    fontWeight: '600',
  },
@@ -238,6 +488,5 @@ const styles = StyleSheet.create({
  },
  errorText: {
    fontSize: 16,
-    color: colors.textSecondary,
  },
 });
@@ -4,16 +4,22 @@ import { useLocalSearchParams, useRouter } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
 import MapView, { Marker } from 'react-native-maps';
 import { getPharmacy, getPharmacyMedicines } from '../../services/pharmacies';
+import { subscribeToMedicine, unsubscribeFromMedicine } from '../../services/notifications';
+import { useAuth } from '../../hooks/useAuth';
 import { LoadingSpinner } from '../../components/LoadingSpinner';
-import { colors, spacing, borderRadius } from '../../constants/theme';
+import { useThemeContext } from '../../components/ThemeProvider';
+import { spacing, borderRadius } from '../../constants/theme';
 import { Pharmacy, PharmacyMedicine } from '../../types';

 export default function PharmacyDetailScreen() {
  const { id } = useLocalSearchParams<{ id: string }>();
  const router = useRouter();
+  const { colors } = useThemeContext();
+  const { isAuthenticated } = useAuth();
  const [pharmacy, setPharmacy] = useState<Pharmacy | null>(null);
  const [medicines, setMedicines] = useState<PharmacyMedicine[]>([]);
  const [isLoading, setIsLoading] = useState(true);
+  const [subscribedMeds, setSubscribedMeds] = useState<Set<string>>(new Set());

  useEffect(() => {
    if (!id) return;
@@ -49,46 +55,67 @@ export default function PharmacyDetailScreen() {
    }
  };

+  const handleToggleMedSubscription = async (nregistro: string, medicineName: string) => {
+    if (!isAuthenticated) return;
+    const key = nregistro;
+    const isSub = subscribedMeds.has(key);
+    try {
+      if (isSub) {
+        await unsubscribeFromMedicine(nregistro, Number(id));
+        setSubscribedMeds(prev => {
+          const next = new Set(prev);
+          next.delete(key);
+          return next;
+        });
+      } else {
+        await subscribeToMedicine(nregistro, medicineName, Number(id));
+        setSubscribedMeds(prev => new Set(prev).add(key));
+      }
+    } catch {
+      // silently fail
+    }
+  };
+
  if (isLoading) {
    return <LoadingSpinner message="Cargando farmacia..." />;
  }

  if (!pharmacy) {
    return (
-      <View style={styles.errorContainer}>
-        <Text style={styles.errorText}>Farmacia no encontrada</Text>
+      <View style={[styles.errorContainer, { backgroundColor: colors.background }]}>
+        <Text style={[styles.errorText, { color: colors.textSecondary }]}>Farmacia no encontrada</Text>
      </View>
    );
  }

  return (
-    <ScrollView style={styles.container}>
-      <View style={styles.header}>
-        <Text style={styles.name}>{pharmacy.name}</Text>
+    <ScrollView style={[styles.container, { backgroundColor: colors.background }]}>
+      <View style={[styles.header, { backgroundColor: colors.card }]}>
+        <Text style={[styles.name, { color: colors.text }]}>{pharmacy.name}</Text>
      </View>

-      <View style={styles.actionsRow}>
+      <View style={[styles.actionsRow, { backgroundColor: colors.card, borderBottomColor: colors.separator }]}>
        <TouchableOpacity style={styles.actionButton} onPress={handleCall}>
          <Ionicons name="call" size={20} color={colors.primary} />
-          <Text style={styles.actionText}>Llamar</Text>
+          <Text style={[styles.actionText, { color: colors.primary }]}>Llamar</Text>
        </TouchableOpacity>

        <TouchableOpacity style={styles.actionButton} onPress={handleDirections}>
          <Ionicons name="navigate" size={20} color={colors.primary} />
-          <Text style={styles.actionText}>Cómo llegar</Text>
+          <Text style={[styles.actionText, { color: colors.primary }]}>Cómo llegar</Text>
        </TouchableOpacity>
      </View>

-      <View style={styles.infoSection}>
+      <View style={[styles.infoSection, { backgroundColor: colors.card }]}>
        <View style={styles.infoRow}>
          <Ionicons name="location" size={18} color={colors.textSecondary} />
-          <Text style={styles.infoText}>{pharmacy.address}</Text>
+          <Text style={[styles.infoText, { color: colors.text }]}>{pharmacy.address}</Text>
        </View>

        {pharmacy.phone && (
          <View style={styles.infoRow}>
            <Ionicons name="call" size={18} color={colors.textSecondary} />
-            <Text style={styles.infoText}>{pharmacy.phone}</Text>
+            <Text style={[styles.infoText, { color: colors.text }]}>{pharmacy.phone}</Text>
          </View>
        )}
      </View>
@@ -115,29 +142,48 @@ export default function PharmacyDetailScreen() {
      </View>

      <View style={styles.medicinesSection}>
-        <Text style={styles.sectionTitle}>
+        <Text style={[styles.sectionTitle, { color: colors.text }]}>
          Medicamentos ({medicines.length})
        </Text>

        {medicines.length === 0 ? (
-          <Text style={styles.noMedicines}>No hay medicamentos disponibles</Text>
+          <Text style={[styles.noMedicines, { color: colors.textSecondary }]}>No hay medicamentos disponibles</Text>
        ) : (
-          medicines.map((med) => (
-            <TouchableOpacity
-              key={med.id}
-              style={styles.medicineCard}
-              onPress={() => router.push(`/medicine/${med.medicine_nregistro}`)}
-            >
-              <View style={styles.medicineInfo}>
-                <Text style={styles.medicineName}>{med.medicine_name}</Text>
-                <Text style={styles.medicineNregistro}>Reg: {med.medicine_nregistro}</Text>
+          medicines.map((med) => {
+            const isSub = subscribedMeds.has(med.medicine_nregistro);
+            return (
+              <View key={med.id} style={[styles.medicineCard, { backgroundColor: colors.card }]}>
+                <TouchableOpacity
+                  style={styles.medicineCardContent}
+                  onPress={() => router.push(`/medicine/${med.medicine_nregistro}`)}
+                >
+                  <View style={styles.medicineInfo}>
+                    <Text style={[styles.medicineName, { color: colors.text }]}>{med.medicine_name}</Text>
+                    <Text style={[styles.medicineNregistro, { color: colors.textSecondary }]}>Reg: {med.medicine_nregistro}</Text>
+                  </View>
+                  <View style={styles.medicineStock}>
+                    <Text style={[styles.price, { color: colors.primary }]}>{med.price.toFixed(2)} €</Text>
+                    <Text style={[styles.stock, { color: colors.textSecondary }]}>Stock: {med.stock}</Text>
+                  </View>
+                </TouchableOpacity>
+                {isAuthenticated && (
+                  <TouchableOpacity
+                    style={[styles.bellButton, { backgroundColor: isSub ? colors.primary : colors.surfaceVariant, borderTopColor: colors.border }]}
+                    onPress={() => handleToggleMedSubscription(med.medicine_nregistro, med.medicine_name)}
+                  >
+                    <Ionicons
+                      name={isSub ? 'notifications' : 'notifications-outline'}
+                      size={18}
+                      color={isSub ? '#fff' : colors.textSecondary}
+                    />
+                    <Text style={[styles.bellText, { color: isSub ? '#fff' : colors.textSecondary }]}>
+                      {isSub ? 'Notificaciones activas' : 'Notificarme cuando haya stock'}
+                    </Text>
+                  </TouchableOpacity>
+                )}
              </View>
-              <View style={styles.medicineStock}>
-                <Text style={styles.price}>{med.price.toFixed(2)} €</Text>
-                <Text style={styles.stock}>Stock: {med.stock}</Text>
-              </View>
-            </TouchableOpacity>
-          ))
+            );
+          })
        )}
      </View>
    </ScrollView>
@@ -147,24 +193,19 @@ export default function PharmacyDetailScreen() {
 const styles = StyleSheet.create({
  container: {
    flex: 1,
-    backgroundColor: colors.background,
  },
  header: {
    padding: spacing.md,
-    backgroundColor: colors.card,
  },
  name: {
    fontSize: 22,
    fontWeight: 'bold',
-    color: colors.text,
  },
  actionsRow: {
    flexDirection: 'row',
    justifyContent: 'space-around',
    padding: spacing.md,
-    backgroundColor: colors.card,
    borderBottomWidth: 1,
-    borderBottomColor: colors.separator,
  },
  actionButton: {
    flexDirection: 'row',
@@ -173,12 +214,10 @@ const styles = StyleSheet.create({
  },
  actionText: {
    marginLeft: spacing.xs,
-    color: colors.primary,
    fontWeight: '500',
  },
  infoSection: {
    padding: spacing.md,
-    backgroundColor: colors.card,
    marginTop: spacing.sm,
  },
  infoRow: {
@@ -190,7 +229,6 @@ const styles = StyleSheet.create({
    flex: 1,
    marginLeft: spacing.sm,
    fontSize: 16,
-    color: colors.text,
  },
  mapContainer: {
    height: 200,
@@ -206,21 +244,21 @@ const styles = StyleSheet.create({
  sectionTitle: {
    fontSize: 18,
    fontWeight: '600',
-    color: colors.text,
    marginBottom: spacing.md,
  },
  noMedicines: {
-    color: colors.textSecondary,
    textAlign: 'center',
    padding: spacing.xl,
  },
  medicineCard: {
+    borderRadius: borderRadius.md,
+    marginBottom: spacing.sm,
+    overflow: 'hidden',
+  },
+  medicineCardContent: {
    flexDirection: 'row',
    justifyContent: 'space-between',
-    backgroundColor: colors.card,
-    borderRadius: borderRadius.md,
    padding: spacing.md,
-    marginBottom: spacing.sm,
  },
  medicineInfo: {
    flex: 1,
@@ -228,11 +266,9 @@ const styles = StyleSheet.create({
  medicineName: {
    fontSize: 16,
    fontWeight: '500',
-    color: colors.text,
  },
  medicineNregistro: {
    fontSize: 12,
-    color: colors.textSecondary,
    marginTop: spacing.xs,
  },
  medicineStock: {
@@ -241,13 +277,23 @@ const styles = StyleSheet.create({
  price: {
    fontSize: 16,
    fontWeight: '600',
-    color: colors.primary,
  },
  stock: {
    fontSize: 12,
-    color: colors.textSecondary,
    marginTop: spacing.xs,
  },
+  bellButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: spacing.xs,
+    paddingVertical: spacing.sm,
+    borderTopWidth: 1,
+  },
+  bellText: {
+    fontSize: 13,
+    fontWeight: '600',
+  },
  errorContainer: {
    flex: 1,
    justifyContent: 'center',
@@ -255,6 +301,5 @@ const styles = StyleSheet.create({
  },
  errorText: {
    fontSize: 16,
-    color: colors.textSecondary,
  },
 });
@@ -0,0 +1,249 @@
+import React, { useEffect, useState } from 'react';
+import { View, Text, ScrollView, StyleSheet, Image, ActivityIndicator } from 'react-native';
+import { useLocalSearchParams } from 'expo-router';
+import { getProduct, Product } from '../../../services/products';
+import { LoadingSpinner } from '../../../components/LoadingSpinner';
+import { useThemeContext } from '../../../components/ThemeProvider';
+import { spacing, borderRadius } from '../../../constants/theme';
+
+export default function ProductDetailScreen() {
+  const { source, id } = useLocalSearchParams<{ source: string; id: string }>();
+  const { colors } = useThemeContext();
+  const [product, setProduct] = useState<Product | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    if (!source || !id) return;
+
+    const fetchProduct = async () => {
+      try {
+        const data = await getProduct(source, id);
+        if (data) {
+          setProduct(data);
+        } else {
+          setError(true);
+        }
+      } catch {
+        setError(true);
+      } finally {
+        setIsLoading(false);
+      }
+    };
+
+    fetchProduct();
+  }, [source, id]);
+
+  if (isLoading) {
+    return <LoadingSpinner message="Cargando producto..." />;
+  }
+
+  if (error || !product) {
+    return (
+      <View style={[styles.errorContainer, { backgroundColor: colors.background }]}>
+        <Text style={[styles.errorText, { color: colors.textSecondary }]}>Producto no encontrado</Text>
+      </View>
+    );
+  }
+
+  const isCima = product.source === 'cima';
+
+  return (
+    <ScrollView style={[styles.container, { backgroundColor: colors.background }]}>
+      {product.image_url ? (
+        <Image source={{ uri: product.image_url }} style={styles.image} resizeMode="contain" />
+      ) : (
+        <View style={[styles.imagePlaceholder, { backgroundColor: colors.surfaceLow }]}>
+          <Text style={[styles.placeholderText, { color: colors.textSecondary }]}>Sin imagen</Text>
+        </View>
+      )}
+
+      <View style={[styles.header, { backgroundColor: colors.card }]}>
+        <View style={styles.nameRow}>
+          <Text style={[styles.name, { color: colors.text }]}>{product.name}</Text>
+          <View style={[styles.badge, { backgroundColor: isCima ? '#2b5bb5' : '#4caf50' }]}>
+            <Text style={styles.badgeText}>{isCima ? 'CIMA' : 'OFF'}</Text>
+          </View>
+        </View>
+        {product.brand ? (
+          <Text style={[styles.brand, { color: colors.textSecondary }]}>{product.brand}</Text>
+        ) : null}
+        {product.category ? (
+          <Text style={[styles.category, { color: colors.textSecondary }]}>{product.category}</Text>
+        ) : null}
+      </View>
+
+      {isCima ? (
+        <View style={[styles.infoSection, { backgroundColor: colors.card }]}>
+          <Text style={[styles.sectionTitle, { color: colors.text }]}>Detalles CIMA</Text>
+          {product.active_ingredient && (
+            <InfoRow label="Principio activo" value={product.active_ingredient} colors={colors} />
+          )}
+          {product.dosage && (
+            <InfoRow label="Dosificación" value={product.dosage} colors={colors} />
+          )}
+          {product.form && (
+            <InfoRow label="Forma farmacéutica" value={product.form} colors={colors} />
+          )}
+          {product.prescription && (
+            <InfoRow label="Tipo de dispensación" value={product.prescription} colors={colors} />
+          )}
+          <InfoRow label="Comercializado" value={product.commercialized ? 'Sí' : 'No'} colors={colors} />
+        </View>
+      ) : (
+        <View style={[styles.infoSection, { backgroundColor: colors.card }]}>
+          <Text style={[styles.sectionTitle, { color: colors.text }]}>Información nutricional</Text>
+          {product.nutriscore && (
+            <InfoRow label="Nutri-Score" value={product.nutriscore.toUpperCase()} colors={colors} />
+          )}
+          {product.nova_group != null && (
+            <InfoRow label="Grupo NOVA" value={String(product.nova_group)} colors={colors} />
+          )}
+          {product.eco_score && (
+            <InfoRow label="Eco-Score" value={product.eco_score.toUpperCase()} colors={colors} />
+          )}
+          {product.ingredients && (
+            <View style={[styles.infoRow, { borderBottomColor: colors.border }]}>
+              <Text style={[styles.infoLabel, { color: colors.textSecondary }]}>Ingredientes</Text>
+              <Text style={[styles.infoValueMultiline, { color: colors.text }]}>{product.ingredients}</Text>
+            </View>
+          )}
+        </View>
+      )}
+
+      {isCima && product.photos && product.photos.length > 0 && (
+        <View style={[styles.infoSection, { backgroundColor: colors.card }]}>
+          <Text style={[styles.sectionTitle, { color: colors.text }]}>Imágenes</Text>
+          <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.photosScroll}>
+            {product.photos.map((photo, i) => (
+              <View key={i} style={styles.photoItem}>
+                <Image source={{ uri: photo.url }} style={styles.photoImage} resizeMode="contain" />
+                <Text style={[styles.photoLabel, { color: colors.textSecondary }]}>{photo.tipo}</Text>
+              </View>
+            ))}
+          </ScrollView>
+        </View>
+      )}
+    </ScrollView>
+  );
+}
+
+function InfoRow({ label, value, colors }: { label: string; value: string; colors: any }) {
+  return (
+    <View style={[styles.infoRow, { borderBottomColor: colors.border }]}>
+      <Text style={[styles.infoLabel, { color: colors.textSecondary }]}>{label}</Text>
+      <Text style={[styles.infoValue, { color: colors.text }]}>{value}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  image: {
+    width: '100%',
+    height: 260,
+    backgroundColor: '#f5f5f5',
+  },
+  imagePlaceholder: {
+    width: '100%',
+    height: 160,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  placeholderText: {
+    fontSize: 14,
+  },
+  header: {
+    padding: spacing.lg,
+  },
+  nameRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    gap: spacing.sm,
+  },
+  name: {
+    flex: 1,
+    fontSize: 22,
+    fontWeight: 'bold',
+  },
+  badge: {
+    paddingHorizontal: spacing.sm,
+    paddingVertical: spacing.xs,
+    borderRadius: borderRadius.full,
+    overflow: 'hidden',
+  },
+  badgeText: {
+    color: '#fff',
+    fontSize: 12,
+    fontWeight: '700',
+  },
+  brand: {
+    fontSize: 15,
+    marginTop: spacing.xs,
+  },
+  category: {
+    fontSize: 13,
+    marginTop: spacing.xs,
+  },
+  infoSection: {
+    marginTop: spacing.sm,
+    padding: spacing.lg,
+  },
+  sectionTitle: {
+    fontSize: 16,
+    fontWeight: '600',
+    marginBottom: spacing.sm,
+  },
+  infoRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingVertical: spacing.sm,
+    borderBottomWidth: 1,
+  },
+  infoLabel: {
+    fontSize: 13,
+    flexShrink: 0,
+    marginRight: spacing.sm,
+  },
+  infoValue: {
+    fontSize: 13,
+    fontWeight: '500',
+    flex: 1,
+    textAlign: 'right',
+  },
+  infoValueMultiline: {
+    fontSize: 13,
+    fontWeight: '500',
+    flex: 1,
+    textAlign: 'right',
+  },
+  photosScroll: {
+    marginTop: spacing.xs,
+  },
+  photoItem: {
+    marginRight: spacing.md,
+    alignItems: 'center',
+    width: 120,
+  },
+  photoImage: {
+    width: 120,
+    height: 120,
+    borderRadius: borderRadius.md,
+    backgroundColor: '#f5f5f5',
+  },
+  photoLabel: {
+    fontSize: 11,
+    marginTop: spacing.xs,
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  errorText: {
+    fontSize: 16,
+  },
+});
@@ -2,7 +2,8 @@ import React, { useState } from 'react';
 import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 import { CameraView, useCameraPermissions } from 'expo-camera';
 import { Ionicons } from '@expo/vector-icons';
-import { colors, spacing, borderRadius } from '../constants/theme';
+import { useThemeContext } from './ThemeProvider';
+import { spacing, borderRadius } from '../constants/theme';

 interface BarcodeScannerProps {
  onBarcodeScanned: (barcode: string) => void;
@@ -12,6 +13,7 @@ interface BarcodeScannerProps {
 export function BarcodeScanner({ onBarcodeScanned, onClose }: BarcodeScannerProps) {
  const [permission, requestPermission] = useCameraPermissions();
  const [scanned, setScanned] = useState(false);
+  const { colors } = useThemeContext();

  if (!permission) {
    return <View style={styles.container} />;
@@ -19,17 +21,17 @@ export function BarcodeScanner({ onBarcodeScanned, onClose }: BarcodeScannerProp

  if (!permission.granted) {
    return (
-      <View style={styles.permissionContainer}>
+      <View style={[styles.permissionContainer, { backgroundColor: colors.background }]}>
        <Ionicons name="camera" size={64} color={colors.textSecondary} />
-        <Text style={styles.permissionTitle}>Permiso de cámara requerido</Text>
-        <Text style={styles.permissionText}>
+        <Text style={[styles.permissionTitle, { color: colors.text }]}>Permiso de cámara requerido</Text>
+        <Text style={[styles.permissionText, { color: colors.textSecondary }]}>
          Necesitamos acceso a la cámara para escanear códigos de barras
        </Text>
-        <TouchableOpacity style={styles.permissionButton} onPress={requestPermission}>
+        <TouchableOpacity style={[styles.permissionButton, { backgroundColor: colors.primary }]} onPress={requestPermission}>
          <Text style={styles.permissionButtonText}>Conceder permiso</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.cancelButton} onPress={onClose}>
-          <Text style={styles.cancelButtonText}>Cancelar</Text>
+          <Text style={[styles.cancelButtonText, { color: colors.textSecondary }]}>Cancelar</Text>
        </TouchableOpacity>
      </View>
    );
@@ -54,10 +56,10 @@ export function BarcodeScanner({ onBarcodeScanned, onClose }: BarcodeScannerProp
      
      <View style={styles.overlay}>
        <View style={styles.scannerFrame}>
-          <View style={[styles.corner, styles.topLeft]} />
-          <View style={[styles.corner, styles.topRight]} />
-          <View style={[styles.corner, styles.bottomLeft]} />
-          <View style={[styles.corner, styles.bottomRight]} />
+          <View style={[styles.corner, styles.topLeft, { borderColor: colors.primary }]} />
+          <View style={[styles.corner, styles.topRight, { borderColor: colors.primary }]} />
+          <View style={[styles.corner, styles.bottomLeft, { borderColor: colors.primary }]} />
+          <View style={[styles.corner, styles.bottomRight, { borderColor: colors.primary }]} />
        </View>
        
        <Text style={styles.instruction}>
@@ -72,7 +74,7 @@ export function BarcodeScanner({ onBarcodeScanned, onClose }: BarcodeScannerProp
      {scanned && (
        <View style={styles.scannedOverlay}>
          <TouchableOpacity 
-            style={styles.scanAgainButton}
+            style={[styles.scanAgainButton, { backgroundColor: colors.primary }]}
            onPress={() => setScanned(false)}
          >
            <Text style={styles.scanAgainText}>Escanear de nuevo</Text>
@@ -92,30 +94,26 @@ const styles = StyleSheet.create({
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
-    backgroundColor: colors.background,
    padding: spacing.xl,
  },
  permissionTitle: {
    fontSize: 20,
    fontWeight: 'bold',
-    color: colors.text,
    marginTop: spacing.lg,
  },
  permissionText: {
    fontSize: 16,
-    color: colors.textSecondary,
    textAlign: 'center',
    marginTop: spacing.sm,
    marginBottom: spacing.xl,
  },
  permissionButton: {
-    backgroundColor: colors.primary,
    borderRadius: borderRadius.md,
    paddingVertical: spacing.md,
    paddingHorizontal: spacing.xl,
  },
  permissionButtonText: {
-    color: colors.textInverse,
+    color: '#ffffff',
    fontSize: 16,
    fontWeight: '600',
  },
@@ -123,7 +121,6 @@ const styles = StyleSheet.create({
    marginTop: spacing.md,
  },
  cancelButtonText: {
-    color: colors.textSecondary,
    fontSize: 14,
  },
  overlay: {
@@ -143,7 +140,6 @@ const styles = StyleSheet.create({
    position: 'absolute',
    width: 30,
    height: 30,
-    borderColor: colors.primary,
  },
  topLeft: {
    top: 0,
@@ -170,7 +166,7 @@ const styles = StyleSheet.create({
    borderRightWidth: 3,
  },
  instruction: {
-    color: colors.textInverse,
+    color: '#ffffff',
    fontSize: 14,
    textAlign: 'center',
    marginTop: spacing.xl,
@@ -194,13 +190,12 @@ const styles = StyleSheet.create({
    right: spacing.xl,
  },
  scanAgainButton: {
-    backgroundColor: colors.primary,
    borderRadius: borderRadius.md,
    padding: spacing.md,
    alignItems: 'center',
  },
  scanAgainText: {
-    color: colors.textInverse,
+    color: '#ffffff',
    fontSize: 16,
    fontWeight: '600',
  },
@@ -1,16 +1,19 @@
 import React from 'react';
 import { View, ActivityIndicator, Text, StyleSheet } from 'react-native';
-import { colors, spacing } from '../constants/theme';
+import { useThemeContext } from './ThemeProvider';
+import { spacing } from '../constants/theme';

 interface LoadingSpinnerProps {
  message?: string;
 }

 export function LoadingSpinner({ message = 'Cargando...' }: LoadingSpinnerProps) {
+  const { colors } = useThemeContext();
+
  return (
    <View style={styles.container}>
      <ActivityIndicator size="large" color={colors.primary} />
-      <Text style={styles.message}>{message}</Text>
+      <Text style={[styles.message, { color: colors.textSecondary }]}>{message}</Text>
    </View>
  );
 }
@@ -25,6 +28,5 @@ const styles = StyleSheet.create({
  message: {
    marginTop: spacing.md,
    fontSize: 16,
-    color: colors.textSecondary,
  },
 });
@@ -2,7 +2,8 @@ import React from 'react';
 import { View, Text, StyleSheet, TouchableOpacity, useWindowDimensions } from 'react-native';
 import { useRouter } from 'expo-router';
 import { Ionicons } from '@expo/vector-icons';
-import { colors, spacing, borderRadius } from '../constants/theme';
+import { useThemeContext } from './ThemeProvider';
+import { spacing, borderRadius } from '../constants/theme';
 import { StockBadge } from './StockBadge';
 import { Medicine } from '../types';

@@ -16,6 +17,7 @@ export function MedicineCard({ medicine }: MedicineCardProps) {
  const router = useRouter();
  const { width } = useWindowDimensions();
  const isTablet = width >= TABLET_MIN_WIDTH;
+  const { colors } = useThemeContext();

  const handlePress = () => {
    router.push(`/medicine/${medicine.nregistro}`);
@@ -23,33 +25,33 @@ export function MedicineCard({ medicine }: MedicineCardProps) {

  return (
    <TouchableOpacity
-      style={[styles.card, isTablet && styles.cardTablet]}
+      style={[styles.card, isTablet && styles.cardTablet, { backgroundColor: colors.card }]}
      onPress={handlePress}
      activeOpacity={0.7}
    >
      <View style={styles.header}>
-        <Text style={[styles.name, isTablet && styles.nameTablet]} numberOfLines={2}>
-          {medicine.nombre}
+        <Text style={[styles.name, isTablet && styles.nameTablet, { color: colors.text }]} numberOfLines={2}>
+          {medicine.name}
        </Text>
-        <StockBadge stock={medicine.stock} />
+        {medicine.stock != null && <StockBadge stock={medicine.stock} />}
      </View>

-      <Text style={styles.principioActivo} numberOfLines={1}>
-        {medicine.principioActivo}
+      <Text style={[styles.principioActivo, { color: colors.textSecondary }]} numberOfLines={1}>
+        {medicine.active_ingredient}{medicine.dosage ? ` - ${medicine.dosage}` : ''}
      </Text>

      <View style={styles.footer}>
        <View style={styles.priceContainer}>
          <Ionicons name="pricetag" size={14} color={colors.textSecondary} />
-          <Text style={[styles.price, isTablet && styles.priceTablet]}>
-            {medicine.precio ? `${medicine.precio.toFixed(2)} €` : 'Sin precio'}
+          <Text style={[styles.price, isTablet && styles.priceTablet, { color: colors.primary }]}>
+            {medicine.precio != null ? `${medicine.precio.toFixed(2)} €` : 'Sin precio'}
          </Text>
        </View>

        <View style={styles.labContainer}>
          <Ionicons name="business" size={14} color={colors.textSecondary} />
-          <Text style={[styles.laboratorio, isTablet && styles.laboratorioTablet]} numberOfLines={1}>
-            {medicine.laboratorio}
+          <Text style={[styles.laboratorio, isTablet && styles.laboratorioTablet, { color: colors.textSecondary }]} numberOfLines={1}>
+            {medicine.laboratory}
          </Text>
        </View>
      </View>
@@ -59,7 +61,6 @@ export function MedicineCard({ medicine }: MedicineCardProps) {

 const styles = StyleSheet.create({
  card: {
-    backgroundColor: colors.card,
    borderRadius: borderRadius.lg,
    padding: spacing.md,
    marginHorizontal: spacing.lg,
@@ -86,7 +87,6 @@ const styles = StyleSheet.create({
    flex: 1,
    fontSize: 16,
    fontWeight: '600',
-    color: colors.text,
    marginRight: spacing.sm,
  },
  nameTablet: {
@@ -94,7 +94,6 @@ const styles = StyleSheet.create({
  },
  principioActivo: {
    fontSize: 14,
-    color: colors.textSecondary,
    marginBottom: spacing.sm,
  },
  footer: {
@@ -109,7 +108,6 @@ const styles = StyleSheet.create({
  price: {
    fontSize: 14,
    fontWeight: '600',
-    color: colors.primary,
    marginLeft: spacing.xs,
  },
  priceTablet: {
@@ -123,7 +121,6 @@ const styles = StyleSheet.create({
  },
  laboratorio: {
    fontSize: 12,
-    color: colors.textSecondary,
    marginLeft: spacing.xs,
    maxWidth: 120,
  },
@@ -1,7 +1,8 @@
 import React, { useState } from 'react';
 import { View, TextInput, StyleSheet, TouchableOpacity, useWindowDimensions } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
-import { colors, spacing, borderRadius } from '../constants/theme';
+import { useThemeContext } from './ThemeProvider';
+import { spacing, borderRadius } from '../constants/theme';

 const TABLET_MIN_WIDTH = 768;

@@ -20,6 +21,7 @@ export function SearchBar({
 }: SearchBarProps) {
  const { width } = useWindowDimensions();
  const isTablet = width >= TABLET_MIN_WIDTH;
+  const { colors } = useThemeContext();
  const [localValue, setLocalValue] = useState(value || '');

  const handleChange = (text: string) => {
@@ -38,10 +40,10 @@ export function SearchBar({
  };

  return (
-    <View style={[styles.container, isTablet && styles.containerTablet]}>
+    <View style={[styles.container, isTablet && styles.containerTablet, { backgroundColor: colors.card }]}>
      <Ionicons name="search" size={20} color={colors.textSecondary} style={styles.icon} />
      <TextInput
-        style={[styles.input, isTablet && styles.inputTablet]}
+        style={[styles.input, isTablet && styles.inputTablet, { color: colors.text }]}
        placeholder={placeholder}
        placeholderTextColor={colors.textSecondary}
        value={localValue}
@@ -63,15 +65,12 @@ const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    alignItems: 'center',
-    backgroundColor: colors.card,
    borderRadius: borderRadius.lg,
    paddingHorizontal: spacing.md,
    paddingVertical: spacing.sm + 2,
-    marginHorizontal: spacing.lg,
    marginVertical: spacing.sm,
-    maxWidth: 420,
    alignSelf: 'center',
-    width: '100%',
+    width: '80%',
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.06,
@@ -88,7 +87,6 @@ const styles = StyleSheet.create({
  input: {
    flex: 1,
    fontSize: 16,
-    color: colors.text,
    paddingVertical: spacing.xs,
  },
  inputTablet: {
@@ -1,27 +1,32 @@
 import React from 'react';
 import { View, Text, StyleSheet } from 'react-native';
-import { colors, borderRadius, spacing } from '../constants/theme';
+import { useThemeContext } from './ThemeProvider';
+import { borderRadius, spacing } from '../constants/theme';

 interface StockBadgeProps {
  stock: number;
 }

 export function StockBadge({ stock }: StockBadgeProps) {
-  const getBadgeStyle = () => {
-    if (stock === 0) return styles.danger;
-    if (stock < 5) return styles.warning;
-    return styles.success;
+  const { colors, isDark } = useThemeContext();
+
+  const getBadgeColors = () => {
+    if (stock === 0) {
+      return { bg: isDark ? '#3a1a1a' : '#feecec', text: isDark ? '#ef9a9a' : '#b91c1c' };
+    }
+    if (stock < 5) {
+      return { bg: isDark ? '#3a3010' : '#fff3cd', text: isDark ? '#ffd54f' : '#FF9500' };
+    }
+    return { bg: isDark ? '#1a3a1c' : '#eaf7ec', text: isDark ? '#81c784' : '#34C759' };
  };

-  const getText = () => {
-    if (stock === 0) return 'Sin stock';
-    if (stock < 5) return `Bajo (${stock})`;
-    return `Disponible (${stock})`;
-  };
+  const badgeColors = getBadgeColors();

  return (
-    <View style={[styles.badge, getBadgeStyle()]}>
-      <Text style={styles.text}>{getText()}</Text>
+    <View style={[styles.badge, { backgroundColor: badgeColors.bg }]}>
+      <Text style={[styles.text, { color: badgeColors.text }]}>
+        {stock === 0 ? 'Sin stock' : stock < 5 ? `Bajo (${stock})` : `Disponible (${stock})`}
+      </Text>
    </View>
  );
 }
@@ -32,15 +37,6 @@ const styles = StyleSheet.create({
    paddingVertical: spacing.xs,
    borderRadius: borderRadius.sm,
  },
-  success: {
-    backgroundColor: '#eaf7ec',
-  },
-  warning: {
-    backgroundColor: '#fff3cd',
-  },
-  danger: {
-    backgroundColor: '#feecec',
-  },
  text: {
    fontSize: 12,
    fontWeight: '600',
@@ -0,0 +1,43 @@
+import React, { createContext, useContext, useEffect, useMemo } from 'react';
+import { useColorScheme } from 'react-native';
+import { useThemeStore } from '../store/themeStore';
+import { colors, darkColors } from '../constants/theme';
+import type { AppColors } from '../hooks/useThemeColor';
+
+interface ThemeContextValue {
+  colors: AppColors;
+  isDark: boolean;
+}
+
+const ThemeContext = createContext<ThemeContextValue>({
+  colors,
+  isDark: false,
+});
+
+export function useThemeContext() {
+  return useContext(ThemeContext);
+}
+
+export function ThemeProvider({ children }: { children: React.ReactNode }) {
+  const systemScheme = useColorScheme();
+  const mode = useThemeStore((s) => s.mode);
+  const init = useThemeStore((s) => s.init);
+
+  useEffect(() => {
+    init();
+  }, []);
+
+  const value = useMemo(() => {
+    const isDark = mode === 'dark' || (mode === 'system' && systemScheme === 'dark');
+    return {
+      colors: isDark ? darkColors : colors,
+      isDark,
+    };
+  }, [mode, systemScheme]);
+
+  return (
+    <ThemeContext.Provider value={value}>
+      {children}
+    </ThemeContext.Provider>
+  );
+}
@@ -11,8 +11,10 @@ const ENV = {

 const environment = Constants.expoConfig?.extra?.environment || (__DEV__ ? 'development' : 'production');

+const envBaseUrl = process.env.EXPO_PUBLIC_API_URL;
+
 export const config = {
-  API_BASE_URL: ENV[environment as keyof typeof ENV]?.API_BASE_URL || ENV.development.API_BASE_URL,
+  API_BASE_URL: envBaseUrl || ENV[environment as keyof typeof ENV]?.API_BASE_URL || ENV.development.API_BASE_URL,
  SEARCH_DEBOUNCE_MS: 300,
  CACHE_STALE_TIME: 5 * 60 * 1000, // 5 minutes
  CACHE_CACHE_TIME: 30 * 60 * 1000, // 30 minutes
@@ -26,7 +26,7 @@ export const colors = {
  warning: '#FF9500',

  // Surface
-  background: '#fbfbfb',
+  background: 'transparent',
  card: '#ffffff',
  surfaceLow: '#f2f4f5',
  surface: '#eceeef',
@@ -44,6 +44,52 @@ export const colors = {
  accentWarm: '#f5a97a',
 };

+export const darkColors = {
+  // Primary - pastel green pharmacy palette
+  primary: '#7fbf8f',
+  primaryLight: '#2a5a35',
+  primaryDark: '#cfead0',
+  onPrimary: '#cfead0',
+  primaryContainer: '#1a3a1c',
+  onPrimaryContainer: '#cfead0',
+
+  // Secondary - soft blue
+  secondary: '#a3b8ff',
+  secondaryContainer: '#1a2a4a',
+
+  // Tertiary - soft lavender
+  tertiary: '#c9b3ff',
+  tertiaryContainer: '#2a1a4a',
+
+  // Scan button - vivid blue
+  scanButton: '#4a7dd5',
+  scanButtonShadow: 'rgba(74, 125, 213, 0.32)',
+
+  // Semantic
+  success: '#34C759',
+  danger: '#ef5350',
+  dangerContainer: '#3a1a1a',
+  warning: '#FF9500',
+
+  // Surface
+  background: 'transparent',
+  card: '#1e1e1e',
+  surfaceLow: '#2a2a2a',
+  surface: '#333333',
+  surfaceHigh: '#3a3a3a',
+  border: '#3a3a3a',
+  separator: '#3a3a3a',
+
+  // Text
+  text: '#f0f0f0',
+  textSecondary: '#a0a0a0',
+  textInverse: '#111417',
+  textLink: '#7fbf8f',
+
+  // Accent
+  accentWarm: '#f5a97a',
+};
+
 export const spacing = {
  xs: 4,
  sm: 8,
@@ -0,0 +1,41 @@
+import { useState, useEffect, useCallback } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+const STORAGE_KEY = 'recent_medicine_searches';
+const MAX_ITEMS = 5;
+
+export function useRecentSearches() {
+  const [recentSearches, setRecentSearches] = useState<string[]>([]);
+
+  useEffect(() => {
+    AsyncStorage.getItem(STORAGE_KEY).then((data) => {
+      if (data) setRecentSearches(JSON.parse(data));
+    });
+  }, []);
+
+  const addSearch = useCallback(async (query: string) => {
+    const trimmed = query.trim();
+    if (!trimmed) return;
+    setRecentSearches((prev) => {
+      const filtered = prev.filter((s) => s !== trimmed);
+      const next = [trimmed, ...filtered].slice(0, MAX_ITEMS);
+      AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+      return next;
+    });
+  }, []);
+
+  const removeSearch = useCallback(async (query: string) => {
+    setRecentSearches((prev) => {
+      const next = prev.filter((s) => s !== query);
+      AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(next));
+      return next;
+    });
+  }, []);
+
+  const clearAll = useCallback(async () => {
+    setRecentSearches([]);
+    AsyncStorage.removeItem(STORAGE_KEY);
+  }, []);
+
+  return { recentSearches, addSearch, removeSearch, clearAll };
+}
@@ -0,0 +1,19 @@
+import { useColorScheme } from 'react-native';
+import { colors, darkColors } from '../constants/theme';
+import { useThemeStore, ThemeMode } from '../store/themeStore';
+
+export type AppColors = typeof colors;
+
+export function useThemeColor(): { colors: AppColors; isDark: boolean; mode: ThemeMode } {
+  const systemScheme = useColorScheme();
+  const mode = useThemeStore((s) => s.mode);
+
+  const isDark =
+    mode === 'dark' || (mode === 'system' && systemScheme === 'dark');
+
+  return {
+    colors: isDark ? darkColors : colors,
+    isDark,
+    mode,
+  };
+}
@@ -16,6 +16,7 @@
    "expo-image-picker": "~57.0.2",
    "expo-linking": "~57.0.1",
    "expo-local-authentication": "~57.0.0",
+    "expo-location": "~57.0.2",
    "expo-notifications": "~57.0.3",
    "expo-router": "~57.0.3",
    "expo-secure-store": "~57.0.0",
@@ -2,32 +2,43 @@ import axios from 'axios';
 import * as SecureStore from 'expo-secure-store';
 import { config } from '../constants/config';

+const SESSION_KEY = 'session_id';
+
 export const api = axios.create({
  baseURL: config.API_BASE_URL,
  timeout: 10000,
+  withCredentials: true,
  headers: {
    'Content-Type': 'application/json',
  },
 });

-// Request interceptor - add auth token
+// Request interceptor - restore session cookie from SecureStore
 api.interceptors.request.use(
  async (axiosConfig) => {
-    const token = await SecureStore.getItemAsync('auth_token');
-    if (token) {
-      axiosConfig.headers.Authorization = `Bearer ${token}`;
+    const session = await SecureStore.getItemAsync(SESSION_KEY);
+    if (session) {
+      axiosConfig.headers.Cookie = session;
    }
    return axiosConfig;
  },
  (error) => Promise.reject(error)
 );

-// Response interceptor - handle errors
+// Response interceptor - capture and persist session cookie from responses
 api.interceptors.response.use(
-  (response) => response,
+  (response) => {
+    const setCookie = response.headers['set-cookie'];
+    if (setCookie) {
+      const cookieStr = Array.isArray(setCookie) ? setCookie[0] : setCookie;
+      const sessionId = cookieStr.split(';')[0];
+      SecureStore.setItemAsync(SESSION_KEY, sessionId);
+    }
+    return response;
+  },
  async (error) => {
    if (error.response?.status === 401) {
-      await SecureStore.deleteItemAsync('auth_token');
+      await SecureStore.deleteItemAsync(SESSION_KEY);
    }
    return Promise.reject(error);
  }
@@ -2,42 +2,44 @@ import api from './api';
 import * as SecureStore from 'expo-secure-store';
 import { AuthResponse, User } from '../types';

+const USER_KEY = 'user_data';
+
 export async function login(username: string, password: string): Promise<AuthResponse> {
  const response = await api.post('/auth/login', { username, password });
-  const { user, token } = response.data;
+  const { user } = response.data;

-  await SecureStore.setItemAsync('auth_token', token);
-  await SecureStore.setItemAsync('user', JSON.stringify(user));
+  await SecureStore.setItemAsync(USER_KEY, JSON.stringify(user));

  return response.data;
 }

 export async function logout(): Promise<void> {
  await api.post('/auth/logout');
-  await SecureStore.deleteItemAsync('auth_token');
-  await SecureStore.deleteItemAsync('user');
+  await SecureStore.deleteItemAsync(USER_KEY);
 }

 export async function checkAuth(): Promise<User | null> {
  try {
    const response = await api.get('/auth/check');
-    return response.data.user;
+    if (response.data.authenticated) {
+      return response.data.user;
+    }
+    return null;
  } catch {
    return null;
  }
 }

 export async function getStoredUser(): Promise<User | null> {
-  const userStr = await SecureStore.getItemAsync('user');
+  const userStr = await SecureStore.getItemAsync(USER_KEY);
  return userStr ? JSON.parse(userStr) : null;
 }

 export async function register(username: string, password: string): Promise<AuthResponse> {
  const response = await api.post('/auth/register', { username, password });
-  const { user, token } = response.data;
+  const { user } = response.data;

-  await SecureStore.setItemAsync('auth_token', token);
-  await SecureStore.setItemAsync('user', JSON.stringify(user));
+  await SecureStore.setItemAsync(USER_KEY, JSON.stringify(user));

  return response.data;
 }
@@ -2,6 +2,7 @@ import * as Notifications from 'expo-notifications';
 import * as Device from 'expo-device';
 import * as Constants from 'expo-constants';
 import { Platform } from 'react-native';
+import api from './api';

 Notifications.setNotificationHandler({
  handleNotification: async () => ({
@@ -12,6 +13,8 @@ Notifications.setNotificationHandler({
  }),
 });

+let _cachedToken: string | null = null;
+
 export async function registerForPushNotifications() {
  if (!Device.isDevice) {
    console.log('Push notifications require a physical device');
@@ -48,6 +51,11 @@ export async function registerForPushNotifications() {
      projectId,
    });

+    _cachedToken = token.data;
+
+    // Register token with backend (fire and forget)
+    registerTokenWithBackend(token.data).catch(() => {});
+
    return token.data;
  } catch (e) {
    console.log('Error getting push token:', e);
@@ -55,6 +63,52 @@ export async function registerForPushNotifications() {
  }
 }

+async function registerTokenWithBackend(token: string) {
+  try {
+    await api.post('/notifications/expo-register', { token });
+  } catch (e) {
+    console.log('Failed to register push token with backend:', e);
+  }
+}
+
+export async function subscribeToMedicine(
+  medicineNregistro: string,
+  medicineName: string | null,
+  pharmacyId?: number | null
+) {
+  const token = _cachedToken;
+  if (!token) {
+    console.log('No push token available for subscription');
+    return;
+  }
+  try {
+    await api.post('/notifications/expo-register', {
+      token,
+      medicine_nregistro: medicineNregistro,
+      medicine_name: medicineName,
+      pharmacy_id: pharmacyId || null,
+    });
+  } catch (e) {
+    console.log('Failed to subscribe to medicine notifications:', e);
+  }
+}
+
+export async function unsubscribeFromMedicine(
+  medicineNregistro: string,
+  pharmacyId?: number | null
+) {
+  try {
+    await api.delete('/notifications/expo-unregister', {
+      data: {
+        medicine_nregistro: medicineNregistro,
+        pharmacy_id: pharmacyId || null,
+      },
+    });
+  } catch (e) {
+    console.log('Failed to unsubscribe from medicine notifications:', e);
+  }
+}
+
 export async function scheduleMedicineAvailabilityNotification(
  medicineName: string,
  pharmacyName: string
@@ -0,0 +1,53 @@
+import api from './api';
+
+export interface Product {
+  id: string;
+  source: 'cima' | 'openfoodfacts';
+  name: string;
+  brand: string;
+  category: string;
+  image_url: string | null;
+  active_ingredient?: string;
+  dosage?: string;
+  form?: string;
+  prescription?: string;
+  commercialized?: boolean;
+  photos?: { tipo: string; url: string }[];
+  docs?: { tipo: number; url: string }[];
+  nutriscore?: string;
+  ingredients?: string;
+  nova_group?: number;
+  eco_score?: string;
+}
+
+export interface ProductSearchResponse {
+  results: Product[];
+  total: number;
+  sources: {
+    cima: number;
+    openfoodfacts: number;
+  };
+}
+
+export async function searchProducts(query: string): Promise<Product[]> {
+  if (!query || query.trim().length < 2) return [];
+  try {
+    const { data } = await api.get<ProductSearchResponse>('/products/search', {
+      params: { q: query }
+    });
+    return data.results || [];
+  } catch (error) {
+    console.error('[Products] Search error:', error);
+    return [];
+  }
+}
+
+export async function getProduct(source: string, id: string): Promise<Product | null> {
+  try {
+    const { data } = await api.get<Product>(`/products/${source}/${id}`);
+    return data;
+  } catch (error) {
+    console.error('[Products] Detail error:', error);
+    return null;
+  }
+}
@@ -0,0 +1,30 @@
+import { create } from 'zustand';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+export type ThemeMode = 'light' | 'dark' | 'system';
+
+interface ThemeState {
+  mode: ThemeMode;
+  setMode: (mode: ThemeMode) => Promise<void>;
+  init: () => Promise<void>;
+}
+
+const STORAGE_KEY = '@theme_mode';
+
+export const useThemeStore = create<ThemeState>((set) => ({
+  mode: 'system',
+
+  setMode: async (mode: ThemeMode) => {
+    set({ mode });
+    await AsyncStorage.setItem(STORAGE_KEY, mode);
+  },
+
+  init: async () => {
+    try {
+      const saved = await AsyncStorage.getItem(STORAGE_KEY);
+      if (saved === 'light' || saved === 'dark' || saved === 'system') {
+        set({ mode: saved });
+      }
+    } catch {}
+  },
+}));
@@ -1,12 +1,20 @@
 export interface Medicine {
+  id: string;
  nregistro: string;
-  nombre: string;
-  principioActivo: string;
-  laboratorio: string;
-  formaFarmaceutica: string;
-  precio: number | null;
-  stock: number;
-  disponibilidad: 'disponible' | 'sin_stock' | 'bajo_stock';
+  name: string;
+  active_ingredient: string;
+  dosage: string;
+  form: string;
+  formSimplified: string;
+  laboratory: string;
+  prescription: string;
+  commercialized: boolean;
+  generic: boolean;
+  photos: string[];
+  docs: { tipo: number; url: string; urlHtml?: string; secc: boolean; fecha: number }[];
+  // Optional pharmacy-specific fields (only present in pharmacy_medicines joins)
+  precio?: number | null;
+  stock?: number;
 }

 export interface Pharmacy {
@@ -16,15 +24,22 @@ export interface Pharmacy {
  phone: string;
  latitude: number;
  longitude: number;
+  opening_hours?: string;
 }

 export interface PharmacyMedicine {
  id: number;
-  pharmacy_id: number;
-  medicine_nregistro: string;
-  medicine_name: string;
-  price: number;
-  stock: number;
+  pharmacy_id?: number;
+  medicine_nregistro?: string;
+  medicine_name?: string;
+  name?: string;
+  address?: string;
+  phone?: string;
+  latitude?: number;
+  longitude?: number;
+  opening_hours?: string;
+  price?: number | null;
+  stock?: number;
  pharmacy?: Pharmacy;
 }

@@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
-    <meta name="theme-color" content="#7fbf8f" />
+    <meta name="theme-color" content="#c0dde9" />
    <title>FarmaClic</title>
    <link rel="icon" href="/favicon.png" type="image/png" />
    <link rel="icon" href="/favicon.ico" sizes="32x32" />
@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
 import './App.css';
 import HomeView from './views/HomeView';
 import SearchView from './views/SearchView';
+import ProductView from './views/ProductView';
 import ScannerView from './views/ScannerView';
 import AlertsView from './views/AlertsView';
 import ProfileView from './views/ProfileView';
@@ -19,16 +20,44 @@ function App() {
  const [showSaved, setShowSaved] = useState(false);
  const [badgeCount, setBadgeCount] = useState(0);
  const [prescriptionSearch, setPrescriptionSearch] = useState('');
+  const [productScreen, setProductScreen] = useState(null);
  const [screenSize, setScreenSize] = useState({
    width: window.innerWidth,
    height: window.innerHeight
  });

+  // Theme: 'auto' | 'light' | 'dark'
+  const [theme, setThemeState] = useState(() => {
+    return localStorage.getItem('ff-theme') || 'auto';
+  });
+
  // Device detection
  const isMobile = screenSize.width <= 768;
  const isTablet = screenSize.width > 768 && screenSize.width <= 1024;
  const isDesktop = screenSize.width > 1024;

+  // Apply theme to document
+  useEffect(() => {
+    const mq = window.matchMedia('(prefers-color-scheme: dark)');
+
+    function applyTheme() {
+      const isDark = theme === 'dark' || (theme === 'auto' && mq.matches);
+      document.documentElement.setAttribute('data-theme', isDark ? 'dark' : 'light');
+    }
+
+    applyTheme();
+
+    if (theme === 'auto') {
+      mq.addEventListener('change', applyTheme);
+      return () => mq.removeEventListener('change', applyTheme);
+    }
+  }, [theme]);
+
+  function setTheme(newTheme) {
+    setThemeState(newTheme);
+    localStorage.setItem('ff-theme', newTheme);
+  }
+
  useEffect(() => {
    // Set initial screen size
    const handleResize = () => {
@@ -131,6 +160,8 @@ function App() {
          onShowSaved={() => setShowSaved(true)}
          onLogout={handleLogout}
          onAdminClick={handleAdminClick}
+          theme={theme}
+          onThemeChange={setTheme}
        />
      );
      break;
@@ -151,6 +182,19 @@ function App() {
          currentUser={currentUser}
          onLoginRequest={() => setShowLogin(true)}
          initialQuery={prescriptionSearch}
+          onNavigateToProduct={(source, id) => {
+            setProductScreen({ source, id });
+            setScreen('product');
+          }}
+        />
+      );
+      break;
+    case 'product':
+      activeView = (
+        <ProductView
+          source={productScreen?.source}
+          id={productScreen?.id}
+          onBack={() => { setProductScreen(null); setScreen('search'); }}
        />
      );
      break;
@@ -65,9 +65,9 @@
  height: 3.5rem;
  border-radius: var(--radius-full);
  /* Stronger, brighter blue to make scan button easy to find */
-  background: #2b5bb5;
-  color: #ffffff;
-  box-shadow: 0 8px 26px rgba(43, 91, 181, 0.32);
+  background: var(--fab-bg);
+  color: var(--fab-text);
+  box-shadow: 0 8px 26px var(--fab-shadow);
  margin-top: -1.5rem;
  transition: transform 0.12s, box-shadow 160ms ease;
 }
@@ -78,12 +78,12 @@

 .nav-fab:hover {
  transform: translateY(-2px);
-  box-shadow: 0 12px 36px rgba(43, 91, 181, 0.36);
+  box-shadow: 0 12px 36px var(--fab-shadow);
 }

 .nav-fab:focus {
  outline: none;
-  box-shadow: 0 0 0 6px rgba(43,91,181,0.12), 0 8px 26px rgba(43, 91, 181, 0.32);
+  box-shadow: 0 0 0 6px rgba(43,91,181,0.12), 0 8px 26px var(--fab-shadow);
 }

 .nav-badge {
@@ -118,7 +118,7 @@

 .modal-error {
  font-size: 0.82rem;
-  color: #b91c1c;
+  color: var(--error);
  margin: 0.25rem 0 0.75rem;
 }

@@ -149,7 +149,7 @@
 .modal-submit {
  background: var(--primary);
  border: none;
-  color: #fff;
+  color: var(--on-primary);
  padding: 0.55rem 1.35rem;
  border-radius: 999px;
  cursor: pointer;
@@ -139,8 +139,8 @@
 }

 .stock.low-stock {
-  background: rgba(180, 83, 9, 0.12);
-  color: #b45309;
+  background: var(--warning-container);
+  color: var(--warning);
 }

 .stock.out-of-stock {
@@ -0,0 +1,163 @@
+.product-results {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1rem;
+  margin-top: 0.5rem;
+  max-height: 70vh;
+  overflow-y: auto;
+  overflow-x: hidden;
+  overscroll-behavior: contain;
+  animation: fadeInUp 0.5s ease-out;
+}
+
+@media (min-width: 1024px) {
+  .product-results {
+    max-height: 76vh;
+  }
+}
+
+.product-card {
+  background: var(--surface-container-lowest);
+  border-radius: var(--radius-md);
+  padding: 1.25rem;
+  cursor: pointer;
+  transition: transform 0.15s, box-shadow 0.15s;
+  border: 1px solid var(--outline-variant);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  box-shadow: var(--shadow-soft);
+}
+
+.product-card:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
+  border-color: var(--primary);
+}
+
+.product-card-image {
+  width: 100%;
+  height: 120px;
+  margin-bottom: 1rem;
+  overflow: hidden;
+  border-radius: var(--radius-sm);
+  background: var(--surface-container-low);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.product-card-image img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.product-image-placeholder {
+  color: var(--outline-variant);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.product-card-content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+
+.product-card-badges {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.source-badge {
+  color: white;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.7rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.02em;
+}
+
+.category-badge {
+  background: var(--surface-container-high);
+  color: var(--on-surface-variant);
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.7rem;
+  font-weight: 600;
+}
+
+.nutri-score-badge {
+  color: white;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-sm);
+  font-size: 0.7rem;
+  font-weight: 600;
+}
+
+.product-card-header {
+  margin-bottom: 0.5rem;
+}
+
+.product-card-header h3 {
+  color: var(--on-surface);
+  font-size: 1.15rem;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  flex: 1;
+  margin: 0;
+}
+
+.product-card-body {
+  margin-bottom: 1rem;
+  flex: 1;
+}
+
+.product-card-body p {
+  font-size: 0.9rem;
+  color: var(--on-surface-variant);
+  line-height: 1.55;
+  margin-bottom: 0.25rem;
+}
+
+.product-card-body strong {
+  color: var(--on-surface);
+  font-weight: 600;
+}
+
+.product-card-footer {
+  padding-top: 0.75rem;
+  border-top: 1px solid var(--outline-variant);
+}
+
+.view-details {
+  color: var(--primary);
+  font-weight: 600;
+  font-size: 0.9rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.view-details::after {
+  content: "→";
+  transition: transform 0.2s;
+}
+
+.product-card:hover .view-details::after {
+  transform: translateX(4px);
+}
+
+.no-results {
+  text-align: center;
+  padding: 2.5rem 1.5rem;
+  background: var(--surface-container-low);
+  border-radius: var(--radius-md);
+  color: var(--on-surface-variant);
+  border: 1px dashed var(--outline-variant);
+}
@@ -0,0 +1,114 @@
+import React from 'react';
+import './ProductResults.css';
+
+const categoryLabels = {
+  otc: 'Sin Receta',
+  baby_food: 'Alimentación Infantil',
+  baby_milk: 'Leche de Fórmula',
+  baby_cereal: 'Cereales Bebé'
+};
+
+const sourceColors = {
+  cima: '#2563eb',
+  openfoodfacts: '#16a34a'
+};
+
+const sourceLabels = {
+  cima: 'CIMA',
+  openfoodfacts: 'Open Food Facts'
+};
+
+function ProductResults({ products, onSelect }) {
+  if (!products || products.length === 0) {
+    return (
+      <div className="no-results">
+        <p>No se encontraron productos</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="product-results">
+      {products.map((product) => (
+        <ProductCard
+          key={product.id}
+          product={product}
+          onSelect={onSelect}
+        />
+      ))}
+    </div>
+  );
+}
+
+function ProductCard({ product, onSelect }) {
+  const nutriScore = product.nutriscore;
+  const nutriScoreColors = {
+    a: '#16a34a',
+    b: '#65a30d',
+    c: '#eab308',
+    d: '#f97316',
+    e: '#dc2626'
+  };
+
+  return (
+    <div className="product-card" onClick={() => onSelect(product)}>
+      <div className="product-card-image">
+        {product.image_url ? (
+          <img src={product.image_url} alt={product.name} loading="lazy" />
+        ) : (
+          <div className="product-image-placeholder">
+            <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round">
+              <rect x="3" y="3" width="18" height="18" rx="2" ry="2" />
+              <circle cx="8.5" cy="8.5" r="1.5" />
+              <polyline points="21 15 16 10 5 21" />
+            </svg>
+          </div>
+        )}
+      </div>
+
+      <div className="product-card-content">
+        <div className="product-card-badges">
+          <span
+            className="source-badge"
+            style={{ backgroundColor: sourceColors[product.source] }}
+          >
+            {sourceLabels[product.source]}
+          </span>
+          <span className="category-badge">
+            {categoryLabels[product.category] || product.category}
+          </span>
+          {product.source === 'openfoodfacts' && nutriScore && (
+            <span
+              className="nutri-score-badge"
+              style={{ backgroundColor: nutriScoreColors[nutriScore.toLowerCase()] || '#9ca3af' }}
+            >
+              Nutri-Score {nutriScore.toUpperCase()}
+            </span>
+          )}
+        </div>
+
+        <div className="product-card-header">
+          <h3>{product.name}</h3>
+        </div>
+
+        <div className="product-card-body">
+          {product.brand && (
+            <p><strong>Marca:</strong> {product.brand}</p>
+          )}
+          {product.source === 'cima' && product.active_ingredient && (
+            <p><strong>Principio Activo:</strong> {product.active_ingredient}</p>
+          )}
+          {product.source === 'cima' && product.dosage && (
+            <p><strong>Dosis:</strong> {product.dosage}</p>
+          )}
+        </div>
+
+        <div className="product-card-footer">
+          <span className="view-details">Ver detalles →</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default ProductResults;
@@ -73,7 +73,7 @@
 }

 .saved-notifications-error {
-  color: #b91c1c;
+  color: var(--error);
 }

 .saved-notifications-list {
@@ -155,8 +155,8 @@
 }

 .saved-notifications-remove:hover:not(:disabled) {
-  border-color: #b91c1c;
-  color: #b91c1c;
+  border-color: var(--error);
+  color: var(--error);
  background: rgba(185, 28, 28, 0.06);
 }

@@ -175,6 +175,41 @@
  to { opacity: 1; transform: translateY(0) scale(1); }
 }

+/* Dark mode adaptations */
+[data-theme="dark"] .saved-notifications-item {
+  background: var(--surface-container);
+  border-color: var(--border);
+}
+
+[data-theme="dark"] .saved-notifications-item-name {
+  color: #b0d4b8;
+}
+
+[data-theme="dark"] .saved-notifications-chip {
+  background: rgba(96, 165, 250, 0.15);
+  color: #93c5fd;
+}
+
+[data-theme="dark"] .saved-notifications-chip--pharmacy {
+  background: rgba(142, 212, 160, 0.15);
+  color: #8ed4a0;
+}
+
+[data-theme="dark"] .saved-notifications-address {
+  color: #9ca3af;
+}
+
+[data-theme="dark"] .saved-notifications-remove {
+  border-color: var(--border);
+  color: var(--text-muted);
+}
+
+[data-theme="dark"] .saved-notifications-remove:hover:not(:disabled) {
+  background: rgba(239, 68, 68, 0.12);
+  color: #fca5a5;
+  border-color: #f87171;
+}
+
@media (max-width: 540px) {
  .saved-notifications-backdrop {
    padding: 2vh 0.5rem;
@@ -397,6 +397,28 @@
  border-color: var(--border-strong);
 }

+/* Source badges */
+.source-badge {
+  display: inline-block;
+  padding: 0.15rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  vertical-align: middle;
+}
+
+.source-badge--cima {
+  background: rgba(37, 99, 235, 0.12);
+  color: #2563eb;
+}
+
+.source-badge--off {
+  background: rgba(16, 185, 129, 0.12);
+  color: #10b981;
+}
+
 /* Pharmacies: search, region import, list filter */
 .pharmacy-tools-card {
  background: var(--surface);
@@ -0,0 +1,421 @@
+import React, { useState, useEffect, useMemo, useRef } from 'react';
+import './AdminComponents.css';
+
+const MAX_PHARMACY_RESULTS = 25;
+
+function normalize(s) {
+  return (s || '').toString().toLowerCase().normalize('NFD').replace(/[̀-ͯ]/g, '');
+}
+
+function PharmacyProductLink() {
+  const [pharmacies, setPharmacies] = useState([]);
+  const [productSearch, setProductSearch] = useState('');
+  const [productResults, setProductResults] = useState([]);
+  const [selectedPharmacy, setSelectedPharmacy] = useState(null);
+  const [selectedProduct, setSelectedProduct] = useState(null);
+  const [pharmacyProducts, setPharmacyProducts] = useState([]);
+  const [loading, setLoading] = useState(false);
+  const [searching, setSearching] = useState(false);
+  const [pharmacyQuery, setPharmacyQuery] = useState('');
+  const [pharmacyDropdownOpen, setPharmacyDropdownOpen] = useState(false);
+  const pharmacyInputRef = useRef(null);
+  const [formData, setFormData] = useState({
+    pharmacy_id: '',
+    price: '',
+    stock: ''
+  });
+
+  const filteredPharmacies = useMemo(() => {
+    const q = normalize(pharmacyQuery).trim();
+    if (!q) return pharmacies.slice(0, MAX_PHARMACY_RESULTS);
+    const tokens = q.split(/\s+/).filter(Boolean);
+    return pharmacies
+      .filter(p => {
+        const hay = `${normalize(p.name)} ${normalize(p.address)}`;
+        return tokens.every(tok => hay.includes(tok));
+      })
+      .slice(0, MAX_PHARMACY_RESULTS);
+  }, [pharmacies, pharmacyQuery]);
+
+  useEffect(() => {
+    fetchPharmacies();
+  }, []);
+
+  useEffect(() => {
+    if (selectedPharmacy) {
+      fetchPharmacyProducts(selectedPharmacy.id);
+    }
+  }, [selectedPharmacy]);
+
+  // Buscar productos en la API mientras el usuario escribe
+  useEffect(() => {
+    const q = productSearch.trim();
+    if (q.length < 2) {
+      setProductResults([]);
+      setSearching(false);
+      return;
+    }
+
+    const controller = new AbortController();
+    const timeoutId = setTimeout(async () => {
+      setSearching(true);
+      try {
+        const response = await fetch(`/api/products/search?q=${encodeURIComponent(q)}`, {
+          credentials: 'include',
+          signal: controller.signal,
+        });
+        const data = await response.json();
+        setProductResults(Array.isArray(data) ? data : []);
+      } catch (error) {
+        if (error.name === 'AbortError') return;
+        console.error('Error searching products:', error);
+      } finally {
+        if (!controller.signal.aborted) setSearching(false);
+      }
+    }, 500);
+
+    return () => {
+      clearTimeout(timeoutId);
+      controller.abort();
+    };
+  }, [productSearch]);
+
+  const fetchPharmacies = async () => {
+    try {
+      const response = await fetch('/api/pharmacies', {
+        credentials: 'include',
+      });
+      const data = await response.json();
+      setPharmacies(data);
+    } catch (error) {
+      console.error('Error fetching pharmacies:', error);
+    }
+  };
+
+  const fetchPharmacyProducts = async (pharmacyId) => {
+    setLoading(true);
+    try {
+      const response = await fetch(`/api/admin/pharmacies/${pharmacyId}/products`, {
+        credentials: 'include',
+      });
+      const data = await response.json();
+      setPharmacyProducts(data);
+    } catch (error) {
+      console.error('Error fetching pharmacy products:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    
+    if (!selectedProduct) {
+      alert('Por favor, selecciona un producto primero');
+      return;
+    }
+
+    try {
+      // Build identifier: source:id (e.g., openfoodfacts:9421025231209)
+      const identifier = selectedProduct._id 
+        ? `${selectedProduct.source || 'openfoodfacts'}:${selectedProduct._id}`
+        : `${selectedProduct.source || 'openfoodfacts'}:${selectedProduct.id}`;
+
+      const payload = {
+        pharmacy_id: parseInt(formData.pharmacy_id),
+        product_source: selectedProduct.source || 'openfoodfacts',
+        product_off_id: selectedProduct._id || selectedProduct.id,
+        product_name: selectedProduct.product_name || selectedProduct.name,
+        price: formData.price ? parseFloat(formData.price) : null,
+        stock: formData.stock ? parseInt(formData.stock) : 0
+      };
+
+      const response = await fetch('/api/admin/pharmacy-products', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify(payload)
+      });
+
+      if (!response.ok) throw new Error('Error al vincular producto a farmacia');
+
+      resetForm();
+      if (selectedPharmacy) {
+        fetchPharmacyProducts(selectedPharmacy.id);
+      }
+      alert('¡Producto vinculado a la farmacia correctamente!');
+    } catch (error) {
+      console.error('Error linking product:', error);
+      alert('Error al vincular producto a farmacia');
+    }
+  };
+
+  const handleUpdate = async (id, price, stock) => {
+    try {
+      const response = await fetch(`/api/admin/pharmacy-products/${id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        credentials: 'include',
+        body: JSON.stringify({ price, stock })
+      });
+
+      if (!response.ok) throw new Error('Error al actualizar');
+
+      fetchPharmacyProducts(selectedPharmacy.id);
+      alert('¡Actualizado correctamente!');
+    } catch (error) {
+      console.error('Error updating:', error);
+      alert('Error al actualizar');
+    }
+  };
+
+  const handleDelete = async (id) => {
+    if (!confirm('¿Eliminar este producto de la farmacia?')) return;
+
+    try {
+      const response = await fetch(`/api/admin/pharmacy-products/${id}`, {
+        method: 'DELETE',
+        credentials: 'include'
+      });
+
+      if (!response.ok) throw new Error('Error al eliminar');
+
+      fetchPharmacyProducts(selectedPharmacy.id);
+      alert('¡Producto eliminado de la farmacia!');
+    } catch (error) {
+      console.error('Error deleting:', error);
+      alert('Error al eliminar producto');
+    }
+  };
+
+  const resetForm = () => {
+    setFormData({
+      pharmacy_id: selectedPharmacy ? selectedPharmacy.id.toString() : '',
+      price: '',
+      stock: ''
+    });
+    setSelectedProduct(null);
+    setProductSearch('');
+    setProductResults([]);
+  };
+
+  const selectProduct = (product) => {
+    setSelectedProduct(product);
+    setProductSearch(product.product_name || product.name);
+    setProductResults([]);
+  };
+
+  const pickPharmacy = (pharmacy) => {
+    setSelectedPharmacy(pharmacy);
+    setFormData(prev => ({ ...prev, pharmacy_id: pharmacy.id.toString() }));
+    setPharmacyQuery(`${pharmacy.name} — ${pharmacy.address}`);
+    setPharmacyDropdownOpen(false);
+  };
+
+  const clearPharmacy = () => {
+    setSelectedPharmacy(null);
+    setFormData(prev => ({ ...prev, pharmacy_id: '' }));
+    setPharmacyQuery('');
+    setPharmacyDropdownOpen(true);
+    setTimeout(() => pharmacyInputRef.current?.focus(), 0);
+  };
+
+  const getSourceBadge = (source) => {
+    if (source === 'cima') {
+      return <span className="source-badge source-badge--cima">CIMA</span>;
+    }
+    return <span className="source-badge source-badge--off">OFF</span>;
+  };
+
+  return (
+    <div className="admin-section">
+      <h2>Vincular Producto a Farmacia</h2>
+
+      <form className="admin-form" onSubmit={handleSubmit}>
+        <div className="form-group">
+          <label>Farmacia *</label>
+          <input
+            ref={pharmacyInputRef}
+            type="text"
+            value={pharmacyQuery}
+            onChange={(e) => {
+              setPharmacyQuery(e.target.value);
+              if (selectedPharmacy) {
+                setSelectedPharmacy(null);
+                setFormData(prev => ({ ...prev, pharmacy_id: '' }));
+              }
+              setPharmacyDropdownOpen(true);
+            }}
+            onFocus={() => setPharmacyDropdownOpen(true)}
+            onBlur={() => setTimeout(() => setPharmacyDropdownOpen(false), 150)}
+            placeholder={pharmacies.length ? `Buscar entre ${pharmacies.length} farmacias por nombre o dirección…` : 'Cargando farmacias…'}
+            autoComplete="off"
+            required={!selectedPharmacy}
+          />
+          {!selectedPharmacy && pharmacyDropdownOpen && (
+            <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>
+                </div>
+              ) : (
+                filteredPharmacies.map((pharmacy) => (
+                  <div
+                    key={pharmacy.id}
+                    className="search-result-item"
+                    onMouseDown={(e) => { e.preventDefault(); pickPharmacy(pharmacy); }}
+                  >
+                    <strong>{pharmacy.name}</strong>
+                    <span>{pharmacy.address}</span>
+                  </div>
+                ))
+              )}
+            </div>
+          )}
+          {selectedPharmacy && (
+            <div className="selected-medicine-info">
+              <p>✅ Selected: <strong>{selectedPharmacy.name}</strong></p>
+              <p className="medicine-details">{selectedPharmacy.address}</p>
+              <button type="button" className="btn-small" onClick={clearPharmacy}>
+                Cambiar farmacia
+              </button>
+            </div>
+          )}
+        </div>
+
+        <div className="form-group">
+          <label>Buscar Producto (Open Food Facts) *</label>
+          <input
+            type="text"
+            value={productSearch}
+            onChange={(e) => {
+              setProductSearch(e.target.value);
+              setSelectedProduct(null);
+            }}
+            placeholder="Escribe para buscar productos..."
+            required
+          />
+          {searching && <p className="loading-text">Buscando...</p>}
+          
+          {productResults.length > 0 && !selectedProduct && (
+            <div className="medicine-search-results">
+              {productResults.slice(0, 10).map((product) => (
+                <div 
+                  key={product._id || product.id} 
+                  className="search-result-item"
+                  onClick={() => selectProduct(product)}
+                >
+                  <strong>{product.product_name || product.name}</strong>
+                  {product.brands && <span> - {product.brands}</span>}
+                  {product.quantity && <span> ({product.quantity})</span>}
+                </div>
+              ))}
+            </div>
+          )}
+
+          {selectedProduct && (
+            <div className="selected-medicine-info">
+              <p>✅ Selected: <strong>{selectedProduct.product_name || selectedProduct.name}</strong></p>
+              <p className="medicine-details">
+                {selectedProduct.brands && `Marca: ${selectedProduct.brands} • `}
+                {selectedProduct.quantity && `Cantidad: ${selectedProduct.quantity} • `}
+                {getSourceBadge(selectedProduct.source || 'openfoodfacts')}
+                {' '}
+                {selectedProduct._id || selectedProduct.id}
+              </p>
+              <button 
+                type="button" 
+                className="btn-small" 
+                onClick={() => {
+                  setSelectedProduct(null);
+                  setProductSearch('');
+                }}
+              >
+                Cambiar producto
+              </button>
+            </div>
+          )}
+        </div>
+
+        <div className="form-row">
+          <div className="form-group">
+            <label>Precio (€)</label>
+            <input
+              type="number"
+              step="0.01"
+              value={formData.price}
+              onChange={(e) => setFormData({ ...formData, price: e.target.value })}
+              placeholder="e.g., 3.50"
+            />
+          </div>
+
+          <div className="form-group">
+            <label>Stock</label>
+            <input
+              type="number"
+              value={formData.stock}
+              onChange={(e) => setFormData({ ...formData, stock: e.target.value })}
+              placeholder="e.g., 100"
+            />
+          </div>
+        </div>
+
+        <div className="form-actions">
+          <button type="submit" className="btn-primary">
+            Vincular Producto
+          </button>
+          <button type="button" className="btn-secondary" onClick={resetForm}>
+            Reiniciar
+          </button>
+        </div>
+      </form>
+
+      {selectedPharmacy && (
+        <div className="pharmacy-medicines-section">
+          <h3>Productos en {selectedPharmacy.name}</h3>
+          {loading ? (
+            <div className="loading">Cargando...</div>
+          ) : pharmacyProducts.length === 0 ? (
+            <p className="empty-state">Aún no hay productos vinculados a esta farmacia.</p>
+          ) : (
+            <div className="admin-list">
+              {pharmacyProducts.map((pp) => (
+                <div key={pp.id} className="admin-item">
+                  <div className="item-content">
+                    <h4>
+                      {pp.product_name}
+                      {getSourceBadge(pp.product_source)}
+                    </h4>
+                    <p>
+                      <strong>Precio:</strong> {pp.price ? `€${parseFloat(pp.price).toFixed(2)}` : 'No definido'} • 
+                      <strong> Stock:</strong> {pp.stock || 0}
+                    </p>
+                  </div>
+                  <div className="item-actions">
+                    <button 
+                      className="btn-edit"
+                      onClick={() => {
+                        const newPrice = prompt('Introduce nuevo precio:', pp.price || '');
+                        const newStock = prompt('Introduce nuevo stock:', pp.stock || '0');
+                        if (newPrice !== null && newStock !== null) {
+                          handleUpdate(pp.id, newPrice ? parseFloat(newPrice) : null, parseInt(newStock) || 0);
+                        }
+                      }}
+                    >
+                      Actualizar
+                    </button>
+                    <button className="btn-delete" onClick={() => handleDelete(pp.id)}>
+                      Eliminar
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default PharmacyProductLink;
@@ -71,6 +71,101 @@
  --primary-shadow: rgba(127, 191, 143, 0.12);
  --primary-light: #eaf7ec;
  --primary-faint: rgba(127, 191, 143, 0.06);
+  --fab-bg: #2b5bb5;
+  --fab-text: #ffffff;
+  --fab-shadow: rgba(43, 91, 181, 0.32);
+  --warning: #b45309;
+  --warning-container: rgba(180, 83, 9, 0.12);
+  --suggestion-1: #ffffff;
+  --suggestion-2: #f0f7ff;
+  --suggestion-3: #e0f0ff;
+  --suggestion-4: #d4ebff;
+  --suggestion-border-1: #e2e8f0;
+  --suggestion-border-2: #dbeafe;
+  --suggestion-border-3: #bfdbfe;
+  --suggestion-border-4: #93c5fd;
+  --suggestion-text: #1e293b;
+  --suggestion-icon-bg: rgba(59, 130, 246, 0.08);
+  --suggestion-icon-color: #3b82f6;
+}
+
+/* ── Dark mode ── */
+[data-theme="dark"] {
+  --primary: #8ed4a0;
+  --on-primary: #003912;
+  --primary-container: #1a5c2a;
+  --on-primary-container: #c2ecd0;
+  --secondary: #b8c9ff;
+  --on-secondary: #1a3066;
+  --secondary-container: #2a4080;
+  --on-secondary-container: #d9e2ff;
+  --tertiary: #dac4ff;
+  --on-tertiary: #3b2a5a;
+  --tertiary-container: #524070;
+  --on-tertiary-container: #efe7ff;
+  --surface: #1e2024;
+  --on-surface: #e1e3e4;
+  --on-surface-variant: #c0c9bb;
+  --surface-container-lowest: #171a1d;
+  --surface-container-low: #252830;
+  --surface-container: #2c3038;
+  --surface-container-high: #383c44;
+  --surface-container-highest: #444850;
+  --error: #ffb4ab;
+  --on-error: #690005;
+  --error-container: #93000a;
+  --on-error-container: #ffdad6;
+  --outline: #8a9486;
+  --outline-variant: #41493e;
+  --on-background: #e1e3e4;
+  --inverse-surface: #e1e3e4;
+  --inverse-on-surface: #2e3132;
+  --inverse-primary: #2e7d32;
+  --surface-tint: #8ed4a0;
+  --surface-dim: #1e2024;
+  --surface-bright: #4a4e56;
+  --surface-variant: #41493e;
+  --primary-fixed: #acf4a4;
+  --primary-fixed-dim: #91d78a;
+  --secondary-fixed: #d9e2ff;
+  --secondary-fixed-dim: #b0c6ff;
+  --tertiary-fixed: #e9ddff;
+  --tertiary-fixed-dim: #cfbcff;
+
+  --shadow-soft: 0 4px 20px rgba(0, 0, 0, 0.32);
+
+  --text-main: var(--on-surface);
+  --text-muted: var(--on-surface-variant);
+  --surface-muted: var(--surface-container-low);
+  --surface-card: var(--surface-container-lowest);
+  --border: var(--outline-variant);
+  --border-strong: var(--outline);
+  --glass-bg: var(--surface-container);
+  --glass-border: var(--outline-variant);
+  --glass-shadow: var(--shadow-soft);
+  --accent: var(--primary);
+  --accent-warm: #f5a97a;
+  --primary-hover: #a0dfb0;
+  --primary-ring: rgba(142, 212, 160, 0.25);
+  --primary-shadow: rgba(142, 212, 160, 0.15);
+  --primary-light: #0d2b12;
+  --primary-faint: rgba(142, 212, 160, 0.08);
+  --fab-bg: #5b8bd5;
+  --fab-text: #ffffff;
+  --fab-shadow: rgba(91, 139, 213, 0.35);
+  --warning: #f59e0b;
+  --warning-container: rgba(245, 158, 11, 0.15);
+  --suggestion-1: #2c3038;
+  --suggestion-2: #252d40;
+  --suggestion-3: #25334a;
+  --suggestion-4: #253a55;
+  --suggestion-border-1: #333637;
+  --suggestion-border-2: #2a4080;
+  --suggestion-border-3: #2a4a8a;
+  --suggestion-border-4: #3060a0;
+  --suggestion-text: #e1e3e4;
+  --suggestion-icon-bg: rgba(96, 165, 250, 0.12);
+  --suggestion-icon-color: #60a5fa;
 }

 * {
@@ -79,6 +174,14 @@
  box-sizing: border-box;
 }

+html {
+  color-scheme: light;
+}
+
+[data-theme="dark"] {
+  color-scheme: dark;
+}
+
 html, body {
  height: 100%;
  overflow: hidden;
@@ -117,6 +220,15 @@ body::after {
  z-index: -1;
 }

+[data-theme="dark"] body::before {
+  background-image: url('./assets/bg_dark.png');
+  opacity: 0.55;
+}
+
+[data-theme="dark"] body::after {
+  background-color: rgba(0, 0, 0, 0.25);
+}
+
 #root {
  height: 100dvh;
  overflow: hidden;
@@ -5,6 +5,7 @@ import LoginForm from '../components/admin/LoginForm';
 import PharmacyManagement from '../components/admin/PharmacyManagement';
 import MedicineManagement from '../components/admin/MedicineManagement';
 import PharmacyMedicineLink from '../components/admin/PharmacyMedicineLink';
+import PharmacyProductLink from '../components/admin/PharmacyProductLink';

 function AdminView() {
  const [authenticated, setAuthenticated] = useState(false);
@@ -115,12 +116,19 @@ function AdminView() {
          >
            🔗 Vincular Medicamento a Farmacia
          </button>
+          <button 
+            className={`admin-tab ${activeTab === 'link-product' ? 'active' : ''}`}
+            onClick={() => setActiveTab('link-product')}
+          >
+            🍎 Vincular Producto a Farmacia
+          </button>
        </div>

        <div className="admin-content">
          {activeTab === 'pharmacies' && <PharmacyManagement />}
          {activeTab === 'medicines' && <MedicineManagement />}
          {activeTab === 'link' && <PharmacyMedicineLink />}
+          {activeTab === 'link-product' && <PharmacyProductLink />}
        </div>
      </main>
    </>
@@ -130,6 +130,42 @@
  background: var(--surface-container-high);
 }

+/* Dark mode adaptations */
+[data-theme="dark"] .alert-card {
+  background: var(--surface-container);
+}
+
+[data-theme="dark"] .alert-badge--primary {
+  background: rgba(239, 68, 68, 0.2);
+  color: #fca5a5;
+}
+
+[data-theme="dark"] .alert-badge--tertiary {
+  background: rgba(167, 139, 250, 0.2);
+  color: #c4b5fd;
+}
+
+[data-theme="dark"] .alert-icon--primary {
+  background: rgba(142, 212, 160, 0.15);
+  color: #8ed4a0;
+}
+
+[data-theme="dark"] .alert-icon--tertiary {
+  background: rgba(167, 139, 250, 0.15);
+  color: #a78bfa;
+}
+
+[data-theme="dark"] .alert-delete {
+  border-color: var(--border);
+  color: var(--text-muted);
+}
+
+[data-theme="dark"] .alert-delete:hover {
+  background: rgba(239, 68, 68, 0.12);
+  color: #fca5a5;
+  border-color: #f87171;
+}
+
@media (max-width: 400px) {
  .alerts-title {
    font-size: 1.5rem;
@@ -192,9 +192,9 @@

 .home-card--scan {
  /* Keep the scan button vivid and easy to find (intentionally prominent) */
-  background: #2b5bb5; /* vivid blue to stand out */
-  color: #ffffff;
-  box-shadow: 0 8px 28px rgba(43, 91, 181, 0.28);
+  background: var(--fab-bg);
+  color: var(--fab-text);
+  box-shadow: 0 8px 28px var(--fab-shadow);
  transform: translateY(0);
 }

@@ -204,7 +204,7 @@

 .home-card--scan:focus {
  outline: none;
-  box-shadow: 0 0 0 6px rgba(43,91,181,0.12), 0 8px 28px rgba(43,91,181,0.28);
+  box-shadow: 0 0 0 6px rgba(43,91,181,0.12), 0 8px 28px var(--fab-shadow);
 }

 .home-card-icon {
@@ -0,0 +1,185 @@
+.product-view {
+  width: 100%;
+  max-width: 48rem;
+  margin: 0 auto;
+  padding: 1rem var(--margin-main) 2rem;
+  animation: fadeInUp 0.3s ease-out;
+}
+
+.back-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem 0;
+  margin-bottom: 1rem;
+  background: none;
+  border: none;
+  color: var(--primary, #2563eb);
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+
+.back-btn:hover {
+  opacity: 0.8;
+}
+
+.product-loading,
+.product-error {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: var(--on-surface-variant, #6b7280);
+  font-size: 1rem;
+}
+
+.product-header {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-bottom: 1.5rem;
+}
+
+.product-image {
+  width: 120px;
+  height: 120px;
+  object-fit: contain;
+  border-radius: var(--radius-md, 0.75rem);
+  margin-bottom: 1rem;
+}
+
+.source-badge {
+  display: inline-block;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  color: white;
+  font-size: 0.75rem;
+  font-weight: 600;
+}
+
+.product-name {
+  font-size: 1.5rem;
+  font-weight: 700;
+  color: var(--on-surface);
+  text-align: center;
+  margin-bottom: 0.25rem;
+}
+
+.product-brand {
+  font-size: 1rem;
+  color: var(--on-surface-variant, #6b7280);
+  text-align: center;
+  margin-bottom: 1.5rem;
+}
+
+.product-details {
+  background: var(--surface-container-lowest, #f9fafb);
+  border-radius: var(--radius-md, 0.75rem);
+  padding: 1rem;
+}
+
+.detail-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+  padding: 0.75rem 0;
+  border-bottom: 1px solid var(--outline-variant, #e5e7eb);
+}
+
+.detail-row:last-child {
+  border-bottom: none;
+}
+
+.detail-label {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--on-surface-variant, #9ca3af);
+  text-transform: uppercase;
+}
+
+.detail-value {
+  font-size: 0.9375rem;
+  color: var(--on-surface);
+}
+
+.product-pharmacies {
+  margin-top: 2rem;
+}
+
+.pharmacies-loading {
+  text-align: center;
+  padding: 2rem 1rem;
+  color: var(--on-surface-variant, #6b7280);
+  font-size: 0.875rem;
+}
+
+.pharmacies-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--on-surface);
+  margin-bottom: 1rem;
+}
+
+.pharmacies-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.product-pharmacy-card {
+  background: var(--surface-container-lowest, #f9fafb);
+  border-radius: var(--radius-md, 0.75rem);
+  padding: 1rem;
+}
+
+.product-pharmacy-name {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--on-surface);
+  margin-bottom: 0.25rem;
+}
+
+.product-pharmacy-address {
+  font-size: 0.8125rem;
+  color: var(--on-surface-variant, #6b7280);
+  margin-bottom: 0.25rem;
+}
+
+.product-pharmacy-phone {
+  font-size: 0.8125rem;
+  color: var(--on-surface-variant, #6b7280);
+  margin-bottom: 0.5rem;
+}
+
+.product-pharmacy-status {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+}
+
+.product-pharmacy-price {
+  font-size: 0.9375rem;
+  font-weight: 600;
+  color: var(--primary, #2563eb);
+}
+
+.product-pharmacy-stock {
+  font-size: 0.75rem;
+  font-weight: 600;
+  padding: 0.15rem 0.5rem;
+  border-radius: 9999px;
+}
+
+.product-pharmacy-stock.in-stock {
+  background: #dcfce7;
+  color: #166534;
+}
+
+.product-pharmacy-stock.low-stock {
+  background: #fef9c3;
+  color: #854d0e;
+}
+
+.product-pharmacy-stock.out-of-stock {
+  background: #fee2e2;
+  color: #991b1b;
+}
@@ -0,0 +1,180 @@
+import React, { useState, useEffect } from 'react';
+import './ProductView.css';
+
+export default function ProductView({ source, id, onBack }) {
+  const [product, setProduct] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [pharmacies, setPharmacies] = useState([]);
+  const [loadingPharmacies, setLoadingPharmacies] = useState(false);
+
+  useEffect(() => {
+    loadProduct();
+  }, [source, id]);
+
+  async function loadProduct() {
+    setLoading(true);
+    setError(null);
+    setPharmacies([]);
+    try {
+      const response = await fetch(`/api/products/${source}/${id}`);
+      if (!response.ok) {
+        throw new Error('Producto no encontrado');
+      }
+      const data = await response.json();
+      setProduct(data);
+      loadPharmacies(source, data.id);
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function loadPharmacies(productSource, productId) {
+    setLoadingPharmacies(true);
+    try {
+      const response = await fetch(`/api/products/${productSource}/${productId}/pharmacies`);
+      if (response.ok) {
+        const data = await response.json();
+        setPharmacies(data);
+      }
+    } catch {
+      // Pharmacies are optional — don't block on failure
+    } finally {
+      setLoadingPharmacies(false);
+    }
+  }
+
+  if (loading) {
+    return (
+      <div className="product-view">
+        <div className="product-loading">Cargando...</div>
+      </div>
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="product-view">
+        <button className="back-btn" onClick={onBack}>
+          <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+            <path d="M19 12H5M12 19l-7-7 7-7" />
+          </svg>
+          Volver
+        </button>
+        <div className="product-error">{error}</div>
+      </div>
+    );
+  }
+
+  if (!product) return null;
+
+  const isCima = product.source === 'cima';
+  const sourceColor = isCima ? '#2563eb' : '#16a34a';
+  const sourceLabel = isCima ? 'CIMA' : 'Open Food Facts';
+
+  return (
+    <div className="product-view">
+      <button className="back-btn" onClick={onBack}>
+        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+          <path d="M19 12H5M12 19l-7-7 7-7" />
+        </svg>
+        Volver
+      </button>
+
+      <div className="product-header">
+        {product.image_url && (
+          <img src={product.image_url} alt={product.name} className="product-image" />
+        )}
+        <span className="source-badge" style={{ backgroundColor: sourceColor }}>
+          {sourceLabel}
+        </span>
+      </div>
+
+      <h1 className="product-name">{product.name}</h1>
+      <p className="product-brand">{product.brand}</p>
+
+      <div className="product-details">
+        {isCima ? (
+          <>
+            {product.active_ingredient && (
+              <DetailRow label="Principio activo" value={product.active_ingredient} />
+            )}
+            {product.dosage && (
+              <DetailRow label="Dosis" value={product.dosage} />
+            )}
+            {product.form && (
+              <DetailRow label="Forma farmacéutica" value={product.form} />
+            )}
+            {product.prescription && (
+              <DetailRow label="Prescripción" value={product.prescription} />
+            )}
+            {product.commercialized !== undefined && (
+              <DetailRow label="Comercializado" value={product.commercialized ? 'Sí' : 'No'} />
+            )}
+          </>
+        ) : (
+          <>
+            {product.nutriscore && product.nutriscore !== 'not-applicable' && product.nutriscore !== 'unknown' && (
+              <DetailRow label="Nutri-Score" value={product.nutriscore.toUpperCase()} />
+            )}
+            {product.nova_group && (
+              <DetailRow label="NOVA" value={`Grupo ${product.nova_group}`} />
+            )}
+            {product.eco_score && product.eco_score !== 'unknown' && (
+              <DetailRow label="Eco-Score" value={product.eco_score.toUpperCase()} />
+            )}
+            {product.ingredients && (
+              <DetailRow label="Ingredientes" value={product.ingredients} />
+            )}
+          </>
+        )}
+      </div>
+
+      <div className="product-pharmacies">
+        {loadingPharmacies ? (
+          <div className="pharmacies-loading">Cargando farmacias...</div>
+        ) : pharmacies.length > 0 ? (
+          <>
+            <h3 className="pharmacies-title">
+              Disponible en {pharmacies.length} {pharmacies.length === 1 ? 'farmacia' : 'farmacias'}
+            </h3>
+            <div className="pharmacies-grid">
+              {pharmacies.map((pharmacy) => (
+                <div key={pharmacy.id} className="product-pharmacy-card">
+                  <h4 className="product-pharmacy-name">{pharmacy.name}</h4>
+                  <p className="product-pharmacy-address">{pharmacy.address}</p>
+                  {pharmacy.phone && (
+                    <p className="product-pharmacy-phone">{pharmacy.phone}</p>
+                  )}
+                  <div className="product-pharmacy-status">
+                    {pharmacy.price && (
+                      <span className="product-pharmacy-price">
+                        {parseFloat(pharmacy.price).toFixed(2)} &euro;
+                      </span>
+                    )}
+                    {pharmacy.stock !== undefined && (
+                      <span className={`product-pharmacy-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'}
+                      </span>
+                    )}
+                  </div>
+                </div>
+              ))}
+            </div>
+          </>
+        ) : null}
+      </div>
+    </div>
+  );
+}
+
+function DetailRow({ label, value }) {
+  return (
+    <div className="detail-row">
+      <span className="detail-label">{label}</span>
+      <span className="detail-value">{value}</span>
+    </div>
+  );
+}
@@ -845,3 +845,63 @@
    align-self: flex-end;
  }
 }
+
+/* Theme Toggle */
+.menu-item-theme-label {
+  font-size: 0.8rem;
+  font-weight: 500;
+  color: var(--on-surface-variant);
+}
+
+.profile-theme-options {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.profile-theme-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  padding: 0.85rem 1rem;
+  background: var(--surface);
+  border: 2px solid var(--outline-variant);
+  border-radius: var(--radius);
+  cursor: pointer;
+  color: var(--on-surface-variant);
+  font-family: inherit;
+  text-align: left;
+  transition: border-color 0.15s, color 0.15s, background 0.15s;
+}
+
+.profile-theme-btn:hover {
+  border-color: var(--primary);
+  color: var(--on-surface);
+}
+
+.profile-theme-btn--active {
+  border-color: var(--primary);
+  background: var(--primary-faint);
+  color: var(--primary);
+}
+
+.profile-theme-btn--active .profile-theme-btn-label {
+  color: var(--primary);
+  font-weight: 700;
+}
+
+.profile-theme-btn-label {
+  flex: 1;
+  font-size: 1rem;
+  font-weight: 600;
+  color: var(--on-surface);
+}
+
+.profile-theme-btn-desc {
+  font-size: 0.8rem;
+  color: var(--on-surface-variant);
+}
+
+.profile-modal-theme {
+  max-width: 24rem;
+}
@@ -34,7 +34,7 @@ function resolveAvatarUrl(url) {
  return url;
 }

-function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick }) {
+function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick, theme, onThemeChange }) {
  const [firstName, setFirstName] = useState(currentUser?.first_name || '');
  const [lastName, setLastName] = useState(currentUser?.last_name || '');
  const [avatarUrl, setAvatarUrl] = useState(resolveAvatarUrl(currentUser?.avatar_url));
@@ -57,6 +57,9 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick }) {
  const [configSaving, setConfigSaving] = useState(false);
  const [configFeedback, setConfigFeedback] = useState(null);

+  // Theme modal state
+  const [showTheme, setShowTheme] = useState(false);
+
  // Addresses modal state
  const [showAddresses, setShowAddresses] = useState(false);
  const [addresses, setAddresses] = useState([]);
@@ -410,6 +413,21 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick }) {
          </svg>
        </button>

+        <button className="profile-menu-item" onClick={() => setShowTheme(true)}>
+          <div className="menu-item-icon menu-item-icon--tertiary">
+            <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor">
+              <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-theme-label">
+            {theme === 'auto' ? 'Automático' : theme === 'light' ? 'Claro' : 'Oscuro'}
+          </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>
+
        {searchHistory.length > 0 && (
          <div className="profile-search-history">
            <p className="profile-section-sub">Tus búsquedas recientes:</p>
@@ -718,6 +736,44 @@ function ProfileView({ currentUser, onProfileSaved, onLogout, onAdminClick }) {
          </div>
        </div>
      )}
+
+      {/* Theme Modal */}
+      {showTheme && (
+        <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>
+              <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>
+              <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' },
+                ].map(({ value, label, desc, icon }) => (
+                  <button
+                    key={value}
+                    type="button"
+                    className={`profile-theme-btn ${theme === value ? 'profile-theme-btn--active' : ''}`}
+                    onClick={() => {
+                      onThemeChange(value);
+                      setShowTheme(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>
+                    <span className="profile-theme-btn-desc">{desc}</span>
+                  </button>
+                ))}
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
    </div>
  );
 }
@@ -2,6 +2,7 @@ import React, { useState, useEffect, useMemo } from 'react';
 import '../App.css';
 import SearchBar from '../components/SearchBar';
 import MedicineResults from '../components/MedicineResults';
+import ProductResults from '../components/ProductResults';
 import PharmacyList from '../components/PharmacyList';
 import PharmacyMap from '../components/PharmacyMap';
 import HomeView from './HomeView';
@@ -22,6 +23,8 @@ function PublicView({

  const [searchQuery, setSearchQuery] = useState('');
  const [medicines, setMedicines] = useState([]);
+  const [products, setProducts] = useState([]);
+  const [searchMode, setSearchMode] = useState('all'); // 'all' | 'medicines' | 'products'
  const [selectedMedicine, setSelectedMedicine] = useState(null);
  const [pharmacies, setPharmacies] = useState([]);
  const [loading, setLoading] = useState(false);
@@ -35,6 +38,7 @@ function PublicView({
    const searchMedicines = async () => {
      if (searchQuery.trim().length < 2) {
        setMedicines([]);
+        setProducts([]);
        setSelectedMedicine(null);
        setPharmacies([]);
        return;
@@ -50,6 +54,16 @@ function PublicView({
      } finally {
        setLoading(false);
      }
+
+      try {
+        const productsResponse = await fetch(`/api/products/search?q=${encodeURIComponent(searchQuery)}`);
+        if (productsResponse.ok) {
+          const productsData = await productsResponse.json();
+          setProducts(productsData.results || []);
+        }
+      } catch (err) {
+        console.error('Product search error:', err);
+      }
    };

    const timeoutId = setTimeout(searchMedicines, 300);
@@ -219,7 +233,42 @@ function PublicView({

        {loading && <div className="loading">Buscando...</div>}

-        {searchQuery && !selectedMedicine && (
+        {searchQuery && (
+          <div className="flex gap-2 mb-4">
+            <button
+              onClick={() => setSearchMode('all')}
+              className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
+                searchMode === 'all'
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+              }`}
+            >
+              Todos
+            </button>
+            <button
+              onClick={() => setSearchMode('medicines')}
+              className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
+                searchMode === 'medicines'
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+              }`}
+            >
+              Medicamentos
+            </button>
+            <button
+              onClick={() => setSearchMode('products')}
+              className={`px-3 py-1.5 rounded-full text-sm font-medium transition-colors ${
+                searchMode === 'products'
+                  ? 'bg-blue-600 text-white'
+                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+              }`}
+            >
+              Parafarmacia
+            </button>
+          </div>
+        )}
+
+        {searchQuery && !selectedMedicine && (searchMode === 'all' || searchMode === 'medicines') && (
          <MedicineResults
            medicines={medicines}
            onSelect={setSelectedMedicine}
@@ -229,6 +278,18 @@ function PublicView({
          />
        )}

+        {(searchMode === 'all' || searchMode === 'products') && products.length > 0 && (
+          <div className="mt-6">
+            <h3 className="text-lg font-semibold mb-3">Parafarmacia y Bebé</h3>
+            <ProductResults
+              products={products}
+              onSelect={(product) => {
+                window.location.href = `/product/${product.source}/${product.id}`;
+              }}
+            />
+          </div>
+        )}
+
        {selectedMedicine && (
          <div className="selected-medicine-section">
            <div className="medicine-info">
@@ -57,36 +57,44 @@
  font-weight: 700;
 }

+[data-theme="dark"] .suggestion-btn:hover {
+  background: #07243d;
+}
+
 .suggestion-btn--neutral-1 {
-  background: #ffffff;
-  color: #1e293b;
-  border: 1px solid #e2e8f0;
+  background: var(--suggestion-1);
+  color: var(--suggestion-text);
+  border: 1px solid var(--suggestion-border-1);
+}
+
+[data-theme="dark"] .suggestion-btn--neutral-1:hover {
+  background: #1e2225;
 }

 .suggestion-btn--neutral-2 {
-  background: #f0f7ff;
-  color: #1e293b;
-  border: 1px solid #dbeafe;
+  background: var(--suggestion-2);
+  color: var(--suggestion-text);
+  border: 1px solid var(--suggestion-border-2);
 }

 .suggestion-btn--neutral-3 {
-  background: #e0f0ff;
-  color: #1e293b;
-  border: 1px solid #bfdbfe;
+  background: var(--suggestion-3);
+  color: var(--suggestion-text);
+  border: 1px solid var(--suggestion-border-3);
 }

 .suggestion-btn--neutral-4 {
-  background: #d4ebff;
-  color: #1e293b;
-  border: 1px solid #93c5fd;
+  background: var(--suggestion-4);
+  color: var(--suggestion-text);
+  border: 1px solid var(--suggestion-border-4);
 }

 .suggestion-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius);
-  background: rgba(59, 130, 246, 0.08);
-  color: #3b82f6;
+  background: var(--suggestion-icon-bg);
+  color: var(--suggestion-icon-color);
  display: flex;
  align-items: center;
  justify-content: center;
@@ -149,6 +157,10 @@
  white-space: nowrap;
 }

+[data-theme="dark"] .recent-tag {
+  background: #2c3038;
+}
+
 .recent-distance {
  display: flex;
  align-items: center;
@@ -175,6 +187,10 @@
  transition: opacity 0.15s;
 }

+[data-theme="dark"] .recent-btn {
+  background: #053d13;
+}
+
 .recent-btn:active {
  opacity: 0.85;
 }
@@ -321,7 +337,7 @@

 .retry-location-btn {
  background: var(--error);
-  color: white;
+  color: var(--on-error);
  border: none;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius);
@@ -340,3 +356,44 @@
  color: var(--primary);
  font-size: 0.85rem;
 }
+
+/* Filter tabs */
+.filter-tabs {
+  display: flex;
+  gap: 0.5rem;
+  margin-bottom: 1rem;
+  flex-wrap: wrap;
+}
+
+.filter-tab {
+  padding: 0.5rem 1rem;
+  border-radius: 9999px;
+  border: none;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+  background: var(--surface-container-lowest, #f3f4f6);
+  color: var(--on-surface-variant, #6b7280);
+  transition: all 0.15s;
+}
+
+.filter-tab:hover {
+  background: var(--surface-container-low, #e5e7eb);
+}
+
+.filter-tab--active {
+  background: var(--primary, #2563eb);
+  color: white;
+}
+
+/* Products section */
+.products-section {
+  margin-top: 1.5rem;
+}
+
+.section-subtitle {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--on-surface);
+  margin-bottom: 0.75rem;
+}
@@ -1,6 +1,7 @@
 import React, { useState, useEffect, useMemo, useCallback } from 'react';
 import SearchBar from '../components/SearchBar';
 import MedicineResults from '../components/MedicineResults';
+import ProductResults from '../components/ProductResults';
 import PharmacyList from '../components/PharmacyList';
 import PharmacyMap from '../components/PharmacyMap';
 import { haversineKm, getUserPosition, hasCachedPosition } from '../utils/geo';
@@ -13,9 +14,11 @@ const suggestions = [
  { name: 'Omeprazol', icon: 'emergency_home', color: 'neutral-4' },
 ];

-function SearchView({ currentUser, onLoginRequest, initialQuery = '' }) {
+function SearchView({ currentUser, onLoginRequest, initialQuery = '', onNavigateToProduct }) {
  const [searchQuery, setSearchQuery] = useState(initialQuery);
  const [medicines, setMedicines] = useState([]);
+  const [products, setProducts] = useState([]);
+  const [searchMode, setSearchMode] = useState('all');
  const [selectedMedicine, setSelectedMedicine] = useState(null);
  const [pharmacies, setPharmacies] = useState([]);
  const [loading, setLoading] = useState(false);
@@ -73,25 +76,43 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '' }) {
  }, [currentUser]);

  useEffect(() => {
-    const searchMedicines = async () => {
+    const searchAll = async () => {
      if (searchQuery.trim().length < 2) {
        setMedicines([]);
+        setProducts([]);
        setSelectedMedicine(null);
        setPharmacies([]);
        return;
      }
      setLoading(true);
+      const query = searchQuery.trim();
+
      try {
-        const response = await fetch(`/api/medicines/search?q=${encodeURIComponent(searchQuery)}`);
-        const data = await response.json();
-        setMedicines(data);
+        // Run both searches in parallel for speed
+        const [medicinesRes, productsRes] = await Promise.allSettled([
+          fetch(`/api/medicines/search?q=${encodeURIComponent(query)}`),
+          fetch(`/api/products/search?q=${encodeURIComponent(query)}`),
+        ]);
+
+        // Only update if this search is still the current one
+        if (query !== searchQuery.trim()) return;
+
+        if (medicinesRes.status === 'fulfilled' && medicinesRes.value.ok) {
+          const medicinesData = await medicinesRes.value.json();
+          setMedicines(medicinesData);
+        }
+
+        if (productsRes.status === 'fulfilled' && productsRes.value.ok) {
+          const productsData = await productsRes.value.json();
+          setProducts(productsData.results || []);
+        }
      } catch (error) {
-        console.error('Error searching medicines:', error);
+        console.error('Search error:', error);
      } finally {
        setLoading(false);
      }
    };
-    const timeoutId = setTimeout(searchMedicines, 300);
+    const timeoutId = setTimeout(searchAll, 300);
    return () => clearTimeout(timeoutId);
  }, [searchQuery]);

@@ -276,16 +297,57 @@ function SearchView({ currentUser, onLoginRequest, initialQuery = '' }) {
        )}

        {searchQuery && !selectedMedicine && (
-          <MedicineResults
-            medicines={medicines}
-            onSelect={(m) => {
-              saveToRecent(m);
-              setSelectedMedicine(m);
-            }}
-            query={searchQuery}
-            currentUser={currentUser}
-            onLoginRequest={onLoginRequest}
-          />
+          <>
+            <div className="filter-tabs">
+              <button
+                className={`filter-tab ${searchMode === 'all' ? 'filter-tab--active' : ''}`}
+                onClick={() => setSearchMode('all')}
+              >
+                Todos ({medicines.length + products.length})
+              </button>
+              <button
+                className={`filter-tab ${searchMode === 'medicines' ? 'filter-tab--active' : ''}`}
+                onClick={() => setSearchMode('medicines')}
+              >
+                Medicamentos ({medicines.length})
+              </button>
+              <button
+                className={`filter-tab ${searchMode === 'products' ? 'filter-tab--active' : ''}`}
+                onClick={() => setSearchMode('products')}
+              >
+                Parafarmacia ({products.length})
+              </button>
+            </div>
+
+            {(searchMode === 'all' || searchMode === 'medicines') && (
+              <MedicineResults
+                medicines={medicines}
+                onSelect={(m) => {
+                  saveToRecent(m);
+                  setSelectedMedicine(m);
+                }}
+                query={searchQuery}
+                currentUser={currentUser}
+                onLoginRequest={onLoginRequest}
+              />
+            )}
+
+            {(searchMode === 'all' || searchMode === 'products') && products.length > 0 && (
+              <div className="products-section">
+                <h3 className="section-subtitle">Parafarmacia y Bebé</h3>
+                <ProductResults
+                  products={products}
+                  onSelect={(p) => {
+                    if (onNavigateToProduct) {
+                      onNavigateToProduct(p.source, p.id);
+                    } else {
+                      window.location.href = `/product/${p.source}/${p.id}`;
+                    }
+                  }}
+                />
+              </div>
+            )}
+          </>
        )}

        {selectedMedicine && (
@@ -20,10 +20,16 @@ export default defineConfig({
        name: 'FarmaClic',
        short_name: 'FarmaClic',
        description: 'Encuentra medicamentos en farmacias cercanas',
-        theme_color: '#7fbf8f',
+        theme_color: '#c0dde9',
        background_color: '#f8fafb',
        display: 'standalone',
        start_url: '/',
+        lang: 'es',
+        scope: '/',
+        id: 'farmaclic_app',
+        dir: 'auto',
+        orientation: 'natural',
+        categories: ['health', 'utilities'],
        icons: [
          { src: '/farmaclic_logo.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable' },
        ],
@@ -0,0 +1,226 @@
+# Parafarmacia + Productos de Bebé — Design Spec
+
+**Date:** 2026-07-13
+**Status:** Approved
+**Author:** MiMoCode
+
+## Problem
+
+FarmaFinder currently only searches medications via the CIMA API. Users need to find parapharmacy products (OTC medications, vitamins, topical treatments) and baby products (formula milk, baby food, cereals) — categories that pharmacies sell but CIMA doesn't cover comprehensively.
+
+## Goal
+
+Extend FarmaFinder's search to include:
+1. **OTC medications** from CIMA (filtered by `cpresc = "Sin Receta"`)
+2. **Baby products** (formula milk, baby food, cereals) from Open Food Facts API
+
+Results should appear in a unified search alongside existing prescription medication results.
+
+## Data Sources
+
+### CIMA API (existing, extended)
+
+- **Base URL:** `https://cima.aemps.es/cima/rest`
+- **No authentication required**
+- **New filter:** `cpresc=Sin+Receta` to get only OTC products
+- **Endpoints used:**
+  - `GET /medicamentos?nombre={query}&cpresc=Sin+Receta` — search OTC products
+  - `GET /medicamento/{nregistro}` — get OTC product details
+- **Rate limits:** None documented; existing 5s timeout per request
+- **Data fields:** nregistro, nombre, labtitular, cpresc, formaFarmaceutica, vtm, dosis, fotos, docs
+
+### Open Food Facts API (new)
+
+- **Base URL:** `https://world.openfoodfacts.org/api/v2`
+- **No authentication required**
+- **Endpoints used:**
+  - `GET /search?categories_tags=baby-food&search_terms={query}&json=true` — search baby products
+  - `GET /product/{barcode}.json` — get product details
+- **Rate limits:** Be polite (< 10 req/s)
+- **Data fields:** product_name, brands, image_url, nutriscore, ingredients_text, categories_tags
+- **Product categories to search:**
+  - `baby-foods` — general baby food
+  - `baby-milks` — formula milk
+  - `cereals-for-babies` — baby cereals
+  - `snacks-and-desserts-for-babies` — baby snacks
+
+## Architecture
+
+### Data Flow
+
+```
+User searches "leche"
+  → Frontend: GET /api/products/search?q=leche
+    → Backend orchestrator:
+      1. cimaService.searchOTC('leche')      — CIMA OTC search
+      2. offService.searchBaby('leche')       — Open Food Facts search
+      3. Merge results with source tag
+      4. Cache in Redis (1h TTL)
+    → Return unified result list
+```
+
+### Unified Product Model
+
+```typescript
+interface Product {
+  id: string;                    // nregistro (CIMA) or _id (OFF)
+  source: 'cima' | 'openfoodfacts';
+  name: string;
+  brand: string;                 // labtitular (CIMA) or brands (OFF)
+  category: 'otc' | 'baby_food' | 'baby_milk' | 'baby_cereal';
+  image_url: string | null;      // fotos[0].url (CIMA) or image_url (OFF)
+
+  // CIMA-specific fields
+  active_ingredient?: string;    // vtm.nombre
+  dosage?: string;               // dosis
+  form?: string;                 // formaFarmaceutica.nombre
+  prescription?: string;         // cpresc
+  commercialized?: boolean;      // comerc
+  photos?: string[];
+  docs?: { tipo: number; url: string }[];
+
+  // OFF-specific fields
+  nutriscore?: string;           // nutriscore_grade
+  ingredients?: string;          // ingredients_text
+  nova_group?: number;           // nova_group
+  eco_score?: string;            // ecoscore_grade
+}
+```
+
+## Backend Changes
+
+### 1. New file: `apps/backend/off-service.js`
+
+Open Food Facts API client:
+
+```javascript
+const OFF_API_BASE = 'https://world.openfoodfacts.org/api/v2';
+
+async function searchBabyProducts(query) {
+  // Search in baby-food categories
+  const url = `${OFF_API_BASE}/search?categories_tags=baby-food&search_terms=${encodeURIComponent(query)}&json=true&fields=product_name,brands,image_url,nutriscore_grade,ingredients_text,nova_group,ecoscore_grade,categories_tags&page_size=20`;
+  // Cache key: off:baby:{query}, TTL: 1 hour
+  // Transform to unified Product model
+}
+
+async function getBabyProductDetails(barcode) {
+  const url = `${OFF_API_BASE}/product/${barcode}.json`;
+  // Cache key: off:product:{barcode}, TTL: 24 hours
+  // Transform to unified Product model
+}
+```
+
+### 2. Modify: `apps/backend/cima-service.js`
+
+Add OTC-specific search function:
+
+```javascript
+async function searchOTC(query) {
+  // Same as searchMedicines but adds cpresc=Sin+Receta filter
+  // Cache key: cima:otc:{query}, TTL: 1 hour
+  // Transform to unified Product model (add source: 'cima', category: 'otc')
+}
+```
+
+### 3. Modify: `apps/backend/server.js`
+
+New unified search route:
+
+```javascript
+app.get('/api/products/search', async (req, res) => {
+  const { q } = req.query;
+  // Launch parallel searches:
+  const [cimaResults, offResults] = await Promise.allSettled([
+    searchOTC(q),
+    searchBabyProducts(q)
+  ]);
+  // Merge, deduplicate, sort by relevance
+  // Return unified results
+});
+
+app.get('/api/products/:source/:id', async (req, res) => {
+  const { source, id } = req.params;
+  if (source === 'cima') return getMedicineDetails(id);
+  if (source === 'openfoodfacts') return getBabyProductDetails(id);
+});
+```
+
+### 4. Redis Cache Strategy
+
+| Key Pattern | TTL | Source |
+|-------------|-----|--------|
+| `products:search:{query}` | 1 hour | Merged results |
+| `cima:otc:{query}` | 1 hour | CIMA OTC only |
+| `off:baby:{query}` | 1 hour | OFF baby only |
+| `off:product:{barcode}` | 24 hours | OFF product detail |
+
+## Frontend Changes
+
+### 1. New component: `ProductResults.jsx`
+
+Displays unified search results with:
+- Product card with image, name, brand
+- Source badge: "CIMA" or "Open Food Facts"
+- Category badge: "OTC", "Baby Food", "Formula"
+- Click navigates to `/product/{source}/{id}`
+
+### 2. Modify: `PublicView.jsx`
+
+- Update search to call `/api/products/search?q=`
+- Show unified results alongside existing medicine results
+- Add category filter tabs: "All" | "Medications" | "OTC" | "Baby"
+
+### 3. Modify: `MedicineResults.jsx`
+
+- Accept mixed product types
+- Conditionally render fields based on `source`
+- Show CIMA-specific fields (active ingredient, dosage) for CIMA products
+- Show OFF-specific fields (nutriscore, ingredients) for OFF products
+
+### 4. New route: `/product/:source/:id`
+
+- Detail page for any product type
+- CIMA products: show full medication info + pharmacies
+- OFF products: show nutritional info + "Available at pharmacies" section
+
+## Mobile Changes
+
+### 1. `apps/frontend-mobile/services/products.ts`
+
+```typescript
+export async function searchProducts(query: string): Promise<Product[]> {
+  const { data } = await api.get('/products/search', { params: { q: query } });
+  return data.results;
+}
+```
+
+### 2. `apps/frontend-mobile/app/(tabs)/search.tsx`
+
+- Add product search alongside medicine search
+- Display unified results with source/category badges
+
+### 3. `apps/frontend-mobile/app/product/[source]/[id].tsx`
+
+- New detail screen for non-medication products
+- Adapt layout based on product source
+
+## Error Handling
+
+- CIMA API down: return OFF results only (graceful degradation)
+- OFF API down: return CIMA results only
+- Both down: return cached results if available, else empty
+- OFF rate limit: implement 100ms delay between requests
+
+## Testing
+
+1. **Unit tests:** off-service.js search/transform functions
+2. **Integration tests:** `/api/products/search` endpoint with mocked APIs
+3. **Manual test:** Search "leche" and verify both CIMA OTC + OFF baby results appear
+4. **Edge cases:** Empty results, API timeout, malformed OFF responses
+
+## Out of Scope
+
+- Homeopathy (not reliably available in either API)
+- Commercial parapharmacy APIs (paid, not needed for OTC + baby)
+- Product price/stock for OFF products (pharmacies don't stock these in the current model)
+- User reviews/ratings for products
@@ -0,0 +1,21 @@
+{
+  "cli": {
+    "version": ">= 20.5.1",
+    "appVersionSource": "remote"
+  },
+  "build": {
+    "development": {
+      "developmentClient": true,
+      "distribution": "internal"
+    },
+    "preview": {
+      "distribution": "internal"
+    },
+    "production": {
+      "autoIncrement": true
+    }
+  },
+  "submit": {
+    "production": {}
+  }
+}
@@ -15,7 +15,15 @@
    "build:web": "turbo run build --filter=farma-clic-frontend",
    "test": "turbo run test",
    "lint": "turbo run lint",
-    "start": "turbo run start"
+    "start": "turbo run start",
+    "cap:sync": "npx cap sync",
+    "cap:open:android": "npx cap open android",
+    "cap:open:ios": "npx cap open ios",
+    "cap:run:android": "npx cap run android",
+    "cap:run:ios": "npx cap run ios",
+    "mobile:android": "cd apps/frontend-mobile && npx expo run:android",
+    "mobile:prebuild:android": "cd apps/frontend-mobile && npx expo prebuild --platform android",
+    "mobile:eas:build:android": "cd apps/frontend-mobile && eas build --platform android"
  },
  "devDependencies": {
    "turbo": "^2.5.0"
@@ -24,6 +32,7 @@
    "@capacitor-mlkit/barcode-scanning": "^8.1.0",
    "@capacitor/android": "^8.4.1",
    "@capacitor/app": "^8.1.0",
+    "@capacitor/cli": "^8.4.1",
    "@capacitor/core": "^8.4.1",
    "@capacitor/ios": "^8.4.1",
    "@capacitor/splash-screen": "^8.0.1",
Author	SHA1	Message	Date
Antoni Nuñez Romeu	8bf0b33249	feat: add pharmacy-product linking system Run Tests on Branches / Detect Changes (push) Successful in 12s Details Run Tests on Branches / Frontend Tests (push) Has been cancelled Details Run Tests on Branches / Frontend Mobile Tests (push) Has been cancelled Details Run Tests on Branches / Backend Tests (push) Has been cancelled Details - Add pharmacy_products table (PostgreSQL + SQLite) - Add public route GET /api/products/:source/:id/pharmacies - Add admin CRUD routes for pharmacy-product links - Add cascade delete when pharmacy is removed - Update ProductView to show linked pharmacies - Create PharmacyProductLink admin component - Add 'Vincular Producto a Farmacia' tab in AdminView	2026-07-13 20:41:16 +02:00
Antoni Nuñez Romeu	f921b15d67	fix(frontend): set screen to 'product' when navigating to product detail Run Tests on Branches / Backend Tests (push) Has been cancelled Details Run Tests on Branches / Detect Changes (push) Has been cancelled Details Run Tests on Branches / Frontend Tests (push) Has been cancelled Details Run Tests on Branches / Frontend Mobile Tests (push) Has been cancelled Details - Add setScreen('product') to onNavigateToProduct callback - ProductView was never rendered because screen stayed as 'search'	2026-07-13 19:50:24 +02:00
Antoni Nuñez Romeu	59edc7fbf1	fix(frontend): run medicine and product searches in parallel Run Tests on Branches / Backend Tests (push) Has been cancelled Details Run Tests on Branches / Frontend Tests (push) Has been cancelled Details Run Tests on Branches / Frontend Mobile Tests (push) Has been cancelled Details Run Tests on Branches / Detect Changes (push) Has been cancelled Details - Use Promise.allSettled for parallel API calls - Reduces total search time from ~1300ms to ~500ms - Prevents results disappearing during sequential searches	2026-07-13 19:34:55 +02:00
Antoni Nuñez Romeu	731a6c98ae	feat(frontend): add product detail view and navigation Run Tests on Branches / Detect Changes (push) Successful in 12s Details Run Tests on Branches / Backend Tests (push) Has been cancelled Details Run Tests on Branches / Frontend Tests (push) Has been cancelled Details Run Tests on Branches / Frontend Mobile Tests (push) Has been cancelled Details - Create ProductView component with product details display - Add ProductView.css with responsive styling - Add product screen to App.jsx screen system - Pass onNavigateToProduct callback from App to SearchView - Update ProductResults onSelect to use callback instead of window.location	2026-07-13 17:36:52 +02:00
Antoni Nuñez Romeu	31c1a14343	feat(frontend): integrate product search in SearchView Run Tests on Branches / Detect Changes (push) Successful in 14s Details Run Tests on Branches / Frontend Tests (push) Has been cancelled Details Run Tests on Branches / Frontend Mobile Tests (push) Has been cancelled Details Run Tests on Branches / Backend Tests (push) Has been cancelled Details - Add ProductResults component import - Add products and searchMode state - Add parallel product search to search effect - Add filter tabs (Todos/Medicamentos/Parafarmacia) - Render ProductResults when products found - Add CSS for filter tabs and products section	2026-07-13 17:31:42 +02:00
Antoni Nuñez Romeu	25ebb899e9	debug: add logging for OFF API requests Run Tests on Branches / Detect Changes (push) Successful in 15s Details Run Tests on Branches / Frontend Mobile Tests (push) Successful in 1m57s Details Run Tests on Branches / Frontend Tests (push) Failing after 13m41s Details Run Tests on Branches / Backend Tests (push) Failing after 15m38s Details	2026-07-13 17:13:22 +02:00
Antoni Nuñez Romeu	2e3ce44e7b	fix(backend): remove auth from OFF read operations Run Tests on Branches / Detect Changes (push) Successful in 17s Details Run Tests on Branches / Frontend Mobile Tests (push) Has been cancelled Details Run Tests on Branches / Backend Tests (push) Has been cancelled Details Run Tests on Branches / Frontend Tests (push) Has been cancelled Details - READ operations don't require auth per OFF docs (only User-Agent) - Auth credentials were causing 503 errors - Keep User-Agent header which is required	2026-07-13 17:05:37 +02:00
Antoni Nuñez Romeu	20debdb023	fix(backend): use v2 structured search API for OFF Run Tests on Branches / Detect Changes (push) Successful in 14s Details Run Tests on Branches / Frontend Tests (push) Successful in 3m25s Details Run Tests on Branches / Backend Tests (push) Has been cancelled Details Run Tests on Branches / Frontend Mobile Tests (push) Has been cancelled Details - Switch from /cgi/search.pl (503 errors) to /api/v2/search with brand filter - Add required User-Agent header per OFF documentation - Add OFF_USER_AGENT env var for customization - Update .env.example with User-Agent documentation - Retry logic continues to work with new endpoint	2026-07-13 17:00:09 +02:00
Antoni Nuñez Romeu	452a835b64	fix(backend): add retry logic and remove custom User-Agent for OFF API Run Tests on Branches / Detect Changes (push) Successful in 10s Details Run Tests on Branches / Frontend Tests (push) Has been cancelled Details Run Tests on Branches / Frontend Mobile Tests (push) Has been cancelled Details Run Tests on Branches / Backend Tests (push) Has been cancelled Details - Add retry logic with exponential backoff (2 retries) - Remove custom User-Agent that was being blocked by OFF - Fix syntax error (missing catch block) - OFF API blocks anonymous users during high demand	2026-07-13 16:43:54 +02:00
Antoni Nuñez Romeu	f1b0eab11d	feat(backend): add Open Food Facts authentication support Run Tests on Branches / Detect Changes (push) Successful in 11s Details Run Tests on Branches / Frontend Tests (push) Has been cancelled Details Run Tests on Branches / Frontend Mobile Tests (push) Has been cancelled Details Run Tests on Branches / Backend Tests (push) Has been cancelled Details - Add OFF_USERNAME and OFF_PASSWORD env vars - Use Basic Auth when credentials are provided - Improves rate limits for authenticated requests - Auth is optional (works without credentials)	2026-07-13 16:28:34 +02:00
Antoni Nuñez Romeu	ee23f61057	fix(backend): improve OFF API error handling Run Tests on Branches / Detect Changes (push) Successful in 9s Details Run Tests on Branches / Frontend Tests (push) Has been cancelled Details Run Tests on Branches / Frontend Mobile Tests (push) Has been cancelled Details Run Tests on Branches / Backend Tests (push) Has started running Details - Validate response is JSON before parsing (OFF returns HTML on 503) - Don't cache empty results to avoid blocking future searches - Add validateStatus to only accept 200 responses - Better logging for API failures	2026-07-13 16:23:07 +02:00
Antoni Nuñez Romeu	26f309acfb	fix(backend): switch OFF API to /cgi/search.pl endpoint and fix test imports Run Tests on Branches / Detect Changes (push) Successful in 8s Details Run Tests on Branches / Frontend Tests (push) Has been cancelled Details Run Tests on Branches / Frontend Mobile Tests (push) Has been cancelled Details Run Tests on Branches / Backend Tests (push) Has been cancelled Details - Changed from /api/v2/search (returning 503) to /cgi/search.pl (working) - Removed strict categories_tags=baby-food filter that was too restrictive - Fixed test file to use dynamic imports for ES module compatibility - Increased timeout to 10s for reliability	2026-07-13 16:18:11 +02:00
Antoni Nuñez Romeu	4df1594b3b	docs: add design spec and implementation plan for parapharmacy + baby products Run Tests on Branches / Detect Changes (push) Successful in 8s Details Run Tests on Branches / Frontend Tests (push) Has been cancelled Details Run Tests on Branches / Frontend Mobile Tests (push) Has been cancelled Details Run Tests on Branches / Backend Tests (push) Has been cancelled Details	2026-07-13 15:56:00 +02:00
Antoni Nuñez Romeu	981f3bd3db	fix: address code review issues — nutriscore field name, cache write isolation, missing rate limiter, dead props	2026-07-13 15:46:47 +02:00
Antoni Nuñez Romeu	83920ae57c	feat: display product results alongside medicine results in MedicineResults component	2026-07-13 15:35:11 +02:00
Antoni Nuñez Romeu	7b1636a96e	feat(mobile): add product detail screen for CIMA and OFF products	2026-07-13 15:33:34 +02:00
Antoni Nuñez Romeu	bb2dbbab3a	feat(mobile): integrate product search with filter tabs in search screen	2026-07-13 15:31:39 +02:00
Antoni Nuñez Romeu	d5b23aa94a	feat(mobile): add products API service with search and detail endpoints	2026-07-13 15:28:55 +02:00
Antoni Nuñez Romeu	9e786f2966	feat(frontend): integrate product search into PublicView with filter tabs	2026-07-13 15:27:47 +02:00
Antoni Nuñez Romeu	a709deb893	feat(frontend): add ProductResults component for unified product search Displays CIMA OTC and Open Food Facts baby products with source/category badges, product images, brand info, and Nutri-Score for OFF items.	2026-07-13 15:25:35 +02:00
Antoni Nuñez Romeu	229e1d8106	Add unified product search routes (CIMA OTC + Open Food Facts) - GET /api/products/search?q={query} - parallel search across both sources - GET /api/products/:source/:id - product detail by source (cima/openfoodfacts) - Uses Promise.allSettled for fault-tolerant parallel search - Added imports for searchOTC and OFF service functions	2026-07-13 15:23:43 +02:00
Antoni Nuñez Romeu	f2a5dc4ca3	feat(backend): add CIMA OTC search function with Redis caching	2026-07-13 15:18:20 +02:00
Antoni Nuñez Romeu	d62e5976ce	fix: remove dead BABY_CATEGORIES constant and emoji from logs	2026-07-13 15:17:02 +02:00
Antoni Nuñez Romeu	d6f4164dae	feat(backend): add Open Food Facts service with Redis caching - transformOFFProduct: maps OFF products to unified Product model - searchBabyProducts: searches baby products via OFF API (1h cache) - getBabyProductDetails: fetches product details by barcode (1h cache) - 9 tests passing for transform logic and input validation	2026-07-13 15:10:46 +02:00
Ichitux	2713be85a3	Merge pull request 'feat: add Expo Push notifications for mobile and configure EXPO_ACCESS_TOKEN' (#30 ) from feat/expo-push-notifications into main Build & Push Docker Images / Detect Changes (push) Successful in 8s Details Build & Push Docker Images / Backend Tests (push) Successful in 1m57s Details Build & Push Docker Images / Frontend Tests (push) Successful in 1m55s Details Build & Push Docker Images / Build Backend (push) Successful in 27s Details Build & Push Docker Images / Build Frontend (push) Successful in 39s Details Build & Push Docker Images / Deploy (push) Successful in 22s Details Reviewed-on: #30	2026-07-13 10:28:46 +00:00
Antoni Nuñez Romeu	0c43d32cf1	feat: add Expo Push notifications for mobile and configure EXPO_ACCESS_TOKEN Run Tests on Branches / Detect Changes (push) Successful in 13s Details Run Tests on Branches / Backend Tests (push) Successful in 1m58s Details Run Tests on Branches / Frontend Tests (push) Successful in 1m53s Details Run Tests on Branches / Frontend Mobile Tests (push) Successful in 1m49s Details - Backend: add expo_push_tokens table, expo-register/unregister endpoints, hybrid VAPID+Expo push sender - Mobile: register Expo push token on app launch, bell toggle on medicine/pharmacy detail screens - .env.example: document EXPO_ACCESS_TOKEN configuration - Dark mode hover fixes for search suggestions and recent buttons	2026-07-13 12:21:25 +02:00
Ichitux	a00cfe949c	Merge pull request 'feat(mobile): improve login, profile, alerts screens and dark mode background' (#29 ) from feat/mobile-ui-improvements into main Build & Push Docker Images / Detect Changes (push) Successful in 8s Details Build & Push Docker Images / Backend Tests (push) Has been skipped Details Build & Push Docker Images / Frontend Tests (push) Successful in 1m48s Details Build & Push Docker Images / Build Backend (push) Has been skipped Details Build & Push Docker Images / Build Frontend (push) Successful in 39s Details Build & Push Docker Images / Deploy (push) Successful in 22s Details Reviewed-on: #29	2026-07-10 14:44:08 +00:00
Antoni Nuñez Romeu	2a7ab64bbf	feat(mobile): improve login, profile, alerts screens and dark mode background Run Tests on Branches / Detect Changes (push) Successful in 8s Details Run Tests on Branches / Backend Tests (push) Has been skipped Details Run Tests on Branches / Frontend Tests (push) Successful in 1m41s Details Run Tests on Branches / Frontend Mobile Tests (push) Successful in 1m46s Details - Unify login/register into single screen with tab switcher, logo, and themed inputs - Redesign profile with header card, segmented theme toggle, icon-based menu, and bottom-sheet modals - Add auth guard to alerts screen showing login prompt instead of 401 error - Switch ImageBackground to explicit Image+View layering for reliable rendering - Add dark mode background image switching in root layout - Add dark mode override for recent-tag in PWA search view	2026-07-10 16:39:59 +02:00
Ichitux	bf519e43c9	Merge pull request 'Changes in background and dark mode' (#28 ) from bg_fixes_ into main Build & Push Docker Images / Detect Changes (push) Successful in 8s Details Build & Push Docker Images / Backend Tests (push) Has been skipped Details Build & Push Docker Images / Frontend Tests (push) Has been skipped Details Build & Push Docker Images / Build Backend (push) Has been skipped Details Build & Push Docker Images / Build Frontend (push) Has been skipped Details Build & Push Docker Images / Deploy (push) Has been skipped Details Reviewed-on: #28	2026-07-10 10:46:50 +00:00
Antoni Nuñez Romeu	d371fd2bb7	Changes in background and dark mode Run Tests on Branches / Detect Changes (push) Successful in 8s Details Run Tests on Branches / Backend Tests (push) Has been skipped Details Run Tests on Branches / Frontend Tests (push) Has been skipped Details Run Tests on Branches / Frontend Mobile Tests (push) Successful in 1m43s Details	2026-07-10 12:41:10 +02:00
Ichitux	02cab5f740	Merge pull request 'Dark mode improvements and FarmaClic rebranding' (#27 ) from dark-mode-rebrand-updates into main Build & Push Docker Images / Deploy (push) Successful in 22s Details Build & Push Docker Images / Detect Changes (push) Successful in 8s Details Build & Push Docker Images / Backend Tests (push) Has been skipped Details Build & Push Docker Images / Frontend Tests (push) Successful in 1m57s Details Build & Push Docker Images / Build Backend (push) Has been skipped Details Build & Push Docker Images / Build Frontend (push) Successful in 44s Details Reviewed-on: #27	2026-07-10 08:03:28 +00:00
Antoni Nuñez Romeu	8b9b7e8444	Dark mode improvements and FarmaClic rebranding Run Tests on Branches / Detect Changes (push) Successful in 12s Details Run Tests on Branches / Backend Tests (push) Has been skipped Details Run Tests on Branches / Frontend Tests (push) Successful in 1m55s Details Run Tests on Branches / Frontend Mobile Tests (push) Successful in 1m51s Details - Dark mode: gray background instead of pure black - Dark mode: improved notification card visibility (SavedNotifications) - Dark mode: improved alerts view badge contrast (AlertsView) - Dark mode: custom pharmacy-themed background image - Rebranding: replace all logos with FarmaClic branding - Update PWA icons, favicon, apple-touch-icon, and mobile app icons	2026-07-10 09:58:36 +02:00
Ichitux	f58b4427a8	Merge fixing things Build & Push Docker Images / Detect Changes (push) Successful in 7s Details Build & Push Docker Images / Backend Tests (push) Successful in 1m47s Details Build & Push Docker Images / Frontend Tests (push) Has been skipped Details Build & Push Docker Images / Build Backend (push) Successful in 26s Details Build & Push Docker Images / Build Frontend (push) Has been skipped Details Build & Push Docker Images / Deploy (push) Successful in 23s Details	2026-07-09 17:39:44 +02:00
Ichitux	ec2416613c	Merge pull request 'Add dark mode for PWA frontend' (#25 ) from dark_mode_frontend into main Build & Push Docker Images / Detect Changes (push) Successful in 9s Details Build & Push Docker Images / Backend Tests (push) Has been skipped Details Build & Push Docker Images / Frontend Tests (push) Successful in 1m50s Details Build & Push Docker Images / Build Backend (push) Has been skipped Details Build & Push Docker Images / Build Frontend (push) Successful in 47s Details Build & Push Docker Images / Deploy (push) Successful in 21s Details Reviewed-on: #25	2026-07-09 11:34:35 +00:00
Ichitux	2f36ef685d	Mobile App design Run Tests on Branches / Detect Changes (push) Successful in 10s Details Run Tests on Branches / Backend Tests (push) Successful in 2m12s Details Run Tests on Branches / Frontend Tests (push) Has been skipped Details Run Tests on Branches / Frontend Mobile Tests (push) Successful in 1m47s Details	2026-07-09 13:33:54 +02:00
Antoni Nuñez Romeu	e9a1d7c53d	Add dark mode for PWA frontend Run Tests on Branches / Detect Changes (push) Successful in 12s Details Run Tests on Branches / Backend Tests (push) Has been skipped Details Run Tests on Branches / Frontend Tests (push) Successful in 1m47s Details Run Tests on Branches / Frontend Mobile Tests (push) Has been skipped Details	2026-07-09 13:18:25 +02:00
Ichitux	2e9b2f2c1f	Merge pull request 'Frontend Hotfixes & Backend improvements' (#24 ) from react_app_fixes into main Build & Push Docker Images / Detect Changes (push) Successful in 9s Details Build & Push Docker Images / Backend Tests (push) Successful in 2m4s Details Build & Push Docker Images / Frontend Tests (push) Has been skipped Details Build & Push Docker Images / Build Backend (push) Successful in 23s Details Build & Push Docker Images / Build Frontend (push) Has been skipped Details Build & Push Docker Images / Deploy (push) Successful in 23s Details Reviewed-on: #24	2026-07-08 23:03:09 +00:00
Ichitux	5f604b11ba	Frontend Hotfixes & Backend improvements Run Tests on Branches / Detect Changes (push) Successful in 9s Details Run Tests on Branches / Backend Tests (push) Successful in 1m51s Details Run Tests on Branches / Frontend Tests (push) Has been skipped Details Run Tests on Branches / Frontend Mobile Tests (push) Successful in 1m44s Details	2026-07-09 00:58:31 +02:00
Ichitux	16fea2de8f	Merge pull request 'Manifest changes to PWA' (#23 ) from feat/android-build-setup into main Build & Push Docker Images / Backend Tests (push) Has been skipped Details Build & Push Docker Images / Detect Changes (push) Successful in 7s Details Build & Push Docker Images / Frontend Tests (push) Successful in 1m43s Details Build & Push Docker Images / Build Backend (push) Has been skipped Details Build & Push Docker Images / Build Frontend (push) Successful in 44s Details Build & Push Docker Images / Deploy (push) Successful in 25s Details Reviewed-on: #23	2026-07-08 22:05:52 +00:00
Ichitux	302d574220	Manifest changes to PWA Run Tests on Branches / Detect Changes (push) Successful in 8s Details Run Tests on Branches / Backend Tests (push) Has been skipped Details Run Tests on Branches / Frontend Tests (push) Successful in 2m6s Details Run Tests on Branches / Frontend Mobile Tests (push) Has been skipped Details	2026-07-08 23:54:50 +02:00