/*! padrão BCM 19.0.1 — bcm-sistema.css
    Tokens, casco (barra lateral, topo, calha) e componentes do padrão.
    GERADO de assets/sistema.html por assets/casco/gerar-casco.js. NÃO EDITE ESTE ARQUIVO.
    Mudança de projeto mora no CSS do projeto, com o motivo em desvios-bcm.md
    (references/casco.md). Subir de versão = trocar o arquivo inteiro.
    impressao: sha256-9c44b0e7002947d6ca2a8844c72044daaad5b6f114afde0fbab57abaaba17515 */
/* ==== fim do cabeçalho do casco ==== */
@font-face{font-family:'Bebas Neue';font-weight:400;font-style:normal;font-display:swap;
  src:url(fontes/BebasNeue-Regular.woff) format('woff')}
@font-face{font-family:'Mulish';font-weight:200 1000;font-style:normal;font-display:swap;
  src:url(fontes/Mulish-Variable.woff) format('woff')}

/* ============================================================
   TOKENS DO PADRÃO BCM — fonte única de verdade.
   Nenhum componente escreve cor, espaço, raio ou duração na mão.
   Espelho legível em assets/tokens.json; conferido por assets/verificar.py.
   ============================================================ */
:root{
  /* as cinco cores da marca (mais o fundo do ícone). Não mudam com o tema —
     são a identidade; o uso em tela passa pelos tokens de cor logo abaixo */
  --bcm-azul:#006EA5;--bcm-azul-claro:#80B6E3;--bcm-preto:#3C3C3B;
  --bcm-cinza:#686969;--bcm-gelo:#EBEBEA;--bcm-icone-fundo:#2B2B2B;
  /* espaçamento — escala de 4 */
  --esp-1:4px;--esp-2:8px;--esp-3:12px;--esp-4:16px;--esp-5:22px;--esp-6:32px;--esp-7:48px;
  /* raio */
  --raio-0:4px;--raio-1:6px;--raio-2:8px;--raio-3:10px;--raio-4:12px;--raio-5:14px;--raio-pill:20px;
  /* tipografia */
  --familia-titulo:Bebas Neue;--familia-texto:Mulish;
  --peso-apoio:400;--peso-padrao:600;--peso-enfase:700;--peso-numeros:800;
  --txt-xs:11.5px;--txt-sm:12.5px;--txt-md:13.5px;--txt-lg:15px;--txt-grupo:9.5px;
  --tit-sm:16px;--tit-md:19px;--tit-lg:23px;--tit-xl:26px;--tit-2xl:30px;--tit-3xl:46px;
  /* movimento */
  --dur-1:.15s;--dur-2:.22s;--dur-3:.3s;--dur-4:.45s;--dur-pref:400ms;--dur-traco:.9s;
  --ease:cubic-bezier(.2,.8,.2,1);--ease-saida:cubic-bezier(.4,0,.7,.2);
  /* tela de carregamento: fixa nos dois temas — quando ela aparece, o tema
     pode nem ter sido lido ainda. Os dois tempos são lidos daqui pelo JS:
     sob prefers-reduced-motion o mínimo é ZERO, senão a tela fica parada
     mais de um segundo mostrando nada. */
  --carr-fundo-1:#14303F;--carr-fundo-2:#0D1319;--carr-esfera:#2E90D9;
  --carr-ponto:#FFFFFF;--carr-txt:#EDF2F6;--carr-txt2:#9BAAB7;
  --tempo-minimo:1150ms;--tempo-minimo-reduzido:0ms;--saida:420ms;
  /* medidas do shell */
  --alt-ctrl:38px;--alt-ctrl-sm:32px;--alvo-toque:44px;
  --item-menu-alt:40px;--item-menu-icone:17px;--item-menu-caixa:26px;--traco-menu:1.7;
  /* ===== a CALHA =====
     A distância entre o conteúdo e a sidebar, e entre o conteúdo e a borda
     da tela, é UMA medida só — este token. Escrever 22px direto no `main`
     é como as duas se soltam uma da outra no primeiro projeto novo. */
  --calha:22px;--main-padding:20px var(--calha) 36px;
  --sidebar:242px;--sidebar-rail:68px;--topo:56px;--conteudo-max:1600px;
  /* ===== a BARRA DE ROLAGEM do sistema =====
     Uma só, desenhada aqui, com as setas nas duas pontas. A nativa não
     serve: o Chrome desenha a dele, o Firefox não desenha seta nenhuma e o
     Mac esconde a barra até alguém rolar — o mesmo sistema virava três
     sistemas em três máquinas. Ela mora numa faixa de --rol-larg na borda
     direita, que é exatamente a faixa que o scrollbar-gutter reservava: a
     calha do conteúdo não muda por causa dela. */
  --rol-larg:12px;--rol-seta:15px;--rol-polegar-min:28px;--rol-raio:6px;
  --rol-passo:48px;--rol-espera:320ms;--rol-repete:60ms;
  /* ===== as duas BUSCAS =====
     A geral, no topo, sempre à vista: ela É a paleta de comandos, e Ctrl+K
     põe o foco nela. A da tela, dentro da aba, filtrando a tabela enquanto
     se digita. Nenhuma das duas tem botão de buscar. */
  --busca-topo-l:340px;--busca-topo-alt:34px;--busca-painel-l:560px;
  --busca-tela-l:360px;--busca-espera:220ms;
  /* Gestão — condicional, mas o desenho nasce aqui para nascer igual */
  --gestao-coluna-min:260px;--gestao-cartao-min:96px;--nota-linhas:6;
  /* agenda: a coluna de horas, a altura de uma hora na grade, o quadrado do
     dia no calendário e a largura do painel "Próximos" ao lado do mês */
  --ag-hora-col:56px;--ag-hora-alt:44px;--ag-dia-min:104px;
  --ag-cal-dia:104px;--ag-cal-dia-mobile:64px;--ag-cal-num:26px;--ag-lado:320px;
  --legenda-alt:340px;
  --gestao-nota-min:220px;--gestao-faixa:3px;--gestao-proj-alt:108px;--gestao-ficha-rot:152px;--gestao-ficha-min:480px;--gestao-leitura:78ch;
  /* IA — condicional como a Gestão, e pelo mesmo motivo o desenho nasce aqui:
     o cartão do provedor, a coluna do ordinal e do nome na cascata, os dois
     campos numéricos, a barra de consumo e a largura mínima das três tabelas */
  --ia-cartao-min:248px;--ia-ordem-num:34px;--ia-provedor-min:196px;
  --ia-num-larg:88px;--ia-barra-alt:8px;--ia-trilha-rot:128px;
  --ia-funcoes-min:880px;--ia-consumo-min:760px;--ia-historico-min:1020px;
  /* Dicas e manuais — a terceira subaba de Minha conta */
  --manual-figura-l:440px;--manual-passo:26px;--manual-cartao-min:240px;
  /* ===== a tela INÍCIO — obrigatória, a porta de entrada =====
     As colunas (módulos | relatório), o cartão de módulo nos três desenhos,
     os números, as barras por dia e a gaveta de preferências. */
  --ini-avatar:52px;--ini-hoje-max:280px;--ini-relatorio-min:360px;
  --ini-lateral-min:280px;--ini-lateral-l:340px;
  --ini-mod-min:232px;--ini-mod-min-compacto:210px;--ini-mod-max:460px;--ini-mod-icone:44px;--ini-mod-icone-compacto:34px;
  /* o componente de gráfico: a caixa do desenho e a altura do vazio */
  --graf-larg:480px;--graf-alt:260px;--graf-vazio-alt:180px;--graf-rosca-arco:18px;
  --ini-mosaico-min:150px;--ini-mosaico-icone:48px;--ini-kpi-min:150px;--ini-situacao-min:300px;
  --ini-barras-alt:132px;--ini-barras-alt-larga:210px;--ini-rosca:104px;--ini-grupo-rot:104px;
  --ini-coluna-min:210px;--ini-linha-q:72px;--ini-pend-min:190px;--ini-opcao-min:112px;--ini-miniatura-alt:66px;
  /* sobre o degradê da faixa: o véu da pastilha e as três cores de estado,
     fixas nos dois temas porque o degradê é o mesmo nos dois */
  --ini-veu-marca:rgba(4,18,30,.35);--ini-ok-sobre-marca:#46D39A;--ini-al-sobre-marca:#F0B357;--ini-err-sobre-marca:#FF9A93;
  /* ===== estado ativo do menu — FIXO nos dois temas =====
     Antes o item selecionado usava --prim, que troca de valor com o tema:
     no claro virava azul escuro com texto branco, no escuro azul claro com
     texto quase preto. Eram dois desenhos diferentes para o mesmo estado, e
     a pessoa que alterna o tema percebe na hora. Agora é sempre o azul da
     marca com texto branco — o estado ativo não é decoração, é informação,
     e informação não muda de cara quando muda a luz. */
  --nav-ativo:#006EA5;--nav-ativo-txt:#FFFFFF;--nav-ativo-qtd:rgba(0,0,0,.18);
  /* três papéis do menu, três desenhos — as medidas moram aqui para tópico,
     aba e subaba não divergirem no primeiro ajuste */
  --nav-topico-txt:10.5px;--nav-topico-cima:26px;--nav-topico-lados:14px;--nav-topico-baixo:6px;
  --nav-sub-alt:34px;--nav-sub-icone:15px;--nav-sub-caixa:22px;--nav-sub-recuo:16px;
  --nav-rail-item:42px;--nav-rail-entre:6px;--nav-entre-abas:2px;--nav-chevron:13px;--nav-acao:30px;
  /* logo: tamanhos fixos. Nunca estique — se a caixa não bate, muda a caixa */
  --gav-max-l:1100px;
  --logo-sidebar-l:176px;--logo-sidebar-a:47px;--logo-rail-l:34px;--logo-rail-a:34px;
  --logo-login-l:190px;--logo-login-a:84px;--logo-impressao-l:110px;--logo-impressao-a:30px;
  --logo-respiro:12px;
  /* escala da interface — Minha conta > Preferências > Tamanho */
  --esc-pequeno:.92;--esc-padrao:1;--esc-grande:1.08;--esc-maior:1.18;
  --escala:var(--esc-padrao);
  /* viewport corrigida pela escala: 100vh estoura quando a interface cresce.
     Ninguém escreve 100vh/100vw solto — passa por estes dois. */
  --vp-h:calc(100vh / var(--escala));--vp-w:calc(100vw / var(--escala));
  /* sidebar: calha reservada no fluxo x largura desenhada — medidas
     independentes, e é isso que deixa a barra sobrepor sem empurrar a tela */
  --sb-reserva:var(--sb-larg);--sb-larg:var(--sidebar);--sb-larg-rail:var(--sidebar-rail);
  --sb-reserva-oculta:0px;--sb-borda:14px;--sb-atraso-saida:200ms;
  /* avatar: aqui só as MEDIDAS. As oito cores e a cor da inicial mudam com o
     tema desde a 13.0.0 e moram nos dois blocos de cor, junto de --graf-1..6.
     --av-cor continua aqui porque ele é um PONTEIRO: aponta para o token da
     cor escolhida, e quem resolve o valor é o tema de quem está olhando. */
  --av-shell:32px;--av-topo:34px;--av-perfil:96px;--av-limite-foto:2097152;
  --av-amostra:40px;--av-amostra-p:30px;--av-amostra-selo:18px;
  --av-cor:var(--av-1);
  /* modal: o X, a largura e a margem lateral. A margem é o que sobra da
     janela quando ela é menor que --modal-larg. */
  --modal-x:32px;--modal-x-topo:14px;--modal-x-lado:14px;--modal-x-icone:15px;
  --modal-tit-pad:38px;--modal-larg:520px;--modal-margem:32px;
  /* ===== VISOR DE ANEXO =====
     Ele é mais largo que o modal comum de propósito: o que se lê aqui é
     uma folha de papel, uma foto de painel ou uma grade de planilha, e
     nenhuma das três cabe na largura de um formulário. Os limites de linha
     e de coluna são token porque a grade é desenhada em tela — planilha de
     cem mil linhas montada de uma vez trava a aba antes de mostrar a
     primeira célula, e o visor prefere dizer quanto está mostrando. */
  --visor-larg:1060px;--visor-palco-min:300px;--visor-pdf-alt:640px;
  --visor-zoom-min:.25;--visor-zoom-max:4;--visor-zoom-passo:.25;
  --visor-cel-min:108px;--visor-cel-max:320px;--visor-canto:54px;
  --visor-aba-alt:30px;--visor-limite-linhas:2000;--visor-limite-colunas:64;
  /* ===== celular =====
     A versão de celular NÃO é uma segunda interface: mesma tela, mesma rota,
     mesmo código. Abaixo de --quebra-mobile a sidebar sai do fluxo e o menu
     vira a barra de abas de baixo, o topo encolhe para --topo-mobile e a
     tabela vira cartão. O token da quebra fica aqui para o valor ter NOME —
     media query não aceita var(), então a regra escreve 900px e este token é
     onde se lê de onde ele veio. */
  --quebra-mobile:900px;--topo-mobile:50px;--tab-marca-l:26px;--tab-marca-a:3px;--tab-marca-topo:5px;
  /* --tab-raio é a METADE de --tab-alt: o canto fecha em semicírculo e a
     barra vira cápsula, que é o desenho do Instagram e do iOS mais novo.
     Raio menor que a metade deixa um trecho reto no meio da curva, e é ele
     que faz a barra parecer um retângulo arredondado em vez de uma cápsula. */
  --tab-alt:58px;--tab-icone:23px;--tab-rotulo:10.5px;--tab-raio:29px;
  --vid-desf:24px;--vid-veu-desf:10px;--vid-sat:1.7;
  --vid-material:contrast(var(--vid-contraste)) brightness(var(--vid-brilho)) saturate(var(--vid-sat));
  --tab-margem:12px;
  --folha-raio:20px;--folha-punho:36px;
  /* ===== INBOX =====
     A tela cheia das notificações. O sino é a espiada rápida; aqui se
     trabalha a fila. Os cartões do topo são filtros que se clicam, e saem
     dos tipos que aquele sistema realmente emite (ver TIPOS_NOTIF). */
  --inbox-cartao-alt:84px;--inbox-cartao-min:210px;--inbox-item-alt:72px;
  --inbox-faixa:3px;--inbox-icone:38px;
  /* tooltip e toast: escuros nos dois temas */
  --tt-txt2:#9FB0BE;--tt-ok:#46D39A;--tt-err:#FF7B72;
  /* login — o desenho é o mesmo em todo sistema BCM; só os textos mudam */
  --login-marca-l:42%;--login-marca-pad:48px 56px;--login-cartao-l:380px;
  --login-pad-mobile-x:22px;--login-faixa-cima:26px;--login-faixa-baixo:28px;
  /* degradê — a linguagem é a do painel de marca do login */
  --deg-angulo:158deg;--deg-brilho-pos:78% 18%;--deg-brilho-raio:58%;
  --deg-faixa-1:#0D3E58;--deg-faixa-2:#0B2C3E;--deg-faixa-txt:#EAF3F9;
  --deg-faixa-txt2:#DCEAF4;--deg-veu-alt:46px;--guia-vidro-l:34ch;--guia-veu-alt:180px;
  /* O DEGRADÊ DA MARCA, ESCRITO UMA VEZ. Ele é usado pela classe `.deg-marca` e
     pelo `::before` da faixa do celular — e pseudo-elemento não recebe classe,
     então o que os dois compartilham tem de ser o VALOR. */
  --deg-marca-fundo:radial-gradient(circle at var(--deg-brilho-pos),var(--login-brilho),transparent var(--deg-brilho-raio)),linear-gradient(var(--deg-angulo),var(--login-g1) 0%,var(--login-g2) 48%,var(--login-g3) 100%);
  --login-cartao-pad:36px;--login-cartao-gap:20px;--login-btn-alt:42px;
  --login-olho:32px;--login-tema:32px;--login-quebra:860px;
  /* --login-g3 NAO e o #006EA5 da marca. Com o brilho radial por cima, o
     ponto mais claro do painel chega a #095984; com o azul cheio o rodape
     caia para 2,7:1 e a hierarquia de cor tinha de ser jogada fora. O azul
     da marca aparece no painel pelo LOGO, que e onde ele pertence — nao no
     fundo atras do texto. Assim os tres tons fecham 7,5 / 6,1 / 4,9 no pior
     ponto, e a hierarquia volta a ser de cor E de tamanho. */
  --login-g1:#0B2C3E;--login-g2:#0D3E58;--login-g3:#00456A;
  --login-brilho:rgba(79,169,238,.12);
  --login-txt:#EDF2F6;--login-txt2:#CBDCEA;--login-txt3:#AFC8DE;
}
/* ===== cor: tema claro ===== */
/* --borda x --borda-ctrl: --borda é separador e moldura decorativa; a borda
   que DELIMITA um controle (input, select, textarea, botão secundário) é
   --borda-ctrl, e ela existe porque precisa fechar 3:1 contra o fundo — a
   decorativa não precisa, e usar uma só deixava metade dos campos invisíveis
   para quem enxerga pouco. --txt3 e --desab existem pelo mesmo motivo: texto
   apagado por `opacity` derruba contraste sem aviso nenhum. */
/* --campo-fundo: o fundo do CAMPO, um poço mais fundo que a superfície. É o
   preenchimento que diz onde o controle começa — a borda é só a aresta, e por
   isso ela fica no mínimo que ainda fecha 3:1. Todo campo de texto, área de
   texto e gatilho de seleção pinta com ele, nunca mais com --sup2. */
:root{--fundo:#EBEBEA;--sup:#FFFFFF;--sup2:#F4F4F3;--campo-fundo:#FFFFFF;--borda:#DEDEDC;--borda-ctrl:#838380;
  --txt:#3C3C3B;--txt2:#686969;--txt3:#5C5D5D;--desab:#8A8B8A;
  --prim:#006EA5;--prim-txt:#FFFFFF;--prim-suave:#E1EDF4;--ok:#1F6B4A;--ok-bg:#E1EFE8;
  --err:#9E2B21;--err-bg:#F6E4E2;--al:#8A5510;--al-bg:#F4EAD8;--hover:#F0F0EF;
  /* superficie FLUTUANTE (lista de select, menu, popover). No claro e o branco
     do cartao e quem separa e a borda; no escuro tem de ser mais CLARA que o
     que esta atras, senao o painel some dentro do modal. */
  --sup-flut:#FFFFFF;--sup-flut-rgb:255,255,255;
  /* os dois graus do material de vidro e o que o filtro faz com o que
     passa por baixo. No claro o brilho SOBE: o pior fundo aqui e o preto,
     e preto multiplicado continua preto — quem o levanta do chao e o
     contraste, e por isso os dois andam juntos. */
  --vid-alto:.82;--vid-baixo:.90;--vid-contraste:.35;--vid-brilho:1.75;
  --sombra:0 1px 3px rgba(60,60,59,.08);--tdp:12px 14px;
  --area-op:.12;
  /* as seis cores de SÉRIE do gráfico, nesta ordem (references/graficos.md).
     Gráfico é desenho: o que se LÊ nele — eixo, rótulo, dica — usa --txt2 e a
     família --tt-*, que essas sim passam pelo contraste.py */
  --graf-1:#006EA5;--graf-2:#0F6B72;--graf-3:#8A5510;--graf-4:#5B4B8A;--graf-5:#1F6B4A;--graf-6:#9E2B21;
  /* AS OITO DO AVATAR, primeira das duas faces (13.0.0): disco profundo,
     inicial branca. Elas não são as do gráfico — o gráfico compara séries
     dentro de um desenho e o avatar distingue PESSOAS numa lista. */
  --av-txt:#FFFFFF;
  --av-1:#0B6CA9;--av-2:#0C7379;--av-3:#227645;--av-4:#557115;
  --av-5:#905D04;--av-6:#B6411E;--av-7:#BB2F70;--av-8:#7F4EC1;
  --tt-sup:#262D33;--tt-borda:#3A434B;--tt-txt:#EDF2F6;--tt-link:#80B6E3;
  --err-txt:#FFFFFF;--neutro-bg:#F0F0EF;--neutro-txt:#686969;
  /* a barra de rolagem do sistema: trilho, polegar, polegar sob o mouse e a
     cor das setas. O polegar fecha 3:1 contra o trilho E contra as duas
     superfícies em que ele pousa — é controle, e controle se enxerga. */
  /* as oito cores de nota: fundo do cartão, escolhido por quem escreve. Elas
     são medidas pelo contraste.py como qualquer par — oito fundos é oito
     chances de alguém escolher uma cor em que a própria nota fica ilegível */
  --nota-1:#C3DEF1;--nota-2:#C3F1DC;--nota-3:#F1E5C3;--nota-4:#F1D7C3;
  --nota-5:#F1C7C3;--nota-6:#D8C3F1;--nota-7:#F1C3DE;--nota-8:#E4E8EC;
  --nota-txt2:#51575C;
  --ag-filete:#ECECEB;
  --rol-trilho:#EDEDEC;--rol-polegar:#7C7C79;--rol-polegar-forte:#5A5A58;--rol-seta-cor:#686969;
  --sw-bola:#FFFFFF;--brilho:none;
  /* o anel de foco é SÓLIDO. A versão translúcida (16% de opacidade) sumia
     sobre superfície clara, e um indicador de foco que some não é indicador.
     Dois pixels, não três: com três o foco deixava de ser anel e virava bloco. */
  --anel-cor:#006EA5;--anel:0 0 0 2px var(--anel-cor);
  --sombra-2:0 16px 40px rgba(60,60,59,.16);--sombra-h:0 6px 16px rgba(60,60,59,.12);
  --veu:rgba(255,255,255,0)}
:root[data-tema="escuro"]{--fundo:#0D1319;--sup:#18212A;--sup2:#212C36;--campo-fundo:#0F161C;--borda:#2E3C48;--borda-ctrl:#627888;
  --txt:#EDF2F6;--txt2:#9FB0BE;--txt3:#9FB0BE;--desab:#7C8B98;
  --prim:#4FA9EE;--prim-txt:#04121E;--prim-suave:#16324A;--ok:#46D39A;--ok-bg:#12332A;
  --err:#FF7B72;--err-bg:#3B1E1E;--al:#F0B357;--al-bg:#3A2C14;--hover:#202B35;
  --sup-flut:#26333F;--sup-flut-rgb:38,51,63;
  /* NO ESCURO O CONTRASTE FICA DESLIGADO (1), e e por isso que o vidro
     escuro e vidro de verdade. O pior fundo aqui e o BRANCO, e escurecer
     resolve sozinho — o contraste so achataria a variacao que o vidro existe
     para mostrar. A 7.4.0 herdou o contraste do claro por simetria e o escuro
     ficou com cinco niveis de variacao em 255: o custo inteiro do desfoque
     para um efeito que ninguem enxergava. */
  --vid-alto:.52;--vid-baixo:.68;--vid-contraste:1;--vid-brilho:.22;
  --err-txt:#2A0A08;--neutro-bg:#2C3946;--neutro-txt:#BFD0DC;
  --nota-1:#204157;--nota-2:#20573E;--nota-3:#574A20;--nota-4:#573820;
  --nota-5:#572520;--nota-6:#3A2057;--nota-7:#572041;--nota-8:#373E46;
  --nota-txt2:#BBBFC3;
  --ag-filete:#26313D;
  --rol-trilho:#151D25;--rol-polegar:#5C7183;--rol-polegar-forte:#8399AC;--rol-seta-cor:#9FB0BE;
  --sombra:0 2px 10px rgba(0,0,0,.5);--area-op:.22;
  /* no escuro a série sobe de luminosidade: as mesmas seis, claras o
     bastante para se separarem do fundo azul-ardósia */
  --graf-1:#4FA9EE;--graf-2:#46C7D3;--graf-3:#F0B357;--graf-4:#B49BF5;--graf-5:#46D39A;--graf-6:#FF9A93;
  /* A SEGUNDA FACE DO AVATAR: aqui o disco é CLARO e a inicial é escura. A
     paleta única de antes ficava entre 1,47 e 2,93:1 contra --sup, e a de
     1,47 (o cinza quase preto) sumia dentro do cartão. Virar a face é o que
     devolve o disco à tela — e o piso de 3:1 de peça gráfica. */
  --av-txt:#0D1319;
  --av-1:#54ACE3;--av-2:#1FB6BD;--av-3:#36BA6D;--av-4:#87B222;
  --av-5:#DA9723;--av-6:#E88C70;--av-7:#E189B2;--av-8:#B598DB;
  --tt-sup:#2A3742;--tt-borda:#41525F;--tt-txt:#EDF2F6;--tt-link:#7CC0F5;
  --sw-bola:#EDF2F6;--brilho:inset 0 1px 0 rgba(255,255,255,.05);
  --anel-cor:#6FBEFA;--anel:0 0 0 2px var(--anel-cor);
  --sombra-2:0 22px 50px rgba(0,0,0,.62);--sombra-h:0 8px 22px rgba(0,0,0,.5);
  --veu:rgba(255,255,255,.03)}
/* ===== densidade compacta: mesma hierarquia, mais linhas na tela ===== */
:root[data-densidade="compacta"]{--tdp:7px 14px;--alt-ctrl:32px;--alt-ctrl-sm:28px;--esp-5:16px;--esp-6:22px}
:root[data-densidade="compacta"] .kpi{padding:var(--esp-3) var(--esp-4)}
:root[data-densidade="compacta"] .kpi-valor{font-size:var(--tit-xl)}
:root[data-densidade="compacta"] .painel-graf{padding:14px var(--esp-4)}
:root[data-densidade="compacta"]{--calha:16px}
:root[data-densidade="compacta"] main{padding-block:14px 28px}
/* ===== tamanho da interface =====
   Um controle só escala texto, controles e espaçamento juntos — é o que a
   pessoa espera quando pede "aumentar a interface"; separar texto de
   interface produz telas desmontadas. zoom no elemento raiz é o único jeito
   de alcançar TUDO, inclusive o que vive no top layer (<dialog>). Quem usa
   vh/vw divide pela escala: --vp-h e --vp-w já fazem isso. */
html{zoom:var(--escala)}
:root[data-escala="pequeno"]{--escala:var(--esc-pequeno)}
:root[data-escala="grande"]{--escala:var(--esc-grande)}
:root[data-escala="maior"]{--escala:var(--esc-maior)}
/* relevo do modo escuro: superfícies ganham um fio de luz no topo para não parecerem chapadas */
:root[data-tema="escuro"] .cartao,:root[data-tema="escuro"] .kpi,:root[data-tema="escuro"] .painel-graf,
:root[data-tema="escuro"] .modal-caixa{box-shadow:var(--sombra),var(--brilho)}
:root[data-tema="escuro"] nav.lateral{background-image:linear-gradient(180deg,var(--veu),transparent 220px);
  box-shadow:inset -1px 0 0 rgba(0,0,0,.35)} /* bcm-ok: filete de 1px na borda direita da barra, não é sombra de elevação */
/* o item ativo NÃO ganha brilho só no escuro — ver --nav-ativo lá em cima */
:root[data-tema="escuro"] .btn:not(.btn-sec):not(.btn-ter):not(.btn-linha):not(.btn-ic){box-shadow:0 2px 10px color-mix(in srgb,var(--prim) 22%,transparent)}

*,*::before,*::after{box-sizing:border-box}
/* ===== O DOCUMENTO NÃO ROLA =====
   Quem rola é a área de conteúdo, dentro da barra do sistema. Três coisas
   saem de graça daí: a barra sempre tem onde morar (ela é da área, não da
   janela), o topo e o menu ficam parados sem depender de `sticky`, e a
   largura do conteúdo para de mudar entre a tela que rola e a que não rola.

   E o `scrollbar-gutter:stable` SAIU. Ele era o remendo do defeito acima —
   reservava a faixa da barra nativa na janela para o conteúdo não saltar. Com
   o documento parado, a faixa deixou de ser reserva e virou perda: o Chrome
   reserva o corredor mesmo com `overflow:hidden`, e o conteúdo terminava
   quinze pixels antes da borda direita, com a calha da direita maior que a da
   esquerda. Era exatamente a queixa que este padrão precisava resolver.
   `both-edges` continua proibido pelo mesmo motivo de sempre — ele reserva
   também à esquerda e descola a sidebar da borda da janela. */
[hidden]{display:none!important}
html,body{margin:0;padding:0;overflow-x:clip}
html,body{height:100%;overflow-y:hidden}
@media print{html,body{height:auto;overflow:visible}}
body{background:var(--fundo);color:var(--txt);font-family:Mulish,system-ui,sans-serif;
  transition:background var(--dur-2),color var(--dur-2)}
a{color:var(--prim);text-decoration:none}a:hover{text-decoration:underline}
input,button,select,textarea{font-family:Mulish,system-ui,sans-serif}
::placeholder{color:var(--txt2);opacity:1}
:focus-visible{outline:2px solid var(--anel-cor);outline-offset:2px}
dialog{border:none;padding:0;background:transparent;color:inherit}
dialog::backdrop{background:rgba(15,22,28,.55); /* bcm-ok: véu do modal — escurecimento da tela atrás, IGUAL nos dois temas; não é cor de superfície e não sai da paleta */
  -webkit-backdrop-filter:blur(var(--vid-veu-desf));backdrop-filter:blur(var(--vid-veu-desf))}
/* O VÉU É O GRAU MAIS TRANSLÚCIDO DO PADRÃO, e o único que pode ser: ele
   nunca recebe texto por cima. Estava em 2px, que é desfoque que ninguém
   enxerga — o custo inteiro sem o efeito. Em --vid-veu-desf ele diz o que
   tem de dizer: a tela atrás continua ali, e não dá mais para trabalhar
   nela. É a peça que mais muda a impressão do sistema, e a mais barata.
   E é ela que faz modal, gaveta, folha de baixo e visor serem SÓLIDOS: o
   véu já desfocou, e vidro sobre véu é desfoque sobre desfoque. */
@media (prefers-reduced-transparency:reduce){
  dialog::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none}
}
@keyframes shimmer{0%{background-position:-200px 0}100%{background-position:260px 0}}
@keyframes toastIn{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
@keyframes girar{to{transform:rotate(360deg)}}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.98)}}
/* ===== reduzir movimento nunca pode esconder conteúdo =====
   `*{animation:none}` sozinho é um defeito: toda animação `forwards` cujo
   estado INICIAL é opacity:0 fica presa no zero, e a tela de carregamento
   virava um retângulo escuro vazio por mais de um segundo. Quem desliga
   animação repõe o estado FINAL na marra — é a regra do padrão. */
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .esf-fora,.esf-ponto,.carregando-nome,.carregando-barra,.carregando-txt,
  .tela.anima,.tela.anima .grade-kpi .kpi,.tela.anima .area-fat,
  .aba-corpo,.modal[open],dialog.gaveta[open],.toast,.lote{
    opacity:1!important;transform:none!important}
  /* o traço do gráfico não é opacidade: ele nasce com o dash inteiro
     deslocado e só a animação o traz de volta a zero */
  .tela.anima .linha-fat{stroke-dashoffset:0!important}
}
::selection{background:color-mix(in srgb,var(--prim) 30%,transparent);color:var(--txt)}
/* ===== A BARRA DE ROLAGEM DO SISTEMA =====
   Uma barra só, desenhada aqui, com as setas de navegação nas duas pontas.

   POR QUE NÃO A NATIVA. Ela é três barras diferentes: o Chrome desenha as
   setas dele, o Firefox não desenha seta nenhuma (`scrollbar-width` só aceita
   auto/thin/none, e ele ignora todo o `::-webkit-scrollbar-*`), e o Mac
   esconde a barra até alguém rolar. O objetivo declarado desta skill é que
   dois sistemas BCM pareçam o mesmo sistema — e a barra de rolagem é a peça
   que mais aparece na tela depois do menu.

   A REGRA. Toda área que rola é um `.rol-in` dentro de um `.rol`. O nativo
   se apaga (`scrollbar-width:none` e a pseudo do WebKit com largura zero) e
   `rolagem()` desenha a barra por cima, na faixa de --rol-larg da borda. O
   documento NÃO rola: quem rola é a área de conteúdo — é assim que a barra
   sempre tem onde morar, e é assim que ela nunca cobre o topo nem o menu.

   ONDE ELA NÃO APARECE: em aparelho de toque. Ninguém mira numa faixa de
   --rol-larg com o dedo, e ela roubaria largura de conteúdo. O dedo continua
   rolando pelo nativo, que ali é invisível de fábrica. */
/* O `overflow` do sistema mora AQUI e em nenhum outro lugar. Enquanto cada
   área declarava o seu, a barra era uma decisão de cada componente — e é
   assim que uma delas fica de fora e volta a ser a nativa. A regra
   rolagem-fora-do-padrao reprova overflow auto/scroll em qualquer outro
   seletor. */
.rol{position:relative}
.rol-in{overflow:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none}
/* a contenção vale só no eixo que a área rola: `contain` nos dois eixos numa
   tabela que só rola para o lado prendia a roda do mouse e a página parava */
.rol-in.rol-so-y{overflow-x:hidden;overscroll-behavior-x:auto}
.rol-in.rol-so-x{overflow-y:hidden;overscroll-behavior-y:auto}
.rol-in::-webkit-scrollbar{width:0;height:0}
.rol-barra{position:absolute;z-index:6;display:none;pointer-events:auto;
  opacity:0;transition:opacity var(--dur-1) var(--ease)}
.rol-barra.mostra{display:flex;opacity:1}
.rol-y{top:0;right:0;bottom:0;width:var(--rol-larg);flex-direction:column}
.rol-x{left:0;right:0;bottom:0;height:var(--rol-larg);flex-direction:row}
/* o trilho é contínuo do alto ao pé: as setas pousam SOBRE ele, e é isso que
   faz a barra ler como uma peça só em vez de três encostadas */
.rol-barra::before{content:"";position:absolute;inset:0;background:var(--rol-trilho);border-radius:var(--rol-raio)}
.rol-seta{flex:none;position:relative;display:flex;align-items:center;justify-content:center;padding:0;
  border:none;background:transparent;color:var(--rol-seta-cor);cursor:pointer;border-radius:var(--rol-raio)}
.rol-y .rol-seta{width:100%;height:var(--rol-seta)}
.rol-x .rol-seta{height:100%;width:var(--rol-seta)}
.rol-seta:hover{color:var(--txt)}
.rol-seta:disabled{color:var(--desab);cursor:default}
.rol-seta:focus-visible{outline:none;box-shadow:var(--anel)}
.rol-trilho{flex:1;position:relative;min-width:0;min-height:0}
.rol-polegar{position:absolute;background:var(--rol-polegar);border-radius:var(--rol-raio);
  cursor:default;transition:background var(--dur-1)}
.rol-y .rol-polegar{left:2px;right:2px}
.rol-x .rol-polegar{top:2px;bottom:2px}
.rol-polegar:hover,.rol-barra.arrastando .rol-polegar{background:var(--rol-polegar-forte)}
/* Onde não há ponteiro, não há barra. E o conteúdo recupera a faixa dela. */
@media (hover:none){
  .rol-barra{display:none!important}
  main{padding-right:0}
}
@media print{
  .rol-barra{display:none!important}
  .rol-in{overflow:visible!important;height:auto!important;max-height:none!important}
}

/* ===== acessibilidade ===== */
.pular{position:fixed;left:var(--esp-3);top:-60px;z-index:300;background:var(--prim);color:var(--prim-txt);
  padding:10px var(--esp-4);border-radius:var(--raio-2);font:700 var(--txt-md) Mulish,sans-serif;
  transition:top var(--dur-1);text-decoration:none}
.pular:focus{top:var(--esp-3);text-decoration:none}
/* só para o leitor de tela: some da vista sem sair da árvore de acessibilidade.
   É por aqui que a troca de tela é anunciada — ver anunciar() no JS. */
/* O `left:0` NÃO é decoração: sem ele, o rótulo escondido dentro do <th> de
   ações herda como bloco de contenção a JANELA (não há ancestral posicionado)
   e, por isso, NÃO é recortado pelo .tab-wrap que rola. Ele ficava parado no
   fim da tabela de 940px e esticava o documento em 128px: barra de rolagem
   horizontal na página inteira, em 1024px, sem nada visível para explicá-la. */
