:root{--navy:#0B1F3A;--navy2:#13294d;--gold:#c9a227;--goldl:#e6c963;--line:#e2e6e9;--ink:#0B1F3A;--muted:#5a6474}
*{box-sizing:border-box}
html,body{margin:0;height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;color:var(--ink);background:#f3f5f8;-webkit-tap-highlight-color:transparent}
.muted{color:var(--muted)}
button{font:inherit;cursor:pointer}

/* Topbar */
.top{display:flex;align-items:center;gap:18px;background:var(--navy);color:#fff;padding:10px 16px;position:sticky;top:0;z-index:10}
.brand{font-weight:800;letter-spacing:1px;font-size:1.05rem}.brand b{color:var(--goldl)}
.tabs{display:flex;gap:8px;flex:1;flex-wrap:wrap}
.tab{background:transparent;border:1px solid rgba(255,255,255,.18);color:#cfd8e8;border-radius:10px;padding:9px 14px;font-weight:600}
.tab.active{background:var(--gold);border-color:var(--gold);color:#15203f}
.cx-status{font-size:.85rem;color:#cfd8e8;white-space:nowrap}

main{padding:14px;max-width:1280px;margin:0 auto}
.view{display:none}.view.active{display:block}

/* Botões */
.btn{border:1px solid transparent;border-radius:10px;padding:12px 18px;font-weight:700;white-space:nowrap}
.btn-gold{background:linear-gradient(90deg,var(--goldl),var(--gold));color:#15203f}
.btn-gold:disabled{opacity:.5}
.btn-ghost{background:#fff;border-color:var(--line);color:var(--ink)}
.btn-danger{background:#b3261e;color:#fff}
.btn.big{width:100%;padding:16px;font-size:1.05rem}

/* PDV */
.pdv-grid{display:grid;grid-template-columns:1fr 360px;gap:14px}
@media(max-width:860px){.pdv-grid{grid-template-columns:1fr}}
.search-row input{width:100%;padding:14px 16px;border:1px solid var(--line);border-radius:12px;font-size:1rem}
.prod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px}
.prod-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;text-align:left;display:flex;flex-direction:column;gap:6px;min-height:96px}
.prod-card:active{transform:scale(.98)}
.prod-card .nm{font-weight:700;font-size:.95rem;line-height:1.2}
.prod-card .pr{color:var(--gold);font-weight:800}
.prod-card .es{font-size:.75rem;color:var(--muted)}

/* Carrinho */
.cart{background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;position:sticky;top:74px;height:fit-content}
.cart h3{margin:0 0 10px}
.cart-items{max-height:48vh;overflow:auto;display:flex;flex-direction:column;gap:8px}
.ci{display:flex;align-items:center;gap:8px;border-bottom:1px solid #f0f2f5;padding-bottom:8px}
.ci .nm{flex:1;font-size:.9rem}
.ci .qtd{display:flex;align-items:center;gap:6px}
.ci .qtd button{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:#f7f8fa;font-weight:800}
.ci .sub{width:78px;text-align:right;font-weight:700}
.cart-total{display:flex;justify-content:space-between;font-size:1.3rem;font-weight:800;margin:14px 0}
.cart .btn{margin-top:8px}

/* Tabelas */
.bar{display:flex;align-items:center;justify-content:space-between;margin:6px 0 14px;gap:10px}
.bar h2{margin:0}
.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden}
.tbl th,.tbl td{padding:11px 12px;text-align:left;border-bottom:1px solid #eef1f4;font-size:.9rem}
.tbl th{background:#fafbfc;color:var(--muted);font-weight:700}
.card{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px}
.kpi{display:flex;gap:24px;flex-wrap:wrap;margin:8px 0 18px}
.kpi div b{display:block;font-size:1.5rem;color:var(--navy)}

/* Modal */
.modal{display:none;position:fixed;inset:0;background:rgba(8,16,33,.55);z-index:50;align-items:center;justify-content:center;padding:16px}
.modal.open{display:flex}
.modal-card{background:#fff;border-radius:16px;padding:22px;width:100%;max-width:460px;max-height:90vh;overflow:auto}
.modal-card h3{margin:0 0 14px}
.modal-card label{display:block;font-size:.82rem;color:var(--muted);margin:10px 0 4px}
.modal-card input,.modal-card select{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font:inherit}
.modal-actions{display:flex;gap:10px;margin-top:18px}
.modal-actions .btn{flex:1;text-align:center}
.pay-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:8px 0}
.pay{padding:16px;border:1px solid var(--line);border-radius:12px;background:#fff;font-weight:700;text-align:center}
.pay.sel{border-color:var(--gold);background:#fff8e6}
.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);background:var(--navy);color:#fff;padding:12px 20px;border-radius:10px;z-index:80;opacity:0;transition:.25s}
.toast.show{opacity:1}