/* ==========================================================================
   Nuvem Azul — camada de marca (marca.css)

   Fonte única da marca dos apps da empresa (Kanban de Credenciamento, Central de WhatsApp).
   Mora na biblioteca (_design-library/extraidos/nuvem-azul/marca/) e é COPIADA para cada app por
   `node design.mjs sync`. A cópia não se edita: o `conferir` reprova cópia editada ou defasada.
   Mudou aqui, sobe o VERSAO e roda `node design.mjs verificar`.

   Ordem de importação no app:  tokens.css → components.css → marca.css → extensões do app.
   Depende só dos tokens e das classes .na-* do pacote. Agnóstico de framework (React, Vue,
   HTML puro): o que muda de uma tela para outra — largura das colunas de uma tabela, cor de um
   ponto, índice de uma linha — entra por custom property na marcação: --colunas, --colunas-media,
   --areas-media, --cor, --i... (lista em README.md). A família é "Gantari" (token --font-sans do
   pacote); como a fonte é carregada é decisão do app.

   Regras (as do DESIGN.md): só tokens, só os raios medidos, só a escala --text-*; --brand só em
   preenchimento; texto azul é --accent-text; fundo com texto branco é --accent-solid. Estado
   sempre composto com o bloco (.na-filtro.is-active), nunca .is-* solto. "Reduzir movimento"
   desliga toda animação daqui (cada seção tem o seu bloco no fim).
   Exceções à regra "sem cor solta": a miniatura do tema (mostra o tema que representa, não o da vez),
   o branco sobre fundo sólido de marca e as sombras de profundidade.

   Antes de criar uma classe: `grep` o nome neste arquivo e no do app. Já houve classe repetida
   (.na-evento, .na-pendencia) e keyframe repetido (na-sobe), que apagava o primeiro sem aviso.
   As seções seguem a ordem do CSS original do Kanban: a cascata (quem vence entre regras de
   mesma especificidade) é a de lá.
   ========================================================================== */

/* ==========================================================================
   1. Tokens da marca
   Origem: Kanban › verde do pacote e "Escuro neutro" (03–04/10/2026). Só o que a marca muda ou acrescenta; o resto é do tokens.css.
   ========================================================================== */
/* verde do pacote (#1c8a54): 3,93:1 no fundo do selo e 4,36:1 no branco — texto pequeno reprova o AA.
   Um tom abaixo dá 4,82 e 5,36 (medido em 03/10/2026). O do escuro é o do pacote.
   --success-solid é o par de --danger-solid: fundo com texto branco (5,36:1) nos dois temas. O
   --success do escuro (#5fd49a) é texto claro e não aguenta branco por cima. */
:root {
  --success: light-dark(#177a49, #5fd49a);
  --success-solid: #177a49;
}

/* Escuro neutro, o "chumbo" (pedidos do Leonardo: 03/10/2026, "muito azul, mais para o preto";
   04/10, "escuro demais, queria um preto mais claro"). O escuro do pacote é marinho
   (#0e1824 / #152230); aqui as superfícies são cinza-chumbo neutro (fundo #18191c, painéis #202124)
   e o azul fica só onde é marca e ação: botão, link, seleção, foco, fundo da aba ativa e o rail
   ativo. Só no escuro: o claro do pacote não muda. Clareou o fundo, sobe o cinza do texto apagado e
   do placeholder e remede. Contraste medido sobre --surface (#202124): muted 6,7:1 · placeholder
   5,9:1 (5,2 no soft) · accent-text sobre --selected 5,9:1 · texto 13,4:1.
   Os dois blocos abaixo são idênticos (o `design.mjs verificar` confere): o primeiro vale com
   data-theme="dark"; o segundo, sem data-theme, quando o sistema está no escuro. */
[data-theme="dark"] {
  --app-frame: #202124;
  --bg: #18191c;
  --surface: #202124;
  --surface-soft: #292a2e;
  --surface-sunken: #292a2e;
  --selected: #233142;
  --tab-active: #233142;
  --promo: #25262a;
  --brand-rail: #1c1d20;
  --rail-item-active: #2a3a4f;

  --fg: #e8eaed;
  --fg-2: #c4c7cc;
  --muted: #a3a7af;
  --placeholder: #989ca5;

  --divider: #2b2c30;
  --border: #333539;
  --border-dashed: #404247;
  --track: #313337;
  --scrollbar: #3b3d42;
  --timeline: #333539;
  --timeline-node: #2e3034;
  --timeline-node-active: #28394d;

  --danger-bg: #3a2328;
  --success-bg: #1b3529;
  --overlay-media: rgba(0, 0, 0, 0.62);
  --shadow-card: 0 0 0 1px #313337;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --app-frame: #202124;
    --bg: #18191c;
    --surface: #202124;
    --surface-soft: #292a2e;
    --surface-sunken: #292a2e;
    --selected: #233142;
    --tab-active: #233142;
    --promo: #25262a;
    --brand-rail: #1c1d20;
    --rail-item-active: #2a3a4f;

    --fg: #e8eaed;
    --fg-2: #c4c7cc;
    --muted: #a3a7af;
    --placeholder: #989ca5;

    --divider: #2b2c30;
    --border: #333539;
    --border-dashed: #404247;
    --track: #313337;
    --scrollbar: #3b3d42;
    --timeline: #333539;
    --timeline-node: #2e3034;
    --timeline-node-active: #28394d;

    --danger-bg: #3a2328;
    --success-bg: #1b3529;
    --overlay-media: rgba(0, 0, 0, 0.62);
    --shadow-card: 0 0 0 1px #313337;
  }
}

/* ==========================================================================
   2. Rail do app
   Origem: Kanban › "rail fora do .na-app" (rail com a marca, itens que encolhem pela altura, contador, rótulo no hover, avatar).
   ========================================================================== */
/* ---------- rail fora do .na-app (layout que não pinta o gradiente da casca) ---------- */
/* 11 seções (a referência tem 4): o espaçamento encolhe com a altura da janela, sem rolagem
   (rolagem no rail cortaria o rótulo que sai para a direita). */
.na-rail--app { background: var(--brand-rail); }
.na-rail--app .na-rail__logo { flex: none; }
.na-rail--app .na-rail__nav { gap: 12px; }
.na-rail__logo svg { width: 28px; height: 28px; }
.na-rail__marca-a { fill: var(--brand); }
.na-rail__marca-b { fill: var(--accent-solid); }
@media (max-height: 900px) {
  .na-rail--app { padding-top: 24px; }
  .na-rail--app .na-rail__logo { margin-bottom: 28px; }
  .na-rail--app .na-rail__nav { gap: 6px; }
}
/* com o Início (04/10/2026) são 12 itens: até 820 px de altura o item encolhe para 42 px e o rail cabe em
   1024×768 sem rolar a página (antes passava 8 px e cortava o avatar) */
@media (max-height: 820px) {
  .na-rail--app .na-rail__nav { gap: 4px; }
  .na-rail--app .na-rail__item { width: 42px; height: 42px; }
}
@media (max-height: 760px) {
  .na-rail--app { padding: 16px 0; }
  .na-rail--app .na-rail__logo { display: none; }
  .na-rail--app .na-rail__nav { gap: 4px; }
  .na-rail--app .na-rail__item { width: 40px; height: 40px; border-radius: var(--radius-md); }
}
/* número no item do rail (vencidas): fundo de erro com texto branco (4,89:1) */
.na-rail__conta {
  position: absolute; top: 2px; right: 0; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: var(--radius-pill); background: var(--danger-solid); color: var(--on-accent);
  font-size: var(--text-caption); font-weight: var(--weight-bold); line-height: 20px; text-align: center;
  box-shadow: 0 0 0 2px var(--brand-rail);
}
/* rótulo do item do rail no hover/foco */
.na-dica {
  position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); z-index: 50;
  padding: 6px 10px; border-radius: var(--radius-sm); white-space: nowrap; pointer-events: none;
  background: var(--fg); color: var(--surface); font-size: var(--text-label); font-weight: var(--weight-medium);
  opacity: 0; transition: opacity var(--duration-fast) var(--ease-standard);
}
.na-rail__item:hover .na-dica, .na-rail__item:focus-visible .na-dica { opacity: 1; }
/* avatar no pé do rail */
.na-rail__avatar {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); color: var(--accent-text); font-size: var(--text-label); font-weight: var(--weight-bold);
  text-transform: uppercase;
}

.na-rail__avatar--barra { width: 24px; height: 24px; font-size: var(--text-caption); }
.na-rail--app .na-rail__bottom .na-menu { color: var(--fg); }

/* ==========================================================================
   3. Barra do celular
   Origem: Kanban › "barra do celular" (o rail com rótulo, abaixo de 768 px; o fundo escurece para o branco passar AA).
   ========================================================================== */
/* ---------- barra do celular (o rail com rótulo: o fundo escurece para o texto branco passar AA) ---------- */
.na-barra {
  display: flex; align-items: stretch; flex: none; z-index: 40;
  background: light-dark(var(--accent-solid), var(--brand-rail)); color: var(--on-accent);
  padding-bottom: env(safe-area-inset-bottom);
}
.na-barra__item {
  flex: 1; min-width: 0; height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: var(--text-caption); font-weight: var(--weight-medium); line-height: 1; color: var(--on-accent); text-decoration: none;
}
.na-barra__item .na-icon { width: 22px; height: 22px; }
.na-barra__item[aria-current="page"], .na-barra__item[data-ativo="true"] { font-weight: var(--weight-bold); box-shadow: inset 0 3px 0 var(--on-accent); }
.na-barra__item > span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-barra__ponto { position: absolute; top: -2px; right: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger-solid); box-shadow: 0 0 0 2px var(--on-accent); }

/* ==========================================================================
   4. Tela: sidebar + principal
   Origem: Kanban › "tela" (sidebar com filtros, ajuda, topo com busca e abas; o canto esquerdo de cada coluna sobre a anterior).
   ========================================================================== */
/* ---------- tela: sidebar + principal, com o canto esquerdo sobre a coluna anterior ---------- */
.na-tela { --rail-w: 0px; border-radius: 0; }
.na-tela .na-sidebar { padding-top: 34px; overflow-y: auto; scrollbar-width: none; }
.na-tela .na-sidebar__title { margin: 0 0 0 11px; }
.na-tela .na-btn--block { margin-top: 26px; }
.na-tela .na-main { gap: var(--space-5); }
.na-tela__titulo-curto, .na-tela__ajuda-curta { display: none; }
.na-tela .na-sidebar > * { flex-shrink: 0; }
.na-tela__grupo { margin: 28px 0 8px 11px; font-size: var(--text-label); font-weight: var(--weight-semibold); color: var(--muted); }
/* item de filtro com o tamanho do .na-nav do pacote (14 px, ícone 18 de traço 1,4); a lista avança
   8 px sobre o padding da sidebar para "Vencem em 7 dias" caber inteiro em 210 px */
