/* ===================================================================
   A casca e os primitivos do padrão novo — depende de tokens.css.

   Quem usa: o portal, e qualquer tela nova escrita neste padrão. Aqui moram o
   topo com a marca, o conteúdo centrado, o cartão, o campo, o botão, a pill e
   a grade de tabela. Componente de uma tela só continua no <style> da própria
   tela, que é onde se procura por ele.
   =================================================================== */

body{min-height:100vh;display:flex;flex-direction:column}

/* Padrão visual do portal — os tokens vêm do handoff de design (portal_bpo).
   O vermelho é identidade: marca, ação, link e foco. Estado de dado usa
   verde/âmbar/neutro; num sistema de escritório, vermelho de marca não pode
   ser lido como vermelho de problema. */


/* ---------- pular para o conteúdo ----------
   Primeiro foco de toda tela. Quem navega por teclado — e quem usa leitor —
   passava pelo menu inteiro em CADA página antes de chegar à tabela; nas
   telas de Cadastros e Usuários isso é uma dúzia de tabulações repetidas a
   cada clique. Fica fora da tela até receber foco: é atalho, não elemento de
   layout. Usa os mesmos tokens do resto — nada aqui é cor à mão. */
.pular{position:absolute;left:-9999px;top:0;z-index:100;
      background:var(--vermelho);color:var(--branco);
      padding:10px 16px;font-weight:600;text-decoration:none}
.pular:focus{left:8px;top:8px}
/* O `tabindex="-1"` no <main> é o que faz o foco POUSAR lá depois do salto;
   sem ele o navegador rola a página e deixa o foco onde estava, e a próxima
   tabulação volta para o menu. O contorno do foco não serve aqui — o alvo é
   a página inteira, não um controle. */
main:focus{outline:none}

/* faixa de marca: 3px no topo absoluto do documento */
.faixa-marca{height:3px;background:var(--vermelho);flex:none}

/* ---------- header ----------

   O nav e ESCURO desde o padrao de 2026. No handoff ele vive dentro do hero
   vinho da Central; nas telas de miolo (Usuarios, Registro, um formulario de
   ferramenta) nao ha hero, e o nav continua escuro assim mesmo -- de
   proposito. Header que muda de cor entre a home e a tela seguinte faz o
   olho procurar o menu duas vezes.

   Cor solida `--escuro-de` e nao o degrade: em 64px de altura o degrade nao
   tem onde acontecer, e a home encosta o topo do hero exatamente neste tom. */
/* A barra vai de ponta a ponta e o CONTEUDO dela e que se centraliza, pelo
   padding. A primeira versao fazia o contrario -- `max-width` no proprio
   `.topo` -- e como ele e quem carrega o fundo escuro, num monitor mais largo
   que 1304px sobravam duas faixas claras nas beiradas do header.

   `max()` resolve os dois casos com uma linha: em tela larga o padding e a
   metade do que sobra, e o menu fica alinhado com o `.centro`; em tela
   estreita a conta da negativo e sobra o recuo minimo de 32px.

   O 1240 e a largura do CONTEUDO (a mesma do `.centro`), e nao a da caixa com
   o padding junto: aqui quem centraliza e o proprio padding, entao a conta e
   sobre o que o menu vai ocupar. Com 1304 a barra ficava certa e o menu
   comecava 32px a esquerda do titulo da pagina. */
.topo{height:64px;flex:none;background:var(--escuro-de);
      border-bottom:1px solid var(--hairline-claro);
      padding:0 max(32px,calc((100% - 1240px) / 2));
      display:flex;align-items:center;justify-content:space-between;gap:24px}
.topo-esq{display:flex;align-items:center;gap:38px}
.marca{display:flex;align-items:baseline;gap:7px}
/* 600 e não 700: a especificação de 2026-10 carrega a Plex em 400/500/600, e
   peso pedido acima do que chegou é o navegador escolhendo por nós. */
.marca .ecovis{font:600 19px/1 var(--corpo);letter-spacing:.02em;
      color:var(--branco)}
/* `--texto-nav` e não `--claro-62`: o alfa sobre o vinho de 2026-10 dá 4.37:1,
   e o token composto é o que o teste de contraste mede. */
