/* =====================================================================
   LAYOUT — App Shell (cabeçalho institucional, menu superior,
   área de conteúdo), esqueleto das páginas (arquétipos) e acesso.
   Pontos de quebra: 480 · 768 · 1024 · 1280 (docs/design-system/responsive.md)
   ===================================================================== */

/* ---------------- Cabeçalho institucional ---------------- */
.cabecalho {
  position: relative;
  height: var(--altura-cabecalho);
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  padding: 0 var(--esp-4);
  background: linear-gradient(180deg, var(--shell-cabecalho-fundo), var(--shell-cabecalho-fundo-escuro));
  color: var(--shell-cabecalho-texto);
  border-bottom: var(--filete) solid var(--shell-filete);
  box-shadow: var(--sombra-interna-topo);
}

.cabecalho__menu {
  display: inline-grid;
  place-items: center;
  width: var(--altura-controle);
  height: var(--altura-controle);
  border: 0;
  border-radius: var(--raio-pilula);
  background: transparent;
  color: inherit;
  transition: background-color var(--duracao-rapida) var(--curva-padrao);
}

.cabecalho__menu:hover {
  background: var(--luz-10);
}

.cabecalho__menu[aria-expanded="true"] {
  background: var(--luz-16);
}

.marca {
  display: flex;
  flex-shrink: 0; /* quem encolhe é a busca; o nome do produto não pode ficar sob o selo de ambiente */
  align-items: center;
  gap: var(--esp-3);
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.marca:hover {
  text-decoration: none;
}

.marca__brasao {
  width: 2.5rem;
  height: 2.5rem;
  object-fit: contain;
  filter: drop-shadow(0 1px 2px var(--tinta-28));
}

.marca__sigla {
  font-size: var(--texto-2xl);
  font-weight: var(--peso-forte);
  letter-spacing: 0.02em;
  line-height: 1;
}

.marca__divisor {
  width: 1px;
  align-self: stretch;
  margin: var(--esp-3) 0;
  background: var(--luz-16);
}

.marca__produto {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: var(--altura-linha-justa);
}

.marca__titulo {
  overflow: hidden;
  font-weight: var(--peso-semi);
  font-size: var(--texto-md);
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.marca__subtitulo {
  font-size: var(--texto-xs);
  color: var(--cor-texto-inverso-sutil);
}

/* Selo de ambiente: contorno dourado, nunca preenchido (não compete com a marca). */
.cabecalho__ambiente {
  padding: var(--esp-05) var(--esp-2);
  border: 1px solid var(--shell-filete);
  border-radius: var(--raio-xs);
  font-size: var(--texto-2xs);
  font-weight: var(--peso-forte);
  letter-spacing: var(--rastreio-rotulo);
  text-transform: uppercase;
  color: var(--shell-filete-claro);
  background: transparent;
}

.cabecalho__busca {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  min-width: 0;
}

.busca-global {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  width: 100%;
  max-width: 30rem;
  height: var(--altura-controle);
  padding: 0 var(--esp-2) 0 var(--esp-4);
  border: 1px solid var(--luz-16);
  border-radius: var(--raio-pilula);
  background: var(--luz-10);
  color: var(--cor-texto-inverso-sutil);
  text-align: left;
  transition: border-color var(--duracao-rapida) var(--curva-padrao),
    background-color var(--duracao-rapida) var(--curva-padrao),
    color var(--duracao-rapida) var(--curva-padrao);
}

.busca-global:hover,
.busca-global:focus-visible {
  border-color: var(--shell-filete);
  background: var(--luz-16);
  color: var(--cor-texto-inverso);
}

.busca-global > .icone {
  color: var(--shell-filete-claro);
}

.busca-global__texto {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.busca-global__atalho {
  white-space: nowrap;
  margin-left: auto;
  padding: var(--esp-05) var(--esp-2);
  background: var(--luz-10);
  color: var(--cor-texto-inverso-sutil);
  border: 1px solid var(--luz-16);
  border-radius: var(--raio-pilula);
  font-size: var(--texto-2xs);
  font-family: var(--fonte-mono);
  letter-spacing: 0.02em;
}

.cabecalho__acoes {
  display: flex;
  align-items: center;
  gap: var(--esp-1);
  margin-left: auto;
}

.cabecalho__botao {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--altura-controle);
  height: var(--altura-controle);
  border: 0;
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--cor-texto-inverso);
  text-decoration: none;
  transition: background-color var(--duracao-rapida) var(--curva-padrao);
}

.cabecalho__botao:hover {
  background: var(--luz-10);
}

.cabecalho__marcador {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--raio-pilula);
  background: var(--shell-filete);
  box-shadow: 0 0 0 2px var(--shell-cabecalho-fundo);
}

