/* A casca do Portal do gabinete da Acréscimo Valor (o esqueleto, despido · 24/10/2026).
   O layout da direção C · Painel, sem a marca: no computador, a barra lateral (232 px) e a barra de cima (64 px) com o
   título da página; no telemóvel, a barra de cima com o botão do menu e a navegação numa gaveta; a área principal; a
   gaveta da direita (320 px), encostada a partir dos 1440 px e por cima abaixo disso. Só tons neutros e a letra do
   sistema, a escala 4/8, telemóvel primeiro. As classes e os exemplos estão no CASCA.md. A marca (fase 3) troca as
   fichas do :root, não o layout. */

:root {
  /* as cores: neutras; o texto é quase preto, nunca cinzento claro */
  --tinta: #111316;          /* o texto (18:1 no branco) */
  --tinta-2: #3d4249;        /* o texto secundário (10:1) */
  --tinta-3: #5c626b;        /* só os marcadores de lugar e o desligado (6:1) */
  --fundo: #f5f6f7;          /* a página e as barras de cima */
  --superficie: #ffffff;     /* os cartões, a barra lateral, a gaveta, a janela */
  --por-cima: #eceef0;       /* o rato por cima e a pill neutra */
  --linha: #e2e4e7;          /* os traços */
  --linha-forte: #c4c8cd;    /* as bordas dos botões e do vazio */
  --linha-campo: #868c94;    /* as bordas dos campos (3,4:1: um campo vê-se) */
  --cheio: #16181b;          /* o botão principal, o ativo na navegação, os avisos */
  --cheio-2: #2c3036;        /* o mesmo, com o rato por cima */
  /* os estados: funcionais (não são marca); texto e fundo acima de 5,5:1 */
  --ok: #1d6b45;     --ok-fundo: #e7f3ec;
  --aviso: #7a5200;  --aviso-fundo: #fbf0d6;
  --erro: #b42318;   --erro-fundo: #fdecea;  --erro-2: #8f1c13;

  --letra: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  /* a escala 4/8 e as medidas da C */
  --e-4: 4px; --e-8: 8px; --e-12: 12px; --e-16: 16px; --e-24: 24px; --e-32: 32px; --e-48: 48px;
  --lateral: 232px;
  --gaveta: 320px;
  --topo: 64px;
  --margem: 16px;            /* a margem da página: 16 no telemóvel, 24 no computador */
  --sombra: 0 16px 48px rgb(0 0 0 / .2), 0 2px 8px rgb(0 0 0 / .08);   /* só o que flutua */
}
@media (min-width: 1024px) { :root { --margem: 24px; } }

/* ── A base ─────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--fundo); }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--fundo); color: var(--tinta);
  font-family: var(--letra); font-size: 16px; font-weight: 400; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
h1 { font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
h2 { font-size: 16px; font-weight: 600; line-height: 1.25; }
h3 { font-size: 14px; font-weight: 600; line-height: 1.25; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
svg { display: block; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--tinta); outline-offset: 2px; }
.principal:focus { outline: none; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.saltar {
  position: fixed; z-index: 100; top: var(--e-8); left: var(--e-8);
  padding: var(--e-12) var(--e-16); border-radius: 10px;
  background: var(--cheio); color: #fff; font-size: 14px; font-weight: 600; text-decoration: none;
  transform: translateY(-200%);
}
.saltar:focus { transform: none; }
.icone {
  width: 20px; height: 20px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}

/* ── A moldura (telemóvel primeiro) ─────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "topo" "principal";
  min-height: 100vh; min-height: 100dvh;
}

/* a barra de cima do telemóvel: o menu e o lugar do logótipo */
.topo {
  grid-area: topo; position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--e-8);
  min-height: var(--topo); padding: 0 var(--margem);
  background: var(--fundo); border-bottom: 1px solid var(--linha);
}
.botao-menu { margin-left: calc(var(--e-12) * -1); } /* ajuste ótico: o ícone (20 px numa caixa de 44) fica na margem */
.marca { display: inline-flex; align-items: center; gap: var(--e-8); min-height: 44px; color: var(--tinta); text-decoration: none; }
.marca-sinal {   /* o lugar do logótipo (entra na fase 3) */
  display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px;
  border: 1px dashed var(--linha-campo); border-radius: 6px;
  font-size: 12px; font-weight: 600; line-height: 1; color: var(--tinta-2);
}
.marca-texto { display: flex; flex-direction: column; gap: var(--e-4); min-width: 0; }
.marca-nome { font-size: 16px; font-weight: 700; line-height: 1; white-space: nowrap; }
.marca-sub { font-size: 12px; font-weight: 500; line-height: 1; color: var(--tinta-2); white-space: nowrap; }

