diff --git a/src/index.html b/src/index.html
index 2593bde..1702e26 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,13 +5,14 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Fechamento de Caixa — O Frangão</title>
   <style>
-    /* ─── Reset & Base ─────────────────────────────────────────────────── */
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
     :root {
+      --orange: #e65100;
+      --orange-dark: #bf360c;
+      --orange-light: #ff8a50;
+      --orange-pale: #fff3e0;
+      --orange-row: #fff0e0;
       --red: #c0272d;
-      --red-dark: #9b1b1b;
-      --red-light: #fdf2f2;
-      --red-row: #fde8e8;
       --bg: #ffffff;
       --surface: #f7f7f7;
       --surface2: #f0f0f0;
@@ -19,337 +20,287 @@
       --text: #1a1a1a;
       --muted: #777;
       --green: #2e7d32;
-      --orange: #e65100;
       --radius: 6px;
       --font: 'Segoe UI', system-ui, -apple-system, sans-serif;
     }
-    html, body { height: 100%; }
-    body {
-      font-family: var(--font);
-      background: var(--bg);
-      color: var(--text);
-      display: flex;
-      flex-direction: column;
-      min-height: 100vh;
-    }
+    html, body { height: 100%; overflow: visible; }
+    body { font-family: var(--font); background: var(--bg); color: var(--text); display: flex; flex-direction: column; }
 
-    /* ─── Header ────────────────────────────────────────────────────────── */
+    /* ── HEADER ─────────────────────────────────────────────────────────── */
     .header {
-      background: var(--red);
-      color: #fff;
-      padding: 10px 20px;
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      flex-shrink: 0;
+      background: linear-gradient(135deg, #bf360c 0%, #e65100 50%, #ff8a50 100%);
+      color: #fff; padding: 8px 18px;
+      display: flex; align-items: center; justify-content: space-between;
+      flex-shrink: 0; gap: 14px;
     }
-    .header-title { font-size: 15px; font-weight: 700; }
-    .header-id { font-size: 11px; opacity: 0.85; font-family: monospace; }
+    .header-left { display: flex; align-items: center; gap: 14px; flex: 1; }
+    .header-title { font-size: 15px; font-weight: 700; white-space: nowrap; }
+    .header-logo { height: 38px; width: auto; max-width: 140px; object-fit: contain; border-radius: 6px; }
+    .header-id { font-size: 11px; font-family: monospace; opacity: 0.9; white-space: nowrap; }
+    .header .gear-btn {
+      background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
+      color: #fff; border-radius: var(--radius); padding: 5px 11px;
+      cursor: pointer; font-size: 13px; display: flex; align-items: center; gap: 5px;
+      font-weight: 600; font-family: var(--font); transition: background 0.2s;
+    }
+    .header .gear-btn:hover { background: rgba(255,255,255,0.25); }
 
-    /* ─── Metadata Bar ─────────────────────────────────────────────────── */
+    /* ── META BAR ────────────────────────────────────────────────────────── */
     .meta-bar {
-      background: var(--surface);
-      border-bottom: 1px solid var(--border);
-      padding: 10px 20px;
-      display: flex;
-      gap: 16px;
-      align-items: center;
-      flex-wrap: wrap;
+      background: var(--surface); border-bottom: 1px solid var(--border);
+      padding: 8px 18px; display: flex; gap: 14px; align-items: center;
       flex-shrink: 0;
     }
-    .meta-field {
-      display: flex;
-      flex-direction: column;
-      gap: 2px;
-    }
+    .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);
+      border: 1px solid var(--border); border-radius: var(--radius);
+      padding: 5px 9px; font-size: 13px; background: #fff; color: var(--text);
+      min-width: 115px; 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-input:focus, .meta-select:focus { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange-pale); }
     .meta-select { cursor: pointer; }
 
-    /* ─── Main single column ──────────────────────────────────────────── */
-    .main {
-      flex: 1;
-      overflow-y: auto;
-      padding: 16px 20px 8px;
-      display: flex;
-      flex-direction: column;
-      gap: 0;
-    }
+    /* ── MAIN 2 COLUMNS — single scroll, no internal scrollbars ──────────── */
+    .main { flex: 1; display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
+    .col { padding: 12px 16px; overflow: visible; }
+    .col-left { border-right: 1px solid var(--border); }
+    .col-right { background: var(--surface); display: flex; flex-direction: column; }
+    .col-right .section { flex-shrink: 0; }
+    .col-right .section:last-child { flex: 1; }
 
-    /* ─── Section ───────────────────────────────────────────────────────── */
-    .section { margin-bottom: 20px; }
+    /* ── SECTION ─────────────────────────────────────────────────────────── */
+    .section { margin-bottom: 14px; }
     .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;
+      font-size: 11px; font-weight: 700; color: var(--orange);
+      text-transform: uppercase; letter-spacing: 0.7px; padding: 4px 0;
+      margin-bottom: 5px; border-bottom: 2px solid var(--orange);
+      display: flex; align-items: center; gap: 5px;
     }
-    .section-note { font-size: 10px; color: var(--muted); margin: 3px 0 5px; }
 
-    /* ─── Table ─────────────────────────────────────────────────────────── */
-    table { width: 100%; border-collapse: collapse; font-size: 12px; }
+    /* ── TABLE ─────────────────────────────────────────────────────────── */
+    table { width: 100%; border-collapse: collapse; font-size: 13px; }
     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;
+      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 { padding: 4px 6px; border: 1px solid var(--border); vertical-align: middle; }
+    td input, td select {
+      width: 100%; border: none; background: transparent;
+      font-size: 13px; padding: 4px 2px; outline: none; font-family: var(--font); color: var(--text);
     }
-    td input:focus, td textarea:focus { background: #fffde7; }
+    td input:focus, td select:focus { background: #fffde7; border-radius: 3px; }
     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); }
+    tr.total-row td { background: var(--orange-row); font-weight: 700; color: var(--orange); font-size: 13px; }
+    tfoot td { background: var(--surface2); font-weight: 700; font-size: 13px; }
+    tfoot td:last-child { text-align: right; }
 
     .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;
+      width: 26px; height: 26px; 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;
+      display: inline-flex; align-items: center; gap: 4px;
+      background: var(--orange); color: #fff; border: none; border-radius: var(--radius);
+      padding: 5px 12px; font-size: 11px; cursor: pointer; font-weight: 600; margin-top: 5px;
     }
