diff --git a/src/index.html b/src/index.html
index b598d71..2593bde 100644
--- a/src/index.html
+++ b/src/index.html
@@ -8,19 +8,20 @@
     /* ─── Reset & Base ─────────────────────────────────────────────────── */
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     :root {
-      --bg: #0d0d0d;
-      --surface: #181818;
-      --surface2: #242424;
-      --border: #333;
-      --text: #e0e0e0;
-      --muted: #888;
-      --accent: #e63946;
-      --accent2: #f4a261;
-      --success: #2a9d8f;
-      --warning: #e9c46a;
-      --danger: #e63946;
-      --radius: 8px;
-      --font: 'Segoe UI', system-ui, sans-serif;
+      --red: #c0272d;
+      --red-dark: #9b1b1b;
+      --red-light: #fdf2f2;
+      --red-row: #fde8e8;
+      --bg: #ffffff;
+      --surface: #f7f7f7;
+      --surface2: #f0f0f0;
+      --border: #e0e0e0;
+      --text: #1a1a1a;
+      --muted: #777;
+      --green: #2e7d32;
+      --orange: #e65100;
+      --radius: 6px;
+      --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
     }
     html, body { height: 100%; }
     body {
@@ -29,500 +30,643 @@
       color: var(--text);
       display: flex;
       flex-direction: column;
-      overflow: hidden;
+      min-height: 100vh;
     }
 
