/* Moldura do molde AST: rail, painel do menu, topo do celular e topo da página.
   Medidas: auditoria de referência de 09/10/2026 em docs/pesquisa. Cores só pelas variáveis de tokens.css.
   Celular primeiro: abaixo de 768 px o rail some e entra a barra de 60 px.
   O respiro lateral do conteúdo é da .ast-corpo (base.css); aqui só o recuo do menu,
   como margem do invólucro do conteúdo (main ou [data-ast-conteudo]). */

.ast-rail, .ast-rail *, .ast-painel-menu, .ast-painel-menu *,
.ast-topo-celular, .ast-topo-celular *, .ast-veu-menu, .ast-topo, .ast-topo * {
  box-sizing: border-box;
}

body.ast-com-moldura { padding-top: var(--ast-topo-celular); }

/* Rail: cartão de 56 px recuado 8 px, fora do fluxo para o padding do body não o mover. */
.ast-rail {
  display: none;
  position: fixed;
  z-index: var(--ast-z-rail);
  top: 8px;
  bottom: 8px;
  left: 8px;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: var(--ast-rail);
  padding: 32px 8px 16px;
  border-radius: var(--ast-raio-grande);
  background: var(--ast-menu-rail);
  color: var(--ast-dica-texto);
  font-family: var(--ast-fonte-menu);
}

body.ast-menu-aberto .ast-rail,
body.ast-menu-fixado .ast-rail {
  border-radius: var(--ast-raio-grande) 0 0 var(--ast-raio-grande);
}

.ast-rail-marca {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  margin-bottom: 32px;
  border: 1px solid var(--ast-primaria);
  border-radius: 10px;
  color: var(--ast-primaria);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* A sobra de 4 px dos lados deixa o anel de foco à vista dentro da área que rola. */
.ast-rail-areas {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-height: 0;
  margin: 0 -4px;
  padding: 2px 4px;
  overflow-y: auto;
  scrollbar-width: none;
}

.ast-rail-area,
.ast-rail-pe-botao {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 20px;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}

.ast-rail-area:hover,
.ast-rail-area[aria-expanded="true"],
.ast-rail-pe-botao:hover {
  background: var(--ast-primaria-hover);
  color: var(--ast-texto-sobre-primaria);
}

.ast-rail-area.ast-ativo {
  background: var(--ast-primaria);
  color: var(--ast-texto-sobre-primaria);
}

.ast-rail-area:focus-visible,
.ast-rail-pe-botao:focus-visible,
.ast-avatar:focus-visible,
.ast-topo-celular-botao:focus-visible {
  outline: none;
  box-shadow: var(--ast-sombra-anel);
}

.ast-rail-pe {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.ast-rail .ast-avatar-caixa,
.ast-rail .ast-rail-pe > .ast-avatar { margin-top: 8px; }

.ast-tema-auto { opacity: .6; }

/* Dica do menu novo: colada ao ícone, sem animação. */
.ast-rail [data-tooltip]:hover::after,
.ast-rail [data-tooltip]:focus-visible::after {
  content: attr(data-tooltip);
  position: absolute;
  z-index: var(--ast-z-dica-menu);
  top: 50%;
  left: calc(100% + 16px);
  min-height: 24px;
  padding: 4px 8px;
  border-radius: var(--ast-raio-pequeno);
  background: var(--ast-menu-fundo);
  color: var(--ast-menu-titulo);
  box-shadow: var(--ast-sombra-dica-menu);
  font: 500 var(--ast-fs-dica-menu)/16px var(--ast-fonte-menu);
  white-space: nowrap;
  pointer-events: none;
  transform: translateY(-50%);
}

/* Sino e avatar */
.ast-sino .ast-sino-contagem {
  position: absolute;
  top: 2px;
  right: 0;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 9px;
  background: var(--ast-perigo);
  color: var(--ast-texto-sobre-primaria);
  font-size: 10px;
}

.ast-avatar {
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--ast-primaria);
  color: var(--ast-texto-sobre-primaria);
  font: 600 13px/1 var(--ast-fonte-menu);
  cursor: pointer;
}

span.ast-avatar { cursor: default; }
button.ast-avatar:hover { background: var(--ast-primaria-hover); }
.ast-avatar-caixa { position: relative; }

.ast-rail .ast-menu-suspenso {
  top: auto;
  right: auto;
  bottom: 0;
  left: calc(100% + 16px);
}

/* Painel do menu: no celular é a gaveta por cima do conteúdo; a partir de 768, o flyout de 241 px.
   Abre em 0,3 s; ao fechar some de uma vez (a transição só existe no estado aberto). */
.ast-painel-menu {
  position: fixed;
  z-index: calc(var(--ast-z-rail) - 1);
  top: var(--ast-topo-celular);
  bottom: 0;
  left: 0;
  display: flex;
  width: min(320px, calc(100vw - 56px));
  background: var(--ast-menu-fundo);
  color: var(--ast-menu-item);
  box-shadow: var(--ast-sombra-painel-menu);
  font-family: var(--ast-fonte-menu);
  visibility: hidden;
  opacity: 0;
  transform: translateX(-12px);
}

.ast-painel-menu.ast-aberto {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: opacity .3s var(--ast-curva-menu), transform .3s var(--ast-curva-menu);
}

.ast-painel-coluna {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}

/* Áreas da gaveta do celular: quebram em linhas para todas ficarem à vista, sem rolagem lateral. */
.ast-painel-areas {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--ast-menu-borda);
}