/* a barra lateral (no telemóvel, a gaveta da navegação) */
.lateral { display: none; flex-direction: column; background: var(--superficie); }
.lateral-cabeca {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-8); flex-shrink: 0;
  min-height: var(--topo); padding: 0 var(--e-4) 0 var(--e-16);   /* o X fica a 16 px da borda, como a marca */
  border-bottom: 1px solid var(--linha);
}
.nav { display: flex; flex-direction: column; gap: var(--e-4); padding: var(--e-16) var(--e-8); }
.nav-item {
  display: flex; align-items: center; gap: var(--e-8);
  min-height: 44px; padding: 0 var(--e-8); border-radius: 10px;
  color: var(--tinta); font-size: 16px; font-weight: 600; line-height: 1.25; text-decoration: none;
}
.nav-texto { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-item:hover { background: var(--por-cima); }
.nav-item.is-ativo { background: var(--cheio); color: #fff; }
.nav-item.is-ativo .pill-soon { color: #fff; }
/* um grupo na navegação (ex.: «Ferramentas»): o núcleo gera o HTML
   (<div class="nav-grupo"><div class="nav-grupo-titulo">…</div> + os .nav-item). Um espaço acima, a separar,
   e um rótulo pequeno em maiúsculas discretas, esbatido; sem marca. Os itens lá dentro ficam como os de cima. */
.nav-grupo { display: flex; flex-direction: column; gap: var(--e-4); margin-top: var(--e-8); padding-top: var(--e-8); border-top: 1px solid var(--linha); }
.nav-grupo-titulo { padding: var(--e-4) var(--e-8); font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-3); }
.utilizador {   /* o núcleo escreve-o: o nome, a pill do papel e o «Sair» */
  margin-top: auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "nome sair" "papel sair";
  align-items: center; gap: var(--e-4) var(--e-12);
  padding: var(--e-16); border-top: 1px solid var(--linha);
}
.utilizador-nome { grid-area: nome; min-width: 0; font-size: 14px; font-weight: 600; line-height: 1.25; overflow-wrap: anywhere; }
.utilizador .pill { grid-area: papel; justify-self: start; }
.utilizador-sair { grid-area: sair; margin: 0; }

/* a gaveta da navegação aberta (telemóvel) */
.lateral.is-aberta {
  display: flex; position: fixed; z-index: 60; top: 0; bottom: 0; left: 0;
  width: min(320px, calc(100vw - var(--e-48)));
  overflow-y: auto; padding-bottom: env(safe-area-inset-bottom);
  box-shadow: var(--sombra);
  animation: casca-da-esquerda 200ms ease-out;
}
html:not(.js) .lateral { display: flex; }   /* sem o script, o menu fica no fim da página */
html:not(.js) .botao-menu, html:not(.js) .lateral-fechar { display: none; }

/* a área principal */
.principal { grid-area: principal; min-width: 0; padding: 0 var(--margem) var(--e-48); }
.principal > * + * { margin-top: var(--e-16); }
.principal > :first-child:not(.pagina-cabeca) { margin-top: var(--e-24); }
.principal > h2 { margin-top: var(--e-24); }
.principal > h2 + * { margin-top: var(--e-8); }

/* o cabeçalho da página: no computador, é a barra de cima */
.pagina-cabeca {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--e-12) var(--e-16);
  padding: var(--e-24) 0 var(--e-8);
}
.pagina-titulo { font-size: 24px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; overflow-wrap: anywhere; }

/* o véu e o scroll preso, quando algo abre por cima */
.veu { position: fixed; inset: 0; z-index: 50; background: rgb(12 13 15 / .8); }   /* lê-se preto, não cinzento */
html.casca-preso, html.casca-preso body { overflow: hidden; }

/* a gaveta da direita (a leitura): por cima até aos 1440 px; no telemóvel, sobe de baixo */
.gaveta { display: none; flex-direction: column; min-width: 0; background: var(--superficie); }
.gaveta.is-aberta {
  display: flex; position: fixed; z-index: 60; top: 0; right: 0; bottom: 0;
  width: min(400px, 100vw);
  box-shadow: var(--sombra);
  animation: casca-da-direita 200ms ease-out;
}
.gaveta-topo {
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-8); flex-shrink: 0;
  min-height: var(--topo); padding: 0 var(--e-4) 0 var(--e-16);
  border-bottom: 1px solid var(--linha);
}
.gaveta-titulo { min-width: 0; font-size: 16px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }
.gaveta-corpo {
  display: grid; gap: var(--e-16); align-content: start;
  flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--e-16);
  overflow-wrap: anywhere;
}
@media (max-width: 767.98px) {
  .gaveta.is-aberta {
    top: auto; left: 0; width: auto; max-height: 88vh; max-height: 88dvh;
    padding-bottom: env(safe-area-inset-bottom);
    border-radius: 16px 16px 0 0;
    animation-name: casca-de-baixo;
  }
}

