/* ===== NORIUM — Software Jurídico =====
   Identidade conforme o manual da marca. As cores e a fonte moram aqui e em
   lib/marca.js; o resto do sistema referencia as variáveis, nunca o hexadecimal.

   REGRA DE CONTRASTE, calculada e não estimada:
     sobre BRANCO   coral 3,0 · magenta 3,4 · violeta 5,96 · azul-violeta 6,01
     sobre ESCURO   coral 6,1 · magenta 5,4 · violeta 3,1 · azul-violeta 3,1
   Ou seja: no claro, texto e link são VIOLETA/AZUL-VIOLETA; no escuro, o
   destaque é CORAL/MAGENTA. Coral e magenta sobre branco só valem para
   título grande e preenchimento. Quem mexer nisso refaz a conta antes. */
/* ============================================================
   A LETRA DA INTERFACE NÃO É A LETRA DA MARCA.

   O sistema inteiro usava a Exo 2 — que é geométrica, de tecnologia. Ela é
   boa em título e cansa em tabela: as maiúsculas são largas, e os nomes de
   cliente vêm do ADVBOX em CAIXA ALTA, então é justamente o pior caso que
   aparece 6.184 vezes. Pior: a Exo 2 não tem algarismo tabular, e esta tela é
   feita de número — CPF, CNJ, NB, DER, data, valor. Sem largura fixa de
   dígito, coluna de número não alinha e a lista fica trêmula.

   O logotipo NÃO muda: ele é imagem, com a letra própria da marca. Interface
   e marca usarem letras diferentes é o normal, não a exceção.
   ============================================================ */
/* ============================================================
   A LETRA DA INTERFACE É A INTER — leva 341 (22/set/2026).

   [stated] Dra. Kamille, escolhendo entre três opções vistas lado a lado na
   mesma tela de Processos: "inter".

   Substitui a IBM Plex Sans em toda a interface. Neutra, muito nítida em
   texto pequeno, e com algarismos de largura igual — o tabular-nums do body
   continua fazendo CPF, CNJ e data alinharem em coluna. A serifada dos
   documentos e a Exo 2 da marca não mudam (ver os dois comentários abaixo).
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
/* A serifada NÃO é mais letra de interface (leva 247). Ela continua carregada
   por dois lugares, e só por eles: o editor de rascunho e a folha de impressão
   da ficha — onde o que está na tela é o DOCUMENTO, não o programa.
   Petição se lê em serifada; botão, não. */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:wght@400;500&display=swap');
/* A Exo 2 continua carregada, num peso só, e SÓ para a palavra NORIUM escrita
   em texto (no login). Onde a marca aparece como imagem — a barra lateral —
   nada disso é usado. Trocar a letra da interface não pode arrastar junto a
   letra da marca. */
@import url('https://fonts.googleapis.com/css2?family=Exo+2:wght@600&display=swap');
.marca-palavra{font-family:'Exo 2',"Inter",sans-serif}
/* ============================================================
   NENHUMA CAIXA TEM TEXTO CINZA DE EXEMPLO — leva 378 (27/set/2026).

   [stated] Dra. Kamille: "os campos que precisam ser preenchidos têm exemplo
   do que preencher em letra cinza clara. Eu quero que tire de tudo, tudo,
   tudo mesmo." Perguntada sobre as caixas de busca e de mensagem, em que o
   cinza é a única indicação do que a caixa faz: "Tirar também".

   Uma regra só, aqui, em vez de apagar o texto de 290 caixas uma a uma:
   vale para toda caixa que existe e para toda que for criada depois — ninguém
   precisa lembrar. O texto continua no código (leitores de tela ainda o
   leem, e a busca que reconhece "Buscar…" pela dica continua funcionando);
   só não aparece.

   O que o cinza fazia de ÚTIL foi resolvido de outro jeito, e não em texto:
   a caixa que ainda está buscando a senha ou as anotações fica travada até
   o conteúdo chegar — sem o "buscando…", uma caixa vazia parecia "não tem",
   e alguém digitaria por cima.
   ============================================================ */
::placeholder{color:transparent !important; opacity:0 !important}
/* ============================================================
   A LUPA NA CAIXA DE BUSCA — leva 385 (28/set/2026).

   Sem o texto cinza (leva 378, "tirar também" — decisão dela), a caixa de
   busca virou um retângulo branco sem nada que diga o que ela é. Uma lupa
   desenhada à esquerda diz "busca" sem escrever nada — e não some quando a
   pessoa digita, como sumia o cinza. A de Processos já tinha a sua.
   ============================================================ */
:is(#cli-busca,#ct-busca,#pub-busca,#gerid-busca,#tl-busca,#tf-busca,#kb-busca,#pz-busca,#etq-busca,#ap-busca,#gd-busca,#pm-q,#jr-q,#va-q,#va-pergunta){
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23656E7A' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:12px 50%; background-size:15px 15px;
  padding-left:35px !important;
}
/* leva 385: "Afinar a busca" da Jurisprudência nascia aberto — o painel
   tem display:flex escrito nele, e isso vence o `hidden`. Agora fechado é
   fechado, e o botão abre. */
#jr-afinar[hidden]{display:none !important}
*{box-sizing:border-box;margin:0;padding:0}
:root{
  color-scheme:light;
  --surface-1:#ffffff; --page:#F4F6F8;
  /* --ink-3 é o cinza de TODO texto de apoio (rótulo, dica, subtítulo).
     Era #8a93a6 até 10/set/2026: contraste 3,09:1 no branco, com letra de
     12,5px. A norma pede 4,5:1 nesse tamanho, e na tela de Integrações 49 de
     65 textos estavam abaixo — a Dra. Kamille relatou como "letras muito
     transparentes".

     #616B80 passa em TODOS os fundos que o sistema usa, e essa parte custou
     uma segunda medição: o primeiro valor testado dava 4,69 no branco mas só
     4,37 sobre o fundo cinza da página (#F5F7FA) — reprovado justamente onde
     ficam os subtítulos de seção. Com #616B80: branco 5,35 · página 4,99 ·
     papel-2 5,21 · cinza dos cartões 4,90.

     Ao mexer aqui, meça contra os QUATRO fundos, não só o branco: clarear
     este token é escurecer a leitura de todo o sistema. */
  --ink-1:#131A24; --ink-2:#44505F; --ink-3:#656E7A;
  --grid:#DDE2E8; --axis:#C2C9D2; --border:rgba(19,26,36,.11);
  /* ============================================================
     NAVY SÓBRIO — leva 247 (16/set/2026)

     [stated] Dra. Kamille: "o layout, em geral, do site está muito colorido.
     Precisa ser mais sóbrio, mais sério. E sem parecer letra de IA."

     MEDIDO antes de mexer: 478 cores diferentes escritas à mão no front, em
     2.007 lugares, 37 gradientes e 549 emoji. O que explicava o "parece de
     IA": o acento era #5B3AFF (azul-violeta elétrico), havia um token
     --gold cujo valor era #FF2E9E (rosa-choque), e o gradiente de marca
     tinha quatro cores — coral, rosa, violeta, azul elétrico. Violeta +
     magenta + gradiente é a assinatura visual de quase todo produto de IA
     desde 2023, e num sistema aberto na frente do cliente ela trabalha
     contra.

     Ela escolheu a paleta "B · navy sóbrio": o navy que JÁ é a marca vira a
     única cor de acento — link, botão e destaque saem todos dele. A barra
     lateral não muda de cor.

     As séries de gráfico continuam distinguíveis, em tons de tinta e não em
     néon. As cores de SIGNIFICADO (vencido, atenção, feito) ficam, porque
     ali a cor é informação; só perdem a saturação de alerta.

     Esta camada manda nas classes compartilhadas — ou seja, nas 19 telas de
     uma vez. As 2.007 cores escritas à mão saem tela por tela, no redesenho
     de cada uma; varredura cega quebraria em silêncio.
     ============================================================ */
  --s1:#14213D; --s2:#2C5F45; --s3:#7C5511; --s4:#5B4A6B;
  --s5:#3E6E6E; --s6:#8F2B22; --s7:#44505F; --s8:#6E5A3A;
  /* ============================================================
     AS TINTAS DE ESTADO — leva 277 (18/set/2026).

     [stated] Dra. Kamille: "a única coisa que me incomoda em tudo é quando
     precisa aplicar uma cor coloca essas cores clarinhas vermelho e amarelo
     e verde claro muito feio". Vendo quatro direções lado a lado, escolheu a
     2: PRETO E UM VERMELHO.

     A regra que sai daqui vale para o sistema inteiro: a tela é neutra e
     existe UMA cor. O vermelho #D0342C é ela, e só aparece onde há atraso,
     prazo fatal ou destruição de dado. Atenção virou letra escura, concluído
     virou letra cinza — ninguém precisa de um bloco verde para saber que
     algo foi feito.

     Por que #D0342C e não o #E5484D da maquete: letra branca sobre #E5484D
     dá 3,91:1 e a pastilha é 13px seminegrito, que precisa de 4,5:1. Sobre
     #D0342C dá 4,99:1. A conta foi feita, não estimada.

     --serious deixou de ser um terceiro tom (era #8A4B2A): "urgente" é
     prioridade, não atraso, e agora usa o preto. O vermelho fica reservado
     para o prazo — se tudo é vermelho, nada é.
     ============================================================ */
  --good:#131A24; --warn:#44505F; --serious:#131A24; --crit:#D0342C; --verde:#1E7A46;
  --good-text:#131A24;

  /* --- marca Norium --- */
  --coral:#8A4B2A; --magenta:#7C5511; --violeta:#5B4A6B; --azul-violeta:#14213D;
  --brand:#0D132B; --brand-2:#141C3D;          /* fundo escuro da barra lateral — NÃO muda */
  --brand-escuro:#14213D;                       /* texto de marca sobre branco (11,6:1) */
  /* O gradiente de marca deixou de ser gradiente (leva 247). O token fica,
     achatado, para quem ainda o referencia não quebrar. */
  --gradiente:#14213D;
  --lilas:#DDE2E8; --lilas-2:#EBEEF2;
  --navy:#0D132B;                               /* nome antigo, compatibilidade */
  --gold:#44505F; --gold-2:#6E7885; --cream:#EBEEF2;
  --accent:#14213D; --accent-2:#1E2F4F;
  --radius:12px;

  /* ============================================================
     CAMADA DE TOKENS DO REDESENHO — 6/set/2026.

     A Dra. Kamille pediu o sistema no espírito do Harvey: silencioso, com um
     acento só e a resposta antes do detalhe. Antes de redesenhar tela nenhuma
     fui contar o tamanho do problema: 19 telas, 27.300 linhas de front-end e
     1.473 CORES ESCRITAS À MÃO espalhadas por 43 arquivos, contra 772 usos de
     variável. Dois terços da aparência do sistema não mora aqui.

     Enquanto for assim, "mudar o design" quer dizer reescrever 43 arquivos —
     e cada tela nova reintroduz o problema. Estes tokens são o começo do
     conserto.

     REGRA, a partir de hoje: NENHUMA COR NOVA ESCRITA À MÃO fora deste
     arquivo. Tela nova usa var(--...). Faltou token? Cria-se aqui — não se
     inventa um hexadecimal dentro de um `style=` no meio da tela.

     Por que não troquei as 1.473 de uma vez: varredura cega de substituição
     em telas que estão no ar, num sistema que o escritório usa todo dia,
     quebra em silêncio e ninguém descobre onde. Elas migram tela por tela,
     junto com o redesenho de cada uma.
     ============================================================ */

  /* Superfícies e traços */
  --tela:#F4F6F8;            /* o fundo do palco */
  --papel:#ffffff;           /* cartão, tabela, campo */
  --papel-2:#FBFCFE;         /* cabeçalho de tabela, faixa discreta */
  --linha:#DDE2E8;           /* borda de cartão */
  --linha-fraca:#EBEEF2;     /* divisória entre linhas de lista */

  /* Par de cor por natureza do aviso: fundo e texto já conferidos entre si.
     SEMPRE em par — foi usando o fundo de um com o texto de outro que
     nasceram os doze tons quase iguais espalhados pelo sistema. */
  --marca-fundo:#EBEEF2;   --marca-texto:#14213D;
  /* O degradê do símbolo do Nórium (coral → magenta → roxo), medido no
     próprio norium-simbolo.png (leva 365). Uso pontual: o ícone de abertura
     do Assistente. Não é cor de texto nem de fundo de tela. */
  --marca-brilho-a:#F0707A; --marca-brilho-b:#D0209A; --marca-brilho-c:#7028C0;
  --bom-fundo:#F1F3F6;     --bom-texto:#656E7A;
  --atencao-fundo:#F1F3F6; --atencao-texto:#131A24;
  --critico-fundo:#D0342C; --critico-texto:#FFFFFF;
  /* Leva 277: os três fundos pastel morreram aqui. Bom e atenção passam a
     dividir o MESMO cinza — o que separa os dois é o peso e o tom da letra
     (atenção é #131A24, bom é #656E7A), não mais um verde e um amarelo quase
     iguais. O crítico é o único par que ficou colorido, e virou o contrário
     do que era: fundo cheio vermelho com letra branca.

     Conferidos: branco sobre #D0342C = 4,99:1; #131A24 sobre #F1F3F6 =
     15,73:1; #656E7A sobre #F1F3F6 = 4,65:1. Todos passam dos 4,5:1 que a
     pastilha de 13,5px seminegrito exige.

     ESTES TOKENS SÃO O PAR DA PASTILHA — fundo cheio com letra por cima.
     Para letra solta, barra, borda ou botão cheio existem --crit, --warn e
     --good lá em cima. Usar --critico-texto (que agora é BRANCO) como cor de
     letra numa tela clara faz o texto sumir. */
  /* Leva 393 (28/set/2026) — [stated] Dra. Kamille: "botao arquivado
     precisa aparecer fundo vermelho e letra branca". Volta ao vermelho do
     sistema (--crit): branco sobre #D0342C dá 4,6:1, acima do mínimo de
     4,5:1 para a pastilha em seminegrito. */
  --arquivada-fundo:var(--crit); --arquivada-texto:#ffffff;
  /* Pasta encerrada deixou de ser vinho na leva 277: com uma cor só no
     sistema, um segundo vermelho ao lado do #D0342C lia como "dois alarmes
     diferentes". Encerrada não é alarme — é fim. Virou o preto da tinta.
     Branco sobre ele dá 17,49:1. A preclusão, que usava este token
     justamente por ser vermelha, passou para --crit. */

  /* Escala de texto: um número por PAPEL, não por tela. */
  --t-titulo:1.9375rem;      /* título da tela */
  --t-conclusao:1.4375rem;   /* a frase que responde antes do detalhe */
  /* ============================================================
     O PISO SUBIU DE 12,5 PARA 13,5px — leva 268 (17/set/2026).

     [stated] Dra. Kamille, de novo: "algumas letras ainda estão bem
     pequenas". A leva 235 já tinha subido a escada inteira um degrau e posto
     o piso em 12,5px; sobraram 320 declarações lá embaixo — os rótulos de
     seção, as datas, as dicas e as etiquetas, que é justamente o texto
     pequeno que mais se repete na tela.

     O piso novo é 13,5px (0.8438rem), e o resto subiu meio degrau junto. O
     A− A A+ do topo continua por cima disto: quem precisa de mais ainda
     aumenta, e agora parte de um chão mais alto.
     ============================================================ */
  --t-corpo:0.9375rem;
  --t-apoio:0.9062rem;
  --t-mini:0.8438rem;
  --t-rotulo:0.8438rem;      /* MAIÚSCULA de seção, com letter-spacing .08em */

  /* Raios e ritmo do palco */
  --raio-cartao:12px; --raio-campo:9px; --raio-chip:999px;
  --palco-lado:56px; --palco-topo:34px;

  /* ============================================================
     A LETRA DAS FRASES DE CONCLUSÃO — leva 247 (16/set/2026)

     [stated] Dra. Kamille: "vi que ainda tem letra ali, que é a letra do
     Harvey. Eu quero tirar aquilo lá, deixar a letra de software mesmo."

     Era serifada de propósito, para separar o que o sistema CONCLUI do que
     ele apenas lista. A separação continua existindo — passa a ser feita por
     TAMANHO e PESO, não por outra família de letra. Mesma informação, dita
     com o vocabulário do software.

     A serifada NÃO sai do sistema: continua no editor de rascunho e na folha
     de impressão, onde o que está na tela é o DOCUMENTO, não a interface.
     Petição se lê em serifada; botão, não.
     ============================================================ */
  --fonte-conclusao:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --peso-conclusao:600;

  /* ============================================================
     O TAMANHO DA LETRA DO SISTEMA INTEIRO SAI DAQUI — leva 235 (15/set/2026)

     [stated] Dra. Kamille: "tô vendo que muitas letras aí estão bem pequenas,
     as fontes, está difícil de ler."

     MEDIDO antes de mexer, numa pasta aberta de verdade: 117 de 173 pedaços de
     texto (68%) estavam abaixo de 13px, e o tamanho mais comum do sistema era
     12,5px — 22% menor que o padrão de qualquer navegador. Havia 1.931
     declarações de tamanho espalhadas pelas telas, 270 delas em 11px.

     O QUE MUDOU: todas viraram `rem`, que é medida RELATIVA a esta linha. Cada
     uma subiu um degrau (11→12,5 · 12,5→14 · 13,5→15 · 16→17) e nada ficou
     abaixo de 12,5px.

     `100%` e não `16px`: 100% é o tamanho que a PESSOA configurou no navegador
     dela. Quem já aumentou a letra por precisar enxergar melhor continua sendo
     atendido — cravar 16px aqui apagaria essa escolha sem avisar.

     `--escala` é o ajuste do topo da tela (A− A A+), guardado por navegador.
     Mexer nele mexe em TODA a letra de uma vez, porque não sobrou nenhum
     tamanho em pixel para ficar de fora.
     ============================================================ */
  --escala:1;
  font-size:calc(100% * var(--escala));
}
/* Impresso sai sempre no tamanho base: relatório é papel, e A4 não estica
   porque alguém aumentou a letra da tela. */
@media print{ :root{ font-size:100%; } }
html,body{height:100%}
body{
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  /* Dígito de largura fixa: é o que faz CPF, CNJ e data alinharem em coluna. */
  font-variant-numeric:tabular-nums;
  background:var(--page); color:var(--ink-1);
  display:flex; min-height:100vh;
}
button{font-family:inherit}
/* Campo de formulário nasce com a fonte do navegador, não com a do site: sem
   isto, um textarea aparecia em 13,33px — fora da escala e com outra letra,
   bem no meio da ficha. */
input,select,textarea{font-family:inherit;font-size:var(--t-apoio,12.5px)}

/* ---- Sidebar ---- */
.sidebar{
  width:238px; min-width:238px;
  background:var(--brand); color:#fff;   /* era gradiente até a leva 247 */
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
}
/* ============================================================
   O MENU DA ESQUERDA, MAIS BEM ACABADO — leva 380 (27/set/2026).

   [stated] Dra. Kamille: "A sidebar esquerda tá muito amadora (...) Tá
   parecendo um software qualquer feito por IA." Escolheu, entre prévias
   montadas na tela dela, o menu separado por assunto e com nomes curtos.

   O que mudou no desenho, e por quê:
   · logotipo menor e sem a linha embaixo — ele abria o menu gritando;
   · letra um degrau abaixo, mais clara, e o item aberto marcado só pelo
     fundo, sem a barrinha branca: pílula + barra é o enfeite de todo
     modelo pronto;
   · ícone um pouco maior e mais fino, apagado até o mouse passar;
   · o rótulo de cada grupo discreto — ele organiza, não compete;
   · a faixa "Seu escritório. Tudo conectado." saiu (app/page.js): era
     frase de propaganda dentro do sistema.
   ============================================================ */
