/* Administrativo — grades e formulários no padrão do Impacto ONE web.
   Os valores repetem ClientesPage.module.css de lá: cabeçalho grudado, rótulo
   de 11px maiúsculo com letter-spacing, hover em surface-3, número à direita
   com tabular-nums. Nenhuma cor crua: tudo sai dos tokens. */

body[data-modo="erp"] .painel-sessao,
body[data-modo="erp"] .composicao { }
body[data-modo="erp"] .faixa-sessao,
body[data-modo="erp"] .composicao,
body[data-modo="erp"] .btn-descer { display: none !important; }

/* No administrativo nao existe "cliente aberto": a lateral inteira e do ERP.
   Deixar o rotulo e o botao de abrir cliente ali confundiria o que a secao e,
   alem de ocupar 100px que os itens de navegacao precisam. */
body[data-modo="erp"] #secaoClientes,
body[data-modo="erp"] #btnAbrirCliente{display:none}

.secao-erp{font-size:var(--fs-11);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--txt-3);padding:var(--sp-4) var(--sp-3) var(--sp-2)}
/* Nove itens de navegacao nao cabiam em 395px com o tamanho do cartao de
   cliente (48px cada). Sem subtitulo e com padding menor, cabem sem rolar. */
/* Quem manda na altura e o quadrado do icone, nao o padding: 30px + folga
   davam 46px por item, e nove itens passavam de 395px. Com 26px + 6, cada um
   fica em 38 e os nove cabem sem rolar. */
.item-erp{padding:6px 8px}
.item-erp .item-icone{width:26px;height:26px;font-size:var(--fs-12);border-radius:7px}
.item-erp .item-titulo{font-size:var(--fs-13)}
.voltar-consultoria{margin-top:var(--sp-3);border-top:1px solid var(--border);
  border-radius:0;padding-top:var(--sp-3)}

.erp-area{padding:var(--sp-6);overflow-y:auto;height:100%}
.erp-carregando{padding:var(--sp-8);color:var(--txt-3);font-size:var(--fs-13)}

.erp-cabecalho{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--sp-4);margin-bottom:var(--sp-5)}
.erp-cabecalho h2{font-size:var(--fs-20);font-weight:600}
.erp-cabecalho p{font-size:var(--fs-13);color:var(--txt-3);margin-top:2px}
.erp-acoes{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:var(--sp-3)}

/* Cartões de número — a leitura de cima da página. */
.erp-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:var(--sp-3);margin-bottom:var(--sp-5)}
/* Cartao de numero: sombra suave em vez de borda dura, cantos maiores e uma
   FAIXA de cor no topo que diz o que o numero e (receita, despesa, alerta).
   A faixa carrega o significado sem tingir o cartao inteiro -- fundo colorido
   em cinco cartoes lado a lado vira ruido, e no tema escuro fica pior. */
/* Respiro de 20px (o `p-5` dos cartões do HUB). Com 16px o rótulo, o número
   e o subtítulo encostam na borda e os cartões parecem colados uns nos
   outros mesmo tendo espaço entre eles. */
.erp-cartao-num{position:relative;overflow:hidden;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--sp-5);
  display:flex;flex-direction:column;gap:3px;box-shadow:var(--sombra);
  transition:box-shadow .15s,transform .15s,border-color .15s}
/* A TARJA DE 3px NO TOPO SAIU.
   Ela repetia, em cor e em barulho, o que o número já diz em cor -- receita
   azul, despesa vermelha. Duas marcas para o mesmo fato, e a fileira de
   cartões virava uma cerca listrada. O HUB resolve isso com um ícone calmo
   num disco pastel; aqui, onde não há ícone, o próprio número basta. */
.erp-cartao-num.destaque{border-color:var(--acao-borda);background:var(--acao-dim)}
.erp-cartao-num.tom-ok .num{color:var(--ok-cor)}
/* Só o clicável levanta: cartão que não responde a clique não deve fingir
   que responde. */
.erp-cartao-num.clicavel{cursor:pointer}
.erp-cartao-num.clicavel:hover{box-shadow:var(--sombra2);transform:translateY(-2px);
  border-color:var(--acao-borda)}
/* PROPORÇÃO: rótulo 12/500, número 22/600 -- as do KpiCard do HUB. Aqui era
   rótulo 11/600 e número 28/700: o número engolia a seção inteira, e o nome
   dela (13px) ficava menor que o rótulo do cartão. A hierarquia estava de
   cabeça para baixo -- por isso "dá pra ler tudo, mas parece desorganizado". */
.erp-cartao-num .rot{font-size:var(--fs-12);text-transform:uppercase;letter-spacing:.05em;
  color:var(--txt-3);font-weight:500}
.erp-cartao-num .num{font-size:var(--fs-22);font-weight:600;line-height:1.2;
  letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin-top:2px}
.erp-cartao-num .sub{font-size:var(--fs-12);color:var(--txt-3)}

.erp-colunas{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:var(--sp-4)}
/* ── O CABEÇALHO DE SEÇÃO ────────────────────────────────────────────────
   O subtítulo morava DENTRO do h4, e o h4 é `space-between` (para caber um
   botão à direita em outras telas). Resultado: numa tela larga o "Caixa"
   ficava colado na margem esquerda e o "o que vence em setembro" na direita,
   a meio metro de distância. Os dois são a mesma frase e liam como duas
   coisas soltas -- é a maior fonte da sensação de bagunça.
   Agora o subtítulo é IRMÃO do h4 e fica embaixo dele, empilhado, como o
   CardHeader do HUB. O h4 continua `space-between` e o caso "título + botão"
   (Itens, no documento) segue funcionando. */
