/* Controle Financeiro — tema escuro "navy + menta"
   Baseado nas cores da planilha (azul-marinho nos cabeçalhos, verde/amarelo/vermelho de status). */

:root {
  color-scheme: dark;
  --bg: #070D1A;
  --bg-2: #0A1222;
  --surface: #0E1729;
  --surface-2: #13203A;
  --line: #1A2846;
  --line-2: #24365C;
  --line-soft: #16233F;
  --line-btn: #1F2E4D;
  --line-hover: #2C4170;
  --row-line: #142039;
  --text: #EAF0FA;
  --text-2: #C9D4EA;
  --text-3: #B7C4DC;
  --muted: #93A4C3;
  --muted-2: #8394B4;
  --link: #7FB2FF;
  --link-hover: #B5D2FF;
  --avatar-bg: #1B2B4C;
  --glass: rgba(10,18,34,.94);
  --glass-2: rgba(14,23,41,.85);
  --grid-line: rgba(61,220,151,.06);

  --brand: #3DDC97;
  --brand-num: #3DDC97;
  --brand-ink: #04140C;
  --brand-soft: #0F2A22;
  --brand-line: #1E5A45;
  --brand-text: #9BE8C6;

  --primary: #1E3F7A;
  --primary-hover: #26509A;
  --primary-line: #3563B5;
  --primary-ink: #FFFFFF;

  --pago: #34D399;
  --aberto: #FBBF24;
  --atrasado: #FB7185;
  --receita: #A3E635;
  --programado: #60A5FA;
  --gastos: #22D3EE;
  --total: #C4B5FD;

  --pago-text: #6EE7B7; --pago-bg: #0F2E24; --pago-line: #1F5C47; --pago-stat: #16402F;
  --aberto-text: #FCD34D; --aberto-bg: #33270C; --aberto-line: #6B5317; --aberto-stat: #3A2F12;
  --atrasado-text: #FDA4AF; --atrasado-bg: #3A121C; --atrasado-line: #7A2638; --atrasado-stat: #3A1A26;
  --danger-bg: #2A0F18; --danger-line: #4A1C29; --danger-hover: #FECDD3;

  --radius: 16px;
  --radius-lg: 18px;
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-num: 'IBM Plex Mono', ui-monospace, monospace;
}

/* Tema claro (escolhido pelo botão de tema) */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #F3F6FB;
  --bg-2: #FFFFFF;
  --surface: #FFFFFF;
  --surface-2: #EEF2F8;
  --line: #DFE5EF;
  --line-2: #C8D2E3;
  --line-soft: #E3E8F1;
  --line-btn: #D3DBE8;
  --line-hover: #9FB0CC;
  --row-line: #EBEFF5;
  --text: #0B1530;
  --text-2: #33415C;
  --text-3: #3D4B66;
  --muted: #56667F;
  --muted-2: #5F6E87;
  --link: #1D4ED8;
  --link-hover: #1E3A8A;
  --avatar-bg: #E3EBF7;
  --glass: rgba(255,255,255,.94);
  --glass-2: rgba(255,255,255,.9);
  --grid-line: rgba(16,94,64,.07);

  --brand: #10B981;
  --brand-num: #047857;
  --brand-ink: #FFFFFF;
  --brand-soft: #E6F7EF;
  --brand-line: #A7E3C9;
  --brand-text: #065F46;

  --primary: #0F2D5C;
  --primary-hover: #17407F;
  --primary-line: #0F2D5C;
  --primary-ink: #FFFFFF;

  --pago: #047857;
  --aberto: #B45309;
  --atrasado: #BE123C;
  --receita: #4D7C0F;
  --programado: #1D4ED8;
  --gastos: #0E7490;
  --total: #6D28D9;

  --pago-text: #065F46; --pago-bg: #E6F7EF; --pago-line: #A7E3C9; --pago-stat: #BFE9D6;
  --aberto-text: #92400E; --aberto-bg: #FEF3C7; --aberto-line: #F5D27A; --aberto-stat: #F5DFA2;
  --atrasado-text: #9F1239; --atrasado-bg: #FFE4E6; --atrasado-line: #FBB0BB; --atrasado-stat: #F9C5CD;
  --danger-bg: #FFF1F2; --danger-line: #FBC4CC; --danger-hover: #881337;
}
:root[data-theme="light"] .dot { box-shadow: none; }
:root[data-theme="light"] .ccard { box-shadow: 0 8px 24px rgba(15,45,92,.18); }
:root[data-theme="light"] .panel, :root[data-theme="light"] .kpi, :root[data-theme="light"] .bank, :root[data-theme="light"] .stat { box-shadow: 0 1px 2px rgba(15,23,42,.04); }
:root[data-theme="light"] .nav-badge { color: #FFFFFF; }

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }
h1, h2, h3 { font-family: var(--font-display); margin: 0; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Estrutura (menu lateral + conteúdo) ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 256px; flex: none; background: var(--bg-2); border-right: 1px solid var(--line-soft);
  padding: 24px 16px; display: flex; flex-direction: column; gap: 24px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; color: var(--text); }
.brand:hover { color: var(--text); }
.brand-mark {
  width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--line-2);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.brand-name { font: 700 15px var(--font-display); letter-spacing: .2px; display: block; }
