/*
  Telas de conta com o desenho do login do app (25/10/2026, pedido do Ruã: "prefiro a tela de login do app").
  Mesma composição de Entrar.razor e entrar.css em tela inteira: à esquerda o passo (marca e Voltar no topo, título
  alinhado à esquerda, Google, "ou com email" e o formulário numa coluna de 360 px); à direita a marca, com o selo
  Premium, a linha de telemetria (agitada em cinza, calma em azul, que se desenha ao abrir), a frase grande e o que o
  Premium libera. Abaixo de 900 px a marca vira uma faixa curta entre o topo e o formulário. Carrega depois de
  auth.css e só vale com body.auth-app (entrar, criar conta, senhas e ativar); obrigado e as pontes do app seguem
  com o cartão. Sem degradê nem brilho; azul só na ação, dourado só no que é Premium.
*/
body.auth.auth-app {
  --fundo: #0F0F11; --fundo-2: #0C0C0E; --controle: #27272A; --controle-hover: #303035; --borda: #3A3A40;
  --texto-3: #71717A; --acao: #3B82F6; --acao-forte: #2563EB; --acao-forte-hover: #1D4ED8; --problema: #EF4444;
  --premium: #E5B567; --premium-suave: rgba(229, 181, 103, .12); --serie-cinza: #52525B;
  --curva: cubic-bezier(.2, 0, 0, 1);
  background: var(--fundo); background-image: none;
}

/* ---------- composição: passo à esquerda, marca à direita ---------- */
body.auth.auth-app .auth-grade { grid-template-columns: minmax(440px, 1fr) minmax(0, 1.15fr); }
body.auth.auth-app .auth-coluna { padding: 20px clamp(32px, 6vw, 88px) 24px; }
body.auth.auth-app .auth-topo .marca { gap: 8px; font-size: 15px; font-weight: 600; }
body.auth.auth-app .auth-topo .marca img { width: 24px; height: 24px; border-radius: 6px; }
body.auth.auth-app .voltar { min-height: 32px; padding: 0 12px 0 8px; margin-right: -12px; border-radius: 8px; color: var(--texto-3); font-size: 13px; transition: background-color 90ms ease, color 90ms ease; }
body.auth.auth-app .voltar:hover { background: var(--controle); color: var(--ink); }
body.auth.auth-app main { align-items: center; padding-block: 40px; }
body.auth.auth-app .auth-rodape { justify-content: flex-start; gap: 6px 16px; color: var(--texto-3); font-size: 12px; }
body.auth.auth-app .auth-rodape a { color: var(--texto-3); }

/* O passo: sem cartão, coluna de 360 px como no app. */
body.auth.auth-app .porta {
  max-width: 360px; gap: 16px; padding: 0; border-radius: 0; background: none; box-shadow: none;
  animation: app-passo 280ms var(--curva);
}
body.auth.auth-app.auth-ativar .porta { max-width: 440px; }
@keyframes app-passo { from { opacity: 0; transform: translateY(6px); } }
body.auth.auth-app .cabeca > div:first-child { text-align: left; }
body.auth.auth-app .cabeca h1 { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
body.auth.auth-app .cabeca .intro { margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 20px; text-wrap: pretty; }
body.auth.auth-app .painel { margin-top: 4px; }
body.auth.auth-app .painel > * + * { margin-top: 16px; }

/* Notas de confiança: o rodapé do passo, separado por uma linha, em letra pequena. */
body.auth.auth-app .fatos {
  margin: 4px 0 0; padding: 14px 0 0; gap: 8px; border: 0; border-radius: 0; background: none;
  box-shadow: inset 0 1px 0 var(--linha); color: var(--texto-3); font-size: 12px; line-height: 17px;
}
body.auth.auth-app .fatos li { gap: 8px; }
body.auth.auth-app .fatos svg { width: 14px; height: 14px; margin-top: 1px; color: var(--texto-3); }
body.auth.auth-app .fatos strong { color: var(--muted); }

/* Google: neutro, a marca à esquerda e o texto no centro (entrar-social). */
body.auth.auth-app .sociais { gap: 8px; }
body.auth.auth-app .social {
  min-height: 44px; border: 0; border-radius: 10px; background: var(--controle); font: 600 14px/20px var(--fonte);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06);
}
body.auth.auth-app .social:hover { background: var(--controle-hover); }
body.auth.auth-app .social img, body.auth.auth-app .social svg, body.auth.auth-app .social[aria-busy="true"]::before { left: 14px; }
body.auth.auth-app .ou { margin: 0; color: var(--texto-3); font-size: 12px; line-height: 16px; }