.erp-bloco{margin-bottom:var(--sp-6)}
.erp-bloco h3{font-size:var(--fs-14);font-weight:600;margin:0 0 var(--sp-3)}
.erp-bloco h4{font-size:var(--fs-14);font-weight:600;color:var(--txt);margin:0 0 var(--sp-3)}
/* Com subtítulo logo abaixo, o par se aperta: 4px entre eles, 16px depois. */
.erp-bloco h4:has(+ .erp-bloco-sub){margin-bottom:var(--sp-1)}
.erp-bloco-sub{font-size:var(--fs-12);color:var(--txt-3);line-height:1.5;
  margin:0 0 var(--sp-4)}
.erp-bloco h3 small,.erp-bloco h4 small{font-weight:400;color:var(--txt-3);
  font-size:var(--fs-12);margin-left:var(--sp-2)}

/* Barra de filtro, igual à do ONE: cartão raso acima da grade. */
.erp-barra{display:flex;align-items:center;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  margin-bottom:var(--sp-3);flex-wrap:wrap}
.erp-busca{flex:1;min-width:200px;height:32px;padding:0 var(--sp-3);background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--r-md);font-size:var(--fs-13);
  color:var(--txt)}
.erp-busca:focus{outline:none;border-color:var(--acao);box-shadow:0 0 0 3px var(--acao-dim)}
/* `.erp-busca` tem `flex:1` -- certo para uma caixa de busca, que deve tomar
   a barra; errado para um seletor de mês, que tem largura própria. O painel
   punha `width:150px` inline e PERDIA: contra `flex-grow` o `width` não vale
   nada. O campo de mês esticava por toda a barra, com o calendarinho a meio
   metro do texto. */
.erp-barra .erp-busca.fixo,
.modal-rodape .erp-busca.fixo{flex:0 0 auto;width:170px;min-width:0}
.erp-rot-filtro{font-size:var(--fs-12);color:var(--txt-2);white-space:nowrap}
.erp-info{font-size:var(--fs-12);color:var(--txt-3);font-variant-numeric:tabular-nums;
  margin-left:auto;white-space:nowrap}
.erp-info .alerta{color:var(--alerta-cor)}

/* Cartao da grade: mesmo raio e sombra suave dos cartoes de numero, para as
   duas coisas parecerem do mesmo sistema. E o que "moderniza o formato" sem
   listra: cantos macios, borda leve e o conteudo respirando dentro. */
.erp-cartao{background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sombra)}
.erp-rolagem{overflow-x:auto}
.erp-tabela{width:100%;font-size:var(--fs-13)}
/* Cabeçalho num tom levemente distinto do corpo: separa a régua dos dados
   sem precisar de linha grossa, e mantém o corpo todo branco. */
.erp-tabela th{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-11);font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:var(--txt-3);text-align:left;
  border-bottom:1px solid var(--border);background:var(--surface-3);position:sticky;top:0;z-index:1}
.erp-tabela th.num{text-align:right}
.erp-tabela td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border);
  vertical-align:middle}
.erp-tabela tbody tr:last-child td{border-bottom:none}
/* Sem zebrado: fundo branco em todas as linhas. O que dá ritmo é a linha
   divisória fina e o respiro entre elas -- listra alternada polui e o Diogo
   recusou ao ver. O hover é que marca onde o cursor está. */
.erp-tabela tbody tr{transition:background .12s}
.erp-tabela tbody tr:hover{background:var(--acao-dim);cursor:pointer}
.erp-tabela tbody tr:focus-visible{outline:2px solid var(--acao);outline-offset:-2px}
.erp-tabela .nome{font-weight:600}
.erp-tabela .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.erp-tabela .mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:var(--fs-12);
  color:var(--txt-3);font-variant-numeric:tabular-nums}
.erp-tabela .fraco{color:var(--txt-3)}
.erp-tabela .erro{color:var(--erro-cor);font-weight:600}
.erp-tabela .alerta{color:var(--alerta-cor)}
.erp-tabela small{display:block;font-size:var(--fs-11);color:var(--txt-3);margin-top:2px}

/* Chip nunca quebra linha: ele e um rotulo, e rotulo partido em duas linhas
   deixa de parecer rotulo. "nao emitida" foi o primeiro a estourar. */
.erp-chip{display:inline-flex;align-items:center;white-space:nowrap;
  padding:2px var(--sp-2);border-radius:var(--r-full);
  font-size:var(--fs-11);font-weight:600;background:var(--surface-3);color:var(--txt-2);
  border:1px solid var(--border)}
.erp-chip.ok{background:var(--ok-dim);color:var(--ok-cor);border-color:transparent}
.erp-chip.erro{background:var(--erro-dim);color:var(--erro-cor);border-color:transparent}
.erp-chip.alerta{background:var(--alerta-dim);color:var(--alerta-cor);border-color:transparent}
.erp-chip.info{background:var(--acao-dim);color:var(--acao);border-color:transparent}
.erp-chip.emitido{background:var(--emitido-dim);color:var(--emitido-cor);border-color:transparent}
/* Coluna Boleto: rótulo à esquerda, ação encostada à direita. O margin-left
   auto no botão alinha as ações entre linhas com e sem chip -- sem ele, o
   "Emitir boleto" de uma linha nascia colado à esquerda e o "PDF" da linha
   de cima aparecia deslocado, porque cada célula tinha conteúdo diferente. */