.perfil {
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  height: var(--altura-controle);
  padding: 0 var(--esp-2) 0 var(--esp-1);
  border: 0;
  border-radius: var(--raio-pilula);
  background: transparent;
  color: var(--cor-texto-inverso);
  transition: background-color var(--duracao-rapida) var(--curva-padrao);
}

.perfil:hover,
.perfil[aria-expanded="true"] {
  background: var(--luz-10);
}

.perfil__avatar {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--raio-pilula);
  background: linear-gradient(145deg, var(--dourado-300), var(--dourado-600));
  color: var(--grafite-950);
  font-size: var(--texto-xs);
  font-weight: var(--peso-forte);
  letter-spacing: 0.02em;
  box-shadow: 0 0 0 2px var(--luz-16);
}

.perfil__texto {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: var(--altura-linha-justa);
}

.perfil__nome {
  font-size: var(--texto-sm);
  font-weight: var(--peso-semi);
}

.perfil__papel {
  font-size: var(--texto-2xs);
  letter-spacing: var(--rastreio-rotulo);
  text-transform: uppercase;
  color: var(--shell-filete-claro);
}

/* ---------------- Topo fixo: cabeçalho + menu superior ---------------- */
.topo {
  position: sticky;
  top: 0;
  z-index: var(--z-cabecalho);
}

/* ---------------- Menu superior ---------------- */
.navegacao {
  background: var(--shell-navegacao-fundo);
  border-bottom: var(--borda);
  box-shadow: 0 1px 0 var(--tinta-04), 0 4px 16px -12px var(--tinta-18);
}

/* Alinhado à mesma coluna do conteúdo (largura máxima e respiros iguais). */
.navegacao__interno {
  display: flex;
  align-items: stretch;
  gap: var(--esp-2);
  height: var(--altura-navegacao);
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: 0 var(--esp-8);
}

/* Seletor de módulo: filete dourado vertical + nome do módulo (DNA da referência). */
.menu.navegacao__modulo {
  display: flex;
  align-items: stretch;
  padding: var(--esp-2) 0;
}

/* O filete deste seletor e a linha-guia da folha correm no mesmo eixo: o recuo negativo o
   leva para a beirada de fora do documento, onde a guia passa. */
.navegacao__seletor {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  margin-left: calc(-1 * var(--filete));
  padding: 0 var(--esp-3);
  border: 0;
  border-left: var(--filete) solid var(--cor-marca);
  border-radius: 0 var(--raio-md) var(--raio-md) 0;
  background: transparent;
  color: var(--cor-texto);
  font-size: var(--texto-lg);
  font-weight: var(--peso-semi);
  letter-spacing: var(--rastreio-titulo);
  transition: background-color var(--duracao-rapida) var(--curva-padrao);
}

.navegacao__seletor:hover,
.navegacao__seletor[aria-expanded="true"] {
  background: var(--cor-marca-fundo);
}

.navegacao__seletor > .icone {
  color: var(--cor-texto-terciario);
  transition: transform var(--duracao-rapida) var(--curva-padrao);
}