.so-leitor{position:absolute;left:0;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ===== faixa de conexão =====
   Discreta e no topo: perder a rede não é motivo para trocar a tela da
   pessoa, é motivo para avisar que o que ela fizer agora não vai chegar. */
.faixa-offline{display:flex;align-items:center;gap:var(--esp-2);
  padding:var(--esp-2) var(--calha);background:var(--al-bg);color:var(--al);
  font:var(--peso-enfase) var(--txt-sm) var(--familia-texto),sans-serif;
  border-bottom:1px solid var(--borda)}

/* ===== erro DENTRO da tela =====
   Falhar ao carregar uma lista não apaga a busca, os filtros nem a seleção:
   some só o que não veio. Trocar a tela inteira por um 500 joga fora trabalho
   que ninguém pediu para jogar. */
.erro-bloco{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:var(--esp-2);padding:var(--esp-7) var(--esp-5)}
.erro-bloco h2{font:var(--peso-apoio) var(--tit-lg) var(--familia-titulo),sans-serif;
  letter-spacing:.03em;margin:0}
.erro-bloco p{margin:0;color:var(--txt2);max-width:400px;
  font:var(--peso-padrao) var(--txt-md) var(--familia-texto),sans-serif}
.erro-bloco .btn{margin-top:var(--esp-3)}

/* ===== a linha da tabela leva ao detalhe =====
   O mouse abre a gaveta clicando em qualquer lugar da linha; o teclado abre
   pelo identificador, que é um BOTÃO de verdade. Botão dá Enter e Espaço de
   graça e não quebra a semântica da tabela, como faria role="button" no <tr>. */
tbody tr[data-os],tbody tr[data-abre]{cursor:pointer}
.lnk-os{border:none;background:transparent;padding:0;cursor:pointer;text-align:left;
  font:var(--peso-numeros) var(--txt-md) var(--familia-texto),sans-serif;
  color:var(--prim);font-variant-numeric:tabular-nums;white-space:nowrap}
/* SEM SUBLINHADO NO HOVER (17.0.0, estudo 7). O sublinhado de um pedaço da
   linha competia com o realce da linha inteira e, num nome comprido, era
   cortado pela reticência. Quem diz "isto abre" aqui é a linha mudando de
   fundo; a cor de link já separa o nome do resto da célula em repouso. */
.lnk-os:hover{color:var(--prim);filter:brightness(1.12)}
.lnk-os:focus-visible{outline:2px solid var(--anel-cor);outline-offset:2px;border-radius:var(--raio-0)}

/* ===== utilitários do design ===== */
.tit{font:400 var(--tit-md) 'Bebas Neue',sans-serif;letter-spacing:.04em;white-space:nowrap;margin:0}
.cartao{background:var(--sup);border:1px solid var(--borda);border-radius:var(--raio-4);box-shadow:var(--sombra)}
.rot{font:700 var(--txt-sm) Mulish,sans-serif;color:var(--txt2)}
.badge{display:inline-block;padding:var(--esp-1) 10px;border-radius:var(--raio-pill);font:700 var(--txt-xs) Mulish,sans-serif;white-space:nowrap;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 20%,transparent)}
.b-aberta{background:var(--al-bg);color:var(--al)}
.b-andamento{background:var(--prim-suave);color:var(--prim)}
.b-peca{background:var(--neutro-bg);color:var(--neutro-txt)}
.b-concluida{background:var(--ok-bg);color:var(--ok)}
.b-cancelada{background:var(--err-bg);color:var(--err)}
.b-criou{background:var(--ok-bg);color:var(--ok)}
.b-editou{background:var(--prim-suave);color:var(--prim)}
.b-excluiu{background:var(--err-bg);color:var(--err)}
.b-login,.b-backup{background:var(--neutro-bg);color:var(--neutro-txt)}
.b-exportou{background:var(--al-bg);color:var(--al)}
.b-ok{background:var(--ok-bg);color:var(--ok)}
.b-falhou{background:var(--err-bg);color:var(--err)}
.esq{border-radius:var(--raio-1);background:linear-gradient(90deg,var(--sup2) 25%,var(--hover) 50%,var(--sup2) 75%);
  background-size:200px 100%;animation:shimmer 1.1s infinite linear} /* bcm-ok: 1.1s é o ciclo de um laço infinito (o brilho que atravessa o esqueleto), não a duração de uma transição — os tokens de movimento vão de --dur-1 a --dur-4 */

/* botões — hierarquia */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--esp-2);height:var(--alt-ctrl);padding:0 var(--esp-4);
  border:none;border-radius:var(--raio-2);background:var(--prim);color:var(--prim-txt);
  font:700 var(--txt-sm) Mulish,sans-serif;cursor:pointer;transition:filter var(--dur-1),background var(--dur-1)}
.btn:not(.btn-sec):not(.btn-ter):not(.btn-linha):not(.btn-ic){
  background-image:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0))} /* bcm-ok: brilho de topo do botão — branco COMPOSTO sobre a cor do botão, seja ela qual for; não é cor de paleta */
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.55;cursor:not-allowed;transform:none}
.btn-sec:disabled,.btn-ter:disabled{opacity:1;color:var(--desab);border-color:var(--borda-ctrl)}
.btn-sec{background:var(--sup);color:var(--txt);border:1px solid var(--borda-ctrl)}
.btn-sec:hover{background:var(--hover);filter:none}
/* O TERCIÁRIO TAMBÉM TEM CORPO. Ele era transparente, e a mesma coisa que
   acontecia com o botão de ícone acontecia com ele: "Voltar para a lista",
   "Mover", "Limpar filtros" viravam texto azul solto no meio da tela, sem nada
   dizendo até onde ia o alvo. Texto azul é LINK; botão é peça que se aperta, e
   a diferença entre os dois se lê pelo corpo.

   O fundo é `--prim-suave`, um degrau abaixo do secundário: a hierarquia
   continua inteira — o principal é sólido, o secundário é a superfície com
   borda, o terciário é o azul-suave sem borda. Três degraus, três pesos, e
   nenhum deles é "nada".

   O preenchimento é o corpo, e ele fica: preenchimento lê como alvo, contorno
   lê como caixa. O que faltava era a ARESTA. Sem ela o terciário era um bloco
   de cor solto — ao lado de um grupo de abas com borda de verdade, a linha
   ficava com um controle desenhado e dois borrões, e no tema escuro o
   azul-marinho do `--prim-suave` está perto demais da página: sobrava o texto
   claro flutuando. A borda é a PRÓPRIA cor a 42%: ela dá a aresta sem virar
   contorno, que é o que a decisão de 7.3.0 tirou daqui de propósito. */
.btn-ter{background:var(--prim-suave);color:var(--prim);padding:0 var(--esp-3);height:var(--alt-ctrl-sm);
  border:1px solid color-mix(in srgb,var(--prim) 42%,transparent)}
.btn-ter:hover{background:var(--prim);color:var(--prim-txt);border-color:var(--prim);filter:none}
/* a exceção, e ela tem nome: o terciário que vive DENTRO de uma peça já
   preenchida — fundo sobre fundo é um degrau que não se lê, e ali a aresta
   também sobra */
.btn-ter-limpo{background:transparent;border-color:transparent}
.btn-ter-limpo:hover{background:var(--prim-suave);color:var(--prim);border-color:transparent}
.btn-perigo{background:var(--err);color:var(--err-txt)}
/* CHIP DE FILTRO — um filtro que só tem dois estados e vale um clique.
   Ele NÃO é um terceiro tipo de botão: é a altura e o raio do campo ao lado,
   para assentar na barra de filtros como se fosse mais um controle dela.
   Quando aceso ele é o azul-suave, não o azul sólido: sólido é a cor do que
   se está fazendo agora (o item do menu, o botão principal), e um filtro
   ligado é um estado que fica, não uma ação em curso — uma barra com três
   chips sólidos briga com o botão da direita e a tela perde o centro.
   `aria-pressed` é o que conta o estado a quem não vê a cor; sem ele o botão
   se anuncia igual aceso e apagado. */
.chip-filtro{display:inline-flex;align-items:center;gap:var(--esp-2);height:var(--alt-ctrl);
  padding:0 14px;border:1px solid var(--borda-ctrl);border-radius:var(--raio-pill);
  background:var(--sup);color:var(--txt2);cursor:pointer;white-space:nowrap;
  font:600 var(--txt-sm) Mulish,sans-serif;
  transition:background var(--dur-1),color var(--dur-1),border-color var(--dur-1)}
.chip-filtro:hover{background:var(--hover);color:var(--txt)}
.chip-filtro[aria-pressed="true"]{background:var(--prim-suave);color:var(--prim);
  border-color:var(--prim);font-weight:700}
/* o visto entra só quando aceso: sem ele o chip só mudava de cor, e mudança
   de cor sozinha não diz "ligado" para quem enxerga pouca diferença entre os
   dois tons. É o SVG do conjunto, como todo ícone do sistema — um `content`
   com o caractere de visto seria um emoji, que muda de desenho por sistema
   operacional e não herda a cor do texto. */
.chip-filtro .ic-vis{width:14px;height:14px;flex:none;opacity:0;
  margin-left:-18px;transition:opacity var(--dur-1),margin var(--dur-1)}
.chip-filtro[aria-pressed="true"] .ic-vis{opacity:1;margin-left:0}
/* BOTÃO SÓ DE ÍCONE TEM CORPO — e o corpo é FUNDO, nunca traço.
   A regra já foi a oposta: sem nada em repouso, porque "o ícone já é a
   afirmação". Ela vinha de uma queixa real — uma fileira deles com MOLDURA
   vira uma fileira de caixas —, e a conclusão errou o alvo: o que fazia a
   fileira de caixas era o CONTORNO, não o preenchimento. Sem nenhum dos dois, o
   símbolo passou a flutuar no vazio, e nada dizia até onde ia o alvo de clique.
   Num sino pequeno, essa é a diferença entre acertar e errar.

   Preenchimento sem contorno lê como ALVO; contorno lê como CAIXA. Por isso o
   repouso é `--sup2`, a superfície rebaixada que o sistema já usa — não é cor
   nova, e não pede par novo no contraste.

   SEM FUNDO SÓ COM MOTIVO, e o motivo se escreve na linha. São três hoje, e os
   três estão marcados neste arquivo: o que encosta na borda da faixa (um fundo
   ali vira um quadrado no canto da tela), o que já vive DENTRO de uma peça
   preenchida (fundo sobre fundo é um degrau que não se lê) e o botão da linha
   de tabela, que tem classe própria (`.btn-linha`) justamente porque ali a
   repetição é de dezenas por tela. */
.btn-ic{width:36px;height:36px;padding:0;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid transparent;background:var(--sup2);color:var(--txt);border-radius:var(--raio-2);cursor:pointer;
  transition:color var(--dur-1),border-color var(--dur-1),background var(--dur-1)}
.btn-ic:hover{color:var(--prim);background:var(--hover)}
.btn-ic:focus-visible{color:var(--prim);background:var(--hover)}
.btn-ic[aria-expanded="true"],.btn-ic.ativo{color:var(--prim);background:var(--prim-suave)}
/* A EXCEÇÃO, e ela é uma classe — não um `style=` solto em cada botão. Quem
   precisar sair do padrão escreve `btn-ic-limpo` E o motivo no comentário da
   linha, do mesmo jeito que se escreve um `bcm-ok`. */
.btn-ic-limpo{background:transparent;color:var(--txt2)}
.btn-ic-limpo:hover,.btn-ic-limpo:focus-visible{background:var(--hover);color:var(--prim)}
/* ===== OS BOTÕES DO TOPO =====
   No topo, e SÓ no topo, o botão de ícone divide a linha com o campo de busca —
   e ali o desenho de sempre não servia. Eram três metáforas em quatro peças: o
   campo é um poço (`--campo-fundo`) com borda visível (`--borda-ctrl`), os
   botões eram blocos claros (`--sup2`) com a borda TRANSPARENTE, e o avatar um
   círculo cheio. E as alturas nem batiam: 34px o campo e o avatar, 36px os
   botões. No tema escuro, onde `--sup2` está a um passo do `--sup` da barra, o
   resultado era o que o Pedro descreveu: "parece estar faltando algo".
   A correção é a menor possível — o fundo continua o mesmo, entram a BORDA que
   faltava e a altura do campo. Fora do topo o `.btn-ic` fica como está: lá ele
   não divide linha com campo nenhum, e 36px é o alvo certo. */
header.topo .btn-ic{height:var(--busca-topo-alt);width:var(--busca-topo-alt);
  border-color:var(--borda);color:var(--txt2)}
header.topo .btn-ic:hover,header.topo .btn-ic:focus-visible{color:var(--prim);border-color:var(--prim)}
header.topo .avatar-topo{box-shadow:0 0 0 1px var(--borda)}
header.topo .avatar-topo:hover,header.topo .avatar-topo.ativo{box-shadow:0 0 0 2px var(--nav-ativo)}
/* =====================================================================
   FAIXA DE SITUAÇÃO — a tira de contadores no topo de uma tela
   =====================================================================
   Quatro ou cinco números com ícone colorido, numa linha só: "2 abertas há +7
   dias · 1 aguardando peça · 3 em andamento". Ela nasceu na Início, como as
   "Pendências do dia", e é o que dá àquela tela o ritmo que as outras não têm —
   cor com significado antes de qualquer tabela.

   ELA NÃO É OBRIGATÓRIA, e é decisão do Pedro que não seja: tela que não tem
   número para mostrar não ganha uma faixa vazia só para ficar bonita. Ela entra
   onde for PEDIDA. O que o padrão garante é que, entrando, ela é sempre a mesma
   peça — e não a quinta tira de contadores desenhada de um jeito diferente.

   O NÚMERO É UM CAMINHO, nunca um enfeite. Cada item faz uma de duas coisas:
   LEVA a outra tela (`ir`) ou FILTRA a tela onde está (`filtro`). Filtrando, ele
   fica marcado (`aria-pressed`) e o segundo clique desfaz — filtro ligado que
   não se vê é a armadilha clássica de "sumiram os registros". Item sem nenhum
   dos dois não é botão: vira texto, porque cursor de mão em coisa que não faz
   nada é promessa quebrada.

   Quem monta é `faixaSituacao()`, logo abaixo do bloco de componentes no JS. */
.faixa-sit{display:flex;align-items:center;gap:var(--esp-4);flex-wrap:wrap;padding:var(--esp-3) var(--esp-4)}
/* CARTÃO DENTRO DE CARTÃO NÃO EXISTE. A faixa nasce cartão porque quase
   sempre está solta na tela; dentro de outro cartão — como na fila de
   pedidos, que é faixa + lista numa peça só — ela larga a borda, a sombra e
   o fundo próprios, e o que separa a faixa da lista é a borda da 1ª linha. */
.cartao .faixa-sit{border:none;box-shadow:none;background:transparent}
.faixa-sit :is(h2,h3){margin:0;flex:none;font:var(--peso-apoio) var(--tit-md)/1 var(--familia-titulo),sans-serif;letter-spacing:.03em}
.faixa-sit-item{display:flex;align-items:center;gap:var(--esp-2);flex:0 1 auto;min-width:0;white-space:nowrap;border:none;background:transparent;
  border-left:1px solid var(--borda);padding:var(--esp-1) 0 var(--esp-1) var(--esp-4);cursor:pointer;text-align:left;
  font:var(--peso-padrao) var(--txt-sm) var(--familia-texto),sans-serif;color:var(--txt2)}
button.faixa-sit-item:hover .r{color:var(--txt);text-decoration:underline}
.faixa-sit-item:focus-visible{outline:none;box-shadow:var(--anel);border-radius:var(--raio-0)}
.faixa-sit-item .ic{color:var(--l-cor, var(--txt2));flex:none;display:grid}
.faixa-sit-item .n{font-weight:var(--peso-numeros);color:var(--l-cor, var(--txt));font-variant-numeric:tabular-nums}
.faixa-sit-item[data-tom="err"]{--l-cor:var(--err)}
.faixa-sit-item[data-tom="al"]{--l-cor:var(--al)}
.faixa-sit-item[data-tom="prim"]{--l-cor:var(--prim)}
.faixa-sit-item[data-zero="1"]{--l-cor:var(--ok)}
/* item que NÃO leva a lugar nenhum: sem mão, sem sublinhado no hover */
span.faixa-sit-item{cursor:default}
/* FILTRO LIGADO SE VÊ. O item que está filtrando a tela fica preenchido, com a
   cor dele — é o mesmo contrato do `aria-pressed` dos outros botões do padrão,
   e é o que evita o chamado "sumiram os registros". */
button.faixa-sit-item[aria-pressed="true"]{background:var(--prim-suave);color:var(--txt);
  border-radius:var(--raio-2);padding-right:var(--esp-3)}
button.faixa-sit-item[aria-pressed="true"] .r{color:var(--txt);font-weight:var(--peso-enfase)}
.faixa-sit .em-dia{display:flex;align-items:center;gap:var(--esp-2);color:var(--ok);font:var(--peso-enfase) var(--txt-sm) var(--familia-texto),sans-serif}
/* limpar o filtro: aparece SÓ quando há filtro ligado, e à direita de tudo */
.faixa-sit .limpar{margin-left:auto;flex:none}
.btn-linha{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:none;
  background:transparent;color:var(--txt2);cursor:pointer;border-radius:var(--raio-2);transition:all var(--dur-1)}
.btn-linha:hover{background:var(--prim-suave);color:var(--prim)}
.btn-linha.perigo:hover{background:var(--err-bg);color:var(--err)}
/* AS AÇÕES DE UMA LINHA MORAM NUM GRUPO, NUNCA SOLTAS NA CÉLULA (13.0.0).
   Dois botões escritos um depois do outro dentro de um `<td>` ENCOSTAM: `.btn`
   é `inline-flex`, e sem espaço no HTML e sem `gap` num pai não sobra um pixel
   entre eles. Foi assim que o "Baixar" e o "Restaurar" da aba de Backups
   saíram grudados, e a mesma coisa acontece em toda ação montada por
   concatenação de string — o espaço que existiria numa marcação escrita à mão
   some quando o HTML nasce de `'…' + '…'`.
   A correção não é acertar aquela célula: é não ter mais onde errar. Toda
   ação de linha entra aqui, e a regra `botoes-colados` (ERRO) reprova o par
   encostado no arquivo. Mesma folga em qualquer densidade, porque `--esp-2`
   é fixo: o que aperta na densidade compacta é a ALTURA do controle, não a
   distância entre dois alvos de clique diferentes. */
.lin-acoes{display:flex;align-items:center;justify-content:flex-end;gap:var(--esp-2);flex-wrap:nowrap}

/* campos */
.campo{display:flex;flex-direction:column;gap:6px}
.campo>label{font:600 var(--txt-sm) Mulish,sans-serif;color:var(--txt2)}
.ent{height:var(--alt-ctrl);padding:0 var(--esp-3);border:1px solid var(--borda-ctrl);border-radius:var(--raio-2);background:var(--campo-fundo);
  color:var(--txt);font:var(--peso-padrao) var(--txt-md) var(--familia-texto),sans-serif;width:100%}
.ent:hover{border-color:var(--txt)}
/* o campo focado nao pode depender de 1px de borda trocando de cor: o anel
   solido e o indicador, e o outline transparente segura o modo de alto
   contraste, que ignora box-shadow */
.ent:focus{border-color:var(--prim);box-shadow:var(--anel);
  outline:2px solid transparent;outline-offset:2px}
textarea.ent{height:auto;padding:10px var(--esp-3);resize:vertical;font-weight:400}
/* CAMPO DE SENHA — sempre com o olho, aqui e no login (que tem as classes
   .login-* próprias, para a tela viajar inteira quando é copiada). O recuo à
   direita abre espaço para o botão; o botão tem o corpo do controle pequeno */
.campo-senha{position:relative;display:flex}
.campo-senha .ent{padding-right:42px}
.olho{position:absolute;right:var(--esp-1);top:var(--esp-1);
  width:var(--alt-ctrl-sm);height:var(--alt-ctrl-sm);
  display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--txt2);cursor:pointer;border-radius:var(--raio-1)}

/* ===== SELEÇÃO — o gatilho e o painel =====
   O PADRÃO DE TODO SELECT DO SISTEMA, e de um só componente. A anatomia:

     · GATILHO — um controle da altura padrão com o VALOR ESCOLHIDO à esquerda
       e o chevron à direita, que gira ao abrir. Fechado ele mostra o VALOR,
       nunca um campo de busca vazio: o desenho antigo era um <input> que se
       esvaziava ao receber foco, e esvaziar o campo esconde justamente a
       informação que a pessoa foi conferir — no toque, onde o teclado sobe por
       cima da tela, isso é o defeito inteiro.
     · PAINEL — superfície própria logo abaixo, cantos arredondados, borda
       discreta e sombra. É ele que flutua; a lista por dentro só rola.
     · BUSCA PRÓPRIA no topo do painel, com lupa, separada da lista por um
       filete. Ela recebe o foco ao abrir — e o valor continua à vista no
       gatilho enquanto se busca, que é o ganho do desenho.
     · LISTA embaixo: uma linha por opção, a escolhida em azul com um visto à
       direita, e realce ao passar o mouse ou andar com as setas.

   A lista de MENÇÃO reusa isto: ela não tem gatilho nem busca (quem busca é o
   texto que se digita depois da arroba), mas o painel e a lista são os mesmos.
   Dois desenhos de lista seriam dois jeitos de andar com as setas no mesmo
   sistema, que é o que este componente existe para evitar. */
.sel{position:relative}
/* O ROTULO ESCOLHIDO NUNCA CORTA NO MEIO DA PALAVRA: ou cabe, ou termina em
   reticencia — nada de corte seco no meio da silaba, sem nada dizendo que ha
   mais texto. */
.sel-gatilho{display:flex;align-items:center;gap:var(--esp-2);width:100%;
  height:var(--alt-ctrl);padding:0 var(--esp-3);
  border:1px solid var(--borda-ctrl);border-radius:var(--raio-2);
  background:var(--campo-fundo);color:var(--txt);cursor:pointer;text-align:left;
  font:var(--peso-padrao) var(--txt-md) var(--familia-texto),sans-serif;
  transition:border-color var(--dur-1)}
.sel-gatilho:hover{border-color:var(--txt)}
/* mesmo foco do campo de texto: o anel e o indicador, e o outline transparente
   segura o modo de alto contraste, que ignora box-shadow */
.sel-gatilho:focus-visible{border-color:var(--prim);box-shadow:var(--anel);
  outline:2px solid transparent;outline-offset:2px}
.sel-gatilho:disabled{cursor:not-allowed;color:var(--desab)}
.sel-valor{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.sel-valor[data-vazio="1"]{color:var(--txt2)}
/* 18.0.0 (estudo 2A): o campo que precisa de escolha e está sem ela */
.sel-pendente{flex:none;padding:2px var(--esp-2);border-radius:var(--raio-pill);background:var(--al-bg);color:var(--al);
  font:var(--peso-numeros) var(--txt-xs) var(--familia-texto),sans-serif;white-space:nowrap}
/* LARGURA DE CAMPO NA BARRA DE FILTROS: vem do CONTEUDO, em `ch` (a largura
   do zero da fonte), nunca de um numero cravado no markup. O campo pede o
   espaco do rotulo mais longo e cede o resto — encolhe com a janela sem
   nunca ficar menor que o que cabe ler. */
/* O CAMPO NÃO CRESCE, SÓ ENCOLHE: um select de filtro esticado até meia tela
   é o mesmo defeito dos dois cartões de 570px. Quem cresce é a busca, que é
   onde o texto é longo e imprevisível. */
.filtros-linha>.campo,.filtros-linha>.sel,.filtros-linha>.campo-filtro{flex:0 1 22ch;min-width:0}
/* TODO CAMPO TEM NOME, EM CIMA DELE (18.0.0, estudo 1A). O nome curto em caixa
   alta, igual ao cabeçalho da tabela: filtro e formulário iguais. Nos filtros
   ele entra sozinho (rotularFiltros), tirado de `data-rotulo` ou do
   aria-label — nenhum filtro nasce anônimo, e nenhum texto solto antes da caixa. */
.campo-filtro{display:flex;flex-direction:column;gap:5px;min-width:0}
/* o controle escondido leva o rótulo junto (a tela esconde o .sel, não o invólucro) */
.campo-filtro:has(>.sel[hidden],>.busca-campo[hidden]){display:none}
.campo-filtro>.sel,.campo-filtro>.busca-campo{width:100%}
.filtros-linha>.campo-filtro.de-busca{flex:1 1 26ch;max-width:var(--busca-tela-l)}
.filtros-linha>.campo-filtro.de-periodo{flex:none;max-width:100%}
.painel-barra>.campo-filtro.de-busca{flex:0 1 24ch}
/* no celular cada filtro toma a linha inteira: três caixas espremidas em 390px viram três "T..." */
@media (max-width:900px){.filtros-linha>.campo-filtro:not(.de-periodo),.painel-barra>.campo-filtro.de-busca{flex:1 1 100%;max-width:none}}
.campo>label,.campo-filtro>label,.grupo-ctrl>label{font:var(--peso-numeros) var(--txt-xs) var(--familia-texto),sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:var(--txt2)}
.filtros-linha>.grupo-ctrl{flex:0 1 auto;min-width:0}
.filtros-linha>.busca-campo{flex:1 1 26ch;max-width:var(--busca-tela-l)}
/* O QUE LEVA ESTA CLASSE FICA ENCOSTADO À DIREITA — e continua encostado
   quando a barra quebra de linha. Antes o vão era um `<div style="flex:1">`:
   um elemento vazio que, ao quebrar, virava uma linha em branco no meio da
   barra e jogava os botões para a esquerda da linha de baixo. `margin-left`
   automático faz o mesmo trabalho sem ocupar lugar nenhum — e tira um estilo
   inline do markup, que é onde o desenho nunca devia estar. */
.filtros-linha>.a-direita,.g-resumo-linha>.a-direita,.mencao-linha>.a-direita{margin-left:auto}
/* o resumo ("6 usuários ativos de 7") fica na linha do campo, não no pé dele */
.filtros-linha>.rot{align-self:flex-end;line-height:var(--alt-ctrl)}
/* Quando a barra tem controles demais para uma linha só, os BOTÕES quebram
   juntos e continuam à direita. Soltos, o Exportar ficava numa linha e o
   botão principal na outra, encostado à esquerda — três alturas diferentes
   numa barra que precisa de uma. */
.filtros-linha>.acoes{display:flex;align-items:center;gap:14px;margin-left:auto;flex:none}
.filtros-linha>.btn,.filtros-linha>.btn-ic{flex:none}
/* rotulo AO LADO do controle, na mesma linha de base — o rotulo empilhado em
   cima de um controle solto era a quarta altura de uma barra que precisa de
   uma so */
.grupo-ctrl{display:flex;flex-direction:column;align-items:stretch;gap:5px}
.grupo-ctrl>label{flex:none;white-space:nowrap}
/* 30ch é a MEDIDA DO CONTEÚDO, não um número escolhido: o rótulo mais longo
   das ordens tem 22 caracteres, e sobram os do recuo e do chevron. Passando
   disso o campo encolhe com a janela — e o que não couber termina em
   reticência (.sel .ent), nunca cortado no meio da palavra. */
.grupo-ctrl>.sel{flex:1 1 auto;min-width:0}
/* campo de busca: a lupa dentro, e o texto comecando depois dela */
.busca-campo{position:relative;display:flex;align-items:center;min-width:0}
.busca-campo .lupa{position:absolute;left:11px;color:var(--txt2);pointer-events:none}
.busca-campo .ent{padding-left:34px}
/* O CHEVRON GIRA AO ABRIR — é ele que diz que existe algo por baixo. */
.sel-ic{flex:none;width:16px;height:16px;display:flex;color:var(--txt2);
  transition:color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.sel[data-aberto="1"] .sel-gatilho{border-color:var(--prim)}
.sel[data-aberto="1"] .sel-ic{color:var(--prim);transform:rotate(180deg)}

/* O PAINEL: superfície própria, e quem flutua. A lista por dentro é que rola —
   assim a busca fica presa no topo e não sai de vista ao rolar as opções. */
/* O PAINEL NUNCA FICA MAIS ESTREITO QUE O QUE SE LÊ. Ele acompanha a largura
   do gatilho, mas num filtro estreito isso quebrava "Marcar todos" em duas
   linhas e picava o rótulo das opções. 24ch é medida de CONTEÚDO, como o 22ch
   e o 30ch da barra de filtros — não um número escolhido a esmo. */
.sel-painel{position:absolute;z-index:60;inset-inline:0;top:calc(100% + 5px);
  display:flex;flex-direction:column;min-height:0;max-height:240px;min-width:24ch;
  border:1px solid var(--borda);
  border-radius:var(--raio-3);box-shadow:var(--sombra-2);overflow:hidden}
/* Dentro de um modal nem sempre cabe para baixo. Abrir para cima e melhor que
   vazar do cartao e flutuar sobre o backdrop. */
.sel-painel[data-acima="1"]{top:auto;bottom:calc(100% + 5px)}
/* O PAINEL NÃO HERDA O ALINHAMENTO DA CÉLULA. O funil de uma coluna numérica
   vive dentro de um <th> com text-align:right, e o painel saía com a caixa
   de marcação à esquerda e o rótulo colado na borda direita, com um vão no
   meio de cada linha. Dentro do painel a leitura é sempre da esquerda. */
.sel-painel,.sel-painel button,.sel-painel input,.sel-painel li{
  text-align:left;text-transform:none;letter-spacing:normal}
/* A BUSCA DO PAINEL — lupa dentro, filete embaixo. Sem borda própria: ela já
   está DENTRO do painel, e uma segunda moldura aqui seria caixa dentro de
   caixa. O foco continua visível pelo contorno que o sistema inteiro usa. */
.sel-busca{flex:none;position:relative;display:flex;align-items:center;
  border-bottom:1px solid var(--borda)}
.sel-busca .lupa{position:absolute;left:11px;color:var(--txt2);pointer-events:none}
.sel-busca input{width:100%;height:var(--alt-ctrl);padding:0 var(--esp-3) 0 34px;
  border:none;background:transparent;color:var(--txt);
  font:var(--peso-padrao) var(--txt-md) var(--familia-texto),sans-serif}
.sel-busca input::placeholder{color:var(--txt2);opacity:1}
.sel-busca input:focus-visible{outline:2px solid var(--anel-cor);outline-offset:-2px;
  border-radius:var(--raio-2)}
/* O "TODOS" DA SELEÇÃO MÚLTIPLA (filtro estilo Excel).
   Era uma barra com dois comandos em caixa alta — "Marcar todos" e
   "Desmarcar todos" — e ela tinha três defeitos de uma vez: dois comandos
   para uma decisão só, texto que não cabia no painel estreito e era cortado
   no meio, e nenhuma pista do quanto já estava marcado. Virou UMA LINHA com
   a mesma caixa das opções, no lugar onde o Excel a põe: em cima da lista.
   A caixa tem três estados — tudo, parte (traço), nada —, então ela não é
   só um botão: é também o mostrador do que está marcado. O quanto vai no
   rodapé, em voz baixa.
   Ela fica FORA do <ul role="listbox"> de propósito: um <li> que não é uma
   opção do filtro seria anunciado como se fosse escolhível, e é o mesmo
   motivo pelo qual o "Nada encontrado" também vive fora da lista. */
.sel-todos{flex:none;display:flex;align-items:center;gap:var(--esp-2);width:calc(100% - 10px);
  margin:5px 5px 0;padding:var(--esp-2) 10px;border:none;border-radius:var(--raio-2);
  background:transparent;color:var(--txt);cursor:pointer;text-align:left;
  font:var(--peso-enfase) var(--txt-sm) var(--familia-texto),sans-serif;
  transition:background var(--dur-1)}
.sel-todos:hover{background:var(--hover)}
.sel-todos[aria-checked="true"] .sel-cx{background:var(--prim);border-color:var(--prim)}
.sel-todos[aria-checked="true"] .sel-cx svg{opacity:1}
/* PARTE MARCADA: traço, não visto. O visto diz "está tudo"; o traço diz "tem
   coisa marcada e tem coisa fora", que é o estado em que a pessoa passa a
   maior parte do tempo dentro de um filtro. */
.sel-todos[aria-checked="mixed"] .sel-cx{background:var(--prim);border-color:var(--prim)}
.sel-todos[aria-checked="mixed"] .sel-cx::after{content:"";width:9px;height:2px;
  border-radius:var(--raio-pill);background:var(--sup)}
.sel-todos[aria-checked="mixed"] .sel-cx svg{display:none}
.sel-todos-sep{flex:none;height:1px;margin:5px 0 0;background:var(--borda)}
.sel-rodape{flex:none;padding:var(--esp-2) var(--esp-3);border-top:1px solid var(--borda);
  color:var(--txt2);font-variant-numeric:tabular-nums;
  font:var(--peso-padrao) var(--txt-xs) var(--familia-texto),sans-serif}

.sel-lista{flex:1 1 auto;min-height:0;margin:0;padding:5px var(--rol-larg) 5px 5px;
  list-style:none;scrollbar-gutter:stable}
.sel-lista li{display:flex;align-items:center;gap:var(--esp-2);padding:var(--esp-2) 10px;border-radius:var(--raio-2);
  cursor:pointer;font:600 var(--txt-sm) Mulish,sans-serif;color:var(--txt)}
/* O RÓTULO OCUPA A LINHA E O VISTO VAI À DIREITA — é o desenho do padrão. */
.sel-lista li>.rot{flex:1;min-width:0}
.sel-lista li .ck{width:15px;height:15px;flex:none;opacity:0;color:var(--prim);margin-left:auto}
.sel-lista li[data-atual="1"]{color:var(--prim);font-weight:800}
.sel-lista li[data-atual="1"] .ck{opacity:1}
.sel-lista li:hover,.sel-lista li[data-marcado="1"]{background:var(--hover)}
/* o "nada encontrado" é IRMÃO da lista, não filho dela — ver desenharOpcoes */
.sel-vazio{padding:var(--esp-3) var(--esp-4);color:var(--txt2);
  font:600 var(--txt-sm) Mulish,sans-serif}
.sel-vazio b{color:var(--txt);font-weight:800}
.sel-vazio span{display:block;margin-top:3px;font-size:var(--txt-xs);color:var(--txt2)}
.sel-lista mark{background:transparent;color:var(--prim);font-weight:800}
/* a caixa de marcação da seleção múltipla: o MESMO desenho da .chk do sistema,
   sem ser um <input> — dentro de um role="option" quem carrega o estado é o
   aria-selected, e um checkbox de verdade ali seria um segundo foco na linha */
.sel-cx{flex:none;width:17px;height:17px;border:1.5px solid var(--borda-ctrl);
  border-radius:var(--raio-1);background:var(--campo-fundo);
  display:flex;align-items:center;justify-content:center;color:var(--prim-txt)}
.sel-cx svg{width:12px;height:12px;opacity:0}
.sel-lista li[aria-selected="true"] .sel-cx{background:var(--prim);border-color:var(--prim)}
.sel-lista li[aria-selected="true"] .sel-cx svg{opacity:1}

/* >>> MENÇÃO — INÍCIO DO BLOCO 1 (ESTILO) <<< */
/* ===== MENÇÃO ENTRE USUÁRIOS =====
   Escrever arroba em campo colaborativo abre a lista de pessoas. A lista é a
   MESMA do select pesquisável (.sel-lista) e o comportamento de teclado vem
   da mesma função — dois componentes de lista seriam dois jeitos de andar
   com as setas no mesmo sistema.
   A lista ancora embaixo do campo, não no cursor: acompanhar o cursor dentro
   de um <textarea> exige um espelho do texto que erra com quebra de linha e
   com rolagem, e errar a posição é pior que uma posição fixa e previsível.
   ONDE ela nasce é de `flutuar()`, não do CSS: o campo de comentário mora
   dentro da gaveta da tarefa, que é uma área que rola, e painel absoluto ali
   é painel cortado — o mesmo defeito do menu "Mover". */
.mencao-campo{position:relative;display:flex;flex-direction:column;gap:6px}
.mencao-dica{color:var(--txt3);font:var(--peso-apoio) var(--txt-xs) var(--familia-texto),sans-serif}
/* >>> MENÇÃO — FIM DO BLOCO 1 (ESTILO) <<< */
/* linha de botões lado a lado: nasceu no campo de menção e a tela de Minha
   conta usa a mesma para os dois botões do teclado — por isso ela fica FORA
   do bloco do tópico, que sai inteiro quando não há menção. */
.mencao-linha{display:flex;align-items:center;gap:var(--esp-2);flex-wrap:wrap}
/* >>> MENÇÃO — INÍCIO DO BLOCO 1 (ESTILO) <<< */
/* a menção exibida: pedaço destacado e CLICÁVEL dentro do texto corrido.
   É um <button> de verdade — Enter e Espaço de graça, e nada de div com
   onclick num texto que qualquer pessoa lê. */
.mencao{display:inline;border:none;padding:0 3px;margin:0 -1px;border-radius:var(--raio-0);
  background:var(--prim-suave);color:var(--prim);cursor:pointer;
  font:var(--peso-enfase) inherit;font-size:inherit;font-family:inherit}
.mencao:hover{background:var(--prim);color:var(--prim-txt)}
.mencao:focus-visible{outline:2px solid var(--anel-cor);outline-offset:1px}
/* menção a quem não está mais no sistema: continua legível, sem virar link
   para lugar nenhum — a referência é a pessoa, não o nome digitado */
.mencao[disabled]{background:var(--neutro-bg);color:var(--neutro-txt);cursor:default}
/* o avatar do comentário usa a MESMA paleta fechada do resto do sistema:
   --av-cor e --av-txt, nunca uma cor própria */
.com-avatar{flex:none;width:var(--av-shell);height:var(--av-shell);border-radius:50%;
  display:flex;align-items:center;justify-content:center;background:var(--av-cor);color:var(--av-txt);
  font:var(--peso-numeros) var(--txt-xs) var(--familia-texto),sans-serif;letter-spacing:.02em}
.comentario{display:flex;gap:var(--esp-3);align-items:flex-start;padding:var(--esp-3) 0;
  border-top:1px solid var(--borda)}
.comentario:first-of-type{border-top:none}
.comentario .cp{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.comentario .quem{font:var(--peso-enfase) var(--txt-sm) var(--familia-texto),sans-serif}
.comentario .quando{font:var(--peso-padrao) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--txt3)}
.comentario .texto{font:var(--peso-apoio) var(--txt-md)/1.5 var(--familia-texto),sans-serif;color:var(--txt);
  overflow-wrap:anywhere}
/* >>> MENÇÃO — FIM DO BLOCO 1 (ESTILO) <<< */

/* tabelas */
.tab-wrap{width:100%;min-width:0}
table{width:100%;border-collapse:collapse}
thead th{padding:6px 14px;white-space:nowrap;text-align:left}
thead th:first-child{padding-left:var(--esp-5)}thead th:last-child{padding-right:var(--esp-5)}
th button{display:inline-flex;align-items:center;gap:5px;border:none;background:transparent;cursor:pointer;
  padding:5px 0;font:700 var(--txt-xs) Mulish,sans-serif;letter-spacing:.07em;text-transform:uppercase;color:var(--txt2)}
th button:hover{color:var(--txt)}
th button.ativa{color:var(--prim)}
th .seta{font:var(--peso-enfase) var(--txt-grupo) var(--familia-texto),sans-serif;color:var(--desab)}
th button.ativa .seta{color:inherit}
/* .th-ord é o mesmo botão de ordenar de sempre (herda de "th button" acima);
   a classe existe à parte só para o cabeçalho novo da aba Relatórios poder
   achar o próprio botão sem depender de posição no DOM — ver montarCabecalhoRel. */
.th-ord{color:var(--txt2)}
.th-ord.ativa{color:var(--prim)}
/* O FUNIL DE CADA COLUNA (aba Relatórios › a prévia) — ao lado da seta de
   ordenação, SEMPRE visível em toda coluna (o Pedro pediu isto por
   extenso: não só no hover, não só nas principais). É o MESMO componente
   `selectBusca` de todo select do sistema por baixo — o gatilho aqui só
   troca de roupa: um ícone compacto em vez do texto do valor escolhido,
   porque dez pílulas com texto num cabeçalho de tabela não caberiam. O
   painel flutua por `flutuar()` (position:fixed), então ele nunca é
   cortado pela rolagem horizontal da tabela. */
/* ORDENAR E FILTRAR ANDAM JUNTOS, EM TODA COLUNA. O `space-between` daqui
   empurrava a seta para um extremo da célula e o funil para o outro: em
   coluna larga o funil ficava longe do rótulo, e em coluna alinhada à
   direita ele ia parar na borda ESQUERDA da célula — encostado na coluna
   anterior, como se fosse dela. Duas colunas seguidas assim e o cabeçalho
   parecia ter funis soltos no meio do nada. Agora o bloco inteiro é que se
   alinha; dentro dele a ordem é sempre a mesma: rótulo, seta, funil. */
.th-linha{display:flex;align-items:center;gap:2px;justify-content:flex-start;min-width:0}
.th-linha-dir{justify-content:flex-end}
.th-ord{min-width:0}
.th-ord>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.th-filtro-caixa{position:relative}
.th-filtro{display:flex;align-items:center;justify-content:center;width:22px;height:22px;flex:none;
  padding:0;border:none;border-radius:var(--raio-2);background:transparent;color:var(--txt3);cursor:pointer;
  transition:background var(--dur-1),color var(--dur-1)}
.th-filtro:hover{background:var(--hover);color:var(--txt)}
.th-filtro[aria-pressed="true"]{background:var(--prim-suave);color:var(--prim)}
.th-filtro .sel-valor,.th-filtro .sel-ic{display:none}
@media print{.th-filtro-caixa{display:none}}
tbody tr{border-top:1px solid var(--borda);transition:background var(--dur-1)}
tbody tr:hover{background:var(--hover)}
tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--prim)}
tbody td{padding:var(--tdp)}
tbody td:first-child{padding-left:var(--esp-5)}tbody td:last-child{padding-right:var(--esp-5)}
.num{text-align:right;font-variant-numeric:tabular-nums}
tfoot tr{border-top:2px solid var(--borda)}
tfoot td{padding:var(--esp-3) var(--esp-5)}
.vazio-tab{padding:44px var(--esp-5);text-align:center;color:var(--txt2);font:600 var(--txt-md) Mulish,sans-serif}
/* A LARGURA MÍNIMA DE CADA TABELA é a soma das colunas DELA — some daqui e a
   tabela espreme sete colunas em 390px até a leitura virar adivinhação. Ela é
   do desenho da tela, não do markup: escrita no <table style=...> ela não
   viajava na cópia e não respondia à escala. Abaixo de --quebra-mobile nada
   disso vale: lá cada linha vira cartão (.tab-cards) e a rolagem some. */