.cel-boleto{display:flex;align-items:center;gap:var(--sp-2)}
.cel-boleto > .btn{margin-left:auto}
.erp-chip.fraco{color:var(--txt-3)}

.erp-vazio{padding:var(--sp-8) var(--sp-4);text-align:center;color:var(--txt-3);
  font-size:var(--fs-13);background:var(--surface);border:1px dashed var(--border-strong);
  border-radius:var(--r-lg)}
.erp-erro{padding:var(--sp-5);background:var(--erro-dim);border-radius:var(--r-lg);
  color:var(--erro-cor);font-size:var(--fs-13);display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--sp-3)}
.erp-aviso{font-size:var(--fs-12);color:var(--alerta-cor);background:var(--alerta-dim);
  padding:var(--sp-2) var(--sp-3);border-radius:var(--r-md);margin-bottom:var(--sp-3);
  line-height:1.5}
.erp-nota{font-size:var(--fs-12);color:var(--txt-3);margin:var(--sp-4) 0 0;line-height:1.55}

/* Ficha de dados: continua rótulo/valor em duas colunas -- dt e dd são
   irmãos, e empilhar o par exigiria um wrapper por campo no HTML de todos os
   lugares que montam ficha. O que moderniza aqui é o tratamento: a ficha
   virou um quadro com fundo próprio, os rótulos ficaram versaletes discretos
   e cada par ganhou uma linha divisória fina. Sem isso era texto solto na
   página, que é o que dava a impressão de "cadastro simples demais". */
.erp-dl{display:grid;grid-template-columns:minmax(120px,auto) 1fr;
  gap:0;font-size:var(--fs-13);margin:var(--sp-3) 0;
  background:var(--surface);border:1px solid var(--border);
  border-radius:12px;overflow:hidden;box-shadow:var(--sombra)}
.erp-dl dt{color:var(--txt-3);white-space:nowrap;
  font-size:var(--fs-11);text-transform:uppercase;letter-spacing:.04em;font-weight:700;
  padding:11px var(--sp-3) 11px var(--sp-4);background:var(--surface-3);
  display:flex;align-items:center}
.erp-dl dd{margin:0;padding:11px var(--sp-4) 11px var(--sp-3);
  font-weight:500;line-height:1.45;display:flex;align-items:center;flex-wrap:wrap;gap:6px}
/* Divisória entre pares: no dt e no dd juntos, senão a linha para no meio. */
.erp-dl dt:not(:first-of-type),.erp-dl dd:not(:first-of-type){
  border-top:1px solid var(--border)}
.erp-dl dd small{color:var(--txt-3);margin-left:0;font-size:var(--fs-11);line-height:1.4}

.erp-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:var(--sp-3);margin:var(--sp-3) 0;max-height:56vh;overflow-y:auto;padding-right:var(--sp-2)}
.erp-campo{display:flex;flex-direction:column;gap:4px;font-size:var(--fs-12)}
.erp-campo.largo{grid-column:1/-1}
.erp-campo>span{color:var(--txt-2);font-weight:600}
.erp-campo input,.erp-campo select,.erp-campo textarea{height:32px;padding:0 var(--sp-3);
  background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r-md);
  font-size:var(--fs-13);color:var(--txt)}
.erp-campo textarea{height:auto;padding:var(--sp-2) var(--sp-3);resize:vertical}
.erp-campo input:focus,.erp-campo select:focus,.erp-campo textarea:focus{outline:none;
  border-color:var(--acao);box-shadow:0 0 0 3px var(--acao-dim)}
.erp-campo small{color:var(--txt-3);font-size:var(--fs-11);line-height:1.4}
.erp-campo-check{flex-direction:row;align-items:center;gap:var(--sp-2);flex-wrap:wrap}
.erp-campo-check input{height:auto;width:auto}
.erp-campo-check small{width:100%}
.erp-form-erro{color:var(--erro-cor);font-size:var(--fs-12);min-height:16px}

.erp-historico{margin:var(--sp-3) 0}
.erp-historico h4{font-size:var(--fs-13);font-weight:600;margin-bottom:var(--sp-2)}
.erp-hist-linha{display:grid;grid-template-columns:110px 1fr auto;gap:var(--sp-3);
  font-size:var(--fs-12);padding:var(--sp-2) 0;border-bottom:1px solid var(--border)}
.erp-hist-linha .fraco{color:var(--txt-3)}
/* Rola por dentro, cabecalho e rodape (Cancelar/Enviar) ficam fixos --
   mesmo padrao do .modal-corpo do modal grande. Sem isto, uma lista longa
   (a Top Cesta com 7 e-mails, por exemplo) empurrava os botoes pra fora
   da caixa: o .modal tem max-height mas nada dentro dele encolhia ou
   rolava, entao o conteudo simplesmente vazava por baixo. */
.erp-confirma{font-size:var(--fs-13);line-height:1.6;overflow-y:auto;flex:1;min-height:0}
.erp-lista-conf{margin:var(--sp-3) 0;padding-left:var(--sp-5);font-size:var(--fs-12);
  max-height:220px;overflow-y:auto;color:var(--txt-2)}
