/* ===================================================================
   Finance — folha de estilo
   Gerada a partir do artefato aprovado (artefatos/1-financeiroplus.html).
   O artefato é a especificação: nome de classe, medida e cor saem de lá
   sem tradução. O que existe aqui e não existe lá é só o que o artefato
   não tinha como ter — a moldura de navegador virou a página inteira, e
   o celular ganhou um menu retrátil (o artefato roda dentro de um quadro
   com rolagem horizontal, então nunca precisou de um).
   =================================================================== */

/* Paleta oficial Finance — Dark Fintech */
:root{
  --bg:#0a0a0c; --bg-alt:#101014; --cartao:#15151a; --cartao-hover:#1a1a20;
  --borda:#2a2a32; --gold:#c8a96b; --gold-2:#e2c98a; --gold-dark:#a8894f;
  --texto:#e6e6e6; --mudo:#9a9aab; --ok:#3fbf6f; --erro:#e05252; --info:#5aa2e0;

  /* O FUNDO DA MARCA — os mesmos valores do veyronerp.com.br, lidos da folha de
     estilo dele: grade de 48px em --grid-line, halo dourado no topo, e o V da
     marca a 6% de opacidade encostado à direita.

     O preto dos dois já era quase o mesmo (#050505 lá, #0a0a0c aqui): o que
     tirava o ar de chapado nunca foi a cor, foi a camada por cima. */
  --grid-line:#c8a96b0f;
  --brilho:#e2c98a29;
  --v-forca:.154;

  /* Mais fraco que o --mudo: e a cor do que esta ali mas esta desligado. */
  --apagado:#3a3a44;

  /* A cor da sombra dos paineis que flutuam — menus, popovers, o quadro do
     portal. So a COR e token; a geometria continua em cada regra, porque um
     menu de 246px e o painel de DDI de 330px nao se levantam a mesma altura.
     Preto a 60% e o certo sobre o preto do tema escuro; no claro ele vira
     mancha cinza, e por isso o tema claro redefine este valor. */
  --sombra-cor:rgba(0,0,0,.6);
}
*{box-sizing:border-box}
/* Barra de rolagem no tema do sistema — inclusive as internas (tabelas,
   modais, editor). scrollbar-color cobre Firefox; ::-webkit-scrollbar cobre
   Chrome, Edge e Safari. Como os valores saem dos tokens, ela acompanha
   sozinha a troca entre claro e escuro. */
html{scrollbar-color:var(--gold-dark) var(--bg-alt);scrollbar-width:thin}
*{scrollbar-color:var(--gold-dark) var(--bg-alt);scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-track{background:var(--bg-alt)}
::-webkit-scrollbar-thumb{background:var(--gold-dark);border-radius:99px;border:2px solid var(--bg-alt)}
::-webkit-scrollbar-thumb:hover{background:var(--gold)}
::-webkit-scrollbar-corner{background:var(--bg-alt)}
body{background:var(--bg);color:var(--texto);font-family:"Segoe UI",Roboto,system-ui,sans-serif;margin:0;padding:0;line-height:1.5}

/* No artefato o sistema mora dentro de uma moldura de navegador; aqui ele é
   a página. Só isso muda — o flex lateral+área é o mesmo. */
/* ===== O FUNDO DA MARCA =====
   Duas camadas fixas atrás de tudo: a grade com o halo, e o V.

   `position:fixed` e não absolute: o fundo não rola com a tabela (o site faz
   igual), não entra no cálculo de altura da página e não cria barra de rolagem
   por causa do V, que fica meio para fora à direita.

   `z-index:-1` e não `z-index:1` no conteúdo: negativo pinta atrás de todo o
   conteúdo em fluxo sem criar contexto de empilhamento novo em `.app`. Pôr o
   `.app` num contexto próprio mudaria a conta de quem fica na frente de quem
   nos modais e na lateral grudada, e isso não se paga por um fundo.

   `pointer-events:none` para as camadas não roubarem clique nenhum. */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:
    radial-gradient(at 50% 0, var(--brilho), transparent 70%),
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size:auto, 48px 48px, 48px 48px;
}
/* O V entra como MÁSCARA pintada com o dourado do tema, e não como imagem
   solta. A do site é a versão branca, e branco a 6% sumiria no tema claro —
   assim um arquivo só serve nos dois, e a marca sai na cor da marca. */
body::after{
  content:'';position:fixed;z-index:-1;pointer-events:none;
  right:-70px;top:64px;width:420px;height:319px;
  opacity:var(--v-forca);
  background-color:var(--gold);
  -webkit-mask:url(marca-fundo.png) no-repeat center/contain;
          mask:url(marca-fundo.png) no-repeat center/contain;
}
/* Transparentes de propósito: o fundo colorido é do `body`, e quem pintasse por
   cima taparia as camadas. */
.app{display:flex;min-height:100vh;background:transparent}

/* ===== sidebar ===== */
.lado{width:222px;flex:none;background:#0c0c0f;border-right:1px solid var(--borda);display:flex;flex-direction:column;padding:14px 0 16px;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:60}
.marca{display:block;padding:2px 0 14px;margin:0 14px 10px;border-bottom:1px solid var(--gold-dark);cursor:pointer;text-decoration:none;color:var(--texto)}

/* ===== a marca: assinatura Veyron sobre o nome do produto =====
   Os dois são vetor. A palavra VEYRON é o traçado da logo original (sem o
   ERP), em currentColor — herda a cor do texto e portanto acompanha o tema.
   "Finance" é texto num SVG com textLength, que abre o espaçamento
   entre as letras até fechar exatos 1000 unidades: a mesma largura do viewBox
   da assinatura. É isso que mantém as duas bordas alinhadas em qualquer corpo,
   sem ajuste no olho e sem esticar as letras.

   Trocar .mv{width} redimensiona o conjunto inteiro — assinatura, fio e nome
   acompanham, porque os três são width:100% do mesmo bloco. */
.mv{display:block;width:120px;margin:0 auto;line-height:0;text-decoration:none}
.mv .vy{display:block;width:100%;height:auto}
.mv .fio{display:block;height:1px;width:100%;margin:.40em 0 .30em;
         background:linear-gradient(90deg,rgba(168,137,79,0),var(--gold) 16%,var(--gold-2) 50%,var(--gold) 84%,rgba(168,137,79,0))}
.mv .prod{display:block;width:100%;height:auto;overflow:visible}
.mv .prod text{font-family:"Segoe UI",Roboto,system-ui,sans-serif;font-size:100px;font-weight:300;fill:currentColor}
.mv .prod .mais{font-weight:700;fill:var(--gold)}
.empresa-atual{position:relative;margin:0 14px 12px;padding:8px 26px 8px 10px;text-align:center;font-size:.68rem;color:var(--mudo);background:var(--cartao);border:1px solid var(--borda);border-radius:8px}
.empresa-atual b{display:block;color:var(--gold-2);font-size:.8rem;letter-spacing:.03em}
.empresa-atual .cnpj{display:block;font-size:.66rem;color:var(--mudo);font-variant-numeric:tabular-nums;margin-top:1px}
.btn-trocar{position:absolute;top:50%;right:6px;transform:translateY(-50%);background:none;border:1px solid var(--borda);border-radius:999px;color:var(--gold);font-size:.78rem;width:22px;height:22px;line-height:1;cursor:pointer;padding:0;transition:border-color .2s,background .2s,color .2s}
.btn-trocar:hover{background:var(--cartao-hover);color:var(--gold-2);border-color:var(--gold-dark)}

.troca-busca{width:100%;background:var(--bg-alt);color:var(--texto);border:1px solid var(--borda);border-radius:8px;padding:9px 11px;font-size:.8rem;font-family:inherit;margin:10px 0 8px}
.troca-lista{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto}
.troca-item{position:relative;text-align:left;background:var(--bg-alt);border:1px solid var(--borda);border-radius:8px;padding:9px 12px;cursor:pointer;font-family:inherit;color:var(--texto);width:100%}
.troca-item:hover{border-color:var(--gold-dark);background:var(--cartao-hover)}
.troca-item b{display:block;font-size:.82rem;letter-spacing:.02em}
.troca-item span{display:block;font-size:.68rem;color:var(--mudo);font-variant-numeric:tabular-nums;margin-top:1px}
.troca-item.atual{border-color:var(--gold-dark)}
.troca-item.atual b{color:var(--gold-2)}
.troca-item i{position:absolute;top:9px;right:10px;font-style:normal;font-size:.62rem;color:var(--gold);font-weight:700;display:none}
.troca-item.atual i{display:block}
/* a bolinha "?" que explica a empresa padrão: abre um balão por cima da janela, sem empurrar a lista (R.0) */
.modal-topo:has(.ajuda-q){position:relative}
.ajuda-q{margin-right:auto;margin-left:8px}
.ajuda-q summary{list-style:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--gold-dark);color:var(--gold);font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ajuda-q summary::-webkit-details-marker{display:none}
.ajuda-q[open] summary{background:var(--gold);color:var(--bg)}
.ajuda-q p{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:5;margin:0;background:var(--cartao);border:1px solid var(--gold-dark);border-radius:10px;padding:10px 12px;font-size:.76rem;line-height:1.5;color:var(--texto);box-shadow:0 10px 24px rgba(0,0,0,.35)}
@media (max-width:640px){.ajuda-q summary{width:44px;height:44px}.btn-padrao{min-height:44px;padding:0 12px}}
/* o item é um <div> com formulários dentro (trocar / tornar padrão), então o
   botão que leva à empresa precisa parecer o próprio item */
.troca-ir{display:block;width:100%;text-align:left;background:none;border:0;padding:0;color:inherit;font-family:inherit;cursor:pointer}
.troca-ir[disabled]{cursor:default}
.troca-item form{margin:0}

.item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 18px;font-size:.83rem;color:var(--mudo);background:none;border:0;border-left:3px solid transparent;cursor:pointer;font-family:inherit;text-align:left;user-select:none;text-decoration:none}
.item:hover{background:var(--cartao-hover);color:var(--texto)}
.item.ativo{background:var(--cartao-hover);color:var(--gold-2);border-left-color:var(--gold)}
.item .ic{width:18px;text-align:center;flex:none;opacity:.9}

/* ===== Ícones (Lucide, traço fino) =====
   SVG na página em vez de imagem, para o traço herdar currentColor: o ícone
   acende em dourado junto com o rótulo no item ativo e acompanha o tema claro
   sem um segundo arquivo. Medida em `em` para acompanhar o corpo do texto ao
   lado — o mesmo .ico serve num botão miúdo e num item de menu.
   O botão de tema segue ☾/☀ em texto: ele troca de símbolo conforme o estado,
   e desenho fixo perderia essa leitura. Ver src/icones.php. */
.ico{width:1.05em;height:1.05em;vertical-align:-.17em;flex:none;display:inline-block}
.item .ic .ico{width:18px;height:18px;vertical-align:0;display:block;margin:0 auto}
.perfil-menu a{display:flex;align-items:center;gap:8px}
.item .seta{margin-left:auto;font-size:.6rem;opacity:.6;transition:transform .15s}
.grupo.aberto .item .seta{transform:rotate(90deg)}
.filhos{display:none;background:var(--bg);padding:4px 0}
.grupo.aberto .filhos{display:block}
.filhos a{display:block;color:var(--mudo);text-decoration:none;font-size:.78rem;padding:7px 18px 7px 46px;cursor:pointer}
.filhos a:hover{color:var(--gold-2);background:var(--cartao-hover)}
.filhos a.on{color:var(--gold-2)}

/* ===== área ===== */
.area{flex:1;min-width:0;display:flex;flex-direction:column}
/* `.area > .topo`, e não `.topo` solto: "topo" é uma palavra que já foi usada
   três vezes nesta base para dizer "a primeira linha desta caixa" — o cabeçalho
   do cartão de conta (`.conta-c .topo`, com a alça de arrastar dentro) e o do
   item de conflito do ERP (`.conflito-item .topo`). Enquanto esta regra valeu
   para qualquer `.topo`, aqueles dois herdavam dela o degradê, a linha dourada
   embaixo e — o que estragava de verdade — `position:sticky` com `z-index:65`.
   Cada cabeçalho de cartão virava um elemento posicionado a 65 no contexto da
   RAIZ, acima do menu lateral (60) e acima da linha do título presa (55) e de
   tudo que abre dentro dela: as alças de arrastar apareciam por cima do menu, e
   os cabeçalhos dos cartões, por cima do calendário de período. O `>` é de
   propósito — a barra do sistema é filha direta de `.area`, e nada mais é. */
.area > .topo{background:linear-gradient(180deg,#121216,#0c0c0f);border-bottom:1px solid var(--gold-dark);display:flex;align-items:center;gap:14px;padding:9px 18px;font-size:.8rem;position:sticky;top:0;z-index:65}
.area > .topo .titulo{color:var(--mudo)}
.area > .topo .dir{margin-left:auto;display:flex;gap:10px;align-items:center}
.perfil{position:relative}
.area > .topo .chip{display:flex;align-items:center;gap:8px;background:var(--cartao);border:1px solid var(--borda);border-radius:99px;padding:3px 12px 3px 4px;font-size:.75rem;cursor:pointer;font-family:inherit;color:var(--texto)}
.area > .topo .chip:hover{border-color:var(--gold-dark)}
.area > .topo .avatar{width:24px;height:24px;border-radius:50%;background:var(--borda);color:var(--texto);display:inline-flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700}
.area > .topo .lua{background:none;border:1px solid var(--borda);border-radius:8px;color:var(--texto);padding:3px 9px;cursor:pointer;font-family:inherit}
.perfil-menu{display:none;position:absolute;right:0;top:calc(100% + 8px);z-index:80;background:var(--cartao);border:1px solid var(--borda);border-radius:10px;padding:8px;min-width:210px;box-shadow:0 10px 28px var(--sombra-cor)}
.perfil-menu.on{display:block}
.perfil-menu .quem{padding:6px 10px 8px;border-bottom:1px solid var(--borda);margin-bottom:6px}
.perfil-menu .quem b{display:block;font-size:.8rem;color:var(--gold-2)}
.perfil-menu .quem span{font-size:.68rem;color:var(--mudo)}
.perfil-menu .rot{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mudo);padding:5px 10px 2px}
.perfil-menu a{display:block;padding:7px 10px;font-size:.78rem;color:var(--texto);text-decoration:none;border-radius:7px;cursor:pointer}
.perfil-menu a:hover{background:var(--cartao-hover);color:var(--gold-2)}
.perfil-menu .divi{border-top:1px solid var(--borda);margin:6px 0}
.painel{padding:18px;flex:1}
.pagina{display:none}
.pagina.on{display:block}

#flash{display:none;margin:0 0 14px;padding:10px 14px;border-radius:8px;font-size:.8rem;background:rgba(63,191,111,.12);border:1px solid rgba(63,191,111,.5);color:var(--ok)}
#flash.on{display:block}
#flash.err{background:rgba(224,82,82,.12);border-color:rgba(224,82,82,.5);color:var(--erro)}

h2{font-size:1.15rem;margin:0;color:var(--gold-2)}
h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mudo);margin:0 0 10px}
.linha-titulo{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:12px;flex-wrap:wrap}

/* ===== O cabeçalho da tela fica parado =====
   Preso logo abaixo do topo do sistema, cuja altura o app.js mede e escreve em
   `--h-topo`. Um 48px chutado aqui erraria no celular, onde a barra é mais
   baixa, e erraria de novo no dia em que o chip do usuário mudasse de altura —
   o valor da folha é só a rede para o instante antes de o script rodar.

   Quem recebe a classe é o app.js (TituloPreso): é a PRIMEIRA linha de título
   da tela, e nunca uma que more dentro de uma carta. Dashboard e Contratos
   usam a mesma classe em títulos de bloco, e prender todos empilharia barras
   opacas umas sobre as outras conforme a página rolasse.

   As margens negativas fazem duas coisas: o fundo cobre a largura inteira do
   painel (que tem 18px de recheio de cada lado) e a barra encosta no topo do
   sistema. Sem a de cima sobraria uma fresta de 18px, e por ela apareceriam as
   linhas da tabela passando.

   Fundo com desfoque, e não bloco chapado: é o mesmo tratamento que a ficha do
   cliente já fazia à mão. A declaração sólida antes dela é a rede — navegador
   sem `color-mix` fica com fundo cheio, que é feio mas legível; sem ela ficaria
   SEM fundo, e aí as linhas passam por dentro do título.

   Abaixo de 900px não vale: ali a linha do título quebra em duas ou três
   alturas de botão e presa comeria metade da tela. É o mesmo corte que solta a
   lista presa. */
