/* ===================================================================
   A identidade visual do Ecovis BPO: cores, tipografia, raios.

   É ISTO que todo app do BPO carrega — o portal e cada ferramenta. Trocar uma
   cor aqui troca no escritório inteiro.

   Fica separado de estilo.css de propósito: as ferramentas têm componentes
   próprios com nomes que colidem com os do portal (`.topo`, `.cartao`), e
   herdar a casca do portal mudaria o layout delas sem ninguém pedir. Elas
   herdam a identidade; os componentes continuam sendo delas até a tela ser
   refeita no padrão novo.

   Regra que não muda: o vermelho é identidade (marca, ação, link, foco).
   Estado de dado usa verde/âmbar/rubro — num sistema fiscal, vermelho de
   marca não pode ser lido como vermelho de problema.

   --------------------------------------------------------------------
   A REGRA DAS DUAS TROCAS: os NOMES ficam, os VALORES mudam

   O BPO já trocou de padrão duas vezes (o handoff "Central de soluções", no
   começo de 2026, e a especificação de front-end da tela Início, em
   2026-10), e nas duas os nomes dos tokens ficaram onde estavam. As ~40 telas
   leem `var(--vermelho)`, não `#C8102E`; renomear para o vocabulário de cada
   especificação (`--acc`, `brand-600`) seria reescrever todas elas para não
   mudar nada no olho. A regra "template usa var(), nunca hex" é o que faz
   uma troca de padrão ser um arquivo em vez de um mutirão.

   Por isso alguns nomes não descrevem mais o valor: `--escuro-de` é vinho e
   não quase preto, `--raio-pill` é 4px e não pílula. O nome é o PAPEL — "o
   fundo do nav", "o canto da etiqueta" —, e é pelo papel que cada tela os
   procura.

   --------------------------------------------------------------------
   O QUE A ESPECIFICAÇÃO DE 2026-10 MUDOU (DOCFront, tela Início "1c")

   - o nav é VINHO (brand-900, `--escuro-de`), em coluna à esquerda, e os
     três tons de texto sobre ele (`--texto-nav*`) foram recompostos sobre o
     vinho: branco a 85% no item, a 60% no rótulo do grupo, e o fundo do item
     ativo é branco a 14% (`--fundo-nav-on`). Tudo em HEX — alfa não tem
     como ser medido pelo test_contraste.py nem conferido pelo comercial;
   - as superfícies clarearam: página `#F6F4F3`, cartão BRANCO puro, e as
     hairlines são três (`--borda` no cartão de área, `--divisor` no de
     ferramenta e entre linhas, `--borda-input` no campo e no tracejado);
   - os cantos voltaram: 6px em cartão, campo, botão e item de nav, 4px em
     selo. Não há mais pílula — a etiqueta de estado é um retângulo de 4px,
     e o "Sair" vai junto, porque é o mesmo tamanho de coisa. Só o avatar
     continua redondo, e ele usa `50%`, não token;
   - as fontes são IBM Plex Sans (400/500/600) e IBM Plex Mono (500), as
     DUAS do Google. A mono deixou de ser de sistema por DECISÃO: a
     especificação a usa em todo rótulo, contador e selo, e o Courier do
     sistema, ao lado da Plex, lia como fonte que faltou carregar;
   - três tons da especificação não passavam no teste de contraste e foram
     ajustados o MÍNIMO, cada um no comentário do próprio token: o
     text-subtle (`--texto3`), o rosé de foco sobre o vinho (`--rose`) e o
     placeholder da busca (que passou a usar o `--texto3`).

   Os alfas viram HEX SÓLIDO nas superfícies claras — sobre fundo conhecido
   isso é uma cor, e cor tem de ser conferível: o teste do comercial lê os
   `#hex` daqui e recusa valor que não exista neste arquivo. Alfa sobrevive
   só onde o fundo é um DEGRADÊ (o login e o hero antigo), e em LINHA sobre o
   escuro (hairline, borda de campo), onde não carrega texto.

   As fontes vêm de um <link> no <head> de cada app, e não de @import daqui:
   @import só é buscado depois desta folha chegar, e o texto pisca na fonte
   errada nesse intervalo. O <link> é um só para as duas:
     https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600
       &family=IBM+Plex+Mono:wght@500&display=swap
   =================================================================== */

