/* ============================================================
   Tokens de tema (claro/escuro) da marca Proposito:
   marinho #171C32, dourado #D3AA4A, creme #FAF6EE.
   As escalas do Tailwind apontam para estas variaveis
   (static/tailwind-config.js), entao as classes existentes
   trocam de tema sozinhas.
   Para ajustar uma cor, mude o valor no tema claro E nos dois blocos escuros.
   ============================================================ */
:root {
    --slate-50: 249 247 242;
    --slate-100: 242 239 232;
    --slate-200: 230 226 216;
    --slate-300: 208 205 196;
    --slate-400: 154 157 173;
    --slate-500: 110 116 140;
    --slate-600: 83 90 120;
    --slate-700: 58 65 96;
    --slate-800: 37 43 69;
    --slate-900: 23 28 50;
    --blue-50: 238 241 248;
    --blue-100: 221 227 241;
    --blue-200: 189 200 226;
    --blue-300: 143 160 204;
    --blue-400: 96 124 184;
    --blue-500: 61 90 153;
    --blue-600: 46 70 125;
    --blue-700: 35 54 99;
    --blue-800: 28 40 75;
    --blue-900: 23 28 50;
    --ouro-50: 252 247 234;
    --ouro-100: 247 236 206;
    --ouro-200: 238 218 160;
    --ouro-300: 226 196 118;
    --ouro-400: 217 181 90;
    --ouro-500: 211 170 74;
    --ouro-600: 179 131 31;
    --ouro-700: 138 106 31;
    --ouro-800: 107 82 26;
    --ouro-900: 77 59 20;
    --green-50: 240 253 244;
    --green-100: 220 252 231;
    --green-200: 187 247 208;
    --green-300: 134 239 172;
    --green-400: 74 222 128;
    --green-500: 34 197 94;
    --green-600: 22 163 74;
    --green-700: 21 128 61;
    --green-800: 22 101 52;
    --green-900: 20 83 45;
    --red-50: 254 242 242;
    --red-100: 254 226 226;
    --red-200: 254 202 202;
    --red-300: 252 165 165;
    --red-400: 248 113 113;
    --red-500: 239 68 68;
    --red-600: 220 38 38;
    --red-700: 185 28 28;
    --red-800: 153 27 27;
    --red-900: 127 29 29;
    --amber-50: 255 251 235;
    --amber-100: 254 243 199;
    --amber-200: 253 230 138;
    --amber-300: 252 211 77;
    --amber-400: 251 191 36;
    --amber-500: 245 158 11;
    --amber-600: 217 119 6;
    --amber-700: 180 83 9;
    --amber-800: 146 64 14;
    --amber-900: 120 53 15;
    --orange-50: 255 247 237;
    --orange-100: 255 237 213;
    --orange-200: 254 215 170;
    --orange-300: 253 186 116;
    --orange-400: 251 146 60;
    --orange-500: 249 115 22;
    --orange-600: 234 88 12;
    --orange-700: 194 65 12;
    --orange-800: 154 52 18;
    --orange-900: 124 45 18;
    --surface: 255 255 255;
    --page: 250 246 238;
    --line: 233 227 214;
    --ink: 23 28 50;
    --lateral: #171C32;
    --lateral-borda: transparent;
    --viz-receita: #3d5a99;
    --viz-despesa: #b3831f;
    --viz-ink: #171c32;
    --viz-grid: #ece6da;
    --viz-axis: #6e748c;
    --viz-pl: #3d5a99;
    --viz-pl-fill: rgba(61,90,153,0.10);
    --status-ok: #0ca30c;
    --status-atencao: #d18a00;
    --status-critico: #d03b3b;
    --primario: #171C32;
    --primario-hover: #2a3150;
    --primario-texto: #ffffff;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --slate-50: 19 23 41;
    --slate-100: 31 37 62;
    --slate-200: 42 49 79;
    --slate-300: 60 68 102;
    --slate-400: 110 117 148;
    --slate-500: 145 151 178;
    --slate-600: 176 181 202;
    --slate-700: 204 207 222;
    --slate-800: 228 229 236;
    --slate-900: 244 242 236;
    --blue-50: 27 35 66;
    --blue-100: 33 44 82;
    --blue-200: 45 60 108;
    --blue-300: 60 82 145;
    --blue-400: 85 115 190;
    --blue-500: 95 136 216;
    --blue-600: 130 160 225;
    --blue-700: 165 187 235;
    --blue-800: 200 213 243;
    --blue-900: 226 233 249;
    --ouro-50: 44 36 18;
    --ouro-100: 60 48 20;
    --ouro-200: 90 70 26;
    --ouro-300: 140 108 36;
    --ouro-400: 190 150 60;
    --ouro-500: 211 170 74;
    --ouro-600: 222 188 110;
    --ouro-700: 232 204 140;
    --ouro-800: 240 222 176;
    --ouro-900: 248 238 212;
    --green-50: 17 42 34;
    --green-100: 20 58 42;
    --green-200: 30 86 58;
    --green-300: 40 130 80;
    --green-400: 34 170 90;
    --green-500: 34 197 94;
    --green-600: 74 222 128;
    --green-700: 134 239 172;
    --green-800: 187 247 208;
    --green-900: 220 252 231;
    --red-50: 56 24 34;
    --red-100: 76 30 40;
    --red-200: 108 40 48;
    --red-300: 150 50 56;
    --red-400: 220 70 70;
    --red-500: 239 68 68;
    --red-600: 248 113 113;
    --red-700: 252 165 165;
    --red-800: 254 202 202;
    --red-900: 254 226 226;
    --amber-50: 52 40 20;
    --amber-100: 72 53 20;
    --amber-200: 108 78 24;
    --amber-300: 160 110 15;
    --amber-400: 230 150 10;
    --amber-500: 245 158 11;
    --amber-600: 251 191 36;
    --amber-700: 252 211 77;
    --amber-800: 253 230 138;
    --amber-900: 254 243 199;
    --orange-50: 56 32 22;
    --orange-100: 78 43 22;
    --orange-200: 112 60 26;
    --orange-300: 170 80 25;
    --orange-400: 240 110 30;
    --orange-500: 249 115 22;
    --orange-600: 251 146 60;
    --orange-700: 253 186 116;
    --orange-800: 254 215 170;
    --orange-900: 255 237 213;
    --surface: 23 28 50;
    --page: 13 16 30;
    --line: 38 45 74;
    --ink: 240 237 230;
    --lateral: #10142a;
    --lateral-borda: #262d4a;
    --viz-receita: #5f88d8;
    --viz-despesa: #b0852a;
    --viz-ink: #f0ede6;
    --viz-grid: #262d4a;
    --viz-axis: #9197b2;
    --viz-pl: #5f88d8;
    --viz-pl-fill: rgba(95,136,216,0.16);
    --status-ok: #0ca30c;
    --status-atencao: #fab219;
    --status-critico: #e05252;
    --primario: #D3AA4A;
    --primario-hover: #e0bb62;
    --primario-texto: #171C32;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
    --slate-50: 19 23 41;
    --slate-100: 31 37 62;
    --slate-200: 42 49 79;
    --slate-300: 60 68 102;
    --slate-400: 110 117 148;
    --slate-500: 145 151 178;
    --slate-600: 176 181 202;
    --slate-700: 204 207 222;
    --slate-800: 228 229 236;
    --slate-900: 244 242 236;
    --blue-50: 27 35 66;
    --blue-100: 33 44 82;
    --blue-200: 45 60 108;
    --blue-300: 60 82 145;
    --blue-400: 85 115 190;
    --blue-500: 95 136 216;
    --blue-600: 130 160 225;
    --blue-700: 165 187 235;
    --blue-800: 200 213 243;
    --blue-900: 226 233 249;
    --ouro-50: 44 36 18;
    --ouro-100: 60 48 20;
    --ouro-200: 90 70 26;
    --ouro-300: 140 108 36;
    --ouro-400: 190 150 60;
    --ouro-500: 211 170 74;
    --ouro-600: 222 188 110;
    --ouro-700: 232 204 140;
    --ouro-800: 240 222 176;
    --ouro-900: 248 238 212;
    --green-50: 17 42 34;
    --green-100: 20 58 42;
    --green-200: 30 86 58;
    --green-300: 40 130 80;
    --green-400: 34 170 90;
    --green-500: 34 197 94;
    --green-600: 74 222 128;
    --green-700: 134 239 172;
    --green-800: 187 247 208;
    --green-900: 220 252 231;
    --red-50: 56 24 34;
    --red-100: 76 30 40;
    --red-200: 108 40 48;
    --red-300: 150 50 56;
    --red-400: 220 70 70;
    --red-500: 239 68 68;
    --red-600: 248 113 113;
    --red-700: 252 165 165;
    --red-800: 254 202 202;
    --red-900: 254 226 226;
    --amber-50: 52 40 20;
    --amber-100: 72 53 20;
    --amber-200: 108 78 24;
    --amber-300: 160 110 15;
    --amber-400: 230 150 10;
    --amber-500: 245 158 11;
    --amber-600: 251 191 36;
    --amber-700: 252 211 77;
    --amber-800: 253 230 138;
    --amber-900: 254 243 199;
    --orange-50: 56 32 22;
    --orange-100: 78 43 22;
    --orange-200: 112 60 26;
    --orange-300: 170 80 25;
    --orange-400: 240 110 30;
    --orange-500: 249 115 22;
    --orange-600: 251 146 60;
    --orange-700: 253 186 116;
    --orange-800: 254 215 170;
    --orange-900: 255 237 213;
    --surface: 23 28 50;
    --page: 13 16 30;
    --line: 38 45 74;
    --ink: 240 237 230;
    --lateral: #10142a;
    --lateral-borda: #262d4a;
    --viz-receita: #5f88d8;
    --viz-despesa: #b0852a;
    --viz-ink: #f0ede6;
    --viz-grid: #262d4a;
    --viz-axis: #9197b2;
    --viz-pl: #5f88d8;
    --viz-pl-fill: rgba(95,136,216,0.16);
    --status-ok: #0ca30c;
    --status-atencao: #fab219;
    --status-critico: #e05252;
    --primario: #D3AA4A;
    --primario-hover: #e0bb62;
    --primario-texto: #171C32;
    color-scheme: dark;
}