.brand-sub { font-size: 12px; color: var(--muted); display: block; }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-section { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; color: var(--muted-2); padding: 14px 12px 6px; }
.nav-section:first-child { padding-top: 0; }
.nav-link {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px;
  color: var(--muted); font-size: 14px; font-weight: 500; min-height: 44px;
}
.nav-link svg { flex: none; }
.nav-link:hover { background: var(--surface-2); color: var(--text); }
.nav-link.ativo { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1px var(--line-2); }
.nav-link.ativo svg { stroke: var(--brand-num); }
.nav-badge {
  margin-left: auto; font: 600 11px var(--font-num); color: #1A0B10; background: var(--atrasado);
  border-radius: 999px; padding: 2px 8px;
}

.user-box {
  margin-top: auto; display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 12px;
  background: var(--surface); border: 1px solid var(--line-soft);
}
.avatar {
  width: 36px; height: 36px; border-radius: 50%; background: var(--avatar-bg); flex: none;
  display: flex; align-items: center; justify-content: center; font: 600 13px var(--font-display); color: var(--brand-num);
  text-transform: uppercase;
}
.user-box .info { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.user-box .nome { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  color: var(--muted); background: transparent; border: 0; cursor: pointer; flex: none;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }

.content { flex: 1; min-width: 0; padding: 28px 32px 56px; }
.content-inner { max-width: 1360px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }

/* barra superior só no celular */
.mobilebar { display: none; }
.bottom-nav { display: none; }

@media (max-width: 900px) {
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 40; transform: translateX(-100%);
    transition: transform .2s ease; box-shadow: 0 0 0 100vmax rgba(0,0,0,0);
  }
  body.menu-aberto .sidebar { transform: translateX(0); box-shadow: 0 0 0 100vmax rgba(2,6,14,.55); }
  .mobilebar {
    display: flex; align-items: center; gap: 12px; position: sticky; top: 0; z-index: 30;
    background: var(--glass); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft); padding: 10px 16px;
    margin: -20px -16px 20px;
  }
  .mobilebar .brand { padding: 0; }
  .mobilebar .brand-mark { width: 34px; height: 34px; border-radius: 10px; }
  .content { padding: 20px 16px 96px; }
  .bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--glass); backdrop-filter: blur(8px); border-top: 1px solid var(--line-soft);
    padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  }
  .bottom-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; min-height: 52px;
    font-size: 11px; color: var(--muted); border-radius: 10px; justify-content: center;
  }
  .bottom-nav a.ativo { color: var(--brand-num); }
}

/* ---------- Cabeçalho de página ---------- */
.page-head { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-end; justify-content: space-between; }
.page-head .titulos { display: flex; flex-direction: column; gap: 6px; }
.eyebrow { font-size: 12px; font-weight: 600; letter-spacing: 1.4px; color: var(--brand-num); text-transform: uppercase; }
.page-title { font: 700 30px var(--font-display); letter-spacing: -.5px; }
.page-sub { font-size: 13px; color: var(--muted); }
.actions { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- Botões ---------- */
.btn {
  height: 46px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-btn); background: var(--surface);
  color: var(--text); font: 600 14px var(--font-body); cursor: pointer; display: inline-flex; align-items: center;
  gap: 8px; justify-content: center; white-space: nowrap;
}
.btn:hover { background: var(--surface-2); color: var(--text); }
.btn-primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary-line); font-weight: 700; }
.btn-primary:hover { background: var(--primary-hover); color: var(--primary-ink); }
.btn-sm { height: 34px; padding: 0 12px; border-radius: 9px; font-size: 12px; }
.btn-danger { color: var(--atrasado-text); border-color: var(--danger-line); background: transparent; }
.btn-danger:hover { background: var(--danger-bg); color: var(--danger-hover); }
.btn-block { width: 100%; }
form.inline { display: inline; margin: 0; }

/* seletor de mês */
.month-switch { display: flex; align-items: center; gap: 4px; background: var(--surface); border: 1px solid var(--line-btn); border-radius: 12px; padding: 3px; }
.month-switch a { width: 40px; height: 40px; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: var(--text); }
.month-switch a:hover { background: var(--surface-2); }
.month-switch span { font: 600 14px var(--font-display); padding: 0 10px; min-width: 96px; text-align: center; }

/* ---------- Cards / blocos ---------- */
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.panel-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.panel-title { font: 600 16px var(--font-display); }
.section { display: flex; flex-direction: column; gap: 14px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.section-title { font: 600 18px var(--font-display); }

.grid { display: grid; gap: 14px; }
.grid-kpi { grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); }
.grid-bank { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.grid-card { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); }
.row-wrap { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.grow-2 { flex: 2 1 640px; }
.grow-1 { flex: 1 1 340px; }

/* KPI */
.kpi {
  display: flex; flex-direction: column; gap: 10px; padding: 16px; min-width: 0; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); color: var(--text); text-align: left;
  font-family: inherit; transition: transform .15s ease, border-color .15s ease;
}
button.kpi { cursor: pointer; }
button.kpi:hover { transform: translateY(-2px); border-color: var(--line-hover); }
.kpi.ativo { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent); }
.kpi-label { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; letter-spacing: .7px; color: var(--text-3); min-height: 28px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c); box-shadow: 0 0 10px var(--c); flex: none; }
.kpi-value { font: 600 clamp(15px, 1.25vw, 19px) var(--font-num); letter-spacing: -.6px; color: var(--c); white-space: nowrap; }
.kpi-detail { font-size: 12px; color: var(--muted); }
.bar { display: block; height: 4px; border-radius: 4px; background: var(--line); overflow: hidden; }
.bar > span { display: block; height: 100%; background: var(--c); border-radius: 4px; }