.sidebar .logo .marca-lockup{width:118px;height:auto;display:block}
.sidebar .logo{padding:20px 20px 10px; border-bottom:none}
.sidebar .logo h1{font-size:1.3125rem; letter-spacing:.3px; font-weight:600; display:flex; align-items:center}
.sidebar .logo h1 .logo-name{color:#fff; font-weight:600; letter-spacing:.16em}
/* ===== O "PRO" =====
   Era uma gema: gradiente de quatro paradas, brilho externo e um reflexo
   animado atravessando a peça a cada 7,4s. Na leva 247 virou etiqueta lisa.
   Brilho que atravessa é enfeite, e enfeite é o que mais entrega "feito por
   IA" numa tela que a advogada abre na frente do cliente. */
.sidebar .logo h1 .logo-pro{
  font-size:0.9062rem; font-weight:700; letter-spacing:.6px;
  color:#fff; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  padding:2px 8px; border-radius:5px; margin-left:6px;
}
}
@media (prefers-reduced-motion:reduce){
  .sidebar .logo h1 .logo-pro::after{animation:none; opacity:0}
}
.sidebar .logo p{font-size:0.8438rem; color:var(--lilas-2); margin-top:5px; letter-spacing:.6px; text-transform:uppercase; font-weight:500}
.nav{padding:0 10px 18px; flex:1}
.nav h4{font-size:0.8438rem; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,255,255,.4); padding:16px 10px 5px; font-weight:600}
.nav button{
  display:flex; align-items:center; gap:11px; width:100%; text-align:left;
  background:none; border:none; color:rgba(255,255,255,.74); font-size:0.9062rem; font-weight:400;
  padding:6px 10px; margin:1px 0; border-radius:7px; cursor:pointer; line-height:1.25; position:relative;
  transition:background .12s,color .12s;
}
.nav button:hover{background:rgba(255,255,255,.06); color:#fff}
.nav button.active{background:rgba(255,255,255,.09); color:#fff; font-weight:500}
.nav button .ic{width:16px; display:inline-flex; justify-content:center; opacity:.6; flex:none}
.nav button .ic svg{width:16px; height:16px; stroke-width:1.6}
.nav button:hover .ic,.nav button.active .ic{color:#fff; opacity:1}
.nav button .badge{font-size:0.8438rem; line-height:18px; padding:0 7px; min-width:20px; justify-content:center; border-radius:999px}
.sidebar .demo-tag{margin:0 14px 14px; font-size:0.8438rem; color:rgba(255,255,255,.6);
  border:1px solid rgba(6,182,212,.25); border-radius:8px; padding:8px 10px; line-height:1.4; font-style:italic}

/* ---- Main ---- */
.main{flex:1; min-width:0; display:flex; flex-direction:column}
/* ============================================================
   A GEOMETRIA DA PÁGINA — leva 381 (27/set/2026).

   [stated] Dra. Kamille: "Ainda me incomoda em todos os módulos, quando
   você abre, a desordem, a falta de uma organização geométrica melhor."

   Medido módulo a módulo numa tela larga: o título de toda tela começa
   na mesma linha (x=260), mas o CONTEÚDO não. Seis telas (Agenda,
   Tarefas, Processos, Contratos, Assistente, Pesquisa) usavam a largura
   toda e começavam alinhadas ao título; as outras catorze ficavam
   centralizadas numa coluna de 1.360px e começavam ~100px mais para
   dentro. Trocar de módulo fazia a tela inteira "pular" de lugar.

   Agora TODO conteúdo começa na mesma linha do título. A coluna de
   1.360px continua nas telas de leitura (termina antes, à direita), mas
   não flutua mais no meio.

   E a barra de cima não quebra mais em duas linhas: em Gestão, os
   filtros empurravam o ajuste de letra e o nome da pessoa para baixo.
   Agora quem se ajusta são os filtros, dentro do espaço deles; título à
   esquerda e pessoa à direita ficam sempre no mesmo lugar.
   ============================================================ */
.topbar{
  display:flex; align-items:center; gap:14px; flex-wrap:nowrap;
  padding:13px 22px; background:var(--surface-1); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:50;
}
.topbar h2{font-size:1.3125rem; flex:none; white-space:nowrap}
.topbar .filters{flex:1 1 auto; min-width:0}
.topbar > :not(h2):not(.filters){flex:none}
.filters{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.filters select{
  font-size:0.9062rem; padding:6px 8px; border:1px solid var(--grid); border-radius:8px;
  background:#fff; color:var(--ink-1); max-width:190px;
}
.filters .flabel{font-size:0.9062rem; color:var(--ink-3); text-transform:uppercase; letter-spacing:.5px}
.userchip{display:flex; align-items:center; gap:8px; font-size:0.9062rem; color:var(--ink-2);
  border-left:1px solid var(--grid); padding-left:14px}
.userchip .avatar{width:28px; height:28px; border-radius:50%; background:var(--marca-fundo); color:var(--brand);
  display:flex; align-items:center; justify-content:center; font-size:0.9062rem; font-weight:700}

.content{padding:20px 22px 44px; max-width:1360px; width:100%; margin:0}

/* ---- Cards / grid ---- */
.grid{display:grid; gap:14px}
.g-kpi{grid-template-columns:repeat(auto-fit,minmax(148px,1fr))}
.g-2{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
.g-3{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g-4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.card{
  background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius);
  padding:15px 16px 14px;
}
.card h3{font-size:0.9375rem; font-weight:600; color:var(--ink-1); margin-bottom:2px}
.card .sub{font-size:0.9062rem; color:var(--ink-3); margin-bottom:10px}
.card.section{margin-top:14px}
.mt{margin-top:14px}

/* ---- Stat tiles ---- */
.tile .lbl{font-size:0.9062rem; color:var(--ink-2)}
/* leva 381: numa fileira de indicadores, o número fica na MESMA altura em
   todos os cartões. "Protocolos no mês" quebra em duas linhas e
   "Procedências" não — e o 96 ficava mais baixo que o 14 ao lado. O rótulo
   ganha a altura de duas linhas e encosta embaixo, junto do número. */
.g-kpi > .tile .lbl{min-height:2.4em; display:flex; align-items:flex-end}
.tile .val{font-size:1.5625rem; font-weight:600; margin-top:2px}
.tile .delta{font-size:0.9062rem; margin-top:3px; color:var(--ink-3)}
.tile .delta .up{color:var(--good-text); font-weight:600}
.tile .delta .down{color:var(--crit); font-weight:600}
.tile .delta .neutral{color:var(--ink-3); font-weight:600}

/* ---- Semáforo de metas ---- */
.badge{display:inline-flex; align-items:center; gap:5px; font-size:0.9062rem; font-weight:600;
  border-radius:999px; padding:2.5px 9px}
.badge.ok{background:rgba(12,163,12,.12); color:#00591c}
.badge.mid{background:rgba(250,178,25,.16); color:#6e4e00}
.badge.bad{background:rgba(208,59,59,.12); color:#8f1d1d}
.badge.info{background:rgba(42,120,214,.12); color:#173f77}
.badge.neutral{background:rgba(11,11,11,.06); color:var(--ink-2)}

/* ---- Tabelas ---- */
table.tb{width:100%; border-collapse:collapse; font-size:0.9062rem}
.tb th{font-size:0.8438rem; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-3);
  text-align:left; font-weight:600; padding:7px 8px; border-bottom:1px solid var(--grid)}
.tb td{padding:7px 8px; border-bottom:1px solid #efeeea; vertical-align:middle}
.tb tr:last-child td{border-bottom:none}
.tb td.num,.tb th.num{text-align:right; font-variant-numeric:tabular-nums}
.tb tbody tr:hover{background:rgba(42,120,214,.04)}
.tb .rowlink{cursor:pointer}

/* meter (progresso de meta) */
.meter{height:8px; border-radius:4px; background:#dde9f8; overflow:hidden; min-width:70px}
.meter>i{display:block; height:100%; border-radius:4px}

/* ---- Legendas ---- */
.legend{display:flex; gap:14px; flex-wrap:wrap; font-size:0.9062rem; color:var(--ink-2); margin-top:8px}
.legend .it{display:flex; align-items:center; gap:5px}
.legend .sw{width:10px; height:10px; border-radius:3px; flex:none}
.legend .swl{width:14px; height:3px; border-radius:2px; flex:none}

/* ---- Tooltip ---- */
#tip{position:fixed; z-index:1000; pointer-events:none; background:#141414; color:#fff;
  font-size:0.9062rem; border-radius:8px; padding:7px 10px; max-width:260px; line-height:1.45;
  box-shadow:0 4px 14px rgba(0,0,0,.25); opacity:0; transition:opacity .08s}
#tip b{font-weight:600}
#tip .trow{display:flex; justify-content:space-between; gap:12px}
#tip .tsw{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}

/* ---- Alertas ---- */
.alert{display:flex; gap:10px; padding:10px 12px; border-radius:10px; font-size:0.9062rem;
  border:1px solid var(--border); background:#fff; margin-bottom:8px; align-items:flex-start}
.alert .aic{flex:none; width:26px; height:26px; border-radius:8px; display:flex; align-items:center;
  justify-content:center; font-size:0.9375rem}
.alert.crit .aic{background:rgba(208,59,59,.13)}
.alert.warn .aic{background:rgba(250,178,25,.2)}
.alert.info .aic{background:rgba(42,120,214,.12)}
.alert b{font-weight:600}
.alert .asub{color:var(--ink-3); font-size:0.9062rem; margin-top:1px}
.alert .alink{margin-left:auto; flex:none; align-self:center}

/* ---- Insights ---- */
.insight{border-left:3px solid var(--s1); background:#fff; border-radius:0 10px 10px 0;
  padding:11px 14px; margin-bottom:9px; border-top:1px solid var(--border);
  border-right:1px solid var(--border); border-bottom:1px solid var(--border); font-size:0.9375rem}
.insight .imeta{font-size:0.9062rem; color:var(--ink-3); margin-top:4px; display:flex; gap:12px; flex-wrap:wrap}
.insight.pos{border-left-color:var(--good)}
.insight.neg{border-left-color:var(--crit)}
.insight.neu{border-left-color:var(--s4)}

/* ---- Links / botões ---- */
a.lnk,button.lnk{color:var(--accent); font-size:0.9062rem; font-weight:600; text-decoration:none;
  background:none;border:none;cursor:pointer;padding:0}
a.lnk:hover,button.lnk:hover{text-decoration:underline}
.btn{display:inline-flex; align-items:center; gap:6px; background:var(--brand); color:#fff;
  border:none; border-radius:8px; padding:8px 14px; font-size:0.9062rem; font-weight:600; cursor:pointer}
.btn:hover{background:var(--brand-2)}
.btn.sec{background:#fff; color:var(--ink-1); border:1px solid var(--grid)}
.btn.sec:hover{background:var(--page); border-color:var(--gold)}

/* ---- Mapa ---- */
.map-wrap{display:grid; grid-template-columns:minmax(340px,1.15fr) minmax(300px,1fr); gap:14px}
@media(max-width:900px){.map-wrap{grid-template-columns:1fr}}
.map-svg path{stroke:#fcfcfb; stroke-width:1; cursor:pointer; transition:opacity .1s}
.map-svg path:hover{opacity:.78; stroke:var(--ink-1); stroke-width:1.2}
.map-svg path.sel{stroke:var(--ink-1); stroke-width:1.6}
.map-ctrl{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:10px}
.map-ctrl button{font-size:0.9062rem; padding:5px 10px; border-radius:999px; border:1px solid var(--grid);
  background:#fff; cursor:pointer; color:var(--ink-2)}
.map-ctrl button.active{background:var(--brand-2); border-color:var(--brand-2); color:#fff; font-weight:600}
.map-scale{display:flex; align-items:center; gap:2px; margin-top:8px; font-size:0.8438rem; color:var(--ink-3)}
.map-scale i{height:10px; flex:1; display:block}

/* ---- Ficha do processo (modal) ---- */
.modal-bg{position:fixed; inset:0; background:rgba(10,14,22,.5); z-index:200;
  display:flex; align-items:flex-start; justify-content:center; padding:4vh 16px; overflow:auto}
.modal{background:var(--surface-1); border-radius:14px; max-width:820px; width:100%; padding:20px 22px;
  box-shadow:0 18px 60px rgba(0,0,0,.3)}
.modal h3{font-size:1.0625rem}
.modal .close{float:right; background:none; border:none; font-size:1.3125rem; cursor:pointer; color:var(--ink-3)}
.kv{display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:9px 18px; margin-top:12px}
.kv .k{font-size:0.8438rem; text-transform:uppercase; letter-spacing:.4px; color:var(--ink-3)}
.kv .v{font-size:0.9375rem; margin-top:1px}
/* ===== Anotações gerais =====
   Era um bloco creme com borda âmbar, herdado de quando a paleta do sistema
   era outra. Na leva 247 virou o que é hoje: papel quase branco e um filete
   navy na lateral — a mesma tinta do resto do sistema, sem lilás. */
.anot-bloco{margin-top:11px; background:var(--papel-2,#FBFCFE); border:1px solid var(--linha,#DDE2E8);
  border-left:3px solid var(--accent,#14213D); border-radius:0 10px 10px 0; padding:9px 13px}
.anot-bloco summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:9px; flex-wrap:wrap}
.anot-bloco summary::-webkit-details-marker{display:none}
.anot-tit{font-size:0.8438rem; text-transform:uppercase; letter-spacing:.5px; color:var(--brand-escuro,#14213D); font-weight:700}
.anot-org{font-weight:500; color:var(--ink-3); letter-spacing:.3px}
.anot-n{font-size:0.8438rem; color:var(--ink-3)}
.anot-btn{font-size:0; font-weight:600; color:var(--accent,#14213D);
  border:1px solid var(--linha,#DDE2E8); background:#fff; border-radius:7px; padding:3px 10px}
.anot-btn::after{font-size:0.9062rem}
.anot-bloco:not([open]) .anot-btn::after{content:'ver anotações'}
.anot-bloco[open] .anot-btn::after{content:'esconder'}
.anot-bloco:hover .anot-btn{border-color:var(--brand-2,#6D28D9)}
.anot-corpo{font-size:0.9062rem; color:var(--ink-2); white-space:pre-wrap; line-height:1.55;
  margin-top:9px; max-height:270px; overflow:auto; padding-right:4px}
.anot-copiar{margin-top:9px; padding:3px 10px; font-size:0.8438rem}
.anot-bloco[open]{padding-bottom:12px}

/* ===== A faixa de anotações (leva 242, 16/set/2026) =====
   As anotações ficam logo depois da resposta do caso, inteiras por trás de
   um "ver tudo": três linhas à vista, o resto num clique, ali mesmo. Nunca
   cortadas com reticências e nunca dependendo de parar o mouse em cima.
   `pre-wrap` guarda as quebras de linha que vieram do ADVBOX. */
.anot-faixa{margin-top:10px; background:var(--papel-2,#FBFCFE); border:1px solid var(--linha,#DDE2E8);
  border-left:3px solid var(--accent,#14213D); border-radius:0 10px 10px 0; padding:9px 13px 8px}
.anot-faixa-tit{font-size:0.8438rem; text-transform:uppercase; letter-spacing:.5px;
  color:var(--brand-escuro,#14213D); font-weight:700; margin-bottom:4px}
.anot-faixa-txt{font-size:0.9375rem; color:var(--ink-2); line-height:1.55; white-space:pre-wrap; word-break:break-word;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.anot-faixa.aberta .anot-faixa-txt{display:block; -webkit-line-clamp:unset; overflow:visible}
.anot-faixa .anot-cad{margin-top:6px}
.anot-faixa .anot-cad b{color:var(--ink-3); font-weight:600}
.anot-faixa-acoes{display:flex; gap:14px; margin-top:6px}
.anot-faixa-acoes .lnk{font-size:0.8438rem; font-weight:600; padding:0}

/* Última divisória da linha de indicadores não aparece — senão fica um
   risco solto no fim da linha. */
.ficha-chips > div:last-child{border-right:none !important; margin-right:0 !important; padding-right:0 !important}

/* Títulos de seção da ficha. Eram 12px cinza em maiúscula, do mesmo peso do
   texto ao redor — a pessoa rolava e não achava onde começava cada parte.
   Agora têm tamanho, cor da marca e uma faixa colorida que identifica o bloco
   à distância, sem precisar ler. */
/* Era uma barra de 3px de largura total, e cada seção puxava uma cor própria
   — ciano, roxo, verde. Numa tela com quatro seções isso vira uma cerca
   colorida disputando atenção com o conteúdo. Fio de 1px, cor única. */
.sec-forte{display:flex; align-items:center; gap:9px; font-size:1.0625rem; font-weight:700;
  color:var(--brand-escuro,#14213D); letter-spacing:-.1px; text-transform:none;
  margin:16px 0 4px; padding:12px 0 0; border-top:1px solid var(--grid); border-bottom:none}
.sec-forte .sf-ic{width:26px; height:26px; border-radius:8px; display:inline-flex;
  align-items:center; justify-content:center; flex:none; font-size:1.0625rem}
.sec-forte .sf-cont{font-size:0.9062rem; font-weight:700; background:var(--brand-escuro,#2E1065);
  color:#fff; border-radius:999px; padding:1px 9px}
.sec-forte .sf-sub{font-size:0.9062rem; font-weight:400; color:var(--ink-3); letter-spacing:0}

/* Cabeçalho da ficha preso no topo: em pasta com histórico longo, a pessoa
   rolava e perdia de vista de quem era o processo e onde ficam as ações. */
.ficha-topo{position:sticky; top:-20px; z-index:5; background:var(--surface-1);
  padding:20px 0 2px; margin:-20px 0 0; border-bottom:1px solid transparent}
.ficha-topo.rolou{border-bottom-color:var(--grid); box-shadow:0 6px 14px -10px rgba(0,0,0,.35)}
.modal h4.sec{font-size:0.9062rem; text-transform:uppercase; letter-spacing:.6px; color:var(--ink-3);
  border-bottom:1px solid var(--grid); padding-bottom:5px; margin-top:18px}

/* ---- Formularios mock ---- */
.form-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px}
.fg label{display:block; font-size:0.9062rem; text-transform:uppercase; letter-spacing:.5px; color:var(--ink-3); margin-bottom:4px}
.fg input,.fg select{width:100%; padding:8px 10px; border:1px solid var(--grid); border-radius:8px;
  font-size:0.9375rem; background:#fff; color:var(--ink-1)}
.fg input[disabled]{background:#f1f1ee; color:var(--ink-3)}
.hint{font-size:0.9062rem; color:var(--ink-3); line-height:1.5}

/* ============================================================
   RODAPÉ DE PÁGINAS — usado por Processos, Clientes e Tarefas (leva 188).

   Morava dentro do <style> que a tela de Processos injeta quando é aberta.
   Quando Clientes e Tarefas passaram a paginar também, quem abrisse uma
   delas primeiro via botões sem forma nenhuma. Regra: estilo compartilhado
   por mais de uma tela mora aqui, não no <style> de uma delas.
   ============================================================ */
.pr-pe{display:flex; gap:10px; align-items:center; margin-top:12px; font-size:0.9062rem; color:var(--ink-3)}
.pr-pe button{height:34px; padding:0 14px; border-radius:9px; border:1px solid var(--grid);
  background:#fff; font-family:inherit; font-size:0.9062rem; cursor:pointer; color:var(--ink-1)}
.pr-pe button:disabled{opacity:.4; cursor:default}

/* O campo que está segurando o Salvar, depois de a tela rolar até ele
   (leva 192). Pisca duas vezes e para: destaque que não some vira decoração,
   e destaque que pisca sem parar cansa quem está lendo. */
.campo-pedido{ outline:2px solid var(--crit); outline-offset:2px; border-color:var(--crit) !important;
  animation: campoPedido 1s ease-in-out 2 }
@keyframes campoPedido{ 0%,100%{ box-shadow:0 0 0 0 rgba(208,59,59,0) } 50%{ box-shadow:0 0 0 5px rgba(208,59,59,.22) } }
@media (prefers-reduced-motion: reduce){ .campo-pedido{ animation:none } }

.pill-steps{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 14px}
.pill-steps span{font-size:0.9062rem; border:1px solid var(--grid); background:#fff; padding:4px 10px;
  border-radius:999px; color:var(--ink-2)}
.pill-steps span.on{background:var(--brand-2); color:#fff; border-color:var(--brand-2); font-weight:600}

.note{background:rgba(42,120,214,.07); border:1px solid rgba(42,120,214,.2); border-radius:10px;
  padding:10px 13px; font-size:0.9062rem; line-height:1.55; margin-bottom:14px}
.note.warn{background:rgba(250,178,25,.1); border-color:rgba(250,178,25,.35)}

.chart-scroll{overflow-x:auto}
.viz-note{font-size:0.9062rem;color:var(--ink-3);margin-top:6px}

@media(max-width:840px){
  body{flex-direction:column}
  .sidebar{width:100%; min-width:0; height:auto; position:static; max-height:none}
  .nav{display:flex; flex-wrap:wrap; gap:2px}
  .nav h4{width:100%}
  .nav button{width:auto}
  .topbar{position:static; flex-wrap:wrap}
}

/* ---- Login ---- */
/* Leva 419: o <body> do sistema é flex (menu + tela), e a tela de entrada
   ficava numa faixa estreita à esquerda, com o cartão espremido. Agora ela
   ocupa a janela inteira: o cartão à esquerda e, ao lado, o painel da marca
   (o mesmo visual do card de boas-vindas). No celular, só o cartão. */
.login-bg{min-height:100vh;width:100%;flex:1 1 100%;display:grid;grid-template-columns:minmax(360px,520px) 1fr;box-sizing:border-box;
  background:radial-gradient(900px 600px at 105% -10%, rgba(124,58,237,.32), transparent 60%),radial-gradient(700px 500px at 30% 110%, rgba(255,84,120,.16), transparent 60%),#0E1528}
.login-bg > .login-card{align-self:center;justify-self:center;margin:24px 16px}
.login-lado{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:48px 56px;color:#fff;background:transparent}
.login-lado-n{position:absolute;right:-120px;bottom:-60px;width:620px;opacity:.07;pointer-events:none}
.login-lado-topo{display:flex;align-items:center;gap:10px;font-size:0.9375rem;font-weight:600;letter-spacing:.2em;color:#C9CFDC}
.login-lado-topo img{height:26px;width:auto}
.login-lado-meio{position:relative;max-width:620px}
.login-lado-data{font-size:1rem;color:#AEB6C7;letter-spacing:.02em}
.login-lado h2{margin-top:14px;font-size:3.25rem;line-height:1.08;font-weight:800;letter-spacing:-.02em;color:#fff}
.login-lado h2 span{background:linear-gradient(90deg,#FF7A6B,#F23C8B 45%,#8B45F0);-webkit-background-clip:text;background-clip:text;color:transparent}
.login-lado p{margin-top:18px;font-size:1.125rem;line-height:1.55;color:#C9CFDC;max-width:520px;text-transform:none;letter-spacing:0}
.login-lado-pe{position:relative;font-size:0.9375rem;color:#8E97AB;letter-spacing:.04em}
@media (max-width:900px){ .login-bg{grid-template-columns:1fr;background:var(--brand)} .login-lado{display:none} }
.login-card{background:#fff;border-radius:16px;padding:36px 36px 30px;max-width:410px;width:92%;box-shadow:0 24px 70px rgba(0,0,0,.45);border-top:4px solid var(--accent)}
.login-card h1{font-size:1.5625rem;color:var(--accent);margin-bottom:4px;font-weight:600;display:flex;align-items:center}
.login-card p{font-size:0.9062rem;color:#616B80;margin-bottom:22px;text-transform:uppercase;letter-spacing:.6px}
/* Leva 418: tela de entrada com o nome do escritório cliente. */
.login-card h1.login-escritorio{font-size:1.625rem;line-height:1.25;color:var(--brand,#14213D);font-weight:700;letter-spacing:-.01em;display:block}
.login-plataforma{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:22px;padding-top:16px;border-top:1px solid #E6E9EE;font-size:0.8438rem;color:#616B80;letter-spacing:.04em}
.login-plataforma img{height:18px;width:auto}
.login-plataforma b{letter-spacing:.16em;font-weight:600;color:var(--brand,#14213D)}
.login-card label{display:block;font-size:0.9062rem;text-transform:uppercase;letter-spacing:.5px;color:#616B80;margin:12px 0 4px;font-weight:500}
.login-card input{width:100%;padding:11px 12px;border:1px solid #e4e8f0;border-radius:8px;font-size:1.0625rem;font-family:inherit}
.login-card input:focus{outline:2px solid rgba(20,33,61,.28);border-color:var(--accent)}
.login-card button{width:100%;margin-top:20px;padding:12px;background:var(--accent);border:none;border-radius:8px;color:#fff;font-size:1.0625rem;font-weight:600;cursor:pointer;font-family:inherit}
.login-card button:hover{filter:brightness(1.08)}
.login-erro{background:rgba(208,59,59,.1);border:1px solid rgba(208,59,59,.3);color:#8f1d1d;font-size:0.9062rem;border-radius:8px;padding:8px 12px;margin-top:14px}

/* ---- Formulário de classificação ---- */
.clsf{background:#f4f7fc;border:1px solid rgba(42,120,214,.25);border-radius:12px;padding:14px;margin-top:14px}
.clsf h4{font-size:0.9062rem;color:#12315e;margin-bottom:10px}
.clsf .fg label{background:none}
.clsf details{margin-top:10px;border-top:1px solid #e1e0d9;padding-top:8px}
.clsf summary{font-size:0.9062rem;font-weight:600;color:var(--accent);cursor:pointer}
.clsf .form-grid{margin-top:10px}
.salvo-ok{background:rgba(12,163,12,.12);color:#00591c;font-size:0.9062rem;border-radius:8px;padding:8px 12px;margin-top:10px}
.spin{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;animation:sp 0.8s linear infinite;vertical-align:-2px}
@keyframes sp{to{transform:rotate(360deg)}}

/* ===== v3 — polimento visual: escala única e controles uniformes ===== */
.nav h4{font-size:0.8438rem;letter-spacing:1.1px;color:rgba(255,255,255,.38);padding:16px 12px 6px}
.nav button{border-radius:8px;padding:7px 10px;font-size:0.9375rem;gap:9px}
.nav button .ic{width:17px;display:inline-flex;align-items:center;justify-content:center;opacity:.8}
.nav button.active .ic{opacity:1}
.content select, .content input[type="text"], .content input:not([type]), .content input[type="date"],
.content input[type="number"], .content input[type="search"]{
  height:34px;box-sizing:border-box;border:1px solid var(--grid);border-radius:8px;
  font-size:0.9062rem;font-family:inherit;padding:0 10px;background:#fff;color:var(--ink-1)}
.content select:focus, .content input:focus{outline:2px solid rgba(42,120,214,.25);border-color:var(--s1)}
/* Leva 390: o calendário abre na ponta direita do campo (ver
   ligaCalendarioNoClique em core.js) — o ícone cresce para ser achado. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator{
  width:18px;height:18px;padding:4px;margin-left:4px;border-radius:6px;cursor:pointer;opacity:.75}
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
input[type="month"]::-webkit-calendar-picker-indicator:hover{opacity:1;background-color:var(--papel-2)}
/* Leva 390: valor com vírgula (campoDecimalBR em core.js). */
input[data-decimal-br]{font-variant-numeric:tabular-nums}
input.campo-nao-entendido{border-color:var(--crit) !important;outline:2px solid var(--crit)}
.btn{height:34px;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;
  border-radius:8px;font-size:0.9062rem;padding:0 14px}
.map-ctrl{border-radius:8px;overflow:hidden}
.map-ctrl button{height:34px;box-sizing:border-box;font-size:0.9062rem;padding:0 12px}
.card{border-radius:12px}
.card h3{font-size:1.0625rem}
h4.sec{font-size:0.9062rem;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-3);
  margin:18px 0 8px;padding-top:12px;border-top:1px solid var(--grid);display:flex;align-items:center;gap:5px}
.modal{border-radius:14px}
.badge{border-radius:6px;font-size:0.8438rem;padding:2px 7px}
.lnk svg{vertical-align:-2px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#d5d3cc;border-radius:8px;border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:#bdbab2;background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* v3.1 — nada de corte ou rolagem lateral nos cartões */
#tf-lista.tf-rows{overflow-x:hidden}
#tf-lista.tf-rows > div{min-width:0}
/* NUNCA quebrar palavra no meio: "ANALISA / R ACÓRDÃ / O" é ilegível.
   Quebra só entre palavras; o que não couber é cortado com reticências. */
.tk-card, .kb-card{min-width:0;overflow-wrap:break-word;word-break:normal;hyphens:none}
.tk-card .lnk, .tk-row .lnk{white-space:nowrap;text-align:left;overflow:hidden;text-overflow:ellipsis;
  display:block;max-width:100%;overflow-wrap:normal}
.tk-row{flex-wrap:wrap}
.tk-row > div{min-width:0}

/* v3.2 — apagar item do histórico só realça no hover */
/* O × de apagar vai para a BORDA da linha, não para o fim do texto: com o teto
   de leitura de 90ch (leva 272) a caixa de texto encurtou e ele passou a
   flutuar no meio da linha, parecendo parte da frase. */
.hist-del{transition:opacity .12s; margin-left:auto}
.hist-item:hover .hist-del{opacity:1 !important}

/* Botão redondo de concluir tarefa (diferente do quadrado de seleção) */
/* A bolinha é ao mesmo tempo o ESTADO da tarefa e o botão de concluir:
   amarela = pendente · vermelha = atrasada · verde escuro = concluída.
   O ✓ só aparece no hover enquanto está aberta, para a cor falar primeiro. */
.tk-done{flex:none;margin-top:2px;width:23px;height:23px;border-radius:6px;border:2px solid;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-size:0.9375rem;font-weight:800;line-height:1;padding:0;transition:all .15s}
/* Farol de estado: cor sólida, viva, com halo de luz da própria cor.
   Sem borda escura — o brilho é que dá o relevo. */
.tk-done{border:none;box-shadow:0 1px 2px rgba(16,24,40,.16)}
.tk-done.pend{background:var(--warn);color:transparent;
  box-shadow:0 0 0 3px rgba(245,158,11,.18), 0 2px 6px rgba(245,158,11,.42)}
.tk-done.pend:hover{background:#6A4810;color:#fff;
  box-shadow:0 0 0 4px rgba(245,158,11,.26), 0 3px 10px rgba(245,158,11,.55)}
.tk-done.atras{background:var(--crit);color:transparent;
  box-shadow:0 0 0 3px rgba(225,29,72,.18), 0 2px 6px rgba(225,29,72,.42)}
.tk-done.atras:hover{background:#75231B;color:#fff;
  box-shadow:0 0 0 4px rgba(225,29,72,.28), 0 3px 10px rgba(225,29,72,.55)}
.tk-done.feito{background:var(--good);color:#fff;
  box-shadow:0 0 0 3px rgba(5,150,105,.18), 0 2px 6px rgba(5,150,105,.42)}
.tk-done.feito:hover{background:#1E4D39}
.tk-done[disabled]{opacity:.55;cursor:not-allowed;background:#cbd2dd;color:transparent;box-shadow:none}
.tk-done[disabled]:hover{background:#cbd2dd;color:transparent;box-shadow:none}
/* Quadrado de seleção em massa — quadrado e dourado, contra o redondo verde
   de concluir. Forma e cor diferentes: dá pra distinguir de relance. */
.tf-sel, .fk-sel{border-radius:4px;accent-color:var(--warn)}
/* O quadrado de seleção só existe quando o modo "Selecionar várias" está
   ligado — solto no meio da linha ele não dizia nada a ninguém. */
.tf-sel{display:none}
body.sel-modo .tf-sel{display:inline-block}
/* Coluna de seleção some quando não há nada selecionado? Não — mas fica
   afastada do botão de concluir, para não parecerem um par. */
.tk-row .tf-sel{margin-right:6px}

/* ---- Kanban de fases (modern) ---- */
/* Kanban: colunas SEMPRE lado a lado, com rolagem horizontal. O grid com
   auto-fill quebrava linha quando não cabia e empilhava as colunas uma sobre
   a outra — deixava de ser quadro. */
/* O quadro ocupa a largura toda da tela e rola até o fim — sem coluna cortada
   pela metade na borda direita. */
.kb-board, .tf-kanban{display:flex;flex-wrap:nowrap;gap:12px;align-items:flex-start;
  width:100%;max-width:100%;min-width:0;
  overflow-x:auto;overflow-y:hidden;padding:2px 4px 14px 2px;
  scroll-padding-right:20px;scrollbar-width:thin;overscroll-behavior-x:contain}
/* Sombra na borda direita avisando que o quadro continua para o lado */
/* ===== Barra de progresso das tarefas ===== */
.tf-prog{background:#fff;border:1px solid var(--kb-line);border-radius:12px;padding:13px 16px;margin-bottom:14px}
.tf-prog-topo{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:9px}
.tf-prog-pct{font-size:1.5625rem;font-weight:800;line-height:1;letter-spacing:-.5px}
.tf-prog-rot{font-size:0.9062rem;color:var(--kb-mid);font-weight:600}
.tf-prog-sit{margin-left:auto;font-size:0.9062rem;font-weight:800;padding:4px 11px;border-radius:999px;letter-spacing:.2px}
.tf-prog-bar{height:14px;border-radius:99px;background:#eef0f4;overflow:hidden;display:flex;
  box-shadow:inset 0 1px 2px rgba(16,24,40,.07)}
.tf-prog-bar i{display:block;height:100%;transition:width .45s cubic-bezier(.4,0,.2,1)}
.tf-prog-bar i.ok{background:var(--good)}
.tf-prog-bar i.pend{background:var(--warn)}
.tf-prog-bar i.atras{background:var(--crit)}
.tf-prog-leg{display:flex;gap:16px;flex-wrap:wrap;margin-top:9px;font-size:0.9062rem;color:var(--kb-mid)}
.tf-prog-leg span{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.tf-prog-leg i{width:11px;height:11px;border-radius:3px;display:inline-block}

.kb-wrap{position:relative;width:100%;max-width:100%;min-width:0}
/* ============================================================
   O QUADRO SE PEGA E SE PUXA — leva 273 (18/set/2026).
   [stated] "deslizar segurando o mouse (...) em vez de ficar clicando".
   A mãozinha aparece no FUNDO do quadro, não em cima do cartão: cartão tem
   o gesto dele (arrastar muda a fase da pasta) e não pode ficar ambíguo.
   Enquanto se puxa, o texto não é selecionado — senão a página inteira fica
   azul de seleção no meio do gesto. Ver `kbLigaRolagem` em gestao.js. */
/* As setas de mover fase, na tela de Fases — leva 273. Discretas, mas do
   tamanho de um alvo de clique de verdade; desabilitadas somem de vez, porque
   seta que não faz nada ensina a não clicar. */
.et-mover{display:inline-flex; flex-direction:column; gap:1px; flex:none}
.et-seta{width:22px; height:15px; line-height:1; padding:0; cursor:pointer;
  border:1px solid var(--linha); background:var(--papel); color:var(--ink-2);
  border-radius:5px; font-size:var(--t-rotulo); font-family:inherit}
.et-seta:hover:not([disabled]){background:var(--marca-fundo); color:var(--marca-texto); border-color:var(--marca-texto)}
.et-seta[disabled]{opacity:.22; cursor:default}

.kb-board, .tf-kanban{cursor:grab}
.kb-board .kb-card, .tf-kanban .kb-card{cursor:default}
.kb-board.kb-puxando, .tf-kanban.kb-puxando{cursor:grabbing; user-select:none; scroll-behavior:auto}
/* Setas para andar entre as colunas: com o ponteiro sobre um cartão a roda do
   mouse rola a coluna, nunca o quadro — sem estes botões, coluna escondida
   fica inalcançável em computador de mesa. */
.kb-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:38px;height:38px;border-radius:50%;border:1px solid var(--kb-line);background:#fff;
  color:var(--kb-navy);cursor:pointer;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 14px rgba(16,24,40,.16);transition:opacity .15s,background .15s}
.kb-nav:hover{background:var(--kb-navy);color:#fff;border-color:var(--kb-navy)}
.kb-nav.esq{left:-6px} .kb-nav.dir{right:-6px}
.kb-nav[disabled]{opacity:0;pointer-events:none}
.kb-wrap::after{content:'';position:absolute;top:0;right:0;bottom:16px;width:34px;pointer-events:none;
  background:linear-gradient(90deg,rgba(247,248,252,0),rgba(247,248,252,.96));border-radius:0 12px 12px 0}
.kb-board::-webkit-scrollbar, .tf-kanban::-webkit-scrollbar{height:9px}
.kb-board::-webkit-scrollbar-thumb, .tf-kanban::-webkit-scrollbar-thumb{background:#cfd4e0;border-radius:99px}
.kb-board::-webkit-scrollbar-track, .tf-kanban::-webkit-scrollbar-track{background:transparent}
.kb-board > .kb-col, .tf-kanban > .kb-col{flex:0 0 296px;width:296px;scroll-snap-align:start}
/* a coluna rola sozinha quando tem cartão demais, sem esticar a página */
.kb-col .kb-drop{max-height:62vh;overflow-y:auto;padding:3px 3px 4px;scrollbar-width:thin}
/* modo lista: linhas empilhadas mesmo */
.tf-rows{display:block}
/* ===== Quadro: branco, preto e azul-marinho ===== */
:root{ --kb-navy:#14213D; --kb-navy-2:#22345c; --kb-ink:#101828; --kb-mid:#5a6478;
       --kb-line:#dfe1e6; --kb-col:#f1f2f5; }
.kb-col{background:var(--kb-col);border:1px solid var(--kb-line);border-radius:12px;padding:8px 8px 10px;min-width:0;transition:background .12s,box-shadow .12s}
.kb-col.drag-over{background:rgba(6,182,212,.10);box-shadow:inset 0 0 0 1.5px var(--accent)}
.kb-col-head{display:flex;justify-content:space-between;align-items:center;gap:6px;padding:3px 6px 1px}
.kb-col-head b{font-size:0.9062rem;color:var(--ink-1);font-weight:600;line-height:1.25}
.kb-count{font-size:0.9062rem;font-weight:700;color:#fff;background:var(--kb-navy);border:none;border-radius:999px;padding:2px 9px;min-width:24px;text-align:center;flex:none}
.kb-col-sub{padding:1px 6px 9px;font-size:0.8438rem}
.kb-col-sub .parados{color:var(--crit);font-weight:600}
/* Leva 277: era um verde-menta escrito à mão (#0a9d68). "Em dia" é a
   ausência de problema — não precisa de cor, precisa de sair da frente. */
.kb-col-sub .fluindo{color:var(--ink-3);font-weight:500}
.kb-drop{min-height:62px;display:flex;flex-direction:column;gap:9px;max-height:62vh;overflow-y:auto;padding:3px 3px 4px}
/* A coluna "Outras" (leva 253) tem o mesmo desenho da coluna e NÃO aceita
   arrasto: ela é um aviso de que aquela fase ainda não foi encaixada numa
   coluna, não um destino para onde se mande pasta. Quem larga um cartão ali
   não estaria escolhendo fase nenhuma. O ouvinte só se prende a `.kb-drop`,
   então não ter a classe já basta — isto aqui é só a aparência. */
/* O tempo na etapa, no cartão (leva 254). Discreto quando está no prazo;
   marcado quando passou — e ausente quando ninguém sabe desde quando. */
.kc-etapa{font-size:0.8438rem;color:var(--ink-3);margin-top:3px}
.kc-etapa .de{opacity:.7}
.kc-etapa.atrasado{color:var(--crit);font-weight:600}
/* ============================================================
   O SELO DA SITUAÇÃO — leva 255.

   Mesmo desenho no cartão do quadro e na ficha, de propósito: ver a pasta
   dizendo uma coisa no quadro e outra na ficha é como se perde a confiança na
   marcação. A cor sai de lib/situacoes.js pelo sitCor(), então NÃO há cor por
   situação escrita aqui — só a forma.

   0.7812rem é o piso de letra da leva 235; abaixo disso o teste reprova, e com
   razão: selo que ninguém lê é enfeite.
   ============================================================ */
.sit-selo{display:inline-block;font-size:0.8438rem;font-weight:600;line-height:1.35;
  padding:2px 8px;border-radius:99px;margin-top:6px;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sit-selo.mini{padding:1.5px 7px}

/* As opções da janela de situação: botão inteiro clicável, não um ponto de 12
   pixels ao lado do texto — a maior parte da equipe usa isto no celular. */
.sit-op{display:flex;align-items:flex-start;gap:9px;width:100%;text-align:left;
  background:#fff;border:1px solid var(--linha);border-radius:10px;padding:8px 12px;
  cursor:pointer;font:inherit;color:var(--ink-1);transition:border-color .12s,background .12s}
.sit-op:hover{background:var(--linha-fraca)}
.sit-op.on{border-width:2px;padding:7px 11px;background:var(--linha-fraca)}
.sit-op-bolha{width:9px;height:9px;border-radius:50%;background:var(--ink-3);
  flex:none;margin-top:6px;opacity:.55}
.sit-op.on .sit-op-bolha{opacity:1}
.kb-nodrop{min-height:62px;display:flex;flex-direction:column;gap:9px;max-height:62vh;
  overflow-y:auto;padding:3px 3px 4px;scrollbar-width:thin}
.kb-card{background:#fff;border:1px solid var(--border);border-left:3px solid transparent;border-radius:11px;padding:10px 12px 9px;
  cursor:grab;position:relative;box-shadow:0 1px 2px rgba(16,18,40,.05);transition:transform .1s,box-shadow .12s,border-color .12s}
.kb-card:hover{box-shadow:0 7px 18px rgba(16,18,40,.13);transform:translateY(-1px);border-color:#d6dbe8}
.kb-card:active{cursor:grabbing}
.kb-card.parado{border-left-color:var(--crit)}
.kb-card.recente{border-left-color:var(--accent)}
.kb-card .kc-nome{font-weight:600;font-size:0.9062rem;line-height:1.3;color:var(--ink-1)}
.kb-card .kc-ben{display:inline-block;font-size:0.8438rem;color:var(--ink-2);background:var(--page);border:1px solid var(--border);border-radius:6px;padding:1.5px 7px;margin-top:6px;line-height:1.3}
.kb-card .kc-mov{font-size:0.8438rem;margin-top:7px;color:var(--ink-3);display:flex;align-items:center;gap:5px}
.kb-card .kc-mov .dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}
.kb-card.parado .kc-mov{color:var(--crit);font-weight:600}
/* ============================================================
   ETIQUETAS NO CARTÃO — E POR QUE O BOTÃO DEIXOU DE SE ESCONDER.

   A primeira versão só mostrava o "+ etiqueta" quando o cursor passava por
   cima do cartão. O raciocínio era poupar a tela: sessenta cartões, sessenta
   convites competindo com o nome do cliente.

   Estava errado, e a Dra. Kamille achou em um dia: "ficou muito discreto".
   Botão que só aparece no hover é botão que não existe — ninguém passa o
   mouse por cima de um cartão para descobrir o que ele esconde. E em tela de
   toque não há hover nenhum.

   Agora ele fica. O equilíbrio vem do tamanho e do tom, não do sumiço: é
   pequeno e discreto em peso, mas está lá desde o primeiro olhar.
   ============================================================ */
.kb-card .kc-etq:empty{display:none}
.kb-hoje{position:absolute;top:8px;right:9px;background:var(--accent);color:#fff;font-size:0.8438rem;font-weight:700;letter-spacing:.4px;border-radius:5px;padding:1.5px 6px}

/* ---- Kanban de tarefas (modern) ---- */
.tk-card{background:#fff;border:1px solid var(--kb-line);border-left:3px solid var(--kb-line);border-radius:9px;padding:9px 11px;
  box-shadow:0 1px 2px rgba(16,18,40,.05);transition:transform .1s,box-shadow .12s,border-color .12s}
.tk-card:hover{box-shadow:0 7px 18px rgba(16,18,40,.13);transform:translateY(-1px)}
.tk-card.pr-urgente{border-left-color:#d03b3b}
.tk-card.pr-alta{border-left-color:#eb6834}
.tk-card.pr-normal{border-left-color:var(--kb-navy)}
.tk-card.pr-baixa{border-left-color:#c3cad8}
.tk-card.bloq{background:var(--atencao-fundo);border-color:var(--linha)}
.tk-card.feita{opacity:.55}
/* Título: até 4 linhas. Antes cortava em 2 e tarefa de nome comprido virava
   reticências — o pessoal precisava abrir a tarefa para saber o que era. */
.tk-card .tk-title{font-weight:700;font-size:0.9062rem;line-height:1.32;color:var(--kb-ink);
  display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;
  text-transform:none}
/* O cliente é contexto, não manchete: fica abaixo do título, em peso menor.
   Antes gritava mais alto que a própria tarefa. */
.tk-card .tk-cli{font-size:0.9062rem;color:var(--kb-mid);font-weight:500;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;text-transform:none}
.tk-card .tk-cli:hover{color:var(--kb-navy);text-decoration:underline}
/* Ações some até passar o mouse — no cartão ela competia com o título. */
.tk-card .tk-menu{opacity:0;transition:opacity .12s;padding:3px 8px;font-size:0.8438rem}
.tk-card:hover .tk-menu, .tk-card:focus-within .tk-menu{opacity:1}
.tk-card .tk-rodape{display:flex;align-items:center;gap:5px;margin-top:6px;min-height:22px}
/* Ações da tarefa: era um "⋯" cinza do lado do círculo de concluir, e os dois
   se confundiam. Agora tem palavra, contorno e cor própria — azul, para não
   competir com o verde de concluir. */
.tk-menu{flex:none;display:inline-flex;align-items:center;gap:5px;cursor:pointer;
  background:#fff;border:1px solid var(--kb-navy);color:var(--kb-navy);
  font-size:0.9062rem;font-weight:700;line-height:1;padding:5px 10px;border-radius:6px;white-space:nowrap}
.tk-menu:hover{background:var(--kb-navy);border-color:var(--kb-navy);color:#fff}
.tk-menu:active{transform:translateY(1px)}
.tk-chip{font-size:0.8438rem;border-radius:5px;padding:2px 7px;background:#fff;border:1px solid var(--kb-line);color:var(--kb-mid);display:inline-flex;align-items:center;gap:3px;line-height:1.35;white-space:nowrap;font-weight:600}
/* Linha única de contexto, em texto simples: prazo · benefício · responsável.
   Três etiquetas coloridas por cartão viravam ruído. */
.tk-meta{font-size:0.8438rem;color:var(--kb-mid);margin-top:6px;line-height:1.4;
  display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tk-meta .sep{color:#c8ccd6}
.tk-meta .atraso{color:var(--crit);font-weight:700}
.tk-chip.prio{border:none;color:#fff;font-weight:700;letter-spacing:.02em;border-radius:5px}
.tk-chip.warn{background:var(--atencao-fundo);border-color:var(--linha);color:var(--warn)}

/* Cabeçalho da coluna: fica preso no topo ao rolar, com o nome sempre legível */
.kb-col-head{position:sticky;top:0;z-index:2;background:var(--kb-col);border-radius:9px}
.kb-col-head b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:0.9062rem;color:var(--kb-ink);font-weight:700;letter-spacing:-.1px}
.tk-note{margin-top:6px;font-size:0.8438rem;border-radius:7px;padding:4px 8px;line-height:1.3}
.tk-note.dep{color:var(--warn);background:var(--atencao-fundo)}
.tk-note.libera{color:var(--kb-navy);background:#eef0f5;border:1px solid var(--kb-line)}

/* ===== Abas internas das telas-container (menu consolidado) ===== */
.subtabs{display:flex;gap:4px;flex-wrap:wrap;margin:0 0 18px;border-bottom:1px solid var(--grid);padding-bottom:0}
.subtab{background:none;border:none;border-bottom:2px solid transparent;padding:9px 14px;font-size:0.9375rem;font-weight:600;color:var(--ink-3);cursor:pointer;font-family:inherit;border-radius:8px 8px 0 0;margin-bottom:-1px;transition:color .12s,border-color .12s}
.subtab:hover{color:var(--ink-1)}
.subtab.active{color:var(--accent);border-bottom-color:var(--accent)}


/* ============================================================
   ESCALA E COMPONENTES DA FICHA — o estilo do mockup, em regra.

   O sistema tinha VINTE tamanhos de letra, sete deles espremidos entre 9,5 e
   14px. Degrau de meio pixel não constrói hierarquia: o olho lê como ruído, e
   foi disso que a equipe reclamou. Agora são seis degraus e só.

   Junto vêm as duas regras visuais do mockup: rótulo micro em caixa alta com
   espacejamento, e filete separando — em vez de caixa dentro de caixa.
   ============================================================ */
:root{
  --t-micro:0.8438rem;    /* rótulo em caixa alta */
  --t-apoio:0.9062rem;  /* dica, legenda, meta */
  --t-corpo:0.9375rem;  /* o dado */
  --t-secao:1.0625rem;    /* título de seção */
  --t-tela:1.3125rem;     /* título de tela */
  --t-titulo:1.5625rem;   /* nome na ficha */
}
.rotulo-micro{font-size:var(--t-micro);font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:2px}
.dado-num{font-size:var(--t-corpo);font-weight:700;font-variant-numeric:tabular-nums;
  letter-spacing:.01em;word-break:break-all}

/* o fio do gradiente da marca aparece UMA vez, no topo da ficha — assinatura,
   não papel de parede */
.modal{position:relative}
.modal > .fio-marca{position:absolute;top:0;left:0;right:0;height:3px;
  background:var(--gradiente);border-radius:12px 12px 0 0}

/* Esconder aba: classe, nunca `style.display`. O bloco pode ter display
   próprio (flex, grid) e sobrescrevê-lo apaga o layout dele. */
.aba-oculta{display:none !important}

/* ============================================================
   A FICHA, EM UM PADRÃO SÓ.

   A tela tinha cinco tratamentos visuais para cinco blocos: faixa com filete,
   título roxo com ícone ciano, link roxo solto, caixa creme com barra lateral,
   cartão com borda e uma barra lilás. Cada um foi acrescentado numa hora
   diferente resolvendo um problema local, e o conjunto virou colcha de
   retalhos — foi disso que a equipe reclamou, mesmo sem nomear.

   Agora existe UM padrão de seção: rótulo pequeno em caixa alta, conteúdo
   abaixo, filete separando. Sem cartão dentro de cartão, sem cor por seção.
   Cor tem significado fixo: roxo é ação, vermelho é prazo vencido.
   ============================================================ */

/* --- abas --- */
/* As abas grudam logo abaixo do cabeçalho da ficha. `--tabs-top` é escrito por
   prendeAbasDaFicha(), porque a altura do cabeçalho muda quando ele encolhe ao
   rolar. z-index abaixo do .ficha-topo (5): o cabeçalho passa por cima das
   abas, nunca o contrário. */
.ficha-tabs{display:flex;gap:22px;margin-top:16px;border-bottom:1px solid var(--grid);overflow-x:auto;
  position:sticky;top:var(--tabs-top,0px);z-index:4;background:var(--surface-1)}

/* Rolou: ficam o nome do cliente e as abas. Saem as ações e o subtítulo — são
   para quando se chega na pasta, não para acompanhar a leitura. */
.ficha-acoes{display:flex;gap:8px;flex-wrap:wrap}
.ficha-topo.rolou .ficha-acoes{display:none}
.ficha-topo.rolou{padding-bottom:6px}

/* Campos vazios escondidos por padrão — ver marcaCamposVazios() em views2.js.
   Por classe, nunca por style.display: o .fg tem display próprio. */
.clsf.so-cheios .fg[data-vazio="1"]{display:none}
/* leva 377: representante legal todo vazio some inteiro (título e botão) */
.clsf.so-cheios .fx-rep[data-todo-vazio="1"]{display:none}
/* leva 377: na aba sem campo vazio, o botão de mostrar vazios não aparece */
#btn-vazios[data-sem-vazio="1"]{display:none !important}
.ficha-tabs .ftab{background:none;border:none;border-bottom:2px solid transparent;
  padding:9px 0;cursor:pointer;font-family:inherit;font-size:0.9375rem;font-weight:500;
  color:var(--ink-3);white-space:nowrap;transition:color .12s}
.ficha-tabs .ftab:hover{color:var(--ink-2)}
.ficha-tabs .ftab.on{color:var(--ink-1);font-weight:700;border-bottom-color:var(--accent)}

/* --- seção: um padrão para todas --- */
.fx-sec{padding:16px 0;border-bottom:1px solid var(--grid)}
.fx-sec:last-child{border-bottom:none}
.fx-tit{font-size:0.8438rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:10px;display:flex;align-items:baseline;gap:9px}
.fx-tit .n{font-weight:700;color:var(--accent);letter-spacing:0;font-size:0.9062rem}
.fx-tit .acao{margin-left:auto;font-size:0.9062rem;font-weight:600;letter-spacing:0;
  text-transform:none;color:var(--accent);cursor:pointer;background:none;border:none;font-family:inherit}

/* --- ações do cabeçalho: um peso primário, o resto igual entre si --- */
.ficha-topo .btn, .ficha-topo .btn.sec{font-size:0.9375rem;font-weight:600;border-radius:9px;padding:8px 14px}
.ficha-topo .btn.sec{background:#fff;border:1px solid var(--grid);color:var(--ink-2)}
.ficha-topo .btn.sec:hover{border-color:var(--ink-3);color:var(--ink-1)}

/* ============================================================
   FILA DE TAREFAS (aba Lista) — prefixo .tl-

   Por que esta tela tem CSS próprio: ela é a única do sistema com painel
   lateral e com uma linha densa (cliente, tipo, benefício, pessoa, prazo,
   ações) que não pode se sobrepor em 1280px. Resolver isso com estilo inline
   dentro do JS, como o resto da tela fazia, deixava a largura das colunas
   escrita em seis lugares diferentes — e foi assim que a etiqueta de benefício
   passou a invadir o nome da pessoa.

   Regra de contraste: nenhum estado é indicado só por cor. Toda cor aqui vem
   acompanhada de texto ("200 dias atrasada", "vence hoje").
   ============================================================ */
body.tela-larga .content{max-width:none}

.tl{display:flex;gap:0;align-items:flex-start;min-height:0}
.tl-main{flex:1;min-width:0}
.tl-wrap{max-width:1520px}
/* ============================================================
   A TAREFA ABRE GRANDE, NO MEIO DA TELA — leva 295 (20/set/2026)

   [stated] Dra. Kamille: "quando eu clico na tarefa, abre uma abazinha do
   lado direito. Eu quero que acabe com isso e que abra na tela, num tamanho
   grande, os detalhes da tarefa."

   Era uma faixa de 392px colada à direita: a conversa, os anexos e o
   histórico da tarefa disputavam uma coluna mais estreita que o celular.

   O CONTEÚDO E O ABRIR/FECHAR NÃO MUDARAM — é o mesmo #tl-det, a mesma
   `tlAbreDetalhe`, o mesmo ✕. Mudou só onde ele se desenha: sai do fluxo
   (position:fixed) e vira um painel grande, centralizado, com o fundo
   escurecido. No celular continua valendo a regra de tela cheia lá embaixo,
   que já existia e sempre foi o comportamento certo.
   ============================================================ */
.tl-det{position:fixed; top:22px; bottom:22px; left:50%; transform:translateX(-50%);
  width:min(1100px, calc(100vw - 44px)); margin:0; z-index:1500;
  background:var(--papel); border:1px solid var(--grid); border-radius:14px;
  padding:22px 26px; max-height:none; overflow:auto;
  box-shadow:0 18px 50px rgba(19,26,36,.22)}
.tl-det.vazio{display:none}
/* O fundo escurecido diz que a tarefa está aberta por cima do resto. É só
   visual: quem fecha é o ✕ ou o Esc. */
body.tl-com-painel::before{content:''; position:fixed; inset:0; z-index:1400;
  background:rgba(19,26,36,.38)}

/* --- faixa de foco --- */
.tl-foco{display:flex;align-items:center;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.tl-foco-tit{font-size:1.0312rem;font-weight:700;color:var(--ink-1)}
.tl-foco-sub{font-size:0.9062rem;color:var(--ink-3);margin-top:2px}
.tl-seg{display:flex;background:var(--papel);border:1px solid var(--grid);border-radius:10px;padding:3px;margin-left:auto}
.tl-seg button{border:0;background:transparent;padding:6px 13px;border-radius:7px;font-size:0.9062rem;
  color:var(--ink-3);font-weight:600;cursor:pointer;font-family:inherit}
.tl-seg button.on{background:var(--brand);color:#fff}

/* --- as filas: o total + quatro recortes de prazo ---
   Cinco colunas em tela larga; abaixo de 1100px vira 3+2 e depois 2, porque a
   cinco em telas de notebook o número de 26px não cabe sem quebrar o rótulo. */
/* Faixa de filas: uma linha de contadores, não cinco cartões. Ver o
   comentário em tarefas-lista.js — os cartões tinham ~93px cada. */
.tl-filas{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin-bottom:14px}
.tl-q{background:var(--papel);border:1px solid var(--grid);border-radius:999px;
  padding:5px 13px 5px 10px;display:inline-flex;align-items:center;gap:7px;
  cursor:pointer;font-family:inherit;font-size:0.9062rem;color:var(--ink-2);
  line-height:1.4;transition:.14s;white-space:nowrap}
.tl-q:hover{border-color:var(--axis)}
.tl-q.on{border-width:2px;padding:4px 12px 4px 9px}
.tl-q i.ponto{width:8px;height:8px;border-radius:50%;flex:none}
.tl-q .n{font-size:0.9688rem;font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.tl-q .r{font-weight:500}
.tl-fatal{margin-left:5px;font-size:0.8438rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;
  color:#fff;background:var(--crit);border-radius:5px;padding:1px 6px}
/* Leva 277: a ficha de "atrasadas", quando escolhida, vira o vermelho cheio —
   é a única pastilha sólida da barra. Por isso a letra dela toda passa a
   branca: antes o fundo era rosa claro e o número herdava a tinta vermelha;
   com o fundo vermelho, herdar vermelho apagaria o número. */
.tl-q.atras .n{color:var(--crit)} .tl-q.atras i.ponto{background:var(--crit)}
.tl-q.atras.on{border-color:var(--crit);background:var(--crit);color:#fff}
.tl-q.atras.on .n{color:#fff} .tl-q.atras.on i.ponto{background:#fff}
.tl-q.hoje  .n{color:var(--warn)} .tl-q.hoje  i.ponto{background:var(--warn)} .tl-q.hoje.on{border-color:var(--warn);background:var(--atencao-fundo)}
.tl-q.prox  .n{color:var(--marca-texto)} .tl-q.prox  i.ponto{background:var(--marca-texto)} .tl-q.prox.on{border-color:var(--marca-texto);background:var(--marca-fundo)}
.tl-q.trav  .n{color:var(--ink-2)} .tl-q.trav  i.ponto{background:var(--ink-3)} .tl-q.trav.on{border-color:var(--ink-3);background:var(--papel-2)}
/* O total é o acervo, não uma urgência: cor da marca, sem alarme. */
.tl-q.todas .n{color:var(--brand)} .tl-q.todas i.ponto{background:var(--accent)}
.tl-q.todas.on{border-color:var(--accent);background:rgba(20,33,61,.07)}
.tl-q.todas{background:var(--papel-2)}

/* ============================================================
   OPÇÃO B — filas numa coluna à esquerda, lista à direita.
   Mantém os mesmos ids (#tl-filas, #tl-saude, #tl-lista); só muda o lugar
   e a forma. No celular a coluna vira de novo uma fileira de chips.
   ============================================================ */
.tl-duas{display:grid;grid-template-columns:238px 1fr;gap:16px;align-items:start}
.tl-col{min-width:0}
.tl-rail{position:sticky;top:12px;background:var(--papel);border:1px solid var(--grid);border-radius:12px;overflow:hidden}
.tl-rail .tl-filas{display:block;margin:0}
.tl-fila{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:transparent;border:0;
  border-top:1px solid var(--linha-fraca);padding:11px 15px;font:inherit;font-size:0.9375rem;cursor:pointer;color:var(--ink-1)}
.tl-fila:first-child{border-top:0}
.tl-fila i.ponto{width:8px;height:8px;border-radius:50%;background:var(--ink-3);flex:none}
.tl-fila .nm{flex:1;font-weight:600}
.tl-fila .n{font-weight:800;font-variant-numeric:tabular-nums;color:var(--ink-2)}
.tl-fila:hover{background:var(--tela)}
.tl-fila.on{background:var(--marca-fundo)}
.tl-fila.on .nm{color:var(--brand-escuro)}
.tl-fila.atras i.ponto{background:var(--crit)}
.tl-fila.atras.on .nm,.tl-fila.atras .n{color:var(--crit)}
.tl-fila.hoje i.ponto{background:var(--warn)}
.tl-fila.prox i.ponto{background:var(--marca-texto)}
.tl-fila.todas{border-top:2px solid var(--grid)}
.tl-fila.todas i.ponto{background:var(--accent)}
.tl-rail #tl-saude{padding:12px 15px;border-top:1px solid var(--linha-fraca)}
.tl-rail #tl-saude:empty{display:none}
.tl-rail #tl-saude .tk-saude{white-space:normal;flex-wrap:wrap}
@media (max-width:820px){
  .tl-duas{grid-template-columns:1fr}
  .tl-rail{position:static}
  .tl-rail .tl-filas{display:flex;flex-wrap:wrap;gap:7px;padding:8px}
  .tl-fila{width:auto;border-top:0;border:1px solid var(--grid);border-radius:999px;padding:6px 12px}
  .tl-fila .n{order:-1}
  .tl-fila.todas{border-top:0;border:1px solid var(--grid)}
  .tl-rail #tl-saude{border-top:1px solid var(--linha-fraca)}
}

/* --- faixa de faxina --- */
.tl-faxina{display:flex;align-items:center;gap:12px;background:var(--atencao-fundo);border:1px solid var(--linha);
  border-radius:12px;padding:11px 14px;margin-bottom:14px;font-size:0.9375rem;color:var(--warn)}
.tl-faxina b{color:var(--warn)}
.tl-faxina .btn{margin-left:auto;background:var(--papel);border:1px solid var(--linha);color:var(--warn)}
.tl-faxina .x{border:0;background:transparent;color:var(--warn);font-size:1.125rem;line-height:1;padding:2px 5px;cursor:pointer}

/* --- barra de controle --- */
.tl-ctrl{display:flex;align-items:center;gap:8px;margin-bottom:10px;flex-wrap:wrap}
.tl-ctrl select,.tl-ctrl .tl-btn{border:1px solid var(--grid);background:var(--papel);border-radius:9px;
  padding:7px 11px;font-size:0.9062rem;color:var(--ink-2);font-family:inherit;cursor:pointer}
.tl-ctrl .tl-btn.on{border-color:var(--accent);color:var(--accent);background:var(--marca-fundo)}
.tl-conta{margin-left:auto;font-size:0.9062rem;color:var(--ink-3)}

/* --- grupos --- */
.tl-grupo{margin-bottom:8px;background:var(--papel);border:1px solid var(--grid);border-radius:12px;overflow:hidden}
.tl-ghead{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--papel-2);
  border:0;border-bottom:1px solid var(--grid);width:100%;text-align:left;cursor:pointer;font-family:inherit}
.tl-ghead:hover{background:var(--linha-fraca)}
.tl-ghead .seta{font-size:0.8438rem;color:var(--ink-3);width:12px;transition:.15s;display:inline-block}
.tl-ghead.fechado .seta{transform:rotate(-90deg)}
.tl-ghead .nome{font-weight:700;font-size:0.9375rem;color:var(--ink-1)}
.tl-ghead .cont{font-size:0.8438rem;font-weight:700;color:var(--ink-3);background:var(--linha-fraca);border-radius:99px;padding:2px 8px}
.tl-ghead .seq{margin-left:auto;font-size:0.8438rem;color:var(--accent);font-weight:600;
  border:1px solid var(--linha);background:var(--tela);border-radius:8px;padding:4px 10px;opacity:0;transition:.15s}
.tl-grupo:hover .seq,.tl-ghead:focus-visible .seq{opacity:1}

/* --- linhas --- */
.tl-lin{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--linha-fraca);
  cursor:pointer;position:relative}
.tl-lin:last-child{border-bottom:0}
.tl-lin:hover{background:var(--papel-2)}
.tl-lin.aberta{background:var(--marca-fundo)}
.tl-lin.marcada{background:var(--marca-fundo)}
.tl-lin .chk{width:16px;height:16px;flex:0 0 auto;accent-color:var(--accent);cursor:pointer}
.tl-lin .st{width:8px;height:26px;border-radius:99px;flex:0 0 auto}
.tl-cli{flex:1;min-width:0}
.tl-cli .nome{font-weight:650;font-size:0.9375rem;color:var(--ink-1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-cli .sub{font-size:0.8438rem;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.tl-cli .sub .tipo{color:var(--ink-2);font-weight:550}
/* Quem pediu a tarefa. "Pedida por" (alguém delegou) fica um tom mais forte
   que "anotada por" (a pessoa criou para si) — a primeira é a que exige
   resposta a alguém. */
.tl-cli .sub .tl-pediu{color:var(--ink-3)}
.tl-cli .sub .tl-pediu.forte{color:var(--ink-2)}
.tl-cli .sub .tl-pediu b{font-weight:600}
.tl-ben{flex:0 0 auto;width:168px;overflow:hidden;padding-right:10px}
.tl-tag{display:inline-block;max-width:100%;font-size:0.8438rem;font-weight:600;border-radius:6px;padding:2px 7px;
  background:var(--papel-2);color:var(--ink-2);border:1px solid var(--linha);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  vertical-align:middle}
.tl-resp{flex:0 0 auto;width:124px;display:flex;align-items:center;gap:7px;font-size:0.9062rem;color:var(--ink-2);
  overflow:hidden;white-space:nowrap}
.tl-prazo{flex:0 0 auto;width:150px;text-align:right}
.tl-selo{display:inline-flex;align-items:center;gap:5px;font-size:0.8438rem;font-weight:700;border-radius:7px;padding:3px 8px}
/* Leva 277: "atrasada" e "FATAL" aparecem na MESMA linha, e com a paleta nova
   os dois virariam o mesmo bloco vermelho cheio — dois alarmes idênticos lado
   a lado não dizem qual é o pior. O cheio fica com o FATAL, que é a exceção;
   o atraso vira letra vermelha em contorno fino. Vermelho sobre papel dá
   4,99:1, e os dois continuam sendo vermelhos, que é o que a Dra. Kamille
   precisa enxergar de longe. */
.tl-selo.atras{background:var(--papel);color:var(--crit);box-shadow:inset 0 0 0 1px var(--crit)}
.tl-selo.hoje {background:var(--atencao-fundo);color:var(--atencao-texto)}
.tl-selo.prox {background:var(--marca-fundo);color:var(--marca-texto)}
.tl-selo.trav {background:var(--linha-fraca);color:var(--ink-2)}
.tl-selo.feito{background:var(--bom-fundo);color:var(--bom-texto)}
.tl-selo.fatal{background:var(--crit);color:#fff}
/* URGENTE é laranja cheio, PRAZO FATAL é vinho: as duas podem aparecer na
   mesma linha e precisam ser distinguíveis de relance. Fatal é a mais grave
   (perde o direito), por isso fica com a cor mais escura. */
.tl-selo.urgente{background:var(--serious);color:#fff;letter-spacing:.3px}
/* O grupo das urgentes é o único com filete: é o sinal de que ele não entrou
   ali por tamanho, e sim por regra. */
.tl-grupo.tl-urgente{border-left:3px solid var(--serious);padding-left:9px;border-radius:0 10px 10px 0}
.tl-grupo.tl-urgente > .tl-ghead .nome{color:var(--serious)}
.tl-data{font-size:0.8438rem;color:var(--ink-3);margin-top:2px}
.tl-acoes{flex:0 0 auto;display:flex;gap:4px;opacity:0;transition:.12s}
.tl-lin:hover .tl-acoes,.tl-lin:focus-within .tl-acoes{opacity:1}
.tl-acao{border:1px solid var(--grid);background:var(--papel);border-radius:7px;width:29px;height:29px;
  display:grid;place-items:center;font-size:0.9375rem;color:var(--ink-2);cursor:pointer;font-family:inherit}
.tl-acao:hover{border-color:var(--axis);background:var(--papel-2)}
.tl-acao.ok:hover{border-color:var(--bom-texto);background:var(--bom-fundo);color:var(--bom-texto)}
.tl-acao[disabled]{opacity:.35;cursor:not-allowed}

/* --- painel de detalhe --- */
.tl-det .tipo{font-size:0.8438rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.tl-det .cli{font-size:1.25rem;font-weight:700;line-height:1.25;margin:2px 0 10px;color:var(--ink-1)}
.tl-det .fechar{border:0;background:transparent;font-size:1.3125rem;color:var(--ink-3);line-height:1;cursor:pointer;margin-left:auto}
.tl-det .caixa{border:1px solid var(--grid);border-radius:10px;padding:12px 13px;margin-bottom:12px;background:var(--papel-2)}
.tl-det .rot{font-size:0.8438rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);font-weight:700;margin-bottom:5px}
.tl-det .txt{font-size:0.9375rem;color:var(--ink-2);line-height:1.55;white-space:pre-wrap}
.tl-det .linha{display:flex;justify-content:space-between;gap:10px;font-size:0.9062rem;padding:5px 0;border-bottom:1px dashed var(--linha-fraca)}
.tl-det .linha:last-child{border-bottom:0}
.tl-det .linha span:first-child{color:var(--ink-3)}
.tl-det .linha span:last-child{font-weight:600;color:var(--ink-2);text-align:right}
.tl-det .botoes{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:14px}
.tl-det .botoes .btn{justify-content:center;width:100%}
.tl-det .botoes .full{grid-column:1/-1}

/* --- barra de lote --- */
#tl-lote{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--brand);
  color:#fff;border-radius:14px;padding:11px 14px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  box-shadow:0 18px 40px -12px rgba(13,19,43,.55);z-index:2000}
#tl-lote b{font-size:0.9375rem;padding-right:6px}
#tl-lote button,#tl-lote select{border:1px solid rgba(255,255,255,.18);background:var(--brand-2);color:#fff;border-radius:9px;
  padding:7px 12px;font-size:0.9062rem;font-weight:600;cursor:pointer;font-family:inherit}
#tl-lote button:hover{background:var(--brand-escuro)}
#tl-lote button.perigo{background:var(--crit);border-color:var(--crit)}
#tl-lote .limpar{background:transparent;border:0;color:rgba(255,255,255,.72)}

/* --- carga da equipe --- */
.tl-carga{background:var(--papel);border:1px solid var(--grid);border-radius:12px;padding:14px 16px;margin-top:14px}
.tl-carga .l{display:flex;align-items:center;gap:10px;margin-bottom:7px;font-size:0.9062rem}
.tl-carga .l .nm{width:120px;flex:0 0 auto;color:var(--ink-2);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-carga .l .b{flex:1;height:9px;background:var(--linha-fraca);border-radius:99px;overflow:hidden;display:flex}
.tl-carga .l .b i{display:block;height:100%}
.tl-carga .l .v{width:150px;text-align:right;color:var(--ink-3);flex:0 0 auto}

/* --- painel de filtros --- */
.tl-filtros{background:var(--papel);border:1px solid var(--grid);border-radius:12px;padding:14px 16px;margin-bottom:12px}
.tl-filtros .grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px}
.tl-filtros label{display:block;font-size:0.8438rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin-bottom:4px}
.tl-filtros select,.tl-filtros input{width:100%;padding:8px 10px;border:1px solid var(--grid);
  border-radius:9px;font-size:0.9062rem;font-family:inherit;background:var(--papel)}

/* Em 1280px o painel encolhe e a coluna de responsável sai — nesta largura ela
   é a informação menos consultada, e mantê-la era o que fazia a etiqueta de
   benefício encostar no prazo. */
@media (max-width:1400px){ .tl-det{flex-basis:340px;width:340px} .tl-ben{width:140px} }
@media (max-width:1280px){ .tl-resp{display:none} .tl-ben{width:130px} }
@media (max-width:1100px){ .tl-filas{grid-template-columns:repeat(2,1fr)} .tl-ben{display:none} }

/* ============================================================
   O PAINEL LATERAL COBRA A LARGURA DE ALGUÉM.

   Medido a 1280px com o painel aberto: o nome do cliente — o elemento mais
   importante da linha — ficava com 74px. Não invadia nada (as reticências
   seguravam), mas "MARIA DA CONCEI…" cortado em 74px não serve para ler.

   A escolha é qual coluna cede. Responsável e benefício são consulta; o nome
   é identificação. Então, com o painel aberto e tela apertada, essas duas
   somem — a informação continua no painel, que é justamente o que está aberto
   na frente da pessoa. O nome volta a caber em ~238px.
   ============================================================ */
@media (max-width:1440px){ body.tl-com-painel .tl-resp{display:none} }
@media (max-width:1340px){ body.tl-com-painel .tl-ben{display:none} }

/* ============================================================
   A JANELA DE CRIAR TAREFA — leva 269 (18/set/2026).

   [stated] Dra. Kamille, entre dois caminhos desenhados: "Gosto da opção B".
   Duas colunas — à esquerda o que se escreve, à direita, mais clara, o que se
   escolhe. No celular vira uma coluna só, na mesma ordem.
   ============================================================ */
.modal.nt{ max-width:1040px }
.nt-form{
  /* ============================================================
     MAIS LARGA, MENOS COMPRIDA — leva 272 (18/set/2026)

     [stated] "podem ser mais largas e menos compridas, para poder aparecer
     tudo na tela".

     A coluna da direita passa de 316 para 400px, e não é enfeite: com 316 as
     pastilhas de prazo quebravam em DUAS linhas (hoje·amanhã·sexta·7 dias /
     15 dias·30 dias) e as de prioridade também (Baixa·Normal·Alta / Urgente).
     Quatro linhas de pastilha viravam duas — cerca de 76px de altura que a
     janela ganhava sem mostrar nada a mais.

     A esquerda também cresce (de ~563 para 640), e ela é quem tinha espaço
     vazio no rodapé enquanto a direita definia a altura da janela.
     ============================================================ */
  display:grid; grid-template-columns:minmax(0,1fr) 400px;
  gap:0; margin-top:14px;
  border:1px solid var(--linha); border-radius:12px; overflow:hidden;
}
/* ============================================================
   A JANELA NUNCA PASSA DA TELA — leva 272 (18/set/2026)

   [stated] "para poder aparecer tudo na tela".

   Alargar resolveu o tamanho de hoje; não resolve o de amanhã. A altura destas
   duas janelas depende do CONTEÚDO: uma tarefa com oito anexos, um cliente de
   nome comprido, a nota de "já remarcado por fulana" — cada um empurra a
   janela para baixo, e em algum momento ela estoura de novo. Medido: editar
   ficou em 770px, e numa tela de 768 isso é 2px fora.

   Então o teto não é um número escolhido a dedo: são as COLUNAS que rolam por
   dentro, e o que emoldura elas fica sempre à vista — o título em cima, e
   embaixo o rodapé com "Salvar alterações" e "Concluir". O que não pode
   acontecer, e acontecia, é o botão de salvar estar fora da tela.

   Cada coluna rola sozinha: quem está escolhendo o prazo na direita não perde
   o lugar porque a esquerda é comprida.
   ============================================================ */
.nt-esq, .nt-dir{ max-height:calc(100vh - 240px); overflow-y:auto; overscroll-behavior:contain }

.nt-esq{ padding:18px 20px 20px 20px }
.nt-dir{ padding:18px 20px 20px 18px; background:var(--papel-2); border-left:1px solid var(--linha-fraca) }

/* Celular: a grade vira uma coluna só (regra mais abaixo) e duas áreas que
   rolam por dentro, uma embaixo da outra, seriam duas prisões de rolagem na
   mesma tela. Ali a página inteira rola, como sempre. */
@media (max-width:840px){ .nt-esq, .nt-dir{ max-height:none; overflow:visible } }
.nt-rodape{
  grid-column:1/-1; display:flex; align-items:center; gap:10px;
  padding:14px 20px; border-top:1px solid var(--linha-fraca); background:var(--papel-2);
}
/* Leva 290: Concluir foi para o TOPO, à direita, e agora é VERDE de verdade.
   Antes usava --good, que na paleta preto-e-vermelho virou quase preto — por
   isso o botão "verde" não era verde. Usa o token --verde (leva 288). */
.nt-concluir{background:var(--verde); border-color:var(--verde); color:var(--papel);
  padding:9px 16px; white-space:nowrap}
.nt-concluir:hover{filter:brightness(.93)}
.nt-rodape .btn{white-space:nowrap}

/* Cabeçalho da janela em duas pontas: o que a janela é, à esquerda; a ação de
   concluir, à direita. O ✕ de fechar flutua à direita, e o cabeçalho, sendo
   flex, se estreita sozinho para não passar por baixo dele. */
.nt-cab{display:flex; align-items:flex-start; justify-content:space-between; gap:16px; padding-right:8px}
.nt-cab-acao{flex:none; padding-top:2px}

/* Excluir voltou à vista, no rodapé à esquerda — longe do Salvar, que é a
   ação de sempre. Continua em letra, não em botão cheio: apagar não deve
   competir em peso com guardar. */
.nt-excluir{color:var(--crit); font-weight:600; background:none; border:0; cursor:pointer; font:inherit; font-weight:600}
.nt-campo{
  width:100%; box-sizing:border-box; margin-top:6px;
  padding:9px 12px; font-size:var(--t-corpo); font-family:inherit;
  border:1px solid var(--linha); border-radius:9px; background:var(--papel); color:var(--ink-1);
}
textarea.nt-campo{ line-height:1.55; resize:vertical; min-height:92px }
.nt-grande{
  width:100%; box-sizing:border-box; margin-top:6px;
  padding:11px 13px; font-size:1.0625rem; font-family:inherit;
  border:1px solid var(--marca-texto); border-radius:10px; background:var(--papel); color:var(--ink-1);
}
.nt-fixo{
  margin-top:6px; padding:9px 12px; font-size:var(--t-corpo);
  border:1px solid var(--linha); border-radius:9px; background:var(--papel-2);
}
.nt-x{
  position:absolute; right:8px; top:12px; background:none; border:none; cursor:pointer;
  color:var(--ink-3); font-size:var(--t-corpo);
}
.nt-atalhos{ display:flex; flex-wrap:wrap; gap:7px; margin-top:7px }
.nt-pill{
  border:1px solid var(--linha); background:var(--papel); color:var(--ink-1);
  border-radius:999px; padding:6px 12px; font-size:var(--t-apoio); font-family:inherit; cursor:pointer;
}
.nt-pill:hover{ border-color:var(--axis) }
.nt-pill.on{ background:var(--marca-texto); border-color:var(--marca-texto); color:#fff; font-weight:600 }

.nt-chips{ display:flex; flex-wrap:wrap; gap:7px; margin-top:8px }
.nt-chip{
  display:inline-flex; align-items:center; gap:7px;
  border:1px solid var(--linha); background:var(--papel);
  border-radius:999px; padding:4px 6px 4px 4px; font-size:var(--t-apoio);
}
.nt-chip .ini{
  width:23px; height:23px; border-radius:50%; background:var(--marca-texto); color:#fff;
  font-size:var(--t-rotulo); font-weight:700; display:flex; align-items:center; justify-content:center;
}
.nt-chip button{
  border:none; background:none; cursor:pointer; color:var(--ink-3);
  font-size:var(--t-apoio); line-height:1; padding:0 4px;
}

/* O prazo fatal muda de cara ao ser marcado: ele é a exceção, e precisa
   parecer uma. O campo de data só existe depois do sim. */
.nt-fatal{ margin-top:18px; border:1px solid var(--linha); border-radius:10px; overflow:hidden }
.nt-fatal.on{ border-color:var(--crit) }
.nt-fatal-cab{
  display:flex; gap:9px; align-items:flex-start; padding:10px 12px;
  background:var(--papel); cursor:pointer; font-size:var(--t-apoio);
}
/* Leva 277: marcado o prazo fatal, a faixa inteira vira vermelha com letra
   branca — inclusive a linha de apoio, que antes era cinza e sumiria. É o
   único lugar do formulário que fica cheio de cor, e é de propósito: o
   fatal é a exceção e precisa parecer uma. */
.nt-fatal.on .nt-fatal-cab{ background:var(--crit); color:#fff }
.nt-fatal.on .nt-fatal-cab b,
.nt-fatal.on .nt-fatal-cab .hint{ color:#fff }
.nt-fatal-cab input{ width:16px; height:16px; flex:none; margin-top:2px }
.nt-fatal #nt-fatal-corpo{ padding:10px 12px; background:var(--papel) }
.nt-folga{
  margin-top:8px; padding:8px 10px; border-radius:8px;
  background:var(--marca-fundo); color:var(--marca-texto); font-size:var(--t-apoio);
}
.nt-folga.ruim{ background:var(--critico-fundo); color:var(--critico-texto) }

.nt-mais{ margin-top:16px; border:1px solid var(--linha); border-radius:10px; background:var(--papel-2) }
.nt-mais > summary{
  cursor:pointer; padding:11px 13px; font-size:var(--t-corpo); font-weight:600;
  display:flex; align-items:center; gap:9px;
}
.nt-mais > summary .hint{ font-weight:400 }
.nt-mais[open]{ padding:0 13px 14px 13px }
.nt-mais[open] > summary{ padding-left:0; padding-right:0 }

@media (max-width:820px){
  .nt-form{ grid-template-columns:minmax(0,1fr) }
  .nt-dir{ border-left:none; border-top:1px solid var(--linha-fraca) }
}

/* ============================================================
   A LISTA DE TAREFAS DA FICHA — leva 268 (17/set/2026).

   [stated] Dra. Kamille: "as tarefas devem vir em lista", "as em aberto deve
   vir com algo marcando em vermelho" e, escolhendo entre marcar só as
   vencidas ou todas: "vermelha para todas em aberto".

   A barra é a mesma para atrasada e para no prazo: ela diz "isto ainda está
   aberto", não "isto está atrasado". Quem responde pelo atraso é o selo de
   prazo dentro da linha, que traz a PALAVRA — cor sozinha nunca informa.
   ============================================================ */
.tk-aberta{
  position:relative; padding-left:13px; margin-bottom:2px;
}
/* Leva 360: a barra vermelha (leva 268) saiu com o desenho discreto que a
   Dra. Kamille aprovou em 24/set — a urgência é dita pelo prazo em vermelho
   na própria linha. */
.tk-aberta{padding-left:0}
.tk-aberta::before{display:none}
/* ============================================================
   A LINHA DA TAREFA NA PASTA — leva 360 (24/set/2026). Dois tamanhos (15 e
   14 px), um negrito, uma grade: bolinha · título … prazo; descrição; quem
   faz · quem pediu · prioridade · ações discretas. Ver _cardTarefaNaPasta.
   ============================================================ */
.tkp{display:flex;gap:10px;align-items:flex-start;padding:10px 4px;border-bottom:1px solid var(--grid);font-size:0.875rem;line-height:1.45}
.tkp-corpo{flex:1;min-width:0;cursor:pointer;display:flex;flex-direction:column;gap:2px}
.tkp-grupo .tkp-corpo{cursor:default}
.tkp-linha1{display:flex;align-items:baseline;gap:12px}
.tkp-tit{flex:1;min-width:0;font-size:0.9375rem;font-weight:600;line-height:1.35;color:var(--ink-1)}
.tkp-prazo{flex:none;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--ink-2)}
.tkp-prazo .hint{font-weight:400}
.tkp-meta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;color:var(--ink-3)}
.tkp-meta b{font-weight:600;color:var(--ink-1)}
.tkp-acoes{margin-left:auto;display:inline-flex;gap:10px}
.tkp-acao{border:0;background:none;font-family:inherit;font-size:inherit;color:var(--brand);font-weight:500;cursor:pointer;padding:0}
.tkp-acao:hover{text-decoration:underline}
.tkp-etq{display:inline-block;font-size:0.875rem;color:var(--ink-2);background:var(--marca-fundo);border-radius:6px;padding:0 7px;margin-left:6px;font-weight:500;vertical-align:1px}
.tkp-sum{color:var(--ink-3);cursor:pointer}
.tkp .hint{font-size:0.875rem !important;margin-top:0 !important;color:var(--ink-2)}
@media (max-width:640px){ .tkp-linha1{flex-wrap:wrap} }
/* A bolinha que a maquete trazia ao lado do título SAIU depois de ver na
   tela: ali já moram a caixa de seleção e o círculo de concluir, e um
   terceiro ponto vermelho entre os dois virou ruído em vez de aviso. A barra
   sozinha marca a linha inteira, e some quando a tarefa é concluída — que é
   exatamente o que ela precisa dizer. */

.tk-feitas{ margin-top:14px; border-top:1px solid var(--linha); }
/* leva 379: o título das concluídas é o botão que abre a lista */
summary.tk-feitas-tit{ cursor:pointer; list-style:none; }
summary.tk-feitas-tit::-webkit-details-marker{ display:none; }
summary.tk-feitas-tit .tk-seta{ display:inline-block; font-size:var(--t-mini); letter-spacing:0; }
details.tk-feitas[open] > summary.tk-feitas-tit .tk-seta{ transform:rotate(90deg); }
/* leva 379: com uma tarefa só, a caixinha de marcar várias não aparece */
.tk-so-uma .fk-sel{ display:none; }
.tk-feitas-tit{
  display:flex; align-items:center; gap:9px; padding:11px 2px 7px 2px;
  font-size:var(--t-rotulo); font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-3);
}
.tk-feitas-tit .n{
  font-weight:700; color:var(--good); background:var(--bom-fundo);
  border-radius:999px; padding:1px 9px; letter-spacing:0;
}
.tk-feita{ border-top:1px solid var(--linha-fraca); }
.tk-feita-lin{
  width:100%; display:flex; align-items:center; gap:10px; text-align:left;
  background:none; border:none; cursor:pointer; padding:9px 2px;
  font:inherit; color:var(--ink-2);
}
.tk-feita-lin:hover{ background:var(--papel-2); }
.tk-feita-lin .tk-seta{ color:var(--ink-3); font-size:var(--t-mini); flex:none; }
.tk-feita-tit{ flex:1; min-width:0; font-size:var(--t-corpo); }
.tk-feita-lin .tf-desfecho{ flex:none; }
.tk-feita-corpo{
  padding:4px 2px 16px 24px; background:var(--papel-2);
  border-left:2px solid var(--linha); margin-left:6px;
}
.tk-fatos{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 22px;
  padding:10px 0 2px 0;
}
.tk-kv{
  display:flex; justify-content:space-between; gap:10px; padding:5px 0;
  border-bottom:1px solid var(--linha-fraca); font-size:var(--t-apoio);
}
.tk-kv span{ color:var(--ink-3); }
.tk-kv b{ text-align:right; }
.tk-combinado{
  margin-top:13px; border:1px solid var(--linha); background:var(--papel);
  border-radius:10px; padding:11px 13px;
}
.tk-combinado .txt{ font-size:var(--t-corpo); line-height:1.6; margin-top:5px; white-space:pre-wrap; }
.tk-fio{ margin-top:9px; }
.tk-msg{ display:flex; gap:9px; margin-top:8px; }
.tk-ini{
  width:27px; height:27px; flex:none; border-radius:50%;
  background:var(--marca-fundo); color:var(--marca-texto);
  font-size:var(--t-mini); font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.tk-balao{
  flex:1; min-width:0; border:1px solid var(--linha); background:var(--papel);
  border-radius:10px; padding:9px 12px;
}
.tk-quem{ font-size:var(--t-apoio); color:var(--ink-3); }
.tk-quem b{ color:var(--ink-1); }
.tk-txt{ font-size:var(--t-corpo); line-height:1.6; margin-top:3px; white-space:pre-wrap; }
.tk-msg-sis{
  font-size:var(--t-apoio); color:var(--ink-3); font-style:italic;
  padding:7px 0 7px 36px;
}
.tk-feita-bts{ margin-top:14px; }

@media (max-width:840px){
  .tk-fatos{ grid-template-columns:minmax(0,1fr); }
  .tk-feita-lin{ flex-wrap:wrap; }
  .tk-feita-corpo{ padding-left:14px; }
}

/* ============================================================
   A PASTA ARQUIVADA GANHA ETIQUETA — leva 268.

   [stated] "os arquivados deve ter etiqueta vermelho escuro com letra
   branca". Hoje ela dizia "· encerrada" em cinza claro de 12,5px, no fim do
   nome: some no meio da linha.

   O TOM ERA #7A241C, UM VINHO, E NÃO O VERMELHO DE ALERTA — a leva 268 mediu
   e escolheu assim porque, com letra branca por cima, o vermelho de então
   reprovava e o vinho passava.

   NA LEVA 277 ELE VIROU PRETO (#131A24). A escolha da Dra. Kamille — uma cor
   só no sistema — tirou o chão do vinho: ao lado do #D0342C ele lia como um
   segundo alarme, de significado diferente, que ninguém ia decorar. E
   encerrada não é alarme, é fim. Branco sobre o preto dá 17,49:1, contra os
   7,8:1 do vinho: a etiqueta ficou mais legível, não menos. O token
   continua existindo por conta própria justamente porque "isto acabou" e
   "isto está atrasado" não podem dividir a mesma cor.
   ============================================================ */
.etq-arquivada{
  display:inline-block; flex:none;
  background:var(--arquivada-fundo); color:var(--arquivada-texto);
  font-size:var(--t-rotulo); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; border-radius:6px; padding:3px 9px;
  vertical-align:1px;
}
/* A linha inteira desbota: o olho separa o encerrado do vivo sem ler. */
tr.linha-arquivada > td, .linha-arquivada{ color:var(--ink-3); }

/* ============================================================
   A FICHA COMO PAINEL DE BLOCOS — leva 267 (17/set/2026).

   Escolha da Dra. Kamille entre cinco maquetes: o caminho C, o painel de
   blocos do Clio. Vale SÓ na aba Resumo (`.tp-blocos`); as outras continuam
   na grade de duas colunas da leva 265, logo abaixo.

   Por que a ordem é uma variável de CSS e não `style.order` escrito pelo JS:
   `order` inline valeria também nas outras abas, onde a `.fx-dir` é uma
   coluna grudada e não um bloco. Amarrada a `.tp-blocos`, ela some sozinha ao
   trocar de aba — sem o JS precisar lembrar de desfazer nada.
   ============================================================ */
#tab-proc.tp-blocos{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px; align-content:start; align-items:start;
}
/* A coluna da direita deixa de ser coluna: os dois cartões dela viram filhos
   diretos da grade e podem ser movidos e escondidos um sem o outro. */
#tab-proc.tp-blocos > .fx-dir{display:contents}
#tab-proc.tp-blocos [data-bloco]{
  order:var(--bl-ordem,0); position:relative; margin-top:0; align-self:start;
}
#tab-proc.tp-blocos [data-bloco].bl-largo{grid-column:1/-1}
/* ============================================================
   TETO DE ALTURA NOS BLOCOS COMPRIDOS.

   Medido na tela, e não suposto: numa pasta com 10 tarefas em aberto o bloco
   das Tarefas sozinho passava de 700px e empurrava "O caso" e os "Números
   para copiar" para fora da primeira tela. A ficha anterior tinha a coluna da
   direita GRUDADA justamente para isso — trocar por um painel em que o CPF
   some atrás de uma rolagem seria andar para trás.

   Painel é o que cabe numa tela: bloco comprido rola por dentro, como a caixa
   do histórico já fazia, e os outros continuam onde estão. */
#tab-proc.tp-blocos [data-bloco="tarefas"],
#tab-proc.tp-blocos [data-bloco="anotacoes"],
#tab-proc.tp-blocos [data-bloco="historia"]{max-height:480px; overflow-y:auto}
#tab-proc.tp-blocos [data-bloco].bl-oculto{display:none}
/* Os avisos não são blocos: ficam no alto, inteiros, sempre. */
/* A faixa de aviso já traz `order:0` inline, do próprio HTML, e estilo inline
   ganha daqui — por isso os blocos começam em 1 (ver ficha-blocos.js) em vez
   de esta regra tentar vencer com um número negativo que não pegaria. */
#tab-proc.tp-blocos [data-aviso]{grid-column:1/-1; margin-top:0}
#tab-proc.tp-blocos .fb-aviso-escondido{display:none}
.fb-mais-avisos{margin-left:auto; font-size:0.8438rem}

/* Espaço para o ⋯ no canto: sem isto ele cai por cima do "tudo" do bloco dos
   números e do "copiar" das anotações — visto na tela, não suposto. */
#tab-proc.tp-blocos [data-bloco] .rotulo-micro,
#tab-proc.tp-blocos [data-bloco] .fx-tit,
#tab-proc.tp-blocos [data-bloco] .anot-faixa-tit{padding-right:26px}

.bl-menu{
  position:absolute; top:6px; right:8px; z-index:2;
  border:none; background:transparent; color:var(--ink-3);
  font-size:1.05rem; line-height:1; padding:2px 6px; border-radius:7px; cursor:pointer;
}
.bl-menu:hover{background:var(--linha-fraca); color:var(--ink-1)}
.bl-menu-caixa{
  position:absolute; top:30px; right:8px; z-index:20;
  background:var(--papel); border:1px solid var(--linha); border-radius:10px;
  box-shadow:0 6px 20px rgba(19,26,36,.13); padding:5px; min-width:190px;
  display:flex; flex-direction:column;
}
.bl-menu-caixa button{
  text-align:left; border:none; background:transparent; cursor:pointer;
  font:inherit; font-size:0.9062rem; color:var(--ink-1);
  padding:8px 10px; border-radius:7px;
}
.bl-menu-caixa button:hover{background:var(--linha-fraca)}

/* A faixa do rodapé: é ela que impede que "escondido por padrão" vire
   "sumiu". Existe mesmo quando nada está escondido. */
.fb-rodape{
  grid-column:1/-1; order:9999;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  border-top:1px dashed var(--axis); margin-top:4px; padding-top:11px;
  font-size:0.8438rem; color:var(--ink-3);
}
/* leva 379: sem nada a dizer, a faixa não aparece */
.fb-rodape[hidden]{display:none}
.fb-rodape .fb-rot{font-weight:600; color:var(--ink-2)}
.fb-rodape .fb-esp{flex:1}
.fb-rodape .fb-dica{color:var(--ink-3)}
.fb-rodape .fb-sep{color:var(--axis)}

@media (max-width:1080px){
  #tab-proc.tp-blocos{grid-template-columns:minmax(0,1fr)}
  #tab-proc.tp-blocos [data-bloco].bl-largo{grid-column:auto}
  /* No celular o teto sai: rolagem dentro de rolagem, com o dedo, é o jeito
     mais rápido de a pessoa perder a lista de vista. A tela já é uma coluna,
     então bloco comprido só empurra o de baixo. */
  #tab-proc.tp-blocos [data-bloco="tarefas"],
  #tab-proc.tp-blocos [data-bloco="anotacoes"],
  #tab-proc.tp-blocos [data-bloco="historia"]{max-height:none; overflow-y:visible}
  .fb-rodape{align-items:flex-start}
}

/* ============================================================
   A FICHA EM DUAS COLUNAS — leva 265 (17/set/2026).

   [stated] Dra. Kamille: "ainda acho que está muito confuso, principalmente
   na primeira página". Escolha dela entre três caminhos desenhados: o caso e
   os números numa coluna fixa à direita, o trabalho à esquerda.

   Por que coluna e não mais uma aba: o Nielsen Norman Group mede que trocar
   de aba cobra da memória de curto prazo e que a página única vence quando a
   pessoa precisa juntar informação de duas abas — que é o que se faz ao ler
   um processo. O Salesforce ("highlights panel") e o SAP Fiori (cabeçalho de
   objeto, no máximo cinco pares) fixam esses campos no alto; o Smokeball põe
   os widgets numa coluna à direita da pasta. Esta é a mesma ideia.

   A grade vale nas abas que têm a coluna; Documentos desenha noutro
   contêiner (#tab-docs) e continua de largura inteira.
   ============================================================ */
#tab-proc{display:flex; flex-direction:column}
#tab-proc.tp-rail{display:grid; grid-template-columns:minmax(0,1fr) 322px; column-gap:26px; align-items:start}
#tab-proc.tp-rail > *{grid-column:1; min-width:0}
#tab-proc.tp-rail > .fx-dir{grid-column:2; grid-row:1 / span 999; position:sticky; top:12px; align-self:start}
.fx-dir{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.fx-dir-card{border:1px solid var(--linha); border-radius:12px; padding:12px 14px; background:var(--papel-2)}
.fx-dir-card .rotulo-micro{margin-bottom:6px}
.fx-kv{display:flex; justify-content:space-between; gap:10px; padding:5px 0; font-size:0.9062rem;
  border-bottom:1px dashed var(--linha-fraca); color:var(--ink-3)}
.fx-kv:last-child{border-bottom:0}
.fx-kv b{color:var(--ink-1); font-weight:600; text-align:right; word-break:break-word}
.fx-liga{border:0; background:none; padding:0; font:inherit; color:inherit; font-weight:600;
  border-bottom:1px dashed currentColor; cursor:pointer}
.fx-copia{display:flex; align-items:baseline; gap:10px; min-width:0; padding:6px 0;
  border-bottom:1px solid var(--linha-fraca)}
.fx-copia:last-child{border-bottom:0}
.fx-copia .dado-num{font-size:0.9062rem}

/* A primeira coisa a fazer, em destaque — a tarefa aberta mais urgente. */
.fx-agora{border:1px solid var(--linha); border-left:3px solid var(--crit);
  border-radius:0 12px 12px 0; padding:13px 16px; background:var(--papel); margin:14px 0 4px}
.fx-agora.no-prazo{border-left-color:var(--warn)}
.fx-agora .rot{font-size:0.8438rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--crit)}
.fx-agora.no-prazo .rot{color:var(--warn)}
.fx-agora .tit{font-size:1.1875rem; font-weight:700; line-height:1.3; margin:3px 0 2px; max-width:60ch}
.fx-agora .bts{display:flex; gap:8px; margin-top:10px; flex-wrap:wrap}

/* Tela estreita: a coluna vira um cartão no alto, antes do trabalho. */
@media (max-width:1080px){
  #tab-proc.tp-rail{display:flex; flex-direction:column; align-items:stretch}
  #tab-proc.tp-rail > .fx-dir{position:static; order:-1; width:auto; align-self:stretch}
}

/* ============================================================
   TAREFAS: UMA TELA, TRÊS JEITOS — leva 263 (17/set/2026).

   [stated] Dra. Kamille: "precisamos melhorar o módulo tarefas, deixar mais
   intuitivo, mais organizado". Lista, Quadro e Semana dividem o mesmo
   cabeçalho (tkTopo, em tarefas-lista.js). O padrão é o da ficha e dos
   Workflows: papel branco com filete, um acento navy, e cor de estado só
   em pílula clara. Toda cor sai dos tokens.
   ============================================================ */
.tk-topo{margin-bottom:6px}
.tk-barra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.tk-modos{display:inline-flex;background:var(--papel);border:1px solid var(--linha);border-radius:10px;padding:3px}
.tk-modos button{border:0;background:transparent;padding:6px 14px;border-radius:7px;font-family:inherit;
  font-size:0.9375rem;font-weight:600;color:var(--ink-2);cursor:pointer}
.tk-modos button:hover{color:var(--ink-1);background:var(--papel-2)}
.tk-modos button.on{background:var(--marca-texto);color:#fff}
.tk-busca{flex:1;min-width:200px;max-width:360px;padding:8px 12px;border:1px solid var(--linha);
  border-radius:9px;font-size:0.9375rem;font-family:inherit;background:var(--papel);color:var(--ink-1)}
.tk-busca.ativo{border-color:var(--marca-texto);box-shadow:0 0 0 1px var(--marca-texto) inset}
.tk-bt{border:1px solid var(--linha);background:var(--papel);border-radius:9px;padding:8px 13px;
  font-family:inherit;font-size:0.9375rem;font-weight:600;color:var(--ink-1);cursor:pointer}
.tk-bt:hover{border-color:var(--ink-3)}
.tk-bt.on{border-color:var(--marca-texto);background:var(--marca-fundo);color:var(--marca-texto)}
.tk-espaco{flex:1}
.tk-limpar{font-size:0.9062rem}
.tk-topo .tl-carga{margin:0 0 14px}
.tk-topo .tl-carga[hidden]{display:none}
.tk-topo .tl-foco{margin-bottom:10px}
.tk-topo .tl-seg button.on{background:var(--marca-texto)}

/* filas à esquerda, o percentual numa linha à direita */
.tk-filas-linha{display:flex;align-items:center;gap:10px 16px;flex-wrap:wrap;margin-bottom:12px}
/* "Ver as tarefas de" — leva 294. Só aparece em "Do escritório"; é o mesmo
   filtro `resp` do painel de Filtros, trazido para onde a pergunta nasce. */
.tl-dequem{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:0 0 12px}
.tl-dequem label{font-size:0.8438rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.tl-dequem input{min-width:250px;padding:8px 12px;border:1px solid var(--grid);border-radius:9px;
  font:inherit;font-size:0.9062rem;background:var(--papel);color:var(--ink-1)}
.tl-dequem input:focus{outline:2px solid var(--accent);outline-offset:1px}
.tk-filas-linha .tl-filas{margin-bottom:0}
.tk-filas-linha #tl-saude{margin-left:auto}
.tk-saude{display:flex;align-items:center;gap:8px;font-size:0.9062rem;color:var(--ink-3);white-space:nowrap}
.tk-saude b{font-size:1rem;color:var(--ink-1);font-variant-numeric:tabular-nums}
.tk-saude-barra{display:inline-flex;width:120px;height:6px;border-radius:99px;overflow:hidden;background:var(--linha-fraca)}
.tk-saude-barra i{display:block;height:100%}
.tk-saude-barra .ok{background:var(--verde)}
.tk-saude-barra .pend{background:var(--warn);opacity:.55}
.tk-saude-barra .atras{background:var(--crit)}

/* o aviso de 90 dias vira uma linha */
.tk-topo .tl-faxina{padding:8px 12px;margin-bottom:12px;border-radius:10px;gap:10px;flex-wrap:wrap}
.tk-topo .tl-faxina .lnk{margin-left:auto;font-weight:600;color:var(--warn)}
.tk-topo .tl-faxina b{font-weight:700}

.tk-nota{font-size:0.9062rem;color:var(--ink-3)}

/* a linha: tarefa em cima, cliente embaixo */
.tl-cli .nome .tarefa{font-weight:650}
.tl-cli .sub .cliente{color:var(--ink-2);font-weight:550}
.tl-selo.mini,.tl-tag.mini{font-size:0.8438rem;padding:1px 6px;vertical-align:1px;margin-left:4px}
.tl-lin .st{background:var(--ink-3)}
.tl-lin .st.atras{background:var(--crit)}
.tl-lin .st.hoje{background:var(--warn)}
.tl-lin .st.prox{background:var(--marca-texto);opacity:.55}
.tl-lin .st.trav,.tl-lin .st.semprazo,.tl-lin .st.canc{background:var(--axis)}
.tl-lin .st.feito{background:var(--good)}

/* ============================================================
   O RECADO NA LINHA DA TAREFA — leva 279 (18/set/2026).

   [stated] Dra. Kamille: "conversa com respostas e não lidas na linha".

   Terceira linha da célula do cliente, abaixo de cliente/quem-pediu/anotação.
   Ela existe só quando há conversa — linha vazia em lista densa é ruído.

   O VERMELHO É O ÚNICO DA LINHA e marca só a não lida, que é a única coisa
   ali que pede ação hoje. O resto é cinza: quem falou e o que falou são
   contexto, não alarme. É a regra da leva 277 aplicada — uma cor só, e ela
   significa "isto precisa de você".

   `min-width:0` + `overflow:hidden` no texto: sem isso, um recado longo
   empurra a coluna do prazo para fora e a lista começa a rodar para o lado —
   defeito que a leva 135 já consertou uma vez em outra tela.
   ============================================================ */
.tl-fio{display:flex; align-items:baseline; gap:6px; margin-top:3px;
  font-size:0.8438rem; color:var(--ink-3); min-width:0}
.tl-fio-marca{flex:none; color:var(--crit); font-size:0.8438rem; line-height:1}
.tl-fio.nova .tl-fio-quem{color:var(--ink-1); font-weight:600}
.tl-fio-quem{flex:none; font-weight:500; color:var(--ink-2)}
.tl-fio-quem::after{content:':'}
.tl-fio-txt{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.tl-fio-n{flex:none; font-size:0.8438rem; font-weight:700; color:var(--ink-3);
  background:var(--linha-fraca); border-radius:99px; padding:1px 6px}

/* ============================================================
   A CONVERSA DENTRO DA TAREFA — leva 279 (18/set/2026).

   Fio curto dentro do painel lateral, que tem 350px: por isso a mensagem é
   empilhada (quem falou em cima, texto embaixo) e não em balão com avatar —
   balão nessa largura vira uma coluna de texto de cinco palavras.

   A linha do SISTEMA é recuada e mais clara: ela dá contexto ("prazo
   remarcado"), não é fala de ninguém, e não pode competir com o recado de
   gente. Mesma distinção que a regra de "não lida" faz no servidor.

   `max-height` com rolagem própria: um fio de trinta mensagens não pode
   empurrar a caixa de escrever para fora do alcance.
   ============================================================ */
.tl-fio-lista{display:flex; flex-direction:column; gap:9px; margin-top:6px;
  max-height:260px; overflow-y:auto; padding-right:4px}
.tl-msg{display:flex; flex-direction:column; gap:2px}
.tl-msg-cab{display:flex; align-items:baseline; gap:7px; font-size:0.8438rem}
.tl-msg-cab b{color:var(--ink-1); font-weight:600}
.tl-msg-cab span{color:var(--ink-3)}
.tl-msg-txt{font-size:0.9062rem; line-height:1.5; color:var(--ink-1); white-space:pre-wrap;
  word-break:break-word}
.tl-msg.sis{padding-left:10px; border-left:2px solid var(--linha-fraca)}
.tl-msg.sis .tl-msg-cab b,.tl-msg.sis .tl-msg-txt{color:var(--ink-3); font-weight:500}
.tl-msg.ia{padding-left:10px; border-left:2px solid var(--brand)}
.tl-msg.ia .tl-msg-cab b{color:var(--brand)}

.tl-msg-nova{display:flex; gap:7px; align-items:flex-end; margin-top:10px}
.tl-msg-nova textarea{flex:1; min-width:0; resize:vertical; font-family:inherit;
  font-size:0.9062rem; line-height:1.45; padding:8px 10px; border:1px solid var(--grid);
  border-radius:9px; background:var(--papel); color:var(--ink-1)}
.tl-msg-nova textarea:focus{outline:none; border-color:var(--accent)}
.tl-msg-nova .btn{flex:none}

/* Quadro: a linha de controle e o botão de concluir no desenho da ficha */
.tk-quadro-ctrl{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 10px}
.tk-selvarias{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:0.9062rem;font-weight:600;color:var(--ink-2)}
.tk-selvarias input{width:16px;height:16px;cursor:pointer;accent-color:var(--marca-texto)}
.tk-quadro .tk-done{width:20px;height:20px;border-radius:50%;margin-top:3px;box-shadow:none;
  border:2px solid var(--linha);background:var(--papel)}
.tk-quadro .tk-done.pend{border-color:var(--warn);background:var(--atencao-fundo)}
.tk-quadro .tk-done.atras{border-color:var(--crit);background:var(--crit)}
.tk-quadro .tk-done.feito{border-color:var(--good);background:var(--good);color:#fff}
.tk-quadro .tk-done.pend:hover{background:var(--warn);color:#fff;box-shadow:none}
.tk-quadro .tk-done.atras:hover{background:var(--crit);color:#fff;box-shadow:none;filter:brightness(.9)}

/* Cartão do Quadro: prioridade em pílula clara, borda em tinta de estado */
.tk-quadro .tk-card{background:var(--papel);border-color:var(--linha)}
.tk-quadro .tk-card.pr-urgente{border-left-color:var(--crit)}
.tk-quadro .tk-card.pr-alta{border-left-color:var(--serious)}
.tk-quadro .tk-card.pr-normal{border-left-color:var(--marca-texto)}
.tk-quadro .tk-card.pr-baixa{border-left-color:var(--axis)}
.tk-quadro .tk-card.bloq{border-color:var(--linha)}
.tk-quadro .tk-card .tf-sel{accent-color:var(--marca-texto)}
.tk-quadro .tk-chip.prio{background:var(--critico-fundo)!important;color:var(--critico-texto)}
.tk-quadro .tk-card.pr-alta .tk-chip.prio{background:var(--atencao-fundo)!important;color:var(--atencao-texto)}

/* Tela sem mouse: os botões da linha não dependem de passar o mouse. */
@media (hover:none){ .tl-acoes{opacity:1} .tl-ghead .seq{opacity:1} }

/* ============================================================
   CELULAR. Medido a 400px antes: a linha mostrava só o selo do prazo — os
   quatro botões invisíveis (opacity 0) ocupavam a largura e o nome sumia;
   e o painel da tarefa abria ao lado da lista, espremendo-a numa fresta.
   Agora a linha quebra em duas e o painel cobre a tela, com o × à vista.
   ============================================================ */
@media (max-width:840px){
  .tk-busca{max-width:none;flex-basis:100%;order:5}
  .tk-espaco{display:none}
  .tk-filas-linha #tl-saude{margin-left:0}
  .tl-seg{margin-left:0}
  .tl-lin{flex-wrap:wrap;gap:6px 10px;align-items:flex-start}
  .tl-lin .st{height:34px}
  .tl-cli{flex:1 1 calc(100% - 60px)}
  .tl-cli .nome,.tl-cli .sub{white-space:normal}
  .tl-ben,.tl-resp{display:none}
  .tl-prazo{width:auto;text-align:left;margin-left:42px;display:flex;align-items:center;gap:8px}
  .tl-prazo .tl-data{margin-top:0}
  .tl-acoes{opacity:1;margin-left:auto}
  .tl-det{position:fixed;inset:0;width:auto;margin:0;border-radius:0;border:0;z-index:1500;max-height:none;top:0}
  /* o cabeçalho cabe numa tela e meia, não em duas */
  .tl-foco-sub{display:none}
  .tl-filas{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;max-width:100%}
  .tl-q{flex:none}
  .tk-filas-linha{gap:8px}
  .tl-ctrl select{flex:1 1 40%;min-width:0}
}
@media (min-width:841px){ .tl-carga .l .v{width:190px} }
.tl-urgente .tl-selo.urgente.mini{display:none}

/* ============================================================
   A TAREFA CLICADA, DESTACADA DENTRO DA PASTA — leva 301.

   Clicar numa tarefa passou a abrir o PROCESSO (é lá que está tudo o que se
   precisa para cumpri-la). Só que a pasta pode ter dez tarefas, e sem marcar
   qual foi a pessoa teria de procurar de novo a que estava vendo.

   O destaque dura alguns segundos e sai sozinho: marca permanente viraria
   ruído na próxima vez que alguém abrisse a mesma pasta.
   ============================================================ */
.tl-achada{
  background:var(--atencao-fundo);
  box-shadow:inset 3px 0 0 var(--brand);
  border-radius:8px;
  transition:background .35s ease, box-shadow .35s ease;
}

/* ============================================================
   AGENDA — o calendário do mês.

   Redesenhada em 3/set/2026. A versão anterior era uma grade cinza embaixo de
   um bloco de avisos e quatro cartões de número; a Dra. Kamille resumiu bem —
   "aquele texto todo antes da agenda está feio, primeira coisa deveria ser
   agenda".

   Três decisões de desenho, e o motivo de cada uma:

   1. DUAS COLUNAS. O calendário responde "o mês está cheio?"; o painel do
      lado responde "cheio de quê?". Empilhados, a segunda resposta exigia
      rolar — e responder embaixo é quase não responder. Lado a lado, o clique
      no dia troca o painel sem tirar o mês da vista. Abaixo de 1100px a
      coluna vira linha, porque sete colunas de calendário mais um painel não
      cabem em tela de notebook pequeno sem espremer as duas coisas.

   2. A CÉLULA GANHOU AR. 92px viraram 112px, e o item dentro dela ganhou
      fundo próprio em vez de só uma barrinha à esquerda. Sem as tarefas, a
      lotação típica caiu para poucos itens por dia — dá para mostrar o nome
      com folga, que é o que se vai ali ler.

   3. HOJE É UM DISCO, NÃO UMA BORDA. Borda colorida some no meio de outras
      bordas coloridas; disco cheio não. Achar "hoje" num calendário tem que
      ser instantâneo, senão a pessoa conta os dias com o dedo.
   ============================================================ */
/* A coluna da direita foi de 330px para 400px na leva 310: com 330 sobravam
   ~150px para o texto do item, e o nome do cliente não cabia. Em tela larga
   (≥1500px) vai a 440 — é espaço que estava sobrando à direita. */
.ag-wrap{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:16px;align-items:start}
@media (min-width:1500px){ .ag-wrap{grid-template-columns:minmax(0,1fr) 440px;gap:20px} }
@media (max-width:1100px){ .ag-wrap{grid-template-columns:1fr} }

.ag-painel{background:#fff;border:1px solid var(--border);border-radius:16px;
  padding:14px 16px 12px;box-shadow:0 1px 3px rgba(16,18,40,.05)}
.ag-esq{opacity:.45}

/* --- cabeçalho do mês --- */
.ag-topo{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ag-mes-nome{font-size:1.4375rem;font-weight:800;letter-spacing:-.4px;text-transform:capitalize;
  color:var(--ink-1,#101228);line-height:1.1}
.ag-mes-nome span{font-weight:500;color:var(--ink-3);margin-left:2px}
.ag-setas{display:inline-flex;border:1px solid var(--border);border-radius:10px;overflow:hidden;
  background:var(--page)}
.ag-setas button{border:none;background:transparent;padding:7px 12px;font-size:1rem;line-height:1;
  cursor:pointer;color:var(--ink-2);transition:background .12s}
.ag-setas button:hover{background:rgba(16,18,40,.06)}
.ag-setas .ag-hoje-bt{border-left:1px solid var(--border);border-right:1px solid var(--border);
  font-size:0.9062rem;font-weight:700;padding:7px 13px}

/* --- filtros: o número mora dentro do filtro --- */
.ag-chips{display:flex;gap:6px;flex-wrap:wrap}
.ag-chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);
  background:#fff;color:var(--ink-3);border-radius:999px;padding:5px 12px 5px 9px;
  font-size:0.8438rem;font-weight:700;cursor:pointer;transition:all .12s;line-height:1.4}
.ag-chip i{font-style:normal;font-size:0.9062rem;opacity:.75}
.ag-chip b{font-variant-numeric:tabular-nums;background:rgba(16,18,40,.07);border-radius:999px;
  padding:0 6px;font-size:0.8438rem;min-width:18px;text-align:center}
.ag-chip.on{border-color:var(--c);background:color-mix(in srgb,var(--c) 10%,#fff);color:var(--c)}
.ag-chip.on i{opacity:1}
.ag-chip.on b{background:color-mix(in srgb,var(--c) 18%,#fff)}
.ag-chip:not(.on){text-decoration:line-through;opacity:.62}
.ag-chip:hover{border-color:var(--c,#c9cfdd)}

/* --- tarja de vencidos: UMA linha, não um bloco ---
   O aviso continua sendo a primeira coisa lida dentro do cartão, mas não
   empurra mais o calendário para fora da tela. O detalhe está a um clique. */
.ag-tarja{display:flex;align-items:center;gap:8px;width:100%;text-align:left;
  border:1px solid var(--crit);background:var(--papel-2);color:var(--crit);border-radius:10px;
  padding:7px 12px;margin-bottom:11px;font-size:0.9062rem;font-weight:600;cursor:pointer;
  transition:background .12s}
.ag-tarja:hover{background:var(--papel-2)}
.ag-tarja-n{background:#DC2626;color:#fff;border-radius:999px;font-weight:800;font-size:0.8438rem;
  padding:1px 8px;font-variant-numeric:tabular-nums}

/* --- a grade --- */
.ag-grade{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.ag-cab{font-size:0.8438rem;text-transform:uppercase;letter-spacing:.7px;color:var(--ink-3);
  text-align:center;padding:0 0 7px;font-weight:800}
.ag-cab.fds{color:#b6bccd}
.ag-dia{min-height:112px;border:1px solid var(--border);border-radius:12px;padding:6px 7px;
  background:#fff;cursor:pointer;overflow:hidden;transition:border-color .12s,box-shadow .12s,transform .12s}
.ag-dia:hover{border-color:var(--linha);box-shadow:0 4px 14px rgba(16,18,40,.09);transform:translateY(-1px)}
.ag-dia.fds{background:#fafbfd}
/* Dia de outro mês: fica, mas apagado. Sumir com ele deixa buraco na grade e
   quebra a leitura da semana; deixá-lo igual faz confundir mês. */
.ag-dia.fora{opacity:.38;background:#fafbfd}
.ag-dia.hoje{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);
  background:color-mix(in srgb,var(--accent) 5%,#fff)}
.ag-dia.sel{border-color:var(--brand-escuro,#14213D);
  box-shadow:inset 0 0 0 2px var(--brand-escuro,#2E1065),0 4px 14px rgba(46,16,101,.14)}
.ag-dia.ag-vazio{cursor:default;background:#f6f7fa;border-style:dashed}

.ag-num{font-size:0.9062rem;font-weight:700;color:var(--ink-2);margin-bottom:4px;display:flex;
  align-items:center;justify-content:space-between;gap:4px;min-height:19px}
/* Hoje: disco cheio. Ver o motivo no cabeçalho deste bloco. */
.ag-hj{display:inline-flex;align-items:center;justify-content:center;width:21px;height:21px;
  border-radius:50%;background:var(--accent);color:#fff;font-weight:800;font-size:0.8438rem}
.ag-alerta{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;
  border-radius:50%;background:#DC2626;color:#fff;font-size:0.8438rem;font-weight:800;line-height:1}

/* Item dentro do dia: pastilha com fundo na cor da natureza. Barra sozinha à
   esquerda funcionava com uma cor; com três, o fundo é o que faz o olho
   agrupar sem ler. */
.ag-pt{display:flex;align-items:center;gap:4px;font-size:0.8438rem;line-height:1.45;
  border-left:3px solid var(--c);background:color-mix(in srgb,var(--c) 9%,#fff);
  border-radius:0 6px 6px 0;padding:2px 5px 2px 5px;margin-bottom:3px;
  white-space:nowrap;overflow:hidden;color:var(--ink-2)}
.ag-pt.venc{background:color-mix(in srgb,#DC2626 12%,#fff);border-left-color:#DC2626}
.ag-pt-ic{flex:none;font-size:0.8438rem}
.ag-pt-h{flex:none;font-weight:800;color:var(--c);font-variant-numeric:tabular-nums;font-size:0.8438rem}
.ag-pt-t{overflow:hidden;text-overflow:ellipsis}

/* Dia cheio: contagem por natureza em vez de quatro nomes tirados a esmo. */
.ag-contas{display:flex;flex-wrap:wrap;gap:4px;margin-top:3px}
.ag-conta{font-size:0.8438rem;font-weight:800;border:1px solid color-mix(in srgb,var(--c) 40%,#fff);
  color:var(--c);background:color-mix(in srgb,var(--c) 10%,#fff);border-radius:7px;padding:1px 6px;
  line-height:1.5;white-space:nowrap;font-variant-numeric:tabular-nums}

.ag-dica{margin-top:10px}

/* Mês vazio. Não é erro, mas parece — então explica de onde vêm os dados. */
.ag-nada{margin-top:12px;border:1px dashed var(--border);border-radius:12px;
  padding:14px 16px;background:var(--page);text-align:center}
.ag-nada-links{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:9px}

/* --- painel do lado --- */
.ag-lado{position:sticky;top:12px}
@media (max-width:1100px){ .ag-lado{position:static} }
/* ============================================================
   A COLUNA DA DIREITA TERMINA JUNTO COM O CALENDÁRIO — leva 383.

   [stated] "a falta de uma organização geométrica melhor". A lista
   "Próximos 7 dias" crescia até onde tivesse item: numa semana com dez
   perícias ela descia bem abaixo do calendário, e embaixo dele sobrava um
   vão branco até a lista de atrasados. Agora as duas colunas têm a mesma
   altura — a do calendário — e a lista rola por dentro.
   ============================================================ */
@media (min-width:1101px){
  .ag-wrap{align-items:stretch}
  .ag-lado{position:relative; top:auto; min-height:320px}
  .ag-lado > .card{position:absolute; inset:0; overflow-y:auto; margin:0}
}
.ag-lado-card{border-radius:16px;padding:14px 16px}
.ag-lado-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;
  padding-bottom:9px;border-bottom:1px solid var(--grid,#eee);margin-bottom:2px}
.ag-lado-cab b{font-size:1rem}
.ag-lado-cab .lnk{font-size:0.8438rem;flex:none}

/* --- a linha de item, usada no painel e na lista de vencidos --- */
.ag-item{display:flex;align-items:stretch;gap:9px;padding:9px 2px;
  border-bottom:1px solid var(--grid,#eee);font-size:0.9062rem}
.ag-item:last-child{border-bottom:none}
.ag-item:hover{background:var(--page)}
.ag-quando{flex:none;min-width:44px;font-variant-numeric:tabular-nums;font-size:0.9062rem;
  font-weight:700;color:var(--ink-2);line-height:1.25;padding-top:1px}
.ag-quando small{font-weight:600;color:var(--ink-3);font-size:0.8438rem}
.ag-quando.venc{color:var(--crit)}
.ag-fita{flex:none;width:3px;border-radius:3px;align-self:stretch}
.ag-txt{flex:1;min-width:0}
.ag-txt b{font-weight:700;display:block;line-height:1.35}
/* O NOME PODE OCUPAR DUAS LINHAS (leva 310). Numa agenda é o nome que
   identifica o compromisso; cortá-lo em "RENIVALDO MOR…" para caber uma
   etiqueta ao lado é trocar o conteúdo pelo enfeite. Duas linhas e para —
   três já seria a lista virando parágrafo. */
.ag-cli{font-size:0.8438rem;color:var(--ink-2);line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ag-det{font-size:0.8438rem;line-height:1.3}
/* As etiquetas saíram da linha do item e vieram para baixo do título: ali não
   disputam largura com o nome do cliente. */
.ag-selos{display:flex;flex-wrap:wrap;gap:5px;margin-top:4px}
.ag-selo{font-size:0.8438rem;font-weight:700;border-radius:999px;padding:1px 9px;white-space:nowrap}
.ag-selo.prev{background:var(--atencao-fundo);color:var(--warn);cursor:help}
.ag-selo.atr{background:var(--crit);color:#fff}

/* AS RESSALVAS DO MÊS (leva 310): manchete curta, motivos recolhidos — o
   mesmo desenho do diagnóstico de recorte das Análises. */
.ag-ressalvas{margin-top:10px;border:1px solid var(--linha);border-radius:10px;
  background:var(--papel-2);padding:7px 11px;font-size:0.9062rem}
.ag-ressalvas.corte{background:var(--atencao-fundo)}
.ag-ressalvas>summary{cursor:pointer;list-style:none}
.ag-ressalvas>summary::-webkit-details-marker{display:none}
.ag-ressalvas ul{margin:8px 0 2px 16px;padding:0}
.ag-ressalvas li{margin-bottom:4px;line-height:1.45}

.ag-atrasados{margin-top:14px;border-left:3px solid #DC2626;border-radius:14px}
.ag-atr-cab{margin-bottom:6px}
.ag-atr-cab b{color:var(--crit);font-size:0.9375rem;display:block;margin-bottom:2px}

/* Telefone: sete colunas de 40px não servem para nada. A célula encolhe e o
   painel do dia vira o jeito de ler — que é por isso que ele existe. */
@media (max-width:720px){
  .ag-painel{padding:11px 11px 10px;border-radius:13px}
  .ag-grade{gap:4px}
  .ag-dia{min-height:66px;padding:4px 4px;border-radius:9px}
  .ag-num{font-size:0.8438rem;margin-bottom:2px;min-height:16px}
  .ag-hj{width:18px;height:18px;font-size:0.8438rem}
  .ag-mes-nome{font-size:1.1875rem}
  .ag-conta{font-size:0.8438rem;padding:0 4px}
  /* NO TELEFONE O NOME VIRA PONTO.
     Uma coluna de calendário no celular tem ~40px. "Nivaldo Serra" cabia como
     "N…", e "N…" não é o nome: é um borrão que ocupa a linha inteira e não
     responde nada. O ponto colorido responde o que a célula do celular tem
     como responder — TEM alguma coisa, e de que natureza. O nome está a um
     toque, no painel do dia, que no celular fica logo abaixo. */
  .ag-dia .ag-pt{display:inline-block;width:8px;height:8px;border-radius:50%;
    background:var(--c);border:none;padding:0;margin:0 3px 3px 0;overflow:visible}
  .ag-dia .ag-pt.venc{background:#DC2626}
  .ag-pt-ic,.ag-pt-h,.ag-pt-t{display:none}
}

/* O botão de acrescentar etiqueta, em qualquer tela. Contorno na cor da marca
   e não cinza tracejado: cinza claro sobre branco é o que fazia ele
   desaparecer no meio do cartão. */
.etq-add{border:1px solid var(--brand-escuro,#2E1065)!important;color:var(--brand-escuro,#14213D)!important;
  background:#f5f3fb!important;font-weight:700;font-size:0.8438rem;border-radius:20px;padding:3px 11px;
  cursor:pointer;line-height:1.55;white-space:nowrap;transition:background .12s,color .12s}
.etq-add:hover{background:var(--brand-escuro,#2E1065)!important;color:#fff!important}
/* Na ficha ele é a ação de um campo, não um enfeite de cartão: ganha corpo. */
.ficha-etq .etq-add{font-size:0.8438rem;padding:4px 13px}
.ficha-etq .etq-rot{font-size:0.8438rem;text-transform:uppercase;letter-spacing:.5px;color:var(--ink-3);font-weight:700}


/* ============================================================
   OS CONTADORES DO MENU, EM COR SÓLIDA.

   Eles usavam `.badge.bad`: fundo vermelho a 12% e texto vermelho-escuro.
   Isso foi desenhado para fundo claro. O menu é escuro — ali o resultado era
   um número quase invisível em cima de uma mancha translúcida.

   Pedido da Dra. Kamille, e ela tem razão: contador que existe para chamar
   atenção não pode ser o elemento menos visível da tela. Agora é vermelho
   cheio com texto branco, do mesmo tamanho de antes.
   ============================================================ */
.nav button .badge{
  background:#E11D48 !important; color:#fff !important;
  font-weight:800; border:none; border-radius:20px;
  min-width:20px; padding:1px 7px; justify-content:center;
  font-variant-numeric:tabular-nums; letter-spacing:0;
}
.nav button.active .badge{ background:#fff !important; color:var(--crit) !important; }

/* ============================================================
   A RESPOSTA ANTES DO DETALHE — piloto do redesenho, 6/set/2026.

   Primeira tela construída inteira sobre a camada de tokens lá do topo:
   nenhum hexadecimal escrito aqui. É o padrão que as próximas telas seguem.

   O cartão fica ENTRE o cabeçalho e as abas de propósito — antes de qualquer
   campo. Ele responde a pergunta que faz a pessoa abrir a pasta; o resto é
   conferência, e conferência vem depois da resposta.

   A cor vem do par (fundo + texto) da natureza do aviso, nunca de um tom
   escolhido no olho. Uma faixa vertical de 3px carrega a cor, e o cartão
   permanece claro: caso perdido não precisa de tela vermelha, precisa de
   frase clara.
   ============================================================ */
.ficha-resposta{
  margin:14px 0 4px; padding:18px 20px;
  background:var(--papel); border:1px solid var(--linha);
  border-left:3px solid var(--linha); border-radius:var(--raio-cartao);
}
.ficha-resposta .fr-rot{
  font-size:var(--t-rotulo); font-weight:600; letter-spacing:.08em;
  color:var(--ink-3); margin-bottom:8px;
}
.ficha-resposta .fr-frase{
  font-family:var(--fonte-conclusao); font-weight:var(--peso-conclusao);
  font-size:var(--t-conclusao); line-height:1.4; color:var(--ink-1);
  letter-spacing:-.01em;                 /* sem a serifada, a frase fecha um pouco */
  max-width:70ch; text-wrap:pretty;
}
.ficha-resposta .fr-detalhe{
  margin-top:7px; font-size:var(--t-corpo); line-height:1.6;
  color:var(--ink-2); max-width:70ch;
}
/* "Como cheguei a isso": frase que decide caso sem rastro não se sustenta. */
.ficha-resposta .fr-lnk{ margin-top:9px; font-size:var(--t-apoio); font-weight:600 }
.ficha-resposta .fr-porque{
  margin-top:7px; padding-top:8px; border-top:1px solid var(--linha-fraca);
  font-size:var(--t-apoio); line-height:1.7; color:var(--ink-2);
}
/* ============================================================
   A RESPOSTA EM UMA LINHA — leva 264.

   O cartão ocupava ~220px acima das abas, em toda pasta. Agora o rótulo, a
   frase e o "ver detalhes" ficam na MESMA linha (~52px), e o detalhe abre
   embaixo. A faixa colorida da esquerda continua: ela é o que distingue
   alerta de informação sem depender de ler a frase inteira.
   ============================================================ */
.ficha-resposta.fr-linha{ padding:11px 16px; margin:12px 0 4px }
.ficha-resposta.fr-linha .fr-cab{ display:flex; align-items:baseline; gap:10px 14px; flex-wrap:wrap }
.ficha-resposta.fr-linha .fr-rot{ margin-bottom:0; flex:none }
.ficha-resposta.fr-linha .fr-frase{ font-size:1.0625rem; flex:1; min-width:220px }
.ficha-resposta.fr-linha .fr-lnk{ margin-top:0; flex:none; margin-left:auto }
.ficha-resposta.fr-linha .fr-corpo{ margin-top:8px; padding-top:9px; border-top:1px solid var(--linha-fraca) }
.ficha-resposta.fr-linha .fr-detalhe{ margin-top:0 }
.ficha-resposta.fr-linha .fr-porque{ border-top:0; padding-top:6px }

/* ============================================================
   SEÇÃO FECHADA COM RESUMO — leva 264.

   O resumo fica na MESMA linha do título da seção, em letra de corpo e cor
   de apoio: o título diz o assunto, o resumo diz o que tem lá dentro. Sem
   nada dentro, a palavra "vazio" ocupa o lugar — seção que não diz nada
   convida a abrir para descobrir que não havia nada.
   ============================================================ */
.clsf summary .fx-resumo{
  font-size:0.9062rem; font-weight:500; letter-spacing:0; text-transform:none;
  color:var(--ink-2); flex:1; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap;
}
.clsf summary .fx-resumo.vazio{ color:var(--ink-3); font-style:italic }
.clsf details[open] > summary .fx-resumo{ display:none }
.clsf summary:hover{ color:var(--ink-1) }
/* Origem, auditoria e exclusão: consulta rara, no fim da aba Processo. */
.fx-rodape-proc{ margin-top:18px; border-top:1px dashed var(--linha); padding-top:10px }
.fx-rodape-proc > summary{ font-size:0.9062rem; font-weight:600; color:var(--ink-3); cursor:pointer }

.ficha-resposta.fr-bom{     border-left-color:var(--good) }
.ficha-resposta.fr-atencao{ border-left-color:var(--warn) }
.ficha-resposta.fr-critico{ border-left-color:var(--crit) }
.ficha-resposta.fr-neutro{  border-left-color:var(--axis) }
@media (max-width:760px){
  .ficha-resposta{ padding:15px 16px }
  .ficha-resposta .fr-frase{ font-size:1.25rem }
}

/* ============================================================
   REDESENHO — LEVA 1: O VOCABULÁRIO COMPARTILHADO. 6/set/2026.

   "Vamos seguir em refazer todo o design." Refazer 19 telas uma a uma levaria
   semanas e pararia as entregas de função. Mas nem tudo precisa ser reescrito:
   as telas todas falam por um punhado de classes — .card, .btn, .badge,
   h4.sec, table.tb, .modal, os campos de formulário. Contadas nos arquivos:
   167 .card, 352 .btn, 248 .sec, 69 .badge. Redesenhar ESSAS mexe em tudo de
   uma vez, sem tocar em nenhum dos 43 arquivos de tela.

   É o oposto do que sobra: as 1.473 cores escritas à mão dentro de cada tela,
   que só saem no redesenho individual de cada uma. Esta leva pega a parte
   compartilhada; as telas migram depois, uma por vez.

   Vem no fim do arquivo de propósito: precisa vencer as regras anteriores
   sem que eu tenha de editar cada uma delas — editar no meio é onde se quebra
   coisa em silêncio.

   O QUE MUDA, em uma frase: menos moldura, mais ar, um acento só. Borda
   discreta no lugar de sombra, cinza no lugar de cor, e a cor guardada para
   o que exige ação.
   ============================================================ */

/* ---- Cartão ---- */
.card{
  background:var(--papel); border:1px solid var(--linha);
  border-radius:var(--raio-cartao); padding:18px 20px;
  box-shadow:none;
}
.card h3{ font-size:0.9688rem; font-weight:600; color:var(--ink-1); letter-spacing:0 }

/* ---- Botões. O primário passa a ser o acento, não o navy: navy é a barra
       lateral, e botão da mesma cor da moldura some dentro dela. ---- */
.btn{
  background:var(--accent); color:#fff; border:1px solid transparent;
  border-radius:var(--raio-campo); font-weight:500; font-size:var(--t-corpo);
  padding:0 15px; height:36px;
}
.btn:hover{ background:var(--s7) }
.btn.sec{ background:var(--papel); color:var(--ink-2); border:1px solid var(--linha) }
.btn.sec:hover{ background:var(--papel); border-color:var(--axis); color:var(--ink-1) }
.lnk{ color:var(--accent) }
.lnk:hover{ color:var(--s7) }

/* ---- Etiqueta de estado. Quadrada e discreta: pílula colorida em toda linha
       de tabela vira confete, e aí nenhuma cor quer dizer nada. ---- */
.badge{
  border-radius:6px; font-size:var(--t-mini); font-weight:600;
  padding:3px 9px; letter-spacing:0;
}
.badge.ok{   background:var(--bom-fundo);     color:var(--bom-texto) }
.badge.mid{  background:var(--atencao-fundo); color:var(--atencao-texto) }
.badge.bad{  background:var(--critico-fundo); color:var(--critico-texto) }
.badge.neutral{ background:var(--tela); color:var(--ink-2) }

/* ---- Rótulo de seção ---- */
h4.sec{
  font-size:var(--t-rotulo); font-weight:600; letter-spacing:.08em;
  color:var(--ink-3); text-transform:uppercase;
  margin:22px 0 10px; padding-top:14px; border-top:1px solid var(--linha-fraca);
}

/* ---- Tabela: sem zebra, sem grade, só a divisória. A leitura de uma lista
       longa se faz pelo alinhamento e pelo espaço, não por linhas pintadas. */
table.tb{ font-size:var(--t-apoio) }
.tb th{
  font-size:var(--t-rotulo); font-weight:600; letter-spacing:.08em;
  color:var(--ink-3); background:var(--papel-2);
  border-bottom:1px solid var(--linha); padding:11px 12px;
}
.tb td{ border-bottom:1px solid var(--linha-fraca); padding:13px 12px; color:var(--ink-1) }
.tb tr:last-child td{ border-bottom:none }
.tb tbody tr:nth-child(even){ background:transparent }
.tb tbody tr:hover{ background:var(--papel-2) }

/* ---- Campos ---- */
input,select,textarea{
  border-radius:var(--raio-campo);
}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--accent);
  /* Anel de foco em rgba fixo, não em color-mix: color-mix não existe em
     navegador de dois anos atrás, e ali o campo ficaria SEM marca nenhuma de
     foco — que é problema de acessibilidade, não de estética. */
  box-shadow:0 0 0 3px rgba(91,58,255,.14);
}

/* ---- Janela ---- */
.modal{ border-radius:var(--raio-cartao); border:1px solid var(--linha) }
.modal h4.sec{ font-size:var(--t-rotulo); letter-spacing:.08em }

/* ============================================================
   DENSIDADE — a tensão que eu mesmo apontei na maquete.

   O desenho arejado é bom para ler um caso e ruim para varrer 6.245 pastas:
   quem trabalha em lista longa precisa de mais linhas na tela, não de mais
   ar. Escolher um dos dois seria errar com metade do escritório.

   Então são dois modos, e a pessoa escolhe. `confortavel` é o padrão; o
   `compacto` aperta o ritmo sem mudar nada da linguagem — mesmas cores,
   mesmas bordas, mesma hierarquia, só mais perto.
   ============================================================ */
body.compacto{
  --t-titulo:1.5625rem; --t-conclusao:1.25rem;
  --t-corpo:0.9062rem; --t-apoio:0.8438rem; --t-mini:0.8438rem;
  --palco-topo:22px; --palco-lado:34px;
}
body.compacto .card{ padding:13px 15px }
body.compacto .tb td{ padding:8px 10px }
body.compacto .tb th{ padding:8px 10px }
body.compacto h4.sec{ margin:15px 0 7px; padding-top:10px }
body.compacto .btn{ height:32px; padding:0 12px }
body.compacto .ficha-resposta{ padding:13px 16px; margin:10px 0 4px }
body.compacto .kb-card{ padding:9px 10px }

/* O controle mora na barra superior, do lado do sino: é onde já se olha para
   mudar o jeito de ver, e não escondido numa tela de configuração que
   ninguém abre duas vezes. */
.dens{ display:inline-flex; border:1px solid var(--linha); border-radius:var(--raio-campo); overflow:hidden; background:var(--papel) }
.dens button{
  background:none; border:none; cursor:pointer; font-family:inherit;
  font-size:var(--t-mini); font-weight:500; color:var(--ink-3);
  padding:0 11px; height:36px; display:inline-flex; align-items:center;
}
.dens button+button{ border-left:1px solid var(--linha) }
.dens button.on{ background:var(--tela); color:var(--ink-1); font-weight:600 }
body.compacto .dens button{ height:32px }

/* ============================================================
   FICHA DO PROCESSO — REDESENHO (leva 175, 09/set/2026).
   Mesma linguagem do Vault e da lista de Processos: janela mais larga e mais
   arredondada, abas em pílulas, ações do dia à vista e o resto no "⋯", o
   formulário da controladoria num cartão neutro (o azul lia como aviso), e
   as seções recolhíveis com o rótulo em maiúscula pequena.
   ============================================================ */
#modal .modal{max-width:920px;border-radius:18px;padding:22px 28px 26px}
#modal .modal h3{font-size:1.3125rem;letter-spacing:-.01em}
.ficha-topo{padding-top:22px;margin-top:-22px}
.ficha-mais{position:relative;display:inline-flex}
.ficha-menu{position:absolute;right:0;top:42px;z-index:20;background:var(--papel);border:1px solid var(--linha);border-radius:12px;
  box-shadow:0 12px 40px rgba(11,18,32,.14);padding:6px;min-width:250px}
.ficha-menu button{display:block;width:100%;text-align:left;border:0;background:none;padding:9px 12px;border-radius:8px;
  font-family:inherit;font-size:0.9375rem;color:var(--ink-1);cursor:pointer;white-space:nowrap}
.ficha-menu button:hover{background:var(--marca-fundo)}
.ficha-topo .btn,.ficha-topo .btn.sec{height:38px;padding:0 15px;border-radius:11px;display:inline-flex;align-items:center;gap:6px}
.ficha-topo .btn:not(.sec){background:var(--marca-texto);border:1px solid var(--marca-texto);color:#fff}
.ficha-tabs{gap:6px;border-bottom:0;padding:4px 0}
.ficha-tabs .ftab{border:1px solid transparent;border-radius:999px;padding:7px 14px;font-size:0.9375rem;color:var(--ink-2)}
.ficha-tabs .ftab:hover{background:var(--papel-2);color:var(--ink-1)}
.ficha-tabs .ftab.on{background:var(--marca-fundo);border-color:var(--marca-fundo);color:var(--marca-texto);font-weight:700}
#modal .card{border:1px solid var(--linha);border-radius:14px;box-shadow:none;background:var(--papel)}
.clsf{background:var(--papel-2);border:1px solid var(--linha);border-radius:14px;padding:16px 18px;margin-top:16px}
.clsf h4{font-size:0.8438rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin-bottom:12px}
.clsf details{margin-top:12px;border-top:1px solid var(--linha);padding-top:10px}
.clsf summary{font-size:0.8438rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px}
.clsf summary::-webkit-details-marker{display:none}
.clsf summary::before{content:"▸";color:var(--ink-3);font-size:0.8438rem;transition:transform .12s}
.clsf details[open] > summary::before{transform:rotate(90deg)}
.clsf .form-grid input,.clsf .form-grid select,.clsf .form-grid textarea{border-radius:9px;border:1px solid var(--linha);background:var(--papel)}
.clsf .form-grid input:focus,.clsf .form-grid select:focus,.clsf .form-grid textarea:focus{outline:none;border-color:var(--marca-texto);box-shadow:0 0 0 3px var(--marca-fundo)}

/* ============================================================
   REDESENHO — LEVA 176 (09/set/2026): O RESTO DAS TELAS NA LÍNGUA DO VAULT.
   Depois de Processos (174) e da ficha (175), o que faltava era o vocabulário
   compartilhado bater com o piloto: sub-abas em pílulas (Agenda do mês /
   Kanban, Quadro / Minha semana / Relatório, as sete de Gestão…), botão
   primário na cor de marca do Vault (#3B2A9E) e 38px, cartão de raio 14,
   campo de raio 10. Vale para Agenda, Tarefas, Clientes, Gestão, Análises,
   Financeiro — sem tocar em nenhum arquivo de tela.
   ============================================================ */
:root{ --raio-cartao:14px; --raio-campo:10px }
.subtabs{ gap:6px; border-bottom:0; padding:2px 0; margin:0 0 16px }
.subtab{
  border:1px solid transparent; border-bottom:1px solid transparent; border-radius:999px;
  padding:7px 14px; font-size:0.9375rem; font-weight:600; color:var(--ink-2); margin-bottom:0;
}
.subtab:hover{ background:var(--papel-2); color:var(--ink-1) }
.subtab.active{ background:var(--marca-fundo); border-color:var(--marca-fundo); color:var(--marca-texto) }
.btn{ background:var(--marca-texto); border-radius:11px; height:38px; font-weight:600 }
.btn:hover{ background:var(--marca-texto); filter:brightness(1.08) }
.btn.sec{ background:var(--papel); color:var(--ink-1); border:1px solid var(--linha) }
.btn.sec:hover{ filter:none; border-color:var(--ink-3) }
.lnk{ color:var(--marca-texto) }
.card{ border-radius:var(--raio-cartao) }
.tb th{ background:var(--papel-2) }
.tb tbody tr:hover{ background:var(--marca-fundo) }
input,select,textarea{ border:1px solid var(--linha); background:var(--papel) }
input:focus,select:focus,textarea:focus{ border-color:var(--marca-texto); box-shadow:0 0 0 3px var(--marca-fundo) }
body.compacto .btn{ height:33px }

/* ============================================================
   A HISTÓRIA GANHA COR — leva 272 (18/set/2026)

   [stated] Dra. Kamille: "o histórico precisa ter algum tipo de cor nas
   publicações do diário e também nos títulos de cada parte da história".

   O QUE ELA ESTAVA VENDO: trinta itens do mesmo cinza, um debaixo do outro.
   Uma intimação do Diário — que é a única linha da história que pode fazer um
   prazo correr — tinha exatamente o mesmo peso visual de "fulano anexou um
   arquivo". E a data, que separa um dia do outro, era cinza-de-apoio.

   TRÊS NATUREZAS, TRÊS TRATAMENTOS, e a cor diz qual é qual sem ninguém
   precisar ler:
     · PUBLICAÇÃO DO DIÁRIO — âmbar, com filete e fundo. É de fora, é oficial,
       e é a que faz prazo correr.
     · O QUE ALGUÉM ESCREVEU — filete da marca. É gente falando com gente.
     · O RESTO (eventos do sistema) — filete neutro, como sempre foi.

   A COR VEM DOS TOKENS, e os selos deixaram de ter cor escrita à mão no meio
   do JavaScript (#fdf0e3, #a9651a, #e7f0ff, #3b6fd4 estavam soltos ali). Era
   o tipo de cor que ninguém acha quando a paleta muda.

   O filete âmbar é SÓ À ESQUERDA e o fundo é o mais claro da escala: destaque
   que vira bloco colorido cansa o olho em lista longa, e aí ninguém lê
   nenhuma — que é o defeito que estamos consertando, ao contrário.
   ============================================================ */

/* o título de cada parte: a data vira separador de verdade */
.hist-dia{font-size:var(--t-rotulo); font-weight:700; color:var(--marca-texto);
  text-transform:uppercase; letter-spacing:.06em; padding:14px 0 4px;
  display:flex; align-items:center; gap:9px}
.hist-dia::after{content:""; flex:1; height:1px; background:var(--linha)}

/* o filete de cada item diz a natureza dele */
.hist-item{border-left:2px solid var(--linha); transition:background .12s}
.hist-item.de-gente{border-left-color:var(--marca-texto)}
.hist-item.de-diario{border-left:3px solid var(--warn);
  background:var(--atencao-fundo); border-radius:0 8px 8px 0;
  padding-right:10px !important; margin:3px 0}
.hist-item.de-diario .hist-txt{color:var(--ink-1)}

/* os selos: mesma forma, cor por natureza — e nenhuma cor escrita à mão */
.hist-selo{font-size:var(--t-rotulo); border-radius:5px; padding:1px 6px;
  margin-left:6px; vertical-align:1px; font-weight:700; letter-spacing:.03em}
.hist-selo.diario{background:var(--warn); color:var(--papel)}
.hist-selo.drive{background:var(--marca-fundo); color:var(--marca-texto)}
.hist-selo.importado{background:var(--linha-fraca); color:var(--ink-3); font-weight:600; letter-spacing:0}


/* ============================================================
   A FICHA DA LEVA 270 — botões no alto, História de volta no Resumo.

   [stated] Dra. Kamille (18/set/2026): "Perícias e audiências deve virar um
   botão (...) ao lado ali de pasta no drive, antes dos três pontinhos", "as
   anotações (...) podem ficar no botão lá em cima, ao lado de criar tarefa",
   "os telefones (...) está no lugar errado, deve ficar lá nos dados do
   cliente" e, sobre a História, "opção a, e com letra maior e mais escura".

   O QUE ESTE BLOCO GUARDA, e por que cada coisa:

   1. O NÚMERO NO BOTÃO. Botão que esconde conteúdo precisa dizer quanto
      esconde — senão a pessoa clica para descobrir que não havia nada, e
      aprende a não clicar.

   2. O ÂMBAR DA VÉSPERA. O cartão da agenda ficava âmbar quando havia
      compromisso nos próximos 7 dias. Virando janela, esse aviso subiria para
      um botão mudo — e aviso de prazo escondido é o que este sistema já
      decidiu, na leva 267, que não faz.

   3. A HISTÓRIA MAIOR E MAIS ESCURA. Ela volta ao Resumo e é texto para LER,
      não meta-informação: sobe para o corpo (0.9375rem) e para a tinta
      principal, saindo do cinza de apoio em que estava.
   ============================================================ */

/* o contador dentro do botão: número, não bolinha — quantidade se lê */
.fx-bt-n{display:inline-flex; align-items:center; justify-content:center; min-width:19px;
  margin-left:7px; padding:0 5px; border-radius:999px; background:var(--linha-fraca);
  color:var(--ink-2); font-size:var(--t-rotulo); font-weight:700; font-variant-numeric:tabular-nums}
/* `display` de classe vence o `[hidden]` do navegador — sem esta linha a pasta
   sem perícia nenhuma mostrava "Perícias 0", e zero num botão é pior do que
   número nenhum: parece contador quebrado. Visto na tela antes de publicar. */
.fx-bt-n[hidden]{display:none}
.ficha-acoes .btn.fx-bt-alerta{border-color:var(--warn); background:var(--atencao-fundo); color:var(--warn)}
.ficha-acoes .btn.fx-bt-alerta .fx-bt-n{background:var(--warn); color:var(--papel)}

/* o link de ligar, embaixo do campo de telefone na aba Cliente */
.fx-ligar{display:block; margin-top:3px}
/* leva 377: um número só, igual ao da caixa — no computador não repete */
@media (hover:hover) and (pointer:fine){ .fx-ligar-igual{display:none} }

/* as anotações na janela: inteiras, com as quebras de linha preservadas —
   a lição da leva 242, que aqui não pode ser desfeita por um corte de altura */
.anot-modal{white-space:pre-wrap; font-size:var(--t-corpo); color:var(--ink-1); line-height:1.6;
  max-height:52vh; overflow:auto; padding:11px 13px; border:1px solid var(--linha);
  border-radius:9px; background:var(--papel-2)}

/* A HISTÓRIA DO CASO, de volta ao Resumo e legível */
/* A História é texto para LER, e texto de leitura tem largura máxima: com a
   ficha em 1440 (leva 272) a linha passaria de 120 caracteres sem este teto, e
   o olho erra a volta da linha. 90ch é a medida de sempre para leitura
   corrida — o resto da largura fica para as caixas, que não são texto. */
.hist-txt{font-size:var(--t-corpo); color:var(--ink-1); line-height:1.6; max-width:90ch}
#ficha-gestao .fx-tit{font-size:var(--t-corpo)}
#ficha-gestao .hist-item{padding:7px 0 7px 6px}


/* ============================================================
   O RELATÓRIO DO PRAZO FATAL — leva 269 (18/set/2026).

   [stated] Dra. Kamille: "na hora que sair relatório, sair relatório também
   de quem cumpriu no prazo fatal, ou cumpriu D−2, ou o dia seguinte."

   CINCO CAIXAS DE NÚMERO, lado a lado, na ordem da margem que sobrou: com
   folga, D−2, véspera, no dia, depois. Ler da esquerda para a direita é ver a
   margem encurtando — e é por isso que a ordem não é alfabética nem por
   tamanho.

   A COR CARREGA O RECADO e vem do JavaScript (RT_FAIXAS), não daqui. Na leva
   277 o verde e o âmbar saíram: as quatro primeiras caixas são placar e agora
   são tinta neutra (--good nas duas primeiras, --warn nas duas do meio, que
   são preto e cinza-escuro), e só a última — "depois", que é preclusão — leva
   o vermelho. Aqui ficam só a forma e o espaço. A última caixa ganha filete e
   fundo próprios porque é a única que pede providência.

   A LISTA DE PERDIDOS é a parte acionável: nome, pasta, as duas datas e o
   botão de abrir. Até a leva 276 ela emprestava o vinho de pasta arquivada;
   agora usa o --crit, porque com uma cor só no sistema o vermelho é o alarme
   e o preto é o fim. Preclusão é alarme: ainda há o que fazer com ela.

   A TABELA POR PESSOA rola sozinha no celular (o `overflow-x` vem do HTML):
   são sete colunas, e encolher a letra para caber seria desfazer o piso de
   13,5px que a leva 235 estabeleceu.
   ============================================================ */
.rt-fatal{border-top:3px solid var(--crit)}
.rt-fatal-cab{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.rt-fatal-n{font-size:1.25rem; font-weight:700; font-variant-numeric:tabular-nums; color:var(--ink-1)}

.rt-fatal-faixas{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.rt-faixa{border:1px solid var(--linha); border-radius:10px; padding:12px 10px;
  background:var(--papel-2); text-align:center}
.rt-faixa .n{font-size:1.375rem; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2}
.rt-faixa .t{font-size:var(--t-corpo); font-weight:600; color:var(--ink-1); margin-top:2px}
.rt-faixa .hint{font-size:var(--t-mini); margin-top:2px}
.rt-faixa.perdida{border-color:var(--crit); background:var(--papel)}

.rt-fatal-aberto{margin-top:12px; padding:10px 12px; border:1px solid var(--linha);
  border-left:3px solid var(--crit); border-radius:8px; background:var(--atencao-fundo);
  font-size:var(--t-corpo); color:var(--ink-1)}

.rt-perdidos{margin-top:12px; display:flex; flex-direction:column; gap:6px}
.rt-perdido{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:9px 12px; border:1px solid var(--linha); border-left:3px solid var(--crit);
  border-radius:8px; background:var(--papel); font-size:var(--t-corpo)}
.rt-perdido b{color:var(--ink-1)}
.rt-perdido span{color:var(--ink-2); font-size:var(--t-apoio)}

.rt-fatal-tb{width:100%; border-collapse:collapse; margin-top:14px; font-size:var(--t-corpo)}
.rt-fatal-tb th,.rt-fatal-tb td{padding:7px 10px; border-bottom:1px solid var(--linha-fraca);
  text-align:left; white-space:nowrap}
.rt-fatal-tb th{font-size:var(--t-rotulo); font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-3); border-bottom:1px solid var(--linha)}
.rt-fatal-tb th.num,.rt-fatal-tb td.num{text-align:right; font-variant-numeric:tabular-nums}
.rt-fatal-tb tbody tr:last-child td{border-bottom:0}

/* celular: cinco caixas em uma linha viram números ilegíveis — descem para
   duas colunas, e a de "depois" ocupa a linha inteira porque é a que importa */
@media (max-width:840px){
  .rt-fatal-faixas{grid-template-columns:repeat(2,1fr)}
  .rt-faixa.perdida{grid-column:1 / -1}
}


/* ============================================================
   NOTIFICAÇÕES DO INSS (GERID) — prefixo .ge- , leva 311 (20/set/2026).

   [stated] Dra. Kamille: "melhorar o layout da tela".

   O que estava ruim tinha nome: seis cartões de contagem disputando a
   primeira linha, um parágrafo de ajuda repetindo o nome dos botões que
   estão logo abaixo, e a tabela desenhada com estilo escrito à mão em cada
   célula. Agora os cartões são três, o número vem na frente do rótulo (é o
   número que se lê de longe), e o estilo mora aqui.
   ============================================================ */
.ge-topo{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.ge-cards{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.ge-card{flex:1;min-width:150px;text-align:left;border:1px solid var(--grid);background:var(--papel);
  border-radius:12px;padding:12px 15px;cursor:pointer;font-family:inherit;display:flex;
  flex-direction:column;gap:2px;transition:border-color .15s ease, box-shadow .15s ease}
.ge-card:hover{border-color:var(--c)}
.ge-card.on{border-color:var(--c);box-shadow:inset 0 0 0 1px var(--c)}
.ge-card-n{font-size:1.5rem;font-weight:800;color:var(--c);line-height:1.1;font-variant-numeric:tabular-nums}
.ge-card-t{font-size:0.9062rem;color:var(--ink-2)}
.ge-sub{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
.ge-sub button{border:1px solid var(--grid);background:var(--papel);border-radius:999px;
  padding:4px 13px;font-family:inherit;font-size:0.9062rem;font-weight:600;color:var(--ink-2);cursor:pointer}
.ge-sub button.on{background:var(--brand-escuro);border-color:var(--brand-escuro);color:var(--papel)}
.ge-sub button b{font-weight:800;margin-left:3px}
.ge-busca{width:100%;font-size:0.9375rem;border:1px solid var(--grid);border-radius:10px;
  padding:9px 12px;margin-bottom:12px;font-family:inherit}
.ge-busca:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--marca-fundo)}
/* O teor do requerimento abre embaixo da linha (leva 312): quem lê uma
   exigência quer o cliente e o prazo à vista enquanto lê. Fonte serifada e
   linha larga porque é texto para LER, não rótulo para varrer. */
.ge-teor{white-space:pre-wrap;font-size:0.9375rem;line-height:1.55;color:var(--ink-1);
  background:var(--papel-2);border:1px solid var(--grid);border-left:3px solid var(--brand);
  border-radius:10px;padding:11px 14px;max-height:320px;overflow:auto}

/* A coluna "o que dá para fazer" quebra por significado, não por sobra de
   pixel (leva 314): em cima o que é documento, embaixo as três de ir a algum
   lugar — e essas ficam lado a lado, sempre. A largura é a delas: "Ver no
   GERID / Criar tarefa / Abrir pasta" é o caso mais largo, ~364px. */
.ge-acoes{display:flex;flex-direction:column;gap:6px;width:380px;max-width:380px}
.ge-acoes-doc{display:flex;gap:6px;flex-wrap:wrap}
.ge-acoes-ir{display:flex;gap:6px;flex-wrap:nowrap}

/* "Novo" = ainda não foi dado por visto (leva 321). Fica junto da situação
   porque é lá que se olha para decidir se mexe ou passa adiante. */
.ge-novo{display:inline-block;margin-left:6px;font-size:0.8438rem;font-weight:800;
  background:var(--marca-fundo);color:var(--marca-texto);border-radius:5px;padding:1px 6px;vertical-align:1px}
.ge-sub-corte{width:1px;align-self:stretch;background:var(--grid);margin:0 4px}

/* ============================================================
   UMA LINHA POR PASSO DA SEQUENCIA — leva 328 (21/set/2026)

   A janela "Aplicar sequência de tarefas" passou a ter um "quem faz" por
   passo. Três colunas: o número, o que é, e quem faz. A coluna de quem faz
   tem largura fixa porque é a mesma pergunta repetida — coluna que dança de
   linha para linha faz o olho reler o cabeçalho a cada vez.
   ============================================================ */
.pb-linha{
  display:grid; grid-template-columns:22px minmax(0,1fr) 220px; gap:10px;
  align-items:center; padding:7px 0; border-bottom:1px solid var(--grid);
  font-size:0.9062rem;
}
.pb-linha:last-child{ border-bottom:none }
.pb-n{ color:var(--ink-3) }
.pb-linha select{ width:100% }
@media (max-width:700px){
  .pb-linha{ grid-template-columns:22px minmax(0,1fr); }
  .pb-linha select{ grid-column:2 }
}

/* ============================================================
   ABA PÓS-VENDA DA PASTA — leva 369 (27/set/2026). Tela em pos-venda.js.

   [stated] Dra. Kamille, sobre a primeira maquete: "Eu não gosto de
   botões. Dois botões, embaixo tem um. Tamanhos diferentes." Daí as três
   regras deste bloco: situação marcada é LINHA de largura inteira (não
   pílula que quebra torta); escolha entre poucas opções é faixa dividida em
   partes IGUAIS (grid, não inline); e todo par de botões fica lado a lado
   com a mesma largura.
   ============================================================ */
.pv-topo{display:flex; gap:14px; align-items:center; border:1px solid var(--linha); border-left:3px solid var(--brand);
  border-radius:10px; background:var(--papel); padding:12px 16px; margin:12px 0 14px; font-size:1.0312rem}
.pv-rot{font-size:var(--t-micro); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-3); font-weight:700}
.pv-grade{display:grid; grid-template-columns:minmax(0,1.45fr) minmax(0,1fr); gap:14px; align-items:start}
@media(max-width:900px){ .pv-grade{grid-template-columns:1fr} }
.pv-card{background:var(--papel); border:1px solid var(--linha); border-radius:12px; padding:16px 18px}
.pv-cab{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-bottom:12px; flex-wrap:wrap}
.pv-lnk{font-size:0.9062rem; font-weight:600; color:var(--ink-1); text-decoration:underline; cursor:pointer;
  background:none; border:0; padding:0; font-family:inherit}
.pv-nota{font-size:0.8438rem; color:var(--ink-3); margin-top:8px; line-height:1.45}
.pv-sub{font-size:0.8438rem; color:var(--ink-3)}

/* situações marcadas: linhas iguais, com filete */
.pv-sits{display:flex; flex-direction:column; gap:8px}
.pv-sit{display:grid; grid-template-columns:4px 1fr; gap:12px; padding:11px 12px; border:1px solid var(--linha);
  border-radius:10px; background:var(--papel-2)}
.pv-sit > i{background:var(--brand); border-radius:4px}
.pv-sit b{display:block; font-size:0.9688rem}
.pv-sit span{display:block; font-size:0.9062rem; color:var(--ink-2); margin-top:2px; line-height:1.45}
.pv-vazio{font-size:0.9375rem; color:var(--ink-3); padding:4px 0}

/* editar situações: lista de marcar, todas as linhas do mesmo tamanho */
.pv-marca{display:flex; flex-direction:column; border:1px solid var(--linha); border-radius:10px; overflow:hidden}
.pv-marca label{display:flex; gap:12px; align-items:center; padding:11px 12px; border-top:1px solid var(--linha-fraca);
  font-size:0.9375rem; cursor:pointer}
.pv-marca label:first-child{border-top:0}
.pv-marca label.on{background:var(--marca-fundo); font-weight:600}
.pv-marca input{width:18px; height:18px; margin:0; accent-color:var(--brand); flex:0 0 18px}
.pv-marca small{margin-left:auto; font-size:0.8438rem; color:var(--ink-3); font-weight:500; white-space:nowrap}

/* par de botões e faixas de escolha: partes iguais */
.pv-par{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:12px}
.pv-par .btn{justify-content:center; width:100%}
/* minmax(0,1fr): sem o zero, a parte mais comprida empurra a faixa para
   fora da tela no celular; com ele, o texto quebra dentro da parte. */
.pv-faixa{display:grid; grid-auto-columns:minmax(0,1fr); grid-auto-flow:column; border:1px solid var(--linha); border-radius:9px; overflow:hidden}
.pv-faixa button{border:0; border-left:1px solid var(--linha); background:var(--papel); color:var(--ink-2); padding:8px 4px;
  font-size:0.9062rem; font-family:inherit; cursor:pointer; min-height:38px; line-height:1.2; overflow-wrap:anywhere}
.pv-faixa button:first-child{border-left:0}
.pv-faixa button.on{background:var(--brand); color:var(--papel); font-weight:600}

/* contato de confiança e melhor horário */
.pv-bloco{border-top:1px solid var(--linha-fraca); margin-top:14px; padding-top:12px; font-size:0.9375rem; line-height:1.5}
.pv-linha-ed{display:grid; grid-template-columns:1fr auto; gap:8px; align-items:start}
.pv-form{display:flex; flex-direction:column; gap:10px}
.pv-form label.pv-rot{display:block; margin-bottom:4px}
.pv-form input[type=text], .pv-form input[type=tel], .pv-form input[type=date], .pv-form input[type=time],
.pv-form input:not([type]), .pv-form textarea{width:100%; box-sizing:border-box; border:1px solid var(--linha);
  border-radius:8px; padding:9px 11px; font-size:0.9375rem; font-family:inherit; background:var(--papel)}
.pv-form textarea{min-height:76px; resize:vertical}
.pv-duas{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.pv-check{display:flex; gap:10px; align-items:flex-start; font-size:0.9062rem; line-height:1.4; cursor:pointer}
.pv-check input{width:18px; height:18px; margin:1px 0 0; accent-color:var(--brand); flex:0 0 18px}
.pv-erro{color:var(--crit); font-size:0.9062rem}

/* histórico de contatos */
.pv-reg{border:1px solid var(--linha); border-radius:10px; background:var(--papel-2); padding:14px; margin-bottom:12px}
.pv-tl{list-style:none; margin:0; padding:0}
.pv-tl li{display:grid; grid-template-columns:94px 26px minmax(0,1fr) auto; gap:10px; padding:11px 0;
  border-top:1px solid var(--linha-fraca); align-items:start; font-size:0.9375rem}
.pv-tl li:first-child{border-top:0}
.pv-tl .pv-dt{color:var(--ink-3); font-size:0.8438rem; padding-top:2px; line-height:1.3}
.pv-tl .pv-ic{width:24px; height:24px; border-radius:50%; background:var(--marca-fundo); color:var(--marca-texto);
  display:flex; align-items:center; justify-content:center; font-size:0.8438rem}
.pv-tl .pv-txt{color:var(--ink-2); font-size:0.9062rem; margin-top:2px; line-height:1.45; white-space:pre-wrap}
.pv-tl .pv-quem{color:var(--ink-3); font-size:0.8438rem; white-space:nowrap; text-align:right}
.pv-tag{font-size:0.8438rem; border-radius:4px; padding:0 6px; background:var(--linha-fraca); color:var(--ink-2);
  font-weight:600; margin-left:6px}
.pv-tag.pend{color:var(--crit)}
.pv-tag.ok{color:var(--verde)}
@media(max-width:640px){
  .pv-tl li{grid-template-columns:26px minmax(0,1fr)}
  .pv-tl .pv-dt, .pv-tl .pv-quem{grid-column:2; text-align:left}
  .pv-duas{grid-template-columns:1fr}
}

/* a linha "Como falar" no alto da pasta, logo abaixo de "Onde este caso está" */
.pv-aviso{display:flex; gap:10px; align-items:baseline; flex-wrap:wrap; margin:-2px 0 10px; padding:0 2px;
  font-size:0.9375rem; color:var(--ink-2)}
.pv-aviso b{color:var(--ink-1)}

/* O cartão "Enviar mensagem" (leva 370): WhatsApp e SMS lado a lado, em
   partes iguais, cada um com UM botão da largura do quadro — [stated] "dois
   botões, embaixo tem um, tamanhos diferentes" não volta. */
.pv-campo{width:100%; box-sizing:border-box; border:1px solid var(--linha); border-radius:8px; padding:9px 11px;
  font-size:0.9375rem; font-family:inherit; background:var(--papel-2)}
.pv-avisos{margin-top:10px; padding:10px 12px; background:var(--marca-fundo); border-radius:8px; font-size:0.9062rem;
  line-height:1.5; color:var(--ink-1); display:flex; flex-direction:column; gap:4px}
.pv-opcoes{display:flex; flex-direction:column; gap:6px; margin-top:10px}
.pv-canais{display:grid; grid-template-columns:minmax(0,1fr); gap:12px; margin-top:10px}
.pv-canal{display:flex; flex-direction:column}
.pv-canal-topo{display:flex; justify-content:space-between; align-items:baseline; gap:8px; margin-bottom:8px}
.pv-msg{flex:1; min-height:110px; border:1px solid var(--linha); border-radius:10px; padding:11px 13px; background:var(--papel);
  font-size:0.9688rem; line-height:1.5; outline:none; overflow-wrap:anywhere}
.pv-msg:focus{border-color:var(--brand)}
#pv-m-sms{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:0.9062rem}
.pv-var{background:var(--marca-fundo); color:var(--marca-texto); border-radius:4px; padding:0 3px; font-weight:600}
.pv-falta{background:var(--linha-fraca); color:var(--crit); border-radius:4px; padding:0 3px; font-weight:600}
.pv-canal .btn{width:100%; justify-content:center; margin-top:10px}
/* uma linha só, nos dois quadros: rodapé que quebra em duas linhas num lado
   e não no outro desalinha os dois botões */
.pv-pe{font-size:0.8438rem; color:var(--ink-3); margin-top:8px; text-align:center; min-height:1.3em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.pv-ok{color:var(--verde)}
.pv-passou{color:var(--crit)}
.pv-topo .btn{flex:0 0 auto}
.pv-topo .pv-rot{white-space:nowrap}

/* A lista de mensagens que abre no clique (leva 373) */
.pv-sel{position:relative}
.pv-sel-bt{width:100%; display:flex; justify-content:space-between; align-items:center; gap:8px; box-sizing:border-box;
  border:1px solid var(--linha); border-radius:8px; padding:9px 11px; font-size:0.9375rem; font-family:inherit;
  background:var(--papel-2); color:var(--ink-1); cursor:pointer; text-align:left; min-height:40px}
.pv-sel-bt:hover{border-color:var(--ink-3)}
.pv-sel-lista{position:absolute; left:0; right:0; top:calc(100% + 4px); z-index:20; background:var(--papel);
  border:1px solid var(--linha); border-radius:10px; box-shadow:0 12px 32px rgba(11,18,32,.14); padding:8px;
  max-height:360px; overflow:auto}
.pv-sel-lista .pv-campo{margin-bottom:6px}
.pv-sel-i{display:flex; flex-direction:column; gap:1px; width:100%; text-align:left; border:0; background:none;
  padding:8px 10px; border-radius:8px; cursor:pointer; font-family:inherit; color:var(--ink-1)}
.pv-sel-i b{font-size:0.9375rem; font-weight:600}
.pv-sel-i small{font-size:0.8438rem; color:var(--ink-3)}
.pv-sel-i:hover, .pv-sel-i:focus, .pv-sel-i.on{background:var(--marca-fundo); outline:none}


/* ============ Integrações em botões — leva 398 ============
   Um botão por integração; clicar abre só aquela (integracoes.js). */
.int-grade{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:12px}
.int-botao{display:flex; align-items:flex-start; gap:12px; text-align:left; width:100%;
  padding:14px 16px; border:1px solid var(--grid); border-radius:13px; background:var(--papel,#fff);
  color:var(--ink-1); font:inherit; cursor:pointer; transition:border-color .15s, box-shadow .15s}
.int-botao:hover, .int-botao:focus-visible{border-color:var(--marca-texto); box-shadow:0 2px 10px rgba(19,26,36,.08); outline:none}
.int-botao[hidden]{display:none}
.int-ic{width:38px; height:38px; flex:none; border-radius:10px; background:var(--marca-fundo);
  display:flex; align-items:center; justify-content:center; font-size:1.1875rem}
.int-txt{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px}
.int-txt b{font-size:0.9688rem}
.int-txt > span{font-size:0.9062rem; color:var(--ink-2); line-height:1.35}
.int-txt > .int-sit{margin-top:6px; align-self:flex-start}
.int-grupo{margin:26px 0 10px; font-size:0.8438rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-2)}

/* ============================================================
   A FICHA VIRA TELA — leva 260 (17/set/2026).

   [stated] Dra. Kamille: "em vez de um pop-up, abrisse uma tela maior (...)
   a qualquer momento eu vou poder sair rápido para voltar para a tela
   principal. (...) refazer o design, como a gente refez o design de cores
   da rotina, para deixar padronizado."

   A camada continua sendo `#modal` (ver abreFicha em views2.js); só a classe
   `ficha-cheia` muda o desenho. Tudo aqui é escopado por ela: as outras
   janelas do sistema, que também usam `.modal-bg` e `.modal`, não mudam.

   O PADRÃO É O DA TELA DE WORKFLOWS: fundo da tela, papel branco com
   filete, texto em tinta, uma cor de ação (navy), e cor de estado só em
   pílula clara — nunca em bloco sólido. Sem gradiente, sem sombra de janela
   flutuante, sem borda tracejada fora do "ainda não vinculado".
   ============================================================ */
#modal.ficha-cheia{
  left:238px;                    /* o menu da esquerda continua à vista */
  background:var(--tela);
  padding:0; display:block; overflow:auto;
}
/* ============================================================
   A FICHA USA A TELA QUE EXISTE — leva 272 (18/set/2026)

   [stated] Dra. Kamille: "a tela dos processos que abre acho que pode ficar
   mais larga".

   MEDIDO NA TELA DELA antes de escolher o número: janela de 1704px, menu de
   238px, sobram 1466px — e a ficha usava 1180. Eram 286px de papel em branco
   nas laterais, em toda pasta aberta. Num monitor de 1920 seriam 502px.

   O 1180 não foi escolha ruim: era o certo enquanto a ficha era uma coluna de
   texto. Desde a leva 265 ela é uma GRADE DE DUAS COLUNAS, e cada coluna vale
   uma caixa — alargar não estica linha de texto, dá espaço às caixas. As
   colunas saem de 546px para ~656px na tela dela.

   1440 E NÃO "O QUE COUBER": acima disso a História, que é texto corrido desde
   a leva 270, passaria de 120 caracteres por linha. Linha longa demais faz o
   olho perder a volta — é o defeito oposto, e igualmente caro. O teto do texto
   de leitura está logo abaixo, em `.hist-txt`.
   ============================================================ */
#modal.ficha-cheia > .modal{
  max-width:1440px; width:auto; margin:0 auto; min-height:100%;
  border:0; border-left:1px solid var(--linha); border-right:1px solid var(--linha);
  border-radius:0; box-shadow:none; padding:0 36px 48px;
  background:var(--papel);
}
#modal.ficha-cheia > .modal > .fio-marca{display:none}
body.ficha-aberta{overflow:hidden}

/* o cabeçalho gruda na borda de cima da TELA, não 20px acima dela */
#modal.ficha-cheia .ficha-topo{top:0; margin-top:0; padding-top:0; background:var(--papel)}
#modal.ficha-cheia .ficha-topo.rolou{box-shadow:0 8px 14px -12px rgba(11,18,32,.28)}
#modal.ficha-cheia .ficha-tabs{background:var(--papel)}
#modal.ficha-cheia .modal h3{font-size:1.5rem; letter-spacing:-.015em}

/* a barra de saída: sempre à vista, mesmo com o cabeçalho encolhido */
.ficha-volta{display:flex; align-items:center; gap:12px; padding:14px 0 10px;
  margin-bottom:10px; border-bottom:1px solid var(--linha)}
.ficha-volta-bt{display:inline-flex; align-items:center; background:none; border:0; padding:4px 0;
  font-family:inherit; font-size:0.9375rem; font-weight:600; color:var(--marca-texto); cursor:pointer}
.ficha-volta-bt:hover{text-decoration:underline; text-underline-offset:3px}
.ficha-volta-dica{font-size:0.8438rem; color:var(--ink-3)}
.ficha-volta-dica kbd{font-family:inherit; font-size:0.8438rem; font-weight:600; color:var(--ink-2);
  border:1px solid var(--linha); border-bottom-width:2px; border-radius:5px; padding:0 5px; background:var(--papel-2)}
#modal.ficha-cheia .ficha-topo.rolou .ficha-volta{padding:10px 0 8px; margin-bottom:6px}

/* ações do alto: um primário navy, o resto branco com filete — como em Workflows */
#modal.ficha-cheia .ficha-topo .btn.sec{color:var(--ink-1); border-color:var(--linha)}
#modal.ficha-cheia .ficha-topo .btn.sec:hover{border-color:var(--ink-3)}

/* O estado da tarefa continua dizendo pendente / atrasada / feita, e continua
   sendo o botão de concluir — mas como pílula clara com anel, no lugar do
   quadrado sólido com brilho que gritava mais que o nome da tarefa. */
#modal.ficha-cheia .tk-done{width:20px; height:20px; border-radius:50%; margin-top:3px;
  box-shadow:none; border:2px solid var(--linha); background:var(--papel)}
#modal.ficha-cheia .tk-done.pend{border-color:var(--warn); background:var(--atencao-fundo)}
#modal.ficha-cheia .tk-done.atras{border-color:var(--crit); background:var(--crit)}
#modal.ficha-cheia .tk-done.feito{border-color:var(--good); background:var(--good); color:#fff}
#modal.ficha-cheia .tk-done.pend:hover{background:var(--warn); color:#fff; box-shadow:none}
#modal.ficha-cheia .tk-done.atras:hover{background:var(--crit); color:#fff; box-shadow:none; filter:brightness(.9)}
#modal.ficha-cheia .tk-done.feito:hover{background:var(--good); filter:brightness(.9)}
#modal.ficha-cheia .tk-menu{background:var(--papel); border-color:var(--linha); color:var(--ink-2)}
#modal.ficha-cheia .tk-menu:hover{background:var(--marca-fundo); border-color:var(--linha); color:var(--marca-texto)}

/* celular e tela estreita: o menu vira faixa de cima, a ficha ocupa tudo */
@media(max-width:840px){
  #modal.ficha-cheia{left:0}
  #modal.ficha-cheia > .modal{padding:0 16px 32px; border:0}
  .ficha-volta-dica{display:none}
}
/* o cartão de perícias segue o papel da tela, sem segundo tom de fundo */
#modal.ficha-cheia .card{background:var(--papel)}