/* Identidade Green Charger.

   Duas famílias de cor, e elas não se misturam:

   --marca*   o cromo da interface (fundo, cartão, botão, foco, logo).
   --s1..s3   as séries de dados dos gráficos. Continuam as do guia de
              visualização, validadas para daltonismo — repintar gráfico com
              a cor da marca é o caminho curto para um gráfico ilegível.
   --g-*      exceção deliberada: a evolução mensal usa o lime da marca e uma
              turquesa análoga. Barra é preenchimento, que é o uso que o lime
              aceita, e cada cor tem variante -txt para eixo e legenda.

   O lime da marca é claríssimo: serve como PREENCHIMENTO com texto escuro por
   cima, nunca como texto ou traço sobre fundo claro. Para isso existe
   --marca-legivel, que no tema claro escurece o suficiente para passar em
   contraste e no escuro volta a ser o lime. */
:root {
  color-scheme: light;
  --plano:#f6f8f2;
  --superficie:#ffffff;
  --tinta:#0e1a10;
  --tinta-2:#4b584f;
  --tinta-3:#66746d;
  --grade:#e2e8dc;
  --eixo:#c3ccbc;
  --borda:rgba(14,26,16,.11);

  --marca:#d4f50a;          /* lime da marca — só preenchimento */
  --marca-forte:#c2e000;    /* estado ativo do preenchimento */
  --marca-tinta:#0e1a10;    /* texto sobre o lime */
  --marca-legivel:#5c7c07;  /* traço e texto da marca sobre fundo claro */
  --marca-plano:#0c1510;    /* verde quase preto do site — fundo da marca */

  --s1:#2a78d6;   /* reserva: receita agora usa a cor da marca */
  --s2:#f25f0c;   /* custo — cor definida pela operação */
  --s3:#1baf7a;   /* energia */

  /* Evolução mensal: o par de barras sai da marca. O lime é o valor, e a
     quantidade recebe a turquesa — análoga pelo lado verde, escura onde o
     lime é claro. Elas se separam por luminosidade, então a distinção
     sobrevive ao daltonismo e à impressão em cinza.
     Cada uma tem uma variante *-txt porque o lime não se lê como texto sobre
     fundo claro; no tema escuro as duas voltam a ser a mesma cor. */
  --g-valor:#b2d100;     --g-valor-txt:#5c7c07;
  --g-qtd:#0e9c8c;       --g-qtd-txt:#0b7d70;
  --g-custo:#7a4de0;     --g-custo-txt:#6535cc;   /* complementar do lime */

  --bom:#0ca30c;
  --alerta:#fab219;
  --critico:#d03b3b;
  --sucesso-txt:var(--marca-legivel);  /* positivo usa o verde da marca */

  --r:12px;
  --sombra:0 1px 2px rgba(14,26,16,.05), 0 6px 18px rgba(14,26,16,.07);
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
  --plano:#0c1510; --superficie:#16211a;
    --tinta:#f2f4ee; --tinta-2:#bcc7bc; --tinta-3:#8a968c;
    --grade:#243026; --eixo:#33402f; --borda:rgba(242,244,238,.11);
    --marca:#d4f50a; --marca-forte:#e2ff2e;
    --marca-tinta:#0c1510; --marca-legivel:#d4f50a; --marca-plano:#0c1510;
    --s1:#3987e5; --s2:#f25f0c; --s3:#199e70;
  --g-valor:#d4f50a; --g-valor-txt:#d4f50a;
  --g-qtd:#19cbb4;   --g-qtd-txt:#19cbb4;
  --g-custo:#a98bff; --g-custo-txt:#a98bff;
    --sucesso-txt:var(--marca-legivel);
    --sombra:0 1px 2px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
    --plano:#0c1510; --superficie:#16211a;
  --tinta:#f2f4ee; --tinta-2:#bcc7bc; --tinta-3:#8a968c;
  --grade:#243026; --eixo:#33402f; --borda:rgba(242,244,238,.11);
  --marca:#d4f50a; --marca-forte:#e2ff2e;
  --marca-tinta:#0c1510; --marca-legivel:#d4f50a; --marca-plano:#0c1510;
  --s1:#3987e5; --s2:#f25f0c; --s3:#199e70;
  --g-valor:#d4f50a; --g-valor-txt:#d4f50a;
  --g-qtd:#19cbb4;   --g-qtd-txt:#19cbb4;
  --g-custo:#a98bff; --g-custo-txt:#a98bff;
  --sucesso-txt:var(--marca-legivel);
  --sombra:0 1px 2px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.4);
}

