feat: initial commit - finanzas app

Complete personal finance management application with:
- Dashboard with financial metrics and alerts
- Credit card management and payments
- Fixed and variable debt tracking
- Monthly budget planning
- Intelligent alert system
- Responsive design with Tailwind CSS

Tech stack: Next.js 14, TypeScript, Zustand, Recharts

🤖 Generated with [Claude Code](https://claude.com/claude-code)

components/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>
+  );
+}