Facturas FM<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n \n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700;900&family=JetBrains+Mono:wght@400;700&display=swap');\n \n \/* Ocultar t\u00edtulos gen\u00e9ricos del Theme de WordPress *\/\n header.entry-header, .entry-title, .page-title, .post-title, .elementor-page-title, .nv-page-title-wrap, h1.has-text-align-center { \n display: none !important; \n }\n\n body { font-family: 'Inter', system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }\n .font-mono { font-family: 'JetBrains Mono', monospace; }\n\n @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\n .fade-in { animation: fadeIn 0.3s ease-in-out forwards; }\n \n .hide-scroll::-webkit-scrollbar { display: none; }\n .hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }\n .pb-safe { padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); }\n\n \/* Estilos de Impresi\u00f3n *\/\n @media print {\n @page { size: A4 portrait; margin: 15mm; } \n \n \/* Forzar la impresi\u00f3n de colores de fondo y dise\u00f1o original *\/\n * {\n -webkit-print-color-adjust: exact !important;\n print-color-adjust: exact !important;\n color-adjust: exact !important;\n }\n\n body { background-color: white !important; margin: 0 !important; padding: 0 !important; }\n .no-print { display: none !important; }\n #preview-container { display: block !important; margin: 0 !important; padding: 0 !important; }\n \n .hide-scroll { overflow: visible !important; border: none !important; }\n \n #invoice-print-area {\n box-shadow: none !important; \n border: none !important; \n margin: 0 auto !important;\n padding: 10px !important;\n width: 100% !important; \n max-width: 100% !important; \n min-width: unset !important;\n page-break-inside: avoid;\n }\n \/* Oculta elementos de la UI de WP si interfieren durante la impresi\u00f3n *\/\n #wpadminbar, .site-header, .site-footer, .sidebar, .elementor-location-header, .elementor-location-footer { display: none !important; }\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-50 text-slate-900 pb-24 print:bg-white print:p-0 print:m-0\">\n\n <input type=\"file\" id=\"importBackupFile\" accept=\".json\" class=\"hidden\" onchange=\"app.handleImport(event)\">\n\n <nav class=\"bg-[#3b82f6] text-white px-4 py-3 sticky top-0 z-50 flex justify-between items-center shadow-md no-print\">\n <div class=\"flex items-center gap-3 cursor-pointer\" onclick=\"app.setView('dashboard')\">\n <img decoding=\"async\" src=\"https:\/\/www.fagalesmarket.com\/wp-content\/uploads\/2025\/07\/ico-fagales-market.avif\" alt=\"Logo\" class=\"w-8 h-8 bg-white rounded-lg p-0.5 object-contain shadow-sm\" \/>\n <span class=\"font-bold tracking-tight text-lg\">Facturas FM<\/span>\n <\/div>\n <div class=\"flex gap-4\">\n <button type=\"button\" onclick=\"app.setView('inventory')\" class=\"hover:text-blue-200\"><i data-lucide=\"package\" class=\"w-5 h-5\"><\/i><\/button>\n <button type=\"button\" onclick=\"app.setView('clients')\" class=\"hover:text-blue-200\"><i data-lucide=\"users\" class=\"w-5 h-5\"><\/i><\/button>\n <button type=\"button\" onclick=\"app.setView('settings')\" class=\"hover:text-blue-200\"><i data-lucide=\"settings\" class=\"w-5 h-5\"><\/i><\/button>\n <\/div>\n <\/nav>\n\n <div class=\"max-w-5xl mx-auto p-3 sm:p-4 space-y-4 no-print\" id=\"main-container\"><\/div>\n\n <div id=\"preview-container\" class=\"hidden max-w-5xl mx-auto p-2 sm:p-4 space-y-6 fade-in\">\n <div class=\"flex gap-2 no-print\">\n <button type=\"button\" onclick=\"app.imprimir()\" class=\"w-full bg-[#3b82f6] text-white py-3.5 rounded-xl font-black text-sm uppercase tracking-widest flex items-center justify-center gap-2 shadow-md hover:bg-blue-700 active:scale-95 transition-transform\">\n <i data-lucide=\"printer\" class=\"w-5 h-5\"><\/i> Imprimir Factura\n <\/button>\n <\/div>\n\n <div class=\"w-full overflow-x-auto bg-white sm:bg-transparent rounded-xl shadow-sm sm:shadow-none sm:border-none hide-scroll\">\n <div id=\"invoice-print-area\" class=\"bg-white min-w-[800px] w-full text-slate-900 font-sans p-8 sm:p-12 relative sm:shadow-xl sm:rounded-xl\">\n <div class=\"flex justify-between items-start mb-8\">\n <div class=\"flex items-center gap-3\">\n <img decoding=\"async\" src=\"https:\/\/www.fagalesmarket.com\/wp-content\/uploads\/2025\/07\/ico-fagales-market.avif\" alt=\"Logo\" class=\"w-[72px] h-[72px] object-contain\" \/>\n <div class=\"text-[11px] leading-snug text-slate-700\">\n <strong class=\"text-sm font-black text-slate-900 block mb-0.5\" id=\"inv-bizName\">Empresa<\/strong>\n <span id=\"inv-phone\"><\/span><br\/>\n <span id=\"inv-email\"><\/span><br\/>\n <span id=\"inv-web\"><\/span>\n <\/div>\n <\/div>\n <div>\n <h1 class=\"text-[42px] font-black text-[#3b82f6] tracking-tighter uppercase leading-none\">FACTURA<\/h1>\n <\/div>\n <\/div>\n\n <div class=\"h-px w-full bg-slate-200 mb-6\"><\/div>\n\n <div class=\"grid grid-cols-2 gap-8 mb-8\">\n <div class=\"text-[11px] text-slate-800 leading-tight\">\n <p class=\"font-black text-[12px] text-slate-900 mb-1.5 uppercase\">COBRAR A<\/p>\n <p id=\"inv-mandante\">—<\/p>\n <p id=\"inv-receptor-wrap\" class=\"hidden\">Cliente: <span id=\"inv-receptor\"><\/span><\/p>\n <p id=\"inv-tel-wrap\" class=\"hidden\">Tel\u00e9fono: <span id=\"inv-tel\"><\/span><\/p>\n <p id=\"inv-dir-wrap\" class=\"hidden\">Entregar en: <span id=\"inv-dir\"><\/span><\/p>\n <p id=\"inv-prov-wrap\" class=\"hidden\">Zona: <span id=\"inv-prov\"><\/span><\/p>\n <\/div>\n <div class=\"flex justify-end text-[11px]\">\n <table class=\"text-right border-separate\" style=\"border-spacing: 16px 4px;\">\n <tbody>\n <tr><td class=\"font-black text-slate-900 uppercase\">N\u00ba DE FACTURA<\/td><td class=\"text-slate-600 font-mono\" id=\"inv-id\">—<\/td><\/tr>\n <tr><td class=\"font-black text-slate-900 uppercase\">FECHA<\/td><td class=\"text-slate-600 font-mono\" id=\"inv-date\">—<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n\n <table class=\"w-full text-[11px] mb-8 border-collapse\">\n <thead>\n <tr class=\"bg-[#3b82f6] text-white\">\n <th class=\"py-2.5 px-3 text-left font-bold uppercase tracking-wider rounded-tl-lg\">DESCRIPCI\u00d3N<\/th>\n <th class=\"py-2.5 px-3 text-center font-bold uppercase tracking-wider w-16\">CANT.<\/th>\n <th class=\"py-2.5 px-3 text-right font-bold uppercase tracking-wider w-24\">PRECIO<\/th>\n <th class=\"py-2.5 px-3 text-right font-bold uppercase tracking-wider w-28 rounded-tr-lg\">IMPORTE<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"inv-items\"><\/tbody>\n <\/table>\n\n <div class=\"flex justify-between items-end mt-4\">\n <div class=\"text-[11px]\">\n <p class=\"font-black text-slate-900 mb-0.5 uppercase\">M\u00c9TODO DE PAGO<\/p>\n <p class=\"text-slate-600\" id=\"inv-method\">Pagos v\u00eda ZELLE<\/p>\n <\/div>\n <div class=\"w-[220px]\">\n <div class=\"bg-[#3b82f6] text-white flex justify-between px-4 py-3 font-bold text-[13px] rounded-b-lg\">\n <span class=\"uppercase tracking-widest\">TOTAL<\/span>\n <span id=\"inv-total\">$0.00<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-slate-200 no-print mt-6\">\n <div class=\"flex justify-between items-center mb-3\">\n <h3 class=\"font-black text-[10px] uppercase tracking-widest text-[#3b82f6] flex items-center gap-2\"><i data-lucide=\"printer\" class=\"w-4 h-4\"><\/i> Ticket Cuba (T\u00e9rmica)<\/h3>\n <button type=\"button\" onclick=\"app.copyThermal()\" class=\"text-[10px] font-black uppercase bg-slate-100 text-slate-600 px-3 py-1.5 rounded-lg hover:bg-slate-200 active:scale-95 transition-all\">COPIAR TEXTO<\/button>\n <\/div>\n <textarea id=\"thermal-output\" class=\"w-full h-48 bg-slate-50 p-4 rounded-xl font-mono text-[11px] leading-tight text-slate-700 border border-slate-200 outline-none focus:border-[#3b82f6] resize-none\" oninput=\"app.updateThermalText(this.value)\"><\/textarea>\n <\/div>\n <\/div>\n\n <div class=\"fixed bottom-0 w-full bg-white border-t border-slate-200 p-2 flex justify-around items-center z-[60] no-print sm:hidden pb-safe\" id=\"bottom-nav\"><\/div>\n\n <div id=\"toast\" class=\"fixed bottom-24 left-1\/2 -translate-x-1\/2 bg-slate-900 text-white px-6 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest shadow-2xl z-[100] whitespace-nowrap border border-white\/10 transition-all duration-300 opacity-0 pointer-events-none transform translate-y-4\"><\/div>\n\n <script>\n const app = {\n view: 'dashboard',\n tab: 'import',\n config: {},\n library: { products: [], clients: [] },\n history: [],\n order: {},\n editableThermal: '',\n\n init() {\n this.config = JSON.parse(localStorage.getItem('facturas_fm_config')) || {\n bizName: 'Fagales Market', phone: '593959685460', email: 'contacto@fagalesmarket.com',\n web: 'www.fagalesmarket.com', prov: 'Holgu\u00edn', currency: 'USD', symbol: '$'\n };\n this.library = JSON.parse(localStorage.getItem('facturas_fm_library')) || { products: [], clients: [] };\n this.history = JSON.parse(localStorage.getItem('facturas_fm_history')) || [];\n \n this.resetOrder();\n this.renderView();\n },\n\n saveAll() {\n localStorage.setItem('facturas_fm_config', JSON.stringify(this.config));\n localStorage.setItem('facturas_fm_library', JSON.stringify(this.library));\n localStorage.setItem('facturas_fm_history', JSON.stringify(this.history));\n },\n\n resetOrder() {\n this.order = {\n id: `FMINV-${Date.now().toString().slice(-6)}`,\n date: new Date().toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit', year: 'numeric' }),\n mandante: '', receptor: '', tel: '', dir: '', prov: this.config.prov,\n items: [], method: 'Pagos v\u00eda ZELLE', manualTotal: null, isManualTotal: false\n };\n },\n\n showToast(msg) {\n const toast = document.getElementById('toast');\n toast.innerText = msg;\n toast.classList.remove('opacity-0', 'translate-y-4');\n setTimeout(() => toast.classList.add('opacity-0', 'translate-y-4'), 2500);\n },\n\n setView(view) {\n this.view = view;\n this.renderView();\n },\n\n setTab(tab) {\n this.tab = tab;\n if(tab === 'preview') this.finalizeOrder();\n this.renderView();\n },\n\n getCalculatedTotal() {\n return this.order.items.reduce((acc, item) => acc + (item.qty * item.price), 0);\n },\n\n getFinalTotal() {\n return this.order.isManualTotal ? (this.order.manualTotal || 0) : this.getCalculatedTotal();\n },\n\n updateCurrency(val) {\n this.config.currency = val;\n const symbols = { 'USD': '$', 'EUR': '\u20ac', 'MXN': '$', 'BRL': 'R$', 'CUP': '$' };\n if (val !== 'CUSTOM') {\n this.config.symbol = symbols[val];\n } else {\n this.config.symbol = '';\n }\n this.saveAll();\n this.renderView();\n },\n\n updateCustomSymbol(val) {\n this.config.symbol = val;\n this.saveAll();\n },\n\n processImport() {\n const text = document.getElementById('rawTextInput').value;\n if(!text.trim()) return this.showToast('Texto vac\u00edo');\n\n try {\n this.order.items = [];\n const lines = text.split('\\n');\n const orderMatch = text.match(\/Pedido:\\*?\\s*([^\\n\\r]*)\/i);\n if (orderMatch) this.order.id = orderMatch[1].trim();\n\n const productRegex = \/\\*?(\\d+(?:\\.\\d+)?)\\*?\\s*-\\s*([^*:]+)(?::\\s*\\*?\\$?([\\d.,]+))?\/i;\n let currentItem = null;\n\n lines.forEach(line => {\n const pMatch = line.match(productRegex);\n if (pMatch && !line.toLowerCase().includes('total en')) {\n if (currentItem) this.order.items.push(currentItem);\n currentItem = {\n id: Math.random(),\n name: pMatch[2].replace(\/\\s*\u2013\\s*Env\u00edo seguro.*$\/i, '').trim(),\n qty: parseFloat(pMatch[1]),\n price: parseFloat(pMatch[3]?.replace(',', '')) || 0,\n details: []\n };\n } else if (line.trim().startsWith('\u21b3') && currentItem) {\n currentItem.details.push(line.trim().replace('\u21b3', '').trim());\n }\n });\n if (currentItem) this.order.items.push(currentItem);\n\n const findVal = (regex) => text.match(regex)?.[1]?.trim() || '';\n this.order.mandante = findVal(\/Cliente que env\u00eda:[\\s\\S]*?Nombre:\\*?\\s*([^\\n\\r]*)\/i);\n this.order.receptor = findVal(\/Datos de entrega en Cuba:[\\s\\S]*?Nombre:\\*?\\s*([^\\n\\r]*)\/i);\n this.order.tel = findVal(\/Datos de entrega en Cuba:[\\s\\S]*?Tel\u00e9fono:\\*?\\s*([^\\n\\r]*)\/i) || findVal(\/Tel\u00e9fono:\\*?\\s*([^\\n\\r]*)\/i);\n this.order.dir = findVal(\/Direcci\u00f3n:\\*?\\s*([^\\n\\r]*)\/i);\n this.order.prov = findVal(\/Provincia:\\*?\\s*([^\\n\\r]*)\/i) || this.config.prov;\n this.order.method = findVal(\/M\u00e9todo de pago:\\*?\\s*([^\\n\\r]*)\/i) || 'Pagos v\u00eda ZELLE';\n\n const totalMatch = text.match(\/TOTAL en [^:]+:\\*?\\s*\\$?([\\d.,]+)\/i);\n if (totalMatch) {\n this.order.manualTotal = parseFloat(totalMatch[1].replace(',', ''));\n this.order.isManualTotal = true;\n }\n\n this.setTab('manual');\n this.showToast('Datos extra\u00eddos');\n } catch (e) {\n this.showToast('Error de formato');\n }\n },\n\n finalizeOrder() {\n if (!this.order.mandante && this.order.items.length === 0) return;\n \n this.history = [this.order, ...this.history.filter(h => h.id !== this.order.id)].slice(0, 100);\n\n this.order.items.forEach(item => {\n const idx = this.library.products.findIndex(p => p.name.toLowerCase() === item.name.toLowerCase());\n if (idx > -1) this.library.products[idx].price = item.price;\n else if(item.name) this.library.products.push({ name: item.name, price: item.price });\n });\n\n if (this.order.mandante) {\n const cIdx = this.library.clients.findIndex(c => c.name.toLowerCase() === this.order.mandante.toLowerCase());\n if (cIdx === -1) this.library.clients.push({ name: this.order.mandante, tel: this.order.tel, dir: this.order.dir, receptor: this.order.receptor });\n }\n\n this.saveAll();\n this.updatePreviewVisuals();\n },\n\n updatePreviewVisuals() {\n document.getElementById('inv-bizName').innerText = this.config.bizName;\n document.getElementById('inv-phone').innerText = this.config.phone;\n document.getElementById('inv-email').innerText = this.config.email;\n document.getElementById('inv-web').innerText = this.config.web;\n \n document.getElementById('inv-id').innerText = this.order.id || '---';\n document.getElementById('inv-date').innerText = this.order.date;\n document.getElementById('inv-mandante').innerText = this.order.mandante || '---';\n \n const toggleField = (id, val) => {\n document.getElementById(`inv-${id}-wrap`).style.display = val ? 'block' : 'none';\n if(val) document.getElementById(`inv-${id}`).innerText = val;\n };\n toggleField('receptor', this.order.receptor);\n toggleField('tel', this.order.tel);\n toggleField('dir', this.order.dir);\n toggleField('prov', this.order.prov);\n\n document.getElementById('inv-method').innerText = this.order.method || 'Pagos v\u00eda ZELLE';\n document.getElementById('inv-total').innerText = `${this.config.symbol}${this.getFinalTotal().toFixed(2)}`;\n\n const tbody = document.getElementById('inv-items');\n tbody.innerHTML = this.order.items.map(item => `\n <tr class=\"bg-white align-top\">\n <td class=\"py-3 px-3\">\n <p class=\"font-bold text-slate-900 text-[12px]\">${item.name}<\/p>\n ${item.details.map(d => `\n <div class=\"text-[10px] text-slate-500 mt-1 flex items-start gap-1\">\n <span class=\"opacity-50\">\u21b3<\/span> <span>${d}<\/span>\n <\/div>\n `).join('')}\n <\/td>\n <td class=\"py-3 px-3 text-center font-bold text-slate-600\">${item.qty}<\/td>\n <td class=\"py-3 px-3 text-right text-slate-600\">${this.config.symbol}${parseFloat(item.price).toFixed(2)}<\/td>\n <td class=\"py-3 px-3 text-right font-black text-slate-900\">${this.config.symbol}${(item.qty * item.price).toFixed(2)}<\/td>\n <\/tr>\n `).join('');\n\n const thermal = `============================\n${this.config.bizName.toUpperCase()}\n============================\nID: ${this.order.id || 'S\/N'} | ${this.order.date}\nPROV: ${(this.order.prov || '').toUpperCase()}\n----------------------------\nMANDANTE: ${this.order.mandante || '---'}\nRECEPTOR: ${this.order.receptor || '---'}\nTELF: ${this.order.tel || '---'}\nDIR: ${this.order.dir || '---'}\n----------------------------\nENCARGO LOG\u00cdSTICO:\n${this.order.items.map(i => `- ${i.qty} ${i.name}${i.details.length > 0 ? '\\n ' + i.details.join('\\n ') : ''}`).join('\\n')}\n----------------------------\nMANDATO LOG\u00cdSTICO: El receptor\nconfirma ejecuci\u00f3n del encargo.\n\nFIRMA: _____________________`;\n this.editableThermal = thermal;\n document.getElementById('thermal-output').value = thermal;\n },\n\n updateThermalText(val) { this.editableThermal = val; },\n \n copyThermal() {\n const el = document.createElement('textarea'); el.value = this.editableThermal; \n document.body.appendChild(el); el.select(); document.execCommand('copy'); \n document.body.removeChild(el); this.showToast(\"Texto copiado\");\n },\n\n imprimir() {\n setTimeout(() => {\n window.print();\n }, 200);\n },\n\n downloadBackup() {\n const data = { config: this.config, library: this.library, history: this.history };\n const blob = new Blob([JSON.stringify(data)], { type: \"application\/json\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = `backup_facturas_fm_${Date.now()}.json`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n this.showToast(\"Backup Descargado\");\n },\n\n triggerImport() {\n document.getElementById('importBackupFile').click();\n },\n\n handleImport(event) {\n const file = event.target.files[0];\n if (!file) return;\n \n const reader = new FileReader();\n reader.onload = (e) => {\n try {\n const data = JSON.parse(e.target.result);\n if(data.config) this.config = data.config;\n if(data.library) this.library = data.library;\n if(data.history) this.history = data.history;\n this.saveAll();\n this.renderView();\n this.showToast(\"Backup Restaurado\");\n } catch(err) {\n this.showToast(\"Error en formato JSON\");\n }\n };\n reader.readAsText(file);\n event.target.value = ''; \n },\n\n renderView() {\n const c = document.getElementById('main-container');\n const pc = document.getElementById('preview-container');\n const nav = document.getElementById('bottom-nav');\n pc.classList.add('hidden');\n \n nav.innerHTML = `\n <button type=\"button\" onclick=\"app.setView('dashboard')\" class=\"p-2 flex flex-col items-center gap-1 ${this.view==='dashboard'?'text-[#3b82f6]':'text-slate-400'}\"><i data-lucide=\"layout-dashboard\" class=\"w-5 h-5\"><\/i><span class=\"text-[9px] font-black uppercase\">Inicio<\/span><\/button>\n <button type=\"button\" onclick=\"app.resetOrder(); app.setView('editor'); app.setTab('import');\" class=\"bg-[#3b82f6] text-white p-3 rounded-[1.2rem] shadow-xl shadow-blue-200 -mt-6 border-4 border-white\"><i data-lucide=\"plus\" class=\"w-6 h-6\"><\/i><\/button>\n <button type=\"button\" onclick=\"app.setView('history')\" class=\"p-2 flex flex-col items-center gap-1 ${this.view==='history'?'text-[#3b82f6]':'text-slate-400'}\"><i data-lucide=\"history\" class=\"w-5 h-5\"><\/i><span class=\"text-[9px] font-black uppercase\">Log<\/span><\/button>\n `;\n\n let html = '';\n\n if(this.view === 'dashboard') {\n html = `\n <div class=\"space-y-4 fade-in\">\n <div class=\"bg-white p-6 rounded-2xl shadow-sm flex justify-between items-center border border-slate-200\">\n <div><h1 class=\"text-xl font-bold text-slate-800\">Panel Principal<\/h1><p class=\"text-xs font-bold text-slate-400 mt-1 uppercase tracking-widest\">${this.history.length} Facturas<\/p><\/div>\n <button type=\"button\" onclick=\"app.resetOrder(); app.setView('editor'); app.setTab('import');\" class=\"bg-[#3b82f6] text-white px-5 py-3 rounded-xl font-bold flex items-center gap-2 hover:bg-blue-700 shadow-md\"><i data-lucide=\"plus\" class=\"w-5 h-5\"><\/i> Nueva<\/button>\n <\/div>\n <div class=\"bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm\">\n <div class=\"p-4 bg-slate-50 border-b font-black text-xs uppercase tracking-widest text-slate-500 flex justify-between items-center\">\n <span>\u00daltimas Facturas<\/span><button type=\"button\" onclick=\"app.setView('history')\" class=\"text-[#3b82f6]\">Ver todas<\/button>\n <\/div>\n <div class=\"divide-y divide-slate-100\">\n ${this.history.slice(0,8).map(h => `\n <div onclick=\"app.order = ${JSON.stringify(h).replace(\/\"\/g, '"')}; app.setView('editor'); app.setTab('preview');\" class=\"p-4 flex justify-between items-center cursor-pointer hover:bg-blue-50 transition-colors\">\n <div><p class=\"font-bold text-sm text-slate-800\">${h.mandante || 'Sin Nombre'}<\/p><p class=\"text-[10px] text-slate-400 font-mono mt-0.5\">${h.id} \u2022 ${h.date}<\/p><\/div>\n <div class=\"flex items-center gap-3\"><p class=\"font-black text-[#3b82f6]\">${this.config.symbol}${h.items.reduce((a,b)=>a+(b.qty*b.price),0).toFixed(2)}<\/p><i data-lucide=\"chevron-right\" class=\"w-4 h-4 text-slate-300\"><\/i><\/div>\n <\/div>\n `).join('')}\n ${this.history.length === 0 ? '<div class=\"p-8 text-center text-slate-400 text-sm italic\">No hay facturas registradas.<\/div>' : ''}\n <\/div>\n <\/div>\n <\/div>`;\n }\n else if(this.view === 'history' || this.view === 'inventory' || this.view === 'clients') {\n const titles = { history: 'Historial de \u00d3rdenes', inventory: 'Base de Productos', clients: 'Directorio de Clientes' };\n let listHtml = '';\n \n if(this.view === 'history') {\n listHtml = this.history.map(h => `\n <div class=\"p-4 flex justify-between items-center hover:bg-slate-50 transition-colors\">\n <div><p class=\"font-bold text-sm text-slate-800\">${h.mandante}<\/p><p class=\"text-[10px] font-mono text-slate-400\">${h.id} \u2022 ${h.date}<\/p><\/div>\n <button type=\"button\" onclick=\"app.order = ${JSON.stringify(h).replace(\/\"\/g, '"')}; app.setView('editor'); app.setTab('preview');\" class=\"text-[#3b82f6] font-bold text-[10px] uppercase tracking-widest bg-blue-50 px-3 py-2 rounded-lg\">ABRIR<\/button>\n <\/div>\n `).join('');\n if(!listHtml) listHtml = '<div class=\"p-10 text-center text-slate-400 text-sm italic\">No hay datos registrados.<\/div>';\n }\n else if(this.view === 'inventory') {\n listHtml = this.library.products.map((p, idx) => `\n <div class=\"p-4 flex justify-between items-center hover:bg-slate-50 transition-colors group\">\n <p class=\"font-bold text-sm text-slate-800\">${p.name} <span class=\"text-slate-400 text-[10px] font-bold block mt-0.5\">\u00daltimo Precio: ${this.config.symbol}${p.price}<\/span><\/p>\n <button type=\"button\" onclick=\"app.library.products.splice(${idx},1); app.saveAll(); app.renderView(); app.showToast('Eliminado');\" class=\"text-slate-300 hover:text-red-500\"><i data-lucide=\"trash-2\" class=\"w-4 h-4\"><\/i><\/button>\n <\/div>\n `).join('');\n if(!listHtml) listHtml = '<div class=\"p-10 text-center text-slate-400 text-sm italic\">Inventario vac\u00edo.<\/div>';\n }\n else if(this.view === 'clients') {\n listHtml = this.library.clients.map((c, idx) => `\n <div class=\"p-4 flex justify-between items-center hover:bg-slate-50 transition-colors group\">\n <div><p class=\"font-bold text-sm text-slate-800\">${c.name}<\/p><p class=\"text-[10px] text-slate-500 font-bold mt-0.5\">Receptor: ${c.receptor}<\/p><\/div>\n <button type=\"button\" onclick=\"app.library.clients.splice(${idx},1); app.saveAll(); app.renderView(); app.showToast('Eliminado');\" class=\"text-slate-300 hover:text-red-500\"><i data-lucide=\"trash-2\" class=\"w-4 h-4\"><\/i><\/button>\n <\/div>\n `).join('');\n if(!listHtml) listHtml = '<div class=\"p-10 text-center text-slate-400 text-sm italic\">Directorio vac\u00edo.<\/div>';\n }\n\n html = `\n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden divide-y divide-slate-100 fade-in\">\n <div class=\"p-5 border-b border-slate-200 flex items-center gap-3 bg-slate-50\">\n <button type=\"button\" onclick=\"app.setView('dashboard')\" class=\"p-1 hover:bg-slate-200 rounded-md\"><i data-lucide=\"arrow-left\" class=\"w-5 h-5\"><\/i><\/button>\n <h2 class=\"font-black text-sm uppercase tracking-widest text-slate-700\">${titles[this.view]}<\/h2>\n <\/div>\n ${listHtml}\n <\/div>`;\n }\n else if(this.view === 'settings') {\n html = `\n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 p-6 space-y-6 fade-in\">\n <div class=\"flex items-center gap-3 mb-4 border-b pb-4\">\n <button type=\"button\" onclick=\"app.setView('dashboard')\" class=\"p-1 hover:bg-slate-100 rounded-md\"><i data-lucide=\"arrow-left\" class=\"w-5 h-5\"><\/i><\/button>\n <h2 class=\"font-black text-sm uppercase tracking-widest text-slate-700\">Configuraci\u00f3n<\/h2>\n <\/div>\n <div class=\"space-y-4\">\n <div><label class=\"text-[10px] font-black uppercase text-slate-400\">Nombre Empresa<\/label><input onchange=\"app.config.bizName=this.value; app.saveAll()\" class=\"w-full p-3 bg-slate-50 rounded-xl border border-slate-200 outline-none mt-1 text-sm font-bold\" value=\"${this.config.bizName}\" \/><\/div>\n <div class=\"grid grid-cols-2 gap-4\">\n <div><label class=\"text-[10px] font-black uppercase text-slate-400\">Tel\u00e9fono<\/label><input onchange=\"app.config.phone=this.value; app.saveAll()\" class=\"w-full p-3 bg-slate-50 rounded-xl border border-slate-200 outline-none mt-1 text-sm font-bold\" value=\"${this.config.phone}\" \/><\/div>\n <div><label class=\"text-[10px] font-black uppercase text-slate-400\">Email<\/label><input onchange=\"app.config.email=this.value; app.saveAll()\" class=\"w-full p-3 bg-slate-50 rounded-xl border border-slate-200 outline-none mt-1 text-sm font-bold\" value=\"${this.config.email}\" \/><\/div>\n <\/div>\n <div><label class=\"text-[10px] font-black uppercase text-slate-400\">Sitio Web<\/label><input onchange=\"app.config.web=this.value; app.saveAll()\" class=\"w-full p-3 bg-slate-50 rounded-xl border border-slate-200 outline-none mt-1 text-sm font-bold\" value=\"${this.config.web}\" \/><\/div>\n <div class=\"grid grid-cols-2 gap-4 pt-4 border-t border-slate-100\">\n <div>\n <label class=\"text-[10px] font-black uppercase text-slate-400\">Moneda Base<\/label>\n <select onchange=\"app.updateCurrency(this.value)\" class=\"w-full p-3 bg-slate-50 rounded-xl border border-slate-200 outline-none mt-1 text-sm font-bold\">\n <option value=\"USD\" ${this.config.currency==='USD'?'selected':''}>USD ($)<\/option>\n <option value=\"EUR\" ${this.config.currency==='EUR'?'selected':''}>EUR (\u20ac)<\/option>\n <option value=\"MXN\" ${this.config.currency==='MXN'?'selected':''}>MXN ($)<\/option>\n <option value=\"BRL\" ${this.config.currency==='BRL'?'selected':''}>BRL (R$)<\/option>\n <option value=\"CUP\" ${this.config.currency==='CUP'?'selected':''}>CUP ($)<\/option>\n <option value=\"CUSTOM\" ${this.config.currency==='CUSTOM'?'selected':''}>Personalizada<\/option>\n <\/select>\n <div class=\"${this.config.currency === 'CUSTOM' ? '' : 'hidden'} mt-2\">\n <input type=\"text\" placeholder=\"S\u00edmbolo (ej. \u00a3)\" class=\"w-full p-3 bg-slate-50 rounded-xl border border-slate-200 outline-none text-sm font-bold\" value=\"${this.config.symbol}\" onchange=\"app.updateCustomSymbol(this.value)\">\n <\/div>\n <\/div>\n <div><label class=\"text-[10px] font-black uppercase text-slate-400\">Provincia Default<\/label><input onchange=\"app.config.prov=this.value; app.saveAll()\" class=\"w-full p-3 bg-slate-50 rounded-xl border border-slate-200 outline-none mt-1 text-sm font-bold\" value=\"${this.config.prov}\" \/><\/div>\n <\/div>\n <\/div>\n <div class=\"pt-6 border-t border-slate-100 flex gap-2\">\n <button type=\"button\" onclick=\"app.downloadBackup()\" class=\"bg-slate-900 text-white px-5 py-3 rounded-xl text-[10px] font-black tracking-widest uppercase flex items-center justify-center gap-2 w-full active:scale-95 transition-transform\"><i data-lucide=\"upload-cloud\" class=\"w-4 h-4\"><\/i> Exportar<\/button>\n <button type=\"button\" onclick=\"app.triggerImport()\" class=\"bg-[#3b82f6] text-white px-5 py-3 rounded-xl text-[10px] font-black tracking-widest uppercase flex items-center justify-center gap-2 w-full active:scale-95 transition-transform\"><i data-lucide=\"download-cloud\" class=\"w-4 h-4\"><\/i> Importar<\/button>\n <\/div>\n <\/div>`;\n }\n else if(this.view === 'editor') {\n let tabNav = `\n <div class=\"flex bg-slate-200 p-1.5 rounded-xl mb-4 text-[10px] font-black uppercase tracking-widest\">\n <button type=\"button\" onclick=\"app.setTab('import')\" class=\"flex-1 py-3 rounded-lg transition-all ${this.tab==='import'?'bg-white text-[#3b82f6] shadow-sm':'text-slate-500'}\">Importar<\/button>\n <button type=\"button\" onclick=\"app.setTab('manual')\" class=\"flex-1 py-3 rounded-lg transition-all ${this.tab==='manual'?'bg-white text-[#3b82f6] shadow-sm':'text-slate-500'}\">Editar<\/button>\n <button type=\"button\" onclick=\"app.setTab('preview')\" class=\"flex-1 py-3 rounded-lg transition-all ${this.tab==='preview'?'bg-[#3b82f6] text-white shadow-sm':'text-slate-500'}\">Factura<\/button>\n <\/div>`;\n\n if(this.tab === 'import') {\n html = tabNav + `\n <div class=\"bg-white p-5 rounded-2xl border border-slate-200 shadow-sm fade-in\">\n <textarea id=\"rawTextInput\" class=\"w-full h-80 p-4 bg-slate-50 rounded-xl border border-slate-200 outline-none text-xs font-mono focus:border-[#3b82f6] mb-4\" placeholder=\"Pega el mensaje de WhatsApp del pedido aqu\u00ed...\"><\/textarea>\n <button type=\"button\" onclick=\"app.processImport()\" class=\"w-full bg-[#3b82f6] text-white p-4 rounded-xl font-black uppercase tracking-widest text-xs shadow-md active:scale-95 transition-transform\">Extraer Datos<\/button>\n <\/div>`;\n }\n else if(this.tab === 'manual') {\n const itemsHtml = this.order.items.map(item => `\n <div class=\"bg-slate-50 p-4 rounded-xl border border-slate-200 relative group\">\n <button type=\"button\" onclick=\"app.order.items = app.order.items.filter(i=>i.id!==${item.id}); app.renderView()\" class=\"absolute top-3 right-3 text-slate-300 hover:text-red-500\"><i data-lucide=\"trash-2\" class=\"w-4 h-4\"><\/i><\/button>\n <div class=\"flex flex-col gap-3 mb-3 pr-8\">\n <input onchange=\"const i = app.order.items.find(x=>x.id===${item.id}); i.name=this.value; app.renderView()\" class=\"w-full bg-white px-3 py-2 border border-slate-200 rounded-lg font-bold text-sm outline-none focus:border-[#3b82f6]\" placeholder=\"Descripci\u00f3n\" value=\"${item.name}\">\n <div class=\"flex gap-4\">\n <label class=\"text-[10px] font-black text-slate-400 uppercase flex items-center gap-2\">Cant: <input type=\"number\" onchange=\"const i = app.order.items.find(x=>x.id===${item.id}); i.qty=parseFloat(this.value)||0; app.renderView()\" class=\"w-16 bg-white px-2 py-1.5 rounded border border-slate-200 outline-none text-[#3b82f6] font-black text-center text-sm\" value=\"${item.qty}\"><\/label>\n <label class=\"text-[10px] font-black text-slate-400 uppercase flex items-center gap-2\">Prec: <input type=\"number\" onchange=\"const i = app.order.items.find(x=>x.id===${item.id}); i.price=parseFloat(this.value)||0; app.renderView()\" class=\"w-24 bg-white px-2 py-1.5 rounded border border-slate-200 outline-none text-slate-700 font-black text-right text-sm\" value=\"${item.price}\"><\/label>\n <\/div>\n <\/div>\n ${item.details.map((det, dIdx) => `\n <div class=\"flex gap-2 items-center mt-2 pl-3 border-l-2 border-[#3b82f6]\">\n <input onchange=\"const i = app.order.items.find(x=>x.id===${item.id}); i.details[${dIdx}]=this.value; app.renderView()\" class=\"w-full text-xs font-mono bg-transparent outline-none text-slate-600 border-b border-slate-200 py-1\" value=\"${det}\">\n <button type=\"button\" onclick=\"const i = app.order.items.find(x=>x.id===${item.id}); i.details.splice(${dIdx},1); app.renderView()\" class=\"text-slate-300 hover:text-red-500\"><i data-lucide=\"x\" class=\"w-3 h-3\"><\/i><\/button>\n <\/div>\n `).join('')}\n <button type=\"button\" onclick=\"const i = app.order.items.find(x=>x.id===${item.id}); i.details.push(''); app.renderView()\" class=\"text-[10px] text-blue-500 mt-3 font-black uppercase tracking-widest\">+ Info Extra<\/button>\n <\/div>`).join('');\n\n html = tabNav + `\n <div class=\"space-y-4 fade-in\">\n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4\">\n <h3 class=\"font-black text-[10px] text-[#3b82f6] uppercase tracking-widest border-b border-slate-100 pb-2\">Informaci\u00f3n de Cobro<\/h3>\n <div class=\"grid grid-cols-2 gap-4\">\n <input onchange=\"app.order.mandante=this.value\" class=\"col-span-2 w-full p-3 bg-slate-50 border border-slate-100 rounded-lg text-sm font-bold outline-none focus:border-[#3b82f6]\" placeholder=\"Cobrar a (Mandante)\" value=\"${this.order.mandante}\">\n <input onchange=\"app.order.receptor=this.value\" class=\"w-full p-3 bg-slate-50 border border-slate-100 rounded-lg text-sm font-bold outline-none focus:border-[#3b82f6]\" placeholder=\"Receptor Cuba\" value=\"${this.order.receptor}\">\n <input onchange=\"app.order.tel=this.value\" class=\"w-full p-3 bg-slate-50 border border-slate-100 rounded-lg text-sm font-bold outline-none focus:border-[#3b82f6]\" placeholder=\"Tel\u00e9fono\" value=\"${this.order.tel}\">\n <input onchange=\"app.order.dir=this.value\" class=\"col-span-2 w-full p-3 bg-slate-50 border border-slate-100 rounded-lg text-sm font-bold outline-none focus:border-[#3b82f6]\" placeholder=\"Direcci\u00f3n de entrega\" value=\"${this.order.dir}\">\n <\/div>\n <\/div>\n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4\">\n <div class=\"flex justify-between items-center border-b border-slate-100 pb-2\">\n <h3 class=\"font-black text-[10px] text-[#3b82f6] uppercase tracking-widest\">Productos<\/h3>\n <button type=\"button\" onclick=\"app.order.items.push({id:Math.random(),name:'',qty:1,price:0,details:[]}); app.renderView()\" class=\"text-[#3b82f6] font-bold text-xs bg-blue-50 px-3 py-1.5 rounded-lg flex items-center gap-1\"><i data-lucide=\"plus\" class=\"w-3 h-3\"><\/i> A\u00f1adir<\/button>\n <\/div>\n <div class=\"space-y-4\">${itemsHtml}<\/div>\n <div class=\"flex justify-between items-center pt-6 border-t border-slate-200 mt-4\">\n <div class=\"flex items-center gap-2 cursor-pointer\" onclick=\"app.order.isManualTotal=!app.order.isManualTotal; app.renderView()\">\n <i data-lucide=\"calculator\" class=\"w-4 h-4 ${this.order.isManualTotal ? 'text-[#3b82f6]' : 'text-slate-400'}\"><\/i>\n <span class=\"text-[10px] font-black text-slate-400 uppercase tracking-widest\">IMPORTE TOTAL<\/span>\n <\/div>\n ${this.order.isManualTotal \n ? `<input type=\"number\" onchange=\"app.order.manualTotal=parseFloat(this.value)||0; app.renderView()\" class=\"text-2xl font-black text-[#3b82f6] border-b-2 border-[#3b82f6] outline-none w-32 text-right bg-transparent\" value=\"${this.order.manualTotal||''}\" placeholder=\"0.00\">`\n : `<span class=\"text-2xl font-black text-[#3b82f6] tracking-tighter\">${this.config.symbol}${this.getCalculatedTotal().toFixed(2)}<\/span>`\n }\n <\/div>\n <\/div>\n <\/div>`;\n }\n else if(this.tab === 'preview') {\n html = tabNav;\n pc.classList.remove('hidden');\n this.updatePreviewVisuals();\n }\n }\n\n c.innerHTML = html;\n lucide.createIcons();\n }\n };\n\n window.onload = () => app.init();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Facturas FM Facturas FM Imprimir Factura Empresa FACTURA COBRAR A — Cliente: Tel\u00e9fono: Entregar en: Zona: N\u00ba DE FACTURA — […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/utiles.fagales360.com\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/utiles.fagales360.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/utiles.fagales360.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/utiles.fagales360.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/utiles.fagales360.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":42,"href":"https:\/\/utiles.fagales360.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":138,"href":"https:\/\/utiles.fagales360.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/138"}],"wp:attachment":[{"href":"https:\/\/utiles.fagales360.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":6,"date":"2025-12-09T18:32:26","date_gmt":"2025-12-09T18:32:26","guid":{"rendered":"https:\/\/utiles.fagales360.com\/?page_id=6"},"modified":"2026-04-18T12:33:53","modified_gmt":"2026-04-18T12:33:53","slug":"contabilidad-fm","status":"publish","type":"page","link":"https:\/\/utiles.fagales360.com\/","title":{"rendered":"Facturas FM"},"content":{"rendered":"\n\n\n\n \n \n Facturas FM<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n <script src=\"https:\/\/unpkg.com\/lucide@latest\"><\/script>\n \n <style>\n @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@400;600;700;900&family=JetBrains+Mono:wght@400;700&display=swap');\n \n \/* Ocultar t\u00edtulos gen\u00e9ricos del Theme de WordPress *\/\n header.entry-header, .entry-title, .page-title, .post-title, .elementor-page-title, .nv-page-title-wrap, h1.has-text-align-center { \n display: none !important; \n }\n\n body { font-family: 'Inter', system-ui, sans-serif; -webkit-tap-highlight-color: transparent; }\n .font-mono { font-family: 'JetBrains Mono', monospace; }\n\n @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }\n .fade-in { animation: fadeIn 0.3s ease-in-out forwards; }\n \n .hide-scroll::-webkit-scrollbar { display: none; }\n .hide-scroll { -ms-overflow-style: none; scrollbar-width: none; }\n .pb-safe { padding-bottom: calc(0.5rem + env(safe-area-inset-bottom)); }\n\n \/* Estilos de Impresi\u00f3n *\/\n @media print {\n @page { size: A4 portrait; margin: 15mm; } \n \n \/* Forzar la impresi\u00f3n de colores de fondo y dise\u00f1o original *\/\n * {\n -webkit-print-color-adjust: exact !important;\n print-color-adjust: exact !important;\n color-adjust: exact !important;\n }\n\n body { background-color: white !important; margin: 0 !important; padding: 0 !important; }\n .no-print { display: none !important; }\n #preview-container { display: block !important; margin: 0 !important; padding: 0 !important; }\n \n .hide-scroll { overflow: visible !important; border: none !important; }\n \n #invoice-print-area {\n box-shadow: none !important; \n border: none !important; \n margin: 0 auto !important;\n padding: 10px !important;\n width: 100% !important; \n max-width: 100% !important; \n min-width: unset !important;\n page-break-inside: avoid;\n }\n \/* Oculta elementos de la UI de WP si interfieren durante la impresi\u00f3n *\/\n #wpadminbar, .site-header, .site-footer, .sidebar, .elementor-location-header, .elementor-location-footer { display: none !important; }\n }\n <\/style>\n<\/head>\n<body class=\"bg-slate-50 text-slate-900 pb-24 print:bg-white print:p-0 print:m-0\">\n\n <input type=\"file\" id=\"importBackupFile\" accept=\".json\" class=\"hidden\" onchange=\"app.handleImport(event)\">\n\n <nav class=\"bg-[#3b82f6] text-white px-4 py-3 sticky top-0 z-50 flex justify-between items-center shadow-md no-print\">\n <div class=\"flex items-center gap-3 cursor-pointer\" onclick=\"app.setView('dashboard')\">\n <img decoding=\"async\" src=\"https:\/\/www.fagalesmarket.com\/wp-content\/uploads\/2025\/07\/ico-fagales-market.avif\" alt=\"Logo\" class=\"w-8 h-8 bg-white rounded-lg p-0.5 object-contain shadow-sm\" \/>\n <span class=\"font-bold tracking-tight text-lg\">Facturas FM<\/span>\n <\/div>\n <div class=\"flex gap-4\">\n <button type=\"button\" onclick=\"app.setView('inventory')\" class=\"hover:text-blue-200\"><i data-lucide=\"package\" class=\"w-5 h-5\"><\/i><\/button>\n <button type=\"button\" onclick=\"app.setView('clients')\" class=\"hover:text-blue-200\"><i data-lucide=\"users\" class=\"w-5 h-5\"><\/i><\/button>\n <button type=\"button\" onclick=\"app.setView('settings')\" class=\"hover:text-blue-200\"><i data-lucide=\"settings\" class=\"w-5 h-5\"><\/i><\/button>\n <\/div>\n <\/nav>\n\n <div class=\"max-w-5xl mx-auto p-3 sm:p-4 space-y-4 no-print\" id=\"main-container\"><\/div>\n\n <div id=\"preview-container\" class=\"hidden max-w-5xl mx-auto p-2 sm:p-4 space-y-6 fade-in\">\n <div class=\"flex gap-2 no-print\">\n <button type=\"button\" onclick=\"app.imprimir()\" class=\"w-full bg-[#3b82f6] text-white py-3.5 rounded-xl font-black text-sm uppercase tracking-widest flex items-center justify-center gap-2 shadow-md hover:bg-blue-700 active:scale-95 transition-transform\">\n <i data-lucide=\"printer\" class=\"w-5 h-5\"><\/i> Imprimir Factura\n <\/button>\n <\/div>\n\n <div class=\"w-full overflow-x-auto bg-white sm:bg-transparent rounded-xl shadow-sm sm:shadow-none sm:border-none hide-scroll\">\n <div id=\"invoice-print-area\" class=\"bg-white min-w-[800px] w-full text-slate-900 font-sans p-8 sm:p-12 relative sm:shadow-xl sm:rounded-xl\">\n <div class=\"flex justify-between items-start mb-8\">\n <div class=\"flex items-center gap-3\">\n <img decoding=\"async\" src=\"https:\/\/www.fagalesmarket.com\/wp-content\/uploads\/2025\/07\/ico-fagales-market.avif\" alt=\"Logo\" class=\"w-[72px] h-[72px] object-contain\" \/>\n <div class=\"text-[11px] leading-snug text-slate-700\">\n <strong class=\"text-sm font-black text-slate-900 block mb-0.5\" id=\"inv-bizName\">Empresa<\/strong>\n <span id=\"inv-phone\"><\/span><br\/>\n <span id=\"inv-email\"><\/span><br\/>\n <span id=\"inv-web\"><\/span>\n <\/div>\n <\/div>\n <div>\n <h1 class=\"text-[42px] font-black text-[#3b82f6] tracking-tighter uppercase leading-none\">FACTURA<\/h1>\n <\/div>\n <\/div>\n\n <div class=\"h-px w-full bg-slate-200 mb-6\"><\/div>\n\n <div class=\"grid grid-cols-2 gap-8 mb-8\">\n <div class=\"text-[11px] text-slate-800 leading-tight\">\n <p class=\"font-black text-[12px] text-slate-900 mb-1.5 uppercase\">COBRAR A<\/p>\n <p id=\"inv-mandante\">—<\/p>\n <p id=\"inv-receptor-wrap\" class=\"hidden\">Cliente: <span id=\"inv-receptor\"><\/span><\/p>\n <p id=\"inv-tel-wrap\" class=\"hidden\">Tel\u00e9fono: <span id=\"inv-tel\"><\/span><\/p>\n <p id=\"inv-dir-wrap\" class=\"hidden\">Entregar en: <span id=\"inv-dir\"><\/span><\/p>\n <p id=\"inv-prov-wrap\" class=\"hidden\">Zona: <span id=\"inv-prov\"><\/span><\/p>\n <\/div>\n <div class=\"flex justify-end text-[11px]\">\n <table class=\"text-right border-separate\" style=\"border-spacing: 16px 4px;\">\n <tbody>\n <tr><td class=\"font-black text-slate-900 uppercase\">N\u00ba DE FACTURA<\/td><td class=\"text-slate-600 font-mono\" id=\"inv-id\">—<\/td><\/tr>\n <tr><td class=\"font-black text-slate-900 uppercase\">FECHA<\/td><td class=\"text-slate-600 font-mono\" id=\"inv-date\">—<\/td><\/tr>\n <\/tbody>\n <\/table>\n <\/div>\n <\/div>\n\n <table class=\"w-full text-[11px] mb-8 border-collapse\">\n <thead>\n <tr class=\"bg-[#3b82f6] text-white\">\n <th class=\"py-2.5 px-3 text-left font-bold uppercase tracking-wider rounded-tl-lg\">DESCRIPCI\u00d3N<\/th>\n <th class=\"py-2.5 px-3 text-center font-bold uppercase tracking-wider w-16\">CANT.<\/th>\n <th class=\"py-2.5 px-3 text-right font-bold uppercase tracking-wider w-24\">PRECIO<\/th>\n <th class=\"py-2.5 px-3 text-right font-bold uppercase tracking-wider w-28 rounded-tr-lg\">IMPORTE<\/th>\n <\/tr>\n <\/thead>\n <tbody id=\"inv-items\"><\/tbody>\n <\/table>\n\n <div class=\"flex justify-between items-end mt-4\">\n <div class=\"text-[11px]\">\n <p class=\"font-black text-slate-900 mb-0.5 uppercase\">M\u00c9TODO DE PAGO<\/p>\n <p class=\"text-slate-600\" id=\"inv-method\">Pagos v\u00eda ZELLE<\/p>\n <\/div>\n <div class=\"w-[220px]\">\n <div class=\"bg-[#3b82f6] text-white flex justify-between px-4 py-3 font-bold text-[13px] rounded-b-lg\">\n <span class=\"uppercase tracking-widest\">TOTAL<\/span>\n <span id=\"inv-total\">$0.00<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"bg-white p-5 rounded-2xl shadow-sm border border-slate-200 no-print mt-6\">\n <div class=\"flex justify-between items-center mb-3\">\n <h3 class=\"font-black text-[10px] uppercase tracking-widest text-[#3b82f6] flex items-center gap-2\"><i data-lucide=\"printer\" class=\"w-4 h-4\"><\/i> Ticket Cuba (T\u00e9rmica)<\/h3>\n <button type=\"button\" onclick=\"app.copyThermal()\" class=\"text-[10px] font-black uppercase bg-slate-100 text-slate-600 px-3 py-1.5 rounded-lg hover:bg-slate-200 active:scale-95 transition-all\">COPIAR TEXTO<\/button>\n <\/div>\n <textarea id=\"thermal-output\" class=\"w-full h-48 bg-slate-50 p-4 rounded-xl font-mono text-[11px] leading-tight text-slate-700 border border-slate-200 outline-none focus:border-[#3b82f6] resize-none\" oninput=\"app.updateThermalText(this.value)\"><\/textarea>\n <\/div>\n <\/div>\n\n <div class=\"fixed bottom-0 w-full bg-white border-t border-slate-200 p-2 flex justify-around items-center z-[60] no-print sm:hidden pb-safe\" id=\"bottom-nav\"><\/div>\n\n <div id=\"toast\" class=\"fixed bottom-24 left-1\/2 -translate-x-1\/2 bg-slate-900 text-white px-6 py-3 rounded-xl text-[10px] font-black uppercase tracking-widest shadow-2xl z-[100] whitespace-nowrap border border-white\/10 transition-all duration-300 opacity-0 pointer-events-none transform translate-y-4\"><\/div>\n\n <script>\n const app = {\n view: 'dashboard',\n tab: 'import',\n config: {},\n library: { products: [], clients: [] },\n history: [],\n order: {},\n editableThermal: '',\n\n init() {\n this.config = JSON.parse(localStorage.getItem('facturas_fm_config')) || {\n bizName: 'Fagales Market', phone: '593959685460', email: 'contacto@fagalesmarket.com',\n web: 'www.fagalesmarket.com', prov: 'Holgu\u00edn', currency: 'USD', symbol: '$'\n };\n this.library = JSON.parse(localStorage.getItem('facturas_fm_library')) || { products: [], clients: [] };\n this.history = JSON.parse(localStorage.getItem('facturas_fm_history')) || [];\n \n this.resetOrder();\n this.renderView();\n },\n\n saveAll() {\n localStorage.setItem('facturas_fm_config', JSON.stringify(this.config));\n localStorage.setItem('facturas_fm_library', JSON.stringify(this.library));\n localStorage.setItem('facturas_fm_history', JSON.stringify(this.history));\n },\n\n resetOrder() {\n this.order = {\n id: `FMINV-${Date.now().toString().slice(-6)}`,\n date: new Date().toLocaleDateString('es-ES', { day: '2-digit', month: '2-digit', year: 'numeric' }),\n mandante: '', receptor: '', tel: '', dir: '', prov: this.config.prov,\n items: [], method: 'Pagos v\u00eda ZELLE', manualTotal: null, isManualTotal: false\n };\n },\n\n showToast(msg) {\n const toast = document.getElementById('toast');\n toast.innerText = msg;\n toast.classList.remove('opacity-0', 'translate-y-4');\n setTimeout(() => toast.classList.add('opacity-0', 'translate-y-4'), 2500);\n },\n\n setView(view) {\n this.view = view;\n this.renderView();\n },\n\n setTab(tab) {\n this.tab = tab;\n if(tab === 'preview') this.finalizeOrder();\n this.renderView();\n },\n\n getCalculatedTotal() {\n return this.order.items.reduce((acc, item) => acc + (item.qty * item.price), 0);\n },\n\n getFinalTotal() {\n return this.order.isManualTotal ? (this.order.manualTotal || 0) : this.getCalculatedTotal();\n },\n\n updateCurrency(val) {\n this.config.currency = val;\n const symbols = { 'USD': '$', 'EUR': '\u20ac', 'MXN': '$', 'BRL': 'R$', 'CUP': '$' };\n if (val !== 'CUSTOM') {\n this.config.symbol = symbols[val];\n } else {\n this.config.symbol = '';\n }\n this.saveAll();\n this.renderView();\n },\n\n updateCustomSymbol(val) {\n this.config.symbol = val;\n this.saveAll();\n },\n\n processImport() {\n const text = document.getElementById('rawTextInput').value;\n if(!text.trim()) return this.showToast('Texto vac\u00edo');\n\n try {\n this.order.items = [];\n const lines = text.split('\\n');\n const orderMatch = text.match(\/Pedido:\\*?\\s*([^\\n\\r]*)\/i);\n if (orderMatch) this.order.id = orderMatch[1].trim();\n\n const productRegex = \/\\*?(\\d+(?:\\.\\d+)?)\\*?\\s*-\\s*([^*:]+)(?::\\s*\\*?\\$?([\\d.,]+))?\/i;\n let currentItem = null;\n\n lines.forEach(line => {\n const pMatch = line.match(productRegex);\n if (pMatch && !line.toLowerCase().includes('total en')) {\n if (currentItem) this.order.items.push(currentItem);\n currentItem = {\n id: Math.random(),\n name: pMatch[2].replace(\/\\s*\u2013\\s*Env\u00edo seguro.*$\/i, '').trim(),\n qty: parseFloat(pMatch[1]),\n price: parseFloat(pMatch[3]?.replace(',', '')) || 0,\n details: []\n };\n } else if (line.trim().startsWith('\u21b3') && currentItem) {\n currentItem.details.push(line.trim().replace('\u21b3', '').trim());\n }\n });\n if (currentItem) this.order.items.push(currentItem);\n\n const findVal = (regex) => text.match(regex)?.[1]?.trim() || '';\n this.order.mandante = findVal(\/Cliente que env\u00eda:[\\s\\S]*?Nombre:\\*?\\s*([^\\n\\r]*)\/i);\n this.order.receptor = findVal(\/Datos de entrega en Cuba:[\\s\\S]*?Nombre:\\*?\\s*([^\\n\\r]*)\/i);\n this.order.tel = findVal(\/Datos de entrega en Cuba:[\\s\\S]*?Tel\u00e9fono:\\*?\\s*([^\\n\\r]*)\/i) || findVal(\/Tel\u00e9fono:\\*?\\s*([^\\n\\r]*)\/i);\n this.order.dir = findVal(\/Direcci\u00f3n:\\*?\\s*([^\\n\\r]*)\/i);\n this.order.prov = findVal(\/Provincia:\\*?\\s*([^\\n\\r]*)\/i) || this.config.prov;\n this.order.method = findVal(\/M\u00e9todo de pago:\\*?\\s*([^\\n\\r]*)\/i) || 'Pagos v\u00eda ZELLE';\n\n const totalMatch = text.match(\/TOTAL en [^:]+:\\*?\\s*\\$?([\\d.,]+)\/i);\n if (totalMatch) {\n this.order.manualTotal = parseFloat(totalMatch[1].replace(',', ''));\n this.order.isManualTotal = true;\n }\n\n this.setTab('manual');\n this.showToast('Datos extra\u00eddos');\n } catch (e) {\n this.showToast('Error de formato');\n }\n },\n\n finalizeOrder() {\n if (!this.order.mandante && this.order.items.length === 0) return;\n \n this.history = [this.order, ...this.history.filter(h => h.id !== this.order.id)].slice(0, 100);\n\n this.order.items.forEach(item => {\n const idx = this.library.products.findIndex(p => p.name.toLowerCase() === item.name.toLowerCase());\n if (idx > -1) this.library.products[idx].price = item.price;\n else if(item.name) this.library.products.push({ name: item.name, price: item.price });\n });\n\n if (this.order.mandante) {\n const cIdx = this.library.clients.findIndex(c => c.name.toLowerCase() === this.order.mandante.toLowerCase());\n if (cIdx === -1) this.library.clients.push({ name: this.order.mandante, tel: this.order.tel, dir: this.order.dir, receptor: this.order.receptor });\n }\n\n this.saveAll();\n this.updatePreviewVisuals();\n },\n\n updatePreviewVisuals() {\n document.getElementById('inv-bizName').innerText = this.config.bizName;\n document.getElementById('inv-phone').innerText = this.config.phone;\n document.getElementById('inv-email').innerText = this.config.email;\n document.getElementById('inv-web').innerText = this.config.web;\n \n document.getElementById('inv-id').innerText = this.order.id || '---';\n document.getElementById('inv-date').innerText = this.order.date;\n document.getElementById('inv-mandante').innerText = this.order.mandante || '---';\n \n const toggleField = (id, val) => {\n document.getElementById(`inv-${id}-wrap`).style.display = val ? 'block' : 'none';\n if(val) document.getElementById(`inv-${id}`).innerText = val;\n };\n toggleField('receptor', this.order.receptor);\n toggleField('tel', this.order.tel);\n toggleField('dir', this.order.dir);\n toggleField('prov', this.order.prov);\n\n document.getElementById('inv-method').innerText = this.order.method || 'Pagos v\u00eda ZELLE';\n document.getElementById('inv-total').innerText = `${this.config.symbol}${this.getFinalTotal().toFixed(2)}`;\n\n const tbody = document.getElementById('inv-items');\n tbody.innerHTML = this.order.items.map(item => `\n <tr class=\"bg-white align-top\">\n <td class=\"py-3 px-3\">\n <p class=\"font-bold text-slate-900 text-[12px]\">${item.name}<\/p>\n ${item.details.map(d => `\n <div class=\"text-[10px] text-slate-500 mt-1 flex items-start gap-1\">\n <span class=\"opacity-50\">\u21b3<\/span> <span>${d}<\/span>\n <\/div>\n `).join('')}\n <\/td>\n <td class=\"py-3 px-3 text-center font-bold text-slate-600\">${item.qty}<\/td>\n <td class=\"py-3 px-3 text-right text-slate-600\">${this.config.symbol}${parseFloat(item.price).toFixed(2)}<\/td>\n <td class=\"py-3 px-3 text-right font-black text-slate-900\">${this.config.symbol}${(item.qty * item.price).toFixed(2)}<\/td>\n <\/tr>\n `).join('');\n\n const thermal = `============================\n${this.config.bizName.toUpperCase()}\n============================\nID: ${this.order.id || 'S\/N'} | ${this.order.date}\nPROV: ${(this.order.prov || '').toUpperCase()}\n----------------------------\nMANDANTE: ${this.order.mandante || '---'}\nRECEPTOR: ${this.order.receptor || '---'}\nTELF: ${this.order.tel || '---'}\nDIR: ${this.order.dir || '---'}\n----------------------------\nENCARGO LOG\u00cdSTICO:\n${this.order.items.map(i => `- ${i.qty} ${i.name}${i.details.length > 0 ? '\\n ' + i.details.join('\\n ') : ''}`).join('\\n')}\n----------------------------\nMANDATO LOG\u00cdSTICO: El receptor\nconfirma ejecuci\u00f3n del encargo.\n\nFIRMA: _____________________`;\n this.editableThermal = thermal;\n document.getElementById('thermal-output').value = thermal;\n },\n\n updateThermalText(val) { this.editableThermal = val; },\n \n copyThermal() {\n const el = document.createElement('textarea'); el.value = this.editableThermal; \n document.body.appendChild(el); el.select(); document.execCommand('copy'); \n document.body.removeChild(el); this.showToast(\"Texto copiado\");\n },\n\n imprimir() {\n setTimeout(() => {\n window.print();\n }, 200);\n },\n\n downloadBackup() {\n const data = { config: this.config, library: this.library, history: this.history };\n const blob = new Blob([JSON.stringify(data)], { type: \"application\/json\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement('a');\n a.href = url;\n a.download = `backup_facturas_fm_${Date.now()}.json`;\n document.body.appendChild(a);\n a.click();\n document.body.removeChild(a);\n URL.revokeObjectURL(url);\n this.showToast(\"Backup Descargado\");\n },\n\n triggerImport() {\n document.getElementById('importBackupFile').click();\n },\n\n handleImport(event) {\n const file = event.target.files[0];\n if (!file) return;\n \n const reader = new FileReader();\n reader.onload = (e) => {\n try {\n const data = JSON.parse(e.target.result);\n if(data.config) this.config = data.config;\n if(data.library) this.library = data.library;\n if(data.history) this.history = data.history;\n this.saveAll();\n this.renderView();\n this.showToast(\"Backup Restaurado\");\n } catch(err) {\n this.showToast(\"Error en formato JSON\");\n }\n };\n reader.readAsText(file);\n event.target.value = ''; \n },\n\n renderView() {\n const c = document.getElementById('main-container');\n const pc = document.getElementById('preview-container');\n const nav = document.getElementById('bottom-nav');\n pc.classList.add('hidden');\n \n nav.innerHTML = `\n <button type=\"button\" onclick=\"app.setView('dashboard')\" class=\"p-2 flex flex-col items-center gap-1 ${this.view==='dashboard'?'text-[#3b82f6]':'text-slate-400'}\"><i data-lucide=\"layout-dashboard\" class=\"w-5 h-5\"><\/i><span class=\"text-[9px] font-black uppercase\">Inicio<\/span><\/button>\n <button type=\"button\" onclick=\"app.resetOrder(); app.setView('editor'); app.setTab('import');\" class=\"bg-[#3b82f6] text-white p-3 rounded-[1.2rem] shadow-xl shadow-blue-200 -mt-6 border-4 border-white\"><i data-lucide=\"plus\" class=\"w-6 h-6\"><\/i><\/button>\n <button type=\"button\" onclick=\"app.setView('history')\" class=\"p-2 flex flex-col items-center gap-1 ${this.view==='history'?'text-[#3b82f6]':'text-slate-400'}\"><i data-lucide=\"history\" class=\"w-5 h-5\"><\/i><span class=\"text-[9px] font-black uppercase\">Log<\/span><\/button>\n `;\n\n let html = '';\n\n if(this.view === 'dashboard') {\n html = `\n <div class=\"space-y-4 fade-in\">\n <div class=\"bg-white p-6 rounded-2xl shadow-sm flex justify-between items-center border border-slate-200\">\n <div><h1 class=\"text-xl font-bold text-slate-800\">Panel Principal<\/h1><p class=\"text-xs font-bold text-slate-400 mt-1 uppercase tracking-widest\">${this.history.length} Facturas<\/p><\/div>\n <button type=\"button\" onclick=\"app.resetOrder(); app.setView('editor'); app.setTab('import');\" class=\"bg-[#3b82f6] text-white px-5 py-3 rounded-xl font-bold flex items-center gap-2 hover:bg-blue-700 shadow-md\"><i data-lucide=\"plus\" class=\"w-5 h-5\"><\/i> Nueva<\/button>\n <\/div>\n <div class=\"bg-white rounded-2xl border border-slate-200 overflow-hidden shadow-sm\">\n <div class=\"p-4 bg-slate-50 border-b font-black text-xs uppercase tracking-widest text-slate-500 flex justify-between items-center\">\n <span>\u00daltimas Facturas<\/span><button type=\"button\" onclick=\"app.setView('history')\" class=\"text-[#3b82f6]\">Ver todas<\/button>\n <\/div>\n <div class=\"divide-y divide-slate-100\">\n ${this.history.slice(0,8).map(h => `\n <div onclick=\"app.order = ${JSON.stringify(h).replace(\/\"\/g, '"')}; app.setView('editor'); app.setTab('preview');\" class=\"p-4 flex justify-between items-center cursor-pointer hover:bg-blue-50 transition-colors\">\n <div><p class=\"font-bold text-sm text-slate-800\">${h.mandante || 'Sin Nombre'}<\/p><p class=\"text-[10px] text-slate-400 font-mono mt-0.5\">${h.id} \u2022 ${h.date}<\/p><\/div>\n <div class=\"flex items-center gap-3\"><p class=\"font-black text-[#3b82f6]\">${this.config.symbol}${h.items.reduce((a,b)=>a+(b.qty*b.price),0).toFixed(2)}<\/p><i data-lucide=\"chevron-right\" class=\"w-4 h-4 text-slate-300\"><\/i><\/div>\n <\/div>\n `).join('')}\n ${this.history.length === 0 ? '<div class=\"p-8 text-center text-slate-400 text-sm italic\">No hay facturas registradas.<\/div>' : ''}\n <\/div>\n <\/div>\n <\/div>`;\n }\n else if(this.view === 'history' || this.view === 'inventory' || this.view === 'clients') {\n const titles = { history: 'Historial de \u00d3rdenes', inventory: 'Base de Productos', clients: 'Directorio de Clientes' };\n let listHtml = '';\n \n if(this.view === 'history') {\n listHtml = this.history.map(h => `\n <div class=\"p-4 flex justify-between items-center hover:bg-slate-50 transition-colors\">\n <div><p class=\"font-bold text-sm text-slate-800\">${h.mandante}<\/p><p class=\"text-[10px] font-mono text-slate-400\">${h.id} \u2022 ${h.date}<\/p><\/div>\n <button type=\"button\" onclick=\"app.order = ${JSON.stringify(h).replace(\/\"\/g, '"')}; app.setView('editor'); app.setTab('preview');\" class=\"text-[#3b82f6] font-bold text-[10px] uppercase tracking-widest bg-blue-50 px-3 py-2 rounded-lg\">ABRIR<\/button>\n <\/div>\n `).join('');\n if(!listHtml) listHtml = '<div class=\"p-10 text-center text-slate-400 text-sm italic\">No hay datos registrados.<\/div>';\n }\n else if(this.view === 'inventory') {\n listHtml = this.library.products.map((p, idx) => `\n <div class=\"p-4 flex justify-between items-center hover:bg-slate-50 transition-colors group\">\n <p class=\"font-bold text-sm text-slate-800\">${p.name} <span class=\"text-slate-400 text-[10px] font-bold block mt-0.5\">\u00daltimo Precio: ${this.config.symbol}${p.price}<\/span><\/p>\n <button type=\"button\" onclick=\"app.library.products.splice(${idx},1); app.saveAll(); app.renderView(); app.showToast('Eliminado');\" class=\"text-slate-300 hover:text-red-500\"><i data-lucide=\"trash-2\" class=\"w-4 h-4\"><\/i><\/button>\n <\/div>\n `).join('');\n if(!listHtml) listHtml = '<div class=\"p-10 text-center text-slate-400 text-sm italic\">Inventario vac\u00edo.<\/div>';\n }\n else if(this.view === 'clients') {\n listHtml = this.library.clients.map((c, idx) => `\n <div class=\"p-4 flex justify-between items-center hover:bg-slate-50 transition-colors group\">\n <div><p class=\"font-bold text-sm text-slate-800\">${c.name}<\/p><p class=\"text-[10px] text-slate-500 font-bold mt-0.5\">Receptor: ${c.receptor}<\/p><\/div>\n <button type=\"button\" onclick=\"app.library.clients.splice(${idx},1); app.saveAll(); app.renderView(); app.showToast('Eliminado');\" class=\"text-slate-300 hover:text-red-500\"><i data-lucide=\"trash-2\" class=\"w-4 h-4\"><\/i><\/button>\n <\/div>\n `).join('');\n if(!listHtml) listHtml = '<div class=\"p-10 text-center text-slate-400 text-sm italic\">Directorio vac\u00edo.<\/div>';\n }\n\n html = `\n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 overflow-hidden divide-y divide-slate-100 fade-in\">\n <div class=\"p-5 border-b border-slate-200 flex items-center gap-3 bg-slate-50\">\n <button type=\"button\" onclick=\"app.setView('dashboard')\" class=\"p-1 hover:bg-slate-200 rounded-md\"><i data-lucide=\"arrow-left\" class=\"w-5 h-5\"><\/i><\/button>\n <h2 class=\"font-black text-sm uppercase tracking-widest text-slate-700\">${titles[this.view]}<\/h2>\n <\/div>\n ${listHtml}\n <\/div>`;\n }\n else if(this.view === 'settings') {\n html = `\n <div class=\"bg-white rounded-2xl shadow-sm border border-slate-200 p-6 space-y-6 fade-in\">\n <div class=\"flex items-center gap-3 mb-4 border-b pb-4\">\n <button type=\"button\" onclick=\"app.setView('dashboard')\" class=\"p-1 hover:bg-slate-100 rounded-md\"><i data-lucide=\"arrow-left\" class=\"w-5 h-5\"><\/i><\/button>\n <h2 class=\"font-black text-sm uppercase tracking-widest text-slate-700\">Configuraci\u00f3n<\/h2>\n <\/div>\n <div class=\"space-y-4\">\n <div><label class=\"text-[10px] font-black uppercase text-slate-400\">Nombre Empresa<\/label><input onchange=\"app.config.bizName=this.value; app.saveAll()\" class=\"w-full p-3 bg-slate-50 rounded-xl border border-slate-200 outline-none mt-1 text-sm font-bold\" value=\"${this.config.bizName}\" \/><\/div>\n <div class=\"grid grid-cols-2 gap-4\">\n <div><label class=\"text-[10px] font-black uppercase text-slate-400\">Tel\u00e9fono<\/label><input onchange=\"app.config.phone=this.value; app.saveAll()\" class=\"w-full p-3 bg-slate-50 rounded-xl border border-slate-200 outline-none mt-1 text-sm font-bold\" value=\"${this.config.phone}\" \/><\/div>\n <div><label class=\"text-[10px] font-black uppercase text-slate-400\">Email<\/label><input onchange=\"app.config.email=this.value; app.saveAll()\" class=\"w-full p-3 bg-slate-50 rounded-xl border border-slate-200 outline-none mt-1 text-sm font-bold\" value=\"${this.config.email}\" \/><\/div>\n <\/div>\n <div><label class=\"text-[10px] font-black uppercase text-slate-400\">Sitio Web<\/label><input onchange=\"app.config.web=this.value; app.saveAll()\" class=\"w-full p-3 bg-slate-50 rounded-xl border border-slate-200 outline-none mt-1 text-sm font-bold\" value=\"${this.config.web}\" \/><\/div>\n <div class=\"grid grid-cols-2 gap-4 pt-4 border-t border-slate-100\">\n <div>\n <label class=\"text-[10px] font-black uppercase text-slate-400\">Moneda Base<\/label>\n <select onchange=\"app.updateCurrency(this.value)\" class=\"w-full p-3 bg-slate-50 rounded-xl border border-slate-200 outline-none mt-1 text-sm font-bold\">\n <option value=\"USD\" ${this.config.currency==='USD'?'selected':''}>USD ($)<\/option>\n <option value=\"EUR\" ${this.config.currency==='EUR'?'selected':''}>EUR (\u20ac)<\/option>\n <option value=\"MXN\" ${this.config.currency==='MXN'?'selected':''}>MXN ($)<\/option>\n <option value=\"BRL\" ${this.config.currency==='BRL'?'selected':''}>BRL (R$)<\/option>\n <option value=\"CUP\" ${this.config.currency==='CUP'?'selected':''}>CUP ($)<\/option>\n <option value=\"CUSTOM\" ${this.config.currency==='CUSTOM'?'selected':''}>Personalizada<\/option>\n <\/select>\n <div class=\"${this.config.currency === 'CUSTOM' ? '' : 'hidden'} mt-2\">\n <input type=\"text\" placeholder=\"S\u00edmbolo (ej. \u00a3)\" class=\"w-full p-3 bg-slate-50 rounded-xl border border-slate-200 outline-none text-sm font-bold\" value=\"${this.config.symbol}\" onchange=\"app.updateCustomSymbol(this.value)\">\n <\/div>\n <\/div>\n <div><label class=\"text-[10px] font-black uppercase text-slate-400\">Provincia Default<\/label><input onchange=\"app.config.prov=this.value; app.saveAll()\" class=\"w-full p-3 bg-slate-50 rounded-xl border border-slate-200 outline-none mt-1 text-sm font-bold\" value=\"${this.config.prov}\" \/><\/div>\n <\/div>\n <\/div>\n <div class=\"pt-6 border-t border-slate-100 flex gap-2\">\n <button type=\"button\" onclick=\"app.downloadBackup()\" class=\"bg-slate-900 text-white px-5 py-3 rounded-xl text-[10px] font-black tracking-widest uppercase flex items-center justify-center gap-2 w-full active:scale-95 transition-transform\"><i data-lucide=\"upload-cloud\" class=\"w-4 h-4\"><\/i> Exportar<\/button>\n <button type=\"button\" onclick=\"app.triggerImport()\" class=\"bg-[#3b82f6] text-white px-5 py-3 rounded-xl text-[10px] font-black tracking-widest uppercase flex items-center justify-center gap-2 w-full active:scale-95 transition-transform\"><i data-lucide=\"download-cloud\" class=\"w-4 h-4\"><\/i> Importar<\/button>\n <\/div>\n <\/div>`;\n }\n else if(this.view === 'editor') {\n let tabNav = `\n <div class=\"flex bg-slate-200 p-1.5 rounded-xl mb-4 text-[10px] font-black uppercase tracking-widest\">\n <button type=\"button\" onclick=\"app.setTab('import')\" class=\"flex-1 py-3 rounded-lg transition-all ${this.tab==='import'?'bg-white text-[#3b82f6] shadow-sm':'text-slate-500'}\">Importar<\/button>\n <button type=\"button\" onclick=\"app.setTab('manual')\" class=\"flex-1 py-3 rounded-lg transition-all ${this.tab==='manual'?'bg-white text-[#3b82f6] shadow-sm':'text-slate-500'}\">Editar<\/button>\n <button type=\"button\" onclick=\"app.setTab('preview')\" class=\"flex-1 py-3 rounded-lg transition-all ${this.tab==='preview'?'bg-[#3b82f6] text-white shadow-sm':'text-slate-500'}\">Factura<\/button>\n <\/div>`;\n\n if(this.tab === 'import') {\n html = tabNav + `\n <div class=\"bg-white p-5 rounded-2xl border border-slate-200 shadow-sm fade-in\">\n <textarea id=\"rawTextInput\" class=\"w-full h-80 p-4 bg-slate-50 rounded-xl border border-slate-200 outline-none text-xs font-mono focus:border-[#3b82f6] mb-4\" placeholder=\"Pega el mensaje de WhatsApp del pedido aqu\u00ed...\"><\/textarea>\n <button type=\"button\" onclick=\"app.processImport()\" class=\"w-full bg-[#3b82f6] text-white p-4 rounded-xl font-black uppercase tracking-widest text-xs shadow-md active:scale-95 transition-transform\">Extraer Datos<\/button>\n <\/div>`;\n }\n else if(this.tab === 'manual') {\n const itemsHtml = this.order.items.map(item => `\n <div class=\"bg-slate-50 p-4 rounded-xl border border-slate-200 relative group\">\n <button type=\"button\" onclick=\"app.order.items = app.order.items.filter(i=>i.id!==${item.id}); app.renderView()\" class=\"absolute top-3 right-3 text-slate-300 hover:text-red-500\"><i data-lucide=\"trash-2\" class=\"w-4 h-4\"><\/i><\/button>\n <div class=\"flex flex-col gap-3 mb-3 pr-8\">\n <input onchange=\"const i = app.order.items.find(x=>x.id===${item.id}); i.name=this.value; app.renderView()\" class=\"w-full bg-white px-3 py-2 border border-slate-200 rounded-lg font-bold text-sm outline-none focus:border-[#3b82f6]\" placeholder=\"Descripci\u00f3n\" value=\"${item.name}\">\n <div class=\"flex gap-4\">\n <label class=\"text-[10px] font-black text-slate-400 uppercase flex items-center gap-2\">Cant: <input type=\"number\" onchange=\"const i = app.order.items.find(x=>x.id===${item.id}); i.qty=parseFloat(this.value)||0; app.renderView()\" class=\"w-16 bg-white px-2 py-1.5 rounded border border-slate-200 outline-none text-[#3b82f6] font-black text-center text-sm\" value=\"${item.qty}\"><\/label>\n <label class=\"text-[10px] font-black text-slate-400 uppercase flex items-center gap-2\">Prec: <input type=\"number\" onchange=\"const i = app.order.items.find(x=>x.id===${item.id}); i.price=parseFloat(this.value)||0; app.renderView()\" class=\"w-24 bg-white px-2 py-1.5 rounded border border-slate-200 outline-none text-slate-700 font-black text-right text-sm\" value=\"${item.price}\"><\/label>\n <\/div>\n <\/div>\n ${item.details.map((det, dIdx) => `\n <div class=\"flex gap-2 items-center mt-2 pl-3 border-l-2 border-[#3b82f6]\">\n <input onchange=\"const i = app.order.items.find(x=>x.id===${item.id}); i.details[${dIdx}]=this.value; app.renderView()\" class=\"w-full text-xs font-mono bg-transparent outline-none text-slate-600 border-b border-slate-200 py-1\" value=\"${det}\">\n <button type=\"button\" onclick=\"const i = app.order.items.find(x=>x.id===${item.id}); i.details.splice(${dIdx},1); app.renderView()\" class=\"text-slate-300 hover:text-red-500\"><i data-lucide=\"x\" class=\"w-3 h-3\"><\/i><\/button>\n <\/div>\n `).join('')}\n <button type=\"button\" onclick=\"const i = app.order.items.find(x=>x.id===${item.id}); i.details.push(''); app.renderView()\" class=\"text-[10px] text-blue-500 mt-3 font-black uppercase tracking-widest\">+ Info Extra<\/button>\n <\/div>`).join('');\n\n html = tabNav + `\n <div class=\"space-y-4 fade-in\">\n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4\">\n <h3 class=\"font-black text-[10px] text-[#3b82f6] uppercase tracking-widest border-b border-slate-100 pb-2\">Informaci\u00f3n de Cobro<\/h3>\n <div class=\"grid grid-cols-2 gap-4\">\n <input onchange=\"app.order.mandante=this.value\" class=\"col-span-2 w-full p-3 bg-slate-50 border border-slate-100 rounded-lg text-sm font-bold outline-none focus:border-[#3b82f6]\" placeholder=\"Cobrar a (Mandante)\" value=\"${this.order.mandante}\">\n <input onchange=\"app.order.receptor=this.value\" class=\"w-full p-3 bg-slate-50 border border-slate-100 rounded-lg text-sm font-bold outline-none focus:border-[#3b82f6]\" placeholder=\"Receptor Cuba\" value=\"${this.order.receptor}\">\n <input onchange=\"app.order.tel=this.value\" class=\"w-full p-3 bg-slate-50 border border-slate-100 rounded-lg text-sm font-bold outline-none focus:border-[#3b82f6]\" placeholder=\"Tel\u00e9fono\" value=\"${this.order.tel}\">\n <input onchange=\"app.order.dir=this.value\" class=\"col-span-2 w-full p-3 bg-slate-50 border border-slate-100 rounded-lg text-sm font-bold outline-none focus:border-[#3b82f6]\" placeholder=\"Direcci\u00f3n de entrega\" value=\"${this.order.dir}\">\n <\/div>\n <\/div>\n <div class=\"bg-white p-6 rounded-2xl border border-slate-200 shadow-sm space-y-4\">\n <div class=\"flex justify-between items-center border-b border-slate-100 pb-2\">\n <h3 class=\"font-black text-[10px] text-[#3b82f6] uppercase tracking-widest\">Productos<\/h3>\n <button type=\"button\" onclick=\"app.order.items.push({id:Math.random(),name:'',qty:1,price:0,details:[]}); app.renderView()\" class=\"text-[#3b82f6] font-bold text-xs bg-blue-50 px-3 py-1.5 rounded-lg flex items-center gap-1\"><i data-lucide=\"plus\" class=\"w-3 h-3\"><\/i> A\u00f1adir<\/button>\n <\/div>\n <div class=\"space-y-4\">${itemsHtml}<\/div>\n <div class=\"flex justify-between items-center pt-6 border-t border-slate-200 mt-4\">\n <div class=\"flex items-center gap-2 cursor-pointer\" onclick=\"app.order.isManualTotal=!app.order.isManualTotal; app.renderView()\">\n <i data-lucide=\"calculator\" class=\"w-4 h-4 ${this.order.isManualTotal ? 'text-[#3b82f6]' : 'text-slate-400'}\"><\/i>\n <span class=\"text-[10px] font-black text-slate-400 uppercase tracking-widest\">IMPORTE TOTAL<\/span>\n <\/div>\n ${this.order.isManualTotal \n ? `<input type=\"number\" onchange=\"app.order.manualTotal=parseFloat(this.value)||0; app.renderView()\" class=\"text-2xl font-black text-[#3b82f6] border-b-2 border-[#3b82f6] outline-none w-32 text-right bg-transparent\" value=\"${this.order.manualTotal||''}\" placeholder=\"0.00\">`\n : `<span class=\"text-2xl font-black text-[#3b82f6] tracking-tighter\">${this.config.symbol}${this.getCalculatedTotal().toFixed(2)}<\/span>`\n }\n <\/div>\n <\/div>\n <\/div>`;\n }\n else if(this.tab === 'preview') {\n html = tabNav;\n pc.classList.remove('hidden');\n this.updatePreviewVisuals();\n }\n }\n\n c.innerHTML = html;\n lucide.createIcons();\n }\n };\n\n window.onload = () => app.init();\n <\/script>\n<\/body>\n<\/html>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Facturas FM Facturas FM Imprimir Factura Empresa FACTURA COBRAR A — Cliente: Tel\u00e9fono: Entregar en: Zona: N\u00ba DE FACTURA — […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/utiles.fagales360.com\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/utiles.fagales360.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/utiles.fagales360.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/utiles.fagales360.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/utiles.fagales360.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":42,"href":"https:\/\/utiles.fagales360.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"predecessor-version":[{"id":138,"href":"https:\/\/utiles.fagales360.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions\/138"}],"wp:attachment":[{"href":"https:\/\/utiles.fagales360.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}