-    .add-btn:hover { background: var(--red-dark); }
+    .add-btn:hover { background: var(--orange-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 BOX ─────────────────────────────────────────────────────────── */
+    .sys-grid { 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;
+      display: flex; justify-content: space-between; align-items: center;
+      padding: 7px 12px; border-bottom: 1px solid var(--border);
+      font-size: 13px; background: #fff;
     }
-    .sys-row:nth-child(odd) { background: var(--surface); }
+    .sys-row:nth-child(even) { 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.total { background: var(--orange-row); font-weight: 700; color: var(--orange); }
+    .sys-row .lbl { color: var(--muted); font-size: 12px; }
+    .sys-row.total .lbl { color: var(--orange); }
+    .sys-row .val { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; }
+    .sys-row.total .val { color: var(--orange); 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;
+      border: none; background: #e8f5e9; text-align: right; font-size: 13px;
+      font-family: var(--font); font-weight: 700; color: #2e7d32;
+      width: 90px; padding: 2px 4px; outline: none; border-radius: 3px;
     }
-    .sys-row input:focus { background: #fffde7; border-radius: 3px; }
+    .sys-row input:focus { background: #c8e6c9; }
+    .sys-row input.editable {
+      background: #fffde7; color: var(--text); cursor: text;
+    }
+    .sys-row input.editable:focus { background: #fff9c4; }
 
-    /* ─── 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;
-    }
+    /* ── FECHAMENTO COUNTED ──────────────────────────────────────────────── */
+    .fech-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
+    .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;
+      border: none; font-size: 17px; 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;
+      border: 1px solid var(--border); border-radius: var(--radius);
+      padding: 9px 14px; background: var(--orange-row);
+      display: flex; justify-content: space-between; align-items: center; margin-top: 8px;
     }
-    .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; }
+    .fech-total-label { font-size: 11px; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: 0.5px; }
+    .fech-total-value { font-size: 16px; font-weight: 700; color: var(--orange); font-variant-numeric: tabular-nums; }
 
-    /* ─── Diferença ──────────────────────────────────────────────────── */
+    /* ── 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;
+      border: 2px solid var(--border); border-radius: var(--radius);
+      padding: 10px 16px; display: flex; justify-content: space-between; align-items: center;
     }
     .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.pos, .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;
+    /* ── SALDO ESPERADO ─────────────────────────────────────────────────── */
+    .saldo-esperado-wrap { margin-top: 6px; }
+    .saldo-esperado-wrap label { font-size: 10px; text-transform: uppercase; color: var(--muted); font-weight: 700; letter-spacing: 0.4px; display: block; margin-bottom: 3px; }
+    .saldo-esperado-wrap input {
+      border: 1px solid var(--border); border-radius: var(--radius);
+      padding: 8px 10px; font-size: 16px; font-weight: 700; width: 100%;
+      font-family: var(--font); outline: none; text-align: right; color: var(--text);
     }
-    .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); }
+    .saldo-esperado-wrap input:focus { border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange-pale); }
 
-    /* ─── Footer ────────────────────────────────────────────────────────── */
+    /* ── CARDS (4 separate blocks) ─────────────────────────────────────── */
+    .cards-section {
+      background: var(--surface); border-top: 1px solid var(--border);
+      padding: 10px 18px; flex-shrink: 0;
+    }
+    .cards-header {
+      font-size: 11px; font-weight: 700; color: var(--orange);
+      text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 8px;
+      padding-bottom: 4px; border-bottom: 2px solid var(--orange);
+    }
+    .cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
+    .card-block { border: 1px solid var(--border); border-radius: var(--radius); overflow: visible; }
+    .card-block-header {
+      background: var(--orange); color: #fff; text-align: center;
+      font-size: 11px; font-weight: 700; text-transform: uppercase;
+      letter-spacing: 0.6px; padding: 6px 4px; border-radius: var(--radius) var(--radius) 0 0;
+    }
+    .card-block table { width: 100%; border-collapse: collapse; font-size: 13px; }
+    .card-block td { padding: 3px 6px; border: 1px solid var(--border); vertical-align: middle; }
+    .card-block td input {
+      width: 100%; border: none; background: transparent;
+      font-size: 13px; padding: 4px 2px; outline: none; font-family: var(--font); color: var(--text);
+    }
+    .card-block td input:focus { background: #fffde7; border-radius: 3px; }
+    .card-block td.num { text-align: right; }
+    .card-block td.num input { text-align: right; }
+    .card-block tfoot td { background: var(--orange-pale); font-weight: 700; color: var(--orange); font-size: 13px; text-align: right; }
+    .card-block .add-btn { width: calc(100% - 12px); justify-content: center; margin: 5px 6px 6px; }
+    .soma-row {
+      display: flex; justify-content: flex-end; align-items: center;
+      gap: 12px; padding: 7px 10px; background: var(--orange-pale);
+      border-radius: var(--radius); font-size: 13px; font-weight: 700; color: var(--orange); margin-top: 6px;
+    }
+    .soma-row span:last-child { font-size: 16px; }
+
+    /* ── 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;
-    }
-    .auto-save {
-      display: flex;
-      align-items: center;
-      gap: 6px;
-      font-size: 11px;
-      color: var(--muted);
-      margin-right: auto;
+      background: var(--surface); border-top: 1px solid var(--border);
+      padding: 8px 18px; display: flex; align-items: center; gap: 10px;
+      flex-shrink: 0; flex-wrap: wrap;
     }
+    .auto-save { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--muted); margin-right: auto; }
     .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);
+      border: 1px solid var(--border); background: #fff; border-radius: var(--radius);
+      padding: 7px 14px; 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); }
+    .btn-danger { background: var(--orange); color: #fff; border-color: var(--orange); font-size: 13px; padding: 8px 16px; }
+    .btn-danger:hover { background: var(--orange-dark); }
 
-    /* ─── Scrollbar ────────────────────────────────────────────────────── */
-    ::-webkit-scrollbar { width: 6px; }
+    /* ── MODAL ──────────────────────────────────────────────────────────── */
+    .modal-overlay {
+      display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.5);
+      z-index: 9999; justify-content: center; align-items: center;
+    }
+    .modal-overlay.open { display: flex; }
+    .modal {
+      background: #fff; border-radius: 10px; width: 560px; max-width: 95vw;
+      max-height: 85vh; display: flex; flex-direction: column;
+      box-shadow: 0 20px 60px rgba(0,0,0,0.3); overflow: hidden;
+    }
+    .modal-header {
+      background: linear-gradient(135deg, #bf360c, #e65100);
+      color: #fff; padding: 13px 20px;
+      display: flex; align-items: center; justify-content: space-between; flex-shrink: 0;
+    }
+    .modal-header h2 { font-size: 15px; font-weight: 700; }
+    .modal-close {
+      background: rgba(255,255,255,0.2); border: none; color: #fff;
+      border-radius: 4px; width: 28px; height: 28px; cursor: pointer;
+      font-size: 16px; display: flex; align-items: center; justify-content: center;
+    }
+    .modal-close:hover { background: rgba(255,255,255,0.35); }
+    .modal-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
+    .cfg-section { margin-bottom: 18px; }
+    .cfg-section-title {
+      font-size: 11px; font-weight: 700; text-transform: uppercase;
+      letter-spacing: 0.6px; color: var(--orange);
+      padding-bottom: 4px; margin-bottom: 8px; border-bottom: 1px solid var(--border);
+    }
+    .cfg-item { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
+    .cfg-item input[type="text"] {
+      flex: 1; border: 1px solid var(--border); border-radius: var(--radius);
+      padding: 6px 10px; font-size: 13px; font-family: var(--font); outline: none;
+    }
+    .cfg-item input[type="text"]:focus { border-color: var(--orange); }
+    .cfg-item .btn-rm {
+      width: 26px; height: 26px; border: none; background: #fee2e2;
+      color: var(--red); border-radius: 4px; cursor: pointer; font-size: 13px;
+      display: flex; align-items: center; justify-content: center;
+    }
+    .btn-add-config {
+      display: inline-flex; align-items: center; gap: 4px;
+      background: var(--orange); color: #fff; border: none; border-radius: var(--radius);
+      padding: 5px 12px; font-size: 11px; cursor: pointer; font-weight: 600; margin-top: 4px;
+    }
+    .btn-add-config:hover { background: var(--orange-dark); }
+    .modal-footer {
+      padding: 12px 20px; border-top: 1px solid var(--border);
+      display: flex; justify-content: flex-end; gap: 10px; flex-shrink: 0;
+    }
+    .modal-footer .btn-primary {
+      background: var(--orange); color: #fff; border: none; border-radius: var(--radius);
+      padding: 8px 20px; font-size: 13px; cursor: pointer; font-weight: 600; font-family: var(--font);
+    }
+    .modal-footer .btn-primary:hover { background: var(--orange-dark); }
+
+    /* ── Scrollbar ────────────────────────────────────────────────────── */
+    ::-webkit-scrollbar { width: 7px; }
     ::-webkit-scrollbar-track { background: var(--surface); }
     ::-webkit-scrollbar-thumb { background: #ccc; border-radius: 3px; }
   </style>
 </head>
 <body>
 
-<!-- ═══ HEADER ═══════════════════════════════════════════════════════════ -->
+<!-- ═══ 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 class="header-left">
+    <span class="header-title">Fechamento de Caixa</span>
+    <img class="header-logo" id="store-logo" src="./logo.png" alt="Logo" />
+    <span class="header-id" id="fechamento-id">—</span>
+  </div>
+  <button class="gear-btn" id="btn-config" title="Configurar">⚙️ Configurar</button>
 </div>
 
-<!-- ═══ METADATA BAR ═════════════════════════════════════════════════════ -->
+<!-- ═══ META BAR ════════════════════════════════════════════════════════ -->
 <div class="meta-bar">
   <div class="meta-field">
     <span class="meta-label">Data</span>
@@ -357,7 +308,7 @@
   </div>
   <div class="meta-field">
     <span class="meta-label">Operador</span>
-    <input type="text" class="meta-input" id="f-operador" placeholder="Ex: Isabelle" />
+    <input type="text" class="meta-input" id="f-operador" list="dl-operadores" placeholder="Ex: Isabelle" />
   </div>
   <div class="meta-field">
     <span class="meta-label">Turno</span>
@@ -377,335 +328,273 @@
   </div>
 </div>
 
-<!-- ═══ MAIN CONTENT ══════════════════════════════════════════════════════ -->
+<!-- ═══ MAIN 2 COLUMNS ════════════════════════════════════════════════ -->
 <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>
+  <!-- ── LEFT: entradas, sangrias, despesas, pix, vales, receber, cancelamentos ── -->
+  <div class="col col-left">
 
-  <!-- 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>
+    <!-- SANGRIAS -->
+    <div class="section">
+      <div class="section-header">💸 Sangrias</div>
+      <table id="tbl-sangrias"><thead><tr><th>Hora</th><th>Retirada (R$)</th><th>Gerente</th><th style="width:26px"></th></tr></thead><tbody></tbody><tfoot><tr class="total-row"><td colspan="2">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>
 
-  <!-- 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>
+    <!-- DESPESAS -->
+    <div class="section">
+      <div class="section-header">📝 Despesas</div>
+      <table id="tbl-despesas"><thead><tr><th>Descrição</th><th>Obs</th><th>Valor (R$)</th><th style="width:26px"></th></tr></thead><tbody></tbody><tfoot><tr class="total-row"><td colspan="2">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>
 
-  <!-- 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>
+    <!-- PIX CNPJ -->
+    <div class="section">
+      <div class="section-header">💳 PIX CNPJ</div>
+      <table id="tbl-pix"><thead><tr><th>Nome</th><th>Valor (R$)</th><th style="width:26px"></th></tr></thead><tbody></tbody><tfoot><tr class="total-row"><td>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>
 
-  <!-- À 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>
+    <!-- VALES -->
+    <div class="section">
+      <div class="section-header">💰 Vales (Funcionários)</div>
+      <table id="tbl-vales"><thead><tr><th>Nome</th><th>Obs</th><th>Valor (R$)</th><th style="width:26px"></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>
 
-  <!-- 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>
+    <!-- À RECEBER -->
+    <div class="section">
+      <div class="section-header">👥 À Receber (Clientes)</div>
+      <table id="tbl-receber"><thead><tr><th>Nome</th><th>Valor (R$)</th><th style="width:26px"></th></tr></thead><tbody></tbody><tfoot><tr class="total-row"><td>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>
+
+    <!-- CANCELAMENTOS -->
+    <div class="section">
+      <div class="section-header">❌ Cancelamentos</div>
+      <table id="tbl-cancelamentos"><thead><tr><th>Número</th><th>Valor (R$)</th><th>Motivo</th><th style="width:26px"></th></tr></thead><tbody></tbody><tfoot><tr class="total-row"><td colspan="1">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>
+
+  </div><!-- /col-left -->
+
+  <!-- ── RIGHT: saldo caixa, fechamento contado, diferença, obs ── -->
+  <div class="col col-right">
+
+    <!-- SALDO DE CAIXA -->
+    <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" class="editable" placeholder="0,00" /></div>
+        <div class="sys-row"><span class="lbl">Crédito (+)</span><input type="text" id="sys-credito" readonly tabindex="-1" /></div>
+        <div class="sys-row"><span class="lbl">Débito (+)</span><input type="text" id="sys-debito" readonly tabindex="-1" /></div>
+        <div class="sys-row"><span class="lbl">Alimentação (+)</span><input type="text" id="sys-alimentacao" readonly tabindex="-1" /></div>
+        <div class="sys-row"><span class="lbl">Vales (+)</span><input type="text" id="sys-vales" readonly tabindex="-1" /></div>
+        <div class="sys-row"><span class="lbl">À Receber (+)</span><input type="text" id="sys-receber" readonly tabindex="-1" /></div>
+        <div class="sys-row"><span class="lbl">PIX (+)</span><input type="text" id="sys-pix" readonly tabindex="-1" /></div>
+        <div class="sys-row total"><span class="lbl">TOTAL</span><span class="val" id="sys-total">R$ 0,00</span></div>
       </div>
     </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>
 
-  <!-- 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" />
+    <!-- SALDO ESPERADO -->
+    <div class="section">
+      <div class="section-header">🎯 Saldo Esperado</div>
+      <div class="saldo-esperado-wrap">
+        <label>Informe o saldo esperado (contado em caixa)</label>
+        <input type="text" id="f-saldo-esperado" placeholder="0,00" />
       </div>
     </div>
-    <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="add-btn" data-tbl="tbl-cartao-credito" style="margin:4px;width:calc(100% - 8px);justify-content:center">+</button>
+    <!-- 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</div><input type="text" id="f-fech-cartoes" placeholder="0,00" /></div>
+        <div class="fech-item"><div class="fech-item-label">À Receber</div><input type="text" id="f-fech-receber" placeholder="0,00" /></div>
       </div>
-      <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="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 class="fech-total">
+        <span class="fech-total-label">Total Programa</span>
+        <span class="fech-total-value" id="fech-total">R$ 0,00</span>
       </div>
     </div>
-    <div class="soma-row">
-      <span>Soma Cartões (todas as colunas)</span>
-      <span id="soma-cartoes">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>
+
+    <!-- OBS -->
+    <div class="section" style="flex:1;display:flex;flex-direction:column">
+      <div class="section-header">📝 Observações</div>
+      <textarea id="f-obs" rows="4" style="flex:1;width:100%;min-height:80px;border:1px solid var(--border);border-radius:var(--radius);padding:10px;font-size:15px;font-family:var(--font);resize:none" placeholder="Observações..."></textarea>
+    </div>
+
+  </div><!-- /col-right -->
 </div><!-- /main -->
 
-<!-- ═══ FOOTER ════════════════════════════════════════════════════════════════ -->
+<!-- ═══ CARTÕES ════════════════════════════════════════════════════════ -->
+<div class="cards-section">
+  <div class="cards-header">💳 Cartões</div>
+  <div class="cards-grid">
+
+    <div class="card-block">
+      <div class="card-block-header">Crédito</div>
+      <table id="tbl-cartao-credito"><thead><tr><th>Valor (R$)</th></tr></thead><tbody></tbody><tfoot><tr><td id="total-cartao-credito">R$ 0,00</td></tr></tfoot></table>
+      <button class="add-btn" data-tbl="tbl-cartao-credito">+</button>
+    </div>
+
+    <div class="card-block">
+      <div class="card-block-header">Débito</div>
+      <table id="tbl-cartao-debito"><thead><tr><th>Valor (R$)</th></tr></thead><tbody></tbody><tfoot><tr><td id="total-cartao-debito">R$ 0,00</td></tr></tfoot></table>
+      <button class="add-btn" data-tbl="tbl-cartao-debito">+</button>
+    </div>
+
+    <div class="card-block">
+      <div class="card-block-header">Alimentação</div>
+      <table id="tbl-cartao-alimentacao"><thead><tr><th>Valor (R$)</th></tr></thead><tbody></tbody><tfoot><tr><td id="total-cartao-alimentacao">R$ 0,00</td></tr></tfoot></table>
+      <button class="add-btn" data-tbl="tbl-cartao-alimentacao">+</button>
+    </div>
+
+    <div class="card-block">
+      <div class="card-block-header">PIX</div>
+      <table id="tbl-cartao-pix"><thead><tr><th>Valor (R$)</th></tr></thead><tbody></tbody><tfoot><tr><td id="total-cartao-pix">R$ 0,00</td></tr></tfoot></table>
+      <button class="add-btn" data-tbl="tbl-cartao-pix">+</button>
+    </div>
+
+  </div>
+  <div class="soma-row">
+    <span>Soma Cartões (todas as colunas)</span>
+    <span id="soma-cartoes">R$ 0,00</span>
+  </div>
+</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-anterior">✏️ 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 ══════════════════════════════════════════════════════════ -->
+<!-- ═══ CONFIG MODAL ══════════════════════════════════════════════════ -->
+<div class="modal-overlay" id="modal-config">
+  <div class="modal">
+    <div class="modal-header">
+      <h2>⚙️ Configurar Preenchimento Automático</h2>
+      <button class="modal-close" id="modal-close">✕</button>
+    </div>
+    <div class="modal-body">
+      <div class="cfg-section">
+        <div class="cfg-section-title">👤 Operadores</div>
+        <div id="cfg-operadores-list"></div>
+        <button class="btn-add-config" id="cfg-add-operador">+ Adicionar operador</button>
+      </div>
+      <div class="cfg-section">
+        <div class="cfg-section-title">👔 Gerentes</div>
+        <div id="cfg-gerentes-list"></div>
+        <button class="btn-add-config" id="cfg-add-gerente">+ Adicionar gerente</button>
+      </div>
+      <div class="cfg-section">
+        <div class="cfg-section-title">📝 Despesas (sugestões)</div>
+        <div id="cfg-despesas-list"></div>
+        <button class="btn-add-config" id="cfg-add-despesa">+ Adicionar despesa</button>
+      </div>
+      <div class="cfg-section">
+        <div class="cfg-section-title">👥 Clientes (À Receber)</div>
+        <div id="cfg-clientes-list"></div>
+        <button class="btn-add-config" id="cfg-add-cliente">+ Adicionar cliente</button>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <button class="btn-primary" id="cfg-salvar">Salvar Configuração</button>
+    </div>
+  </div>
+</div>
+
+<!-- ═══ CONFIRM MODAL ══════════════════════════════════════════════════ -->
+<div class="modal-overlay" id="modal-confirm">
+  <div class="modal" style="width:520px">
+    <div class="modal-header">
+      <h2>⚠️ Confirmar envio do fechamento</h2>
+      <button class="modal-close" id="confirm-close">✕</button>
+    </div>
+    <div class="modal-body">
+      <p style="font-size:13px;color:#444;margin-bottom:14px">
+        Tem certeza que deseja <strong>enviar este fechamento e encerrar o caixa?</strong>
+      </p>
+      <div id="confirm-summary" style="border:1px solid #b3d9f7;border-radius:8px;padding:12px;background:#f0f7ff;font-size:12px;font-family:monospace">
+      </div>
+      <p style="font-size:11px;color:#888;margin-top:10px">
+        Após enviar, <strong>não dá pra editar este fechamento</strong> sem a senha do Filipe.
+      </p>
+    </div>
+    <div class="modal-footer" style="justify-content:space-between">
+      <button class="btn" id="confirm-print" style="color:#333">
+        🖨️ Imprimir Relatório
+      </button>
+      <div style="display:flex;gap:10px">
+        <button class="btn" id="confirm-cancel" style="border-color:var(--red);color:var(--red)">✕ Cancelar</button>
+        <button class="btn btn-danger" id="confirm-send">✓ Sim, enviar e encerrar</button>
+      </div>
+    </div>
+  </div>
+</div>
+
+<!-- ═══ JAVASCRIPT ══════════════════════════════════════════════════ -->
 <script>
 'use strict';
 
-// ─── State ────────────────────────────────────────────────────────────────
-let estado = {
-  uuid: crypto.randomUUID ? crypto.randomUUID() : Date.now().toString(),
-  loja: 'União',
-  data: '',
-  operador: '',
-  turno: '',
-  saldo_troco: 0,
-  fechamento: 0,
-  saldo_esperado: 0,
-  diferenca: 0,
-  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'
+// ─── Config ────────────────────────────────────────────────────────────────
+let config = {
+  operadores: ['Isabelle', 'Silvanea', 'Rafael'],
+  gerentes: ['Carlos', 'Ana', 'João'],
+  despesas: ['Energia', 'Água', 'Manutenção', 'Limpeza', 'Insumos'],
+  clientes: []
 };
 
-// ─── Formatters ───────────────────────────────────────────────────────────
+// ─── App State ────────────────────────────────────────────────────────────
+let estado = {
+  uuid: crypto.randomUUID ? crypto.randomUUID() : Date.now().toString(),
+  loja: 'União', data: '', operador: '', turno: '',
+  saldo_troco: 0, fechamento: 0, saldo_esperado: 0, diferenca: 0,
+  despesas: [], sangrias: [], pixcnpj: [], vales: [], receber: [], cancelamentos: [],
+  cartoes: { credito: [], debito: [], alimentacao: [], pix: [] },
+  fechamento_contado: { dinheiro: 0, cartoes: 0, receber: 0 },
+  observacoes: '', id_local: null, sync_status: 'local'
+};
+
+// ─── Helpers ──────────────────────────────────────────────────────────────
 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 : ''; };
+const fmtNum = v => { const n = parseNum(v); return isNaN(n) ? '' : n.toLocaleString('pt-BR', { minimumFractionDigits: 2 }); };
 
-// ─── Tables config ────────────────────────────────────────────────────────
+// Format time: 4 digits → HH:MM
+function fmtTime(v) {
+  const digits = (v || '').replace(/\D/g, '').slice(0, 4);
+  if (digits.length <= 2) return digits;
+  return digits.slice(0, 2) + ':' + digits.slice(2);
+}
+
+// ─── Tables ───────────────────────────────────────────────────────────────
 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'] },
+  'tbl-sangrias':       { field: 'sangrias',       cols: ['hora','retirada','gerente'],  enterNav: { hora:'retirada', retirada:'gerente', gerente:'_nextRow' } },
+  'tbl-despesas':       { field: 'despesas',        cols: ['desc','obs','valor'],          enterNav: { desc:'obs', obs:'valor', valor:'_nextRow' } },
+  'tbl-pix':            { field: 'pixcnpj',          cols: ['nome','valor'],                enterNav: { nome:'valor', valor:'_nextRow' } },
+  'tbl-vales':          { field: 'vales',            cols: ['nome','obs','valor'],          enterNav: { nome:'obs', obs:'valor', valor:'_nextRow' } },
+  'tbl-receber':        { field: 'receber',          cols: ['nome','valor'],                enterNav: { nome:'valor', valor:'_nextRow' } },
+  'tbl-cancelamentos':  { field: 'cancelamentos',    cols: ['numero','valor','motivo'],    enterNav: { numero:'valor', valor:'motivo', motivo:'_nextRow' } },
+  'tbl-cartao-credito':     { field: 'cartoes.credito',     cols: ['valor'], enterNav: { valor:'_nextRow' } },
+  'tbl-cartao-debito':       { field: 'cartoes.debito',      cols: ['valor'], enterNav: { valor:'_nextRow' } },
+  'tbl-cartao-alimentacao':  { field: 'cartoes.alimentacao', cols: ['valor'], enterNav: { valor:'_nextRow' } },
+  'tbl-cartao-pix':          { field: 'cartoes.pix',         cols: ['valor'], enterNav: { valor:'_nextRow' } },
 };
 
 function getField(tblId) {
@@ -715,41 +604,49 @@ function getField(tblId) {
   return cur;
 }
 
+function makeRow(tblId, rowIndex, rowData) {
+  const cfg = TABLES[tblId];
+  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 = rowData[col] !== undefined ? (rowData[col] === 0 ? '' : rowData[col]) : '';
+    inp.placeholder = col === 'valor' || col === 'retirada' ? '0,00' : (col === 'hora' ? 'HH:MM' : '');
+    inp.dataset.tbl = tblId;
+    inp.dataset.row = rowIndex;
+    inp.dataset.col = col;
+    if (col === 'gerente') inp.setAttribute('list', 'dl-gerente');
+    if (col === 'desc') inp.setAttribute('list', 'dl-despesa');
+    if (col === 'nome') {
+      const listId = tblId === 'tbl-vales' ? 'dl-vales' : (tblId === 'tbl-receber' ? 'dl-cliente' : 'dl-generico');
+      inp.setAttribute('list', listId);
+    }
+    inp.addEventListener('input', onTableInput);
+    inp.addEventListener('blur', onCellBlur);
+    inp.addEventListener('keydown', onCellKeydown);
+    td.appendChild(inp);
+    tr.appendChild(td);
+  });
+  const delTd = document.createElement('td');
+  const delBtn = document.createElement('button');
+  delBtn.className = 'row-del';
+  delBtn.innerHTML = '✕';
+  delBtn.dataset.tbl = tblId;
+  delBtn.dataset.row = rowIndex;
+  delBtn.addEventListener('click', onDeleteRow);
+  delTd.appendChild(delBtn);
+  tr.appendChild(delTd);
+  return tr;
+}
+
 function renderTable(tblId) {
   const cfg = TABLES[tblId];
-  const rows = getField(tblId);
   const tbody = document.querySelector(`#${tblId} tbody`);
   if (!tbody) return;
   tbody.innerHTML = '';
-  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);
-  });
+  getField(tblId).forEach((r, i) => { tbody.appendChild(makeRow(tblId, i, r)); });
 }
 
 function onTableInput(e) {
@@ -758,6 +655,10 @@ function onTableInput(e) {
   if (!field || !field[row]) return;
   if (col === 'valor' || col === 'retirada') {
     field[row][col] = parseNum(e.target.value);
+  } else if (col === 'hora') {
+    const formatted = fmtTime(e.target.value);
+    if (formatted !== e.target.value) e.target.value = formatted;
+    field[row][col] = formatted;
   } else {
     field[row][col] = e.target.value;
   }
@@ -769,125 +670,247 @@ 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 });
+    e.target.value = isNaN(v) || v === 0 ? '' : fmtNum(v);
     updateTotals();
   }
 }
 
