feat(pos): add Cut Z (close register) UI flow

- Add 'Corte Z' button in secondary actions panel
- Add modal showing register summary before closing:
  - opening amount, total sales, cash sales, change given
  - cash movements in/out, cancellations, expected cash
  - payment method breakdown and movement detail list
- loadCutX() fetches current register summary (read-only)
- confirmCutZ() calls POST /pos/api/register/cut-z with counted amount
- Auto-fills closing amount with expected cash
- Shows toast with difference after closing
- Resets register state to 'Sin caja abierta' after close
- Bump pos.css and pos.js cache-bust to v=3

pos/static/js/pos.js

@@ -162,6 +162,78 @@ const POS = (() => {
         }
     }
 
+    // ─── Cut X / Z (Close Register) ──────
+    function showCutZModal() {
+        document.getElementById('cutZModal').classList.add('open');
+        document.getElementById('cutZResult').innerHTML = '';
+        loadCutX();
+    }
+    function closeCutZModal() {
+        document.getElementById('cutZModal').classList.remove('open');
+        document.getElementById('cutZResult').innerHTML = '';
+    }
+    async function loadCutX() {
+        const el = document.getElementById('cutZSummary');
+        try {
+            const data = await api('/pos/api/register/cut-x');
+            if (data.error) {
+                el.innerHTML = '<p style="color:var(--color-error);">' + data.error + '</p>';
+                return;
+            }
+            let html = '<div style="display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3);font-size:var(--text-body-sm);">';
+            html += '<div><span style="color:var(--color-text-muted);">Efectivo inicial</span><br/><strong>$' + fmt(data.opening_amount) + '</strong></div>';
+            html += '<div><span style="color:var(--color-text-muted);">Ventas totales</span><br/><strong>$' + fmt(data.total_sales) + '</strong> (' + data.total_sales_count + ')</div>';
+            html += '<div><span style="color:var(--color-text-muted);">Efectivo en ventas</span><br/><strong>$' + fmt(data.cash_from_sales) + '</strong></div>';
+            html += '<div><span style="color:var(--color-text-muted);">Cambio entregado</span><br/><strong>-$' + fmt(data.change_given) + '</strong></div>';
+            html += '<div><span style="color:var(--color-text-muted);">Entradas de efectivo</span><br/><strong>+$' + fmt(data.cash_movements_in) + '</strong></div>';
+            html += '<div><span style="color:var(--color-text-muted);">Salidas de efectivo</span><br/><strong>-$' + fmt(data.cash_movements_out) + '</strong></div>';
+            html += '<div><span style="color:var(--color-text-muted);">Cancelaciones</span><br/><strong>' + data.cancelled_count + ' ($' + fmt(data.cancelled_amount) + ')</strong></div>';
+            html += '<div><span style="color:var(--color-text-muted);">Efectivo esperado</span><br/><strong style="color:var(--color-accent);font-size:1.1em;">$' + fmt(data.expected_cash) + '</strong></div>';
+            html += '</div>';
+            if (data.sales_by_method && Object.keys(data.sales_by_method).length) {
+                html += '<div style="margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-border);">';
+                html += '<span style="color:var(--color-text-muted);font-size:var(--text-caption);">Por metodo de pago:</span><br/>';
+                for (const [method, info] of Object.entries(data.sales_by_method)) {
+                    html += '<span style="font-size:var(--text-body-sm);margin-right:var(--space-3);">' + method + ': $' + fmt(info.amount) + ' (' + info.count + ')</span>';
+                }
+                html += '</div>';
+            }
+            if (data.movement_detail && data.movement_detail.length) {
+                html += '<div style="margin-top:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-border);">';
+                html += '<span style="color:var(--color-text-muted);font-size:var(--text-caption);">Movimientos de caja:</span><br/>';
+                data.movement_detail.forEach(function(m) {
+                    html += '<div style="font-size:var(--text-body-sm);">' + m.type + ' $' + fmt(m.amount) + ' — ' + (m.reason || '') + '</div>';
+                });
+                html += '</div>';
+            }
+            el.innerHTML = html;
+            document.getElementById('cutZClosingAmount').value = data.expected_cash.toFixed(2);
+        } catch (e) {
+            el.innerHTML = '<p style="color:var(--color-error);">Error cargando resumen</p>';
+        }
+    }
+    async function confirmCutZ() {
+        const amount = parseFloat(document.getElementById('cutZClosingAmount').value) || 0;
+        try {
+            const data = await api('/pos/api/register/cut-z', {
+                method: 'POST',
+                body: JSON.stringify({ closing_amount: amount })
+            });
+            if (data.error) {
+                document.getElementById('cutZResult').innerHTML = '<span style="color:var(--color-error);">' + data.error + '</span>';
+                return;
+            }
+            const diffColor = data.difference > 0 ? 'var(--color-success)' : (data.difference < 0 ? 'var(--color-error)' : 'var(--color-text-muted)');
+            document.getElementById('cutZResult').innerHTML = '<span style="color:var(--color-success);">Caja cerrada correctamente</span>';
+            document.getElementById('registerInfo').innerHTML = '<span style="color:var(--color-text-muted);" onclick="POS.showOpenRegisterModal()">Sin caja abierta</span>';
+            currentRegister = null;
+            closeCutZModal();
+            showToast('Corte Z completado. Diferencia: $' + data.difference.toFixed(2));
+        } catch (e) {
+            document.getElementById('cutZResult').innerHTML = '<span style="color:var(--color-error);">Error de red</span>';
+        }
+    }
+
     // ─── Cart ────────────────────────────
     function addToCart(item) {
         const existing = cart.find(c => c.inventory_id === item.inventory_id);
@@ -1195,5 +1267,6 @@ const POS = (() => {
         showTicket, closeTicketModal, printTicket,
         connectThermal, thermalPrint,
         showOpenRegisterModal, closeOpenRegisterModal, openRegister,
+        showCutZModal, closeCutZModal, loadCutX, confirmCutZ,
     };
 })();

