/* ==========================================================================
   Shell (T-033, revisto na T-043): sidebar fixa e discreta, topo mobile com
   gaveta (elemento 01), area de conteudo e rodape com o wordmark pequeno
   (elemento 05, sem marca d'agua gigante).
   ========================================================================== */
.pular { position: absolute; left: -999px; top: .5rem; z-index: 100; padding: .5rem .75rem; background: var(--cta); color: #fff; border-radius: var(--raio-p); }
.pular:focus { left: .5rem; }

.app { display: grid; grid-template-columns: var(--sidebar) 1fr; grid-template-rows: 1fr auto; min-height: 100vh; min-height: 100dvh; }

/* ---------- Marca ---------- */
.marca { display: inline-flex; align-items: center; gap: .5rem; color: inherit; text-decoration: none; border-radius: var(--raio-p); }
.marca:hover { text-decoration: none; }
.marca__logo { width: 1.5rem; height: 1.5rem; object-fit: contain; user-select: none; }
.marca__nome { font-family: var(--f-display); font-size: .9375rem; font-weight: 600; letter-spacing: -.01em; }

/* ---------- Sidebar ----------
   Presa no topo com a altura da janela: a pagina rola sozinha e a sidebar nao se mexe.
   Marca e rodape (usuario + Sair) ficam fixos; so a lista do menu rola, dentro dela (T-055). */
.sidebar {
  grid-row: 1 / span 2;
  position: sticky; top: 0; height: 100vh; height: 100dvh;
  display: flex; flex-direction: column; gap: .5rem;
  padding: .875rem .5rem;
  border-right: 1px solid hsl(var(--borda)); background: hsl(var(--superficie));
}
.sidebar .marca { padding: .25rem .375rem; }
.sidebar .marca__logo { width: 1.25rem; height: 1.25rem; }
.sidebar .marca__nome { font-size: .875rem; }
/* nome do sistema com a grafia da marca (EnproPrice), sem a caixa alta do .eyebrow (T-055) */
.sidebar__eyebrow { margin: 0 0 .25rem; padding-left: .375rem; font-family: var(--f-sans); font-size: .6875rem; letter-spacing: .01em; text-transform: none; color: hsl(var(--texto-suave)); }
.sidebar__eyebrow::before { display: none; }
/* padding + margem negativa: o anel de foco dos itens nao e cortado pela rolagem */
.sidebar__nav { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -.25rem; padding: .25rem; }
.menu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .375rem; }
.menu__grupo, .menu__sublista { display: flex; flex-direction: column; gap: .125rem; }
.menu__sublista { list-style: none; margin: 0; padding: 0; }
.menu__grupo-rotulo { margin: 0; padding: 0 .5rem .125rem; font-size: .625rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: hsl(var(--primaria)); }
/* grupos lidos como topicos (T-092): fio fino entre um grupo e o seguinte */
.menu__grupo + .menu__grupo { border-top: 1px solid hsl(var(--borda)); padding-top: .5rem; }
.menu__item {
  display: block; padding: .4rem .5rem; border-radius: var(--raio-p);
  color: hsl(var(--texto-suave)); text-decoration: none; font-size: .8125rem; font-weight: 500;
  transition: background-color var(--transicao), color var(--transicao);
}
.menu__item:hover { background: hsl(var(--card)); color: hsl(var(--texto)); text-decoration: none; }
.menu__item--ativo { background: hsl(var(--card-alto)); color: hsl(var(--texto)); box-shadow: inset 2px 0 0 var(--cta); }
.sidebar__rodape { display: flex; flex-direction: column; gap: .25rem; padding-top: .75rem; border-top: 1px solid hsl(var(--borda)); }
.sidebar__usuario { margin: 0; padding: 0 .5rem; font-size: .6875rem; word-break: break-all; }
.sidebar__sair { justify-content: flex-start; height: 1.875rem; padding: 0 .5rem; font-size: .75rem; }

/* Janela baixa (T-081, AG-22): em 1366x768 os 15 itens do admin nao cabiam e "Configurações" e "Admin" ficavam cortados.
   Ate 800 px de altura o menu fica compacto e cabe inteiro; ate 700 px (a janela do navegador numa tela de 768 px),
   mais denso; se ainda nao couber, a lista rola por dentro e o app leva o item ativo para a vista (app.js). */
@media (min-width: 1024px) and (max-height: 800px) {
  .sidebar { gap: .375rem; padding: .625rem .5rem; }
  .sidebar__eyebrow { margin-bottom: 0; }
  .menu { gap: .25rem; }
  .menu__grupo + .menu__grupo { padding-top: .25rem; }
  .menu__item { padding: .3rem .5rem; }
  .menu__grupo-rotulo { padding-bottom: 0; }
  .sidebar__rodape { padding-top: .5rem; }
}
@media (min-width: 1024px) and (max-height: 700px) {
  .menu { gap: .1875rem; }
  .menu__grupo + .menu__grupo { padding-top: .1875rem; }
  .menu__grupo, .menu__sublista { gap: 1px; }
  .menu__item { padding: .25rem .5rem; line-height: 1.35; }
  .menu__grupo-rotulo { line-height: 1.2; }
  .sidebar__rodape { gap: 0; padding-top: .375rem; }
}

