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/BudgetProgress.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import { cn, formatCurrency } from '@/lib/utils'
+
+interface BudgetProgressProps {
+  current: number
+  max: number
+  label: string
+  color?: string
+}
+
+export function BudgetProgress({ current, max, label, color }: BudgetProgressProps) {
+  const percentage = max > 0 ? Math.min((current / max) * 100, 100) : 0
+
+  const getColorClass = () => {
+    if (color) return color
+    if (percentage < 70) return 'bg-emerald-500'
+    if (percentage < 90) return 'bg-amber-500'
+    return 'bg-red-500'
+  }
+
+  return (
+    <div className="w-full">
+      <div className="flex items-center justify-between mb-2">
+        <span className="text-sm font-medium text-slate-300">{label}</span>
+        <span className="text-sm text-slate-400">
+          {formatCurrency(current)} <span className="text-slate-600">/ {formatCurrency(max)}</span>
+        </span>
+      </div>
+      <div className="h-3 bg-slate-700 rounded-full overflow-hidden">
+        <div
+          className={cn('h-full rounded-full transition-all duration-500 ease-out', getColorClass())}
+          style={{ width: `${percentage}%` }}
+        />
+      </div>
+      <div className="flex justify-between mt-1">
+        <span className="text-xs text-slate-500">{percentage.toFixed(0)}% usado</span>
+        {percentage >= 100 && (
+          <span className="text-xs text-red-400 font-medium">Límite alcanzado</span>
+        )}
+      </div>
+    </div>
+  )
+}