+function onCellKeydown(e) {
+  if (e.key !== 'Enter') return;
+  // Don't preventDefault — let the browser fill the datalist value first,
+  // then navigate after a tiny delay
+  setTimeout(() => {
+    const { tbl, row, col } = e.target.dataset;
+    const cfg = TABLES[tbl];
+    if (!cfg) return;
+    const next = cfg.enterNav[col];
+    if (next === '_nextRow') {
+      const nextRowIndex = parseInt(row) + 1;
+      if (nextRowIndex < getField(tbl).length) {
+        focusInput(tbl, nextRowIndex, cfg.cols[0]);
+      } else {
+        addRowAndFocus(tbl, cfg.cols[0]);
+      }
+    } else if (next) {
+      focusInput(tbl, parseInt(row), next);
+    }
+  }, 0);
+}
+
+function focusInput(tblId, rowIndex, col) {
+  const sel = `#${tblId} tbody tr:nth-child(${rowIndex + 1}) input[data-col="${col}"]`;
+  const inp = document.querySelector(sel);
+  if (inp) { inp.focus(); if (col === 'valor' || col === 'retirada' || col === 'hora') inp.select(); }
+}
+
+function addRowAndFocus(tblId, focusCol) {
+  const cfg = TABLES[tblId];
+  const field = getField(tblId);
+  const empty = {};
+  cfg.cols.forEach(c => { empty[c] = c === 'valor' || c === 'retirada' ? 0 : ''; });
+  field.push(empty);
+  renderTable(tblId);
+  focusInput(tblId, field.length - 1, focusCol);
+}
+
 function onDeleteRow(e) {
   const { tbl, row } = e.target.dataset;
   const field = getField(tbl);
-  if (field) { field.splice(parseInt(row), 1); renderTable(tbl); updateTotals(); scheduleSave(); }
+  if (field && field.length > 1) {
+    field.splice(parseInt(row), 1);
+    renderTable(tbl);
+    updateTotals();
+    scheduleSave();
+  } else {
+    const cfg = TABLES[tbl];
+    cfg.cols.forEach(c => { field[0][c] = c === 'valor' || c === 'retirada' ? 0 : ''; });
+    renderTable(tbl);
+    updateTotals();
+    scheduleSave();
+  }
 }
 