/* ── O computador ───────────────────────────────────────────────────── */
@media (min-width: 1024px) {
  .app { grid-template-columns: var(--lateral) minmax(0, 1fr); grid-template-rows: auto; grid-template-areas: "lateral principal"; }
  .topo, .lateral-cabeca .lateral-fechar { display: none; }
  .lateral, .lateral.is-aberta {
    display: flex; grid-area: lateral; position: sticky; top: 0; z-index: auto; align-self: start;
    width: auto; height: 100vh; height: 100dvh; overflow-y: auto; padding-bottom: 0;
    border-right: 1px solid var(--linha); box-shadow: none; animation: none;
  }
  .lateral-cabeca { padding: 0 var(--e-16); }
  .nav-item { min-height: 40px; font-size: 14px; }
  .principal > .pagina-cabeca {
    position: sticky; top: 0; z-index: 20;
    min-height: var(--topo); margin: 0 calc(var(--margem) * -1) var(--e-8); padding: var(--e-8) var(--margem);
    background: var(--fundo); border-bottom: 1px solid var(--linha);
  }
  .principal > .pagina-cabeca .pagina-titulo { font-size: 20px; }
}
@media (min-width: 1440px) {   /* a gaveta encosta à direita: a terceira coluna da C */
  .app.com-gaveta { grid-template-columns: var(--lateral) minmax(0, 1fr) var(--gaveta); grid-template-areas: "lateral principal gaveta"; }
  .app.com-gaveta > .gaveta {
    display: flex; grid-area: gaveta; position: sticky; top: 0; align-self: start;
    height: 100vh; height: 100dvh; border-left: 1px solid var(--linha);
  }
}

