/* ===== TELAS DE ACESSO =====
 *
 * Entrar, criar conta, aguardando aprovacao e a fila de acessos do dono.
 *
 * Tudo aqui se apoia no styles.css: as cores, o raio, a fonte, o .btn, o
 * .field, o input, o .badge, o .pill e o .side-section-title vem de la. Este
 * arquivo so monta o palco e as pecas que nao existiam ainda. Se um valor de
 * cor aparecer aqui cru, e porque ele nao tem token no styles.css.
 *
 * CONTRATO DE CLASSES (o que cada nome liga, pro comportamento nao inventar):
 *
 *   .acesso-body        corpo das telas de acesso; troca o overflow:hidden do
 *                       app por rolagem, porque a fila do dono cresce.
 *   .acesso-palco       centraliza o cartao na tela, na horizontal e na vertical.
 *   .acesso-cartao      o cartao. Uma das quatro <section> por vez fica visivel;
 *                       o resto usa o atributo [hidden]. Nunca esconda por classe.
 *   .acesso-cartao-largo variante da tela do dono, que e lista e precisa de mais
 *                       largura.
 *   .acesso-marca       logo mais nome. Reusa .logo-symbol e .logo-text.
 *   .acesso-titulo      titulo do cartao.
 *   .acesso-sub         linha de apoio embaixo do titulo.
 *   .acesso-sub-clara   variante mais legivel, pra texto que a pessoa precisa ler.
 *   .acesso-recado      bloco de recado com icone. Sozinho nao tem cor:
 *                       .acesso-recado-erro pinta de vermelho,
 *                       .acesso-recado-aviso de roxo e
 *                       .acesso-recado-ok de verde.
 *   .acesso-campos      pilha de campos mais o botao de enviar.
 *   .acesso-botao       botao de largura cheia. Vai SEMPRE junto de .btn.
 *   .acesso-rodape      linha final com o link pra outra tela.
 *   .acesso-selo        circulo do icone de espera.
 *   .acesso-centro      centraliza o texto.
 *   .acesso-resumo      caixa de dado em duas colunas (rotulo e valor).
 *   .acesso-topo        cabecalho da tela do dono.
 *   .acesso-quem        e-mail de quem esta logado.
 *   .acesso-secao       titulo de secao mais contagem.
 *   .acesso-lista       pilha de linhas de conta.
 *   .acesso-linha       uma conta. .acesso-linha-info a esquerda,
 *                       .acesso-linha-acoes a direita.
 *   .acesso-linha-nome  e-mail da conta.
 *   .acesso-linha-quando data, em texto apagado.
 *   .acesso-vazio       texto de lista sem nenhuma linha.
 *   .acesso-acoes-rodape par de botoes do fim da tela do dono.
 */

/* O atributo hidden so esconde porque a folha padrao do navegador da
   display:none a ele. QUALQUER regra de display do autor vence isso, e tanto o
   cartao quanto a caixa de recado usam display:flex - entao as quatro telas
   apareciam juntas na mesma pagina, e o erro de senha aparecia sem ninguem ter
   errado senha. Esta regra devolve ao hidden o poder de esconder.
   Mesmo motivo do .hidden com !important que o styles.css ja carrega. */
[hidden] { display: none !important; }

.acesso-body {
  /* O app trava o corpo em overflow:hidden. Aqui a fila do dono cresce com o
     numero de contas, entao a tela precisa rolar. */
  height: auto;
  min-height: 100vh;
  overflow-y: auto;
}

.acesso-palco {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px;
}

.acesso-cartao {
  width: 380px;
  max-width: 100%;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--border-light);
  border-radius: var(--radius);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.acesso-cartao-largo { width: 620px; }

.acesso-marca { display: flex; align-items: center; gap: 12px; }

.acesso-titulo { font-size: 20px; font-weight: 700; margin: 0 0 6px 0; }

.acesso-sub { font-size: 12px; color: var(--muted); margin: 0; line-height: 1.45; }

.acesso-sub-clara { color: var(--text2); line-height: 1.6; }