.na-filtros { list-style: none; margin: 0 -8px; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.na-filtro {
  width: 100%; display: flex; align-items: center; gap: 9px; height: 40px; padding: 0 10px; border-radius: var(--radius-md);
  font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--fg-2); text-align: left;
  transition: background-color var(--duration-fast) var(--ease-standard);
}
.na-filtro:hover { background: var(--surface-soft); }
.na-filtro > .na-icon { width: 18px; height: 18px; stroke-width: 1.4; color: var(--muted); }
.na-filtro > .na-cat { flex: none; }
/* rótulo longo ("E-mail / hospedagem") quebra em duas linhas em vez de cortar */
.na-filtro { height: auto; min-height: 40px; padding-block: 8px; }
.na-filtro__rotulo { flex: 1; min-width: 0; line-height: 1.2; overflow-wrap: anywhere; }
.na-filtro__conta { font-size: var(--text-label); font-weight: var(--weight-semibold); color: var(--muted); font-variant-numeric: tabular-nums; }
.na-filtro__conta--alerta { color: var(--danger); font-weight: var(--weight-bold); }
.na-filtro.is-active { background: var(--selected); color: var(--accent-text); font-weight: var(--weight-bold); }
.na-filtro.is-active > .na-icon, .na-filtro.is-active .na-filtro__conta { color: var(--accent-text); }
.na-filtro.is-active .na-filtro__conta--alerta { color: var(--danger); }
/* ajuda da tela: fechada por padrão (quem já sabe não perde altura), no pé da sidebar */
.na-ajuda { margin-top: auto; border-radius: var(--radius-lg); background: var(--promo); font-size: var(--text-caption); line-height: 1.4; color: var(--muted); }
.na-ajuda summary {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 40px; padding: 0 12px 0 16px;
  list-style: none; cursor: pointer; border-radius: var(--radius-lg);
  font-size: var(--text-label); font-weight: var(--weight-semibold); color: var(--fg);
}
.na-ajuda summary::-webkit-details-marker { display: none; }
.na-ajuda summary .na-icon { width: 16px; height: 16px; color: var(--muted); transition: transform var(--duration-fast) var(--ease-standard); }
.na-ajuda[open] summary .na-icon { transform: rotate(180deg); }
.na-ajuda__texto { margin: 0; padding: 0 16px 14px; }
/* pé da sidebar: a ajuda (e o que mais o app puser), empurrada para baixo */
.na-sidebar__pe { margin-top: auto; display: grid; gap: 10px; }
.na-sidebar__pe .na-ajuda { margin-top: 0; }
.na-tela .na-sidebar > nav { margin-bottom: 24px; }

/* topo da área principal: busca + abas */
.na-tela .na-topbar { flex-wrap: wrap; height: auto; min-height: 54px; row-gap: 12px; }
.na-tela .na-topbar > * { min-width: 0; }
.na-tela .na-search { flex: 1 1 320px; width: auto; max-width: 498px; }
.na-search__limpar { width: 28px; height: 28px; border-radius: var(--radius-control); display: grid; place-items: center; color: var(--muted); flex: none; }
.na-search__limpar:hover { background: var(--surface-soft); color: var(--fg); }
.na-search__limpar .na-icon { width: 16px; height: 16px; }
.na-tela .na-tabs { margin-top: 0; flex-wrap: wrap; }
.na-tab { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.na-tab .na-icon { width: 16px; height: 16px; }
.na-tab__conta { font-size: var(--text-caption); font-weight: var(--weight-semibold); color: inherit; font-variant-numeric: tabular-nums; }
.na-tab__conta--alerta { color: var(--danger); font-weight: var(--weight-bold); }
/* trocas por faixa: o que só existe no celular, e o que sai dele */
.na-so-celular { display: none; }

/* ==========================================================================
   5. Tabela compacta e paginação
   Origem: Kanban › "tabela: colunas por tela, linha compacta (44 px) e paginação".
   ========================================================================== */
/* ---------- tabela: colunas por tela, linha compacta (44 px = linha do toast) e paginação ----------
   Cada tabela passa --colunas (≥1280); com .na-tabela--areas também --colunas-media, --areas-media e
   --areas-media-topo (768–1279: duas linhas de 57 px, a altura da linha do pacote) e --areas-celular. */
.na-tabela { margin-top: 0; }
.na-tabela .na-table__row { grid-template-columns: var(--colunas); column-gap: 16px; }
.na-tabela--compacta .na-table__body .na-table__row { height: 44px; }
.na-badge--neutro { background: var(--surface-soft); color: var(--muted); }
.na-celula .na-badge { height: 22px; margin-left: 8px; vertical-align: 1px; }
.na-tabela--estatica .na-table__body .na-table__row:not(.is-selected):hover { background: none; border-top-color: var(--divider); }
.na-tabela--estatica .na-table__body .na-table__row:not(.is-selected):hover + .na-table__row { border-top-color: var(--divider); }
.na-tabela--estatica .na-table__body .na-table__row:first-child:hover { border-top-color: transparent; }
/* paginada na altura: nunca rola, então não reserva a faixa da barra de rolagem (o pacote empurra o
   corpo 6 px para a direita contando com ela, e sem a barra as colunas saíam do prumo do cabeçalho) */
.na-table__body--medida { overflow: hidden; margin-right: 0; padding-right: 0; }
.na-celula { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
a.na-file__name { text-decoration: none; }
a.na-file__name:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.na-texto-fg2 { color: var(--fg-2); }
.na-paginacao {
  flex: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  min-height: 52px; padding: 8px 11px; border-top: 1px solid var(--divider);
  font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--muted);
}
.na-paginacao__paginas { display: flex; align-items: center; gap: 4px; }
.na-paginacao__pagina {
  min-width: 30px; height: 30px; padding: 0 6px; border-radius: var(--radius-control);
  font-size: var(--text-label); font-weight: var(--weight-medium); color: var(--fg-2); font-variant-numeric: tabular-nums;
}
.na-paginacao__pagina:hover { background: var(--surface-soft); }
.na-paginacao__pagina[aria-current="page"] { background: var(--selected); color: var(--accent-text); font-weight: var(--weight-bold); }
.na-paginacao__reticencias { min-width: 20px; text-align: center; }
.na-iconbtn[disabled] { opacity: .45; cursor: not-allowed; }
.na-tabela__vazio { padding: var(--space-6) var(--space-2); }
.na-tabela__vazio .na-empty { border: 0; background: none; padding: var(--space-8) var(--space-4); }
.na-esqueleto-linha { display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 11px; }
.na-esqueleto-linha .na-skeleton { height: 14px; }

/* ==========================================================================
   6. Botão pequeno
   Origem: Kanban › "botão pequeno (linha de tabela)".
   ========================================================================== */
/* ---------- botão pequeno (linha de tabela) ---------- */
.na-btn--sm { height: 32px; gap: 6px; padding: 0 12px; border-radius: var(--radius-control); }
.na-btn--sm .na-icon { width: 16px; height: 16px; }
.na-btn--ghost.na-btn--perigo { color: var(--danger); }
.na-btn--ghost.na-btn--perigo:hover { background: var(--danger-bg); }

/* ==========================================================================
   7. Campo, select e linha de campos
   Origem: Kanban › "campo: select com chevron, linha de campos" (+ .na-field__opcional, do histórico da tarefa).
   ========================================================================== */
/* ---------- campo: select com chevron, linha de campos ---------- */
.na-select { position: relative; display: grid; }
.na-select select { appearance: none; padding-right: 40px; width: 100%; }
.na-select .na-icon { position: absolute; right: 14px; top: 50%; width: 16px; height: 16px; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.na-field .na-input { width: 100%; }
.na-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.na-link-acao { display: inline-flex; align-items: center; gap: 6px; min-height: 28px; font-size: var(--text-label); font-weight: var(--weight-semibold); color: var(--accent-text); }
.na-link-acao:hover { text-decoration: underline; text-underline-offset: 3px; }
.na-link-acao[disabled] { opacity: .45; cursor: not-allowed; text-decoration: none; }
.na-texto-dica { margin: 0; font-size: var(--text-caption); color: var(--muted); }
.na-field__opcional { margin-left: 6px; font-weight: var(--weight-regular); color: var(--muted); }

/* ==========================================================================
   8. Alerta fixo na tela
   Origem: Kanban › "alerta fixo na tela" (+ variante âmbar da Lista de empresas e o aviso de sucesso das Tarefas).
   ========================================================================== */
/* ---------- alerta fixo na tela (erro de leitura, migração faltando) ---------- */
.na-alerta {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md);
  background: var(--danger-bg); color: var(--danger); font-size: var(--text-label); font-weight: var(--weight-medium); line-height: 1.35;
  box-shadow: inset 0 0 0 1px var(--danger);
}
.na-alerta .na-icon { width: 18px; height: 18px; margin-top: 1px; }
/* aviso âmbar (não é erro): algo ficou de fora e dá para tentar de novo */
.na-alerta--aviso { align-items: center; background: var(--surface); color: var(--fg-2); box-shadow: inset 0 0 0 1px var(--warning); }
.na-alerta--aviso > .na-icon { color: var(--warning); margin-top: 0; }
.na-alerta__texto { flex: 1; min-width: 0; display: grid; gap: 2px; }
/* aviso de sucesso fixo (a ação deu certo e o resultado fica na tela) */
.na-sucesso { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: var(--radius-md); background: var(--success-bg); color: var(--success); font-size: var(--text-label); font-weight: var(--weight-semibold); }
.na-sucesso .na-icon { width: 18px; height: 18px; }

/* ==========================================================================
   9. Toast de uma linha
   Origem: Kanban › "aviso depois de uma ação: o toast do pacote, com uma linha só".
   ========================================================================== */
/* ---------- aviso depois de uma ação: o toast do pacote, com uma linha só ---------- */
.na-toast--mensagem { width: 460px; }
.na-toast--mensagem .na-toast__head { height: auto; min-height: 60px; gap: 12px; padding: 12px 14px 12px 20px; border-bottom: 0; }
.na-toast--mensagem .na-toast__title { font-size: var(--text-body); font-weight: var(--weight-semibold); line-height: 1.35; }
.na-toast--mensagem.is-erro .na-toast__title { color: var(--danger); }
.na-toast__icone { width: 26px; height: 26px; color: var(--danger); flex: none; }
/* acima do diálogo (z 70): o aviso de um erro pode nascer de dentro dele, e atrás do véu ninguém o vê */
.na-toast.is-floating { z-index: 80; }

/* ==========================================================================
   10. Diálogo (modal) e confirmação
   Origem: Kanban › "modal: card do pacote com sombra de flutuante; folha no celular".
   ========================================================================== */
/* ---------- modal: card do pacote com sombra de flutuante; folha no celular ---------- */
.na-dialogo { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: var(--space-4); }
.na-dialogo__fundo { position: absolute; inset: 0; background: var(--overlay-media); touch-action: none; }
.na-dialogo__caixa {
  position: relative; width: 100%; max-width: var(--largura, 480px); max-height: min(85vh, 760px); display: flex; flex-direction: column;
  padding: 0; box-shadow: var(--shadow-float); overflow: hidden;
}
.na-dialogo__topo { display: flex; align-items: center; gap: 12px; padding: 20px 20px 12px 24px; flex: none; }
.na-dialogo__titulo { flex: 1; min-width: 0; font-size: var(--text-heading-sm); font-weight: var(--weight-bold); line-height: 1.2; }
.na-dialogo__corpo { padding: 4px 24px 24px; overflow-y: auto; display: grid; gap: var(--space-4); }
.na-dialogo__rodape { display: flex; justify-content: flex-end; gap: var(--space-3); padding-top: var(--space-2); }
.na-dialogo__contexto { font-size: var(--text-label); color: var(--muted); line-height: 1.4; }
.na-dialogo__contexto b { color: var(--fg); font-weight: var(--weight-semibold); }
.na-confirma { display: flex; gap: var(--space-3); }
.na-confirma__icone { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; background: var(--danger-bg); color: var(--danger); }
.na-confirma__icone--leve { background: var(--surface-soft); color: var(--warning); }
.na-confirma__icone .na-icon { width: 18px; height: 18px; }
.na-confirma__alvo { font-size: var(--text-control); font-weight: var(--weight-semibold); color: var(--fg); overflow-wrap: anywhere; }
.na-confirma__texto { margin-top: 4px; font-size: var(--text-label); color: var(--muted); line-height: 1.4; }

/* ==========================================================================
   11. Menu de ações (⋯) e folha do celular
   Origem: Kanban › "menu de ações (⋯): flutua no body para a tabela não cortar" e "folha do celular (Mais, conta)".
   ========================================================================== */
/* ---------- menu de ações (⋯): flutua no body para a tabela não cortar ---------- */
.na-menu {
  position: fixed; z-index: 80; min-width: 220px; padding: 6px; border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-float); display: grid;
}
.na-menu__item {
  display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 12px; border-radius: var(--radius-md);
  font-size: var(--text-control); font-weight: var(--weight-medium); color: var(--fg); text-align: left; width: 100%;
}
.na-menu__item:hover, .na-menu__item:focus-visible { background: var(--surface-soft); }
.na-menu__item--perigo { color: var(--danger); }
.na-menu__item .na-icon { width: 16px; height: 16px; color: var(--muted); }
.na-menu__item--perigo .na-icon { color: var(--danger); }
/* folha do celular (Mais, conta): o mesmo item do menu, com alvo de 48 px */
.na-folha { display: grid; gap: 2px; margin: 0 -12px; }
.na-folha + .na-folha { padding-top: 12px; border-top: 1px solid var(--divider); }
.na-folha__titulo { display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 12px; font-size: var(--text-label); font-weight: var(--weight-bold); color: var(--fg); }
.na-folha__titulo .na-rail__avatar--barra { background: var(--selected); }
.na-menu__item--folha { min-height: 48px; text-decoration: none; }
.na-menu__item--folha .na-icon { width: 20px; height: 20px; }
.na-menu__item[aria-current="page"] { background: var(--selected); color: var(--accent-text); font-weight: var(--weight-bold); }
.na-menu__item[aria-current="page"] .na-icon { color: var(--accent-text); }
.na-menu__texto { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-menu__detalhe { display: block; font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--danger); }
.na-menu__titulo { padding: 8px 12px 6px; font-size: var(--text-label); font-weight: var(--weight-bold); color: var(--fg); text-transform: capitalize; border-bottom: 1px solid var(--divider); margin-bottom: 4px; }
.na-menu__divisor { height: 1px; background: var(--divider); margin: 4px 0; }