+// Add buttons
 document.querySelectorAll('.add-btn[data-tbl]').forEach(btn => {
   btn.addEventListener('click', () => {
     const tblId = btn.dataset.tbl;
     const cfg = TABLES[tblId];
+    if (!cfg) return;
     const field = getField(tblId);
-    if (!field) return;
     const empty = {};
-    cfg.cols.forEach(c => { empty[c] = c === 'valor' || c === 'retirada' ? 0 : ''; });
+    cfg.cols.forEach(c => { empty[c] = c === 'valor' ? 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();
-    }
+    focusInput(tblId, field.length - 1, cfg.cols[0]);
   });
 });
 
-// ─── Totals ──────────────────────────────────────────────────────────────
+// ─── 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',
-  };
+  // ── Sangrias ──
+  const sangriasTotal = estado.sangrias.reduce((s, r) => s + (parseFloat(r['retirada'] || 0) || 0), 0);
+  setText('total-sangrias', fmt(sangriasTotal));
 
-  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));
+  // ── Tabelas de valor ──
+  const map = {
+    'tbl-despesas':'despesas', 'tbl-pix':'pixcnpj', 'tbl-vales':'vales',
+    'tbl-receber':'receber', 'tbl-cancelamentos':'cancelamentos',
+  };
+  Object.entries(map).forEach(([tblId, fieldName]) => {
+    const total = estado[fieldName].reduce((s, r) => s + (parseFloat(r['valor'] || 0) || 0), 0);
+    setText(tblId.replace('tbl-','total-'), 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));
+  // ── Cartões ──
+  const cartCred = estado.cartoes.credito.reduce((s, r) => s + (r.valor || 0), 0);
+  const cartDeb  = estado.cartoes.debito.reduce((s, r) => s + (r.valor || 0), 0);
+  const cartAli  = estado.cartoes.alimentacao.reduce((s, r) => s + (r.valor || 0), 0);
+  const cartPix  = estado.cartoes.pix.reduce((s, r) => s + (r.valor || 0), 0);
 
-  // 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));
+  ['credito','debito','alimentacao','pix'].forEach(c => {
+    const total = estado.cartoes[c].reduce((s, r) => s + (r.valor || 0), 0);
+    setText(`total-cartao-${c}`, fmt(total));
+  });
+
+  const somaCartoes = cartCred + cartDeb + cartAli + cartPix;
   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));
