* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--fonte); color: var(--cor-texto); background: var(--cor-superficie); -webkit-font-smoothing: antialiased; }
/* A caixa do app ocupa a altura da tela mesmo ANTES da grade existir — é o que
 * permite ao "Carregando" do início se centralizar sozinho, sem conta fixa.
 * `dvh` em vez de `vh`: no celular a barra do navegador aparece e some, e `vh`
 * ignora isso. */
#app { min-height: 100dvh; display: flex; flex-direction: column; }

.app-shell { display: grid; grid-template-columns: 248px 1fr; grid-template-rows: 60px 1fr; height: 100vh; }
/* `1 / -1` = "da primeira até a última coluna, quantas forem". Com `1 / 3`
 * fixo, no celular — onde a grade tem UMA coluna — o navegador inventava uma
 * segunda coluna só para o cabeçalho caber, e ela comia metade da largura do
 * conteúdo. */
/* `flex-start` porque agora só há sanduíche e marca — o usuário foi para o pé
 * da barra. Com `space-between` sobrando de quando eram três itens, a marca era
 * jogada contra a borda direita no celular. */
.app-header { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-start; gap: 12px; padding: 0 20px; background: rgba(255,255,255,.82); backdrop-filter: blur(10px); border-bottom: 1px solid var(--cor-borda); position: sticky; top: 0; z-index: 20; }
.app-header strong { font-weight: 800; letter-spacing: .3px; background: var(--grad-principal); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.app-marca { display: inline-flex; align-items: baseline; gap: 6px; text-decoration: none; border-radius: var(--raio-sm); padding: 4px 8px; margin-left: -8px; transition: background .15s, opacity .15s; }
.app-marca:hover { background: var(--cor-superficie); }
.app-marca:active { opacity: .7; }
.app-versao { font-size: 10.5px; font-weight: 700; letter-spacing: .5px; color: var(--cor-texto-fraco); text-transform: uppercase; }
.app-header a { color: var(--cor-principal); text-decoration: none; font-weight: 600; }
.app-sidebar { background: var(--cor-fundo); border-right: 1px solid var(--cor-borda); padding: 14px; overflow-y: auto; display: flex; flex-direction: column; }
.app-content { padding: 24px; overflow-y: auto; }
.menu-grupo { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--cor-texto-fraco); margin: 18px 0 6px; padding: 0 8px; font-weight: 700; }
.menu-item { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--raio-sm); cursor: pointer; text-decoration: none; color: var(--cor-texto); font-weight: 500; transition: background .15s, color .15s, box-shadow .15s; }
.menu-item:hover { background: var(--cor-superficie); }
.menu-item.ativo { background: var(--grad-principal); color: #fff; box-shadow: var(--sombra-forte); }
.menu-item { justify-content: space-between; }
.menu-item.ativo-pai { color: var(--cor-principal); font-weight: 700; }
.menu-rotulo { display: flex; align-items: center; gap: 10px; }
.menu-seta { font-size: 11px; opacity: .55; transition: transform .18s; }
.menu-item.aberto .menu-seta { transform: rotate(90deg); }
/* O ícone herda a cor do texto, então acende junto com o item ativo. */
.icone { flex: none; }
/* Gaveta das ferramentas: fechada por padrão, abre no módulo em que você está. */
.menu-sub { display: none; }
.menu-sub.aberta { display: block; }
.menu-secao { font-size: 10px; text-transform: uppercase; letter-spacing: .7px; color: var(--cor-texto-fraco); opacity: .75; font-weight: 700; margin: 14px 0 5px; padding-left: 32px; }
.menu-subitem { display: flex; align-items: center; gap: 9px; padding: 7px 12px 7px 14px; margin-left: 14px; border-left: 2px solid var(--cor-borda); border-radius: 0 var(--raio-sm) var(--raio-sm) 0; text-decoration: none; color: var(--cor-texto-fraco); font-size: 13.5px; font-weight: 500; transition: background .15s, color .15s, border-color .15s; }
.menu-subitem:hover { background: var(--cor-superficie); color: var(--cor-texto); }
.menu-subitem.ativo { background: var(--cor-superficie-2); color: var(--cor-principal); border-left-color: var(--cor-principal); font-weight: 700; }

/* Quem está logado, no pé da barra.
 *
 * `margin-top: auto` empurra para baixo: se a lista de ferramentas for curta,
 * ele cola no fim da barra; se for longa, fica logo depois dela. Nos dois casos
 * é o último elemento, e nunca disputa espaço com o menu.
 */
.app-usuario { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--cor-borda); display: flex; align-items: center; justify-content: space-between; gap: 10px; flex: none; }
.app-usuario-nome { font-size: 13px; color: var(--cor-texto-fraco); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-sair { font-size: 13px; color: var(--cor-principal); text-decoration: none; font-weight: 600; padding: 4px 8px; border-radius: var(--raio-sm); flex: none; }
.app-sair:hover { background: var(--cor-superficie); }

/* O véu NÃO EXISTE no desktop.
 *
 * `display: none` de verdade, não só invisível: ele é filho da grade do shell e
 * vem antes do conteúdo no HTML. Sem isto ele ocupa a célula da direita e
 * empurra o conteúdo para a linha de baixo — embaixo do menu. Foi o que
 * aconteceu: invisível não basta, tem que sair da grade.
 */
.app-veu { display: none; }

/* O sanduíche só existe no celular. */
.app-sanduiche {
  display: none; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex: none; margin-left: -6px;
  background: none; border: 1px solid var(--cor-borda); border-radius: var(--raio-sm);
  /* Cor da marca, não do texto: o botão é identidade, não conteúdo. */
  cursor: pointer; color: var(--cor-principal); transition: background .15s, border-color .15s;
}
.app-sanduiche:hover { background: var(--cor-superficie); border-color: var(--cor-principal); }
.app-sanduiche .icone { pointer-events: none; }

/* ---------- Celular e tablet ----------
 *
 * A lateral tinha 248px fixos e o CSS não tinha NENHUMA regra para tela
 * pequena. Num aparelho de 375px sobravam 127px de conteúdo — cartão com uma
 * palavra por linha. Não foi um ajuste que quebrou: nunca existiu.
 *
 * O corte é 1024px, a medida de mercado que separa tablet de desktop (o `lg`
 * do Tailwind e do Bootstrap). Não é um número escolhido para uma tela
 * específica: abaixo disso a lateral de 248px come um quarto da largura, que é
 * demais para um painel cheio de conteúdo.
 *
 * Abaixo do corte a lateral sai do fluxo e vira gaveta, chamada pelo sanduíche.
 */
@media (max-width: 1023.98px) {
  .app-shell { grid-template-columns: 1fr; }

  .app-sidebar {
    position: fixed; top: 60px; bottom: 0; left: 0; width: 82vw; max-width: 300px;
    z-index: 40; transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: var(--sombra-forte);
  }
  .app-sidebar.aberta { transform: none; }

  /* O véu escurece o resto e serve de área de fechar. */
  .app-veu {
    display: block; position: fixed; inset: 60px 0 0 0; background: rgba(15,17,34,.45);
    z-index: 30; opacity: 0; pointer-events: none; transition: opacity .22s;
  }
  .app-veu.aberta { opacity: 1; pointer-events: auto; }

  .app-sanduiche { display: inline-flex; }
  .app-header { padding: 0 12px; gap: 10px; }
  .app-content { padding: 16px 14px; }

  /* Modal quase da tela toda: 640px num celular vira 90% com margem inútil. */
  .modal { width: 94%; max-height: 90vh; padding: 18px 16px; }

  /* Tabela larga rola dentro de si, em vez de esticar a página inteira. */
  .tabela { display: block; overflow-x: auto; white-space: nowrap; }
}