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

app/cards/page.tsx

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