/* ============================================================
   SoftClinic Genesys — Auth screens ("Login SSO profissional")
   Estilo compartilhado por: login, recovery-password, remember-login,
   login-challenge, error, ativacao. Fonte: Poppins — uma so, em todo o ecossistema. Onde havia duas faces (Sora nos títulos,
   Manrope no texto), a hierarquia agora vem do PESO: 700/800 em título e marca, 400/500/600 no
   restante. Trocar de face aqui sem trocar nos outros doze projetos quebra a unidade visual.

   TEMA POR PRODUTO (T9, spec `identidade-centralizada-no-sso`, D11/E1) — custom properties.
   `--lf-accent`/`--lf-accent-dark`/`--lf-accent-focus`/`--lf-accent-soft` no :root abaixo são o
   AZUL de sempre (produto padrão, clínica) — o valor que toda regra deste arquivo já usava
   hardcoded. `TemaDoProduto` (Java) resolve o produto pelo `redirect_uri` e cada template imprime
   um `style="--lf-accent:...;..."` no `<body>` (herda por cascata para tudo dentro) SÓ quando o
   produto não é o padrão — ponto/RH sobrescrevem; a clínica não precisa, os valores já são estes.
   As regras abaixo usam `var(--nome)` sem segundo argumento — sem fallback explícito, mas nunca
   sem valor: o :root acima sempre define as quatro variáveis, então mesmo sem o `<body>` themed
   (ex.: alguém abrindo direto o auth.css) o navegador resolve para o azul padrão. */
:root{
  --lf-accent:#2f5bff;
  --lf-accent-dark:#1e42d8;
  --lf-accent-focus:rgba(47,91,255,.14);
  --lf-accent-soft:#eef2ff;
}

*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{min-height:100vh;font-family:Poppins,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;color:#0a1330;background:#f6f8fd}
a{color:var(--lf-accent);text-decoration:none;transition:color .15s}
a:hover{color:var(--lf-accent-dark)}

@keyframes lf-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}

