Upload 49 files

frontend/src/components/admin/DashboardOverview.jsx

@@ -18,8 +18,8 @@ export default function DashboardOverview() {
   const cards = [
     { title: 'Ventas de Hoy', value: `$${stats.ventasHoy.toLocaleString()}`, icon: <TrendingUp size={24} color="var(--success)" />, bg: 'rgba(32, 201, 151, 0.1)' },
     { title: 'Mesas Activas', value: stats.mesasActivas, icon: <Users size={24} color="var(--info)" />, bg: 'rgba(50, 173, 230, 0.1)' },
-    { title: 'Ticket Promedio', value: '$275.50', icon: <ShoppingBag size={24} color="var(--primary)" />, bg: 'rgba(255, 90, 95, 0.1)' },
-    { title: 'Utilidad Est.', value: '$4,200', icon: <AlertCircle size={24} color="var(--warning)" />, bg: 'rgba(245, 166, 35, 0.1)' }
+    { title: 'Órdenes', value: '45', icon: <ShoppingBag size={24} color="var(--primary)" />, bg: 'rgba(255, 90, 95, 0.1)' },
+    { title: 'Stock Bajo', value: stats.stockBajo, icon: <AlertCircle size={24} color="var(--warning)" />, bg: 'rgba(245, 166, 35, 0.1)' }
   ];
 
   return (
@@ -40,31 +40,9 @@ export default function DashboardOverview() {
         ))}
       </div>
 
-      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '1.5rem' }}>
-        <div className="glass-card">
-          <h3 className="text-gradient" style={{ marginBottom: '1rem' }}>Saturación por Horario (Peak Hours)</h3>
-          <div style={{ height: '10px', width: '100%', background: 'rgba(0,0,0,0.05)', borderRadius: '10px', overflow: 'hidden', display: 'flex' }}>
-            <div style={{ width: '20%', background: 'var(--primary)', opacity: 0.3 }}></div>
-            <div style={{ width: '40%', background: 'var(--primary)' }}></div>
-            <div style={{ width: '15%', background: 'var(--primary)', opacity: 0.5 }}></div>
-            <div style={{ width: '25%', background: 'rgba(0,0,0,0.05)' }}></div>
-          </div>
-          <p style={{ color: 'var(--text-muted)', fontSize: '0.8rem', marginTop: '1rem' }}>Punto máximo detectado: 14:00 - 15:30 (Almuerzo)</p>
-        </div>
-
-        <div className="glass-card">
-          <h3 className="text-gradient" style={{ marginBottom: '1rem' }}>Alertas de Suministros (ERP)</h3>
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
-            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.9rem' }}>
-              <span>Tomate Cherry (Kg)</span>
-              <span style={{ color: 'var(--danger)', fontWeight: '700' }}>1.2 (Bajo)</span>
-            </div>
-            <div style={{ display: 'flex', justifyContent: 'space-between', fontSize: '0.9rem' }}>
-              <span>Aceite de Oliva (L)</span>
-              <span style={{ color: 'var(--warning)', fontWeight: '700' }}>3.0 (Crítico)</span>
-            </div>
-          </div>
-        </div>
+      <div className="glass-card">
+        <h3 className="text-gradient">Actividad Reciente</h3>
+        <p style={{ color: 'var(--text-muted)', marginTop: '0.5rem' }}>Módulo de notificaciones en tiempo real desde Cocina/Meseros...</p>
       </div>
     </div>
   );

frontend/src/components/admin/FinanceManager.jsx