/* >>> EXEMPLO — INÍCIO DO BLOCO 1 (ESTILO) <<< */
#t-dashboard .tab-wrap table{min-width:720px}
#t-ordens    .tab-wrap table{min-width:940px}
#t-clientes  .tab-wrap table{min-width:760px}
/* >>> EXEMPLO — FIM DO BLOCO 1 (ESTILO) <<< */
/* >>> USUÁRIOS — INÍCIO DO BLOCO 1 (ESTILO) <<< */
#t-usuarios  .tab-wrap table{min-width:820px}
#t-auditoria .tab-wrap table{min-width:840px}
/* >>> USUÁRIOS — FIM DO BLOCO 1 (ESTILO) <<< */
/* >>> BACKUP — INÍCIO DO BLOCO 1 (ESTILO) <<< */
#t-backups   .tab-wrap table{min-width:760px}
/* >>> BACKUP — FIM DO BLOCO 1 (ESTILO) <<< */
/* área dos gráficos: degradê vertical que morre na base — some no claro, encorpa no escuro */
linearGradient .sa{stop-color:var(--prim);stop-opacity:var(--area-op)}
linearGradient .sb{stop-color:var(--prim);stop-opacity:0}

/* switch */
.sw{position:relative;width:42px;height:24px;border-radius:var(--raio-4);border:none;cursor:pointer;
  background:var(--borda-ctrl);transition:background var(--dur-1);flex:none}
.sw[aria-checked="true"]{background:var(--prim)}
.sw i{position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--sw-bola);
  transition:left var(--dur-1);display:block;box-shadow:0 1px 2px rgba(0,0,0,.25)} /* bcm-ok: relevo da bola */
.sw[aria-checked="true"] i{left:21px}

/* modais */
.modal{max-width:var(--modal-larg);width:calc(var(--vp-w) - var(--modal-margem))}
/* O MODAL CURTO — confirmação, exclusão, aviso, formulário de poucos campos.
   Eram cinco larguras escritas à mão no markup (430, 440, 460, 480), que é
   quatro desenhos diferentes para a mesma caixa. Aqui é UMA, e sai da largura
   de modal do padrão menos uma calha de cada lado: nenhum número novo. */
.modal-curto{max-width:calc(var(--modal-larg) - var(--esp-6) - var(--esp-6))}
/* a caixa do ícone de aviso do modal: o par de cores entra por variável local
   do elemento, como no Inbox — o componente não conhece cor própria */
.modal-ic{width:var(--alt-ctrl);height:var(--alt-ctrl);border-radius:var(--raio-3);flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--l-ic-bg,var(--prim-suave));color:var(--l-ic-fg,var(--prim))}
.modal[open]{animation:modalIn var(--dur-2) var(--ease)}
.modal-caixa{position:relative;background:var(--sup);border:1px solid var(--borda);border-radius:var(--raio-5);
  box-shadow:var(--sombra-2);padding:26px;display:flex;flex-direction:column;gap:18px}
/* O X de fechar: TODO modal tem um, no canto superior direito. Nao substitui o
   Cancelar — a acao explicita continua no rodape. Ele existe porque fechar e a
   saida que a pessoa procura primeiro, e procurar no rodape um botao que some
   quando o modal e so de leitura (Atalhos, Sobre) deixa a tela sem saida visivel. */
.modal-x{position:absolute;top:var(--modal-x-topo);right:var(--modal-x-lado);width:var(--modal-x);height:var(--modal-x);
  display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--txt2);cursor:pointer;
  border-radius:var(--raio-1);transition:background var(--dur-1) ease,color var(--dur-1) ease}
.modal-x:hover{background:var(--hover);color:var(--txt)}
.modal-x:focus-visible{outline:2px solid var(--anel-cor);outline-offset:2px}
/* o fechar da gaveta é um botão de ícone do tamanho do controle pequeno: ele
   divide a linha com a trilha, não com outros botões de barra */
#gav-fechar{width:var(--alt-ctrl-sm);height:var(--alt-ctrl-sm)}
/* o titulo nao pode correr por baixo do X */
.modal-tit{font:var(--peso-apoio) var(--tit-xl) var(--familia-titulo),sans-serif;letter-spacing:.02em;padding-right:var(--modal-tit-pad)}
.modal-acoes{display:flex;justify-content:flex-end;gap:10px;margin-top:2px}

/* >>> ANEXOS — INÍCIO DO BLOCO 1 (ESTILO) <<< */
/* ===== O VISOR DE ANEXO =====
   Um componente só para os TRÊS tipos que se leem na tela: imagem, PDF e
   planilha. Ele é modal porque o anexo é uma leitura de ida e volta — quem
   clicou estava lendo outra coisa, e voltar tem de ser fechar, nunca
   navegar. E é mais largo que o modal comum porque o que mora aqui é uma
   folha, uma foto de painel ou uma grade: nenhuma das três cabe na largura
   de um formulário. */
.visor{max-width:var(--visor-larg);max-height:calc(var(--vp-h) - var(--esp-6))}
/* a caixa é uma coluna com o palco no meio: assim o palco fica com a altura
   que sobrar e é ELE que rola, não a janela — o documento não rola no padrão */
.visor .modal-caixa{max-height:100%}
.visor-topo{display:flex;align-items:flex-start;justify-content:space-between;
  gap:var(--esp-4);flex-wrap:wrap;padding-right:var(--modal-tit-pad)}
.visor-id{display:flex;align-items:center;gap:var(--esp-3);min-width:0}
.visor-id>svg{color:var(--txt2);flex:none}
.visor-nome{min-width:0}
/* o X já é o padding do .visor-topo: repetir o recuo aqui empurraria o nome
   do arquivo para longe do ícone dele */
.visor-nome .modal-tit{padding-right:0;overflow-wrap:anywhere}
.visor-meta{display:block;color:var(--txt2);
  font:var(--peso-padrao) var(--txt-sm) var(--familia-texto),sans-serif}
.visor-ferramentas{display:flex;align-items:center;gap:var(--esp-2);flex-wrap:wrap}
.visor-zoom-grupo{display:flex;align-items:center;gap:var(--esp-1)}
/* o número do zoom é lido em voz alta a cada passo: botão de mais e de menos
   sem leitura é a pessoa apertando no escuro */
.visor-conta{min-width:var(--visor-canto);text-align:center;color:var(--txt2);
  font-variant-numeric:tabular-nums;
  font:var(--peso-enfase) var(--txt-sm) var(--familia-texto),sans-serif}
.visor-rol{flex:1;min-height:0;display:flex}
.visor-palco{flex:1;min-width:0;min-height:var(--visor-palco-min);
  background:var(--sup2);border:1px solid var(--borda);border-radius:var(--raio-4);
  padding:var(--esp-3)}
.visor-tela{display:block;min-width:0}
/* ===== O ZOOM É UM SÓ, E É O `zoom` DO CSS =====
   Ele cresce o LAYOUT, e é por isso que a área rolável cresce junto: com
   `transform:scale` a peça ficaria maior e a rolagem continuaria do tamanho
   antigo, cortando metade da folha sem barra para ir buscá-la. E o que ele
   multiplica é a largura NATURAL da peça, guardada em pixel em --l-larg:
   percentual dentro de uma caixa que já sofreu zoom se mede na caixa
   ampliada, e o zoom não faria nada. */
.visor-img,.visor-pdf,.visor-grade{zoom:var(--l-zoom,1)}
.visor-img{display:block;margin:0 auto;width:var(--l-larg,auto);height:auto;
  border-radius:var(--raio-2);background:var(--sup)}
.visor-pdf{display:block;width:var(--l-larg,100%);height:var(--visor-pdf-alt);
  border:none;border-radius:var(--raio-2);background:var(--sup)}
/* ===== A GRADE DA PLANILHA =====
   Ela é <table> de verdade, com <th scope> na letra da coluna e no número da
   linha: uma grade montada com <div> é um desenho de planilha para quem
   enxerga e um bloco de texto sem posição para quem ouve. O desenho copia o
   da planilha aberta de propósito — é o que a pessoa reconhece, e é o que
   deixa ela conferir uma célula sem sair do sistema. */
.visor-grade{width:max-content;border-collapse:collapse;background:var(--sup);
  font:var(--peso-padrao) var(--txt-sm) var(--familia-texto),sans-serif}
.visor-grade th,.visor-grade td{border:1px solid var(--borda);padding:var(--esp-1) var(--esp-2);
  max-width:var(--visor-cel-max);min-width:var(--visor-cel-min);
  white-space:pre-wrap;overflow-wrap:anywhere;vertical-align:top;text-align:left}
/* a régua de colunas e a de linhas ficam presas: rolar uma planilha larga e
   perder de vista em que coluna se está é o defeito que a régua existe para
   não ter. O canto entre as duas fica por cima das duas. */
.visor-grade thead th{position:sticky;top:0;z-index:2;text-align:center;
  background:var(--sup2);color:var(--txt2);white-space:nowrap;
  font-weight:var(--peso-enfase)}
.visor-grade tbody th{position:sticky;left:0;z-index:1;text-align:right;
  background:var(--sup2);color:var(--txt2);white-space:nowrap;
  min-width:var(--visor-canto);font-weight:var(--peso-padrao);
  font-variant-numeric:tabular-nums}
.visor-grade thead th:first-child{left:0;z-index:3;min-width:var(--visor-canto)}
/* a primeira linha da planilha é o cabeçalho dela — não do documento. Ela
   ganha peso e fundo, como ganharia no programa que a escreveu. */
.visor-grade tr.visor-cab td{background:var(--sup2);font-weight:var(--peso-enfase);color:var(--txt)}
.visor-grade td.num{text-align:right;font-variant-numeric:tabular-nums}
/* as abas da pasta de trabalho, embaixo, onde a planilha as põe */
.visor-abas{display:flex;align-items:center;gap:var(--esp-1);flex-wrap:wrap}
.visor-abas button{height:var(--visor-aba-alt);padding:0 var(--esp-3);cursor:pointer;
  border:1px solid var(--borda-ctrl);border-radius:var(--raio-2);
  background:var(--sup2);color:var(--txt2);
  font:var(--peso-padrao) var(--txt-sm) var(--familia-texto),sans-serif;
  transition:background var(--dur-1) ease,color var(--dur-1) ease}
.visor-abas button:hover{background:var(--hover);color:var(--txt)}
.visor-abas button[aria-selected="true"]{background:var(--sup);color:var(--prim);
  border-color:var(--prim);font-weight:var(--peso-enfase)}
@media (max-width:900px){
  /* no celular a ferramenta vira uma linha inteira: espremida ao lado do
     nome do arquivo, cada botão fica menor que o alvo de toque */
  .visor-ferramentas{width:100%}
}
/* >>> ANEXOS — FIM DO BLOCO 1 (ESTILO) <<< */

/* paleta de comandos (Ctrl+K) e atalhos */
/* ===== A BUSCA GERAL — o campo do topo É a paleta de comandos =====
   Eram duas coisas: um campo no topo que só levava para Ordens filtradas, e
   um modal de comandos que o Ctrl+K abria por cima da tela. Duas caixas de
   busca no mesmo sistema é a pessoa aprendendo qual das duas serve para quê
   — e a resposta ("depende do que você procura") é a definição de interface
   mal resolvida.

   Agora é UMA. O campo fica no topo, à vista em toda aba, e digitar abre o
   painel logo abaixo dele com quatro grupos em ordem fixa: Navegar, Ações,
   Registros e Sistema. Ctrl+K põe o foco NESSE campo — o atalho deixou de
   abrir uma tela para apontar para uma que já estava ali, que é o que faz
   quem nunca apertou Ctrl+K descobrir a função sozinho.

   Ordem fixa porque memória de posição é metade do valor de uma busca assim:
   quem usa todo dia para de ler a lista e passa a mirar na terceira linha. */
.busca-geral{position:relative;display:flex;align-items:center;width:var(--busca-topo-l);flex:none}
.busca-geral .lupa{position:absolute;left:11px;color:var(--txt2);pointer-events:none}
.busca-geral input{width:100%;height:var(--busca-topo-alt);padding:0 34px;
  border:1px solid var(--borda-ctrl);border-radius:var(--raio-2);
  background:var(--campo-fundo);color:var(--txt);font:var(--peso-padrao) var(--txt-md) var(--familia-texto),sans-serif}
.busca-geral input:focus-visible{outline:none;border-color:var(--prim);box-shadow:var(--anel)}
.busca-geral kbd{position:absolute;right:9px;font:700 var(--txt-xs) Mulish,sans-serif;color:var(--txt2);
  border:1px solid var(--borda);border-radius:var(--raio-0);padding:2px 6px;background:var(--sup)}
/* o painel é a MESMA superfície flutuante do select e do menu suspenso: um
   quarto desenho de lista suspensa seria um quarto jeito de andar com as
   setas dentro do mesmo sistema */
.busca-painel{position:absolute;top:calc(100% + 6px);right:0;z-index:70;width:var(--busca-painel-l);
  max-width:calc(var(--vp-w) - var(--esp-6));display:flex;flex-direction:column;
  border:1px solid var(--borda);border-radius:var(--raio-4);
  box-shadow:var(--sombra-2);overflow:hidden}
.busca-lista{list-style:none;margin:0;padding:6px var(--rol-larg) 6px 6px;max-height:calc(var(--vp-h) * .56)}
.busca-grupo{font:800 var(--txt-grupo) Mulish,sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt2);padding:10px var(--esp-3) 6px}
.busca-item{display:flex;align-items:center;gap:11px;padding:9px var(--esp-3);border-radius:var(--raio-2);cursor:pointer;
  font:600 var(--txt-md) Mulish,sans-serif;color:var(--txt)}
.busca-item .ic{display:flex;color:var(--txt2);flex:none}
.busca-item .col{display:flex;flex-direction:column;min-width:0;flex:1}
.busca-item .col small{font:var(--peso-padrao) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--txt2)}
.busca-item .dica{margin-left:auto;flex:none}
.busca-item[aria-selected="true"]{background:var(--prim-suave);color:var(--prim)}
.busca-item[aria-selected="true"] .ic{color:var(--prim)}
.busca-item mark{background:transparent;color:var(--prim);font-weight:800}
.busca-vazio{padding:26px var(--esp-4);text-align:center;color:var(--txt2);font:600 var(--txt-sm) Mulish,sans-serif}
/* a espera dos REGISTROS não some e volta: ela ocupa o lugar do grupo
   enquanto o servidor responde, senão a lista pula debaixo do dedo */
.busca-esperando{display:flex;align-items:center;gap:var(--esp-2);padding:9px var(--esp-3);
  font:600 var(--txt-sm) Mulish,sans-serif;color:var(--txt2)}
.busca-rodape{display:flex;flex-wrap:wrap;gap:6px 18px;padding:10px var(--esp-4);border-top:1px solid var(--borda);
  background:var(--sup2);font:600 var(--txt-xs) Mulish,sans-serif;color:var(--txt2)}
.tecla{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 5px;
  border:1px solid var(--borda);border-bottom-width:2px;border-radius:var(--raio-0);background:var(--sup2);
  font:700 var(--txt-xs) Mulish,sans-serif;color:var(--txt2)}
.linha-atalho{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-4);padding:9px 0;
  border-top:1px solid var(--borda);font:600 var(--txt-sm) Mulish,sans-serif}
.linha-atalho:first-of-type{border-top:none}
/* as teclas nunca quebram em duas linhas: "Ctrl K" quebrado no meio deixa de
   ser um acorde e vira duas teclas soltas */
.linha-atalho .teclas{flex:none;display:flex;align-items:center;gap:var(--esp-1);white-space:nowrap}

/* estado vazio */
.vazio{display:flex;flex-direction:column;align-items:center;gap:6px;padding:46px var(--esp-5);text-align:center}
.vazio .ic{width:46px;height:46px;border-radius:var(--raio-5);background:var(--sup2);border:1px solid var(--borda);
  color:var(--txt2);display:flex;align-items:center;justify-content:center;margin-bottom:6px}
.vazio h2{font:var(--peso-apoio) var(--tit-md) var(--familia-titulo),sans-serif;letter-spacing:.03em;margin:0}
.vazio p{margin:0;color:var(--txt2);font:600 var(--txt-sm) Mulish,sans-serif;max-width:340px}
/* a saída do estado vazio respira do texto — a medida é do bloco, não do
   markup de cada tela que usa o bloco */
.vazio>.btn{margin-top:6px}
/* A PORTA PARA A LIXEIRA (15.0.0). Ela mora no VAZIO da lista porque é ali
   que a pergunta "sumiu um registro" nasce — e é o único lugar do sistema
   que oferece a lixeira a quem não sabe que ela existe. Filete em cima
   para separar do que a tela já dizia: é outro assunto, não a continuação
   da frase de cima. */
.vazio-porta{display:flex;align-items:center;justify-content:center;gap:var(--esp-2);
  flex-wrap:wrap;margin-top:var(--esp-4);padding-top:var(--esp-4);
  border-top:1px solid var(--borda);width:100%;max-width:420px}
.vazio-porta .oque{color:var(--txt2);font:600 var(--txt-sm) Mulish,sans-serif}
/* o vazio DENTRO de um painel de gráfico respira menos que o vazio de uma
   tela inteira: o painel já tem o seu recuo em volta */
.vazio-painel{padding:34px var(--esp-5)}
/* o rodapé de contagem de uma tabela: recorte à esquerda, total à direita */
.rodape-conta{display:flex;justify-content:space-between;padding:var(--esp-3) var(--esp-5);
  border-top:1px solid var(--borda)}
.rodape-conta .total{font:800 var(--txt-md) Mulish,sans-serif}
/* o rodapé de ações de um formulário de TELA (o de modal é .modal-acoes) */
/* O RODAPÉ DE AÇÕES É UMA FAIXA, NÃO UMA LINHA COM BOTÕES EM CIMA.
   O recuo era de seis pixels — meio degrau da escala —, e o botão encostava no
   filete. Uma barra de ações separada do conteúdo por um traço precisa de ar
   dos DOIS lados do traço: sem ele, o filete lê como sublinhado do botão em vez
   de divisor da seção, e a peça mais importante da tela parece um acidente de
   layout. */
.acoes-form{display:flex;justify-content:flex-end;gap:10px;
  padding-top:var(--esp-4);border-top:1px solid var(--borda)}
/* O RODAPÉ TEM DOIS LUGARES, e um deles era uma armadilha (13.1.1).
   Dentro de um painel (`.cfg-painel`, `.secao-form`) ele traz só o recuo de
   CIMA do filete — os outros três lados vêm do painel, e é assim em Meu perfil
   e em Configurações. Escrito como FILHO DIRETO do cartão, ele herdava recuo
   nenhum: o botão nascia a um pixel da borda de baixo e da direita, com o
   filete lendo como sublinhado do botão. Aconteceu na aba de Backups.
   Agora o filho direto do cartão é a FAIXA que a prosa já descrevia: sangra
   até as bordas arredondadas e ganha `--sup2`, como o rodapé da gaveta e como
   o da tela cheia da tarefa. Duas formas, as duas certas, nenhuma dependendo
   de alguém lembrar de pôr o pai certo em volta. */
.cartao>.acoes-form{padding:var(--esp-3) var(--esp-5);background:var(--sup2);flex-wrap:wrap}
/* duas colunas de campo dentro de um modal */
.grade-campos{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* ===== amostras do guia de estilo ===== */
.fila-amostras{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grade-amostras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--esp-3)}
.amostra-cor .chapa{height:56px;border-radius:var(--raio-3);border:1px solid var(--borda)}
.amostra-cor .nome{font:700 var(--txt-sm) Mulish,sans-serif;margin-top:6px}
.amostra-cor .hex{font-variant-numeric:tabular-nums}
/* a amostra tipográfica mostra o desenho da Bebas em corpo de vitrine: 40px
   não encosta em --tit-2xl nem em --tit-3xl, e por isso é medida da amostra,
   não do sistema */
.amostra-bebas{font:400 40px 'Bebas Neue',sans-serif;letter-spacing:.02em} /* bcm-ok: corpo de vitrine da amostra tipográfica — não é tamanho de título do sistema */
.amostra-mulish{font:400 var(--txt-lg)/1.6 Mulish,sans-serif;color:var(--txt2);max-width:560px}
/* a paginação do guia mora dentro de um cartão que já tem recuo */
.pag-guia{border-top:1px solid var(--borda);padding-left:0;padding-right:0}

/* ===== caixa de seleção ===== */
.chk{appearance:none;width:17px;height:17px;border:1.5px solid var(--borda-ctrl);border-radius:var(--raio-1);
  background:var(--campo-fundo);cursor:pointer;flex:none;position:relative;transition:background var(--dur-1),border-color var(--dur-1)}
.chk:checked,.chk:indeterminate{background:var(--prim);border-color:var(--prim)}
.chk:checked::after{content:'';position:absolute;left:5px;top:1px;width:5px;height:10px;
  border:solid var(--prim-txt);border-width:0 2px 2px 0;transform:rotate(42deg)}
.chk:indeterminate::after{content:'';position:absolute;left:3px;top:7px;width:9px;height:2px;background:var(--prim-txt)}
.chk:focus-visible{outline:2px solid var(--anel-cor);outline-offset:2px}
td.col-chk,th.col-chk{width:34px;padding-right:0!important}
/* A COLUNA CONGELADA (15.1.0). Em tabela de doze colunas, é ela que diz de
   quem é a linha que você está lendo lá na ponta direita — sem ela, rolar
   para o lado é ler número solto. Ela gruda na esquerda junto com a coluna
   de seleção, que já está lá: as duas viajam como um bloco só, senão a
   caixa de marcar passa por baixo do nome.
   O fundo é obrigatório: célula transparente deixa o conteúdo da coluna de
   baixo aparecer por trás enquanto rola. */
.tab-wrap.tem-fixa td.col-chk,.tab-wrap.tem-fixa th.col-chk{
  position:sticky;left:0;z-index:2;background:var(--sup)}
.tab-wrap td.col-fixa,.tab-wrap th.col-fixa{
  position:sticky;left:34px;z-index:2;background:var(--sup);
  box-shadow:1px 0 0 var(--borda)}
.tab-wrap.sem-chk td.col-fixa,.tab-wrap.sem-chk th.col-fixa{left:0}
/* A LINHA MARCADA É UMA CLASSE, e não um `style=` escrito na string da
   linha: a célula grudada precisa acompanhar o fundo dela, e seletor não
   alcança estilo inline sem virar `[style*=…]` — que é o tipo de seletor
   que quebra no dia em que alguém troca a ordem das propriedades. */
/* O PAINEL DE COLUNAS: uma linha por coluna, com o interruptor, o nome e
   as três ações. Linha inteira clicável seria ambígua — são quatro alvos
   diferentes no mesmo lugar. */
/* A FAIXA DE RECUPERAÇÃO e a linha de estado do rascunho (15.1.0). */
/* O ERRO COLADO NO CAMPO (15.2.0). Toast some; erro de campo fica — e
   quem volta ao formulário depois precisa saber qual dos doze estava
   errado. A cor não é o único sinal: o texto está escrito. */
/* AS DUAS PORTAS DO LOGIN (16.1.0 — opção C, escolhida olhando).
   Cada uma no lugar onde é procurada: "Esqueci minha senha" como link na
   linha do rótulo Senha, e "Criar conta" no rodapé do cartão, numa faixa
   própria com a pergunta ao lado. Na 16.0.0 eram dois textos soltos embaixo
   do Entrar e SEM COR DECLARADA — botão não herda cor, e no tema escuro os
   dois saíam pretos sobre o fundo escuro. O Entrar continua sendo o único
   corpo cheio do cartão: o link não tem fundo, e o Criar conta é terciário. */
/* A LINHA DE UM PEDIDO (16.0.0): quem pediu à esquerda, o que decidir à
   direita, e no meio o que falta escolher para poder decidir. */
.pedido{display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap;
  padding:var(--esp-3) var(--esp-5);border-top:1px solid var(--borda)}
.pedido-quem{flex:1;min-width:200px;display:flex;flex-direction:column;gap:2px}
.pedido-quem b{font:var(--peso-enfase) var(--txt-md) var(--familia-texto),sans-serif}
/* a linha de apoio (o que é o pedido, quando, de onde) tinha o tamanho e o
   peso do NOME logo acima: duas linhas do mesmo tamanho não fazem par, fazem
   confusão. É apoio, e se veste de apoio. */
.pedido-quem .sub{font:var(--peso-apoio) var(--txt-sm)/1.4 var(--familia-texto),sans-serif;color:var(--txt2)}
.campo-cab{display:flex;align-items:baseline;justify-content:space-between;gap:var(--esp-2)}
.campo-cab>label{font:600 var(--txt-sm) Mulish,sans-serif;color:var(--txt2)}
/* >>> LOGIN — INÍCIO DO BLOCO 1 (ESTILO) <<< */
.login-esqueci{background:none;border:none;padding:0;cursor:pointer;color:var(--prim);
  border-radius:var(--raio-0);white-space:nowrap}
.login-esqueci:hover{text-decoration:underline;text-underline-offset:3px}
/* >>> LOGIN — FIM DO BLOCO 1 (ESTILO) <<< */
/* >>> CRIAR-CONTA — INÍCIO DO BLOCO 1 (ESTILO) <<< */
/* A faixa sangra até as bordas do cartão pelo mesmo recuo que ele tem, e
   fecha com o raio dele embaixo. */
.login-portas{display:flex;align-items:center;justify-content:center;gap:var(--esp-3);flex-wrap:wrap;
  margin:var(--esp-1) calc(-1 * var(--login-cartao-pad)) calc(-1 * var(--login-cartao-pad));
  padding:var(--esp-4) var(--login-cartao-pad);background:var(--sup2);border-top:1px solid var(--borda);
  border-radius:0 0 var(--raio-5) var(--raio-5)}
.login-pergunta{color:var(--txt2);font:var(--peso-padrao) var(--txt-sm) var(--familia-texto),sans-serif}
.login-portas .btn-ter{gap:var(--esp-2)}
/* >>> CRIAR-CONTA — FIM DO BLOCO 1 (ESTILO) <<< */
/* >>> ANEXOS — INÍCIO DO BLOCO 1 (ESTILO) <<< */
.anexo-entrada{display:flex;gap:var(--esp-2);flex-wrap:wrap;margin-top:var(--esp-3)}
/* >>> ANEXOS — FIM DO BLOCO 1 (ESTILO) <<< */
.ent-erro{border-color:var(--err)}
.ent-erro:focus{border-color:var(--err);box-shadow:0 0 0 3px var(--err-bg)}
.campo-erro{display:block;margin-top:var(--esp-1);color:var(--err);
  font:600 var(--txt-sm) Mulish,sans-serif}
/* enquanto a consulta vai e volta, o campo diz que está trabalhando */
.ent-consultando{background-image:linear-gradient(90deg,transparent 0%,var(--prim-suave) 50%,transparent 100%);
  background-size:200% 100%;animation:consultando var(--dur-traco) linear infinite}
@keyframes consultando{from{background-position:200% 0}to{background-position:-200% 0}}
.faixa-rascunho{display:flex;align-items:center;gap:var(--esp-2);flex-wrap:wrap;
  margin-top:var(--esp-3);padding:var(--esp-3) var(--esp-4);border-radius:var(--raio-3);
  background:var(--prim-suave);color:var(--prim)}
.faixa-rascunho .oque{flex:1;min-width:180px;font:600 var(--txt-md) Mulish,sans-serif;
  color:var(--txt)}
.rascunho-estado{display:flex;align-items:center;gap:6px;margin-right:auto;
  color:var(--txt2);font:600 var(--txt-sm) Mulish,sans-serif;
  /* ela DIVIDE A LINHA com os dois botões do rodapé: quem encolhe é o
     texto, nunca o alvo de clique — no celular, a frase vira reticência
     e os botões continuam do tamanho que o dedo alcança */
  flex:1 1 120px;min-width:0}
.rascunho-estado svg{flex:none}
.rascunho-estado span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.col-painel{display:flex;flex-direction:column;gap:var(--esp-1);margin-top:var(--esp-3);
  max-height:46vh}
.col-linha{display:flex;align-items:center;gap:var(--esp-2);
  padding:var(--esp-1) var(--esp-2);border-radius:var(--raio-2)}
.col-linha:hover{background:var(--hover)}
.col-linha .nome{flex:1;font:600 var(--txt-md) Mulish,sans-serif}
.col-linha .btn-ic{width:30px;height:30px}
tbody tr.linha-marcada{background:var(--prim-suave)}
tbody tr.linha-marcada td.col-fixa,tbody tr.linha-marcada td.col-chk{
  background:var(--prim-suave)}

/* ===== O MATERIAL TRANSLÚCIDO =====
   Duas classes, dois graus, e o grau se escolhe pelo TEMPO que a peça fica na
   tela: .vid-alto para a peça que abre, resolve e some; .vid-baixo para a que
   fica à vista o tempo todo. Quem trabalha no sistema o dia inteiro olha para
   a peça permanente o dia inteiro, e vidro demais ali cansa e vira ruído.

   O MATERIAL NÃO É SÓ DESFOQUE, e essa é a parte que se erra. Desfoque
   embaralha o que está atrás sem mudar o quanto aquilo é claro ou escuro — e é
   a luminância de baixo que decide se o texto de cima se lê. Por isso a mesma
   passada leva contraste (que puxa o fundo para perto do cinza médio) e brilho
   (que move esse cinza para o lado do tema). Só com desfoque o piso é 92% no
   claro e 97% no escuro; com o material inteiro cai para 82% e 83% — o dobro
   de transmissão, pelo mesmo custo de composição. A saturação devolve a cor
   que o contraste tirou, senão o que se vê por baixo é um borrão cinza.

   FALLBACK OPACO PRIMEIRO, como a barra de abas já fazia: sem backdrop-filter,
   translucidez é texto ilegível sobre o que passa por baixo. E quem pediu menos
   transparência no sistema operacional recebe a peça chapada — pediu por um
   motivo, e o motivo costuma ser exatamente este.

   O TINGIMENTO é --sup-flut por padrão. Quem tem superfície própria (o toast,
   que é escuro nos dois temas) troca só o --l-vid-tinta e herda o resto. */
/* ESTE BLOCO É O DONO ÚNICO DE TODA SUPERFÍCIE DE VIDRO DO SISTEMA. Peça que
   vira vidro entra AQUI, na lista de seletores — nunca escrevendo o material
   de novo no lugar dela. É o que a regra `vidro-fora-do-padrao` cobra, e ela
   já pegou a barra lateral revelada quando eu tentei o contrário.

   A barra lateral está aqui pelo ESTADO, e não pelo componente: encaixada ela
   é coluna da grade e não passa nada por trás dela; revelada ela flutua sobre
   o conteúdo, que continua ali embaixo. É essa a pergunta a fazer em qualquer
   peça nova — "tem alguma coisa passando por trás dela AGORA?" —, e é por isso
   que o mesmo elemento é vidro num estado e chapado no outro. */
.vid-alto,.vid-baixo,
#shell.sb-revelada nav.lateral{background:var(--l-vid-tinta,var(--sup-flut))}
@supports (backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px)){
  .vid-alto,
  #shell.sb-revelada nav.lateral{
    background:rgba(var(--l-vid-tinta-rgb,var(--sup-flut-rgb)),var(--vid-alto)); /* bcm-ok: não há cor cravada aqui — os canais e o alfa são token, e a tinta se confere contra --sup-flut no contraste.py */
    -webkit-backdrop-filter:blur(var(--vid-desf)) var(--vid-material);
    backdrop-filter:blur(var(--vid-desf)) var(--vid-material)}
  .vid-baixo{background:rgba(var(--l-vid-tinta-rgb,var(--sup-flut-rgb)),var(--vid-baixo)); /* bcm-ok: idem — canais e alfa vindos de token */
    -webkit-backdrop-filter:blur(var(--vid-desf)) var(--vid-material);
    backdrop-filter:blur(var(--vid-desf)) var(--vid-material)}
}
@media (prefers-reduced-transparency:reduce){
  .vid-alto,.vid-baixo,
  #shell.sb-revelada nav.lateral{background:var(--l-vid-tinta,var(--sup-flut));
    -webkit-backdrop-filter:none;backdrop-filter:none}
}

/* ===== menu suspenso (exportar, ações do registro) ===== */
.menu-wrap{position:relative}
.menu{position:absolute;right:0;top:calc(100% + 6px);z-index:70;min-width:230px;padding:var(--esp-1);
  border:1px solid var(--borda);border-radius:var(--raio-3);
  box-shadow:var(--sombra-2);display:flex;flex-direction:column;gap:2px} /* bcm-ok: o vidro do menu é .vid-alto, e quem o põe é quem monta o menu — nenhum .menu nasce sem ele (ver montarExportar e o menu de ações da Gestão) */
.menu button{display:flex;align-items:center;gap:var(--esp-3);width:100%;border:none;background:transparent;
  color:var(--txt);cursor:pointer;text-align:left;padding:9px 10px;border-radius:var(--raio-2);
  font:600 var(--txt-md) Mulish,sans-serif}
.menu button:hover{background:var(--hover)}
.menu button .ic{display:flex;color:var(--txt2);flex:none}
.menu button:hover .ic{color:var(--prim)}
.menu button small{display:block;font:400 var(--txt-xs) Mulish,sans-serif;color:var(--txt2)}
.menu .sep{height:1px;background:var(--borda);margin:var(--esp-1) 0}

/* ===== cabeçalho que só existe no papel ===== */
.so-impressao{display:none}
/* o filete da marca e o respiro abaixo dele pertencem ao cabeçalho, não ao
   markup de quem o usa */
#cab-impressao{border-bottom:2px solid var(--prim);padding-bottom:var(--esp-2);margin-bottom:6px}
#cab-impressao .logo-imp{width:var(--logo-impressao-l);height:var(--logo-impressao-a);flex:none}
#imp-titulo{font:400 var(--tit-md) 'Bebas Neue',sans-serif;color:var(--prim);letter-spacing:.03em}

/* ===== barra de ações em lote =====
   CHAPADA, pela mesma conta que tirou o toast do vidro: a superfície dela é
   --tt-sup, escura nos dois temas, e é isso que a faz ler como o sistema
   falando por cima da página. Composta sobre um fundo claro ela clareia, e o
   texto claro de dentro cai abaixo do mínimo. Peça cuja graça é contrastar
   com a página não leva vidro — vale para as três da família --tt-sup: o
   toast, esta barra e o tooltip do gráfico. */
.lote{position:fixed;left:50%;bottom:var(--esp-5);transform:translateX(-50%);z-index:150;
  display:flex;align-items:center;gap:var(--esp-3);padding:10px 10px 10px var(--esp-4);
  background:var(--tt-sup);color:var(--tt-txt);border:1px solid var(--tt-borda);
  border-radius:var(--raio-4);box-shadow:var(--sombra-2); /* bcm-ok: chapada de propósito — família --tt-sup, escura nos dois temas para ler como o sistema falando; composta sobre fundo claro o texto claro dela cai abaixo de 4,5:1 */
  animation:toastIn var(--dur-2) ease-out;
  font:600 var(--txt-md) Mulish,sans-serif}
