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/cards/MiniCard.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import { CreditCard } from '@/lib/types'
+import { Check } from 'lucide-react'
+
+interface MiniCardProps {
+  card: CreditCard
+  selected?: boolean
+  onClick?: () => void
+}
+
+export function MiniCard({ card, selected = false, onClick }: MiniCardProps) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={`flex w-full items-center gap-3 rounded-lg border p-3 text-left transition-all ${
+        selected
+          ? 'border-indigo-500 bg-indigo-500/20 ring-2 ring-indigo-500/30'
+          : 'border-slate-600 bg-slate-800 hover:border-slate-500 hover:bg-slate-700'
+      }`}
+    >
+      {/* Color indicator */}
+      <div
+        className="h-10 w-10 shrink-0 rounded-lg shadow-inner"
+        style={{ backgroundColor: card.color }}
+      />
+
+      {/* Card info */}
+      <div className="min-w-0 flex-1">
+        <p className="truncate font-medium text-white">{card.name}</p>
+        <p className="text-sm text-slate-400">**** {card.lastFourDigits}</p>
+      </div>
+
+      {/* Selected indicator */}
+      {selected && (
+        <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full bg-indigo-500">
+          <Check className="h-4 w-4 text-white" />
+        </div>
+      )}
+    </button>
+  )
+}