/* Casca da aplicação: menu lateral flutuante de vidro, menu "na logo", barra superior, gaveta móvel.
   Trocar posição/densidade só muda atributos no <html>; o conteúdo aberto não é remontado (MEN-03). */

.app {
  display: grid;
  grid-template-columns: var(--menu-atual, var(--menu-largo)) minmax(0, 1fr);
  min-height: 100dvh;
  transition: grid-template-columns var(--mov) var(--curva);
}
html[data-menu-density="collapsed"] .app { --menu-atual: var(--menu-estreito); }
html[data-menu="logo"] .app { grid-template-columns: minmax(0, 1fr); }
html[data-menu="logo"] .barra-lateral { display: none; }

/* ---------- Barra lateral ---------- */
.barra-lateral {
  position: sticky;
  top: 0;
  height: 100dvh;
  padding: 12px 0 12px 12px;
  z-index: var(--z-menu);
}
.barra-lateral > .vidro-1 {
  height: 100%;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-2xl);
  overflow: hidden;
}
.marca {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 16px 14px;
  text-decoration: none;
  color: var(--texto);
  min-height: 76px;
}
.marca img {
  width: 44px; height: 44px;
  flex: none;
  border-radius: 13px;
  box-shadow: 0 0 0 1px rgb(255 255 255 / .18) inset, 0 6px 16px -6px rgb(10 16 43 / .6);
}
.marca span { display: grid; min-width: 0; line-height: 1.2; }
.marca b { font-size: var(--t-base); font-weight: 680; letter-spacing: -.01em; white-space: nowrap; }
.marca small { color: var(--texto-3); font-size: var(--t-xs); white-space: nowrap; }

.navegacao { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 4px 10px 10px; }
.nav-secao { padding: 14px 10px 6px; }
.nav-lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; }
.nav-item { position: relative; min-width: 0; }
.nav-linha { display: flex; align-items: center; border-radius: var(--r-md); }
.nav-link {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  padding: 0 10px;
  border-radius: var(--r-md);
  color: var(--texto-2);
  font-size: var(--t-md);
  font-weight: 540;
  text-decoration: none;
  transition: background-color var(--mov-rapido), color var(--mov-rapido);
}
.nav-link svg { width: 19px; height: 19px; flex: none; }
.nav-link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-linha:hover .nav-link,
.nav-link:hover { color: var(--texto); background: var(--hover); }
.nav-link[aria-current="page"],
.nav-item.no-caminho > .nav-linha > .nav-link {
  color: var(--texto);
  font-weight: 620;
}
.nav-link[aria-current="page"] {
  background: var(--vidro-solido-2);
  box-shadow: 0 1px 2px rgb(13 21 48 / .08), var(--vidro-reflexo);
}
[data-theme="dark"] .nav-link[aria-current="page"] { background: rgb(255 255 255 / .09); }
.nav-link[aria-current="page"] svg { color: var(--destaque-tinta); }
.nav-expandir {
  display: grid;
  place-items: center;
  flex: none;
  width: 30px; height: 30px;
  margin-right: 4px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--texto-3);
  transition: transform var(--mov) var(--curva), background-color var(--mov-rapido);
}
.nav-expandir:hover { background: var(--hover); color: var(--texto); }
.nav-expandir svg { width: 16px; height: 16px; transition: transform var(--mov) var(--curva); }
.nav-item.aberto > .nav-linha .nav-expandir svg { transform: rotate(90deg); }
.nav-filhos { list-style: none; margin: 2px 0 6px 21px; padding: 0 0 0 12px; border-left: 1px solid var(--linha); display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.nav-filhos .nav-link { min-height: 34px; font-size: var(--t-sm); font-weight: 500; }
.nav-item:not(.aberto) > .nav-filhos { display: none; }
.nav-selo {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--r-pill);
  background: var(--destaque);
  color: var(--destaque-texto);
  font-size: var(--t-2xs);
  font-weight: 650;
  display: inline-grid;
  place-items: center;
}

.lateral-rodape { padding: 8px 10px 12px; border-top: 1px solid var(--linha); display: grid; gap: 2px; }
.botao-recolher {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 0 10px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--texto-3);
  font-size: var(--t-sm);
  font-weight: 540;
}
.botao-recolher:hover { background: var(--hover); color: var(--texto); }
.botao-recolher svg { width: 19px; height: 19px; flex: none; transition: transform var(--mov) var(--curva); }
html[data-menu-density="collapsed"] .botao-recolher svg { transform: rotate(180deg); }