.acesso-recado {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  padding: 12px 14px;
  font-size: 12px;
  line-height: 1.5;
}

.acesso-recado svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
  fill: none;
  stroke-width: 2;
}

.acesso-recado-erro {
  background: rgba(255,71,87,.12);
  border-color: rgba(255,71,87,.35);
  color: #ff9aa5;
}

.acesso-recado-erro svg { stroke: #ff9aa5; }

.acesso-recado-aviso {
  background: rgba(169,79,255,.18);
  border-color: rgba(169,79,255,.35);
  color: #d9c0ff;
}

.acesso-recado-aviso svg { stroke: #d9c0ff; }

.acesso-recado-ok {
  background: rgba(77,208,122,.15);
  border-color: rgba(77,208,122,.35);
  color: var(--green);
}

.acesso-recado-ok svg { stroke: var(--green); }

.acesso-campos { display: flex; flex-direction: column; gap: 12px; }

/* O .field do styles.css separa irmaos com margin-top. Aqui quem separa e o
   gap da pilha, entao a margem herdada viraria espaco dobrado. */
.acesso-campos .field + .field { margin-top: 0; }

.acesso-botao {
  width: 100%;
  /* O .btn do sistema tem 39px de altura. No dedo isso erra o alvo, entao as
     telas de acesso, que sao as unicas que alguem abre no celular sem estar
     logado, sobem pro minimo de 44px. O flex existe pra centrar o texto na
     altura nova: com a altura crescendo por min-height, o texto ficaria no topo. */
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.acesso-rodape { text-align: center; font-size: 12px; color: var(--muted); margin: 0; }

.acesso-rodape a { color: var(--accent); text-decoration: none; }

.acesso-rodape a:hover { color: var(--accent-dark); }

.acesso-selo { display: flex; justify-content: center; padding: 4px 0; }

.acesso-selo svg {
  width: 64px;
  height: 64px;
  padding: 18px;
  border-radius: 50%;
  background: rgba(255,206,84,.12);
  border: 1px solid rgba(255,206,84,.3);
  fill: none;
  stroke: #ffce54;
  stroke-width: 1.8;
}

.acesso-centro { text-align: center; }

.acesso-resumo {
  background: var(--panel2);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.acesso-resumo-linha {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.acesso-resumo-linha span:first-child { color: var(--muted); }

.acesso-resumo-linha span:last-child { color: var(--text); }

.acesso-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.acesso-quem { font-size: 12px; color: var(--muted); }

.acesso-secao { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }

.acesso-secao .side-section-title { margin-bottom: 0; }

.acesso-lista { display: flex; flex-direction: column; gap: 10px; }

.acesso-linha {
  background: var(--panel2);
  border-radius: var(--radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.acesso-linha-info { min-width: 0; }

.acesso-linha-nome {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
}

.acesso-linha-quando { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* 10px e o mesmo respiro do .btn-row do sistema. */
.acesso-linha-acoes { display: flex; gap: 10px; flex-shrink: 0; }

.acesso-linha-acoes .btn { min-height: 44px; }

.acesso-vazio { font-size: 12px; color: var(--muted); }

.acesso-acoes-rodape { display: flex; gap: 10px; flex-wrap: wrap; }

.acesso-acoes-rodape .btn {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

/* ===== CELULAR =====
 * Vem depois das bases de proposito: @media nao acrescenta especificidade, e
 * sobrescrita escrita antes da base nao ganha da base. */
@media (max-width: 520px) {
  /* 36px de folga de cada lado, pro cartao nao encostar na borda e continuar
     lendo como cartao em cima do fundo. */
  .acesso-palco { padding: 36px; align-items: flex-start; }

  .acesso-cartao,
  .acesso-cartao-largo { width: 100%; padding: 24px; }

  /* Na lista, o par de botoes desce pra baixo do e-mail: lado a lado com o
     e-mail eles espremem os dois. */
  .acesso-linha { flex-direction: column; align-items: stretch; }

  .acesso-linha-acoes .btn { flex: 1; justify-content: center; }
}