.navegacao__seletor[aria-expanded="true"] > .icone {
  transform: rotate(180deg);
}

.navegacao__lista {
  display: flex;
  align-items: stretch;
  gap: var(--esp-1);
  min-width: 0;
  margin: 0 0 0 var(--esp-4);
  padding: 0;
  list-style: none;
}

.navegacao__lista > li {
  display: flex;
}

/* Lista de módulos (fora de um módulo): rola de lado quando não cabe — sem barra visível,
   com a borda esmaecida (ver [data-rola-lado] em components.css). O filete do item atual
   sobe 1px para não ser recortado pela rolagem. */
@media (min-width: 768px) {
  .navegacao__lista--modulos {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
  }

  .navegacao__lista--modulos .navegacao__link[aria-current="page"]::after {
    bottom: 0;
  }
}

.navegacao__lista .menu {
  display: flex;
}

.navegacao__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--esp-2);
  padding: 0 var(--esp-3);
  border: 0;
  background: transparent;
  color: var(--cor-texto-secundario);
  font-size: var(--texto-md);
  font-weight: var(--peso-medio);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--duracao-rapida) var(--curva-padrao);
}

.navegacao__link > .icone {
  color: var(--cor-texto-terciario);
  transition: color var(--duracao-rapida) var(--curva-padrao);
}

.navegacao__link:hover {
  color: var(--cor-texto);
  text-decoration: none;
}

.navegacao__link:hover > .icone {
  color: var(--cor-marca-texto);
}

.navegacao__link[aria-current="page"],
.navegacao__link--ativo {
  color: var(--cor-texto);
  font-weight: var(--peso-semi);
}

/* Filete dourado sob o item ativo (as referências visuais aprovadas); nasce da esquerda. */
.navegacao__link[aria-current="page"]::after,
.navegacao__link--ativo::after {
  content: "";
  position: absolute;
  left: var(--esp-2);
  right: var(--esp-2);
  bottom: -1px;
  height: var(--filete);
  border-radius: var(--raio-xs) var(--raio-xs) 0 0;
  background: var(--cor-marca);
  transform-origin: left center;
  animation: filete-crescer var(--duracao-media) var(--curva-padrao);
}

.navegacao__link[aria-current="page"] .icone,
.navegacao__link--ativo .icone {
  color: var(--cor-marca-texto);
}

.navegacao__link:focus-visible,
.navegacao__seletor:focus-visible {
  outline-offset: -2px;
}

.navegacao .menu__painel {
  top: calc(100% - var(--esp-1));
}

/* Selo de demonstração dentro da gaveta: no celular o selo do cabeçalho não cabe. */
.navegacao__ambiente {
  display: none;
  margin: 0 0 var(--esp-2);
}

.navegacao .menu__item[aria-current] {
  background: var(--cor-marca-fundo);
  font-weight: var(--peso-semi);
}

/* ---------------- Conteúdo ---------------- */
/* O rodapé encosta na base da janela mesmo quando a página é curta: o conteúdo ocupa pelo
   menos a altura que sobra abaixo do topo fixo, e o miolo empurra o rodapé para baixo. */
.conteudo {
  min-width: 0;
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - var(--altura-topo));
}

.conteudo__interno {
  width: 100%;
  max-width: var(--largura-conteudo);
  margin: 0 auto;
  padding: var(--esp-6) var(--esp-8) var(--esp-12);
  flex: 1 0 auto;
}

.conteudo__interno--estreito {
  max-width: calc(var(--largura-formulario) + 2 * var(--esp-8));
}

.rodape {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-4);
  /* Texto alinhado à coluna do conteúdo; o filete ocupa a largura toda. */
  padding: var(--esp-4) max(var(--esp-8), calc((100% - var(--largura-conteudo)) / 2 + var(--esp-8)));
  border-top: var(--borda);
  color: var(--cor-texto-terciario);
  font-size: var(--texto-xs);
}