/* sem sessão (entrar, convite): sem navegação; uma coluna estreita ao centro */
.app:not(:has(.nav-item)) { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; grid-template-areas: "topo" "principal"; }
.app:not(:has(.nav-item)) .topo { display: flex; }
.app:not(:has(.nav-item)) .lateral, .app:not(:has(.nav-item)) .botao-menu { display: none; }
.app:not(:has(.nav-item)) .principal { width: 100%; max-width: calc(440px + 2 * var(--margem)); margin: 0 auto; }
.app:not(:has(.nav-item)) .principal > .pagina-cabeca {
  position: static; min-height: 0; margin: 0; padding: var(--e-32) 0 var(--e-8); background: none; border: 0;
}
.app:not(:has(.nav-item)) .principal > .pagina-cabeca .pagina-titulo { font-size: 24px; }

/* ── As peças ───────────────────────────────────────────────────────── */
.cartao {
  display: grid; gap: var(--e-12); align-content: start; min-width: 0;
  padding: var(--e-16); background: var(--superficie);
  border: 1px solid var(--linha); border-radius: 12px;
}
.numero-grande { font-size: 32px; font-weight: 700; line-height: 1.1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
@media (min-width: 1024px) { .numero-grande { font-size: 40px; } }
.acoes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-8); }   /* uma linha de botões */

/* os estados (antes dos botões: um botão a carregar fica com a cor dele) */
.vazio {
  display: grid; justify-items: center; gap: var(--e-8);
  padding: var(--e-32) var(--e-16); text-align: center; color: var(--tinta-2);
  border: 1px dashed var(--linha-forte); border-radius: 12px;
}
.a-carregar { display: flex; align-items: center; gap: var(--e-8); color: var(--tinta-2); }
.a-carregar::before {
  content: ""; width: 16px; height: 16px; flex-shrink: 0;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  animation: casca-gira 800ms linear infinite;
}
.aviso-erro {
  padding: var(--e-12) var(--e-16); border: 1px solid var(--erro); border-radius: 10px;
  background: var(--erro-fundo); color: var(--tinta); font-size: 14px; line-height: 1.5;
}