+  // ── Saldo de Caixa — auto-populate readonly fields ──
+  // Crédito = total cartão crédito
+  document.getElementById('sys-credito').value = cartCred > 0 ? fmtNum(cartCred) : '';
+  // Débito = total cartão débito
+  document.getElementById('sys-debito').value  = cartDeb  > 0 ? fmtNum(cartDeb)  : '';
+  // Alimentação = total cartão alimentação
+  document.getElementById('sys-alimentacao').value = cartAli > 0 ? fmtNum(cartAli) : '';
+  // PIX = total cartão PIX + total PIX CNPJ
+  const pixCnpjTotal = estado.pixcnpj.reduce((s, r) => s + (parseFloat(r['valor'] || 0) || 0), 0);
+  document.getElementById('sys-pix').value = (cartPix + pixCnpjTotal) > 0 ? fmtNum(cartPix + pixCnpjTotal) : '';
+  // Vales = total vales
+  const valesTotal  = estado.vales.reduce((s, r) => s + (parseFloat(r['valor'] || 0) || 0), 0);
+  document.getElementById('sys-vales').value    = valesTotal    > 0 ? fmtNum(valesTotal)    : '';
+  // À Receber = total receber
+  const receberTotal = estado.receber.reduce((s, r) => s + (parseFloat(r['valor'] || 0) || 0), 0);
+  document.getElementById('sys-receber').value  = receberTotal > 0 ? fmtNum(receberTotal) : '';
 