-    /* ─── Header ──────────────────────────────────────────────────────── */
-    header {
-      display: flex;
-      align-items: center;
-      gap: 12px;
-      padding: 10px 16px;
-      background: var(--surface);
-      border-bottom: 1px solid var(--border);
-      flex-shrink: 0;
-    }
-    header .logo {
-      font-size: 1.1rem;
-      font-weight: 700;
-      color: var(--accent);
-    }
-    header .subtitle { font-size: 0.8rem; color: var(--muted); }
-    .header-spacer { flex: 1; }
-    .sync-badge {
-      font-size: 0.7rem;
-      padding: 3px 8px;
-      border-radius: 12px;
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      color: var(--muted);
-    }
-    .sync-badge.synced { border-color: var(--success); color: var(--success); }
-    .sync-badge.error { border-color: var(--danger); color: var(--danger); }
-
-    /* ─── Toolbar ──────────────────────────────────────────────────────── */
-    .toolbar {
-      display: flex;
-      gap: 8px;
-      padding: 8px 16px;
-      background: var(--surface);
-      border-bottom: 1px solid var(--border);
-      flex-shrink: 0;
-      flex-wrap: wrap;
-    }
-    .toolbar select, .toolbar input {
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      color: var(--text);
-      border-radius: var(--radius);
-      padding: 5px 10px;
-      font-size: 0.85rem;
-    }
-    .toolbar button {
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      color: var(--text);
-      border-radius: var(--radius);
-      padding: 5px 14px;
-      font-size: 0.85rem;
-      cursor: pointer;
-      transition: all 0.15s;
-    }
-    .toolbar button:hover { border-color: var(--accent); color: var(--accent); }
-    .toolbar button.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
-    .toolbar button.primary:hover { background: #c1121f; }
-
-    /* ─── Main Form Area ───────────────────────────────────────────────── */
-    .main {
-      flex: 1;
-      overflow-y: auto;
-      padding: 12px 16px;
-    }
-
-    /* ─── Form Sections ────────────────────────────────────────────────── */
-    .section {
-      background: var(--surface);
-      border: 1px solid var(--border);
-      border-radius: var(--radius);
-      margin-bottom: 12px;
-      overflow: hidden;
-    }
-    .section-header {
-      display: flex;
-      align-items: center;
-      padding: 8px 12px;
-      background: var(--surface2);
-      border-bottom: 1px solid var(--border);
-      cursor: pointer;
-      user-select: none;
-      gap: 8px;
-    }
-    .section-header:hover { background: #2a2a2a; }
-    .section-title {
-      font-size: 0.85rem;
-      font-weight: 600;
-      text-transform: uppercase;
-      letter-spacing: 0.05em;
-      color: var(--accent2);
-    }
-    .section-badge {
-      font-size: 0.7rem;
-      padding: 2px 7px;
-      border-radius: 10px;
-      background: var(--accent);
+    /* ─── Header ────────────────────────────────────────────────────────── */
+    .header {
+      background: var(--red);
       color: #fff;
-      display: none;
-    }
-    .section-badge.visible { display: inline; }
-    .section-toggle { margin-left: auto; color: var(--muted); font-size: 0.8rem; }
-    .section-body { padding: 12px; }
-
-    /* ─── Form Grid ────────────────────────────────────────────────────── */
-    .grid { display: grid; gap: 8px; }
-    .grid-2 { grid-template-columns: 1fr 1fr; }
-    .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
-    .grid-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
-
-    label {
-      display: flex;
-      flex-direction: column;
-      gap: 3px;
-      font-size: 0.75rem;
-      color: var(--muted);
-    }
-    input, select, textarea {
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      color: var(--text);
-      border-radius: var(--radius);
-      padding: 7px 10px;
-      font-size: 0.9rem;
-      font-family: var(--font);
-      width: 100%;
-      transition: border-color 0.15s;
-    }
-    input:focus, select:focus, textarea:focus {
-      outline: none;
-      border-color: var(--accent);
-    }
-    input[type="number"] { font-variant-numeric: tabular-nums; }
-    input:read-only { opacity: 0.6; cursor: not-allowed; }
-    .input-group { display: flex; gap: 6px; }
-    .input-group input { flex: 1; }
-
-    /* ─── Table Editor ─────────────────────────────────────────────────── */
-    .table-wrap { overflow-x: auto; }
-    table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
-    th {
-      background: var(--surface2);
-      color: var(--muted);
-      font-size: 0.7rem;
-      text-transform: uppercase;
-      letter-spacing: 0.04em;
-      padding: 5px 8px;
-      text-align: left;
-      border-bottom: 1px solid var(--border);
-    }
-    td { padding: 3px 8px; border-bottom: 1px solid #222; vertical-align: middle; }
-    tr:hover td { background: #1e1e1e; }
-    td input, td select {
-      padding: 4px 6px;
-      font-size: 0.82rem;
-      border-radius: 4px;
-    }
-    td input[type="number"] { text-align: right; width: 110px; }
-    td input[placeholder] { width: 140px; }
-    .btn-remove {
-      width: 26px; height: 26px;
-      background: transparent;
-      border: 1px solid transparent;
-      border-radius: 4px;
-      color: var(--muted);
-      cursor: pointer;
-      font-size: 1rem;
-      display: flex; align-items: center; justify-content: center;
-    }
-    .btn-remove:hover { border-color: var(--danger); color: var(--danger); background: rgba(230,57,70,0.1); }
-    .btn-add-row {
-      width: 100%;
-      padding: 6px;
-      margin-top: 6px;
-      background: transparent;
-      border: 1px dashed var(--border);
-      color: var(--muted);
-      border-radius: var(--radius);
-      cursor: pointer;
-      font-size: 0.8rem;
-    }
-    .btn-add-row:hover { border-color: var(--accent2); color: var(--accent2); }
-
-    /* ─── Diferença Display ────────────────────────────────────────────── */
-    .resultado {
+      padding: 10px 20px;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 10px 12px;
-      border-radius: var(--radius);
-      margin-top: 8px;
-      font-size: 1rem;
+      flex-shrink: 0;
     }
-    .resultado.ok { background: rgba(42,157,143,0.15); border: 1px solid var(--success); }
-    .resultado.diff { background: rgba(230,57,70,0.15); border: 1px solid var(--danger); }
-    .resultado .label { font-size: 0.8rem; color: var(--muted); text-transform: uppercase; }
-    .resultado .value { font-size: 1.4rem; font-weight: 700; font-variant-numeric: tabular-nums; }
-    .resultado.ok .value { color: var(--success); }
-    .resultado.diff .value { color: var(--danger); }
+    .header-title { font-size: 15px; font-weight: 700; }
+    .header-id { font-size: 11px; opacity: 0.85; font-family: monospace; }
 
-    /* ─── Action Bar ───────────────────────────────────────────────────── */
-    .actions {
+    /* ─── Metadata Bar ─────────────────────────────────────────────────── */
+    .meta-bar {
+      background: var(--surface);
+      border-bottom: 1px solid var(--border);
+      padding: 10px 20px;
       display: flex;
-      gap: 8px;
+      gap: 16px;
+      align-items: center;
+      flex-wrap: wrap;
+      flex-shrink: 0;
+    }
+    .meta-field {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+    .meta-label { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; }
+    .meta-input, .meta-select {
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 6px 10px;
+      font-size: 13px;
+      background: #fff;
+      color: var(--text);
+      min-width: 120px;
+      outline: none;
+      font-family: var(--font);
+    }
+    .meta-input:focus, .meta-select:focus { border-color: var(--red); box-shadow: 0 0 0 2px var(--red-light); }
+    .meta-select { cursor: pointer; }
+
+    /* ─── Main single column ──────────────────────────────────────────── */
+    .main {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px 20px 8px;
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+
+    /* ─── Section ───────────────────────────────────────────────────────── */
+    .section { margin-bottom: 20px; }
+    .section-header {
+      font-size: 12px;
+      font-weight: 700;
+      color: var(--red);
+      text-transform: uppercase;
+      letter-spacing: 0.7px;
+      padding: 5px 0 5px;
+      margin-bottom: 6px;
+      border-bottom: 2px solid var(--red);
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+    .section-note { font-size: 10px; color: var(--muted); margin: 3px 0 5px; }
+
+    /* ─── Table ─────────────────────────────────────────────────────────── */
+    table { width: 100%; border-collapse: collapse; font-size: 12px; }
+    th {
+      background: var(--surface2);
+      font-weight: 700;
+      color: var(--muted);
+      text-align: left;
+      font-size: 10px;
+      text-transform: uppercase;
+      letter-spacing: 0.4px;
+      padding: 5px 8px;
+      border: 1px solid var(--border);
+      white-space: nowrap;
+    }
+    td { padding: 3px 6px; border: 1px solid var(--border); vertical-align: middle; }
+    td input[type="text"], td input[type="number"], td select, td textarea {
+      width: 100%;
+      border: none;
+      background: transparent;
+      font-size: 12px;
+      padding: 4px 2px;
+      outline: none;
+      font-family: var(--font);
+      color: var(--text);
+      resize: none;
+    }
+    td input:focus, td textarea:focus { background: #fffde7; }
+    td.num { text-align: right; }
+    td.num input { text-align: right; }
+    tr.total-row td { background: var(--red-row); font-weight: 700; color: var(--red-dark); font-size: 12px; }
+    tr.total-row td.num { color: var(--red); }
+
+    .row-del {
+      width: 24px;
+      height: 24px;
+      border: none;
+      background: transparent;
+      color: #ccc;
+      cursor: pointer;
+      font-size: 14px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0;
+    }
+    .row-del:hover { background: #fee2e2; color: var(--red); }
+
+    /* ─── Add Row Button ────────────────────────────────────────────────── */
+    .add-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      background: var(--red);
+      color: #fff;
+      border: none;
+      border-radius: var(--radius);
+      padding: 5px 12px;
+      font-size: 11px;
+      cursor: pointer;
+      font-weight: 600;
+      margin-top: 6px;
+    }
+    .add-btn:hover { background: var(--red-dark); }
+
+    /* ─── System Values (Saldo de Caixa) ──────────────────────────────── */
+    .sys-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 0;
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      overflow: hidden;
+    }
+    .sys-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 7px 12px;
+      border-bottom: 1px solid var(--border);
+      font-size: 12px;
+      background: #fff;
+    }
+    .sys-row:nth-child(odd) { background: var(--surface); }
+    .sys-row:last-child { border-bottom: none; }
+    .sys-row.total { background: var(--red-row); font-weight: 700; color: var(--red-dark); }
+    .sys-row .lbl { color: var(--muted); }
+    .sys-row.total .lbl { color: var(--red-dark); }
+    .sys-row .val { font-variant-numeric: tabular-nums; font-weight: 600; }
+    .sys-row.total .val { color: var(--red); font-size: 14px; }
+    .sys-row input {
+      border: none;
+      background: transparent;
+      text-align: right;
+      font-size: 12px;
+      font-family: var(--font);
+      font-weight: 600;
+      color: var(--text);
+      width: 100px;
+      padding: 2px;
+      outline: none;
+    }
+    .sys-row input:focus { background: #fffde7; border-radius: 3px; }
+
+    /* ─── Fechamento (counted) ────────────────────────────────────────── */
+    .fech-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr 1fr;
+      gap: 10px;
+    }
+    .fech-item {
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 8px 12px;
+      background: #fff;
+    }
+    .fech-item-label { font-size: 10px; text-transform: uppercase; color: var(--muted); font-weight: 700; letter-spacing: 0.4px; margin-bottom: 4px; }
+    .fech-item input {
+      border: none;
+      font-size: 16px;
+      font-weight: 700;
+      color: var(--text);
+      width: 100%;
+      font-family: var(--font);
+      outline: none;
+      background: transparent;
+      text-align: right;
+    }
+    .fech-item input:focus { background: #fffde7; border-radius: 3px; }
+    .fech-total {
+      border: 1px solid var(--border);
+      border-radius: var(--radius);
+      padding: 10px 14px;
+      background: var(--red-row);
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .fech-total-label { font-size: 11px; font-weight: 700; color: var(--red-dark); text-transform: uppercase; letter-spacing: 0.5px; }
+    .fech-total-value { font-size: 16px; font-weight: 700; color: var(--red); font-variant-numeric: tabular-nums; }
+
+    /* ─── Diferença ──────────────────────────────────────────────────── */
+    .dif-box {
+      border: 2px solid var(--border);
+      border-radius: var(--radius);
       padding: 12px 16px;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      background: #fff;
+    }
+    .dif-label { font-size: 12px; font-weight: 700; color: var(--text); text-transform: uppercase; letter-spacing: 0.5px; }
+    .dif-value { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
+    .dif-value.pos { color: var(--green); }
+    .dif-value.zero { color: var(--green); }
+    .dif-value.neg { color: var(--red); }
+
+    /* ─── Cards (4 columns) ─────────────────────────────────────────────── */
+    .cards-grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 10px;
+    }
+    .card-col { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
+    .card-col-header {
+      background: var(--red);
+      color: #fff;
+      text-align: center;
+      font-size: 10px;
+      font-weight: 700;
+      text-transform: uppercase;
+      letter-spacing: 0.6px;
+      padding: 6px 4px;
+    }
+    .card-col table { font-size: 11px; }
+    .card-col th { background: var(--red-light); color: var(--red-dark); font-size: 9px; padding: 3px 6px; }
+    .card-col td { padding: 2px 4px; }
+    .card-col td.num { text-align: right; }
+    .card-col tfoot td { background: var(--red-light); font-weight: 700; font-size: 11px; text-align: right; color: var(--red-dark); padding: 4px 6px; }
+    .soma-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 8px;
+      padding: 8px 12px;
+      background: var(--red-light);
+      border-radius: var(--radius);
+      font-size: 12px;
+      font-weight: 700;
+      color: var(--red-dark);
+    }
+    .soma-row span:last-child { font-size: 16px; color: var(--red); }
+
+    /* ─── Footer ────────────────────────────────────────────────────────── */
+    .footer {
       background: var(--surface);
       border-top: 1px solid var(--border);
+      padding: 10px 20px;
+      display: flex;
+      align-items: center;
+      gap: 10px;
       flex-shrink: 0;
       flex-wrap: wrap;
     }
-    .actions button {
-      flex: 1;
-      min-width: 120px;
-      padding: 10px 16px;
-      border-radius: var(--radius);
-      font-size: 0.9rem;
-      font-weight: 600;
-      cursor: pointer;
-      border: 1px solid var(--border);
-      background: var(--surface2);
-      color: var(--text);
-      transition: all 0.15s;
-    }
-    .actions button:hover { border-color: var(--accent); }
-    .actions button.btn-enviar {
-      background: var(--accent);
-      border-color: var(--accent);
-      color: #fff;
-    }
-    .actions button.btn-enviar:hover { background: #c1121f; }
-    .actions button:disabled { opacity: 0.4; cursor: not-allowed; }
-
-    /* ─── Toast ────────────────────────────────────────────────────────── */
-    #toast {
-      position: fixed;
-      bottom: 80px;
-      left: 50%;
-      transform: translateX(-50%) translateY(20px);
-      background: var(--surface2);
-      border: 1px solid var(--border);
-      color: var(--text);
-      padding: 10px 20px;
-      border-radius: var(--radius);
-      font-size: 0.85rem;
-      opacity: 0;
-      transition: all 0.3s;
-      z-index: 1000;
-      pointer-events: none;
-      max-width: 90vw;
-    }
-    #toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
-    #toast.success { border-color: var(--success); color: var(--success); }
-    #toast.error { border-color: var(--danger); color: var(--danger); }
-
-    /* ─── Loading Overlay ──────────────────────────────────────────────── */
-    #loading {
-      display: none;
-      position: fixed;
-      inset: 0;
-      background: rgba(0,0,0,0.6);
-      z-index: 999;
+    .auto-save {
+      display: flex;
       align-items: center;
-      justify-content: center;
-      flex-direction: column;
-      gap: 12px;
-    }
-    #loading.show { display: flex; }
-    .spinner {
-      width: 40px; height: 40px;
-      border: 3px solid var(--border);
-      border-top-color: var(--accent);
-      border-radius: 50%;
-      animation: spin 0.8s linear infinite;
-    }
-    @keyframes spin { to { transform: rotate(360deg); } }
-
-    /* ─── Responsivo ───────────────────────────────────────────────────── */
-    @media (max-width: 700px) {
-      .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; }
-      .toolbar { gap: 6px; }
-      .actions button { min-width: 100px; font-size: 0.8rem; }
-    }
-
-    /* ─── Print Preview Modal ─────────────────────────────────────────── */
-    #modal-print {
-      display: none;
-      position: fixed;
-      inset: 0;
-      background: rgba(0,0,0,0.8);
-      z-index: 500;
-      align-items: center;
-      justify-content: center;
-    }
-    #modal-print.show { display: flex; }
-    #modal-print .paper {
-      background: #fff;
-      color: #000;
-      width: 280px;
-      padding: 16px;
-      border-radius: 4px;
-      font-family: 'Courier New', monospace;
+      gap: 6px;
       font-size: 11px;
-      line-height: 1.4;
-      max-height: 80vh;
-      overflow-y: auto;
+      color: var(--muted);
+      margin-right: auto;
     }
-    #modal-print .paper .p-title { text-align: center; font-weight: bold; font-size: 14px; }
-    #modal-print .paper .p-section { margin-top: 8px; }
-    #modal-print .paper .p-row { display: flex; justify-content: space-between; }
-    #modal-print .paper .p-divider { border-top: 1px dashed #000; margin: 4px 0; }
-    #modal-print .actions { background: transparent; border: none; justify-content: center; gap: 12px; }
+    .dot { width: 8px; height: 8px; border-radius: 50%; background: #4caf50; }
+    .btn {
+      border: 1px solid var(--border);
+      background: #fff;
+      border-radius: var(--radius);
+      padding: 8px 16px;
+      font-size: 12px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-weight: 600;
+      font-family: var(--font);
+      color: var(--text);
+    }
+    .btn:hover { background: var(--surface2); }
+    .btn-danger { background: var(--red); color: #fff; border-color: var(--red); font-size: 13px; padding: 9px 18px; }
+    .btn-danger:hover { background: var(--red-dark); }
+
+    /* ─── Scrollbar ────────────────────────────────────────────────────── */
+    ::-webkit-scrollbar { width: 6px; }
+    ::-webkit-scrollbar-track { background: var(--surface); }
+    ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
   </style>
 </head>
 <body>
 
-<!-- Header -->
-<header>
-  <span class="logo">🍗 Fechamento de Caixa</span>
-  <span class="subtitle" id="loja-label">—</span>
-  <div class="header-spacer"></div>
-  <span class="sync-badge" id="sync-badge">● Local</span>
-</header>
-
-<!-- Toolbar -->
-<div class="toolbar">
-  <select id="sel-loja">
-    <option value="">Loja…</option>
-    <option value="Uniao">União</option>
-    <option value="Alianca">Aliança</option>
-  </select>
-  <input type="date" id="inp-data">
-  <select id="sel-turno">
-    <option value="">Turno…</option>
-    <option value="1">1º Turno</option>
-    <option value="2">2º Turno</option>
-  </select>
-  <select id="sel-operador">
-    <option value="">Operador…</option>
-  </select>
-  <div class="header-spacer"></div>
-  <button onclick="carregarRascunho()">↺ Carregar</button>
-  <button onclick="listarRecentes()">📋 Recentes</button>
-  <button onclick="abrirConfig()">⚙</button>
+<!-- ═══ HEADER ═══════════════════════════════════════════════════════════ -->
+<div class="header">
+  <span class="header-title">Fechamento de Caixa — <span id="loja-nome">União</span></span>
+  <span class="header-id" id="fechamento-id">—</span>
 </div>
 
-<!-- Main Form -->
-<div class="main" id="main-form">
+<!-- ═══ METADATA BAR ═════════════════════════════════════════════════════ -->
+<div class="meta-bar">
+  <div class="meta-field">
+    <span class="meta-label">Data</span>
+    <input type="date" class="meta-input" id="f-data" />
+  </div>
+  <div class="meta-field">
+    <span class="meta-label">Operador</span>
+    <input type="text" class="meta-input" id="f-operador" placeholder="Ex: Isabelle" />
+  </div>
+  <div class="meta-field">
+    <span class="meta-label">Turno</span>
+    <select class="meta-select" id="f-turno">
+      <option value="">—</option>
+      <option value="integral">Integral</option>
+      <option value="manhã">Manhã</option>
+      <option value="tarde">Tarde</option>
+    </select>
+  </div>
+  <div class="meta-field">
+    <span class="meta-label">Loja</span>
+    <select class="meta-select" id="f-loja">
+      <option value="União">União</option>
+      <option value="Aliança">Aliança</option>
+    </select>
+  </div>
+</div>
 
-  <!-- Entradas -->
-  <div class="section" id="sec-entradas">
-    <div class="section-header" onclick="toggleSec('entradas')">
-      <span class="section-title">Entradas</span>
-      <span class="section-badge" id="badge-entradas">0</span>
-      <span class="section-toggle" id="toggle-entradas">▼</span>
+<!-- ═══ MAIN CONTENT ══════════════════════════════════════════════════════ -->
+<div class="main">
+
+  <!-- SANGRIAS -->
+  <div class="section">
+    <div class="section-header">💸 Sangrias</div>
+    <table id="tbl-sangrias">
+      <thead>
+        <tr>
+          <th style="width:28px">#</th>
+          <th>Hora</th>
+          <th>Retirada (R$)</th>
+          <th>Gerente</th>
+          <th style="width:28px"></th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+      <tfoot>
+        <tr class="total-row">
+          <td colspan="3">TOTAL</td>
+          <td class="num" id="total-sangrias">R$ 0,00</td>
+          <td></td>
+        </tr>
+      </tfoot>
+    </table>
+    <button class="add-btn" data-tbl="tbl-sangrias">+ Adicionar sangria</button>
+  </div>
+
+  <!-- DESPESAS -->
+  <div class="section">
+    <div class="section-header">📝 Despesas</div>
+    <table id="tbl-despesas">
+      <thead>
+        <tr>
+          <th style="width:28px">#</th>
+          <th>Descrição</th>
+          <th>Obs</th>
+          <th>Valor (R$)</th>
+          <th style="width:28px"></th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+      <tfoot>
+        <tr class="total-row">
+          <td colspan="3">TOTAL</td>
+          <td class="num" id="total-despesas">R$ 0,00</td>
+          <td></td>
+        </tr>
+      </tfoot>
+    </table>
+    <button class="add-btn" data-tbl="tbl-despesas">+ Adicionar despesa</button>
+  </div>
+
+  <!-- PIX CNPJ -->
+  <div class="section">
+    <div class="section-header">💳 PIX CNPJ</div>
+    <table id="tbl-pix">
+      <thead>
+        <tr>
+          <th style="width:28px">#</th>
+          <th>Nome</th>
+          <th>Valor (R$)</th>
+          <th style="width:28px"></th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+      <tfoot>
+        <tr class="total-row">
+          <td colspan="2">TOTAL</td>
+          <td class="num" id="total-pix">R$ 0,00</td>
+          <td></td>
+        </tr>
+      </tfoot>
+    </table>
+    <button class="add-btn" data-tbl="tbl-pix">+ Adicionar PIX</button>
+  </div>
+
+  <!-- VALES -->
+  <div class="section">
+    <div class="section-header">💰 Vales (Funcionários)</div>
+    <table id="tbl-vales">
+      <thead>
+        <tr>
+          <th style="width:28px">#</th>
+          <th>Nome</th>
+          <th>Valor (R$)</th>
+          <th style="width:28px"></th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+      <tfoot>
+        <tr class="total-row">
+          <td colspan="2">TOTAL</td>
+          <td class="num" id="total-vales">R$ 0,00</td>
+          <td></td>
+        </tr>
+      </tfoot>
+    </table>
+    <button class="add-btn" data-tbl="tbl-vales">+ Adicionar vale</button>
+  </div>
+
+  <!-- À RECEBER -->
+  <div class="section">
+    <div class="section-header">👥 À Receber (Clientes)</div>
+    <table id="tbl-receber">
+      <thead>
+        <tr>
+          <th style="width:28px">#</th>
+          <th>Nome</th>
+          <th>Valor (R$)</th>
+          <th style="width:28px"></th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+      <tfoot>
+        <tr class="total-row">
+          <td colspan="2">TOTAL</td>
+          <td class="num" id="total-receber">R$ 0,00</td>
+          <td></td>
+        </tr>
+      </tfoot>
+    </table>
+    <button class="add-btn" data-tbl="tbl-receber">+ Adicionar cliente</button>
+  </div>
+
+  <!-- SALDO DE CAIXA (VALORES DO SISTEMA) -->
+  <div class="section">
+    <div class="section-header">🖥️ Saldo de Caixa (Valores do Sistema)</div>
+    <div class="sys-grid">
+      <div class="sys-row">
+        <span class="lbl">Troco (+)</span>
+        <input type="text" id="sys-troco" value="0,00" />
+      </div>
+      <div class="sys-row">
+        <span class="lbl">Crédito (+) ← Cartões</span>
+        <input type="text" id="sys-credito" value="0,00" />
+      </div>
+      <div class="sys-row">
+        <span class="lbl">Débito (+) ← Cartões</span>
+        <input type="text" id="sys-debito" value="0,00" />
+      </div>
+      <div class="sys-row">
+        <span class="lbl">Alimentação (+) ← Cartões</span>
+        <input type="text" id="sys-alimentacao" value="0,00" />
+      </div>
+      <div class="sys-row">
+        <span class="lbl">Vales (+) ← Vales</span>
+        <input type="text" id="sys-vales" value="0,00" />
+      </div>
+      <div class="sys-row">
+        <span class="lbl">À Receber (+) ← Clientes</span>
+        <input type="text" id="sys-receber" value="0,00" />
+      </div>
+      <div class="sys-row">
+        <span class="lbl">PIX (+) ← CNPJ + Cartão</span>
+        <input type="text" id="sys-pix" value="0,00" />
+      </div>
+      <div class="sys-row total">
+        <span class="lbl">TOTAL</span>
+        <span class="val" id="sys-total">R$ 0,00</span>
+      </div>
     </div>
-    <div class="section-body" id="body-entradas">
-      <div class="grid grid-3">
-        <label>Saldo Troco<input type="number" id="f-saldo-troco" step="0.01" placeholder="0,00"></label>
-        <label>Fechamento (Dinheiro)<input type="number" id="f-fechamento" step="0.01" placeholder="0,00"></label>
-        <label>Saldo Esperado<input type="number" id="f-saldo-esperado" step="0.01" placeholder="0,00" readonly></label>
-      </div>
-      <div class="resultado" id="res-diferenca">
-        <span class="label">Diferença</span>
-        <span class="value" id="val-diferenca">R$ 0,00</span>
-      </div>
+    <div class="section-note">Informe o saldo esperado. Saldo de Caixa actual: <strong id="sys-total-inline">R$ 0,00</strong></div>
+    <div style="margin-top:6px">
+      <input type="text" class="meta-input" id="f-saldo-esperado" placeholder="Informe o saldo esperado..." style="font-size:15px;font-weight:700;min-width:200px" />
     </div>
   </div>
 
-  <!-- Sangrias / Despesas -->
-  <div class="section" id="sec-despesas">
-    <div class="section-header" onclick="toggleSec('despesas')">
-      <span class="section-title">Sangrias / Despesas</span>
-      <span class="section-badge" id="badge-despesas">0</span>
-      <span class="section-toggle" id="toggle-despesas">▼</span>
+  <!-- FECHAMENTO (VALORES CONTADOS) -->
+  <div class="section">
+    <div class="section-header">🛒 Fechamento (Valores Contados)</div>
+    <div class="fech-grid">
+      <div class="fech-item">
+        <div class="fech-item-label">Dinheiro</div>
+        <input type="text" id="f-fech-dinheiro" placeholder="0,00" />
+      </div>
+      <div class="fech-item">
+        <div class="fech-item-label">Cartões ← Soma cartões</div>
+        <input type="text" id="f-fech-cartoes" placeholder="0,00" />
+      </div>
+      <div class="fech-item">
+        <div class="fech-item-label">À Receber ← À receber</div>
+        <input type="text" id="f-fech-receber" placeholder="0,00" />
+      </div>
     </div>
-    <div class="section-body" id="body-despesas">
-      <div class="table-wrap">
-        <table id="tbl-despesas">
-          <thead><tr>
-            <th>Descrição</th><th>Valor</th><th></th>
-          </tr></thead>
+    <div class="fech-total" style="margin-top:8px">
+      <span class="fech-total-label">Total Programa</span>
+      <span class="fech-total-value" id="fech-total">R$ 0,00</span>
+    </div>
+  </div>
+
+  <!-- DIFERENÇA -->
+  <div class="section">
+    <div class="dif-box">
+      <span class="dif-label">Diferença</span>
+      <span class="dif-value zero" id="diferenca">R$ 0,00</span>
+    </div>
+  </div>
+
+  <!-- CANCELAMENTOS -->
+  <div class="section">
+    <div class="section-header">❌ Cancelamentos</div>
+    <table id="tbl-cancelamentos">
+      <thead>
+        <tr>
+          <th style="width:28px">#</th>
+          <th>Número</th>
+          <th>Valor (R$)</th>
+          <th>Motivo</th>
+          <th style="width:28px"></th>
+        </tr>
+      </thead>
+      <tbody></tbody>
+      <tfoot>
+        <tr class="total-row">
+          <td colspan="2">TOTAL</td>
+          <td class="num" id="total-cancelamentos">R$ 0,00</td>
+          <td colspan="2"></td>
+        </tr>
+      </tfoot>
+    </table>
+    <button class="add-btn" data-tbl="tbl-cancelamentos">+ Adicionar cancelamento</button>
+  </div>
+
+  <!-- CARTÕES (4 COLUNAS) -->
+  <div class="section">
+    <div class="section-header">💳 Cartões (4 Colunas)</div>
+    <div class="cards-grid">
+      <div class="card-col">
+        <div class="card-col-header">Crédito</div>
+        <table id="tbl-cartao-credito">
+          <thead><tr><th>#</th><th>Valor (R$)</th><th></th></tr></thead>
           <tbody></tbody>
+          <tfoot><tr><td colspan="2" id="total-cartao-credito">R$ 0,00</td><td></td></tr></tfoot>
         </table>
-        <button class="btn-add-row" onclick="addDespesa()">+ Adicionar despesa</button>
+        <button class="add-btn" data-tbl="tbl-cartao-credito" style="margin:4px;width:calc(100% - 8px);justify-content:center">+</button>
       </div>
-      <div class="grid grid-3" style="margin-top:10px">
-        <label>Total Sangrias<input type="number" id="f-total-sangrias" step="0.01" readonly></label>
-        <label>Total Despesas<input type="number" id="f-total-despesas" step="0.01" readonly></label>
-        <label>Vales<input type="number" id="f-vales" step="0.01"></label>
-      </div>
-    </div>
-  </div>
-
-  <!-- Cartões -->
-  <div class="section" id="sec-cartoes">
-    <div class="section-header" onclick="toggleSec('cartoes')">
-      <span class="section-title">Cartões / Voucher</span>
-      <span class="section-badge" id="badge-cartoes">0</span>
-      <span class="section-toggle" id="toggle-cartoes">▼</span>
-    </div>
-    <div class="section-body" id="body-cartoes">
-      <div class="grid grid-4">
-        <label>Crédito<input type="number" id="f-credito" step="0.01" placeholder="0,00"></label>
-        <label>Débito<input type="number" id="f-debito" step="0.01" placeholder="0,00"></label>
-        <label>Alimentação<input type="number" id="f-alimentacao" step="0.01" placeholder="0,00"></label>
-        <label>Voucher<input type="number" id="f-voucher" step="0.01" placeholder="0,00"></label>
-      </div>
-      <div style="margin-top:8px">
-        <label>Cancelamentos<input type="number" id="f-cancelamentos" step="0.01" placeholder="0,00"></label>
-      </div>
-    </div>
-  </div>
-
-  <!-- A Receber -->
-  <div class="section" id="sec-receber">
-    <div class="section-header" onclick="toggleSec('receber')">
-      <span class="section-title">A Receber</span>
-      <span class="section-badge" id="badge-receber">0</span>
-      <span class="section-toggle" id="toggle-receber">▼</span>
-    </div>
-    <div class="section-body" id="body-receber">
-      <div class="table-wrap">
-        <table id="tbl-receber">
-          <thead><tr><th>Descrição</th><th>Valor</th><th></th></tr></thead>
+      <div class="card-col">
+        <div class="card-col-header">Débito</div>
+        <table id="tbl-cartao-debito">
+          <thead><tr><th>#</th><th>Valor (R$)</th><th></th></tr></thead>
           <tbody></tbody>
+          <tfoot><tr><td colspan="2" id="total-cartao-debito">R$ 0,00</td><td></td></tr></tfoot>
         </table>
-        <button class="btn-add-row" onclick="addReceber()">+ Adicionar</button>
+        <button class="add-btn" data-tbl="tbl-cartao-debito" style="margin:4px;width:calc(100% - 8px);justify-content:center">+</button>
+      </div>
+      <div class="card-col">
+        <div class="card-col-header">Alimentação</div>
+        <table id="tbl-cartao-alimentacao">
+          <thead><tr><th>#</th><th>Valor (R$)</th><th></th></tr></thead>
+          <tbody></tbody>
+          <tfoot><tr><td colspan="2" id="total-cartao-alimentacao">R$ 0,00</td><td></td></tr></tfoot>
+        </table>
+        <button class="add-btn" data-tbl="tbl-cartao-alimentacao" style="margin:4px;width:calc(100% - 8px);justify-content:center">+</button>
+      </div>
+      <div class="card-col">
+        <div class="card-col-header">PIX</div>
+        <table id="tbl-cartao-pix">
+          <thead><tr><th>#</th><th>Valor (R$)</th><th></th></tr></thead>
+          <tbody></tbody>
+          <tfoot><tr><td colspan="2" id="total-cartao-pix">R$ 0,00</td><td></td></tr></tfoot>
+        </table>
+        <button class="add-btn" data-tbl="tbl-cartao-pix" style="margin:4px;width:calc(100% - 8px);justify-content:center">+</button>
       </div>
     </div>
-  </div>
-
-  <!-- Observaes -->
-  <div class="section" id="sec-obs">
-    <div class="section-header" onclick="toggleSec('obs')">
-      <span class="section-title">Observaes / Info</span>
-      <span class="section-toggle" id="toggle-obs">▼</span>
-    </div>
-    <div class="section-body">
-      <textarea id="f-observacoes" rows="3" placeholder="Observaes do fechamento…"></textarea>
+    <div class="soma-row">
+      <span>Soma Cartões (todas as colunas)</span>
+      <span id="soma-cartoes">R$ 0,00</span>
     </div>
   </div>
 
-</div><!-- /.main -->
+</div><!-- /main -->
 
-<!-- Actions -->
-<div class="actions">
-  <button onclick="salvarRascunho()" id="btn-salvar">💾 Salvar</button>
-  <button onclick="limparForm()" id="btn-limpar">🗑 Limpar</button>
-  <button onclick="abrirImpressao()" id="btn-imprimir">🖨 Imprimir</button>
-  <button onclick="enviarFechamento()" class="btn-enviar" id="btn-enviar">📤 Enviar</button>
-</div>
-
-<!-- Toast -->
-<div id="toast"></div>
-
-<!-- Loading -->
-<div id="loading"><div class="spinner"></div><span id="loading-msg">Aguarde…</span></div>
-
-<!-- Config Modal -->
-<div id="modal-config" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:600;align-items:center;justify-content:center;">
-  <div style="background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:24px;width:360px;max-width:90vw;">
-    <h3 style="margin-bottom:16px;font-size:1rem;">⚙ Configuraes</h3>
-    <label style="margin-bottom:12px">Impressora USB
-      <select id="cfg-impressora" style="margin-top:4px">
-        <option value="">— Detectar automaticamente —</option>
-      </select>
-    </label>
-    <div style="display:flex;gap:8px;margin-top:16px">
-      <button onclick="detectarImpressora()" style="flex:1;padding:8px;border-radius:var(--radius);background:var(--surface2);border:1px solid var(--border);color:var(--text);cursor:pointer;">Detectar</button>
-      <button onclick="fecharConfig()" style="flex:1;padding:8px;border-radius:var(--radius);background:var(--accent);border:1px solid var(--accent);color:#fff;cursor:pointer;">Fechar</button>
-    </div>
-    <div id="cfg-status" style="margin-top:10px;font-size:0.8rem;color:var(--muted);"></div>
-  </div>
-</div>
-
-<!-- Print Preview Modal -->
-<div id="modal-print">
-  <div class="paper" id="paper-content"></div>
-  <div class="actions" style="position:absolute;bottom:20px;left:0;right:0;">
-    <button onclick="imprimirAgora()">🖨 Imprimir</button>
-    <button onclick="fecharPrintPreview()">Cancelar</button>
-  </div>
+<!-- ═══ FOOTER ════════════════════════════════════════════════════════════════ -->
+<div class="footer">
+  <div class="auto-save"><span class="dot"></span> Salvamento automático activo</div>
+  <button class="btn" id="btn-anterior">✏️ Editar dia anterior</button>
+  <button class="btn" id="btn-recibo">🖨️ Recibo 80mm</button>
+  <button class="btn" id="btn-limpar">🗑️ Limpar rascunho</button>
+  <button class="btn btn-danger" id="btn-enviar">💾 Enviar Fechamento</button>
 </div>
 
+<!-- ═══ JAVASCRIPT ══════════════════════════════════════════════════════════ -->
 <script>
-const { invoke } = window.__TAURI__.core;
+'use strict';
+
+// ─── State ────────────────────────────────────────────────────────────────
 let estado = {
-  uuid: null,
-  id_local: null,
-  loja: '',
+  uuid: crypto.randomUUID ? crypto.randomUUID() : Date.now().toString(),
+  loja: 'União',
   data: '',
   operador: '',
   turno: '',
@@ -530,429 +674,349 @@ let estado = {
   fechamento: 0,
   saldo_esperado: 0,
   diferenca: 0,
-  despesas: [],  // [{desc, valor}]
-  total_sangrias: 0,
-  total_despesas: 0,
-  vales: 0,
-  cartoes: {credito:0, debito:0, alimentacao:0, voucher:0, cancelamentos:0},
-  receber: [],   // [{desc, valor}]
-  observacoes: 'rascunho'
-};
-let autoSaveTimer = null;
-
-// ── Init ──────────────────────────────────────────────────────────────────
-async function init() {
-  // Defaults: loja do config, data hoje, turno 1
-  const cfg = await invoke('get_config').catch(() => ({}));
-  if (cfg.loja) {
-    document.getElementById('sel-loja').value = cfg.loja;
-    estado.loja = cfg.loja;
-  }
-  document.getElementById('inp-data').value = new Date().toISOString().split('T')[0];
-  estado.data = document.getElementById('inp-data').value;
-
-  // Load operadores from server
-  await carregarOperadores();
-
-  // Add Enter key handler for all value inputs to add new row
-  document.querySelectorAll('input').forEach(inp => {
-    inp.addEventListener('keydown', e => {
-      if (e.key === 'Enter' && inp.type === 'number') {
-        e.preventDefault();
-        inp.blur();
-      }
-    });
-  });
-
-  // Auto-calculate on input change
-  ['f-saldo-troco','f-fechamento','f-credito','f-debito','f-alimentacao','f-voucher','f-cancelamentos','f-vales'].forEach(id => {
-    document.getElementById(id)?.addEventListener('input', calcular);
-  });
-
-  calcular();
-  document.getElementById('loja-label').textContent = estado.loja || '—';
-}
-
-// ── Store ─────────────────────────────────────────────────────────────────
-async function invokeSafe(cmd, args = {}) {
-  try {
-    return await invoke(cmd, args);
-  } catch(e) {
-    console.error(`[${cmd}]`, e);
-    toast(`Erro: ${e}`, 'error');
-    throw e;
-  }
-}
-
-// ── Auto-save (local SQLite) ─────────────────────────────────────────────
-function scheduleAutoSave() {
-  clearTimeout(autoSaveTimer);
-  autoSaveTimer = setTimeout(() => salvarRascunho(true), 1500);
-}
-
-function calcular() {
-  const sto = parseFloat(val('f-saldo-troco')) || 0;
-  const fec = parseFloat(val('f-fechamento')) || 0;
-  const esp = sto + fec;
-  document.getElementById('f-saldo-esperado').value = fmt(esp);
-
-  estado.saldo_troco = sto;
-  estado.fechamento = fec;
-  estado.saldo_esperado = esp;
-
-  const dif = fec - esp;
-  estado.diferenca = dif;
-  const el = document.getElementById('res-diferenca');
-  const vl = document.getElementById('val-diferenca');
-  el.className = 'resultado ' + (Math.abs(dif) < 0.01 ? 'ok' : 'diff');
-  vl.textContent = (dif >= 0 ? '+' : '') + fmt(dif);
-
-  // Totals
-  estado.despesas = getTableRows('tbl-despesas').map(r => ({desc: r[0], valor: parseFloat(r[1])||0}));
-  estado.total_sangrias = estado.despesas.filter(d => d.desc.includes('Sangria')).reduce((s,d) => s+d.valor, 0);
-  estado.total_despesas = estado.despesas.filter(d => !d.desc.includes('Sangria')).reduce((s,d) => s+d.valor, 0);
-  estado.vales = parseFloat(val('f-vales')) || 0;
-  estado.cartoes = {
-    credito: parseFloat(val('f-credito')) || 0,
-    debito: parseFloat(val('f-debito')) || 0,
-    alimentacao: parseFloat(val('f-alimentacao')) || 0,
-    voucher: parseFloat(val('f-voucher')) || 0,
-    cancelamentos: parseFloat(val('f-cancelamentos')) || 0
-  };
-  estado.receber = getTableRows('tbl-receber').map(r => ({desc: r[0], valor: parseFloat(r[1])||0}));
-  estado.observacoes = val('f-observacoes') || 'rascunho';
-  estado.loja = val('sel-loja');
-  estado.data = val('inp-data');
-  estado.operador = val('sel-operador');
-  estado.turno = val('sel-turno');
-
-  updateBadges();
-}
-
-function updateBadges() {
-  const d = estado.despesas.length;
-  const r = estado.receber.length;
-  const bD = document.getElementById('badge-despesas');
-  const bR = document.getElementById('badge-receber');
-  bD.textContent = d; bD.className = 'section-badge' + (d ? ' visible' : '');
-  bR.textContent = r; bR.className = 'section-badge' + (r ? ' visible' : '');
-}
-
-// ── Salvar Rascunho ──────────────────────────────────────────────────────
-async function salvarRascunho(silent = false) {
-  calcular();
-  try {
-    const result = await invokeSafe('salvar_fechamento', { estado });
-    estado.id_local = result.id;
-    estado.uuid = result.uuid;
-    if (!silent) toast('Rascunho salvo (local)', 'success');
-    atualizarSyncBadge('local');
-  } catch(e) {
-    if (!silent) toast('Erro ao salvar rascunho', 'error');
-  }
-}
-
-// ── Carregar Rascunho ───────────────────────────────────────────────────
-async function carregarRascunho() {
-  const loja = val('sel-loja');
-  const data = val('inp-data');
-  if (!loja || !data) { toast('Selecione loja e data primeiro', 'error'); return; }
-  showLoad('Carregando rascunho…');
-  try {
-    const r = await invokeSafe('carregar_rascunho', { loja, data });
-    if (!r) { toast('Nenhum rascunho encontrado', ''); hideLoad(); return; }
-    Object.assign(estado, r);
-    // Restore form fields
-    document.getElementById('f-saldo-troco').value = r.saldo_troco || '';
-    document.getElementById('f-fechamento').value = r.fechamento || '';
-    document.getElementById('f-vales').value = r.vales || '';
-    document.getElementById('f-credito').value = r.cartoes?.credito || '';
-    document.getElementById('f-debito').value = r.cartoes?.debito || '';
-    document.getElementById('f-alimentacao').value = r.cartoes?.alimentacao || '';
-    document.getElementById('f-voucher').value = r.cartoes?.voucher || '';
-    document.getElementById('f-cancelamentos').value = r.cartoes?.cancelamentos || '';
-    document.getElementById('f-observacoes').value = r.observacoes || '';
-    document.getElementById('sel-operador').value = r.operador || '';
-    document.getElementById('sel-turno').value = r.turno || '';
-    // Restore tables
-    restoreTable('tbl-despesas', (r.despesas||[]).map(d => [d.desc, d.valor]));
-    restoreTable('tbl-receber', (r.receber||[]).map(d => [d.desc, d.valor]));
-    calcular();
-    toast('Rascunho carregado', 'success');
-  } catch(e) { /* toast already shown */ }
-  hideLoad();
-}
-
-// ── Enviar (sync to Supabase) ─────────────────────────────────────────────
-async function enviarFechamento() {
-  calcular();
-  if (!estado.loja || !estado.data) { toast('Loja e data so obrigatorios', 'error'); return; }
-  showLoad('Enviando ao servidor…');
-  try {
-    await invokeSafe('sb_salvar_fechamento', { estado });
-    toast('Enviado com sucesso!', 'success');
-    atualizarSyncBadge('synced');
-  } catch(e) { toast(`Erro ao enviar: ${e}`, 'error'); }
-  hideLoad();
-}
-
-// ── Impresso ─────────────────────────────────────────────────────────────
-function abrirImpressao() {
-  calcular();
-  const p = document.getElementById('paper-content');
-  const dif = estado.diferenca;
-  p.innerHTML = `
-    <div class="p-title">FECHAMENTO DE CAIXA</div>
-    <div style="text-align:center">${estado.loja} — ${estado.data} — Turno ${estado.turno}</div>
-    <div style="text-align:center">Operador: ${estado.operador}</div>
-    <div class="p-divider"></div>
-    <div class="p-section">
-      <div class="p-row"><span>Saldo Troco:</span><span>${fmt(estado.saldo_troco)}</span></div>
-      <div class="p-row"><span>Fechamento:</span><span>${fmt(estado.fechamento)}</span></div>
-      <div class="p-row"><span>Saldo Esperado:</span><span>${fmt(estado.saldo_esperado)}</span></div>
-      <div class="p-row" style="font-weight:bold;color:${Math.abs(dif)<0.01?'green':'red'}">
-        <span>Diferenca:</span><span>${dif>=0?'+':''}${fmt(dif)}</span>
-      </div>
-    </div>
-    <div class="p-divider"></div>
-    <div class="p-section">
-      <div class="p-row"><span>Credito:</span><span>${fmt(estado.cartoes.credito)}</span></div>
-      <div class="p-row"><span>Debito:</span><span>${fmt(estado.cartoes.debito)}</span></div>
-      <div class="p-row"><span>Alimentacao:</span><span>${fmt(estado.cartoes.alimentacao)}</span></div>
-      <div class="p-row"><span>Voucher:</span><span>${fmt(estado.cartoes.voucher)}</span></div>
-      <div class="p-row"><span>Cancelamentos:</span><span>${fmt(estado.cartoes.cancelamentos)}</span></div>
-    </div>
-    <div class="p-divider"></div>
-    <div class="p-section">
-      <div class="p-row"><span>Sangrias:</span><span>${fmt(estado.total_sangrias)}</span></div>
-      <div class="p-row"><span>Despesas:</span><span>${fmt(estado.total_despesas)}</span></div>
-      <div class="p-row"><span>Vales:</span><span>${fmt(estado.vales)}</span></div>
-    </div>
-    ${estado.observacoes && estado.observacoes!='rascunho' ? `<div class="p-divider"></div><div>Obs: ${estado.observacoes}</div>` : ''}
-    <div class="p-divider"></div>
-    <div style="text-align:center;font-size:10px">${new Date().toLocaleString('pt-BR')}</div>
-  `;
-  document.getElementById('modal-print').classList.add('show');
-}
-
-async function imprimirAgora() {
-  document.getElementById('modal-print').classList.remove('show');
-  showLoad('Imprimindo…');
-  try {
-    await invokeSafe('imprimir_recibo', { estado });
-    toast('Impresso com sucesso!', 'success');
-  } catch(e) { toast(`Erro na impressao: ${e}`, 'error'); }
-  hideLoad();
-}
-
-function fecharPrintPreview() {
-  document.getElementById('modal-print').classList.remove('show');
-}
-
-// ── Listar Recentes ──────────────────────────────────────────────────────
-async function listarRecentes() {
-  const loja = val('sel-loja');
-  if (!loja) { toast('Selecione a loja primeiro', 'error'); return; }
-  showLoad('Carregando recentes…');
-  try {
-    const lista = await invokeSafe('sb_listar_recentes', { loja, limite: 20 });
-    const html = lista.map(r => `
-      <tr onclick="selecionarRecente(${r.id})" style="cursor:pointer">
-        <td>${r.data}</td><td>${r.operador||'—'}</td><td>${r.turno}º</td>
-        <td style="text-align:right">${fmt(r.saldo_esperado||0)}</td>
-        <td><span style="font-size:0.7rem;padding:2px 6px;border-radius:8px;background:${r.sync_status==='synced'?'var(--success)':'var(--muted)'};color:#fff">${r.sync_status||'local'}</span></td>
-      </tr>`).join('');
-    const m = document.getElementById('modal-recentes') || createRecentesModal();
-    m.querySelector('tbody').innerHTML = html || '<tr><td colspan=5 style="text-align:center;color:var(--muted)">Nenhum registro</td></tr>';
-    m.classList.add('show');
-  } catch(e) { /* toast */ }
-  hideLoad();
-}
-
-function createRecentesModal() {
-  const div = document.createElement('div');
-  div.id = 'modal-recentes';
-  div.style.cssText = 'display:none;position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:600;align-items:center;justify-content:center;';
-  div.innerHTML = `<div style="background:var(--surface);border:1px solid var(--border);border-radius:12px;width:500px;max-width:90vw;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;">
-    <div style="padding:14px 16px;border-bottom:1px solid var(--border);font-weight:600">📋 Fechamentos Recentes <span style="margin-left:auto;cursor:pointer" onclick="this.closest('#modal-recentes').classList.remove('show')">✕</span></div>
-    <div style="overflow-y:auto;flex:1"><table style="width:100%"><thead><tr><th>Data</th><th>Operador</th><th>Turno</th><th style="text-align:right">Valor</th><th>Status</th></tr></thead><tbody></tbody></table></div>
-  </div>`;
-  document.body.appendChild(div);
-  return div;
-}
-
-async function selecionarRecente(id) {
-  document.getElementById('modal-recentes')?.classList.remove('show');
-  showLoad('Carregando…');
-  try {
-    const r = await invokeSafe('buscar_fechamento_por_id', { id });
-    Object.assign(estado, r);
-    document.getElementById('f-saldo-troco').value = r.saldo_troco || '';
-    document.getElementById('f-fechamento').value = r.fechamento || '';
-    document.getElementById('f-vales').value = r.vales || '';
-    document.getElementById('f-credito').value = r.cartoes?.credito || '';
-    document.getElementById('f-debito').value = r.cartoes?.debito || '';
-    document.getElementById('f-alimentacao').value = r.cartoes?.alimentacao || '';
-    document.getElementById('f-voucher').value = r.cartoes?.voucher || '';
-    document.getElementById('f-cancelamentos').value = r.cartoes?.cancelamentos || '';
-    document.getElementById('f-observacoes').value = r.observacoes || '';
-    document.getElementById('sel-operador').value = r.operador || '';
-    document.getElementById('sel-turno').value = r.turno || '';
-    restoreTable('tbl-despesas', (r.despesas||[]).map(d => [d.desc, d.valor]));
-    restoreTable('tbl-receber', (r.receber||[]).map(d => [d.desc, d.valor]));
-    calcular();
-    toast('Fechamento carregado', 'success');
-  } catch(e) {}
-  hideLoad();
-}
-
-// ── Operadores ───────────────────────────────────────────────────────────
-async function carregarOperadores() {
-  const loja = val('sel-loja');
-  if (!loja) return;
-  try {
-    const listas = await invoke('carregar_listas', { loja }).catch(() => null);
-    const ops = (listas?.operadores || []).map(o => `<option value="${o}">${o}</option>`).join('');
-    document.getElementById('sel-operador').innerHTML = '<option value="">Operador…</option>' + ops;
-  } catch(e) {}
-}
-
-// ── Helpers ───────────────────────────────────────────────────────────────
-const val = id => document.getElementById(id)?.value || '';
-const fmt = v => {
-  v = parseFloat(v) || 0;
-  return 'R$ ' + v.toLocaleString('pt-BR', {minimumFractionDigits: 2, maximumFractionDigits: 2});
+  despesas: [],
+  sangrias: [],
+  pix: [],
+  vales: [],
+  receber: [],
+  cancelamentos: [],
+  cartoes: { credito: [], debito: [], alimentacao: [], pix: [] },
+  fechamento_contado: { dinheiro: 0, cartoes: 0, receber: 0 },
+  observacoes: '',
+  id_local: null,
+  sync_status: 'local'
 };
 
-function toast(msg, cls = '') {
-  const t = document.getElementById('toast');
-  t.textContent = msg; t.className = 'show ' + cls;
-  clearTimeout(t._timer);
-  t._timer = setTimeout(() => t.className = '', 3000);
+// ─── Formatters ───────────────────────────────────────────────────────────
+const fmt = v => 'R$ ' + (parseFloat(v) || 0).toLocaleString('pt-BR', { minimumFractionDigits: 2 });
+const parseNum = v => parseFloat((v || '0').replace(/\./g,'').replace(',','.')) || 0;
+const setText = (id, t) => { const e = document.getElementById(id); if (e) e.textContent = t; };
+const setVal = (id, v) => { const e = document.getElementById(id); if (e) e.value = v; };
+const val = id => { const e = document.getElementById(id); return e ? e.value : ''; };
+
+// ─── Tables config ────────────────────────────────────────────────────────
+const TABLES = {
+  'tbl-sangrias':       { field: 'sangrias',       cols: ['hora','retirada','gerente'] },
+  'tbl-despesas':       { field: 'despesas',       cols: ['desc','obs','valor'] },
+  'tbl-pix':            { field: 'pix',             cols: ['nome','valor'] },
+  'tbl-vales':          { field: 'vales',           cols: ['nome','valor'] },
+  'tbl-receber':        { field: 'receber',         cols: ['nome','valor'] },
+  'tbl-cancelamentos':  { field: 'cancelamentos',   cols: ['numero','valor','motivo'] },
+  'tbl-cartao-credito':    { field: 'cartoes.credito',    cols: ['valor'] },
+  'tbl-cartao-debito':     { field: 'cartoes.debito',     cols: ['valor'] },
+  'tbl-cartao-alimentacao':{ field: 'cartoes.alimentacao',cols: ['valor'] },
+  'tbl-cartao-pix':        { field: 'cartoes.pix',        cols: ['valor'] },
+};
+
+function getField(tblId) {
+  const parts = TABLES[tblId].field.split('.');
+  let cur = estado;
+  for (const p of parts) cur = cur[p];
+  return cur;
 }
 
-function showLoad(msg = 'Aguarde…') {
-  document.getElementById('loading-msg').textContent = msg;
-  document.getElementById('loading').classList.add('show');
-}
-const hideLoad = () => document.getElementById('loading').classList.remove('show');
-
-function toggleSec(name) {
-  const body = document.getElementById('body-' + name);
-  const toggle = document.getElementById('toggle-' + name);
-  const hidden = body.style.display === 'none';
-  body.style.display = hidden ? '' : 'none';
-  toggle.textContent = hidden ? '▼' : '▲';
-}
-
-function getTableRows(tblId) {
-  const rows = [];
-  document.querySelectorAll(`#${tblId} tbody tr`).forEach(tr => {
-    const inputs = tr.querySelectorAll('input');
-    if (inputs[0]?.value) rows.push([inputs[0].value, inputs[1]?.value || '0']);
-  });
-  return rows;
-}
-
-function restoreTable(tblId, data) {
+function renderTable(tblId) {
+  const cfg = TABLES[tblId];
+  const rows = getField(tblId);
   const tbody = document.querySelector(`#${tblId} tbody`);
+  if (!tbody) return;
   tbody.innerHTML = '';
-  (data || []).forEach(([desc, valor]) => addTableRow(tblId, desc, valor));
-  const fn = tblId === 'tbl-despesas' ? addDespesa : addReceber;
-  if (!data?.length) fn();
+  rows.forEach((r, i) => {
+    const tr = document.createElement('tr');
+    cfg.cols.forEach(col => {
+      const td = document.createElement('td');
+      if (col === 'valor' || col === 'retirada') td.className = 'num';
+      const inp = document.createElement('input');
+      inp.type = 'text';
+      inp.value = r[col] !== undefined ? (r[col] === 0 ? '' : r[col]) : '';
+      inp.placeholder = col === 'valor' || col === 'retirada' ? '0,00' : '';
+      inp.dataset.tbl = tblId;
+      inp.dataset.row = i;
+      inp.dataset.col = col;
+      inp.addEventListener('input', onTableInput);
+      inp.addEventListener('blur', onCellBlur);
+      td.appendChild(inp);
+      tr.appendChild(td);
+    });
+    const delTd = document.createElement('td');
+    const delBtn = document.createElement('button');
+    delBtn.className = 'row-del';
+    delBtn.innerHTML = '✕';
+    delBtn.title = 'Remover';
+    delBtn.dataset.tbl = tblId;
+    delBtn.dataset.row = i;
+    delBtn.addEventListener('click', onDeleteRow);
+    delTd.appendChild(delBtn);
+    tr.appendChild(delTd);
+    tbody.appendChild(tr);
+  });
 }
 
-function addDespesa() { addTableRow('tbl-despesas'); }
-function addReceber() { addTableRow('tbl-receber'); }
-
-function addTableRow(tblId, desc = '', valor = '') {
-  const tbody = document.querySelector(`#${tblId} tbody`);
-  const tr = document.createElement('tr');
-  tr.innerHTML = `
-    <td><input value="${escHtml(desc)}" placeholder="Descricao" onchange="calcular()"></td>
-    <td><input type="number" value="${valor}" step="0.01" placeholder="0,00" oninput="calcular()"></td>
-    <td><button class="btn-remove" onclick="this.closest('tr').remove();calcular()">✕</button></td>`;
-  tbody.appendChild(tr);
-}
-
-const escHtml = s => (s||'').replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
-
-function limparForm() {
-  if (!confirm('Limpar formulario? Rascunho local sera mantido.')) return;
-  document.getElementById('f-saldo-troco').value = '';
-  document.getElementById('f-fechamento').value = '';
-  document.getElementById('f-vales').value = '';
-  document.getElementById('f-credito').value = '';
-  document.getElementById('f-debito').value = '';
-  document.getElementById('f-alimentacao').value = '';
-  document.getElementById('f-voucher').value = '';
-  document.getElementById('f-cancelamentos').value = '';
-  document.getElementById('f-observacoes').value = '';
-  document.querySelectorAll('#tbl-despesas tbody tr, #tbl-receber tbody tr').forEach(r => r.remove());
-  estado.uuid = null;
-  estado.id_local = null;
-  estado.observacoes = 'rascunho';
-  calcular();
-  toast('Formulario limpo');
-}
-
-function atualizarSyncBadge(status) {
-  const b = document.getElementById('sync-badge');
-  if (status === 'synced') {
-    b.textContent = '● Sincronizado'; b.className = 'sync-badge synced';
-  } else if (status === 'error') {
-    b.textContent = '● Erro'; b.className = 'sync-badge error';
+function onTableInput(e) {
+  const { tbl, row, col } = e.target.dataset;
+  const field = getField(tbl);
+  if (!field || !field[row]) return;
+  if (col === 'valor' || col === 'retirada') {
+    field[row][col] = parseNum(e.target.value);
   } else {
-    b.textContent = '● Local'; b.className = 'sync-badge';
+    field[row][col] = e.target.value;
+  }
+  updateTotals();
+  scheduleSave();
+}
+
+function onCellBlur(e) {
+  const { col } = e.target.dataset;
+  if (col === 'valor' || col === 'retirada') {
+    const v = parseNum(e.target.value);
+    e.target.value = isNaN(v) || v === 0 ? '' : v.toLocaleString('pt-BR', { minimumFractionDigits: 2 });
+    updateTotals();
   }
 }
 
-// ── Config Modal ─────────────────────────────────────────────────────────
-function abrirConfig() {
-  document.getElementById('modal-config').style.display = 'flex';
+function onDeleteRow(e) {
+  const { tbl, row } = e.target.dataset;
+  const field = getField(tbl);
+  if (field) { field.splice(parseInt(row), 1); renderTable(tbl); updateTotals(); scheduleSave(); }
 }
-function fecharConfig() {
-  document.getElementById('modal-config').style.display = 'none';
-}
-async function detectarImpressora() {
-  const status = document.getElementById('cfg-status');
-  status.textContent = 'Detectando…';
-  try {
-    const path = await invoke('detectar_impressora');
-    if (path) {
-      status.textContent = 'Encontrada: ' + path;
-      toast('Impressora detectada!', 'success');
-    } else {
-      status.textContent = 'Nenhuma impressora USB encontrada.';
+
+document.querySelectorAll('.add-btn[data-tbl]').forEach(btn => {
+  btn.addEventListener('click', () => {
+    const tblId = btn.dataset.tbl;
+    const cfg = TABLES[tblId];
+    const field = getField(tblId);
+    if (!field) return;
+    const empty = {};
+    cfg.cols.forEach(c => { empty[c] = c === 'valor' || c === 'retirada' ? 0 : ''; });
+    field.push(empty);
+    renderTable(tblId);
+    const lastTr = document.querySelector(`#${tblId} tbody tr:last-child`);
+    if (lastTr) {
+      const inp = lastTr.querySelector('input');
+      if (inp) inp.focus();
     }
-  } catch(e) {
-    status.textContent = 'Erro: ' + e;
+  });
+});
+
+// ─── Totals ──────────────────────────────────────────────────────────────
+function updateTotals() {
+  const totalIds = {
+    'tbl-sangrias': 'total-sangrias',
+    'tbl-despesas': 'total-despesas',
+    'tbl-pix': 'total-pix',
+    'tbl-vales': 'total-vales',
+    'tbl-receber': 'total-receber',
+    'tbl-cancelamentos': 'total-cancelamentos',
+    'tbl-cartao-credito': 'total-cartao-credito',
+    'tbl-cartao-debito': 'total-cartao-debito',
+    'tbl-cartao-alimentacao': 'total-cartao-alimentacao',
+    'tbl-cartao-pix': 'total-cartao-pix',
+  };
+
+  Object.entries(totalIds).forEach(([tblId, totalId]) => {
+    const field = getField(tblId);
+    if (!field) return;
+    const col = 'valor';
+    const total = field.reduce((s, r) => s + (parseFloat(r[col]) || 0), 0);
+    setText(totalId, fmt(total));
+  });
+
+  // SYS values
+  const sysTroco   = parseNum(val('sys-troco'));
+  const sysCred    = parseNum(val('sys-credito'));
+  const sysDeb     = parseNum(val('sys-debito'));
+  const sysAli     = parseNum(val('sys-alimentacao'));
+  const sysVales   = parseNum(val('sys-vales'));
+  const sysRec     = parseNum(val('sys-receber'));
+  const sysPix     = parseNum(val('sys-pix'));
+  const sysTotal   = sysTroco + sysCred + sysDeb + sysAli + sysVales + sysRec + sysPix;
+  setText('sys-total', fmt(sysTotal));
+  setText('sys-total-inline', fmt(sysTotal));
+
+  // Soma cartões
+  const somaCartoes =
+    (estado.cartoes.credito.reduce((s,r) => s+(r.valor||0), 0)) +
+    (estado.cartoes.debito.reduce((s,r) => s+(r.valor||0), 0)) +
+    (estado.cartoes.alimentacao.reduce((s,r) => s+(r.valor||0), 0)) +
+    (estado.cartoes.pix.reduce((s,r) => s+(r.valor||0), 0));
+  setText('soma-cartoes', fmt(somaCartoes));
+
+  // Fechamento total
+  const fd = parseNum(val('f-fech-dinheiro'));
+  const fc = parseNum(val('f-fech-cartoes'));
+  const fr = parseNum(val('f-fech-receber'));
+  const fechTotal = fd + fc + fr;
+  setText('fech-total', fmt(fechTotal));
+
+  // Diferença
+  const se = parseNum(val('f-saldo-esperado'));
+  const diff = se - fechTotal;
+  estado.diferenca = diff;
+  const difEl = document.getElementById('diferenca');
+  if (difEl) {
+    difEl.textContent = fmt(diff);
+    difEl.className = 'dif-value ' + (diff === 0 ? 'zero' : diff > 0 ? 'pos' : 'neg');
   }
 }
 
-// ── Tauri event listeners ────────────────────────────────────────────────
-window.__TAURI__.core.listen('tauri://error', e => {
-  console.error('Tauri error:', e);
-  toast('Erro interno: ' + e, 'error');
+// ─── System values inputs ────────────────────────────────────────────────
+['sys-troco','sys-credito','sys-debito','sys-alimentacao','sys-vales','sys-receber','sys-pix'].forEach(id => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.addEventListener('input', () => { updateTotals(); scheduleSave(); });
+  el.addEventListener('blur', () => {
+    const v = parseNum(el.value);
+    el.value = isNaN(v) || v === 0 ? '' : v.toLocaleString('pt-BR', { minimumFractionDigits: 2 });
+    updateTotals();
+  });
 });
 
-// ── Wire events ──────────────────────────────────────────────────────────
-document.getElementById('sel-loja').addEventListener('change', async e => {
-  estado.loja = e.target.value;
-  document.getElementById('loja-label').textContent = estado.loja;
-  await invoke('set_loja', { loja: estado.loja }).catch(() => {});
-  await carregarOperadores();
-  scheduleAutoSave();
-});
-['inp-data','sel-turno','sel-operador'].forEach(id => {
-  document.getElementById(id)?.addEventListener('change', scheduleAutoSave);
-});
-document.querySelectorAll('input, textarea, select').forEach(el => {
-  el.addEventListener('input', scheduleAutoSave);
+// ─── Fechamento inputs ────────────────────────────────────────────────────
+['f-fech-dinheiro','f-fech-cartoes','f-fech-receber','f-saldo-esperado'].forEach(id => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.addEventListener('input', () => {
+    if (id === 'f-saldo-esperado') estado.saldo_esperado = parseNum(el.value);
+    updateTotals();
+    scheduleSave();
+  });
+  el.addEventListener('blur', () => {
+    const v = parseNum(el.value);
+    el.value = isNaN(v) || v === 0 ? '' : v.toLocaleString('pt-BR', { minimumFractionDigits: 2 });
+    updateTotals();
+  });
 });
 
-// Start
-init();
+// ─── Metadata ────────────────────────────────────────────────────────────
+['f-data','f-operador','f-turno','f-loja'].forEach(id => {
+  const el = document.getElementById(id);
+  if (!el) return;
+  el.addEventListener('change', () => {
+    estado.data = val('f-data');
+    estado.operador = val('f-operador');
+    estado.turno = val('f-turno');
+    estado.loja = val('f-loja');
+    syncHeader();
+    scheduleSave();
+  });
+});
+
+function syncHeader() {
+  setText('loja-nome', estado.loja);
+  const idStr = `${estado.loja}_${estado.data}_op`;
+  setText('fechamento-id', idStr);
+}
+
+// ─── Init ────────────────────────────────────────────────────────────────
+function init() {
+  const today = new Date().toISOString().split('T')[0];
+  setVal('f-data', today);
+  estado.data = today;
+  setVal('f-loja', estado.loja);
+  syncHeader();
+  Object.keys(TABLES).forEach(renderTable);
+  updateTotals();
+}
+
+// ─── LocalStorage ────────────────────────────────────────────────────────
+const LS_KEY = 'fc_v3';
+function saveState() {
+  estado.updatedAt = new Date().toISOString();
+  try { localStorage.setItem(LS_KEY, JSON.stringify(estado)); } catch(e) {}
+}
+function loadState() {
+  try {
+    const raw = localStorage.getItem(LS_KEY);
+    if (!raw) return false;
+    const saved = JSON.parse(raw);
+    Object.assign(estado, saved);
+    setVal('f-data', estado.data || '');
+    setVal('f-operador', estado.operador || '');
+    setVal('f-turno', estado.turno || '');
+    setVal('f-loja', estado.loja || 'União');
+    // system values
+    const sysMap = { sysTroco:'sys-troco', sysCred:'sys-credito', sysDeb:'sys-debito',
+      sysAli:'sys-alimentacao', sysVales:'sys-vales', sysRec:'sys-receber', sysPix:'sys-pix' };
+    Object.entries(sysMap).forEach(([k, id]) => {
+      if (saved[k] !== undefined) setVal(id, saved[k] === 0 ? '' : saved[k].toLocaleString('pt-BR'));
+    });
+    setVal('f-saldo-esperado', estado.saldo_esperado === 0 ? '' : estado.saldo_esperado.toLocaleString('pt-BR'));
+    syncHeader();
+    Object.keys(TABLES).forEach(renderTable);
+    updateTotals();
+    return true;
+  } catch(e) { return false; }
+}
+
+// ─── Tauri backend ───────────────────────────────────────────────────────
+let _saveTimer = null;
+function scheduleSave() {
+  clearTimeout(_saveTimer);
+  _saveTimer = setTimeout(() => { saveState(); if (window.__TAURI__) tauriSave(); }, 1000);
+}
+
+async function tauriSave() {
+  try {
+    const { invoke } = window.__TAURI__.core;
+    await invoke('salvar_fechamento', { estado });
+  } catch(e) { console.warn('tauri save error', e); }
+}
+
+async function tauriEnviar() {
+  const { invoke } = window.__TAURI__.core;
+  return await invoke('sb_salvar_fechamento', { estado });
+}
+
+async function tauriRecibo() {
+  const { invoke } = window.__TAURI__.core;
+  return await invoke('imprimir_recibo', { estado });
+}
+
+// ─── Button handlers ─────────────────────────────────────────────────────
+document.getElementById('btn-enviar')?.addEventListener('click', async () => {
+  if (!confirm('Enviar fechamento para o servidor?')) return;
+  const btn = document.getElementById('btn-enviar');
+  btn.disabled = true;
+  try {
+    await tauriEnviar();
+    alert('Fechamento enviado com sucesso!');
+  } catch(e) {
+    alert('Erro ao enviar: ' + (e.message || e));
+  } finally {
+    btn.disabled = false;
+  }
+});
+
+document.getElementById('btn-recibo')?.addEventListener('click', async () => {
+  try { await tauriRecibo(); } catch(e) { alert('Erro ao imprimir: ' + (e.message || e)); }
+});
+
+document.getElementById('btn-limpar')?.addEventListener('click', () => {
+  if (!confirm('Limpar todos os dados deste rascunho?')) return;
+  localStorage.removeItem(LS_KEY);
+  location.reload();
+});
+
+document.getElementById('btn-anterior')?.addEventListener('click', () => {
+  const d = new Date(estado.data);
+  d.setDate(d.getDate() - 1);
+  const prev = d.toISOString().split('T')[0];
+  setVal('f-data', prev);
+  estado.data = prev;
+  syncHeader();
+  scheduleSave();
+});
+
+// ─── Boot ───────────────────────────────────────────────────────────────
+document.addEventListener('DOMContentLoaded', () => {
+  if (!loadState()) init();
+  // Auto-save on metadata input
+  document.addEventListener('change', e => {
+    if (['f-data','f-operador','f-turno','f-loja'].includes(e.target.id)) {
+      scheduleSave();
+    }
+  }, true);
+});
 </script>
 </body>
 </html>