.ast-painel-area {
  display: inline-flex;
  align-items: center;
  flex: none;
  gap: 6px;
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--ast-menu-borda);
  border-radius: var(--ast-raio-botao);
  background: none;
  color: var(--ast-menu-item);
  font: inherit;
  font-size: var(--ast-fs-menu);
  cursor: pointer;
}

.ast-painel-area .ast-icone { font-size: 16px; }

.ast-painel-area.ast-ativo {
  border-color: var(--ast-menu-ativo-fundo);
  background: var(--ast-menu-ativo-fundo);
  color: var(--ast-menu-ativo-texto);
}

.ast-painel-cabecalho {
  display: flex;
  align-items: center;
  flex: none;
  gap: 6px;
  min-height: 48px;
  margin: 0;
  padding: 0 16px;
  border-bottom: 1px solid var(--ast-menu-borda);
  color: var(--ast-menu-titulo);
  font-size: var(--ast-fs-menu);
  font-weight: 600;
  line-height: 20px;
}

.ast-painel-itens {
  flex: 1;
  min-height: 0;
  padding: 8px;
  overflow-y: auto;
}

.ast-painel-grupo[hidden] { display: none; }

.ast-painel-item {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 40px;
  margin: 0 0 8px;
  padding: 10px 12px;
  border: 0;
  border-radius: var(--ast-raio-menu-item);
  background: none;
  color: var(--ast-menu-item);
  font: inherit;
  font-size: var(--ast-fs-menu);
  font-weight: 400;
  line-height: 20px;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s, color .15s, transform .15s;
}

.ast-painel-item .ast-icone { font-size: 16px; }

.ast-painel-item:hover,
.ast-painel-item:focus-visible,
.ast-painel-item.ast-ativo,
.ast-painel-subgrupo[aria-expanded="true"] {
  background: var(--ast-menu-ativo-fundo);
  color: var(--ast-menu-ativo-texto);
  text-decoration: none;
}

.ast-painel-item:hover { transform: translateX(4px); }

.ast-painel-item:focus-visible,
.ast-painel-area:focus-visible,
.ast-painel-voltar:focus-visible,
.ast-menu-interruptor:focus-visible {
  outline: none;
  box-shadow: var(--ast-sombra-anel);
}

