@import url('https://fonts.googleapis.com/css2?family=Anek+Tamil:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap');/* Passo 2b do design system: o menu lateral do shell no visual da casca densa do DS (nexus_ds 2.2.0,
   `src/css/91-casca-densa.css`, linhas 19-56, sobre a base de `60-navegacao.css`).

   Regras deste arquivo:
   - só classes `sh-menu-*` (o prefixo do shell, passo 2a). Nada de `.nx` na raiz, nada de `nx-menu-*`: as classes do DS
     colidiriam quando o `nexus.css` for carregado, e o menu não importa JS do DS (o Sidebar continua síncrono);
   - todo `var(--nx-*)` tem reserva literal, e a reserva é uma COR DO SISTEMA (Canvas, CanvasText, ButtonFace, GrayText,
     Mark/MarkText), não o hexadecimal do `tokens.css`. Com o `/ds/` fora do ar o menu continua de pé e legível, nas cores
     padrão do navegador (página e menu em Canvas, texto em CanvasText, 21:1); com o DS no ar, valem os tokens. A reserva
     em hexadecimal duplicava a paleta e o lint do DS (`scripts/nexus-lint.mjs`) a conta como cor fixa: eram 44 achados só
     neste arquivo. A guarda do build (`tests/postbuild/moldura-build.mjs`) reprova um `var(--nx-*)` sem reserva e uma
     reserva em hexadecimal nas regras da moldura;
   - o menu é da cor da página (`--nx-fundo`), com um fio à direita (`--nx-fio`): decisão D1 do dono;
   - 224 px aberto e trilho de 56 px (D2): as larguras ficam no estilo do `Sidebar.tsx`, junto do `--sidebar-width` que
     o shell grava no <html> (CONTRATO-MOLDURA.md, §2);
   - o nome do grupo NÃO vai em caixa alta (o DS denso usa uppercase): o Chromium lê o nome acessível já transformado,
     e "PRICING" deixaria de ser "Pricing" para quem navega por nome;
   - toda entrelinha em px inteiros (13/17, 12/16, 11/14…), não o fator 1.3: o fator herdado vira fração (16,9; 18,2;
     17,55 px), as frações somam ao longo da gaveta e o Sair, rolado até a borda, sobra 0,125 px para fora da tela no
     Chromium (a rede mediu `sair.alcancavel_rolando_o_menu` falso na gaveta a 390 px). */

