/* ============================================================
   estilo.css — a folha de estilo do sistema inteiro
   ============================================================

   Antes isto morava dentro do base.html, e cada tela improvisava o que
   faltava: 95 cores escritas na mão espalhadas pelos templates e 25
   botões com `style=` próprio, com três tamanhos de fonte e três
   espaçamentos diferentes. Era por isso que a tela parecia remendada.

   Agora é um lugar só. Quem precisa de um botão usa a classe; quem
   precisa de uma cor usa a variável. Nenhuma tela escreve cor na mão.

   ------------------------------------------------------------
   OS DOIS TEMAS
   ------------------------------------------------------------
   Claro  : branco + dourado
   Escuro : preto + dourado

   Por padrão segue a configuração do aparelho. Se a pessoa escolher no
   botãozinho do topo, a escolha dela manda — fica guardada no próprio
   aparelho e vale para as próximas visitas.

   Quem decide é o script no <head> do base.html, que escreve um atributo
   no <html> antes de a página aparecer:

     <html data-tema="claro">    -> as cores de :root, logo abaixo
     <html data-tema="escuro">   -> as cores da seção 2

   E, quando a pessoa ainda não escolheu nada, ele acrescenta
   `data-segue-aparelho` — é por esse atributo que o sistema sabe que
   pode acompanhar o celular quando ele escurecer sozinho às 18h.

   ------------------------------------------------------------
   UMA DECISÃO DE CONTRASTE
   ------------------------------------------------------------
   Dourado #D09028 com texto BRANCO dá 2,6:1 de contraste — abaixo do
   mínimo legível (4,5:1). O botão dourado do sistema estava assim.
   Agora o texto sobre dourado é quase-preto, que dá 7:1. É o mesmo
   caminho das telas de referência, e some aquela sensação de botão
   "lavado" no sol.

   Pela mesma razão, no tema CLARO o dourado não vira cor de texto
   corrido: fica em botão, selo, borda e detalhe. No tema ESCURO ele
   brilha sobre preto e pode ser texto à vontade.
   ============================================================ */


/* ------------------------------------------------------------
   1. TOKENS — TEMA CLARO
   ------------------------------------------------------------ */
:root{
  /* --- marca --- */
  /* Dourado amostrado dos pixels da própria logo. (O manual de marca
     traz "R31 G107 B132", que é azul — está errado lá.) */
  --ouro:#D09028;
  --ouro-escuro:#96661C;   /* ouro para TEXTO e para o hover do botão.
                              Era #A8721F, que sobre branco dá 4,12:1 — abaixo
                              do mínimo legível. Escurecido até 4,98:1.
                              No tema escuro vira um ouro CLARO — o nome
                              fica estranho, mas trocá-lo mexeria em umas
                              cem linhas sem ganhar nada. */
  --ouro-hover:#BB7F23;    /* o dourado do botão quando o mouse está em
                              cima. NÃO é o --ouro-escuro: aquele é escuro
                              porque precisa ser lido sobre branco, e usá-lo
                              aqui derrubava o texto do botão pra 3,67:1 —
                              o rótulo sumia justo no instante em que a
                              pessoa ia clicar. Este dá 5,4:1. */
  --ouro-fraco:#FBF3E6;    /* fundo de destaque suave */
  --ouro-borda:#EBD9B8;
  --sobre-ouro:#1A1407;    /* o que se escreve EM CIMA do dourado */

  /* --- superfícies --- */
  --tinta:#16181A;         /* barra do topo */
  --tinta-2:#2C3034;
  --fundo:#F4F5F7;         /* fundo da página */
  --painel:#FFFFFF;        /* fundo de cartão, janela, tabela */
  --campo:#FFFFFF;         /* fundo de input/select/textarea */

  /* --- texto --- */
  --texto:#232529;
  --texto-fraco:#60666B;   /* 5,3:1 até no creme (--ouro-fraco); o #6B7176 dava 4,49 */
  --sobre-tinta:#FFFFFF;           /* texto sobre a barra escura do topo */
  --sobre-tinta-fraco:rgba(255,255,255,.65);

  /* --- traços --- */
  --borda:#E3E5E8;
  --linha:#EFF0F2;
  --campo-borda:#CFD3D7;

  /* --- significado --- */
  --ok:#1E6B45;        --ok-fraco:#EFF7F2;   --ok-borda:#C6E3D3;
  --erro:#B32020;      --erro-fraco:#FEF4F4; --erro-borda:#E6C7C7;
  --alerta:#9A5B00;    --alerta-fraco:#FFF8EC;
  --fila:#5E35B1;      --fila-fraco:#F8F4FD; --fila-borda:#D6CBEE;
  /* Informação vinda do Kenlo. Azul pra não se confundir com os avisos de
     qualidade (dourado) nem com os motivos de invalidação (vermelho):
     são três coisas diferentes e a gerência precisa distinguir de longe. */
  --info:#2C6FA8;      --info-fraco:#F2F7FC;
  /* Possível imóvel repetido. Roxo porque aqui não há erro nenhum — só
     uma coincidência que merece o olho de alguém.
     Puxa pro rosado, e o da fila pro azulado: os dois são roxo claro e
     chegam a aparecer no mesmo cartão. O que separa é o tom e a cor do
     rótulo, não o brilho — por brilho são iguais. */
  --coincidencia:#6B5BA8;  --coincidencia-fraco:#F9F4FA;
  /* O cinza das barras de gráfico que representam o total. */
  --barra-vazia:#DFE3E7;
  /* A faixa de "sem sinal": sempre escura, porque o texto é branco. */
  --faixa-bom:#1F7A4D;  --faixa-ruim:#B32020;

  /* --- desligado ---
     O texto do botão desligado precisa ser LIDO: é nele que aparece
     "enviando…" e "na fila (3º)". Era #83898E, que dá 2,5:1 sobre o
     cinza do botão — praticamente invisível no sol. Agora passa de 4,5:1. */
  --morto:#D6D9DC;  --sobre-morto:#54595E;

  /* --- profundidade --- */
  --sombra:0 1px 2px rgba(16,18,20,.05), 0 1px 3px rgba(16,18,20,.04);
  --sombra-alta:0 4px 16px rgba(16,18,20,.10);
  --sombra-janela:0 20px 60px rgba(0,0,0,.30);
  --cortina:rgba(16,18,20,.5);
  /* A sombrinha da borda da tabela rolável precisa saber a cor do painel
     para o degradê sumir dentro dele. */
  --painel-transparente:rgba(255,255,255,0);
  --vinco:rgba(0,0,0,.10);

  /* --- forma --- */
  --raio:10px;
  --raio-p:7px;
  --raio-g:12px;

  /* --- botões: a escala única --- */
  --btn-altura:44px;
  --btn-altura-p:34px;
  --btn-altura-g:52px;
  --btn-lado:22px;        /* respiro dos lados, no tamanho padrão */
  --btn-lado-p:13px;
  --btn-lado-g:28px;
  --btn-texto:15px;
  --btn-texto-p:13px;
  --btn-texto-g:16px;

  color-scheme:light;
}


/* ------------------------------------------------------------
   2. TOKENS — TEMA ESCURO
   ------------------------------------------------------------
   UM bloco só, com UM gatilho: o atributo `data-tema` no <html>.

   Quem põe esse atributo é o script no <head> do base.html, que roda
   antes de a página aparecer. Ele decide assim:

       escolha guardada ("claro"/"escuro")  -> usa a escolha
       sem escolha                          -> lê a configuração do
                                               aparelho e marca
                                               data-segue-aparelho

   Eu tinha escrito isto de outro jeito: um bloco dentro de
   `@media (prefers-color-scheme: dark)` e outro em `[data-tema="escuro"]`,
   com a lista de cores copiada nos dois. Na primeira cor nova que
   acrescentei, ela entrou numa cópia e não na outra — e o tema escuro
   ficaria certo pra quem escolheu e errado pra quem só está com o celular
   no escuro. Lista copiada é lista que diverge.

   O preço de fazer assim é que o tema escuro depende de JavaScript. Como
   o botão de trocar também depende, e o sistema inteiro também, não se
   perde nada de verdade.                                              */
:root[data-tema="escuro"]{
  --ouro:#D9A03A;
  --ouro-escuro:#EFC071;      /* aqui ele é o ouro CLARO: é o que se lê
                                 sobre preto. Ler ouro escuro em fundo
                                 preto é impossível. */
  --ouro-hover:#E6B256;
  --ouro-fraco:#2A2214;
  --ouro-borda:#4A3B1E;
  --sobre-ouro:#140F04;

  --tinta:#111315;
  --tinta-2:#232729;
  --fundo:#0D0F10;
  --painel:#17191B;
  --campo:#1E2123;

  --texto:#E7E9EB;
  --texto-fraco:#9AA0A6;
  --sobre-tinta:#FFFFFF;
  --sobre-tinta-fraco:rgba(255,255,255,.62);

  --borda:#2B2F33;
  --linha:#232629;
  --campo-borda:#363B40;

  --ok:#5BC98E;      --ok-fraco:#12231A;   --ok-borda:#2B4D39;
  --erro:#F08A8A;    --erro-fraco:#2A1618; --erro-borda:#5A2E2E;
  --alerta:#E0A94A;  --alerta-fraco:#2A2214;
  --fila:#B9A3F0;    --fila-fraco:#201B2E; --fila-borda:#3B3156;
  --info:#79B0E4;          --info-fraco:#13212D;
  --coincidencia:#B3A3E8;  --coincidencia-fraco:#1E1A2B;
  --barra-vazia:#2F3438;

  --morto:#2A2E31;  --sobre-morto:#A3AAB0;

  /* No escuro, sombra quase não aparece: quem separa as camadas é a
     borda. A sombra fica só pra dar peso às coisas que flutuam. */
  --sombra:0 1px 2px rgba(0,0,0,.40);
  --sombra-alta:0 6px 22px rgba(0,0,0,.55);
  --sombra-janela:0 24px 70px rgba(0,0,0,.70);
  --cortina:rgba(0,0,0,.68);
  --painel-transparente:rgba(23,25,27,0);
  --vinco:rgba(0,0,0,.45);

  /* O navegador desenha as barras de rolagem, os campos nativos e o
     seletor de data conforme isto. Sem a linha, o calendário do celular
     abre branco no meio do tema escuro. */
  color-scheme:dark;
}


/* ------------------------------------------------------------
   3. BASE
   ------------------------------------------------------------ */
*{box-sizing:border-box}

/* O fundo vai no <html>, não só no <body>.
   Quando o conteúdo é mais curto que a tela, a área que sobra embaixo é
   pintada pelo <html> — e sem esta linha ela saía preta no tema claro,
   como uma tarja no pé da página. */
html{background:var(--fundo)}

/* Escala base maior: ele precisava dar 125% de zoom no navegador pra a
   tela ficar confortável — sinal de que o padrão estava apertado. Aqui
   já nasce nesse tamanho, em qualquer aparelho. */
body{margin:0;background:var(--fundo);color:var(--texto);
  font:16.5px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-text-size-adjust:100%;-webkit-font-smoothing:antialiased;
  transition:background-color .18s ease, color .18s ease}
a{color:var(--ouro-escuro)}
.limite{max-width:900px;margin:0 auto;padding:0 22px}
.largo{max-width:1300px}
main{padding:26px 0 80px}
/* `.limite` (0,1,0) ganhava de `main` (0,0,1) e zerava o respiro de cima e
   de baixo em TODAS as telas: a faixa de cobrança colava na barra escura e
   o último botão encostava no fim da página. Só o vertical; o lateral
   continua sendo o da `.limite`. */
main.limite{padding-top:22px;padding-bottom:80px}

/* O anel de foco do teclado. Vale pra tudo que se navega com Tab, e é o
   que permite usar o sistema sem mouse — inclusive por quem usa leitor
   de tela. `:focus-visible` só acende no teclado: o clique de mouse não
   deixa o anel preso no botão. */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--ouro);
  outline-offset:2px;
  border-radius:var(--raio-p)}


/* ------------------------------------------------------------
   4. TOPO
   ------------------------------------------------------------ */
header.topo{background:var(--tinta);color:var(--sobre-tinta);
  position:sticky;top:0;z-index:40}
header.topo .limite{display:flex;align-items:center;justify-content:space-between;
  gap:16px;min-height:68px;flex-wrap:wrap}
/* Logo própria pra fundo escuro: o texto "POR" vira branco e o dourado
   da marca é preservado. Antes um filtro deixava tudo branco e apagava
   o dourado, descaracterizando a marca. */
header.topo img{height:34px;width:auto;display:block}
.marca{display:flex;align-items:center;gap:12px}
.marca .divisor{width:1px;height:22px;background:rgba(255,255,255,.22)}
.marca .nome{font-size:14px;font-weight:600;letter-spacing:.01em;
  color:var(--sobre-tinta)}
header.topo .quem{font-size:13px;color:var(--sobre-tinta-fraco);
  text-align:right;line-height:1.4}
