/* Base: reinício leve, tipografia e a estrutura da página (barra, lateral, conteúdo). */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--fonte);
  font-size: var(--texto-corpo);
  line-height: 1.5;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, p, ul, ol, blockquote, figure { margin: 0; }
h1 { font-size: var(--texto-titulo-grande); line-height: 1.15; letter-spacing: -0.022em; font-weight: 700; text-wrap: balance; }
h2 { font-size: var(--texto-titulo); line-height: 1.25; letter-spacing: -0.012em; font-weight: 650; }
h3 { font-size: var(--texto-subtitulo); line-height: 1.3; font-weight: 600; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--destaque); text-underline-offset: 2px; }
a:hover { color: var(--destaque-forte); }
strong { font-weight: 600; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--destaque); outline-offset: 2px; border-radius: 4px; }

.pular {
  position: absolute; left: var(--espaco-2); top: var(--espaco-2); z-index: 30;
  padding: var(--espaco-2) var(--espaco-3); border-radius: var(--raio-pequeno);
  background: var(--superficie); color: var(--destaque); font-weight: 600;
  transform: translateY(-200%);
}
.pular:focus { transform: none; }

.so-leitor {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ---------- barra superior (camada funcional: único lugar com desfoque) ---------- */
.barra {
  position: sticky; top: 0; z-index: 20;
  background: var(--barra);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--separador);
}
.barra-conteudo {
  max-width: var(--largura-maxima); margin: 0 auto;
  padding: var(--espaco-2) var(--espaco-5);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--espaco-2) var(--espaco-4);
  min-height: 56px;
}
.marca { display: flex; align-items: center; gap: var(--espaco-3); text-decoration: none; color: var(--texto); margin-right: auto; }
.marca-icone {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: var(--destaque-preenchido); color: var(--sobre-destaque);
  display: grid; place-items: center;
}
.marca-nome { font-weight: 650; font-size: var(--texto-subtitulo); letter-spacing: -0.01em; white-space: nowrap; }
.barra-grupo { display: flex; align-items: center; gap: var(--espaco-2); min-width: 0; }
.barra-grupo select { max-width: 220px; }

.situacao { font-size: var(--texto-apoio); color: var(--texto-2); display: inline-flex; align-items: center; gap: var(--espaco-2); min-height: 32px; }
.situacao.erro { color: var(--erro); font-weight: 600; }
.situacao .ponto { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: none; }
.situacao.salvo .ponto { background: var(--sucesso); }

/* ---------- estrutura ---------- */
.corpo {
  max-width: var(--largura-maxima); margin: 0 auto;
  display: grid; grid-template-columns: var(--largura-lateral) minmax(0, 1fr);
  gap: var(--espaco-6); padding: var(--espaco-6) var(--espaco-5) var(--espaco-7);
  align-items: start;
}
.lateral { position: sticky; top: 88px; display: flex; flex-direction: column; gap: var(--espaco-5); }
.lateral-grupo { display: flex; flex-direction: column; gap: 2px; }
.lateral-titulo { font-size: var(--texto-legenda); font-weight: 600; color: var(--texto-2); padding: 0 var(--espaco-3) var(--espaco-1); }
.lateral a {
  display: flex; align-items: center; min-height: 36px; padding: 0 var(--espaco-3);
  border-radius: var(--raio-pequeno); color: var(--texto); text-decoration: none;
  font-size: var(--texto-apoio); font-weight: 500;
  transition: background-color var(--duracao) var(--curva);
}
.lateral a:hover { background: var(--superficie-2); }
.lateral a[aria-current="page"] { background: var(--destaque-suave); color: var(--destaque); font-weight: 600; }

main { min-width: 0; }
/* O conteúdo recebe foco por código a cada troca de tela (leitores de tela); não precisa de anel. */
main:focus, main:focus-visible { outline: none; }
.rodape {
  max-width: var(--largura-maxima); margin: 0 auto;
  padding: 0 var(--espaco-5) var(--espaco-7);
  font-size: var(--texto-legenda); color: var(--texto-2);
}

.cabecalho-pagina { max-width: 68ch; margin-bottom: var(--espaco-5); display: flex; flex-direction: column; gap: var(--espaco-2); }
.cabecalho-pagina p { color: var(--texto-2); font-size: var(--texto-subtitulo); line-height: 1.45; }

.colunas { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: var(--espaco-5); align-items: start; }
.coluna { display: flex; flex-direction: column; gap: var(--espaco-4); min-width: 0; }

/* ---------- tela de entrada ---------- */
.entrada { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--espaco-5); }
.entrada-caixa { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: var(--espaco-5); }
.entrada-topo { display: flex; flex-direction: column; align-items: center; gap: var(--espaco-3); text-align: center; }
.entrada-topo .marca-icone { width: 56px; height: 56px; border-radius: 15px; }
.entrada-topo p { color: var(--texto-2); }
.entrada-nota { font-size: var(--texto-legenda); color: var(--texto-2); text-align: center; }

/* ---------- telas menores ---------- */
@media (max-width: 1020px) {
  .colunas { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .corpo { grid-template-columns: minmax(0, 1fr); gap: var(--espaco-4); padding: var(--espaco-4) var(--espaco-4) var(--espaco-6); }
  .barra-conteudo { padding: var(--espaco-2) var(--espaco-4); }
  .rodape { padding: 0 var(--espaco-4) var(--espaco-6); }
  /* A lateral vira uma faixa rolável: todas as seções continuam visíveis e alcançáveis. */
  .lateral {
    position: static; flex-direction: row; gap: var(--espaco-2);
    overflow-x: auto; margin: 0 calc(var(--espaco-4) * -1); padding: 0 var(--espaco-4) var(--espaco-2);
    scrollbar-width: thin;
  }
  .lateral-grupo { flex-direction: row; gap: var(--espaco-2); }
  .lateral-titulo { display: none; }
  .lateral a { min-height: var(--alvo-minimo); white-space: nowrap; background: var(--superficie); padding: 0 var(--espaco-4); border-radius: 999px; }
  .barra-grupo select { max-width: 160px; }
}

@media print {
  .barra, .lateral, .rodape, .botao, .nao-imprimir { display: none !important; }
  body { background: #fff; color: #000; }
  .corpo { display: block; padding: 0; }
}