import React, { useState, useEffect } from 'react';
import { 
  LayoutDashboard, 
  Users, 
  Briefcase, 
  FileText, 
  Settings, 
  Search, 
  Plus, 
  CheckCircle2,
  Clock,
  AlertCircle,
  Menu,
  X,
  Palette,
  Printer,
  Trash2,
  Calculator,
  ArrowLeft,
  Edit,
  Save,
  AlertTriangle,
  Archive,
  Info
} from 'lucide-react';

const initialClients = [
  { id: 1, name: 'Empresa Alpha', contact: 'Juan Pérez', email: 'juan@alpha.com', phone: '11-2345-6789' },
  { id: 2, name: 'Librería El Estudiante', contact: 'María Gómez', email: 'contacto@elestudiante.com', phone: '11-9876-5432' },
  { id: 3, name: 'Restaurante Sabores', contact: 'Carlos Ruiz', email: 'info@sabores.com', phone: '11-4567-8901' },
];

const initialProjects = [
  { id: 101, title: 'Rediseño de Logo', clientId: 1, type: 'Diseño', status: 'En Proceso', deadline: '2026-03-20' },
  { id: 102, title: 'Impresión Lonas 3x2m', clientId: 2, type: 'Impresión', status: 'Pendiente', deadline: '2026-03-15' },
  { id: 103, title: 'Menús QR y Físicos', clientId: 3, type: 'Mixto', status: 'Completado', deadline: '2026-03-10' },
  { id: 104, title: 'Tarjetas Personales (x1000)', clientId: 1, type: 'Impresión', status: 'En Proceso', deadline: '2026-03-18' },
];

const initialQuotes = [
  { id: 1001, clientId: 1, description: 'Campaña Redes Sociales', amount: 150000, status: 'Aprobado', date: '2026-03-01', items: [], variables: {} },
  { id: 1002, clientId: 2, description: 'Cartelería Vidriera', amount: 85000, status: 'Pendiente', date: '2026-03-11', items: [], variables: {} },
  { id: 1003, clientId: 3, description: 'Diseño Packaging', amount: 220000, status: 'Rechazado', date: '2026-02-28', items: [], variables: {} },
];

const defaultCatalog = [
  { id: 'p1', category: 'Perfiles', name: 'Trimcap 20mm', unit: 'ml', price: 4166.67 },
  { id: 'p2', category: 'Perfiles', name: 'Perfil Agujereado', unit: 'ml', price: 7916.67 },
  { id: 'p3', category: 'Perfiles', name: 'Perfil liso 70mm Aluminio', unit: 'ml', price: 6250.00 },
  { id: 'pl1', category: 'Placas', name: 'Acrílico', unit: 'm2', price: 200000.00 },
  { id: 'pl2', category: 'Placas', name: 'Policarbonato Clear', unit: 'm2', price: 60000.00 },
  { id: 'pl3', category: 'Placas', name: 'PVC 10mm', unit: 'm2', price: 55000.00 },
  { id: 'pl4', category: 'Placas', name: 'PVC 3mm', unit: 'm2', price: 40000.00 },
  { id: 'pl5', category: 'Placas', name: 'Vinilo Impreso Clear', unit: 'm2', price: 50000.00 },
  { id: 'n1', category: 'Iluminación', name: 'Neón flex', unit: 'ml', price: 4000.00 },
  { id: 'n2', category: 'Iluminación', name: 'Rollo LED (fracción/m)', unit: 'ml', price: 4700.00 },
  { id: 'n3', category: 'Iluminación', name: 'Módulos LED', unit: 'un', price: 1000.00 },
  { id: 'f1', category: 'Fuentes', name: 'Fuente 12V 5A', unit: 'un', price: 20000.00 },
  { id: 'f2', category: 'Fuentes', name: 'Fuente 12V 10A', unit: 'un', price: 30000.00 },
  { id: 'o1', category: 'Otros', name: 'Pegatutti c/ activador 100g', unit: 'un', price: 18000.00 },
];

const safeGetStorage = (key, initialValue) => {
  try {
    if (typeof window !== 'undefined') {
      const saved = window.localStorage.getItem(key);
      return saved ? JSON.parse(saved) : initialValue;
    }
  } catch (e) {
    console.warn("LocalStorage bloqueado, usando memoria temporal.");
  }
  return initialValue;
};

const safeSetStorage = (key, value) => {
  try {
    if (typeof window !== 'undefined') {
      window.localStorage.setItem(key, JSON.stringify(value));
    }
  } catch (e) {}
};

// Función Helper Global para generar el número de presupuesto (DDMM-ID-INICIALES)
const generateQuoteNumber = (dateString, id, clientName) => {
  const initials = clientName && clientName !== 'Desconocido' ? clientName.split(' ').map(n => n && n[0]).join('').toUpperCase().substring(0, 2) : '';
  if (!dateString) return `0000-${id}${initials ? '-' + initials : ''}`;
  const [y, m, d] = dateString.split('-');
  return `${d}${m}-${id}${initials ? '-' + initials : ''}`;
};