-  // Diferença
-  const se = parseNum(val('f-saldo-esperado'));
-  const diff = se - fechTotal;
-  estado.diferenca = diff;
+  // SYS total
+  const sysTotal = parseNum(val('sys-troco')) + cartCred + cartDeb + cartAli + valesTotal + receberTotal + cartPix + pixCnpjTotal;
+  setText('sys-total', fmt(sysTotal));
+
+  // ── Fechamento Contado — auto-populate (readonly, filled from tables) ──
+  // Dinheiro = total sangrias
+  document.getElementById('f-fech-dinheiro').value = sangriasTotal > 0 ? fmtNum(sangriasTotal) : '';
+  // Cartões = total cartões (crédito+débito+alimentação+pix)
+  document.getElementById('f-fech-cartoes').value   = somaCartoes > 0 ? fmtNum(somaCartoes) : '';
+  // À Receber = total receber
+  document.getElementById('f-fech-receber').value   = receberTotal > 0 ? fmtNum(receberTotal) : '';
+
+  // Fechamento total
+  const fd = sangriasTotal;
+  const fc = somaCartoes;
+  const fr = receberTotal;
+  setText('fech-total', fmt(fd + fc + fr));
+
+  // Diferença = Saldo Esperado − Fechamento
+  const diff = parseNum(val('f-saldo-esperado')) - (fd + fc + fr);
   const difEl = document.getElementById('diferenca');
   if (difEl) {
     difEl.textContent = fmt(diff);
-    difEl.className = 'dif-value ' + (diff === 0 ? 'zero' : diff > 0 ? 'pos' : 'neg');
+    if (diff === 0) {
+      difEl.className = 'dif-value zero';
+    } else if (diff < 0 && diff >= -5) {
+      difEl.className = 'dif-value neg'; // OK − até −5
+    } else if (diff > 0 && diff <= 3) {
+      difEl.className = 'dif-value zero'; // OK + até 3
+    } else {
+      difEl.className = 'dif-value pos'; // Sobra > +3
+    }
   }
 }
 
-// ─── System values inputs ────────────────────────────────────────────────
-['sys-troco','sys-credito','sys-debito','sys-alimentacao','sys-vales','sys-receber','sys-pix'].forEach(id => {
-  const el = document.getElementById(id);
+// ─── Numeric input: auto ,00 on digit+blur pattern ───────────────────────
+// For fields that use datalist (text input), we need to avoid triggering
+// auto-formatter when the browser is about to fill from datalist.
+// Strategy: detect "comma-only" input and convert to ",00" immediately.
+// For normal digit input: add ,00 on blur (not on every digit).
+
+let _justEnteredDatalist = false;
+
+['troco','credito','debito','alimentacao','vales','receber','pix'].forEach(k => {
+  const el = document.getElementById(`sys-${k}`);
   if (!el) return;
-  el.addEventListener('input', () => { updateTotals(); scheduleSave(); });
+
+  // On input: handle comma-only typed as immediate ,00
+  el.addEventListener('input', () => {
+    const v = el.value;
+    // If user just typed a comma as last char (and no ,00 yet), convert to ,00
+    if (v.endsWith(',') && !v.endsWith(',00')) {
+      el.value = v + '00';
+      // Move cursor before the trailing 00
+      const pos = v.length; // position after the comma
+      setTimeout(() => { el.selectionStart = el.selectionEnd = pos; }, 0);
+    }
+    updateTotals(); scheduleSave();
+  });
+
+  // On Enter: trigger datalist, then blur+focus cycle
+  el.addEventListener('keydown', e => {
+    if (e.key === 'Enter') {
+      _justEnteredDatalist = true;
+      el.blur();
+      el.focus();
+      setTimeout(() => { _justEnteredDatalist = false; }, 400);
+    }
+  });
+
+  // On blur: format to proper number if it looks like a partial entry
   el.addEventListener('blur', () => {
+    if (_justEnteredDatalist) return;
     const v = parseNum(el.value);
-    el.value = isNaN(v) || v === 0 ? '' : v.toLocaleString('pt-BR', { minimumFractionDigits: 2 });
+    if (isNaN(v) || v === 0) {
+      el.value = '';
+    } else {
+      el.value = fmtNum(v);
+    }
     updateTotals();
   });
 });
 
-// ─── 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();
+    const v = el.value;
+    if (v.endsWith(',') && !v.endsWith(',00')) {
+      el.value = v + '00';
+      const pos = v.length;
+      setTimeout(() => { el.selectionStart = el.selectionEnd = pos; }, 0);
+    }
+    updateTotals(); scheduleSave();
   });
+
+  el.addEventListener('keydown', e => {
+    if (e.key === 'Enter') {
+      _justEnteredDatalist = true;
+      el.blur();
+      el.focus();
+      setTimeout(() => { _justEnteredDatalist = false; }, 400);
+    }
+  });
+
   el.addEventListener('blur', () => {
+    if (_justEnteredDatalist) return;
     const v = parseNum(el.value);
-    el.value = isNaN(v) || v === 0 ? '' : v.toLocaleString('pt-BR', { minimumFractionDigits: 2 });
+    if (isNaN(v) || v === 0) {
+      el.value = '';
+    } else {
+      el.value = fmtNum(v);
+    }
     updateTotals();
   });
 });
 