.lote b{font-weight:800;font-variant-numeric:tabular-nums}
.lote .sep{width:1px;height:22px;background:var(--tt-borda)}
.lote button{border:none;background:transparent;color:var(--tt-link);cursor:pointer;
  font:700 var(--txt-sm) Mulish,sans-serif;padding:7px 10px;border-radius:var(--raio-2)}
.lote button:hover{background:rgba(255,255,255,.08)} /* bcm-ok: a barra de lote é escura nos dois temas — o hover é branco a 8% COMPOSTO sobre --tt-sup */
.lote button.perigo{color:var(--tt-err)}

/* ===== paginação ===== */
.pag{display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap;
  padding:var(--esp-3) var(--esp-5);border-top:1px solid var(--borda)}
.pag .info{font:600 var(--txt-sm) Mulish,sans-serif;color:var(--txt2);font-variant-numeric:tabular-nums}
.pag .paginas{display:flex;gap:var(--esp-1);margin-left:auto;align-items:center}
.pag .paginas button{min-width:32px;height:32px;padding:0 var(--esp-2);border:1px solid var(--borda-ctrl);background:var(--sup);
  color:var(--txt2);border-radius:var(--raio-2);cursor:pointer;font:700 var(--txt-sm) Mulish,sans-serif;
  font-variant-numeric:tabular-nums}
.pag .paginas button:hover:not(:disabled){border-color:var(--prim);color:var(--prim)}
.pag .paginas button.ativa{background:var(--prim);border-color:var(--prim);color:var(--prim-txt)}
/* `opacity:.4` sobre texto derruba o contraste sem aviso nenhum: "desabilitado"
   e uma COR do sistema, nao uma transparencia. */
.pag .paginas button:disabled{color:var(--desab);opacity:1;cursor:not-allowed}
.pag .paginas .reticencia{color:var(--txt2);padding:0 2px}
/* O CONTROLE DA PAGINAÇÃO, no CABEÇALHO da tela (13.0.0). Ele é o irmão do
   `.pag` do rodapé: lá ficam a contagem e a navegação, aqui ficam as duas
   DECISÕES — o modo e o tamanho da página. Até a 13.0.0 as quatro coisas
   moravam juntas no rodapé, e o controle que muda o tamanho da lista ficava
   depois da lista inteira. */
.pag-ctrl{display:flex;align-items:center;gap:var(--esp-2);flex-wrap:wrap}
/* A FAIXA onde ele mora: dentro do cartão, colada em cima da tabela. É o
   mesmo lugar em TODA lista paginada do sistema — com barra de ferramentas ou
   sem ela, na Auditoria, nas Ordens e no histórico da IA. Duas telas do mesmo
   tipo com o mesmo controle em lugares diferentes é o que o padrão existe
   para não deixar acontecer. O rótulo da esquerda é opcional: entra onde o
   cartão não tem título próprio logo acima. */
.pag-cab{display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap;
  padding:var(--esp-3) var(--esp-5);border-bottom:1px solid var(--borda)}
.pag-cab>.pag-ctrl{margin-left:auto}

/* >>> BACKUP — INÍCIO DO BLOCO 1 (ESTILO) <<< */
/* ===== A ROTINA DE BACKUP NA TELA (13.1.0) =====
   A FAIXA fica no alto da lista e diz a rotina inteira numa frase — quando
   roda e, para CADA destino, onde o arquivo cai e quanto tempo fica. Ela é a
   peça que substitui uma linha de texto cravada no HTML, que não lia
   configuração nenhuma e continuaria dizendo "02:00" com a rotina mudada. */
.faixa-rotina{display:flex;align-items:center;gap:var(--esp-2);flex-wrap:wrap;
  padding:var(--esp-3) var(--esp-5);border-bottom:1px solid var(--borda);
  background:var(--sup2);font:var(--peso-padrao) var(--txt-sm) var(--familia-texto),sans-serif}
.faixa-rotina .ic{display:inline-flex;color:var(--txt2);flex:none}
.faixa-rotina .txt{min-width:0;color:var(--txt2)}
.faixa-rotina .txt b{font-weight:var(--peso-numeros);color:var(--txt)}
/* destino que falta configurar fala na cor de alerta: é informação de
   instalação, não erro do sistema — ele funciona, só não está inteiro */
.bk-falta{color:var(--al);font-weight:var(--peso-enfase)}
/* >>> BACKUP — FIM DO BLOCO 1 (ESTILO) <<< */
/* grupo de opções dentro de uma seção de formulário não estica: ele tem a
   largura das opções, como já fazia o das preferências da Início */
.secao-form .campo>.presets{align-self:flex-start;max-width:100%}
/* >>> BACKUP — INÍCIO DO BLOCO 1 (ESTILO) <<< */
.bk-destino{border:1px solid var(--borda);border-radius:var(--raio-3);padding:var(--esp-4);
  display:flex;flex-direction:column;gap:var(--esp-2)}
.bk-destino-topo{display:flex;align-items:center;gap:var(--esp-2);flex-wrap:wrap}
.bk-destino-topo .nome{font:var(--peso-enfase) var(--txt-md) var(--familia-texto),sans-serif}
.bk-destino .onde{font:var(--peso-padrao) var(--txt-sm) var(--familia-texto),sans-serif;
  color:var(--txt2);word-break:break-word}
/* O AVISO DO DESTINO (14.0.0) — "onde fica" não é só o caminho: o mesmo
   caminho em duas máquinas são dois lugares, e a mesma pasta do Drive em duas
   contas também. Quando o destino tem uma ressalva (pasta sincronizada por
   aplicativo de nuvem, ou conta que mudou), ela fica DENTRO do cartão do
   destino, não num canto da tela: a ressalva é sobre aquele destino e some
   junto com ele. Cor de alerta e não de erro, com a mesma dupla `--al-bg`/
   `--al` da faixa de conexão — o sistema está funcionando, e o que ele está
   dizendo é que o lugar pode não ser o que a pessoa pensa. */
.bk-aviso{display:flex;gap:var(--esp-2);padding:var(--esp-2) var(--esp-3);
  border-radius:var(--raio-2);background:var(--al-bg);color:var(--al);
  font:var(--peso-padrao) var(--txt-sm)/1.45 var(--familia-texto),sans-serif}
.bk-aviso .ic{flex:none;margin-top:2px}
/* dentro da faixa ele ocupa a linha inteira: a faixa é flex com quebra, e o
   aviso é frase de duas ou três linhas — dividir a largura com o resto o
   espremeria numa coluna de quatro palavras */
.bk-aviso-faixa{flex-basis:100%}
/* ===== OS HORÁRIOS DO DIÁRIO, EM CHIPS (17.0.0) =====
   A rotina diária tinha UMA hora. Num sistema em que o dia inteiro de
   trabalho cabe entre duas cópias, perder a cópia é perder o dia — então ela
   passou a ter uma LISTA. Cada horário é uma peça que se tira sozinha, e não
   um campo de texto com vírgulas: campo de texto aceita "7h, 12", e aí a
   pessoa descobre o erro no dia em que precisa do backup.
   O horário continua sendo um `<input type="time">` de verdade — é ele que
   dá o teclado numérico no celular e o relógio do sistema —, só que sem a
   moldura, porque a moldura aqui é o chip. */
.bk-horarios{display:flex;align-items:center;gap:var(--esp-2);flex-wrap:wrap}
.bk-hora-chip{display:inline-flex;align-items:center;gap:var(--esp-1);height:var(--alt-ctrl);
  padding:0 var(--esp-1) 0 var(--esp-3);border:1px solid var(--borda-ctrl);
  border-radius:var(--raio-pill);background:var(--sup);color:var(--txt)}
.bk-hora-chip:focus-within{border-color:var(--prim);box-shadow:var(--anel)}
.bk-hora-chip .hora{border:none;background:transparent;padding:0;color:inherit;
  font:var(--peso-numeros) var(--txt-sm) var(--familia-texto),sans-serif;
  font-variant-numeric:tabular-nums}
.bk-hora-chip .hora:focus{outline:none}
.bk-hora-chip .hora::-webkit-calendar-picker-indicator{display:none} /* bcm-ok: o relógio nativo do navegador dentro do chip; quem abre o seletor é o próprio campo */
.bk-hora-chip .x{width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--txt2);cursor:pointer;border-radius:var(--raio-pill)}
.bk-hora-chip .x:hover{background:var(--err-bg);color:var(--err)}
.bk-hora-chip .x:focus-visible{outline:none;box-shadow:var(--anel)}
.bk-prazos{display:flex;gap:var(--esp-4);flex-wrap:wrap;margin-top:var(--esp-1)}
.bk-num{display:flex;align-items:center;gap:var(--esp-2)}
.bk-num .ent{width:86px}
/* O comando do agendador: é para COPIAR, e por isso ganha a caixa em vez da
   prosa. Ele NÃO usa fonte monoespaçada: o padrão tem duas famílias e não
   admite uma terceira, nem para uma caixa só — a caixa, o filete e a superfície
   secundária já dizem "isto é um comando", e uma família nova entraria no
   sistema por uma porta de quatro linhas. A largura extra rola pelo componente
   de rolagem do padrão (`rol-in rol-so-x`), nunca pela barra do navegador. */
.bk-comando{margin:0;padding:var(--esp-2) var(--esp-3);border:1px solid var(--borda);
  border-radius:var(--raio-2);background:var(--sup2);color:var(--txt);
  font:var(--peso-padrao) var(--txt-sm)/1.5 var(--familia-texto),sans-serif;
  font-variant-numeric:tabular-nums}
/* >>> BACKUP — FIM DO BLOCO 1 (ESTILO) <<< */
.pag-ctrl .pag-rot{font:var(--peso-enfase) var(--txt-xs) var(--familia-texto),sans-serif;
  color:var(--txt2);letter-spacing:.03em}
.pag-ctrl .pag-modos button{height:var(--alt-ctrl-sm);padding:0 var(--esp-3);font-size:var(--txt-sm)}
.pag-ctrl .sel-porpag .sel-gatilho{height:var(--alt-ctrl-sm);min-width:72px;padding:0 var(--esp-2)}
@media (max-width:900px){
  /* no celular o controle ocupa a linha inteira, e o alternador estica: dois
     alvos de toque grandes valem mais que a economia de uma linha */
  .pag-ctrl{width:100%}
  .pag-ctrl .pag-modos{flex:1}
  .pag-ctrl .pag-modos button{flex:1}
}
.pag .sel-porpag{display:inline-block}
.pag .sel-porpag .sel-gatilho{height:32px;min-width:72px;padding:0 var(--esp-2)}

/* ===== gaveta de detalhe (dialog nativo, ancorado à direita) ===== */
dialog.gaveta{margin:0 0 0 auto;height:var(--vp-h);max-height:var(--vp-h);width:min(560px,var(--vp-w));max-width:var(--vp-w)}
dialog.gaveta[open]{animation:gavetaIn var(--dur-2) var(--ease)}
@keyframes gavetaIn{from{transform:translateX(28px);opacity:0}}
.gaveta-caixa{height:100%;background:var(--sup);border-left:1px solid var(--borda);
  display:flex;flex-direction:column;box-shadow:var(--sombra-2)}
.gaveta-topo{flex:none;padding:var(--esp-4) var(--esp-5);border-bottom:1px solid var(--borda);
  display:flex;flex-direction:column;gap:var(--esp-2)}
/* A LINHA DE CABEÇALHO DA GAVETA. Ela mora no SHELL, e não no módulo que a
   usou primeiro: quem injeta o botão de maximizar procura por `.gav-cab-btns`
   em toda gaveta, e uma classe que vive dentro de um módulo condicional
   desapareceria junto com ele. */
.gav-cab-linha{display:flex;align-items:center;gap:var(--esp-3)}
.gav-cab-btns{flex:none;display:flex;align-items:center;gap:var(--esp-1)}
.gav-cab-cresce{flex:1;min-width:0}

/* ===== MAXIMIZAR — padrão de TODA gaveta =====
   A gaveta é a leitura rápida sem perder a lista de trás. Mas há registro que
   não cabe nela: uma tarefa com árvore, anexos e histórico, uma ordem com
   trinta itens. Antes disso a saída era fechar a gaveta e procurar outra porta;
   agora ela cresce, e volta.

   Ela cresce até `--gav-max-l`, e não até a borda: encostada nas duas laterais,
   a gaveta deixa de ser gaveta e vira tela — e some a pista de que existe algo
   atrás dela, que é a única coisa que a diferencia de uma página. O véu
   continua aparecendo dos dois lados.

   O estado é SALVO. Quem trabalha maximizado quer maximizado da próxima vez, e
   reabrir na metade da tela toda vez é o tipo de detalhe que faz a pessoa parar
   de usar o botão. É a mesma regra do tema, da densidade e do modo do menu. */
dialog.gaveta[data-max="1"]{width:min(var(--gav-max-l),var(--vp-w))}
dialog.gaveta[data-max="1"] .gaveta-caixa{border-left:none}
/* a animação de entrada é a mesma; só a largura muda, e ela NÃO entra na
   transição — animar `width` recalcula layout a cada quadro, e a gaveta tem
   uma tabela dentro */
/* a linha de resumo da gaveta: rótulo à esquerda, valor à direita, um
   filete entre elas. Era um `style=` repetido em duas funções — duas
   cópias do mesmo desenho, que é como as duas divergem. */
.gav-linha{display:flex;justify-content:space-between;gap:var(--esp-4);padding:10px 0;
  border-top:1px solid var(--borda)}
.gav-linha .valor{font:700 var(--txt-md) Mulish,sans-serif;text-align:right}
.gaveta-corpo{flex:1;min-height:0;padding:var(--esp-5);display:flex;flex-direction:column;gap:var(--esp-4)}
.gaveta-rodape{flex:none;padding:var(--esp-3) var(--esp-5);border-top:1px solid var(--borda);
  display:flex;justify-content:flex-end;gap:var(--esp-2);background:var(--sup2);flex-wrap:wrap}
/* a ação sem volta encosta na esquerda, separada das outras (19.0.0) */
.gaveta-rodape .gav-perigo{margin-right:auto}
/* a senha provisória: grande, espaçada e com números alinhados, porque ela é
   lida em voz alta ao telefone */
.sp2-linha{display:flex;gap:var(--esp-2);align-items:stretch}
.sp2-linha .sp2-senha{flex:1;min-width:0;text-align:center;letter-spacing:.12em;
  font:var(--peso-enfase) var(--tit-sm)/1 var(--familia-texto),sans-serif;font-variant-numeric:tabular-nums}
.sp2-dica{font:var(--peso-apoio) var(--txt-xs)/1.4 var(--familia-texto),sans-serif;color:var(--txt2)}
.sp2-aviso{display:flex;gap:var(--esp-2);align-items:flex-start;margin-top:var(--esp-3);
  font:var(--peso-padrao) var(--txt-sm)/1.45 var(--familia-texto),sans-serif;color:var(--txt2)}
.sp2-aviso svg{flex:none;margin-top:2px}

/* ===== trilha de navegação ===== */
.trilha{display:flex;align-items:center;gap:var(--esp-1);flex-wrap:wrap;
  font:600 var(--txt-sm) Mulish,sans-serif;color:var(--txt2)}
.trilha a,.trilha button{border:none;background:transparent;padding:0;color:var(--txt2);cursor:pointer;
  font:inherit;border-radius:var(--raio-1)}
.trilha a:hover,.trilha button:hover{color:var(--prim);text-decoration:underline}
.trilha .sep{color:var(--txt3)}
.trilha [aria-current="page"]{color:var(--txt);font-weight:700;cursor:default;text-decoration:none}

/* ===== abas internas ===== */
.abas{display:flex;gap:var(--esp-5);border-bottom:1px solid var(--borda)}
.abas button{border:none;background:transparent;cursor:pointer;padding:10px 0;color:var(--txt2);
  font:700 var(--txt-md) Mulish,sans-serif;white-space:nowrap;
  box-shadow:inset 0 -2px 0 transparent;transition:color var(--dur-1),box-shadow var(--dur-1)}
.abas button:hover{color:var(--txt)}
.abas button[aria-selected="true"]{color:var(--prim);box-shadow:inset 0 -2px 0 var(--prim)}

/* ===== linha do tempo ===== */
.linha-tempo{list-style:none;margin:0;padding:0 0 0 var(--esp-5);position:relative}
.linha-tempo::before{content:'';position:absolute;left:5px;top:8px;bottom:10px;width:2px;background:var(--borda)}
.linha-tempo li{position:relative;padding-bottom:var(--esp-4)}
.linha-tempo li:last-child{padding-bottom:0}
.linha-tempo li::before{content:'';position:absolute;left:calc(-1 * var(--esp-5) + 1px);top:5px;width:10px;height:10px;
  border-radius:50%;background:var(--prim);box-shadow:0 0 0 3px var(--sup)}
.linha-tempo .quando{font:700 var(--txt-xs) Mulish,sans-serif;color:var(--txt2);
  letter-spacing:.05em;text-transform:uppercase;font-variant-numeric:tabular-nums}
.linha-tempo .oque{font:600 var(--txt-md) Mulish,sans-serif;margin-top:2px}
.linha-tempo .quem{font:400 var(--txt-sm) Mulish,sans-serif;color:var(--txt2)}

/* >>> ANEXOS — INÍCIO DO BLOCO 1 (ESTILO) <<< */
/* ===== envio de arquivo ===== */
.solta{border:1.5px dashed var(--borda-ctrl);border-radius:var(--raio-4);background:var(--campo-fundo);
  padding:var(--esp-5);text-align:center;display:flex;flex-direction:column;align-items:center;gap:var(--esp-2);
  cursor:pointer;transition:border-color var(--dur-1),background var(--dur-1)}
.solta:hover,.solta.sobre{border-color:var(--prim);background:var(--prim-suave)}
.solta .ic{color:var(--txt2)}
.solta.sobre .ic,.solta:hover .ic{color:var(--prim)}
.anexo{display:flex;align-items:center;gap:var(--esp-3);padding:10px var(--esp-3);border:1px solid var(--borda);
  border-radius:var(--raio-3);background:var(--sup)}
.anexo .nome{flex:1;min-width:0;font:600 var(--txt-md) Mulish,sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.anexo .tam{font:600 var(--txt-xs) Mulish,sans-serif;color:var(--txt2);font-variant-numeric:tabular-nums}
/* >>> ANEXOS — FIM DO BLOCO 1 (ESTILO) <<< */

/* ===== seção de formulário longo ===== */
.secao-form{display:grid;grid-template-columns:minmax(200px,260px) 1fr;gap:var(--esp-5);
  padding:var(--esp-5) 0;border-top:1px solid var(--borda)}
.secao-form:first-of-type{border-top:none;padding-top:0}
.secao-form>.lado h2{font:var(--peso-apoio) var(--tit-md) var(--familia-titulo),sans-serif;letter-spacing:.03em;margin:0 0 var(--esp-1)}
.secao-form>.lado p{margin:0;font:400 var(--txt-sm) Mulish,sans-serif;color:var(--txt2)}
.secao-form>.campos{display:flex;flex-direction:column;gap:var(--esp-4);min-width:0}
@media(max-width:820px){.secao-form{grid-template-columns:1fr;gap:var(--esp-3)}}

/* ===== estado de erro de página ===== */
.erro-pag{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--esp-2);
  padding:var(--esp-7) var(--esp-5)}
.erro-pag .cod{font:400 64px 'Bebas Neue',sans-serif;letter-spacing:.04em;color:var(--prim);line-height:1} /* bcm-ok: 64px é o número gigante da página de erro (o "404"), acima do maior título do padrão (--tit-3xl 46px) — é vitrine, não texto de interface */
.erro-pag h2{font:400 var(--tit-lg) 'Bebas Neue',sans-serif;letter-spacing:.03em;margin:0}
.erro-pag p{margin:0;color:var(--txt2);font:600 var(--txt-md) Mulish,sans-serif;max-width:400px}
.erro-pag .acoes{display:flex;gap:var(--esp-2);margin-top:var(--esp-3);flex-wrap:wrap;justify-content:center}

/* ===== gráfico de rosca ===== */
.rosca-wrap{display:flex;align-items:center;gap:var(--esp-5);flex-wrap:wrap}
.rosca-legenda{display:flex;flex-direction:column;gap:var(--esp-2);min-width:190px;flex:1}
.rosca-item{display:flex;align-items:center;gap:var(--esp-2);border:none;background:transparent;cursor:pointer;
  padding:5px var(--esp-2);border-radius:var(--raio-2);color:inherit;font:600 var(--txt-md) Mulish,sans-serif;text-align:left}
.rosca-item:hover,.rosca-item.ativo{background:var(--hover)}
.rosca-item .ponto{width:10px;height:10px;border-radius:var(--raio-0);flex:none}
.rosca-item .n{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums}
.rosca-fatia{transition:opacity var(--dur-1),stroke-width var(--dur-1);transform-origin:0 0}
.rosca-fatia.apagada{opacity:.28}


/* ===== TELA DE CARREGAMENTO =====
   A marca se monta: o contorno da esfera entra, os pontos acendem de baixo
   para cima e a barra fecha. Dura ~1,1s e sai em fade — carregamento é
   informação, não espetáculo: se passar disso, vira espera. */
#carregando{position:fixed;inset:0;z-index:400;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--esp-5);
  background:radial-gradient(circle at 50% 42%,var(--carr-fundo-1) 0%,var(--carr-fundo-2) 62%);
  transition:opacity var(--saida) ease,visibility var(--saida)}
#carregando[hidden]{display:flex!important;opacity:0;visibility:hidden;pointer-events:none}
.carregando-marca{position:relative;width:132px;height:132px;
  animation:esfPulsa 2.6s ease-in-out infinite} /* bcm-ok: 2.6s é o ciclo da respiração da marca em laço infinito, não duração de transição */
.carregando-marca svg{width:100%;height:100%;display:block;overflow:visible}
.esf-fora{fill:var(--carr-esfera);opacity:0;transform-box:fill-box;transform-origin:center;
  animation:esfEntra var(--dur-4) var(--ease) forwards}
.esf-ponto{fill:var(--carr-ponto);opacity:0;transform-box:fill-box;transform-origin:center;
  animation:esfPonto var(--dur-3) var(--ease) forwards;
  animation-delay:calc(var(--dur-2) + var(--l-i) * .038s)} /* bcm-ok: .038s é o PASSO entre os 17 pontos, não a duração de nenhum deles — um token daria os 17 juntos */
@keyframes esfEntra{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
@keyframes esfPonto{from{opacity:0;transform:scale(.2)}60%{opacity:1;transform:scale(1.12)}
  to{opacity:1;transform:scale(1)}}
@keyframes esfPulsa{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.carregando-nome{font:var(--peso-apoio) var(--tit-2xl) var(--familia-titulo),sans-serif;letter-spacing:.06em;color:var(--carr-txt);
  opacity:0;animation:subirEntrar var(--dur-4) var(--ease) .5s forwards} /* bcm-ok: o segundo tempo é o ATRASO da coreografia (nome .5s, barra .6s, texto .7s) — os três precisam ser diferentes entre si */
.carregando-barra{width:190px;height:3px;border-radius:var(--raio-0);overflow:hidden;opacity:0;
  background:rgba(255,255,255,.12); /* bcm-ok: branco a 12% COMPOSTO sobre o degradê escuro da tela de carregamento — é véu, não cor de superfície */
  animation:subirEntrar var(--dur-4) var(--ease) .6s forwards} /* bcm-ok: .6s é o ATRASO da coreografia (nome .5s, barra .6s, texto .7s) */
.carregando-barra i{display:block;height:100%;width:40%;border-radius:var(--raio-0);
  background:linear-gradient(90deg,transparent,var(--prim),transparent);
  animation:barraVai 1.15s var(--ease) infinite} /* bcm-ok: 1.15s é o ciclo do vaivém em laço infinito, não duração de transição */
@keyframes barraVai{from{transform:translateX(-120%)}to{transform:translateX(360%)}}
.carregando-txt{font:600 var(--txt-sm) Mulish,sans-serif;color:var(--carr-txt2);letter-spacing:.02em;
  opacity:0;animation:subirEntrar var(--dur-4) var(--ease) .7s forwards} /* bcm-ok: .7s é o ATRASO da coreografia (nome .5s, barra .6s, texto .7s) */
@keyframes subirEntrar{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ===== movimento das telas =====
   A classe .anima entra na troca de tela e sai em 700ms. Sem ela, o gráfico
   se redesenharia a cada passada de mouse e os KPIs piscariam a cada
   filtro — animação de entrada é para ENTRAR, não para toda repintura. */
.tela.anima{animation:telaEntra var(--dur-3) var(--ease)}
@keyframes telaEntra{from{opacity:0;transform:translateY(8px)}}
/* stagger curto e só nos KPIs (4 a 6 itens): em tabela, atrasar linha por
   linha atrapalha a leitura — por isso a tabela entra inteira. */
.tela.anima .grade-kpi .kpi{animation:cartaoEntra var(--dur-3) var(--ease) backwards;
  animation-delay:calc(var(--k, 0) * .045s)} /* bcm-ok: .045s é o PASSO entre um cartão e o seguinte, não a duração de nenhum */
@keyframes cartaoEntra{from{opacity:0;transform:translateY(10px) scale(.99)}}
/* o gráfico se desenha da esquerda para a direita ao entrar na tela */
.tela.anima .linha-fat{stroke-dasharray:540;stroke-dashoffset:540;
  animation:desenhar var(--dur-traco) var(--ease) forwards}
.tela.anima .area-fat{opacity:0;animation:aparecer .6s var(--ease) .2s forwards} /* bcm-ok: a área acompanha o traço (--dur-traco .9s): entra .2s depois dele e termina junto — tempo de coreografia do gráfico, não de transição de controle */
@keyframes desenhar{to{stroke-dashoffset:0}}
@keyframes aparecer{to{opacity:1}}
.barra-status .fill{transition:width var(--dur-4) var(--ease)}

/* ===== ESQUELETO DE TELA =====
   Enquanto os dados da aba não chegam, entra o desenho da tela em cinza.
   Não é enfeite: mostra ONDE o conteúdo vai aparecer, então o olho já se
   posiciona e a tela não "pula" quando os dados entram. */
#esqueleto{display:flex;flex-direction:column;gap:var(--esp-5)}
/* AS TRÊS PEÇAS DO ESQUELETO leem a medida de uma variável local — é o
   desenho que mora na classe e o número que viaja no atributo, e não o
   contrário. O valor padrão existe para a peça nunca nascer sem altura se
   quem chamou esquecer de passá-la. */
.esq-bloco{border-radius:var(--raio-4);background:var(--sup);border:1px solid var(--borda);
  position:relative;overflow:hidden;height:var(--l-alt,74px)}
.esq-bloco::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--hover),transparent);
  background-size:420px 100%;background-repeat:no-repeat;
  animation:varrer 1.25s infinite linear} /* bcm-ok: 1.25s é o ciclo da varredura em laço infinito, não duração de transição */
@keyframes varrer{0%{background-position:-420px 0}100%{background-position:120% 0}}
.esq-linha{height:14px;border-radius:var(--raio-0);background:var(--sup2);width:var(--l-larg,90%)}
.esq-chips{display:flex;gap:var(--esp-3);flex-wrap:wrap}
.esq-chip{height:var(--alt-ctrl);border-radius:var(--raio-2);background:var(--sup);
  border:1px solid var(--borda);position:relative;overflow:hidden;width:var(--l-larg,200px)}
.esq-chip::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,var(--hover),transparent);
  background-size:220px 100%;background-repeat:no-repeat;
  animation:varrer 1.25s infinite linear} /* bcm-ok: mesmo ciclo de laço da varredura do bloco acima */
.esq-grade{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--esp-4)}
.esq-dupla{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--esp-4)}
.esq-tabela{padding:var(--esp-5);display:flex;flex-direction:column;gap:var(--esp-4)}
.esq-tabela .esq-linha:first-child{height:18px}
/* o esqueleto do VALOR do KPI: ele mora dentro do .kpi, e por isso não
   precisa de classe própria nem de medida no atributo */
.kpi>.esq{display:block;height:34px;width:70%}
/* as peças do esqueleto de LISTA (Inbox, catálogo de relatórios): a mesma
   anatomia — a caixa do ícone, duas linhas de texto e um número */
.esq-ic{flex:none;width:var(--inbox-icone);height:var(--inbox-icone);border-radius:var(--raio-3)}
.esq-cp{flex:1;display:flex;flex-direction:column;gap:var(--esp-2)}
.esq-l1{width:52%;height:13px}
.esq-l2{width:78%;height:11px}
.esq-num{width:44px;height:26px}
.esq-cel{display:block;width:80%;height:12px}

/* ===== saída também é animação =====
   Fechar sem transição é o que faz um sistema parecer "de fora": o olho
   perde o objeto de vista sem entender para onde ele foi. */
.modal.saindo{animation:modalSai var(--dur-1) ease-in forwards}
@keyframes modalSai{to{opacity:0;transform:translateY(6px) scale(.985)}}
dialog.gaveta.saindo{animation:gavetaSai var(--dur-1) ease-in forwards}
@keyframes gavetaSai{to{transform:translateX(30px);opacity:0}}
.toast.saindo{animation:toastSai var(--dur-2) ease-in forwards}
@keyframes toastSai{to{opacity:0;transform:translateY(6px) scale(.98)}}
/* conteúdo de aba entra com um respiro de 6px — o suficiente para o olho
   perceber que trocou, sem atrapalhar quem já sabe o que quer */
.aba-corpo{animation:abaEntra var(--dur-2) var(--ease)}
@keyframes abaEntra{from{opacity:0;transform:translateY(6px)}}
/* o ícone do tema gira ao trocar */
#btn-tema svg{transition:transform var(--dur-4) var(--ease)}
#btn-tema.girando svg{transform:rotate(180deg)}
.tela.anima .barra-status .fill{animation:barraCresce var(--dur-4) var(--ease) backwards;
  animation-delay:calc(var(--k, 0) * .05s)} /* bcm-ok: .05s é o PASSO entre uma barra e a seguinte, não a duração de nenhuma */
@keyframes barraCresce{from{width:0}}

/* ===== tabela responsiva: abaixo de 720px cada linha vira um card =====
   Exige data-rot em cada <td>; o rótulo do cabeçalho reaparece dentro da célula. */
@media(max-width:720px){
  .tab-wrap.rol-in{overflow:visible}
  .tab-cards table{min-width:0!important}
    /* `clip` esconde da vista mas NAO tira do caminho do foco: eram oito
     botoes de ordenacao de 0x0 por tabela, e o Tab parava em todos.
     `visibility:hidden` e o que realmente tira do caminho. */
  .tab-cards thead{position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);visibility:hidden}
  /* `minmax(0,1fr)` E NÃO `1fr`: a coluna de uma grade não desce abaixo do
     conteúdo mínimo dela, e uma célula que não encolhia deixava a TABELA mais
     larga que o cartão — o cartão corta o que passa da borda, e o valor da
     direita aparecia colado nela, com a data perdendo o traço do último
     número. Com o mínimo zerado a tabela volta a caber, e ninguém quebra. */
  .tab-cards tbody tr{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--esp-1);
    padding:var(--esp-3) var(--esp-4);border-top:1px solid var(--borda)}
  .tab-cards tbody tr:hover td:first-child{box-shadow:none}
  /* O PAR QUE NÃO CABE QUEBRA LINHA, NÃO SANGRA. Rótulo e valor dividem a
     largura do cartão; quando os dois juntos não cabem — nome de registro
     comprido, valor com uma segunda informação ao lado —, sem `wrap` o valor
     passava da célula e o cartão o cortava. Quebrando, o valor desce inteiro
     para a linha de baixo, com ícone e tudo, que é como um cartão se lê. */
  .tab-cards tbody td{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--esp-3);
    padding:3px 0!important;text-align:left!important}
  .tab-cards tbody td::before{content:attr(data-rot);font:800 var(--txt-xs) Mulish,sans-serif;
    letter-spacing:.06em;text-transform:uppercase;color:var(--txt2);flex:none}
  .tab-cards tbody td[data-rot=""]::before{content:none}
  .tab-cards tbody td[data-rot=""]{justify-content:flex-end;gap:var(--esp-2)}
  .tab-cards tfoot td{padding:var(--esp-3) var(--esp-4)}
  /* O ALVO DE TOQUE CRESCE POR FORA — a CAIXA DESENHADA não muda.
     `min-width/min-height` no `.sw` esticava a PÍLULA de 42x24 para 44x44:
     virava um quadrado, e como a bola é absoluta em top/left, ela ficava
     encalhada no canto de cima à esquerda. O alvo é do dedo, o desenho é do
     olho: o dedo ganha um pseudo-elemento centrado de --alvo-toque, e a
     pílula continua do tamanho que foi desenhada.
     O `.btn-linha` é quadrado e cresce sem deformar — nele o alvo é a
     própria caixa, que é o que dá o realce de toque no lugar certo. */
  .btn-linha{min-width:var(--alvo-toque);min-height:var(--alvo-toque)}
  .sw::after{content:"";position:absolute;top:50%;left:50%;
    transform:translate(-50%,-50%);width:var(--alvo-toque);height:var(--alvo-toque)}
}

/* toasts */
/* Dois canais, uma pilha só na tela. O aviso comum é `polite` e espera a
   frase que o leitor de tela estiver lendo; ERRO é `assertive` e interrompe —
   misturar os dois num canal só faz o erro esperar a fila, que é justamente
   o que ninguém pode fazer com um erro. */
.pilha-toasts{position:fixed;right:var(--esp-5);bottom:var(--esp-5);z-index:200;
  display:flex;flex-direction:column;gap:10px;pointer-events:none}
#toasts,#toasts-erro{display:flex;flex-direction:column;gap:10px}
.pilha-toasts .toast{pointer-events:auto}
.toast.erro{border-color:var(--tt-err);box-shadow:var(--sombra-2),inset 3px 0 0 var(--tt-err)}
/* O TOAST É CHAPADO, e isso foi MEDIDO, não escolhido. A superfície dele é
   escura nos dois temas de propósito: é o que faz ele ler como o sistema
   falando, e não como mais um cartão da página. Vidro ataca exatamente isso —
   sobre fundo branco o composto clareia e o texto claro dele cai para 3,34:1.
   Subir o alfa até passar devolveria um toast opaco com o custo do desfoque. */
.toast{display:flex;align-items:center;gap:14px;background:var(--tt-sup);color:var(--tt-txt);border:1px solid var(--tt-borda);
  border-radius:var(--raio-3);padding:var(--esp-3) var(--esp-4);box-shadow:var(--sombra-2);
  font:600 var(--txt-sm) Mulish,sans-serif;animation:toastIn var(--dur-2) ease-out;max-width:420px}
.toast button{border:none;background:transparent;color:var(--tt-link);font:800 var(--txt-sm) Mulish,sans-serif;
  cursor:pointer;padding:2px 6px;border-radius:var(--raio-1)}
.toast button:hover{background:color-mix(in srgb,var(--tt-link) 14%,transparent)}

/* layout */
/* ===== sidebar: calha x largura =====
   A barra é FIXA na janela e o shell reserva uma CALHA do tamanho dela.
   Como as duas medidas são independentes, a barra pode crescer POR CIMA do
   conteúdo — que é o que faz a revelação no hover não sacudir a tela, o
   defeito de quem anima a largura dentro do fluxo.
     em repouso   completa | só ícones | oculta
     no mouse     não muda | só ícones | completa
   As duas escolhas juntas cobrem a barra fixa, a que vive minimizada e a
   que some por completo. */
/* >>> LOGIN — INÍCIO DO BLOCO 1 (ESTILO) <<< */
/* ================= TELA DE LOGIN =================
   Esta tela e IGUAL em todo sistema BCM — so o texto muda. As regras vivem
   aqui, em classes, e nao no markup: estilo inline nao viaja no transplante,
   e foi assim que o login saiu diferente num projeto. Especificacao completa
   em references/shell.md, secao "A tela de login". */
/* >>> LOGIN — FIM DO BLOCO 1 (ESTILO) <<< */
/* =====================================================================
   OS DEGRADÊS DO PADRÃO — cinco lugares, uma linguagem
   =====================================================================
   A linguagem é a do painel de marca do login: azul-ardósia caminhando para o
   azul BCM escurecido, com um brilho radial no alto à direita. Ela foi
   escolhida olhando quatro tratamentos lado a lado nos dois temas, e o que a
   fez ganhar é que ela não traz cor nova nenhuma — o sistema inteiro passa a
   falar a língua que a tela de entrada já falava.

   NOS CINCO LUGARES O PADRÃO É OBRIGATÓRIO. Fora deles, a regra é a mesma do
   exportar e da busca da tela: entra quando AGREGA e NÃO POLUI. Degradê tem um
   custo que cor chapada não tem — ele chama o olho, e uma tela com três
   chamando o olho não tem nenhuma. O teste é de uma pergunta só: esta peça
   precisa ser vista ANTES das outras?

   O que não se faz nunca é inventar um degradê novo. A regra
   `degrade-fora-do-padrao` do verificador reprova gradiente escrito com cor
   crua, e ela não olha de que tela é. */

/* 1 · O PAINEL DE MARCA — o degradê original, agora com o ângulo e o brilho em
   token. As três paradas continuam sendo --login-g1..g3: copiá-las para o
   grupo `degrade` seria a segunda fonte da verdade que o tokens.json existe
   para impedir. */
.deg-marca{background:var(--deg-marca-fundo)}

/* 2 · A FAIXA DE DESTAQUE — um pedaço de MARCA dentro da tela, para o número
   que precisa ser lido antes dos outros. Ela é escura nos dois temas, como o
   painel do login: marca não acompanha tema, e é isso que a faz ser
   reconhecida de longe. Por isso o texto dela tem tokens próprios em vez de
   usar --txt, que viraria preto sobre azul-escuro no tema claro. */
.deg-faixa{background:linear-gradient(135deg,var(--deg-faixa-1),var(--deg-faixa-2));
  color:var(--deg-faixa-txt);border-radius:var(--raio-4);padding:var(--esp-4) var(--esp-5)}
.deg-faixa .rot,.deg-faixa .apoio{color:var(--deg-faixa-txt2)}