/* ---- layout ---- */
.lf-stage{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;background:linear-gradient(160deg,#eaf1ff 0%,#dfe9ff 45%,#f4f9ff 100%)}

/* ---- painel editorial (esquerda) ---- */
/* sticky + altura da viewport, e `align-self:start` para nao esticar: no grid, esta coluna crescia
   junto com o card do formulario e o hero ("Seu X está quase pronto") ia parar no MEIO do scroll —
   visivel só depois de rolar o forms inteiro (02/10/2026, tela de ativação). Presa na viewport, a
   coluna acompanha a rolagem e o texto fica na tela o tempo todo. */
.lf-left{display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:56px 64px;overflow:hidden;position:sticky;top:0;height:100vh;height:100dvh;align-self:start}
.lf-brand{display:flex;flex-direction:column;gap:3px;line-height:1}
.lf-brand b{font-family:Sora,sans-serif;font-weight:800;font-size:26px;letter-spacing:-.02em;color:#0a1330}
.lf-brand>span{font-size:11px;font-weight:600;letter-spacing:.42em;color:var(--lf-accent)}
.lf-hero{max-width:520px;display:flex;flex-direction:column;gap:22px}
.lf-hero h1{margin:0;font-family:Poppins,sans-serif;font-weight:700;font-size:48px;line-height:1.1;letter-spacing:-.03em;color:#0a1330;text-wrap:pretty}
.lf-hero p{margin:0;font-size:17px;line-height:1.65;color:#5a6a8c;text-wrap:pretty}

/* ---- a marca com uma cor por letra: as sete cores tiradas do logo da Reinventar ---- */
/*
   Por que `nth-child(7n+…)` e nao uma cor fixa por posicao: o texto da marca vem do TEMA
   (`${tema.marca}`), entao o numero de letras nao e conhecido aqui. O ciclo de sete se repete
   e funciona para qualquer palavra — inclusive se um cliente novo trouxer a propria marca.

   As cores sao da REINVENTAR e nao seguem `--lf-accent`: elas identificam a casa, e nao o
   produto. O que muda por produto e o resto da tela.
*/
.lf-logo span:nth-child(7n+1){color:#f69680}
.lf-logo span:nth-child(7n+2){color:#00a39c}
.lf-logo span:nth-child(7n+3){color:#37b34a}
.lf-logo span:nth-child(7n+4){color:#e75354}
.lf-logo span:nth-child(7n+5){color:#e69045}
.lf-logo span:nth-child(7n+6){color:#f1889c}
.lf-logo span:nth-child(7n){color:#1d71b8}

/* ---- o mesmo efeito num trecho da chamada (ex.: "experiências", "acesso com") ---- */
.lf-rainbow span:nth-child(7n+1){color:#f69680}
.lf-rainbow span:nth-child(7n+2){color:#00a39c}
.lf-rainbow span:nth-child(7n+3){color:#37b34a}
.lf-rainbow span:nth-child(7n+4){color:#e75354}
.lf-rainbow span:nth-child(7n+5){color:#e69045}
.lf-rainbow span:nth-child(7n+6){color:#f1889c}
.lf-rainbow span:nth-child(7n){color:#1d71b8}
.lf-meta{display:flex;flex-wrap:wrap;gap:28px;font-size:13px;color:#8590a8}
.lf-meta a{color:inherit}
.lf-meta a:hover{color:var(--lf-accent)}

/* ---- card (direita) ---- */
/* `safe center`: centraliza quando cabe, alinha no topo quando NAO cabe.
   Com `center` puro, um cartao mais alto que a janela e centralizado e o TOPO fica cortado acima da
   area visivel — sem jeito de rolar ate ele. Medido em 2026-08-26 na tela de ativacao: cartao de
   885px numa janela de 884px, topo em -?px e a pagina rolando sem alcancar o inicio do formulario.
   A palavra `safe` existe exatamente para isso. Navegador que nao a entende ignora a segunda linha e
   fica com `center`, que e o comportamento de antes. */
.lf-right{display:flex;align-items:center;align-items:safe center;justify-content:center;padding:48px 40px}
.lf-card{width:100%;max-width:420px;display:flex;flex-direction:column;gap:26px;padding:40px 38px;background:#fff;border-radius:18px;box-shadow:0 24px 60px -30px rgba(20,40,110,.28)}

.lf-head{display:flex;flex-direction:column;gap:8px;text-align:center}
.lf-head h2{margin:0;font-family:Poppins,sans-serif;font-weight:700;font-size:29px;letter-spacing:-.02em;color:#0a1330}
/* O nome do cliente no "Bem-vindo de volta a {cliente}" — na cor do produto (tema) e MENOR que o
   título (o nome é um qualificador, não o assunto da frase; no tamanho do h2 ele dominava o cartão
   — ajuste pedido pelo usuário em 02/10/2026). Inline no h2, então escala com ele. */
.lf-cliente{color:var(--lf-accent);font-size:.68em;font-weight:600;letter-spacing:-.01em}
.lf-head p{margin:0;font-size:15px;line-height:1.5;color:#5a6a8c}

/* ícone circular no topo do card (challenge / error) */
.lf-icon{width:52px;height:52px;margin:0 auto;flex:none;border-radius:15px;display:flex;align-items:center;justify-content:center;background:var(--lf-accent-soft);color:var(--lf-accent)}
.lf-icon.warn{background:#fff5ec;color:#e07a2d}

/* ---- formulário ---- */
.lf-form{display:flex;flex-direction:column;gap:18px}
.lf-field{display:flex;flex-direction:column;gap:7px}
.lf-flabel{font-size:13px;font-weight:600;color:#33405e}
.lf-labelrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.lf-labelrow a{font-size:13px;font-weight:600}
.lf-inputrow{position:relative;display:flex}
.lf-input{flex:1;width:100%;min-width:0;height:48px;padding:0 14px;border:1px solid #d8def0;border-radius:10px;background:#fff;font-family:inherit;font-size:15px;color:#0a1330;transition:border-color .15s,box-shadow .15s}
.lf-input.has-eye{padding-right:46px}
.lf-input::placeholder{color:#9aa7c2}
.lf-input:focus{outline:none;border-color:var(--lf-accent);box-shadow:0 0 0 4px var(--lf-accent-focus)}
.lf-input:-webkit-autofill,.lf-input:-webkit-autofill:hover,.lf-input:-webkit-autofill:focus{-webkit-text-fill-color:#0a1330;caret-color:#0a1330;transition:background-color 100000s ease-in-out 0s}
.lf-eye{position:absolute;right:6px;top:6px;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:0;border-radius:8px;background:transparent;color:#7c89a6;cursor:pointer;transition:color .15s,background .15s}
.lf-eye:hover{color:var(--lf-accent);background:var(--lf-accent-soft)}
.lf-eye:focus-visible{outline:2px solid var(--lf-accent);outline-offset:1px}

.lf-remember{display:flex;align-items:center;gap:9px;font-size:14px;color:#33405e;cursor:pointer;user-select:none}
.lf-remember input{width:16px;height:16px;margin:0;flex:none;accent-color:var(--lf-accent);cursor:pointer}

.lf-submit{display:flex;align-items:center;justify-content:center;gap:10px;height:50px;margin-top:2px;border:0;border-radius:10px;background:var(--lf-accent);color:#fff;font-family:inherit;font-size:15.5px;font-weight:700;letter-spacing:.01em;cursor:pointer;transition:background .15s,transform .1s}
.lf-submit:hover{background:var(--lf-accent-dark)}
a.lf-submit,a.lf-submit:hover{color:#fff;text-decoration:none}
.lf-submit:active{transform:translateY(1px)}
.lf-submit[disabled]{cursor:default;background:#8ea6ff}
.lf-spinner{width:18px;height:18px;flex:none;border-radius:50%;border:2.2px solid rgba(255,255,255,.4);border-top-color:#fff;animation:lf-spin .7s linear infinite}

/* ---- alertas (erro / sucesso / info) ---- */
.lf-alert{display:flex;align-items:flex-start;gap:9px;margin:0;padding:12px 14px;border-radius:10px;font-size:13.5px;line-height:1.5;text-wrap:pretty}
.lf-alert::before{content:"";width:6px;height:6px;margin-top:7px;flex-shrink:0;border-radius:50%;background:currentColor}
.lf-alert.err{color:#b42334;background:#fff4f5;border:1px solid #f7d4d9}
.lf-alert.ok{color:#0a7a52;background:#f1fbf7;border:1px solid #cdeee0}
.lf-alert.info{color:#33405e;background:#fbfcff;border:1px solid #e3e8f5}

/* ---- indicador de etapas (recuperação) ---- */
.lf-steps{display:flex;align-items:center;justify-content:center;gap:8px}
.lf-step{display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;color:#9aa7c2;white-space:nowrap}
.lf-step i{width:22px;height:22px;flex:none;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#eef2fb;color:#8590a8;font-style:normal;font-size:11.5px;font-weight:700}
.lf-step.done{color:#5a6a8c}
.lf-step.done i{background:var(--lf-accent-soft);color:var(--lf-accent)}
.lf-step.on{color:#0a1330}
.lf-step.on i{background:var(--lf-accent);color:#fff}
.lf-steps hr{width:20px;height:1px;margin:0;border:0;background:#dbe2f3}

/* ---- código de 6 dígitos (OTP) ---- */
.lf-code-row{display:flex;gap:8px}
.lf-code{flex:1;width:100%;min-width:0;height:54px;text-align:center;border:1px solid #d8def0;border-radius:10px;background:#fff;font-family:Poppins,sans-serif;font-size:20px;font-weight:700;color:#0a1330;transition:border-color .15s,box-shadow .15s}
.lf-code:focus{outline:none;border-color:var(--lf-accent);box-shadow:0 0 0 4px var(--lf-accent-focus)}

/* ---- requisitos de senha (tela de resetar senha) ---- */
.lf-rules{display:flex;flex-direction:column;gap:7px;margin:0;padding:13px 15px;list-style:none;border:1px solid #e3e8f5;border-radius:10px;background:#fbfcff}
.lf-rules li{display:flex;align-items:center;gap:9px;font-size:12.5px;color:#7a86a3;transition:color .15s}
.lf-rules li::before{content:"";width:15px;height:15px;flex:none;border-radius:50%;border:1.5px solid #d8def0;background:#fff;transition:border-color .15s,background .15s}
.lf-rules li.ok{color:#0a7a52}
.lf-rules li.ok::before{border-color:#12a674;background:#12a674 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 12' fill='none' stroke='%23fff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 6.2 5 10 13 1.5'/%3E%3C/svg%3E") center/9px no-repeat}

/* ---- blocos auxiliares ---- */
.lf-note{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border:1px solid #e3e8f5;border-radius:10px;background:#fbfcff}
.lf-note::before{content:"";width:6px;height:6px;margin-top:7px;flex-shrink:0;border-radius:50%;background:var(--lf-accent)}
.lf-note p{margin:0;font-size:13.5px;line-height:1.55;color:#5a6a8c;text-wrap:pretty}
.lf-note b{color:#0a1330;font-weight:600}

.lf-hint{margin:0;text-align:center;font-size:13.5px;line-height:1.55;color:#5a6a8c;text-wrap:pretty}
.lf-hint b{color:#0a1330;font-weight:600}

.lf-badge-wrap{display:flex;justify-content:center}
.lf-badge{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:8px;background:var(--lf-accent-soft);color:#4a5c85;font-size:12.5px;font-weight:600}

/* linha final do card (separada por um filete) */
.lf-alt{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;margin:0;padding-top:20px;border-top:1px solid #e6eaf5;font-size:13px;line-height:1.6;color:#7a86a3;text-align:center}
.lf-alt a{font-weight:600}

/* ---- página de erro ---- */
.lf-eyebrow{margin:0;text-align:center;font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:#9aa7c2}
.lf-tech{padding:12px 14px;border-radius:10px;border:1px solid #e3e8f5;background:#fbfcff}
.lf-tech-t{margin:0 0 4px;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9aa7c2}
.lf-tech-m{margin:0;font-size:12px;line-height:1.5;color:#5a6a8c;font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-word}

/* ---- marca / suporte dentro do card: só mobile, onde o painel da esquerda some ---- */
.lf-mbrand,.lf-mmeta{display:none}

/* ============================================================
   RESPONSIVO
   ============================================================ */
@media (max-width:1180px){
  .lf-left{padding:44px 44px}
  .lf-hero h1{font-size:40px}
  .lf-hero p{font-size:16px}
  .lf-right{padding:40px 28px}
  .lf-card{padding:36px 30px}
}

/* abaixo de 900px o painel editorial sai e o card vira a tela inteira */
@media (max-width:900px){
  .lf-stage{grid-template-columns:1fr;background:linear-gradient(170deg,#eaf1ff 0%,#dfe9ff 55%,#e6edfd 100%)}
  .lf-left{display:none}
  .lf-right{padding:28px 18px calc(28px + env(safe-area-inset-bottom))}
  .lf-card{max-width:460px;gap:22px;padding:32px 24px}
  .lf-head h2{font-size:25px}
  .lf-mbrand{display:flex;flex-direction:column;align-items:center;gap:3px;line-height:1}
  .lf-mbrand b{font-family:Sora,sans-serif;font-weight:800;font-size:21px;letter-spacing:-.02em;color:#0a1330}
  .lf-mbrand>span{font-size:10px;font-weight:600;letter-spacing:.38em;color:var(--lf-accent)}
  .lf-mmeta{display:flex;flex-direction:column;gap:4px;margin:-6px 0 0;text-align:center;font-size:11.5px;line-height:1.5;color:#9aa7c2}
  .lf-mmeta a{color:inherit;font-weight:600}
  .lf-mmeta a:hover{color:var(--lf-accent)}
  /* alvos de toque um pouco maiores */
  .lf-input{height:50px}
  .lf-submit{height:52px}
}

@media (max-width:400px){
  .lf-right{padding:20px 14px calc(20px + env(safe-area-inset-bottom))}
  .lf-card{padding:26px 18px}
  .lf-head h2{font-size:22px}
  .lf-code-row{gap:6px}
  .lf-code{height:48px;font-size:18px}
  .lf-steps{gap:5px}
  .lf-step span{display:none}
  .lf-steps hr{width:14px}
}

/* ---- cartão largo: a ativação tem SETE campos ----
   O `.lf-card` de 420px foi desenhado para o login, que tem dois. Com sete, cada linha vira uma
   tira estreita e o cartão fica alto e fino. Modificador próprio, e não largura nova no `.lf-card`,
   porque o login e a recuperação de senha continuam certos como estão. */
.lf-card.lf-card-larga{max-width:560px}
@media (max-width:900px){ .lf-card.lf-card-larga{max-width:460px} }

/* ---- rótulo de seção dentro do formulário ----
   Nasceu com o pré-preenchimento da ativação (2026-08-27): com quatro dos sete campos já vindos da
   compra, os três que sobram precisam se anunciar, senão a tela continua parecendo sete campos para
   digitar. Regra NOVA e só aditiva — o `.lf-card-larga` e o resto do arquivo ficam como estavam.
   Só a ativação usa; login e recuperação de senha não têm seções. */
.lf-secao{display:flex;align-items:center;gap:10px;margin:2px 0 -4px;font-family:Poppins,sans-serif;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#7a86a3}
.lf-secao::after{content:"";flex:1;height:1px;background:#e6eaf5}

/* ---- espera do preparo do ambiente (tela de ativação) ----
   Nasceu em 2026-08-27. Antes do 202 virar uma espera de verdade, esta tela não tinha nada aqui: a
   frase "use este mesmo link novamente em um minuto" era mostrada dentro do `.lf-alert.err`, o que
   pintava de ERRO o caminho normal do fluxo — o ambiente demora até dois minutos para nascer, e
   isso é o esperado, não um defeito.

   Regras NOVAS e só aditivas: nada abaixo toca no login, na recuperação de senha ou no formulário
   de ativação. Reaproveitam o que já existe — `lf-spin` (o mesmo giro do `.lf-spinner`), a paleta
   dos `.lf-rules` e a caixa do `.lf-note`. */
.lf-espera{display:flex;flex-direction:column;gap:20px}

.lf-preparo{display:flex;flex-direction:column;gap:15px;margin:0;padding:18px 18px 20px;list-style:none;border:1px solid #e3e8f5;border-radius:12px;background:#fbfcff}
.lf-preparo li{display:flex;flex-wrap:wrap;align-items:flex-start;gap:0 11px}
/* Estado PARADO: a bolinha vazia dos `.lf-rules`, para o passo que ainda não começou. */
.lf-preparo li::before{content:"";width:13px;height:13px;flex:none;margin:4px 2px 0;border-radius:50%;border:1.5px solid #d8def0;background:#fff}
/* Estado ACONTECENDO AGORA: o mesmo giro do botão de envio. Ele só indica "em curso" — não mede
   quanto falta, porque o servidor não sabe medir isso (ver `situacaoDoPreparo`). */
.lf-preparo li.agora::before{width:15px;height:15px;margin:3px 1px 0;border:2.2px solid rgba(47,91,255,.25);border-top-color:var(--lf-accent);background:none;animation:lf-spin .7s linear infinite}
/* Estado FEITO: o mesmo verde do `.lf-rules li.ok`. */
.lf-preparo li.feito::before{width:17px;height:17px;margin:2px 0 0;border:0;border-radius:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2312a674' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/17px no-repeat}
.lf-preparo b{flex:1;min-width:0;font-size:13.5px;font-weight:600;color:#9aa7c2;transition:color .15s;text-wrap:pretty}
.lf-preparo li.agora b{color:#0a1330}
.lf-preparo li.feito b{color:#0a7a52}
/* A sub-linha quebra para a própria linha (`width:100%` num container `flex-wrap:wrap`) e alinha com
   o TÍTULO, não com a marca: 28px = marca (17px) + gap (11px).
   O recuo é `padding`, e não `margin`: o arquivo declara `box-sizing:border-box` lá em cima, então o
   padding cabe dentro dos 100% — com `margin-left` a linha mediria 100% + 28px e vazaria da caixa. */
.lf-preparo span{width:100%;margin-top:2px;padding-left:28px;font-size:12px;line-height:1.4;color:#9aa7c2;text-wrap:pretty;word-break:break-word}

/* Variante azul do `.lf-note` — só para o aviso de "pode fechar a aba", que é informação boa e
   merece se destacar do fundo quase branco dos blocos vizinhos. */
.lf-note.destaque{border-color:#e0e8ff;background:#f2f6ff}
.lf-note.destaque p{color:#33405e;font-size:12.5px}