/* bancos */
.bank { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.bank-top { display: flex; align-items: center; gap: 10px; }
.bank-badge {
  width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center;
  font: 600 11px var(--font-num); color: #070D1A; background: var(--c); flex: none; text-transform: uppercase;
}
.bank-name { font-size: 14px; font-weight: 600; }
.bank-type { margin-left: auto; font-size: 12px; color: var(--muted); }
.bank-value { font: 600 24px var(--font-num); letter-spacing: -.5px; }
.bank-foot { display: flex; justify-content: space-between; font-size: 12px; }
.up { color: var(--pago); }
.down { color: var(--atrasado); }
.total-box { background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.total-box .lbl { font-size: 12px; font-weight: 600; letter-spacing: .8px; color: var(--brand-text); }
.total-box .val { font: 600 26px var(--font-num); color: var(--brand-num); letter-spacing: -.5px; }

/* cartões de crédito */
.ccard {
  color: #EAF0FA;
  background: #13294F; border: 1px solid #2A4D8A; border-radius: var(--radius-lg); padding: 20px;
  display: flex; flex-direction: column; gap: 18px;
  background-image: radial-gradient(circle at 100% 0%, rgba(255,255,255,.08) 0, rgba(255,255,255,0) 55%);
}
.ccard.alt { background-color: #1C2333; border-color: #3A465E; }
.ccard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ccard-name { font: 600 15px var(--font-display); }
.ccard-sub { font-size: 12px; color: #C9D4EA; }
.ccard-value { font: 600 28px var(--font-num); letter-spacing: -.5px; }
.ccard .bar { height: 6px; background: rgba(255,255,255,.14); }
.ccard-limits { display: flex; justify-content: space-between; font-size: 12px; color: #C9D4EA; gap: 8px; flex-wrap: wrap; }
.ccard strong { color: #FFFFFF; }
.tag { font-size: 12px; background: rgba(0,0,0,.28); border-radius: 999px; padding: 4px 10px; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }

/* gráficos */
.donut-wrap { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.donut { width: 160px; height: 160px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; background: var(--surface-2); }
.donut-hole { width: 104px; height: 104px; border-radius: 50%; background: var(--surface); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.legend { flex: 1; min-width: 200px; display: flex; flex-direction: column; gap: 8px; }
.legend-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.legend-row .sw { width: 10px; height: 10px; border-radius: 3px; flex: none; background: var(--c); }
.legend-row .nm { flex: 1; color: var(--text-2); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend-row .pc { font: 500 12px var(--font-num); color: var(--muted); width: 48px; text-align: right; }
.legend-row .vl { font: 500 13px var(--font-num); width: 104px; text-align: right; }
.hbars { display: flex; flex-direction: column; gap: 16px; }
.hbar-row { display: flex; flex-direction: column; gap: 6px; }
.hbar-top { display: flex; justify-content: space-between; font-size: 13px; gap: 8px; }
.hbar { display: block; height: 10px; border-radius: 6px; background: var(--surface-2); overflow: hidden; }
.hbar > span { display: block; height: 100%; border-radius: 6px; background: var(--c); }
.vbars { display: flex; align-items: flex-end; gap: 14px; height: 200px; padding-top: 24px; border-bottom: 1px solid var(--line); }
.vbar-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; }
.vbar-col .v { font: 500 11px var(--font-num); color: var(--muted); white-space: nowrap; }
.vbar-col .b { display: block; width: 100%; max-width: 44px; border-radius: 8px 8px 3px 3px; background: var(--line-2); min-height: 3px; }
.vbar-col .b.atual { background: var(--brand); }
.vbar-labels { display: flex; gap: 14px; }
.vbar-labels span { flex: 1; text-align: center; font-size: 12px; color: var(--text-2); }
.compare { display: flex; justify-content: space-between; align-items: center; background: var(--surface-2); border-radius: 12px; padding: 12px 14px; }

/* lista de últimos gastos */
.feed { display: flex; flex-direction: column; }
.feed-row { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-radius: 10px; }
.feed-row:hover { background: var(--surface-2); }
.feed-day { width: 40px; height: 36px; border-radius: 10px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; font: 600 11px var(--font-num); color: var(--muted); flex: none; }
.feed-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.feed-main .t { font-size: 14px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-main .s { font-size: 12px; color: var(--muted); }

/* tabelas */
.table-wrap { overflow-x: auto; position: relative; min-width: 0; max-width: 100%; -webkit-overflow-scrolling: touch; }
.table { width: 100%; border-collapse: collapse; font-size: 13px; }
.table th { text-align: left; color: var(--muted); font-size: 11px; letter-spacing: 1px; font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line); text-transform: uppercase; white-space: nowrap; }
.table td { padding: 12px; border-bottom: 1px solid var(--row-line); vertical-align: middle; }
.table tr:hover td { background: var(--surface-2); }
.table .right { text-align: right; }
.table .num { color: var(--text); white-space: nowrap; }
.table .right { white-space: nowrap; }
.table .soft { color: var(--text-2); }
.table .sub { display: block; font-size: 12px; color: var(--muted); }
.table-min { min-width: 640px; }

/* status */
.pill { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pill-pago { background: var(--pago-bg); color: var(--pago-text); border: 1px solid var(--pago-line); }
.pill-aberto { background: var(--aberto-bg); color: var(--aberto-text); border: 1px solid var(--aberto-line); }
.pill-atrasado { background: var(--atrasado-bg); color: var(--atrasado-text); border: 1px solid var(--atrasado-line); }
.pill-neutro { background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line-2); }

/* chips de filtro */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { font: 500 13px var(--font-body); border-radius: 999px; padding: 8px 14px; min-height: 36px; cursor: pointer; border: 1px solid var(--line-btn); background: transparent; color: var(--text-2); }
.chip:hover { background: var(--surface-2); }
.chip.ativo { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-text); }

/* abas */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.tab { height: 52px; padding: 0 14px; display: flex; align-items: center; gap: 8px; margin-bottom: -1px; font: 600 14px var(--font-body); color: var(--muted); border-bottom: 2px solid transparent; }
.tab:hover { color: var(--text); }
.tab.ativo { color: var(--text); border-bottom-color: var(--brand); }
.tab .count { font: 600 11px var(--font-num); padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.tab.ativo .count { background: var(--brand-soft); color: var(--brand-text); }

/* totais coloridos (pagamentos) */
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; display: flex; flex-direction: column; gap: 6px; }
.stat .lbl { font-size: 12px; font-weight: 600; letter-spacing: .8px; }
.stat .val { font: 600 24px var(--font-num); }
.stat.atrasado { border-color: var(--atrasado-stat); } .stat.atrasado .lbl { color: var(--atrasado-text); } .stat.atrasado .val { color: var(--atrasado); }
.stat.aberto { border-color: var(--aberto-stat); } .stat.aberto .lbl { color: var(--aberto-text); } .stat.aberto .val { color: var(--aberto); }
.stat.pago { border-color: var(--pago-stat); } .stat.pago .lbl { color: var(--pago-text); } .stat.pago .val { color: var(--pago); }

/* formulários */
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 14px; }
.form-grid .span-all { grid-column: 1 / -1; }
.form-stack { display: flex; flex-direction: column; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .field .label { font-size: 13px; font-weight: 500; color: var(--text-2); }
.input, .field input, .field select, .field textarea {
  height: 48px; padding: 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2);
  color: var(--text); font: 400 14px var(--font-body); width: 100%; outline: none;
}
.field textarea { height: auto; min-height: 88px; padding: 12px 14px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus {
  border-color: var(--brand); box-shadow: 0 0 0 3px rgba(61,220,151,.18);
}
.field input[type="date"] { color-scheme: dark; }
.field select option { background: var(--surface); }
.hint { font-size: 12px; color: var(--muted); line-height: 1.5; }

/* estado vazio */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 32px 12px; color: var(--muted); }
.empty strong { font: 600 15px var(--font-display); color: var(--text); }

/* avisos (flash) */
.flashes { display: flex; flex-direction: column; gap: 8px; }
.flash { padding: 12px 16px; border-radius: 12px; font-size: 14px; border: 1px solid var(--line-2); background: var(--surface); }
.flash-ok { border-color: var(--brand-line); background: var(--brand-soft); color: var(--brand-text); }
.flash-erro { border-color: var(--atrasado-line); background: var(--danger-bg); color: var(--atrasado-text); }

/* ---------- Login ---------- */
.login {
  min-height: 100vh; display: flex; flex-wrap: wrap;
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 48px 48px;
}
.login-hero { flex: 999 1 560px; min-width: 0; padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between; gap: 40px; position: relative; overflow: hidden; }
.login-hero > * { position: relative; z-index: 1; }
.login-glow { position: absolute; right: -180px; top: 120px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(61,220,151,.16) 0%, rgba(61,220,151,0) 65%); pointer-events: none; z-index: 0; }
.live-pill { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 1.4px; color: var(--brand-text); background: var(--brand-soft); border: 1px solid var(--brand-line); border-radius: 999px; padding: 6px 12px; }
.login-title { font: 800 56px/1.05 var(--font-display); letter-spacing: -1.5px; max-width: 640px; }
.login-title em { font-style: normal; color: var(--brand-num); }
.login-lead { font-size: 17px; line-height: 1.6; color: var(--text-3); max-width: 520px; margin: 0; }
.widgets { display: flex; flex-wrap: wrap; gap: 16px; }
.widget { background: var(--glass-2); border: 1px solid var(--line-2); border-radius: var(--radius-lg); padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.mini-bars { display: flex; align-items: flex-end; gap: 6px; height: 40px; }
.mini-bars span { flex: 1; background: var(--line-2); border-radius: 4px; }
.mini-bars span:last-child { background: var(--brand); }
.ring { width: 64px; height: 64px; border-radius: 50%; background: conic-gradient(var(--programado) 0deg 266deg, var(--line) 266deg 360deg); display: flex; align-items: center; justify-content: center; flex: none; }
.ring > span { width: 48px; height: 48px; border-radius: 50%; background: var(--surface); display: flex; align-items: center; justify-content: center; font: 600 13px var(--font-num); }
.split-bar { display: flex; gap: 6px; height: 8px; border-radius: 6px; overflow: hidden; }
.pillars { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.pillars li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-3); }
.pillars li::before { content: ""; width: 6px; height: 6px; border-radius: 2px; background: var(--brand); }
.login-side { flex: 1 1 420px; padding: 48px 40px; display: flex; align-items: center; justify-content: center; background: var(--glass); border-left: 1px solid var(--line-soft); }
.login-form { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 22px; }
.input-icon { display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 6px 0 14px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--surface); }
.input-icon:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(61,220,151,.18); }
.field .input-icon input, .input-icon input { border: 0; box-shadow: none; padding: 0; border-radius: 0; width: auto; flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--text); font: 400 15px var(--font-body); height: 48px; }
.check { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-2); min-height: 44px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--brand); }
.secure-note svg { flex: none; }
.secure-note { display: flex; align-items: center; gap: 10px; padding: 14px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line-soft); font-size: 12px; line-height: 1.5; color: var(--text-3); }

@keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.float1 { animation: floaty 6s ease-in-out infinite; }
.float2 { animation: floaty 7s ease-in-out infinite .8s; }
.float3 { animation: floaty 8s ease-in-out infinite 1.6s; }
@media (prefers-reduced-motion: reduce) { .float1, .float2, .float3 { animation: none; } }

@media (max-width: 600px) {
  .grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .kpi-value { font-size: 17px; }
  .grid-kpi > :last-child:nth-child(odd) { grid-column: span 2; }
}

@media (max-width: 900px) {
  .login-hero { padding: 32px 20px; gap: 28px; }
  .login-title { font-size: 38px; }
  .widgets { display: none; }
  .login-side { padding: 32px 20px 48px; border-left: 0; border-top: 1px solid var(--line-soft); }
  .page-title { font-size: 26px; }
}


/* ---------- Seletor de mês (calendário) ---------- */
.month-picker { position: relative; }
.month-trigger {
  height: 46px; padding: 0 14px 0 12px; border-radius: 12px; border: 1px solid var(--line-btn); background: var(--surface);
  color: var(--text); font: 600 14px var(--font-display); cursor: pointer; display: inline-flex; align-items: center; gap: 10px;
}
.month-trigger:hover, .month-trigger[aria-expanded="true"] { background: var(--surface-2); border-color: var(--line-hover); }
.month-trigger svg { flex: none; }
.month-trigger .caret { transition: transform .15s ease; }
.month-trigger[aria-expanded="true"] .caret { transform: rotate(180deg); }
.month-pop {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; width: 300px; max-width: calc(100vw - 32px);
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; padding: 14px;
  box-shadow: 0 18px 40px rgba(2,6,14,.35); display: flex; flex-direction: column; gap: 12px;
}
.month-pop[hidden] { display: none; }
.month-pop-head { display: flex; align-items: center; justify-content: space-between; }
.month-pop-head strong { font: 700 16px var(--font-display); }
.month-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.month-grid a {
  height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font: 500 14px var(--font-body); color: var(--text-2); border: 1px solid transparent;
}
.month-grid a:hover { background: var(--surface-2); color: var(--text); }
.month-grid a.hoje { border-color: var(--line-2); }
.month-grid a.sel { background: var(--primary); color: var(--primary-ink); border-color: var(--primary-line); font-weight: 700; }
.month-pop-foot { display: flex; justify-content: center; border-top: 1px solid var(--line); padding-top: 10px; }
.month-pop-foot a { font-size: 13px; font-weight: 600; min-height: 32px; display: inline-flex; align-items: center; }