.marca .bpo{font:400 12px/1 var(--corpo);letter-spacing:.34em;
      color:var(--texto-nav)}
/* `.marca.clara` e a mesma marca sobre superficie CLARA -- hoje so o cartao
   de login, que fica sobre o degrade e por isso nao pode usar branco. */
.marca.clara .ecovis{color:var(--vermelho)}
.marca.clara .bpo{color:var(--texto2)}
/* nas ferramentas o segundo termo e o nome do produto, nao a sigla do
   portal: 'RH' com o espacamento de sigla vira 'R H' no olho */
.marca .produto{font:600 14.5px/1 var(--titulo);color:var(--texto2)}
.topo nav{display:flex;gap:26px}
.topo nav a{font:400 13.5px var(--corpo);color:var(--texto-nav);
      padding:6px 0;border-bottom:2px solid transparent;transition:all .15s}
.topo nav a:hover{color:var(--texto-nav-on)}
.topo nav a.ativo{font-weight:600;color:var(--texto-nav-on);
      border-bottom-color:var(--vermelho)}
/* o avatar dentro do perfil e sobre papel: volta ao tint */
.perfil-topo .avatar,.cartao .avatar{background:var(--vermelho-tint);
      color:var(--vermelho)}
.topo-dir{display:flex;align-items:center;gap:14px}
/* `.eu` virou LINK (a segurança da própria conta). Sem `text-decoration:none`
   o nome sai sublinhado no nav escuro, e o sublinhado ali lê como erro de
   estilo — o resto da barra não tem nenhum. O sublinhado volta no hover, que
   é onde ele informa em vez de poluir. */
.eu{display:flex;align-items:center;gap:9px;text-decoration:none}
.eu .nome{font:400 13.5px var(--corpo);color:var(--claro-85);
      white-space:nowrap}
a.eu:hover .nome{color:var(--branco);text-decoration:underline}
/* no escuro o avatar e o vermelho CHEIO com inicial branca; o tint so
   funcionava sobre papel */
.avatar{width:30px;height:30px;flex:none;border-radius:50%;
      background:var(--vermelho);display:grid;place-items:center;
      font:600 12px var(--corpo);color:var(--branco);overflow:hidden}
.avatar.g{width:34px;height:34px;font-size:13px}
/* Com foto, a imagem OCUPA o avatar e a inicial some por baixo dela. É o
   mesmo elemento nos dois casos de propósito: o círculo, o tamanho e a
   posição no topo já estão resolvidos aqui, e um segundo elemento só para
   quem tem foto faria as duas versões divergirem na primeira mudança de
   tamanho. `object-fit:cover` porque retrato chega em qualquer proporção, e
   `redimensionar` não é coisa que CSS faça sem cortar — cortar no centro é o
   que um avatar redondo quer. */
.avatar img{width:100%;height:100%;object-fit:cover;display:block}
/* o canto de selo (`--raio-pill`, 4px desde 2026-10): o Sair tem o tamanho
   de uma etiqueta, nao de um botao de pagina */
.botao-sair{font:400 12.5px var(--corpo);letter-spacing:.06em;
      color:var(--claro-78);background:none;padding:6px 16px;
      border:1px solid var(--claro-35);border-radius:var(--raio-pill);
      cursor:pointer;transition:all .15s}
.botao-sair:hover{color:var(--branco);border-color:var(--claro-62)}

/* ---------- conteúdo ----------
   O recuo é o da especificação de 2026-10, e o `clamp` já é a versão do
   celular: em 390px ele dá 20px, que era o que o `@media` de baixo fazia à
   mão. */
.conteudo{flex:1;padding:clamp(20px,3vw,40px)}
/* tela sem header (login): o cartão fica no centro do que sobra da altura */
.conteudo.centrado{display:grid;place-items:center;padding:64px 24px}
.centro{max-width:1240px;margin:0 auto;width:100%}
.cabecalho-pagina{display:flex;align-items:flex-end;
      justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:32px}
.cabecalho-pagina.compacto{margin-bottom:28px}
/* o "Título da página" da especificação: Sans 600, 32px, -0.01em */
.cabecalho-pagina h1{font:600 32px/1.15 var(--titulo);letter-spacing:-.01em;
      margin-bottom:6px}