/* ==========================================================================
   12. Linha do tempo dentro de diálogo
   Origem: Kanban › "linha do tempo dentro de modal".
   ========================================================================== */
/* ---------- linha do tempo dentro de modal ---------- */
.na-dialogo .na-timeline { margin-top: 4px; }
.na-timeline__entry:last-child { padding-bottom: 4px; }
.na-timeline__linha { font-size: var(--text-label); color: var(--fg-2); line-height: 1.4; }
.na-timeline__linha span { color: var(--muted); }

/* ==========================================================================
   13. Responsivo da tela
   Origem: Kanban › "responsivo da tela" (faixas 1599 / 1279 / 1023 / 767 px de tabela, título curto, diálogo em folha, toast).
   ========================================================================== */
/* ---------- responsivo da tela ---------- */
@media (max-width: 1599px) {
  .na-tabela .na-col-larga { display: none; }
  .na-tabela .na-table__row { grid-template-columns: var(--colunas-estreita, var(--colunas)); }
}
@media (max-width: 1279px) {
  .na-tabela .na-table__row { grid-template-columns: var(--colunas-media, var(--colunas)); }
  /* duas linhas: o ícone da categoria ocupa a altura toda à esquerda, e nome e serviço alinham */
  .na-tabela--areas .na-table__body .na-table__row { position: relative; height: 57px; padding-left: 57px; grid-template-areas: var(--areas-media); row-gap: 2px; }
  .na-tabela--areas .na-table__body .na-cat--row { position: absolute; left: 11px; top: 50%; translate: 0 -50%; }
  .na-tabela--areas .na-table__row--head { padding-left: 57px; grid-template-areas: var(--areas-media-topo); }
  .na-tabela--areas [data-area="d"] { white-space: normal; line-height: 1.25; }
  .na-tabela--areas .na-col-media-oculta { display: none; }
  .na-tabela--areas [data-area="a"] { grid-area: a; }
  .na-tabela--areas [data-area="b"] { grid-area: b; }
  .na-tabela--areas [data-area="c"] { grid-area: c; }
  .na-tabela--areas [data-area="d"] { grid-area: d; }
  .na-tabela--areas [data-area="e"] { grid-area: e; }
}
@media (max-width: 1023px) {
  .na-tela__titulo-curto { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
  .na-tela__titulo-curto h1 { font-size: var(--text-heading); font-weight: var(--weight-bold); line-height: 1; }
  .na-tela__ajuda-curta { display: block; flex: none; margin-top: 0; }
}
@media (max-width: 767px) {
  .na-tela { min-height: 100%; }
  .na-tela .na-main { gap: var(--space-4); padding-bottom: calc(var(--space-10) + 56px); }
  .na-tela .na-topbar > * { flex-basis: 100%; }
  .na-tela .na-search { max-width: none; }
  .na-so-celular { display: block; }
  .na-fora-do-celular { display: none; }
  .na-tela__titulo-curto .na-select { flex: 1 1 100%; }
  .na-tela__titulo-curto .na-input { height: 44px; font-size: 16px; }
  .na-tabela .na-table__row--head { display: none; }
  .na-tabela .na-table__body .na-table__row {
    height: auto; padding: 12px 8px; row-gap: 6px; column-gap: 12px;
    grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: var(--areas-celular);
  }
  .na-tabela .na-celula { white-space: normal; }
  /* o pacote esconde a 2ª e a 3ª célula no celular (a tabela dele tem 4 colunas); aqui a 2ª é o serviço */
  .na-tabela--areas .na-table__body .na-table__row > [data-area="b"] { display: block; }
  .na-tabela--areas .na-table__body .na-table__row { padding-left: 52px; }
  .na-tabela--areas .na-table__body .na-cat--row { left: 8px; top: 12px; translate: none; }
  .na-paginacao { justify-content: center; }
  .na-paginacao__resumo { flex-basis: 100%; text-align: center; }
  .na-dialogo { place-items: end stretch; padding: 0; }
  .na-dialogo__caixa { max-width: none; max-height: 90dvh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: env(safe-area-inset-bottom); }
  .na-dialogo__corpo .na-input { font-size: 16px; }
  .na-campos { grid-template-columns: minmax(0, 1fr); }
  .na-toast--mensagem.is-floating { bottom: calc(70px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .na-dica { transition: none; }
}
@media (max-width: 767px) {
  .na-tela__titulo-curto .na-so-celular { flex: 1 1 100%; }
  .na-tela .na-tab { min-height: 40px; }
  .na-tabela .na-file__name { white-space: normal; overflow-wrap: anywhere; }
}

/* ==========================================================================
   14. Movimento: microinterações
   Origem: Kanban › "Movimento" (03/10/2026): aperto, aba deslizante, linhas que entram, camadas que aparecem, Lottie, troca de tema.
   ========================================================================== */
/* ==========================================================================
   Movimento (pedido do Leonardo, 03/10/2026: microinterações). O pacote diz 120–200 ms e
   nada de coreografia: tudo aqui é curto e responde a um gesto. "Reduzir movimento" desliga
   (o globals.css zera duração; as cascatas e o fundo deslizante também saem).
   ========================================================================== */
@keyframes na-esmaece { from { opacity: 0; } to { opacity: 1; } }
@keyframes na-surge { from { opacity: 0; transform: translateY(8px) scale(0.98); } to { opacity: 1; transform: none; } }
@keyframes na-cai { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@keyframes na-sobe { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes na-linha-entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes na-acende { from { background-color: var(--selected); box-shadow: inset 3px 0 0 var(--brand); } to { background-color: transparent; box-shadow: inset 3px 0 0 transparent; } }

/* aperto: botão afunda um pouco no clique */
.na-btn, .na-iconbtn, .na-paginacao__pagina, .na-filtro, .na-tab, .na-menu__item {
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
.na-btn:active:not([disabled]), .na-iconbtn:active:not([disabled]), .na-paginacao__pagina:active { transform: scale(0.96); }
.na-filtro:active, .na-tab:active { transform: scale(0.98); }

/* abas: o fundo da ativa desliza até a escolhida (o Abas mede a posição) */
.na-tabs--deslizante { position: relative; isolation: isolate; }
.na-tabs--deslizante .na-tab[aria-selected="true"] { background: transparent; }
.na-tabs__fundo {
  position: absolute; left: 0; top: 0; z-index: -1; border-radius: var(--radius-sm); background: var(--tab-active); pointer-events: none;
  transition: transform 220ms var(--ease-standard), width 220ms var(--ease-standard), height 220ms var(--ease-standard);
}

/* linhas: entram ao trocar filtro ou página; a do mouse ganha a faixa da marca; a que acabou de mudar acende */
.na-linhas > .na-table__row { animation: na-linha-entra 180ms var(--ease-standard) both; animation-delay: calc(var(--i, 0) * 14ms); }
.na-tabela--estatica .na-table__body .na-table__row:hover { box-shadow: inset 3px 0 0 var(--brand); }
.na-linhas > .na-table__row.is-recem { animation: na-acende 1.8s var(--ease-standard) both; }

/* camadas que aparecem: modal, menu, aviso */
.na-dialogo__fundo { animation: na-esmaece 160ms var(--ease-standard) both; }
.na-dialogo__caixa { animation: na-surge 200ms var(--ease-standard) both; }
.na-menu { animation: na-cai 140ms var(--ease-standard) both; }
.na-toast.is-floating { animation: na-sobe 220ms var(--ease-standard) both; }

/* Lottie: as cores vêm do tema (classe da camada no JSON) */
.na-lottie { display: inline-block; flex: none; }
.na-lottie svg { display: block; }
.na-lottie .na-lottie__marca path { stroke: var(--brand); }
.na-lottie .na-lottie__check path { stroke: var(--accent-text); }
.na-lottie .na-lottie__traco path { stroke: var(--muted); }

/* tema: o novo se abre num círculo a partir do botão; sem o esmaecido padrão por baixo */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
@media (prefers-reduced-motion: reduce) {
  .na-linhas > .na-table__row, .na-linhas > .na-table__row.is-recem, .na-dialogo__fundo, .na-dialogo__caixa, .na-menu, .na-toast.is-floating { animation: none; }
  .na-tabs__fundo { transition: none; }
  .na-btn:active, .na-iconbtn:active, .na-paginacao__pagina:active, .na-filtro:active, .na-tab:active { transform: none; }
}

/* ==========================================================================
   15. Ações da linha em ícone animado
   Origem: Kanban › "ações da linha: todas em ícone animado (≥1280); abaixo de 1280, o ícone da vez + ⋯" e o ícone do menu em Lottie.
   ========================================================================== */
/* ---------- ações da linha: todas em ícone animado (≥1280); abaixo de 1280, o ícone da vez + ⋯ ---------- */
.na-acoes { display: flex; align-items: center; justify-content: flex-start; gap: 4px; overflow: visible; }
/* o título da coluna começa onde o 1º ícone começa a ser desenhado (o ícone de 16 px fica no meio do botão de 30) */
.na-table__row--head .na-col-acoes { padding-left: 7px; }
.na-acoes__principal { width: 30px; flex: none; }
.na-acoes__icones { display: grid; grid-template-columns: repeat(3, 30px); gap: 4px; flex: none; }
.na-acoes__historico { width: 30px; flex: none; }
.na-acoes__menu { display: none; }
@media (max-width: 1279px) {
  .na-acoes__icones, .na-acoes__historico { display: none; }
  .na-acoes__menu { display: block; }
}
.na-iconbtn--acao { color: var(--muted); background: transparent; }
.na-iconbtn--acao:hover, .na-iconbtn--acao:focus-visible { color: var(--fg); background: var(--surface-soft); }
.na-iconbtn--perigo:hover, .na-iconbtn--perigo:focus-visible { color: var(--danger); background: var(--danger-bg); }
/* a ação da vez (Pagar, Informar vencimento, Reativar): azul de texto do pacote, fundo de seleção no hover */
.na-iconbtn--acao.na-iconbtn--principal { color: var(--accent-text); }
.na-iconbtn--acao.na-iconbtn--principal:hover, .na-iconbtn--acao.na-iconbtn--principal:focus-visible { color: var(--accent-text); background: var(--selected); }
.na-lottie--icone { width: 16px; height: 16px; }
/* ícone do menu animado (IconeDoMenu): o do lucide segura o lugar (e fica, se o player falhar); pronto o Lottie,
   os dois se sobrepõem e só o Lottie aparece — o quadro 0 é o mesmo desenho, sem salto */
.na-icone-menu { display: inline-grid; flex: none; }
.na-icone-menu > * { grid-area: 1 / 1; }
.na-icone-menu__lottie { width: 100%; height: 100%; visibility: hidden; }
.na-icone-menu.is-pronto .na-icone-menu__parado { visibility: hidden; }
.na-icone-menu.is-pronto .na-icone-menu__lottie { visibility: visible; }
.na-icone-menu__lottie path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.na-lottie--icone path { stroke: currentColor; }
.na-lottie--icone .na-lottie__preenche path { fill: currentColor; stroke: none; }
/* nome da ação num balão em cima do ícone (flutua no body) */
.na-dica-flutuante {
  position: fixed; z-index: 90; transform: translate(-50%, calc(-100% - 8px)); pointer-events: none; white-space: nowrap;
  padding: 6px 10px; border-radius: var(--radius-sm); background: var(--fg); color: var(--surface);
  font-size: var(--text-label); font-weight: var(--weight-medium); line-height: 1.2;
  animation: na-esmaece 120ms var(--ease-standard) both;
}
.na-dica-flutuante--baixo { transform: translate(-50%, 8px); }
@media (prefers-reduced-motion: reduce) { .na-dica-flutuante { animation: none; } }
.na-acoes__vaga { width: 30px; height: 30px; flex: none; } /* vaga do ícone que não existe na linha: os outros ficam no prumo */

/* ==========================================================================
   16. Cabeçalho da tabela
   Origem: Kanban › "cabeçalho da tabela" (o do pacote, com o título um tom mais escuro).
   ========================================================================== */
/* ---------- cabeçalho da tabela: o do pacote (fio embaixo), com o título um tom mais escuro para ler melhor.
   A faixa com contorno e divisórias (03/10) foi reprovada pelo Leonardo: "ficou estranho". ---------- */
.na-tabela .na-table__row--head { color: var(--fg-2); }

/* ==========================================================================
   17. Peças de tabela e de lista
   Origem: Kanban › "Lista de empresas": colunas que saem, mono, célula de duas linhas, copiar, link, selos, sidebar que rola, topo da lista.
   ========================================================================== */
@media (max-width: 1599px) { .na-tabela .na-oculta-1600 { display: none; } }
@media (max-width: 1279px) { .na-tabela .na-oculta-1280 { display: none; } }
.na-tabela .na-celula { position: relative; }
.na-linha-clicavel { cursor: pointer; }
.na-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 0.92em; font-variant-numeric: tabular-nums; }
/* célula de duas linhas: nome em cima; dado secundário (razão social, CNPJ, telefone) embaixo, com o copiar */
.na-empresa-cel { display: flex; flex-direction: column; justify-content: center; gap: 1px; container: empresa / inline-size; }
.na-empresa-cel .na-file__name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-row); font-weight: var(--weight-medium); color: var(--fg); }
.na-empresa-cel__meta { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--text-caption); color: var(--muted); }
.na-empresa-cel__razao { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* coluna estreita (1024): a razão social cortada em "A." é ruído — fica só o CNPJ (a razão vai no title do nome) */
@container empresa (max-width: 300px) { .na-empresa-cel__razao, .na-empresa-cel__sep { display: none; } }

/* copiar: aparece com o mouse na linha (ou no foco); copiado vira check verde que salta */
@keyframes na-pula { 0% { transform: scale(0.6); } 60% { transform: scale(1.18); } 100% { transform: none; } }
.na-copiar { width: 24px; height: 24px; border-radius: var(--radius-sm); flex: none; opacity: 0; background: transparent; }
.na-copiar .na-icon { width: 14px; height: 14px; }
.na-table__row:hover .na-copiar, .na-copiar:focus-visible, .na-copiar.is-copiado { opacity: 1; }
.na-copiar:hover { background: var(--surface-soft); color: var(--fg); }
.na-copiar.is-copiado { color: var(--success); }
.na-copiar.is-copiado .na-icon { animation: na-pula 260ms var(--ease-standard); }
.na-celula-copia { display: flex; align-items: center; gap: 6px; }
.na-celula-copia__texto { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-celula-copia__mais { flex: none; font-size: var(--text-caption); color: var(--muted); }
.na-link-tabela { color: var(--accent-text); text-decoration: none; }
.na-link-tabela:hover { text-decoration: underline; text-underline-offset: 3px; }
/* selos: cheio (azul sólido), aviso (âmbar sólido), aviso-leve (contorno âmbar) */
.na-badge--cheio { background: var(--accent-solid); color: var(--on-accent); font-variant-numeric: tabular-nums; }
.na-badge--aviso { background: var(--warning); color: var(--surface); min-width: 24px; justify-content: center; }
.na-badge--aviso-leve { background: transparent; color: var(--warning); box-shadow: inset 0 0 0 1px var(--warning); }
/* sidebar com lista longa (23 quadros): rola por dentro, o pé fica à vista. A lista ocupa a mesma faixa das
   outras (8 px sobre o padding da esquerda) e a barra de rolagem mora no padding da direita: antes o botão
   avançava 8 px para fora da área que rola (borda e contorno cortados) e a barra encostava nele (04/10/2026) */
.na-tela .na-sidebar > .na-filtros-rolavel { flex: 1 1 auto; min-height: 120px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; scrollbar-gutter: stable; margin: 0 -18px 0 -8px; padding: 0; }
.na-filtros-rolavel > .na-tela__grupo { margin-left: 19px; }
.na-filtros-rolavel > .na-filtros { margin: 0; }
.na-filtros-rolavel .na-filtro:focus-visible { outline-offset: -3px; }
.na-tela .na-sidebar > .na-filtros-rolavel + .na-sidebar__pe { margin-top: 16px; }
.na-ponto { width: 10px; height: 10px; margin: 0 4px; border-radius: 50%; flex: none; background: var(--cor, var(--muted)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); }

/* topo da lista: busca e seletos numa linha, as abas embaixo */
.na-topbar__selects { display: flex; gap: 12px; flex: none; }
.na-topbar__selects .na-select { min-width: 190px; }
.na-topbar__selects .na-input { height: 46px; font-size: var(--text-control); }
.na-topbar__abas { flex-basis: 100%; }
/* até 1279: a busca encolhe para dividir a linha com os dois seletos (senão o topo vira 3 linhas e a tabela perde uma) */
@media (max-width: 1279px) { .na-tela .na-topbar:has(.na-topbar__selects) .na-search { flex-basis: 220px; } }
/* busca estreita: o texto de ajuda termina em reticências em vez de cortar no meio da palavra */
.na-tela .na-search input { text-overflow: ellipsis; }
.na-paginacao-com-acao { flex: none; display: flex; align-items: center; border-top: 1px solid var(--divider); }
.na-paginacao-com-acao .na-paginacao { flex: 1; border-top: 0; }
.na-paginacao-com-acao > .na-btn { margin-right: 11px; }
.na-ponto--sm { width: 6px; height: 6px; margin: 0; }
@media (max-width: 767px) {
  .na-topbar__selects { flex-basis: 100%; flex-wrap: wrap; }
  .na-topbar__selects .na-select { flex: 1 1 160px; min-width: 0; }
}
/* sidebar com dois grupos (Visão e Quadro): o 2º rola por dentro */
.na-tela .na-sidebar > nav + nav .na-tela__grupo { margin-top: 20px; }
.na-btn.is-active { background: var(--selected); color: var(--accent-text); }

/* ==========================================================================
   18. Peças comuns das telas de cadastro
   Origem: Kanban › "Peças comuns das telas de cadastro": ações em linha, selos, cartão lateral, pendência, listas em diálogo, botão quadrado, campo com botão, escolha em segmentos.
   ========================================================================== */
/* ações da linha em ícones animados, lado a lado */
.na-acoes-linha { display: flex; align-items: center; gap: 4px; overflow: visible; }
/* selos lado a lado na célula (status + aviso), sem o recuo do selo depois de texto */
.na-selos { display: flex; align-items: center; gap: 6px; }
.na-tabela .na-selos .na-badge { margin-left: 0; }
.na-texto-perigo { color: var(--danger); }
/* sidebar: botão secundário abaixo dos filtros e cartão de atalho (link e valor copiável) */
.na-sidebar__secundario { flex: none; justify-content: flex-start; margin: 8px -8px 0; color: var(--fg-2); }
.na-cartao-lateral {
  flex: none; display: grid; gap: 6px; margin-top: 16px; padding: 12px 14px; border-radius: var(--radius-md);
  background: var(--surface-soft); font-size: var(--text-caption); color: var(--fg-2);
}
.na-cartao-lateral__titulo { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-label); font-weight: var(--weight-semibold); }
.na-cartao-lateral__titulo .na-icon { width: 14px; height: 14px; }
.na-cartao-lateral__linha { display: flex; align-items: center; gap: 6px; min-width: 0; }
.na-cartao-lateral__linha .na-mono { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-cartao-lateral .na-copiar { opacity: 1; }
.na-cartao-lateral .na-icon { width: 14px; height: 14px; flex: none; }
/* pendência no topo: botão com o número (vermelho quando há o que resolver) */
.na-pendencia { height: 46px; gap: 8px; }
.na-pendencia .na-icon { width: 17px; height: 17px; }
.na-pendencia__n { min-width: 22px; height: 22px; padding: 0 7px; border-radius: var(--radius-pill); display: inline-grid; place-items: center; background: var(--surface-soft); color: var(--fg-2); font-size: var(--text-caption); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.na-pendencia.is-alerta .na-pendencia__n { background: var(--danger-solid); color: var(--on-accent); }
/* listas dentro de diálogo: rolam por dentro; itens clicáveis; grupos com título */
.na-lista-rolavel { max-height: min(55vh, 460px); overflow-y: auto; display: grid; gap: 14px; scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; margin-right: -8px; padding-right: 8px; }
.na-lista-rolavel--fios { gap: 0; }
.na-lista-rolavel--fios > * + * { border-top: 1px solid var(--divider); }
.na-grupo-lista { display: grid; gap: 2px; }
.na-grupo-lista__titulo { font-size: var(--text-label); font-weight: var(--weight-semibold); color: var(--fg-2); margin-bottom: 4px; }
.na-grupo-lista__titulo .na-mono { color: var(--muted); font-weight: var(--weight-medium); }
.na-item-lista {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 6px 10px; border: 0; border-radius: var(--radius-md);
  background: none; font: inherit; font-size: var(--text-label); color: var(--fg); text-align: left; cursor: pointer;
  transition: background-color 120ms var(--ease-standard);
}
.na-item-lista:hover { background: var(--surface-soft); }
.na-item-lista > .na-icon { width: 16px; height: 16px; flex: none; color: var(--muted); }
.na-item-lista__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.na-item-lista__meta { flex: none; font-size: var(--text-caption); color: var(--fg-2); }
.na-item-lista .na-item-lista__acao { color: var(--accent-text); }
.na-dialogo__nota { font-size: var(--text-caption); color: var(--muted); }
.na-iconbtn--borda { background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); color: var(--fg-2); }
.na-iconbtn--borda:hover { color: var(--accent-text); box-shadow: inset 0 0 0 1px var(--accent-solid); background: var(--surface); }
.na-iconbtn--cheio { background: var(--accent-solid); color: var(--on-accent); }
.na-iconbtn--cheio:hover { background: var(--accent-solid-hover); }
.na-iconbtn--cheio:disabled { opacity: 0.4; cursor: not-allowed; }
.na-campo-com-botao .na-iconbtn { width: 40px; height: 40px; }
/* campo com botão ao lado e campo só de leitura */
.na-campo-com-botao { display: flex; align-items: center; gap: 8px; min-width: 0; }
.na-campo-com-botao > .na-select, .na-campo-com-botao > .na-input { flex: 1; min-width: 0; }
.na-input--leitura { display: flex; align-items: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: var(--surface-soft); color: var(--fg-2); }
/* escolha única em botões (o escolhido em azul, aria-pressed) */
.na-segmentos { display: flex; flex-wrap: wrap; gap: 6px; }
.na-segmento {
  display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-control);
  background: var(--surface-soft); color: var(--fg-2); font: inherit; font-size: var(--text-label); font-weight: var(--weight-medium); cursor: pointer;
  transition: background-color 120ms var(--ease-standard), color 120ms var(--ease-standard), box-shadow 120ms var(--ease-standard), transform 120ms var(--ease-standard);
}
.na-segmento:hover { color: var(--fg); background: var(--border); }
.na-segmento.is-active { background: var(--selected); color: var(--accent-text); box-shadow: inset 0 0 0 1.5px var(--accent-solid); }
.na-segmento:active { transform: scale(0.97); }
/* celular: tabela em cartão pelas áreas que a tela passa em --areas-celular */
@media (max-width: 767px) {
  .na-tabela--celular-areas [data-area="a"] { grid-area: a; }
  .na-tabela--celular-areas [data-area="b"] { grid-area: b; }
  .na-tabela--celular-areas [data-area="c"] { grid-area: c; }
  .na-tabela--celular-areas [data-area="g"] { grid-area: g; }
  .na-pendencia { flex: 1 1 0; }
}

/* ==========================================================================
   19. Formulários e detalhes
   Origem: Kanban › "formulários e detalhes": textarea, seção do formulário, caixas de marcar, campo de segredo, botão com cara de link.
   ========================================================================== */
/* ---------- formulários e detalhes (Facebook em diante) ---------- */
textarea.na-input { height: auto; min-height: 76px; padding: 12px 14px; line-height: 1.45; resize: vertical; }
.na-secao-form { display: grid; gap: var(--space-4); margin: 0; padding: 0; border: 0; min-width: 0; }
.na-secao-form > legend { padding: 0; margin-bottom: var(--space-4); font-size: var(--text-label); font-weight: var(--weight-bold); color: var(--fg); }
.na-checks { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.na-check__nota { font-size: var(--text-caption); color: var(--muted); }
.na-lista-checks { display: grid; max-height: 176px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-md); scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
.na-lista-checks__item { display: flex; min-height: 40px; padding: 6px 12px; }
.na-lista-checks__item + .na-lista-checks__item { border-top: 1px solid var(--divider); }
.na-lista-checks__item:hover { background: var(--surface-soft); }
.na-lista-checks__nome { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--fg); }
/* campo de segredo: o olho dentro do campo, à direita */
.na-campo-segredo { position: relative; display: block; }
.na-campo-segredo > .na-input { width: 100%; padding-right: 46px; }
.na-campo-segredo__olho { position: absolute; right: 6px; top: 50%; translate: 0 -50%; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: var(--radius-control); background: none; color: var(--muted); cursor: pointer; }
.na-campo-segredo__olho:hover { color: var(--fg); background: var(--surface-soft); }
.na-campo-segredo__olho .na-icon { width: 17px; height: 17px; }
/* segredo mostrado: rótulo, pontos (ou o valor), olho e copiar */
.na-segredos { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.na-segredo { display: inline-flex; align-items: center; gap: 6px; min-width: 0; font-size: var(--text-label); }
.na-segredo__rotulo { color: var(--muted); }
.na-segredo__valor { color: var(--fg); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 22rem; }
.na-segredo__valor.is-aberto { white-space: normal; overflow-wrap: anywhere; }
.na-segredo .na-iconbtn, .na-segredo .na-copiar { width: 26px; height: 26px; opacity: 1; }
/* nome da linha que abre o detalhe (botão com cara de link) */
.na-botao-nome { display: block; max-width: 100%; padding: 0; border: 0; background: none; font: inherit; text-align: left; cursor: pointer; }
.na-botao-nome:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
/* link ou texto vazio sozinho na célula: corta com reticências dentro dela (inline, a caixa passava da célula) */
.na-celula > a.na-link-tabela { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ==========================================================================
   20. Título longo da sidebar
   Origem: Kanban › "Documentações": palavra de 12+ letras desce um degrau (o componente Tela aplica a classe).
   ========================================================================== */
/* "Documentações" a 23 px mede 171 px numa caixa de 160 (sidebar de 210, medido em 03/10/2026): 21 px cabe */
.na-sidebar__title--longo { font-size: 1.3125rem; }

/* ==========================================================================
   21. Peças pequenas
   Origem: Kanban › "Kanban interno" e diálogo da tarefa: inicial do avatar, ícones do topo, linha de 3 campos, dica com ícone.
   ========================================================================== */
.na-inicial { flex: none; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--accent-solid); color: var(--on-accent); font-size: 11px; font-weight: var(--weight-bold); line-height: 1; text-transform: uppercase; }
.na-topbar__icones .na-iconbtn--acao { width: 46px; height: 46px; border-radius: var(--radius-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); }
.na-topbar__icones .na-iconbtn--acao:hover, .na-topbar__icones .na-iconbtn--acao:focus-visible { background: var(--surface-soft); }
.na-campos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.na-dica-icone { display: inline-flex; align-items: center; gap: 6px; }
.na-dica-icone .na-icon { width: 14px; height: 14px; flex: none; }
@media (max-width: 767px) { .na-campos--3 { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   22. Telas avulsas (login, 404)
   Origem: Kanban › "Telas avulsas (login, 404)": cartão no meio, a marca em cima, um brilho de marca no fundo.
   ========================================================================== */
.na-avulsa {
  min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 32px 16px;
  background: radial-gradient(900px 460px at 50% -6%, color-mix(in srgb, var(--brand) 18%, transparent), transparent 70%), var(--bg);
  color: var(--fg);
}
.na-avulsa__caixa { width: min(100%, 400px); display: grid; gap: 20px; animation: na-surge 280ms var(--ease-standard) both; }
/* no login a caixa não entra inteira: a marca monta, o título e o cartão sobem em seguida (abaixo) */
.na-avulsa--entrar .na-avulsa__caixa { animation: none; }
.na-avulsa__marca { width: 56px; height: 56px; margin: 0 auto; display: grid; place-items: center; border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-card), 0 10px 24px -12px rgba(20, 45, 70, 0.35); }
.na-avulsa__marca svg { width: 30px; height: 30px; }
.na-avulsa__marca.is-pulsando { animation: na-pulsa 1.1s var(--ease-standard) infinite; }
.na-avulsa__cabeca { display: grid; gap: 6px; text-align: center; }
.na-avulsa__titulo { margin: 0; font-size: var(--text-heading-sm); font-weight: var(--weight-bold); line-height: 1.2; color: var(--fg); text-align: center; }
.na-avulsa__texto { margin: 0; font-size: var(--text-label); color: var(--fg-2); text-align: center; }
.na-avulsa__cartao { display: grid; justify-items: center; gap: 8px; padding: 28px 24px 24px; }
/* o .na-btn--block do pacote é medida de sidebar (172 px, 34 de margem): nas avulsas ocupa o cartão */
.na-avulsa .na-btn--block { width: 100%; margin-top: 4px; justify-content: center; }
.na-avulsa__cartao .na-btn--block { margin-top: 16px; }
.na-entrar { display: grid; gap: 16px; padding: 24px; }
.na-entrar[data-tremor="a"] { animation: na-treme-a 360ms var(--ease-standard); }
.na-entrar[data-tremor="b"] { animation: na-treme-b 360ms var(--ease-standard); }
.na-senha { position: relative; display: block; }
.na-senha .na-input { width: 100%; padding-right: 48px; }
.na-senha__ver { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); background: transparent; color: var(--muted); }
.na-senha__ver:hover { background: var(--surface-soft); color: var(--fg); }
.na-senha__ver[aria-pressed="true"] { color: var(--accent-text); }
@keyframes na-pulsa { 50% { transform: scale(0.94); opacity: 0.72; } }
@keyframes na-treme-a { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
@keyframes na-treme-b { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(2px); } }
@media (prefers-reduced-motion: reduce) {
  .na-avulsa__caixa, .na-avulsa__marca.is-pulsando, .na-entrar[data-tremor] { animation: none; }
}
@media (max-width: 767px) {
  .na-senha__ver { width: 40px; height: 40px; right: 4px; }
  .na-senha .na-input { padding-right: 52px; }
}

/* ==========================================================================
   23. Painel, seção e dados
   Origem: Kanban › "Ficha da empresa" (peças do antigo ui/Painel): card sem padding, campo compacto, seção com título, grade de dados, copiar discreto.
   ========================================================================== */
/* peças do vocabulário antigo (ui/Painel), agora no pacote */
.na-painel { padding: 0; }
.na-painel { overflow: hidden; }
.na-input--compacta { height: 38px; padding: 0 10px; font-size: var(--text-label); }
textarea.na-input.na-input--compacta { height: auto; min-height: 0; padding: 8px 10px; }
.na-rotulo-campo { display: block; margin-bottom: 4px; font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--fg-2); }
.na-btn--discreto { height: 30px; padding: 0 10px; gap: 5px; color: var(--fg-2); }
.na-btn--discreto .na-icon, .na-btn--discreto svg { width: 14px; height: 14px; }
.na-copiar--sempre { opacity: 1; }
.na-secao { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 12px 8px 16px; border-bottom: 1px solid var(--divider); background: var(--surface); }
.na-secao + .na-secao, .na-dados + .na-secao { border-top: 1px solid var(--divider); }
.na-secao > svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.na-secao__titulo { margin: 0; font-size: var(--text-control); font-weight: var(--weight-bold); color: var(--fg); }
.na-secao__acoes { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.na-dados { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin: 0; padding: 14px 16px 18px; }
.na-dados--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.na-dado { min-width: 0; display: grid; align-content: start; gap: 3px; }
.na-dado--largo { grid-column: 1 / -1; }
.na-dado__rotulo { font-size: var(--text-caption); color: var(--fg-2); }
.na-dado__valor { display: flex; align-items: flex-start; gap: 4px; min-width: 0; margin: 0; }
.na-dado__texto { flex: 1; min-width: 0; padding-top: 3px; font-size: var(--text-label); font-weight: var(--weight-medium); line-height: 1.4; color: var(--fg); overflow-wrap: anywhere; }
.na-dado__vazio { color: var(--muted); font-weight: var(--weight-regular, 400); }
.na-dado .na-copiar { width: 26px; height: 26px; flex: none; }
.na-link-dado { display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 100%; color: var(--accent-text); font-weight: var(--weight-semibold); text-decoration: none; }
.na-link-dado:hover { text-decoration: underline; text-underline-offset: 3px; }
/* copiar discreto: aparece com o mouse no campo (no toque, sempre); clicar no valor copia */
.na-dado:hover .na-copiar, .na-dado:focus-within .na-copiar { opacity: 1; }
@media (hover: none) { .na-dado .na-copiar { opacity: 1; } }
.na-dado__texto--copia { margin: -2px -4px; padding: 5px 4px 2px; border-radius: var(--radius-sm); cursor: copy; transition: background-color var(--duration-fast) var(--ease-standard); }
.na-dado__texto--copia:hover { background: var(--surface-soft); }
.na-dado__texto--copia.is-copiado { background: color-mix(in srgb, var(--success) 14%, transparent); }
@media (max-width: 767px) { .na-dados, .na-dados--3 { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   24. Navegação em movimento
   Origem: Kanban › "Navegação em movimento" (03–04/10/2026): marcador deslizante, cascata, véu de carregamento com a marca, esqueleto de tela; + tela que recolhe a sidebar.
   ========================================================================== */
/* tela com a sidebar recolhida já abaixo de 1280 (o componente Tela põe .na-tela--recolhe-1280): o título curto, o filtro e a ação vão
   para a área principal e o botão flutuante, como abaixo de 1024 — nada some sem caminho */
@media (min-width: 1024px) and (max-width: 1279px) {
  .na-tela--recolhe-1280 .na-sidebar { display: none; }
  .na-tela--recolhe-1280.na-app { --sidebar-w: 0px; }
  .na-tela--recolhe-1280 .na-fab { display: grid; }
  .na-tela--recolhe-1280 .na-tela__titulo-curto { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
  .na-tela--recolhe-1280 .na-tela__titulo-curto h1 { font-size: var(--text-heading); font-weight: var(--weight-bold); line-height: 1; }
  .na-tela--recolhe-1280 .na-tela__titulo-curto .na-select { min-width: 220px; }
  .na-tela--recolhe-1280 .na-tela__ajuda-curta { display: block; flex: none; margin-top: 0; }
}
/* ==========================================================================
   Navegação em movimento (pedido do Leonardo, 03/10/2026: "animações de navegação entre os menus,
   troca de páginas, transições de abas, carregamento de páginas"; 04/10: "não tô vendo a transição
   carregando e entrando nas outras telas"). Só transform e opacity:
   - marcador: o fundo do item ativo desliza até o escolhido — rail, barra do celular, filtros da
     sidebar (useMarcador); o rail já acende no clique, enquanto a página carrega;
   - carregando entre telas (ProgressoNavegacao, no layout), sempre: no clique um véu cobre a área da
     tela com a marca animando no centro (Lottie) e só sai com a tela nova pronta (sem esqueleto de
     dados, 600 ms no mínimo, 5 s no máximo); aí ela entra em cascata, de novo, à vista;
   - página nova: o conteúdo da sidebar e da área principal entra em cascata (subindo 10 px, 300 ms,
     blocos 60 ms um depois do outro); trocar de visão (Empresas) ou de quadro faz o mesmo com o painel;
   - esqueleto (rota ainda vindo do servidor): entra na hora, sem atraso, por baixo do véu.
   O fill é `backwards`: terminada a entrada não sobra transform (que prenderia o position: fixed).
   ========================================================================== */
@keyframes na-entra { from { opacity: 0; transform: translateY(10px); } }
@keyframes na-entra-lado { from { opacity: 0; transform: translateX(-8px); } }
@keyframes na-pop { 0% { transform: scale(0.84); } 60% { transform: scale(1.06); } 100% { transform: none; } }

/* marcador deslizante */
.na-marcador { position: absolute; left: 0; top: 0; z-index: -1; pointer-events: none; }
.na-marcador.is-anima { transition: transform 220ms var(--ease-standard), width 220ms var(--ease-standard), height 220ms var(--ease-standard); }
.na-rail__nav { position: relative; isolation: isolate; }
.na-rail__marcador { border-radius: 14px; background: var(--rail-item-active); }
.na-rail__nav.tem-marcador .na-rail__item.is-active { background: transparent; }
.na-rail__item.is-active .na-icon { animation: na-pop 260ms var(--ease-standard); }
@media (max-height: 760px) { .na-rail__marcador { border-radius: var(--radius-md); } }
.na-barra { position: relative; isolation: isolate; }
.na-barra__marcador { height: 3px; border-radius: 0 0 3px 3px; background: var(--on-accent); }
.na-barra.tem-marcador .na-barra__item { box-shadow: none; }
.na-barra__item.is-active .na-icon { animation: na-pop 260ms var(--ease-standard); }
.na-filtros { position: relative; isolation: isolate; }
.na-filtros__marcador { list-style: none; border-radius: var(--radius-md); background: var(--selected); }
.na-filtros.tem-marcador .na-filtro.is-active { background: transparent; }
/* o rótulo do rail chega deslizando do item */
.na-dica { transform: translate(-4px, -50%); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.na-rail__item:hover .na-dica, .na-rail__item:focus-visible .na-dica { transform: translate(0, -50%); }

/* página que entra, em cascata (sem especificidade: animação própria de um componente vence) */
:where(.na-tela > .na-main > *), .na-entra { animation: na-entra 300ms var(--ease-standard) backwards; }
:where(.na-tela > .na-main > :nth-child(n+3)) { animation-delay: 60ms; }
:where(.na-tela > .na-main > :nth-child(n+4)) { animation-delay: 120ms; }
:where(.na-tela > .na-sidebar > *) { animation: na-entra-lado 260ms var(--ease-standard) backwards; }
:where(.na-tela > .na-sidebar > :nth-child(n+3)) { animation-delay: 50ms; }
:where(.na-tela > .na-sidebar > :nth-child(n+4)) { animation-delay: 100ms; }

/* carregando entre telas, sempre (pedido do Leonardo, 04/10): véu quase opaco sobre a área da tela (o rail, z 40,
   fica por cima, aceso no destino) e a marca animando no centro, até a tela nova estar pronta. Véu e não opacidade
   na tela: a sidebar passa por cima do rail e, transparente, deixava o azul dele vazar numa faixa. */
.na-carregando-nav { position: fixed; inset: 0; z-index: 35; display: grid; place-items: center; pointer-events: none; opacity: 0;
  background: color-mix(in srgb, var(--surface) 90%, transparent); }
.na-carregando-nav[data-estado="ativo"] { opacity: 1; transition: opacity 140ms var(--ease-standard); }
.na-carregando-nav[data-estado="fim"] { opacity: 0; transition: opacity 220ms var(--ease-standard); }
@media (min-width: 768px) { .na-carregando-nav { padding-left: var(--rail-w); } }
@media (max-width: 767px) { .na-carregando-nav { padding-bottom: calc(58px + env(safe-area-inset-bottom)); } }
.na-carregando-nav__caixa { display: grid; justify-items: center; gap: 6px; padding: 18px 28px 16px; border-radius: var(--radius-lg);
  background: var(--surface); box-shadow: var(--shadow-card), 0 18px 40px -24px rgba(20, 45, 70, 0.45);
  font-size: var(--text-caption); font-weight: var(--weight-medium); color: var(--fg-2); animation: na-surge 260ms var(--ease-standard) both; }
.na-lottie .na-lottie__coluna-a path { fill: var(--brand); }
.na-lottie .na-lottie__coluna-b path { fill: var(--accent-solid); }

/* o esqueleto entra na hora (o véu, se a troca demorar, vem por cima) */
.na-tela--carregando .na-skeleton { opacity: 0; animation: na-shimmer 1.4s linear infinite, na-esmaece 180ms var(--ease-standard) forwards; }
.na-carregando__titulo { width: 64%; height: 30px; }
.na-carregando__acao { height: 40px; margin-top: 22px; border-radius: var(--radius-pill); }
.na-carregando__filtros { display: grid; gap: 12px; margin-top: 34px; }
.na-carregando__filtros .na-skeleton { height: 24px; }
.na-carregando__filtros .na-skeleton:nth-child(even) { width: 78%; }
.na-carregando__topo { display: flex; gap: 12px; }
.na-carregando__topo .na-skeleton { height: 40px; width: min(320px, 45%); }
.na-carregando__topo .na-skeleton + .na-skeleton { width: 150px; }
.na-carregando__corpo { flex: 1; min-height: 240px; border-radius: var(--radius-lg); }

@media (prefers-reduced-motion: reduce) {
  :where(.na-tela > .na-main > *), :where(.na-tela > .na-sidebar > *), .na-entra,
  .na-rail__item.is-active .na-icon, .na-barra__item.is-active .na-icon { animation: none; }
  .na-carregando-nav[data-estado] { transition: none; }
  .na-carregando-nav__caixa { animation: none; }
  .na-tela--carregando .na-skeleton { animation: none; opacity: 1; }
  .na-dica, .na-rail__item:hover .na-dica, .na-rail__item:focus-visible .na-dica { transform: translateY(-50%); }
}

/* ==========================================================================
   25. Preferências: o tema em cartões
   Origem: Kanban › "Preferências" (03/10/2026): três cartões (claro, escuro, sistema) com a miniatura de cada um.
   ========================================================================== */
/* Preferências (03/10/2026): o tema em cartões com a miniatura de cada um. As cores da miniatura
   são as do tema que ela mostra (não as do tema da vez): literais de propósito. */
.na-pref { padding: 24px; display: grid; gap: 18px; align-content: start; max-width: 920px; }
.na-pref__cabeca h2 { margin: 0; font-size: var(--text-card-title); font-weight: var(--weight-bold); color: var(--fg); }
.na-pref__cabeca p { margin: 4px 0 0; font-size: var(--text-label); color: var(--muted); }
.na-pref__temas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.na-pref__tema { display: grid; gap: 6px; align-content: start; padding: 10px 10px 14px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); cursor: pointer; transition: box-shadow 160ms var(--ease-standard), transform 160ms var(--ease-standard); }
.na-pref__tema:hover { box-shadow: inset 0 0 0 1px var(--muted); }
.na-pref__tema:active { transform: scale(0.98); }
.na-pref__tema.is-active { box-shadow: inset 0 0 0 2px var(--brand); }
.na-pref__tema:has(input:focus-visible) { outline: 2px solid var(--focus-color); outline-offset: 2px; }
.na-pref__amostra { display: grid; height: 96px; margin-bottom: 4px; border-radius: var(--radius-md); overflow: hidden; box-shadow: inset 0 0 0 1px var(--border); }
.na-pref__amostra--sistema { grid-template-columns: 1fr 1fr; }
.na-pref__mini { --f: #eef3f9; --s: #ffffff; --r: #2a8ce8; --l: #d9e0e8; display: grid; grid-template-columns: 10px 28% minmax(0, 1fr); gap: 4px; padding: 6px; background: var(--f); }
.na-pref__mini--escuro { --f: #18191c; --s: #222326; --r: #1d4f7c; --l: #3b3d42; }
.na-pref__mini > i { display: block; border-radius: 3px; background: var(--s); }
.na-pref__mini > i:first-child { background: var(--r); }
.na-pref__mini > span { display: grid; align-content: start; gap: 5px; padding: 6px; border-radius: 3px; background: var(--s); }
.na-pref__mini > span > i { display: block; height: 4px; border-radius: 2px; background: var(--l); }
.na-pref__mini > span > i:nth-child(2) { width: 70%; }
.na-pref__mini > span > i:nth-child(3) { width: 85%; }
.na-pref__rotulo { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-body); font-weight: var(--weight-bold); color: var(--fg); }
.na-pref__tema.is-active .na-pref__rotulo { color: var(--accent-text); }
.na-pref__detalhe { font-size: var(--text-label); color: var(--muted); line-height: 1.35; }
@media (max-width: 767px) { .na-pref { padding: 16px; } .na-pref__temas { gap: 8px; } .na-pref__amostra { height: 64px; } }
@media (prefers-reduced-motion: reduce) { .na-pref__tema:active { transform: none; } }

/* ==========================================================================
   26. Etiqueta (pílula de estado)
   Origem: Kanban › "Ficha enxuta" (03/10/2026): a pílula com ícone, rótulo, trilha e os estados ok / alerta / atenção.
   ========================================================================== */
.na-etiqueta { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border: 0; border-radius: 999px; background: var(--surface-soft); font: inherit; font-size: var(--text-caption); font-weight: var(--weight-semibold); line-height: 1; color: var(--fg); white-space: nowrap; }
.na-etiqueta .na-icon { width: 13px; height: 13px; flex: none; color: var(--muted); }
.na-etiqueta__rotulo { font-weight: var(--weight-medium); color: var(--fg-2); }
.na-etiqueta--botao { cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard); }
.na-etiqueta--botao:hover { box-shadow: inset 0 0 0 1px var(--muted); }
.na-etiqueta--botao:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }
.na-etiqueta__trilha { width: 40px; height: 4px; flex: none; border-radius: 999px; background: var(--track); overflow: hidden; }
.na-etiqueta__trilha > span { display: block; height: 100%; border-radius: inherit; background: var(--accent-solid); transition: width 400ms var(--ease-standard); }
.na-etiqueta__numero { font-variant-numeric: tabular-nums; }
.na-etiqueta.is-ok, .na-etiqueta.is-ok .na-icon { color: var(--success); }
.na-etiqueta.is-ok .na-etiqueta__trilha > span { background: var(--success); }
.na-etiqueta.is-alerta { background: var(--danger-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); }
.na-etiqueta.is-alerta .na-icon, .na-etiqueta.is-alerta .na-etiqueta__rotulo { color: var(--danger); }
.na-etiqueta.is-atencao { background: color-mix(in srgb, var(--warning) 14%, var(--surface)); color: color-mix(in srgb, var(--warning) 70%, var(--fg)); }
.na-etiqueta.is-atencao .na-icon, .na-etiqueta.is-atencao .na-etiqueta__rotulo { color: inherit; }

/* ==========================================================================
   27. Login em movimento
   Origem: Kanban › "Login em movimento" (03/10/2026): a marca monta o quadro, nuvens à deriva, botão que vira check e o app abre num círculo.
   ========================================================================== */
/* Direção: a marca "monta o quadro" — as três colunas descem do topo uma depois da outra; duas nuvens de brilho azul derivam
   devagar no fundo (Nuvem Azul); o título e o cartão sobem em seguida. Conferindo a senha, as colunas ondulam. Certo, o botão
   vira check verde e o app se abre num círculo a partir dele. Tudo curto e em transform/opacity; "reduzir movimento" desliga
   e entra direto. */
@keyframes na-coluna-desce { from { transform: scaleY(0); opacity: 0; } }
@keyframes na-coluna-onda { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.5); } }
@keyframes na-nuvem-deriva { from { transform: translate3d(-5%, -3%, 0) scale(1); } to { transform: translate3d(5%, 4%, 0) scale(1.1); } }
/* as nuvens: fixas na janela (não alargam a página nem pedem overflow escondido, que cortaria o
   cartão em tela baixa); degradê suave em vez de blur, que custaria caro animado */
.na-avulsa--entrar { isolation: isolate; }
.na-avulsa--entrar::before, .na-avulsa--entrar::after { content: ''; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; }
.na-avulsa--entrar::before { top: -22vh; left: 6vw; width: 62vw; height: 58vh; background: radial-gradient(closest-side, color-mix(in srgb, var(--brand) 22%, transparent), transparent); animation: na-nuvem-deriva 19s ease-in-out infinite alternate; }
.na-avulsa--entrar::after { top: -16vh; right: 4vw; width: 54vw; height: 50vh; background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-solid) 16%, transparent), transparent); animation: na-nuvem-deriva 24s ease-in-out -8s infinite alternate-reverse; }
.na-avulsa--entrar .na-avulsa__marca { animation: na-surge 320ms var(--ease-standard) both; }
.na-avulsa--entrar .na-avulsa__marca rect { transform-box: fill-box; transform-origin: 50% 0; animation: na-coluna-desce 460ms cubic-bezier(0.34, 1.3, 0.64, 1) backwards; }
.na-avulsa--entrar .na-avulsa__marca rect:nth-child(1) { animation-delay: 140ms; }
.na-avulsa--entrar .na-avulsa__marca rect:nth-child(2) { animation-delay: 220ms; }
.na-avulsa--entrar .na-avulsa__marca rect:nth-child(3) { animation-delay: 300ms; }
.na-avulsa--entrar .na-avulsa__cabeca { animation: na-entra 300ms var(--ease-standard) 120ms backwards; }
.na-avulsa--entrar .na-entrar { animation: na-surge 340ms var(--ease-standard) 200ms backwards; }
/* conferindo: as colunas ondulam, uma depois da outra */
.na-avulsa--entrar.is-entrando .na-avulsa__marca rect { animation: na-coluna-onda 900ms ease-in-out infinite; }
.na-avulsa--entrar.is-entrando .na-avulsa__marca rect:nth-child(2) { animation-delay: 120ms; }
.na-avulsa--entrar.is-entrando .na-avulsa__marca rect:nth-child(3) { animation-delay: 240ms; }
/* o que aparece depois: aviso de erro e Caps Lock descem; o botão certo vira verde com o check que salta */
.na-entrar .na-alerta, .na-entrar [data-caps-lock] { animation: na-cai 200ms var(--ease-standard) both; }
.na-entrar [data-entrar] { transition: background-color 220ms var(--ease-standard), box-shadow 220ms var(--ease-standard), transform var(--duration-fast) var(--ease-standard); }
.na-entrar [data-entrar]:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 6px 16px -8px color-mix(in srgb, var(--brand) 70%, transparent); }
.na-entrar [data-entrar][data-fase="ok"] { background: var(--success-solid); color: var(--on-accent); }
.na-entrar [data-entrar][data-fase="ok"] .na-icon { animation: na-pula 320ms var(--ease-standard); }
@media (prefers-reduced-motion: reduce) {
  .na-avulsa--entrar::before, .na-avulsa--entrar::after, .na-avulsa--entrar .na-avulsa__marca, .na-avulsa--entrar .na-avulsa__marca rect,
  .na-avulsa--entrar .na-avulsa__cabeca, .na-avulsa--entrar .na-entrar, .na-entrar .na-alerta, .na-entrar [data-caps-lock],
  .na-entrar [data-entrar][data-fase="ok"] .na-icon { animation: none; }
  .na-entrar [data-entrar]:not(:disabled):hover { transform: none; }
}
/* a sacudida do erro vence a entrada do cartão (mesma especificidade, por isso repetida aqui) */
.na-avulsa--entrar .na-entrar[data-tremor="a"] { animation: na-treme-a 360ms var(--ease-standard); }
.na-avulsa--entrar .na-entrar[data-tremor="b"] { animation: na-treme-b 360ms var(--ease-standard); }
@media (prefers-reduced-motion: reduce) { .na-avulsa--entrar .na-entrar[data-tremor] { animation: none; } }

