/* =========================================================================
   Atlas — Fase B: a CASCA comum.

   Carregar por ÚLTIMO (depois de portal-overrides.css). Aqui moram três
   coisas, nesta ordem:

     1. a tipografia aplicada ao corpo   ← o que finalmente torna a Fase A visível
     2. o cabeçalho fixo com o menu horizontal
     3. os componentes de base do projeto gráfico (quadro, botão, campo, tabela)

   ⚠️ SOBRE A FASE A: ela entregou a paleta e as fontes, mas NADA nas telas
   consumia `--mmg-main`/`--mmg-head` — os dois únicos seletores que os usavam
   (`.brand-title` e `#authBar.authbar-filled`) são resíduo do skin do portal do
   Booking e não aparecem em página nenhuma do Atlas. Resultado: o navegador
   nem chegava a baixar as fontes, e em produção não se via diferença alguma.
   A regra de `body` abaixo é o elo que faltava. Guardado por
   test/casca.test.js ('a tipografia do tema alcança o corpo da página').

   NENHUM HEX SOLTO neste arquivo — toda cor sai de var(--*), conforme o
   projeto gráfico. A catraca de test/tokens.test.js conta os hexes soltos das
   páginas; este arquivo não pode aumentá-la.

   ⚠️⚠️ PISO DA ESCALA: 12px. NADA ABAIXO DISSO, EM LUGAR NENHUM.
   (Revisão do handoff, 29/07 — a escala inteira subiu ~1px.)

   Não é preferência estética, é a condição de uso: as estações do escritório
   rodam SEMPRE a 100% de escala do Windows, sem retina e sem zoom de sistema.
   Não há válvula de escape — quem estiver com a vista cansada não tem como
   aumentar por conta própria. E a compressão vinha aplicada DUAS vezes: Barlow
   tem altura-de-x modesta (13px lê como ~12px de fonte normal) e o Barlow
   Condensed é estreito por cima disso (13.5px em caixa alta lê como ~11px).

   ⚠️ DENSIDADE NÃO É TAMANHO DE LETRA. Cabe mais informação legível numa tabela
   de 15px com linha de ~42px do que numa de 13px com linha de 34px, porque na
   segunda o operador RELÊ. Se um dia faltar linha na tela, corte padding
   vertical e margem entre blocos — nunca a tipografia. Quem "otimizar" a fonte
   para baixo desfaz esta decisão sem perceber; por isso o piso é guardado por
   test/casca.test.js, que varre TODAS as folhas próprias e o style inline das
   páginas, não só este arquivo.

   O que pode ficar NO piso (12px) é só rótulo curto — cabeçalho de tabela,
   etiqueta, chip de atalho. Nunca texto que alguém precise ler por linha.
   ========================================================================= */

/* Utilitário `.hidden` no ESQUELETO comum. Antes cada tela definia esta regra
   num `<style>` local; a Início (main.html) não tinha o bloco, então a classe
   era INERTE lá e a seção de notificações nunca escondia (achado MÉDIO da
   revisão). Aqui vale para toda tela que carrega a casca — mata a classe de bug
   "servir não é aplicar" de uma vez. */
.hidden { display: none !important; }

/* -------------------------------------------------------------------------
   1 · Base — tipografia e ground
   O Bootstrap resolve fonte/cor/fundo por variável própria; sobrescrever as
   variáveis dele (e não só `body`) faz TODO componente do Bootstrap herdar a
   tipografia nova, em vez de só o texto solto.
   ------------------------------------------------------------------------- */
:root {
  --bs-body-font-family: var(--mmg-main);
  --bs-body-font-size: 15px;
  --bs-body-line-height: 1.55;
  --bs-body-color: var(--texto);
  --bs-body-bg: var(--light-grey-2);
  /* ⚠️ Link é por TRIPLA RGB, não por hex. No Bootstrap 5.3 a âncora é pintada
     por `a { color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity)) }` —
     setar `--bs-link-color` não recolore link nenhum (achado BAIXO-13 da revisão:
     era botão morto). Hoje não há `<a>` de conteúdo fora de `.btn`, então o
     defeito é latente: o primeiro link da Fase C nasceria no azul do Bootstrap.
     Valores: --azul-700 (#2444b0) e --azul-900 (#02106b), como o handoff pede
     para link e hover. Tripla RGB não é hex — não mexe na catraca. */
  --bs-link-color-rgb: 36, 68, 176;
  --bs-link-hover-color-rgb: 2, 16, 107;
  --bs-border-color: var(--borda);
  --bs-border-radius: var(--raio);
}

/* O cabeçalho é sticky e OPACO (60px). Sem isto, `scrollIntoView` — que
   pessoas.js:130 chama a cada clique de linha — alinha o topo do card ao topo
   do viewport e os primeiros 60px (título da pessoa e o botão "Fechar") ficam
   ESCONDIDOS atrás da barra. Vale também para âncoras e para o foco de teclado.
   Antes da Fase B a topbar rolava junto e o problema não existia: é regressão
   desta fase (achado MÉDIO-4), não dívida herdada. */
html { scroll-padding-top: 76px; }

body {
  font-family: var(--mmg-main);
  font-size: 15px;
  line-height: 1.55;
  color: var(--texto);
  background: var(--light-grey-2);
}

h1, h2, h3, h4, h5, h6, .titulo-tela, .titulo-bloco {
  font-family: var(--mmg-head);
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--texto);
}

.titulo-tela { font-size: 30px; line-height: 1.12; margin: 0; }
.titulo-bloco { font-size: 20px; line-height: 1.2; margin: 0 0 12px; }

/* Rótulo de seção / kicker */
.kicker {
  font-family: var(--mmg-head);
  font-weight: 600;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--azul-700);
}

.meta { font-size: 13.5px; color: var(--dark-grey-2); }

/* Todo número é tabular — exigência do projeto gráfico: coluna numérica, código
   de CC, número de série, hostname e valor monetário.

   Histórico: na Fase B esta regra precisava anular `font-size`/`weight`/`color`
   porque o `portal-overrides.css` trazia um `.num` do skin do Booking com
   propriedades DISJUNTAS (o cascade aplicaria as duas, e a primeira célula
   tabular sairia 1,6rem negrito azul — achado BAIXO-11 da revisão). A Fase C
   removeu aquela folha inteira, então a colisão sumiu na raiz. Guardado por
   test/casca.test.js, que falha se outra folha própria voltar a declarar `.num`. */
