fix(mobile): align background, API config, and search bar with PWA

- Add background image matching PWA (bg.png with opacity + overlay)
- Fix production API URL to farmacias.hacecalor.net
- Replace raw fetch calls in alerts.tsx with configured api service
- Constrain SearchBar max-width to 420px to prevent horizontal clipping

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

@@ -3,6 +3,7 @@ import { View, Text, StyleSheet, FlatList, TouchableOpacity, Alert, useWindowDim
 import { Ionicons } from '@expo/vector-icons';
 import { colors, spacing, borderRadius, shadows } from '../../constants/theme';
 import { LoadingSpinner } from '../../components/LoadingSpinner';
+import api from '../../services/api';
 
 const TABLET_MIN_WIDTH = 768;
 
@@ -33,9 +34,8 @@ export default function AlertsScreen() {
     setIsLoading(true);
     setError(null);
     try {
-      const res = await fetch('/api/notifications/mine', { credentials: 'include' });
-      if (!res.ok) throw new Error(`HTTP ${res.status}`);
-      const data = await res.json();
+      const res = await api.get('/notifications/mine');
+      const data = res.data;
       const merged = [
         ...(data.pharmacy || []),
         ...(data.global || []),
@@ -63,13 +63,9 @@ export default function AlertsScreen() {
           onPress: async () => {
             setDeletingId(key);
             try {
-              const res = await fetch('/api/notifications/mine', {
-                method: 'DELETE',
-                headers: { 'Content-Type': 'application/json' },
-                credentials: 'include',
-                body: JSON.stringify({ scope: item.scope, id: item.id }),
+              await api.delete('/notifications/mine', {
+                data: { scope: item.scope, id: item.id },
               });
-              if (!res.ok && res.status !== 204) throw new Error(`HTTP ${res.status}`);
               setItems(prev => prev.filter(i => !(i.scope === item.scope && i.id === item.id)));
             } catch (err: any) {
               Alert.alert('Error', err.message || 'No se pudo eliminar');

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

@@ -100,7 +100,10 @@ const styles = StyleSheet.create({
   searchContainer: {
     flexDirection: 'row',
     alignItems: 'center',
-    paddingRight: spacing.lg,
+    paddingHorizontal: spacing.lg,
+    maxWidth: 480,
+    alignSelf: 'center',
+    width: '100%',
   },
   searchContainerTablet: {
     maxWidth: 700,

apps/frontend-mobile/app/_layout.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from 'react';
 import { Stack } from 'expo-router';
 import { StatusBar } from 'expo-status-bar';
+import { ImageBackground, 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';
@@ -36,6 +37,13 @@ export default function RootLayout() {
 
   return (
     <GestureHandlerRootView style={{ flex: 1 }}>
+      <ImageBackground
+        source={require('../assets/bg.png')}
+        style={bgStyles.background}
+        resizeMode="cover"
+        imageStyle={bgStyles.backgroundImage}
+      >
+      <View style={bgStyles.overlay} />
       <SafeAreaProvider>
         <QueryClientProvider client={queryClient}>
           <Stack
@@ -79,6 +87,20 @@ export default function RootLayout() {
           <StatusBar style="auto" />
         </QueryClientProvider>
       </SafeAreaProvider>
+      </ImageBackground>
     </GestureHandlerRootView>
   );
 }
+
+const bgStyles = StyleSheet.create({
+  background: {
+    flex: 1,
+  },
+  backgroundImage: {
+    opacity: 0.5,
+  },
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'rgba(255, 252, 245, 0.48)',
+  },
+});