/* ---------------- Cabeçalho da página ---------------- */
.migalhas {
  margin-bottom: var(--esp-3);
  font-size: var(--texto-sm);
}

.migalhas ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.migalhas li {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  color: var(--cor-texto-secundario);
}

.migalhas li + li::before {
  content: "";
  width: 0.3rem;
  height: 0.3rem;
  margin: 0 var(--esp-1);
  border-right: 1.5px solid var(--cor-texto-terciario);
  border-bottom: 1.5px solid var(--cor-texto-terciario);
  transform: rotate(-45deg);
}

.migalhas a {
  display: inline-flex;
  align-items: center;
  min-height: var(--alvo-minimo);
  color: var(--cor-texto-secundario);
  text-decoration: none;
}

.migalhas a:hover {
  color: var(--cor-texto);
  text-decoration: underline;
}

.migalhas [aria-current="page"] {
  color: var(--cor-texto);
  font-weight: var(--peso-medio);
}

/* O cabeçalho de página fecha com um fio e um traço dourado curto — a mesma
   assinatura do cabeçalho institucional, em escala de página. */
/* Placa, título e ações na mesma linha de base; o que a página é fica nas migalhas. */
.pagina-cabecalho {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3) var(--esp-4);
  padding-bottom: var(--esp-4);
  margin-bottom: var(--esp-6);
}

/* Sem régua atravessando a página: fica só o filete da marca, o mesmo do menu. */
.pagina-cabecalho::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 3rem;
  height: var(--filete-fino);
  background: var(--cor-marca);
}

.pagina-cabecalho__icone {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border: 1px solid var(--cor-marca-borda);
  border-radius: var(--raio-lg);
  background: linear-gradient(180deg, var(--cor-superficie), var(--cor-marca-fundo));
  color: var(--cor-marca-texto);
  box-shadow: var(--sombra-1);
  flex: none;
}

.pagina-cabecalho__texto {
  flex: 1 1 18rem;
  min-width: 0;
}

.pagina-cabecalho__sobretitulo {
  margin-bottom: var(--esp-1);
  color: var(--cor-marca-texto);
}

.pagina-cabecalho__titulo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-3);
  font-size: var(--texto-3xl);
  font-weight: var(--peso-semi);
  letter-spacing: var(--rastreio-titulo);
}

.pagina-cabecalho__descricao {
  margin-top: var(--esp-1);
  color: var(--cor-texto-secundario);
  max-width: var(--largura-leitura);
}

.pagina-cabecalho__acoes {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--esp-2);
  align-items: center;
  align-self: center;
}

/* ---------------- Grades de página ---------------- */
.grade {
  display: grid;
  gap: var(--esp-4);
}

.grade--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Indicadores do painel: quatro em telas largas, dois a dois abaixo (inclusive no celular,
   onde empilhar quatro cartões empurrava a lista para fora da primeira tela). */
.grade--kpi { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Detalhe: conteúdo principal + coluna de contexto. */
.layout-detalhe {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: var(--esp-6);
  align-items: start;
}

.layout-detalhe__lateral {
  position: sticky;
  top: calc(var(--altura-topo) + var(--esp-4));
  display: grid;
  gap: var(--esp-4);
}

/* Barra de ações fixa no rodapé de formulários longos. O scroll-padding garante que
   o campo focado nunca fique escondido atrás dela (WCAG 2.4.11). */
html:has(.barra-acoes:not(.barra-acoes--rodape)) {
  scroll-padding-bottom: 7rem;
}

/* Com a faixa de progresso fixa, a rolagem até um campo/âncora desconta também a faixa. */
html:has(.progresso--fixo) {
  scroll-padding-top: calc(var(--altura-topo) + 4rem);
}

/* O fim da página nunca fica atrás da barra flutuante. A barra é `sticky` e já ocupa o seu
   lugar no fluxo, então basta o respiro dela — não mais uma faixa vazia depois do conteúdo. */
html:has(.barra-acoes:not(.barra-acoes--rodape)) .conteudo__interno {
  padding-bottom: var(--esp-6);
}

.barra-acoes {
  position: sticky;
  bottom: var(--esp-3);
  z-index: var(--z-barra-acoes);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-3);
  margin-top: var(--esp-6);
  padding: var(--esp-3) var(--esp-3) var(--esp-3) var(--esp-5);
  border-radius: var(--raio-xl);
  background: var(--cor-superficie-elevada);
  box-shadow: var(--sombra-flutuante);
}

