/* =========================================================================
   hub_dividas — Design System "Concílio · Tesouraria"
   Extraído do protótipo (Plus Jakarta Sans, brand vermelho/marsala, camel).
   Substitui totalmente o Bootstrap: só este arquivo estiliza o app.
   ========================================================================= */

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/PlusJakartaSans.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* paleta */
  --white:#fff; --black:#000;
  --neutral-50:#f6f6f6; --neutral-100:#d9d9d9; --neutral-200:#b2b2b2; --neutral-300:#8c8c8c;
  --neutral-400:#686868; --neutral-500:#464646; --neutral-600:#363636; --neutral-700:#262626;
  --neutral-800:#171717; --neutral-900:#111;
  --red-50:#fdeded; --red-100:#fbcbcb; --red-200:#f79394; --red-300:#f54b4f; --red-400:#dd2930;
  --red-500:#c52027; --red-600:#9e1a1f; --red-700:#871217; --red-800:#630c10; --red-900:#4e0609;
  --maroon-50:#fbeeee; --maroon-100:#f3c0c1; --maroon-300:#ac2d32; --maroon-500:#721b1e;
  --maroon-700:#3d0a0c; --maroon-900:#2d0303;
  --camel-50:#f9efe9; --camel-100:#edcbb4; --camel-300:#d79f70; --camel-500:#a87c56;
  --camel-700:#7c5a3e; --camel-900:#2c1e12;
  --indigo-50:#f0f0f9; --indigo-100:#cacbec; --indigo-300:#a0a1dd; --indigo-400:#7679cd;
  --indigo-500:#4e51b8; --indigo-600:#2f3283; --indigo-900:#161847;

  /* semânticos */
  --brand:var(--red-500); --brand-hover:var(--red-600); --brand-active:var(--red-700);
  --brand-deep:var(--maroon-700); --brand-contrast:var(--white);
  --text-primary:var(--neutral-900); --text-secondary:var(--neutral-400);
  /* #8c8c8c (neutral-300) dava 3.11-3.36:1 em texto normal sobre fundo claro — abaixo do
     piso AA (4.5:1). #6e6e6e mede 4.72:1 sobre --neutral-50/#f6f6f6 (o fundo mais claro
     onde este token aparece — célula travada/page-meta) e 4.95:1 sobre branco puro; ambos
     acima do piso com folga. Mantém mais claro que --text-secondary (#686868, 5.57:1). */
  --text-tertiary:#6e6e6e; --text-inverse:var(--white); --text-link:var(--red-600);
  --surface-page:var(--white); --surface-subtle:var(--neutral-50); --surface-card:var(--white);
  --surface-deep:var(--maroon-700);
  --border-subtle:#ececec; --border-default:#e0e0e0; --border-strong:var(--neutral-200);
  --border-inverse:rgba(255,255,255,.16);
  --viz-1:var(--red-500); --viz-2:var(--indigo-600); --viz-3:var(--camel-300); --viz-4:var(--neutral-400);
  --viz-5:var(--maroon-700); --viz-6:var(--indigo-300); --viz-7:var(--camel-500); --viz-8:var(--neutral-200);
  /* #1f8a5b sobre --positive-surface (#e7f4ee) dava 3.83:1 — abaixo do piso AA
     (4.5:1) na badge "curva" de premissas macro. #12603d (já usado em
     .alert-success) mede 6.71:1. */
  --positive:#12603d; --positive-surface:#e7f4ee; --negative:var(--red-500); --negative-surface:var(--red-50);
  --warning:var(--camel-500); --warning-surface:var(--camel-50); --info:var(--indigo-600); --info-surface:var(--indigo-50);

  /* tipografia */
  --font-sans:"Plus Jakarta Sans","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-mono:"SFMono-Regular",ui-monospace,"Menlo","Consolas",monospace;
  --fw-regular:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; --fw-extrabold:800;
  --text-display-lg:44px; --text-display-md:36px; --text-display-sm:28px;
  --text-xl:22px; --text-lg:18px; --text-md:16px; --text-sm:14px; --text-xs:12px; --text-2xs:11px;
  --leading-tight:1.05; --leading-snug:1.2; --leading-normal:1.45;
  --tracking-tight:-0.02em; --tracking-eyebrow:0.14em;
  --numeric-tabular:"tnum" 1,"lnum" 1;

  /* espaço / forma */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px;
  --radius-sm:4px; --radius-md:6px; --radius-lg:10px; --radius-xl:16px; --radius-pill:999px;
  --shadow-sm:0 1px 3px rgba(17,17,17,.07),0 1px 2px rgba(17,17,17,.04);
  --shadow-md:0 4px 14px rgba(17,17,17,.08);
  --shadow-lg:0 12px 32px rgba(17,17,17,.10);
  --ring:0 0 0 3px rgba(197,32,39,.30);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --sidebar-w:264px;
}

