/* ==========================================================================
   Tela de entrada — o que o login.css não tem

   O login.css nasceu para a porta do painel: uma marca, um formulário, um
   botão. Aqui há duas portas na mesma tela, e é só isso que este arquivo
   acrescenta — as abas, o campo de nome, o link de volta e o recado para o
   lojista. Cores, campos, botão e tema continuam vindo de lá, inclusive no
   escuro, porque duplicar os tokens seria criar dois lugares para errar.

   A ordem no HTML importa: este arquivo vem depois do login.css.
   ========================================================================== */

/* ---------- o que o painel dava de graça ----------
   O login.css nunca foi uma folha independente: ele sempre carregou junto do
   style.css, e herdava duas coisas de lá sem dizer. Numa página que não é o
   painel, as duas faltam, e o sintoma não aponta para a causa:

     box-sizing — o login.css põe `width: 100%` e `padding: 14px 16px` no
       mesmo campo. Com o box-sizing padrão do navegador isso vira 100% MAIS
       34px, e o campo vaza para fora do cartão pela direita.
     .sr-only — os rótulos dos campos existem para o leitor de tela, com o
       placeholder fazendo o papel visual. Sem a classe eles simplesmente
       aparecem, e a tela ganha "E-mail" escrito duas vezes.

   Ficam aqui, e não emendados no login.css, para o painel continuar sendo
   dono do reset dele. */