.num { font-variant-numeric: tabular-nums; }

/* Foco de teclado: nunca o anel padrão do navegador. Vale para TODO elemento
   interativo, inclusive os do Bootstrap. */
:focus-visible {
  outline: 2px solid var(--azul-800);
  outline-offset: 2px;
}

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

/* -------------------------------------------------------------------------
   2 · Cabeçalho da aplicação
   Medidas do projeto gráfico. `min-width: 1380px` do handoff NÃO foi aplicado
   de propósito: ele existe por causa da tabela de inventário de 9 colunas, que
   só chega na Fase D. Aplicá-lo agora criaria rolagem horizontal nas cinco
   telas atuais — regressão sem contrapartida. Revisar quando o inventário
   entrar.
   ------------------------------------------------------------------------- */
.casca-topo {
  height: 60px;
  padding: 0 26px;
  position: sticky;
  top: 0;
  z-index: 30;
  border-bottom: 1px solid var(--borda);
  background: var(--light-grey-2);
  display: flex;
  align-items: center;
  gap: 26px;
  flex-wrap: nowrap;
}

/* Assinatura da marca: logo → fio vertical → ATLAS */
.casca-marca {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  text-decoration: none;
}
.casca-marca img { height: 26px; width: auto; display: block; }
.casca-marca .fio {
  width: 1px;
  height: 22px;
  background: var(--borda);
  flex: none;
}
.casca-marca .nome {
  font-family: var(--mmg-head);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: .14em;
  color: var(--texto);
  line-height: 1;
}
.casca-marca:hover .nome { color: var(--azul-800); }

/* Menu horizontal.

   ⚠️ `flex: 0 0 auto` — NÃO encolher. A primeira versão usava `flex: 1 1 auto`
   com `min-width: 0`, e isso produzia um defeito silencioso e sério (achado
   MÉDIO-3, reproduzido em navegador): como a marca e o bloco da direita são
   `flex: none`, só o menu cedia; abaixo de ~1280px, ou com um nome de usuário
   longo, os últimos itens escorregavam para DEBAIXO da caixa de busca — que
   tem fundo opaco e intercepta o clique. Ou seja, "Cadastros" continuava
   visível pela metade e simplesmente não clicava, sem barra de rolagem que
   denunciasse. Não encolhendo, o excesso vira rolagem horizontal do documento:
   feio, mas honesto e sem perda de função. Combinado com o nome truncado e a
   busca escondida em tela estreita (abaixo), o topo cabe folgado a 1024px. */
.casca-menu {
  display: flex;
  align-items: center;
  gap: 17px;
  flex: 0 0 auto;
}
.casca-menu a,
.casca-menu span[aria-disabled] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
  font-family: var(--mmg-head);
  font-weight: 600;
  font-size: 14.5px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--texto);
  text-decoration: none;
  white-space: nowrap;
}
.casca-menu a:hover { color: var(--azul-800); }
.casca-menu a[aria-current='page'] {
  color: var(--azul-800);
  border-bottom-color: var(--azul-800);
}
/* Item cujo módulo ainda não existe. Fica visível — o menu é o mapa do
   sistema — mas não promete um clique que levaria a 404. */
.casca-menu span[aria-disabled='true'] {
  opacity: .45;
  cursor: not-allowed;
}

/* Menu com SUBMENUS (Custódia/Rateio sob Ativos; Orçamento/Renovações sob
   Software). Abre por HOVER e por FOCO DE TECLADO (:focus-within). Sem font-size
   novo: os itens são `.casca-menu a`, já cobertos pela escala (14.5). */
.casca-grupo { position: relative; display: inline-flex; align-items: center; }
.casca-grupo-gatilho::after { content: '▾'; margin-left: 3px; opacity: .6; }
.casca-submenu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 55;
  min-width: 180px; display: none; flex-direction: column; gap: 2px;
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: var(--raio-controle); box-shadow: var(--sombra-card); padding: 6px;
}
.casca-grupo:hover > .casca-submenu,
.casca-grupo:focus-within > .casca-submenu { display: flex; }
/* Itens do submenu: bloco à esquerda, sem caixa-alta nem a sublinha de ativo. */
.casca-submenu a,
.casca-submenu span[aria-disabled] {
  display: block; padding: 6px 10px; border-bottom: 0;
  text-transform: none; letter-spacing: normal; border-radius: var(--raio-controle);
}
.casca-submenu a:hover { background: var(--superficie-campo); color: var(--texto); }

/* Bloco da direita: busca → divisor → avatar → nome → sair */
.casca-direita {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: none;
  margin-left: auto;
}

.casca-busca {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  padding: 6px 10px;
  background: var(--superficie-campo);
  color: var(--dark-grey-2);
}
.casca-busca input {
  border: none;
  background: transparent;
  font-size: 13.5px;
  color: var(--texto);
  width: 210px;
  padding: 0;
}
.casca-busca input::placeholder { color: var(--dark-grey-2); }
.casca-busca input:focus { outline: none; }
.casca-busca .chip {
  font-size: 12px;
  border: 1px solid var(--borda);
  border-radius: 3px;
  padding: 2px 6px;
  color: var(--dark-grey-2);
  letter-spacing: .04em;
}
/* A busca global só ganha backend na Fase D. Enquanto isso ela aparece
   desabilitada, com title explicando — em vez de um campo que aceita texto e
   não faz nada. */
.casca-busca[data-indisponivel='1'] { opacity: .55; cursor: not-allowed; }
.casca-busca[data-indisponivel='1'] input { cursor: not-allowed; }

.casca-divisor {
  width: 1px;
  height: 22px;
  background: var(--borda);
  flex: none;
}

.casca-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--azul-100);
  color: var(--azul-700);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mmg-head);
  font-weight: 600;
  font-size: 12.5px;
  letter-spacing: .04em;
  flex: none;
}
/* O nome vem do AD e não tem teto de tamanho — "Maria Aparecida da Conceição
   dos Santos" tem 38 caracteres. Sem truncar, ele empurrava o menu para debaixo
   da busca (achado MÉDIO-3). O nome completo continua no `title`. */