.erp-lista-conf li{padding:1px 0}
.erp-cadeia{display:flex;gap:var(--sp-2);flex-wrap:wrap;font-size:var(--fs-12);color:var(--txt-3)}
.erp-cadeia .atual{color:var(--acao-fg);font-weight:600}
.btn-mini{height:26px;padding:0 var(--sp-2);font-size:var(--fs-11)}

@media (max-width:820px){
  .erp-area{padding:var(--sp-3)}
  .erp-colunas{grid-template-columns:1fr}
}

/* Recado passageiro. Fica sobre o conteúdo, some sozinho. */
.erp-toast{position:fixed;bottom:var(--sp-6);left:50%;transform:translateX(-50%);
  background:var(--indigo);color:#fff;padding:var(--sp-3) var(--sp-5);border-radius:var(--r-lg);
  font-size:var(--fs-13);box-shadow:var(--shadow-pop);z-index:60;max-width:min(560px,90vw);
  transition:opacity var(--t-med),transform var(--t-med)}
.erp-toast.saindo{opacity:0;transform:translateX(-50%) translateY(8px)}

/* Botao de acao destrutiva. Fica de contorno, nao preenchido: cancelar uma
   nota nao e a acao que se convida a clicar -- e a que precisa estar
   disponivel e reconhecivel quando for necessaria. */
.btn.btn-perigo{color:var(--erro-cor);border-color:var(--erro-dim)}
.btn.btn-perigo:hover{border-color:var(--erro-cor);background:var(--erro-dim)}

/* Botao dentro de linha de grade ou de titulo de bloco. */
.btn.btn-mini{padding:2px 8px;font-size:var(--fs-12);line-height:1.6;min-height:0}
.erp-bloco h4{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3)}
.erp-tabela td .btn-mini + .btn-mini{margin-left:var(--sp-2)}

/* Total do documento, alinhado com a coluna de valor da grade acima. */
.erp-total{display:flex;justify-content:space-between;align-items:baseline;
  padding:var(--sp-3) var(--sp-4);margin-top:var(--sp-2);
  border-top:1px solid var(--borda-forte);font-size:var(--fs-13)}
.erp-total span{color:var(--texto2)}
.erp-total strong{font-size:var(--fs-15)}

/* Cartão de número que também é botão -- mesma cara do .destaque, só que
   em hover, para não inventar uma segunda linguagem visual de "isto é
   clicável" além da que os cartões já têm. */
.erp-cartao-num.clicavel{cursor:pointer;transition:border-color var(--t-fast),background var(--t-fast)}
.erp-cartao-num.clicavel:hover{border-color:var(--acao-borda);background:var(--acao-dim)}

/* Pizza em SVG puro. Fatia e linha da legenda usam a MESMA pista de "isto é
   clicável" que toda tabela do sistema já usa (hover em surface-3). */
.erp-pizza{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;position:relative}
.erp-pizza svg{flex-shrink:0}
.pizza-fatia{cursor:pointer;transition:opacity var(--t-fast)}
.pizza-fatia:hover{opacity:.82}
.pizza-fatia:focus-visible{outline:2px solid var(--acao);outline-offset:2px}
.erp-pizza-legenda{list-style:none;display:flex;flex-direction:column;gap:var(--sp-1);flex:1;min-width:180px}
.erp-pizza-legenda li{display:flex;align-items:center;gap:var(--sp-2);
  padding:var(--sp-2);border-radius:var(--r-sm);cursor:pointer}
.erp-pizza-legenda li:hover{background:var(--surface-3)}
.erp-pizza-legenda .ponto{width:10px;height:10px;border-radius:var(--r-full);flex-shrink:0}
.erp-pizza-legenda .rot{flex:1;font-size:var(--fs-13)}
.erp-pizza-legenda .num{font-size:var(--fs-13)}
.erp-pizza-legenda .pct{font-size:var(--fs-12);color:var(--txt-3);min-width:34px;text-align:right}

/* Título de bloco + controle na mesma linha (ex: seletor de horizonte da
   projeção) -- mesma ideia de .erp-bloco h4 (título+botão), só que o filho
   é um <select>, não um botão, então o próprio h3 perde a margem: quem
   afasta do conteúdo abaixo é esta linha inteira, não o título sozinho.
   Sem isso o seletor ficava colado direto no gráfico, sem respiro nenhum. */
.erp-bloco-titulo{display:flex;align-items:center;justify-content:space-between;
  gap:var(--sp-3);margin-bottom:var(--sp-3)}
.erp-bloco-titulo h3{margin-bottom:0}

/* Colunas empilhadas da projeção: legenda em linha, embaixo. O ponto
   hachurado repete as listras da série de avulso, para a legenda dizer a
   mesma coisa que a barra sem depender de cor. */
.erp-colunas-legenda{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);
  margin-top:var(--sp-2);font-size:var(--fs-12);color:var(--txt-2)}
.erp-colunas-legenda li{display:flex;align-items:center;gap:6px}
.erp-colunas-legenda .ponto{width:10px;height:10px;border-radius:2px;background:var(--cor)}
.erp-colunas-legenda .ponto.hach{background:repeating-linear-gradient(45deg,
  var(--cor) 0 2px,transparent 2px 5px);outline:1px solid var(--cor);outline-offset:-1px}