*{box-sizing:border-box}
/* o atributo hidden perde para qualquer display explícito do autor
   (.aviso usa display:flex), então precisa ser reforçado */
[hidden]{display:none !important}
body{
  margin:0;background:var(--plano);color:var(--tinta);
  font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased;
}
.env{max-width:1240px;margin:0 auto;padding:22px 22px 64px}

/* ---------- cabeçalho ---------- */
header{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px}
.marca{display:flex;align-items:center;gap:11px;margin-right:auto}
.logo{width:38px;height:38px;flex:none;display:block;object-fit:contain}
h1{margin:0;font-size:17px;font-weight:650;letter-spacing:-.02em}
.sub{margin:1px 0 0;font-size:12.5px;color:var(--tinta-3)}

select,button.tema,a.tema{
  font:inherit;font-size:13.5px;padding:8px 11px;border-radius:9px;
  border:1px solid var(--borda);background:var(--superficie);color:var(--tinta);cursor:pointer;
}
select:focus-visible,button.tema:focus-visible,a.tema:focus-visible{outline:2px solid var(--marca-legivel);outline-offset:1px}
button.tema,a.tema{width:38px;padding:0;height:37px;display:grid;place-items:center}
button.tema svg,a.tema svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}
/* A engrenagem tem traço mais fino: o desenho é denso e engrossa visualmente. */
a.engrenagem svg{stroke-width:1.5}
a.engrenagem:hover{border-color:var(--marca-legivel);color:var(--marca-legivel)}

.abas{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}
.aba{
  text-align:left;padding:11px 14px;border-radius:11px;cursor:pointer;font:inherit;
  background:var(--superficie);border:1px solid var(--borda);color:var(--tinta-2);
  transition:.15s;display:block;
}
.aba:hover{border-color:var(--tinta-3)}
.aba strong{display:block;font-size:13.5px;font-weight:620;color:var(--tinta-2);letter-spacing:-.01em}
.aba span{display:block;font-size:11.5px;color:var(--tinta-3);margin-top:2px}
.aba[data-on="1"]{border-color:var(--marca-legivel);box-shadow:0 0 0 3px color-mix(in srgb,var(--marca) 22%,transparent)}
.aba[data-on="1"] strong{color:var(--tinta)}
.aba:focus-visible{outline:2px solid var(--marca-legivel);outline-offset:1px}
@media (max-width:720px){ .abas{grid-template-columns:1fr} }

/* --- configurações: menu lateral --- */

.config-corpo{display:grid;grid-template-columns:250px 1fr;gap:16px;margin-top:16px;align-items:start}
/* O menu acompanha a rolagem: as listas de eletroposto e de conta são longas
   e trocar de seção não deveria exigir voltar ao topo. */
.menu-lateral{position:sticky;top:16px;display:flex;flex-direction:column;gap:6px}
.item-menu{
  text-align:left;padding:10px 12px;border-radius:10px;cursor:pointer;font:inherit;
  border:1px solid var(--borda);background:var(--superficie);color:var(--tinta-2);
  display:grid;gap:2px;
}
.item-menu strong{font-size:13.5px;color:var(--tinta);font-weight:600}
.item-menu span{font-size:11.5px;color:var(--tinta-3);line-height:1.35}
.item-menu:hover{border-color:var(--marca-legivel)}
.item-menu:focus-visible{outline:2px solid var(--marca-legivel);outline-offset:1px}
.item-menu[data-on="1"]{border-color:var(--marca-legivel);background:var(--marca-fraca,var(--grade))}
.item-menu[data-on="1"] strong{color:var(--marca-legivel)}
.config-painel{min-width:0}

@media (max-width:860px){
  .config-corpo{grid-template-columns:1fr}
  .menu-lateral{position:static;flex-direction:row;flex-wrap:wrap}
  .item-menu{flex:1 1 160px}
  .item-menu span{display:none}
}

/* --- gráfico de evolução mensal --- */

/* Gráfico à esquerda, leitura mês a mês à direita. A legenda fora do desenho
   dá os números exatos sem poluir a linha com rótulos em cada ponto. */
.g-area{display:grid;grid-template-columns:1fr 226px;gap:22px;align-items:center}
.grafico{margin:0;min-width:0}
.grafico svg{width:100%;height:262px;display:block;overflow:visible}

