Implement system bars management and Edge-to-Edge layout

App.tsx

@@ -1,5 +1,7 @@
 import { StatusBar } from 'expo-status-bar';
 import React, { useEffect } from 'react';
+import { Platform } from 'react-native';
+import * as NavigationBar from 'expo-navigation-bar';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { SessionProvider } from './src/auth/session';
 import { getDb } from './src/db/database';
@@ -9,13 +11,20 @@ export default function App() {
   // Abre y migra la BD local al arrancar.
   useEffect(() => {
     void getDb();
+
+    // Configuración global de la barra de navegación en Android (Edge-to-Edge)
+    if (Platform.OS === 'android') {
+      void NavigationBar.setPositionAsync('absolute');
+      void NavigationBar.setBackgroundColorAsync('#ffffff00'); // Transparente
+      void NavigationBar.setButtonStyleAsync('dark'); // Iconos oscuros por defecto
+    }
   }, []);
 
   return (
     <SafeAreaProvider>
       <SessionProvider>
         <RootNavigator />
-        <StatusBar style="light" />
+        <StatusBar style="auto" />
       </SessionProvider>
     </SafeAreaProvider>
   );