header.topo .quem strong{color:var(--sobre-tinta);font-weight:600;display:block}
header.topo .quem-links{white-space:normal}
/* Cada link inteiro numa linha: «Minha / conta» partido no celular. */
header.topo .quem-links a{white-space:nowrap}
header.topo a{color:rgba(255,255,255,.75);text-decoration:none;font-size:13px}
header.topo a:hover{color:#fff}

/* O lado direito do topo: o botão do tema e o que cada tela puser lá.
   Sem este agrupamento, o `space-between` jogaria o botão do tema pro
   meio da barra, entre a logo e o nome de quem está logado. */
.topo-direita{display:flex;align-items:center;gap:14px;margin-left:auto;
  min-width:0}

/* O botãozinho de trocar o tema.
   Mora no topo, discreto, do lado de quem está logado. Mostra o ícone do
   que vai acontecer ao clicar, não do estado atual — botão é promessa de
   ação, não placa de situação. */
.tema-troca{all:unset;cursor:pointer;display:inline-flex;align-items:center;
  justify-content:center;width:34px;height:34px;border-radius:99px;
  color:rgba(255,255,255,.70);flex:none;
  transition:background .15s, color .15s}
.tema-troca:hover{background:rgba(255,255,255,.12);color:#fff}
.tema-troca svg{width:18px;height:18px;display:block}
/* Mostra a LUA quando se está no claro (clicar leva ao escuro) e o SOL
   quando se está no escuro. O ícone é o destino, não o lugar. */
.tema-troca .sol{display:none}
.tema-troca .lua{display:block}
:root[data-tema="escuro"] .tema-troca .sol{display:block}
:root[data-tema="escuro"] .tema-troca .lua{display:none}


/* ------------------------------------------------------------
   5. CARTÕES E TÍTULOS
   ------------------------------------------------------------ */
.cartao{background:var(--painel);border:1px solid var(--borda);
  border-radius:var(--raio);padding:24px;margin-bottom:20px;box-shadow:var(--sombra)}
.cartao > h2{font-size:12px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--texto-fraco);margin:0 0 14px}
h1{font-size:25px;margin:0 0 4px;letter-spacing:-.015em;font-weight:650}
p.sub{color:var(--texto-fraco);font-size:14px;margin:0 0 18px}
.ajuda{font-size:13px;color:var(--texto-fraco);margin:5px 0 0}
.subtitulo{font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--texto-fraco);margin:18px 0 8px}


/* ------------------------------------------------------------
   6. ATALHOS
   ------------------------------------------------------------ */
.atalhos{display:grid;grid-template-columns:1fr;gap:14px;margin-bottom:20px}
@media(min-width:700px){.atalhos{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.atalhos.quatro{grid-template-columns:repeat(4,1fr)}}
/* Cinco atalhos: `auto-fit` em vez de `repeat(5,1fr)`.
   Com cinco colunas fixas, numa tela de 1000px cada cartão fica com
   200px — e a frase de baixo quebra em cinco linhas. Assim a fileira
   vira cinco, três ou duas conforme couber, sem nenhuma faixa de
   largura em que o texto fique espremido. */
@media(min-width:1000px){
  .atalhos.cinco{grid-template-columns:repeat(auto-fit, minmax(230px, 1fr))}}
/* O BRILHO DOURADO AO PASSAR O MOUSE.
   Um clarão suave que nasce do canto de cima, como se a luz entrasse por
   ali — não um fundo dourado chapado, que competiria com o texto do
   cartão. O `position:relative` e o `overflow:hidden` existem pra prender
   o clarão dentro da borda arredondada.

   Só no mouse: `@media (hover:hover)`. No celular não há "passar por
   cima" — o primeiro toque viraria o hover e o cartão ficaria aceso
   depois de clicado, parecendo selecionado sem estar. */
.atalho{background:var(--painel);border:1px solid var(--borda);border-radius:var(--raio);
  padding:22px;text-align:left;cursor:pointer;box-shadow:var(--sombra);
  transition:border-color .15s,box-shadow .15s,transform .15s;display:block;
  width:100%;font:inherit;color:inherit;text-decoration:none;min-height:0;
  position:relative;overflow:hidden;isolation:isolate}
.atalho::before{content:"";position:absolute;inset:0;z-index:-1;
  background:radial-gradient(120% 90% at 18% 0%,
             var(--ouro-fraco) 0%, transparent 62%);
  opacity:0;transition:opacity .18s}
@media (hover:hover){
  .atalho:hover::before, .atalho:focus-visible::before{opacity:1}
}
.atalho:hover{border-color:var(--ouro);box-shadow:var(--sombra-alta);transform:translateY(-1px)}
.atalho:hover .icone{background:var(--ouro);color:var(--sobre-ouro)}
.atalho .icone{transition:background-color .18s,color .18s}
.atalho .icone{width:34px;height:34px;border-radius:8px;background:var(--ouro-fraco);
  color:var(--ouro-escuro);display:flex;align-items:center;justify-content:center;
  font-size:17px;margin-bottom:12px}
.atalho b{display:block;font-size:15px;margin-bottom:3px;font-weight:600}
.atalho span{font-size:13px;color:var(--texto-fraco);line-height:1.45;display:block}


/* ------------------------------------------------------------
   7. NÚMEROS E BARRA DE PROGRESSO
   ------------------------------------------------------------ */
.numeros{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:760px){.numeros{grid-template-columns:repeat(4,1fr)}}
.numero{background:var(--painel);border:1px solid var(--borda);border-radius:var(--raio);
  padding:14px 16px;box-shadow:var(--sombra)}
.numero .valor{font-size:30px;font-weight:650;letter-spacing:-.02em;line-height:1.1;
  font-variant-numeric:tabular-nums}
.numero .rotulo{font-size:12px;color:var(--texto-fraco);text-transform:uppercase;
  letter-spacing:.05em;margin-top:4px}

.barra{height:8px;background:var(--linha);border-radius:99px;overflow:hidden;margin:8px 0 6px}
.barra i{display:block;height:100%;background:var(--ouro);border-radius:99px;
  transition:width .4s ease}
.barra.completa i{background:var(--ok)}


/* ------------------------------------------------------------
   8. CAMPOS
   ------------------------------------------------------------ */
label{display:block;font-size:13.5px;font-weight:600;margin-bottom:5px}
.obrig::after{content:" *";color:var(--ouro-escuro)}
input,select,textarea{width:100%;font:inherit;color:var(--texto);
  background:var(--campo);border:1px solid var(--campo-borda);
  border-radius:var(--raio-p);padding:11px 13px;
  transition:border-color .12s, background-color .18s}
input:focus,select:focus,textarea:focus{outline:2px solid var(--ouro);
  outline-offset:-1px;border-color:var(--ouro)}
input::placeholder,textarea::placeholder{color:var(--texto-fraco);opacity:.75}
textarea{min-height:92px;resize:vertical}
.campo{margin-bottom:14px;position:relative}
.dupla{display:grid;grid-template-columns:1fr;gap:0 14px}
@media(min-width:620px){.dupla{grid-template-columns:1fr 1fr}}

/* Campo de senha com o olhinho de ver o que foi digitado. */
.campo-senha{position:relative}
.campo-senha input{padding-right:46px}
.olho{all:unset;position:absolute;right:6px;top:50%;transform:translateY(-50%);
  cursor:pointer;padding:8px;color:var(--texto-fraco);line-height:0;
  border-radius:6px}
.olho:hover{color:var(--texto);background:var(--fundo)}
.olho svg{width:20px;height:20px;display:block}


/* ------------------------------------------------------------
   9. BOTÕES — A ESCALA ÚNICA
   ------------------------------------------------------------

   Três tamanhos e quatro intenções. Nada de `style=` em botão: se
   aparecer um tamanho novo, ele entra aqui, com nome.

   TAMANHO                           INTENÇÃO
     (padrão)  44px   o normal        .principal   a ação da tela (dourado)
     .pequeno  34px   dentro de linha .secundario  alternativa, voltar
                      de tabela       .perigo      apagar, cancelar
     .grande   52px   entrar, enviar  .fantasma    ação discreta, sem caixa
                      a captação

   MODIFICADORES
     .largo     ocupa a linha inteira
     .so-icone  quadrado, só o desenho dentro

   Alinhar pela ALTURA e não pelo padding é o que faz o botão com ícone
   ficar do mesmo tamanho do botão só de texto. Era isso que deixava a
   fileira torta.                                                   */
/* A base de TODO botão: só tipografia e cursor. Nada de tamanho aqui.

   Isto é de propósito. Se a altura viesse de `button{}`, ela cairia
   também nos botõezinhos de 22px que ficam em cima das fotos, no ✕ de
   fechar janela e nas abas — e todos esses viram blocos de 44px. Foi o
   que aconteceu na primeira tentativa.

   Quem quer a escala pede por nome: .principal, .secundario, .perigo,
   .fantasma, ou .botao num link. */
button{
  font:inherit;
  font-weight:600;
  cursor:pointer;
  color:inherit;
  background:none;
  border:1px solid transparent;
  border-radius:var(--raio-p)}

/* A ESCALA ÚNICA

   TAMANHO                            INTENÇÃO
     (padrão)  44px  o normal          .principal   a ação da tela (dourado)
     .pequeno  34px  dentro de linha   .secundario  alternativa, voltar
                     de tabela         .perigo      apagar, cancelar
     .grande   52px  entrar, enviar    .fantasma    ação discreta, sem caixa
                     a captação

   MODIFICADORES
     .largo     ocupa a linha inteira
     .cresce    ocupa a sobra da linha
     .so-icone  quadrado, só o desenho dentro

   Alinhar pela ALTURA, e não pelo padding, é o que faz o botão com ícone
   ficar do mesmo tamanho do botão só de texto. Era isso que deixava a
   fileira torta.                                                      */
.principal, .secundario, .perigo, .fantasma, .botao{
  font:inherit;
  font-size:var(--btn-texto);
  font-weight:600;
  line-height:1;
  cursor:pointer;
  border:1px solid transparent;
  border-radius:var(--raio-p);
  padding:0 var(--btn-lado);
  min-height:var(--btn-altura);
  height:var(--btn-altura);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  white-space:nowrap;
  text-decoration:none;
  background:transparent;
  color:var(--texto);
  transition:background-color .14s, border-color .14s, color .14s}

.principal.pequeno, .secundario.pequeno, .perigo.pequeno,
.fantasma.pequeno, .botao.pequeno{
  font-size:var(--btn-texto-p);
  padding:0 var(--btn-lado-p);
  min-height:var(--btn-altura-p);
  height:var(--btn-altura-p)}

.principal.grande, .secundario.grande, .perigo.grande,
.fantasma.grande, .botao.grande{
  font-size:var(--btn-texto-g);
  padding:0 var(--btn-lado-g);
  min-height:var(--btn-altura-g);
  height:var(--btn-altura-g)}

.largo{width:100%}

/* O botão quadrado, só com o desenho dentro.
   Os três seletores do `padding:0` existem por causa de especificidade:
   `.so-icone` sozinho é (0,1,0) e perdia pro `.secundario.pequeno`
   (0,2,0), que vem antes com `padding:0 13px`. Sobravam 6px de largura
   e o ícone era espremido até virar um pontinho. Por fora o botão
   parecia certo — só o desenho é que tinha sumido. */
/* Um <label> que abre o seletor de arquivo e precisa parecer botão.
   `label{margin-bottom:5px}` vale pra todo rótulo de campo, e dentro de
   uma fileira `.acoes` isso deixava os dois 2,5px acima dos vizinhos —
   dois botões do mesmo grupo, visivelmente tortos. */
.rotulo-botao{margin-bottom:0;cursor:pointer}

.so-icone, .so-icone.pequeno, .so-icone.grande{padding:0}
.so-icone{width:var(--btn-altura);flex:none}
.so-icone.pequeno{width:var(--btn-altura-p)}
.so-icone.grande{width:var(--btn-altura-g)}
/* `flex:none` no desenho: sem isso ele volta a ser espremido na primeira
   vez que o botão ficar apertado. */
.so-icone svg{width:18px;height:18px;display:block;flex:none}

/* Botão que quebra em duas linhas (texto longo em celular estreito).
   Sem isto a altura fixa cortaria a segunda linha. */
.duas-linhas{height:auto;padding-top:10px;padding-bottom:10px;
  white-space:normal;line-height:1.3;text-align:center}

.principal{background:var(--ouro);color:var(--sobre-ouro);border-color:var(--ouro)}
.principal:hover{background:var(--ouro-hover);border-color:var(--ouro-hover);
  color:var(--sobre-ouro)}

.secundario{background:var(--painel);color:var(--texto);border-color:var(--campo-borda)}
.secundario:hover{background:var(--fundo)}

.perigo{background:var(--painel);color:var(--erro);border-color:var(--erro-borda)}
.perigo:hover{background:var(--erro-fraco)}

/* Ação discreta, sem caixa: "remover", "apagar", "ver detalhes" dentro de
   uma linha de tabela. Antes estes usavam a classe `.fechar` — a do X da
   janela — com um `font-size` escrito na mão. Funcionava por acidente:
   `.fechar` tem `all:unset`, então o botão perdia padding, altura e área
   de toque, e virava um texto apertado difícil de acertar com o dedo. */
.fantasma{background:transparent;color:var(--texto-fraco);border-color:transparent}
.fantasma:hover{background:var(--fundo);color:var(--texto)}
.fantasma.ruim{color:var(--erro)}
.fantasma.ruim:hover{color:var(--erro);background:var(--erro-fraco)}

button:disabled, .botao[aria-disabled="true"]{
  background:var(--morto);color:var(--sobre-morto);
  cursor:not-allowed;border-color:transparent}
button:disabled:hover{background:var(--morto)}

.acoes{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin-top:10px}
.estado{color:var(--texto-fraco);font-size:13px}

/* O X de fechar janela. Não é da escala: é um alvo, não um botão. */
.fechar{all:unset;cursor:pointer;font-size:24px;line-height:1;
  color:var(--texto-fraco);padding:0 6px;min-height:0;border-radius:6px}
.fechar:hover{color:var(--texto)}


/* ------------------------------------------------------------
   10. AVISOS
   ------------------------------------------------------------ */
.alerta{border-left:3px solid var(--erro);background:var(--erro-fraco);
  color:var(--texto);
  padding:11px 13px;border-radius:0 var(--raio-p) var(--raio-p) 0;
  font-size:14px;margin-bottom:14px}
.aviso-ouro{border-left:3px solid var(--ouro);background:var(--ouro-fraco);
  color:var(--texto);
  padding:11px 13px;border-radius:0 var(--raio-p) var(--raio-p) 0;
  font-size:14px;margin-bottom:14px}
.aviso-ok{border-left:3px solid var(--ok);background:var(--ok-fraco);
  color:var(--texto);
  padding:11px 13px;border-radius:0 var(--raio-p) var(--raio-p) 0;
  font-size:14px;margin-bottom:14px}


/* ------------------------------------------------------------
   11. TABELAS
   ------------------------------------------------------------ */
/* Tabela no celular: rola dentro da própria caixa. Sem isto, a tabela de
   corretores empurrava a página inteira pro lado — o cabeçalho e os
   números ficavam espremidos à esquerda, com faixa branca à direita.
   Parecia site quebrado. */
.rolavel{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -2px;padding:0 2px}
.rolavel table{min-width:520px}

/* Tabela de poucas colunas não precisa de 520px. No celular de 390, o
   min-width cortava a coluna de situação na borda. */
.rolavel.estreita table{min-width:0}

/* Sombra na borda enquanto houver conteúdo escondido — sem ela, a tabela
   parece cortada em vez de rolável. Os degradês usam a cor do painel,
   que muda com o tema. */
.rolavel{background:
  linear-gradient(to right, var(--painel) 30%, var(--painel-transparente)),
  linear-gradient(to right, var(--painel-transparente), var(--painel) 70%) 100% 0,
  radial-gradient(farthest-side at 0 50%, var(--vinco), transparent),
  radial-gradient(farthest-side at 100% 50%, var(--vinco), transparent) 100% 0;
  background-repeat:no-repeat;
  background-size:36px 100%, 36px 100%, 14px 100%, 14px 100%;
  background-attachment:local, local, scroll, scroll}

table{width:100%;border-collapse:collapse;font-size:14px}
th,td{text-align:left;padding:11px 8px;border-bottom:1px solid var(--linha);
  vertical-align:top}
th{font-size:11px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--texto-fraco);font-weight:700}
tr:last-child td{border-bottom:0}
code{background:var(--fundo);padding:2px 7px;border-radius:5px;font-size:12.5px;
  word-break:break-all;border:1px solid var(--borda);color:var(--texto)}