/* ---------- Topo mobile + gaveta ---------- */
.topo-mobile { display: none; grid-column: 2; align-items: center; justify-content: space-between; height: var(--topo); padding: 0 1rem; border-bottom: 1px solid hsl(var(--borda)); background: hsl(var(--superficie)); position: sticky; top: 0; z-index: 40; }
.hamburguer { display: inline-flex; width: 2.25rem; height: 2.25rem; align-items: center; justify-content: center; border: 0; border-radius: var(--raio-p); background: transparent; color: hsl(var(--texto)); }
.hamburguer:hover { background: hsl(var(--card)); }
.hamburguer svg { width: 1.375rem; height: 1.375rem; }
.gaveta { position: fixed; inset: 0; z-index: 60; display: none; }
.gaveta--aberta { display: block; }
.gaveta__fundo { position: absolute; inset: 0; background: rgb(0 0 0 / .55); }
.gaveta__painel { position: absolute; top: 0; right: 0; bottom: 0; width: 17rem; padding: 1.25rem; display: flex; flex-direction: column; background: hsl(var(--superficie)); border-left: 1px solid hsl(var(--borda)); animation: gaveta-entra .2s ease-out; }
@keyframes gaveta-entra { from { transform: translateX(100%); } to { transform: none; } }
.gaveta__cabecalho { display: flex; align-items: center; justify-content: space-between; }
.gaveta__lista { list-style: none; margin: 1rem -.25rem .75rem; padding: .25rem; display: flex; flex-direction: column; gap: 1rem; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.gaveta__lista .menu__grupo-rotulo { padding: 0 .75rem .125rem; }
.gaveta__lista a { display: block; padding: .625rem .75rem; border-radius: var(--raio-p); font-size: .9375rem; color: hsl(var(--texto)); text-decoration: none; }
.gaveta__lista a:hover, .gaveta__lista a.menu__item--ativo { background: hsl(var(--card-alto)); }

/* ---------- Coluna principal: barra do topo (desktop) + conteudo (T-066) ---------- */
.coluna { grid-column: 2; display: flex; flex-direction: column; min-width: 0; }
.barra-topo {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; justify-content: flex-end; gap: .5rem;
  height: 3rem; padding: 0 1.25rem;
  border-bottom: 1px solid hsl(var(--borda)); background: hsl(var(--fundo));
}
@media (min-width: 1024px) { .barra-topo { padding: 0 2rem; } }
.topo-mobile__acoes { display: flex; align-items: center; gap: .25rem; }

/* ---------- Conteudo ---------- */
.conteudo { grid-column: 2; padding: 1.25rem 1.25rem 2rem; max-width: 88rem; width: 100%; outline: none; }
.conteudo { min-width: 0; }
@media (min-width: 1024px) { .conteudo { padding: 1.5rem 2rem 2.5rem; } }
.tela__topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.tela__topo h1 { margin: 0; }
.tela__topo p { margin: .125rem 0 0; font-size: .8125rem; }

/* ---------- Rodape: linha fina, texto pequeno e o wordmark discreto (elemento 05) ---------- */
.rodape { grid-column: 2; position: relative; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: auto; padding: .875rem 1.25rem; border-top: 1px solid hsl(var(--borda)); background: hsl(var(--fundo)); }
@media (min-width: 1024px) { .rodape { padding: .875rem 2rem; } }
.rodape__fio { display: none; }
.rodape__texto { margin: 0; font-size: .6875rem; letter-spacing: .02em; }
.marca-fundo { order: -1; user-select: none; pointer-events: none; }
.marca-fundo__texto {
  display: block; white-space: nowrap;
  font-family: var(--f-display); font-weight: 600; font-size: .875rem; line-height: 1; letter-spacing: -.01em;
  color: hsl(var(--texto-suave));
}
.marca-fundo--viva .marca-fundo__texto { animation: none; }

/* ---------- Responsivo ---------- */
@media (max-width: 1023px) {
  /* topo, conteudo e rodape: a altura que sobra vai para o conteudo, nao para a linha do topo (T-055) */
  .app { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; }
  .sidebar { display: none; }
  .topo-mobile { display: flex; grid-column: 1; }
  .conteudo, .rodape, .coluna { grid-column: 1; }
  .barra-topo { display: none; } /* no celular o botao do José fica no topo-mobile */
}
@media (prefers-reduced-motion: reduce) {
  .marca-fundo--viva .marca-fundo__texto { animation: none; }
  .gaveta__painel { animation: none; }
}