.erp-colgraf{width:100%;position:relative}
.erp-colgraf svg{display:block}

/* Rótulo de uma parte DENTRO de um bloco (a rosca dentro de Contratado). */
.erp-subtitulo{font-size:var(--fs-12);font-weight:600;text-transform:uppercase;
  letter-spacing:.05em;color:var(--txt-3);margin:var(--sp-4) 0 var(--sp-2)}

/* Linha de evolução + projeção. */
.erp-linha{width:100%;position:relative}
.erp-linha svg{display:block}
.erp-linha-tooltip{position:absolute;transform:translate(-50%,calc(-100% - 8px));
  background:var(--txt);color:var(--surface);font-size:var(--fs-11);font-weight:600;
  padding:4px 8px;border-radius:var(--r-sm);white-space:nowrap;pointer-events:none;
  box-shadow:var(--shadow-pop);z-index:5}

/* Em modo ERP o #area fica sem classe, cresce com o conteudo e o pai
   (.conteudo) tem overflow:hidden -- a lista de parceiros era simplesmente
   CORTADA, sem barra de rolagem em lugar nenhum. O seletor por id vence
   .painel-sessao, entao precisa ser escopado ao modo. */
body[data-modo="erp"] #area{flex:1 1 auto;min-height:0;overflow-y:auto;
  padding:var(--sp-5) var(--sp-6) var(--sp-8)}
/* LARGURA MÁXIMA -- faltava, e numa tela larga era o que mais desorganizava.
   Sem ela o cartão estica de borda a borda: o rótulo fica grudado na margem
   esquerda, o número logo abaixo, e os outros 1200px de cartão ficam vazios.
   O olho não tem onde se apoiar e a tela parece solta mesmo com tudo no
   lugar. O HUB centraliza o conteúdo em 1500px -- é o mesmo número. */
/* `width:100%` é obrigatório aqui, não é enfeite: o #area é `display:flex`
   (vem de .painel-sessao), e num container flex a margem automática faz o
   filho ENCOLHER até o conteúdo em vez de esticar. Sem o width os blocos
   ficavam do tamanho dos cartões, cada um de uma largura, encostados na
   esquerda -- pior do que antes. */
body[data-modo="erp"] #area > *{width:100%;max-width:1500px;margin-inline:auto}

/* CNPJ nao quebra linha. Com a mascara ele passou a ocupar 126px numa coluna
   que deixava 126px uteis, e quebrava por um pixel -- inchando a linha inteira
   de 44 para 57px. */
.erp-tabela td .mono{white-space:nowrap}

/* Resumo do Financeiro: mais compacto que o cartao do Painel -- "pode ate
   ficar menor" -- e com tom semantico: azul para o lado da receita, vermelho
   para o lado da despesa. Cor so aqui, nunca na grade -- o balao ja basta. */
.erp-cards-compacto{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));margin-bottom:0;
  margin-top:var(--sp-3)}
.erp-cards-compacto .erp-cartao-num{padding:var(--sp-3)}
.erp-cards-compacto .erp-cartao-num .num{font-size:var(--fs-16)}
.erp-cartao-num.tom-receita .num{color:var(--acao)}
.erp-cartao-num.tom-despesa .num{color:var(--erro-cor)}
.erp-cartao-num.tom-alerta .num{color:var(--alerta-cor)}

/* Checkbox de opcao solta na barra de filtro, ao lado dos selects. */
.erp-check{display:flex;align-items:center;gap:6px;font-size:var(--fs-13);
  color:var(--txt-2);white-space:nowrap;cursor:pointer;user-select:none;flex-direction:row}
.erp-check input{margin:0;cursor:pointer}

/* Ambiente de NFS-e e validade dos percentuais de tributo, na tela de
   Empresas. "produção" precisa destoar de "homologação" a olho nu. */
.erp-chip.tom-despesa{background:var(--erro-dim);color:var(--erro-cor);border-color:transparent;font-weight:600}
.erp-aviso-inline{color:var(--alerta);font-size:11px;font-weight:600}
/* Chave de acesso tem 50 dígitos e não cabe em linha nenhuma. */
.erp-dl dd.quebra{word-break:break-all;line-height:1.5}

/* ─── Grade: ordenar e filtrar por coluna ────────────────────────────── */
.erp-tabela th{padding:0}
.th-ordenar{display:flex;align-items:center;gap:4px;width:100%;background:none;border:none;
  padding:var(--sp-2) var(--sp-3);font:inherit;font-size:11px;font-weight:700;letter-spacing:.4px;
  text-transform:uppercase;color:var(--suave);cursor:pointer;text-align:left}
.erp-tabela th.num .th-ordenar,
.erp-tabela-simples th.num .th-ordenar{justify-content:flex-end}
.th-ordenar:hover{color:var(--texto)}
/* A seta só aparece na coluna ordenada -- uma seta em toda coluna vira ruído
   e some justamente a informação de qual está valendo. */