.cabecalho-pagina .sub{font:400 14px/1.4 var(--corpo);color:var(--texto2)}
.controles{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---------- campos e botões ----------

   A lista de tipos era `text|password|search`, e por muito tempo bastou: o
   portal só tinha esses. O primeiro formulário de verdade em outro app — o do
   RH, com textarea, select, data e número — chegou à tela com a cara crua do
   navegador ao lado de campos estilizados, e foi assim que se descobriu que a
   casca cobria meio formulário. Campo é primitivo: mora aqui, não em cada app.

   `select` e `textarea` NÃO herdam fonte por padrão — daí o `font:` explícito
   em vez de `inherit` espalhado. */
input[type=text],input[type=password],input[type=search],input[type=email],
input[type=date],input[type=number],input[type=tel],input[type=url],
select,textarea{
      font:400 14px var(--corpo);color:var(--texto);background:var(--papel);
      padding:0 13px;border:1px solid var(--borda-input);
      border-radius:var(--raio-campo);min-width:0;transition:all .15s}
input[type=text],input[type=password],input[type=search],input[type=email],
input[type=date],input[type=number],input[type=tel],input[type=url],select{
      height:42px}
/* textarea tem altura em linhas (rows), então padding vertical em vez de
   height fixa — e não estica para os lados quebrando a grade do formulário */
textarea{padding:11px 13px;line-height:1.55;resize:vertical;min-height:78px;
      max-width:100%}
input::placeholder,textarea::placeholder{color:var(--texto3)}
input:focus,select:focus,textarea:focus{
      outline:none;border-color:var(--vermelho);box-shadow:var(--anel)}
/* a seta do select desenhada por nós: a nativa muda de forma em cada
   navegador, e é o único elemento do formulário que destoaria em cada máquina */
select{appearance:none;padding-right:34px;cursor:pointer;
      background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%236B5F5E' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
      background-repeat:no-repeat;background-position:right 13px center}
/* o botão do <input type=file> é do navegador; o que dá para fazer é encostar
   o resto no padrão e deixar o botão parecido com o `.acao` das telas */
input[type=file]{font:400 13px var(--corpo);color:var(--texto2);
      padding:9px 13px;border:1px dashed var(--borda-input);
      border-radius:var(--raio-campo);background:var(--papel);width:100%}
input[type=file]::file-selector-button{
      font:500 12.5px var(--corpo);color:var(--label);background:var(--fundo);
      border:1px solid var(--borda-input);border-radius:var(--raio-mini);
      padding:6px 12px;margin-right:12px;cursor:pointer;transition:all .15s}
input[type=file]::file-selector-button:hover{
      color:var(--vermelho);border-color:var(--vermelho)}
input[type=checkbox]{accent-color:var(--vermelho);width:16px;height:16px;
      cursor:pointer}
.busca{height:40px;font-size:13.5px;padding:0 14px;border-color:var(--borda)}

/*  `inline-flex` + centragem não é enfeite: metade dos botões do BPO são
    <a>, e <a> com `height` fixo NÃO centra o texto — ele encosta no topo da
    caixa. Num <button> o navegador centra sozinho, e é por isso que o defeito
    passou despercebido até um <a class="botao medio"> aparecer ao lado de um
    secundário bem alinhado no cabeçalho de /cadastros: o vermelho ficou com
    a palavra colada em cima, torto. */
.botao{font:600 15px var(--titulo);letter-spacing:.02em;color:var(--branco);
      background:var(--vermelho);height:46px;padding:0 20px;border:none;
      border-radius:var(--raio-campo);cursor:pointer;transition:background .15s;
      display:inline-flex;align-items:center;justify-content:center}
.botao:hover{background:var(--vermelho-hover)}
.botao.bloco{width:100%}
.botao.medio{height:40px;padding:0 16px;font-size:13px}
/*  O secundário — "Importar planilha", "Cancelar", "voltar à lista".

    Era monoespaçado, CAIXA ALTA e com entrelinha larga, o que o fazia parecer
    uma etiqueta técnica em vez de um botão; ao lado do `.botao` vermelho, de
    título em 15px, os dois liam como dois sistemas de desenho diferentes. Foi
    o que apareceu no cabeçalho de /cadastros: "IMPORTAR PLANILHA" em mono e
    "Novo cliente" em bloco vermelho, um par que não é par.

    Agora ele é irmão do `.botao`: mesma família, mesma altura, e o que o
    separa é o PESO — superfície clara com hairline contra bloco vermelho. A
    caixa alta some de vez: os rótulos já estão escritos em caixa normal nos
    templates, e era o CSS que gritava por cima deles.

    A altura padrão é 40px (a mesma do `.botao.medio`, da `.busca` e do campo
    de arquivo) porque é com esses que ele quase sempre aparece lado a lado.
    `.mini` fica para o botão que não é ação de página: fechar um painel,
    limpar um filtro. */
.botao-fantasma{font:500 13.5px var(--corpo);letter-spacing:0;
      color:var(--label);background:var(--papel);
      border:1px solid var(--borda-forte);border-radius:var(--raio-campo);
      height:40px;padding:0 16px;display:inline-flex;align-items:center;
      justify-content:center;cursor:pointer;transition:all .15s}
.botao-fantasma:hover{color:var(--vermelho);border-color:var(--vermelho);
      background:var(--hover)}
.botao-fantasma.mini{height:32px;padding:0 12px;font-size:12.5px}
.label{display:block;margin:0 0 7px;font:500 12.5px var(--corpo);
      color:var(--label)}

/* ---------- superfícies ---------- */
.cartao{background:var(--papel);border:1px solid var(--borda);
      border-radius:var(--raio);overflow:hidden}
.painel-abre{animation:painelEntra .18s ease-out}
@keyframes painelEntra{from{opacity:0;transform:translateY(-6px)}
      to{opacity:1;transform:none}}
.cabecalho-cartao{display:flex;align-items:center;justify-content:space-between;
      gap:16px;padding:18px 24px;background:var(--cabecalho);
      border-bottom:1px solid var(--divisor-forte)}
.cabecalho-cartao h2{font:600 16px/1 var(--titulo)}
.cabecalho-cartao .sub{font:400 12.5px var(--corpo);color:var(--texto3)}

/* ---------- tabelas (grid) ---------- */
.tabela-topo{background:var(--cabecalho);
      border-bottom:1px solid var(--divisor-forte)}
.col{font:500 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;
      color:var(--texto3)}
.col.ferramenta{font:600 12px var(--corpo);letter-spacing:0;color:var(--label)}
.linha{align-items:center;border-top:1px solid var(--divisor);
      transition:background .15s}
.linha:hover{background:var(--hover)}
.pessoa{display:flex;align-items:center;gap:10px;min-width:0}
.pessoa .nome{font:600 13.5px var(--corpo);color:var(--texto)}
.pessoa .sob{font:400 12px var(--corpo);color:var(--texto3)}
.celula{font:400 13px var(--corpo);color:var(--texto2);overflow-wrap:anywhere}
.mono{font:500 12px var(--mono);color:var(--texto3)}
.vazio-tabela{margin:0;padding:22px 24px;font:400 13.5px var(--corpo);
      color:var(--texto3);border-top:1px solid var(--divisor)}

/* ---------- pills (os selos) ----------
   A classe guarda o nome de quando era pílula; desde 2026-10 é o "selo" da
   especificação — Mono 500, canto de 4px, sem quebrar linha. São os mesmos
   selos do cartão de área ("aberta a todos" é o `.pill.verde`, "só com a
   marca" é o `.pill.marca`), e por isso não nasceu uma segunda classe: duas
   etiquetas de estado com desenhos vizinhos divergem na primeira mudança. */
.pill{font:500 11px var(--mono);letter-spacing:.08em;padding:4px 10px;
      border-radius:var(--raio-pill);justify-self:start;white-space:nowrap}
/* brand-900 sobre brand-50: 8.8:1. O texto é o vinho do nav, e não o
   vermelho do botão, porque o selo diz a quem a área se restringe — é
   identidade, não ação a fazer. */
.pill.marca{color:var(--escuro-de);background:var(--vermelho-tint)}
.pill.neutra{color:var(--neutra);background:var(--neutra-bg)}
.pill.verde{color:var(--verde);background:var(--verde-bg)}
.pill.ambar{color:var(--ambar);background:var(--ambar-bg)}
/* rubro e a pill de PROBLEMA — recusado, vencido, com erro. Nao usar
   a de marca para isso: vermelho de identidade e vermelho de
   problema tem de continuar distinguiveis. */
.pill.rubro{color:var(--rubro);background:var(--rubro-bg)}
/* célula de acesso: a pill é o botão */
.acesso{font:500 11px var(--mono);padding:6px 11px;
      border-radius:var(--raio-pill);
      justify-self:start;cursor:pointer;transition:all .15s;white-space:nowrap}
.acesso.on{color:var(--verde);background:var(--verde-bg);
      border:1px solid var(--verde-borda)}
.acesso.off{color:var(--apagado);background:var(--papel);
      border:1px solid var(--divisor-forte)}
.acesso.travado{cursor:default}
.acesso:focus-visible,.cartao-area:focus-visible,.botao:focus-visible,
.botao-fantasma:focus-visible,.botao-sair:focus-visible,
.cartao-de-ferramenta:focus-visible,.area-recolhida:focus-visible{
      outline:none;border-color:var(--vermelho);box-shadow:var(--anel)}

.nota{margin:14px 0 0;font:400 12.5px/1.6 var(--corpo);color:var(--texto3);
      max-width:78ch}
.nota code{font:500 12px var(--mono)}
.erro{margin:0 0 14px;font:400 13px/1.5 var(--corpo);color:var(--vermelho)}
/* o par do .erro: o que deu certo e precisa ser conferido, nao comemorado.
   Nasceu no RH (a sincronizacao diz quantas fichas mudaram) e o portal pediu
   igual (o lote diz quantas contas mudaram) -- dois apps e o criterio para
   subir ao pacote. */
.faixa-ok{margin:0 0 16px;padding:13px 24px;background:var(--verde-bg);
      color:var(--verde);border:1px solid var(--verde-borda);
      border-radius:var(--raio);font:400 13.5px/1.55 var(--corpo)}

/* ---------- primitivos do padrao de 2026 ----------

   Tres coisas que o handoff usa nas duas telas de entrada e que vao aparecer
   em toda tela nova, entao moram aqui e nao no <style> de uma delas. */

/* Losango: um quadrado girado, nao um icone. O handoff nao tem biblioteca de
   icones de proposito -- a seta e caractere e o marcador e CSS. */
.losango{width:6px;height:6px;flex:none;background:var(--vermelho);
      transform:rotate(45deg)}

/* Rotulo tecnico: overline, contagem, indice de cartao. Sempre monoespaçada,
   caixa alta e bem espacada -- e o que separa "etiqueta de sistema" de
   "texto que alguem escreveu". E o "Rotulo" da especificacao de 2026-10:
   Mono 500, 11px, 0.14em. */
.overline{display:flex;align-items:center;gap:12px;font:500 11px var(--mono);
      letter-spacing:.14em;text-transform:uppercase;color:var(--texto3)}
.overline.clara{color:var(--claro-62)}

/* Campo de linha: o input do hero e do login. E um primitivo A PARTE do
   input de caixa, nao um substituto: formulario denso (Usuarios, Cadastros)
   continua com campo de caixa, porque sublinhado em grade de dois campos por
   linha some dentro das divisorias da propria tabela. */
/* `input.campo-linha` e nao `.campo-linha`: a regra generica ali em cima e
   `input[type=text]`, que tem MAIS especificidade que uma classe sozinha --
   o campo continuava desenhado como caixa com a classe aplicada. Prender o
   seletor ao elemento empata a especificidade, e a ordem no arquivo decide. */
input.campo-linha{width:100%;background:transparent;
      border-width:0 0 1px;border-style:solid;
      border-color:var(--borda-input);color:var(--texto);
      font:400 16px var(--corpo);padding:6px 2px 10px;border-radius:0;
      height:auto;outline:none;transition:border-color .15s}
input.campo-linha:focus{border-bottom-color:var(--vermelho);box-shadow:none}
input.campo-linha::placeholder{font:500 15px var(--mono);
      letter-spacing:.04em;color:var(--texto3)}
.rotulo-linha{display:block;font:500 11px var(--mono);letter-spacing:.14em;
      text-transform:uppercase;color:var(--texto3);margin-bottom:8px}
/* as mesmas duas coisas sobre o degrade escuro */
.sobre-escuro input.campo-linha{border-bottom-color:var(--claro-35);
      color:var(--claro);background:transparent}
.sobre-escuro input.campo-linha:focus{border-bottom-color:var(--rose)}
.sobre-escuro input.campo-linha::placeholder{color:var(--claro-35)}
.sobre-escuro .rotulo-linha{color:var(--claro-62)}

/* ---------- cartão de área e cartão de ferramenta ----------

   Os dois cartões da tela Início (especificação de 2026-10). Nasceram para o
   portal, e moram aqui porque a forma — uma área com as ferramentas dentro —
   é a que o RH vai querer quando tiver a própria entrada. O FISCAL não
   carrega o estilo.css (ver o topo da lateral.css): no dia em que ele
   quiser estes cartões, o bloco sai para uma folha própria, como a barra
   saiu, e os seletores já estão todos sob os próprios nomes para isso.

   Os nomes são compridos de propósito: `.cartao-area` é o cartão da home
   ANTIGA do portal, definido no <style> dela, e um homônimo aqui pintaria
   por cima da tela que ainda não foi refeita.

   Sem sombra: o cartão se separa da página pelo branco e pela hairline, e a
   área em foco pela borda de cima vermelha. "Em foco" é a área que a tela
   quer em evidência, NÃO o foco de teclado — esse é o `:focus-visible`, com
   o anel de sempre, e vale para o cartão de ferramenta e o recolhido.

   <div class="grade-areas">
     <section class="cartao-de-area em-foco" aria-labelledby="area-fiscal">
       <header class="area-cabeca">
         <h2 class="area-nome" id="area-fiscal">Fiscal</h2>
         <span class="area-conta">2 ferramentas</span>
         <p class="area-desc">Notas tomadas, conferência e CNDs.</p>
         [<span class="pill marca">só com a marca</span>]
       </header>
       <ul class="area-ferramentas">
         <li><a class="cartao-de-ferramenta" href="https://…">
           <span class="ferramenta-nome">Serviços Tomados
             <span class="ponto verde" role="img" aria-label="Disponível"></span></span>
           <span class="ferramenta-desc">Lê as NFS-e e monta a planilha.</span>
           <span class="ferramenta-abrir">Abrir →</span></a></li>
       </ul>
       (ou, recolhida, no lugar da lista:)
       <a class="area-recolhida" href="…">2 ferramentas · <span class="ver">Ver →</span></a>
     </section>
   </div>

   O cartão de ferramenta é UM <a> envolvendo tudo, e não um `onclick` no
   cartão: assim o clique do meio abre em outra aba, o leitor de tela lê o
   cartão inteiro como um link, e o Tab para nele uma vez só. Por isso o
   "Abrir →" é <span>, e não um segundo link dentro do primeiro.

   O ponto de estado é cor e só cor, e por isso leva `aria-label`: quem não
   vê a cor, ou não vê a tela, precisa ouvir "Disponível". */
.grade-areas{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
      gap:16px;align-items:start}
.cartao-de-area{display:flex;flex-direction:column;gap:16px;min-width:0;
      padding:20px;background:var(--papel);border:1px solid var(--borda);
      border-top:3px solid var(--divisor-forte);border-radius:var(--raio)}
.cartao-de-area.em-foco{border-top-color:var(--vermelho)}
/* nome e contador na primeira linha; descrição e selo descem inteiros */
.area-cabeca{display:grid;grid-template-columns:minmax(0,1fr) auto;
      align-items:baseline;column-gap:12px;row-gap:6px}
.area-nome{font:600 19px/1.25 var(--titulo);color:var(--texto);
      overflow-wrap:anywhere}
.area-conta{font:500 12px/1 var(--mono);color:var(--texto3);white-space:nowrap}
.area-desc{grid-column:1/-1;margin:0;font:400 13px/1.45 var(--corpo);
      color:var(--texto2)}
/* o selo de acesso não quebra linha (o `.pill` já é nowrap) e não estica */
.area-cabeca .pill{grid-column:1/-1;justify-self:start;margin-top:4px}
.area-ferramentas{display:flex;flex-direction:column;gap:8px;margin:0;
      padding:0;list-style:none}

.cartao-de-ferramenta{display:flex;flex-direction:column;gap:8px;padding:14px;
      background:var(--papel);border:1px solid var(--divisor);
      border-radius:var(--raio);color:var(--texto);text-decoration:none;
      transition:border-color .15s}
.cartao-de-ferramenta:hover{border-color:var(--borda-forte)}
.ferramenta-nome{display:flex;align-items:center;justify-content:space-between;
      gap:10px;font:600 15px/1.3 var(--titulo);color:var(--texto)}
.cartao-de-ferramenta .ponto{width:8px;height:8px;flex:none;border-radius:50%;
      background:var(--neutra)}
.cartao-de-ferramenta .ponto.verde{background:var(--verde-ponto)}
.cartao-de-ferramenta .ponto.ambar{background:var(--ambar)}
.cartao-de-ferramenta .ponto.rubro{background:var(--rubro)}
.ferramenta-desc{font:400 13px/1.45 var(--corpo);color:var(--texto2)}
.ferramenta-abrir{font:500 13px/1.3 var(--corpo);color:var(--vermelho-link)}

/* A área ainda não aberta: o tracejado com "N ferramentas · Ver →". Serve
   em <a> e em <button> (o que o "Ver" faz é da tela), daí a fonte e a
   largura explícitas — <button> não herda nenhuma das duas. */
.area-recolhida{display:flex;align-items:center;justify-content:center;
      gap:6px;width:100%;min-height:56px;padding:14px;margin:0;
      background:none;border:1px dashed var(--borda-input);
      border-radius:var(--raio);font:400 13px/1.3 var(--corpo);
      color:var(--texto2);text-decoration:none;cursor:pointer;
      transition:border-color .15s}
.area-recolhida:hover{border-color:var(--borda-forte)}
.area-recolhida .ver{font-weight:500;color:var(--vermelho-link)}

/* ---------- rodape ---------- */
.rodape{flex:none;border-top:1px solid var(--borda);
      display:flex;align-items:center;gap:12px;flex-wrap:wrap;
      max-width:1240px;width:100%;margin:0 auto;padding:22px 32px}
.linha-rodape{font:500 11px var(--mono);letter-spacing:.14em;
      text-transform:uppercase;color:var(--texto3)}

/* ---------- telas estreitas ----------
   Abaixo de 900px as tabelas encolhem para duas colunas e, se ainda não
   couberem, rolam na horizontal dentro do próprio cartão — a página nunca
   rola para o lado. */
@media (max-width:900px){
  /* abaixo de 900px a conta do max() ja da negativa; o recuo minimo e este */
  .topo{padding:0 18px;gap:12px}
  /* O menu ROLA em vez de estourar. Com tres itens cabia; o RH tem cinco e o
     ultimo saia pela direita da tela, sem nem dar para saber que existia.
     Barra de rolagem escondida de proposito: o que se ve e o menu, nao o
     mecanismo. */
  .topo-esq{gap:20px;min-width:0;flex:1}
  .topo nav{gap:18px;overflow-x:auto;scrollbar-width:none;
        -ms-overflow-style:none}
  .topo nav::-webkit-scrollbar{display:none}
  .topo nav a{white-space:nowrap}
  .marca{flex:none}
  .topo-dir{flex:none}
  /* no estreito o avatar basta: o nome empurra o menu para fora */
  .eu .nome{display:none}
  .cabecalho-pagina h1{font-size:26px}
  .rola-lado{overflow-x:auto}
  .rola-lado > .grade-min{min-width:700px}
}

/* ---------- movimento reduzido ----------
   `prefers-reduced-motion` não é preferência estética: quem tem enxaqueca
   vestibular ou sensibilidade a movimento marca isso no sistema operacional e
   espera que o site obedeça. São transições de .15s e um painel que desliza
   6px — pouco, e é justamente o tipo de movimento repetido que incomoda.
   O estado continua mudando na hora; o que some é o caminho até ele. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
    scroll-behavior:auto !important}
}