.casca-usuario {
  font-size: 14px;
  color: var(--texto);
  white-space: nowrap;
  max-width: 16ch;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Perfil: o botão (avatar + nome) abre um popover com papéis e BUs. Sem
   `font-size` novo de propósito (o inventário de escala é exaustivo): o texto
   herda, e o secundário usa as classes .sub/.kicker que já têm tamanho próprio. */
.casca-perfil-wrap { position: relative; display: inline-flex; align-items: center; }
.casca-perfil {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 2px 4px; cursor: pointer;
  border-radius: var(--raio-controle); color: inherit;
}
.casca-perfil:hover { background: var(--superficie-campo); }
.casca-perfil-pop[hidden] { display: none; }
.casca-perfil-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 240px; max-width: 320px;
  background: var(--superficie); color: var(--texto);
  border: 1px solid var(--borda); border-radius: var(--raio-controle);
  box-shadow: var(--sombra-card); padding: 12px 14px;
}
.casca-perfil-nome { font-family: var(--mmg-head); font-weight: 600; }
.casca-perfil-login { color: var(--dark-grey-2); }
.casca-perfil-titulo { margin: 12px 0 6px; }
.casca-perfil-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.casca-perfil-lista li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.casca-perfil-papel { font-weight: 600; }
.casca-perfil-bu, .casca-perfil-vazio { color: var(--dark-grey-2); }

/* Em tela estreita a busca sai antes de qualquer coisa útil. Ela está
   DESABILITADA nesta fase (o backend é da Fase D), então esconder não custa
   função nenhuma — e é o que impede o topo de espremer o menu. */
@media (max-width: 1320px) {
  .casca-busca { display: none; }
}

/* Ícones inline da casca herdam a cor do texto (é por isso que são inline e
   não <img>). */
.casca-topo svg { flex: none; }

/* Conteúdo */
.casca-main { padding: 24px 26px 56px; }
.casca-conteudo { max-width: 1560px; margin: 0 auto; }

/* Telas de acesso (login, trocar-senha): a assinatura da marca vem
   CENTRALIZADA e o cabeçalho não aparece. Elas não carregam o casca.js de
   propósito — a tela de login é a superfície não autenticada do sistema, e não
   há razão para dar-lhe JavaScript que só serve para navegar. */
.assinatura-acesso {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}
.assinatura-acesso img { height: 26px; width: auto; display: block; }
.assinatura-acesso .fio { width: 1px; height: 22px; background: var(--borda); flex: none; }
.assinatura-acesso .nome {
  font-family: var(--mmg-head);
  font-weight: 600;
  font-size: 21px;
  letter-spacing: .14em;
  color: var(--texto);
  line-height: 1;
}

/* O quadro das telas de acesso: 360px e padding 24/26 (medidas do handoff). */
.acesso-wrap { width: min(360px, 100%); }
.quadro-acesso { width: 100%; }
.quadro-acesso > .quadro-titulo { padding: 24px 26px 0; }
.quadro-acesso > .quadro-corpo { padding: 12px 26px 24px; }

/* -------------------------------------------------------------------------
   3 · Quadro — o card do sistema
   O cabeçalho AZUL SÓLIDO sai. Quadro transparente, borda de um fio, canto 8px,
   título em Barlow Condensed. Aplicado direto sobre as classes do Bootstrap
   para que as telas de hoje virem quadro sem mexer no markup delas (o markup é
   a Fase C).
   ------------------------------------------------------------------------- */
.card,
.quadro {
  background: transparent;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: none;
}

/* ⚠️ O 3º seletor NÃO é redundância. `>` é FILHO DIRETO: em `/versao`, o título
   "Notas de versão" mora dentro de `.quadro-titulo-linha` (para caber o botão
   ao lado), então é NETO de `.quadro` — a regra não casava e ele caía no
   tamanho padrão do `h2`, menor que o do card irmão "Versão atual", com a
   MESMA classe. Mesma família da lição "especificidade vence ordem de carga":
   classe igual não garante estilo igual; o que decide é o seletor casar. */
.card > .card-header,
.quadro > .quadro-titulo,
.quadro > .quadro-titulo-linha > .quadro-titulo {
  background: transparent;
  border-bottom: none;
  color: var(--texto);
  font-family: var(--mmg-head);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -.015em;
  padding: 18px 20px 0;
}

.card > .card-body,
.quadro > .quadro-corpo { padding: 12px 20px 18px; }

/* ⚠️ As telas de hoje embutem a BARRA DE FILTROS dentro do `.card-header`
   (input de busca, selects, contagem). Como o header inteiro recebe
   `--mmg-head` em 20px e o reboot do Bootstrap manda `input, select
   { font-family: inherit }`, esses controles saíam em Barlow Condensed, e o
   `<small>` da contagem em 17,5px — enquanto os campos do corpo do card saíam
   em Barlow. O handoff é explícito: título é Condensed, texto e dado são
   Barlow 400. (achado MÉDIO-5; some na Fase C, quando a barra de filtros deixa
   de morar no cabeçalho.) */
.card > .card-header .sub,
.card > .card-header label {
  font-family: var(--mmg-main);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: normal;
}

/* -------------------------------------------------------------------------
   4b · Texto secundário — a classe que SUBSTITUI o `<small>`

   ⚠️ NÃO é cosmética, é a correção de uma classe de defeito. `small` e
   `.small` do Bootstrap valem `.875em` — RELATIVO ao contêiner. Na escala
   anterior, `<small>` dentro do estado vazio (13px) e da ficha do ativo
   compunha 11.375px: o piso furado sem UMA declaração abaixo de 12px em lugar
   nenhum do projeto. Nenhum teste de arquivo enxergaria isso, nunca.

   Subir a escala consertou o sintoma; a classe do defeito continuava de pé —
   um `<small>` num contêiner de 13px volta a compor 11.4px amanhã. `.sub` tem
   tamanho ABSOLUTO, então componha com o que compuser: o piso o alcança.
   `<small>` está proibido no markup próprio, por teste.
   ------------------------------------------------------------------------- */
.sub { font-size: 13px; }