.ast-painel-rotulo {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ast-painel-selo {
  flex: none;
  height: 21px;
  padding: 2px 8px;
  border-radius: var(--ast-raio-selo);
  background: var(--ast-menu-selo-verde);
  color: var(--ast-dica-texto);
  font-size: var(--ast-fs-selo);
  font-weight: 500;
  line-height: 17px;
}

.ast-painel-seta { margin-left: auto; }

/* "Fixar menu" fica no rodapé do painel, como no modelo de referência; no celular não existe. */
.ast-painel-rodape {
  display: none;
  flex: none;
  padding: 12px 16px 20px;
  border-top: 1px solid var(--ast-menu-borda);
}

.ast-painel-fixar {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ast-menu-item);
  font-size: var(--ast-fs-menu);
  cursor: pointer;
}

.ast-menu-interruptor {
  appearance: none;
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  margin: 0;
  border: 1px solid var(--ast-menu-int-off-borda);
  border-radius: 12px;
  background: var(--ast-menu-int-off-trilho);
  cursor: pointer;
  transition: background-color .2s ease-out, border-color .2s ease-out;
}

.ast-menu-interruptor::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--ast-menu-int-bolinha);
  transition: transform .2s ease-out;
}

.ast-menu-interruptor:checked {
  border-color: var(--ast-menu-int-on-trilho);
  background: var(--ast-menu-int-on-trilho);
}

.ast-menu-interruptor:checked::after {
  background: var(--ast-texto-sobre-primaria);
  transform: translateX(16px);
}

/* Segunda coluna: no celular cobre a gaveta, com botão de voltar; a partir de 768 sai ao lado. */
.ast-painel-segunda {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--ast-menu-fundo);
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s var(--ast-curva-menu), visibility .25s;
}

/* Só com o painel aberto (ou fixado): um filho visível dentro do painel escondido voltaria a
   receber cliques por cima do conteúdo. */
.ast-painel-menu.ast-aberto.ast-com-segunda .ast-painel-segunda,
body.ast-menu-fixado .ast-painel-menu.ast-com-segunda .ast-painel-segunda {
  visibility: visible;
  opacity: 1;
}

/* Quando o painel fecha, ele some de uma vez e a segunda coluna vai junto, sem esmaecer sozinha. */
.ast-painel-menu:not(.ast-aberto) .ast-painel-segunda { transition: none; }

.ast-painel-segunda-conteudo {
  display: flex;
  flex: 1;
  flex-direction: column;
  width: 100%;
  min-height: 0;
}

.ast-painel-voltar {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: -8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  font-size: 16px;
  cursor: pointer;
}

/* Véu da gaveta do celular */
.ast-veu-menu { display: none; }

body.ast-menu-aberto .ast-veu-menu {
  display: block;
  position: fixed;
  z-index: calc(var(--ast-z-rail) - 2);
  inset: var(--ast-topo-celular) 0 0;
  background: var(--ast-veu);
  opacity: var(--ast-veu-opacidade);
}

/* Topo do celular: barra de 60 px, fora do fluxo. */
.ast-topo-celular {
  position: fixed;
  z-index: var(--ast-z-rail);
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--ast-topo-celular);
  padding: 0 16px;
  background: var(--ast-menu-rail);
  color: var(--ast-dica-texto);
  font-family: var(--ast-fonte-menu);
}

.ast-topo-celular-marca {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.ast-topo-celular-espaco { flex: 1; }

.ast-topo-celular-botao,
.ast-topo-celular .ast-sino {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: inherit;
  font: inherit;
  font-size: 20px;
  cursor: pointer;
}

.ast-topo-celular-botao[aria-expanded="true"] {
  background: var(--ast-primaria);
  color: var(--ast-texto-sobre-primaria);
}

.ast-hamburguer { line-height: 1; }

.ast-topo-celular .ast-avatar {
  width: 28px;
  height: 28px;
  font-size: 10px;
}

/* Topo da página: trilha e ações na faixa de 50 px, título abaixo. */
.ast-topo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "trilha" "titulo" "acoes";
  align-items: center;
  gap: 10px;
  padding: 16px 0 10px;
}

