/* Login, recuperacao e nova senha. Depende de tokens.css e base.css. */
.tela-acesso { min-height: 100dvh; display: flex; background: var(--pn); }

.acesso-marca {
  flex: 1 1 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  padding: 48px; background: var(--bg); border-right: 1px solid var(--ln);
}
.acesso-marca img { width: min(80%, 360px); height: auto; }
.acesso-marca .filete { width: 48px; height: 1px; background: var(--pr); }

.acesso-form { flex: 1 1 50%; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 48px 96px; }
.acesso-form .logo-compacta { display: none; width: 240px; height: auto; margin: 0 0 40px -8px; }
.acesso-caixa { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 18px; }
.acesso-caixa form { display: flex; flex-direction: column; gap: 18px; }
.acesso-cabeca { display: flex; flex-direction: column; gap: 6px; }
.acesso-rodape { margin-top: 12px; font-size: 12.5px; color: var(--fa); }

.link-sutil { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; background: none; border: 0; padding: 0; font-size: inherit; }
.link-voltar { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--mu); background: none; border: 0; padding: 0; cursor: pointer; align-self: flex-start; }
.link-voltar:hover { color: var(--ink); }

.selo-circulo { width: 56px; height: 56px; display: grid; place-items: center; border: 1px solid var(--pr); color: var(--pr); border-radius: 50%; font-size: 24px; }
.linha-botoes { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 860px) {
  .acesso-marca { display: none; }
  .acesso-form { padding: 32px 24px; justify-content: flex-start; padding-top: 12vh; }
  .acesso-form .logo-compacta { display: block; }
}