pos/templates/pos.html

@@ -14,7 +14,7 @@
   <meta name="theme-color" content="#F5A623" />
   <script src="/pos/static/js/native-bridge.js" defer></script>
 
-  <link rel="stylesheet" href="/pos/static/css/pos.css?v=2">
+  <link rel="stylesheet" href="/pos/static/css/pos.css?v=3">
 </head>
 
 <body class="pos-shell" id="appBody">
@@ -202,6 +202,7 @@
         <div class="secondary-actions" role="toolbar" aria-label="Acciones secundarias">
           <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" onclick="POS.showCutZModal()" title="Corte Z - Cerrar caja">Corte Z</button>
           <button class="btn-secondary-action danger" id="btnCancelSale" title="Cancelar (Esc)">Cancelar</button>
         </div>
       </div>
@@ -490,6 +491,35 @@
     </div>
   </div>
 
+  <!-- ================================================================
+       CUT Z MODAL (Cerrar Caja)
+       ================================================================ -->
+  <div class="modal-overlay" id="cutZModal">
+    <div class="modal-pago" style="width:520px;max-height:90vh;overflow-y:auto;">
+      <div class="modal-header">
+        <h3>Corte Z — Cerrar Caja</h3>
+        <button class="modal-close" onclick="POS.closeCutZModal()">&#x2715;</button>
+      </div>
+      <div style="padding:var(--space-6);">
+        <div id="cutZSummary" style="margin-bottom:var(--space-4);">
+          <p style="color:var(--color-text-muted);font-size:var(--text-body-sm);">Cargando resumen...</p>
+        </div>
+        <div style="border-top:1px solid var(--color-border);padding-top:var(--space-4);">
+          <div class="form-group">
+            <label class="form-label">Efectivo contado en caja *</label>
+            <input type="number" class="form-input" id="cutZClosingAmount" value="0" min="0" step="0.01" />
+          </div>
+        </div>
+        <div id="cutZResult" style="min-height:1.5em;font-size:var(--text-body-sm);margin-top:var(--space-3);"></div>
+      </div>
+      <div class="modal-footer">
+        <button class="btn btn-ghost" onclick="POS.closeCutZModal()">Cancelar</button>
+        <button class="btn btn-secondary" onclick="POS.loadCutX()">Ver Resumen (Corte X)</button>
+        <button class="btn btn-primary" onclick="POS.confirmCutZ()">Cerrar Caja</button>
+      </div>
+    </div>
+  </div>
+
   <!-- ================================================================
        OPEN REGISTER MODAL
        ================================================================ -->
@@ -533,7 +563,7 @@
   <script src="/pos/static/js/app-init.js" defer></script>
   <script src="/pos/static/js/push.js" defer></script>
   <script src="/pos/static/js/printer.js" defer></script>
-  <script src="/pos/static/js/pos.js?v=2" defer></script>
+  <script src="/pos/static/js/pos.js?v=3" defer></script>
 
   <script>
     // Cancel sale button wiring