:root{
  --tinta:#111417;
  --tinta-2:#3d454d;
  --tinta-3:#7b858f;
  --fundo:#f3f3f0;
  --superficie:#ffffff;
  --borda:#e2e2dc;
  --verde:#1f6f52;
  --verde-claro:#e7f2ed;
  --ouro:#a97923;
  --ouro-claro:#faf1e0;
  --vermelho:#a8382f;
  --vermelho-claro:#fbebe9;
  --azul:#2b4d76;
  --azul-claro:#eaf0f7;
  --raio:10px;
  --sombra:0 1px 2px rgba(17,20,23,.05), 0 8px 24px rgba(17,20,23,.05);
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  background:var(--fundo);
  color:var(--tinta);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
h1,h2,h3,h4{font-family:'Inter Tight',system-ui,sans-serif;margin:0;letter-spacing:-.015em}

/* ---------- estrutura ---------- */
.app{display:flex;min-height:100vh}
.nav{
  width:236px;flex:0 0 236px;background:#12161a;color:#cfd6dd;
  display:flex;flex-direction:column;padding:20px 14px;position:sticky;top:0;height:100vh;
}
.nav__marca{display:flex;gap:11px;align-items:center;padding:4px 8px 22px}
.nav__sigla{
  width:34px;height:34px;border-radius:9px;background:var(--verde);color:#fff;
  font-family:'Inter Tight';font-weight:700;font-size:14px;
  display:grid;place-items:center;letter-spacing:.02em;
}
.nav__marca strong{display:block;color:#fff;font-family:'Inter Tight';font-size:15px;line-height:1.15}
.nav__marca span{font-size:11.5px;color:#7d8892;letter-spacing:.04em}
.nav__grupo{display:flex;flex-direction:column;gap:2px;margin-bottom:18px}
.nav__rotulo{
  font-size:10px;text-transform:uppercase;letter-spacing:.12em;
  color:#5d666f;padding:0 10px 7px;font-weight:600;
}
.nav__link{
  display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;
  text-decoration:none;font-size:13.5px;color:#b6bfc8;transition:background .15s,color .15s;
}
.nav__link:hover{background:#1c2228;color:#fff}
.nav__link--on{background:#1f272e;color:#fff;box-shadow:inset 2px 0 0 var(--verde)}
.nav__ico{display:inline-flex;width:17px;height:17px}
.nav__ico svg{width:17px;height:17px}
.nav__rodape{margin-top:auto;border-top:1px solid #232a31;padding-top:14px}
.nav__user span{display:block;font-size:13px;color:#e6ebf0;font-weight:500}
.nav__user small{display:block;font-size:11px;color:#69737d;overflow:hidden;text-overflow:ellipsis}
.nav__sair{display:inline-block;margin-top:9px;font-size:12px;color:#8e99a3;text-decoration:none}
.nav__sair:hover{color:#fff}

.conteudo{flex:1;padding:26px 30px 60px;max-width:1400px;min-width:0}
.cabecalho{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:22px;flex-wrap:wrap}
.cabecalho h1{font-size:23px;font-weight:600}
.cabecalho__sub{margin:4px 0 0;color:var(--tinta-3);font-size:13px}
.cabecalho__acoes{display:flex;gap:9px;flex-wrap:wrap}
.menu-toggle{display:none}

/* ---------- superfícies ---------- */
.cartao{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--raio);box-shadow:var(--sombra);margin-bottom:18px}
.cartao__topo{padding:15px 18px;border-bottom:1px solid var(--borda);display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.cartao__topo h2{font-size:15px;font-weight:600}
.cartao__topo p{margin:3px 0 0;font-size:12.5px;color:var(--tinta-3)}
.cartao__corpo{padding:18px}
.cartao__corpo--limpo{padding:0}

.grade{display:grid;gap:16px}
.grade--4{grid-template-columns:repeat(4,1fr)}
.grade--3{grid-template-columns:repeat(3,1fr)}
.grade--2{grid-template-columns:repeat(2,1fr)}

/* ---------- indicadores ---------- */
.indicador{background:var(--superficie);border:1px solid var(--borda);border-radius:var(--raio);padding:16px 17px;box-shadow:var(--sombra)}
.indicador__rotulo{font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:var(--tinta-3);font-weight:600}
.indicador__valor{font-family:var(--mono);font-size:24px;font-weight:500;margin-top:9px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.indicador__nota{font-size:12px;color:var(--tinta-3);margin-top:5px}
.v-verde{color:var(--verde)}
.v-vermelho{color:var(--vermelho)}
.v-ouro{color:var(--ouro)}

/* barra de rateio — elemento de assinatura do fechamento */
.rateio{border:1px solid var(--borda);border-radius:var(--raio);background:var(--superficie);padding:18px;box-shadow:var(--sombra);margin-bottom:18px}
.rateio__titulo{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--tinta-3);font-weight:600;margin-bottom:12px}
.rateio__barra{display:flex;height:38px;border-radius:7px;overflow:hidden;border:1px solid var(--borda)}
.rateio__lado{display:flex;align-items:center;padding:0 12px;font-family:var(--mono);font-size:13px;font-weight:500;color:#fff;white-space:nowrap;overflow:hidden}
.rateio__lado--eu{background:#1f272e}
.rateio__lado--parceiro{background:var(--verde)}
.rateio__legenda{display:flex;justify-content:space-between;margin-top:9px;font-size:12px;color:var(--tinta-2)}

/* ---------- tabelas ---------- */
.tabela-wrap{overflow-x:auto}
table.tabela{width:100%;border-collapse:collapse;font-size:13px}
table.tabela th{
  text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--tinta-3);font-weight:600;padding:11px 12px;border-bottom:1px solid var(--borda);
  background:#fafaf8;white-space:nowrap;
}
table.tabela td{padding:11px 12px;border-bottom:1px solid #f0f0eb;vertical-align:middle}
table.tabela tr:last-child td{border-bottom:none}
table.tabela tbody tr:hover{background:#fbfbf9}
.num{font-family:var(--mono);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
th.num{text-align:right}
.tabela tfoot td{font-weight:600;background:#fafaf8;border-top:1px solid var(--borda)}

/* ---------- formulários ---------- */
.campo{margin-bottom:14px}
.campo label{display:block;font-size:12.5px;font-weight:500;color:var(--tinta-2);margin-bottom:5px}
.campo small{display:block;font-size:11.5px;color:var(--tinta-3);margin-top:5px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=number],select,textarea{
  width:100%;padding:9px 11px;border:1px solid #d5d5cf;border-radius:8px;background:#fff;
  font-family:inherit;font-size:13.5px;color:var(--tinta);transition:border-color .15s,box-shadow .15s;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--verde);box-shadow:0 0 0 3px rgba(31,111,82,.13)}
textarea{min-height:82px;resize:vertical}
.linha{display:grid;gap:14px}
.linha--2{grid-template-columns:1fr 1fr}
.linha--3{grid-template-columns:repeat(3,1fr)}
.linha--4{grid-template-columns:repeat(4,1fr)}
.check{display:flex;align-items:center;gap:9px;font-size:13.5px}
.check input{width:16px;height:16px;accent-color:var(--verde)}

.botao{
  display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:8px;
  border:1px solid transparent;font-family:inherit;font-size:13.5px;font-weight:500;
  cursor:pointer;text-decoration:none;transition:filter .15s,background .15s;
}
.botao--primario{background:var(--verde);color:#fff}
.botao--primario:hover{filter:brightness(1.08)}
.botao--neutro{background:#fff;border-color:#d5d5cf;color:var(--tinta)}
.botao--neutro:hover{background:#f7f7f4}
.botao--escuro{background:#12161a;color:#fff}
.botao--perigo{background:#fff;border-color:#e3c2be;color:var(--vermelho)}
.botao--perigo:hover{background:var(--vermelho-claro)}
.botao--peq{padding:6px 11px;font-size:12.5px}
.botao:disabled{opacity:.5;cursor:not-allowed}

/* ---------- avisos ---------- */
.alerta{padding:11px 14px;border-radius:8px;font-size:13px;margin-bottom:16px;border:1px solid}
.alerta--ok{background:var(--verde-claro);border-color:#c3ded3;color:#16543e}
.alerta--erro{background:var(--vermelho-claro);border-color:#eecac6;color:#8c2c25}
.alerta--aviso{background:var(--ouro-claro);border-color:#ecd9b4;color:#795717}
.alerta--info{background:var(--azul-claro);border-color:#cdd9e8;color:#24405f}

.badge{display:inline-block;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.02em}
.badge--ok{background:var(--verde-claro);color:#16543e}
.badge--warn{background:var(--ouro-claro);color:#795717}
.badge--info{background:var(--azul-claro);color:#24405f}
.badge--off{background:#eeeeea;color:#6d757d}

.vazio{padding:44px 20px;text-align:center;color:var(--tinta-3)}
.vazio strong{display:block;font-family:'Inter Tight';font-size:15px;color:var(--tinta-2);margin-bottom:5px}

.lista-campanhas{max-height:330px;overflow-y:auto;border:1px solid var(--borda);border-radius:8px}
.lista-campanhas label{
  display:flex;gap:10px;align-items:center;padding:9px 12px;border-bottom:1px solid #f0f0eb;
  font-size:13px;cursor:pointer;
}
.lista-campanhas label:hover{background:#fafaf8}
.lista-campanhas label:last-child{border-bottom:none}
.lista-campanhas input{accent-color:var(--verde);width:15px;height:15px}
.lista-campanhas .cmp-status{margin-left:auto;font-size:10.5px;color:var(--tinta-3);text-transform:uppercase;letter-spacing:.05em}

.divisor{height:1px;background:var(--borda);margin:20px 0}
.secao-titulo{font-family:'Inter Tight';font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta-3);margin:0 0 12px}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* gráfico de barras em CSS puro */
.barras{display:flex;align-items:flex-end;gap:10px;height:170px;padding-top:10px}
.barras__col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:3px;height:100%;min-width:0}
.barras__par{display:flex;gap:3px;align-items:flex-end;height:100%}
.barras__b{flex:1;border-radius:4px 4px 0 0;min-height:2px}
.barras__b--inv{background:#c9cdd2}
.barras__b--luc{background:var(--verde)}
.barras__rot{font-size:10.5px;color:var(--tinta-3);text-align:center;white-space:nowrap}
.legenda{display:flex;gap:16px;font-size:12px;color:var(--tinta-2);margin-top:12px}
.legenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px}

@media (max-width:1100px){
  .grade--4{grid-template-columns:repeat(2,1fr)}
  .linha--4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .menu-toggle{
    display:block;position:fixed;top:12px;left:12px;z-index:60;width:38px;height:38px;
    border-radius:9px;border:1px solid var(--borda);background:#fff;font-size:18px;cursor:pointer;
  }
  .nav{position:fixed;left:-240px;z-index:50;transition:left .2s}
  body.nav-aberto .nav{left:0}
  .conteudo{padding:60px 16px 50px}
  .grade--4,.grade--3,.grade--2,.linha--2,.linha--3,.linha--4{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- valor bruto como referência, à direita do líquido ---------- */
.ref{
  font-family:var(--mono);font-size:11.5px;color:var(--tinta-3);
  font-weight:400;white-space:nowrap;font-variant-numeric:tabular-nums;
}
.indicador__valor .ref{font-size:12px;margin-left:8px;letter-spacing:0}
td.num .ref{display:block;margin-top:2px}
.par-valor{display:flex;align-items:baseline;gap:8px;justify-content:flex-end}
.linha-ref td{color:var(--tinta-3)}

/* ---------- blocos de ajuda expansíveis ---------- */
.ajuda{border:1px solid var(--borda);border-radius:8px;background:#fafaf8;margin-top:6px}
.ajuda summary{
  cursor:pointer;padding:11px 14px;font-size:13px;font-weight:500;color:var(--azul);
  list-style:none;display:flex;align-items:center;gap:8px;
}
.ajuda summary::-webkit-details-marker{display:none}
.ajuda summary::before{content:"?";
  width:17px;height:17px;flex:0 0 17px;border-radius:50%;background:var(--azul);color:#fff;
  font-size:11px;font-weight:700;display:grid;place-items:center;
}
.ajuda[open] summary{border-bottom:1px solid var(--borda)}
.ajuda__corpo{padding:14px 16px;font-size:13px;color:var(--tinta-2);line-height:1.6}
.ajuda__corpo p{margin:0 0 10px}
.ajuda__passos{margin:0 0 12px;padding-left:20px}
.ajuda__passos li{margin-bottom:8px}
.ajuda__nota{
  border-left:2px solid var(--ouro);padding:2px 0 2px 11px;
  color:var(--tinta-2);font-size:12.5px;
}