.ast-topo .ast-trilha {
  grid-area: trilha;
  margin: 0;
  font-size: var(--ast-fs-trilha);
}

.ast-topo .ast-trilha > :last-child { color: var(--ast-texto-titulo); }
.ast-trilha-separador { color: var(--ast-texto-apagado); }
.ast-topo .ast-titulo-pagina { grid-area: titulo; }

.ast-topo-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  grid-area: acoes;
}

.ast-topo-mais { position: relative; }

.ast-mais-circulo {
  display: inline-grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-right: -14px;
  border-radius: 50%;
  background: var(--ast-bg-pilula-icone);
}

@media (min-width: 768px) {
  body.ast-com-moldura { padding-top: 0; }

  .ast-rail { display: flex; }

  .ast-topo-celular,
  body.ast-menu-aberto .ast-veu-menu { display: none; }

  .ast-painel-menu {
    top: 8px;
    bottom: 8px;
    left: var(--ast-recuo);
    width: var(--ast-painel-menu);
    border-radius: 0 var(--ast-raio-grande) var(--ast-raio-grande) 0;
  }

  .ast-painel-menu.ast-com-segunda { border-radius: 0; }

  body.ast-menu-fixado .ast-painel-menu {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity .3s var(--ast-curva-menu), transform .3s var(--ast-curva-menu);
  }

  .ast-painel-areas { display: none; }
  .ast-painel-rodape { display: flex; }

  .ast-painel-segunda {
    inset: 0 auto 0 100%;
    width: 0;
    overflow: hidden;
    border-left: 1px solid var(--ast-menu-borda);
    border-radius: 0 var(--ast-raio-grande) var(--ast-raio-grande) 0;
    box-shadow: var(--ast-sombra-painel-menu);
    transition: width .25s var(--ast-curva-menu), opacity .25s var(--ast-curva-menu), visibility .25s;
  }

  .ast-painel-menu.ast-com-segunda .ast-painel-segunda { width: var(--ast-coluna-menu); }

  .ast-painel-segunda-conteudo {
    flex: none;
    width: var(--ast-coluna-menu);
  }

  .ast-painel-voltar { display: none; }

  /* Recuo do menu no invólucro do conteúdo; o conteúdo pula sem animação, como no modelo de referência. */
  body.ast-com-moldura > main,
  body.ast-com-moldura > [data-ast-conteudo],
  body.ast-com-moldura > .ast-topo { margin-left: var(--ast-recuo); }

  body.ast-menu-fixado > main,
  body.ast-menu-fixado > [data-ast-conteudo],
  body.ast-menu-fixado > .ast-topo { margin-left: var(--ast-recuo-fixo); }

  /* Barras fixas de base.css: o painel fixado (z acima de 970) cobriria a ponta esquerda delas. */
  body.ast-menu-fixado .ast-rodape-totais,
  body.ast-menu-fixado .ast-barra-selecao { left: var(--ast-recuo-fixo); }

  .ast-topo {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: 50px auto;
    grid-template-areas: "trilha acoes" "titulo titulo";
    padding-top: 0;
  }

  .ast-topo-acoes { justify-content: flex-end; }
}

@media (prefers-reduced-motion: reduce) {
  body.ast-corpo *,
  body.ast-corpo *::before,
  body.ast-corpo *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* Impressão vem depois de todas as regras de display do molde. */
@media print {
  body .ast-rail,
  body .ast-painel-menu,
  body .ast-veu-menu,
  body .ast-topo-celular,
  body .ast-barra-selecao,
  body .ast-rodape-totais { display: none; }

  body.ast-com-moldura { padding-top: 0; }
  body.ast-com-moldura > main,
  body.ast-com-moldura > [data-ast-conteudo],
  body.ast-com-moldura > .ast-topo { margin-left: 0; }
}