/* ------------------------------------------------------------
   12. SELOS
   ------------------------------------------------------------ */
.selo{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 9px;
  border-radius:99px;border:1px solid var(--borda);background:var(--fundo);
  color:var(--texto-fraco);letter-spacing:.01em}
.selo.vivo{border-color:var(--ok-borda);background:var(--ok-fraco);color:var(--ok)}
.selo.morto{border-color:var(--erro-borda);background:var(--erro-fraco);color:var(--erro)}
.selo.espera{border-color:var(--ouro-borda);background:var(--ouro-fraco);color:var(--alerta)}
/* Na fila: parada esperando a gerência, não erro do corretor. */
.selo.fila{border-color:var(--fila-borda);background:var(--fila-fraco);color:var(--fila)}


/* ------------------------------------------------------------
   13. JANELA SOBREPOSTA
   ------------------------------------------------------------ */
.cortina{position:fixed;inset:0;background:var(--cortina);z-index:60;
  display:none;align-items:flex-start;justify-content:center;padding:32px 16px;
  overflow:auto}
.cortina.aberta{display:flex}
.janela{background:var(--painel);border:1px solid var(--borda);
  border-radius:var(--raio-g);max-width:820px;width:100%;
  box-shadow:var(--sombra-janela);animation:sobe .18s ease}