/* -------------------------------------------------------------------------
   4 · Botões — só o primário é sólido
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mmg-head);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: .01em;
  padding: 8px 14px;
  border-radius: var(--raio-controle);
  cursor: pointer;
}
.btn-sm { padding: 6px 11px; font-size: 14px; }

/* ⚠️ POR VARIÁVEL, NÃO POR SELETOR — e isto é a correção de um defeito real.

   A primeira versão pintava `.btn-primary:active` (0,2,0) e confiava num
   `:focus-visible` global (0,1,0). Não funcionava: o Bootstrap vendorizado traz
   `.btn:first-child:active, :not(.btn-check)+.btn:active` (0,3,0) e
   `.btn:focus-visible { …; outline: 0 }` (0,2,0). ESPECIFICIDADE VENCE ORDEM DE
   CARGA — então, na prática, todo clique repintava o botão de #0a58ca e todo
   foco de teclado o preenchia de cinza #6c757d com halo, cores que não existem
   na paleta Anglo; e o anel de foco do handoff nunca aparecia em botão nenhum.
   (achado ALTO-1, confirmado no bundle vendorizado.)

   As variáveis `--bs-btn-*` são lidas por TODAS as regras de estado do
   Bootstrap, inclusive as mais específicas — então declarar a paleta aqui vence
   sem disputa de seletor. É a lição irmã da Fase A: conflito com o vendor não se
   resolve na ordem dos arquivos. */
.btn-primary {
  --bs-btn-color: var(--brand-contrast);
  --bs-btn-bg: var(--azul-800);
  --bs-btn-border-color: var(--azul-800);
  --bs-btn-hover-color: var(--brand-contrast);
  --bs-btn-hover-bg: var(--azul-600);
  --bs-btn-hover-border-color: var(--azul-600);
  --bs-btn-active-color: var(--brand-contrast);
  --bs-btn-active-bg: var(--azul-700);
  --bs-btn-active-border-color: var(--azul-700);
  --bs-btn-disabled-color: var(--brand-contrast);
  --bs-btn-disabled-bg: var(--azul-800);
  --bs-btn-disabled-border-color: var(--azul-800);
  --bs-btn-focus-box-shadow: none;
}

.btn-secondary,
.btn-outline-secondary,
.btn-outline-primary {
  --bs-btn-color: var(--texto);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: var(--borda);
  --bs-btn-hover-color: var(--texto);
  --bs-btn-hover-bg: color-mix(in srgb, var(--texto) 7%, transparent);
  --bs-btn-hover-border-color: var(--borda);
  --bs-btn-active-color: var(--texto);
  --bs-btn-active-bg: color-mix(in srgb, var(--texto) 14%, transparent);
  --bs-btn-active-border-color: var(--borda);
  --bs-btn-disabled-color: var(--texto);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--borda);
  --bs-btn-focus-box-shadow: none;
}

/* Ghost não é variante do Bootstrap: herda os defaults de `.btn` e só precisa
   das próprias variáveis. */
.btn-ghost {
  --bs-btn-color: var(--azul-800);
  --bs-btn-bg: transparent;
  --bs-btn-border-color: transparent;
  --bs-btn-hover-color: var(--azul-800);
  --bs-btn-hover-bg: color-mix(in srgb, var(--azul-800) 10%, transparent);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-active-color: var(--azul-800);
  --bs-btn-active-bg: color-mix(in srgb, var(--azul-800) 18%, transparent);
  --bs-btn-active-border-color: transparent;
  --bs-btn-focus-box-shadow: none;
  border: none;
}

/* O `outline: 0` do vendor está em `.btn:focus-visible` (0,2,0) — o
   `:focus-visible` global (0,1,0) perdia. Esta regra empata em especificidade e
   vence por vir depois. "Nunca o anel padrão do navegador" é regra do handoff. */
.btn:focus-visible {
  outline: 2px solid var(--azul-800);
  outline-offset: 2px;
  box-shadow: none;
}

.btn:disabled,
.btn.disabled { opacity: .45; cursor: not-allowed; }

/* -------------------------------------------------------------------------
   5 · Campos
   ------------------------------------------------------------------------- */
/* ⚠️ `background-color`, NUNCA o abreviado `background`.

   O Bootstrap desenha a seta do `<select>` só como `background-image` (a seta
   nativa é suprimida por `appearance: none`). O abreviado `background:` reseta
   `background-image` para `none` — e como esta folha carrega por último com a
   mesma especificidade, a seta SUMIA de todos os selects das telas (filtro de
   CC, de situação, de BU, o seletor de centro de custo), que passavam a ser
   indistinguíveis de um campo de texto. O `padding` também precisa preservar os
   2.25rem que o vendor reserva para a seta. (achado ALTO-2, confirmado no
   bundle: `.form-select` traz `--bs-form-select-bg-img` e
   `padding: .375rem 2.25rem .375rem .75rem`.) */
.form-control,
.form-select {
  min-height: 38px;
  font-size: 15px;
  font-family: var(--mmg-main);   /* o .card-header impõe Condensed por herança */
  background-color: var(--superficie-campo);
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  color: var(--texto);
  caret-color: var(--azul-800);
}
.form-control { padding: 7px 10px; }
.form-select { padding: 7px 2.25rem 7px 10px; }

.form-control:hover,
.form-select:hover { border-color: color-mix(in srgb, var(--texto) 45%, transparent); }
.form-control:focus,
.form-select:focus {
  background-color: var(--superficie-campo);
  border-color: var(--azul-800);
  box-shadow: none;
  color: var(--texto);
}
/* O vendor tem `.form-control:focus { outline: 0 }` (0,2,0), que vencia o
   `:focus-visible` global (0,1,0) — o campo focado ficava sem anel nenhum,
   contra a regra "foco de teclado em TODO elemento interativo". O handoff pede
   `outline-offset: 0` aqui (o campo já tem borda própria). (achado BAIXO-12) */
.form-control:focus-visible,
.form-select:focus-visible {
  outline: 2px solid var(--azul-800);
  outline-offset: 0;
}

.form-label,
label { font-size: 13px; margin-bottom: 5px; color: color-mix(in srgb, var(--texto) 70%, transparent); }

/* -------------------------------------------------------------------------
   6 · Tabela
   ------------------------------------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--texto);
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  color: var(--texto);
}
.table > thead > tr > th {
  font-family: var(--mmg-main);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--texto) 60%, transparent);
  padding: 11px 6.8px;
  border-bottom: 1px solid var(--borda);
  background: transparent;
}
.table > tbody > tr > td {
  padding: 11px 6.8px;
  border-bottom: 1px solid color-mix(in srgb, var(--texto) 8%, transparent);
  background: transparent;
  vertical-align: middle;
}
.table > tbody > tr:hover > td { background: color-mix(in srgb, var(--texto) 4%, transparent); }

/* -------------------------------------------------------------------------
   7 · Etiquetas de estado — vocabulário FIXO do projeto gráfico.
   O vermelho é só prejuízo; nunca decorativo.
   ------------------------------------------------------------------------- */