@@ -109,7 +109,7 @@ export default function FinanceManager() {
                     <div style={{ ...statBoxStyle, background: 'rgba(76,217,100,0.05)', borderColor: 'var(--success)' }}>
                         <span style={{ fontSize: '0.75rem', color: 'var(--success)' }}>Ventas Registradas</span>
                         <div style={{ fontSize: '1.5rem', fontWeight: '900', color: 'var(--success)' }}>$0.00</div>
-                        <p style={{ fontSize: '0.7rem', opacity: 0.6, marginTop: '0.2rem', color: 'var(--text-muted)' }}>Sincronizado con POS en tiempo real</p>
+                        <p style={{ fontSize: '0.7rem', opacity: 0.5, marginTop: '0.2rem' }}>Sincronizado con POS en tiempo real</p>
                     </div>
                     <button onClick={closeCash} className="btn-glass" style={{ color: 'var(--primary)', borderColor: 'var(--primary)', padding: '0.8rem' }}>
                         Cerrar Turno / Corte
@@ -168,13 +168,13 @@ export default function FinanceManager() {
             </thead>
             <tbody>
                 {cashSessions.map(sess => (
-                    <tr key={sess.id} style={{ borderBottom: '1px solid var(--border-subtle)' }}>
+                    <tr key={sess.id} style={{ borderBottom: '1px solid rgba(255,255,255,0.03)' }}>
                         <td style={{ padding: '1rem' }}>{new Date(sess.openedAt).toLocaleDateString()}</td>
                         <td style={{ padding: '1rem' }}>${sess.openingBalance.toFixed(2)}</td>
                         <td style={{ padding: '1rem' }}>{sess.closedAt ? new Date(sess.closedAt).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }) : '-'}</td>
                         <td style={{ padding: '1rem' }}>${(sess.totalSales || 0).toFixed(2)}</td>
                         <td style={{ padding: '1rem' }}>
-                            <span style={{ padding: '2px 8px', borderRadius: '4px', background: sess.status === 'open' ? 'rgba(76,217,100,0.1)' : 'rgba(0,0,0,0.05)', color: sess.status === 'open' ? 'var(--success)' : 'var(--text-muted)', fontSize: '0.75rem' }}>
+                            <span style={{ padding: '2px 8px', borderRadius: '4px', background: sess.status === 'open' ? 'rgba(76,217,100,0.1)' : 'rgba(255,255,255,0.05)', color: sess.status === 'open' ? 'var(--success)' : 'var(--text-muted)', fontSize: '0.75rem' }}>
                                 {sess.status.toUpperCase()}
                             </span>
                         </td>
@@ -187,6 +187,6 @@ export default function FinanceManager() {
   );
 }
 
-const inputStyle = { width: '100%', padding: '0.8rem', borderRadius: '8px', background: 'rgba(0,0,0,0.03)', border: '1px solid var(--border-subtle)', color: 'var(--text-main)', outline: 'none' };
-const statBoxStyle = { padding: '1rem', borderRadius: '12px', background: 'rgba(0,0,0,0.02)', border: '1px solid var(--border-subtle)', display: 'flex', flexDirection: 'column', gap: '0.25rem' };
+const inputStyle = { width: '100%', padding: '0.8rem', borderRadius: '8px', background: 'rgba(255,255,255,0.05)', border: '1px solid var(--border-subtle)', color: '#fff', outline: 'none' };
+const statBoxStyle = { padding: '1rem', borderRadius: '12px', background: 'rgba(255,255,255,0.02)', border: '1px solid var(--border-subtle)', display: 'flex', flexDirection: 'column', gap: '0.25rem' };
 const Plus = ({ size }) => <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>;

frontend/src/components/admin/InventoryControl.jsx

@@ -137,11 +137,11 @@ export default function InventoryControl() {
 
       {/* Modal de Edición */}
       {isModalOpen && (
-        <div style={{ position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(8px)', display: 'flex', justifyContent: 'center', alignItems: 'center', zIndex: 9999, padding: '20px' }}>
+        <div style={{ position: 'fixed', top: 0, left: 0, width: '100vw', height: '100vh', background: 'rgba(0,0,0,0.85)', display: 'flex', justifyContent: 'center', alignItems: 'center', zIndex: 9999, padding: '20px' }}>
           <div className="glass-panel animate-slide-up" style={{ maxWidth: '450px', width: '100%', padding: '2.5rem' }}>
             <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '2rem' }}>
               <h2 className="text-gradient" style={{ fontSize: '1.5rem' }}>Editar Insumo</h2>
-              <button onClick={() => setIsModalOpen(false)} style={{ background: 'none', border: 'none', color: 'var(--text-muted)', cursor: 'pointer' }}><X size={24} /></button>
+              <button onClick={() => setIsModalOpen(false)} style={{ background: 'none', border: 'none', color: '#fff', cursor: 'pointer' }}><X size={24} /></button>
             </div>
 
             <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem' }}>
@@ -177,8 +177,8 @@ export default function InventoryControl() {
 
 const inputStyle = {
   width: '100%', padding: '0.8rem', borderRadius: '8px', 
-  background: 'rgba(0,0,0,0.03)', border: '1px solid var(--border-subtle)', 
-  color: 'var(--text-main)', outline: 'none'
+  background: 'rgba(255,255,255,0.05)', border: '1px solid var(--border-subtle)', 
+  color: '#fff', outline: 'none'
 };
 
 const labelStyle = { 
@@ -187,6 +187,6 @@ const labelStyle = {
 
 const actionBtnStyle = {
   width: '32px', height: '32px', borderRadius: '8px', border: '1px solid var(--border-subtle)',
-  background: 'rgba(0,0,0,0.02)', color: 'var(--text-main)', cursor: 'pointer',
+  background: 'rgba(255,255,255,0.05)', color: 'var(--text-main)', cursor: 'pointer',
   display: 'flex', alignItems: 'center', justifyContent: 'center', transition: 'all 0.2s', fontSize: '0.75rem', fontWeight: '700'
 };

frontend/src/components/admin/MenuEditor.jsx

@@ -139,7 +139,7 @@ export default function MenuEditor() {
                     newIngs[idx].qty = parseFloat(e.target.value);
                     setFormData({...formData, ingredients: newIngs});
                   }}
-                  style={{...inputStyle, padding: '0.4rem', width: '60px', background: 'rgba(0,0,0,0.03)'}}
+                  style={{...inputStyle, padding: '0.4rem', width: '60px'}}
                 />
                 <button type="button" onClick={() => setFormData({...formData, ingredients: formData.ingredients.filter((_, i) => i !== idx)})} style={{color: 'var(--primary)', background: 'none', border: 'none'}}><X size={16}/></button>
               </div>
@@ -164,7 +164,7 @@ export default function MenuEditor() {
                 <span style={{ color: 'var(--success)', fontWeight: '800' }}>${item.price}</span>
               </div>
               <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
-                <span style={{ fontSize: '0.7rem', color: 'var(--text-muted)', background: 'rgba(0,0,0,0.03)', padding: '2px 8px', borderRadius: '4px' }}>{item.category}</span>
+                <span style={{ fontSize: '0.7rem', color: 'var(--text-muted)', background: 'rgba(255,255,255,0.05)', padding: '2px 8px', borderRadius: '4px' }}>{item.category}</span>
                 {item.ingredients?.length > 0 && <span title="Tiene receta vinculada" style={{ color: 'var(--primary)' }}><ChefHat size={14} /></span>}
               </div>
             </div>
@@ -177,7 +177,7 @@ export default function MenuEditor() {
           <div className="glass-panel animate-scale-in" style={{ maxWidth: '600px', width: '100%', padding: '2rem', maxHeight: '90vh', overflowY: 'auto' }}>
             <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '2rem' }}>
               <h2 className="text-gradient">Editar: {editingItem.name}</h2>
-              <button onClick={() => setIsModalOpen(false)} style={{ background: 'none', border: 'none', color: 'var(--text-muted)' }}><X size={24} /></button>
+              <button onClick={() => setIsModalOpen(false)} style={{ background: 'none', border: 'none', color: '#fff' }}><X size={24} /></button>
             </div>
             
             <div style={{ display: 'flex', flexDirection: 'column', gap: '1.25rem' }}>
@@ -226,6 +226,6 @@ export default function MenuEditor() {
   );
 }
 
-const inputStyle = { width: '100%', padding: '0.8rem', borderRadius: '8px', background: 'rgba(0,0,0,0.03)', border: '1px solid var(--border-subtle)', color: 'var(--text-main)', outline: 'none' };
+const inputStyle = { width: '100%', padding: '0.8rem', borderRadius: '8px', background: 'rgba(255,255,255,0.05)', border: '1px solid var(--border-subtle)', color: '#fff', outline: 'none' };
 const labelStyle = { display: 'block', fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '0.4rem' };
-const actionBtnStyle = { width: '32px', height: '32px', borderRadius: '8px', border: 'none', background: 'rgba(255,255,255,0.9)', color: 'var(--text-main)', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' };
+const actionBtnStyle = { width: '32px', height: '32px', borderRadius: '8px', border: 'none', background: 'rgba(0,0,0,0.6)', color: '#fff', cursor: 'pointer', display: 'flex', alignItems: 'center', justifyContent: 'center' };

frontend/src/components/admin/Reports.jsx

@@ -6,7 +6,7 @@ import {
   LineElement, Title, Tooltip, Legend, BarElement
 } from 'chart.js';
 import { Line, Bar } from 'react-chartjs-2';
-import { TrendingUp, Package, Users as UsersIcon, Clock, Award, BarChart3 } from 'lucide-react';
+import { TrendingUp, Package, Users as UsersIcon, Calendar } from 'lucide-react';
 
 ChartJS.register(
   CategoryScale, LinearScale, PointElement, LineElement, Title, Tooltip, Legend, BarElement
@@ -14,8 +14,6 @@ ChartJS.register(
 
 export default function Reports() {
   const [salesData, setSalesData] = useState([0, 0, 0, 0, 0, 0, 0]);
-  const [hourlyData, setHourlyData] = useState(new Array(24).fill(0));
-  const [waiterPerformance, setWaiterPerformance] = useState({ labels: [], data: [] });
   const [topProducts, setTopProducts] = useState({ labels: [], data: [] });
   const [stats, setStats] = useState({ totalSales: 0, orderCount: 0, avgTicket: 0 });
 
@@ -23,139 +21,112 @@ export default function Reports() {
     onValue(ref(db, 'orders'), (snapshot) => {
       const data = snapshot.val();
       if (data) {
-        const orders = Object.values(data).filter(o => o.status === 'completed');
+        const orders = Object.values(data);
         const weeklySales = [0, 0, 0, 0, 0, 0, 0];
-        const hourSales = new Array(24).fill(0);
         const productCounts = {};
-        const waiterSales = {};
         let total = 0;
 
         orders.forEach(order => {
-          total += order.total;
-          
-          const date = new Date(order.timestamp);
-          // Weekly
-          const day = date.getDay(); 
-          const dayIdx = (day + 6) % 7; 
-          weeklySales[dayIdx] += order.total;
-
-          // Hourly
-          const hour = date.getHours();
-          hourSales[hour] += 1; // Count orders per hour for peak density
-
-          // Waiters
-          const waiter = order.waiter || 'Sistema/Admin';
-          waiterSales[waiter] = (waiterSales[waiter] || 0) + order.total;
-
-          // Products
-          order.items.forEach(item => {
-            productCounts[item.name] = (productCounts[item.name] || 0) + item.qty;
-          });
+            if (order.status === 'completed') {
+                total += order.total;
+                // Simple day mapping (last 7 days logic would be better but this is for demo)
+                const day = new Date(order.timestamp).getDay(); // 0-6
+                const index = (day + 6) % 7; // Map Mon-Sun
+                weeklySales[index] += order.total;
+
+                order.items.forEach(item => {
+                    productCounts[item.name] = (productCounts[item.name] || 0) + item.qty;
+                });
+            }
         });
 
         setSalesData(weeklySales);
-        setHourlyData(hourSales);
         setStats({
-          totalSales: total,
-          orderCount: orders.length,
-          avgTicket: total / (orders.length || 1)
+            totalSales: total,
+            orderCount: orders.filter(o => o.status === 'completed').length,
+            avgTicket: total / (orders.filter(o => o.status === 'completed').length || 1)
         });
 
         const sortedProducts = Object.entries(productCounts)
-          .sort((a,b) => b[1] - a[1])
-          .slice(0, 5);
+            .sort((a,b) => b[1] - a[1])
+            .slice(0, 5);
+        
         setTopProducts({
-          labels: sortedProducts.map(p => p[0]),
-          data: sortedProducts.map(p => p[1])
-        });
-
-        const sortedWaiters = Object.entries(waiterSales)
-          .sort((a,b) => b[1] - a[1]);
-        setWaiterPerformance({
-          labels: sortedWaiters.map(w => w[0].split('@')[0]),
-          data: sortedWaiters.map(w => w[1])
+            labels: sortedProducts.map(p => p[0]),
+            data: sortedProducts.map(p => p[1])
         });
       }
     });
   }, []);
 
-  const chartOptions = {
+  const lineData = {
+    labels: ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'],
+    datasets: [{
+      label: 'Ventas ($)',
+      data: salesData,
+      borderColor: '#FF5A5F',
+      backgroundColor: 'rgba(255, 90, 95, 0.2)',
+      fill: true,
+      tension: 0.4
+    }]
+  };
+
+  const barData = {
+    labels: topProducts.labels,
+    datasets: [{
+      label: 'Unidades Vendidas',
+      data: topProducts.data,
+      backgroundColor: 'rgba(0, 166, 153, 0.7)',
+      borderRadius: 8
+    }]
+  };
+
+  const options = {
     responsive: true,
     maintainAspectRatio: false,
-    plugins: { legend: { labels: { color: '#9595a8', font: { size: 10 } } } },
+    plugins: { legend: { labels: { color: '#9595a8' } } },
     scales: {
-      x: { ticks: { color: '#9595a8', font: { size: 10 } }, grid: { display: false } },
-      y: { ticks: { color: '#9595a8', font: { size: 10 } }, grid: { color: 'rgba(0,0,0,0.05)' } }
+      x: { ticks: { color: '#9595a8' }, grid: { color: 'rgba(255,255,255,0.05)' } },
+      y: { ticks: { color: '#9595a8' }, grid: { color: 'rgba(255,255,255,0.05)' } }
     }
   };
 
   return (
-    <div className="animate-fade-in" style={{ paddingBottom: '3rem' }}>
+    <div className="animate-fade-in">
       <header style={{ marginBottom: '2.5rem' }}>
-        <h2 className="text-gradient" style={{ fontSize: '2rem', fontWeight: '800' }}>RESTO Analytics PLUS</h2>
-        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', gap: '1.5rem', marginTop: '1.5rem' }}>
-            <StatCard title="Ventas Totales" value={`$${stats.totalSales.toFixed(2)}`} icon={<TrendingUp size={18}/>} color="var(--primary)" />
-            <StatCard title="Pedidos" value={stats.orderCount} icon={<Package size={18}/>} color="var(--success)" />
-            <StatCard title="Ticket Promedio" value={`$${stats.avgTicket.toFixed(2)}`} icon={<BarChart3 size={18}/>} color="#4dabf7" />
+        <h2 className="text-gradient" style={{ fontSize: '2rem', fontWeight: '800' }}>Análisis de Negocio</h2>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '1.5rem', marginTop: '1.5rem' }}>
+            <div className="glass-card" style={{ padding: '1.25rem' }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', color: 'var(--text-muted)', fontSize: '0.8rem' }}>Ventas Totales <TrendingUp size={16} /></div>
+                <div style={{ fontSize: '1.5rem', fontWeight: '800', marginTop: '0.5rem' }}>${stats.totalSales.toFixed(2)}</div>
+            </div>
+            <div className="glass-card" style={{ padding: '1.25rem' }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', color: 'var(--text-muted)', fontSize: '0.8rem' }}>Pedidos <Package size={16} /></div>
+                <div style={{ fontSize: '1.5rem', fontWeight: '800', marginTop: '0.5rem' }}>{stats.orderCount}</div>
+            </div>
+            <div className="glass-card" style={{ padding: '1.25rem' }}>
+                <div style={{ display: 'flex', justifyContent: 'space-between', color: 'var(--text-muted)', fontSize: '0.8rem' }}>Ticket Promedio <Calendar size={16} /></div>
+                <div style={{ fontSize: '1.5rem', fontWeight: '800', marginTop: '0.5rem' }}>${stats.avgTicket.toFixed(2)}</div>
+            </div>
         </div>
       </header>
       
-      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(450px, 1fr))', gap: '2rem' }}>
-        {/* Ventas Semanales */}
-        <ChartCard title="Flujo de Ventas Semanal" icon={<Calendar size={18}/>}>
-          <Line data={{
-            labels: ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'],
-            datasets: [{ label: 'Ventas ($)', data: salesData, borderColor: 'var(--primary)', backgroundColor: 'rgba(255,90,95,0.1)', fill: true, tension: 0.4 }]
-          }} options={chartOptions} />
-        </ChartCard>
-
-        {/* Rendimiento Meseros */}
-        <ChartCard title="Rendimiento por Mesero" icon={<Award size={18}/>}>
-          <Bar data={{
-            labels: waiterPerformance.labels,
-            datasets: [{ label: 'Ventas Totales ($)', data: waiterPerformance.data, backgroundColor: 'rgba(76,217,100,0.6)', borderRadius: 6 }]
-          }} options={chartOptions} />
-        </ChartCard>
-
-        {/* Horas Pico */}
-        <ChartCard title="Horas Pico (Densidad de Pedidos)" icon={<Clock size={18}/>}>
-          <Line data={{
-            labels: Array.from({length: 24}, (_, i) => `${i}:00`),
-            datasets: [{ label: 'Pedidos', data: hourlyData, borderColor: '#4dabf7', backgroundColor: 'rgba(77,171,247,0.1)', fill: true, tension: 0.4 }]
-          }} options={chartOptions} />
-        </ChartCard>
-
-        {/* Top Productos */}
-        <ChartCard title="Productos Estrella" icon={<Package size={18}/>}>
-          <Bar data={{
-            labels: topProducts.labels,
-            datasets: [{ label: 'Unidades', data: topProducts.data, backgroundColor: 'rgba(0,0,0,0.03)', borderColor: 'var(--border-subtle)', borderWidth: 1, borderRadius: 6 }]
-          }} options={chartOptions} />
-        </ChartCard>
-      </div>
-    </div>
-  );
-}
-
-function StatCard({ title, value, icon, color }) {
-  return (
-    <div className="glass-card" style={{ padding: '1.5rem' }}>
-      <div style={{ display: 'flex', justifyContent: 'space-between', color: 'var(--text-muted)', fontSize: '0.85rem', marginBottom: '0.75rem' }}>
-        {title} <span style={{ color }}>{icon}</span>
-      </div>
-      <div style={{ fontSize: '1.75rem', fontWeight: '900' }}>{value}</div>
-    </div>
-  );
-}
+      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(400px, 1fr))', gap: '2rem' }}>
+        <div className="glass-card" style={{ height: '350px', display: 'flex', flexDirection: 'column' }}>
+          <h3 style={{ marginBottom: '1.5rem', fontSize: '1rem', display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+            Ventas por Día de la Semana
+          </h3>
+          <div style={{ flex: 1, position: 'relative' }}>
+            <Line data={lineData} options={options} />
+          </div>
+        </div>
 
-function ChartCard({ title, icon, children }) {
-  return (
-    <div className="glass-card" style={{ height: '380px', display: 'flex', flexDirection: 'column', padding: '1.5rem' }}>
-      <h3 style={{ marginBottom: '1.5rem', fontSize: '1.1rem', fontWeight: '700', display: 'flex', alignItems: 'center', gap: '0.75rem' }}>
-        {icon} {title}
-      </h3>
-      <div style={{ flex: 1, position: 'relative' }}>
-        {children}
+        <div className="glass-card" style={{ height: '350px', display: 'flex', flexDirection: 'column' }}>
+          <h3 style={{ marginBottom: '1.5rem', fontSize: '1rem' }}>Productos Estrella</h3>
+          <div style={{ flex: 1, position: 'relative' }}>
+            <Bar data={barData} options={options} />
+          </div>
+        </div>
       </div>
     </div>
   );

frontend/src/components/admin/TableManager.jsx

@@ -72,7 +72,7 @@ export default function TableManager() {
                 <h4 style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '1rem', borderTop: '1px solid var(--border-subtle)', paddingTop: '1.5rem' }}>Listado</h4>
                 <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', maxHeight: '300px', overflowY: 'auto' }}>
                     {tables.map(t => (
-                        <div key={t.id} style={{ display: 'flex', justifyContent: 'space-between', padding: '0.6rem 1rem', background: 'rgba(0,0,0,0.03)', borderRadius: '8px', alignItems: 'center' }}>
+                        <div key={t.id} style={{ display: 'flex', justifyContent: 'space-between', padding: '0.6rem 1rem', background: 'rgba(255,255,255,0.03)', borderRadius: '8px', alignItems: 'center' }}>
                             <span style={{ fontWeight: '700' }}>Mesa {t.number}</span>
                             <div style={{ display: 'flex', gap: '0.5rem' }}>
                                 <span style={{ fontSize: '0.75rem', color: 'var(--text-muted)' }}>{t.capacity} px</span>
@@ -85,45 +85,28 @@ export default function TableManager() {
         </aside>
 
         {/* Visual Map Area */}
-        <section className="glass-panel" style={{ height: '600px', position: 'relative', overflow: 'hidden', background: 'var(--bg-card)', backgroundSize: '30px 30px', border: '1px solid var(--border-subtle)', backgroundImage: 'radial-gradient(circle, rgba(0,0,0,0.05) 1px, transparent 1px)' }}>
-            <div style={{ position: 'absolute', top: '1.5rem', left: '1.5rem', display: 'flex', gap: '1.5rem', fontSize: '0.75rem' }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}><div style={{ width: 12, height: 12, background: 'var(--success)', borderRadius: '2px' }} /> Libre</div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}><div style={{ width: 12, height: 12, background: 'var(--primary)', borderRadius: '2px' }} /> Ocupado</div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}><div style={{ width: 12, height: 12, background: '#fcc419', borderRadius: '2px' }} /> Reservado</div>
+        <section className="glass-panel" style={{ height: '600px', position: 'relative', overflow: 'hidden', background: 'radial-gradient(circle, rgba(255,255,255,0.02) 1px, transparent 1px)', backgroundSize: '30px 30px', border: '1px solid var(--border-subtle)' }}>
+            <div style={{ position: 'absolute', top: '1rem', left: '1rem', display: 'flex', alignItems: 'center', gap: '0.5rem', color: 'var(--text-muted)', fontSize: '0.8rem' }}>
+                <MousePointer2 size={14} /> Arrastra para posicionar (Modo Edición)
             </div>
             
-            <div style={{ width: '100%', height: '100%', padding: '5rem 3rem', display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(110px, 1fr))', gap: '3rem' }}>
-                {tables.map(t => {
-                    const statusColor = t.status === 'occupied' ? 'var(--primary)' : t.status === 'reserved' ? '#fcc419' : 'var(--success)';
-                    return (
-                        <div 
-                            key={t.id} 
-                            onClick={async () => {
-                                const nextStatus = t.status === 'available' ? 'occupied' : t.status === 'occupied' ? 'reserved' : 'available';
-                                await update(ref(db, `config/tables/${t.id}`), { status: nextStatus });
-                            }}
-                            className="animate-scale-in"
-                            style={{ 
-                                width: '100px', height: '100px', 
-                                background: t.status === 'available' ? 'rgba(76,217,100,0.05)' : 'rgba(0,0,0,0.02)', 
-                                border: `2px solid ${statusColor}`, 
-                                borderRadius: t.capacity > 4 ? '16px' : '50%',
-                                display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
-                                boxShadow: t.status === 'occupied' ? '0 0 20px rgba(255,90,95,0.05)' : 'none',
-                                cursor: 'pointer', transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-                                position: 'relative'
-                            }}
-                        >
-                            <span style={{ fontSize: '1.4rem', fontWeight: '900', color: statusColor }}>{t.number}</span>
-                            <span style={{ fontSize: '0.65rem', opacity: 0.6, color: 'var(--text-muted)' }}>{t.capacity} p</span>
-                            {t.status !== 'available' && (
-                                <div style={{ position: 'absolute', top: '-5px', right: '-5px', width: 12, height: 12, borderRadius: '50%', background: statusColor, border: '2px solid var(--bg-card)' }} />
-                            )}
-                        </div>
-                    );
-                })}
+            <div style={{ width: '100%', height: '100%', padding: '3rem', display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(100px, 1fr))', gap: '2rem' }}>
+                {tables.map(t => (
+                    <div key={t.id} style={{ 
+                        width: '90px', height: '90px', 
+                        background: 'rgba(255,90,95,0.05)', 
+                        border: '2px solid var(--primary)', 
+                        borderRadius: t.capacity > 4 ? '12px' : '50%',
+                        display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
+                        boxShadow: '0 0 15px rgba(255,90,95,0.1)',
+                        cursor: 'move'
+                    }}>
+                        <span style={{ fontSize: '1.2rem', fontWeight: '900', color: 'var(--primary)' }}>{t.number}</span>
+                        <span style={{ fontSize: '0.65rem', opacity: 0.6 }}>{t.capacity} cap</span>
+                    </div>
+                ))}
                 {tables.length === 0 && (
-                    <div style={{ gridColumn: '1 / -1', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: 0.1 }}>
+                    <div style={{ gridColumn: '1 / -1', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center', opacity: 0.2 }}>
                         <Grid size={80} />
                     </div>
                 )}
@@ -135,5 +118,5 @@ export default function TableManager() {
   );
 }
 
-const inputStyle = { width: '100%', padding: '0.8rem', borderRadius: '8px', background: 'rgba(0,0,0,0.03)', border: '1px solid var(--border-subtle)', color: 'var(--text-main)', outline: 'none' };
+const inputStyle = { width: '100%', padding: '0.8rem', borderRadius: '8px', background: 'rgba(255,255,255,0.05)', border: '1px solid var(--border-subtle)', color: '#fff', outline: 'none' };
 const labelStyle = { display: 'block', fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '0.5rem' };

frontend/src/components/admin/UserManager.jsx

@@ -44,7 +44,7 @@ export default function UserManager() {
                     <h3 style={{ fontSize: '1.1rem', fontWeight: '700' }}>{emp.name || 'Sin Nombre'}</h3>
                     <p style={{ fontSize: '0.8rem', color: 'var(--text-muted)' }}>{emp.email}</p>
                 </div>
-                <div style={{ background: 'rgba(0,0,0,0.03)', padding: '0.5rem', borderRadius: '50%' }}>
+                <div style={{ background: 'rgba(255,255,255,0.05)', padding: '0.5rem', borderRadius: '50%' }}>
                     <Shield size={20} style={{ color: roleColors[emp.role] }} />
                 </div>
             </div>
@@ -54,7 +54,7 @@ export default function UserManager() {
                 <select 
                     value={emp.role} 
                     onChange={(e) => handleUpdateRole(emp.uid, e.target.value)}
-                    style={{...inputStyle, background: 'rgba(0,0,0,0.03)', border: '1px solid var(--border-subtle)'}}
+                    style={{...inputStyle, background: 'rgba(0,0,0,0.2)', border: '1px solid var(--border-subtle)'}}
                 >
                     <option value="admin">Administrador (Total)</option>
                     <option value="mesero">Mesero (POS)</option>
@@ -75,7 +75,7 @@ export default function UserManager() {
         ))}
 
         <div className="glass-card" style={{ border: '2px dashed var(--border-subtle)', display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center', textAlign: 'center', padding: '2rem', gap: '1rem' }}>
-            <div style={{ background: 'rgba(0,0,0,0.03)', padding: '1rem', borderRadius: '50%', color: 'var(--text-muted)' }}>
+            <div style={{ background: 'rgba(255,255,255,0.05)', padding: '1rem', borderRadius: '50%', color: 'var(--text-muted)' }}>
                 <UserPlus size={32} />
             </div>
             <h3 style={{ fontSize: '1rem', fontWeight: '700' }}>Registrar Nuevo Empleado</h3>
@@ -105,5 +105,5 @@ export default function UserManager() {
   );
 }
 
-const inputStyle = { width: '100%', padding: '0.8rem', borderRadius: '8px', background: 'rgba(0,0,0,0.03)', border: '1px solid var(--border-subtle)', color: 'var(--text-main)', outline: 'none' };
+const inputStyle = { width: '100%', padding: '0.8rem', borderRadius: '8px', background: 'rgba(255,255,255,0.05)', border: '1px solid var(--border-subtle)', color: '#fff', outline: 'none' };
 const labelStyle = { display: 'block', fontSize: '0.8rem', color: 'var(--text-muted)', marginBottom: '0.5rem' };

frontend/src/index.css

@@ -1,24 +1,24 @@
 @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap');
 
 :root {
-  /* Premium Light Theme Core Palette */
-  --bg-base: #f8f9fa;
-  --bg-surface: #ffffff;
-  --bg-glass: rgba(255, 255, 255, 0.85);
-  --bg-glass-hover: rgba(245, 245, 250, 0.9);
-  --bg-card: #ffffff;
+  /* Premium Dark Theme Core Palette */
+  --bg-base: #0a0a0d;
+  --bg-surface: #14141a;
+  --bg-glass: rgba(20, 20, 26, 0.6);
+  --bg-glass-hover: rgba(40, 40, 50, 0.5);
+  --bg-card: rgba(30, 30, 40, 0.4);
   
   /* Brand Accents */
   --primary: #FF5A5F;
   --primary-hover: #ff4046;
-  --primary-glow: rgba(255, 90, 95, 0.15);
+  --primary-glow: rgba(255, 90, 95, 0.3);
   --secondary: #00A699;
   --secondary-hover: #008f84;
   
   /* Text */
-  --text-main: #1a1a20;
-  --text-muted: #6b6b7b;
-  --text-disabled: #a5a5b8;
+  --text-main: #fcfcfd;
+  --text-muted: #9595a8;
+  --text-disabled: #555566;
   
   /* Status Colors */
   --success: #20C997;
@@ -27,12 +27,12 @@
   --info: #32ADE6;
 
   /* Borders & Shadows */
-  --border-subtle: rgba(0, 0, 0, 0.08);
-  --border-focus: rgba(255, 90, 95, 0.3);
-  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.05);
-  --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.08);
+  --border-subtle: rgba(255, 255, 255, 0.08);
+  --border-focus: rgba(255, 90, 95, 0.5);
+  --shadow-sm: 0 4px 12px rgba(0, 0, 0, 0.2);
+  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4);
   --shadow-glow: 0 0 20px var(--primary-glow);
-  --glass-blur: blur(20px);
+  --glass-blur: blur(16px);
   --glass-border: 1px solid var(--border-subtle);
 
   /* Transitions */
@@ -61,8 +61,8 @@ body {
   overflow-x: hidden;
   -webkit-font-smoothing: antialiased;
   background-image: 
-    radial-gradient(circle at 10% 20%, rgba(255, 90, 95, 0.02) 0%, transparent 30%),
-    radial-gradient(circle at 90% 80%, rgba(0, 166, 153, 0.02) 0%, transparent 30%);
+    radial-gradient(circle at 10% 20%, rgba(255, 90, 95, 0.03) 0%, transparent 40%),
+    radial-gradient(circle at 90% 80%, rgba(0, 166, 153, 0.03) 0%, transparent 40%);
   background-attachment: fixed;
 }
 
@@ -98,14 +98,13 @@ button {
   border-radius: var(--radius-md);
   transition: all var(--transition-normal);
   padding: 1.5rem;
-  box-shadow: var(--shadow-sm);
 }
 
 .glass-card:hover {
   transform: translateY(-4px);
   background: var(--bg-glass-hover);
-  border-color: rgba(0, 0, 0, 0.1);
-  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06);
+  border-color: rgba(255, 255, 255, 0.15);
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
 }
 
 /* Premium Buttons */
@@ -135,8 +134,8 @@ button {
 }
 
 .btn-glass {
-  background: rgba(0,0,0,0.03);
-  border: 1px solid rgba(0,0,0,0.08);
+  background: rgba(255,255,255,0.05);
+  border: 1px solid rgba(255,255,255,0.1);
   color: var(--text-main);
   padding: 0.75rem 1.75rem;
   border-radius: var(--radius-pill);
@@ -146,13 +145,13 @@ button {
 }
 
 .btn-glass:hover {
-  background: rgba(0,0,0,0.06);
-  border-color: rgba(0,0,0,0.12);
+  background: rgba(255,255,255,0.1);
+  border-color: rgba(255,255,255,0.2);
 }
 
 /* Typography styles */
 .text-gradient {
-  background: linear-gradient(135deg, #1a1a20 0%, #6b6b7b 100%);
+  background: linear-gradient(135deg, #fff 0%, #a5a5b8 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   background-clip: text;

frontend/src/pages/AdminDashboard.jsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { useAuth } from '../context/AuthContext';
 import { useNavigate } from 'react-router-dom';
-import { LayoutDashboard, Utensils, Box, PieChart, LogOut, DollarSign, UtensilsCrossed, Users, Settings, Save, ShieldCheck, Truck } from 'lucide-react';
+import { LayoutDashboard, Utensils, Box, PieChart, LogOut, DollarSign, UtensilsCrossed, Users } from 'lucide-react';
 import DashboardOverview from '../components/admin/DashboardOverview';
 import MenuEditor from '../components/admin/MenuEditor';
 import InventoryControl from '../components/admin/InventoryControl';
@@ -9,8 +9,6 @@ import Reports from '../components/admin/Reports';
 import FinanceManager from '../components/admin/FinanceManager';
 import UserManager from '../components/admin/UserManager';
 import TableManager from '../components/admin/TableManager';
-import CRMManager from '../components/admin/CRMManager';
-import SettingsPlus from '../components/admin/SettingsPlus';
 
 export default function AdminDashboard() {
   const { logout, currentUser } = useAuth();
@@ -27,11 +25,9 @@ export default function AdminDashboard() {
     { id: 'menu', label: 'Menú & Precios', icon: <Utensils size={20} /> },
     { id: 'inventory', label: 'Control de Stock', icon: <Box size={20} /> },
     { id: 'reports', label: 'Reportes y Analítica', icon: <PieChart size={20} /> },
-    { id: 'cash', label: 'Finanzas & Caja', icon: <DollarSign size={20} /> },
-    { id: 'users', label: 'Gestión de Personal', icon: <Users size={20} /> },
-    { id: 'tables', label: 'Arquitectura Salón', icon: <LayoutDashboard size={20} /> },
-    { id: 'crm', label: 'CRM & Operaciones', icon: <Truck size={20} /> },
-    { id: 'settings', label: 'Configuración ERP', icon: <Settings size={20} /> },
+    { id: 'cash', label: 'Caja y Finanzas', icon: <DollarSign size={20} /> },
+    { id: 'users', label: 'Equipo y Roles', icon: <Users size={20} /> },
+    { id: 'tables', label: 'Diseño Salón', icon: <LayoutDashboard size={20} /> },
     { id: 'kitchen', label: 'Pantalla Cocina', icon: <UtensilsCrossed size={20} />, action: () => window.open('/kitchen', '_blank') },
     { id: 'menu_public', label: 'Carta Digital', icon: <Utensils size={20} />, action: () => window.open('/menu', '_blank') }
   ];
@@ -40,9 +36,9 @@ export default function AdminDashboard() {
     <div className="app-container">
       {/* Sidebar */}
       <aside className="glass-panel" style={{ width: '280px', borderRadius: '0', borderRight: '1px solid var(--border-subtle)', display: 'flex', flexDirection: 'column' }}>
-        <div style={{ padding: '2rem 1.5rem', borderBottom: '1px solid var(--border-subtle)' }}>
-          <h1 className="text-gradient" style={{ fontSize: '1.5rem', fontWeight: '800' }}>RESTO PLUS</h1>
-          <p style={{ color: 'var(--text-muted)', fontSize: '0.85rem', marginTop: '0.25rem' }}>Sistema ERP Inteligente</p>
+        <div style={{ padding: '2rem 1.5rem', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
+          <h1 className="text-gradient" style={{ fontSize: '1.5rem', fontWeight: '800' }}>Admin OS</h1>
+          <p style={{ color: 'var(--text-muted)', fontSize: '0.85rem', marginTop: '0.25rem' }}>{currentUser?.email}</p>
         </div>
 
         <nav style={{ flex: 1, padding: '1.5rem 1rem', display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
@@ -85,8 +81,6 @@ export default function AdminDashboard() {
           {activeTab === 'cash' && <FinanceManager />}
           {activeTab === 'users' && <UserManager />}
           {activeTab === 'tables' && <TableManager />}
-          {activeTab === 'crm' && <CRMManager />}
-          {activeTab === 'settings' && <SettingsPlus />}
         </div>
       </main>
     </div>

frontend/src/pages/CustomerMenu.jsx

@@ -8,7 +8,7 @@ export default function CustomerMenu() {
   const [menuItems, setMenuItems] = useState([]);
   const [categories, setCategories] = useState([]);
   const [activeCategory, setActiveCategory] = useState('Todos');
-  const [menuTheme, setMenuTheme] = useState('light'); // 'dark' or 'light'
+  const [menuTheme, setMenuTheme] = useState('dark'); // 'dark' or 'light'
   const navigate = useNavigate();
 
   useEffect(() => {

frontend/src/pages/KitchenView.jsx

@@ -75,8 +75,7 @@ export default function KitchenView() {
             <div key={order.id} className="glass-card animate-fade-in" style={{ 
                 padding: '1.5rem', 
                 borderLeft: order.status === 'preparing' ? '4px solid var(--warning)' : '4px solid var(--primary)',
-                background: order.status === 'preparing' ? 'rgba(255,160,0,0.05)' : 'var(--bg-card)',
-                boxShadow: 'var(--shadow-sm)'
+                background: order.status === 'preparing' ? 'rgba(255,200,0,0.02)' : 'var(--bg-card)'
             }}>
               <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '1.25rem', alignItems: 'center' }}>
                 <span style={{ fontSize: '1.2rem', fontWeight: '800', color: order.status === 'preparing' ? 'var(--warning)' : 'var(--primary)' }}>
@@ -89,7 +88,7 @@ export default function KitchenView() {
               
               <div style={{ marginBottom: '1.5rem', minHeight: '80px' }}>
                 {order.items.map((item, idx) => (
-                  <div key={idx} style={{ display: 'flex', justifyContent: 'space-between', padding: '0.5rem 0', borderBottom: '1px solid var(--border-subtle)' }}>
+                  <div key={idx} style={{ display: 'flex', justifyContent: 'space-between', padding: '0.5rem 0', borderBottom: '1px solid rgba(255,255,255,0.05)' }}>
                     <span style={{ fontWeight: '600' }}><span style={{ color: 'var(--primary)', fontWeight: '800' }}>{item.qty}</span> {item.name}</span>
                   </div>
                 ))}

frontend/src/pages/Login.jsx

@@ -50,7 +50,7 @@ export default function Login() {
 
   return (
     <div className="app-container" style={{
-      background: 'var(--bg-base)',
+      background: 'radial-gradient(circle at top right, #1a1a1a, #0a0a0a)',
       justifyContent: 'center', alignItems: 'center', minHeight: '100vh', padding: '20px'
     }}>
       {/* Icono de Ver Menú Público */}
@@ -76,7 +76,7 @@ export default function Login() {
 
         {/* Lado Izquierdo: Selección de Rol */}
         <div style={{
-          width: '35%', background: 'rgba(0,0,0,0.02)',
+          width: '35%', background: 'rgba(255,255,255,0.03)',
           borderRight: '1px solid var(--border-subtle)', padding: '40px 30px',
           display: 'flex', flexDirection: 'column', gap: '20px'
         }}>
@@ -150,14 +150,14 @@ export default function Login() {
               <label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9rem', color: 'var(--text-muted)' }}>Correo Electrónico</label>
               <input
                 type="email" required value={email} onChange={(e) => setEmail(e.target.value)}
-                style={{ width: '100%', padding: '14px', borderRadius: '10px', background: 'rgba(0,0,0,0.03)', border: '1px solid var(--border-subtle)', color: 'var(--text-main)' }}
+                style={{ width: '100%', padding: '14px', borderRadius: '10px', background: 'rgba(255,255,255,0.05)', border: '1px solid var(--border-subtle)', color: '#fff' }}
               />
             </div>
             <div>
               <label style={{ display: 'block', marginBottom: '8px', fontSize: '0.9rem', color: 'var(--text-muted)' }}>Contraseña</label>
               <input
                 type="password" required value={password} onChange={(e) => setPassword(e.target.value)}
-                style={{ width: '100%', padding: '14px', borderRadius: '10px', background: 'rgba(0,0,0,0.03)', border: '1px solid var(--border-subtle)', color: 'var(--text-main)' }}
+                style={{ width: '100%', padding: '14px', borderRadius: '10px', background: 'rgba(255,255,255,0.05)', border: '1px solid var(--border-subtle)', color: '#fff' }}
               />
             </div>
             <button type="submit" className="btn-primary" style={{ height: '55px', fontSize: '1.1rem', marginTop: '10px' }} disabled={loading}>

frontend/src/pages/WaiterPOS.jsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { useAuth } from '../context/AuthContext';
 import { useNavigate } from 'react-router-dom';
 import { db } from '../firebase/config';
-import { ref, onValue, push, set, update } from 'firebase/database';
+import { ref, onValue, push, set } from 'firebase/database';
 import { LogOut, Coffee, Send, Trash2, ShoppingBag, Truck, Receipt, CheckCircle, XCircle, CreditCard, Banknote, QrCode } from 'lucide-react';
 
 export default function WaiterPOS() {
@@ -16,7 +16,6 @@ export default function WaiterPOS() {
   const [tip, setTip] = useState(0);
   const [paymentMethod, setPaymentMethod] = useState('Efectivo');
   const [isCheckoutOpen, setIsCheckoutOpen] = useState(false);
-  const [customerData, setCustomerData] = useState({ name: '', email: '', phone: '', address: '' });
 
   // Fetch Menu
   useEffect(() => {
@@ -61,9 +60,6 @@ export default function WaiterPOS() {
       table: orderType === 'Mesa' ? activeTable : orderType,
       type: orderType,
       waiter: currentUser?.email,
-      customerName: customerData.name || 'Consumidor Final',
-      customerEmail: customerData.email || 'anonimo@rest.os',
-      address: customerData.address || '',
       items: cart,
       subtotal,
       discount,
@@ -79,7 +75,6 @@ export default function WaiterPOS() {
     if (!isCheckoutOpen) {
         setCart([]);
         setActiveTable(null);
-        setCustomerData({ name: '', email: '', phone: '', address: '' });
         alert('¡Comanda enviada a cocina exitosamente!');
     } else {
         // Finalizar y descontar stock
@@ -87,16 +82,20 @@ export default function WaiterPOS() {
         
         // Lógica de Descuento de Inventario
         for (const item of cart) {
+            // Buscamos el producto en el menú para ver su receta (ingredients)
+            // Nota: En un entorno real, esto se haría en el backend para evitar race conditions y asegurar integridad.
             const productRef = ref(db, `menu/${item.id}`);
             onValue(productRef, async (snapshot) => {
                 const product = snapshot.val();
                 if (product && product.ingredients) {
                     for (const ing of product.ingredients) {
+                        const invRef = ref(db, `inventory/${ing.id}/quantity`);
+                        // Obtenemos cantidad actual y restamos (qty_producto * qty_ingrediente)
                         onValue(ref(db, `inventory/${ing.id}`), async (invSnap) => {
                             const invData = invSnap.val();
                             if (invData) {
                                 const newQty = invData.quantity - (item.qty * ing.qty);
-                                await update(ref(db, `inventory/${ing.id}`), { quantity: newQty });
+                                await set(invRef, newQty);
                             }
                         }, { onlyOnce: true });
                     }
@@ -107,7 +106,6 @@ export default function WaiterPOS() {
         setIsCheckoutOpen(false);
         setCart([]);
         setActiveTable(null);
-        setCustomerData({ name: '', email: '', phone: '', address: '' });
         alert('¡Venta realizada y stock actualizado!');
     }
   };
@@ -141,7 +139,7 @@ export default function WaiterPOS() {
     <div className="app-container" style={{ display: 'flex', flexDirection: 'column', height: '100vh', overflow: 'hidden' }}>
       {/* Navbar */}
       <header className="glass-panel" style={{ padding: '1rem 2rem', display: 'flex', justifyContent: 'space-between', alignItems: 'center', borderRadius: '0', borderBottom: '1px solid var(--border-subtle)', background: 'var(--bg-base)' }}>
-        <h1 className="text-gradient" style={{ fontSize: '1.5rem', fontWeight: '800' }}>RESTO PLUS POS</h1>
+        <h1 className="text-gradient" style={{ fontSize: '1.5rem', fontWeight: '800' }}>Terminal POS</h1>
         <div style={{ display: 'flex', gap: '1rem', alignItems: 'center' }}>
           <span style={{ color: 'var(--text-muted)', fontSize: '0.9rem' }}>{currentUser?.email}</span>
           <button className="btn-glass" onClick={() => window.open('/menu', '_blank')} style={{ padding: '0.5rem 1rem' }}>Carta Digital</button>
@@ -176,35 +174,6 @@ export default function WaiterPOS() {
             </div>
           </div>
 
-          <div className="glass-card" style={{ padding: '1.25rem', marginBottom: '1.5rem', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(150px, 1fr))', gap: '1rem' }}>
-            <div style={{ gridColumn: orderType === 'Delivery' ? 'span 2' : 'auto' }}>
-                <label style={{ fontSize: '0.7rem', color: 'var(--text-muted)' }}>Cliente / Mesa</label>
-                <input 
-                    type="text" placeholder="Nombre del Cliente" 
-                    value={customerData.name} onChange={e => setCustomerData({...customerData, name: e.target.value})}
-                    style={{ ...inputStyle, padding: '0.6rem' }} 
-                />
-            </div>
-            {orderType === 'Delivery' && (
-                <div style={{ gridColumn: 'span 2' }}>
-                    <label style={{ fontSize: '0.7rem', color: 'var(--text-muted)' }}>Dirección de Entrega</label>
-                    <input 
-                        type="text" placeholder="Calle, Número, Referencias" 
-                        value={customerData.address} onChange={e => setCustomerData({...customerData, address: e.target.value})}
-                        style={{ ...inputStyle, padding: '0.6rem' }} 
-                    />
-                </div>
-            )}
-            <div>
-                <label style={{ fontSize: '0.7rem', color: 'var(--text-muted)' }}>Email (Puntos)</label>
-                <input 
-                    type="email" placeholder="cliente@email.com" 
-                    value={customerData.email} onChange={e => setCustomerData({...customerData, email: e.target.value})}
-                    style={{ ...inputStyle, padding: '0.6rem' }} 
-                />
-            </div>
-          </div>
-
           {orderType === 'Mesa' && (
             <div style={{ display: 'flex', gap: '1rem', overflowX: 'auto', paddingBottom: '1rem', marginBottom: '1.5rem' }}>
               {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map(table => (
@@ -213,12 +182,11 @@ export default function WaiterPOS() {
                   onClick={() => setActiveTable(table)}
                   style={{ 
                     minWidth: '70px', height: '70px', borderRadius: 'var(--radius-lg)', 
-                    background: activeTable === table ? 'var(--primary)' : 'rgba(0,0,0,0.03)',
+                    background: activeTable === table ? 'var(--primary)' : 'rgba(255,255,255,0.05)',
                     border: activeTable === table ? '2px solid transparent' : '1px solid var(--border-subtle)',
                     color: activeTable === table ? '#fff' : 'var(--text-main)',
                     display: 'flex', alignItems: 'center', justifyContent: 'center',
-                    fontWeight: '600', transition: 'all 0.2s', cursor: 'pointer',
-                    boxShadow: activeTable === table ? '0 4px 12px var(--primary-glow)' : 'none'
+                    fontWeight: '600', transition: 'all 0.2s', cursor: 'pointer'
                   }}
                 >
                   {table}
@@ -261,7 +229,7 @@ export default function WaiterPOS() {
 
           <div style={{ flex: 1, overflowY: 'auto', padding: '1rem', display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
             {cart.map((item) => (
-              <div key={item.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0.75rem', background: 'rgba(0,0,0,0.02)', borderRadius: 'var(--radius-md)', border: '1px solid var(--border-subtle)' }}>
+              <div key={item.id} style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '0.75rem', background: 'rgba(255,255,255,0.03)', borderRadius: 'var(--radius-md)' }}>
                 <div style={{ flex: 1 }}>
                   <div style={{ fontWeight: '600', fontSize: '0.95rem' }}>{item.name}</div>
                   <div style={{ color: 'var(--text-muted)', fontSize: '0.85rem' }}>{item.qty} x ${item.price}</div>
@@ -276,7 +244,7 @@ export default function WaiterPOS() {
             ))}
           </div>
 
-          <div style={{ padding: '1.5rem', borderTop: '1px solid var(--border-subtle)', background: 'rgba(0,0,0,0.03)' }}>
+          <div style={{ padding: '1.5rem', borderTop: '1px solid var(--border-subtle)', background: 'rgba(0,0,0,0.2)' }}>
             <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem', marginBottom: '1rem', fontSize: '0.9rem', color: 'var(--text-muted)' }}>
                 <div style={{ display: 'flex', justifyContent: 'space-between' }}>
                     <span>Subtotal:</span>
@@ -325,7 +293,7 @@ export default function WaiterPOS() {
       {isCheckoutOpen && (
         <div style={{ 
             position: 'fixed', top: 0, left: 0, right: 0, bottom: 0, 
-            background: 'rgba(0,0,0,0.4)', backdropFilter: 'blur(10px)',
+            background: 'rgba(0,0,0,0.85)', backdropFilter: 'blur(10px)',
             display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 1000
         }}>
             <div className="glass-panel animate-scale-in" style={{ width: '100%', maxWidth: '500px', padding: '2.5rem' }}>
@@ -359,7 +327,7 @@ export default function WaiterPOS() {
                             placeholder="$ 0.00"
                             value={tip}
                             onChange={(e) => setTip(e.target.value)}
-                            style={{ width: '100%', padding: '0.8rem', background: 'rgba(0,0,0,0.03)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', color: 'var(--text-main)' }}
+                            style={{ width: '100%', padding: '0.8rem', background: 'rgba(255,255,255,0.05)', border: '1px solid var(--border-subtle)', borderRadius: 'var(--radius-md)', color: '#fff' }}
                         />
                     </div>
 
@@ -405,7 +373,7 @@ export default function WaiterPOS() {
 
       <style>{`
         .btn-glass {
-            background: rgba(0,0,0,0.03);
+            background: rgba(255,255,255,0.05);
             border: 1px solid var(--border-subtle);
             color: var(--text-main);
             border-radius: var(--radius-md);
@@ -418,7 +386,7 @@ export default function WaiterPOS() {
             gap: 0.5rem;
         }
         .btn-glass:hover {
-            background: rgba(0,0,0,0.06);
+            background: rgba(255,255,255,0.1);
             transform: translateY(-2px);
         }
         .btn-primary {
@@ -433,12 +401,10 @@ export default function WaiterPOS() {
             align-items: center;
             justify-content: center;
             gap: 0.5rem;
-            box-shadow: 0 4px 12px var(--primary-glow);
         }
         .btn-primary:hover {
             opacity: 0.9;
             transform: translateY(-2px);
-            box-shadow: 0 6px 16px var(--primary-glow);
         }
         .animate-scale-in {
             animation: scaleIn 0.3s ease-out;