@keyframes sobe{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.janela .cabeca{display:flex;align-items:center;justify-content:space-between;
  padding:18px 20px;border-bottom:1px solid var(--linha)}
.janela .cabeca h2{margin:0;font-size:16px;font-weight:650;text-transform:none;
  letter-spacing:0;color:var(--texto)}
.janela .corpo{padding:24px}


/* ------------------------------------------------------------
   14. ABAS
   ------------------------------------------------------------ */
/* A BARRA DE ABAS ROLA DE LADO, E PRECISA PARECER QUE ROLA.
   São dezessete abas na gerência: as últimas ficam fora da tela, e sem
   nenhum sinal disso elas simplesmente não existem pra quem olha. Foi o
   que aconteceu com "Links universais" — estava lá, no fim, e a pergunta
   que chegou foi "não sei onde estão".

   A sombra na borda direita é a dica: ela aparece quando há mais coisa
   pra ver. `mask-image` desbota o conteúdo em vez de desenhar uma tarja
   por cima, então funciona nos dois temas sem saber a cor do fundo. */
.abas{display:flex;gap:4px;border-bottom:1px solid var(--borda);margin-bottom:20px;
  overflow-x:auto;scrollbar-width:thin;
  mask-image:linear-gradient(to right, #000 calc(100% - 28px), transparent)}
/* Quando tudo cabe, não há o que desbotar. `scroll-timeline` ainda não é
   de uso geral, então a máscara some assim que a barra deixa de rolar —
   o que o navegador sabe pelo `:not(:hover)` não resolve. Fica simples:
   a máscara some em telas largas, onde as abas cabem. */
@media (min-width:1500px){ .abas{mask-image:none} }
/* As abas não seguem a escala de botão: são navegação, não ação. Por isso
   zeram altura e caixa — senão a barra vira uma fileira de botões. */
.abas button, .abas .aba-link{
  background:none;border:0;border-bottom:2px solid transparent;
  border-radius:0;padding:13px 16px;color:var(--texto-fraco);font-weight:600;
  font-size:14px;white-space:nowrap;text-decoration:none;
  height:auto;min-height:0;display:inline-block;line-height:normal}
.abas button.ativa, .abas .aba-link.ativa{
  color:var(--ouro-escuro);border-bottom-color:var(--ouro)}
.abas button:hover, .abas .aba-link:hover{color:var(--ouro-escuro)}
/* Item da barra de abas que não navega: FAZ alguma coisa ("+ Captar
   imóvel"). Dourado o tempo todo pra se distinguir das abas. */
.abas .aba-acao{color:var(--ouro-escuro)}
.aba{display:none}
.aba.ativa{display:block}


/* ------------------------------------------------------------
   15. AJUSTES PARA O DEDO
   ------------------------------------------------------------
   A regra olha o TIPO DE ENTRADA, não a largura da tela. Antes valia até
   760px, e um celular girado (780px) ou um tablet caía fora — a pessoa
   perdia os ajustes justamente ao virar o aparelho pra enxergar melhor. */
@media (max-width: 520px){
  /* O cabeçalho quebrava: o nome e os links iam pra outra linha e
     empurravam o conteúdo pra cima do título. */
  header.topo{flex-wrap:wrap;row-gap:4px;padding-top:10px;padding-bottom:10px}
  header.topo .quem{text-align:right;flex:1;min-width:0}
  header.topo .quem strong{display:inline;margin-right:6px}
  /* A ÁREA FICA, MENOR. Ela dizia sempre «Captação» e por isso saía no
     celular; agora diz QUEM está usando (Admin, Gerência, Jurídico,
     Captação) — e é justamente no celular, emprestado ou na mão de outra
     pessoa, que isso mais importa. */
  .marca{gap:8px}
  header.topo img{height:28px}
  header.topo .marca .divisor{height:16px}
  header.topo .marca .nome{font-size:12px;white-space:nowrap}

  /* O botão do tema vai pro canto direito, depois do nome.
     Na ordem natural ele fica ENTRE a logo e o nome de quem está logado,
     e com a tela estreita isso espreme os três. No canto ele some do
     caminho sem deixar de existir. */
  .topo-direita{gap:10px}
  .topo-direita .tema-troca{order:2}
  .topo-direita .quem{order:1}
}

@media (hover: none) and (pointer: coarse){
  /* 16px é o mínimo que o iPhone aceita sem aproximar a tela ao tocar num
     campo. Com menos, a pessoa precisa afastar com os dedos a cada campo. */
  input, select, textarea{font-size:16px}
  input[type=checkbox], input[type=radio]{width:20px;height:20px;min-width:20px}

  /* Alvo de toque: nada abaixo de 40px. Como a escala já dá 44px no
     padrão, só o tamanho pequeno precisa crescer. */
  .principal.pequeno, .secundario.pequeno, .perigo.pequeno,
  .fantasma.pequeno, .botao.pequeno{min-height:40px;height:40px}
  .so-icone.pequeno{width:40px}
  .fechar{padding:10px 12px}
  /* Os dois botõezinhos que não seguem a escala, mas são tocados: o do
     tema, no topo, e o olhinho de ver a senha. */
  .tema-troca{width:40px;height:40px}
  .olho{padding:10px}


  /* Janela no celular: ocupa a tela. Uma janela flutuante com 12 linhas
     de texto não cabe num celular — sobra pouco pro que importa e o dedo
     esbarra na cortina ao rolar. */
  .cortina{padding:0;align-items:stretch}
  .janela{max-width:100%;border-radius:0;min-height:100%;border:0;
    display:flex;flex-direction:column}
  .janela .cabeca{position:sticky;top:0;z-index:2;background:var(--painel)}
  .janela .corpo{padding:16px;flex:1;overflow-y:auto;
    -webkit-overflow-scrolling:touch}
  .janela .corpo textarea{min-height:180px}
  /* Os botões lado a lado não cabem: empilham. */
  .janela .acoes{flex-direction:column;align-items:stretch}
  .janela .acoes button, .janela .acoes .botao{width:100%}
}


/* ------------------------------------------------------------
   16. BARRA DE CONVITE (instalar no celular, oferecer a digital)
   ------------------------------------------------------------
   Barras que nascem de baixo pra oferecer alguma coisa. A de instalar é
   escura nos dois temas de propósito: ela não é parte da tela, é um
   recado por cima dela, e o contraste é o que faz a pessoa reparar.   */
.barra-convite{position:fixed;left:12px;right:12px;z-index:80;
  bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  background:var(--tinta-2);color:var(--sobre-tinta);
  border-radius:var(--raio);padding:14px 16px;
  display:flex;gap:12px;align-items:center;
  box-shadow:var(--sombra-alta)}
.barra-convite .texto{flex:1;font-size:14px;line-height:1.4;min-width:0}
.barra-convite .texto span{color:var(--sobre-tinta-fraco)}
/* "Agora não": precisa existir, mas não competir com o botão de ação.
   Entra na régua (por isso o `.fantasma` ao lado no HTML não é mais
   necessário): sem altura própria, ele ficava com ~20px de alvo numa
   barra que SÓ existe no celular — quem queria dispensar acertava
   "Instalar". */
.recusar{background:none;border:0;color:var(--sobre-tinta-fraco);
  font-size:13px;font-weight:500;padding:0 10px;flex:none;
  min-height:var(--btn-altura-p);height:var(--btn-altura-p);
  display:inline-flex;align-items:center;cursor:pointer;
  border-radius:var(--raio-p)}
.recusar:hover{color:var(--sobre-tinta);background:rgba(255,255,255,.10)}

/* A barra que oferece a digital depois do login. Esta é clara: aparece
   DENTRO do sistema, logo depois de entrar, e faz parte da tela. */
.barra-digital{position:fixed;left:0;right:0;bottom:0;z-index:95;
  background:var(--painel);border-top:1px solid var(--borda);
  padding:18px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  box-shadow:var(--sombra-alta)}

/* A faixa de sinal, no alto do formulário: "sem sinal", "sinal voltou".
   Cor cheia e texto claro nos dois temas — é um estado do aparelho, e
   precisa interromper a leitura. */
/* A FAIXA VAI EMBAIXO, NÃO EM CIMA.
   Ela ficava em `top:0`, por cima do cabeçalho fixo, e nada empurrava o
   conteúdo pra baixo. Enquanto o celular estivesse sem sinal — que é o
   cenário exato desta tela — ela tapava logo, nome de quem está logado,
   "Minha conta", "Sair" e o botão de tema, indefinidamente. Embaixo ela
   avisa igual e não esconde nada; é onde o telefone já põe esse tipo de
   recado. As cores vêm dos tokens: estavam escritas à mão, e o vermelho
   era literalmente uma cópia do valor de --erro do tema claro. */
.faixa-sinal{position:fixed;left:0;right:0;bottom:0;z-index:95;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  font-size:14px;text-align:center;font-weight:600;
  background:var(--tinta);color:var(--sobre-tinta)}
/* Tokens PRÓPRIOS, e iguais nos dois temas.
   O texto desta faixa é branco, e `--ok`/`--erro` do tema escuro são
   cores CLARAS (feitas pra texto sobre fundo escuro): branco sobre elas
   dá 2,1:1 e 2,4:1 — ilegível. Por isso aqui vale a versão escura das
   duas, nos dois temas: 6,5:1 e 6,7:1 com o branco. */
.faixa-sinal.bom{background:var(--faixa-bom);color:#fff}
.faixa-sinal.ruim{background:var(--faixa-ruim);color:#fff}

/* "Você tinha um cadastro em andamento": a barra que oferece retomar o
   rascunho. Escura nos dois temas, como a de instalar — é um recado por
   cima da tela, não parte dela. */
.barra-retomar{position:fixed;left:12px;right:12px;z-index:90;
  top:calc(12px + env(safe-area-inset-top, 0px));
  background:var(--tinta-2);color:var(--sobre-tinta);
  border-radius:var(--raio);padding:16px;max-width:560px;margin:0 auto;
  box-shadow:var(--sombra-alta)}
.barra-retomar .titulo{font-size:15px;margin-bottom:4px}
.barra-retomar .conta{font-size:13.5px;color:var(--sobre-tinta-fraco);
  margin-bottom:12px}
/* "Começar do zero" apaga trabalho: fica visível, mas discreto ao lado
   de "Continuar". Contorno em vez de preenchimento. */
/* `.pequeno` sozinho não existe na régua — ela é sempre
   `.principal.pequeno`, `.secundario.pequeno`, etc. Este botão usava
   `class="contorno-claro pequeno"` e saía sem altura, sem padding e com
   outro tamanho de texto, ao lado de um `.principal.pequeno` de 34px.
   Agora a classe traz a régua junto. */
.contorno-claro{background:none;color:var(--sobre-tinta-fraco);
  border:1px solid rgba(255,255,255,.25);
  font-size:var(--btn-texto-p);font-weight:600;line-height:1;
  padding:0 var(--btn-lado-p);cursor:pointer;
  min-height:var(--btn-altura-p);height:var(--btn-altura-p);
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--raio-p);white-space:nowrap}
.contorno-claro:hover{background:rgba(255,255,255,.10);color:#fff}


/* ------------------------------------------------------------
   17. O FUNDO DA TORRE
   ------------------------------------------------------------
   A torre da logo, em pontos, atrás do conteúdo. Entra no login, na
   captação nova e no "Preciso de ajuda?".

   Fica FIXO e atrás de tudo: acompanha a rolagem sem se mexer, como um
   papel de parede, e não entra na conta da altura da página. O conteúdo
   por cima mora em cartões de fundo sólido, então a leitura não disputa
   com o desenho em nenhum momento.                                   */
.fundo-torre{position:fixed;inset:0;z-index:0;pointer-events:none;
  overflow:hidden}
.fundo-torre canvas{display:block;width:100%;height:100%}

/* O canvas fica SEMPRE visível, porque o horizonte vale em toda tela.
   Quem some e volta é a TORRE, e isso agora é decidido pelo desenho (veja
   `data-torre` no fundo-torre.js), não por `display:none` — esconder o
   elemento esconderia o horizonte junto. */

/* Com o fundo na tela, o conteúdo precisa subir uma camada — senão ele
   fica atrás do desenho e some. O topo já tem z-index próprio.

   SEM `z-index`, e isso é o ponto.
   -------------------------------
   Estava `z-index:1`, e um número ali cria uma CAMADA FECHADA: tudo que
   mora dentro do `main` passa a ser empilhado entre si, e o maior
   z-index lá dentro vale 1 visto de fora. As janelas sobrepostas
   (z-index 60) moram dentro do `main` — então, em toda tela com fundo,
   elas apareciam ATRÁS da barra preta do topo (z-index 40). O título da
   janela ficava escondido debaixo do logotipo, e o × de fechar junto.

   `position:relative` sozinho já basta pro que se queria aqui: entre
   dois elementos posicionados sem z-index, quem vem depois no HTML pinta
   por cima, e o `main` vem depois do desenho. A diferença é que agora
   não há camada fechada, e a janela disputa com o topo em pé de
   igualdade — 60 contra 40. */
body.com-fundo main{position:relative}

/* O véu entre o desenho e o conteúdo.
   Sem ele, o contorno dourado passa por trás do texto solto (o que não
   está em cartão) e atrapalha a leitura justamente na tela de login, que
   é texto solto quase inteiro. Com ele, o desenho continua visível e o
   texto continua legível.

   O véu encolheu duas vezes. Ele nasceu cobrindo quase tudo, e o preço
   apareceu na tela: o desenho ficava lavado no computador e sumia no
   celular. Hoje o desenho é POSICIONADO fora do caminho do texto — o JS
   mede onde o conteúdo começa — então o véu só precisa proteger a faixa
   onde o conteúdo está, não a tela inteira. */

   E o véu é SÓ DA TORRE. O horizonte não precisa dele: ele mora no
   rodapé, já nasce apagado e nunca fica atrás de texto solto. Aplicar o
   véu em toda tela por causa dele apagaria o pouco que ele tem. */
.fundo-torre[data-torre="sim"]::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,
             var(--fundo) 0%, var(--fundo) 46%, transparent 72%);
  opacity:.5}
@media(min-width:760px){
  /* Em tela larga a forma fica na faixa esquerda e o conteúdo à direita:
     o véu só cobre o lado do conteúdo, e começa depois da forma. */
  .fundo-torre[data-torre="sim"]::after{
    background:linear-gradient(to right,
               transparent 0%, transparent 34%, var(--fundo) 62%,
               var(--fundo) 100%);
    opacity:.7}
}


/* ------------------------------------------------------------
   18. O CADEADO QUE ABRE (E FECHA)
   ------------------------------------------------------------
   A chave é o símbolo da marca, então o gesto de abrir vale alguma coisa
   aqui. Mas só em quem decide:

     ABRE   Entrar · Gerar link · Enviar ao Kenlo · Enviar a captação
     FECHA  Salvar e continuar depois

   Fechar em "salvar" não é piada: a pessoa está guardando, e o cadeado
   fechando diz exatamente isso.

   Em todo botão viraria ruído e cansaria na terceira vez. São cinco, e o
   que eles têm em comum é serem irreversíveis ou demorados — justamente
   onde um instante de confirmação visual ajuda em vez de atrapalhar.

   Dispara no CLIQUE, inclusive no celular, onde passar o mouse não
   existe. A ação acontece junto com a animação, não depois dela: só o
   envio de formulário que troca de página é segurado, porque senão a
   tela sairia no meio do gesto.                                      */
/* A torre é alta e estreita (1 por 2,1). A caixa respeita isso: forçada
   num quadrado, a logo esmaga e deixa de ser a logo. */
.cadeado{display:inline-block;width:11px;height:23px;flex:none;
  margin-right:1px}
.cadeado svg{width:100%;height:100%;display:block;overflow:visible}

/* A CHAVE é a única parte que gira. A torre fica parada, com o vazado da
   chave recortado nela — é ele que aparece quando a de cima sai do lugar.

   O eixo do giro vem no `style` do próprio caminho, calculado a partir
   da argola na hora de montar o desenho: `transform-origin` escrito aqui
   seria um número chutado, e a chave giraria pela ponta. */
.cadeado .chave{
  transition:transform .42s cubic-bezier(.34,1.3,.5,1)}

/* ABRINDO: um quarto de volta no sentido de destrancar. */
.cadeado.abriu .chave{transform:rotate(90deg)}

/* FECHANDO: começa virada e volta ao lugar. Como o repouso já é a chave
   no encaixe, a animação inteira mora no keyframe. */
.cadeado.fechou .chave{animation:chaveGira .42s cubic-bezier(.34,1.3,.5,1)}
@keyframes chaveGira{
  from{transform:rotate(90deg)}
  to{transform:none}
}

/* O histórico de versões de um documento.
   Fechado por padrão: numa pasta de 21 itens, abrir o histórico de todos
   transformaria a tela num rolo. O `summary` diz quantas são, que é o
   bastante pra decidir se vale abrir. */
.versoes-antigas{margin-top:8px}
.versoes-antigas summary{font-size:12.5px;color:var(--texto-fraco);
  cursor:pointer;padding:3px 0;list-style:none}
.versoes-antigas summary::-webkit-details-marker{display:none}
.versoes-antigas summary::before{content:"▸ ";font-size:10px}
.versoes-antigas[open] summary::before{content:"▾ "}
.versoes-antigas summary:hover{color:var(--texto)}
.uma-versao{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  padding:6px 0 6px 14px;font-size:12.5px;color:var(--texto-fraco);
  border-left:2px solid var(--borda);margin-left:4px}
.uma-versao em{font-style:normal;color:var(--texto-fraco);
  overflow-wrap:anywhere}

/* Os motivos de recusa prontos, na tela do jurídico.
   Linha que rola de lado no celular, com o mesmo esmaecido da barra de
   abas — pela mesma razão: sem ele, a última ficha fica cortada na borda
   e ninguém descobre que havia mais. */
.motivos-prontos{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.motivos-prontos button{padding:5px 10px;border:1px solid var(--borda);
  border-radius:999px;background:var(--fundo);color:var(--texto-fraco);
  font-size:12.5px;line-height:1.3;text-align:left;max-width:100%;
  overflow-wrap:anywhere}
.motivos-prontos button:hover{border-color:var(--ouro);color:var(--texto)}

/* A data de emissão do documento de contrato.
   Mora DENTRO da linha do documento, embaixo do nome, e não na coluna de
   ações: é informação sobre o papel, não uma decisão sobre ele. No
   celular empilha, porque um campo de data mais um botão não cabem ao
   lado do nome de "Declaração de quitação do condomínio". */
.forma-emissao{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-top:8px}
.forma-emissao label{display:flex;align-items:center;gap:6px;margin:0;
  font-size:13px;color:var(--texto-fraco);font-weight:500}
.forma-emissao input[type="date"]{width:auto;min-width:140px;padding:6px 8px;
  font-size:13px;margin:0}
.forma-emissao small{color:var(--texto-fraco)}
@media (max-width:620px){
  .forma-emissao label{width:100%}
  .forma-emissao input[type="date"]{flex:1 1 auto}
}

/* DEVOLVENDO: o mesmo giro de volta do `fechou`, com outro nome porque
   quer dizer outra coisa — ali a pessoa pediu pra fechar, aqui a
   fechadura não abriu.

   Precisa existir como classe separada por um detalhe do cascade: o
   `.abriu` é um ESTADO (`transform:rotate(90deg)` fica), não um pulso.
   Tirar o `.abriu` sozinho faria a chave voltar, mas pelo `transition`,
   suave demais pra ser lida como "não foi". E deixá-lo junto com a
   animação seria pior: terminado o keyframe, a chave saltaria de volta
   pros 90° do estado, que é o defeito de novo.

   `transition:none` porque, no mesmo quadro em que o `.abriu` sai, o
   `transition` da regra de cima também quer animar o mesmo transform —
   duas curvas de tempo diferentes empilhadas no mesmo movimento. A
   animação é quem manda aqui. */
.cadeado.devolveu .chave{transition:none;
  animation:chaveGira .42s cubic-bezier(.34,1.3,.5,1)}
.cadeado.devolveu .torre{animation:cadeadoBrilha .5s ease-out}

/* Um brilho curto na torre, no instante do giro. Dá o "clique" que o
   olho espera e que o botão sozinho não dá. */
.cadeado.abriu .torre, .cadeado.fechou .torre{
  animation:cadeadoBrilha .5s ease-out}
@keyframes cadeadoBrilha{
  0%{opacity:1} 35%{opacity:.45} 100%{opacity:1}
}


/* ------------------------------------------------------------
   19. UTILIDADES
   ------------------------------------------------------------
   Poucas, com nome, e só para as coisas que se repetem. Cada uma destas
   substitui um `style=` que estava escrito dentro de um template — é o
   que impede o visual de voltar a divergir na próxima entrega.        */
.oculto{display:none !important}
.titulo-barra{display:block;margin-bottom:4px}
.sub.apertado{margin:0 0 12px}
.acoes.sem-topo{margin-top:0}
.cresce{flex:1}              /* botão que ocupa a sobra da linha */
.sem-margem{margin:0}
.bom{color:var(--ok)}
.ruim{color:var(--erro)}
.atencao{color:var(--alerta)}
.fraco{color:var(--texto-fraco)}
.numerico{font-variant-numeric:tabular-nums}
.espaco-topo{margin-top:12px}
/* Marca o campo que a IA preencheu por dedução e precisa de olhada. */
.confira{font-size:11px;font-weight:700;color:var(--ouro-escuro);
  letter-spacing:.04em}

/* ------------------------------------------------------------
   19. GRÁFICOS
   ------------------------------------------------------------
   As cores dos gráficos são TOKENS PRÓPRIOS, separados dos da
   interface. Parece zelo demais e não é: o ouro da marca
   (--ouro, #D09028) dá 2,66:1 sobre o branco. Num botão isso não
   importa, porque o rótulo escuro por cima é que carrega a
   leitura; numa barra de gráfico a cor É o dado, e abaixo de 3:1
   a barra some do papel e da tela de quem enxerga pouco.

   Então o ouro dos gráficos é um passo mais escuro (#BB7F23), e
   o par com o azul foi conferido por conta: separação de 22 na
   simulação de daltonismo vermelho-verde e 26 na visão comum —
   bem acima do mínimo de 8. No escuro o par é outro, escolhido
   contra o fundo escuro, e não o mesmo clareado.

   Duas séries no máximo. Com três, nenhuma combinação daqui
   mantém a distância — e a saída certa é separar em dois
   gráficos, não inventar uma terceira cor.                     */
:root{
  --grafico-1:#BB7F23;
  /* O cinza do RESTO, nas barras empilhadas e nas colunas apagadas.
     Não é uma "segunda série": é o contexto que faz a parte dourada ter
     significado. Por isso é cinza de propósito — cor de identidade aqui
     faria o leitor procurar o que ela quer dizer.
     Mas tinha que ser VISÍVEL: estava usando a cor da linha de grade
     (1,22:1 sobre o branco), e a parte "ainda não" da barra
     simplesmente não existia no papel nem numa tela com reflexo. */
  --grafico-fraco:#AEB8C1;
  --grade:#E6E9EC;        /* linha de grade: um passo do fundo */
}
:root[data-tema="escuro"]{
  --grafico-1:#D9A03A;
  --grafico-fraco:#4F575E;
  --grade:#2A2D30;
}

/* ---- colunas (quanto, por período) ---- */
.colunas{display:flex;gap:10px;align-items:flex-end;justify-content:center;
  height:120px;padding-top:18px;border-bottom:1px solid var(--grade);
  margin:16px 0 0}
/* A coluna é uma FAIXA: a barra tem no máximo 24px e o resto da faixa é
   ar. Mas a faixa também tem teto. Sem ele, um gráfico de dois meses
   espalhava duas barrinhas de 24px nas pontas de um cartão de mil pixels,
   com um vazio no meio que parecia defeito. */
.colunas .col{flex:1 1 0;max-width:84px;display:flex;flex-direction:column;
  align-items:center;justify-content:flex-end;height:100%;position:relative}
/* A barra tem topo arredondado e base reta: ela NASCE da linha de
   base, e arredondar embaixo faria parecer que flutua. */
.colunas .marca{width:100%;max-width:24px;min-height:3px;
  background:var(--grafico-1);border-radius:4px 4px 0 0;
  transition:filter .12s}
.colunas .col:hover .marca, .colunas .col:focus-visible .marca{
  filter:brightness(.88)}
.colunas .marca.fraca{background:var(--grafico-fraco)}
/* PARTE DENTRO DO TODO, empilhada.
   O gráfico de "mês a mês" mostrava captações e fechadas como duas
   barras lado a lado — e fechadas é um PEDAÇO de captações, não uma
   categoria irmã. Lado a lado, a leitura natural é somar as duas, o que
   conta o mesmo imóvel duas vezes. Empilhado, a altura é o total e o
   ouro é a parte que virou imóvel: a mesma informação, sem a armadilha.
   A fresta de 2px na cor da superfície é o que separa os pedaços — sem
   contorno, que seria tinta que não é dado. */
.colunas .pilha{width:100%;max-width:24px;height:100%;
  display:flex;flex-direction:column;justify-content:flex-end;gap:2px}
.colunas .pilha .parte{width:100%;min-height:2px}
.colunas .pilha .parte.resto{background:var(--grafico-fraco);
  border-radius:4px 4px 0 0}
.colunas .pilha .parte.feita{background:var(--grafico-1)}
/* Quando não há "resto", o ouro é o topo e arredonda. */
.colunas .pilha .parte.feita:first-child{border-radius:4px 4px 0 0}
/* MUITAS COLUNAS: a folga encolhe.
   Com 30 dias no gráfico, a folga de 10px come mais espaço que as
   barras — o resultado é um campo de fios dourados com vão branco entre
   eles, que não lê como "quanto em cada dia". */
.colunas.apertadas{gap:2px}
.colunas.apertadas .col{max-width:none}
.colunas.apertadas .marca, .colunas.apertadas .pilha{max-width:none}
/* Os rótulos seguem a MESMA folga e o MESMO teto das faixas. Qualquer
   diferença aqui tira a data de baixo da sua barra — e numa fileira de
   trinta o desvio é cumulativo, então a última data termina a meio
   gráfico de distância da coluna que ela nomeia. */
.colunas-rotulos.apertadas{gap:2px}
.colunas-rotulos.apertadas span{max-width:none}
.colunas .valor{font-size:11.5px;color:var(--texto-fraco);margin-bottom:4px;
  font-variant-numeric:tabular-nums}
.colunas .valor.forte{color:var(--texto);font-weight:700}
/* Os rótulos acompanham as faixas — mesmo flex, mesmo teto, mesma folga.
   Qualquer diferença aqui tira o nome do mês de baixo da sua barra. */
.colunas-rotulos{display:flex;gap:10px;margin-top:6px;justify-content:center}
.colunas-rotulos span{flex:1 1 0;max-width:84px;text-align:center;
  font-size:11px;color:var(--texto-fraco)}

/* ---- barras deitadas (ranking) ---- */
/* O TRILHO é uma peça própria, não um filho de `.barras-h`.
   Era só `.barras-h .trilho`, e o relatório — que usa o trilho dentro de
   uma tabela, sem o grid — acabou reescrevendo as três propriedades no
   `style` de cada linha. Duas cópias da mesma barra, e a do CSS sem uso
   nenhum. Solto, serve aos dois. */
.trilho{background:var(--grade);border-radius:4px;height:14px}
.trilho i{display:block;height:100%;background:var(--grafico-1);
  border-radius:4px}
.barras-h{display:grid;grid-template-columns:auto 1fr auto;
  gap:8px 12px;align-items:center;margin-top:12px}
.barras-h .quem{font-size:13.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:150px}
.barras-h .quanto{font-size:13.5px;font-weight:700;
  font-variant-numeric:tabular-nums}

/* ---- medidor (um número contra um limite) ---- */
.medidor{position:relative;height:14px;background:var(--grade);
  border-radius:7px;margin:10px 0 0;overflow:visible}
.medidor i{display:block;height:100%;background:var(--grafico-1);
  border-radius:7px}
.medidor.bateu i{background:var(--ok)}
/* O risco do RITMO: onde a pessoa deveria estar hoje.
   É o que transforma "12 de 20" em "estou adiantado ou atrasado".
   Sem ele, só dá pra saber isso fazendo a conta de cabeça. */
.medidor .ritmo{position:absolute;top:-5px;bottom:-5px;width:2px;
  background:var(--texto);opacity:.55;border-radius:1px}
.medidor-pes{display:flex;justify-content:space-between;gap:10px;
  font-size:12.5px;color:var(--texto-fraco);margin-top:7px}

/* ---- legenda (obrigatória com duas séries) ---- */
.legenda{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;
  font-size:12.5px;color:var(--texto-fraco)}
.legenda span{display:inline-flex;align-items:center;gap:6px}
.legenda i{width:10px;height:10px;border-radius:3px;display:block}

/* ---- o balão de ajuda do gráfico ---- */
#dicaGrafico{position:fixed;z-index:60;pointer-events:none;opacity:0;
  background:var(--tinta);color:var(--sobre-tinta);font-size:12.5px;
  padding:6px 10px;border-radius:6px;white-space:nowrap;
  transition:opacity .1s;box-shadow:0 4px 14px rgba(0,0,0,.18)}
#dicaGrafico.aparece{opacity:1}

/* QUEM PEDIU MENOS MOVIMENTO PERDE A DECORAÇÃO, NÃO A INFORMAÇÃO.
   O `*{animation:none!important}` que estava aqui matava também os dois
   anéis de carregamento — o da pesquisa de condomínio e o do "Enviando…"
   do proprietário. Quem liga "reduzir movimento" no celular (gente com
   enxaqueca, labirintite) tocava em Enviar, via um anel PARADO ao lado de
   "Enviando…" e concluía que travou. Tocava de novo.

   Um indicador de progresso não é enfeite: é a única coisa que diz que o
   sistema está trabalhando. Ele continua girando, mais devagar. O que
   para é o resto. */
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .girando, .anel-girando{animation:gira 1.6s linear infinite!important}
}

/* O anel do carregamento mora AQUI, e não em cada tela.
   Ele estava escrito duas vezes, com dois nomes de animação diferentes
   ("gira" no proprietário, "girar" nos condomínios) — e a exceção acima
   só conseguiria salvar um dos dois. */
@keyframes gira{to{transform:rotate(360deg)}}
.anel-girando{width:18px;height:18px;flex:none;border-radius:50%;
  display:inline-block;border:2px solid var(--borda);
  border-top-color:var(--ouro);animation:gira .7s linear infinite}


/* ------------------------------------------------------------
   20. O PAINEL DE DESEMPENHO
   ------------------------------------------------------------
   Uma tela de métricas é três coisas empilhadas, e cada uma tem um
   trabalho diferente:

     a FAIXA    quatro números grandes — o relance
     o SELETOR  período e quais gráficos ficam na tela
     a GRADE    os gráficos escolhidos, um por cartão

   A ordem não é decorativa. Quem abre a tela quer saber "como estou
   indo" em dois segundos; quem fica quer entender por quê. Pôr o
   seletor antes dos números faria a tela começar com uma pergunta.  */

/* ---- a faixa de números ---- */
/* `auto-fit` com mínimo de 170px: quatro em linha no computador, dois e
   dois no celular, sem media query e sem número mágico de colunas. */
.faixa-kpi{display:grid;gap:12px;margin:18px 0 0;
  grid-template-columns:repeat(auto-fit, minmax(170px, 1fr))}
.kpi{border:1px solid var(--borda);border-radius:var(--raio);
  padding:14px 16px;background:var(--painel)}
.kpi .rotulo{font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--texto-fraco)}
/* `tabular-nums` para o número não dançar quando troca de 9 pra 10.
   Num painel que recarrega a cada mudança de período, a dança é
   visível e parece defeito de alinhamento. */
/* `.numero` sozinho é o CARTÃO de número da gerência (com borda e fundo);
   dentro do kpi ele é só o número — sem isso o 11 e o 100% do acervo
   apareciam numa caixa com cara de campo de digitar. */
.kpi .numero{background:none;border:0;padding:0;border-radius:0;box-shadow:none}
.kpi .numero{font-size:34px;font-weight:700;line-height:1.1;margin:4px 0 2px;
  font-variant-numeric:tabular-nums}
.kpi .pe{display:flex;align-items:baseline;justify-content:space-between;
  gap:8px;font-size:12.5px;color:var(--texto-fraco);flex-wrap:wrap}
.kpi .variacao{font-weight:650;white-space:nowrap}
.kpi .variacao.sobe{color:var(--ok)}
.kpi .variacao.desce{color:var(--erro)}
.kpi .variacao.igual{color:var(--texto-fraco);font-weight:400}

/* ---- o seletor ---- */
.escolhedor{border:1px solid var(--borda);border-radius:var(--raio);
  background:var(--painel);padding:14px 16px;margin:14px 0 0}
.topo-escolhedor{display:flex;align-items:flex-start;justify-content:space-between;
  gap:12px;flex-wrap:wrap}
.titulo-pequeno{font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--texto-fraco)}
.controles-escolhedor{display:flex;gap:10px;align-items:center;flex-wrap:wrap}

