/* CRM Moralí — estilo do painel · padrão visual oficial (manual da marca)
   Navy #023047 (Pantone 3025 C) · Verde #7BBC62 (Pantone 360 U) · Fonte Outfit */
:root {
  --azul: #023047;        /* navy oficial (era #1e3a5f) */
  --azul-claro: #03476B;  /* hover do navy */
  --verde: #7BBC62;       /* verde oficial — só acentos, nunca fundo de texto */
  --verde-escuro: #4E8F3C;
  --link: #0A5E8A;
  --fundo: #F3F3F2;
  --borda: #E4E4E2;
  /* ------------------------------------------------------------------
     v1.557 — O FUNDO DA PÁGINA E A FAIXA DO REGISTRO (07/09/2026).
     Opção B do mockup em Outros/Mockup-Fundo-Azul-Salesforce/.

     A página era #F3F3F2, um bege quase branco: os cards brancos não se
     recortavam dela, e a tela lia como uma folha só. No Salesforce o
     fundo é azul-acinzentado e é o contraste dele que faz cada card
     parecer um card. Aqui o mesmo recurso, mas com o azul da casa: o
     --fundo-pagina é o navy #023047 clareado e dessaturado, não o
     #B0C4DF emprestado do Salesforce.

     Três valores, três lugares:
     · --fundo-pagina    → o body
     · --faixa-registro  → o .destaque (o cabeçalho com os botões da ficha)
     · --sep-topo/base   → o degradê que fecha o .topo2

     O --fundo (#F3F3F2) NÃO muda: ele é usado em 22 outros lugares como
     cinza de peça pequena (fundo da busca, hover do botão claro, trilho
     das barras) e nada disso tem a ver com o fundo da página.

     O VERDE ficou de fora de propósito. O #7BBC62 é verde médio, não
     neon; como fundo de página inteira ele esverdeia o navy dos títulos
     e as fotos dos contatos, e o manual da marca (linha 6 deste arquivo)
     manda usá-lo só em acento. Ele continua onde estava: o filete da aba
     ativa, a barra de progresso e as etiquetas.
     ------------------------------------------------------------------ */
  /* A faixa entre o cabeçalho e o primeiro card É este fundo aparecendo —
     não existe elemento ali para escurecer, foi o fundo que precisou
     descer. O #C2D3DD da primeira volta dava só 1,54:1 contra o card
     branco e lia como quase-branco. Este dá 1,76:1, que é o mesmo passo
     do #B0C4DF do Salesforce (1,78:1) — mesma leitura, na família do
     navy da casa em vez do azul deles. Escolhido na escada de quatro
     tons em Outros/Mockup-Fundo-Azul-Salesforce/escada-do-fundo.html. */
  --fundo-pagina: #B2C6D3;    /* o espaço vazio da página */
  /* O cinza da zona de cima da ficha. É o equivalente frio do #F3F3F3 que
     o Salesforce usa na mesma barra — o print do Rodrigo apontou aquele
     cinza, e neutro puro amarelaria ao lado do fundo azul da página. */
  /* v1.560 — ERAM DOIS CINZAS NA MESMA TELA. Este era #EDF1F3, um cinza
     FRIO (puxado para o azul), enquanto o cabeçalho de todo cartão usa
     #F8F8F7, neutro. Lado a lado o frio lê como azul-claro sujo — o
     Rodrigo apontou exatamente isso. Agora os dois são o mesmo valor, e
     de quebra o contraste sobe um pouco (o texto de apoio vai de 5,05
     para 5,40:1). */
  --faixa-topo: #F8F8F7;      /* a zona de cima do cabeçalho do registro */
  --sep-topo: #023047;        /* degradê do separador — o navy */
  --sep-base: #0A5E8A;        /* degradê do separador — o mesmo do --link */
  --texto: #16232B;
  --texto-suave: #5B6870;
  --texto-exemplo: #93A0A8;   /* v1.637 — o texto de exemplo dentro do campo */
  --ok: #1a7f4b;
  --alerta: #b7791f;
  --erro: #c0392b;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Outfit', 'Segoe UI', Arial, sans-serif; background: var(--fundo); color: var(--texto); min-height: 100vh; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; }
/* v1.557 — O AZUL É SÓ DA TELA DO REGISTRO.
   No Salesforce a list view e os relatórios ficam no cinza; o azul é do
   registro aberto. A classe vem do topo do ficha.js, que é quem move
   todas as telas de registro. Lista, Home, Relatórios e Plataforma nem
   sabem que esta regra existe. */
body.reg { background: var(--fundo-pagina); }

/* v1.557 — NA IMPRESSÃO O FUNDO VOLTA A SER BRANCO.
   A css/folha-timbrada.css liga `print-color-adjust: exact` no body para
   o timbre e as faixas saírem com a cor certa no papel — o que, com um
   fundo de página colorido, mandaria o azul para a folha inteira. Recibo
   do proprietário, demonstrativo de comissões e relatório impresso saem
   em papel branco. */
@media print { body { background: #fff !important; } }

/* Barra superior — fundo branco com filete navy (padrão dos mockups) */
.topo { background: #fff; color: var(--texto); padding: 10px 20px; display: flex; align-items: center; gap: 24px; border-bottom: 3px solid var(--azul); }
.topo .logo { font-size: 20px; font-weight: 700; letter-spacing: 1px; color: var(--azul); display: flex; align-items: center; }
.topo .logo img { display: block; height: 22px; width: auto; }
.topo nav { display: flex; gap: 4px; flex: 1; }
.topo nav a { color: var(--texto-suave); text-decoration: none; padding: 8px 14px; border-radius: 6px 6px 0 0; font-size: 14px; border-bottom: 3px solid transparent; margin-bottom: -13px; padding-bottom: 18px; }
.topo nav a.ativo { color: var(--azul); font-weight: 600; border-bottom-color: var(--verde); background: transparent; }
.topo nav a:hover { color: var(--azul); background: #EDF3F6; }
.topo .usuario { font-size: 13px; color: var(--texto-suave); }
.topo button { background: #fff; border: 1px solid var(--borda); color: var(--azul); padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px; font-family: inherit; }
.topo button:hover { background: #EDF3F6; }

/* Conteúdo */
/* ------------------------------------------------------------------
   v1.530 — A LARGURA ÚTIL DA TELA (06/09/2026).
   O teto era 1340px, herdado de quando o cabeçalho ainda era o `.topo`
   simples e a tela tinha mais texto que tabela. Depois disso o `.topo2`
   passou a ser de ponta a ponta com 20px da borda, e as listas ganharam
   dez colunas — mas o teto ficou. O resultado: num notebook de 1512px
   sobravam 86px HACHURADOS de cada lado, o conteúdo desalinhado do
   logotipo e a tabela espremida em 1300px.
   Agora o teto é 2000px, que nenhum notebook alcança (o de 16 polegadas
   vai a 1728px): na tela de trabalho a sobra é ZERO e tudo alinha com o
   logotipo. Ele existe só como PARA-CHOQUE do monitor de 27 polegadas —
   os grids da ficha têm contagem FIXA de colunas (.fcc-partes em 3,
   .chips.agora em 4, .campos-ficha em 2) e não se reorganizam quando
   sobra espaço, só esticam, e aí a tela fica rala.
   O mesmo número vale para os TRÊS invólucros de página, que até aqui
   eram diferentes entre si sem motivo: main (listas e fichas), .home e
   main.pl-main (Plataforma). Mudou um, mudam os três.
   Mockup em Outros/Mockup-Margens-Laterais/.
   ------------------------------------------------------------------ */
/* v1.557 — o respiro do topo desceu de 20 para 14px, quando a migalha
   saiu e deixou aquela faixa vazia.
   v1.559 — E VIROU UMA MOLDURA DE 12px NOS QUATRO LADOS. Eram três
   números para a mesma coisa (14 no topo, 20 na lateral, 32 no pé) — a
   distância entre o conteúdo e a beirada. Agora é um só, e é o mesmo
   que separa os cards entre si (`gap` do `.g70`, `margin-bottom` do
   `.cartao` e do `.destaque`, também 12px). A moldura azul do registro
   fica uniforme, que era o pedido.

   O QUE ISSO CUSTA, para quem vier depois: a v1.530 pôs as laterais em
   20px para o conteúdo ALINHAR com o logotipo, que está em
   `.topo2 .linha1 { padding: 8px 20px }`. Com 12px eles ficam 8px fora
   de prumo no computador — o Rodrigo viu e decidiu manter assim, com a
   `.linha1` intocada. No celular já era 12px dos dois lados (o @media
   de 760px), então lá o alinhamento passou a existir.
   Se um dia isso incomodar, o conserto é levar a `.linha1` para 12px —
   não desfazer isto.

   Vale para TODAS as telas: lista, Home, Relatórios e Plataforma. */
main { flex: 1; max-width: 2000px; width: 100%; margin: 0 auto; padding: 12px; }
.cabecalho-pagina { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------------
   v1.538 — O CABEÇALHO DAS TELAS DE PAINEL (Metas · Definir metas ·
   Análises). Aprovado em 06/09/2026, opção C do mockup em
   Outros/Mockup-Metas-Cabecalho/.

   O que havia: título, seletor de mês, uma frase de manual e DOIS
   destinos, tudo na mesma linha, sem hierarquia. Os destinos eram <a>
   de 12,5px cinza dentro da frase, separados por pontinhos — mesmo
   tamanho, mesma cor e mesmo peso do texto ao lado, então liam-se como
   legenda e não como coisa em que se clica.

   Agora: identidade e período à esquerda, a ação que ESCREVE à direita
   (o mesmo arranjo do "+ Novo contrato" das listas), a frase como linha
   de apoio, e as três telas num trilho de pílulas que também responde
   "onde eu estou" — coisa que nenhuma das três respondia.
   ------------------------------------------------------------------ */
.pn-cab { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.pn-cab .esq { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pn-cab h1 { font-size: 22px; color: var(--azul); }
.pn-cab .dir { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* a frase ocupa a linha inteira, embaixo dos dois lados */
.pn-cab .pn-sub { flex-basis: 100%; font-size: 12.5px; color: var(--texto-suave); }
.pn-cab .pn-mes { max-width: 180px; }

/* O `.btn` nasceu para <button> e não sabia ser link: sem isto o
   "Definir metas" sairia sublinhado e com a altura errada. */
a.btn { text-decoration: none; display: inline-flex; align-items: center;
  gap: 7px; line-height: 1.15; }
a.btn:hover { background: var(--azul-claro); }
.cabecalho-pagina h1 { font-size: 22px; color: var(--azul); }

/* Busca e botões */
.busca { padding: 10px 14px; border: 1px solid var(--borda); border-radius: 8px; width: 320px; max-width: 100%; font-size: 14px; font-family: inherit; background: #fff; }
.busca:focus { outline: 2px solid var(--azul); outline-offset: -1px; }
.btn { background: var(--azul); color: #fff; border: none; padding: 10px 18px; border-radius: 8px; cursor: pointer; font-size: 14px; font-family: inherit; font-weight: 600; }
/* v1.373 — fase 2 dos ícones: o traço dentro de botão/etiqueta/atalho
   senta na linha do texto (o emoji sentava sozinho; SVG fica no baseline
   e sobe sem isto). Vale para qualquer botão da casa. */
.btn svg, .btn-claro svg, .atalho svg, .tag svg, .destravar svg,
.cvt-filtro svg, .sel-funil button svg { vertical-align: -2px; }
.btn:hover { background: var(--azul-claro); }
/* v1.456 — LINK COM CARA DE BOTÃO NÃO É SUBLINHADO. Vários lugares do
   CRM usam <a class="btn"> para navegar (o "Abrir a ficha" da conversa
   é um deles) e o sublinhado do link vazava por baixo do rótulo. Era
   defeito de classe, não de tela: a coluna do cadastro já tinha o
   remendo local `text-decoration:none`. Aqui ele vale para todos. */
a.btn, a.btn-claro { text-decoration: none; }
.btn-claro { background: #fff; color: var(--azul); border: 1px solid var(--borda); }
.btn-claro:hover { background: var(--fundo); }

/* Tabela */
.tabela-caixa { background: #fff; border: 1px solid var(--borda); border-radius: 10px; overflow-x: auto; box-shadow: 0 1px 2px rgba(2,48,71,.06); }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th { text-align: left; padding: 12px 14px; background: #F8F8F7; border-bottom: 2px solid var(--borda); color: var(--texto-suave); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
td { padding: 11px 14px; border-bottom: 1px solid #F0F0EF; }
tr:hover td { background: #F5F8F4; cursor: pointer; }
.vazio { padding: 40px; text-align: center; color: #8a94a1; }

/* Etiquetas de status */
.tag { display: inline-block; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.tag-verde { background: #EBF6E4; color: var(--verde-escuro); }
.tag-cinza { background: #edf0f4; color: #6a7480; }
.tag-amarela { background: #fdf3e0; color: var(--alerta); }
.tag-vermelha { background: #fdeaea; color: var(--erro); }
.tag-azul { background: #E7F0F6; color: var(--azul); }

/* Modal (janela de cadastro/edição) */
.modal-fundo { position: fixed; inset: 0; background: rgba(2,48,71,.5); display: none; align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 50; }
.modal-fundo.aberto { display: flex; }
.modal { background: #fff; border-radius: 12px; width: 880px; max-width: 100%; padding: 28px; }
.modal h2 { color: var(--azul); font-size: 18px; margin-bottom: 16px; }
.subtitulo { color: var(--azul); font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; margin: 22px 0 10px; padding-top: 16px; border-top: 1px solid var(--borda); }
.grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; }
.grade .campo { min-width: 0; }
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo.largo { grid-column: 1 / -1; }
.campo label { font-size: 12px; font-weight: 600; color: var(--texto-suave); }
/* v1.492 — A CAIXINHA DE MARCAR NÃO É UMA CAIXA DE TEXTO.
   `input` pega TUDO: texto, data, número… e também checkbox e radio. Uma
   caixinha de marcar com `width: 100%`, padding de 9px e borda vira um
   quadrado grande que empurra o rótulo para a direita — foi o que
   desalinhou o filtro "é um destes" (todas as telas de lista) e o que
   obrigou a espalhar `style="width:auto"` pelo CRM, um a um, em cada
   lugar onde alguém percebeu. Aqui elas simplesmente ficam de fora, e o
   navegador desenha a caixinha como ele sabe. */
.campo input:not([type="checkbox"]):not([type="radio"]), .campo select, .campo textarea { width: 100%; min-width: 0; max-width: 100%; padding: 9px 12px; border: 1px solid var(--borda); border-radius: 7px; font-size: 14px; font-family: inherit; }
.campo input:not([type="checkbox"]):not([type="radio"]):focus, .campo select:focus, .campo textarea:focus { outline: 2px solid var(--azul); outline-offset: -1px; }
/* v1.637 — O TEXTO DE EXEMPLO NÃO É RESPOSTA.
   Não havia regra de ::placeholder nenhuma no CRM: valia o cinza do
   navegador, ~4,6:1 no branco, quase o peso do texto escrito — e as
   pessoas achavam que o campo já vinha preenchido e pulavam. 2,7:1
   continua legível e é claramente secundário; é o mesmo cinza que o
   bloco de notas da Home já usava. `opacity:1` porque o Firefox
   clareia o placeholder por conta própria. */
::placeholder { color: var(--texto-exemplo); opacity: 1; }
.campo textarea { resize: vertical; min-height: 60px; }
/* v1.235 — o olho que mostra a senha */
.campo-senha { position: relative; display: block; }
.campo-senha input { padding-right: 42px; }
.olho-senha { position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 5px 6px; line-height: 0; cursor: pointer;
  color: var(--texto-suave); border-radius: 6px; }
.olho-senha:hover { color: var(--azul); background: var(--fundo); }
.olho-senha:focus-visible { outline: 2px solid var(--azul); outline-offset: -1px; }
/* v1.125: Cancelar/Salvar CENTRALIZADOS, e não encostados na direita.
   A regra vale para as duas barras da janela — a de baixo e o espelho
   do topo (`acoes acoes-topo`, v1.101) — porque as duas usam esta
   classe. Mudar só uma deixaria as duas desalinhadas entre si. */
.modal .acoes { display: flex; justify-content: center; gap: 10px; margin-top: 20px; }
/* v1.520 — dialogoPerguntar()/dialogoAvisar() do base.js: a pergunta na
   página, no lugar do confirm()/alert() do navegador. Fica por cima de
   qualquer outra janela aberta (z-index 60 > 50) e centrada na tela. */
.modal-fundo.dlg-fundo { z-index: 60; align-items: center; }
.modal.dlg { width: 460px; padding: 24px 26px; }
.modal.dlg h2 { font-size: 17px; margin-bottom: 10px; }
.modal.dlg .dlg-texto { font-size: 14px; line-height: 1.6; color: var(--texto); white-space: pre-line; }
.modal.dlg .dlg-pe { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
/* v1.525 — o campo do dialogoPedir() (o prompt() do navegador, na casa) */
.modal.dlg .dlg-rotulo { display: block; font-size: 12.5px; font-weight: 600; color: var(--azul); margin: 14px 0 6px; }
.modal.dlg .dlg-campo { width: 100%; font-family: inherit; font-size: 14px; padding: 9px 11px; border: 1px solid var(--borda); border-radius: 8px; }
.modal.dlg textarea.dlg-campo { min-height: 88px; resize: vertical; line-height: 1.5; }
.modal.dlg .dlg-erro { display: none; color: var(--erro); font-size: 12.5px; margin-top: 6px; }
.msg-erro { color: var(--erro); font-size: 13px; margin-top: 10px; display: none; }

/* Login */
.caixa-login { max-width: 380px; margin: 8vh auto; background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 32px; box-shadow: 0 1px 2px rgba(2,48,71,.06); }
.caixa-login h1 { color: var(--azul); font-size: 24px; text-align: center; margin-bottom: 4px; }
.caixa-login .logo-login { display: block; height: 36px; width: auto; margin: 0 auto 10px; }
.caixa-login p.sub { text-align: center; color: #8a94a1; font-size: 13px; margin-bottom: 24px; }
.caixa-login .campo { margin-bottom: 14px; }
.caixa-login .btn { width: 100%; margin-top: 6px; }

/* Rodapé institucional (obrigatório em todas as páginas) */
/* v1.560 — O RODAPÉ PERDEU A FAIXA BRANCA e o texto escureceu.
   A faixa branca era mais um bloco na tela sem ser conteúdo; sem ela, os
   dados da empresa assentam no fundo da página.
   E o #8a94a1 do texto vinha de quando o fundo era quase branco: sobre o
   azul do registro ele dava 1,74:1 — não é pouco contraste, é ilegível.
   Vai para o --texto-suave da casa (3,26:1 sobre o azul, 5,17:1 sobre o
   cinza da lista). Ainda abaixo do mínimo AA de 4,5 no registro, e é
   escolha dele entre as três que vieram no mockup: o passo seguinte
   (#404A52, 5,14:1) pareceu escuro demais para um rodapé. */
footer { text-align: center; padding: 18px; color: var(--texto-suave); font-size: 12px; border-top: 1px solid var(--borda); background: transparent; }

/* Rodapé em duas linhas: dados da empresa logada e, abaixo, quem
   desenvolveu. Separadas de propósito — o CNPJ que aparece é o da
   imobiliária em foco, e é ele que vale no que sai do sistema. */
.rodape-empresa { line-height: 1.6; }
/* v1.561 — a assinatura acompanha o texto de cima. O #a3abb5 vinha de
   quando o rodapé era uma faixa BRANCA; sobre o azul do registro ele dá
   1,32:1 e some. A linha da empresa, logo acima, é --texto-suave (3,26:1)
   — agora as duas são a mesma cor, que foi o pedido. O tamanho continua
   11px: quem separa as duas linhas é o corpo, não a cor. */
.rodape-assinatura { display: flex; align-items: center; justify-content: center;
  gap: 5px; margin-top: 8px; font-size: 11px; color: var(--texto-suave); }
.rodape-assinatura a { display: flex; align-items: center; gap: 5px;
  color: inherit; text-decoration: none; }
.rodape-assinatura a:hover { color: var(--azul); }
/* Cinza, por decisão de 26/07/2026.
   Objeção registrada e vencida: coração cinza deixa de ler como coração e
   vira sinal gráfico, o que enfraquece a única palavra que a frase carrega
   ("amor"). Se um dia incomodar, há duas saídas melhores que colorir:
     • vinho discreto  → color: #C25A6B
     • tirar o coração → em config.js, texto_antes: 'Desenvolvido'
   Verde está fora: no padrão da Moralí, verde é acento, e aqui leria como
   botão em vez de afeto. */
.rodape-coracao { color: inherit; font-size: 11px; line-height: 1; }

/* Símbolo pequeno, na altura da letra. Era 15px e dominava a linha. */
.rodape-marca-caixa { display: inline-flex; align-items: center; gap: 4px; }
.rodape-marca { height: 11px; width: auto; flex: 0 0 auto;
  filter: grayscale(1) opacity(.5); transition: filter .15s; }
.rodape-nome { font-weight: 700; font-size: 11px; letter-spacing: .02em;
  color: var(--azul); opacity: .8; transition: opacity .15s; }
.rodape-assinatura:hover .rodape-marca { filter: none; }
.rodape-assinatura:hover .rodape-nome { opacity: 1; }

/* No arquivo impresso a assinatura sai: o PDF vai para proprietário,
   contador e seguradora, e ali só cabe a identificação da imobiliária. */
@media print { .rodape-assinatura { display: none; } }

/* ===== Tarefas (objeto transversal) ===== */
.sec-tarefas { margin-bottom: 16px; overflow: hidden; }
.sec-cab { padding: 10px 14px; background: #F8F8F7; border-bottom: 2px solid var(--borda);
  font-size: 12px; font-weight: 800; letter-spacing: .5px; color: var(--texto-suave); }
.sec-cab span { font-weight: 400; }
.sec-cab.late { color: var(--erro); } .sec-cab.warn { color: var(--alerta); }
.sec-cab.ok { color: var(--verde-escuro); }
.task-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px;
  border-bottom: 1px solid #F0F0EF; }
.task-row:last-child { border-bottom: 0; }
.task-row.feita .tt { text-decoration: line-through; color: var(--texto-suave); }
.task-row .cb { width: 22px; height: 22px; flex: 0 0 auto; margin-top: 2px; border-radius: 50%;
  border: 2px solid #9AA7AE; background: #fff; cursor: pointer; color: #fff; font-size: 13px;
  line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; }
.task-row .cb:hover { border-color: var(--verde-escuro); color: var(--verde-escuro); }
.task-row .cb.on { background: var(--verde); border-color: var(--verde); color: #0F2A08; }
.task-row .tp { font-size: 15px; margin-top: 2px; }
.task-row .tx { flex: 1; min-width: 0; cursor: pointer; }
.task-row .tt { font-size: 14px; font-weight: 600; color: var(--texto); }
.task-row .tt .tag { margin-left: 6px; }
.task-row .tm { font-size: 12px; color: var(--texto-suave); margin-top: 2px; }
.task-row .due { font-size: 12px; font-weight: 700; white-space: nowrap; margin-top: 3px; }
.due.late { color: var(--erro); } .due.warn { color: var(--alerta); }
.due.ok { color: var(--verde-escuro); } .due.done { color: var(--texto-suave); font-weight: 400; }

/* ===== Ficha do registro — layout Clássico 70/30 (padrão Salesforce) ===== */
/* v1.557 — A MIGALHA SAIU, e com ela estas três regras.
   Eram ~46px entre a linha do cabeçalho e o primeiro card: os 20px de
   respiro do `main`, a linha de 13px e mais 10px de margem. Enquanto o
   fundo era branco ninguém via; com o fundo azul virou uma tarja de
   espaço vazio. E o que estava escrito ali já estava na tela duas
   vezes: o nome do objeto é a aba acesa, o título do registro está em
   corpo 21 no card logo abaixo.
   Sem ela, o vão passa a ser só o respiro do `main`: **20px exatos**.
   Quem deixou de existir foi a marcação, no `ficha.js` — o `main`
   continua com o `padding: 20px 20px 32px` de sempre, então lista,
   Home, Relatórios e Plataforma não sentiram nada. */

/* v1.557 — O CABEÇALHO DO REGISTRO VIROU DUAS ZONAS, como o do
   Salesforce: em cima o cinza com a identidade e os botões ("o que eu
   faço aqui"), embaixo o branco com os chips ("o que este registro
   tem"), separados por uma divisa dura.

   Tentei antes um degradê de cima a baixo, e ele morre nesta forma:
   entre o cinza e o branco cabem 1,16:1, que não se enxerga. O que
   marca a divisão aqui é a ARESTA, não a variação.

   O padding saiu do .destaque e foi para cada zona — é o que permite o
   cinza ir de borda a borda dentro do card. O overflow:hidden é quem
   apara o cinza nos cantos arredondados.

   Só o ficha.js escreve class="destaque", então isto vale para a ficha
   de todo objeto e para mais nada. */
.destaque { background: #fff; border: 1px solid var(--borda); border-radius: 10px;
  padding: 0; overflow: hidden; margin-bottom: 12px; box-shadow: 0 1px 2px rgba(2,48,71,.06); }
.destaque .topo-ficha { background: var(--faixa-topo); padding: 16px 18px; }
/* a divisa entre as zonas era o border-top dos .chips; ele continua sendo,
   agora encostando no cinza em vez de flutuar no meio do branco */
.destaque .chips { margin-top: 0; padding: 12px 18px 14px; }
/* ficha sem chip nenhum não ganha uma tarja branca de 27px sem conteúdo */
.destaque .chips:empty { display: none; }
.destaque .topo-ficha { display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap; }
.avatar { width: 48px; height: 48px; border-radius: 10px; background: var(--azul); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700;
  flex: 0 0 auto; letter-spacing: .5px; }
.destaque h1 { font-size: 21px; color: var(--azul); line-height: 1.2; }
.destaque .sub { font-size: 13px; color: var(--texto-suave); margin-top: 3px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.destaque .acoes-ficha { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.destaque .acoes-ficha .btn { padding: 8px 14px; font-size: 13px; }
/* v1.557 — a borda do botão claro é #E4E4E2, calibrada contra o branco.
   Sobre a faixa cinza ela quase desaparece e o botão vira um retângulo
   pálido sem contorno. Aqui ela desce um tom, que é o que o Salesforce
   faz na mesma barra: o miolo branco e a borda visível são os dois
   sinais de que aquilo se clica. */
.destaque .acoes-ficha .btn-claro { border-color: #C6D2D9; }

/* v1.458 — O PROPRIETÁRIO DO REGISTRO, na linha de baixo do cabeçalho.
   Foto e nome, como no Salesforce; "sem dono" é estado legítimo (entrou
   por robô, ficha pública ou importação) e aparece apagado, com convite
   para definir. A listinha da equipe se ancora no próprio chip. */
.dono-reg { display: inline-flex; align-items: center; gap: 6px; position: relative; }
.dono-reg b { color: var(--texto); font-weight: 600; }
.dono-reg .ft { width: 22px; height: 22px; border-radius: 50%; background: #E3E6EA;
  color: #8a94a1; font-size: 11px; font-weight: 700; display: inline-flex;
  align-items: center; justify-content: center; flex: 0 0 auto; }
.dono-reg.sem b { color: var(--texto-suave); font-weight: 400; font-style: italic; }
.dono-reg .trocar { color: var(--link); cursor: pointer; font-size: 12px; }
.dono-reg .trocar:hover { text-decoration: underline; }
.dono-lista { position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  background: #fff; border: 1px solid var(--borda); border-radius: 10px; min-width: 230px;
  box-shadow: 0 8px 22px rgba(2,48,71,.16); overflow: hidden; padding: 4px; }
.dono-lista button { display: flex; align-items: center; gap: 9px; width: 100%;
  background: none; border: 0; border-radius: 7px; padding: 7px 9px; cursor: pointer;
  font-family: inherit; font-size: 13.5px; color: var(--texto); text-align: left; }
.dono-lista button:hover { background: #EDF3F6; }
.dono-lista button small { color: var(--texto-suave); font-size: 11.5px; }
.dono-lista .solta { color: var(--texto-suave); border-top: 1px solid var(--borda);
  border-radius: 0 0 7px 7px; margin-top: 2px; }

/* v1.459 — o mesmo dono, agora na célula da lista. "sem dono" fica
   apagado de propósito: é o que entrou por robô/ficha pública e espera
   alguém — some no meio dos nomes seria o contrário do que se quer. */
.dono-cel { display: inline-flex; align-items: center; gap: 7px; min-width: 0; }
.dono-cel.sem { color: var(--texto-suave); font-style: italic; }

.chips { display: flex; gap: 0; margin-top: 14px; border-top: 1px solid var(--borda);
  padding-top: 12px; flex-wrap: wrap; }
.chip { padding: 0 18px 0 0; margin-right: 18px; border-right: 1px solid var(--borda);
  min-width: 0; }
.chip:last-child { border-right: 0; }
.chip .r { font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--texto-suave); font-weight: 600; display: block; }
.chip .v { font-size: 14px; color: var(--texto); font-weight: 600; margin-top: 2px;
  display: block; word-break: break-word; }
/* v1.546 — o chip que nomeia outro registro leva até ele, no mesmo azul
   das colunas da lista (v1.535). O peso 600 vem do .chip .v acima: aqui
   só se troca a cor, para o nome se anunciar como porta. */
.chip .v a.reg { color: var(--link); text-decoration: none; }
.chip .v a.reg:hover { text-decoration: underline; }

/* Grade 70/30 — faixa lateral alargada para 400px */
.g70 { display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 12px; align-items: start; }
.g70 > * { min-width: 0; }

.cartao { background: #fff; border: 1px solid var(--borda); border-radius: 10px;
  margin-bottom: 12px; box-shadow: 0 1px 2px rgba(2,48,71,.06); overflow: hidden; }
.cartao > h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-suave); padding: 12px 16px; border-bottom: 1px solid var(--borda);
  background: #F8F8F7; display: flex; align-items: center; gap: 8px; }
.cartao > h2 .cnt { font-weight: 400; text-transform: none; letter-spacing: 0; }
/* v1.560 — O LÁPIS DA SEÇÃO VIRA SÓ O TRAÇO.
   Ele é um `.btn-claro` (miolo branco + borda + navy) dentro do cabeçalho
   cinza do cartão: um botãozinho branco chamando mais atenção que o nome
   da seção ao lado. A regra da casa desde a v1.372 é que ícone de ação é
   traço discreto — é o que ele passa a ser.
   O #7d8a92 não é um cinza novo: é o mesmo dos ícones do cabeçalho (a
   engrenagem, o sino, o quadriculado). 3,34:1 sobre este fundo, acima do
   mínimo de 3:1 para elemento gráfico.
   No HOVER a caixa volta e a cor vira navy — sem isso o alvo de clique
   fica sem resposta nenhuma. Vale para qualquer botão claro no cabeçalho
   de cartão, não só o lápis: é onde eles todos deveriam ser discretos. */
.cartao > h2 .btn-claro { background: transparent; border-color: transparent;
  color: #7d8a92; }
.cartao > h2 .btn-claro:hover { background: #EDF3F6; border-color: var(--borda);
  color: var(--azul); }
.cartao .corpo { padding: 16px; }

.abas { display: flex; gap: 2px; border-bottom: 1px solid var(--borda); background: #F8F8F7;
  padding: 0 10px; }
.abas button { background: transparent; border: 0; border-bottom: 3px solid transparent;
  padding: 12px 14px; font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--texto-suave); cursor: pointer; }
.abas button:hover { color: var(--azul); }
.abas button.on { color: var(--azul); border-bottom-color: var(--verde); }
.painel-aba { display: none; } .painel-aba.on { display: block; }

.campos-ficha { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 24px; }
.campos-ficha > div { min-width: 0; }
.campos-ficha .r { font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--texto-suave); font-weight: 600; }
.campos-ficha .v { font-size: 14px; margin-top: 2px; word-break: break-word;
  border-bottom: 1px dotted #DCDCDA; padding-bottom: 5px; min-height: 26px; }
.campos-ficha .largo { grid-column: 1 / -1; }
.campos-ficha a { color: var(--link); text-decoration: none; }
.campos-ficha a:hover { text-decoration: underline; }

/* ------------------------------------------------------------------
   v1.357 — O LÁPIS DE CAMPO (edição campo a campo, estilo Salesforce)
   O ✎ aparece no hover (no celular fica sempre visível, discreto);
   clicou, o valor vira o campo REAL da janela de edição, movido para a
   linha — ver o bloco do lápis no ficha.js.
   ------------------------------------------------------------------ */
.campos-ficha .v.editavel { display: flex; align-items: baseline; gap: 8px; cursor: pointer; }
.campos-ficha .v.editavel .vtexto { flex: 1; min-width: 0; }
.lapis-campo {
  background: none; border: none; cursor: pointer; font-size: 13px;
  color: var(--texto-suave); padding: 0 3px; border-radius: 4px;
  opacity: 0; transition: opacity .12s; line-height: 1;
}
.campos-ficha .v.editavel:hover { border-bottom-color: var(--azul); }
.campos-ficha .v.editavel:hover .lapis-campo { opacity: 1; }
.lapis-campo:hover { color: var(--azul); background: #EDF3F6; }
@media (hover: none) { .lapis-campo { opacity: .55; } }

/* editando: o campo da janela mora na linha, com ✓ e ✕ colados nele */
.campos-ficha .v.editando { display: flex; gap: 6px; align-items: flex-start;
  flex-wrap: wrap; border-bottom: 2px solid var(--azul); padding-bottom: 3px; }
.campos-ficha .v.editando .campo { flex: 1; min-width: 0; margin: 0; padding: 0; }
.campos-ficha .v.editando .campo > label { display: none; }
.campos-ficha .v.editando .campo input:not([type="checkbox"]):not([type="radio"]),
.campos-ficha .v.editando .campo select,
.campos-ficha .v.editando .campo textarea {
  width: 100%; font: inherit; font-size: 14px; border: none; outline: none;
  background: #F8FBFD; padding: 3px 6px; border-radius: 4px;
}
.campos-ficha .v.editando .campo textarea { min-height: 64px; }
.campos-ficha .v.editando .ed-ok, .campos-ficha .v.editando .ed-nao {
  border: 1px solid var(--borda); background: #fff; border-radius: 4px;
  cursor: pointer; font-size: 12px; padding: 2px 7px; line-height: 1.4; margin-top: 2px;
}
.campos-ficha .v.editando .ed-ok { color: var(--ok); border-color: var(--ok); }
.campos-ficha .v.editando .ed-nao { color: var(--erro); }
.campos-ficha .v.editando .ed-ok:hover { background: #EAF6EF; }
.campos-ficha .v.editando .ed-nao:hover { background: #FDEDED; }
.campos-ficha .v.editando .lapis-erro { flex-basis: 100%; color: var(--erro);
  font-size: 12px; line-height: 1.5; }

/* salvou: um piscar verde confirma sem janela nenhuma */
@keyframes lapis-salvo { from { background: #EAF6EF; } to { background: transparent; } }
.campos-ficha .v.salvo { animation: lapis-salvo 1.2s ease-out; }

/* a janela de edição trabalhando invisível para o lápis */
.modal-invisivel { visibility: hidden !important; }

.mini { width: 100%; border-collapse: collapse; font-size: 13px; }
.mini td { padding: 9px 16px; border-bottom: 1px solid #F0F0EF; }
.mini tr:last-child td { border-bottom: 0; }
.mini a { color: var(--link); text-decoration: none; font-weight: 600; }
.mini a:hover { text-decoration: underline; }

/* Faixa de Atividade (lateral) */
.faixa .barra-acoes { display: flex; gap: 8px; padding: 12px 14px;
  border-bottom: 1px solid var(--borda); }
.faixa .barra-acoes button { flex: 1; background: #fff; border: 1px solid var(--borda);
  border-radius: 8px; padding: 9px 6px; font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--azul); cursor: pointer; }
.faixa .barra-acoes button:hover { background: #EDF3F6; }
.faixa .grupo-cab { padding: 9px 14px; background: #F8F8F7;
  border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda);
  font-size: 11px; font-weight: 800; letter-spacing: .5px; color: var(--texto-suave); }
.faixa .grupo-cab.late { color: var(--erro); } .faixa .grupo-cab.warn { color: var(--alerta); }
.faixa .grupo-cab.ok { color: var(--verde-escuro); }
.faixa .mes { padding: 7px 14px 3px; font-size: 11px; font-weight: 700;
  color: var(--texto-suave); text-transform: uppercase; letter-spacing: .4px; }
.faixa .rodape-faixa { padding: 11px 14px; text-align: center; border-top: 1px solid var(--borda); }
.faixa .rodape-faixa a { color: var(--link); font-size: 13px; text-decoration: none; font-weight: 600; }
.faixa .vazio-faixa { padding: 22px 14px; text-align: center; color: #8a94a1; font-size: 13px; }
.task-row .tm .due { margin: 0 4px 0 0; }

/* Excluir tarefa — discreto, aparece no hover, confirma na própria linha */
.task-row { position: relative; }
.task-row .del { opacity: 0; background: transparent; border: 0; color: #9AA7AE; font-size: 15px;
  line-height: 1; cursor: pointer; padding: 3px 5px; border-radius: 6px; flex: 0 0 auto;
  margin-top: 1px; transition: opacity .12s; font-family: inherit; }
.task-row:hover .del, .task-row .del:focus { opacity: 1; }
.task-row .del:hover { color: var(--erro); background: #FBE9E7; }
.task-row .conf { display: none; align-items: center; gap: 8px; margin-left: auto;
  font-size: 12px; color: var(--erro); font-weight: 600; white-space: nowrap; }
.task-row.perguntando { background: #FEF6F5; }
.task-row.perguntando .conf { display: flex; }
.task-row.perguntando > .due, .task-row.perguntando .del { display: none; }
.task-row .conf .sim { background: var(--erro); color: #fff; border: 0; border-radius: 6px;
  padding: 4px 10px; font-family: inherit; font-size: 12px; font-weight: 700; cursor: pointer; }
.task-row .conf .nao { background: transparent; border: 1px solid var(--borda); border-radius: 6px;
  padding: 4px 10px; font-family: inherit; font-size: 12px; cursor: pointer; color: var(--texto-suave); }
/* Em telas de toque não existe "passar o mouse": o ✕ fica sempre visível */
@media (hover: none) { .task-row .del { opacity: .55; } }

@media (max-width: 1040px) {
  .g70 { grid-template-columns: minmax(0,1fr); }
  .campos-ficha { grid-template-columns: 1fr; }
  .destaque .acoes-ficha { margin-left: 0; width: 100%; }
}

/* ===== Barra do funil (tela de Leads) ===== */
.funil { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.funil .etapa { flex: 1 1 130px; background: #fff; border: 1px solid var(--borda);
  border-radius: 10px; padding: 10px 12px; cursor: pointer; text-align: left;
  font-family: inherit; box-shadow: 0 1px 2px rgba(2,48,71,.06);
  border-bottom: 3px solid transparent; }
.funil .etapa:hover { background: #F5F8F4; }
.funil .etapa.on { border-bottom-color: var(--verde); background: #F5F8F4; }
.funil .etapa .n { display: block; font-size: 20px; font-weight: 700; color: var(--azul); line-height: 1.1; }
.funil .etapa .r { display: block; font-size: 12px; font-weight: 600; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .3px; margin-top: 2px; }
.funil .etapa .s { display: block; font-size: 11px; color: var(--texto-suave); margin-top: 2px; }
td.due { font-size: 13px; font-weight: 700; }

/* ===== Administração ===== */
.cartao > h2 .dir { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; }
.vazio-min { padding: 22px 16px; color: #8a94a1; font-size: 13px; }
.aviso-fin { background: #FFF8E8; border: 1px solid #F3E2BC; border-radius: 10px; padding: 11px 13px;
  font-size: 13px; color: #7a5b16; line-height: 1.5; margin-bottom: 14px; }
/* ------------------------------------------------------------------
   v1.378 — BACKUP DOS SEUS DADOS (aba da Administração)
   ------------------------------------------------------------------ */
.bk-estado { display:flex; align-items:center; gap:14px; padding:14px 16px;
  border:1px solid var(--borda); border-radius:10px; background:#FBFBFA; margin-bottom:14px; }
.bk-estado .quando { flex:1; min-width:0; }
.bk-estado .quando b { font-size:14.5px; display:block; }
.bk-estado .quando small { color:var(--texto-suave); font-size:12.5px; }
.bk-progresso { display:none; margin-top:12px; }
.bk-progresso.on { display:block; }
.bk-barra { background:var(--fundo); border:1px solid var(--borda); border-radius:8px;
  height:14px; overflow:hidden; }
.bk-barra span { display:block; height:100%; width:0; background:var(--verde-escuro);
  border-radius:8px 0 0 8px; transition:width .2s; }
.bk-passo { font-size:12px; color:var(--texto-suave); margin-top:5px; }
/* a faixa do lembrete: navy (é recado, não alarme — o vermelho é do
   WhatsApp caído). Fica ACIMA da faixa do whats se as duas aparecerem. */
.faixa-backup { position:fixed; left:0; right:0; bottom:0; z-index:79;
  background:var(--azul); color:#fff; padding:10px 44px 10px 16px; font-size:13.5px;
  text-align:center; box-shadow:0 -2px 10px rgba(0,0,0,.25); }
.faixa-backup a { color:#fff; font-weight:700; text-decoration:underline; }
.faixa-backup .fb-fechar { position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.15); border:none; color:rgba(255,255,255,.85);
  font:inherit; font-size:12px; cursor:pointer; padding:4px 8px; border-radius:4px; line-height:1; }
.faixa-backup .fb-fechar:hover { background:rgba(255,255,255,.3); color:#fff; }
body:has(.faixa-whats) .faixa-backup { bottom:44px; }


.g-adm { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 14px; align-items: start; }
.g-adm > * { min-width: 0; }

.item-papel { display: flex; align-items: center; gap: 8px; padding: 12px 16px;
  border-bottom: 1px solid #F0F0EF; cursor: pointer; }
.item-papel:last-child { border-bottom: 0; }
.item-papel:hover { background: #F5F8F4; }
.item-papel.on { background: #EDF3F6; border-left: 3px solid var(--verde); padding-left: 13px; }
.item-papel .nome { font-size: 14px; font-weight: 600; color: var(--azul); }
.item-papel .desc { font-size: 12px; color: var(--texto-suave); margin-top: 2px; line-height: 1.4; }
.item-papel .del-papel { margin-left: auto; background: transparent; border: 0; color: #9AA7AE;
  font-size: 14px; cursor: pointer; padding: 3px 6px; border-radius: 6px; font-family: inherit; }
.item-papel .del-papel:hover { color: var(--erro); background: #FBE9E7; }

table.matriz { width: 100%; border-collapse: collapse; font-size: 13px; }
table.matriz th { background: #F8F8F7; color: var(--texto-suave); font-size: 11px;
  text-transform: uppercase; letter-spacing: .4px; padding: 9px 8px; text-align: center;
  border-bottom: 2px solid var(--borda); white-space: nowrap; }
table.matriz th:first-child { text-align: left; }
table.matriz td { padding: 8px; border-bottom: 1px solid #F0F0EF; text-align: center; }
table.matriz td.obj { text-align: left; font-weight: 600; color: var(--texto); white-space: nowrap; }
table.matriz input[type=checkbox] { width: 17px; height: 17px; cursor: pointer; accent-color: #023047; }
table.matriz input[type=checkbox]:disabled { opacity: .25; cursor: not-allowed; }
table.matriz select { padding: 5px 8px; border: 1px solid var(--borda); border-radius: 7px;
  font-family: inherit; font-size: 12px; background: #fff; max-width: 190px; }
/* ------------------------------------------------------------
   v1.278 — PERMISSÃO POR CAMPO (Administração → Papéis)

   O selo da coluna "Campos" nasce cinza ("todos") e vira âmbar quando
   há exceção. A cor existe para a exceção ser vista de relance: regra
   de segurança que só aparece atrás de um clique é como se produz
   surpresa seis meses depois.
   ------------------------------------------------------------ */
.btn-campos { background: transparent; border: 1px solid var(--borda); border-radius: 999px;
  padding: 3px 10px; font-family: inherit; font-size: 12px; color: var(--texto-suave);
  cursor: pointer; white-space: nowrap; }
.btn-campos:hover { border-color: var(--azul); color: var(--azul); background: #F3F8FA; }
.btn-campos.tem { border-color: var(--alerta); color: #8a5a00; background: #FFF8EC; font-weight: 600; }

.pc { border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
.pc-topo { display: flex; align-items: center; gap: 12px; padding: 11px 14px;
  background: #F8F8F7; border-bottom: 1px solid var(--borda); flex-wrap: wrap; }
.pc-topo b { color: var(--azul); font-size: 14px; }
.pc-busca { flex: 1 1 180px; max-width: 280px; background: #fff;
  border: 1px solid var(--borda); border-radius: 8px; padding: 6px 10px; }
.pc-busca input { border: 0; outline: 0; font-family: inherit; font-size: 13px;
  width: 100%; color: var(--texto); background: transparent; }
.pc .voltar { font-size: 12.5px; color: var(--link); cursor: pointer; white-space: nowrap; }

.pc-atalhos { display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  background: #fff; border-bottom: 1px solid #F0F0EF; flex-wrap: wrap; }
.atalho { border: 1px solid var(--borda); background: #fff; border-radius: 8px;
  padding: 5px 11px; font-family: inherit; font-size: 12.5px; color: var(--texto); cursor: pointer; }
.atalho:hover { border-color: var(--azul); color: var(--azul); background: #F3F8FA; }
.atalho.sugerido { border-color: var(--alerta); background: #FFF8EC; color: #8a5a00; font-weight: 600; }
.atalho-nota { font-size: 12px; color: var(--texto-suave); margin-left: auto; }

table.campos { width: 100%; border-collapse: collapse; font-size: 13px; }
table.campos th { background: #fff; color: var(--texto-suave); font-size: 11px;
  text-transform: uppercase; letter-spacing: .05em; padding: 8px; border-bottom: 1px solid var(--borda); }
table.campos th:first-child { text-align: left; padding-left: 14px; }
table.campos td { padding: 7px 8px; border-bottom: 1px solid #F5F5F4; text-align: center; }
table.campos td.campo { text-align: left; padding-left: 14px; }
table.campos input[type=checkbox] { width: 17px; height: 17px; cursor: pointer; accent-color: #023047; }
table.campos tr.grupo td { background: #FAFAF9; padding: 7px 14px; text-align: left;
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-suave); border-bottom: 1px solid #F0F0EF; }
table.campos tr.oculto { background: #FFFDF7; }
table.campos tr.oculto td.campo { color: #8a5a00; }
.tag-sens { display: inline-block; max-width: max-content; white-space: nowrap;
  font-size: 10.5px; line-height: 1.6; background: #FFF1D6; color: #8a5a00;
  border-radius: 999px; padding: 0 8px; margin-left: 7px; vertical-align: 1px; }
.pc-pe { display: flex; align-items: center; gap: 10px; padding: 11px 14px;
  background: #FAFAF9; border-top: 1px solid var(--borda);
  font-size: 12.5px; color: var(--texto-suave); flex-wrap: wrap; }
.pc-pe .btn { margin-left: auto; }

/* v1.280 — a prévia da ficha e o campo travado */
.previa { border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; margin-top: 14px; }
.previa-topo { background: #EDF3F6; padding: 9px 14px; font-size: 12.5px;
  color: var(--azul); font-weight: 600; }
.previa-corpo { display: grid; grid-template-columns: 1fr 1fr; }
.previa-corpo > div { padding: 12px 14px; }
.previa-corpo > div:first-child { border-right: 1px solid var(--borda); }
.previa-corpo .quem { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-suave); margin-bottom: 8px; }
.prev-l { font-size: 13px; color: var(--texto); padding: 3px 0; border-bottom: 1px solid #F5F5F4; }
.prev-l.trava { color: #8a5a00; }
.prev-cad { font-size: 11px; color: #8a5a00; }
.prev-nota { margin-top: 10px; font-size: 12px; color: var(--texto-suave); line-height: 1.5; }
table.campos tr.travado { background: #FFFDF7; }
table.campos tr.travado td.campo { color: #8a5a00; }

/* o aviso no campo travado da ficha */
.campo-travado { display: block; margin-top: 4px; font-size: 11.5px; color: #8a5a00; }

.nota-matriz { margin-top: 14px; background: #F8F8F7; border-left: 3px solid var(--verde);
  padding: 10px 13px; font-size: 12.5px; color: var(--texto-suave); line-height: 1.55; }

.caixa-login .sub { text-align: center; color: var(--texto-suave); font-size: 13px;
  line-height: 1.55; margin-bottom: 22px; }

@media (max-width: 1040px) { .g-adm { grid-template-columns: minmax(0,1fr); } }

/* =====================================================================
   CABEÇALHO DE DUAS LINHAS (padrão Salesforce) — js/cabecalho.js
   Linha 1: marca · busca global · ícones · quem sou eu
   Linha 2: seletor de objetos · abas
   ===================================================================== */
/* v1.557 — O SEPARADOR SÃO DUAS COISAS, e é isso que o print do
   Salesforce mostra quando se aproxima:

   1. uma LINHA FINA de 3px — a mesma largura do filete que ela
      substituiu. Ela nasceu com 6px nesta versão e ficou pesada: no
      Salesforce a linha é fina. O degradê ainda se lê em 3px porque as
      duas pontas são distantes (#023047 → #0A5E8A);
   2. o DEGRADÊ que cai da linha sobre o fundo azul — escuro colado nela
      e clareando por uns 40px até virar o azul chapado da página. Não é
      um degradê DENTRO da faixa: é a sombra do cabeçalho pousando na
      página, e é a região que o Rodrigo marcou de vermelho no print do
      Salesforce. Só se enxerga porque o fundo agora é colorido; sobre o
      bege antigo ela sumia — e por isso nasceu curta demais (12px) e
      precisou de duas voltas até alcançar o que o print mostra.

   A sombra é do ::after e não do .topo2 para nascer embaixo da linha, e
   é `box-shadow` e não um segundo pseudo-elemento porque sombra não
   ocupa espaço no fluxo nem cobre clique.

   O ::after é filho de bloco: o .topo2 não é flex (o .topo antigo é, e
   por isso NÃO leva esta faixa — ali o pseudo-elemento viraria um item
   do flex e entraria na linha dos botões). */
.topo2 { background: #fff; position: relative; z-index: 40; }
.topo2::after { content: ''; display: block; height: 3px;
  background: linear-gradient(180deg, var(--sep-topo) 0%, var(--sep-base) 100%);
  box-shadow: 0 16px 24px -8px rgba(2,48,71,.60); }
.topo2 .linha1 { display: flex; align-items: center; gap: 16px; padding: 8px 20px; }
.topo2 .marca { display: flex; align-items: center; flex: 0 0 auto; text-decoration: none; }
/* v1.442–1.444 — a altura de verdade sai inline do logoEmpresa (60px);
   esta linha acompanha para a folha não mentir. */
.topo2 .marca img { display: block; height: 60px; width: auto; }

.buscag { flex: 1; max-width: 520px; position: relative; }
.buscag .lupa { position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  font-size: 13px; opacity: .65; pointer-events: none; }
.buscag input { width: 100%; background: var(--fundo); border: 1px solid var(--borda);
  border-radius: 22px; padding: 9px 16px 9px 38px; font-size: 14px; font-family: inherit;
  color: var(--texto); }
.buscag input:focus { outline: none; background: #fff; border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(2,48,71,.08); }

.buscag-resultados { display: none; position: absolute; top: calc(100% + 8px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--borda); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(2,48,71,.16); max-height: 60vh; overflow-y: auto; z-index: 60; }
.buscag-resultados.aberto { display: block; }
.bg-grupo + .bg-grupo { border-top: 1px solid var(--borda); }
.bg-tit { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-suave); background: #FAFAF9; padding: 7px 14px; border-bottom: 1px solid #F0F0EF; }
/* v1.372 — o ícone do grupo de resultados, agora em traço: alinhado à
   linha do texto e na mesma cor apagada do título. */
.bg-tit { display: flex; align-items: center; gap: 7px; }
.bg-tit svg { flex: 0 0 auto; display: block; }
.bg-item { display: block; padding: 9px 14px; text-decoration: none; border-bottom: 1px solid #F5F5F4; }
.bg-item:last-child { border-bottom: 0; }
.bg-item:hover { background: #F3F8FA; }
.bg-nome { display: block; font-size: 14px; font-weight: 600; color: var(--azul); }
.bg-apoio { display: block; font-size: 12px; color: var(--texto-suave); margin-top: 1px; }
.bg-vazio { padding: 16px 14px; font-size: 13px; color: var(--texto-suave); text-align: center; }

.topo2 .icones { margin-left: auto; display: flex; align-items: center; gap: 4px; position: relative; }
.topo2 .ico { width: 36px; height: 36px; border-radius: 50%; border: 0; background: transparent;
  display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer;
  font-family: inherit; }
.topo2 .ico:hover { background: #EDF3F6; }

/* v1.442 — o chip encolheu para só a foto + setinha (mockup de 30/08);
   nome e papel moram no cabeçalho do menu Minha conta, logo abaixo. */
.chip-usuario { display: flex; align-items: center; gap: 6px; padding: 3px 8px 3px 3px;
  border: 1px solid var(--borda); border-radius: 22px; background: #fff; cursor: pointer;
  font-family: inherit; margin-left: 6px; }
.chip-usuario:hover { background: #EDF3F6; }
.chip-nome { font-size: 13.5px; font-weight: 600; color: var(--azul); white-space: nowrap; }
.chip-papel { font-size: 11px; color: var(--texto-suave); white-space: nowrap; }
.chip-seta { font-size: 10px; color: var(--texto-suave); }

/* o cabeçalho do menu Minha conta: quem sou eu, papel · empresa (e o
   selo PLATAFORMA do dono da plataforma, quando for o caso) */
.menu-conta .conta-cab { display: flex; gap: 11px; align-items: center; padding: 12px 16px;
  border-bottom: 1px solid var(--borda); background: #FAFAF9; }
.conta-cab .conta-quem { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.conta-cab .chip-nome { font-size: 14px; }
.conta-cab .chip-papel { font-size: 11.5px; white-space: normal; }

.menu-engrenagem { display: none; position: absolute; top: 44px; right: 0; width: 250px;
  background: #fff; border: 1px solid var(--borda); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(2,48,71,.18); overflow: hidden; z-index: 70; }
.menu-engrenagem.aberto { display: block; }
.menu-engrenagem a { display: flex; align-items: center; gap: 9px; padding: 10px 14px;
  font-size: 14px; color: var(--texto); text-decoration: none; }
.menu-engrenagem a:hover { background: #F3F8FA; }
/* v1.372 — os itens destes menus (configuração, minha conta e ajuda)
   deixaram de abrir com emoji. O ícone fica cinza e acende junto com a
   linha, como o resto do cabeçalho. */
.menu-engrenagem a svg { flex: 0 0 auto; color: #7d8a92; display: block; }
.menu-engrenagem a:hover svg { color: var(--azul); }
.menu-engrenagem .mtit { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-suave); background: #FAFAF9; padding: 7px 14px;
  border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.menu-engrenagem .mtit:first-child { border-top: 0; }
.menu-conta { right: 0; }

/* o overflow fica nas ABAS, não na linha: se ficasse na linha, ela viraria
   uma caixa de recorte e o painel do seletor de objetos (position:absolute)
   seria cortado — o botão abria e nada aparecia */
.topo2 .linha2 { display: flex; align-items: center; border-top: 1px solid var(--borda);
  position: relative; }
.lancador { display: flex; align-items: center; gap: 9px; background: transparent; border: 0;
  border-right: 1px solid var(--borda); padding: 11px 16px; font-family: inherit;
  font-size: 14px; font-weight: 700; color: var(--azul); cursor: pointer; white-space: nowrap; }
.lancador:hover { background: #F3F8FA; }

/* v1.276 — A CASINHA DO INÍCIO, vizinha do quadriculado.
   Mesma altura e mesmo filete do .lancador para os dois lerem como um
   par de botões da barra, e não como um enfeite colado nas abas.
   Quando a pessoa JÁ está na home, ela se pinta igual à aba ativa
   (fundo azul-claro + barrinha) — assim a barra também passa a
   responder "onde eu estou" na página inicial, coisa que antes ela
   não respondia. */
.inicio-casa { display: flex; align-items: center; justify-content: center;
  border-right: 1px solid var(--borda); border-bottom: 3px solid transparent;
  padding: 11px 15px; color: var(--azul); text-decoration: none; flex: 0 0 auto; }
.inicio-casa:hover { background: #F3F8FA; }
.inicio-casa.ativo { background: #EEF4FF; color: #0176D3; border-bottom-color: #0176D3; }
.inicio-casa svg { display: block; }
/* A engrenagem é SVG de traço: herda a cor do botão e o tamanho vem daqui,
   não do sistema operacional (era emoji). 19px pareceu o ponto em que ela
   fica visível sem competir com o nome do usuário ao lado. */
.topo2 .ico svg { width: 19px; height: 19px; color: #7d8a92; display: block; }
.topo2 .ico:hover svg { color: var(--azul); }
.lanc-ico-svg svg { width: 18px; height: 18px; color: var(--azul); }
.lanc-ico-svg { display: flex; align-items: center; justify-content: center; }
/* v1.372 — TODO ícone do lançador virou traço (era emoji). A regra
   acima valia só para a engrenagem; agora vale para a grade inteira. */
.lanc-ico svg { width: 18px; height: 18px; color: var(--azul); display: block; }

.waffle { display: inline-grid; grid-template-columns: repeat(3, 4px); gap: 2px; }
.waffle i { width: 4px; height: 4px; background: #7d8a92; border-radius: 1px; }

.painel-lancador { display: none; position: absolute; top: 100%; left: 8px; width: 460px;
  max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--borda);
  border-radius: 10px; box-shadow: 0 12px 30px rgba(2,48,71,.18); z-index: 70; overflow: hidden; }
.painel-lancador.aberto { display: block; }
.lanc-tit { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-suave); background: #FAFAF9; padding: 8px 14px; border-bottom: 1px solid var(--borda); }
.lanc-grade { display: grid; grid-template-columns: 1fr 1fr; padding: 6px; }
.lanc-item { display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 8px;
  text-decoration: none; color: var(--texto); }
.lanc-item:hover { background: #F3F8FA; }
.lanc-item b { display: block; font-size: 14px; color: var(--azul); font-weight: 600; }
.lanc-item small { display: block; font-size: 11.5px; color: var(--texto-suave); line-height: 1.35; }
.lanc-ico { width: 34px; height: 34px; border-radius: 8px; background: #EDF3F6;
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex: 0 0 auto; }
.lanc-item.futuro { opacity: .5; cursor: default; }

/* ------------------------------------------------------------------
   v1.531 — A FILEIRA DE ABAS QUE CABE (padrão Salesforce, 06/09/2026).

   Era `overflow-x: auto`: quando os objetos passavam da largura, a
   fileira virava uma barra de rolagem lateral SEM nenhuma pista de que
   havia mais coisa à direita. E o lápis de personalizar morava DENTRO
   dela — saía da tela junto com as abas, justo o botão que serviria
   para arrumar a bagunça.

   Agora a fileira corta no limite e o excedente vai para um "Mais ▾",
   com o lápis ao lado dele, num grupo que NUNCA rola. Quem mede é o
   ajustarAbas() do cabecalho.js.

   As duas linhas abaixo existem para a MEDIÇÃO não mentir:
   · `overflow: hidden` + `min-width: 0` deixam a fileira ser recortada
     pelo espaço que sobra, em vez de empurrar a linha para fora;
   · `flex: 0 0 auto` na aba impede que ela ENCOLHA — flex-shrink é 1
     por padrão, e aba encolhida faz a conta de "quantas cabem" errar.
   ------------------------------------------------------------------ */
.topo2 .abas { display: flex; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.topo2 .aba { padding: 12px 16px; font-size: 14px; color: var(--texto-suave); text-decoration: none;
  border-bottom: 3px solid transparent; white-space: nowrap; flex: 0 0 auto; }
/* a aba que não coube: ela continua no HTML (o "Mais" lê dali) */
.topo2 .aba.fora-da-fileira { display: none; }

/* o grupo do fim: "Mais ▾" e o lápis. Fora do .abas de propósito —
   dentro dele seriam recortados como qualquer aba */
.abas-fim { display: flex; align-items: center; flex: 0 0 auto; }
.aba-mais { display: inline-flex; align-items: center; gap: 5px; padding: 12px 14px;
  font-size: 14px; font-family: inherit; color: var(--texto-suave); background: transparent;
  border: 0; border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; }
.aba-mais:hover { color: var(--azul); background: #F7FAFB; }
.aba-mais .seta { font-size: 10px; }
.aba-mais[hidden] { display: none; }
/* quando o objeto ABERTO está escondido no menu, o botão se pinta como
   a aba ativa — senão a barra deixaria de responder "onde eu estou" */
.aba-mais.tem-ativo { color: #0176D3; font-weight: 700; background: #EEF4FF;
  border-bottom-color: #0176D3; }

/* o painel pendura na .linha2, como o .menu-personalizar e pelo mesmo
   motivo: no .abas ele sairia recortado */
.menu-abas-mais { display: none; position: absolute; top: 100%; width: 250px;
  max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--borda);
  border-radius: 10px; box-shadow: 0 12px 30px rgba(2,48,71,.18);
  z-index: 70; max-height: 70vh; overflow-y: auto; }
.menu-abas-mais.aberto { display: block; }
.menu-abas-mais a { display: flex; align-items: center; gap: 9px; padding: 10px 14px;
  font-size: 14px; color: var(--texto); text-decoration: none; }
.menu-abas-mais a:hover { background: #F3F8FA; }
.menu-abas-mais a.ativo { color: #0176D3; font-weight: 700; background: #EEF4FF; }
.topo2 .aba:hover { color: var(--azul); background: #F7FAFB; }
/* v1.177 — a aba do objeto aberto fica ASSINALADA (estilo Salesforce,
   aprovado em 05/08): fundo azul-claro + texto azul + barrinha. */
.topo2 .aba.ativo { color: #0176D3; font-weight: 700; background: #EEF4FF;
  border-bottom-color: #0176D3; }

@media (max-width: 760px) {
  .buscag { max-width: none; }
  /* v1.442 — o .chip-txt morreu: o chip é só a foto em toda largura */
  .lancador span:last-child { display: none; }
}

/* =====================================================================
   MOTOR DE LISTA — js/lista.js, js/visoes.js, js/kanban.js
   ===================================================================== */
/* v1.628 — AS PÍLULAS DE SITUAÇÃO, acima da barra da lista.
   O desenho é o do trilho de pílulas do Painel (.seg-pilulas), mas em
   classe própria: lá são LINKS entre telas, aqui são BOTÕES que
   filtram a mesma tela — e um `href="#"` para filtrar rola a página. */
.lst-pilulas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.lst-pilulas:not(:empty) { margin: 0 0 12px; }
.lst-pil { font-family: inherit; font-size: 13.5px; padding: 8px 16px; border-radius: 999px;
  border: 1px solid var(--borda); background: #fff; color: var(--azul); font-weight: 600;
  cursor: pointer; }
.lst-pil small { font-weight: 400; color: var(--texto-suave); margin-left: 6px; }
.lst-pil:hover { background: #EDF3F6; }
.lst-pil.on { background: var(--azul); border-color: var(--azul); color: #fff; }
.lst-pil.on small { color: rgba(255,255,255,.75); }

.lst-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  position: relative; margin-bottom: 10px; }
.lst-visao { font-size: 18px; font-weight: 700; color: var(--azul); padding: 4px 0; }
.lst-visao.clicavel { cursor: pointer; display: flex; align-items: center; gap: 6px; }
.lst-visao.clicavel:after { content: '▾'; font-size: 12px; color: var(--texto-suave); }
.lst-visao.clicavel:hover { color: var(--azul-claro); }
.lst-busca { flex: 1; min-width: 200px; max-width: 340px; padding: 9px 14px;
  border: 1px solid var(--borda); border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff; }
.lst-busca:focus { outline: 2px solid var(--azul); outline-offset: -1px; }
.lst-icones { display: flex; gap: 2px; margin-left: auto; }
.lst-ico { width: 34px; height: 34px; border: 1px solid var(--borda); background: #fff;
  border-radius: 8px; cursor: pointer; font-size: 15px; color: var(--azul);
  font-family: inherit; position: relative; display: flex; align-items: center; justify-content: center; }
.lst-ico:hover { background: #EDF3F6; }
.lst-ico.on { background: var(--azul); color: #fff; border-color: var(--azul); }
.lst-cnt:not(:empty) { position: absolute; top: -5px; right: -5px; background: var(--verde-escuro);
  color: #fff; font-size: 10px; font-weight: 700; border-radius: 10px; padding: 1px 5px; }

.lst-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.lst-chip { background: #E7F0F6; color: var(--azul); font-size: 12px; font-weight: 600;
  padding: 4px 6px 4px 10px; border-radius: 20px; display: inline-flex; align-items: center; gap: 4px; }
.lst-chip button { background: transparent; border: 0; color: var(--azul); cursor: pointer;
  font-size: 11px; padding: 0 4px; font-family: inherit; }
.lst-chip button:hover { color: var(--erro); }

.lst-menu { position: absolute; top: 44px; right: 0; z-index: 80; width: 440px;
  max-width: calc(100vw - 32px); background: #fff; border: 1px solid var(--borda);
  border-radius: 10px; box-shadow: 0 12px 30px rgba(2,48,71,.18); overflow: hidden; }
.lst-menu-tit { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-suave); background: #FAFAF9; padding: 8px 14px;
  border-bottom: 1px solid var(--borda); border-top: 1px solid var(--borda); }
.lst-menu-tit:first-child { border-top: 0; }
.lst-menu-corpo { padding: 12px 14px; max-height: 46vh; overflow-y: auto; }
.lst-menu-pe { display: flex; justify-content: flex-end; gap: 8px; padding: 10px 14px;
  border-top: 1px solid var(--borda); background: #FAFAF9; }
.lst-menu-pe .btn { padding: 7px 14px; font-size: 13px; }
.lst-vazio-min { color: var(--texto-suave); font-size: 13px; padding: 6px 0; }
.lst-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-suave); margin: 10px 0 4px; }

.lst-col-item { display: flex; align-items: center; justify-content: space-between;
  padding: 6px 0; border-bottom: 1px solid #F2F2F1; font-size: 14px; }
.lst-col-item:last-child { border-bottom: 0; }
.lst-col-acoes button { background: transparent; border: 1px solid var(--borda); border-radius: 6px;
  width: 26px; height: 26px; cursor: pointer; color: var(--texto-suave); font-family: inherit; margin-left: 3px; }
.lst-col-acoes button:hover:not(:disabled) { background: #EDF3F6; color: var(--azul); }
.lst-col-acoes button:disabled { opacity: .3; cursor: not-allowed; }
.lst-opt { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 14px; cursor: pointer; }

.flt-linha { display: grid; grid-template-columns: 1fr 1fr 1.1fr auto; gap: 6px;
  align-items: center; margin-bottom: 8px; }
.flt-linha select, .flt-linha input { padding: 7px 8px; border: 1px solid var(--borda);
  border-radius: 6px; font-family: inherit; font-size: 13px; min-width: 0; background: #fff; }
.flt-x { background: transparent; border: 1px solid var(--borda); border-radius: 6px;
  width: 30px; height: 30px; cursor: pointer; color: var(--texto-suave); font-family: inherit; }
.flt-x:hover { color: var(--erro); background: #FBE9E7; }
.flt-multi { border: 1px solid var(--borda); border-radius: 6px; padding: 5px 8px;
  max-height: 92px; overflow-y: auto; font-size: 12.5px; }
.flt-multi label { display: flex; align-items: center; gap: 5px; padding: 1px 0; cursor: pointer; }

/* ------------------------------------------------------------------
   v1.359 — A JANELA DOS FILTROS, CENTRADA (estilo Salesforce).
   Cada filtro é um cartão que se lê como frase; clicar abre a edição
   dele dentro do cartão. Ver abrirFiltros/cartaoDeFiltro no visoes.js.
   ------------------------------------------------------------------ */
.flt-janela { width: 480px; padding: 22px 24px 18px; }
.flt-cabeca { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.flt-cabeca h2 { margin: 0; }
.flt-cabeca small { color: var(--texto-suave); font-size: 12.5px; }
.flt-sub { color: var(--texto-suave); font-size: 12.5px; margin-bottom: 14px; }

.flt-cartao { border: 1px solid var(--borda); border-radius: 8px; margin-bottom: 8px;
  background: #fff; overflow: hidden; transition: box-shadow .12s; }
.flt-cartao:hover { box-shadow: 0 1px 5px rgba(2,48,71,.12); }
.flt-cartao-topo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; }
.flt-cartao-topo .info { flex: 1; min-width: 0; }
.flt-cartao-topo .campo-nome { font-size: 11px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--texto-suave); font-weight: 600; }
.flt-cartao-topo .frase { font-size: 14px; color: var(--link); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flt-cartao-topo .frase .op { color: var(--texto-suave); font-weight: 400; }
.flt-cartao-x { background: none; border: none; cursor: pointer; color: var(--texto-suave);
  font-size: 14px; padding: 4px 6px; border-radius: 5px; line-height: 1; font-family: inherit; }
.flt-cartao-x:hover { color: var(--erro); background: #FBE9E7; }

.flt-cartao.aberto { border-color: var(--azul); box-shadow: 0 1px 6px rgba(2,48,71,.15); }
.flt-editor { border-top: 1px solid var(--borda); background: #F8FBFD;
  padding: 12px; display: none; flex-direction: column; gap: 10px; }
.flt-cartao.aberto .flt-editor { display: flex; }
.flt-editor .flt-pronto { align-self: flex-end; padding: 7px 16px; font-size: 13px; }

.flt-add { width: 100%; border: 1px dashed var(--borda); background: #fff; color: var(--link);
  font: inherit; font-size: 13.5px; font-weight: 600; border-radius: 8px; padding: 11px;
  cursor: pointer; margin: 4px 0 2px; }
.flt-add:hover { border-color: var(--azul); background: #F7FAFB; }

.flt-vazio { border: 1px dashed var(--borda); border-radius: 8px; padding: 18px;
  text-align: center; color: var(--texto-suave); font-size: 13.5px; margin-bottom: 8px; }

.flt-pe { display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--borda); }
.flt-limpar { background: none; border: none; color: var(--erro); font: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 4px; border-radius: 5px; }
.flt-limpar:hover { background: #FBE9E7; }
.flt-pe .dir { display: flex; gap: 8px; }
.flt-pe .btn { padding: 8px 16px; font-size: 13px; }

/* ------------------------------------------------------------------
   v1.367 — A JANELA DAS LISTAS ("Modos de exibição"), CENTRADA.
   Irmã da .flt-janela: mesma moldura, mesmo fundo escurecido.
   Ver abrirMenuVisoes no visoes.js.
   ------------------------------------------------------------------ */
.vsl-janela { width: 480px; padding: 22px 24px 18px; }
.vsl-corpo { max-height: 56vh; overflow-y: auto; }
/* na janela central há espaço: a linha respira e as ações crescem um passo */
.vsl-janela .lst-visao-item { padding: 10px 8px; border-radius: 6px; }
.vsl-janela .lst-visao-acoes button { font-size: 13px; padding: 4px 6px; }
.vsl-fechar { background: none; border: none; color: var(--texto-suave); font: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer; padding: 6px 4px; border-radius: 5px; }
.vsl-fechar:hover { background: #EDF3F6; color: var(--azul); }

.lst-visao-item { display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; font-size: 14px; border-bottom: 1px solid #F2F2F1; }
.lst-visao-item > span:first-child { cursor: pointer; flex: 1; color: var(--azul); font-weight: 600; }
.lst-visao-item:hover { background: #F7FAFB; }
.lst-visao-item.on > span:first-child { color: var(--verde-escuro); }
.lst-visao-acoes button { background: transparent; border: 0; cursor: pointer;
  font-size: 12px; padding: 2px 5px; color: var(--texto-suave); font-family: inherit; }
.lst-visao-acoes button:hover { color: var(--azul); }

.lst-tabela th.ord { cursor: pointer; user-select: none; }
.lst-tabela th.ord:hover { color: var(--azul); background: #EDF3F6; }
.lst-tabela th.ord-on { color: var(--azul); }
.lst-tabela th, .lst-tabela td { padding-left: 11px; padding-right: 11px; }
.lst-tabela td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; }

/* ------------------------------------------------------------------
   v1.535 — OS LINKS DA LISTA (padrão Salesforce, aprovado em 06/09).
   A linha inteira deixou de ser clicável: quem abre o registro é a
   célula do nome (.reg-nome, sempre a do Código ou, se ele não estiver
   à vista, a primeira coluna), e as colunas de pesquisa (.reg) levam ao
   registro que apontam. Os dois são azuis para se anunciarem: era essa
   a queixa — nada na tela dizia que aquele nome tinha ficha própria.
   ------------------------------------------------------------------ */
.lst-tabela td a.reg-nome { color: var(--link); text-decoration: none; font-weight: 600; }
.lst-tabela td a.reg      { color: var(--link); text-decoration: none; }
.lst-tabela td a.reg-nome:hover, .lst-tabela td a.reg:hover { text-decoration: underline; }
/* a linha ainda acende ao passar o mouse — mostra qual registro se está
   lendo numa tabela larga —, mas o cursor não promete mais um clique */
.lst-tabela tbody tr:hover td { background: #F5F8F4; }
.lst-tabela tbody tr { cursor: default; }
/* v1.628 — a linha do registro encerrado. A mesma opacidade do cartão
   de contratos na ficha do imóvel (0,65 lá, 0,6 aqui porque a lista é
   mais densa). Some no passar do mouse: quem foi ler aquela linha
   precisa dela inteira. */
.lst-tabela tbody tr.lst-apagada { opacity: .6; }
.lst-tabela tbody tr.lst-apagada:hover { opacity: 1; }
/* o selo debaixo da etiqueta de situação (a data do encerramento).
   NÃO é .lst-sub: esse nome já é o subtítulo do menu de listas salvas. */
.lst-selo { font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; }
/* v1.536 — o selinho da coluna presa, no seletor de colunas */
.lst-col-item .col-presa { font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--texto-suave); background: #EDF3F6;
  border-radius: 4px; padding: 1px 5px; margin-left: 6px; }
.lst-tabela.wrap td { white-space: normal; overflow: visible; }
.lst-tabela.denso td { padding-top: 6px; padding-bottom: 6px; }
.lst-tabela td.edt { cursor: cell; }
.lst-tabela td.edt:hover { background: #EDF3F6; box-shadow: inset 0 0 0 1px var(--borda); }
.lst-tabela td.editando { background: #fff; box-shadow: inset 0 0 0 2px var(--azul); padding: 3px 6px; }
.lst-edt { width: 100%; border: 0; padding: 5px; font-family: inherit; font-size: 14px; outline: none; background: #fff; }

.lst-rodape { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 4px 0; font-size: 13px; color: var(--texto-suave); flex-wrap: wrap; }
.lst-rodape b { color: var(--azul); }
.lst-aviso { font-size: 11.5px; opacity: .8; }
.lst-rodape .btn { padding: 6px 14px; font-size: 13px; }

/* ---------- Kanban ---------- */
.kb-aviso { font-size: 12.5px; color: var(--texto-suave); margin-bottom: 10px; }
.kb-quadro { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 12px; align-items: flex-start; }
.kb-coluna { flex: 0 0 250px; background: #EDEDEB; border-radius: 10px; padding: 10px; }
.kb-coluna.kb-alvo { background: #E1EFDA; outline: 2px dashed var(--verde-escuro); }
.kb-cab { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.kb-cnt { font-size: 12px; color: var(--texto-suave); font-weight: 700; }
.kb-soma { font-size: 11.5px; color: var(--texto-suave); margin-left: auto; }
.kb-cartoes { display: flex; flex-direction: column; gap: 8px; min-height: 40px; }
.kb-cartao { background: #fff; border: 1px solid var(--borda); border-radius: 8px; padding: 10px 12px;
  cursor: pointer; position: relative; box-shadow: 0 1px 2px rgba(2,48,71,.06); }
.kb-cartao:hover { border-color: var(--azul); }
.kb-cartao.kb-pegando { opacity: .4; }
.kb-titulo { font-size: 13.5px; font-weight: 600; color: var(--azul); line-height: 1.3; }
.kb-apoio { font-size: 12px; color: var(--texto-suave); margin-top: 2px; }
.kb-valor { font-size: 12.5px; font-weight: 700; color: var(--verde-escuro); margin-top: 4px; }
.kb-codigo { font-size: 10.5px; color: #9AA7AE; margin-top: 4px; letter-spacing: .03em; }
.kb-alerta { position: absolute; top: 8px; right: 9px; color: var(--alerta); font-size: 13px; }
.kb-vazio { text-align: center; color: #A9B3B8; font-size: 12px; padding: 10px 0; }

@media (max-width: 700px) {
  .lst-menu { width: calc(100vw - 32px); right: -8px; }
  .flt-linha { grid-template-columns: 1fr 1fr; }
}

/* o lápis da edição em linha: aparece ao passar o mouse, porque clicar
   na linha abre o registro e não pode disputar com a edição */
/* ------------------------------------------------------------------
   v1.358 — A LARGURA DAS COLUNAS É SUA (arrastar a divisa do
   cabeçalho, estilo Salesforce — ver ligarLarguraColunas no lista.js)
   ------------------------------------------------------------------ */
.lst-tabela th { position: relative; }
.col-alca {
  position: absolute; top: 0; right: -5px; width: 9px; height: 100%;
  cursor: col-resize; z-index: 5; user-select: none;
}
.col-alca::after {
  content: ''; position: absolute; top: 20%; bottom: 20%; left: 4px;
  width: 1px; background: var(--borda);
}
.col-alca:hover::after { left: 3px; width: 3px; background: var(--azul); border-radius: 2px; }
body.col-arrastando { cursor: col-resize; user-select: none; }
body.col-arrastando .lst-tabela tr:hover td { background: inherit; }
.tabela-caixa { position: relative; }   /* a linha-guia se pendura nela */
.col-guia { position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--azul); z-index: 6; pointer-events: none; }
.lst-tabela.larguras-fixas { table-layout: fixed; }

.lst-tabela td.edt { position: relative; padding-right: 30px; }
.edt-lapis { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  opacity: 0; background: #fff; border: 1px solid var(--borda); border-radius: 6px;
  width: 24px; height: 24px; cursor: pointer; color: var(--texto-suave);
  font-family: inherit; font-size: 12px; line-height: 1; padding: 0; }
.lst-tabela tr:hover .edt-lapis { opacity: 1; }
.edt-lapis:hover { background: var(--azul); color: #fff; border-color: var(--azul); }
.lst-tabela td.edt:hover { background: #EDF3F6; box-shadow: none; }
.lst-tabela td.editando { padding-right: 6px; }

/* ------------------------------------------------------------------
   FAIXA DO ADMINISTRADOR DA PLATAFORMA
   Só aparece para o dono do CRM. Fica ACIMA do cabeçalho da
   imobiliária, atravessando a tela, para deixar claro que é outra
   camada — não é um recurso da empresa que está logada.
   ------------------------------------------------------------------ */
.faixa-plataforma { display: none; }
.faixa-plataforma.aberta {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--azul); color: #fff; padding: 6px 20px;
  font-size: 12.5px; line-height: 1.5; position: relative; z-index: 45;
}
.faixa-plataforma.alerta { background: #7A4B00; }
.faixa-plataforma .fp-selo {
  font-weight: 700; letter-spacing: .3px; white-space: nowrap;
  border-right: 1px solid rgba(255,255,255,.35); padding-right: 12px;
}
.faixa-plataforma .fp-txt { color: rgba(255,255,255,.92); }
.faixa-plataforma .fp-txt b { color: #fff; }
.faixa-plataforma .fp-btn {
  margin-left: auto; background: rgba(255,255,255,.14); color: #fff;
  border: 1px solid rgba(255,255,255,.45); border-radius: 4px;
  padding: 3px 12px; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.faixa-plataforma .fp-btn:hover { background: rgba(255,255,255,.28); }

/* o chip de quem está logado ganha o contorno verde quando é o dono da plataforma */
.chip-usuario.super { box-shadow: inset 0 0 0 1.5px var(--verde); }
/* v1.442 — o selo saiu do chip (que agora é só a foto) e acende no
   cabeçalho do menu Minha conta, ao lado do papel */
.menu-conta.super .chip-papel::after {
  content: 'PLATAFORMA'; display: inline-block; margin-left: 6px;
  background: var(--verde); color: #08351A; font-size: 9px; font-weight: 700;
  letter-spacing: .5px; padding: 1px 5px; border-radius: 3px; vertical-align: 1px;
}

/* Aviso de "para qual empresa" dentro da janela de convite */
.aviso-empresa { background: #FFF7E6; border: 1px solid #F0D9A8; border-left: 4px solid var(--alerta);
  color: #6B4E12; font-size: 13px; line-height: 1.55; padding: 10px 14px; border-radius: 4px;
  margin: 0 0 18px; }
.aviso-empresa b { color: #4A3608; }

/* ------------------------------------------------------------------
   GERENCIADOR DE OBJETOS — campos personalizados
   ------------------------------------------------------------------ */
.obj-abas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.obj-aba { border: 1px solid var(--borda); background: #fff; color: var(--texto-suave);
  border-radius: 20px; padding: 6px 16px; font: inherit; font-size: 13px; cursor: pointer; }
.obj-aba:hover { border-color: var(--azul); color: var(--azul); }
.obj-aba.on { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }

.obj-plano { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.obj-contador { font-size: 13px; color: var(--texto-suave); background: #EDF3F6;
  border-radius: 4px; padding: 5px 12px; }
.obj-contador.cheio { background: #FDEDED; color: var(--erro); font-weight: 600; }

tr.sep-fabrica td { background: #F7FAFB; color: var(--texto-suave); font-size: 12px;
  text-transform: uppercase; letter-spacing: .5px; padding: 8px 14px; }
tr.campo-fabrica td { color: var(--texto-suave); }
#linhas-campos code { background: #F3F3F2; border-radius: 3px; padding: 1px 6px;
  font-size: 12px; color: #46555E; }

.obj-lixo { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  border: 1px dashed var(--borda); border-radius: 5px; padding: 8px 14px; margin-bottom: 8px;
  font-size: 13px; color: var(--texto-suave); }
.obj-lixo b { color: var(--texto); }

.faixa-plataforma.alerta { background: #7A1F1F; }
.faixa-plataforma.alerta .fp-selo { border-right-color: rgba(255,255,255,.5); }
.faixa-plataforma a.fp-btn { text-decoration: none; display: inline-block; }

/* v1.354 — a faixa recolhe: a seta ▲ entra depois do botão, e a faixa
   recolhida vira um FILETE de 8px que guarda a cor (navy = na minha,
   vermelho = visitando outra) com uma abinha central para reabrir. A
   cor continua respondendo "de quem são os números" sem ocupar tela. */
.fp-recolher {
  background: none; border: none; color: rgba(255,255,255,.75);
  font: inherit; font-size: 11px; cursor: pointer; padding: 3px 6px;
  border-radius: 4px; line-height: 1; white-space: nowrap;
}
.fp-recolher:hover { background: rgba(255,255,255,.2); color: #fff; }
.faixa-plataforma.recolhida {
  display: block; height: 8px; padding: 0; overflow: visible;
  background: var(--azul); position: relative; z-index: 45;
}
.faixa-plataforma.recolhida.alerta { background: #7A1F1F; }
.fp-abinha {
  display: flex; position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
  background: inherit; color: rgba(255,255,255,.9); border: none; cursor: pointer;
  font: inherit; font-size: 10px; line-height: 1; padding: 2px 14px 4px;
  border-radius: 0 0 8px 8px; align-items: center; gap: 6px; z-index: 45;
}
.fp-abinha:hover { color: #fff; padding-bottom: 6px; }

/* ------------------------------------------------------------------
   EDITOR DE LAYOUT DA FICHA
   ------------------------------------------------------------------ */
/* .lay-caixa era a divisão "seções | campos de fora" em duas colunas.
   Saiu na v1.187: a paleta subiu para o topo e as seções ocupam a
   largura inteira. A regra fica por causa de layouts antigos em cache. */
.lay-caixa { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.lay-h { font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-suave); margin-bottom: 10px; }
.lay-secao { border: 1px solid var(--borda); border-radius: 6px; margin-bottom: 14px; background: #fff; }
.lay-secao-topo { display: flex; gap: 8px; align-items: center; padding: 8px 10px;
  border-bottom: 1px solid var(--borda); background: #F7FAFB; border-radius: 6px 6px 0 0; }
.lay-titulo { flex: 1; border: 1px solid transparent; background: transparent; font: inherit;
  font-weight: 600; color: var(--azul); padding: 4px 6px; border-radius: 4px; }
.lay-titulo:hover, .lay-titulo:focus { border-color: var(--borda); background: #fff; outline: 0; }
.lay-cols { font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--borda);
  border-radius: 4px; background: #fff; color: var(--texto-suave); }
.lay-x { border: 0; background: transparent; color: var(--texto-suave); cursor: pointer;
  font-size: 15px; padding: 2px 6px; border-radius: 4px; }
.lay-x:hover { background: #FDEDED; color: var(--erro); }

/* v1.187 — O EDITOR PASSA A DESENHAR O QUE A FICHA VAI DESENHAR.
   A área de soltar vira grade com as mesmas colunas da seção; a régua
   pontilhada no meio mostra onde uma coluna acaba e a outra começa. */
.lay-alvo.g2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; align-items: start; }
.lay-alvo.g1 { display: grid; grid-template-columns: 1fr; gap: 8px; }
.lay-alvo.g2 .lay-campo, .lay-alvo.g1 .lay-campo { min-width: 0; }
/* campo que na ficha ocupa a linha inteira (observações, multiescolha,
   sim/não…) ocupa a linha inteira aqui também — sem isto o editor
   mostrava dois por linha e a ficha saía com um só. */
.lay-alvo.g2 .lay-campo.largo { grid-column: 1 / -1; }
.lay-largo { font-weight: 600; color: #0B5CAB; }

/* ------------------------------------------------------------------
   v1.192 — EDITOR DE FÓRMULA (Administração › Campos personalizados)
   ------------------------------------------------------------------ */
.fx-grade { display: grid; grid-template-columns: 1fr 260px; gap: 14px; align-items: start; }
.fx-cx { border: 1px solid var(--borda); border-radius: 6px; background: #fff; }
.fx-cab { padding: 8px 10px; border-bottom: 1px solid var(--borda); background: #F7FAFB;
  border-radius: 6px 6px 0 0; font-size: 12px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--texto-suave); font-weight: 700; }
.fx-corpo { padding: 10px; }
.fx-txt { width: 100%; min-height: 118px; font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 13.5px; line-height: 1.6; border: 1px solid var(--borda); border-radius: 5px;
  padding: 10px 12px; color: #032D60; background: #FCFDFD; resize: vertical; }
.fx-lista { max-height: 320px; overflow-y: auto; }
/* v1.195 — os campos vêm agrupados: o objeto, depois cada relacionado */
.fx-grupo { padding: 8px 8px 4px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; font-weight: 700; color: var(--texto-suave);
  border-top: 1px solid var(--borda); margin-top: 6px; }
.fx-grupo:first-child { border-top: 0; margin-top: 0; }
.fx-item.rel { padding-left: 18px; }
.fx-item.rel b { color: #0B5CAB; font-weight: 600; }
.fx-item { display: flex; justify-content: space-between; gap: 8px; padding: 5px 8px;
  border-radius: 4px; font-size: 13px; cursor: pointer; }
.fx-item:hover { background: #EEF4FF; }
.fx-item .t { color: var(--texto-suave); font-size: 11px; }
.fx-func { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fx-func button { border: 1px solid var(--borda); background: #fff; border-radius: 4px;
  font-family: ui-monospace, Menlo, monospace; font-size: 12px; padding: 3px 8px;
  color: #0B5CAB; cursor: pointer; }
.fx-func button:hover { border-color: #0176D3; background: #F2F8FF; }
.fx-ok { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px;
  color: #2E5C22; background: #E8F2E4; border: 1px solid #CFE3C7; border-radius: 6px;
  padding: 8px 12px; }
.fx-erro { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px;
  color: #6B2020; background: #FDF3F3; border: 1px solid #F2C9C9; border-radius: 6px;
  padding: 8px 12px; }
/* o aviso discreto que aparece na ficha e na lista quando a conta falha */
.fx-ruim { color: #B23A28; font-size: 12px; cursor: help; }
@media (max-width: 700px) { .fx-grade { grid-template-columns: 1fr; } }

/* v1.191 — cartão que recolhe, na ficha */
.cartao h2 .seta-card { float: right; font-weight: 400; font-size: 12px;
  color: var(--texto-suave); }
.cartao h2 .seta-card:hover { color: var(--azul); }
.cartao.fechado .corpo { display: none; }
/* v1.228 — o recolher passou a valer para TODO cartão da ficha, e nem
   todos guardam o conteúdo num `.corpo`: o de Apólices põe as linhas
   direto dentro do cartão. Fechado esconde tudo menos o título. */
.cartao.fechado > *:not(h2) { display: none; }
/* v1.558 — A SETA MUDOU DE LADO (07/09/2026).
   Era o último item do h2, empurrado para a direita pelo `margin-left:
   auto`; agora abre a linha, como o chevron das seções do Salesforce.

   É `order: -1` e não uma troca de marcação: o `h2` do cartão já é
   flex, então o navegador reordena sozinho e o HTML continua saindo na
   mesma ordem — a seta segue sendo o último elemento para quem lê a
   página com teclado ou leitor de tela, DEPOIS do título que ela
   comanda. Uma regra em vez de seis pontos de marcação, e ninguém
   precisa lembrar de repetir a ordem em cartão novo.

   O `margin-left: auto` cai junto: no primeiro item ele empurraria a
   própria seta para a direita e abriria um rombo na frente dela. Quem
   continua empurrando o grupo da direita é o `.dir`, que já pedia o
   auto por conta própria desde a v1.232.

   O padding se inverte pelo mesmo motivo: os 10px existiam para afastar
   a seta do que vinha à esquerda dela, e agora não vem nada. */
.cartao > h2 .seta-card { order: -1; cursor: pointer; white-space: nowrap;
  font-size: 18px; line-height: 1; padding: 2px 6px 2px 0;
  /* v1.233 — a seta passou a ser <button>: tira o visual de botão e
     deixa só o texto, que é o que ela sempre pareceu ser. */
  background: none; border: 0; font-family: inherit; color: var(--texto-suave); }
/* v1.232 — O BOTÃO DO CABEÇALHO PARAVA NO MEIO.
   `.dir` (que segura os botões) e `.seta-card` pediam os DOIS o
   `margin-left: auto`, e o flexbox divide o espaço livre entre quem
   pede — então cada cartão alinhava num lugar, conforme o tamanho do
   título. Só o PRIMEIRO dos dois deve empurrar: quem vem depois do
   `.dir` troca o auto por um respiro fixo, e o par fica grudado na
   direita. O cartão de Histórico não entra na regra porque nele a
   própria seta é o `.dir` — já estava certo, e era o único.
   Sem margem nenhuma aqui: o `h2` já separa os filhos com `gap: 8px`,
   e somar margem por cima dobrava o vão. */
.cartao > h2 .dir ~ .seta-card { margin-left: 0; }
/* v1.558 — o cartão de Histórico é o caso em que a PRÓPRIA seta é o
   `.dir` (ficha.js), e o `.dir` pede `margin-left: auto` numa regra que
   vem depois desta no arquivo. Sem esta linha, aquele auto sobrevive ao
   `order: -1` e só o Histórico fica com a seta descolada da margem. */
.cartao > h2 .seta-card.dir { margin-left: 0; }
.cartao > h2 .seta-card:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
/* ---------------------------------------------------------------------
   v1.553 — A SETA VIROU SVG (07/09/2026)

   Era um caractere (▾) e agora é o desenho de contorno da casa, como
   todo ícone do CRM desde a v1.372 — pedido do Rodrigo, para o
   computador e para o celular.

   Duas regras, e as duas por causa da troca:
   · o miolo deixou de ser texto, então quem centraliza é o flex e não
     mais o `font-size`/`line-height` da linha acima (que ficam, para o
     dia em que alguém puser uma palavra ao lado);
   · `display:block` no SVG mata o espaço de linha de base que todo
     elemento inline carrega — sem isso a seta desce uns 3px e o
     cabeçalho do cartão fica torto.
   A rotação continua vindo do `style` inline do JS: um desenho só,
   girado, como desde a v1.234. Nada de transição nova aqui — a da Home
   é dela (`.hm-seta`), e esta versão troca o desenho, não o movimento.
   --------------------------------------------------------------------- */
.seta-card { align-items: center; justify-content: center; }
.seta-card svg { display: block; }

/* v1.191 — os dois controles novos na barra da seção, no editor */
.lay-lado { font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid var(--borda);
  border-radius: 4px; background: #fff; color: var(--texto-suave); }
/* v1.193 — o "começa recolhida" virou seletor (usa .lay-lado). O botão
   de antes tinha uma setinha e não abria lista nenhuma: ao lado de dois
   seletores de verdade, prometia o que não cumpria. */
.lay-cols[disabled] { opacity: .55; }

/* v1.309 — EM QUE TIPO DE REGISTRO A SEÇÃO APARECE.
   Com o quarto seletor no cabeçalho, os controles precisam poder
   quebrar linha: sem o wrap, o nome da seção era espremido até sumir
   nas telas menores. A seção presa a um tipo fica azulada — é o que
   deixa ver de relance o que é geral e o que é de um tipo só. */
.lay-secao-topo { flex-wrap: wrap; }
.lay-quando { font: inherit; font-size: 12px; padding: 3px 6px; border: 1px solid #B6D5F2;
  border-radius: 4px; background: #F4F9FE; color: #0B5CAB; max-width: 100%; }
.lay-quando.geral { border-color: var(--borda); background: #fff; color: var(--texto-suave); }
/* v1.662 — o seletor virou uma fileira de CHIPS: uma seção pode ser de
   vários tipos. A caixa azulada continua a mesma; dentro dela, um chip
   por tipo, aceso quando a seção aparece naquele tipo. */
.lay-quando { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 2px 4px; }
.lay-chip { font: inherit; font-size: 11.5px; font-weight: 600; line-height: 1.4;
  padding: 2px 8px; border-radius: 12px; border: 1px solid var(--borda);
  background: #fff; color: var(--texto-suave); cursor: pointer; }
.lay-chip:hover { border-color: #0B5CAB; color: #0B5CAB; }
.lay-chip.on { background: #0B5CAB; border-color: #0B5CAB; color: #fff; }
.lay-secao.so-tipo { border-color: #B6D5F2; }
.lay-secao.so-tipo > .lay-secao-topo { background: #F4F9FE; }

/* v1.189 — setas de mover a seção de lugar */
/* v1.235 — a linha do cartão fixo no editor de layout. Fundo mais
   claro para se distinguir da seção de campos sem virar outra coisa:
   ela se move na mesma lista e obedece aos mesmos seletores. */
.lay-secao.lay-fixo .lay-secao-topo { background: #F4F7F9; }
.lay-fixo-nome { flex: 1; font-size: 13.5px; font-weight: 600; color: var(--azul);
  display: flex; align-items: center; gap: 8px; min-width: 0; }
.lay-fixo-nome .q { font-size: 11px; font-weight: 400; color: var(--texto-suave);
  text-transform: none; letter-spacing: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.lay-tag-fixo { font-size: 10px; font-weight: 800; letter-spacing: .4px;
  text-transform: uppercase; color: #0B5CAB; background: #EAF3FC;
  border: 1px solid #B6D5F2; border-radius: 4px; padding: 1px 6px; white-space: nowrap; }

/* v1.237 — Configurações gerais: três por linha no computador, uma no
   celular. Os campos são curtos (um número cada), e duas colunas
   deixariam metade da largura vazia. */
.grade-padroes { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px 20px; }
.pd-ajuda { font-size: 11.5px; color: var(--texto-suave); margin-top: 3px; line-height: 1.5; }
@media (max-width: 760px) { .grade-padroes { grid-template-columns: 1fr; } }

.lay-mover { display: flex; gap: 2px; }
.lay-seta { border: 1px solid var(--borda); background: #fff; color: var(--texto-suave);
  cursor: pointer; border-radius: 4px; width: 26px; height: 26px; font-size: 11px;
  line-height: 1; display: flex; align-items: center; justify-content: center; padding: 0; }
.lay-seta:hover { border-color: #0176D3; color: #0176D3; background: #F2F8FF; }
.lay-seta[disabled] { opacity: .3; cursor: default; }
.lay-seta[disabled]:hover { border-color: var(--borda); color: var(--texto-suave); background: #fff; }

/* v1.189 — CARTÃO DO TOPO: escolher e ordenar os indicadores da faixa */
.lay-topo-caixa { border: 1px solid var(--borda); border-radius: 6px; background: #fff;
  margin-bottom: 18px; }
.lay-topo-cab { display: flex; gap: 10px; align-items: center; padding: 8px 10px;
  border-bottom: 1px solid var(--borda); background: #F7FAFB; border-radius: 6px 6px 0 0;
  flex-wrap: wrap; }
.lay-topo-cab .t { font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-suave); font-weight: 700; flex: 1; }
.previa-topo { border: 1px dashed #C7D2D8; border-radius: 6px; padding: 12px 14px;
  margin: 10px 10px 12px; background: #FCFDFD; }
.previa-topo .rot { font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-suave); margin-bottom: 8px; }
.previa-topo .chips { margin-top: 0; border-top: 0; padding-top: 0; flex-wrap: wrap; }
.lay-topo-alvo { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px; min-height: 56px; }
.lay-topo-alvo.sobre, .lay-topo-fora.sobre { background: #EBF6E4;
  outline: 2px dashed var(--verde); outline-offset: -4px; }
.lay-topo-fora { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px;
  border-top: 1px dashed var(--borda); background: #FAFAF9; border-radius: 0 0 6px 6px; }
.lay-topo-fora .rot { width: 100%; font-size: 11.5px; color: var(--texto-suave);
  font-style: italic; margin-bottom: 2px; }
.lay-chip { display: flex; flex-direction: column; gap: 1px; cursor: grab;
  border: 1px solid var(--borda); border-left: 3px solid var(--azul); border-radius: 4px;
  background: #fff; padding: 6px 10px; }
/* verde = o CRM calcula (contagem, último contato); azul = campo do cadastro */
.lay-chip.conta { border-left-color: #06A59A; }
.lay-chip:hover { box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.lay-chip .n { font-size: 13px; font-weight: 600; color: var(--texto); }
.lay-chip .d { font-size: 11px; color: var(--texto-suave); }

/* v1.188 — o botão que troca entre meia coluna e linha inteira */
.lay-campo { position: relative; }
.lay-alvo.g1 .lay-campo, .lay-alvo.g2 .lay-campo { padding-right: 34px; }
.lay-larg { position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  border: 1px solid var(--borda); background: #fff; color: var(--texto-suave); cursor: pointer;
  border-radius: 4px; width: 24px; height: 24px; font-size: 12px; line-height: 1;
  display: flex; align-items: center; justify-content: center; padding: 0; }
.lay-larg:hover { border-color: var(--dado, #0176D3); color: #0176D3; background: #F2F8FF; }
.lay-campo.largo .lay-larg { border-color: #B6D5F2; color: #0B5CAB; background: #EAF3FC; }
.lay-alvo.g2 .lay-vazio, .lay-alvo.g1 .lay-vazio { grid-column: 1 / -1; }
.lay-corpo { position: relative; }
.lay-corpo.g2::before { content: ''; position: absolute; top: 10px; bottom: 10px; left: 50%;
  border-left: 1px dashed #DCE3E7; pointer-events: none; }

/* barra de ações que gruda no topo ao rolar */
.lay-barra { position: sticky; top: 0; z-index: 5; display: flex; gap: 8px; align-items: center;
  background: #F7FAFB; border: 1px solid var(--borda); border-radius: 6px;
  padding: 8px 10px; margin-bottom: 14px; flex-wrap: wrap; }
.lay-barra .esq { display: flex; gap: 8px; flex: 1; flex-wrap: wrap; }
.lay-barra .btn { padding: 6px 14px; font-size: 13px; }
.lay-barra .btn[disabled] { opacity: .45; cursor: default; }

/* a paleta de campos: era coluna estreita à direita, virou caixa larga
   em cima — é o que libera largura para as duas colunas da seção */
.lay-paleta { border: 1px solid var(--borda); border-radius: 6px; background: #fff;
  margin-bottom: 18px; }
.lay-paleta-topo { display: flex; gap: 10px; align-items: center; padding: 8px 10px;
  border-bottom: 1px solid var(--borda); background: #F7FAFB; border-radius: 6px 6px 0 0;
  flex-wrap: wrap; }
.lay-paleta-topo .t { font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-suave); font-weight: 700; flex: 1; }
.lay-conta { font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.lay-busca { font: inherit; font-size: 13px; padding: 5px 10px; border: 1px solid var(--borda);
  border-radius: 4px; width: 260px; max-width: 100%; }
.lay-paleta-corpo { max-height: 176px; overflow-y: auto; }

.lay-alvo { min-height: 60px; padding: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.lay-alvo.sobre { background: #EBF6E4; outline: 2px dashed var(--verde); outline-offset: -4px; }
.lay-fora { flex-direction: column; border: 1px dashed var(--borda); border-radius: 6px;
  background: #FAFAF9; min-height: 200px; }
.lay-vazio { color: var(--texto-suave); font-size: 12.5px; font-style: italic; padding: 6px; width: 100%; }

.lay-campo { display: flex; flex-direction: column; gap: 1px; cursor: grab;
  border: 1px solid var(--borda); border-left: 3px solid var(--azul); border-radius: 4px;
  background: #fff; padding: 6px 10px; min-width: 150px; }
.lay-campo.pers { border-left-color: var(--verde); }
.lay-campo:hover { box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.lay-campo.arrastando { opacity: .4; }
.lay-nome { font-size: 13px; font-weight: 600; color: var(--texto); }
.lay-tipo { font-size: 11px; color: var(--texto-suave); }

/* ficha com uma coluna só */
.campos-ficha.uma-coluna { grid-template-columns: 1fr; }

/* seletor de "para quem é este layout" + espaço em branco */
.lay-papel { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 16px; }
.lay-papel label { font-size: 13px; color: var(--texto-suave); }
.lay-papel select { font: inherit; font-size: 13px; padding: 5px 10px; border: 1px solid var(--borda);
  border-radius: 4px; background: #fff; color: var(--texto); }
.lay-estado { font-size: 12px; color: var(--texto-suave); font-style: italic; }
.lay-campo.espaco { border-left-color: #C9CFD3; background: repeating-linear-gradient(
  45deg, #FAFAF9, #FAFAF9 6px, #F1F1EF 6px, #F1F1EF 12px); }
.lay-campo.espaco .lay-nome { color: var(--texto-suave); font-weight: 500; }
.campo-espaco { min-height: 1px; }
.aviso-perigo { background: #FDF3F3; border: 1px solid #F2C9C9; border-left: 4px solid var(--erro);
  color: #6B2020; font-size: 13px; line-height: 1.55; padding: 10px 14px; border-radius: 4px;
  margin: 10px 0 0; }
.aviso-perigo b { color: #4A1414; }

/* ---------- ajuda de campo (ícone "i") ---------- */
/* A explicação da regra do piso da taxa tem três linhas. Como texto solto
   embaixo do campo, empurrava o formulário e virava ruído para quem já
   sabe. No ícone, aparece só quando a pessoa procura. */
.campo-ajuda { width: 15px; height: 15px; border-radius: 50%; margin-left: 6px;
  border: 1px solid var(--borda); background: #fff; color: var(--texto-suave);
  font-family: inherit; font-size: 10px; font-weight: 700; line-height: 1;
  cursor: help; padding: 0; vertical-align: 1px; }
.campo-ajuda:hover { border-color: var(--azul); color: var(--azul); background: #EDF3F6; }
.campo-ajuda.aberto { background: var(--azul); border-color: var(--azul); color: #fff; }
.campo-ajuda-texto { font-size: 12px; line-height: 1.6; color: var(--texto-suave);
  background: #EDF3F6; border-left: 3px solid var(--azul); border-radius: 0 6px 6px 0;
  padding: 8px 11px; margin: 5px 0 3px; }

/* =====================================================================
   CASOS (M6) — bloco vindo do zip crm-casos-manutencao.zip, 25/07/2026.
   Acrescentado ao fim em 26/07 em vez de substituir o arquivo: o
   estilo.css do M6 é anterior ao M13 (layout da ficha) e ao trabalho de
   hoje (ícone de ajuda, engrenagem, rodapé em duas linhas). Substituir
   teria revertido os três.
   ===================================================================== */

/* ===== Casos (M6) ===== */
.btn-verde { background: var(--verde-escuro); color: #fff; border: none; }
.btn-verde:hover { background: #427a32; }
.cartao > h2 .dir { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400; }

/* caminho de etapas (padrão Path do Salesforce, traduzido para a marca) */
.path { display: flex; align-items: stretch; margin-top: 14px; border-top: 1px solid var(--borda);
  padding-top: 14px; gap: 0; flex-wrap: wrap; }
.path .et { flex: 1; min-width: 92px; padding: 9px 8px 9px 26px; background: #EEF0EF; font-size: 12px;
  font-weight: 600; color: var(--texto-suave); margin-right: 2px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%, 14px 50%); }
.path .et:first-child { padding-left: 14px;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 50%, calc(100% - 14px) 100%, 0 100%); }
.path .et.feita { background: var(--verde); color: #0F2A08; }
.path .et.atual { background: var(--azul); color: #fff; }
.path-acao { margin-left: 10px; display: flex; align-items: center; }

/* orçamentos */
.orc { border-bottom: 1px solid #F0F0EF; padding: 14px 16px; display: flex; gap: 14px; align-items: flex-start; }
.orc:last-child { border-bottom: 0; }
.orc.aprovado { background: #F6FBF3; border-left: 3px solid var(--verde); }
.orc.fora { opacity: .6; }
.orc-val { font-size: 18px; font-weight: 700; color: var(--azul); white-space: nowrap; min-width: 118px; }
.orc-val small { display: block; font-size: 11px; font-weight: 600; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .3px; }
.orc-txt { flex: 1; min-width: 0; font-size: 14px; }
.orc-p { color: var(--texto-suave); font-size: 13px; margin-top: 4px; line-height: 1.45; }
.orc-lado { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.rastro-ok { background: #EBF6E4; border-radius: 8px; padding: 8px 12px; font-size: 12px;
  color: var(--verde-escuro); margin-top: 8px; display: flex; gap: 6px; align-items: flex-start; line-height: 1.5; }

/* anexos */
/* ===== v1.287 — DOCUMENTOS DA FICHA =====
   Lista em linha, não em grade de miniaturas: aqui o que importa é o
   nome do arquivo e quando chegou, não a foto. */
.doc-lista { padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.doc-linha { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--borda); border-radius: 8px; background: #FBFBFA; }
.doc-icone { width: 38px; height: 38px; border-radius: 8px; background: #E7F0F6;
  display: grid; place-items: center; font-size: 18px; flex-shrink: 0; }
.doc-txt { flex: 1; min-width: 0; }
.doc-txt b { display: block; font-size: 14px; font-weight: 600; color: var(--texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-txt small { font-size: 12px; color: var(--texto-suave); }
.doc-acao { background: none; border: none; padding: 6px 8px; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--link);
  flex-shrink: 0; border-radius: 6px; }
.doc-acao:hover { background: #EDF3F6; }
@media (max-width: 560px) {
  .doc-linha { flex-wrap: wrap; }
  .doc-txt { flex-basis: calc(100% - 50px); }
  .doc-acao { padding: 8px 10px; }
}

.anexos { display: flex; gap: 10px; flex-wrap: wrap; padding: 16px; }
.anexo { width: 116px; min-height: 104px; border-radius: 8px; background: #F4F6F5; display: flex;
  align-items: center; justify-content: center; flex-direction: column; gap: 4px; color: var(--texto-suave);
  font-size: 12px; border: 1px solid var(--borda); text-align: center; padding: 8px; text-decoration: none; }
.anexo:hover { background: #EDF3F6; }
.anexo .ic { font-size: 22px; }
.anexo small { color: #9AA7AE; font-size: 10px; word-break: break-word; }
.vazio-min { padding: 22px 16px; color: #8a94a1; font-size: 13px; }

/* financeiro e guardião */
.aviso-fin { background: #FFF8E8; border: 1px solid #F3E2BC; border-radius: 10px; padding: 11px 13px;
  font-size: 13px; color: #7a5b16; line-height: 1.5; margin-bottom: 14px; }
/* v1.631 — o recado do cartão Financeiro quando não há a quem pagar:
   diz o que preencher para o serviço entrar no Livro Caixa. É nota de
   rodapé, não alarme — por isso não tem a moldura do .aviso-fin. */
.fin-falta { font-size: 12.5px; line-height: 1.7; color: var(--texto-suave);
  margin: 12px 0 0; }
.guardiao { border-left: 3px solid var(--alerta); }
.guardiao .item { display: flex; gap: 8px; padding: 9px 0; border-bottom: 1px solid #F0F0EF;
  font-size: 13px; line-height: 1.5; }
.guardiao .item:last-child { border-bottom: 0; }

/* =====================================================================
   TELAS DE ACESSO — "esqueci minha senha", "entrar com Google"
   (login.html e nova-senha.html)
   ===================================================================== */

/* Link discreto abaixo do botão. Fica em cinza-suave e só ganha o navy no
   passar do mouse: é uma saída de emergência, não a ação principal da tela. */
.linha-link { text-align: center; margin-top: 16px; font-size: 13px; }
.linha-link a { color: var(--link); text-decoration: none; }
.linha-link a:hover { text-decoration: underline; }

/* Separador "ou" — a linha atravessa a caixa e o texto fica no meio,
   sobre o fundo branco. */
.ou { display: flex; align-items: center; gap: 12px; margin: 18px 0 14px;
  color: #8a94a1; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.ou::before, .ou::after { content: ""; flex: 1; height: 1px; background: var(--borda); }

/* Botão do Google.
   Fundo branco e borda cinza por exigência da marca do Google — botão navy
   com o logotipo colorido dentro não é permitido pelas regras deles, e
   também some no meio do "Entrar". Aqui a hierarquia fica clara: o botão
   navy é o caminho principal, este é a alternativa. */
.btn-google { width: 100%; background: #fff; color: var(--texto);
  border: 1px solid #DADCE0; display: flex; align-items: center; justify-content: center;
  gap: 10px; font-weight: 600; }
.btn-google:hover { background: #F7F8F8; border-color: #C6C9CC; }
.btn-google svg { width: 18px; height: 18px; flex: 0 0 auto; }
.btn-google:disabled { opacity: .6; cursor: not-allowed; }

/* Título das caixas de acesso — o h1 padrão de .caixa-login já é navy e
   centralizado; aqui só dou respiro depois do logotipo. */
.caixa-login h1 { margin-top: 4px; }

/* ------------------------------------------------------------
   VERSIONAMENTO E AMBIENTE BETA (28/07/2026)
   .rodape-versao — "versão 1.0", discreta, abaixo da assinatura.
   .faixa-beta   — faixa âmbar fixa no topo, criada pelo base.js
   quando a versão termina em -beta. O beta usa o banco de produção;
   a faixa é o lembrete permanente disso. */
/* v1.561 — mesmo motivo da .rodape-assinatura: o #9aa6ad era de quando o
   rodapé era branco e dava 1,32:1 sobre o azul. */
.rodape-versao { text-align: center; font-size: 11px; color: var(--texto-suave); margin-top: 2px; }
.faixa-beta {
  position: sticky; top: 0; z-index: 9999;
  background: #B45309; color: #fff;
  text-align: center; font-size: 12.5px; font-weight: 700;
  letter-spacing: .4px; padding: 6px 12px;
}

/* ------------------------------------------------------------
   v1.101 — EXCLUIR NA FICHA, CASOS RELACIONADOS, AÇÕES NO TOPO DO MODAL
   .acoes-topo    — espelho da barra Cancelar/Salvar, sob o título do modal
   .btn-perigo    — botão de ação destrutiva (vermelho de verdade)
   .faixa-excluir — a confirmação de exclusão DENTRO da página (nada de
                    confirm() do navegador — lição do M24) */
.modal .acoes-topo { margin: 0 0 16px; padding-bottom: 14px;
  border-bottom: 1px solid #E8E8E6; }
.btn-perigo { background: #C0392B; color: #fff; border: 0; }
.btn-perigo:hover { background: #A93226; }
.destaque .topo-ficha .faixa-excluir { flex-basis: 100%; }
.faixa-excluir { background: #FDF3F2; border: 1px solid #E8C3BE;
  border-radius: 10px; padding: 12px 16px; font-size: 14px; line-height: 1.55; }
.faixa-excluir ul { margin: 6px 0 6px 18px; }
.faixa-excluir .btn { padding: 6px 14px; font-size: 13px; margin: 6px 6px 0 0; }

/* ------------------------------------------------------------
   v1.105 — ANEXOS DE CASO COM ARQUIVO
   .anexar-caso    — seletor de tipo + botão de envio no cabeçalho do cartão
   .anexo-caixa    — envelope do anexo com o ✕ de excluir no canto
   .anexo-confirmar — a pergunta "Excluir?" dentro do próprio quadradinho */
.anexar-caso { display: inline-flex; gap: 8px; align-items: center; }
.anexar-caso select { padding: 5px 8px; border: 1px solid var(--borda); border-radius: 7px;
  font-size: 12px; font-family: inherit; }
.anexo-caixa { position: relative; }
.anexo-caixa .anexo-del { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px;
  border: 0; border-radius: 50%; background: rgba(2,48,71,.08); color: var(--texto-suave);
  font-size: 11px; cursor: pointer; line-height: 1; display: none; }
.anexo-caixa:hover .anexo-del { display: block; }
.anexo-caixa .anexo-del:hover { background: var(--erro); color: #fff; }
.anexo-confirmar { justify-content: center; gap: 8px; font-size: 13px; }

/* ------------------------------------------------------------
   v1.107 — FICHA DO CONTRATO: sinistros e andamentos
   .sinistro    — um bloco por sinistro, com a linha do tempo dentro
   .and         — cada andamento; .atrasado pinta o prazo vencido
   A cor forte fica só no que passou do prazo: se tudo grita, nada grita. */
.sinistro { border-top: 1px solid var(--borda); padding: 14px 16px; }
.sinistro:first-child { border-top: 0; }
.sinistro.com-alerta { background: #FEFAF5; }
.sin-topo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sin-topo .dir { margin-left: auto; display: flex; gap: 6px; }
.sin-prot { font-size: 12px; color: var(--texto-suave); }
.sin-nums { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0 0;
  font-size: 13px; color: var(--texto); }
.sin-nums i { font-style: normal; color: var(--texto-suave); font-size: 11px;
  text-transform: uppercase; letter-spacing: .3px; display: block; }
.andamentos { margin-top: 10px; border-left: 2px solid var(--borda); padding-left: 12px; }
.and { display: flex; align-items: baseline; gap: 8px; padding: 5px 0;
  font-size: 13px; flex-wrap: wrap; }
.and-tipo { font-weight: 700; font-size: 11px; text-transform: uppercase;
  letter-spacing: .3px; color: var(--texto-suave); min-width: 118px; }
.and-txt { flex: 1; min-width: 180px; }
.and-meta { font-size: 12px; color: var(--texto-suave); }
.and.ok .and-txt { color: var(--texto-suave); text-decoration: line-through; }
.and.atrasado .and-meta { color: var(--erro); font-weight: 700; }

/* v1.108 — tela de seguradoras e prazos */
.seg-item { padding: 12px 16px; cursor: pointer; margin-bottom: 8px; }
.seg-item:hover { background: #F5F8F4; }
.seg-item.on { border-left: 3px solid var(--verde); background: #F5F8F4; }
.seg-nome { font-weight: 700; color: var(--azul); }
.seg-meta { font-size: 12px; color: var(--texto-suave); margin-top: 2px; }
.seg-linha { font-size: 13px; padding: 2px 0; }
table.prazos th { font-size: 11px; }
table.prazos td { font-size: 13px; }
table.prazos tr.sem-prazo td { color: var(--texto-suave); }
.vazio-cel { color: #c6ccd2; }
.obs-prazo { font-size: 11px; color: var(--texto-suave); font-weight: 400; }

/* v1.109 — faixa de prazos no topo da lista de Sinistros.
   Ela existe para responder "o que estoura hoje" antes de qualquer
   filtro: numa tela sobre prazo, a informação não pode depender de a
   pessoa lembrar de procurar. */
.faixa-prazos { background: #fff; border: 1px solid var(--borda); border-left: 3px solid var(--verde);
  border-radius: 10px; padding: 10px 16px; margin-bottom: 12px; font-size: 13px;
  display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.faixa-prazos.alerta { border-left-color: var(--erro); background: #FEF7F6; }
.faixa-prazos.ok { color: var(--texto-suave); }
.fp-vencido { color: var(--erro); }
.fp-lista { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.fp-item { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: #EEF3F6;
  color: var(--azul); text-decoration: none; white-space: nowrap; }
.fp-item:hover { background: #E2ECF2; }
.fp-item.atrasado { background: #FBE9E7; color: var(--erro); font-weight: 600; }
.fp-mais { font-size: 12px; color: var(--texto-suave); align-self: center; }

/* ===== Radar de captação (v1.114) ===== */
/* Reusa o visual do funil; só aperta a margem para os dois conviverem
   e deixa o balão de WhatsApp discreto nas listas. */
.radar-captacao { margin-bottom: 8px; }
.radar-captacao .etapa { flex: 1 1 170px; }
/* v1.560 — O BALÃO PAROU DE SER AZUL. Esta regra nunca teve `color`, e
   enquanto o balão foi emoji isso não importava. Quando ele virou SVG na
   varredura de emojis, passou a herdar o AZUL PADRÃO DE LINK DO
   NAVEGADOR — nenhuma decisão de ninguém, um esquecimento. Ele gritava
   no meio das listas de telefone.
   Agora leva o mesmo #7d8a92 dos ícones do cabeçalho, e acende no verde
   da marca ao passar o mouse — que é onde o verde pode aparecer. */
.zap { text-decoration: none; margin-left: 4px; display: inline-block;
  color: #7d8a92; }
.zap:hover { transform: scale(1.18); color: var(--verde-escuro); }

/* ===== Faixa de erro global (v1.115) ===== */
/* Ligada pelo coletor de base.js: erro de script ou promessa sem catch
   acende a faixa em vez de deixar a tela quebrar em silêncio. */
.faixa-erro-global { background: #B3261E; color: #fff; padding: 9px 16px;
  font-size: 13px; line-height: 1.45; text-align: center; }
.faixa-erro-global .det { display: block; font-size: 11px; opacity: .85;
  font-family: ui-monospace, monospace; margin-top: 2px; word-break: break-all; }

/* ===== Simulações de fiança + agenda de visitas (v1.117) ===== */
/* linha da simulação aprovada ganha um fio verde à esquerda */
.mini tr.sim-aprovada td:first-child { box-shadow: inset 3px 0 0 var(--verde); }
.sim-enviada { color: var(--verde); font-size: 12px; margin-top: 2px; }
.sim-btn { padding: 4px 10px; font-size: 12px; }
.sim-strip { background: #FFF8E8; border: 1px solid #F3E2BC; border-radius: 8px;
  padding: 8px 10px; margin-top: 6px; font-size: 13px; line-height: 1.6; }
.sim-strip .btn { padding: 4px 12px; font-size: 12px; margin-left: 6px; }

/* grade de horários: os livres clicáveis, os tomados apagados com o
   motivo no title. O passo/horário muda em AGENDA_VISITA (ficha.js). */
.agenda-grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px; margin-top: 8px; }
.agenda-grade .slot { padding: 8px 4px; border: 1px solid var(--borda); border-radius: 8px;
  background: #fff; cursor: pointer; font-family: inherit; font-size: 13px; }
.agenda-grade .slot:hover { background: #F5F8F4; }
.agenda-grade .slot.on { background: var(--azul); color: #fff; border-color: var(--azul); }
.agenda-grade .slot.ocupado { background: #F0F0EF; color: #B9C0C6;
  cursor: not-allowed; text-decoration: line-through; }

/* ===== Funil configurável e dica de etapa (v1.118) ===== */
/* seletor de funil: dois botões, o em foco em navy cheio */
.sel-funil { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.sel-funil button { padding: 7px 14px; border: 1px solid var(--borda); border-radius: 999px;
  background: #fff; cursor: pointer; font-family: inherit; font-size: 13px;
  font-weight: 600; color: var(--texto-suave); }
.sel-funil button:hover { background: #F5F8F4; }
.sel-funil button.on { background: var(--azul); border-color: var(--azul); color: #fff; }
.sel-funil .dica { font-size: 11.5px; color: var(--texto-suave); line-height: 1.4; }
/* v1.330 — o botão que traz os leads encerrados de volta à lista */
.sel-funil .mostrar-encerrados { margin-left: auto; }
.sel-funil .mostrar-encerrados.on { background: #EDF3F6; color: var(--azul);
  border-color: var(--azul); }
/* etapa encerrada na barra do funil, com a lista escondendo os dela */
.funil .etapa.apagada { opacity: .55; }

/* v1.331 — seletor pequeno de funil no título de um cartão (Painel e
   Análises usam; mesmo desenho do seletor da tela de Leads) */
.sel-funil-mini { display: inline-flex; gap: 6px; }
.sel-funil-mini button { padding: 5px 12px; border: 1px solid var(--borda);
  border-radius: 999px; background: #fff; cursor: pointer; font-family: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--texto-suave); }
.sel-funil-mini button:hover { background: #F5F8F4; }
.sel-funil-mini button.on { background: var(--azul); border-color: var(--azul); color: #fff; }

/* v1.331 — Home: o cartão de gráficos virou três atalhos */
.hm-atalho-grafo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  padding: 4px 0 2px; }
.hm-atalho-grafo a { border: 1px solid var(--borda); border-radius: 10px;
  padding: 14px 15px; text-decoration: none; color: var(--texto); background: #fff;
  display: block; }
.hm-atalho-grafo a:hover { background: #F5F8F4; }
.hm-atalho-grafo .ic { font-size: 20px; }
.hm-atalho-grafo b { display: block; color: var(--azul); font-size: 14px; margin: 6px 0 3px; }
.hm-atalho-grafo span { font-size: 12.5px; color: var(--texto-suave); line-height: 1.45;
  display: block; }
@media (max-width: 760px) { .hm-atalho-grafo { grid-template-columns: 1fr; } }

/* v1.331 — Análises: origem dos leads (barra azul = volume, dourada =
   convertidos; a legenda vive na linha de fonte, nunca só na cor) */
.og-linha { display: grid; grid-template-columns: 130px 1fr 190px; gap: 10px;
  align-items: center; padding: 6px 0; font-size: 13px; }
.og-linha > span:first-child a { color: var(--link); text-decoration: none; }
.og-linha > span:first-child a:hover { text-decoration: underline; }
.og-num { font-variant-numeric: tabular-nums; display: flex; gap: 8px;
  align-items: center; justify-content: flex-end; white-space: nowrap; }
.og-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  background: var(--fundo); color: var(--texto-suave); }
.og-badge.otimo { background: #E7F4EC; color: var(--ok); }
.og-badge.ruim { background: #FBEAE7; color: var(--erro); }
.og-fill2 { height: 100%; background: var(--pn-dado-2); border-radius: 0 4px 4px 0;
  min-width: 2px; position: absolute; top: 0; left: 0; }
@media (max-width: 640px) { .og-linha { grid-template-columns: 90px 1fr; }
  .og-linha .og-num { grid-column: 1 / -1; justify-content: flex-start; padding-left: 0; } }

/* a dica da etapa, na ficha do lead: orienta onde a pessoa trabalha */
.ajuda-etapa { background: #EDF3F6; border-left: 3px solid var(--azul);
  border-radius: 8px; padding: 9px 12px; margin: 10px 0 0; font-size: 13px;
  line-height: 1.5; color: var(--texto); }
.ajuda-etapa b { color: var(--azul); }
.ajuda-etapa .det { display: block; font-size: 11.5px; color: var(--texto-suave); margin-top: 3px; }

/* ============================================================
   CONFIGURAÇÃO DO FUNIL (Administração) — redesenho v1.496

   Antes: uma grade de duas colunas onde a régua era o PRIMEIRO
   item. Como ela é larga, tomava a coluna da esquerda inteira, o
   funil de Proprietário descia para a linha de baixo e sobrava um
   vazio do tamanho da tela. Cada etapa vivia numa coluna de 92px,
   com o nome, a dica, os dias, o "final" e a cor empilhados ali.

   Agora: a régua é uma faixa de largura inteira, os dois funis são
   ABAS (o mesmo .sel-funil da tela de Leads) e cada etapa é uma
   linha com a largura toda.
   ============================================================ */

/* --- a faixa da régua, acima das abas --- */
.regua-faixa { border: 1px solid var(--borda); border-radius: 10px; padding: 14px;
  background: #FAFBFB; margin-bottom: 18px; }
.regua-faixa h3 { display: flex; align-items: center; gap: 6px; margin: 0 0 3px;
  font-size: 14px; color: var(--azul); }
.regua-faixa .sub { font-size: 12px; color: var(--texto-suave); margin-bottom: 12px; }

/* Os três modos como cartões: rótulo e explicação JUNTOS. Antes a
   explicação do modo escolhido dividia a linha com as pílulas e
   quebrava no meio das palavras ("Sugere, e / eu / autorizo:"). */
.modos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.modo { text-align: left; background: #fff; border: 1px solid var(--borda);
  border-radius: 10px; padding: 11px 13px; cursor: pointer; font-family: inherit;
  display: flex; flex-direction: column; gap: 5px; }
.modo:hover { border-color: #C9D6DC; background: #FCFDFD; }
.modo .rot { font-size: 13.5px; font-weight: 600; color: var(--azul);
  display: flex; align-items: center; gap: 7px; }
.modo .exp { font-size: 11.5px; color: var(--texto-suave); line-height: 1.5; }
.modo .bolha { width: 15px; height: 15px; border-radius: 50%; border: 1.5px solid #C9D6DC;
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; }
.modo.on { border-color: var(--azul); background: #F3F8FA; box-shadow: 0 0 0 1px var(--azul) inset; }
.modo.on .bolha { border-color: var(--azul); background: var(--azul); }
.modo.on .bolha::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #fff; }
.modo:focus-visible { outline: 2px solid var(--azul); outline-offset: 2px; }
@media (max-width: 780px) { .modos { grid-template-columns: 1fr; } }

/* --- as abas dos dois funis --- */
.funil-abas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.funil-abas .conta { margin-left: auto; font-size: 12px; color: var(--texto-suave); }

/* --- a etapa, largura inteira --- */
.et-linha { position: relative; display: grid;
  grid-template-columns: 34px 1fr 132px 118px 128px 30px;
  gap: 10px; align-items: start; padding: 12px 8px 12px 0;
  border-bottom: 1px solid #F0F0EF; }
.et-linha:hover { background: #FCFDFD; }
.et-cab { padding: 0 8px 7px 0; border-bottom: 1.5px solid var(--borda);
  font-size: 11px; color: var(--texto-suave); text-transform: uppercase;
  letter-spacing: .3px; background: none; }
.et-cab:hover { background: none; }

/* o número no círculo com o fio ligando um ao outro — dá cara de funil */
.et-num { position: relative; display: flex; justify-content: center; padding-top: 6px; }
.et-num b { width: 24px; height: 24px; border-radius: 50%; background: #EDF3F6;
  color: var(--azul); font-size: 12px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; z-index: 1; }
.et-num::before { content: ''; position: absolute; top: 0; bottom: -12px; width: 2px;
  background: #D8DEE2; left: 50%; margin-left: -1px; }
.etapas .et-linha:first-child .et-num::before { top: 12px; }
.etapas .et-linha:last-child .et-num::before { bottom: auto; height: 18px; }

/* puxador de arrastar: aparece ao passar o mouse, e a linha em voo
   fica translúcida com o lugar de destino marcado por um fio verde */
.et-arrastar { position: absolute; left: -13px; top: 14px; color: #C2CBD1; cursor: grab;
  opacity: 0; font-size: 13px; line-height: 1; letter-spacing: -2px; user-select: none;
  padding: 2px; }
.et-linha:hover .et-arrastar, .et-arrastar:focus-visible { opacity: 1; }
.et-linha.arrastando { opacity: .45; }
.et-linha.alvo-acima { box-shadow: 0 -2px 0 var(--verde-escuro) inset, 0 2px 0 0 transparent; }
.et-linha.alvo-abaixo { box-shadow: 0 -2px 0 0 transparent; border-bottom: 2px solid var(--verde-escuro); }

.et-nome input { width: 100%; padding: 8px 10px; border: 1px solid var(--borda);
  border-radius: 7px; font-family: inherit; font-size: 14px; font-weight: 600;
  color: var(--texto); background: #fff; }
.et-nome input:focus, .et-dica textarea:focus, .et-dias input:focus {
  outline: 2px solid var(--azul); outline-offset: -1px; }

/* a dica ganha a linha inteira, com rótulo — antes era uma caixinha de
   duas linhas que cortava a frase no meio */
.et-dica { margin-top: 7px; }
.et-dica .rot { font-size: 10.5px; color: #97A2A9; text-transform: uppercase;
  letter-spacing: .3px; display: block; margin-bottom: 3px; }
.et-dica textarea { width: 100%; min-height: 34px; padding: 7px 10px;
  border: 1px solid var(--borda); border-radius: 7px; font-family: inherit;
  font-size: 12.5px; color: var(--texto-suave); line-height: 1.5; resize: vertical;
  background: #fff; }

/* dias + a tradução ao vivo do que foi digitado */
.et-dias input { width: 100%; padding: 8px 10px; border: 1px solid var(--borda);
  border-radius: 7px; font-family: inherit; font-size: 14px; text-align: center; background: #fff; }
.et-dias .leitura { font-size: 11px; color: var(--texto-suave); line-height: 1.45;
  margin-top: 5px; display: block; }
.et-dias .leitura.mudo { color: #A6B0B6; font-style: italic; }

/* a cor com a bolinha da etiqueta de verdade ao lado do nome dela */
.et-cor { display: flex; align-items: center; gap: 7px; padding-top: 9px; }
.et-cor .amostra { width: 13px; height: 13px; border-radius: 4px; flex: 0 0 auto;
  border: 1px solid rgba(0,0,0,.08); }
.et-cor select { flex: 1; min-width: 0; padding: 7px 6px; border: 1px solid var(--borda);
  border-radius: 7px; font-family: inherit; font-size: 12.5px; background: #fff; color: var(--texto); }

/* "etapa final" como interruptor, não caixinha perdida no rodapé */
.et-final { display: flex; align-items: center; gap: 8px; padding-top: 10px;
  font-size: 12.5px; color: var(--texto-suave); cursor: pointer; }
.et-final .chave { width: 32px; height: 18px; border-radius: 999px; background: #D8DEE2;
  position: relative; flex: 0 0 auto; transition: background .15s; }
.et-final .chave::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px;
  height: 14px; border-radius: 50%; background: #fff; transition: left .15s;
  box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.et-final input { position: absolute; opacity: 0; width: 0; height: 0; }
.et-final input:focus-visible + .chave { outline: 2px solid var(--azul); outline-offset: 2px; }
.et-final.on .chave { background: var(--verde-escuro); }
.et-final.on .chave::after { left: 16px; }
.et-final.on { color: var(--verde-escuro); font-weight: 600; }

/* etapa final: a linha se pinta e o campo de dias dá lugar a um texto */
.et-linha.final { background: #F5F8F4; }
.et-linha.final .et-num b { background: var(--verde-escuro); color: #fff; }
.et-encerra { grid-column: 3; font-size: 11.5px; color: var(--verde-escuro);
  line-height: 1.45; padding-top: 10px; display: flex; align-items: flex-start; gap: 5px; }
.et-encerra svg { flex: 0 0 auto; margin-top: 1px; }

/* o ✕ só aparece com a linha sob o mouse (some do caminho no uso normal) */
.et-tirar { background: transparent; border: 0; color: #C2CBD1; cursor: pointer;
  padding: 8px 4px; border-radius: 6px; opacity: 0; }
.et-linha:hover .et-tirar, .et-tirar:focus-visible { opacity: 1; }
.et-tirar:hover { color: var(--erro); background: #FBE9E7; }

/* --- o Salvar também no rodapé: a lista é longa e o botão de cima
       sai da tela antes da última etapa --- */
.rodape-salvar { display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  border-top: 1px solid var(--borda); background: #FAFBFB; border-radius: 0 0 10px 10px;
  flex-wrap: wrap; }
.rodape-salvar .aviso { font-size: 12.5px; color: var(--alerta); display: flex;
  align-items: center; gap: 6px; }
.rodape-salvar .dir { margin-left: auto; display: flex; gap: 8px; }

@media (max-width: 900px) {
  .et-linha { grid-template-columns: 30px 1fr 30px; }
  .et-dias, .et-cor, .et-final, .et-encerra { grid-column: 2; }
  .et-cab { display: none; }
  /* o puxador some na tela estreita: o arrasto do navegador não
     responde a toque, e um controle visível que não funciona é pior
     que controle nenhum. Reordenar é coisa de computador. */
  .et-arrastar { display: none; }
}

/* ============================================================
   HOME (DASHBOARD) — v1.120
   Grid de 12 colunas, 24px entre cartões, 20px internos, raio 12px,
   sombra suave. Paleta do sistema: nada de cartão colorido, gradiente
   ou vidro. A cor aparece só onde significa algo (alerta, alta).
   ============================================================ */
.home { max-width: 2000px; margin: 0 auto; padding: 22px 20px 32px; width: 100%; }   /* v1.530 — era 1400; ver o teto único em main */

/* --- saudação --- */
/* v1.562 — sem o h1 do cumprimento, isto virou UMA linha: a frase à
   esquerda, a data à direita. O respiro embaixo cai de 22 para 12px, que
   é o vão de todo o resto. O `align-items` vai de flex-end para center,
   porque não há mais dois tamanhos de letra para alinhar pela base. */
.hm-saudacao { display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 12px; }
/* o h1 fica declarado: quem quiser a saudação de volta não precisa
   redescobrir o tamanho e a cor dela */
.hm-saudacao h1 { font-size: 25px; font-weight: 700; color: var(--azul); letter-spacing: -.3px; }
.hm-saudacao .hm-frase { font-size: 14px; color: var(--texto-suave); }
/* sem text-transform: capitalize — ele escreveria "Quinta-Feira, 30 De Julho".
   Quem capitaliza só a primeira letra é o home.js. */
.hm-saudacao .hm-data { font-size: 13px; color: var(--texto-suave); }

/* --- grade de 12 colunas --- */
/* v1.562 — A GRADE PASSOU A SER USADA, e o vão desceu para 12px, que é
   o mesmo do resto do CRM desde a 1.559 (o `main`, o `gap` do `.g70`, a
   margem entre cartões). A Home era o último lugar com 24. */
.hm-grade { display: grid; grid-template-columns: repeat(12, 1fr); gap: 12px; align-items: start; }
.hm-col-12 { grid-column: span 12; }
.hm-col-8  { grid-column: span 8; }
.hm-col-6  { grid-column: span 6; }
.hm-col-4  { grid-column: span 4; }
/* As colunas são EMBRULHOS, não cartões: quem separa os cartões dentro
   delas é esta margem, porque o `gap` da grade só vale entre as células.
   O último não leva margem para a coluna não terminar com sobra. */
.hm-col-8 > .cartao, .hm-col-4 > .cartao { margin-bottom: 12px; }
.hm-col-8 > .cartao:last-child, .hm-col-4 > .cartao:last-child { margin-bottom: 0; }
/* Abaixo disto a coluna estreita ficaria com menos de 300px e os rótulos
   dos cartões começariam a quebrar: as duas viram largura inteira. */
@media (max-width: 1100px) { .hm-col-8, .hm-col-4 { grid-column: span 12; } }

/* --- cartões: cabeçalho com ícone, corpo, rodapé --- */
.home .cartao { padding: 0; overflow: hidden; }
.home .cartao > h2 { display: flex; align-items: center; gap: 8px; padding: 16px 20px 12px;
  font-size: 13px; font-weight: 700; color: var(--azul); text-transform: uppercase;
  letter-spacing: .5px; border-bottom: 1px solid var(--borda); }
.home .cartao > h2 .dir { margin-left: auto; text-transform: none; letter-spacing: 0;
  font-weight: 500; }
.hm-ico { flex: none; color: var(--texto-suave); }
.home .cartao > h2 .hm-ico { color: var(--azul); }
.hm-cnt { background: var(--fundo); border-radius: 999px; padding: 2px 9px;
  font-size: 12px; color: var(--texto-suave); font-weight: 600; }
.hm-link { color: var(--link); text-decoration: none; font-size: 13px;
  display: inline-flex; align-items: center; gap: 4px; }
.hm-link:hover { text-decoration: underline; }
.hm-rodape { padding: 10px 20px 14px; border-top: 1px solid var(--borda); }

/* --- listas (tarefas, agenda, avisos) --- */
.hm-lista { display: flex; flex-direction: column; }
.hm-item { display: flex; align-items: center; gap: 12px; padding: 12px 20px;
  border-bottom: 1px solid #F2F2F1; text-decoration: none; color: inherit; }
.hm-item:last-child { border-bottom: 0; }
.hm-item:hover { background: #FAFBFA; }
.hm-hora { flex: none; width: 46px; font-size: 13px; color: var(--texto-suave);
  font-variant-numeric: tabular-nums; }
.hm-hora.forte { color: var(--azul); font-weight: 600; }
.hm-corpo { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.hm-tit { font-size: 14px; color: var(--texto); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.hm-sub { font-size: 12px; color: var(--texto-suave); }
.hm-prazo { flex: none; font-size: 12px; color: var(--texto-suave); white-space: nowrap; }
.hm-prazo.atrasado { color: var(--erro); font-weight: 600; }
.hm-dia { padding: 9px 20px 5px; font-size: 11px; font-weight: 700; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .4px; background: #FAFBFA; }

/* --- v1.626 · A LINHA COM ROSTO (Tarefas) -------------------------
   O avatar de quem é dono entra no lugar da coluna da hora; a hora
   desce para o apoio. O `align-items` vai para o topo porque o título
   pode ter duas linhas e o avatar não deve descer com ele. */
.hm-l { align-items: flex-start; gap: 11px; }
.hm-l .av { margin-top: 1px; }
.hm-av-vazio { flex: none; width: 30px; height: 30px; border-radius: 50%;
  border: 1px dashed #CBD5DA; color: #A9B4BA; display: flex; align-items: center;
  justify-content: center; font-size: 13px; margin-top: 1px; }

/* a pílula do prazo: só tem cor quando quer dizer alguma coisa */
.hm-pz { flex: none; font-size: 12px; font-weight: 600; white-space: nowrap;
  color: var(--texto-suave); background: var(--fundo); border-radius: 999px;
  padding: 3px 10px; margin-top: 1px; }
.hm-pz.hoje { background: #FBF0E0; color: #A9631A; }
.hm-pz.venceu { background: #FBE9E7; color: var(--erro); }

/* --- v1.626 · A AGENDA EM LINHA DO TEMPO --------------------------
   Um trilho ligando os compromissos; a bolinha do PRÓXIMO é verde e
   cheia. Sem isto, Agenda e Tarefas eram duas listas idênticas na
   mesma coluna. */
.hm-tl-nota { padding: 2px 20px 8px; font-size: 12.5px; color: var(--texto-suave); }
.hm-tl { padding: 2px 20px 14px; }
.hm-ev { display: flex; gap: 12px; padding: 10px 0; text-decoration: none; color: inherit;
  position: relative; }
.hm-ev:hover .hm-tit { text-decoration: underline; }
.hm-ev-h { flex: none; width: 42px; font-size: 12.5px; font-weight: 600; color: var(--azul);
  font-variant-numeric: tabular-nums; padding-top: 6px; }
.hm-ev-tr { flex: none; width: 12px; position: relative; }
/* o trilho passa por trás de todas as bolinhas; a primeira e a última
   cortam a sobra para o fio não vazar do cartão */
.hm-ev-tr::before { content: ''; position: absolute; left: 5px; top: -10px; bottom: -10px;
  width: 2px; background: var(--borda); }
.hm-ev:first-of-type .hm-ev-tr::before { top: 9px; }
.hm-ev:last-of-type .hm-ev-tr::before { bottom: auto; height: 11px; }
.hm-ev-p { position: absolute; left: 0; top: 5px; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2.5px solid #C9D5DA; }
.hm-ev.proximo .hm-ev-p { border-color: var(--verde-escuro); background: var(--verde);
  box-shadow: 0 0 0 4px rgba(123, 188, 98, .2); }
.hm-ev.passou .hm-ev-h, .hm-ev.passou .hm-tit { color: var(--texto-suave); }
.hm-ev.passou .av, .hm-ev.passou .hm-av-vazio { opacity: .6; }
/* o dia ("Hoje", "Amanhã") dentro do trilho não é faixa cinza de lista:
   é só um rótulo, alinhado com o texto */
.hm-tl .hm-dia { background: none; padding: 10px 0 2px 54px; }

/* ===== v1.627 · UMA COR POR CARTÃO NA HOME =========================
   A cor diz o ASSUNTO, não enfeita: âmbar o que vence, verde o que se
   faz, azul o relógio, verde-azulado o dinheiro, papel o bloco de
   notas (que já era assim desde a v1.625). Escolhido no
   Outros/Mockup-Cor-Por-Cartao/ em 14/09/2026, modo 3 (cartão inteiro
   tingido) com a Agenda em destaque.

   REGRAS DA CASA AQUI:
   · a cor mora numa classe do cartão (`c-prazo`, `c-acao`, `c-tempo`,
     `c-dinheiro`, `c-papel`), posta no index.html. Apagar a palavra
     devolve o cartão branco — nada aqui redefine `.cartao`;
   · tudo é hexadecimal fechado, sem `color-mix()`: a função é recente
     demais para eu apostar o visual do sistema nela;
   · só vale DENTRO da `.hm-grade`. A mesma classe em outra tela não
     pinta nada.
   ------------------------------------------------------------------ */
.hm-grade .cartao.c-prazo    { --cor: #955718; --cor-cab: #FBF1E3; --cor-borda: #EFE0CB;
                               --cor-linha: #F5EADB; --cor-corpo: #FFFCF7; }
.hm-grade .cartao.c-acao     { --cor: #3F7730; --cor-cab: #EFF7EA; --cor-borda: #DCE9D5;
                               --cor-linha: #EAF2E5; --cor-corpo: #FBFEF9; }
.hm-grade .cartao.c-tempo    { --cor: #0A5E8A; --cor-cab: #EBF3F7; --cor-borda: #D5E3EC;
                               --cor-linha: #E6EFF4; --cor-corpo: #FAFDFF; }
.hm-grade .cartao.c-dinheiro { --cor: #1F6F6B; --cor-cab: #E9F3F2; --cor-borda: #D4E5E3;
                               --cor-linha: #E3EFEE; --cor-corpo: #F9FDFD; }
.hm-grade .cartao.c-papel    { --cor: #7A5F16; --cor-cab: #FBF4DC; --cor-borda: #EDE2C4;
                               --cor-linha: #F2E9D2; --cor-corpo: #FFFCF0; }

.hm-grade .cartao.c-prazo, .hm-grade .cartao.c-acao, .hm-grade .cartao.c-tempo,
.hm-grade .cartao.c-dinheiro, .hm-grade .cartao.c-papel {
  background: var(--cor-corpo); border-color: var(--cor-borda); }

.hm-grade .cartao.c-prazo > h2, .hm-grade .cartao.c-acao > h2, .hm-grade .cartao.c-tempo > h2,
.hm-grade .cartao.c-dinheiro > h2, .hm-grade .cartao.c-papel > h2 {
  background: var(--cor-cab); border-bottom-color: var(--cor-borda); color: var(--cor); }
.hm-grade .cartao.c-prazo > h2 .hm-ico, .hm-grade .cartao.c-acao > h2 .hm-ico,
.hm-grade .cartao.c-tempo > h2 .hm-ico, .hm-grade .cartao.c-dinheiro > h2 .hm-ico,
.hm-grade .cartao.c-papel > h2 .hm-ico { color: var(--cor); }

/* as divisórias internas acompanham o tom, senão o cinza delas suja o
   fundo; o realce do mouse vira branco translúcido, que funciona sobre
   qualquer um dos cinco */
.hm-grade .cartao.c-prazo .hm-item, .hm-grade .cartao.c-acao .hm-item,
.hm-grade .cartao.c-tempo .hm-item, .hm-grade .cartao.c-dinheiro .hm-item,
.hm-grade .cartao.c-prazo .at-l, .hm-grade .cartao.c-acao .at-l,
.hm-grade .cartao.c-tempo .at-l, .hm-grade .cartao.c-dinheiro .at-l {
  border-bottom-color: var(--cor-linha); }
.hm-grade .cartao.c-prazo .hm-item:hover, .hm-grade .cartao.c-acao .hm-item:hover,
.hm-grade .cartao.c-tempo .hm-item:hover, .hm-grade .cartao.c-dinheiro .hm-item:hover,
.hm-grade .cartao.c-prazo .at-l:hover, .hm-grade .cartao.c-acao .at-l:hover,
.hm-grade .cartao.c-tempo .at-l:hover, .hm-grade .cartao.c-dinheiro .at-l:hover,
.hm-grade .cartao.c-tempo .hm-ev:hover { background: rgba(255, 255, 255, .62); }

/* as faixas de seção e o rodapé do "Precisa de você" eram cinza sobre
   branco; sobre o tingido viram o tom do cabeçalho */
.hm-grade .cartao.c-prazo .at-faixa { background: var(--cor-cab);
  border-top-color: var(--cor-borda); border-bottom-color: var(--cor-borda); }
.hm-grade .cartao.c-prazo .at-rodape, .hm-grade .cartao.c-acao .hm-rodape,
.hm-grade .cartao.c-tempo .hm-rodape, .hm-grade .cartao.c-dinheiro .hm-rodape,
.hm-grade .cartao.c-prazo .hm-rodape { border-top-color: var(--cor-borda); }
.hm-grade .cartao.c-tempo .hm-dia { background: none; }
/* a nota de rodapé dos cartões de dinheiro tem fundo próprio */
.hm-grade .cartao.c-dinheiro .hm-nota { background: var(--cor-cab);
  border-top-color: var(--cor-borda); }

/* --- A AGENDA EM DESTAQUE ------------------------------------------
   Não é uma sexta cor: é HIERARQUIA. O cabeçalho vai para a cor cheia
   com texto branco e o cartão ganha sombra — um cartão acima dos
   outros. Se dois cartões se destacassem, nenhum se destacaria. */
.hm-grade .cartao.c-destaque { box-shadow: 0 10px 26px -14px rgba(10, 94, 138, .55);
  border-color: #9EC4D8; }
.hm-grade .cartao.c-destaque > h2 { background: var(--cor); color: #fff;
  border-bottom-color: var(--cor); }
.hm-grade .cartao.c-destaque > h2 .hm-ico,
.hm-grade .cartao.c-destaque > h2 .hm-cab-toggle,
.hm-grade .cartao.c-destaque > h2 .seta-card { color: #fff; }
.hm-grade .cartao.c-destaque > h2 .hm-link { color: #C4E4F4; }
.hm-grade .cartao.c-destaque > h2 .hm-link:hover { color: #fff; }

/* etiquetas: só duas cores, e só quando querem dizer algo */
.hm-tag { flex: none; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .3px; }
.hm-tag-alta, .hm-tag-critica { background: #FBE9E7; color: var(--erro); }
.hm-tag-media { background: var(--fundo); color: var(--texto-suave); }

/* avisos: um filete à esquerda diz a gravidade sem pintar o cartão */
.hm-aviso .hm-pino { flex: none; width: 3px; height: 30px; border-radius: 2px;
  background: var(--borda); }
.hm-aviso.hm-critica .hm-pino { background: var(--erro); }
.hm-aviso.hm-alta .hm-pino { background: var(--alerta); }
.hm-aviso.hm-media .hm-pino { background: var(--borda); }

/* --- indicadores --- */
.hm-ind { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.home .hm-kpi { display: flex; flex-direction: column; gap: 2px; padding: 16px 18px 14px;
  text-decoration: none; color: inherit; }
.home a.hm-kpi:hover { border-color: #CFD8DC; }
.hm-kpi-topo { display: flex; align-items: center; gap: 7px; font-size: 12.5px;
  color: var(--texto-suave); font-weight: 600; }
.hm-kpi-num { font-size: 36px; font-weight: 300; color: var(--pn-num); line-height: 1.15;
  letter-spacing: -1px; font-variant-numeric: tabular-nums;
  font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.hm-kpi-pe { display: flex; align-items: center; gap: 4px; font-size: 11.5px;
  color: var(--texto-suave); }
.hm-kpi-pe.sobe { color: var(--ok); }
.hm-kpi-pe.desce { color: var(--erro); }

/* --- últimos acessados: faixa de atalhos --- */
.hm-recentes .hm-chips { display: flex; gap: 10px; padding: 14px 20px 16px; flex-wrap: wrap; }
.hm-chip { display: flex; flex-direction: column; gap: 1px; padding: 8px 14px;
  border: 1px solid var(--borda); border-radius: 10px; text-decoration: none;
  color: inherit; min-width: 150px; max-width: 240px; }
.hm-chip:hover { background: #FAFBFA; border-color: #CFD8DC; }
.hm-chip-tipo { font-size: 10.5px; color: var(--texto-suave); text-transform: uppercase;
  letter-spacing: .4px; font-weight: 600; }
.hm-chip-nome { font-size: 13.5px; color: var(--texto); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

/* --- espaço reservado para gráficos --- */
.hm-futuro { border-style: dashed; background: transparent; box-shadow: none; }
.hm-futuro-corpo { display: flex; align-items: center; gap: 16px; padding: 22px 20px;
  color: var(--texto-suave); }
.hm-futuro-corpo b { display: block; font-size: 14px; color: var(--texto); margin-bottom: 2px; }
.hm-futuro-corpo span { font-size: 13px; line-height: 1.5; }

/* --- estado vazio: nunca um espaço em branco --- */
.hm-vazio { display: flex; align-items: center; gap: 10px; padding: 26px 20px;
  color: var(--texto-suave); font-size: 13.5px; }

/* --- erro dentro do cartão, com botão de tentar de novo --- */
.hm-erro { display: flex; align-items: center; gap: 12px; padding: 18px 20px;
  font-size: 13.5px; color: var(--texto-suave); flex-wrap: wrap; }
.hm-erro .btn { padding: 5px 12px; font-size: 12.5px; display: inline-flex;
  align-items: center; gap: 6px; }

/* --- esqueleto de carregamento (jamais tela branca) --- */
.hm-sk { padding: 6px 20px 14px; }
.hm-sk-item { padding: 11px 0; border-bottom: 1px solid #F2F2F1; }
.hm-sk-item:last-child { border-bottom: 0; }
.hm-sk-linha { height: 13px; border-radius: 6px;
  background: linear-gradient(90deg, #EDEFEF 25%, #F6F7F7 50%, #EDEFEF 75%);
  background-size: 300% 100%; animation: hm-brilho 1.4s ease-in-out infinite; }
@keyframes hm-brilho { 0% { background-position: 130% 0; } 100% { background-position: -30% 0; } }
@media (prefers-reduced-motion: reduce) { .hm-sk-linha { animation: none; } }

/* --- responsividade: 4 → 2 → 1 --- */
@media (max-width: 1200px) { .hm-ind { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px)  { .hm-col-6 { grid-column: span 12; } }
@media (max-width: 560px)  {
  .hm-ind { grid-template-columns: 1fr; }
  .home { padding: 16px 14px 26px; }
  /* v1.562 — o gap do celular saiu: ele existia para reduzir os 24px
     da grade; com a base em 12 ele passaria a AUMENTAR o vão. */
  .hm-saudacao h1 { font-size: 21px; }
  .hm-chip { min-width: 100%; }
}

/* ===== BLOCO DE NOTAS da Início (v1.624) =====
   O cartão reusa .cartao, .cartao > h2, .hm-lista, .hm-rodape, .hm-link
   e .hm-vazio — o que nasce aqui é só o que a lista de post-it pede: a
   linha de escrita, a bolinha, o pegador e a gaveta das arquivadas.
   Mockup: Outros/Mockup-Bloco-de-Notas/, aprovado em 14/09/2026. */

/* a linha de escrita, sempre no topo. Não há botão de salvar: quem diz
   que gravou é o "salvo" do cabeçalho (.bn-estado) */
.bn-novo { display: flex; align-items: center; gap: 12px; padding: 11px 20px 11px 8px;
  border-bottom: 1px solid #F2F2F1; }
.bn-novo .bn-punho { opacity: 0 !important; pointer-events: none; }   /* só alinha a coluna */
.bn-campo { flex: 1; min-width: 0; font: inherit; font-size: 14px; color: var(--texto);
  border: 0; outline: 0; background: transparent; padding: 3px 0; }

/* uma anotação */
.bn-item { display: flex; align-items: flex-start; gap: 12px; padding: 11px 20px 11px 8px;
  border-bottom: 1px solid #F2F2F1; background: #fff; }
.bn-item:last-child { border-bottom: 0; }
.bn-item:hover { background: #FAFBFA; }
.bn-cb { width: 20px; height: 20px; flex: 0 0 auto; margin-top: 1px; border-radius: 50%;
  border: 2px solid #9AA7AE; background: #fff; cursor: pointer; color: #fff;
  display: flex; align-items: center; justify-content: center; padding: 0; }
.bn-novo .bn-cb { border-style: dashed; border-color: #C9D2D7; cursor: default; }
.bn-cb:hover { border-color: var(--verde-escuro); color: var(--verde-escuro); }
.bn-cb svg { display: block; opacity: 0; }
.bn-cb:hover svg { opacity: .55; }
.bn-item.feita .bn-cb { background: var(--verde); border-color: var(--verde); color: #0F2A08; }
.bn-item.feita .bn-cb svg { opacity: 1; }
.bn-tx { flex: 1; min-width: 0; font-size: 14px; line-height: 1.5; color: var(--texto);
  outline: 0; white-space: pre-wrap; word-break: break-word; padding: 1px 0; border-radius: 4px; }
.bn-tx:focus { box-shadow: 0 0 0 2px #EDF3F6; }
.bn-item.feita .bn-tx { text-decoration: line-through; color: var(--texto-suave); }
.bn-item.saindo { opacity: .35; transition: opacity .3s; }
/* v1.625 — o cinza da hora era #93A0A8, e dava 2,68:1 no cartão branco
   (2,61:1 no papel): abaixo dos 3:1 que texto pequeno secundário pede.
   Este dá 3,39 e 3,30 — continua discreto, e agora é legível. Achado
   pela conta de contraste do ensaio, que passou a rodar com a cor. */
.bn-data { flex: none; font-size: 11.5px; color: #828D94; white-space: nowrap; margin-top: 3px; }
.bn-x { flex: none; border: 0; background: transparent; cursor: pointer; padding: 2px;
  color: #B4BEC4; line-height: 0; opacity: 0; transition: opacity .12s; }
.bn-item:hover .bn-x, .bn-x:focus-visible { opacity: 1; }
.bn-x:hover { color: var(--erro); }

/* o pegador: o ÚNICO lugar por onde a linha se arrasta. Pelo texto o
   toque continua servindo para editar, e o `touch-action: none` mora
   só aqui — é ele que impede o dedo de rolar a página em vez de mover
   a linha, sem congelar a rolagem do cartão inteiro. */
.bn-punho { flex: none; width: 20px; align-self: stretch; display: flex; align-items: center;
  justify-content: center; border: 0; background: transparent; padding: 0; margin-top: -1px;
  color: #C3CCD1; cursor: grab; opacity: 0; transition: opacity .12s;
  touch-action: none; -webkit-user-select: none; user-select: none; }
.bn-item:hover .bn-punho, .bn-punho:focus-visible { opacity: 1; }
.bn-punho:hover { color: var(--texto-suave); }
.bn-punho:active { cursor: grabbing; }
/* no celular não existe hover: o pegador fica sempre à vista, e maior */
@media (hover: none) {
  .bn-punho { opacity: .75; width: 28px; }
  .bn-x { opacity: .6; }
}
.bn-item.bn-arrastando { background: #fff; border-radius: 8px; border-bottom-color: transparent;
  box-shadow: 0 6px 18px rgba(2, 48, 71, .16); position: relative; z-index: 3;
  pointer-events: none; }   /* deixa o elementFromPoint enxergar quem está embaixo */
.bn-item.bn-arrastando .bn-punho { opacity: 1; color: var(--texto-suave); }
.bn-lista.bn-arrastando-lista .bn-item { transition: transform .12s; }

/* "salvo 14:32" no cabeçalho — o lugar do botão que não existe */
.bn-estado { font-size: 12px; color: var(--texto-suave); display: inline-flex;
  align-items: center; gap: 5px; }
.bn-estado .bn-ponto { width: 6px; height: 6px; border-radius: 50%; background: var(--verde); }
.bn-estado.salvando .bn-ponto { background: var(--alerta); }
.bn-estado.erro { color: var(--erro); }
.bn-estado.erro .bn-ponto { background: var(--erro); }

/* rodapé: a gaveta à esquerda, o Desfazer à direita */
.bn-rodape { display: flex; align-items: center; gap: 12px; }
.bn-desfazer { margin-left: auto; font-size: 12.5px; color: var(--texto-suave);
  display: none; align-items: center; gap: 8px; }
.bn-desfazer.on { display: flex; }
.bn-desfazer button { font: inherit; font-size: 12.5px; border: 0; background: transparent;
  color: var(--link); cursor: pointer; text-decoration: underline; padding: 0; }

/* a gaveta das arquivadas */
.bn-arquivo { border-top: 1px solid var(--borda); background: #FAFBFA; }
.bn-arquivo .bn-item { padding: 9px 20px; border-bottom: 1px solid #EFEFEE; background: transparent; }
.bn-arquivo .bn-tx { text-decoration: line-through; color: var(--texto-suave); font-size: 13.5px; }
.bn-arq-acoes { display: flex; gap: 10px; flex: none; }
.bn-arq-acoes button { font: inherit; font-size: 12px; border: 0; background: transparent;
  color: var(--link); cursor: pointer; padding: 0; }
.bn-arq-acoes button.ruim { color: var(--erro); }
.bn-arq-cab { padding: 9px 20px 4px; font-size: 11px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--texto-suave); }

/* o cartão não cresce sem fim: passou de ~10 linhas, a lista rola
   dentro dele e a coluna estreita continua do tamanho que era */
.bn-lista { max-height: 340px; overflow-y: auto; }

/* --- v1.625 · A COR DE PAPEL ---------------------------------------
   O bloco de notas é a única peça da Home que NÃO é relatório — é a
   mesa de quem trabalha —, e a cor diz isso antes de o título ser lido:
   no meio de sete cartões brancos, ele se acha de canto de olho.

   O amarelo não está no manual da marca (navy + verde), e entra aqui
   por significado, não por enfeite: é a cor do papel avulso. Fica
   CONTIDO nesta classe — nada aqui toca `.cartao`, `.hm-lista` ou
   `.hm-rodape`, e apagar a palavra `bn-papel` do index.html devolve o
   cartão branco. Escolhido em 14/09/2026 entre quatro propostas
   (Outros/Mockup-Bloco-de-Notas-Cor/).

   Contraste conferido: texto #16232B sobre #FFFCF0 dá 13,5:1, e o
   apoio #5B6870 dá 5,2:1 — os dois acima do mínimo do WCAG AA. */
.bn-papel.cartao { background: #FFFCF0; border-color: #EDE2C4; }
.bn-papel.cartao > h2 { background: #FBF4DC; border-bottom-color: #EDE2C4; }
.bn-papel .bn-novo, .bn-papel .bn-item { border-bottom-color: #F2E9D2; }
/* a linha é transparente para deixar o papel aparecer; o branco dela
   volta só quando ela está sendo arrastada, que é o que a destaca */
.bn-papel .bn-item { background: transparent; }

/* --- v1.664 · O BLOCO AMPLIADO e o "+ Compromisso" da Agenda ----------
   Mockup em Outros/Mockup-Agenda-Compromisso-Notas-Ampliadas/. */

/* o botão de ação no cabeçalho de um cartão da Home: pílula vazada que
   herda a cor do cabeçalho (branca no destacado, azul nos comuns) */
.hm-cab-btn { display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12.5px;
  font-weight: 600; line-height: 1; padding: 5px 11px 5px 8px; border-radius: 999px; cursor: pointer;
  color: var(--link); background: transparent; border: 1px solid currentColor; opacity: .92;
  text-transform: none; letter-spacing: 0; }
.hm-cab-btn:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
.hm-cab-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.hm-grade .cartao.c-destaque > h2 .hm-cab-btn { color: #fff; }
/* os dois cabeçalhos que passaram a ter mais de uma coisa à direita */
.home #hm-agenda > h2 .dir, .home #hm-notas > h2 .dir { display: inline-flex; align-items: center; gap: 12px; }
/* o vazio da Agenda mostra a saída dele */
.hm-vazio .hm-link { margin-left: auto; white-space: nowrap; }

/* o ampliar (e, na folha, o fechar) do bloco de notas: só o ícone, ao
   lado do "salvo 14:32" */
.bn-ampliar { border: 0; background: transparent; padding: 3px; line-height: 0; cursor: pointer;
  color: var(--texto-suave); border-radius: 6px; }
.bn-ampliar:hover { color: var(--azul); background: rgba(255, 255, 255, .6); }
.bn-ampliar:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }

/* a folha grande. É o MESMO cartão #hm-notas, movido para cá pelo
   notasAmpliar() e devolvido ao fechar — por isso nada aqui redesenha o
   miolo: só tira o que não faz sentido numa folha (a seta de recolher, o
   teto de 340px da lista) e dá mais letra e mais ar. */
.bn-fundo { position: fixed; inset: 0; background: rgba(2, 48, 71, .5); display: none;
  align-items: flex-start; justify-content: center; padding: 40px 16px; overflow-y: auto; z-index: 50; }
.bn-fundo.aberto { display: flex; }
.bn-grande { width: 920px; max-width: 100%; }
.bn-grande .cartao { margin: 0; border-radius: 12px; box-shadow: 0 18px 48px -18px rgba(2, 48, 71, .6);
  display: flex; flex-direction: column; max-height: calc(100vh - 80px); }
.bn-grande .cartao > h2 { color: #7A5F16; flex: none; }
.bn-grande .cartao > h2 .hm-ico { color: #7A5F16; }
.bn-grande .cartao > h2 .hm-seta { display: none; }
.bn-grande .cartao > h2 .hm-cab-toggle { pointer-events: none; }
.bn-grande .bn-novo, .bn-grande .bn-item { padding-left: 14px; padding-right: 24px; }
.bn-grande .bn-item { padding-top: 13px; padding-bottom: 13px; }
.bn-grande .bn-campo, .bn-grande .bn-tx { font-size: 15.5px; line-height: 1.6; }
.bn-grande .bn-data { font-size: 12.5px; margin-top: 5px; }
.bn-grande .bn-novo, .bn-grande .bn-rodape { flex: none; }
.bn-grande .bn-lista { max-height: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.bn-grande .bn-arquivo { flex: none; max-height: 220px; overflow-y: auto; }
@media (max-width: 720px) {
  .bn-fundo { padding: 12px 8px; }
  .bn-grande .cartao { max-height: calc(100vh - 24px); }
}

/* a janela "Novo compromisso" da Início: só o tamanho e a nota; o resto
   é .modal/.grade/.campo/.lookup de sempre */
.modal.cmp { width: 640px; }
.cmp .cmp-nota { font-size: 12.5px; color: var(--texto-suave); margin: -6px 0 14px; line-height: 1.5; }
.cmp .cmp-opcional { font-weight: 400; }
.bn-papel .bn-item:hover { background: #FDF8E7; }
.bn-papel .bn-item.bn-arrastando { background: #FFFDF6; }
.bn-papel .hm-rodape { border-top-color: #EDE2C4; }
.bn-papel .bn-arquivo { background: #FBF7E8; border-top-color: #EDE2C4; }
.bn-papel .bn-campo::placeholder { color: #A59873; }
/* a bolinha e o campo continuam brancos: é o que os faz parecerem
   escrevíveis dentro do papel */
.bn-papel .bn-cb { background: #fff; }

/* ===== Caminho de etapas do LEAD (v1.123) ===== */
/* Reusa .path/.et dos Casos; acrescenta só o que o funil do lead pede:
   o fim ganho, a saída por perda e os dois botões lado a lado. */
.path .et.ganha { background: var(--verde-escuro); color: #fff; }
.path .et.perdida { background: #FBE9E7; color: var(--erro); }
/* v1.456 — O CAMINHO DO ALUGUEL NUMA LINHA SÓ (proposta B, aprovada em
   31/08). Os botões saíam depois do trilho e caíam sempre numa segunda
   linha, soltos, longe da etapa que eles avançam. Agora eles moram
   DENTRO do .path (é o que o caminho do LEAD já faz) e encostam à
   direita; as etapas continuam largas, atravessando a tela, como
   sempre foram. A classe é só da competência: contrato, lead e
   sinistro seguem com o .path de sempre.
   79px → 47px, medido. */
.path-linha { flex-wrap: nowrap; align-items: center; }
.path-linha .path-saida { margin-left: auto; flex: 0 0 auto; flex-wrap: nowrap; }
.path-saida { margin-left: 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.path-saida .btn { padding: 7px 13px; font-size: 13px; }
.path-saida .btn-saida { color: var(--erro); border-color: #F3C9C4; }
.path-saida .btn-saida:hover { background: #FBE9E7; }
.faixa-perdido { margin-top: 12px; background: #FBE9E7; border: 1px solid #F3C9C4;
  border-radius: 10px; padding: 10px 13px; font-size: 13px; color: #8a2a20; }

/* v1.330 — a faixa do lead encerrado: verde no ganho (aponta contato e
   imóvel), cinza na perda. É o "virou arquivo" do padrão Salesforce. */
.faixa-lead-encerrado { margin-top: 12px; border: 1px solid #CDE5C2; background: #F3FAEF;
  border-radius: 10px; padding: 12px 14px; }
.faixa-lead-encerrado.perdido { border-color: var(--borda); background: #F4F5F4; }
.faixa-lead-encerrado .titulo { font-size: 13.5px; font-weight: 700;
  color: var(--verde-escuro); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.faixa-lead-encerrado.perdido .titulo { color: var(--texto-suave); }
.faixa-lead-encerrado .titulo .quando { font-weight: 400; color: var(--texto-suave);
  font-size: 12.5px; }
.faixa-lead-encerrado .partes { display: flex; gap: 22px; flex-wrap: wrap; margin-top: 9px;
  align-items: center; }
.faixa-lead-encerrado.perdido .partes { margin-top: 0; }
.faixa-lead-encerrado .parte { display: flex; gap: 9px; align-items: center; min-width: 0; }
.faixa-lead-encerrado .parte .ico { font-size: 19px; }
.faixa-lead-encerrado .parte .r { display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--texto-suave); }
.faixa-lead-encerrado .parte .v a { color: var(--link); font-weight: 600; font-size: 14px;
  text-decoration: none; }
.faixa-lead-encerrado .parte .v a:hover { text-decoration: underline; }
.faixa-lead-encerrado .destravar { margin-left: auto; background: none; border: none;
  color: var(--texto-suave); font-size: 12.5px; cursor: pointer;
  text-decoration: underline; font-family: inherit; padding: 4px; }
.faixa-lead-encerrado .destravar:hover { color: var(--azul); }
.faixa-lead-encerrado .destravado { margin-left: auto; font-size: 12.5px;
  color: var(--texto-suave); }

/* no celular os botões passam a ocupar a linha inteira, sem espremer */
@media (max-width: 560px) {
  .path-saida { margin-left: 0; margin-top: 10px; width: 100%; }
  .path-saida .btn { flex: 1; justify-content: center; }
  /* v1.456 — no celular o caminho do aluguel volta a quebrar: os
     botões descem e ocupam a largura, exatamente como antes desta
     versão. A linha única é ganho de tela grande. */
  .path-linha { flex-wrap: wrap; }
  .path-linha .path-saida { margin-left: 0; flex: 1 1 100%; flex-wrap: wrap; }
}

/* =====================================================================
   v1.124 — FAVORITOS, AJUDA E MENU CONFIGURÁVEL (js/cabecalho.js)
   ===================================================================== */

/* A LUPA VIROU SVG. O emoji tinha tamanho próprio; o traço herda daqui. */
.buscag .lupa { display: flex; align-items: center; color: #98a3aa; opacity: 1; }
.buscag .lupa svg { display: block; }

/* A estrela marcada usa o VERDE da marca, não o amarelo de sempre: o
   cabeçalho inteiro é azul e verde, e um amarelo isolado puxaria o olho
   para o canto errado da tela. */
.topo2 .ico.marcado svg { color: var(--verde-escuro); }
.topo2 .ico.marcado:hover svg { color: var(--verde-escuro); }

/* ---- painel de favoritos ---- */
.menu-favoritos, .menu-ajuda { width: 330px; }
.fav-item { display: flex; align-items: center; border-bottom: 1px solid #F4F4F3; }
.fav-item:last-of-type { border-bottom: 0; }
.fav-item:hover { background: #F3F8FA; }
.fav-item a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px;
  padding: 9px 4px 9px 14px; text-decoration: none; color: var(--texto); }
.fav-item a:hover { background: transparent; }
.fav-tipo { font-size: 10px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--texto-suave); min-width: 58px; flex: 0 0 auto; }
.fav-nome { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-x { border: 0; background: transparent; color: #C2C9CE; cursor: pointer;
  font-size: 14px; padding: 8px 12px; font-family: inherit; }
.fav-x:hover { color: var(--erro); }

.fav-vazio { padding: 20px 18px; text-align: center; color: var(--texto-suave); }
.fav-vazio svg { color: #C9D2D8; margin-bottom: 6px; }
.fav-vazio b { display: block; font-size: 13.5px; color: var(--texto); font-weight: 600; }
.fav-vazio span { display: block; font-size: 12px; line-height: 1.5; margin-top: 4px; }
.fav-acao { padding: 10px 14px; border-top: 1px solid var(--borda); background: #FAFBFA; }
.fav-acao .btn { width: 100%; justify-content: center; }

/* ---- ajuda ---- */
.menu-ajuda i { color: var(--texto-suave); font-style: normal; }
.ajuda-rodape { padding: 9px 14px; border-top: 1px solid var(--borda); background: #FAFBFA;
  font-size: 11.5px; color: var(--texto-suave); }

/* ---- a estrela ao lado do nome do registro (ficha) ---- */
.topo-ficha h1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.estrela-registro { border: 0; background: transparent; cursor: pointer; padding: 3px;
  border-radius: 50%; line-height: 0; color: #A9B4BB; font-family: inherit; }
.estrela-registro:hover { background: #EDF3F6; color: var(--azul); }
.estrela-registro svg { width: 17px; height: 17px; display: block; }
.estrela-registro.marcado { color: var(--verde-escuro); }

/* ---- o botão de ajustar o menu, no fim das abas ---- */
.aba-ajustar { border: 0; background: transparent; cursor: pointer; color: #A9B4BB;
  padding: 12px 14px; font-family: inherit; line-height: 0; flex: 0 0 auto; }
.aba-ajustar:hover { color: var(--azul); background: #F7FAFB; }

/* O painel pendura na LINHA 2, que já é position:relative. Não cabe no
   .abas: aquele tem overflow-x para o menu rolar no celular, e o painel
   sairia cortado — o mesmo tropeço que o seletor de objetos já teve. */
.menu-personalizar { display: none; position: absolute; top: 100%; left: 210px; width: 390px;
  max-width: calc(100vw - 24px); background: #fff; border: 1px solid var(--borda);
  border-radius: 10px; box-shadow: 0 12px 30px rgba(2,48,71,.18); z-index: 70; overflow: hidden; }
.menu-personalizar.aberto { display: block; }
.menu-personalizar .mtit { display: flex; align-items: center; font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave);
  background: #FAFAF9; padding: 8px 14px; border-bottom: 1px solid var(--borda); }
.mtit-dir { margin-left: auto; text-transform: none; letter-spacing: 0;
  font-size: 12px; color: var(--link); text-decoration: none; }
.mtit-dir:hover { text-decoration: underline; }
/* v1.125: UMA lista, e não a grade de duas colunas da v1.124.
   Ordenar exige uma fila — em grade de duas colunas "antes" e "depois"
   deixam de ter sentido único (o que vem depois do último da esquerda?). */
.pm-lista { padding: 8px 10px; }
.pm-linha { display: flex; align-items: center; gap: 9px; font-size: 13.5px;
  padding: 7px 8px; border-radius: 8px; color: var(--texto); background: #fff; }
.pm-linha:hover { background: #F3F8FA; }
.pm-linha input { width: auto; margin: 0; cursor: pointer; }
.pm-nome { cursor: default; }
.pm-ico { font-size: 14px; }
/* v1.372 — o mesmo ícone de traço do lançador, na lista de personalizar */
.pm-ico { display: flex; align-items: center; justify-content: center; width: 20px; color: var(--azul); }
.pm-ico svg { display: block; }
/* O desmarcado continua na fila, apagado: some do menu sem sumir da
   lista, para poder voltar no mesmo lugar. */
.pm-linha.fora { opacity: .45; }
.pm-linha.pm-arrastando { background: #EAF3F8; outline: 1px dashed #9FBBCB; }
.pm-pega { margin-left: auto; border: 0; background: transparent; color: #C2CAD0;
  font-size: 13px; letter-spacing: 1px; cursor: grab; padding: 4px 6px;
  border-radius: 6px; font-family: inherit; }
.pm-pega:hover { color: var(--azul); background: #EDF3F6; }
.pm-pega:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; color: var(--azul); }
.pm-pega:active { cursor: grabbing; }
.pm-nota { padding: 0 14px 12px; font-size: 11.5px; color: var(--texto-suave); line-height: 1.5; }
.pm-acoes { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--borda);
  background: #FAFBFA; }
.pm-acoes .btn { flex: 1; justify-content: center; }
.menu-personalizar .msg-erro { margin: 0 14px 10px; }

/* =====================================================================
   v1.406 — OS ATALHOS DA ENGRENAGEM

   O painel é o mesmo `.menu-personalizar` das abas; só a ÂNCORA muda.
   Aquele pendura na linha 2 (por isso o `left:210px` fixo lá em cima);
   este pendura na engrenagem, que fica na ponta direita da linha 1.
   ===================================================================== */
/* DOIS NOMES NO SELETOR de propósito: o painel usa as classes
   `menu-personalizar` e `menu-config-escolher` ao mesmo tempo, e a
   regra de lá (`left:210px`, e a do celular com `width:100vw-16px`)
   tem o mesmo peso que uma classe só — quem ganhasse seria quem
   viesse por último no arquivo. Com as duas classes, esta ganha
   sempre, esteja onde estiver. */
.menu-personalizar.menu-config-escolher { left: auto; right: 0; top: 44px;
  width: min(340px, calc(100vw - 16px)); }

/* São 17 linhas: sem teto, o painel passa do pé da tela num notebook e
   o botão Salvar fica fora do alcance. A lista rola; o título, o
   contador e os botões ficam sempre à vista. */
.menu-config-escolher .pm-lista { max-height: min(48vh, 430px); overflow-y: auto; }

/* O contador "5 de 8". Vive dentro do `.mtit`, que já é flex no
   `.menu-personalizar` — daí o `margin-left:auto` funcionar aqui. */
.pm-conta { margin-left: auto; text-transform: none; letter-spacing: 0;
  font-size: 11.5px; font-weight: 700; color: var(--verde-escuro); }
.pm-conta.cheio { color: var(--alerta); }

/* No teto, a linha ainda desmarcada apaga E a alça some: mover o que
   não vai aparecer não muda nada, e a alça prometeria que muda. */
.pm-linha.travado { opacity: .45; }
.pm-linha.travado .pm-pega { visibility: hidden; }

/* O pé do menu da engrenagem: o caminho para os destinos que não
   viraram atalho. Sem ele, quem escolhe 8 dos 17 fica sem os outros 9. */
.me-rodape { border-top: 1px solid var(--borda); background: #FAFAF9; }
.me-rodape a { font-size: 13px; padding: 9px 14px; }

/* =====================================================================
   v1.406 — O TRILHO DA CONFIGURAÇÃO (admin.html)

   POR QUE UM TRILHO, E NÃO A FILEIRA DE ABAS
   Eram 16 abas: 1440 px de conteúdo numa faixa de 1154 px. O `.abas` é
   flex sem `wrap` e sem `overflow`, então as três últimas (Regras,
   Configurações gerais, Backup) saíam pela direita SEM barra de
   rolagem — existiam e ninguém as achava. Empilhar em fileiras com
   título resolvia, mas custava ~290 px de altura no alto de toda tela
   de configuração, para sempre. O trilho cresce para baixo, que é a
   direção que a tela tem de sobra.
   ===================================================================== */
.cfg { display: grid; grid-template-columns: 236px 1fr; align-items: start; }
.cfg-trilho { background: #FAFAF9; border: 1px solid var(--borda);
  border-radius: 10px; padding: 6px 0 12px; position: sticky; top: 12px; }
.cfg-grupo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-suave); font-weight: 800; padding: 13px 16px 5px; }
/* A LINHA É UM <div> COM DOIS FILHOS — o destino (<a>) e a estrela
   (<button>). Botão dentro de botão, ou dentro de link, é HTML
   inválido: o navegador fecha o de fora ao encontrar o de dentro e a
   estrela deixa de pertencer à linha. Por isso o realce mora aqui, na
   linha, e não no <a>. */
.cfg-linha { display: flex; align-items: center; border-left: 3px solid transparent; }
.cfg-linha:hover { background: #F1F5F7; }
.cfg-linha:hover .cfg-item svg { color: var(--azul); }
.cfg-linha.on { background: #EDF3F6; border-left-color: var(--verde); }
.cfg-linha.on .cfg-item { color: var(--azul); font-weight: 700; }
.cfg-linha.on .cfg-item svg { color: var(--azul); }

.cfg-item { display: flex; align-items: center; gap: 9px; flex: 1; min-width: 0;
  text-align: left; padding: 8px 4px 8px 13px; font-family: inherit; font-size: 13.5px;
  color: var(--texto); cursor: pointer; text-decoration: none; }
.cfg-item > span { flex: 1; min-width: 0; }
.cfg-item svg { flex: 0 0 auto; color: #8b979e; }
.cfg-item:focus-visible { outline: 2px solid var(--azul); outline-offset: -2px; }

/* A estrela põe e tira o item da engrenagem, sem abrir painel nenhum —
   o mesmo gesto do favorito que o cabeçalho já usa. Cheia quando está
   lá dentro, vazia quando não está. */
.estrela-atalho { display: flex; align-items: center; margin-right: 10px;
  border: 0; background: transparent; cursor: pointer; color: #CBD3D8;
  padding: 3px; border-radius: 5px; }
.cfg-linha:hover .estrela-atalho { color: #A9B4BB; }
.estrela-atalho:hover { color: var(--azul); background: #E4EDF2; }
.estrela-atalho:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.estrela-atalho.marcada, .cfg-linha:hover .estrela-atalho.marcada { color: var(--verde-escuro); }
.estrela-atalho.marcada svg { fill: currentColor; }
.estrela-atalho svg { color: inherit; }

.cfg-painel { padding: 0 0 0 20px; min-width: 0; }
.cfg-caminho { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-suave); font-weight: 700; margin-bottom: 10px; }

@media (max-width: 900px) {
  /* Uma coluna: o trilho vira a primeira coisa da tela e deixa de
     grudar, senão comeria metade da altura útil no celular. */
  .cfg { grid-template-columns: 1fr; }
  .cfg-trilho { position: static; margin-bottom: 14px; }
  .cfg-painel { padding: 0; }
}

@media (max-width: 760px) {
  /* ----------------------------------------------------------------
     v1.551 — NO CELULAR O CABEÇALHO É SÓ MARCA E BUSCA (07/09/2026).

     Até a v1.550 os quatro atalhos da direita — estrela (favoritos),
     ? (ajuda), engrenagem (Configuração) e o chip da foto (Minha
     conta) — dividiam a linha com a busca. Espremidos a 32px cada,
     davam mira ruim no dedo e comiam a largura do campo, que é o que
     realmente se usa num telefone.

     Vão embora os quatro. O que cada um dava continua alcançável:
       · engrenagem → "Configuração", já na tela Menu (v1.440)
       · o chip     → "Minha conta", que MUDOU-SE para a tela Menu
                      nesta mesma versão (desenharMenuCelular)
       · estrela e ajuda → só no computador, a pedido do Rodrigo

     É `.icones` inteiro que some, e com ele os painéis suspensos que
     moram dentro dele. Nenhum id sai do documento: `display:none` não
     apaga nada, então pintarCabecalho() continua preenchendo
     chip-avatar, usuario-logado e chip-papel sem saber de nada — e a
     conferência 6 do repositório não vê id órfão.

     O computador não é tocado: isto vive só abaixo de 760px.
     ---------------------------------------------------------------- */
  .topo2 .linha1 { gap: 8px; padding: 8px 12px; }
  .topo2 .icones { display: none; }

  /* SEM ISTO O CABEÇALHO INTEIRO VAZA PARA FORA DA TELA.
     A caixa de busca é `flex:1`, mas todo <input> traz uma largura
     mínima própria (umas 20 letras) que o flex respeita — a linha fica
     mais larga que o celular, o chip do usuário some pela direita e os
     painéis, que se penduram nessa linha, abrem meio fora da tela.
     `min-width:0` é o que autoriza o campo a encolher. */
  .buscag { min-width: 0; }

  /* v1.551 — a largura dos painéis de favoritos e ajuda saiu junto com
     os botões que os abriam: escondidos dentro do `.icones`, eles não
     têm mais como aparecer no celular. Se algum dia um deles voltar
     para cá, a linha volta com ele. */
  /* A linha 2 pode ser mais larga que a tela (as abas rolam), então
     ancorar pela direita dela jogaria o painel para fora. Largura pela
     tela, e não pela linha. */
  .menu-personalizar { left: 8px; right: auto; width: calc(100vw - 16px); }
  /* a lista já é de uma coluna; no celular só encurta a alça */
  .pm-pega { padding: 6px 4px; }

  /* ----------------------------------------------------------------
     v1.542 — NO CELULAR, UMA NAVEGAÇÃO SÓ (06/09/2026).

     Havia duas ao mesmo tempo: esta fileira de abas no alto e a barra
     de baixo, no estilo Salesforce. A de cima cabia em duas ou três
     abas de doze e jogava o resto no "Mais" — um caminho pior para o
     mesmo lugar que a barra de baixo já dá inteiro, com ícone, nome e
     o aviso de quantos objetos estão fora do app.

     Some a linha 2 completa, e com ela três coisas — todas já
     presentes na barra de baixo:
       · a fileira de abas          → o botão Menu
       · o quadriculado (objetos)   → o botão Menu
       · a casinha do Início        → o botão Início

     O lápis de personalizar o menu também mora aqui, e no celular
     quem faz esse papel é "Meu CRM no celular", no menu Minha conta.

     NENHUM JAVASCRIPT MUDA: o ajustarAbas() já começa com
     `if (!nav.offsetParent) return`, e com o pai escondido o
     offsetParent é nulo — ele sai antes de medir qualquer coisa.

     O computador não é tocado: isto vive só abaixo de 760px.
     Mockup em Outros/Mockup-Celular-Sem-Abas/.
     ---------------------------------------------------------------- */
  .topo2 .linha2 { display: none; }
}

/* =====================================================================
   v1.126 — HISTÓRICO DE ALTERAÇÕES
   O mesmo desenho serve aos dois lugares: o cartão da ficha (js/ficha.js)
   e a aba da Administração (js/admin.js). Um só bloco, porque duas folhas
   para a mesma lista viram duas listas diferentes no primeiro ajuste.
   ===================================================================== */
.hist-dia { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-suave); background: #FAFAF9; padding: 6px 16px;
  border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.hist-dia:first-child { border-top: 0; }

/* v1.312 — UMA LINHA POR REGISTRO.
   Até aqui cada CAMPO alterado virava uma linha, e um contrato com
   quatro campos mexidos ocupava a tela. Agora a alteração inteira cabe
   numa linha: hora · o que fez · quem · qual registro · o primeiro
   campo · o rastro. O resto dos campos abre no "+N". */
.hl { display: flex; align-items: center; gap: 10px; padding: 8px 16px;
  border-top: 1px solid #F1F1EF; font-size: 13px; line-height: 1.35; }
.hist-dia + .hl { border-top: 0; }
.hl:hover { background: #F8FBFC; }
.hl-h { flex: 0 0 42px; font-size: 12px; color: var(--texto-suave);
  font-variant-numeric: tabular-nums; }

/* o que foi feito — na mesma posição em toda linha, para o olho achar
   sem ler */
.hl-acao { flex: 0 0 auto; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 8px; border-radius: 20px; }
.hl-acao.incluiu { background: #E8F2E4; color: #3E7A2E; }
.hl-acao.alterou { background: #E4EFFA; color: #0B5CAB; }
.hl-acao.excluiu { background: #F8E7E4; color: #B23A28; }

.hl-quem { flex: 0 0 auto; font-weight: 600; color: var(--azul); }
.hl-alvo { flex: 0 0 auto; color: var(--texto-suave); }
.hl-alvo a { color: var(--link); text-decoration: none; }   /* v1.533 — leva ao registro alterado */
.hl-alvo a:hover { text-decoration: underline; }

/* o resumo cede espaço antes de todo o resto: é o único pedaço da
   linha que pode ser cortado sem perder o sentido (o resto está no +N) */
.hl-oque { flex: 1 1 auto; min-width: 0; color: var(--texto);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-oque .c, .hl-det .c { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  font-weight: 700; color: var(--texto-suave); margin-right: 5px; }

/* O valor antigo riscado, e não apagado: ele continua legível, que é o
   ponto — quem lê precisa comparar, não só saber que mudou. */
.hl-oque .a, .hl-det .a { color: #8A6A6A; text-decoration: line-through;
  text-decoration-color: #D9BDBD; }
.hl-oque .s, .hl-det .s { color: #B9C3C9; margin: 0 4px; }
.hl-oque .d, .hl-det .d { color: var(--texto); font-weight: 600; }

.hl-mais { flex: 0 0 auto; font-size: 11px; color: var(--azul); background: #EDF3F8;
  border-radius: 20px; padding: 1px 7px; cursor: pointer; user-select: none; }
.hl-det { padding: 2px 16px 10px 68px; background: #FCFDFD; }
.hl-det .l { font-size: 12.5px; padding: 2px 0; }

/* v1.312 — o rastro: de onde partiu a alteração. Discreto e sempre no
   fim: quem varre o histórico procura o que mudou, não o IP; quem
   procura o IP sabe onde ele está. Robô e SQL Editor não têm cabeçalho
   de requisição e ficam com o traço. */
.hl-rastro { flex: 0 0 auto; font-size: 11.5px; color: #9AA5AC;
  font-variant-numeric: tabular-nums; text-align: right; }
.hl-rastro b { font-weight: 600; color: #7C8890; }

.hist-selo { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 7px;
  border-radius: 20px; text-transform: uppercase; }
.hist-selo.bot { background: #E8F2E4; color: #3E7A2E; }
.hist-selo.sis { background: #EDF1F3; color: #5B6870; }
.hist-selo.apagou { background: #F8E7E4; color: #B23A28; }
/* v1.183 — a integração assina com cor própria: azul, nem o verde do
   WhatsApp nem o cinza de "direto no banco". */
.hist-selo.integra { background: #E4EFFA; color: #0B5CAB; }

/* v1.183 — QUEM DEU A BAIXA, logo abaixo dos chips da parcela.
   Verde = integração do Asaas; cinza = alguém pela tela. */
.baixa-selo { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px;
  padding: 7px 12px; border-radius: 6px; font-size: 12.5px; line-height: 1.3;
  background: #E8F2E4; color: #2E5C22; border: 1px solid #CFE3C7; }
.baixa-selo.manual { background: #EDF1F3; color: #46535B; border-color: #DCE3E7; }
.baixa-selo .ic { font-size: 14px; }
.baixa-selo b { font-weight: 700; }
.baixa-selo a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

.hist-vazio { padding: 26px 16px; text-align: center; color: var(--texto-suave); font-size: 13px; }

.hist-filtros { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 0 0 14px; }
.hist-filtros select, .hist-filtros input { padding: 7px 11px; border: 1px solid var(--borda);
  border-radius: 8px; font-family: inherit; font-size: 13px; color: var(--texto); background: #fff; }
.hist-busca { flex: 1; min-width: 180px; }
#hist-lista { border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; background: #fff; }

@media (max-width: 900px) {
  /* v1.312 — no estreito a linha vira duas: o cabeçalho (hora, ação,
     quem, registro) em cima e o que mudou embaixo, alinhado. O rastro
     acompanha o cabeçalho, encostado à direita. */
  .hl { flex-wrap: wrap; }
  .hl-oque { flex-basis: 100%; order: 9; padding-left: 52px; white-space: normal; }
  .hl-rastro { margin-left: auto; }
  .hl-det { padding-left: 52px; }
}

@media (max-width: 560px) {
  .hl { gap: 8px; padding: 8px 12px; }
  .hl-h { flex: 0 0 38px; }
  .hl-oque { padding-left: 0; }
  .hl-det { padding-left: 12px; }
  .hist-busca { min-width: 0; }
}

/* =====================================================================
   v1.129 — PRECISA DE VOCÊ (js/home.js)
   O painel que substituiu "Avisos importantes". Aproveita o .cartao da
   Home; o que entra aqui é só o que a fila tem de próprio.
   ===================================================================== */
.hm-atencao .at-n { background: #FBE9E7; color: var(--erro); border-radius: 999px;
  padding: 2px 10px; font-size: 12px; font-weight: 700; margin-left: 2px; }

.at-filtro { display: flex; border: 1px solid var(--borda); border-radius: 999px; overflow: hidden; }
.at-filtro button { border: 0; background: #fff; font-family: inherit; font-size: 12.5px;
  padding: 5px 14px; color: var(--texto-suave); cursor: pointer; }
.at-filtro button:hover { background: #F3F8FA; }
.at-filtro button.on { background: var(--azul); color: #fff; font-weight: 600; }

/* A FAIXA É A EXPLICAÇÃO DA ORDEM, e por isso ela fica visível em vez de
   virar uma pontuação escondida: quem lê entende por que aquilo está no
   topo, e um painel que não se explica é um painel que ninguém obedece. */
.at-faixa { padding: 7px 20px; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--texto-suave); background: #FAFAF9;
  border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
.at-faixa .por { font-weight: 400; letter-spacing: 0; text-transform: none;
  font-size: 11.5px; color: #8C99A2; }

.at-l { display: flex; align-items: center; gap: 13px; padding: 12px 20px;
  border-bottom: 1px solid #F2F2F0; }
.at-l:last-of-type { border-bottom: 0; }
.at-l:hover { background: #FAFBFA; }
.at-pino { flex: none; width: 3px; height: 34px; border-radius: 2px; background: var(--borda); }
.at-l.prazo    .at-pino { background: var(--erro); }
.at-l.pessoa   .at-pino { background: var(--alerta); }
.at-l.dinheiro .at-pino { background: var(--alerta); }
.at-l.esfriando .at-pino { background: #9FB6C4; }

.at-c { flex: 1; min-width: 0; }
.at-tit { font-size: 14px; color: var(--texto); }
.at-tit a { color: var(--link); font-weight: 600; text-decoration: none; }   /* v1.533 — leva ao registro */
.at-tit a:hover { text-decoration: underline; }
.at-pq { font-size: 12px; color: var(--texto-suave); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-quando { flex: none; font-size: 12px; color: var(--texto-suave);
  white-space: nowrap; text-align: right; }
.at-quando.venceu { color: var(--erro); font-weight: 600; }
.at-acao { flex: none; }
.at-acao .btn { padding: 6px 13px; font-size: 12.5px; }

.at-rodape { display: flex; gap: 14px; align-items: center; padding: 11px 20px;
  border-top: 1px solid var(--borda); background: #FCFCFB;
  font-size: 12.5px; color: var(--texto-suave); }

/* O VAZIO NÃO PODE SER UMA CAIXA EM BRANCO. É o único momento em que a
   Home diz "pode ir trabalhar em outra coisa", e ele precisa dizer O QUE
   foi conferido — senão parece que o sistema não olhou. */
.at-zero { padding: 40px 20px; text-align: center; }
.at-zero-marca { color: var(--verde-escuro); display: flex; justify-content: center; }
.at-zero b { display: block; font-size: 16px; color: var(--azul); margin-top: 8px; }
.at-zero span { display: block; font-size: 13px; color: var(--texto-suave);
  margin-top: 5px; line-height: 1.6; }

@media (max-width: 760px) {
  /* No celular a ação vai para baixo: 3 colunas de 3 palavras cada não
     cabem, e o que se perde primeiro é justamente o "por que". */
  .at-l { flex-wrap: wrap; }
  .at-c { flex-basis: 100%; }
  .at-pq { white-space: normal; }
  .at-quando { margin-left: 16px; }
  .at-acao { margin-left: auto; }
}

/* =====================================================================
   v1.130 — RAIO-X DO IMÓVEL (js/raiox.js, raiox-imovel.html)
   ===================================================================== */
.rx-cx { background: #fff; border: 1px solid var(--borda); border-radius: 12px;
  overflow: hidden; box-shadow: 0 1px 2px rgba(2,48,71,.06); margin-bottom: 22px; }
.rx-par { display: flex; gap: 22px; align-items: flex-start; }
.rx-par > * { flex: 1; min-width: 0; }

/* ---- o veredito: a frase É a tela, o resto é a prova ---- */
.rx-vd { padding: 20px 24px; border-bottom: 1px solid var(--borda); }
.rx-vd-topo { display: flex; align-items: flex-start; gap: 14px; }
.rx-vd-tit { flex: 1; min-width: 0; }
.rx-vd-tit h1 { font-size: 19px; color: var(--azul); margin: 0; font-weight: 700; }
.rx-vd-tit .sub { font-size: 13px; color: var(--texto-suave); margin-top: 3px; }
.rx-sit { font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; white-space: nowrap; }
.rx-sit.mal { background: #FBE9E7; color: var(--erro); }
.rx-sit.ok  { background: var(--fundo); color: var(--texto-suave); }
.rx-frase { margin-top: 16px; font-size: 15.5px; line-height: 1.6; color: var(--texto); }
.rx-frase b { color: var(--azul); }
.rx-mal { color: var(--erro); font-weight: 700; }

.rx-kpis { display: grid; grid-template-columns: repeat(5, 1fr); }
.rx-kpi { padding: 14px 20px; border-right: 1px solid var(--borda); }
.rx-kpi:last-child { border-right: 0; }
.rx-kpi .r { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.rx-kpi .v { font-size: 22px; font-weight: 700; color: var(--azul); line-height: 1.2; margin-top: 3px; }
.rx-kpi .v small { font-size: 14px; font-weight: 600; }
.rx-kpi .v.alerta { color: var(--erro); }
.rx-kpi .p { font-size: 11.5px; color: var(--texto-suave); margin-top: 1px; }

.rx-cab { display: flex; align-items: center; gap: 8px; padding: 13px 24px;
  border-bottom: 1px solid var(--borda); }
.rx-cab h3 { margin: 0; font-size: 15px; color: var(--azul); font-weight: 700; }
.rx-cab .dir { margin-left: auto; font-size: 12.5px; color: var(--texto-suave); }

/* ---- linha do tempo: UMA coluna, de propósito ---- */
.rx-lt { padding: 6px 0; }
.rx-lt-l { display: flex; gap: 14px; padding: 11px 24px; }
.rx-lt-l:hover { background: #FAFBFA; }
.rx-lt-d { flex: 0 0 82px; font-size: 12px; color: var(--texto-suave); text-align: right; padding-top: 2px; }
.rx-lt-m { flex: 0 0 10px; position: relative; }
.rx-lt-m i { position: absolute; left: 1px; top: 6px; width: 9px; height: 9px; border-radius: 50%;
  background: #C7D2D8; border: 2px solid #fff; box-shadow: 0 0 0 1px #C7D2D8; }
.rx-lt-l.bom  .rx-lt-m i { background: var(--verde-escuro); box-shadow: 0 0 0 1px var(--verde-escuro); }
.rx-lt-l.ruim .rx-lt-m i { background: var(--erro); box-shadow: 0 0 0 1px var(--erro); }
.rx-lt-m:before { content: ''; position: absolute; left: 5px; top: 0; bottom: -11px;
  width: 1px; background: #E4E8EA; }
.rx-lt-l:last-child .rx-lt-m:before { display: none; }
.rx-lt-c { flex: 1; min-width: 0; }
.rx-lt-t { display: block; font-size: 13.5px; color: var(--texto); }
.rx-lt-t b { color: var(--azul); font-weight: 600; }
.rx-lt-s { display: block; font-size: 12px; color: var(--texto-suave); margin-top: 1px; }

/* ---- preço ---- */
.rx-pz { padding: 16px 24px 20px; }
.rx-barra { display: flex; align-items: flex-end; gap: 12px; height: 118px; margin: 10px 0 6px; }
.rx-col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
  align-items: center; gap: 6px; min-width: 0; }
.rx-col .b { width: 100%; border-radius: 6px 6px 0 0; background: #D8E3E9; }
.rx-col.eu .b { background: var(--azul); }
.rx-col .n { font-size: 12px; color: var(--texto-suave); white-space: nowrap; }
.rx-col.eu .n { color: var(--azul); font-weight: 700; }
.rx-col .e { font-size: 11px; color: #9AA7AF; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; max-width: 100%; }

.rx-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.rx-tab td { padding: 8px 0; border-top: 1px solid #F1F1EF; }
.rx-tab td:last-child { text-align: right; font-weight: 600; color: var(--azul); }
.rx-tab tr:first-child td { border-top: 0; }
.rx-tab tr.rx-total td { border-top: 2px solid var(--borda); font-size: 15px; }

.rx-nota { font-size: 12.5px; color: var(--texto-suave); line-height: 1.6; margin-top: 12px; }
.rx-nota b { color: var(--texto); }
.rx-vazio { padding: 24px; font-size: 13px; color: var(--texto-suave); text-align: center; }

/* A RESSALVA É PARTE DA INFORMAÇÃO, não rodapé decorativo. Ela diz onde o
   dado é fraco — 4 comparáveis não são mercado, e histórico reconstruído
   não é registro. Um número sem essa moldura vira autoridade que não tem. */
.rx-ressalva { margin: 0; padding: 10px 24px; font-size: 12px; color: #8A6A2E;
  background: #FDF6E7; border-top: 1px solid #F0E3C4; line-height: 1.55; }
.rx-ressalva b { color: #6B5220; }

@media (max-width: 900px) {
  .rx-par { flex-direction: column; }
  .rx-par > * { width: 100%; }
  .rx-kpis { grid-template-columns: repeat(2, 1fr); }
  .rx-kpi { border-bottom: 1px solid var(--borda); }
}
@media (max-width: 560px) {
  .rx-kpis { grid-template-columns: 1fr; }
  .rx-lt-l { flex-wrap: wrap; }
  .rx-lt-d { flex-basis: 100%; text-align: left; font-weight: 600; }
  .rx-col .n { font-size: 10.5px; }
}

/* =====================================================================
   v1.131 — REGRAS (js/admin.js, aba da Administração)
   ===================================================================== */
.rg-topo { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.rg-topo-acoes { margin-left: auto; display: flex; gap: 8px; flex: none; }
.rg-lede { font-size: 13px; color: var(--texto-suave); margin: 3px 0 0; }
.rg-cx { background: #fff; border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; }

.rg-l { display: flex; align-items: center; gap: 14px; padding: 13px 20px;
  border-bottom: 1px solid #F2F2F0; }
.rg-l:last-child { border-bottom: 0; }
.rg-l:hover { background: #FAFBFA; }
.rg-c { flex: 1; min-width: 0; cursor: pointer; }
.rg-n { font-size: 14px; color: var(--texto); font-weight: 600; }
.rg-d { font-size: 12.5px; color: var(--texto-suave); margin-top: 2px; }
.rg-l.off .rg-n, .rg-l.off .rg-d { opacity: .45; }
.rg-cnt { flex: none; font-size: 12px; color: var(--texto-suave); text-align: right; white-space: nowrap; }
.rg-cnt b { display: block; font-size: 15px; color: var(--azul); }
.rg-x { flex: none; border: 0; background: transparent; color: #C2C9CE; cursor: pointer;
  font-size: 14px; padding: 6px 4px; font-family: inherit; }
.rg-x:hover { color: var(--erro); }

/* O INTERRUPTOR É A COISA MAIS IMPORTANTE DA TELA. Automação que não se
   desliga num clique vira algo que se teme — e quem teme desliga tudo. */
.rg-sw { flex: none; width: 38px; height: 21px; border-radius: 999px; background: #D6DDE1;
  position: relative; cursor: pointer; border: 0; padding: 0; transition: background .15s; }
.rg-sw:after { content: ''; position: absolute; top: 2px; left: 2px; width: 17px; height: 17px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s; }
.rg-sw.on { background: var(--verde-escuro); }
.rg-sw.on:after { left: 19px; }

.rg-zero { padding: 34px 20px; text-align: center; background: #fff;
  border: 1px solid var(--borda); border-radius: 12px; }
.rg-zero b { display: block; font-size: 15px; color: var(--azul); }
.rg-zero span { display: block; font-size: 13px; color: var(--texto-suave);
  margin-top: 6px; line-height: 1.6; max-width: 520px; margin-left: auto; margin-right: auto; }
.rg-vazio { padding: 24px; text-align: center; font-size: 13px; color: var(--texto-suave); }

/* ---- editor ---- */
.rg-ed { margin-top: 20px; }
.rg-ed-cab { padding: 14px 20px; border-bottom: 1px solid var(--borda); }
.rg-nome-in { width: 100%; padding: 8px 12px; border: 1px solid var(--borda); border-radius: 8px;
  font-family: inherit; font-size: 15px; font-weight: 600; color: var(--azul); }
.rg-ed-b { padding: 16px 20px; border-bottom: 1px solid var(--borda); }
.rg-r { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: #fff; background: var(--azul); padding: 3px 9px; border-radius: 4px; }
.rg-r.se { background: #7A8A94; }
.rg-r.entao { background: var(--verde-escuro); }
.rg-r.rep { background: var(--alerta); }
.rg-lin { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px;
  font-size: 13.5px; color: var(--texto); }
.rg-lin select, .rg-lin input { padding: 6px 10px; border: 1px solid var(--borda);
  border-radius: 7px; font-family: inherit; font-size: 13px; background: #fff; color: var(--texto); }
.rg-lin input.num, .rg-cond input.num { width: 62px; text-align: center; }
.rg-mais { font-size: 12.5px; color: var(--link); text-decoration: none;
  margin-top: 9px; display: inline-block; }
.rg-ajuda { font-size: 12px; color: var(--texto-suave); margin: 8px 0 0; line-height: 1.55; }
.rg-ajuda b { color: var(--texto); }
.rg-cond { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.rg-cond select, .rg-cond input { padding: 6px 10px; border: 1px solid var(--borda);
  border-radius: 7px; font-family: inherit; font-size: 13px; background: #fff; }
.rg-cond-x { border: 0; background: transparent; color: #C2C9CE; cursor: pointer;
  font-size: 13px; padding: 4px; font-family: inherit; }
.rg-cond-x:hover { color: var(--erro); }

/* A PRÉVIA É O CORAÇÃO DO EDITOR: traduz os seletores de volta para
   português e diz quantos registros a regra pega HOJE. Salvar sem saber
   se alcança 4 ou 400 é o começo de toda automação que ninguém confia. */
.rg-previa { padding: 14px 20px; background: #F5F9F3; border-top: 1px solid #DCE8D6;
  font-size: 13.5px; line-height: 1.6; color: var(--texto); }
.rg-previa .rot { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--verde-escuro); margin-bottom: 5px; }
.rg-simular { margin-top: 10px; padding: 6px 13px; font-size: 12.5px; }
.rg-ed-acoes { display: flex; gap: 8px; justify-content: center; padding: 14px 20px;
  border-top: 1px solid var(--borda); background: #FAFBFA; }
.rg-ed .msg-erro { margin: 0 20px 4px; }

@media (max-width: 700px) {
  .rg-topo { flex-direction: column; }
  .rg-topo-acoes { margin-left: 0; width: 100%; }
  .rg-topo-acoes .btn { flex: 1; justify-content: center; }
  .rg-cnt { display: none; }
  .rg-lin, .rg-cond { flex-direction: column; align-items: stretch; }
  .rg-lin select, .rg-lin input, .rg-cond select, .rg-cond input { width: 100%; }
}

/* =====================================================================
   v1.134 — AS REGRAS DE DINHEIRO DO CONTRATO (cartão na ficha)
   ===================================================================== */
.rg-conta { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rg-conta td { padding: 8px 0; border-top: 1px solid #F1F1EF; }
.rg-conta tr:first-child td { border-top: 0; }
.rg-conta td:last-child { text-align: right; font-weight: 600; color: var(--azul); }
.rg-conta tr.rg-tot td { border-top: 2px solid var(--borda); font-size: 15px; }
.rg-conta td.falta { font-weight: 400; }
.rg-falta { color: var(--alerta); font-weight: 600; }

.rg-primeiro { margin-top: 14px; padding: 11px 14px; background: #F5F9F3;
  border: 1px solid #DCE8D6; border-radius: 8px; font-size: 13px;
  line-height: 1.6; color: var(--texto); }
.rg-primeiro b { color: var(--azul); }
/* v1.229 — o quanto da taxa de contrato já foi retido */
.tx-barra { height: 8px; border-radius: 4px; background: #E8ECEA;
  overflow: hidden; margin: 8px 0 6px; }
.tx-barra > i { display: block; height: 100%; background: var(--verde); }

.rg-aviso { margin: 12px 0 0; padding: 10px 14px; font-size: 12.5px; color: #8A6A2E;
  background: #FDF6E7; border: 1px solid #F0E3C4; border-radius: 8px; line-height: 1.55; }

/* ======================================================================
   v1.598 — AQUI HAVIA UMA SEGUNDA DEFINIÇÃO DE `.tag-azul`, E ELA
   DEFORMAVA TODA ETIQUETA AZUL DO CRM.

   O que estava escrito:

     .tag-azul { font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
       text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
       background: #E7F1F7; color: #0A5E8A; }

   A original é a da linha 198, junto das irmãs:

     .tag-azul { background: #E7F0F6; color: var(--azul); }

   O estrago não vinha do que ela REDEFINIA (o fundo mudava de #E7F0F6
   para #E7F1F7 — um dígito, invisível), e sim do que ela ACRESCENTAVA:
   font-size, text-transform e padding não existem na `.tag-azul`
   original, existem na `.tag` base. Ao aparecer aqui, elas passavam por
   cima da base — e só na azul. Resultado: numa mesma coluna, a etiqueta
   azul saía MAIÚSCULA, menor e com outro padding que a verde ao lado.

   Duas provas de que foi acidente, não intenção:

   1. O `FUNIL_CORES` do admin.js trata a azul como IRMÃ da verde, da
      amarela, da vermelha e da cinza — as cinco são a mesma escolha
      para a mesma etiqueta. Só a azul tinha forma diferente.

   2. `.tag-prev`, poucas linhas abaixo, tem EXATAMENTE este visual
      (10.5px, uppercase, 2px 8px, 999px) e nome próprio. É a classe que
      queria esse desenho; este bloco parece uma cópia dela que ficou com
      o nome errado.

   Quem precisar de etiqueta pequena e maiúscula continua tendo a
   `.tag-prev`. A `.tag-azul` volta a ser só uma cor, como as irmãs.

   Achado em 09/09 durante a v1.568 (a escada de cores das etapas), onde
   foi contornado com a classe `tag-espera` em vez de consertado — o
   conserto pedia esta varredura, que agora foi feita.
   ====================================================================== */

/* =====================================================================
   v1.135 — COMPETÊNCIAS (js/competencias-lista.js, ficha e faixa do mês)
   ===================================================================== */
.cp-faixa { display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--borda); border-radius: 10px;
  padding: 12px 18px; margin-bottom: 14px; }
.cp-faixa.alerta { border-color: #F0C9C2; background: #FFFCFC; }
.cp-faixa.vazia { color: var(--texto-suave); font-size: 13.5px; }
.cp-mes { font-size: 15px; font-weight: 700; color: var(--azul);
  text-transform: capitalize; }
.cp-kpi { display: flex; flex-direction: column; font-size: 11.5px; color: var(--texto-suave); }
.cp-kpi b { font-size: 16px; color: var(--azul); font-weight: 700; }
.cp-kpi.mal b { color: var(--erro); }
.cp-ger { margin-left: auto; }

/* ---- os dois lados, na ficha ---- */
.cp-lado + .cp-lado { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--borda); }
.cp-tit { font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--texto-suave); margin-bottom: 8px; }
.cp-obs { font-weight: 400; font-size: 11.5px; color: #8C99A2; text-transform: none;
  letter-spacing: 0; }
.rg-conta tr.cp-neg td:last-child { color: var(--erro); }
.rg-conta tr.cp-ok td { color: var(--verde-escuro); }
.rg-conta tr.cp-ok td:last-child { color: var(--verde-escuro); }
.cp-dif { margin: 8px 0 0; font-size: 12.5px; color: var(--alerta); }

.cp-fica { display: flex; align-items: center; gap: 10px; margin-top: 18px;
  padding: 12px 14px; background: var(--azul); border-radius: 9px; color: #fff; }
.cp-fica span { font-size: 12.5px; opacity: .85; }
.cp-fica b { margin-left: auto; font-size: 17px; }

/* ---- a janela de gerar ---- */
/* O aviso do retroativo fica ACIMA do resumo, com a cor de alerta:
   ele precisa ser lido antes do botão, não depois do clique. */
.cp-aviso { margin-top: 14px; padding: 11px 13px; border-radius: 8px;
  background: #FDF6E3; border: 1px solid #E8D9A8; color: #6B5416;
  font-size: 13px; line-height: 1.5; }
.cp-aviso b { color: #8A5A00; }

.cp-resumo { display: flex; gap: 20px; flex-wrap: wrap; padding: 12px 0 10px;
  border-bottom: 1px solid var(--borda); margin-top: 14px; }
.cp-resumo span { font-size: 12px; color: var(--texto-suave); }
.cp-resumo b { display: block; font-size: 15px; color: var(--azul); }
.cp-previa { max-height: 340px; overflow-y: auto; margin-top: 4px; }
.cp-linha { display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid #F4F4F3; font-size: 13px; }
.cp-linha.ja { opacity: .45; }
.cp-im { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-v { flex: 0 0 96px; text-align: right; font-variant-numeric: tabular-nums; }
.cp-v.cp-t { color: var(--erro); }
.cp-v.cp-r { font-weight: 600; color: var(--azul); }
/* v1.221 — a prévia de gerar parcelas passou a ter 5 colunas de dinheiro
   (aluguel · itens · boleto · taxa · repasse). Com cinco, sem cabeçalho
   ninguém sabe qual é qual. `cp-b` é o boleto do inquilino, que é o
   número que ele vai receber, e por isso é o único em negrito. */
.cp-cab { display: flex; align-items: center; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid var(--borda); font-size: 11px; font-weight: 800;
  letter-spacing: .4px; text-transform: uppercase; color: var(--texto-suave); }
.cp-v.cp-i { color: var(--texto-suave); }
.cp-v.cp-b { font-weight: 700; color: var(--azul); }

/* v1.222 — o extrato de itens de uma parcela, na ficha do Aluguel */
.ci-orig { font-size: 11.5px; color: var(--texto-suave); }
/* v1.446 — a parcela do seguro ao lado do nome no boleto ("11/12") */
.parc { display: inline-block; margin-left: 8px; padding: 1px 8px; border-radius: 20px;
  background: #eef1f3; color: var(--texto-suave); font-size: 11.5px; font-weight: 600; }

/* v1.447 — planos da fiança em COLUNA ÚNICA (um bloco por plano) */
.seg-planos { display: flex; flex-direction: column; gap: 14px; padding: 14px 16px 4px; }
.seg-plano { position: relative; border: 1px solid var(--borda); border-radius: 10px; padding: 14px 16px 16px; }
.seg-plano-x { position: absolute; top: 10px; right: 10px; }
.seg-plano-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 10px; }
.seg-plano-ativo { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font-size: 13px; color: var(--texto-suave); cursor: pointer; }
.seg-plano-ativo input { width: auto; }
@media (max-width: 560px) { .seg-plano-grade { grid-template-columns: 1fr; } }
.mut { color: var(--texto-suave); font-weight: 400; }
.ci-zero { color: var(--texto-suave); }
.ci-soma { padding: 12px 16px; background: #f4f7f9; display: flex;
  justify-content: space-between; align-items: baseline; font-size: 14px;
  flex-wrap: wrap; gap: 8px; }
.cp-s { flex: 0 0 72px; text-align: right; font-size: 11.5px; color: var(--texto-suave); }
.cp-vazio { padding: 20px 0; text-align: center; font-size: 13px; color: var(--texto-suave); }

@media (max-width: 700px) {
  .cp-faixa { gap: 14px; }
  .cp-ger { margin-left: 0; width: 100%; justify-content: center; }
  .cp-v { flex: 0 0 74px; font-size: 12px; }
  .cp-s { display: none; }
  /* no celular cabem quatro colunas de dinheiro: sai a de itens, que é
     a única cujo número o boleto ao lado já resume */
  .cp-v.cp-i { display: none; }
}

/* v1.135b — a previsão e a cobrança de hoje */
.tag-prev { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; background: #EFF3F5; color: #5B6870; }
.cp-kpi.prev b { color: #5B6870; }   /* v1.588: o "previsto adiante" saiu da faixa; a classe fica para quem ainda a usar */
/* v1.588 — O QUE FICOU COM A IMOBILIÁRIA NO MÊS (faixa de Aluguéis).
   O número em verde da marca; a conta aparece ao passar o mouse (ou ao
   tocar, no celular — a classe .aberto). Mockup Outros/Mockup-Faixa-Alugueis. */
.cp-kpi.casa b { color: var(--verde-escuro); }
.cp-kpi.casa { position: relative; cursor: help; }
.cp-kpi.casa .cp-conta { display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 5;
  background: #fff; border: 1px solid var(--borda); border-radius: 9px; box-shadow: 0 6px 18px rgba(2,48,71,.12);
  padding: 10px 14px; min-width: 300px; font-size: 12.5px; color: var(--texto); }
.cp-kpi.casa:hover .cp-conta, .cp-kpi.casa.aberto .cp-conta { display: block; }
.cp-conta table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.cp-conta td { padding: 3px 0; border: 0; background: none; }
.cp-conta td:last-child { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cp-conta tr.total td { border-top: 1px solid var(--borda); padding-top: 6px; font-weight: 700; color: var(--verde-escuro); }
.cp-conta tr.prev td { color: var(--texto-suave); }
.cp-conta .nota { margin: 8px 0 0; font-size: 11.5px; color: var(--texto-suave); line-height: 1.45; }
.cp-atraso { margin-top: 10px; padding: 11px 14px; background: #FBE9E7; border: 1px solid #F0C9C2;
  border-radius: 8px; font-size: 13px; line-height: 1.6; color: var(--texto); }
.cp-atraso b { color: var(--erro); }
.cp-atraso span { display: block; font-size: 12px; color: var(--texto-suave); margin-top: 2px; }
.rg-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.rg-nota-acoes { font-size: 12px; color: var(--texto-suave); line-height: 1.55; margin: 8px 0 0; }
.cp-p { flex: 0 0 26px; color: var(--texto-suave); font-size: 12px; }
@media (max-width: 700px) { .rg-acoes .btn { flex: 1; justify-content: center; } }

/* ============================================================
   v1.141 — PAINEL (o retrato do negócio)
   Cores de dado validadas (CVD + contraste): --pn-dado é o azul do
   link da casa; --pn-dado-2 é o dourado da identidade, aprofundado.
   Meta é RISCO, não série. Status usa --ok/--erro sempre com rótulo.
   ============================================================ */
:root { --pn-dado: #0176D3; --pn-dado-2: #06A59A; --pn-num: #032D60; }
/* v1.177: paleta dos gráficos no azul Lightning (aprovado no mockup);
   --pn-num é o azul-marinho dos números grandes. */
.pn-grade { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px; }
.pn-grade .cartao { margin: 0; }
.pn-grade .c12 { grid-column: span 12; }
.pn-grade .c6 { grid-column: span 6; }
@media (max-width: 980px) { .pn-grade .c6 { grid-column: span 12; } }

.pn-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0;
  border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; background: #fff; }
.pn-tile { padding: 14px 16px 12px; border-right: 1px solid var(--borda);
  display: flex; flex-direction: column; gap: 2px; }
/* v1.177: a ordem visual vira rótulo → subtítulo → número, como no
   Salesforce — o HTML continua r/v/s, quem reordena é o flex. */
.pn-tile .r { order: 1; } .pn-tile .s { order: 2; } .pn-tile .v { order: 3; }
.pn-tile:last-child { border-right: 0; }
.pn-tile .r { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-suave); display: block; margin-bottom: 2px; }
.pn-tile .v { font-size: 38px; font-weight: 300; color: var(--pn-num);
  letter-spacing: -1px; font-variant-numeric: tabular-nums;
  font-variant-numeric: tabular-nums; line-height: 1.15; display: block; }
.pn-tile .s { font-size: 12px; color: var(--texto-suave); }
.pn-tile.atencao .v { color: var(--erro); }
.pn-tile.bom .v { color: var(--ok); }

.pn-bar-linha { display: grid; grid-template-columns: 130px 1fr 52px; align-items: center;
  gap: 10px; padding: 5px 0; font-size: 13px; }
.pn-bar-linha .rot { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pn-bar-trilho { height: 14px; background: var(--fundo); border-radius: 0 4px 4px 0; position: relative; }
.pn-bar-fill { height: 100%; background: var(--pn-dado); border-radius: 0 4px 4px 0; min-width: 2px; }
.pn-bar-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }

.pn-fun-etapa { display: grid; grid-template-columns: 120px 1fr 120px; gap: 10px;
  align-items: center; padding: 6px 0; font-size: 13px; }
.pn-fun-queda { font-size: 11.5px; color: var(--texto-suave); padding: 0 0 2px 130px; }

.pn-prev { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  align-items: end; height: 170px; padding: 22px 4px 0; }
.pn-prev .mes { display: grid; grid-template-columns: 1fr 1fr; gap: 2px;
  align-items: end; height: 100%; }
.pn-prev .col { border-radius: 4px 4px 0 0; min-height: 3px; position: relative; }
.pn-prev .col.entra { background: var(--pn-dado); }
.pn-prev .col.sai { background: var(--pn-dado-2); }
.pn-anc { position: absolute; top: -18px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-weight: 600; color: var(--texto); white-space: nowrap; }
.pn-prev-rot { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px;
  font-size: 11.5px; color: var(--texto-suave); text-align: center; padding: 6px 4px 0; }
.pn-legenda { display: flex; gap: 16px; font-size: 12px; color: var(--texto-suave);
  padding: 8px 2px 0; flex-wrap: wrap; }
.pn-legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px;
  margin-right: 5px; vertical-align: -1px; }

.pn-meta-linha { display: grid; grid-template-columns: 110px 1fr 130px; gap: 10px;
  align-items: center; padding: 7px 0; font-size: 13px; }
.pn-meta-trilho { height: 14px; background: var(--fundo); border-radius: 0 4px 4px 0; position: relative; }
.pn-meta-alvo { position: absolute; top: -3px; bottom: -3px; right: 0; width: 2px; background: var(--texto); }

.pn-bai th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-suave); text-align: left; padding: 6px 8px; font-weight: 600; }
.pn-bai td { padding: 7px 8px; border-top: 1px solid var(--borda); font-size: 13px; }
.pn-bai .n { text-align: right; font-variant-numeric: tabular-nums; }
.pn-ocup { display: inline-block; width: 74px; height: 10px; background: var(--fundo);
  border-radius: 0 3px 3px 0; vertical-align: middle; margin-right: 7px; }
.pn-ocup i { display: block; height: 100%; background: var(--pn-dado); border-radius: 0 3px 3px 0; }
.pn-chip-baixa { font-size: 11px; color: var(--erro); font-weight: 600; }

.pn-fonte { font-size: 11.5px; color: var(--texto-suave); padding-top: 8px;
  border-top: 1px dashed var(--borda); margin-top: 10px; }
.pn-tip { position: fixed; background: var(--azul); color: #fff; font-size: 12px;
  padding: 5px 9px; border-radius: 6px; pointer-events: none; z-index: 50;
  display: none; white-space: nowrap; }

/* ============================================================
   v1.142 — METAS (pulso, régua e planejador reverso)
   ============================================================ */
.mt-chip { display: inline-block; font-size: 12px; font-weight: 700; padding: 3px 10px;
  border-radius: 999px; vertical-align: middle; }
.mt-chip.ok { background: #E7F4EC; color: var(--ok); }
.mt-chip.tarde { background: #FBEAE7; color: var(--erro); }
.mt-hoje-n { font-size: 44px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.mt-sub { font-size: 12.5px; color: var(--texto-suave); }
.mt-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.mt-form label { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-suave); display: block; margin-bottom: 4px; }
.mt-form input { width: 100%; }
.mt-plan { display: grid; grid-template-columns: 300px 1fr; gap: 22px; }
@media (max-width: 900px) { .mt-plan { grid-template-columns: 1fr; } }
.mt-res { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0;
  border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; background: #fff; }
.mt-cen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; }
.mt-cen > div { border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; font-size: 13px; }
.mt-cen b.t { display: block; margin-bottom: 6px; }
.mt-cen .foco, .mt-cen > div.foco { border: 2px solid var(--pn-dado); }
.mt-ritmo { font-size: 12px; color: var(--texto-suave); padding-left: 120px; margin: -2px 0 6px; }
.mt-real { font-size: 11.5px; color: var(--verde-escuro); text-transform: none; letter-spacing: 0; }

/* ============================================================
   v1.143 — ANÁLISES (preço por bairro, sazonalidade, indicadores)
   ============================================================ */
.an-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.an-tab th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-suave); text-align: left; padding: 6px 8px; font-weight: 600;
  position: sticky; top: 0; background: #fff; }
.an-tab td { padding: 7px 8px; border-top: 1px solid var(--borda); }
.an-tab .n { text-align: right; font-variant-numeric: tabular-nums; }
.an-faixa { color: var(--texto-suave); font-size: 12px; }
.an-badge { font-size: 10.5px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px;
  border-radius: 999px; background: var(--fundo); color: var(--texto-suave); white-space: nowrap; }
.an-badge.rel { background: #E8F0F6; color: var(--pn-dado); }
.an-mes { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px;
  align-items: end; height: 130px; padding-top: 18px; }
.an-mes .col { background: var(--pn-dado); border-radius: 4px 4px 0 0; min-height: 3px; position: relative; }
.an-mes .col.apagado { background: var(--borda); }
.an-mes-rot { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px;
  font-size: 11px; color: var(--texto-suave); text-align: center; padding-top: 5px; }
.an-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.an-kpi { border: 1px solid var(--borda); border-radius: 10px; padding: 13px 15px; background: #fff; }
.an-kpi .v { font-size: 27px; font-weight: 800; font-variant-numeric: tabular-nums; }
.an-kpi .r { font-size: 12px; font-weight: 700; }
.an-kpi .faixas { font-size: 11.5px; color: var(--texto-suave); margin: 5px 0; }
.an-kpi .fazer { font-size: 12px; border-top: 1px dashed var(--borda); padding-top: 7px;
  margin-top: 7px; line-height: 1.5; }
.an-kpi .estado { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  vertical-align: 4px; margin-left: 6px; }
.an-kpi .estado.otimo { background: #E7F4EC; color: var(--ok); }
.an-kpi .estado.bom { background: #FDF3DC; color: var(--alerta); }
.an-kpi .estado.ruim { background: #FBEAE7; color: var(--erro); }
.an-kpi .estado.semdado { background: var(--fundo); color: var(--texto-suave); }

/* ===== v1.155 · CARTÃO DE AGENDA DA VISTORIA =====
   Aparece na ficha do caso enquanto a data não está fechada. */
.ag-data { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  background: #F2F8F3; border: 1px solid #D8E9DC; border-radius: 9px; padding: 11px 14px; }
.ag-data .ag-r { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--texto-suave); font-weight: 700; }
.ag-data b { font-size: 16px; color: var(--verde-escuro); }
.ag-aviso { margin-top: 10px; font-size: 13px; line-height: 1.55; color: var(--texto-suave); }
.ag-aviso b { color: var(--texto); }
.ag-aviso.bola { background: #FFFCF2; border: 1px solid #F0E4C4; border-radius: 9px;
  padding: 10px 13px; color: #7a611a; }
.ag-aviso.bola b { color: #6b5313; }
.ag-aviso.ruim { background: #FDEAEA; border: 1px solid #F3C9C6; border-radius: 9px;
  padding: 10px 13px; color: #6d1f1a; }
.ag-aviso.ruim b { color: var(--erro); }
.ag-motivo { margin-top: 5px; font-style: italic; }
.ag-p { font-size: 12.5px; color: var(--texto-suave); line-height: 1.55; margin-top: 10px; }
.acoes-linha { display: flex; gap: 9px; flex-wrap: wrap; margin-top: 13px; }


/* ===== v1.168 — últimos acessados no rodapé fixo ===== */
/* v1.534 — A FAIXA PRECISA PARECER MOLDURA, NÃO CONTEÚDO.
   Era #fff sobre a página #F3F3F2: um branco quase igual ao fundo, e a
   faixa lia como se fosse mais um pedaço da tela. Agora é um cinza
   frio um passo mais escuro que o fundo, com o filete e a sombra
   reforçados — o mesmo recurso da barra de ferramentas do Salesforce.
   As pastilhas continuam brancas, e é o contraste delas contra a faixa
   que passou a dizer "isto aqui é clicável". */
/* v1.557 — O RODAPÉ FIXO FICA BRANCO, como a barra de utilidades do
   Salesforce no rodapé da tela dele.
   A v1.534 tinha escolhido o #E8EDEF pela regra "um passo mais ESCURO
   que a página, para a faixa parecer moldura e não conteúdo" — regra que
   só existia porque a página era quase branca e o branco sumia nela. Com
   a página azul a conta se inverte: o branco é o que mais se recorta, e
   a barra passa a ler como moldura justamente por ser a coisa mais clara
   da tela (1,76:1 contra o fundo).
   O que se perde é o contraste que dizia "a pastilha se clica": ela era
   branca sobre cinza, e agora é branca sobre branco. Quem assume esse
   trabalho é a borda dela, um tom mais firme — o mesmo recurso e o mesmo
   valor dos botões da faixa do registro. */
.barra-recentes { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: center; gap: 8px; padding: 6px 16px;
  background: #fff; border-top: 1px solid #C0CFD8;
  box-shadow: 0 -2px 10px rgba(2,48,71,.10); overflow-x: auto; white-space: nowrap; }
/* v1.557 — o branco vale em TODA tela, decisão dele depois de ver na
   sua. Sobre o azul do registro ele dá 1,76:1 e a faixa se recorta
   sozinha; sobre o cinza da lista dá 1,06:1 e quem separa passa a ser o
   filete de cima mais a sombra. É menos do que a v1.534 pedia ali, e é
   de propósito: uma faixa só, igual no sistema inteiro. */
.barra-recentes .br-rotulo { font-size: 11px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--texto-suave); flex: 0 0 auto; }
.barra-recentes .br-item { display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--texto); text-decoration: none; background: #fff;
  padding: 3px 10px; border: 1px solid #C6D2D9; border-radius: 20px; flex: 0 0 auto; }
.barra-recentes .br-item:hover { border-color: var(--azul); color: var(--azul); }
.barra-recentes .br-tipo { font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .3px; color: var(--texto-suave); }
body.com-recentes { padding-bottom: 44px; }
body.com-recentes footer { margin-bottom: 8px; }

/* ===== v1.168 — cartões da Home que recolhem ===== */
.hm-grade .cartao > h2 .hm-cab-toggle { cursor: pointer; display: inline-flex;
  align-items: center; gap: 8px; }
/* v1.375 — a seta da Home foi para a ponta direita, no desenho da
   .seta-card dos outros cartões: glifo único ▾, virado para cima
   quando o cartão está aberto, deitado (▾) quando fechado. */
.hm-grade .cartao > h2 .hm-seta { transition: transform .15s; transform: rotate(180deg); }
.hm-grade .cartao.hm-fechado > h2 .hm-seta { transform: none; }
.hm-grade .cartao.hm-fechado > *:not(h2) { display: none !important; }


/* ===== v1.170 — lookup (busca de registro, estilo Salesforce) ===== */
.lookup { position: relative; display: block; }
.lookup input { padding-right: 34px; }
.lookup .lupa { position: absolute; right: 11px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; color: var(--texto-suave); pointer-events: none; }
.lookup-lista { position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--borda); border-radius: 8px;
  box-shadow: 0 8px 22px rgba(2,48,71,.16); z-index: 70;
  max-height: 260px; overflow-y: auto; display: none; }
.lookup-lista.aberta { display: block; }
.lookup-item { padding: 8px 12px; cursor: pointer; font-size: 14px; color: var(--texto); }
.lookup-item:hover { background: #f0f5f8; }
.lookup-item small { display: block; font-size: 11.5px; color: var(--texto-suave); }
.lookup-vazio { padding: 10px 12px; font-size: 13px; color: var(--texto-suave); }


/* ===== v1.173 — cartões de margem e receitas (Home) ===== */
.hm-kpis { display: grid; grid-template-columns: repeat(4, 1fr); }
.hm-kpis.tres { grid-template-columns: repeat(3, 1fr); }
.hm-kpi2 { padding: 14px 18px; border-right: 1px solid #f0f2f3; }
.hm-kpi2:last-child { border-right: 0; }
.hm-kpi2 .r { font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--texto-suave); }
.hm-kpi2 .v { font-size: 26px; font-weight: 300; color: var(--pn-num);
  letter-spacing: -.5px; font-variant-numeric: tabular-nums; margin-top: 4px; }
.hm-kpi2 .s { font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; }
.hm-kpi2.bom { background: #f2f9f3; } .hm-kpi2.bom .v { color: #1c7c3d; }
.hm-kpi2.ruim .v { color: var(--erro); }
.hm-margem-tab { width: 100%; border-collapse: collapse; }
.hm-margem-tab th { text-align: left; padding: 8px 18px; font-size: 11px;
  text-transform: uppercase; letter-spacing: .3px; color: var(--texto-suave);
  background: #fafbfb; border-top: 1px solid #eef1f3; border-bottom: 1.5px solid #e2e6e9; }
.hm-margem-tab td { padding: 8px 18px; border-bottom: 1px solid #f0f2f3; font-size: 13.5px; }
.hm-margem-tab td.num, .hm-margem-tab th.num { text-align: right; white-space: nowrap; }
.hm-nota { padding: 10px 18px 14px; font-size: 12px; color: var(--texto-suave); line-height: 1.6; }
.hm-limiar { border-bottom: 1px dashed #9fb0ba; cursor: pointer; white-space: nowrap; }
.hm-limiar input { width: 70px; padding: 2px 6px; font-size: 12px;
  border: 1px solid var(--borda); border-radius: 5px; }
.hm-refresh { width: 26px; height: 26px; border: 1px solid var(--borda); border-radius: 7px;
  background: #fff; cursor: pointer; display: inline-flex; align-items: center;
  justify-content: center; color: var(--texto-suave); padding: 0; }
.hm-refresh:hover { color: var(--azul); border-color: var(--azul); }

/* ------------------------------------------------------------
   v1.176 — período escrito nos filtros de data (listas e relatórios)
   ------------------------------------------------------------ */
.ajuda-periodo { width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--borda);
  background: #fff; color: var(--texto-suave); font-size: 12px; font-weight: 700;
  cursor: pointer; line-height: 1; padding: 0; flex: 0 0 auto; }
.ajuda-periodo:hover { border-color: var(--azul); color: var(--azul); }
.balao-periodo { position: fixed; z-index: 320; width: 330px; max-width: 92vw;
  background: #fff; border: 1px solid var(--borda); border-radius: 10px;
  padding: 12px 14px; box-shadow: 0 8px 30px rgba(0,0,0,.14); font-size: 13px; }
.balao-periodo .tit { font-size: 12px; font-weight: 700; color: var(--texto-suave);
  letter-spacing: .4px; margin-bottom: 6px; }
.balao-periodo table { width: 100%; border-collapse: collapse; font-size: 12px; }
.balao-periodo td { padding: 4px 6px; border-bottom: 1px solid var(--fundo); vertical-align: top; }
.balao-periodo td:last-child { color: var(--texto-suave); }
.flt-data { display: inline-flex; flex-direction: column; gap: 4px; }
.flt-data-linha { display: inline-flex; align-items: center; gap: 6px; }
.flt-escrever { display: flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--texto-suave); font-weight: 400; cursor: pointer; }
.flt-escrever input { width: auto; margin: 0; }
.flt-periodo { text-transform: uppercase; }
.flt-periodo::placeholder { text-transform: none; }
.periodo-eco { font-size: 11px; color: var(--texto-suave); white-space: nowrap; }


/* ------------------------------------------------------------
   v1.177 — velocímetro e rosca do Painel (estilo Lightning)
   ------------------------------------------------------------ */
.pn-gauge-num { text-align: center; font-size: 30px; font-weight: 300;
  letter-spacing: -.5px; font-variant-numeric: tabular-nums; margin-top: 2px; }
.pn-gauge-sub { text-align: center; font-size: 11.5px; color: var(--texto-suave); }
.pn-rosca-caixa { display: flex; align-items: center; justify-content: center;
  gap: 22px; flex-wrap: wrap; }
.pn-rosca-leg { font-size: 12.5px; line-height: 2; }
.pn-rosca-leg i { width: 11px; height: 11px; border-radius: 3px;
  display: inline-block; margin-right: 7px; vertical-align: -1px; }

/* ============================================================
   v1.241 — PLANO DE AÇÃO (5W2H)
   Três peças, e só. O resto da tela é o que já existia.
   ============================================================ */

/* a barra de andamento na lista de planos: a cor é a leitura de longe,
   o número é a leitura de perto */
.prg-lista { display: inline-flex; align-items: center; gap: 8px; min-width: 132px; width: 100%; }
.prg-lista .trilho { flex: 1; height: 8px; min-width: 60px; background: #EDEDEB;
  border-radius: 5px; overflow: hidden; }
.prg-lista .fill { display: block; height: 100%; border-radius: 5px; min-width: 2px; }
.prg-lista b { font-size: 12.5px; color: var(--azul); font-variant-numeric: tabular-nums;
  width: 40px; text-align: right; }

/* o círculo de concluir a ação, na tabela do plano — mesmo desenho do
   checkbox redondo das tarefas, que a pessoa já conhece */
.cb-acao { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #C7D2D8;
  background: #fff; cursor: pointer; font-size: 12px; font-weight: 800; line-height: 1;
  color: #0F2A08; padding: 0; display: flex; align-items: center; justify-content: center; }
.cb-acao:hover { border-color: var(--verde-escuro); color: var(--verde-escuro); }
.cb-acao.on { background: var(--verde); border-color: var(--verde); }
.cb-acao.late { border-color: var(--erro); }

/* o alternador Planos | Ações também é link, não só botão */
a.obj-aba { text-decoration: none; display: inline-block; }

/* ============================================================
   v1.243 — aba Documentos (modelos e cláusulas do contrato)
   ============================================================ */
.g-doc { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .g-doc { grid-template-columns: 1fr; } }
.dc-modelo { padding: 12px 16px; border-bottom: 1px solid #F0F0EF; cursor: pointer; }
/* v1.633 — a linha do modelo acende ao passar o mouse. Vale aqui e na
   busca do "Gerar documento": as duas listam a mesma coisa, e linha
   clicável que não reage parece texto. */
.dc-modelo:hover { background: #F7FAFB; }
/* a lista da busca, dentro da janela. A moldura é dela, não da linha —
   e o teto de altura existe para a janela não crescer com 20 modelos. */
.doc-escolha { border: 1px solid var(--borda); border-radius: 8px; overflow: hidden;
  max-height: 320px; overflow-y: auto; background: #fff; }
.doc-escolha .dc-modelo:last-child { border-bottom: 0; }
.doc-trocar { padding: 5px 12px; font-size: 12.5px; }
.dc-modelo.on { background: #E7F0F6; box-shadow: inset 3px 0 0 var(--azul); }
.dc-modelo b { display: block; font-size: 14px; }
.dc-modelo small { color: var(--texto-suave); font-size: 12px; }
.dc-cl { display: flex; gap: 10px; padding: 10px 16px; border-bottom: 1px solid #F0F0EF;
  align-items: center; }
.dc-cl.inativa { opacity: .5; }
.dc-cl .num { flex: 0 0 42px; text-align: center; background: #E7F0F6; color: var(--azul);
  border-radius: 7px; font-size: 12.5px; font-weight: 700; padding: 5px 0; }
.dc-cl-tit { min-width: 0; }
.dc-cl-tit b { font-size: 14px; }
.dc-cl-tit small { display: block; color: var(--texto-suave); font-size: 12px; margin-top: 1px; }
.dc-cl-acoes { margin-left: auto; display: flex; gap: 4px; flex: 0 0 auto; }
.dc-cl-acoes button { background: #fff; border: 1px solid var(--borda); border-radius: 6px;
  width: 28px; height: 28px; font-size: 13px; color: var(--azul); cursor: pointer; }
.dc-cl-acoes button:hover { background: #EDF3F6; }
.dc-editor-barra { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.dc-editor-barra select { border: 1px solid var(--borda); border-radius: 20px;
  padding: 6px 12px; font-size: 12.5px; color: var(--azul); background: #fff;
  font-family: inherit; max-width: 100%; }

/* ============================================================
   v1.270 — FICHA DO CONTRATO "COCKPIT" (mockup aprovado em 14/08/2026)
   Prefixo fcc- (ficha do contrato · cockpit). Nada aqui mexe no que
   já existia: são só classes novas + a variação .agora da faixa de
   chips e as larguras de seção (metade/quarto) da coluna principal.
   ============================================================ */

/* A faixa de chips vira caixas na ficha do contrato (.chips.agora).
   O chip ganha uma linha de detalhe (.d) e duas cores de estado. */
.chips.agora { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px; border-top: 0; padding-top: 2px; }
.chips.agora .chip { border: 1px solid var(--borda); border-radius: 10px;
  padding: 10px 13px; margin: 0; background: #FBFBFA; }
.chips.agora .chip .v { font-size: 15.5px; font-weight: 800; color: var(--azul); }
.chips.agora .chip .d { display: block; font-size: 11.5px; color: var(--texto-suave);
  margin-top: 2px; line-height: 1.4; }
.chips.agora .chip.ok { background: #F5F9F3; border-color: #D8E8CF; }
.chips.agora .chip.ok .v { color: var(--verde-escuro); }
.chips.agora .chip.late { background: #FDF3F2; border-color: #F2C9C9; }
.chips.agora .chip.late .v { color: var(--erro); }
/* v1.448 — o corte desceu de 1100 para 920: com o zoom do navegador o
   viewport fica < 1100 mesmo em monitor largo, e as 4 caixas viravam
   2×2. Pedido de 30/08: uma linha só. */
@media (max-width: 920px) { .chips.agora { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .chips.agora { grid-template-columns: 1fr; } }

/* Quem é quem — imóvel, inquilino e proprietário no destaque */
.fcc-partes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 10px; margin-top: 14px; }
.fcc-parte { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 12px;
  display: flex; align-items: center; gap: 10px; background: #FBFBFA; min-width: 0; }
.fcc-parte .ico { width: 34px; height: 34px; border-radius: 8px; background: #E7F0F6;
  display: flex; align-items: center; justify-content: center; font-size: 16px; flex: 0 0 auto; }
.fcc-parte .r { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--texto-suave); font-weight: 700; display: block; }
.fcc-parte .v { font-size: 13.5px; font-weight: 600; color: var(--azul); line-height: 1.25;
  word-break: break-word; }
/* v1.533 — LINK PARA OUTRO REGISTRO É AZUL DE LINK, NÃO AZUL DE TEXTO.
   Estes três nomes (Imóvel, Inquilino, Proprietário) sempre foram <a>,
   mas pintados no navy do texto comum: só o cursor revelava que eram
   clicáveis. Passam a usar --link, a mesma cor de "ver imóvel" logo
   acima e da migalha de pão — que é como o Salesforce marca campo de
   pesquisa. Vale para a ficha do contrato E a do aluguel: as duas
   montam o cartão com esta classe. */
.fcc-parte .v a { color: var(--link); text-decoration: none; }
.fcc-parte .v a:hover { text-decoration: underline; }
.fcc-parte .sub2 { font-size: 11.5px; color: var(--texto-suave); }
.fcc-parte .zap { margin-left: auto; flex: 0 0 auto; font-size: 12px; text-decoration: none;
  border: 1px solid var(--borda); border-radius: 6px; padding: 4px 8px; background: #fff;
  color: var(--azul); }
.fcc-parte .zap:hover { background: var(--fundo); }
@media (max-width: 900px) { .fcc-partes { grid-template-columns: 1fr; } }

/* O fluxo do dinheiro — três caixas com setas */
.fcc-fluxo { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 8px;
  align-items: stretch; }
.fcc-caixa { border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px;
  background: #FBFBFA; min-width: 0; }
.fcc-caixa .r { font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--texto-suave); font-weight: 700; }
.fcc-caixa .v { font-size: 20px; font-weight: 800; color: var(--azul); margin-top: 3px;
  white-space: nowrap; }
.fcc-caixa .v small { font-size: 12px; font-weight: 600; color: var(--texto-suave); }
.fcc-caixa .d { font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; line-height: 1.45; }
.fcc-caixa.meio { background: #F5F9F3; border-color: #D8E8CF; }
.fcc-caixa.meio .v { color: var(--verde-escuro); }
.fcc-seta { display: flex; align-items: center; color: #B9C2C9; font-size: 18px; font-weight: 700; }
.fcc-resto { margin-top: 10px; font-size: 12px; color: var(--texto-suave); line-height: 1.55;
  padding: 9px 12px; background: #F8F8F7; border-radius: 8px; }
.fcc-quitada { margin-top: 12px; padding: 10px 12px; background: #F5F9F3; border-radius: 8px;
  font-size: 12.5px; }
@media (max-width: 900px) { .fcc-fluxo { grid-template-columns: 1fr; } .fcc-seta { display: none; } }

/* Pede atenção — a lista de prazos com a ação do lado */
.fcc-radar { list-style: none; margin: 0; padding: 0; }
.fcc-radar li { display: flex; align-items: center; gap: 10px; padding: 11px 16px;
  border-top: 1px solid var(--borda); }
.fcc-radar li:first-child { border-top: 0; }
.fcc-radar .ico { width: 30px; height: 30px; border-radius: 8px; background: #F8F8F7;
  display: flex; align-items: center; justify-content: center; font-size: 14px; flex: 0 0 auto; }
.fcc-radar b { font-size: 13px; color: var(--texto); display: block; }
.fcc-radar .q { font-size: 11.5px; color: var(--texto-suave); }
.fcc-radar .lado { margin-left: auto; text-align: right; display: flex; flex-direction: column;
  gap: 4px; align-items: flex-end; flex: 0 0 auto; }
.fcc-radar .lado .btn { padding: 4px 10px; font-size: 11.5px; }
/* v1.385 — a linha que leva ao cartão que a resolve (ver
   irParaCartaoDaFicha). Só quem tem destino vira clicável. */
.fcc-radar li.fcc-ir { cursor: pointer; }
.fcc-radar li.fcc-ir:hover { background: #F7FAFC; }
.cartao.fcc-destacado { animation: fcc-destaque 1.8s ease-out; }
@keyframes fcc-destaque {
  0%   { box-shadow: 0 0 0 3px rgba(2, 48, 71, .35); }
  100% { box-shadow: 0 0 0 3px rgba(2, 48, 71, 0); }
}
.fcc-radar-nota { font-size: 11.5px; color: var(--texto-suave); margin: 0 16px 12px; }
.fcc-radar-vazio { padding: 18px 16px; font-size: 13px; color: var(--verde-escuro); }
/* v1.310 — o que está além da régua: fica visível, mas sem contador,
   sem botão e sem cor de alerta. Não é aviso, é lembrete. */
.fcc-radar-longe { font-size: 11.5px; color: var(--texto-suave); background: #FBFBFA;
  border-top: 1px solid var(--borda); padding: 10px 16px; }
.fcc-radar-longe b { color: var(--texto); font-weight: 600; }

/* Seções de campos com largura escolhida no editor de layout:
   a coluna principal vira uma grade de 4 trilhas; cartão comum ocupa a
   linha inteira, seção "metade" ocupa 2 trilhas, "um quarto" ocupa 1. */
.g70 > .col-esq { display: grid; grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 0 14px; align-content: start; }
.g70 > .col-esq > * { grid-column: 1 / -1; min-width: 0; }
.g70 > .col-esq > .cartao.c-metade { grid-column: span 2; }
.g70 > .col-esq > .cartao.c-quarto { grid-column: span 1; }
/* nas seções estreitas os campos ficam mais juntos, como no mockup */
.cartao.c-quarto .campos-ficha, .cartao.c-metade .campos-ficha { gap: 8px 16px; }
@media (max-width: 920px) {   /* v1.448 — era 1100; mesmo motivo dos chips */
  .g70 > .col-esq > .cartao.c-quarto { grid-column: span 2; }
}
@media (max-width: 700px) {
  .g70 > .col-esq > .cartao.c-metade,
  .g70 > .col-esq > .cartao.c-quarto { grid-column: 1 / -1; }
}

/* v1.272 — as duas pontas do mês lado a lado, dentro do cartão
   "O dinheiro deste mês" da parcela (no cartão "O mês" continuam
   empilhadas, como sempre foram) */
.fcc-lados { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; margin-top: 14px; }
.fcc-lados .cp-lado + .cp-lado { margin-top: 0; padding-top: 0; border-top: 0; }
@media (max-width: 900px) {
  .fcc-lados { grid-template-columns: 1fr; }
  .fcc-lados .cp-lado + .cp-lado { margin-top: 20px; padding-top: 18px;
    border-top: 1px solid var(--borda); }
}

/* ============================================================
   v1.284 — A CONFERÊNCIA DA FICHA
   Prefixo `fic-` de propósito: `.conf` já existe escopada em
   `.task-row`, e `.seg-item` já existe. Nome curto e genérico numa
   folha de 144 KB é colisão esperando acontecer.
   ============================================================ */
.fic-alvo { padding: 11px 14px; background: #EDF3F6; border-radius: 8px;
            font-size: 13.5px; margin-bottom: 12px; }
.fic-alvo.aviso { background: #FFF8EC; }

table.fic-tabela { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.fic-tabela th { background: #fff; color: var(--texto-suave); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .07em; font-weight: 600;
  padding: 9px 10px; border-bottom: 1px solid var(--borda); text-align: left; }
table.fic-tabela td { padding: 9px 10px; border-bottom: 1px solid #F5F5F4; vertical-align: middle; }
table.fic-tabela td.fic-campo { color: var(--texto-suave); width: 22%; }
/* amarelo = diverge do cadastro, olhe antes de aceitar;
   verde clarinho = campo vazio no CRM, é ganho puro */
table.fic-tabela tr.fic-decidir { background: #FFFDF7; }
table.fic-tabela tr.fic-aceita  { background: #FAFDF8; }
.fic-igual { font-size: 12px; color: #9AA7AE; }

.fic-seg { display: inline-flex; border: 1px solid var(--borda); border-radius: 8px;
           overflow: hidden; background: #fff; }
.fic-seg button { border: 0; background: #fff; font-family: inherit; font-size: 12.5px;
  padding: 6px 12px; color: var(--texto-suave); cursor: pointer;
  border-right: 1px solid var(--borda); white-space: nowrap; }
.fic-seg button:last-child { border-right: 0; }
.fic-seg button:hover { background: #F5F9FB; color: var(--texto); }
.fic-seg button.on { background: var(--azul); color: #fff; font-weight: 600; }
.fic-seg button.on.verde { background: var(--verde-escuro); }

.fic-pe { display: flex; align-items: center; gap: 10px; padding: 13px 2px 2px;
          margin-top: 10px; border-top: 1px solid var(--borda);
          font-size: 13px; color: var(--texto-suave); flex-wrap: wrap; }
.fic-pe b { color: var(--texto); }
.fic-pe .dir { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* o formulário como foi preenchido — duas colunas, rótulo miúdo em cima */
/* v1.287 — o respiro que faltava. O <h2> do cartão sempre teve
   padding 12px 16px; a grade das respostas nascia sem nenhum, e o texto
   encostava na borda. Agora acompanha o cabeçalho. */
.fic-grade { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px;
  padding: 16px 16px 6px; }
@media (max-width: 700px) { .fic-grade { grid-template-columns: 1fr; } }
.fic-grade > div { border-bottom: 1px solid #F5F5F4; padding-bottom: 7px; }
.fic-rot { display: block; font-size: 10.5px; text-transform: uppercase;
           letter-spacing: .06em; color: var(--texto-suave); }
.fic-val { display: block; font-size: 13.5px; color: var(--texto); word-break: break-word; }

/* ============================================================
   v1.286 — O NÚMERO DO QUE ESTÁ ESPERANDO
   Vermelho e pequeno: é fila de trabalho, não decoração. Some
   sozinho quando o número é zero (o JS nem cria o elemento).
   ============================================================ */
.pino-fila { display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px;
  background: var(--erro); color: #fff; font-size: 11px; font-weight: 700;
  line-height: 1; border-radius: 999px; vertical-align: 1px; }
/* no lançador o item é maior, então a bolinha vai para a ponta */
.lanc-item .pino-fila { margin-left: auto; align-self: center; }

/* =====================================================================
   v1.313 — RASTREAR POR CAMPO e PLANOS E LIMITES (js/admin.js)
   A coluna nova do Gerenciador de objetos e o cartão de planos, que só
   o superadmin enxerga. Os dois vivem na Administração e usam a mesma
   tabela do resto da tela; o que entra aqui é só o que é próprio.
   ===================================================================== */
th.rastro, td.rastro { width: 1%; white-space: nowrap; text-align: center; }
td.rastro input[type=checkbox] { width: 16px; height: 16px; accent-color: #0B5CAB; }
td.rastro input[type=checkbox]:disabled { cursor: not-allowed; }
/* a linha rastreada se distingue sem depender só da caixinha */
tr:has(td.rastro input:checked) td { background: #F7FBFF; }
tr:has(td.rastro input:checked) td.rastro { box-shadow: inset 3px 0 0 #0B5CAB; }

.selo-super { font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: #F3E9F7; color: #6B3E85; padding: 2px 8px; border-radius: 20px; margin-left: 8px; }

table.pl th.n, table.pl td.n { text-align: right; white-space: nowrap; }
table.pl td.n input { width: 82px; padding: 5px 8px; border: 1px solid var(--borda);
  border-radius: 7px; font-family: inherit; font-size: 13px; text-align: right; color: var(--texto); }
table.pl tr.plano-atual td { background: #F7FBFF; }
table.pl tr.plano-atual td:first-child { box-shadow: inset 3px 0 0 #0B5CAB; }

/* =====================================================================
   v1.314 — BOTÃO DESLIGADO, e o porquê ao lado
   O "Aplicar reajuste" fica desligado até o aniversário do contrato.
   Desligado tem de PARECER desligado — sem isto ele só não responde ao
   clique, o que lê como defeito. A regra é global de propósito: todo
   .btn:disabled do CRM passa a se comportar igual.
   ===================================================================== */
.btn:disabled, .btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { background: #fff; border-color: var(--borda); }

/* a data ao lado do botão: quem olha entende sem precisar do mouse */
.rj-quando { font-size: 11.5px; color: var(--texto-suave); margin-left: 8px;
  font-weight: 400; white-space: nowrap; }

/* =====================================================================
   v1.317 — A FICHA NO CELULAR
   O Compact Layout: uma lista curta de campos aparece primeiro, e as
   seções saem da frente até alguém pedir "Ver todos os campos". Quem
   decide é o CSS — o bloco é desenhado sempre, para a ficha não sair
   errada de quem gira o telefone.
   ===================================================================== */
.cel-resumo { display: none; }

@media (max-width: 560px) {
  .cel-resumo { display: block; background: #fff; border: 1px solid var(--borda);
    border-radius: 10px; margin-top: 10px; }
  .cel-linha { display: flex; justify-content: space-between; gap: 12px;
    padding: 9px 14px; border-top: 1px solid #F1F1EF; font-size: 13.5px; }
  .cel-resumo .cel-linha:first-child { border-top: 0; }
  .cel-linha .r { color: var(--texto-suave); }
  .cel-linha .v { font-weight: 600; color: var(--texto); text-align: right;
    min-width: 0; overflow-wrap: anywhere; }
  .cel-ver { display: block; text-align: center; font-size: 13px; color: var(--azul);
    padding: 11px; border-top: 1px solid #F1F1EF; text-decoration: none; font-weight: 600; }

  /* as SEÇÕES de campos saem da frente; os cartões (Aluguéis, Reajustes,
     Histórico) continuam, porque é para eles que se abre a ficha no
     celular. A seção é reconhecida pelo id que o próprio layout dá. */
  body:not(.ver-tudo) [id^="sec-"] { display: none; }

  /* a faixa de indicadores ROLA em vez de quebrar em cinco linhas */
  .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; }
  .chips::-webkit-scrollbar { display: none; }
  .chips .chip { flex: 0 0 auto; }
}

/* a prévia do editor de layout, na caixa "No celular" */
.cel-previa .cel-linha { display: flex; justify-content: space-between; gap: 12px;
  padding: 6px 10px; border-top: 1px solid #F1F1EF; font-size: 12.5px; }
.cel-previa .cel-linha:first-child { border-top: 0; }
.cel-previa .r { color: var(--texto-suave); }
.cel-previa .v { color: #B9C3C9; }

/* =====================================================================
   v1.319 — CHECK-LIST DA LOCAÇÃO E DO ENCERRAMENTO (js/ficha.js)
   Lista de conferência, não fila de trabalho: por isso é cartão da
   ficha e não tarefa. A barra no topo é o "quanto falta" que se lê sem
   contar linha.
   ===================================================================== */
.ck-barra { height: 6px; background: #EDF1F3; }
.ck-barra > i { display: block; height: 100%; background: #3E7A2E;
  transition: width .25s ease; }

.ck-l { display: flex; align-items: flex-start; gap: 10px; padding: 9px 16px;
  border-top: 1px solid #F1F1EF; font-size: 13.5px; }
.ck-l:first-of-type { border-top: 0; }
.ck-l input[type=checkbox] { width: 16px; height: 16px; margin-top: 1px;
  accent-color: #0B5CAB; flex: 0 0 auto; }
.ck-l input[type=checkbox]:disabled { cursor: not-allowed; }
.ck-l .t { flex: 1; min-width: 0; }
.ck-l .quem { display: block; font-size: 11.5px; color: var(--texto-suave); margin-top: 1px; }
.ck-l.feito .t { color: var(--texto-suave); }

/* o obrigatório pendente é o único que muda de cor: é ele que aparece
   no "Pede atenção", e a ficha inteira tem de contar a mesma história */
.ck-l.pendente-obrig { background: #FFFBF3; }
.ck-l.pendente-obrig .t { font-weight: 600; color: #8A6A1F; }

.ck-selo { flex: 0 0 auto; font-size: 10px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 20px; margin-top: 1px; }
.ck-selo.auto { background: #E4EFFA; color: #0B5CAB; }
.ck-selo.obrig { background: #FBF0D9; color: #8A6A1F; }

@media (max-width: 560px) {
  .ck-l { padding: 9px 12px; }
  .ck-selo { display: none; }   /* no celular, a cor da linha já diz */
}

/* =====================================================================
   v1.630 — CARTÃO DISTRATO (js/ficha.js, blocoDistrato)
   Blocos empilhados dentro de um cartão só: cada um é um assunto da
   saída (multa, vistoria, acerto, check-list). O filete da esquerda é
   o semáforo — âmbar quando pede decisão, verde quando está resolvido.
   Prefixo `dst-` porque `.destaque` já é o cabeçalho da ficha.
   ===================================================================== */
.dst-bloco { border: 1px solid var(--borda); border-left: 3px solid var(--alerta);
  border-radius: 8px; padding: 14px 16px; margin: 0 0 14px; background: #fff; }
.dst-bloco.ok { border-left-color: var(--verde); }
.dst-bloco .rg-conta { margin-top: 2px; }
.dst-bloco .mini { margin: 0; }
.dst-tit { font-size: 13px; font-weight: 700; color: var(--azul);
  text-transform: uppercase; letter-spacing: .04em; margin-bottom: 10px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.dst-tit .cnt { text-transform: none; letter-spacing: 0; }
.dst-porque { font-size: 12.5px; line-height: 1.7; color: var(--texto-suave);
  margin: 10px 0 0; }
/* o lápis das datas: discreto, mas VISÍVEL sem passar o mouse — o
   .lapis-campo da ficha nasce com opacity 0 e só acende no hover da
   linha dele, que aqui não existe */
/* v1.634 — o texto das instruções, dentro da janela. Papel branco,
   quebras preservadas e rolagem: é para LER antes de copiar. */
.dst-texto { background: #fff; border: 1px solid var(--borda); border-radius: 8px;
  padding: 12px 14px; font-size: 13px; line-height: 1.7; white-space: pre-line;
  max-height: 340px; overflow-y: auto; }
.dst-lapis { background: none; border: 0; cursor: pointer; font-size: 12px;
  color: var(--texto-suave); padding: 0 3px; border-radius: 4px; line-height: 1;
  opacity: .6; }
.dst-lapis:hover { opacity: 1; color: var(--azul); background: #EDF3F6; }
.dst-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.dst-acoes.dst-pe { margin-top: 2px; }
/* o bloco do check-list leva ao cartão dele — o mesmo clique do radar */
.dst-bloco.fcc-ir { cursor: pointer; }
.dst-bloco.fcc-ir:hover { background: #F7FAFB; }
.dst-bloco .ck-barra { border-radius: 4px; overflow: hidden; }
@media (max-width: 560px) {
  .dst-bloco { padding: 12px 13px; }
}

/* v1.320 — o cadastro do check-list, na Administração */
input.ck-texto { width: 100%; padding: 5px 8px; border: 1px solid transparent;
  border-radius: 7px; font-family: inherit; font-size: 13px; color: var(--texto);
  background: transparent; }
input.ck-texto:hover { border-color: var(--borda); background: #fff; }
input.ck-texto:focus { border-color: var(--azul); background: #fff; outline: none; }
#p-checklist h2 .dir { margin-left: auto; display: flex; gap: 8px; align-items: center; }
#p-checklist h2 select { padding: 5px 10px; border: 1px solid var(--borda); border-radius: 8px;
  font-family: inherit; font-size: 13px; background: #fff; color: var(--texto); }

/* ============================================================
   v1.333 — ORÇAMENTO DA LOCAÇÃO (cartão da ficha do lead)

   O cartão é uma tela dentro do cartão: formulário à esquerda,
   resultado à direita. Por isso ele NÃO usa `.corpo` — o padding
   vive nas duas metades, para a divisória ir de ponta a ponta.
   ============================================================ */
.orc-grade { display: grid; grid-template-columns: 390px 1fr; }
@media (max-width: 1120px) { .orc-grade { grid-template-columns: 1fr; } }
.orc-esq { padding: 16px; border-right: 1px solid var(--borda); }
@media (max-width: 1120px) { .orc-esq { border-right: 0; border-bottom: 1px solid var(--borda); } }
.orc-dir { padding: 16px; background: #FBFBFA; }
.orc-versao { font-family: inherit; font-size: 12.5px; padding: 5px 9px;
  border: 1px solid var(--borda); border-radius: 20px; background: #fff; color: var(--texto); }

.orc-bloco { border: 1px solid var(--borda); border-radius: 10px; background: #fff;
  padding: 12px 13px; margin-bottom: 12px; }
.orc-bloco > h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-suave); margin: 0 0 10px; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.orc-bloco > h3 .de-onde { margin-left: auto; text-transform: none; letter-spacing: 0; font-weight: 400;
  font-size: 11px; color: var(--texto-suave); background: var(--fundo); border-radius: 20px; padding: 2px 8px; }
.orc-linha { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.orc-linha.uma { grid-template-columns: 1fr; }
.orc-campo { display: flex; flex-direction: column; gap: 3px; }
.orc-campo label { font-size: 11px; color: var(--texto-suave); font-weight: 600; }
.orc-campo input, .orc-campo select { font-family: inherit; font-size: 13.5px; padding: 7px 9px;
  border: 1px solid var(--borda); border-radius: 7px; background: #fff; color: var(--texto); width: 100%; }
.orc-campo input:focus, .orc-campo select:focus { outline: none; border-color: var(--azul); }
.orc-campo input[readonly] { background: #f2f9f3; }
.orc-radios { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.orc-radios label { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px;
  font-weight: 500; border: 1px solid var(--borda); border-radius: 7px; padding: 5px 9px;
  cursor: pointer; background: #fff; color: var(--texto); }
.orc-radios label.on { border-color: var(--azul); background: #E7F0F6; color: var(--azul); font-weight: 600; }
.orc-radios input { accent-color: var(--azul); margin: 0; }
.orc-check { display: flex; align-items: flex-start; gap: 7px; font-size: 12.5px; padding: 4px 0; cursor: pointer; }
.orc-check input { margin-top: 2px; accent-color: var(--azul); }
.orc-corte { font-size: 11.5px; color: var(--texto-suave); line-height: 1.45; margin-top: 6px;
  border-left: 2px solid var(--borda); padding-left: 8px; }
.orc-corte b { color: var(--texto); }
.orc-contas { display: grid; grid-template-columns: 1fr auto; gap: 6px 8px; align-items: center; }
.orc-contas span { font-size: 12.5px; }
.orc-contas select { font-family: inherit; font-size: 12px; padding: 4px 6px;
  border: 1px solid var(--borda); border-radius: 6px; background: #fff; color: var(--texto); }

/* os três números */
.orc-tit { font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-suave); font-weight: 700; margin: 0 0 8px; }
.orc-tiles { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--borda);
  border-radius: 10px; overflow: hidden; background: #fff; margin-bottom: 16px; }
@media (max-width: 760px) { .orc-tiles { grid-template-columns: 1fr; } }
.orc-tile { padding: 13px 15px 12px; border-right: 1px solid var(--borda); }
.orc-tile:last-child { border-right: 0; }
.orc-tile .r { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--texto-suave); font-weight: 700; display: block; }
.orc-tile .v { font-size: 30px; font-weight: 300; color: var(--pn-num); letter-spacing: -1px;
  font-variant-numeric: tabular-nums; line-height: 1.2; display: block; }
.orc-tile .s { font-size: 11.5px; color: var(--texto-suave); display: block; }
.orc-tile.chaves { background: #F7FBF6; }
.orc-tile.chaves .v { color: var(--verde-escuro); }

/* a linha do tempo */
.orc-tempo { display: flex; overflow-x: auto; padding: 4px 0 2px; margin-bottom: 16px; }
.orc-parada { flex: 1 0 168px; position: relative; padding: 22px 12px 0 0; }
.orc-parada::before { content: ''; position: absolute; left: 0; right: 0; top: 8px;
  height: 2px; background: var(--borda); }
.orc-parada:first-child::before { left: 6px; }
.orc-parada:last-child::before { right: calc(100% - 6px); }
.orc-parada .bola { position: absolute; left: 0; top: 2px; width: 14px; height: 14px;
  border-radius: 50%; background: #fff; border: 3px solid var(--borda); }
.orc-parada.forte .bola { border-color: var(--azul); }
.orc-parada.chaves .bola { border-color: var(--verde); }
.orc-parada.fim .bola { border-color: var(--verde-escuro); background: var(--verde-escuro); }
.orc-parada .q { font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--texto-suave); font-weight: 700; }
.orc-parada .d { font-size: 14.5px; font-weight: 700; color: var(--azul); line-height: 1.25; }
.orc-parada .t { font-size: 19px; font-weight: 600; color: var(--pn-num);
  font-variant-numeric: tabular-nums; letter-spacing: -.5px; }
.orc-parada ul { margin: 5px 0 0; padding: 0; list-style: none; }
.orc-parada li { font-size: 11.5px; color: var(--texto-suave); line-height: 1.5; }
.orc-parada li b { color: var(--texto); font-weight: 600; }

/* o detalhe de cada pagamento */
.orc-parcela { border: 1px solid var(--borda); border-radius: 10px; background: #fff;
  padding: 11px 13px; margin-bottom: 8px; display: grid; grid-template-columns: 1fr auto;
  align-items: start; gap: 10px; }
.orc-parcela.chaves { border-color: #CFE3D6; background: #F7FBF6; }
.orc-parcela .quando { font-size: 13.5px; font-weight: 700; color: var(--azul); }
.orc-parcela .quando .sub { display: block; font-size: 11.5px; font-weight: 500;
  color: var(--texto-suave); margin-top: 1px; }
.orc-parcela .itens { margin: 7px 0 0; padding: 0; list-style: none; }
.orc-parcela .itens li { font-size: 12.5px; color: var(--texto); padding: 2px 0;
  display: grid; grid-template-columns: 1fr auto; gap: 10px; }
.orc-parcela .itens li span:last-child { font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.orc-parcela .total { font-size: 21px; font-weight: 600; color: var(--pn-num); letter-spacing: -.5px;
  font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.orc-parcela .total .r { display: block; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--texto-suave); font-weight: 700; }
.orc-repete { font-size: 12px; color: var(--texto-suave); border: 1px dashed var(--borda);
  border-radius: 10px; padding: 9px 13px; margin-bottom: 8px; display: grid;
  grid-template-columns: 1fr auto; gap: 10px; align-items: center; }
.orc-repete b { color: var(--texto); }
.orc-repete .v { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--pn-num); font-size: 15px; }

/* o comparador de datas */
.orc-comp { border: 1px solid var(--borda); border-radius: 10px; background: #fff;
  margin-bottom: 16px; overflow: hidden; }
.orc-comp h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-suave); margin: 0; font-weight: 700; padding: 10px 13px;
  border-bottom: 1px solid var(--borda); display: flex; align-items: center; gap: 8px; }
.orc-comp h3 input[type=date] { font-family: inherit; font-size: 12px; padding: 4px 7px;
  border: 1px solid var(--borda); border-radius: 6px; }
.orc-comp h3 .btn { padding: 5px 11px; font-size: 12px; }
.orc-comp table { width: 100%; border-collapse: collapse; font-size: 13px; }
.orc-comp th, .orc-comp td { padding: 9px 13px; border-bottom: 1px solid #F0F0EF;
  text-align: right; font-variant-numeric: tabular-nums; }
.orc-comp th:first-child, .orc-comp td:first-child { text-align: left; font-variant-numeric: normal; }
.orc-comp thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--texto-suave); background: #FBFBFA; }
.orc-comp tbody tr:last-child td { border-bottom: 0; }
.orc-comp .dif.mais { color: var(--erro); font-weight: 600; }
.orc-comp .dif.menos { color: var(--ok); font-weight: 600; }
.orc-comp .ganha { background: #F7FBF6; }
.orc-comp td small { display: block; color: var(--texto-suave); font-size: 11px; font-variant-numeric: normal; }
.orc-comp-vazio { padding: 11px 13px; font-size: 12.5px; color: var(--texto-suave); }
.orc-comp-pe { padding: 10px 13px; font-size: 12.5px; color: var(--texto-suave);
  border-top: 1px solid var(--borda); }
.orc-comp-pe .btn { padding: 4px 10px; font-size: 12px; margin-left: 8px; }

/* a mensagem */
.orc-msg { border: 1px solid var(--borda); border-radius: 10px; background: #fff; margin-top: 16px; }
.orc-msg h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-suave); margin: 0; font-weight: 700; padding: 9px 13px;
  border-bottom: 1px solid var(--borda); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.orc-abas { display: flex; gap: 4px; }
.orc-abas button { font-family: inherit; font-size: 12px; font-weight: 600; padding: 4px 10px;
  border-radius: 20px; border: 1px solid var(--borda); background: #fff;
  color: var(--texto-suave); cursor: pointer; }
.orc-abas button.on { background: #E7F0F6; border-color: var(--azul); color: var(--azul); }
.orc-dir2 { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.orc-dir2 .btn { padding: 5px 11px; font-size: 12px; }
.orc-msg pre { margin: 0; padding: 13px; font-family: inherit; font-size: 13px;
  line-height: 1.65; white-space: pre-wrap; color: var(--texto); }
.orc-strip { margin: 0 13px 13px; background: #E7F0F6; border: 1px solid #C9DCE8;
  border-radius: 8px; padding: 9px 11px; font-size: 12.5px; color: var(--azul);
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.orc-strip .btn { padding: 4px 10px; font-size: 12px; }
.orc-enviada { font-size: 12px; color: var(--verde-escuro); background: #EBF6E4;
  border-radius: 6px; padding: 5px 9px; margin: 0 13px 13px; display: inline-block; }

.orc-avisos { margin: 12px 0 0; }
.orc-aviso { font-size: 12px; padding: 8px 11px; border-radius: 8px; margin-bottom: 6px;
  background: #FFF8EC; color: #8a5a00; border: 1px solid #F2E2C4; }
.orc-aviso.grave { background: #fdeaea; color: #8f2a1e; border-color: #F2C9C4; }

.orc-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
  padding: 13px 16px; border-top: 1px solid var(--borda); background: #fff; }
.orc-acoes .orc-fim { margin-left: auto; }

/* a faixa do link público da proposta (v1.333) */
.orc-linkfaixa { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 16px; border-top: 1px solid var(--borda); background: #F7FBF6;
  font-size: 12.5px; color: var(--texto-suave); }
.orc-linkfaixa .url { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; color: var(--azul); background: #fff; border: 1px solid var(--borda);
  border-radius: 6px; padding: 5px 9px; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.orc-linkfaixa .obs { color: var(--texto-suave); }
.orc-linkfaixa .btn { padding: 4px 10px; font-size: 12px; }

/* ============================================================
   v1.334 — O BOTÃO DE COPIAR (telefone, e-mail e CPF)

   Só regras NOVAS: nenhuma regra existente foi alterada. O botão é
   `inline-flex` e flui junto com o texto, então campo SEM botão
   continua desenhado exatamente como antes — que é o que faz esta
   mudança valer para 14 fichas sem risco de mexer no layout de
   nenhuma delas.

   Nasce apagado (.42) e acende no hover ou no foco do teclado: um
   ícone por telefone, em cima da cor cheia, viraria ruído. Em tela de
   toque não existe hover, e lá ele fica mais visível — senão seria um
   botão que ninguém acha no celular.
   ============================================================ */
.btn-copia {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; vertical-align: middle;
  border: 0; background: none; padding: 2px; margin: 0 0 0 3px;
  cursor: pointer; line-height: 0; border-radius: 5px;
  color: var(--texto-suave); opacity: .42;
  transition: opacity .12s, color .12s, background .12s;
}
.btn-copia svg { width: 14px; height: 14px; display: block; }
.btn-copia:hover, .btn-copia:focus-visible {
  opacity: 1; color: var(--azul); background: #E7F0F6;
}
.btn-copia:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
.btn-copia.copiou { opacity: 1; color: var(--ok); background: #EBF6E4; }

/* dedo não tem hover: no celular o ícone precisa se ver parado */
@media (hover: none) { .btn-copia { opacity: .7; } }

/* o "copiado", preso ao botão. Some sozinho em 1,3s — um clique não
   merece uma janela de alerta. */
.btn-copia .copia-aviso {
  position: absolute; bottom: calc(100% + 5px); left: 50%; transform: translateX(-50%);
  background: var(--azul); color: #fff; font-size: 10.5px; font-weight: 600;
  line-height: 1; padding: 4px 7px; border-radius: 5px; white-space: nowrap;
  pointer-events: none; opacity: 0; transition: opacity .12s; z-index: 3;
}
.btn-copia.copiou .copia-aviso { opacity: 1; }

/* a linha de telefone/e-mail dentro das tabelas .mini (cartão Pessoas
   do imóvel) — mesmo cinza pequeno que as outras linhas de apoio */
.mini .mini-sub { color: var(--texto-suave); font-size: 12px; margin-top: 2px; }

/* ============================================================
   VERIFICAÇÃO EM DUAS ETAPAS (v1.339)
   Vale para a tela de login (passo 2 e cadastro) e para a janela de
   Minha conta — as duas mostram a mesma coisa, então a peça é uma só.
   ============================================================ */

/* a caixa do login cresce só no cadastro: o QR e as instruções ao lado
   não cabem nos 380px do login normal */
.caixa-login.caixa-larga { max-width: 560px; }

/* o campo dos 6 dígitos. Espaçado e grande porque é digitado olhando
   para o celular, não para a tela — e errar um número aqui custa uma
   janela de 30 segundos */
.cod2 { width: 100%; font-size: 26px; letter-spacing: 10px; text-align: center;
  padding: 12px; border: 1px solid var(--borda); border-radius: 8px;
  font-family: inherit; font-variant-numeric: tabular-nums; }
.cod2:focus { outline: 2px solid var(--azul); outline-offset: -1px; }

.texto-2f { font-size: 13.5px; line-height: 1.6; color: var(--texto);
  text-align: center; margin-bottom: 18px; }
.dica-2f { font-size: 12px; color: var(--texto-suave); text-align: center;
  margin-top: 12px; line-height: 1.5; }

.qr-caixa { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap;
  background: #FAFAF9; border: 1px solid var(--borda); border-radius: 10px; padding: 16px; }
.qr-caixa img { border: 1px solid var(--borda); border-radius: 8px; background: #fff;
  display: block; }
.qr-passos { flex: 1; min-width: 240px; font-size: 13.5px; line-height: 1.6; color: var(--texto); }
.qr-passos ol { margin: 0 0 0 18px; }
.qr-passos li { margin-bottom: 7px; }
.qr-manual { font-size: 12.5px; color: var(--texto-suave); margin-top: 10px; }
.chave-manual { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px;
  background: #F0F1EF; border-radius: 5px; padding: 3px 7px; letter-spacing: 1px;
  display: inline-block; margin-top: 3px; word-break: break-all; }

.aviso-2f { font-size: 12.5px; color: #46535B; background: #F4F8FA;
  border: 1px solid #DCE7EE; border-radius: 8px; padding: 10px 13px;
  line-height: 1.55; margin-top: 14px; text-align: left; }

/* o selo de situação — na janela de Minha conta e na coluna de Usuários */
.selo-2f { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.selo-2f.ativa { background: #E6F4EC; color: var(--ok); }
.selo-2f.falta { background: #FBF0D9; color: #8A6A1F; }

/* =====================================================================
   v1.341 — LIMPEZA DE HISTÓRICO
   Só o rótulo dos passos do formulário; o resto reaproveita .cartao,
   .aviso-fin, .busca e .btn-perigo.
   ===================================================================== */
.lh-passo { font-size: 13px; text-transform: uppercase; letter-spacing: .5px;
  color: #6a7480; margin: 22px 0 8px; font-weight: 700; }

/* =====================================================================
   v1.343 — MENSAGEM AGENDADA
   Os chips de atalho, a bolha da prévia (na janela da ficha), o resumo
   em números e o separador de dia (na aba Mensagens da Administração).
   ===================================================================== */
.ma-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.ma-chip { background:#EEF3F7; border:1px solid #D6E2EB; color:#0A5E8A; border-radius:999px;
  padding:4px 11px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit; }
.ma-chip:hover { background:#E1EDF5; border-color:#B9D3E4; }

/* v1.463 — a TESOURA. Cor diferente de propósito: os outros chips
   inserem um dado, este parte a mensagem em duas. Confundir os dois
   custa uma mensagem picada indo para o cliente. */
.ma-chip-corte { background:#F4EEF7; border-color:#DFD0E7; color:#6B3E86; }
.ma-chip-corte:hover { background:#EBE0F1; border-color:#D0BBDD; }

.ma-bolha-caixa { background:#efeae2; border-radius:12px; padding:14px 12px;
  background-image:radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px);
  background-size:14px 14px; }
.ma-bolha { background:#d9fdd3; margin-left:auto; max-width:88%; width:max-content;
  border-radius:9px 0 9px 9px; padding:7px 10px; box-shadow:0 1px 1px rgba(0,0,0,.12);
  font-size:13.5px; line-height:1.42; color:#111b21; white-space:pre-wrap; }
/* v1.463 — a prévia passou a mostrar UM BALÃO POR PEDAÇO (a tesoura
   ---). Sem esta folga os três se encostam e parecem um bloco só, que
   é justamente o que a tesoura existe para desfazer. */
.ma-bolha + .ma-bolha { margin-top:8px; }

.ma-resumo { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:12px; margin-bottom:16px; }
.ma-num { background:#fff; border:1px solid var(--borda); border-radius:10px;
  padding:13px 16px; box-shadow:0 1px 2px rgba(2,48,71,.06); }
.ma-num b { display:block; font-size:24px; line-height:1.1; color:var(--azul); }
.ma-num span { font-size:11.5px; color:#6a7480; text-transform:uppercase;
  letter-spacing:.4px; font-weight:600; }
.ma-num.alerta b { color:#C0392B; }

.ma-dia { background:#F8F8F7; font-size:11.5px; text-transform:uppercase;
  letter-spacing:.5px; color:#6a7480; font-weight:700; }
.ma-dia td { padding:7px 14px !important; }
.ma-hora-col { font-variant-numeric:tabular-nums; font-weight:600; white-space:nowrap; }
.ma-motivo { color:#C0392B; font-size:12px; display:block; margin-top:3px; }

/* v1.380 — ATALHOS NA CONVERSA: a estrela que escolhe quais modelos viram
   botão na faixa da tela Conversas. Acesa = amarelo cheio; apagada = só o
   contorno cinza, para a coluna não virar um enfeite. Cabem 5 — quem
   conta é o banco, a tela só avisa antes. */
.mm-estrela { background:none; border:none; cursor:pointer; padding:3px;
  color:#B4BEC5; line-height:0; border-radius:6px; }
.mm-estrela:hover { background:#EDF3F6; color:var(--alerta); }
.mm-estrela.on { color:#E0A800; }
.mm-estrela:disabled { cursor:not-allowed; opacity:.45; }
.mm-favorito-campo { display:flex; align-items:flex-start; gap:9px;
  background:#F8FBFD; border:1px solid #DCE6EC; border-radius:8px; padding:11px 13px; }
.mm-favorito-campo input { width:16px; height:16px; margin-top:1px; flex:0 0 auto; }
.mm-favorito-campo label { font-size:13px; font-weight:600; color:var(--texto); cursor:pointer; }
.mm-favorito-campo small { display:block; font-weight:400; color:var(--texto-suave);
  font-size:11.5px; line-height:1.5; margin-top:3px; }
.mm-favorito-campo .cheio { color:var(--alerta); font-weight:700; }

/* v1.621 — ESCOLHER O ATALHO: objeto, campo, inserir. Uma linha só,
   logo abaixo do texto do modelo. Antes a janela listava os atalhos
   numa frase de ajuda e a pessoa digitava — errar uma letra fazia a
   mensagem ser recusada no envio, longe daqui. */
.mm-at-linha { display:flex; gap:8px; align-items:flex-end; margin-top:8px; flex-wrap:wrap; }
.mm-at-campo { display:flex; flex-direction:column; min-width:0; }
.mm-at-campo.obj { flex:0 0 170px; }
.mm-at-campo.cmp { flex:1 1 240px; }
.mm-at-campo label { font-size:11px; font-weight:600; color:var(--texto-suave);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:4px; }
.mm-at-linha .btn { padding:9px 16px; white-space:nowrap; }
.mm-at-exemplo { display:block; font-size:12px; color:var(--texto-suave); margin-top:6px; min-height:17px; }
.mm-at-exemplo b { color:var(--texto); }
.mm-at-aviso { display:none; margin-top:8px; font-size:12.5px; background:#FEF7EC;
  border:1px solid #F6D19E; color:#7A4A00; border-radius:8px; padding:8px 10px; }
.mm-at-aviso.mostrar { display:block; }
@media (max-width:560px) {
  .mm-at-campo.obj, .mm-at-campo.cmp { flex:1 1 100%; }
  .mm-at-linha .btn { width:100%; }
}

/* =====================================================================
   v1.349 — CONVERSAS (as partes que a CENTRAL e a FICHA compartilham:
   o fio de bolhas e o compositor. O layout da central mora na própria
   conversas.html, como a água ensina.)
   ===================================================================== */
.cv-fio { background:#efeae2; padding:14px 16px; overflow-y:auto;
  background-image:radial-gradient(rgba(0,0,0,.035) 1px, transparent 1px);
  background-size:14px 14px; }
.cv-dia { text-align:center; margin:10px 0 12px; }
.cv-dia span { background:#fff; color:#54656f; font-size:11px; padding:4px 11px;
  border-radius:8px; box-shadow:0 1px 1px rgba(0,0,0,.08); }
.cv-msg { max-width:78%; width:max-content; border-radius:9px; padding:7px 10px 5px;
  font-size:13.5px; line-height:1.42; color:#111b21; box-shadow:0 1px 1px rgba(0,0,0,.12);
  margin:0 0 8px; white-space:pre-wrap; word-wrap:break-word; }
.cv-msg .cv-hora { display:block; text-align:right; font-size:10.5px; color:#667781;
  margin-top:3px; }
.cv-msg .cv-autor { font-size:11px; font-weight:700; color:#0A5E8A; display:block; }
.cv-msg.deles { background:#fff; border-top-left-radius:0; }
.cv-msg.nosso { background:#d9fdd3; margin-left:auto; border-top-right-radius:0; }
.cv-msg.falhou { background:#fdeaea; margin-left:auto; border:1px solid #f3c7c7; }

/* v1.454 — FIGURINHA E REAÇÃO (o que vinha caindo no balde "outro")
   A figurinha não usa bolha: o desenho já é a mensagem, como no
   WhatsApp. A reação é a pastilha encostada na mensagem reagida — daí
   o `position:relative` na bolha, e a folga embaixo só quando existe
   pastilha (senão toda mensagem ganharia um vão à toa). */
.cv-msg { position:relative; }
/* v1.455 — a bolha que tem pastilha ABRE ESPAÇO embaixo. Sem isso a
   pastilha caía em cima do horário (numa bolha curta como "Ola" ela
   tapava o 11:52 inteiro — foto do Rodrigo, 31/08). O padding empurra
   a hora para cima; a margem cuida da mensagem seguinte. */
.cv-msg.com-reacao, .cv-figurinha.com-reacao { padding-bottom:18px; margin-bottom:19px; }
.cv-figurinha { position:relative; max-width:78%; width:max-content; margin:0 0 8px; }
.cv-figurinha.nosso { margin-left:auto; }
.cv-figurinha-img { display:block; width:120px; height:120px; object-fit:contain; }
.cv-figurinha .cv-autor { font-size:11px; font-weight:700; color:#0A5E8A; display:block; }
.cv-figurinha .cv-hora { display:block; text-align:right; font-size:10.5px; color:#54656f;
  margin-top:1px; text-shadow:0 1px 2px rgba(255,255,255,.9); }
.cv-reacao { position:absolute; bottom:-10px; background:#fff; border:1px solid #e3e3e0;
  border-radius:12px; padding:1px 5px 2px; font-size:12px; line-height:1.4;
  box-shadow:0 1px 2px rgba(0,0,0,.14); white-space:nowrap; }
.cv-msg.deles .cv-reacao, .cv-figurinha.deles .cv-reacao { left:10px; }
.cv-msg.nosso .cv-reacao, .cv-msg.falhou .cv-reacao,
.cv-figurinha.nosso .cv-reacao { right:10px; }

/* v1.455 — a reação cuja mensagem não está no fio (reagiram numa
   anterior ao CRM): linha do meio, no lugar de sumir. Mesmo desenho da
   tarja do dia, um tom abaixo — é informação de rodapé, não conversa. */
.cv-reacao-linha { text-align:center; margin:2px 0 10px; }
.cv-reacao-linha span { background:rgba(255,255,255,.75); color:#54656f; font-size:11.5px;
  padding:3px 10px; border-radius:9px; box-shadow:0 1px 1px rgba(0,0,0,.06); }
.cv-reacao-linha b { font-size:14px; font-weight:400; }

/* v1.365 — MÍDIA NA BOLHA (fase 2): áudio toca, foto amplia, vídeo
   roda, documento baixa. O HTML nasce em midiaBolhaHtml (base.js). */
.cv-midia-audio { display:flex; align-items:center; gap:8px; min-width:240px; }
.cv-midia-audio audio { width:230px; height:36px; }
.cv-midia-foto { display:block; border-radius:7px; overflow:hidden; max-width:260px; }
.cv-midia-foto img { display:block; width:100%; height:auto; min-height:60px;
  background:rgba(0,0,0,.06); cursor:zoom-in; }
.cv-midia-video { display:block; border-radius:7px; overflow:hidden; max-width:280px; }
.cv-midia-video video { display:block; width:100%; }
.cv-midia-doc { display:flex; align-items:center; gap:10px; background:rgba(0,0,0,.045);
  border-radius:7px; padding:9px 11px; min-width:220px; text-decoration:none; color:inherit; }
.cv-midia-doc:hover { background:rgba(0,0,0,.08); }
.cv-midia-doc .ico { font-size:22px; }
.cv-midia-doc .nome { font-size:12.5px; font-weight:600; word-break:break-all; }
.cv-midia-doc .peso { font-size:11px; color:#667781; }
.cv-midia-doc .baixar { margin-left:auto; font-size:16px; color:var(--link); }
.cv-midia-legenda { margin-top:5px; }
.cv-midia-expirada { color:#667781; font-style:italic; }
/* v1.370 — foto e vídeo só descem quando pedir: a bolha nasce com este
   convite no tamanho reservado da mídia (a conversa não pula ao
   carregar); verMidiaDaBolha (base.js) troca pelo elemento de verdade. */
.cv-midia-espera { display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:6px; width:240px; min-height:130px;
  background:rgba(0,0,0,.055); border:none; border-radius:7px; cursor:pointer;
  font-family:inherit; color:#54656f; padding:16px 12px; }
.cv-midia-espera:hover { background:rgba(0,0,0,.09); }
.cv-midia-espera .cam { font-size:26px; line-height:1; }
.cv-midia-espera .ver { font-size:12.5px; font-weight:700; color:var(--link); }
.cv-midia-espera .peso { font-size:11px; color:#667781; }
.cv-midia-espera.baixando { cursor:default; }
.cv-midia-espera.baixando .ver { color:#667781; font-weight:400; }
.cv-resposta { border-top:1px solid var(--borda); padding:11px 14px; background:#fff;
  display:flex; gap:9px; align-items:flex-end; }
.cv-resposta textarea { flex:1; border:1px solid var(--borda); border-radius:8px;
  padding:9px 12px; font-family:inherit; font-size:13.5px; resize:none; min-width:0; }
.cv-vazio { text-align:center; color:#6a7480; padding:26px 14px; font-size:13.5px; }

/* v1.352 — a barra da conexão do WhatsApp caída: FIXA no pé da janela
   (decisão do Rodrigo — o topo já tem a faixa da plataforma). O
   cabecalho.js a cria e a remove sozinho conforme o vigia do banco. */
.faixa-whats { position:fixed; left:0; right:0; bottom:0; z-index:80;
  background:#C0392B; color:#fff; padding:10px 44px 10px 16px; font-size:13.5px;
  text-align:center; box-shadow:0 -2px 10px rgba(0,0,0,.25); }
.faixa-whats a { color:#fff; font-weight:700; text-decoration:underline; }

/* v1.354 — a faixa recolhe pela seta ▼ e vira uma pastilha no canto
   ESQUERDO (o direito é da caixa de conversa ancorada). O aviso não
   some enquanto a conexão está caída — só para de atravessar a tela.
   Clicar na pastilha reabre. */
.fw-recolher { position:absolute; right:10px; top:50%; transform:translateY(-50%);
  background:rgba(255,255,255,.15); border:none; color:rgba(255,255,255,.85);
  font:inherit; font-size:11px; cursor:pointer; padding:4px 8px; border-radius:4px;
  line-height:1; }
.fw-recolher:hover { background:rgba(255,255,255,.3); color:#fff; }
.faixa-whats.recolhida { left:12px; right:auto; bottom:12px; padding:8px 14px;
  border-radius:20px; font-size:13px; cursor:pointer; text-align:left;
  box-shadow:0 2px 10px rgba(0,0,0,.3); }
.faixa-whats.recolhida .fw-texto { display:none; }
.faixa-whats.recolhida .fw-recolher { display:none; }
.fw-pastilha { display:none; font-weight:700; white-space:nowrap; }
.faixa-whats.recolhida .fw-pastilha { display:inline; }

/* =====================================================================
   v1.353 — A CAIXA DE CONVERSA ANCORADA (cabecalho.js a desenha em
   qualquer tela; o estado vive no localStorage e sobrevive à navegação)
   ===================================================================== */
.chatf { position:fixed; right:16px; bottom:12px; z-index:85; width:330px;
  background:#fff; border:1px solid var(--borda); border-radius:12px 12px 0 0;
  box-shadow:0 -4px 24px rgba(2,48,71,.25); overflow:hidden; display:flex;
  flex-direction:column; }
.chatf-topo { background:#023047; color:#fff; padding:9px 12px; display:flex;
  align-items:center; gap:9px; cursor:pointer; }
.chatf-topo .av { width:28px; height:28px; border-radius:50%; background:#2A9D8F;
  display:flex; align-items:center; justify-content:center; font-weight:700;
  font-size:12px; flex:0 0 auto; }
.chatf-topo b { font-size:13px; }
.chatf-topo small { display:block; font-size:10.5px; opacity:.75; }
.chatf-topo .btns { margin-left:auto; display:flex; gap:4px; }
.chatf-topo .btns button { background:transparent; border:0; color:#fff;
  font-size:15px; cursor:pointer; padding:2px 6px; border-radius:6px;
  font-family:inherit; }
.chatf-topo .btns button:hover { background:rgba(255,255,255,.15); }
.chatf .cv-fio { max-height:260px; min-height:170px; }
.chatf .cv-resposta { padding:8px 10px; }
.chatf.mini { width:230px; }
.chatf.mini .cv-fio, .chatf.mini .cv-resposta { display:none; }
@media (max-width:600px) { .chatf { right:8px; width:calc(100vw - 16px); } }

/* o 💬 das faixas virou <button> (abria wa.me como <a>) */
button.zap { background:none; border:0; cursor:pointer; padding:0;
  font-size:inherit; font-family:inherit; }

/* v1.395 — AGENDAR O ENVIO na caixa de responder de Conversas
   (mockup aprovado em 26/08). O popover ancora na própria caixa. */
.cv-resposta { position: relative; }
.cv-ag-btn { padding: 10px 11px; line-height: 0; }
.cv-ag-pop { position: absolute; right: 12px; bottom: 58px; width: 264px;
  background: #fff; border: 1px solid var(--borda); border-radius: 10px;
  padding: 14px; box-shadow: 0 10px 26px rgba(0,0,0,.16); z-index: 30; }
.cv-ag-pop b { font-size: 13px; display: block; margin-bottom: 9px; }
.cv-ag-pop input[type=datetime-local] { width: 100%; border: 1px solid var(--borda);
  border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: 13px; }
.cv-ag-atalhos { display: flex; gap: 6px; margin: 9px 0 11px; flex-wrap: wrap; }
.cv-ag-atalhos button { background: var(--fundo); border: 1px solid var(--borda);
  border-radius: 99px; padding: 5px 10px; font-size: 12px; cursor: pointer;
  font-family: inherit; }
.cv-ag-atalhos button:hover { border-color: var(--azul); }
.cv-ag-pop .btn { width: 100%; }
.cv-ag-dica { font-size: 11.5px; color: var(--texto-suave); margin-top: 8px;
  line-height: 1.45; }
/* a lixeira dentro da bolha agendada — cancela antes de sair */
.cv-ag-cancelar { background: none; border: 0; cursor: pointer; padding: 0 2px;
  color: var(--erro); vertical-align: -1px; }

/* ============================================================
   v1.397 — O CARTÃO DO ORÇAMENTO EM UMA COLUNA

   Só regras NOVAS, com uma exceção anotada abaixo. O cartão era
   `390px 1fr`: o formulário espremido à esquerda e o resultado à
   direita. Duas coisas quebravam nisso —

   a) 390px não cabem rótulos como "Boleto bancário (com Pix no
      próprio boleto)";
   b) `1fr` vale `minmax(auto, 1fr)`, e a coluna NÃO encolhe abaixo
      do conteúdo: a tabela do comparador (4 colunas) esticava a
      direita para 1032px dentro de 744px de espaço. O cartão inteiro
      passava da largura da tela e o 3º tile aparecia cortado.

   Agora é uma coluna: formulário em cima, com os blocos lado a lado
   ocupando a largura toda, e o resultado embaixo.
   ============================================================ */
.orc-grade { display: block; }
.orc-esq { border-right: 0; border-bottom: 1px solid var(--borda);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 12px; align-items: start; }
.orc-esq .orc-bloco { margin-bottom: 0; }
/* o que não couber rola dentro do próprio quadro, sem empurrar o cartão */
.orc-comp { overflow-x: auto; }

/* O CHECKBOX ESTICADO. Bug antigo: a regra `.orc-campo input,
   .orc-campo select { width: 100% }` foi escrita para campo de texto,
   mas alcança o checkbox — o quadradinho de "na retirada das chaves"
   virava uma barra de 242px e o texto se desprendia. */
.orc-campo input[type=checkbox], .orc-campo input[type=radio] {
  width: auto; flex: 0 0 auto; padding: 0; }

/* A DICA EM BALÃO — no lugar dos parágrafos que ficavam sempre na
   tela. Segue o precedente do `.ajuda-periodo` + `.balao-periodo`
   (v1.176) e o ícone de contorno da v1.372. */
.dica { position: relative; display: inline-flex; align-items: center;
  vertical-align: middle; margin-left: 5px; color: #A8B0B5; cursor: help; }
.dica:hover, .dica:focus-visible { color: var(--azul); outline: none; }
.dica > svg { display: block; }
/* v1.610 — O BALÃO SOLTO.
   Ele deixou de ser filho do "i" e virou um elemento `position: fixed`
   pendurado no <body>, posicionado pelo JS. Motivo: o `.cartao` tem
   `overflow: hidden` (é o que arredonda as pontas do cabeçalho cinza) e
   cortava pela metade o balão de um "i" que mora no <h2>. Elemento fixo
   não é cortado por `overflow` de ancestral nenhum.
   Some daqui o par `.dir`/`.esq`: o JS encaixa o balão na janela. */
.balao-dica { position: fixed; z-index: 340; width: 300px;
  max-width: calc(100vw - 16px);
  background: #fff; border: 1px solid var(--borda); border-radius: 10px;
  padding: 11px 13px; box-shadow: 0 8px 30px rgba(0,0,0,.14);
  font-size: 12.5px; line-height: 1.55; color: var(--texto-suave);
  font-weight: 400; text-transform: none; letter-spacing: 0; text-align: left;
  /* v1.611 — o balão nunca recebe o ponteiro. Se ele nascesse embaixo do
     mouse, roubaria o evento do próprio "i" e o ciclo abre/fecha não
     terminaria nunca. */
  pointer-events: none; }
.balao-dica b { color: var(--texto); font-weight: 600; }
.balao-dica .conta { display: block; margin-top: 6px; padding-top: 6px;
  border-top: 1px solid var(--fundo); font-variant-numeric: tabular-nums; }
.balao-dica::after { content: ''; position: absolute; left: var(--seta, 50%);
  margin-left: -6px; border: 6px solid transparent; }
.balao-dica.acima::after  { top: 100%; border-top-color: #fff; }
.balao-dica.abaixo::after { bottom: 100%; border-bottom-color: #fff; }




/* o rótulo do campo vira flex para a dica ficar na mesma linha.
   `:not(.orc-check)` porque o checkbox também é um <label> e precisa
   continuar como está. */
.orc-campo > label:not(.orc-check) { display: flex; align-items: center; }
.orc-bloco > h3 .dica { margin-left: 5px; }

/* A LINHA DO TEMPO QUE CABE. Era `flex: 1 0 168px` com o nome e o
   valor no mesmo parágrafo: "Mensalidade do Seguro-Fiança R$ 125,00"
   quebrava em três linhas e o valor se perdia no meio do texto. */
.orc-parada { flex: 1 0 200px; padding-right: 18px; }
.orc-parada li { display: grid; grid-template-columns: 1fr auto;
  gap: 4px 10px; align-items: baseline; }
.orc-parada li b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.orc-parada li.solto { display: block; }
/* o número da parcela sussurrado, junto do nome do item */
.orc-parada li .p, .orc-parcela .itens li .p { color: var(--texto-suave); font-style: normal; }
/* o ícone da parada num campo próprio (v1.396), alinhado ao rótulo */
.orc-parada .q { display: flex; align-items: center; gap: 5px; }
.orc-parada .q svg { flex: 0 0 auto; }

/* ------------------------------------------------------------
   v1.398 — O ORÇAMENTO EM CINCO CARTÕES

   O comparador e a mensagem viraram cartões, e o `.corpo` deles leva
   as classes `.orc-comp` / `.orc-msg` só para herdar o desenho da
   TABELA e do texto. `.orc-nu` tira a moldura que essas classes
   traziam de quando eram quadros soltos dentro de um cartão maior —
   agora a moldura é a do próprio cartão.
   ------------------------------------------------------------ */
.cartao > .corpo.orc-nu { border: 0; border-radius: 0; margin: 0;
  background: transparent; }
.cartao > .corpo.orc-comp { padding: 0; overflow-x: auto; }
.cartao > .corpo.orc-msg { padding: 0; }
/* a data do comparador vive no cabeçalho, ao lado do botão */
.orc-data-b { font-family: inherit; font-size: 12px; padding: 4px 7px;
  border: 1px solid var(--borda); border-radius: 6px; background: #fff; }
/* o convite de quando ainda não se comparou nada */
.orc-comp-vazio { padding: 12px 16px; }
/* o formulário é o corpo inteiro do cartão "O que entra na conta" */
.cartao > .orc-esq { border-bottom: 0; }
/* O IMÓVEL PEGA A LINHA INTEIRA. Num bloco de 310px o rótulo
   "IM-0020 · CARDOSO 43 BL 02 APTO 43 — JARDIM IMPERIAL · R$ 1.200,00"
   não cabe, e select não quebra linha: o fim some sem aviso. */
.orc-esq .orc-largo { grid-column: 1 / -1; }

/* "Criar o contrato com estes números" deixa de ser o botão cheio da
   barra: continua no fim, do lado direito, mas discreto. */
.orc-acoes .orc-discreto { color: var(--texto-suave); font-weight: 500; }
.orc-acoes .orc-discreto:hover { color: var(--azul); border-color: var(--azul); }

/* ════════════════════════════════════════════════════════════
   v1.399 — POSTAGENS (Instagram e Facebook)

   A tela nova: calendário com as fotos (a moldura colorida é o
   estado), coluna do dia, fila de aprovação, régua de conteúdo e a
   janela com a prévia no telefone. Prefixo pg- em tudo.
   ════════════════════════════════════════════════════════════ */

/* ---------- os números do mês ---------- */
.pg-kpis { display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--borda);
  border-radius: 12px; background: #fff; overflow: hidden; margin-bottom: 16px; }
@media (max-width: 900px) { .pg-kpis { grid-template-columns: repeat(2, 1fr); } }
.pg-kpi { padding: 13px 16px 11px; border-right: 1px solid var(--borda); }
.pg-kpi:last-child { border-right: 0; }
.pg-kpi .r { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em;
  font-weight: 700; color: var(--texto-suave); display: flex; align-items: center; gap: 5px; }
.pg-kpi .v { display: block; font-size: 28px; font-weight: 300; color: var(--pn-num); letter-spacing: -1px;
  font-variant-numeric: tabular-nums; line-height: 1.15; }
.pg-kpi .s { display: block; font-size: 11.5px; color: var(--texto-suave); }
.pg-kpi.alerta { background: #FFFDF6; }
.pg-kpi.alerta .v { color: #8a5a00; }

/* ---------- calendário + coluna do dia ---------- */
.pg-duas { display: grid; grid-template-columns: minmax(0, 1fr) 332px; gap: 16px;
  align-items: start; }
@media (max-width: 1020px) { .pg-duas { grid-template-columns: 1fr; } }

.pg-cal { display: grid; grid-template-columns: repeat(7, 1fr); border-top: 1px solid var(--borda); }
.pg-sem { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700;
  color: var(--texto-suave); padding: 9px 10px 7px; background: #FBFBFA;
  border-bottom: 1px solid var(--borda); }
.pg-dia { min-height: 112px; border-bottom: 1px solid #F0F0EF; border-right: 1px solid #F0F0EF;
  padding: 6px 7px 8px; cursor: pointer; }
.pg-dia:nth-child(7n) { border-right: 0; }
.pg-dia:hover { background: #FBFBFA; }
.pg-dia .n { font-size: 11.5px; font-weight: 600; color: var(--texto-suave); text-align: right;
  margin-bottom: 4px; }
.pg-dia.fora .n { color: #C9CDD1; }
.pg-dia.hoje { background: #F7FBF6; }
.pg-dia.hoje .n { color: var(--verde-escuro); }
.pg-dia.hoje .n::after { content: ' · hoje'; font-size: 9.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .4px; }
.pg-dia.sel { outline: 2px solid var(--azul); outline-offset: -2px; border-radius: 2px; }

/* a miniatura da mídia dentro do dia — a moldura colorida é o estado */
.pg-mini { height: 46px; border-radius: 7px; position: relative; overflow: hidden;
  margin-top: 4px; border: 2px solid transparent; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.pg-mini .rt { position: absolute; left: 0; right: 0; bottom: 0; font-size: 9px; font-weight: 700;
  letter-spacing: .03em; color: #fff; background: linear-gradient(transparent, rgba(2,20,30,.72));
  padding: 8px 6px 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pg-mini.aprovar   { border-color: #E8A33D; }
.pg-mini.agendada  { border-color: var(--azul); }
.pg-mini.publicada { border-color: #7BBC62; }
.pg-mini.falhou    { border-color: #C94F3D; }
.pg-mini.rascunho  { border-color: #B7BEC4; }
/* v1.452 — MESMO HORÁRIO, LADO A LADO. Duas postagens marcadas para a
   mesma hora dividem uma faixa em vez de empilhar: no calendário elas
   saem juntas, e é isso que acontece de verdade. Com duas na faixa a
   miniatura fica estreita, então o rótulo mostra só a hora. */
.pg-hora { display: flex; gap: 3px; }
.pg-hora > .pg-mini, .pg-hora > .pg-vazio { flex: 1; min-width: 0; }
.pg-hora.juntas .pg-mini .rt { font-size: 8px; padding: 6px 3px 2px; }

/* v1.452 — O DIA CHEIO. Com 4 ou mais postagens a miniatura encolhe de
   46 para 32px e cabem 5 em vez de 3. A linha do calendário não cresce:
   o "+N" que desaparece ocupava um bloco inteiro, do mesmo tamanho de
   uma miniatura. Medido: 230px antes, 235px depois. */
.pg-dia.cheio .pg-mini { height: 32px; }
.pg-dia.cheio .pg-mini .rt { font-size: 8.5px; padding: 6px 5px 2px; letter-spacing: 0; }
.pg-dia.cheio .pg-vazio { height: 32px; font-size: 8.5px; }

/* o espaço que a régua criou e ainda está sem mídia */
.pg-vazio { height: 46px; border-radius: 7px; margin-top: 4px; border: 2px dashed #D5D9DC;
  color: #9AA3AA; font-size: 9.5px; font-weight: 700; letter-spacing: .03em;
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: 0 4px; background: #FBFBFA; }


.pg-legenda { display: flex; gap: 14px; flex-wrap: wrap; align-items: center;
  padding: 10px 16px; border-top: 1px solid var(--borda); font-size: 11.5px;
  color: var(--texto-suave); }
.pg-ponto { display: inline-flex; align-items: center; gap: 5px; }
.pg-ponto i { width: 10px; height: 10px; border-radius: 3px; border: 2px solid; display: inline-block; }
.pg-ponto.aprovar i   { border-color: #E8A33D; }
.pg-ponto.agendada i  { border-color: var(--azul); }
.pg-ponto.publicada i { border-color: #7BBC62; }
.pg-ponto.falhou i    { border-color: #C94F3D; }
/* v1.453 - era `.pg-ponto.vazio`, e o `.vazio` generico do CRM
   (`padding: 40px`, a caixa de "nada aqui") caia em cima: o item da
   legenda ficava com 95px de altura em vez de 15, no celular E no
   computador. Nome proprio resolve. */
.pg-ponto.sem-midia i { border-style: dashed; border-color: #B7BEC4; }

/* ---------- a coluna do dia (à direita do calendário) ---------- */
.pg-lado .corpo { padding: 12px; }
.pg-lpost { display: grid; grid-template-columns: 52px 1fr; gap: 10px; align-items: center;
  border: 1px solid var(--borda); border-radius: 10px; padding: 9px 11px; margin-bottom: 8px;
  background: #fff; }
.pg-lpost .thumb { width: 52px; height: 52px; border-radius: 8px; position: relative; overflow: hidden; }
.pg-lpost .thumb.story { height: 74px; }
.pg-lpost .l1 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pg-lpost .hora { font-size: 13px; font-weight: 700; color: var(--azul); }
/* v1.450 — na fila de aprovação a hora vem precedida do dia; o dia usa
   a cor do texto para a HORA continuar sendo o que salta. */
.pg-lpost .hora .dia { color: var(--texto); }
.pg-lpost .leg { font-size: 11.5px; color: var(--texto-suave); margin-top: 3px; line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pg-lpost .acao { grid-column: 1 / -1; display: flex; gap: 6px; }
.pg-lpost .acao .btn { padding: 5px 10px; font-size: 12px; }
.pg-lpost .metr { grid-column: 1 / -1; display: flex; gap: 14px; font-size: 11.5px;
  color: var(--texto-suave); border-top: 1px dashed var(--borda); padding-top: 7px; }
.pg-lpost .metr b { color: var(--texto); font-variant-numeric: tabular-nums; }
.pg-lpost .metr svg { vertical-align: -2px; margin-right: 3px; }
.pg-erro { font-size: 11.5px; background: #fdeaea; color: #8f2a1e; grid-column: 1 / -1;
  border: 1px solid #F2C9C4; border-radius: 8px; padding: 7px 10px; line-height: 1.45; }

/* a fila de aprovação */
.pg-fila-n { display: inline-flex; align-items: center; justify-content: center; min-width: 20px;
  height: 20px; border-radius: 10px; background: #E8A33D; color: #fff; font-size: 11.5px;
  font-weight: 700; padding: 0 6px; }
.pg-tecla { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px;
  border: 1px solid var(--borda); border-bottom-width: 2px; border-radius: 5px;
  padding: 1px 5px; background: #fff; color: var(--texto-suave); }

/* ---------- a prévia do perfil (a grade 3×3) ---------- */
.pg-grade { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; padding: 14px; }
.pg-quadro { aspect-ratio: 1; border-radius: 4px; position: relative; overflow: hidden; }
.pg-quadro.agendado::after { content: ''; position: absolute; inset: 0;
  border: 2px dashed rgba(255,255,255,.85); border-radius: 4px; }
.pg-quadro .sela { position: absolute; top: 5px; right: 5px; background: rgba(2,20,30,.7);
  color: #fff; border-radius: 5px; font-size: 8.5px; font-weight: 700; padding: 2px 5px;
  letter-spacing: .04em; }
.pg-perfil-cab { display: flex; align-items: center; gap: 10px; padding: 13px 16px 2px; }
.pg-avatar { width: 34px; height: 34px; border-radius: 50%; background: #023047; color: #7BBC62;
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 15px; }
.pg-perfil-cab b { font-size: 13px; }
.pg-perfil-cab span { font-size: 11.5px; color: var(--texto-suave); display: block; }

/* v1.452 — o recado no lugar dos botões, quando a postagem já saiu */
.pg-ja-saiu { font-size: 12.5px; line-height: 1.5; color: var(--texto);
  background: #F7FBF6; border: 1px solid #CFE3D6; border-radius: 9px;
  padding: 10px 12px; max-width: 460px; }

/* ---------- o compositor com o telefone ---------- */
.pg-form { display: grid; grid-template-columns: 250px minmax(0,1fr); gap: 20px; padding: 16px; }
@media (max-width: 860px) { .pg-form { grid-template-columns: 1fr; } }

/* o telefone */
.pg-fone { width: 232px; border-radius: 26px; background: #0B1B24; padding: 9px;
  box-shadow: 0 10px 30px rgba(2,20,30,.25); margin: 0 auto; }
.pg-tela { border-radius: 18px; overflow: hidden; position: relative; }
/* v1.451 — A MOLDURA NA PROPORÇÃO DE CADA TIPO.
   Era `height: 300px` para os três. A tela do telefone tem 214px, então
   a moldura ficava 214×300 — proporção 0,71, que não é nem 4:5 (feed e
   carrossel) nem 9:16 (story). A prévia mentia nos três: cortava o
   rodapé da arte no feed e, no story, mostrava cabendo o que não cabe.
   Agora a altura sai da proporção, e o que se vê é o que vai ao ar. */
.pg-tela .midia { aspect-ratio: 4 / 5; position: relative; }
.pg-tela .midia.eh-story { aspect-ratio: 9 / 16; }
.pg-tela .midia .marca { position: absolute; left: 10px; bottom: 34px; color: #fff;
  font-size: 15px; font-weight: 800; letter-spacing: .02em; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.pg-tela .midia .sub { position: absolute; left: 10px; bottom: 16px; color: rgba(255,255,255,.85);
  font-size: 10.5px; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.pg-story-topo { position: absolute; top: 0; left: 0; right: 0; padding: 8px 10px;
  background: linear-gradient(rgba(0,0,0,.45), transparent); z-index: 2; }
.pg-story-topo .barra { height: 2.5px; border-radius: 2px; background: rgba(255,255,255,.45);
  margin-bottom: 7px; }
.pg-story-topo .barra i { display: block; height: 100%; width: 60%; background: #fff; border-radius: 2px; }
.pg-story-topo .quem { display: flex; align-items: center; gap: 7px; color: #fff; font-size: 11px;
  font-weight: 600; }
.pg-story-topo .quem .pg-avatar { width: 24px; height: 24px; font-size: 11px; }
.pg-feed-cab { display: flex; align-items: center; gap: 8px; background: #fff; padding: 8px 10px; }
.pg-feed-cab .pg-avatar { width: 26px; height: 26px; font-size: 12px; }
.pg-feed-cab b { font-size: 11.5px; }
.pg-feed-pe { background: #fff; padding: 8px 10px 12px; }
.pg-feed-pe .icones { display: flex; gap: 12px; color: #16232B; margin-bottom: 6px; }
.pg-feed-pe .txt { font-size: 10.5px; color: #16232B; line-height: 1.45; }
.pg-feed-pe .txt b { font-weight: 700; }
.pg-troca { text-align: center; margin-top: 10px; }

/* os campos */
.pg-campos { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.pg-origem { border: 1px solid #CFE3D6; background: #F7FBF6; border-radius: 10px; padding: 11px 13px; }
.pg-origem label { font-size: 11px; color: var(--verde-escuro); font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: 6px; }
.pg-origem .linha { display: flex; gap: 8px; }
.pg-origem select { flex: 1; min-width: 0; font-family: inherit; font-size: 13px; padding: 7px 9px;
  border: 1px solid var(--borda); border-radius: 7px; background: #fff; }
.pg-origem .obs { font-size: 11.5px; color: var(--texto-suave); margin-top: 7px; line-height: 1.5; }
.pg-campos textarea { font-family: inherit; font-size: 13.5px; padding: 9px 11px; min-height: 108px;
  border: 1px solid var(--borda); border-radius: 8px; resize: vertical; line-height: 1.55; }
.pg-linha2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pg-conta { font-size: 11px; color: var(--texto-suave); text-align: right; margin-top: 3px; }
.pg-rodape-form { display: flex; gap: 8px; align-items: center; padding: 13px 16px;
  border-top: 1px solid var(--borda); flex-wrap: wrap; }
.pg-rodape-form .fim { margin-left: auto; }

/* ---------- a régua de conteúdo ---------- */
.pg-regua { padding: 6px 16px 14px; }
.pg-regua table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pg-regua th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-suave); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--borda); }
.pg-regua td { padding: 9px 10px; border-bottom: 1px solid #F0F0EF; }
.pg-regua tr:last-child td { border-bottom: 0; }
.pg-regua .tema { color: var(--texto-suave); }

/* ---------- as lâminas do carrossel no compositor ---------- */
.pg-slides { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.pg-slide { width: 56px; height: 70px; border-radius: 7px; position: relative; overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.14); }
.pg-slide .capa { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(2,20,30,.72);
  color: #fff; font-size: 8.5px; font-weight: 700; text-align: center; padding: 2px 0;
  letter-spacing: .05em; text-transform: uppercase; }
.pg-mais { width: 56px; height: 70px; border-radius: 7px; border: 2px dashed var(--borda);
  color: var(--texto-suave); display: flex; align-items: center; justify-content: center;
  cursor: pointer; background: #FBFBFA; font-size: 20px; font-weight: 300; }
.pg-slides-obs { font-size: 11px; color: var(--texto-suave); width: 100%; }

/* v1.404 — ARRASTAR E SOLTAR. A faixa inteira virou o alvo: antes o
   único jeito de anexar era clicar num quadradinho de 56px. O `sobre`
   é o mesmo azul do rádio marcado (#E7F0F6), para o CRM continuar
   falando uma língua só. */
.pg-slides.solta { border: 2px dashed var(--borda); border-radius: 10px; background: #FBFBFA;
  padding: 9px; min-height: 74px; transition: border-color .12s ease, background-color .12s ease; }
.pg-slides.solta.sobre { border-color: var(--azul); background: #E7F0F6; }
/* dentro da faixa tracejada, o "+" para de ser tracejado — dois
   tracejados encaixados viram sujeira */
.pg-slides.solta .pg-mais { background: #fff; border-style: solid; border-width: 1px; }
.pg-solta-dica { display: flex; align-items: center; gap: 8px; font-size: 12.5px;
  color: var(--texto-suave); cursor: pointer; padding: 0 4px; }
.pg-solta-dica b { font-weight: 600; color: var(--texto); }
.pg-solta-dica svg { flex: 0 0 auto; }
.pg-solta-dica.mini { font-size: 11.5px; }
.pg-slides.solta.sobre .pg-solta-dica { color: var(--azul); font-weight: 600; }
.pg-slides.solta.sobre .pg-solta-dica b { color: var(--azul); }
/* o que não entrou: uma linha só, no lugar de um alert() por arquivo */
.pg-recusa { font-size: 11.5px; color: var(--erro); line-height: 1.45; width: 100%; margin-top: 2px; }
/* reordenar as lâminas: a marca azul fica na beirada ESQUERDA do alvo,
   porque a lâmina arrastada entra ANTES dele */
.pg-slide[draggable] { cursor: grab; }
.pg-slide.arrastando { opacity: .35; }
.pg-slide.marca { box-shadow: -3px 0 0 0 var(--azul), 0 1px 3px rgba(0,0,0,.14); }
/* v1.405 — O × QUE TIRA A LÂMINA.
   Some até o mouse chegar perto: a lâmina existe para ser vista, e um ×
   permanente em cima de cada uma vira sujeira numa faixa de dez. No
   celular não há hover, então lá ele fica sempre visível — é o único
   jeito de tirar uma lâmina por toque. */
.pg-slide .pg-tirar { position: absolute; top: 3px; right: 3px; width: 17px; height: 17px;
  border-radius: 5px; background: rgba(2,32,48,.66); color: #fff; display: flex;
  align-items: center; justify-content: center; cursor: pointer; z-index: 2;
  opacity: 0; transition: opacity .12s ease; }
.pg-slide:hover .pg-tirar, .pg-slide:focus-within .pg-tirar { opacity: 1; }
.pg-slide .pg-tirar:hover { background: rgba(2,32,48,.92); }
@media (hover: none) { .pg-slide .pg-tirar { opacity: 1; } }

/* v1.405 — O VISOR: a lâmina em tamanho de leitura, por cima do modal.
   z-index 90 porque o `.modal-fundo` é 50 e o `.lst-menu` é 80. */
.pg-visor { position: fixed; inset: 0; background: rgba(2,20,30,.86); z-index: 90;
  display: none; align-items: center; justify-content: center; padding: 26px; }
.pg-visor.aberto { display: flex; }
.pg-visor img { max-height: calc(100vh - 130px); max-width: min(78vw, 620px);
  border-radius: 10px; box-shadow: 0 10px 40px rgba(0,0,0,.5); display: block; }
.pg-visor-conta { position: absolute; top: 20px; left: 0; right: 0; text-align: center;
  color: #fff; font-size: 13px; font-weight: 600; }
.pg-visor-fechar { position: absolute; top: 12px; right: 18px; background: none; border: none;
  color: #fff; font-size: 26px; line-height: 1; cursor: pointer; font-family: inherit; opacity: .8; }
.pg-visor-fechar:hover { opacity: 1; }
.pg-visor-seta { position: absolute; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.16); color: #fff; font-size: 20px; line-height: 1;
  display: flex; align-items: center; justify-content: center; font-family: inherit; }
.pg-visor-seta:hover { background: rgba(255,255,255,.3); }
.pg-visor-seta.esq { left: 22px; }
.pg-visor-seta.dir { right: 22px; }
.pg-visor-dica { position: absolute; bottom: 20px; left: 0; right: 0; text-align: center;
  color: rgba(255,255,255,.6); font-size: 11.5px; }
@media (max-width: 640px) {
  /* v1.453 - O CABECALHO DO CARTAO NO CELULAR. As setas do mes
     empilhavam uma sobre a outra e o nome quebrava em "Agosto de /
     2026". O subtitulo desce para a propria linha e a navegacao fica
     inteira. */
  .cartao > h2 { flex-wrap: wrap; row-gap: 4px; padding: 10px 12px; }
  .cartao > h2 .cnt { flex: 1 1 100%; order: 3; font-size: 11.5px; }
  .pg-nav { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
  .pg-nav b { white-space: nowrap; font-size: 12.5px; }
  .pg-nav .btn { padding: 6px 11px; }

  /* v1.453 - A LEGENDA. O vao vinha do `margin-left:auto` do ultimo
     item: numa linha que ja quebrou, ele empurra a dica para a direita
     e abre o buraco. */
  .pg-legenda { gap: 7px 12px; padding: 9px 12px; font-size: 11px; }
  .pg-legenda > span[style] { margin-left: 0 !important; flex: 1 1 100%; }

  /* v1.453 - O RODAPE DO MODAL. Cada botao caia numa linha, porque tem
     larguras diferentes e o espacador `.fim` empurrava. Vira grade de
     duas colunas: o principal ocupa a linha inteira e sobe para o
     alcance do polegar; os secundarios emparelham embaixo. */
  .pg-rodape-form { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px; }
  .pg-rodape-form .fim { display: none; }
  .pg-rodape-form > .btn { width: 100%; }
  .pg-rodape-form #pg-acoes { grid-column: 1 / -1; order: -1;
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pg-rodape-form #pg-acoes .btn { width: 100%; }
  .pg-rodape-form #pg-acoes .btn:not(.btn-claro) {
    grid-column: 1 / -1; order: -1; padding: 13px 18px; }
  .pg-rodape-form #pg-acoes .btn-claro:only-of-type { grid-column: 1 / -1; }
  .pg-ja-saiu { grid-column: 1 / -1; }

  .pg-visor { padding: 14px; }
  .pg-visor img { max-width: 92vw; max-height: calc(100vh - 150px); }
  .pg-visor-seta { width: 36px; height: 36px; }
  .pg-visor-seta.esq { left: 8px; }
  .pg-visor-seta.dir { right: 8px; }
}

/* v1.451 — O AVISO DE CORTE, dentro da própria moldura.
   A tarja diz o que a moldura já mostra, com número: a imagem acima
   está exatamente como vai sair, e aqui está quanto da arte ficou de
   fora. Só aparece quando a proporção da arte difere a do tipo. */
.pg-corte { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  background: rgba(192,57,43,.93); color: #fff; font-size: 9.5px; font-weight: 600;
  text-align: center; padding: 5px 6px; line-height: 1.35; }
.pg-corte b { font-weight: 800; }

/* o selo 1/4 e as bolinhas do carrossel no telefone */
.pg-carr-selo { position: absolute; top: 8px; right: 8px; background: rgba(2,20,30,.7);
  color: #fff; border-radius: 10px; font-size: 10px; font-weight: 700; padding: 2px 8px; z-index: 2; }
.pg-bolinhas { display: flex; gap: 4px; justify-content: center; padding: 6px 0 0; background: #fff; }
.pg-bolinhas i { width: 5px; height: 5px; border-radius: 50%; background: #C9CDD1; }
.pg-bolinhas i.on { background: var(--azul); }

/* os cartões da coluna do dia, empilhados */
.pg-lado .cartao { margin-bottom: 16px; }
.pg-lado .cartao:last-child { margin-bottom: 0; }
/* a prévia antes de subir mídia */
.pg-previa-vazia { height: 300px; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.55); font-size: 12px; text-align: center; padding: 0 20px;
  background: #16232B; }
.pg-tela .midia { background: #16232B; }
/* o contador de caracteres da legenda */
.pg-conta { font-size: 11px; color: var(--texto-suave); text-align: right; margin-top: 3px; }

/* ---------- v1.591 — SUBIR EM LOTE (prefixo lt-) ----------
   A janela de três passos: o trilho do topo, a faixa de soltar a pasta
   (é a `.pg-slides.solta` do compositor, mais alta), a fita das
   miniaturas, a regra do calendário (chips de horário e dias da
   semana), os dois cartões "como nascem", a tabela da conferência e o
   progresso do envio. O que já existia (pg-slide, pg-recusa, pg-erro,
   pg-origem, orc-*) é reaproveitado; aqui só o que é novo. */
.lt-passos { display: flex; margin: -6px 0 16px; border: 1px solid var(--borda);
  border-radius: 10px; overflow: hidden; background: #F8F8F7; }
.lt-passos > div { flex: 1; padding: 9px 14px; font-size: 12.5px; color: var(--texto-suave);
  display: flex; align-items: center; gap: 8px; border-right: 1px solid var(--borda); }
.lt-passos > div:last-child { border-right: 0; }
.lt-passos > div i { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid #C9CDD1;
  display: inline-flex; align-items: center; justify-content: center; font-style: normal;
  font-size: 11px; font-weight: 700; flex: none; }
.lt-passos > div.on { background: #fff; color: var(--azul); font-weight: 600; }
.lt-passos > div.on i { background: var(--azul); border-color: var(--azul); color: #fff; }
.lt-passos > div.ok i { background: #EBF6E4; border-color: var(--verde-escuro); color: var(--verde-escuro); }
.lt-duas { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 860px) { .lt-duas { grid-template-columns: 1fr; } }
.lt-solta { min-height: 190px; display: flex; flex-direction: column; justify-content: center;
  align-items: center; gap: 8px; text-align: center; padding: 22px 16px; }
.lt-solta .g { font-size: 15px; font-weight: 600; color: var(--texto); }
.lt-solta .p { font-size: 12px; color: var(--texto-suave); line-height: 1.55; max-width: 440px; }
.lt-solta code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.lt-lidos { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12.5px;
  padding: 10px 12px; border: 1px solid #CFE3D6; background: #F7FBF6; border-radius: 9px; }
.lt-lidos b { color: var(--verde-escuro); }
.lt-lidos .vao { flex: 1; }
.lt-fita { display: flex; gap: 6px; flex-wrap: wrap; }
.lt-fita .pg-slide { width: 44px; height: 55px; cursor: zoom-in; }
/* o filete verde embaixo diz "este é um carrossel" */
.lt-fita .pg-slide.carr::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 3px; background: var(--verde); }
.lt-fita .mais { width: 44px; height: 55px; border-radius: 7px; background: #EDF0F2;
  color: var(--texto-suave); font-size: 11px; font-weight: 700; display: flex;
  align-items: center; justify-content: center; }
.lt-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lt-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--azul);
  background: #E7F0F6; color: var(--azul); border-radius: 7px; padding: 5px 9px; font-size: 12.5px;
  font-weight: 600; }
.lt-chip small { font-weight: 400; color: #6a7480; cursor: pointer; font-size: 13px; line-height: 1; }
.lt-chip small:hover { color: var(--erro); }
.lt-chip.add { background: #fff; border-style: dashed; border-color: var(--borda); padding: 3px 6px; }
.lt-chip.add input { font-family: inherit; font-size: 12px; border: 1px solid var(--borda);
  border-radius: 5px; padding: 2px 4px; width: auto; }
.lt-dias { display: flex; gap: 4px; flex-wrap: wrap; }
.lt-dias span { width: 40px; height: 30px; border: 1px solid var(--borda); border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center; font-size: 11.5px;
  font-weight: 600; color: var(--texto-suave); background: #fff; cursor: pointer; user-select: none; }
.lt-dias span.on { border-color: var(--azul); background: #E7F0F6; color: var(--azul); }
.lt-resultado { border-left: 3px solid var(--verde); background: #F7FBF6; padding: 9px 12px;
  font-size: 12.5px; line-height: 1.55; border-radius: 0 8px 8px 0; }
.lt-resultado b { color: var(--verde-escuro); }
/* os dois cartões "como nascem": um rádio grande, com explicação */
.lt-nascem { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .lt-nascem { grid-template-columns: 1fr; } }
.lt-nascem label { border: 1px solid var(--borda); border-radius: 10px; padding: 11px 13px;
  cursor: pointer; display: grid; grid-template-columns: auto 1fr; gap: 4px 9px;
  align-items: start; background: #fff; }
.lt-nascem label.on { border-color: var(--azul); background: #E7F0F6; box-shadow: inset 0 0 0 1px var(--azul); }
.lt-nascem input { accent-color: var(--azul); margin-top: 3px; }
.lt-nascem b { font-size: 13px; color: var(--texto); }
.lt-nascem label.on b { color: var(--azul); }
.lt-nascem small { grid-column: 2; font-size: 11.5px; color: var(--texto-suave); line-height: 1.5; }
.lt-sub { font-size: 12px; font-weight: 700; color: var(--azul); text-transform: uppercase;
  letter-spacing: .04em; margin: 6px 0 2px; padding-top: 12px; border-top: 1px solid var(--borda); }
/* rádios um embaixo do outro (as três opções de legenda são frases) */
.orc-radios.lt-vertical { flex-direction: column; align-items: stretch; gap: 5px; }
.orc-radios.lt-vertical label { display: flex; }
.orc-radios.lt-vertical label > span { flex: 1; line-height: 1.4; }
/* a tabela da conferência */
.lt-resumo { display: flex; gap: 18px; flex-wrap: wrap; align-items: center; font-size: 12.5px;
  color: var(--texto-suave); padding: 10px 14px; border: 1px solid var(--borda); border-radius: 10px;
  background: #FBFBFA; margin-bottom: 12px; }
.lt-resumo b { color: var(--texto); font-size: 13.5px; }
.lt-resumo .vao { flex: 1; }
.lt-tab-caixa { border: 1px solid var(--borda); border-radius: 10px; overflow: auto; max-height: 60vh; }
.lt-tab { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.lt-tab th { text-align: left; padding: 9px 10px; background: #F8F8F7; border-bottom: 2px solid var(--borda);
  color: var(--texto-suave); font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  white-space: nowrap; position: sticky; top: 0; }
.lt-tab td { padding: 8px 10px; border-bottom: 1px solid #F0F0EF; vertical-align: middle; }
.lt-tab tr:hover td { background: transparent; cursor: default; }
.lt-tab .th { width: 38px; height: 47px; border-radius: 6px; background-size: cover;
  background-position: center; position: relative; box-shadow: 0 1px 2px rgba(0,0,0,.12); }
.lt-tab .th .n { position: absolute; right: -4px; bottom: -4px; background: var(--azul); color: #fff;
  font-size: 9px; font-weight: 700; border-radius: 8px; padding: 1px 5px; border: 2px solid #fff; }
.lt-tab .quando { white-space: nowrap; }
.lt-tab .quando b { color: var(--azul); }
.lt-tab .quando input { font-family: inherit; font-size: 12px; border: 1px solid transparent;
  border-radius: 5px; padding: 2px 4px; color: var(--texto); background: transparent; }
.lt-tab .quando input:hover, .lt-tab .quando input:focus { border-color: var(--borda); background: #fff; }
.lt-tab .arq { color: var(--texto-suave); font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lt-tab tr.pulado td { background: #FFFDF6; }
.lt-tab tr.pulado .quando b { color: #8a5a00; }
.lt-tab tr.existe td { background: #F7FBF6; color: var(--texto-suave); }
.lt-tab .leg { color: var(--texto-suave); max-width: 280px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.lt-tab tr.mais td { text-align: center; color: var(--texto-suave); padding: 12px; }
/* o envio */
.lt-prog { font-size: 13px; display: flex; align-items: center; gap: 10px; }
.lt-prog b { color: var(--azul); font-variant-numeric: tabular-nums; }
.lt-prog .vao { flex: 1; }
.lt-prog small { color: var(--texto-suave); }
.lt-gira { width: 14px; height: 14px; border: 2px solid #CFE0EA; border-top-color: var(--azul);
  border-radius: 50%; animation: pgGira .8s linear infinite; flex: none; }
.lt-barra { height: 10px; border-radius: 5px; background: #EDF0F2; overflow: hidden; margin: 10px 0 6px; }
.lt-barra i { display: block; height: 100%; width: 0; background: var(--azul); border-radius: 5px;
  transition: width .2s ease; }
.lt-erro { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.lt-pronto { display: flex; align-items: center; gap: 12px; border: 1px solid #CFE3D6; background: #F7FBF6;
  border-radius: 10px; padding: 12px 14px; font-size: 13.5px; margin-top: 12px; }
.lt-pronto svg { color: var(--verde-escuro); flex: none; }
.lt-pronto b { color: var(--verde-escuro); }
/* a fila com lote: a barra do "Aprovar todas" e a linha do lote no cartão */
.pg-fila-barra { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.pg-fila-barra .btn { padding: 6px 11px; font-size: 12px; }
.pg-fila-barra select { font-family: inherit; font-size: 12px; padding: 5px 8px; border: 1px solid var(--borda);
  border-radius: 7px; background: #fff; color: var(--texto); max-width: 100%; }
.pg-lpost .pg-lote { font-size: 10.5px; margin-top: 2px; }

/* ============================================================
   v1.414 — ATENDENTE IA (aba da Configuração)
   Tudo com prefixo ia- para não esbarrar em ninguém.
   ============================================================ */
.ia-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--borda); border-radius: 12px;
  padding: 12px 16px; margin-bottom: 14px; }
.ia-topo .ia-titulo { font-size: 14px; font-weight: 700; color: var(--azul); }
.ia-topo .vao { flex: 1; }

/* interruptor deslizante (não existia componente; nasce aqui) */
.ia-chave { position: relative; width: 44px; height: 24px; flex: 0 0 auto; display: inline-block; }
.ia-chave input { opacity: 0; width: 0; height: 0; }
.ia-chave i { position: absolute; inset: 0; background: #cfd6da; border-radius: 24px;
  transition: .2s; cursor: pointer; }
.ia-chave i:before { content: ""; position: absolute; width: 18px; height: 18px;
  left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s;
  box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.ia-chave input:checked + i { background: var(--verde-escuro); }
.ia-chave input:checked + i:before { transform: translateX(20px); }

/* as seções da aba */
.ia-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.ia-chip { padding: 7px 14px; border: 1px solid var(--borda); border-radius: 999px;
  background: #fff; cursor: pointer; font-family: inherit; font-size: 13px;
  font-weight: 600; color: var(--texto-suave); white-space: nowrap; }
.ia-chip.on { background: #EDF3F6; color: var(--azul); border-color: var(--azul); }
.ia-sec[hidden] { display: none; }
.ia-sec .cartao { margin-bottom: 14px; }
.ia-grade2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .ia-grade2 { grid-template-columns: 1fr; } }
.ia-campo { display: block; font-size: 12px; font-weight: 700;
  color: var(--texto-suave); margin: 0 0 5px; }
.ia-dica { font-size: 12.5px; color: var(--texto-suave); line-height: 1.55; margin-top: 6px; }
#p-atendente input[type=range] { width: 100%; accent-color: var(--azul); height: 28px; padding: 0; }
.ia-regua-marcas { display: flex; justify-content: space-between; font-size: 11px;
  color: var(--texto-suave); margin-top: 2px; }

/* números da visão geral */
.ia-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
@media (max-width: 900px) { .ia-kpis { grid-template-columns: repeat(2,1fr); } }
.ia-kpi { border: 1px solid var(--borda); border-radius: 10px; padding: 12px 14px; }
.ia-kpi b { font-size: 22px; display: block; color: var(--azul); }
.ia-kpi span { font-size: 12px; color: var(--texto-suave); }

/* trilho das etapas 1·2·3·4 */
.ia-etp-trilho { display: flex; flex-wrap: wrap; margin-bottom: 14px; }
.ia-etp { display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  border: 1px solid var(--borda); background: #fff; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; color: var(--texto-suave); }
.ia-etp:first-child { border-radius: 8px 0 0 8px; }
.ia-etp:last-child { border-radius: 0 8px 8px 0; }
.ia-etp + .ia-etp { border-left: 0; }
.ia-etp .num { width: 20px; height: 20px; border-radius: 50%; background: #EDF1F3;
  color: var(--texto-suave); display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; }
.ia-etp.on { background: #EDF3F6; color: var(--azul); border-color: var(--azul);
  border-left: 1px solid var(--azul); }
.ia-etp.on .num { background: var(--azul); color: #fff; }
.ia-objetivo { background: #F8FAF7; border: 1px solid #E3EDE0;
  border-left: 4px solid var(--verde-escuro); border-radius: 6px; padding: 10px 14px;
  font-size: 13px; line-height: 1.55; margin-bottom: 14px; }
.ia-duas { display: grid; grid-template-columns: 1fr 320px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .ia-duas { grid-template-columns: 1fr; } }
.ia-ferr { display: inline-flex; align-items: center; gap: 6px; background: #F3F7FA;
  border: 1px solid #DCE6EC; border-radius: 999px; padding: 5px 11px; font-size: 12px;
  color: var(--azul); font-weight: 600; margin: 0 4px 6px 0; }
.ia-lat { border: 1px solid var(--borda); border-radius: 10px; overflow: hidden;
  margin-bottom: 12px; }
.ia-lat h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-suave); font-weight: 700; padding: 10px 13px; background: #FBFBFA;
  border-bottom: 1px solid var(--borda); margin: 0; }
.ia-lat .dentro { padding: 11px 13px; font-size: 12.5px; line-height: 1.6; }
.ia-script { border-bottom: 1px solid #f0f2f4; padding: 9px 0; }
.ia-script:last-child { border-bottom: 0; }
.ia-script b { font-size: 12.5px; display: block; margin-bottom: 3px; }
.ia-script p { font-size: 12.5px; color: var(--texto-suave); line-height: 1.5; margin: 0;
  white-space: pre-line; }
.ia-editar { float: right; font-size: 12px; color: var(--link); cursor: pointer;
  font-weight: 600; margin-left: 10px; }

/* tabelas da aba (assuntos, vizinhos, versões, diário) */
.ia-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.ia-tab th { text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--texto-suave); padding: 9px 14px; background: #FBFBFA;
  border-bottom: 1px solid var(--borda); }
.ia-tab td { padding: 10px 14px; border-bottom: 1px solid #f0f2f4; vertical-align: top; }
.ia-tab tr:last-child td { border-bottom: 0; }
.ia-tab .mini { font-size: 12px; color: var(--texto-suave); }
.ia-add { display: block; padding: 10px 14px; font-size: 13px; color: var(--link);
  font-weight: 600; cursor: pointer; }

/* lista do FAQ */
.ia-faq { border-bottom: 1px solid #f0f2f4; padding: 10px 16px; }
.ia-faq:last-child { border-bottom: 0; }
.ia-faq b { font-size: 13px; display: block; }
.ia-faq p { font-size: 12.5px; color: var(--texto-suave); margin: 3px 0 0; line-height: 1.5; }

/* ============================================================
   v1.415 — ATENDENTE IA: o chip na tela Conversas e a gaveta de teste
   ============================================================ */
/* o chip no topo da conversa */
#cv-ia-chip { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px;
  position: relative; flex: 0 0 auto; }
.cv-ia-botao { background: #fff; border: 1px solid var(--borda); border-radius: 6px;
  padding: 4px 9px; font-family: inherit; font-size: 11.5px; font-weight: 600;
  color: var(--texto-suave); cursor: pointer; white-space: nowrap; }
.cv-ia-botao:hover { border-color: var(--azul); color: var(--azul); background: #EDF3F6; }
.cv-ia-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 30;
  background: #fff; border: 1px solid var(--borda); border-radius: 10px; width: 200px;
  box-shadow: 0 6px 18px rgba(0,0,0,.14); overflow: hidden; font-size: 13px; }
.cv-ia-menu.aberto { display: block; }
.cv-ia-menu .titulo { padding: 8px 14px 4px; font-size: 10.5px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--texto-suave); font-weight: 700; }
.cv-ia-menu .item { padding: 8px 14px; cursor: pointer; }
.cv-ia-menu .item:hover { background: #F7FAFC; }

/* a gaveta de teste da aba Atendente IA */
.ia-gav-fundo { position: fixed; inset: 0; background: rgba(2,48,71,.4); display: none; z-index: 60; }
.ia-gaveta { position: fixed; top: 0; right: -430px; width: 410px; max-width: 94vw;
  height: 100vh; background: #fff; z-index: 61; box-shadow: -4px 0 18px rgba(0,0,0,.2);
  display: flex; flex-direction: column; transition: right .25s; }
.ia-gaveta.aberta { right: 0; }
.ia-gav-topo { padding: 12px 14px; border-bottom: 1px solid var(--borda); display: flex;
  align-items: center; gap: 8px; }
.ia-gav-topo b { font-size: 14px; color: var(--azul); }
.ia-gav-topo small { display: block; font-size: 11.5px; color: var(--texto-suave); }
.ia-gav-estado { padding: 8px 14px; border-bottom: 1px solid var(--borda);
  display: flex; gap: 6px; flex-wrap: wrap; background: #FBFBFA; min-height: 37px; }
.ia-gav-fio { flex: 1; overflow-y: auto; padding: 14px; background: #EFE7DE;
  background-image: radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px);
  background-size: 14px 14px; }
.ia-gav-msg { max-width: 84%; padding: 8px 11px; border-radius: 10px; margin-bottom: 9px;
  font-size: 13px; line-height: 1.45; background: #fff;
  box-shadow: 0 1px 1px rgba(0,0,0,.06); width: fit-content; white-space: pre-line; }
.ia-gav-msg.ia { background: #DCF8C6; margin-left: auto; }
.ia-gav-acao { text-align: center; margin: 6px 0 10px; }
.ia-gav-acao span { background: #E7F0F6; color: var(--azul); border-radius: 6px;
  padding: 4px 10px; font-size: 11px; font-weight: 600; display: inline-block;
  max-width: 94%; }
.ia-gav-aviso { background: rgba(255,255,255,.85); border-radius: 10px; padding: 10px 13px;
  font-size: 12.5px; color: var(--texto-suave); line-height: 1.55; margin-bottom: 10px; }
.ia-gav-resposta { display: flex; gap: 8px; padding: 10px 12px;
  border-top: 1px solid var(--borda); background: #fff; }
.ia-gav-resposta input { flex: 1; }

/* ============================================================
   v1.420 — ATENDENTE IA: o editor de etapas
   ============================================================ */
.ia-etp-add { display: flex; align-items: center; gap: 6px; padding: 9px 14px;
  border: 1px dashed var(--borda); border-left: 0; border-radius: 0 8px 8px 0;
  background: #FBFBFA; cursor: pointer; font-family: inherit; font-size: 13px;
  font-weight: 600; color: var(--link); }
.ia-etp-add:hover { background: #EDF3F6; border-color: var(--azul); }
.ia-etp .mover { display: none; gap: 2px; margin-left: 4px; }
.ia-etp.on .mover { display: inline-flex; }
.ia-etp .mover button { border: 0; background: none; cursor: pointer;
  color: var(--texto-suave); font-size: 12px; padding: 1px 3px; border-radius: 4px;
  font-family: inherit; }
.ia-etp .mover button:hover { background: #DCE6EC; color: var(--azul); }
.ia-etp .porta { font-size: 10px; }
.ia-etp-rodape { display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding-top: 12px; border-top: 1px solid #f0f2f4; gap: 10px;
  flex-wrap: wrap; }

/* ============================================================
   v1.422 — o mapa de "quando os clientes chegam" (barrinhas)
   ============================================================ */
.ia-barras { display: flex; align-items: flex-end; gap: 4px; height: 78px; }
.ia-barra { flex: 1; display: flex; flex-direction: column; align-items: center;
  justify-content: flex-end; gap: 4px; min-width: 0; }
.ia-barra-h { width: 100%; max-width: 26px; background: var(--azul-claro);
  border-radius: 3px 3px 0 0; transition: height .2s; }
.ia-barra span { font-size: 10px; color: var(--texto-suave); white-space: nowrap; }

/* ============================================================
   v1.432 — FOTO NA CONVERSA (mockup aprovado 29/08/2026)
   O clipe reusa .cv-ag-btn (mesmo botão de ícone do relógio).
   A prévia da foto escolhida senta acima da caixa de responder.
   ============================================================ */
.cv-previa { display: flex; align-items: center; gap: 10px;
  padding: 9px 14px 0; background: #fff; border-top: 1px solid var(--borda); }
.cv-previa + .cv-resposta { border-top: 0; }
.cv-previa-thumb { width: 52px; height: 52px; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--borda); flex: none; background: var(--fundo); }
.cv-previa-thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
.cv-previa-info { font-size: 12.5px; line-height: 1.45; min-width: 0; }
.cv-previa-info b { display: block; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.cv-previa-info span { color: var(--texto-suave); }
.cv-previa-x { margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--texto-suave); font-size: 16px; padding: 6px; line-height: 1; }
.cv-previa-x:hover { color: var(--erro); }
/* o clipe "armado" — há foto esperando na prévia */
#cv-anexo-btn.armado { border-color: var(--azul); background: var(--azul); color: #fff; }

/* ============================================================
   v1.433 — o clipe aceita vídeo e PDF: o quadradinho da prévia
   mostra o ícone de contorno quando não há miniatura de foto
   ============================================================ */
.cv-previa-thumb .ico { width: 100%; height: 100%; display: flex;
  align-items: center; justify-content: center; color: var(--texto-suave); }

/* ============================================================
   v1.435 — REDESENHO DA ABA ATENDENTE IA (mockup aprovado 30/08)

   1) O conserto de base: TODO campo da aba ocupa a coluna inteira
      e fala a fonte da casa (era o tamanho mínimo do navegador, e
      a textarea das etapas saía monoespaçada).
   2) O mapa lateral no lugar dos chips, com estado nas rotinas.
   3) As pastilhas do topo (estado + rascunho pendente).
   Em tela estreita o mapa deita na horizontal — nada some.
   ============================================================ */

/* 1 · os campos no tamanho certo (checkbox e range ficam como estão) */
#p-atendente input[type=text], #p-atendente input[type=number],
#p-atendente input[type=time], #p-atendente select, #p-atendente textarea {
  width: 100%; border: 1px solid var(--borda); border-radius: 8px;
  padding: 9px 12px; font-family: inherit; font-size: 13.5px;
  color: var(--texto); background: #fff; }
#p-atendente textarea { line-height: 1.55; resize: vertical; min-height: 84px; }
#ia-etp-instrucoes { min-height: 300px; }

/* 2 · o palco e o mapa */
.ia-palco { display: grid; grid-template-columns: 224px 1fr; gap: 18px;
  align-items: start; }
.ia-mapa { position: sticky; top: 14px; }
.ia-mapa h4 { font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--texto-suave); margin: 16px 0 5px 12px; font-weight: 700; }
.ia-mapa h4:first-child { margin-top: 0; }
.ia-mapa button { display: flex; align-items: center; gap: 8px; width: 100%;
  text-align: left; padding: 8px 12px; border: none; background: none;
  border-radius: 8px; font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--texto-suave); cursor: pointer; }
.ia-mapa button:hover { background: #ECECEA; }
.ia-mapa button.on { background: #EDF3F6; color: var(--azul); }
.ia-mapa .pt { width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: #C9CFD3; }
.ia-mapa .pt.ok { background: var(--verde); }
.ia-conteudo { min-width: 0; }

/* em tela estreita, o mapa vira a fileira de chips de antes */
@media (max-width: 900px) {
  .ia-palco { grid-template-columns: 1fr; }
  .ia-mapa { position: static; display: flex; gap: 6px; overflow-x: auto;
    padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
  .ia-mapa h4 { display: none; }
  .ia-mapa button { width: auto; white-space: nowrap; border: 1px solid var(--borda);
    border-radius: 999px; padding: 7px 14px; background: #fff; }
  .ia-mapa button.on { border-color: var(--azul); }
}

/* 3 · as pastilhas do topo */
.ia-pastilha { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px;
  font-weight: 600; border-radius: 999px; padding: 6px 13px;
  background: #EFF1F2; color: var(--texto-suave); border: 1px solid var(--borda); }
.ia-pastilha .pt { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.ia-pastilha.ligada { background: #EAF5EC; color: var(--ok); border-color: #CBE6D2; }
.ia-pastilha.pendente { background: #FBF3E4; color: var(--alerta); border-color: #F0E0BD; }

/* ============================================================
   v1.436 — A SETA DE RECOLHER DO TRILHO DA CONFIGURAÇÃO
   (mockup aprovado 30/08). Recolhido = régua de 54px só com os
   ícones; o rótulo vira a dica do mouse; grupos viram um risquinho;
   as estrelas somem (recolhido é modo de navegar, não de organizar).
   Estado por pessoa no localStorage (crm_cfg_trilho).
   ============================================================ */
.cfg-recolher { display: flex; justify-content: flex-end; padding: 2px 8px 0; }
.cfg-recolher button { border: 1px solid var(--borda); background: #fff; cursor: pointer;
  border-radius: 7px; width: 26px; height: 26px; display: flex; align-items: center;
  justify-content: center; color: var(--texto-suave); padding: 0; }
.cfg-recolher button:hover { color: var(--azul); border-color: var(--azul); }
.cfg-recolher svg { transition: transform .18s; }

@media (min-width: 901px) {
  .cfg { transition: grid-template-columns .18s; }
  .cfg.recolhida { grid-template-columns: 54px 1fr; }
  .cfg.recolhida .cfg-grupo { padding: 0; margin: 9px 12px 0; height: 0; overflow: hidden;
    border-top: 1px solid var(--borda); }
  .cfg.recolhida .cfg-grupo:first-of-type { border-top: 0; margin-top: 4px; }
  .cfg.recolhida .cfg-item { padding: 9px 0; justify-content: center; }
  .cfg.recolhida .cfg-item > span { display: none; }
  .cfg.recolhida .estrela-atalho { display: none; }
  .cfg.recolhida .cfg-recolher { justify-content: center; }
  .cfg.recolhida .cfg-recolher svg { transform: rotate(180deg); }
}

/* no celular o trilho já vira lista no topo — a seta não existe lá,
   e um "recolhida" lembrado do desktop não pode esconder os rótulos */
@media (max-width: 900px) {
  .cfg-recolher { display: none; }
}

/* ============================================================
   v1.437 — A FAIXA DA IA NA CAIXA FIXA
   O aviso do chip da tela Conversas, em versão de bolso: fica entre
   o topo e o fio; vazia (sem config/permissão), o :empty a esconde.
   ============================================================ */
.chatf-ia { display: flex; gap: 8px; align-items: center; padding: 6px 10px;
  border-bottom: 1px solid var(--borda); background: #FBFBFA; }
.chatf-ia:empty { display: none; }
.chatf-ia .cv-ia-botao { margin-left: auto; }
.chatf.mini .chatf-ia { display: none; }

/* ============================================================
   v1.438 — FINANCEIRO DESTE CONTATO (o cartão da ficha) +
   a pulseira do filtro por contato no Livro Caixa
   ============================================================ */
.fic-fin-resumo { display: flex; gap: 10px; flex-wrap: wrap; padding: 12px 16px;
  border-bottom: 1px solid #f0f2f4; }
.fic-fin-kpi { border: 1px solid var(--borda); border-radius: 9px; padding: 8px 13px; }
.fic-fin-kpi b { display: block; font-size: 16px; }
.fic-fin-kpi span { font-size: 11.5px; color: var(--texto-suave); }
.fic-fin-kpi.entrou b { color: var(--ok); }
.fic-fin-kpi.atraso b { color: var(--erro); }
.fic-fin-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.fic-fin-tab th { text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--texto-suave); padding: 9px 16px; background: #FBFBFA;
  border-bottom: 1px solid var(--borda); }
.fic-fin-tab td { padding: 9px 16px; border-bottom: 1px solid #f0f2f4; }
.fic-fin-tab tr:last-child td { border-bottom: 0; }
/* v1.536 — a regra de 30/08 ("registro listado é registro clicável")
   saiu daqui também: quem abre é o link, não a linha. Ela ainda acende
   ao passar o mouse, que é o que ajuda a ler a tabela. */
.fic-fin-tab tbody tr { cursor: default; }
.fic-fin-tab tbody tr:hover { background: #F1F5F7; }
/* v1.536 — o mesmo desenho das listas: quem abre o lançamento é o
   histórico, e ele se anuncia em azul o tempo todo. Antes a cor só
   aparecia no passar do mouse, porque a linha inteira também levava. */
.fic-fin-tab td a.reg-nome { color: var(--link); text-decoration: none; font-weight: 600; }
.fic-fin-tab td a.reg-nome:hover { text-decoration: underline; }
.fic-fin-tab td a { color: inherit; text-decoration: none; }
.fic-fin-tab .quando { white-space: nowrap; color: var(--texto-suave); }
.fic-fin-tab .vr { text-align: right; font-weight: 700; white-space: nowrap; }
.fic-fin-tab .vr.mais { color: var(--ok); }
.fic-fin-tab .vr.menos { color: var(--erro); }
.fic-fin-pe { padding: 10px 16px; font-size: 13px; color: var(--link);
  font-weight: 600; cursor: pointer; }
/* v1.475 — a coluna do recibo, herdada do cartão Repasses que saiu.
   Os botões são os mesmos de lá; só mudaram de casa. */
.fic-fin-tab .doc { white-space: nowrap; text-align: right; }
.fic-fin-tab .doc .btn { padding: 3px 9px; font-size: 12px; }

.fin-chip-contato { display: flex; gap: 8px; align-items: center; margin-bottom: 12px;
  background: #EDF3F6; border: 1px solid var(--azul); border-radius: 10px;
  padding: 9px 14px; font-size: 13px; color: var(--azul); }
.fin-chip-contato button { margin-left: auto; border: 1px solid var(--borda);
  background: #fff; border-radius: 7px; padding: 4px 10px; cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600; color: var(--texto-suave); }
.fin-chip-contato button:hover { color: var(--erro); border-color: var(--erro); }

/* =====================================================================
   v1.440 — O CRM NO CELULAR (estilo Salesforce mobile, mockup de 30/08)
   A barra fixa de baixo, a tela Menu e a cor de cada objeto.
   A barra e a tela Menu SÓ EXISTEM até 760px — o computador não muda.
   ===================================================================== */



/* o quadradinho pequeno das listas da janela "Meu CRM no celular" —
   aparece também no computador, porque a escolha se faz de qualquer tela */
.pm-ico.mc-mini { width: 26px; height: 26px; border-radius: 7px; color: #fff;
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.mcel-nota { font-size: 12.5px; color: var(--texto-suave); line-height: 1.5;
  margin: 0 0 10px; }
#mcel-barra, #mcel-objetos { border: 1px solid var(--borda); border-radius: 8px;
  margin-bottom: 6px; max-height: 300px; overflow-y: auto; }
#janela-meu-celular .ia-chave { width: 34px; height: 20px; }
#janela-meu-celular .ia-chave i:before { width: 14px; height: 14px; }
#janela-meu-celular .ia-chave input:checked + i:before { transform: translateX(14px); }
#janela-meu-celular .acoes { display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 16px; }

/* fora do celular, a barra e a tela Menu não existem */
.barra-celular { display: none; }
.menu-celular { display: none; }

@media (max-width: 760px) {
  /* ---- a barra de baixo ---- */
  .barra-celular { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
    display: flex; background: #fff; border-top: 1px solid var(--borda);
    padding: 3px 0 max(7px, env(safe-area-inset-bottom)); }
  .bc-item { flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 3px; padding-top: 6px; font-size: 10px; color: var(--texto-suave);
    text-decoration: none; border: 0; border-top: 3px solid transparent;
    background: none; font-family: inherit; cursor: pointer; position: relative;
    min-width: 0; }
  .bc-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis;
    white-space: nowrap; padding: 0 2px; }
  .bc-item.ativo { color: var(--azul); font-weight: 700; border-top-color: var(--verde); }
  .bc-item .pino-fila { position: absolute; top: 1px; left: 50%; margin-left: 6px; }

  /* v1.551 — O MENU PRECISA SE VER DE LONGE.
     Ele não é mais um atalho entre os outros: depois que os quatro
     ícones saíram do cabeçalho, é por ele que se chega a Configuração,
     a Minha conta e ao Sair. Traço mais grosso e rótulo em negrito, no
     navy da marca. Nada de borda verde em cima — essa continua sendo
     só de quem está ABERTO, e o Menu nunca é uma tela.
     O `stroke-width` do CSS vence o do próprio SVG (atributo de
     apresentação perde para qualquer regra de folha), então o
     icone('menuLinhas') não precisou mudar. */
  .bc-item.bc-menu { color: var(--azul); font-weight: 700; }
  .bc-item.bc-menu svg { stroke-width: 2.6; }

  /* o pé da tela é da barra: o conteúdo ganha respiro e o que morava
     no rodapé se acomoda — os Últimos saem (o celular chega aos
     registros pela busca e pelas listas), e as faixas fixas sobem */
  body.com-barra-celular { padding-bottom: 64px; }
  body.com-barra-celular .barra-recentes { display: none; }
  body.com-barra-celular .faixa-whats { bottom: 58px; }
  body.com-barra-celular .faixa-whats.recolhida { bottom: 66px; }
  body.com-barra-celular .faixa-backup { bottom: 58px; }
  body.com-barra-celular:has(.faixa-whats) .faixa-backup { bottom: 96px; }
  body.com-barra-celular .chatf { bottom: 64px; }

  /* ---- a tela Menu ---- */
  .menu-celular.aberto { display: flex; position: fixed; inset: 0; z-index: 94;
    background: var(--fundo); flex-direction: column; }
  .mc-topo { background: #fff; border-bottom: 3px solid var(--azul);
    padding: 12px 16px; display: flex; align-items: center; flex: 0 0 auto; }
  .mc-titulo { font-size: 18px; font-weight: 700; color: var(--azul); flex: 1; }
  .mc-fechar { border: 0; background: none; font-size: 18px; color: var(--texto-suave);
    cursor: pointer; padding: 4px 8px; font-family: inherit; }

  /* v1.551 — quem está logado, no alto da tela Menu.
     Fica FORA da `.mc-lista` de propósito: a lista rola, e o nome de
     quem está dentro do sistema não pode sumir com a rolagem. É o que
     o chip da foto dizia no cabeçalho, antes de ele sair do celular. */
  .mc-conta { flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
    background: #fff; padding: 12px 16px; border-bottom: 1px solid var(--borda); }
  .mc-conta-foto { flex: 0 0 auto; display: flex; }
  .mc-conta-quem { display: flex; flex-direction: column; min-width: 0; }
  .mc-conta-nome { font-size: 15px; font-weight: 700; color: var(--azul);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mc-conta-papel { font-size: 12px; color: var(--texto-suave);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  /* a divisória "Minha conta" no fim da lista de objetos */
  .mc-grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
    color: var(--texto-suave); background: #FAFAF9; padding: 7px 16px;
    border-top: 1px solid var(--borda); border-bottom: 1px solid var(--borda); }
  .mc-lista { flex: 1; overflow-y: auto; background: #fff; }
  .mc-item { display: flex; align-items: center; gap: 12px; padding: 11px 16px;
    border-bottom: 1px solid #F1F1EF; font-size: 14.5px; font-weight: 500;
    color: var(--texto); text-decoration: none; position: relative; }
  .mc-tile { width: 34px; height: 34px; border-radius: 9px; background: var(--azul);
    color: #fff; display: flex; align-items: center; justify-content: center;
    flex: 0 0 auto; }
  .mc-nome { flex: 1; }
  .mc-seta { color: #B9C3C9; }
  /* v1.551 — as ações da conta não são objetos: quadradinho neutro, e
     não a cor do objeto. Vêm DEPOIS do `.mc-tile` de propósito — as
     duas regras têm o mesmo peso, e quem vence é a última (a mesma
     lição do bloco `.obj-*` no fim do arquivo). */
  .mc-tile.mc-tile-conta { background: #E7ECEF; color: var(--azul); }
  .mc-tile.mc-tile-sair { background: #F6E7E4; color: var(--erro); }
  .mc-sair .mc-nome { color: var(--erro); font-weight: 600; }
  /* o número da fila entra por appendChild, DEPOIS da seta — a ordem
     visual (nome · número · seta) sai do flex, não do documento */
  .mc-item .mc-tile { order: 0; }
  .mc-item .mc-nome { order: 1; }
  .mc-item .pino-fila { order: 2; position: static; margin-left: auto; }
  .mc-item .mc-seta { order: 3; }
  .mc-pe { flex: 0 0 auto; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    font-size: 12.5px; color: var(--texto-suave); text-align: center;
    border-top: 1px solid var(--borda); background: #fff; }
  .mc-pe a { color: var(--azul); font-weight: 600; text-decoration: none; }
}

/* =====================================================================
   v1.441 — A FICHA NO CELULAR, parte 2 (estilo Salesforce, mockup 30/08)
   A fileira de ações redondas e o trilho de etapas que rola.
   Mesmo breakpoint da parte 1 (v1.317): 560px. O computador não muda.
   ===================================================================== */

/* o envoltório das etapas do lead: no computador, o mesmo flex de
   sempre — ele só existe para o celular poder rolar as etapas */
.path-etapas { display: flex; align-items: stretch; flex: 1 1 auto; min-width: 0; }

/* fora do celular a fileira de bolas não existe */
.fic-acel { display: none; }

@media (max-width: 560px) {
  /* ---- a fileira de ações redondas ---- */
  .fic-acel { display: flex; justify-content: space-around; flex-basis: 100%;
    padding: 2px 0 4px; }
  .fic-acel .ac { display: flex; flex-direction: column; align-items: center;
    gap: 5px; border: 0; background: none; font-family: inherit; font-size: 11px;
    color: var(--texto-suave); cursor: pointer; text-decoration: none;
    min-width: 0; max-width: 84px; padding: 0; }
  .fic-acel .ac .bola { width: 46px; height: 46px; border-radius: 50%;
    background: #E7F0F6; border: 1px solid #DCE7EE; color: var(--azul);
    display: flex; align-items: center; justify-content: center; }
  .fic-acel .ac.principal .bola { background: var(--azul); border-color: var(--azul);
    color: #fff; }
  .fic-acel .ac.on .bola { background: var(--azul); border-color: var(--azul);
    color: #fff; }

  /* a barra de sempre fica atrás do "Mais" — as ações são as mesmas,
     só o lugar do botão muda */
  .destaque .acoes-ficha { display: none; }
  body.fic-acoes-abertas .destaque .acoes-ficha { display: flex; }

  /* ---- o trilho de etapas rola; os botões ficam parados embaixo ---- */
  .path-etapas { flex: 1 1 100%; overflow-x: auto; scrollbar-width: none;
    -webkit-overflow-scrolling: touch; }
  .path-etapas::-webkit-scrollbar { display: none; }
  .path-etapas .et { flex: 0 0 auto; }
  .path-acao { margin-left: 0; margin-top: 10px; width: 100%; }
  .path-acao .btn { flex: 1; justify-content: center; }
}

/* A cor de cada objeto — FICA NO FIM DO ARQUIVO de propósito: o
   .mc-tile traz um navy de reserva (objeto novo sem cor ainda), e a
   cor só vence a reserva se vier DEPOIS dele na folha. */
/* A cor de cada objeto (quadradinho colorido, ícone branco de traço).
   A CHAVE é o nome da tela ('parcelas', 'competencias'), não o obj —
   Transmissão e Campanhas dividem o obj 'administracao'. */
.obj-inicio       { background: #023047; }
.obj-leads        { background: #D97B29; }
.obj-contatos     { background: #7C6FCB; }
.obj-imoveis      { background: #2E86AB; }
.obj-contratos    { background: #4E8F3C; }
.obj-casos        { background: #B7791F; }
.obj-sinistros    { background: #C0392B; }
.obj-parcelas     { background: #2A9D8F; }   /* Comissões */
.obj-competencias { background: #C25B78; }   /* Aluguéis */
.obj-tarefas      { background: #3E9C55; }
.obj-planos       { background: #5B6ACF; }
.obj-fichas       { background: #C99011; }
.obj-conversas    { background: #1993C4; }
.obj-postagens    { background: #B65AA0; }
.obj-transmissao  { background: #6B5CA5; }
.obj-campanhas    { background: #E0653F; }
.obj-painel       { background: #566E8C; }
.obj-financeiro   { background: #2F7D52; }
.obj-relatorios   { background: #3B7DA8; }
.obj-paineis      { background: #0E7C86; }   /* v1.519 — Painéis (dashboards) */
.obj-configuracao { background: #5B6870; }


/* =====================================================================
   v1.448 — A LINHA DA VIDA DO CONTRATO, o rodapé compacto do dinheiro
   e as cores do app no computador (mockups aprovados em 30/08/2026)
   ===================================================================== */

/* A linha da vida: início e fim nas pontas, a bolinha é hoje, o
   tracinho âmbar é o próximo reajuste. Mora no destaque da ficha. */
.fcc-vida { margin-top: 14px; border: 1px solid var(--borda); border-radius: 10px;
  background: #FBFBFA; padding: 16px 18px 14px; }
.fcc-vida-linha { display: grid; grid-template-columns: auto 1fr auto; gap: 18px;
  align-items: center; }
.fcc-vida-linha.sem-barra { grid-template-columns: auto auto; justify-content: space-between; }
.fcc-vida .ponta .r { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--texto-suave); font-weight: 700; display: block; }
.fcc-vida .ponta .v { font-size: 19px; font-weight: 800; color: var(--azul); margin-top: 2px; }
.fcc-vida .ponta .d { font-size: 11.5px; color: var(--texto-suave); margin-top: 1px; }
.fcc-vida .ponta.fim { text-align: right; }
.fcc-vida-barra { position: relative; height: 46px; }
.fcc-vida-barra .trilho { position: absolute; left: 0; right: 0; top: 19px; height: 8px;
  background: #E7E7E5; border-radius: 6px; }
.fcc-vida-barra .cheio { position: absolute; left: 0; top: 19px; height: 8px;
  background: var(--verde); border-radius: 6px 0 0 6px; }
.fcc-vida-barra .hoje { position: absolute; top: 15px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; border: 4px solid var(--azul);
  transform: translateX(-50%); box-shadow: 0 1px 3px rgba(2,48,71,.25); }
.fcc-vida-barra .hoje-rotulo { position: absolute; top: -4px; transform: translateX(-50%);
  font-size: 11.5px; font-weight: 700; color: var(--azul); white-space: nowrap; }
.fcc-vida-barra .marco { position: absolute; top: 17px; width: 2px; height: 12px;
  background: var(--alerta); transform: translateX(-50%); border-radius: 2px; }
.fcc-vida-barra .marco-rotulo { position: absolute; top: 32px; transform: translateX(-50%);
  font-size: 11px; color: var(--alerta); font-weight: 600; white-space: nowrap; }
@media (max-width: 860px) {
  .fcc-vida-linha { grid-template-columns: 1fr 1fr; }
  .fcc-vida-barra { grid-column: 1 / -1; grid-row: 2; }
}

/* O rodapé do cartão do dinheiro: 3 caixinhas + botões com a
   explicação ao lado (era uma pilha de faixas com muito vazio). */
.fcc-din-rodape { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 10px; margin-top: 12px; }
.fcc-din-box { border: 1px solid var(--borda); border-radius: 10px; padding: 10px 13px;
  background: #F8F8F7; }
.fcc-din-box.destacada { background: #F5F9F3; border-color: #D8E8CF; }
.fcc-din-box .r { font-size: 10.5px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--texto-suave); font-weight: 700; display: flex; align-items: center; }
.fcc-din-box .v { font-size: 14.5px; font-weight: 700; color: var(--azul); margin-top: 3px; }
.fcc-din-box .v small { font-size: 11.5px; font-weight: 600; color: var(--texto-suave); }
.fcc-din-box .d { font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; line-height: 1.45; }
.fcc-din-box .tx-barra { margin-top: 6px; }
.fcc-din-box .lapis-caixa { margin-left: auto; border: 0; background: none; cursor: pointer;
  color: var(--texto-suave); font-size: 12px; padding: 0 2px; font-family: inherit; }
.fcc-din-box .lapis-caixa:hover { color: var(--azul); }
.fcc-din-acoes { display: flex; gap: 12px 16px; align-items: center; flex-wrap: wrap;
  margin-top: 14px; }
.fcc-din-acoes .rg-acoes { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.fcc-din-acoes .rg-nota-acoes { flex: 1; min-width: 260px; margin: 0; }

/* Seção estreita vira leitura de linha: rótulo à esquerda, valor à
   direita. Vale para toda seção 'quarto' e para a 'metade' de uma
   coluna só — as Condições do contrato voltaram para 'metade' na
   v1.449: no quarto, rótulo comprido ("Fim previsto (último dia do
   contrato)") estourava a caixa e o valor sumia. O rótulo pode
   quebrar; o valor é quem fica inteiro. */
.cartao.c-quarto .campos-ficha > div,
.cartao.c-metade .campos-ficha.uma-coluna > div { display: flex; justify-content: space-between;
  align-items: baseline; gap: 10px; border-bottom: 1px dotted #EEEEEC; padding-bottom: 5px; }
.cartao.c-quarto .campos-ficha > div:last-child,
.cartao.c-metade .campos-ficha.uma-coluna > div:last-child { border-bottom: 0; }
.cartao.c-quarto .campos-ficha .r,
.cartao.c-metade .campos-ficha.uma-coluna .r { text-transform: none; font-size: 12.5px;
  letter-spacing: 0; font-weight: 400; color: var(--texto-suave); }
.cartao.c-quarto .campos-ficha .v,
.cartao.c-metade .campos-ficha.uma-coluna .v { margin-top: 0; text-align: right;
  font-weight: 600; font-size: 13px; flex: 0 0 auto; max-width: 60%; }
.cartao.c-quarto .campos-ficha .v.editavel,
.cartao.c-metade .campos-ficha.uma-coluna .v.editavel { justify-content: flex-end; }
/* editando com o lápis, a linha volta a empilhar — o input precisa da largura */
.cartao.c-quarto .campos-ficha > div:has(.v.editando),
.cartao.c-metade .campos-ficha.uma-coluna > div:has(.v.editando) { display: block; }

/* As cores do app chegam ao computador: a grade de objetos e os blocos
   quem-é-quem usam as classes .obj-* (definidas logo acima). O fundo já
   vem delas; aqui só o traço do ícone vira branco — e as duas regras
   compostas que precisavam de mais peso. */
.lanc-ico[class*="obj-"] svg { color: #fff; }
.fcc-parte .ico.obj-imoveis  { background: #2E86AB; }
.fcc-parte .ico.obj-contatos { background: #7C6FCB; }
.fcc-parte .ico.obj-contratos { background: #4E8F3C; }
.fcc-parte .ico[class*="obj-"] { color: #fff; }

/* ============================================================
   v1.486 — LEGENDAS COM IA
   O botão no rótulo da legenda (tela Postagens, prefixo pg-ia-) e a
   aba da Configuração (prefixo lia-). Modificador sempre com o prefixo
   do componente — a lição do `.vazio` (v1.453).
   ============================================================ */
.pg-ia-cab { display: flex; align-items: center; gap: 8px; }
.pg-ia-cab .vao { flex: 1; }
.pg-ia-btn { display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
  font-size: 12px; font-weight: 600; color: var(--azul); background: #fff;
  border: 1px solid var(--borda); border-radius: 8px; padding: 5px 10px; cursor: pointer; }
.pg-ia-btn:hover { background: #E7F0F6; border-color: var(--azul); }
.pg-ia-btn svg { flex: none; }
.pg-ia-btn[disabled] { opacity: .6; cursor: progress; }
.pg-ia-btn .gira { width: 12px; height: 12px; border: 2px solid #CFE0EA; border-top-color: var(--azul);
  border-radius: 50%; animation: pgIAGira .8s linear infinite; }
@keyframes pgIAGira { to { transform: rotate(360deg); } }
/* a linha sob a legenda quando a IA escreveu; vazia, não ocupa nada */
.pg-ia-rodape { display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: var(--texto-suave); margin-top: 3px; flex-wrap: wrap; }
.pg-ia-rodape:empty { display: none; }
.pg-ia-rodape .pt { width: 7px; height: 7px; border-radius: 50%; background: var(--verde); flex: none; }
.pg-ia-rodape .vao { flex: 1; }
.pg-ia-rodape a { color: var(--link); text-decoration: none; font-weight: 600; }

/* a aba: campos no tamanho certo, como na Atendente */
#p-legendas input[type=text], #p-legendas input[type=number], #p-legendas select,
#p-legendas textarea { width: 100%; border: 1px solid var(--borda); border-radius: 8px;
  padding: 9px 12px; font-family: inherit; font-size: 13.5px; color: var(--texto); background: #fff; }
#p-legendas textarea { line-height: 1.55; resize: vertical; min-height: 84px; }
/* a regra fixa que não é caixinha: o endereço nunca sai */
.lia-regra { display: flex; align-items: flex-start; gap: 9px; background: #FBE7E4;
  border: 1px solid #F1C9C3; border-radius: 9px; padding: 10px 12px; font-size: 12.5px;
  line-height: 1.5; color: #7A2E22; }
.lia-regra svg { flex: none; margin-top: 1px; color: #A33526; }
.lia-regra b { color: #A33526; }
.lia-lista { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 14px; }
.lia-lista label { display: flex; align-items: center; gap: 7px; font-size: 13px; padding: 5px 0; }
.lia-lista input { accent-color: var(--azul); }
.lia-lista label.trancada { color: var(--texto-suave); }
.lia-lista label .tag { margin-left: auto; font-size: 10.5px; padding: 2px 8px; }
@media (max-width: 700px) { .lia-lista { grid-template-columns: 1fr; } }
/* os exemplos: textarea com o × de tirar no canto */
.lia-ex-item { position: relative; margin-bottom: 10px; }
.lia-ex-item textarea { padding-right: 36px; }
.lia-ex-tirar { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; border: 0;
  border-radius: 6px; background: transparent; color: var(--texto-suave); font-size: 18px;
  line-height: 1; cursor: pointer; }
.lia-ex-tirar:hover { background: #FBE7E4; color: var(--erro); }
/* a legenda de exemplo */
.lia-exemplo { background: #F7FBF6; border: 1px solid #CFE3D6; border-radius: 9px; padding: 11px 13px;
  font-size: 13px; line-height: 1.6; white-space: pre-wrap; }

/* ============================================================
   v1.494 — A SELEÇÃO E O LOTE NA LISTA
   A coluna das caixinhas, a barra que aparece quando há alguém marcado
   e o aviso da janela do lote. Ver o bloco da v1.494 no lista.js.
   ============================================================ */
.lst-cx { width: 38px; padding-left: 12px !important; padding-right: 0 !important; }
.lst-cx input[type=checkbox] { width: 17px; height: 17px; cursor: pointer;
  accent-color: #023047; }

/* A barra só existe quando há linha marcada — uma faixa parada o dia
   inteiro, sem nada para fazer, é ruído. */
.lst-sel-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #EDF3F6; border: 1px solid #DDE6EA; border-radius: 10px;
  padding: 10px 14px; margin-bottom: 10px; font-size: 13.5px; color: var(--azul); }
.lst-sel-barra span { color: var(--texto-suave); font-size: 12.5px; }
.lst-sel-barra.ok { background: #EBF6E4; border-color: #CFE6C2; color: var(--verde-escuro); }
.lst-sel-barra.ruim { background: #FDECEE; border-color: #F3C9CE; color: var(--erro); }
.lst-sel-limpar { background: none; border: 0; color: var(--link); font: inherit;
  font-size: 13px; font-weight: 600; cursor: pointer; padding: 4px 6px; border-radius: 5px; }
.lst-sel-limpar:hover { background: #fff; }
/* v1.587 — o encaixe da tela na barra da seleção (Aluguéis: o repasse).
   O texto entra depois do "Limpar seleção", atrás de um filete; os
   botões da tela ficam ao lado do "Atualizar em lote". Em vermelho
   quando a seleção não serve (proprietários diferentes, parcela não
   recebida) — o botão fica, desligado, e o texto diz por quê. */
.lst-sel-barra .sel-extra { display: inline-flex; align-items: center; gap: 6px; padding-left: 12px;
  border-left: 1px solid #C9D6DE; color: var(--azul); font-size: 13.5px; }
.lst-sel-barra .sel-extra b { color: var(--azul); }
.lst-sel-barra .sel-extra.ruim, .lst-sel-barra .sel-extra.ruim b { color: var(--erro); }
.lst-sel-barra .sel-acoes { display: flex; gap: 8px; margin-left: auto; }
.lst-sel-barra .sel-acoes .btn:disabled { opacity: .45; cursor: not-allowed; }

.lote-aviso { background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px;
  padding: 11px 13px; font-size: 13px; line-height: 1.65; margin-top: 14px; }
.lote-aviso i { font-style: normal; font-size: 12px; color: var(--texto-suave); }

/* ============================================================
   CONFIGURAÇÃO → INTEGRAÇÕES (v1.497)
   O cartão de cada conta externa em duas colunas: à esquerda o que a
   pessoa faz aqui; à direita o roteiro do lado de lá (painel do Asaas,
   celular, Business Suite). Chave nunca volta para a tela — só o final.
   ============================================================ */
.int-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.int-marca { width: 36px; height: 36px; border-radius: 9px; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 13px; letter-spacing: .3px; flex: 0 0 auto; }
.int-marca.asaas { background: #EAF4FF; color: #0057B8; }
.int-marca.whats { background: #E7F8EE; color: #128C7E; }
.int-marca.meta  { background: #F0EEFF; color: #6A3DFF; }
.int-marca.ia    { background: #FFF3E6; color: #B5560A; }
.int-nome { font-size: 15px; font-weight: 700; color: var(--azul); }
.int-sub { font-size: 12.5px; color: var(--texto-suave); margin-top: 1px; }
.int-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; margin-top: 14px; }
.int-lado-titulo { font-size: 12px; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .3px; }
.int-guardada { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--borda);
  border-radius: 8px; background: #FAFBFB; font-size: 13px; flex-wrap: wrap; }
.int-guardada.ativa { border-color: var(--verde-escuro); }
.int-guardada code { font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; color: var(--azul); }
.int-guardada .quando { color: var(--texto-suave); font-size: 12px; }
.int-guardada .dir { margin-left: auto; }
.int-guardada .btn { padding: 6px 12px; font-size: 12.5px; }
.int-copiar { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.int-copiar input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--borda); border-radius: 7px;
  font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; background: #fff; color: var(--texto); }
.int-copiar .btn { padding: 8px 12px; font-size: 12.5px; border-radius: 7px; }
.int-passos { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.int-passos li { display: flex; gap: 10px; font-size: 13px; line-height: 1.5; }
.int-passos b.n { width: 22px; height: 22px; border-radius: 50%; background: #EDF3F6; color: var(--azul);
  font-size: 12px; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; margin-top: 1px; }
.int-embreve { margin-top: 14px; padding: 12px 14px; border: 1px dashed #C9D6DC; border-radius: 9px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: #FCFDFD; }
.int-embreve .btn[disabled] { opacity: .45; cursor: not-allowed; }
.int-embreve .exp { font-size: 12.5px; color: var(--texto-suave); flex: 1; min-width: 220px; }
.int-barra { height: 10px; border-radius: 999px; background: #E4EAED; overflow: hidden; margin: 8px 0 6px; }
.int-barra > i { display: block; height: 100%; background: var(--verde-escuro); border-radius: 999px; }
.int-barra.alerta > i { background: var(--alerta); }
.int-barra.estourou > i { background: var(--erro); }
.int-usos { display: grid; grid-template-columns: 1fr auto auto; gap: 6px 16px; font-size: 13px; margin-top: 10px; }
.int-usos .k { color: var(--texto-suave); }
.int-usos .v { text-align: right; font-variant-numeric: tabular-nums; }
.int-usos .p { text-align: right; color: var(--texto-suave); font-size: 12px; }
.int-conta { margin-top: 10px; padding: 10px 12px; border-left: 3px solid var(--verde-escuro); background: #F5F8F4;
  border-radius: 8px; font-size: 13px; line-height: 1.5; }
.int-conta b { color: var(--azul); }
.int-rodape { margin-top: 12px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.int-rodape .exp { font-size: 12.5px; color: var(--texto-suave); }
@media (max-width: 900px) { .int-grid { grid-template-columns: 1fr; } }

/* ============================================================
   MÓDULOS POR PLANO (v1.499) — a matriz em Planos e limites, a
   lista na ficha da imobiliária, a página "não está no seu plano"
   ============================================================ */
.mod-tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mod-tab th { text-align: left; padding: 10px 12px; background: #F8F8F7; border-bottom: 2px solid var(--borda);
  color: var(--texto-suave); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.mod-tab th.c { text-align: center; width: 120px; }
.mod-tab th.c small { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; color: #8a94a1; font-size: 11px; }
.mod-tab td { padding: 9px 12px; border-bottom: 1px solid #F0F0EF; vertical-align: middle; }
.mod-tab td.c { text-align: center; }
.mod-tab tr.grupo td { background: #FAFBFB; font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--texto-suave); font-weight: 700; padding: 8px 12px; }
.mod-tab .nome { font-weight: 600; color: var(--texto); }
.mod-tab .desc { display: block; font-size: 12px; color: var(--texto-suave); margin-top: 1px; }
.mod-tab .fixo { color: #8a94a1; font-size: 12px; }
.mod-tab input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--verde-escuro); }
.mod-tab tr:hover td { background: #FCFDFD; }
.mod-tab tr.grupo:hover td { background: #FAFBFB; }
.mod-empresa { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .mod-empresa { grid-template-columns: 1fr; } }
.mod-lista { border: 1px solid var(--borda); border-radius: 8px; padding: 6px 0; max-height: 300px; overflow: auto; }
.mod-lista label { display: flex; align-items: center; gap: 9px; padding: 6px 12px; font-size: 13px; cursor: pointer; }
.mod-lista label:hover { background: #F5F8F4; }
.mod-lista label.herdado { color: var(--texto-suave); }
.mod-lista label input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--verde-escuro); }
.mod-lista .tag { padding: 1px 8px; font-size: 10.5px; margin-left: auto; }
/* o pé discreto dos documentos que saem para fora */
.pe-morali { text-align: center; font-size: 10.5px; color: #8a94a1; margin-top: 10px; letter-spacing: .2px; }

/* ============================================================
   v1.500 — A PLATAFORMA (plataforma.html)
   A tela de quem gerencia o SaaS: filete verde no topo para ninguém
   confundir com o CRM, a lista de imobiliárias com o uso, a matriz
   de limites (linhas = limites, colunas = planos) e a porta própria.
   ============================================================ */
.topo.plat { border-bottom-color: var(--verde-escuro); }
.topo.plat .logo small { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--verde-escuro); margin-left: 10px; text-transform: uppercase; }
.topo.plat nav a.ativo { border-bottom-color: var(--azul); }
.topo.plat .usuario { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.topo.plat .usuario a { color: var(--link); text-decoration: none; font-size: 13px; }
main.pl-main { max-width: 2000px; margin: 0 auto; padding: 20px; width: 100%; }   /* v1.530 — era 1340; ver o teto único em main */
.pl-sub { font-size: 13px; color: var(--texto-suave); margin: 0 0 14px; line-height: 1.55; }
.pl-nota { font-size: 12.5px; color: var(--texto-suave); line-height: 1.55; }

/* a porta */
.caixa-login .marca { font-size: 22px; font-weight: 800; color: var(--azul); letter-spacing: 1px; text-align: center; }
.caixa-login .marca small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .14em; color: var(--verde-escuro); margin-top: 2px; }
.caixa-login .rodape-porta { font-size: 11.5px; color: #8a94a1; margin-top: 16px; line-height: 1.5; text-align: center; }
.pl-negado { max-width: 520px; margin: 12vh auto; background: #fff; border: 1px solid var(--borda); border-radius: 12px; padding: 34px; text-align: center; box-shadow: 0 1px 2px rgba(2,48,71,.06); }
.pl-negado h1 { color: var(--azul); font-size: 20px; margin: 10px 0; }
.pl-negado p { color: var(--texto-suave); font-size: 14px; line-height: 1.6; margin-bottom: 22px; }

/* a lista de imobiliárias com o uso */
.uso { display: inline-block; min-width: 92px; }
.uso .b { height: 6px; border-radius: 999px; background: #E4EAED; overflow: hidden; margin-top: 4px; }
.uso .b > i { display: block; height: 100%; background: var(--verde-escuro); }
.uso .b.alerta > i { background: var(--alerta); }
.uso .b.estouro > i { background: var(--erro); }
.uso .t { font-size: 12px; color: var(--texto); white-space: nowrap; }
.pl-acoes { white-space: nowrap; }
.pl-acoes .btn { padding: 5px 12px; font-size: 12px; }

/* a matriz de limites: linhas = limites, colunas = planos */
.lim-tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.lim-tab th { text-align: left; padding: 10px 12px; background: #F8F8F7; border-bottom: 2px solid var(--borda); color: var(--texto-suave); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.lim-tab th.c { text-align: center; width: 130px; }
.lim-tab th.c small { display: block; text-transform: none; letter-spacing: 0; font-weight: 400; color: #8a94a1; font-size: 11px; }
.lim-tab th.m { width: 118px; }
.lim-tab td { padding: 8px 12px; border-bottom: 1px solid #F0F0EF; vertical-align: middle; }
.lim-tab td.c { text-align: center; }
.lim-tab tr.grupo td { background: #FAFBFB; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-suave); font-weight: 700; padding: 8px 12px; }
.lim-tab .nome { font-weight: 600; color: var(--texto); }
.lim-tab .desc { display: block; font-size: 12px; color: var(--texto-suave); margin-top: 1px; }
.lim-tab input { width: 84px; padding: 6px 8px; border: 1px solid var(--borda); border-radius: 7px; font-family: inherit; font-size: 13.5px; text-align: center; background: #fff; }
.lim-tab input::placeholder { color: #B8C1C7; }
.lim-tab .unid { font-size: 11px; color: #8a94a1; margin-left: 4px; }
.lim-tab select.modo { padding: 5px 6px; border: 1px solid var(--borda); border-radius: 7px; font-family: inherit; font-size: 12px; background: #fff; color: var(--texto-suave); }
.lim-tab tr:hover td { background: #FCFDFD; }
.lim-tab tr.grupo:hover td { background: #F2F6F8; }

/* v1.511 — a matriz que cresceu: grupos que dobram, busca e a etiqueta
   do porquê. `esconde` é display:none — a linha continua no DOM, senão
   o Salvar gravaria o limite em branco. */
.lim-tab tr.grupo td { cursor: pointer; user-select: none; }
.lim-tab tr.esconde { display: none; }
.lim-seta { display: inline-flex; width: 16px; color: var(--texto-suave); transition: transform .15s; vertical-align: -2px; }
.lim-seta.fechada { transform: rotate(-90deg); }
.lim-cnt { float: right; font-weight: 400; text-transform: none; letter-spacing: 0; color: #98A2A9; font-size: 11px; }
.lim-busca { display: flex; align-items: center; gap: 12px; padding: 12px 16px 0; flex-wrap: wrap; }
.lim-busca input { padding: 7px 12px; border: 1px solid var(--borda); border-radius: 8px; width: 280px;
  max-width: 100%; font-size: 13px; font-family: inherit; background: #fff; }
.lim-busca input:focus { outline: 2px solid var(--azul); outline-offset: -1px; }
.lim-busca .r { font-size: 12.5px; color: var(--texto-suave); }
.lim-tag { display: inline-block; margin-left: 6px; font-size: 10.5px; border-radius: 20px;
  padding: 1px 8px; vertical-align: 1px; border: 1px solid; white-space: nowrap; cursor: help; }
.lim-tag.t-banco      { color: #0A5E8A; background: #EAF3F8; border-color: #CBE0EC; }
.lim-tag.t-custo      { color: #8a5a00; background: #FFF6E5; border-color: #F0DFBB; }
.lim-tag.t-velocidade { color: #6b3fa0; background: #F3EEFB; border-color: #DED0F0; }
.lim-tag.t-venda      { color: var(--verde-escuro); background: #EDF7E8; border-color: #CFE8C2; }

/* v1.514 — exceções com prazo: a janela da imobiliária, a lista e o
   cartão "Seu plano" do cliente */
.exc-preco { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.exc-preco .base { font-size: 13.5px; color: var(--texto-suave); }
.exc-preco .agora { font-size: 20px; font-weight: 700; color: var(--azul); }
.exc-preco .agora small { font-size: 12px; font-weight: 400; color: var(--texto-suave); margin-left: 5px; }
.exc-tab { width: 100%; border-collapse: collapse; font-size: 13px; }
.exc-tab th { text-align: left; padding: 8px 10px; background: #F8F8F7; border-bottom: 2px solid var(--borda); color: var(--texto-suave); font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; }
.exc-tab td { padding: 9px 10px; border-bottom: 1px solid #F0F0EF; vertical-align: middle; }
.exc-tab tr.exc-riscada td { color: #98A2A9; text-decoration: line-through; }
.exc-tab tr.exc-riscada td .exc-vence, .exc-tab tr.exc-riscada td button { text-decoration: none; }
.exc-fim { color: var(--alerta); font-weight: 600; }
.exc-quem { display: block; font-size: 11px; color: #98A2A9; }
.exc-vence { display: inline-block; margin-left: 6px; font-size: 10.5px; border-radius: 20px; padding: 1px 8px;
  background: #FFF6E5; color: #8a5a00; border: 1px solid #F0DFBB; white-space: nowrap; vertical-align: 1px; }
.exc-vence.exc-urgente { background: #FDECEA; color: var(--erro); border-color: #F3CFCA; }
.exc-vence.exc-vencida { background: #edf0f4; color: #6a7480; border-color: #dfe3e8; }
.mod-lista .exc-vence { margin-left: 4px; }
.exc-seg { display: inline-flex; border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; }
.exc-seg span { padding: 7px 14px; font-size: 13px; color: var(--texto-suave); cursor: pointer; user-select: none; }
.exc-seg span.on { background: var(--azul); color: #fff; font-weight: 600; }
.mp-exc-t { font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-suave); margin: 14px 0 6px; }
.mp-exc { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid #F0F0EF; font-size: 13px; }
.mp-exc > span:first-child { flex: 1; font-weight: 600; }
.mp-exc-ate { font-size: 12px; color: var(--texto-suave); white-space: nowrap; }

/* nova imobiliária num passo só */
.passos { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.passos span { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--azul); color: #fff; }
@media (max-width: 720px) { .topo.plat nav { flex-wrap: wrap; } .topo.plat .usuario { white-space: normal; } }

/* v1.501 — o cartão "Seu plano" (Configurações gerais) */
.uso-plano { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 22px; }
.uso-plano .k { font-size: 12.5px; color: var(--texto-suave); display: flex; justify-content: space-between; gap: 8px; }
.uso-plano .k b { color: var(--texto); white-space: nowrap; }
@media (max-width: 900px) { .uso-plano { grid-template-columns: 1fr; } }

/* ============================================================
   v1.502 — A ABA "DADOS" DA PLATAFORMA
   O filtro é um seletor com busca (serve para 2 ou para 400
   imobiliárias); toda lista por imobiliária é lista ordenada, 25 por
   vez, com "Mostrar mais" e busca no pé — nunca cartão nem coluna por
   imobiliária.
   ============================================================ */
.pl-filtro { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; }
.pl-filtro .r { font-size: 12px; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .4px; margin-right: 4px; }
.pl-filtro .med { margin-left: auto; font-size: 12px; color: #8a94a1; display: flex; align-items: center; gap: 8px; }
.pl-filtro .med .btn-claro { padding: 4px 12px; font-size: 12px; }
.pl-sel { position: relative; }
.pl-sel input { width: 340px; max-width: 100%; padding: 8px 36px 8px 12px; border: 1px solid var(--borda); border-radius: 8px; font-family: inherit; font-size: 14px; background: #fff; }
.pl-sel input:focus { outline: 2px solid var(--azul); outline-offset: -1px; }
.pl-sel .seta { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #8a94a1; font-size: 12px; pointer-events: none; }
.pl-sel .lista { display: none; position: absolute; z-index: 20; top: calc(100% + 4px); left: 0; width: 340px; max-height: 320px; overflow: auto; background: #fff; border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 8px 24px rgba(2,48,71,.12); }
.pl-sel.aberto .lista { display: block; }
.pl-sel .lista a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 12px; font-size: 13.5px; color: var(--texto); text-decoration: none; border-bottom: 1px solid #F0F0EF; }
.pl-sel .lista a:last-child { border-bottom: 0; }
.pl-sel .lista a:hover, .pl-sel .lista a.on { background: #EDF3F6; }
.pl-sel .lista a small { color: #8a94a1; white-space: nowrap; }
.pl-sel .lista a.todas { font-weight: 600; color: var(--azul); background: #FAFBFB; }
.pl-sel .lista .nada { padding: 10px 12px; font-size: 13px; color: #8a94a1; }
.pl-sel .lista .grupo { padding: 6px 12px; font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #8a94a1; background: #FAFBFB; }
/* o pé das listas longas: contagem, "Mostrar mais" e busca */
.pl-pe { display: flex; align-items: center; gap: 12px; padding: 10px 14px; font-size: 12.5px; color: var(--texto-suave); border-top: 1px solid #F0F0EF; flex-wrap: wrap; }
.pl-pe .btn-claro { padding: 4px 12px; font-size: 12px; }
.pl-pe input { margin-left: auto; padding: 6px 10px; border: 1px solid var(--borda); border-radius: 7px; font-family: inherit; font-size: 12.5px; width: 220px; }
/* título de seção dentro do cartão (o admin.js escrevia inline) */
.arm-t { font-size: 12px; font-weight: 700; color: var(--texto-suave); text-transform: uppercase; letter-spacing: .4px; margin-bottom: 6px; }
.arm-t span { font-weight: 400; text-transform: none; letter-spacing: 0; }
.arm-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 6px; }
@media (max-width: 900px) { .arm-2col { grid-template-columns: 1fr; } }
.arm-barra { margin-bottom: 14px; }
.arm-barra .k { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 4px; gap: 10px; }
.arm-barra .k span { color: var(--texto-suave); }
.arm-barra .k span.alerta { color: var(--erro); }
.arm-barra .b { background: var(--fundo); border: 1px solid var(--borda); border-radius: 8px; height: 14px; overflow: hidden; }
.arm-barra .b > i { display: block; height: 100%; border-radius: 8px 0 0 8px; background: var(--verde-escuro); }
.arm-barra .b > i.azul { background: var(--azul); }
.arm-barra .b > i.alerta { background: var(--erro); }
/* a tabela dos tetos próprios de uma imobiliária */
.lim-tab td.c .uso { min-width: 110px; text-align: left; }
.lim-tab td.c.esc input { width: 92px; }
.lim-tab td.c.esc input.difere { border-color: var(--azul); background: #F3F8FB; font-weight: 600; }
.lim-tab td.uso-col { width: 220px; }
/* v1.502 — o "Abrir o CRM de…" no topo da Plataforma: o mesmo seletor, à direita */
.topo.plat .usuario .pl-sel input { width: 240px; padding: 6px 30px 6px 12px; font-size: 13px; }
.topo.plat .usuario .pl-sel .lista { left: auto; right: 0; width: 340px; }
.pl-sel .lista a.minha { background: #F3F8FB; }
.pl-sel .lista a.minha small { color: var(--verde-escuro); font-weight: 600; }
@media (max-width: 720px) { .topo.plat .usuario .pl-sel input { width: 160px; } }

/* ============================================================
   v1.503 — SEGURADORAS E PRAZOS dentro da Configuração
   As seguradoras em pílulas no topo; a escolhida ocupa a largura toda:
   fatos em grade de três, prazos numa tabela inteira com a legenda em
   quatro colunas, planos da fiança dois por linha.
   ============================================================ */
.seg-pilulas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 14px; }
.seg-pilulas a { text-decoration: none; font-size: 13.5px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--borda); background: #fff; color: var(--azul); font-weight: 600; }
.seg-pilulas a small { font-weight: 400; color: var(--texto-suave); margin-left: 6px; }
.seg-pilulas a:hover { background: #EDF3F6; }
.seg-pilulas a.on { background: var(--azul); border-color: var(--azul); color: #fff; }
.seg-pilulas a.on small { color: rgba(255,255,255,.75); }
.seg-pilulas a.inativa { opacity: .55; }
.seg-fatos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 24px; }
.seg-fatos > div { border-bottom: 1px solid #F0F0EF; padding-bottom: 8px; }
.seg-fatos .r { font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-suave); font-weight: 700; }
.seg-fatos .v { font-size: 14px; margin-top: 3px; }
.seg-fatos .v.mut { color: var(--texto-suave); }
@media (max-width: 900px) { .seg-fatos { grid-template-columns: 1fr 1fr; } }
.seg-legenda { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 18px; font-size: 12px; color: var(--texto-suave); }
.seg-legenda b { color: var(--texto); display: block; }
@media (max-width: 900px) { .seg-legenda { grid-template-columns: 1fr 1fr; } }
/* os planos da fiança: dois por linha (era coluna única, por causa do painel estreito) */
.seg-planos { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 0; }
@media (max-width: 900px) { .seg-planos { grid-template-columns: 1fr; } }
table.prazos th { text-align: center; } table.prazos th:first-child { text-align: left; }

/* ============================================================
   v1.518 — MODO MANUTENÇÃO
   .faixa-manut  — a faixa âmbar (24 h antes) e a vermelha (só o
                   superadmin, enquanto dura); o permissoes.js a põe
                   no topo do body, como a faixa-beta
   .manut        — a tela "Em manutenção" (permissoes.js e login.js)
   .sit          — as situações na lista da Plataforma
   .pl-check-lista — as caixas de seleção das imobiliárias
   ============================================================ */
.faixa-manut { position: sticky; top: 0; z-index: 9998; display: flex; align-items: center; gap: 10px;
  background: #FFF3D6; border-bottom: 1px solid #F0D48A; color: #7a5a00; padding: 9px 18px; font-size: 13.5px; }
.faixa-manut b { color: #5c4300; }
.faixa-manut .x { margin-left: auto; background: none; border: 0; font-size: 18px; line-height: 1; color: #7a5a00; cursor: pointer; padding: 0 4px; }
.faixa-manut.ativa { background: #FDECEC; border-color: #F3B4B4; color: #8a1f1f; }
.faixa-manut.ativa b { color: #7a1212; }
.faixa-manut .btn-encerrar { margin-left: auto; background: #B42318; color: #fff; border: 0; border-radius: 7px;
  padding: 5px 12px; font-size: 12px; font-weight: 600; cursor: pointer; font-family: inherit; }
.manut-fundo { background: #F0F2F3; min-height: 100vh; padding: 60px 16px 70px; font-family: 'Outfit', 'Segoe UI', Arial, sans-serif; }
.manut { max-width: 560px; margin: 0 auto; background: #fff; border: 1px solid #E4E4E2; border-radius: 12px;
  padding: 38px 34px 30px; text-align: center; box-shadow: 0 1px 2px rgba(2,48,71,.06); }
.manut .marca { display: block; margin: 0 auto 22px; }
.manut .marca img { max-height: 90px; max-width: 240px; width: auto; height: auto; }
.manut .marca .sigla { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: 9px; background: #2A6F97; color: #fff; font-weight: 800; font-size: 15px; }
.manut .ico { color: #E0B24C; margin-bottom: 12px; }
.manut h1 { color: #023047; font-size: 22px; margin: 0 0 8px; }
.manut .volta { font-size: 15px; color: #023047; font-weight: 600; margin: 0 0 14px; }
.manut p { color: #5B6870; font-size: 14px; line-height: 1.65; margin: 0 0 10px; }
.manut .msg { background: #F7F8F9; border: 1px solid #E8ECEE; border-radius: 9px; padding: 12px 14px;
  margin: 16px 0 20px; color: #333; font-size: 13.5px; text-align: left; }
.manut .acoes { display: flex; gap: 10px; justify-content: center; margin-top: 8px; }
.manut .pe { margin-top: 22px; font-size: 11.5px; color: #8a94a1; }
.manut .pe a { color: var(--link); }
.sit { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.sit.programada { background: #E8F1F7; color: #2A6F97; }
.sit.andamento  { background: #FDECEC; color: #B42318; }
.sit.encerrada  { background: #EEF1F2; color: #6b7c84; }
.sit.cancelada  { background: #EEF1F2; color: #6b7c84; text-decoration: line-through; }
.pl-check-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px 14px;
  border: 1px solid var(--borda); border-radius: 7px; padding: 10px 12px; max-height: 180px; overflow-y: auto; background: #fff; }
.pl-check-lista label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #333; font-weight: 400; cursor: pointer; }
.pl-check-lista input { width: auto; }
tr.mt-andamento td { background: #FFF8F8; }

/* =====================================================================
   v1.568 — A ESCADA DO VERDE NA COLUNA ETAPA (09/09/2026)

   A coluna Etapa dos Aluguéis saía inteira em cinza: o campo era o
   único `t: 'tag'` do CRM sem mapa de `cores` e caía no padrão. Sete
   etapas com a mesma cor não dizem nada de longe.

   O verde escurece conforme o dinheiro anda até o proprietário —
   Recebida → Liberada → Repassada. São três degraus da MESMA família,
   e é essa a informação: as três significam "entrou", o tom diz o
   quanto do caminho já foi andado.

   O verde da marca (#7BBC62) NÃO vira fundo de etiqueta: a linha 6
   deste arquivo manda usá-lo só em acento. Os três degraus são
   clareamentos dele, com o texto sempre num verde escuro legível
   (o mais fechado dá 5,6:1 sobre o próprio fundo).

   POR QUE `tag-espera` E NÃO `tag-azul`: a .tag-azul original (linha
   198) foi reescrita na linha 2907 — uppercase, 10.5px, outro padding.
   Quem pintar uma coluna de azul hoje ganha uma etiqueta MAIÚSCULA e
   menor que as vizinhas. É defeito anterior a esta versão, vale para
   todo o CRM e está anotado no LEIA-ME para ser decidido à parte; aqui
   a etapa 'Aberta' apenas desvia dele, com a forma que a .tag original
   sempre teve.
   ===================================================================== */
.tag-espera  { background: #E7F0F6; color: #023047; }
.tag-verde-2 { background: #DCEFD1; color: #3E7A2E; }
.tag-verde-3 { background: #C6E4B4; color: #305F26; }

/* =====================================================================
   v1.573 — A FICHA DA POSTAGEM: COMENTÁRIOS DAS REDES (09/09/2026)

   Desenho aprovado no mockup Mockup-Comentarios-Redes/comentarios.html.
   Só regras novas, todas com o prefixo `cm-`. Nada do que existia mudou.

   O prefixo não é enfeite: a v1.453 perdeu uma investigação inteira
   porque `class="pg-ponto vazio"` pegou o `.vazio { padding:40px }`
   global do CRM. Modificador de componente leva o prefixo do
   componente — e `cm-vazio` aqui embaixo existe exatamente por isso.
   ===================================================================== */

/* o trilho de filtros, acima da lista */
.cm-filtros { display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--borda); background: #F8F8F7; }
.cm-filtros button { background: #fff; border: 1px solid var(--borda); border-radius: 999px;
  padding: 5px 13px; font-family: inherit; font-size: 12.5px; font-weight: 600;
  color: var(--texto-suave); cursor: pointer; }
.cm-filtros button:hover { border-color: #C6D2D9; color: var(--azul); }
.cm-filtros button.on { background: var(--azul); border-color: var(--azul); color: #fff; }
.cm-filtros .cm-busca { margin-left: auto; }
.cm-filtros input { border: 1px solid var(--borda); border-radius: 8px; padding: 6px 11px;
  font-family: inherit; font-size: 13px; width: 210px; background: #fff; }
.cm-filtros input:focus { outline: 2px solid var(--azul); outline-offset: -1px; }

/* um comentário */
.cm-com { display: flex; gap: 11px; padding: 14px 16px; border-bottom: 1px solid #F0F0EF; }
.cm-com:last-child { border-bottom: 0; }
/* a faixa verde à esquerda enquanto ninguém tratou — é o "tem gente
   esperando resposta" visto de longe, sem precisar ler a lista */
.cm-com.novo { background: #FBFDF9; box-shadow: inset 3px 0 0 var(--verde); }
.cm-com .ft { width: 36px; height: 36px; border-radius: 50%; background: #E3E6EA;
  color: #7C8891; font-size: 12.5px; font-weight: 700; display: flex;
  align-items: center; justify-content: center; flex: 0 0 auto; }
.cm-com .mio { min-width: 0; flex: 1; }
.cm-com .aut { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 13.5px; font-weight: 600; color: var(--texto); }
.cm-com .aut .qd { font-weight: 400; font-size: 12px; color: var(--texto-suave); }
.cm-com .txt { font-size: 13.5px; line-height: 1.55; margin-top: 3px; color: var(--texto);
  word-break: break-word; }
.cm-com .ac { display: flex; gap: 14px; margin-top: 7px; flex-wrap: wrap; }
.cm-com .ac button { background: none; border: 0; padding: 0; font-family: inherit;
  font-size: 12.5px; font-weight: 600; color: var(--link); cursor: pointer; }
.cm-com .ac button:hover { text-decoration: underline; }
.cm-com .ac button.apaga { color: var(--texto-suave); }
.cm-com .ac button[disabled] { cursor: default; opacity: .7; text-decoration: none; }

/* o selo da rede, ao lado do nome */
.cm-rede { font-size: 10.5px; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.cm-rede.ig { background: #FCEEF4; color: #A8336B; }
.cm-rede.fb { background: #E9F0FB; color: #1B4F9C; }

/* a resposta que saiu daqui, recuada sob o comentário */
.cm-resp { margin-top: 9px; padding: 9px 12px; background: #F6F9F4;
  border: 1px solid #DEEAD6; border-radius: 8px; font-size: 13px; line-height: 1.55; }
.cm-resp b { color: var(--verde-escuro); }
.cm-resp .qd { color: var(--texto-suave); font-weight: 400; font-size: 12px; }

/* a caixa de resposta aberta */
.cm-caixa { margin-top: 9px; }
.cm-caixa textarea { width: 100%; border: 1px solid #C6D2D9; border-radius: 8px;
  padding: 9px 11px; font-family: inherit; font-size: 13.5px; line-height: 1.5;
  resize: vertical; min-height: 62px; background: #fff; color: var(--texto); }
.cm-caixa textarea:focus { outline: 2px solid var(--azul); outline-offset: -1px; }
.cm-caixa .pe { display: flex; gap: 8px; align-items: center; margin-top: 8px;
  flex-wrap: wrap; }
.cm-caixa .pe .obs { margin-left: auto; font-size: 11.5px; color: var(--texto-suave); }

/* os números */
.cm-nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1px; background: var(--borda); }
.cm-nums > div { background: #fff; padding: 14px 16px; }
.cm-nums .v { font-size: 22px; font-weight: 800; color: var(--azul); line-height: 1.1; }
.cm-nums .r { font-size: 11px; text-transform: uppercase; letter-spacing: .4px;
  color: var(--texto-suave); font-weight: 600; margin-top: 3px; }
.cm-nums .d { font-size: 11.5px; color: var(--texto-suave); margin-top: 4px; min-height: 14px; }

/* quem reagiu — só o Facebook entrega nome */
.cm-quem { display: flex; align-items: center; gap: 9px; padding: 8px 16px;
  border-bottom: 1px solid #F0F0EF; font-size: 13px; }
.cm-quem:last-child { border-bottom: 0; }
.cm-quem .ft { width: 28px; height: 28px; border-radius: 50%; background: #E3E6EA;
  color: #7C8891; font-size: 11px; font-weight: 700; display: flex;
  align-items: center; justify-content: center; flex: 0 0 auto; }

.cm-vazio { padding: 34px 16px; text-align: center; color: #8a94a1; font-size: 13.5px; }
.cm-nota { padding: 11px 16px; background: #FBFAF7; border-top: 1px solid var(--borda);
  font-size: 12px; color: var(--texto-suave); line-height: 1.55; }

/* A divisa entre a conversa e os cartões de apoio. É classe, e não
   style inline no JS, exatamente por causa da linha abaixo: inline
   vence media query, e no celular a borda ficaria pendurada no lado de
   uma coluna que já não existe. O 1040px é o MESMO ponto em que o .g70
   colapsa (linha 566) — dois pontos diferentes deixariam uma faixa de
   larguras com a divisa no lugar errado. */
.cm-lado { border-right: 1px solid var(--borda); }

@media (max-width: 1040px) {
  .cm-lado { border-right: 0; border-bottom: 1px solid var(--borda); }
  .cm-filtros .cm-busca { margin-left: 0; width: 100%; }
  .cm-filtros input { width: 100%; }
}

/* ============================================================
   v1.590 — A JANELA DO PAGAMENTO A PARCEIRO/PRESTADOR (modal-pag)
   Nasceu em parcelas.html (v1.589) e passou a servir a Casos: as regras
   vêm aqui uma vez. É o desenho da janela do repasse (competencias.html
   tem a cópia dela para o repasse; os nomes .rp-* são os mesmos de
   propósito, para as duas janelas envelhecerem juntas).
   ============================================================ */
.rp-passos { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 14px; }
.rp-passo { border: 1px solid var(--borda); border-radius: 9px; padding: 12px; text-align: center; }
.rp-passo .ic { color: var(--azul); }
.rp-passo small { display: block; font-size: 11px; color: var(--texto-suave); margin-top: 6px; line-height: 1.4; }
.rp-passo .ok { display: block; font-size: 12px; color: #1c7c3d; font-weight: 600; margin-top: 6px; }
.rp-rastro { background: #F4F7F9; border: 1px solid var(--borda); border-radius: 8px;
  padding: 10px 12px; font-size: 12.5px; line-height: 1.7; margin-top: 12px; }
.rp-quem { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #D5DEE3; }
.rp-quem b { color: #032D60; font-weight: 600; }
.rp-quem .li { display: block; }
.rp-quem .ic { display: inline-block; width: 17px; }
.rp-quem .erro { color: #B23A28; }
.rp-quem .visto { color: #2E5C22; }
.rp-radio { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 400; color: var(--texto); }
/* a dobra "já paguei por fora": um filete e um botão claro, nada mais */
.rp-fora { margin-top: 12px; padding-top: 12px; border-top: 1px dashed #D5DEE3; display: flex;
  align-items: center; gap: 12px; font-size: 12.5px; color: var(--texto-suave); flex-wrap: wrap; }
.rp-fora .btn { padding: 7px 14px; font-size: 13px; }
.rp-fora input, .rp-fora select { padding: 6px 9px; border: 1px solid var(--borda); border-radius: 6px;
  font-family: inherit; font-size: 13px; }
@media (max-width: 640px) { .rp-passos { grid-template-columns: 1fr; } }

/* =====================================================================
   v1.594 — A FILA DE COMENTÁRIOS NA TELA POSTAGENS (12/09/2026)

   Mockup aprovado em Mockup-Comentarios-Fila/. Só regras novas, com o
   prefixo `cq-`; o que já existia não mudou. O prefixo não é enfeite —
   a v1.453 perdeu uma investigação inteira porque `pg-ponto vazio`
   pegou o `.vazio { padding:40px }` global, e é por isso que existe
   `cq-vazio` aqui embaixo em vez de reaproveitar aquele.

   A coluna da direita tem 332px: tudo aqui é calibrado para essa
   largura, e é por isso que o texto do comentário e as ações recuam
   33px (a foto de 26px + o vão), alinhando com o nome de quem falou.
   ===================================================================== */

/* a faixa de cima ganha o 5º número */
.pg-kpis { grid-template-columns: repeat(5, 1fr); }
/* sem os comentários instalados o 5º não é desenhado, e quatro colunas
   voltam a dividir a faixa por igual */
.pg-kpis:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }

.cq-filtros { display: flex; gap: 6px; padding: 10px 12px;
  border-bottom: 1px solid var(--borda); background: #F8F8F7; }
.cq-filtros button { background: #fff; border: 1px solid var(--borda); border-radius: 999px;
  padding: 4px 11px; font-family: inherit; font-size: 12px; font-weight: 600;
  color: var(--texto-suave); cursor: pointer; }
.cq-filtros button:hover { border-color: #C6D2D9; color: var(--azul); }
.cq-filtros button.on { background: var(--azul); border-color: var(--azul); color: #fff; }

.cq-item { padding: 11px 12px; border-bottom: 1px solid #F0F0EF; }
.cq-item:last-of-type { border-bottom: 0; }
/* a faixa verde à esquerda é "tem gente esperando", visto de longe */
.cq-item.novo { box-shadow: inset 3px 0 0 var(--verde); background: #FBFDF9; }
.cq-item .quem { display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 600; color: var(--texto); }
.cq-item .quem .ft { width: 26px; height: 26px; border-radius: 50%; background: #E3E6EA;
  color: #7C8891; font-size: 10.5px; font-weight: 700; display: flex;
  align-items: center; justify-content: center; flex: 0 0 auto; }
.cq-item .quem .qd { margin-left: auto; font-weight: 400; font-size: 11px;
  color: var(--texto-suave); white-space: nowrap; }
.cq-item .txt { font-size: 13px; line-height: 1.45; margin: 6px 0 6px 33px;
  color: var(--texto); word-break: break-word; }

/* o post de onde veio: é o contexto que evita abrir a ficha */
.cq-item .post { display: flex; align-items: center; gap: 8px; margin-left: 33px;
  padding: 5px 7px; background: #F3F3F2; border-radius: 7px; font-size: 11px;
  color: var(--texto-suave); cursor: pointer; }
.cq-item .post:hover { background: #EDF3F6; }
.cq-item .post .th { width: 28px; height: 28px; border-radius: 5px; flex: 0 0 auto;
  background-size: cover; background-position: center; }
.cq-item .post b { color: var(--texto); font-weight: 600; }
.cq-item .post .leg { display: -webkit-box; -webkit-line-clamp: 1;
  -webkit-box-orient: vertical; overflow: hidden; }

.cq-item .cq-resp { margin: 7px 0 0 33px; padding: 7px 10px; background: #F6F9F4;
  border: 1px solid #DEEAD6; border-radius: 7px; font-size: 12px; line-height: 1.45; }
.cq-item .cq-resp b { color: var(--verde-escuro); }

.cq-item .ac { display: flex; gap: 12px; margin: 7px 0 0 33px; flex-wrap: wrap; }
.cq-item .ac button { background: none; border: 0; padding: 0; font-family: inherit;
  font-size: 12px; font-weight: 600; color: var(--link); cursor: pointer; }
.cq-item .ac button:hover { text-decoration: underline; }
.cq-item .ac button.apaga { color: var(--texto-suave); }
.cq-item .ac button[disabled] { cursor: default; opacity: .7; text-decoration: none; }

.cq-caixa { margin: 8px 0 0 33px; }
.cq-caixa textarea { width: 100%; border: 1px solid #C6D2D9; border-radius: 8px;
  padding: 8px 10px; font-family: inherit; font-size: 13px; line-height: 1.45;
  min-height: 58px; resize: vertical; background: #fff; color: var(--texto); }
.cq-caixa textarea:focus { outline: 2px solid var(--azul); outline-offset: -1px; }
.cq-caixa .pe { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.cq-caixa .pe .btn { padding: 6px 11px; font-size: 12px; }
.cq-prontas { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 6px; }
.cq-prontas button { background: #F3F3F2; border: 1px solid var(--borda); border-radius: 999px;
  padding: 3px 9px; font-family: inherit; font-size: 11px; color: var(--texto-suave);
  cursor: pointer; }
.cq-prontas button:hover { background: #EDF3F6; color: var(--azul); border-color: #C6D2D9; }

.cq-vazio { padding: 26px 12px; text-align: center; color: #8a94a1; font-size: 12.5px; }
.cq-rodape { padding: 9px 12px; background: #FBFAF7; border-top: 1px solid var(--borda);
  font-size: 11.5px; color: var(--texto-suave); line-height: 1.5; }

/* No celular NÃO há regra nova: a linha 4298 já manda 2 colunas em
   900px, e ela vale para 4 ou 5 cartões igualmente. Repetir aqui seria
   uma segunda verdade sobre a mesma coisa. */

/* ============================================================
   v1.606 — O PAINEL DA GESTÃO (prefixo gp-)

   A BARRA DUPLA é a peça nova. O CRM tem barra de progresso em vários
   lugares, e nenhuma delas diz ONDE O TEMPO ESTÁ. Aqui a barra colorida
   é o feito e a marca vertical é o tempo: marca na frente da barra quer
   dizer que o prazo anda mais rápido que o trabalho, e a folga entre as
   duas é o tamanho do problema.

   É de propósito a mesma gramática da linha de hoje do Gantt (v1.605):
   uma marca vertical que diz "você está aqui". Duas peças que dizem a
   mesma coisa têm de se parecer.
   ============================================================ */
.gp-trilho { position: relative; height: 16px; border-radius: 8px;
  background: var(--fundo); overflow: visible; }
.gp-feito { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 8px; }
.gp-tempo { position: absolute; top: -4px; bottom: -4px; width: 2px;
  background: var(--azul); border-radius: 1px; }
.gp-tempo::after { content: attr(data-rot); position: absolute; top: -15px; left: 50%;
  transform: translateX(-50%); font-size: 9.5px; letter-spacing: .3px;
  color: var(--azul); white-space: nowrap; font-weight: 600; }

.gp-linha { display: grid; grid-template-columns: 1fr 220px; gap: 18px;
  align-items: center; padding: 13px 0; border-bottom: 1px solid #F0F0EF; }
.gp-linha:last-child { border-bottom: 0; }
.gp-tit { font-weight: 600; font-size: 13.5px; }
.gp-tit a { color: var(--link); text-decoration: none; }
.gp-tit a:hover { text-decoration: underline; }
.gp-frase { color: var(--texto-suave); font-size: 12px; margin-top: 3px; }
.gp-frase a { color: var(--link); text-decoration: none; }
.gp-frase a:hover { text-decoration: underline; }
.gp-nums { display: flex; justify-content: space-between; font-size: 11px;
  color: var(--texto-suave); margin-top: 7px; }

.gp-item { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0;
  border-bottom: 1px solid #F0F0EF; }
.gp-item:last-child { border-bottom: 0; }
.gp-item .tag { flex: none; margin-top: 1px; }
.gp-quem { color: var(--texto-suave); font-size: 11.5px; white-space: nowrap;
  margin-left: auto; padding-left: 12px; }

.gp-limpo { text-align: center; padding: 26px 16px; }
.gp-limpo b { display: block; font-size: 15px; margin-bottom: 6px; }

@media (max-width: 760px) {
  .gp-linha { grid-template-columns: 1fr; gap: 9px; }
  .gp-quem { display: none; }   /* no celular, o nome rouba a linha inteira */
}



/* ============================================================
   v1.607 — A JANELA DA PROPOSTA DA IA (prefixo gi-)

   A lista de ações é feita de <label>: clicar em qualquer lugar da
   linha marca a caixinha. Numa janela cujo assunto é "desmarque o que
   não serve", errar o alvo do clique é o defeito mais caro.
   ============================================================ */
.gi-acao { display: flex; gap: 10px; align-items: flex-start; padding: 10px 11px;
  border: 1px solid var(--borda); border-radius: 8px; margin-bottom: 7px;
  cursor: pointer; background: #FCFCFB; }
.gi-acao:hover { border-color: #C6D2D9; background: #F7FAFB; }
.gi-acao input { margin-top: 3px; flex: none; }
.gi-acao b { display: block; font-weight: 600; font-size: 13px; }
.gi-acao i { display: block; font-style: normal; font-size: 11.5px;
  color: var(--texto-suave); margin-top: 2px; }
.gi-quando { display: inline-block; font-size: 11px; color: var(--texto-suave);
  margin-top: 3px; margin-right: 8px; }
.gi-tag { font-size: 10px; padding: 1px 6px; vertical-align: 1px; }

.gi-h3 { margin: 18px 0 9px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--texto-suave); }
.gi-lista { max-height: 46vh; overflow-y: auto; }
.gi-gut { margin: 4px 0 0; padding: 10px 12px; border-radius: 8px;
  background: #F1F5F8; font-size: 12.5px; line-height: 1.6; }
.gi-rodape { margin: 12px 0 0; font-size: 11.5px; color: var(--texto-suave);
  line-height: 1.6; }
.gi-resumo { margin: 0 0 12px; font-size: 13.5px; font-weight: 600; }


/* ============================================================
   v1.614 — A JANELA DA IA QUE PREENCHE O LEAD (prefixo lia-)

   Cada linha é um <label>: clicar em qualquer lugar dela marca a
   caixinha. Numa janela cujo assunto é "desmarque o que não serve",
   errar o alvo do clique é o defeito mais caro.

   A LINHA DE PROVA é a peça que faz isto ser confiável: o trecho da
   conversa, em itálico e recuado, embaixo do valor proposto. Sem ele a
   pessoa teria de acreditar; com ele, ela confere em dois segundos.
   ============================================================ */
.lia-linha { display: flex; gap: 11px; align-items: flex-start; padding: 11px 12px;
  border: 1px solid var(--borda); border-radius: 9px; margin-bottom: 7px;
  background: #FCFCFB; cursor: pointer; }
.lia-linha:hover { border-color: #C6D2D9; background: #F7FAFB; }
.lia-linha input { margin-top: 3px; flex: none; }
/* a linha que já tem valor posto por gente: nasce desmarcada e avisa */
.lia-linha.conflito { background: #FFFBF0; border-color: #F0DFA8; }
.lia-campo { display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--texto-suave); font-weight: 600; }
.lia-valor { display: block; font-size: 14px; font-weight: 600; color: var(--texto);
  margin-top: 1px; }
.lia-prova { display: block; font-size: 12px; color: var(--texto-suave); margin-top: 5px;
  padding-left: 9px; border-left: 2px solid #D8E2E8; font-style: italic; line-height: 1.5; }
.lia-antes { display: block; font-size: 11.5px; color: var(--alerta); margin-top: 4px; }

.lia-resumo { background: #F1F5F8; border-radius: 9px; padding: 13px 15px;
  font-size: 13.5px; line-height: 1.65; margin-bottom: 16px; }
.lia-resumo b { display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--texto-suave); margin-bottom: 5px; }
.lia-ouviu { font-size: 11.5px; color: var(--texto-suave); margin: 0 0 12px; }
.lia-h3 { margin: 18px 0 9px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--texto-suave); }
.lia-lista { max-height: 48vh; overflow-y: auto; }
.lia-rodape { margin: 12px 0 0; font-size: 11.5px; color: var(--texto-suave);
  line-height: 1.6; }


/* ============================================================
   v1.615 — O MOTOR DE MATCH (prefixo mt-)

   A linha traz o registro à esquerda e a NOTA à direita. A nota não é
   um número solto: é "4 de 6", com o que falta escrito embaixo. Um
   número sozinho ("67%") obrigaria a pessoa a abrir o registro para
   descobrir o que não bate.
   ============================================================ */
.mt-linha { display: grid; grid-template-columns: 1fr auto; gap: 14px;
  align-items: center; padding: 11px 0; border-bottom: 1px solid #F0F0EF; }
.mt-linha:last-of-type { border-bottom: 0; }
.mt-tit { font-weight: 600; font-size: 13.5px; }
.mt-tit a { color: var(--link); text-decoration: none; }
.mt-tit a:hover { text-decoration: underline; }
.mt-sub { font-size: 11.5px; color: var(--texto-suave); margin-top: 3px; }
.mt-nota { text-align: right; white-space: nowrap; }
.mt-nota b { font-size: 15px; font-weight: 600; }
.mt-porque { font-size: 11.5px; color: var(--texto-suave); margin-top: 3px; }
.mt-falta { color: var(--alerta); }
.mt-ajuda { margin: 0 0 12px; color: var(--texto-suave); font-size: 12.5px;
  line-height: 1.6; }

@media (max-width: 640px) {
  .mt-linha { grid-template-columns: 1fr; gap: 4px; }
  .mt-nota { text-align: left; }
}

/* v1.615 — O QUE A IA NÃO ENTENDEU.
   Fundo neutro e sem caixinha de marcar: não há o que gravar aqui. É uma
   lista de perguntas que valem ser feitas ao cliente — e a prova de que
   a IA procurou, em vez de ter simplesmente ignorado o campo. */
.lia-duvida { border: 1px dashed var(--borda); border-radius: 9px;
  padding: 11px 13px; background: #FBFBFA; }
.lia-dlinha { display: flex; gap: 10px; align-items: baseline; padding: 4px 0;
  font-size: 12.5px; line-height: 1.5; }
.lia-dlinha b { flex: none; min-width: 130px; font-weight: 600; font-size: 11px;
  text-transform: uppercase; letter-spacing: .4px; color: var(--texto-suave); }
.lia-dlinha span { color: var(--texto); }

/* ============================================================
   v1.638 — O PRINT DA CONSULTA VIRA LEAD (prefixo prl-)
   Arrastar/colar um print na ficha do lead (completa) ou na lista de
   leads (cria). Tudo com prefixo próprio: `.destaque` já é o cabeçalho
   da ficha e `.leg` já é o subtítulo do cartão.
   ============================================================ */

/* A CAPA DE ARRASTE — só existe enquanto o arquivo está sobre a janela */
.prl-capa { position: fixed; inset: 0; z-index: 70; display: none;
  align-items: center; justify-content: center;
  background: rgba(2,48,71,.78); backdrop-filter: blur(2px); }
.prl-capa.aberta { display: flex; }
.prl-capa-caixa { border: 2px dashed rgba(255,255,255,.85); border-radius: 14px;
  padding: 26px 34px; text-align: center; color: #fff; max-width: 440px; }
.prl-capa-caixa > b { display: block; font-size: 17px; margin: 10px 0 5px; }
.prl-capa-caixa span { font-size: 12.5px; opacity: .88; line-height: 1.6; }
.prl-capa-caixa svg { opacity: .9; }

/* a tarja de "lendo…": o print demora 2 a 4 segundos, e tela parada
   nesse tempo parece tela travada */
.prl-lendo { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 71; background: var(--azul); color: #fff; border-radius: 22px;
  padding: 9px 18px; font-size: 13px; font-weight: 600; display: flex; gap: 9px;
  align-items: center; box-shadow: 0 6px 22px rgba(0,0,0,.22); }
.prl-gira { width: 13px; height: 13px; border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff; border-radius: 50%; display: inline-block;
  animation: prlGira .8s linear infinite; flex: none; }
@keyframes prlGira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .prl-gira { animation: none; } }

/* A JANELA DE CONFERÊNCIA */
.prl-leu { font-size: 11.5px; color: var(--texto-suave); margin: 0 0 12px; }
.prl-item { border-top: 1px solid var(--borda); padding-top: 14px; margin-top: 14px; }
.prl-item:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.prl-item.prl-fora { opacity: .45; }
.prl-cabeca { display: flex; gap: 9px; align-items: center; margin-bottom: 10px;
  font-size: 14px; cursor: pointer; }
.prl-cabeca b { flex: 1; min-width: 0; }
.prl-cnt { font-size: 11.5px; font-weight: 400; color: var(--texto-suave); }
.prl-grade { display: grid; grid-template-columns: 190px 1fr; gap: 16px; align-items: start; }
@media (max-width: 720px) { .prl-grade { grid-template-columns: 1fr; } }

.prl-thumb { width: 100%; border: 1px solid var(--borda); border-radius: 9px;
  display: block; cursor: zoom-in; background: #fff; }
.prl-thumb-leg { font-size: 11px; color: var(--texto-suave); line-height: 1.5; margin-top: 6px; }

.prl-linha { display: flex; gap: 11px; align-items: flex-start; padding: 10px 12px;
  border: 1px solid var(--borda); border-radius: 9px; margin-bottom: 7px;
  background: #FCFCFB; cursor: pointer; }
.prl-linha:hover { border-color: #C6D2D9; background: #F7FAFB; }
.prl-linha input { margin-top: 3px; flex: none; }
.prl-linha.prl-morto { opacity: .6; cursor: default; }
.prl-linha.prl-conflito { background: #FFFBF0; border-color: #F0DFA8; }
.prl-campo { display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--texto-suave); font-weight: 600; }
.prl-valor { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 15px; font-weight: 600; color: var(--texto); margin-top: 1px; }
.prl-prova { display: block; font-size: 11.5px; color: var(--texto-suave); margin-top: 4px;
  padding-left: 9px; border-left: 2px solid #D8E2E8; line-height: 1.5; }
.prl-antes { display: block; font-size: 11.5px; color: var(--erro); margin-top: 4px;
  line-height: 1.5; }

.prl-eti { font-size: 10px; font-weight: 700; letter-spacing: .3px; padding: 2px 7px;
  border-radius: 20px; text-transform: uppercase; }
.prl-eti-zap { background: #E4F5E4; color: #2E7D32; }
.prl-eti-fixo { background: #EEF2F5; color: var(--texto-suave); }

.prl-h3 { margin: 14px 0 8px; font-size: 13px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--texto-suave); }
.prl-outros, .prl-duvida { margin-top: 10px; padding: 10px 12px; border-radius: 9px;
  background: #F1F5F8; font-size: 12.5px; line-height: 1.6; }
.prl-duvida { background: #FFF8E1; }
.prl-outros b, .prl-duvida b { display: block; font-size: 11px; text-transform: uppercase;
  letter-spacing: .4px; color: var(--texto-suave); margin-bottom: 4px; }
.prl-outros span, .prl-duvida span { display: block; }

/* A PRIMEIRA MENSAGEM */
.prl-msg { background: #F1F5F8; border-radius: 10px; padding: 13px 15px; margin-top: 16px; }
.prl-area { width: 100%; border: 1px solid var(--borda); border-radius: 8px; padding: 9px 11px;
  font-family: inherit; font-size: 13px; line-height: 1.55; resize: vertical;
  background: #fff; margin-top: 10px; }
.prl-bolha { background: #DCF8C6; border-radius: 10px 10px 10px 2px; padding: 10px 13px;
  font-size: 13px; line-height: 1.55; max-width: 440px; margin-top: 10px;
  white-space: pre-wrap; box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.prl-rodape { margin: 10px 0 0; font-size: 11.5px; color: var(--texto-suave); line-height: 1.6; }

/* o print inteiro, do tamanho que ele é */
.prl-lupa { position: fixed; inset: 0; z-index: 80; display: none; cursor: zoom-out;
  background: rgba(2,48,71,.85); padding: 30px; overflow: auto; }
.prl-lupa.aberta { display: block; }
.prl-lupa img { display: block; margin: 0 auto; max-width: 100%;
  border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,.4); }

/* ============================================================
   v1.641 — O LINK CLICÁVEL DA FICHA (tipo de campo `url`)
   O endereço inteiro é o alvo do clique, com o elo no fim; o botão de
   copiar ao lado é o mesmo do telefone e do e-mail. Endereço longo
   quebra dentro da linha em vez de esticar o cartão.
   ============================================================ */
.v a.link-web { word-break: break-all; }
.v a.link-web svg { vertical-align: -2px; margin-left: 4px; opacity: .75; flex: none; }
.v a.link-web:hover svg { opacity: 1; }

/* ============================================================
   v1.644 — O BOTÃO DE TROCAR OS TELEFONES
   Mesma discrição do copiar, ao lado dele: aparece apagado e acende no
   hover. Quem clica troca o Telefone com o Telefone 2 — e é o campo
   Telefone que o CRM usa para falar.
   ============================================================ */
.btn-troca {
  display: inline-flex; align-items: center; justify-content: center;
  position: relative; vertical-align: middle;
  border: 0; background: none; padding: 2px; margin: 0 0 0 3px;
  cursor: pointer; line-height: 0; border-radius: 5px;
  color: var(--texto-suave); opacity: .42;
  transition: opacity .12s, color .12s, background .12s;
}
.btn-troca svg { width: 14px; height: 14px; display: block; }
.btn-troca:hover, .btn-troca:focus-visible {
  opacity: 1; color: var(--azul); background: #E7F0F6;
}
.btn-troca:focus-visible { outline: 2px solid var(--azul); outline-offset: 1px; }
@media (hover: none) { .btn-troca { opacity: .7; } }

/* v1.644 — a linha que conta que existe conversa por outro número do
   mesmo registro. Discreta: é informação, não alarme. */
.cv-outra { display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 8px 14px 0; font-size: 11.5px; line-height: 1.5; color: var(--texto-suave); }
.cv-outra svg { flex: none; opacity: .8; }

/* ============================================================
   v1.645 — A FAIXA DE ATALHOS DA CAIXA DE RESPOSTA
   Estas 35 regras moravam dentro do `conversas.html`, onde só aquela
   tela as alcançava. Vieram inteiras, sem um valor mudado: o cartão da
   ficha e a caixa fixa passam a usar a MESMA caixa de resposta, e CSS
   de tela não se copia — muda de endereço.
   ============================================================ */
/* v1.363 — RESPOSTAS PRONTAS: os modelos de Administração → Mensagens,
  a um clique acima da caixa de resposta.

  v1.380 — O RAIO VIROU BUSCADOR (mockup aprovado 24/08).
  Antes a faixa mostrava os 5 primeiros modelos EM ORDEM ALFABÉTICA e
  um "+N modelos" que abria TODOS de uma vez: com 12 modelos já eram
  quatro linhas de botão e a conversa sumia da tela. Agora:
   • a faixa mostra só os FAVORITOS (no máximo 5, marcados no
     cadastro em Administração → Mensagens);
   • todo o resto entra pelo botão do raio, que abre um buscador.
  A faixa é nowrap de propósito — nunca passa de UMA linha, por mais
  modelos que a imobiliária cadastre. */
.cv-atalhos { display:flex; gap:6px; padding:8px 12px 0; flex-wrap:nowrap;
  background:#fff; align-items:center; position:relative; }
.cv-atalho { background:#F3F7FA; border:1px solid #DCE6EC; border-radius:999px;
  padding:5px 11px; font-family:inherit; font-size:12px; color:var(--azul);
  cursor:pointer; font-weight:600; max-width:230px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; flex:0 0 auto; }
.cv-atalho:hover { background:#E3EDF4; border-color:var(--azul); }
/* o que não couber rola de lado; a caixa de resposta não se mexe */
#cv-favoritos { display:flex; gap:6px; min-width:0; overflow-x:auto;
  scrollbar-width:none; padding-bottom:2px; }
#cv-favoritos::-webkit-scrollbar { height:0; }
/* quando sobra atalho fora da vista, a última pílula se apaga na borda:
  sem isto o corte no meio da palavra parece defeito, não "tem mais" */
#cv-favoritos.tem-mais { mask-image:linear-gradient(to right, #000 calc(100% - 26px), transparent);
  -webkit-mask-image:linear-gradient(to right, #000 calc(100% - 26px), transparent); }
#cv-favoritos .cv-vazio-atalho { font-size:11.5px; color:#8a939c; white-space:nowrap;
  align-self:center; }
/* o botão do raio: redondo e discreto, do tamanho de um ícone de ação */
.cv-raio { flex:0 0 auto; width:30px; height:30px; border-radius:50%;
  background:#fff; border:1px solid #DCE6EC; color:#6a7480; cursor:pointer;
  display:flex; align-items:center; justify-content:center; padding:0;
  font-family:inherit; line-height:0; }
.cv-raio:hover, .cv-raio.on { background:#EDF3F6; border-color:var(--azul);
  color:var(--azul); }
.cv-raio:focus-visible { outline:2px solid var(--azul); outline-offset:2px; }
/* o buscador sobe POR CIMA do fio — nunca empurra a caixa de resposta */
.cv-busca-modelo { position:absolute; bottom:calc(100% + 6px); left:12px; width:410px;
  max-width:calc(100% - 24px); background:#fff; border:1px solid var(--borda);
  border-radius:12px; box-shadow:0 14px 40px rgba(2,48,71,.20); z-index:20;
  display:none; flex-direction:column; overflow:hidden; }
.cv-busca-modelo.aberto { display:flex; }
.cv-bm-topo { display:flex; align-items:center; gap:8px; padding:10px 12px;
  border-bottom:1px solid var(--borda); }
.cv-bm-topo svg { color:#98a3aa; flex:0 0 auto; }
.cv-bm-topo input { flex:1; border:none; outline:none; font-family:inherit;
  font-size:13.5px; color:var(--texto); background:none; padding:2px 0; }
.cv-bm-lista { max-height:330px; overflow-y:auto; padding:4px 0; }
.cv-bm-cat { padding:7px 13px 4px; font-size:10.5px; font-weight:700;
  text-transform:uppercase; letter-spacing:.5px; color:#8a939c; }
.cv-bm-item { display:flex; align-items:flex-start; gap:9px; width:100%;
  padding:8px 13px; border:none; background:none; font-family:inherit;
  text-align:left; cursor:pointer; border-left:3px solid transparent; }
.cv-bm-item:hover, .cv-bm-item.marcado { background:#F2F7FA; border-left-color:var(--azul); }
.cv-bm-item .nm { font-size:13px; font-weight:700; color:var(--texto); }
.cv-bm-item .nm mark, .cv-bm-item .pv mark { background:#FFF0B3; color:inherit;
  border-radius:3px; padding:0 1px; }
.cv-bm-item .nm .cat { font-weight:600; font-size:10.5px; color:#8a939c;
  background:#F1F4F6; border-radius:999px; padding:1px 7px; margin-left:6px;
  white-space:nowrap; }
.cv-bm-item .pv { font-size:11.5px; color:#6a7480; line-height:1.45; margin-top:2px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cv-bm-item .meio { min-width:0; flex:1; }
.cv-bm-estrela { flex:0 0 auto; background:none; border:none; cursor:pointer;
  padding:2px; color:#BCC6CD; line-height:0; border-radius:5px; }
/* apagada, a estrela some no fundo da linha marcada — e ninguém
  descobre que ela existe. Na linha em foco ela escurece um tom. */
.cv-bm-item:hover .cv-bm-estrela, .cv-bm-item.marcado .cv-bm-estrela { color:#98A3AA; }
.cv-bm-estrela.on, .cv-bm-item:hover .cv-bm-estrela.on,
  .cv-bm-item.marcado .cv-bm-estrela.on { color:#E0A800; }
.cv-bm-estrela:hover { background:#EDF3F6; color:var(--alerta); }
.cv-bm-estrela.on { color:#E0A800; }
.cv-bm-vazio { padding:22px 14px; text-align:center; color:var(--texto-suave);
  font-size:12.5px; line-height:1.6; }
.cv-bm-pe { display:flex; align-items:center; gap:6px; padding:8px 12px;
  border-top:1px solid var(--borda); background:#FBFBFA; font-size:11px; color:#8a939c; }
.cv-bm-pe kbd { background:#fff; border:1px solid var(--borda); border-bottom-width:2px;
  border-radius:4px; padding:1px 5px; font-family:inherit; font-size:10.5px;
  font-weight:700; color:#6a7480; }
.cv-bm-pe a { margin-left:auto; color:var(--link); font-weight:700; text-decoration:none;
  white-space:nowrap; }
.cv-bm-pe a:hover { text-decoration:underline; }
@media (max-width:860px) {
.cv-bm-pe .teclas { display:none; }
.cv-bm-pe a { margin-left:0; }
}

/* ============================================================
   v1.646 — A CAIXA DE RESPOSTA DENTRO DO CARTÃO DA FICHA
   O buscador do raio sobe POR CIMA do fio, e `.cartao` tem
   `overflow: hidden`: a lista inteira (330px) seria cortada no topo,
   como o balão da v1.2xx. Dentro de cartão ela é mais baixa e mais
   estreita — cabe no espaço que existe acima da caixa.
   ============================================================ */
.cartao .cv-bm-lista { max-height: 220px; }
.cartao .cv-busca-modelo { width: 360px; }
/* a faixa de atalhos encosta na borda do cartão, não no meio dele */
.cartao .cv-atalhos { padding: 8px 14px 0; }

/* ============================================================
   v1.647 — A CAIXA DE RESPOSTA DENTRO DA CAIXA FIXA
   Ela tem 330px e `overflow: hidden`, como o cartão: o buscador de
   modelos (410px) seria cortado dos dois lados. Aqui ele vira FIXO na
   tela, ancorado acima da caixa — o `position: fixed` escapa do
   recorte, e a lista fica na largura da própria caixa.
   ============================================================ */
.chatf .cv-busca-modelo { position: fixed; left: auto; right: 16px; bottom: 150px;
  width: 330px; max-width: calc(100vw - 32px); }
.chatf .cv-bm-lista { max-height: 200px; }
.chatf .cv-atalhos { padding: 8px 10px 0; }
/* recolhida, a caixa mostra só o topo: a faixa de atalhos e a prévia do
   anexo somem junto com o fio e a caixa de escrever */
.chatf.mini .cv-atalhos, .chatf.mini .cv-previa,
.chatf.mini .cv-busca-modelo { display: none !important; }

/* ------------------------------------------------------------------
   v1.648 — A CONVERSA DO IMÓVEL: o seletor de com quem falar, em cima
   do fio (mockup Outros/Mockup-Console-Imovel, aprovado em 16/09/2026).
   Pílulas com a inicial, o nome e o papel; a que está aberta ganha o
   contorno azul da aba ativa; "!" verde = a pessoa está esperando
   resposta. O balão no cartão Pessoas abre a conversa dela.
   ------------------------------------------------------------------ */
.conv-quems { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--borda);
  overflow-x: auto; scrollbar-width: none; }
.conv-quems::-webkit-scrollbar { height: 0; }
.conv-quem { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--borda);
  background: #fff; border-radius: 999px; padding: 4px 12px 4px 4px; font-family: inherit;
  cursor: pointer; flex: 0 0 auto; }
.conv-quem .av { width: 26px; height: 26px; border-radius: 50%; background: #E7F0F6; color: var(--azul);
  font-weight: 700; font-size: 10.5px; display: inline-flex; align-items: center; justify-content: center; }
.conv-quem .qn { font-size: 12.5px; font-weight: 600; color: var(--azul); text-align: left; line-height: 1.15; }
.conv-quem .qn small { display: block; font-weight: 400; color: var(--texto-suave); font-size: 10.5px; }
.conv-quem .nl { min-width: 18px; height: 18px; border-radius: 999px; background: var(--verde); color: #0F2A08;
  font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; padding: 0 5px; }
.conv-quem:hover { background: #F3F8FA; }
.conv-quem.on { background: #EEF4FF; border-color: #0176D3; }
.conv-quem-balao { padding: 4px 7px; color: #7d8a92; display: inline-flex; align-items: center; }
.conv-quem-balao:hover { color: var(--verde-escuro); }

/* ------------------------------------------------------------------
   v1.649 — O CONSOLE DO IMÓVEL (console.html; mockup em
   Outros/Mockup-Console-Imovel, aprovado em 16/09/2026).

   O console mostra a FICHA de verdade dentro de um quadro (iframe do
   mesmo domínio). A ficha se marca `console` no <body> quando abre com
   `?console=1` (ficha.js, v1.648) — e o console marca de novo a cada
   carga do quadro. Estas regras são o que a ficha muda nesse modo:
   · sem o cabeçalho, a faixa da plataforma, o rodapé e a barra do
     celular — quem os tem é a tela de fora;
   · a coluna da direita a 350px (o mockup), não 400;
   · a moldura da página menor, porque o quadro já tem a dele.
   O CSS da casca (a lista, o trilho) mora no <style> do console.html:
   é de uma tela só.
   ------------------------------------------------------------------ */
body.console .topo2, body.console .faixa-plataforma, body.console footer,
body.console .barra-celular { display: none !important; }
/* v1.654 — a barra "Últimos" também some na ficha dentro do console */
body.console .barra-recentes { display: none !important; }
body.console.com-recentes { padding-bottom: 0 !important; }
body.console main { padding: 12px; }
body.console .g70 { grid-template-columns: minmax(0,1fr) 350px; }
@media (max-width: 1040px) { body.console .g70 { grid-template-columns: minmax(0,1fr); } }

/* o ícone do console no cabeçalho é um <a> com a cara dos botões .ico;
   na própria tela do console ele fica aceso como uma aba ativa */
.topo2 a.ico { text-decoration: none; color: inherit; }
.topo2 .ico.ativo { background: #EEF4FF; }
.topo2 .ico.ativo svg, .topo2 .ico.ativo:hover svg { color: #0176D3; }

/* ------------------------------------------------------------------
   v1.653 — AS CORES DOS ÍCONES DO CABEÇALHO (pedido do Rodrigo, 16/09/2026:
   "o favorito amarelo, ajuda em azul, engrenagem cinza e console verde
   da Moralí"). Até aqui os quatro eram o mesmo cinza #7d8a92 e viravam
   navy no hover; agora cada um tem a sua cor e o hover só acende a
   bolinha de fundo — trocar a cor no hover apagaria justamente o que
   distingue um do outro. A engrenagem fica no cinza de sempre.
   O amarelo não é o puro (#FFD700 dá 1,4:1 sobre branco, some): é o
   âmbar #CC8A00, 2,9:1 no traço e legível cheio. A estrela CHEIA (o
   registro é favorito) continua a mesma forma, agora amarela.
   ------------------------------------------------------------------ */
.topo2 #ico-console svg, .topo2 #ico-console:hover svg { color: var(--verde); }
.topo2 #ico-console.ativo svg, .topo2 #ico-console.ativo:hover svg { color: var(--verde-escuro); }
.topo2 #ico-estrela svg, .topo2 #ico-estrela:hover svg,
.topo2 #ico-estrela.marcado svg, .topo2 #ico-estrela.marcado:hover svg { color: #CC8A00; }
.topo2 #ico-ajuda svg, .topo2 #ico-ajuda:hover svg { color: var(--link); }

/* ------------------------------------------------------------------
   v1.656 — AS PASTILHAS SUAVES DO CABEÇALHO (opção C do mockup
   Outros/Mockup-Icones-Cabecalho, escolhida pelo Rodrigo em 16/09/2026).
   Cada botão da linha de cima vira uma pastilha: fundo claro tingido e o
   desenho CHEIO na cor forte — a mesma linguagem dos chips de situação
   (tag-verde, tag-amarela, tag-azul) subindo ao cabeçalho. Os botões
   crescem de 36 para 38px e os desenhos de 19 para 21px (pedido: "um
   pouquinho maiores"). O hover satura a pastilha em vez de trocar a cor.
   Substitui as cores por id da v1.653 (regras iguais, mais abaixo:
   ganham na cascata). A engrenagem fica no cinza. `--furo` é a cor do
   fundo, que o "?" da ajuda usa.
   ------------------------------------------------------------------ */
.topo2 .ico { width: 38px; height: 38px; margin: 0 1px; }
.topo2 .ico svg { width: 21px; height: 21px; }
.topo2 #ico-console svg, .topo2 #ico-console:hover svg { color: #4E8F3C; }
.topo2 #ico-console { background: #EBF6E4; --furo: #EBF6E4; }
.topo2 #ico-console.ativo { background: #7BBC62; }
.topo2 #ico-console.ativo svg, .topo2 #ico-console.ativo:hover svg { color: #fff; }
.topo2 #ico-estrela svg, .topo2 #ico-estrela:hover svg { color: #B97400; }
.topo2 #ico-estrela { background: #FFF3D6; --furo: #FFF3D6; }
.topo2 #ico-estrela.marcado { background: #F2C14E; }
.topo2 #ico-estrela.marcado svg, .topo2 #ico-estrela.marcado:hover svg { color: #6B4300; }
.topo2 #ico-ajuda svg, .topo2 #ico-ajuda:hover svg { color: #0A5E8A; }
.topo2 #ico-ajuda { background: #E7F0F6; --furo: #E7F0F6; }
.topo2 #ico-engrenagem svg, .topo2 #ico-engrenagem:hover svg { color: #5B6870; }
.topo2 #ico-engrenagem { background: #EEF1F3; --furo: #EEF1F3; }
.topo2 #ico-console:hover, .topo2 #ico-estrela:hover, .topo2 #ico-ajuda:hover, .topo2 #ico-engrenagem:hover {
  filter: saturate(1.35) brightness(.96); }

/* ============================================================
   v1.661 — O NÚMERO DA CONVERSA, EM TODO LUGAR QUE ELA APARECE
   (18/09/2026, opção A do Mockup-Telefone-Na-Conversa).

   O cliente tem mais de um telefone, e nenhuma das telas dizia por
   qual deles a conversa corria: dois cartões iguais, duas linhas
   iguais na lista. A pílula resolve isso onde o cabeçalho do cartão
   já está cheio — ela entra na FILEIRA do título, sem custar altura
   nenhuma ao cartão.

   Fundo #EDF3F6 e borda #C9DEEB são os mesmos do hover do botão claro
   no cabeçalho de cartão (linha ~460) e do selo azul do CRM — não é
   um azul novo. O texto é o navy da casa: 11,4:1 sobre este fundo.

   O `:empty` é o que faz a conversa SEM número (Direct do Instagram,
   ou o cartão antes de a conversa nascer) não mostrar uma pílula
   vazia: quem pinta devolve miolo vazio e o espaço some sozinho —
   mesmo recurso do .chatf-ia:empty.

   `tabular-nums` nas três telas para os dígitos alinharem de uma
   linha para a outra: é o que faz o olho bater a diferença entre
   (17) 99141-7160 e (17) 99792-6222 sem ler os dois inteiros.
   ------------------------------------------------------------------ */
.cv-fone-topo { display: inline-flex; align-items: center; gap: 5px;
  background: #EDF3F6; border: 1px solid #C9DEEB; border-radius: 999px;
  padding: 2px 9px 2px 7px; font-size: 11.5px; font-weight: 700; color: var(--azul);
  text-transform: none; letter-spacing: 0; font-variant-numeric: tabular-nums;
  white-space: nowrap; }
.cv-fone-topo svg { flex: none; opacity: .7; }
.cv-fone-topo:empty { display: none; }
.chatf-topo small { font-variant-numeric: tabular-nums; }
.conv-quem .qn small { font-variant-numeric: tabular-nums; }
/* No celular o cabeçalho deste cartão não cabia numa fileira só: com a
   pílula, o "Não gravar" saía por baixo da borda (o .cartao tem
   overflow:hidden e cortava o botão). Abaixo de 600px ele passa a
   quebrar — mesma decisão que a barra do topo da tela Conversas tomou
   na v1.456, e por cima do mesmo motivo. */
@media (max-width: 600px) { #conv-cartao > h2 { flex-wrap: wrap; } }