/* ---------- Botão de tema ---------- */
.theme-toggle .sun { display: none; }
:root[data-theme="light"] .theme-toggle .sun { display: block; }
:root[data-theme="light"] .theme-toggle .moon { display: none; }
.login-theme { position: absolute; top: 20px; right: 20px; z-index: 5; background: var(--surface); border: 1px solid var(--line-2); }
@media (max-width: 600px) {
  .month-pop { left: 0; right: auto; }
}

/* linha "Tema" no menu lateral */
.theme-row { width: 100%; border: 0; background: transparent; cursor: pointer; font-family: var(--font-body); text-align: left; }
.theme-row .theme-label-light { display: none; }
:root[data-theme="light"] .theme-row .theme-label-light { display: inline; }
:root[data-theme="light"] .theme-row .theme-label-dark { display: none; }
.theme-switch { margin-left: auto; width: 38px; height: 22px; border-radius: 999px; background: var(--line-2); position: relative; flex: none; transition: background .15s ease; }
.theme-switch span { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--text); transition: transform .15s ease; }
:root[data-theme="light"] .theme-switch { background: var(--primary); }
:root[data-theme="light"] .theme-switch span { transform: translateX(16px); background: #FFFFFF; }
@media (min-width: 901px) {
  .app { background: linear-gradient(90deg, var(--bg-2) 256px, var(--bg) 256px); }
}

/* ---------- Cadastros (listas) ---------- */
.lista-cad { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--row-line); }
.lista-row:last-child { border-bottom: 0; }
.lista-row.inativo .input { color: var(--muted); text-decoration: line-through; }
.ordem-btns { display: flex; flex-direction: column; }
.ordem-btns .icon-btn { width: 32px; height: 22px; border-radius: 6px; }
.ordem-btns .icon-btn:disabled { opacity: .3; cursor: default; }
.rename { display: flex; gap: 8px; flex: 1; min-width: 0; margin: 0; align-items: center; }
.rename .input { height: 40px; flex: 1; min-width: 0; }
.rename .btn { visibility: hidden; }
.rename:focus-within .btn, .rename:hover .btn { visibility: visible; }
@media (hover: none) { .rename .btn { visibility: visible; } }
button.pill { font-family: var(--font-body); }