/* O grupo de período: um trilho só, com o escolhido em relevo.
   Botões soltos lado a lado não dizem que são as opções DA MESMA
   pergunta — e com quatro opções isso importa. */
.seletor-periodo{display:flex;background:var(--fundo);border-radius:9px;
  padding:3px;border:1px solid var(--borda);gap:2px}
.seletor-periodo a, .seletor-periodo button{
  font:inherit;font-size:13px;font-weight:600;border:0;background:none;
  color:var(--texto-fraco);padding:6px 12px;border-radius:7px;cursor:pointer;
  text-decoration:none;white-space:nowrap;line-height:1.2;min-height:0;
  height:auto}
.seletor-periodo a:hover, .seletor-periodo button:hover{color:var(--texto)}
.seletor-periodo .ativo{background:var(--painel);color:var(--texto);
  box-shadow:var(--sombra)}

.faixa-datas{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;
  margin-top:14px;padding-top:14px;border-top:1px solid var(--linha)}
.faixa-datas .campo{margin:0;min-width:150px}

.grade-escolha{margin-top:14px;padding-top:14px;border-top:1px solid var(--linha)}
.atalhos-grafico{display:flex;gap:8px;align-items:center;flex-wrap:wrap;
  margin-bottom:14px}
.chip{font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;
  border:1px solid var(--borda);background:var(--painel);color:var(--texto-fraco);
  padding:5px 12px;border-radius:99px;line-height:1.2;min-height:0;height:auto}
.chip:hover{border-color:var(--ouro-borda);color:var(--texto)}
.chip.ativo{background:var(--ouro-fraco);border-color:var(--ouro-borda);
  color:var(--ouro-escuro)}

.colunas-escolha{display:grid;gap:14px 24px;
  grid-template-columns:repeat(auto-fit, minmax(190px, 1fr))}
.grupo-escolha{border:0;padding:0;margin:0;min-width:0}
.grupo-escolha legend{font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:var(--texto-fraco);padding:0;margin-bottom:8px}
.caixa{display:flex;align-items:flex-start;gap:9px;margin:0 0 7px;
  font-size:13.5px;cursor:pointer;font-weight:400}
.caixa input{margin:0;flex:none;width:17px;height:17px;accent-color:var(--ouro)}

/* ---- a grade de gráficos ---- */
/* 320px de mínimo: abaixo disso uma barra deitada com rótulo não cabe,
   e a coluna vira uma pilha de reticências. */
/* `align-items:start` — sem isto o cartão mais ALTO da fileira estica
   todos os outros, e um gráfico de quatro barras ao lado do cartão de
   metas ganha trinta centímetros de branco embaixo. O branco não é
   respiro: parece conteúdo que não carregou. */
.grade-graficos{display:grid;gap:14px;margin-top:14px;align-items:start;
  grid-template-columns:repeat(auto-fit, minmax(320px, 1fr))}
.cartao-grafico{border:1px solid var(--borda);border-radius:var(--raio);
  background:var(--painel);padding:16px;min-width:0}
.cartao-grafico header{display:flex;align-items:flex-start;gap:10px;
  justify-content:space-between}
.cartao-grafico h3{margin:0;font-size:15.5px;font-weight:650;line-height:1.3}
.acoes-grafico{display:flex;gap:4px;align-items:center;flex:none}
/* Os dois botõezinhos do canto. Pequenos, mas com 28px de alvo: menos
   que isso e o × só funciona pra quem tem mão firme. */
.acoes-grafico .so-icone{width:28px;height:28px;min-height:0;
  font-size:13px;font-weight:700;border-radius:7px;
  background:var(--painel);border:1px solid var(--borda);color:var(--texto-fraco)}
.acoes-grafico .so-icone:hover{background:var(--fundo);color:var(--texto)}
.cartao-grafico .explicacao{margin:10px 0 0;font-size:13px;
  color:var(--texto-fraco);background:var(--fundo);padding:9px 11px;
  border-radius:var(--raio-p)}
/* A FRASE DE LEITURA.
   É o pedaço mais importante do cartão e o único que sobrevive a quem
   não sabe ler gráfico. Por isso fica em texto normal, e não em cinza
   de rodapé: o cinza diria "isto é detalhe". */
.cartao-grafico .leitura{margin:14px 0 0;padding-top:12px;font-size:13.5px;
  line-height:1.5;border-top:1px solid var(--linha)}
.sem-dado{color:var(--texto-fraco);font-size:13.5px;margin:14px 0 0;
  text-align:center;padding:18px 0}

