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/budget/BudgetCard.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import { TrendingUp, TrendingDown, Minus } from 'lucide-react'
+import { cn, formatCurrency } from '@/lib/utils'
+
+interface BudgetCardProps {
+  label: string
+  amount: number
+  trend?: 'up' | 'down' | 'neutral'
+  color?: string
+}
+
+export function BudgetCard({ label, amount, trend = 'neutral', color }: BudgetCardProps) {
+  const getTrendIcon = () => {
+    switch (trend) {
+      case 'up':
+        return <TrendingUp className="w-4 h-4 text-emerald-400" />
+      case 'down':
+        return <TrendingDown className="w-4 h-4 text-red-400" />
+      default:
+        return <Minus className="w-4 h-4 text-slate-500" />
+    }
+  }
+
+  const getTrendText = () => {
+    switch (trend) {
+      case 'up':
+        return <span className="text-emerald-400 text-xs">Positivo</span>
+      case 'down':
+        return <span className="text-red-400 text-xs">Negativo</span>
+      default:
+        return <span className="text-slate-500 text-xs">Neutral</span>
+    }
+  }
+
+  const textColor = color || 'text-white'
+
+  return (
+    <div className="bg-slate-800 border border-slate-700/50 rounded-lg p-4">
+      <div className="flex items-center justify-between">
+        <p className="text-slate-400 text-sm">{label}</p>
+        {getTrendIcon()}
+      </div>
+      <p className={cn('text-2xl font-mono font-semibold mt-2', textColor)}>
+        {formatCurrency(amount)}
+      </p>
+      <div className="mt-2">{getTrendText()}</div>
+    </div>
+  )
+}