/* Estrutura da aplicacao: shell, barra lateral, cabecalho, area de conteudo. */
.app-shell {
  display: grid;
  grid-template-columns: 260px 1fr;
  grid-template-rows: 56px 1fr;
  grid-template-areas:
    'nav topo'
    'nav conteudo';
  min-height: 100dvh;
}

.app-nav {
  grid-area: nav;
}
.app-topo {
  grid-area: topo;
}
.app-conteudo {
  grid-area: conteudo;
  padding: var(--esp-6);
}

/*
 * Telas sem casca (login, impressao): esconde navegacao e cabecalho.
 * A classe e alternada pelo roteador, pela flag `semShell` da rota.
 */
.sem-shell .app-shell {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
  grid-template-areas: 'conteudo';
}

.sem-shell .app-nav,
.sem-shell .app-topo {
  display: none;
}

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      'topo'
      'conteudo';
  }
}