@media (min-width:901px){
  .linha-titulo.presa{
    position:sticky;top:var(--h-topo,48px);z-index:55;
    margin:-18px -18px 14px;padding:18px 18px 10px;
    background:var(--bg);
    background:color-mix(in srgb, var(--bg) 78%, transparent);
    -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  /* O recado de sucesso ou erro fica ACIMA da barra presa e sobe ao rolar, o
     que está certo — é aviso de momento. Mas ele empurra a barra para baixo, e
     aí a margem negativa dela comeria o espaço entre os dois: os 18px voltam. */
  .painel-preso #flash.on{margin-bottom:32px}
}
.carta{background:var(--cartao);border:1px solid var(--borda);border-radius:10px;padding:14px 16px;margin-bottom:14px}
.muted{color:var(--mudo)}
.num{font-variant-numeric:tabular-nums}
/* ===================================================================
   Botoes - o desenho do veyronerp.com.br (.btn-gold e .btn-outline da
   folha de estilo do site) trazido para ca. So o visual mudou: os nomes
   de classe sao os mesmos de antes, entao nenhum PHP precisou ser tocado.

   Os degrades sao TOKEN, e nao valor fixo, porque no tema claro o papel
   dos tons se inverte: la o --gold-dark (#c2ac7d) e o tom MAIS claro.
   Um degrade terminando nele, com o texto branco que o tema claro poe no
   .btn.pri (regra la no fim do arquivo), ficaria ilegivel. Por isso cada
   tema declara o seu proprio degrade, todo ele fechado o bastante.
   =================================================================== */
:root{
  --btn-grad:linear-gradient(135deg,#e2c98a 0%,#c8a96b 50%,#a8894f 100%);
  --btn-tinta:#14130f;
  --btn-sombra:0 10px 40px -10px rgba(200,169,107,.45);
  --btn-sombra-hover:0 14px 44px -10px rgba(200,169,107,.60);
  --btn-brilho:rgba(255,255,255,.45);
  --btn-tinte:rgba(200,169,107,.10);
  --btn-receita:linear-gradient(135deg,#5fd18c 0%,#3fbf6f 50%,#2c9a55 100%);
  --btn-despesa:linear-gradient(135deg,#c94b4b 0%,#b83c3c 50%,#9a2f2f 100%);
}
body[data-tema="claro"]{
  --btn-grad:linear-gradient(135deg,#8a6a2f 0%,#7a5c26 50%,#5f4820 100%);
  --btn-tinta:#faf8f3;
  --btn-sombra:0 10px 34px -12px rgba(122,92,38,.50);
  --btn-sombra-hover:0 14px 40px -12px rgba(122,92,38,.62);
  --btn-brilho:rgba(255,255,255,.30);
  --btn-tinte:rgba(122,92,38,.08);
  --btn-receita:linear-gradient(135deg,#1a7f42 0%,#146334 50%,#0d4a26 100%);
  --btn-despesa:linear-gradient(135deg,#b83326 0%,#93291e 50%,#712017 100%);
}
/* inline-flex no lugar de inline-block: e o que alinha icone com texto e o
   que faz o centro valer nos lugares que antes pediam text-align:center
   (.per-acoes .btn e .pb-acoes .btn seguem centrados, agora pelo
   justify-content). O vertical-align:middle mantem o botao assentado na
   mesma linha de base dentro das celulas de tabela. */
/* O flex-shrink:0 nao e detalhe: o overflow:hidden do .btn.pri (que existe
   para recortar o brilho) faz o item de flex perder o min-width:auto. Sem
   trava, "Salvar" dentro de um .btn-row apertado encolhia de 66 px para 32 px
   e o texto sumia. Travado, a fileira quebra a linha em vez de espremer. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;vertical-align:middle;flex-shrink:0;
     background:var(--cartao-hover);border:1px solid var(--borda);color:var(--texto);
     border-radius:999px;padding:7px 15px;font-size:.78rem;font-weight:500;cursor:pointer;
     text-decoration:none;font-family:inherit;
     transition:border-color .2s,background .2s,color .2s}
/* Secundario = .btn-outline do site: quem responde e a borda, nao o fundo.
   O :not(.pri) evita que este fundo dispute com o degrade do primario. */
.btn:not(.pri):hover{border-color:var(--gold);background:var(--btn-tinte)}
/* Primario = .btn-gold do site: degrade 135 graus, sombra dourada, e o
   botao sobe 1 px no hover. */
.btn.pri{background:var(--btn-grad);border-color:transparent;color:var(--btn-tinta);font-weight:600;
         box-shadow:var(--btn-sombra);position:relative;overflow:hidden;
         transition:transform .2s,box-shadow .2s,filter .2s}
.btn.pri:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:var(--btn-sombra-hover)}
/* O brilho que atravessa o botao - a faixa diagonal do site, mesma medida
   e mesmo tempo (0,6 s indo de -75% a 125%). */
.btn.pri::after{content:'';position:absolute;top:0;left:-75%;width:50%;height:100%;
                background:linear-gradient(105deg,transparent,var(--btn-brilho),transparent);
                transform:skew(-20deg);transition:left .6s;pointer-events:none}
.btn.pri:hover::after{left:125%}
.btn.mini{padding:3px 12px;font-size:.7rem}
.btn.perigo{color:var(--erro);border-color:rgba(224,82,82,.45)}
.btn.perigo:hover{border-color:var(--erro);background:rgba(224,82,82,.10)}
/* Sem pointer-events:none de proposito: `disabled` nao faz nada num <a>, e
   desligar o ponteiro tiraria o clique de um link que hoje funciona. */
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn[disabled]:hover{transform:none;filter:none;box-shadow:none;border-color:var(--borda)}
.btn.pri[disabled]::after{display:none}
.badge{font-size:.64rem;padding:2px 8px;border-radius:99px;font-weight:600;border:1px solid var(--borda);color:var(--mudo)}
.badge.ok{background:rgba(63,191,111,.15);color:var(--ok);border-color:transparent}
.badge.err{background:rgba(224,82,82,.15);color:var(--erro);border-color:transparent}
/* "A receber" não pode usar o verde do "Pago": no relance os dois viravam a
   mesma coisa e parecia que o dinheiro já tinha entrado. Azul claro porque no
   fundo escuro o azul médio do --info fica apagado — a mesma queixa que o link
   azul das tabelas já tinha gerado. */
.badge.aguarda{background:rgba(122,184,240,.15);color:#7ab8f0;border-color:transparent}
body[data-tema="claro"] .badge.aguarda{background:rgba(47,110,168,.12);color:var(--info)}
/* "Em cancelamento" é um estado de passagem, e a cor diz isso: âmbar, entre o
   azul do que está para receber e o cinza do que já saiu de cena. Não pode ser
   vermelho — nada deu errado; o banco só ainda não terminou. */
.badge.cancelando{background:rgba(214,158,46,.16);color:#d69e2e;border-color:transparent}
body[data-tema="claro"] .badge.cancelando{background:rgba(155,110,20,.12);color:#8a6212}

/* Logo da empresa em Meus dados: o quadro à esquerda e as opções à direita.
   O quadro tem fundo claro fixo — a logo é convertida sobre branco na entrada,
   e mostrá-la sobre o cinza do tema faria a moldura dela aparecer. */
.meus-logo{display:flex;gap:14px;align-items:flex-start;flex-wrap:wrap;margin-top:5px}
.meus-logo-quadro{width:132px;min-height:74px;flex:none;border:1px solid var(--borda);
  border-radius:9px;background:#fff;display:grid;place-items:center;padding:7px;overflow:hidden}
.meus-logo-quadro img{max-width:100%;max-height:96px;display:block}
.meus-logo-lado{flex:1 1 220px;min-width:0;display:flex;flex-direction:column;gap:7px}
.meus-logo-op{display:flex;align-items:center;gap:7px;font-size:.72rem;color:var(--mudo)}
.meus-logo-op input{width:auto;margin:0}
.ficha-leitura .meus-logo-lado input[type="file"]{display:none}
.ficha-leitura .meus-logo-op{opacity:.65}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:14px}
.kpi{background:var(--cartao);border:1px solid var(--borda);border-radius:10px;padding:13px 16px;cursor:pointer;text-decoration:none;display:block}
.kpi:hover{border-color:var(--gold-dark)}
.kpi .r{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;color:var(--mudo)}
.kpi .v{font-size:1.45rem;font-weight:700;margin:3px 0 2px}
.kpi .x{font-size:.7rem;color:var(--mudo)}
.kpi.verde{background:rgba(63,191,111,.10);border-color:rgba(63,191,111,.45)}
.kpi.verde .r,.kpi.verde .v{color:var(--ok)}
.kpi.vermelho{background:rgba(224,82,82,.10);border-color:rgba(224,82,82,.45)}
.kpi.vermelho .r,.kpi.vermelho .v{color:var(--erro)}

/* Fluxo e calendário são a mesma faixa e terminam juntos. Quem estica é o
   GRÁFICO: o calendário tem altura de mês (5 ou 6 semanas), que não se
   negocia, e o resumo de previsão/realizado fica colado no rodapé do cartão.
   Com `align-items:start` os dois começavam juntos e acabavam com um degrau
   de uns 90px entre eles. */
.grade-2{display:grid;grid-template-columns:3fr 2fr;gap:14px;align-items:stretch}
.grade-2>.carta{display:flex;flex-direction:column}
/* O canvas cresce, e o desenharFluxo() lê essa altura em vez de fixar 150.
   `flex-basis:0` e NÃO `auto`: o atributo height do canvas é o tamanho do
   bitmap, e com basis `auto` ele entra no cálculo do flex como se fosse
   conteúdo — desenhar a 219 engordava o cartão, que na medição seguinte dava
   uma altura ainda maior. Catraca que só subia, e o cartão nunca voltava
   quando o calendário ao lado encolhia. Com basis 0 a altura vem só do que
   sobra na faixa, e o min-height segura o piso. */
.grade-2 #fluxo{flex:1 1 0;min-height:150px}
.grade-2 #fluxo-vazio{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center}
.grade-2 #fluxo-leg,.grade-2 .resumo-bloco{flex:none}
.vazio{text-align:center;padding:26px 10px;color:var(--mudo);font-size:.85rem}
.vazio .m{display:block;font-size:1.6rem;color:var(--gold-dark);margin-bottom:6px}
.legenda{display:flex;gap:16px;font-size:.68rem;color:var(--mudo);margin-top:8px;flex-wrap:wrap}
.legenda i{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:5px;vertical-align:-1px}
/* As chaves da legenda do calendário: o ponto vazado do dia quitado e o número
   vermelho do vencido, desenhados aqui igual aparecem lá em cima. */
.legenda i.vazado{background:transparent;box-shadow:inset 0 0 0 1.5px var(--mudo)}
.legenda b.num-atraso{color:var(--erro);font-weight:700;margin-right:5px}
.resumo-mes{display:grid;grid-template-columns:repeat(3,1fr);margin-top:12px;border-top:1px solid var(--borda);padding-top:10px;font-size:.78rem;color:var(--mudo)}
.resumo-mes b{display:block;font-size:.95rem}

/* Previsão em cima, realizado embaixo — a leitura vertical de cada coluna
   mostra na hora quanto do previsto virou dinheiro. */
.resumo-bloco{margin-top:12px;border-top:1px solid var(--borda);padding-top:10px}
.resumo-linha{display:grid;grid-template-columns:78px repeat(3,1fr);align-items:baseline;gap:8px;font-size:.76rem;color:var(--mudo)}
.resumo-linha + .resumo-linha{margin-top:9px;padding-top:9px;border-top:1px dashed var(--borda)}
.resumo-linha b{display:block;font-size:.95rem}
.resumo-linha .rot{font-size:.6rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;color:var(--mudo)}
.resumo-linha.real .rot{color:var(--gold-2)}
.resumo-linha.real b{font-size:1rem}

.saldo-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
.saldo-item{background:var(--bg-alt);border:1px solid var(--borda);border-radius:9px;padding:11px 13px}
.saldo-item .r{display:block;font-size:.62rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mudo)}
.saldo-item b{display:block;font-size:1.25rem;margin:3px 0 2px;color:var(--gold-2)}
.saldo-item .x{display:block;font-size:.66rem;color:var(--mudo);line-height:1.35}
#saldo-conta{background:var(--cartao);color:var(--texto);border:1px solid var(--borda);border-radius:8px;padding:6px 10px;font-size:.76rem;font-family:inherit}
#saldo-conta:hover{border-color:var(--gold-dark)}

.calendario{width:100%;border-collapse:collapse;font-size:.72rem;text-align:center}
/* O recheio é apertado de propósito: são 6 semanas, então cada pixel aqui
   vale 6 na altura do cartão — e é essa altura que o fluxo de caixa ao lado
   tem de alcançar. O dia continua com seus 23px, que é a área de clique. */
.calendario th{color:var(--mudo);font-weight:600;padding:2px 0}
.calendario td{padding:3px 0 2px;color:var(--texto);vertical-align:top}
/* Todo dia usa a mesma caixa de 23px, tenha ou não lançamento: assim a
   linha do dia de hoje não fica mais alta que as outras. A regra antiga
   mirava "td.hoje span", que também acertava o span dos pontinhos — e eles
   ganhavam a bola dourada do dia de hoje. */
.calendario td .d{display:inline-flex;width:23px;height:23px;align-items:center;justify-content:center;border-radius:50%}
.calendario td.hoje .d{background:var(--gold);color:var(--btn-tinta);font-weight:700}
/* Altura fixa: é ela que dá corpo ao dia sem lançamento e mantém todas as
   semanas na mesma altura. 8px para um ponto de 6px — o suficiente para ele
   não encostar no número de baixo. */
.calendario .pts{display:block;height:8px;line-height:8px}
.calendario .pts i{display:inline-block;width:6px;height:6px;border-radius:50%;margin:0 1px;vertical-align:middle}

/* O dia virou link — antes era o único número desta tela que não levava a
   lugar nenhum. Herda a cor em vez de pegar o dourado de `.dados td a`, porque
   aqui quem dá o significado é o ponto embaixo, não a cor do número. */
.calendario a.cal-dia{display:block;color:inherit;text-decoration:none;border-radius:6px}
.calendario a.cal-dia:hover .d{background:var(--cartao-hover)}
.calendario td.hoje a.cal-dia:hover .d{background:var(--gold-2)}
.calendario a.cal-dia:focus-visible{outline:2px solid var(--gold);outline-offset:1px}

/* Venceu e não foi pago: o próprio NÚMERO fica vermelho — o pontinho embaixo
   diz quanto, a cor diz que passou da hora. O anel de antes desenhava por cima
   do dia e saiu. Fora o dia de hoje, cuja bola dourada já pede a tinta escura. */
.calendario td.atraso .d{color:var(--erro);font-weight:700}
.calendario td.atraso.hoje .d{color:var(--btn-tinta)}

table.dados{width:100%;border-collapse:collapse;font-size:.78rem}
.dados th{color:var(--mudo);font-size:.66rem;text-transform:uppercase;letter-spacing:.05em;text-align:left;padding:6px 8px;border-bottom:1px solid var(--borda)}
.dados td{padding:8px;border-bottom:1px solid #1e1e25}
.dados td:last-child,.dados th:last-child{text-align:right}
code{color:var(--gold);font-size:.74rem}
.copiar{background:none;border:1px solid var(--borda);border-radius:5px;color:var(--mudo);font-size:.66rem;padding:1px 6px;cursor:pointer;margin-left:4px;font-family:inherit}
.copiar:hover{color:var(--gold-2)}

.abas{display:inline-flex;border:1px solid var(--borda);border-radius:8px;overflow:hidden}
.abas a{padding:5px 15px;font-size:.74rem;color:var(--mudo);cursor:pointer;background:var(--cartao);text-decoration:none}
.abas a:hover{color:var(--texto)}
.abas a.on{background:var(--gold);color:var(--btn-tinta);font-weight:700}
/* Receita e despesa carregam as cores do dashboard: verde entra, vermelho sai.
   "Todos" fica no dourado da casa, que é a cor do neutro. */
.abas a.on[data-aba="receita"]{background:var(--ok);color:var(--btn-tinta)}
.abas a.on[data-aba="despesa"]{background:var(--erro);color:var(--btn-tinta)}
.filhos a.on[data-aba="receita"]{color:var(--ok)}
.filhos a.on[data-aba="despesa"]{color:var(--erro)}
.btn.pri.receita{background:var(--btn-receita);border-color:transparent;color:var(--btn-tinta)}
.btn.pri.despesa{background:var(--btn-despesa);border-color:transparent;color:#fff}

/* seletor receita/despesa do lançamento — mesmas cores dos KPIs do dashboard */
.tipo-seg{display:flex;gap:8px;margin-bottom:8px}
.tipo-btn{flex:1;padding:9px 12px;border:1px solid var(--borda);border-radius:8px;background:var(--bg-alt);color:var(--mudo);font-size:.78rem;font-weight:600;font-family:inherit;cursor:pointer}
.tipo-btn:hover{color:var(--texto)}
.tipo-btn.on[data-tipo="receita"]{background:rgba(63,191,111,.14);border-color:rgba(63,191,111,.55);color:var(--ok)}
.tipo-btn.on[data-tipo="despesa"]{background:rgba(224,82,82,.14);border-color:rgba(224,82,82,.55);color:var(--erro)}
.tipo-btn.travado{cursor:default}
.tipo-seg-rot{font-size:.7rem;color:var(--mudo);margin:0 0 12px}

/* ===== Repetir por: unidade, quantidade e simulação =====
   Os três na MESMA linha. A lista diz com que frequência, a caixa diz quantas
   vezes e o botão mostra o resultado — são um pensamento só, e empilhá-los
   faria parecer três decisões separadas. A caixa é estreita porque o maior
   número que ela aceita tem dois dígitos; larga, prometeria mais do que o
   servidor grava. */
.rep-linha{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.rep-linha select{flex:0 1 132px}
.rep-linha input[type="number"]{width:88px;text-align:center;font-variant-numeric:tabular-nums}
/* A nota diz o que vai acontecer antes de acontecer. Mesmo tom do texto de
   apoio do tipo, porque cumpre o mesmo papel: explicar sem disputar atenção
   com o campo. */
.rep-nota{font-size:.7rem;color:var(--mudo);margin:6px 0 0;line-height:1.45}

/* A simulação: o que vai ser gravado, linha por linha, antes de gravar. Vive
   dentro do modal e não numa janela nova — quem está conferindo ainda está
   preenchendo, e tirá-lo do formulário para mostrar o resultado do formulário
   seria trocar de assunto no meio da frase.
   Altura travada com rolagem própria: noventa repetições diárias não podem
   empurrar o botão "Criar lançamento" para fora da tela. */
.sim{margin-top:10px;border:1px solid var(--borda);border-radius:9px;background:var(--bg-alt);overflow:hidden}
.sim[hidden]{display:none}
.sim-topo{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;padding:9px 12px;border-bottom:1px solid var(--borda)}
.sim-topo b{font-size:.8rem;color:var(--gold-2);font-variant-numeric:tabular-nums}
.sim-topo .sep{color:var(--borda)}
.sim-topo span{font-size:.72rem;color:var(--mudo);font-variant-numeric:tabular-nums}
.sim-lista{max-height:186px;overflow:auto;padding:4px 0}
.sim-item{display:flex;align-items:center;gap:10px;padding:4px 12px;font-size:.74rem}
.sim-item .i{width:22px;color:var(--mudo);text-align:right;font-variant-numeric:tabular-nums}
.sim-item .d{width:96px;font-variant-numeric:tabular-nums}
.sim-item .s{color:var(--mudo);font-size:.68rem}
/* Dois motivos diferentes para olhar duas vezes, duas cores: azul para a data
   que caiu no fim de semana, dourado para o dia que não coube no mês. */
.sim-item.fds .s{color:var(--info)}
.sim-item.ajust .s{color:var(--gold)}
.sim-rod{padding:8px 12px;border-top:1px solid var(--borda);font-size:.7rem;color:var(--mudo)}
.sim-rod b{color:var(--gold)}

/* ===== seletor de mês do dashboard =====
   Feito à mão em vez do calendário nativo: o do navegador é UI dele, não
   aceita o dourado nem o fundo do painel. Aqui o ícone herda a cor do texto
   (currentColor) e o popover usa os mesmos tokens do resto da tela. */
.mes-campo{position:relative}
.mes-botao{display:flex;align-items:center;gap:9px;background:var(--cartao);color:var(--texto);border:1px solid var(--borda);border-radius:8px;padding:7px 11px;font-size:.78rem;font-family:inherit;cursor:pointer}
.mes-botao:hover{border-color:var(--gold-dark)}
.mes-ico{flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;opacity:.85}
.mes-pop{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:75;width:246px;background:var(--cartao);border:1px solid var(--borda);border-radius:10px;padding:10px;box-shadow:0 12px 30px var(--sombra-cor)}
.mes-pop.on{display:block}
/* sobe quando nao cabe embaixo: dentro do modal um popup que passa do fim
   da caixa cria barra de rolagem. Quem decide e posicionarPop(), no app.js. */
.mes-pop.acima{top:auto;bottom:calc(100% + 6px)}
.mes-pop-topo{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
.mes-pop-topo b{color:var(--gold-2);font-size:.86rem;font-variant-numeric:tabular-nums}
.mes-pop-topo button{background:var(--bg-alt);border:1px solid var(--borda);border-radius:7px;color:var(--texto);width:26px;height:24px;font-size:.85rem;line-height:1;cursor:pointer;font-family:inherit}
.mes-pop-topo button:hover{border-color:var(--gold-dark);color:var(--gold-2)}
.mes-grade{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.mes-op{background:var(--bg-alt);border:1px solid var(--borda);border-radius:7px;color:var(--mudo);padding:7px 0;font-size:.72rem;font-family:inherit;cursor:pointer}
.mes-op:hover{border-color:var(--gold-dark);color:var(--gold-2)}
.mes-op.atual{border-color:var(--gold-dark);color:var(--gold-2)}
.mes-op.on{background:var(--gold);border-color:var(--gold);color:var(--btn-tinta);font-weight:700}
.mes-hoje{width:100%;margin-top:9px;background:none;border:0;border-top:1px solid var(--borda);padding:8px 0 2px;color:var(--mudo);font-size:.7rem;font-family:inherit;cursor:pointer}
.mes-hoje:hover{color:var(--gold-2)}
.mes-periodo{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;margin-top:6px;background:var(--bg-alt);border:1px solid var(--borda);border-radius:7px;padding:8px 0;color:var(--mudo);font-size:.72rem;font-family:inherit;cursor:pointer}
.mes-periodo:hover{border-color:var(--gold-dark);color:var(--gold-2)}
.mes-periodo.on{border-color:var(--gold-dark);color:var(--gold-2)}

/* ===== período personalizado: dois calendários de dias, lado a lado =====
   Abre à frente do seletor de mês — início no da esquerda, fim no da direita.
   Mesmo enquadramento do seletor de mês: encostado na direita do campo,
   abrindo para a esquerda — só que mais largo, por causa dos dois meses.

   O `right:0` daqui é o ponto de partida, não a palavra final: onde o campo
   fica colado à esquerda da tela (Dashboard, Contas, Conciliação), 430px para
   a esquerda entrariam na coluna do menu lateral, e `alinharPop` no app.js
   vira o painel para o outro lado escrevendo `left` direto no elemento. Mexer
   nesta largura é mexer naquela conta. */
.per-pop{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:76;width:430px;background:var(--cartao);border:1px solid var(--borda);border-radius:10px;padding:12px;box-shadow:0 12px 30px var(--sombra-cor)}
.per-pop.on{display:block}
.per-guia{margin:0 0 10px;font-size:.7rem;color:var(--mudo);text-align:center}
.per-dupla{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.per-cal{background:var(--bg-alt);border:1px solid var(--borda);border-radius:8px;padding:8px}
.per-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.per-nav b{color:var(--gold-2);font-size:.72rem}
.per-nav button{background:var(--cartao);border:1px solid var(--borda);border-radius:6px;color:var(--texto);width:22px;height:20px;font-size:.75rem;line-height:1;cursor:pointer;font-family:inherit}
.per-nav button:hover{border-color:var(--gold-dark);color:var(--gold-2)}
.per-grade td{padding:0;cursor:default}
.per-grade td b{display:inline-flex;align-items:center;justify-content:center;width:22px;height:21px;border-radius:6px;font-weight:400;cursor:pointer}
.per-grade td b:hover{background:var(--cartao-hover);color:var(--gold-2)}
.per-grade td b.ini,.per-grade td b.fim{background:var(--gold);color:var(--btn-tinta);font-weight:700}
.per-grade td b.dentro{background:rgba(200,169,107,.16);color:var(--gold-2)}
.per-grade td b.bloq{opacity:.28;cursor:not-allowed}
.per-grade td b.bloq:hover{background:none;color:var(--texto)}
/* O rodapé de cada calendário deixou de ser um aviso do que foi clicado e
   passou a ser o campo onde a data também se digita — por isso ele é um
   <label> com um <input> dentro, e não mais um texto. */
.per-escolha{display:block;margin-top:7px;padding-top:6px;border-top:1px solid var(--borda);font-size:.66rem;color:var(--mudo);text-align:center}
/* Fundo `--bg` e não `--bg-alt`, que é o do próprio .per-cal: um campo da cor
   exata da caixa em que está não parece campo, e no tema claro os dois são
   #ffffff. */
.per-dt{width:100%;margin-top:4px;padding:5px 6px;text-align:center;
        background:var(--bg);border:1px solid var(--borda);border-radius:6px;
        color:var(--texto);font-family:inherit;font-size:.72rem;
        font-variant-numeric:tabular-nums}
.per-dt:focus{outline:none;border-color:var(--gold-dark)}
.per-dt::placeholder{color:var(--mudo);opacity:.7}
/* Sobra da marcação anterior, em que o rodapé era um texto com a data dentro de
   um <b>. Fica porque o CSS sobe antes do PHP: enquanto o servidor tiver o
   `<div>Início: <b>—</b></div>`, é esta regra que dá contraste e alinhamento à
   data. Com a marcação nova ela não casa com nada e não custa nada. */
.per-escolha b{color:var(--texto);font-variant-numeric:tabular-nums}
/* data pela metade ou impossível: fica à vista, marcada, em vez de sumir */
.per-dt.ruim{border-color:var(--erro)}
.per-acoes{display:flex;gap:7px;margin-top:11px}
.per-acoes .btn{flex:1;text-align:center}
.calendario td.faixa span,.calendario td.faixa{color:var(--gold-2)}
.calendario td.faixa{background:rgba(200,169,107,.09);border-radius:5px}

/* ===== campos de data e de mês no tema =====
   O seletor nativo do navegador é interface dele: não aceita o dourado nem
   o fundo do painel (era a caixa branca que aparecia no filtro de mês).
   Estes reaproveitam o mesmo desenho do seletor do dashboard. */
.data-campo{position:relative;display:inline-block}
.data-botao{width:100%;justify-content:space-between}
.dia-pop{width:250px}
.dia-grade{width:100%;border-collapse:collapse;font-size:.72rem;text-align:center}
.dia-grade th{color:var(--mudo);font-weight:600;padding:3px 0;font-size:.64rem}
.dia-grade td{padding:1px 0}
.dia-grade td b{display:inline-flex;align-items:center;justify-content:center;width:26px;height:24px;
                border-radius:7px;font-weight:400;cursor:pointer}
.dia-grade td b:hover{background:var(--cartao-hover);color:var(--gold-2)}
.dia-grade td b.hoje{border:1px solid var(--gold-dark);color:var(--gold-2)}
.dia-grade td b.on{background:var(--gold);color:var(--btn-tinta);font-weight:700}
.dia-rodape{display:flex;justify-content:space-between;gap:8px;margin-top:8px;padding-top:8px;border-top:1px solid var(--borda)}
.dia-rodape button{background:none;border:0;color:var(--mudo);font-size:.7rem;font-family:inherit;cursor:pointer;padding:2px 4px}
.dia-rodape button:hover{color:var(--gold-2)}

/* ===== o campo de data que se digita =====
   O texto é um input comum de propósito: assim ele herda o desenho de cada
   tela (filtro, ficha, modal) sem precisar repetir borda e fundo aqui. O
   calendário fica por cima, no espaço reservado à direita.

   `.mes-pop` nasce alinhado à direita, que é o certo para o botão de mês do
   painel; aqui o campo é largo e o popup é estreito, então ele acompanha a
   borda esquerda — onde a data começa. */
.dt-campo{position:relative;display:block;min-width:118px}
.dt-campo .dt-txt{width:100%;padding-right:30px;font-variant-numeric:tabular-nums}
.dt-campo .dt-txt.ruim{border-color:var(--erro)}
.dt-campo .mes-pop{left:0;right:auto}
.dt-ico{position:absolute;right:4px;top:50%;transform:translateY(-50%);
        width:24px;height:24px;display:grid;place-items:center;padding:0;
        background:none;border:0;border-radius:6px;color:var(--mudo);cursor:pointer}
.dt-ico:hover{color:var(--gold-2);background:var(--cartao-hover)}
.dt-ico svg{fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}

.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.filtros label{font-size:.68rem;color:var(--mudo);display:flex;flex-direction:column;gap:4px}
.filtros input,.filtros select{background:var(--bg-alt);color:var(--texto);border:1px solid var(--borda);border-radius:7px;padding:7px 9px;font-size:.76rem;font-family:inherit}

/* ===== A ponta direita da barra de filtros é uma coluna =====
   O período em cima, a ação embaixo. O calendário morava na linha do título,
   a meia tela de distância do botão que emite — filtrava-se lá em cima e
   agia-se aqui embaixo. Empilhados, recortar o mês e emitir o que sobrou
   viraram um gesto só.

   `align-items:stretch` para os dois nascerem da mesma largura: o botão do
   mês é mais estreito que "Emitir selecionados", e alinhados pela esquerda a
   coluna ficava com degrau. */
.filtros-acao{margin-left:auto;display:flex;flex-direction:column;align-items:stretch;gap:6px}
.filtros-periodo{display:flex;align-items:center;gap:6px;justify-content:flex-end}
/* No celular a barra já quebra em várias linhas e não há "direita" nenhuma
   para empurrar: a coluna vira largura inteira, como os filtros acima dela. */
@media (max-width:900px){
  .filtros-acao{margin-left:0;width:100%}
  .filtros-periodo{justify-content:flex-start}
}
/* Filtro de UM dia, vindo do calendário do painel. Ocupa o lugar do seletor de
   mês e tem a mesma altura dele, para a fileira de filtros não desalinhar.
   Dourado porque é filtro imposto de fora, e não escolha feita aqui — e o ✕ é
   parte do desenho, não enfeite: sem caminho de volta, a lista fica curta e
   sem explicação. */
.filtro-dia{display:inline-flex;align-items:center;gap:8px;height:34px;padding:0 6px 0 11px;
     background:var(--cartao-hover);border:1px solid var(--gold-dark);border-radius:7px}
.filtro-dia b{color:var(--texto);font-size:.76rem;font-weight:600;font-variant-numeric:tabular-nums}
.filtro-dia a{display:flex;align-items:center;justify-content:center;width:20px;height:20px;
     border-radius:5px;color:var(--mudo);font-size:.72rem;text-decoration:none;line-height:1}
.filtro-dia a:hover{background:var(--bg-alt);color:var(--erro)}

.modal-fundo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:90;align-items:center;justify-content:center;padding:16px}
.modal-fundo.on{display:flex}
.modal-caixa{background:var(--cartao);border:1px solid var(--borda);border-radius:12px;max-width:560px;width:100%;padding:18px;max-height:90vh;overflow:auto}
/* O editor de modelo é o único modal que abriga um documento inteiro, então ele
   tem medida própria: larga o quanto a tela permitir, sem passar de um tamanho
   em que a linha de texto fica cansativa de ler. */
#modal-modelo .modal-caixa{max-width:min(1180px,96vw);max-height:94vh;padding:20px 22px}

/* O EDITOR EMPILHA: dados em cima, folha embaixo, cada um usando a largura toda.
   `form.form` é um grid de duas colunas, e por isso a folha do contrato caía na
   coluna da direita enquanto os campos ficavam espremidos na esquerda — metade
   da tela sobrando e o documento numa coluna estreita. Aqui o formulário volta
   a ser fluxo normal: uma coisa depois da outra. */
#modal-modelo #form-modelo{display:block}

/* Campos ASSIMÉTRICOS, porque o conteúdo deles é. Descrição é uma frase e
   precisa de espaço; "Modelo ativo" é uma caixa de marcar e não precisa de
   nenhum. Colunas iguais dariam a todos o tamanho do maior. */
#modal-modelo .form-grid{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin:0 0 16px}
#modal-modelo .form-grid > label{flex:1 1 220px;min-width:0}
#modal-modelo .form-grid > label:has(> select[name="mod_empresa_id"]){flex:1 1 200px}
#modal-modelo .form-grid > label:has(#modelo-nome){flex:2 1 280px}
#modal-modelo .form-grid > label:has(#modelo-desc){flex:3 1 360px}
#modal-modelo .form-grid > label.check{flex:0 0 auto;padding-bottom:9px}
#modal-modelo .form-grid input{width:100%}

/* A explicação vem ANTES da folha, não depois: instrução que aparece embaixo do
   campo já foi lida tarde demais. */
#modal-modelo .ed-ajuda{margin:0 0 8px}
#modal-modelo .ed-folha{width:100%}
#modal-modelo .btn-row{margin-top:16px}
#modal-previa .modal-caixa{max-width:min(980px,96vw);max-height:94vh}

/* AS JANELAS DO MENU FINANCEIRO TÊM TODAS A MESMA LARGURA (11/09/2026, a
   pedido): a da janela de "Conferir o que já foi recebido", que foi a medida
   aprovada. Uniforme de propósito — abrir Liquidar logo depois de Lançamento
   não pode fazer a tela pular de tamanho, e as caixas estreitas de 380px
   apertavam formulário que tem data, valor, conta e forma na mesma linha.
   As larguras vinham escritas em `style=` dentro de cada uma; saíram de lá
   para caberem aqui, onde se mudam todas de uma vez. */
#modal > .modal-caixa,
#modal-parcial > .modal-caixa,
#modal-liquidar > .modal-caixa,
#modal-pag-editar > .modal-caixa,
#modal-pag-excluir > .modal-caixa,
#modal-transferir > .modal-caixa{max-width:min(1000px,96vw)}

/* Janela larga não quer dizer CAMPO largo: uma data com 900px de caixa é
   difícil de ler e de mirar, e era isso que acontecia ao soltar a largura
   destas quatro, que empilham os campos um por linha. A caixa cresce; o
   campo tem teto. O modal de Lançamento fica de fora: lá os campos já vivem
   numa grade, e a largura extra é exatamente o que ele queria. */
#modal-parcial > .modal-caixa :is(input,select),
#modal-liquidar > .modal-caixa :is(input,select),
#modal-pag-editar > .modal-caixa :is(input,select),
#modal-transferir > .modal-caixa :is(input,select){max-width:420px}
/* Nada dentro do modal estica a caixa para fora da tela — era daí que vinha a
   barra de rolagem horizontal embaixo. */
.modal-caixa{overflow-x:hidden}
.modal-caixa .form-grid{min-width:0}
.modal-caixa input,.modal-caixa select,.modal-caixa textarea{max-width:100%}
.modal-topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.modal-topo h4{margin:0;color:var(--gold-2);font-size:1rem}
.fechar{background:none;border:0;color:var(--mudo);font-size:1.2rem;cursor:pointer;font-family:inherit}
/* minmax(0,1fr), e nao 1fr. Sao coisas diferentes: `1fr` e `minmax(auto,1fr)`,
   e esse `auto` significa "nunca menor que o conteudo minimo". O conteudo
   minimo de um <select> e a opcao mais larga que ele tem dentro — inteira,
   sem quebrar e sem cortar.

   Foi o que estourou o modal de Novo lancamento quando o plano de contas
   padrao entrou: a opcao "1.1.02.01.0001  ADIANTAMENTO A FORNECEDORES DE
   MATERIAIS E SERVICOS" empurrou a coluna para 531px dentro de uma caixa de
   522px, e a grade inteira vazou para fora pela direita. O max-width:100%
   dos campos nao segura isso: ele limita o campo a 100% de uma coluna que ja
   estava larga demais.

   Com minmax(0,...) a coluna pode encolher abaixo do conteudo, e o min-width:0
   nos itens deixa o campo encolher junto em vez de empurrar a celula. */
.form-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.form-grid > *{min-width:0}
.form-grid select,.form-grid input,.form-grid textarea{max-width:100%}
/* justify-content:flex-end encosta o campo na base do rótulo: quando um
   rótulo quebra em duas linhas (o "(alfanumérico)" do CNPJ, por exemplo),
   as caixas da mesma linha continuam alinhadas entre si. */
.form-grid label{font-size:.7rem;color:var(--mudo);display:flex;flex-direction:column;gap:4px;justify-content:flex-end}
/* Rótulo com altura fixa e campo logo abaixo: as caixas da mesma linha começam
   na mesma altura mesmo quando um rótulo quebra em duas linhas ou quando um dos
   campos leva uma chave e um texto de ajuda embaixo. Antes o alinhamento vinha
   de encostar tudo na base, e bastava um campo ter algo depois do input para
   ele subir sozinho e sair do prumo do vizinho. */
.form-grid label:has(> .rot){justify-content:flex-start}
/* O gap devolve o espaço entre as palavras: num container flex, cada filho vira
   item e o espaço em branco do HTML entre eles é descartado — foi assim que
   "Valor total do contrato (R$)" virou "Valortotal do contrato(R$)". */
.form-grid label > .rot{min-height:2.05em;display:flex;align-items:flex-end;flex-wrap:wrap;gap:0 .3em;line-height:1.2}
.ajuda-campo{font-size:.64rem;color:var(--gold-dark)}
.ajuda-chave{display:flex;align-items:center;gap:7px;margin-top:5px}

/* ===== histórico de pagamento na linha do lançamento =====
   A tabela aqui NÃO ocupa a largura toda de propósito. Esticada em 100% numa
   tela larga, as quatro colunas viravam quatro ilhas separadas por um palmo de
   vazio, e a data de um pagamento ficava longe do valor dele. Encolhida ao
   conteúdo, a linha se lê de uma vez. */
.seta-pag{width:22px;height:22px;flex:none;border:0;background:none;color:var(--mudo);
          cursor:pointer;font-size:.9rem;line-height:1;border-radius:6px;
          display:inline-flex;align-items:center;justify-content:center;
          transition:color .14s,background .14s,transform .14s}
.seta-pag:hover{color:var(--gold-2);background:var(--cartao-hover)}
.seta-pag.on{color:var(--gold-2);background:var(--cartao-hover);transform:rotate(0)}
.linha-pag > td{padding:0 !important;background:var(--bg-alt);text-align:left}
.pag-caixa{padding:12px 16px 14px;border-left:2px solid var(--gold-dark);
           animation:pagAbre .18s ease-out}
@keyframes pagAbre{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* Cabeçalho da faixa: o título à esquerda e, à direita, quanto já entrou —
   a resposta que a maioria vem buscar antes mesmo de ler a lista. */
.pag-topo{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.pag-titulo{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;
            color:var(--gold-dark);font-weight:700;text-align:left}
.pag-progresso{display:flex;align-items:center;gap:8px;margin-left:auto;
               font-size:.7rem;color:var(--mudo);white-space:nowrap}
.pag-barra{width:120px;height:5px;border-radius:3px;background:var(--borda);
           overflow:hidden;flex:none}
.pag-barra i{display:block;height:100%;background:var(--gold);border-radius:3px;
             transition:width .35s ease-out}
.pag-barra.cheia i{background:var(--ok)}

/* A tabela ocupa a largura toda — a linha divisória atravessa o painel — mas as
   colunas têm largura fixa e a última é um vão que engole a sobra. Sem esse
   vão, as quatro colunas se repartiam a tela e a data de um pagamento ficava a
   um palmo do valor dele. */
.pag-tab{width:100%;border-collapse:collapse;font-size:.74rem;table-layout:fixed}
.pag-tab th{text-align:left;font-size:.6rem;text-transform:uppercase;letter-spacing:.05em;
            color:var(--mudo);font-weight:600;padding:0 16px 5px 0;border-bottom:1px solid var(--borda);
            white-space:nowrap}
/* O texto do painel PODE quebrar. Com nowrap, a largura mínima de cada célula
   virava o texto inteiro ("Pagamento em lote (comprovante conferido)"), a
   célula com colspan repassava essa exigência para a tabela de fora, e a ficha
   inteira ganhava rolagem horizontal — com as colunas empurradas para longe da
   tela. Data e valor seguem sem quebrar, porque são curtos e ficam feios
   partidos ao meio. */
.pag-tab td{padding:6px 16px 6px 0;border-bottom:1px solid var(--borda);text-align:left;
            white-space:normal;word-break:break-word}
.pag-tab td.quando,.pag-tab td.v{white-space:nowrap}
/* A célula do painel não pede largura: quem manda no tamanho é a tabela de
   fora, e o painel se acomoda no que sobrar. */
.linha-pag > td{max-width:0}
.pag-titulo{white-space:normal}
.pag-tab tr:last-child td{border-bottom:0}
/* Largura em PORCENTAGEM, não em pixel. Com pixel, a soma das quatro colunas
   virava uma exigência de largura mínima que a célula com colspan repassava
   para a tabela de fora — e a tela inteira ganhava uma barra de rolagem
   horizontal por causa do painel que abre dentro dela. Em porcentagem, a
   tabela interna se ajusta ao que existe e nunca empurra ninguém. */
.pag-tab .c-quando{width:16%}
.pag-tab .c-valor {width:15%}
.pag-tab .c-como  {width:27%}
.pag-tab .c-forma {width:20%}
.pag-tab .c-vao   {width:22%;padding-right:0;text-align:right}

/* Editar e excluir o pagamento. Ficam encostados à direita e só ganham cor no
   hover: são ações de exceção — mexer em dinheiro já lançado — e não podem
   competir com a leitura da lista, que é o que a pessoa veio fazer aqui.
   A linha inteira revela os botões; parados eles ficam quase apagados, para a
   coluna não virar uma fileira de ícones piscando. */
/* Barra das credenciais guardadas, no formulário da conta emissora. */
.cred-barra{display:flex;align-items:center;justify-content:space-between;gap:12px;
            background:var(--bg-alt);border:1px solid var(--borda);border-radius:8px;
            padding:8px 10px;margin:2px 0 4px}
.cred-oculto{font-size:.74rem;color:var(--mudo)}
.cred-oculto b{color:var(--texto);letter-spacing:.12em;font-weight:600}

/* ===== menu Colunas: mostrar e ordenar =====
   As setas ficam apagadas até o mouse chegar na linha — a lista é para ler os
   nomes das colunas, e uma fileira de setas acesas rouba essa leitura. */
.col-topo{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mudo);
          padding:4px 8px 7px;border-bottom:1px solid var(--borda);margin-bottom:4px;font-weight:600}
.col-item{display:flex;align-items:center;gap:8px;padding:3px 8px;border-radius:6px}
.col-item:hover{background:var(--cartao-hover)}
.col-item label{flex:1;display:flex;align-items:center;gap:7px;font-size:.76rem;cursor:pointer;margin:0}
.col-item input{width:auto;margin:0}
.col-mover{display:inline-flex;gap:2px;opacity:.4;transition:opacity .12s}
.col-item:hover .col-mover,.col-mover:focus-within{opacity:1}
.col-seta{background:none;border:1px solid transparent;border-radius:5px;color:var(--mudo);
          font-size:.7rem;line-height:1;padding:2px 5px;cursor:pointer;font-family:inherit}
.col-seta:hover:not([disabled]){color:var(--gold-2);border-color:var(--gold-dark);background:var(--cartao)}
.col-seta[disabled]{opacity:.25;cursor:default}
.col-rodape{border-top:1px solid var(--borda);margin-top:5px;padding:6px 8px 2px}

.pag-acoes{display:inline-flex;gap:4px;opacity:.35;transition:opacity .12s}
.pag-tab tr:hover .pag-acoes,
.pag-acoes:focus-within{opacity:1}
.pag-bt{background:none;border:1px solid transparent;border-radius:6px;color:var(--mudo);
        padding:3px;line-height:0;cursor:pointer;font-family:inherit}
.pag-bt .ico{width:14px;height:14px;margin:0;vertical-align:0}
.pag-bt:hover{color:var(--gold-2);border-color:var(--gold-dark);background:var(--cartao-hover)}
.pag-bt.perigo:hover{color:var(--erro);border-color:rgba(224,82,82,.5);background:rgba(224,82,82,.10)}

/* O que falta receber não é mais um pagamento: sai da lista e vira o fecho do
   painel, encostado à direita e com peso — é o número que a pessoa leva embora
   quando fecha a faixa. */
.pag-rodape{display:flex;align-items:baseline;justify-content:flex-end;gap:10px;
            margin-top:10px;padding-top:9px;border-top:1px solid var(--borda)}
.pag-rodape .r{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mudo);font-weight:600}
.pag-rodape .v{font-size:1.02rem;font-weight:700;color:var(--erro);font-variant-numeric:tabular-nums}
.pag-rodape.quitado .v{color:var(--ok)}
.pag-tab .v{color:var(--gold-2);font-weight:600}
/* O ponto na frente da data dá à lista cara de linha do tempo: são eventos em
   ordem, não um cadastro. */
.pag-tab .quando{position:relative;padding-left:15px}
.pag-tab .quando::before{content:'';position:absolute;left:0;top:50%;margin-top:-3px;
                         width:6px;height:6px;border-radius:50%;background:var(--gold-dark)}
.pag-tab tr:last-child .quando::before{background:var(--gold)}
.pag-vazio{font-size:.74rem;color:var(--mudo)}
.form-grid label.cheio,.form-grid .cheio{grid-column:1/-1}
/* rótulo de uma linha só: "Valor mensal (R$)" quebrava em três */
.form-grid label>span.rot-linha{white-space:nowrap}
.form-grid input,.form-grid select,.form-grid textarea{background:var(--bg-alt);color:var(--texto);border:1px solid var(--borda);border-radius:7px;padding:8px 9px;font-size:.78rem;font-family:inherit}
.check{flex-direction:row !important;align-items:center;gap:8px !important;margin-top:16px}

/* O JS esconde campo com el.hidden = true. Sem esta regra, o display das
   regras acima ganha do padrão do navegador para [hidden] e nada some —
   foi o que fazia CNPJ, CPF e IE aparecerem todos ao mesmo tempo. */
[hidden]{display:none !important}

/* ===== barra de seleção em lote (Financeiro, Cobranças e Contratos) =====
   Mesma peça nos três lugares: marcar tudo, contador do que está marcado e
   um menu "Ações" que só aceita clique quando há linha selecionada. */
.sel-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.sel-barra .marca-todos{display:flex;align-items:center;gap:7px;font-size:.74rem;color:var(--mudo);cursor:pointer}
.sel-barra .marca-todos input{width:auto;cursor:pointer}
.sel-conta{font-size:.72rem;color:var(--gold-2);min-width:120px}
/* Um menu sozinho na barra vai para a direita por conta própria. Quando são
   dois, quem manda é o grupo: com margin-left:auto nos dois, o primeiro
   empurrava a si mesmo para o meio e só o segundo encostava na borda. */
.acoes-campo{position:relative}
.sel-barra > .acoes-campo{margin-left:auto}
.sel-acoes{margin-left:auto;display:flex;align-items:center;gap:8px}
/* o Ações é o único caminho para agir em lote, então veste o dourado da
   casa — a mesma cor dos botões principais, sem inventar tom novo */
.acoes-btn{display:flex;align-items:center;gap:8px;background:var(--gold);border:1px solid var(--gold);
           border-radius:8px;color:var(--btn-tinta);font-weight:700;padding:7px 15px;font-size:.78rem;font-family:inherit;cursor:pointer}
.acoes-btn:hover:not([disabled]){background:var(--gold-2);border-color:var(--gold-2)}
.acoes-btn[disabled]{background:var(--cartao-hover);border-color:var(--borda);color:var(--mudo);font-weight:400;cursor:not-allowed;opacity:1}
.acoes-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:82;min-width:230px;
            background:var(--cartao);border:1px solid var(--borda);border-radius:10px;padding:7px;
            box-shadow:0 12px 30px var(--sombra-cor)}
.acoes-menu.on{display:block}
.acoes-menu button{display:block;width:100%;text-align:left;background:none;border:0;border-radius:7px;
                   color:var(--texto);font-size:.77rem;font-family:inherit;padding:8px 10px;cursor:pointer}
.acoes-menu button:hover{background:var(--cartao-hover);color:var(--gold-2)}
.acoes-menu button.perigo:hover{color:var(--erro)}
.acoes-menu .divi{border-top:1px solid var(--borda);margin:5px 0}
/* menu de colunas: mesma caixa do "Ações", com caixinhas de marcar. O botão é
   discreto porque não é ação sobre dado — é ajuste de quem está olhando. */
.acoes-btn.claro{background:var(--cartao-hover);border-color:var(--borda);color:var(--texto);font-weight:600}
.acoes-btn.claro:hover{background:var(--cartao-hover);border-color:var(--gold-dark);color:var(--gold-2)}
.acoes-menu label{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;
                  font-size:.77rem;color:var(--texto);cursor:pointer}
.acoes-menu label:hover{background:var(--cartao-hover)}
.acoes-menu label input{width:auto;margin:0;accent-color:var(--gold)}
.acoes-menu .rot{font-size:.6rem;text-transform:uppercase;letter-spacing:.08em;color:var(--mudo);padding:4px 10px 5px}
.dados td.col-sel,.dados th.col-sel{width:28px;text-align:center;padding-right:0}
.dados tr.marcada td{background:rgba(200,169,107,.07)}

/* Link dentro de tabela de dados herda o dourado, não o azul do navegador.
   Sem esta regra, um <a> solto numa célula sai em azul de hiperlink — que
   sobre o fundo escuro do sistema é quase ilegível, e destoa de tudo. Vale
   para a tabela inteira porque o defeito é sempre o mesmo: alguém põe um link
   numa célula e esquece de dar cor. */
.dados td a{color:var(--gold-2);text-decoration:none;border-bottom:1px solid transparent}
/* A regra de cima existe para link de texto na tabela e vinha apagando a
   borda de baixo tambem dos botoes. Com o canto quadrado quase nao se via;
   na pilula o anel fica com um rombo. Aqui o botao recupera a propria borda
   (a cor dourada do texto continua, que e como ele sempre apareceu ali). */
.dados td a.btn{border-bottom-color:var(--borda)}
.dados td a.btn:not(.pri):hover{border-bottom-color:var(--gold)}
.dados td a.btn.pri{border-bottom-color:transparent;color:var(--btn-tinta)}
.dados td a:hover{border-bottom-color:var(--gold-dark)}
.dados tr.linha-sel{cursor:pointer;user-select:none}
.dados tr.linha-sel:hover td{background:var(--cartao-hover)}
/* selo de situação financeira do cliente, calculado dos lançamentos dele */
.selo-fin{font-size:.62rem;padding:2px 9px;border-radius:99px;font-weight:700;white-space:nowrap}
.selo-fin.dia{background:rgba(63,191,111,.15);color:var(--ok)}
.selo-fin.inad{background:rgba(224,82,82,.15);color:var(--erro)}
.selo-fin.sem{background:var(--cartao-hover);color:var(--mudo)}

/* ===== automação de cobrança ===== */
.aut-linha{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 0;border-bottom:1px solid var(--borda)}
.aut-linha:last-child{border-bottom:0}
.aut-linha .txt{flex:1 1 320px;font-size:.8rem;color:var(--texto)}
.aut-linha .txt small{display:block;font-size:.68rem;color:var(--mudo);margin-top:2px}
.aut-linha select{background:var(--bg-alt);color:var(--texto);border:1px solid var(--borda);border-radius:7px;
                  padding:5px 8px;font-size:.75rem;font-family:inherit}
.aut-linha.desligada .txt{color:var(--mudo)}
.aut-metodos{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.aut-metodo{flex:1 1 220px;display:flex;align-items:center;gap:11px;background:var(--bg-alt);border:1px solid var(--borda);
            border-radius:10px;padding:12px 14px}
.aut-metodo.on{border-color:var(--gold-dark)}
.aut-metodo .nome{flex:1;font-size:.82rem;font-weight:600}
.aut-metodo.on .nome{color:var(--gold-2)}
.aut-dif{display:none;align-items:center;gap:12px;background:rgba(200,169,107,.07);border:1px solid var(--gold-dark);
         border-radius:10px;padding:11px 14px;margin:10px 0 4px}
.aut-dif.on{display:flex}
.aut-dif .txt{flex:1;font-size:.78rem;color:var(--texto)}
.aut-canal{margin-top:16px}
.aut-canal h4{margin:0 0 2px;font-size:.82rem;color:var(--gold-2)}
.aut-canal .sub{font-size:.68rem;color:var(--mudo);margin:0 0 4px}
.aut-vazio{font-size:.78rem;color:var(--mudo);padding:14px 0}

/* Chave liga/desliga redonda. É um <button role="switch"> de propósito:
   o teclado e o leitor de tela entendem sem precisar de rótulo extra. */
.chave{position:relative;width:42px;height:23px;flex:0 0 42px;padding:0;border-radius:999px;
       border:1px solid var(--borda);background:var(--bg-alt);cursor:pointer;transition:.15s}
.chave .bola{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;
             background:var(--mudo);transition:.15s}
.chave[aria-checked="true"]{background:rgba(200,169,107,.22);border-color:var(--gold-dark)}
.chave[aria-checked="true"] .bola{left:22px;background:var(--gold)}

/* A mesma chave, quando ela e um <label> com <input type="checkbox"> dentro
   (a automacao de cobranca usa esta forma para o formulario postar sozinho).
   O input cobre o label inteiro e fica invisivel: e ele que recebe o clique e
   o foco do teclado, senao a chave so responderia ao mouse. */
.chave input[type="checkbox"]{position:absolute;inset:0;width:100%;height:100%;
       margin:0;opacity:0;cursor:pointer;z-index:1}
.chave:has(input:checked){background:rgba(200,169,107,.22);border-color:var(--gold-dark)}
.chave:has(input:checked) .bola{left:22px;background:var(--gold)}
.chave:has(input:focus-visible){outline:2px solid var(--gold-dark);outline-offset:2px}
/* Rede de seguranca: o JS tambem espelha o estado em data-on, para o caso de
   :has() nao existir no navegador de quem abrir. */
.chave[data-on="1"]{background:rgba(200,169,107,.22);border-color:var(--gold-dark)}
.chave[data-on="1"] .bola{left:22px;background:var(--gold)}

/* O canal desligado sai da tela. Sem esta linha o JS marcava .oculto e nada
   acontecia: as regras de e-mail e de WhatsApp apareciam as duas, sempre. */
.aut-canal.oculto{display:none}

.subnav{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.subnav a{font-size:.72rem;padding:5px 12px;border:1px solid var(--borda);border-radius:99px;color:var(--mudo);cursor:pointer;text-decoration:none}
.subnav a.on,.subnav a:hover{color:var(--gold-2);border-color:var(--gold-dark)}

.rodape-app{border-top:1px solid var(--borda);padding:14px 18px;display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-size:.7rem;color:var(--mudo)}
.rodape-app .assina b{color:var(--gold-2);font-weight:700}
/* a marca no rodapé leva ao Instagram da Veyron */
.rodape-app .assina a{text-decoration:none;border-bottom:1px dotted var(--gold-dark)}
.rodape-app .assina a:hover b{color:var(--gold)}
.rodape-app .ver{font-variant-numeric:tabular-nums}

/* tela de login */
.login-tela{display:flex;min-height:100vh;background:transparent;align-items:center;justify-content:center;padding:20px}
.login-caixa{background:var(--cartao);border:1px solid var(--borda);border-radius:14px;padding:28px 26px;width:330px;text-align:center}
/* Na tela de entrada a marca tem espaço, então cresce — o encaixe é o mesmo
   da lateral, só com outra largura. Ver .mv acima. */
.login-logo{text-align:center}
.login-caixa .mv,
.login-logo .mv{width:150px;margin:2px auto 18px}
.login-caixa p{font-size:.72rem;color:var(--mudo);margin:0 0 16px}
.login-caixa input{width:100%;background:var(--bg-alt);color:var(--texto);border:1px solid var(--borda);border-radius:8px;padding:9px 11px;font-size:.8rem;font-family:inherit;margin-bottom:10px}
.login-caixa .btn{width:100%}

/* status e empresa padrão dentro do seletor */
.troca-item .st-lin{display:flex;align-items:center;gap:6px;margin-top:6px}
.btn-padrao{background:none;border:1px solid var(--borda);border-radius:999px;color:var(--mudo);font-size:.62rem;padding:1px 9px;cursor:pointer;font-family:inherit;transition:border-color .2s,background .2s,color .2s}
.btn-padrao.on{color:var(--gold);border-color:var(--gold-dark);font-weight:700}
.btn-padrao:hover{color:var(--gold-2);border-color:var(--gold)}
.troca-item.bloq{opacity:.75}
.troca-item.bloq:hover{border-color:rgba(224,82,82,.5)}
.chip-ok{font-size:.62rem;padding:2px 8px;border-radius:99px;background:rgba(63,191,111,.15);color:var(--ok)}
.chip-erro{font-size:.62rem;padding:2px 8px;border-radius:99px;background:rgba(224,82,82,.15);color:var(--erro)}

/* ===== bloco de dados da Receita (somente leitura) =====
   Visualmente diferente dos campos digitáveis de propósito: sem caixa de
   input, fundo mais fundo e rótulo miúdo — o usuário entende pelo desenho
   que ali não se digita, sem precisar de aviso escrito. */
.rf-bloco{display:none;background:var(--bg-alt);border:1px solid var(--borda);border-radius:9px;padding:12px 13px;margin-top:12px}
.rf-bloco.on{display:block}
.rf-topo{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:11px}
.rf-titulo{font-size:.64rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mudo);margin-right:auto}
.rf-rotulo-ficha{font-size:.7rem;color:var(--mudo)}
.rf-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px 14px}
.rf-item{min-width:0}
.rf-item .r{display:block;font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mudo)}
.rf-item .v{display:block;font-size:.78rem;color:var(--texto);margin-top:2px;word-break:break-word}
.rf-item .v.num{font-variant-numeric:tabular-nums}
.rf-sit{font-size:.64rem;padding:3px 10px;border-radius:99px;font-weight:700;letter-spacing:.03em}
.rf-sit.ok{background:rgba(63,191,111,.15);color:var(--ok)}
.rf-sit.err{background:rgba(224,82,82,.15);color:var(--erro)}
/* caixa do Simples Nacional: verde optante, vermelha não optante */
.rf-simples{display:flex;align-items:center;gap:9px;flex-wrap:wrap;border-radius:8px;padding:9px 12px;margin-top:11px;font-size:.75rem;font-weight:600}
.rf-simples.sim{background:rgba(63,191,111,.12);border:1px solid rgba(63,191,111,.5);color:var(--ok)}
.rf-simples.nao{background:rgba(224,82,82,.12);border:1px solid rgba(224,82,82,.5);color:var(--erro)}
.rf-simples .det{font-size:.66rem;font-weight:400;color:var(--mudo);margin-left:auto}
.rf-cnae{margin-top:11px;padding-top:10px;border-top:1px solid var(--borda);display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.rf-cnae .principal{flex:1 1 280px;min-width:0}
/* par de botões em dourado, no formato do seletor de lançamento */
.cnae-seg{display:flex;gap:8px}
.seg-ouro{flex:1;padding:9px 12px;border:1px solid var(--borda);border-radius:8px;background:var(--cartao);color:var(--mudo);font-size:.76rem;font-weight:600;font-family:inherit;cursor:pointer}
.seg-ouro:hover:not([disabled]){border-color:var(--gold-dark);color:var(--gold-2)}
.seg-ouro.on{background:var(--gold);border-color:var(--gold);color:var(--btn-tinta);font-weight:700}
.seg-ouro[disabled]{opacity:.4;cursor:default}

/* documento + botão de consulta na mesma linha */
.linha-doc{display:flex;gap:6px;align-items:stretch}
.linha-doc input{flex:1;min-width:0}
.btn-lupa{flex:none;background:var(--cartao-hover);border:1px solid var(--borda);border-radius:999px;color:var(--gold);font-size:.74rem;font-family:inherit;padding:0 13px;cursor:pointer;transition:border-color .2s,background .2s,color .2s;white-space:nowrap}
.btn-lupa:hover{border-color:var(--gold);color:var(--gold-2);background:var(--btn-tinte)}

/* quadro societário: tabela com colunas, edição só quando pedida */
.rf-soc{margin-top:11px;padding-top:10px;border-top:1px solid var(--borda)}
.rf-soc-topo{display:flex;align-items:center;gap:7px;margin-bottom:7px}
.rf-soc-tab td,.rf-soc-tab th{padding:6px 8px}
.rf-soc-tab td.esq,.rf-soc-tab th.esq{text-align:left}
.rf-soc-tab input.soc-in{width:100%;background:var(--cartao);color:var(--texto);border:1px solid var(--gold-dark);border-radius:6px;padding:5px 7px;font-size:.75rem;font-family:inherit}
.rf-soc-dica{margin:8px 0 0;font-size:.66rem;color:var(--mudo)}
.rf-soc-tab td:last-child,.rf-soc-tab th:last-child{text-align:center}
.soc-tira{background:none;border:1px solid var(--borda);border-radius:6px;color:var(--erro);font-size:.72rem;line-height:1;padding:4px 7px;cursor:pointer;font-family:inherit}
.soc-tira:hover{border-color:rgba(224,82,82,.6);background:rgba(224,82,82,.12)}
.soc-add{margin-top:9px;background:var(--cartao);border:1px dashed var(--borda);border-radius:7px;color:var(--gold);font-size:.72rem;font-family:inherit;padding:7px 13px;cursor:pointer}
.soc-add:hover{border-color:var(--gold-dark);color:var(--gold-2)}
.soc-in.pos{width:52px;padding:4px 5px;margin:0 2px}
/* sobreposição dos CNAEs, no tema do sistema */
.cnae-princ td{background:rgba(200,169,107,.09)}
.cnae-princ .etq{font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;color:var(--btn-tinta);background:var(--gold);border-radius:99px;padding:1px 8px;margin-left:8px;font-weight:700}
.cnae-sep td{background:var(--bg-alt);color:var(--mudo);font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;text-align:left}
#cnaes-tabela td.esq,#cnaes-tabela th.esq{text-align:left}

/* ===== editor de modelo de contrato =====
   Editor próprio em contenteditable: os recursos pedidos (negrito, listas,
   títulos, tabela) cabem em poucas linhas e nascem no tema do sistema, sem
   depender de biblioteca externa — que em produção seria proibido de qualquer
   forma, porque o projeto não usa CDN. */
.ed-barra{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bg-alt);border:1px solid var(--borda);border-radius:9px 9px 0 0;border-bottom:0;padding:8px 10px;min-width:0}
.ed-tools{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.ed-tools button{background:var(--cartao);border:1px solid var(--borda);border-radius:6px;color:var(--texto);font-size:.72rem;font-family:inherit;min-width:28px;height:26px;line-height:1;cursor:pointer;padding:0 7px}
.ed-tools button:hover{border-color:var(--gold-dark);color:var(--gold-2)}
.ed-sep{width:1px;height:18px;background:var(--borda);margin:0 4px}
.ed-var{position:relative;margin-left:auto}
.var-pop{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:96;width:min(290px,80vw);max-height:min(330px,50vh);overflow:auto;background:var(--cartao);border:1px solid var(--borda);border-radius:10px;padding:8px;box-shadow:0 12px 30px var(--sombra-cor)}
.var-pop.on{display:block}
.var-grupo{font-size:.6rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mudo);padding:8px 8px 4px;border-top:1px solid var(--borda);margin-top:5px}
.var-grupo:first-child{border-top:0;margin-top:0}
.var-item{display:block;width:100%;text-align:left;background:none;border:0;color:var(--texto);font-size:.73rem;font-family:inherit;padding:6px 8px;border-radius:6px;cursor:pointer}
.var-item:hover{background:var(--cartao-hover);color:var(--gold-2)}
.var-item code{color:var(--gold);font-size:.68rem}

/* folha de edição: fundo claro de propósito — é papel, e será impresso */
/* A FOLHA CRESCE COM A JANELA.
   Estava presa em 46vh de altura máxima dentro de um modal de 560px de largura:
   um contrato de nove cláusulas virava uma coluna estreita e comprida, com
   rolagem dentro de rolagem. Agora ela usa o espaço que a tela tem — e o resize
   deixa quem quiser esticar mais. */
.ed-folha{background:#f7f5ef;color:#17171a;border:1px solid var(--borda);border-radius:0 0 9px 9px;
  padding:26px 34px;min-height:clamp(260px,52vh,720px);max-height:none;overflow:auto;resize:vertical;
  font-family:Georgia,'Times New Roman',serif;font-size:.9rem;line-height:1.75;outline:none}
.ed-folha:focus{border-color:var(--gold-dark)}
.ed-folha h1{font-size:1.15rem;text-align:center;margin:0 0 14px}
.ed-folha h2{font-size:1rem;margin:16px 0 8px}
.ed-folha table{border-collapse:collapse;width:100%;margin:10px 0}
.ed-folha td,.ed-folha th{border:1px solid #b9b3a4;padding:6px 8px;font-size:.8rem}
.ed-folha .vr{background:rgba(200,169,107,.28);border:1px dashed #a8894f;border-radius:4px;padding:0 4px;font-family:inherit;white-space:nowrap}

.doc-papel{background:#f7f5ef;color:#17171a;border-radius:8px;padding:34px 40px;max-height:56vh;overflow:auto;font-family:Georgia,'Times New Roman',serif;font-size:.86rem;line-height:1.7}
.doc-papel h1{font-size:1.15rem;text-align:center;margin:0 0 14px}
.doc-papel h2{font-size:1rem;margin:16px 0 8px}
.doc-papel table{border-collapse:collapse;width:100%;margin:10px 0}
.doc-papel td,.doc-papel th{border:1px solid #b9b3a4;padding:6px 8px;font-size:.8rem}
.doc-cab,.doc-rod{border-color:#cdc7b8;color:#4a4740;font-size:.74rem}
.doc-cab{border-bottom:1px solid #cdc7b8;padding-bottom:10px;margin-bottom:18px}
.doc-rod{border-top:1px solid #cdc7b8;padding-top:10px;margin-top:22px;text-align:center}
.var-vazia{background:rgba(224,82,82,.16);color:#a3312f;border:1px dashed #c98a89;border-radius:4px;padding:0 5px;font-size:.78rem}
.assina-campo{display:inline-block;min-width:230px;border-bottom:1px solid #17171a;margin-top:26px}

/* ===== assinatura eletrônica: linha do tempo e status ===== */
.tl{list-style:none;margin:0;padding:0}
.tl li{position:relative;padding:0 0 14px 22px;border-left:1px solid var(--borda)}
.tl li:last-child{border-left-color:transparent;padding-bottom:0}
.tl li::before{content:'';position:absolute;left:-5px;top:3px;width:9px;height:9px;border-radius:50%;background:var(--borda)}
.tl li.feito::before{background:var(--gold)}
.tl li.ok::before{background:var(--ok)}
.tl li.err::before{background:var(--erro)}
.tl .q{font-size:.78rem;color:var(--texto)}
.tl .qd{font-size:.66rem;color:var(--mudo);font-variant-numeric:tabular-nums}
.sit-chip{font-size:.64rem;padding:2px 9px;border-radius:99px;font-weight:700}
.sit-chip.aguardando{background:rgba(200,169,107,.16);color:var(--gold-2)}
.sit-chip.assinado{background:rgba(63,191,111,.15);color:var(--ok)}
.sit-chip.rejeitado{background:rgba(224,82,82,.15);color:var(--erro)}

/* ===== página pública do contrato (mobile-first) =====
   Mesma identidade do sistema, mas sem menu nem login: quem chega aqui veio
   por um link e só precisa entender o contrato, ver o andamento e assinar. */
.pb-quadro{width:100%;max-width:560px;margin:0 auto;background:var(--bg-alt);border:1px solid var(--borda);border-radius:12px;overflow:hidden;box-shadow:0 8px 30px var(--sombra-cor)}
.pb-corpo{background:var(--bg);padding:18px 16px 22px}
.pb-topo{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--gold-dark)}
.pb-topo b{display:block;font-size:.86rem;color:var(--gold-2)}
.pb-topo span{font-size:.66rem;color:var(--mudo);font-variant-numeric:tabular-nums}
.pb-h1{font-size:1.05rem;color:var(--texto);margin:16px 0 12px;font-weight:600}
.pb-card{background:var(--cartao);border:1px solid var(--borda);border-radius:10px;padding:12px 14px;margin-bottom:11px}
.pb-card h4{margin:0 0 8px;font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mudo);font-weight:600}
.pb-card p{margin:0;font-size:.78rem;color:var(--texto);line-height:1.6}
.pb-grade{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pb-grade span{font-size:.78rem;color:var(--texto);min-width:0}
.pb-grade i{display:block;font-style:normal;font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mudo);margin-bottom:2px}
.pb-ass{display:flex;align-items:center;gap:8px;justify-content:space-between;padding:7px 0;border-bottom:1px solid #1e1e25;font-size:.78rem}
.pb-ass:last-child{border-bottom:0}
.pb-ass i{display:block;font-style:normal;font-size:.66rem;color:var(--mudo)}
.pb-acoes{margin-top:14px}
.pb-acoes .btn{width:100%;text-align:center;padding:11px}
.pb-rodape{margin:16px 0 0;text-align:center;font-size:.64rem;color:var(--mudo)}
.pb-rodape b{color:var(--gold-dark)}
@media (max-width:420px){ .pb-grade{grid-template-columns:1fr} }

/* recado de conferência, logo acima dos botões de gravar */
.aviso-conferir{margin-top:14px;background:var(--bg-alt);border:1px solid var(--borda);border-left:3px solid var(--gold);border-radius:8px;padding:10px 13px}
.aviso-conferir p{margin:0;font-size:.72rem;color:var(--mudo);line-height:1.45}
.aviso-conferir b{color:var(--gold-2)}
.aviso-conferir .obs{margin-top:7px;padding-top:7px;border-top:1px dashed var(--borda);font-size:.68rem}

/* aviso de gravação dentro do modal de lançamento */
.m-aviso{display:none;margin-top:12px;border-radius:9px;padding:10px 13px;font-size:.78rem;line-height:1.45}
.m-aviso.on{display:block}
.m-aviso.ok{background:rgba(63,191,111,.12);border:1px solid rgba(63,191,111,.5);color:var(--ok)}
.m-aviso.err{background:rgba(224,82,82,.12);border:1px solid rgba(224,82,82,.5);color:var(--erro)}
.m-aviso b{font-weight:700}
.m-aviso .det{display:block;margin-top:3px;font-size:.7rem;color:var(--mudo)}

.bloco-doc{border:1px solid var(--borda);border-radius:10px;padding:11px 13px;background:var(--bg-alt)}
.bloco-doc .topo-doc{display:flex;align-items:center;justify-content:space-between;gap:10px}
.bloco-doc .topo-doc span.rot{font-size:.74rem;color:var(--mudo);text-transform:uppercase;letter-spacing:.04em}
.bloco-doc.off .corpo-doc{display:none}
/* ocupando a largura inteira, o select e os dois botões cabem lado a lado —
   o bloco fica baixo em vez de virar uma coluna alta na esquerda */
.linha-doc-modelo{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-top:9px}
.linha-doc-modelo select{flex:1 1 150px;min-width:0}

/* Sugestão de cliente: a lista só existe enquanto se digita. Sem nada
   digitado não há lista nenhuma — em base grande, um select com tudo
   dentro é rolagem inútil. */
.sug-campo{position:relative;display:block}
.sug-campo>input{width:100%}
.sug-lista{display:none;position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:98;
           background:var(--cartao);border:1px solid var(--gold-dark);border-radius:8px;
           padding:5px;max-height:210px;overflow:auto;box-shadow:0 12px 30px var(--sombra-cor)}
.sug-lista.on{display:block}
.sug-item{display:block;width:100%;text-align:left;background:none;border:0;border-radius:6px;
          color:var(--texto);font-size:.78rem;font-family:inherit;padding:7px 9px;cursor:pointer}
.sug-item:hover,.sug-item.foco{background:var(--cartao-hover);color:var(--gold-2)}
.sug-item span{display:block;font-size:.66rem;color:var(--mudo);font-variant-numeric:tabular-nums}
.sug-vazio{padding:8px 9px;font-size:.72rem;color:var(--mudo)}
.sug-escolhido{font-size:.68rem;color:var(--ok);margin-top:4px;min-height:14px}

/* ficha em modo leitura: campo sem cara de campo, para ninguém tentar digitar */
.ficha-leitura input,.ficha-leitura textarea,.ficha-leitura select{
  background:transparent;border-color:transparent;padding-left:0;color:var(--texto);cursor:default
}
.ficha-leitura .add-mais,.ficha-leitura .tira-mais,.ficha-leitura .btn-lupa{display:none}
/* O bloco de contatos tem interface PRÓPRIA — a caixa de acrescentar, o ＋, e
   por contato os botões de marcar cobrança, editar e excluir. Nada disso passa
   pelo readOnly que a ficha aplica nos campos, porque não são campos: são
   botões. Ficavam vivos em modo leitura, e mexer neles só alimentava um
   rascunho que se perde ao trocar de tela — não há Salvar aqui.

   A nota de cobrança CONTINUA à vista: ela não é só um botão, é o indicador de
   quem recebe. Some o clique, fica a informação. */
.ficha-leitura .cont-novo{display:none}
.ficha-leitura .cont-item [data-cont-editar],
.ficha-leitura .cont-item [data-cont-excluir]{display:none}
.ficha-leitura .cont-item [data-cont-financeiro]{cursor:default}
.ficha-leitura .cont-item [data-cont-financeiro]:hover{color:inherit;border-color:var(--borda)}
.ficha-leitura .cont-item[data-fin] [data-cont-financeiro]:hover{color:var(--ok);border-color:rgba(63,191,111,.45)}
/* a metade da ajuda que ensina a clicar não vale onde nada é clicável */
.ficha-leitura .so-edicao{display:none}
.selo-leitura{font-size:.62rem;text-transform:uppercase;letter-spacing:.07em;font-weight:700;
  background:var(--cartao-hover);color:var(--mudo);border:1px solid var(--borda);border-radius:99px;padding:3px 10px}

/* contatos múltiplos (e-mail e telefone/whatsapp) */
/* align-items:flex-start, e não center: a linha de telefone tem o seletor de
   país dentro da moldura, e centralizar tirava o botão do prumo do campo. */
.linha-multi{display:flex;gap:6px;align-items:flex-start}
.linha-multi + .linha-multi{margin-top:6px}
.linha-multi input{flex:1;min-width:0}

/* ================= Contatos: acrescentar em cima, lista embaixo =================
   O bloco é `block` e não herda o alinhamento da célula da grade: sem isto, a
   lista crescia para cima e empurrava o campo vizinho — era o telefone
   descendo o e-mail a cada número acrescentado. */
.contatos{display:block}
.cont-novo{margin-bottom:0}
.cont-itens{display:flex;flex-direction:column;gap:6px}
.cont-itens:not(:empty){margin-top:8px;padding-top:8px;border-top:1px dashed var(--borda)}
.cont-item{display:flex;gap:6px;align-items:flex-start}
.cont-item > input,.cont-item > .fone{flex:1;min-width:0}

/* Travado tem cara de travado: fundo mais fundo e cursor de leitura. Campo que
   parece editável e não aceita digitação é pior do que campo obviamente
   fechado — a pessoa fica batendo na tecla achando que travou o sistema. */
.cont-item input[readonly]{background:transparent;border-color:transparent;
     color:var(--texto);cursor:default;box-shadow:none}
.cont-item[data-travado] > .fone{border-color:transparent;background:transparent}
.cont-item[data-travado] .ddi{cursor:default}
.cont-item[data-travado] .ddi:hover{background:transparent}
.cont-item[data-travado] .seta{visibility:hidden}
.cont-item.editando > input,.cont-item.editando > .fone{border-color:var(--gold-dark)}

/* Botões só de ícone: 32px é o menor alvo que ainda se acerta com o dedo. */
.ic-bt{flex:none;width:32px;height:34px;display:flex;align-items:center;justify-content:center;
     border:1px solid var(--borda);border-radius:8px;background:var(--bg-alt);
     color:var(--mudo);cursor:pointer;padding:0;transition:color .12s,border-color .12s}
.ic-bt svg{width:14px;height:14px}
.ic-bt:hover{color:var(--gold);border-color:var(--gold-dark)}
.ic-bt.perigo:hover{color:var(--erro);border-color:rgba(224,82,82,.5)}
.ic-bt:focus-visible{outline:2px solid var(--gold-dark);outline-offset:1px}
.add-mais,.tira-mais{flex:none;width:28px;height:30px;border-radius:7px;border:1px solid var(--borda);background:var(--cartao-hover);color:var(--gold);font-size:.9rem;cursor:pointer;line-height:1;font-family:inherit}
.add-mais:hover{border-color:var(--gold-dark);color:var(--gold-2)}
.tira-mais{color:var(--erro);font-size:.8rem}

:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

/* ===================================================================
   TEMA CLARO
   Os tokens são redefinidos no <body>, então tudo que já usa var() muda
   sozinho. Aqui embaixo ficam só as superfícies que estavam com cor fixa
   no CSS escuro — barra lateral, topo, molduras — e o dourado, que precisa
   escurecer para ter contraste sobre fundo branco.
   =================================================================== */
body[data-tema="claro"]{
  --bg:#f4f5f7; --bg-alt:#ffffff; --cartao:#ffffff; --cartao-hover:#eef1f6;
  --borda:#e3e5ea; --texto:#1c1c22; --mudo:#6b7080;
  --gold:#7a5c26; --gold-2:#5f4820; --gold-dark:#c2ac7d;
  --ok:#1a7f42; --erro:#c0392b; --info:#2f6ea8;
  /* O claro do próprio site — e o V com mais corpo, porque dourado escuro sobre
     cinza claro tem menos contraste do que branco sobre preto. */
  --grid-line:#8a6a2f17;
  --brilho:#a8894f1f;
  --v-forca:.22;
  --apagado:#c9ccd6;
  --sombra-cor:rgba(20,22,30,.13);
}
body[data-tema="claro"] .lado{background:#fbfbfd;border-right:1px solid var(--borda)}
body[data-tema="claro"] .area > .topo{background:linear-gradient(180deg,#ffffff,#f7f8fa)}
body[data-tema="claro"] .dados td{border-bottom:1px solid #eef0f4}
body[data-tema="claro"] .pb-ass{border-bottom:1px solid #eef0f4}
body[data-tema="claro"] .item.ativo,
body[data-tema="claro"] .filhos a.on{color:var(--gold-2)}
body[data-tema="claro"] .filhos{background:#f4f5f7}
body[data-tema="claro"] .login-tela{background:var(--bg)}
/* Texto claro sobre o dourado, e não escuro: o dourado do tema claro é fechado
   (#7a5c26) porque precisa de contraste contra o branco da página. Com letra
   quase preta em cima dele — como era com o dourado amarelo antigo — o botão
   principal ficava ilegível.

   Isto era uma lista de seletores aqui embaixo, e a lista tinha dois defeitos.
   O primeiro é que ela esquecia gente: o dia de hoje no calendário, as pontas
   do período, a etiqueta do CNAE principal — todos com fundo dourado e letra
   fixa quase preta, todos ilegíveis no tema claro.
   O segundo é que ela acertava DEMAIS. `body[data-tema="claro"] .acoes-btn`
   pesa mais que `.acoes-btn.claro`, então pintava de branco também o botão
   que NÃO é dourado — o "Colunas", que tem fundo cinza-claro. Letra branca
   sobre #eef1f6: o botão sumia, e só reaparecia com o mouse em cima (porque
   aí o `:hover`, com uma classe a mais, voltava a ganhar).

   Agora quem resolve é o token --btn-tinta, aplicado na própria regra do
   elemento. Ele já existia para o .btn.pri e já sabe a resposta: escuro no
   tema escuro, claro no tema claro. Cada fundo forte — dourado, verde de
   receita, vermelho de despesa — pede a tinta pelo nome, e nenhum seletor
   de tema precisa passar por cima de nada. */
body[data-tema="claro"] code{color:#5f4820}
body[data-tema="claro"] .kpi.verde{background:#eaf7ef;border-color:#bfe3cd}
body[data-tema="claro"] .kpi.vermelho{background:#fdeeee;border-color:#f3c9c7}
body[data-tema="claro"] .fin-somas .rec,
body[data-tema="claro"] .saldo-item.rec{background:#eaf7ef;border-color:#bfe3cd}
body[data-tema="claro"] .fin-somas .pag,
body[data-tema="claro"] .saldo-item.pag{background:#fdeeee;border-color:#f3c9c7}
body[data-tema="claro"] .rf-bloco,
body[data-tema="claro"] .ed-barra{background:#f7f8fa}
body[data-tema="claro"] .doc-papel,
body[data-tema="claro"] .ed-folha{background:#fff;border-color:var(--borda)}
body[data-tema="claro"] .lua{color:var(--gold-2)}
body[data-tema="claro"] .pb-quadro{box-shadow:0 1px 2px rgba(20,22,30,.06),0 10px 30px rgba(20,22,30,.08)}

/* ===================================================================
   CELULAR
   O artefato não trata disso: lá o sistema vive dentro de um quadro com
   rolagem horizontal, então a lateral nunca precisa sumir. Aqui ela vira
   gaveta, e nada mais muda — as medidas do desktop continuam intactas.
   =================================================================== */
.menu-hamburguer{display:none;background:none;border:1px solid var(--borda);border-radius:8px;color:var(--texto);padding:3px 9px;cursor:pointer;font-family:inherit}
.veu-lado{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:55}
.veu-lado.on{display:block}

/* Tabela larga rola dentro da própria caixa, em QUALQUER largura — a de
   lançamentos tem oito colunas e passa de mil pixels num notebook comum.
   Fora de um contêiner que role, ela empurra a página inteira de lado. */
/* `overflow:auto` nos DOIS eixos, e não só no horizontal.
   Isto é o que transforma a caixa numa área de rolagem de verdade — e sem uma
   área de rolagem própria não existe título de coluna grudado: `sticky` gruda
   na caixa que rola, e se quem rola é a página inteira, o título sobe junto
   com ela. */
.rolagem-tabela{overflow:auto;max-width:100%}
.rolagem-tabela table.dados{min-width:max-content}

/* ===== Lançamentos cabe na tela, sem rolar de lado =====
   É a tabela mais larga do sistema — 13 colunas, 14 para quem vê a de
   empresa — e era a única que obrigava a arrastar de lado para ler a
   Situação. Medido antes: 1606px de tabela numa caixa de 1412px.

   Acima de 900px ela abre mão do `min-width:max-content` e passa a caber na
   caixa. Quem cede são as duas colunas de TEXTO LIVRE, cliente e descrição:
   ganham uma largura de referência e quebram linha. As outras — código,
   datas, valores, selos — continuam inteiras numa linha só, que é onde a
   leitura de uma tabela de dinheiro acontece.

   `width` no <th> e NÃO `max-width` na célula: o algoritmo de tabela
   automática ignora `max-width` por completo (medido: 200px, 240px e 320px
   davam os mesmos 373px de coluna), mas trata `width` como a largura de
   referência e a respeita. E as duas juntas, porque limitar só a descrição
   faz o espaço liberado ir todo para o cliente (253px viravam 319px) em vez
   de ir para as colunas espremidas do fim.

   Abaixo de 900px nada disso vale, de propósito: ali a lista rola de lado e
   espremer 13 colunas num celular não deixaria nenhuma legível. É o mesmo
   corte que o app.js usa para soltar a lista presa. */
@media (min-width:901px){
  .rolagem-tabela #fin-tabela{min-width:0}
  #fin-tabela th[data-col="descricao"]{width:260px}
  #fin-tabela th[data-col="cliente"]{width:200px}
}
/* Descrição é texto que alguém digitou, e pode vir sem espaço nenhum — um
   link colado, um código longo. Sem isto a palavra única não tem onde
   quebrar, estoura a coluna e a barra de rolagem volta. */
#fin-tabela td.col-desc,#fin-tabela td.col-cli{overflow-wrap:anywhere}

/* ===== Modelos de contrato: a descrição quebra, a tabela não rola de lado =====
   Mesmo problema da de lançamentos, por outro caminho: aqui não são muitas
   colunas, é UMA. A descrição do modelo de fábrica tem 150 caracteres, e com
   `min-width:max-content` ela vira uma linha só — a tabela passa de 2000px e
   Situação e Ações somem para fora da caixa, que foi o que se viu na tela.

   Mesma receita, e pela mesma razão de `width` no <th>: é a única medida que
   o layout automático de tabela respeita como referência. 380px é o suficiente
   para a descrição ocupar três ou quatro linhas sem espremer as colunas curtas
   do fim, que precisam dos botões inteiros.

   Abaixo de 901px continua rolando, como todas as outras: é o mesmo corte, e
   nada aqui é exceção. */
@media (min-width:901px){
  .rolagem-tabela #modelos-tabela{min-width:0}
  #modelos-tabela th[data-col="descricao"]{width:380px}
}
/* Descrição digitada pela empresa pode vir sem espaço nenhum. */
#modelos-tabela td.col-desc{overflow-wrap:anywhere}

/* ================= A listagem rola; o resto fica parado =================
   A altura da caixa é medida pelo JavaScript, para caber exatamente entre os
   filtros e o rodapé. Assim a PÁGINA não rola: o que rola é a lista, e tudo
   que está acima dela — o aviso, os filtros, o "Selecionar todos", Colunas e
   Ações — continua no lugar enquanto se procura o cliente lá embaixo.

   A alternativa seria prender a barra com `sticky` e deixar a página rolar.
   Fica pior: a barra passa por cima das linhas, e no meio do caminho ela e o
   cabeçalho do sistema disputam o mesmo pedaço de tela. */
.lista-presa{border:1px solid var(--borda);border-radius:10px;background:var(--bg-alt)}
.lista-presa table.dados{width:100%}

/* O título gruda no topo da caixa. Fundo sólido é obrigatório: sem ele as
   linhas passam por baixo e o cabeçalho vira uma sopa de texto sobreposto. */
.lista-presa table.dados th{position:sticky;top:0;z-index:3;
     background:var(--bg-alt);
     /* box-shadow no lugar de border-bottom: a borda de uma célula grudada
        some quando ela descola, e a linha do cabeçalho ficaria intermitente. */
     box-shadow:inset 0 -1px 0 var(--borda)}

/* A rolagem, discreta — a lista é o conteúdo, a barra não precisa competir. */
.lista-presa{scrollbar-width:thin;scrollbar-color:var(--borda) transparent}
.lista-presa::-webkit-scrollbar{width:9px;height:9px}
.lista-presa::-webkit-scrollbar-track{background:transparent}
.lista-presa::-webkit-scrollbar-thumb{background:var(--borda);border-radius:99px}
.lista-presa::-webkit-scrollbar-thumb:hover{background:var(--gold-dark)}

@media print{
  /* Papel é branco e tinta custa: grade e marca d'água não vão para a
     impressora. O navegador já costuma descartar fundo, mas quem liga "imprimir
     cores de fundo" para sair com os selos coloridos levaria a grade junto. */
  body::before,body::after{display:none !important}
  /* Imprimir tem de sair inteiro: altura travada cortaria a lista na
     primeira página e o resto sumiria do papel. */
  .lista-presa{max-height:none !important;overflow:visible !important;border:0}
  .lista-presa table.dados th{position:static;box-shadow:none}
}
/* A área de conteúdo não pode ser esticada por um filho largo: sem o min-width
   zerado, o flex deixa o item crescer além da coluna e a página ganha rolagem. */
.area,.painel{min-width:0}
.carta{max-width:100%}

@media (max-width:900px){
  .menu-hamburguer{display:inline-block}
  .lado{position:fixed;left:0;top:0;bottom:0;height:100%;transform:translateX(-100%);transition:transform .18s ease}
  .lado.aberta{transform:translateX(0)}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .grade-2{grid-template-columns:1fr}
  .painel{padding:14px 12px}
  .form-grid{grid-template-columns:1fr}
  .per-pop{width:min(430px,calc(100vw - 32px))}
  .mes-pop{width:min(246px,calc(100vw - 32px))}
  .modal-caixa{padding:14px}
  /* As telas ainda não redesenhadas têm tabela solta, sem a caixa de rolagem.
     No celular elas rolam dentro de si mesmas em vez de arrastar a página. */
  table.dados:not(.rolagem-tabela table){display:block;overflow-x:auto;max-width:100%}
  .filtros{gap:8px}
  .filtros label,.filtros input,.filtros select{min-width:0;max-width:100%}
  .filtros input,.filtros select{width:100%}
  .filtros label{flex:1 1 150px}
  .abas{max-width:100%;overflow-x:auto}
  .subnav{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px}
  .subnav a{white-space:nowrap}
}
@media (max-width:560px){
  .kpis{grid-template-columns:1fr}
  .area > .topo{padding:9px 12px}
  .area > .topo .chip span:not(.avatar){display:none}
  .linha-titulo{gap:8px}
  .saldo-grade{grid-template-columns:1fr}
  /* No celular os dois menus deixam de ficar lado a lado à direita e viram
     duas faixas de largura inteira: 360px não comportam os dois na mesma
     linha sem espremer um deles. */
  .acoes-campo,.sel-barra > .acoes-campo{margin-left:0;width:100%}
  .sel-acoes{margin-left:0;width:100%;flex-direction:column;align-items:stretch;gap:6px}
  .acoes-btn{width:100%;justify-content:center}
  .acoes-menu{left:0;right:auto;min-width:min(230px,calc(100vw - 40px))}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important; animation:none !important} }

/* ===================================================================
   TELAS AINDA NÃO REDESENHADAS
   Configurações, Usuários, Perfis, Empresas, Senha e Ativar tiveram o
   vocabulário de classes trocado pelo do artefato, mas a arrumação delas
   ainda é a antiga. Estas regras dão a essas peças o mesmo desenho do
   resto — some conforme cada tela for reescrita na estrutura do artefato.
   =================================================================== */
/* MARGEM AUTOMÁTICA, e não só largura. A `.container` dava `max-width` sem
   margem, então a tela de ativação — a única do sistema que usa esta classe, e
   justamente a que o cliente abre pelo link do e-mail — desenhava uma coluna de
   760px COLADA NA ESQUERDA, com o resto da largura vazio. As `.carta` de dentro
   já tinham `margin:0 auto` e centralizavam dentro da coluna, o que deixava o
   conjunto quase certo e escondia a causa. */
.container{width:100%;margin-inline:auto}
.center{text-align:center}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.inline-form{display:inline-block;margin:0}
form.form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
form.form label{font-size:.7rem;color:var(--mudo);display:flex;flex-direction:column;gap:4px;justify-content:flex-end}
form.form input,form.form select,form.form textarea{background:var(--bg-alt);color:var(--texto);border:1px solid var(--borda);
  border-radius:7px;padding:8px 9px;font-size:.78rem;font-family:inherit}
form.form .label-full,form.form .cheio,.label-full{grid-column:1/-1}
form.form button,form.form .btn-row{grid-column:1/-1}
/* GRID DENTRO DE GRID: o .form-grid ocupa as DUAS colunas.
   `form.form` é um grid de duas colunas de quando os campos eram <label>
   soltos dentro dele. Hoje quase toda tela embrulha os campos num `.form-grid`
   próprio — e esse embrulho é UM item do grid de fora, então caía na coluna da
   esquerda: o formulário inteiro ficava espremido em metade da caixa, com a
   outra metade vazia. Media 251px dentro de 522px na janela de Editar conta.
   Vale para Editar conta, Ajustar saldo, Empresas, Ativar, Perfis e Modelos —
   todas montam o formulário do mesmo jeito. */
form.form > .form-grid{grid-column:1/-1}
form.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end}
.campo-com-botao{display:flex;gap:6px;align-items:stretch}
.campo-com-botao input{flex:1;min-width:0}
.secao-titulo{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mudo);margin:16px 0 8px}
.contagem{font-size:.72rem;color:var(--mudo)}
.nota{font-size:.72rem;color:var(--mudo);margin:8px 0 0}

/* endereço em colunas, como no cadastro de empresa */
.endereco-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.endereco-grid .col-cep{grid-column:span 2}
.endereco-grid .col-logradouro{grid-column:span 4}
.endereco-grid .col-numero{grid-column:span 1}
.endereco-grid .col-complemento{grid-column:span 2}
.endereco-grid .col-bairro{grid-column:span 3}
.endereco-grid .col-cidade{grid-column:span 4}
.endereco-grid .col-uf{grid-column:span 2}
@media (max-width:760px){ .endereco-grid{grid-template-columns:1fr} .endereco-grid>*{grid-column:1/-1 !important} }

/* perfis: catálogo de permissões em colunas */
.permissoes-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.permissoes-grupo{background:var(--bg-alt);border:1px solid var(--borda);border-radius:9px;padding:11px 13px}
.permissoes-grupo h4{margin:0 0 8px;font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--gold-2)}
.permissao-item{display:flex;align-items:center;gap:8px;font-size:.76rem;padding:3px 0;color:var(--texto)}
.permissao-item input{width:auto}

/* escolha PF/PJ das telas antigas */
.tipo-pessoa{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.tipo-opcao{display:flex;align-items:center;gap:7px;font-size:.78rem;color:var(--mudo);background:var(--bg-alt);
  border:1px solid var(--borda);border-radius:8px;padding:8px 12px;cursor:pointer}
.tipo-opcao input{width:auto}

/* faixas de aviso remanescentes: mesmo desenho do #flash */
.alert{margin:0 0 14px;padding:10px 14px;border-radius:8px;font-size:.8rem;
  background:rgba(63,191,111,.12);border:1px solid rgba(63,191,111,.5);color:var(--ok)}
.alert-erro{background:rgba(224,82,82,.12);border-color:rgba(224,82,82,.5);color:var(--erro)}
.aviso{background:var(--cartao);border:1px solid var(--borda);border-left:4px solid var(--gold);
  border-radius:8px;padding:10px 14px;margin:0 0 14px;font-size:.85rem;color:var(--mudo)}
.aviso b{color:var(--gold-2)}
.aviso-ok{color:var(--ok)}
.aviso-erro{color:var(--erro)}

/* ===== Cadastro: plano de contas e formas de pagamento =====
   Sao listas que crescem — um plano de contas contabil tem centenas de linhas.
   Por isso a tela tem contagem no alto, busca que filtra na hora e as contas
   agrupadas por tipo: com tudo numa lista so, achar "Salarios" no meio de
   trezentas linhas vira rolagem no escuro. */
.cad-topo{display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.cad-topo .txt{flex:1 1 320px;font-size:.78rem;color:var(--mudo);margin:0;line-height:1.55}
.cad-topo .txt b{color:var(--texto);font-weight:600}

/* Contagem. Numero grande, rotulo pequeno: da para ler de relance sem ler. */
.cad-numeros{display:flex;gap:8px;flex:none}
.cad-num{background:var(--bg-alt);border:1px solid var(--borda);border-radius:9px;
         padding:7px 14px;text-align:center;min-width:74px}
.cad-num b{display:block;font-size:1.05rem;line-height:1.2;font-variant-numeric:tabular-nums;color:var(--gold-2)}
.cad-num span{font-size:.6rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mudo)}
.cad-num.rec b{color:var(--ok)}
.cad-num.des b{color:var(--erro)}
.cad-num.sin b{color:var(--texto)}
.cad-num.ana b{color:var(--gold-2)}

/* A barra de cadastrar. O nome manda na largura; o resto acompanha. */
.cad-form{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;
          background:var(--bg-alt);border:1px solid var(--borda);border-radius:10px;padding:12px 14px}
.cad-form label{display:flex;flex-direction:column;gap:5px;font-size:.68rem;
                text-transform:uppercase;letter-spacing:.06em;color:var(--mudo)}
.cad-form label.nome{flex:1 1 260px}
.cad-form .cad-campo{display:flex;flex-direction:column;gap:5px}
.cad-form .cad-campo .rot{font-size:.68rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mudo)}
.cad-form input[type="text"],.cad-form select{background:var(--cartao);color:var(--texto);
       border:1px solid var(--borda);border-radius:8px;padding:8px 11px;font-size:.82rem;
       font-family:inherit;text-transform:none;letter-spacing:0}
.cad-form input[type="text"]:focus,.cad-form select:focus{outline:none;border-color:var(--gold-dark)}

/* Receita ou despesa, lado a lado. Era uma caixinha "E despesa" solta na
   direita: dava para cadastrar sem perceber que havia uma escolha ali. */
.cad-seg{display:inline-flex;border:1px solid var(--borda);border-radius:8px;overflow:hidden;background:var(--cartao)}
.cad-seg input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.cad-seg label{display:block;padding:8px 18px;font-size:.78rem;color:var(--mudo);cursor:pointer;
       border-right:1px solid var(--borda);text-transform:none;letter-spacing:0;transition:.12s}
.cad-seg label:last-of-type{border-right:0}
.cad-seg label:hover{color:var(--texto)}
.cad-seg input[value="0"]:checked+label{background:rgba(63,191,111,.16);color:var(--ok);font-weight:600}
.cad-seg input[value="1"]:checked+label{background:rgba(224,82,82,.16);color:var(--erro);font-weight:600}
.cad-seg input:focus-visible+label{outline:2px solid var(--gold-dark);outline-offset:-2px}

/* Busca. So aparece quando a lista e grande o bastante para justificar. */
.cad-busca{position:relative;margin:16px 0 4px}
.cad-busca input{width:100%;background:var(--bg-alt);color:var(--texto);border:1px solid var(--borda);
       border-radius:8px;padding:8px 12px 8px 32px;font-size:.8rem;font-family:inherit}
.cad-busca input:focus{outline:none;border-color:var(--gold-dark)}
.cad-busca .ic{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--mudo);font-size:.8rem}

/* A lista. Cabecalho de grupo com a cor do tipo; a linha em si fica sobria. */
.cad-lista{margin-top:10px}
.cad-grupo{display:flex;align-items:center;gap:9px;padding:14px 2px 7px;
           border-bottom:1px solid var(--borda);margin-bottom:2px}
.cad-grupo .pt{width:7px;height:7px;border-radius:50%;flex:none}
.cad-grupo.rec .pt{background:var(--ok)}
.cad-grupo.des .pt{background:var(--erro)}
.cad-grupo h4{margin:0;font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--texto)}
.cad-grupo .qt{font-size:.66rem;color:var(--mudo);font-variant-numeric:tabular-nums}
.cad-item{display:flex;align-items:center;gap:12px;padding:9px 8px;border-bottom:1px solid #1a1a21;border-radius:6px}
.cad-item:hover{background:var(--cartao-hover)}
.cad-item .nm{flex:1 1 auto;font-size:.82rem;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cad-item .emp{font-size:.68rem;color:var(--mudo);flex:none}
.cad-item form,.cad-item [data-editar-cad]{flex:none;opacity:.35;transition:.12s}
.cad-item:hover form,.cad-item:hover [data-editar-cad],
.cad-item form:focus-within,.cad-item [data-editar-cad]:focus{opacity:1}
.cad-nada{display:none;padding:22px 8px;text-align:center;color:var(--mudo);font-size:.8rem}

@media (max-width:640px){
  .cad-numeros{width:100%}
  .cad-num{flex:1}
  .cad-form label.nome{flex:1 1 100%}
  .cad-item form,.cad-item [data-editar-cad]{opacity:1}
}

/* ===== o plano como plano contabil =====
   Tres colunas fixas — codigo, classificacao, descricao — e a hierarquia dada
   pelo recuo da descricao, exatamente como o contador le no papel. Sintetica em
   negrito porque e totalizadora; analitica em tom mais baixo porque e onde se
   lanca, e sao 312 delas. */
.cad-cab,.cad-conta{display:grid;grid-template-columns:52px 118px minmax(0,1fr) 112px auto;
       gap:11px;align-items:center;padding:4px 8px}
.cad-cab{color:var(--mudo);font-size:.64rem;text-transform:uppercase;letter-spacing:.06em;
       border-bottom:1px solid var(--borda);padding-bottom:7px;position:sticky;top:0;
       background:var(--cartao);z-index:2}
.cad-conta{border-bottom:1px solid #17171d;font-size:.79rem}
.cad-conta:hover{background:var(--cartao-hover)}
.cad-conta .cod{text-align:right;color:var(--mudo);font-size:.72rem;font-variant-numeric:tabular-nums}
.cad-conta .cls{color:var(--gold-dark);font-size:.73rem;letter-spacing:.02em;
       font-variant-numeric:tabular-nums;white-space:nowrap}
.cad-conta .nm{color:var(--mudo);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Sintetica: e um titulo de grupo disfarcado de linha. */
.cad-conta.sint .nm{color:var(--texto);font-weight:700}
.cad-conta.sint .cls{color:var(--gold-2)}
.cad-conta.sint{background:rgba(255,255,255,.014)}

.cad-conta .badge{margin-left:7px;vertical-align:1px}
.cad-conta .emp{margin-left:8px;font-size:.68rem;color:var(--mudo)}
/* Editar e Remover apagados ate o mouse chegar: sao 516 linhas, e dois botoes
   acesos em cada uma virariam uma parede de botoes. Nunca escondidos de vez —
   o teclado tem de chegar neles, dai o :focus-within. */
.cad-conta .acao{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.cad-conta .acao > *{opacity:.3;transition:.12s}
.cad-conta:hover .acao > *,.cad-conta .acao:focus-within > *{opacity:1}

/* Os dois eixos. Verde e vermelho vem do proprio valor, no data-v, e nao de
   uma classe por linha: o JS troca um atributo e a cor acompanha. */
.cad-sel{width:100%;background:var(--bg-alt);color:var(--mudo);border:1px solid var(--borda);
       border-radius:6px;padding:3px 5px;font-size:.71rem;font-family:inherit;cursor:pointer}
.cad-sel:focus{outline:none;border-color:var(--gold-dark)}
.cad-sel:disabled{cursor:default;opacity:.6}
.cad-sel option{background:var(--cartao);color:var(--texto)}
.cad-sel[data-v="entrada"],.cad-sel[data-v="devedora"]{color:var(--ok);
       background:rgba(63,191,111,.10);border-color:rgba(63,191,111,.34)}
.cad-sel[data-v="saida"],.cad-sel[data-v="credora"]{color:var(--erro);
       background:rgba(224,82,82,.10);border-color:rgba(224,82,82,.34)}

@media (max-width:900px){
  /* O codigo sai primeiro: classificacao e nome ja identificam a conta. */
  .cad-cab,.cad-conta{grid-template-columns:104px minmax(0,1fr) 104px auto;gap:9px}
  .cad-cab .cod,.cad-conta .cod{display:none}
}
@media (max-width:640px){
  /* No celular os eixos descem para uma segunda linha, sob a descricao. */
  .cad-cab{display:none}
  .cad-conta{grid-template-columns:minmax(0,1fr) 104px auto;padding:9px 8px}
  .cad-conta .cls{grid-column:1/-1;font-size:.68rem}
  .cad-conta .acao > *{opacity:1}
}

/* ===== ficha da forma de pagamento =====
   Duas secoes com titulo, do jeito que o usuario pediu: Identificacao em cima,
   Parcelamento embaixo. O parcelamento some quando a forma e a vista — campo
   desabilitado ainda parece um campo que se pode preencher. */
.fp-secao{margin:0 0 8px;font-size:.74rem;font-weight:600;color:var(--gold-2);
       text-transform:uppercase;letter-spacing:.07em}
.fp-secao:not(:first-of-type){margin-top:18px}
.fp-bloco{background:var(--bg-alt);border:1px solid var(--borda);border-radius:10px;padding:13px 15px}
.fp-linha{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.fp-linha:last-child{margin-bottom:0}
.fp-campo{display:flex;flex-direction:column;gap:4px;min-width:0}
.fp-campo .rot{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mudo)}
.fp-campo input,.fp-campo select{background:var(--cartao);color:var(--texto);border:1px solid var(--borda);
       border-radius:8px;padding:8px 11px;font-size:.84rem;font-family:inherit;width:100%}
.fp-campo input:focus,.fp-campo select:focus{outline:none;border-color:var(--gold-dark)}

/* Contador de caracteres alinhado a direita, como no modelo. */
.fp-conta{align-self:flex-end;font-size:.64rem;color:var(--mudo);font-variant-numeric:tabular-nums}

.fp-check{display:flex;align-items:center;gap:8px;font-size:.8rem;margin-top:9px}
.fp-check small{font-size:.7rem}
.fp-rodape{display:flex;align-items:center;gap:8px;margin-top:18px;padding-top:14px;
       border-top:1px solid var(--borda)}

@media (max-width:560px){
  .fp-campo{flex:1 1 100% !important}
  .fp-rodape{flex-wrap:wrap}
}

/* O risco do menu: separa o ciclo de trabalho (cadastrar, lancar, cobrar) do
   que se configura uma vez. */
.menu-div{border-top:1px solid var(--borda);margin:10px 16px}

/* ===================================================================
   CASCA DA R.1 (30/09/2026) — protótipo 45 aprovado pelo dono
   Rótulos de seção do menu, busca do topo com microfone e seletor de
   período. Só roupa: as telas, os endereços e as consultas são os de antes.
   =================================================================== */
/* rótulo de seção: --mudo, e não --apagado — com --apagado o texto ficava em
   1,7:1 no escuro (achado do agente de design no 45) */
.menu-secao{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--mudo);padding:12px 18px 4px;user-select:none}

.area > .topo{flex-wrap:wrap}
.area > .topo .titulo{flex:none}
.busca-cx{flex:1 1 260px;min-width:0;max-width:460px;position:relative}
.busca{display:flex;align-items:center;gap:8px;background:var(--bg);border:1px solid var(--borda);border-radius:99px;padding:4px 8px 4px 14px;min-height:36px;color:var(--mudo);font-size:.8rem;cursor:text}
.busca:focus-within{border-color:var(--gold-dark)}
.busca .lupa{font-size:1rem;line-height:1}
.busca input{flex:1;min-width:0;background:transparent;border:0;color:var(--texto);font:inherit;outline:0;padding:4px 0}
.busca input::-webkit-search-cancel-button{display:none}
.busca kbd{font-size:.64rem;border:1px solid var(--borda);border-radius:5px;padding:0 5px;font-family:inherit}
.mic{flex:none;width:30px;height:30px;border-radius:50%;border:0;background:transparent;color:var(--gold);cursor:pointer;display:grid;place-items:center;padding:0}
.mic[hidden]{display:none}
.mic:hover{background:var(--cartao-hover)}
.mic svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.mic.ouvindo{background:var(--erro);color:#fff;animation:micPulso 1.2s ease-in-out infinite}
@keyframes micPulso{0%,100%{box-shadow:0 0 0 0 rgba(224,82,82,.5)}50%{box-shadow:0 0 0 7px rgba(224,82,82,0)}}
.busca-res{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:80;background:var(--cartao);border:1px solid var(--gold-dark);border-radius:12px;padding:6px;box-shadow:0 14px 34px var(--sombra-cor);max-height:min(70vh,460px);overflow-y:auto}
.busca-res[hidden]{display:none}
.busca-it{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:9px;color:var(--texto);text-decoration:none;min-height:44px}
.busca-it:hover,.busca-it.on{background:var(--cartao-hover)}
.busca-it .t{flex:1;min-width:0;font-size:.82rem}
.busca-it .t small{display:block;color:var(--mudo);font-size:.72rem;margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.busca-it b{color:var(--gold-2);font-size:.95rem;white-space:nowrap}
.busca-it.numero b{font-size:1.05rem}
.busca-it.devedor b{color:var(--erro)}
.busca-it i{font-style:normal;font-size:.66rem;color:var(--mudo);text-transform:uppercase;letter-spacing:.06em}
.busca-vazio{margin:6px 8px;font-size:.78rem;color:var(--mudo);line-height:1.5}

.periodo-topo{position:relative;display:flex;align-items:center;gap:6px;flex:none}
.periodo-topo[hidden]{display:none}
.periodo-topo .periodo{display:flex;gap:2px;background:var(--bg);border:1px solid var(--borda);border-radius:99px;padding:3px}
.periodo-topo .periodo button{background:transparent;border:0;border-radius:99px;padding:5px 12px;font-size:.76rem;color:var(--mudo);cursor:pointer;font-family:inherit;white-space:nowrap}
.periodo-topo .periodo button:hover{color:var(--texto)}
.periodo-topo .periodo button[aria-pressed="true"]{background:var(--gold);color:#16130a;font-weight:700}
/* o calendário da tela mora aqui dentro, sem o botão dele: o "Mês" do topo faz o mesmo */
.mes-campo.no-topo{position:absolute;right:0;top:100%;width:0;height:0}
.mes-campo.no-topo > .mes-botao{display:none}
.periodo-anos{position:absolute;right:0;top:calc(100% + 6px);z-index:76;background:var(--cartao);border:1px solid var(--borda);border-radius:10px;padding:8px;box-shadow:0 12px 30px var(--sombra-cor);display:grid;grid-template-columns:repeat(3,1fr);gap:6px;width:210px}
.periodo-anos[hidden]{display:none}
.periodo-anos button{background:var(--bg-alt);border:1px solid var(--borda);border-radius:8px;color:var(--texto);padding:9px 0;font-family:inherit;font-size:.8rem;cursor:pointer;font-variant-numeric:tabular-nums}
.periodo-anos button:hover{border-color:var(--gold-dark)}
.periodo-anos button[aria-pressed="true"]{background:var(--gold);color:#16130a;font-weight:700;border-color:var(--gold)}

/* o nome no avatar é o da empresa, e nome de empresa é comprido: sem teto ele
   empurrava o avatar e a lua para uma segunda linha do topo */
.area > .topo .chip > span:not(.avatar):not([style]){max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.area > .topo .dir{flex:none}
/* claro: o fundo da busca e do período acompanham o topo branco */
body[data-tema="claro"] .busca,body[data-tema="claro"] .periodo-topo .periodo{background:var(--bg-alt)}

/* Celular e tablet de toque: a busca ganha a linha inteira, o período vira
   uma faixa que rola de lado, e todo alvo tem 44 px. */
@media (max-width:900px),(pointer:coarse){
  .busca{min-height:44px}
  .mic{width:44px;height:44px;margin-right:-6px}
  .periodo-topo .periodo button{min-height:44px;padding:0 14px}
  .periodo-anos button{min-height:44px}
  .menu-hamburguer{min-width:44px;min-height:44px;font-size:1.1rem}
  .area > .topo .lua{min-width:44px;min-height:44px}
  .area > .topo .chip{min-height:44px}
}
@media (max-width:900px){
  .area > .topo .titulo{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .busca-cx{order:5;flex-basis:100%;max-width:none}
  .busca kbd{display:none}
  .periodo-topo{order:6;flex-basis:100%;max-width:100%}
  .periodo-topo .periodo{overflow-x:auto;max-width:100%;scrollbar-width:none}
  .periodo-topo .periodo::-webkit-scrollbar{display:none}
  .mes-campo.no-topo{right:auto;left:0}
  .periodo-anos{right:auto;left:0}
}

/* As tres somas de A receber / A pagar. */
.fin-somas{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.fin-somas div{background:var(--cartao);border:1px solid var(--borda);border-radius:10px;
       padding:9px 18px;text-align:center;min-width:118px}
.fin-somas b{display:block;font-size:1.05rem;font-variant-numeric:tabular-nums}
.fin-somas span{font-size:.6rem;text-transform:uppercase;letter-spacing:.07em;color:var(--mudo)}
.fin-somas .venc b{color:var(--erro)}
.fin-somas .hoje b{color:var(--gold-2)}
.fin-somas .fut b{color:var(--texto)}
/* o mesmo desenho, com as cores da tela de Contas */
.fin-somas .ent b{color:var(--ok)}
.fin-somas .sai b{color:var(--erro)}
.fin-somas .tra b{color:var(--info)}
/* A receber e a pagar sao dois quadros, nao um saldo liquido: o fundo diz o
   sinal antes do numero ser lido. Mesma tinta dos KPIs verde/vermelho, para
   nao inventar um segundo verde no sistema. */
.fin-somas .rec,.saldo-item.rec{background:rgba(63,191,111,.10);border-color:rgba(63,191,111,.45)}
.fin-somas .pag,.saldo-item.pag{background:rgba(224,82,82,.10);border-color:rgba(224,82,82,.45)}
.fin-somas .rec b,.saldo-item.rec b{color:var(--ok)}
.fin-somas .pag b,.saldo-item.pag b{color:var(--erro)}
.contas-resumo div{flex:1 1 150px}

/* ===== Contas: os cartões de saldo =====
   Um por conta, mais o Total. Clicar filtra a tela inteira — é o mesmo gesto
   do cartão do Dashboard, e evita um segundo seletor dizendo a mesma coisa.
   O Total é tracejado porque não é uma conta: é a soma delas. */
.contas-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));
              gap:12px;margin-bottom:14px}
.conta-c{background:var(--cartao);border:1px solid var(--borda);border-radius:12px;
         padding:13px 15px;display:flex;flex-direction:column;gap:2px;
         text-decoration:none;color:var(--texto)}
.conta-c:hover{border-color:var(--gold-dark)}
.conta-c.on{border-color:var(--gold);background:var(--cartao-hover)}
.conta-c.total{border-style:dashed}
.conta-c .topo{display:flex;align-items:center;gap:7px;margin-bottom:3px;min-width:0}
.conta-c .nome{font-size:.76rem;font-weight:600;overflow:hidden;
               text-overflow:ellipsis;white-space:nowrap}
.conta-c .val{font-size:1.32rem;font-weight:700;letter-spacing:-.02em}
.conta-c .val.neg{color:var(--erro)}
.conta-c .pe{font-size:.64rem;color:var(--mudo)}

/* entrada, saída e transferência — as três naturezas do movimento */
.badge.ent{background:rgba(63,191,111,.15);color:var(--ok);border-color:transparent}
.badge.sai{background:rgba(224,82,82,.15);color:var(--erro);border-color:transparent}
.badge.tra{background:rgba(90,162,224,.15);color:var(--info);border-color:transparent}
.v-ent{color:var(--ok);font-weight:600;white-space:nowrap}
.v-sai{color:var(--erro);font-weight:600;white-space:nowrap}

/* ===== imagens do modelo de contrato =====
   Dois encaixes lado a lado no editor: a logo do cabecalho e a marca d'agua. */
.mod-imgs{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:12px;margin:12px 0}
.mod-img{background:var(--bg-alt);border:1px solid var(--borda);border-radius:10px;padding:13px 15px}
.mod-img h4{margin:0 0 3px;font-size:.8rem;color:var(--gold-2)}
.mod-img .oq{font-size:.7rem;color:var(--mudo);margin:0 0 10px;line-height:1.55}
.mod-img .linha{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mod-img .btn.mini{cursor:pointer}
.mod-img .previa{width:92px;height:38px;border:1px dashed var(--borda);border-radius:6px;flex:none;
       display:flex;align-items:center;justify-content:center;overflow:hidden;background:#fff}
.mod-img .previa i{font-size:.62rem;color:#8a8a96;font-style:normal}
.mod-img .previa.tem{border-style:solid}
.mod-img .previa img{max-width:100%;max-height:100%;object-fit:contain}
.mod-img .rot-mini{font-size:.68rem;color:var(--mudo);margin-top:10px;
       display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.mod-img .rot-mini b{color:var(--texto);font-weight:600}
.mod-img input[type=range]{flex:1 1 110px;min-width:90px;accent-color:var(--gold)}
.mod-img .ent-texto{display:block;width:100%;margin-top:5px;background:var(--cartao);color:var(--texto);
       border:1px solid var(--borda);border-radius:7px;padding:6px 10px;font-size:.8rem;font-family:inherit}
.mod-img .ent-texto:focus{outline:none;border-color:var(--gold-dark)}

/* Alinhamento da logo: tres botoes, o escolhido em dourado. */
.seg-alin{display:inline-flex;border:1px solid var(--borda);border-radius:7px;overflow:hidden;background:var(--cartao)}
.seg-alin input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.seg-alin label{padding:4px 12px;font-size:.7rem;color:var(--mudo);cursor:pointer;
       border-right:1px solid var(--borda)}
.seg-alin label:last-of-type{border-right:0}
.seg-alin input:checked+label{background:rgba(200,169,107,.2);color:var(--gold-2);font-weight:600}
.seg-alin input:focus-visible+label{outline:2px solid var(--gold-dark);outline-offset:-2px}

/* ===== primeira sincronia com o ERP ===== */
.sinc-numeros{display:flex;gap:10px;flex-wrap:wrap}
.sinc-numeros .sn{background:var(--bg-alt);border:1px solid var(--borda);border-radius:10px;
       padding:9px 16px;text-align:center;min-width:104px}
.sinc-numeros .sn b{display:block;font-size:1.2rem;line-height:1.2;font-variant-numeric:tabular-nums}
.sinc-numeros .sn span{font-size:.6rem;text-transform:uppercase;letter-spacing:.06em;color:var(--mudo)}
.sinc-numeros .sn.ok b{color:var(--ok)}
.sinc-numeros .sn.ent b{color:var(--info)}
.sinc-numeros .sn.sai b{color:var(--gold-2)}
.sinc-numeros .sn.cnf b{color:var(--erro)}

.grupo-sinc h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 4px;font-size:.92rem}
.grupo-sinc h3 .qt{font-size:.72rem;font-weight:400;color:var(--mudo)}
.grupo-sinc h3 .marca-todos{margin-left:auto;font-size:.68rem;color:var(--gold-2);cursor:pointer;
       border:1px solid var(--borda);border-radius:7px;padding:3px 10px;font-weight:400}
.grupo-sinc h3 .marca-todos:hover{border-color:var(--gold-dark)}
.grupo-sinc .oq{font-size:.76rem;color:var(--mudo);margin:0 0 12px;line-height:1.6;max-width:78ch}
.grupo-sinc .oq b{color:var(--texto)}
.grupo-sinc.casa h3{color:var(--ok)}
.grupo-sinc.entra h3{color:var(--info)}
.grupo-sinc.sai h3{color:var(--gold-2)}
.grupo-sinc.conf h3{color:var(--erro)}

/* Um conflito por bloco: a escolha fica junto do nome, nao no fim da linha. */
.conflito-item{background:var(--bg-alt);border:1px solid var(--borda);border-radius:10px;
       padding:11px 14px;margin-bottom:10px}
.conflito-item .topo{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:8px}
.conflito-item .topo b{font-size:.84rem}
.conflito-item .escolha{margin-left:auto;display:inline-flex;border:1px solid var(--borda);
       border-radius:7px;overflow:hidden}
.conflito-item .escolha input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.conflito-item .escolha label{padding:4px 12px;font-size:.7rem;color:var(--mudo);cursor:pointer;
       border-right:1px solid var(--borda)}
.conflito-item .escolha label:last-of-type{border-right:0}
.conflito-item .escolha input:checked+label{background:rgba(200,169,107,.2);color:var(--gold-2);font-weight:600}
.conflito-item .escolha input:focus-visible+label{outline:2px solid var(--gold-dark);outline-offset:-2px}
.conflito-item table.dados{font-size:.76rem}

/* Aviso de quem nao tem como receber pelo meio escolhido — na caixa de cobrar.
   Vermelho e destacado porque nao e um detalhe: e gente que nao recebe nada. */
.cob-sem-meio{background:rgba(224,82,82,.10);border:1px solid rgba(224,82,82,.34);
       border-radius:9px;padding:10px 13px;margin-top:11px;font-size:.75rem;line-height:1.55}
.cob-sem-meio b{color:var(--erro);display:block;margin-bottom:4px}
.cob-sem-meio .nomes{display:block;color:var(--mudo);font-size:.71rem;margin-bottom:6px}
.cob-sem-meio a{color:var(--gold-2);font-size:.71rem;text-decoration:none;border-bottom:1px solid var(--gold-dark)}

/* Aviso de instrucao do boleto desencontrada dos percentuais. Dourado, nao
   vermelho: nao ha erro nenhum — o texto e da empresa e continua valendo. */
.instr-aviso{background:rgba(200,169,107,.10);border:1px solid var(--gold-dark);
       border-radius:9px;padding:10px 13px;margin-top:8px;font-size:.74rem;line-height:1.6;color:var(--mudo)}
.instr-aviso b{color:var(--gold-2)}
.instr-aviso b:first-child{display:block;margin-bottom:3px}
.instr-aviso button{display:block;margin-top:7px;background:none;border:1px solid var(--borda);
       border-radius:7px;color:var(--gold-2);font-size:.7rem;padding:3px 11px;cursor:pointer;font-family:inherit}
.instr-aviso button:hover{border-color:var(--gold-dark)}


/* ===================== Telefone com código de país =====================
   O seletor fica DENTRO da moldura do campo, e não ao lado: são duas partes
   do mesmo dado, e separá-las em duas caixas faria parecer que dá para salvar
   uma sem a outra. */
.fone{display:flex;flex:1;min-width:0;border:1px solid var(--borda);border-radius:8px;
      background:var(--bg-alt);position:relative}
.fone:focus-within{border-color:var(--gold-dark)}
.fone .ddi{display:flex;align-items:center;gap:7px;padding:0 10px;border:0;
     border-right:1px solid var(--borda);background:transparent;color:var(--texto);
     font:inherit;font-size:.8rem;cursor:pointer;white-space:nowrap;flex:none;
     border-radius:8px 0 0 8px}
.fone .ddi:hover{background:rgba(200,169,107,.08)}
/* Sigla do país, e não bandeira: no Windows o emoji de bandeira não existe em
   fonte nenhuma, e o navegador desenha as duas letras cruas. Melhor a sigla
   desenhada de propósito do que um emoji que só aparece no celular. */
.fone .iso{font-size:.62rem;font-weight:700;letter-spacing:.06em;color:var(--gold);
     background:rgba(200,169,107,.13);border:1px solid rgba(200,169,107,.3);
     border-radius:4px;padding:2px 4px;line-height:1;flex:none;min-width:26px;text-align:center}
.fone .cod{color:var(--gold-2);font-variant-numeric:tabular-nums}
.fone .seta{color:var(--mudo);font-size:.58rem}
.fone input[data-fone-visivel]{flex:1;min-width:0;border:0;background:transparent;
     color:var(--texto);font:inherit;padding:8px 10px;outline:0;
     font-variant-numeric:tabular-nums;box-shadow:none}
.fone input[data-fone-visivel]:focus{border:0;box-shadow:none}

/* Um painel só para a página inteira, movido para junto do botão clicado.
   Duzentos países vezes cada linha de telefone seria DOM à toa. */
.ddi-painel{position:absolute;z-index:1400;width:330px;background:var(--cartao);
     border:1px solid var(--gold-dark);border-radius:10px;
     box-shadow:0 14px 40px var(--sombra-cor);display:none;overflow:hidden}
.ddi-painel.on{display:block}
.ddi-painel .busca{padding:9px;border-bottom:1px solid var(--borda)}
.ddi-painel .busca input{width:100%;border:1px solid var(--borda);border-radius:7px;
     background:var(--bg-alt);color:var(--texto);font:inherit;font-size:.78rem;padding:7px 9px;outline:0}
.ddi-painel .busca input:focus{border-color:var(--gold-dark)}
.ddi-painel .rolo{max-height:264px;overflow-y:auto}
.ddi-painel .pais{display:flex;align-items:center;gap:9px;padding:7px 12px;font-size:.78rem;
     cursor:pointer;border:0;background:transparent;color:var(--texto);width:100%;
     text-align:left;font-family:inherit}
.ddi-painel .pais:hover,.ddi-painel .pais.foco{background:rgba(200,169,107,.13)}
.ddi-painel .pais.sel{background:rgba(200,169,107,.2)}
.ddi-painel .pais .iso{font-size:.62rem;font-weight:700;letter-spacing:.06em;color:var(--gold);
     background:rgba(200,169,107,.13);border:1px solid rgba(200,169,107,.3);
     border-radius:4px;padding:2px 4px;line-height:1;flex:none;min-width:26px;text-align:center}
.ddi-painel .pais .nome{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ddi-painel .pais .cod{color:var(--gold-2);font-variant-numeric:tabular-nums;font-size:.74rem}
.ddi-painel .divisor{height:1px;background:var(--borda);margin:4px 0}
.ddi-painel .nada{padding:16px 12px;font-size:.75rem;color:var(--mudo);text-align:center}

/* ======================= Negociação de dívida =======================
   A caixa de passos. Os passos ficam visíveis o tempo todo, e não escondidos
   atrás de "próximo": quem está negociando precisa saber quanto falta antes de
   começar — é conversa com o cliente do outro lado da linha. */
.neg-passos{display:flex;gap:4px;margin:2px 0 14px;flex-wrap:wrap}
.neg-passos span{flex:1;min-width:96px;font-size:.66rem;text-align:center;padding:6px 4px;
     border-radius:7px;border:1px solid var(--borda);color:var(--mudo);background:var(--bg-alt)}
.neg-passos span.on{border-color:var(--gold-dark);color:var(--gold-2);background:rgba(200,169,107,.12)}
.neg-etapa{display:none}
.neg-etapa.on{display:block}

.neg-linha{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
     padding:8px 0;border-bottom:1px solid var(--borda);font-size:.8rem;color:var(--mudo)}
.neg-linha:last-child{border-bottom:0}
.neg-linha b{color:var(--texto);font-size:.9rem}
.neg-linha.total b{color:var(--gold-2);font-size:1.05rem}

/* A caixa de "cobrar os encargos" é uma decisão de dinheiro, não um ajuste de
   tela: ganha moldura para não passar batida no meio da tabela. */
.neg-chave{display:flex;gap:9px;align-items:flex-start;margin-top:10px;padding:9px 11px;
     border:1px solid var(--borda);border-radius:8px;background:var(--bg-alt);font-size:.76rem}
.neg-chave input{width:auto;margin-top:3px;flex:none}
.neg-chave small{display:block;color:var(--mudo);font-size:.68rem;margin-top:2px}

.neg-resumo{border:1px solid var(--borda);border-radius:9px;padding:4px 13px;background:var(--bg-alt)}
.neg-nota{margin-top:12px;padding:10px 12px;border-radius:8px;font-size:.74rem;line-height:1.6;
     border:1px solid rgba(200,169,107,.35);background:rgba(200,169,107,.07);color:var(--mudo)}
.neg-nota b{color:var(--gold-2)}


/* ================== Ordenar clicando no título da coluna ==================
   A seta só aparece na coluna ordenada. Um indicador em todas as colunas o
   tempo todo vira ruído: quem olha a tabela procura o DADO, e a marca de
   ordenação só interessa depois de ela ter sido pedida. */
th.ord{cursor:pointer;user-select:none;position:relative;padding-right:17px}
th.ord:hover{color:var(--gold-2)}
th.ord::after{content:'';position:absolute;right:6px;top:50%;
     width:0;height:0;border-left:3.5px solid transparent;border-right:3.5px solid transparent;
     opacity:0;transition:opacity .12s}
th.ord:hover::after{opacity:.4;border-bottom:4px solid currentColor;margin-top:-2px}
th.ord.ord-asc::after{opacity:1;border-bottom:4px solid var(--gold);border-top:0;margin-top:-2px}
th.ord.ord-desc::after{opacity:1;border-top:4px solid var(--gold);border-bottom:0;margin-top:-2px}
th.ord.ord-asc,th.ord.ord-desc{color:var(--gold-2)}


/* ================= A nota: quem recebe cobrança =================
   Desligada, a nota fica apagada como os outros ícones — ela é uma opção, não
   um alerta. Ligada, acende em verde: é dinheiro, e verde é a cor que o
   sistema já usa para dinheiro que entra. */
/* Token, e nao valor fixo: "apagado" quer dizer mais fraco que o --mudo, e no
   tema claro isso e um cinza CLARO. Com o #3a3a44 do tema escuro parado aqui,
   o sino desligado saia quase preto sobre o branco — ou seja, mais forte que
   o ligado, o contrario do que a regra queria dizer. */
.ic-bt.dinheiro{color:var(--apagado)}
.ic-bt.dinheiro:hover{color:var(--ok);border-color:rgba(63,191,111,.45)}
.cont-item[data-fin] .ic-bt.dinheiro{color:var(--ok);border-color:rgba(63,191,111,.45);
     background:rgba(63,191,111,.10)}
/* A linha inteira ganha um traço à esquerda: com quatro contatos na lista, a
   pergunta "para qual vai a cobrança?" tem de se responder de relance, sem
   comparar ícone por ícone. */
.cont-item[data-fin]{position:relative;padding-left:9px}
.cont-item[data-fin]::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:2px;
     border-radius:2px;background:var(--ok)}

.ajuda-fin{color:var(--gold-dark);font-size:.64rem;display:flex;align-items:center;gap:4px;
     flex-wrap:wrap;margin-top:5px}
.ajuda-fin svg{width:12px;height:12px;color:var(--ok)}
.ajuda-fin b{color:var(--texto)}

/* ================== O documento dentro da ficha do acordo ==================
   Moldura dourada discreta: ele não é uma ação de risco como concluir, mas é a
   primeira coisa que se faz — e precisa se separar do resumo acima. */
.doc-acordo{margin-top:14px;padding:13px 15px;border-radius:10px;
     border:1px solid rgba(200,169,107,.34);background:rgba(200,169,107,.05)}
.doc-acordo h4{margin:0 0 9px;font-size:.72rem;text-transform:uppercase;
     letter-spacing:.08em;color:var(--gold)}

/* Quem pediu menos movimento no sistema operacional nao recebe o brilho nem
   o pulo - igual ao que o site faz. As cores continuam as mesmas. */
@media (prefers-reduced-motion:reduce){
  .btn,.btn.pri,.btn.pri::after,.btn-trocar,.btn-padrao,.btn-lupa{transition:none}
  .btn.pri:hover{transform:none}
}

/* ===== Tela Hoje: a fila do dia, o livro e a barra de desfazer ==============
   Layout um clique (artefato 38). A fita colorida à esquerda é o que se lê de
   longe: verde conferência do banco, roxo a pagar, vermelho atraso, dourado o
   que vence hoje, azul o que espera decisão.
   ========================================================================== */
.fila-hoje{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-direction:column;gap:8px}
.fila-hoje .pend{display:grid;grid-template-columns:3px 1fr auto;gap:0 14px;align-items:center;
     background:var(--cartao);border:1px solid var(--borda);border-radius:10px}
.fila-hoje .fita{align-self:stretch;background:var(--borda);border-radius:10px 0 0 10px}
.fila-hoje .pend.pago .fita{background:var(--ok)}
.fila-hoje .pend.despesa .fita{background:#9b7fd4}
.fila-hoje .pend.atraso .fita{background:var(--erro)}
.fila-hoje .pend.contrato .fita{background:var(--gold)}
.fila-hoje .pend.pedido .fita{background:var(--info)}
.fila-hoje .corpo{padding:11px 0 11px 2px;min-width:0}
.fila-hoje .l1{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.fila-hoje .nome{font-size:.88rem;font-weight:700;color:var(--texto)}
.fila-hoje .tag{font-size:.62rem;letter-spacing:.09em;text-transform:uppercase;padding:1px 8px;
     border-radius:99px;border:1px solid var(--borda);color:var(--mudo);white-space:nowrap}
.fila-hoje .pend.pago .tag{color:var(--ok);border-color:rgba(63,191,111,.45)}
.fila-hoje .pend.despesa .tag{color:#b9a3e6;border-color:rgba(155,127,212,.5)}
.fila-hoje .pend.atraso .tag{color:var(--erro);border-color:rgba(224,82,82,.45)}
.fila-hoje .pend.contrato .tag{color:var(--gold-2);border-color:var(--gold-dark)}
.fila-hoje .pend.pedido .tag{color:var(--info);border-color:rgba(90,162,224,.45)}
.fila-hoje .l2{font-size:.79rem;color:var(--mudo);margin-top:2px}
.fila-hoje .l2 b{color:var(--texto)}
.fila-hoje .acoes{display:flex;align-items:center;gap:6px;padding:0 14px;flex-wrap:wrap;justify-content:flex-end}
.fila-hoje .acoes form{margin:0}
.detalhe-pend{margin-top:8px}
.detalhe-pend summary{cursor:pointer;font-size:.74rem;color:var(--mudo);width:max-content}
.detalhe-pend summary:hover{color:var(--gold-2)}
.detalhe-pend .dados td{padding:4px 8px;font-size:.75rem;border-bottom:1px solid var(--borda)}

.livro-hoje{border:1px solid var(--borda);border-radius:10px;background:var(--bg-alt);padding:12px 14px;margin-bottom:70px}
.livro-hoje h3{font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--mudo);margin:0 0 8px;font-weight:700}
.livro-hoje ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px;font-size:.76rem;color:var(--mudo)}
.livro-hoje li{display:flex;gap:10px;align-items:baseline}
.livro-hoje li form{margin:0}
.livro-hoje .h{opacity:.7;flex:none;font-variant-numeric:tabular-nums}
.livro-hoje .ck{color:var(--ok);flex:none}
.livro-hoje .rv{opacity:.65;text-decoration:line-through}
.livro-hoje .quem{margin-left:auto;opacity:.6;font-size:.7rem;white-space:nowrap}
.livro-hoje .nada{opacity:.75;font-style:italic;font-size:.76rem;margin:8px 0 0;color:var(--mudo)}

.barra-desfazer{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:11px 18px;background:var(--bg-alt);
     border-top:1px solid var(--ok);display:flex;align-items:center;gap:12px;font-size:.8rem}
.barra-desfazer .ok{color:var(--ok);font-weight:700}
.barra-desfazer .txt{color:var(--mudo);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barra-desfazer .dir{margin-left:auto;display:flex;align-items:center;gap:10px}
.barra-desfazer .relogio{font-size:.72rem;color:var(--mudo);opacity:.7;font-variant-numeric:tabular-nums;min-width:30px;text-align:right}
.barra-desfazer form{margin:0}
@media (max-width:700px){
  .fila-hoje .pend{grid-template-columns:3px 1fr}
  .fila-hoje .acoes{grid-column:2;padding:0 0 11px 2px;justify-content:flex-start}
}
.fila-hoje .conta-fila{background:var(--bg-alt);color:var(--texto);border:1px solid var(--borda);
     border-radius:8px;padding:6px 9px;font-size:.75rem;max-width:190px}

/* ===== Relatórios: abas, estante com prévia, e o relatório aberto =====
   Do esboço aprovado 39-relatorios-abas.html. Duas ideias mandam no desenho:
   o número aparece ANTES do clique (por isso o cartão tem um rodapé próprio,
   separado por linha), e o relatório aberto começa pelos totais (por isso os
   quadros grandes vêm antes da tabela). */

/* --- abas por assunto, no lugar dos títulos empilhados --- */
.rel-abas{display:flex;gap:2px;margin:20px 0 0;border-bottom:1px solid var(--borda);
  overflow-x:auto;scrollbar-width:thin}
.rel-aba{display:flex;align-items:center;gap:7px;padding:9px 14px;text-decoration:none;
  color:var(--mudo);font-size:.82rem;font-weight:500;white-space:nowrap;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.rel-aba:hover{color:var(--texto)}
.rel-aba.on{color:var(--gold-2);border-bottom-color:var(--gold)}
.rel-aba .qtd{font-size:.68rem;color:var(--apagado);background:var(--cartao);
  border:1px solid var(--borda);border-radius:9px;padding:1px 6px;font-variant-numeric:tabular-nums}
.rel-aba.on .qtd{color:var(--gold);border-color:var(--gold-dark)}

/* --- a estante --- */
.rel-estante{display:grid;grid-template-columns:repeat(auto-fill,minmax(316px,1fr));gap:12px;margin-top:16px}
.rel-modelo{display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--cartao);border:1px solid var(--borda);border-radius:10px;
  transition:border-color .15s,background .15s}
.rel-modelo:hover{border-color:var(--gold-dark);background:var(--cartao-hover)}
.rel-modelo .cab{display:flex;flex-direction:column;gap:5px;padding:13px 15px 10px}
.rel-modelo .nome{font-size:.94rem;font-weight:600;color:var(--gold-2);line-height:1.25}
.rel-modelo .desc{color:var(--mudo);font-size:.76rem;line-height:1.4}
/* O rodapé do cartão é a prévia: linha própria porque é outra informação. */
.rel-modelo .previa{border-top:1px solid var(--borda);padding:11px 15px 13px;
  display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.rel-modelo .previa .n{font-size:1.3rem;font-weight:600;color:var(--texto);
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rel-modelo .previa .rot{color:var(--mudo);font-size:.69rem;text-transform:uppercase;letter-spacing:.06em}
.rel-modelo .previa .seg{color:var(--apagado);font-size:.72rem;text-align:right;line-height:1.35}
.rel-modelo.vazio{opacity:.6}
.rel-modelo.vazio .previa .n{color:var(--apagado);font-size:1rem}

/* O chip diz por qual data o relatório recorta — é a diferença entre dois
   números do mesmo mês não baterem e ninguém saber qual acreditar. */
.rel-chip{font-size:.63rem;text-transform:uppercase;letter-spacing:.07em;padding:2px 7px;
  border-radius:4px;border:1px solid;white-space:nowrap;align-self:flex-start;display:inline-block}
.rel-chip.hoje{color:var(--info);border-color:rgba(90,162,224,.42);background:rgba(90,162,224,.09)}
.rel-chip.recorte{color:var(--gold);border-color:var(--gold-dark);background:rgba(200,169,107,.07)}

/* --- relatório aberto --- */
.rel-barra{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:16px 0 12px}
.rel-espaco{flex:1}
.rel-nota{margin:0 0 12px;padding:9px 13px;border-left:2px solid var(--gold-dark);
  background:rgba(200,169,107,.05);color:var(--texto);font-size:.77rem;line-height:1.5;max-width:78ch}

.rel-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(142px,1fr));gap:1px;
  background:var(--borda);border:1px solid var(--borda);border-radius:10px;overflow:hidden;margin-bottom:16px}
.rel-kpi{background:var(--cartao);padding:12px 15px;display:flex;flex-direction:column;gap:3px}
.rel-kpi .r{color:var(--mudo);font-size:.67rem;text-transform:uppercase;letter-spacing:.06em}
.rel-kpi .v{font-size:1.28rem;font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.rel-kpi .v.destaque{color:var(--gold-2)}

.rel-grafico{border:1px solid var(--borda);border-radius:10px;padding:14px 16px;
  background:var(--cartao);margin-bottom:16px}
.rel-grafico h3{margin:0 0 12px;font-size:.69rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--mudo);font-weight:600}
.rel-barras{display:grid;gap:9px}
.rel-linha-barra{display:grid;grid-template-columns:150px 1fr auto;align-items:center;gap:12px}
.rel-linha-barra .rot{font-size:.76rem;color:var(--texto);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.rel-linha-barra .trilho{height:9px;background:var(--bg-alt);border-radius:5px;overflow:hidden}
.rel-linha-barra .fita{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold-2))}
.rel-linha-barra .fita.alerta{background:linear-gradient(90deg,#8f3636,var(--erro))}
.rel-linha-barra .val{font-size:.76rem;color:var(--mudo);font-variant-numeric:tabular-nums;
  min-width:104px;text-align:right}

.rel-ferramentas{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.rel-busca{flex:1;min-width:190px;max-width:330px;background:var(--cartao);border:1px solid var(--borda);
  border-radius:7px;padding:7px 11px;color:var(--texto);font-size:.78rem}
.rel-busca:focus{outline:none;border-color:var(--gold-dark)}

.rel-rolagem{overflow-x:auto;border:1px solid var(--borda);border-radius:10px;background:var(--cartao)}
.rel-rolagem .dados th{position:sticky;top:0;background:var(--bg-alt);cursor:pointer;
  user-select:none;white-space:nowrap;z-index:1}
.rel-rolagem .dados th:hover{color:var(--gold-2)}
.rel-rolagem .dados th .seta{color:var(--gold)}
/* Número alinhado à direita SÓ aqui: `.num` é usado em outras telas apenas para
   o algarismo tabular, e mexer nele mudaria o alinhamento delas. */
.rel-rolagem .dados td.num,.rel-rolagem .dados th.num{text-align:right;font-variant-numeric:tabular-nums}
.rel-rolagem .dados tr:hover td{background:var(--cartao-hover)}
.rel-total td{border-top:1px solid var(--gold-dark);font-weight:600;color:var(--gold-2);
  background:rgba(200,169,107,.04)}
.rel-marca.ok{color:var(--ok)}
.rel-marca.ruim{color:var(--erro)}

@media (max-width:900px){
  .rel-estante{grid-template-columns:1fr}
  .rel-linha-barra{grid-template-columns:110px 1fr;row-gap:3px}
  .rel-linha-barra .val{grid-column:2;text-align:left;min-width:0}
}

/* ===== Relatórios: o construtor (esboço 40) ===== */
.rel-oficina{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start}
.rel-painel{background:var(--cartao);border:1px solid var(--borda);border-radius:10px;overflow:hidden}
/* A numeração é sequência de verdade: sem base não há colunas, sem colunas não
   há o que filtrar. Não é enfeite. */
.rel-passo{border-bottom:1px solid var(--borda);padding:13px 15px}
.rel-passo:last-child{border-bottom:0}
.rel-passo h3{margin:0 0 3px;font-size:.81rem;font-weight:600;display:flex;align-items:center;gap:8px}
.rel-passo h3 .n{width:19px;height:19px;border-radius:50%;background:var(--bg-alt);
  border:1px solid var(--borda-forte,#3a3a44);color:var(--gold);font-size:.65rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;flex:none}
.rel-passo .pista{color:var(--apagado);font-size:.71rem;margin:0 0 8px 27px;line-height:1.4}
.rel-passo .corpo{margin-left:27px}
.rel-passo select,.rel-passo input[type=text]{width:100%;background:var(--bg-alt);
  border:1px solid var(--borda);border-radius:6px;color:var(--texto);font-size:.77rem;padding:6px 9px}
.rel-passo select:focus,.rel-passo input:focus{outline:none;border-color:var(--gold-dark)}
.rel-colunas{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
.rel-colunas .caixa{display:flex;align-items:center;gap:6px;padding:3px 0;font-size:.77rem;cursor:pointer}
.rel-colunas .caixa input{accent-color:var(--gold);margin:0}
.rel-filtro{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-bottom:7px;
  border:1px solid var(--borda);border-radius:7px;padding:7px;background:var(--bg-alt)}
.rel-filtro input[type=text]{grid-column:1/-1}

.rel-previa-viva{min-width:0}
.rel-guardar{display:flex;gap:7px;margin-bottom:12px}
.rel-guardar input[type=text]{flex:1;background:var(--cartao);border:1px solid var(--borda);
  border-radius:7px;color:var(--texto);font-size:.79rem;padding:7px 11px}
.rel-guardar input:focus{outline:none;border-color:var(--gold-dark)}

/* --- o cartão de "montar" e os salvos --- */
.rel-novo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  min-height:118px;border:1px dashed var(--borda-forte,#3a3a44);border-radius:10px;
  color:var(--gold-2);font-size:.9rem;font-weight:600;text-decoration:none;
  transition:border-color .15s,background .15s}
.rel-novo:hover{border-color:var(--gold);background:var(--cartao)}
.rel-novo span{color:var(--mudo);font-size:.73rem;font-weight:400}
.rel-modelo .previa .seg a{color:var(--gold-2);text-decoration:none}
.rel-modelo .previa .seg a:hover{text-decoration:underline}
.rel-apagar{background:none;border:0;color:var(--apagado);font-size:.72rem;cursor:pointer;padding:0 0 0 8px}
.rel-apagar:hover{color:var(--erro)}

@media (max-width:900px){ .rel-oficina{grid-template-columns:1fr} }

/* ===== Relatórios no papel =====
   Vale para "Imprimir" e para o "Salvar como PDF" do navegador. O PDF do botão
   PDF é outro caminho — montado por nós, paginado, sem depender de navegador. */
@media print{
  /* Só o relatório vai para o papel. Menu, seletor de período, botões e o
     construtor são para operar a tela, não para ler impresso. */
  .lado,.topo,.rel-abas,.rel-barra,.rel-ferramentas,.nao-imprime,
  .mes-campo,.rel-painel,.rel-guardar,.rodape-app,.barra-desfazer{display:none!important}
  .area{padding:0!important;margin:0!important}
  .rel-rolagem{overflow:visible!important;border:0!important;max-height:none!important}
  /* O cabeçalho da tabela se repete em toda folha — sem isto, da segunda página
     em diante ninguém sabe que coluna é qual. */
  .rel-rolagem .dados thead{display:table-header-group}
  .rel-rolagem .dados th{position:static!important;background:#eee!important;color:#333!important}
  .rel-rolagem .dados tr{page-break-inside:avoid}
  .rel-kpis{border-color:#ccc!important;background:#fff!important}
  .rel-kpi{background:#fff!important}
  .rel-kpi .v,.rel-total td{color:#000!important}
  .rel-nota{background:#fff!important;border-color:#999!important}
  .rel-grafico{background:#fff!important;border-color:#ccc!important}
  .rel-linha-barra .fita{background:#888!important}
  .linha-titulo h2{font-size:1.2rem}
}

/* ===== Configurações: áreas à esquerda, abas dentro (esboço 38) =====
   Os nove cartões continuam vindo no HTML; é esta classe que deixa só o da aba
   atual à vista. Separá-los de verdade exigiria achar onde cada um fecha dentro
   de um arquivo de 1.700 linhas — risco alto para ganho pequeno, já que o
   cartão escondido não é alcançável por teclado nem enviável por Enter. */
.cfg-fora{display:none!important}

.cfgwrap{display:grid;grid-template-columns:210px 1fr;gap:14px;align-items:start;margin-top:14px}
.cfgmenu{background:var(--cartao);border:1px solid var(--borda);border-radius:10px;padding:6px;
  display:flex;flex-direction:column;gap:2px;position:sticky;top:14px}
.cfgmenu a{display:flex;flex-direction:column;gap:1px;padding:8px 11px;border-radius:7px;
  color:var(--mudo);font-size:.79rem;text-decoration:none;transition:background .15s,color .15s}
.cfgmenu a small{font-size:.66rem;color:var(--apagado)}
.cfgmenu a:hover{background:var(--cartao-hover);color:var(--texto)}
.cfgmenu a.on{background:var(--cartao-hover);color:var(--gold-2);box-shadow:inset 2px 0 0 var(--gold)}
.cfgmenu a.on small{color:var(--gold-dark)}

.cfgpainel{min-width:0}
.cfgpainel > h4{margin:0;font-size:1.02rem;font-weight:600;color:var(--gold-2)}
.cfgpainel > .cfgdesc{margin:4px 0 0;font-size:.78rem;color:var(--mudo);max-width:74ch;line-height:1.5}
.cfgabas{display:flex;gap:2px;border-bottom:1px solid var(--borda);margin:12px 0 0}
.cfgabas a{padding:7px 13px;color:var(--mudo);font-size:.78rem;text-decoration:none;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s}
.cfgabas a:hover{color:var(--texto)}
.cfgabas a.on{color:var(--gold-2);border-bottom-color:var(--gold);font-weight:600}
/* O primeiro cartão encosta na linha das abas: a margem de cima dele sobra
   quando ele passa a ser o conteúdo de uma aba, e não um item de uma pilha. */
.cfgpainel > .carta:first-of-type,.cfgpainel > section:first-of-type{margin-top:14px}

@media (max-width:900px){
  .cfgwrap{grid-template-columns:1fr}
  .cfgmenu{position:static;flex-direction:row;overflow-x:auto}
  .cfgmenu a{white-space:nowrap}
  .cfgmenu a small{display:none}
}


/* O PAINEL GANHA O MESMO CARTÃO DO MENU ao lado (11/09/2026, a pedido). Sem
   ele o conteúdo flutuava direto sobre a marca d'água do fundo e as duas
   colunas não pareciam a mesma tela. Como o painel passa a ser o cartão, as
   cartas de dentro perdem a própria moldura: duas bordas da mesma cor, uma
   dentro da outra, só somam ruído. Quando duas cartas aparecem juntas, um fio
   continua separando uma da outra. */
.cfgpainel{background:var(--cartao);border:1px solid var(--borda);border-radius:10px;padding:14px 16px}
.cfgpainel > .carta{background:transparent;border:0;border-radius:0;padding:0;margin-bottom:0}
.cfgpainel > .carta + .carta{margin-top:14px;padding-top:14px;border-top:1px solid var(--borda)}

/* Tipos de contrato: renomear, vincular e remover moram na própria linha, e só
   aparecem quando pedidos — a tabela é de leitura, não de formulários abertos. */
.tipos-tab td{vertical-align:top}
/* A coluna de ações empilha: Renomear em cima, Remover embaixo. Nada de
   `white-space:nowrap` aqui — ele herdaria para as explicações e esticaria a
   tabela inteira para caber uma frase numa linha só. */
.tipos-tab td.acoes .inline-form{display:block;margin-top:6px}
.tipo-vinc{margin-top:6px}
.tipo-vinc > summary{cursor:pointer;font-size:.72rem;color:var(--gold-2);
  list-style:none;display:inline-flex;align-items:center;gap:5px}
.tipo-vinc > summary::-webkit-details-marker{display:none}
.tipo-vinc > summary::before{content:"+";font-size:.85rem;line-height:1;opacity:.8}
.tipo-vinc[open] > summary::before{content:"–"}
.tipo-vinc > summary:hover{color:var(--texto)}
.tipo-vinc small{display:block;margin-top:5px;font-size:.7rem;line-height:1.45;max-width:52ch}
/* ===== Cobrança automática: quem fica de fora, e parar o aviso de um cliente ===== */
.pc-fora{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.pc-motivo{border:1px solid var(--borda);border-radius:9px;background:var(--cartao)}
.pc-motivo > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;
  padding:9px 12px;font-size:.79rem;color:var(--texto)}
.pc-motivo > summary::-webkit-details-marker{display:none}
.pc-motivo > summary .q{font-variant-numeric:tabular-nums;color:var(--gold-2);min-width:28px;
  text-align:right;font-size:.86rem}
.pc-motivo > summary .m{flex:1;color:var(--mudo)}
.pc-motivo > summary .ver{font-size:.71rem;color:var(--apagado);white-space:nowrap}
.pc-motivo[open] > summary{border-bottom:1px solid var(--borda)}
.pc-motivo[open] > summary .ver{color:var(--gold)}
.pc-quem{padding:4px 12px 10px}
.pc-linha{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:5px 0;
  border-bottom:1px solid #1a1a20;font-size:.78rem}
.pc-linha:last-child{border-bottom:0}
.pc-linha .nome{flex:1;min-width:0}
.pc-linha .nome a{color:var(--gold-2);text-decoration:none}
.pc-linha .nome a:hover{text-decoration:underline}
.pc-linha .ref{color:var(--apagado);font-size:.71rem;margin-left:6px}

.pc-pausar{display:inline-block}
.pc-pausar > summary{cursor:pointer;list-style:none;font-size:.71rem;color:var(--apagado);
  border:1px solid var(--borda);border-radius:6px;padding:3px 9px;white-space:nowrap}
.pc-pausar > summary::-webkit-details-marker{display:none}
.pc-pausar > summary:hover{color:var(--erro);border-color:rgba(224,82,82,.45)}
.pc-pausar[open] > summary{color:var(--erro);border-color:rgba(224,82,82,.45)}
.pc-form{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:7px;
  background:var(--bg-alt);border:1px solid var(--borda);border-radius:8px;padding:8px}
.pc-form select,.pc-form input{background:var(--cartao);border:1px solid var(--borda);
  border-radius:6px;color:var(--texto);font-size:.75rem;padding:5px 8px;font-family:inherit}
.pc-form input{flex:1;min-width:180px}
.pc-form button{background:rgba(224,82,82,.14);border:1px solid rgba(224,82,82,.5);
  color:#ef8a8a;border-radius:6px;font-size:.74rem;padding:5px 12px;cursor:pointer;font-weight:600}
.pc-form button:hover{background:rgba(224,82,82,.24)}
.pc-acao{background:none;border:1px solid var(--borda);border-radius:6px;font-size:.71rem;
  padding:3px 9px;cursor:pointer;white-space:nowrap}
.pc-acao.volta{color:var(--ok);border-color:rgba(63,191,111,.45)}
.pc-acao.volta:hover{background:rgba(63,191,111,.1)}