:root {
  color-scheme: light;
  --bg: #f4f5f2;
  --surface: #ffffff;
  --surface-2: #f7f8f5;
  --border: #e3e5df;
  --text: #15171a;
  --text-2: #55595f;
  --muted: #8a8e93;
  --brand: #1f5fd1;
  --brand-soft: #e6eefc;
  --good: #0f8a5f;
  --bad: #c93a39;
  --bad-soft: #fbe9e8;
  --warn: #b77700;
  --warn-soft: #fdf3dc;
  --casa: #2a78d6;
  --pessoal: #eb6834;
  --p1: #1baf7a;
  --p2: #4a3aa7;
  --grid: #eceee9;
  --shadow: 0 1px 2px rgba(20, 24, 20, .04), 0 4px 16px rgba(20, 24, 20, .04);
  --radius: 14px;
  --c1: #2a78d6; --c2: #eb6834; --c3: #1baf7a; --c4: #eda100; --c5: #e87ba4; --c6: #008300; --c7: #4a3aa7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #111312;
    --surface: #1a1c1b;
    --surface-2: #202322;
    --border: #2d302e;
    --text: #f2f3f1;
    --text-2: #b9bcb7;
    --muted: #868a85;
    --brand: #5b93f0;
    --brand-soft: #172640;
    --good: #2fbf86;
    --bad: #e66767;
    --bad-soft: #3a1f1f;
    --warn: #e0a42a;
    --warn-soft: #3a2f17;
    --casa: #3987e5;
    --pessoal: #d95926;
    --p1: #199e70;
    --p2: #9085e9;
    --grid: #262927;
    --shadow: none;
    --c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c7: #9085e9;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111312; --surface: #1a1c1b; --surface-2: #202322; --border: #2d302e; --text: #f2f3f1;
  --text-2: #b9bcb7; --muted: #868a85; --brand: #5b93f0; --brand-soft: #172640; --good: #2fbf86;
  --bad: #e66767; --bad-soft: #3a1f1f; --warn: #e0a42a; --warn-soft: #3a2f17; --casa: #3987e5;
  --pessoal: #d95926; --p1: #199e70; --p2: #9085e9; --grid: #262927; --shadow: none;
--c1: #3987e5; --c2: #d95926; --c3: #199e70; --c4: #c98500; --c5: #d55181; --c6: #008300; --c7: #9085e9;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 15px/1.45 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
.num { font-variant-numeric: tabular-nums; }

/* layout */
.app { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side {
  background: var(--surface); border-right: 1px solid var(--border);
  padding: 22px 14px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
}
.logo { display: flex; align-items: center; gap: 10px; padding: 0 10px 22px; text-decoration: none; }
.logo-mark {
  width: 34px; height: 34px; border-radius: 10px; background: var(--brand); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 18px;
}
.logo b { display: block; font-size: 17px; letter-spacing: -.01em; }
.logo small { color: var(--muted); font-size: 12px; }
.nav a {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px;
  text-decoration: none; color: var(--text-2); font-weight: 500; margin-bottom: 2px;
}
.nav a:hover { background: var(--surface-2); color: var(--text); }
.nav a.ativo { background: var(--brand-soft); color: var(--brand); font-weight: 600; }
.nav .ico { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav a.ativo .ico { opacity: 1; }
.nav-grupo { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); padding: 16px 12px 6px; }
.nav-grupo:first-child { padding-top: 0; }
.side-foot { margin-top: auto; padding: 12px 4px 0; border-top: 1px solid var(--border); }
.side-user { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.side-user b { display: block; font-weight: 600; }
.side-user small { display: block; color: var(--muted); font-size: 11.5px; }
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brand-soft); color: var(--brand); display: grid; place-items: center; font-weight: 700; flex: none; }
.sair { margin-left: auto; color: var(--muted); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px; }
.sair:hover { background: var(--surface-2); color: var(--text); }
.sair .ico { width: 17px; height: 17px; }

/* seletor de pessoa */
.segmento { display: inline-flex; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 3px; gap: 2px; }
.segmento a { padding: 7px 16px; border-radius: 9px; text-decoration: none; font-weight: 600; color: var(--text-2); display: inline-flex; align-items: center; gap: 8px; }
.segmento a.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }

main { padding: 28px 32px 60px; width: 100%; }
.topo { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.topo h1 { font-size: 26px; margin: 0; letter-spacing: -.02em; }
.topo p { margin: 4px 0 0; color: var(--text-2); }

.aviso {
  background: var(--warn-soft); color: var(--text); border: 1px solid color-mix(in srgb, var(--warn) 30%, transparent);
  padding: 10px 14px; border-radius: 12px; margin-bottom: 18px; font-size: 14px;
}
.aviso.ok { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 30%, transparent); }
.aviso.erro { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 30%, transparent); }

/* cards */
.grid { display: grid; gap: 16px; }
.g4 { grid-template-columns: repeat(4, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g21 { grid-template-columns: 2fr 1fr; }
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow); min-width: 0;
}
.card h2 { font-size: 15px; margin: 0 0 14px; display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.card h2 > small { margin-left: auto; padding-left: 8px; }
.card h2 small { font-weight: 500; color: var(--muted); font-size: 13px; }
.sec { margin-top: 16px; }

.kpi .rot { color: var(--text-2); font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.kpi .val { font-size: min(26px, 2.05vw); font-weight: 700; letter-spacing: -.02em; margin-top: 6px; white-space: nowrap; }
.kpi .sub { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
.kpi.destaque { background: var(--brand); border-color: var(--brand); color: #fff; }
.kpi.destaque .rot, .kpi.destaque .sub { color: rgba(255, 255, 255, .85); }
.kpi.negativo { background: var(--bad); border-color: var(--bad); }

.pos { color: var(--good); }
.neg { color: var(--bad); }
.muted { color: var(--muted); }
.dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }

/* split casa x pessoal */
.split { display: flex; height: 12px; border-radius: 6px; overflow: hidden; gap: 2px; background: var(--surface-2); margin: 10px 0 12px; }
.split > div { height: 100%; }
.split .casa { background: var(--casa); border-radius: 6px 0 0 6px; }
.split .pessoal { background: var(--pessoal); border-radius: 0 6px 6px 0; }
.legenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }

/* pessoas */
.pessoa { padding: 14px 0; border-top: 1px solid var(--border); }
.pessoa:first-of-type { border-top: 0; padding-top: 0; }
.pessoa-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pessoa-top b { font-size: 15px; display: flex; align-items: center; gap: 8px; }
.linhas { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 13.5px; margin-top: 8px; color: var(--text-2); }
.linhas .num { text-align: right; color: var(--text); white-space: nowrap; }
.linhas .total { border-top: 1px dashed var(--border); padding-top: 6px; font-weight: 600; color: var(--text); }

/* barra de progresso */
.prog { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.prog > div { height: 100%; border-radius: 4px; background: var(--brand); }
.prog.alerta > div { background: var(--warn); }
.prog.estouro > div { background: var(--bad); }

/* listas / tabelas */
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-weight: 600; color: var(--muted); font-size: 12px; text-transform: uppercase;
  letter-spacing: .04em; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.tabela td { padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tr:hover td { background: var(--surface-2); }
.tabela .r { text-align: right; }
.tabela-wrap { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }
.desc { font-weight: 500; }
.desc small { display: block; color: var(--muted); font-weight: 400; font-size: 12.5px; }
.tag {
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--surface-2); color: var(--text-2); white-space: nowrap;
}
.tag.casa { background: color-mix(in srgb, var(--casa) 14%, transparent); color: var(--casa); }
.tag.pessoal { background: color-mix(in srgb, var(--pessoal) 14%, transparent); color: var(--pessoal); }
.tag.neutra { background: var(--surface-2); color: var(--muted); }

.cat-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 9px 0; border-top: 1px solid var(--border); align-items: center; }
.cat-linha:first-child { border-top: 0; }
.cat-linha .nome { font-weight: 500; overflow-wrap: anywhere; }
.cat-linha .prog { grid-column: 1 / -1; }
.cat-linha .meta { font-size: 12px; color: var(--muted); }

/* formulários */
input, select, button, textarea { font: inherit; color: inherit; }
input, select {
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; min-width: 0;
}
input:focus, select:focus { outline: 2px solid color-mix(in srgb, var(--brand) 40%, transparent); outline-offset: 0; border-color: var(--brand); }
.btn {
  background: var(--brand); color: #fff; border: 0; border-radius: 10px; padding: 9px 16px; font-weight: 600;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.btn:hover { filter: brightness(1.06); }
.btn.sec { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.btn.perigo { background: transparent; color: var(--bad); border: 1px solid color-mix(in srgb, var(--bad) 40%, transparent); }
.btn.mini { padding: 4px 10px; font-size: 13px; }
.filtros { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.form-linha { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; }
.form-linha label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.sel-mini { padding: 4px 6px; font-size: 13px; border-radius: 8px; max-width: 190px; }

.mes-nav { display: flex; align-items: center; gap: 6px; }
.mes-nav a { text-decoration: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); }
.mes-nav select { font-weight: 600; }

.chart-box { position: relative; height: 280px; }
.chart-box.alto { height: 340px; }
.vazio { color: var(--muted); text-align: center; padding: 24px 0; }

/* cartões */
.cc { position: relative; overflow: hidden; }
.cc-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.cc-banco { font-weight: 700; font-size: 16px; }
.cc-val { font-size: 24px; font-weight: 700; letter-spacing: -.02em; }

/* login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login { width: 100%; max-width: 380px; }
.login .logo { justify-content: center; padding-bottom: 24px; }
.login form { display: flex; flex-direction: column; gap: 12px; }
.login input { padding: 11px 12px; }
.login .btn { justify-content: center; padding: 11px; }

.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg);
  padding: 10px 16px; border-radius: 10px; font-size: 14px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 50;
}
.toast.on { opacity: 1; }

/* celular */
@media (max-width: 1080px) {
  .g4 { grid-template-columns: repeat(2, 1fr); }
  .g21, .g3 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .app { grid-template-columns: minmax(0, 1fr); }
  .app > * { min-width: 0; }
  .side { position: sticky; height: auto; flex-direction: row; align-items: center; padding: 10px 16px; z-index: 10; overflow-x: auto; gap: 8px; }
  .logo { padding: 0 8px 0 0; }
  .logo small, .side-foot { display: none; }
  .nav { display: flex; gap: 2px; }
  .nav a { padding: 7px 10px; white-space: nowrap; }
  .nav a .txt { display: none; }
  .nav-grupo { display: none; }
  .nav a.ativo .txt { display: inline; }
  main { padding: 18px 16px 48px; }
  .g4, .g2 { grid-template-columns: 1fr 1fr; }
  .kpi .val { font-size: 20px; }
  .topo h1 { font-size: 22px; }
  .tabela-wrap { margin: 0 -16px; padding: 0 16px; }
}
@media (max-width: 520px) {
  .g4, .g2 { grid-template-columns: 1fr; }
  .sim-linha { font-size: 12.5px; grid-template-columns: 1.1fr 1fr 12px 1fr 1fr; }
}

/* chips de categoria */
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; font-size: 13px;
  border: 1px solid var(--border); background: var(--surface); cursor: pointer; user-select: none; color: var(--text-2);
}
.chip:hover { border-color: var(--brand); }
.chip.on { background: var(--brand-soft); border-color: var(--brand); color: var(--brand); font-weight: 600; }
.chip input { display: none; }
canvas.spark { display: block; }
.tabela td.num, .tabela td.r { white-space: nowrap; }

/* simulações */
.sim-form { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; align-items: end; }
.sim-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.sim-form label:first-child { grid-column: 1 / -1; }
.sim-form label.check { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; color: var(--text); }
.sim-form label[hidden] { display: none; }
.sim-itens { margin-top: 16px; border-top: 1px solid var(--border); }
.sim-item { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px; }
.sim-item small { display: block; color: var(--muted); font-size: 12px; }
.sim-linha { display: grid; grid-template-columns: 1.3fr 1fr 16px 1fr 1fr; gap: 6px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; align-items: baseline; }
.sim-linha > span:not(:first-child) { text-align: right; white-space: nowrap; }
.sim-linha .seta { color: var(--muted); text-align: center !important; }
.sim-linha.cab { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); font-weight: 600; }

/* limites por categoria */
.cat-linha.alerta { background: color-mix(in srgb, var(--warn) 9%, transparent); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 8px; }
.cat-linha.estouro { background: var(--bad-soft); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 8px; }
.selo { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; }
.selo.alerta { background: var(--warn-soft); color: var(--warn); }
.selo.estouro { background: var(--bad); color: #fff; }
.aviso.erro b.neg { color: var(--bad); }
[hidden] { display: none !important; }

/* card dividido em duas metades iguais */
.kpi.meio-a-meio { display: grid; grid-template-columns: 1fr 1fr; padding: 0; }
.kpi.meio-a-meio > div { padding: 18px 16px; min-width: 0; }
.kpi.meio-a-meio > div + div { border-left: 1px solid var(--border); }

.linhas .pequeno { font-size: 12.5px; color: var(--muted); }
.linhas .num.pequeno.pos { color: var(--good); }

/* ícones de linha dentro do conteúdo */
.ico-in { width: 15px; height: 15px; flex: none; vertical-align: -2px; margin-right: 6px; opacity: .8; }
h2 .ico-in { width: 17px; height: 17px; vertical-align: -3px; }
.kpi.destaque .ico-in { opacity: 1; }
.kpi .rot .ico-in { margin-right: 0; }
.legenda .ico-in, .pessoa-top .ico-in { margin-right: 2px; }

.kpi-linhas { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; margin-top: 6px; font-size: 12.5px; }
.kpi-linhas span:nth-child(odd) { opacity: .85; }
.kpi-linhas .num { text-align: right; font-weight: 600; white-space: nowrap; }

/* cor fixa de cada pessoa */
.selo-p { display: inline-flex; align-items: center; gap: 5px; padding: 1px 8px 1px 6px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; vertical-align: 1px; }
.selo-p i { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.selo-p.p1 { color: var(--p1); background: color-mix(in srgb, var(--p1) 14%, transparent); }
.selo-p.p2 { color: var(--p2); background: color-mix(in srgb, var(--p2) 16%, transparent); }
.cat-linha.linha-p1, .cat-linha.linha-p2 { border-left: 3px solid transparent; padding-left: 10px; margin-left: -13px; }
.cat-linha.linha-p1 { border-left-color: var(--p1); }
.cat-linha.linha-p2 { border-left-color: var(--p2); }
.tabela tr.linha-p1 td:first-child { box-shadow: inset 3px 0 0 var(--p1); }
.tabela tr.linha-p2 td:first-child { box-shadow: inset 3px 0 0 var(--p2); }

:root { --dia: #1baf7a; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --dia: #199e70; } }
:root[data-theme="dark"] { --dia: #199e70; }
.split .dia { background: var(--dia); }
.split .casa { border-radius: 6px 0 0 6px; }
.split .pessoal { border-radius: 0 6px 6px 0; }
.tag.dia { background: color-mix(in srgb, var(--dia) 14%, transparent); color: var(--dia); }

.cada-um { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 28px; }
.cada-um .pessoa { border-top: 0; padding-top: 0; }

:root { --inv: #eda100; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --inv: #c98500; } }
:root[data-theme="dark"] { --inv: #c98500; }
.grupos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; }
.split > div:first-child { border-radius: 6px 0 0 6px; }
.split > div:last-child { border-radius: 0 6px 6px 0; }

.quem { padding: 12px 0; border-top: 1px solid var(--border); }
.quem:first-of-type { border-top: 0; padding-top: 0; }
.quem-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.quem .split { margin: 8px 0 6px; }
.quem-grupos { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--text-2); }
.quem-grupos span { display: inline-flex; align-items: center; gap: 5px; }
.quem-grupos b { color: var(--text); font-weight: 600; }

/* gastos fixos */
.rosca-wrap { display: grid; grid-template-columns: 230px 1fr; gap: 22px; align-items: center; }
.rosca { position: relative; height: 230px; }
.rosca-centro { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
.rosca-centro span { font-size: 12px; }
.rosca-centro b { font-size: 19px; letter-spacing: -.02em; }
.rosca-legenda .rl { display: grid; grid-template-columns: 12px 1fr auto 42px; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.rosca-legenda .rl:last-child { border-bottom: 0; }
.rosca-legenda .rl .muted { text-align: right; font-size: 12px; }
.fixos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.fixo { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; background: var(--surface-2); }
.fixo.pendente { border-color: color-mix(in srgb, var(--bad) 45%, var(--border)); }
.fixo.parcial { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.fixo-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 14px; }
.fixo-val { font-size: 20px; font-weight: 700; letter-spacing: -.02em; margin-top: 6px; }
.fixo .meta { font-size: 12px; color: var(--muted); }
.fixo .meta.neg { color: var(--bad); }
.fixo canvas.spark { margin-top: 6px; }
@media (max-width: 760px) { .rosca-wrap { grid-template-columns: 1fr; } }

.pago-falta .pf-top { display: flex; justify-content: space-between; gap: 12px; }
.pf-barra { display: flex; height: 26px; border-radius: 8px; overflow: hidden; margin: 12px 0 8px; gap: 2px; background: var(--surface-2); }
.pf-barra > div { display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #fff; white-space: nowrap; overflow: hidden; }
.pf-pago { background: var(--good); }
.pf-falta { background: var(--bad); }
@media (max-width: 1080px) { .pago-falta { grid-column: 1 / -1 !important; } }

.qr-2fa { background: #fff; border-radius: 12px; padding: 8px; width: 220px; margin: 0 auto 8px; }
.qr-2fa svg { width: 100%; height: auto; display: block; }
.nowrap { white-space: nowrap; }
.btn.mini.on { border-color: var(--text-2); color: var(--text); }

/* ---------- Finzelo Corp ---------- */
.logo b { font-size: 15.5px; line-height: 1.2; }
.periodo { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.periodo .chips { gap: 4px; }
.periodo .chip { padding: 5px 10px; text-decoration: none; }
.periodo form { display: flex; gap: 6px; align-items: center; }
.periodo input[type=date] { padding: 5px 8px; font-size: 13px; }
.var { font-size: 12px; font-weight: 600; margin-left: 6px; white-space: nowrap; }
.var.pos { color: var(--good); } .var.neg { color: var(--bad); }
.kpi.destaque .var { color: #fff; opacity: .9; }
.kpi .val.md { font-size: min(22px, 1.8vw); }
.saldo-linhas { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: 12.5px; margin-top: 6px; }
.saldo-linhas .num { text-align: right; font-weight: 600; }
.ed { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.ed select, .ed input { padding: 4px 6px; font-size: 13px; border-radius: 8px; }
.ed .ed-sub { width: 150px; }
.ed .ed-obs { width: 170px; }
.ed label { font-size: 12px; color: var(--muted); display: inline-flex; gap: 4px; align-items: center; white-space: nowrap; }
.ed .ok { color: var(--good); font-size: 12px; font-weight: 600; }
.cat-det { border-top: 1px solid var(--border); }
.cat-det:first-child { border-top: 0; }
.cat-det summary { list-style: none; cursor: pointer; padding: 10px 0; display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 54px; gap: 10px; align-items: center; }
.cat-det summary::-webkit-details-marker { display: none; }
.cat-det summary .nome { font-weight: 600; }
.cat-det summary .prog { grid-column: 2 / -1; margin-top: -4px; }
.sub-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto 54px; gap: 10px; padding: 6px 0 6px 22px; font-size: 13.5px; color: var(--text-2); border-top: 1px dashed var(--border); }
.sub-linha .num, .cat-det .num { text-align: right; white-space: nowrap; }
.sub-linha a { text-decoration: none; }
.sub-linha a:hover { text-decoration: underline; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; }
.pill.pago { background: var(--brand-soft); color: var(--good); background: color-mix(in srgb, var(--good) 14%, transparent); }
.pill.aberto { background: var(--surface-2); color: var(--text-2); }
.pill.atrasado { background: var(--bad-soft); color: var(--bad); }
.pill.pendente { background: var(--warn-soft); color: var(--warn); }
.pill.recusada { background: var(--bad-soft); color: var(--bad); }
.func-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.func { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; background: var(--surface-2); }
.func-top { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.func-top b { font-size: 15px; display: block; }
.func-top small { color: var(--muted); }
.func .obs { white-space: pre-wrap; font-size: 13px; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; align-items: end; }
.form-grid label { display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; color: var(--text-2); font-weight: 500; }
.form-grid label.largo { grid-column: 1 / -1; }
textarea { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; min-height: 90px; resize: vertical; width: 100%; }
details.caixa > summary { cursor: pointer; font-weight: 600; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
details.caixa > summary::-webkit-details-marker { display: none; }
details.caixa[open] > summary { margin-bottom: 14px; }
.alerta-lista { display: flex; flex-direction: column; gap: 8px; }
.alerta-lista .aviso { margin: 0; display: flex; gap: 8px; align-items: flex-start; }
.alerta-lista .aviso a { margin-left: auto; white-space: nowrap; font-weight: 600; }
.metrica-ajuda { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 1.5; }
.barra-h { display: grid; grid-template-columns: 130px 1fr auto; gap: 10px; align-items: center; padding: 5px 0; font-size: 13.5px; }
.barra-h .prog { height: 10px; }
.barra-h .num { text-align: right; white-space: nowrap; min-width: 56px; }
.cb-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 18px; }
.cb-grid div span { display: block; font-size: 12px; color: var(--muted); }
.cb-grid div b { font-size: 18px; letter-spacing: -.01em; }
.contagem { background: var(--warn); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 0 7px; margin-left: auto; }
@media (max-width: 760px) {
  .kpi .val.md { font-size: 18px; }
  .barra-h { grid-template-columns: 96px 1fr auto; }
  .ed .ed-sub, .ed .ed-obs { width: 120px; }
  .contagem { display: none; }
}

main { min-width: 0; }
.tabela .ed { min-width: 520px; }
@media (max-width: 760px) { .logo > span:last-child { display: none; } }

/* submenu de Despesas */
.nav-pai { display: flex; align-items: center; gap: 10px; padding: 9px 12px 4px; color: var(--text-2); font-weight: 500; }
.nav-pai .ico { width: 18px; height: 18px; flex: none; opacity: .85; }
.nav-pai.aberto { color: var(--text); }
.nav a.nav-sub { padding: 7px 12px 7px 40px; font-size: 14px; }
@media (max-width: 760px) {
  .nav-pai { display: none; }
  .nav a.nav-sub { padding: 7px 10px; }
  .nav a.nav-sub .txt { display: inline; }
  .nav a.nav-sub { font-size: 13px; }
}

/* pizza dentro de card de meia largura: gráfico em cima, legenda embaixo */
.g2 .rosca-wrap { grid-template-columns: 1fr; gap: 14px; }
.g2 .rosca { height: 240px; }
.rosca-legenda .rl span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.card h2 .segmento a { font-size: 12.5px; }

/* ---------- monitor grande: usa a tela toda, mais colunas e mais itens ---------- */
@media (max-width: 1699px) { .so-grande { display: none !important; } }
.visao-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.visao-grid .trafego-card { grid-column: 1 / -1; }
.barra-h > span:first-child { overflow-wrap: anywhere; }
@media (min-width: 1500px) {
  main { padding: 28px 40px 60px; }
  .g3.saldos { grid-template-columns: 1.3fr 1fr 1fr; }
  .grid.g2.largo-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .chart-box.alto { height: 380px; }
}
@media (min-width: 1700px) {
  .visao-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.15fr) minmax(0, 1fr); }
  .visao-grid .trafego-card { grid-column: auto; }
  .g4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .fixos-grid, .func-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
  .kpi .val { font-size: 28px; }
  .rosca, .g2 .rosca { height: 280px; }
  .g2 .rosca-wrap { grid-template-columns: 260px minmax(0, 1fr); }
  .tabela .ed { min-width: 0; flex-wrap: nowrap; }
  .ed .ed-sub { width: 180px; } .ed .ed-obs { width: 220px; }
}
@media (min-width: 2200px) {
  body { font-size: 16px; }
  main { padding: 32px 56px 64px; }
  .chart-box { height: 340px; } .chart-box.alto { height: 440px; }
  .kpi .val { font-size: 32px; }
}
@media (min-width: 1700px) { .so-pequeno { display: none !important; } }

/* ---------- modo privado (olho): borra os valores em dinheiro ---------- */
.olho { position: fixed; top: 14px; right: 18px; z-index: 30; width: 40px; height: 40px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text-2); cursor: pointer;
  display: grid; place-items: center; box-shadow: var(--shadow); }
.olho:hover { color: var(--text); border-color: var(--brand); }
.olho .ico { width: 20px; height: 20px; }
.olho .fechado { display: none; }
html.privado .olho { background: var(--brand); border-color: var(--brand); color: #fff; }
html.privado .olho .aberto { display: none; }
html.privado .olho .fechado { display: inline; }
html.privado .v { filter: blur(9px); user-select: none; pointer-events: none; }
html.privado .ed-obs { filter: blur(5px); }
main { position: relative; }
.topo { padding-right: 52px; }
@media (max-width: 760px) { .olho { top: auto; bottom: 16px; right: 16px; width: 46px; height: 46px; border-radius: 50%; } }

/* ---------- marca ---------- */
.so-escuro { display: none; }
.so-claro { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .so-escuro { display: block; }
  :root:not([data-theme="light"]) .so-claro { display: none; }
}
:root[data-theme="dark"] .so-escuro { display: block; }
:root[data-theme="dark"] .so-claro { display: none; }
.logo.marca { display: block; padding: 0 6px 22px; }
.logo.marca img { width: 100%; max-width: 196px; height: auto; }
.logo.marca .so-icone { display: none; }
.so-claro[src*="operacao"] { filter: drop-shadow(0 0 1px rgba(0, 0, 0, .18)); }
.rodape { margin-top: 48px; padding-top: 18px; border-top: 1px solid var(--border); display: flex; align-items: center;
  gap: 8px 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--text-2); }
.rodape img { height: 22px; width: auto; }
.rodape .muted { margin-left: auto; }
.login-wrap { flex-direction: column; display: flex; justify-content: center; align-items: center; gap: 16px; }
.login-marca { text-align: center; margin-bottom: 22px; }
.login-marca img { width: 230px; max-width: 80%; height: auto; margin: 0 auto; }
.login-marca p { margin: 10px 0 0; color: var(--text-2); font-weight: 600; letter-spacing: .02em; }
.login-rodape { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 12.5px; margin: 0; }
.login-rodape img { width: 16px; height: 16px; }
@media (max-width: 760px) {
  .logo.marca { padding: 0 8px 0 0; }
  .logo.marca .so-escuro, .logo.marca .so-claro { display: none !important; }
  .logo.marca .so-icone { display: block; width: 34px; height: 34px; }
  .rodape .muted { margin-left: 0; }
}
.login-empresa { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  color: var(--brand); background: var(--brand-soft); letter-spacing: .03em; }
.side-user small { color: var(--text-2); font-weight: 500; }
.nav-grupo.nav-admin { margin-top: 10px; padding-top: 14px; border-top: 1px dashed var(--border); color: var(--warn); }