/* ============================================================
   Componentes
   ============================================================ */
body { font-family: 'Inter', system-ui, -apple-system, sans-serif; background: rgb(var(--page)); color: rgb(var(--ink)); }
.text-3xl, .text-2xl, td.text-right, .num { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }

/* Tipografia da marca: Montserrat no nome, titulos e numeros de destaque */
.marca-nome { font-family: 'Montserrat', sans-serif; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
h1, h2, h3, .panel-titulo { font-family: 'Montserrat', sans-serif; letter-spacing: -0.01em; }
.kpi-valor, .text-3xl.font-bold, .text-2xl.font-bold { font-family: 'Montserrat', sans-serif; }

/* Superficies */
.panel { background: rgb(var(--surface)); border: 1px solid rgb(var(--line)); border-radius: 14px; box-shadow: 0 1px 2px rgb(23 28 50 / 0.04), 0 1px 1px rgb(23 28 50 / 0.02); }
.panel-titulo { font-size: 0.95rem; font-weight: 700; color: rgb(var(--slate-900)); }
.panel-sub { font-size: 0.8rem; color: rgb(var(--slate-500)); }
.kpi-rotulo { font-size: 0.72rem; font-weight: 600; color: rgb(var(--slate-500)); text-transform: uppercase; letter-spacing: 0.06em; }
.kpi-valor { white-space: nowrap; font-size: clamp(1.05rem, 4.6vw, 1.55rem); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; margin-top: 0.4rem; color: rgb(var(--slate-900)); }
.kpi-extra { font-size: 0.75rem; color: rgb(var(--slate-500)); margin-top: 0.45rem; display: flex; align-items: center; gap: 0.35rem; flex-wrap: wrap; min-height: 1.25rem; }
.kpi-destaque { position: relative; overflow: hidden; }
.kpi-destaque::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: rgb(var(--ouro-500)); }
.delta { display: inline-flex; align-items: center; gap: 0.15rem; font-weight: 600; padding: 0.05rem 0.45rem; border-radius: 9999px; font-size: 0.72rem; }
.delta svg { width: 0.8rem; height: 0.8rem; }
.delta-bom { background: rgb(var(--green-50)); color: rgb(var(--green-700)); }
.delta-ruim { background: rgb(var(--red-50)); color: rgb(var(--red-700)); }
.delta-neutro { background: rgb(var(--slate-100)); color: rgb(var(--slate-600)); }