/* ---- o calendário ---- */
/* A RAMPA DE OURO, em quatro degraus.
   Conferida por conta (OKLab): degraus com diferença de claridade acima
   de 0,06 — o mínimo pra um degrau ser VISTO como degrau — e o mais
   claro em 2,04:1 contra o branco, que é o piso pra um quadradinho
   de 11px não sumir numa tela com reflexo.

   O dia SEM NADA fica cinza, e não num ouro clarinho. Ouro pálido diria
   "trabalhou pouco" onde a verdade é "não trabalhou", e são duas coisas
   diferentes pra quem está olhando a própria constância. */
:root{
  --cal-0:#EDEFF1;
  --cal-1:#DEAD6F; --cal-2:#CA903F; --cal-3:#AF740F; --cal-4:#855000;
}
:root[data-tema="escuro"]{
  --cal-0:#23272B;
  --cal-1:#6C4300; --cal-2:#9B6400; --cal-3:#C78A32; --cal-4:#ECBA7A;
}
.calendario{margin-top:14px;overflow-x:auto;padding-bottom:4px}
.calendario .meses{display:flex;gap:3px;margin-left:34px;margin-bottom:4px}
.calendario .meses span{width:14px;flex:none;font-size:10px;
  color:var(--texto-fraco);white-space:nowrap}
.corpo-calendario{display:flex;gap:6px}
.dias-da-semana{display:flex;flex-direction:column;gap:3px;flex:none;
  width:28px}
.dias-da-semana span{height:14px;font-size:10px;color:var(--texto-fraco);
  line-height:14px}
.semanas{display:flex;gap:3px}
.semana{display:flex;flex-direction:column;gap:3px}
.dia{width:14px;height:14px;border-radius:3px;display:block;flex:none;
  background:var(--cal-0)}
.dia.n1{background:var(--cal-1)} .dia.n2{background:var(--cal-2)}
.dia.n3{background:var(--cal-3)} .dia.n4{background:var(--cal-4)}
/* O dia de hoje ganha um anel, e não uma cor: a cor já está ocupada
   dizendo quantos imóveis entraram. */
.dia.hoje{box-shadow:0 0 0 2px var(--texto)}
/* Dia que ainda não chegou não é dia sem trabalho. Fica quase
   invisível pra não entrar na conta que o olho faz. */
.dia.futuro{opacity:.35}
.dia.vazio{background:none}
.escala-calendario{display:flex;align-items:center;gap:4px;margin-top:10px;
  font-size:11.5px;color:var(--texto-fraco)}
.escala-calendario i{width:12px;height:12px;border-radius:3px;display:block}

/* ---- as metas dentro do cartão ---- */
.meta-cartao{border:1px solid var(--borda);border-radius:var(--raio-p);
  padding:14px;margin-top:12px;background:var(--fundo)}
.meta-cartao:first-of-type{margin-top:14px}
.cabeca-meta{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;flex-wrap:wrap;margin-bottom:6px;font-size:15px}
.cabeca-meta .selo{font-weight:500}
.numero-meta{font-size:30px;font-weight:700;line-height:1;
  font-variant-numeric:tabular-nums}
/* "apagar": ação destrutiva e rara. Texto puro, do tamanho do rodapé —
   um botão vermelho ao lado de cada meta convidaria ao acidente. */
.so-texto{font:inherit;font-size:12.5px;background:none;border:0;padding:0;
  color:var(--texto-fraco);text-decoration:underline;cursor:pointer;
  min-height:0;height:auto}
.so-texto:hover{color:var(--erro)}
/* As metas que não couberam no cartão. Uma linha cada — não somem, mas
   também não empurram o cartão pra baixo da tela. */
.metas-de-fora{margin-top:14px;padding-top:12px;
  border-top:1px solid var(--linha)}
.linha-meta{display:flex;justify-content:space-between;align-items:baseline;
  gap:10px;padding:7px 0;font-size:13.5px;border-bottom:1px solid var(--linha)}
.linha-meta:last-child{border-bottom:0}
.linha-meta strong{font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---- a marca dentro do botão de meta ----
   O "Criar meta" fica na mesma linha do "Escolher gráficos", no mesmo
   tamanho, com a torre da logo como selo — o mesmo desenho do
   `cadeado.js` que já está nos cinco botões de decisão.

   A versão anterior era um botão de 84 por 193 recortado no contorno da
   logo, com o texto deitado, plantado no fim da tela. A forma estava
   certa e o resultado, errado: no rodapé ele pesava mais que os números
   que a tela existe pra mostrar, e ler um rótulo de lado é um pedido
   que nenhum botão deveria fazer. A marca cabe num selo de 11px.

   A torre tem 11px de largura por 23 de altura; sem esta regra o
   `.cadeado` entra com a altura do botão e empurra o rótulo. */
.seletor-periodo + * .cadeado, .controles-escolhedor .cadeado{
  width:9px;height:19px}

/* ---- os tipos de meta, na janela ---- */
.tipos-de-meta{display:grid;gap:8px;margin-top:10px}
.tipo-meta{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  border:1px solid var(--borda);border-radius:var(--raio-p);padding:11px 13px;
  margin:0;font-weight:400;transition:border-color .12s, background .12s}
.tipo-meta:hover{border-color:var(--ouro-borda)}
.tipo-meta input{margin:2px 0 0;flex:none;width:17px;height:17px;
  accent-color:var(--ouro)}
/* `:has()` em vez de uma classe posta por JS: a janela de meta funciona
   com o script desligado, e a marcação tem que acompanhar. */
.tipo-meta:has(input:checked){border-color:var(--ouro);
  background:var(--ouro-fraco)}
.tipo-meta strong{display:block;font-size:14px;font-weight:650}
.tipo-meta small{display:block;font-size:12.5px;color:var(--texto-fraco);
  margin-top:2px;line-height:1.45}

/* A âncora do "#metricas". Precisa existir no fluxo pro navegador achar,
   e não pode ocupar espaço nem receber foco visível. */
.ancora{display:block;height:0;overflow:hidden}

@media (max-width:640px){
  .kpi .numero{font-size:28px}
  .grade-graficos{grid-template-columns:1fr}
  .topo-escolhedor{flex-direction:column;align-items:stretch}
  .controles-escolhedor{justify-content:space-between}
  /* O trilho de período ocupa a linha inteira e divide o espaço: com
     quatro opções, no celular elas não cabem lado a lado em tamanho
     legível se cada uma só ocupar o próprio texto. */
  .seletor-periodo{width:100%}
  .seletor-periodo a, .seletor-periodo button{flex:1 1 0;text-align:center;
    padding:7px 4px;font-size:12px}
}


/* ------------------------------------------------------------
   21. CONTRATOS
   ------------------------------------------------------------ */
.linha-contrato{display:flex;gap:16px;align-items:center;
  justify-content:space-between;flex-wrap:wrap;margin-bottom:12px}
.dados-contrato{flex:1 1 300px;min-width:0}
.cabeca-contrato{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  font-size:15px}
.prazo-estourado{color:var(--erro);font-weight:650}

/* ---- a faixa de cobrança, em toda tela ----
   Mora logo abaixo do topo, antes do conteúdo: é a primeira coisa depois
   da barra, em qualquer tela, porque o ponto dela é não poder ser
   contornada por quem só abre o painel e sai. */
.faixa-cobranca{display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;margin:0 0 18px;padding:13px 16px;
  border-radius:var(--raio);border:1px solid var(--ouro-borda);
  background:var(--ouro-fraco)}
.faixa-cobranca strong{display:block;font-size:14.5px}
.faixa-cobranca span{font-size:13.5px;color:var(--texto-fraco)}
/* Quando já travou, a faixa deixa de ser lembrete e vira explicação do
   que parou — e aí ela tem que parecer outra coisa, não a mesma mais
   insistente. */
.faixa-cobranca.travou{border-color:var(--erro-borda);
  background:var(--erro-fraco);border-left:4px solid var(--erro)}
.faixa-cobranca.travou strong{color:var(--erro)}

.aviso-prazo{margin-top:14px;padding:11px 13px;border-radius:var(--raio-p);
  background:var(--fundo);border:1px solid var(--borda);font-size:13.5px;
  line-height:1.5}
.aviso-prazo.estourado{background:var(--erro-fraco);
  border-color:var(--erro-borda)}

/* ---- a lista de papéis ---- */
.lista-documentos{margin-top:10px}
.documento-linha{display:flex;gap:14px;align-items:flex-start;
  justify-content:space-between;flex-wrap:wrap;
  padding:12px;border-radius:var(--raio-p);border:1px solid transparent}
.documento-linha + .documento-linha{margin-top:2px}
.documento-texto{flex:1 1 260px;min-width:0}
.documento-texto strong{font-size:14px;font-weight:600;line-height:1.4;
  margin-right:7px}
.documento-texto small{display:block;font-size:12.5px;
  color:var(--texto-fraco);margin-top:4px;line-height:1.5}
.documento-texto .motivo-recusa{color:var(--erro);font-weight:600}
.documento-acoes{display:flex;gap:7px;align-items:center;flex-wrap:wrap;
  flex:none}
.documento-acoes form{margin:0}
/* 14/10: com 5 ações (ver anexo, ver resumo, trocar, validar, recusar) a
   linha passava da tela do celular. Aí o bloco pode encolher e quebrar. */
@media (max-width:600px){
  .documento-acoes{flex:1 1 100%;min-width:0}
}
/* A cor do estado fica no FUNDO da linha, e o selo repete em texto.
   Cor sozinha não serve: quem não separa verde de vermelho ficaria sem
   saber o que já passou pelo jurídico. */
.documento-linha.validado{background:var(--ok-fraco);
  border-color:var(--ok-borda)}
.documento-linha.enviado{background:var(--ouro-fraco);
  border-color:var(--ouro-borda)}
/* Recusado é ROXO: vermelho fica pro papel que nunca chegou. Os dois
   pedem coisas diferentes do corretor — trazer vs. trocar. */
.documento-linha.recusado{background:var(--fila-fraco);
  border-color:var(--fila-borda)}
.documento-linha.recusado .motivo-recusa{color:var(--fila)}
.documento-linha.cobrado{background:var(--erro-fraco);
  border-color:var(--erro-borda)}
.documento-linha.faltando:hover{background:var(--fundo)}
.caixa-recusa{margin:0 12px 10px;padding:12px;border-radius:var(--raio-p);
  background:var(--erro-fraco);border:1px solid var(--erro-borda)}

/* ---- a escolha do imóvel, na janela de novo contrato ---- */
.lista-imoveis{max-height:280px;overflow-y:auto;border:1px solid var(--borda);
  border-radius:var(--raio-p);padding:6px}
.imovel-opcao{display:flex;gap:11px;align-items:flex-start;cursor:pointer;
  padding:10px 11px;margin:0;border-radius:var(--raio-p);font-weight:400;
  border:1px solid transparent}
.imovel-opcao:hover{background:var(--fundo)}
/* A busca esconde com `hidden`, e o display:flex acima ganhava dele: a lista não filtrava (14/10). */
.imovel-opcao[hidden]{display:none}
.imovel-opcao input{margin:2px 0 0;flex:none;width:17px;height:17px;
  accent-color:var(--ouro)}
.imovel-opcao strong{display:block;font-size:14px;font-weight:600}
.imovel-opcao small{display:block;font-size:12.5px;color:var(--texto-fraco);
  margin-top:2px}
.imovel-opcao:has(input:checked){background:var(--ouro-fraco);
  border-color:var(--ouro-borda)}

/* ------------------------------------------------------------
   22. CONFERIDAS EM PASTAS, ACERVO E JURÍDICO
   ------------------------------------------------------------ */
/* A pasta de um mês fechado. `<details>` nativo em vez de JavaScript:
   abre e fecha sem script, aparece na busca do navegador (Ctrl+F acha
   dentro de pasta fechada no Chrome) e funciona se o JS falhar. */
.cabeca-pasta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  cursor:pointer;list-style:none}
.cabeca-pasta::-webkit-details-marker{display:none}
.pasta-do-mes{padding:14px 16px;margin-bottom:10px}
.pasta-do-mes .icone-pasta{display:inline-block;color:var(--texto-fraco);
  transition:transform .15s;font-size:13px}
.pasta-do-mes[open] .icone-pasta{transform:rotate(90deg)}
.pasta-do-mes summary:hover strong{color:var(--ouro-escuro)}
.bloco-conferidas[hidden]{display:none}

.busca-acervo{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap}

/* A fila do jurídico. Cada item é um cartão, e não uma linha de tabela:
   são três ações por item (abrir, validar, recusar) e um formulário que
   abre embaixo — nada disso cabe numa célula. */
.item-da-fila{display:flex;gap:14px;align-items:flex-start;
  justify-content:space-between;flex-wrap:wrap;margin-bottom:10px}
/* Dois dias parados é o ponto em que o corretor começa a achar que
   ninguém olhou. A marca é a borda, não a cor de fundo: o fundo já está
   ocupado dizendo o que é cada tipo de item. */
.item-da-fila.esperando-demais{border-left:4px solid var(--erro)}
/* OS BOTÕES PRECISAM PODER QUEBRAR.
   `.documento-acoes` nasce com `flex:none` — faz sentido na lista de
   papéis de um contrato, onde são dois botões curtos. Na fila do
   jurídico são quatro, e um deles é "Abrir o documento": num celular de
   390px isso são 91 pixels a mais que a tela, e a página inteira passava
   a rolar de lado. Aqui o bloco volta a poder encolher e quebrar. */
.item-da-fila .documento-acoes{flex:1 1 auto;min-width:0;
  justify-content:flex-end}