-// ─── Metadata ────────────────────────────────────────────────────────────
+// ─── Metadata ──────────────────────────────────────────────────────────────
 ['f-data','f-operador','f-turno','f-loja'].forEach(id => {
   const el = document.getElementById(id);
   if (!el) return;
@@ -902,25 +925,96 @@ function updateTotals() {
 });
 
 function syncHeader() {
-  setText('loja-nome', estado.loja);
-  const idStr = `${estado.loja}_${estado.data}_op`;
-  setText('fechamento-id', idStr);
+  setText('fechamento-id', `${estado.loja}_${estado.data}_op`);
+}
+
+// ─── Datalists ─────────────────────────────────────────────────────────────
+function buildDatalists() {
+  const lists = {
+    'dl-operadores': config.operadores,
+    'dl-gerente':   config.gerentes,
+    'dl-despesa':   config.despesas,
+    'dl-cliente':   config.clientes,
+    'dl-vales':     config.operadores,
+  };
+  Object.entries(lists).forEach(([id, items]) => {
+    let dl = document.getElementById(id);
+    if (!dl) { dl = document.createElement('datalist'); dl.id = id; document.body.appendChild(dl); }
+    dl.innerHTML = items.map(v => `<option value="${v}">`).join('');
+  });
+}
+
+// ─── Init ─────────────────────────────────────────────────────────────────
+const PRE_FILL_TABLES = Object.keys(TABLES);
+
+function ensureOneRow(tblId) {
+  const cfg = TABLES[tblId];
+  if (!cfg) return;
+  const field = getField(tblId);
+  if (field && field.length === 0) {
+    const empty = {};
+    cfg.cols.forEach(c => { empty[c] = c === 'valor' || c === 'retirada' ? 0 : ''; });
+    field.push(empty);
+  }
 }
 
-// ─── Init ────────────────────────────────────────────────────────────────
 function init() {
   const today = new Date().toISOString().split('T')[0];
   setVal('f-data', today);
   estado.data = today;
   setVal('f-loja', estado.loja);
   syncHeader();
+  PRE_FILL_TABLES.forEach(ensureOneRow);
   Object.keys(TABLES).forEach(renderTable);
   updateTotals();
 }
 
-// ─── LocalStorage ────────────────────────────────────────────────────────
-const LS_KEY = 'fc_v3';
+// ─── LocalStorage ──────────────────────────────────────────────────────────
+const LS_KEY = 'fc_v7';
+const CFG_KEY = 'fc_cfg';
+
+function buildEstadoForBackend() {
+  // Monta o objeto exactly as o backend espera (storage.rs → salvar_fechamento)
+  return {
+    uuid: estado.uuid,
+    id_local: estado.id_local,
+    loja: estado.loja,
+    data: estado.data,
+    operador: estado.operador,
+    turno: estado.turno,
+    saldo_troco: parseNum(val('sys-troco')),  // troco do sistema
+    saldo_esperado: parseNum(val('f-saldo-esperado')),
+    fechamento: parseNum(val('f-fech-dinheiro')) + parseNum(val('f-fech-cartoes')) + parseNum(val('f-fech-receber')),
+    diferenca: parseNum(val('f-saldo-esperado')) - (parseNum(val('f-fech-dinheiro')) + parseNum(val('f-fech-cartoes')) + parseNum(val('f-fech-receber'))),
+    despesas: estado.despesas.map(r => ({ desc: r.desc || '', obs: r.obs || '', valor: r.valor || 0 })),
+    sangrias: estado.sangrias.map(r => ({ hora: r.hora || '', retirada: r.retirada || 0, gerente: r.gerente || '' })),
+    pixcnpj: estado.pixcnpj.map(r => ({ nome: r.nome || '', valor: r.valor || 0 })),
+    vales: estado.vales.map(r => ({ nome: r.nome || '', obs: r.obs || '', valor: r.valor || 0 })),
+    receber: estado.receber.map(r => ({ nome: r.nome || '', valor: r.valor || 0 })),
+    cancelamentos: estado.cancelamentos.map(r => ({ numero: r.numero || '', valor: r.valor || 0, motivo: r.motivo || '' })),
+    cartoes: {
+      credito:     estado.cartoes.credito.map(r => r.valor || 0),
+      debito:      estado.cartoes.debito.map(r => r.valor || 0),
+      alimentacao: estado.cartoes.alimentacao.map(r => r.valor || 0),
+      pix:         estado.cartoes.pix.map(r => r.valor || 0),
+    },
+    observacoes: estado.observacoes,
+    sync_status: estado.sync_status,
+  };
+}
+
 function saveState() {
+  // Sync reactive fields from DOM before saving
+  estado.operador = val('f-operador');
+  estado.turno   = val('f-turno');
+  estado.loja     = val('f-loja');
+  estado.saldo_troco = parseNum(val('sys-troco'));
+  estado.saldo_esperado = parseNum(val('f-saldo-esperado'));
+  estado.fechamento_contado = {
+    dinheiro: parseNum(val('f-fech-dinheiro')),
+    cartoes:  parseNum(val('f-fech-cartoes')),
+    receber:  parseNum(val('f-fech-receber')),
+  };
   estado.updatedAt = new Date().toISOString();
   try { localStorage.setItem(LS_KEY, JSON.stringify(estado)); } catch(e) {}
 }
@@ -929,93 +1023,257 @@ function loadState() {
     const raw = localStorage.getItem(LS_KEY);
     if (!raw) return false;
     const saved = JSON.parse(raw);
+    // Merge carefully (cartoes may be in old format)
     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'));
+    setVal('f-obs', estado.observacoes || '');
+    setVal('f-saldo-esperado', estado.saldo_esperado === 0 ? '' : fmtNum(estado.saldo_esperado));
+    setVal('sys-troco', estado.saldo_troco === 0 ? '' : fmtNum(estado.saldo_troco));
+    setVal('f-fech-dinheiro', estado.fechamento_contado && estado.fechamento_contado.dinheiro ? fmtNum(estado.fechamento_contado.dinheiro) : '');
+    setVal('f-fech-cartoes',   estado.fechamento_contado && estado.fechamento_contado.cartoes   ? fmtNum(estado.fechamento_contado.cartoes)   : '');
+    setVal('f-fech-receber',   estado.fechamento_contado && estado.fechamento_contado.receber   ? fmtNum(estado.fechamento_contado.receber)   : '');
     syncHeader();
+    PRE_FILL_TABLES.forEach(ensureOneRow);
     Object.keys(TABLES).forEach(renderTable);
     updateTotals();
     return true;
   } catch(e) { return false; }
 }
+function loadConfig() {
+  try {
+    const raw = localStorage.getItem(CFG_KEY);
+    if (raw) config = { ...config, ...JSON.parse(raw) };
+  } catch(e) {}
+}
+function saveConfig() {
+  try { localStorage.setItem(CFG_KEY, JSON.stringify(config)); } catch(e) {}
+  buildDatalists();
+}
 
-// ─── Tauri backend ───────────────────────────────────────────────────────
+// ─── Config Modal ──────────────────────────────────────────────────────────
+function openConfig() {
+  document.getElementById('modal-config').classList.add('open');
+  renderCfgList('operadores', 'cfg-operadores-list');
+  renderCfgList('gerentes', 'cfg-gerentes-list');
+  renderCfgList('despesas', 'cfg-despesas-list');
+  renderCfgList('clientes', 'cfg-clientes-list');
+}
+function closeConfig() { document.getElementById('modal-config').classList.remove('open'); }
+function renderCfgList(key, containerId) {
+  const container = document.getElementById(containerId);
+  container.innerHTML = '';
+  config[key].forEach((item, i) => {
+    const div = document.createElement('div');
+    div.className = 'cfg-item';
+    div.innerHTML = `<input type="text" value="${item}" data-key="${key}" data-index="${i}" /><button class="btn-rm" data-key="${key}" data-index="${i}">✕</button>`;
+    container.appendChild(div);
+  });
+  container.querySelectorAll('.btn-rm').forEach(btn => {
+    btn.onclick = () => { const { key: k, index: idx } = btn.dataset; config[k].splice(parseInt(idx), 1); renderCfgList(k, containerId); };
+  });
+  container.querySelectorAll('input').forEach(inp => {
+    inp.addEventListener('change', () => { const { key: k, index: idx } = inp.dataset; config[k][parseInt(idx)] = inp.value; });
+  });
+}
+
+document.getElementById('btn-config').addEventListener('click', openConfig);
+document.getElementById('modal-close').addEventListener('click', closeConfig);
+document.getElementById('modal-config').addEventListener('click', e => { if (e.target.id === 'modal-config') closeConfig(); });
+
+['operador','gerente','despesa','cliente'].forEach((_, i) => {
+  const btnMap = ['cfg-add-operador','cfg-add-gerente','cfg-add-despesa','cfg-add-cliente'];
+  const keyMap = ['operadores','gerentes','despesas','clientes'];
+  const listMap = ['cfg-operadores-list','cfg-gerentes-list','cfg-despesas-list','cfg-clientes-list'];
+  document.getElementById(btnMap[i]).addEventListener('click', () => {
+    const k = keyMap[i]; config[k].push(''); renderCfgList(k, listMap[i]);
+    const inputs = document.getElementById(listMap[i]).querySelectorAll('input');
+    inputs[inputs.length - 1].focus();
+  });
+});
+
+document.getElementById('cfg-salvar').addEventListener('click', () => { saveConfig(); closeConfig(); scheduleSave(); });
+
+// ─── Tauri Commands ───────────────────────────────────────────────────────
 let _saveTimer = null;
 function scheduleSave() {
   clearTimeout(_saveTimer);
-  _saveTimer = setTimeout(() => { saveState(); if (window.__TAURI__) tauriSave(); }, 1000);
+  _saveTimer = setTimeout(() => { saveState(); if (window.__TAURI__) tauriSaveLocal(); }, 1000);
 }
 
-async function tauriSave() {
+async function tauriSaveLocal() {
   try {
-    const { invoke } = window.__TAURI__.core;
-    await invoke('salvar_fechamento', { estado });
-  } catch(e) { console.warn('tauri save error', e); }
+    const data = buildEstadoForBackend();
+    await window.__TAURI__.core.invoke('salvar_fechamento', { estado: data });
+  } catch(e) { console.warn('salvar_fechamento:', e); }
 }
 
 async function tauriEnviar() {
-  const { invoke } = window.__TAURI__.core;
-  return await invoke('sb_salvar_fechamento', { estado });
+  const data = buildEstadoForBackend();
+  // 1. Salva local
+  await window.__TAURI__.core.invoke('salvar_fechamento', { estado: data }).catch(e => console.warn('local save err:', e));
+  // 2. Envia Supabase
+  const result = await window.__TAURI__.core.invoke('sb_salvar_fechamento', { estado: data });
+  return result;
 }
 
 async function tauriRecibo() {
-  const { invoke } = window.__TAURI__.core;
-  return await invoke('imprimir_recibo', { estado });
+  const data = buildEstadoForBackend();
+  return await window.__TAURI__.core.invoke('imprimir_recibo', { estado: JSON.stringify(data) });
 }
 
