feat: initial commit - finanzas app

Complete personal finance management application with:
- Dashboard with financial metrics and alerts
- Credit card management and payments
- Fixed and variable debt tracking
- Monthly budget planning
- Intelligent alert system
- Responsive design with Tailwind CSS

Tech stack: Next.js 14, TypeScript, Zustand, Recharts

🤖 Generated with [Claude Code](https://claude.com/claude-code)

components/layout/MobileNav.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import {
+  LayoutDashboard,
+  Wallet,
+  CreditCard,
+  PiggyBank,
+  Bell,
+} from 'lucide-react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+
+interface MobileNavProps {
+  unreadAlertsCount?: number;
+}
+
+const navigationItems = [
+  { name: 'Dashboard', href: '/', icon: LayoutDashboard },
+  { name: 'Deudas', href: '/debts', icon: Wallet },
+  { name: 'Tarjetas', href: '/cards', icon: CreditCard },
+  { name: 'Presupuesto', href: '/budget', icon: PiggyBank },
+  { name: 'Alertas', href: '/alerts', icon: Bell, hasBadge: true },
+];
+
+export function MobileNav({ unreadAlertsCount = 0 }: MobileNavProps) {
+  const pathname = usePathname();
+
+  const isActive = (href: string) => {
+    if (href === '/') {
+      return pathname === '/';
+    }
+    return pathname.startsWith(href);
+  };
+
+  return (
+    <nav className="fixed bottom-0 left-0 right-0 z-40 bg-slate-900 border-t border-slate-800 lg:hidden">
+      <ul className="flex items-center justify-around h-16">
+        {navigationItems.map((item) => {
+          const active = isActive(item.href);
+          const Icon = item.icon;
+
+          return (
+            <li key={item.name} className="flex-1">
+              <Link
+                href={item.href}
+                className={`
+                  flex flex-col items-center justify-center gap-1 py-2
+                  transition-colors relative
+                  ${
+                    active
+                      ? 'text-emerald-500'
+                      : 'text-slate-400 hover:text-slate-300'
+                  }
+                `}
+              >
+                <div className="relative">
+                  <Icon className="w-6 h-6" />
+                  {item.hasBadge && unreadAlertsCount > 0 && (
+                    <span className="absolute -top-1 -right-1 flex items-center justify-center min-w-[16px] h-4 px-1 text-[10px] font-semibold bg-red-500 text-white rounded-full">
+                      {unreadAlertsCount > 99 ? '99+' : unreadAlertsCount}
+                    </span>
+                  )}
+                </div>
+                <span className="text-[10px] font-medium">{item.name}</span>
+              </Link>
+            </li>
+          );
+        })}
+      </ul>
+    </nav>
+  );
+}