/* Carcaça: topo e abas no celular, lateral no computador. */
.app { min-height: 100dvh; overflow-x: clip; }
.lateral { display: none; }

.topo {
  display: flex; align-items: center; justify-content: space-between;
  height: 56px; padding: 0 var(--e4);
}
.marca { font-weight: 700; text-decoration: none; letter-spacing: -.01em; }

.pessoa {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--e3);
  margin-right: calc(var(--e3) * -1);
  border-radius: 10px; color: var(--mut); font-weight: 600; text-decoration: none;
}
.pessoa.ativo { color: var(--txt); }

#tela { padding: var(--e2) var(--e4) calc(var(--aba) + var(--seguro) + var(--e6)); outline: none; }
.tela-conteudo { display: flex; flex-direction: column; gap: var(--e4); }

.abas {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(4, 1fr);
  height: calc(var(--aba) + var(--seguro)); padding-bottom: var(--seguro);
  background: var(--s1); border-top: 1px solid var(--linha);
}
.abas a {
  position: relative; display: flex; align-items: center; justify-content: center;
  color: var(--mut); font-size: var(--t-s); font-weight: 600; text-decoration: none;
}
.abas a.ativo { color: var(--txt); }

.colunas, .coluna-a, .coluna-b, .evo-corpo { display: flex; flex-direction: column; gap: var(--e4); }

body.sem-acesso .abas, body.sem-acesso .topo, body.sem-acesso .lateral { display: none; }

@media (min-width: 900px) {
  .app { display: grid; grid-template-columns: 240px minmax(0, 1fr); }
  .topo, .abas { display: none; }
  .lateral {
    display: flex; flex-direction: column; gap: var(--e5);
    position: sticky; top: 0; height: 100dvh; padding: var(--e5) var(--e4);
    border-right: 1px solid var(--linha);
  }
  .lateral .marca { padding: 0 var(--e3); font-size: var(--t-m); }
  .menu { display: flex; flex-direction: column; gap: var(--e1); }
  .menu a {
    display: flex; align-items: center; min-height: 44px; padding: 0 var(--e3);
    border-radius: 10px; color: var(--mut); font-weight: 600; text-decoration: none;
  }
  .menu a:hover { color: var(--txt); }
  .menu a.ativo { color: var(--txt); }
  .lateral .pessoa { margin: auto 0 0; padding: 0 var(--e3); }
  .lateral .pessoa.ativo { background: var(--s2); }

  #tela { padding: var(--e6) 40px 64px; max-width: 1120px; }
  .tela-conteudo { gap: var(--e5); }
  .colunas { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--e5); align-items: start; }
  .coluna-a, .coluna-b, .evo-corpo { gap: var(--e5); }
  body.sem-acesso .app { display: block; }
}