Refactor: Implement DashboardLayout, fix mobile nav, and resolve scroll issues

app/budget/page.tsx

@@ -1,27 +1,12 @@
 'use client'
 
-import { Sidebar, Header, MobileNav } from '@/components/layout'
+import { DashboardLayout } from '@/components/layout/DashboardLayout'
 import { BudgetSection } from '@/components/budget'
-import { useSidebar } from '@/app/providers'
-import { useAlerts } from '@/components/alerts'
 
 export default function BudgetPage() {
-  const { isOpen, close, toggle } = useSidebar()
-  const { unreadCount } = useAlerts()
-
   return (
-    <div className="flex min-h-screen bg-slate-950">
-      <Sidebar isOpen={isOpen} onClose={close} unreadAlertsCount={unreadCount} />
-
-      <div className="flex-1 flex flex-col min-h-screen">
-        <Header onMenuClick={toggle} title="Presupuesto" />
-
-        <main className="flex-1 p-4 md:p-6 lg:p-8 pb-20">
-          <BudgetSection />
-        </main>
-
-        <MobileNav unreadAlertsCount={unreadCount} />
-      </div>
-    </div>
+    <DashboardLayout title="Presupuesto">
+      <BudgetSection />
+    </DashboardLayout>
   )
 }