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/_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)',
+  },
+});