/* Botoes solidos */
.btn-primary, .btn-success, .btn-dark, .btn-danger { transition: background-color .15s, box-shadow .15s; }
.btn-primary { background: var(--primario); color: var(--primario-texto); font-weight: 600; }
.btn-primary:hover { background: var(--primario-hover); }
.btn-success { background: #15803d; color: #fff; } .btn-success:hover { background: #166534; }
.btn-danger  { background: #c53030; color: #fff; } .btn-danger:hover  { background: #a82828; }
.btn-dark    { background: rgb(var(--slate-700)); color: rgb(var(--surface)); } .btn-dark:hover { background: rgb(var(--slate-800)); }
:root[data-theme="dark"] .btn-dark { background: #2a3150; color: #f0ede6; }
:root[data-theme="dark"] .btn-dark:hover { background: #353d60; }
button:disabled { opacity: .55; cursor: not-allowed; }
.btn-icone { display: inline-flex; align-items: center; justify-content: center; width: 1.9rem; height: 1.9rem; border-radius: 8px; color: rgb(var(--slate-400)); vertical-align: middle; }
.btn-icone svg { width: 1rem; height: 1rem; }
.btn-icone:hover { background: rgb(var(--slate-100)); color: rgb(var(--slate-700)); }
.btn-icone.perigo:hover { color: rgb(var(--red-600)); background: rgb(var(--red-50)); }
.link { color: rgb(var(--ouro-700)); font-weight: 600; }
.link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Campos */
input, select, textarea { background-color: rgb(var(--surface)); color: rgb(var(--ink)); }
input::placeholder { color: rgb(var(--slate-400)); }
input[readonly] { background-color: rgb(var(--slate-50)); }
input:focus, select:focus, textarea:focus { outline: none; border-color: rgb(var(--ouro-500)) !important; box-shadow: 0 0 0 3px rgb(var(--ouro-500) / .22) !important; }

/* Barra lateral: sempre marinho (a cor da marca), com o arqueiro dourado */
.sidebar { background: var(--lateral); border-right: 1px solid var(--lateral-borda); color: #e8e4da; }
.sidebar .marca-nome { color: #f4efe3; font-size: 0.95rem; }
.sidebar .marca-sub { color: rgb(244 239 227 / .5); font-size: 0.7rem; letter-spacing: .02em; }
.sidebar-divisor { border-color: rgb(255 255 255 / .08) !important; }
.nav-grupo { font-size: 0.66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: rgb(244 239 227 / .38); padding: 1.15rem 0.75rem 0.35rem; }
.nav-item { position: relative; display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.55rem 0.75rem; border-radius: 9px; font-size: 0.875rem; color: rgb(244 239 227 / .72); text-align: left; transition: background-color .12s, color .12s; }
.nav-item:hover { background: rgb(255 255 255 / .06); color: #fff; }
.nav-item.ativo { background: rgb(211 170 74 / .14); color: #e9c979; font-weight: 600; }
.nav-item.ativo::before { content: ''; position: absolute; left: -0.75rem; top: 0.45rem; bottom: 0.45rem; width: 3px; border-radius: 0 3px 3px 0; background: #D3AA4A; }
.nav-item svg { width: 1.05rem; height: 1.05rem; flex-shrink: 0; }
.nav-badge { margin-left: auto; font-size: 0.68rem; font-weight: 700; padding: 0.05rem 0.45rem; border-radius: 9999px; background: #D3AA4A; color: #171C32; }
.sidebar .btn-icone { color: rgb(244 239 227 / .55); }
.sidebar .btn-icone:hover { background: rgb(255 255 255 / .08); color: #fff; }
.sidebar .avatar-conta { background: rgb(211 170 74 / .18); color: #e9c979; }
.marca-simbolo { width: 2.1rem; height: auto; flex-shrink: 0; }
@media (max-width: 1023px) {
  .sidebar { position: fixed; inset: 0 auto 0 0; width: 16rem; z-index: 40; transform: translateX(-100%); transition: transform .2s ease; }
  .sidebar.aberta { transform: none; box-shadow: 0 10px 40px rgb(0 0 0 / .35); }
}
.sidebar-fundo { background: rgb(13 16 30 / .5); }

/* Login: painel da marca (computador) + formulario */
.login-marca { background: radial-gradient(120% 90% at 20% 10%, #232a4a 0%, #171C32 45%, #10142a 100%); color: #f4efe3; }
.login-marca .marca-nome { color: #f4efe3; }
.login-metalico { width: min(78%, 420px); filter: drop-shadow(0 18px 40px rgb(0 0 0 / .35)); }

/* Tabelas */
table thead tr { border-color: rgb(var(--line)) !important; border-bottom-width: 1px !important; }
table thead th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: .05em; font-weight: 600 !important; color: rgb(var(--slate-500)) !important; }
tbody tr { border-color: rgb(var(--line)) !important; }

/* Estado vazio com o arqueiro em contorno */
.vazio { display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 1.75rem 1rem; text-align: center; color: rgb(var(--slate-500)); font-size: .875rem; }
.vazio img { width: 5.5rem; opacity: .45; }
:root[data-theme="dark"] .vazio img { opacity: .35; }

/* Lista compacta de transacoes (visao geral) */
.linha-trans { display: flex; align-items: center; gap: .75rem; padding: .6rem 0; border-bottom: 1px solid rgb(var(--line)); }
.linha-trans:last-child { border-bottom: 0; }
.avatar-conta { width: 2.1rem; height: 2.1rem; border-radius: 9999px; background: rgb(var(--slate-100)); color: rgb(var(--slate-700)); font-size: .62rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; letter-spacing: .02em; }

/* Barras de progresso (orcamento) */
.barra { height: 6px; border-radius: 9999px; background: rgb(var(--slate-100)); overflow: hidden; }
.barra > div { height: 100%; border-radius: 9999px; }
.cor-ok { background: var(--status-ok); }
.cor-atencao { background: var(--status-atencao); }
.cor-estourado { background: var(--status-critico); }

.modal-bg { background: rgb(13 16 30 / .55); }
.spinner { border: 3px solid rgb(var(--slate-200)); border-top: 3px solid rgb(var(--ouro-500)); border-radius: 50%; width: 36px; height: 36px; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.badge-ativo { background: rgb(var(--green-100)); color: rgb(var(--green-800)); }
.badge-inativo { background: rgb(var(--red-100)); color: rgb(var(--red-800)); }
.chip-periodo { padding: 0.375rem 0.75rem; font-size: 0.8rem; border-radius: 9999px; border: 1px solid rgb(var(--slate-300)); color: rgb(var(--slate-600)); background: rgb(var(--surface)); }
.chip-periodo:hover { background: rgb(var(--slate-100)); }
.chip-periodo.ativo { background: var(--primario); color: var(--primario-texto); border-color: var(--primario); }
.tabela-dados { font-size: .8rem; }
.tabela-dados td, .tabela-dados th { padding: .35rem .5rem; }

/* Controle segmentado (Grupos | Categorias, Categoria | Grupo) */
.seg { display: inline-flex; padding: 3px; gap: 2px; border-radius: 10px; background: rgb(var(--slate-100)); }
.seg-item { padding: .3rem .7rem; font-size: .78rem; font-weight: 600; border-radius: 8px; color: rgb(var(--slate-600)); white-space: nowrap; }
.seg-item:hover { color: rgb(var(--slate-900)); }
.seg-item.ativo { background: rgb(var(--surface)); color: rgb(var(--slate-900)); box-shadow: 0 1px 2px rgb(23 28 50 / .12); }

/* Chips de grupo (tela Categorias) */
.chip-grupo { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .7rem; font-size: .8rem; border-radius: 9999px; border: 1px solid rgb(var(--slate-200)); color: rgb(var(--slate-700)); background: rgb(var(--surface)); }
.chip-grupo:hover { border-color: rgb(var(--slate-300)); background: rgb(var(--slate-50)); }
.chip-grupo .qtd { font-size: .7rem; color: rgb(var(--slate-400)); font-variant-numeric: tabular-nums; }
.chip-grupo.ativo { background: var(--primario); border-color: var(--primario); color: var(--primario-texto); }
.chip-grupo.ativo .qtd { color: inherit; opacity: .7; }
.campo-grupo { width: 100%; min-width: 9rem; max-width: 14rem; padding: .3rem .5rem; font-size: .8rem; border: 1px solid transparent; border-radius: 7px; background: transparent; }
.campo-grupo:hover { border-color: rgb(var(--slate-200)); }
.campo-grupo:focus { background: rgb(var(--surface)); }
.selo-grupo { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: .05rem .4rem; border-radius: 5px; background: rgb(var(--ouro-100)); color: rgb(var(--ouro-800)); vertical-align: middle; }

/* Sugestoes de regras (H.1) */
.sug-linha { display: flex; align-items: center; gap: .75rem; padding: .65rem 0; }
.sug-linha input[type="checkbox"] { width: 1rem; height: 1rem; accent-color: rgb(var(--ouro-600)); flex-shrink: 0; }
.sug-padrao { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; padding: .3rem .5rem; border: 1px solid rgb(var(--slate-200)); border-radius: 7px; min-width: 0; width: 100%; max-width: 20rem; }
.sug-cat { font-size: .72rem; font-weight: 700; padding: .15rem .5rem; border-radius: 6px; background: rgb(var(--blue-50)); color: rgb(var(--blue-700)); white-space: nowrap; }
.sug-linha.desmarcada { opacity: .5; }

/* Projecoes (H.2) */
.conta-linha { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; padding: .3rem 0; }
.conta-linha .rot { color: rgb(var(--slate-600)); }
.conta-linha .val { font-variant-numeric: tabular-nums; font-weight: 600; color: rgb(var(--slate-800)); white-space: nowrap; }
.conta-total { border-top: 1px solid rgb(var(--line)); margin-top: .35rem; padding-top: .55rem; font-weight: 700; }
.alerta-linha { display: flex; gap: .6rem; align-items: flex-start; font-size: .85rem; padding: .45rem 0; }
.alerta-linha svg { width: 1rem; height: 1rem; flex-shrink: 0; margin-top: .1rem; }