fix: pin Preferências to the right of the mobile footer menu

app/src/App.tsx

@@ -127,7 +127,7 @@ function AppLayout({ children }: { children: React.ReactNode }) {
 
         {/* Demais itens (Rolagem horizontal) */}
         <div className="flex-1 flex items-center h-full overflow-x-auto no-scrollbar py-1 gap-1">
-          {navItems.slice(1).map((item) => {
+          {navItems.slice(1, -1).map((item) => {
             const isActive = location.pathname === item.path;
             const label = t(item.labelKey);
             return (
@@ -147,6 +147,28 @@ function AppLayout({ children }: { children: React.ReactNode }) {
             );
           })}
         </div>
+
+        {/* Preferências (Fixo na direita) */}
+        {(() => {
+          const settingsItem = navItems[navItems.length - 1];
+          const isActive = location.pathname === settingsItem.path;
+          const label = t(settingsItem.labelKey);
+          return (
+            <Link
+              key={settingsItem.path}
+              to={settingsItem.path}
+              className={cn(
+                'flex flex-col items-center justify-center h-full px-3 text-xs transition-colors shrink-0 border-l bg-card z-20 shadow-[-4px_0_8px_-4px_rgba(0,0,0,0.15)]',
+                isActive ? 'text-primary font-medium' : 'text-muted-foreground',
+              )}
+            >
+              <div className={cn('p-1 rounded-full transition-colors', isActive && 'bg-primary/10')}>
+                {settingsItem.icon}
+              </div>
+              <span className="scale-90 text-[10px]">{label}</span>
+            </Link>
+          );
+        })()}
       </nav>
     </div>
   );