/* ==========================================================================
   BASE — tokens, reset, tipografia, primitivas.
   FONTE: "Gestão de Rotas — Design System 4.0". O bloco :root abaixo e o do
   DS, portado sem edicao de valor. Onde este arquivo acrescenta um token que
   o DS nao declara, o comentario diz por que.

   Tres leis que valem para o produto inteiro (DS 4.0, cabecalho):

   1. UMA COR, UM DONO. Risco e do PRAZO (--r1/--r2/--r3). Territorio e do
      ORGAO (--ant/--ctb). Acao e TINTA (--acao) — nao e roxo. Nada mais no
      sistema pode usar vermelho/ambar/verde para dizer outra coisa; se usar, o
      operador passa a ler cor como opiniao e para de confiar no relogio.

   2. COR PRECISA DE AREA. Cor que so existe em objeto de 22 px nao da vida.
      Por isso a lateral e um campo inteiro de --b900 e o fundo e violeta
      diluido (#F6F4FA), nao cinza neutro.

   3. NENHUMA COTA FALSA. Toda medida exibida e lida do token em execucao.
   ========================================================================== */

/* ------------------------------------------------------------- fontes --- */
/* TODAS locais. O v4 se dizia sem dependência externa e puxava o Geist do
   Google Fonts — o painel nao abria sem internet, e o cliente abre num
   escritorio com a rede que tem. Eixo variavel 300..700 (o sistema usa 450 e
   550), licenca OFL, unicode-range identico ao servido pelo Google: o latin-ext
   so baixa para quem o texto pedir. */