/* 4 · O VÉU DE "TEM MAIS ABAIXO" — o degradê que resolve um problema de
   informação, e não de enfeite: uma lista cortada na borda do cartão parece
   uma lista que ACABOU. O véu desfaz a linha reta do corte e diz que continua.
   Ele fica na embalagem `.rol`, e não dentro da área que rola — dentro, ele
   rolaria junto e desapareceria justamente quando é preciso.
   `pointer-events:none` porque ele cobre conteúdo clicável: um véu que
   intercepta o clique é pior que véu nenhum. */
.rol-veu{position:relative}
.rol-veu::after{content:'';position:absolute;left:0;right:var(--rol-larg);bottom:0;
  height:var(--deg-veu-alt);pointer-events:none;
  background:linear-gradient(180deg,transparent,var(--sup));
  opacity:1;transition:opacity var(--dur-1)}
/* chegou ao fim, não há mais o que anunciar: o véu some. Quem marca é o
   rolagem(), que já sabe onde a área está. */
.rol-veu[data-fim="1"]::after{opacity:0}

/* >>> LOGIN — INÍCIO DO BLOCO 1 (ESTILO) <<< */
/* main.login, nao so .login: a tela de login virou <main> por causa do
   landmark, e com isso passou a herdar o padding do `main` do shell — uma
   moldura de 22px em volta da tela inteira. O login nao tem calha. */
main.login{display:flex;height:var(--vp-h);padding:0;flex:none}
.login-marca,.login-lado{min-height:min-content}
/* lado da marca: 42% da largura, sempre a esquerda, sempre escuro nos dois temas */
.login-marca{flex:0 0 var(--login-marca-l);display:flex;flex-direction:column;justify-content:space-between;
  padding:var(--login-marca-pad)}
.login-logo{width:var(--logo-login-l);height:var(--logo-login-a);align-self:flex-start;
  margin-bottom:var(--logo-respiro)}
.login-texto{display:flex;flex-direction:column;gap:var(--esp-3)}
.login-manifesto{font:var(--peso-apoio) var(--tit-3xl)/1.02 var(--familia-titulo),sans-serif;color:var(--login-txt);letter-spacing:.02em}
.login-sub{font:var(--peso-apoio) var(--txt-lg)/1.6 var(--familia-texto),sans-serif;color:var(--login-txt2);max-width:340px}
/* o rodape declara a versao do padrao que o sistema segue — nao e enfeite */
.login-rodape{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-4)}
.login-versao{font:var(--peso-padrao) var(--txt-sm) var(--familia-texto),sans-serif;color:var(--login-txt3)}
/* Alternar tema JA na entrada: quem prefere o escuro nao deveria ter de atravessar
   uma tela clara para chegar nele. Vive no lado da marca, que e escuro nos dois
   temas — por isso as cores dele saem dos tokens de login, nao dos do shell. */
.login-tema{width:var(--login-tema);height:var(--login-tema);flex:none;display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04); /* bcm-ok: o painel de marca do login é escuro nos dois temas — moldura e fundo do botão são branco COMPOSTO sobre o degradê, não cor de paleta */
  color:var(--login-txt2);cursor:pointer;border-radius:var(--raio-2);
  transition:background var(--dur-1) ease,color var(--dur-1) ease,border-color var(--dur-1) ease}
.login-tema:hover{background:rgba(255,255,255,.10);color:var(--login-txt);border-color:rgba(255,255,255,.22)} /* bcm-ok: mesmo branco COMPOSTO sobre o degradê do login, um degrau acima no hover */
.login-tema:focus-visible{outline:2px solid var(--login-txt);outline-offset:2px}
.login-tema svg{transition:transform var(--dur-4) var(--ease)}
.login-tema.girando svg{transform:rotate(180deg)}
/* lado do formulario */
.login-lado{flex:1;display:flex;align-items:center;justify-content:center;padding:40px}
.login-cartao{width:var(--login-cartao-l);padding:var(--login-cartao-pad);display:flex;flex-direction:column;gap:var(--login-cartao-gap);
  background:var(--sup);border:1px solid var(--borda);border-radius:var(--raio-5);box-shadow:var(--sombra)}
.login-cab{display:flex;flex-direction:column;gap:var(--esp-2)}
.login-tit{font:var(--peso-apoio) var(--tit-2xl) var(--familia-titulo),sans-serif;letter-spacing:.02em;margin:0}
.login-dica{font-weight:var(--peso-apoio);font-size:var(--txt-md)}
.login-senha{position:relative;display:flex}
.login-senha .ent{padding-right:42px}
.login-olho{position:absolute;right:var(--esp-1);top:var(--esp-1);width:var(--login-olho);height:var(--login-olho);
  display:flex;align-items:center;justify-content:center;
  border:none;background:transparent;color:var(--txt2);cursor:pointer;border-radius:var(--raio-1)}
.login-entrar{height:var(--login-btn-alt);font-size:var(--txt-lg)}
.login-esqueci{font:var(--peso-padrao) var(--txt-sm) var(--familia-texto),sans-serif}
/* ===== o cartão da TROCA OBRIGATÓRIA (17.0.0) =====
   É o MESMO cartão do login, com outro conteúdo: quem chega aqui acabou de
   digitar a senha provisória e ainda não entrou no sistema. Uma tela nova,
   com barra lateral e topo, prometeria um sistema que a pessoa ainda não
   alcança — e teria de esconder tudo de novo. */
.login-aviso{display:flex;gap:var(--esp-2);padding:var(--esp-3);border-radius:var(--raio-2);
  background:var(--al-bg);color:var(--al);
  font:var(--peso-padrao) var(--txt-sm)/1.5 var(--familia-texto),sans-serif}
.login-aviso .ic{flex:none;display:grid;margin-top:2px}
/* os requisitos: cinza enquanto faltam, verdes quando cumpridos. É uma LISTA
   viva, não uma frase de erro depois do envio — a pessoa vê o que falta
   enquanto digita, e não descobre ao apertar o botão. */
.login-req{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--esp-1)}
.login-req li{display:flex;align-items:center;gap:var(--esp-2);color:var(--txt2);
  font:var(--peso-padrao) var(--txt-sm) var(--familia-texto),sans-serif}
.login-req li .ic{flex:none;display:grid;color:var(--txt3)}
.login-req li.ok{color:var(--ok)}
.login-req li.ok .ic{color:var(--ok)}
/* NO CELULAR A MARCA VIRA FAIXA, E NÃO SOME.
   Ela era `display:none` abaixo de 860px, com o motivo escrito: o painel de
   42% da largura viraria uma tela inteira de degradê e empurraria o formulário
   para baixo da dobra. O motivo estava certo; a conclusão, não. O que sobrava
   era um cartão branco no meio do nada — sem logo, sem uma palavra dizendo de
   que sistema é a senha que se está digitando, e sem o botão de tema, que é
   justamente onde ele mais serve: quem abre o sistema no celular à noite.

   **A FAIXA LEVA SÓ O QUE É MARCA; O QUE É DESCRIÇÃO DESCE PARA O RODAPÉ.**
   Em cima ficam o logo, o manifesto e o botão de tema — o que a pessoa precisa
   ver antes de digitar a senha. A linha de apoio ("gestão de ordens de
   serviço, clientes...") e a versão do sistema são **legenda**: quem abre o
   login já sabe onde está, e as duas empurravam o primeiro campo para baixo
   por informação que ninguém lê antes de entrar. No pé elas continuam
   inteiras, e a versão continua declarada, que é o que o padrão exige.

   COMO isso é feito sem duplicar markup: a página vira uma GRADE, `.login-marca`
   e os dois blocos internos viram `display:contents` — os quatro pedaços passam
   a ser itens da grade da PÁGINA —, e o degradê vira um `::before` que ocupa as
   duas primeiras fileiras e sangra até as bordas. Markup igual nas duas
   larguras é o que impede a tela de login de virar duas telas de login. */
@media(max-width:860px){
  main.login{display:grid;height:auto;min-height:var(--vp-h);
    grid-template-columns:1fr auto;align-content:start;
    padding:0 var(--login-pad-mobile-x)}
  /* a faixa. Pseudo-elemento porque não existe (nem deve existir) um elemento
     só para o fundo: ele ocupa as duas primeiras fileiras, sangra para fora do
     recuo da página pelas margens negativas, e por vir primeiro na ordem fica
     por baixo dos itens sem precisar de z-index. */
  main.login::before{content:'';grid-column:1 / -1;grid-row:1 / 3;
    margin:0 calc(-1 * var(--login-pad-mobile-x));
    /* O MESMO degradê do painel largo, pela mesma variável. Pseudo-elemento
       não recebe classe, então o componente não alcança aqui — o que alcança
       é o valor, declarado uma vez em `--deg-marca-fundo`. Duas escritas do
       mesmo degradê é como as duas larguras começam a divergir. */
    background:var(--deg-marca-fundo)}
  .login-marca,.login-texto,.login-rodape{display:contents}
  .login-logo{grid-column:1;grid-row:1;align-self:center;
    margin:var(--login-faixa-cima) 0 var(--esp-4)}
  .login-tema{grid-column:2;grid-row:1;align-self:center;justify-self:end;
    margin:var(--login-faixa-cima) 0 var(--esp-4)}
  /* o manifesto MANTÉM as três linhas: elas são o desenho da frase, e tirar as
     quebras por CSS cola as sentenças sem espaço ("Um sistema.Uma cara.") —
     `br{display:none}` não deixa espaço nenhum no lugar. O que encolhe é o
     corpo. A margem de baixo é o recuo inferior da faixa: ela mora dentro da
     fileira, e é o que o `::before` cobre. */
  .login-manifesto{grid-column:1 / -1;grid-row:2;
    font-size:var(--tit-lg);line-height:1.15;margin-bottom:var(--login-faixa-baixo)}
  .login-lado{grid-column:1 / -1;grid-row:3;flex:none;align-items:flex-start;
    padding:var(--esp-6) 0 var(--esp-5)}
  /* NO PÉ, FORA DO DEGRADÊ, AS CORES SÃO AS DO TEMA. `--login-txt2` e
     `--login-txt3` são claros de propósito: eles existem para o painel escuro
     da marca, que é escuro nos dois temas. Sobre o fundo da página, no tema
     claro, seriam texto branco sobre branco. */
  .login-sub{grid-column:1 / -1;grid-row:4;
    font-size:var(--txt-sm);max-width:none;color:var(--txt2)}
  .login-versao{grid-column:1 / -1;grid-row:5;color:var(--txt3);
    margin-bottom:var(--esp-6)}
  /* sem moldura nem sombra: a faixa acima já separa a marca do formulário, e
     um cartão dentro de uma tela do tamanho do cartão é uma borda em volta da
     borda da tela */
  .login-cartao{width:100%;max-width:var(--login-cartao-l);
    padding:0;background:transparent;border:none;box-shadow:none}
  /* sem cartão não há borda para sangrar: a faixa vira uma caixa própria */
  .login-portas{margin:var(--esp-2) 0 0;border:1px solid var(--borda);border-radius:var(--raio-4)}
}
/* >>> LOGIN — FIM DO BLOCO 1 (ESTILO) <<< */

.shell{display:flex;height:var(--vp-h);padding-left:var(--sb-reserva);
  transition:padding-left var(--dur-2) var(--ease-saida)}
/* ===== o movimento da barra =====
   Entrada mais longa que a saida (--dur-3 contra --dur-2): entrar e um
   convite e pode ter tempo; sair e tirar da frente, e demora incomoda.
   E a mesma regua do resto do sistema — a saida sempre mais rapida.
   So `transform` e `box-shadow` animam. Largura NAO entra na transicao de
   revelar: animar width recalcula layout a cada quadro. */
nav.lateral{position:fixed;left:0;top:0;z-index:60;width:var(--sb-larg);height:var(--vp-h);
  background:var(--sup);border-right:1px solid var(--borda);display:flex;flex-direction:column;
  /* a barra RECORTA o que ela ainda não tem largura para mostrar: é isso que
     deixa o rótulo aparecer de dentro da barra em vez de estourar para fora
     dela enquanto a largura cresce */
  overflow:hidden;will-change:transform;
  transition:width var(--dur-2) var(--ease-saida),
             transform var(--dur-2) var(--ease-saida),
             box-shadow var(--dur-2) linear}
#shell[data-sb="completa"]{--sb-reserva:var(--sidebar);--sb-larg:var(--sidebar)}
#shell[data-sb="icones"]{--sb-reserva:var(--sb-larg-rail);--sb-larg:var(--sb-larg-rail)}
#shell[data-sb="oculta"]{--sb-reserva:var(--sb-reserva-oculta);--sb-larg:var(--sidebar)}
#shell[data-sb="oculta"] nav.lateral{transform:translateX(-100%);box-shadow:none}
/* revelada pelo mouse ou pelo foco do teclado — a curva de ENTRADA e outra:
   sai rapido do repouso e chega devagar, que e o que faz parecer que a barra
   "assenta" no lugar em vez de bater nele */
/* REVELADA, ela vira peça de vidro — e ENCAIXADA, não. É a mesma barra, e o
   que muda é a situação: encaixada ela é coluna da grade e não passa nada por
   trás dela; revelada ela flutua sobre o conteúdo, que continua ali embaixo.
   O vidro entra no ESTADO, nunca no componente, e é essa a forma certa de
   fazer a pergunta em qualquer peça nova: "tem alguma coisa passando por trás
   dela AGORA?" */
#shell.sb-revelada nav.lateral{transform:none;box-shadow:var(--sombra-2);
  transition:width var(--dur-3) var(--ease),
             transform var(--dur-3) var(--ease),
             box-shadow var(--dur-3) linear}

/* ===== a barra que ABRE: o conteúdo dela entra atrás da largura =====
   O defeito era de tempo, não de curva. A largura levava --dur-3 para ir de
   --sb-larg-rail a --sidebar, e o rótulo aparecia no primeiro quadro, dentro
   de uma barra que ainda tinha a largura do rail: a palavra nascia cortada,
   estourava para fora e só então a barra a alcançava. Ninguém consegue
   apontar o que está errado, mas a abertura fica barata.

   Agora a barra abre primeiro e o conteúdo entra atrás dela, deslizando o
   mesmíssimo pouco (--esp-2) que a largura andou — o rótulo parece ter vindo
   de dentro da barra, e não ter sido revelado por baixo dela.

   É animação de ENTRADA, e animação de entrada é para ENTRAR: a classe entra
   com a abertura e sai sozinha ao fim dela. Sem isso o menu inteiro piscaria
   a cada troca de tela, que é quando ele se redesenha. */
@keyframes navConteudoEntra{
  from{opacity:0;transform:translateX(calc(-1 * var(--esp-2)))}
  to{opacity:1;transform:none}
}
#shell.sb-abrindo .nav-item .txt,
#shell.sb-abrindo .nav-item .qtd,
#shell.sb-abrindo .nav-topico span,
#shell.sb-abrindo .nav-rodape .info,
#shell.sb-abrindo .nav-rodape .acao{
  animation:navConteudoEntra var(--dur-2) var(--ease) var(--dur-1) both}
/* o logo troca de desenho no meio do caminho (símbolo no rail, marca inteira
   na barra aberta). Trocar sem transição é um salto de tamanho no meio de um
   movimento suave — o fade cobre a troca sem chamar atenção para ela. */
#shell.sb-abrindo .nav-topo .logo{animation:navConteudoEntra var(--dur-3) var(--ease) both}

/* ===== o conteudo sai da frente, e CABE =====
   A reserva do fluxo cresce junto com a barra: o conteudo se reacomoda no
   espaco que sobra. Nada e cortado — nem a ultima coluna da tabela, nem o
   cartao da ponta.

   A primeira versao disto deslocava o conteudo por `transform`, que e mais
   fluido e nao recalcula layout. Mas deslocar nao e caber: a borda direita
   saia da tela, levando junto a coluna Valor e o cartao da ponta. Fluidez
   nao paga sumir com informacao — e o conteudo cabendo e o requisito, a
   suavidade e o desejavel.

   O custo assumido: `padding-left` recalcula layout durante a transicao, e
   uma tabela muito longa pode engasgar em maquina fraca. Se um dia isso
   incomodar, o caminho NAO e voltar ao transform — e reduzir o que se
   reacomoda (virtualizar a tabela), porque o problema seria o tamanho da
   lista, nao a animacao. */
.shell{transition:padding-left var(--dur-3) var(--ease)}
/* Uma regra so, sem caso a caso: revelada, a reserva do fluxo E a largura
   desenhada. A versao anterior listava so `[data-sb="oculta"]` e esquecia a
   barra dinamica em repouso `icones` abrindo para `completa` — que e o modo
   mais usado. Resultado: reserva parada em 68px com a barra desenhando 242px,
   e 174px de conteudo por baixo dela. Caso a caso e onde some um caso. */
#shell.sb-revelada{--sb-reserva:var(--sb-larg)}
#shell.sb-revelada[data-sb-revela="icones"]{--sb-larg:var(--sb-larg-rail)}
#shell.sb-revelada[data-sb-revela="completa"]{--sb-larg:var(--sidebar)}
/* zona quente: a faixa da borda esquerda que traz de volta a barra oculta.
   Sem ela, "oculta" viraria uma barra impossível de achar. */
.sb-borda{position:fixed;left:0;top:0;width:var(--sb-borda);height:var(--vp-h);z-index:59;display:none}
.sb-borda::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--borda);
  opacity:0;transition:opacity var(--dur-2) var(--ease)}
.sb-borda:hover::before{opacity:1;background:var(--nav-ativo)}
#shell[data-sb="oculta"] .sb-borda{display:block}
.nav-topo{height:var(--topo);flex:none;display:flex;align-items:center;
  padding:0 14px 0 18px;border-bottom:1px solid var(--borda)}
/* No rail o cabeçalho leva SÓ o símbolo, centrado. A altura continua --topo
   porque é ela que alinha o filete da barra com o do topo da página, e esse
   alinhamento é do desenho do casco. */
.rail .nav-topo{justify-content:center;padding:0 var(--esp-1)}
/* O botão de recolher: no canto do topo quando a barra está inteira, e uma
   linha ABAIXO do símbolo quando ela é rail. Posicionado num caso, empilhado
   no outro — o mesmo botão, sem duplicata no markup. */
.nav-acao{position:absolute;top:0;right:14px;height:var(--topo);display:flex;align-items:center;z-index:1}
.rail .nav-acao{position:static;height:auto;display:flex;justify-content:center;
  padding:var(--esp-2) 0 0}
/* ===== O ENVELOPE DA MARCA =====
   A caixa é do SISTEMA; o que entra nela é da marca. Um sistema com logo
   próprio continua parecendo um sistema BCM porque a moldura não muda: a
   mesma caixa, o mesmo respiro, o mesmo alinhamento, a mesma altura de topo.
   Sem isso, cada produto chega com a proporção do arquivo que alguém mandou e
   o shell passa a ter um cabeçalho diferente por sistema.

   `object-fit:contain` é o que garante que NUNCA se estica: o arquivo se
   ajusta à caixa mantendo a proporção dele, e o que sobra é ar. A alternativa
   — deixar largura e altura mandarem no desenho — é a deformação que a regra
   `logo-fora-da-medida` existe para pegar, só que ela pega o CSS e não pega o
   arquivo. Aqui o desenho não tem como deformar.

   O respiro (`--logo-respiro`) é intocável: é a distância mínima entre o logo e
   qualquer outra coisa. Marca encostada em botão é o que faz um cabeçalho
   parecer montado às pressas, e é o primeiro detalhe que se perde quando o
   logo do produto é mais largo que o da BCM. */
.nav-topo .logo,.login-logo,#cab-impressao .logo-imp{object-fit:contain;object-position:left center}
.nav-topo .logo{width:var(--logo-sidebar-l);height:var(--logo-sidebar-a);display:block;
  margin-right:var(--logo-respiro)}
/* o símbolo no rail é quadrado e centrado: ali não há largura para respiro
   lateral, e o que faz as vezes dele é o recuo do próprio topo */
.rail .nav-topo .logo{margin-right:0;object-position:center}
/* O BOTÃO DE RECOLHER — e o seletor que nunca casou (10.0.0).
   A regra aqui era `.nav-topo #btn-rail`, e o botão NÃO está dentro do
   `.nav-topo`: ele vive no `.nav-acao`, que é posicionado por cima do topo.
   O seletor nunca casou com nada; o botão ficava com o `.btn-ic` inteiro —
   36px, fundo `--sup2` — e `--sup2` sobre a barra `--sup` é quase a mesma
   cor: o botão sumia. Regra que não casa é pior que regra ausente, porque
   quem lê o CSS acha que a medida está resolvida.

   Agora ele é menor que o `.btn-ic` das barras (divide o topo com a marca) e
   se enxerga em repouso: superfície MAIS a borda. Botão que só aparece no
   hover é botão que quem não passa o mouse nunca descobre. */
.nav-acao #btn-rail{width:28px;height:28px;flex:none;border-radius:var(--raio-3);
  background:var(--sup2);border:1px solid var(--borda);color:var(--txt2)}
.nav-acao #btn-rail:hover{background:var(--hover);border-color:var(--borda-ctrl);color:var(--txt)}
.nav-acao #btn-rail:active{transform:scale(.94)}
#chevron-rail{transition:transform var(--dur-2)}
.rail .nav-topo .logo{width:var(--logo-rail-l);height:var(--logo-rail-a);flex:none}
.nav-corpo{flex:1;min-height:0;padding:10px 0 var(--esp-3)}
/* Aba solta e aba recolhível são a MESMA coisa na lista: o espaço entre elas
   é o mesmo de duas abas quaisquer (2px). O respiro maior é do tópico — ele é
   quem separa blocos. Aqui havia 16px sobrando de quando o grupo era um bloco
   rotulado, e isso abria um vão sem significado no meio da lista. */
.nav-grupo{display:flex;flex-direction:column;gap:var(--nav-entre-abas);padding:0 var(--nav-topico-lados);margin-top:var(--nav-entre-abas)}
.rail .nav-grupo{padding:0 var(--esp-3)}
/* aba solta: tela que não pertence a grupo nenhum, sempre visível */
.nav-solta{padding:0 14px;margin-top:2px}
.rail .nav-solta{padding:0 var(--esp-3)}
/* A ALTURA DO ITEM É O TOKEN. Até a 8.0.0 ela saía do padding somado à caixa
   do ícone (40px) enquanto --item-menu-alt dizia 38 — e um sistema que seguiu
   o token ao pé da letra ficou com cada linha do menu 2px mais baixa. Agora a
   medida mora num lugar só, e a regra `token-de-medida-morto` pega o próximo. */
.nav-item{display:flex;align-items:center;gap:11px;width:100%;border:none;font:var(--peso-padrao) var(--txt-md) var(--familia-texto),sans-serif;
  min-height:var(--item-menu-alt);padding:0 10px;border-radius:var(--raio-3);cursor:pointer;text-align:left;background:transparent;color:var(--txt2);
  transition:background var(--dur-1),color var(--dur-1)}
/* O ITEM NO RAIL É UM QUADRADO, e não o retângulo do menu inteiro com o
   rótulo escondido. Sem largura para o texto, o retângulo virava um bloco
   azul apertado no ícone: a marca do item ativo ficava do tamanho do símbolo
   e lia como pastilha, não como "você está aqui". O quadrado dá ao ícone a
   mesma folga nos quatro lados e devolve corpo à marca — o desenho continua
   sendo o MESMO da barra inteira (fundo sólido --nav-ativo, um azul só no
   menu), o que muda é a proporção da caixa. */
.rail .nav-item{width:var(--nav-rail-item);height:var(--nav-rail-item);padding:0;
  margin-inline:auto;justify-content:center;border-radius:var(--raio-3)}
/* e o respiro entre eles cresce: sem rótulo separando as linhas, dois pixels
   deixavam a coluna de ícones parecendo uma fita contínua */
.rail .nav-grupo,.rail .nav-solta,.rail .nav-sub{gap:var(--nav-rail-entre)}
.rail .nav-solta{margin-top:var(--nav-rail-entre)}
/* NO RAIL NÃO EXISTE HIERARQUIA PARA MOSTRAR: sem rótulo, aba e subaba são o
   mesmo ícone, e o que separava as duas na barra inteira — o recuo, a altura
   menor, a caixa de ícone menor — aqui só desalinha a coluna. Era isso que
   fazia uns itens caírem mais para um lado que os outros. As duas viram o
   MESMO quadrado. */
.rail .nav-sub .nav-item{width:var(--nav-rail-item);height:var(--nav-rail-item);
  min-height:0;padding:0;font-size:inherit}
.rail .nav-sub .nav-item .ic{width:var(--item-menu-caixa);height:var(--item-menu-caixa)}
.rail .nav-sub .nav-item .ic svg{width:var(--item-menu-icone);height:var(--item-menu-icone)}
/* A BARRA DE ROLAGEM GANHA CALHA PRÓPRIA. Ela flutua sobre o conteúdo — que é
   o certo numa tela larga, onde ela some no canto — mas em sessenta e oito
   pixels ela passa por cima dos ícones. Aqui o corpo do menu recua dos DOIS
   lados na largura dela: a barra fica na calha da direita e a coluna de
   ícones continua centrada na barra, alinhada com o símbolo lá em cima. */
.rail .nav-corpo{padding-inline:var(--rol-larg)}
.rail .nav-grupo,.rail .nav-solta{padding-inline:0}
.nav-item:hover{background:var(--hover)}
.nav-item.ativo{background:var(--nav-ativo);color:var(--nav-ativo-txt);font-weight:700;
  background-image:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,0))} /* bcm-ok: brilho de topo do item ativo — branco COMPOSTO sobre --nav-ativo, não é cor de paleta */
.nav-item .ic{display:flex;align-items:center;justify-content:center;width:var(--item-menu-caixa);height:var(--item-menu-caixa);flex:none;color:inherit}
/* o TAMANHO e o TRAÇO do ícone do menu são do CSS, não do atributo do <svg>:
   o casco numa outra stack escreve o ícone do jeito que der, e o desenho sai
   igual mesmo assim */
.nav-item .ic svg{width:var(--item-menu-icone);height:var(--item-menu-icone);stroke-width:var(--traco-menu)}
.nav-item .txt{flex:1;text-align:left;white-space:nowrap;overflow:hidden}
.rail .nav-item .txt{display:none}
.nav-item .qtd{font:800 var(--txt-xs) Mulish,sans-serif;font-variant-numeric:tabular-nums;padding:2px 7px;
  border-radius:var(--raio-3);background:var(--sup2);color:var(--txt2);border:1px solid var(--borda);flex:none}
.nav-item.ativo .qtd{background:var(--nav-ativo-qtd);color:var(--nav-ativo-txt);border:none}
.rail .nav-item .qtd{display:none}
/* ===== três papéis, três desenhos =====
     TÓPICO  — divisória com nome. O único texto em CAIXA ALTA do menu, na
               cor cheia, com a linha de divisão em cima.
     ABA     — o item normal. A aba recolhível tem EXATAMENTE o mesmo desenho
               e o mesmo tamanho de qualquer outra: ela só ganha o chevron.
               Aba é aba; o que muda é ela abrir ou levar a uma tela.
     SUBABA  — item de dentro de uma aba recolhível: menor, mais apagado e
               recuado. É o recuo somado ao peso menor que diz "isto está
               dentro daquilo" sem precisar de guia, filete ou moldura.
   E continua valendo: azul sólido = você está aqui, e é o único azul. */
.nav-grupo-btn{cursor:pointer}
.nav-grupo-btn .chv{flex:none;width:var(--nav-chevron);height:var(--nav-chevron);color:var(--txt2);opacity:.55;transition:transform var(--dur-2) var(--ease)}
.nav-grupo-btn[aria-expanded="true"] .chv{transform:rotate(180deg)}

/* a aba recolhível que contém a tela atual escurece o texto — discreto de
   propósito: o azul da subaba já respondeu onde a pessoa está */
.nav-grupo-btn.tem-ativo{color:var(--txt)}

/* ...mas se ela estiver FECHADA, a subaba azul está escondida, e sem isto o
   menu não responde mais onde a pessoa está. O azul sobe para a aba: continua
   sendo um só na tela, só que um degrau acima. */
.nav-grupo-btn.tem-ativo.fechada{background:var(--nav-ativo);color:var(--nav-ativo-txt);font-weight:700}
.nav-grupo-btn.tem-ativo.fechada .chv{color:var(--nav-ativo-txt);opacity:.85}
.nav-grupo-btn.tem-ativo.fechada .qtd{background:var(--nav-ativo-qtd);color:var(--nav-ativo-txt);border:none}

/* subaba: um degrau para dentro e um degrau abaixo em peso */
.nav-sub{display:flex;flex-direction:column;gap:var(--nav-entre-abas);overflow:hidden;padding-left:var(--nav-sub-recuo)}
/* a cor da subaba vem de token, nunca de opacity — .85 sobre --txt2 caia
   abaixo de 4,5:1 e ninguem via acontecer */
.nav-sub .nav-item{font:var(--peso-padrao) var(--txt-sm) var(--familia-texto),sans-serif;
  padding:0 10px;min-height:var(--nav-sub-alt);color:var(--txt3)}
.nav-sub .nav-item .ic{width:var(--nav-sub-caixa);height:var(--nav-sub-caixa)}
.nav-sub .nav-item .ic svg{width:var(--nav-sub-icone);height:var(--nav-sub-icone)}
.nav-sub .nav-item:hover{color:var(--txt)}
.nav-sub .nav-item.ativo{color:var(--nav-ativo-txt)}

.rail .nav-grupo-btn{display:none}
.rail .nav-sub{padding-left:0}
.nav-rodape{flex:none;display:flex;align-items:center;gap:var(--esp-1);padding:10px 14px;border-top:1px solid var(--borda)}
.rail .nav-rodape{justify-content:center;padding:10px;gap:0}
/* ===== a conta fica JUNTO DO USUÁRIO =====
   Meu perfil e Preferências são do dono da sessão, e o dono da sessão está no
   rodapé. Pendurá-los no menu misturava o que é da pessoa com o que é da
   empresa — ninguém procura o próprio tema numa seção chamada Administração.

   O desenho tem três peças e uma regra: a IDENTIDADE (avatar + nome) e as
   AÇÕES (configurar, sair) não competem. A identidade é o alvo grande, sem
   moldura; as ações são dois botões de ícone iguais entre si, encostados à
   direita. Enfiar um ícone dentro do bloco do nome, como na 3.11, espremia o
   nome até reticências e deixava dois ícones com desenhos diferentes lado a
   lado — daí o ar de remendo. */
.nav-conta{flex:1;min-width:0;display:flex;align-items:center;gap:10px;background:transparent;
  border:none;cursor:pointer;text-align:left;padding:5px 6px;border-radius:var(--raio-3);color:inherit;
  transition:background var(--dur-1),color var(--dur-1)}
.nav-conta:hover{background:var(--hover)}
.nav-conta.ativo{background:var(--nav-ativo);color:var(--nav-ativo-txt)}
.nav-conta.ativo #nav-nome,.nav-conta.ativo #nav-cargo{color:var(--nav-ativo-txt)}
/* anel claro para o avatar não encostar direto no azul do estado ativo */
.nav-conta.ativo .ini{box-shadow:0 0 0 2px color-mix(in srgb,var(--nav-ativo-txt) 40%,transparent)}
.rail .nav-conta{flex:none;padding:var(--esp-1)}
/* as duas ações do rodapé: mesmo tamanho, mesmo raio, mesma cor de repouso.
   O que as diferencia é só o hover — azul para configurar, vermelho para sair. */
.nav-rodape .acao{width:var(--nav-acao);height:var(--nav-acao);display:flex;align-items:center;justify-content:center;border:none;
  background:transparent;color:var(--txt2);cursor:pointer;border-radius:var(--raio-2);flex:none;
  transition:background var(--dur-1),color var(--dur-1)}
.nav-rodape .acao:hover{background:var(--hover);color:var(--txt)}
.nav-rodape .sair:hover{background:var(--err-bg);color:var(--err)}
.nav-rodape .ini{width:var(--av-shell);height:var(--av-shell);border-radius:50%;background:var(--prim);color:var(--prim-txt);
  display:flex;align-items:center;justify-content:center;font:800 var(--txt-xs) Mulish,sans-serif;flex:none}
.nav-rodape .info{flex:1;min-width:0;display:block;line-height:1.3}
#nav-nome{font:700 var(--txt-sm) Mulish,sans-serif;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#nav-cargo{font:600 var(--nav-topico-txt) Mulish,sans-serif;color:var(--txt2);display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-conta.ativo #nav-cargo{color:var(--nav-ativo-txt)}
.rail .nav-rodape .info,.rail .nav-rodape .acao{display:none}
.principal{flex:1;min-width:0;min-height:0;display:flex;flex-direction:column}
header.topo{height:var(--topo);flex:none;display:flex;align-items:center;gap:var(--esp-4);padding:0 var(--esp-5);background:var(--sup);
  border-bottom:1px solid var(--borda);position:sticky;top:0;z-index:40}
/* "onde estou": a seção em cima, a tela embaixo. Com menu recolhível o
   grupo pode estar fechado — sem esta linha, some a referência. */
/* ELA ENCOLHE (17.0.0). Era `flex:none`, e com um título comprido — o de
   uma tarefa aberta em tela cheia — a caixa empurrava a busca, o sino e o
   avatar para fora da barra no celular. Encolhendo, quem perde largura é o
   título, que já termina em reticência; os controles ficam onde estão. */
.topo-onde{display:flex;flex-direction:column;justify-content:center;flex:0 1 auto;min-width:0}
.topo-secao{font:var(--peso-numeros) var(--txt-grupo) var(--familia-texto),sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--prim);line-height:1.1;margin-bottom:1px}
.topo-secao:empty{display:none}
/* ===== A TRILHA DO TOPO (17.0.0) =====
   O rótulo de cima dizia o GRUPO do menu, e só. Numa tela CHEIA de um
   registro — uma tarefa aberta pelo endereço dela — ele passa a dizer o
   caminho inteiro, GESTÃO › MINHAS TAREFAS › TAREFA 1, com o penúltimo
   clicável: é o degrau de volta, e ele responde "onde isto mora", que é
   outra pergunta de "de onde eu vim" (essa quem responde é o botão Voltar,
   acima do cartão).

   No celular sobra SÓ o penúltimo, com a seta: três níveis em 390px viram
   uma linha ilegível, e o degrau de volta é o que serve para o dedo. É por
   isso que a trilha aparece no celular, onde o rótulo simples continua
   escondido — um nome de grupo não leva a lugar nenhum; a trilha, sim. */
.topo-secao .tri{display:inline-flex;align-items:center;gap:var(--esp-1);max-width:100%}
.topo-secao .tri-sep{color:var(--txt3);flex:none}
.topo-secao .tri-item{border:none;background:transparent;padding:0;color:inherit;font:inherit;
  letter-spacing:inherit;text-transform:inherit;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.topo-secao button.tri-item{cursor:pointer}
.topo-secao button.tri-item:hover{text-decoration:none;color:var(--txt)}
.topo-secao button.tri-item:focus-visible{outline:none;box-shadow:var(--anel);border-radius:var(--raio-0)}
.topo-secao .tri-atual{color:var(--txt3)}
.topo-secao .tri-seta{display:none;align-items:center;flex:none}
@media(max-width:900px){
  .topo-secao.tem-trilha{display:block}
  .topo-secao.tem-trilha .tri > *:not(.tri-volta){display:none}
  .topo-secao.tem-trilha .tri-seta{display:inline-flex}
}
/* e um <h1>: cada tela tem UM titulo de primeiro nivel, e ele e este.
   O visual nao muda — so a tag, que e o que o leitor de tela usa para
   responder "que tela e esta". */
.topo-tit{font:var(--peso-apoio) var(--tit-lg) var(--familia-titulo),sans-serif;letter-spacing:.03em;line-height:1;
  margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.avatar-topo{width:var(--av-topo);height:var(--av-topo);border-radius:50%;background:var(--prim-suave);color:var(--prim);
  display:flex;align-items:center;justify-content:center;font:800 var(--txt-xs) Mulish,sans-serif;flex:none;
  border:none;padding:0;cursor:pointer;transition:box-shadow var(--dur-1)}
.avatar-topo:hover,.avatar-topo.ativo{box-shadow:0 0 0 2px var(--nav-ativo)}
main{flex:1;min-height:0;padding:var(--main-padding)}
.miolo{max-width:var(--conteudo-max);margin:0 auto;display:flex;flex-direction:column;gap:var(--esp-5)}
.tela{display:flex;flex-direction:column;gap:var(--esp-5)}
.filtros-linha{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.presets{display:flex;border:1px solid var(--borda-ctrl);border-radius:var(--raio-2);overflow:hidden;background:var(--sup)}
.presets button{height:36px;padding:0 var(--esp-4);border:none;cursor:pointer;font:700 var(--txt-sm) Mulish,sans-serif;
  background:transparent;color:var(--txt2)}
.presets button+button{border-left:1px solid var(--borda-ctrl)}
.presets button.ativo{background:var(--nav-ativo);color:var(--nav-ativo-txt)}
.presets button[disabled]{color:var(--desab);opacity:1;cursor:not-allowed}
/* o botão que limpa o recorte do dashboard: é uma ação de filtro, não a ação
   principal da tela — tem o corpo de um controle pequeno e o par suave */
/* A BARRA DO PAINEL (18.0.0, estudo 3A) */
.painel-filtros{display:flex;flex-direction:column;gap:var(--esp-2)}
.painel-acoes{display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap}
.painel-recorte{margin:0;display:flex;align-items:center;gap:var(--esp-2);color:var(--txt2);
  font:var(--peso-padrao) var(--txt-sm) var(--familia-texto),sans-serif}
.painel-recorte svg{flex:none}
.grade-kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:var(--esp-4)}
.kpi{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:18px 20px;background:var(--sup);
  border:1px solid var(--borda);border-radius:var(--raio-4);box-shadow:var(--sombra);cursor:pointer;text-align:left;
  font:inherit;color:inherit;transition:transform var(--dur-1),border-color var(--dur-1),box-shadow var(--dur-1);width:100%}
.kpi:hover{border-color:var(--prim);transform:translateY(-1px);box-shadow:var(--sombra-h)}
.kpi.ativo{border-color:var(--prim);box-shadow:0 0 0 1px var(--prim),var(--sombra)}
.kpi-topo{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-2);width:100%}
.kpi-nome{font:700 var(--txt-xs) Mulish,sans-serif;color:var(--txt2);letter-spacing:.03em;text-transform:uppercase}
.kpi-delta{font:800 var(--txt-xs) Mulish,sans-serif;font-variant-numeric:tabular-nums;padding:3px var(--esp-2);border-radius:var(--raio-4);
  box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 20%,transparent);
  background:var(--ok-bg);color:var(--ok)}
