Add header credits display with reload functionality

Introduced a dynamic credits system displaying available credits in the header and allowing users to reload them via prompt-based input. Updated `Header.js` to include the credits badge and reload button. Adjusted `App.js` to manage credits state with localStorage synchronization. Enhanced styles for new header elements.

src/App.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import './styles/globals.css';
 import { Sidebar, Header } from './components/Layout';
 import { DashboardCards } from './components/Dashboard';
@@ -11,7 +11,27 @@ import SettingsPage from './components/Settings/SettingsPage';
 
 function App() {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
-  const [activeView, setActiveView] = useState('dashboard'); // 'dashboard' | 'scheduled' | 'create'
+  const [activeView, setActiveView] = useState('dashboard'); // 'dashboard' | 'scheduled' | 'create' | 'history' | 'settings'
+  const [credits, setCredits] = useState(() => {
+    try {
+      const raw = localStorage.getItem('credits');
+      const n = raw != null ? parseInt(raw, 10) : 0;
+      return Number.isNaN(n) ? 0 : n;
+    } catch {
+      return 0;
+    }
+  });
+
+  useEffect(() => {
+    const onStorage = (e) => {
+      if (e.key === 'credits') {
+        const n = parseInt(e.newValue, 10);
+        if (!Number.isNaN(n)) setCredits(n);
+      }
+    };
+    window.addEventListener('storage', onStorage);
+    return () => window.removeEventListener('storage', onStorage);
+  }, []);
 
   const handleToggleMobileMenu = () => setIsMobileMenuOpen(!isMobileMenuOpen);
   const handleNavigate = (key) => {
@@ -19,6 +39,19 @@ function App() {
     setIsMobileMenuOpen(false);
   };
 
+  const handleReloadCredits = () => {
+    const input = window.prompt('¿Cuántos créditos desea recargar?');
+    if (input == null) return;
+    const add = parseInt(input, 10);
+    if (Number.isNaN(add) || add <= 0) {
+      alert('Ingrese un número válido mayor a 0.');
+      return;
+    }
+    const next = credits + add;
+    setCredits(next);
+    try { localStorage.setItem('credits', String(next)); } catch {}
+  };
+
   const headerTitle = activeView === 'scheduled'
     ? 'Solicitudes Programadas'
     : activeView === 'create'
@@ -38,7 +71,7 @@ function App() {
         onNavigate={handleNavigate}
       />
       <main className="main-content">
-        <Header title={headerTitle} />
+        <Header title={headerTitle} credits={credits} onReloadCredits={handleReloadCredits} />
         {activeView === 'scheduled' ? (
           <ScheduledPage />
         ) : activeView === 'create' ? (