/* ==========================================================================
   28. Gráficos em CSS (dashboard)
   Origem: Kanban › "Dashboards" (04/10/2026): indicadores, barra segmentada, barras deitadas, colunas empilhadas, grade de cartões. Sem biblioteca de gráfico.
   ========================================================================== */
/* Gráficos em HTML/CSS; o número de cada parte vai escrito. A página não rola: o corpo do dashboard ocupa a altura e o que é lista rola por dentro. */
.na-dash__topo { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; flex-basis: 100%; }
.na-dash__nome { margin: 0; font-size: 1.25rem; font-weight: var(--weight-bold); color: var(--fg); }
.na-dash__topo .na-topbar__selects { margin-left: auto; }
.na-legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; font-size: var(--text-caption); color: var(--fg-2); }
.na-legenda li { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.na-legenda i { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.na-dash__corpo { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.na-dash { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 14px; }
.na-dash > .na-alerta { flex: none; }
.na-indicadores { flex: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.na-indicador { display: grid; align-content: start; gap: 4px; padding: 14px 18px; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); }
.na-indicador__rotulo { font-size: var(--text-caption); font-weight: var(--weight-semibold); color: var(--fg-2); }
.na-indicador__valor { font-size: 1.75rem; line-height: 1.15; font-weight: var(--weight-bold); color: var(--fg); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.na-indicador__detalhe { font-size: var(--text-caption); color: var(--muted); }
.na-indicador.is-alerta .na-indicador__valor { color: var(--danger); }
.na-dash__grade { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: minmax(0, 1fr); gap: 14px; }
.na-dash__grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.na-dash__grade--natural { flex: none; grid-template-rows: none; }
.na-dash__card { min-height: 0; display: flex; flex-direction: column; gap: 14px; padding: 16px 18px; overflow: hidden; }
.na-dash__card--alto { flex: 1; min-height: 260px; }
.na-dash__titulo { margin: 0; display: flex; align-items: center; gap: 8px; font-size: var(--text-label); font-weight: var(--weight-bold); color: var(--fg); }
.na-dash__conta { display: inline-grid; place-items: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--surface-soft); font-size: 12px; font-weight: var(--weight-semibold); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.na-dash__nota { flex: none; margin: 0; font-size: var(--text-caption); color: var(--muted); }
.na-dash__nada { margin: 0; font-size: var(--text-caption); color: var(--fg-2); }
@media (max-width: 1279px) { .na-dash__grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; } }

/* barra segmentada: cada parte é um contêiner, e o número some quando ela fica estreita demais para ele */
.na-barra-seg { display: flex; gap: 2px; height: 20px; min-width: 0; border-radius: 6px; overflow: hidden; }
.na-barra-seg__parte { flex-basis: 0; min-width: 3px; display: flex; align-items: center; justify-content: center; container-type: inline-size; font-size: 11px; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; transition: filter 120ms var(--ease-standard); }
.na-barra-seg__parte.is-hachura { background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0 2px, transparent 2px 5px); }
.na-barra-seg__parte.is-clicavel { cursor: pointer; }
.na-barra-seg__parte.is-clicavel:hover { filter: brightness(1.1); }
@container (max-width: 17px) { .na-barra-seg__n { display: none; } }

/* barras deitadas (ranking): o detalhe embaixo do rótulo; a barra cresce da esquerda ao abrir */
.na-barras { margin: 0; padding: 0; list-style: none; display: grid; align-content: start; gap: 10px; min-height: 0; overflow-y: auto; }
.na-barras__linha { display: grid; grid-template-columns: minmax(0, 13rem) minmax(60px, 1fr) minmax(3.5rem, auto); column-gap: 12px; row-gap: 1px; align-items: center; }
.na-barras__rotulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-label); color: var(--fg); }
.na-barras__trilho { height: 10px; border-radius: 5px; background: var(--surface-soft); overflow: hidden; }
.na-barras__trilho b { display: block; height: 100%; border-radius: 5px; transform-origin: left center; animation: na-cresce 420ms var(--ease-standard) backwards; }
.na-barras__valor { text-align: right; font-size: var(--text-label); font-weight: var(--weight-bold); color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.na-barras__detalhe { grid-column: 1; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@keyframes na-cresce { from { transform: scaleX(0); } }

/* colunas empilhadas: eixo com o teto e a metade, total em cima de cada coluna, rótulo embaixo */
.na-colunas { flex: 1; min-height: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.na-colunas__area { flex: 1; min-height: 180px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
.na-colunas__eixo { display: flex; flex-direction: column; justify-content: space-between; padding: 0 0 22px; font-size: 11px; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.na-colunas__eixo span { line-height: 1; transform: translateY(-50%); }
.na-colunas__eixo span:last-child { transform: translateY(50%); }
.na-colunas__grupos { position: relative; display: flex; gap: 10px; min-width: 0; }
.na-colunas__grupos::before { content: ""; position: absolute; inset: 0 0 22px; border-top: 1px dashed var(--divider); border-bottom: 1px solid var(--border); background: linear-gradient(var(--divider), var(--divider)) center / 100% 1px no-repeat; pointer-events: none; }
.na-colunas__grupo { position: relative; flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
.na-colunas__pilha { position: relative; margin-top: auto; width: min(38px, 72%); height: calc((100% - 22px) * var(--fator, 0)); display: flex; flex-direction: column-reverse; gap: 1px; transform-origin: bottom; animation: na-pilha-sobe 420ms var(--ease-standard) backwards; }
.na-colunas__pilha > span[data-serie] { flex-basis: 0; min-height: 2px; }
.na-colunas__pilha > span[data-serie]:last-child { border-radius: 4px 4px 0 0; }
.na-colunas__total { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); padding-bottom: 3px; font-size: 11px; font-weight: var(--weight-bold); color: var(--fg-2); font-variant-numeric: tabular-nums; }
.na-colunas__rotulo { flex: none; height: 22px; line-height: 22px; font-size: 11px; color: var(--muted); white-space: nowrap; }
@keyframes na-pilha-sobe { from { transform: scaleY(0); } }
@media (max-width: 1023px) {
  .na-dash__grade, .na-dash__grade--3 { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .na-dash__card { overflow: visible; }
}
@media (prefers-reduced-motion: reduce) {
  .na-barras__trilho b, .na-colunas__pilha { animation: none; }
}

/* ==========================================================================
   29. Visão geral (Início)
   Origem: Kanban › "Home" (04/10/2026): saudação e sino, cartões com anel, atalhos, o que pede atenção, atividade em linha do tempo.
   ========================================================================== */
/* Cartões com anel em cima, acesso rápido, o que pede atenção (lista que rola por dentro) e, à direita, a atividade da equipe
   numa linha do tempo. A partir de 1280 cabe sem rolar a página; abaixo, a atividade desce e a área da Home rola por dentro. */
.na-home__topo { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px 24px; flex-basis: 100%; }
.na-home__busca { flex: 1 1 320px; max-width: 520px; min-width: 0; }
.na-home__busca .na-search { width: 100%; }
.na-home__ola { display: flex; align-items: center; gap: 14px; }
.na-home__saudacao { margin: 0; font-size: 1rem; font-weight: var(--weight-bold); color: var(--fg); text-align: right; }
.na-home__data { margin: 0; font-size: var(--text-caption); color: var(--fg-2); text-align: right; }
.na-home__sino { position: relative; width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--surface); box-shadow: inset 0 0 0 1px var(--border); color: var(--fg-2); }
.na-home__sino .na-icon { width: 18px; height: 18px; }
.na-home__sino:hover { color: var(--accent-text); }
.na-home__sino-n { position: absolute; top: -6px; right: -6px; display: grid; place-items: center; min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px; background: var(--danger-solid); color: var(--on-accent); font-size: 11px; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }

.na-home { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); gap: 18px; }
.na-home__principal { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 18px; }
.na-home__titulo { margin: 0; font-size: 1.0625rem; font-weight: var(--weight-bold); color: var(--fg); }

/* cartões: largos, ícone | textos | anel; estreitos (container query), o anel sobe ao lado do ícone */
.na-home__cartoes { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.na-resumo { container-type: inline-size; display: block; border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-card); color: var(--fg); text-decoration: none; transition: transform 160ms var(--ease-standard), box-shadow 160ms var(--ease-standard); }
.na-resumo:hover { transform: translateY(-2px); }
.na-resumo:focus-visible { outline-offset: 2px; }
.na-resumo.is-destaque { background: var(--accent-solid); color: var(--on-accent); }
.na-resumo__corpo { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "icone textos anel"; align-items: center; gap: 12px; padding: 16px; }
.na-resumo__icone { grid-area: icone; align-self: start; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--surface-soft); color: var(--accent-text); }
.na-resumo__icone .na-icon { width: 19px; height: 19px; }
.na-resumo.is-destaque .na-resumo__icone { background: rgba(255, 255, 255, 0.18); color: var(--on-accent); }
.na-resumo__textos { grid-area: textos; display: grid; gap: 2px; min-width: 0; }
.na-resumo__titulo { font-size: var(--text-label); font-weight: var(--weight-bold); }
.na-resumo__valor { font-size: 1.25rem; line-height: 1.2; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }
.na-resumo__valor.is-alerta { color: var(--danger); }
.na-resumo__detalhe { font-size: var(--text-caption); color: var(--fg-2); }
.na-resumo.is-destaque .na-resumo__detalhe { color: var(--on-accent); }
.na-resumo .na-anel { grid-area: anel; }
@container (max-width: 259px) {
  .na-resumo__corpo { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "icone anel" "textos textos"; row-gap: 10px; }
  .na-resumo .na-anel { justify-self: end; }
}

/* anel de progresso: o arco enche ao abrir */
.na-anel { position: relative; flex: none; width: 52px; height: 52px; }
.na-anel svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.na-anel circle { fill: none; stroke-width: 5; }
.na-anel__trilho { stroke: var(--border); }
.na-resumo.is-destaque .na-anel__trilho { stroke: rgba(255, 255, 255, 0.3); }
.na-anel__arco { stroke-linecap: round; stroke-dashoffset: var(--falta); animation: na-anel-enche 700ms var(--ease-standard) backwards; animation-delay: 150ms; }
@keyframes na-anel-enche { from { stroke-dashoffset: var(--cheio); } }
.na-anel__n { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: var(--weight-bold); font-variant-numeric: tabular-nums; }

/* acesso rápido: os ícones coloridos do modelo, e o "+" tracejado para a empresa nova */
.na-home__acesso { flex: none; display: grid; gap: 10px; }
.na-atalhos { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.na-atalho { display: grid; justify-items: center; gap: 7px; padding: 8px 4px; border-radius: var(--radius-lg); color: var(--fg); text-decoration: none; transition: background-color 120ms var(--ease-standard); }
.na-atalho:hover { background: var(--surface); }
.na-atalho__icone { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--surface); box-shadow: var(--shadow-card); color: var(--cor, var(--accent-text)); transition: transform 160ms var(--ease-standard); }
.na-atalho:hover .na-atalho__icone { transform: translateY(-2px); }
.na-atalho__icone .na-icon { width: 21px; height: 21px; }
.na-atalho__rotulo { font-size: var(--text-caption); font-weight: var(--weight-medium); text-align: center; }
.na-atalho.is-novo .na-atalho__icone { background: transparent; box-shadow: inset 0 0 0 1.5px var(--border); color: var(--fg-2); }

/* o que pede atenção: abas por tipo e a lista, que rola por dentro */
.na-home__pendencias { flex: 1; min-height: 260px; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.na-home__cabeca { flex: none; display: grid; gap: 10px; padding: 16px 18px 0; border-bottom: 1px solid var(--divider); }
.na-atencao { container: atencao / inline-size; flex: 1; min-height: 0; overflow-y: auto; }
.na-atencao__lista { margin: 0; padding: 0; list-style: none; }
.na-atencao__item { display: grid; grid-template-columns: 22px minmax(0, 14rem) minmax(0, 1fr) auto 16px; align-items: center; column-gap: 12px; min-height: 44px; padding: 6px 18px; border-bottom: 1px solid var(--divider); color: var(--fg); text-decoration: none; transition: background-color 120ms var(--ease-standard); }
.na-atencao__item:hover { background: var(--surface-soft); }
.na-atencao__item:focus-visible { outline-offset: -3px; }
.na-atencao__icone { display: grid; place-items: center; }
.na-atencao__icone .na-icon { width: 17px; height: 17px; }
.na-atencao__titulo { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-label); font-weight: var(--weight-semibold); }
.na-atencao__detalhe { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--text-caption); color: var(--fg-2); }
.na-atencao__quando { font-size: var(--text-caption); color: var(--fg-2); text-align: right; white-space: nowrap; }
.na-atencao__quando.is-alerta { color: var(--danger); font-weight: var(--weight-semibold); }
.na-atencao__ir { width: 16px; height: 16px; color: var(--muted); }
@container atencao (max-width: 560px) {
  .na-atencao__item { grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-areas: "icone titulo quando" "icone detalhe detalhe"; row-gap: 1px; padding-block: 8px; }
  .na-atencao__icone { grid-area: icone; align-self: start; padding-top: 2px; }
  .na-atencao__titulo { grid-area: titulo; }
  .na-atencao__detalhe { grid-area: detalhe; }
  .na-atencao__quando { grid-area: quando; }
  .na-atencao__ir { display: none; }
}

/* atividade recente: a linha do tempo do modelo (o ponto do dia, o fio e quem fez) */
.na-home__atividade { min-height: 0; display: flex; flex-direction: column; gap: 12px; padding: 16px 16px 12px; overflow: hidden; }
.na-atividade { flex: 1; min-height: 0; margin: 0; padding: 0 2px 0 0; list-style: none; overflow-y: auto; }
.na-atividade__dia + .na-atividade__dia { margin-top: 14px; }
.na-atividade__rotulo { display: flex; align-items: center; gap: 9px; margin: 0 0 4px; font-size: var(--text-caption); font-weight: var(--weight-bold); color: var(--accent-text); }
.na-atividade__rotulo::before { content: ""; flex: none; width: 9px; height: 9px; margin-left: 1px; border-radius: 50%; background: var(--accent-solid); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-solid) 22%, transparent); }
.na-atividade__eventos { display: grid; gap: 1px; margin: 0 0 0 5px; padding: 0 0 0 12px; list-style: none; border-left: 2px solid var(--divider); }
.na-ocorrencia { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: start; gap: 9px; padding: 6px; border-radius: var(--radius-sm); color: var(--fg); text-decoration: none; }
.na-ocorrencia:hover { background: var(--surface-soft); }
.na-ocorrencia:focus-visible { outline-offset: -3px; }
.na-ocorrencia__avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; color: #ffffff; font-size: 12px; font-weight: var(--weight-bold); text-transform: uppercase; }
.na-ocorrencia__texto { min-width: 0; font-size: var(--text-caption); line-height: 1.45; color: var(--fg-2); overflow-wrap: anywhere; }
.na-ocorrencia__texto b { color: var(--fg); font-weight: var(--weight-semibold); }
.na-ocorrencia__hora { padding-top: 1px; font-size: 11px; color: var(--fg-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 1279px) {
  .na-home { grid-template-columns: minmax(0, 1fr); align-content: start; overflow-y: auto; }
  .na-home__principal { min-height: auto; }
  .na-home__pendencias { flex: none; height: 420px; }
  .na-home__atividade { max-height: 480px; }
}
@media (max-width: 767px) {
  .na-home__topo { flex-direction: column; align-items: stretch; }
  .na-home__busca { max-width: none; flex-basis: auto; }
  .na-home__ola { justify-content: space-between; flex-direction: row-reverse; }
  .na-home__saudacao, .na-home__data { text-align: left; }
  .na-home__cartoes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .na-atalhos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .na-home { overflow: visible; }
  .na-home__busca .na-search input { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .na-anel__arco { animation: none; }
  .na-resumo, .na-atalho__icone { transition: none; }
}

/* ==========================================================================
   30. Layout do app e o que o Kanban pegava do Tailwind
   Origem: Kanban › layout.tsx, AppNav.tsx, UserMenu.tsx, Dialogo.tsx e globals.css: utilidades e resets do Tailwind (h-screen, max-md:flex-col, hidden md:flex, md:hidden, order-last, absolute left-full, min-w-0 flex-1, animate-spin, reset de âncora, scroll-fino, reduzir movimento) viradas em classe, para app sem Tailwind. Quem usa Tailwind pode seguir com as utilidades: dá o mesmo resultado.
   ========================================================================== */
/* rail (≥768 px) ou barra (<768 px), ao lado ou abaixo do conteúdo */
.na-layout { display: flex; height: 100vh; }
.na-layout__conteudo { flex: 1; min-width: 0; overflow-y: auto; }
.na-rail--app { z-index: 40; }
@media (min-width: 768px) { .na-barra { display: none; } }
@media (max-width: 767px) {
  .na-layout { flex-direction: column; height: 100dvh; }
  .na-rail--app { display: none; }
  .na-barra { order: 9999; }
}
/* o ícone da barra do celular e o pontinho de aviso que se ancora nele (no Kanban, um <span class="relative">) */
.na-barra__icone { position: relative; display: inline-flex; }
/* menu da conta no pé do rail: abre para a direita, rente ao pé (dentro de .na-rail__bottom) */
.na-rail__bottom .na-menu--rail { position: absolute; left: 100%; bottom: 0; margin-left: 12px; z-index: 50; }
/* âncora vestida de componente: sem o sublinhado do navegador (o preflight do Tailwind tirava) */
a.na-rail__item, a.na-btn, a.na-iconbtn, a.na-filtro, a.na-tab, a.na-menu__item, a.na-fab { text-decoration: none; }
/* o texto da confirmação ocupa o que sobra ao lado do ícone */
.na-confirma__corpo { flex: 1; min-width: 0; }
/* girar (carregando), no lugar do animate-spin: o Loader2 do lucide ou qualquer ícone. Com "reduzir movimento" fica parado (o botão já diz "Salvando…") */
@keyframes na-giro { to { transform: rotate(360deg); } }
.na-giro { animation: na-giro 0.8s linear infinite; }
@media (prefers-reduced-motion: reduce) { .na-giro { animation: none; } }
/* barra de rolagem fina para quem rola por dentro (lista de atenção, atividade, menus): a mesma do corpo da tabela. No Kanban era a classe global scroll-fino */
.na-scroll-fino { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; }
/* rede de segurança do "reduzir movimento": o que escapou das regras de cada seção, e o que o app puser dentro de .na-root, não anima. O pacote só zera transição. No Kanban isto vinha do globals.css */
@media (prefers-reduced-motion: reduce) {
  .na-root, .na-root *, .na-root *::before, .na-root *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}