:root{
  /* Marca. `--vermelho` é o brand-600: o botão, o foco, a borda de cima do
     cartão de área em foco. `--vermelho-link` é o LINK ("Abrir →",
     "Ver →"), um degrau mais escuro que o botão: são gestos diferentes e a
     especificação os separa. Era #7C0C20 e nasceu como hover de link, mas as
     telas o usavam como cor de link em repouso — o valor novo é o da
     especificação para esse uso, e continua mais escuro que o vermelho, então
     o hover que ainda leva para ele continua escurecendo. */
  --vermelho:#C8102E; --vermelho-hover:#A50D26; --vermelho-link:#B0102C;
  /* brand-50: o fundo do selo "só com a marca" (`.pill.marca`) */
  --vermelho-tint:#F6E4E7;
  /* Rosé: o destaque que só existe SOBRE o fundo escuro — o contorno de foco
     da barra lateral, o foco do campo de linha no login. Em superfície clara
     ele não passa contraste; não é um segundo vermelho de marca.

     Era #F0637C, e sobre o vinho deu 3.48:1. Clareado o mínimo, no mesmo
     matiz, até passar: #F4889B dá 4.53:1. Sobre o degradê do login, que é
     mais escuro que o vinho, ele só ganha. */
  --rose:#F4889B;
  /* Branco puro. Existe como token para a regra "template usa var(), nunca
     hex" ser literal: sem ele sobravam `#fff` espalhados em botão e nav. É o
     branco de TEXTO sobre vermelho e sobre o vinho. Desde 2026-10 o `--papel`
     também é branco puro; continuam dois tokens porque são dois papéis — se
     o cartão voltar a ser marfim, o texto sobre o vermelho não vai junto. */
  --branco:#FFFFFF;

  /* Tinta e sua hierarquia, da especificação: text, (label), text-muted,
     text-subtle. O `--label` (rótulo de campo, texto de botão secundário) não
     tem par na especificação e ficou como estava.

     O `--texto3` é o text-subtle: contador, atalho ⌘K, cabeçalho de coluna,
     placeholder — quase tudo em 11 a 12px. O #8A7E7C da especificação dá
     3.92:1 sobre o branco do cartão, 3.73 sobre o fundo da busca e 3.58
     sobre o cabeçalho de tabela (`--cabecalho`), e é nesses três que o pacote
     o põe. Escurecido o mínimo, no mesmo matiz, para passar nos TRÊS:
     #786D6B dá 4.56 no mais escuro deles e 5.1 no branco. Abaixo de 4.5 em
     texto de 11px não é escolha estética, é rótulo que não se lê. */
  --texto:#1A1517; --label:#494143; --texto2:#6B5F5E; --texto3:#786D6B;
  /* O nav mora sobre o vinho, e por isso estes tons são compostos sobre
     `--escuro-de` e não sobre papel — foi o teste de contraste que cobrou,
     no padrão anterior, quando o par ainda apontava para a superfície clara
     e a razão deu 1.10:1.

     `--texto-nav` é o branco a 85% da especificação (o item inativo):
     8.02:1. `--texto-nav-on` é o item ativo e o nome da pessoa. */
  --texto-nav:#ECDADD; --texto-nav-on:#FFFFFF;
  /* O degrau mais apagado do vinho: o rótulo do grupo (o "Rótulo" da
     especificação a 60%), o papel embaixo do nome, o placeholder da busca da
     barra. Branco a 60% sobre o vinho: 4.57:1 — passa, sem folga, e por isso
     está medido. */
  --texto-nav-fraco:#CB9DA5;
  /* O fundo do item ATIVO da barra: branco a 14% sobre o vinho. É o que
     marca o ativo desde 2026-10 — o traço vermelho à esquerda saiu, porque
     vermelho sobre vinho não se distingue. O branco sobre ele dá 8.03:1. */
  --fundo-nav-on:#902C3E;

  /* Superfícies. A hierarquia vem da troca de fundo e da hairline, não de
     sombra: a página (bg-app) e, sobre ela, o cartão branco (bg-surface).
     `--cabecalho` é a faixa de topo de cartão e de tabela, no tom da página.
     `--hover` é o fundo de linha, de item e do secundário sob o cursor: com o
     papel branco puro não há mais o que clarear, então o hover desce um fio
     abaixo dele. */
  --fundo:#F6F4F3; --papel:#FFFFFF; --cabecalho:#F6F4F3; --hover:#FAF9F8;
  /* O fundo do campo de busca da barra de cima. Só dele: os campos de
     formulário continuam no `--papel`, porque a especificação desenha a
     busca e não o formulário. */
  --fundo-busca:#FAF9F8;
  /* Hairlines. `--borda` é a do cartão (e do cartão de área), `--divisor` a
     de dentro dele (linha de tabela, cartão de ferramenta), `--borda-input` a
     do campo e do tracejado do cartão recolhido. `--divisor-forte` é a borda
     de cima do cartão de área FORA de foco e a base do cabeçalho de tabela.
     `--borda-forte` é o hover do cartão e a borda do secundário, e não está
     na especificação: ficou como estava, porque o secundário precisa de uma
     linha que se veja ao lado do bloco vermelho. */
  --borda:#E7E2E0; --borda-forte:#BAB5B3; --borda-input:#DDD6D3;
  --borda-header:#E7E2E0; --divisor:#EEE9E7; --divisor-forte:#D9CFCC;

  /* ---- fundo escuro: o nav, e o degradê do login ----
     `--escuro-de` é o brand-900, o vinho da barra lateral, e o texto do selo
     "só com a marca". O degradê (`--hero`) NÃO foi trocado: a especificação
     não desenha o login nem tem hero na Início, e inventar um par para ele
     seria o padrão escolhido por quem escreve CSS. Ele continua escrito em
     hex porque é degradê, e degradê não se compõe de token sem perder o
     ponto de parada. Aqui o alfa fica, pelo mesmo motivo. */
  --escuro-de:#7E0A1F; --escuro-para:#5A2430;
  --hero:linear-gradient(175deg,#33101A 0%,#5A2430 100%);
  --brilho-hero:radial-gradient(720px 460px at 10% -12%,rgba(200,16,46,.4),transparent 62%),
                radial-gradient(680px 520px at 98% 115%,rgba(200,16,46,.32),transparent 62%);
  --claro:#F7F1EA;
  --claro-85:rgba(247,241,234,.85); --claro-78:rgba(247,241,234,.78);
  --claro-62:rgba(247,241,234,.62); --claro-50:rgba(247,241,234,.5);
  --claro-35:rgba(247,241,234,.35); --hairline-claro:rgba(247,241,234,.14);

  /* Estado de dado.

     O verde é o da especificação: o selo "aberta a todos" (#2F6B3F sobre
     #E7F1E8, 5.51:1) e, à parte, o PONTO de "disponível" no cartão de
     ferramenta (`--verde-ponto`). O ponto é mais claro que o texto do selo
     de propósito — é marca de 8px, não letra, e o limite dele é o de
     elemento gráfico (3:1): dá 4.03 sobre o branco.

     Âmbar, rubro e neutra não estão na especificação e ficaram como
     estavam: cada fundo é a própria cor misturada a 9% no papel antigo, e
     continuam se separando da página nova (`test_contraste.py` mede).

     O `rubro` é H8 e o vermelho de marca é H351 — a distinção entre
     "problema" e "ação" depende dessa distância e não pode encolher.

     O par cor/fundo de cada família tem de passar em 4.5:1 (texto pequeno
     dentro do selo, limite de texto normal do WCAG AA). */
  --verde:#2F6B3F; --verde-bg:#E7F1E8; --verde-borda:#C7D5C6;
  --verde-ponto:#3E8E55;
  --ambar:#82601C; --ambar-bg:#F2EDE4;
  --neutra:#6D645F; --neutra-bg:#F0EDEA;
  /* Marca d'água e controle desligado (o WCAG dispensa do limite). Usar
     este tom para informação que a pessoa precisa ler é o erro a evitar. */
  --apagado:#A39F9E;
  /* Vermelho de PROBLEMA, deliberadamente diferente do vermelho de marca: num
     sistema fiscal, "certidão com pendência" não pode ter a mesma cor que o
     botão de ação. */
  --rubro:#A73F2F; --rubro-bg:#F5EAE6; --ambar-linha:#DBD0BA;

  /* Cantos: 6px no que é superfície ou controle (cartão, campo, botão, item
     de nav, ícone em ladrilho), 4px no que é etiqueta. `--raio-pill` guarda o
     nome por ser o PAPEL "canto de selo" — a etiqueta de estado, a contagem
     da barra e o "Sair" —, e não é mais pílula: a especificação desenha selo
     com 4px. Quem precisa de círculo (o avatar, o ponto de estado) escreve
     `50%`, que não é decisão de padrão, é geometria. */
  --raio:6px; --raio-icone:6px; --raio-campo:6px; --raio-mini:4px;
  --raio-pill:4px;

  /* Sem sombra: o cartão se separa do fundo pela hairline e pelo tom. A única
     sombra que sobrou é a do cartão de login, que flutua sobre o degradê
     escuro e precisa dela para não colar, e a da gaveta da barra no celular,
     que passa por cima da página. */
  --sombra:none;
  --sombra-alta:none;
  --sombra-login:0 30px 80px rgba(15,3,7,.45);
  --anel:0 0 0 3px rgba(200,16,46,.12);

  /* `--titulo` e `--corpo` apontam para a mesma família desde 2026-10, e
     continuam dois tokens: título e corpo são papéis, e o próximo padrão pode
     separá-los de novo sem mexer numa tela. */
  --titulo:"IBM Plex Sans",ui-sans-serif,system-ui,sans-serif;
  --corpo:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}
*{box-sizing:border-box}
/* O atributo hidden é o interruptor de tudo que abre e fecha nestas telas
   (painéis, linhas filtradas pela busca). Sem o !important, qualquer regra
   de display do próprio componente — e todas têm — vence o hidden do
   navegador e o elemento continua na tela. */
[hidden]{display:none !important}
html{-webkit-font-smoothing:antialiased}
body{margin:0;background:var(--fundo);color:var(--texto);
     font:400 14px/1.5 var(--corpo)}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-family:var(--titulo)}
/* A seleção de texto é do padrão, e aparece em toda tela onde alguém arrasta
   o cursor. */
::selection{background:var(--vermelho);color:var(--claro)}