*,*::before,*::after{box-sizing:border-box;}
html{text-size-adjust:100%;}
body{
  margin:0; font-family:var(--font-sans); font-size:var(--text-md); line-height:var(--leading-normal);
  font-weight:var(--fw-regular); color:var(--text-primary); background:var(--surface-subtle);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
h1,h2,h3,h4,h5,h6{margin:0; font-weight:var(--fw-bold); line-height:var(--leading-snug);
  letter-spacing:var(--tracking-tight); color:var(--text-primary); text-wrap:balance;}
p{margin:0; text-wrap:pretty;}
a{color:var(--text-link); text-decoration:none;}
a:hover{text-decoration:underline;}
img,svg{max-width:100%;}
::-webkit-scrollbar{width:10px; height:10px;}
::-webkit-scrollbar-thumb{background:var(--neutral-200); border-radius:999px; border:2px solid var(--surface-subtle);}
::-webkit-scrollbar-track{background:transparent;}

.eyebrow{font-size:var(--text-xs); font-weight:var(--fw-semibold); letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase; color:var(--text-secondary);}
.eyebrow-brand{color:var(--brand);}
.tnum{font-variant-numeric:tabular-nums lining-nums; font-feature-settings:var(--numeric-tabular);}
.rule-brand{height:3px; width:48px; background:var(--brand); border:none; border-radius:var(--radius-pill); margin:14px 0 0;}
.muted{color:var(--text-secondary);}
.pos{color:var(--positive);} .neg{color:var(--brand);}

/* ===================== SHELL ===================== */
.app-shell{display:flex; min-height:100vh;}
.app-sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w); position:sticky; top:0; align-self:flex-start;
  height:100vh; display:flex; flex-direction:column; color:rgba(255,255,255,.85);
  background:linear-gradient(180deg,#180203 0%, var(--maroon-700) 62%, var(--maroon-900) 100%);
  border-right:1px solid rgba(0,0,0,.4);
}
.app-brand{display:flex; align-items:center; gap:12px; padding:22px 22px 20px;}
.app-brand .brand-mark{width:34px; height:34px; flex:0 0 34px;}
.app-brand .brand-name{display:flex; flex-direction:column; line-height:1;}
.app-brand .brand-name b{font-size:18px; font-weight:var(--fw-extrabold); color:#fff; letter-spacing:.01em;}
.app-brand .brand-name small{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--camel-300); margin-top:4px;}

.app-nav{display:flex; flex-direction:column; gap:2px; padding:6px 12px; flex:1; overflow-y:auto;}
.nav-section{font-size:10px; font-weight:var(--fw-bold); letter-spacing:.16em; text-transform:uppercase;
  color:rgba(255,255,255,.36); padding:16px 12px 6px;}
.nav-link{display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:var(--radius-md);
  color:rgba(255,255,255,.82); font-size:14px; font-weight:var(--fw-medium); transition:background .12s;}