@media (max-width:520px){
  /* Abaixo disso, os quatro botões em linha ficam estreitos demais pra
     ler. Cada um ocupa a largura inteira, na ordem em que se usa:
     abrir, validar, recusar, ver o contrato. */
  .item-da-fila .documento-acoes{flex-direction:column;align-items:stretch;
    width:100%}
  .item-da-fila .documento-acoes form{display:block}
  .item-da-fila .documento-acoes .botao,
  .item-da-fila .documento-acoes button{width:100%}
}
/* "O imóvel não está na lista": fechado por padrão, porque é a exceção.
   Aberto sempre, ele competiria com a lista do acervo — e o pedido era
   que a lista fosse cada vez mais o caminho. */
.fora-do-acervo{margin-top:14px;border:1px solid var(--borda);
  border-radius:var(--raio-p);padding:12px 14px;background:var(--fundo)}
.fora-do-acervo summary{cursor:pointer;font-size:13.5px;font-weight:600;
  color:var(--texto-fraco)}
.fora-do-acervo summary:hover{color:var(--ouro-escuro)}
.fora-do-acervo[open] summary{color:var(--texto)}

/* ------------------------------------------------------------
   23. LINKS UNIVERSAIS
   ------------------------------------------------------------ */
/* O endereço do link, pra copiar. `overflow-wrap` no <code> porque uma
   URL não tem espaço onde quebrar: sem isso ela empurra o cartão e a
   página inteira rola de lado no celular. */
.caixa-do-link{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  margin-top:12px;padding:10px 12px;border-radius:var(--raio-p);
  background:var(--fundo);border:1px solid var(--borda)}
.caixa-do-link code{flex:1 1 220px;min-width:0;font-size:13px;
  overflow-wrap:anywhere}
