From 0112b7dca4a8a96a85eb9b89e1095a98555863ea Mon Sep 17 00:00:00 2001
From: consultoria-as <ialcarazsalazar@consultoria-as.com>
Date: Wed, 1 Apr 2026 07:31:18 +0000
Subject: [PATCH] =?UTF-8?q?feat(pos):=20integrate=20design=20system=20into?=
 =?UTF-8?q?=20POS=20=E2=80=94=20payment=20modal,=20F-keys,=20ticket,=20mar?=
 =?UTF-8?q?gins?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 pos/static/js/pos.js   |  416 ++++---
 pos/templates/pos.html | 2474 ++++++++++++++++------------------------
 2 files changed, 1238 insertions(+), 1652 deletions(-)

diff --git a/pos/static/js/pos.js b/pos/static/js/pos.js
index 7cc742b..d37956d 100644
--- a/pos/static/js/pos.js
+++ b/pos/static/js/pos.js
@@ -22,6 +22,7 @@ const POS = (() => {
     let canViewCost = false;
     let employeeMaxDiscount = 100;
     let lastSaleId = null;
+    let lastSaleData = null;
     let searchTimeout = null;
     let customerSearchTimeout = null;
 
@@ -39,6 +40,16 @@ const POS = (() => {
         return data;
     }
 
+    function showToast(msg) {
+        const container = document.getElementById('toastContainer');
+        if (!container) return;
+        const el = document.createElement('div');
+        el.className = 'toast';
+        el.textContent = msg;
+        container.appendChild(el);
+        setTimeout(() => el.remove(), 2100);
+    }
+
     // ─── Init ────────────────────────────
     async function init() {
         // Parse JWT to get employee info
@@ -49,10 +60,19 @@ const POS = (() => {
             canViewCost = (payload.permissions || []).includes('pos.view_cost');
             employeeMaxDiscount = payload.max_discount_pct || 100;
 
-            // Show cost/margin columns if permission
+            // Show cost/margin columns and toggle button if permission
             if (canViewCost) {
                 document.getElementById('thCost').style.display = '';
                 document.getElementById('thMargin').style.display = '';
+                const costToggle = document.getElementById('costToggle');
+                if (costToggle) costToggle.style.display = '';
+            }
+
+            // Set avatar initials
+            const avatar = document.querySelector('.status-bar__user-avatar');
+            if (avatar && payload.name) {
+                const parts = payload.name.split(' ');
+                avatar.textContent = parts.map(p => p[0]).join('').substring(0, 2).toUpperCase();
             }
         } catch (e) {
             console.warn('Could not parse token:', e);
@@ -87,11 +107,9 @@ const POS = (() => {
                 currentRegister = data.register;
                 document.getElementById('registerInfo').innerHTML =
                     `<span>Caja #${data.register.register_number}</span>`;
-                document.getElementById('registerInfo').classList.remove('no-register');
             } else {
                 document.getElementById('registerInfo').innerHTML =
                     '<span>Sin caja abierta</span>';
-                document.getElementById('registerInfo').classList.add('no-register');
             }
         } catch (e) {
             console.warn('Register check failed:', e);
@@ -100,7 +118,6 @@ const POS = (() => {
 
     // ─── Cart ────────────────────────────
     function addToCart(item) {
-        // Check if item already in cart
         const existing = cart.find(c => c.inventory_id === item.inventory_id);
         if (existing) {
             existing.quantity += (item.quantity || 1);
@@ -121,6 +138,7 @@ const POS = (() => {
         });
 
         renderCart();
+        showToast(`${item.name || 'Articulo'} agregado`);
     }
 
     function removeFromCart(index) {
@@ -150,36 +168,39 @@ const POS = (() => {
             const lineDiscount = lineGross * item.discount_pct / 100;
             const lineSubtotal = lineGross - lineDiscount;
 
-            const costHtml = canViewCost ? `<td class="num">${fmt(item.unit_cost)}</td>` : '';
+            const costHtml = canViewCost ? `<td class="num" style="text-align:right;padding:var(--space-2);font-family:var(--font-mono);color:var(--color-text-muted);font-size:var(--text-caption);">${fmt(item.unit_cost)}</td>` : '';
             let marginHtml = '';
             if (canViewCost) {
                 const effectivePrice = item.unit_price * (1 - item.discount_pct / 100);
                 const marginPct = effectivePrice > 0
                     ? ((effectivePrice - item.unit_cost) / effectivePrice * 100).toFixed(1)
                     : '0.0';
-                const cls = parseFloat(marginPct) < 5 ? 'margin-warning' : 'margin-info';
-                marginHtml = `<td class="num"><span class="${cls}">${marginPct}%</span></td>`;
+                const marginVal = parseFloat(marginPct);
+                const cls = marginVal > 30 ? 'margin-high' : marginVal > 15 ? 'margin-mid' : 'margin-low';
+                const color = marginVal > 30 ? 'var(--color-success)' : marginVal > 15 ? 'var(--color-warning)' : 'var(--color-error)';
+                marginHtml = `<td style="text-align:center;padding:var(--space-2);"><span style="font-family:var(--font-mono);font-size:var(--text-caption);font-weight:var(--font-weight-bold);color:${color};">${marginPct}%</span></td>`;
             }
 
-            html += `<tr class="${i === selectedRow ? 'selected' : ''}" onclick="POS.selectRow(${i})">
-                <td>${i + 1}</td>
-                <td>
-                    <div class="part-name">${item.name}</div>
-                    <div class="part-number">${item.part_number} | Stock: ${item.stock}</div>
+            html += `<tr style="border-bottom:1px solid var(--color-border);cursor:pointer;${i === selectedRow ? 'background:var(--color-primary-muted);' : ''}" onclick="POS.selectRow(${i})">
+                <td style="padding:var(--space-2);color:var(--color-text-muted);">${i + 1}</td>
+                <td style="padding:var(--space-2);">
+                    <div style="font-weight:var(--font-weight-semibold);color:var(--color-text-primary);">${item.name}</div>
+                    <div style="font-family:var(--font-mono);font-size:var(--text-caption);color:var(--color-text-muted);">${item.part_number} | Stock: ${item.stock}</div>
                 </td>
-                <td><input type="number" class="qty-input" value="${item.quantity}" min="1"
+                <td style="text-align:center;padding:var(--space-2);"><input type="number" style="width:50px;text-align:center;font-family:var(--font-mono);background:var(--color-bg-base);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:2px 4px;" value="${item.quantity}" min="1"
                     onchange="POS.updateQty(${i}, this.value)" onclick="event.stopPropagation()"></td>
-                <td class="num">${fmt(item.unit_price)}</td>
-                <td><input type="number" class="discount-input" value="${item.discount_pct}" min="0" max="100" step="0.5"
+                <td style="text-align:right;padding:var(--space-2);font-family:var(--font-mono);">${fmt(item.unit_price)}</td>
+                <td style="text-align:center;padding:var(--space-2);"><input type="number" style="width:45px;text-align:center;font-family:var(--font-mono);background:var(--color-bg-base);color:var(--color-text-primary);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:2px 4px;" value="${item.discount_pct}" min="0" max="100" step="0.5"
                     onchange="POS.updateDiscount(${i}, this.value)" onclick="event.stopPropagation()">%</td>
-                <td class="num">${fmt(lineSubtotal)}</td>
+                <td style="text-align:right;padding:var(--space-2);font-family:var(--font-mono);font-weight:var(--font-weight-bold);">${fmt(lineSubtotal)}</td>
                 ${costHtml}
                 ${marginHtml}
-                <td><button class="btn-remove" onclick="event.stopPropagation(); POS.removeFromCart(${i})">&times;</button></td>
+                <td style="text-align:center;"><button style="background:transparent;border:1px solid var(--color-border);border-radius:var(--radius-sm);width:24px;height:24px;cursor:pointer;color:var(--color-text-muted);font-size:14px;" onclick="event.stopPropagation(); POS.removeFromCart(${i})">&times;</button></td>
             </tr>`;
         });
         tbody.innerHTML = html;
         updateTotals();
+        updateAvgMargin();
     }
 
     function updateQty(index, val) {
@@ -230,6 +251,26 @@ const POS = (() => {
         }
     }
 
+    function updateAvgMargin() {
+        const avgEl = document.getElementById('avgMargin');
+        if (!avgEl || !canViewCost) return;
+        let totalRevenue = 0, totalCost = 0;
+        cart.forEach(item => {
+            if (item.unit_cost > 0) {
+                const effectivePrice = item.unit_price * (1 - item.discount_pct / 100);
+                totalRevenue += effectivePrice * item.quantity;
+                totalCost += item.unit_cost * item.quantity;
+            }
+        });
+        if (totalRevenue > 0) {
+            const avg = ((totalRevenue - totalCost) / totalRevenue * 100);
+            avgEl.textContent = avg.toFixed(1) + '%';
+            avgEl.style.color = avg > 30 ? 'var(--color-success)' : avg > 15 ? 'var(--color-warning)' : 'var(--color-error)';
+        } else {
+            avgEl.textContent = '--';
+        }
+    }
+
     function getTotal() {
         let subtotal = 0, taxTotal = 0;
         cart.forEach(item => {
@@ -243,9 +284,14 @@ const POS = (() => {
         return Math.round((subtotal + taxTotal) * 100) / 100;
     }
 
+    function getItemCount() {
+        return cart.reduce((sum, item) => sum + item.quantity, 0);
+    }
+
     // ─── Search ──────────────────────────
     function setupSearch() {
         const input = document.getElementById('itemSearch');
+        if (!input) return;
         input.addEventListener('input', () => {
             clearTimeout(searchTimeout);
             searchTimeout = setTimeout(() => searchItems(input.value.trim()), 300);
@@ -271,31 +317,29 @@ const POS = (() => {
             const totals = document.getElementById('totalsPanel');
 
             if (data.data.length === 0) {
-                container.innerHTML = '<div style="padding:20px;text-align:center;color:#999;">Sin resultados</div>';
+                container.innerHTML = '<div style="padding:20px;text-align:center;color:var(--color-text-muted);">Sin resultados</div>';
             } else {
                 let html = '';
                 data.data.forEach(item => {
-                    // Determine price for current customer
                     let price = item.price_1;
                     if (currentCustomer) {
                         const tier = currentCustomer.price_tier || 1;
                         price = tier === 3 ? item.price_3 : tier === 2 ? item.price_2 : item.price_1;
                     }
-                    const stockClass = item.stock <= 0 ? 'zero' : '';
-                    html += `<div class="search-result-item" onclick='POS.addFromSearch(${JSON.stringify(item).replace(/'/g, "&#39;")}, ${price})'>
+                    html += `<div style="padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:var(--transition-fast);" onmouseover="this.style.background='var(--color-primary-muted)'" onmouseout="this.style.background=''" onclick='POS.addFromSearch(${JSON.stringify(item).replace(/'/g, "&#39;")}, ${price})'>
                         <div>
-                            <div class="sr-name">${item.name}</div>
-                            <div class="sr-pn">${item.part_number} | ${item.brand || ''}</div>
-                            <div class="sr-stock ${stockClass}">Stock: ${item.stock}</div>
+                            <div style="font-weight:var(--font-weight-semibold);">${item.name}</div>
+                            <div style="font-family:var(--font-mono);font-size:var(--text-caption);color:var(--color-text-muted);">${item.part_number} | ${item.brand || ''}</div>
+                            <div style="font-size:var(--text-caption);color:${item.stock <= 0 ? 'var(--color-error)' : 'var(--color-text-muted)'};">Stock: ${item.stock}</div>
                         </div>
-                        <div class="sr-price">${fmt(price)}</div>
+                        <div style="font-family:var(--font-mono);font-weight:var(--font-weight-bold);color:var(--color-primary);">${fmt(price)}</div>
                     </div>`;
                 });
                 container.innerHTML = html;
             }
 
-            container.classList.add('active');
-            totals.classList.add('hidden');
+            container.style.display = '';
+            totals.style.display = 'none';
         } catch (e) {
             console.error('Search error:', e);
         }
@@ -317,13 +361,16 @@ const POS = (() => {
     }
 
     function hideSearchResults() {
-        document.getElementById('searchResults').classList.remove('active');
-        document.getElementById('totalsPanel').classList.remove('hidden');
+        const sr = document.getElementById('searchResults');
+        const tp = document.getElementById('totalsPanel');
+        if (sr) sr.style.display = 'none';
+        if (tp) tp.style.display = '';
     }
 
     // ─── Customer Search ─────────────────
     function setupCustomerSearch() {
         const input = document.getElementById('customerSearch');
+        if (!input) return;
         input.addEventListener('input', () => {
             clearTimeout(customerSearchTimeout);
             customerSearchTimeout = setTimeout(() => searchCustomers(input.value.trim()), 300);
@@ -347,14 +394,14 @@ const POS = (() => {
             const ac = document.getElementById('customerAutocomplete');
 
             if (data.data.length === 0) {
-                ac.innerHTML = '<div class="ac-item" style="color:#999;">Sin resultados</div>';
+                ac.innerHTML = '<div style="padding:var(--space-3);color:var(--color-text-muted);">Sin resultados</div>';
             } else {
                 let html = '';
                 data.data.forEach(c => {
                     const tiers = { 1: 'Mostrador', 2: 'Taller', 3: 'Mayoreo' };
-                    html += `<div class="ac-item" onclick='POS.selectCustomer(${JSON.stringify(c).replace(/'/g, "&#39;")})'>
-                        <div>${c.name}</div>
-                        <div class="ac-meta">${c.rfc || ''} | ${c.phone || ''} | ${tiers[c.price_tier] || 'P1'} | Credito: ${fmt(c.credit_balance)}/${fmt(c.credit_limit)}</div>
+                    html += `<div style="padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--color-border);cursor:pointer;transition:var(--transition-fast);" onmouseover="this.style.background='var(--color-primary-muted)'" onmouseout="this.style.background=''" onclick='POS.selectCustomer(${JSON.stringify(c).replace(/'/g, "&#39;")})'>
+                        <div style="font-weight:var(--font-weight-semibold);">${c.name}</div>
+                        <div style="font-size:var(--text-caption);color:var(--color-text-muted);">${c.rfc || ''} | ${c.phone || ''} | ${tiers[c.price_tier] || 'P1'} | Credito: ${fmt(c.credit_balance)}/${fmt(c.credit_limit)}</div>
                     </div>`;
                 });
                 ac.innerHTML = html;
@@ -377,7 +424,7 @@ const POS = (() => {
             `Credito: ${fmt(customer.credit_balance)} / ${fmt(customer.credit_limit)}`;
         document.getElementById('customerSelected').style.display = '';
 
-        // Show vehicle info
+        // Show vehicle info banner
         if (customer.vehicle_info && customer.vehicle_info.length > 0) {
             const v = customer.vehicle_info[0];
             document.getElementById('vehicleInfo').textContent =
@@ -385,7 +432,7 @@ const POS = (() => {
             document.getElementById('vehicleBanner').classList.add('visible');
         }
 
-        // Fetch full customer detail to get recent purchase info
+        // Fetch full customer detail
         try {
             const detail = await api(`/pos/api/customers/${customer.id}`);
             if (detail.recent_purchases && detail.recent_purchases.length > 0) {
@@ -393,18 +440,19 @@ const POS = (() => {
                 const daysAgo = Math.floor((Date.now() - new Date(last.created_at).getTime()) / 86400000);
                 const daysText = daysAgo === 0 ? 'hoy' : daysAgo === 1 ? 'hace 1 dia' : `hace ${daysAgo} dias`;
                 document.getElementById('lastPurchaseInfo').textContent =
-                    `Ultima compra: ${fmt(last.total)} ${daysText}`;
+                    `${fmt(last.total)} ${daysText}`;
                 document.getElementById('vehicleBanner').classList.add('visible');
             }
         } catch (e) {
             console.warn('Could not fetch customer detail:', e);
         }
 
-        // Re-apply prices based on customer tier
-        cart.forEach(item => {
-            // Fetch updated price for this customer tier (would need to re-query)
-            // For now, prices stay as-is (they were set at add time)
-        });
+        // Update CFDI hint
+        const cfdiHint = document.getElementById('cfdiHint');
+        if (cfdiHint && customer.rfc) {
+            cfdiHint.textContent = `RFC: ${customer.rfc}`;
+            document.getElementById('cfdiCheck').checked = !!customer.rfc;
+        }
 
         renderCart();
     }
@@ -412,20 +460,25 @@ const POS = (() => {
     function clearCustomer() {
         currentCustomer = null;
         document.getElementById('customerSelected').style.display = 'none';
-        document.getElementById('customerSearchWrap').querySelector('input').style.display = '';
-        document.getElementById('customerSearchWrap').querySelector('input').value = '';
+        const searchInput = document.getElementById('customerSearch');
+        if (searchInput) {
+            searchInput.style.display = '';
+            searchInput.value = '';
+        }
         document.getElementById('vehicleBanner').classList.remove('visible');
+        const cfdiHint = document.getElementById('cfdiHint');
+        if (cfdiHint) cfdiHint.textContent = '';
         renderCart();
     }
 
     // ─── New Customer Modal ──────────────
     function showNewCustomerModal() {
-        document.getElementById('newCustomerModal').classList.add('active');
-        document.getElementById('ncName').focus();
+        document.getElementById('newCustomerModal').classList.add('open');
+        setTimeout(() => document.getElementById('ncName').focus(), 100);
     }
 
     function closeNewCustomerModal() {
-        document.getElementById('newCustomerModal').classList.remove('active');
+        document.getElementById('newCustomerModal').classList.remove('open');
     }
 
     async function saveNewCustomer() {
@@ -462,7 +515,6 @@ const POS = (() => {
                 body: JSON.stringify(body),
             });
 
-            // Select the new customer
             selectCustomer({
                 id: result.id,
                 name: body.name,
@@ -475,6 +527,7 @@ const POS = (() => {
             });
 
             closeNewCustomerModal();
+            showToast('Cliente creado');
         } catch (e) {
             alert('Error al crear cliente: ' + e.message);
         }
@@ -482,40 +535,88 @@ const POS = (() => {
 
     // ─── Payment ─────────────────────────
     function checkout() {
-        if (cart.length === 0) { alert('Carrito vacio'); return; }
+        if (cart.length === 0) { showToast('Carrito vacio'); return; }
         if (!currentRegister) { alert('No hay caja abierta. Abra una caja primero.'); return; }
 
         paymentMethod = 'efectivo';
         const total = getTotal();
 
+        // Populate modal
         document.getElementById('modalTotal').textContent = fmt(total);
-        document.getElementById('cashReceived').value = '';
-        document.getElementById('changeDisplay').textContent = 'Cambio: $0.00';
-        document.getElementById('changeDisplay').className = 'change-display positive';
-        document.getElementById('paymentRef').value = '';
+        document.getElementById('modalItemCount').textContent = `${getItemCount()} productos`;
+        document.getElementById('modalCustomerName').textContent =
+            currentCustomer ? currentCustomer.name : 'Publico General';
 
-        // Reset payment method buttons
-        document.querySelectorAll('.pm-btn').forEach(b => b.classList.remove('active'));
-        document.querySelector('.pm-btn[data-method="efectivo"]').classList.add('active');
+        // Reset inputs
+        document.getElementById('cashReceived').value = '';
+        document.getElementById('changeDisplay').textContent = '$0.00';
+        document.getElementById('changeDisplay').className = 'cambio-amount positive';
+        const payRef = document.getElementById('paymentRef');
+        if (payRef) payRef.value = '';
+
+        // Populate quick amounts
+        const quickContainer = document.getElementById('quickAmounts');
+        if (quickContainer) {
+            const rounded = Math.ceil(total);
+            const amounts = [rounded, Math.ceil(total / 100) * 100, Math.ceil(total / 500) * 500, Math.ceil(total / 1000) * 1000];
+            const unique = [...new Set(amounts)].slice(0, 4);
+            quickContainer.innerHTML = unique.map(a =>
+                `<button class="quick-btn" onclick="document.getElementById('cashReceived').value=${a};POS.updateChange();">${fmt(a)}</button>`
+            ).join('');
+        }
+
+        // Set ref amount
+        const refAmount = document.getElementById('refAmount');
+        if (refAmount) refAmount.value = fmt(total);
+
+        // Reset payment tabs
+        document.querySelectorAll('.pago-tab').forEach(t => t.classList.remove('active'));
+        document.querySelector('.pago-tab[data-method="efectivo"]').classList.add('active');
+        document.getElementById('cashPayment').classList.add('active');
         document.getElementById('cashPayment').style.display = '';
+        document.getElementById('refPayment').classList.remove('active');
         document.getElementById('refPayment').style.display = 'none';
+        document.getElementById('mixedPayment').classList.remove('active');
         document.getElementById('mixedPayment').style.display = 'none';
 
-        document.getElementById('paymentModal').classList.add('active');
+        // Reset confirm button
+        const confirmBtn = document.getElementById('btnConfirmPayment');
+        confirmBtn.disabled = false;
+        confirmBtn.textContent = `Confirmar Pago — ${fmt(total)}`;
+
+        document.getElementById('paymentModal').classList.add('open');
         setTimeout(() => document.getElementById('cashReceived').focus(), 100);
     }
 
     function selectPaymentMethod(method, btn) {
         paymentMethod = method;
-        document.querySelectorAll('.pm-btn').forEach(b => b.classList.remove('active'));
-        btn.classList.add('active');
 
-        document.getElementById('cashPayment').style.display = method === 'efectivo' ? '' : 'none';
-        document.getElementById('refPayment').style.display = (method === 'transferencia' || method === 'tarjeta') ? '' : 'none';
-        document.getElementById('mixedPayment').style.display = method === 'mixto' ? '' : 'none';
+        // Update tabs
+        document.querySelectorAll('.pago-tab').forEach(t => t.classList.remove('active'));
+        if (btn) btn.classList.add('active');
+
+        // Show/hide tab content
+        const tabs = {
+            efectivo: 'cashPayment',
+            transferencia: 'refPayment',
+            tarjeta: 'refPayment',
+            mixto: 'mixedPayment',
+        };
+
+        ['cashPayment', 'refPayment', 'mixedPayment'].forEach(id => {
+            const el = document.getElementById(id);
+            if (el) {
+                const isActive = el.id === tabs[method];
+                el.classList.toggle('active', isActive);
+                el.style.display = isActive ? '' : 'none';
+            }
+        });
 
         if (method === 'efectivo') document.getElementById('cashReceived').focus();
-        if (method === 'transferencia' || method === 'tarjeta') document.getElementById('paymentRef').focus();
+        if (method === 'transferencia' || method === 'tarjeta') {
+            const ref = document.getElementById('paymentRef');
+            if (ref) ref.focus();
+        }
     }
 
     function updateChange() {
@@ -523,8 +624,13 @@ const POS = (() => {
         const received = parseFloat(document.getElementById('cashReceived').value) || 0;
         const change = received - total;
         const el = document.getElementById('changeDisplay');
-        el.textContent = `Cambio: ${fmt(Math.abs(change))}`;
-        el.className = 'change-display ' + (change >= 0 ? 'positive' : 'negative');
+        if (change >= 0) {
+            el.textContent = fmt(change);
+            el.className = 'cambio-amount positive';
+        } else {
+            el.textContent = '-' + fmt(Math.abs(change));
+            el.className = 'cambio-amount negative';
+        }
     }
 
     function updateMixedTotal() {
@@ -534,13 +640,13 @@ const POS = (() => {
             sum += parseFloat(input.value) || 0;
         });
         const remaining = total - sum;
-        document.getElementById('mixedRemaining').textContent =
-            remaining > 0 ? `Faltante: ${fmt(remaining)}` : `Cubierto (${fmt(sum)})`;
-        document.getElementById('mixedRemaining').style.color = remaining > 0 ? '#c62828' : '#2e7d32';
+        const el = document.getElementById('mixedRemaining');
+        el.textContent = remaining > 0 ? `Faltante: ${fmt(remaining)}` : `Cubierto (${fmt(sum)})`;
+        el.style.color = remaining > 0 ? 'var(--color-error)' : 'var(--color-success)';
     }
 
     function closePaymentModal() {
-        document.getElementById('paymentModal').classList.remove('active');
+        document.getElementById('paymentModal').classList.remove('open');
     }
 
     async function confirmPayment() {
@@ -584,10 +690,12 @@ const POS = (() => {
             amount_paid: amountPaid,
             payment_details: paymentDetails,
             reference: reference,
+            generate_cfdi: document.getElementById('cfdiCheck').checked,
         };
 
-        document.getElementById('btnConfirmPayment').disabled = true;
-        document.getElementById('btnConfirmPayment').textContent = 'Procesando...';
+        const confirmBtn = document.getElementById('btnConfirmPayment');
+        confirmBtn.disabled = true;
+        confirmBtn.textContent = 'Procesando...';
 
         try {
             const sale = await api('/pos/api/sales', {
@@ -596,6 +704,7 @@ const POS = (() => {
             });
 
             lastSaleId = sale.id;
+            lastSaleData = sale;
             closePaymentModal();
             showTicket(sale);
 
@@ -605,11 +714,12 @@ const POS = (() => {
             clearCustomer();
             renderCart();
 
+            showToast(`Venta #${sale.id} completada`);
         } catch (e) {
             alert('Error al procesar venta: ' + e.message);
         } finally {
-            document.getElementById('btnConfirmPayment').disabled = false;
-            document.getElementById('btnConfirmPayment').textContent = 'Confirmar Pago';
+            confirmBtn.disabled = false;
+            confirmBtn.textContent = 'Confirmar Pago';
         }
     }
 
@@ -623,7 +733,7 @@ const POS = (() => {
         const available = (currentCustomer.credit_limit || 0) - (currentCustomer.credit_balance || 0);
 
         if (currentCustomer.credit_limit > 0 && total > available) {
-            if (!confirm(`Credito insuficiente. Disponible: ${fmt(available)}, Total: ${fmt(total)}. Continuar de todas formas?`)) {
+            if (!confirm(`Credito insuficiente. Disponible: ${fmt(available)}, Total: ${fmt(total)}. Continuar?`)) {
                 return;
             }
         }
@@ -650,6 +760,7 @@ const POS = (() => {
             });
 
             lastSaleId = sale.id;
+            lastSaleData = sale;
             showTicket(sale);
             cart = [];
             selectedRow = -1;
@@ -662,7 +773,7 @@ const POS = (() => {
 
     // ─── Quotation ───────────────────────
     async function saveQuotation() {
-        if (cart.length === 0) { alert('Carrito vacio'); return; }
+        if (cart.length === 0) { showToast('Carrito vacio'); return; }
 
         const body = {
             items: cart.map(item => ({
@@ -680,7 +791,7 @@ const POS = (() => {
                 method: 'POST',
                 body: JSON.stringify(body),
             });
-            alert(`Cotizacion #${result.id} guardada. Total: ${fmt(result.total)}\nValida hasta: ${result.valid_until}`);
+            showToast(`Cotizacion #${result.id} guardada. Total: ${fmt(result.total)}`);
         } catch (e) {
             alert('Error: ' + e.message);
         }
@@ -718,13 +829,7 @@ const POS = (() => {
                 method: 'POST',
                 body: JSON.stringify(body),
             });
-            alert(
-                `Apartado #${result.id} creado.\n` +
-                `Total: ${fmt(result.total)}\n` +
-                `Anticipo: ${fmt(result.amount_paid)}\n` +
-                `Restante: ${fmt(result.remaining)}\n` +
-                `Vence: ${result.expires_at}`
-            );
+            showToast(`Apartado #${result.id} creado. Restante: ${fmt(result.remaining)}`);
             cart = [];
             selectedRow = -1;
             clearCustomer();
@@ -736,64 +841,108 @@ const POS = (() => {
 
     // ─── Ticket ──────────────────────────
     function showTicket(sale) {
-        const lines = [];
-        lines.push('========================================');
-        lines.push('              NEXUS POS');
-        lines.push('========================================');
-        lines.push(`Venta #${sale.id}`);
-        lines.push(`Fecha: ${new Date(sale.created_at).toLocaleString('es-MX')}`);
-        if (currentCustomer) {
-            lines.push(`Cliente: ${currentCustomer.name}`);
-            if (currentCustomer.rfc) lines.push(`RFC: ${currentCustomer.rfc}`);
-        } else {
-            lines.push('Cliente: Publico General');
-        }
-        lines.push('----------------------------------------');
-
-        (sale.items || []).forEach(item => {
-            lines.push(`${item.name}`);
-            let line = `  ${item.quantity} x ${fmt(item.unit_price)}`;
-            if (item.discount_pct > 0) line += ` (-${item.discount_pct}%)`;
-            line += `  ${fmt(item.subtotal)}`;
-            lines.push(line);
+        const dateStr = new Date(sale.created_at).toLocaleString('es-MX', {
+            year: 'numeric', month: 'short', day: 'numeric',
+            hour: '2-digit', minute: '2-digit'
         });
 
-        lines.push('----------------------------------------');
-        lines.push(`Subtotal:      ${fmt(sale.subtotal).padStart(12)}`);
-        if (sale.discount_total > 0) {
-            lines.push(`Descuento:    -${fmt(sale.discount_total).padStart(12)}`);
-        }
-        lines.push(`IVA:           ${fmt(sale.tax_total).padStart(12)}`);
-        lines.push('========================================');
-        lines.push(`TOTAL:         ${fmt(sale.total).padStart(12)}`);
-        lines.push('========================================');
+        const customerName = currentCustomer ? currentCustomer.name : 'Publico General';
+        const customerRfc = currentCustomer && currentCustomer.rfc ? currentCustomer.rfc : '';
 
-        if (sale.payment_method === 'efectivo') {
-            lines.push(`Efectivo:      ${fmt(sale.amount_paid).padStart(12)}`);
-            lines.push(`Cambio:        ${fmt(sale.change_given).padStart(12)}`);
-        } else {
-            lines.push(`Pago: ${sale.payment_method}`);
-        }
+        let itemsHtml = '';
+        (sale.items || []).forEach(item => {
+            const itemTotal = (item.unit_price * item.quantity * (1 - (item.discount_pct || 0) / 100));
+            itemsHtml += `
+                <div class="item-line-wide">
+                    <span class="qty">${item.quantity}</span>
+                    <span class="name">${item.name || ''}</span>
+                    <span class="price">${fmt(item.unit_price)}</span>
+                    <span class="subtotal">${fmt(item.subtotal || itemTotal)}</span>
+                </div>`;
+        });
 
-        lines.push('');
-        lines.push('       Gracias por su compra!');
-        lines.push('');
+        const ticketHtml = `
+            <div class="store-name">NEXUS AUTOPARTS</div>
+            <div class="store-tagline">Tu conexion con las refacciones</div>
+            <div class="store-info">
+                Sucursal: ${currentRegister ? currentRegister.branch_name || '' : ''}<br>
+                RFC: NAU210315XX1
+            </div>
+            <hr class="divider-double">
+            <div class="folio-line">
+                <span>VENTA: V-${sale.id}</span>
+                <span>${dateStr}</span>
+            </div>
+            <div class="ticket-row" style="font-size: 9px; color: #555; margin-bottom: 4px;">
+                <span>Cliente: ${customerName}</span>
+                ${customerRfc ? `<span>RFC: ${customerRfc}</span>` : ''}
+            </div>
+            <hr class="divider">
+            <div class="item-line-wide" style="font-weight: bold; font-size: 9px; color: #555; text-transform: uppercase;">
+                <span class="qty">Cant</span>
+                <span class="name">Descripcion</span>
+                <span class="price">P. Unit</span>
+                <span class="subtotal">Importe</span>
+            </div>
+            <hr class="divider" style="margin: 2px 0;">
+            ${itemsHtml}
+            <hr class="divider-double">
+            <div class="total-section">
+                <div class="total-line">
+                    <span>Subtotal:</span><span>${fmt(sale.subtotal)}</span>
+                </div>
+                ${sale.discount_total > 0 ? `<div class="total-line"><span>Descuento:</span><span>-${fmt(sale.discount_total)}</span></div>` : ''}
+                <div class="total-line">
+                    <span>IVA 16%:</span><span>${fmt(sale.tax_total)}</span>
+                </div>
+                <div class="total-line grand">
+                    <span>TOTAL:</span><span>${fmt(sale.total)}</span>
+                </div>
+            </div>
+            <hr class="divider">
+            <div class="payment-section">
+                <div class="ticket-row">
+                    <span>Forma de pago:</span><span>${sale.payment_method || paymentMethod}</span>
+                </div>
+                ${sale.payment_method === 'efectivo' ? `
+                <div class="ticket-row">
+                    <span>Recibido:</span><span>${fmt(sale.amount_paid)}</span>
+                </div>
+                <div class="ticket-row" style="font-weight: bold;">
+                    <span>Cambio:</span><span>${fmt(sale.change_given || 0)}</span>
+                </div>` : ''}
+            </div>
+            <hr class="divider">
+            <div class="footer-section">
+                <div class="thanks">Gracias por su compra!</div>
+                <div>Conserve su ticket como comprobante.</div>
+            </div>
+        `;
 
-        document.getElementById('ticketPreview').textContent = lines.join('\n');
-        document.getElementById('ticketModal').classList.add('active');
+        // Set both print area and preview
+        const printArea = document.getElementById('ticketContent');
+        if (printArea) printArea.innerHTML = ticketHtml;
+        const preview = document.getElementById('ticketPreviewContent');
+        if (preview) preview.innerHTML = ticketHtml;
+
+        document.getElementById('ticketModal').classList.add('open');
     }
 
     function closeTicketModal() {
-        document.getElementById('ticketModal').classList.remove('active');
+        document.getElementById('ticketModal').classList.remove('open');
     }
 
     function printTicket() {
+        // Make print area visible for @media print
+        const area = document.getElementById('ticketPrintArea');
+        if (area) area.style.display = 'block';
         window.print();
+        setTimeout(() => { if (area) area.style.display = 'none'; }, 500);
     }
 
     // ─── Last Sale ───────────────────────
     async function showLastSale() {
-        if (!lastSaleId) { alert('No hay venta reciente'); return; }
+        if (!lastSaleId) { showToast('No hay venta reciente'); return; }
         try {
             const sale = await api(`/pos/api/sales/${lastSaleId}`);
             showTicket(sale);
@@ -804,15 +953,12 @@ const POS = (() => {
 
     // ─── Drawer ──────────────────────────
     function openDrawer() {
-        // Cash drawer open command (ESC/POS compatible)
-        // In a real implementation, this would send the command to the printer
-        alert('Comando enviado al cajon de efectivo.');
+        showToast('Comando enviado al cajon de efectivo.');
     }
 
     // ─── Keyboard Shortcuts ──────────────
     function setupKeyboard() {
         document.addEventListener('keydown', (e) => {
-            // Don't intercept when typing in inputs
             const tag = e.target.tagName;
             const inInput = tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';
 
@@ -845,12 +991,20 @@ const POS = (() => {
                     break;
                 case 'Escape':
                     e.preventDefault();
-                    if (document.getElementById('paymentModal').classList.contains('active')) {
+                    if (document.getElementById('paymentModal').classList.contains('open')) {
                         closePaymentModal();
-                    } else if (document.getElementById('newCustomerModal').classList.contains('active')) {
+                    } else if (document.getElementById('newCustomerModal').classList.contains('open')) {
                         closeNewCustomerModal();
-                    } else if (document.getElementById('ticketModal').classList.contains('active')) {
+                    } else if (document.getElementById('ticketModal').classList.contains('open')) {
                         closeTicketModal();
+                    } else if (document.querySelector('.confirm-overlay.active')) {
+                        // Close cancel modal
+                        const overlay = document.getElementById('overlay-cancelar-venta');
+                        const dialog = document.getElementById('modal-cancelar-venta');
+                        if (overlay && overlay.classList.contains('active')) {
+                            overlay.classList.remove('active');
+                            dialog.classList.remove('active');
+                        }
                     } else {
                         hideSearchResults();
                     }
diff --git a/pos/templates/pos.html b/pos/templates/pos.html
index 67772a2..f2ef0f8 100644
--- a/pos/templates/pos.html
+++ b/pos/templates/pos.html
@@ -34,7 +34,7 @@
       flex-direction: column;
     }
 
-    /* Dot-grid for modern theme (applied to body shell) */
+    /* Dot-grid for modern theme */
     [data-theme="modern"] body,
     [data-theme="modern"].pos-shell {
       background-color: var(--color-bg-base);
@@ -129,47 +129,8 @@
       font-weight: var(--font-weight-bold);
     }
 
-    /* Theme switcher inside status bar */
-    .theme-switcher {
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
-      background-color: var(--color-surface-1);
-      border: 1px solid var(--color-border);
-      border-radius: var(--radius-full);
-      padding: 2px;
-    }
-
-    .theme-btn {
-      display: flex;
-      align-items: center;
-      gap: var(--space-1);
-      padding: 3px var(--space-3);
-      border: none;
-      border-radius: var(--radius-full);
-      font-family: var(--font-body);
-      font-size: 0.68rem;
-      font-weight: var(--font-weight-semibold);
-      letter-spacing: var(--tracking-wide);
-      text-transform: uppercase;
-      cursor: pointer;
-      transition: var(--transition-fast);
-      background: transparent;
-      color: var(--color-text-muted);
-    }
-
-    .theme-btn.active {
-      background-color: var(--color-primary);
-      color: var(--color-text-inverse);
-      box-shadow: var(--shadow-sm);
-    }
-
-    [data-theme="industrial"] .theme-btn.active {
-      color: #000;
-    }
-
     /* =====================================================================
-       MAIN CONTENT — split layout
+       MAIN CONTENT -- split layout
        ===================================================================== */
 
     .pos-shell {
@@ -187,7 +148,7 @@
     }
 
     /* =====================================================================
-       LEFT PANEL — Product Browser (60%)
+       LEFT PANEL -- Product Browser (60%)
        ===================================================================== */
 
     .panel-products {
@@ -244,9 +205,7 @@
       transition: var(--transition-fast);
     }
 
-    .search-input::placeholder {
-      color: var(--color-text-muted);
-    }
+    .search-input::placeholder { color: var(--color-text-muted); }
 
     .search-input:focus {
       border-color: var(--color-border-focus);
@@ -260,11 +219,8 @@
     }
 
     .btn-scan {
-      width: 48px;
-      height: 48px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+      width: 48px; height: 48px;
+      display: flex; align-items: center; justify-content: center;
       background-color: var(--btn-secondary-bg);
       border: 1.5px solid var(--btn-secondary-border);
       border-radius: var(--radius-md);
@@ -279,26 +235,13 @@
       box-shadow: var(--shadow-accent);
     }
 
-    [data-theme="industrial"] .btn-scan {
-      clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%);
-    }
-
-    [data-theme="modern"] .btn-scan {
-      border-radius: var(--radius-lg);
-    }
-
     /* Quick category buttons */
     .categories-row {
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
+      display: flex; align-items: center; gap: var(--space-2);
       padding: var(--space-3) var(--space-5);
       border-bottom: 1px solid var(--color-border);
-      overflow-x: auto;
-      flex-shrink: 0;
-      scrollbar-width: none;
+      overflow-x: auto; flex-shrink: 0; scrollbar-width: none;
     }
-
     .categories-row::-webkit-scrollbar { display: none; }
 
     .category-label {
@@ -312,9 +255,7 @@
     }
 
     .cat-btn {
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
+      display: flex; align-items: center; gap: var(--space-2);
       padding: var(--space-2) var(--space-4);
       border: 1.5px solid var(--color-border);
       border-radius: var(--radius-sm);
@@ -323,990 +264,736 @@
       font-size: var(--text-body-sm);
       font-weight: var(--font-weight-semibold);
       color: var(--color-text-secondary);
-      cursor: pointer;
-      white-space: nowrap;
+      cursor: pointer; white-space: nowrap;
       transition: var(--transition-fast);
-      letter-spacing: var(--tracking-snug);
     }
-
     .cat-btn:hover {
-      border-color: var(--color-primary);
-      color: var(--color-primary);
+      border-color: var(--color-primary); color: var(--color-primary);
       background-color: var(--color-primary-muted);
     }
-
     .cat-btn.active {
-      border-color: var(--color-primary);
-      background-color: var(--color-primary);
+      border-color: var(--color-primary); background-color: var(--color-primary);
       color: var(--color-text-inverse);
     }
-
     [data-theme="industrial"] .cat-btn.active { color: #000; }
-
-    [data-theme="modern"] .cat-btn {
-      border-radius: var(--radius-full);
-    }
-
-    [data-theme="industrial"] .cat-btn {
-      clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
-    }
+    [data-theme="modern"] .cat-btn { border-radius: var(--radius-full); }
 
     /* Product grid */
     .product-grid-wrap {
-      flex: 1;
-      overflow-y: auto;
+      flex: 1; overflow-y: auto;
       padding: var(--space-4) var(--space-5);
       scrollbar-width: thin;
       scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
     }
-
     .product-grid-wrap::-webkit-scrollbar { width: 6px; }
     .product-grid-wrap::-webkit-scrollbar-track { background: var(--scrollbar-track); }
-    .product-grid-wrap::-webkit-scrollbar-thumb {
-      background-color: var(--scrollbar-thumb);
-      border-radius: var(--radius-full);
-    }
-    .product-grid-wrap::-webkit-scrollbar-thumb:hover {
-      background-color: var(--scrollbar-thumb-hover);
-    }
+    .product-grid-wrap::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: var(--radius-full); }
 
     .product-grid {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: var(--space-3);
-    }
-
-    @media (max-width: 1100px) {
-      .product-grid {
-        grid-template-columns: repeat(2, 1fr);
-      }
+      display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3);
     }
+    @media (max-width: 1100px) { .product-grid { grid-template-columns: repeat(2, 1fr); } }
 
     /* Product card */
     .product-card {
-      position: relative;
-      display: flex;
-      flex-direction: column;
+      position: relative; display: flex; flex-direction: column;
       padding: var(--space-4);
       background-color: var(--color-surface-1);
       border: 1px solid var(--color-border);
       border-radius: var(--radius-md);
-      cursor: pointer;
-      transition: var(--transition-fast);
-      overflow: hidden;
+      cursor: pointer; transition: var(--transition-fast); overflow: hidden;
     }
-
     .product-card:hover {
-      border-color: var(--color-primary);
-      box-shadow: var(--shadow-md);
-      transform: translateY(-1px);
+      border-color: var(--color-primary); box-shadow: var(--shadow-md); transform: translateY(-1px);
     }
+    .product-card:hover .product-card__add { opacity: 1; transform: scale(1); }
 
-    .product-card:hover .product-card__add {
-      opacity: 1;
-      transform: scale(1);
-    }
-
-    [data-theme="industrial"] .product-card {
-      clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 0 100%);
-      background-color: var(--color-surface-1);
-      border-color: #2a2a2a;
-    }
-
-    [data-theme="industrial"] .product-card:hover {
-      border-color: var(--color-primary);
-      box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-md);
-    }
-
-    [data-theme="modern"] .product-card {
-      border-radius: var(--radius-lg);
-      background-color: #fff;
-      box-shadow: var(--shadow-sm);
-    }
-
-    [data-theme="modern"] .product-card:hover {
-      box-shadow: var(--shadow-lg);
-    }
+    [data-theme="industrial"] .product-card { background-color: var(--color-surface-1); border-color: #2a2a2a; }
+    [data-theme="industrial"] .product-card:hover { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary), var(--shadow-md); }
+    [data-theme="modern"] .product-card { border-radius: var(--radius-lg); background-color: #fff; box-shadow: var(--shadow-sm); }
+    [data-theme="modern"] .product-card:hover { box-shadow: var(--shadow-lg); }
 
     .product-card__category {
-      font-size: var(--text-caption);
-      font-weight: var(--font-weight-semibold);
-      letter-spacing: var(--tracking-widest);
-      text-transform: uppercase;
-      color: var(--color-primary);
-      margin-bottom: var(--space-1);
+      font-size: var(--text-caption); font-weight: var(--font-weight-semibold);
+      letter-spacing: var(--tracking-widest); text-transform: uppercase;
+      color: var(--color-primary); margin-bottom: var(--space-1);
     }
-
     .product-card__name {
-      font-family: var(--font-heading);
-      font-size: var(--text-body);
-      font-weight: var(--heading-weight-primary);
-      line-height: var(--leading-h5);
-      color: var(--color-text-primary);
-      margin-bottom: var(--space-1);
-      letter-spacing: var(--heading-tracking-h5);
+      font-family: var(--font-heading); font-size: var(--text-body);
+      font-weight: var(--heading-weight-primary); line-height: var(--leading-h5);
+      color: var(--color-text-primary); margin-bottom: var(--space-1);
     }
-
-    [data-theme="industrial"] .product-card__name {
-      font-size: 1.05rem;
-      letter-spacing: 0.01em;
-    }
-
     .product-card__oem {
-      font-family: var(--font-mono);
-      font-size: var(--text-caption);
-      color: var(--color-text-muted);
-      margin-bottom: var(--space-3);
+      font-family: var(--font-mono); font-size: var(--text-caption);
+      color: var(--color-text-muted); margin-bottom: var(--space-3);
     }
-
     .product-card__footer {
-      display: flex;
-      align-items: flex-end;
-      justify-content: space-between;
-      margin-top: auto;
-      gap: var(--space-2);
+      display: flex; align-items: flex-end; justify-content: space-between;
+      margin-top: auto; gap: var(--space-2);
     }
-
     .product-card__price {
-      font-family: var(--font-mono);
-      font-size: 1.1rem;
-      font-weight: var(--font-weight-bold);
-      color: var(--color-text-primary);
-      line-height: 1;
+      font-family: var(--font-mono); font-size: 1.1rem;
+      font-weight: var(--font-weight-bold); color: var(--color-text-primary); line-height: 1;
     }
-
-    .product-card__stock {
-      font-size: var(--text-caption);
-      color: var(--color-text-muted);
-      margin-top: 2px;
-    }
-
+    .product-card__stock { font-size: var(--text-caption); color: var(--color-text-muted); margin-top: 2px; }
     .product-card__stock.low { color: var(--color-warning); }
     .product-card__stock.out { color: var(--color-error); }
 
     .product-card__add {
-      width: 32px;
-      height: 32px;
-      border: none;
-      border-radius: var(--radius-sm);
-      background-color: var(--color-primary);
-      color: var(--color-text-inverse);
-      font-size: 1.2rem;
-      font-weight: var(--font-weight-bold);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      cursor: pointer;
-      opacity: 0.75;
-      transform: scale(0.95);
-      transition: var(--transition-fast);
-      flex-shrink: 0;
+      width: 32px; height: 32px; border: none; border-radius: var(--radius-sm);
+      background-color: var(--color-primary); color: var(--color-text-inverse);
+      font-size: 1.2rem; font-weight: var(--font-weight-bold);
+      display: flex; align-items: center; justify-content: center;
+      cursor: pointer; opacity: 0.75; transform: scale(0.95);
+      transition: var(--transition-fast); flex-shrink: 0;
     }
-
-    .product-card__add:hover {
-      background-color: var(--color-primary-hover);
-      opacity: 1;
-      transform: scale(1.08) !important;
-    }
-
+    .product-card__add:hover { background-color: var(--color-primary-hover); opacity: 1; transform: scale(1.08) !important; }
     [data-theme="industrial"] .product-card__add { color: #000; }
     [data-theme="modern"] .product-card__add { border-radius: var(--radius-md); }
 
-    /* Add flash animation */
     @keyframes card-flash {
       0%   { background-color: var(--color-primary-muted); }
       100% { background-color: transparent; }
     }
-
-    .product-card.added {
-      animation: card-flash 0.4s ease forwards;
-    }
+    .product-card.added { animation: card-flash 0.4s ease forwards; }
 
     /* =====================================================================
-       RIGHT PANEL — Cart / Ticket (40%)
+       RIGHT PANEL -- Cart / Ticket (40%)
        ===================================================================== */
 
     .panel-cart {
-      display: flex;
-      flex-direction: column;
-      width: 40%;
-      min-width: 320px;
-      background-color: var(--color-surface-1);
-      overflow: hidden;
-      position: relative;
-    }
-
-    [data-theme="modern"] .panel-cart {
-      background-color: #fff;
-      box-shadow: -4px 0 20px rgba(26, 26, 46, 0.06);
-    }
-
-    [data-theme="industrial"] .panel-cart {
-      background-color: #141414;
-      border-left: 1px solid #2a2a2a;
+      display: flex; flex-direction: column; width: 40%; min-width: 320px;
+      background-color: var(--color-surface-1); overflow: hidden; position: relative;
     }
+    [data-theme="modern"] .panel-cart { background-color: #fff; box-shadow: -4px 0 20px rgba(26,26,46,0.06); }
+    [data-theme="industrial"] .panel-cart { background-color: #141414; border-left: 1px solid #2a2a2a; }
 
     /* Cart header */
     .cart-header {
       padding: var(--space-4) var(--space-5);
       border-bottom: 1px solid var(--color-border);
-      flex-shrink: 0;
-      background-color: var(--color-surface-2);
-    }
-
-    [data-theme="industrial"] .cart-header {
-      background-color: #1a1a1a;
-      border-bottom-color: var(--color-primary-muted);
+      flex-shrink: 0; background-color: var(--color-surface-2);
     }
+    [data-theme="industrial"] .cart-header { background-color: #1a1a1a; border-bottom-color: var(--color-primary-muted); }
 
     .cart-header__top {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
+      display: flex; align-items: center; justify-content: space-between;
       margin-bottom: var(--space-3);
     }
 
     .cart-header__sale-id {
-      font-family: var(--font-heading);
-      font-size: var(--text-h5);
-      font-weight: var(--heading-weight-primary);
-      color: var(--color-text-primary);
-      letter-spacing: var(--heading-tracking-h5);
-      display: flex;
-      align-items: center;
-      gap: var(--space-2);
+      font-family: var(--font-heading); font-size: var(--text-h5);
+      font-weight: var(--heading-weight-primary); color: var(--color-text-primary);
+      display: flex; align-items: center; gap: var(--space-2);
     }
-
     .cart-header__sale-id::before {
-      content: '';
-      display: block;
-      width: 4px;
-      height: 20px;
-      background-color: var(--color-primary);
-      border-radius: 2px;
-      flex-shrink: 0;
-    }
-
-    [data-theme="industrial"] .cart-header__sale-id {
-      font-size: 1.35rem;
-      letter-spacing: 0.03em;
+      content: ''; display: block; width: 4px; height: 20px;
+      background-color: var(--color-primary); border-radius: 2px; flex-shrink: 0;
     }
 
     .cart-header__status {
-      font-size: var(--text-caption);
-      font-weight: var(--font-weight-semibold);
-      letter-spacing: var(--tracking-wider);
-      text-transform: uppercase;
-      color: var(--color-success);
-      background-color: rgba(34, 197, 94, 0.12);
-      padding: 3px var(--space-3);
-      border-radius: var(--radius-full);
-      border: 1px solid rgba(34, 197, 94, 0.25);
+      font-size: var(--text-caption); font-weight: var(--font-weight-semibold);
+      letter-spacing: var(--tracking-wider); text-transform: uppercase;
+      color: var(--color-success); background-color: rgba(34,197,94,0.12);
+      padding: 3px var(--space-3); border-radius: var(--radius-full);
+      border: 1px solid rgba(34,197,94,0.25);
     }
 
     /* Customer row */
     .customer-row {
-      display: flex;
-      align-items: center;
-      gap: var(--space-3);
+      display: flex; align-items: center; gap: var(--space-3);
     }
-
     .customer-icon {
-      width: 34px;
-      height: 34px;
-      border-radius: var(--radius-full);
-      background-color: var(--color-primary-muted);
-      border: 1.5px solid var(--color-primary);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: var(--color-primary);
-      flex-shrink: 0;
+      width: 34px; height: 34px; border-radius: var(--radius-full);
+      background-color: var(--color-primary-muted); border: 1.5px solid var(--color-primary);
+      display: flex; align-items: center; justify-content: center;
+      color: var(--color-primary); flex-shrink: 0;
     }
-
-    .customer-info {
-      flex: 1;
-      min-width: 0;
-    }
-
+    .customer-info { flex: 1; min-width: 0; }
     .customer-info__name {
-      font-size: var(--text-body-sm);
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold);
+      color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
     }
-
-    .customer-info__label {
-      font-size: var(--text-caption);
-      color: var(--color-text-muted);
-    }
-
+    .customer-info__label { font-size: var(--text-caption); color: var(--color-text-muted); }
     .btn-change-customer {
-      padding: var(--space-1) var(--space-3);
-      border: 1px solid var(--color-border);
-      border-radius: var(--radius-full);
-      background: transparent;
-      font-family: var(--font-body);
-      font-size: var(--text-caption);
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-muted);
-      cursor: pointer;
-      transition: var(--transition-fast);
-      white-space: nowrap;
+      padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border);
+      border-radius: var(--radius-full); background: transparent;
+      font-family: var(--font-body); font-size: var(--text-caption);
+      font-weight: var(--font-weight-semibold); color: var(--color-text-muted);
+      cursor: pointer; transition: var(--transition-fast); white-space: nowrap;
     }
+    .btn-change-customer:hover { border-color: var(--color-primary); color: var(--color-primary); }
 
-    .btn-change-customer:hover {
-      border-color: var(--color-primary);
-      color: var(--color-primary);
+    /* Banner Cliente */
+    .banner-cliente {
+      padding: var(--space-3) var(--space-4);
+      border-bottom: 2px solid var(--color-primary);
+      background: var(--color-primary-muted);
+      display: none;
     }
+    .banner-cliente.visible { display: block; }
+    .banner-top { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-2); }
+    .banner-avatar {
+      width: 36px; height: 36px; border-radius: var(--radius-full);
+      background: var(--color-primary); display: flex; align-items: center; justify-content: center;
+      font-family: var(--font-heading); font-size: var(--text-body-sm);
+      font-weight: var(--font-weight-bold); color: var(--color-text-inverse); flex-shrink: 0;
+    }
+    .banner-name-block { flex: 1; min-width: 0; }
+    .banner-name {
+      font-family: var(--font-heading); font-size: var(--text-body);
+      font-weight: var(--heading-weight-primary); color: var(--color-text-primary);
+      line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
+    }
+    .banner-rfc {
+      font-family: var(--font-mono); font-size: var(--text-caption);
+      color: var(--color-text-muted); letter-spacing: var(--tracking-wide);
+    }
+    .banner-close {
+      width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
+      background: transparent; border: 1px solid var(--color-border);
+      border-radius: var(--radius-md); cursor: pointer;
+      color: var(--color-text-muted); font-size: 14px; transition: var(--transition-fast); flex-shrink: 0;
+    }
+    .banner-close:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
+    .banner-info {
+      display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-2);
+    }
+    .banner-info-item {
+      padding: var(--space-2) var(--space-3); background: var(--color-bg-elevated);
+      border: 1px solid var(--color-border); border-radius: var(--radius-md);
+    }
+    .banner-info-label {
+      font-size: 10px; color: var(--color-text-muted); text-transform: uppercase;
+      letter-spacing: var(--tracking-widest); font-weight: var(--font-weight-semibold);
+    }
+    .banner-info-value {
+      font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold);
+      color: var(--color-text-primary); margin-top: 1px;
+    }
+    .banner-info-value.credit-ok { color: var(--color-success); }
+    .banner-info-value.credit-low { color: var(--color-warning-dark); }
+    .banner-info-value.credit-none { color: var(--color-error); }
 
     /* Cart items list */
     .cart-items {
-      flex: 1;
-      overflow-y: auto;
-      padding: var(--space-3) var(--space-4);
-      scrollbar-width: thin;
-      scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
+      flex: 1; overflow-y: auto; padding: var(--space-3) var(--space-4);
+      scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
     }
-
     .cart-items::-webkit-scrollbar { width: 4px; }
     .cart-items::-webkit-scrollbar-track { background: transparent; }
-    .cart-items::-webkit-scrollbar-thumb {
-      background-color: var(--scrollbar-thumb);
-      border-radius: var(--radius-full);
-    }
+    .cart-items::-webkit-scrollbar-thumb { background-color: var(--scrollbar-thumb); border-radius: var(--radius-full); }
 
     .cart-empty {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      height: 120px;
-      color: var(--color-text-muted);
-      font-size: var(--text-body-sm);
-      gap: var(--space-2);
-      opacity: 0.6;
+      display: flex; flex-direction: column; align-items: center; justify-content: center;
+      height: 120px; color: var(--color-text-muted); font-size: var(--text-body-sm); gap: var(--space-2); opacity: 0.6;
     }
 
     .cart-item {
-      display: flex;
-      align-items: center;
-      gap: var(--space-3);
-      padding: var(--space-3) var(--space-2);
-      border-bottom: 1px solid var(--color-border);
+      display: flex; align-items: center; gap: var(--space-3);
+      padding: var(--space-3) var(--space-2); border-bottom: 1px solid var(--color-border);
       transition: var(--transition-fast);
       animation: item-slide-in 0.2s ease;
     }
-
     @keyframes item-slide-in {
       from { opacity: 0; transform: translateX(10px); }
       to   { opacity: 1; transform: translateX(0); }
     }
-
-    .cart-item:hover {
-      background-color: var(--color-primary-muted);
-      border-radius: var(--radius-sm);
-    }
-
+    .cart-item:hover { background-color: var(--color-primary-muted); border-radius: var(--radius-sm); }
     .cart-item:last-child { border-bottom: none; }
 
-    .cart-item__qty-ctrl {
-      display: flex;
-      align-items: center;
-      gap: var(--space-1);
-      flex-shrink: 0;
-    }
-
+    .cart-item__qty-ctrl { display: flex; align-items: center; gap: var(--space-1); flex-shrink: 0; }
     .qty-btn {
-      width: 26px;
-      height: 26px;
-      border: 1px solid var(--color-border-strong);
-      border-radius: var(--radius-sm);
-      background-color: var(--color-surface-3);
-      color: var(--color-text-primary);
-      font-size: 0.9rem;
-      font-weight: var(--font-weight-bold);
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: var(--transition-fast);
-      line-height: 1;
+      width: 26px; height: 26px; border: 1px solid var(--color-border-strong);
+      border-radius: var(--radius-sm); background-color: var(--color-surface-3);
+      color: var(--color-text-primary); font-size: 0.9rem; font-weight: var(--font-weight-bold);
+      cursor: pointer; display: flex; align-items: center; justify-content: center;
+      transition: var(--transition-fast); line-height: 1;
     }
-
-    .qty-btn:hover {
-      border-color: var(--color-primary);
-      background-color: var(--color-primary);
-      color: var(--color-text-inverse);
-    }
-
+    .qty-btn:hover { border-color: var(--color-primary); background-color: var(--color-primary); color: var(--color-text-inverse); }
     [data-theme="industrial"] .qty-btn:hover { color: #000; }
-
     .qty-display {
-      font-family: var(--font-mono);
-      font-size: var(--text-body-sm);
-      font-weight: var(--font-weight-bold);
-      color: var(--color-text-primary);
-      min-width: 24px;
-      text-align: center;
-    }
-
-    .cart-item__info {
-      flex: 1;
-      min-width: 0;
+      font-family: var(--font-mono); font-size: var(--text-body-sm);
+      font-weight: var(--font-weight-bold); color: var(--color-text-primary); min-width: 24px; text-align: center;
     }
 
+    .cart-item__info { flex: 1; min-width: 0; }
     .cart-item__name {
-      font-size: var(--text-body-sm);
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
+      font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold);
+      color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
     }
-
-    .cart-item__unit {
-      font-family: var(--font-mono);
-      font-size: var(--text-caption);
-      color: var(--color-text-muted);
-    }
-
+    .cart-item__unit { font-family: var(--font-mono); font-size: var(--text-caption); color: var(--color-text-muted); }
     .cart-item__total {
-      font-family: var(--font-mono);
-      font-size: var(--text-body-sm);
-      font-weight: var(--font-weight-bold);
-      color: var(--color-text-primary);
-      text-align: right;
-      min-width: 72px;
+      font-family: var(--font-mono); font-size: var(--text-body-sm);
+      font-weight: var(--font-weight-bold); color: var(--color-text-primary); text-align: right; min-width: 72px;
     }
-
     .cart-item__remove {
-      width: 24px;
-      height: 24px;
-      border: none;
-      border-radius: var(--radius-sm);
-      background: transparent;
-      color: var(--color-text-muted);
-      font-size: 1rem;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      transition: var(--transition-fast);
-      flex-shrink: 0;
-      line-height: 1;
+      width: 24px; height: 24px; border: none; border-radius: var(--radius-sm);
+      background: transparent; color: var(--color-text-muted); font-size: 1rem;
+      cursor: pointer; display: flex; align-items: center; justify-content: center;
+      transition: var(--transition-fast); flex-shrink: 0; line-height: 1;
     }
+    .cart-item__remove:hover { background-color: rgba(239,68,68,0.15); color: var(--color-error); }
 
-    .cart-item__remove:hover {
-      background-color: rgba(239, 68, 68, 0.15);
-      color: var(--color-error);
+    /* Columnas Costo/Margen (hidden by default, visible with permission) */
+    .cart-item__cost, .cart-item__margin {
+      display: none; font-family: var(--font-mono); font-size: var(--text-caption);
+      text-align: right; min-width: 56px; flex-shrink: 0;
     }
+    .cart-item__cost { color: var(--color-text-muted); }
+    .cart-item__margin { font-weight: var(--font-weight-bold); }
+    .cart-item__margin.margin-high { color: var(--color-success); }
+    .cart-item__margin.margin-mid  { color: var(--color-warning); }
+    .cart-item__margin.margin-low  { color: var(--color-error); }
+
+    body.show-cost-columns .cart-item__cost,
+    body.show-cost-columns .cart-item__margin { display: block; }
+
+    .margin-summary {
+      display: none; padding: var(--space-2) var(--space-5);
+      border-top: 1px dashed var(--color-border);
+      font-size: var(--text-caption); color: var(--color-text-muted);
+    }
+    body.show-cost-columns .margin-summary { display: flex; justify-content: space-between; }
+    .margin-summary__value { font-family: var(--font-mono); font-weight: var(--font-weight-bold); }
+
+    .cost-toggle {
+      display: flex; align-items: center; gap: var(--space-2);
+      padding: var(--space-1) var(--space-3); border: 1px solid var(--color-border);
+      border-radius: var(--radius-sm); background: transparent;
+      color: var(--color-text-muted); font-size: 10px; font-family: var(--font-body);
+      letter-spacing: var(--tracking-wide); text-transform: uppercase;
+      cursor: pointer; transition: var(--transition-fast);
+    }
+    .cost-toggle:hover { border-color: var(--color-primary); color: var(--color-text-accent); }
+    .cost-toggle.active { background: var(--color-primary-muted); border-color: var(--color-primary); color: var(--color-text-accent); }
 
     /* Cart footer (totals + payment) */
     .cart-footer {
-      flex-shrink: 0;
-      border-top: 1px solid var(--color-border);
+      flex-shrink: 0; border-top: 1px solid var(--color-border);
       background-color: var(--color-surface-2);
     }
+    [data-theme="industrial"] .cart-footer { background-color: #1a1a1a; border-top-color: var(--color-primary-muted); }
 
-    [data-theme="industrial"] .cart-footer {
-      background-color: #1a1a1a;
-      border-top-color: var(--color-primary-muted);
-    }
-
-    .totals-block {
-      padding: var(--space-3) var(--space-5) var(--space-2);
-    }
-
-    .totals-row {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: var(--space-1) 0;
-    }
-
-    .totals-row__label {
-      font-size: var(--text-body-sm);
-      color: var(--color-text-muted);
-    }
-
-    .totals-row__value {
-      font-family: var(--font-mono);
-      font-size: var(--text-body-sm);
-      color: var(--color-text-secondary);
-    }
-
-    .totals-row--total {
-      margin-top: var(--space-2);
-      padding-top: var(--space-2);
-      border-top: 1px solid var(--color-border);
-    }
+    .totals-block { padding: var(--space-3) var(--space-5) var(--space-2); }
+    .totals-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-1) 0; }
+    .totals-row__label { font-size: var(--text-body-sm); color: var(--color-text-muted); }
+    .totals-row__value { font-family: var(--font-mono); font-size: var(--text-body-sm); color: var(--color-text-secondary); }
 
+    .totals-row--total { margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
     .totals-row--total .totals-row__label {
-      font-family: var(--font-heading);
-      font-size: var(--text-body-lg);
-      font-weight: var(--heading-weight-primary);
-      color: var(--color-text-primary);
-      letter-spacing: var(--tracking-wide);
-      text-transform: uppercase;
+      font-family: var(--font-heading); font-size: var(--text-body-lg);
+      font-weight: var(--heading-weight-primary); color: var(--color-text-primary);
+      letter-spacing: var(--tracking-wide); text-transform: uppercase;
     }
-
     .totals-row--total .totals-row__value {
-      font-family: var(--font-mono);
-      font-size: 1.5rem;
-      font-weight: var(--font-weight-bold);
-      color: var(--color-primary);
+      font-family: var(--font-mono); font-size: 1.5rem;
+      font-weight: var(--font-weight-bold); color: var(--color-primary);
     }
 
-    /* Discount row */
-    .discount-row {
-      display: flex;
-      align-items: center;
-      gap: var(--space-3);
-      padding: 0 var(--space-5) var(--space-3);
-    }
-
-    .discount-label {
-      font-size: var(--text-caption);
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-muted);
-      text-transform: uppercase;
-      letter-spacing: var(--tracking-wider);
-      white-space: nowrap;
-    }
-
-    .discount-input {
-      flex: 1;
-      height: 30px;
-      padding: 0 var(--space-3);
-      background-color: var(--color-bg-base);
-      border: 1px solid var(--color-border);
-      border-radius: var(--radius-sm);
-      font-family: var(--font-mono);
-      font-size: var(--text-body-sm);
-      color: var(--color-text-primary);
-      outline: none;
-      transition: var(--transition-fast);
-    }
-
-    .discount-input:focus {
-      border-color: var(--color-border-focus);
-      box-shadow: var(--shadow-focus);
-    }
-
-    [data-theme="modern"] .discount-input {
-      border-radius: var(--radius-md);
-    }
-
-    .discount-input::placeholder { color: var(--color-text-muted); }
-
-    /* Payment method buttons */
-    .payment-methods {
-      display: grid;
-      grid-template-columns: repeat(3, 1fr);
-      gap: var(--space-2);
-      padding: 0 var(--space-5) var(--space-3);
-    }
-
-    .pay-btn {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      justify-content: center;
-      gap: 3px;
-      padding: var(--space-2) var(--space-2);
-      border: 1.5px solid var(--color-border);
-      border-radius: var(--radius-sm);
-      background: transparent;
-      font-family: var(--font-body);
-      font-size: var(--text-caption);
-      font-weight: var(--font-weight-semibold);
-      letter-spacing: var(--tracking-wide);
-      text-transform: uppercase;
-      color: var(--color-text-muted);
-      cursor: pointer;
-      transition: var(--transition-fast);
-    }
-
-    .pay-btn:hover {
-      border-color: var(--color-primary);
-      color: var(--color-primary);
-      background-color: var(--color-primary-muted);
-    }
-
-    .pay-btn.selected {
-      border-color: var(--color-primary);
-      background-color: var(--color-primary-muted);
-      color: var(--color-primary);
-      box-shadow: var(--shadow-accent);
-    }
-
-    .pay-btn__icon {
-      font-size: 1.1rem;
-    }
-
-    [data-theme="modern"] .pay-btn {
-      border-radius: var(--radius-md);
-    }
-
-    [data-theme="industrial"] .pay-btn {
-      clip-path: polygon(0 0, calc(100% - 6px) 0, 100% 6px, 100% 100%, 0 100%);
-    }
-
-    /* Main CTA button */
+    /* COBRAR Button */
     .btn-cobrar {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--space-3);
-      width: calc(100% - var(--space-10));
-      margin: 0 var(--space-5) var(--space-3);
-      height: 56px;
-      background-color: var(--btn-primary-bg);
-      border: none;
+      display: flex; align-items: center; justify-content: center; gap: var(--space-3);
+      width: calc(100% - var(--space-10)); margin: var(--space-3) var(--space-5);
+      height: 56px; background-color: var(--btn-primary-bg); border: none;
       border-radius: var(--radius-md);
-      font-family: var(--font-heading);
-      font-size: 1.2rem;
+      font-family: var(--font-heading); font-size: 1.2rem;
       font-weight: var(--heading-weight-primary);
-      letter-spacing: var(--tracking-widest);
-      text-transform: uppercase;
-      color: var(--btn-primary-text);
-      cursor: pointer;
-      transition: var(--transition-fast);
-      box-shadow: var(--shadow-md);
-    }
-
-    .btn-cobrar:hover {
-      background-color: var(--btn-primary-bg-hover);
-      transform: translateY(-1px);
-      box-shadow: var(--shadow-lg);
-    }
-
-    .btn-cobrar:active {
-      background-color: var(--btn-primary-bg-active);
-      transform: translateY(0);
-    }
-
-    .btn-cobrar:disabled {
-      opacity: 0.4;
-      cursor: not-allowed;
-      transform: none;
-    }
-
-    [data-theme="industrial"] .btn-cobrar {
-      clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%);
-    }
-
-    [data-theme="modern"] .btn-cobrar {
-      border-radius: var(--radius-lg);
+      letter-spacing: var(--tracking-widest); text-transform: uppercase;
+      color: var(--btn-primary-text); cursor: pointer;
+      transition: var(--transition-fast); box-shadow: var(--shadow-md);
     }
+    .btn-cobrar:hover { background-color: var(--btn-primary-bg-hover); transform: translateY(-1px); box-shadow: var(--shadow-lg); }
+    .btn-cobrar:active { background-color: var(--btn-primary-bg-active); transform: translateY(0); }
+    .btn-cobrar:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }
+    [data-theme="industrial"] .btn-cobrar { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
+    [data-theme="modern"] .btn-cobrar { border-radius: var(--radius-lg); }
 
     /* Secondary actions row */
     .secondary-actions {
-      display: flex;
-      gap: var(--space-2);
-      padding: 0 var(--space-5) var(--space-4);
+      display: flex; gap: var(--space-2); padding: 0 var(--space-5) var(--space-4);
     }
-
     .btn-secondary-action {
-      flex: 1;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      gap: var(--space-1);
-      height: 34px;
-      border: 1px solid var(--color-border);
-      border-radius: var(--radius-sm);
-      background: transparent;
-      font-family: var(--font-body);
-      font-size: var(--text-caption);
-      font-weight: var(--font-weight-semibold);
-      letter-spacing: var(--tracking-wide);
-      text-transform: uppercase;
-      color: var(--color-text-muted);
-      cursor: pointer;
+      flex: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-1);
+      height: 34px; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
+      background: transparent; font-family: var(--font-body); font-size: var(--text-caption);
+      font-weight: var(--font-weight-semibold); letter-spacing: var(--tracking-wide);
+      text-transform: uppercase; color: var(--color-text-muted); cursor: pointer;
       transition: var(--transition-fast);
     }
-
-    .btn-secondary-action:hover {
-      border-color: var(--color-border-strong);
-      color: var(--color-text-secondary);
-      background-color: var(--color-surface-3);
-    }
-
-    .btn-secondary-action.danger:hover {
-      border-color: var(--color-error);
-      color: var(--color-error);
-      background-color: rgba(239, 68, 68, 0.08);
-    }
-
-    [data-theme="modern"] .btn-secondary-action {
-      border-radius: var(--radius-md);
-    }
+    .btn-secondary-action:hover { border-color: var(--color-border-strong); color: var(--color-text-secondary); background-color: var(--color-surface-3); }
+    .btn-secondary-action.danger:hover { border-color: var(--color-error); color: var(--color-error); background-color: rgba(239,68,68,0.08); }
+    [data-theme="modern"] .btn-secondary-action { border-radius: var(--radius-md); }
 
     /* =====================================================================
-       NUMPAD OVERLAY
+       F-KEYS FOOTER BAR
        ===================================================================== */
+    .fkeys-footer {
+      position: fixed; bottom: 0; left: 0; right: 0;
+      background: var(--color-surface-2); border-top: 2px solid var(--color-primary);
+      padding: var(--space-2) var(--space-4);
+      display: flex; align-items: center; justify-content: center; gap: var(--space-1);
+      z-index: var(--z-sticky); box-shadow: var(--shadow-lg);
+    }
+    .fkey {
+      display: flex; align-items: center; gap: var(--space-1);
+      padding: var(--space-2) var(--space-3); background: transparent;
+      border: 1px solid var(--color-border); border-radius: var(--radius-md);
+      cursor: pointer; transition: var(--transition-fast); white-space: nowrap; flex-shrink: 0;
+    }
+    .fkey:hover { background: var(--color-primary-muted); border-color: var(--color-primary); }
+    .fkey:active { background: var(--color-primary); transform: scale(0.96); }
+    .fkey:active .fkey-label { color: var(--color-text-inverse); }
+    .fkey:active .fkey-key { background: rgba(0,0,0,0.2); color: var(--color-text-inverse); border-color: transparent; }
+    .fkey-key {
+      display: inline-flex; align-items: center; justify-content: center;
+      min-width: 28px; height: 22px; padding: 0 var(--space-2);
+      background: var(--color-bg-base); border: 1px solid var(--color-border-strong);
+      border-radius: var(--radius-sm); font-family: var(--font-mono); font-size: 11px;
+      font-weight: var(--font-weight-bold); color: var(--color-text-accent); line-height: 1;
+    }
+    .fkey-label {
+      font-size: var(--text-caption); font-weight: var(--font-weight-semibold);
+      color: var(--color-text-secondary);
+    }
+    .fkey-sep { width: 1px; height: 24px; background: var(--color-border); margin: 0 var(--space-1); flex-shrink: 0; }
+    .fkey.highlight {
+      background: var(--color-primary-muted); border-color: var(--color-primary);
+    }
+    .fkey.highlight .fkey-key {
+      background: var(--color-primary); color: var(--color-text-inverse); border-color: var(--color-primary);
+    }
+    .fkey.highlight .fkey-label { color: var(--color-text-accent); font-weight: var(--font-weight-bold); }
 
-    .numpad-overlay {
-      position: fixed;
-      inset: 0;
-      background-color: var(--overlay-backdrop);
-      display: flex;
-      align-items: flex-end;
-      justify-content: center;
+    /* =====================================================================
+       MODAL DE PAGO
+       ===================================================================== */
+    .modal-overlay {
+      position: fixed; inset: 0;
+      background: var(--overlay-backdrop);
+      display: flex; align-items: center; justify-content: center;
       z-index: var(--z-modal);
-      opacity: 0;
-      pointer-events: none;
-      transition: opacity var(--duration-normal) var(--ease-in-out);
+      opacity: 0; pointer-events: none;
+      transition: var(--transition-normal);
+    }
+    .modal-overlay.open { opacity: 1; pointer-events: auto; }
+
+    .modal-pago {
+      background: var(--color-bg-elevated); border: 1px solid var(--color-border);
+      border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
+      width: 560px; max-width: 95vw; max-height: 90vh; overflow-y: auto;
+      transform: translateY(20px); transition: var(--transition-normal);
+    }
+    .modal-overlay.open .modal-pago { transform: translateY(0); }
+
+    .modal-header {
+      display: flex; align-items: center; justify-content: space-between;
+      padding: var(--space-5) var(--space-6); border-bottom: 1px solid var(--color-border);
+    }
+    .modal-header h3 {
+      font-family: var(--font-heading); font-size: var(--text-h4);
+      font-weight: var(--heading-weight-primary); color: var(--color-text-primary);
+    }
+    .modal-close {
+      width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
+      background: transparent; border: 1px solid var(--color-border);
+      border-radius: var(--radius-md); cursor: pointer;
+      color: var(--color-text-muted); font-size: 18px; transition: var(--transition-fast);
+    }
+    .modal-close:hover { background: var(--color-surface-2); color: var(--color-text-primary); }
+
+    .total-banner {
+      background: var(--color-primary-muted); border-bottom: 2px solid var(--color-primary);
+      padding: var(--space-4) var(--space-6);
+      display: flex; align-items: center; justify-content: space-between;
+    }
+    .total-label {
+      font-size: var(--text-body); font-weight: var(--font-weight-semibold);
+      color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: var(--tracking-wide);
+    }
+    .total-amount {
+      font-family: var(--font-mono); font-size: var(--text-h3);
+      font-weight: var(--font-weight-bold); color: var(--color-text-accent);
     }
 
-    .numpad-overlay.visible {
-      opacity: 1;
-      pointer-events: all;
+    .items-summary {
+      padding: var(--space-3) var(--space-6); border-bottom: 1px solid var(--color-border);
+      font-size: var(--text-body-sm); color: var(--color-text-muted); display: flex; gap: var(--space-4);
     }
 
-    .numpad-panel {
-      width: 360px;
-      background-color: var(--color-surface-2);
-      border: 1px solid var(--color-border-strong);
-      border-bottom: none;
-      border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-      padding: var(--space-5);
-      transform: translateY(100%);
-      transition: transform var(--duration-normal) var(--ease-out);
+    .pago-tabs {
+      display: flex; border-bottom: 2px solid var(--color-border); padding: 0 var(--space-6);
     }
-
-    .numpad-overlay.visible .numpad-panel {
-      transform: translateY(0);
+    .pago-tab {
+      padding: var(--space-3) var(--space-5); font-family: var(--font-body);
+      font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold);
+      background: transparent; border: none; color: var(--color-text-muted);
+      cursor: pointer; border-bottom: 2px solid transparent;
+      margin-bottom: -2px; transition: var(--transition-fast);
+      display: flex; align-items: center; gap: var(--space-2);
     }
+    .pago-tab:hover { color: var(--color-text-primary); }
+    .pago-tab.active { color: var(--color-text-accent); border-bottom-color: var(--color-primary); }
 
-    [data-theme="industrial"] .numpad-panel {
-      border-radius: var(--radius-sm) var(--radius-sm) 0 0;
-      background-color: #1e1e1e;
-      border-color: var(--color-primary-muted);
+    .tab-content { padding: var(--space-6); display: none; }
+    .tab-content.active { display: block; }
+
+    .form-group { margin-bottom: var(--space-4); }
+    .form-label {
+      display: block; font-size: var(--text-caption); font-weight: var(--font-weight-semibold);
+      color: var(--color-text-secondary); margin-bottom: var(--space-2);
+      text-transform: uppercase; letter-spacing: var(--tracking-wide);
     }
-
-    .numpad-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      margin-bottom: var(--space-4);
-    }
-
-    .numpad-title {
-      font-family: var(--font-heading);
-      font-size: var(--text-h6);
-      font-weight: var(--heading-weight-primary);
-      text-transform: uppercase;
-      letter-spacing: var(--tracking-widest);
-      color: var(--color-text-primary);
-    }
-
-    .numpad-close {
-      width: 28px;
-      height: 28px;
-      border: 1px solid var(--color-border);
-      border-radius: var(--radius-full);
-      background: transparent;
-      color: var(--color-text-muted);
-      font-size: 1rem;
-      cursor: pointer;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    .form-input {
+      width: 100%; padding: var(--space-3) var(--space-4);
+      font-family: var(--font-body); font-size: var(--text-body);
+      background: var(--color-bg-base); color: var(--color-text-primary);
+      border: 1px solid var(--color-border); border-radius: var(--radius-md);
       transition: var(--transition-fast);
     }
-
-    .numpad-close:hover {
-      border-color: var(--color-error);
-      color: var(--color-error);
+    .form-input:focus { outline: none; border-color: var(--color-border-focus); box-shadow: var(--shadow-focus); }
+    .form-input-lg {
+      font-family: var(--font-mono); font-size: var(--text-h3);
+      font-weight: var(--font-weight-bold); text-align: right;
+      padding: var(--space-4) var(--space-5);
     }
 
-    .numpad-display {
-      background-color: var(--color-bg-base);
-      border: 1px solid var(--color-border);
-      border-radius: var(--radius-sm);
+    .cambio-display {
+      background: var(--color-surface-2); border: 1px solid var(--color-border);
+      border-radius: var(--radius-md); padding: var(--space-4) var(--space-5);
+      display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-4);
+    }
+    .cambio-label { font-size: var(--text-body-sm); color: var(--color-text-secondary); font-weight: var(--font-weight-semibold); }
+    .cambio-amount { font-family: var(--font-mono); font-size: var(--text-h4); font-weight: var(--font-weight-bold); }
+    .cambio-amount.positive { color: var(--color-success); }
+    .cambio-amount.negative { color: var(--color-error); }
+
+    .quick-amounts { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); margin-top: var(--space-3); }
+    .quick-btn {
+      padding: var(--space-2) var(--space-3); font-family: var(--font-mono); font-size: var(--text-body-sm);
+      font-weight: var(--font-weight-semibold); background: var(--color-surface-2);
+      color: var(--color-text-primary); border: 1px solid var(--color-border);
+      border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-fast); text-align: center;
+    }
+    .quick-btn:hover { background: var(--color-primary-muted); border-color: var(--color-primary); }
+
+    .split-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-3); align-items: end; margin-bottom: var(--space-3); }
+    .split-method {
+      padding: var(--space-2) var(--space-3); font-size: var(--text-body-sm);
+      font-weight: var(--font-weight-semibold); background: var(--color-surface-2);
+      color: var(--color-text-secondary); border-radius: var(--radius-md);
+      text-align: center; border: 1px solid var(--color-border);
+    }
+    .split-remaining {
+      background: var(--color-surface-2); border-radius: var(--radius-md);
       padding: var(--space-3) var(--space-4);
-      font-family: var(--font-mono);
-      font-size: 1.8rem;
-      font-weight: var(--font-weight-bold);
-      color: var(--color-primary);
-      text-align: right;
-      margin-bottom: var(--space-4);
-      min-height: 60px;
-      display: flex;
-      align-items: center;
-      justify-content: flex-end;
-      letter-spacing: var(--tracking-wide);
+      display: flex; align-items: center; justify-content: space-between;
+      font-size: var(--text-body-sm); margin-top: var(--space-3);
+    }
+    .split-remaining .amount { font-family: var(--font-mono); font-weight: var(--font-weight-bold); color: var(--color-text-accent); }
+
+    .cfdi-check {
+      display: flex; align-items: center; gap: var(--space-3);
+      padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border);
+      background: var(--color-surface-1);
+    }
+    .cfdi-check input[type="checkbox"] { width: 20px; height: 20px; accent-color: var(--color-primary); cursor: pointer; }
+    .cfdi-check label { font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); cursor: pointer; }
+    .cfdi-check .cfdi-hint { font-size: var(--text-caption); color: var(--color-text-muted); margin-left: auto; }
+
+    .modal-footer {
+      padding: var(--space-4) var(--space-6); border-top: 1px solid var(--color-border);
+      display: flex; gap: var(--space-3); justify-content: flex-end;
     }
 
-    .numpad-grid {
-      display: grid;
-      grid-template-columns: repeat(4, 1fr);
-      gap: var(--space-2);
+    .btn {
+      display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
+      padding: var(--space-3) var(--space-6); font-family: var(--font-body); font-size: var(--text-body);
+      font-weight: var(--font-weight-semibold); line-height: 1;
+      border: 2px solid transparent; border-radius: var(--radius-md);
+      cursor: pointer; transition: var(--transition-fast); white-space: nowrap;
     }
+    .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
+    .btn:active { transform: scale(0.97); }
+    .btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
+    .btn-primary:hover { background: var(--btn-primary-bg-hover); }
+    .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
+    .btn-ghost { background: transparent; color: var(--color-text-muted); border-color: var(--color-border); }
+    .btn-ghost:hover { background: var(--color-surface-2); }
+    .btn-lg { padding: var(--space-4) var(--space-8); font-size: var(--text-body-lg); }
 
-    .numpad-key {
-      height: 52px;
-      border: 1px solid var(--color-border);
-      border-radius: var(--radius-sm);
-      background-color: var(--color-surface-3);
-      font-family: var(--font-mono);
-      font-size: 1.1rem;
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
-      cursor: pointer;
-      transition: var(--transition-fast);
-      display: flex;
-      align-items: center;
-      justify-content: center;
+    .ref-field { display: flex; gap: var(--space-3); align-items: end; }
+    .ref-field .form-group { flex: 1; }
+    .form-hint { font-size: var(--text-caption); color: var(--color-text-muted); margin-top: var(--space-1); }
+    .status-indicator {
+      display: flex; align-items: center; gap: var(--space-2);
+      padding: var(--space-3) var(--space-4); border-radius: var(--radius-md);
+      font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold);
     }
+    .status-indicator.pending { background: var(--color-warning-light); color: var(--color-warning-dark); }
+    .status-indicator.confirmed { background: var(--color-success-light); color: var(--color-success-dark); }
 
-    .numpad-key:hover {
-      background-color: var(--color-primary-muted);
-      border-color: var(--color-primary);
-      color: var(--color-primary);
+    .terminal-cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
+    .terminal-card {
+      padding: var(--space-4); background: var(--color-surface-2); border: 2px solid var(--color-border);
+      border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-fast); text-align: center;
     }
+    .terminal-card:hover { border-color: var(--color-primary); }
+    .terminal-card.selected { border-color: var(--color-primary); background: var(--color-primary-muted); }
+    .terminal-card .terminal-name { font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
+    .terminal-card .terminal-type { font-size: var(--text-caption); color: var(--color-text-muted); margin-top: var(--space-1); }
 
-    .numpad-key:active {
-      transform: scale(0.95);
+    /* =====================================================================
+       MODAL CONFIRMACION
+       ===================================================================== */
+    @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
+    @keyframes scaleIn { from { opacity: 0; transform: translate(-50%, -50%) scale(0.92); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
+    @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }
+    @keyframes scaleOut { from { opacity: 1; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(0.92); } }
+
+    .confirm-overlay {
+      position: fixed; inset: 0; background: var(--overlay-backdrop);
+      z-index: calc(var(--z-modal) + 1); display: none; animation: fadeIn 0.2s ease-out forwards;
     }
+    .confirm-overlay.active { display: block; }
+    .confirm-overlay.closing { animation: fadeOut 0.2s ease-in forwards; }
 
-    .numpad-key.key-0 { grid-column: span 2; }
-
-    .numpad-key.key-clear {
-      background-color: rgba(239, 68, 68, 0.1);
-      border-color: rgba(239, 68, 68, 0.3);
-      color: var(--color-error);
+    .confirm-dialog {
+      position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
+      z-index: calc(var(--z-modal) + 2);
+      background: var(--color-bg-elevated); border: 1px solid var(--color-border);
+      border-radius: var(--radius-xl); box-shadow: var(--shadow-xl);
+      width: 90%; max-width: 420px; padding: var(--space-6); text-align: center;
+      display: none; animation: scaleIn 0.25s ease-out forwards;
     }
+    .confirm-dialog.active { display: block; }
+    .confirm-dialog.closing { animation: scaleOut 0.2s ease-in forwards; }
 
-    .numpad-key.key-enter {
-      background-color: var(--color-primary);
-      border-color: var(--color-primary);
-      color: var(--color-text-inverse);
-      font-family: var(--font-heading);
-      font-size: 0.85rem;
-      letter-spacing: var(--tracking-wider);
-      text-transform: uppercase;
+    .modal__icon {
+      width: 56px; height: 56px; border-radius: var(--radius-full);
+      display: flex; align-items: center; justify-content: center;
+      font-size: 26px; margin: 0 auto var(--space-4);
     }
-
-    [data-theme="industrial"] .numpad-key.key-enter { color: #000; }
-
-    .numpad-key.key-enter:hover {
-      background-color: var(--color-primary-hover);
+    .modal__icon--warning { background: var(--color-warning-light); }
+    .modal__title {
+      font-family: var(--font-heading); font-size: var(--text-h4);
+      font-weight: var(--heading-weight-primary); color: var(--color-text-primary); margin-bottom: var(--space-2);
     }
+    .modal__desc {
+      font-size: var(--text-body-sm); color: var(--color-text-muted);
+      line-height: 1.6; margin-bottom: var(--space-6); padding: 0 var(--space-2);
+    }
+    .modal__actions { display: flex; gap: var(--space-3); justify-content: center; }
+    .modal__btn {
+      flex: 1; max-width: 180px; padding: var(--space-3) var(--space-4);
+      font-family: var(--font-body); font-size: var(--text-body-sm); font-weight: 600;
+      border-radius: var(--radius-md); cursor: pointer; transition: var(--transition-fast);
+      border: 1px solid transparent;
+    }
+    .modal__btn--secondary {
+      background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border-color: var(--btn-secondary-border);
+    }
+    .modal__btn--secondary:hover { background: var(--btn-secondary-bg-hover); }
+    .modal__btn--danger {
+      background: var(--btn-danger-bg, var(--color-error)); color: var(--btn-danger-text, #fff);
+      border-color: var(--btn-danger-bg, var(--color-error));
+    }
+    .modal__btn--danger:hover { opacity: 0.9; }
 
-    [data-theme="modern"] .numpad-key {
-      border-radius: var(--radius-md);
+    /* =====================================================================
+       TICKET TERMICO (hidden, for print)
+       ===================================================================== */
+    .ticket-print-area { display: none; }
+
+    .ticket {
+      background: #ffffff; color: #000000;
+      font-family: 'Courier New', 'Consolas', monospace;
+      font-size: 11px; line-height: 1.4; padding: 12px; text-align: left;
+      border: 1px dashed #ccc;
+    }
+    .ticket-80 { width: 302px; }
+    .ticket .store-name { font-size: 14px; font-weight: bold; text-align: center; margin-bottom: 2px; }
+    .ticket .store-tagline { font-size: 9px; text-align: center; color: #555; margin-bottom: 4px; }
+    .ticket .store-info { font-size: 9px; text-align: center; color: #333; margin-bottom: 6px; line-height: 1.3; }
+    .ticket .divider { border: none; border-top: 1px dashed #999; margin: 6px 0; }
+    .ticket .divider-double { border: none; border-top: 2px solid #333; margin: 6px 0; }
+    .ticket .ticket-row { display: flex; justify-content: space-between; }
+    .ticket .folio-line { font-size: 10px; font-weight: bold; display: flex; justify-content: space-between; margin-bottom: 4px; }
+    .ticket .total-section { margin-top: 4px; }
+    .ticket .total-line { display: flex; justify-content: space-between; font-size: 11px; }
+    .ticket .total-line.grand { font-size: 14px; font-weight: bold; margin-top: 2px; padding-top: 2px; border-top: 1px solid #333; }
+    .ticket .payment-section { margin-top: 4px; font-size: 10px; }
+    .ticket .footer-section { text-align: center; margin-top: 8px; font-size: 9px; color: #555; }
+    .ticket .footer-section .thanks { font-size: 11px; font-weight: bold; color: #000; margin-bottom: 2px; }
+    .ticket-80 .item-line-wide {
+      display: grid; grid-template-columns: auto 1fr auto auto;
+      gap: 8px; align-items: baseline; font-size: 10px; margin-bottom: 3px;
+    }
+    .ticket-80 .item-line-wide .qty { font-weight: bold; min-width: 24px; text-align: right; }
+    .ticket-80 .item-line-wide .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+    .ticket-80 .item-line-wide .price { text-align: right; min-width: 55px; }
+    .ticket-80 .item-line-wide .subtotal { text-align: right; font-weight: bold; min-width: 60px; }
+
+    @media print {
+      body * { display: none !important; }
+      .ticket-print-area, .ticket-print-area * { display: block !important; }
+      .ticket-print-area { position: fixed; top: 0; left: 0; }
+      .ticket { border: none; box-shadow: none; padding: 4px; }
+      .ticket .item-line-wide { display: grid !important; }
+      .ticket .ticket-row, .ticket .folio-line, .ticket .total-line { display: flex !important; }
     }
 
     /* =====================================================================
        TOAST NOTIFICATION
        ===================================================================== */
-
     .toast-container {
-      position: fixed;
-      bottom: var(--space-6);
-      left: 50%;
-      transform: translateX(-50%);
-      z-index: var(--z-toast);
-      display: flex;
-      flex-direction: column;
-      gap: var(--space-2);
-      pointer-events: none;
+      position: fixed; bottom: 60px; left: 50%; transform: translateX(-50%);
+      z-index: var(--z-toast); display: flex; flex-direction: column;
+      gap: var(--space-2); pointer-events: none;
     }
-
     .toast {
       padding: var(--space-3) var(--space-5);
-      background-color: var(--color-surface-3);
-      border: 1px solid var(--color-border);
-      border-left: 3px solid var(--color-primary);
-      border-radius: var(--radius-md);
-      font-size: var(--text-body-sm);
-      font-weight: var(--font-weight-semibold);
-      color: var(--color-text-primary);
-      box-shadow: var(--shadow-lg);
-      white-space: nowrap;
+      background-color: var(--color-surface-3); border: 1px solid var(--color-border);
+      border-left: 3px solid var(--color-primary); border-radius: var(--radius-md);
+      font-size: var(--text-body-sm); font-weight: var(--font-weight-semibold);
+      color: var(--color-text-primary); box-shadow: var(--shadow-lg); white-space: nowrap;
       animation: toast-in 0.25s ease, toast-out 0.3s ease 1.7s forwards;
     }
-
-    @keyframes toast-in {
-      from { opacity: 0; transform: translateY(10px); }
-      to   { opacity: 1; transform: translateY(0); }
-    }
-
-    @keyframes toast-out {
-      from { opacity: 1; transform: translateY(0); }
-      to   { opacity: 0; transform: translateY(-6px); }
-    }
+    @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
+    @keyframes toast-out { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-6px); } }
 
     /* =====================================================================
-       RESPONSIVE — tablet/small desktop
+       RESPONSIVE
        ===================================================================== */
-
     @media (max-width: 900px) {
-      .pos-main {
-        flex-direction: column;
-      }
-
-      .panel-products,
-      .panel-cart {
-        width: 100%;
-        min-width: 0;
-      }
-
-      .panel-products {
-        border-right: none;
-        border-bottom: 1px solid var(--color-border);
-        max-height: 55%;
-      }
-
-      .panel-cart {
-        max-height: 45%;
-      }
-
-      .product-grid {
-        grid-template-columns: repeat(2, 1fr);
-      }
-
+      .pos-main { flex-direction: column; }
+      .panel-products, .panel-cart { width: 100%; min-width: 0; }
+      .panel-products { border-right: none; border-bottom: 1px solid var(--color-border); max-height: 55%; }
+      .panel-cart { max-height: 45%; }
+      .product-grid { grid-template-columns: repeat(2, 1fr); }
       .status-bar__center { display: none; }
+      .fkeys-footer { flex-wrap: wrap; }
     }
 
-    @media (max-width: 600px) {
-      .product-grid {
-        grid-template-columns: repeat(2, 1fr);
-      }
-
-      .payment-methods {
-        grid-template-columns: repeat(3, 1fr);
-      }
-
-      .status-bar { padding: 0 var(--space-3); }
-      .search-row { padding: var(--space-3); }
-      .categories-row { padding: var(--space-2) var(--space-3); }
+    @media (max-width: 768px) {
+      .fkeys-footer { flex-wrap: wrap; gap: var(--space-1); padding: var(--space-2); }
+      .fkey { padding: var(--space-1) var(--space-2); }
+      .fkey-label { font-size: 10px; }
+      .fkey-key { min-width: 24px; height: 20px; font-size: 10px; }
+      .fkey-sep { display: none; }
     }
 
-    /* =====================================================================
-       UTILITY
-       ===================================================================== */
-
     .sr-only {
-      position: absolute;
-      width: 1px;
-      height: 1px;
-      padding: 0;
-      margin: -1px;
-      overflow: hidden;
-      clip: rect(0, 0, 0, 0);
-      border: 0;
+      position: absolute; width: 1px; height: 1px; padding: 0;
+      margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0;
     }
+
+    /* Add padding at bottom so content isn't hidden by fixed fkeys bar */
+    body { padding-bottom: 50px; }
   </style>
 </head>
 
-<body class="pos-shell themed-scrollbar" id="appBody">
+<body class="pos-shell" id="appBody">
 
   <!-- ================================================================
        STATUS BAR
@@ -1314,28 +1001,16 @@
   <header class="status-bar" role="banner">
     <div class="status-bar__store">
       <span class="status-bar__store-dot"></span>
-      Nexus Autoparts — Suc. Centro
+      <span id="branchName">Nexus Autoparts</span>
     </div>
-
     <div class="status-bar__center">
-      <span id="statusClock">Mar 31, 2026 — 10:42 AM</span>
-      <span>Terminal #3</span>
+      <span id="registerInfo">Caja #--</span>
+      <span id="statusClock"></span>
     </div>
-
     <div class="status-bar__right">
-      <!-- Theme Switcher -->
-      <div class="theme-switcher" role="group" aria-label="Cambiar tema">
-        <button class="theme-btn active" id="btnIndustrial" data-theme-val="industrial" title="Tema Industrial">
-          ⬡ Industrial
-        </button>
-        <button class="theme-btn" id="btnModern" data-theme-val="modern" title="Tema Moderno">
-          ○ Moderno
-        </button>
-      </div>
-
       <div class="status-bar__user" aria-label="Usuario activo">
-        <div class="status-bar__user-avatar" aria-hidden="true">HR</div>
-        <span>Hugo Reyes</span>
+        <div class="status-bar__user-avatar" aria-hidden="true">--</div>
+        <span id="employeeName">Empleado</span>
       </div>
     </div>
   </header>
@@ -1346,248 +1021,445 @@
   <main class="pos-main" role="main">
 
     <!-- ============================================================
-         LEFT — PRODUCT BROWSER
+         LEFT -- PRODUCT BROWSER
          ============================================================ -->
-    <section class="panel-products" aria-label="Catálogo de productos">
-
-      <!-- Search Bar -->
+    <section class="panel-products" aria-label="Catalogo de productos">
       <div class="search-row">
         <div class="search-wrap">
           <svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none"
-            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-            aria-hidden="true">
+            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
             <circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/>
           </svg>
-          <input
-            class="search-input"
-            type="search"
-            id="searchInput"
-            placeholder="Buscar por nombre, OEM#, SKU..."
-            autocomplete="off"
-            spellcheck="false"
-            aria-label="Buscar productos"
-          />
+          <input class="search-input" type="search" id="itemSearch"
+            placeholder="Buscar por nombre, No. parte, codigo..."
+            autocomplete="off" spellcheck="false" aria-label="Buscar productos" />
         </div>
-
-        <button class="btn-scan" id="btnScan" title="Escanear código de barras" aria-label="Escanear código">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
-            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-            aria-hidden="true">
-            <path d="M3 5v2M3 19v-2M5 3h2M19 3h-2M21 5v2M21 19v-2M19 21h-2M5 21h2"/>
-            <line x1="7" y1="8" x2="7" y2="16"/><line x1="10" y1="8" x2="10" y2="16"/>
-            <line x1="13" y1="8" x2="13" y2="16"/><line x1="17" y1="8" x2="17" y2="16"/>
-          </svg>
-        </button>
       </div>
 
-      <!-- Category Buttons -->
-      <div class="categories-row" role="toolbar" aria-label="Categorías de productos">
-        <span class="category-label">Filtrar:</span>
-        <button class="cat-btn active" data-category="all">Todos</button>
-        <button class="cat-btn" data-category="frenos">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-            <circle cx="12" cy="12" r="10" fill="none" stroke="currentColor" stroke-width="2.5"/>
-            <circle cx="12" cy="12" r="4"/>
-          </svg>
-          Frenos
-        </button>
-        <button class="cat-btn" data-category="motor">
-          <svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
-            <rect x="2" y="7" width="20" height="10" rx="2" fill="none" stroke="currentColor" stroke-width="2"/>
-            <line x1="6" y1="7" x2="6" y2="17" stroke="currentColor" stroke-width="1.5"/>
-            <line x1="12" y1="7" x2="12" y2="17" stroke="currentColor" stroke-width="1.5"/>
-            <line x1="18" y1="7" x2="18" y2="17" stroke="currentColor" stroke-width="1.5"/>
-          </svg>
-          Motor
-        </button>
-        <button class="cat-btn" data-category="filtros">Filtros</button>
-        <button class="cat-btn" data-category="aceites">Aceites</button>
-        <button class="cat-btn" data-category="suspension">Suspensión</button>
-        <button class="cat-btn" data-category="electrico">Eléctrico</button>
-      </div>
+      <!-- Search Results Dropdown -->
+      <div id="searchResults" class="product-grid-wrap" style="display:none;"></div>
 
-      <!-- Product Grid -->
-      <div class="product-grid-wrap" id="productGridWrap">
+      <!-- Totals Panel / Product Grid -->
+      <div class="product-grid-wrap" id="totalsPanel">
         <div class="product-grid" id="productGrid" role="list" aria-label="Productos disponibles">
-          <!-- Populated by JS -->
+          <!-- Populated by search -->
         </div>
       </div>
     </section>
 
     <!-- ============================================================
-         RIGHT — CART / TICKET
+         RIGHT -- CART / TICKET
          ============================================================ -->
     <aside class="panel-cart" aria-label="Carrito de venta">
 
       <!-- Cart Header -->
       <div class="cart-header">
         <div class="cart-header__top">
-          <div class="cart-header__sale-id" id="saleId">Venta #1247</div>
+          <div class="cart-header__sale-id">Venta Activa</div>
+          <button class="cost-toggle" id="costToggle" title="Mostrar costo/margen (Admin)" style="display:none;">C/M</button>
           <span class="cart-header__status">Activa</span>
         </div>
-        <div class="customer-row">
+
+        <!-- Customer Search -->
+        <div class="customer-row" id="customerSearchWrap">
           <div class="customer-icon" aria-hidden="true">
             <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/>
-              <circle cx="12" cy="7" r="4"/>
+              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
+            </svg>
+          </div>
+          <div class="customer-info" style="flex:1;position:relative;">
+            <input type="text" id="customerSearch" class="search-input"
+              style="height:34px;font-size:var(--text-body-sm);padding-left:var(--space-3);"
+              placeholder="F2 — Buscar cliente..." autocomplete="off" />
+            <div id="customerAutocomplete" style="display:none;position:absolute;top:100%;left:0;right:0;z-index:100;background:var(--color-bg-elevated);border:1px solid var(--color-border);border-radius:var(--radius-md);max-height:200px;overflow-y:auto;box-shadow:var(--shadow-lg);">
+            </div>
+          </div>
+          <button class="btn-change-customer" onclick="POS.showNewCustomerModal()" aria-label="Nuevo cliente">+ Nuevo</button>
+        </div>
+
+        <!-- Selected Customer Display -->
+        <div id="customerSelected" style="display:none;" class="customer-row">
+          <div class="customer-icon" aria-hidden="true">
+            <svg width="16" height="16" viewBox="0 0 24 24" fill="none"
+              stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+              <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/>
             </svg>
           </div>
           <div class="customer-info">
-            <div class="customer-info__name" id="customerName">Cliente General</div>
-            <div class="customer-info__label">Sin RFC registrado</div>
+            <div class="customer-info__name" id="customerName">--</div>
+            <div class="customer-info__label">
+              <span id="customerTier">P1</span> |
+              <span id="customerCredit">Credito: $0 / $0</span>
+            </div>
+          </div>
+          <button class="btn-change-customer" onclick="POS.clearCustomer()" aria-label="Cambiar cliente">Cambiar</button>
+        </div>
+      </div>
+
+      <!-- Banner Cliente (shown when customer selected) -->
+      <div class="banner-cliente" id="vehicleBanner">
+        <div class="banner-info">
+          <div class="banner-info-item">
+            <div class="banner-info-label">Vehiculo</div>
+            <div class="banner-info-value" id="vehicleInfo">--</div>
+          </div>
+          <div class="banner-info-item">
+            <div class="banner-info-label">Ultima compra</div>
+            <div class="banner-info-value" id="lastPurchaseInfo">--</div>
           </div>
-          <button class="btn-change-customer" id="btnChangeCustomer" aria-label="Cambiar cliente">
-            Cambiar
-          </button>
         </div>
       </div>
 
       <!-- Cart Items -->
-      <div class="cart-items themed-scrollbar" id="cartItems" role="list" aria-label="Artículos en carrito">
-        <!-- Populated by JS -->
+      <div class="cart-items" id="cartItems" role="list" aria-label="Articulos en carrito">
+        <!-- Empty state -->
+        <div id="cartEmpty" class="cart-empty" role="status">
+          <svg width="32" height="32" viewBox="0 0 24 24" fill="none"
+            stroke="currentColor" stroke-width="1.5" opacity="0.4" aria-hidden="true">
+            <circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/>
+            <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
+          </svg>
+          <span>Carrito vacio -- agrega productos con F1</span>
+        </div>
+
+        <!-- Cart table -->
+        <table id="cartTable" style="display:none;width:100%;border-collapse:collapse;font-size:var(--text-body-sm);">
+          <thead>
+            <tr style="border-bottom:1px solid var(--color-border);">
+              <th style="text-align:left;padding:var(--space-2);">#</th>
+              <th style="text-align:left;padding:var(--space-2);">Producto</th>
+              <th style="text-align:center;padding:var(--space-2);">Cant</th>
+              <th style="text-align:right;padding:var(--space-2);">P.Unit</th>
+              <th style="text-align:center;padding:var(--space-2);">Desc%</th>
+              <th style="text-align:right;padding:var(--space-2);">Importe</th>
+              <th id="thCost" style="display:none;text-align:right;padding:var(--space-2);">Costo</th>
+              <th id="thMargin" style="display:none;text-align:center;padding:var(--space-2);">Margen</th>
+              <th style="width:30px;"></th>
+            </tr>
+          </thead>
+          <tbody id="cartBody"></tbody>
+        </table>
+      </div>
+
+      <!-- Margin Summary -->
+      <div class="margin-summary" id="marginSummary">
+        <span>Margen promedio:</span>
+        <span class="margin-summary__value" id="avgMargin">--</span>
       </div>
 
       <!-- Cart Footer -->
       <div class="cart-footer">
-
-        <!-- Totals -->
         <div class="totals-block">
           <div class="totals-row">
             <span class="totals-row__label">Subtotal</span>
-            <span class="totals-row__value" id="subtotalDisplay">$0.00</span>
+            <span class="totals-row__value" id="dispSubtotal">$0.00</span>
+          </div>
+          <div class="totals-row" id="discountRow" style="display:none;">
+            <span class="totals-row__label">Descuento</span>
+            <span class="totals-row__value" id="dispDiscount">$0.00</span>
           </div>
           <div class="totals-row">
             <span class="totals-row__label">IVA (16%)</span>
-            <span class="totals-row__value" id="ivaDisplay">$0.00</span>
+            <span class="totals-row__value" id="dispTax">$0.00</span>
           </div>
           <div class="totals-row totals-row--total">
             <span class="totals-row__label">Total</span>
-            <span class="totals-row__value" id="totalDisplay">$0.00</span>
+            <span class="totals-row__value" id="dispTotal">$0.00</span>
           </div>
         </div>
 
-        <!-- Discount -->
-        <div class="discount-row">
-          <span class="discount-label">Desc.</span>
-          <input
-            type="number"
-            class="discount-input"
-            id="discountInput"
-            placeholder="0.00"
-            min="0"
-            step="0.01"
-            aria-label="Descuento en pesos"
-          />
-          <span class="discount-label">MXN</span>
-        </div>
-
-        <!-- Payment Methods -->
-        <div class="payment-methods" role="radiogroup" aria-label="Forma de pago">
-          <button class="pay-btn selected" data-method="efectivo" aria-pressed="true">
-            <span class="pay-btn__icon">💵</span>
-            <span>Efectivo</span>
-          </button>
-          <button class="pay-btn" data-method="tarjeta" aria-pressed="false">
-            <span class="pay-btn__icon">💳</span>
-            <span>Tarjeta</span>
-          </button>
-          <button class="pay-btn" data-method="transferencia" aria-pressed="false">
-            <span class="pay-btn__icon">📲</span>
-            <span>Transfer.</span>
-          </button>
-        </div>
-
         <!-- COBRAR Button -->
-        <button class="btn-cobrar" id="btnCobrar" aria-label="Procesar cobro">
-          <svg width="20" height="20" viewBox="0 0 24 24" fill="none"
-            stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
-            aria-hidden="true">
-            <line x1="12" y1="1" x2="12" y2="23"/>
-            <path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>
-          </svg>
-          <span id="cobrarLabel">COBRAR $0.00</span>
+        <button class="btn-cobrar" id="btnCobrar" onclick="POS.checkout()" aria-label="Procesar cobro">
+          <span>COBRAR</span>
         </button>
 
         <!-- Secondary Actions -->
         <div class="secondary-actions" role="toolbar" aria-label="Acciones secundarias">
-          <button class="btn-secondary-action" id="btnGuardar" title="Guardar venta">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
-              aria-hidden="true">
-              <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
-              <polyline points="17 21 17 13 7 13 7 21"/>
-              <polyline points="7 3 7 8 15 8"/>
-            </svg>
-            Guardar
-          </button>
-          <button class="btn-secondary-action" id="btnImprimir" title="Imprimir ticket">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
-              aria-hidden="true">
-              <polyline points="6 9 6 2 18 2 18 9"/>
-              <path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/>
-              <rect x="6" y="14" width="12" height="8"/>
-            </svg>
-            Imprimir
-          </button>
-          <button class="btn-secondary-action danger" id="btnCancelar" title="Cancelar venta">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"
-              aria-hidden="true">
-              <line x1="18" y1="6" x2="6" y2="18"/>
-              <line x1="6" y1="6" x2="18" y2="18"/>
-            </svg>
-            Cancelar
-          </button>
-          <button class="btn-secondary-action" id="btnNumpad" title="Abrir teclado numérico">
-            <svg width="12" height="12" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="2" aria-hidden="true">
-              <rect x="3" y="3" width="4" height="4" rx="1"/>
-              <rect x="10" y="3" width="4" height="4" rx="1"/>
-              <rect x="17" y="3" width="4" height="4" rx="1"/>
-              <rect x="3" y="10" width="4" height="4" rx="1"/>
-              <rect x="10" y="10" width="4" height="4" rx="1"/>
-              <rect x="17" y="10" width="4" height="4" rx="1"/>
-              <rect x="3" y="17" width="4" height="4" rx="1"/>
-              <rect x="10" y="17" width="4" height="4" rx="1"/>
-              <rect x="17" y="17" width="4" height="4" rx="1"/>
-            </svg>
-            Teclado
-          </button>
+          <button class="btn-secondary-action" onclick="POS.saveQuotation()" title="Cotizacion (F4)">Cotizar</button>
+          <button class="btn-secondary-action" onclick="POS.showLastSale()" title="Ultima venta (F5)">Ult.Venta</button>
+          <button class="btn-secondary-action danger" id="btnCancelSale" title="Cancelar (Esc)">Cancelar</button>
         </div>
-
-      </div><!-- /.cart-footer -->
+      </div>
     </aside>
-
   </main>
 
   <!-- ================================================================
-       NUMPAD OVERLAY
+       F-KEYS FOOTER BAR
        ================================================================ -->
-  <div class="numpad-overlay" id="numpadOverlay" role="dialog" aria-modal="true"
-    aria-label="Teclado numérico" aria-hidden="true">
-    <div class="numpad-panel">
-      <div class="numpad-header">
-        <span class="numpad-title">Cantidad / Importe</span>
-        <button class="numpad-close" id="numpadClose" aria-label="Cerrar teclado">✕</button>
+  <div class="fkeys-footer" id="fkeysFooter">
+    <div class="fkey" onclick="document.getElementById('itemSearch').focus()" title="Buscar producto">
+      <span class="fkey-key">F1</span><span class="fkey-label">Buscar</span>
+    </div>
+    <div class="fkey" onclick="document.getElementById('customerSearch').focus()" title="Seleccionar cliente">
+      <span class="fkey-key">F2</span><span class="fkey-label">Cliente</span>
+    </div>
+    <div class="fkey highlight" onclick="POS.checkout()" title="Cobrar venta">
+      <span class="fkey-key">F3</span><span class="fkey-label">Cobrar</span>
+    </div>
+    <div class="fkey" onclick="POS.saveQuotation()" title="Cotizacion">
+      <span class="fkey-key">F4</span><span class="fkey-label">Cotizacion</span>
+    </div>
+    <div class="fkey-sep"></div>
+    <div class="fkey" onclick="POS.showLastSale()" title="Ultima venta">
+      <span class="fkey-key">F5</span><span class="fkey-label">Ult.Venta</span>
+    </div>
+    <div class="fkey" onclick="POS.openDrawer()" title="Abrir cajon">
+      <span class="fkey-key">F6</span><span class="fkey-label">Cajon</span>
+    </div>
+    <div class="fkey-sep"></div>
+    <div class="fkey" title="Cantidad +/-">
+      <span class="fkey-key">+/-</span><span class="fkey-label">Cantidad</span>
+    </div>
+    <div class="fkey" title="Descuento">
+      <span class="fkey-key">*</span><span class="fkey-label">Descuento</span>
+    </div>
+    <div class="fkey-sep"></div>
+    <div class="fkey" id="fkeyEsc" title="Cancelar">
+      <span class="fkey-key">Esc</span><span class="fkey-label">Cancelar</span>
+    </div>
+  </div>
+
+  <!-- ================================================================
+       PAYMENT MODAL (modal-pago + calculadora-cambio)
+       ================================================================ -->
+  <div class="modal-overlay" id="paymentModal">
+    <div class="modal-pago">
+      <!-- Header -->
+      <div class="modal-header">
+        <h3>Cobrar Venta</h3>
+        <button class="modal-close" onclick="POS.closePaymentModal()">&#x2715;</button>
       </div>
-      <div class="numpad-display" id="numpadDisplay" aria-live="polite">0</div>
-      <div class="numpad-grid" role="group" aria-label="Teclas numéricas">
-        <button class="numpad-key" data-key="7">7</button>
-        <button class="numpad-key" data-key="8">8</button>
-        <button class="numpad-key" data-key="9">9</button>
-        <button class="numpad-key key-clear" data-key="C">C</button>
-        <button class="numpad-key" data-key="4">4</button>
-        <button class="numpad-key" data-key="5">5</button>
-        <button class="numpad-key" data-key="6">6</button>
-        <button class="numpad-key" data-key="back">⌫</button>
-        <button class="numpad-key" data-key="1">1</button>
-        <button class="numpad-key" data-key="2">2</button>
-        <button class="numpad-key" data-key="3">3</button>
-        <button class="numpad-key key-enter" data-key="ENTER">OK</button>
-        <button class="numpad-key key-0" data-key="0">0</button>
-        <button class="numpad-key" data-key=".">.</button>
+
+      <!-- Total Banner -->
+      <div class="total-banner">
+        <span class="total-label">Total a Cobrar</span>
+        <span class="total-amount" id="modalTotal">$0.00</span>
+      </div>
+
+      <!-- Items Summary -->
+      <div class="items-summary" id="modalSummary">
+        <span id="modalItemCount">0 productos</span>
+        <span>&#x2022;</span>
+        <span id="modalCustomerName">Publico General</span>
+      </div>
+
+      <!-- Payment Tabs -->
+      <div class="pago-tabs">
+        <button class="pago-tab active" data-method="efectivo" onclick="POS.selectPaymentMethod('efectivo', this)">
+          Efectivo
+        </button>
+        <button class="pago-tab" data-method="transferencia" onclick="POS.selectPaymentMethod('transferencia', this)">
+          Transferencia
+        </button>
+        <button class="pago-tab" data-method="tarjeta" onclick="POS.selectPaymentMethod('tarjeta', this)">
+          Tarjeta
+        </button>
+        <button class="pago-tab" data-method="mixto" onclick="POS.selectPaymentMethod('mixto', this)">
+          Mixto
+        </button>
+      </div>
+
+      <!-- TAB: Efectivo -->
+      <div class="tab-content active" id="cashPayment">
+        <div class="form-group">
+          <label class="form-label">Monto recibido</label>
+          <input type="number" class="form-input form-input-lg" id="cashReceived"
+            placeholder="0.00" step="0.01" min="0" oninput="POS.updateChange()" />
+        </div>
+        <div class="quick-amounts" id="quickAmounts">
+          <!-- Populated dynamically -->
+        </div>
+        <div class="cambio-display">
+          <span class="cambio-label">Cambio</span>
+          <span class="cambio-amount positive" id="changeDisplay">$0.00</span>
+        </div>
+      </div>
+
+      <!-- TAB: Transferencia / Tarjeta -->
+      <div class="tab-content" id="refPayment">
+        <div class="form-group">
+          <label class="form-label">Monto</label>
+          <input type="text" class="form-input form-input-lg" id="refAmount" readonly />
+        </div>
+        <div class="form-group">
+          <label class="form-label">Referencia / No. operacion</label>
+          <input type="text" class="form-input" id="paymentRef" placeholder="No. de referencia" />
+        </div>
+        <div class="form-hint">Verificar que el pago se haya recibido antes de confirmar</div>
+      </div>
+
+      <!-- TAB: Mixto -->
+      <div class="tab-content" id="mixedPayment">
+        <div class="mixed-row" style="margin-bottom:var(--space-3);">
+          <div class="form-group">
+            <label class="form-label">Metodo 1</label>
+            <select class="form-input" style="margin-bottom:var(--space-2);">
+              <option value="efectivo">Efectivo</option>
+              <option value="tarjeta">Tarjeta</option>
+              <option value="transferencia">Transferencia</option>
+            </select>
+            <input type="number" class="form-input mixed-amount" placeholder="0.00" step="0.01" oninput="POS.updateMixedTotal()" />
+            <input type="text" class="form-input" placeholder="Referencia (si aplica)" style="margin-top:var(--space-2);" />
+          </div>
+        </div>
+        <div class="mixed-row" style="margin-bottom:var(--space-3);">
+          <div class="form-group">
+            <label class="form-label">Metodo 2</label>
+            <select class="form-input" style="margin-bottom:var(--space-2);">
+              <option value="tarjeta">Tarjeta</option>
+              <option value="efectivo">Efectivo</option>
+              <option value="transferencia">Transferencia</option>
+            </select>
+            <input type="number" class="form-input mixed-amount" placeholder="0.00" step="0.01" oninput="POS.updateMixedTotal()" />
+            <input type="text" class="form-input" placeholder="Referencia (si aplica)" style="margin-top:var(--space-2);" />
+          </div>
+        </div>
+        <div class="split-remaining">
+          <span>Restante:</span>
+          <span class="amount" id="mixedRemaining">$0.00</span>
+        </div>
+      </div>
+
+      <!-- CFDI Checkbox -->
+      <div class="cfdi-check">
+        <input type="checkbox" id="cfdiCheck" />
+        <label for="cfdiCheck">Facturar CFDI</label>
+        <span class="cfdi-hint" id="cfdiHint"></span>
+      </div>
+
+      <!-- Footer -->
+      <div class="modal-footer">
+        <button class="btn btn-ghost" onclick="POS.closePaymentModal()">Cancelar</button>
+        <button class="btn btn-primary btn-lg" id="btnConfirmPayment" onclick="POS.confirmPayment()">Confirmar Pago</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ================================================================
+       CANCEL SALE CONFIRMATION MODAL
+       ================================================================ -->
+  <div class="confirm-overlay" id="overlay-cancelar-venta" onclick="if(event.target===this) closeCancelModal()"></div>
+  <div class="confirm-dialog" id="modal-cancelar-venta">
+    <div class="modal__icon modal__icon--warning">&#x26A0;</div>
+    <div class="modal__title">Cancelar venta?</div>
+    <div class="modal__desc">Se perderan los articulos agregados al ticket actual.</div>
+    <div class="modal__actions">
+      <button class="modal__btn modal__btn--secondary" onclick="closeCancelModal()">No, continuar</button>
+      <button class="modal__btn modal__btn--danger" id="btnConfirmCancel">Si, cancelar</button>
+    </div>
+  </div>
+
+  <!-- ================================================================
+       TICKET PRINT AREA (hidden div for thermal print)
+       ================================================================ -->
+  <div class="ticket-print-area" id="ticketPrintArea">
+    <div class="ticket ticket-80" id="ticketContent">
+      <!-- Populated by JS after successful sale -->
+    </div>
+  </div>
+
+  <!-- ================================================================
+       TICKET PREVIEW MODAL (on-screen after sale)
+       ================================================================ -->
+  <div class="modal-overlay" id="ticketModal">
+    <div class="modal-pago" style="width:380px;">
+      <div class="modal-header">
+        <h3>Ticket de Venta</h3>
+        <button class="modal-close" onclick="POS.closeTicketModal()">&#x2715;</button>
+      </div>
+      <div style="padding:var(--space-4);display:flex;justify-content:center;">
+        <div class="ticket ticket-80" id="ticketPreviewContent">
+          <!-- Populated by JS -->
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-ghost" onclick="POS.closeTicketModal()">Cerrar</button>
+        <button class="btn btn-primary" onclick="POS.printTicket()">Imprimir</button>
+      </div>
+    </div>
+  </div>
+
+  <!-- ================================================================
+       NEW CUSTOMER MODAL
+       ================================================================ -->
+  <div class="modal-overlay" id="newCustomerModal">
+    <div class="modal-pago" style="width:480px;">
+      <div class="modal-header">
+        <h3>Nuevo Cliente</h3>
+        <button class="modal-close" onclick="POS.closeNewCustomerModal()">&#x2715;</button>
+      </div>
+      <div style="padding:var(--space-6);">
+        <div class="form-group">
+          <label class="form-label">Nombre *</label>
+          <input type="text" class="form-input" id="ncName" placeholder="Nombre o Razon Social" />
+        </div>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);">
+          <div class="form-group">
+            <label class="form-label">RFC</label>
+            <input type="text" class="form-input" id="ncRfc" placeholder="XAXX010101000" maxlength="13" />
+          </div>
+          <div class="form-group">
+            <label class="form-label">Telefono</label>
+            <input type="text" class="form-input" id="ncPhone" placeholder="55 1234 5678" />
+          </div>
+        </div>
+        <div class="form-group">
+          <label class="form-label">Razon Social</label>
+          <input type="text" class="form-input" id="ncRazonSocial" placeholder="Razon Social para facturacion" />
+        </div>
+        <div class="form-group">
+          <label class="form-label">Email</label>
+          <input type="email" class="form-input" id="ncEmail" placeholder="correo@ejemplo.com" />
+        </div>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);">
+          <div class="form-group">
+            <label class="form-label">Lista de precios</label>
+            <select class="form-input" id="ncPriceTier">
+              <option value="1">P1 Mostrador</option>
+              <option value="2">P2 Taller</option>
+              <option value="3">P3 Mayoreo</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label class="form-label">Limite de credito</label>
+            <input type="number" class="form-input" id="ncCreditLimit" placeholder="0.00" step="0.01" />
+          </div>
+        </div>
+        <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);">
+          <div class="form-group">
+            <label class="form-label">Regimen Fiscal</label>
+            <select class="form-input" id="ncRegimenFiscal">
+              <option value="">-- Seleccionar --</option>
+              <option value="601">601 - General de Ley PM</option>
+              <option value="612">612 - Personas Fisicas</option>
+              <option value="621">621 - Inc. Fiscal</option>
+              <option value="626">626 - RESICO</option>
+            </select>
+          </div>
+          <div class="form-group">
+            <label class="form-label">Uso CFDI</label>
+            <select class="form-input" id="ncUsoCfdi">
+              <option value="G03">G03 - Gastos en general</option>
+              <option value="G01">G01 - Adq. de mercancias</option>
+              <option value="P01">P01 - Por definir</option>
+            </select>
+          </div>
+        </div>
+
+        <div style="margin-top:var(--space-4);border-top:1px solid var(--color-border);padding-top:var(--space-4);">
+          <div class="form-label" style="margin-bottom:var(--space-3);">Vehiculo (opcional)</div>
+          <div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);">
+            <div class="form-group"><input type="text" class="form-input" id="ncVehMake" placeholder="Marca" /></div>
+            <div class="form-group"><input type="text" class="form-input" id="ncVehModel" placeholder="Modelo" /></div>
+            <div class="form-group"><input type="text" class="form-input" id="ncVehYear" placeholder="Ano" /></div>
+            <div class="form-group"><input type="text" class="form-input" id="ncVehPlates" placeholder="Placas" /></div>
+          </div>
+        </div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-ghost" onclick="POS.closeNewCustomerModal()">Cancelar</button>
+        <button class="btn btn-primary" onclick="POS.saveNewCustomer()">Guardar Cliente</button>
       </div>
     </div>
   </div>
@@ -1597,500 +1469,60 @@
        ================================================================ -->
   <div class="toast-container" id="toastContainer" aria-live="assertive" aria-atomic="true"></div>
 
-
   <!-- ================================================================
        JAVASCRIPT
        ================================================================ -->
+  <script src="/pos/static/js/pos.js"></script>
+
   <script>
-    'use strict';
+    // Cancel sale button wiring
+    document.getElementById('btnCancelSale').addEventListener('click', function() {
+      document.getElementById('overlay-cancelar-venta').classList.add('active');
+      document.getElementById('modal-cancelar-venta').classList.add('active');
+      document.body.style.overflow = 'hidden';
+    });
 
-    /* ------------------------------------------------------------------
-       DATA — Product catalogue
-    ------------------------------------------------------------------ */
-    const PRODUCTS = [
-      { id: 1,  name: 'Balatas Delanteras',     oem: 'TRW-GDB1246',   price: 485.00,  stock: 12, category: 'frenos',      cat_label: 'Frenos'    },
-      { id: 2,  name: 'Disco de Freno Ventilado',oem: 'BREMBO-09A388X',price: 1290.00, stock: 4,  category: 'frenos',      cat_label: 'Frenos'    },
-      { id: 3,  name: 'Cilindro de Rueda',       oem: 'LPR-4502',      price: 320.00,  stock: 7,  category: 'frenos',      cat_label: 'Frenos'    },
-      { id: 4,  name: 'Bujía Iridium NGK',       oem: 'NGK-ILKAR7L11', price: 185.00,  stock: 48, category: 'motor',       cat_label: 'Motor'     },
-      { id: 5,  name: 'Empaque de Culata',       oem: 'VICTOR-R10154', price: 890.00,  stock: 2,  category: 'motor',       cat_label: 'Motor'     },
-      { id: 6,  name: 'Correa de Distribución',  oem: 'GATES-T236',    price: 650.00,  stock: 9,  category: 'motor',       cat_label: 'Motor'     },
-      { id: 7,  name: 'Filtro de Aire Fram',     oem: 'FRAM-CA10755',  price: 195.00,  stock: 23, category: 'filtros',     cat_label: 'Filtros'   },
-      { id: 8,  name: 'Filtro de Aceite Bosch',  oem: 'BOSCH-0986AF10',price: 145.00,  stock: 31, category: 'filtros',     cat_label: 'Filtros'   },
-      { id: 9,  name: 'Aceite Mobil 5W-30 1L',   oem: 'MOBIL-5W30-1L', price: 210.00,  stock: 64, category: 'aceites',     cat_label: 'Aceites'   },
-      { id: 10, name: 'Aceite Pennzoil 10W-40',  oem: 'PZ-10W40-1L',   price: 175.00,  stock: 50, category: 'aceites',     cat_label: 'Aceites'   },
-      { id: 11, name: 'Amortiguador Delantero',  oem: 'KYB-339123',    price: 1450.00, stock: 3,  category: 'suspension',  cat_label: 'Suspensión'},
-      { id: 12, name: 'Rótula de Dirección',     oem: 'MOOG-K9648',    price: 560.00,  stock: 6,  category: 'suspension',  cat_label: 'Suspensión'},
-      { id: 13, name: 'Bobina de Encendido',     oem: 'DELPHI-GN10570',price: 780.00,  stock: 5,  category: 'electrico',   cat_label: 'Eléctrico' },
-      { id: 14, name: 'Sensor de Oxígeno Denso', oem: 'DENSO-234-4127',price: 920.00,  stock: 4,  category: 'electrico',   cat_label: 'Eléctrico' },
-    ];
+    document.getElementById('btnConfirmCancel').addEventListener('click', function() {
+      closeCancelModal();
+      // Clear cart via POS module
+      if (typeof POS !== 'undefined') {
+        // Clear each item
+        const tbody = document.getElementById('cartBody');
+        while (tbody && tbody.firstChild) {
+          POS.removeFromCart(0);
+        }
+        POS.clearCustomer();
+      }
+    });
 
-    /* ------------------------------------------------------------------
-       STATE
-    ------------------------------------------------------------------ */
-    const state = {
-      theme:          'industrial',
-      cart:           [],           // { productId, qty }
-      selectedMethod: 'efectivo',
-      discount:       0,
-      activeCategory: 'all',
-      searchQuery:    '',
-      numpadValue:    '0',
-      saleNumber:     1247,
-    };
-
-    // Seed cart with 3 demo items
-    state.cart = [
-      { productId: 4,  qty: 4 },
-      { productId: 7,  qty: 2 },
-      { productId: 11, qty: 1 },
-    ];
-
-    /* ------------------------------------------------------------------
-       DOM REFS
-    ------------------------------------------------------------------ */
-    const $html           = document.documentElement;
-    const $body           = document.getElementById('appBody');
-    const $btnIndustrial  = document.getElementById('btnIndustrial');
-    const $btnModern      = document.getElementById('btnModern');
-    const $searchInput    = document.getElementById('searchInput');
-    const $productGrid    = document.getElementById('productGrid');
-    const $cartItems      = document.getElementById('cartItems');
-    const $subtotal       = document.getElementById('subtotalDisplay');
-    const $iva            = document.getElementById('ivaDisplay');
-    const $total          = document.getElementById('totalDisplay');
-    const $cobrarLabel    = document.getElementById('cobrarLabel');
-    const $btnCobrar      = document.getElementById('btnCobrar');
-    const $discountInput  = document.getElementById('discountInput');
-    const $numpadOverlay  = document.getElementById('numpadOverlay');
-    const $numpadDisplay  = document.getElementById('numpadDisplay');
-    const $numpadClose    = document.getElementById('numpadClose');
-    const $statusClock    = document.getElementById('statusClock');
-    const $toastContainer = document.getElementById('toastContainer');
-
-    /* ------------------------------------------------------------------
-       FORMATTING HELPERS
-    ------------------------------------------------------------------ */
-    const fmt = (n) =>
-      new Intl.NumberFormat('es-MX', { style: 'currency', currency: 'MXN' }).format(n);
-
-    /* ------------------------------------------------------------------
-       THEME SWITCHING
-    ------------------------------------------------------------------ */
-    function setTheme(theme) {
-      state.theme = theme;
-      $html.setAttribute('data-theme', theme);
-
-      // dot-grid class on body for modern theme
-      $body.classList.toggle('bg-dot-grid', theme === 'modern');
-
-      // update buttons
-      $btnIndustrial.classList.toggle('active', theme === 'industrial');
-      $btnModern.classList.toggle('active', theme === 'modern');
-
-      // update aria-pressed
-      $btnIndustrial.setAttribute('aria-pressed', theme === 'industrial');
-      $btnModern.setAttribute('aria-pressed', theme === 'modern');
-
-      showToast(theme === 'industrial' ? 'Tema Industrial activado' : 'Tema Moderno activado');
+    function closeCancelModal() {
+      const overlay = document.getElementById('overlay-cancelar-venta');
+      const dialog = document.getElementById('modal-cancelar-venta');
+      overlay.classList.add('closing');
+      dialog.classList.add('closing');
+      setTimeout(() => {
+        overlay.classList.remove('active', 'closing');
+        dialog.classList.remove('active', 'closing');
+        document.body.style.overflow = '';
+      }, 200);
     }
 
-    $btnIndustrial.addEventListener('click', () => setTheme('industrial'));
-    $btnModern.addEventListener('click',     () => setTheme('modern'));
+    // Cost toggle (show only if permitted)
+    document.getElementById('costToggle').addEventListener('click', function() {
+      document.body.classList.toggle('show-cost-columns');
+      this.classList.toggle('active');
+    });
 
-    /* ------------------------------------------------------------------
-       CLOCK
-    ------------------------------------------------------------------ */
+    // Clock
     function updateClock() {
       const now = new Date();
       const opts = { year: 'numeric', month: 'short', day: 'numeric',
                      hour: '2-digit', minute: '2-digit', hour12: true };
-      $statusClock.textContent = now.toLocaleString('es-MX', opts);
+      const el = document.getElementById('statusClock');
+      if (el) el.textContent = now.toLocaleString('es-MX', opts);
     }
     updateClock();
-    setInterval(updateClock, 30_000);
-
-    /* ------------------------------------------------------------------
-       PRODUCT GRID RENDERING
-    ------------------------------------------------------------------ */
-    function stockClass(stock) {
-      if (stock === 0) return 'out';
-      if (stock <= 3)  return 'low';
-      return '';
-    }
-
-    function stockText(stock) {
-      if (stock === 0) return 'Sin stock';
-      if (stock <= 3)  return `¡Solo ${stock}!`;
-      return `${stock} en stock`;
-    }
-
-    function renderProducts() {
-      const q   = state.searchQuery.toLowerCase().trim();
-      const cat = state.activeCategory;
-
-      const filtered = PRODUCTS.filter(p => {
-        const matchCat    = cat === 'all' || p.category === cat;
-        const matchSearch = !q ||
-          p.name.toLowerCase().includes(q) ||
-          p.oem.toLowerCase().includes(q);
-        return matchCat && matchSearch;
-      });
-
-      $productGrid.innerHTML = '';
-
-      if (filtered.length === 0) {
-        $productGrid.innerHTML = `
-          <div style="grid-column: 1/-1; padding: 2rem; text-align: center;
-            color: var(--color-text-muted); font-size: var(--text-body-sm);">
-            No se encontraron productos
-          </div>`;
-        return;
-      }
-
-      filtered.forEach(p => {
-        const card = document.createElement('div');
-        card.className = 'product-card';
-        card.setAttribute('role', 'listitem');
-        card.dataset.productId = p.id;
-
-        const sc = stockClass(p.stock);
-        card.innerHTML = `
-          <div class="product-card__category">${p.cat_label}</div>
-          <div class="product-card__name">${p.name}</div>
-          <div class="product-card__oem">OEM# ${p.oem}</div>
-          <div class="product-card__footer">
-            <div>
-              <div class="product-card__price">${fmt(p.price)}</div>
-              <div class="product-card__stock ${sc}">${stockText(p.stock)}</div>
-            </div>
-            <button
-              class="product-card__add"
-              data-product-id="${p.id}"
-              aria-label="Agregar ${p.name} al carrito"
-              ${p.stock === 0 ? 'disabled' : ''}
-            >+</button>
-          </div>`;
-
-        card.querySelector('.product-card__add').addEventListener('click', e => {
-          e.stopPropagation();
-          addToCart(p.id);
-          card.classList.remove('added');
-          // force reflow
-          void card.offsetWidth;
-          card.classList.add('added');
-        });
-
-        card.addEventListener('click', () => addToCart(p.id));
-        $productGrid.appendChild(card);
-      });
-    }
-
-    /* ------------------------------------------------------------------
-       CART LOGIC
-    ------------------------------------------------------------------ */
-    function getProduct(id) {
-      return PRODUCTS.find(p => p.id === id);
-    }
-
-    function addToCart(productId) {
-      const product = getProduct(productId);
-      if (!product || product.stock === 0) return;
-
-      const existing = state.cart.find(i => i.productId === productId);
-      if (existing) {
-        existing.qty = Math.min(existing.qty + 1, product.stock);
-      } else {
-        state.cart.push({ productId, qty: 1 });
-      }
-
-      renderCart();
-      showToast(`${product.name} agregado`);
-    }
-
-    function removeFromCart(productId) {
-      state.cart = state.cart.filter(i => i.productId !== productId);
-      renderCart();
-    }
-
-    function updateQty(productId, delta) {
-      const item    = state.cart.find(i => i.productId === productId);
-      const product = getProduct(productId);
-      if (!item || !product) return;
-
-      item.qty += delta;
-      if (item.qty <= 0) {
-        removeFromCart(productId);
-      } else {
-        item.qty = Math.min(item.qty, product.stock);
-        renderCart();
-      }
-    }
-
-    function calcTotals() {
-      const subtotal = state.cart.reduce((acc, item) => {
-        const p = getProduct(item.productId);
-        return acc + (p ? p.price * item.qty : 0);
-      }, 0);
-      const discount  = Math.min(state.discount, subtotal);
-      const subtotalNet = subtotal - discount;
-      const iva       = subtotalNet * 0.16;
-      const total     = subtotalNet + iva;
-      return { subtotal, discount, subtotalNet, iva, total };
-    }
-
-    function renderCart() {
-      const { subtotal, iva, total } = calcTotals();
-
-      // render items
-      if (state.cart.length === 0) {
-        $cartItems.innerHTML = `
-          <div class="cart-empty" role="status">
-            <svg width="32" height="32" viewBox="0 0 24 24" fill="none"
-              stroke="currentColor" stroke-width="1.5" opacity="0.4" aria-hidden="true">
-              <circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/>
-              <path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/>
-            </svg>
-            <span>Carrito vacío — agrega productos</span>
-          </div>`;
-      } else {
-        $cartItems.innerHTML = state.cart.map(item => {
-          const p         = getProduct(item.productId);
-          if (!p) return '';
-          const lineTotal = p.price * item.qty;
-          return `
-            <div class="cart-item" role="listitem" data-product-id="${p.id}">
-              <div class="cart-item__qty-ctrl">
-                <button class="qty-btn qty-minus" data-id="${p.id}" aria-label="Quitar uno de ${p.name}">−</button>
-                <span class="qty-display" aria-label="Cantidad: ${item.qty}">${item.qty}</span>
-                <button class="qty-btn qty-plus" data-id="${p.id}" aria-label="Agregar uno más de ${p.name}">+</button>
-              </div>
-              <div class="cart-item__info">
-                <div class="cart-item__name" title="${p.name}">${p.name}</div>
-                <div class="cart-item__unit">${fmt(p.price)} c/u</div>
-              </div>
-              <div class="cart-item__total">${fmt(lineTotal)}</div>
-              <button class="cart-item__remove" data-id="${p.id}" aria-label="Eliminar ${p.name} del carrito">✕</button>
-            </div>`;
-        }).join('');
-      }
-
-      // wire cart item events
-      $cartItems.querySelectorAll('.qty-minus').forEach(btn =>
-        btn.addEventListener('click', () => updateQty(+btn.dataset.id, -1)));
-      $cartItems.querySelectorAll('.qty-plus').forEach(btn =>
-        btn.addEventListener('click', () => updateQty(+btn.dataset.id, +1)));
-      $cartItems.querySelectorAll('.cart-item__remove').forEach(btn =>
-        btn.addEventListener('click', () => removeFromCart(+btn.dataset.id)));
-
-      // update totals display
-      $subtotal.textContent = fmt(subtotal);
-      $iva.textContent      = fmt(iva);
-      $total.textContent    = fmt(total);
-      $cobrarLabel.textContent = `COBRAR ${fmt(total)}`;
-
-      // disable cobrar if cart is empty
-      $btnCobrar.disabled = state.cart.length === 0;
-    }
-
-    /* ------------------------------------------------------------------
-       DISCOUNT INPUT
-    ------------------------------------------------------------------ */
-    $discountInput.addEventListener('input', () => {
-      state.discount = parseFloat($discountInput.value) || 0;
-      renderCart();
-    });
-
-    /* ------------------------------------------------------------------
-       CATEGORY FILTERS
-    ------------------------------------------------------------------ */
-    document.querySelectorAll('.cat-btn').forEach(btn => {
-      btn.addEventListener('click', () => {
-        state.activeCategory = btn.dataset.category;
-        document.querySelectorAll('.cat-btn').forEach(b => {
-          b.classList.remove('active');
-          b.removeAttribute('aria-current');
-        });
-        btn.classList.add('active');
-        btn.setAttribute('aria-current', 'true');
-        renderProducts();
-      });
-    });
-
-    /* ------------------------------------------------------------------
-       SEARCH
-    ------------------------------------------------------------------ */
-    $searchInput.addEventListener('input', () => {
-      state.searchQuery = $searchInput.value;
-      renderProducts();
-    });
-
-    /* ------------------------------------------------------------------
-       PAYMENT METHODS
-    ------------------------------------------------------------------ */
-    document.querySelectorAll('.pay-btn').forEach(btn => {
-      btn.addEventListener('click', () => {
-        state.selectedMethod = btn.dataset.method;
-        document.querySelectorAll('.pay-btn').forEach(b => {
-          b.classList.remove('selected');
-          b.setAttribute('aria-pressed', 'false');
-        });
-        btn.classList.add('selected');
-        btn.setAttribute('aria-pressed', 'true');
-      });
-    });
-
-    /* ------------------------------------------------------------------
-       COBRAR
-    ------------------------------------------------------------------ */
-    $btnCobrar.addEventListener('click', () => {
-      const { total } = calcTotals();
-      if (state.cart.length === 0) return;
-      const method = {
-        efectivo:      'Efectivo',
-        tarjeta:       'Tarjeta',
-        transferencia: 'Transferencia',
-      }[state.selectedMethod];
-      showToast(`✓ Venta #${state.saleNumber} completada — ${method} ${fmt(total)}`);
-      // Simulate new sale
-      setTimeout(() => {
-        state.saleNumber++;
-        state.cart    = [];
-        state.discount = 0;
-        $discountInput.value = '';
-        document.getElementById('saleId').textContent = `Venta #${state.saleNumber}`;
-        renderCart();
-      }, 800);
-    });
-
-    /* ------------------------------------------------------------------
-       SECONDARY ACTIONS
-    ------------------------------------------------------------------ */
-    document.getElementById('btnGuardar').addEventListener('click', () => {
-      showToast('Venta guardada como pendiente');
-    });
-
-    document.getElementById('btnImprimir').addEventListener('click', () => {
-      showToast('Enviando a impresora...');
-    });
-
-    document.getElementById('btnCancelar').addEventListener('click', () => {
-      if (state.cart.length === 0) return;
-      if (confirm('¿Cancelar la venta actual? Se perderán los artículos en el carrito.')) {
-        state.cart     = [];
-        state.discount = 0;
-        $discountInput.value = '';
-        renderCart();
-        showToast('Venta cancelada');
-      }
-    });
-
-    document.getElementById('btnScan').addEventListener('click', () => {
-      showToast('Listo para escanear...');
-      $searchInput.focus();
-    });
-
-    document.getElementById('btnChangeCustomer').addEventListener('click', () => {
-      const name = prompt('Nombre del cliente:', 'Cliente General');
-      if (name && name.trim()) {
-        document.getElementById('customerName').textContent = name.trim();
-        showToast(`Cliente: ${name.trim()}`);
-      }
-    });
-
-    /* ------------------------------------------------------------------
-       NUMPAD OVERLAY
-    ------------------------------------------------------------------ */
-    function openNumpad() {
-      state.numpadValue = '0';
-      $numpadDisplay.textContent = '0';
-      $numpadOverlay.classList.add('visible');
-      $numpadOverlay.setAttribute('aria-hidden', 'false');
-    }
-
-    function closeNumpad() {
-      $numpadOverlay.classList.remove('visible');
-      $numpadOverlay.setAttribute('aria-hidden', 'true');
-    }
-
-    document.getElementById('btnNumpad').addEventListener('click', openNumpad);
-    $numpadClose.addEventListener('click', closeNumpad);
-
-    $numpadOverlay.addEventListener('click', e => {
-      if (e.target === $numpadOverlay) closeNumpad();
-    });
-
-    document.querySelectorAll('.numpad-key').forEach(key => {
-      key.addEventListener('click', () => {
-        const k = key.dataset.key;
-        if (k === 'C') {
-          state.numpadValue = '0';
-        } else if (k === 'back') {
-          state.numpadValue = state.numpadValue.length > 1
-            ? state.numpadValue.slice(0, -1)
-            : '0';
-        } else if (k === 'ENTER') {
-          const v = parseFloat(state.numpadValue);
-          if (!isNaN(v)) {
-            $discountInput.value = v.toFixed(2);
-            state.discount = v;
-            renderCart();
-            showToast(`Descuento aplicado: ${fmt(v)}`);
-          }
-          closeNumpad();
-          return;
-        } else if (k === '.') {
-          if (!state.numpadValue.includes('.')) {
-            state.numpadValue += '.';
-          }
-          return;
-        } else {
-          state.numpadValue = state.numpadValue === '0' ? k : state.numpadValue + k;
-        }
-        // max 8 chars
-        if (state.numpadValue.replace('.', '').length > 8) return;
-        $numpadDisplay.textContent = state.numpadValue;
-      });
-    });
-
-    /* ------------------------------------------------------------------
-       TOAST
-    ------------------------------------------------------------------ */
-    function showToast(msg) {
-      const el = document.createElement('div');
-      el.className = 'toast';
-      el.textContent = msg;
-      $toastContainer.appendChild(el);
-      setTimeout(() => el.remove(), 2100);
-    }
-
-    /* ------------------------------------------------------------------
-       KEYBOARD SHORTCUTS
-    ------------------------------------------------------------------ */
-    document.addEventListener('keydown', e => {
-      // Escape — close numpad
-      if (e.key === 'Escape' && $numpadOverlay.classList.contains('visible')) {
-        closeNumpad();
-        return;
-      }
-      // F2 — focus search
-      if (e.key === 'F2') {
-        e.preventDefault();
-        $searchInput.focus();
-        $searchInput.select();
-      }
-      // F5 — toggle theme
-      if (e.key === 'F5') {
-        e.preventDefault();
-        setTheme(state.theme === 'industrial' ? 'modern' : 'industrial');
-      }
-    });
-
-    /* ------------------------------------------------------------------
-       INITIAL RENDER
-    ------------------------------------------------------------------ */
-    renderProducts();
-    renderCart();
-    setTheme('industrial');
+    setInterval(updateClock, 30000);
   </script>
 
 </body>