/* ---------- Usuários ---------- */
.user-list { display: flex; flex-direction: column; gap: 12px; }
.user-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--bg-2); }
.user-card.inativo { opacity: .75; }
.user-card-top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.user-card-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 200px; }
.user-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.user-actions details { display: contents; }
.user-actions details[open] { display: block; flex-basis: 100%; order: 10; }
.user-actions details[open] > summary { margin-bottom: 10px; }
.user-actions summary { list-style: none; }
.user-actions summary::-webkit-details-marker { display: none; }
.user-form { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 14px; }
.seg { display: flex; gap: 6px; background: var(--bg-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 4px; }
.seg label { flex: 1; cursor: pointer; position: relative; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 9px; font-weight: 600; color: var(--text-2); }
.seg input:checked + span { background: var(--primary); color: var(--primary-ink); }
.seg input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
.field input:disabled { opacity: .6; cursor: not-allowed; }
.user-box .nome a { color: inherit; }

/* ---------- Gastos diários ---------- */
.cat-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.cat-chip { display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg-2); color: var(--text-2); font-size: 12px; min-width: 120px; }
.cat-chip:hover { border-color: var(--line-hover); color: var(--text); }
.cat-chip strong { font-size: 14px; color: var(--text); }
.menu-excluir { display: inline-block; vertical-align: top; text-align: right; }
.menu-excluir summary { list-style: none; }
.menu-excluir summary::-webkit-details-marker { display: none; }
.menu-pop { margin-top: 6px; width: 180px; display: flex; flex-direction: column; gap: 6px; padding: 8px; background: var(--surface); border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 12px 28px rgba(2,6,14,.3); }
.menu-pop form { margin: 0; }
.seg-4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Tipo do gasto (Essencial / Lazer / Supérfluo / Indevido) ---------- */
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
fieldset.field legend { padding: 0; margin-bottom: 8px; }
.nat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.nat-card { position: relative; cursor: pointer; display: flex; }
.nat-card input { position: absolute; opacity: 0; pointer-events: none; }
.nat-body { flex: 1; display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg-2); }
.nat-card:hover .nat-body { border-color: var(--line-hover); }
.nat-card input:checked + .nat-body { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 20%, transparent); background: color-mix(in srgb, var(--c) 8%, var(--bg-2)); }
.nat-card input:focus-visible + .nat-body { outline: 2px solid var(--brand); outline-offset: 2px; }
.nat-top { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.nat-resumo { font-size: 12px; color: var(--text-2); }
.nat-ex { font-size: 11px; color: var(--muted); line-height: 1.4; }
.nat-limpar { min-height: 32px; font-size: 13px; color: var(--muted); }
.nat-tag { display: flex; width: fit-content; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--text-2); margin-top: 3px; }
.nat-tag .dot { width: 6px; height: 6px; box-shadow: none; }
@media (max-width: 380px) { .nat-grid { grid-template-columns: 1fr; } }

/* ---------- Pagar (escolher data e de onde saiu) ---------- */
.pay-pop { width: 250px; text-align: left; white-space: normal; }
.pay-pop .field input, .pay-pop .field select { height: 42px; }
.sep { height: 1px; background: var(--line); margin: 4px 0; }
a.stat:hover { border-color: var(--line-hover); }