.etq {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  letter-spacing: .02em;
  padding: 3px 9px;
  border-radius: 3px;
  border: 1px solid transparent;
}
.etq-azul { background: var(--azul-100); color: var(--azul-800); }
.etq-neutra { background: var(--light-grey); color: var(--dark-grey-2); }
.etq-contorno { border-color: var(--azul-800); color: var(--azul-800); background: transparent; }
.etq-pendente { background: var(--perigo-fundo); color: var(--perigo-tinta); }

/* Contas de acesso: lista + quadro de conceder, na proporção do handoff. */
.grade-contas { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .grade-contas { grid-template-columns: 1fr; } }

/* Papel concedido — etiqueta CONTORNADA (handoff), com o × de revogar dentro.
   O × é ação destrutiva de verdade (revoga acesso), mas segue a regra: o
   vermelho fica para prejuízo, e a confirmação é que protege. */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  letter-spacing: .02em;
  padding: 3px 8px;
  border: 1px solid var(--azul-800);
  border-radius: 3px;
  color: var(--azul-800);
  background: transparent;
  margin: 2px 3px 2px 0;
}
.chip button {
  border: none;
  background: transparent;
  color: var(--azul-800);
  cursor: pointer;
  line-height: 1;
  padding: 0;
  font-size: 14px;
}
.chip button:hover { color: var(--perigo-tinta); }

/* Linha inativa: o registro não desaparece, fica recuado de intensidade.

   ⚠️⚠️ NADA DE `opacity` AQUI — e este comentário substitui um que estava ERRADO.
   A primeira versão desta fase usava `tr.inativa { opacity: .55 }` afirmando que
   "o texto continua em tinta cheia". Falso: a linha CONTÉM cinza — o e-mail em
   `small.text-muted` e as etiquetas `.etq-neutra` —, então acontecia exatamente
   a composição que o tokens.css proíbe. Medido no navegador:

      texto principal 3,91:1 · e-mail 2,22:1 · etiqueta 2,22:1
      botão "Reativar" 3,91:1  ← e este é um controle ATIVO

   Pior: "Reativar" só existe na linha inativa. O operador que precisa trazer de
   volta um funcionário que retornou encontra o único botão de que precisa no
   pior contraste da tela. A exceção da WCAG para componente inativo não cobre:
   o botão está habilitado e a linha é conteúdo.

   A atenuação passa a ser por COR e só no texto DIRETO da célula. Quem tem cor
   própria — etiqueta, botão, `small.text-muted` — fica intocado e legível, e a
   etiqueta "inativa" já comunica o estado sem precisar apagar a linha inteira.
   Guardado por teste que COMPÕE (test/tokens.test.js). */
tr.inativa > td { color: color-mix(in srgb, var(--texto) 62%, var(--light-grey-2)); }

/* Linha que abre detalhe ao clique precisa dizer isso (handoff: "tr[clicável]
   cursor: pointer"). A regra morava no <style> da página antiga e não migrou na
   reescrita — a linha continuava clicável, sem affordance nenhuma. */
tr.clicavel, tr.linha-pessoa { cursor: pointer; }

/* Reserva de altura das mensagens de operação. Sem isto, a mensagem que aparece
   depois de um POST empurra os botões ~21px para baixo — fugindo do cursor de
   quem acabou de clicar. Também vinha do <style> das páginas antigas. */
.msg { min-height: 1.2rem; }

/* -------------------------------------------------------------------------
   7b · Cabeçalho de tela e blocos de navegação
   ------------------------------------------------------------------------- */
.tela-cabecalho {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.tela-cabecalho .acoes { display: flex; align-items: center; gap: 8px; flex: none; }
.tela-cabecalho .meta { margin: 4px 0 0; }

.grade-atalhos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}

/* Atalho CLICÁVEL (ícone + título + nota + chevron). */
.atalho {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  text-decoration: none;
  color: var(--texto);
}
.atalho:hover { background: var(--azul-100); color: var(--texto); }
.atalho .icone { color: var(--azul-800); flex: none; display: flex; }
.atalho .corpo { flex: 1 1 auto; min-width: 0; }
.atalho .titulo {
  font-family: var(--mmg-head);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.2;
  display: block;
}
.atalho .nota { display: block; margin-top: 2px; }
.atalho .seta { color: var(--dark-grey-2); flex: none; display: flex; }

/* Módulo que ainda NÃO existe: mesma anatomia, sem promessa de clique.
   Nem link, nem chevron, nem hover — a linha se declara pendente e pronto.
   (O oposto do campo de busca que aceita texto e não faz nada.) */
.lista-modulos { display: grid; gap: 2px; }
.modulo-pendente {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--texto) 8%, transparent);
  color: var(--dark-grey-2);
}
.lista-modulos .modulo-pendente:last-child { border-bottom: none; }
.modulo-pendente .icone { flex: none; display: flex; }
.modulo-pendente .titulo {
  font-family: var(--mmg-head);
  font-weight: 600;
  font-size: 16px;
  color: var(--texto);
  opacity: .7;
}
.modulo-pendente .nota { flex: 1 1 auto; }

/* -------------------------------------------------------------------------
   7c · Abas, faixa de filtro e segmentado
   ------------------------------------------------------------------------- */

/* Abas de seção. São LINKS para páginas de verdade, não estado de cliente —
   o próprio handoff diz que no código real cada aba vira rota. */
.abas {
  display: flex;
  gap: 20px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 18px;
}
.abas a {
  font-family: var(--mmg-head);
  font-weight: 600;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--texto);
  text-decoration: none;
  padding-bottom: 8px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.abas a:hover { color: var(--azul-800); }
.abas a[aria-current='page'] { color: var(--azul-800); border-bottom-color: var(--azul-800); }