.th-seta{width:0;height:0;opacity:0;flex-shrink:0}
th.ordenada .th-ordenar{color:var(--acao)}
th.ordenada .th-seta{opacity:1;border-left:3.5px solid transparent;border-right:3.5px solid transparent}
th.ordenada[data-dir="asc"] .th-seta{border-bottom:4.5px solid var(--acao)}
th.ordenada[data-dir="desc"] .th-seta{border-top:4.5px solid var(--acao)}
.th-funil{position:absolute;top:50%;right:2px;transform:translateY(-50%);background:none;border:none;
  color:var(--fraco);cursor:pointer;font-size:12px;line-height:1;padding:3px 4px;border-radius:4px;
  opacity:0;transition:opacity var(--t-fast)}
.erp-tabela th{position:relative}
.erp-tabela th:hover .th-funil{opacity:1}
.th-funil:hover{background:var(--pagina);color:var(--texto)}
th.filtrada .th-funil{opacity:1;color:var(--acao)}
th.filtrada .th-ordenar{color:var(--acao)}

.th-painel{position:fixed;z-index:80;background:var(--painel);border:1px solid var(--borda-forte);
  border-radius:10px;box-shadow:var(--sombra2);padding:10px;width:260px;display:flex;
  flex-direction:column;gap:7px}
.th-painel-topo{font-size:12px;font-weight:700}
.th-busca{width:100%;font-size:12.5px;padding:6px 9px}
.th-todos{flex-direction:row;align-items:center;gap:6px;font-size:12.5px;
  padding-bottom:6px;border-bottom:1px solid var(--borda)}
.th-lista{max-height:220px;overflow-y:auto;display:flex;flex-direction:column;gap:2px}
.th-lista label{flex-direction:row;align-items:center;gap:6px;font-size:12.5px;font-weight:400;
  color:var(--texto);padding:2px 1px;cursor:pointer}
.th-lista label:hover{color:var(--acao)}
.th-painel-acoes{display:flex;gap:6px;justify-content:flex-end;padding-top:2px}

/* Coluna de seleção da grade. Estreita e fora do fluxo de leitura -- ela
   serve à ação, não à informação. */
.erp-tabela th.sel, .erp-tabela td.sel{width:34px;text-align:center;padding:0 0 0 var(--sp-2)}
.erp-tabela th.sel input, .erp-tabela td.sel input{cursor:pointer;margin:0}

/* Anexos do documento -- o boleto que vai junto no e-mail da nota. */
.erp-anexos{margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4);background:var(--surface-3);
  border-radius:var(--r-md)}
.erp-anexos-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  font-size:var(--fs-12);font-weight:600;color:var(--txt-2)}
.erp-anexos-lista{margin-top:var(--sp-2);font-size:var(--fs-13)}
.erp-anexos-lista .fraco{font-size:var(--fs-12);color:var(--txt-3)}
.erp-anexo{display:flex;align-items:center;gap:var(--sp-2);padding:var(--sp-1) 0}
.erp-anexo a{color:var(--acao-fg);text-decoration:none;flex:1}

/* ─── Dashboards: landing de cards ───────────────────────────────────── */
.dash-secao{margin-bottom:var(--sp-6)}
.dash-secao-titulo{font-size:var(--fs-11);font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--txt-3);margin:0 0 var(--sp-3)}
.dash-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--sp-4)}
.dash-cartao{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--acao);
  border-radius:var(--r-lg);padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-2);
  cursor:pointer;transition:transform .12s,box-shadow .12s}
.dash-cartao:hover,.dash-cartao:focus-visible{transform:translateY(-2px);box-shadow:var(--shadow-pop);outline:none}
.dash-cartao-icone{width:44px;height:44px;border-radius:var(--r-full);background:var(--acao-dim);
  display:flex;align-items:center;justify-content:center;color:var(--acao);flex-shrink:0}
.dash-cartao-icone svg{width:22px;height:22px}
.dash-cartao h3{font-size:var(--fs-16);margin:var(--sp-1) 0 0}
.dash-cartao p{font-size:var(--fs-13);color:var(--txt-2);line-height:1.5;margin:0;flex:1}
.dash-cartao .abrir{font-size:var(--fs-13);font-weight:600;color:var(--acao)}
.erp-anexo a:hover{text-decoration:underline}

/* Valor de contrato ja combinado para uma vigencia futura. Discreto na grade
   (a coluna e de numero, nao pode competir com o vigente) e explicito no
   modal, onde ha espaco para a frase inteira. */
.erp-agendado{display:block;color:var(--alerta-cor);font-weight:600;font-size:10.5px;
  line-height:1.3;margin-top:2px;white-space:nowrap}
.erp-agendado-forte{display:inline-block;margin-top:4px;color:var(--alerta-cor);
  background:var(--alerta-dim);border-radius:5px;padding:2px 7px;font-size:11.5px;font-weight:600}

/* ─── Renegociação ───────────────────────────────────────────────────────
   O selo vai DENTRO da célula de situação, ao lado do balão. Fica claro que
   é a mesma informação vista de outro ângulo -- e não uma ação solta que
   alguém clica por engano achando que baixa o título. */
.erp-selo-reneg{
  margin-left:6px; cursor:pointer; border:none; font:inherit;
  font-size:10px; padding:2px 7px; line-height:1.4;
}
.erp-selo-reneg:hover{ filter:brightness(.94); }

/* Os dois lados do acordo, um ao lado do outro. É assim que a conta fica
   óbvia: dois totais que têm de bater. Em tela estreita empilha, e a ordem
   (saiu, depois entrou) continua contando a história na vertical. */