/* Campos: rótulo 13 px, 44 px de altura, fundo da página com contorno, anel azul no foco. */
body.auth.auth-app .form { gap: 14px; }
body.auth.auth-app .campo { gap: 6px; }
body.auth.auth-app .campo > label, body.auth.auth-app .rotulo label { color: var(--ink); font-size: 13px; line-height: 18px; font-weight: 500; }
body.auth.auth-app .campo input {
  height: 44px; padding: 0 14px; border: 0; border-radius: 10px; outline: none; background: var(--fundo);
  box-shadow: inset 0 0 0 1px var(--borda); font-size: 15px;
  transition: box-shadow 120ms var(--curva), background-color 120ms var(--curva);
}
body.auth.auth-app .campo input:hover { box-shadow: inset 0 0 0 1px #4A4A52; }
body.auth.auth-app .campo input:focus, body.auth.auth-app .campo input:focus-visible {
  outline: none; border-radius: 10px; background: var(--fundo-2); box-shadow: inset 0 0 0 1px var(--acao), 0 0 0 3px rgba(59, 130, 246, .18);
}
body.auth.auth-app .campo input[aria-invalid="true"] { box-shadow: inset 0 0 0 1px var(--problema); }
body.auth.auth-app .entrada input { padding-right: 84px; }
body.auth.auth-app .ver-senha { top: 6px; right: 6px; min-width: 0; height: 32px; padding: 0 10px; border-radius: 7px; color: var(--muted); font-size: 12px; font-weight: 600; }
body.auth.auth-app .ver-senha:hover { background: var(--controle); color: var(--ink); }
body.auth.auth-app .erro-campo { font-size: 13px; line-height: 18px; color: var(--problema); }
body.auth.auth-app .erro-campo::before { display: none; }
body.auth.auth-app .dica { color: var(--texto-3); font-size: 12px; line-height: 16px; }

/* Força da senha: quatro traços e o texto na mesma linha (entrar-forca). */
body.auth.auth-app .forca { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
body.auth.auth-app .forca-barras i { height: 3px; }
body.auth.auth-app .forca-texto { color: var(--texto-3); font-size: 12px; line-height: 16px; }

/* Avisos: o de erro com o fundo vermelho bem apagado, como no app. */
body.auth.auth-app .aviso { gap: 8px; padding: 10px 12px; border-radius: 10px; background: var(--sup); box-shadow: inset 0 0 0 1px var(--linha); font-size: 13px; line-height: 18px; }
body.auth.auth-app .aviso-erro { background: rgba(239, 68, 68, .08); box-shadow: inset 0 0 0 1px rgba(239, 68, 68, .28); }
body.auth.auth-app .aviso-erro > svg { color: var(--problema); }
body.auth.auth-app .aviso > svg { margin-top: 1px; }

/* Botões e links */
body.auth.auth-app .botao-grande { min-height: 44px; border-radius: 10px; font-size: 14px; }
body.auth.auth-app .botao-principal { background: var(--acao-forte); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); transition: background-color 90ms ease, transform 90ms ease; }
body.auth.auth-app .botao-principal:hover:not(:disabled) { background: var(--acao-forte-hover); }
body.auth.auth-app .botao-principal:active:not(:disabled) { transform: scale(.985); }
body.auth.auth-app .porta a:not(.botao), body.auth.auth-app .botao-texto { color: var(--acao); font-weight: 500; text-decoration: none; text-underline-offset: 3px; }
body.auth.auth-app .porta a:not(.botao):hover, body.auth.auth-app .botao-texto:hover { text-decoration: underline; }
body.auth.auth-app .rotulo a { font-size: 13px; }
body.auth.auth-app .rodape-form { color: var(--muted); font-size: 13px; line-height: 18px; }
body.auth.auth-app .nota { color: var(--texto-3); font-size: 12px; line-height: 17px; }
body.auth.auth-app .nota strong { color: var(--muted); }
body.auth.auth-app .carregando { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
body.auth.auth-app .carregando::before { content: ""; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--linha-2); border-top-color: var(--acao); animation: girar 800ms linear infinite; }

/* Ativar: as etapas um pouco mais justas, no tom do app. */
body.auth.auth-app .etapa { padding-bottom: 24px; }
body.auth.auth-app .etapa h2 { font-size: 15px; font-weight: 600; }
body.auth.auth-app .etapa-resumo { color: var(--muted); font-size: 13px; line-height: 18px; }
body.auth.auth-app .etapa-marca { background: var(--fundo); font-size: 13px; }

/* ---------- a marca (entrar-marca) ---------- */
.app-marca { display: none; }
body.auth.auth-app .app-marca {
  position: sticky; top: 0; display: flex; flex-direction: column; justify-content: center; gap: 28px; height: 100vh;
  padding: 48px clamp(32px, 5vw, 72px); overflow: hidden;
  background-color: var(--fundo-2); background-image: url("/assets/fundo-pontos.svg"); background-size: 16px 16px;
  box-shadow: inset 1px 0 0 var(--linha);
}
.app-selo {
  display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; padding: 2px 8px 2px 6px; border-radius: 999px;
  background: var(--premium-suave); color: var(--premium); font: 600 11px/16px var(--fonte); letter-spacing: .02em;
}
.app-selo svg { width: 12px; height: 12px; }
.app-linha { display: block; width: 100%; height: clamp(120px, 22vh, 200px); overflow: visible; }
.app-linha path { fill: none; vector-effect: non-scaling-stroke; }
.app-linha-grade { stroke: rgba(255, 255, 255, .05); stroke-width: 1; }
.app-linha-antes { stroke: var(--serie-cinza); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .8; }
.app-linha-depois {
  stroke: var(--acao); stroke-width: 2; stroke-linecap: round; clip-path: inset(-4px 100% -4px 0);
  animation: app-desenha 1400ms var(--curva) 250ms forwards;
}
/* Desenha da esquerda para a direita por recorte: o traço tem espessura fixa na tela, então o tracejado não mede o caminho. */
@keyframes app-desenha { to { clip-path: inset(-4px 0 -4px 0); } }
.app-marca-texto h2 { max-width: 30ch; color: var(--ink); font-size: 26px; line-height: 32px; font-weight: 600; letter-spacing: -.015em; text-wrap: balance; }
.app-marca-texto p { max-width: 46ch; margin-top: 8px; color: var(--muted); font-size: 14px; line-height: 20px; text-wrap: pretty; }
.app-vantagens { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; }
.app-vantagens li {
  display: flex; gap: 12px; align-items: flex-start; color: var(--muted); font-size: 13px; line-height: 18px;
  opacity: 0; animation: app-entra 360ms var(--curva) forwards;
}
.app-vantagens li:nth-child(1) { animation-delay: 300ms; }
.app-vantagens li:nth-child(2) { animation-delay: 360ms; }
.app-vantagens li:nth-child(3) { animation-delay: 420ms; }
.app-vantagens li:nth-child(4) { animation-delay: 480ms; }
@keyframes app-entra { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
.app-vantagens b { display: block; color: var(--ink); font-size: 14px; line-height: 20px; font-weight: 600; }
.app-vantagem-ico {
  display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 8px;
  background: var(--sup); box-shadow: inset 0 0 0 1px var(--linha); color: var(--muted);
}
.app-vantagem-ico svg { width: 16px; height: 16px; }
.app-marca-rodape { color: var(--texto-3); font-size: 12px; line-height: 16px; }

/* ---------- janela estreita e celular: a marca vira uma faixa curta em cima do formulário ---------- */
@media (max-width: 900px) {
  body.auth.auth-app .auth-grade { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; }
  body.auth.auth-app .auth-coluna { display: contents; }
  body.auth.auth-app .auth-topo { order: 1; padding: 16px 20px; }
  body.auth.auth-app .app-marca {
    order: 2; position: static; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px 12px;
    height: auto; padding: 14px 20px; box-shadow: inset 0 1px 0 var(--linha), inset 0 -1px 0 var(--linha);
  }
  body.auth.auth-app .app-linha, body.auth.auth-app .app-vantagens, body.auth.auth-app .app-marca-rodape, body.auth.auth-app .app-marca-texto p { display: none; }
  body.auth.auth-app .app-marca-texto h2 { max-width: none; font-size: 15px; line-height: 20px; }
  body.auth.auth-app .app-selo { align-self: center; }
  body.auth.auth-app main { order: 3; align-items: flex-start; padding: 28px 20px 40px; }
  body.auth.auth-app .auth-rodape { order: 4; padding: 16px 20px 24px; box-shadow: inset 0 1px 0 var(--linha); }
}
@media (max-width: 400px) {
  body.auth.auth-app .auth-topo, body.auth.auth-app .app-marca, body.auth.auth-app main, body.auth.auth-app .auth-rodape { padding-inline: 16px; }
}

/* Reduzir movimento: sem entrada e sem desenho; os estados finais aparecem na hora. */
@media (prefers-reduced-motion: reduce) {
  body.auth.auth-app .porta, .app-vantagens li { animation: none; opacity: 1; }
  .app-linha-depois { animation: none; clip-path: none; }
  body.auth.auth-app .carregando::before { animation-duration: 2s; }
}