.faixa-filtro {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--borda);
  margin-bottom: 14px;
}
.faixa-filtro .direita { margin-left: auto; }
.faixa-filtro .form-control,
.faixa-filtro .form-select { min-height: 36px; }
/* ⚠️ SEM o prefixo `.faixa-filtro`. A regra nasceu escopada à faixa de filtro,
   e fora dela a classe não recebia NADA: o formulário do inventário renderizava
   "☐Alugado", caixa colada no texto, sem flex e sem espaço. Idioma usado em mais
   de um lugar não pode depender de estar dentro de um contêiner específico —
   mesma lição do `dl.det`. */
.caixa {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--texto);
  margin: 0;
}
.caixa input { margin: 0; }

/* Segmentado (Ativos | Inativos | Todos). Um grupo de botões, não um select:
   as três opções ficam visíveis e a escolhida é a única sólida da faixa. */
.segmentado {
  display: inline-flex;
  border: 1px solid var(--borda);
  border-radius: var(--raio-controle);
  overflow: hidden;
}
.segmentado button {
  border: none;
  border-right: 1px solid var(--borda);
  background: transparent;
  font-family: var(--mmg-main);
  font-size: 14px;
  padding: 7px 13px;
  color: var(--texto);
  cursor: pointer;
}
.segmentado button:last-child { border-right: none; }
.segmentado button:hover { background: color-mix(in srgb, var(--texto) 6%, transparent); }
.segmentado button[aria-pressed='true'] { background: var(--azul-800); color: var(--brand-contrast); }
.segmentado button[aria-pressed='true']:hover { background: var(--azul-700); }

/* -------------------------------------------------------------------------
   7d · Padrão de HISTÓRICO — traduz o princípio fundador do Atlas
   Nada é sobrescrito; a interface mostra isso sem o usuário ler a data. A
   leitura vertical da coluna de datas é o que faz a série parecer série.
   ------------------------------------------------------------------------- */
.historico { display: block; }
/* Histórico recolhível: o botão-toggle imita o kicker + um chevron. */
.hist-toggle { display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; padding: 2px 0; cursor: pointer; color: inherit; }
.hist-toggle .hist-chevron { line-height: 1; color: var(--dark-grey-2); }
.hist-toggle:hover .kicker { text-decoration: underline; }
/* foco: o `:focus-visible` global (var(--azul-800)) já cobre o botão. */
/* ⚠️ 185px, não os 130px do handoff. O desenho assumiu data curta; aqui a
   linha encerrada mostra um INTERVALO em ISO ("2026-01-10 → 2026-07-01", 23
   caracteres), que a 130px quebra em duas linhas e desmancha a leitura vertical
   das datas — que é justamente o que faz a série parecer série.

   ⚠️ ERA 165px E A REVISÃO PEGOU A REGRESSÃO: com a data subindo para 14px, o
   intervalo passou a medir 160px e a linha ENCERRADA só tem
   `165 − 14 de recuo = 151px`. Voltou a quebrar em duas linhas — exatamente o
   defeito que os 165px existiam para impedir, reintroduzido por meio pixel de
   fonte. Medido no navegador com `measureText`, não estimado:

      intervalo cheio  160px (Barlow) · 166px (Arial, o fallback mais largo)
      "(mesmo dia)"    145px      vigente "desde …"  108px
      disponível hoje  185 − 14 = 171px

   O `white-space: nowrap` da `.hist-data` é a parte ESTRUTURAL da correção: se
   o formato da data mudar um dia, o texto vaza — visível — em vez de quebrar em
   silêncio e desmanchar a série sem ninguém notar. Um número folgado sozinho
   não protege contra a próxima mudança; o nowrap denuncia. */
.hist-linha {
  display: grid;
  grid-template-columns: 185px 1fr;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--texto) 8%, transparent);
}
.hist-linha:last-child { border-bottom: none; }

.hist-data {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  white-space: nowrap;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
/* Marca de registro da versão VIGENTE: quadrado de 6px em azul-800. */
.hist-linha.vigente .hist-data { color: var(--azul-700); font-weight: 500; }
.hist-linha.vigente .hist-data::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--azul-800);
  flex: none;
  align-self: center;
}

/* ⚠️ VERSÃO ENCERRADA — a opacidade vai na LINHA e o texto fica em TINTA CHEIA.
   NÃO pintar de cinza: opacidade e cor se COMPÕEM, e cinza a 62% sobre o papel
   dá 2,50:1 — abaixo até do piso de 3:1 —, tornando ilegíveis justamente a data
   e a autoria de toda a série, que é o que o padrão existe para mostrar.
   `--texto` a 62% dá 4,91:1 e continua "apagado". Regra do tokens.css, achado
   MÉDIO-1 da revisão da Fase A. NÃO REABRIR. */
.hist-linha.encerrada { opacity: var(--historico-opacidade); }
.hist-linha.encerrada .hist-data { padding-left: 14px; }  /* recuo onde estaria a marca */

.hist-corpo { font-size: 14px; }
/* Versão sem diferença nenhuma e versão inicial: o texto se explica, em vez de
   deixar a linha vazia. Uma linha "nenhum campo monitorado mudou" é um SINAL —
   significa que o detector do sync criou versão sem motivo —, então ela precisa
   ser legível e nomeável, não apagada.

   ⚠️⚠️ NADA DE `opacity` AQUI — E EU ERREI ISTO DE NOVO, na quarta vez que a
   mesma composição morde este projeto. Escrevi `opacity: .75` com um comentário
   dizendo "nunca cinza sobre a opacidade da linha". O comentário estava certo
   sobre o CINZA e errado sobre o MECANISMO: opacidades também se COMPÕEM.
   Dentro de `.hist-linha.encerrada` (opacity .62) o resultado é
   0,62 × 0,75 = 0,465 — e `--mmg-text` a 46,5% sobre o papel dá **3,07:1**,
   abaixo de AA. "Versão inicial" está SEMPRE numa linha encerrada, então a
   frase nasceria ilegível em 100% dos casos.

   O itálico já distingue a frase do conteúdo normal. A única atenuação é a
   opacidade da própria linha, que é a regra do padrão de histórico. */