.g-tabela{display:flex;flex-direction:column}
/* Chave em linha: vertical custaria altura que as seis linhas de mês precisam
   para o painel terminar junto com o gráfico. */
.g-chaves{display:flex;gap:14px;padding-bottom:6px;margin-bottom:2px;border-bottom:1px solid var(--grade)}
.g-chave{
  display:flex;align-items:center;gap:6px;font-size:11px;color:var(--tinta-3);
  font-family:inherit;background:none;border:none;padding:2px 0;
}
.g-chave i{width:11px;height:11px;border-radius:2px;display:block;flex:none}

/* As duas primeiras chaves ligam e desligam a linha; a do mês em aberto, não. */
button.g-chave{cursor:pointer}
button.g-chave:hover{color:var(--tinta)}
button.g-chave:focus-visible{outline:2px solid var(--marca-legivel);outline-offset:2px;border-radius:3px}
/* Série desligada: risco no rótulo e amostra vazada, para o estado ser lido
   sem depender de cor — o daltônico e a impressão em preto e branco também. */
button.g-chave[aria-pressed="false"]{opacity:.55;text-decoration:line-through}
button.g-chave[aria-pressed="false"] i{background:transparent !important;box-shadow:inset 0 0 0 1px var(--tinta-3)}

.g-area.off-valor .s-valor,
.g-area.off-qtd .s-qtd{display:none}
/* Com uma série só, o valor da outra na tabela perde a referência visual. */
.g-area.off-valor .g-mes-linha:first-child,
.g-area.off-qtd .g-mes-linha:last-child{opacity:.4}
/* Chave do mês em aberto: a mesma hachura das barras, nas duas cores da
   série — é a legenda de um estado, não de uma terceira medida. */
.g-chave .i-parcial{
  background:repeating-linear-gradient(45deg,
    var(--g-valor) 0 2px, transparent 2px 3px,
    var(--g-qtd) 3px 5px, transparent 5px 6px);
  box-shadow:inset 0 0 0 1px var(--grade);
}
.g-chaves{flex-wrap:wrap}

/* Mês à esquerda, as duas medidas empilhadas à direita: em duas linhas o
   painel termina junto com o gráfico, em vez de esticar o cartão. */
