/* Finanças · livro-caixa escuro com ouro */
:root{
  --fundo:#0f1113; --fundo-2:#14171b; --superficie:#191d22; --superficie-2:#1f242a; --linha:#2a3038; --linha-forte:#3a424c;
  --tinta:#ece6d8; --tinta-2:#c9c2b3; --mudo:#8a9099; --ouro:#d9a441; --ouro-2:#f1c56a; --verde:#4f9d8d; --vermelho:#c86b4a; --azul:#7a8fd6;
  --raio:14px; --raio-p:8px; --sombra:0 10px 30px -12px rgba(0,0,0,.6);
  --f-display:"Fraunces",Georgia,serif; --f-corpo:"Instrument Sans",system-ui,sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box} html{-webkit-text-size-adjust:100%}
body{margin:0;background:radial-gradient(1200px 600px at 80% -10%,#1b2026 0%,var(--fundo) 60%);color:var(--tinta);font-family:var(--f-corpo);font-size:15px;line-height:1.45;min-height:100vh;display:flex}
.grao{position:fixed;inset:0;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");z-index:0;mix-blend-mode:overlay}
a{color:inherit;text-decoration:none} a:hover{color:var(--ouro-2)}
h1,h2,h3{font-family:var(--f-display);font-weight:600;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(26px,3vw,38px);line-height:1.05} h2{font-size:18px} h3{font-size:16px;margin-bottom:12px}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums} .mudo{color:var(--mudo)} .ouro{color:var(--ouro)} .forte{font-weight:600;color:var(--tinta)}
.rotulo{margin:0 0 2px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mudo)}
.titulo-mes{font-variant:small-caps}
.pequeno-txt{font-size:12px} .sem-margem{margin:0} .oculto{display:none!important} .inline{display:inline-flex;align-items:center;gap:6px}

/* layout */
.lateral{position:sticky;top:0;height:100vh;width:230px;flex:0 0 230px;padding:22px 16px;display:flex;flex-direction:column;gap:22px;border-right:1px solid var(--linha);background:linear-gradient(180deg,var(--fundo-2),var(--fundo));z-index:2}
.marca{display:flex;align-items:center;gap:10px;line-height:1.1} .marca strong{font-family:var(--f-display);font-size:18px;display:block} .marca small{color:var(--mudo);font-size:11px;letter-spacing:.06em}
.marca-f{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--ouro),#9a6b1a);display:grid;place-items:center;font-family:var(--f-display);font-weight:700;color:#14161a;font-size:20px;box-shadow:0 4px 14px -4px rgba(217,164,65,.6)}
.marca.grande .marca-f{width:44px;height:44px;font-size:26px}
.lateral nav{display:flex;flex-direction:column;gap:3px} .lateral nav a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--raio-p);color:var(--tinta-2);font-weight:500;transition:background .15s,color .15s}
.lateral nav a i{font-style:normal;width:18px;text-align:center;color:var(--mudo)} .lateral nav a:hover{background:var(--superficie)} .lateral nav a.ativo{background:var(--superficie-2);color:var(--tinta);box-shadow:inset 3px 0 0 var(--ouro)} .lateral nav a.ativo i{color:var(--ouro)}
.rodape-lateral{margin-top:auto;display:flex;justify-content:space-between;align-items:center;color:var(--mudo);font-size:13px;padding:0 4px}
.link{background:none;border:0;color:var(--mudo);cursor:pointer;font:inherit;text-decoration:underline dotted} .link:hover{color:var(--ouro)}
.conteudo{flex:1;min-width:0;position:relative;z-index:1}
.pagina{padding:28px clamp(16px,3vw,40px) 60px;max-width:1500px;margin:0 auto}
.topo{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.topo-acoes{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* mês nav */
.mesnav{display:inline-flex;align-items:center;background:var(--superficie);border:1px solid var(--linha);border-radius:999px;padding:3px}
.mesnav .seta{width:32px;height:32px;display:grid;place-items:center;border-radius:50%;font-size:20px;color:var(--tinta-2)} .mesnav .seta:hover{background:var(--superficie-2);color:var(--ouro)}
.sel-mes{background:transparent;border:0;color:var(--tinta);font:inherit;font-weight:600;padding:4px 6px;cursor:pointer;outline:none;font-family:var(--f-display);font-size:15px}
.sel-mes option{background:var(--superficie);color:var(--tinta)}

/* kpis */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:18px}
.kpi{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);padding:18px 20px;display:flex;flex-direction:column;gap:6px;position:relative;overflow:hidden}
.kpi.destaque{background:linear-gradient(135deg,#232a1f 0%,var(--superficie) 60%);border-color:#3b4230}
.kpi.destaque::after{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,rgba(217,164,65,.25),transparent 70%)}
.kpi.alerta{border-color:#5a3a2c} .kpi.alerta .kpi-valor{color:var(--vermelho)}
.kpi-rotulo{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mudo)}
.kpi-valor{font-family:var(--f-mono);font-size:clamp(22px,2.2vw,30px);font-weight:600;letter-spacing:-.02em}
.kpi-sub{font-size:13px;color:var(--mudo)} .kpi-sub a{color:var(--ouro);text-decoration:underline dotted}

/* cards */
.cartao-ui{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio);padding:18px 20px;margin-bottom:16px;box-shadow:var(--sombra)}
.cartao-ui.sem-pad{padding:0;overflow:hidden}
.cartao-cab{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:14px;gap:10px}
.grade-2{display:grid;grid-template-columns:1.4fr 1fr;gap:16px} .grade-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.grade-cobranca{display:grid;grid-template-columns:1fr 320px;gap:16px;align-items:start}
.coluna-lateral .cartao-ui{margin-bottom:12px}

