/* ==========================================================================
   Comercial Mendes e Lima — folha de estilo do sistema.

   ARQUIVO MONTADO. Nao edite os blocos do sistema de design a mao: eles vem
   do projeto "Comercial Mendes e Lima" no Claude Design (claude.ai/design) e
   sao remontados por design/montar_estilo.py. O que e so do
   app fica no ultimo bloco ("Camada do sistema"), e e ali que se mexe.

   Paleta oficial: navy #154768, navy escuro #0F2E46, dourado #C8852A e
   creme #F5E6C8. O azul #013957 dos PNGs antigos do logo esta reprovado.
   Fontes locais em /static/fontes (Jost, Public Sans, IBM Plex Mono — SIL
   Open Font License 1.1). Nada e carregado do Google.
   ========================================================================== */

/* ---------- fontes locais ---------- */
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fontes/ibm-plex-mono-400-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url("fontes/ibm-plex-mono-400-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fontes/ibm-plex-mono-500-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url("fontes/ibm-plex-mono-500-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
/* 09/10/2026: as fontes da identidade do Joao (Agendum/Monettare), servidas
   DAQUI como ele faz — o programa nao busca nada fora. Jost e Public Sans
   continuam declaradas abaixo so para nao quebrar o que ainda as cite. */
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url("fontes/familjen-grotesk-400-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Familjen Grotesk";font-style:normal;font-weight:400 700;font-display:swap;src:url("fontes/familjen-grotesk-400-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("fontes/instrument-sans-400-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Instrument Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("fontes/instrument-sans-400-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Jost";font-style:normal;font-weight:400 700;font-display:swap;src:url("fontes/jost-400-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Jost";font-style:normal;font-weight:400 700;font-display:swap;src:url("fontes/jost-400-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("fontes/public-sans-400-700-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Public Sans";font-style:normal;font-weight:400 700;font-display:swap;src:url("fontes/public-sans-400-700-latin.woff2") format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ========== sistema de design: tokens/cores.css ========== */
/* Cores — rampas da marca, neutros quentes e semânticas.
   Todo par fundo/texto usado em texto corrido passa de 4,5:1. */
:root{
  /* Navy da marca */
  --navy-900:#081E2E;--navy-800:#0F2E46;--navy-700:#154768;--navy-600:#1D5580;--navy-500:#2A6B9E;
  --navy-300:#8FB4CE;--navy-200:#BED3E2;--navy-100:#DCE8F0;--navy-50:#EFF4F8;
  /* Dourado da marca (acento, nunca fundo de texto pequeno) */
  --ouro-700:#7E5312;--ouro-600:#A06819;--ouro-500:#C8852A;--ouro-300:#E2B671;--ouro-100:#F5E6C8;--ouro-50:#FBF5E8;
  --creme:#F5E6C8;
  /* Neutros quentes */
  --tinta:#231C14;--tinta-2:#3A342C;--tinta-3:#554C42;--apagado:#6B6256;--apagado-2:#8A8078;
  --linha:#E7E1D8;--linha-2:#D7D0C3;--linha-3:#C2BAAB;
  --fundo:#F5F3EF;--superficie:#FFFFFF;--superficie-2:#FBFAF7;--superficie-3:#F1EEE8;
  /* Semânticas: fundo claro, borda, tinta (texto) e sólido (preenchimento) */
  --erro-fundo:#FDF1EF;--erro-borda:#F1C6BF;--erro-tinta:#9C1C13;--erro:#C0271B;
  --atencao-fundo:#FDF5E4;--atencao-borda:#EBD5A0;--atencao-tinta:#84560A;--atencao:#AE720F;
  --ok-fundo:#EEF6F0;--ok-borda:#BCDBC6;--ok-tinta:#0E6739;--ok:#157F48;
  --info-fundo:#EFF4F8;--info-borda:#C4D8E5;--info-tinta:#154768;--info:#1D5580;
  /* Papéis (use estes nos componentes, não as rampas) */
  --primaria:var(--navy-700);--primaria-forte:var(--navy-800);--primaria-clara:var(--navy-600);
  --primaria-tenue:var(--navy-50);--primaria-tenue-borda:var(--navy-100);
  --acento:var(--ouro-500);--acento-tinta:var(--ouro-700);--acento-tenue:var(--ouro-50);
  --texto:var(--tinta);--texto-2:var(--tinta-2);--texto-3:var(--tinta-3);--texto-apagado:var(--apagado);
  --texto-sobre-escuro:#FFFFFF;--texto-sobre-escuro-2:#C7D6E1;--texto-sobre-escuro-3:#8AA3B6;
  --menu-fundo:var(--navy-800);--menu-fundo-2:var(--navy-900);--menu-ativo:#FFFFFF1A;--menu-hover:#FFFFFF0D;
  --menu-linha:#FFFFFF1F;
  /* Aliases herdados: o app atual chama o navy de "teal". Mantidos para migração. */
  --teal:var(--navy-700);--teal-d:var(--navy-800);--teal-l:var(--navy-600);--teal-bg:var(--creme);
  --ouro:var(--ouro-500);--ouro-claro:var(--ouro-100);
  --ink:var(--tinta);--ink-2:var(--tinta-2);--mut:var(--apagado);--mut-2:var(--apagado-2);
  --bg:var(--fundo);--card:var(--superficie);--nav:var(--menu-fundo);--nav-2:var(--navy-700);
  /* 09/10/2026, a regra 6 do manual do Joao, que ele marca como
     inegociavel: "verde e vermelho sao CREDITO e DEBITO, nao sucesso e
     erro". Num sistema que e metade dinheiro, usar o mesmo verde para
     "enviado com sucesso" e para "entrou em caixa" ensina o olho a ler
     errado — e e o olho dela, dezenas de vezes por dia.
     Tons proprios, mais escuros que os de estado, porque numero colorido
     compete com o texto ao lado. */
  --debito:#9C1C13;--credito:#0E6739;
  --red:var(--erro);--red-bg:var(--erro-fundo);--amber:var(--atencao);--amber-bg:var(--atencao-fundo);
  --green:var(--ok);--green-bg:var(--ok-fundo);--blue:var(--info);--blue-bg:var(--info-fundo);
}

/* ========== sistema de design: tokens/tipografia.css ========== */
/* Tipografia — Gotham não tem licença web. A substituta é a Jost (geométrica,
   mesmo desenho de "o" e "a") para títulos e números; o corpo e as tabelas usam
   a Public Sans, que aguenta 12–13px sem fechar os contadores. Ambas caem para
   a pilha do sistema se a rede falhar (o sistema roda em janela de aplicativo). */
:root{
  --fonte-titulo:"Jost","Century Gothic","Segoe UI",system-ui,sans-serif; /* @kind font */
  --fonte-corpo:"Public Sans","Segoe UI",system-ui,-apple-system,sans-serif; /* @kind font */
  --fonte-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace; /* @kind font */
  /* Escala densa: 6 degraus de interface + 3 de dado */
  --fs-micro:10.5px;--fs-rotulo:11px;--fs-nota:11.5px;--fs-apoio:12px;--fs-dado:12.5px;
  --fs-corpo:13px;--fs-corpo-g:14px;--fs-titulo-3:15px;--fs-titulo-2:17px;--fs-titulo-1:21px;
  --fs-numero:26px;--fs-numero-g:34px;
  /* 08/10/2026: o titulo de tela ganhou um degrau proprio, acima do
     --fs-titulo-1 que as secoes usam. O cabecalho de pagina do Joao tem o
     titulo bem maior que o resto; era o que faltava para a tela ter hierarquia
     a primeira vista. */
  --fs-titulo-0:30px;
  --lh-justa:1.2; /* @kind font */
  --lh-media:1.45; /* @kind font */
  --lh-solta:1.6; /* @kind font */
  --peso-normal:400; /* @kind font */
  --peso-medio:500; /* @kind font */
  --peso-forte:600; /* @kind font */
  --peso-maximo:700; /* @kind font */
  --tr-titulo:-.02em; /* @kind font */
  --tr-rotulo:.10em; /* @kind font */ /* 09/10: o --mo-track-rotulo do Joao */
  --tr-numero:-.03em; /* @kind font */
  /* Composições prontas */
  --fonte-rotulo:var(--peso-forte) var(--fs-dado)/1.2 var(--fonte-corpo); /* @kind font */
  --fonte-cabecalho-tabela:var(--peso-forte) var(--fs-rotulo)/1.2 var(--fonte-corpo); /* @kind font */
}
.t-titulo-tela{font:var(--peso-forte) var(--fs-titulo-1)/1.15 var(--fonte-titulo);letter-spacing:var(--tr-titulo);color:var(--texto)}
.t-titulo-gaveta{font:var(--peso-forte) var(--fs-titulo-2)/1.2 var(--fonte-titulo);letter-spacing:var(--tr-titulo);color:var(--texto)}
.t-titulo-cartao{font:var(--peso-forte) var(--fs-corpo-g)/1.25 var(--fonte-titulo);letter-spacing:-.01em;color:var(--texto)}
.t-rotulo{font:var(--peso-forte) var(--fs-rotulo)/1.2 var(--fonte-corpo);text-transform:uppercase;letter-spacing:var(--tr-rotulo);color:var(--texto-apagado)}
.t-apoio{font:var(--peso-normal) var(--fs-apoio)/var(--lh-media) var(--fonte-corpo);color:var(--texto-apagado)}
.t-numero{font:var(--peso-maximo) var(--fs-numero)/1.05 var(--fonte-titulo);letter-spacing:var(--tr-numero);font-variant-numeric:tabular-nums;color:var(--texto)}
.num{font-variant-numeric:tabular-nums}
/* nowrap: na tela dela, no celular, "PRO-2026-0007" quebrou em TRES
   linhas dentro da coluna. Numero de documento, CNPJ e codigo lidos pela
   metade deixam de ser identificador. */
code.inline,.mono{font-family:var(--fonte-mono);font-size:var(--fs-apoio);
  white-space:nowrap}
code.inline{background:var(--superficie-3);border:1px solid var(--linha);padding:1px 5px;border-radius:var(--r-xs);word-break:break-all}

/* ========== sistema de design: tokens/forma.css ========== */
/* Forma — espaço em grade de 4px, raios, sombras quentes, foco, movimento e densidade.
   A densidade é token: o sistema fica aberto o dia inteiro e a altura de linha
   da tabela é o que decide quantos registros cabem sem rolagem. */
:root{
  --e-0:0; /* @kind spacing */
  --e-1:4px;--e-2:8px;--e-3:12px;--e-4:16px;--e-5:20px;--e-6:24px;--e-7:32px;--e-8:40px;--e-9:56px;
  /* O raio do Joao: 20px no cartao (--mo-raio) e 10px no pequeno
     (--mo-raio-s). --r-md e o que o cartao usa aqui, entao e ele que
     sobe. Canto de 10px com a sombra nova fica estranho: o olho le a
     sombra como profundidade e o canto duro desmente. */
  --r-xs:4px;--r-sm:10px;--r:12px;--r-md:20px;--r-lg:24px;--r-xl:28px;--r-pill:999px;
  /* 09/10/2026: a sombra do Joao, do tokens.css do Monettare. A formula
     dele e `0 14px 34px -26px` — 34px de desfoque com SPREAD NEGATIVO de
     26, o que encolhe a sombra e a empurra para baixo do cartao. O cartao
     levanta sem sujar o fundo em volta.

     Nao e a do Afere (`0 8px 24px` a 8%), que eu ia copiar: aquela
     espalha um halo cinza grande. A diferenca entre cartao COM sombra e
     cartao que FLUTUA esta no spread, nao no desfoque.

     A antiga tinha 3px de desfoque a 5%: invisivel. */
  --sh-1:0 1px 2px rgba(35,28,20,.04),0 14px 34px -26px rgba(35,28,20,.40);
  --sh-2:0 1px 2px rgba(35,28,20,.06),0 22px 48px -30px rgba(35,28,20,.52);
  --sh-3:0 8px 18px rgba(35,28,20,.09),0 24px 48px rgba(35,28,20,.14);
  --sh-interna:inset 0 1px 2px rgba(35,28,20,.05); /* @kind shadow */
  --anel:2px solid var(--navy-600); /* @kind other */
  --anel-deslocamento:2px; /* @kind spacing */
  --anel-suave:0 0 0 3px rgba(29,85,128,.18); /* @kind shadow */
  --mov-rapido:.12s ease-out; /* @kind other */
  --mov:.2s ease-out; /* @kind other */
  --mov-gaveta:.24s ease-in-out; /* @kind other */
  /* Densidade (padrão = confortável para uso contínuo) */
  --alt-controle:32px;--alt-controle-sm:26px;--alt-controle-lg:38px;
  --alt-linha:34px;--pad-celula:7px 12px;--pad-cartao:16px;--pad-cartao-cab:12px 16px;
  --largura-menu:232px; /* @kind spacing */
  --largura-menu-estreita:60px; /* @kind spacing */
  --largura-gaveta:min(680px,94vw); /* @kind spacing */
  --largura-texto:72ch; /* @kind other */
  --z-conteudo:1; /* @kind other */
  --z-fixo:10; /* @kind other */
  --z-gaveta:50; /* @kind other */
  --z-modal:60; /* @kind other */
  --z-toast:80; /* @kind other */
}
:root[data-densidade="compacta"]{--min-cartao:200px;--alt-controle:28px;--alt-controle-sm:24px;--alt-linha:28px;--pad-celula:4px 10px;--pad-cartao:12px;--pad-cartao-cab:9px 12px}
@media (prefers-reduced-motion:reduce){:root{--mov-rapido:0s; /* @kind other */
--mov:0s; /* @kind other */
--mov-gaveta:0s /* @kind other */}}

/* ========== sistema de design: css/base.css ========== */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{font:var(--peso-normal) var(--fs-corpo-g)/var(--lh-media) var(--fonte-corpo);color:var(--texto);background:var(--fundo);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4{font-family:var(--fonte-titulo);font-weight:var(--peso-forte);letter-spacing:var(--tr-titulo);line-height:1.2}
button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0}
a{color:var(--primaria);text-decoration:none;text-underline-offset:3px}
a:hover{color:var(--primaria-forte);text-decoration:underline}
a:visited{color:var(--navy-700)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:var(--anel);outline-offset:var(--anel-deslocamento);border-radius:var(--r-xs)}
b,strong{font-weight:var(--peso-forte)}
small{font-size:var(--fs-apoio)}
hr{border:0;border-top:1px solid var(--linha)}
::selection{background:var(--creme);color:var(--navy-800)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--linha-2);border-radius:var(--r-pill);border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:var(--linha-3);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}
[hidden]{display:none!important}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.grid{display:grid;gap:var(--e-4)}
.g2{grid-template-columns:repeat(auto-fit,minmax(340px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
/* 09/10/2026: a largura minima virou token. O NUMERO do cartao nao segue a
   escala de letra — ele e limitado pela largura do cartao (`13cqi`, para
   nao vazar). Num monitor de 1920 cabiam OITO cartoes numa linha, de 216px
   cada, e o numero ficava preso em ~28px por mais que o token dissesse 48.
   Com a letra maior o cartao tem de ser mais largo tambem: seis cartoes de
   292px leem melhor que oito de 216px, e o numero dobra de tamanho. */
.g4{grid-template-columns:repeat(auto-fit,minmax(var(--min-cartao,212px),1fr))}
.pilha{display:flex;flex-direction:column;gap:var(--e-2)}
.linha-acoes{display:flex;gap:var(--e-2);flex-wrap:wrap;align-items:center}
.empurra{margin-left:auto}

/* ========== sistema de design: css/shell.css ========== */
/* Estrutura: menu lateral fixo + área de conteúdo rolável. */
.app{display:grid;grid-template-columns:var(--largura-menu) 1fr;height:100vh;background:var(--fundo)}
.menu{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--menu-fundo) 0%,var(--menu-fundo-2) 100%);color:var(--texto-sobre-escuro-2);overflow-y:auto;border-right:1px solid var(--navy-900)}
.menu-marca{display:flex;align-items:center;gap:var(--e-3);padding:var(--e-4) var(--e-4) var(--e-3);border-bottom:1px solid var(--menu-linha)}
.menu-marca img{width:26px;height:26px;object-fit:contain;flex-shrink:0}
.menu-marca b{display:block;font-family:var(--fonte-titulo);font-size:var(--fs-corpo-g);font-weight:var(--peso-forte);color:#fff;letter-spacing:-.01em}
.menu-marca span{display:block;font-size:var(--fs-rotulo);color:var(--texto-sobre-escuro-3);text-transform:uppercase;letter-spacing:var(--tr-rotulo)}
.menu-grupo{padding:var(--e-4) var(--e-4) var(--e-1);font:var(--peso-forte) var(--fs-micro)/1.2 var(--fonte-corpo);text-transform:uppercase;letter-spacing:.1em;color:var(--texto-sobre-escuro-3)}
.menu a{display:flex;align-items:center;gap:var(--e-2);min-height:32px;padding:var(--e-1) var(--e-4);color:var(--texto-sobre-escuro-2);font-size:var(--fs-corpo);border-left:3px solid transparent;transition:background var(--mov-rapido),color var(--mov-rapido)}
.menu a:hover{background:var(--menu-hover);color:#fff;text-decoration:none}
.menu a[aria-current]{background:var(--menu-ativo);color:#fff;border-left-color:var(--ouro-500);font-weight:var(--peso-forte)}
.menu a .ic{width:18px;text-align:center;font-size:var(--fs-corpo-g);opacity:.9;flex-shrink:0}
.menu a .rot{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.selo-menu{min-width:20px;padding:1px 6px;border-radius:var(--r-pill);background:var(--erro);color:#fff;font:var(--peso-maximo) var(--fs-micro)/1.6 var(--fonte-corpo);text-align:center;font-variant-numeric:tabular-nums}
.selo-menu.cinza{background:#FFFFFF26;color:var(--texto-sobre-escuro-2)}
.selo-menu.ouro{background:var(--ouro-500);color:var(--navy-900)}
.menu-pe{margin-top:auto;padding:var(--e-3) var(--e-4);border-top:1px solid var(--menu-linha);display:flex;align-items:center;gap:var(--e-2)}
.menu-pe .quem{min-width:0;flex:1}
.menu-pe b{display:block;font-size:var(--fs-dado);color:#fff;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.menu-pe span{font-size:var(--fs-rotulo);color:var(--texto-sobre-escuro-3)}
.menu-pe .btn{background:#FFFFFF0F;border-color:#FFFFFF33;color:var(--texto-sobre-escuro-2)}
.menu-pe .btn:hover{background:#FFFFFF1F;border-color:#FFFFFF4D;color:#fff}
.conteudo{overflow-y:auto;padding:var(--e-6) var(--e-7) var(--e-9);min-width:0}
.topo{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--e-5);flex-wrap:wrap;margin-bottom:var(--e-5);padding-bottom:var(--e-4);border-bottom:1px solid var(--linha)}
.topo h1{font-size:var(--fs-titulo-0);line-height:1.1;letter-spacing:-.015em}
/* A sobrelinha: de onde a tela vem, em maiuscula pequena. Nao e escrita a
   mao em cada tela — o `navegar()` a tira do grupo do menu em que a rota
   esta ("Operacao do dia", "Financeiro", "Legalizacao"...). Num sistema de
   26 telas, e o que diz onde a pessoa esta sem ela ter de ler o menu. */
.topo .sobre{display:block;margin-bottom:var(--e-1);
  font:var(--peso-forte) var(--fs-rotulo)/1.4 var(--fonte-corpo);
  letter-spacing:.11em;text-transform:uppercase;color:var(--ouro-700)}
.topo .contexto{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap;font-size:var(--fs-apoio);color:var(--texto-apagado);margin-top:var(--e-1);max-width:var(--largura-texto)}
.topo .contexto b{color:var(--texto-2)}
.topo-acoes{display:flex;gap:var(--e-2);flex-wrap:wrap;align-items:center}
.abas-tela{display:flex;gap:var(--e-1);border-bottom:1px solid var(--linha);margin:calc(var(--e-5) * -1) 0 var(--e-5);overflow-x:auto}
.abas-tela button{padding:var(--e-3) var(--e-3);font-size:var(--fs-corpo);color:var(--texto-apagado);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap}
.abas-tela button:hover{color:var(--texto-2)}
.abas-tela button[aria-selected="true"]{color:var(--navy-800);border-bottom-color:var(--primaria);font-weight:var(--peso-forte)}
@media (max-width:1100px){
  .app{grid-template-columns:var(--largura-menu-estreita) 1fr}
  .menu a{justify-content:center;padding:var(--e-1) 0}
  .menu a .rot,.menu-marca div,.menu-grupo,.menu-pe .quem{display:none}
  .menu a[aria-current]{border-left-width:2px}
  .selo-menu{position:absolute;transform:translate(14px,-10px)}
  .menu a{position:relative}
  .conteudo{padding:var(--e-5) var(--e-4) var(--e-8)}
}
/* 09/10/2026: bloco removido. Falava de `.app` e `.menu`, nomes do sistema de
   design que nao estao no HTML (zero ocorrencias) — era codigo morto desde
   antes da barra do topo. A regra util dele (`.topo` empilhado no celular)
   ja existe no bloco de 760px mais abaixo. */

/* ========== sistema de design: css/acoes.css ========== */
/* Ações: botões, etiquetas, filtros.
   Estados por atributo: data-estado="carregando|sucesso|erro" + :disabled. */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--e-2);min-height:var(--alt-controle);padding:0 var(--e-3);
  border:1px solid var(--linha-2);background:var(--superficie);color:var(--texto-2);border-radius:var(--r);
  font:var(--fonte-rotulo);white-space:nowrap;cursor:pointer;box-shadow:var(--sh-1);
  transition:background var(--mov-rapido),border-color var(--mov-rapido),color var(--mov-rapido),box-shadow var(--mov-rapido)}
.btn:hover{background:var(--superficie-2);border-color:var(--linha-3);color:var(--texto)}
.btn:active{box-shadow:none;translate:0 1px}
.btn:focus-visible{outline:var(--anel);outline-offset:var(--anel-deslocamento)}
.btn .ic{font-size:var(--fs-corpo-g);line-height:1}
.btn.p{background:var(--primaria);color:#fff;border-color:var(--primaria)}
.btn.p:hover{background:var(--primaria-forte);border-color:var(--primaria-forte);color:#fff}
.btn.d{background:var(--erro);color:#fff;border-color:var(--erro)}
.btn.d:hover{background:var(--erro-tinta);border-color:var(--erro-tinta);color:#fff}
.btn.o{background:var(--ouro-500);color:var(--navy-900);border-color:var(--ouro-600)}
.btn.o:hover{background:var(--ouro-300);border-color:var(--ouro-500);color:var(--navy-900)}
.btn.fantasma{border-color:transparent;background:transparent;box-shadow:none}
.btn.fantasma:hover{background:var(--superficie-3);border-color:transparent}
.btn.sm{min-height:var(--alt-controle-sm);padding:0 var(--e-2);font-size:var(--fs-apoio);gap:var(--e-1);border-radius:var(--r-sm)}
.btn.lg{min-height:var(--alt-controle-lg);padding:0 var(--e-5);font-size:var(--fs-corpo-g)}
.btn.cheio{width:100%}
.btn.icone{padding:0;width:var(--alt-controle);aspect-ratio:1}
.btn:disabled,.btn[aria-disabled="true"]{background:var(--superficie-3);color:var(--apagado-2);border-color:var(--linha);box-shadow:none;cursor:not-allowed;translate:none}
.btn[data-estado="carregando"]{cursor:progress;pointer-events:none}
.btn[data-estado="carregando"]::before{content:"";width:12px;height:12px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;opacity:.85;animation:girar .6s linear infinite}
.btn[data-estado="sucesso"]{background:var(--ok-fundo);color:var(--ok-tinta);border-color:var(--ok-borda);pointer-events:none}
.btn[data-estado="sucesso"]::before{content:"✓";font-weight:var(--peso-maximo)}
.btn[data-estado="erro"]{background:var(--erro-fundo);color:var(--erro-tinta);border-color:var(--erro-borda)}
.btn[data-estado="erro"]::before{content:"!";font-weight:var(--peso-maximo);width:14px;height:14px;border:1.5px solid currentColor;border-radius:50%;display:grid;place-items:center;font-size:10px}
.btn-grupo{display:inline-flex}
.btn-grupo .btn{border-radius:0;margin-left:-1px;box-shadow:none}
.btn-grupo .btn:first-child{border-radius:var(--r) 0 0 var(--r);margin-left:0}
.btn-grupo .btn:last-child{border-radius:0 var(--r) var(--r) 0}
/* Etiquetas de situação */
.tag{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:var(--r-pill);border:1px solid transparent;
  font:var(--peso-forte) var(--fs-rotulo)/1.5 var(--fonte-corpo);white-space:nowrap;background:var(--superficie-3);color:var(--texto-2)}
.tag.v{background:var(--ok-fundo);border-color:var(--ok-borda);color:var(--ok-tinta)}
.tag.a{background:var(--atencao-fundo);border-color:var(--atencao-borda);color:var(--atencao-tinta)}
.tag.r{background:var(--erro-fundo);border-color:var(--erro-borda);color:var(--erro-tinta)}
.tag.b{background:var(--info-fundo);border-color:var(--info-borda);color:var(--info-tinta)}
.tag.c{background:var(--superficie-3);border-color:var(--linha);color:var(--texto-3)}
.tag.t{background:var(--creme);border-color:var(--ouro-300);color:var(--navy-800)}
.tag.definitiva{background:var(--erro);border-color:var(--erro);color:#fff;text-transform:uppercase;letter-spacing:.06em}
.tag[data-estado="carregando"]{background:var(--superficie-3);border-color:var(--linha);color:var(--apagado-2)}
.tag[data-estado="carregando"]::before,.tag.processando::before{content:"";width:8px;height:8px;border:1.5px solid currentColor;border-right-color:transparent;border-radius:50%;animation:girar .7s linear infinite}
.tag[aria-disabled="true"]{background:var(--superficie-3);border-color:var(--linha);color:var(--apagado-2);opacity:.75}
.tag .ponto{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.tags{display:flex;gap:var(--e-1);flex-wrap:wrap;align-items:center}
/* Filtros / segmentos */
.filtros{display:inline-flex;gap:2px;padding:2px;background:var(--superficie-3);border:1px solid var(--linha);border-radius:var(--r)}
.filtros button{min-height:var(--alt-controle-sm);padding:0 var(--e-3);border-radius:var(--r-sm);font:var(--peso-medio) var(--fs-apoio)/1 var(--fonte-corpo);color:var(--texto-3);cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.filtros button:hover{background:var(--superficie);color:var(--texto)}
.filtros button[aria-pressed="true"]{background:var(--superficie);color:var(--navy-800);font-weight:var(--peso-forte);box-shadow:var(--sh-1)}
.filtros button:disabled{color:var(--apagado-2);cursor:not-allowed;background:none}
.filtros button .n{font-variant-numeric:tabular-nums;color:var(--apagado)}

/* ========== sistema de design: css/formulario.css ========== */
/* Formulários. Estado do campo em data-estado no .campo:
   vazio | carregando (validando/consultando) | erro | sucesso; desabilitado no controle. */
.campo{margin-bottom:var(--e-3);min-width:0}
.campo>label{display:flex;align-items:baseline;gap:var(--e-1);flex-wrap:wrap;font:var(--peso-forte) var(--fs-nota)/1.3 var(--fonte-corpo);color:var(--texto-2);margin-bottom:var(--e-1)}
.campo>label .op-txt{font-weight:var(--peso-normal);color:var(--apagado-2)}
.campo.obrigatorio>label::after{content:"obrigatório";font:var(--peso-medio) var(--fs-micro)/1 var(--fonte-corpo);color:var(--ouro-700);background:var(--ouro-50);border:1px solid var(--ouro-100);border-radius:var(--r-xs);padding:2px 5px;margin-left:auto}
.campo input,.campo select,.campo textarea{width:100%;min-height:var(--alt-controle);padding:6px 10px;background:var(--superficie);border:1px solid var(--linha-2);border-radius:var(--r-sm);font-size:var(--fs-corpo);color:var(--texto);box-shadow:var(--sh-interna);transition:border-color var(--mov-rapido),box-shadow var(--mov-rapido)}
.campo input::placeholder,.campo textarea::placeholder{color:var(--apagado-2)}
.campo input:hover,.campo select:hover,.campo textarea:hover{border-color:var(--linha-3)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:0;border-color:var(--primaria);box-shadow:var(--anel-suave)}
.campo textarea{min-height:78px;line-height:var(--lh-media);resize:vertical}
.campo select{appearance:none;background-image:linear-gradient(45deg,transparent 48%,var(--apagado) 52%),linear-gradient(-45deg,transparent 48%,var(--apagado) 52%);background-size:6px 6px;background-position:right 14px center,right 20px center;background-repeat:no-repeat;padding-right:32px}
.campo input:disabled,.campo select:disabled,.campo textarea:disabled{background:var(--superficie-3);color:var(--apagado);border-color:var(--linha);cursor:not-allowed;box-shadow:none}
.campo input[readonly]{background:var(--superficie-2);color:var(--texto-3);border-style:dashed}
.campo .ajuda{font-size:var(--fs-nota);color:var(--texto-apagado);line-height:var(--lh-media);margin-top:var(--e-1)}
.campo .retorno{display:flex;align-items:flex-start;gap:5px;font:var(--peso-medio) var(--fs-nota)/var(--lh-media) var(--fonte-corpo);margin-top:var(--e-1)}
.campo[data-estado="erro"] input,.campo[data-estado="erro"] select,.campo[data-estado="erro"] textarea,[aria-invalid="true"]{border-color:var(--erro);background:var(--erro-fundo)}
.campo[data-estado="erro"] input:focus{box-shadow:0 0 0 3px rgba(192,39,27,.15)}
.campo[data-estado="erro"] .retorno{color:var(--erro-tinta)}
.campo[data-estado="erro"] .retorno::before{content:"⛔"}
.campo[data-estado="sucesso"] input,.campo[data-estado="sucesso"] select{border-color:var(--ok-borda);background:var(--ok-fundo)}
.campo[data-estado="sucesso"] .retorno{color:var(--ok-tinta)}
.campo[data-estado="sucesso"] .retorno::before{content:"✓";font-weight:var(--peso-maximo)}
.campo[data-estado="carregando"]{position:relative}
.campo[data-estado="carregando"] input{background:var(--superficie-2);color:var(--texto-3)}
.campo[data-estado="carregando"] .retorno{color:var(--texto-apagado)}
.campo[data-estado="carregando"] .retorno::before{content:"";width:11px;height:11px;margin-top:2px;border:2px solid var(--navy-300);border-right-color:transparent;border-radius:50%;animation:girar .6s linear infinite;flex-shrink:0}
.campo[data-estado="vazio"] .retorno{color:var(--apagado-2)}
.campo .contagem{font-size:var(--fs-micro);color:var(--apagado-2);text-align:right;font-variant-numeric:tabular-nums;margin-top:2px}
.linha{display:grid;gap:var(--e-3);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.linha3{display:grid;gap:var(--e-3);grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}
.check{display:flex;align-items:flex-start;gap:var(--e-2);padding:var(--e-1) 0;font-size:var(--fs-corpo);line-height:var(--lh-media);cursor:pointer;min-height:26px}
.check input{width:16px;height:16px;margin-top:2px;accent-color:var(--primaria);flex-shrink:0}
.check input:disabled{cursor:not-allowed}
.check input:disabled+span,.check[aria-disabled="true"]{color:var(--apagado-2);cursor:not-allowed}
.check .ajuda{margin-top:2px}
/* 21/10/2026: caixinha dentro de .campo herdava largura e altura de campo de
   texto (as caixas enormes do "o que está incluído"), e .campo>label quebrava
   a linha entre a caixinha e o texto (as cortesias). */
.campo input[type=checkbox],.campo input[type=radio]{width:16px;height:16px;min-height:0;padding:0;
  box-shadow:none;flex-shrink:0}
.campo>label.check{flex-wrap:nowrap;align-items:flex-start;font:var(--peso-normal) var(--fs-apoio)/var(--lh-media) var(--fonte-corpo);
  color:var(--texto);margin-bottom:var(--e-1)}
.chave{display:inline-flex;align-items:center;gap:var(--e-2);cursor:pointer;font-size:var(--fs-corpo)}
.chave input{appearance:none;width:34px;height:20px;border-radius:var(--r-pill);background:var(--linha-2);position:relative;cursor:pointer;transition:background var(--mov-rapido);flex-shrink:0}
.chave input::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:var(--sh-1);transition:translate var(--mov-rapido)}
.chave input:checked{background:var(--ok)}
.chave input:checked::after{translate:14px 0}
.chave input:disabled{background:var(--superficie-3);border:1px solid var(--linha);cursor:not-allowed}
.chave input:disabled::after{background:var(--linha-2);box-shadow:none}
.secao{display:flex;align-items:center;gap:var(--e-2);font:var(--peso-maximo) var(--fs-rotulo)/1.2 var(--fonte-corpo);text-transform:uppercase;letter-spacing:var(--tr-rotulo);color:var(--navy-800);margin:var(--e-5) 0 var(--e-3);padding-bottom:var(--e-1);border-bottom:1px solid var(--linha)}
.secao:first-child{margin-top:0}
.secao .empurra{font-weight:var(--peso-normal);text-transform:none;letter-spacing:0;font-size:var(--fs-nota);color:var(--texto-apagado)}
.bloco{margin-top:var(--e-4)}
.bloco:first-child{margin-top:0}
.mais{border:1px solid var(--linha);background:var(--superficie-2);border-radius:var(--r);padding:var(--e-2) var(--e-3);margin:var(--e-1) 0 var(--e-3)}
.mais>summary{cursor:pointer;font:var(--peso-forte) var(--fs-corpo)/1.4 var(--fonte-corpo);color:var(--texto-3);list-style:none;display:flex;align-items:center;gap:var(--e-2)}
.mais>summary::-webkit-details-marker{display:none}
.mais>summary::before{content:"▸";color:var(--apagado);font-size:var(--fs-micro)}
.mais[open]>summary::before{content:"▾"}
.mais[open]>summary{margin-bottom:var(--e-3);padding-bottom:var(--e-2);border-bottom:1px dashed var(--linha)}

/* ========== sistema de design: css/superficies.css ========== */
/* Superfícies: cartão, avisos, alertas, gaveta, modal, toasts. */
.card{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r-md);box-shadow:var(--sh-1);min-width:0}
.card>h2,.card-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);flex-wrap:wrap;
  padding:var(--pad-cartao-cab);border-bottom:1px solid var(--linha);font:var(--peso-forte) var(--fs-corpo-g)/1.25 var(--fonte-titulo);color:var(--texto)}
.card>h2 small,.card-cab small{font:var(--peso-normal) var(--fs-apoio)/1.4 var(--fonte-corpo);color:var(--texto-apagado)}
.card .corpo{padding:var(--pad-cartao)}
.card .corpo>*+*{margin-top:var(--e-3)}
.card.destaque{border-color:var(--ouro-300);box-shadow:0 0 0 3px var(--ouro-50),var(--sh-1)}
.card[data-estado="erro"]{border-color:var(--erro-borda)}
.card[data-estado="sucesso"]{border-color:var(--ok-borda)}
.card[data-estado="carregando"]{color:var(--texto-apagado)}
.card-pe{padding:var(--e-3) var(--pad-cartao);border-top:1px solid var(--linha);background:var(--superficie-2);border-radius:0 0 var(--r-md) var(--r-md);display:flex;gap:var(--e-2);align-items:center;flex-wrap:wrap}
.rodape-nota{font-size:var(--fs-nota);color:var(--texto-apagado);line-height:var(--lh-solta);margin-top:var(--e-3);padding-top:var(--e-3);border-top:1px dashed var(--linha)}
.rodape-nota b{color:var(--texto-2)}
.caminho{border:1px solid var(--linha);border-left:3px solid var(--primaria);border-radius:var(--r);padding:var(--e-3);background:var(--superficie-2)}
.caminho>b{display:block;font-size:var(--fs-corpo);margin-bottom:2px}
.caminho>.ajuda{font-size:var(--fs-nota);color:var(--texto-apagado);line-height:var(--lh-media);margin-bottom:var(--e-3)}
/* Avisos (callout). Cinco variantes, sem neutro sem classe: use .i por padrão. */
.aviso{display:block;position:relative;padding:var(--e-3) var(--e-3) var(--e-3) 36px;border:1px solid var(--linha);border-radius:var(--r);font-size:var(--fs-dado);line-height:var(--lh-media);background:var(--superficie-2);color:var(--texto-2)}
.aviso+.aviso,.aviso+.card,.card+.aviso{margin-top:var(--e-3)}
.aviso::before{content:"•";position:absolute;left:var(--e-3);top:11px;font-size:var(--fs-corpo-g);line-height:1.3}
.aviso>b{display:block;font-size:var(--fs-corpo);margin-bottom:2px}
.aviso ul{margin:var(--e-1) 0 0 var(--e-4)}
.aviso li{margin:2px 0}
.aviso .btn{margin-top:var(--e-2)}
.aviso.r{background:var(--erro-fundo);border-color:var(--erro-borda);color:var(--erro-tinta)}
.aviso.r::before{content:"⛔"}
.aviso.a{background:var(--atencao-fundo);border-color:var(--atencao-borda);color:var(--atencao-tinta)}
.aviso.a::before{content:"⚠"}
.aviso.v{background:var(--ok-fundo);border-color:var(--ok-borda);color:var(--ok-tinta)}
.aviso.v::before{content:"✓"}
.aviso.i{background:var(--info-fundo);border-color:var(--info-borda);color:var(--info-tinta)}
.aviso.i::before{content:"ℹ"}
.aviso.t{background:var(--creme);border:1px solid var(--ouro-300);border-left:3px solid var(--ouro-500);color:var(--navy-800)}
.aviso.t::before{content:"◆";color:var(--ouro-600)}
/* Alertas: linha de ação com destino */
.alerta{display:flex;align-items:flex-start;gap:var(--e-3);padding:var(--e-3);border:1px solid var(--linha);border-radius:var(--r);background:var(--superficie)}
.alerta+.alerta{margin-top:var(--e-2)}
.alerta .ic{width:22px;height:22px;border-radius:var(--r-sm);display:grid;place-items:center;font-size:var(--fs-apoio);flex-shrink:0}
.alerta .quadro{flex:1;min-width:0}
.alerta b{display:block;font-size:var(--fs-corpo);color:var(--texto)}
.alerta p{font-size:var(--fs-dado);color:var(--texto-3);line-height:var(--lh-media);margin-top:2px}
.alerta .btn,.alerta>a{flex-shrink:0;align-self:center;font-size:var(--fs-apoio);white-space:nowrap}
.alerta.critico{background:var(--erro-fundo);border-color:var(--erro-borda)}
.alerta.critico .ic{background:var(--erro);color:#fff}
.alerta.critico b{color:var(--erro-tinta)}
.alerta.atencao{background:var(--atencao-fundo);border-color:var(--atencao-borda)}
.alerta.atencao .ic{background:var(--atencao);color:#fff}
.alerta.atencao b{color:var(--atencao-tinta)}
.alerta.info{background:var(--info-fundo);border-color:var(--info-borda)}
.alerta.info .ic{background:var(--info);color:#fff}
.alerta.info b{color:var(--info-tinta)}
.alerta.ok{background:var(--ok-fundo);border-color:var(--ok-borda)}
.alerta.ok .ic{background:var(--ok);color:#fff}
.alerta.ok b{color:var(--ok-tinta)}
.alerta[aria-disabled="true"]{background:var(--superficie-2);border-color:var(--linha);opacity:.7}
.alerta[aria-disabled="true"] .ic{background:var(--linha-2);color:var(--apagado)}
/* Gaveta (drawer) */
.fundo{position:fixed;inset:0;background:rgba(15,46,70,.45);backdrop-filter:blur(2px);z-index:var(--z-gaveta);opacity:0;pointer-events:none;transition:opacity var(--mov)}
.fundo.on{opacity:1;pointer-events:auto}
.gaveta{position:fixed;top:0;right:0;bottom:0;width:var(--largura-gaveta);display:flex;flex-direction:column;background:var(--superficie);z-index:calc(var(--z-gaveta) + 1);box-shadow:var(--sh-3);translate:100% 0;transition:translate var(--mov-gaveta)}
.gaveta.on{translate:0 0}
.gaveta-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e-4);padding:var(--e-4) var(--e-5);border-bottom:1px solid var(--linha)}
.gaveta-cab h3{font-size:var(--fs-titulo-2)}
.gaveta-cab .meta{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap;font-size:var(--fs-apoio);color:var(--texto-apagado);margin-top:var(--e-1)}
.fechar{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;font-size:18px;color:var(--apagado);cursor:pointer;flex-shrink:0}
.fechar:hover{background:var(--superficie-3);color:var(--texto)}
.abas{display:flex;gap:var(--e-1);padding:0 var(--e-5);border-bottom:1px solid var(--linha);background:var(--superficie-2);overflow-x:auto}
.abas button{padding:var(--e-3) var(--e-2);font-size:var(--fs-dado);color:var(--texto-apagado);border-bottom:2px solid transparent;cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:5px}
.abas button:hover{color:var(--texto-2)}
.abas button[aria-selected="true"]{color:var(--navy-800);border-bottom-color:var(--primaria);font-weight:var(--peso-forte)}
.abas button:disabled{color:var(--linha-3);cursor:not-allowed}
.gaveta-corpo{flex:1;overflow-y:auto;padding:var(--e-5)}
.gaveta-pe{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap;padding:var(--e-3) var(--e-5);border-top:1px solid var(--linha);background:var(--superficie-2)}
.gaveta-pe .btn.p,.gaveta-pe .btn.d{margin-left:auto}
.gaveta-pe .btn.d~.btn.p{margin-left:0}
.salvamento{display:inline-flex;align-items:center;gap:5px;font:var(--peso-medio) var(--fs-nota)/1.2 var(--fonte-corpo);color:var(--texto-apagado)}
.salvamento[data-estado="salvando"]::before{content:"";width:10px;height:10px;border:2px solid var(--navy-300);border-right-color:transparent;border-radius:50%;animation:girar .6s linear infinite}
.salvamento[data-estado="salvo"]{color:var(--ok-tinta)}
.salvamento[data-estado="salvo"]::before{content:"✓";font-weight:var(--peso-maximo)}
.salvamento[data-estado="erro"]{color:var(--erro-tinta)}
.salvamento[data-estado="erro"]::before{content:"⛔"}
/* Modal: confirmação e entrada curta (substitui confirm()/prompt()) */
.modal{position:fixed;inset:0;z-index:var(--z-modal);display:grid;place-items:center;padding:var(--e-4);background:rgba(15,46,70,.45);backdrop-filter:blur(2px)}
.modal-caixa{width:min(460px,100%);background:var(--superficie);border-radius:var(--r-lg);box-shadow:var(--sh-3);overflow:hidden;animation:sobe var(--mov)}
.modal-caixa.larga{width:min(600px,100%)}
.modal-cab{display:flex;align-items:flex-start;gap:var(--e-3);padding:var(--e-4) var(--e-5) var(--e-2)}
.modal-cab .ic{width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;flex-shrink:0;background:var(--info-fundo);color:var(--info-tinta)}
.modal-cab h3{font-size:var(--fs-titulo-3)}
.modal.perigo .modal-cab .ic{background:var(--erro-fundo);color:var(--erro)}
.modal.atencao .modal-cab .ic{background:var(--atencao-fundo);color:var(--atencao-tinta)}
.modal-corpo{padding:0 var(--e-5) var(--e-4);font-size:var(--fs-corpo);color:var(--texto-3);line-height:var(--lh-media)}
.modal-corpo>*+*{margin-top:var(--e-3)}
.modal-pe{display:flex;gap:var(--e-2);justify-content:flex-end;flex-wrap:wrap;padding:var(--e-3) var(--e-5);border-top:1px solid var(--linha);background:var(--superficie-2)}
/* Toasts: um por ação; mais de dois resultados, use .toast.resumo */
.toasts{position:fixed;right:var(--e-5);bottom:var(--e-5);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--e-2);max-width:420px}
.toast{display:grid;grid-template-columns:auto 1fr auto;gap:var(--e-1) var(--e-3);padding:var(--e-3);border-radius:var(--r);background:var(--navy-900);color:#fff;box-shadow:var(--sh-3);font-size:var(--fs-corpo);line-height:var(--lh-media);animation:sobe var(--mov)}
.toast::before{content:"•";grid-column:1;grid-row:1/span 2;font-size:var(--fs-corpo-g);line-height:1.2}
.toast b{grid-column:2;font-size:var(--fs-corpo)}
.toast p,.toast ul{grid-column:2;font-size:var(--fs-dado);color:#D9E4EC}
.toast ul{margin-left:var(--e-4)}
.toast .btn{grid-column:3;grid-row:1/span 2;align-self:center;background:#FFFFFF1A;border-color:#FFFFFF3D;color:#fff;box-shadow:none}
.toast .btn:hover{background:#FFFFFF2E;border-color:#FFFFFF5C;color:#fff}
.toast.ok{background:var(--ok-tinta)}
.toast.ok::before{content:"✓"}
.toast.erro{background:var(--erro-tinta)}
.toast.erro::before{content:"⛔"}
.toast.carregando::before{content:"";width:12px;height:12px;margin-top:3px;grid-row:1/span 2;border:2px solid #FFFFFF80;border-right-color:transparent;border-radius:50%;animation:girar .6s linear infinite}
.toast.persistente{background:var(--ouro-100);color:var(--navy-800);border:1px solid var(--ouro-500);cursor:pointer}
.toast.persistente::before{content:"↑"}
.toast.persistente .btn{background:var(--navy-800);border-color:var(--navy-800);color:#fff}
@keyframes sobe{from{translate:0 10px;opacity:0}}
@keyframes girar{to{rotate:1turn}}

/* ========== sistema de design: css/dados.css ========== */
/* Dados: tabela, KPI, fila, kanban, contador, série, script. */
table{width:100%;border-collapse:collapse;font-size:var(--fs-corpo)}
thead th{position:sticky;top:0;z-index:var(--z-conteudo);text-align:left;padding:var(--pad-celula);background:var(--superficie-2);
  font:var(--fonte-cabecalho-tabela);text-transform:uppercase;letter-spacing:var(--tr-rotulo);color:var(--texto-apagado);border-bottom:1px solid var(--linha-2);white-space:nowrap}
thead th.ordenavel{cursor:pointer}
thead th.ordenavel:hover{color:var(--texto-2)}
thead th[aria-sort]::after{content:"↑";margin-left:4px;color:var(--primaria)}
thead th[aria-sort="descending"]::after{content:"↓"}
tbody td{padding:var(--pad-celula);border-bottom:1px solid var(--linha);vertical-align:middle;height:var(--alt-linha)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover{background:var(--superficie-2)}
/* 08/10/2026: a celula de numero em MONO, um degrau abaixo do corpo.
   A IBM Plex Mono e mais larga que a Public Sans no mesmo tamanho; no
   mesmo corpo a coluna de valor estourava. O ganho aqui e o alinhamento
   das casas de uma linha para a outra, que e o que deixa comparar
   valores de relance — nao o tamanho. */
td.num{text-align:right;font-variant-numeric:tabular-nums;
  font-family:var(--fonte-mono);font-size:var(--fs-dado)}
th.num{text-align:right;font-variant-numeric:tabular-nums}
td.forte{font-weight:var(--peso-forte)}
td .sub{display:block;font-size:var(--fs-nota);color:var(--texto-apagado);margin-top:1px}
tr.clicavel{cursor:pointer}
tr.clicavel td:last-child::after{content:"›";float:right;color:var(--linha-3);font-size:var(--fs-corpo-g);line-height:1}
tr.clicavel:hover td:last-child::after{color:var(--primaria)}
tr[aria-selected="true"]{background:var(--info-fundo);box-shadow:inset 3px 0 0 var(--primaria)}
tr[data-estado="erro"]{background:var(--erro-fundo);box-shadow:inset 3px 0 0 var(--erro)}
tr[data-estado="sucesso"]{background:var(--ok-fundo);box-shadow:inset 3px 0 0 var(--ok)}
tr[data-estado="atencao"]{background:var(--atencao-fundo);box-shadow:inset 3px 0 0 var(--atencao)}
tr[aria-disabled="true"]{color:var(--apagado-2);background:var(--superficie-2)}
tr[aria-disabled="true"] .tag{opacity:.7}
.tab-rolar{max-height:560px;overflow:auto;border-radius:0 0 var(--r-md) var(--r-md)}
.tab-pe{display:flex;align-items:center;gap:var(--e-3);flex-wrap:wrap;padding:var(--e-2) var(--e-4);border-top:1px solid var(--linha);background:var(--superficie-2);font-size:var(--fs-apoio);color:var(--texto-apagado)}
.tab-pe .btn{margin-left:auto}
/* KPI de ritmo: realizado × esperado hoje */
.kpi{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r-md);padding:var(--e-3) var(--e-4) var(--e-4);box-shadow:var(--sh-1);min-width:0}
.kpi .rot{display:flex;align-items:center;gap:5px;font:var(--peso-forte) var(--fs-rotulo)/1.2 var(--fonte-corpo);text-transform:uppercase;letter-spacing:var(--tr-rotulo);color:var(--texto-apagado)}
/* 08/10/2026: o valor em MONO. A lista do Joao pede uma familia
   monoespacada para TODO numero, e este e o numero que aparece em mais
   telas do sistema. Em Jost ele era bonito e nao era dado: as casas nao
   alinhavam entre um cartao e outro, e o olho comparava errado.
   O peso cai de maximo para medio: mono e mais densa, e no peso maximo
   o numero vira mancha. */
.kpi .val{font:var(--peso-medio) var(--fs-numero)/1.1 var(--fonte-mono);letter-spacing:var(--tr-numero);font-variant-numeric:tabular-nums;margin:var(--e-2) 0 2px;color:var(--texto)}
.kpi .val.atras{color:var(--atencao-tinta)}
.kpi .val.critico{color:var(--erro-tinta)}
.kpi .meta{font-size:var(--fs-nota);color:var(--texto-apagado)}
.barra{position:relative;height:6px;margin-top:var(--e-3);background:var(--superficie-3);border-radius:var(--r-pill);overflow:visible}
.barra i{display:block;height:100%;background:var(--primaria);border-radius:var(--r-pill);transition:width .5s var(--mov)}
.barra i.atras{background:var(--atencao)}
.barra i.critico{background:var(--erro)}
.barra .marca{position:absolute;top:-4px;width:2px;height:14px;background:var(--navy-900);opacity:.55;border-radius:1px}
.barra .marca::after{content:"";position:absolute;top:-3px;left:-2px;width:6px;height:6px;border-radius:50%;background:var(--navy-900)}
.kpi .ritmo{display:inline-flex;align-items:center;gap:4px;font:var(--peso-forte) var(--fs-nota)/1.3 var(--fonte-corpo);margin-top:var(--e-2)}
.ritmo.ok{color:var(--ok-tinta)}
.ritmo.atras{color:var(--atencao-tinta)}
.ritmo.critico{color:var(--erro-tinta)}
.kpi[data-estado="vazio"] .val,.kpi[data-estado="erro"] .val{color:var(--apagado-2);font-size:var(--fs-titulo-2)}
.kpi[data-estado="erro"]{border-color:var(--erro-borda)}
/* Fila de tarefas do dia */
.fila{display:flex;align-items:center;gap:var(--e-3);padding:var(--e-3);background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r);box-shadow:var(--sh-1)}
.fila+.fila{margin-top:var(--e-2)}
.fila .info{flex:1;min-width:0}
.fila b{display:block;font-size:var(--fs-corpo-g);line-height:1.3}
.fila .sub{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap;font-size:var(--fs-apoio);color:var(--texto-apagado);margin-top:3px}
.fila .acoes{display:flex;gap:var(--e-1);flex-wrap:wrap;flex-shrink:0}
.fila.atrasado{border-left:3px solid var(--erro);background:linear-gradient(90deg,var(--erro-fundo),var(--superficie) 40%)}
.fila[data-estado="sucesso"]{border-left:3px solid var(--ok);background:linear-gradient(90deg,var(--ok-fundo),var(--superficie) 40%)}
.fila[data-estado="erro"]{border-left:3px solid var(--erro);background:var(--erro-fundo)}
.fila[data-estado="carregando"]{color:var(--texto-apagado)}
.fila[aria-disabled="true"]{background:var(--superficie-2);border-color:var(--linha);color:var(--apagado-2);box-shadow:none}
.fila[aria-disabled="true"] b{color:var(--texto-3)}
/* Kanban */
.kanban{display:flex;gap:var(--e-3);align-items:flex-start;overflow-x:auto;padding-bottom:var(--e-3)}
.col{flex:0 0 268px;display:flex;flex-direction:column;max-height:calc(100vh - 220px);background:var(--superficie-3);border:1px solid var(--linha);border-radius:var(--r-md)}
.col.alvo{background:var(--creme);border-color:var(--ouro-500);outline:2px dashed var(--ouro-600);outline-offset:-4px}
.col-cab{padding:var(--e-2) var(--e-3);border-bottom:1px solid var(--linha)}
.col-cab .t{display:flex;align-items:center;justify-content:space-between;gap:var(--e-2)}
.col-cab b{font-size:var(--fs-dado);letter-spacing:-.01em}
.col-cab .n{min-width:22px;padding:0 6px;border-radius:var(--r-pill);background:var(--superficie);border:1px solid var(--linha);font:var(--peso-maximo) var(--fs-rotulo)/18px var(--fonte-corpo);text-align:center;color:var(--texto-2)}
.col-cab .mrr{font-size:var(--fs-nota);color:var(--texto-3);margin-top:2px;font-variant-numeric:tabular-nums}
.col-cab .dono{font:var(--peso-forte) var(--fs-micro)/1.4 var(--fonte-corpo);text-transform:uppercase;letter-spacing:.08em;color:var(--apagado-2);margin-top:1px}
.col-lista{flex:1;min-height:72px;display:flex;flex-direction:column;gap:var(--e-2);padding:var(--e-2);overflow-y:auto}
.op{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r);padding:var(--e-2) var(--e-3);box-shadow:var(--sh-1);cursor:grab;transition:box-shadow var(--mov-rapido),translate var(--mov-rapido),border-color var(--mov-rapido)}
.op:hover{box-shadow:var(--sh-2);border-color:var(--linha-2);translate:0 -1px}
.op:focus-visible{outline:var(--anel);outline-offset:1px}
.op.arrastando{opacity:.45;cursor:grabbing}
.op b{display:block;font-size:var(--fs-dado);line-height:1.35}
.op .l{display:flex;justify-content:space-between;gap:var(--e-2);font-size:var(--fs-nota);color:var(--texto-apagado);margin-top:3px}
.op .val{font-weight:var(--peso-maximo);color:var(--navy-800);font-size:var(--fs-dado);font-variant-numeric:tabular-nums}
.op .acao{display:flex;gap:5px;align-items:flex-start;font-size:var(--fs-nota);color:var(--texto-3);margin-top:var(--e-2);padding-top:var(--e-2);border-top:1px dashed var(--linha)}
.op .acao.atrasada,.op .acao.sem{color:var(--erro-tinta);font-weight:var(--peso-forte)}
.op .fitas{display:flex;gap:var(--e-1);flex-wrap:wrap;margin-top:var(--e-2)}
.op[data-estado="carregando"]{cursor:progress;opacity:.7}
.op[aria-disabled="true"]{background:var(--superficie-2);color:var(--apagado-2);cursor:not-allowed;box-shadow:none}
/* Contador e série de 30 dias */
.contador{display:flex;align-items:center;gap:var(--e-4)}
.contador .n{font:var(--peso-maximo) var(--fs-numero-g)/1 var(--fonte-titulo);letter-spacing:-.04em;color:var(--navy-800);font-variant-numeric:tabular-nums}
.contador .lado{font-size:var(--fs-apoio);color:var(--texto-apagado);line-height:var(--lh-media)}
.serie{display:flex;align-items:flex-end;gap:2px;height:68px;margin-top:var(--e-3)}
.serie div{flex:1;min-height:2px;background:var(--navy-500);border-radius:2px 2px 0 0}
.serie div.hoje{background:var(--ouro-500)}
.serie div.fds{background:var(--linha-2)}
.serie div.zero{background:var(--erro-borda);min-height:3px}
/* Acordeão de script */
.script{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r);overflow:hidden}
.script+.script{margin-top:var(--e-2)}
.script-cab{display:flex;align-items:center;gap:var(--e-3);width:100%;padding:var(--e-2) var(--e-3);background:var(--superficie-2);cursor:pointer;text-align:left}
.script-cab:hover{background:var(--superficie-3)}
.script-cab .n{width:24px;height:24px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--primaria);color:#fff;font:var(--peso-maximo) var(--fs-apoio)/1 var(--fonte-corpo);flex-shrink:0}
.script-cab b{flex:1;font-size:var(--fs-corpo)}
.script-corpo{padding:var(--e-3);border-top:1px solid var(--linha)}
.script-corpo pre{padding:var(--e-3);background:var(--superficie-2);border:1px solid var(--linha);border-radius:var(--r-sm);font:var(--peso-normal) var(--fs-dado)/var(--lh-solta) var(--fonte-corpo);white-space:pre-wrap;color:var(--texto-2)}

/* ========== sistema de design: css/estados.css ========== */
/* Os cinco estados do sistema: vazio, carregando, erro, desabilitado, sucesso.
   Todo componente que carrega dado tem um destes dentro do próprio cartão. */
.vazio{display:grid;justify-items:center;gap:var(--e-2);padding:var(--e-8) var(--e-5);text-align:center}
.vazio .ic{width:38px;height:38px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--superficie-3);border:1px solid var(--linha);color:var(--apagado);font-size:var(--fs-titulo-2)}
.vazio b{font-size:var(--fs-corpo-g);color:var(--texto-2);font-family:var(--fonte-titulo)}
.vazio p{font-size:var(--fs-dado);color:var(--texto-apagado);max-width:46ch;line-height:var(--lh-media)}
.vazio .linha-acoes{margin-top:var(--e-2);justify-content:center}
.vazio.positivo .ic{background:var(--ok-fundo);border-color:var(--ok-borda);color:var(--ok-tinta)}
.vazio.positivo b{color:var(--ok-tinta)}
.vazio.compacto{padding:var(--e-5) var(--e-4)}
.carregando:not(.toast):not(.selo):not(.tag){display:flex;align-items:center;justify-content:center;gap:var(--e-2);padding:var(--e-7);font-size:var(--fs-corpo);color:var(--texto-apagado)}
.carregando:not(.toast):not(.selo):not(.tag)::before{content:"";width:14px;height:14px;border:2px solid var(--navy-200);border-right-color:var(--primaria);border-radius:50%;animation:girar .6s linear infinite}
.carregando.inline:not(.toast):not(.selo){padding:0;display:inline-flex;font-size:var(--fs-apoio)}
.esqueleto{background:linear-gradient(90deg,var(--superficie-3) 25%,var(--linha) 37%,var(--superficie-3) 63%);background-size:400% 100%;border-radius:var(--r-xs);animation:brilho 1.3s ease-in-out infinite}
.esq-texto{height:11px;margin:5px 0}
.esq-texto.curto{width:38%}
.esq-texto.medio{width:62%}
.esq-titulo{height:16px;width:44%;margin-bottom:var(--e-3)}
.esq-numero{height:26px;width:54%;margin:var(--e-2) 0 var(--e-1)}
.esq-bloco{height:64px}
.esq-pilula{height:16px;width:72px;border-radius:var(--r-pill)}
.esq-linha-tabela{display:grid;grid-template-columns:2.2fr 1fr 1fr .7fr;gap:var(--e-3);align-items:center;padding:var(--pad-celula);border-bottom:1px solid var(--linha)}
.esq-linha-tabela>.esqueleto{height:11px;margin:0}
@keyframes brilho{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.esqueleto{animation:none}.carregando:not(.toast):not(.selo):not(.tag)::before{animation-duration:1.6s}}
.erro-tela{display:grid;justify-items:center;gap:var(--e-2);padding:var(--e-7) var(--e-5);text-align:center;background:var(--erro-fundo);border:1px solid var(--erro-borda);border-radius:var(--r-md)}
.erro-tela .ic{width:34px;height:34px;border-radius:var(--r-md);display:grid;place-items:center;background:var(--erro);color:#fff;font-size:var(--fs-titulo-3)}
.erro-tela b{font-size:var(--fs-corpo-g);color:var(--erro-tinta);font-family:var(--fonte-titulo)}
.erro-tela p{font-size:var(--fs-dado);color:var(--erro-tinta);max-width:52ch;line-height:var(--lh-media)}
.erro-tela code{font-family:var(--fonte-mono);font-size:var(--fs-nota);background:var(--superficie);border:1px solid var(--erro-borda);border-radius:var(--r-xs);padding:2px 6px;color:var(--erro-tinta)}
.sucesso-tela{display:grid;justify-items:center;gap:var(--e-2);padding:var(--e-7) var(--e-5);text-align:center;background:var(--ok-fundo);border:1px solid var(--ok-borda);border-radius:var(--r-md)}
.sucesso-tela .ic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--ok);color:#fff;font-size:var(--fs-titulo-3)}
.sucesso-tela b{font-size:var(--fs-corpo-g);color:var(--ok-tinta);font-family:var(--fonte-titulo)}
.sucesso-tela p{font-size:var(--fs-dado);color:var(--ok-tinta);max-width:52ch;line-height:var(--lh-media)}
.sucesso-tela ul{text-align:left;font-size:var(--fs-dado);color:var(--ok-tinta);margin-left:var(--e-4)}
/* Selo de estado inline (dentro de cabeçalho de cartão, linha de tabela, aba) */
.selo{display:inline-flex;align-items:center;gap:5px;padding:1px 7px;border:1px solid var(--linha);border-radius:var(--r-sm);background:var(--superficie-2);font:var(--peso-forte) var(--fs-rotulo)/1.6 var(--fonte-corpo);color:var(--texto-3)}
.selo.ok{background:var(--ok-fundo);border-color:var(--ok-borda);color:var(--ok-tinta)}
.selo.erro{background:var(--erro-fundo);border-color:var(--erro-borda);color:var(--erro-tinta)}
.selo.atencao{background:var(--atencao-fundo);border-color:var(--atencao-borda);color:var(--atencao-tinta)}
.selo.carregando::before{content:"";width:9px;height:9px;border:1.5px solid var(--navy-300);border-right-color:transparent;border-radius:50%;animation:girar .6s linear infinite}
.selo.desabilitado{color:var(--apagado-2);background:var(--superficie-3)}
/* Área desabilitada por permissão (perfil sem acesso de escrita) */
.sem-permissao{position:relative;opacity:.6;pointer-events:none;filter:saturate(.4)}
.nota-permissao{display:inline-flex;align-items:center;gap:5px;font-size:var(--fs-nota);color:var(--texto-apagado);background:var(--superficie-3);border:1px dashed var(--linha-2);border-radius:var(--r-sm);padding:3px 8px}
.nota-permissao::before{content:"🔒";font-size:var(--fs-rotulo)}

/* ==========================================================================
   Camada do sistema — o que o sistema de design não cobre, e a ponte entre
   os nomes que ele usa e os que o app.js e o index.html usam hoje.

   O sistema de design (tokens/ e css/, acima) veio do Claude Design em
   11/09/2026 e fica intocado: quando ele mudar lá, basta trocar aqueles
   blocos. Tudo o que é do app mora daqui para baixo, escrito com os tokens.
   ========================================================================== */
html,body{height:100%}

/* ---------- Tela de entrada ---------- */
#login{display:none;place-items:center;height:100vh;background:
  radial-gradient(1200px 600px at 20% -10%,var(--navy-600),transparent),
  radial-gradient(900px 500px at 100% 100%,#15476833,transparent),var(--menu-fundo)}
#login.on{display:grid}
.login-box{background:var(--superficie);padding:38px 34px;border-radius:var(--r-xl);width:380px;max-width:calc(100vw - 32px);box-shadow:var(--sh-3)}
.login-box h1{font-size:var(--fs-titulo-1);color:var(--navy-800)}
.login-box .sub{color:var(--texto-apagado);font-size:var(--fs-dado);margin:6px 0 24px}
.login-box label{display:block;font:var(--fonte-rotulo);color:var(--texto-2);margin:14px 0 5px}
.login-box input{width:100%;min-height:var(--alt-controle-lg);padding:8px 12px;border:1px solid var(--linha-2);border-radius:var(--r-sm);outline:none;background:var(--superficie);box-shadow:var(--sh-interna)}
.login-box input:focus{border-color:var(--primaria);box-shadow:var(--anel-suave)}
.login-box button{width:100%;margin-top:22px;min-height:var(--alt-controle-lg);padding:0 12px;background:var(--primaria);color:#fff;border:0;border-radius:var(--r);font-weight:var(--peso-forte);cursor:pointer;transition:background var(--mov-rapido)}
.login-box button:hover{background:var(--primaria-forte)}
.login-erro{color:var(--erro-tinta);font-size:var(--fs-dado);margin-top:12px;min-height:18px}
.login-erro:empty{min-height:0;margin-top:0}
.login-ok{color:var(--navy-800);font-size:var(--fs-dado);margin-top:12px;line-height:var(--lh-media)}
.login-ok:empty{display:none}
.login-box button.login-link{width:auto;min-height:0;display:block;margin:16px auto 0;padding:0;background:none;color:var(--primaria);font-weight:var(--peso-medio);font-size:var(--fs-dado);text-decoration:underline;text-underline-offset:3px}
.login-box button.login-link:hover{background:none;color:var(--primaria-forte)}
.login-box button:disabled{opacity:.6;cursor:wait}
.login-dica{margin-top:18px;padding-top:16px;border-top:1px solid var(--linha);font-size:var(--fs-nota);color:var(--texto-apagado);line-height:1.7}

/* ---------- Estrutura com os nomes do app (#app, nav, main) ----------
   Mesmos valores de css/shell.css (.app, .menu, .conteudo). */
#app{display:none;height:100vh}
#app.on{display:grid;grid-template-columns:var(--largura-menu) 1fr;background:var(--fundo)}
nav{display:flex;flex-direction:column;background:linear-gradient(180deg,var(--menu-fundo) 0%,var(--menu-fundo-2) 100%);color:var(--texto-sobre-escuro-2);overflow-y:auto;border-right:1px solid var(--navy-900)}
.brand{padding:var(--e-4) var(--e-4) var(--e-3);border-bottom:1px solid var(--menu-linha)}
.brand b{display:block;font-family:var(--fonte-titulo);font-size:var(--fs-corpo-g);font-weight:var(--peso-forte);color:#fff;letter-spacing:-.01em}
.brand span{display:block;font-size:var(--fs-rotulo);color:var(--texto-sobre-escuro-3);text-transform:uppercase;letter-spacing:var(--tr-rotulo)}
/* Marca do Totum (16/09/2026): simbolo + nome, no menu e na entrada. O anel
   fechado de quatro arcos e o desenho do nome — as partes formando o todo. */
.brand{display:flex;align-items:center;gap:9px}
.marca{width:26px;height:26px;flex-shrink:0;display:block}
.marca-entrada{display:flex;align-items:center;gap:12px;margin-bottom:24px}
.marca-entrada .marca{width:46px;height:46px}
.marca-entrada b{display:block;font-family:var(--fonte-titulo);font-size:30px;font-weight:var(--peso-forte);letter-spacing:-.02em;color:var(--navy-800);line-height:1.05}
.marca-entrada span{display:block;font-size:var(--fs-nota);text-transform:uppercase;letter-spacing:.2em;color:var(--texto-apagado)}
/* A versao na tela: ela perguntou por que o sistema do marido mostra e o dela
   nao. No rodape do menu e embaixo da caixa de entrada — discreta, e sempre a
   mesma que o servidor esta servindo. */
.versao-selo{margin-top:18px;text-align:center;font-size:var(--fs-nota);color:var(--navy-200)}
.nav-versao{display:block;margin-top:7px;font-size:var(--fs-micro);color:var(--texto-sobre-escuro-3);font-variant-numeric:tabular-nums}
/* 09/10/2026: saiu `nav .grupo{...uppercase...}`. Era o estilo do ROTULO
   cinza de secao da lateral. Na barra, `.grupo` virou o container do grupo
   inteiro — e `text-transform` herda, entao todo item do painel aparecia em
   CAIXA ALTA com espacamento de rotulo. Quem desenha a barra sao
   `.grupo-bt` e `.grupo-painel`, mais abaixo. */
nav a{display:flex;align-items:center;gap:var(--e-2);min-height:32px;padding:var(--e-1) var(--e-4);color:var(--texto-sobre-escuro-2);font-size:var(--fs-corpo);border-left:3px solid transparent;transition:background var(--mov-rapido),color var(--mov-rapido)}
/* O base.css pinta link visitado de navy — no menu, navy sobre navy some. */
nav a:visited{color:var(--texto-sobre-escuro-2)}
nav a:hover{background:var(--menu-hover);color:#fff;text-decoration:none}
nav a.on{background:var(--menu-ativo);color:#fff;border-left-color:var(--ouro-500);font-weight:var(--peso-forte)}
nav a .ic{width:18px;text-align:center;font-size:var(--fs-corpo-g);font-style:normal;opacity:.9;flex-shrink:0}
nav .badge{margin-left:auto;min-width:20px;padding:1px 6px;border-radius:var(--r-pill);background:var(--erro);color:#fff;font:var(--peso-maximo) var(--fs-micro)/1.6 var(--fonte-corpo);text-align:center;font-variant-numeric:tabular-nums}
nav .badge.cinza{background:#FFFFFF26;color:var(--texto-sobre-escuro-2)}
.nav-pe{margin-top:auto;padding:var(--e-3) var(--e-4);border-top:1px solid var(--menu-linha);font-size:var(--fs-nota);color:var(--texto-sobre-escuro-3)}
.nav-pe b{display:block;font-size:var(--fs-dado);color:#fff}
.nav-pe button{margin-top:var(--e-2);min-height:var(--alt-controle-sm);padding:0 var(--e-3);background:#FFFFFF0F;border:1px solid #FFFFFF33;color:var(--texto-sobre-escuro-2);border-radius:var(--r-sm);font-size:var(--fs-nota);cursor:pointer;transition:background var(--mov-rapido)}
.nav-pe button:hover{background:#FFFFFF1F;border-color:#FFFFFF4D;color:#fff}
main{overflow-y:auto;padding:var(--e-6) var(--e-7) var(--e-9);min-width:0}
.topo p{color:var(--texto-apagado);font-size:var(--fs-dado);margin-top:var(--e-1);max-width:var(--largura-texto)}

/* ---------- Gaveta com os nomes do app (.drawer*) ----------
   Mesmos valores de .gaveta* em css/superficies.css. */
.drawer{position:fixed;top:0;right:0;bottom:0;width:var(--largura-gaveta);display:flex;flex-direction:column;background:var(--superficie);z-index:calc(var(--z-gaveta) + 1);box-shadow:var(--sh-3);translate:100% 0;transition:translate var(--mov-gaveta)}
.drawer.on{translate:0 0}
.drawer-cab{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e-4);padding:var(--e-4) var(--e-5);border-bottom:1px solid var(--linha)}
.drawer-cab h3{font-size:var(--fs-titulo-2)}
.drawer-cab .meta{font-size:var(--fs-apoio);color:var(--texto-apagado);margin-top:var(--e-1)}
.drawer-corpo{flex:1;overflow-y:auto;padding:var(--e-5)}
.drawer-pe{display:flex;align-items:center;justify-content:flex-end;gap:var(--e-2);flex-wrap:wrap;padding:var(--e-3) var(--e-5);border-top:1px solid var(--linha);background:var(--superficie-2)}

/* ---------- Notificações com o nome do app (#toasts) ---------- */
#toasts{position:fixed;right:var(--e-5);bottom:var(--e-5);z-index:var(--z-toast);display:flex;flex-direction:column;gap:var(--e-2);max-width:420px}

/* ---------- Inbox (WhatsApp e Instagram) ---------- */
.inbox{display:grid;grid-template-columns:310px 1fr;height:calc(100vh - 148px);background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--sh-1)}
.conv-lista{border-right:1px solid var(--linha);overflow-y:auto;background:var(--superficie-2)}
.conv-filtros{display:flex;gap:5px;padding:10px;border-bottom:1px solid var(--linha);background:var(--superficie);position:sticky;top:0;z-index:2}
.conv-filtros button{flex:1;min-height:var(--alt-controle-sm);padding:0 5px;font-size:var(--fs-nota);border:1px solid var(--linha-2);background:var(--superficie);border-radius:var(--r-sm);cursor:pointer}
.conv-filtros button.on{background:var(--primaria);color:#fff;border-color:var(--primaria)}
.conv{padding:11px 13px;border-bottom:1px solid var(--linha);cursor:pointer}
.conv:hover{background:var(--superficie-3)}
.conv.on{background:var(--primaria-tenue);border-left:3px solid var(--primaria);padding-left:10px}
.conv .l1{display:flex;justify-content:space-between;align-items:center;gap:8px}
.conv b{font-size:var(--fs-dado)}
.conv .h{font-size:var(--fs-micro);color:var(--apagado-2);white-space:nowrap}
.conv .previa{font-size:var(--fs-nota);color:var(--texto-apagado);margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conv .l2{display:flex;gap:5px;margin-top:5px;align-items:center}
.conv .nl{background:var(--erro);color:#fff;font-size:var(--fs-micro);font-weight:var(--peso-maximo);padding:0 6px;border-radius:var(--r-pill)}
.chat{display:flex;flex-direction:column;min-width:0}
.chat-cab{padding:12px 16px;border-bottom:1px solid var(--linha);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.chat-cab b{font-size:var(--fs-corpo-g)}
.chat-cab .sub{font-size:var(--fs-nota);color:var(--texto-apagado)}
/* ---------- A conversa com a cara do WhatsApp (16/09/2026) ----------
   Pedido dela, com os prints do Zappy: "na tela do inbox - whatsapp, quero
   que tenha o mesmo layout do whatsapp". Quem atende passa o dia dentro do
   aplicativo — tela parecida e tela que ninguem precisa aprender. */
.chat{position:relative}
.chat-cab .quem{display:flex;align-items:center;gap:10px;min-width:0}
.ava{width:38px;height:38px;flex-shrink:0;border-radius:50%;background:var(--navy-100);color:var(--navy-700);display:grid;place-items:center;font:var(--peso-forte) 13px/1 var(--fonte-corpo)}
.msgs{flex:1;overflow-y:auto;padding:14px 6% 18px;display:flex;flex-direction:column;background-color:#EFE7DE;background-image:radial-gradient(#00000008 1px,transparent 1px),radial-gradient(#00000008 1px,transparent 1px);background-size:26px 26px;background-position:0 0,13px 13px}
.msgs .dia{align-self:center;margin:14px 0 4px}
.msgs .dia span{background:#FFFFFFD9;color:#54656F;font-size:var(--fs-nota);text-transform:uppercase;letter-spacing:.04em;padding:5px 12px;border-radius:8px;box-shadow:0 1px .5px #0b141a1a}
.bolha{position:relative;max-width:min(66ch,74%);margin-top:8px;padding:6px 9px 7px;border-radius:8px;font-size:var(--fs-dado);line-height:1.35;color:#111B21;white-space:pre-wrap;word-break:break-word;box-shadow:0 1px .5px #0b141a21}
.bolha.dela{background:#fff;align-self:flex-start;border-top-left-radius:0}
.bolha.minha{background:#D9FDD3;align-self:flex-end;border-top-right-radius:0}
.bolha::before{content:"";position:absolute;top:0;width:8px;height:13px}
.bolha.dela::before{left:-8px;background:radial-gradient(circle at 100% 0,#0000 8px,#fff 8.5px)}
.bolha.minha::before{right:-8px;background:radial-gradient(circle at 0 0,#0000 8px,#D9FDD3 8.5px)}
/* Mensagem seguida da mesma pessoa nao repete o rabinho — como no aplicativo. */
.bolha.segue{margin-top:2px;border-radius:8px}
.bolha.segue::before{display:none}
.bolha .meta{float:right;margin:7px 0 -2px 10px;font-size:var(--fs-micro);color:#667781;white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
.bolha .tick{letter-spacing:-2px;font-size:var(--fs-nota)}
.bolha .tick.lida{color:#53BDEB}
.bolha .tick.falha{color:var(--erro);letter-spacing:0;font-weight:var(--peso-maximo)}
.bolha.ruim{background:#FFE7E4}
.bolha .erro{clear:both;font-size:var(--fs-nota);color:var(--erro-tinta);padding-top:5px}
.bolha .anexo{display:flex;align-items:center;gap:9px;background:#0000000a;border-radius:6px;padding:8px 10px;margin:0 0 6px;color:inherit;cursor:pointer}
.bolha .anexo:hover{background:#00000014;text-decoration:none}
.bolha .anexo b{display:block;font-size:var(--fs-apoio);font-weight:var(--peso-medio);word-break:break-all}
.bolha .anexo .tipo{font-size:var(--fs-micro);color:#667781}
.chat-envio{padding:9px 12px;border-top:1px solid var(--linha);display:flex;gap:6px;align-items:flex-end;background:#F0F2F5}
.chat-envio textarea{flex:1;padding:10px 14px;border:1px solid transparent;border-radius:9px;resize:none;max-height:130px;outline:none;background:var(--superficie);font-size:var(--fs-dado);line-height:1.35}
.chat-envio textarea:focus{border-color:var(--primaria);box-shadow:var(--anel-suave)}
.btn-redondo{width:38px;height:38px;flex-shrink:0;border:0;border-radius:50%;background:none;color:#54656F;font-size:19px;line-height:1;cursor:pointer;transition:background var(--mov-rapido)}
.btn-redondo:hover{background:#0000000f;color:var(--texto)}
.btn-enviar{width:40px;height:40px;flex-shrink:0;border:0;border-radius:50%;background:var(--primaria);color:#fff;font-size:var(--fs-dado);cursor:pointer;transition:background var(--mov-rapido)}
.btn-enviar:hover{background:var(--primaria-forte)}
.btn-enviar:disabled{opacity:.6;cursor:wait}
.zap-menu,.zap-emojis{position:absolute;bottom:58px;left:14px;z-index:5;background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r-md);box-shadow:var(--sh-3)}
.zap-menu{padding:5px;min-width:196px}
.zap-menu button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;border:0;background:none;font-size:var(--fs-apoio);text-align:left;cursor:pointer;border-radius:var(--r-sm);color:var(--texto)}
.zap-menu button:hover{background:var(--superficie-3)}
.zap-emojis{padding:8px;width:296px;max-height:232px;overflow-y:auto;display:grid;grid-template-columns:repeat(8,1fr);gap:2px}
.zap-emojis button{border:0;background:none;font-size:20px;line-height:1;padding:5px 0;cursor:pointer;border-radius:6px}
.zap-emojis button:hover{background:var(--superficie-3)}
.inbox .vazio{height:100%;align-content:center}

/* ---------- Diversos que só o app tem ---------- */
.script-corpo{display:none}
.script-corpo.on{display:block}
.msg-vazia{text-align:center;padding:44px 20px;color:var(--texto-apagado)}
.msg-vazia b{display:block;font-family:var(--fonte-titulo);font-size:var(--fs-corpo-g);color:var(--texto-2);margin-bottom:5px}

/* ==========================================================================
   Ponte de compatibilidade. Cada regra aqui existe porque o sistema de design
   supõe uma marcação que o app ainda não tem. Some quando a tela migrar.
   ========================================================================== */

/* O app espaça blocos por margin-bottom; o design, por margem entre irmãos.
   Os dois juntos dobram o vão, então vale o do app. */
.card .corpo>*+*{margin-top:0}
.aviso{margin-bottom:var(--e-3)}
.aviso+.aviso,.aviso+.card,.card+.aviso{margin-top:0}
.alerta{margin-bottom:var(--e-2)}
.alerta+.alerta{margin-top:0}
.fila{margin-bottom:var(--e-2)}
.fila+.fila{margin-top:0}
.script{margin-bottom:var(--e-3)}
.script+.script{margin-top:0}
.check{margin-bottom:var(--e-1)}

/* Aviso "b" do app é o "i" (informação) do design; "c" e sem variante são o neutro. */
.aviso.b{background:var(--info-fundo);border-color:var(--info-borda);color:var(--info-tinta)}
.aviso.b::before{content:"ℹ"}

/* Alerta do app: o ícone é um emoji e o texto vem num <div> sem classe. */
.alerta .ic,.alerta.critico .ic,.alerta.atencao .ic,.alerta.info .ic,.alerta.ok .ic{width:auto;height:auto;background:none;color:inherit;font-size:var(--fs-dado);line-height:1.3}
.alerta>div{flex:1;min-width:0}
.alerta>a{margin-left:auto}

/* A linha de apoio da fila mistura texto e <b> em linha: em flex, cada pedaço
   virava um item com vão próprio. */
.fila .sub{display:block}

/* Abas: o app marca a ativa com .on, o design com aria-selected. */
.abas button.on{color:var(--navy-800);border-bottom-color:var(--primaria);font-weight:var(--peso-forte)}
/* Abas dentro do corpo da gaveta (orçamento): de ponta a ponta, como no
   design, e com respiro antes do primeiro campo. */
.drawer-corpo .abas{margin-bottom:var(--e-4)}
.drawer-corpo>.abas:first-child{margin:calc(var(--e-5) * -1) calc(var(--e-5) * -1) var(--e-4)}

/* 126 dos 155 <th> do app estão fora de <thead>. Mesmo visual para todos, e
   quebrando linha como antes — nowrap alargava tabela dentro da gaveta. */
table th{position:sticky;top:0;z-index:var(--z-conteudo);text-align:left;padding:var(--pad-celula);background:var(--superficie-2);font:var(--fonte-cabecalho-tabela);text-transform:uppercase;letter-spacing:var(--tr-rotulo);color:var(--texto-apagado);border-bottom:1px solid var(--linha-2)}
table th,thead th{white-space:normal}
table th.num{text-align:right}

/* Linha de formulário: o app conta com duas (ou três) colunas fixas. */
.linha{grid-template-columns:1fr 1fr}
.linha3{grid-template-columns:1fr 1fr 1fr}
@media (max-width:640px){.linha,.linha3{grid-template-columns:1fr}}

/* A seta do <select> do design (dois gradientes de 6px) sai como dois
   tracinhos. Troca por um chevron desenhado. */
.campo select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236B6256' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-size:10px 6px;background-position:right 12px center;background-repeat:no-repeat}

/* "Vazio" no app é texto solto, sem .ic/b/p. */
.vazio{color:var(--texto-apagado);font-size:var(--fs-corpo)}

/* ---------- Telas estreitas (mesma regra de antes, com o menu novo) ---------- */
/* 09/10/2026: as regras da LATERAL sairam deste bloco — menu virando coluna de
   icones, rotulo de grupo escondido, selo no canto do icone, marca virando
   monograma. Com a barra no topo nada disso existe, e `nav .grupo{display:none}`
   escondia a navegacao inteira: `.grupo` deixou de ser rotulo e virou o botao. */
@media (max-width:980px){
  main{padding:var(--e-5) var(--e-4) var(--e-8)}
  .inbox{grid-template-columns:1fr}
  .conv-lista{display:none}
}

/* ---------- Celular (11/09/2026) ----------
   Pedido dela: "quero que a visualização do sistema se ajuste também a
   Mobile". Abaixo de 760px o menu deixa de ser coluna e vira barra no topo,
   que rola de lado: numa tela de 390px, 60px de coluna eram 15% da largura
   gastos com ícone. A página passa a rolar inteira, em vez de rolar só o
   miolo — no celular, barra de endereço e teclado brigam com 100vh. */
@media (max-width:760px){
  #app.on{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:auto;min-height:100dvh}
  /* 09/10/2026: a barra ja e horizontal em qualquer largura, entao aqui so
     resta gruda-la no alto quando a pagina rola. As regras que transformavam
     a lateral em fileira de icones sairam — inclusive `nav .grupo{display:none}`,
     que agora esconderia a navegacao inteira. */
  #app>nav{position:sticky;top:0;z-index:var(--z-fixo)}
  .nav-pe button{min-height:38px}
  main{overflow:visible;padding:var(--e-4) var(--e-3) var(--e-8)}

  /* Dedo, nao mouse: alvo de toque maior nos botoes de tela. */
  .topo{flex-direction:column;align-items:stretch;gap:var(--e-3)}
  .topo-acoes{width:100%}
  .topo-acoes .btn{flex:1 1 auto;min-height:var(--alt-controle-lg)}
  .btn{min-height:var(--alt-controle-lg)}
  .btn.sm{min-height:32px}

  /* Tabela larga rola DENTRO do cartao; antes empurrava a pagina de lado. */
  .card .corpo{overflow-x:auto}
  .tab-rolar{max-height:none}
  .linha,.linha3{grid-template-columns:1fr}

  .fila{flex-direction:column;align-items:stretch}
  .fila .acoes{width:100%}
  .fila .acoes .btn{flex:1 1 auto}
  .alerta{flex-wrap:wrap}
  .alerta>a{margin-left:0}
  .col{flex:0 0 84vw}

  .drawer{width:100vw}
  .drawer-cab,.drawer-pe{padding-left:var(--e-4);padding-right:var(--e-4)}
  .drawer-corpo{padding:var(--e-4)}
  .abas{padding:0 var(--e-3)}
  #toasts{left:var(--e-3);right:var(--e-3);bottom:var(--e-3);max-width:none}

  /* Inbox: a lista de conversas SOME hoje no estreito — sem ela nao da para
     escolher com quem falar. No celular ela volta, em cima do chat. */
  .inbox{grid-template-rows:minmax(130px,36vh) 1fr;height:auto;min-height:76vh}
  .conv-lista{display:block;border-right:0;border-bottom:1px solid var(--linha)}
  .msgs{min-height:220px}
  .chat-envio{position:sticky;bottom:0;background:var(--superficie)}
}

/* DRE em escada (17/09/2026): o subtotal tem que saltar aos olhos, senao a
   demonstracao vira lista. Grupo em negrito, item recuado e apagado,
   subtotal com regua em cima e fundo levemente marcado. */
table.dre .dre-grupo td{font-weight:var(--peso-medio);border-top:1px solid var(--linha-2)}
table.dre .dre-item td{color:var(--texto-2);font-size:var(--fs-dado);border-top:0}
table.dre .dre-subtotal td{border-top:2px solid var(--linha);background:var(--superficie-2);
  padding-top:9px;padding-bottom:9px}
table.dre .dre-subtotal:last-child td{border-bottom:2px solid var(--linha)}

/* Financeiro organizado (17/09/2026). Ela: "ta tudo muito solto, nao tem
   filtro, as contas todas do sistema aparecem em uma tela so, ta um mingau."
   A barra de filtro em duas linhas, o mes como separador com subtotal e o
   rodape que diz o que esta sendo somado. */
.barra-filtro{margin-top:12px;display:flex;flex-direction:column;gap:7px}
.barra-filtro .filtros{margin:0;flex-wrap:wrap;align-items:center}
.barra-filtro select{padding:5px 9px;border:1px solid var(--linha-2);border-radius:var(--r-sm);
  background:var(--superficie);font-size:var(--fs-dado);color:var(--texto-2);max-width:230px}
.barra-filtro input[type=date]{padding:5px 8px;border:1px solid var(--linha-2);
  border-radius:var(--r-sm);background:var(--superficie);font-size:var(--fs-dado)}
button.vinco{border:0;background:none;color:var(--mut);font-size:var(--fs-dado);
  text-decoration:underline;cursor:pointer;padding:5px 4px}
button.vinco:hover{color:var(--texto)}

/* O mes e a unidade de conferencia de um livro de contas — por isso ele
   separa e soma, em vez de a lista correr solta. */
table.lista-fin .mes-sep td{background:var(--superficie-3);border-top:1px solid var(--linha-2);
  border-bottom:1px solid var(--linha-2);padding-top:7px;padding-bottom:7px}

.rodape-lista{display:flex;gap:14px;align-items:center;justify-content:space-between;
  flex-wrap:wrap;margin-top:10px;font-size:var(--fs-dado);color:var(--texto-2)}
.rodape-lista .paginas{display:flex;gap:8px;align-items:center}

/* Menu solto: as acoes que nao sao do dia a dia saem do topo e entram aqui. */
.menu-canto{position:relative;display:inline-block}
.menu-solto{position:absolute;right:0;top:calc(100% + 5px);z-index:20;min-width:232px;
  background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r-md);
  box-shadow:var(--sh-3);padding:5px}
.menu-solto button{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;
  border:0;background:none;font-size:var(--fs-apoio);text-align:left;cursor:pointer;
  border-radius:var(--r-sm);color:var(--texto)}
.menu-solto button:hover{background:var(--superficie-3)}

/* Plano de contas (17/09/2026). Ela: "que a gente consiga visualizar o plano
   de contas por inteiro, pra dentro dele conseguir alterar, excluir e incluir
   categorias." Cada linha e um formulario que salva ao sair do campo — por
   isso o retorno visual do "salvo" e discreto e curto. */
.pc-titulo{font-size:var(--fs-nota);text-transform:uppercase;letter-spacing:.5px;color:var(--mut);
  margin:16px 0 6px;border-bottom:1px solid var(--linha);padding-bottom:4px}
.pc-titulo .sub{text-transform:none;letter-spacing:0;margin-left:7px}
.pc-grupo:first-of-type .pc-titulo{margin-top:0}
.pc-linha{display:flex;gap:6px;align-items:center;padding:4px 0}
.pc-linha input,.pc-linha select{padding:4px 7px;border:1px solid var(--linha-2);
  border-radius:var(--r-sm);background:var(--superficie);font-size:var(--fs-nota);min-width:0}
.pc-linha .pc-cod{width:64px;font-family:ui-monospace,monospace;font-size:var(--fs-nota)}
.pc-linha .pc-nome{flex:1}
.pc-linha .pc-tipo{width:92px}
.pc-linha .pc-grupo-sel{width:150px}
.pc-linha .pc-uso{width:82px;text-align:right;white-space:nowrap}
.pc-linha.inativa{opacity:.5}
.pc-linha .salvo{border-color:var(--ok-borda);background:var(--ok-fundo)}

/* Gráficos (17/09/2026). Ela: "inclua uns gráficos, no sistema e nos pdfs."
   SVG desenhado a mao, com as cores vindas das variaveis do tema — assim o
   grafico acompanha claro e escuro sem uma segunda paleta para manter. */
.grafico{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--r);
  padding:12px 14px 6px;margin-bottom:14px}
.gtitulo{display:flex;gap:12px;align-items:center;flex-wrap:wrap;font-size:var(--fs-dado);
  color:var(--texto-2);font-weight:var(--peso-medio);margin-bottom:6px}
.glegenda{display:flex;gap:12px;align-items:center;margin-left:auto;font-size:var(--fs-nota);color:var(--mut)}
.glegenda span{display:inline-flex;gap:5px;align-items:center}
.glegenda i{width:9px;height:9px;border-radius:2px;display:inline-block}
/* Muitos meses nao encolhem a barra ate sumir: rolam na horizontal. */
.grolar{overflow-x:auto;overflow-y:hidden}
.grafico svg{display:block}
.grafico .ggrade{stroke:var(--linha);stroke-width:.6;stroke-dasharray:2 3}
.grafico .geixoline{stroke:var(--linha-2);stroke-width:.8}
.grafico text.geixo{font-size:var(--fs-micro);fill:var(--mut);font-variant-numeric:tabular-nums}
.grafico text.grotulo{font-size:var(--fs-micro);fill:var(--texto-2)}
.grafico text.gvalor{font-size:var(--fs-micro);fill:var(--mut);font-variant-numeric:tabular-nums}
.gvazio{background:var(--superficie-2);border:1px dashed var(--linha-2);border-radius:var(--r);
  padding:20px;text-align:center;color:var(--mut);font-size:var(--fs-dado);margin-bottom:14px}

/* ========== Reuniões: calendário (21/09/2026) ==========
   Ela: "inclua aqui um dashboard de calendário clicável pra gente acompanhar os
   agendamentos". O que tem data vai na grade; o que ainda não tem (convite sem
   resposta) vai no painel ao lado, porque é o que mais precisa de olho. */
.reu-painel{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--e-4);align-items:start}
@media (max-width:1100px){.reu-painel{grid-template-columns:minmax(0,1fr)}}
.reu-cal{overflow:hidden}
.reu-cal-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);padding:var(--e-3) var(--e-4);border-bottom:1px solid var(--linha)}
.reu-cal-cab h3{font:var(--peso-forte) var(--fs-titulo-3)/1.2 var(--fonte-titulo);color:var(--texto)}
.reu-nav{display:flex;gap:var(--e-1);align-items:center}
.reu-grade{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.reu-sem{padding:var(--e-2);font:var(--peso-forte) 11px/1 var(--fonte-corpo);text-transform:uppercase;letter-spacing:.06em;color:var(--texto-apagado);border-bottom:1px solid var(--linha);background:var(--superficie-2)}
.reu-dia{min-height:108px;padding:6px;border-right:1px solid var(--linha);border-bottom:1px solid var(--linha);display:flex;flex-direction:column;gap:3px;min-width:0;background:var(--superficie)}
.reu-dia:nth-child(7n){border-right:0}
.reu-dia.fds{background:var(--superficie-2)}
.reu-dia.fora{background:var(--superficie-3)}
.reu-dia.fora .reu-num{color:var(--apagado-2)}
.reu-num{align-self:flex-start;min-width:24px;height:24px;padding:0 6px;border-radius:var(--r-pill);font:var(--peso-medio) 12px/24px var(--fonte-corpo);color:var(--texto-2);background:none;border:0;cursor:default;text-align:center;font-variant-numeric:tabular-nums}
.reu-num.tem{cursor:pointer;font-weight:var(--peso-forte)}
.reu-num.tem:hover{background:var(--superficie-3)}
.reu-dia.hoje .reu-num{background:var(--primaria);color:#fff;font-weight:var(--peso-forte)}
.reu-chip{display:block;width:100%;text-align:left;border:0;border-left:3px solid var(--primaria);background:var(--primaria-tenue);color:var(--navy-800);border-radius:var(--r-xs);padding:3px 6px;font:var(--peso-medio) 11.5px/1.35 var(--fonte-corpo);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer}
.reu-chip:hover{filter:brightness(.95)}
.reu-chip:focus-visible,.reu-num:focus-visible,.reu-item:focus-visible{outline:2px solid var(--acento);outline-offset:1px}
.reu-chip b{font-variant-numeric:tabular-nums;margin-right:5px}
.reu-chip.realizada{border-left-color:var(--ok);background:var(--ok-fundo);color:var(--ok-tinta)}
.reu-chip.atrasada{border-left-color:var(--atencao);background:var(--atencao-fundo);color:var(--atencao-tinta)}
.reu-chip.cancelada{border-left-color:var(--linha-3);background:var(--superficie-3);color:var(--apagado);text-decoration:line-through}
.reu-mais{border:0;background:none;padding:0 6px;font:var(--peso-medio) 11px/1.4 var(--fonte-corpo);color:var(--texto-apagado);cursor:pointer;text-align:left}
.reu-mais:hover{color:var(--primaria)}
.reu-lado .card+.card{margin-top:var(--e-4)}
.reu-item{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--linha);background:none;padding:10px var(--e-4);cursor:pointer;font:inherit;color:inherit}
.reu-item:last-child{border-bottom:0}
.reu-item:hover{background:var(--superficie-2)}
.reu-item b{display:block;font-size:var(--fs-apoio);color:var(--texto)}
.reu-item span{display:block;font-size:var(--fs-nota);color:var(--texto-apagado);margin-top:2px}
.reu-legenda{display:flex;gap:var(--e-4);flex-wrap:wrap;padding:var(--e-3) var(--e-4);border-top:1px solid var(--linha);font-size:var(--fs-nota);color:var(--texto-apagado)}
.reu-legenda i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.reu-ficha dt{font:var(--peso-forte) 11px/1.2 var(--fonte-corpo);text-transform:uppercase;letter-spacing:.06em;color:var(--texto-apagado);margin-top:var(--e-3)}
.reu-ficha dt:first-child{margin-top:0}
.reu-ficha dd{margin:3px 0 0;color:var(--texto);font-size:var(--fs-apoio);line-height:1.45}
@media (max-width:640px){.reu-dia{min-height:74px;padding:3px}.reu-chip b{display:none}.reu-chip{font-size:var(--fs-micro);padding:2px 4px}}

/* ========== Cartões clicáveis (21/09/2026) ==========
   Número que abre a lista que ele conta. O cursor e a borda no hover dizem que
   dá para clicar; o foco visível, que dá para chegar pelo teclado. */
.kpi-clicavel{cursor:pointer;transition:border-color .15s,box-shadow .15s}
.kpi-clicavel:hover{border-color:var(--navy-300);box-shadow:0 0 0 3px var(--primaria-tenue),var(--sh-1)}
.kpi-clicavel:focus-visible{outline:2px solid var(--acento);outline-offset:2px}
.kpi-clicavel .rot::after{content:"›";margin-left:auto;font-size:var(--fs-dado);line-height:1;color:var(--apagado-2)}
.kpi-clicavel:hover .rot::after{color:var(--primaria)}

/* ========== Faturamento mensal (21/09/2026) ========== */
.fat-tabela td{vertical-align:top}
.fat-passos{display:flex;gap:4px;flex-wrap:wrap}
.fat-sub{font-size:var(--fs-nota);color:var(--mut)}
.fat-erro{font-size:var(--fs-nota);color:var(--erro-tinta);margin-top:4px;max-width:46ch}
.fat-aviso{font-size:var(--fs-nota);color:var(--atencao-tinta);margin-top:4px;max-width:46ch}
.fat-info{font-size:var(--fs-nota);color:var(--mut);margin-top:4px;max-width:46ch}
.fat-acoes{white-space:nowrap;text-align:right}
.fat-acoes .btn{margin-left:4px}
tr.fat-feita td{background:var(--ok-fundo)}

/* ========== Busca de cliente/lead no orçamento (21/09/2026) ========== */
.busca-cli{position:relative}
.busca-res{position:absolute;left:0;right:0;top:calc(100% - 18px);z-index:30;background:var(--superficie,#fff);
  border:1px solid var(--linha);border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);max-height:320px;overflow:auto}
.busca-item{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--linha);
  padding:8px 12px;cursor:pointer;font:inherit;color:inherit}
.busca-item:hover,.busca-item:focus{background:var(--superficie-3)}
.busca-item b{display:block;font-size:var(--fs-apoio)}
.busca-item span{font-size:var(--fs-nota);color:var(--mut)}
.busca-vazia{padding:10px 12px;font-size:var(--fs-nota);color:var(--mut)}


/* ==========================================================================
   RESPIRO — a "pegada" do Prospector (05/10/2026)

   Ela, mostrando o Prospector: "Por que você não faz o layout do totum nessa
   pegada?". Do que gostou: o ar e a tipografia, os chips de filtro com
   contagem, e a tela de trabalho em cartão. O menu lateral fica onde está.

   A paleta não muda UMA cor — navy, ouro e creme já são os mesmos nos dois
   sistemas. O que muda é espaço, tamanho e hierarquia: número grande e
   rótulo pequeno, cartão mais solto, menos coisa disputando a atenção.

   Escopo: tudo pendurado em `.respiro`, nunca em `:root`. É piloto. Para
   levar ao sistema inteiro basta trocar o seletor por `body`; para desfazer,
   basta tirar a classe de uma tela. Nenhuma outra tela foi tocada.
   ========================================================================== */

/* A densidade é TOKEN — e é por isso que levar o respiro ao sistema inteiro
   não exigiu tocar em nenhuma tela. O arquivo já tinha a variante "compacta"
   declarada e nunca ligada; esta é a irmã dela, no outro sentido.

   O piloto fazia isto na unha, pondo padding nos filhos diretos do cartão.
   Funcionava na Régua, que é uma das ~19 telas que põem conteúdo solto no
   cartão — e teria dado padding DOBRADO nas 50 que usam `.corpo`, que é a
   convenção da casa. Pelos tokens, cada uma respira do jeito dela. */
/* 212px dava a mesma coluna que a variante compacta, e com preenchimento
   maior o numero saia MENOR nela que na compacta — medido: 21,4px contra
   24,5px. Cada degrau tem de crescer, senao o botao A+ mente. */
:root[data-densidade="respiro"]{
  --min-cartao:232px;
  --pad-cartao:24px;--pad-cartao-cab:18px 24px;
  --alt-linha:42px;--pad-celula:11px 16px;
  /* 09/10/2026: o raio SAIU daqui. O :root ja traz o do Joao (20px no
     cartao, --mo-raio), e esta linha so servia para desfaze-lo. */
  /* 05/10/2026, ela, depois da primeira publicação: *"Mas não fez diferença
     nenhuma..."*. Tinha razão: eu tinha mexido em ESPAÇO e não em TIPO. Num
     monitor de 1920, oito pixels a mais de respiro são quase invisíveis; dois
     pixels em cada tamanho de letra se enxergam na hora — e é o tipo que dá a
     pegada do Prospector, que lê em ~15px contra os 13 daqui.

     A escala inteira sobe junto, mantendo as PROPORÇÕES entre os degraus:
     subir só o corpo achataria a hierarquia e deixaria título e texto quase
     do mesmo tamanho. A entrelinha abre um ponto, porque texto maior na mesma
     entrelinha fica apertado. */
  /* 09/10/2026, ela: "continua quebrado e minusculo". Medido antes: rotulo
     de cartao em 11,5px ao lado de numero de 32px — meio tamanho de
     diferenca. A escala sobe cerca de 12%, mantendo as proporcoes entre os
     degraus; o NUMERO sobe pouco (32 -> 34) porque ele ja domina, e subir
     junto manteria a distancia que incomoda. */
  --fs-micro:13px;--fs-rotulo:13.5px;--fs-nota:14px;--fs-apoio:14.5px;--fs-dado:15px;
  --fs-corpo:16px;--fs-corpo-g:17px;--fs-titulo-3:18.5px;--fs-titulo-2:21px;--fs-titulo-1:26px;
  --fs-numero:34px;--fs-numero-g:44px;
  --fs-titulo-0:38px;
  --lh-media:1.55;--lh-solta:1.7;
  /* Controles acompanham o texto: botão de 32px com letra de 15 fica
     espremido, e campo de formulário idem. */
  --alt-controle:36px;--alt-controle-sm:30px;
}

/* ===========================================================================
   OS DOIS DEGRAUS ACIMA DO RESPIRO (09/10/2026)
   ===========================================================================
   Ela: "a fonte ta muito pequena" — a segunda vez, depois de eu ja ter
   subido 12%. Eu estava adivinhando de um lado da tela o que e confortavel
   do outro: nao sei o tamanho do monitor dela, a distancia dos olhos nem o
   zoom do navegador.

   Entao em vez de adivinhar um terceiro numero, o arquivo passa a ter os
   degraus e ELA escolhe (os botoes A- e A+ no canto da barra). "Grande" e o
   novo padrao: quem reclama duas vezes esta dizendo que o padrao esta errado.

   Cada degrau mantem as proporcoes entre os tamanhos — o que muda e a
   escala inteira, nao a hierarquia.
   ======================================================================== */
:root[data-densidade="grande"]{
  --min-cartao:252px;
  --pad-cartao:26px;--pad-cartao-cab:20px 26px;
  --alt-linha:46px;--pad-celula:13px 18px;
  --fs-micro:14.5px;--fs-rotulo:15px;--fs-nota:15.5px;--fs-apoio:16px;--fs-dado:16.5px;
  --fs-corpo:18px;--fs-corpo-g:19px;--fs-titulo-3:20.5px;--fs-titulo-2:23px;--fs-titulo-1:28px;
  --fs-numero:37px;--fs-numero-g:48px;
  --fs-titulo-0:42px;
  --lh-media:1.55;--lh-solta:1.7;
  --alt-controle:40px;--alt-controle-sm:34px;
}
/* 282px dava a MESMA coluna que o "grande" (seis por linha num monitor de
   1920), e com preenchimento maior o numero saia MENOR que no degrau de
   baixo — medido: 30,3px contra 30,8px. 310px tira uma coluna e o numero
   volta a crescer com o degrau, que e a unica coisa que ele promete. */
:root[data-densidade="maior"]{
  --min-cartao:310px;
  --pad-cartao:28px;--pad-cartao-cab:22px 28px;
  --alt-linha:50px;--pad-celula:14px 20px;
  --fs-micro:16px;--fs-rotulo:16.5px;--fs-nota:17.5px;--fs-apoio:18px;--fs-dado:18.5px;
  --fs-corpo:20px;--fs-corpo-g:21.5px;--fs-titulo-3:23px;--fs-titulo-2:26px;--fs-titulo-1:31px;
  --fs-numero:40px;--fs-numero-g:52px;
  --fs-titulo-0:46px;
  --lh-media:1.55;--lh-solta:1.7;
  --alt-controle:44px;--alt-controle-sm:38px;
}

/* O painel do menu fica um degrau abaixo do conteudo em qualquer escala: ele
   e lista de navegacao, e lista de 6 itens em letra de corpo vira coluna
   alta demais. */
:root[data-densidade="grande"] .grupo-painel{--fs-corpo:16px}
:root[data-densidade="maior"] .grupo-painel{--fs-corpo:18px}

/* Os dois botoes de tamanho, no canto da barra. Discretos de proposito: sao
   ajuste de quem usa, e nao funcao do sistema. */
.letra{display:flex;align-items:center;gap:2px;flex:none}
.letra button{display:flex;align-items:center;justify-content:center;
  min-width:30px;height:28px;padding:0 6px;border-radius:var(--r-sm);
  border:1px solid var(--menu-linha);background:transparent;
  color:var(--texto-sobre-escuro-2);font:var(--peso-forte) 12px/1 var(--fonte-corpo);
  cursor:pointer;transition:background var(--mov-rapido),color var(--mov-rapido)}
.letra button:hover:not(:disabled){background:var(--menu-hover);color:#fff}
.letra button:disabled{opacity:.35;cursor:default}
@media (max-width:760px){ .letra{display:none} }

/* O que não é token: tamanho do título e do número, que são decisão de
   hierarquia e não de densidade. */
/* 09/10/2026: a coleira do menu saiu.

   Ela existia com motivo: na LATERAL eram 25 itens, e com a escala maior
   "Empresas e licenças" e "Contas a pagar e receber" quebravam em duas
   linhas — menu que quebra deixa de ser lido de relance.

   O motivo acabou quando a lateral virou barra: agora são SEIS rótulos
   curtos, nenhum deles quebra, e os 25 itens moram dentro do painel, que tem
   250px de largura só para eles. A regra ficou segurando a letra da primeira
   coisa que ela vê na tela, sem ter mais o que proteger.

   O PAINEL continua um degrau abaixo do conteúdo: ele é lista de navegação,
   e lista de 6 itens em letra de corpo vira uma coluna alta demais. */
/* 09/10/2026: estas regras eram amarradas ao NOME "respiro". Quando o padrao
   passou a ser "grande", elas parariam de valer e o arejo sumiria junto —
   a letra subiria e o espaco encolheria no mesmo ato. Agora elas valem para
   TUDO que nao e a variante compacta, que e a unica apertada de proposito. */
:root:not([data-densidade="compacta"]) .grupo-painel{--fs-corpo:14.5px}

:root:not([data-densidade="compacta"]) .topo{margin-bottom:var(--e-6);padding-bottom:var(--e-5)}
/* 08/10/2026: esta regra fixava o titulo em --fs-titulo-1 e, sendo mais
   especifica, vencia o .topo h1 do cabecalho de pagina — o titulo ficava
   em 24px por mais que o token dissesse 31. Peguei medindo no navegador,
   nao lendo o CSS. Saiu: o --fs-titulo-0 ja e redefinido por densidade
   (26px no padrao, 31px no respiro), e o espacamento de letra ja vem do
   .topo h1. Esta linha so tinha como efeito desfazer os dois. */
:root:not([data-densidade="compacta"]) .topo p{max-width:var(--largura-texto);color:var(--texto-apagado);
  font-size:var(--fs-corpo);line-height:1.55;margin-top:var(--e-2)}
/* 09/10/2026: o padding do .kpi saiu daqui — `--pad-cartao` ja e 24px no
   respiro e o `.kpi` passou a usar o token, como o `.card` sempre usou. */
/* 09/10/2026: o letter-spacing saiu — desfazia o --tr-rotulo:.10em, que e
   o --mo-track-rotulo do Joao. O tamanho fica: e densidade de verdade. */
:root:not([data-densidade="compacta"]) .kpi .rot{font-size:var(--fs-micro)}
:root:not([data-densidade="compacta"]) .kpi .val{font-size:min(var(--fs-numero-g),13cqi);
  margin:var(--e-3) 0 var(--e-1)}
:root:not([data-densidade="compacta"]) .kpi .meta{font-size:var(--fs-apoio)}

/* As telas que põem conteúdo DIRETO no cartão, sem `.corpo`. A Régua é uma
   delas. A regra é restrita a `.card-solto` justamente para não encostar nas
   que seguem a convenção — padding dobrado é o erro que esta linha evita. */
.card-solto>h2+*{margin-top:var(--e-4)}
.card-solto>*:not(h2):not(table){padding-left:var(--pad-cartao);padding-right:var(--pad-cartao)}
.card-solto>*:last-child{padding-bottom:var(--pad-cartao)}
.card-solto>table th:first-child,.card-solto>table td:first-child{padding-left:var(--pad-cartao)}
.card-solto>table th:last-child,.card-solto>table td:last-child{padding-right:var(--pad-cartao)}

/* ==========================================================================
   CHIPS DE FILTRO COM CONTAGEM

   No Prospector: "Empresas 1", "LinkedIn 1" — o filtro já diz quanto tem
   antes de ser clicado, e zero aparece apagado em vez de sumir. Saber que
   não há nada é informação; descobrir isso clicando é trabalho à toa.
   ========================================================================== */

.chips{display:flex;align-items:center;gap:var(--e-2);flex-wrap:wrap}
.chips>.rot{font:var(--peso-forte) var(--fs-rotulo)/1 var(--fonte-corpo);
  text-transform:uppercase;letter-spacing:var(--tr-rotulo);color:var(--texto-apagado);
  margin-right:var(--e-1)}
.chip{display:inline-flex;align-items:center;gap:var(--e-2);min-height:30px;
  padding:0 var(--e-3);border:1px solid var(--linha-2);border-radius:999px;
  background:var(--superficie);color:var(--texto-2);cursor:pointer;
  font:var(--peso-forte) var(--fs-apoio)/1 var(--fonte-corpo);
  transition:border-color .15s,background .15s,color .15s}
.chip:hover{border-color:var(--navy-300);color:var(--texto)}
.chip:focus-visible{outline:var(--anel);outline-offset:var(--anel-deslocamento)}
.chip .n{font:var(--peso-maximo) var(--fs-nota)/1 var(--fonte-corpo);
  font-variant-numeric:tabular-nums;color:var(--texto-apagado)}
.chip[aria-pressed="true"]{border-color:var(--acento);background:var(--acento-tenue);
  color:var(--acento-tinta);box-shadow:inset 0 0 0 1px var(--acento)}
.chip[aria-pressed="true"] .n{color:var(--acento-tinta)}
.chip[data-vazio="sim"]{opacity:.5}

/* ==========================================================================
   ITEM DE TRABALHO — o cartão com as ações à direita

   A forma do Prospector: o que você está decidindo ocupa o centro, e o que
   dá para fazer com aquilo fica numa coluna à direita, sempre no mesmo
   lugar. O olho não procura o botão: ele já sabe onde está.

   Em tela estreita a coluna desce e vira uma linha de botões — telefone não
   tem dois terços de largura para gastar.
   ========================================================================== */

.trabalho{border:1px solid var(--linha);border-radius:var(--r-cartao);
  background:var(--superficie);margin-bottom:var(--e-4);overflow:hidden}
.trabalho.urgente{border-left:3px solid var(--atencao)}
.trabalho.falhou{border-left:3px solid var(--erro)}
.trabalho-cab{display:flex;gap:var(--e-2);align-items:center;flex-wrap:wrap;
  padding:var(--e-4) var(--e-5);border-bottom:1px solid var(--linha);
  background:var(--superficie-2)}
.trabalho-cab .quem{font:var(--peso-maximo) var(--fs-titulo-3)/1.2 var(--fonte-titulo);
  color:var(--texto)}
.trabalho-cab .sobre{font-size:var(--fs-apoio);color:var(--texto-apagado)}
.trabalho-corpo{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:var(--e-5);
  padding:var(--e-5)}
.trabalho-corpo>.conteudo{min-width:0}
.trabalho-acoes{display:flex;flex-direction:column;gap:var(--e-2);align-self:start}
.trabalho-acoes .rot{font:var(--peso-forte) var(--fs-micro)/1 var(--fonte-corpo);
  text-transform:uppercase;letter-spacing:.09em;color:var(--texto-apagado);
  margin-bottom:var(--e-1)}
.trabalho-acoes .btn{width:100%}
.trabalho-acoes .nota{font-size:var(--fs-nota);color:var(--texto-apagado);line-height:1.45}
@media (max-width:860px){
  .trabalho-corpo{grid-template-columns:1fr}
  .trabalho-acoes{flex-direction:row;flex-wrap:wrap}
  .trabalho-acoes .btn{width:auto;flex:1 1 140px}
  .trabalho-acoes .rot,.trabalho-acoes .nota{flex:1 1 100%}
}


/* ==========================================================================
   CONTROLE SEGMENTADO — do handoff do Afere (07/10/2026)

   Ela, mandando ler o Afere e o Prospector: *"quando eu digo layout, estou me
   referindo a montagem da tela, botoes, o visual. Nao as cores."* Entao vem a
   PECA, com a paleta da Mendes e Lima: o `.af-seg` do handoff desenhado em
   navy e dourado.

   Serve onde hoje ha botoes soltos fazendo papel de aba: escolher UM de
   poucos estados que se excluem. Onde a escolha e multipla, o chip (`.chip`)
   continua sendo o certo.
   ========================================================================== */

.segmentado{display:inline-flex;padding:3px;gap:2px;background:var(--superficie-3);
  border:1px solid var(--linha-2);border-radius:999px}
.segmentado>button{display:inline-flex;align-items:center;gap:var(--e-2);
  min-height:28px;padding:0 var(--e-3);border:0;border-radius:999px;
  background:transparent;color:var(--texto-2);cursor:pointer;
  font:var(--peso-forte) var(--fs-apoio)/1 var(--fonte-corpo);
  transition:background .15s,color .15s}
.segmentado>button:hover{color:var(--texto)}
.segmentado>button:focus-visible{outline:var(--anel);outline-offset:var(--anel-deslocamento)}
.segmentado>button[aria-pressed="true"]{background:var(--superficie);
  color:var(--primaria);box-shadow:var(--sh-1)}
.segmentado>button .n{font:var(--peso-maximo) var(--fs-nota)/1 var(--fonte-corpo);
  font-variant-numeric:tabular-nums;color:var(--texto-apagado)}
.segmentado>button[aria-pressed="true"] .n{color:var(--primaria)}
.segmentado>button[data-vazio="sim"]{opacity:.5}

/* Número grande ao lado de um rótulo pequeno, para o impacto de uma escolha
   em curso ("+ R$ 286,79"). No handoff do Afere e o bloco a direita do cartao
   de parametros da tela Reajustes. */
.impacto{display:flex;flex-direction:column;gap:2px;white-space:nowrap}
.impacto .rot{font:var(--peso-forte) var(--fs-micro)/1 var(--fonte-corpo);
  text-transform:uppercase;letter-spacing:.09em;color:var(--texto-apagado)}
.impacto .val{font:var(--peso-medio) var(--fs-numero)/1.05 var(--fonte-mono);
  letter-spacing:var(--tr-numero);font-variant-numeric:tabular-nums;color:var(--texto)}
.impacto .val.bom{color:var(--ok-tinta)}
.impacto .val.nulo{color:var(--apagado-2)}



#btn-instalar{margin-bottom:var(--e-2)}


/* ==========================================================================
   REFORMA DAS TELAS — etapa 1 (08/10/2026)

   Ela, com o compilado da Lupa: "aprenda com ele a montar o layout do
   sistema, porque voce so me da layouts simples e os dele sao bem
   incrementados". Referencia: Afere 2.1 (app/afere/components.css).

   O que o Totum ja tinha e NAO foi refeito: tokens de cor, espaco, raio e
   sombra; as tres familias de fonte; a escala de dez tamanhos; .selo, .vazio,
   .esqueleto, .chips, .impacto, .segmentado. O fundamento daqui e mais rico
   que o do Afere — o que faltava eram os componentes abaixo.
   ========================================================================== */

/* -------------------------------------------------- cartao de destaque escuro
   O numero principal da tela, em navy, com o resto do contexto em volta. E o
   "af-card--forest" do Afere traduzido para a cor da casa. Dentro dele tudo
   inverte: rotulo, numero, nota e medidor. */
.cartao-escuro{background:var(--navy-900);color:var(--texto-sobre-escuro);
  border-radius:var(--r-lg);padding:var(--pad-cartao);box-shadow:var(--sh-2);
  display:flex;flex-direction:column;gap:var(--e-3)}
.cartao-escuro .rot{font:var(--peso-forte) var(--fs-rotulo)/1.4 var(--fonte-corpo);
  letter-spacing:.11em;text-transform:uppercase;color:var(--ouro-500)}
.cartao-escuro .val{font:var(--peso-maximo) var(--fs-numero-g)/1.02 var(--fonte-mono);
  letter-spacing:var(--tr-numero);font-variant-numeric:tabular-nums;color:#fff}
.cartao-escuro .nota{font-size:var(--fs-dado);color:var(--texto-sobre-escuro-2);
  line-height:var(--lh-media);max-width:52ch}
.cartao-escuro a{color:var(--ouro-500)}
.cartao-escuro .linha-acoes .btn{background:#FFFFFF1A;border-color:#FFFFFF2E;
  color:var(--texto-sobre-escuro)}
.cartao-escuro .linha-acoes .btn:hover{background:#FFFFFF2E}

/* ------------------------------------------------------------------ medidor
   A regua: onde um valor cai dentro de uma faixa. Serve para honorario
   dentro do que da para negociar, para prazo consumido, para meta.

   Os limites vem por variavel, para o HTML nao carregar calculo:
     --de / --ate   os extremos da faixa boa, em %
     --media        a marca de referencia, em %
     --em           onde o valor esta, em %
   Quem monta converte numero em % — aqui so se desenha. */
.medidor{display:block}
.medidor .escala{display:flex}
/* display:block explicito: o medidor pode ser montado com <span> (foi o que
   o Painel fez), e span e inline — altura e ignorada, e os filhos absolutos
   passam a calcular contra uma caixa de altura zero. A faixa saia com 0% de
   largura e o ponto no valor padrao. O componente nao pode depender da tag
   de quem o chama. */
.medidor .trilha{display:block;position:relative;height:12px;
  margin:var(--e-4) 0 var(--e-3);
  border-radius:var(--r-pill);background:var(--superficie-3);
  border:1px solid var(--linha)}
.medidor .faixa{position:absolute;top:0;bottom:0;left:var(--de,20%);
  right:calc(100% - var(--ate,80%));border-radius:var(--r-pill);
  background:var(--ouro-500)}
.medidor .media{position:absolute;top:-6px;bottom:-6px;left:var(--media,50%);
  width:2px;margin-left:-1px;background:var(--texto)}
.medidor .ponto{position:absolute;top:50%;left:var(--em,50%);width:22px;height:22px;
  margin:-11px 0 0 -11px;border-radius:50%;background:var(--navy-900);
  border:4px solid var(--superficie);box-shadow:var(--sh-1)}
.medidor .escala{display:flex;justify-content:space-between;gap:var(--e-4)}
.medidor .escala>div{display:flex;flex-direction:column;
  font:var(--peso-medio) var(--fs-corpo)/1.4 var(--fonte-mono);
  font-variant-numeric:tabular-nums}
.medidor .escala>div:nth-child(2){align-items:center}
.medidor .escala>div:last-child{align-items:flex-end}
.medidor .escala small{font:var(--peso-normal) var(--fs-nota)/1.4 var(--fonte-corpo);
  color:var(--texto-apagado);letter-spacing:0}
/* Dentro do cartao escuro o medidor inverte. */
.cartao-escuro .medidor .trilha{background:#FFFFFF1F;border-color:#FFFFFF2E}
.cartao-escuro .medidor .media{background:var(--texto-sobre-escuro)}
.cartao-escuro .medidor .ponto{background:#fff;border-color:var(--navy-900)}
.cartao-escuro .medidor .escala>div{color:#fff}
.cartao-escuro .medidor .escala small{color:var(--texto-sobre-escuro-2)}

/* ------------------------------------------------- selo com FORMA por estado
   Pedido do vocabulario do Afere: "selos com forma diferente por estado, para
   nao depender so da cor". Quem nao distingue verde de vermelho lia o selo do
   Totum pela posicao na frase e mais nada — e sao selos que dizem "pago",
   "vencido", "em atraso" numa tela de dinheiro.

   circulo cheio = ok | losango = atencao | traco = erro | anel = neutro
   O .carregando fica fora: o ::before dele ja e o circulo que gira. */
.selo:not(.carregando)::before{content:"";flex:none;width:7px;height:7px;
  border-radius:50%;border:1.5px solid currentColor;background:transparent}
.selo.ok:not(.carregando)::before{background:currentColor;border-radius:50%}
.selo.atencao:not(.carregando)::before{border-radius:1px;background:currentColor;
  transform:rotate(45deg)}
.selo.erro:not(.carregando)::before{width:8px;height:2.5px;border-radius:1px;
  border:0;background:currentColor}

/* ------------------------------------------- estados: carregando e falhou
   O vazio ja existia (.vazio) e continua. Estes dois entram no navegar(),
   que e por onde TODAS as telas passam — um lugar, 26 telas. */
.pag-carregando{display:grid;gap:var(--e-5);padding:var(--e-2) 0}
.pag-carregando .bloco{display:grid;gap:var(--e-3)}
.pag-carregando .cartoes{display:grid;gap:var(--e-4);
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.pag-carregando .cartoes>.esqueleto{height:84px;border-radius:var(--r-md)}

.estado-falhou{display:grid;justify-items:center;gap:var(--e-3);
  padding:var(--e-9) var(--e-5);text-align:center}
.estado-falhou .ic{width:44px;height:44px;border-radius:var(--r-md);display:grid;
  place-items:center;background:var(--erro-fundo);border:1px solid var(--erro-borda);
  color:var(--erro-tinta);font-size:var(--fs-titulo-2)}
.estado-falhou b{font-family:var(--fonte-titulo);font-size:var(--fs-titulo-3);
  color:var(--texto)}
.estado-falhou p{font-size:var(--fs-dado);color:var(--texto-apagado);
  max-width:52ch;line-height:var(--lh-media)}
.estado-falhou .motivo{font-family:var(--fonte-mono);font-size:var(--fs-nota);
  color:var(--texto-3);background:var(--superficie-3);border:1px solid var(--linha);
  border-radius:var(--r-sm);padding:var(--e-2) var(--e-3);max-width:60ch;
  word-break:break-word;text-align:left}

/* ------------------------------------------------- barra empilhada com legenda
   Do que um total e feito. O medidor responde "onde estou dentro de uma
   faixa"; esta responde "esse numero e composto de que" — e sao perguntas
   diferentes: R$ 48 mil em aberto com R$ 40 mil vencidos e R$ 48 mil com R$ 2
   mil vencidos desenham igual num medidor e sao situacoes opostas.

   Cada pedaco leva a largura em `style="--parte:NN%"` e a cor por classe. A
   legenda fica embaixo, com o valor em mono — sem ela a barra e enfeite. */
.barra-composta{display:block}
.barra-composta .trilho{display:flex;overflow:hidden;height:14px;
  border-radius:var(--r-pill);background:var(--superficie-3);
  border:1px solid var(--linha)}
.barra-composta .parte{width:var(--parte,0%);min-width:0;transition:width var(--mov)}
.barra-composta .parte.ruim{background:var(--erro-tinta)}
.barra-composta .parte.atencao{background:var(--ouro-500)}
.barra-composta .parte.bom{background:var(--ok-tinta)}
.barra-composta .parte.neutra{background:var(--navy-300)}
.barra-composta .legenda{display:flex;flex-wrap:wrap;gap:var(--e-2) var(--e-5);
  margin-top:var(--e-3)}
.barra-composta .legenda>div{display:flex;flex-direction:column;gap:1px}
.barra-composta .legenda .chave{display:flex;align-items:center;gap:6px;
  font:var(--peso-normal) var(--fs-nota)/1.4 var(--fonte-corpo);
  color:var(--texto-apagado)}
.barra-composta .legenda .chave::before{content:"";width:9px;height:9px;
  border-radius:3px;background:currentColor;flex:none}
.barra-composta .legenda .ruim .chave::before{background:var(--erro-tinta)}
.barra-composta .legenda .atencao .chave::before{background:var(--ouro-500)}
.barra-composta .legenda .bom .chave::before{background:var(--ok-tinta)}
.barra-composta .legenda .neutra .chave::before{background:var(--navy-300)}
.barra-composta .legenda .quanto{font:var(--peso-medio) var(--fs-corpo)/1.3 var(--fonte-mono);
  font-variant-numeric:tabular-nums;color:var(--texto)}
/* Dentro do cartao escuro. */
.cartao-escuro .barra-composta .trilho{background:#FFFFFF1F;border-color:#FFFFFF2E}
.cartao-escuro .barra-composta .legenda .chave{color:var(--texto-sobre-escuro-2)}
.cartao-escuro .barra-composta .legenda .quanto{color:#fff}
.cartao-escuro .barra-composta .parte.bom{background:#7FD6A4}
.cartao-escuro .barra-composta .parte.ruim{background:#FF8A7A}
.cartao-escuro .barra-composta .parte.neutra{background:#8FB2CC}


/* ------------------------------------------------- tabela em caixa arredondada
   Da lista do Joao: "tabela em caixa arredondada, cabecalho rebaixado em
   maiusculas, linha clicavel, segunda linha pequena na celula". O cabecalho
   maiusculo, a linha clicavel e o `.sub` ja existiam; faltava a caixa, e sem
   ela a tabela sangrava ate a borda do cartao e nao se lia como uma peca.

   `overflow:hidden` e o que faz o canto arredondado valer para a primeira e a
   ultima linha — sem ele o fundo do cabecalho passa reto por cima do raio. */
.card .corpo>table,.tabela-caixa>table,table.caixa{
  border:1px solid var(--linha);border-radius:var(--r-md);overflow:hidden}
.card .corpo>table thead th,.tabela-caixa>table thead th,table.caixa thead th{
  background:var(--superficie-3);border-bottom:1px solid var(--linha-2)}
/* Contagem tambem e numero: chip de filtro, segmentado e os CONTADORES do
   menu lateral — que estao na lista do Joao com todas as letras ("menu
   lateral agrupado por assunto, com icones, contadores e rodape"). */
.chips .chip .conta,.segmentado .conta{font-family:var(--fonte-mono);
  font-variant-numeric:tabular-nums}
.selo-menu,nav .badge{font-family:var(--fonte-mono);font-variant-numeric:tabular-nums}
/* O numero do cartao de trabalho e o da ficha chave-valor. */
.trabalho .num,.kv .valor.num{font-family:var(--fonte-mono);
  font-variant-numeric:tabular-nums}


/* ---------------------------------------------------------- linha do tempo
   Fatos em ordem, com a marca na lateral e o fio ligando um ao outro. O
   sistema tinha varias (trilha do orcamento, etapas do processo, historico
   de envio) e todas desenhadas como tabela de duas colunas — que diz "linha
   e coluna" quando o dado diz "antes e depois".

   A marca muda de forma com o estado, pela mesma razao do selo: cor sozinha
   nao e leitura para todo mundo. */
.linha-tempo{position:relative;margin:0;padding:0 0 0 var(--e-6);list-style:none}
.linha-tempo::before{content:"";position:absolute;left:5px;top:6px;bottom:6px;
  width:2px;background:var(--linha);border-radius:var(--r-pill)}
.linha-tempo>li{position:relative;padding:0 0 var(--e-4) 0}
.linha-tempo>li:last-child{padding-bottom:0}
.linha-tempo>li::before{content:"";position:absolute;left:calc(var(--e-6) * -1);
  top:5px;width:12px;height:12px;border-radius:50%;background:var(--superficie);
  border:2px solid var(--linha-3);box-sizing:border-box}
.linha-tempo>li.feito::before{background:var(--ok-tinta);border-color:var(--ok-tinta)}
.linha-tempo>li.agora::before{background:var(--ouro-500);border-color:var(--ouro-500);
  border-radius:2px;transform:rotate(45deg)}
.linha-tempo>li.falhou::before{background:var(--erro-tinta);border-color:var(--erro-tinta)}
.linha-tempo .quando{display:block;font:var(--peso-normal) var(--fs-nota)/1.4 var(--fonte-mono);
  font-variant-numeric:tabular-nums;color:var(--texto-apagado)}
.linha-tempo .oque{display:block;font-size:var(--fs-corpo);color:var(--texto);
  line-height:var(--lh-media)}
.linha-tempo .detalhe{display:block;font-size:var(--fs-nota);color:var(--texto-apagado);
  margin-top:1px}

/* ------------------------------------------------------- barra de progresso
   Solta, para usar fora do cartao de KPI: processo, cadencia, meta. O valor
   vai em `style="--feito:NN%"`, e o numero ao lado e obrigatorio — barra sem
   numero obriga a pessoa a estimar de olho. */
.progresso{display:flex;align-items:center;gap:var(--e-3)}
.progresso .trilho{flex:1;height:8px;border-radius:var(--r-pill);
  background:var(--superficie-3);border:1px solid var(--linha);overflow:hidden}
.progresso .feito{display:block;height:100%;width:var(--feito,0%);
  background:var(--primaria);transition:width var(--mov)}
.progresso.ok .feito{background:var(--ok-tinta)}
.progresso.atencao .feito{background:var(--ouro-500)}
.progresso.ruim .feito{background:var(--erro-tinta)}
.progresso .quanto{font:var(--peso-medio) var(--fs-dado)/1 var(--fonte-mono);
  font-variant-numeric:tabular-nums;color:var(--texto-2);white-space:nowrap}

/* ----------------------------------------------------- ficha chave-valor
   Rotulo a esquerda, dado a direita, uma linha por campo. E o que a proposta
   em PDF ja fazia na capa e a tela nao tinha — ficha de empresa, de titulo,
   de processo. Em tela estreita vira uma coluna so. */
.kv{display:grid;grid-template-columns:minmax(120px,0.38fr) 1fr;gap:0;
  border:1px solid var(--linha);border-radius:var(--r-md);overflow:hidden}
.kv>dt{padding:var(--e-2) var(--e-4);background:var(--superficie-2);
  border-bottom:1px solid var(--linha);
  font:var(--peso-forte) var(--fs-rotulo)/1.5 var(--fonte-corpo);
  letter-spacing:.09em;text-transform:uppercase;color:var(--texto-apagado)}
.kv>dd{margin:0;padding:var(--e-2) var(--e-4);border-bottom:1px solid var(--linha);
  font-size:var(--fs-corpo);color:var(--texto);min-width:0;word-break:break-word}
.kv>dt:nth-last-of-type(1),.kv>dd:nth-last-of-type(1){border-bottom:0}
.kv>dd.num{font-family:var(--fonte-mono);font-variant-numeric:tabular-nums}
@media (max-width:560px){
  .kv{grid-template-columns:1fr}
  .kv>dt{border-bottom:0;padding-bottom:0;background:transparent}
}

/* --------------------------------------------------- zona de soltar arquivo
   Arrastar o arquivo para a tela em vez de caçar o botao. O `<input>` fica
   dentro e continua funcionando no clique e pelo teclado — a zona e um
   acrescimo, nunca a unica porta. */
.soltar{display:grid;justify-items:center;gap:var(--e-2);padding:var(--e-7) var(--e-5);
  border:2px dashed var(--linha-3);border-radius:var(--r-md);background:var(--superficie-2);
  text-align:center;cursor:pointer;transition:border-color var(--mov),background var(--mov)}
.soltar:hover{border-color:var(--navy-300);background:var(--superficie)}
.soltar.por-cima{border-color:var(--primaria);background:var(--primaria-tenue)}
.soltar .ic{font-size:var(--fs-titulo-1);color:var(--apagado);line-height:1}
.soltar b{font-size:var(--fs-corpo-g);color:var(--texto-2);font-family:var(--fonte-titulo)}
.soltar p{font-size:var(--fs-nota);color:var(--texto-apagado);max-width:44ch}
.soltar .escolhido{font-family:var(--fonte-mono);font-size:var(--fs-nota);
  color:var(--ok-tinta)}

/* =========================================================================
   IMPRESSAO LIMPA (08/10/2026)

   Nao havia uma linha de @media print na folha. Imprimir qualquer tela saia
   com o menu lateral, os botoes, a gaveta e os avisos — e ela imprime
   proposta, relatorio de pendencias e balancete.

   O que sai do papel: tudo que e navegacao ou acao. O que fica: o conteudo,
   em preto no branco, com as tabelas sem quebrar no meio da linha.
   ========================================================================= */
@media print{
  :root{--superficie:#fff;--superficie-2:#fff;--superficie-3:#fff;--fundo:#fff}
  #app>nav,.topo-acoes,.linha-acoes,.btn,.abas-tela,.chips,.segmentado,
  #toasts,.toast,.gaveta,.gaveta-fundo,.drawer,.drawer-fundo,#btn-instalar,
  .kpi-clicavel .rot::after{display:none !important}
  html,body,#app,#tela{background:#fff !important;margin:0;padding:0;
    display:block !important;height:auto !important;overflow:visible !important}
  #tela{padding:0 !important;max-width:none !important}
  .card,.kpi,.kv,.cartao-escuro{break-inside:avoid;box-shadow:none !important;
    border-color:#bbb !important}
  /* O cartao escuro no papel: fundo navy gasta tinta e some em impressora
     preto e branco. Vira caixa clara com o numero grande, que e o que
     importa dele. */
  .cartao-escuro{background:#fff !important;color:#000 !important;
    border:1.5px solid #333 !important}
  .cartao-escuro .val,.cartao-escuro .rot,.cartao-escuro .nota{color:#000 !important}
  table{break-inside:auto}
  tr,li{break-inside:avoid}
  thead{display:table-header-group}
  a[href]::after{content:""}
  .topo{border-bottom:1.5px solid #333}
}


/* ========================================================================
   A CLASSE DO VALOR (09/10/2026)

   Do tokens.css do Joao, tal qual: mono, numeros tabulares e alinhado a
   direita. Ele a chama de `.valor` e a aplica a "qualquer valor monetario".

   O Totum nao tinha. Tinha `.num` na celula de tabela, que ja ganhou a mono,
   e nada para dinheiro FORA de tabela — que e onde ele mais aparece: cartao,
   ficha, rodape de total, linha de resumo.
   ======================================================================== */
.valor{font-family:var(--fonte-mono);font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;text-align:right}
.valor.debito{color:var(--debito)}
.valor.credito{color:var(--credito)}
/* Em tabela o alinhamento ja vem da celula; aqui so a cor e a familia. */
td .valor,th .valor{text-align:inherit}

/* ========================================================================
   O AR DENTRO DA CAIXA

   O Joao usa 24px de preenchimento no cartao. O Totum usava de 12 a 16, e
   com a sombra nova e o canto de 20px o conteudo encostado na borda era o
   que ainda denunciava a caixa apertada.

   `--pad-cartao` ja existia e ja era respeitado pelo `.card`; o `.kpi` tinha
   o seu proprio, escrito a mao, e passa a usar o token como os outros.
   ======================================================================== */
:root{--pad-cartao:20px;--pad-cartao-cab:16px 20px}
.kpi{padding:var(--pad-cartao)}
.kpi .val{margin:var(--e-3) 0 2px}
/* 09/10/2026: com a letra maior, "A pagar — vence hoje" passou a quebrar em
   duas linhas e "Em caixa" nao — e os numeros dos cartoes vizinhos ficaram em
   alturas diferentes, que e o tipo de desalinho que faz a tela parecer
   descuidada. O rotulo passa a reservar duas linhas sempre: o numero comeca
   na mesma altura em todos, quebre ou nao.

   `align-items:start` porque o padrao e `center`, e com duas linhas
   reservadas o rotulo de uma linha ficaria flutuando no meio do espaco. */
.kpi .rot{min-height:calc(2 * 1.2em);align-items:start}

/* O NUMERO CABE NO CARTAO (09/10/2026)

   Com o valor em mono o problema apareceu: a IBM Plex Mono tem avanco fixo de
   0,6em por caractere, e "R$ 48.320,00" sao 12 caracteres. A 42px isso da uns
   300px, e o cartao do `.g4` tem 212px de largura minima. O numero vazava —
   vi na tela de prova, com "48.320" cortado no meio.

   O cartao passa a medir a si mesmo (`container-type:inline-size`) e o numero
   usa o MENOR entre o tamanho da escala e 13% da largura do cartao. Cartao
   largo mostra o numero grande; cartao apertado encolhe a fonte em vez de
   cortar o valor. Vale para qualquer valor, sem ninguem precisar adivinhar
   quantos digitos cabem.

   Nao e `overflow:hidden` nem `text-overflow:ellipsis`: valor de dinheiro
   cortado ou com reticencias e pior que valor pequeno — "R$ 48.3…" nao e um
   numero. */
.kpi,.impacto{container-type:inline-size}
.kpi .val{font-size:min(var(--fs-numero),13cqi)}
.impacto .val{font-size:min(var(--fs-numero),15cqi)}


/* ========================================================================
   A BARRA NO TOPO (09/10/2026)

   Ela, com a tela aberta: "o que me incomoda no totum e a quantidade de
   coisas na lateral e a simplicidade. E bem diferente dos sistemas do Joao."

   Tinha razao, e o numero diz: 25 itens numa coluna de 232px, contra os 9
   itens em barra horizontal do Prospector — que nao tem lateral nenhuma.

   Aqui sao 7 botoes de grupo no lugar dos 25 links. Os itens continuam
   existindo, dentro do painel que o grupo abre. E a tela ganha os 232px.
   ======================================================================== */
#app.on{grid-template-columns:1fr;grid-template-rows:auto 1fr}
#app>nav{flex-direction:row;align-items:center;gap:var(--e-4);
  padding:0 var(--e-5);min-height:56px;overflow:visible;
  border-right:0;border-bottom:1px solid var(--navy-900);
  background:linear-gradient(180deg,var(--menu-fundo) 0%,var(--menu-fundo-2) 100%)}
#app>nav .brand{padding:0;border-bottom:0;flex:none}
#app>nav .marca{width:26px;height:26px}

/* A barra rola no celular. `overflow-x` sozinho nao existe: quando um eixo
   deixa de ser `visible`, o outro vira `auto` junto — e foi assim que esta
   linha passou a CORTAR o painel na vertical, deixando o menu sem abrir. Por
   isso o painel e `position:fixed` (ver abaixo) e nao depende mais disto. */
.barra-grupos{display:flex;align-items:center;gap:var(--e-2);flex:1;min-width:0;
  overflow-x:auto;scrollbar-width:thin;
  /* O risco que separa a marca dos grupos: sem ele a marca e o primeiro
     grupo viram a mesma coisa. */
  padding-left:var(--e-4);margin-left:var(--e-1);
  border-left:1px solid var(--menu-linha)}
.barra-grupos::-webkit-scrollbar{height:4px}
.grupo{position:relative;flex:none}
.grupo-bt{display:flex;align-items:center;gap:var(--e-2);height:38px;
  padding:0 var(--e-3);
  border-radius:var(--r-sm);background:transparent;color:var(--texto-sobre-escuro-2);
  font:var(--peso-forte) var(--fs-corpo)/1 var(--fonte-corpo);white-space:nowrap;
  cursor:pointer;transition:background var(--mov-rapido),color var(--mov-rapido)}
/* O icone do grupo, e a seta que diz que aquilo abre. Uma fileira de palavras
   cinzas parece rodape de site; menu de programa tem as duas coisas. */
.grupo-bt .ic{font-style:normal;font-size:var(--fs-dado);line-height:1;opacity:.75}
.grupo-bt::after{content:"";width:5px;height:5px;margin-left:2px;flex:none;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:translateY(-2px) rotate(45deg);opacity:.55;
  transition:transform var(--mov-rapido)}
.grupo-bt:hover{background:var(--menu-hover);color:#fff}
.grupo-bt:hover .ic{opacity:1}
.grupo-bt[aria-expanded="true"]{background:var(--menu-ativo);color:#fff}
.grupo-bt[aria-expanded="true"]::after{transform:translateY(1px) rotate(225deg);opacity:1}
/* O grupo que contem a tela aberta. E o "voce esta aqui" que a lateral dava
   de graca e que a barra precisa dizer de proposito. */
.grupo.aqui>.grupo-bt{color:#fff;box-shadow:inset 0 -2px 0 var(--ouro-500)}
.grupo.aqui>.grupo-bt .ic{opacity:1}

/* O painel: abre embaixo do grupo, como menu de programa.
   `fixed`, e nao `absolute`: `absolute` e cortado por qualquer pai que tenha
   `overflow` diferente de `visible`, e a barra tem (ela rola no celular). Era
   esse o defeito — o painel nascia inteiro fora da caixa de recorte e nenhum
   dos 25 itens podia ser clicado. Quem posiciona e `posicionarPainel()` no
   app.js, no clique e enquanto o painel estiver aberto. */
.grupo-painel{position:fixed;z-index:var(--z-gaveta);
  min-width:250px;max-width:min(320px,calc(100vw - 2 * var(--e-4)));
  padding:var(--e-2);border-radius:var(--r-md);
  background:var(--menu-fundo-2);border:1px solid var(--menu-linha);
  box-shadow:var(--sh-3);display:flex;flex-direction:column;gap:2px}
.grupo-painel a{display:flex;align-items:center;gap:var(--e-2);min-height:34px;
  padding:0 var(--e-3);border-radius:var(--r-sm);border-left:0;
  color:var(--texto-sobre-escuro-2);font-size:var(--fs-corpo)}
.grupo-painel a:hover{background:var(--menu-hover);color:#fff}
.grupo-painel a.on{background:var(--menu-ativo);color:#fff;
  font-weight:var(--peso-forte)}
.grupo-painel a .ic{width:18px;text-align:center;flex-shrink:0;font-style:normal}

/* O pe do menu vira o canto direito da barra. */
#app>nav .nav-pe{margin-top:0;flex:none;display:flex;align-items:center;
  gap:var(--e-3);padding:0;border-top:0}
#app>nav .nav-pe .quem{display:flex;flex-direction:column;line-height:1.2;
  text-align:right}
#app>nav .nav-pe button{margin-top:0}
#app>nav .nav-versao{white-space:nowrap}

/* Tela estreita: a barra rola, e o nome de quem entrou sai — no celular o
   espaco e do conteudo. O Prospector faz o mesmo (a barra dele rola). */
@media (max-width:760px){
  #app>nav{padding:0 var(--e-3);gap:var(--e-2)}
  #app>nav .brand .marca-nome,#app>nav .nav-pe .quem,#app>nav .nav-versao{display:none}
}

/* ===========================================================================
   A VIDEOCHAMADA (09/10/2026)
   ===========================================================================
   Ela: *"implemente no agendamento de reuniao do Totum a video chamada que o
   Joao implementou no Agendum, dai remova o google meet."*

   Tela cheia de proposito: a gaveta tem 520px, e conversar com o cliente em
   meia tela e pior do que nao ter. Prefixo `vc-` para nao cruzar com nada.
   ========================================================================= */
.vc-tela{position:fixed;inset:0;z-index:var(--z-toast);display:flex;
  flex-direction:column;background:var(--navy-900, #0F2E46)}
.vc-cab{display:flex;align-items:center;justify-content:space-between;gap:var(--e-3);
  padding:var(--e-3) var(--e-4);color:#fff;flex:none}
.vc-cab b{font-size:var(--fs-corpo);font-weight:600}
.vc-cab .vc-quando{display:block;font-size:var(--fs-apoio);opacity:.7;font-weight:400;
  letter-spacing:var(--tr-rotulo);text-transform:uppercase}
.vc-palco{flex:1;min-height:0;display:grid;gap:var(--e-2);grid-template-columns:1fr;
  padding:0 var(--e-4) var(--e-3);place-content:stretch}
@media (min-width:900px){ .vc-palco.dois{grid-template-columns:1fr 1fr} }
.vc-quadro{position:relative;min-height:0;background:#0a1f30;border-radius:var(--r-md);
  overflow:hidden;display:flex;align-items:center;justify-content:center}
.vc-quadro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vc-inicial{color:#fff;font-size:44px;font-weight:700;opacity:.4;
  font-family:var(--fonte-titulo, inherit)}
.vc-quem{position:absolute;left:var(--e-3);bottom:var(--e-3);background:rgba(10,31,48,.78);
  color:#fff;font-size:var(--fs-apoio);padding:3px var(--e-2);border-radius:var(--r-sm);
  max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vc-barra{flex:none;display:flex;gap:var(--e-2);flex-wrap:wrap;justify-content:center;
  padding:var(--e-3) var(--e-4) var(--e-4)}
.vc-recado{margin:0 var(--e-4) var(--e-3);flex:none}


/* ===========================================================================
   A CAMADA DO JOAO (09/10/2026) — vem por ultimo para vencer a cascata
   ===========================================================================
   Ela: "O sistema ficou uma bosta, parece que ta sobrando espaco na tela.
   Tudo minusculo, sem vida, sem animacao, sem interatividade, sem dinamismo,
   fontes retrogradas. REFACA-O."

   Medido nas telas reais do Monettare (prints do manual dele): corpo 13-14px,
   rotulo 11px em caixa alta, cabecalho de tabela PRETO com letra branca,
   botao principal laranja CHEIO, chips coloridos, acao em cada linha, tudo
   ocupando a largura. A letra dele e MENOR que a nossa. O que da vida e
   densidade + contraste + cor + resposta ao toque. E isto que esta aqui.

   Tudo com `:root[data-densidade="joao"]` na frente: e o que vence as regras
   `:root:not([data-densidade="compacta"]) ...` do bloco de respiro, que tem
   duas classes de especificidade. Sem o prefixo, metade disto perderia.
   ======================================================================== */
:root[data-densidade="joao"]{
  --fonte-titulo:"Familjen Grotesk","Segoe UI",system-ui,sans-serif;
  --fonte-corpo:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  /* A escala do Monettare, medida: nao e a maior, e a CHEIA. */
  /* 09/10/2026, 23h, ela: "AUMENTA AS FONTES PELO AMOR DE DEUS".
     10/10/2026: "continua super pequeno, inclusive a pagina de login. Mais
     uns 40%". Ela deu o numero; isto e a escala anterior x 1,4, pixel a
     pixel. A densidade e o contraste ficam. */
  /* 10/10/2026, de novo: "eu estava esse tempo visualizando o totum com o
     zoom reduzido. Coloquei em 100% e agora ficou grande demais". O "bem
     melhor" dela foi 25px vistos a 80% = 20px. Esta e a escala a 100%. */
  /* 10/10/2026, a 100%: "A escala continua bem grande. reduza uns 20%".
     x0,8 de novo. */
  --fs-micro:11.5px;--fs-rotulo:11.5px;--fs-nota:13px;--fs-apoio:13.5px;--fs-dado:14.5px;
  --fs-corpo:16px;--fs-corpo-g:17px;--fs-titulo-3:18.5px;--fs-titulo-2:21.5px;--fs-titulo-1:24px;
  --fs-titulo-0:27px;
  --fs-numero:27px;--fs-numero-g:30px;
  --lh-media:1.45;--lh-solta:1.6;
  --alt-controle:36px;--alt-controle-sm:32px;--alt-controle-lg:40px;
  --alt-linha:42px;--pad-celula:9px 12px;
  --pad-cartao:16px;--pad-cartao-cab:12px 16px;
  --min-cartao:195px;
  --tr-rotulo:.08em;
  /* raio menor que os 20px: no Monettare o cartao tem ~10px. */
  --r-md:12px;--r-sm:7px;
  /* o movimento, num lugar so */
  --mov-rapido:.14s ease;--mov:.22s cubic-bezier(.2,.7,.2,1);
}

/* --------------------------------------------------- A. a moldura cheia */
:root[data-densidade="joao"] main{padding:20px 24px 36px}
:root[data-densidade="joao"] .topo{margin-bottom:16px;padding-bottom:12px}
:root[data-densidade="joao"] .topo h1{font:600 var(--fs-titulo-0)/1.15 var(--fonte-titulo);
  letter-spacing:-.01em}
:root[data-densidade="joao"] .topo p,
:root[data-densidade="joao"] .topo .contexto{font-size:var(--fs-dado);margin-top:4px;
  max-width:none;line-height:1.45}
:root[data-densidade="joao"] .sobrelinha{font-size:var(--fs-micro);letter-spacing:.1em}
:root[data-densidade="joao"] .grid{gap:12px}
:root[data-densidade="joao"] .card .corpo>*+*{margin-top:10px}

/* ------------------------------------- B. os tiles de numero, como os dele
   No Monettare o numero fica num tile pequeno: numero 20px, rotulo 10px em
   caixa alta embaixo, oito numa linha. Nao e um outdoor por indicador. */
:root[data-densidade="joao"] .kpi{padding:13px 15px 12px;border-radius:var(--r-md)}
:root[data-densidade="joao"] .kpi .rot{font-size:var(--fs-micro);min-height:0;
  letter-spacing:.08em;color:var(--texto-3);order:2;margin-top:4px;align-items:center}
/* `nowrap` + 14cqi: com 16cqi o "-R$ 293.357" quebrava em duas linhas no
   tile de 150px — medido na prova. O numero nunca pode quebrar; antes
   disso ele encolhe. */
:root[data-densidade="joao"] .kpi .val{font-size:min(var(--fs-numero-g),17cqi);
  margin:0;order:1;line-height:1.1;white-space:nowrap}
:root[data-densidade="joao"] .kpi .meta{font-size:var(--fs-nota);order:3;margin-top:3px}
:root[data-densidade="joao"] .kpi{display:flex;flex-direction:column}
:root[data-densidade="joao"] .kpi .barra,:root[data-densidade="joao"] .kpi .ritmo{order:4}

/* ---------------------------------------- C. contraste: tabela e botoes
   O cabecalho da tabela dele e PRETO com letra branca em caixa alta. O nosso
   era bege sobre bege — e nao se via onde a tabela comecava. */
/* Os tres seletores de tabela-em-cartao (`.card .corpo>table thead th` e
   irmaos) tem 3 classes e venciam este bloco — medido: o cabecalho ficava
   bege. Entram aqui com o prefixo, para vencerem de volta. */
:root[data-densidade="joao"] thead th,
:root[data-densidade="joao"] .card .corpo>table thead th,
:root[data-densidade="joao"] .tabela-caixa>table thead th,
:root[data-densidade="joao"] table.caixa thead th{background:var(--navy-900);color:#fff;
  font:600 var(--fs-rotulo)/1.3 var(--fonte-corpo);text-transform:uppercase;
  letter-spacing:.08em;border-bottom:0;padding:10px 12px;cursor:pointer;
  user-select:none;white-space:nowrap}
:root[data-densidade="joao"] thead th:hover,
:root[data-densidade="joao"] .card .corpo>table thead th:hover{background:var(--navy-800)}
:root[data-densidade="joao"] thead th[aria-sort]::after{content:"";display:inline-block;
  width:0;height:0;margin-left:6px;border:4px solid transparent;vertical-align:middle}
:root[data-densidade="joao"] thead th[aria-sort="ascending"]::after{border-bottom-color:#fff;
  border-top:0}
:root[data-densidade="joao"] thead th[aria-sort="descending"]::after{border-top-color:#fff;
  border-bottom:0}
:root[data-densidade="joao"] thead th:first-child{border-top-left-radius:var(--r-sm)}
:root[data-densidade="joao"] thead th:last-child{border-top-right-radius:var(--r-sm)}
:root[data-densidade="joao"] tbody td{font-size:var(--fs-dado)}
:root[data-densidade="joao"] tbody tr{transition:background var(--mov-rapido)}
:root[data-densidade="joao"] tbody tr:hover{background:var(--creme,#FBF4E6)}
:root[data-densidade="joao"] tr.clicavel:hover td{color:var(--navy-800)}

/* O botao principal e CHEIO e de cor quente, como o laranja dele — aqui o
   ouro da casa. O secundario e navy cheio (o preto dele). O comum e vazado.
   Todos afundam 1px no clique e respondem ao hover: e o "dinamismo". */
:root[data-densidade="joao"] .btn{font-weight:600;font-size:var(--fs-dado);
  border-radius:var(--r-sm);padding:0 15px;
  transition:background var(--mov-rapido),border-color var(--mov-rapido),
    color var(--mov-rapido),transform var(--mov-rapido),box-shadow var(--mov-rapido)}
:root[data-densidade="joao"] .btn:hover{transform:translateY(-1px);box-shadow:var(--sh-1)}
:root[data-densidade="joao"] .btn:active{transform:translateY(1px);box-shadow:none}
:root[data-densidade="joao"] .btn.p{background:var(--ouro-500);border-color:var(--ouro-500);
  color:#1C1409}
:root[data-densidade="joao"] .btn.p:hover{background:var(--ouro-600,#B3741F);
  border-color:var(--ouro-600,#B3741F);color:#fff}
:root[data-densidade="joao"] .btn.s,:root[data-densidade="joao"] .btn.escuro{
  background:var(--navy-900);border-color:var(--navy-900);color:#fff}
:root[data-densidade="joao"] .btn.s:hover{background:var(--navy-700);border-color:var(--navy-700)}
:root[data-densidade="joao"] .btn.d{background:var(--erro);border-color:var(--erro);color:#fff}
:root[data-densidade="joao"] .btn:focus-visible,
:root[data-densidade="joao"] a:focus-visible,
:root[data-densidade="joao"] input:focus-visible,
:root[data-densidade="joao"] select:focus-visible{outline:2px solid var(--ouro-500);outline-offset:2px}

/* Os chips ganham cor cheia, como os DOM/ALT/SPE dele. */
:root[data-densidade="joao"] .tag{font-weight:600;font-size:var(--fs-micro);padding:4px 10px;
  letter-spacing:.02em}
:root[data-densidade="joao"] .tag.v{background:var(--ok-tinta);border-color:var(--ok-tinta);color:#fff}
:root[data-densidade="joao"] .tag.r{background:var(--erro);border-color:var(--erro);color:#fff}
:root[data-densidade="joao"] .tag.a{background:var(--ouro-500);border-color:var(--ouro-500);color:#1C1409}
:root[data-densidade="joao"] .tag.b{background:var(--navy-600);border-color:var(--navy-600);color:#fff}
:root[data-densidade="joao"] .selo{font-size:var(--fs-micro);padding:2px 7px}
:root[data-densidade="joao"] .badge{font-weight:700}

/* O cartao responde ao toque: levanta de leve, como no Agendum. */
:root[data-densidade="joao"] .card,:root[data-densidade="joao"] .kpi{
  transition:box-shadow var(--mov),transform var(--mov),border-color var(--mov)}
:root[data-densidade="joao"] .kpi-clicavel:hover,
:root[data-densidade="joao"] .card.clicavel:hover{transform:translateY(-2px);
  box-shadow:0 1px 2px rgba(35,28,20,.06),0 18px 34px -22px rgba(35,28,20,.5)}

/* A barra do topo: um pouco mais baixa, letra do Monettare. */
:root[data-densidade="joao"] #app>nav{min-height:54px;padding:0 20px;gap:12px}
:root[data-densidade="joao"] .grupo-bt{height:38px;font-size:14.5px;padding:0 11px}
:root[data-densidade="joao"] .grupo-bt .ic{font-size:16px}
:root[data-densidade="joao"] .grupo-painel{--fs-corpo:14.5px;min-width:250px}
:root[data-densidade="joao"] .grupo-painel a{min-height:36px}
:root[data-densidade="joao"] .brand .marca-nome b{font-size:16px}
:root[data-densidade="joao"] .quem{font-size:var(--fs-apoio)}
/* A caixa de login usa os mesmos tokens; so a largura e fixa, e 380px nao
   comporta letra de 25. */
:root[data-densidade="joao"] .login-box{width:390px;padding:36px 32px}
:root[data-densidade="joao"] .login-box .sub{margin:7px 0 22px}
:root[data-densidade="joao"] .login-box label{margin:15px 0 6px}
:root[data-densidade="joao"] .login-box input{padding:8px 12px;font-size:var(--fs-corpo)}
:root[data-densidade="joao"] .login-box button{margin-top:22px;font-size:var(--fs-corpo)}
:root[data-densidade="joao"] .login-box button.login-link{margin-top:17px;min-height:0}
:root[data-densidade="joao"] .login-dica{margin-top:18px;padding-top:15px}
:root[data-densidade="joao"] .marca-entrada{gap:12px;margin-bottom:24px}
:root[data-densidade="joao"] .marca-entrada .marca{width:44px;height:44px}
:root[data-densidade="joao"] .marca-entrada b{font-size:27px}
/* O painel abre com movimento, nao aparece do nada. */
:root[data-densidade="joao"] .grupo-painel:not([hidden]){animation:painel-abre var(--mov)}
@keyframes painel-abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* ------------------------------------------- D. a tela ENTRA, nao aparece
   `main > .entrando` e posto pelo observador no app.js em tudo que a tela
   acaba de desenhar. Curto (220ms) e so na entrada: animacao que repete em
   cada clique e irritacao, nao vida. */
:root[data-densidade="joao"] main>.entrando{animation:tela-entra .24s cubic-bezier(.2,.7,.2,1) both}
@keyframes tela-entra{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
:root[data-densidade="joao"] .kpi.entrando{animation:tela-entra .3s cubic-bezier(.2,.7,.2,1) both}
@media (prefers-reduced-motion:reduce){
  :root[data-densidade="joao"] main>.entrando,:root[data-densidade="joao"] .kpi.entrando,
  :root[data-densidade="joao"] .grupo-painel:not([hidden]){animation:none}
}

/* Campo de formulario: fundo cinza-claro como o dele, nao branco sobre branco. */
:root[data-densidade="joao"] input:not([type=checkbox]):not([type=radio]):not([type=file]),
:root[data-densidade="joao"] select,:root[data-densidade="joao"] textarea{
  background:var(--superficie-3);border-color:transparent;font-size:var(--fs-dado);
  transition:background var(--mov-rapido),border-color var(--mov-rapido),box-shadow var(--mov-rapido)}
:root[data-densidade="joao"] input:not([type=checkbox]):not([type=radio]):focus,
:root[data-densidade="joao"] select:focus,:root[data-densidade="joao"] textarea:focus{
  background:#fff;border-color:var(--ouro-500);box-shadow:0 0 0 3px rgba(200,133,42,.18)}
/* 21/10/2026: rótulo de CAMPO, não opção de marcar. "label" sozinho pegava a
   caixinha também, e as opções da proposta saíam em maiúsculas miúdas. */
:root[data-densidade="joao"] label:not(.check):not(:has(>input[type=checkbox])):not(:has(>input[type=radio])),
:root[data-densidade="joao"] .campo>label:not(.check){
  font-size:var(--fs-micro);text-transform:uppercase;letter-spacing:.08em;color:var(--texto-3);
  font-weight:600}

/* As abas de tela: a ativa e cheia, nao sublinhada de leve. */
:root[data-densidade="joao"] .abas-tela button[aria-selected="true"]{background:var(--navy-900);
  color:#fff;border-color:var(--navy-900)}

/* ===========================================================================
   A LISTA DE CONTATOS DA FICHA DA CARTEIRA (10/10/2026)
   ===========================================================================
   Uma grade: area, WhatsApp, e-mail, tirar. As linhas sao `display:contents`
   para a grade alinhar as colunas e, mesmo assim, cada linha poder sair com
   um `remove()`. */
.contatos-lista{display:grid;grid-template-columns:minmax(150px,.8fr) 1fr 1.3fr auto;
  gap:6px 8px;align-items:center;margin-bottom:8px}
.contatos-lista [data-ct-linha]{display:contents}
.contatos-lista .ct-cab{font:600 var(--fs-micro)/1.3 var(--fonte-corpo);text-transform:uppercase;
  letter-spacing:.08em;color:var(--texto-3)}
.contatos-lista input,.contatos-lista select{width:100%;min-width:0}
.contatos-lista input.invalido{border-color:var(--erro);box-shadow:0 0 0 2px rgba(180,40,40,.12)}
@media (max-width:640px){
  .contatos-lista{grid-template-columns:1fr 1fr auto}
  .contatos-lista .ct-cab{display:none}
  .contatos-lista select{grid-column:1/-1}
}