.g-mes{
  display:grid;grid-template-columns:46px 1fr;gap:8px;align-items:center;
  padding:6px 0;border-bottom:1px solid var(--grade);
}
.g-mes:last-child{border-bottom:none}
.g-mes-nome{
  font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-3);
}
.g-mes-vals{display:flex;flex-direction:column;min-width:0}
.g-mes-linha{
  display:flex;align-items:baseline;justify-content:space-between;gap:8px;
  font-size:12px;font-variant-numeric:tabular-nums;line-height:1.42;
}
.g-mes-linha b{font-weight:600}
.g-mes-linha em{font-style:normal;font-size:11px}
.g-mes-linha .pos{color:var(--sucesso-txt)}
.g-mes-linha .neg{color:var(--erro-txt,#d5453b)}
.g-sem{color:var(--tinta-3)}

@media (max-width:860px){
  .g-area{grid-template-columns:1fr}
  .g-tabela{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px}
  .g-chaves{grid-column:1/-1;flex-direction:row;gap:16px}
  .g-mes{border-bottom:none;border-top:1px solid var(--grade);padding-top:8px}
}
/* Rótulo de eixo na cor da sua barra: com duas escalas no mesmo desenho, é o
   que impede ler o número do eixo errado. Vai na variante legível, porque o
   lime não se lê como texto sobre fundo claro. */
.g-eixo-v{fill:var(--g-valor-txt)}
.g-eixo-q{fill:var(--g-qtd-txt)}
/* Mês em curso: barra hachurada na própria cor diz "ainda não fechou". */
.g-barra-parcial{stroke-width:1}
/* Grade e eixo recessivos: o dado é a barra, não a régua. */
.g-grade{stroke:var(--grade);stroke-width:1}
/* A linha de base fecha as barras; sem ela a coluna parece flutuar. */
.g-base{stroke:var(--tinta-3);stroke-width:1}
.g-eixo{fill:var(--tinta-3);font-size:10px;font-variant-numeric:tabular-nums}
.g-barra{transition:opacity .12s}
.g-barra:hover{opacity:.82}
.g-nota{margin-top:10px}
.g-nota .pos{color:var(--sucesso-txt);font-weight:600}
.g-nota .neg{color:var(--erro-txt,#d5453b);font-weight:600}

/* O percentual do DRE ganhou explicação no title: sinaliza que é interativo. */
.dre .pct[title]{cursor:help}

/* --- cartão compacto com detalhe em modal --- */

.card-mini{position:relative;padding-right:38px}
.card-mini .val-mini{
  margin:4px 0 2px;font-size:20px;font-weight:640;color:var(--tinta);
  font-variant-numeric:tabular-nums;
}
.sinal{
  position:absolute;top:10px;right:10px;
  width:20px;height:20px;border-radius:50%;padding:0;cursor:pointer;
  border:1px solid var(--marca-legivel);background:transparent;color:var(--marca-legivel);
  font:600 12px/1 inherit;display:grid;place-items:center;
}
.sinal:hover{background:var(--marca-legivel);color:var(--marca-tinta)}
.sinal:focus-visible{outline:2px solid var(--marca-legivel);outline-offset:2px}

.modal{
  border:1px solid var(--borda);border-radius:14px;padding:0;
  background:var(--superficie);color:var(--tinta);
  max-width:min(720px,92vw);width:100%;
}
.modal::backdrop{background:rgba(0,0,0,.55)}
.modal-cab{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px 20px;border-bottom:1px solid var(--grade);
}
.modal-cab h2{margin:0;font-size:16px}
.modal-x{
  border:none;background:transparent;color:var(--tinta-3);cursor:pointer;
  font-size:24px;line-height:1;padding:0 4px;
}
.modal-x:hover{color:var(--tinta)}
.modal-x:focus-visible{outline:2px solid var(--marca-legivel);outline-offset:2px}
.modal > div:last-child{padding:18px 20px 22px}

.dica-inline{font-size:11px;color:var(--tinta-3);font-weight:400}

/* Campo de percentual dentro da tabela de rateio. */
.campo-pct{
  width:92px;text-align:right;font:inherit;font-size:12.5px;
  padding:5px 8px;border-radius:7px;border:1px solid var(--borda);
  background:var(--fundo);color:var(--tinta);font-variant-numeric:tabular-nums;
}
.campo-pct:focus-visible{outline:2px solid var(--marca-legivel);outline-offset:1px}

.filtro{
  display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-top:14px;
  padding:13px 15px;background:var(--superficie);border:1px solid var(--borda);
  border-radius:var(--r);box-shadow:var(--sombra);
}
.campo{display:flex;flex-direction:column;gap:4px}
.campo label{font-size:11px;color:var(--tinta-3);font-weight:580;letter-spacing:.02em}
.campo input,.campo select{
  font:inherit;font-size:13.5px;padding:7px 10px;border-radius:8px;
  border:1px solid var(--borda);background:var(--plano);color:var(--tinta);
  color-scheme:inherit;
}
.campo select{max-width:270px}
.campo input:focus-visible,.campo select:focus-visible{outline:2px solid var(--marca-legivel);outline-offset:1px}
.aplicar{
  font:inherit;font-size:13.5px;font-weight:600;padding:8px 16px;border-radius:8px;
  border:1px solid var(--marca);background:var(--marca);color:var(--marca-tinta);
  cursor:pointer;transition:.15s;
}
.aplicar:hover{background:var(--marca-forte);border-color:var(--marca-forte)}
.aplicar:focus-visible{outline:2px solid var(--tinta);outline-offset:2px}
.atalhos{display:flex;gap:6px;flex-wrap:wrap;margin-left:auto}
.atalhos button{
  font:inherit;font-size:12px;padding:6px 10px;border-radius:99px;cursor:pointer;
  border:1px solid var(--borda);background:var(--plano);color:var(--tinta-2);transition:.15s;
}
.atalhos button:hover{color:var(--tinta);border-color:var(--tinta-3)}

/* --- filtros com multisseleção (local e eletroposto) --- */

.multi{position:relative}
.multi-botao{
  position:relative;font:inherit;font-size:13.5px;text-align:left;cursor:pointer;
  padding:8px 30px 8px 11px;border-radius:9px;min-width:210px;max-width:270px;
  border:1px solid var(--borda);background:var(--superficie);color:var(--tinta);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.multi-botao::after{
  content:"";position:absolute;right:12px;top:50%;width:6px;height:6px;margin-top:-5px;
  border-right:1.6px solid var(--tinta-3);border-bottom:1.6px solid var(--tinta-3);
  transform:rotate(45deg);
}
/* Filtro com escolha feita ganha a borda da marca: dá para ver de longe que o
   resultado está recortado. */
.multi-botao.multi-ativo{border-color:var(--marca-legivel)}
.multi-botao:focus-visible{outline:2px solid var(--marca-legivel);outline-offset:1px}
.multi-painel{
  position:absolute;z-index:30;top:calc(100% + 6px);left:0;width:340px;max-width:86vw;
  display:flex;flex-direction:column;gap:8px;padding:10px;
  background:var(--superficie);border:1px solid var(--borda);border-radius:11px;
  box-shadow:0 12px 32px -14px rgba(0,0,0,.5);
}
/* O display:flex acima venceria o [hidden] do navegador; sem esta regra o
   painel nunca fecharia. */
.multi-painel[hidden]{display:none}
.multi-busca{
  font:inherit;font-size:13px;padding:7px 10px;border-radius:8px;
  border:1px solid var(--borda);background:var(--plano);color:var(--tinta);
}
.multi-busca:focus-visible{outline:2px solid var(--marca-legivel);outline-offset:1px}
.multi-acoes{display:flex;gap:6px}
.multi-acoes button{
  font:inherit;font-size:12px;padding:4px 10px;border-radius:999px;cursor:pointer;
  border:1px solid var(--borda);background:transparent;color:var(--tinta-2);
}
.multi-acoes button:hover{color:var(--tinta);border-color:var(--tinta-3)}
.multi-acoes button:focus-visible{outline:2px solid var(--marca-legivel);outline-offset:1px}
.multi-lista{max-height:300px;overflow-y:auto;display:flex;flex-direction:column}
.multi-grupo{
  font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;
  color:var(--tinta-3);padding:8px 6px 3px;
}
.multi-item{
  display:grid;grid-template-columns:auto 1fr;column-gap:9px;align-items:center;
  padding:6px;border-radius:7px;cursor:pointer;
}
.multi-item:hover{background:var(--grade)}
.multi-item input{grid-row:1/3;width:15px;height:15px;accent-color:var(--marca-legivel);cursor:pointer}
.multi-nome{font-size:13px;color:var(--tinta)}
.multi-det{font-size:11.5px;color:var(--tinta-3)}
@media (max-width:720px){ .atalhos{margin-left:0;width:100%} }

.aviso{
  display:flex;gap:9px;align-items:flex-start;margin:16px 0 0;padding:11px 13px;
  border-radius:10px;font-size:13px;line-height:1.45;
  background:color-mix(in srgb,var(--alerta) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--alerta) 40%,transparent);
  color:var(--tinta);
}
.aviso svg{width:16px;height:16px;flex:none;margin-top:1px;stroke:var(--alerta);fill:none;stroke-width:2}

/* ---------- seções ---------- */
section{margin-top:28px}
.tit{display:flex;align-items:center;gap:9px;margin:0 0 12px}
.tit h2{margin:0;font-size:14px;font-weight:640;letter-spacing:-.01em}
.selo{
  font-size:10px;font-weight:700;letter-spacing:.04em;padding:3px 7px;border-radius:5px;
  background:color-mix(in srgb,var(--alerta) 20%,transparent);color:var(--tinta);
  border:1px solid color-mix(in srgb,var(--alerta) 45%,transparent);
}
.selo-real{
  background:color-mix(in srgb,var(--bom) 18%,transparent);
  border-color:color-mix(in srgb,var(--bom) 45%,transparent);
}

/* ---------- cartões e indicadores ---------- */
.grade{display:grid;gap:12px}
.g6{grid-template-columns:repeat(6,1fr)}
.g5{grid-template-columns:repeat(5,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}

.cartao{
  background:var(--superficie);border:1px solid var(--borda);
  border-radius:var(--r);padding:15px 16px;box-shadow:var(--sombra);
}
.bloco-roi .cartao{border:2px solid #929D3C}
/* bloco de destaque: card de recargas + dois menores ao lado */
.destaque{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
.pilha{display:grid;gap:12px;grid-template-rows:1fr 1fr}
.card-largo{display:flex;flex-direction:column}
.val-xl{font-size:31px;line-height:1.1;letter-spacing:-.03em;margin:2px 0 0}
.destaque-val{color:var(--marca-legivel)}
.composicao{margin-top:14px;padding-top:12px;border-top:1px solid var(--grade);display:flex;flex-direction:column;gap:7px}
.composicao div{display:flex;align-items:baseline;gap:10px;font-size:13px;color:var(--tinta-2)}
.composicao b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--tinta);font-weight:620}
.composicao .tot{padding-top:7px;border-top:1px solid var(--grade);font-weight:600;color:var(--tinta)}

.card-roaming{
  margin-top:12px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:20px;align-items:start;border-left:3px solid var(--s3);
}
.roaming-redes{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--tinta-2)}
.roaming-redes div{display:flex;gap:10px}
.roaming-redes b{margin-left:auto;font-variant-numeric:tabular-nums;color:var(--tinta);font-weight:600}
.roaming-redes .mais{color:var(--tinta-3);font-size:11.5px}
.nota-solta{font-size:12px;color:var(--tinta-3);margin:8px 2px 0;line-height:1.5}

@media (max-width:900px){
  .destaque{grid-template-columns:1fr}
  .card-roaming{grid-template-columns:1fr}
}

.rot{font-size:11.5px;color:var(--tinta-3);font-weight:560;margin:0 0 5px}
.val{font-size:25px;font-weight:660;letter-spacing:-.025em;margin:0;line-height:1.15}
.val.sm{font-size:20px}
.nota{font-size:11.5px;color:var(--tinta-3);margin:4px 0 0}
.pos{color:var(--sucesso-txt)} .neg{color:var(--critico)}

/* ---------- DRE ---------- */
.dre{display:flex;flex-direction:column;gap:0}
.dre .ln{display:flex;align-items:baseline;gap:12px;padding:11px 0;border-bottom:1px solid var(--grade)}
.dre .ln:last-child{border-bottom:none}
.dre .ln.tot{border-top:2px solid var(--eixo);margin-top:4px;padding-top:13px}
.dre .nm{font-size:13.5px;color:var(--tinta-2)}
.dre .ln.tot .nm{font-weight:640;color:var(--tinta);font-size:14.5px}
.dre .vl{margin-left:auto;font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.dre .ln.tot .vl{font-size:19px;font-weight:680}
.pct{font-size:11.5px;color:var(--tinta-3);font-variant-numeric:tabular-nums;min-width:52px;text-align:right}

.dre .grupo-dre{border-bottom:none;padding-bottom:2px;padding-top:16px}
.dre .grupo-dre .nm{font-weight:640;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--marca-legivel)}
.dre .ln-sub{padding-left:16px}
.dre .ln-n2{padding-left:16px}
.dre .ln-n3{padding-left:32px}
.tag-rateio{font-size:10.5px;padding:1px 6px;border-radius:3px;background:var(--grade);color:var(--tinta-3);margin-left:6px;white-space:nowrap}
.dre .sep-rateio{border-bottom:none;padding:0;height:1px;margin:10px 0 2px;background:var(--grade)}
.dre .subtotal-rateio{border-bottom:1px dashed var(--grade);padding:4px 0;margin-top:2px}
.dre .subtotal-rateio .nm{font-size:12.5px;color:var(--tinta-2)}
.dre .subtotal-rateio .vl{font-size:12.5px}
.dre .rateio-resumo{border-bottom:none;padding:6px 0}
.oculto-sjp{display:none}
.oculto-sjp.visivel-sjp{display:block}
.rodape-sjp{text-align:center;padding:24px 0 8px}
.btn-detalhe{background:var(--grade);color:var(--tinta-2);border:1px solid var(--borda);border-radius:6px;padding:8px 24px;font-size:13px;cursor:pointer;transition:background .2s}
.btn-detalhe:hover{background:var(--borda);color:var(--tinta)}
.dre .rateio-resumo .nm{font-size:13px;font-weight:600;color:var(--tinta)}

/* ---------- barras ---------- */
.barras{display:flex;flex-direction:column;gap:9px;margin-top:2px}
.barra{display:grid;grid-template-columns:1fr auto;gap:3px 12px;cursor:default}
.barra .lb{font-size:12.5px;color:var(--tinta-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.barra .vv{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--tinta)}
/* span precisa ser blocado: em display:inline a largura não se aplica */
.trilho{display:block;grid-column:1/-1;height:9px;background:var(--grade);border-radius:5px;overflow:hidden}
.preench{display:block;height:100%;border-radius:5px;transition:width .35s cubic-bezier(.4,0,.2,1)}
.barra:hover .lb{color:var(--tinta)}
/* Barras. `cm` é receita, na cor da marca: no tema escuro o lime exato do
   logo; no claro ele desce para --marca-legivel, porque lime puro tem
   praticamente a mesma luminância do trilho (#e2e8dc) e a barra sumiria —
   1,0:1 contra 3,9:1. `c2` é custo, na violeta complementar do lime: é o
   contraste máximo dentro da própria paleta, e o que sai da operação fica
   visivelmente do lado oposto do que entra. `c3` é o caixa por eletroposto. */
.cm .preench{background:var(--marca-legivel)}
.c2 .preench{background:var(--g-custo)} .c3 .preench{background:var(--s3)}

/* ---------- tabela ---------- */
.tab{width:100%;border-collapse:collapse;font-size:13px;margin-top:4px}
.tab th{
  text-align:left;font-size:11px;font-weight:620;color:var(--tinta-3);
  text-transform:uppercase;letter-spacing:.04em;padding:7px 10px;border-bottom:1px solid var(--eixo);
}
.tab td{padding:8px 10px;border-bottom:1px solid var(--grade);color:var(--tinta-2)}
.tab td.n{text-align:right;font-variant-numeric:tabular-nums;color:var(--tinta);font-weight:560}
.tab tr:last-child td{border-bottom:none}
.tab .prim{color:var(--tinta);font-weight:560}
.rolagem{overflow-x:auto}

/* --- cadastros da tela de configurações --- */

.cartao-cpo{margin-bottom:12px}
.cpo-cab{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap;padding-bottom:8px;border-bottom:1px solid var(--grade);
}
.cpo-nome{font-size:14.5px;color:var(--tinta)}
/* O id fica ao lado do nome, e não no lugar dele: quem opera o M8 precisa do
   id para conferir o codigo_obra, mas quem lê o painel precisa do nome. */
.cpo-id,code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12px;color:var(--tinta-3);
}
.cpo-id{margin-left:8px}
.tab-densa{font-size:12.5px}
.tab-densa td,.tab-densa th{padding:6px 8px;white-space:nowrap}
/* UUID de estação é longo demais para a tabela: encolhe sem quebrar a linha. */
.id-longo{font-size:11px}

.tab-pct .cel-pct{display:flex;align-items:center;gap:8px;min-width:160px}
.tab-pct .barra-pct{flex:1;height:14px;background:var(--grade);border-radius:3px;overflow:hidden}
.tab-pct .preench-pct{height:100%;background:var(--marca-legivel);border-radius:3px;min-width:1px}
.tab-pct .rotulo-pct{font-size:12px;font-variant-numeric:tabular-nums;color:var(--tinta-2);white-space:nowrap;min-width:38px;text-align:right}

.rodape{margin-top:34px;padding-top:16px;border-top:1px solid var(--grade);
        font-size:12px;color:var(--tinta-3);line-height:1.6}

/* ---------- identidade no cabeçalho ---------- */
.usuario{display:flex;align-items:center;gap:12px;font-size:12.5px}
.quem{color:var(--tinta-2);font-weight:560}
.link-nav{
  font:inherit;font-size:12.5px;color:var(--marca-legivel);text-decoration:none;
  background:none;border:none;padding:0;cursor:pointer;
}
.link-nav:hover{text-decoration:underline}
.link-nav.sair{color:var(--tinta-3)}
.link-nav:focus-visible{outline:2px solid var(--marca-legivel);outline-offset:2px;border-radius:3px}
@media (max-width:720px){
  .usuario{order:3;width:100%;justify-content:flex-start;padding-top:4px}
}

/* ---------- tela de entrada ---------- */
.tela-entrada{display:grid;place-items:center;min-height:100vh;padding:22px}
.entrada{width:100%;max-width:390px}
/* A marca completa (web/logo.webp) tem o texto em branco-gelo, feito para
   fundo escuro. Num tema claro ele sumiria, então ela vai sobre a placa verde
   quase preta do site — que no tema escuro se funde ao fundo, exatamente como
   o logo aparece em greencharger.com.br. */
.placa-marca{
  background:var(--marca-plano);border-radius:16px;padding:26px 28px;
  display:grid;place-items:center;margin-bottom:20px;
}
.lockup{width:min(240px,70%);height:auto;display:block}
.titulo-entrada{text-align:center;margin-bottom:18px}
.titulo-entrada h1{font-size:16px}
.form-entrada{display:flex;flex-direction:column;gap:14px}
.form-entrada .campo input{width:100%;padding:9px 11px;font-size:14.5px}
.aplicar.largo{width:100%;padding:10px}
.rodape-entrada{margin-top:18px;padding-top:0;border-top:none;text-align:center}

/* ---------- cadastro de investidores ---------- */
.aviso-ok{
  background:color-mix(in srgb,var(--bom) 13%,transparent);
  border-color:color-mix(in srgb,var(--bom) 40%,transparent);
}
.aviso-ok svg{stroke:var(--bom)}

.botao-mini{margin-left:auto;font-size:12.5px;padding:6px 13px}
.pilula{
  font:inherit;font-size:12px;padding:6px 11px;border-radius:99px;cursor:pointer;
  border:1px solid var(--borda);background:var(--plano);color:var(--tinta-2);transition:.15s;
}
.pilula:hover{color:var(--tinta);border-color:var(--tinta-3)}
.pilula:focus-visible{outline:2px solid var(--marca-legivel);outline-offset:1px}

#form .campos{margin-bottom:16px}
#form .campo input{width:100%;padding:8px 10px}
.campo-largo{display:flex;flex-direction:column;gap:6px}
.dica{color:var(--tinta-3);font-weight:400;text-transform:none;letter-spacing:0}

.ferramentas-est{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:8px}
.ferramentas-est input[type=search]{
  font:inherit;font-size:13px;padding:7px 10px;border-radius:8px;flex:1;min-width:180px;
  border:1px solid var(--borda);background:var(--plano);color:var(--tinta);
}
.ferramentas-est input:focus-visible{outline:2px solid var(--marca-legivel);outline-offset:1px}

/* Altura fixa: com dezenas de eletropostos a lista engoliria o formulário. */
.lista-estacoes{
  max-height:320px;overflow-y:auto;border:1px solid var(--borda);border-radius:10px;
  background:var(--plano);padding:4px;
}
.item-estacao{
  display:grid;grid-template-columns:auto 1fr auto;gap:2px 10px;align-items:center;
  padding:7px 9px;border-radius:7px;cursor:pointer;
}
/* Participação do investidor naquele ponto, à direita do nome. */
.item-estacao .part{
  grid-row:1/3;grid-column:3;display:flex;align-items:center;gap:3px;
  font-size:11.5px;color:var(--tinta-3);
}
.item-estacao .pct-est{
  width:62px;padding:4px 6px;text-align:right;font-size:12.5px;
  font-variant-numeric:tabular-nums;border:1px solid var(--borda);
  border-radius:6px;background:var(--superficie);color:var(--tinta);
}
.item-estacao .pct-est:disabled{opacity:.4}
.item-estacao:hover{background:var(--grade)}
.item-estacao input{grid-row:1/3;width:15px;height:15px;accent-color:var(--marca-legivel);cursor:pointer}
.item-estacao .nome{font-size:13px;color:var(--tinta);font-weight:560}
.item-estacao .meta{font-size:11.5px;color:var(--tinta-3)}

.linha-ativo{display:flex;align-items:center;gap:9px;margin-top:16px;font-size:13px;color:var(--tinta-2);cursor:pointer}
.linha-ativo input{width:15px;height:15px;accent-color:var(--marca-legivel);cursor:pointer}
.acoes{display:flex;gap:10px;align-items:center;margin-top:18px}
@media (max-width:720px){ #form .campos{grid-template-columns:1fr} }

@media (max-width:1180px){ .g5{grid-template-columns:repeat(3,1fr)} }
@media (max-width:1080px){ .g6{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(2,1fr)} }
@media (max-width:720px){
  .env{padding:16px 14px 48px}
  .g6,.g5,.g4,.g2{grid-template-columns:repeat(2,1fr)}
  .custos-grade{grid-template-columns:1fr}
  .val{font-size:21px}
  .val-xl{font-size:27px}
  .tab-pct thead{display:none}
  .tab-pct tr{display:block;border-bottom:1px solid var(--grade);padding:8px 0}
  .tab-pct tr:last-child{border-bottom:none}
  .tab-pct td{display:inline;padding:0;border-bottom:none;font-size:12.5px}
  .tab-pct td.prim{display:block;padding-bottom:4px;font-size:13px}
  .tab-pct td.n::before{content:" · ";color:var(--tinta-3)}
  .tab-pct .cel-pct{display:flex;padding:4px 0 4px;min-width:0;width:100%}
}

/* Os dois roamings viraram cartões pequenos iguais, lado a lado, com o
   detalhamento no modal — o bloco largo de saída ocupava a tela inteira para
   dizer um número que quase ninguém abria. */