.kpi-delta.neg{background:var(--err-bg);color:var(--err)}
.kpi-valor{font:800 var(--tit-2xl)/1 Mulish,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.grade-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--esp-4)}
.painel-graf{min-width:0;background:var(--sup);border:1px solid var(--borda);border-radius:var(--raio-4);padding:20px var(--esp-5);
  box-shadow:var(--sombra);display:flex;flex-direction:column;gap:14px}
.cab-graf{display:flex;align-items:baseline;justify-content:space-between;gap:var(--esp-3)}
/* AS BARRAS OCUPAM O CARTÃO. Elas dividem a linha com o gráfico, e num grid
   os dois cartões têm a MESMA altura — a do mais alto. Com as barras
   empilhadas no topo, sobravam quase cem pixels de nada embaixo, que é o
   "espaço vazio feio" de sempre: não é o cartão que está grande, é o conteúdo
   que não foi distribuído. `flex:1` mais `space-between` fazem as barras
   respirarem até o pé do cartão, e isso vale para 3 status ou para 8. */
.barras-status{display:flex;flex-direction:column;gap:10px;flex:1;justify-content:space-between}
.barra-status{display:grid;grid-template-columns:128px 1fr 28px;align-items:center;gap:var(--esp-3);border:none;
  background:transparent;padding:7px 10px;border-radius:var(--raio-2);cursor:pointer;color:inherit;width:100%;
  font:600 var(--txt-sm) Mulish,sans-serif;transition:background var(--dur-1)}
.barra-status:hover{background:var(--hover)}
.barra-status.ativo{background:var(--prim-suave)}
.barra-status .trilho{height:10px;border-radius:var(--raio-0);background:var(--sup2);overflow:hidden;display:block}
.barra-status .fill{display:block;height:100%;border-radius:var(--raio-0);opacity:.95;transition:width var(--dur-3)}
.barra-status .qtd{font:800 var(--txt-sm) Mulish,sans-serif;font-variant-numeric:tabular-nums;text-align:right}
.cab-painel{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3);padding:var(--esp-4) var(--esp-5);
  border-bottom:1px solid var(--borda);flex-wrap:wrap}
/* A DICA DO GRÁFICO É A DO COMPONENTE (`#graf-dica`, logo abaixo). Aqui
   existiam sete regras de um `#fat-tip` próprio, do tempo em que o
   Dashboard desenhava o gráfico à mão. Saíram com ele. */
/* >>> GRÁFICOS — INÍCIO DO BLOCO 1 (ESTILO) <<< */
/* =====================================================================
   O GRÁFICO — o componente (10.0.0)
   =====================================================================
   O padrão não tinha componente de gráfico, e todo projeto escrevia o seu:
   um deles desenhou <rect class="zona"> para a área de passar o mouse, sem
   CSS nenhum para essa classe — e SVG sem `fill` NASCE PRETO. O painel abriu
   com um retângulo preto em cima do gráfico, e nada acusou.

   Estas classes são o desenho; o motor está em `padrao-bcm/graficos.js`, que
   as escreve. Gráfico novo, que não está no componente, se desenha COM ELAS —
   é isso que mantém eixo, grade, dica e legenda iguais em todo sistema BCM.
   Um gráfico do padrão não tem 3D, não tem gradiente vibrante, não tem sombra
   e não passa de seis séries (references/graficos.md). */
.graf{min-width:0;display:flex;flex-direction:column;gap:var(--esp-3)}
/* a altura sai inline, do `--graf-alt` em pixel: ver a nota no componente */
.graf-svg{display:block;width:100%;overflow:hidden}
/* TODO texto do gráfico é --txt2 e a escala pequena: o número que importa
   está no cartão, não no eixo */
.graf-svg text{fill:var(--txt2);font:var(--peso-padrao) var(--txt-xs) var(--familia-texto),sans-serif}
.graf-svg .forte{fill:var(--txt);font-weight:var(--peso-numeros)}
.graf-grade{stroke:var(--borda);stroke-width:1;shape-rendering:crispEdges}
.graf-grade.zero{stroke:var(--borda-ctrl)}
.graf-barra{fill:var(--graf-1);transition:opacity var(--dur-1)}
.graf-barra:hover{opacity:.82}
.graf-linha{fill:none;stroke:var(--graf-1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.graf-area{stroke:none;fill:var(--graf-1);opacity:var(--area-op)}
.graf-ponto{fill:var(--graf-1);stroke:var(--sup);stroke-width:1.5}
/* A ZONA É INVISÍVEL DE PROPÓSITO — e é justamente ela que ficava preta.
   Nunca troque por `fill:none`: sem preenchimento a área não recebe o
   ponteiro, e a dica do gráfico para de aparecer. */
.graf-zona{fill:transparent;cursor:crosshair}
.graf-guia{stroke:var(--borda-ctrl);stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity var(--dur-1)}
.graf-guia.mostra{opacity:1}
/* o trilho da barra horizontal é PREENCHIDO; o da rosca é TRAÇO. Eram a
   mesma classe, e a barra saía com contorno em vez de faixa */
.graf-trilho{fill:var(--sup2);stroke:none}
.graf-rosca-trilho{fill:none;stroke:var(--sup2)}
/* o total no miolo da rosca: o tamanho é classe porque o `font:` do
   .graf-svg text zera qualquer font-size posto por atributo */
.graf-svg text.graf-centro{fill:var(--txt);font:var(--peso-numeros) var(--tit-md) var(--familia-texto),sans-serif} /* bcm-ok: a especificidade acompanha a de .graf-svg text — classe sozinha perde para ela e o total voltava ao tamanho do eixo */
.graf-rosca-arco{fill:none;stroke-linecap:butt;transition:opacity var(--dur-1)}
.graf-rosca-arco:hover{opacity:.82}
.graf-legenda{display:flex;flex-wrap:wrap;gap:var(--esp-2) var(--esp-4);
  font:var(--peso-padrao) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--txt2)}
.graf-legenda button{display:inline-flex;align-items:center;gap:6px;border:none;background:transparent;color:inherit;
  cursor:pointer;padding:2px 0;font:inherit;border-radius:var(--raio-0);transition:color var(--dur-1)}
.graf-legenda button:hover{color:var(--txt)}
.graf-legenda button[aria-pressed="false"]{color:var(--desab)}
.graf-legenda button[aria-pressed="false"] i{background:var(--desab)}
.graf-legenda i{width:10px;height:10px;border-radius:var(--raio-0);flex:none;background:var(--graf-1)}
/* O VAZIO DO GRÁFICO NÃO É UM QUADRO EM BRANCO: ele diz o que falta e
   quando o gráfico aparece (references/componentes.md, os sete estados) */
.graf-vazio{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--esp-2);
  min-height:var(--graf-vazio-alt);padding:var(--esp-4);text-align:center;color:var(--txt2);
  border:1px dashed var(--borda);border-radius:var(--raio-3);
  font:var(--peso-padrao) var(--txt-sm) var(--familia-texto),sans-serif}
.graf-vazio .ic{color:var(--txt3)}
/* a dica ACOMPANHA O CURSOR: chapada, da família --tt-*, e nunca com vidro
   (componentes.md, "o que nunca leva vidro") */
#graf-dica{position:fixed;z-index:90;pointer-events:none;display:flex;flex-direction:column;gap:2px;
  background:var(--tt-sup);color:var(--tt-txt);border:1px solid var(--tt-borda);
  border-radius:var(--raio-2);padding:var(--esp-2) var(--esp-3);box-shadow:var(--sombra-2); /* bcm-ok: chapado por dois motivos, e cada um bastaria — ele ACOMPANHA O CURSOR (desfoque recompõe a área de baixo a cada quadro) e é da família --tt-sup, medida e reprovada para vidro */
  font:var(--peso-padrao) var(--txt-xs) var(--familia-texto),sans-serif;white-space:nowrap;
  opacity:0;transition:opacity var(--dur-1)}
#graf-dica.mostra{opacity:1}
#graf-dica b{font:var(--peso-numeros) var(--txt-sm) var(--familia-texto),sans-serif;color:var(--tt-txt)}
#graf-dica .serie{display:flex;align-items:center;gap:6px;color:var(--tt-txt2)}
#graf-dica .serie i{width:8px;height:8px;border-radius:var(--raio-0);flex:none}
#graf-dica .serie .v{margin-left:auto;padding-left:var(--esp-3);color:var(--tt-txt);
  font-weight:var(--peso-numeros);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.graf-barra,.graf-rosca-arco,.graf-guia,#graf-dica{transition:none}}
/* >>> GRÁFICOS — FIM DO BLOCO 1 (ESTILO) <<< */

/* >>> NOTIFICAÇÕES — INÍCIO DO BLOCO 1 (ESTILO) <<< */
/* ===== o SINO e o contador de não lidas =====
   Contador de não lidas usa --err, que já existe nos dois temas: não merece
   cor própria. O ponto fica preso ao canto do botão e some quando zera —
   badge com "0" é ruído que a pessoa aprende a ignorar. */
.sino{position:relative}
.sino .qtd-sino{position:absolute;top:2px;right:2px;min-width:16px;height:16px;
  display:flex;align-items:center;justify-content:center;padding:0 var(--esp-1);
  border-radius:var(--raio-pill);background:var(--err);color:var(--err-txt);
  font:var(--peso-numeros) var(--txt-grupo) var(--familia-texto),sans-serif;
  font-variant-numeric:tabular-nums;pointer-events:none}

/* ===== painel de notificações =====
   No desktop encosta no alto à direita, debaixo do sino; no celular vira
   folha de baixo (ver a media query). É o MESMO <dialog> nos dois. */
dialog.notif{margin:calc(var(--topo) + var(--esp-2)) var(--esp-3) auto auto;
  width:min(380px,calc(var(--vp-w) - var(--modal-margem)));max-width:var(--vp-w);
  max-height:calc(var(--vp-h) - var(--topo) - var(--esp-6))}
dialog.notif[open]{animation:modalIn var(--dur-2) var(--ease)}
.notif-caixa{display:flex;flex-direction:column;padding:0;gap:0;overflow:hidden;max-height:inherit;
  background:var(--sup);border:1px solid var(--borda);border-radius:var(--raio-5);box-shadow:var(--sombra-2)}
.notif-topo{flex:none;display:flex;align-items:center;gap:var(--esp-3);
  padding:var(--esp-3) var(--esp-4);border-bottom:1px solid var(--borda)}
.notif-topo h2{font:var(--peso-apoio) var(--tit-md) var(--familia-titulo),sans-serif;letter-spacing:.04em;flex:1}
.notif-lista{flex:1;min-height:0;display:flex;flex-direction:column}
.notif-item{display:flex;gap:var(--esp-3);align-items:flex-start;text-align:left;width:100%;
  padding:var(--esp-3) var(--esp-4);border:none;border-bottom:1px solid var(--borda);
  background:transparent;color:var(--txt);cursor:pointer;font:inherit}
.notif-item:hover{background:var(--hover)}
.notif-item:focus-visible{outline:2px solid var(--anel-cor);outline-offset:-2px}
.notif-item .pt{flex:none;width:var(--esp-2);height:var(--esp-2);border-radius:50%;
  background:var(--err);margin-top:6px}
.notif-item.lida .pt{background:transparent}
.notif-item .cp{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.notif-item .tt{font:var(--peso-enfase) var(--txt-md) var(--familia-texto),sans-serif}
.notif-item.lida .tt{font-weight:var(--peso-padrao);color:var(--txt2)}
.notif-item .cr{font:var(--peso-apoio) var(--txt-sm) var(--familia-texto),sans-serif;color:var(--txt2)}
.notif-item .qd{font:var(--peso-padrao) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--txt3)}
.notif-rodape{flex:none;padding:var(--esp-2) var(--esp-3);border-top:1px solid var(--borda);
  display:flex;justify-content:space-between;align-items:center;gap:var(--esp-2);background:var(--sup2)}

/* ===== A FAIXA DO AVISO DA ADMINISTRAÇÃO (17.0.0) =====
   O sino conta e o Inbox guarda, mas quem precisa ler um recado da
   administração não pode depender de abrir o Inbox. Esta faixa aparece em
   QUALQUER tela enquanto houver aviso não lido, e some quando a pessoa o
   lê. Ela usa o tom de ALERTA — o mesmo dos avisos do sistema —, e não uma
   cor nova: interromper já é o destaque; cor inédita seria um segundo. */
.aviso-adm{display:flex;align-items:flex-start;gap:var(--esp-3);
  padding:var(--esp-3) var(--esp-4);margin-bottom:var(--esp-4);
  border:1px solid var(--al);border-left-width:var(--inbox-faixa);
  border-radius:var(--raio-3);background:var(--al-bg);color:var(--al)}
.aviso-adm .ic{flex:none;display:grid;margin-top:2px}
.aviso-adm .cp{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.aviso-adm .tt{font:var(--peso-enfase) var(--txt-md) var(--familia-texto),sans-serif}
.aviso-adm .cr{font:var(--peso-padrao) var(--txt-sm)/1.5 var(--familia-texto),sans-serif;color:var(--txt)}
.aviso-adm .qd{font:var(--peso-padrao) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--txt2)}
.aviso-adm .lin-acoes{flex:none}
@media print{.aviso-adm{display:none}}
/* >>> NOTIFICAÇÕES — FIM DO BLOCO 1 (ESTILO) <<< */

/* >>> NOTIFICAÇÕES — INÍCIO DO BLOCO 1 (ESTILO) <<< */
/* ===== TELA DE INBOX =====
   O sino é a espiada rápida; esta é a tela onde se trabalha a fila. Ela é a
   MESMA tela em todo sistema BCM — muda só quais tipos existem no negócio,
   declarados em TIPOS_NOTIF.

   O DESENHO, depois do redesenho: uma faixa de cartões COMPACTOS que não
   esticam (a faixa lê como faixa mesmo com dois tipos), e UM painel só
   embaixo — barra de ferramentas, pastilhas, lista e rodapé dentro do mesmo
   cartão. Antes eram quatro blocos soltos empilhados, cada um com a sua
   margem: a tela não tinha uma linha de base, tinha quatro. */
/* >>> NOTIFICAÇÕES — FIM DO BLOCO 1 (ESTILO) <<< */
/* a linha de apoio abaixo do título da tela — do Inbox, dos Relatórios e
   de quem mais precisar dizer em uma frase o que a tela faz */
.tela-sub{margin:0;color:var(--txt2);font:var(--peso-apoio) var(--txt-md) var(--familia-texto),sans-serif;
  max-width:70ch}
/* >>> NOTIFICAÇÕES — INÍCIO DO BLOCO 1 (ESTILO) <<< */
/* A FAIXA DE CARTÕES: cada um é um FILTRO que se clica, como todo card do
   padrão. `auto-fill` (e não `auto-fit`) é o que impede DOIS cartões de se
   esticarem até 570px cada um: as colunas vazias continuam ocupando a grade,
   e o cartão fica do tamanho de cartão, com ou sem cinco tipos declarados.
   No celular ela rola na horizontal em vez de empilhar. */
.inbox-cartoes{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--inbox-cartao-min),1fr));
  gap:var(--esp-3)}
.inbox-cartao{display:flex;align-items:center;gap:var(--esp-3);text-align:left;
  min-height:var(--inbox-cartao-alt);padding:var(--esp-3) var(--esp-4);
  background:var(--sup);border:1px solid var(--borda);border-radius:var(--raio-4);
  box-shadow:var(--sombra);cursor:pointer;color:var(--txt);
  transition:border-color var(--dur-1),box-shadow var(--dur-1),transform var(--dur-1)}
.inbox-cartao:hover{border-color:var(--prim);transform:translateY(-1px);box-shadow:var(--sombra-h)}
.inbox-cartao:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--anel)}
.inbox-cartao[aria-pressed="true"]{border-color:var(--prim);box-shadow:0 0 0 1px var(--prim),var(--sombra)}
.inbox-cartao .ic{flex:none;width:var(--inbox-icone);height:var(--inbox-icone);border-radius:var(--raio-3);
  display:flex;align-items:center;justify-content:center;
  background:var(--l-tom-bg,var(--prim-suave));color:var(--l-tom,var(--prim))}
.inbox-cartao .cp{min-width:0;display:flex;flex-direction:column;gap:2px}
/* o rótulo QUEBRA em vez de cortar: "Comentários & menções" não cabe numa
   linha de cartão compacto, e um rótulo cortado com reticência num cartão que
   é filtro esconde justamente o que se vai filtrar */
.inbox-cartao .rotulo{font:var(--peso-enfase) var(--txt-xs) var(--familia-texto),sans-serif;
  color:var(--txt2);letter-spacing:.03em;text-transform:uppercase}
.inbox-cartao .valor{font:var(--peso-numeros) var(--tit-xl)/1 var(--familia-texto),sans-serif;
  font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.inbox-cartao .apoio{font:var(--peso-apoio) var(--txt-sm) var(--familia-texto),sans-serif;color:var(--txt3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* O PAINEL: barra, pastilhas, lista e rodapé no MESMO cartão. */
.inbox-painel{display:flex;flex-direction:column;overflow:hidden}
/* a barra de ferramentas: UMA linha de base. Todo controle tem a altura de
   controle e se alinha pelo centro; o rótulo de ordenação vai AO LADO do
   campo (.grupo-ctrl), não flutuando acima dele. */
.inbox-painel .filtros-linha{align-items:center;gap:var(--esp-2) var(--esp-3);
  padding:var(--esp-3) var(--esp-4);border-bottom:1px solid var(--borda)}
/* as pastilhas viram a segunda linha DA MESMA barra, com um fio entre elas —
   e não uma terceira faixa solta no meio da tela */
.inbox-painel .pilulas{padding:var(--esp-2) var(--esp-4);border-bottom:1px solid var(--borda);
  background:var(--sup2)}
/* pastilhas de tipo, com o contador dentro de cada uma */
.pilulas{display:flex;gap:var(--esp-2);flex-wrap:wrap}
.pilula{display:inline-flex;align-items:center;gap:var(--esp-2);height:var(--alt-ctrl-sm);
  padding:0 var(--esp-3);border:1px solid var(--borda-ctrl);border-radius:var(--raio-pill);
  background:var(--sup);color:var(--txt2);cursor:pointer;white-space:nowrap;
  font:var(--peso-enfase) var(--txt-sm) var(--familia-texto),sans-serif;
  transition:color var(--dur-1),border-color var(--dur-1),background var(--dur-1)}
.pilula:hover{color:var(--prim);border-color:var(--prim)}
.pilula[aria-pressed="true"]{background:var(--nav-ativo);border-color:var(--nav-ativo);color:var(--nav-ativo-txt)}
.pilula .qtd{font-variant-numeric:tabular-nums;font-weight:var(--peso-numeros);
  padding:0 var(--esp-1);border-radius:var(--raio-pill);background:var(--sup2);color:var(--txt2)}
.pilula[aria-pressed="true"] .qtd{background:var(--nav-ativo-qtd);color:var(--nav-ativo-txt)}
/* SELECIONAR TUDO só quando há seleção — antes era uma faixa de largura
   inteira, sempre em tela, para uma ação ocasional: ruído permanente que se
   aprende a ignorar. A caixa continua no DOM (o teclado e o leitor de tela
   chegam nela pelo mesmo caminho de sempre); o que muda é QUANDO ela aparece:
   marcou um item, a fila oferece marcar a página inteira. */
.inbox-cab{display:flex;align-items:center;gap:var(--esp-3);padding:var(--esp-2) var(--esp-4);
  border-bottom:1px solid var(--borda);background:var(--prim-suave);
  font:var(--peso-enfase) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--txt);
  letter-spacing:.04em}
.inbox-cab label{display:flex;align-items:center;gap:var(--esp-2);cursor:pointer;letter-spacing:inherit}
.inbox-lista{display:flex;flex-direction:column}
/* O ITEM: denso e sem vão morto. O título e a chamada dividem a MESMA linha e
   a chamada preenche o que sobra com reticência — era o vão do meio que
   deixava as ações "a meio metro" do conteúdo. À direita, a coluna de apoio
   leva o QUANDO e as ações juntos: elas passam a ancorar em conteúdo, não em
   espaço vazio. */
.inbox-item{display:flex;align-items:center;gap:var(--esp-3);width:100%;text-align:left;
  min-height:var(--inbox-item-alt);padding:var(--esp-2) var(--esp-4);
  border-bottom:1px solid var(--borda);
  /* a faixa existe SEMPRE, transparente quando lida: aparecendo só na não
     lida, ela deslocaria o texto de todas as outras em 3px. Ela nasce na
     borda do cartão — o painel recorta (overflow:hidden), então o filete
     encosta no canto arredondado em vez de flutuar dentro dele */
  border-left:var(--inbox-faixa) solid transparent;background:var(--sup);
  /* O ITEM INTEIRO ABRE A NOTIFICAÇÃO (17.0.0) — alvo de 72px de altura em vez
     de uma linha de texto. Quem clica numa caixa de entrada quer o assunto,
     não a palavra exata; o clique num controle continua sendo do controle
     (ver `itemDoInbox`). Sem sublinhado: o que diz "clicável" aqui é a linha
     inteira mudando de fundo, não um traço embaixo de um pedaço dela. */
  cursor:pointer;transition:background var(--dur-1)}
.inbox-item:hover,.inbox-item.nao-lida:hover{background:var(--hover)}
.inbox-item:hover .abrir,.inbox-item.nao-lida:hover .abrir{color:var(--prim)}
.inbox-item.nao-lida{border-left-color:var(--l-tom,var(--prim));background:var(--sup)}
.inbox-item.selecionada{background:var(--prim-suave)}
.inbox-item .ic{flex:none;width:var(--inbox-icone);height:var(--inbox-icone);border-radius:var(--raio-3);
  display:flex;align-items:center;justify-content:center;
  background:var(--l-tom-bg,var(--prim-suave));color:var(--l-tom,var(--prim))}
.inbox-item .cp{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.inbox-item .l1{display:flex;align-items:baseline;gap:var(--esp-2);min-width:0}
/* o título é o BOTÃO que leva ao objeto: alvo grande, semântica de verdade */
.inbox-item .abrir{border:none;background:transparent;padding:0;text-align:left;cursor:pointer;
  color:var(--txt2);font:var(--peso-padrao) var(--txt-md) var(--familia-texto),sans-serif;
  border-radius:var(--raio-1);max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-item.nao-lida .abrir{color:var(--txt);font-weight:var(--peso-enfase)}
.inbox-item .abrir:hover{color:var(--prim)}
.inbox-item .corpo{flex:1;min-width:0;color:var(--txt2);
  font:var(--peso-apoio) var(--txt-sm) var(--familia-texto),sans-serif;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.inbox-item .meta{color:var(--txt3);font:var(--peso-padrao) var(--txt-xs) var(--familia-texto),sans-serif;
  display:flex;gap:var(--esp-2);flex-wrap:wrap;align-items:center}
.inbox-item .meta .sep{color:var(--borda-ctrl)}
/* a coluna de apoio, à direita: quando + ações, uma sobre a outra */
.inbox-item .apoio-col{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:var(--esp-1)}
.inbox-item .quando{color:var(--txt3);white-space:nowrap;font-variant-numeric:tabular-nums;
  font:var(--peso-padrao) var(--txt-xs) var(--familia-texto),sans-serif}
.inbox-item .acoes{flex:none;display:flex;gap:var(--esp-1);align-items:center}
.inbox-rodape{display:flex;align-items:center;justify-content:space-between;gap:var(--esp-3);
  flex-wrap:wrap;padding:var(--esp-3) var(--esp-4);border-top:1px solid var(--borda);background:var(--sup2)}
/* esqueleto de LISTA de inbox: a mesma estrutura do item, em cinza */
.inbox-esq{display:flex;align-items:center;gap:var(--esp-3);padding:var(--esp-3) var(--esp-4);
  border-bottom:1px solid var(--borda);min-height:var(--inbox-item-alt)}
@media(max-width:900px){
  /* os cartões viram uma fileira que rola na horizontal, e as pastilhas
     também: em 390px, cinco cartões empilhados são cinco telas de rolagem
     antes da primeira notificação. */
  .inbox-cartoes{display:flex;overflow-x:auto;scroll-snap-type:x proximity; /* bcm-ok: faixa de cartões do Inbox só no celular, onde a barra do sistema não se desenha — quem rola aqui é o dedo, com encaixe */
    margin-inline:calc(-1 * var(--calha));padding-inline:var(--calha);padding-bottom:var(--esp-1)}
  .inbox-cartao{flex:0 0 var(--inbox-cartao-min);scroll-snap-align:start}
  .inbox-painel .pilulas{flex-wrap:nowrap;overflow-x:auto;padding-bottom:var(--esp-2)} /* bcm-ok: mesma faixa de pastilhas, só no celular e só com o dedo */
  /* a barra encolhe para duas linhas: busca inteira em cima, ordenação e
     ações embaixo — e nenhuma delas some, porque no celular a fila se
     trabalha igual */
  .inbox-painel .filtros-linha{padding:var(--esp-3)}
  .inbox-painel .filtros-linha>.busca-campo,.inbox-painel .filtros-linha>.campo-filtro.de-busca{flex:1 1 100%}
  .inbox-painel .filtros-linha>.grupo-ctrl{flex:1 1 100%}
  /* o item vira cartão: só as AÇÕES descem para a própria linha, com alvo de
     toque de dedo, em vez de disputar a largura com o título. O texto fica na
     primeira linha, ao lado do ícone — descê-lo junto deixaria uma faixa
     quase vazia no alto de cada cartão. */
  .inbox-item{flex-wrap:wrap;align-items:flex-start;padding:var(--esp-3)}
  .inbox-item .l1{flex-wrap:wrap}
  .inbox-item .abrir{white-space:normal}
  .inbox-item .corpo{flex:1 1 100%;white-space:normal}
  .inbox-item .apoio-col{flex:1 1 100%;flex-direction:row;align-items:center;
    justify-content:space-between;gap:var(--esp-2)}
  .inbox-item .acoes{gap:var(--esp-2)}
}
/* >>> NOTIFICAÇÕES — FIM DO BLOCO 1 (ESTILO) <<< */
/* >>> RELATÓRIOS — INÍCIO DO BLOCO 1 (ESTILO) <<< */
/* ===== TELAS DE RELATÓRIOS — CONDICIONAIS =====
   Existem quando o sistema GUARDA dado que alguém precisa levar para fora;
   não guardando, não existem (references/modulos.md). São DUAS telas — a do
   trabalho e a do sistema — com UM desenho só, e é por isso que este bloco
   de estilo não sabe qual das duas está pintando: uma linha de filtros, uma
   grade de cartões — um por relatório do catálogo — e, ao abrir um cartão,
   a prévia em tabela embaixo. Quem manda no que aparece é o servidor:
   `GET /api/relatorios` já devolve o catálogo FILTRADO pela permissão de
   quem pediu, e a `area` de cada relatório diz em qual das duas ele entra. */
/* OS FILTROS DO RELATÓRIO ABERTO. Eles são um conjunto dentro da linha de
   filtros: no computador dividem a linha com a busca do catálogo; no
   celular cada um toma a largura inteira — três controles espremidos numa
   linha de 390px viram três "T..." que não dizem nada. */
.rel-filtros-conj{display:flex;align-items:flex-end;gap:var(--esp-2) var(--esp-3);
  flex-wrap:wrap;flex:1 1 auto;min-width:0}
.rel-filtros-conj>.grupo-ctrl{flex:0 1 22ch;min-width:0}
.rel-filtros-conj>.grupo-ctrl>.sel,.rel-filtros-conj>.grupo-ctrl>.ent{flex:none;min-width:0}
/* AS COLUNAS PRINCIPAIS — atalho, na mesma barra da busca, para o MESMO
   funil que já existe no cabeçalho de cada coluna (ver .th-filtro-caixa
   abaixo). O gatilho aqui é o CHIP do sistema (mesma pílula de
   .chip-filtro: `aria-pressed="true"` pinta --prim-suave/--prim) — coerente
   com o resto do padrão, mas não precisa ser IDÊNTICO ao select comum:
   aqui o rótulo é o NOME DA COLUNA, e o valor escolhido nunca aparece por
   escrito no próprio chip (ele já mostra o rótulo fixo da coluna; quem
   quer ver o que está marcado abre o painel). */
.rel-principais-conj{display:flex;align-items:center;gap:var(--esp-2);flex-wrap:wrap;flex:0 1 auto}
.rel-principal{display:inline-flex;align-items:center;gap:6px;height:var(--alt-ctrl);
  padding:0 var(--esp-3);border:1px solid var(--borda-ctrl);border-radius:var(--raio-pill);
  background:var(--sup);color:var(--txt2);cursor:pointer;white-space:nowrap;
  font:600 var(--txt-sm) Mulish,sans-serif;
  transition:background var(--dur-1),color var(--dur-1),border-color var(--dur-1)}
.rel-principal:hover{background:var(--hover);color:var(--txt)}
.rel-principal svg{width:13px;height:13px;flex:none}
.rel-principal[aria-pressed="true"]{background:var(--prim-suave);color:var(--prim);
  border-color:var(--prim);font-weight:700}
.rel-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(32ch,1fr));gap:var(--esp-3)}
/* 32ch é a medida do CONTEÚDO: o cartão existe para caber a descrição de
   duas linhas que o catálogo escreve, e é ela que decide a coluna. */
.rel-cartao{display:flex;flex-direction:column;background:var(--sup);border:1px solid var(--borda);
  border-radius:var(--raio-4);box-shadow:var(--sombra);overflow:hidden;
  transition:border-color var(--dur-1),box-shadow var(--dur-1),transform var(--dur-1)}
.rel-cartao:hover{border-color:var(--prim);transform:translateY(-1px);box-shadow:var(--sombra-h)}
/* o cartão ABERTO fica marcado — é ele que a prévia embaixo está mostrando */
.rel-cartao.aberto{border-color:var(--prim);box-shadow:0 0 0 1px var(--prim),var(--sombra)}
/* o corpo do cartão é UM botão: abre a prévia. Os formatos são botões
   próprios embaixo — botão dentro de botão não existe em HTML, e o corpo
   clicável inteiro engoliria o clique de baixar. */
.rel-abrir{flex:1;display:flex;align-items:flex-start;gap:var(--esp-3);text-align:left;
  padding:var(--esp-4);border:none;background:transparent;color:var(--txt);cursor:pointer;width:100%}
.rel-abrir:focus-visible{outline:2px solid transparent;outline-offset:-2px;box-shadow:var(--anel)}
.rel-abrir .ic{flex:none;width:var(--inbox-icone);height:var(--inbox-icone);border-radius:var(--raio-3);
  display:flex;align-items:center;justify-content:center;
  background:var(--prim-suave);color:var(--prim)}
.rel-abrir .cp{min-width:0;display:flex;flex-direction:column;gap:var(--esp-1)}
.rel-abrir .tit{font:var(--peso-apoio) var(--tit-md) var(--familia-titulo),sans-serif;letter-spacing:.04em}
.rel-abrir .desc{color:var(--txt2);font:var(--peso-apoio) var(--txt-sm)/1.5 var(--familia-texto),sans-serif}
/* o recorte em vigor DAQUELE relatório, dito no próprio cartão: sem isto,
   baixar de um cartão fechado seria baixar um recorte invisível */
.rel-abrir .recorte{font:var(--peso-enfase) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--prim)}
/* OS TRES FORMATOS, EM UMA LINHA SO. Eram flex com quebra e um rotulo
   "Baixar" empurrando os botoes para a direita: no cartao estreito o PDF
   sobrava para a segunda linha, orfao e desalinhado. Grade de tres colunas
   iguais nao tem esse desfecho — os tres cabem sempre, porque dividem a
   largura em vez de disputar. O rotulo saiu: tres palavras curtas embaixo
   de um relatorio ja dizem "exportar em", e o nome acessivel de cada botao
   continua dizendo o relatorio e o formato por extenso.
   Sem icone aqui de proposito: eram tres familias diferentes (grade, seta
   e pagina) para tres coisas da MESMA natureza, e isso le como tres acoes
   diferentes. A palavra basta, e a largura que sobra e o que faz caber. */
.rel-formatos{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--esp-2);
  padding:var(--esp-3) var(--esp-4);border-top:1px solid var(--borda);background:var(--sup2)}
.rel-formatos .btn{justify-content:center;min-width:0}
/* O ESQUELETO DA FAIXA TEM A FORMA DOS BOTÕES QUE VÊM: três blocos que
   ocupam a mesma coluna e a mesma altura de controle. Com o bloco solto de
   44×26 do esqueleto genérico, a faixa nascia 57px mais baixa e o cartão
   PULAVA quando o catálogo chegava — que é exatamente o que o esqueleto
   existe para evitar. */
.rel-formatos .esq{width:auto;height:var(--alt-ctrl);border-radius:var(--raio-2)}
/* A FAIXA DE ERRO DO DOWNLOAD. Ela não é o bloco de "não carregou" (esse
   mora dentro de um cartão e ocupa o lugar da lista): aqui a tela inteira
   continua de pé, e o que falhou foi UMA ação. Faixa de alerta, com a
   frase que o servidor mandou — 413, 429 e 503 vêm com a instrução dentro,
   e é ela que diz o que fazer em seguida. */
.rel-aviso{display:flex;align-items:flex-start;gap:var(--esp-3);padding:var(--esp-4);
  background:var(--err-bg);border:1px solid var(--err);border-radius:var(--raio-4)}
.rel-aviso .cp{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--esp-1)}
.rel-aviso h2{margin:0;font:var(--peso-apoio) var(--tit-md) var(--familia-titulo),sans-serif;
  letter-spacing:.03em;color:var(--err)}
.rel-aviso p{margin:0;color:var(--txt);font:var(--peso-padrao) var(--txt-md) var(--familia-texto),sans-serif}
.rel-aviso .btn{margin-top:var(--esp-2);align-self:flex-start}
/* ---- a prévia ---- */
.rel-previa{display:flex;flex-direction:column;overflow:hidden}
.rel-previa-topo{display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap;
  padding:var(--esp-3) var(--esp-4);border-bottom:1px solid var(--borda)}
.rel-previa-topo .cp{min-width:0;display:flex;flex-direction:column}
.rel-previa-topo .tit{font:var(--peso-apoio) var(--tit-md) var(--familia-titulo),sans-serif;letter-spacing:.04em}
.rel-previa-topo .rot{font-weight:var(--peso-padrao)}
.rel-previa-topo .acoes{display:flex;align-items:center;gap:var(--esp-2);margin-left:auto;flex-wrap:wrap}
.rel-previa .pag{border-top:1px solid var(--borda)}
@media(max-width:900px){
  /* no celular a grade empilha (não rola na horizontal como a faixa do
     Inbox: aqui cada cartão é um destino, não um número de resumo) e os
     botões de formato dividem a linha em partes iguais */
  .rel-grade{grid-template-columns:1fr}
  .rel-filtros-conj>.grupo-ctrl{flex:1 1 100%}
  /* no celular os botões de baixar caem para a própria linha, e o X fica na
     linha do título: `order` põe a linha de ações DEPOIS dele sem mexer no
     DOM — o X é a saída, e saída se procura no canto de cima */
  .rel-previa-topo .acoes{width:100%;margin-left:0;order:1}
  .rel-previa-topo .cp{flex:1 1 auto}
}
/* >>> RELATÓRIOS — FIM DO BLOCO 1 (ESTILO) <<< */
/* ===== BARRA DE ABAS (só no celular) =====
   O desenho das versões recentes do iOS e do Instagram: a barra FLUTUA sobre
   o conteúdo em vez de empurrá-lo, com cantos arredondados e uma margem por
   fora. A margem por fora soma a área segura do aparelho (a faixa do gesto
   de início do iPhone) — ela entra no CÁLCULO da margem, não como um padding
   solto, senão a barra ora encosta na borda ora flutua alto demais. */
.tabbar{display:none;position:fixed;z-index:90;
  left:var(--tab-margem);right:var(--tab-margem);
  bottom:calc(var(--tab-margem) + env(safe-area-inset-bottom,0px));
  height:var(--tab-alt);border-radius:var(--tab-raio);
  /* recuo interno por causa da cápsula: com o canto fechando em semicírculo,
     o rótulo do primeiro e do último item corre por baixo da curva. O recuo
     afasta as pontas do arco — sem ele a barra fica bonita e os dois rótulos
     das pontas ficam espremidos. */
  padding:0 var(--esp-2);
  border:1px solid var(--borda);box-shadow:var(--sombra-2);
  align-items:stretch;overflow:hidden;
  transition:transform var(--dur-2) var(--ease-saida)}
/* A BARRA DE ABAS É A PEÇA DE GRAU BAIXO, e foi ELA quem ensinou o material ao
   resto do padrão. O cálculo era este, e continua valendo:
     alfa .82 → 3,61 (claro) e 3,28 (escuro)   reprova
     alfa .90 → 4,39 e 4,24                    ainda reprova
     alfa .94 → 4,82 e 4,82                    passa nos dois
   Ela media o pior caso certo — preto no claro, branco no escuro, e não as
   cores da paleta, porque por baixo dela passa a foto de uma nota tanto quanto
   um cartão. O que ela não podia saber é que o piso de 94% era do DESFOQUE
   SOZINHO: com o material inteiro do padrão (contraste e brilho na mesma
   passada), o mesmo pior caso fecha 4,5:1 já em 82% no claro e 83% no escuro.
   Ela ficou em --vid-baixo, um pouco acima disso, porque é a única peça
   PERMANENTE do sistema — mas agora a folga é escolha, e não teto.
   Nada aqui prescinde do fallback opaco: quem não tem backdrop-filter recebe
   --sup-flut cheio, o que .vid-baixo já garante. */
