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/dashboard/MetricCard.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import { LucideIcon, TrendingUp, TrendingDown } from 'lucide-react'
+import { formatCurrency } from '@/lib/utils'
+import { cn } from '@/lib/utils'
+
+interface MetricCardProps {
+  title: string
+  amount: number
+  subtitle?: string
+  trend?: {
+    value: number
+    isPositive: boolean
+  }
+  icon: LucideIcon
+  color?: string
+}
+
+export function MetricCard({
+  title,
+  amount,
+  subtitle,
+  trend,
+  icon: Icon,
+  color = 'text-emerald-400',
+}: MetricCardProps) {
+  return (
+    <div className="relative overflow-hidden rounded-xl border border-slate-700 bg-slate-800 p-6 shadow-lg">
+      {/* Icono en esquina superior derecha */}
+      <div className={cn('absolute right-4 top-4', color)}>
+        <Icon className="h-10 w-10 opacity-80" />
+      </div>
+
+      {/* Contenido */}
+      <div className="relative">
+        {/* Título */}
+        <h3 className="text-sm font-medium text-slate-400">{title}</h3>
+
+        {/* Monto */}
+        <p className="mt-2 font-mono text-3xl font-bold text-emerald-400">
+          {formatCurrency(amount)}
+        </p>
+
+        {/* Subtítulo */}
+        {subtitle && (
+          <p className="mt-1 text-sm text-slate-500">{subtitle}</p>
+        )}
+
+        {/* Indicador de tendencia */}
+        {trend && (
+          <div className="mt-3 flex items-center gap-1.5">
+            {trend.isPositive ? (
+              <>
+                <TrendingUp className="h-4 w-4 text-emerald-500" />
+                <span className="text-sm font-medium text-emerald-500">
+                  +{trend.value}%
+                </span>
+              </>
+            ) : (
+              <>
+                <TrendingDown className="h-4 w-4 text-rose-500" />
+                <span className="text-sm font-medium text-rose-500">
+                  -{trend.value}%
+                </span>
+              </>
+            )}
+            <span className="text-sm text-slate-500">vs mes anterior</span>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}