feat(mobile): improve login, profile, alerts screens and dark mode background

- 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

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

@@ -1,7 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import { View, Text, StyleSheet, FlatList, TouchableOpacity, Alert, useWindowDimensions } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
+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';
@@ -20,17 +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);
@@ -123,10 +131,28 @@ 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, { backgroundColor: colors.background }]}>
       <View style={[styles.header, isTablet && styles.headerTablet]}>
@@ -172,6 +198,32 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
+  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,
     paddingTop: spacing.lg,

apps/frontend-mobile/app/_layout.tsx

@@ -1,7 +1,7 @@
-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';
@@ -11,6 +11,9 @@ import { ThemeProvider, useThemeContext } from '../components/ThemeProvider';
 
 const queryClient = new QueryClient();
 
+const bgLight = require('../assets/bg.png');
+const bgDark = require('../assets/bg_dark.png');
+
 function RootLayoutInner() {
   const { checkAuth } = useAuthStore();
   const { colors, isDark } = useThemeContext();
@@ -19,17 +22,17 @@ function RootLayoutInner() {
 
   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();
@@ -46,34 +49,34 @@ function RootLayoutInner() {
         }}
       >
         <Stack.Screen name="(tabs)" options={{ headerShown: false }} />
-        <Stack.Screen 
-          name="medicine/[id]" 
-          options={{ title: 'Medicamento' }} 
+        <Stack.Screen
+          name="medicine/[id]"
+          options={{ title: 'Medicamento' }}
         />
-        <Stack.Screen 
-          name="pharmacy/[id]" 
-          options={{ title: 'Farmacia' }} 
+        <Stack.Screen
+          name="pharmacy/[id]"
+          options={{ title: 'Farmacia' }}
         />
-        <Stack.Screen 
-          name="scanner" 
-          options={{ 
+        <Stack.Screen
+          name="scanner"
+          options={{
             title: 'Escanear',
             headerShown: false,
-          }} 
+          }}
         />
-        <Stack.Screen 
-          name="auth/login" 
-          options={{ 
+        <Stack.Screen
+          name="auth/login"
+          options={{
             title: 'Iniciar Sesión',
             headerShown: false,
-          }} 
+          }}
         />
-        <Stack.Screen 
-          name="auth/register" 
-          options={{ 
+        <Stack.Screen
+          name="auth/register"
+          options={{
             title: 'Registrarse',
             headerShown: false,
-          }} 
+          }}
         />
       </Stack>
       <StatusBar style={isDark ? 'light' : 'auto'} />
@@ -85,21 +88,23 @@ function ThemedBackground({ children }: { children: React.ReactNode }) {
   const { isDark } = useThemeContext();
 
   return (
-    <ImageBackground
-      source={isDark ? require('../assets/bg_dark.png') : require('../assets/bg.png')}
-      style={bgStyles.background}
-      resizeMode="cover"
-      imageStyle={bgStyles.backgroundImage}
-    >
-      <View style={[bgStyles.overlay, isDark && bgStyles.overlayDark]} />
-      {children}
-    </ImageBackground>
+    <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={{ flex: 1 }}>
+    <GestureHandlerRootView style={styles.root}>
       <SafeAreaProvider>
         <QueryClientProvider client={queryClient}>
           <ThemeProvider>
@@ -113,11 +118,12 @@ export default function RootLayout() {
   );
 }
 
-const bgStyles = StyleSheet.create({
-  background: {
+const styles = StyleSheet.create({
+  root: {
     flex: 1,
   },
-  backgroundImage: {
+  bgImage: {
+    ...StyleSheet.absoluteFillObject,
     opacity: 0.55,
   },
   overlay: {
@@ -127,4 +133,7 @@ const bgStyles = StyleSheet.create({
   overlayDark: {
     backgroundColor: 'rgba(0, 0, 0, 0.25)',
   },
+  content: {
+    flex: 1,
+  },
 });

apps/frontend-mobile/app/auth/login.tsx

@@ -1,40 +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 { useThemeContext } from '../../components/ThemeProvider';
-import { spacing, borderRadius } from '../../constants/theme';
-import { 
-  isBiometricsAvailable, 
-  authenticateWithBiometrics, 
-  saveBiometricCredentials, 
-  getBiometricUsername 
+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();
@@ -48,21 +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);
-      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);
     }
@@ -95,61 +130,162 @@ export default function LoginScreen() {
       style={[styles.container, { backgroundColor: colors.background }]}
       behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
     >
-      <View style={styles.form}>
-        <Text style={[styles.title, { color: colors.text }]}>Iniciar Sesión</Text>
-        <Text style={[styles.subtitle, { color: colors.textSecondary }]}>Ingresa tus credenciales para continuar</Text>
-
-        <View style={styles.inputContainer}>
-          <Text style={[styles.label, { color: colors.text }]}>Usuario</Text>
-          <TextInput
-            style={[styles.input, { backgroundColor: colors.card, color: colors.text }]}
-            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, { color: colors.text }]}>Contraseña</Text>
-          <TextInput
-            style={[styles.input, { backgroundColor: colors.card, color: colors.text }]}
-            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, { backgroundColor: colors.card, borderColor: colors.primary }]}
-            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, { color: colors.primary }]}>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, { color: colors.primary }]}>¿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,54 +296,102 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  form: {
+  content: {
     flex: 1,
     justifyContent: 'center',
-    padding: spacing.xl,
+    paddingHorizontal: spacing.lg,
+    gap: spacing.lg,
   },
-  title: {
-    fontSize: 28,
-    fontWeight: 'bold',
-    marginBottom: spacing.sm,
+  logoSection: {
+    alignItems: 'center',
+    gap: spacing.sm,
   },
-  subtitle: {
-    fontSize: 16,
-    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',
+  },
+  tabTextActive: {
+    fontWeight: '700',
+  },
+  card: {
+    borderRadius: borderRadius.xl,
+    padding: spacing.lg,
+    gap: spacing.sm,
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: '700',
     marginBottom: spacing.xs,
   },
-  input: {
+  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,
   },
+  hints: {
+    gap: 2,
+    marginTop: spacing.xs,
+  },
+  hint: {
+    fontSize: 12,
+    lineHeight: 18,
+  },
   button: {
-    backgroundColor: '#7fbf8f',
     borderRadius: borderRadius.md,
     padding: spacing.md,
     alignItems: 'center',
-    marginTop: spacing.md,
+    marginTop: spacing.sm,
+    flexDirection: 'row',
+    justifyContent: 'center',
   },
   buttonDisabled: {
     opacity: 0.6,
   },
   buttonText: {
-    color: '#ffffff',
     fontSize: 16,
-    fontWeight: '600',
-  },
-  linkButton: {
-    marginTop: spacing.lg,
-    alignItems: 'center',
-  },
-  linkText: {
-    fontSize: 14,
+    fontWeight: '700',
   },
   biometricButton: {
     flexDirection: 'row',
@@ -215,12 +399,20 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     borderRadius: borderRadius.md,
     padding: spacing.md,
-    marginTop: spacing.md,
+    marginTop: spacing.xs,
     borderWidth: 1,
+    gap: spacing.sm,
   },
   biometricText: {
-    fontSize: 16,
+    fontSize: 15,
+    fontWeight: '600',
+  },
+  linkButton: {
+    alignItems: 'center',
+    paddingVertical: spacing.sm,
+  },
+  linkText: {
+    fontSize: 14,
     fontWeight: '600',
-    marginLeft: spacing.sm,
   },
 });