.nav-link:hover{background:rgba(255,255,255,.06); text-decoration:none; color:#fff;}
.nav-link .nav-ico{width:18px; height:18px; flex:0 0 18px; opacity:.85;}
.nav-link.active{background:rgba(197,32,39,.18); color:#fff;}
.nav-link.active .nav-ico{opacity:1;}
.nav-link.disabled{color:rgba(255,255,255,.32); pointer-events:none;}

.app-sidebar-footer{padding:14px 16px; border-top:1px solid var(--border-inverse); display:flex;
  align-items:center; gap:11px;}
.app-sidebar-footer .avatar{width:34px; height:34px; flex:0 0 34px; border-radius:var(--radius-pill);
  background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:var(--fw-bold);}
.app-sidebar-footer .who{display:flex; flex-direction:column; line-height:1.2; min-width:0;}
.app-sidebar-footer .who b{font-size:13px; color:#fff; font-weight:var(--fw-semibold); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.app-sidebar-footer .who small{font-size:11px; color:rgba(255,255,255,.5);}
/* padding:3px sobre o ícone de 18px dá alvo de toque de 24×24 (piso WCAG 2.5.5 AA) —
   achado do gate de usabilidade v0.5.0 (media 18×18, abaixo do piso). margin negativo
   compensa o padding pra não deslocar o alinhamento visual no rodapé. */
.app-sidebar-footer .signout{margin-left:auto; margin-right:-3px; margin-top:-3px; margin-bottom:-3px;
  padding:3px; color:rgba(255,255,255,.55); display:flex;}
.app-sidebar-footer .signout:hover{color:#fff;}

.app-main{flex:1 1 auto; min-width:0; padding:30px 40px 56px; max-width:1520px;}

/* botão hambúrguer — só no mobile (ver media query) */
.nav-toggle{display:none; position:fixed; top:14px; left:14px; z-index:70; width:42px; height:42px;
  align-items:center; justify-content:center; border-radius:var(--radius-md); border:1px solid var(--border-default);
  background:#fff; color:var(--text-primary); box-shadow:var(--shadow-sm); cursor:pointer;}
.nav-toggle .nav-ico{width:22px; height:22px;}
.sidebar-overlay{display:none; position:fixed; inset:0; background:rgba(17,10,10,.45); z-index:40;}
.sidebar-overlay.open{display:block;}

/* ===================== PAGE HEADER ===================== */
.page-head{display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:26px;}
.page-head h1{font-size:var(--text-display-md); letter-spacing:-.025em; margin-top:6px;}
.page-head .subtitle{margin-top:12px; color:var(--text-secondary); font-size:var(--text-sm); max-width:70ch;}
.page-head-right{text-align:right; display:flex; flex-direction:column; align-items:flex-end; gap:12px;}
.page-meta{font-size:var(--text-2xs); letter-spacing:.06em; text-transform:uppercase; color:var(--text-tertiary); line-height:1.7;}
.page-meta b{color:var(--text-secondary);}

/* ===================== BUTTONS ===================== */
.btn{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 18px; border-radius:var(--radius-md);
  font-family:inherit; font-size:14px; font-weight:var(--fw-semibold); cursor:pointer; border:1px solid transparent;
  transition:background .12s,border-color .12s,box-shadow .12s; white-space:nowrap; text-decoration:none;}
.btn:hover{text-decoration:none;}
.btn-brand{background:var(--brand); color:#fff; box-shadow:var(--shadow-sm);}
.btn-brand:hover{background:var(--brand-hover); color:#fff;}
.btn-brand:active{background:var(--brand-active);}
.btn-ghost{background:#fff; color:var(--text-primary); border-color:var(--border-strong);}
.btn-ghost:hover{background:var(--neutral-50);}
.btn-danger{background:#fff; color:var(--brand); border-color:var(--red-200);}
.btn-danger:hover{background:var(--red-50);}
.btn-sm{height:34px; padding:0 13px; font-size:13px;}
.btn:focus-visible{outline:none; box-shadow:var(--ring);}
.btn:disabled{opacity:.5; cursor:not-allowed;}

/* ===================== CARDS ===================== */
.card{background:var(--surface-card); border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:22px 24px;}
.card-deep{background:linear-gradient(160deg,var(--maroon-700),var(--maroon-900)); color:rgba(255,255,255,.9);
  border-color:transparent;}
.card-deep h3,.card-deep .card-title{color:#fff;}
.card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:18px;}
.card-title{font-size:var(--text-xs); font-weight:var(--fw-bold); letter-spacing:.1em; text-transform:uppercase; color:var(--text-secondary);}
.card-deep .card-title{color:var(--camel-300);}
.card-sub{font-size:var(--text-xs); color:var(--text-tertiary); margin-top:5px;}
.card-deep .card-sub{color:rgba(255,255,255,.55);}

/* ===================== KPI ===================== */
.kpi-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:20px;}
.kpi-grid.four{grid-template-columns:repeat(4,1fr);}
/* `.three` nasceu como `style="grid-template-columns:repeat(3,1fr)"` inline no
   `dividas.html`. Inline vence QUALQUER media query, então a grade ficava
   travada em 3 colunas até 320px — ~42px de conteúdo por card, e o valor
   monetário saía cortado. Como classe, ela obedece aos breakpoints abaixo. */
.kpi-grid.three{grid-template-columns:repeat(3,1fr);}
.kpi{position:relative; background:#fff; border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:20px 20px 18px; overflow:hidden; min-width:0; container-type:inline-size;}
.kpi::before{content:""; position:absolute; inset:0 0 auto 0; height:3px; background:var(--brand);}
.kpi-label{font-size:var(--text-2xs); font-weight:var(--fw-bold); letter-spacing:.08em; text-transform:uppercase; color:var(--text-secondary);}
/* min-width:0 evita "grid blowout" (item de grid não encolhe abaixo do conteúdo
   por padrão). container-type:inline-size + clamp(...cqw) no valor abaixo
   encolhe a FONTE quando o card é estreito (nunca quebra linha no meio do
   número) — achado do gate de usabilidade v0.5.0: "US$ 3.400.000,00" vazava
   15px pra fora da própria caixa no card de moeda estrangeira, mais largo que
   os valores em BRL; `overflow-wrap:break-word` sozinho parava o vazamento mas
   partia o número em 3 linhas ("...,0" + "0"), pior que o vazamento original. */
.kpi-value{font-size:clamp(20px, 11cqw, 32px); font-weight:var(--fw-extrabold); letter-spacing:-.03em; margin-top:10px; line-height:1.15; white-space:nowrap;}
.kpi-value.accent{color:var(--brand);}
/* `.longo` — valor monetário por extenso ("US$ 3.400.000,00", 16 caracteres),
   que aparece quando a carteira tem mais de uma moeda e cada card empilha um
   valor por moeda. O teto de 32px do `.kpi-value` é calibrado pra rótulo curto
   ("R$ 68,4M"); com 16 caracteres ele precisa de ~360px e o `.kpi` tem
   `overflow:hidden` — o número era CORTADO no meio ("US$ 3.4"). Antes disso
   havia um `style="font-size:22px"` inline no template, que era pior: fixo em
   px, anulava o `clamp` inteiro e não encolhia em tela nenhuma.
   Teto de 22px e coeficiente de 7,5cqw dão folga em todo viewport medido
   (320→1920), sem tocar no `.kpi-value` normal — o dashboard fica idêntico.
   Achado do gate de usabilidade de 2026-08-29; regressão coberta por
   `tests/e2e/test_auth_adapta_e2e.py::test_kpi_nao_e_clipado_em_tela_estreita`. */
.kpi-value.longo{font-size:clamp(15px, 7.5cqw, 22px);}
.kpi-foot{font-size:var(--text-2xs); color:var(--text-tertiary); margin-top:9px;}

/* ===================== LAYOUT GRIDS ===================== */
.split{display:grid; grid-template-columns:1.62fr 1fr; gap:18px;}
.split3{display:grid; grid-template-columns:1.1fr 1fr; gap:18px;}
.stack{display:grid; gap:18px;}
.mt-18{margin-top:18px;} .mt-24{margin-top:24px;}

/* charts fill the card */
.chart-wrap{position:relative; width:100%;}

/* ===================== DONUT LEGEND ===================== */
.donut-row{display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; padding:7px 0;
  font-size:var(--text-sm);}
.donut-row + .donut-row{border-top:1px solid var(--border-subtle);}
.donut-dot{width:11px; height:11px; border-radius:3px; flex:0 0 11px;}
.donut-pct{font-weight:var(--fw-bold); font-variant-numeric:tabular-nums;}

/* ===================== TABLE ===================== */
.tbl{width:100%; border-collapse:collapse; font-size:var(--text-sm);}
.tbl thead th{font-size:var(--text-2xs); font-weight:var(--fw-bold); letter-spacing:.06em; text-transform:uppercase;
  color:var(--text-secondary); text-align:left; padding:0 14px 12px; border-bottom:1px solid var(--border-default);}
.tbl thead th.num,.tbl td.num{text-align:right; font-variant-numeric:tabular-nums;}
.tbl tbody td{padding:14px; border-bottom:1px solid var(--border-subtle); vertical-align:middle;}
.tbl tbody tr.clickable{cursor:pointer; transition:background .12s;}
.tbl tbody tr.clickable:hover{background:var(--neutral-50);}
.tbl tbody tr:last-child td{border-bottom:none;}
.tbl .strong{font-weight:var(--fw-semibold); color:var(--text-primary);}
.tbl-wrap{overflow-x:auto;}
.tbl-empty{padding:48px 24px; text-align:center; color:var(--text-tertiary); font-size:14px;}

/* ===================== BADGES / CHIPS ===================== */
.badge{display:inline-flex; align-items:center; gap:6px; height:22px; padding:0 9px; border-radius:var(--radius-pill);
  font-size:var(--text-2xs); font-weight:var(--fw-bold); letter-spacing:.03em; text-transform:uppercase;}
.badge-neutral{background:var(--neutral-50); color:var(--neutral-500); border:1px solid var(--border-default);}
.badge-brand{background:var(--red-50); color:var(--brand); border:1px solid var(--red-100);}
.badge-indigo{background:var(--indigo-50); color:var(--indigo-600); border:1px solid var(--indigo-100);}
.badge-camel{background:var(--camel-50); color:var(--camel-700); border:1px solid var(--camel-100);}
.badge-pos{background:var(--positive-surface); color:var(--positive);}

.chip{display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 18px; border-radius:var(--radius-pill);
  font-size:14px; font-weight:var(--fw-semibold); cursor:pointer; border:1px solid var(--border-strong);
  background:#fff; color:var(--text-secondary); transition:.12s; text-decoration:none;}
.chip:hover{border-color:var(--neutral-300); text-decoration:none; color:var(--text-primary);}
.chip.active{background:var(--brand); border-color:var(--brand); color:#fff;}
.chip-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.chip-row .chip-label{font-size:var(--text-2xs); font-weight:var(--fw-bold); letter-spacing:.1em; text-transform:uppercase; color:var(--text-secondary); margin-right:4px;}

/* ===================== FORMS ===================== */
.pf-lbl{display:block; font-size:11px; font-weight:700; letter-spacing:.03em; color:var(--text-secondary); margin-bottom:6px;}
.pf-inp{width:100%; height:40px; padding:0 12px; border:1px solid var(--border-strong); border-radius:6px;
  font-size:14px; font-family:inherit; color:var(--text-primary); background:#fff; outline:none;
  transition:border-color .12s,box-shadow .12s;}
textarea.pf-inp{height:auto; padding:10px 12px; line-height:1.5; resize:vertical; min-height:96px;}
.pf-inp:focus{border-color:var(--red-400); box-shadow:var(--ring);}
select.pf-inp{cursor:pointer; appearance:none; padding-right:32px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23686868' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;}
.pf-help{font-size:11px; color:var(--text-tertiary); margin-top:5px; line-height:1.4;}
.pf-fsec{font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--red-600);
  padding-bottom:8px; margin:8px 0 4px; border-bottom:1px solid var(--border-subtle);}
.pf-fgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:16px 18px;}
.pf-field.col-span-2{grid-column:span 2;}
.pf-field.col-span-full{grid-column:1/-1;}
.pf-check{display:flex; align-items:center; gap:9px; font-size:14px; cursor:pointer;}
.pf-check input{width:17px; height:17px; accent-color:var(--brand);}

/* ===================== FLASH ===================== */
.app-flash{display:flex; flex-direction:column; gap:10px; margin-bottom:22px;}
.alert{padding:12px 16px; border-radius:var(--radius-md); font-size:14px; border:1px solid transparent; font-weight:var(--fw-medium);}
.alert-success{background:var(--positive-surface); color:#12603d; border-color:#bfe3d0;}
.alert-danger,.alert-error{background:var(--negative-surface); color:var(--red-700); border-color:var(--red-100);}
.alert-warning{background:var(--warning-surface); color:var(--camel-700); border-color:var(--camel-100);}
.alert-info{background:var(--info-surface); color:var(--indigo-600); border-color:var(--indigo-100);}

/* ===================== MODAL ===================== */
.modal-backdrop{position:fixed; inset:0; background:rgba(17,10,10,.5); backdrop-filter:blur(2px);
  display:none; align-items:flex-start; justify-content:center; padding:5vh 20px; z-index:60; overflow-y:auto;}
.modal-backdrop.open{display:flex;}
.modal{background:#fff; border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); width:min(920px,100%);
  max-height:90vh; overflow-y:auto; animation:pfIn .24s var(--ease-out);}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:22px 26px; border-bottom:1px solid var(--border-subtle); position:sticky; top:0; background:#fff; z-index:1;}
.modal-head h2{font-size:var(--text-xl);}
.modal-body{padding:24px 26px;}
.modal-foot{display:flex; justify-content:flex-end; gap:12px; padding:18px 26px; border-top:1px solid var(--border-subtle);
  position:sticky; bottom:0; background:#fff;}
.modal-close{background:none; border:none; cursor:pointer; color:var(--text-tertiary); font-size:22px; line-height:1; padding:4px;}
.modal-close:hover{color:var(--text-primary);}

@keyframes pfIn{0%{opacity:0; transform:translateY(6px);} 100%{opacity:1; transform:none;}}
.pf-screen{animation:pfIn .24s var(--ease-out);}

/* ===================== AUTH ===================== */
.auth-body{background:linear-gradient(150deg,#180203, var(--maroon-700) 70%, var(--maroon-900));
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.auth-card{background:#fff; border-radius:var(--radius-xl); box-shadow:var(--shadow-lg); padding:40px 38px;
  width:min(410px,100%);}
.auth-brand{display:flex; align-items:center; gap:12px; margin-bottom:24px;}
.auth-brand .brand-mark{width:38px; height:38px;}
.auth-title{font-size:22px; font-weight:var(--fw-extrabold);}
.auth-subtitle{color:var(--text-secondary); font-size:14px; margin-top:2px;}
.auth-card form{margin-top:26px; display:flex; flex-direction:column; gap:16px;}
.auth-flash{width:min(410px,100%); margin:0 auto 14px;}

/* ===================== RESPONSIVE ===================== */
@media (max-width:1180px){
  .kpi-grid,.kpi-grid.four,.kpi-grid.three{grid-template-columns:repeat(3,1fr);}
  .split,.split3{grid-template-columns:1fr;}
}
@media (max-width:920px){
  .app-main{padding:64px 20px 44px;}
  .app-sidebar{position:fixed; z-index:50; transform:translateX(-100%); transition:transform .2s;}
  .app-sidebar.open{transform:none;}
  .nav-toggle{display:inline-flex;}
  .page-head{flex-direction:column;}
  .page-head-right{align-items:flex-start; text-align:left;}
}
@media (max-width:720px){
  .kpi-grid,.kpi-grid.four,.kpi-grid.three{grid-template-columns:repeat(2,1fr);}
  .page-head h1{font-size:var(--text-display-sm);}
}
/* Abaixo de 560px duas colunas deixam ~120px de conteúdo por card — largura
   insuficiente pra QUALQUER valor monetário por extenso, mesmo com a fonte no
   piso legível (15px). Uma coluna é o único arranjo em que o número cabe
   inteiro; é o mesmo motivo pelo qual o `.kpi-value.longo` existe. */
@media (max-width:560px){
  .kpi-grid,.kpi-grid.four,.kpi-grid.three{grid-template-columns:1fr;}
}

/* ---- Widget de feedback (lib concilio-feedback) -------------------------- */
/* O widget lê variáveis `--cfb-*`; aqui elas apontam para os tokens da Tesouraria.
   A folha da lib põe os DEFAULTS numa @layer, então este bloco vence. */
:root{
  --cfb-primaria:var(--brand);
  --cfb-primaria-txt:var(--brand-contrast);
  --cfb-fundo:var(--surface-card);
  --cfb-fundo-2:var(--surface-subtle);
  --cfb-texto:var(--text-primary);
  --cfb-texto-2:var(--text-secondary);
  --cfb-borda:var(--border-default);
  --cfb-raio:var(--radius-md);
}