/* Duas colunas nao cabem nos 680px do .modal-largo. */
.modal-reneg{ width:min(920px,100%); }
.erp-reneg-par{ display:flex; gap:18px; flex-wrap:wrap; margin:14px 0 6px; }
.erp-reneg-lado{ flex:1 1 320px; min-width:280px; }
.erp-reneg-lado h4{ margin:0 0 2px; font-size:13px; }
.erp-reneg-lado p{ margin:0 0 8px; font-size:11.5px; line-height:1.45; }

/* Esta tabela era a mais apertada da aplicação: 12px de corpo, 10px de
   título e 5px de recuo -- metade do respiro da grade grande, na mesma tela.
   Alinhada com ela e com o HUB. */
.erp-tabela-simples{ width:100%; border-collapse:collapse; font-size:var(--fs-13); }
.erp-tabela-simples th{
  text-align:left; font-size:var(--fs-11); text-transform:uppercase; letter-spacing:.05em;
  font-weight:700; color:var(--txt-3);
  padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--border);
}
.erp-tabela-simples th.num, .erp-tabela-simples td.num{ text-align:right; }
.erp-tabela-simples td{ padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--border); }
.erp-tabela-simples tr.total td{ font-weight:700; border-top:2px solid var(--border-strong); border-bottom:none; }

/* Montar a renegociação: dois lados, o que entra e o que sai. */
.erp-reneg-lista{max-height:260px;overflow:auto;border:1px solid var(--border);border-radius:8px}
.erp-reneg-item{display:grid;grid-template-columns:22px 52px 1fr auto;gap:8px;align-items:center;
  padding:6px 9px;font-size:12px;cursor:pointer;border-bottom:1px solid var(--border)}
.erp-reneg-item:last-child{border-bottom:none}
.erp-reneg-item:hover{background:var(--surface-3)}
.erp-reneg-total{margin:8px 0 0;font-size:12.5px}
.erp-reneg-campos{display:grid;grid-template-columns:1fr 1fr;gap:9px 12px;margin-bottom:12px}
.erp-reneg-campos label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--txt-3)}
.erp-reneg-campos input,.erp-reneg-campos select{
  padding:5px 7px;border:1px solid var(--border);border-radius:var(--r-md);font:inherit;
  font-size:var(--fs-13);background:var(--surface);color:inherit}
.erp-reneg-previa{max-height:300px;overflow:auto}
.erp-reneg-previa .alerta{font-size:11.5px;margin-top:8px;line-height:1.45}

/* Painel: o aviso dos contratos que entram depois da data escolhida.
   Não é erro nem alerta -- é informação que o painel antigo simplesmente
   não dava, e cuja falta escondia contrato inteiro. */
.erp-aviso-painel{
  margin-top:var(--sp-3);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);
  font-size:var(--fs-12);line-height:1.55;
  background:var(--surface-3);border:1px solid var(--border);color:var(--txt-2);
}
.erp-aviso-painel.alerta{background:var(--alerta-dim);border-color:var(--alerta-borda);color:var(--alerta-cor)}
.erp-cartao-num.clicavel{cursor:pointer}
.erp-cartao-num.clicavel:hover{border-color:var(--acao-borda);box-shadow:var(--shadow-pop)}

/* ── PRÓXIMOS MESES ──────────────────────────────────────────────────────
   A variação entre um mês e o outro. Cor aqui não é enfeite: é o que faz o
   degrau saltar aos olhos numa coluna de doze linhas quase iguais. */
.erp-tabela td .pos{color:var(--ok-cor)}
.erp-tabela td .neg{color:var(--erro-cor)}
/* O mês que está sendo olhado lá em cima, marcado na série. */
.erp-tabela tbody tr.destaque td{background:var(--acao-dim)}
.erp-tabela tbody tr.destaque td:first-child{box-shadow:inset 2px 0 0 var(--acao)}
.erp-tabela td .sub{color:var(--txt-3);font-size:var(--fs-11)}

/* O botão de ordenar dentro da tabela dos modais: o `th` já tem o recuo e a
   fonte de 10px; sem zerar o padding do botão o recuo vira o dobro e a linha
   de títulos cresce dois pixels em relação ao corpo. */
.erp-tabela-simples th.ord{padding:0}
.erp-tabela-simples th.ord .th-ordenar{padding:var(--sp-2) var(--sp-3);font-size:var(--fs-11);letter-spacing:.05em}

/* ─── Celular (01/10/2026) ─────────────────────────────────────────────────
   O ERP herdava só a gaveta da Central. Em 375px: tabela de 11 colunas
   rolando de lado, filtro de 200px de largura mínima (cada um uma linha),
   campo de 13px (o iPhone dá zoom ao tocar), botão de 26px e janela com 5
   botões que não cabem. Aqui cada coisa vira o equivalente de celular; acima
   de 900px nada muda. */