-// ─── Button handlers ─────────────────────────────────────────────────────
-document.getElementById('btn-enviar')?.addEventListener('click', async () => {
-  if (!confirm('Enviar fechamento para o servidor?')) return;
-  const btn = document.getElementById('btn-enviar');
+async function tauriCarregarRascunho() {
+  const loja = val('f-loja') || 'União';
+  const data = val('f-data');
+  if (!data) return null;
+  try {
+    return await window.__TAURI__.core.invoke('carregar_rascunho', { loja, data });
+  } catch(e) { console.warn('carregar_rascunho:', e); return null; }
+}
+
+// ─── Confirm Modal ────────────────────────────────────────────────────────
+function openConfirmModal() {
+  const operador = val('f-operador').trim();
+  const turno = val('f-turno').trim();
+  const loja = val('f-loja').trim();
+  if (!operador || !turno || !loja) {
+    alert('⚠️ Preencha Operador, Turno e Loja antes de enviar.');
+    return;
+  }
+  // Build summary
+  const cartCred = estado.cartoes.credito.reduce((s,r) => s+(r.valor||0), 0);
+  const cartDeb  = estado.cartoes.debito.reduce((s,r) => s+(r.valor||0), 0);
+  const cartAli  = estado.cartoes.alimentacao.reduce((s,r) => s+(r.valor||0), 0);
+  const cartPix  = estado.cartoes.pix.reduce((s,r) => s+(r.valor||0), 0);
+  const sangrias = estado.sangrias.reduce((s,r) => s+(parseFloat(r.retirada||0)||0), 0);
+  const despesas = estado.despesas.reduce((s,r) => s+(r.valor||0), 0);
+  const vales    = estado.vales.reduce((s,r) => s+(r.valor||0), 0);
+  const receber  = estado.receber.reduce((s,r) => s+(r.valor||0), 0);
+  const cancelamentos = estado.cancelamentos.reduce((s,r) => s+(r.valor||0), 0);
+  const fechamento = parseNum(val('f-fech-dinheiro')) + parseNum(val('f-fech-cartoes')) + parseNum(val('f-fech-receber'));
+  const saldoEsp = parseNum(val('f-saldo-esperado'));
+  document.getElementById('confirm-summary').innerHTML =
+    `<div style="margin-bottom:6px"><strong>📅 Data:</strong> ${estado.data} &nbsp; <strong>👤 Operador:</strong> ${operador} &nbsp; <strong>⏰ Turno:</strong> ${turno} &nbsp; <strong>🏪 Loja:</strong> ${loja}</div>
+     <hr style="border:none;border-top:1px dashed #b3d9f7;margin:6px 0">
+     <div>💸 Sangrias: <strong>${fmt(sangrias)}</strong></div>
+     <div>📝 Despesas: <strong>${fmt(despesas)}</strong></div>
+     <div>💰 Vales: <strong>${fmt(vales)}</strong></div>
+     <div>👥 À Receber: <strong>${fmt(receber)}</strong></div>
+     <div>💳 Crédito: <strong style="color:#c0272d">${fmt(cartCred)}</strong></div>
+     <div>💳 Débito: <strong>${fmt(cartDeb)}</strong></div>
+     <div>💳 Alimentação: <strong>${fmt(cartAli)}</strong></div>
+     <div>❌ Cancelamentos: <strong>${fmt(cancelamentos)}</strong></div>
+     <div>📋 Fechamento: <strong>${fmt(fechamento)}</strong></div>
+     <hr style="border:none;border-top:1px dashed #b3d9f7;margin:6px 0">
+     <div>🎯 Saldo Esperado: <strong>${fmt(saldoEsp)}</strong></div>
+     <div style="margin-top:4px;font-size:10px;color:#888">ID: ${estado.loja}_${estado.data}_${estado.operador}</div>`;
+  document.getElementById('modal-confirm').classList.add('open');
+}
+
+function closeConfirmModal() {
+  document.getElementById('modal-confirm').classList.remove('open');
+}
+
+document.getElementById('confirm-close').addEventListener('click', closeConfirmModal);
+document.getElementById('confirm-cancel').addEventListener('click', closeConfirmModal);
+document.getElementById('modal-confirm').addEventListener('click', e => { if (e.target.id === 'modal-confirm') closeConfirmModal(); });
+
+// Print from confirm modal
+document.getElementById('confirm-print').addEventListener('click', async () => {
+  closeConfirmModal();
+  const btn = document.getElementById('btn-recibo');
   btn.disabled = true;
   try {
-    await tauriEnviar();
-    alert('Fechamento enviado com sucesso!');
+    await tauriRecibo();
+    alert('✅ Impressão enviada!');
   } catch(e) {
-    alert('Erro ao enviar: ' + (e.message || e));
+    alert('Erro ao imprimir: ' + (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)); }
+// Confirm send
+document.getElementById('confirm-send').addEventListener('click', async () => {
+  closeConfirmModal();
+  const btn = document.getElementById('btn-enviar');
+  btn.disabled = true;
+  btn.textContent = '⏳ Enviando...';
+  try {
+    const r = await tauriEnviar();
+    estado.sync_status = 'synced';
+    saveState();
+    alert('✅ Enviado com sucesso!');
+  } catch(e) {
+    await tauriSaveLocal();
+    alert('Erro ao enviar: ' + (e.message || e) + '\n(Dados salvos localmente)');
+  } finally {
+    btn.disabled = false;
+    btn.textContent = '💾 Enviar Fechamento';
+  }
 });
 
-document.getElementById('btn-limpar')?.addEventListener('click', () => {
-  if (!confirm('Limpar todos os dados deste rascunho?')) return;
+// ─── Buttons ───────────────────────────────────────────────────────────────
+document.getElementById('btn-enviar').addEventListener('click', () => {
+  openConfirmModal();
+});
+
+document.getElementById('btn-recibo').addEventListener('click', async () => {
+  const btn = document.getElementById('btn-recibo');
+  btn.disabled = true;
+  try {
+    await tauriRecibo();
+    alert('✅ Impressão enviada!');
+  } catch(e) {
+    alert('Erro ao imprimir: ' + (e.message || e));
+  } finally {
+    btn.disabled = false;
+  }
+});
+
+document.getElementById('btn-limpar').addEventListener('click', () => {
+  if (!confirm('Limpar rascunho? Esta acção não pode ser revertida.')) 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;
+document.getElementById('btn-anterior').addEventListener('click', async () => {
+  const d = new Date(estado.data); d.setDate(d.getDate() - 1);
+  const prevDate = d.toISOString().split('T')[0];
+  await tauriSaveLocal();
+  setVal('f-data', prevDate);
+  estado.data = prevDate;
+  estado.uuid = crypto.randomUUID ? crypto.randomUUID() : Date.now().toString();
+  estado.id_local = null;
   syncHeader();
+  const rascunho = await tauriCarregarRascunho();
+  if (rascunho) {
+    if (rascunho.operador) setVal('f-operador', rascunho.operador);
+    if (rascunho.turno) setVal('f-turno', rascunho.turno);
+    estado.operador = rascunho.operador || '';
+    estado.turno = rascunho.turno || '';
+    if (rascunho.saldo_troco) setVal('sys-troco', fmtNum(rascunho.saldo_troco));
+    if (rascunho.saldo_esperado) setVal('f-saldo-esperado', fmtNum(rascunho.saldo_esperado));
+    if (rascunho.despesas && Array.isArray(rascunho.despesas)) {
+      estado.despesas = rascunho.despesas.map(d => ({ desc: d.desc || d.descricao || '', obs: '', valor: d.valor || 0 }));
+    }
+  }
+  PRE_FILL_TABLES.forEach(ensureOneRow);
+  Object.keys(TABLES).forEach(renderTable);
+  updateTotals();
   scheduleSave();
 });
 
-// ─── Boot ───────────────────────────────────────────────────────────────
+
+document.getElementById('f-obs').addEventListener('input', e => { estado.observacoes = e.target.value; scheduleSave(); });
+
+// ─── Boot ─────────────────────────────────────────────────────────────────
 document.addEventListener('DOMContentLoaded', () => {
+  loadConfig();
+  buildDatalists();
   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>