.sh-menu {
  gap: 6px;
  padding: 10px 8px;
  background: var(--nx-fundo, Canvas);
  border-right: 1px solid var(--nx-fio, GrayText);
  color: var(--nx-tinta, CanvasText);
  font: 400 13px/17px var(--nx-f-texto, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
.sh-menu.sh-menu-recolhido {
  padding: 10px 7px;
}

/* ---- topo: a marca, a faixa do ambiente e o botão de recolher ---- */
.sh-menu-topo {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 0 4px 2px;
  flex-shrink: 0;
}
.sh-menu-recolhido .sh-menu-topo {
  flex-direction: column;
  gap: 8px;
  padding: 0 0 6px;
}
.sh-menu-espaco {
  flex: 1 1 auto;
}
.sh-menu-marca {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: 700 17px/1 var(--nx-f-titulo, "Anek Tamil", "Inter", system-ui, sans-serif);
  letter-spacing: 0.01em;
  color: var(--nx-tinta, CanvasText);
  white-space: nowrap;
}
.sh-menu-marca i {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  background: var(--nx-marca-cardinal, CanvasText);
}
.sh-menu-marca.sh-menu-marca-compacta i {
  width: 14px;
  height: 14px;
  border-radius: 4px;
}

/* A faixa do ambiente (HOMOLOG, DEMO): uma etiqueta cheia, que não se confunde com texto do menu sobre o fundo claro.
   HOMOLOG em âmbar (`--nx-atencao`) com tinta escura, 7,9:1; DEMO em laranja-tinta com branco, 6,9:1. Com o /ds/ fora
   do ar, HOMOLOG vai ao marca-texto do sistema (Mark/MarkText, amarelo com preto) e DEMO inverte (CanvasText com Canvas):
   continua uma etiqueta cheia. No trilho ela fica de pé, na vertical (o DS a esconde no recolhido; aqui o dono decidiu
   mostrá-la: quem trabalha no trilho também precisa saber que não está na produção). */
.sh-menu-ambiente {
  flex: none;
  padding: 2px 6px;
  border-radius: 4px;
  font: 700 11px/14px var(--nx-f-texto, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.sh-menu-ambiente.sh-menu-ambiente-homolog {
  background: var(--nx-atencao, Mark);
  color: var(--nx-tinta, MarkText);
}
.sh-menu-ambiente.sh-menu-ambiente-demo {
  background: var(--nx-laranja-tinta, CanvasText);
  color: var(--nx-tinta-inversa, Canvas);
}
.sh-menu-recolhido .sh-menu-ambiente {
  padding: 6px 2px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
}

.sh-menu-recolher {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--nx-tinta-3, CanvasText);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sh-menu-recolher:hover {
  background: var(--nx-passagem, ButtonFace);
  color: var(--nx-tinta, CanvasText);
}

/* ---- quem está usando: um cartão em papel ---- */
.sh-menu-usuario {
  flex-shrink: 0;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--nx-fio, GrayText);
  border-radius: var(--nx-raio-controle, 8px);
  background: var(--nx-papel, Canvas);
}
.sh-menu-usuario-nome {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 600;
  color: var(--nx-tinta, CanvasText);
}
.sh-menu-departamento {
  margin-top: 1px;
  font-size: 12px;
  line-height: 16px;
  color: var(--nx-tinta-2, CanvasText);
}

/* ---- os itens ---- */
.sh-menu-nav {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--nx-fio, GrayText);
}
.sh-menu-app {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.sh-menu-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 30px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--nx-raio-controle, 8px);
  background: transparent;
  color: var(--nx-tinta-2, CanvasText);
  font: 500 13px/17px var(--nx-f-texto, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sh-menu-item:hover {
  background: var(--nx-passagem, ButtonFace);
  color: var(--nx-tinta, CanvasText);
}
/* o item da tela aberta: o fundo de seleção, sem o vermelho de antes (o DS reserva o cardinal para a marca) */
.sh-menu-item.active,
.sh-menu-item.sh-menu-selecionado {
  background: var(--nx-selecao, ButtonFace);
  color: var(--nx-tinta, CanvasText);
  font-weight: 600;
}
/* o app aberto com as telas à mostra: o nome em negrito; a seleção fica na tela, logo abaixo */
.sh-menu-item.sh-menu-ativo {
  color: var(--nx-tinta, CanvasText);
  font-weight: 600;
}
.sh-menu-icone {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: var(--nx-tinta-3, CanvasText);
}
.sh-menu-item:hover .sh-menu-icone,
.sh-menu-item.active .sh-menu-icone,
.sh-menu-item.sh-menu-ativo .sh-menu-icone,
.sh-menu-item.sh-menu-selecionado .sh-menu-icone {
  color: var(--nx-tinta, CanvasText);
}
.sh-menu-letra {
  font-size: 12px;
  font-weight: 600;
}
.sh-menu-rotulo {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sh-menu-seta {
  flex: none;
  display: inline-flex;
  color: var(--nx-tinta-3, CanvasText);
  transition: transform 0.2s ease;
}
.sh-menu-seta.sh-menu-seta-aberta {
  transform: rotate(90deg);
}
.sh-menu-novidade {
  flex: none;
  width: 8px;
  height: 8px;
  margin-left: auto;
  border-radius: 50%;
  background: var(--nx-marca-cardinal, CanvasText);
}

/* trilho: só o ícone, num alvo de 40 x 36, com o nome no `title` */
.sh-menu-recolhido .sh-menu-item {
  justify-content: center;
  width: 40px;
  min-height: 36px;
  margin: 0 auto;
  padding: 0;
}
.sh-menu-recolhido .sh-menu-novidade {
  position: absolute;
  top: 6px;
  right: 7px;
  margin: 0;
}

/* ---- as telas do app (filhos), com o trilho vertical e o ponto da tela aberta ---- */
.sh-menu-filhos {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 1px 0 4px;
}
.sh-menu-filhos::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--nx-fio-2, GrayText);
}
.sh-menu-filho {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 27px;
  padding: 0 8px 0 32px;
  border-radius: var(--nx-raio-controle, 8px);
  color: var(--nx-tinta-2, CanvasText);
  font: 500 12.5px/16px var(--nx-f-texto, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sh-menu-filho:hover {
  background: var(--nx-passagem, ButtonFace);
  color: var(--nx-tinta, CanvasText);
}
.sh-menu-filho.active {
  background: var(--nx-selecao, ButtonFace);
  color: var(--nx-tinta, CanvasText);
  font-weight: 600;
}
.sh-menu-filho.active::before {
  content: "";
  position: absolute;
  left: 13.5px;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-radius: 50%;
  background: var(--nx-acao, CanvasText);
  box-shadow: 0 0 0 2px var(--nx-selecao, ButtonFace);
}
.sh-menu-filho-rotulo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sh-menu-filhos .sh-menu-filhos {
  margin: 0 0 2px;
}
.sh-menu-filhos .sh-menu-filhos::before {
  display: none;
}
.sh-menu-filhos .sh-menu-filhos .sh-menu-filho {
  padding-left: 44px;
}

/* a "pasta" dentro do app (GrupoDeRotas) */
.sh-menu-grupo {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  min-height: 27px;
  padding: 0 8px 0 28px;
  border: 0;
  border-radius: var(--nx-raio-controle, 8px);
  background: transparent;
  color: var(--nx-tinta-3, CanvasText);
  font: 600 12px/16px var(--nx-f-texto, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  letter-spacing: 0.02em;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sh-menu-grupo:hover {
  background: var(--nx-passagem, ButtonFace);
  color: var(--nx-tinta, CanvasText);
}
.sh-menu-grupo.sh-menu-grupo-dentro {
  color: var(--nx-tinta, CanvasText);
}
.sh-menu-grupo .sh-menu-seta {
  color: inherit;
}

/* o aviso de submenu indisponível (o ./routes do módulo não carregou) */
.sh-menu-sem-submenu {
  display: flex;
  align-items: center;
  min-height: 27px;
  padding: 0 8px 0 32px;
}
/* o círculo tracejado "sem leitura" do DS, no token --nx-sem-data (o traço do SVG é currentColor) */
.sh-menu-sem-submenu-icone {
  flex: none;
  color: var(--nx-sem-data, CanvasText);
}

/* ---- o pé: "powered by" e Sair (o fio que os separa dos itens é a borda de baixo da .sh-menu-nav) ---- */
.sh-menu-assinatura {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 2px 4px 0;
  color: var(--nx-tinta-2, CanvasText);
  font-size: 11px;
  letter-spacing: 0.02em;
}
.sh-menu-assinatura img {
  height: 12px;
}
.sh-menu-sair {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 8px;
  border: 0;
  border-radius: var(--nx-raio-controle, 8px);
  background: transparent;
  color: var(--nx-tinta-2, CanvasText);
  font: 500 12.5px/16px var(--nx-f-texto, "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.sh-menu-sair:hover {
  background: var(--nx-passagem, ButtonFace);
  color: var(--nx-tinta, CanvasText);
}
.sh-menu-sair .sh-menu-icone {
  width: 16px;
  height: 16px;
  color: inherit;
}
.sh-menu-recolhido .sh-menu-sair {
  width: 40px;
  min-height: 32px;
  margin: 0 auto;
  padding: 0;
}

/* ---- foco: o anel do DS (2 px da cor da página e 2 px de --nx-foco), no lugar do contorno cardinal do index.css ---- */
.sh-menu-item:focus-visible,
.sh-menu-filho:focus-visible,
.sh-menu-grupo:focus-visible,
.sh-menu-recolher:focus-visible,
.sh-menu-sair:focus-visible {
  outline: none;
  box-shadow: var(--nx-anel, 0 0 0 2px Canvas, 0 0 0 4px CanvasText);
}
/* o anel fica 4 px fora da caixa: quem rola o menu até o alvo (o foco por Tab, o scrollIntoView) para 4 px antes da
   borda, e o anel não é cortado. Também absorve o arredondamento do WebKit: no zoom de 125% ele encolhe o fio de 1 px
   para 0,8 px (pixel do aparelho), a posição do Sair vira fração (,39) e a rolagem, em px inteiros, deixava 0,39 px
   do Sair para fora da tela (a rede mediu `sair.alcancavel_rolando_o_menu` falso em zoom125-aberto no WebKit) */
.sh-menu-item,
.sh-menu-filho,
.sh-menu-grupo,
.sh-menu-recolher,
.sh-menu-sair {
  scroll-margin-block: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .sh-menu-item,
  .sh-menu-filho,
  .sh-menu-grupo,
  .sh-menu-recolher,
  .sh-menu-sair,
  .sh-menu-seta {
    transition: none;
  }
}

/* alto contraste do sistema: o navegador apaga fundos e sombras; o foco e a tela aberta passam a contorno, e a faixa
   ganha borda para continuar uma etiqueta */
@media (forced-colors: active) {
  .sh-menu-item.active,
  .sh-menu-item.sh-menu-selecionado,
  .sh-menu-filho.active {
    outline: 1px solid CanvasText;
    outline-offset: -1px;
  }
  /* depois da regra da tela aberta: no item aberto E focado, vale o foco */
  .sh-menu-item:focus-visible,
  .sh-menu-filho:focus-visible,
  .sh-menu-grupo:focus-visible,
  .sh-menu-recolher:focus-visible,
  .sh-menu-sair:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
  .sh-menu-ambiente {
    border: 1px solid CanvasText;
  }
}
/* T-01 do Vertex zero: a moldura do Nexus no celular. Toda regra daqui pende de uma classe `nx-cel-*` ou
   `sh-gaveta`, ou do atributo `data-nexus-moldura="celular"`, que só existem com o portão ligado e abaixo de 760 px
   (src/celular/portao.ts): com o portão desligado, nenhum seletor casa e a tela fica como antes.

   O topo NÃO é fixo, de propósito: os módulos já usam `position: sticky; top: 0` nas barras de filtro e nos
   cabeçalhos de tabela (o Meu dia e a 360 do Operação), e um topo fixo ficaria por cima deles. Ele rola com a página;
   de qualquer ponto, o "Mais" dos atalhos (se ligados) abre a mesma gaveta.

   Contrato com os módulos (variáveis no <html>):
   - `--sidebar-width`: 0px no celular (a barra lateral vira gaveta), e os módulos que já a liam (a barra fixa do Meu
     dia) encostam na borda;
   - `--nexus-rodape-altura`: a altura dos atalhos no rodapé, quando ligados; quem tem barra fixa embaixo soma isso;
   - o atributo `data-nexus-moldura="celular"` (DN-12): só existe com esta moldura de pé (`Celular.tsx`, `useCelular`),
     e é com ele que o módulo troca uma tabela larga por cartões.
   O contrato inteiro (larguras, camadas, portais, chaves) está no `CONTRATO-MOLDURA.md`, na raiz do repo.

   A gaveta usa o prefixo do shell (`sh-gaveta`, passo 2a): a `.nx-gaveta` é a gaveta do DS (`nexus.css`, desde a 2.1.0) e as
   duas colidiriam quando o `nexus.css` for carregado. As peças da barra que a gaveta ajusta têm classe própria no
   `Sidebar.tsx` (`sh-menu-departamento`, `sh-menu-assinatura`), em vez de seletor por posição ou por estilo inline.

   Passo 2b: o topo e a gaveta saem do azul e vão para a cor da página, como o menu do computador (menu.css) e o topo do
   celular da casca densa do DS (`.nx-topo-celular`, `91-casca-densa.css` linha 58: fundo da página com um fio embaixo).
   Todo `var(--nx-*)` tem reserva literal, numa cor do sistema (Canvas, CanvasText, GrayText, Mark/MarkText), como no
   menu.css: com o /ds/ fora do ar o topo e a gaveta ficam de pé nas cores padrão do navegador, e nenhuma reserva repete
   o hexadecimal da paleta (o lint do DS conta o hexadecimal como cor fixa). O rodapé dos atalhos não é do passo 2b e
   segue como estava. */

.nx-cel-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 56px;
  padding: env(safe-area-inset-top) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
  background: var(--nx-fundo, Canvas);
  border-bottom: 1px solid var(--nx-fio, GrayText);
  color: var(--nx-tinta, CanvasText);
}
.nx-cel-menu {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 44px;
  min-width: 44px;
  padding: 0;
  border: 1px solid var(--nx-fio-2, GrayText);
  border-radius: 8px;
  background: var(--nx-papel, Canvas);
  color: var(--nx-tinta, CanvasText);
  font: 500 14px/1 var(--nx-f-texto, "Inter", system-ui, sans-serif);
  cursor: pointer;
}
/* o topo do cânone (`ui-ux-dashboard/_base/canon.md` §3 e o `.nx-topo-movel` do `dash.css`): "☰ Nexus · <item ativo>",
   a marca em 18 px e o item em 15 px, em até 2 linhas (a 360 px "Estrutura da operação" não cabe numa); o selo do
   ambiente vai para a ponta direita */
.nx-cel-marca {
  flex-shrink: 0;
  font: 700 18px/1 var(--nx-f-titulo, "Anek Tamil", "Inter", system-ui, sans-serif);
  letter-spacing: 0.01em;
}
/* o selo do ambiente: o mesmo desenho da faixa do menu (.sh-menu-ambiente), HOMOLOG em âmbar com tinta escura (7,9:1)
   e DEMO em laranja-tinta com branco (6,9:1) */
.nx-cel-selo {
  flex-shrink: 0;
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 3px 6px;
  border-radius: 4px;
  background: var(--nx-atencao, Mark);
  color: var(--nx-tinta, MarkText);
}
.nx-cel-selo-demo {
  background: var(--nx-laranja-tinta, CanvasText);
  color: var(--nx-tinta-inversa, Canvas);
}
.nx-cel-app {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  min-width: 0;
  overflow: hidden;
  font: 600 15px/1.2 var(--nx-f-texto, "Inter", system-ui, sans-serif);
  color: var(--nx-tinta-2, CanvasText);
}

.nx-cel-main {
  margin-left: 0;
  min-height: calc(100vh - 56px);
  padding: 12px max(16px, env(safe-area-inset-right)) calc(24px + var(--nexus-rodape-altura, 0px))
    max(16px, env(safe-area-inset-left));
  background: var(--nx-fundo, Canvas);
  overflow-wrap: anywhere;
}

/* a gaveta: a mesma barra lateral, fora da tela até o "Menu" */
.sh-gaveta {
  transform: translateX(-100%);
  visibility: hidden;
  transition: transform 0.2s ease, visibility 0s linear 0.2s;
  box-shadow: none;
}
.sh-gaveta.sh-gaveta-aberta {
  transform: none;
  visibility: visible;
  transition: transform 0.2s ease;
  /* a sombra das peças que flutuam no DS (a .nx-gaveta do nexus.css usa a mesma); sem o /ds/, a sombra de antes */
  box-shadow: var(--nx-sombra-flutua, 4px 0 24px color-mix(in srgb, CanvasText 30%, transparent));
}
/* alvos de 44 px dentro da gaveta (no computador os itens têm de 27 a 36 px) */
.sh-gaveta nav a,
.sh-gaveta nav button,
.sh-gaveta > button {
  min-height: 44px;
}
/* o corpo mínimo de 13 px no celular (o cânone, ponto 3: o mesmo dos atalhos e da opção do rodapé): no computador as
   telas do app e o grupo têm 12 e 12,5 px. A entrelinha em px inteiros, como no menu.css: fração somada ao longo da
   gaveta deixa o Sair 0,125 px fora da tela quando rolado até a borda */
.sh-gaveta .sh-menu-item,
.sh-gaveta .sh-menu-sair {
  font-size: 14px;
  line-height: 18px;
}
.sh-gaveta .sh-menu-filho,
.sh-gaveta .sh-menu-grupo {
  font-size: 13.5px;
  line-height: 18px;
}
/* o departamento e o "powered by" em tinta cheia na gaveta (no computador, tinta-2): no celular a tela é lida ao sol e
   de longe, e são os dois textos menores da gaveta; o corpo sobe aos 13 px do cânone */
.sh-gaveta .sh-menu-departamento {
  color: var(--nx-tinta, CanvasText);
  font-size: 13px;
  line-height: 17px;
}
.sh-gaveta > .sh-menu-assinatura {
  color: var(--nx-tinta, CanvasText);
  font-size: 13px;
}
.nx-cel-fechar {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--nx-tinta-2, CanvasText);
  cursor: pointer;
}
.nx-cel-fechar:hover {
  background: var(--nx-passagem, ButtonFace);
  color: var(--nx-tinta, CanvasText);
}
/* `flex-shrink: 0`: a gaveta é uma coluna flexível da altura da tela, e sem isso a opção encolhia até 44 px com o texto
   vazando por cima do "powered by" */
.nx-cel-opcao {
  flex-shrink: 0;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 8px 0 10px;
  padding: 10px 12px;
  min-height: 44px;
  border: 1px solid var(--nx-fio, GrayText);
  border-radius: 8px;
  background: var(--nx-papel, Canvas);
  color: var(--nx-tinta, CanvasText);
  font-size: 13px;
  cursor: pointer;
}
.nx-cel-opcao input {
  width: 20px;
  height: 20px;
  margin-top: 1px;
  accent-color: var(--nx-acao, auto);
  flex-shrink: 0;
}
.nx-cel-opcao small {
  display: block;
  margin-top: 2px;
  font-size: 13px;
  color: var(--nx-tinta-2, CanvasText);
}
.nx-cel-veu {
  position: fixed;
  inset: 0;
  z-index: 1050;
  background: var(--nx-veu, color-mix(in srgb, CanvasText 45%, transparent));
}

/* os atalhos no rodapé (ligados por padrão desde o H-30, AP-20261013-034; quem não quer desliga na gaveta) */
/* o item que recebe o foco pelo Tab não fica escondido sob os atalhos (WCAG 2.4.11); sem eles, a variável não existe e
   vale 0. O módulo que precisa de mais (a barra do Meu dia) sobe o valor com um seletor mais específico. */
:root[data-nexus-moldura="celular"] {
  scroll-padding-bottom: var(--nexus-rodape-altura, 0px);
}
/* A camada é a do Vertex (`BarraInferior.tsx`, `z-40`): ACIMA da página e ABAIXO das janelas, dos véus e dos painéis
   dos módulos (no Operação, de 60 a 300; nos outros, em geral 50 ou 1000). Antes (z 900) os atalhos ficavam por cima
   das janelas: tapavam o pé delas e levavam a outra tela com a janela aberta. A gaveta (1100) e o véu (1050) seguem
   por cima. A altura é a de `ALTURA_RODAPE` (`Celular.tsx`), a mesma que os módulos leem em `--nexus-rodape-altura`. */
.nx-cel-rodape {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: flex;
  height: calc(62px + env(safe-area-inset-bottom));
  padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--nx-papel, Canvas);
  border-top: 1px solid var(--nx-fio, GrayText);
  box-shadow: var(--nx-sombra-barra-celular, 0 -8px 24px -16px color-mix(in srgb, CanvasText 25%, transparent));
}
/* o rótulo em 13 px (cânone, ponto 3), em até duas linhas: a 360–390 px cada atalho tem cerca de 70 px, e "Estrutura da
   operação" ou "Carregamento" não cabem numa linha. A palavra que não cabe se parte (com hífen, onde o aparelho sabe) */
.nx-cel-atalho {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  padding: 6px 3px 4px;
  border: none;
  background: transparent;
  color: var(--nx-tinta-2, CanvasText);
  font: 500 13px/1.08 Inter, system-ui, sans-serif;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.nx-cel-icone {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  flex-shrink: 0;
}
.nx-cel-rotulo {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  max-width: 100%;
  overflow: hidden;
  overflow-wrap: anywhere;
  hyphens: auto;
}
/* o ativo sem negrito: com ele a palavra longa quebrava em outro ponto e o rótulo mudava de forma ao ser tocado; a
   marca é a cor e o traço no alto (o mesmo desenho do Vertex), nas cores da guia ativa do DS (.nx-guia.ativa: o texto
   em --nx-link e o traço em --nx-acao) e do ponto do item aberto no menu do computador. O cardinal fica para a marca */
.nx-cel-atalho.active {
  color: var(--nx-link, LinkText);
  box-shadow: inset 0 3px 0 var(--nx-acao, LinkText);
}
/* o foco no topo e na gaveta: o anel do DS (o mesmo do menu.css, que cuida dos itens da gaveta); antes era um contorno
   rosa, feito para o fundo azul. Os atalhos do rodapé, que já eram brancos, ficam com o contorno cardinal. */
.nx-cel-menu:focus-visible,
.nx-cel-fechar:focus-visible,
.nx-cel-opcao:focus-within {
  outline: none;
  box-shadow: var(--nx-anel, 0 0 0 2px Canvas, 0 0 0 4px CanvasText);
}
.nx-cel-atalho:focus-visible {
  outline: 2px solid var(--nx-marca-cardinal, CanvasText);
  outline-offset: -2px;
}

@media (prefers-reduced-motion: reduce) {
  .sh-gaveta,
  .sh-gaveta.sh-gaveta-aberta {
    transition: none;
  }
}
@media (forced-colors: active) {
  .nx-cel-atalho.active {
    outline: 2px solid CanvasText;
  }
  .nx-cel-menu:focus-visible,
  .nx-cel-fechar:focus-visible,
  .nx-cel-opcao:focus-within {
    outline: 2px solid Highlight;
    outline-offset: -2px;
  }
  .nx-cel-selo {
    border: 1px solid CanvasText;
  }
}


* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  color: var(--nx-tinta, CanvasText);
  /* passo 2b: o mesmo token do menu e do <main> (--nx-fundo); com o /ds/ fora do ar, a cor da página do sistema
     (Canvas), a mesma reserva do menu: página e menu seguem iguais */
  background: var(--nx-fundo, Canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Anek Tamil', sans-serif;
}

::selection {
  background: color-mix(in srgb, var(--nx-marca-cardinal, rgb(206 18 50)) 15%, transparent);
  color: var(--nx-tinta, rgb(22 24 29));
}

/* Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--nx-fio-2, rgb(207 211 217));
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--nx-borda-campo, rgb(134 140 150));
}

/* Focus ring: fica em #CE1232 literal e com esta especificidade (0,1,1): os módulos vencem com regra própria */
input:focus-visible,
button:focus-visible {
  outline: 2px solid #CE1232;
  outline-offset: 2px;
}

/* Top loading bar (transição entre módulos) */
@keyframes nexus-top-loading {
  0%   { left: -40%; width: 40%; }
  50%  { left: 25%;  width: 55%; }
  100% { left: 100%; width: 40%; }
}
/* As telas de Acessos (Administração › Acessos, Meus acessos, Concessões do app e a História): só as regras delas,
   com a classe-raiz .shp e as classes .shp-*. O kit de painel não mora mais aqui: vem do design system (o remote
   nexus_ds, servido em /ds/atual/), e o estilo dele, do kit.css que o index.html carrega (raiz .nx-kit).

   Saiu do antigo styles/painel.css (cópia do kit, UX-35): as cores leem os tokens --nx-* em vez das variáveis sem
   prefixo que o .shp declarava, e o ancestral das regras .shp-* é :is(.shp, .nx-kit), porque o diálogo e a gaveta do
   kit abrem num portal com a raiz nx-kit, fora do .shp da página. */
.shp { font-family: var(--font-texto); color: var(--nx-tinta); }
.shp h2, .shp h3 { letter-spacing: 0; }
:is(.shp, .nx-kit) .shp-campo.shp-campo-cheio { max-width: none; flex-basis: auto; }
:is(.shp, .nx-kit) .shp-campo input { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--nx-fio-2); border-radius: var(--nx-raio-controle); background: var(--nx-papel); color: var(--nx-tinta); font: 14px/1.3 var(--font-texto); }
:is(.shp, .nx-kit) .shp-campo input[aria-invalid="true"] { border-color: var(--nx-critico); }
:is(.shp, .nx-kit) .pnl-tabela td.shp-acoes .pnl-acoes { flex-wrap: nowrap; }
:is(.shp, .nx-kit) .pnl-tabela td.shp-pessoa { white-space: nowrap; }
:is(.shp, .nx-kit) .pnl-tabela td.shp-acoes .pnl-nota { margin-bottom: 4px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .shp * { transition: none !important; }
}
@media (max-width: 760px) {
  :is(.shp, .nx-kit) .pnl-tabela.trilha td.shp-acoes { display: block; margin-top: 6px; }
  :is(.shp, .nx-kit) .pnl-tabela.trilha td + td.shp-acoes::before { content: none; }
}
.shp.shp-pagina { display: flex; flex-direction: column; gap: 14px; min-width: 0; max-width: 1360px; }
:is(.shp, .nx-kit) .shp-cabeca { display: flex; flex-direction: column; gap: 2px; }
:is(.shp, .nx-kit) .shp-migalha { margin: 0; font-size: 13px; line-height: 1.3; color: var(--nx-tinta-3); }
:is(.shp, .nx-kit) .shp-migalha a { color: var(--nx-acao); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
:is(.shp, .nx-kit) .shp-cabeca h1 { margin: 0; font: 700 26px/1.15 var(--font-titulo); letter-spacing: -.01em; color: var(--nx-tinta); }
:is(.shp, .nx-kit) .shp-guias { display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 0; padding: 0; border-bottom: 1px solid var(--nx-fio); }
:is(.shp, .nx-kit) .shp-guia { min-height: 40px; margin: 0 0 -1px; padding: 8px 14px; border: 0; border-bottom: 3px solid transparent; border-radius: var(--nx-raio-controle) var(--nx-raio-controle) 0 0; background: none; color: var(--nx-tinta-2); font: 600 14px/1.2 var(--font-texto); cursor: pointer; }
:is(.shp, .nx-kit) .shp-guia:hover { color: var(--nx-acao); background: var(--nx-passagem); }
:is(.shp, .nx-kit) .shp-guia[aria-selected="true"] { color: var(--nx-acao); border-bottom-color: var(--nx-acao); }
:is(.shp, .nx-kit) .shp-guia-n { margin-left: 6px; padding: 0 7px; border-radius: var(--nx-raio-pilula); background: var(--nx-selecao); font-size: 13px; font-variant-numeric: tabular-nums; }
:is(.shp, .nx-kit) .shp-guia-painel { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
:is(.shp, .nx-kit) .shp-guia-painel:focus { outline: none; }
:is(.shp, .nx-kit) .shp-guia-painel:focus-visible { outline: 2px solid var(--nx-acao); outline-offset: 4px; }
:is(.shp, .nx-kit) .shp-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--nx-tinta-2); }
:is(.shp, .nx-kit) .shp-vistas { display: flex; flex-wrap: wrap; gap: 6px; }
:is(.shp, .nx-kit) .shp-vista { min-height: 36px; padding: 6px 12px; border: 1px solid var(--nx-fio-2); border-radius: var(--nx-raio-pilula); background: var(--nx-papel); color: var(--nx-tinta); font: 600 13px/1.2 var(--font-texto); cursor: pointer; }
:is(.shp, .nx-kit) .shp-vista:hover { border-color: var(--nx-acao); }
:is(.shp, .nx-kit) .shp-vista[aria-pressed="true"] { background: var(--nx-acao); border-color: var(--nx-acao); color: var(--nx-acao-tinta); }
:is(.shp, .nx-kit) .shp-perfis { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, max(280px, calc((100% - 15px) / 2))), 1fr)); }
:is(.shp, .nx-kit) .shp-perfil { min-width: 0; padding: 16px 18px; border: 1px solid var(--nx-fio-painel); border-radius: var(--nx-raio-painel); background: var(--nx-papel); box-shadow: var(--nx-sombra-painel); }
:is(.shp, .nx-kit) .shp-perfil h3 { margin: 0; font: 700 17px/1.25 var(--font-titulo); color: var(--nx-tinta); }
:is(.shp, .nx-kit) .shp-perfil-frase { margin: 6px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--nx-tinta-2); }
:is(.shp, .nx-kit) .shp-perfil-rotulo { margin: 12px 0 0; font: 700 13px/1.3 var(--font-texto); color: var(--nx-acao); }
:is(.shp, .nx-kit) .shp-pilulas { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
:is(.shp, .nx-kit) .shp-pilula { display: inline-flex; align-items: center; max-width: 100%; padding: 3px 10px; border: 1px solid var(--nx-fio-2); border-radius: var(--nx-raio-pilula); background: var(--nx-selecao); color: var(--nx-tinta); font: 700 13px/1.4 var(--font-texto); }
:is(.shp, .nx-kit) .shp-pilula.shp-condicional { background: var(--nx-papel); border: 1px dashed var(--nx-tinta-3); }
:is(.shp, .nx-kit) .shp-pilula.shp-vertex { background: var(--nx-papel-2); border-color: var(--nx-fio-2); color: var(--nx-tinta-2); font-weight: 600; }
:is(.shp, .nx-kit) .shp-lista-texto { margin: 4px 0 0; padding-left: 18px; list-style: disc; font-size: 13.5px; line-height: 1.5; color: var(--nx-tinta-2); }
:is(.shp, .nx-kit) .shp-perfil details { margin: 12px 0 0; }
:is(.shp, .nx-kit) .shp-perfil summary { min-height: 32px; display: list-item; cursor: pointer; font: 700 13px/1.6 var(--font-texto); color: var(--nx-acao); }
:is(.shp, .nx-kit) .shp-perfil-pe { margin: 12px 0 0; padding-top: 8px; border-top: 1px solid var(--nx-fio); font-size: 13px; line-height: 1.45; color: var(--nx-tinta-3); }
:is(.shp, .nx-kit) .shp-perfil-pe + .shp-perfil-pe { margin-top: 4px; padding-top: 0; border-top: 0; }
:is(.shp, .nx-kit) .shp-perfil .pnl-avisos { margin-top: 12px; }
:is(.shp, .nx-kit) .shp-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0; }
:is(.shp, .nx-kit) .shp-campo { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; min-width: 0; max-width: 380px; }
:is(.shp, .nx-kit) .shp-campo label { font: 600 13px/1.2 var(--font-texto); color: var(--nx-tinta-2); }
:is(.shp, .nx-kit) .shp-campo select { width: 100%; min-height: 40px; padding: 8px 10px; border: 1px solid var(--nx-fio-2); border-radius: var(--nx-raio-controle); background: var(--nx-papel); color: var(--nx-tinta); font: 14px/1.3 var(--font-texto); }
:is(.shp, .nx-kit) .shp-resultado { display: flex; flex-direction: column; gap: 10px; padding-top: 10px; border-top: 1px solid var(--nx-fio); }
:is(.shp, .nx-kit) .shp-resultado-titulo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font: 600 15px/1.35 var(--font-texto); color: var(--nx-tinta); }
:is(.shp, .nx-kit) .shp-pares { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 6px 16px; margin: 0; font-size: 13.5px; line-height: 1.45; }
:is(.shp, .nx-kit) .shp-pares dt { font-weight: 600; color: var(--nx-tinta-2); }
:is(.shp, .nx-kit) .shp-pares dd { margin: 0; min-width: 0; color: var(--nx-tinta); }
:is(.shp, .nx-kit) .shp-itens { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
:is(.shp, .nx-kit) .shp-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--nx-fio); font-size: 14px; line-height: 1.4; }
:is(.shp, .nx-kit) .shp-item:last-child { border-bottom: 0; }
:is(.shp, .nx-kit) .shp-item-nome { font-weight: 600; color: var(--nx-tinta); }
:is(.shp, .nx-kit) .shp-item-apoio { font-size: 13px; color: var(--nx-tinta-3); }
:is(.shp, .nx-kit) .shp-item .pnl-link { white-space: normal; }
:is(.shp, .nx-kit) .shp-sub-titulo { margin: 4px 0 0; font: 600 14px/1.3 var(--font-texto); color: var(--nx-acao); }
:is(.shp, .nx-kit) .shp-negado { color: var(--nx-atencao-tinta); }
:is(.shp, .nx-kit) .shp-negado .pnl-ico { width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; }
:is(.shp, .nx-kit) .shp-filtro { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; }
@media (max-width: 760px) {
  :is(.shp, .nx-kit) .shp-cabeca h1 { font-size: 22px; }
  :is(.shp, .nx-kit) .shp-migalha a { display: inline-flex; align-items: center; min-height: 44px; }
  :is(.shp, .nx-kit) .shp-guia { min-height: 44px; padding: 8px 10px; }
  :is(.shp, .nx-kit) .shp-vista { min-height: 44px; }
  :is(.shp, .nx-kit) .shp-campo { max-width: none; flex-basis: 100%; }
  :is(.shp, .nx-kit) .shp-campo select, :is(.shp, .nx-kit) .shp-campo input { min-height: 44px; }
  :is(.shp, .nx-kit) .shp-item .pnl-link, :is(.shp, .nx-kit) .shp-voltar .pnl-link { display: inline-flex; align-items: center; min-height: 44px; }
  :is(.shp, .nx-kit) .shp-form .pnl-botao, :is(.shp, .nx-kit) .shp-filtro .pnl-botao { flex: 1 1 auto; }
  :is(.shp, .nx-kit) .shp-pares { grid-template-columns: minmax(0, 1fr); gap: 0; }
  :is(.shp, .nx-kit) .shp-pares dd { margin-bottom: 8px; }
  :is(.shp, .nx-kit) .shp-perfil summary { min-height: 44px; }
  :is(.shp, .nx-kit) .shp-faixa-tres .pnl-prateleira { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 0; }
  :is(.shp, .nx-kit) .shp-faixa-tres .pnl-grupo + .pnl-grupo { margin: 0; padding: 0 0 0 10px; border-top: 0; border-left: 2px solid var(--nx-fio-2); }
  :is(.shp, .nx-kit) .shp-faixa-tres .pnl-grupo + .pnl-grupo .pnl-numeros { grid-template-columns: minmax(0, 1fr); }
  :is(.shp, .nx-kit) .shp-faixa-tres .pnl-grupo + .pnl-grupo .pnl-numero { padding-left: 0; border-left: 0; }
  :is(.shp, .nx-kit) .shp-faixa-tres .pnl-valor { font-size: 28px; }
}