/* os botões */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-8);
  min-height: 44px; padding: 0 var(--e-16);
  border: 1px solid var(--linha-forte); border-radius: 10px;
  background: var(--superficie); color: var(--tinta);
  font-size: 14px; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none;
  cursor: pointer;
}
.botao:hover { background: var(--fundo); border-color: var(--linha-campo); }
.botao-primario { background: var(--cheio); border-color: var(--cheio); color: #fff; }
.botao-primario:hover { background: var(--cheio-2); border-color: var(--cheio-2); }
.botao-perigo { background: var(--erro); border-color: var(--erro); color: #fff; }
.botao-perigo:hover { background: var(--erro-2); border-color: var(--erro-2); }
.botao:disabled, .botao[aria-disabled="true"] { background: var(--fundo); border-color: var(--linha); color: var(--tinta-3); cursor: not-allowed; }
.botao.a-carregar { pointer-events: none; cursor: progress; }
@media (min-width: 1024px) { .botao { min-height: 40px; } }
.botao-icone {
  display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px;
  padding: 0; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer;
}
.botao-icone:hover { background: var(--por-cima); }
.botao-icone:focus-visible { outline-offset: -2px; }   /* o anel por dentro: junto à borda do ecrã não se corta */
@media (min-width: 1024px) { .botao-icone { width: 40px; height: 40px; } }

/* os campos: o input, o select e a textarea dentro de um .campo */
.campo { display: grid; gap: var(--e-8); min-width: 0; }
.campo-rotulo { font-size: 14px; font-weight: 600; line-height: 1.25; }
.campo :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%; min-height: 44px; padding: var(--e-8) var(--e-12);
  border: 1px solid var(--linha-campo); border-radius: 10px;
  background: var(--superficie); color: var(--tinta);
  font-size: 16px; line-height: 1.25;   /* 16 px: o iPhone não aproxima o ecrã ao escrever */
}
.campo :where(input:not([type="checkbox"]):not([type="radio"]), textarea) { -webkit-appearance: none; appearance: none; }
.campo textarea { min-height: 96px; line-height: 1.5; resize: vertical; }
.campo :where(input, textarea)::placeholder { color: var(--tinta-3); opacity: 1; }
.campo :where(input, select, textarea):focus { outline: 2px solid var(--tinta); outline-offset: 1px; border-color: var(--tinta); }
.campo [aria-invalid="true"] { border-color: var(--erro); }
.campo [aria-invalid="true"]:focus { outline-color: var(--erro); }
.campo :where(input, select, textarea):disabled { background: var(--fundo); border-color: var(--linha); color: var(--tinta-3); cursor: not-allowed; }
.campo-erro { font-size: 14px; font-weight: 600; line-height: 1.25; color: var(--erro); }
/* a senha com o olho: o botão fica dentro do campo, à direita; o lugar dele está sempre reservado (nada salta).
   Alvo de 44 px também no computador (o campo tem 40: sobra 2 px transparentes em cima e em baixo). Sem JS não aparece. */
.campo-senha { position: relative; min-width: 0; }
.campo .campo-senha input { padding-right: var(--e-48); }
.campo-senha input::-ms-reveal, .campo-senha input::-ms-clear { display: none; }   /* o olho do Edge: fica só o nosso */
.campo-senha .campo-senha-olho {
  position: absolute; top: 50%; right: 0; width: 44px; height: 44px; margin-top: -22px; color: var(--tinta-2);
}
.campo-senha .campo-senha-olho:hover { background: transparent; color: var(--tinta); }
.campo-senha .campo-senha-olho:focus-visible { outline-offset: -6px; }   /* o anel cabe dentro do campo */
html:not(.js) .campo-senha-olho { display: none; }
.campo-senha-olho .olho-esconder, .campo-senha-olho[aria-pressed="true"] .olho-mostrar { display: none; }
.campo-senha-olho[aria-pressed="true"] .olho-esconder { display: block; }
@media (min-width: 1024px) {
  .campo :where(input:not([type="checkbox"]):not([type="radio"]), select) { min-height: 40px; font-size: 14px; }
  .campo textarea { font-size: 14px; }
}

/* a tabela: é ela própria a caixa; no telemóvel passa a lista (o rótulo vem do data-rotulo de cada célula) */
.tabela {
  width: 100%; border: 1px solid var(--linha); border-radius: 12px; border-spacing: 0; border-collapse: separate;
  background: var(--superficie); font-size: 14px; line-height: 20px;
}
.tabela th {
  padding: var(--e-12) var(--e-16); text-align: left; vertical-align: middle; white-space: nowrap;
  font-size: 12px; font-weight: 600; color: var(--tinta-2); border-bottom: 1px solid var(--linha);
}
.tabela td { height: 56px; padding: var(--e-8) var(--e-16); vertical-align: middle; border-bottom: 1px solid var(--linha); overflow-wrap: anywhere; }
.tabela tbody tr:last-child > td { border-bottom: 0; }
@media (max-width: 767.98px) {
  .tabela, .tabela tbody, .tabela tr { display: block; }
  .tabela thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .tabela tr { padding: var(--e-12) var(--e-16); border-top: 1px solid var(--linha); }
  .tabela tbody tr:first-child { border-top: 0; }
  /* baseline: o rótulo ancora na primeira linha do valor, que pode quebrar */
  .tabela td { display: flex; align-items: baseline; gap: var(--e-8); height: auto; padding: var(--e-4) 0; border: 0; }
  .tabela td::before { content: attr(data-rotulo); flex: 0 0 88px; font-size: 12px; font-weight: 600; color: var(--tinta-2); }
  .tabela td:not([data-rotulo]) { display: block; }
  .tabela td:not([data-rotulo])::before { content: none; }
  .tabela td:first-child { font-size: 16px; font-weight: 600; }
}

/* as pills (o papel, o estado, o «Soon»): sempre mais baixas do que o texto ao lado */
.pill {
  display: inline-flex; align-items: center; flex-shrink: 0; height: 20px; padding: 0 var(--e-8);
  border: 1px solid transparent; border-radius: 999px;
  background: var(--por-cima); color: var(--tinta);
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle;
}
.pill-ok { background: var(--ok-fundo); color: var(--ok); }
.pill-aviso { background: var(--aviso-fundo); color: var(--aviso); }
.pill-erro { background: var(--erro-fundo); color: var(--erro); }
.pill-soon { background: transparent; border: 1px dashed currentColor; color: var(--tinta-2); }

/* a janela da página (criada pelo casca.janela) */
.janela {
  width: min(440px, calc(100vw - var(--e-32))); max-height: calc(100dvh - var(--e-32));
  padding: 0; border: 1px solid var(--linha); border-radius: 12px;
  background: var(--superficie); color: var(--tinta); box-shadow: var(--sombra);
}
.janela::backdrop { background: rgb(12 13 15 / .8); }   /* escrito: o ::backdrop nem sempre herda as fichas */
.janela[open] { animation: casca-aparece 160ms ease-out; }
.janela-forma { display: flex; flex-direction: column; max-height: calc(100dvh - var(--e-32)); margin: 0; }
.janela-corpo { display: grid; gap: var(--e-16); padding: var(--e-24); overflow-y: auto; }
.janela-titulo { font-size: 20px; font-weight: 700; line-height: 1.25; }
.janela-acoes {
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--e-8);
  padding: var(--e-16) var(--e-24); border-top: 1px solid var(--linha);
  background: var(--fundo); border-radius: 0 0 12px 12px;
}
.janela-perigo [data-janela-cancelar]:focus { outline: 2px solid var(--tinta); outline-offset: 2px; }   /* o foco vê-se, mesmo aberta com o rato */
@media (max-width: 767.98px) {
  .janela-corpo { padding: var(--e-24) var(--e-16) var(--e-16); }
  .janela-acoes { padding: var(--e-16); }
}