@font-face {
  font-family: "Geist";
  src: url("../fontes/Geist-latin.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Geist";
  src: url("../fontes/Geist-latin-ext.woff2") format("woff2");
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fontes/JetBrainsMono-latin.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+2000-206F, U+20AC, U+2122;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fontes/JetBrainsMono-latin-ext.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB;
}

/* ------------------------------------------------------------- tokens --- */
:root {
  color-scheme: light;

  /* ---- superficie ---------------------------------------------------------
     o fundo leva a tinta da marca — violeta diluido, nao cinza neutro.
     Medido no DS: com #F6F4FA o --fg3 fica em 4,54:1 (passa AA) e a separacao
     do cartao branco sobe de 1,043 para 1,092 — mais que o dobro de degrau. */
  --bg:   #F6F4FA;
  --sup:  #FFFFFF;
  --sup2: #F2EFF8;
  --sup3: #E9E5F2;

  /* ---- traco ---- */
  --lin:  #EBEAF0;
  --lin2: #DFDDE7;
  --lin3: #C9C6D4;

  /* ---- texto · medido nas QUATRO superficies, nao so no branco.
     Tingir o fundo derrubou --fg3 para 4,36 sobre a recuada; estes valores
     passam AA em sup/bg/sup2/sup3 e 3:1 para o --fg4, que e grafico. ---- */
  --fg:  #15141A;
  --fg2: #5C5A69;
  --fg3: #696676;
  --fg4: #868198;

  /* ---- marca — lilas #9677F8 herdado e o 400; roxo #47215E e o 800 ---- */
  --b50:  #F4F1FE;
  --b100: #E9E3FD;
  --b200: #D6CAFB;
  --b300: #B79EF9;
  --b400: #9677F8;
  --b500: #7B52F0;
  --b600: #6835D6;
  --b700: #5429AE;
  --b800: #47215E;
  --b900: #2A1338;

  /* ---- acao · TINTA NEUTRA, nao disputa matiz com nenhum territorio.
     Mudanca da v4 sobre a v2: o botao primario era --b600 (roxo). Com o orgao
     agora falando roxo (--ant), um botao roxo ao lado de uma linha roxa lia
     como se a acao pertencesse ao orgao. Acao e preta. ---- */
  --acao:    #15141A;
  --acao-h:  #2A2833;
  --acao-fg: #FFFFFF;

  /* ---- territorio · a cor de linha do orgao.
     --ant e o regulatorio (frete, contrato, ANTT). --ctb e o transito e a
     balanca (CTB). Sao IDENTIDADE de origem do dado, nunca risco. ---- */
  /* t=texto, f=fundo, l=linha. A variante -t existe pela MESMA razao que a da
     escala de risco: a cor base do territorio e PREENCHIMENTO (filete, barra,
     coluna), onde 3:1 basta. Como TEXTO ela precisa de 4.5:1, e o cyan do DS
     nao chega la: #0891B2 mede 3.68 sobre branco e 3.20 sobre o proprio fundo
     — reprova. #0C6F8A e o mais proximo dele que passa nas quatro superficies
     (5.74 / 4.91 / 5.05 / 4.64) e sobre --ctb-f (4.99). O violeta ja passava
     (6.84 e 6.15), entao --ant-t e o proprio --ant. Medido, nao estimado. */
  --ant: #6835D6;  --ant-t: #6835D6;  --ant-f: #F4F1FE;  --ant-l: #D6CAFB;
  --ctb: #0891B2;  --ctb-t: #0C6F8A;  --ctb-f: #E1F2F7;  --ctb-l: #9FD5E4;

  /* ---- risco · SO PRAZO. t=texto, s=superficie, l=linha.
     ATENCAO ao papel de cada faixa: a cor BASE e preenchimento, nao leitura.
     #C59E65 mede 2.48:1 sobre branco — reprova o minimo de 3:1 para marca
     grafica. Por isso todo traco, ponto e barra da faixa 2 usa --r2t (5.82:1),
     nunca --r2. ---- */
  --r1: #C52040;  --r1t: #A91B37;  --r1s: #F8E0DF;  --r1l: #E9A6AF;
  --r2: #C59E65;  --r2t: #7A613E;  --r2s: #F5E9DB;  --r2l: #DFC7A6;
  --r3: #195739;  --r3t: #195739;  --r3s: #E8EAE2;  --r3l: #B2C4B6;

  /* ---- campo institucional · ACRESCIMO AO DS, e a razao esta medida ------
     O DS pinta lateral, toast, dica, veu e campo escuro com var(--b900). No
     tema escuro a rampa da marca INVERTE (--b900 vira #E3D9FD, lavanda claro),
     entao a lateral nasceria clara com texto #F3F0FB em cima — 1.15:1, ilegivel.
     O campo institucional e um papel, nao um degrau da rampa: ele e escuro nos
     DOIS temas e por isso tem token proprio. Onde a folha do DS diz --b900
     como FUNDO DE CAMPO, aqui se le --inst. */
  --inst:      #2A1338;
  --inst-fg:   #F3F0FB;
  --inst-mesh: rgba(150,119,248,.55);

  /* ---- lime · DESTINO. O unico ponto do sistema que pode brilhar.
     Vale para tres coisas e mais nada: o no final da marca, o checkpoint de
     chegada e a confirmacao de que a acao chegou ao fim. Nunca alerta, nunca
     erro, nunca texto sobre superficie clara (contraste 1.5:1 com branco). */
  --lime:    #DCEA44;
  --lime-fg: #2A1338;   /* o unico texto que pode ficar EM CIMA do lime */

  /* A familia de estado NAO mora mais aqui. Os seis enderecos morreram em
     13/08 e a familia nova — quatro grupos, quatro formas de no — vive em
     css/estado.css, com o contraste medido ao lado de cada token. A regra da
     peca mora na folha da peca. */

  /* ---- series de grafico · validadas nos seis testes, nao escolhidas.
     Sao as MESMAS do territorio: quem le a barra le o orgao. ---- */
  --s1:  #6835D6;   /* frete e contrato (regulatorio) */
  --s2:  #0891B2;   /* transito e balanca (CTB) */
  --s1f: #EDE7FC;
  --s2f: #E1F2F7;
  --eixo-cor: #DFDDE7;   /* cor do eixo do grafico. NAO confundir com os
                          --eixo de COMPRIMENTO de casca.css: sao peca e
                          medida com o mesmo nome, e por isso este virou. */
  /* fora do DS: o produto tem grafico de coluna com grade horizontal, que a
     folha do DS nao inventaria. Um tom acima da superficie. */
  --grade: #EFEEF3;

  /* ---- espaco · escala de 2 px, oito degraus legais ---- */
  --e1: 4px; --e2: 6px; --e3: 8px; --e4: 12px;
  --e5: 16px; --e6: 24px; --e7: 32px; --e8: 48px;

  /* ---- forma ---- */
  --r-xs: 5px; --r-sm: 7px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px;
  --pill: 999px;

  /* ---- elevacao · TRES camadas em cada nivel: contato curto, difusa media,
     ambiente longa. Camada unica parece adesivo — foi o que deixou a
     superficie chapada. --sh0 e o plano (item em grade), --sh1 o singular,
     --sh2 o que responde ao cursor, --sh3 a sobreposicao. ---- */
  --sh0: 0 1px 1px rgba(21,20,26,.04), 0 2px 4px -1px rgba(21,20,26,.04);
  --sh1: 0 1px 2px rgba(21,20,26,.05), 0 3px 8px -2px rgba(21,20,26,.06), 0 8px 20px -6px rgba(21,20,26,.06);
  /* ⚠ **A MESMA `--sh1` COM O EIXO Y NEGADO — e ela existe porque BARRA FIXA
     EM BAIXO LANCA SOMBRA PARA CIMA.** *(20/08/2026.)* O rodape da regua e o
     unico lugar do produto onde conteudo rola POR BAIXO de uma faixa fixa, e
     ate aqui ele se separava do corpo por um fio de 1 px: a lei *"elevacao e
     hierarquia"* valia para tudo, menos para o instrumento que nunca sai da
     tela. ⚠ **ELA E DERIVADA, NUNCA INVENTADA:** os tres raios, os tres
     desfoques e as tres opacidades sao os da `--sh1` acima, byte a byte — so o
     `y` troca de sinal. Sombra digitada a mao seria cota falsa aplicada a
     elevacao. ⚠ **E ELA MORA NA PALETA, ao lado das outras**, pelo mesmo
     motivo que os `--z`: nivel novo escondido no componente e o defeito que
     este projeto ja pagou quatro vezes. */
  --sh-cima: 0 -1px 2px rgba(21,20,26,.05), 0 -3px 8px -2px rgba(21,20,26,.06), 0 -8px 20px -6px rgba(21,20,26,.06);
  --sh2: 0 2px 4px rgba(21,20,26,.06), 0 8px 16px -4px rgba(21,20,26,.10), 0 18px 36px -10px rgba(21,20,26,.11);
  --sh3: 0 4px 10px rgba(21,20,26,.08), 0 16px 32px -8px rgba(21,20,26,.16), 0 34px 68px -18px rgba(21,20,26,.24);
  --brilho: inset 0 1px 0 rgba(255,255,255,.7);
  --anel: 0 0 0 3px color-mix(in srgb, var(--b500) 34%, transparent);

  /* ---- camada ---- */
  /* --z-gaveta ABAIXO de --z-menu, e isso e o defeito que ele conserta:
     a lateral em gaveta trazia 105 digitado, acima dos 90 do #menus, e o
     seletor de empresa — que mora DENTRO dela — abria atras da propria
     gaveta. No telefone o filtro global ficava inalcancavel. */
  /* --z-no põe o nó do trilho por cima do segmento que chega até ele. */
  --z-no: 1; --z-fixo: 2; --z-sel: 6; --z-gaveta: 80; --z-menu: 90; --z-veu: 100;
  /* --z-conf entre o modal e a paleta: a confirmacao abre POR CIMA do dossie
     (a bifurcacao nasce dentro dele) e a paleta continua ganhando de tudo. */
  --z-mod: 110; --z-conf: 115; --z-pal: 120; --z-toast: 130; --z-dica: 140;

  /* ---- tipografia ---- */
  --ff: "Geist", "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --fm: "JetBrains Mono", ui-monospace, "SF Mono", Consolas, monospace;

  /* ---- movimento --------------------------------------------------------
     --ease e a curva de ESTADO (rapida, decidida). --suave e a curva de
     ENTRADA: desaceleracao longa, sem repique. Seco vem de curva curta com
     deslocamento grande — a correcao e o inverso: curso menor, tempo maior.
     --mo e o dial: multiplica toda duracao derivada. */
  --t1: 140ms; --t2: 240ms; --t3: 400ms; --t4: 560ms;
  --ease:  cubic-bezier(.2, .7, .3, 1);
  --suave: cubic-bezier(.16, .84, .44, 1);
  --entra: cubic-bezier(.22, .61, .24, 1);
  --mo: 1;

  /* ---- casca ---- */
  --lat: 236px;
  --lat-min: 60px;
  --topo: 56px;
  --pg-max: 1320px;

  /* ---- densidade · comutavel em execucao (altura da linha de tabela) ---- */
  --lh: 48px;
}

/* DENSIDADE — o unico token que o operador troca no topo.
   SAO DUAS, E SAO EXATAMENTE 48 E 56.

   A linha deste produto tem DOIS ANDARES (identificacao em cima, contexto
   embaixo; prazo em dois andares; nada repetido). Dois andares com badge de
   19 px em cima e placa de 18 px embaixo tem piso de 48 px — medido com
   `height:0` no <td>. Entao:

   1. `--lh: 36px` NUNCA renderizou 36. Ele so parecia funcionar porque vinha
      acompanhado de uma regra que escondia a PLACA, a empresa, o NOME DA
      INFRACAO, o amparo legal e o local. Densidade que apaga dado e corte.
   2. O 64 do v4 SAIU: era uma terceira densidade disfarcada de dial, e tres
      densidades x dois temas x tres movimentos x quatro larguras sao 72
      combinacoes de QA. 48 e o padrao e o piso; 56 e o confortavel.

   Um '64' ou '36' gravado por sessao anterior cai no padrao em silencio
   (lista fechada em estado.js). */
html[data-d="56"] { --lh: 56px; }
html[data-d="48"] { --lh: 48px; }

/* movimento: tres niveis. A lei "nada entra em cena so para ser bonito" vale
   no PADRAO; Expressivo e uma escolha explicita, nunca o default.

   ⚠ NAO EXISTE MAIS DIAL PARA ELAS — o atributo voltou a ser FIXO em
   `index.html` (`data-m="p"`), e na pratica so o `p` roda. O dial existiu entre
   25 e 26/08/2026; ele saiu do menu do avatar por decisao do operador ("polui a
   tela"), e o racional inteiro esta em `js/avatar.js`, na constante `DIAIS`.
   As tres regras FICAM: elas sao o contrato que o dial reabre no dia em que ele
   voltar, e sao o que impede `--mo` de nascer indefinido se alguem trocar o
   atributo na raiz. O mesmo vale para `data-d`, logo acima. */
html[data-m="s"] { --mo: .65; }
html[data-m="p"] { --mo: 1; }
html[data-m="e"] { --mo: 1.3; }

/* ---------------------------------------------------------- tema escuro --
   QUEM GRAVA `data-tema` E `js/avatar.js`, A PARTIR DE `painel.Membro` — e nao
   `estado.js` nem `localStorage`. Esta linha afirmava os dois ate 25/08/2026, e
   os dois eram falsos: nada gravava o atributo (ele era fixo em `index.html`), e
   a preferencia NUNCA morou no navegador. Ela mora no banco do CLIENTE, que e o
   que a torna a mesma em qualquer maquina — `localStorage` seria a segunda
   verdade que este projeto recusa em toda parte.

   O DS usa `data-t="e"`. Os dois seletores valem, para que qualquer trecho
   copiado da folha do DS funcione aqui sem traducao. */
html[data-tema="escuro"],
html[data-t="e"] {
  color-scheme: dark;

  --bg:   #0E0D12;
  --sup:  #17161D;
  --sup2: #1E1C26;
  --sup3: #262432;

  --lin:  #262431;
  --lin2: #322F3F;
  --lin3: #474357;

  --fg:  #F3F2F6;
  --fg2: #A9A6B6;
  --fg3: #8D8B9A;
  --fg4: #716D80;

  --b50:  #1B1526;
  --b100: #241C33;
  --b200: #332654;
  --b300: #6C4BC4;
  --b400: #9677F8;
  --b500: #A78BFA;
  --b600: #8B65F0;
  --b700: #A78BFA;
  --b800: #C4B2FB;
  --b900: #E3D9FD;

  /* no escuro a acao inverte: tinta clara sobre fundo escuro */
  --acao:    #F3F2F6;
  --acao-h:  #D9D7E2;
  --acao-fg: #15141A;

  /* o campo institucional NAO inverte. MEDIDO: nesta faixa de luminancia a
     separacao por claridade e impossivel — o melhor candidato testado chega a
     1.20:1 contra --sup, e #221436 chegava a 1.045, que e o pior ponto que
     existe (entre o fundo e o cartao, sem ser nenhum dos dois). #2E1745 e o
     equilibrio: 1.22 contra o fundo, 1.13 contra o cartao, --inst-fg a 14.09 e
     o lime a 12.00 em cima dele. A separacao de verdade vem da ARESTA, nao da
     claridade — ver a borda de .lat em casca.css. */
  --inst:      #2E1745;
  --inst-fg:   #F3F0FB;
  --inst-mesh: rgba(150,119,248,.45);

  /* no escuro as duas cores ja sao as claras da rampa e passam como texto
     (violeta 6.98 sobre --sup, cyan 7.53) — a variante -t volta a ser a base,
     exatamente como acontece com --r1t/--r2t/--r3t. */
  --ant: #9677F8;  --ant-t: #9677F8;  --ant-f: #241C33;  --ant-l: #4B3A7A;
  --ctb: #3FB6CF;  --ctb-t: #3FB6CF;  --ctb-f: #14303A;  --ctb-l: #265C6B;

  /* escuro: as claras do TOKENS.md — verm-claro #E2596F, verde-claro #5DA37E,
     e o proprio #C59E65, aprovado sobre Ink (7.90:1). As superficies sao a
     base diluida na superficie escura ate o texto passar 4.5:1 em cima dela. */
  --r1: #E2596F;  --r1t: #E2596F;  --r1s: #2B1D25;  --r1l: #542A36;
  --r2: #C59E65;  --r2t: #C59E65;  --r2s: #2C2626;  --r2l: #4B3F33;
  --r3: #5DA37E;  --r3t: #5DA37E;  --r3s: #1F2729;  --r3l: #2C403A;

  --s1:  #9677F8;
  --s2:  #1A9BB5;
  --s1f: #2A2340;
  --s2f: #14303A;
  --eixo-cor: #322F3F;
  --grade: #221F2C;

  /* no escuro a sombra some — a profundidade vem do brilho de aresta somado a
     ela. Sem o brilho, tema escuro fica sempre chapado. */
  --sh0: 0 1px 2px rgba(0,0,0,.34);
  --sh1: 0 1px 2px rgba(0,0,0,.4),  0 3px 8px -2px rgba(0,0,0,.42), 0 8px 20px -6px rgba(0,0,0,.4);
  --sh-cima: 0 -1px 2px rgba(0,0,0,.4), 0 -3px 8px -2px rgba(0,0,0,.42), 0 -8px 20px -6px rgba(0,0,0,.4);
  --sh2: 0 2px 5px rgba(0,0,0,.46), 0 8px 18px -4px rgba(0,0,0,.5),  0 18px 36px -10px rgba(0,0,0,.5);
  --sh3: 0 4px 12px rgba(0,0,0,.5), 0 16px 34px -8px rgba(0,0,0,.6), 0 34px 68px -18px rgba(0,0,0,.7);
  --brilho: inset 0 1px 0 rgba(255,255,255,.055);
}

/* -------------------------------------------------------------- reset --- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--ff);
  font-size: 13px;
  line-height: 1.45;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow: hidden;             /* quem rola e a pagina, nao o body */
  font-variant-numeric: tabular-nums;
}