apps/frontend-mobile/app/auth/register.tsx

@@ -1,167 +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 { useThemeContext } from '../../components/ThemeProvider';
-import { spacing, borderRadius } from '../../constants/theme';
+import { Redirect } from 'expo-router';
 
-export default function RegisterScreen() {
-  const router = useRouter();
-  const { colors } = useThemeContext();
-  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, { backgroundColor: colors.background }]}
-      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
-    >
-      <View style={styles.form}>
-        <Text style={[styles.title, { color: colors.text }]}>Crear Cuenta</Text>
-        <Text style={[styles.subtitle, { color: colors.textSecondary }]}>Regístrate para empezar</Text>
-
-        <View style={styles.inputContainer}>
-          <Text style={[styles.label, { color: colors.text }]}>Usuario</Text>
-          <TextInput
-            style={[styles.input, { backgroundColor: colors.card, color: colors.text }]}
-            value={username}
-            onChangeText={setUsername}
-            placeholder="Elige un usuario"
-            placeholderTextColor={colors.textSecondary}
-            autoCapitalize="none"
-            autoCorrect={false}
-          />
-        </View>
-
-        <View style={styles.inputContainer}>
-          <Text style={[styles.label, { color: colors.text }]}>Contraseña</Text>
-          <TextInput
-            style={[styles.input, { backgroundColor: colors.card, color: colors.text }]}
-            value={password}
-            onChangeText={setPassword}
-            placeholder="Elige una contraseña"
-            placeholderTextColor={colors.textSecondary}
-            secureTextEntry
-          />
-        </View>
-
-        <View style={styles.inputContainer}>
-          <Text style={[styles.label, { color: colors.text }]}>Confirmar Contraseña</Text>
-          <TextInput
-            style={[styles.input, { backgroundColor: colors.card, color: colors.text }]}
-            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, { color: colors.primary }]}>¿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,
-  },
-  form: {
-    flex: 1,
-    justifyContent: 'center',
-    padding: spacing.xl,
-  },
-  title: {
-    fontSize: 28,
-    fontWeight: 'bold',
-    marginBottom: spacing.sm,
-  },
-  subtitle: {
-    fontSize: 16,
-    marginBottom: spacing.xl,
-  },
-  inputContainer: {
-    marginBottom: spacing.md,
-  },
-  label: {
-    fontSize: 14,
-    fontWeight: '500',
-    marginBottom: spacing.xs,
-  },
-  input: {
-    borderRadius: borderRadius.md,
-    padding: spacing.md,
-    fontSize: 16,
-  },
-  button: {
-    backgroundColor: '#7fbf8f',
-    borderRadius: borderRadius.md,
-    padding: spacing.md,
-    alignItems: 'center',
-    marginTop: spacing.md,
-  },
-  buttonDisabled: {
-    opacity: 0.6,
-  },
-  buttonText: {
-    color: '#ffffff',
-    fontSize: 16,
-    fontWeight: '600',
-  },
-  linkButton: {
-    marginTop: spacing.lg,
-    alignItems: 'center',
-  },
-  linkText: {
-    fontSize: 14,
-  },
-});

apps/frontend/src/views/SearchView.css

@@ -149,6 +149,10 @@
   white-space: nowrap;
 }
 
+[data-theme="dark"] .recent-tag {
+  background: #2c3038;
+}
+
 .recent-distance {
   display: flex;
   align-items: center;