/* Sem status no meio (barra só de botões): quem sai fica à esquerda e o resto à direita. */
.barra-acoes > .botao--texto:first-child {
  margin-right: auto;
}

/* Grupo trocado por inteiro pela busca ao vivo (status + ação que depende do recorte):
   para o layout da barra, os filhos continuam sendo filhos diretos. */
.barra-acoes__conteudo {
  display: contents;
}

/* Base 0: o texto do status quebra linha antes de empurrar os botões para baixo. */
/* Rodapé de lista (cadastros): a ação "Novo…" fica no fim da lista, como na referência, e
   não flutua por cima das linhas (a barra fixa cobriria o menu da última linha visível). */
.barra-acoes--rodape {
  position: static;
}

.barra-acoes__status {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: var(--esp-2);
  color: var(--cor-texto-secundario);
  font-size: var(--texto-sm);
}

.barra-acoes__status > .icone {
  color: var(--cor-sucesso);
}

/* Recém-salvo: o ícone carimba e o texto fica verde por um instante — a barra é a
   confirmação, não um toast. */
.barra-acoes__status--salvo {
  color: var(--cor-sucesso);
}

.barra-acoes__status--salvo > .icone {
  animation: carimbar var(--duracao-enfase) var(--curva-expressiva) both;
}

.barra-acoes__status--sujo {
  color: var(--cor-aviso);
  font-weight: var(--peso-semi);
}

/* A gravação automática não pôde gravar: o motivo fica à vista (também no celular). */
.barra-acoes__status--erro {
  color: var(--cor-perigo);
  font-weight: var(--peso-semi);
}

.barra-acoes__status--sujo::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--raio-pilula);
  background: var(--cor-aviso-solida);
  animation: pulsar 1.6s var(--curva-suave) infinite;
}

/* ---------------- Página de erro ---------------- */
.pagina-erro {
  display: grid;
  place-items: center;
  min-height: 60vh;
  text-align: center;
}

.pagina-erro__codigo {
  font-size: var(--texto-4xl);
  font-weight: var(--peso-forte);
  color: var(--cor-marca-texto);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--rastreio-display);
}

/* ================= Responsivo ================= */
@media (min-width: 1024px) {
  .pagina-cabecalho__titulo { font-size: var(--texto-display); }
}

@media (max-width: 1279.98px) {
  .conteudo__interno { padding: var(--esp-6) var(--esp-6) var(--esp-12); }
  .navegacao__interno { padding: 0 var(--esp-6); }
  .perfil__texto, .busca-global__atalho, .marca__subtitulo { display: none; }
  .layout-detalhe { grid-template-columns: minmax(0, 1fr) 17rem; }
  .grade--4, .grade--kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 768px) {
  .cabecalho__menu--gaveta { display: none; }
  html { scroll-padding-top: calc(var(--altura-topo) + var(--esp-4)); }
}

/* Tablet: o mesmo menu superior horizontal, só mais compacto (ADR 0006). */
@media (min-width: 768px) and (max-width: 1023.98px) {
  .navegacao__lista { margin-left: var(--esp-2); }
  .navegacao__link { padding: 0 var(--esp-2); }
  .navegacao__seletor { font-size: var(--texto-md); }
}

