:root {
  --bg: #f3f5f8; --card: #fff; --ink: #1c2430; --muted: #6b7684; --line: #dde3ea;
  --brand: #2b393f; --brand-2: #8e6b2e; --gold: #d9b56a; --ok: #2e8b57; --warn: #d98c00; --bad: #c0392b; --info: #5b6fb5;
  --radius: 8px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, sans-serif; font-size: 14px; color: var(--ink); background: var(--bg); }
a { color: var(--brand-2); }
header { background: var(--brand); color: #fff; display: flex; align-items: center; gap: 18px; padding: 0 18px; height: 54px; position: sticky; top: 0; z-index: 20; }
header .brand { display: flex; align-items: center; height: 54px; margin-right: -6px; }
header .brand img { height: 44px; width: auto; display: block; }
header h1 { font-size: 16px; margin: 0; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; white-space: nowrap; color: #d2cbbb; border-left: 1px solid rgba(210,203,187,.35); padding-left: 14px; }
nav { display: flex; gap: 2px; flex-wrap: wrap; }
nav a { color: #d2cbbb; text-decoration: none; padding: 8px 11px; border-radius: 6px; font-size: 13.5px; }
nav a.active, nav a:hover { background: rgba(255,255,255,.10); color: var(--gold); }
header .sp { flex: 1; }
@media (max-width: 1180px) { header h1 { display: none; } nav a { padding: 8px 8px; font-size: 13px; } header { gap: 10px; } }
@media (max-width: 900px) { header { height: auto; min-height: 54px; flex-wrap: wrap; padding: 6px 12px; } header .brand { height: 42px; } header .brand img { height: 36px; } th { top: 0; } }
header select { background: #fff; border: 0; border-radius: 6px; padding: 6px 8px; font-size: 13px; }
main { padding: 18px; max-width: 1500px; margin: 0 auto; }
h2 { font-size: 19px; margin: 0 0 12px; }
h3 { font-size: 15px; margin: 18px 0 8px; color: var(--brand); }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 18px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; }
.card .lbl { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.card .val { font-size: 21px; font-weight: 600; margin-top: 4px; }
.card.ok .val { color: var(--ok); } .card.warn .val { color: var(--warn); } .card.bad .val { color: var(--bad); } .card.info .val { color: var(--info); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 1000px) { .grid2 { grid-template-columns: 1fr; } }
.box { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 16px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th { background: #f7f9fb; color: #4a5563; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .3px; position: sticky; top: 54px; }
.box table th { top: 0; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
tr.total td { font-weight: 700; background: #f7f9fb; }
tr.clk { cursor: pointer; } tr.clk:hover { background: #eef4fb; }
.tblwrap { overflow-x: visible; }
@media (max-width: 1100px) { .tblwrap { overflow-x: auto; } th { position: static; } }
.badge { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.b-aberto { background: #e8ecf1; color: #4a5563; }
.b-mes { background: #fff3d6; color: #8a5a00; }
.b-parcial { background: #e3ecfa; color: #2a4f8a; }
.b-receber { background: #fde3d6; color: #a13d12; }
.b-pago { background: #dcf3e4; color: #1d6b3a; }
.b-prep { background: #fff3d6; color: #8a5a00; } .b-fech { background: #e3ecfa; color: #2a4f8a; } .b-fat { background: #fde3d6; color: #a13d12; } .b-paga { background: #dcf3e4; color: #1d6b3a; }
.b-D { background: #e3ecfa; color: #2a4f8a; } .b-P { background: #fde3d6; color: #a13d12; } .b-C { background: #dcf3e4; color: #1d6b3a; }
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.toolbar input, .toolbar select { padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; background: #fff; }
button, .btn { background: var(--brand-2); color: #fff; border: 0; border-radius: 6px; padding: 7px 12px; font-size: 13px; cursor: pointer; text-decoration: none; display: inline-block; }
button.sec, .btn.sec { background: #e8ecf1; color: var(--ink); }
button.danger { background: var(--bad); }
button.ok { background: var(--ok); }
button.sm { padding: 3px 8px; font-size: 12px; }
button:disabled { opacity: .5; cursor: default; }
dialog { border: 0; border-radius: 10px; padding: 0; width: min(760px, 96vw); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
dialog::backdrop { background: rgba(20,30,40,.45); }
dialog form, dialog .body { padding: 18px 20px; }
dialog h3 { margin: 0 0 12px; font-size: 16px; }
.frm { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 12px; }
.frm label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.frm label.wide { grid-column: 1 / -1; }
.frm input, .frm select, .frm textarea { padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13.5px; font-family: inherit; color: var(--ink); }
.frm textarea { min-height: 60px; }
.actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 16px; }
.muted { color: var(--muted); } .small { font-size: 12px; }
.right { text-align: right; }
.flex { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 12px; }
.tabs a { padding: 8px 12px; text-decoration: none; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; }
.tabs a.active { color: var(--brand); border-color: var(--brand-2); font-weight: 600; }
h3 { color: #5a4a2a; }
.toast { position: fixed; bottom: 18px; right: 18px; background: #1c2430; color: #fff; padding: 10px 16px; border-radius: 8px; opacity: 0; transition: .25s; z-index: 50; }
.toast.show { opacity: 1; }
.toast.err { background: var(--bad); }
.kv { display: grid; grid-template-columns: 160px 1fr; gap: 4px 10px; font-size: 13px; }
.kv b { color: var(--muted); font-weight: 500; }
.pill { font-size: 11px; background: #e8ecf1; border-radius: 10px; padding: 1px 7px; }
.warnbox { background: #fff8e6; border: 1px solid #f2d791; border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; font-size: 13px; }
input[type=checkbox] { transform: scale(1.15); }
#login[hidden] { display: none; }
#login { position: fixed; inset: 0; background: var(--brand); display: flex; align-items: center; justify-content: center; z-index: 100; }
.login-card { background: #fff; border-radius: 12px; padding: 28px 30px; width: min(380px, 92vw); box-shadow: 0 10px 40px rgba(0,0,0,.35); }
body.consulta .so-editor { display: none !important; }
.progress { height: 6px; background: #e8ecf1; border-radius: 3px; overflow: hidden; min-width: 70px; }
.progress i { display: block; height: 100%; background: var(--ok); }