/* ---------- Economia e metas ---------- */
.metas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 12px; }
.meta-card { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--bg-2); display: flex; flex-direction: column; gap: 10px; }
.meta-card.inativo { opacity: .65; }
.meta-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.meta-nome { font: 600 15px var(--font-display); overflow: hidden; text-overflow: ellipsis; }
.meta-valores { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.meta-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.mini-form { border: 1px solid var(--line); border-radius: 14px; padding: 16px; background: var(--bg-2); }
.mini-form h3 { display: flex; align-items: center; gap: 8px; }
.detalhe summary { cursor: pointer; font-weight: 600; color: var(--text-2); min-height: 36px; display: flex; align-items: center; }

/* ---------- Ajuda ---------- */
.ajuda p { margin: 0; color: var(--text-2); line-height: 1.6; }
.ajuda ul { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 8px; color: var(--text-2); line-height: 1.55; }
.ajuda .table td { vertical-align: top; }
.formula { font: 500 13px var(--font-num); background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; color: var(--text); line-height: 1.6; }
.ajuda { scroll-margin-top: 80px; }
.filtros { padding: 18px; }

/* ---------- Janela (modal) ---------- */
.modal { border: 1px solid var(--line-2); border-radius: 18px; background: var(--surface); color: var(--text); padding: 22px; width: min(420px, calc(100vw - 32px)); box-shadow: 0 24px 60px rgba(2,6,14,.45); }
.modal::backdrop { background: rgba(2,6,14,.6); backdrop-filter: blur(2px); }
.modal-acoes { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.modal-acoes .btn { flex: 1 1 140px; }

/* ---------- Caixa de entrada ---------- */
.nav-badge-info { background: var(--programado); color: #06122B; }
.caixa-lista { display: flex; flex-direction: column; gap: 12px; }
.caixa-item { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--bg-2); display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 90px; }
.caixa-top { display: flex; align-items: center; gap: 12px; }
.caixa-info { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.caixa-info strong { overflow: hidden; text-overflow: ellipsis; }
.caixa-valor { font-size: 16px; font-weight: 600; white-space: nowrap; }
.caixa-aviso { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--aberto-text); background: var(--aberto-bg); border: 1px solid var(--aberto-line); border-radius: 10px; padding: 8px 10px; }
.caixa-form { display: flex; flex-direction: column; gap: 12px; }
.caixa-acoes { display: flex; justify-content: flex-end; }
.nat-mini { display: flex; flex-wrap: wrap; gap: 6px; }
.nat-mini label { cursor: pointer; position: relative; }
.nat-mini input { position: absolute; opacity: 0; pointer-events: none; }
.nat-mini span { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line-2); font-size: 13px; color: var(--text-2); min-height: 36px; }
.nat-mini .dot { width: 7px; height: 7px; box-shadow: none; padding: 0; border: 0; min-height: 0; }
.nat-mini input:checked + span { border-color: var(--c, var(--brand)); background: color-mix(in srgb, var(--c, var(--brand)) 14%, transparent); color: var(--text); }
.nat-mini input:focus-visible + span { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (max-width: 600px) { .caixa-top { flex-wrap: wrap; } .caixa-valor { margin-left: 52px; } }

/* ---------- Integrações ---------- */
.passo { display: flex; gap: 14px; padding: 6px 0 18px; border-bottom: 1px solid var(--line); }
.passo:last-child { border-bottom: 0; padding-bottom: 0; }
.passo-num { width: 32px; height: 32px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font: 700 14px var(--font-display); background: var(--surface-2); color: var(--text-2); border: 1px solid var(--line-2); }
.passo.feito .passo-num { background: var(--brand-soft); color: var(--brand-text); border-color: var(--brand-line); }
.passo.bloqueado { opacity: .55; }
.passo-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.linha-form { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.item-pluggy { border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--bg-2); display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 90px; }
.item-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.conta-pluggy { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.lista-ajuda { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 10px; color: var(--text-2); line-height: 1.55; font-size: 13px; }
.conferencia { display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; font-size: 12px; border-radius: 10px; padding: 8px 10px; border: 1px solid var(--line-2); }
.conferencia.ok { background: var(--pago-bg); border-color: var(--pago-line); color: var(--pago-text); }
.conferencia.dif { background: var(--aberto-bg); border-color: var(--aberto-line); color: var(--aberto-text); }

/* ---------- Barra do topo (tema) e botões do topo padronizados ---------- */
.topbar { display: flex; justify-content: flex-end; margin-bottom: -8px; }
.theme-pill { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 12px 0 14px; border-radius: 999px; border: 1px solid var(--line-btn); background: var(--surface); color: var(--text-2); font: 600 13px var(--font-body); cursor: pointer; }
.theme-pill:hover { background: var(--surface-2); color: var(--text); }
.theme-pill .theme-label-light { display: none; }
:root[data-theme="light"] .theme-pill .theme-label-light { display: inline; }
:root[data-theme="light"] .theme-pill .theme-label-dark { display: none; }
.month-trigger { font: 600 14px var(--font-body); }
@media (max-width: 900px) { .topbar { display: none; } }

/* ---------- Contas compartilhadas ---------- */
.avisos-box { gap: 10px; padding: 16px 18px; }
.aviso-linha { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; color: var(--text-2); }
.aviso-linha span { flex: 1; min-width: 200px; }
.aviso-linha svg { flex: none; }
.comp-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px; background: var(--surface); display: flex; flex-direction: column; gap: 8px; color: inherit; }
a.comp-card:hover { border-color: var(--line-hover); color: inherit; }
.comp-top { display: flex; align-items: center; gap: 8px; font: 600 15px var(--font-display); }
.comp-nova { border-style: dashed; }
.comp-nova strong { display: flex; align-items: center; gap: 8px; }
.pessoa-linha { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--row-line); }
.pessoa-linha:last-child { border-bottom: 0; }
.pessoa-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* ---------- Sininho (alertas) ---------- */
.topbar { gap: 10px; align-items: center; }
.sino { position: relative; }
.sino summary { list-style: none; }
.sino summary::-webkit-details-marker { display: none; }
.sino-botao .nav-badge { margin-left: 2px; }
.sino-pop { position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; width: min(380px, calc(100vw - 32px)); max-height: 70vh; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line-2); border-radius: 16px; padding: 14px; box-shadow: 0 18px 40px rgba(2,6,14,.35);
  display: flex; flex-direction: column; gap: 10px; }
.sino-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.sino-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; padding: 8px 0; border-top: 1px solid var(--row-line); }
.sino-item a { flex: 1; color: var(--text-2); }
.sino-item svg { flex: none; margin-top: 2px; }
.sino-item.urgente a { color: var(--atrasado-text); }
@media (max-width: 900px) {
  .topbar { display: flex; margin: -8px 0 -12px; }
  .topbar .theme-toggle { display: none; }
  .sino-botao span:not(.nav-badge) { display: none; }
}

/* ---------- Patrimônio ---------- */
.bem-card { border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 16px; background: var(--surface); display: flex; flex-direction: column; gap: 10px; color: inherit; }
a.bem-card:hover { border-color: var(--line-hover); color: inherit; }
.bem-card.inativo { opacity: .6; }
.bem-top { display: flex; align-items: center; gap: 10px; }
.bem-top strong { font: 600 15px var(--font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bem-top .small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bem-icone { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-2); display: flex; align-items: center; justify-content: center; flex: none; }
.bem-valor { display: flex; flex-direction: column; gap: 2px; }
.bem-valor .num { font-size: 22px; font-weight: 600; }
.bem-foot { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--muted); border-top: 1px solid var(--row-line); padding-top: 8px; }
.bem-foot strong { color: var(--text); }
.quitado { display: flex; flex-direction: column; gap: 6px; }
.quitado-top { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; }
.quitado.grande .quitado-top { align-items: baseline; justify-content: flex-start; gap: 8px; }
.mini-evo { display: flex; align-items: flex-end; gap: 3px; height: 34px; }
.mini-evo span { flex: 1; min-height: 2px; background: var(--brand); border-radius: 3px 3px 1px 1px; opacity: .8; }
.mini-evo.alto { height: 80px; }
.fipe-box, .fin-box { border: 1px solid var(--line); border-radius: 12px; padding: 12px; background: var(--bg-2); }
.fipe-box legend, .fin-box legend { padding: 0 6px; }
.veredito { display: flex; flex-direction: column; gap: 6px; padding: 16px; border-radius: 14px; border: 1px solid var(--line-2); font-size: 14px; }
.veredito strong { font: 600 17px var(--font-display); }
.veredito.manter { background: var(--pago-bg); border-color: var(--pago-line); color: var(--pago-text); }
.veredito.trocar { background: var(--aberto-bg); border-color: var(--aberto-line); color: var(--aberto-text); }