button, input, select, textarea { font: inherit; color: inherit; background: none; border: none; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }
svg { display: block; }
:focus { outline: none; }
:focus-visible { box-shadow: var(--anel); border-radius: var(--r-sm); position: relative; z-index: 2; }
/* ⚠ O CAMPO DE TEXTO NÃO LEVA O ANEL GENÉRICO *(30/09/2026, pedido do operador:
   "ao clicar no filtro de texto, ele fica com 2 bordas, uma interna e outra
   externa — isso é para todos os filtros de texto")*. Campo de texto casa
   `:focus-visible` até no clique do mouse, e quem desenha o foco dele é o
   COMPONENTE: `.inp:focus` (a borda e o anel do próprio campo) ou a moldura por
   `:focus-within` (`.fer__busca`, `.fpan__per`, `.menu__busca`). Com o anel daqui
   por cima, a busca do Acervo mostrava a pílula acesa POR FORA e um retângulo
   em volta do texto POR DENTRO. E a subida de camada (`z-index: 2`) punha o
   `.inp` focado por cima da lupa que mora sobre ele (`.blf__busca-c`,
   `.imp__bs`) — o ícone sumia no foco.
   ⚠ `:where()` ZERA A ESPECIFICIDADE: a regra empata com a de cima e vence por
   vir depois, e perde para `.inp:focus`, que continua dando o anel ao `.inp`.
   ⚠ Caixa, rádio, cor, faixa e arquivo NÃO são campo de texto: continuam com o
   anel daqui — o de arquivo, invisível, entrega o foco à moldura. */