/* escondida ao rolar para baixo: sai inteira, margem e área segura junto */
.tabbar.escondida{transform:translateY(calc(100% + var(--tab-margem) + env(safe-area-inset-bottom,0px) + var(--esp-2)))}
.tab-item{flex:1;min-width:0;min-height:var(--alvo-toque);position:relative;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  border:none;background:transparent;color:var(--txt2);cursor:pointer;padding:0 var(--esp-1)}
.tab-item svg{width:var(--tab-icone);height:var(--tab-icone);flex:none}
.tab-item .rot{font:var(--peso-enfase) var(--tab-rotulo) var(--familia-texto),sans-serif;
  letter-spacing:.01em;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* A MARCA DA ABA ATIVA.
   Ela é --prim, e não --nav-ativo. O azul sólido do menu existe para pintar um
   FUNDO, e o texto em cima dele; aqui não há fundo, e --prim é o azul que o
   sistema usa quando a cor é do próprio traço. Sobre a barra ele fecha com
   folga nos dois temas — mais folgado, aliás, que qualquer par de
   preenchimento, porque não há cor intermediária no meio.

   A MARCA NÃO É UM BLOCO PINTADO. Ela já foi duas coisas erradas: cápsula
   atrás do ÍCONE sozinho, que deixava o rótulo fora dela e parecia esticada
   por ser mais larga que alta sem nada dentro; e, depois, bloco azul sólido no
   item inteiro, que numa barra desta altura vira mancha e faz a aba
   selecionada pesar mais que a barra que a contém.

   O que ficou é o mais leve dos tratamentos: **ícone e rótulo em --prim, e uma
   barrinha curta acima do ícone**. Sem preenchimento nenhum. Três motivos:

   - A barra é uma peça pequena e flutuante sobre o conteúdo. Preenchimento
     dentro dela é uma forma dentro de outra forma, e as duas disputam o mesmo
     canto arredondado.
   - **A cor não fica sozinha.** Quem enxerga pouca diferença entre azul e
     cinza tem a barrinha, que é forma, não cor — e ela some por completo dos
     outros três, o que é uma diferença que não depende de comparar tons.
   - O contraste é o melhor dos quatro: --prim direto sobre a barra fecha mais
     folgado que qualquer par de preenchimento, porque não há cor intermediária
     no meio.

   O item, então, não tem fundo em estado nenhum — o toque é confirmado pela
   navegação em si, que é a resposta mais rápida que existe. */
.tab-item{position:relative;padding-top:var(--esp-1);
  transition:color var(--dur-1) var(--ease)}
.tab-item.ativo{color:var(--prim)}
/* o rótulo acompanha: a classe .rot é --txt2 por definição, e sem esta linha
   a herança não a alcança — o rótulo ficaria cinza ao lado do ícone azul */
.tab-item.ativo .rot{color:var(--prim);font-weight:var(--peso-numeros)}
/* a barrinha: largura fixa e centrada, para ela marcar o ITEM e não o rótulo,
   que muda de tamanho de aba para aba */
.tab-item.ativo::before{content:'';position:absolute;top:var(--tab-marca-topo);left:50%;
  transform:translateX(-50%);width:var(--tab-marca-l);height:var(--tab-marca-a);
  border-radius:var(--raio-pill);background:var(--prim)}
.tab-item .ic-caixa{display:flex;align-items:center;justify-content:center}
.tab-item:focus-visible{outline:2px solid var(--anel-cor);outline-offset:-3px;border-radius:var(--raio-3)}
/* MESMO desenho de contador do menu, só que preso ao canto do ícone */
/* o anel da cor da barra descola o contador do que estiver atrás dele — o
   ícone, ou a barrinha do item ativo — sem inventar cor nova */
.tab-item .qtd{position:absolute;top:var(--esp-2);left:50%;margin-left:var(--esp-2);
  box-shadow:0 0 0 2px var(--sup-flut);
  min-width:16px;height:16px;display:flex;align-items:center;justify-content:center;
  padding:0 var(--esp-1);border-radius:var(--raio-pill);background:var(--err);color:var(--err-txt);
  font:var(--peso-numeros) var(--txt-grupo) var(--familia-texto),sans-serif;
  font-variant-numeric:tabular-nums;pointer-events:none}

/* ===== FOLHA DE BAIXO ("Mais") =====
   <dialog> nativo ancorado embaixo: o foco fica preso dentro por construção
   e o Esc já fecha. Fecha também arrastando para baixo — é o gesto que a
   pessoa tenta primeiro numa folha. */
dialog.folha{margin:auto auto 0 auto;width:var(--vp-w);max-width:var(--vp-w);
  max-height:calc(var(--vp-h) - var(--esp-7))}
dialog.folha[open]{animation:folhaIn var(--dur-3) var(--ease)}
@keyframes folhaIn{from{transform:translateY(100%)}}
dialog.folha.saindo{transform:translateY(100%);transition:transform var(--dur-2) var(--ease-saida)}
.folha-caixa{position:relative;display:flex;flex-direction:column;max-height:inherit;
  background:var(--sup);border:1px solid var(--borda);border-bottom:none;
  border-radius:var(--folha-raio) var(--folha-raio) 0 0;box-shadow:var(--sombra-2);
  padding-bottom:env(safe-area-inset-bottom,0px)}
.folha-punho{flex:none;align-self:center;width:var(--folha-punho);height:var(--esp-1);
  border-radius:var(--raio-pill);background:var(--borda-ctrl);margin:var(--esp-2) 0}
.folha-topo{flex:none;display:flex;align-items:center;padding:0 var(--esp-4) var(--esp-2)}
.folha-topo h2{font:var(--peso-apoio) var(--tit-md) var(--familia-titulo),sans-serif;letter-spacing:.04em}
.folha-corpo{flex:1;min-height:0;padding:0 var(--esp-3) var(--esp-3);
  display:flex;flex-direction:column;gap:var(--esp-2)}
.folha-rodape{flex:none;border-top:1px solid var(--borda);padding:var(--esp-2) var(--esp-3);
  display:flex;flex-direction:column;gap:var(--esp-1)}
/* o item da folha é o item do menu, com alvo de toque de dedo */
.folha-corpo .nav-item,.folha-rodape .nav-item{min-height:var(--alvo-toque)}

@media(max-width:900px){
  /* No celular o menu É a barra de abas de baixo: a sidebar sai do fluxo e
     não volta por botão nenhum. O menu completo vive na folha de "Mais" —
     duas portas para o mesmo menu é a segunda que ninguém mantém. */
  .shell{flex-direction:column;padding-left:0}
  #shell,#shell[data-sb]{--sb-reserva:var(--sb-reserva-oculta);--sb-larg:var(--sidebar)}
  nav.lateral,#shell[data-sb] nav.lateral,#shell.sb-revelada nav.lateral{display:none}
  #shell .sb-borda{display:none}
  /* a busca continua no topo, como ícone: 280px de campo não cabem ao lado
     do título e do sino em 390px. O ícone abre a paleta, que É a busca. */
  .busca-geral{display:none}
  .btn-busca-m{display:inline-flex!important}
  /* ABERTA, A BUSCA OCUPA A BARRA. Esta regra faltava: o `abrirBuscaMobile()`
     escrevia a classe `busca-aberta` no topo, o CSS não conhecia a classe e
     NADA acontecia — o ícone de lupa do celular não fazia nada, e o foco ia
     para um campo `display:none`, que não recebe foco. O campo cobre título,
     sino e avatar em vez de disputar 390px com eles; toque fora fecha (o
     mousedown de `fecharBusca`). */
  header.topo.busca-aberta{position:relative}
  header.topo.busca-aberta .busca-geral{display:flex;position:absolute;z-index:3;
    inset:var(--esp-2) var(--esp-3);width:auto}
  header.topo.busca-aberta > :not(.busca-geral){visibility:hidden}
  /* o atalho de teclado não existe no celular: o selo só ocupava o campo */
  .busca-geral kbd{display:none}
  header.topo{height:var(--topo-mobile);padding:0 var(--esp-3);gap:var(--esp-2)}
  .topo-tit{font-size:var(--tit-md)}
  .topo-secao{display:none}
  /* A BARRA SEGUE O SHELL, pelo irmão anterior. Ela é `position:fixed` e vive
     FORA do #shell, então esconder o shell não a escondia — no login ela
     ficava flutuando por cima, oferecendo quatro destinos para quem ainda não
     entrou. Aqui a condição é a mesma que decide se há sistema na tela, e não
     um segundo estado que alguém precisa lembrar de escrever nos dois lados. */
  #shell:not([hidden]) ~ .tabbar{display:flex}
  /* os dois seletores para ganhar do bloco de densidade, que é mais específico */
  :root,:root[data-densidade]{--calha:14px}
  /* o miolo termina ACIMA da barra flutuante: sem esta folga a última linha
     da tabela fica para sempre debaixo dela */
  main{padding-block:var(--esp-4) calc(var(--tab-alt) + var(--tab-margem) + var(--esp-6) + env(safe-area-inset-bottom,0px))}
  /* o toast também sobe: ele mora no mesmo canto da barra */
  .pilha-toasts{right:var(--esp-3);left:var(--esp-3);
    bottom:calc(var(--tab-alt) + var(--tab-margem) + var(--esp-3) + env(safe-area-inset-bottom,0px))}
  .toast{max-width:100%}
/* >>> NOTIFICAÇÕES — INÍCIO DO BLOCO 1 (ESTILO) <<< */
  /* o painel de notificações vira folha de baixo — mesmo <dialog>, mesma
     lista, outro lugar na tela */
  dialog.notif{margin:auto auto 0 auto;width:var(--vp-w);max-width:var(--vp-w);
    max-height:calc(var(--vp-h) - var(--esp-7))}
  dialog.notif[open]{animation:folhaIn var(--dur-3) var(--ease)}
  .notif-caixa{border-radius:var(--folha-raio) var(--folha-raio) 0 0;border-bottom:none;
    padding-bottom:env(safe-area-inset-bottom,0px)}
/* >>> NOTIFICAÇÕES — FIM DO BLOCO 1 (ESTILO) <<< */
}
/* movimento reduzido: a barra NÃO some ao rolar. Esconder conteúdo é o que
   prefers-reduced-motion existe para evitar — quem desliga animação repõe o
   estado final, e o estado final da barra é visível. */
@media (prefers-reduced-motion:reduce){
  .tabbar.escondida{transform:none}
}
.btn-busca-m{display:none}
/* ===== tópicos: o nível acima do grupo =====
   Sistema grande trata de mais de um assunto. O tópico separa assuntos;
   dentro dele os grupos continuam abrindo e fechando. São três níveis no
   máximo — tópico > grupo > tela — e nunca mais que isso: o quarto nível é
   onde todo menu de sistema começa a se perder. O tópico não é clicável,
   não tem contador e não tem ícone: ele é uma divisória com nome. */
/* ===== tópico =====
   O rótulo e a linha ocupam a MESMA altura: o nome à esquerda, o filete
   correndo dele até a borda direita. Uma peça só, e não um rótulo solto
   pairando abaixo de um traço — que era o que fazia a divisão parecer
   montada em dois momentos.
   O espaço é assimétrico de propósito: muito acima, pouco abaixo. O rótulo
   pertence ao bloco que vem DEPOIS dele, não ao que veio antes.
   Nome de tópico é CURTO — uma ou duas palavras. Ele divide a barra, não
   descreve o módulo; nome comprido rouba a linha e vira reticências. */
.nav-topico{display:flex;align-items:center;gap:10px;margin:var(--nav-topico-cima) var(--nav-topico-lados) var(--nav-topico-baixo);padding:0 10px;
  font:var(--peso-numeros) var(--nav-topico-txt) var(--familia-texto),sans-serif;letter-spacing:.16em;text-transform:uppercase;
  color:var(--txt);line-height:1.4}
.nav-topico span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nav-topico::after{content:"";flex:1;height:1px;background:var(--borda)}
/* o primeiro fica mais perto do topo: não há bloco acima dele para afastar */
.nav-topico:first-child{margin-top:10px}
.nav-topico + .nav-grupo,.nav-topico + .nav-solta{margin-top:0}
/* no rail sobra só a linha: em 68px não cabe rótulo, mas a divisão entre
   blocos de ícones continua valendo */
.rail .nav-topico{margin:var(--esp-3) var(--esp-3);padding:0;gap:0}
.rail .nav-topico span{display:none}

/* ===== avatar =====
   Sempre redondo, sempre com as iniciais quando não há foto, sempre uma cor
   da paleta fechada. Cor escolhida pela pessoa em Meu perfil — é o jeito mais
   barato de duas contas abertas lado a lado não se confundirem. */
.av{border-radius:50%;display:flex;align-items:center;justify-content:center;flex:none;overflow:hidden;
  background:var(--av-cor);color:var(--av-txt);font-family:var(--familia-texto),sans-serif;font-weight:var(--peso-numeros);
  background-size:cover;background-position:center;letter-spacing:.02em;user-select:none}
.av-g{width:var(--av-perfil);height:var(--av-perfil);font-size:var(--tit-2xl)}
.nav-rodape .ini,.avatar-topo{background:var(--av-cor);color:var(--av-txt);
  background-size:cover;background-position:center;border:none}
/* o painel de uma aba de Configuracoes: o padding era escrito INLINE nos
   quatro (style="padding:var(--esp-5)"), e a classe ficava sem regra —
   quem mexesse num esquecia os outros tres. */
.cfg-painel{padding:var(--esp-5)}
/* ===== seletor de cor (16.2.0) =====
   UM componente, `seletorDeCor()`, para as três escolhas de cor do sistema: a do
   avatar (Meu perfil), a do projeto e a da nota. No avatar a amostra JÁ É o
   avatar em miniatura, com as iniciais da pessoa — ela escolhe olhando o
   resultado, não uma bolinha. Onde não há iniciais (projeto, nota) a amostra é
   o disco menor, `.av-cores-p`. A escolhida ganha o anel na própria cor e o selo.
   Até a 16.1.0 o Meu perfil montava o botão SEM a classe `av-cor`: a regra não
   pegava e o navegador desenhava o botão dele — barrinhas achatadas no lugar
   dos círculos. A regra `controle-sem-classe` do verificador nasceu disso. */
.av-cores{display:flex;gap:var(--esp-3);flex-wrap:wrap;padding:var(--esp-1)}
.av-cores .av-cor{--l-tam:var(--av-amostra);position:relative;flex:none;width:var(--l-tam);height:var(--l-tam);
  border-radius:50%;border:none;padding:0;cursor:pointer;display:grid;place-items:center;
  background:var(--l-cor);color:var(--av-txt);letter-spacing:.02em;
  font:var(--peso-numeros) var(--txt-sm) var(--familia-texto),sans-serif;
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.av-cores-p .av-cor{--l-tam:var(--av-amostra-p)}
.av-cores .av-cor:hover{transform:translateY(-2px)}
/* o anel é o da própria cor, afastado da amostra pela superfície: é assim que
   a escolhida se lê nos dois temas sem uma cor a mais na tela */
.av-cores .av-cor[aria-checked="true"]{box-shadow:0 0 0 2px var(--sup),0 0 0 4px var(--l-cor)}
.av-cores .av-cor:focus-visible{outline:none;box-shadow:0 0 0 2px var(--sup),0 0 0 4px var(--anel-cor)}
.av-cor-selo{position:absolute;right:calc(var(--esp-1) * -1);bottom:calc(var(--esp-1) * -1);
  width:var(--av-amostra-selo);height:var(--av-amostra-selo);border-radius:50%;
  display:grid;place-items:center;background:var(--prim);color:var(--prim-txt);box-shadow:0 0 0 2px var(--sup);
  opacity:0;transform:scale(.4);transition:opacity var(--dur-1) var(--ease),transform var(--dur-2) var(--ease)}
.av-cor-selo svg{stroke-width:3}
.av-cores .av-cor[aria-checked="true"] .av-cor-selo{opacity:1;transform:none}
.perfil-topo{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.perfil-acoes{display:flex;flex-direction:column;gap:10px;min-width:200px}
/* ===== impressão da tela =====
   Some o shell e entra o cabeçalho da marca com título, filtros e data —
   o mesmo conteúdo do modelo-relatorio.html, na versão rápida. */
@media print{
  /* .filtros-linha e .pag CONTINUAM no papel. Escondê-las era a folha
     mentindo duas vezes: sem os filtros, ninguém sabia de que recorte
     aquilo saiu; sem a paginação, "10 linhas" parecia ser o total. O que
     sai são os controles (botões, caixas de seleção), não a informação. */
  nav.lateral,header.topo,.pilha-toasts,.lote,.btn,.btn-linha,.btn-ic,.modal-x,
  .col-chk,.pular,.abas,.faixa-offline,.sb-borda,.tabbar{display:none!important}
  .filtros-linha,.pag{display:flex!important}
  /* a barra sai da folha, mas a calha que ela reservava ficava: 242px de
     margem esquerda vazia em toda pagina impressa */
  .shell{padding-left:0!important}
  .filtros-linha .sel-ic,.pag .paginas{display:none!important}
  .ent,.sel-gatilho{border-color:var(--borda);background:transparent}
  /* imprimir com a gaveta aberta imprimia a lista de TRÁS. No papel, o que
     está aberto é o documento: o resto sai de cena. */
  body:has(dialog[open]) .miolo>.tela,body:has(dialog[open]) #esqueleto{display:none!important}
  dialog[open]{position:static;display:block!important;width:auto;max-width:100%;
    height:auto;max-height:none;margin:0}
  dialog[open]::backdrop{display:none}
  .gaveta-caixa,.modal-caixa{border:none;box-shadow:none;height:auto}
  .gaveta-corpo{overflow:visible}
  main{padding:0}
  .miolo,.tela{gap:10px}
  .so-impressao{display:block}
  .cartao{box-shadow:none;border:none}
  th .seta{display:none}
  .num,td[data-rot="Valor"]{white-space:nowrap}
  thead th{border-bottom:1px solid var(--borda)}
  .painel-graf,.kpi{box-shadow:none;break-inside:avoid}
  .tab-wrap.rol-in{overflow:visible}
  table{min-width:0!important}
  /* NENHUM TEXTO SE PERDE NO PAPEL (references/exportacoes.md).
     Na tela a tabela rola dentro do .tab-wrap; no papel não há rolagem. Sem
     isto, UMA palavra sem espaço — razão social grudada, código, URL —
     alarga a tabela além da folha e as colunas da direita somem sem aviso:
     medido, sete colunas viravam três. Número, data e moeda continuam com o
     `white-space:nowrap` declarado acima. */
  tbody td{overflow-wrap:anywhere}
  tbody tr:hover td:first-child{box-shadow:none}
/* >>> ANEXOS — INÍCIO DO BLOCO 1 (ESTILO) <<< */
  /* ===== O VISOR NO PAPEL =====
     Imprimir com o visor aberto imprime O ANEXO, e só ele: a regra de cima já
     tira a tela de trás quando existe um <dialog> aberto. Aqui sobra desfazer
     o que é de tela — o zoom, que ampliado picaria a imagem em cinco folhas
     que ninguém pediu, e a moldura do palco, que no papel é um retângulo
     cinza em volta do documento. */
  .visor-img,.visor-pdf,.visor-grade{zoom:1}
  .visor-palco{border:none;background:transparent;padding:0;min-height:0}
  .visor .modal-caixa{max-height:none}
  .visor-grade thead th,.visor-grade tbody th{position:static}
/* >>> ANEXOS — FIM DO BLOCO 1 (ESTILO) <<< */
  @page{size:A4 landscape;margin:12mm}
}

/* ===== DICAS E MANUAIS — a terceira subaba de Minha conta =====
   O lugar onde o sistema explica a si mesmo, em português, para quem nunca
   viu um sistema antes. Sem ela, "como instalo isso no celular" vira mensagem
   para quem construiu, toda semana, para sempre.

   Cada assunto é um CARTÃO que abre o manual — card interativo como todo card
   do padrão, nunca decoração. Assunto novo é mais um cartão, nunca uma aba
   nova: aba por assunto é como uma tela de ajuda vira seis. */
.manuais{display:grid;grid-template-columns:repeat(auto-fill,minmax(var(--manual-cartao-min),1fr));
  gap:var(--esp-4)}
.manual-cartao{display:flex;flex-direction:column;align-items:flex-start;gap:var(--esp-2);text-align:left;
  padding:var(--esp-4);background:var(--sup);border:1px solid var(--borda);border-radius:var(--raio-4);
  box-shadow:var(--sombra);cursor:pointer;color:var(--txt);
  transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease),border-color var(--dur-1)}
.manual-cartao:hover{transform:translateY(-2px);box-shadow:var(--sombra-h);border-color:var(--prim)}
.manual-cartao:focus-visible{outline:none;box-shadow:var(--anel)}
.manual-cartao .ic{display:flex;align-items:center;justify-content:center;
  width:var(--inbox-icone);height:var(--inbox-icone);border-radius:var(--raio-3);
  background:var(--prim-suave);color:var(--prim)}
.manual-cartao h3{margin:0;font:var(--peso-apoio) var(--tit-md) var(--familia-titulo),sans-serif;letter-spacing:.04em}
.manual-cartao p{margin:0;font:var(--peso-padrao) var(--txt-sm) var(--familia-texto),sans-serif;color:var(--txt2)}
/* o manual aberto: uma coluna de leitura, não a largura da tela — linha
   comprida demais faz o olho perder a próxima */
.manual-corpo{display:flex;flex-direction:column;gap:var(--esp-5);max-width:78ch}
.manual-corpo h3{margin:0;font:var(--peso-apoio) var(--tit-lg) var(--familia-titulo),sans-serif;letter-spacing:.03em}
.manual-corpo h4{margin:0;font:var(--peso-enfase) var(--txt-lg) var(--familia-texto),sans-serif}
.manual-corpo p{margin:0;font:var(--peso-padrao) var(--txt-md)/1.65 var(--familia-texto),sans-serif;color:var(--txt2)}
.manual-secao{display:flex;flex-direction:column;gap:var(--esp-3);
  padding:var(--esp-5);background:var(--sup);border:1px solid var(--borda);border-radius:var(--raio-4)}
/* passo a passo: UMA ação por passo, com o texto exato do botão entre aspas.
   Nada de "clique no menu" — é "toque nos três pontinhos no alto à direita". */
.manual-passos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--esp-3);counter-reset:passo}
.manual-passos li{display:grid;grid-template-columns:var(--manual-passo) 1fr;gap:var(--esp-3);align-items:start;
  font:var(--peso-padrao) var(--txt-md)/1.6 var(--familia-texto),sans-serif}
.manual-passos li::before{counter-increment:passo;content:counter(passo);
  width:var(--manual-passo);height:var(--manual-passo);display:flex;align-items:center;justify-content:center;
  border-radius:50%;background:var(--prim-suave);color:var(--prim);
  font:var(--peso-numeros) var(--txt-sm) var(--familia-texto),sans-serif}
.manual-passos b{color:var(--txt)}
/* A FIGURA É DESENHO, NÃO CAPTURA. Captura envelhece a cada versão do
   navegador, pesa no arquivo único e não acompanha o tema; o desenho mostra
   ONDE o botão fica, que é a única coisa que a pessoa precisa. */
.manual-fig{width:100%;max-width:var(--manual-figura-l);height:auto;display:block;
  aspect-ratio:32/14;background:var(--sup2);border:1px solid var(--borda);border-radius:var(--raio-3)}
.manual-fig .f-janela{fill:var(--sup);stroke:var(--borda)}
.manual-fig .f-barra{fill:var(--sup2);stroke:var(--borda)}
.manual-fig .f-traco{fill:none;stroke:var(--txt2);stroke-linecap:round}
.manual-fig .f-fraco{fill:var(--borda)}
.manual-fig .f-alvo{fill:none;stroke:var(--prim);stroke-width:2}
.manual-fig .f-marca{fill:var(--prim)}
.manual-fig .f-rot{fill:var(--prim-txt);font:var(--peso-numeros) var(--txt-grupo) var(--familia-texto),sans-serif}
.manual-nota{display:flex;gap:var(--esp-3);padding:var(--esp-3) var(--esp-4);border-radius:var(--raio-3);
  background:var(--al-bg);color:var(--al);font:var(--peso-padrao) var(--txt-sm)/1.6 var(--familia-texto),sans-serif}
.manual-nota svg{flex:none;margin-top:2px}

/* =====================================================================
   A TELA INÍCIO — a porta de entrada de todo sistema BCM (8.0.0)
   =====================================================================
   OBRIGATÓRIA. É a primeira aba do menu, a primeira do celular e a tela
   que abre depois do login. Ela responde três perguntas antes de qualquer
   outra: onde eu vou (os módulos, com as ações rápidas), o que está
   esperando por mim (as pendências) e como eu estou indo (o relatório das
   tarefas — ou, no sistema que não tem Gestão, o resumo do que o sistema
   faz). references/inicio.md.

   Todas as medidas moram no grupo `inicio` do tokens.json. Os blocos são
   os mesmos em todo sistema; o que muda de um para outro é o que cada
   módulo declara (descrição, pendência, ações) — nunca o desenho. */

/* ---------- a barra da visualização ---------- */
.ini-barra>.a-direita,.ini-sec-cab>.a-direita,.ini-mod-barra>.a-direita,.ini-lista-cab>.a-direita,
.cab-graf>.a-direita{margin-left:auto}
.cab-graf .ini-legendas{display:inline-flex;gap:var(--esp-3);margin-right:auto;margin-left:var(--esp-2)}
.ini-barra{display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap}
.ini-barra .rotulo-vis{font:var(--peso-enfase) var(--txt-grupo) var(--familia-texto),sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:var(--txt2)}
.ini-vistas{max-width:100%}
.ini-vistas button{display:inline-flex;align-items:center;gap:var(--esp-2);white-space:nowrap}
.ini-padrao.e-padrao{color:var(--al);background:var(--al-bg);cursor:default}
.ini-padrao.e-padrao svg{fill:currentColor}

/* ---------- a faixa de boas-vindas: três desenhos, um conteúdo ----------
   DEGRADÊ é o lugar 2 da linguagem de degradê ("a faixa de destaque no topo
   de uma tela"): o mesmo --deg-marca-fundo do login, e por isso o texto usa
   os tokens --login-txt*, medidos sobre ele. DISCRETA é um cartão comum.
   COMPACTA é uma linha só, para quem quer a tela para os módulos. */
.ini-faixa{display:flex;align-items:center;gap:var(--esp-5);flex-wrap:wrap;
  border-radius:var(--raio-5);padding:var(--esp-4) var(--esp-5);position:relative;overflow:hidden}
.ini-faixa[data-estilo="degrade"]{background:var(--deg-marca-fundo);color:var(--login-txt);
  --l-apoio:var(--login-txt2);--l-fraco:var(--login-txt3);--l-filete:var(--login-txt3)}
.ini-faixa[data-estilo="discreta"],.ini-faixa[data-estilo="compacta"]{background:var(--sup);
  border:1px solid var(--borda);box-shadow:var(--sombra);color:var(--txt);
  --l-apoio:var(--txt2);--l-fraco:var(--txt2);--l-filete:var(--borda)}
.ini-faixa[data-estilo="compacta"]{padding:var(--esp-3) var(--esp-4);gap:var(--esp-4);border-radius:var(--raio-4)}
.ini-quem{display:flex;align-items:center;gap:var(--esp-4);min-width:0;flex:1 1 360px}
.ini-av{position:relative;flex:none;width:var(--ini-avatar);height:var(--ini-avatar);border-radius:50%;
  display:grid;place-items:center;color:var(--av-txt);font:var(--peso-numeros) var(--txt-lg) var(--familia-texto),sans-serif;
  background:var(--av-1)}
.ini-av img{width:100%;height:100%;border-radius:50%;object-fit:cover}
.ini-faixa[data-estilo="compacta"] .ini-av{width:var(--av-shell);height:var(--av-shell);font-size:var(--txt-xs)}
/* o ponto da conexão no avatar: a MESMA cor da pastilha ao lado do nome */
.ini-av .ponto{position:absolute;right:0;bottom:0;width:var(--esp-3);height:var(--esp-3);border-radius:50%;
  background:var(--l-cor-con, var(--txt2));box-shadow:0 0 0 3px var(--l-anel-av, var(--sup))}
.ini-faixa[data-estilo="degrade"] .ini-av .ponto{--l-anel-av:var(--login-g2)}
.ini-faixa[data-estilo="compacta"] .ini-av .ponto{display:none}
.ini-ola{min-width:0;display:flex;flex-direction:column;gap:var(--esp-1)}
.ini-ola-linha{display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap}
.ini-ola h2{margin:0;font:var(--peso-apoio) var(--tit-2xl)/1 var(--familia-titulo),sans-serif;letter-spacing:.01em}
.ini-faixa[data-estilo="compacta"] .ini-ola h2{font-size:var(--tit-lg)}
.ini-frase{margin:0;font:var(--peso-apoio) var(--txt-sm)/1.5 var(--familia-texto),sans-serif;color:var(--l-apoio);max-width:62ch}
.ini-frase b{color:inherit;font-weight:var(--peso-numeros)}
.ini-dia{margin:var(--esp-2) 0 0;padding-left:var(--esp-3);border-left:2px solid var(--l-filete);max-width:56ch;
  font:italic var(--peso-apoio) var(--txt-xs)/1.5 var(--familia-texto),sans-serif;color:var(--l-apoio)}
.ini-faixa[data-estilo="compacta"] .ini-dia{margin:0;border:none;padding:0}
.ini-faixa[data-estilo="compacta"] .ini-frase{display:none}

/* a pastilha da conexão — medida de verdade, não enfeite: ver iniPing() */
.ini-con{display:inline-flex;align-items:center;gap:var(--esp-2);border-radius:var(--raio-pill);
  padding:var(--esp-1) var(--esp-3);font:var(--peso-enfase) var(--txt-xs) var(--familia-texto),sans-serif;
  background:var(--l-fundo-con, var(--sup2));color:var(--l-txt-con, var(--txt2));white-space:nowrap}
.ini-con i{width:var(--esp-2);height:var(--esp-2);border-radius:50%;background:var(--l-cor-con, var(--txt2));flex:none}
.ini-faixa[data-con="bom"]{--l-cor-con:var(--ok)}
.ini-faixa[data-con="instavel"]{--l-cor-con:var(--al)}
.ini-faixa[data-con="lenta"],.ini-faixa[data-con="fora"]{--l-cor-con:var(--err)}
/* sobre o degradê as cores de estado do tema claro somem no azul-escuro:
   ali a pastilha usa as do tema escuro, que foram medidas sobre fundo escuro */
.ini-faixa[data-estilo="degrade"]{--l-fundo-con:var(--ini-veu-marca);--l-txt-con:var(--login-txt)}
.ini-faixa[data-estilo="degrade"][data-con="bom"]{--l-cor-con:var(--ini-ok-sobre-marca)}
.ini-faixa[data-estilo="degrade"][data-con="instavel"]{--l-cor-con:var(--ini-al-sobre-marca)}
.ini-faixa[data-estilo="degrade"][data-con="lenta"],
.ini-faixa[data-estilo="degrade"][data-con="fora"]{--l-cor-con:var(--ini-err-sobre-marca)}

/* o progresso do dia — só existe quando a fonte do relatório sabe o que é
   "a tarefa de hoje" (a Gestão sabe; o resumo do sistema não) */
.ini-hoje{flex:1 1 200px;min-width:180px;max-width:var(--ini-hoje-max)}
.ini-hoje-cab{display:flex;align-items:baseline;gap:var(--esp-2);margin-bottom:6px}
.ini-hoje-cab .rot{color:var(--l-fraco);letter-spacing:.07em;text-transform:uppercase;font-size:var(--txt-grupo)}
.ini-hoje-cab .n.perc{margin-left:0;color:var(--l-cor-prog, var(--prim))}
/* a cor do progresso: as de estado do tema no cartão, as medidas sobre a
   marca no degradê — o vermelho do tema claro some no azul-escuro */
.ini-faixa{--l-prog-ok:var(--ok);--l-prog-al:var(--al);--l-prog-err:var(--err)}
.ini-faixa[data-estilo="degrade"]{--l-prog-ok:var(--ini-ok-sobre-marca);--l-prog-al:var(--ini-al-sobre-marca);
  --l-prog-err:var(--ini-err-sobre-marca)}
.ini-hoje[data-tom="ok"]{--l-cor-prog:var(--l-prog-ok)}
.ini-hoje[data-tom="al"]{--l-cor-prog:var(--l-prog-al)}
.ini-hoje[data-tom="err"]{--l-cor-prog:var(--l-prog-err)}
.ini-hoje-cab .n{margin-left:auto;font:var(--peso-numeros) var(--txt-xs) var(--familia-texto),sans-serif;font-variant-numeric:tabular-nums}
.ini-trilho{height:7px;border-radius:var(--raio-1);overflow:hidden;background:var(--l-trilho, var(--sup2))}
.ini-faixa[data-estilo="degrade"] .ini-trilho{--l-trilho:var(--ini-veu-marca)}
.ini-trilho span{display:block;height:100%;border-radius:var(--raio-1);background:var(--l-cor-prog, var(--prim));
  transform-origin:left center;transition:transform var(--dur-4) var(--ease)}
.ini-hoje-nota{margin-top:6px;font:var(--peso-apoio) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--l-fraco)}
.ini-faixa[data-estilo="compacta"] .ini-hoje{flex:none;min-width:0;display:flex;align-items:center;gap:var(--esp-2)}
.ini-faixa[data-estilo="compacta"] .ini-hoje .ini-trilho{width:96px}
.ini-faixa[data-estilo="compacta"] .ini-hoje-cab .rot,
.ini-faixa[data-estilo="compacta"] .ini-hoje-nota{display:none}
.ini-faixa[data-estilo="compacta"] .ini-hoje-cab{margin:0;order:2}

/* clima e hora — o lado direito da faixa */
.ini-agora{flex:none;display:flex;align-items:center;gap:var(--esp-5)}
.ini-filete{width:1px;align-self:stretch;min-height:var(--esp-7);background:var(--l-filete);opacity:.6}
.ini-clima{display:flex;align-items:center;gap:var(--esp-3);border:none;background:transparent;color:inherit;
  padding:0;text-align:left;font:inherit;cursor:default}
.ini-clima .ic{color:var(--l-ic-clima, var(--prim))}
.ini-faixa[data-estilo="degrade"] .ini-clima .ic{--l-ic-clima:var(--bcm-azul-claro)}
.ini-clima .temp{font:var(--peso-numeros) var(--tit-sm)/1 var(--familia-texto),sans-serif;font-variant-numeric:tabular-nums;font-size:var(--tit-md)}
.ini-clima .desc{font:var(--peso-padrao) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--l-apoio);margin-top:3px}
.ini-clima .onde{display:flex;align-items:center;gap:var(--esp-1);font:var(--peso-apoio) var(--txt-xs) var(--familia-texto),sans-serif;
  color:var(--l-fraco);margin-top:2px}
/* A CIDADE É UM BOTÃO (19.0.0): o nome que a pessoa escolheu, e o clique
   abre a busca para trocar. Sem cidade, o bloco inteiro é o convite. */
.ini-clima-cidade{display:inline-flex;align-items:center;gap:var(--esp-1);border:none;background:transparent;
  color:inherit;font:inherit;padding:0;cursor:pointer;white-space:nowrap;border-radius:var(--raio-1)}
.ini-clima-cidade:hover span{text-decoration:underline;text-underline-offset:3px}
.ini-clima-escolher{cursor:pointer}
.ini-clima-escolher .temp{font-size:var(--txt-md)}
.ini-clima-escolher .desc{display:flex;align-items:center;gap:var(--esp-1);font-weight:var(--peso-enfase);
  text-decoration:underline;text-underline-offset:3px;white-space:nowrap}
/* o painel da busca de cidade: o do select, com a linha da localização e a
   sugestão entre a busca e a lista */
.ini-cidade-painel{display:flex;flex-direction:column;width:min(340px,calc(var(--vp-w) - var(--esp-5)));color:var(--txt);text-align:left}
.ini-cidade-local{display:flex;align-items:center;gap:var(--esp-2);margin:5px 5px 0;padding:var(--esp-2) 10px;
  border:none;border-radius:var(--raio-2);background:transparent;color:var(--prim);cursor:pointer;text-align:left;
  font:var(--peso-enfase) var(--txt-sm) var(--familia-texto),sans-serif}
.ini-cidade-local:hover{background:var(--hover)}
.ini-cidade-local:disabled{cursor:progress;opacity:.75}
.ini-cidade-meio{display:flex;flex-direction:column}
.ini-cidade-sep{height:1px;background:var(--borda);margin:5px 10px}
.ini-cidade-sug{margin:5px;padding:var(--esp-3);border:1px solid var(--borda);border-radius:var(--raio-3);
  background:var(--sup2);display:flex;flex-direction:column;gap:var(--esp-2)}
.ini-cidade-sug .t{font:var(--peso-enfase) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--txt2);
  letter-spacing:.04em;text-transform:uppercase}
.ini-cidade-sug .c{font:var(--peso-enfase) var(--txt-md) var(--familia-texto),sans-serif}
.ini-cidade-sug .n{font:var(--peso-apoio) var(--txt-xs)/1.4 var(--familia-texto),sans-serif;color:var(--txt2)}
.ini-cidade-sug .lin-acoes{justify-content:flex-start;flex-wrap:wrap}
.ini-cidade-painel .sel-lista{max-height:260px}
.ini-clima[data-estado="indisponivel"] .temp{font-size:var(--txt-md);color:var(--l-apoio)}
/* A CAIXA do clima: o bloco e, abaixo dele, a nota do motivo quando o
   clima não veio (só para quem administra). */
