commit 712b06f1189d025cc40346490f8075c82d55271a
Author: renato97 <renato97@gitea.cbcren.online>
Date:   Thu Jan 29 00:00:32 2026 +0000

    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)

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..40ead90
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,31 @@
+# Dependencies
+node_modules
+.pnp
+.pnp.js
+
+# Testing
+coverage
+
+# Next.js
+.next/
+out/
+build
+
+# Misc
+.DS_Store
+*.pem
+
+# Debug
+npm-debug.log*
+yarn-debug.log*
+pnpm-debug.log*
+
+# Local env files
+.env*.local
+
+# Vercel
+.vercel
+
+# TypeScript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/README.md b/README.md
new file mode 100644
index 0000000..8f9dbb7
--- /dev/null
+++ b/README.md
@@ -0,0 +1,161 @@
+# 💰 Finanzas - Gestor Personal de Finanzas
+
+Una aplicación moderna y completa para la gestión de finanzas personales, construida con Next.js y TypeScript. Controla tus deudas, tarjetas de crédito, presupuestos y mantente al día con alertas inteligentes.
+
+![Dashboard Preview](./preview.png)
+
+## ✨ Características Principales
+
+### 🏠 Dashboard Central
+- **Resumen financiero** con métricas clave
+- **Actividad reciente** y tendencias
+- **Acciones rápidas** para agregar gastos y pagos
+- **Alertas inteligentes** personalizadas
+
+### 💳 Gestión de Tarjetas de Crédito
+- Múltiples tarjetas con límites y saldos
+- Registro de pagos y compras
+- Seguimiento de cuotas e instalaciones
+- Alertas de cierre y vencimiento
+
+### 📊 Control de Deudas
+- **Deudas fijas**: Alquiler, servicios, suscripciones
+- **Deudas variables**: Compras, entretenimiento, salud
+- Categorización automática
+- Marcado de pagos realizados
+- Notas y recordatorios
+
+### 💰 Presupuesto Mensual
+- Ingresos y gastos planificados
+- Metas de ahorro
+- Seguimiento en tiempo real
+- Visualización con gráficos
+
+### 🚨 Sistema de Alertas
+- Alertas de vencimiento de pagos
+- Advertencias de presupuesto
+- Recordatorios de cierre de tarjetas
+- Detección de gastos inusuales
+- Notificaciones de metas de ahorro
+
+### 📱 Diseño Responsivo
+- Sidebar colapsible en desktop
+- Navegación móvil intuitiva
+- Interfaz moderna con Tailwind CSS
+- Soporte completo para dispositivos móviles
+
+## 🛠️ Stack Tecnológico
+
+- **[Next.js 14](https://nextjs.org/)** - Framework React con SSR/SSG
+- **[TypeScript](https://www.typescriptlang.org/)** - Tipado estático
+- **[Tailwind CSS](https://tailwindcss.com/)** - Estilos utilitarios
+- **[Zustand](https://github.com/pmndrs/zustand)** - Gestión de estado
+- **[Recharts](https://recharts.org/)** - Gráficos y visualizaciones
+- **[Lucide React](https://lucide.dev/)** - Iconos modernos
+
+## 🚀 Instalación y Uso
+
+### Prerrequisitos
+- Node.js 18+
+- npm o yarn
+
+### 1. Clonar el repositorio
+```bash
+git clone https://gitea.cbcren.online/renato97/finanzas.git
+cd finanzas
+```
+
+### 2. Instalar dependencias
+```bash
+npm install
+```
+
+### 3. Ejecutar en desarrollo
+```bash
+npm run dev
+```
+
+La aplicación estará disponible en `http://localhost:3000`
+
+### 4. Construir para producción
+```bash
+npm run build
+```
+
+Los archivos estáticos se generarán en el directorio `dist/`
+
+## 📁 Estructura del Proyecto
+
+```
+finanzas/
+├── app/                    # Rutas y páginas de Next.js
+│   ├── alerts/            # Página de alertas
+│   ├── budget/            # Página de presupuesto
+│   ├── cards/             # Página de tarjetas
+│   ├── debts/             # Página de deudas
+│   └── page.tsx           # Dashboard principal
+├── components/            # Componentes reutilizables
+│   ├── alerts/            # Sistema de alertas
+│   ├── budget/            # Componentes de presupuesto
+│   ├── cards/             # Componentes de tarjetas
+│   ├── dashboard/         # Componentes del dashboard
+│   ├── debts/             # Componentes de deudas
+│   ├── layout/            # Layout y navegación
+│   └── modals/            # Modales de creación/edición
+├── lib/                   # Utilidades y store
+│   ├── store/             # Estado global con Zustand
+│   ├── alerts.ts          # Lógica de alertas
+│   ├── types.ts           # Tipos TypeScript
+│   └── utils.ts           # Utilidades generales
+└── public/                # Archivos estáticos
+```
+
+## 🎯 Funcionalidades Destacadas
+
+### Estado Global con Zustand
+- Gestión reactiva del estado
+- Persistencia automática
+- Selectores optimizados
+- Actualizaciones en tiempo real
+
+### Alertas Inteligentes
+```typescript
+// Tipos de alertas disponibles
+- PAYMENT_DUE: Pago próximo a vencer
+- BUDGET_WARNING: Límite de presupuesto alcanzado
+- CARD_CLOSING: Fecha de cierre de tarjeta
+- CARD_DUE: Vencimiento de tarjeta
+- SAVINGS_GOAL: Meta de ahorro alcanzada
+- UNUSUAL_SPENDING: Gasto inusual detectado
+```
+
+### Categorización Automática
+- **Deudas Fijas**: vivienda, servicios, suscripciones
+- **Deudas Variables**: compras, comida, entretenimiento, salud
+- **Pagos con Cuotas**: seguimiento de instalaciones
+
+## 📊 Métricas y Visualizaciones
+
+- Gráficos de gastos por categoría
+- Tendencias de mes a mes
+- Progreso de metas de ahorro
+- Distribución de deuda total
+
+## 🔐 Seguridad
+
+- Validación de datos con TypeScript
+- Sanitización de inputs
+- Sin almacenamiento de datos sensibles
+- Ejecución completamente en el cliente
+
+## 📄 Licencia
+
+ISC
+
+## 👨‍💻 Autor
+
+Desarrollado por **renato97**
+
+---
+
+⭐ **¿Te gusta el proyecto?** ¡No olvides darle una estrella en Gitea!
diff --git a/app/alerts/page.tsx b/app/alerts/page.tsx
new file mode 100644
index 0000000..c8c2fd5
--- /dev/null
+++ b/app/alerts/page.tsx
@@ -0,0 +1,58 @@
+'use client'
+
+import { Sidebar, Header, MobileNav } from '@/components/layout'
+import { AlertPanel, useAlerts } from '@/components/alerts'
+import { useSidebar } from '@/app/providers'
+import { RefreshCw } from 'lucide-react'
+
+export default function AlertsPage() {
+  const { isOpen, toggle, close } = useSidebar()
+  const { regenerateAlerts, dismissAll, unreadCount } = useAlerts()
+
+  const handleRegenerateAlerts = () => {
+    regenerateAlerts()
+  }
+
+  const handleDismissAll = () => {
+    dismissAll()
+  }
+
+  return (
+    <div className="min-h-screen bg-slate-950">
+      <Sidebar isOpen={isOpen} onClose={close} unreadAlertsCount={unreadCount} />
+
+      <div className="lg:ml-64 min-h-screen flex flex-col">
+        <Header onMenuClick={toggle} title="Alertas" />
+
+        <main className="flex-1 p-4 md:p-6 lg:p-8 pb-20 lg:pb-8">
+          <div className="max-w-4xl mx-auto">
+            {/* Action Buttons */}
+            <div className="flex flex-wrap gap-3 mb-6">
+              <button
+                onClick={handleRegenerateAlerts}
+                className="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500/20"
+              >
+                <RefreshCw className="h-4 w-4" />
+                Regenerar Alertas
+              </button>
+
+              <button
+                onClick={handleDismissAll}
+                className="inline-flex items-center gap-2 px-4 py-2 bg-slate-800 hover:bg-slate-700 text-slate-300 hover:text-white text-sm font-medium rounded-lg transition-colors focus:outline-none focus:ring-2 focus:ring-slate-500/20"
+              >
+                Limpiar Todas
+              </button>
+            </div>
+
+            {/* Alert Panel */}
+            <div className="w-full">
+              <AlertPanel />
+            </div>
+          </div>
+        </main>
+
+        <MobileNav unreadAlertsCount={unreadCount} />
+      </div>
+    </div>
+  )
+}
diff --git a/app/budget/page.tsx b/app/budget/page.tsx
new file mode 100644
index 0000000..11fa1b8
--- /dev/null
+++ b/app/budget/page.tsx
@@ -0,0 +1,27 @@
+'use client'
+
+import { Sidebar, Header, MobileNav } from '@/components/layout'
+import { BudgetSection } from '@/components/budget'
+import { useSidebar } from '@/app/providers'
+import { useAlerts } from '@/components/alerts'
+
+export default function BudgetPage() {
+  const { isOpen, close, toggle } = useSidebar()
+  const { unreadCount } = useAlerts()
+
+  return (
+    <div className="flex min-h-screen bg-slate-950">
+      <Sidebar isOpen={isOpen} onClose={close} unreadAlertsCount={unreadCount} />
+
+      <div className="flex-1 flex flex-col min-h-screen">
+        <Header onMenuClick={toggle} title="Presupuesto" />
+
+        <main className="flex-1 p-4 md:p-6 lg:p-8 pb-20">
+          <BudgetSection />
+        </main>
+
+        <MobileNav unreadAlertsCount={unreadCount} />
+      </div>
+    </div>
+  )
+}
diff --git a/app/cards/page.tsx b/app/cards/page.tsx
new file mode 100644
index 0000000..489ddfa
--- /dev/null
+++ b/app/cards/page.tsx
@@ -0,0 +1,27 @@
+'use client';
+
+import { Sidebar, Header, MobileNav } from '@/components/layout';
+import { CardSection } from '@/components/cards';
+import { useSidebar } from '@/app/providers';
+import { useAlerts } from '@/components/alerts';
+
+export default function CardsPage() {
+  const { isOpen, toggle, close } = useSidebar();
+  const { unreadCount } = useAlerts();
+
+  return (
+    <div className="min-h-screen bg-slate-950">
+      <Sidebar isOpen={isOpen} onClose={close} unreadAlertsCount={unreadCount} />
+
+      <div className="lg:ml-64 min-h-screen flex flex-col">
+        <Header onMenuClick={toggle} title="Tarjetas de Crédito" />
+
+        <main className="flex-1 p-4 md:p-6 lg:p-8 pb-20">
+          <CardSection />
+        </main>
+      </div>
+
+      <MobileNav unreadAlertsCount={unreadCount} />
+    </div>
+  );
+}
diff --git a/app/debts/page.tsx b/app/debts/page.tsx
new file mode 100644
index 0000000..270b5f9
--- /dev/null
+++ b/app/debts/page.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import { Sidebar, Header, MobileNav } from '@/components/layout'
+import { DebtSection } from '@/components/debts'
+import { useSidebar } from '@/app/providers'
+import { useAlerts } from '@/components/alerts'
+
+export default function DebtsPage() {
+  const { isOpen, close, open } = useSidebar()
+  const { unreadCount } = useAlerts()
+
+  return (
+    <div className="min-h-screen bg-slate-950">
+      {/* Sidebar */}
+      <Sidebar isOpen={isOpen} onClose={close} unreadAlertsCount={unreadCount} />
+
+      {/* Main content */}
+      <div className="lg:ml-64 min-h-screen flex flex-col">
+        {/* Header */}
+        <Header onMenuClick={open} title="Deudas" />
+
+        {/* Page content */}
+        <main className="flex-1 p-4 md:p-6 lg:p-8 pb-20 lg:pb-8">
+          <DebtSection />
+        </main>
+      </div>
+
+      {/* Mobile Navigation */}
+      <MobileNav unreadAlertsCount={unreadCount} />
+    </div>
+  )
+}
diff --git a/app/globals.css b/app/globals.css
new file mode 100644
index 0000000..e9fefe1
--- /dev/null
+++ b/app/globals.css
@@ -0,0 +1,332 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  /* Base Colors - Dark Theme (slate/emerald) */
+  --background: 222 47% 11%;
+  --foreground: 210 40% 98%;
+
+  /* Card Colors */
+  --card: 217 33% 17%;
+  --card-foreground: 210 40% 98%;
+
+  /* Popover Colors */
+  --popover: 217 33% 17%;
+  --popover-foreground: 210 40% 98%;
+
+  /* Primary - Emerald */
+  --primary: 160 84% 39%;
+  --primary-foreground: 210 40% 98%;
+
+  /* Secondary */
+  --secondary: 217 33% 17%;
+  --secondary-foreground: 210 40% 98%;
+
+  /* Muted */
+  --muted: 217 33% 17%;
+  --muted-foreground: 215 20% 65%;
+
+  /* Accent */
+  --accent: 217 33% 17%;
+  --accent-foreground: 210 40% 98%;
+
+  /* Destructive */
+  --destructive: 0 84% 60%;
+  --destructive-foreground: 210 40% 98%;
+
+  /* Border & Input */
+  --border: 215 28% 25%;
+  --input: 215 28% 25%;
+
+  /* Ring - Emerald */
+  --ring: 160 84% 39%;
+
+  /* Radius */
+  --radius: 0.5rem;
+}
+
+@theme inline {
+  --color-background: hsl(var(--background));
+  --color-foreground: hsl(var(--foreground));
+  --color-card: hsl(var(--card));
+  --color-card-foreground: hsl(var(--card-foreground));
+  --color-popover: hsl(var(--popover));
+  --color-popover-foreground: hsl(var(--popover-foreground));
+  --color-primary: hsl(var(--primary));
+  --color-primary-foreground: hsl(var(--primary-foreground));
+  --color-secondary: hsl(var(--secondary));
+  --color-secondary-foreground: hsl(var(--secondary-foreground));
+  --color-muted: hsl(var(--muted));
+  --color-muted-foreground: hsl(var(--muted-foreground));
+  --color-accent: hsl(var(--accent));
+  --color-accent-foreground: hsl(var(--accent-foreground));
+  --color-destructive: hsl(var(--destructive));
+  --color-destructive-foreground: hsl(var(--destructive-foreground));
+  --color-border: hsl(var(--border));
+  --color-input: hsl(var(--input));
+  --color-ring: hsl(var(--ring));
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+/* Base Styles */
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  background-color: hsl(var(--background));
+  color: hsl(var(--foreground));
+  font-feature-settings: "rlig" 1, "calt" 1;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+/* Input Styles */
+input,
+textarea,
+select {
+  background-color: hsl(var(--card));
+  border-color: hsl(var(--border));
+  color: hsl(var(--foreground));
+}
+
+input::placeholder,
+textarea::placeholder {
+  color: hsl(var(--muted-foreground));
+}
+
+/* Selection */
+::selection {
+  background-color: hsl(160 84% 39% / 0.3);
+  color: hsl(var(--foreground));
+}
+
+/* Focus Ring */
+:focus-visible {
+  outline: none;
+  ring: 2px;
+  ring-color: hsl(var(--ring));
+  ring-offset: 2px;
+  ring-offset-color: hsl(var(--background));
+}
+
+/* Custom Scrollbar */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: hsl(var(--background));
+}
+
+::-webkit-scrollbar-thumb {
+  background: hsl(var(--border));
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: hsl(var(--muted-foreground) / 0.5);
+}
+
+/* Firefox Scrollbar */
+* {
+  scrollbar-width: thin;
+  scrollbar-color: hsl(var(--border)) hsl(var(--background));
+}
+
+/* Utility Classes */
+.gradient-text {
+  background: linear-gradient(135deg, hsl(160 84% 39%) 0%, hsl(168 76% 42%) 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+}
+
+.glass-card {
+  background: hsl(var(--card) / 0.8);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  border: 1px solid hsl(var(--border) / 0.5);
+}
+
+.text-balance {
+  text-wrap: balance;
+}
+
+/* Loading States */
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    hsl(var(--muted)) 25%,
+    hsl(var(--muted-foreground) / 0.3) 50%,
+    hsl(var(--muted)) 75%
+  );
+  background-size: 200% 100%;
+  animation: skeleton-pulse 1.5s ease-in-out infinite;
+  border-radius: var(--radius);
+}
+
+@keyframes skeleton-pulse {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.spinner {
+  width: 24px;
+  height: 24px;
+  border: 2px solid hsl(var(--border));
+  border-top-color: hsl(var(--primary));
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+}
+
+.spinner-sm {
+  width: 16px;
+  height: 16px;
+  border-width: 2px;
+}
+
+.spinner-lg {
+  width: 32px;
+  height: 32px;
+  border-width: 3px;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Animations */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeInDown {
+  from {
+    opacity: 0;
+    transform: translateY(-10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInLeft {
+  from {
+    opacity: 0;
+    transform: translateX(-20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInRight {
+  from {
+    opacity: 0;
+    transform: translateX(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes pulse-slow {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}
+
+@keyframes bounce-slight {
+  0%,
+  100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-3px);
+  }
+}
+
+/* Animation Utility Classes */
+.animate-fade-in {
+  animation: fadeIn 0.3s ease-out forwards;
+}
+
+.animate-fade-in-up {
+  animation: fadeInUp 0.3s ease-out forwards;
+}
+
+.animate-fade-in-down {
+  animation: fadeInDown 0.3s ease-out forwards;
+}
+
+.animate-slide-in-left {
+  animation: slideInLeft 0.3s ease-out forwards;
+}
+
+.animate-slide-in-right {
+  animation: slideInRight 0.3s ease-out forwards;
+}
+
+.animate-pulse-slow {
+  animation: pulse-slow 2s ease-in-out infinite;
+}
+
+.animate-bounce-slight {
+  animation: bounce-slight 1s ease-in-out infinite;
+}
+
+/* Stagger Animation Delays */
+.stagger-1 { animation-delay: 0.05s; }
+.stagger-2 { animation-delay: 0.1s; }
+.stagger-3 { animation-delay: 0.15s; }
+.stagger-4 { animation-delay: 0.2s; }
+.stagger-5 { animation-delay: 0.25s; }
+.stagger-6 { animation-delay: 0.3s; }
+.stagger-7 { animation-delay: 0.35s; }
+.stagger-8 { animation-delay: 0.4s; }
+
+/* Reduced Motion */
+@media (prefers-reduced-motion: reduce) {
+  *,
+  *::before,
+  *::after {
+    animation-duration: 0.01ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.01ms !important;
+  }
+}
diff --git a/app/layout.tsx b/app/layout.tsx
new file mode 100644
index 0000000..c523bc8
--- /dev/null
+++ b/app/layout.tsx
@@ -0,0 +1,30 @@
+import type { Metadata } from "next";
+import { Inter } from "next/font/google";
+import "./globals.css";
+import { Providers } from "./providers";
+
+const inter = Inter({
+  subsets: ["latin"],
+  variable: "--font-inter",
+  display: "swap",
+});
+
+export const metadata: Metadata = {
+  title: "Finanzas Personales",
+  description: "Gestiona tus finanzas personales de forma inteligente",
+  keywords: ["finanzas", "presupuesto", "gastos", "ingresos", "ahorro"],
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="es" className={inter.variable} suppressHydrationWarning>
+      <body className={`${inter.className} antialiased min-h-screen bg-slate-950 text-slate-50`}>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  );
+}
diff --git a/app/page.tsx b/app/page.tsx
new file mode 100644
index 0000000..cba8300
--- /dev/null
+++ b/app/page.tsx
@@ -0,0 +1,134 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { Sidebar, Header, MobileNav } from '@/components/layout'
+import { SummarySection, QuickActions, RecentActivity } from '@/components/dashboard'
+import { useSidebar } from '@/app/providers'
+import { useFinanzasStore } from '@/lib/store'
+import { AlertBanner, useAlerts } from '@/components/alerts'
+import { AddDebtModal } from '@/components/modals/AddDebtModal'
+import { AddCardModal } from '@/components/modals/AddCardModal'
+import { AddPaymentModal } from '@/components/modals/AddPaymentModal'
+
+export default function Home() {
+  // Sidebar control
+  const sidebar = useSidebar()
+
+  // Datos del store
+  const markAlertAsRead = useFinanzasStore((state) => state.markAlertAsRead)
+  const deleteAlert = useFinanzasStore((state) => state.deleteAlert)
+
+  // Alertas
+  const { unreadAlerts, unreadCount, regenerateAlerts } = useAlerts()
+
+  // Estados locales para modales
+  const [isAddDebtModalOpen, setIsAddDebtModalOpen] = useState(false)
+  const [isAddCardModalOpen, setIsAddCardModalOpen] = useState(false)
+  const [isAddPaymentModalOpen, setIsAddPaymentModalOpen] = useState(false)
+
+  // Efecto para regenerar alertas al cargar la página
+  useEffect(() => {
+    regenerateAlerts()
+  }, [regenerateAlerts])
+
+  // Efecto para manejar resize de ventana
+  useEffect(() => {
+    const handleResize = () => {
+      if (window.innerWidth >= 1024) {
+        sidebar.open()
+      } else {
+        sidebar.close()
+      }
+    }
+
+    // Estado inicial
+    handleResize()
+
+    window.addEventListener('resize', handleResize)
+    return () => window.removeEventListener('resize', handleResize)
+  }, [sidebar])
+
+  // Handlers para modales
+  const handleAddDebt = () => {
+    setIsAddDebtModalOpen(true)
+  }
+
+  const handleAddCard = () => {
+    setIsAddCardModalOpen(true)
+  }
+
+  const handleAddPayment = () => {
+    setIsAddPaymentModalOpen(true)
+  }
+
+  // Primeras 3 alertas no leídas
+  const topAlerts = unreadAlerts.slice(0, 3)
+
+  return (
+    <div className="flex min-h-screen bg-slate-950">
+      {/* Sidebar */}
+      <Sidebar
+        isOpen={sidebar.isOpen}
+        onClose={sidebar.close}
+        unreadAlertsCount={unreadCount}
+      />
+
+      {/* Main content */}
+      <div className="flex flex-1 flex-col lg:ml-0">
+        {/* Header */}
+        <Header onMenuClick={sidebar.toggle} title="Dashboard" />
+
+        {/* Main content area */}
+        <main className="flex-1 p-4 md:p-6 lg:p-8 pb-20 lg:pb-8">
+          <div className="mx-auto max-w-7xl space-y-6">
+            {/* Alertas destacadas */}
+            {topAlerts.length > 0 && (
+              <div className="space-y-3">
+                {topAlerts.map((alert) => (
+                  <AlertBanner
+                    key={alert.id}
+                    alert={alert}
+                    onDismiss={() => deleteAlert(alert.id)}
+                    onMarkRead={() => markAlertAsRead(alert.id)}
+                  />
+                ))}
+              </div>
+            )}
+
+            {/* Sección de resumen */}
+            <SummarySection />
+
+            {/* Acciones rápidas */}
+            <QuickActions
+              onAddDebt={handleAddDebt}
+              onAddCard={handleAddCard}
+              onAddPayment={handleAddPayment}
+            />
+
+            {/* Actividad reciente */}
+            <RecentActivity limit={5} />
+          </div>
+        </main>
+      </div>
+
+      {/* Mobile navigation */}
+      <MobileNav unreadAlertsCount={unreadCount} />
+
+      {/* Modales */}
+      <AddDebtModal
+        isOpen={isAddDebtModalOpen}
+        onClose={() => setIsAddDebtModalOpen(false)}
+      />
+
+      <AddCardModal
+        isOpen={isAddCardModalOpen}
+        onClose={() => setIsAddCardModalOpen(false)}
+      />
+
+      <AddPaymentModal
+        isOpen={isAddPaymentModalOpen}
+        onClose={() => setIsAddPaymentModalOpen(false)}
+      />
+    </div>
+  )
+}
diff --git a/app/providers.tsx b/app/providers.tsx
new file mode 100644
index 0000000..da0fe27
--- /dev/null
+++ b/app/providers.tsx
@@ -0,0 +1,41 @@
+"use client";
+
+import { createContext, useContext, useState, ReactNode } from "react";
+
+interface SidebarContextType {
+  isOpen: boolean;
+  toggle: () => void;
+  close: () => void;
+  open: () => void;
+}
+
+const SidebarContext = createContext<SidebarContextType | undefined>(undefined);
+
+export function Providers({ children }: { children: ReactNode }) {
+  const [isSidebarOpen, setIsSidebarOpen] = useState(true);
+
+  const toggleSidebar = () => setIsSidebarOpen((prev) => !prev);
+  const closeSidebar = () => setIsSidebarOpen(false);
+  const openSidebar = () => setIsSidebarOpen(true);
+
+  return (
+    <SidebarContext.Provider
+      value={{
+        isOpen: isSidebarOpen,
+        toggle: toggleSidebar,
+        close: closeSidebar,
+        open: openSidebar,
+      }}
+    >
+      {children}
+    </SidebarContext.Provider>
+  );
+}
+
+export function useSidebar() {
+  const context = useContext(SidebarContext);
+  if (context === undefined) {
+    throw new Error("useSidebar must be used within a Providers");
+  }
+  return context;
+}
diff --git a/components/alerts/AlertBadge.tsx b/components/alerts/AlertBadge.tsx
new file mode 100644
index 0000000..88e68ff
--- /dev/null
+++ b/components/alerts/AlertBadge.tsx
@@ -0,0 +1,32 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+
+interface AlertBadgeProps {
+  count: number
+  variant?: 'default' | 'dot'
+}
+
+export function AlertBadge({ count, variant = 'default' }: AlertBadgeProps) {
+  if (count === 0) {
+    return null
+  }
+
+  if (variant === 'dot') {
+    return (
+      <span className="absolute -top-1 -right-1 h-3 w-3 rounded-full bg-red-500 animate-pulse" />
+    )
+  }
+
+  return (
+    <span
+      className={cn(
+        'inline-flex items-center justify-center min-w-[20px] h-5 px-1.5',
+        'rounded-full bg-red-500 text-white text-xs font-medium',
+        'animate-pulse'
+      )}
+    >
+      {count > 99 ? '99+' : count}
+    </span>
+  )
+}
diff --git a/components/alerts/AlertBanner.tsx b/components/alerts/AlertBanner.tsx
new file mode 100644
index 0000000..6bbc6e6
--- /dev/null
+++ b/components/alerts/AlertBanner.tsx
@@ -0,0 +1,112 @@
+'use client'
+
+import { useState } from 'react'
+import { Check, X } from 'lucide-react'
+import { Alert } from '@/lib/types'
+import { cn } from '@/lib/utils'
+import { AlertIcon } from './AlertIcon'
+
+interface AlertBannerProps {
+  alert: Alert
+  onDismiss: () => void
+  onMarkRead: () => void
+}
+
+const severityStyles = {
+  info: {
+    bg: 'bg-blue-900/50',
+    border: 'border-l-blue-500',
+    icon: 'text-blue-400',
+  },
+  warning: {
+    bg: 'bg-amber-900/50',
+    border: 'border-l-amber-500',
+    icon: 'text-amber-400',
+  },
+  danger: {
+    bg: 'bg-red-900/50',
+    border: 'border-l-red-500',
+    icon: 'text-red-400',
+  },
+}
+
+export function AlertBanner({ alert, onDismiss, onMarkRead }: AlertBannerProps) {
+  const [isVisible, setIsVisible] = useState(true)
+  const [isExiting, setIsExiting] = useState(false)
+  const styles = severityStyles[alert.severity]
+
+  const handleDismiss = () => {
+    setIsExiting(true)
+    setTimeout(() => {
+      setIsVisible(false)
+      onDismiss()
+    }, 300)
+  }
+
+  const handleMarkRead = () => {
+    setIsExiting(true)
+    setTimeout(() => {
+      setIsVisible(false)
+      onMarkRead()
+    }, 300)
+  }
+
+  if (!isVisible) {
+    return null
+  }
+
+  return (
+    <div
+      className={cn(
+        'relative overflow-hidden rounded-r-lg border-l-4 p-4',
+        'transition-all duration-300 ease-out',
+        'animate-in slide-in-from-top-2',
+        isExiting && 'animate-out slide-out-to-top-2 opacity-0',
+        styles.bg,
+        styles.border
+      )}
+      role="alert"
+    >
+      <div className="flex items-start gap-3">
+        <div className={cn('flex-shrink-0 mt-0.5', styles.icon)}>
+          <AlertIcon type={alert.type} />
+        </div>
+
+        <div className="flex-1 min-w-0">
+          <h4 className="font-semibold text-white text-sm">{alert.title}</h4>
+          <p className="mt-1 text-sm text-gray-300">{alert.message}</p>
+        </div>
+
+        <div className="flex items-center gap-1 flex-shrink-0">
+          {!alert.isRead && (
+            <button
+              onClick={handleMarkRead}
+              className={cn(
+                'p-1.5 rounded-md transition-colors',
+                'text-gray-400 hover:text-white hover:bg-white/10',
+                'focus:outline-none focus:ring-2 focus:ring-white/20'
+              )}
+              title="Marcar como leída"
+              aria-label="Marcar como leída"
+            >
+              <Check className="h-4 w-4" />
+            </button>
+          )}
+
+          <button
+            onClick={handleDismiss}
+            className={cn(
+              'p-1.5 rounded-md transition-colors',
+              'text-gray-400 hover:text-white hover:bg-white/10',
+              'focus:outline-none focus:ring-2 focus:ring-white/20'
+            )}
+            title="Cerrar"
+            aria-label="Cerrar alerta"
+          >
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/alerts/AlertIcon.tsx b/components/alerts/AlertIcon.tsx
new file mode 100644
index 0000000..ad02c46
--- /dev/null
+++ b/components/alerts/AlertIcon.tsx
@@ -0,0 +1,25 @@
+'use client'
+
+import { Info, AlertTriangle, AlertCircle, LucideIcon } from 'lucide-react'
+import { Alert } from '@/lib/types'
+import { cn } from '@/lib/utils'
+
+interface AlertIconProps {
+  type: Alert['type']
+  className?: string
+}
+
+const iconMap: Record<Alert['type'], LucideIcon> = {
+  PAYMENT_DUE: AlertCircle,
+  BUDGET_WARNING: AlertTriangle,
+  CARD_CLOSING: Info,
+  CARD_DUE: AlertCircle,
+  SAVINGS_GOAL: Info,
+  UNUSUAL_SPENDING: AlertTriangle,
+}
+
+export function AlertIcon({ type, className }: AlertIconProps) {
+  const Icon = iconMap[type]
+
+  return <Icon className={cn('h-5 w-5', className)} />
+}
diff --git a/components/alerts/AlertItem.tsx b/components/alerts/AlertItem.tsx
new file mode 100644
index 0000000..75fafe5
--- /dev/null
+++ b/components/alerts/AlertItem.tsx
@@ -0,0 +1,148 @@
+'use client'
+
+import { useState } from 'react'
+import { Check, Trash2 } from 'lucide-react'
+import { Alert } from '@/lib/types'
+import { cn } from '@/lib/utils'
+import { AlertIcon } from './AlertIcon'
+
+interface AlertItemProps {
+  alert: Alert
+  onMarkRead: () => void
+  onDelete: () => void
+}
+
+const severityStyles = {
+  info: 'text-blue-400',
+  warning: 'text-amber-400',
+  danger: 'text-red-400',
+}
+
+function getRelativeTime(date: string): string {
+  const now = new Date()
+  const alertDate = new Date(date)
+  const diffMs = now.getTime() - alertDate.getTime()
+  const diffMins = Math.floor(diffMs / (1000 * 60))
+  const diffHours = Math.floor(diffMs / (1000 * 60 * 60))
+  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24))
+
+  if (diffMins < 1) {
+    return 'ahora'
+  }
+  if (diffMins < 60) {
+    return `hace ${diffMins} min`
+  }
+  if (diffHours < 24) {
+    return `hace ${diffHours} hora${diffHours > 1 ? 's' : ''}`
+  }
+  if (diffDays === 1) {
+    return 'ayer'
+  }
+  if (diffDays < 7) {
+    return `hace ${diffDays} días`
+  }
+
+  return alertDate.toLocaleDateString('es-AR', {
+    day: 'numeric',
+    month: 'short',
+  })
+}
+
+export function AlertItem({ alert, onMarkRead, onDelete }: AlertItemProps) {
+  const [showActions, setShowActions] = useState(false)
+  const [isExiting, setIsExiting] = useState(false)
+
+  const handleMarkRead = () => {
+    setIsExiting(true)
+    setTimeout(() => {
+      onMarkRead()
+    }, 200)
+  }
+
+  const handleDelete = () => {
+    setIsExiting(true)
+    setTimeout(() => {
+      onDelete()
+    }, 200)
+  }
+
+  return (
+    <div
+      className={cn(
+        'group relative flex items-center gap-3 p-3 rounded-lg',
+        'transition-all duration-200',
+        'hover:bg-white/5',
+        isExiting && 'opacity-0 -translate-x-4',
+        !alert.isRead && 'bg-white/[0.02]'
+      )}
+      onMouseEnter={() => setShowActions(true)}
+      onMouseLeave={() => setShowActions(false)}
+      role="listitem"
+    >
+      {/* Unread indicator */}
+      {!alert.isRead && (
+        <span className="absolute left-1 top-1/2 -translate-y-1/2 h-2 w-2 rounded-full bg-blue-500" />
+      )}
+
+      {/* Icon */}
+      <div
+        className={cn(
+          'flex-shrink-0',
+          severityStyles[alert.severity],
+          !alert.isRead && 'ml-3'
+        )}
+      >
+        <AlertIcon type={alert.type} className="h-4 w-4" />
+      </div>
+
+      {/* Content */}
+      <div className="flex-1 min-w-0">
+        <p
+          className={cn(
+            'text-sm truncate',
+            alert.isRead ? 'text-gray-400' : 'text-white font-medium'
+          )}
+        >
+          {alert.title}
+        </p>
+        <p className="text-xs text-gray-500 mt-0.5">{getRelativeTime(alert.date)}</p>
+      </div>
+
+      {/* Actions */}
+      <div
+        className={cn(
+          'flex items-center gap-1 transition-opacity duration-200',
+          showActions ? 'opacity-100' : 'opacity-0'
+        )}
+      >
+        {!alert.isRead && (
+          <button
+            onClick={handleMarkRead}
+            className={cn(
+              'p-1.5 rounded-md transition-colors',
+              'text-gray-500 hover:text-green-400 hover:bg-green-400/10',
+              'focus:outline-none focus:ring-2 focus:ring-green-400/20'
+            )}
+            title="Marcar como leída"
+            aria-label="Marcar como leída"
+          >
+            <Check className="h-3.5 w-3.5" />
+          </button>
+        )}
+
+        <button
+          onClick={handleDelete}
+          className={cn(
+            'p-1.5 rounded-md transition-colors',
+            'text-gray-500 hover:text-red-400 hover:bg-red-400/10',
+            'focus:outline-none focus:ring-2 focus:ring-red-400/20'
+          )}
+          title="Eliminar"
+          aria-label="Eliminar alerta"
+        >
+          <Trash2 className="h-3.5 w-3.5" />
+        </button>
+      </div>
+    </div>
+  )
+}
diff --git a/components/alerts/AlertPanel.tsx b/components/alerts/AlertPanel.tsx
new file mode 100644
index 0000000..dd021e9
--- /dev/null
+++ b/components/alerts/AlertPanel.tsx
@@ -0,0 +1,148 @@
+'use client'
+
+import { useState } from 'react'
+import { Bell, CheckCheck, Trash2, Inbox } from 'lucide-react'
+import { cn } from '@/lib/utils'
+import { useFinanzasStore } from '@/lib/store'
+import { AlertItem } from './AlertItem'
+import { AlertBadge } from './AlertBadge'
+
+type TabType = 'all' | 'unread'
+
+export function AlertPanel() {
+  const [activeTab, setActiveTab] = useState<TabType>('all')
+
+  const alerts = useFinanzasStore((state) => state.alerts)
+  const markAlertAsRead = useFinanzasStore((state) => state.markAlertAsRead)
+  const deleteAlert = useFinanzasStore((state) => state.deleteAlert)
+  const clearAllAlerts = useFinanzasStore((state) => state.clearAllAlerts)
+
+  const unreadAlerts = alerts.filter((alert) => !alert.isRead)
+  const unreadCount = unreadAlerts.length
+
+  const displayedAlerts = activeTab === 'unread' ? unreadAlerts : alerts
+
+  const handleMarkAllRead = () => {
+    unreadAlerts.forEach((alert) => {
+      markAlertAsRead(alert.id)
+    })
+  }
+
+  const handleClearAll = () => {
+    clearAllAlerts()
+  }
+
+  return (
+    <div className="w-full max-w-md bg-gray-900 rounded-xl border border-gray-800 shadow-xl">
+      {/* Header */}
+      <div className="flex items-center justify-between p-4 border-b border-gray-800">
+        <div className="flex items-center gap-2">
+          <div className="relative">
+            <Bell className="h-5 w-5 text-gray-400" />
+            {unreadCount > 0 && <AlertBadge count={unreadCount} variant="dot" />}
+          </div>
+          <h3 className="font-semibold text-white">Alertas</h3>
+          {unreadCount > 0 && (
+            <span className="text-xs text-gray-500">({unreadCount})</span>
+          )}
+        </div>
+
+        <div className="flex items-center gap-1">
+          {unreadCount > 0 && (
+            <button
+              onClick={handleMarkAllRead}
+              className={cn(
+                'p-2 rounded-md transition-colors',
+                'text-gray-500 hover:text-green-400 hover:bg-green-400/10',
+                'focus:outline-none focus:ring-2 focus:ring-green-400/20'
+              )}
+              title="Marcar todas como leídas"
+              aria-label="Marcar todas como leídas"
+            >
+              <CheckCheck className="h-4 w-4" />
+            </button>
+          )}
+
+          {alerts.length > 0 && (
+            <button
+              onClick={handleClearAll}
+              className={cn(
+                'p-2 rounded-md transition-colors',
+                'text-gray-500 hover:text-red-400 hover:bg-red-400/10',
+                'focus:outline-none focus:ring-2 focus:ring-red-400/20'
+              )}
+              title="Limpiar todas"
+              aria-label="Limpiar todas las alertas"
+            >
+              <Trash2 className="h-4 w-4" />
+            </button>
+          )}
+        </div>
+      </div>
+
+      {/* Tabs */}
+      {alerts.length > 0 && (
+        <div className="flex border-b border-gray-800">
+          <button
+            onClick={() => setActiveTab('all')}
+            className={cn(
+              'flex-1 px-4 py-2 text-sm font-medium transition-colors',
+              'focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500/20',
+              activeTab === 'all'
+                ? 'text-white border-b-2 border-blue-500'
+                : 'text-gray-500 hover:text-gray-300'
+            )}
+          >
+            Todas
+            <span className="ml-1.5 text-xs text-gray-600">({alerts.length})</span>
+          </button>
+          <button
+            onClick={() => setActiveTab('unread')}
+            className={cn(
+              'flex-1 px-4 py-2 text-sm font-medium transition-colors',
+              'focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500/20',
+              activeTab === 'unread'
+                ? 'text-white border-b-2 border-blue-500'
+                : 'text-gray-500 hover:text-gray-300'
+            )}
+          >
+            No leídas
+            {unreadCount > 0 && (
+              <span className="ml-1.5 text-xs text-blue-400">({unreadCount})</span>
+            )}
+          </button>
+        </div>
+      )}
+
+      {/* Alert List */}
+      <div className="max-h-[400px] overflow-y-auto">
+        {displayedAlerts.length === 0 ? (
+          <div className="flex flex-col items-center justify-center py-12 px-4 text-center">
+            <div className="h-12 w-12 rounded-full bg-gray-800 flex items-center justify-center mb-3">
+              <Inbox className="h-6 w-6 text-gray-600" />
+            </div>
+            <p className="text-gray-400 text-sm">
+              {activeTab === 'unread'
+                ? 'No tienes alertas sin leer'
+                : 'No tienes alertas'}
+            </p>
+            <p className="text-gray-600 text-xs mt-1">
+              Las alertas aparecerán cuando haya pagos próximos o eventos importantes
+            </p>
+          </div>
+        ) : (
+          <div className="divide-y divide-gray-800/50" role="list">
+            {displayedAlerts.map((alert) => (
+              <AlertItem
+                key={alert.id}
+                alert={alert}
+                onMarkRead={() => markAlertAsRead(alert.id)}
+                onDelete={() => deleteAlert(alert.id)}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
diff --git a/components/alerts/index.ts b/components/alerts/index.ts
new file mode 100644
index 0000000..c83a77a
--- /dev/null
+++ b/components/alerts/index.ts
@@ -0,0 +1,6 @@
+export { AlertBanner } from './AlertBanner'
+export { AlertItem } from './AlertItem'
+export { AlertPanel } from './AlertPanel'
+export { AlertBadge } from './AlertBadge'
+export { AlertIcon } from './AlertIcon'
+export { useAlerts } from './useAlerts'
diff --git a/components/alerts/useAlerts.ts b/components/alerts/useAlerts.ts
new file mode 100644
index 0000000..5749a3f
--- /dev/null
+++ b/components/alerts/useAlerts.ts
@@ -0,0 +1,68 @@
+'use client'
+
+import { useMemo, useCallback } from 'react'
+import { useFinanzasStore } from '@/lib/store'
+import { generateAlerts, GenerateAlertsParams } from '@/lib/alerts'
+
+export function useAlerts() {
+  const alerts = useFinanzasStore((state) => state.alerts)
+  const addAlert = useFinanzasStore((state) => state.addAlert)
+  const clearAllAlerts = useFinanzasStore((state) => state.clearAllAlerts)
+
+  const fixedDebts = useFinanzasStore((state) => state.fixedDebts)
+  const variableDebts = useFinanzasStore((state) => state.variableDebts)
+  const creditCards = useFinanzasStore((state) => state.creditCards)
+  const monthlyBudgets = useFinanzasStore((state) => state.monthlyBudgets)
+  const currentMonth = useFinanzasStore((state) => state.currentMonth)
+  const currentYear = useFinanzasStore((state) => state.currentYear)
+
+  const unreadAlerts = useMemo(
+    () => alerts.filter((alert) => !alert.isRead),
+    [alerts]
+  )
+
+  const unreadCount = unreadAlerts.length
+
+  const regenerateAlerts = useCallback(() => {
+    const params: GenerateAlertsParams = {
+      fixedDebts,
+      variableDebts,
+      creditCards,
+      monthlyBudgets,
+      currentMonth,
+      currentYear,
+    }
+
+    const newAlerts = generateAlerts(params)
+
+    // Clear existing alerts and add new ones
+    clearAllAlerts()
+
+    newAlerts.forEach((alertDraft) => {
+      addAlert({ ...alertDraft, isRead: false })
+    })
+
+    return newAlerts.length
+  }, [
+    fixedDebts,
+    variableDebts,
+    creditCards,
+    monthlyBudgets,
+    currentMonth,
+    currentYear,
+    clearAllAlerts,
+    addAlert,
+  ])
+
+  const dismissAll = useCallback(() => {
+    clearAllAlerts()
+  }, [clearAllAlerts])
+
+  return {
+    alerts,
+    unreadCount,
+    unreadAlerts,
+    regenerateAlerts,
+    dismissAll,
+  }
+}
diff --git a/components/budget/BudgetCard.tsx b/components/budget/BudgetCard.tsx
new file mode 100644
index 0000000..cb5d312
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/components/budget/BudgetForm.tsx b/components/budget/BudgetForm.tsx
new file mode 100644
index 0000000..68ed41c
--- /dev/null
+++ b/components/budget/BudgetForm.tsx
@@ -0,0 +1,198 @@
+'use client'
+
+import { useState } from 'react'
+import { MonthlyBudget } from '@/lib/types'
+import { cn, getMonthName } from '@/lib/utils'
+
+interface BudgetFormProps {
+  onSubmit: (budget: MonthlyBudget) => void
+  onCancel: () => void
+  initialData?: MonthlyBudget
+}
+
+const months = Array.from({ length: 12 }, (_, i) => ({
+  value: i + 1,
+  label: getMonthName(i + 1),
+}))
+
+export function BudgetForm({ onSubmit, onCancel, initialData }: BudgetFormProps) {
+  const now = new Date()
+
+  const [formData, setFormData] = useState({
+    totalIncome: initialData?.totalIncome || 0,
+    savingsGoal: initialData?.savingsGoal || 0,
+    month: initialData?.month || now.getMonth() + 1,
+    year: initialData?.year || now.getFullYear(),
+  })
+
+  const [errors, setErrors] = useState<Record<string, string>>({})
+
+  const validate = (): boolean => {
+    const newErrors: Record<string, string> = {}
+
+    if (formData.totalIncome <= 0) {
+      newErrors.totalIncome = 'Los ingresos deben ser mayores a 0'
+    }
+
+    if (formData.savingsGoal >= formData.totalIncome) {
+      newErrors.savingsGoal = 'La meta de ahorro debe ser menor que los ingresos'
+    }
+
+    if (formData.month < 1 || formData.month > 12) {
+      newErrors.month = 'El mes debe estar entre 1 y 12'
+    }
+
+    if (formData.year < 2000 || formData.year > 2100) {
+      newErrors.year = 'El año no es válido'
+    }
+
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (validate()) {
+      onSubmit({
+        month: formData.month,
+        year: formData.year,
+        totalIncome: formData.totalIncome,
+        savingsGoal: formData.savingsGoal,
+        fixedExpenses: initialData?.fixedExpenses || 0,
+        variableExpenses: initialData?.variableExpenses || 0,
+      })
+    }
+  }
+
+  const updateField = <K extends keyof typeof formData>(
+    field: K,
+    value: typeof formData[K]
+  ) => {
+    setFormData((prev) => ({ ...prev, [field]: value }))
+    if (errors[field]) {
+      setErrors((prev) => {
+        const newErrors = { ...prev }
+        delete newErrors[field]
+        return newErrors
+      })
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label htmlFor="month" className="block text-sm font-medium text-slate-300 mb-1">
+            Mes <span className="text-red-400">*</span>
+          </label>
+          <select
+            id="month"
+            value={formData.month}
+            onChange={(e) => updateField('month', parseInt(e.target.value))}
+            className={cn(
+              'w-full px-3 py-2 bg-slate-800 border rounded-lg text-white',
+              'focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500',
+              errors.month ? 'border-red-500' : 'border-slate-600'
+            )}
+          >
+            {months.map((m) => (
+              <option key={m.value} value={m.value}>
+                {m.label}
+              </option>
+            ))}
+          </select>
+          {errors.month && <p className="mt-1 text-sm text-red-400">{errors.month}</p>}
+        </div>
+
+        <div>
+          <label htmlFor="year" className="block text-sm font-medium text-slate-300 mb-1">
+            Año <span className="text-red-400">*</span>
+          </label>
+          <input
+            type="number"
+            id="year"
+            min="2000"
+            max="2100"
+            value={formData.year}
+            onChange={(e) => updateField('year', parseInt(e.target.value) || now.getFullYear())}
+            className={cn(
+              'w-full px-3 py-2 bg-slate-800 border rounded-lg text-white',
+              'focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500',
+              errors.year ? 'border-red-500' : 'border-slate-600'
+            )}
+          />
+          {errors.year && <p className="mt-1 text-sm text-red-400">{errors.year}</p>}
+        </div>
+      </div>
+
+      <div>
+        <label htmlFor="totalIncome" className="block text-sm font-medium text-slate-300 mb-1">
+          Ingresos totales <span className="text-red-400">*</span>
+        </label>
+        <input
+          type="number"
+          id="totalIncome"
+          min="0"
+          step="0.01"
+          value={formData.totalIncome || ''}
+          onChange={(e) => updateField('totalIncome', parseFloat(e.target.value) || 0)}
+          className={cn(
+            'w-full px-3 py-2 bg-slate-800 border rounded-lg text-white placeholder-slate-500',
+            'focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500',
+            errors.totalIncome ? 'border-red-500' : 'border-slate-600'
+          )}
+          placeholder="0.00"
+        />
+        {errors.totalIncome && <p className="mt-1 text-sm text-red-400">{errors.totalIncome}</p>}
+      </div>
+
+      <div>
+        <label htmlFor="savingsGoal" className="block text-sm font-medium text-slate-300 mb-1">
+          Meta de ahorro <span className="text-red-400">*</span>
+        </label>
+        <input
+          type="number"
+          id="savingsGoal"
+          min="0"
+          step="0.01"
+          value={formData.savingsGoal || ''}
+          onChange={(e) => updateField('savingsGoal', parseFloat(e.target.value) || 0)}
+          className={cn(
+            'w-full px-3 py-2 bg-slate-800 border rounded-lg text-white placeholder-slate-500',
+            'focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500',
+            errors.savingsGoal ? 'border-red-500' : 'border-slate-600'
+          )}
+          placeholder="0.00"
+        />
+        {errors.savingsGoal && <p className="mt-1 text-sm text-red-400">{errors.savingsGoal}</p>}
+        {formData.totalIncome > 0 && (
+          <p className="mt-1 text-sm text-slate-500">
+            Disponible para gastos: {((formData.totalIncome - formData.savingsGoal) / formData.totalIncome * 100).toFixed(0)}%
+          </p>
+        )}
+      </div>
+
+      <div className="flex gap-3 pt-2">
+        <button
+          type="button"
+          onClick={onCancel}
+          className={cn(
+            'flex-1 px-4 py-2 bg-slate-700 text-slate-200 rounded-lg font-medium',
+            'hover:bg-slate-600 transition-colors'
+          )}
+        >
+          Cancelar
+        </button>
+        <button
+          type="submit"
+          className={cn(
+            'flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium',
+            'hover:bg-blue-500 transition-colors'
+          )}
+        >
+          {initialData ? 'Guardar cambios' : 'Crear presupuesto'}
+        </button>
+      </div>
+    </form>
+  )
+}
diff --git a/components/budget/BudgetProgress.tsx b/components/budget/BudgetProgress.tsx
new file mode 100644
index 0000000..9bf0d20
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/components/budget/BudgetRing.tsx b/components/budget/BudgetRing.tsx
new file mode 100644
index 0000000..0166bea
--- /dev/null
+++ b/components/budget/BudgetRing.tsx
@@ -0,0 +1,83 @@
+'use client'
+
+import { cn, formatCurrency } from '@/lib/utils'
+
+interface BudgetRingProps {
+  spent: number
+  total: number
+  label: string
+}
+
+export function BudgetRing({ spent, total, label }: BudgetRingProps) {
+  const percentage = total > 0 ? Math.min((spent / total) * 100, 100) : 0
+  const remaining = Math.max(total - spent, 0)
+
+  const getColor = () => {
+    if (percentage < 70) return { stroke: '#10b981', bg: 'text-emerald-400' }
+    if (percentage < 90) return { stroke: '#f59e0b', bg: 'text-amber-400' }
+    return { stroke: '#ef4444', bg: 'text-red-400' }
+  }
+
+  const colors = getColor()
+
+  const radius = 80
+  const strokeWidth = 12
+  const normalizedRadius = radius - strokeWidth / 2
+  const circumference = normalizedRadius * 2 * Math.PI
+  const strokeDashoffset = circumference - (percentage / 100) * circumference
+
+  return (
+    <div className="flex flex-col items-center">
+      <div className="relative">
+        <svg
+          width={radius * 2}
+          height={radius * 2}
+          className="transform -rotate-90"
+        >
+          {/* Background circle */}
+          <circle
+            stroke="#334155"
+            strokeWidth={strokeWidth}
+            fill="transparent"
+            r={normalizedRadius}
+            cx={radius}
+            cy={radius}
+          />
+          {/* Progress circle */}
+          <circle
+            stroke={colors.stroke}
+            strokeWidth={strokeWidth}
+            strokeLinecap="round"
+            fill="transparent"
+            r={normalizedRadius}
+            cx={radius}
+            cy={radius}
+            style={{
+              strokeDasharray: `${circumference} ${circumference}`,
+              strokeDashoffset,
+              transition: 'stroke-dashoffset 0.5s ease-in-out',
+            }}
+          />
+        </svg>
+        {/* Center content */}
+        <div className="absolute inset-0 flex flex-col items-center justify-center">
+          <span className={cn('text-3xl font-bold', colors.bg)}>
+            {percentage.toFixed(0)}%
+          </span>
+          <span className="text-slate-400 text-sm mt-1">usado</span>
+        </div>
+      </div>
+
+      {/* Stats below */}
+      <div className="mt-4 text-center">
+        <p className="text-slate-400 text-sm">{label}</p>
+        <p className="text-lg font-semibold text-white mt-1">
+          {formatCurrency(spent)} <span className="text-slate-500">/ {formatCurrency(total)}</span>
+        </p>
+        <p className="text-sm text-slate-500 mt-1">
+          {formatCurrency(remaining)} disponible
+        </p>
+      </div>
+    </div>
+  )
+}
diff --git a/components/budget/BudgetSection.tsx b/components/budget/BudgetSection.tsx
new file mode 100644
index 0000000..677be15
--- /dev/null
+++ b/components/budget/BudgetSection.tsx
@@ -0,0 +1,269 @@
+'use client'
+
+import { useState, useMemo } from 'react'
+import { useFinanzasStore } from '@/lib/store'
+import { MonthlyBudget } from '@/lib/types'
+import { BudgetForm } from './BudgetForm'
+import { BudgetRing } from './BudgetRing'
+import { BudgetProgress } from './BudgetProgress'
+import { BudgetCard } from './BudgetCard'
+import { cn, formatCurrency, getMonthName, calculateTotalFixedDebts, calculateTotalVariableDebts, calculateCardPayments } from '@/lib/utils'
+import { Plus, Wallet, Edit3, TrendingUp, TrendingDown, AlertCircle } from 'lucide-react'
+
+export function BudgetSection() {
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [isEditing, setIsEditing] = useState(false)
+
+  const {
+    monthlyBudgets,
+    fixedDebts,
+    variableDebts,
+    cardPayments,
+    currentMonth,
+    currentYear,
+    setMonthlyBudget,
+  } = useFinanzasStore()
+
+  const currentBudget = useMemo(() => {
+    return monthlyBudgets.find(
+      (b) => b.month === currentMonth && b.year === currentYear
+    )
+  }, [monthlyBudgets, currentMonth, currentYear])
+
+  const fixedExpenses = useMemo(() => calculateTotalFixedDebts(fixedDebts), [fixedDebts])
+  const variableExpenses = useMemo(() => calculateTotalVariableDebts(variableDebts), [variableDebts])
+  const cardExpenses = useMemo(() => calculateCardPayments(cardPayments), [cardPayments])
+
+  const totalSpent = fixedExpenses + variableExpenses + cardExpenses
+  const totalIncome = currentBudget?.totalIncome || 0
+  const savingsGoal = currentBudget?.savingsGoal || 0
+  const availableForExpenses = totalIncome - savingsGoal
+  const remaining = availableForExpenses - totalSpent
+
+  const daysInMonth = new Date(currentYear, currentMonth, 0).getDate()
+  const currentDay = new Date().getDate()
+  const daysRemaining = daysInMonth - currentDay
+  const dailySpendRate = currentDay > 0 ? totalSpent / currentDay : 0
+  const projectedEndOfMonth = totalSpent + dailySpendRate * daysRemaining
+
+  const handleCreateBudget = () => {
+    setIsEditing(false)
+    setIsModalOpen(true)
+  }
+
+  const handleEditBudget = () => {
+    setIsEditing(true)
+    setIsModalOpen(true)
+  }
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false)
+    setIsEditing(false)
+  }
+
+  const handleSubmit = (budget: MonthlyBudget) => {
+    setMonthlyBudget(budget)
+    handleCloseModal()
+  }
+
+  if (!currentBudget) {
+    return (
+      <div className="bg-slate-900 min-h-screen p-6">
+        <div className="max-w-4xl mx-auto">
+          <div className="flex items-center justify-between mb-6">
+            <div>
+              <h1 className="text-2xl font-bold text-white">Presupuesto Mensual</h1>
+              <p className="text-slate-400 text-sm mt-1">
+                {getMonthName(currentMonth)} {currentYear}
+              </p>
+            </div>
+          </div>
+
+          <div className="text-center py-16 bg-slate-800/50 border border-slate-700/50 rounded-lg">
+            <Wallet className="w-12 h-12 text-slate-600 mx-auto mb-4" />
+            <h3 className="text-lg font-medium text-slate-300">
+              No hay presupuesto para este mes
+            </h3>
+            <p className="text-slate-500 mt-2 mb-6">
+              Crea un presupuesto para comenzar a gestionar tus finanzas
+            </p>
+            <button
+              onClick={handleCreateBudget}
+              className={cn(
+                'inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium',
+                'hover:bg-blue-500 transition-colors'
+              )}
+            >
+              <Plus className="w-4 h-4" />
+              Crear presupuesto
+            </button>
+          </div>
+
+          {isModalOpen && (
+            <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+              <div
+                className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+                onClick={handleCloseModal}
+              />
+              <div className="relative bg-slate-900 border border-slate-700 rounded-xl shadow-2xl w-full max-w-md max-h-[90vh] overflow-y-auto">
+                <div className="p-6">
+                  <h2 className="text-xl font-bold text-white mb-4">
+                    Nuevo presupuesto
+                  </h2>
+                  <BudgetForm
+                    onSubmit={handleSubmit}
+                    onCancel={handleCloseModal}
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="bg-slate-900 min-h-screen p-6">
+      <div className="max-w-4xl mx-auto">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-6">
+          <div>
+            <h1 className="text-2xl font-bold text-white">Presupuesto Mensual</h1>
+            <p className="text-slate-400 text-sm mt-1">
+              {getMonthName(currentMonth)} {currentYear}
+            </p>
+          </div>
+          <button
+            onClick={handleEditBudget}
+            className={cn(
+              'flex items-center gap-2 px-4 py-2 bg-slate-700 text-white rounded-lg font-medium',
+              'hover:bg-slate-600 transition-colors'
+            )}
+          >
+            <Edit3 className="w-4 h-4" />
+            Editar
+          </button>
+        </div>
+
+        {/* Summary Cards */}
+        <div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
+          <BudgetCard
+            label="Ingresos totales"
+            amount={totalIncome}
+            trend="up"
+            color="text-emerald-400"
+          />
+          <BudgetCard
+            label="Meta de ahorro"
+            amount={savingsGoal}
+            trend="neutral"
+            color="text-blue-400"
+          />
+          <BudgetCard
+            label="Gastado"
+            amount={totalSpent}
+            trend={totalSpent > availableForExpenses ? 'down' : 'neutral'}
+            color={totalSpent > availableForExpenses ? 'text-red-400' : 'text-amber-400'}
+          />
+          <BudgetCard
+            label="Disponible"
+            amount={remaining}
+            trend={remaining > 0 ? 'up' : 'down'}
+            color={remaining > 0 ? 'text-emerald-400' : 'text-red-400'}
+          />
+        </div>
+
+        {/* Budget Ring and Breakdown */}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
+          {/* Ring */}
+          <div className="bg-slate-800 border border-slate-700/50 rounded-lg p-6 flex items-center justify-center">
+            <BudgetRing
+              spent={totalSpent}
+              total={availableForExpenses}
+              label="Presupuesto mensual"
+            />
+          </div>
+
+          {/* Breakdown */}
+          <div className="bg-slate-800 border border-slate-700/50 rounded-lg p-6">
+            <h3 className="text-lg font-semibold text-white mb-4">Desglose de gastos</h3>
+            <div className="space-y-4">
+              <BudgetProgress
+                current={fixedExpenses}
+                max={availableForExpenses}
+                label="Deudas fijas pendientes"
+              />
+              <BudgetProgress
+                current={variableExpenses}
+                max={availableForExpenses}
+                label="Deudas variables pendientes"
+              />
+              <BudgetProgress
+                current={cardExpenses}
+                max={availableForExpenses}
+                label="Pagos de tarjetas"
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Projection */}
+        <div className="bg-slate-800 border border-slate-700/50 rounded-lg p-6">
+          <div className="flex items-start gap-3">
+            <div className={cn(
+              'p-2 rounded-lg',
+              projectedEndOfMonth > availableForExpenses ? 'bg-red-500/10' : 'bg-emerald-500/10'
+            )}>
+              {projectedEndOfMonth > availableForExpenses ? (
+                <AlertCircle className="w-5 h-5 text-red-400" />
+              ) : (
+                <TrendingUp className="w-5 h-5 text-emerald-400" />
+              )}
+            </div>
+            <div>
+              <h3 className="text-lg font-semibold text-white">Proyección</h3>
+              <p className="text-slate-400 mt-1">
+                A tu ritmo actual de gasto ({formatCurrency(dailySpendRate)}/día),
+                {projectedEndOfMonth > availableForExpenses ? (
+                  <span className="text-red-400">
+                    {' '}terminarás el mes con un déficit de {formatCurrency(projectedEndOfMonth - availableForExpenses)}.
+                  </span>
+                ) : (
+                  <span className="text-emerald-400">
+                    {' '}terminarás el mes con un superávit de {formatCurrency(availableForExpenses - projectedEndOfMonth)}.
+                  </span>
+                )}
+              </p>
+              <p className="text-slate-500 text-sm mt-2">
+                Quedan {daysRemaining} días en el mes
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Modal */}
+      {isModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <div
+            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+            onClick={handleCloseModal}
+          />
+          <div className="relative bg-slate-900 border border-slate-700 rounded-xl shadow-2xl w-full max-w-md max-h-[90vh] overflow-y-auto">
+            <div className="p-6">
+              <h2 className="text-xl font-bold text-white mb-4">
+                {isEditing ? 'Editar presupuesto' : 'Nuevo presupuesto'}
+              </h2>
+              <BudgetForm
+                onSubmit={handleSubmit}
+                onCancel={handleCloseModal}
+                initialData={isEditing ? currentBudget : undefined}
+              />
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/components/budget/index.ts b/components/budget/index.ts
new file mode 100644
index 0000000..1bc4604
--- /dev/null
+++ b/components/budget/index.ts
@@ -0,0 +1,5 @@
+export { BudgetForm } from './BudgetForm';
+export { BudgetRing } from './BudgetRing';
+export { BudgetProgress } from './BudgetProgress';
+export { BudgetCard } from './BudgetCard';
+export { BudgetSection } from './BudgetSection';
diff --git a/components/cards/CardPaymentForm.tsx b/components/cards/CardPaymentForm.tsx
new file mode 100644
index 0000000..1b0123b
--- /dev/null
+++ b/components/cards/CardPaymentForm.tsx
@@ -0,0 +1,255 @@
+'use client'
+
+import { useState } from 'react'
+import { X, Check } from 'lucide-react'
+
+interface CardPaymentFormData {
+  description: string
+  amount: number
+  date: string
+  installments?: {
+    current: number
+    total: number
+  }
+}
+
+interface CardPaymentFormProps {
+  cardId: string
+  onSubmit: (data: CardPaymentFormData) => void
+  onCancel: () => void
+}
+
+export function CardPaymentForm({ cardId, onSubmit, onCancel }: CardPaymentFormProps) {
+  const today = new Date().toISOString().split('T')[0]
+
+  const [formData, setFormData] = useState<CardPaymentFormData>({
+    description: '',
+    amount: 0,
+    date: today,
+    installments: undefined,
+  })
+
+  const [hasInstallments, setHasInstallments] = useState(false)
+  const [errors, setErrors] = useState<Record<string, string>>({})
+
+  const validateForm = (): boolean => {
+    const newErrors: Record<string, string> = {}
+
+    if (!formData.description.trim()) {
+      newErrors.description = 'La descripción es requerida'
+    }
+
+    if (formData.amount <= 0) {
+      newErrors.amount = 'El monto debe ser mayor a 0'
+    }
+
+    if (!formData.date) {
+      newErrors.date = 'La fecha es requerida'
+    }
+
+    if (hasInstallments && formData.installments) {
+      if (formData.installments.current < 1) {
+        newErrors.installmentCurrent = 'La cuota actual debe ser al menos 1'
+      }
+      if (formData.installments.total < 2) {
+        newErrors.installmentTotal = 'El total de cuotas debe ser al menos 2'
+      }
+      if (formData.installments.current > formData.installments.total) {
+        newErrors.installments = 'La cuota actual no puede ser mayor al total'
+      }
+    }
+
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (validateForm()) {
+      onSubmit({
+        ...formData,
+        installments: hasInstallments ? formData.installments : undefined,
+      })
+    }
+  }
+
+  const updateField = (field: keyof CardPaymentFormData, value: string | number) => {
+    setFormData((prev) => ({ ...prev, [field]: value }))
+    if (errors[field]) {
+      setErrors((prev) => {
+        const newErrors = { ...prev }
+        delete newErrors[field]
+        return newErrors
+      })
+    }
+  }
+
+  const updateInstallmentField = (field: 'current' | 'total', value: number) => {
+    setFormData((prev) => ({
+      ...prev,
+      installments: {
+        current: field === 'current' ? value : (prev.installments?.current ?? 1),
+        total: field === 'total' ? value : (prev.installments?.total ?? 1),
+      },
+    }))
+    // Clear related errors
+    setErrors((prev) => {
+      const newErrors = { ...prev }
+      delete newErrors[`installment${field.charAt(0).toUpperCase() + field.slice(1)}`]
+      delete newErrors.installments
+      return newErrors
+    })
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4 rounded-xl bg-slate-800 p-6">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold text-white">Registrar Pago</h3>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="rounded-full p-1 text-slate-400 transition-colors hover:bg-slate-700 hover:text-white"
+        >
+          <X className="h-5 w-5" />
+        </button>
+      </div>
+
+      <div className="grid gap-4">
+        {/* Description */}
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-300">
+            Descripción
+          </label>
+          <input
+            type="text"
+            value={formData.description}
+            onChange={(e) => updateField('description', e.target.value)}
+            placeholder="Ej: Supermercado Coto"
+            className="w-full rounded-lg border border-slate-600 bg-slate-700 px-4 py-2 text-white placeholder-slate-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20"
+          />
+          {errors.description && (
+            <p className="mt-1 text-sm text-rose-400">{errors.description}</p>
+          )}
+        </div>
+
+        <div className="grid gap-4 sm:grid-cols-2">
+          {/* Amount */}
+          <div>
+            <label className="mb-1 block text-sm font-medium text-slate-300">
+              Monto
+            </label>
+            <input
+              type="number"
+              min={0}
+              step="0.01"
+              value={formData.amount || ''}
+              onChange={(e) => updateField('amount', parseFloat(e.target.value) || 0)}
+              placeholder="0.00"
+              className="w-full rounded-lg border border-slate-600 bg-slate-700 px-4 py-2 text-white placeholder-slate-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20"
+            />
+            {errors.amount && (
+              <p className="mt-1 text-sm text-rose-400">{errors.amount}</p>
+            )}
+          </div>
+
+          {/* Date */}
+          <div>
+            <label className="mb-1 block text-sm font-medium text-slate-300">
+              Fecha
+            </label>
+            <input
+              type="date"
+              value={formData.date}
+              onChange={(e) => updateField('date', e.target.value)}
+              className="w-full rounded-lg border border-slate-600 bg-slate-700 px-4 py-2 text-white focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20"
+            />
+            {errors.date && <p className="mt-1 text-sm text-rose-400">{errors.date}</p>}
+          </div>
+        </div>
+
+        {/* Installments Toggle */}
+        <div className="flex items-center gap-3 rounded-lg border border-slate-700 bg-slate-700/50 p-3">
+          <input
+            type="checkbox"
+            id="hasInstallments"
+            checked={hasInstallments}
+            onChange={(e) => {
+              setHasInstallments(e.target.checked)
+              if (!e.target.checked) {
+                setFormData((prev) => ({ ...prev, installments: undefined }))
+              } else {
+                setFormData((prev) => ({ ...prev, installments: { current: 1, total: 1 } }))
+              }
+            }}
+            className="h-4 w-4 rounded border-slate-500 bg-slate-600 text-indigo-600 focus:ring-indigo-500"
+          />
+          <label htmlFor="hasInstallments" className="text-sm font-medium text-slate-300">
+            Este pago es en cuotas
+          </label>
+        </div>
+
+        {/* Installments Fields */}
+        {hasInstallments && (
+          <div className="grid gap-4 sm:grid-cols-2">
+            <div>
+              <label className="mb-1 block text-sm font-medium text-slate-300">
+                Cuota actual
+              </label>
+              <input
+                type="number"
+                min={1}
+                value={formData.installments?.current || ''}
+                onChange={(e) =>
+                  updateInstallmentField('current', parseInt(e.target.value) || 1)
+                }
+                className="w-full rounded-lg border border-slate-600 bg-slate-700 px-4 py-2 text-white focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20"
+              />
+              {errors.installmentCurrent && (
+                <p className="mt-1 text-sm text-rose-400">{errors.installmentCurrent}</p>
+              )}
+            </div>
+
+            <div>
+              <label className="mb-1 block text-sm font-medium text-slate-300">
+                Total de cuotas
+              </label>
+              <input
+                type="number"
+                min={2}
+                value={formData.installments?.total || ''}
+                onChange={(e) =>
+                  updateInstallmentField('total', parseInt(e.target.value) || 2)
+                }
+                className="w-full rounded-lg border border-slate-600 bg-slate-700 px-4 py-2 text-white focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20"
+              />
+              {errors.installmentTotal && (
+                <p className="mt-1 text-sm text-rose-400">{errors.installmentTotal}</p>
+              )}
+            </div>
+          </div>
+        )}
+        {errors.installments && (
+          <p className="text-sm text-rose-400">{errors.installments}</p>
+        )}
+      </div>
+
+      {/* Actions */}
+      <div className="flex justify-end gap-3 pt-4">
+        <button
+          type="button"
+          onClick={onCancel}
+          className="rounded-lg border border-slate-600 px-4 py-2 text-sm font-medium text-slate-300 transition-colors hover:bg-slate-700"
+        >
+          Cancelar
+        </button>
+        <button
+          type="submit"
+          className="flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
+        >
+          <Check className="h-4 w-4" />
+          Registrar pago
+        </button>
+      </div>
+    </form>
+  )
+}
diff --git a/components/cards/CardSection.tsx b/components/cards/CardSection.tsx
new file mode 100644
index 0000000..bc56795
--- /dev/null
+++ b/components/cards/CardSection.tsx
@@ -0,0 +1,325 @@
+'use client'
+
+import { useState, useMemo } from 'react'
+import { useFinanzasStore } from '@/lib/store'
+import { CreditCardWidget } from './CreditCardWidget'
+import { CreditCardForm } from './CreditCardForm'
+import { CardPaymentForm } from './CardPaymentForm'
+import { MiniCard } from './MiniCard'
+import { CreditCard, CardPayment } from '@/lib/types'
+import { formatCurrency, formatShortDate, getMonthName } from '@/lib/utils'
+import { Plus, CreditCard as CreditCardIcon, Receipt, Trash2 } from 'lucide-react'
+
+export function CardSection() {
+  const {
+    creditCards,
+    cardPayments,
+    currentMonth,
+    currentYear,
+    addCreditCard,
+    updateCreditCard,
+    deleteCreditCard,
+    addCardPayment,
+    deleteCardPayment,
+  } = useFinanzasStore()
+
+  const [showCardForm, setShowCardForm] = useState(false)
+  const [editingCard, setEditingCard] = useState<CreditCard | null>(null)
+  const [selectedCardId, setSelectedCardId] = useState<string>('')
+  const [showPaymentForm, setShowPaymentForm] = useState(false)
+
+  // Filter payments for current month
+  const currentMonthPayments = useMemo(() => {
+    return cardPayments.filter((payment) => {
+      const paymentDate = new Date(payment.date)
+      return (
+        paymentDate.getMonth() + 1 === currentMonth &&
+        paymentDate.getFullYear() === currentYear
+      )
+    })
+  }, [cardPayments, currentMonth, currentYear])
+
+  const handleCardSubmit = (data: Omit<CreditCard, 'id'>) => {
+    if (editingCard) {
+      updateCreditCard(editingCard.id, data)
+      setEditingCard(null)
+    } else {
+      addCreditCard(data)
+    }
+    setShowCardForm(false)
+  }
+
+  const handleEditCard = (card: CreditCard) => {
+    setEditingCard(card)
+    setShowCardForm(true)
+  }
+
+  const handleDeleteCard = (cardId: string) => {
+    if (window.confirm('¿Estás seguro de que deseas eliminar esta tarjeta?')) {
+      deleteCreditCard(cardId)
+      if (selectedCardId === cardId) {
+        setSelectedCardId('')
+        setShowPaymentForm(false)
+      }
+    }
+  }
+
+  const handlePaymentSubmit = (data: {
+    description: string
+    amount: number
+    date: string
+    installments?: { current: number; total: number }
+  }) => {
+    addCardPayment({
+      cardId: selectedCardId,
+      ...data,
+    })
+    setShowPaymentForm(false)
+  }
+
+  const handleDeletePayment = (paymentId: string) => {
+    if (window.confirm('¿Estás seguro de que deseas eliminar este pago?')) {
+      deleteCardPayment(paymentId)
+    }
+  }
+
+  const getCardById = (cardId: string): CreditCard | undefined => {
+    return creditCards.find((card) => card.id === cardId)
+  }
+
+  const getCardTotalPayments = (cardId: string): number => {
+    return currentMonthPayments
+      .filter((payment) => payment.cardId === cardId)
+      .reduce((total, payment) => total + payment.amount, 0)
+  }
+
+  return (
+    <div className="space-y-8">
+      {/* Header */}
+      <div className="flex items-center justify-between">
+        <div className="flex items-center gap-3">
+          <div className="flex h-10 w-10 items-center justify-center rounded-xl bg-indigo-500/20">
+            <CreditCardIcon className="h-5 w-5 text-indigo-400" />
+          </div>
+          <div>
+            <h2 className="text-xl font-semibold text-white">Tarjetas de Crédito</h2>
+            <p className="text-sm text-slate-400">
+              {getMonthName(currentMonth)} {currentYear}
+            </p>
+          </div>
+        </div>
+        <button
+          onClick={() => {
+            setEditingCard(null)
+            setShowCardForm(true)
+          }}
+          className="flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
+        >
+          <Plus className="h-4 w-4" />
+          Agregar tarjeta
+        </button>
+      </div>
+
+      {/* Cards Grid */}
+      {creditCards.length === 0 ? (
+        <div className="rounded-xl border border-dashed border-slate-600 bg-slate-800/50 p-12 text-center">
+          <CreditCardIcon className="mx-auto h-12 w-12 text-slate-500" />
+          <h3 className="mt-4 text-lg font-medium text-slate-300">
+            No tienes tarjetas registradas
+          </h3>
+          <p className="mt-1 text-sm text-slate-400">
+            Agrega tu primera tarjeta para comenzar a gestionar tus pagos
+          </p>
+          <button
+            onClick={() => {
+              setEditingCard(null)
+              setShowCardForm(true)
+            }}
+            className="mt-4 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
+          >
+            Agregar tarjeta
+          </button>
+        </div>
+      ) : (
+        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
+          {creditCards.map((card) => (
+            <CreditCardWidget
+              key={card.id}
+              card={card}
+              onEdit={() => handleEditCard(card)}
+              onDelete={() => handleDeleteCard(card.id)}
+            />
+          ))}
+        </div>
+      )}
+
+      {/* Card Form Modal */}
+      {showCardForm && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-4 backdrop-blur-sm">
+          <div className="w-full max-w-lg">
+            <CreditCardForm
+              initialData={editingCard ?? undefined}
+              onSubmit={handleCardSubmit}
+              onCancel={() => {
+                setShowCardForm(false)
+                setEditingCard(null)
+              }}
+            />
+          </div>
+        </div>
+      )}
+
+      {/* Payment Section */}
+      {creditCards.length > 0 && (
+        <div className="grid gap-6 lg:grid-cols-2">
+          {/* Register Payment */}
+          <div className="rounded-xl bg-slate-800 p-6">
+            <div className="mb-4 flex items-center gap-3">
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-emerald-500/20">
+                <Receipt className="h-4 w-4 text-emerald-400" />
+              </div>
+              <h3 className="text-lg font-semibold text-white">Registrar Pago</h3>
+            </div>
+
+            {/* Card Selector */}
+            <div className="mb-4">
+              <label className="mb-2 block text-sm font-medium text-slate-300">
+                Seleccionar tarjeta
+              </label>
+              <div className="space-y-2 max-h-48 overflow-y-auto">
+                {creditCards.map((card) => (
+                  <MiniCard
+                    key={card.id}
+                    card={card}
+                    selected={selectedCardId === card.id}
+                    onClick={() => {
+                      setSelectedCardId(card.id)
+                      setShowPaymentForm(true)
+                    }}
+                  />
+                ))}
+              </div>
+            </div>
+
+            {/* Payment Form */}
+            {showPaymentForm && selectedCardId && (
+              <CardPaymentForm
+                cardId={selectedCardId}
+                onSubmit={handlePaymentSubmit}
+                onCancel={() => {
+                  setShowPaymentForm(false)
+                  setSelectedCardId('')
+                }}
+              />
+            )}
+          </div>
+
+          {/* Recent Payments */}
+          <div className="rounded-xl bg-slate-800 p-6">
+            <div className="mb-4 flex items-center gap-3">
+              <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-amber-500/20">
+                <Receipt className="h-4 w-4 text-amber-400" />
+              </div>
+              <div>
+                <h3 className="text-lg font-semibold text-white">Pagos del Mes</h3>
+                <p className="text-sm text-slate-400">
+                  Total: {formatCurrency(
+                    currentMonthPayments.reduce((sum, p) => sum + p.amount, 0)
+                  )}
+                </p>
+              </div>
+            </div>
+
+            {currentMonthPayments.length === 0 ? (
+              <div className="rounded-lg border border-dashed border-slate-600 p-8 text-center">
+                <p className="text-sm text-slate-400">
+                  No hay pagos registrados este mes
+                </p>
+              </div>
+            ) : (
+              <div className="space-y-3 max-h-96 overflow-y-auto">
+                {currentMonthPayments
+                  .sort((a, b) => new Date(b.date).getTime() - new Date(a.date).getTime())
+                  .map((payment) => {
+                    const card = getCardById(payment.cardId)
+                    return (
+                      <div
+                        key={payment.id}
+                        className="flex items-center justify-between rounded-lg border border-slate-700 bg-slate-700/50 p-4"
+                      >
+                        <div className="flex items-center gap-3">
+                          {card && (
+                            <div
+                              className="h-8 w-8 shrink-0 rounded-md"
+                              style={{ backgroundColor: card.color }}
+                            />
+                          )}
+                          <div className="min-w-0">
+                            <p className="truncate font-medium text-white">
+                              {payment.description}
+                            </p>
+                            <p className="text-xs text-slate-400">
+                              {card?.name} • {formatShortDate(payment.date)}
+                              {payment.installments && (
+                                <span className="ml-2 text-amber-400">
+                                  Cuota {payment.installments.current}/{payment.installments.total}
+                                </span>
+                              )}
+                            </p>
+                          </div>
+                        </div>
+                        <div className="flex items-center gap-3">
+                          <span className="font-semibold text-white">
+                            {formatCurrency(payment.amount)}
+                          </span>
+                          <button
+                            onClick={() => handleDeletePayment(payment.id)}
+                            className="rounded p-1 text-slate-400 transition-colors hover:bg-rose-500/20 hover:text-rose-400"
+                            aria-label="Eliminar pago"
+                          >
+                            <Trash2 className="h-4 w-4" />
+                          </button>
+                        </div>
+                      </div>
+                    )
+                  })}
+              </div>
+            )}
+
+            {/* Summary by Card */}
+            {currentMonthPayments.length > 0 && (
+              <div className="mt-6 border-t border-slate-700 pt-4">
+                <h4 className="mb-3 text-sm font-medium text-slate-300">
+                  Resumen por tarjeta
+                </h4>
+                <div className="space-y-2">
+                  {creditCards.map((card) => {
+                    const total = getCardTotalPayments(card.id)
+                    if (total === 0) return null
+                    return (
+                      <div
+                        key={card.id}
+                        className="flex items-center justify-between text-sm"
+                      >
+                        <div className="flex items-center gap-2">
+                          <div
+                            className="h-3 w-3 rounded-full"
+                            style={{ backgroundColor: card.color }}
+                          />
+                          <span className="text-slate-300">{card.name}</span>
+                        </div>
+                        <span className="font-medium text-white">
+                          {formatCurrency(total)}
+                        </span>
+                      </div>
+                    )
+                  })}
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/components/cards/CreditCardForm.tsx b/components/cards/CreditCardForm.tsx
new file mode 100644
index 0000000..c38b8be
--- /dev/null
+++ b/components/cards/CreditCardForm.tsx
@@ -0,0 +1,242 @@
+'use client'
+
+import { useState } from 'react'
+import { CreditCard } from '@/lib/types'
+import { X, Check } from 'lucide-react'
+
+interface CreditCardFormProps {
+  initialData?: Partial<CreditCard>
+  onSubmit: (data: Omit<CreditCard, 'id'>) => void
+  onCancel: () => void
+}
+
+const DEFAULT_COLOR = '#6366f1'
+
+export function CreditCardForm({ initialData, onSubmit, onCancel }: CreditCardFormProps) {
+  const [formData, setFormData] = useState({
+    name: initialData?.name ?? '',
+    lastFourDigits: initialData?.lastFourDigits ?? '',
+    closingDay: initialData?.closingDay ?? 1,
+    dueDay: initialData?.dueDay ?? 10,
+    currentBalance: initialData?.currentBalance ?? 0,
+    creditLimit: initialData?.creditLimit ?? 0,
+    color: initialData?.color ?? DEFAULT_COLOR,
+  })
+
+  const [errors, setErrors] = useState<Record<string, string>>({})
+
+  const validateForm = (): boolean => {
+    const newErrors: Record<string, string> = {}
+
+    if (!formData.name.trim()) {
+      newErrors.name = 'El nombre es requerido'
+    }
+
+    if (!formData.lastFourDigits.trim()) {
+      newErrors.lastFourDigits = 'Los últimos 4 dígitos son requeridos'
+    } else if (!/^\d{4}$/.test(formData.lastFourDigits)) {
+      newErrors.lastFourDigits = 'Debe ser exactamente 4 dígitos numéricos'
+    }
+
+    if (formData.closingDay < 1 || formData.closingDay > 31) {
+      newErrors.closingDay = 'El día debe estar entre 1 y 31'
+    }
+
+    if (formData.dueDay < 1 || formData.dueDay > 31) {
+      newErrors.dueDay = 'El día debe estar entre 1 y 31'
+    }
+
+    if (formData.creditLimit <= 0) {
+      newErrors.creditLimit = 'El límite de crédito debe ser mayor a 0'
+    }
+
+    if (formData.currentBalance < 0) {
+      newErrors.currentBalance = 'El balance no puede ser negativo'
+    }
+
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (validateForm()) {
+      onSubmit(formData)
+    }
+  }
+
+  const updateField = (field: keyof typeof formData, value: string | number) => {
+    setFormData((prev) => ({ ...prev, [field]: value }))
+    // Clear error when user starts typing
+    if (errors[field]) {
+      setErrors((prev) => {
+        const newErrors = { ...prev }
+        delete newErrors[field]
+        return newErrors
+      })
+    }
+  }
+
+  const handleLastFourDigitsChange = (value: string) => {
+    // Only allow digits and max 4 characters
+    const digitsOnly = value.replace(/\D/g, '').slice(0, 4)
+    updateField('lastFourDigits', digitsOnly)
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4 rounded-xl bg-slate-800 p-6">
+      <div className="flex items-center justify-between">
+        <h3 className="text-lg font-semibold text-white">
+          {initialData ? 'Editar Tarjeta' : 'Nueva Tarjeta'}
+        </h3>
+        <button
+          type="button"
+          onClick={onCancel}
+          className="rounded-full p-1 text-slate-400 transition-colors hover:bg-slate-700 hover:text-white"
+        >
+          <X className="h-5 w-5" />
+        </button>
+      </div>
+
+      <div className="grid gap-4 sm:grid-cols-2">
+        {/* Card Name */}
+        <div className="sm:col-span-2">
+          <label className="mb-1 block text-sm font-medium text-slate-300">
+            Nombre de la tarjeta
+          </label>
+          <input
+            type="text"
+            value={formData.name}
+            onChange={(e) => updateField('name', e.target.value)}
+            placeholder="Ej: Visa Banco Galicia"
+            className="w-full rounded-lg border border-slate-600 bg-slate-700 px-4 py-2 text-white placeholder-slate-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20"
+          />
+          {errors.name && <p className="mt-1 text-sm text-rose-400">{errors.name}</p>}
+        </div>
+
+        {/* Last 4 Digits */}
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-300">
+            Últimos 4 dígitos
+          </label>
+          <input
+            type="text"
+            inputMode="numeric"
+            value={formData.lastFourDigits}
+            onChange={(e) => handleLastFourDigitsChange(e.target.value)}
+            placeholder="1234"
+            maxLength={4}
+            className="w-full rounded-lg border border-slate-600 bg-slate-700 px-4 py-2 text-white placeholder-slate-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20"
+          />
+          {errors.lastFourDigits && (
+            <p className="mt-1 text-sm text-rose-400">{errors.lastFourDigits}</p>
+          )}
+        </div>
+
+        {/* Color Picker */}
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-300">Color</label>
+          <div className="flex items-center gap-3">
+            <input
+              type="color"
+              value={formData.color}
+              onChange={(e) => updateField('color', e.target.value)}
+              className="h-10 w-20 cursor-pointer rounded-lg border border-slate-600 bg-slate-700"
+            />
+            <span className="text-sm text-slate-400">{formData.color}</span>
+          </div>
+        </div>
+
+        {/* Closing Day */}
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-300">
+            Día de cierre
+          </label>
+          <input
+            type="number"
+            min={1}
+            max={31}
+            value={formData.closingDay}
+            onChange={(e) => updateField('closingDay', parseInt(e.target.value) || 1)}
+            className="w-full rounded-lg border border-slate-600 bg-slate-700 px-4 py-2 text-white focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20"
+          />
+          {errors.closingDay && (
+            <p className="mt-1 text-sm text-rose-400">{errors.closingDay}</p>
+          )}
+        </div>
+
+        {/* Due Day */}
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-300">
+            Día de vencimiento
+          </label>
+          <input
+            type="number"
+            min={1}
+            max={31}
+            value={formData.dueDay}
+            onChange={(e) => updateField('dueDay', parseInt(e.target.value) || 1)}
+            className="w-full rounded-lg border border-slate-600 bg-slate-700 px-4 py-2 text-white focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20"
+          />
+          {errors.dueDay && <p className="mt-1 text-sm text-rose-400">{errors.dueDay}</p>}
+        </div>
+
+        {/* Credit Limit */}
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-300">
+            Límite de crédito
+          </label>
+          <input
+            type="number"
+            min={0}
+            step="0.01"
+            value={formData.creditLimit || ''}
+            onChange={(e) => updateField('creditLimit', parseFloat(e.target.value) || 0)}
+            placeholder="0.00"
+            className="w-full rounded-lg border border-slate-600 bg-slate-700 px-4 py-2 text-white placeholder-slate-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20"
+          />
+          {errors.creditLimit && (
+            <p className="mt-1 text-sm text-rose-400">{errors.creditLimit}</p>
+          )}
+        </div>
+
+        {/* Current Balance */}
+        <div>
+          <label className="mb-1 block text-sm font-medium text-slate-300">
+            Balance actual
+          </label>
+          <input
+            type="number"
+            min={0}
+            step="0.01"
+            value={formData.currentBalance || ''}
+            onChange={(e) => updateField('currentBalance', parseFloat(e.target.value) || 0)}
+            placeholder="0.00"
+            className="w-full rounded-lg border border-slate-600 bg-slate-700 px-4 py-2 text-white placeholder-slate-400 focus:border-indigo-500 focus:outline-none focus:ring-2 focus:ring-indigo-500/20"
+          />
+          {errors.currentBalance && (
+            <p className="mt-1 text-sm text-rose-400">{errors.currentBalance}</p>
+          )}
+        </div>
+      </div>
+
+      {/* Actions */}
+      <div className="flex justify-end gap-3 pt-4">
+        <button
+          type="button"
+          onClick={onCancel}
+          className="rounded-lg border border-slate-600 px-4 py-2 text-sm font-medium text-slate-300 transition-colors hover:bg-slate-700"
+        >
+          Cancelar
+        </button>
+        <button
+          type="submit"
+          className="flex items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
+        >
+          <Check className="h-4 w-4" />
+          {initialData ? 'Guardar cambios' : 'Crear tarjeta'}
+        </button>
+      </div>
+    </form>
+  )
+}
diff --git a/components/cards/CreditCardWidget.tsx b/components/cards/CreditCardWidget.tsx
new file mode 100644
index 0000000..b596e51
--- /dev/null
+++ b/components/cards/CreditCardWidget.tsx
@@ -0,0 +1,123 @@
+'use client'
+
+import { CreditCard } from '@/lib/types'
+import { formatCurrency, getCardUtilization, getDaysUntil, calculateNextClosingDate, calculateNextDueDate } from '@/lib/utils'
+import { Pencil, Trash2 } from 'lucide-react'
+
+interface CreditCardWidgetProps {
+  card: CreditCard
+  onEdit: () => void
+  onDelete: () => void
+}
+
+export function CreditCardWidget({ card, onEdit, onDelete }: CreditCardWidgetProps) {
+  const utilization = getCardUtilization(card.currentBalance, card.creditLimit)
+  const nextClosing = calculateNextClosingDate(card.closingDay)
+  const nextDue = calculateNextDueDate(card.dueDay)
+  const daysUntilClosing = getDaysUntil(nextClosing)
+  const daysUntilDue = getDaysUntil(nextDue)
+
+  const getUtilizationColor = (util: number): string => {
+    if (util < 30) return 'bg-emerald-500'
+    if (util < 70) return 'bg-amber-500'
+    return 'bg-rose-500'
+  }
+
+  const getUtilizationTextColor = (util: number): string => {
+    if (util < 30) return 'text-emerald-400'
+    if (util < 70) return 'text-amber-400'
+    return 'text-rose-400'
+  }
+
+  return (
+    <div
+      className="relative overflow-hidden rounded-2xl p-6 text-white shadow-lg transition-transform hover:scale-[1.02]"
+      style={{
+        aspectRatio: '1.586',
+        background: `linear-gradient(135deg, ${card.color} 0%, ${adjustColor(card.color, -30)} 100%)`,
+      }}
+    >
+      {/* Decorative circles */}
+      <div className="absolute -right-8 -top-8 h-32 w-32 rounded-full bg-white/10" />
+      <div className="absolute -bottom-12 -left-12 h-40 w-40 rounded-full bg-white/5" />
+
+      {/* Header with card name and actions */}
+      <div className="relative flex items-start justify-between">
+        <h3 className="text-lg font-semibold tracking-wide">{card.name}</h3>
+        <div className="flex gap-1">
+          <button
+            onClick={onEdit}
+            className="rounded-full p-1.5 transition-colors hover:bg-white/20"
+            aria-label="Editar tarjeta"
+          >
+            <Pencil className="h-4 w-4" />
+          </button>
+          <button
+            onClick={onDelete}
+            className="rounded-full p-1.5 transition-colors hover:bg-white/20"
+            aria-label="Eliminar tarjeta"
+          >
+            <Trash2 className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+
+      {/* Card number */}
+      <div className="relative mt-8">
+        <p className="font-mono text-2xl tracking-widest">
+          **** **** **** {card.lastFourDigits}
+        </p>
+      </div>
+
+      {/* Balance */}
+      <div className="relative mt-6">
+        <p className="text-sm text-white/70">Balance actual</p>
+        <p className="text-2xl font-bold">{formatCurrency(card.currentBalance)}</p>
+      </div>
+
+      {/* Utilization badge */}
+      <div className="relative mt-4 flex items-center gap-3">
+        <div className="flex items-center gap-2 rounded-full bg-black/30 px-3 py-1">
+          <div className={`h-2 w-2 rounded-full ${getUtilizationColor(utilization)}`} />
+          <span className={`text-sm font-medium ${getUtilizationTextColor(utilization)}`}>
+            {utilization.toFixed(0)}% usado
+          </span>
+        </div>
+        <span className="text-sm text-white/60">
+          de {formatCurrency(card.creditLimit)}
+        </span>
+      </div>
+
+      {/* Footer with closing and due dates */}
+      <div className="relative mt-4 flex justify-between text-xs text-white/70">
+        <div>
+          <span className="block">Cierre</span>
+          <span className="font-medium text-white">
+            {card.closingDay} ({daysUntilClosing === 0 ? 'hoy' : daysUntilClosing > 0 ? `en ${daysUntilClosing} días` : `hace ${Math.abs(daysUntilClosing)} días`})
+          </span>
+        </div>
+        <div className="text-right">
+          <span className="block">Vencimiento</span>
+          <span className="font-medium text-white">
+            {card.dueDay} ({daysUntilDue === 0 ? 'hoy' : daysUntilDue > 0 ? `en ${daysUntilDue} días` : `hace ${Math.abs(daysUntilDue)} días`})
+          </span>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Ajusta el brillo de un color hexadecimal
+ * @param color - Color en formato hex (#RRGGBB)
+ * @param amount - Cantidad a ajustar (negativo para oscurecer, positivo para aclarar)
+ * @returns Color ajustado en formato hex
+ */
+function adjustColor(color: string, amount: number): string {
+  const hex = color.replace('#', '')
+  const r = Math.max(0, Math.min(255, parseInt(hex.substring(0, 2), 16) + amount))
+  const g = Math.max(0, Math.min(255, parseInt(hex.substring(2, 4), 16) + amount))
+  const b = Math.max(0, Math.min(255, parseInt(hex.substring(4, 6), 16) + amount))
+
+  return `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`
+}
diff --git a/components/cards/MiniCard.tsx b/components/cards/MiniCard.tsx
new file mode 100644
index 0000000..dc83b98
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/components/cards/index.ts b/components/cards/index.ts
new file mode 100644
index 0000000..2c5fca8
--- /dev/null
+++ b/components/cards/index.ts
@@ -0,0 +1,5 @@
+export { CreditCardWidget } from './CreditCardWidget'
+export { CreditCardForm } from './CreditCardForm'
+export { CardPaymentForm } from './CardPaymentForm'
+export { MiniCard } from './MiniCard'
+export { CardSection } from './CardSection'
diff --git a/components/dashboard/DashboardHeader.tsx b/components/dashboard/DashboardHeader.tsx
new file mode 100644
index 0000000..387866b
--- /dev/null
+++ b/components/dashboard/DashboardHeader.tsx
@@ -0,0 +1,63 @@
+'use client'
+
+import { RefreshCw } from 'lucide-react'
+import { getMonthName } from '@/lib/utils'
+import { cn } from '@/lib/utils'
+
+interface DashboardHeaderProps {
+  onRefresh?: () => void
+  isRefreshing?: boolean
+}
+
+export function DashboardHeader({
+  onRefresh,
+  isRefreshing = false,
+}: DashboardHeaderProps) {
+  const now = new Date()
+  const currentMonth = now.getMonth() + 1
+  const currentYear = now.getFullYear()
+  const monthName = getMonthName(currentMonth)
+
+  // Formatear fecha actual
+  const formattedDate = new Intl.DateTimeFormat('es-AR', {
+    weekday: 'long',
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  }).format(now)
+
+  return (
+    <div className="flex flex-col gap-4 border-b border-slate-700 bg-slate-800/50 px-6 py-4 sm:flex-row sm:items-center sm:justify-between">
+      <div>
+        <h1 className="text-2xl font-bold text-white">
+          Dashboard
+          <span className="ml-2 text-lg font-normal text-slate-400">
+            {monthName} {currentYear}
+          </span>
+        </h1>
+        <p className="mt-1 text-sm capitalize text-slate-400">
+          {formattedDate}
+        </p>
+      </div>
+
+      {onRefresh && (
+        <button
+          onClick={onRefresh}
+          disabled={isRefreshing}
+          className={cn(
+            'inline-flex items-center gap-2 rounded-lg border border-slate-600',
+            'bg-slate-700 px-4 py-2 text-sm font-medium text-white',
+            'transition-colors hover:bg-slate-600',
+            'focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-offset-2 focus:ring-offset-slate-800',
+            'disabled:cursor-not-allowed disabled:opacity-50'
+          )}
+        >
+          <RefreshCw
+            className={cn('h-4 w-4', isRefreshing && 'animate-spin')}
+          />
+          {isRefreshing ? 'Actualizando...' : 'Actualizar'}
+        </button>
+      )}
+    </div>
+  )
+}
diff --git a/components/dashboard/ExpenseChart.tsx b/components/dashboard/ExpenseChart.tsx
new file mode 100644
index 0000000..4be8c83
--- /dev/null
+++ b/components/dashboard/ExpenseChart.tsx
@@ -0,0 +1,168 @@
+'use client'
+
+import { PieChart, Pie, Cell, Tooltip, ResponsiveContainer } from 'recharts'
+import { FixedDebt, VariableDebt } from '@/lib/types'
+import { formatCurrency } from '@/lib/utils'
+
+interface ExpenseChartProps {
+  fixedDebts: FixedDebt[]
+  variableDebts: VariableDebt[]
+}
+
+// Colores por categoría
+const CATEGORY_COLORS: Record<string, string> = {
+  // Deudas fijas
+  housing: '#10b981', // emerald-500
+  services: '#3b82f6', // blue-500
+  subscription: '#8b5cf6', // violet-500
+  other: '#64748b', // slate-500
+  // Deudas variables
+  shopping: '#f59e0b', // amber-500
+  food: '#ef4444', // red-500
+  entertainment: '#ec4899', // pink-500
+  health: '#06b6d4', // cyan-500
+  transport: '#84cc16', // lime-500
+}
+
+// Nombres de categorías en español
+const CATEGORY_NAMES: Record<string, string> = {
+  housing: 'Vivienda',
+  services: 'Servicios',
+  subscription: 'Suscripciones',
+  other: 'Otros',
+  shopping: 'Compras',
+  food: 'Comida',
+  entertainment: 'Entretenimiento',
+  health: 'Salud',
+  transport: 'Transporte',
+}
+
+interface ChartData {
+  name: string
+  value: number
+  color: string
+  category: string
+}
+
+export function ExpenseChart({ fixedDebts, variableDebts }: ExpenseChartProps) {
+  // Agrupar gastos por categoría
+  const categoryTotals = new Map<string, number>()
+
+  // Agregar deudas fijas no pagadas
+  fixedDebts
+    .filter((debt) => !debt.isPaid)
+    .forEach((debt) => {
+      const current = categoryTotals.get(debt.category) || 0
+      categoryTotals.set(debt.category, current + debt.amount)
+    })
+
+  // Agregar deudas variables no pagadas
+  variableDebts
+    .filter((debt) => !debt.isPaid)
+    .forEach((debt) => {
+      const current = categoryTotals.get(debt.category) || 0
+      categoryTotals.set(debt.category, current + debt.amount)
+    })
+
+  // Convertir a formato de datos para el gráfico
+  const data: ChartData[] = Array.from(categoryTotals.entries())
+    .map(([category, value]) => ({
+      name: CATEGORY_NAMES[category] || category,
+      value,
+      color: CATEGORY_COLORS[category] || '#64748b',
+      category,
+    }))
+    .filter((item) => item.value > 0)
+    .sort((a, b) => b.value - a.value)
+
+  // Calcular total
+  const total = data.reduce((sum, item) => sum + item.value, 0)
+
+  if (data.length === 0) {
+    return (
+      <div className="flex h-64 items-center justify-center rounded-xl border border-slate-700 bg-slate-800">
+        <p className="text-slate-500">No hay gastos pendientes</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="rounded-xl border border-slate-700 bg-slate-800 p-6">
+      <h3 className="mb-4 text-lg font-semibold text-white">
+        Distribución de Gastos
+      </h3>
+
+      <div className="flex flex-col gap-6 lg:flex-row">
+        {/* Gráfico de dona */}
+        <div className="h-64 w-full lg:w-1/2">
+          <ResponsiveContainer width="100%" height="100%">
+            <PieChart>
+              <Pie
+                data={data}
+                cx="50%"
+                cy="50%"
+                innerRadius={60}
+                outerRadius={90}
+                paddingAngle={2}
+                dataKey="value"
+              >
+                {data.map((entry, index) => (
+                  <Cell key={`cell-${index}`} fill={entry.color} />
+                ))}
+              </Pie>
+              <Tooltip
+                formatter={(value) =>
+                  typeof value === 'number' ? formatCurrency(value) : value
+                }
+                contentStyle={{
+                  backgroundColor: '#1e293b',
+                  border: '1px solid #334155',
+                  borderRadius: '8px',
+                  color: '#fff',
+                }}
+              />
+            </PieChart>
+          </ResponsiveContainer>
+        </div>
+
+        {/* Leyenda */}
+        <div className="flex w-full flex-col justify-center gap-3 lg:w-1/2">
+          {data.map((item) => {
+            const percentage = total > 0 ? (item.value / total) * 100 : 0
+            return (
+              <div key={item.category} className="flex items-center gap-3">
+                <div
+                  className="h-4 w-4 rounded-full"
+                  style={{ backgroundColor: item.color }}
+                />
+                <div className="flex-1">
+                  <div className="flex items-center justify-between">
+                    <span className="text-sm font-medium text-slate-300">
+                      {item.name}
+                    </span>
+                    <span className="text-sm text-slate-400">
+                      {percentage.toFixed(1)}%
+                    </span>
+                  </div>
+                  <p className="text-xs text-slate-500">
+                    {formatCurrency(item.value)}
+                  </p>
+                </div>
+              </div>
+            )
+          })}
+
+          {/* Total */}
+          <div className="mt-4 border-t border-slate-700 pt-4">
+            <div className="flex items-center justify-between">
+              <span className="text-sm font-medium text-slate-400">Total</span>
+              <span className="font-mono text-lg font-bold text-emerald-400">
+                {formatCurrency(total)}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/dashboard/MetricCard.tsx b/components/dashboard/MetricCard.tsx
new file mode 100644
index 0000000..bc79b7f
--- /dev/null
+++ b/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>
+  )
+}
diff --git a/components/dashboard/QuickActions.tsx b/components/dashboard/QuickActions.tsx
new file mode 100644
index 0000000..a2cd3a7
--- /dev/null
+++ b/components/dashboard/QuickActions.tsx
@@ -0,0 +1,68 @@
+'use client'
+
+import { Plus, CreditCard, Wallet } from 'lucide-react'
+
+interface QuickActionsProps {
+  onAddDebt: () => void
+  onAddCard: () => void
+  onAddPayment: () => void
+}
+
+interface ActionButton {
+  label: string
+  icon: React.ElementType
+  onClick: () => void
+  color: string
+}
+
+export function QuickActions({
+  onAddDebt,
+  onAddCard,
+  onAddPayment,
+}: QuickActionsProps) {
+  const actions: ActionButton[] = [
+    {
+      label: 'Agregar Deuda',
+      icon: Plus,
+      onClick: onAddDebt,
+      color: 'bg-emerald-500 hover:bg-emerald-600',
+    },
+    {
+      label: 'Nueva Tarjeta',
+      icon: CreditCard,
+      onClick: onAddCard,
+      color: 'bg-blue-500 hover:bg-blue-600',
+    },
+    {
+      label: 'Registrar Pago',
+      icon: Wallet,
+      onClick: onAddPayment,
+      color: 'bg-violet-500 hover:bg-violet-600',
+    },
+  ]
+
+  return (
+    <div className="grid grid-cols-1 gap-4 sm:grid-cols-3">
+      {actions.map((action) => {
+        const Icon = action.icon
+        return (
+          <button
+            key={action.label}
+            onClick={action.onClick}
+            className={`
+              group flex flex-col items-center gap-3 rounded-xl p-6
+              transition-all duration-200 ease-out
+              ${action.color}
+              focus:outline-none focus:ring-2 focus:ring-white/50 focus:ring-offset-2 focus:ring-offset-slate-800
+            `}
+          >
+            <div className="rounded-full bg-white/20 p-4 transition-transform group-hover:scale-110">
+              <Icon className="h-8 w-8 text-white" />
+            </div>
+            <span className="font-medium text-white">{action.label}</span>
+          </button>
+        )
+      })}
+    </div>
+  )
+}
diff --git a/components/dashboard/RecentActivity.tsx b/components/dashboard/RecentActivity.tsx
new file mode 100644
index 0000000..993f1ec
--- /dev/null
+++ b/components/dashboard/RecentActivity.tsx
@@ -0,0 +1,168 @@
+'use client'
+
+import { ArrowDownLeft, ArrowUpRight, CreditCard, Wallet } from 'lucide-react'
+import { useFinanzasStore } from '@/lib/store'
+import { formatCurrency, formatShortDate } from '@/lib/utils'
+import { cn } from '@/lib/utils'
+
+interface RecentActivityProps {
+  limit?: number
+}
+
+interface ActivityItem {
+  id: string
+  type: 'fixed_debt' | 'variable_debt' | 'card_payment'
+  title: string
+  amount: number
+  date: string
+  description?: string
+}
+
+export function RecentActivity({ limit = 5 }: RecentActivityProps) {
+  const { fixedDebts, variableDebts, cardPayments, creditCards } =
+    useFinanzasStore()
+
+  // Combinar todas las actividades
+  const activities: ActivityItem[] = [
+    // Deudas fijas recientes
+    ...fixedDebts.slice(0, limit).map((debt) => ({
+      id: debt.id,
+      type: 'fixed_debt' as const,
+      title: debt.name,
+      amount: debt.amount,
+      date: new Date().toISOString(), // Usar fecha actual ya que fixedDebt no tiene fecha de creación
+      description: `Vence el día ${debt.dueDay}`,
+    })),
+
+    // Deudas variables recientes
+    ...variableDebts.slice(0, limit).map((debt) => ({
+      id: debt.id,
+      type: 'variable_debt' as const,
+      title: debt.name,
+      amount: debt.amount,
+      date: debt.date,
+      description: debt.notes,
+    })),
+
+    // Pagos de tarjetas recientes
+    ...cardPayments.slice(0, limit).map((payment) => {
+      const card = creditCards.find((c) => c.id === payment.cardId)
+      return {
+        id: payment.id,
+        type: 'card_payment' as const,
+        title: `Pago - ${card?.name || 'Tarjeta'}`,
+        amount: payment.amount,
+        date: payment.date,
+        description: payment.description,
+      }
+    }),
+  ]
+
+  // Ordenar por fecha (más recientes primero)
+  const sortedActivities = activities
+    .sort(
+      (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
+    )
+    .slice(0, limit)
+
+  // Configuración por tipo de actividad
+  const activityConfig = {
+    fixed_debt: {
+      icon: Wallet,
+      label: 'Deuda Fija',
+      color: 'text-amber-400',
+      bgColor: 'bg-amber-400/10',
+    },
+    variable_debt: {
+      icon: ArrowUpRight,
+      label: 'Gasto',
+      color: 'text-rose-400',
+      bgColor: 'bg-rose-400/10',
+    },
+    card_payment: {
+      icon: CreditCard,
+      label: 'Pago Tarjeta',
+      color: 'text-blue-400',
+      bgColor: 'bg-blue-400/10',
+    },
+  }
+
+  if (sortedActivities.length === 0) {
+    return (
+      <div className="rounded-xl border border-slate-700 bg-slate-800 p-6">
+        <h3 className="mb-4 text-lg font-semibold text-white">
+          Actividad Reciente
+        </h3>
+        <div className="flex h-32 items-center justify-center">
+          <p className="text-slate-500">No hay actividad reciente</p>
+        </div>
+      </div>
+    )
+  }
+
+  return (
+    <div className="rounded-xl border border-slate-700 bg-slate-800 p-6">
+      <h3 className="mb-4 text-lg font-semibold text-white">
+        Actividad Reciente
+      </h3>
+
+      <div className="space-y-3">
+        {sortedActivities.map((activity) => {
+          const config = activityConfig[activity.type]
+          const Icon = config.icon
+
+          return (
+            <div
+              key={activity.id}
+              className="flex items-center gap-4 rounded-lg border border-slate-700/50 bg-slate-700/30 p-4 transition-colors hover:bg-slate-700/50"
+            >
+              {/* Icono */}
+              <div
+                className={cn(
+                  'flex h-10 w-10 items-center justify-center rounded-full',
+                  config.bgColor
+                )}
+              >
+                <Icon className={cn('h-5 w-5', config.color)} />
+              </div>
+
+              {/* Contenido */}
+              <div className="flex-1 min-w-0">
+                <div className="flex items-center justify-between gap-2">
+                  <h4 className="truncate font-medium text-white">
+                    {activity.title}
+                  </h4>
+                  <span
+                    className={cn(
+                      'shrink-0 font-mono font-medium',
+                      activity.type === 'card_payment'
+                        ? 'text-emerald-400'
+                        : 'text-rose-400'
+                    )}
+                  >
+                    {activity.type === 'card_payment' ? '+' : '-'}
+                    {formatCurrency(activity.amount)}
+                  </span>
+                </div>
+
+                <div className="mt-1 flex items-center gap-2 text-sm text-slate-400">
+                  <span className={cn('text-xs', config.color)}>
+                    {config.label}
+                  </span>
+                  <span>•</span>
+                  <span>{formatShortDate(activity.date)}</span>
+                  {activity.description && (
+                    <>
+                      <span>•</span>
+                      <span className="truncate">{activity.description}</span>
+                    </>
+                  )}
+                </div>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
+}
diff --git a/components/dashboard/SummarySection.tsx b/components/dashboard/SummarySection.tsx
new file mode 100644
index 0000000..bbd275c
--- /dev/null
+++ b/components/dashboard/SummarySection.tsx
@@ -0,0 +1,156 @@
+'use client'
+
+import { AlertCircle, CreditCard, PiggyBank, Wallet } from 'lucide-react'
+import { MetricCard } from './MetricCard'
+import { ExpenseChart } from './ExpenseChart'
+import { useFinanzasStore } from '@/lib/store'
+import {
+  calculateTotalFixedDebts,
+  calculateTotalVariableDebts,
+} from '@/lib/utils'
+import {
+  getCurrentMonthBudget,
+  calculateCurrentSpending,
+} from '@/lib/alerts'
+import { cn } from '@/lib/utils'
+
+export function SummarySection() {
+  const {
+    fixedDebts,
+    variableDebts,
+    creditCards,
+    monthlyBudgets,
+    alerts,
+    currentMonth,
+    currentYear,
+  } = useFinanzasStore()
+
+  // Calcular métricas
+  const totalFixedDebts = calculateTotalFixedDebts(fixedDebts)
+  const totalVariableDebts = calculateTotalVariableDebts(variableDebts)
+  const totalPendingDebts = totalFixedDebts + totalVariableDebts
+
+  const totalCardBalance = creditCards.reduce(
+    (sum, card) => sum + card.currentBalance,
+    0
+  )
+
+  const currentBudget = getCurrentMonthBudget(
+    monthlyBudgets,
+    currentMonth,
+    currentYear
+  )
+
+  const currentSpending = calculateCurrentSpending(fixedDebts, variableDebts)
+
+  // Presupuesto disponible (ingresos - gastos actuales)
+  const availableBudget = currentBudget
+    ? currentBudget.totalIncome - currentSpending
+    : 0
+
+  // Meta de ahorro proyectada
+  const projectedSavings = currentBudget
+    ? currentBudget.totalIncome - currentSpending
+    : 0
+
+  const savingsGoal = currentBudget?.savingsGoal || 0
+
+  // Alertas no leídas (primeras 3)
+  const unreadAlerts = alerts
+    .filter((alert) => !alert.isRead)
+    .slice(0, 3)
+
+  // Colores por severidad de alerta
+  const severityColors = {
+    danger: 'border-rose-500 bg-rose-500/10 text-rose-400',
+    warning: 'border-amber-500 bg-amber-500/10 text-amber-400',
+    info: 'border-blue-500 bg-blue-500/10 text-blue-400',
+  }
+
+  return (
+    <div className="space-y-6">
+      {/* Grid de métricas */}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
+        <MetricCard
+          title="Deudas Pendientes"
+          amount={totalPendingDebts}
+          subtitle={`${fixedDebts.filter((d) => !d.isPaid).length + variableDebts.filter((d) => !d.isPaid).length} pagos pendientes`}
+          icon={Wallet}
+          color="text-rose-400"
+        />
+
+        <MetricCard
+          title="Balance en Tarjetas"
+          amount={totalCardBalance}
+          subtitle={`${creditCards.length} tarjetas activas`}
+          icon={CreditCard}
+          color="text-blue-400"
+        />
+
+        <MetricCard
+          title="Presupuesto Disponible"
+          amount={availableBudget}
+          subtitle={
+            currentBudget
+              ? `de ${currentBudget.totalIncome.toLocaleString('es-AR', {
+                  style: 'currency',
+                  currency: 'ARS',
+                })} ingresos`
+              : 'Sin presupuesto definido'
+          }
+          icon={PiggyBank}
+          color="text-emerald-400"
+        />
+
+        <MetricCard
+          title="Meta de Ahorro"
+          amount={projectedSavings}
+          subtitle={
+            savingsGoal > 0
+              ? `${((projectedSavings / savingsGoal) * 100).toFixed(0)}% de la meta`
+              : 'Sin meta definida'
+          }
+          icon={PiggyBank}
+          color="text-violet-400"
+        />
+      </div>
+
+      {/* Gráfico y alertas */}
+      <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+        {/* Gráfico de distribución */}
+        <ExpenseChart fixedDebts={fixedDebts} variableDebts={variableDebts} />
+
+        {/* Alertas destacadas */}
+        <div className="rounded-xl border border-slate-700 bg-slate-800 p-6">
+          <h3 className="mb-4 text-lg font-semibold text-white">
+            Alertas Destacadas
+          </h3>
+
+          {unreadAlerts.length === 0 ? (
+            <div className="flex h-48 items-center justify-center">
+              <p className="text-slate-500">No hay alertas pendientes</p>
+            </div>
+          ) : (
+            <div className="space-y-3">
+              {unreadAlerts.map((alert) => (
+                <div
+                  key={alert.id}
+                  className={cn(
+                    'flex items-start gap-3 rounded-lg border p-4',
+                    severityColors[alert.severity]
+                  )}
+                >
+                  <AlertCircle className="mt-0.5 h-5 w-5 shrink-0" />
+                  <div>
+                    <h4 className="font-medium">{alert.title}</h4>
+                    <p className="mt-1 text-sm opacity-90">{alert.message}</p>
+                  </div>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/dashboard/index.ts b/components/dashboard/index.ts
new file mode 100644
index 0000000..8d1e0ca
--- /dev/null
+++ b/components/dashboard/index.ts
@@ -0,0 +1,6 @@
+export { MetricCard } from './MetricCard'
+export { DashboardHeader } from './DashboardHeader'
+export { ExpenseChart } from './ExpenseChart'
+export { QuickActions } from './QuickActions'
+export { SummarySection } from './SummarySection'
+export { RecentActivity } from './RecentActivity'
diff --git a/components/debts/DebtCard.tsx b/components/debts/DebtCard.tsx
new file mode 100644
index 0000000..2a1ce60
--- /dev/null
+++ b/components/debts/DebtCard.tsx
@@ -0,0 +1,140 @@
+'use client'
+
+import { FixedDebt, VariableDebt } from '@/lib/types'
+import { formatCurrency, formatShortDate } from '@/lib/utils'
+import { cn } from '@/lib/utils'
+import { Pencil, Trash2, Check } from 'lucide-react'
+
+interface DebtCardProps {
+  debt: FixedDebt | VariableDebt
+  type: 'fixed' | 'variable'
+  onTogglePaid: () => void
+  onEdit: () => void
+  onDelete: () => void
+}
+
+const fixedCategoryColors: Record<string, string> = {
+  housing: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
+  services: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
+  subscription: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
+  other: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
+}
+
+const variableCategoryColors: Record<string, string> = {
+  shopping: 'bg-pink-500/20 text-pink-400 border-pink-500/30',
+  food: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
+  entertainment: 'bg-indigo-500/20 text-indigo-400 border-indigo-500/30',
+  health: 'bg-red-500/20 text-red-400 border-red-500/30',
+  transport: 'bg-cyan-500/20 text-cyan-400 border-cyan-500/30',
+  other: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
+}
+
+const categoryLabels: Record<string, string> = {
+  housing: 'Vivienda',
+  services: 'Servicios',
+  subscription: 'Suscripción',
+  shopping: 'Compras',
+  food: 'Comida',
+  entertainment: 'Entretenimiento',
+  health: 'Salud',
+  transport: 'Transporte',
+  other: 'Otro',
+}
+
+export function DebtCard({ debt, type, onTogglePaid, onEdit, onDelete }: DebtCardProps) {
+  const isFixed = type === 'fixed'
+  const categoryColors = isFixed ? fixedCategoryColors : variableCategoryColors
+  const categoryColor = categoryColors[debt.category] || categoryColors.other
+
+  const getDueInfo = () => {
+    if (isFixed) {
+      const fixedDebt = debt as FixedDebt
+      return `Vence día ${fixedDebt.dueDay}`
+    } else {
+      const variableDebt = debt as VariableDebt
+      return formatShortDate(variableDebt.date)
+    }
+  }
+
+  return (
+    <div
+      className={cn(
+        'group relative bg-slate-800 border border-slate-700/50 rounded-lg p-4',
+        'transition-all duration-200 hover:border-slate-600',
+        debt.isPaid && 'opacity-60'
+      )}
+    >
+      <div className="flex items-start gap-3">
+        {/* Checkbox */}
+        <button
+          onClick={onTogglePaid}
+          className={cn(
+            'mt-1 w-5 h-5 rounded border-2 flex items-center justify-center',
+            'transition-colors duration-200',
+            debt.isPaid
+              ? 'bg-emerald-500 border-emerald-500'
+              : 'border-slate-500 hover:border-emerald-400'
+          )}
+          aria-label={debt.isPaid ? 'Marcar como no pagada' : 'Marcar como pagada'}
+        >
+          {debt.isPaid && <Check className="w-3 h-3 text-white" />}
+        </button>
+
+        {/* Content */}
+        <div className="flex-1 min-w-0">
+          <div className="flex items-start justify-between gap-2">
+            <div>
+              <h3
+                className={cn(
+                  'text-white font-medium truncate',
+                  debt.isPaid && 'line-through text-slate-400'
+                )}
+              >
+                {debt.name}
+              </h3>
+              <p className="text-slate-400 text-sm mt-0.5">{getDueInfo()}</p>
+            </div>
+            <span className="font-mono text-emerald-400 font-semibold whitespace-nowrap">
+              {formatCurrency(debt.amount)}
+            </span>
+          </div>
+
+          <div className="flex items-center justify-between mt-3">
+            <span
+              className={cn(
+                'inline-flex items-center px-2 py-0.5 rounded text-xs font-medium border',
+                categoryColor
+              )}
+            >
+              {categoryLabels[debt.category] || debt.category}
+            </span>
+
+            {isFixed && (debt as FixedDebt).isAutoDebit && (
+              <span className="text-xs text-slate-500">
+                Débito automático
+              </span>
+            )}
+          </div>
+        </div>
+
+        {/* Actions */}
+        <div className="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+          <button
+            onClick={onEdit}
+            className="p-1.5 text-slate-400 hover:text-blue-400 hover:bg-blue-500/10 rounded transition-colors"
+            aria-label="Editar"
+          >
+            <Pencil className="w-4 h-4" />
+          </button>
+          <button
+            onClick={onDelete}
+            className="p-1.5 text-slate-400 hover:text-red-400 hover:bg-red-500/10 rounded transition-colors"
+            aria-label="Eliminar"
+          >
+            <Trash2 className="w-4 h-4" />
+          </button>
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/components/debts/DebtSection.tsx b/components/debts/DebtSection.tsx
new file mode 100644
index 0000000..921bcb8
--- /dev/null
+++ b/components/debts/DebtSection.tsx
@@ -0,0 +1,224 @@
+'use client'
+
+import { useState } from 'react'
+import { useFinanzasStore } from '@/lib/store'
+import { FixedDebt, VariableDebt } from '@/lib/types'
+import { DebtCard } from './DebtCard'
+import { FixedDebtForm } from './FixedDebtForm'
+import { VariableDebtForm } from './VariableDebtForm'
+import { Plus, Wallet } from 'lucide-react'
+import { cn, formatCurrency, calculateTotalFixedDebts, calculateTotalVariableDebts } from '@/lib/utils'
+
+type DebtType = 'fixed' | 'variable'
+
+export function DebtSection() {
+  const [activeTab, setActiveTab] = useState<DebtType>('fixed')
+  const [isModalOpen, setIsModalOpen] = useState(false)
+  const [editingDebt, setEditingDebt] = useState<FixedDebt | VariableDebt | null>(null)
+
+  const {
+    fixedDebts,
+    variableDebts,
+    addFixedDebt,
+    updateFixedDebt,
+    deleteFixedDebt,
+    toggleFixedDebtPaid,
+    addVariableDebt,
+    updateVariableDebt,
+    deleteVariableDebt,
+    toggleVariableDebtPaid,
+  } = useFinanzasStore()
+
+  const currentDebts = activeTab === 'fixed' ? fixedDebts : variableDebts
+  const totalUnpaid = activeTab === 'fixed'
+    ? calculateTotalFixedDebts(fixedDebts)
+    : calculateTotalVariableDebts(variableDebts)
+
+  const handleAdd = () => {
+    setEditingDebt(null)
+    setIsModalOpen(true)
+  }
+
+  const handleEdit = (debt: FixedDebt | VariableDebt) => {
+    setEditingDebt(debt)
+    setIsModalOpen(true)
+  }
+
+  const handleCloseModal = () => {
+    setIsModalOpen(false)
+    setEditingDebt(null)
+  }
+
+  const handleSubmitFixed = (data: Omit<FixedDebt, 'id' | 'isPaid'>) => {
+    if (editingDebt?.id) {
+      updateFixedDebt(editingDebt.id, data)
+    } else {
+      addFixedDebt({ ...data, isPaid: false })
+    }
+    handleCloseModal()
+  }
+
+  const handleSubmitVariable = (data: Omit<VariableDebt, 'id' | 'isPaid'>) => {
+    if (editingDebt?.id) {
+      updateVariableDebt(editingDebt.id, data)
+    } else {
+      addVariableDebt({ ...data, isPaid: false })
+    }
+    handleCloseModal()
+  }
+
+  const handleDelete = (debt: FixedDebt | VariableDebt) => {
+    if (confirm('¿Estás seguro de que deseas eliminar esta deuda?')) {
+      if (activeTab === 'fixed') {
+        deleteFixedDebt(debt.id)
+      } else {
+        deleteVariableDebt(debt.id)
+      }
+    }
+  }
+
+  const handleTogglePaid = (debt: FixedDebt | VariableDebt) => {
+    if (activeTab === 'fixed') {
+      toggleFixedDebtPaid(debt.id)
+    } else {
+      toggleVariableDebtPaid(debt.id)
+    }
+  }
+
+  const paidCount = currentDebts.filter(d => d.isPaid).length
+  const unpaidCount = currentDebts.filter(d => !d.isPaid).length
+
+  return (
+    <div className="bg-slate-900 min-h-screen p-6">
+      <div className="max-w-4xl mx-auto">
+        {/* Header */}
+        <div className="flex items-center justify-between mb-6">
+          <div>
+            <h1 className="text-2xl font-bold text-white">Deudas</h1>
+            <p className="text-slate-400 text-sm mt-1">
+              Gestiona tus gastos fijos y variables
+            </p>
+          </div>
+          <button
+            onClick={handleAdd}
+            className={cn(
+              'flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium',
+              'hover:bg-blue-500 transition-colors'
+            )}
+          >
+            <Plus className="w-4 h-4" />
+            Agregar
+          </button>
+        </div>
+
+        {/* Summary Cards */}
+        <div className="grid grid-cols-3 gap-4 mb-6">
+          <div className="bg-slate-800 border border-slate-700/50 rounded-lg p-4">
+            <p className="text-slate-400 text-sm">Total pendiente</p>
+            <p className="text-xl font-mono font-semibold text-emerald-400 mt-1">
+              {formatCurrency(totalUnpaid)}
+            </p>
+          </div>
+          <div className="bg-slate-800 border border-slate-700/50 rounded-lg p-4">
+            <p className="text-slate-400 text-sm">Pagadas</p>
+            <p className="text-xl font-semibold text-blue-400 mt-1">
+              {paidCount}
+            </p>
+          </div>
+          <div className="bg-slate-800 border border-slate-700/50 rounded-lg p-4">
+            <p className="text-slate-400 text-sm">Pendientes</p>
+            <p className="text-xl font-semibold text-orange-400 mt-1">
+              {unpaidCount}
+            </p>
+          </div>
+        </div>
+
+        {/* Tabs */}
+        <div className="flex gap-2 mb-6">
+          <button
+            onClick={() => setActiveTab('fixed')}
+            className={cn(
+              'px-4 py-2 rounded-lg font-medium transition-colors',
+              activeTab === 'fixed'
+                ? 'bg-blue-600 text-white'
+                : 'bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-white'
+            )}
+          >
+            Fijas ({fixedDebts.length})
+          </button>
+          <button
+            onClick={() => setActiveTab('variable')}
+            className={cn(
+              'px-4 py-2 rounded-lg font-medium transition-colors',
+              activeTab === 'variable'
+                ? 'bg-blue-600 text-white'
+                : 'bg-slate-800 text-slate-400 hover:bg-slate-700 hover:text-white'
+            )}
+          >
+            Variables ({variableDebts.length})
+          </button>
+        </div>
+
+        {/* Debt List */}
+        <div className="space-y-3">
+          {currentDebts.length === 0 ? (
+            <div className="text-center py-16 bg-slate-800/50 border border-slate-700/50 rounded-lg">
+              <Wallet className="w-12 h-12 text-slate-600 mx-auto mb-4" />
+              <h3 className="text-lg font-medium text-slate-300">
+                No hay deudas {activeTab === 'fixed' ? 'fijas' : 'variables'}
+              </h3>
+              <p className="text-slate-500 mt-2">
+                Haz clic en "Agregar" para crear una nueva deuda
+              </p>
+            </div>
+          ) : (
+            currentDebts.map((debt) => (
+              <DebtCard
+                key={debt.id}
+                debt={debt}
+                type={activeTab}
+                onTogglePaid={() => handleTogglePaid(debt)}
+                onEdit={() => handleEdit(debt)}
+                onDelete={() => handleDelete(debt)}
+              />
+            ))
+          )}
+        </div>
+      </div>
+
+      {/* Modal */}
+      {isModalOpen && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+          <div
+            className="absolute inset-0 bg-black/60 backdrop-blur-sm"
+            onClick={handleCloseModal}
+          />
+          <div className="relative bg-slate-900 border border-slate-700 rounded-xl shadow-2xl w-full max-w-md max-h-[90vh] overflow-y-auto">
+            <div className="p-6">
+              <h2 className="text-xl font-bold text-white mb-4">
+                {editingDebt
+                  ? 'Editar deuda'
+                  : activeTab === 'fixed'
+                  ? 'Nueva deuda fija'
+                  : 'Nueva deuda variable'}
+              </h2>
+              {activeTab === 'fixed' ? (
+                <FixedDebtForm
+                  initialData={editingDebt as Partial<FixedDebt> | undefined}
+                  onSubmit={handleSubmitFixed}
+                  onCancel={handleCloseModal}
+                />
+              ) : (
+                <VariableDebtForm
+                  initialData={editingDebt as Partial<VariableDebt> | undefined}
+                  onSubmit={handleSubmitVariable}
+                  onCancel={handleCloseModal}
+                />
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/components/debts/FixedDebtForm.tsx b/components/debts/FixedDebtForm.tsx
new file mode 100644
index 0000000..a2be6ce
--- /dev/null
+++ b/components/debts/FixedDebtForm.tsx
@@ -0,0 +1,212 @@
+'use client'
+
+import { useState } from 'react'
+import { FixedDebt } from '@/lib/types'
+import { cn } from '@/lib/utils'
+
+interface FixedDebtFormProps {
+  initialData?: Partial<FixedDebt>
+  onSubmit: (data: Omit<FixedDebt, 'id' | 'isPaid'>) => void
+  onCancel: () => void
+}
+
+const categories = [
+  { value: 'housing', label: 'Vivienda' },
+  { value: 'services', label: 'Servicios' },
+  { value: 'subscription', label: 'Suscripción' },
+  { value: 'other', label: 'Otro' },
+] as const
+
+export function FixedDebtForm({ initialData, onSubmit, onCancel }: FixedDebtFormProps) {
+  const [formData, setFormData] = useState({
+    name: initialData?.name || '',
+    amount: initialData?.amount || 0,
+    dueDay: initialData?.dueDay || 1,
+    category: initialData?.category || 'other',
+    isAutoDebit: initialData?.isAutoDebit || false,
+    notes: initialData?.notes || '',
+  })
+
+  const [errors, setErrors] = useState<Record<string, string>>({})
+
+  const validate = (): boolean => {
+    const newErrors: Record<string, string> = {}
+
+    if (!formData.name.trim()) {
+      newErrors.name = 'El nombre es requerido'
+    }
+
+    if (formData.amount <= 0) {
+      newErrors.amount = 'El monto debe ser mayor a 0'
+    }
+
+    if (formData.dueDay < 1 || formData.dueDay > 31) {
+      newErrors.dueDay = 'El día debe estar entre 1 y 31'
+    }
+
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (validate()) {
+      onSubmit(formData)
+    }
+  }
+
+  const updateField = <K extends keyof typeof formData>(
+    field: K,
+    value: typeof formData[K]
+  ) => {
+    setFormData((prev) => ({ ...prev, [field]: value }))
+    if (errors[field]) {
+      setErrors((prev) => {
+        const newErrors = { ...prev }
+        delete newErrors[field]
+        return newErrors
+      })
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <label htmlFor="name" className="block text-sm font-medium text-slate-300 mb-1">
+          Nombre <span className="text-red-400">*</span>
+        </label>
+        <input
+          type="text"
+          id="name"
+          value={formData.name}
+          onChange={(e) => updateField('name', e.target.value)}
+          className={cn(
+            'w-full px-3 py-2 bg-slate-800 border rounded-lg text-white placeholder-slate-500',
+            'focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500',
+            errors.name ? 'border-red-500' : 'border-slate-600'
+          )}
+          placeholder="Ej: Alquiler, Internet, etc."
+        />
+        {errors.name && <p className="mt-1 text-sm text-red-400">{errors.name}</p>}
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label htmlFor="amount" className="block text-sm font-medium text-slate-300 mb-1">
+            Monto <span className="text-red-400">*</span>
+          </label>
+          <input
+            type="number"
+            id="amount"
+            min="0"
+            step="0.01"
+            value={formData.amount || ''}
+            onChange={(e) => updateField('amount', parseFloat(e.target.value) || 0)}
+            className={cn(
+              'w-full px-3 py-2 bg-slate-800 border rounded-lg text-white placeholder-slate-500',
+              'focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500',
+              errors.amount ? 'border-red-500' : 'border-slate-600'
+            )}
+            placeholder="0.00"
+          />
+          {errors.amount && <p className="mt-1 text-sm text-red-400">{errors.amount}</p>}
+        </div>
+
+        <div>
+          <label htmlFor="dueDay" className="block text-sm font-medium text-slate-300 mb-1">
+            Día de vencimiento <span className="text-red-400">*</span>
+          </label>
+          <input
+            type="number"
+            id="dueDay"
+            min="1"
+            max="31"
+            value={formData.dueDay}
+            onChange={(e) => updateField('dueDay', parseInt(e.target.value) || 1)}
+            className={cn(
+              'w-full px-3 py-2 bg-slate-800 border rounded-lg text-white placeholder-slate-500',
+              'focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500',
+              errors.dueDay ? 'border-red-500' : 'border-slate-600'
+            )}
+            placeholder="1"
+          />
+          {errors.dueDay && <p className="mt-1 text-sm text-red-400">{errors.dueDay}</p>}
+        </div>
+      </div>
+
+      <div>
+        <label htmlFor="category" className="block text-sm font-medium text-slate-300 mb-1">
+          Categoría
+        </label>
+        <select
+          id="category"
+          value={formData.category}
+          onChange={(e) => updateField('category', e.target.value as FixedDebt['category'])}
+          className={cn(
+            'w-full px-3 py-2 bg-slate-800 border border-slate-600 rounded-lg text-white',
+            'focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500'
+          )}
+        >
+          {categories.map((cat) => (
+            <option key={cat.value} value={cat.value}>
+              {cat.label}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div className="flex items-center gap-2">
+        <input
+          type="checkbox"
+          id="isAutoDebit"
+          checked={formData.isAutoDebit}
+          onChange={(e) => updateField('isAutoDebit', e.target.checked)}
+          className="w-4 h-4 rounded border-slate-600 bg-slate-800 text-blue-500 focus:ring-blue-500/50"
+        />
+        <label htmlFor="isAutoDebit" className="text-sm text-slate-300">
+          Tiene débito automático
+        </label>
+      </div>
+
+      <div>
+        <label htmlFor="notes" className="block text-sm font-medium text-slate-300 mb-1">
+          Notas <span className="text-slate-500">(opcional)</span>
+        </label>
+        <textarea
+          id="notes"
+          rows={3}
+          value={formData.notes}
+          onChange={(e) => updateField('notes', e.target.value)}
+          className={cn(
+            'w-full px-3 py-2 bg-slate-800 border border-slate-600 rounded-lg text-white placeholder-slate-500',
+            'focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500',
+            'resize-none'
+          )}
+          placeholder="Notas adicionales..."
+        />
+      </div>
+
+      <div className="flex gap-3 pt-2">
+        <button
+          type="button"
+          onClick={onCancel}
+          className={cn(
+            'flex-1 px-4 py-2 bg-slate-700 text-slate-200 rounded-lg font-medium',
+            'hover:bg-slate-600 transition-colors'
+          )}
+        >
+          Cancelar
+        </button>
+        <button
+          type="submit"
+          className={cn(
+            'flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium',
+            'hover:bg-blue-500 transition-colors'
+          )}
+        >
+          {initialData?.id ? 'Guardar cambios' : 'Agregar deuda'}
+        </button>
+      </div>
+    </form>
+  )
+}
diff --git a/components/debts/VariableDebtForm.tsx b/components/debts/VariableDebtForm.tsx
new file mode 100644
index 0000000..22975f8
--- /dev/null
+++ b/components/debts/VariableDebtForm.tsx
@@ -0,0 +1,197 @@
+'use client'
+
+import { useState } from 'react'
+import { VariableDebt } from '@/lib/types'
+import { cn } from '@/lib/utils'
+
+interface VariableDebtFormProps {
+  initialData?: Partial<VariableDebt>
+  onSubmit: (data: Omit<VariableDebt, 'id' | 'isPaid'>) => void
+  onCancel: () => void
+}
+
+const categories = [
+  { value: 'shopping', label: 'Compras' },
+  { value: 'food', label: 'Comida' },
+  { value: 'entertainment', label: 'Entretenimiento' },
+  { value: 'health', label: 'Salud' },
+  { value: 'transport', label: 'Transporte' },
+  { value: 'other', label: 'Otro' },
+] as const
+
+export function VariableDebtForm({ initialData, onSubmit, onCancel }: VariableDebtFormProps) {
+  const [formData, setFormData] = useState({
+    name: initialData?.name || '',
+    amount: initialData?.amount || 0,
+    date: initialData?.date || new Date().toISOString().split('T')[0],
+    category: initialData?.category || 'other',
+    notes: initialData?.notes || '',
+  })
+
+  const [errors, setErrors] = useState<Record<string, string>>({})
+
+  const validate = (): boolean => {
+    const newErrors: Record<string, string> = {}
+
+    if (!formData.name.trim()) {
+      newErrors.name = 'El nombre es requerido'
+    }
+
+    if (formData.amount <= 0) {
+      newErrors.amount = 'El monto debe ser mayor a 0'
+    }
+
+    if (!formData.date) {
+      newErrors.date = 'La fecha es requerida'
+    }
+
+    setErrors(newErrors)
+    return Object.keys(newErrors).length === 0
+  }
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault()
+    if (validate()) {
+      onSubmit(formData)
+    }
+  }
+
+  const updateField = <K extends keyof typeof formData>(
+    field: K,
+    value: typeof formData[K]
+  ) => {
+    setFormData((prev) => ({ ...prev, [field]: value }))
+    if (errors[field]) {
+      setErrors((prev) => {
+        const newErrors = { ...prev }
+        delete newErrors[field]
+        return newErrors
+      })
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="space-y-4">
+      <div>
+        <label htmlFor="name" className="block text-sm font-medium text-slate-300 mb-1">
+          Nombre <span className="text-red-400">*</span>
+        </label>
+        <input
+          type="text"
+          id="name"
+          value={formData.name}
+          onChange={(e) => updateField('name', e.target.value)}
+          className={cn(
+            'w-full px-3 py-2 bg-slate-800 border rounded-lg text-white placeholder-slate-500',
+            'focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500',
+            errors.name ? 'border-red-500' : 'border-slate-600'
+          )}
+          placeholder="Ej: Supermercado, Cena, etc."
+        />
+        {errors.name && <p className="mt-1 text-sm text-red-400">{errors.name}</p>}
+      </div>
+
+      <div className="grid grid-cols-2 gap-4">
+        <div>
+          <label htmlFor="amount" className="block text-sm font-medium text-slate-300 mb-1">
+            Monto <span className="text-red-400">*</span>
+          </label>
+          <input
+            type="number"
+            id="amount"
+            min="0"
+            step="0.01"
+            value={formData.amount || ''}
+            onChange={(e) => updateField('amount', parseFloat(e.target.value) || 0)}
+            className={cn(
+              'w-full px-3 py-2 bg-slate-800 border rounded-lg text-white placeholder-slate-500',
+              'focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500',
+              errors.amount ? 'border-red-500' : 'border-slate-600'
+            )}
+            placeholder="0.00"
+          />
+          {errors.amount && <p className="mt-1 text-sm text-red-400">{errors.amount}</p>}
+        </div>
+
+        <div>
+          <label htmlFor="date" className="block text-sm font-medium text-slate-300 mb-1">
+            Fecha <span className="text-red-400">*</span>
+          </label>
+          <input
+            type="date"
+            id="date"
+            value={formData.date}
+            onChange={(e) => updateField('date', e.target.value)}
+            className={cn(
+              'w-full px-3 py-2 bg-slate-800 border rounded-lg text-white',
+              'focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500',
+              errors.date ? 'border-red-500' : 'border-slate-600'
+            )}
+          />
+          {errors.date && <p className="mt-1 text-sm text-red-400">{errors.date}</p>}
+        </div>
+      </div>
+
+      <div>
+        <label htmlFor="category" className="block text-sm font-medium text-slate-300 mb-1">
+          Categoría
+        </label>
+        <select
+          id="category"
+          value={formData.category}
+          onChange={(e) => updateField('category', e.target.value as VariableDebt['category'])}
+          className={cn(
+            'w-full px-3 py-2 bg-slate-800 border border-slate-600 rounded-lg text-white',
+            'focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500'
+          )}
+        >
+          {categories.map((cat) => (
+            <option key={cat.value} value={cat.value}>
+              {cat.label}
+            </option>
+          ))}
+        </select>
+      </div>
+
+      <div>
+        <label htmlFor="notes" className="block text-sm font-medium text-slate-300 mb-1">
+          Notas <span className="text-slate-500">(opcional)</span>
+        </label>
+        <textarea
+          id="notes"
+          rows={3}
+          value={formData.notes}
+          onChange={(e) => updateField('notes', e.target.value)}
+          className={cn(
+            'w-full px-3 py-2 bg-slate-800 border border-slate-600 rounded-lg text-white placeholder-slate-500',
+            'focus:outline-none focus:ring-2 focus:ring-blue-500/50 focus:border-blue-500',
+            'resize-none'
+          )}
+          placeholder="Notas adicionales..."
+        />
+      </div>
+
+      <div className="flex gap-3 pt-2">
+        <button
+          type="button"
+          onClick={onCancel}
+          className={cn(
+            'flex-1 px-4 py-2 bg-slate-700 text-slate-200 rounded-lg font-medium',
+            'hover:bg-slate-600 transition-colors'
+          )}
+        >
+          Cancelar
+        </button>
+        <button
+          type="submit"
+          className={cn(
+            'flex-1 px-4 py-2 bg-blue-600 text-white rounded-lg font-medium',
+            'hover:bg-blue-500 transition-colors'
+          )}
+        >
+          {initialData?.id ? 'Guardar cambios' : 'Agregar deuda'}
+        </button>
+      </div>
+    </form>
+  )
+}
diff --git a/components/debts/index.ts b/components/debts/index.ts
new file mode 100644
index 0000000..1d48fce
--- /dev/null
+++ b/components/debts/index.ts
@@ -0,0 +1,4 @@
+export { DebtCard } from './DebtCard';
+export { DebtSection } from './DebtSection';
+export { FixedDebtForm } from './FixedDebtForm';
+export { VariableDebtForm } from './VariableDebtForm';
diff --git a/components/layout/Header.tsx b/components/layout/Header.tsx
new file mode 100644
index 0000000..e2b83ed
--- /dev/null
+++ b/components/layout/Header.tsx
@@ -0,0 +1,57 @@
+'use client';
+
+import { Menu } from 'lucide-react';
+import { format } from 'date-fns';
+import { es } from 'date-fns/locale';
+import { Logo } from './Logo';
+
+interface HeaderProps {
+  onMenuClick: () => void;
+  title: string;
+}
+
+export function Header({ onMenuClick, title }: HeaderProps) {
+  const currentDate = format(new Date(), "EEEE, d 'de' MMMM 'de' yyyy", {
+    locale: es,
+  });
+
+  // Capitalizar primera letra
+  const formattedDate =
+    currentDate.charAt(0).toUpperCase() + currentDate.slice(1);
+
+  return (
+    <header className="sticky top-0 z-30 bg-slate-900/95 backdrop-blur-sm border-b border-slate-800">
+      <div className="flex items-center justify-between h-16 px-4 md:px-6">
+        {/* Left section */}
+        <div className="flex items-center gap-4">
+          <button
+            onClick={onMenuClick}
+            className="lg:hidden p-2 -ml-2 text-slate-400 hover:text-slate-200 hover:bg-slate-800 rounded-lg transition-colors"
+            aria-label="Abrir menú"
+          >
+            <Menu className="w-6 h-6" />
+          </button>
+
+          <div className="flex items-center gap-3">
+            <div className="lg:hidden">
+              <Logo size="sm" showText={false} />
+            </div>
+            <h1 className="text-lg md:text-xl font-semibold text-slate-100">
+              {title}
+            </h1>
+          </div>
+        </div>
+
+        {/* Right section */}
+        <div className="flex items-center gap-4">
+          <div className="hidden md:flex items-center gap-2">
+            <Logo size="sm" showText />
+          </div>
+          <time className="text-sm text-slate-400 hidden sm:block">
+            {formattedDate}
+          </time>
+        </div>
+      </div>
+    </header>
+  );
+}
diff --git a/components/layout/Logo.tsx b/components/layout/Logo.tsx
new file mode 100644
index 0000000..df05548
--- /dev/null
+++ b/components/layout/Logo.tsx
@@ -0,0 +1,36 @@
+import { Wallet } from 'lucide-react';
+
+interface LogoProps {
+  size?: 'sm' | 'md' | 'lg';
+  showText?: boolean;
+}
+
+const sizeMap = {
+  sm: {
+    icon: 24,
+    text: 'text-lg',
+  },
+  md: {
+    icon: 32,
+    text: 'text-xl',
+  },
+  lg: {
+    icon: 40,
+    text: 'text-2xl',
+  },
+};
+
+export function Logo({ size = 'md', showText = true }: LogoProps) {
+  const { icon, text } = sizeMap[size];
+
+  return (
+    <div className="flex items-center gap-2">
+      <div className="flex items-center justify-center">
+        <Wallet className="text-emerald-500" size={icon} strokeWidth={2} />
+      </div>
+      {showText && (
+        <span className={`font-bold text-slate-100 ${text}`}>Finanzas</span>
+      )}
+    </div>
+  );
+}
diff --git a/components/layout/MobileNav.tsx b/components/layout/MobileNav.tsx
new file mode 100644
index 0000000..8cbf6b2
--- /dev/null
+++ b/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>
+  );
+}
diff --git a/components/layout/PageContainer.tsx b/components/layout/PageContainer.tsx
new file mode 100644
index 0000000..bca85d7
--- /dev/null
+++ b/components/layout/PageContainer.tsx
@@ -0,0 +1,18 @@
+import { ReactNode } from 'react';
+
+interface PageContainerProps {
+  children: ReactNode;
+  title: string;
+}
+
+export function PageContainer({ children, title }: PageContainerProps) {
+  return (
+    <main className="min-h-screen bg-slate-950">
+      <div className="max-w-7xl mx-auto p-4 md:p-6 lg:p-8 pb-24 lg:pb-8">
+        <div className="space-y-6">
+          {children}
+        </div>
+      </div>
+    </main>
+  );
+}
diff --git a/components/layout/Section.tsx b/components/layout/Section.tsx
new file mode 100644
index 0000000..1a42567
--- /dev/null
+++ b/components/layout/Section.tsx
@@ -0,0 +1,35 @@
+import { ReactNode } from 'react';
+
+interface SectionAction {
+  label: string;
+  onClick: () => void;
+}
+
+interface SectionProps {
+  title: string;
+  children: ReactNode;
+  action?: SectionAction;
+}
+
+export function Section({ title, children, action }: SectionProps) {
+  return (
+    <section className="bg-slate-900 rounded-lg border border-slate-800">
+      <div className="flex items-center justify-between px-4 py-3 md:px-6 md:py-4 border-b border-slate-800">
+        <h2 className="text-base md:text-lg font-semibold text-slate-100">
+          {title}
+        </h2>
+        {action && (
+          <button
+            onClick={action.onClick}
+            className="px-3 py-1.5 text-sm font-medium text-emerald-400 bg-emerald-500/10 hover:bg-emerald-500/20 border border-emerald-500/20 rounded-lg transition-colors"
+          >
+            {action.label}
+          </button>
+        )}
+      </div>
+      <div className="p-4 md:p-6">
+        {children}
+      </div>
+    </section>
+  );
+}
diff --git a/components/layout/Sidebar.tsx b/components/layout/Sidebar.tsx
new file mode 100644
index 0000000..695bd6d
--- /dev/null
+++ b/components/layout/Sidebar.tsx
@@ -0,0 +1,122 @@
+'use client';
+
+import {
+  LayoutDashboard,
+  Wallet,
+  CreditCard,
+  PiggyBank,
+  Bell,
+  X,
+} from 'lucide-react';
+import Link from 'next/link';
+import { usePathname } from 'next/navigation';
+import { Logo } from './Logo';
+
+interface SidebarProps {
+  isOpen: boolean;
+  onClose: () => void;
+  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 Sidebar({
+  isOpen,
+  onClose,
+  unreadAlertsCount = 0,
+}: SidebarProps) {
+  const pathname = usePathname();
+
+  const isActive = (href: string) => {
+    if (href === '/') {
+      return pathname === '/';
+    }
+    return pathname.startsWith(href);
+  };
+
+  return (
+    <>
+      {/* Mobile overlay */}
+      {isOpen && (
+        <div
+          className="fixed inset-0 bg-black/50 z-40 lg:hidden"
+          onClick={onClose}
+          aria-hidden="true"
+        />
+      )}
+
+      {/* Sidebar */}
+      <aside
+        className={`
+          fixed top-0 left-0 z-50 h-full w-64 bg-slate-900 border-r border-slate-800
+          transform transition-transform duration-300 ease-in-out
+          lg:translate-x-0 lg:static lg:h-screen
+          ${isOpen ? 'translate-x-0' : '-translate-x-full'}
+        `}
+      >
+        <div className="flex flex-col h-full">
+          {/* Header */}
+          <div className="flex items-center justify-between p-4 border-b border-slate-800">
+            <Logo size="md" showText />
+            <button
+              onClick={onClose}
+              className="lg:hidden p-2 text-slate-400 hover:text-slate-200 hover:bg-slate-800 rounded-lg transition-colors"
+              aria-label="Cerrar menú"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+
+          {/* Navigation */}
+          <nav className="flex-1 overflow-y-auto py-4 px-3">
+            <ul className="space-y-1">
+              {navigationItems.map((item) => {
+                const active = isActive(item.href);
+                const Icon = item.icon;
+
+                return (
+                  <li key={item.name}>
+                    <Link
+                      href={item.href}
+                      onClick={onClose}
+                      className={`
+                        flex items-center gap-3 px-3 py-2.5 rounded-lg text-sm font-medium
+                        transition-colors relative
+                        ${
+                          active
+                            ? 'bg-slate-800 text-emerald-400 border-l-2 border-emerald-500'
+                            : 'text-slate-300 hover:bg-slate-800 hover:text-slate-100'
+                        }
+                      `}
+                    >
+                      <Icon className="w-5 h-5 flex-shrink-0" />
+                      <span className="flex-1">{item.name}</span>
+                      {item.hasBadge && unreadAlertsCount > 0 && (
+                        <span className="inline-flex items-center justify-center min-w-[20px] h-5 px-1.5 text-xs font-semibold bg-red-500 text-white rounded-full">
+                          {unreadAlertsCount > 99 ? '99+' : unreadAlertsCount}
+                        </span>
+                      )}
+                    </Link>
+                  </li>
+                );
+              })}
+            </ul>
+          </nav>
+
+          {/* Footer */}
+          <div className="p-4 border-t border-slate-800">
+            <p className="text-xs text-slate-500 text-center">
+              Finanzas v{process.env.NEXT_PUBLIC_APP_VERSION || '1.0.0'}
+            </p>
+          </div>
+        </div>
+      </aside>
+    </>
+  );
+}
diff --git a/components/layout/index.ts b/components/layout/index.ts
new file mode 100644
index 0000000..80bc7c8
--- /dev/null
+++ b/components/layout/index.ts
@@ -0,0 +1,6 @@
+export { Sidebar } from './Sidebar';
+export { Header } from './Header';
+export { MobileNav } from './MobileNav';
+export { Logo } from './Logo';
+export { PageContainer } from './PageContainer';
+export { Section } from './Section';
diff --git a/components/modals/AddCardModal.tsx b/components/modals/AddCardModal.tsx
new file mode 100644
index 0000000..972f6bb
--- /dev/null
+++ b/components/modals/AddCardModal.tsx
@@ -0,0 +1,196 @@
+'use client'
+
+import { useState } from 'react'
+import { useFinanzasStore } from '@/lib/store'
+import { X, CreditCard, Calendar, DollarSign, Palette } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface AddCardModalProps {
+    isOpen: boolean
+    onClose: () => void
+}
+
+const COLORS = [
+    { name: 'Slate', value: '#64748b' },
+    { name: 'Blue', value: '#3b82f6' },
+    { name: 'Cyan', value: '#06b6d4' },
+    { name: 'Emerald', value: '#10b981' },
+    { name: 'Violet', value: '#8b5cf6' },
+    { name: 'Rose', value: '#f43f5e' },
+    { name: 'Amber', value: '#f59e0b' },
+]
+
+export function AddCardModal({ isOpen, onClose }: AddCardModalProps) {
+    const addCreditCard = useFinanzasStore((state) => state.addCreditCard)
+
+    const [name, setName] = useState('')
+    const [lastFour, setLastFour] = useState('')
+    const [limit, setLimit] = useState('')
+    const [closingDay, setClosingDay] = useState('')
+    const [dueDay, setDueDay] = useState('')
+    const [selectedColor, setSelectedColor] = useState(COLORS[1].value)
+
+    if (!isOpen) return null
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault()
+
+        if (!name || !limit || !closingDay || !dueDay) return
+
+        addCreditCard({
+            name,
+            lastFourDigits: lastFour || '****',
+            closingDay: parseInt(closingDay),
+            dueDay: parseInt(dueDay),
+            currentBalance: 0,
+            creditLimit: parseFloat(limit),
+            color: selectedColor
+        })
+
+        // Reset
+        setName('')
+        setLastFour('')
+        setLimit('')
+        setClosingDay('')
+        setDueDay('')
+        setSelectedColor(COLORS[1].value)
+
+        onClose()
+    }
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-200">
+            <div className="w-full max-w-lg rounded-xl bg-slate-900 border border-slate-800 shadow-2xl overflow-hidden scale-100 animate-in zoom-in-95 duration-200">
+
+                {/* Header */}
+                <div className="flex items-center justify-between p-6 border-b border-slate-800">
+                    <h2 className="text-xl font-semibold text-white flex items-center gap-2">
+                        <CreditCard className="text-cyan-500" /> Nueva Tarjeta
+                    </h2>
+                    <button onClick={onClose} className="text-slate-400 hover:text-white transition-colors">
+                        <X size={20} />
+                    </button>
+                </div>
+
+                <form onSubmit={handleSubmit} className="p-6 space-y-5">
+
+                    {/* Name & Last 4 */}
+                    <div className="grid grid-cols-3 gap-4">
+                        <div className="col-span-2 space-y-2">
+                            <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Nombre Banco / Tarjeta</label>
+                            <input
+                                type="text"
+                                placeholder="Ej: Visa Santander"
+                                value={name}
+                                onChange={(e) => setName(e.target.value)}
+                                className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white outline-none"
+                                required
+                                autoFocus
+                            />
+                        </div>
+                        <div className="col-span-1 space-y-2">
+                            <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Ult. 4 Dig.</label>
+                            <input
+                                type="text"
+                                maxLength={4}
+                                placeholder="1234"
+                                value={lastFour}
+                                onChange={(e) => setLastFour(e.target.value)}
+                                className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white outline-none text-center tracking-widest"
+                            />
+                        </div>
+                    </div>
+
+                    {/* Limit */}
+                    <div className="space-y-2">
+                        <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Límite de Crédito</label>
+                        <div className="relative">
+                            <span className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 font-semibold">$</span>
+                            <input
+                                type="number"
+                                step="0.01"
+                                placeholder="0.00"
+                                value={limit}
+                                onChange={(e) => setLimit(e.target.value)}
+                                className="w-full pl-8 pr-4 py-3 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white text-lg font-mono outline-none"
+                                required
+                            />
+                        </div>
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-4">
+                        {/* Closing Day */}
+                        <div className="space-y-2">
+                            <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Día Cierre</label>
+                            <div className="relative">
+                                <input
+                                    type="number"
+                                    min="1"
+                                    max="31"
+                                    placeholder="20"
+                                    value={closingDay}
+                                    onChange={(e) => setClosingDay(e.target.value)}
+                                    className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white outline-none"
+                                    required
+                                />
+                                <span className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500 text-sm">del mes</span>
+                            </div>
+                        </div>
+
+                        {/* Due Day */}
+                        <div className="space-y-2">
+                            <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Día Vencimiento</label>
+                            <div className="relative">
+                                <input
+                                    type="number"
+                                    min="1"
+                                    max="31"
+                                    placeholder="5"
+                                    value={dueDay}
+                                    onChange={(e) => setDueDay(e.target.value)}
+                                    className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white outline-none"
+                                    required
+                                />
+                                <span className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500 text-sm">del mes</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Color Picker */}
+                    <div className="space-y-2">
+                        <label className="text-xs font-medium text-slate-400 uppercase tracking-wider flex items-center gap-2">
+                            <Palette size={12} /> Color de Tarjeta
+                        </label>
+                        <div className="flex gap-3 overflow-x-auto pb-2">
+                            {COLORS.map((color) => (
+                                <button
+                                    key={color.value}
+                                    type="button"
+                                    onClick={() => setSelectedColor(color.value)}
+                                    className={cn(
+                                        "w-8 h-8 rounded-full border-2 transition-all",
+                                        selectedColor === color.value
+                                            ? "border-white scale-110 shadow-lg"
+                                            : "border-transparent opacity-70 hover:opacity-100 hover:scale-105"
+                                    )}
+                                    style={{ backgroundColor: color.value }}
+                                    title={color.name}
+                                />
+                            ))}
+                        </div>
+                    </div>
+
+                    <div className="pt-2">
+                        <button
+                            type="submit"
+                            className="w-full py-3 bg-cyan-500 hover:bg-cyan-400 text-white font-semibold rounded-lg shadow-lg shadow-cyan-500/20 transition-all active:scale-[0.98]"
+                        >
+                            Crear Tarjeta
+                        </button>
+                    </div>
+
+                </form>
+            </div>
+        </div>
+    )
+}
diff --git a/components/modals/AddDebtModal.tsx b/components/modals/AddDebtModal.tsx
new file mode 100644
index 0000000..6c5a4d4
--- /dev/null
+++ b/components/modals/AddDebtModal.tsx
@@ -0,0 +1,232 @@
+'use client'
+
+import { useState } from 'react'
+import { useFinanzasStore } from '@/lib/store'
+import { v4 as uuidv4 } from 'uuid'
+import { X, Calendar, DollarSign, Tag, FileText, CheckCircle2 } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface AddDebtModalProps {
+    isOpen: boolean
+    onClose: () => void
+}
+
+type DebtType = 'fixed' | 'variable'
+
+export function AddDebtModal({ isOpen, onClose }: AddDebtModalProps) {
+    const [activeTab, setActiveTab] = useState<DebtType>('variable')
+    const [name, setName] = useState('')
+    const [amount, setAmount] = useState('')
+    const [dateStr, setDateStr] = useState(new Date().toISOString().split('T')[0]) // For variable: YYYY-MM-DD
+    const [dueDay, setDueDay] = useState('1') // For fixed: 1-31
+    const [categoryFixed, setCategoryFixed] = useState('housing')
+    const [categoryVariable, setCategoryVariable] = useState('shopping')
+    const [isAutoDebit, setIsAutoDebit] = useState(false)
+    const [notes, setNotes] = useState('')
+
+    const addFixedDebt = useFinanzasStore((state) => state.addFixedDebt)
+    const addVariableDebt = useFinanzasStore((state) => state.addVariableDebt)
+
+    if (!isOpen) return null
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault()
+
+        if (!name || !amount) return
+
+        const numAmount = parseFloat(amount)
+        if (isNaN(numAmount)) return
+
+        if (activeTab === 'fixed') {
+            addFixedDebt({
+                name,
+                amount: numAmount,
+                dueDay: parseInt(dueDay),
+                category: categoryFixed as any,
+                isAutoDebit,
+                isPaid: false,
+                notes: notes || undefined
+            })
+        } else {
+            addVariableDebt({
+                name,
+                amount: numAmount,
+                date: new Date(dateStr).toISOString(),
+                category: categoryVariable as any,
+                isPaid: false,
+                notes: notes || undefined
+            })
+        }
+
+        // Reset and Close
+        setName('')
+        setAmount('')
+        setNotes('')
+        onClose()
+    }
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-200">
+            <div className="w-full max-w-lg rounded-xl bg-slate-900 border border-slate-800 shadow-2xl overflow-hidden scale-100 animate-in zoom-in-95 duration-200">
+
+                {/* Header */}
+                <div className="flex items-center justify-between p-6 border-b border-slate-800">
+                    <h2 className="text-xl font-semibold text-white">Agregar Gasto / Deuda</h2>
+                    <button onClick={onClose} className="text-slate-400 hover:text-white transition-colors">
+                        <X size={20} />
+                    </button>
+                </div>
+
+                {/* Tabs */}
+                <div className="flex p-1 mx-6 mt-6 bg-slate-800/50 rounded-lg">
+                    <button
+                        onClick={() => setActiveTab('variable')}
+                        className={cn(
+                            "flex-1 py-2 text-sm font-medium rounded-md transition-all duration-200",
+                            activeTab === 'variable' ? "bg-cyan-500 text-white shadow-lg" : "text-slate-400 hover:text-white"
+                        )}
+                    >
+                        Variable (Único)
+                    </button>
+                    <button
+                        onClick={() => setActiveTab('fixed')}
+                        className={cn(
+                            "flex-1 py-2 text-sm font-medium rounded-md transition-all duration-200",
+                            activeTab === 'fixed' ? "bg-cyan-500 text-white shadow-lg" : "text-slate-400 hover:text-white"
+                        )}
+                    >
+                        Fijo (Recurrente)
+                    </button>
+                </div>
+
+                <form onSubmit={handleSubmit} className="p-6 space-y-5">
+
+                    {/* Amount Input */}
+                    <div className="space-y-2">
+                        <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Monto</label>
+                        <div className="relative">
+                            <span className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 font-semibold">$</span>
+                            <input
+                                type="number"
+                                step="0.01"
+                                placeholder="0.00"
+                                value={amount}
+                                onChange={(e) => setAmount(e.target.value)}
+                                className="w-full pl-8 pr-4 py-3 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white text-lg font-mono outline-none transition-all placeholder:text-slate-600"
+                                required
+                                autoFocus
+                            />
+                        </div>
+                    </div>
+
+                    {/* Name Input */}
+                    <div className="space-y-2">
+                        <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Descripción</label>
+                        <input
+                            type="text"
+                            placeholder="Ej: Supermercado Coto, Netflix, Alquiler"
+                            value={name}
+                            onChange={(e) => setName(e.target.value)}
+                            className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white outline-none transition-all placeholder:text-slate-600"
+                            required
+                        />
+                    </div>
+
+                    <div className="grid grid-cols-2 gap-4">
+
+                        {/* Category Select */}
+                        <div className="space-y-2">
+                            <label className="text-xs font-medium text-slate-400 uppercase tracking-wider flex items-center gap-1">
+                                <Tag size={12} /> Categoría
+                            </label>
+                            <select
+                                value={activeTab === 'fixed' ? categoryFixed : categoryVariable}
+                                onChange={(e) => activeTab === 'fixed' ? setCategoryFixed(e.target.value) : setCategoryVariable(e.target.value)}
+                                className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white outline-none appearance-none cursor-pointer"
+                            >
+                                {activeTab === 'fixed' ? (
+                                    <>
+                                        <option value="housing">Vivienda</option>
+                                        <option value="services">Servicios</option>
+                                        <option value="subscription">Suscripciones</option>
+                                        <option value="other">Otro</option>
+                                    </>
+                                ) : (
+                                    <>
+                                        <option value="food">Comida / Super</option>
+                                        <option value="shopping">Compras</option>
+                                        <option value="transport">Transporte</option>
+                                        <option value="health">Salud</option>
+                                        <option value="entertainment">Entretenimiento</option>
+                                        <option value="other">Otro</option>
+                                    </>
+                                )}
+                            </select>
+                        </div>
+
+                        {/* Date/DueDay Input */}
+                        <div className="space-y-2">
+                            <label className="text-xs font-medium text-slate-400 uppercase tracking-wider flex items-center gap-1">
+                                <Calendar size={12} /> {activeTab === 'fixed' ? 'Día Vencimiento' : 'Fecha'}
+                            </label>
+                            {activeTab === 'fixed' ? (
+                                <div className="relative">
+                                    <input
+                                        type="number"
+                                        min="1"
+                                        max="31"
+                                        value={dueDay}
+                                        onChange={(e) => setDueDay(e.target.value)}
+                                        className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white outline-none"
+                                        required
+                                    />
+                                    <span className="absolute right-4 top-1/2 -translate-y-1/2 text-slate-500 text-sm">del mes</span>
+                                </div>
+                            ) : (
+                                <input
+                                    type="date"
+                                    value={dateStr}
+                                    onChange={(e) => setDateStr(e.target.value)}
+                                    className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white outline-none [color-scheme:dark]"
+                                    required
+                                />
+                            )}
+                        </div>
+                    </div>
+
+                    {activeTab === 'fixed' && (
+                        <div className="flex items-center gap-2 px-4 py-3 bg-slate-800/30 rounded-lg cursor-pointer" onClick={() => setIsAutoDebit(!isAutoDebit)}>
+                            <div className={cn("w-5 h-5 rounded border flex items-center justify-center transition-colors", isAutoDebit ? "bg-cyan-500 border-cyan-500" : "border-slate-600 bg-transparent")}>
+                                {isAutoDebit && <CheckCircle2 size={14} className="text-white" />}
+                            </div>
+                            <span className="text-sm text-slate-300 select-none">Débito Automático</span>
+                        </div>
+                    )}
+
+                    {/* Notes */}
+                    <div className="space-y-2">
+                        <label className="text-xs font-medium text-slate-400 uppercase tracking-wider flex items-center gap-1">
+                            <FileText size={12} /> Notas (Opcional)
+                        </label>
+                        <textarea
+                            value={notes}
+                            onChange={(e) => setNotes(e.target.value)}
+                            placeholder="Detalles adicionales..."
+                            className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white outline-none min-h-[80px] text-sm resize-none placeholder:text-slate-600"
+                        />
+                    </div>
+
+                    <div className="pt-2">
+                        <button
+                            type="submit"
+                            className="w-full py-3 bg-cyan-500 hover:bg-cyan-400 text-white font-semibold rounded-lg shadow-lg shadow-cyan-500/20 transition-all active:scale-[0.98]"
+                        >
+                            Agregar {activeTab === 'fixed' ? 'Gasto Fijo' : 'Gasto'}
+                        </button>
+                    </div>
+
+                </form>
+            </div>
+        </div>
+    )
+}
diff --git a/components/modals/AddPaymentModal.tsx b/components/modals/AddPaymentModal.tsx
new file mode 100644
index 0000000..2ca1d20
--- /dev/null
+++ b/components/modals/AddPaymentModal.tsx
@@ -0,0 +1,203 @@
+'use client'
+
+import { useState } from 'react'
+import { useFinanzasStore } from '@/lib/store'
+import { X, CreditCard, DollarSign, Calendar, FileText, Layers } from 'lucide-react'
+import { cn } from '@/lib/utils'
+
+interface AddPaymentModalProps {
+    isOpen: boolean
+    onClose: () => void
+}
+
+export function AddPaymentModal({ isOpen, onClose }: AddPaymentModalProps) {
+    const cards = useFinanzasStore((state) => state.creditCards)
+    const addCardPayment = useFinanzasStore((state) => state.addCardPayment)
+
+    const [selectedCardId, setSelectedCardId] = useState(cards[0]?.id || '')
+    const [description, setDescription] = useState('')
+    const [amount, setAmount] = useState('')
+    const [dateStr, setDateStr] = useState(new Date().toISOString().split('T')[0])
+    const [hasInstallments, setHasInstallments] = useState(false)
+    const [installments, setInstallments] = useState('1')
+    const [totalInstallments, setTotalInstallments] = useState('12')
+
+    if (!isOpen) return null
+
+    // Ensure card selection if cards exist
+    if (!selectedCardId && cards.length > 0) {
+        setSelectedCardId(cards[0].id)
+    }
+
+    const handleSubmit = (e: React.FormEvent) => {
+        e.preventDefault()
+
+        if (!description || !amount || !selectedCardId) return
+
+        addCardPayment({
+            cardId: selectedCardId,
+            amount: parseFloat(amount),
+            date: new Date(dateStr).toISOString(),
+            description,
+            installments: hasInstallments ? {
+                current: parseInt(installments),
+                total: parseInt(totalInstallments)
+            } : undefined
+        })
+
+        // Reset
+        setDescription('')
+        setAmount('')
+        setHasInstallments(false)
+        setInstallments('1')
+        setTotalInstallments('12')
+
+        onClose()
+    }
+
+    return (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm p-4 animate-in fade-in duration-200">
+            <div className="w-full max-w-lg rounded-xl bg-slate-900 border border-slate-800 shadow-2xl overflow-hidden scale-100 animate-in zoom-in-95 duration-200">
+
+                {/* Header */}
+                <div className="flex items-center justify-between p-6 border-b border-slate-800">
+                    <h2 className="text-xl font-semibold text-white">Registrar Consumo / Pago</h2>
+                    <button onClick={onClose} className="text-slate-400 hover:text-white transition-colors">
+                        <X size={20} />
+                    </button>
+                </div>
+
+                {cards.length === 0 ? (
+                    <div className="p-8 text-center space-y-4">
+                        <CreditCard className="mx-auto text-slate-600 mb-2" size={48} />
+                        <h3 className="text-lg font-medium text-white">No tienes tarjetas registradas</h3>
+                        <p className="text-slate-400">Debes agregar una tarjeta antes de registrar pagos.</p>
+                        <button
+                            onClick={onClose}
+                            className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-white rounded-lg transition"
+                        >
+                            Entendido
+                        </button>
+                    </div>
+                ) : (
+                    <form onSubmit={handleSubmit} className="p-6 space-y-5">
+
+                        {/* Card Selection */}
+                        <div className="space-y-2">
+                            <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Tarjeta</label>
+                            <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 max-h-[120px] overflow-y-auto pr-1">
+                                {cards.map((card) => (
+                                    <div
+                                        key={card.id}
+                                        onClick={() => setSelectedCardId(card.id)}
+                                        className={cn(
+                                            "cursor-pointer p-3 rounded-lg border flex items-center gap-3 transition-all",
+                                            selectedCardId === card.id
+                                                ? "border-cyan-500 bg-cyan-500/10 ring-1 ring-cyan-500"
+                                                : "border-slate-800 bg-slate-950 hover:border-slate-700"
+                                        )}
+                                    >
+                                        <div className="w-3 h-3 rounded-full" style={{ backgroundColor: card.color }} />
+                                        <div className="flex flex-col truncate">
+                                            <span className="text-sm font-medium text-white truncate">{card.name}</span>
+                                            <span className="text-xs text-slate-500">**** {card.lastFourDigits}</span>
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+
+                        {/* Amount */}
+                        <div className="space-y-2">
+                            <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Monto</label>
+                            <div className="relative">
+                                <span className="absolute left-4 top-1/2 -translate-y-1/2 text-slate-400 font-semibold">$</span>
+                                <input
+                                    type="number"
+                                    step="0.01"
+                                    placeholder="0.00"
+                                    value={amount}
+                                    onChange={(e) => setAmount(e.target.value)}
+                                    className="w-full pl-8 pr-4 py-3 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white text-lg font-mono outline-none"
+                                    required
+                                    autoFocus
+                                />
+                            </div>
+                        </div>
+
+                        {/* Description */}
+                        <div className="space-y-2">
+                            <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Descripción</label>
+                            <input
+                                type="text"
+                                placeholder="Ej: Cena McDonalds, Compra ML"
+                                value={description}
+                                onChange={(e) => setDescription(e.target.value)}
+                                className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white outline-none"
+                                required
+                            />
+                        </div>
+
+                        {/* Date */}
+                        <div className="space-y-2">
+                            <label className="text-xs font-medium text-slate-400 uppercase tracking-wider flex items-center gap-1">
+                                <Calendar size={12} /> Fecha
+                            </label>
+                            <input
+                                type="date"
+                                value={dateStr}
+                                onChange={(e) => setDateStr(e.target.value)}
+                                className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-500 text-white outline-none [color-scheme:dark]"
+                                required
+                            />
+                        </div>
+
+                        {/* Installments Toggle */}
+                        <div className="flex items-center gap-2 px-4 py-3 bg-slate-800/30 rounded-lg cursor-pointer" onClick={() => setHasInstallments(!hasInstallments)}>
+                            <div className={cn("w-5 h-5 rounded border flex items-center justify-center transition-colors", hasInstallments ? "bg-cyan-500 border-cyan-500" : "border-slate-600 bg-transparent")}>
+                                {hasInstallments && <Layers size={14} className="text-white" />}
+                            </div>
+                            <span className="text-sm text-slate-300 select-none">Es una compra en cuotas</span>
+                        </div>
+
+                        {/* Installments Inputs */}
+                        {hasInstallments && (
+                            <div className="grid grid-cols-2 gap-4 animate-in slide-in-from-top-2">
+                                <div className="space-y-2">
+                                    <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Cuota N°</label>
+                                    <input
+                                        type="number"
+                                        min="1"
+                                        value={installments}
+                                        onChange={(e) => setInstallments(e.target.value)}
+                                        className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg text-white"
+                                    />
+                                </div>
+                                <div className="space-y-2">
+                                    <label className="text-xs font-medium text-slate-400 uppercase tracking-wider">Total Cuotas</label>
+                                    <input
+                                        type="number"
+                                        min="1"
+                                        value={totalInstallments}
+                                        onChange={(e) => setTotalInstallments(e.target.value)}
+                                        className="w-full px-4 py-2.5 bg-slate-950 border border-slate-800 rounded-lg text-white"
+                                    />
+                                </div>
+                            </div>
+                        )}
+
+                        <div className="pt-2">
+                            <button
+                                type="submit"
+                                className="w-full py-3 bg-cyan-500 hover:bg-cyan-400 text-white font-semibold rounded-lg shadow-lg shadow-cyan-500/20 transition-all active:scale-[0.98]"
+                            >
+                                Registrar Pago
+                            </button>
+                        </div>
+
+                    </form>
+                )}
+            </div>
+        </div>
+    )
+}
diff --git a/lib/alerts.ts b/lib/alerts.ts
new file mode 100644
index 0000000..5bdfff2
--- /dev/null
+++ b/lib/alerts.ts
@@ -0,0 +1,359 @@
+import {
+  FixedDebt,
+  VariableDebt,
+  CreditCard,
+  MonthlyBudget,
+  Alert,
+} from './types'
+import {
+  getDaysUntil,
+  getNextDateByDay,
+  formatCurrency,
+  calculateTotalFixedDebts,
+  calculateTotalVariableDebts,
+} from './utils'
+
+export interface GenerateAlertsParams {
+  fixedDebts: FixedDebt[]
+  variableDebts: VariableDebt[]
+  creditCards: CreditCard[]
+  monthlyBudgets: MonthlyBudget[]
+  currentMonth: number
+  currentYear: number
+}
+
+interface AlertDraft {
+  type: Alert['type']
+  title: string
+  message: string
+  severity: Alert['severity']
+  relatedId?: string
+}
+
+/**
+ * Obtiene las deudas fijas no pagadas que vencen en los próximos N días
+ */
+export function getUpcomingFixedDebts(
+  fixedDebts: FixedDebt[],
+  days: number
+): Array<{ debt: FixedDebt; daysUntil: number; dueDate: Date }> {
+  const today = new Date()
+  const currentDay = today.getDate()
+  const currentMonth = today.getMonth()
+  const currentYear = today.getFullYear()
+
+  return fixedDebts
+    .filter((debt) => !debt.isPaid)
+    .map((debt) => {
+      // Calcular la fecha de vencimiento para este mes
+      let dueDate = new Date(currentYear, currentMonth, debt.dueDay)
+
+      // Si ya pasó, calcular para el mes siguiente
+      if (currentDay > debt.dueDay) {
+        dueDate = new Date(currentYear, currentMonth + 1, debt.dueDay)
+      }
+
+      const daysUntil = getDaysUntil(dueDate)
+
+      return { debt, daysUntil, dueDate }
+    })
+    .filter(({ daysUntil }) => daysUntil >= 0 && daysUntil <= days)
+    .sort((a, b) => a.daysUntil - b.daysUntil)
+}
+
+/**
+ * Obtiene el presupuesto del mes actual
+ */
+export function getCurrentMonthBudget(
+  monthlyBudgets: MonthlyBudget[],
+  month: number,
+  year: number
+): MonthlyBudget | null {
+  return (
+    monthlyBudgets.find(
+      (budget) => budget.month === month && budget.year === year
+    ) || null
+  )
+}
+
+/**
+ * Calcula el gasto actual del mes (deudas fijas + variables no pagadas)
+ */
+export function calculateCurrentSpending(
+  fixedDebts: FixedDebt[],
+  variableDebts: VariableDebt[]
+): number {
+  const fixedSpending = calculateTotalFixedDebts(fixedDebts)
+  const variableSpending = calculateTotalVariableDebts(variableDebts)
+
+  return fixedSpending + variableSpending
+}
+
+interface CardEvent {
+  card: CreditCard
+  type: 'closing' | 'due'
+  daysUntil: number
+  date: Date
+}
+
+/**
+ * Obtiene los eventos próximos de tarjetas (cierre o vencimiento)
+ */
+export function getUpcomingCardEvents(
+  creditCards: CreditCard[],
+  days: number
+): CardEvent[] {
+  const events: CardEvent[] = []
+
+  for (const card of creditCards) {
+    // Calcular próximo cierre
+    const closingDate = getNextDateByDay(card.closingDay)
+    const daysUntilClosing = getDaysUntil(closingDate)
+
+    if (daysUntilClosing >= 0 && daysUntilClosing <= days) {
+      events.push({
+        card,
+        type: 'closing',
+        daysUntil: daysUntilClosing,
+        date: closingDate,
+      })
+    }
+
+    // Calcular próximo vencimiento
+    const dueDate = getNextDateByDay(card.dueDay)
+    const daysUntilDue = getDaysUntil(dueDate)
+
+    if (daysUntilDue >= 0 && daysUntilDue <= days) {
+      events.push({
+        card,
+        type: 'due',
+        daysUntil: daysUntilDue,
+        date: dueDate,
+      })
+    }
+  }
+
+  // Ordenar por días hasta el evento
+  return events.sort((a, b) => a.daysUntil - b.daysUntil)
+}
+
+/**
+ * Genera alertas de pagos próximos (deudas fijas)
+ */
+function generatePaymentDueAlerts(fixedDebts: FixedDebt[]): AlertDraft[] {
+  const upcomingDebts = getUpcomingFixedDebts(fixedDebts, 3)
+  const alerts: AlertDraft[] = []
+
+  for (const { debt, daysUntil } of upcomingDebts) {
+    const severity: Alert['severity'] =
+      daysUntil <= 1 ? 'danger' : 'warning'
+
+    const daysText = daysUntil === 0 ? 'hoy' : daysUntil === 1 ? 'mañana' : `en ${daysUntil} días`
+
+    alerts.push({
+      type: 'PAYMENT_DUE',
+      title: 'Pago próximo',
+      message: `'${debt.name}' vence ${daysText}: ${formatCurrency(debt.amount)}`,
+      severity,
+      relatedId: debt.id,
+    })
+  }
+
+  return alerts
+}
+
+/**
+ * Genera alertas de presupuesto
+ */
+function generateBudgetAlerts(
+  fixedDebts: FixedDebt[],
+  variableDebts: VariableDebt[],
+  monthlyBudgets: MonthlyBudget[],
+  currentMonth: number,
+  currentYear: number
+): AlertDraft[] {
+  const currentBudget = getCurrentMonthBudget(
+    monthlyBudgets,
+    currentMonth,
+    currentYear
+  )
+
+  if (!currentBudget) {
+    return []
+  }
+
+  const totalBudget =
+    currentBudget.fixedExpenses + currentBudget.variableExpenses
+
+  if (totalBudget <= 0) {
+    return []
+  }
+
+  const currentSpending = calculateCurrentSpending(fixedDebts, variableDebts)
+  const percentageUsed = (currentSpending / totalBudget) * 100
+
+  if (percentageUsed < 80) {
+    return []
+  }
+
+  const severity: Alert['severity'] =
+    percentageUsed > 95 ? 'danger' : 'warning'
+
+  return [
+    {
+      type: 'BUDGET_WARNING',
+      title: 'Presupuesto al límite',
+      message: `Has usado el ${percentageUsed.toFixed(1)}% de tu presupuesto mensual`,
+      severity,
+    },
+  ]
+}
+
+/**
+ * Genera alertas de eventos de tarjetas (cierre y vencimiento)
+ */
+function generateCardAlerts(creditCards: CreditCard[]): AlertDraft[] {
+  const events = getUpcomingCardEvents(creditCards, 3)
+  const closingAlerts: AlertDraft[] = []
+  const dueAlerts: AlertDraft[] = []
+
+  for (const event of events) {
+    if (event.type === 'closing') {
+      const daysText =
+        event.daysUntil === 0
+          ? 'hoy'
+          : event.daysUntil === 1
+            ? 'mañana'
+            : `en ${event.daysUntil} días`
+
+      closingAlerts.push({
+        type: 'CARD_CLOSING',
+        title: 'Cierre de tarjeta próximo',
+        message: `Tu tarjeta ${event.card.name} cierra ${daysText}. Balance: ${formatCurrency(event.card.currentBalance)}`,
+        severity: 'info',
+        relatedId: event.card.id,
+      })
+    } else {
+      const severity: Alert['severity'] =
+        event.daysUntil <= 2 ? 'warning' : 'info'
+
+      const daysText =
+        event.daysUntil === 0
+          ? 'hoy'
+          : event.daysUntil === 1
+            ? 'mañana'
+            : `en ${event.daysUntil} días`
+
+      dueAlerts.push({
+        type: 'CARD_DUE',
+        title: 'Vencimiento de tarjeta',
+        message: `Vencimiento de ${event.card.name} ${daysText}. Balance: ${formatCurrency(event.card.currentBalance)}`,
+        severity,
+        relatedId: event.card.id,
+      })
+    }
+  }
+
+  return [...closingAlerts, ...dueAlerts]
+}
+
+/**
+ * Genera alertas de meta de ahorro
+ */
+function generateSavingsAlerts(
+  fixedDebts: FixedDebt[],
+  variableDebts: VariableDebt[],
+  monthlyBudgets: MonthlyBudget[],
+  currentMonth: number,
+  currentYear: number
+): AlertDraft[] {
+  const currentBudget = getCurrentMonthBudget(
+    monthlyBudgets,
+    currentMonth,
+    currentYear
+  )
+
+  if (!currentBudget || currentBudget.savingsGoal <= 0) {
+    return []
+  }
+
+  const currentSpending = calculateCurrentSpending(fixedDebts, variableDebts)
+  const projectedSavings = currentBudget.totalIncome - currentSpending
+
+  if (projectedSavings >= currentBudget.savingsGoal) {
+    return []
+  }
+
+  const percentageBelow =
+    ((currentBudget.savingsGoal - projectedSavings) / currentBudget.savingsGoal) *
+    100
+
+  return [
+    {
+      type: 'SAVINGS_GOAL',
+      title: 'Meta de ahorro',
+      message: `Vas ${percentageBelow.toFixed(0)}% por debajo de tu meta de ahorro mensual`,
+      severity: 'info',
+    },
+  ]
+}
+
+/**
+ * Elimina alertas duplicadas basándose en tipo y relatedId
+ */
+function deduplicateAlerts(alerts: AlertDraft[]): AlertDraft[] {
+  const seen = new Set<string>()
+
+  return alerts.filter((alert) => {
+    const key = `${alert.type}-${alert.relatedId || 'global'}`
+
+    if (seen.has(key)) {
+      return false
+    }
+
+    seen.add(key)
+    return true
+  })
+}
+
+/**
+ * Genera todas las alertas inteligentes basadas en el estado actual
+ */
+export function generateAlerts(params: GenerateAlertsParams): AlertDraft[] {
+  const {
+    fixedDebts,
+    variableDebts,
+    creditCards,
+    monthlyBudgets,
+    currentMonth,
+    currentYear,
+  } = params
+
+  const allAlerts: AlertDraft[] = [
+    ...generatePaymentDueAlerts(fixedDebts),
+    ...generateBudgetAlerts(
+      fixedDebts,
+      variableDebts,
+      monthlyBudgets,
+      currentMonth,
+      currentYear
+    ),
+    ...generateCardAlerts(creditCards),
+    ...generateSavingsAlerts(
+      fixedDebts,
+      variableDebts,
+      monthlyBudgets,
+      currentMonth,
+      currentYear
+    ),
+  ]
+
+  // Eliminar duplicados y ordenar por severidad (danger > warning > info)
+  const uniqueAlerts = deduplicateAlerts(allAlerts)
+
+  const severityOrder = { danger: 0, warning: 1, info: 2 }
+
+  return uniqueAlerts.sort(
+    (a, b) => severityOrder[a.severity] - severityOrder[b.severity]
+  )
+}
diff --git a/lib/store.ts b/lib/store.ts
new file mode 100644
index 0000000..f66bce9
--- /dev/null
+++ b/lib/store.ts
@@ -0,0 +1,27 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+import { AppState } from '@/lib/types'
+import { createDebtsSlice, DebtsSlice } from './store/slices/debtsSlice'
+import { createCardsSlice, CardsSlice } from './store/slices/cardsSlice'
+import { createBudgetSlice, BudgetSlice } from './store/slices/budgetSlice'
+import { createAlertsSlice, AlertsSlice } from './store/slices/alertsSlice'
+
+// Combined State Interface
+// Note: We extend the individual slices to create the full store interface
+export interface FinanzasState extends DebtsSlice, CardsSlice, BudgetSlice, AlertsSlice { }
+
+export const useFinanzasStore = create<FinanzasState>()(
+  persist(
+    (...a) => ({
+      ...createDebtsSlice(...a),
+      ...createCardsSlice(...a),
+      ...createBudgetSlice(...a),
+      ...createAlertsSlice(...a),
+    }),
+    {
+      name: 'finanzas-storage',
+      // Optional: Filter what gets persisted if needed in the future
+      // partialize: (state) => ({ ... }) 
+    }
+  )
+)
diff --git a/lib/store/slices/alertsSlice.ts b/lib/store/slices/alertsSlice.ts
new file mode 100644
index 0000000..e5d61a6
--- /dev/null
+++ b/lib/store/slices/alertsSlice.ts
@@ -0,0 +1,45 @@
+import { StateCreator } from 'zustand'
+import { v4 as uuidv4 } from 'uuid'
+import { Alert } from '@/lib/types'
+
+export interface AlertsSlice {
+    alerts: Alert[]
+
+    addAlert: (alert: Omit<Alert, 'id' | 'date'>) => void
+    markAlertAsRead: (id: string) => void
+    deleteAlert: (id: string) => void
+    clearAllAlerts: () => void
+}
+
+export const createAlertsSlice: StateCreator<AlertsSlice> = (set) => ({
+    alerts: [],
+
+    addAlert: (alert) =>
+        set((state) => ({
+            alerts: [
+                ...state.alerts,
+                {
+                    ...alert,
+                    id: uuidv4(),
+                    date: new Date().toISOString(),
+                },
+            ],
+        })),
+
+    markAlertAsRead: (id) =>
+        set((state) => ({
+            alerts: state.alerts.map((a) =>
+                a.id === id ? { ...a, isRead: true } : a
+            ),
+        })),
+
+    deleteAlert: (id) =>
+        set((state) => ({
+            alerts: state.alerts.filter((a) => a.id !== id),
+        })),
+
+    clearAllAlerts: () =>
+        set(() => ({
+            alerts: [],
+        })),
+})
diff --git a/lib/store/slices/budgetSlice.ts b/lib/store/slices/budgetSlice.ts
new file mode 100644
index 0000000..b69ddea
--- /dev/null
+++ b/lib/store/slices/budgetSlice.ts
@@ -0,0 +1,39 @@
+import { StateCreator } from 'zustand'
+import { MonthlyBudget } from '@/lib/types'
+
+const now = new Date()
+
+export interface BudgetSlice {
+    monthlyBudgets: MonthlyBudget[]
+    currentMonth: number
+    currentYear: number
+
+    setMonthlyBudget: (budget: MonthlyBudget) => void
+    updateMonthlyBudget: (month: number, year: number, updates: Partial<MonthlyBudget>) => void
+}
+
+export const createBudgetSlice: StateCreator<BudgetSlice> = (set) => ({
+    monthlyBudgets: [],
+    currentMonth: now.getMonth() + 1,
+    currentYear: now.getFullYear(),
+
+    setMonthlyBudget: (budget) =>
+        set((state) => {
+            const existingIndex = state.monthlyBudgets.findIndex(
+                (b) => b.month === budget.month && b.year === budget.year
+            )
+            if (existingIndex >= 0) {
+                const newBudgets = [...state.monthlyBudgets]
+                newBudgets[existingIndex] = budget
+                return { monthlyBudgets: newBudgets }
+            }
+            return { monthlyBudgets: [...state.monthlyBudgets, budget] }
+        }),
+
+    updateMonthlyBudget: (month, year, updates) =>
+        set((state) => ({
+            monthlyBudgets: state.monthlyBudgets.map((b) =>
+                b.month === month && b.year === year ? { ...b, ...updates } : b
+            ),
+        })),
+})
diff --git a/lib/store/slices/cardsSlice.ts b/lib/store/slices/cardsSlice.ts
new file mode 100644
index 0000000..3426288
--- /dev/null
+++ b/lib/store/slices/cardsSlice.ts
@@ -0,0 +1,47 @@
+import { StateCreator } from 'zustand'
+import { v4 as uuidv4 } from 'uuid'
+import { CreditCard, CardPayment } from '@/lib/types'
+
+export interface CardsSlice {
+    creditCards: CreditCard[]
+    cardPayments: CardPayment[]
+
+    addCreditCard: (card: Omit<CreditCard, 'id'>) => void
+    updateCreditCard: (id: string, card: Partial<CreditCard>) => void
+    deleteCreditCard: (id: string) => void
+
+    addCardPayment: (payment: Omit<CardPayment, 'id'>) => void
+    deleteCardPayment: (id: string) => void
+}
+
+export const createCardsSlice: StateCreator<CardsSlice> = (set) => ({
+    creditCards: [],
+    cardPayments: [],
+
+    addCreditCard: (card) =>
+        set((state) => ({
+            creditCards: [...state.creditCards, { ...card, id: uuidv4() }],
+        })),
+
+    updateCreditCard: (id, card) =>
+        set((state) => ({
+            creditCards: state.creditCards.map((c) =>
+                c.id === id ? { ...c, ...card } : c
+            ),
+        })),
+
+    deleteCreditCard: (id) =>
+        set((state) => ({
+            creditCards: state.creditCards.filter((c) => c.id !== id),
+        })),
+
+    addCardPayment: (payment) =>
+        set((state) => ({
+            cardPayments: [...state.cardPayments, { ...payment, id: uuidv4() }],
+        })),
+
+    deleteCardPayment: (id) =>
+        set((state) => ({
+            cardPayments: state.cardPayments.filter((p) => p.id !== id),
+        })),
+})
diff --git a/lib/store/slices/debtsSlice.ts b/lib/store/slices/debtsSlice.ts
new file mode 100644
index 0000000..7ee61d8
--- /dev/null
+++ b/lib/store/slices/debtsSlice.ts
@@ -0,0 +1,73 @@
+import { StateCreator } from 'zustand'
+import { v4 as uuidv4 } from 'uuid'
+import { FixedDebt, VariableDebt } from '@/lib/types'
+
+export interface DebtsSlice {
+  fixedDebts: FixedDebt[]
+  variableDebts: VariableDebt[]
+  
+  // Actions Fixed
+  addFixedDebt: (debt: Omit<FixedDebt, 'id'>) => void
+  updateFixedDebt: (id: string, debt: Partial<FixedDebt>) => void
+  deleteFixedDebt: (id: string) => void
+  toggleFixedDebtPaid: (id: string) => void
+  
+  // Actions Variable
+  addVariableDebt: (debt: Omit<VariableDebt, 'id'>) => void
+  updateVariableDebt: (id: string, debt: Partial<VariableDebt>) => void
+  deleteVariableDebt: (id: string) => void
+  toggleVariableDebtPaid: (id: string) => void
+}
+
+export const createDebtsSlice: StateCreator<DebtsSlice> = (set) => ({
+  fixedDebts: [],
+  variableDebts: [],
+
+  addFixedDebt: (debt) =>
+    set((state) => ({
+      fixedDebts: [...state.fixedDebts, { ...debt, id: uuidv4() }],
+    })),
+
+  updateFixedDebt: (id, debt) =>
+    set((state) => ({
+      fixedDebts: state.fixedDebts.map((d) =>
+        d.id === id ? { ...d, ...debt } : d
+      ),
+    })),
+
+  deleteFixedDebt: (id) =>
+    set((state) => ({
+      fixedDebts: state.fixedDebts.filter((d) => d.id !== id),
+    })),
+
+  toggleFixedDebtPaid: (id) =>
+    set((state) => ({
+      fixedDebts: state.fixedDebts.map((d) =>
+        d.id === id ? { ...d, isPaid: !d.isPaid } : d
+      ),
+    })),
+
+  addVariableDebt: (debt) =>
+    set((state) => ({
+      variableDebts: [...state.variableDebts, { ...debt, id: uuidv4() }],
+    })),
+
+  updateVariableDebt: (id, debt) =>
+    set((state) => ({
+      variableDebts: state.variableDebts.map((d) =>
+        d.id === id ? { ...d, ...debt } : d
+      ),
+    })),
+
+  deleteVariableDebt: (id) =>
+    set((state) => ({
+      variableDebts: state.variableDebts.filter((d) => d.id !== id),
+    })),
+
+  toggleVariableDebtPaid: (id) =>
+    set((state) => ({
+      variableDebts: state.variableDebts.map((d) =>
+        d.id === id ? { ...d, isPaid: !d.isPaid } : d
+      ),
+    })),
+})
diff --git a/lib/types.ts b/lib/types.ts
new file mode 100644
index 0000000..4374d53
--- /dev/null
+++ b/lib/types.ts
@@ -0,0 +1,74 @@
+export interface FixedDebt {
+  id: string
+  name: string
+  amount: number
+  dueDay: number
+  category: 'housing' | 'services' | 'subscription' | 'other'
+  isAutoDebit: boolean
+  isPaid: boolean
+  notes?: string
+}
+
+export interface VariableDebt {
+  id: string
+  name: string
+  amount: number
+  date: string
+  category: 'shopping' | 'food' | 'entertainment' | 'health' | 'transport' | 'other'
+  isPaid: boolean
+  notes?: string
+}
+
+export interface CreditCard {
+  id: string
+  name: string
+  lastFourDigits: string
+  closingDay: number
+  dueDay: number
+  currentBalance: number
+  creditLimit: number
+  color: string
+}
+
+export interface CardPayment {
+  id: string
+  cardId: string
+  amount: number
+  date: string
+  description: string
+  installments?: {
+    current: number
+    total: number
+  }
+}
+
+export interface MonthlyBudget {
+  month: number
+  year: number
+  totalIncome: number
+  fixedExpenses: number
+  variableExpenses: number
+  savingsGoal: number
+}
+
+export interface Alert {
+  id: string
+  type: 'PAYMENT_DUE' | 'BUDGET_WARNING' | 'CARD_CLOSING' | 'CARD_DUE' | 'SAVINGS_GOAL' | 'UNUSUAL_SPENDING'
+  title: string
+  message: string
+  severity: 'info' | 'warning' | 'danger'
+  date: string
+  isRead: boolean
+  relatedId?: string
+}
+
+export interface AppState {
+  fixedDebts: FixedDebt[]
+  variableDebts: VariableDebt[]
+  creditCards: CreditCard[]
+  cardPayments: CardPayment[]
+  monthlyBudgets: MonthlyBudget[]
+  alerts: Alert[]
+  currentMonth: number
+  currentYear: number
+}
diff --git a/lib/utils.ts b/lib/utils.ts
new file mode 100644
index 0000000..c279037
--- /dev/null
+++ b/lib/utils.ts
@@ -0,0 +1,189 @@
+import { clsx, type ClassValue } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+import { FixedDebt, VariableDebt, CardPayment } from './types'
+
+/**
+ * Combina clases de Tailwind CSS usando clsx y tailwind-merge
+ * Permite combinar múltiples clases condicionalmente
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs))
+}
+
+/**
+ * Formatea un número como moneda (pesos argentinos/USD)
+ * Ejemplo: 1500.50 -> "$ 1.500,50"
+ */
+export function formatCurrency(amount: number): string {
+  const formatter = new Intl.NumberFormat('es-AR', {
+    style: 'currency',
+    currency: 'ARS',
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  })
+  return formatter.format(amount)
+}
+
+/**
+ * Formatea una fecha en formato legible en español
+ * Ejemplo: "28 de enero de 2026"
+ */
+export function formatDate(date: string | Date): string {
+  const d = typeof date === 'string' ? new Date(date) : date
+  const formatter = new Intl.DateTimeFormat('es-AR', {
+    day: 'numeric',
+    month: 'long',
+    year: 'numeric',
+  })
+  return formatter.format(d)
+}
+
+/**
+ * Formatea una fecha en formato corto
+ * Ejemplo: "28/01/2026"
+ */
+export function formatShortDate(date: string | Date): string {
+  const d = typeof date === 'string' ? new Date(date) : date
+  const formatter = new Intl.DateTimeFormat('es-AR', {
+    day: '2-digit',
+    month: '2-digit',
+    year: 'numeric',
+  })
+  return formatter.format(d)
+}
+
+/**
+ * Calcula los días hasta una fecha específica
+ * Retorna un número negativo si la fecha ya pasó
+ */
+export function getDaysUntil(date: string | Date): number {
+  const targetDate = typeof date === 'string' ? new Date(date) : date
+  const today = new Date()
+
+  // Reset hours to compare only dates
+  const target = new Date(targetDate.getFullYear(), targetDate.getMonth(), targetDate.getDate())
+  const current = new Date(today.getFullYear(), today.getMonth(), today.getDate())
+
+  const diffTime = target.getTime() - current.getTime()
+  const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24))
+
+  return diffDays
+}
+
+/**
+ * Obtiene la próxima fecha para un día específico del mes
+ * Si el día ya pasó este mes, devuelve el del mes siguiente
+ */
+export function getNextDateByDay(dayOfMonth: number): Date {
+  const today = new Date()
+  const currentYear = today.getFullYear()
+  const currentMonth = today.getMonth()
+  const currentDay = today.getDate()
+
+  let targetYear = currentYear
+  let targetMonth = currentMonth
+
+  // Si el día ya pasó este mes, ir al siguiente mes
+  if (currentDay > dayOfMonth) {
+    targetMonth += 1
+    if (targetMonth > 11) {
+      targetMonth = 0
+      targetYear += 1
+    }
+  }
+
+  // Ajustar si el día no existe en el mes objetivo (ej: 31 de febrero)
+  const lastDayOfMonth = new Date(targetYear, targetMonth + 1, 0).getDate()
+  const targetDay = Math.min(dayOfMonth, lastDayOfMonth)
+
+  return new Date(targetYear, targetMonth, targetDay)
+}
+
+/**
+ * Obtiene el nombre del mes en español
+ * El mes debe ser 1-12 (enero = 1)
+ */
+export function getMonthName(month: number): string {
+  const monthNames = [
+    'enero',
+    'febrero',
+    'marzo',
+    'abril',
+    'mayo',
+    'junio',
+    'julio',
+    'agosto',
+    'septiembre',
+    'octubre',
+    'noviembre',
+    'diciembre',
+  ]
+
+  if (month < 1 || month > 12) {
+    throw new Error('El mes debe estar entre 1 y 12')
+  }
+
+  return monthNames[month - 1]
+}
+
+/**
+ * Calcula el total de deudas fijas no pagadas
+ */
+export function calculateTotalFixedDebts(debts: FixedDebt[]): number {
+  return debts
+    .filter((debt) => !debt.isPaid)
+    .reduce((total, debt) => total + debt.amount, 0)
+}
+
+/**
+ * Calcula el total de deudas variables no pagadas
+ */
+export function calculateTotalVariableDebts(debts: VariableDebt[]): number {
+  return debts
+    .filter((debt) => !debt.isPaid)
+    .reduce((total, debt) => total + debt.amount, 0)
+}
+
+/**
+ * Calcula el total de pagos de tarjeta
+ * Opcionalmente filtrados por cardId
+ */
+export function calculateCardPayments(
+  payments: CardPayment[],
+  cardId?: string
+): number {
+  const filteredPayments = cardId
+    ? payments.filter((payment) => payment.cardId === cardId)
+    : payments
+
+  return filteredPayments.reduce((total, payment) => total + payment.amount, 0)
+}
+
+/**
+ * Calcula la próxima fecha de cierre de tarjeta
+ * Si el día de cierre ya pasó este mes, devuelve el del mes siguiente
+ */
+export function calculateNextClosingDate(closingDay: number): Date {
+  return getNextDateByDay(closingDay)
+}
+
+/**
+ * Calcula la próxima fecha de vencimiento de tarjeta
+ * Si el día de vencimiento ya pasó este mes, devuelve el del mes siguiente
+ */
+export function calculateNextDueDate(dueDay: number): Date {
+  return getNextDateByDay(dueDay)
+}
+
+/**
+ * Calcula el porcentaje de utilización de una tarjeta de crédito
+ * Retorna un valor entre 0 y 100
+ */
+export function getCardUtilization(balance: number, limit: number): number {
+  if (limit <= 0) {
+    return 0
+  }
+
+  const utilization = (balance / limit) * 100
+  return Math.min(Math.max(utilization, 0), 100)
+}
diff --git a/next.config.js b/next.config.js
new file mode 100644
index 0000000..96da22f
--- /dev/null
+++ b/next.config.js
@@ -0,0 +1,10 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'export',
+  distDir: 'dist',
+  images: {
+    unoptimized: true,
+  },
+};
+
+module.exports = nextConfig;
diff --git a/package-lock.json b/package-lock.json
new file mode 100644
index 0000000..4eab2e5
--- /dev/null
+++ b/package-lock.json
@@ -0,0 +1,2040 @@
+{
+  "name": "finanzas",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "finanzas",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "@types/node": "^25.1.0",
+        "@types/react": "^19.2.10",
+        "@types/react-dom": "^19.2.3",
+        "@types/uuid": "^10.0.0",
+        "autoprefixer": "^10.4.23",
+        "class-variance-authority": "^0.7.1",
+        "clsx": "^2.1.1",
+        "date-fns": "^4.1.0",
+        "lucide-react": "^0.563.0",
+        "next": "^14.2.35",
+        "postcss": "^8.5.6",
+        "react": "^18.3.1",
+        "react-dom": "^18.3.1",
+        "recharts": "^3.7.0",
+        "tailwind-merge": "^3.4.0",
+        "tailwindcss": "^3.4.19",
+        "uuid": "^13.0.0",
+        "zustand": "^5.0.10"
+      },
+      "devDependencies": {
+        "typescript": "^5.9.3"
+      }
+    },
+    "node_modules/@alloc/quick-lru": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
+      "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@next/env": {
+      "version": "14.2.35",
+      "resolved": "https://registry.npmjs.org/@next/env/-/env-14.2.35.tgz",
+      "integrity": "sha512-DuhvCtj4t9Gwrx80dmz2F4t/zKQ4ktN8WrMwOuVzkJfBilwAwGr6v16M5eI8yCuZ63H9TTuEU09Iu2HqkzFPVQ==",
+      "license": "MIT"
+    },
+    "node_modules/@next/swc-darwin-arm64": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-arm64/-/swc-darwin-arm64-14.2.33.tgz",
+      "integrity": "sha512-HqYnb6pxlsshoSTubdXKu15g3iivcbsMXg4bYpjL2iS/V6aQot+iyF4BUc2qA/J/n55YtvE4PHMKWBKGCF/+wA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-darwin-x64": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-darwin-x64/-/swc-darwin-x64-14.2.33.tgz",
+      "integrity": "sha512-8HGBeAE5rX3jzKvF593XTTFg3gxeU4f+UWnswa6JPhzaR6+zblO5+fjltJWIZc4aUalqTclvN2QtTC37LxvZAA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-gnu": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-gnu/-/swc-linux-arm64-gnu-14.2.33.tgz",
+      "integrity": "sha512-JXMBka6lNNmqbkvcTtaX8Gu5by9547bukHQvPoLe9VRBx1gHwzf5tdt4AaezW85HAB3pikcvyqBToRTDA4DeLw==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm64-musl": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm64-musl/-/swc-linux-arm64-musl-14.2.33.tgz",
+      "integrity": "sha512-Bm+QulsAItD/x6Ih8wGIMfRJy4G73tu1HJsrccPW6AfqdZd0Sfm5Imhgkgq2+kly065rYMnCOxTBvmvFY1BKfg==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-gnu": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.33.tgz",
+      "integrity": "sha512-FnFn+ZBgsVMbGDsTqo8zsnRzydvsGV8vfiWwUo1LD8FTmPTdV+otGSWKc4LJec0oSexFnCYVO4hX8P8qQKaSlg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-x64-musl": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.33.tgz",
+      "integrity": "sha512-345tsIWMzoXaQndUTDv1qypDRiebFxGYx9pYkhwY4hBRaOLt8UGfiWKr9FSSHs25dFIf8ZqIFaPdy5MljdoawA==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-arm64-msvc": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-arm64-msvc/-/swc-win32-arm64-msvc-14.2.33.tgz",
+      "integrity": "sha512-nscpt0G6UCTkrT2ppnJnFsYbPDQwmum4GNXYTeoTIdsmMydSKFz9Iny2jpaRupTb+Wl298+Rh82WKzt9LCcqSQ==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-ia32-msvc": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-ia32-msvc/-/swc-win32-ia32-msvc-14.2.33.tgz",
+      "integrity": "sha512-pc9LpGNKhJ0dXQhZ5QMmYxtARwwmWLpeocFmVG5Z0DzWq5Uf0izcI8tLc+qOpqxO1PWqZ5A7J1blrUIKrIFc7Q==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-win32-x64-msvc": {
+      "version": "14.2.33",
+      "resolved": "https://registry.npmjs.org/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-14.2.33.tgz",
+      "integrity": "sha512-nOjfZMy8B94MdisuzZo9/57xuFVLHJaDj5e/xrduJp9CV2/HrfxTRH2fbyLe+K9QT41WBLUd4iXX3R7jBp0EUg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
+        "run-parallel": "^1.1.9"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.stat": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@nodelib/fs.walk": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.scandir": "2.1.5",
+        "fastq": "^1.6.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@reduxjs/toolkit": {
+      "version": "2.11.2",
+      "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-2.11.2.tgz",
+      "integrity": "sha512-Kd6kAHTA6/nUpp8mySPqj3en3dm0tdMIgbttnQ1xFMVpufoj+ADi8pXLBsd4xzTRHQa7t/Jv8W5UnCuW4kuWMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@standard-schema/spec": "^1.0.0",
+        "@standard-schema/utils": "^0.3.0",
+        "immer": "^11.0.0",
+        "redux": "^5.0.1",
+        "redux-thunk": "^3.1.0",
+        "reselect": "^5.1.0"
+      },
+      "peerDependencies": {
+        "react": "^16.9.0 || ^17.0.0 || ^18 || ^19",
+        "react-redux": "^7.2.1 || ^8.1.3 || ^9.0.0"
+      },
+      "peerDependenciesMeta": {
+        "react": {
+          "optional": true
+        },
+        "react-redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@reduxjs/toolkit/node_modules/immer": {
+      "version": "11.1.3",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-11.1.3.tgz",
+      "integrity": "sha512-6jQTc5z0KJFtr1UgFpIL3N9XSC3saRaI9PwWtzM2pSqkNGtiNkYY2OSwkOGDK2XcTRcLb1pi/aNkKZz0nxVH4Q==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/@standard-schema/spec": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.1.0.tgz",
+      "integrity": "sha512-l2aFy5jALhniG5HgqrD6jXLi/rUWrKvqN/qJx6yoJsgKhblVd+iqqU4RCXavm/jPityDo5TCvKMnpjKnOriy0w==",
+      "license": "MIT"
+    },
+    "node_modules/@standard-schema/utils": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/@standard-schema/utils/-/utils-0.3.0.tgz",
+      "integrity": "sha512-e7Mew686owMaPJVNNLs55PUvgz371nKgwsc4vxE49zsODpJEnxgxRo2y/OKrqueavXgZNMDVj3DdHFlaSAeU8g==",
+      "license": "MIT"
+    },
+    "node_modules/@swc/counter": {
+      "version": "0.1.3",
+      "resolved": "https://registry.npmjs.org/@swc/counter/-/counter-0.1.3.tgz",
+      "integrity": "sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.5.tgz",
+      "integrity": "sha512-KGYxvIOXcceOAbEk4bi/dVLEK9z8sZ0uBB3Il5b1rhfClSpcX0yfRO0KmTkqR2cnQDymwLB+25ZyMzICg/cm/A==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/counter": "^0.1.3",
+        "tslib": "^2.4.0"
+      }
+    },
+    "node_modules/@types/d3-array": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-array/-/d3-array-3.2.2.tgz",
+      "integrity": "sha512-hOLWVbm7uRza0BYXpIIW5pxfrKe0W+D5lrFiAEYR+pb6w3N2SwSMaJbXdUfSEv+dT4MfHBLtn5js0LAWaO6otw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-ease": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-ease/-/d3-ease-3.0.2.tgz",
+      "integrity": "sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-path": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@types/d3-path/-/d3-path-3.1.1.tgz",
+      "integrity": "sha512-VMZBYyQvbGmWyWVea0EHs/BwLgxc+MKi1zLDCONksozI4YJMcTt8ZEuIR4Sb1MMTE8MMW49v0IwI5+b7RmfWlg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-scale": {
+      "version": "4.0.9",
+      "resolved": "https://registry.npmjs.org/@types/d3-scale/-/d3-scale-4.0.9.tgz",
+      "integrity": "sha512-dLmtwB8zkAeO/juAMfnV+sItKjlsw2lKdZVVy6LRr0cBmegxSABiLEpGVmSJJ8O08i4+sGR6qQtb6WtuwJdvVw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-time": "*"
+      }
+    },
+    "node_modules/@types/d3-shape": {
+      "version": "3.1.8",
+      "resolved": "https://registry.npmjs.org/@types/d3-shape/-/d3-shape-3.1.8.tgz",
+      "integrity": "sha512-lae0iWfcDeR7qt7rA88BNiqdvPS5pFVPpo5OfjElwNaT2yyekbM0C9vK+yqBqEmHr6lDkRnYNoTBYlAgJa7a4w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-path": "*"
+      }
+    },
+    "node_modules/@types/d3-time": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/d3-time/-/d3-time-3.0.4.tgz",
+      "integrity": "sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-timer": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/@types/d3-timer/-/d3-timer-3.0.2.tgz",
+      "integrity": "sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/node": {
+      "version": "25.1.0",
+      "resolved": "https://registry.npmjs.org/@types/node/-/node-25.1.0.tgz",
+      "integrity": "sha512-t7frlewr6+cbx+9Ohpl0NOTKXZNV9xHRmNOvql47BFJKcEG1CxtxlPEEe+gR9uhVWM4DwhnvTF110mIL4yP9RA==",
+      "license": "MIT",
+      "dependencies": {
+        "undici-types": "~7.16.0"
+      }
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.10",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.10.tgz",
+      "integrity": "sha512-WPigyYuGhgZ/cTPRXB2EwUw+XvsRA3GqHlsP4qteqrnnjDrApbS7MxcGr/hke5iUoeB7E/gQtrs9I37zAJ0Vjw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-dom": {
+      "version": "19.2.3",
+      "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.2.3.tgz",
+      "integrity": "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "^19.2.0"
+      }
+    },
+    "node_modules/@types/use-sync-external-store": {
+      "version": "0.0.6",
+      "resolved": "https://registry.npmjs.org/@types/use-sync-external-store/-/use-sync-external-store-0.0.6.tgz",
+      "integrity": "sha512-zFDAD+tlpf2r4asuHEj0XH6pY6i0g5NeAHPn+15wk3BV6JA69eERFXC1gyGThDkVa1zCyKr5jox1+2LbV/AMLg==",
+      "license": "MIT"
+    },
+    "node_modules/@types/uuid": {
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-10.0.0.tgz",
+      "integrity": "sha512-7gqG38EyHgyP1S+7+xomFtL+ZNHcKv6DwNaCZmJmo1vgMugyF3TCnXVg4t1uk89mLNwnLtnY3TpOpCOyp1/xHQ==",
+      "license": "MIT"
+    },
+    "node_modules/any-promise": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/any-promise/-/any-promise-1.3.0.tgz",
+      "integrity": "sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==",
+      "license": "MIT"
+    },
+    "node_modules/anymatch": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz",
+      "integrity": "sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==",
+      "license": "ISC",
+      "dependencies": {
+        "normalize-path": "^3.0.0",
+        "picomatch": "^2.0.4"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/arg": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
+      "license": "MIT"
+    },
+    "node_modules/autoprefixer": {
+      "version": "10.4.23",
+      "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.23.tgz",
+      "integrity": "sha512-YYTXSFulfwytnjAPlw8QHncHJmlvFKtczb8InXaAx9Q0LbfDnfEYDE55omerIJKihhmU61Ft+cAOSzQVaBUmeA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/autoprefixer"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "browserslist": "^4.28.1",
+        "caniuse-lite": "^1.0.30001760",
+        "fraction.js": "^5.3.4",
+        "picocolors": "^1.1.1",
+        "postcss-value-parser": "^4.2.0"
+      },
+      "bin": {
+        "autoprefixer": "bin/autoprefixer"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/baseline-browser-mapping": {
+      "version": "2.9.19",
+      "resolved": "https://registry.npmjs.org/baseline-browser-mapping/-/baseline-browser-mapping-2.9.19.tgz",
+      "integrity": "sha512-ipDqC8FrAl/76p2SSWKSI+H9tFwm7vYqXQrItCuiVPt26Km0jS+NzSsBWAaBusvSbQcfJG+JitdMm+wZAgTYqg==",
+      "license": "Apache-2.0",
+      "bin": {
+        "baseline-browser-mapping": "dist/cli.js"
+      }
+    },
+    "node_modules/binary-extensions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.3.0.tgz",
+      "integrity": "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/braces": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
+      "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
+      "license": "MIT",
+      "dependencies": {
+        "fill-range": "^7.1.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/browserslist": {
+      "version": "4.28.1",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.28.1.tgz",
+      "integrity": "sha512-ZC5Bd0LgJXgwGqUknZY/vkUQ04r8NXnJZ3yYi4vDmSiZmC/pdSN0NbNRPxZpbtO4uAfDUAFffO8IZoM3Gj8IkA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "baseline-browser-mapping": "^2.9.0",
+        "caniuse-lite": "^1.0.30001759",
+        "electron-to-chromium": "^1.5.263",
+        "node-releases": "^2.0.27",
+        "update-browserslist-db": "^1.2.0"
+      },
+      "bin": {
+        "browserslist": "cli.js"
+      },
+      "engines": {
+        "node": "^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7"
+      }
+    },
+    "node_modules/busboy": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/busboy/-/busboy-1.6.0.tgz",
+      "integrity": "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA==",
+      "dependencies": {
+        "streamsearch": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=10.16.0"
+      }
+    },
+    "node_modules/camelcase-css": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
+      "integrity": "sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001766",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001766.tgz",
+      "integrity": "sha512-4C0lfJ0/YPjJQHagaE9x2Elb69CIqEPZeG0anQt9SIvIoOH4a4uaRl73IavyO+0qZh6MDLH//DrXThEYKHkmYA==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "CC-BY-4.0"
+    },
+    "node_modules/chokidar": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz",
+      "integrity": "sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==",
+      "license": "MIT",
+      "dependencies": {
+        "anymatch": "~3.1.2",
+        "braces": "~3.0.2",
+        "glob-parent": "~5.1.2",
+        "is-binary-path": "~2.1.0",
+        "is-glob": "~4.0.1",
+        "normalize-path": "~3.0.0",
+        "readdirp": "~3.6.0"
+      },
+      "engines": {
+        "node": ">= 8.10.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      },
+      "optionalDependencies": {
+        "fsevents": "~2.3.2"
+      }
+    },
+    "node_modules/chokidar/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/class-variance-authority": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.1.tgz",
+      "integrity": "sha512-Ka+9Trutv7G8M6WT6SeiRWz792K5qEqIGEGzXKhAE6xOWAY6pPH8U+9IY3oCMv6kqTmLsv7Xh/2w2RigkePMsg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "clsx": "^2.1.1"
+      },
+      "funding": {
+        "url": "https://polar.sh/cva"
+      }
+    },
+    "node_modules/client-only": {
+      "version": "0.0.1",
+      "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
+      "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==",
+      "license": "MIT"
+    },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/commander": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz",
+      "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "license": "MIT",
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
+    },
+    "node_modules/d3-array": {
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/d3-array/-/d3-array-3.2.4.tgz",
+      "integrity": "sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==",
+      "license": "ISC",
+      "dependencies": {
+        "internmap": "1 - 2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-format": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/d3-format/-/d3-format-3.1.2.tgz",
+      "integrity": "sha512-AJDdYOdnyRDV5b6ArilzCPPwc1ejkHcoyFarqlPqT7zRYjhavcT3uSrqcMvsgh2CgoPbK3RCwyHaVyxYcP2Arg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-path": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-3.1.0.tgz",
+      "integrity": "sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-scale": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/d3-scale/-/d3-scale-4.0.2.tgz",
+      "integrity": "sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2.10.0 - 3",
+        "d3-format": "1 - 3",
+        "d3-interpolate": "1.2.0 - 3",
+        "d3-time": "2.1.1 - 3",
+        "d3-time-format": "2 - 4"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-shape": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/d3-shape/-/d3-shape-3.2.0.tgz",
+      "integrity": "sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-path": "^3.1.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time/-/d3-time-3.1.0.tgz",
+      "integrity": "sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-array": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-time-format": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/d3-time-format/-/d3-time-format-4.1.0.tgz",
+      "integrity": "sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-time": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/date-fns": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
+      "integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kossnocorp"
+      }
+    },
+    "node_modules/decimal.js-light": {
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/decimal.js-light/-/decimal.js-light-2.5.1.tgz",
+      "integrity": "sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==",
+      "license": "MIT"
+    },
+    "node_modules/didyoumean": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
+      "integrity": "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "license": "MIT"
+    },
+    "node_modules/electron-to-chromium": {
+      "version": "1.5.279",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.5.279.tgz",
+      "integrity": "sha512-0bblUU5UNdOt5G7XqGiJtpZMONma6WAfq9vsFmtn9x1+joAObr6x1chfqyxFSDCAFwFhCQDrqeAr6MYdpwJ9Hg==",
+      "license": "ISC"
+    },
+    "node_modules/es-toolkit": {
+      "version": "1.44.0",
+      "resolved": "https://registry.npmjs.org/es-toolkit/-/es-toolkit-1.44.0.tgz",
+      "integrity": "sha512-6penXeZalaV88MM3cGkFZZfOoLGWshWWfdy0tWw/RlVVyhvMaWSBTOvXNeiW3e5FwdS5ePW0LGEu17zT139ktg==",
+      "license": "MIT",
+      "workspaces": [
+        "docs",
+        "benchmarks"
+      ]
+    },
+    "node_modules/escalade": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.2.0.tgz",
+      "integrity": "sha512-WUj2qlxaQtO4g6Pq5c29GTcWGDyd8itL8zTlipgECz3JesAiiOKotd8JU6otB3PACgG6xkJUyVhboMS+bje/jA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/eventemitter3": {
+      "version": "5.0.4",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-5.0.4.tgz",
+      "integrity": "sha512-mlsTRyGaPBjPedk6Bvw+aqbsXDtoAyAzm5MO7JgU+yVRyMQ5O8bD4Kcci7BS85f93veegeCPkL8R4GLClnjLFw==",
+      "license": "MIT"
+    },
+    "node_modules/fast-glob": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
+      "integrity": "sha512-7MptL8U0cqcFdzIzwOTHoilX9x5BrNqye7Z/LuC7kCMRio1EMSyqRK3BEAUD7sXRq4iT4AzTVuZdhgQ2TCvYLg==",
+      "license": "MIT",
+      "dependencies": {
+        "@nodelib/fs.stat": "^2.0.2",
+        "@nodelib/fs.walk": "^1.2.3",
+        "glob-parent": "^5.1.2",
+        "merge2": "^1.3.0",
+        "micromatch": "^4.0.8"
+      },
+      "engines": {
+        "node": ">=8.6.0"
+      }
+    },
+    "node_modules/fast-glob/node_modules/glob-parent": {
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/fastq": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.20.1.tgz",
+      "integrity": "sha512-GGToxJ/w1x32s/D2EKND7kTil4n8OVk/9mycTc4VDza13lOvpUZTGX3mFSCtV9ksdGBVzvsyAVLM6mHFThxXxw==",
+      "license": "ISC",
+      "dependencies": {
+        "reusify": "^1.0.4"
+      }
+    },
+    "node_modules/fill-range": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
+      "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
+      "license": "MIT",
+      "dependencies": {
+        "to-regex-range": "^5.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/fraction.js": {
+      "version": "5.3.4",
+      "resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-5.3.4.tgz",
+      "integrity": "sha512-1X1NTtiJphryn/uLQz3whtY6jK3fTqoE3ohKs0tT+Ujr1W59oopxmoEh7Lu5p6vBaPbgoM0bzveAW4Qi5RyWDQ==",
+      "license": "MIT",
+      "engines": {
+        "node": "*"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/rawify"
+      }
+    },
+    "node_modules/fsevents": {
+      "version": "2.3.3",
+      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
+      "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
+      }
+    },
+    "node_modules/function-bind": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
+      "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/graceful-fs": {
+      "version": "4.2.11",
+      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz",
+      "integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
+      "license": "ISC"
+    },
+    "node_modules/hasown": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
+      "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
+      "license": "MIT",
+      "dependencies": {
+        "function-bind": "^1.1.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/immer": {
+      "version": "10.2.0",
+      "resolved": "https://registry.npmjs.org/immer/-/immer-10.2.0.tgz",
+      "integrity": "sha512-d/+XTN3zfODyjr89gM3mPq1WNX2B8pYsu7eORitdwyA2sBubnTl3laYlBk4sXY5FUa5qTZGBDPJICVbvqzjlbw==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/immer"
+      }
+    },
+    "node_modules/internmap": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/internmap/-/internmap-2.0.3.tgz",
+      "integrity": "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/is-binary-path": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
+      "integrity": "sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==",
+      "license": "MIT",
+      "dependencies": {
+        "binary-extensions": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "license": "MIT",
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-number": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
+      "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
+    "node_modules/jiti": {
+      "version": "1.21.7",
+      "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.21.7.tgz",
+      "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
+      "license": "MIT",
+      "peer": true,
+      "bin": {
+        "jiti": "bin/jiti.js"
+      }
+    },
+    "node_modules/js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "license": "MIT"
+    },
+    "node_modules/lilconfig": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
+      "integrity": "sha512-/vlFKAoH5Cgt3Ie+JLhRbwOsCQePABiU3tJ1egGvyQ+33R/vcwM2Zl2QR/LzjsBeItPt3oSVXapn+m4nQDvpzw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antonk52"
+      }
+    },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "license": "MIT"
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
+    "node_modules/lucide-react": {
+      "version": "0.563.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.563.0.tgz",
+      "integrity": "sha512-8dXPB2GI4dI8jV4MgUDGBeLdGk8ekfqVZ0BdLcrRzocGgG75ltNEmWS+gE7uokKF/0oSUuczNDT+g9hFJ23FkA==",
+      "license": "ISC",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/merge2": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
+      "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/micromatch": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
+      "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
+      "license": "MIT",
+      "dependencies": {
+        "braces": "^3.0.3",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=8.6"
+      }
+    },
+    "node_modules/mz": {
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
+      "integrity": "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0",
+        "object-assign": "^4.0.1",
+        "thenify-all": "^1.0.0"
+      }
+    },
+    "node_modules/nanoid": {
+      "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
+    "node_modules/next": {
+      "version": "14.2.35",
+      "resolved": "https://registry.npmjs.org/next/-/next-14.2.35.tgz",
+      "integrity": "sha512-KhYd2Hjt/O1/1aZVX3dCwGXM1QmOV4eNM2UTacK5gipDdPN/oHHK/4oVGy7X8GMfPMsUTUEmGlsy0EY1YGAkig==",
+      "license": "MIT",
+      "dependencies": {
+        "@next/env": "14.2.35",
+        "@swc/helpers": "0.5.5",
+        "busboy": "1.6.0",
+        "caniuse-lite": "^1.0.30001579",
+        "graceful-fs": "^4.2.11",
+        "postcss": "8.4.31",
+        "styled-jsx": "5.1.1"
+      },
+      "bin": {
+        "next": "dist/bin/next"
+      },
+      "engines": {
+        "node": ">=18.17.0"
+      },
+      "optionalDependencies": {
+        "@next/swc-darwin-arm64": "14.2.33",
+        "@next/swc-darwin-x64": "14.2.33",
+        "@next/swc-linux-arm64-gnu": "14.2.33",
+        "@next/swc-linux-arm64-musl": "14.2.33",
+        "@next/swc-linux-x64-gnu": "14.2.33",
+        "@next/swc-linux-x64-musl": "14.2.33",
+        "@next/swc-win32-arm64-msvc": "14.2.33",
+        "@next/swc-win32-ia32-msvc": "14.2.33",
+        "@next/swc-win32-x64-msvc": "14.2.33"
+      },
+      "peerDependencies": {
+        "@opentelemetry/api": "^1.1.0",
+        "@playwright/test": "^1.41.2",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "sass": "^1.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@opentelemetry/api": {
+          "optional": true
+        },
+        "@playwright/test": {
+          "optional": true
+        },
+        "sass": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/next/node_modules/postcss": {
+      "version": "8.4.31",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
+      "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "nanoid": "^3.3.6",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/node-releases": {
+      "version": "2.0.27",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.27.tgz",
+      "integrity": "sha512-nmh3lCkYZ3grZvqcCH+fjmQ7X+H0OeZgP40OierEaAptX4XofMh5kwNbWh7lBduUzCcV/8kZ+NDLCwm2iorIlA==",
+      "license": "MIT"
+    },
+    "node_modules/normalize-path": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
+      "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object-hash": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/object-hash/-/object-hash-3.0.0.tgz",
+      "integrity": "sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "license": "MIT"
+    },
+    "node_modules/picocolors": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
+      "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
+      "license": "ISC"
+    },
+    "node_modules/picomatch": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/pify": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
+      "integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/pirates": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.7.tgz",
+      "integrity": "sha512-TfySrs/5nm8fQJDcBDuUng3VOUKsd7S+zqvbOTiGXHfxX4wK31ard+hoNuvkicM/2YFzlpDgABOevKSsB4G/FA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
+    "node_modules/postcss": {
+      "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "nanoid": "^3.3.11",
+        "picocolors": "^1.1.1",
+        "source-map-js": "^1.2.1"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-import": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-15.1.0.tgz",
+      "integrity": "sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==",
+      "license": "MIT",
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
+    "node_modules/postcss-js": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.1.0.tgz",
+      "integrity": "sha512-oIAOTqgIo7q2EOwbhb8UalYePMvYoIeRY2YKntdpFQXNosSu3vLrniGgmH9OKs/qAkfoj5oB3le/7mINW1LCfw==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "camelcase-css": "^2.0.1"
+      },
+      "engines": {
+        "node": "^12 || ^14 || >= 16"
+      },
+      "peerDependencies": {
+        "postcss": "^8.4.21"
+      }
+    },
+    "node_modules/postcss-load-config": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-6.0.1.tgz",
+      "integrity": "sha512-oPtTM4oerL+UXmx+93ytZVN82RrlY/wPUV8IeDxFrzIjXOLF1pN+EmKPLbubvKHT2HC20xXsCAH2Z+CKV6Oz/g==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "lilconfig": "^3.1.1"
+      },
+      "engines": {
+        "node": ">= 18"
+      },
+      "peerDependencies": {
+        "jiti": ">=1.21.0",
+        "postcss": ">=8.0.9",
+        "tsx": "^4.8.1",
+        "yaml": "^2.4.2"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        },
+        "postcss": {
+          "optional": true
+        },
+        "tsx": {
+          "optional": true
+        },
+        "yaml": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/postcss-nested": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-6.2.0.tgz",
+      "integrity": "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "postcss-selector-parser": "^6.1.1"
+      },
+      "engines": {
+        "node": ">=12.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.2.14"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
+      "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
+      "license": "MIT",
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "license": "MIT"
+    },
+    "node_modules/queue-microtask": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
+      "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT"
+    },
+    "node_modules/react": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
+      "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/react-dom": {
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
+      "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "loose-envify": "^1.1.0",
+        "scheduler": "^0.23.2"
+      },
+      "peerDependencies": {
+        "react": "^18.3.1"
+      }
+    },
+    "node_modules/react-is": {
+      "version": "19.2.4",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.2.4.tgz",
+      "integrity": "sha512-W+EWGn2v0ApPKgKKCy/7s7WHXkboGcsrXE+2joLyVxkbyVQfO3MUEaUQDHoSmb8TFFrSKYa9mw64WZHNHSDzYA==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/react-redux": {
+      "version": "9.2.0",
+      "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
+      "integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
+      "license": "MIT",
+      "peer": true,
+      "dependencies": {
+        "@types/use-sync-external-store": "^0.0.6",
+        "use-sync-external-store": "^1.4.0"
+      },
+      "peerDependencies": {
+        "@types/react": "^18.2.25 || ^19",
+        "react": "^18.0 || ^19",
+        "redux": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "redux": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/read-cache": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
+      "integrity": "sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==",
+      "license": "MIT",
+      "dependencies": {
+        "pify": "^2.3.0"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
+      "license": "MIT",
+      "dependencies": {
+        "picomatch": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8.10.0"
+      }
+    },
+    "node_modules/recharts": {
+      "version": "3.7.0",
+      "resolved": "https://registry.npmjs.org/recharts/-/recharts-3.7.0.tgz",
+      "integrity": "sha512-l2VCsy3XXeraxIID9fx23eCb6iCBsxUQDnE8tWm6DFdszVAO7WVY/ChAD9wVit01y6B2PMupYiMmQwhgPHc9Ew==",
+      "license": "MIT",
+      "workspaces": [
+        "www"
+      ],
+      "dependencies": {
+        "@reduxjs/toolkit": "1.x.x || 2.x.x",
+        "clsx": "^2.1.1",
+        "decimal.js-light": "^2.5.1",
+        "es-toolkit": "^1.39.3",
+        "eventemitter3": "^5.0.1",
+        "immer": "^10.1.1",
+        "react-redux": "8.x.x || 9.x.x",
+        "reselect": "5.1.1",
+        "tiny-invariant": "^1.3.3",
+        "use-sync-external-store": "^1.2.2",
+        "victory-vendor": "^37.0.2"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-is": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/redux": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
+      "integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
+      "license": "MIT",
+      "peer": true
+    },
+    "node_modules/redux-thunk": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-3.1.0.tgz",
+      "integrity": "sha512-NW2r5T6ksUKXCabzhL9z+h206HQw/NJkcLm1GPImRQ8IzfXwRGqjVhKJGauHirT0DAuyy6hjdnMZaRoAcy0Klw==",
+      "license": "MIT",
+      "peerDependencies": {
+        "redux": "^5.0.0"
+      }
+    },
+    "node_modules/reselect": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
+      "integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
+      "license": "MIT"
+    },
+    "node_modules/resolve": {
+      "version": "1.22.11",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
+      "integrity": "sha512-RfqAvLnMl313r7c9oclB1HhUEAezcpLjz95wFH4LVuhk9JF/r22qmVP9AMmOU4vMX7Q8pN8jwNg/CSpdFnMjTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/reusify": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
+      "integrity": "sha512-g6QUff04oZpHs0eG5p83rFLhHeV00ug/Yf9nZM6fLeUrPguBTkTQOdpAWWspMh55TZfVQDPaN3NQJfbVRAxdIw==",
+      "license": "MIT",
+      "engines": {
+        "iojs": ">=1.0.0",
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/run-parallel": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz",
+      "integrity": "sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==",
+      "funding": [
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/feross"
+        },
+        {
+          "type": "patreon",
+          "url": "https://www.patreon.com/feross"
+        },
+        {
+          "type": "consulting",
+          "url": "https://feross.org/support"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "queue-microtask": "^1.2.2"
+      }
+    },
+    "node_modules/scheduler": {
+      "version": "0.23.2",
+      "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz",
+      "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.1.0"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/streamsearch": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
+      "integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
+    "node_modules/styled-jsx": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.1.tgz",
+      "integrity": "sha512-pW7uC1l4mBZ8ugbiZrcIsiIvVx1UmTfw7UkC3Um2tmfUq9Bhk8IiyEIPl6F8agHgjzku6j0xQEZbfA5uSgSaCw==",
+      "license": "MIT",
+      "dependencies": {
+        "client-only": "0.0.1"
+      },
+      "engines": {
+        "node": ">= 12.0.0"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0 || 17.x.x || ^18.0.0-0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "babel-plugin-macros": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/sucrase": {
+      "version": "3.35.1",
+      "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
+      "integrity": "sha512-DhuTmvZWux4H1UOnWMB3sk0sbaCVOoQZjv8u1rDoTV0HTdGem9hkAZtl4JZy8P2z4Bg0nT+YMeOFyVr4zcG5Tw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.2",
+        "commander": "^4.0.0",
+        "lines-and-columns": "^1.1.6",
+        "mz": "^2.7.0",
+        "pirates": "^4.0.1",
+        "tinyglobby": "^0.2.11",
+        "ts-interface-checker": "^0.1.9"
+      },
+      "bin": {
+        "sucrase": "bin/sucrase",
+        "sucrase-node": "bin/sucrase-node"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      }
+    },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/tailwind-merge": {
+      "version": "3.4.0",
+      "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.4.0.tgz",
+      "integrity": "sha512-uSaO4gnW+b3Y2aWoWfFpX62vn2sR3skfhbjsEnaBI81WD1wBLlHZe5sWf0AqjksNdYTbGBEd0UasQMT3SNV15g==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/dcastil"
+      }
+    },
+    "node_modules/tailwindcss": {
+      "version": "3.4.19",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.19.tgz",
+      "integrity": "sha512-3ofp+LL8E+pK/JuPLPggVAIaEuhvIz4qNcf3nA1Xn2o/7fb7s/TYpHhwGDv1ZU3PkBluUVaF8PyCHcm48cKLWQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@alloc/quick-lru": "^5.2.0",
+        "arg": "^5.0.2",
+        "chokidar": "^3.6.0",
+        "didyoumean": "^1.2.2",
+        "dlv": "^1.1.3",
+        "fast-glob": "^3.3.2",
+        "glob-parent": "^6.0.2",
+        "is-glob": "^4.0.3",
+        "jiti": "^1.21.7",
+        "lilconfig": "^3.1.3",
+        "micromatch": "^4.0.8",
+        "normalize-path": "^3.0.0",
+        "object-hash": "^3.0.0",
+        "picocolors": "^1.1.1",
+        "postcss": "^8.4.47",
+        "postcss-import": "^15.1.0",
+        "postcss-js": "^4.0.1",
+        "postcss-load-config": "^4.0.2 || ^5.0 || ^6.0",
+        "postcss-nested": "^6.2.0",
+        "postcss-selector-parser": "^6.1.2",
+        "resolve": "^1.22.8",
+        "sucrase": "^3.35.0"
+      },
+      "bin": {
+        "tailwind": "lib/cli.js",
+        "tailwindcss": "lib/cli.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
+    "node_modules/thenify": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/thenify/-/thenify-3.3.1.tgz",
+      "integrity": "sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==",
+      "license": "MIT",
+      "dependencies": {
+        "any-promise": "^1.0.0"
+      }
+    },
+    "node_modules/thenify-all": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/thenify-all/-/thenify-all-1.6.0.tgz",
+      "integrity": "sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==",
+      "license": "MIT",
+      "dependencies": {
+        "thenify": ">= 3.1.0 < 4"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tiny-invariant": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",
+      "integrity": "sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==",
+      "license": "MIT"
+    },
+    "node_modules/tinyglobby": {
+      "version": "0.2.15",
+      "resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
+      "integrity": "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ==",
+      "license": "MIT",
+      "dependencies": {
+        "fdir": "^6.5.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/SuperchupuDev"
+      }
+    },
+    "node_modules/tinyglobby/node_modules/fdir": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/fdir/-/fdir-6.5.0.tgz",
+      "integrity": "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "peerDependencies": {
+        "picomatch": "^3 || ^4"
+      },
+      "peerDependenciesMeta": {
+        "picomatch": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/tinyglobby/node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "license": "MIT",
+      "peer": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/to-regex-range": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
+      "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
+      "license": "MIT",
+      "dependencies": {
+        "is-number": "^7.0.0"
+      },
+      "engines": {
+        "node": ">=8.0"
+      }
+    },
+    "node_modules/ts-interface-checker": {
+      "version": "0.1.13",
+      "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
+      "integrity": "sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/undici-types": {
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-7.16.0.tgz",
+      "integrity": "sha512-Zz+aZWSj8LE6zoxD+xrjh4VfkIG8Ya6LvYkZqtUQGJPZjYl53ypCaUwWqo7eI0x66KBGeRo+mlBEkMSeSZ38Nw==",
+      "license": "MIT"
+    },
+    "node_modules/update-browserslist-db": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.2.3.tgz",
+      "integrity": "sha512-Js0m9cx+qOgDxo0eMiFGEueWztz+d4+M3rGlmKPT+T4IS/jP4ylw3Nwpu6cpTTP8R1MAC1kF4VbdLt3ARf209w==",
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/browserslist"
+        },
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/ai"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "escalade": "^3.2.0",
+        "picocolors": "^1.1.1"
+      },
+      "bin": {
+        "update-browserslist-db": "cli.js"
+      },
+      "peerDependencies": {
+        "browserslist": ">= 4.21.0"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/util-deprecate": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
+      "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==",
+      "license": "MIT"
+    },
+    "node_modules/uuid": {
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-13.0.0.tgz",
+      "integrity": "sha512-XQegIaBTVUjSHliKqcnFqYypAd4S+WCYt5NIeRs6w/UAry7z8Y9j5ZwRRL4kzq9U3sD6v+85er9FvkEaBpji2w==",
+      "funding": [
+        "https://github.com/sponsors/broofa",
+        "https://github.com/sponsors/ctavan"
+      ],
+      "license": "MIT",
+      "bin": {
+        "uuid": "dist-node/bin/uuid"
+      }
+    },
+    "node_modules/victory-vendor": {
+      "version": "37.3.6",
+      "resolved": "https://registry.npmjs.org/victory-vendor/-/victory-vendor-37.3.6.tgz",
+      "integrity": "sha512-SbPDPdDBYp+5MJHhBCAyI7wKM3d5ivekigc2Dk2s7pgbZ9wIgIBYGVw4zGHBml/qTFbexrofXW6Gu4noGxrOwQ==",
+      "license": "MIT AND ISC",
+      "dependencies": {
+        "@types/d3-array": "^3.0.3",
+        "@types/d3-ease": "^3.0.0",
+        "@types/d3-interpolate": "^3.0.1",
+        "@types/d3-scale": "^4.0.2",
+        "@types/d3-shape": "^3.1.0",
+        "@types/d3-time": "^3.0.0",
+        "@types/d3-timer": "^3.0.0",
+        "d3-array": "^3.1.6",
+        "d3-ease": "^3.0.1",
+        "d3-interpolate": "^3.0.1",
+        "d3-scale": "^4.0.2",
+        "d3-shape": "^3.1.0",
+        "d3-time": "^3.0.0",
+        "d3-timer": "^3.0.1"
+      }
+    },
+    "node_modules/zustand": {
+      "version": "5.0.10",
+      "resolved": "https://registry.npmjs.org/zustand/-/zustand-5.0.10.tgz",
+      "integrity": "sha512-U1AiltS1O9hSy3rul+Ub82ut2fqIAefiSuwECWt6jlMVUGejvf+5omLcRBSzqbRagSM3hQZbtzdeRc6QVScXTg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18.0.0",
+        "immer": ">=9.0.6",
+        "react": ">=18.0.0",
+        "use-sync-external-store": ">=1.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "use-sync-external-store": {
+          "optional": true
+        }
+      }
+    }
+  }
+}
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..12c68f5
--- /dev/null
+++ b/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "finanzas",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "type-check": "tsc --noEmit"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "description": "",
+  "dependencies": {
+    "@types/node": "^25.1.0",
+    "@types/react": "^19.2.10",
+    "@types/react-dom": "^19.2.3",
+    "@types/uuid": "^10.0.0",
+    "autoprefixer": "^10.4.23",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
+    "lucide-react": "^0.563.0",
+    "next": "^14.2.35",
+    "postcss": "^8.5.6",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "recharts": "^3.7.0",
+    "tailwind-merge": "^3.4.0",
+    "tailwindcss": "^3.4.19",
+    "uuid": "^13.0.0",
+    "zustand": "^5.0.10"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3"
+  }
+}
diff --git a/postcss.config.js b/postcss.config.js
new file mode 100644
index 0000000..12a703d
--- /dev/null
+++ b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
new file mode 100644
index 0000000..4bc5432
--- /dev/null
+++ b/tailwind.config.ts
@@ -0,0 +1,58 @@
+import type { Config } from "tailwindcss";
+
+const config: Config = {
+  darkMode: ["class"],
+  content: [
+    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
+    "./components/**/*.{js,ts,jsx,tsx,mdx}",
+    "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./lib/**/*.{js,ts,jsx,tsx,mdx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 0000000..e2b2fd4
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,40 @@
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    "dist/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}