/* Recolhido: só ícones; nomes no tooltip e no aria-label (MEN-04). Filhos em balão lateral. */
html[data-menu-density="collapsed"] .marca { justify-content: center; padding-left: 0; padding-right: 0; }
html[data-menu-density="collapsed"] .marca span,
html[data-menu-density="collapsed"] .nav-link span,
html[data-menu-density="collapsed"] .nav-secao,
html[data-menu-density="collapsed"] .botao-recolher span,
html[data-menu-density="collapsed"] .nav-expandir,
html[data-menu-density="collapsed"] .barra-lateral .nav-filhos { display: none; }
html[data-menu-density="collapsed"] .navegacao { padding-left: 12px; padding-right: 12px; }
html[data-menu-density="collapsed"] .nav-link,
html[data-menu-density="collapsed"] .botao-recolher { justify-content: center; padding: 0; min-height: 44px; }
/* Sem os títulos de seção, uma linha separa os grupos do menu. */
html[data-menu-density="collapsed"] .nav-lista ~ .nav-lista { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--linha); }
html[data-menu-density="collapsed"] .gaveta .nav-lista ~ .nav-lista { margin-top: 0; padding-top: 0; border-top: 0; }
html[data-menu-density="collapsed"] .nav-selo { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; padding: 0 4px; font-size: 10px; }

.balao-filhos {
  position: fixed;
  z-index: var(--z-overlay);
  min-width: 240px;
  max-width: 320px;
  max-height: 70vh;
  overflow: auto;
  padding: 8px;
  border-radius: var(--r-lg);
  animation: surgir var(--mov-rapido) var(--curva);
}
.balao-filhos .balao-titulo { padding: 8px 10px 6px; font-size: var(--t-sm); font-weight: 650; color: var(--texto); }
.balao-filhos ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.balao-filhos .nav-link span,
html[data-menu-density="collapsed"] .balao-filhos .nav-link span { display: inline; }
html[data-menu-density="collapsed"] .balao-filhos .nav-link { justify-content: flex-start; padding: 0 10px; min-height: 40px; }

/* ---------- Área principal e barra superior ---------- */
.principal { min-width: 0; display: flex; flex-direction: column; }
.topo {
  position: sticky;
  top: 0;
  z-index: var(--z-topo);
  padding: 12px 16px 0;
}
.topo > .vidro-1 {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  min-height: 60px;
  padding: 8px 10px 8px 14px;
  border-radius: var(--r-xl);
}
.botao-logo.topo-marca { display: none; }
html[data-menu="logo"] .botao-logo.topo-marca { display: inline-flex; }
.botao-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 12px 4px 4px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--texto);
}
.botao-logo:hover, .botao-logo[aria-expanded="true"] { background: var(--hover); border-color: var(--linha); }
.botao-logo img { width: 36px; height: 36px; border-radius: 11px; }
.botao-logo b { font-size: var(--t-md); font-weight: 680; white-space: nowrap; }
.botao-logo svg { width: 16px; height: 16px; color: var(--texto-3); }
.botao-gaveta { display: none; }