.endereco-do-link{display:flex;align-items:center;gap:2px}
.endereco-do-link span{color:var(--texto-fraco);font-size:14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.endereco-do-link input{flex:1 1 auto;min-width:0}
.abrir-ajustes{cursor:pointer;font-size:13.5px;font-weight:600;
  color:var(--texto-fraco)}
.abrir-ajustes:hover{color:var(--ouro-escuro)}
.forma-universal{margin-top:14px;padding-top:14px;
  border-top:1px solid var(--linha)}

.envio-avulso{display:flex;gap:14px;align-items:flex-start;
  justify-content:space-between;flex-wrap:wrap;padding:12px;
  border-radius:var(--raio-p);border:1px solid var(--borda);
  margin-top:10px}
.caixa-apontar{flex:1 1 100%;margin:12px 0 0;padding:12px;
  border-radius:var(--raio-p);background:var(--fundo);
  border:1px solid var(--borda)}
@media (max-width:520px){
  .envio-avulso .documento-acoes{flex-direction:column;align-items:stretch;
    width:100%}
  .envio-avulso .documento-acoes form{display:block}
  .envio-avulso .documento-acoes .botao,
  .envio-avulso .documento-acoes button{width:100%}
}

/* O BOTÃO DE TEXTO PURO ("apagar", "não se aplica", "tirar") NO DEDO.
   ---------------------------------------------------------------
   Ele é texto sublinhado de propósito — são ações raras e destrutivas,
   e um botão vermelho ao lado de cada item convidaria ao acidente. Mas
   raro não quer dizer difícil de acertar: no celular ele tinha 20px de
   altura, menos da metade do alvo mínimo.

   A folga é só ESPAÇO, por fora da letra: continua parecendo um link e
   passa a ter 44px de área. A margem negativa devolve esse espaço ao
   layout, pra fileira de ações não crescer por causa dele.

   ESTA REGRA MORA NO FIM DO ARQUIVO, e não junto das outras de toque lá
   em cima: `.so-texto` é declarado depois delas, com `padding:0`, e
   entre dois seletores de mesma força quem vem por último ganha. No
   meio do arquivo esta regra existia e não fazia nada. */
@media (hover: none) and (pointer: coarse){
  .so-texto{padding:12px 8px;margin:-12px -8px}
}

/* ---- os links universais no alto da gerência ---- */
.faixa-universais{margin-bottom:18px}
.cabeca-universais{display:flex;align-items:flex-start;
  justify-content:space-between;gap:14px;flex-wrap:wrap}
.um-universal{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin-top:12px;padding:11px 13px;border-radius:var(--raio-p);
  background:var(--fundo);border:1px solid var(--borda)}
.nome-do-universal{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;
  flex:0 0 auto}
.nome-do-universal strong{font-size:14.5px}
/* `overflow-wrap:anywhere` porque uma URL não tem espaço onde quebrar:
   sem isso ela empurra o cartão e a página rola de lado no celular. */
.um-universal code{flex:1 1 220px;min-width:0;font-size:13px;
  overflow-wrap:anywhere;color:var(--texto-fraco)}
.um-universal .acoes{flex:0 0 auto;margin:0}
@media (max-width:620px){
  .um-universal{align-items:stretch;flex-direction:column}
  /* `flex:none` AQUI é o que importa: em coluna, o `flex-basis:220px` da
     regra de cima deixa de ser largura e passa a ser ALTURA — e a URL
     virava uma caixa de 220px de alto com duas linhas de texto dentro.
     É o tipo de coisa que só aparece no print do celular. */
  .um-universal code{flex:none}
  .um-universal .acoes{width:100%}
  .um-universal .acoes button, .um-universal .acoes .botao{flex:1 1 0}
}


/* ------------------------------------------------------------
   PAINEL DO JURÍDICO — um cartão por negócio
   ------------------------------------------------------------
   As quatro cores do protótipo. A cor nunca anda sozinha: o selo diz em
   texto ("3 pendentes") e a barra tem aria-label com a conta inteira. */
.abas-juridico{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 18px}
.abas-juridico a{padding:10px 16px;border-radius:99px;border:1px solid var(--borda);
  background:var(--painel);color:var(--texto);text-decoration:none;
  font-size:14px;font-weight:600;min-height:44px;box-sizing:border-box;
  display:inline-flex;align-items:center;gap:8px}
.abas-juridico a.ativa{background:var(--texto);color:var(--painel);
  border-color:var(--texto)}
.abas-juridico .conta{font-size:12px;font-weight:700;padding:1px 8px;
  border-radius:99px;background:var(--ouro-fraco);color:var(--alerta)}
.filtros-processos{display:flex;gap:8px;flex-wrap:wrap;align-items:center;
  margin-bottom:14px}
.filtros-processos input{flex:1 1 220px;max-width:340px}
.filtros-processos button{min-height:40px}
.filtros-processos button.ativo{background:var(--texto);color:var(--painel);
  border-color:var(--texto)}
.grade-processos{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.processo{background:var(--painel);border:2px solid var(--borda);
  border-radius:var(--raio);padding:16px;display:flex;flex-direction:column;
  gap:11px;text-decoration:none;color:inherit;box-shadow:var(--sombra);
  transition:transform .12s ease}
.processo:hover{transform:translateY(-2px)}
.processo:focus-visible{outline:3px solid var(--ouro);outline-offset:2px}
.processo .topo{display:flex;justify-content:space-between;
  align-items:flex-start;gap:10px}
.processo .pasta-icone{width:38px;height:38px;flex:none}
.processo .codigo{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:21px;font-weight:700;letter-spacing:.02em;line-height:1.1}
.processo .codigo.sem{font-size:15px;color:var(--texto-fraco)}
.processo .partes{margin:3px 0 0;font-size:14px;font-weight:600;line-height:1.35}
.processo .tipo{margin:1px 0 0;font-size:13px;color:var(--texto-fraco)}
.processo .barra{display:flex;gap:3px}
.processo .barra span{height:7px;border-radius:4px;min-width:6px}
.processo .pe{font-size:12.5px;color:var(--texto-fraco);display:flex;
  gap:6px;align-items:center;flex-wrap:wrap}
.processo .pe strong{color:var(--alerta)}
.processo .pe .pe-etapa{flex-basis:100%;color:var(--texto)}
.processo .pe .pe-etapa.ok b{color:var(--ok)}
.processo .selo-processo{font-size:12px;font-weight:700;border-radius:99px;
  padding:4px 10px;white-space:nowrap}

.processo.cor-pendente{border-color:var(--erro)}
.processo.cor-recusado{border-color:var(--fila)}
.processo.cor-analisar{border-color:var(--ouro)}
.processo.cor-aprovado{border-color:var(--ok)}
.cor-pendente .pasta-icone{color:var(--erro)}
.cor-recusado .pasta-icone{color:var(--fila)}
.cor-analisar .pasta-icone{color:var(--ouro)}
.cor-aprovado .pasta-icone{color:var(--ok)}
.cor-pendente .selo-processo{background:var(--erro-fraco);color:var(--erro)}
.cor-recusado .selo-processo{background:var(--fila-fraco);color:var(--fila)}
.cor-analisar .selo-processo{background:var(--ouro-fraco);color:var(--alerta)}
.cor-aprovado .selo-processo{background:var(--ok-fraco);color:var(--ok)}
.barra .b-pendente{background:var(--erro)}
.barra .b-recusado{background:var(--fila)}
.barra .b-analisar{background:var(--ouro)}
.barra .b-aprovado{background:var(--ok)}
.barra .b-vazia{background:var(--barra-vazia, var(--linha));flex:1}

.legenda-cores{display:flex;flex-wrap:wrap;gap:10px 22px;font-size:13.5px;
  margin-top:18px;color:var(--texto-fraco)}
.legenda-cores span{display:inline-flex;align-items:center;gap:8px}
.legenda-cores i{width:12px;height:12px;border-radius:3px;display:inline-block}
.legenda-cores strong{color:var(--texto);font-weight:600}

/* A pasta do contrato no Drive */
.cartao-drive{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;
  justify-content:space-between;border:1px solid var(--ouro-borda);
  border-left:4px solid var(--ouro)}
.cartao-drive .drive-texto{flex:1 1 320px;min-width:0}
.drive-caminho{margin:0;font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:12.5px;line-height:1.8;color:var(--texto-fraco);word-break:break-word}
.cartao-drive .drive-acoes{display:flex;gap:8px;flex-wrap:wrap}
.cartao-drive .drive-acoes form{margin:0}
@media (min-width:700px){.drive-caminho br{display:none}}

/* ------------------------------------------------------------
   VER RESUMO — o documento ao lado da conferência da IA
   ------------------------------------------------------------ */
.resumo-topo{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;
  justify-content:space-between;margin-bottom:18px}
.resumo-botoes{display:flex;gap:8px;flex-wrap:wrap}
.resumo-grade{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.resumo-papel{flex:1 1 420px;min-width:0}
.resumo-lado{flex:1 1 400px;min-width:0;display:flex;flex-direction:column;gap:0}
.resumo-visor{width:100%;height:78vh;min-height:520px;border:1px solid var(--borda);
  border-radius:var(--raio);background:var(--painel)}
.resumo-imagem{width:100%;height:auto;border:1px solid var(--borda);
  border-radius:var(--raio);background:var(--painel);display:block}
.resumo-cabeca{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;
  justify-content:space-between;margin-bottom:12px}
.resumo-reconhecido{margin:0 0 12px;font-size:14.5px}
.resumo-lendo{display:flex;gap:10px;align-items:center;color:var(--texto-fraco);
  margin:6px 0 14px}
.girando{width:16px;height:16px;border-radius:50%;border:2px solid var(--borda);
  border-top-color:var(--ouro);animation:girar 0.9s linear infinite;flex:none}
@keyframes girar{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.girando{animation:none}}
.conferencia{list-style:none;margin:0 0 14px;padding:0;border:1px solid var(--borda);
  border-radius:var(--raio-p);overflow:hidden}
.conferencia li{display:flex;gap:11px;align-items:flex-start;padding:11px 14px;
  font-size:13.5px;line-height:1.45;background:var(--painel)}
.conferencia li + li{border-top:1px solid var(--linha)}
.conferencia svg{width:17px;height:17px;flex:none;margin-top:1px;fill:none;
  stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.conferencia .c-confere svg{color:var(--ok)}
.conferencia .c-diverge{background:var(--ouro-fraco)}
.conferencia .c-diverge svg{color:var(--alerta)}
.conferencia .c-diverge .detalhe{color:var(--alerta)}
.conferencia .c-nao_da_pra_saber svg{color:var(--texto-fraco)}
.conferencia strong{font-weight:600}
.conferencia .detalhe{color:var(--texto-fraco)}
.o-que-significa{background:var(--ouro-fraco);border:1px solid var(--ouro-borda);
  border-radius:var(--raio-p);padding:14px 16px;margin-bottom:14px}
.o-que-significa strong{color:var(--alerta);font-size:14px}
.o-que-significa p{margin:6px 0 0;font-size:13.5px;line-height:1.6}
.emissao-lida{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;
  font-size:13.5px;padding:10px 0;border-top:1px solid var(--linha);margin:0}
.dados-lidos{border-top:1px solid var(--linha);padding:10px 0;font-size:13.5px}
.dados-lidos summary{cursor:pointer;font-weight:600;min-height:28px}
.dados-lidos dl{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:10px 18px;margin:10px 0 0}
.dados-lidos dt{font-size:11.5px;color:var(--texto-fraco);text-transform:uppercase;
  letter-spacing:.04em}
.dados-lidos dd{margin:2px 0 0;word-break:break-word}
.aviso-ia{font-size:12.5px;color:var(--texto-fraco);border-top:1px solid var(--linha);
  padding-top:10px;margin:4px 0 6px;line-height:1.5}
.botao-aprovar{background:var(--ok);border-color:var(--ok);color:var(--painel)}
.botao-aprovar:hover{filter:brightness(1.08)}
.botao-recusar{background:var(--painel);color:var(--fila);border:1px solid var(--fila)}
.botao-recusar:hover{background:var(--fila-fraco)}
.caixa-roxa{background:var(--fila-fraco);border-color:var(--fila-borda);margin:12px 0 0}
/* A linha da leitura dentro da lista do contrato */
.linha-leitura{display:flex;gap:6px;align-items:baseline;font-size:12.5px;
  margin-top:5px;color:var(--texto-fraco)}
.linha-leitura.tem-divergencia{color:var(--alerta);font-weight:600}
.linha-leitura .marca-ia{font-size:10.5px;font-weight:700;letter-spacing:.05em;
  border:1px solid currentColor;border-radius:4px;padding:0 4px;flex:none}

/* A conferência ao vivo do e-mail e do celular, embaixo do campo */
.conferencia-viva{margin:6px 0 0;font-size:13px;line-height:1.45;min-height:0}
.conferencia-viva:empty{display:none}
.conferencia-viva.ruim{color:var(--erro);font-weight:600}
.conferencia-viva.atencao{color:var(--alerta);font-weight:600}
.conferencia-viva.bom{color:var(--ok);font-weight:600}
.conferencia-viva .usar-sugestao{font-weight:700;margin-left:4px}
.sem-whats{display:flex;gap:8px;align-items:center;font-size:13.5px;
  margin-top:8px;min-height:40px;cursor:pointer}
.sem-whats input{width:20px;height:20px;flex:none}
.sem-whats[hidden]{display:none}

/* ------------------------------------------------------------
   GERÊNCIA — os grupos no lugar da barra de abas
   ------------------------------------------------------------ */
.grupos-gerencia{margin-bottom:14px}
.grupos-gerencia .atalho{text-align:left}
.conta-grupo, .atalho .conta-grupo{display:inline-block;min-width:22px;padding:1px 8px;margin-left:6px;
  border-radius:99px;background:var(--ouro);color:var(--sobre-ouro);
  font-size:12px;font-weight:700;text-align:center;vertical-align:1px}
.onde-estou{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px;
  font-size:14px;color:var(--texto-fraco);padding:10px 0 14px;
  border-bottom:1px solid var(--borda);margin-bottom:20px}
.onde-estou strong{color:var(--texto);font-size:16px}
.onde-estou .so-texto{margin-left:6px}
.janela-grupo{max-width:640px}
.lista-do-grupo{margin:0}
@media(min-width:700px){.lista-do-grupo{grid-template-columns:repeat(2,1fr)}}
.item-grupo{text-align:left;min-height:76px;text-decoration:none;color:inherit}
.item-grupo.acao b{color:var(--ouro-escuro)}
.item-grupo.ativa{border-color:var(--ouro);background:var(--ouro-fraco)}
.item-grupo .seta{color:var(--texto-fraco);font-weight:400;display:inline;font-size:inherit;line-height:inherit}

/* ------------------------------------------------------------
   NEGOCIAÇÃO — o funil de atendimentos
   ------------------------------------------------------------ */
.visualmente-escondido{position:absolute!important;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap}
.rotulo-pequeno{display:block;font-size:12.5px;font-weight:600;color:var(--texto-fraco);
  margin-bottom:6px;text-transform:uppercase;letter-spacing:.04em}
.botao.bloco, button.bloco{display:flex;width:100%;text-align:center;box-sizing:border-box}
.topo-negociacao{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:flex-end;
  justify-content:space-between;margin-bottom:16px}
.faixa-fechamentos{border-left:4px solid var(--ouro)}
.linha-fechamento{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;
  justify-content:space-between;padding:10px 0;border-top:1px solid var(--linha)}
.linha-fechamento small{color:var(--texto-fraco)}
.filtros-negociacao{display:flex;flex-wrap:wrap;gap:10px 20px;align-items:flex-end;
  margin-bottom:14px}
.filtros-negociacao form{display:flex;gap:8px;align-items:center}
.filtros-negociacao .rotulo-pequeno{margin:0}

.quadro{display:grid;gap:12px;grid-template-columns:repeat(5,minmax(220px,1fr));
  overflow-x:auto;padding-bottom:8px;align-items:start}
.coluna{background:var(--painel);border:1px solid var(--borda);border-radius:var(--raio);
  padding:12px;display:flex;flex-direction:column;gap:10px;min-height:120px;
  transition:border-color .15s,background .15s}
.coluna.alvo{border-color:var(--ouro);background:var(--ouro-fraco)}
.coluna header{display:flex;align-items:center;justify-content:space-between}
.coluna h2{margin:0;font-size:12.5px;text-transform:uppercase;letter-spacing:.06em;
  color:var(--texto-fraco);font-weight:650}
.conta-coluna{font-size:12px;font-weight:700;color:var(--texto-fraco);background:var(--fundo);
  border-radius:99px;padding:1px 9px}
.coluna-vazia{margin:0;color:var(--texto-fraco);text-align:center;font-size:13px}
.cartao-negocio{border:1px solid var(--borda);border-radius:var(--raio-p);background:var(--painel);
  display:flex;flex-direction:column;cursor:grab}
.cartao-negocio.arrastando{opacity:.45}
.cartao-negocio.aguardando{border:2px solid var(--ouro);background:var(--ouro-fraco)}
.cartao-link{display:flex;flex-direction:column;gap:4px;padding:11px 12px 8px;
  text-decoration:none;color:inherit}
.cartao-link:hover strong{color:var(--ouro-escuro)}
.cartao-link strong{font-size:14.5px;font-weight:600}
.codigo-cartao{font-family:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  font-size:12px;font-weight:700;color:var(--ouro-escuro);letter-spacing:.02em}
/* «sem código» não é código: fica na letra do sistema, apagado. */
.codigo-cartao.sem, .codigo.sem{font-family:inherit;font-weight:600;color:var(--texto-fraco);
  letter-spacing:0}
.linha-fraca{font-size:12.5px;color:var(--texto-fraco)}
.sinal{font-size:12px;font-weight:650}
.sinal.ouro{color:var(--alerta)} .sinal.ruim{color:var(--erro)} .sinal.bom{color:var(--ok)}
.mover{padding:0 8px 8px}
.mover select{width:100%;min-height:36px;font-size:13px;padding:4px 8px}
.aviso-quadro{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;z-index:70;
  background:var(--texto);color:var(--painel);padding:12px 18px;border-radius:var(--raio-p);
  box-shadow:var(--sombra-alta);max-width:calc(100% - 32px);font-size:14px}
@media (max-width:899px){
  /* No celular as colunas viram uma lista, uma embaixo da outra. */
  .quadro{grid-template-columns:1fr;overflow:visible}
  .cartao-negocio{cursor:default}
}

.tipos-atividade{border:0;padding:0;margin:0 0 14px;display:grid;gap:8px}
@media(min-width:620px){.tipos-atividade{grid-template-columns:repeat(2,1fr)}}
.tipo-atividade{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--borda);
  border-radius:var(--raio-p);padding:10px 12px;cursor:pointer;min-height:44px}
.tipo-atividade[hidden]{display:none}
.tipo-atividade input{margin-top:3px;width:18px;height:18px;flex:none}
.tipo-atividade b{display:block;font-size:14px}
.tipo-atividade small{display:block;font-size:12.5px;color:var(--texto-fraco);line-height:1.4}
.tipo-atividade:has(input:checked){border-color:var(--ouro);background:var(--ouro-fraco)}
.form-atividade [hidden]{display:none}

.trilha-etapas{list-style:none;padding:0;margin:14px 0 18px;display:flex;flex-wrap:wrap;gap:6px}
.trilha-etapas li{font-size:13px;font-weight:600;padding:7px 12px;border-radius:99px;
  border:1px solid var(--borda);background:var(--painel);color:var(--texto-fraco)}
.trilha-etapas li.feita{background:var(--ok-fraco);border-color:var(--ok-borda);color:var(--ok)}
.trilha-etapas li.atual{background:var(--texto);border-color:var(--texto);color:var(--painel)}
.grade-negociacao{display:flex;flex-wrap:wrap;gap:20px;align-items:flex-start}
.coluna-principal{flex:999 1 520px;min-width:0}
.coluna-lado{flex:1 1 280px;min-width:0;display:flex;flex-direction:column;gap:0}
.fechamento-aguardando{border:2px solid var(--ouro)}
.historico-negociacao{list-style:none;padding:0;margin:0}
.historico-negociacao li{padding:12px 0;border-top:1px solid var(--linha)}
.historico-negociacao li:first-child{border-top:0;padding-top:0}
.hist-topo{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.hist-quando{font-size:12.5px;color:var(--texto-fraco);margin-left:auto}
.hist-linha{font-size:13.5px;margin-top:4px}
.hist-texto{font-size:14px;margin-top:6px;line-height:1.5;white-space:pre-line}
.hist-kenlo{font-size:12px;margin-top:6px;color:var(--texto-fraco)}
.hist-kenlo.kenlo-erro{color:var(--erro);font-weight:600}
.hist-kenlo.kenlo-feito{color:var(--ok)}
.hist-kenlo.kenlo-manual{color:var(--alerta)}
.espelho-cartao{background:var(--ouro-fraco);border-color:var(--ouro-borda);font-size:14px}
details.arquivar summary{cursor:pointer;font-weight:600;color:var(--texto-fraco);min-height:28px;
  font-size:14px}
.coluna-lado > .botao.bloco{margin-bottom:14px}
.escolha-tipo{border:0;padding:0;margin:0 0 14px;display:flex;gap:10px;flex-wrap:wrap}
.opcao-grande{display:flex;gap:8px;align-items:center;border:1px solid var(--borda);
  border-radius:var(--raio-p);padding:10px 16px;min-height:44px;cursor:pointer;font-weight:600}
.opcao-grande:has(input:checked){border-color:var(--ouro);background:var(--ouro-fraco)}
fieldset.parte{border:1px solid var(--borda);border-radius:var(--raio-p);padding:12px 14px;margin:0;min-width:0}
fieldset.parte legend{font-weight:650;font-size:14px;padding:0 6px}
fieldset.parte[hidden]{display:none}
.marca-linha{display:flex;gap:8px;align-items:center;min-height:32px;font-size:14px}
.marca-linha input{width:18px;height:18px}
.passos-depois{margin:0 0 14px;padding-left:20px;font-size:14px;line-height:1.55}
.passos-depois li{margin-bottom:6px}

/* Excluir corretor — fica escondido até a pessoa abrir */
.zona-perigo{margin-top:16px;border:1px solid var(--erro-borda);border-radius:var(--raio-p);
  padding:10px 14px;background:var(--erro-fraco)}
.zona-perigo summary{cursor:pointer;font-weight:650;color:var(--erro);min-height:28px}
.zona-perigo form{margin-top:10px}


/* Rádio e caixa de marcar na cor da casa, e não no azul do navegador. */
input[type=radio], input[type=checkbox]{accent-color:var(--ouro)}

/* TABELA QUE VIRA CARTÕES NO CELULAR (14/10).
   As tabelas do Financeiro e das Regras da casa têm 3 a 6 colunas; num
   celular de 390px elas só cabiam rolando de lado, e a coluna da direita
   (o selo «fora do padrão», o botão «Abrir») ficava fora da tela — que é
   justamente o que importa. Abaixo de 700px cada linha vira um cartão:
   o cabeçalho some e cada célula leva o nome da coluna (data-r). */
@media (max-width:700px){
  table.cartoes-no-celular{min-width:0 !important;display:block}
  table.cartoes-no-celular thead{display:none}
  table.cartoes-no-celular tbody{display:flex;flex-direction:column;gap:10px}
  table.cartoes-no-celular tr{display:flex;flex-direction:column;gap:4px;
    border:1px solid var(--borda);border-radius:var(--raio-p);padding:10px 12px}
  table.cartoes-no-celular td{display:block;border:0 !important;padding:0 !important;
    text-align:left !important;white-space:normal !important;background:none !important}
  table.cartoes-no-celular td[data-r]::before{content:attr(data-r);display:block;
    font-size:11.5px;font-weight:600;color:var(--texto-fraco);margin-bottom:1px}
  table.cartoes-no-celular td:empty{display:none}
  table.cartoes-no-celular tr.fora, table.cartoes-no-celular tr.excecao{background:var(--alerta-fraco)}
  table.cartoes-no-celular tr.falta{background:var(--erro-fraco)}
  table.cartoes-no-celular .acoes-da-linha{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:4px}
}

/* 14/10: âncoras (#doc-12, #fichas…) não ficam escondidas atrás do topo fixo. */
[id]{scroll-margin-top:90px}

/* 14/10: sugestões de bairro/cidade (static/endereco.js). */
.sugere-lista{position:absolute;z-index:40;left:0;right:0;top:calc(100% - 2px);background:var(--painel, var(--fundo-cartao, #fff));
  border:1px solid var(--borda);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:280px;overflow:auto}
.sugere-lista.oculto{display:none}
.sugere-lista div{padding:10px 12px;cursor:pointer;font-size:15px;border-bottom:1px solid var(--linha);min-height:44px;box-sizing:border-box}
.sugere-lista div:last-child{border-bottom:0}
.sugere-lista div:hover{background:var(--ouro-fraco)}
.sugere-lista small{display:block;color:var(--texto-fraco);font-size:12.5px}

/* 14/10: datas e pontos jurídicos da leitura da IA. */
.resumo-datas{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 12px;font-size:14.5px}
.resumo-datas .vencido, .resumo-datas .vencido b{color:var(--erro)}
.pontos-juridicos{border:1px solid var(--borda);border-radius:10px;padding:10px 14px;margin:0 0 14px}
.pontos-juridicos ul{list-style:none;margin:6px 0 0;padding:0}
.pontos-juridicos li{padding:6px 0;border-top:1px solid var(--linha);font-size:14px;line-height:1.45}
.pontos-juridicos li:first-child{border-top:0}
.pontos-juridicos li.importante{border-left:3px solid var(--erro);padding-left:8px}
.pontos-juridicos .detalhe{color:var(--texto-fraco)}