/* ---------- Vínculo nos formulários ---------- */
.vinculo-abrir { align-self: flex-start; background: transparent; border: 1px dashed var(--line-2); border-radius: 10px; padding: 8px 12px; color: var(--text-2); font: 500 13px var(--font-body); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.vinculo-abrir:hover { border-color: var(--line-hover); color: var(--text); }
.vinculo.destaque .vinculo-campo select { border-color: var(--programado); box-shadow: 0 0 0 3px color-mix(in srgb, var(--programado) 18%, transparent); }
.vinculo.destaque .vinculo-campo label { color: var(--programado); font-weight: 600; }
.select-vinculo { height: 36px; width: auto; max-width: 170px; font-size: 12px; padding: 0 8px; }

/* ---------- Relatórios ---------- */
.ideias { gap: 10px; }
.ideia { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--text-2); line-height: 1.5; }
.ideia .dot { margin-top: 7px; box-shadow: none; }
.ideia.alto .dot { background: var(--atrasado); } .ideia.medio .dot { background: var(--aberto); }
.ideia.bom .dot { background: var(--pago); } .ideia.info .dot { background: var(--programado); }
.fluxo-graf { display: flex; align-items: stretch; gap: 10px; height: 190px; border-bottom: 1px solid var(--line); }
.fluxo-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; color: var(--text-2); }
.fluxo-col.futuro { opacity: .5; }
.fluxo-barras { flex: 1; display: flex; align-items: flex-end; justify-content: center; gap: 3px; }
.fb { width: 40%; max-width: 18px; min-height: 2px; border-radius: 4px 4px 1px 1px; }
.fb.rec { background: var(--receita); } .fb.des { background: var(--atrasado); }
.fluxo-mes { text-align: center; font-size: 11px; padding-bottom: 4px; }
.legenda-linha { display: flex; gap: 16px; font-size: 12px; color: var(--muted); }
.legenda-linha .sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.linha-total td { border-top: 1px solid var(--line-2); }
a.hbar-row, a.legend-row { color: inherit; }
a.hbar-row:hover .hbar-top span:first-child, a.legend-row:hover .nm { color: var(--link); }
.mapa { display: flex; flex-wrap: wrap; gap: 10px; }
.mapa-grupo { flex-basis: 220px; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.mapa-titulo { font-size: 12px; font-weight: 600; color: var(--text-3); letter-spacing: .4px; }
.mapa-itens { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.mapa-bloco { flex-basis: 120px; min-height: 92px; border-radius: 12px; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px;
  background: color-mix(in srgb, var(--c) 22%, var(--surface)); border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); color: var(--text); min-width: 0; }
.mapa-bloco:hover { border-color: var(--c); color: var(--text); }
.mapa-bloco strong { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mapa-bloco .num { font-size: 15px; font-weight: 600; }
.grow-2, .grow-1 { min-width: 0; }
.bem-card, .comp-card { min-width: 0; }
.vbar-col { min-width: 0; }
.page-head .menu-excluir { position: relative; }
.page-head .menu-excluir .menu-pop { position: absolute; right: 0; top: 100%; z-index: 30; }
@media (max-width: 600px) {
  .vbars, .vbar-labels { gap: 4px; }
  .vbar-col .v { font-size: 9px; }
  .vbar-labels span { font-size: 10px; }
  .fluxo-graf { gap: 3px; }
}
.grid-bens { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.mapa-bloco { flex-basis: 140px; }

/* v2: botão Voltar */
.voltar { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-2); text-decoration: none; margin-bottom: 4px; width: fit-content; }
.voltar:hover { color: var(--text); }

/* v2: plano de pagamento do imóvel */
.plano-form { margin-top: 14px; }
.plano-form > summary { list-style: none; width: fit-content; cursor: pointer; }
.plano-form > summary::-webkit-details-marker { display: none; }
.plano-form[open] > summary { margin-bottom: 14px; }
.plano-form > form { border-top: 1px solid var(--line); padding-top: 14px; }
.cal-plano { display: flex; flex-direction: column; gap: 6px; }
.cal-mes { display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 10px; font-size: 13px; padding: 2px 6px; border-radius: 8px; }
.cal-mes.pesado { background: var(--aberto-bg); }
.cal-mes.pesado .cal-val { color: var(--aberto-text); font-weight: 600; }
.cal-rot { color: var(--text-2); }
.cal-bar { height: 8px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.cal-bar > span { display: block; height: 100%; background: var(--programado); border-radius: 4px; }
.cal-mes.pesado .cal-bar > span { background: var(--aberto); }
.cal-val { min-width: 90px; text-align: right; }
.hbar-top .sub { display: block; font-size: 11px; color: var(--text-3); font-weight: 400; }
.hbar-top .num { white-space: nowrap; }
@media (max-width: 640px) {
  .plano-tabela thead { display: none; }
  .plano-tabela, .plano-tabela tbody { display: block; min-width: 0 !important; width: 100%; }
  .plano-tabela tr { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .plano-tabela td { display: block; border: 0; padding: 0; text-align: left !important; }
  .plano-tabela td.nome-linha, .plano-tabela td.acoes-linha { grid-column: 1 / -1; }
  .plano-tabela td[data-rotulo]::before { content: attr(data-rotulo); display: block; font-size: 11px; color: var(--text-3); font-family: inherit; }
  .plano-tabela td.acoes-linha { text-align: left; }
}
a.stat-link { text-decoration: none; color: inherit; }
a.stat-link:hover { border-color: var(--line-strong, var(--line)); }