.hist-sem-mudanca,
.hist-inicial { font-style: italic; color: var(--texto); }
.hist-campos { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.hist-campos b { font-weight: 500; }
.hist-autoria { margin-top: 4px; font-size: 13px; color: var(--dark-grey-2); }
/* Na linha encerrada o cinza da autoria também se compõe com a opacidade —
   por isso ela usa a tinta, e a opacidade da linha faz o resto. */
.hist-linha.encerrada .hist-autoria { color: var(--texto); }

/* -------------------------------------------------------------------------
   8 · Avisos
   O vermelho é SÓ prejuízo — e um erro de operação é prejuízo. As cores do
   Bootstrap (#f8d7da/#58151c) não são da paleta Anglo.
   ------------------------------------------------------------------------- */
.alert {
  border-radius: var(--raio-controle);
  border: 1px solid transparent;
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 12px;
}
.alert-danger {
  --bs-alert-color: var(--perigo-tinta);
  --bs-alert-bg: var(--perigo-fundo);
  --bs-alert-border-color: color-mix(in srgb, var(--perigo) 35%, transparent);
  color: var(--perigo-tinta);
  background: var(--perigo-fundo);
  border-color: color-mix(in srgb, var(--perigo) 35%, transparent);
}
/* ⚠️ Tinta em `--atencao-tinta`, não em `--atencao`. O par original dava 3,91:1
   sobre o azul tênue — e este alerta é o "Você não tem permissão" das três abas
   de Cadastros, ou seja, a página inteira de quem foi barrado. A borda também
   subiu de 35% para 60%: a 35% ficava em 1,55:1, sem delimitar nada. */
.alert-warning {
  --bs-alert-color: var(--atencao-tinta);
  --bs-alert-bg: var(--azul-100);
  color: var(--atencao-tinta);
  background: var(--azul-100);
  border-color: color-mix(in srgb, var(--atencao) 60%, transparent);
}
/* Mensagem de erro solta (as telas usam .msg.text-danger). */
.text-danger { color: var(--perigo-tinta) !important; }
.text-muted { color: var(--dark-grey-2) !important; }

/* Confirmação de operação. NÃO usa verde: a paleta do projeto gráfico nasce das
   duas cores do logo, e o vocabulário de estado foi deliberadamente movido para
   o azul da marca (`--estado-ativo` era verde e virou `--azul-800`). O verde
   `--sucesso` sobrevive no tokens.css por compatibilidade, mas não é cor de
   interface aqui. */
.msg-ok { color: var(--azul-700); }

/* Nota de rodapé de tabela: truncamento, explicação de estado vazio. */
.nota { font-size: 13px; color: var(--dark-grey-2); }

/* Estado vazio que EXPLICA, em vez de tabela em branco.
   Exigência do handoff: com escopo de BU o filtro é fail-closed e um usuário
   escopado vê zero linhas — isso é deliberado e precisa ser dito. */
.vazio {
  border: 1px dashed var(--borda);
  border-radius: var(--raio);
  padding: 24px 20px;
  text-align: center;
  color: var(--dark-grey-2);
  font-size: 14px;
}
.vazio strong { display: block; color: var(--texto); font-size: 15px; margin-bottom: 4px; }

/* Lista de definição do DETALHE — rótulo à esquerda, valor à direita.
   ⚠️ Mora AQUI, e não no <style> de cada página, porque nasceu duplicada em
   pessoas.html e a tela de inventário simplesmente ESQUECEU a regra: a ficha
   renderizava empilhada, sem erro nenhum, exatamente a classe de defeito da
   Fase A (o arquivo existe, a regra não chega). Estilo compartilhado entre
   telas pertence à folha compartilhada. */
dl.det {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 6px 16px;
  margin: 0;
  font-size: 14px;
}
dl.det dt { color: var(--dark-grey-2); font-weight: 400; }
dl.det dd { margin: 0; }

/* Identificador clicável da lista — botão de verdade, para o Tab alcançar e o
   Enter abrir (WCAG 2.1.1). Herda a aparência do texto porque o afeto visual da
   linha é a linha inteira; o que muda é só o foco ser visível e ele existir. */
.abrir-ficha {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
}
.abrir-ficha:hover { text-decoration: underline; }
.abrir-ficha:focus-visible {
  outline: 2px solid var(--azul-800);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------------------
   RODAPÉ DE VERSÃO E NOVIDADES

   A versão é informação permanente e discreta: fica no rodapé, no tom suave,
   e só ganha peso quando há algo que a pessoa ainda não viu. O selo é um ponto
   pulsante — some sozinho ao abrir, então nunca vira ruído crônico.

   Nenhum hex solto: toda cor sai de var(--*), como manda a catraca do projeto.
--------------------------------------------------------------------------- */
.casca-rodape {
  display: flex;
  justify-content: center;
  padding: 1.25rem 1rem 2rem;
}
.rodape-versao {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  border: 0;
  background: none;
  padding: .25rem .5rem;
  border-radius: 999px;
  font: inherit;
  font-size: 13.5px;
  color: var(--texto-suave);
  cursor: pointer;
}
.rodape-versao:hover { color: var(--azul-800); }
.rodape-versao:focus-visible {
  outline: 2px solid var(--azul-800);
  outline-offset: 2px;
}
.rodape-sep { opacity: .5; }

/* Com novidade, o link sai do tom de rodapé e assume a cor de destaque. */
.rodape-versao.tem-novidade { color: var(--azul-800); font-weight: 600; }
.rodape-ponto {
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  background: var(--azul-800);
  animation: rodape-pulso 1.8s ease-in-out infinite;
}
@keyframes rodape-pulso {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .45; transform: scale(.78); }
}
/* Quem pediu menos movimento não recebe pulso — o ponto continua lá, parado. */
@media (prefers-reduced-motion: reduce) {
  .rodape-ponto { animation: none; }
}

/* --- o diálogo ----------------------------------------------------------- */
.novidades {
  width: min(38rem, calc(100vw - 2rem));
  max-height: min(80vh, 44rem);
  padding: 0;
  border: 1px solid var(--borda);
  border-radius: 10px;
  background: var(--superficie);
  color: var(--texto);
}
.novidades::backdrop { background: color-mix(in srgb, var(--mmg-text) 45%, transparent); }
.novidades-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  background: var(--superficie);
}
.novidades-titulo {
  margin: 0;
  font-family: var(--mmg-head);
  font-size: 20px;
  letter-spacing: .01em;
}
.novidades-fechar {
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  padding: 0 .25rem;
  color: var(--texto-suave);
  cursor: pointer;
}
.novidades-fechar:hover { color: var(--texto); }
.novidades-fechar:focus-visible { outline: 2px solid var(--azul-800); outline-offset: 2px; }
.novidades-corpo { padding: .5rem 1.25rem 1.25rem; overflow-y: auto; max-height: calc(80vh - 4rem); }

