/* =========================================================
   AQUAG · LAYOUT
   Cabeçalho fixo, navegação principal e o container de
   conteúdo (main). Inclui a versão mobile desses elementos.
   ========================================================= */

.nav-btn {
  padding: .6rem 1.2rem;
  font-size: .85rem;
  font-weight: 600;
  border-radius: .5rem;
  white-space: nowrap;
  transition: .15s;
}

.nav-btn:hover {
  background: rgba(245, 158, 11, .1);
}

.nav-btn.active {
  background: rgba(245, 158, 11, .15);
  color: #f59e0b;
}

/*
  Regras do cabeçalho/conteúdo do PAINEL ADMIN — presas a body>header e
  body>main (os do admin são filhos diretos do body). Sem isso, elas
  também atingiam o header/main da tela do Portal do Aluno.
*/
@media (max-width: 767px) {

  body>header {
    height: auto;
    min-height: 0;
  }

  body>header>div {
    width: 100%;
    max-width: none;
    flex-wrap: wrap;
    gap: .55rem;
    padding: .6rem .65rem;
    padding-top: calc(.6rem + env(safe-area-inset-top));
  }

  /* Cabeçalho: logo, nome e status ficam em uma única linha. */
  body>header>div>div:first-child {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: .55rem;
  }

  body>header>div>div:first-child>span:nth-child(2) {
    margin-right: auto;
    font-size: 1rem;
  }

  #database-status {
    flex: 0 0 auto;
    font-size: .65rem !important;
    padding: .3rem .5rem !important;
    white-space: nowrap;
  }

  /* Navegação sempre visível no celular, inclusive a opção TURMA. */
  body>header nav {
    width: 100%;
    margin-left: 0 !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .4rem !important;
  }

  body>header nav .nav-btn {
    width: 100%;
    min-width: 0;
    min-height: 46px;
    padding: .55rem .25rem;
    font-size: .76rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    white-space: nowrap;
    overflow: hidden;
    border: 1px solid transparent;
  }

  body>header nav .nav-btn.active {
    border-color: rgba(245, 158, 11, .25);
  }

  body>header nav .nav-btn svg {
    width: 16px !important;
    height: 16px !important;
    flex: 0 0 auto;
  }

  /* O conteúdo começa abaixo do cabeçalho fixo. */
  body>main {
    width: 100%;
    max-width: none !important;
    padding-top: 140px !important;
    padding-left: .7rem !important;
    padding-right: .7rem !important;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  body>main section {
    scroll-margin-top: 145px;
  }

  h2 {
    font-size: 1.15rem !important;
  }

  .card-modern {
    border-radius: .85rem;
  }
}

@media (max-width: 380px) {

  body>header>div {
    padding-left: .5rem;
    padding-right: .5rem;
  }

  body>header nav .nav-btn {
    font-size: .7rem;
    padding-left: .15rem;
    padding-right: .15rem;
  }

  body>header nav .nav-btn svg {
    width: 14px !important;
    height: 14px !important;
  }

  body>main {
    padding-left: .55rem !important;
    padding-right: .55rem !important;
    padding-top: 136px !important;
  }
}