/* os avisos (criados pelo casca.aviso) */
.avisos {
  position: fixed; z-index: 80; left: var(--e-16); right: var(--e-16);
  bottom: calc(var(--e-16) + env(safe-area-inset-bottom));
  display: grid; gap: var(--e-8); pointer-events: none;
}
.aviso {
  display: flex; align-items: center; gap: var(--e-8);
  padding: var(--e-4) var(--e-4) var(--e-4) var(--e-16); border-radius: 12px;
  background: var(--cheio); color: #fff; box-shadow: var(--sombra);
  font-size: 14px; line-height: 1.4; pointer-events: auto;
  animation: casca-aparece 200ms ease-out;
}
.aviso[data-tipo="erro"] { background: var(--erro); }
.aviso-texto { flex: 1 1 auto; min-width: 0; padding: var(--e-8) 0; }
.aviso .botao-icone:hover { background: rgb(255 255 255 / .16); }
.aviso :focus-visible { outline-color: #fff; }
@media (min-width: 1024px) { .avisos { left: auto; right: var(--e-24); bottom: var(--e-24); width: 360px; } }

/* ── O movimento: só ao abrir; nenhum com o movimento reduzido ─────── */
@keyframes casca-da-esquerda { from { transform: translateX(-100%); } }
@keyframes casca-da-direita { from { transform: translateX(100%); } }
@keyframes casca-de-baixo { from { transform: translateY(100%); } }
@keyframes casca-aparece { from { opacity: 0; } }
@keyframes casca-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* telemóvel: as pills de estado compridas podem partir a ≤767px (senão uma tabela desliza a 390px) */
@media (max-width: 767px) {
  .pill { white-space: normal; }
}

/* a lista das ferramentas (a página /ferramentas, quando houver alguma) */
.lista-ferramentas { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--e-8); }
.lista-ferramentas a { display: flex; align-items: center; min-height: 44px; font-weight: 600; }