.release { padding: 1rem 0; border-bottom: 1px solid var(--borda); }
.release:last-child { border-bottom: 0; }
.release-cab { display: flex; align-items: baseline; gap: .6rem; }
.release-versao {
  font-family: var(--mmg-head);
  font-size: 17px;
  font-weight: 600;
  color: var(--azul-800);
}
.release-data { font-size: 13px; color: var(--texto-suave); }
.release-titulo { margin: .15rem 0 .6rem; font-size: 15px; font-weight: 600; }
.release-itens { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.release-itens li { display: flex; align-items: flex-start; gap: .5rem; }
.release-texto { font-size: 15px; line-height: 1.45; }

/* Um tom por tipo. Novo puxa o azul da marca; melhoria, o verde de sucesso;
   correção, o âmbar de atenção — coerente com o resto do sistema, onde o
   vermelho é reservado a prejuízo. */
.etq-novo      { background: var(--azul-100); color: var(--azul-800); }
.etq-melhoria  { background: var(--sucesso-fundo); color: var(--sucesso-tinta); }
.etq-correcao  { background: var(--atencao-fundo); color: var(--atencao-tinta); }

/* --- editor de notas de versão (tela /versao) ----------------------------- */
.quadro-titulo-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem;
  border-bottom: 1px solid var(--borda);
}
.quadro-titulo-linha .quadro-titulo { padding: 0; border: 0; }

.quadro-interno {
  border: 1px solid var(--borda);
  border-radius: 8px;
  margin-bottom: .6rem;
  background: var(--superficie);
}
.quadro-interno > summary {
  padding: .6rem .85rem;
  cursor: pointer;
  list-style: none;
}
.quadro-interno > summary::-webkit-details-marker { display: none; }
.quadro-interno > summary::before { content: "▸ "; color: var(--texto-suave); }
.quadro-interno[open] > summary::before { content: "▾ "; }
.quadro-interno > summary:focus-visible { outline: 2px solid var(--azul-800); outline-offset: -2px; }
.quadro-interno-corpo { padding: .25rem .85rem .85rem; border-top: 1px solid var(--borda); }

.itens-nota { display: grid; gap: .4rem; }
.item-nota { display: flex; align-items: center; gap: .5rem; }
.item-nota input { flex: 1; }

/* -------------------------------------------------------------------------
   Botão de PLANILHA (importar/exportar XLSX) — padrão do Atlas, 03/08
   -------------------------------------------------------------------------
   Botão-ícone no canto superior direito do card. O desenho (faixa com "X" +
   grade) é montado por `planilhaBotao.js` e vem SEM cor: quem pinta é aqui, para
   que toda cor saia de var(--*) como manda a catraca. */
.btn-planilha {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border: 1px solid transparent;
  border-radius: var(--raio-controle);
  background: none;
  line-height: 0;
}
.btn-planilha:hover { background: var(--superficie-alt); border-color: var(--borda); }

.btn-planilha .ip-faixa,
.btn-planilha .ip-grade { fill: var(--planilha-verde); }
/* ⚠️ `fill:none` é obrigatório nos traços: sem ele o "X" fecha e vira triângulo
   preenchido, e as divisórias da grade viram manchas. */
.btn-planilha .ip-x,
.btn-planilha .ip-linhas {
  fill: none;
  stroke: var(--superficie);
  stroke-linecap: round;
}
.btn-planilha .ip-x { stroke-width: 2.4; }
.btn-planilha .ip-linhas { stroke-width: 1.3; }

/* -------------------------------------------------------------------------
   COPIAR COM UM CLIQUE — padrão do Atlas, 03/08
   -------------------------------------------------------------------------
   O botão nasce invisível e aparece no hover do valor OU quando recebe foco de
   teclado. ⚠️ `opacity: 0` e NÃO `display:none`/`visibility:hidden`: o botão
   precisa continuar FOCÁVEL para quem navega por Tab — esconder de verdade
   tornaria a funcionalidade exclusiva de quem usa mouse (WCAG 2.1.1). */
.copiavel {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}
.copiar-btn {
  opacity: 0;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--texto-suave);
  line-height: 0;
  cursor: pointer;
  transition: opacity .12s ease-out, color .12s ease-out;
}
.copiavel:hover .copiar-btn,
.copiavel:focus-within .copiar-btn { opacity: 1; }
.copiar-btn:hover { color: var(--azul-800); }
.copiar-btn:focus-visible {
  opacity: 1;
  outline: 2px solid var(--azul-800);
  outline-offset: 1px;
}

/* Aviso de "Copiado": canto inferior, some sozinho. */
.copiado-aviso {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 1080;
  padding: 8px 16px;
  border-radius: var(--raio-controle);
  background: var(--mmg-text);
  color: var(--brand-contrast);
  box-shadow: 0 6px 20px rgb(0 0 0 / 18%);
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 8px);
  transition: opacity .18s ease-out, transform .18s ease-out;
}
.copiado-aviso.aparece { opacity: 1; transform: translate(-50%, 0); }

/* ⚠️ Movimento pode causar mal-estar em quem tem sensibilidade vestibular: com
   `prefers-reduced-motion` o aviso ainda APARECE (é o retorno da ação), só não
   desliza. Suprimir o aviso inteiro tiraria a confirmação de quem pediu menos
   animação — não é o que a preferência quer dizer. */
@media (prefers-reduced-motion: reduce) {
  .copiado-aviso { transition: opacity .01ms; transform: translate(-50%, 0); }
  .copiar-btn { transition: none; }
}

/* Botão que se LÊ como texto da tabela — usado no nome da localidade, que abre o
   de-para. ⚠️ Continua sendo `<button>`, e de propósito: virar `<span>` com
   `onclick` tiraria o foco por teclado (WCAG 2.1.1), que é justamente o backlog
   de a11y aberto desde a Fase C. Aqui some só a CAIXA, não a semântica.

   `background-color`, não o `background` abreviado — o abreviado apaga
   `background-image`, a lição que já custou o caret do `<select>`.
   `font: inherit` (única forma permitida pela guarda da escala) para herdar o
   tamanho da célula em vez de declarar um número novo. */
.botao-texto {
  background-color: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.botao-texto:hover { text-decoration: underline; }