:where(input:not([type="checkbox"], [type="radio"], [type="color"], [type="range"], [type="file"]),
       textarea):focus-visible { box-shadow: none; position: static; z-index: auto; }

::selection { background: color-mix(in srgb, var(--b400) 30%, transparent); }

/* barra de rolagem discreta */
* { scrollbar-width: thin; scrollbar-color: var(--lin3) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--lin2); border-radius: var(--pill);
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--lin3); background-clip: content-box; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --------------------------------------------------------- tipografia --- */
.h1 { font-size: 21px; font-weight: 600; letter-spacing: -.022em; line-height: 1.2; }
.h2 { font-size: 15px; font-weight: 600; letter-spacing: -.012em; }
.h3 { font-size: 13px; font-weight: 600; letter-spacing: -.005em; }

/* rotulo de secao: o unico lugar com caixa alta, e sempre pequeno.
   E MONO: o rotulo nomeia um recorte de dado, entao pertence a camada de
   registro, nao a de frase. Em caixa alta e 10.5px a mono ainda ganha do Geist
   em separacao de letra, que e exatamente o que um rotulo precisa. */
.rot {
  font-family: var(--fm);
  font-size: 10.5px; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--fg3);
}

.sub { font-size: 12px; color: var(--fg2); }
.md  { font-size: 12px; color: var(--fg3); }
.sm  { font-size: 11.5px; color: var(--fg3); }
.p   { font-size: 13px; line-height: 1.5; color: var(--fg2); }
.p b { font-weight: 500; color: var(--fg); }