.ini-clima-caixa{display:flex;flex-direction:column;gap:var(--esp-2)}
.ini-clima-nota{display:flex;align-items:flex-start;gap:var(--esp-1);
  font:var(--peso-apoio) var(--txt-xs)/1.4 var(--familia-texto),sans-serif;color:var(--l-apoio);
  max-width:34ch}
.ini-clima-nota svg{flex:none;margin-top:2px}
.ini-hora{text-align:right}
.ini-hora .h{font:var(--peso-apoio) var(--tit-xl)/1 var(--familia-titulo),sans-serif;font-variant-numeric:tabular-nums}
.ini-hora .d{font:var(--peso-padrao) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--l-fraco);margin-top:3px}
.ini-hora .fer{display:inline-block;margin-top:var(--esp-1);font:var(--peso-enfase) var(--txt-grupo) var(--familia-texto),sans-serif;
  letter-spacing:.06em;text-transform:uppercase;color:var(--l-apoio)}
.ini-faixa[data-estilo="compacta"] .ini-agora{gap:var(--esp-4)}
.ini-faixa[data-estilo="compacta"] .ini-filete,
.ini-faixa[data-estilo="compacta"] .ini-clima .onde,
.ini-faixa[data-estilo="compacta"] .ini-clima .desc{display:none}
.ini-faixa[data-estilo="compacta"] .ini-hora .h{font-size:var(--tit-md)}
.ini-faixa[data-estilo="compacta"] .ini-hora{display:flex;align-items:baseline;gap:var(--esp-2)}
.ini-faixa[data-estilo="compacta"] .ini-hora .d,.ini-faixa[data-estilo="compacta"] .ini-hora .fer{margin:0}

/* ---------- o corpo: módulos | relatório ----------
   As colunas mudam com a visualização, e só com ela. */
.ini-corpo{display:grid;gap:var(--esp-5);align-items:start;grid-template-columns:minmax(0,1fr)}
.ini-corpo[data-vista="completa"]{grid-template-columns:minmax(0,1.3fr) minmax(var(--ini-relatorio-min),1fr)}
.ini-corpo[data-vista="atalhos"]{grid-template-columns:minmax(var(--ini-lateral-min),var(--ini-lateral-l)) minmax(0,1fr)}
.ini-corpo[data-so="1"]{grid-template-columns:minmax(0,1fr)}
.ini-coluna{min-width:0;display:flex;flex-direction:column;gap:var(--esp-3)}
.ini-sec-cab{display:flex;align-items:baseline;gap:var(--esp-3);flex-wrap:wrap;min-height:var(--alt-ctrl-sm)}
.ini-sec-cab h3{margin:0;font:var(--peso-apoio) var(--tit-md)/1 var(--familia-titulo),sans-serif;letter-spacing:.03em}
.ini-sec-cab .apoio{font:var(--peso-apoio) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--txt2)}

/* ---------- os módulos ---------- */
.ini-mod-barra{display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap}
.ini-mod-barra .busca-campo{width:var(--busca-tela-l);max-width:100%}
/* AUTO-FIT, NÃO AUTO-FILL. Com auto-fill a grade reserva as colunas que
   caberiam e as vazias ficam lá: um sistema de dois módulos desenhava dois
   cartões pequenos e três buracos do lado. auto-fit recolhe a coluna vazia e
   os cartões que existem ocupam a linha. O `min()` é o que impede o cartão de
   ficar mais largo que a coluna no celular. */
.ini-mod-grade{display:grid;gap:var(--esp-3);
  grid-template-columns:repeat(auto-fit,minmax(min(var(--ini-mod-min-compacto),100%),1fr))}
.ini-mod-grade[data-grande="1"]{gap:var(--esp-4);
  grid-template-columns:repeat(auto-fit,minmax(min(var(--ini-mod-min),100%),1fr))}
/* SISTEMA DE POUCOS MÓDULOS: o cartão não estica sem fim (um cartão de 900px
   é uma faixa, não um cartão) e a coluna do relatório fica com a sobra.
   E o CONTRÁRIO também não pode acontecer, que foi o defeito medido aqui:
   `repeat(2,1fr)` cravava duas colunas mesmo dentro da coluna estreitada pelo
   data-poucos, e um sistema de dois módulos abria com cartões de 145px a
   1100px de tela — a melhoria "reenquadrar" ENCOLHIA o cartão. Agora o corte
   é por espaço: duas colunas só quando caberem dois cartões do tamanho cheio;
   não cabendo, os dois empilham e cada um fica com a largura toda. */
.ini-mod-grade[data-n="1"]{grid-template-columns:minmax(0,var(--ini-mod-max))}
.ini-mod-grade[data-n="2"]{
  grid-template-columns:repeat(auto-fit,minmax(min(var(--ini-mod-max),100%),var(--ini-mod-max)))}
/* POUCOS MÓDULOS: a coluna deles encolhe até o tamanho dos cartões, e a
   SOBRA vai para o relatório. Com uma fração fixa (.85fr) a coluna ficava
   maior que o cartão — a 1920px eram 610px de coluna para um cartão de 460, e
   os 150 restantes viravam um buraco entre as duas colunas. `fit-content` faz
   a coluna medir o conteúdo e parar no máximo do cartão; abaixo disso ela
   ainda cede espaço para o relatório chegar ao mínimo dele. */
.ini-corpo[data-vista="completa"][data-poucos="1"]{
  grid-template-columns:fit-content(var(--ini-mod-max)) minmax(var(--ini-relatorio-min),1fr)}
.ini-mod{position:relative;min-width:0;display:flex;flex-direction:column;background:var(--sup);border:1px solid var(--borda);
  border-radius:var(--raio-4);padding:var(--esp-4);box-shadow:var(--sombra);cursor:pointer;
  transition:border-color var(--dur-1),box-shadow var(--dur-1),transform var(--dur-1)}
.ini-mod:hover{border-color:var(--prim);box-shadow:var(--sombra-h);transform:translateY(-1px)}
.ini-mod[data-tom="err"]{border-color:var(--err)}
.ini-mod-grade[data-grande="1"] .ini-mod{padding:var(--esp-5) var(--esp-5) var(--esp-4);border-radius:var(--raio-5)}
.ini-mod-topo{display:flex;align-items:flex-start;gap:var(--esp-3);min-width:0}
.ini-mod-ic{width:var(--ini-mod-icone-compacto);height:var(--ini-mod-icone-compacto);flex:none;border-radius:var(--raio-3);
  display:grid;place-items:center;color:var(--av-txt);background:var(--l-cor-mod, var(--av-1))}
.ini-mod-grade[data-grande="1"] .ini-mod-ic{width:var(--ini-mod-icone);height:var(--ini-mod-icone);border-radius:var(--raio-4)}
/* O SELO ENCOLHE, A ESTRELA NÃO. O selo é texto do projeto ("1 backup com
   falha") e o cartão pode ficar estreito — com a grade de quatro colunas numa
   tela larga, ou a de três numa média. Sem poder encolher, o selo empurrava a
   estrela para FORA do cartão. Agora ele corta com reticências e mostra o
   texto inteiro no title. */
.ini-mod-topo .badge{margin-left:auto;align-self:flex-start;min-width:0;overflow:hidden;text-overflow:ellipsis}
.ini-mod-topo .badge.so-selo{margin-left:auto}
.ini-estrela{width:var(--alt-ctrl-sm);height:var(--alt-ctrl-sm);margin:calc(var(--esp-2) * -1) calc(var(--esp-2) * -1) 0 0;
  flex:none;border:none;border-radius:var(--raio-2);background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--borda-ctrl)}
.ini-estrela:hover{background:var(--hover);color:var(--al)}
.ini-estrela[aria-pressed="true"]{color:var(--al)}
.ini-estrela[aria-pressed="true"] svg{fill:currentColor}
.ini-estrela:focus-visible{outline:none;box-shadow:var(--anel)}
.ini-mod-nome{margin-top:var(--esp-3);border:none;background:transparent;padding:0;text-align:left;cursor:pointer;color:var(--txt);
  font:var(--peso-enfase) var(--txt-lg) var(--familia-texto),sans-serif}
.ini-mod-grade[data-grande="1"] .ini-mod-nome{font-size:var(--tit-sm);margin-top:var(--esp-4)}
.ini-mod-nome:focus-visible{outline:none;box-shadow:var(--anel);border-radius:var(--raio-0)}
.ini-mod-desc{margin:var(--esp-1) 0 0;font:var(--peso-apoio) var(--txt-xs)/1.5 var(--familia-texto),sans-serif;color:var(--txt2)}
.ini-mod-grade[data-grande="1"] .ini-mod-desc{font-size:var(--txt-sm)}
/* AS TELAS DO MÓDULO, DENTRO DO CARTÃO. O cartão levava a UMA tela (a
   primeira do grupo) e a pessoa entrava para navegar de novo pelo menu. As
   telas aqui são as MESMAS de GRUPOS, já peneiradas por telaNoMenu() — quem
   não alcança a tela não vê o atalho para ela. Elas também são o que enche o
   cartão: com dois módulos, a coluna ficava alta e vazia. */
.ini-mod-telas{display:flex;flex-wrap:wrap;gap:6px;margin-top:var(--esp-3)}
.ini-mod-tela{display:inline-flex;align-items:center;gap:6px;max-width:100%;min-width:0;padding:var(--esp-1) 10px;
  border:1px solid var(--borda);background:var(--sup2);color:var(--txt2);border-radius:var(--raio-2);cursor:pointer;
  font:var(--peso-padrao) var(--txt-xs) var(--familia-texto),sans-serif;
  transition:background var(--dur-1),color var(--dur-1),border-color var(--dur-1)}
.ini-mod-tela:hover,.ini-mod-tela:focus-visible{background:var(--prim-suave);border-color:var(--prim);color:var(--prim)}
.ini-mod-tela svg{flex:none}
.ini-mod-tela .txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ini-mod-tela.mais{border-style:dashed}
.ini-mod-pe{margin-top:auto;padding-top:var(--esp-3);display:flex;flex-direction:column;align-items:flex-start;gap:var(--esp-3)}
.ini-mod-ir{display:inline-flex;align-items:center;gap:6px;font:var(--peso-enfase) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--prim)}
.ini-acoes{display:flex;gap:6px;flex-wrap:wrap}
.ini-mod-linha .ini-acoes{flex:none}
.ini-acoes .btn-ter{height:var(--alt-ctrl-sm);font-size:var(--txt-xs);padding:0 var(--esp-3)}
/* mosaico: o ícone é o assunto; a descrição e as ações saem */
.ini-mosaico{display:grid;gap:var(--esp-3);grid-template-columns:repeat(auto-fit,minmax(min(var(--ini-mosaico-min),100%),1fr))}
.ini-mosaico .ini-mod{align-items:center;text-align:center;padding:var(--esp-4) var(--esp-3)}
.ini-mosaico .ini-mod-ic{width:var(--ini-mosaico-icone);height:var(--ini-mosaico-icone);border-radius:var(--raio-5)}
.ini-mosaico .ini-mod-nome{margin-top:var(--esp-3);text-align:center;font-size:var(--txt-md)}
.ini-mosaico .badge{margin-top:var(--esp-2)}
.ini-mosaico .ini-estrela{position:absolute;top:var(--esp-2);right:var(--esp-2);margin:0}
/* lista: uma linha por módulo — é a que cabe na coluna do Relatório + atalhos */
.ini-mod-lista{display:flex;flex-direction:column;gap:var(--esp-1);padding:var(--esp-2)}
.ini-mod-linha{display:flex;align-items:center;gap:var(--esp-3);padding:var(--esp-2) var(--esp-3);border-radius:var(--raio-3);
  cursor:pointer;min-width:0}
.ini-mod-linha:hover{background:var(--hover)}
.ini-mod-linha[data-pend="1"]{background:var(--sup2)}
.ini-mod-linha[data-pend="1"]:hover{background:var(--hover)}
.ini-mod-linha .ini-mod-ic{width:calc(var(--alvo-toque) - var(--esp-4));height:calc(var(--alvo-toque) - var(--esp-4));border-radius:var(--raio-3)}
.ini-mod-linha .ini-mod-nome{margin:0;font-size:var(--txt-sm);flex:1;min-width:0}
.ini-mod-linha .ini-mod-nome small{display:block;font:var(--peso-apoio) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--txt2)}
.ini-mod-linha .ini-estrela{margin:0;width:var(--alt-ctrl-sm);height:var(--alt-ctrl-sm)}
.ini-mod-linha .btn-linha{flex:none}
.ini-ok{font:var(--peso-numeros) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--ok);white-space:nowrap}

/* ---------- o relatório (ou o resumo) ---------- */
.ini-kpis{display:grid;gap:var(--esp-3);grid-template-columns:repeat(auto-fit,minmax(var(--ini-kpi-min),1fr))}
.ini-kpi{min-width:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start;text-align:left;background:var(--sup);
  border:1px solid var(--borda);border-radius:var(--raio-4);padding:var(--esp-3) var(--esp-4);box-shadow:var(--sombra);
  font:inherit;color:inherit;cursor:pointer;transition:border-color var(--dur-1),transform var(--dur-1)}
.ini-kpi:hover{border-color:var(--prim);transform:translateY(-1px)}
.ini-kpi:focus-visible{outline:none;box-shadow:var(--anel)}
.ini-kpi .kpi-nome{font-size:var(--txt-grupo);letter-spacing:.08em}
.ini-kpi .v{font:var(--peso-numeros) var(--tit-xl)/1 var(--familia-texto),sans-serif;font-variant-numeric:tabular-nums;color:var(--txt)}
.ini-kpi .n{font:var(--peso-enfase) var(--txt-xs)/1.35 var(--familia-texto),sans-serif;color:var(--txt2)}
.ini-kpi[data-tom="ok"] .v,.ini-kpi[data-nota="ok"] .n{color:var(--ok)}
.ini-kpi[data-tom="err"] .v,.ini-kpi[data-nota="err"] .n{color:var(--err)}
.ini-kpi[data-tom="al"] .v,.ini-kpi[data-nota="al"] .n{color:var(--al)}
.ini-corpo[data-vista="completa"] .ini-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
.ini-graficos{display:grid;gap:var(--esp-4);align-items:start;grid-template-columns:minmax(0,1fr)}
.ini-graficos[data-largo="1"]{grid-template-columns:minmax(0,1.6fr) minmax(var(--ini-situacao-min),1fr)}
.ini-legenda{display:inline-flex;align-items:center;gap:var(--esp-1);font:var(--peso-padrao) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--txt2)}
.ini-legenda i{width:var(--esp-2);height:var(--esp-2);border-radius:2px;background:var(--l-cor, var(--prim));box-shadow:inset 0 0 0 1px var(--l-cor, var(--prim))} /* bcm-ok: a amostra da legenda é um quadrado de 8px, e o raio dela acompanha o topo das barras */
.ini-barras{height:var(--ini-barras-alt);display:flex;align-items:flex-end;gap:var(--esp-1);padding-top:var(--esp-3)}
.ini-barras[data-largo="1"]{height:var(--ini-barras-alt-larga)}
.ini-dia-col{flex:1;min-width:0;height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:var(--esp-1)}
/* as duas séries no MESMO lugar: a de comparação atrás, larga, e a
   principal na frente, estreita. Lado a lado, trinta dias viravam sessenta
   riscos — um código de barras em vez de um gráfico. */
.ini-dia-col .par{flex:1;position:relative;min-height:0}
.ini-dia-col .par span{position:absolute;bottom:0;height:100%;border-radius:var(--raio-0) var(--raio-0) 0 0;transform-origin:bottom;
  transform:scaleY(var(--l-v, 0));transition:transform var(--dur-3) var(--ease)} /* bcm-ok: o topo da barra é arredondado e a base encosta no eixo — canto reto com motivo (o filete do eixo) */
.ini-dia-col .a{background:var(--prim);left:22%;right:22%}
.ini-dia-col .b{background:var(--borda);left:0;right:0}
.ini-dia-col[data-hoje="1"] .a{background:var(--bcm-azul-claro)}
.ini-dia-col .rot{font:var(--peso-padrao) var(--txt-grupo) var(--familia-texto),sans-serif;color:var(--txt2);text-align:center;
  white-space:nowrap;min-height:1.2em}
.ini-dia-col[data-hoje="1"] .rot{color:var(--prim);font-weight:var(--peso-numeros)}
.ini-situacao{display:flex;flex-direction:column;gap:var(--esp-4)}
.ini-rosca{display:flex;align-items:center;gap:var(--esp-4);flex-wrap:wrap}
.ini-rosca svg{width:var(--ini-rosca);height:var(--ini-rosca);flex:none}
.ini-rosca .rosca-legenda{min-width:150px}
.ini-grupos{border-top:1px solid var(--borda);padding-top:var(--esp-3);display:flex;flex-direction:column;gap:var(--esp-2)}
/* NO PAINEL PRÓPRIO ele não divide espaço com a rosca (17.0.0): o filete
   de cima sai — o cabeçalho do painel já separa — e o rótulo ganha a
   largura que lá não havia, onde "Nesta semana" terminava em reticência. */
.painel-graf > .ini-grupos{border-top:none;padding-top:0}
.painel-graf > .ini-grupos .ini-grupo{grid-template-columns:minmax(0,9.5rem) minmax(40px,1fr) auto;
  font-size:var(--txt-sm)}
.ini-grupos .rot{font-size:var(--txt-grupo);letter-spacing:.1em;text-transform:uppercase}
.ini-grupo{display:grid;grid-template-columns:minmax(0,var(--ini-grupo-rot)) minmax(40px,1fr) auto;align-items:center;gap:var(--esp-2);
  font:var(--peso-padrao) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--txt2)}
.ini-grupo .nome{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ini-grupo .trilho{height:7px;border-radius:var(--raio-0);background:var(--sup2);overflow:hidden}
.ini-grupo .trilho span{display:block;height:100%;background:var(--l-cor, var(--prim));transform-origin:left;
  transition:transform var(--dur-3) var(--ease)}
.ini-grupo .n{font-weight:var(--peso-numeros);color:var(--txt);font-variant-numeric:tabular-nums;text-align:right}
/* a linha vira BOTÃO quando leva à lista filtrada (17.0.0): mesmo desenho,
   mais o alvo. `button` traz margem, borda e fundo próprios do navegador —
   os três saem, senão a linha clicável nasce desalinhada das outras. */
button.ini-grupo{width:100%;border:none;background:transparent;padding:0;margin:0;
  text-align:left;cursor:pointer;border-radius:var(--raio-1);font:inherit;color:inherit}
button.ini-grupo:hover .nome{color:var(--txt)}
button.ini-grupo:hover .trilho{background:var(--hover)}
button.ini-grupo:focus-visible{outline:none;box-shadow:var(--anel)}

/* a lista de itens, em quatro desenhos */
.ini-lista-cab{display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap;padding:var(--esp-4) var(--esp-5) var(--esp-3)}
.ini-lista-cab .tit{margin-right:var(--esp-1)}
.ini-lista-cab .pilulas{display:flex;gap:6px;flex-wrap:wrap}
.ini-estilos{display:inline-flex;gap:2px;padding:3px;border:1px solid var(--borda-ctrl);border-radius:var(--raio-2);background:var(--sup)}
.ini-estilos button{width:var(--alt-ctrl-sm);height:calc(var(--alt-ctrl-sm) - 6px);border:none;border-radius:var(--raio-1);
  background:transparent;color:var(--txt2);cursor:pointer;display:grid;place-items:center}
.ini-estilos button:hover{background:var(--hover);color:var(--txt)}
.ini-estilos button[aria-pressed="true"]{background:var(--nav-ativo);color:var(--nav-ativo-txt)}
.ini-estilos button:focus-visible{outline:none;box-shadow:var(--anel)}
.ini-item{display:flex;align-items:center;gap:var(--esp-3);padding:var(--esp-3) var(--esp-5);border-top:1px solid var(--borda);cursor:pointer}
.ini-item:hover{background:var(--hover)}
.ini-item[data-atraso="1"]{background:var(--sup2)}
.ini-item[data-atraso="1"]:hover{background:var(--hover)}
.ini-item .chk{flex:none}
.ini-item-txt{flex:1;min-width:0}
.ini-item-tit{display:block;border:none;background:transparent;padding:0;text-align:left;cursor:pointer;color:var(--txt);
  font:var(--peso-enfase) var(--txt-md) var(--familia-texto),sans-serif;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ini-item-tit:focus-visible{outline:none;box-shadow:var(--anel);border-radius:var(--raio-0)}
.ini-item[data-feita="1"] .ini-item-tit{color:var(--txt2);text-decoration:line-through}
.ini-item-sub{display:block;font:var(--peso-apoio) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--txt2);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ini-tabela .tab-wrap{border-top:1px solid var(--borda)}
.ini-tabela td .ini-item-tit{white-space:normal}
.ini-prazo[data-tom="err"]{color:var(--err)}
.ini-prazo[data-tom="al"]{color:var(--al)}
.ini-prazo{font-weight:var(--peso-numeros);font-variant-numeric:tabular-nums;white-space:nowrap}
.ini-kanban{display:grid;gap:var(--esp-3);align-items:start;padding:var(--esp-1) var(--esp-4) var(--esp-4);
  grid-template-columns:repeat(auto-fit,minmax(var(--ini-coluna-min),1fr))}
.ini-coluna-k{min-width:0;display:flex;flex-direction:column;gap:var(--esp-2);background:var(--sup2);
  border:1px solid var(--borda);border-radius:var(--raio-3);padding:var(--esp-3)}
.ini-coluna-k .cab{display:flex;align-items:center;gap:var(--esp-2);font:var(--peso-enfase) var(--txt-xs) var(--familia-texto),sans-serif;
  letter-spacing:.04em;text-transform:uppercase}
.ini-coluna-k .cab i{width:var(--esp-2);height:var(--esp-2);border-radius:50%;background:var(--l-cor, var(--prim))}
.ini-coluna-k .cab .qtd{margin-left:auto;font-weight:var(--peso-numeros);font-variant-numeric:tabular-nums;color:var(--txt2)}
.ini-cartao-k{background:var(--sup);border:1px solid var(--borda);border-radius:var(--raio-2);padding:var(--esp-3);cursor:pointer}
.ini-cartao-k:hover{border-color:var(--prim)}
.ini-cartao-k[data-atraso="1"]{border-color:var(--err)}
.ini-cartao-k .linha{display:flex;align-items:flex-start;gap:var(--esp-2)}
.ini-cartao-k .ini-item-tit,.ini-linha-t .ini-item-tit{white-space:normal}
.ini-cartao-k .pe{display:flex;align-items:center;gap:var(--esp-2);margin-top:var(--esp-2);font:var(--peso-padrao) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--txt2)}
.ini-cartao-k .pe .badge{margin-left:auto}
.ini-coluna-k .vazia{padding:var(--esp-4) var(--esp-2);text-align:center;font:var(--peso-padrao) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--txt2)}
.ini-linha-t{list-style:none;margin:0;padding:var(--esp-2) var(--esp-5) var(--esp-4)}
.ini-linha-t li{display:flex;gap:var(--esp-3)}
.ini-linha-t .q{width:var(--ini-linha-q);flex:none;padding-top:2px;text-align:right}
.ini-linha-t .q .ini-prazo{font-size:var(--txt-xs)}
.ini-linha-t .eixo{width:var(--esp-3);flex:none;display:flex;flex-direction:column;align-items:center}
.ini-linha-t .eixo i{width:var(--esp-3);height:var(--esp-3);border-radius:50%;margin-top:3px;background:var(--l-cor, var(--prim));flex:none}
.ini-linha-t .eixo b{width:2px;flex:1;background:var(--borda)}
.ini-linha-t li:last-child .eixo b{visibility:hidden}
.ini-linha-t .corpo{flex:1;min-width:0;padding-bottom:var(--esp-4)}
.ini-linha-t .corpo .linha{display:flex;align-items:flex-start;gap:var(--esp-2)}
.ini-vazio-lista{padding:var(--esp-6) var(--esp-5);text-align:center;border-top:1px solid var(--borda);
  font:var(--peso-padrao) var(--txt-sm) var(--familia-texto),sans-serif;color:var(--txt2)}
.ini-lista-pe{display:flex;justify-content:flex-end;padding:var(--esp-2) var(--esp-4) var(--esp-3);border-top:1px solid var(--borda)}

/* ---------- pendências do dia ---------- */
/* O desenho da faixa é do COMPONENTE `.faixa-sit` (busque por FAIXA DE
   SITUAÇÃO neste arquivo): a Início é só o primeiro lugar que o usa. */
.ini-pend-cartoes{display:grid;gap:var(--esp-3);grid-template-columns:repeat(auto-fit,minmax(var(--ini-pend-min),1fr))}
.ini-pend-cartao{min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:var(--esp-1);text-align:left;
  background:var(--sup);border:1px solid var(--borda);border-radius:var(--raio-4);padding:var(--esp-3) var(--esp-4);
  box-shadow:var(--sombra);cursor:pointer;font:inherit;color:inherit;transition:border-color var(--dur-1),transform var(--dur-1)}
.ini-pend-cartao:hover{border-color:var(--prim);transform:translateY(-1px)}
.ini-pend-cartao:focus-visible{outline:none;box-shadow:var(--anel)}
.ini-pend-cartao[data-tom="err"]{--l-cor:var(--err);border-color:var(--err)}
.ini-pend-cartao[data-tom="al"]{--l-cor:var(--al)}
.ini-pend-cartao[data-tom="prim"]{--l-cor:var(--prim)}
.ini-pend-cartao[data-zero="1"]{--l-cor:var(--ok);border-color:var(--borda)}
.ini-pend-cartao .cab{display:flex;align-items:center;gap:var(--esp-2);color:var(--l-cor, var(--txt2));
  font:var(--peso-enfase) var(--txt-grupo) var(--familia-texto),sans-serif;letter-spacing:.06em;text-transform:uppercase}
.ini-pend-cartao .n{font:var(--peso-numeros) var(--tit-xl)/1 var(--familia-texto),sans-serif;font-variant-numeric:tabular-nums;
  color:var(--l-cor, var(--txt));margin-top:var(--esp-1)}
.ini-pend-cartao .det{font:var(--peso-apoio) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--txt2)}

/* ---------- onde você estava + equipe agora ---------- */
.ini-recentes{display:flex;align-items:center;gap:var(--esp-3);flex-wrap:wrap}
.ini-recentes .rotulo-vis{font:var(--peso-enfase) var(--txt-grupo) var(--familia-texto),sans-serif;letter-spacing:.1em;
  text-transform:uppercase;color:var(--txt2);flex:none}
.ini-recente{display:inline-flex;align-items:center;gap:var(--esp-2);max-width:100%;height:var(--alt-ctrl-sm);
  padding:0 var(--esp-3);border:1px solid var(--borda);border-radius:var(--raio-pill);background:var(--sup);cursor:pointer;
  font:var(--peso-padrao) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--txt)}
.ini-recente span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ini-recente svg{color:var(--prim);flex:none}
.ini-recente:hover{border-color:var(--prim)}
.ini-recente:focus-visible{outline:none;box-shadow:var(--anel)}
.ini-equipe{display:flex;align-items:center;gap:var(--esp-5);flex-wrap:wrap;padding:var(--esp-3) var(--esp-5)}
.ini-equipe h3{margin:0;flex:none;font:var(--peso-apoio) var(--tit-md)/1 var(--familia-titulo),sans-serif;letter-spacing:.03em}
.ini-pessoa{display:flex;align-items:center;gap:var(--esp-2);font:var(--peso-padrao) var(--txt-sm) var(--familia-texto),sans-serif}
.ini-pessoa .av{width:calc(var(--av-shell) - var(--esp-1));height:calc(var(--av-shell) - var(--esp-1));
  border-radius:50%;display:grid;place-items:center;color:var(--av-txt);font:var(--peso-numeros) var(--txt-grupo) var(--familia-texto),sans-serif}
.ini-pessoa small{display:block;font:var(--peso-apoio) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--txt2)}

/* ---------- a gaveta de preferências da tela inicial ----------
   A ÚNICA GAVETA QUE NÃO DESFOCA O QUE ESTÁ ATRÁS. O véu desfocado diz "a
   tela de trás não é para agora" — e aqui a tela de trás é justamente o que
   se está escolhendo: cada clique muda a Início na hora, e desfocada ela não
   mostraria a mudança. Fica só o escurecimento, mais leve que o do modal. */
#ini-prefs::backdrop{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(15,22,28,.3)} /* bcm-ok: véu da gaveta de preferências da Início — o mesmo escurecimento do dialog::backdrop, mais leve e SEM desfoque, porque a tela atrás é a pré-visualização ao vivo */
.ini-prefs-sec{display:flex;flex-direction:column;gap:var(--esp-3)}
.ini-prefs-sec+.ini-prefs-sec{border-top:1px solid var(--borda);padding-top:var(--esp-5)}
.ini-prefs-sec .cab{display:flex;align-items:baseline;gap:var(--esp-2);flex-wrap:wrap}
.ini-prefs-sec .cab .rot{font-size:var(--txt-grupo);letter-spacing:.1em;text-transform:uppercase}
.ini-prefs-sec>.presets{align-self:flex-start;max-width:100%}
.ini-prefs-sec>.rot{margin-bottom:calc(var(--esp-1) * -1)}
.ini-prefs-sec .cab .apoio{font:var(--peso-apoio) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--txt2)}
.ini-opcoes{display:grid;gap:var(--esp-2);grid-template-columns:repeat(auto-fill,minmax(var(--ini-opcao-min),1fr))}
.ini-opcao{display:flex;flex-direction:column;gap:var(--esp-2);align-items:stretch;text-align:left;padding:var(--esp-3);
  background:var(--sup);border:1px solid var(--borda-ctrl);border-radius:var(--raio-3);cursor:pointer;font:inherit;color:var(--txt2);
  transition:border-color var(--dur-1),background var(--dur-1)}
.ini-opcao:hover{border-color:var(--prim)}
.ini-opcao[aria-checked="true"]{border-color:var(--prim);background:var(--prim-suave);color:var(--txt);box-shadow:0 0 0 1px var(--prim)}
.ini-opcao:focus-visible{outline:none;box-shadow:var(--anel)}
.ini-opcao .nome{display:flex;align-items:center;gap:var(--esp-2);font:var(--peso-enfase) var(--txt-xs) var(--familia-texto),sans-serif}
.ini-opcao .sub{font:var(--peso-apoio) var(--txt-xs)/1.4 var(--familia-texto),sans-serif;color:var(--txt2)}
.ini-opcao .selo{margin-left:auto}
.ini-opcao-ic{align-items:center;text-align:center}
.ini-opcao-ic .nome{justify-content:center}
.ini-opcao-ic .caixa{width:var(--alt-ctrl-sm);height:var(--alt-ctrl-sm);border-radius:var(--raio-2);display:grid;place-items:center;
  background:var(--sup2);color:var(--txt2)}
.ini-opcao-ic[aria-checked="true"] .caixa{background:var(--nav-ativo);color:var(--nav-ativo-txt)}
/* a miniatura da visualização: um esquema da tela, desenhado com tokens,
   para a pessoa escolher olhando e não lendo */
.ini-mini{height:var(--ini-miniatura-alt);border-radius:var(--raio-2);background:var(--fundo);border:1px solid var(--borda);
  padding:5px;display:flex;flex-direction:column;gap:var(--esp-1)}
.ini-mini i{display:block;border-radius:2px;background:var(--borda)} /* bcm-ok: a miniatura é um desenho em escala de 1 para 8 da tela — o raio dela é o raio da tela dividido pela escala */
.ini-mini .f{height:var(--esp-3);background:var(--deg-marca-fundo)}
.ini-mini .c{flex:1;display:flex;gap:var(--esp-1)}
.ini-mini .c i{flex:1}
.ini-mini .c .p{background:var(--prim-suave)}
.ini-mini .c .g{background:repeating-linear-gradient(90deg,var(--borda) 0 22%,transparent 22% 26%)}
.ini-mini .r{height:6px}
.ini-amostra{height:calc(var(--esp-6) + 2px);border-radius:var(--raio-2);border:1px solid var(--borda)}
.ini-amostra[data-estilo="degrade"]{background:var(--deg-marca-fundo)}
.ini-amostra[data-estilo="discreta"]{background:var(--sup2)}
.ini-amostra[data-estilo="compacta"]{background:repeating-linear-gradient(180deg,var(--sup2) 0 9px,var(--fundo) 9px 12px)}
.ini-bloco{display:flex;align-items:center;gap:var(--esp-3)}
.ini-bloco .txt{flex:1;min-width:0;font:var(--peso-padrao) var(--txt-sm) var(--familia-texto),sans-serif;color:var(--txt)}
.ini-bloco .txt small{display:block;font:var(--peso-apoio) var(--txt-xs)/1.4 var(--familia-texto),sans-serif;color:var(--txt2);margin-top:1px}
.ini-bloco .inerte{flex:none}
/* a linha da cidade do clima: o nome escolhido e o botão de trocar */
.ini-bloco-cidade .btn{flex:none}
.ini-ordem{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}
.ini-ordem>li{background:var(--sup2);border:1px solid var(--borda);border-radius:var(--raio-3);padding:var(--esp-2) var(--esp-3)}
.ini-ordem>li.arrastando{opacity:.5}
.ini-ordem>li.sobre{border-color:var(--prim)}
.ini-ordem .linha{display:flex;align-items:center;gap:var(--esp-2)}
.ini-ordem .alca{color:var(--txt2);cursor:grab;display:grid}
.ini-ordem .nome{flex:1;min-width:0;font:var(--peso-enfase) var(--txt-sm) var(--familia-texto),sans-serif}
.ini-ordem .ini-mod-ic{width:calc(var(--alt-ctrl-sm) - var(--esp-1));height:calc(var(--alt-ctrl-sm) - var(--esp-1));border-radius:var(--raio-2)}
.ini-ordem .acoes-rap{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin:var(--esp-2) 0 var(--esp-1);
  padding-left:calc(var(--alt-ctrl-sm) + var(--esp-4))}
.ini-ordem .acoes-rap .rot{font-size:var(--txt-xs);margin-right:var(--esp-1)}
.ini-ordem .chip-filtro{height:var(--alt-ctrl-sm);font-size:var(--txt-xs)}
.ini-conta{font:var(--peso-enfase) var(--txt-xs) var(--familia-texto),sans-serif;color:var(--txt2);font-variant-numeric:tabular-nums}
.ini-fonte{font:var(--peso-apoio) var(--txt-xs)/1.5 var(--familia-texto),sans-serif;color:var(--txt2)}

/* a entrada da tela: os blocos sobem em sequência curta, e só na entrada */
.tela.anima .ini-faixa,.tela.anima .ini-mod,.tela.anima .ini-kpi,.tela.anima .ini-pend-cartao{
  animation:cartaoEntra var(--dur-3) var(--ease) backwards;animation-delay:calc(var(--l-k, 0) * .04s)} /* bcm-ok: .04s é o PASSO entre um cartão e o seguinte, o mesmo escalonamento dos KPIs do dashboard */

@media (max-width:1180px){
  .ini-corpo[data-vista="completa"],.ini-corpo[data-vista="atalhos"]{grid-template-columns:minmax(0,1fr)}
  .ini-graficos[data-largo="1"]{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:900px){
  .ini-barra .rotulo-vis{display:none}
  /* AS QUATRO ESCRITAS, EM DUAS LINHAS DE DUAS (13.0.0).
     Até a 13.0.0 o celular escondia o nome das não escolhidas
     (`button:not(.ativo) span{display:none}`) para as quatro caberem numa
     linha só. O resultado era uma barra com UM rótulo e TRÊS ícones mudos:
     quem chegava na tela não tinha como saber o que as outras três faziam
     sem tocar em cada uma para descobrir. `aria-label` resolve para quem
     ouve e não resolve para quem enxerga.
     A regra que ficou: CONTROLE QUE TEM IRMÃO COM NOME ESCRITO NÃO FICA SEM
     O SEU. Ou todos no ícone, ou todos escritos — e aqui cabe escrever,
     bastou parar de exigir uma linha só. */
  .ini-vistas{width:100%;display:grid;grid-template-columns:1fr 1fr}
  .ini-vistas button{padding:0 var(--esp-2);justify-content:center;
    white-space:normal;line-height:1.2;min-height:var(--alt-ctrl)}
  /* a grade desfaz o `button+button` da fileira: a divisa vertical é da
     segunda coluna, a horizontal é da segunda linha */
  .ini-vistas button+button{border-left:none}
  .ini-vistas button:nth-child(2n){border-left:1px solid var(--borda-ctrl)}
  .ini-vistas button:nth-child(n+3){border-top:1px solid var(--borda-ctrl)}
  .ini-clima .onde{white-space:nowrap}
  .ini-faixa{padding:var(--esp-4);gap:var(--esp-4)}
  .ini-quem{flex-basis:100%}
  .ini-ola h2{font-size:var(--tit-xl)}
  .ini-agora{width:100%;justify-content:space-between}
  .ini-hoje{max-width:none}
  .ini-mod-barra .busca-campo{width:100%}
  .ini-item,.ini-lista-cab{padding-left:var(--esp-4);padding-right:var(--esp-4)}
  /* O ITEM NÃO ENCOLHE ABAIXO DO PRÓPRIO TEXTO. As duas colunas de 45% são o
     desenho, mas o rótulo não quebra linha: quando ele era mais comprido que a
     coluna, o texto SAÍA do item — "abertas há +7 dias" atravessava o ícone do
     item seguinte, e o último da fila encostava na borda do cartão. Com o
     mínimo no tamanho do texto, o item que não cabe desce para a linha de
     baixo inteiro, que é o que a faixa já sabe fazer (ela quebra linha). */
  .faixa-sit-item{border-left:none;padding-left:0;flex-basis:45%;min-width:max-content}
  .ini-linha-t{padding:var(--esp-2) var(--esp-4) var(--esp-4)}
  .ini-equipe{gap:var(--esp-3)}
}
@media (prefers-reduced-motion:reduce){
  .ini-trilho span,.ini-dia-col .par span,.ini-grupo .trilho span{transition:none}
}
.ini-rodape-nota{margin-right:auto}