// =====================================================================
// SUBCOMPONENTE: COTIZADOR DE CORPÓREOS
// =====================================================================
function CotizadorCorporeos({ onBack, quoteId, clients, onSave, requestConfirm, existingQuote, autoPrint }) {
  const [internalTab, setInternalTab] = useState('cotizador');
  const [printMode, setPrintMode] = useState(false);
  const [catalog, setCatalog] = useState(defaultCatalog);
  
  // Datos Generales del Presupuesto
  const [clientId, setClientId] = useState(existingQuote?.clientId?.toString() || '');
  const [date, setDate] = useState(existingQuote?.date || new Date().toISOString().split('T')[0]);
  const [publicDescription, setPublicDescription] = useState(existingQuote?.description || 'Fabricación de Cartel Corpóreo...');
  
  const currentId = existingQuote ? existingQuote.id : quoteId;
  const selectedClient = clients.find(c => c.id === Number(clientId));
  const clientName = selectedClient ? selectedClient.name : '';
  const quoteNumber = generateQuoteNumber(date, currentId, clientName);

  // Ítems de Materiales
  const [items, setItems] = useState(existingQuote?.items?.length > 0 ? existingQuote.items : [
    { id: 1, description: 'Acrílico', quantity: 3.2, unitPrice: 200000.00 },
    { id: 2, description: 'Trimcap 20mm', quantity: 20, unitPrice: 4166.67 },
  ]);

  // Variables y Costos Extra
  const [variables, setVariables] = useState(existingQuote?.variables && Object.keys(existingQuote.variables).length > 0 ? existingQuote.variables : {
    horasManoObra: 50,
    precioHora: 10000,
    instalacion: 150000,
    viaticos: 50000,
    tornillos: 50000,
    electricidad: 30000,
    acrilicoLaser: 200000,
    margenGanancia: 40 
  });

  const [totals, setTotals] = useState({ materiales: 0, fijos: 0, manoObra: 0, costoTotal: 0, ganancia: 0, precioVenta: 0 });

  useEffect(() => {
    const costoMateriales = items.reduce((acc, item) => acc + (item.quantity * item.unitPrice), 0);
    const costoManoObra = variables.horasManoObra * variables.precioHora;
    const costoFijos = 
      Number(variables.instalacion) + 
      Number(variables.viaticos) + 
      Number(variables.tornillos) + 
      Number(variables.electricidad) + 
      Number(variables.acrilicoLaser);
    
    const costoTotal = costoMateriales + costoManoObra + costoFijos;
    const ganancia = costoTotal * (variables.margenGanancia / 100);
    const precioVenta = costoTotal + ganancia;

    setTotals({
      materiales: costoMateriales,
      manoObra: costoManoObra,
      fijos: costoFijos,
      costoTotal: costoTotal,
      ganancia: ganancia,
      precioVenta: precioVenta
    });
  }, [items, variables]);

  useEffect(() => {
    if (autoPrint && clientId) {
      handlePrint();
    }
  }, [autoPrint, clientId]);

  const handleItemChange = (id, field, value) => {
    setItems(items.map(item => item.id === id ? { ...item, [field]: value } : item));
  };

  const handleCatalogSelect = (itemId, catalogItemId) => {
    const selectedProduct = catalog.find(c => c.id === catalogItemId);
    if (selectedProduct) {
      setItems(items.map(item => 
        item.id === itemId 
          ? { ...item, description: selectedProduct.name, unitPrice: selectedProduct.price } 
          : item
      ));
    }
  };

  const addItem = () => setItems([...items, { id: Date.now(), description: '', quantity: 1, unitPrice: 0 }]);
  
  const removeItem = (id) => {
    if (items.length <= 1) return;
    requestConfirm('Eliminar Material', '¿Estás seguro de quitar este material del presupuesto?', () => {
      setItems(prevItems => prevItems.filter(item => item.id !== id));
    });
  };

  const handleVariableChange = (field, value) => {
    setVariables({ ...variables, [field]: Number(value) || 0 });
  };

  const handlePrint = () => {
    if (!clientId) {
      requestConfirm('Atención', 'Selecciona un cliente antes de imprimir el presupuesto.', null);
      return;
    }
    setPrintMode(true);
    setTimeout(() => {
      try { window.print(); } catch (e) { console.log(e); }
    }, 500);
  };

  const formatCurrency = (val) => '$ ' + Number(val).toLocaleString('es-AR', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

  if (printMode) {
    return (
      <div className="fixed inset-0 z-[100] bg-white min-h-screen font-sans text-slate-900 overflow-y-auto print:static">
        <div className="print:hidden bg-slate-800 text-white p-4 flex flex-col sm:flex-row justify-between items-center gap-4 sticky top-0 z-50 shadow-lg">
          <div className="flex items-center gap-3">
            <Printer size={28} className="text-blue-400" />
            <div>
              <p className="font-bold text-lg">Vista Previa del Documento</p>
              <p className="text-sm text-slate-300">Si no se abrió la ventana, presiona <strong>Ctrl + P</strong> (Windows) o <strong>Cmd + P</strong> (Mac) en tu teclado.</p>
            </div>
          </div>
          <button onClick={() => setPrintMode(false)} className="bg-blue-600 hover:bg-blue-500 text-white px-6 py-3 rounded-lg font-bold transition-colors shadow-md">
            Volver al Editor
          </button>
        </div>

        <div className="max-w-4xl mx-auto p-8 md:p-16 bg-white">
          <div className="flex justify-between items-start border-b-4 border-slate-900 pb-8 mb-8">
            <div className="flex items-center gap-4">
              <div className="w-16 h-16 bg-slate-900 rounded-xl flex items-center justify-center font-black text-3xl text-white tracking-tighter">IG</div>
              <div>
                <h1 className="text-4xl font-black tracking-tight text-slate-900">IDEAGRÁFICA</h1>
                <p className="text-slate-500 font-medium">www.ideagrafica.com.ar</p>
              </div>
            </div>
            <div className="text-right">
              <h2 className="text-3xl font-bold text-slate-300">PRESUPUESTO</h2>
              <p className="text-slate-600 font-medium mt-1">Nº {quoteNumber}</p>
              <p className="text-slate-600 font-medium mt-1">Fecha: {date ? date.split('-').reverse().join('/') : ''}</p>
            </div>
          </div>

          <div className="mb-10">
            <h3 className="text-sm font-bold text-slate-400 uppercase tracking-wide mb-2">Preparado para:</h3>
            <p className="text-2xl font-bold text-slate-800">{clientName || 'Cliente No Seleccionado'}</p>
          </div>

          <div className="mb-12">
            <h3 className="text-sm font-bold text-slate-400 uppercase tracking-wide mb-4">Descripción del Trabajo:</h3>
            <div className="bg-slate-50 p-6 rounded-xl border border-slate-100 min-h-[150px]">
              <p className="whitespace-pre-wrap text-slate-700 text-lg leading-relaxed">{publicDescription}</p>
            </div>
          </div>

          <div className="flex justify-end mb-16">
            <div className="w-full md:w-1/2 border-2 border-slate-900 p-8 rounded-2xl bg-white">
              <p className="text-slate-500 font-bold uppercase tracking-wider text-sm mb-2">Inversión Total</p>
              <div className="text-5xl font-black tracking-tight text-slate-900">{formatCurrency(totals.precioVenta)}</div>
              <p className="text-slate-500 text-sm mt-4 font-medium">Los precios no incluyen IVA. Presupuesto válido por 15 días.</p>
            </div>
          </div>

          <div className="text-center pt-8 border-t border-slate-200">
            <p className="text-xl font-bold text-slate-800 mb-2">Gracias por confiar en Ideagráfica.</p>
            <p className="text-slate-500">Si tiene alguna duda sobre este presupuesto, no dude en contactarnos.</p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-transparent font-sans animate-in fade-in duration-500">
      <div className="max-w-6xl mx-auto mb-6 flex flex-wrap gap-2 print:hidden">
        <button 
          onClick={onBack} 
          className="flex items-center gap-2 px-6 py-3 rounded-lg font-semibold bg-slate-200 text-slate-700 hover:bg-slate-300 transition-all mr-auto shadow-sm"
        >
          <ArrowLeft size={20} /> Volver
        </button>
        <button 
          onClick={() => setInternalTab('cotizador')} 
          className={`flex items-center gap-2 px-6 py-3 rounded-lg font-semibold transition-all ${internalTab === 'cotizador' ? 'bg-indigo-600 text-white shadow-md' : 'bg-white text-slate-600 hover:bg-slate-50'}`}
        >
          <Calculator size={20} /> Armar Presupuesto
        </button>
        <button 
          onClick={() => setInternalTab('precios')} 
          className={`flex items-center gap-2 px-6 py-3 rounded-lg font-semibold transition-all ${internalTab === 'precios' ? 'bg-indigo-600 text-white shadow-md' : 'bg-white text-slate-600 hover:bg-slate-50'}`}
        >
          <Settings size={20} /> Precios Base (Lista)
        </button>
      </div>

      <div className="max-w-6xl mx-auto bg-white rounded-xl shadow-xl overflow-hidden print:shadow-none print:bg-transparent">
        <div className="bg-slate-900 text-white p-8 flex flex-col md:flex-row justify-between items-center print:bg-white print:text-black print:border-b-4 print:border-slate-900 print:p-0 print:pb-6 print:mb-8">
          <div className="flex items-center gap-4 mb-4 md:mb-0">
            <div className="bg-white p-2 rounded-xl print:hidden shadow-inner">
              <div className="w-12 h-12 bg-slate-900 rounded-lg flex items-center justify-center font-black text-2xl text-white tracking-tighter">IG</div>
            </div>
            <div className="hidden print:flex w-16 h-16 bg-slate-900 rounded-xl items-center justify-center font-black text-3xl text-white tracking-tighter mr-2">IG</div>
            <div>
              <h1 className="text-3xl font-black tracking-tight">IDEAGRÁFICA</h1>
              <p className="text-slate-400 font-medium print:text-slate-600">www.ideagrafica.com.ar</p>
            </div>
          </div>
          <div className="text-center md:text-right">
            <h2 className="text-2xl font-bold text-indigo-400 print:text-slate-800">PRESUPUESTO</h2>
            <p className="text-slate-300 print:text-slate-600 font-medium mt-1">Nº {quoteNumber}</p>
          </div>
        </div>

        {internalTab === 'cotizador' && (
          <div className="p-8 print:p-0">
            <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
              <div className="col-span-1 md:col-span-2">
                <label className="block text-sm font-bold text-slate-700 mb-2 uppercase tracking-wide">Cliente / Empresa</label>
                <select 
                  value={clientId} 
                  onChange={(e) => setClientId(e.target.value)} 
                  className="w-full p-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 font-medium print:bg-transparent print:border-none print:p-0 print:text-xl outline-none appearance-none cursor-pointer"
                >
                  <option value="" disabled>Seleccionar cliente registrado...</option>
                  {clients.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                </select>
              </div>
              <div>
                <label className="block text-sm font-bold text-slate-700 mb-2 uppercase tracking-wide">Fecha</label>
                <input 
                  type="date" 
                  value={date} 
                  onChange={(e) => setDate(e.target.value)} 
                  className="w-full p-3 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 font-medium print:bg-transparent print:border-none print:p-0 print:text-lg"
                />
              </div>
              <div className="col-span-1 md:col-span-3">
                <label className="block text-sm font-bold text-slate-700 mb-2 uppercase tracking-wide">Descripción para el Cliente</label>
                <textarea 
                  value={publicDescription} 
                  onChange={(e) => setPublicDescription(e.target.value)} 
                  className="w-full p-4 bg-slate-50 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 min-h-[100px] print:bg-transparent print:border-none print:p-0 print:text-lg print:leading-relaxed text-slate-800" 
                  placeholder="Describe el trabajo..."
                />
              </div>
            </div>

            <div className="print:hidden">
              <div className="bg-slate-800 text-white px-4 py-2 rounded-t-lg font-semibold flex items-center justify-between mt-12">
                <span>📋 Costos Internos de Materiales (No visible en PDF)</span>
              </div>
              <div className="border border-slate-200 rounded-b-lg p-4 bg-white mb-8">
                <div className="overflow-x-auto">
                  <table className="w-full text-left border-collapse">
                    <thead>
                      <tr className="border-b-2 border-slate-100 text-slate-500 text-sm uppercase tracking-wider">
                        <th className="p-3 font-bold">Catálogo Base</th>
                        <th className="p-3 font-bold w-1/3">Descripción del Material</th>
                        <th className="p-3 font-bold w-24 text-center">Cant.</th>
                        <th className="p-3 font-bold w-32 text-right">Precio Unit.</th>
                        <th className="p-3 font-bold w-32 text-right">Subtotal</th>
                        <th className="p-3 w-12"></th>
                      </tr>
                    </thead>
                    <tbody>
                      {items.map((item) => (
                        <tr key={item.id} className="border-b border-slate-100 hover:bg-slate-50">
                          <td className="p-2">
                            <select 
                              onChange={(e) => handleCatalogSelect(item.id, e.target.value)} 
                              className="w-full p-2 bg-slate-100 border-none rounded text-sm text-slate-700 cursor-pointer" 
                              defaultValue=""
                            >
                              <option value="" disabled>Seleccionar...</option>
                              {catalog.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                            </select>
                          </td>
                          <td className="p-2">
                            <input 
                              type="text" 
                              value={item.description} 
                              onChange={(e) => handleItemChange(item.id, 'description', e.target.value)} 
                              className="w-full p-2 bg-transparent border border-transparent hover:border-slate-200 focus:border-indigo-500 rounded font-medium text-slate-800"
                            />
                          </td>
                          <td className="p-2">
                            <input 
                              type="number" 
                              step="0.01" 
                              min="0" 
                              value={item.quantity} 
                              onChange={(e) => handleItemChange(item.id, 'quantity', parseFloat(e.target.value) || 0)} 
                              className="w-full p-2 bg-transparent border border-transparent hover:border-slate-200 focus:border-indigo-500 rounded text-center font-medium"
                            />
                          </td>
                          <td className="p-2">
                            <div className="flex items-center justify-end">
                              <span className="text-slate-400 mr-1">$</span>
                              <input 
                                type="number" 
                                step="1" 
                                min="0" 
                                value={item.unitPrice} 
                                onChange={(e) => handleItemChange(item.id, 'unitPrice', parseFloat(e.target.value) || 0)} 
                                className="w-24 p-2 bg-transparent border border-transparent hover:border-slate-200 focus:border-indigo-500 rounded text-right font-medium"
                              />
                            </div>
                          </td>
                          <td className="p-2 text-right font-bold text-slate-700">
                            {formatCurrency(item.quantity * item.unitPrice)}
                          </td>
                          <td className="p-2 text-center">
                            <button 
                              onClick={() => removeItem(item.id)} 
                              className="p-2 text-slate-300 hover:text-red-500 rounded-full transition-colors"
                            >
                              <Trash2 size={18} />
                            </button>
                          </td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
                <button 
                  onClick={addItem} 
                  className="mt-4 flex items-center gap-2 text-sm font-bold text-indigo-600 hover:text-indigo-800 bg-indigo-50 px-4 py-2 rounded-lg transition-colors"
                >
                  <Plus size={16} strokeWidth={3} /> Agregar Material
                </button>
              </div>

              <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-8">
                <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
                  <h3 className="font-bold text-slate-800 mb-4 uppercase tracking-wide flex items-center gap-2">
                    <div className="w-2 h-2 bg-indigo-500 rounded-full"></div> Mano de Obra
                  </h3>
                  <div className="grid grid-cols-2 gap-4">
                    <div>
                      <label className="block text-xs font-semibold text-slate-500 mb-1">Horas estimadas</label>
                      <input 
                        type="number" 
                        value={variables.horasManoObra} 
                        onChange={(e) => handleVariableChange('horasManoObra', e.target.value)} 
                        className="w-full p-2 bg-slate-50 border border-slate-200 rounded font-medium"
                      />
                    </div>
                    <div>
                      <label className="block text-xs font-semibold text-slate-500 mb-1">Precio por Hora ($)</label>
                      <input 
                        type="number" 
                        value={variables.precioHora} 
                        onChange={(e) => handleVariableChange('precioHora', e.target.value)} 
                        className="w-full p-2 bg-slate-50 border border-slate-200 rounded font-medium"
                      />
                    </div>
                  </div>
                  <div className="mt-4 pt-4 border-t border-slate-100 flex justify-between items-center">
                    <span className="text-sm font-bold text-slate-600">Total Mano de Obra:</span>
                    <span className="font-bold text-slate-800">{formatCurrency(totals.manoObra)}</span>
                  </div>
                </div>

                <div className="bg-white border border-slate-200 rounded-xl p-5 shadow-sm">
                  <h3 className="font-bold text-slate-800 mb-4 uppercase tracking-wide flex items-center gap-2">
                    <div className="w-2 h-2 bg-purple-500 rounded-full"></div> Costos Extra / Fijos
                  </h3>
                  <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase">Instalación ($)</label>
                      <input 
                        type="number" 
                        value={variables.instalacion} 
                        onChange={(e) => handleVariableChange('instalacion', e.target.value)} 
                        className="w-full p-2 bg-slate-50 border border-slate-200 rounded text-sm font-medium"
                      />
                    </div>
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase">Viáticos ($)</label>
                      <input 
                        type="number" 
                        value={variables.viaticos} 
                        onChange={(e) => handleVariableChange('viaticos', e.target.value)} 
                        className="w-full p-2 bg-slate-50 border border-slate-200 rounded text-sm font-medium"
                      />
                    </div>
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase">Corte Láser ($)</label>
                      <input 
                        type="number" 
                        value={variables.acrilicoLaser} 
                        onChange={(e) => handleVariableChange('acrilicoLaser', e.target.value)} 
                        className="w-full p-2 bg-slate-50 border border-slate-200 rounded text-sm font-medium"
                      />
                    </div>
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase">Tornillos ($)</label>
                      <input 
                        type="number" 
                        value={variables.tornillos} 
                        onChange={(e) => handleVariableChange('tornillos', e.target.value)} 
                        className="w-full p-2 bg-slate-50 border border-slate-200 rounded text-sm font-medium"
                      />
                    </div>
                    <div>
                      <label className="block text-[10px] font-bold text-slate-500 uppercase">Electricidad ($)</label>
                      <input 
                        type="number" 
                        value={variables.electricidad} 
                        onChange={(e) => handleVariableChange('electricidad', e.target.value)} 
                        className="w-full p-2 bg-slate-50 border border-slate-200 rounded text-sm font-medium"
                      />
                    </div>
                  </div>
                </div>
              </div>

              <div className="bg-slate-50 border-2 border-slate-200 p-6 rounded-xl flex flex-col md:flex-row justify-between items-center gap-6 mb-8">
                <div className="flex-1 w-full space-y-2">
                  <div className="flex justify-between text-sm">
                    <span className="text-slate-500 font-medium">Costo de Materiales:</span> 
                    <span className="font-bold text-slate-700">{formatCurrency(totals.materiales)}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-slate-500 font-medium">Costo de Mano de Obra:</span> 
                    <span className="font-bold text-slate-700">{formatCurrency(totals.manoObra)}</span>
                  </div>
                  <div className="flex justify-between text-sm">
                    <span className="text-slate-500 font-medium">Costos Extras:</span> 
                    <span className="font-bold text-slate-700">{formatCurrency(totals.fijos)}</span>
                  </div>
                  <div className="flex justify-between text-base pt-2 border-t border-slate-200">
                    <span className="font-bold text-slate-800">Costo Total Interno:</span> 
                    <span className="font-black text-slate-900">{formatCurrency(totals.costoTotal)}</span>
                  </div>
                </div>
                
                <div className="w-px h-24 bg-slate-200 hidden md:block"></div>

                <div className="flex-1 w-full bg-white p-4 rounded-lg shadow-sm border border-slate-100">
                  <label className="block text-sm font-bold text-slate-700 mb-2">Margen de Ganancia (%)</label>
                  <div className="flex items-center gap-4 mb-4">
                    <input 
                      type="range" 
                      min="0" 
                      max="200" 
                      step="5" 
                      value={variables.margenGanancia} 
                      onChange={(e) => handleVariableChange('margenGanancia', e.target.value)} 
                      className="w-full accent-indigo-600"
                    />
                    <span className="font-black text-xl text-indigo-600 w-16 text-right">{variables.margenGanancia}%</span>
                  </div>
                  <div className="flex justify-between items-center text-sm text-green-600 font-bold bg-green-50 p-2 rounded">
                    <span>Ganancia Neta:</span><span>{formatCurrency(totals.ganancia)}</span>
                  </div>
                </div>
              </div>
            </div>

            <div className="flex justify-end mb-8 mt-12 print:mt-0">
              <div className="w-full md:w-1/2 bg-indigo-600 print:bg-slate-100 print:border-2 print:border-slate-800 text-white print:text-slate-900 p-8 rounded-2xl shadow-xl print:shadow-none">
                <p className="text-indigo-200 print:text-slate-500 font-bold uppercase tracking-wider text-sm mb-2">Inversión Total</p>
                <div className="text-4xl md:text-5xl font-black tracking-tight">{formatCurrency(totals.precioVenta)}</div>
                <p className="text-indigo-100 print:text-slate-500 text-sm mt-4 font-medium">Los precios no incluyen IVA. Presupuesto válido por 15 días.</p>
              </div>
            </div>

            <div className="flex flex-col md:flex-row justify-between items-center print:hidden border-t border-slate-200 pt-8 mt-8 gap-4">
              <div className="bg-indigo-50 text-indigo-800 p-4 rounded-lg text-sm max-w-xl border border-indigo-100 shadow-sm">
                <p className="font-bold mb-1 flex items-center gap-2">💡 ¿Cómo guardar en PDF o en el Sistema?</p>
                <p>Usa <strong>"Guardar Presupuesto"</strong> para registrarlo. Usa <strong>"Imprimir / PDF"</strong> para descargarlo.</p>
              </div>
              <div className="flex gap-3 w-full md:w-auto">
                <button 
                  onClick={() => {
                    if (!clientId) {
                      requestConfirm('Atención requerida', 'Por favor selecciona un cliente de la lista para poder guardar el presupuesto.', null);
                      return;
                    }
                    onSave({
                      clientId: Number(clientId),
                      date: date,
                      description: publicDescription,
                      amount: totals.precioVenta,
                      status: existingQuote ? existingQuote.status : 'Pendiente',
                      items: items,
                      variables: variables
                    });
                  }} 
                  className="flex-1 flex items-center justify-center gap-2 bg-emerald-600 hover:bg-emerald-500 text-white px-6 py-4 rounded-xl font-bold transition-all shadow-lg hover:shadow-xl hover:-translate-y-1"
                >
                  <Save size={20} /> {existingQuote ? 'Actualizar Presupuesto' : 'Guardar Presupuesto'}
                </button>
                <button 
                  onClick={handlePrint} 
                  className="flex-1 flex items-center justify-center gap-2 bg-slate-900 hover:bg-slate-800 text-white px-6 py-4 rounded-xl font-bold transition-all shadow-lg hover:shadow-xl hover:-translate-y-1"
                >
                  <Printer size={20} /> Imprimir / PDF
                </button>
              </div>
            </div>
          </div>
        )}

        {internalTab === 'precios' && (
          <div className="p-8 print:hidden">
            <div className="mb-6">
              <h2 className="text-2xl font-black text-slate-800 tracking-tight">Lista de Precios Base</h2>
              <p className="text-slate-500">Actualiza los costos unitarios de tus materiales.</p>
            </div>
            <div className="bg-white border border-slate-200 rounded-xl overflow-hidden">
              <table className="w-full text-left border-collapse">
                <thead>
                  <tr className="bg-slate-50 text-slate-600 text-sm uppercase tracking-wider">
                    <th className="p-4 font-bold">Categoría</th>
                    <th className="p-4 font-bold">Material</th>
                    <th className="p-4 font-bold text-center">Unidad</th>
                    <th className="p-4 font-bold text-right">Costo ($)</th>
                  </tr>
                </thead>
                <tbody>
                  {catalog.map((item, idx) => (
                    <tr key={item.id} className="border-t border-slate-100 hover:bg-slate-50">
                      <td className="p-4 text-slate-500 text-sm font-semibold">{item.category}</td>
                      <td className="p-4 font-medium text-slate-800">{item.name}</td>
                      <td className="p-4 text-center text-slate-500 text-sm">{item.unit}</td>
                      <td className="p-4 text-right">
                        <input 
                          type="number" 
                          step="1" 
                          value={item.price} 
                          onChange={(e) => {
                            const newCatalog = [...catalog];
                            newCatalog[idx].price = Number(e.target.value) || 0;
                            setCatalog(newCatalog);
                          }} 
                          className="w-32 p-2 bg-white border border-slate-300 rounded focus:ring-2 focus:ring-indigo-500 text-right font-bold text-slate-700" 
                        />
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            </div>
          </div>
        )}

        <div className="hidden print:block mt-24 text-center">
          <div className="w-16 h-1 bg-slate-900 mx-auto mb-6"></div>
          <p className="text-lg font-bold text-slate-800">Gracias por confiar en Ideagráfica.</p>
        </div>
      </div>

      <style dangerouslySetInnerHTML={{__html: `
        @media print {
          body { background-color: white; }
          .print\\:hidden { display: none !important; }
          .print\\:block { display: block !important; }
          .print\\:flex { display: flex !important; }
          .print\\:bg-transparent { background-color: transparent !important; }
          .print\\:bg-white { background-color: white !important; }
          .print\\:text-black { color: black !important; }
          .print\\:text-slate-900 { color: #0f172a !important; }
          .print\\:text-slate-800 { color: #1e293b !important; }
          .print\\:text-slate-600 { color: #475569 !important; }
          .print\\:text-slate-500 { color: #64748b !important; }
          .print\\:border-none { border: none !important; }
          .print\\:shadow-none { box-shadow: none !important; }
          .print\\:static { position: static !important; }
          * { -webkit-print-color-adjust: exact !important; color-adjust: exact !important; }
        }
      `}} />
    </div>
  );
}

// =====================================================================
// COMPONENTE PRINCIPAL: GESTIÓN IDEA GRÁFICA
// =====================================================================
export default function GestionIdeaGrafica() {
  const [activeTab, setActiveTab] = useState('dashboard');
  const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
  const [showCotizador, setShowCotizador] = useState(false);
  const [searchQuery, setSearchQuery] = useState('');

  const [confirmModal, setConfirmModal] = useState({ isOpen: false, title: '', message: '', onConfirm: null });

  const [showNewClientModal, setShowNewClientModal] = useState(false);
  const [editingClient, setEditingClient] = useState(null);
  const [newClientData, setNewClientData] = useState({ name: '', contact: '', email: '', phone: '' });

  const [showNewProjectModal, setShowNewProjectModal] = useState(false);
  const [editingProject, setEditingProject] = useState(null);
  const [newProjectData, setNewProjectData] = useState({ title: '', clientId: '', type: 'Diseño', status: 'Pendiente', deadline: '' });

  const [editingQuote, setEditingQuote] = useState(null);
  const [autoPrintQuote, setAutoPrintQuote] = useState(false);

  // AUTO-GUARDADO (LocalStorage seguro)
  const [clients, setClients] = useState(() => safeGetStorage('ig_clients', initialClients));
  const [projects, setProjects] = useState(() => safeGetStorage('ig_projects', initialProjects));
  const [quotes, setQuotes] = useState(() => safeGetStorage('ig_quotes', initialQuotes));

  useEffect(() => { safeSetStorage('ig_clients', clients); }, [clients]);
  useEffect(() => { safeSetStorage('ig_projects', projects); }, [projects]);
  useEffect(() => { safeSetStorage('ig_quotes', quotes); }, [quotes]);

  const requestConfirm = (title, message, onConfirmCallback) => {
    setConfirmModal({ isOpen: true, title, message, onConfirm: onConfirmCallback });
  };

  const handleSaveClient = (e) => {
    e.preventDefault();
    if (editingClient) {
      setClients(clients.map(c => c.id === editingClient.id ? { ...c, ...newClientData } : c));
    } else {
      const newId = clients.length > 0 ? Math.max(...clients.map(c => c.id)) + 1 : 1;
      setClients([...clients, { id: newId, ...newClientData }]);
    }
    setShowNewClientModal(false);
    setEditingClient(null);
    setNewClientData({ name: '', contact: '', email: '', phone: '' });
  };

  const handleSaveProject = (e) => {
    e.preventDefault();
    if (editingProject) {
      setProjects(projects.map(p => p.id === editingProject.id ? { ...p, ...newProjectData, clientId: Number(newProjectData.clientId) } : p));
    } else {
      const newId = projects.length > 0 ? Math.max(...projects.map(p => p.id)) + 1 : 101;
      setProjects([...projects, { id: newId, ...newProjectData, clientId: Number(newProjectData.clientId) }]);
    }
    setShowNewProjectModal(false);
    setEditingProject(null);
    setNewProjectData({ title: '', clientId: '', type: 'Diseño', status: 'Pendiente', deadline: '' });
  };

  const handleSaveQuote = (quoteData) => {
    if (editingQuote) {
      setQuotes(quotes.map(q => q.id === editingQuote.id ? { ...q, ...quoteData } : q));
    } else {
      const newId = quotes.length > 0 ? Math.max(...quotes.map(q => q.id)) + 1 : 1001;
      setQuotes([{ id: newId, ...quoteData }, ...quotes]);
    }
    setShowCotizador(false);
    setEditingQuote(null);
    setActiveTab('presupuestos'); 
  };

  const handleUpdateQuoteStatus = (id, newStatus) => {
    const currentQuote = quotes.find(q => q.id === id);
    
    // Si el estado cambia a 'Aprobado', se genera un trabajo en Pendiente automáticamente
    if (currentQuote && newStatus === 'Aprobado' && currentQuote.status !== 'Aprobado') {
      setProjects(prevProjects => {
        const newProjectId = prevProjects.length > 0 ? Math.max(...prevProjects.map(p => p.id)) + 1 : 101;
        const newProject = {
          id: newProjectId,
          title: currentQuote.description || 'Trabajo desde Presupuesto',
          clientId: currentQuote.clientId,
          type: 'Corpóreo',
          status: 'Pendiente',
          deadline: ''
        };
        return [newProject, ...prevProjects];
      });
      
      requestConfirm(
        '¡Presupuesto Aprobado!', 
        'Se ha generado automáticamente una nueva Orden de Trabajo en estado "Pendiente".', 
        null
      );
    }

    setQuotes(quotes.map(q => q.id === id ? { ...q, status: newStatus } : q));
  };

  const handleDeleteQuote = (id) => {
    requestConfirm('Eliminar Presupuesto', '¿Estás seguro de eliminar este presupuesto? Esta acción no se puede deshacer.', () => {
      setQuotes(prev => prev.filter(q => q.id !== id));
    });
  };

  const openCotizador = (quote = null, print = false) => {
    setEditingQuote(quote);
    setAutoPrintQuote(print);
    setShowCotizador(true);
  };

  const closeCotizador = () => {
    setShowCotizador(false);
    setEditingQuote(null);
    setAutoPrintQuote(false);
  };

  const getClientName = (id) => {
    const client = clients.find(c => c.id === id);
    return client ? client.name : 'Desconocido';
  };

  const getStatusColor = (status) => {
    switch (status) {
      case 'Completado': return 'bg-green-100 text-green-800 border-green-200';
      case 'En Proceso': return 'bg-blue-100 text-blue-800 border-blue-200';
      case 'Pendiente': return 'bg-orange-100 text-orange-800 border-orange-200';
      default: return 'bg-gray-100 text-gray-800 border-gray-200';
    }
  };

  const getQuoteStatusColor = (status) => {
    switch (status) {
      case 'Aprobado': return 'text-green-600 bg-green-50';
      case 'Rechazado': return 'text-red-600 bg-red-50';
      case 'Pendiente': return 'text-yellow-600 bg-yellow-50';
      default: return 'text-gray-600 bg-gray-50';
    }
  };

  const formatCurrency = (amount) => {
    return new Intl.NumberFormat('es-AR', { style: 'currency', currency: 'ARS' }).format(amount);
  };

  const navigateTo = (tab) => {
    setActiveTab(tab);
    setShowCotizador(false);
  };

  const renderDashboard = () => {
    const pendingProjects = projects.filter(p => p.status !== 'Completado').length;
    const pendingQuotes = quotes.filter(q => q.status === 'Pendiente').length;
    const totalClients = clients.length;
    const recentRevenue = quotes.filter(q => q.status === 'Aprobado').reduce((acc, curr) => acc + curr.amount, 0);

    return (
      <div className="space-y-6 animate-in fade-in duration-500">
        <h2 className="text-2xl font-bold text-slate-800">Panel General</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
          <div 
            onClick={() => navigateTo('proyectos')} 
            className="bg-white p-6 rounded-xl border border-slate-100 shadow-sm flex items-center space-x-4 cursor-pointer hover:-translate-y-1 hover:shadow-md hover:border-indigo-200 transition-all"
          >
            <div className="p-3 bg-indigo-100 text-indigo-600 rounded-lg"><Briefcase size={24} /></div>
            <div>
              <p className="text-sm text-slate-500 font-medium">Trabajos Activos</p>
              <h3 className="text-2xl font-bold text-slate-800">{pendingProjects}</h3>
            </div>
          </div>
          <div 
            onClick={() => navigateTo('presupuestos')} 
            className="bg-white p-6 rounded-xl border border-slate-100 shadow-sm flex items-center space-x-4 cursor-pointer hover:-translate-y-1 hover:shadow-md hover:border-orange-200 transition-all"
          >
            <div className="p-3 bg-orange-100 text-orange-600 rounded-lg"><FileText size={24} /></div>
            <div>
              <p className="text-sm text-slate-500 font-medium">Presupuestos Pdtes.</p>
              <h3 className="text-2xl font-bold text-slate-800">{pendingQuotes}</h3>
            </div>
          </div>
          <div 
            onClick={() => navigateTo('clientes')} 
            className="bg-white p-6 rounded-xl border border-slate-100 shadow-sm flex items-center space-x-4 cursor-pointer hover:-translate-y-1 hover:shadow-md hover:border-emerald-200 transition-all"
          >
            <div className="p-3 bg-emerald-100 text-emerald-600 rounded-lg"><Users size={24} /></div>
            <div>
              <p className="text-sm text-slate-500 font-medium">Clientes Totales</p>
              <h3 className="text-2xl font-bold text-slate-800">{totalClients}</h3>
            </div>
          </div>
          <div 
            onClick={() => navigateTo('presupuestos')} 
            className="bg-white p-6 rounded-xl border border-slate-100 shadow-sm flex items-center space-x-4 cursor-pointer hover:-translate-y-1 hover:shadow-md hover:border-blue-200 transition-all"
          >
            <div className="p-3 bg-blue-100 text-blue-600 rounded-lg"><CheckCircle2 size={24} /></div>
            <div>
              <p className="text-sm text-slate-500 font-medium">Ingresos Aprobados</p>
              <h3 className="text-2xl font-bold text-slate-800">{formatCurrency(recentRevenue)}</h3>
            </div>
          </div>
        </div>

        <div className="bg-white rounded-xl border border-slate-100 shadow-sm overflow-hidden">
          <div className="p-6 border-b border-slate-100 flex justify-between items-center">
            <h3 className="text-lg font-semibold text-slate-800">Trabajos en Curso</h3>
            <button 
              onClick={() => navigateTo('proyectos')} 
              className="text-sm text-indigo-600 hover:text-indigo-800 font-medium"
            >
              Ver todos
            </button>
          </div>
          <div className="divide-y divide-slate-100">
            {projects.filter(p => p.status !== 'Completado').map(project => (
              <div key={project.id} className="p-4 flex items-center justify-between hover:bg-slate-50 transition-colors">
                <div className="flex items-center space-x-4">
                  <div className={`p-2 rounded-full ${project.type === 'Diseño' ? 'bg-purple-100 text-purple-600' : 'bg-cyan-100 text-cyan-600'}`}>
                    {project.type === 'Diseño' ? <Palette size={20} /> : <Printer size={20} />}
                  </div>
                  <div>
                    <h4 className="text-sm font-semibold text-slate-800">{project.title}</h4>
                    <p className="text-xs text-slate-500">{getClientName(project.clientId)}</p>
                  </div>
                </div>
                <div className="flex items-center space-x-4">
                  <span className="text-xs text-slate-500 flex items-center">
                    <Clock size={14} className="mr-1"/> 
                    Entrega: {project.deadline ? project.deadline.split('-').reverse().join('/') : '-'}
                  </span>
                  <span className={`px-3 py-1 text-xs rounded-full border ${getStatusColor(project.status)} font-medium`}>
                    {project.status}
                  </span>
                </div>
              </div>
            ))}
          </div>
        </div>
      </div>
    );
  };

  const renderClientes = () => {
    const filteredClients = clients.filter(c => 
      c.name.toLowerCase().includes(searchQuery.toLowerCase()) || 
      c.contact.toLowerCase().includes(searchQuery.toLowerCase())
    );

    return (
      <div className="space-y-6 animate-in fade-in duration-500">
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
          <h2 className="text-2xl font-bold text-slate-800">Directorio de Clientes</h2>
          <button 
            onClick={() => {
              setEditingClient(null);
              setNewClientData({ name: '', contact: '', email: '', phone: '' });
              setShowNewClientModal(true);
            }}
            className="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors shadow-sm"
          >
            <Plus size={18} className="mr-2" /> Nuevo Cliente
          </button>
        </div>

        {showNewClientModal && (
          <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4">
            <div className="bg-white rounded-xl shadow-xl w-full max-w-md overflow-hidden animate-in zoom-in-95 duration-200">
              <div className="p-4 border-b border-slate-100 flex justify-between items-center bg-slate-50">
                <h3 className="font-bold text-slate-800">{editingClient ? 'Editar Cliente' : 'Agregar Nuevo Cliente'}</h3>
                <button onClick={() => setShowNewClientModal(false)} className="text-slate-400 hover:text-slate-600"><X size={20}/></button>
              </div>
              <form onSubmit={handleSaveClient} className="p-6 space-y-4">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Empresa / Nombre</label>
                  <input 
                    required type="text" 
                    value={newClientData.name} 
                    onChange={e => setNewClientData({...newClientData, name: e.target.value})} 
                    className="w-full p-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" 
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Contacto Principal</label>
                  <input 
                    type="text" 
                    value={newClientData.contact} 
                    onChange={e => setNewClientData({...newClientData, contact: e.target.value})} 
                    className="w-full p-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" 
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Email</label>
                  <input 
                    type="email" 
                    value={newClientData.email} 
                    onChange={e => setNewClientData({...newClientData, email: e.target.value})} 
                    className="w-full p-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" 
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Teléfono</label>
                  <input 
                    type="text" 
                    value={newClientData.phone} 
                    onChange={e => setNewClientData({...newClientData, phone: e.target.value})} 
                    className="w-full p-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" 
                  />
                </div>
                <div className="pt-4 flex justify-end space-x-2">
                  <button 
                    type="button" 
                    onClick={() => setShowNewClientModal(false)} 
                    className="px-4 py-2 text-slate-600 bg-slate-100 hover:bg-slate-200 rounded-lg transition-colors"
                  >
                    Cancelar
                  </button>
                  <button 
                    type="submit" 
                    className="px-4 py-2 text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors"
                  >
                    {editingClient ? 'Guardar Cambios' : 'Guardar Cliente'}
                  </button>
                </div>
              </form>
            </div>
          </div>
        )}

        <div className="bg-white rounded-xl border border-slate-100 shadow-sm overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full text-left border-collapse">
              <thead>
                <tr className="bg-slate-50 border-b border-slate-100 text-slate-500 text-sm">
                  <th className="p-4 font-medium">Empresa / Nombre</th>
                  <th className="p-4 font-medium">Contacto</th>
                  <th className="p-4 font-medium">Email</th>
                  <th className="p-4 font-medium">Teléfono</th>
                  <th className="p-4 font-medium text-center">Acciones</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100 text-sm">
                {filteredClients.map(client => (
                  <tr key={client.id} className="hover:bg-slate-50 transition-colors">
                    <td className="p-4 font-medium text-slate-800">{client.name}</td>
                    <td className="p-4 text-slate-600">{client.contact}</td>
                    <td className="p-4 text-slate-600">{client.email}</td>
                    <td className="p-4 text-slate-600">{client.phone}</td>
                    <td className="p-4 flex justify-center space-x-2">
                      <button 
                        onClick={() => {
                          setEditingClient(client);
                          setNewClientData(client);
                          setShowNewClientModal(true);
                        }} 
                        className="p-2 text-indigo-400 hover:text-indigo-600 transition-colors rounded-lg hover:bg-indigo-50" 
                        title="Editar Cliente"
                      >
                        <Edit size={18} />
                      </button>
                      <button 
                        onClick={() => { 
                          requestConfirm('Eliminar Cliente', '¿Borrar cliente y todos sus datos?', () => setClients(prev => prev.filter(c => c.id !== client.id)));
                        }} 
                        className="p-2 text-slate-400 hover:text-red-600 transition-colors rounded-lg hover:bg-red-50" 
                        title="Eliminar Cliente"
                      >
                        <Trash2 size={18} />
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            {filteredClients.length === 0 && (
              <div className="p-8 text-center text-slate-500">No se encontraron clientes.</div>
            )}
          </div>
        </div>
      </div>
    );
  };

  const renderProyectos = () => {
    const filteredProjects = projects.filter(p => 
      p.title.toLowerCase().includes(searchQuery.toLowerCase()) || 
      getClientName(p.clientId).toLowerCase().includes(searchQuery.toLowerCase()) ||
      p.type.toLowerCase().includes(searchQuery.toLowerCase())
    );

    return (
      <div className="space-y-6 animate-in fade-in duration-500">
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
          <h2 className="text-2xl font-bold text-slate-800">Gestión de Trabajos</h2>
          <button 
            onClick={() => {
              setEditingProject(null);
              setNewProjectData({ title: '', clientId: '', type: 'Diseño', status: 'Pendiente', deadline: '' });
              setShowNewProjectModal(true);
            }}
            className="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors shadow-sm"
          >
            <Plus size={18} className="mr-2" /> Nueva Orden
          </button>
        </div>

        {showNewProjectModal && (
          <div className="fixed inset-0 z-50 flex items-center justify-center bg-slate-900/50 p-4">
            <div className="bg-white rounded-xl shadow-xl w-full max-w-md overflow-hidden animate-in zoom-in-95 duration-200">
              <div className="p-4 border-b border-slate-100 flex justify-between items-center bg-slate-50">
                <h3 className="font-bold text-slate-800">{editingProject ? 'Editar Orden de Trabajo' : 'Agregar Nueva Orden de Trabajo'}</h3>
                <button onClick={() => setShowNewProjectModal(false)} className="text-slate-400 hover:text-slate-600"><X size={20}/></button>
              </div>
              <form onSubmit={handleSaveProject} className="p-6 space-y-4">
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Título del Trabajo</label>
                  <input 
                    required type="text" 
                    value={newProjectData.title} 
                    onChange={e => setNewProjectData({...newProjectData, title: e.target.value})} 
                    className="w-full p-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" 
                    placeholder="Ej. Cartel Corpóreo" 
                  />
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Cliente</label>
                  <select 
                    required 
                    value={newProjectData.clientId || ''} 
                    onChange={e => setNewProjectData({...newProjectData, clientId: e.target.value})} 
                    className="w-full p-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
                  >
                    <option value="" disabled>Seleccionar cliente...</option>
                    {clients.map(c => <option key={c.id} value={c.id}>{c.name}</option>)}
                  </select>
                </div>
                <div className="grid grid-cols-2 gap-4">
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">Tipo</label>
                    <select 
                      value={newProjectData.type} 
                      onChange={e => setNewProjectData({...newProjectData, type: e.target.value})} 
                      className="w-full p-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
                    >
                      <option value="Diseño">Diseño</option>
                      <option value="Impresión">Impresión</option>
                      <option value="Corpóreo">Corpóreo</option>
                      <option value="Mixto">Mixto</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-sm font-medium text-slate-700 mb-1">Estado</label>
                    <select 
                      value={newProjectData.status} 
                      onChange={e => setNewProjectData({...newProjectData, status: e.target.value})} 
                      className="w-full p-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none"
                    >
                      <option value="Pendiente">Pendiente</option>
                      <option value="En Proceso">En Proceso</option>
                      <option value="Completado">Completado</option>
                    </select>
                  </div>
                </div>
                <div>
                  <label className="block text-sm font-medium text-slate-700 mb-1">Fecha de Entrega</label>
                  <input 
                    required type="date" 
                    value={newProjectData.deadline} 
                    onChange={e => setNewProjectData({...newProjectData, deadline: e.target.value})} 
                    className="w-full p-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-indigo-500 outline-none" 
                  />
                </div>
                <div className="pt-4 flex justify-end space-x-2">
                  <button 
                    type="button" 
                    onClick={() => setShowNewProjectModal(false)} 
                    className="px-4 py-2 text-slate-600 bg-slate-100 hover:bg-slate-200 rounded-lg transition-colors"
                  >
                    Cancelar
                  </button>
                  <button 
                    type="submit" 
                    className="px-4 py-2 text-white bg-indigo-600 hover:bg-indigo-700 rounded-lg transition-colors"
                  >
                    {editingProject ? 'Guardar Cambios' : 'Crear Orden'}
                  </button>
                </div>
              </form>
            </div>
          </div>
        )}

        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <div className="bg-slate-50 rounded-xl p-4 border border-slate-100">
            <h3 className="font-semibold text-slate-700 mb-4 flex items-center">
              <AlertCircle size={18} className="mr-2 text-orange-500" /> Pendientes
            </h3>
            <div className="space-y-4">
              {filteredProjects.filter(p => p.status === 'Pendiente').map(project => (
                <div 
                  key={project.id} 
                  onClick={() => { setEditingProject(project); setNewProjectData(project); setShowNewProjectModal(true); }} 
                  className="bg-white p-4 rounded-lg shadow-sm border border-slate-100 cursor-pointer hover:border-indigo-300 hover:shadow-md transition-all relative group"
                >
                  <div className="flex justify-between items-start mb-2">
                    <span className="text-xs font-semibold text-indigo-600 bg-indigo-50 px-2 py-1 rounded">{project.type}</span>
                    <span className="text-xs text-slate-400">#{project.id}</span>
                  </div>
                  <h4 className="font-medium text-slate-800 mb-1">{project.title}</h4>
                  <p className="text-sm text-slate-500 mb-3">{getClientName(project.clientId)}</p>
                  <div className="flex items-center text-xs text-slate-400">
                    <Clock size={14} className="mr-1" /> Vence: {project.deadline ? project.deadline.split('-').reverse().join('/') : '-'}
                  </div>
                  <button 
                    onClick={(e) => { 
                      e.stopPropagation(); 
                      requestConfirm('Eliminar Orden', '¿Estás seguro de eliminar esta orden?', () => setProjects(prev => prev.filter(pr => pr.id !== project.id)));
                    }} 
                    className="absolute top-2 right-2 p-1.5 bg-white text-slate-300 hover:text-red-500 rounded-full shadow-sm opacity-0 group-hover:opacity-100 transition-opacity"
                  >
                    <Trash2 size={14}/>
                  </button>
                </div>
              ))}
            </div>
          </div>
          <div className="bg-slate-50 rounded-xl p-4 border border-slate-100">
            <h3 className="font-semibold text-slate-700 mb-4 flex items-center">
              <Clock size={18} className="mr-2 text-blue-500" /> En Proceso
            </h3>
            <div className="space-y-4">
              {filteredProjects.filter(p => p.status === 'En Proceso').map(project => (
                <div 
                  key={project.id} 
                  onClick={() => { setEditingProject(project); setNewProjectData(project); setShowNewProjectModal(true); }} 
                  className="bg-white p-4 rounded-lg shadow-sm border border-slate-100 cursor-pointer hover:border-indigo-300 hover:shadow-md transition-all relative group"
                >
                  <div className="flex justify-between items-start mb-2">
                    <span className="text-xs font-semibold text-indigo-600 bg-indigo-50 px-2 py-1 rounded">{project.type}</span>
                    <span className="text-xs text-slate-400">#{project.id}</span>
                  </div>
                  <h4 className="font-medium text-slate-800 mb-1">{project.title}</h4>
                  <p className="text-sm text-slate-500 mb-3">{getClientName(project.clientId)}</p>
                  <div className="flex items-center text-xs text-slate-400">
                    <Clock size={14} className="mr-1" /> Vence: {project.deadline ? project.deadline.split('-').reverse().join('/') : '-'}
                  </div>
                  <button 
                    onClick={(e) => { 
                      e.stopPropagation(); 
                      requestConfirm('Eliminar Orden', '¿Estás seguro de eliminar esta orden?', () => setProjects(prev => prev.filter(pr => pr.id !== project.id)));
                    }} 
                    className="absolute top-2 right-2 p-1.5 bg-white text-slate-300 hover:text-red-500 rounded-full shadow-sm opacity-0 group-hover:opacity-100 transition-opacity"
                  >
                    <Trash2 size={14}/>
                  </button>
                </div>
              ))}
            </div>
          </div>
          <div className="bg-slate-50 rounded-xl p-4 border border-slate-100">
            <h3 className="font-semibold text-slate-700 mb-4 flex items-center">
              <CheckCircle2 size={18} className="mr-2 text-green-500" /> Completados
            </h3>
            <div className="space-y-4">
              {filteredProjects.filter(p => p.status === 'Completado').map(project => (
                <div 
                  key={project.id} 
                  onClick={() => { setEditingProject(project); setNewProjectData(project); setShowNewProjectModal(true); }} 
                  className="bg-white p-4 rounded-lg shadow-sm border border-slate-100 opacity-75 cursor-pointer hover:border-indigo-300 transition-all relative group"
                >
                  <div className="flex justify-between items-start mb-2">
                    <span className="text-xs font-semibold text-slate-500 bg-slate-100 px-2 py-1 rounded">{project.type}</span>
                    <span className="text-xs text-slate-400">#{project.id}</span>
                  </div>
                  <h4 className="font-medium text-slate-800 mb-1 line-through decoration-slate-300">{project.title}</h4>
                  <p className="text-sm text-slate-500 mb-3">{getClientName(project.clientId)}</p>
                  <div className="flex items-center text-xs text-green-600">
                    <CheckCircle2 size={14} className="mr-1" /> Entregado
                  </div>
                  <button 
                    onClick={(e) => { 
                      e.stopPropagation(); 
                      requestConfirm('Eliminar Orden', '¿Estás seguro de eliminar esta orden?', () => setProjects(prev => prev.filter(pr => pr.id !== project.id)));
                    }} 
                    className="absolute top-2 right-2 p-1.5 bg-white text-slate-300 hover:text-red-500 rounded-full shadow-sm opacity-0 group-hover:opacity-100 transition-opacity"
                  >
                    <Trash2 size={14}/>
                  </button>
                </div>
              ))}
            </div>
          </div>
        </div>
      </div>
    );
  };

  const renderTerminados = () => {
    const completedProjects = projects.filter(p => {
      if (p.status !== 'Completado') return false;
      const search = searchQuery.toLowerCase();
      return p.title.toLowerCase().includes(search) || 
             getClientName(p.clientId).toLowerCase().includes(search) ||
             p.type.toLowerCase().includes(search);
    });

    return (
      <div className="space-y-6 animate-in fade-in duration-500">
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
          <h2 className="text-2xl font-bold text-slate-800">Historial de Trabajos Terminados</h2>
        </div>

        <div className="bg-white rounded-xl border border-slate-100 shadow-sm overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full text-left border-collapse">
              <thead>
                <tr className="bg-slate-50 border-b border-slate-100 text-slate-500 text-sm">
                  <th className="p-4 font-medium">Trabajo</th>
                  <th className="p-4 font-medium">Cliente</th>
                  <th className="p-4 font-medium">Fecha de Entrega</th>
                  <th className="p-4 font-medium">Presupuesto Aprobado</th>
                  <th className="p-4 font-medium text-center">Acciones</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100 text-sm">
                {completedProjects.map(project => {
                  const clientQuotes = quotes.filter(q => q.clientId === project.clientId && q.status === 'Aprobado');
                  const totalApproved = clientQuotes.reduce((sum, q) => sum + q.amount, 0);

                  return (
                    <tr key={project.id} className="hover:bg-slate-50 transition-colors">
                      <td className="p-4 font-medium text-slate-800">
                        <div className="flex items-center gap-2">
                          <span className="px-2 py-1 bg-slate-100 text-slate-500 rounded text-xs font-semibold">{project.type}</span>
                          {project.title}
                        </div>
                      </td>
                      <td className="p-4 font-medium text-slate-700">{getClientName(project.clientId)}</td>
                      <td className="p-4 text-slate-600">{project.deadline ? project.deadline.split('-').reverse().join('/') : '-'}</td>
                      <td className="p-4">
                        {clientQuotes.length > 0 ? (
                          <span className="font-bold text-emerald-600 bg-emerald-50 px-3 py-1 rounded-full">{formatCurrency(totalApproved)}</span>
                        ) : (
                          <span className="text-slate-400 italic text-xs">Sin presupuesto registrado</span>
                        )}
                      </td>
                      <td className="p-4 flex justify-center space-x-2">
                        <button 
                          onClick={() => {
                            if (clientQuotes.length > 0) {
                              openCotizador(clientQuotes[0], true);
                            } else {
                              requestConfirm('Sin Presupuesto', 'Este trabajo no tiene un presupuesto aprobado asociado para imprimir.', null);
                            }
                          }} 
                          className="p-2 text-slate-500 hover:text-slate-700 transition-colors rounded-lg hover:bg-slate-100" 
                          title="Imprimir Presupuesto Asociado"
                        >
                          <Printer size={18} />
                        </button>
                        <button 
                          onClick={() => {
                            setEditingProject(project);
                            setNewProjectData(project);
                            setShowNewProjectModal(true);
                          }} 
                          className="p-2 text-indigo-400 hover:text-indigo-600 transition-colors rounded-lg hover:bg-indigo-50" 
                          title="Modificar Trabajo"
                        >
                          <Edit size={18} />
                        </button>
                        <button 
                          onClick={() => { 
                            requestConfirm('Eliminar Trabajo', '¿Estás seguro de eliminar este trabajo completado del historial?', () => setProjects(prev => prev.filter(pr => pr.id !== project.id)));
                          }} 
                          className="p-2 text-slate-400 hover:text-red-600 transition-colors rounded-lg hover:bg-red-50" 
                          title="Eliminar Trabajo"
                        >
                          <Trash2 size={18} />
                        </button>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
            {completedProjects.length === 0 && (
              <div className="p-8 text-center text-slate-500">No hay trabajos terminados que coincidan con la búsqueda.</div>
            )}
          </div>
        </div>
      </div>
    );
  };

  const renderPresupuestos = () => {
    const filteredQuotes = quotes.filter(q => 
      q.description.toLowerCase().includes(searchQuery.toLowerCase()) || 
      getClientName(q.clientId).toLowerCase().includes(searchQuery.toLowerCase())
    );

    return (
      <div className="space-y-6 animate-in fade-in duration-500">
        <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
          <h2 className="text-2xl font-bold text-slate-800">Presupuestos y Cotizaciones</h2>
          <button 
            onClick={() => openCotizador(null, false)}
            className="flex items-center px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition-colors shadow-sm"
          >
            <Plus size={18} className="mr-2" /> Nuevo Presupuesto
          </button>
        </div>

        <div className="bg-white rounded-xl border border-slate-100 shadow-sm overflow-hidden">
          <div className="overflow-x-auto">
            <table className="w-full text-left border-collapse">
              <thead>
                <tr className="bg-slate-50 border-b border-slate-100 text-slate-500 text-sm">
                  <th className="p-4 font-medium">Nº</th>
                  <th className="p-4 font-medium">Fecha</th>
                  <th className="p-4 font-medium">Cliente</th>
                  <th className="p-4 font-medium">Descripción</th>
                  <th className="p-4 font-medium">Monto</th>
                  <th className="p-4 font-medium">Estado</th>
                  <th className="p-4 font-medium text-center">Acciones</th>
                </tr>
              </thead>
              <tbody className="divide-y divide-slate-100 text-sm">
                {filteredQuotes.map(quote => (
                  <tr key={quote.id} className="hover:bg-slate-50 transition-colors">
                    <td className="p-4 font-medium text-slate-800">PRE-{generateQuoteNumber(quote.date, quote.id, getClientName(quote.clientId))}</td>
                    <td className="p-4 text-slate-600">{quote.date ? quote.date.split('-').reverse().join('/') : '-'}</td>
                    <td className="p-4 font-medium text-slate-800">{getClientName(quote.clientId)}</td>
                    <td className="p-4 text-slate-600">{quote.description}</td>
                    <td className="p-4 font-semibold text-slate-800">{formatCurrency(quote.amount)}</td>
                    <td className="p-4">
                      <select 
                        value={quote.status} 
                        onChange={(e) => handleUpdateQuoteStatus(quote.id, e.target.value)}
                        className={`px-3 py-1 text-xs rounded-full font-medium cursor-pointer outline-none border-none appearance-none text-center ${getQuoteStatusColor(quote.status)}`}
                      >
                        <option value="Pendiente" className="text-slate-800 bg-white">Pendiente</option>
                        <option value="Aprobado" className="text-slate-800 bg-white">Aprobado</option>
                        <option value="Rechazado" className="text-slate-800 bg-white">Rechazado</option>
                      </select>
                    </td>
                    <td className="p-4 flex justify-center space-x-2">
                      <button 
                        onClick={() => openCotizador(quote, true)} 
                        className="p-2 text-slate-500 hover:text-slate-700 transition-colors rounded-lg hover:bg-slate-100" 
                        title="Imprimir Presupuesto"
                      >
                        <Printer size={18} />
                      </button>
                      <button 
                        onClick={() => openCotizador(quote, false)} 
                        className="p-2 text-indigo-600 hover:bg-indigo-50 rounded-lg transition-colors" 
                        title="Abrir y Editar Cotizador"
                      >
                        <Edit size={18} />
                      </button>
                      <button 
                        onClick={() => handleDeleteQuote(quote.id)} 
                        className="p-2 text-slate-400 hover:text-red-600 transition-colors rounded-lg hover:bg-red-50" 
                        title="Eliminar Presupuesto"
                      >
                        <Trash2 size={18} />
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
            {filteredQuotes.length === 0 && (
              <div className="p-8 text-center text-slate-500">No se encontraron presupuestos.</div>
            )}
          </div>
        </div>
      </div>
    );
  };

  return (
    <div className="min-h-screen bg-slate-50 flex flex-col md:flex-row font-sans text-slate-900">
      
      <aside className={`fixed inset-y-0 left-0 z-50 w-64 bg-slate-900 text-white transform transition-transform duration-300 ease-in-out md:relative md:translate-x-0 ${isMobileMenuOpen ? 'translate-x-0' : '-translate-x-full'}`}>
        <div className="flex items-center justify-between p-6 border-b border-slate-800">
          <div className="flex items-center space-x-3">
            <div className="w-8 h-8 bg-indigo-500 rounded-lg flex items-center justify-center"><Palette size={20} className="text-white" /></div>
            <h1 className="text-lg font-bold tracking-tight">IdeaGráfica</h1>
          </div>
          <button className="md:hidden text-slate-400 hover:text-white" onClick={() => setIsMobileMenuOpen(false)}><X size={24} /></button>
        </div>

        <nav className="p-4 space-y-2">
          <button onClick={() => navigateTo('dashboard')} className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition-all ${activeTab === 'dashboard' ? 'bg-indigo-600 text-white shadow-md' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'}`}><LayoutDashboard size={20} /><span className="font-medium">Dashboard</span></button>
          <button onClick={() => navigateTo('clientes')} className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition-all ${activeTab === 'clientes' ? 'bg-indigo-600 text-white shadow-md' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'}`}><Users size={20} /><span className="font-medium">Clientes</span></button>
          <button onClick={() => navigateTo('proyectos')} className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition-all ${activeTab === 'proyectos' ? 'bg-indigo-600 text-white shadow-md' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'}`}><Briefcase size={20} /><span className="font-medium">Trabajos</span></button>
          <button onClick={() => navigateTo('presupuestos')} className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition-all ${activeTab === 'presupuestos' ? 'bg-indigo-600 text-white shadow-md' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'}`}><FileText size={20} /><span className="font-medium">Presupuestos</span></button>
          <button onClick={() => navigateTo('terminados')} className={`w-full flex items-center space-x-3 px-4 py-3 rounded-xl transition-all ${activeTab === 'terminados' ? 'bg-indigo-600 text-white shadow-md' : 'text-slate-400 hover:bg-slate-800 hover:text-slate-200'}`}><Archive size={20} /><span className="font-medium">Terminados</span></button>
        </nav>
      </aside>

      {isMobileMenuOpen && <div className="fixed inset-0 bg-slate-900/50 z-40 md:hidden" onClick={() => setIsMobileMenuOpen(false)} />}

      <main className="flex-1 flex flex-col min-w-0 overflow-hidden">
        <header className="bg-white border-b border-slate-200 h-16 flex items-center justify-between px-4 sm:px-6 lg:px-8 z-10 shadow-sm">
          <div className="flex items-center">
            <button className="md:hidden p-2 -ml-2 mr-2 text-slate-500 hover:bg-slate-100 rounded-lg" onClick={() => setIsMobileMenuOpen(true)}><Menu size={24} /></button>
            <div className="relative hidden sm:block">
              <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-slate-400" size={18} />
              <input 
                type="text" 
                value={searchQuery}
                onChange={(e) => setSearchQuery(e.target.value)}
                placeholder="Buscar clientes, trabajos..." 
                className="pl-10 pr-4 py-2 bg-slate-50 border border-slate-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:bg-white transition-all w-64 outline-none"
              />
            </div>
          </div>
          <div className="flex items-center space-x-4">
            <div className="h-8 w-8 rounded-full bg-gradient-to-tr from-indigo-500 to-purple-500 text-white flex items-center justify-center font-bold shadow-md cursor-pointer">IG</div>
          </div>
        </header>

        <div className="flex-1 overflow-auto p-4 sm:p-6 lg:p-8">
          <div className="max-w-7xl mx-auto">
            {activeTab === 'dashboard' && renderDashboard()}
            {activeTab === 'clientes' && renderClientes()}
            {activeTab === 'proyectos' && renderProyectos()}
            {activeTab === 'terminados' && renderTerminados()}
            
            {activeTab === 'presupuestos' && !showCotizador && renderPresupuestos()}
            {activeTab === 'presupuestos' && showCotizador && (
              <CotizadorCorporeos 
                onBack={closeCotizador} 
                quoteId={quotes.length > 0 ? Math.max(...quotes.map(q => q.id)) + 1 : 1001}
                clients={clients}
                onSave={handleSaveQuote}
                requestConfirm={requestConfirm}
                existingQuote={editingQuote}
                autoPrint={autoPrintQuote}
              />
            )}
          </div>
        </div>

        {/* --- MODAL DE CONFIRMACIÓN / ALERTA SEGURO --- */}
        {confirmModal.isOpen && (
          <div className="fixed inset-0 z-[200] flex items-center justify-center bg-slate-900/60 p-4 backdrop-blur-sm animate-in fade-in duration-200">
            <div className="bg-white rounded-2xl shadow-2xl w-full max-w-sm overflow-hidden animate-in zoom-in-95 duration-200">
              <div className="p-6 text-center">
                <div className={`w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4 ${confirmModal.onConfirm ? 'bg-red-100 text-red-600' : 'bg-blue-100 text-blue-600'}`}>
                  {confirmModal.onConfirm ? <AlertTriangle size={32} /> : <Info size={32} />}
                </div>
                <h3 className="text-xl font-bold text-slate-800 mb-2">{confirmModal.title}</h3>
                <p className="text-slate-500 mb-8">{confirmModal.message}</p>
                <div className="flex gap-3">
                  <button 
                    onClick={() => setConfirmModal({ isOpen: false, title: '', message: '', onConfirm: null })} 
                    className="flex-1 py-3 px-4 bg-slate-100 hover:bg-slate-200 text-slate-700 rounded-xl font-semibold transition-colors"
                  >
                    {confirmModal.onConfirm ? 'Cancelar' : 'Entendido'}
                  </button>
                  {confirmModal.onConfirm && (
                    <button 
                      onClick={() => {
                        confirmModal.onConfirm();
                        setConfirmModal({ isOpen: false, title: '', message: '', onConfirm: null });
                      }} 
                      className="flex-1 py-3 px-4 bg-red-600 hover:bg-red-700 text-white rounded-xl font-semibold transition-colors shadow-md shadow-red-200"
                    >
                      Sí, Confirmar
                    </button>
                  )}
                </div>
              </div>
            </div>
          </div>
        )}

      </main>
    </div>
  );
}