.tela-autenticacao {
  min-height: 100vh;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--espaco-8);
  padding: var(--espaco-11);
}

.tela-carregamento {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--espaco-11);
}

.marca-login {
  width: min(100%, var(--largura-login));
}

.marca-carregamento {
  justify-content: center;
}

.tela-transicao:not(.oculto),
.conteudo-painel > section:not(.oculto),
.modal-painel:not(.oculto),
.painel-configuracoes-conta:not(.oculto),
.configuracoes-clientes:not(.oculto),
.modal-padrao[open] .modal-conteudo {
  animation: entrada-suave var(--duracao-transicao-padrao) var(--curva-transicao-padrao) both;
}

.modal-padrao[open]::backdrop {
  animation: entrada-sobreposicao var(--duracao-transicao-padrao) var(--curva-transicao-padrao) both;
}

.botao,
.botao-link,
.menu-item,
.aba,
.aba-modal,
.botao-fechar-modal {
  transition:
    background-color var(--duracao-transicao-rapida) var(--curva-transicao-padrao),
    border-color var(--duracao-transicao-rapida) var(--curva-transicao-padrao),
    color var(--duracao-transicao-rapida) var(--curva-transicao-padrao),
    box-shadow var(--duracao-transicao-rapida) var(--curva-transicao-padrao);
}

@keyframes entrada-suave {
  from {
    opacity: 0;
    transform: translateY(var(--deslocamento-transicao));
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes entrada-sobreposicao {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.cabecalho-publico {
  padding-top: var(--espaco-1);
}

@media (prefers-reduced-motion: reduce) {
  .tela-transicao:not(.oculto),
  .conteudo-painel > section:not(.oculto),
  .modal-painel:not(.oculto),
  .painel-configuracoes-conta:not(.oculto),
  .configuracoes-clientes:not(.oculto),
  .modal-padrao[open] .modal-conteudo,
  .modal-padrao[open]::backdrop {
    animation: none;
  }

  .botao,
  .botao-link,
  .menu-item,
  .aba,
  .aba-modal,
  .botao-fechar-modal {
    transition: none;
  }
}

@media (max-width: 520px) {
  .tela-autenticacao,
  .tela-carregamento,
  .pagina-publica {
    align-content: start;
    padding: var(--espaco-8);
  }

  .cartao-login {
    padding: var(--espaco-10);
  }

  .cabecalho-login h1,
  .topo-painel h1 {
    font-size: 24px;
  }
}