.mono { font-family: var(--fm); font-feature-settings: "zero" 1; letter-spacing: -.01em; }

/* numero grande: figuras proporcionais, nunca tabulares — em corpo grande
   digitos de largura igual deixam o numero frouxo */
.num {
  font-size: 25px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05;
  font-variant-numeric: proportional-nums;
}
.num-sm { font-size: 19px; font-weight: 600; letter-spacing: -.025em; font-variant-numeric: proportional-nums; }

.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.clamp2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; line-height: 1.3;
}

/* ------------------------------------------------------------ layout ---- */
.linha { display: flex; align-items: center; gap: var(--e3); min-width: 0; }
.linha--topo { align-items: flex-start; }
.col { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.espaco { flex: 1 1 auto; min-width: 0; }
.oculto { display: none !important; }

/* separador vertical entre grupos de barra de ferramentas */
.divisor { width: 1px; height: 20px; background: var(--lin2); flex: none; }

/* --------------------------------------------------------- superficie ---
   LEI DA v4: a distincao leitura x acao passa do CONTORNO para o
   COMPORTAMENTO. Toda superficie e cartao; so a acionavel responde ao cursor.

   ELEVACAO = HIERARQUIA, nao decoracao. Quem esta em grade de vinte iguais
   fica no plano (--sh0, quase nada). Sobe o que e singular (--sh1) e o que
   responde ao cursor (--sh2). */
.cx {
  background: var(--sup);
  border: 1px solid var(--lin);
  border-radius: var(--r-lg);
  box-shadow: var(--sh1), var(--brilho);
}
.cx--plano { box-shadow: var(--sh0), var(--brilho); }   /* item de grade */
.cx--alto  { box-shadow: var(--sh2), var(--brilho); }   /* singular */

/* HOVER = UM GESTO, NUM RELOGIO SO.
   Dois canais (elevacao e 2 px de curso), mesma duracao, curva de entrada. O
   fundo NAO muda — a elevacao ja diz que e clicavel. */
.cx--clic {
  cursor: pointer;
  transition: box-shadow   calc(var(--t1) * var(--mo)) var(--suave),
              transform    calc(var(--t1) * var(--mo)) var(--suave),
              border-color calc(var(--t1) * var(--mo)) var(--suave);
}
@media (hover: hover) {
  /* entra devagar, sai rapido. Dedo em tela nao tem hover: sem o guarda, o
     cartao fica preso levantado depois do toque. */
  .cx--clic:hover {
    transition-duration: calc(var(--t2) * var(--mo));
    border-color: var(--lin2);
    box-shadow: var(--sh2), var(--brilho);
    transform: translateY(-2px);
  }
}
.cx--clic:active { transition-duration: 90ms; transform: translateY(0); box-shadow: var(--sh1), var(--brilho); }

/* ---------------------------------------------------------- utilidades -- */
.ico { width: 16px; height: 16px; flex: none; stroke: currentColor; stroke-width: 1.7; fill: none;
       stroke-linecap: round; stroke-linejoin: round; }
.ico--14 { width: 14px; height: 14px; stroke-width: 1.8; }
.ico--12 { width: 12px; height: 12px; stroke-width: 2; }
.ico--20 { width: 20px; height: 20px; stroke-width: 1.6; }
.ico--cheio { fill: currentColor; stroke: none; }

/* ------------------------------------------------------------- impressao -
   O produto exporta espelho de 400 paginas; papel nao tem sombra. Fecha o
   pendente de visao/ux.md (piso de contraste da camada de instrumento):
   fio de 1px vira --lin3, --fg3 e --fg4 sobem para --fg2, sombra some, a arte
   de fundo e a lateral somem, .cx ganha borda solida. Papel e sempre claro —
   as variaveis abaixo valem por cima de qualquer tema. */
@media print {
  html, html[data-tema="escuro"], html[data-t="e"] {
    --lin: #C9C6D4; --lin2: #C9C6D4; --lin3: #ABA8B8;
    --fg3: #5C5A69; --fg4: #5C5A69;
    --sh0: none; --sh1: none; --sh2: none; --sh3: none; --brilho: none;
    --bg: #FFFFFF; --sup: #FFFFFF; --sup2: #FFFFFF; --sup3: #F2EFF8;
  }
  .lat, .topo, .arte, .toasts, .dica, .menus, .veu, .pal { display: none !important; }
  body { overflow: visible; }
  .app { display: block; height: auto; }
  .principal { display: block; }
  .pg { overflow: visible; height: auto; padding: 0; }
  .cx { border: 1px solid var(--lin3); box-shadow: none; }

  /* LACUNA 1 — tres pecas que continuavam imprimindo e nao deviam.
     Sobreposicao aberta imprime POR CIMA da pagina; barra de lote e faixa de
     erro sao controle, nao conteudo. */
  .mod, .selbar, .faixa-err { display: none !important; }
  /* A CHAPA NAO SOME — e onde mora o titulo da tela. Ela perde o plano:
     fundo branco, borda solida, e as faixas de CONTROLE de dentro dela saem.
     ⚠ `.faixa` NAO entra aqui, por mais que o nome sugira controle: e a
     FILEIRA DE MEDIDORES (componentes.css), e os medidores moram dentro da
     chapa. Esconde-la tiraria da impressao os numeros principais da tela.
     `.faixa` e `.faixa-err` sao duas pecas diferentes. */
  .chapa { background: #FFF; border: 1px solid var(--lin3); box-shadow: none; }
  .chapa > .fer, .chapa > .fer__chips, .pag .pgs { display: none !important; }

  /* LACUNA 2 — sem `break-inside` o espelho de 400 paginas parte cartao e
     linha de tabela no meio da folha. */
  .cx, .chapa, .med, .tb tbody tr { break-inside: avoid; page-break-inside: avoid; }
  .tb thead { display: table-header-group; }   /* o cabecalho repete em toda folha */
  .tb-rol { overflow: visible; }               /* senao a tabela sai cortada na largura */
  h1, .h1, .h2 { break-after: avoid; }
}