*, *::before, *::after { box-sizing: border-box; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* A .login-gate é `position: fixed` — feita para cobrir o painel por cima.
   Aqui ela é a página, e fixed continua servindo: centraliza sem depender da
   altura do body e não sofre com a barra do navegador do celular subindo e
   descendo. Só o fundo do documento precisa combinar, senão aparece uma
   faixa branca quando a rolagem estica além do fim. */
.pagina-entrar { margin: 0; background: #F4F4F6; font-family: var(--fonte-smartcharge, "Sora", system-ui, sans-serif); }
:root[data-theme="dark"] .pagina-entrar { background: #08080a; }

.entrada { padding-top: max(28px, env(safe-area-inset-top)); }

/* ---------- voltar ----------
   Fica no fluxo, acima da marca, e não colado num canto: numa tela de 360px
   o canto superior esquerdo é onde o polegar não chega e onde o navegador
   costuma pôr o próprio botão de voltar. */
.entrada-voltar {
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-bottom: -10px;
  padding: 8px 12px 8px 8px;
  border-radius: 999px;
  color: var(--lg-suave);
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-decoration: none;
  transition: color .16s ease, background-color .16s ease;
}
.entrada-voltar svg { width: 17px; height: 17px; }
.entrada-voltar:hover { color: var(--lg-texto); background: var(--lg-anel-trilho); }
.entrada-voltar:focus-visible {
  outline: 2px solid var(--lg-primaria);
  outline-offset: 2px;
}

/* ---------- abas ----------
   Duas abas, largura igual, com um trilho que desliza por baixo. O trilho é
   um elemento só, movido por transform: animar `left` obrigaria o navegador
   a recalcular layout a cada quadro, e num celular modesto isso engasga.

   O grid tem uma terceira linha implícita de 3px onde o trilho mora; por
   isso `grid-template-columns: 1fr 1fr` e o trilho ocupando a coluna 1 com
   translate para a 2. */
/* [hidden] sozinho perde para o `display: grid` de baixo. Sem esta linha as
   abas continuam na tela depois do cadastro, convidando a pessoa a tentar
   entrar numa conta que ainda está pendente. */
.entrada-abas[hidden] { display: none; }

.entrada-abas {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--lg-linha);
}
.entrada-aba {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 11px 6px 13px;
  border-radius: 10px 10px 0 0;
  color: var(--lg-suave);
  font: 600 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  cursor: pointer;
  transition: color .16s ease, background-color .16s ease;
}
.entrada-aba:hover { color: var(--lg-texto); background: var(--lg-anel-trilho); }
.entrada-aba:focus-visible { outline: 2px solid var(--lg-primaria); outline-offset: -2px; }
.entrada-aba.is-ativa { color: var(--lg-texto); }

.entrada-abas-trilho {
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 50%;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: var(--lg-primaria);
  transition: transform .22s cubic-bezier(.4, 0, .2, 1);
}
.entrada-abas:has(#abaCriar[aria-selected="true"]) .entrada-abas-trilho {
  transform: translateX(100%);
}

/* ---------- textos de apoio ---------- */
.entrada-dica {
  margin: -6px 0 0;
  color: var(--lg-suave);
  font: 400 13px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.entrada-dica.is-erro { color: var(--lg-erro); }

.entrada-nota {
  margin: 0;
  max-width: 34ch;
  text-align: center;
  text-wrap: balance;
  color: var(--lg-suave);
  font: 400 13px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
/* O recado só vale para quem está tentando entrar. Na aba de criar conta ele
   contradiz a própria tela: "use o e-mail que já existe" embaixo de um
   formulário que serve justamente para não ter conta ainda. */
.entrada-nota[hidden] { display: none; }

.entrada-sem-script {
  margin: 0;
  padding: 24px;
  text-align: center;
  font: 400 15px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- formulário escondido ----------
   [hidden] sozinho perde para o `display: grid` que o login.css põe na
   .login-form. Sem isto as duas abas apareceriam empilhadas. */
.login-form[hidden] { display: none; }

/* ---------- respeito a "menos movimento" ---------- */
@media (prefers-reduced-motion: reduce) {
  .entrada-abas-trilho { transition: none; }
}

/* ---------- a porta do lojista ----------
   Separada do formulário por uma linha, porque é outro caminho e não outro
   campo: quem chega aqui como motorista não deve tropeçar nela, e quem é
   lojista precisa achá-la sem ler tudo. */
.entrada-lojista {
  width: 100%;
  display: grid;
  justify-items: center;
  gap: 10px;
  padding-top: 20px;
  border-top: 1px solid var(--lg-linha);
  text-align: center;
}
.entrada-lojista[hidden] { display: none; }

.entrada-lojista p {
  margin: 0;
  color: var(--lg-texto);
  font: 600 14px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

.entrada-lojista-botao {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1px solid var(--lg-linha);
  border-radius: 999px;
  background: var(--lg-superficie);
  color: var(--lg-texto);
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-decoration: none;
  transition: border-color .16s ease, background-color .16s ease;
}
.entrada-lojista-botao svg { width: 18px; height: 18px; }
.entrada-lojista-botao:hover {
  border-color: var(--lg-primaria);
  background: color-mix(in srgb, var(--lg-primaria) 7%, var(--lg-superficie));
}
.entrada-lojista-botao:focus-visible {
  outline: 2px solid var(--lg-primaria);
  outline-offset: 2px;
}

.entrada-lojista small {
  max-width: 34ch;
  color: var(--lg-suave);
  font: 400 12.5px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-reduced-motion: reduce) {
  .entrada-lojista-botao { transition: none; }
}

/* ==========================================================================
   Confirmação de e-mail
   ========================================================================== */

.verificar-estado {
  display: grid;
  justify-items: center;
  gap: 12px;
  text-align: center;
  width: 100%;
}
.verificar-estado[hidden] { display: none; }

.verificar-estado h2 {
  margin: 0;
  font-size: 1.24rem;
  letter-spacing: -0.02em;
  color: var(--lg-texto);
}
.verificar-estado p {
  margin: 0;
  max-width: 34ch;
  text-wrap: balance;
  color: var(--lg-suave);
  font-size: 0.93rem;
  line-height: 1.5;
}

.verificar-marca {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 50%;
}
.verificar-marca svg { width: 26px; height: 26px; }
.verificar-marca-ok   { background: color-mix(in srgb, var(--lg-ok) 16%, transparent); color: var(--lg-ok); }
.verificar-marca-erro { background: var(--lg-erro-fundo); color: var(--lg-erro); }

/* O anel de "confirmando". Mesmo desenho do botão que carrega, para a tela
   não apresentar dois vocabulários de espera diferentes. */
.verificar-girando {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 3px solid var(--lg-anel-trilho);
  border-top-color: var(--lg-primaria);
  animation: verificar-gira 0.8s linear infinite;
}
@keyframes verificar-gira { to { transform: rotate(360deg); } }

.verificar-botao {
  width: auto !important;
  padding: 0 24px;
  text-decoration: none;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}
.verificar-form { width: 100%; margin-top: 4px; }
.verificar-form[hidden] { display: none; }
.verificar-voltar { justify-self: center; margin: 0; }

/* ---------- "confira seu e-mail", na tela de entrada ---------- */
.entrada-conferir {
  display: grid;
  justify-items: center;
  gap: 12px;
  width: 100%;
  text-align: center;
}
.entrada-conferir[hidden] { display: none; }
.entrada-conferir strong { color: var(--lg-texto); word-break: break-all; }
.entrada-conferir p {
  margin: 0;
  max-width: 36ch;
  text-wrap: balance;
  color: var(--lg-suave);
  font-size: 0.93rem;
  line-height: 1.5;
}
.entrada-reenviar {
  appearance: none;
  border: 0;
  background: none;
  padding: 6px 4px;
  color: var(--lg-primaria);
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.entrada-reenviar:disabled { color: var(--lg-suave); cursor: default; text-decoration: none; }
.entrada-reenviar:focus-visible { outline: 2px solid var(--lg-primaria); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .verificar-girando { animation-duration: 2.4s; }
}