@media (max-width: 900px){
  body[data-modo="erp"] #area{padding:12px 12px calc(28px + env(safe-area-inset-bottom))}

  /* Filtros em duas colunas, campo de texto na linha toda. O !important
     vence o max-width inline (130–160px) que as páginas põem nos seletores. */
  .erp-barra{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;align-items:center}
  .erp-barra > *{min-width:0}
  .erp-busca,.erp-barra .erp-busca.fixo{min-width:0;width:100% !important;max-width:none !important;
    height:40px;font-size:16px}
  .erp-barra input.erp-busca:not([type="date"]):not([type="month"]):not([type="number"]){grid-column:1/-1}
  .erp-info{margin-left:0;grid-column:1/-1;white-space:normal}
  .erp-barra .erp-check,.erp-barra label{display:flex;flex-direction:row;align-items:center;gap:8px;
    font-size:var(--fs-13)}
  .erp-barra .erp-check input,.erp-barra label input[type="checkbox"]{width:20px;height:20px;flex:none}

  /* Tabela vira lista de cartões. Rótulo de cada campo vem de data-rotulo,
     posto pelo grade() (erp.js). Ordenar/filtrar por coluna fica para a tela
     larga; no celular quem filtra é a barra acima. */
  .erp-cartao{background:none;border:0;box-shadow:none;overflow:visible;border-radius:0}
  .erp-rolagem{overflow:visible}
  .erp-tabela,.erp-tabela tbody{display:block;width:100%}
  .erp-tabela thead{display:none}
  .erp-tabela tbody tr{display:flex;flex-direction:column;position:relative;
    background:var(--surface);border:1px solid var(--border);border-radius:12px;
    padding:8px 12px;margin-bottom:8px;box-shadow:var(--sombra)}
  .erp-tabela tbody tr:hover{background:var(--surface)}
  .erp-tabela tbody tr:active{border-color:var(--acao)}
  .erp-tabela td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
    padding:3px 0;border:0 !important;text-align:right;white-space:normal;min-width:0;
    font-size:var(--fs-13);
    overflow-wrap:anywhere;width:auto !important}
  .erp-tabela td[data-rotulo]::before{content:attr(data-rotulo);flex:none;max-width:45%;
    text-align:left;color:var(--txt-3);font-size:var(--fs-11);font-weight:700;
    text-transform:uppercase;letter-spacing:.04em}
  .erp-tabela td.cel-vazia{display:none}
  .erp-tabela .num{white-space:nowrap}
  .erp-tabela .mono{white-space:normal}
  /* Botões da linha no rodapé do cartão, largos o bastante para o dedo. */
  .erp-tabela td.cel-acoes,.erp-tabela td.cel-boleto{justify-content:flex-end;flex-wrap:wrap;
    gap:8px;padding-top:9px;margin-top:3px;border-top:1px solid var(--border) !important}
  .erp-tabela td.cel-acoes:empty{display:none}
  .erp-tabela td .btn-mini + .btn-mini{margin-left:0}
  /* Caixa de seleção (Faturar) no canto do cartão. */
  .erp-tabela td.sel{position:absolute;top:8px;right:10px;padding:0}
  .erp-tabela td.sel input{width:22px;height:22px}
  .erp-tabela td.sel + td{padding-right:34px}

  .btn.btn-mini{min-height:36px;padding:6px 12px;font-size:var(--fs-13)}

  /* Ficha rótulo/valor: rótulo em cima, valor embaixo (lado a lado o rótulo
     comprido comia a coluna do valor). */
  .erp-dl{grid-template-columns:1fr}
  .erp-dl dt{background:none;padding:9px 12px 0;white-space:normal}
  .erp-dl dd{padding:2px 12px 10px;border-top:0 !important}

  /* Formulário: uma coluna, sem rolagem própria (quem rola é a janela) e
     com 16px, senão o iPhone dá zoom ao focar o campo. */
  .erp-form{grid-template-columns:1fr;max-height:none;overflow:visible;padding-right:0}
  .erp-campo input,.erp-campo select{height:44px;font-size:16px}
  .erp-campo textarea{font-size:16px}
  .erp-campo-check input{width:22px;height:22px}

  /* Janela sobe de baixo, na largura toda, e rola inteira; o rodapé fica
     grudado embaixo e os botões quebram linha em vez de vazar. */
  .modal-fundo{padding:0;align-items:flex-end}
  .modal{width:100vw !important;max-width:100vw;max-height:94dvh;border-radius:16px 16px 0 0;
    border-left:0;border-right:0;border-bottom:0;overflow-y:auto;
    padding:16px 14px calc(12px + env(safe-area-inset-bottom))}
  .modal-corpo{overflow:visible;flex:none}
  .modal-rodape{flex-wrap:wrap;position:sticky;bottom:calc(-12px - env(safe-area-inset-bottom));
    background:var(--painel);padding:10px 0 calc(12px + env(safe-area-inset-bottom));
    margin-top:auto;border-top:1px solid var(--borda)}
  .modal-rodape .btn{flex:1 1 calc(50% - 8px);min-height:44px}
  .modal-rodape .erp-busca.fixo{flex:1 1 100%;width:100% !important}
  .erp-acoes{flex-wrap:wrap}
  .erp-acoes .btn{flex:1 1 calc(50% - 8px);min-height:40px}
  .erp-reneg-lado{min-width:0;flex-basis:100%}
  .erp-reneg-campos{grid-template-columns:1fr}

  /* Painel de filtro por coluna (se aberto): largura da tela. */
  .th-painel{left:8px !important;right:8px;width:auto}

  /* Gráficos: o desenho tem largura de tela de computador; encolhido em
     375px o texto ficava com 4px. Mantém a escala e rola de lado. */
  .erp-colgraf,.erp-linha{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .erp-colgraf > svg{min-width:640px}
  .erp-linha > svg{min-width:520px}
}