.trilha { display: flex; align-items: center; gap: 6px; min-width: 0; flex: 1; font-size: var(--t-md); }
.trilha ol { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 0; min-width: 0; }
.trilha li { display: flex; align-items: center; gap: 6px; min-width: 0; }
.trilha li + li::before { content: ""; width: 6px; height: 6px; border-right: 1.5px solid var(--texto-3); border-top: 1.5px solid var(--texto-3); transform: rotate(45deg); opacity: .7; flex: none; }
.trilha a { color: var(--texto-3); text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trilha a:hover { color: var(--texto); }
.trilha [aria-current="page"] { color: var(--texto); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.botao-busca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 220px;
  min-height: 40px;
  padding: 0 8px 0 14px;
  border: 1px solid var(--linha);
  border-radius: var(--r-pill);
  background: var(--campo);
  color: var(--texto-3);
  font-size: var(--t-md);
}
.botao-busca:hover { border-color: var(--linha-forte); color: var(--texto-2); }
.botao-busca svg { width: 17px; height: 17px; }
.botao-busca .teclas { margin-left: auto; display: inline-flex; gap: 3px; }
.topo-acoes { display: flex; align-items: center; gap: 6px; }
.botao-usuario {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 3px 10px 3px 3px;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  background: transparent;
}
.botao-usuario:hover, .botao-usuario[aria-expanded="true"] { background: var(--hover); border-color: var(--linha); }
.botao-usuario .avatar { width: 34px; height: 34px; border-radius: 50%; }
.botao-usuario span { display: grid; text-align: left; line-height: 1.15; }
.botao-usuario b { font-size: var(--t-sm); font-weight: 620; max-width: 16ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.botao-usuario small { color: var(--texto-3); font-size: var(--t-2xs); }

.conteudo {
  width: 100%;
  max-width: var(--conteudo-max);
  margin: 0 auto;
  padding: var(--e-6) var(--e-6) var(--e-9);
  flex: 1;
}
.conteudo:focus { outline: none; }
/* Foco levado ao título pela navegação: anuncia a página sem desenhar anel em texto não interativo. */
.conteudo h1[tabindex="-1"]:focus,
.conteudo h1[tabindex="-1"]:focus-visible,
.conteudo:focus-visible { box-shadow: none; outline: none; }

/* Cabeçalho padrão de página */
.cabecalho-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-5); flex-wrap: wrap; margin: var(--e-3) 0 var(--e-6); }
.cabecalho-pagina .etiqueta { display: block; margin-bottom: 8px; }
.cabecalho-pagina h1 { font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.5rem); }
.cabecalho-pagina p { margin-top: 8px; color: var(--texto-3); max-width: 70ch; font-size: var(--t-base); }

/* ---------- Gaveta (telas estreitas) ---------- */
.gaveta-fundo { position: fixed; inset: 0; z-index: calc(var(--z-gaveta) - 1); background: var(--scrim); animation: aparecer var(--mov) linear; }
.gaveta {
  position: fixed;
  top: 8px; bottom: 8px; left: 8px;
  z-index: var(--z-gaveta);
  width: min(340px, calc(100vw - 48px));
  display: flex;
  flex-direction: column;
  border-radius: var(--r-2xl);
  overflow: hidden;
  animation: entrar-esq var(--mov) var(--curva);
}
.gaveta .navegacao .nav-link span { display: inline !important; }
.gaveta .nav-secao { display: block !important; }
@keyframes entrar-esq { from { transform: translateX(-24px); opacity: 0; } }

/* ---------- Menu "na logo" ---------- */
.menu-logo {
  position: fixed;
  z-index: var(--z-overlay);
  top: 76px;
  left: 24px;
  width: 300px;
  max-height: calc(100dvh - 96px);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-xl);
  overflow: hidden;
  animation: surgir var(--mov-rapido) var(--curva);
}
html[data-menu-density="collapsed"] .menu-logo { width: 84px; }
html[data-menu-density="collapsed"] .menu-logo .nav-link span,
html[data-menu-density="collapsed"] .menu-logo .nav-secao,
html[data-menu-density="collapsed"] .menu-logo .nav-expandir,
html[data-menu-density="collapsed"] .menu-logo .nav-filhos { display: none; }
html[data-menu-density="collapsed"] .menu-logo .nav-link { justify-content: center; padding: 0; min-height: 44px; }

@media (max-width: 900px) {
  .app { grid-template-columns: minmax(0, 1fr) !important; }
  .barra-lateral { display: none; }
  .botao-gaveta { display: inline-flex; }
  html[data-menu="logo"] .botao-logo.topo-marca { display: none; }
  .botao-busca { min-width: 0; }
  .botao-busca .rotulo-busca, .botao-busca .teclas { display: none; }
  /* Em tela estreita some o nome e o cargo; o avatar (também um span) continua visível. */
  .botao-usuario span:not(.avatar) { display: none; }
  .topo { padding: 8px 8px 0; }
  .conteudo { padding: var(--e-4) var(--e-4) var(--e-8); }
}
@media (max-width: 560px) {
  .trilha ol li:not(:last-child) { display: none; }
  .topo-acoes .opcional { display: none; }
}
/* Selo do ambiente de ensaio na barra superior (some o texto em telas estreitas, fica o cadeado). */
.selo-ensaio { flex: none; cursor: help; }
@media (max-width: 520px) { .selo-ensaio { padding: 0 8px; font-size: 0; gap: 0; } .selo-ensaio svg { width: 14px; height: 14px; } }