@media (max-width: 1023.98px) {
  .barra-acoes__secundario { display: none; }
  .layout-detalhe { grid-template-columns: minmax(0, 1fr); }
  .layout-detalhe__lateral { position: static; }
  .grade--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
  /* Celular (D9): o ☰ abre o menu numa gaveta lateral TEMPORÁRIA, sob o cabeçalho. Começa
     fechada e fecha ao escolher, com Esc ou tocando fora — nunca fica fixa (ADR 0006). */
  .navegacao {
    position: fixed;
    top: var(--altura-cabecalho);
    bottom: 0;
    left: 0;
    z-index: var(--z-gaveta);
    width: min(20rem, 86vw);
    overflow-y: auto;
    border-right: var(--borda);
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform var(--duracao-media) var(--curva-padrao),
      visibility 0s linear var(--duracao-media);
    box-shadow: var(--sombra-4);
  }

  .shell--gaveta-aberta .navegacao {
    transform: none;
    visibility: visible;
    transition: transform var(--duracao-media) var(--curva-padrao);
  }

  .navegacao__interno {
    flex-direction: column;
    align-items: stretch;
    height: auto;
    margin: 0;
    padding: var(--esp-3) var(--esp-4) var(--esp-4);
  }

  .navegacao__ambiente { display: block; }

  .navegacao__lista {
    flex-direction: column;
    margin: var(--esp-2) 0 0;
  }

  .navegacao__lista > li,
  .navegacao__lista .menu {
    display: block;
  }

  .navegacao__link {
    width: 100%;
    min-height: var(--altura-controle-lg);
    border-radius: var(--raio-md);
  }

  .navegacao__link:hover {
    background: var(--cor-superficie-sutil);
  }

  .navegacao__link[aria-current="page"],
  .navegacao__link--ativo {
    background: var(--cor-marca-fundo);
  }

  .navegacao__link[aria-current="page"]::after,
  .navegacao__link--ativo::after {
    left: 0;
    right: auto;
    top: var(--esp-2);
    bottom: var(--esp-2);
    width: var(--filete);
    height: auto;
    border-radius: 0 var(--raio-xs) var(--raio-xs) 0;
    transform-origin: center top;
  }

  /* Na gaveta, os grupos abrem embutidos (sem flutuar). */
  .navegacao .menu__painel {
    position: static;
    margin: 0 0 var(--esp-2) var(--esp-4);
    box-shadow: none;
    border: 0;
    border-left: var(--borda);
    border-radius: 0;
    animation: none;
  }

  /* O véu fica sob o topo (cabeçalho + gaveta), senão cobriria os próprios links. */
  .shell__veu {
    position: fixed;
    inset: var(--altura-cabecalho) 0 0 0;
    z-index: calc(var(--z-cabecalho) - 1);
    background: var(--cor-veu);
    backdrop-filter: blur(var(--desfoque-veu));
    animation: aparecer var(--duracao-media) var(--curva-padrao);
  }

  .cabecalho { gap: var(--esp-2); padding: 0 var(--esp-2); }
  .marca__divisor, .marca__produto, .perfil__texto { display: none; }
  .marca__brasao { width: 2.25rem; height: 2.25rem; }
  .cabecalho__busca { justify-content: flex-end; }
  .busca-global { width: var(--altura-controle); padding: 0; justify-content: center; }
  .busca-global__texto, .busca-global__atalho { display: none; }
  .conteudo__interno { padding: var(--esp-4) var(--esp-4) var(--esp-12); }
  .rodape { padding: var(--esp-4); }
  .pagina-cabecalho { margin-bottom: var(--esp-4); padding-bottom: var(--esp-4); }
  .pagina-cabecalho__icone { display: none; }
  .pagina-cabecalho__titulo { font-size: var(--texto-2xl); }
  .pagina-cabecalho__acoes { width: 100%; }
  .grade--2, .grade--3, .grade--4 { grid-template-columns: minmax(0, 1fr); }
  .grade--kpi { gap: var(--esp-2); }
  .grade--kpi .indicador { padding: var(--esp-3); gap: var(--esp-05); }
  .grade--kpi .indicador__valor { font-size: var(--texto-2xl); }
  .grade--kpi .indicador__nota { display: none; }
  /* Barra compacta no celular: uma linha, rótulos curtos, status só quando há algo a avisar. */
  .barra-acoes {
    flex-wrap: nowrap;
    gap: var(--esp-2);
    bottom: var(--esp-2);
    margin-left: calc(-1 * var(--esp-2));
    margin-right: calc(-1 * var(--esp-2));
    padding: var(--esp-2);
  }
  .barra-acoes__status:not(.barra-acoes__status--sujo):not(.barra-acoes__status--erro) { display: none; }
  /* O aviso de "não salvo" flutua acima da barra: aparecer não pode mover os botões
     (o aviso surge ao sair do campo — exatamente quando o dedo vai para "Salvar"). */
  .barra-acoes__status--sujo {
    position: absolute;
    inset: auto var(--esp-2) calc(100% + var(--esp-1)) var(--esp-2);
    padding: var(--esp-1) var(--esp-3);
    border: 1px solid var(--cor-aviso-borda);
    border-radius: var(--raio-md);
    background: var(--cor-aviso-fundo);
    box-shadow: var(--sombra-2);
    animation: aparecer var(--duracao-media) var(--curva-padrao) backwards;
  }
  .barra-acoes__status--erro {
    position: absolute;
    inset: auto var(--esp-2) calc(100% + var(--esp-1)) var(--esp-2);
    padding: var(--esp-1) var(--esp-3);
    border: 1px solid var(--cor-perigo-borda);
    border-radius: var(--raio-md);
    background: var(--cor-perigo-fundo);
    box-shadow: var(--sombra-2);
  }
  .barra-acoes__status { font-size: var(--texto-xs); }
  .barra-acoes__extra { display: none; }
  .barra-acoes .botao { flex: 1 1 0; padding: 0 var(--esp-2); }
  /* "Mais" (componentes/menu_mais.html): o menu é o item da barra; o botão o preenche. */
  .barra-acoes > .barra-acoes__mais { display: flex; flex: 1 1 0; }
  .barra-acoes > .barra-acoes__mais > .botao { width: 100%; }
}