/* listas */
.ponto{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--c,var(--mudo));margin-right:8px;vertical-align:middle;box-shadow:0 0 0 2px rgba(255,255,255,.04)}
.lista-resp{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.lista-resp li{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:center}
.lista-resp li a{font-weight:500} .lista-resp .barra{grid-column:1/-1} .lista-resp small{grid-column:1/-1;font-size:11px}
.lista-resp.compacta{gap:9px}
.barra{height:5px;background:var(--fundo);border-radius:4px;overflow:hidden} .barra span{display:block;height:100%;background:var(--c,var(--ouro));border-radius:4px;transition:width .6s cubic-bezier(.2,.7,.2,1)}
.lista-maiores{margin:0;padding:0 0 0 20px;display:flex;flex-direction:column;gap:8px} .lista-maiores li{display:grid;grid-template-columns:1fr auto;gap:0 12px;align-items:baseline;font-size:14px} .lista-maiores .desc{grid-row:1} .lista-maiores .mudo{grid-row:2;font-size:12px} .lista-maiores .mono{grid-row:1/3;align-self:center}
.lista-futuras,.lista-acertos{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px;font-size:14px} .lista-futuras li,.lista-acertos li{display:flex;justify-content:space-between;gap:10px;align-items:center}
.rodape-nota{margin-top:6px;font-size:13px}
.badge{display:inline-block;font-style:normal;font-family:var(--f-mono);font-size:11px;padding:1px 6px;border-radius:5px;background:var(--superficie-2);border:1px solid var(--linha-forte);color:var(--tinta-2);margin-left:6px}
.badge.suave{opacity:.6}

/* tabelas */
.rolagem{overflow:auto;max-width:100%}
.tabela{width:100%;border-collapse:separate;border-spacing:0;font-size:14px}
.tabela th{text-align:left;font-weight:500;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--mudo);padding:10px 12px;border-bottom:1px solid var(--linha);white-space:nowrap;position:sticky;top:0;background:var(--superficie);z-index:1}
.tabela td{padding:8px 12px;border-bottom:1px solid var(--linha);vertical-align:middle}
.tabela tbody tr:hover td{background:rgba(255,255,255,.02)}
.tabela .num{text-align:right;font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.tabela tfoot td{font-weight:600;border-top:1px solid var(--linha-forte);background:var(--superficie-2)}
.tabela .vazio{text-align:center;color:var(--mudo);padding:40px} .tabela .vazio a{color:var(--ouro)}
.matriz th,.matriz td{padding:7px 9px;font-size:13px} .matriz .fixa{position:sticky;left:0;background:var(--superficie);z-index:2;font-weight:500;min-width:120px}
.matriz tfoot .fixa{background:var(--superficie-2)} .matriz .col-atual{background:rgba(217,164,65,.08)} .matriz th.futuro,.matriz th.futuro a{color:#6b7380} .matriz .zero{color:#3f4751}
.matriz td.num a:hover{color:var(--ouro)} .ord-ativa{color:var(--ouro)}
.tabela.fatura .desc{min-width:260px;max-width:460px} .tabela.fatura tr.sem-resp td{background:rgba(200,107,74,.06)}
.tabela.fatura .acoes{width:36px;text-align:right}
.edit{outline:none;border-bottom:1px dashed transparent;padding:1px 2px;border-radius:3px} .edit:hover{border-bottom-color:var(--linha-forte)} .edit:focus{background:var(--fundo);border-bottom-color:var(--ouro)}
.salvo{animation:pisca .8s} @keyframes pisca{0%{background:rgba(79,157,141,.35)}100%{background:transparent}}
.falhou{animation:piscaErr .8s} @keyframes piscaErr{0%{background:rgba(200,107,74,.4)}100%{background:transparent}}
.barra-tabela{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--linha);flex-wrap:wrap}
.cartao-ui.sem-pad .barra-tabela:last-child{border-bottom:0;border-top:1px solid var(--linha)}
.busca input{min-width:240px}
.grande-num{font-size:20px}
.tabela.preview tr.ignorada{opacity:.45} .tabela.preview tr.dup td{background:rgba(217,164,65,.07)}
.sel-resp.sugerido{border-color:rgba(79,157,141,.6)}
.tabela.imprimivel td{padding:7px 12px}

/* chips */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px;align-items:center}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:var(--superficie);border:1px solid var(--linha);font-size:13px;color:var(--tinta-2);transition:border-color .15s,background .15s}
.chip .ponto{margin-right:0} .chip b{font-weight:500;color:var(--tinta)} .chip:hover{border-color:var(--linha-forte);color:var(--tinta)} .chip.ativo{background:var(--superficie-2);border-color:var(--c,var(--ouro));color:var(--tinta)}
.chip.alerta{border-color:#5a3a2c;color:var(--vermelho)} .sep{width:1px;height:20px;background:var(--linha);margin:0 6px}

/* forms */
input,select,textarea,button{font:inherit;color:inherit}
input:not([type=checkbox]):not([type=color]),select,textarea{background:var(--fundo);border:1px solid var(--linha);border-radius:var(--raio-p);padding:8px 10px;color:var(--tinta);outline:none;transition:border-color .15s;min-width:0;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--ouro)} textarea{resize:vertical;font-family:var(--f-mono);font-size:13px;line-height:1.5}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--mudo) 50%),linear-gradient(135deg,var(--mudo) 50%,transparent 50%);background-position:calc(100% - 14px) 50%,calc(100% - 9px) 50%;background-size:5px 5px;background-repeat:no-repeat;padding-right:26px;cursor:pointer}
select option{background:var(--superficie)}
.sel-mini,.sel-resp{padding:5px 24px 5px 8px;font-size:13px;width:auto;max-width:190px} .sel-resp{border-left:3px solid var(--c,var(--linha));font-weight:500}
input.mini{width:110px;padding:5px 8px;font-size:13px} input.micro{width:46px;padding:5px 6px;font-size:13px;text-align:center} input.larga{min-width:220px;padding:5px 8px;font-size:13px}
.dupla{display:flex;gap:6px;align-items:center}
input[type=color]{width:28px;height:28px;padding:0;border:1px solid var(--linha);border-radius:6px;background:none;cursor:pointer}
label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--mudo)} label.bloco{margin-top:12px} label.check{flex-direction:row;align-items:center;gap:8px}
.form-col{display:flex;flex-direction:column;gap:10px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px} .form-grid .larga{grid-column:span 2}
.form-linha{margin-bottom:14px} .acoes-form{display:flex;gap:10px;align-items:center;margin-top:12px;flex-wrap:wrap;font-size:13px}
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;border:1px solid var(--linha-forte);background:var(--superficie-2);color:var(--tinta);cursor:pointer;font-weight:500;transition:transform .1s,background .15s,border-color .15s;white-space:nowrap}
.btn:hover{border-color:var(--ouro);transform:translateY(-1px)} .btn.primario{background:linear-gradient(135deg,var(--ouro),#b8832a);color:#15120a;border-color:transparent;font-weight:600} .btn.primario:hover{filter:brightness(1.08)}
.btn.fantasma{background:transparent} .btn.pequeno{padding:6px 12px;font-size:13px} .btn.grande-btn{padding:12px;justify-content:center;font-size:16px}
.icone{background:none;border:0;color:var(--mudo);cursor:pointer;width:28px;height:28px;border-radius:6px;font-size:16px;line-height:1} .icone:hover{background:var(--superficie-2);color:var(--vermelho)} .icone.confirmar{background:var(--vermelho);color:#fff;font-size:11px;width:auto;padding:0 8px}
.flash{padding:12px 16px;border-radius:var(--raio-p);background:#1f2a24;border:1px solid #2f4a3c;color:#bfe3d3;margin:16px clamp(16px,3vw,40px) -8px;animation:aparece .4s}
.flash.erro{background:#2a1f1b;border-color:#5a3a2c;color:#f0c7b5}
.flash.flutuante{position:fixed;right:20px;bottom:20px;margin:0;z-index:50;box-shadow:var(--sombra)}

/* config */
.lista-config{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-direction:column;gap:6px} .lista-config li.inativo{opacity:.45}
.linha-config{display:flex;gap:6px;align-items:center} .linha-config .nome{flex:1;padding:6px 8px;font-size:13px} .linha-config .usos{font-size:11px;min-width:30px;text-align:right} .linha-config.nova{margin-top:10px;padding-top:10px;border-top:1px dashed var(--linha)}
.acerto-status{display:grid;grid-template-columns:1fr auto;gap:4px 10px;font-size:14px;margin-bottom:12px} .acerto-status .barra{grid-column:1/-1;margin-top:6px} .acerto-status.quitado b.ouro{color:var(--verde)}
code{font-family:var(--f-mono);font-size:12px;background:var(--fundo);padding:1px 5px;border-radius:4px}

/* login */
.login{min-height:100vh;display:grid;grid-template-columns:minmax(320px,460px) 1fr;width:100%}
.login-card{padding:clamp(28px,6vh,64px) clamp(24px,5vw,56px);display:flex;flex-direction:column;gap:14px;justify-content:center;background:var(--fundo-2);border-right:1px solid var(--linha)}
.login-card h1{margin-top:20px;font-size:34px} .login-card form{margin-top:14px}
.login-arte{position:relative;overflow:hidden;background:radial-gradient(900px 500px at 30% 70%,#22281f,transparent 70%),var(--fundo)}
.login-arte .num{position:absolute;right:-2vw;bottom:-6vh;font-family:var(--f-display);font-size:clamp(200px,34vw,520px);font-weight:700;color:transparent;-webkit-text-stroke:1px rgba(217,164,65,.22);letter-spacing:-.06em;line-height:1}
.login-arte .linha-ouro{position:absolute;left:10%;top:18%;width:40%;height:1px;background:linear-gradient(90deg,transparent,var(--ouro),transparent);opacity:.6}

/* animação de entrada */
.anim{animation:sobe .5s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*60ms)}
@keyframes sobe{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} @keyframes aparece{from{opacity:0}to{opacity:1}}

/* responsivo */
@media (max-width:1100px){.kpis{grid-template-columns:repeat(2,1fr)}.grade-2,.grade-3,.grade-cobranca{grid-template-columns:1fr}}
@media (max-width:820px){
  body{flex-direction:column}
  .lateral{position:fixed;bottom:0;left:0;right:0;top:auto;height:auto;width:auto;flex-direction:row;align-items:center;padding:6px 8px;gap:0;border-right:0;border-top:1px solid var(--linha);background:var(--fundo-2)}
  .lateral .marca,.lateral .rodape-lateral{display:none} .lateral nav{flex-direction:row;width:100%;justify-content:space-around} .lateral nav a{flex-direction:column;gap:2px;font-size:10px;padding:6px 4px;border-radius:8px} .lateral nav a.ativo{box-shadow:none;color:var(--ouro)}
  .pagina{padding:18px 16px 90px} .kpis{grid-template-columns:1fr 1fr;gap:10px} .kpi{padding:14px}
  .login{grid-template-columns:1fr} .login-arte{display:none} .login-card{border-right:0;min-height:100vh}
  .form-grid .larga{grid-column:span 1}
}
@media print{.lateral,.topo-acoes,.chips,.coluna-lateral,.flash,.grao{display:none!important}body{background:#fff;color:#000}.cartao-ui{border:0;box-shadow:none}.tabela th,.tabela td{border-color:#ccc;color:#000}.pagina{padding:0}}