@media (max-width: 479.98px) {
  .marca__sigla { font-size: var(--texto-xl); }
  .cabecalho__ambiente { display: none; }
}

.texto-acesso {
  gap: var(--esp-2);
  color: var(--shell-filete-claro);
}

/* Volta ao trabalho: aparece quando se chega a uma área vindo de outra (ver
   `navegacao.pagina_anterior`). Fica na linha das migalhas, à direita, porque é desvio —
   não faz parte da hierarquia que as migalhas descrevem. */
.migalhas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--esp-2) var(--esp-4);
}

.migalhas ol {
  flex: 1 1 auto;
}

.migalhas__voltar {
  display: inline-flex;
  align-items: center;
  gap: var(--esp-1);
  color: var(--cor-marca-texto);
  font-weight: var(--peso-medio);
  text-decoration: none;
}

.migalhas__voltar:hover {
  text-decoration: underline;
}

/* "Voltar para …": atalho flutuante para a tarefa que ficou aberta em outra tela. Fica no
   canto inferior esquerdo, oposto às ações da própria página (que moram à direita), e
   acompanha a pessoa enquanto o desvio durar. */
.voltar-tarefa {
  position: fixed;
  z-index: var(--z-barra-acoes);
  bottom: var(--esp-4);
  left: var(--esp-4);
  box-shadow: var(--sombra-flutuante);
}

@media (max-width: 767.98px) {
  /* No celular a barra de ações ocupa a largura toda: o atalho sobe para não cobri-la. */
  .voltar-tarefa {
    bottom: calc(var(--esp-4) + var(--altura-controle) + var(--esp-4));
  }
}