/* Telas de autenticação do SSO. Uma face só, Poppins, como no resto do ecossistema: a hierarquia vem do peso.
   `--lf-accent*` é o tema do produto (TemaDoProduto), impresso no <body>; o :root só garante valor a quem abre o arquivo sem ele.
   O claro e o escuro vivem no data-theme do <html> (tema.js), o mesmo atributo do design system usado na ativação. */
:root{
  --lf-accent:#2f5bff;--lf-accent-dark:#1e42d8;--lf-accent-focus:rgba(47,91,255,.14);--lf-accent-soft:#eef2ff;
  --lf-fundo:#ffffff;--lf-texto:#0a1330;--lf-texto-2:#5a6a8c;--lf-rotulo:#33405e;--lf-borda:#cfd5e3;--lf-borda-forte:#a9b2c8;--lf-campo:#ffffff;--lf-marca-campo:#66728f;--lf-linha:#e8ebf3;--lf-suave:#f1f3f8;
  --lf-botao:#0a1330;--lf-botao-texto:#ffffff;--lf-botao-hover-texto:#ffffff;--lf-gira-1:rgba(255,255,255,.35);--lf-gira-2:#ffffff;
  --lf-aviso-fundo:#fdf4ea;--lf-aviso-borda:#f6cb98;--lf-aviso-texto:#7e4512;
  --lf-err-borda:#f7d4d9;--lf-err-fundo:#fff4f5;--lf-err-texto:#b42334;--lf-ok-borda:#cdeee0;--lf-ok-fundo:#f1fbf7;--lf-ok-texto:#0a7a52;--lf-ok-ponto:#12a674;--lf-avi-fundo:#fff3e6;--lf-avi-texto:#a4530c;--lf-ponto:#c6cddd;--lf-etapa:#e4e7f0;--lf-etapa-feita:#0a1330;
  --lf-painel:#f4f6fb;--lf-painel-1:#0a1330;--lf-painel-2:#4c5a78;--lf-azul-logo:#1d71b8;--lf-pausa-fundo:rgba(255,255,255,.8);--lf-pausa-borda:rgba(10,19,48,.16);--lf-pausa-hover:rgba(10,19,48,.08);
  --lf-troca-fundo:#f1f3f8;--lf-troca-borda:#e2e6ef;--lf-troca-ativo:#ffffff;--lf-troca-sombra:0 1px 3px rgba(10,19,48,.16);--lf-troca-ico:#5a6a8c;--lf-troca-ico-ativo:#0a1330;
  --lf-r0:#c9553f;--lf-r1:#007f7a;--lf-r2:#22863a;--lf-r3:#cf3a3b;--lf-r4:#b5641c;--lf-r5:#c84b6e;--lf-r6:#1d71b8;
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --lf-fundo:#0b1124;--lf-texto:#f2f4fb;--lf-texto-2:#a9b3cb;--lf-rotulo:#cdd4e5;--lf-borda:rgba(255,255,255,.18);--lf-borda-forte:rgba(255,255,255,.34);--lf-campo:#111833;--lf-marca-campo:#8d97b0;--lf-linha:rgba(255,255,255,.1);--lf-suave:rgba(255,255,255,.08);
  --lf-botao:#ffffff;--lf-botao-texto:#0a1330;--lf-botao-hover-texto:#0a1330;--lf-gira-1:rgba(10,19,48,.25);--lf-gira-2:#0a1330;
  --lf-aviso-fundo:rgba(230,144,69,.10);--lf-aviso-borda:rgba(230,144,69,.30);--lf-aviso-texto:#f6cb98;
  --lf-err-borda:rgba(231,83,84,.42);--lf-err-fundo:rgba(231,83,84,.12);--lf-err-texto:#ffc2c8;--lf-ok-borda:rgba(55,179,74,.42);--lf-ok-fundo:rgba(55,179,74,.12);--lf-ok-texto:#b6efc2;--lf-ok-ponto:#4fd27a;--lf-avi-fundo:rgba(230,144,69,.15);--lf-avi-texto:#ffcf9f;--lf-ponto:rgba(255,255,255,.28);--lf-etapa:rgba(255,255,255,.16);--lf-etapa-feita:#ffffff;
  --lf-painel:#070b1a;--lf-painel-1:#ffffff;--lf-painel-2:rgba(255,255,255,.72);--lf-azul-logo:#3f9be0;--lf-pausa-fundo:rgba(7,11,26,.72);--lf-pausa-borda:rgba(255,255,255,.2);--lf-pausa-hover:rgba(255,255,255,.14);
  --lf-troca-fundo:rgba(255,255,255,.06);--lf-troca-borda:rgba(255,255,255,.12);--lf-troca-ativo:rgba(255,255,255,.16);--lf-troca-sombra:none;--lf-troca-ico:#a9b3cb;--lf-troca-ico-ativo:#ffffff;
  --lf-r0:#f69680;--lf-r1:#00a39c;--lf-r2:#37b34a;--lf-r3:#e75354;--lf-r4:#e69045;--lf-r5:#f1889c;--lf-r6:#3f9be0;
}
/* Declarados no body, e não no :root, porque é o body que recebe o acento do produto: no :root sairia sempre o azul da clínica.
   No escuro o acento não tem contraste; o tom sai dele, sem uma tabela por produto. */
body{--lf-link:var(--lf-accent-dark);--lf-botao-hover:var(--lf-accent-dark)}
:root[data-theme="dark"] body{--lf-link:color-mix(in srgb,var(--lf-accent) 52%,#ffffff);--lf-botao-hover:#dfe5f5}

*,*::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:var(--lf-texto);background:var(--lf-fundo);transition:background .25s}
a{color:var(--lf-link);font-weight:500;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

@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}.lf-pausa{display:none}}

.lf-stage{min-height:100vh;display:grid;grid-template-columns:1.25fr 1fr;background:var(--lf-fundo)}

/* sticky + altura da viewport, e `align-self:start` para nao esticar: no grid, esta coluna crescia junto com o formulario e o
   hero ia parar no MEIO do scroll (02/10/2026). Presa na viewport, a coluna acompanha a rolagem.
   Grade `1fr auto 1fr`: a marca no alto da primeira linha e a chamada no meio da altura; em coluna ela ficava logo abaixo da marca. */
.lf-left{display:grid;grid-template-rows:1fr auto 1fr;gap:80px;padding:56px 64px;overflow:hidden;position:sticky;top:0;height:100vh;height:100dvh;align-self:start;background:var(--lf-painel);border-right:1px solid var(--lf-linha);color:var(--lf-painel-1);transition:background .25s}
.lf-left>*{position:relative;z-index:1}
.lf-rede{position:absolute!important;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0!important}
.lf-rede--tela{position:fixed!important}
.lf-brand{display:flex;flex-direction:column;gap:4px;line-height:1;align-self:start}
.lf-brand b{font-weight:800;font-size:26px;letter-spacing:-.02em;color:var(--lf-texto)}
.lf-brand>span{font-size:11px;font-weight:600;letter-spacing:.42em;color:var(--lf-painel-2)}
.lf-hero{max-width:600px;display:flex;flex-direction:column;gap:22px;pointer-events:none}
.lf-hero h1{margin:0;font-weight:300;font-size:58px;line-height:1.08;letter-spacing:-.035em;color:var(--lf-painel-1);text-wrap:pretty}
.lf-hero h1 .lf-rainbow{font-weight:600}
.lf-hero p{margin:0;max-width:500px;font-size:16px;line-height:1.65;color:var(--lf-painel-2);text-wrap:pretty}
.lf-meta{position:absolute!important;top:56px;right:64px;display:flex;gap:28px;font-size:13px;color:var(--lf-painel-2)}
.lf-meta a{color:inherit}

/* `nth-child(7n+…)` e nao cor por posicao: o texto da marca vem do tema e o numero de letras nao e conhecido. As cores sao da
   Reinventar: identificam a casa, nao o produto, e por isso nao seguem --lf-accent. */
.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:var(--lf-azul-logo)}
.lf-rainbow span:nth-child(7n+1){color:var(--lf-r0)}
.lf-rainbow span:nth-child(7n+2){color:var(--lf-r1)}
.lf-rainbow span:nth-child(7n+3){color:var(--lf-r2)}
.lf-rainbow span:nth-child(7n+4){color:var(--lf-r3)}
.lf-rainbow span:nth-child(7n+5){color:var(--lf-r4)}
.lf-rainbow span:nth-child(7n+6){color:var(--lf-r5)}
.lf-rainbow span:nth-child(7n){color:var(--lf-r6)}

/* `safe center`: centraliza quando cabe, alinha no topo quando NAO cabe. Com `center` puro, um formulario mais alto que a janela
   fica com o TOPO cortado e sem jeito de rolar ate ele. */
.lf-right{display:flex;align-items:center;align-items:safe center;justify-content:center;padding:76px 56px 56px;min-width:0;background:var(--lf-fundo);transition:background .25s}
.lf-card{width:100%;max-width:380px;display:flex;flex-direction:column;gap:30px}
.lf-card>div:not([class]){display:flex;flex-direction:column;gap:30px}

.lf-head{display:flex;flex-direction:column;gap:10px}
.lf-head h2{margin:0;font-weight:600;font-size:34px;line-height:1.15;letter-spacing:-.03em;color:var(--lf-texto);text-wrap:balance}
.lf-cliente{color:var(--lf-link);font-size:.68em;font-weight:600;letter-spacing:-.01em}
.lf-head p{margin:0;font-size:15px;line-height:1.55;color:var(--lf-texto-2);text-wrap:pretty}
.lf-head b{font-weight:600;color:var(--lf-texto)}

.lf-icon{width:52px;height:52px;flex:none;border-radius:15px;display:flex;align-items:center;justify-content:center;background:var(--lf-suave);color:var(--lf-texto)}
.lf-icon.warn{background:var(--lf-avi-fundo);color:var(--lf-avi-texto)}

.lf-form{display:flex;flex-direction:column;gap:20px}
.lf-field{display:flex;flex-direction:column;gap:8px}
.lf-flabel{font-size:13px;font-weight:500;color:var(--lf-rotulo)}
.lf-labelrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.lf-labelrow a{font-size:13px;padding:13px 0;margin:-13px 0}
.lf-inputrow{position:relative;display:flex}
.lf-input{flex:1;width:100%;min-width:0;height:52px;padding:0 16px;border:1px solid var(--lf-borda);border-radius:12px;background:var(--lf-campo);font-family:inherit;font-size:15px;color:var(--lf-texto);transition:border-color .16s,box-shadow .16s,background .25s}
.lf-input.has-eye{padding-right:52px}
.lf-input::placeholder{color:var(--lf-marca-campo)}
.lf-input:hover{border-color:var(--lf-borda-forte)}
.lf-input:focus{outline:none;border-color:var(--lf-texto);box-shadow:0 0 0 4px var(--lf-accent-focus)}
:root[data-theme="dark"] .lf-input:focus,:root[data-theme="dark"] .lf-code:focus{border-color:var(--lf-link);box-shadow:0 0 0 4px color-mix(in srgb,var(--lf-accent) 34%,transparent)}
.lf-input:-webkit-autofill,.lf-input:-webkit-autofill:hover,.lf-input:-webkit-autofill:focus{-webkit-text-fill-color:var(--lf-texto);caret-color:var(--lf-texto);transition:background-color 100000s ease-in-out 0s}
.lf-eye{position:absolute;right:4px;top:4px;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border:0;border-radius:9px;background:transparent;color:var(--lf-texto-2);cursor:pointer}
.lf-eye:hover{color:var(--lf-texto);background:var(--lf-suave)}
.lf-eye:focus-visible,.lf-submit:focus-visible,.lf-code:focus-visible,.lf-troca button:focus-visible,.lf-idioma:focus-visible{outline:2px solid var(--lf-link);outline-offset:2px}

.lf-remember{display:flex;align-items:center;gap:10px;min-height:44px;margin:-8px 0;font-size:14px;color:var(--lf-rotulo);cursor:pointer;user-select:none}
.lf-remember input{width:16px;height:16px;margin:0;flex:none;accent-color:var(--lf-texto);cursor:pointer}

.lf-submit{display:flex;align-items:center;justify-content:center;gap:10px;height:54px;border:0;border-radius:12px;background:var(--lf-botao);color:var(--lf-botao-texto);font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:background .18s,color .18s}
.lf-submit:hover{background:var(--lf-botao-hover);color:var(--lf-botao-hover-texto)}
a.lf-submit,a.lf-submit:hover{text-decoration:none}
a.lf-submit{color:var(--lf-botao-texto)}
a.lf-submit:hover{color:var(--lf-botao-hover-texto)}
.lf-submit[disabled]{cursor:default;opacity:.6}
.lf-spinner{width:18px;height:18px;flex:none;border-radius:50%;border:2px solid var(--lf-gira-1);border-top-color:var(--lf-gira-2);animation:lf-spin .7s linear infinite}

.lf-alert{display:flex;align-items:flex-start;gap:9px;margin:0;padding:12px 14px;border-radius:12px;font-size:13.5px;line-height:1.5;text-wrap:pretty}
.lf-alert.err{color:var(--lf-err-texto);background:var(--lf-err-fundo);border:1px solid var(--lf-err-borda)}
.lf-alert.ok{color:var(--lf-ok-texto);background:var(--lf-ok-fundo);border:1px solid var(--lf-ok-borda)}
.lf-alert.info{color:var(--lf-rotulo);background:var(--lf-suave);border:1px solid var(--lf-linha)}
.lf-alert.aviso{color:var(--lf-aviso-texto);background:var(--lf-aviso-fundo);border:1px solid var(--lf-aviso-borda);font-weight:500}
.lf-alert.aviso svg{flex:none;margin-top:1px}
.lf-alert.aviso span{display:flex;flex-direction:column;gap:4px}
.lf-alert[hidden]{display:none}

.lf-steps{display:flex;gap:6px}
.lf-steps hr{display:none}
.lf-step{flex:1;min-width:0;display:flex;flex-direction:column;gap:8px;font-size:12px;font-weight:500;color:var(--lf-texto-2)}
.lf-step::before{content:"";height:3px;border-radius:3px;background:var(--lf-etapa)}
.lf-step i{display:none}
.lf-step.done::before{background:var(--lf-etapa-feita)}
.lf-step.on{color:var(--lf-texto);font-weight:600}
.lf-step.on::before{background:var(--lf-link)}

.lf-code-row{display:flex;gap:8px}
.lf-code{flex:1;width:100%;min-width:0;height:60px;padding:0;text-align:center;border:1px solid var(--lf-borda);border-radius:12px;background:var(--lf-campo);font-family:inherit;font-size:22px;font-weight:600;color:var(--lf-texto);transition:border-color .16s,box-shadow .16s}
.lf-code:focus{outline:none;border-color:var(--lf-texto);box-shadow:0 0 0 4px var(--lf-accent-focus)}

.lf-rules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;margin:0;padding:0;list-style:none}
.lf-rules li{display:flex;align-items:flex-start;gap:8px;font-size:12.5px;line-height:1.4;color:var(--lf-texto-2);transition:color .16s}
.lf-rules li::before{content:"";flex:none;width:7px;height:7px;margin-top:5px;border-radius:50%;background:var(--lf-ponto);transition:background .16s}
.lf-rules li[data-rule="seq"]{grid-column:1/-1}
.lf-rules li.ok{color:var(--lf-ok-texto)}
.lf-rules li.ok::before{background:var(--lf-ok-ponto)}

.lf-note{padding-top:24px;border-top:1px solid var(--lf-linha)}
.lf-note p{margin:0;font-size:13px;line-height:1.6;color:var(--lf-texto-2);text-wrap:pretty}
.lf-note b{color:var(--lf-rotulo);font-weight:600}
.lf-note.destaque{padding:14px 16px;border:1px solid var(--lf-linha);border-radius:12px;background:var(--lf-suave)}
.lf-hint{margin:0;font-size:13.5px;line-height:1.55;color:var(--lf-rotulo);text-wrap:pretty}
.lf-hint b{color:var(--lf-texto);font-weight:600}

.lf-badge-wrap{display:flex}
.lf-badge{display:inline-flex;align-items:center;gap:7px;color:var(--lf-texto-2);font-size:12.5px;font-weight:500}

.lf-alt{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0;padding-top:24px;border-top:1px solid var(--lf-linha);font-size:13px;line-height:1.6;color:var(--lf-texto-2)}
.lf-alt a{padding:13px 0;margin:-13px 0}
.lf-note~.lf-alt,.lf-alt~.lf-alt{margin-top:-20px;padding-top:0;border-top:0}

.lf-eyebrow{margin:0;font-size:13px;font-weight:600;color:var(--lf-link)}
.lf-tech{padding:12px 14px;border-radius:12px;border:1px solid var(--lf-linha);background:var(--lf-suave)}
.lf-tech-t{margin:0 0 4px;font-size:12px;font-weight:600;color:var(--lf-texto-2)}
.lf-tech-m{margin:0;font-size:12px;line-height:1.5;color:var(--lf-rotulo);font-family:ui-monospace,Menlo,Consolas,monospace;word-break:break-word}

.lf-mbrand,.lf-mmeta{display:none}

.lf-troca,.lf-idiomas{position:fixed;top:20px;z-index:10;display:flex;gap:2px;margin:0;padding:3px;border:1px solid var(--lf-troca-borda);border-radius:13px;background:var(--lf-troca-fundo);transition:background .25s,border-color .25s}
.lf-troca{right:20px}
.lf-idiomas{right:116px}
.lf-troca button,.lf-idioma{appearance:none;position:relative;width:38px;height:36px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:10px;background:transparent;cursor:pointer;transition:background .18s,color .18s,box-shadow .18s}
.lf-troca button::before,.lf-idioma::before{content:"";position:absolute;inset:-4px 0}
.lf-troca button{color:var(--lf-troca-ico)}
.lf-troca button:hover{color:var(--lf-troca-ico-ativo)}
.lf-troca button[aria-pressed="true"],.lf-idioma[aria-pressed="true"]{background:var(--lf-troca-ativo);color:var(--lf-troca-ico-ativo);box-shadow:var(--lf-troca-sombra)}
.lf-idioma svg{display:block;width:22px;height:15px;border-radius:3px;opacity:.6;transition:opacity .18s}
.lf-idioma:hover svg,.lf-idioma[aria-pressed="true"] svg{opacity:1}

.lf-pausa{position:absolute!important;left:52px;bottom:40px;z-index:2!important;width:44px;height:44px;display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--lf-pausa-borda);border-radius:50%;background:var(--lf-pausa-fundo);color:var(--lf-painel-1);cursor:pointer;transition:background .16s}
.lf-pausa[hidden]{display:none}
.lf-pausa:hover{background:var(--lf-pausa-hover)}
.lf-pausa:focus-visible{outline:2px solid var(--lf-painel-1);outline-offset:2px}
.lf-pausa [data-icone-retomar],.lf-pausa[aria-pressed="true"] [data-icone-pausar]{display:none}
.lf-pausa[aria-pressed="true"] [data-icone-retomar]{display:block}

@media (max-width:1180px){
  .lf-left{padding:44px}
  .lf-hero h1{font-size:44px}
  .lf-meta{top:44px;right:44px}
  .lf-right{padding:76px 32px 40px}
}

/* Abaixo disto a rede vira uma faixa acima do formulário: a chamada sai, e a marca fica na faixa. */
@media (max-width:900px){
  .lf-stage{display:flex;flex-direction:column}
  .lf-left{display:flex;flex-direction:column;position:relative;height:auto;min-height:190px;align-self:stretch;padding:28px 24px;border-right:0;border-bottom:1px solid var(--lf-linha)}
  .lf-hero,.lf-meta{display:none}
  .lf-pausa{left:auto;right:16px;bottom:16px}
  .lf-right{padding:36px 24px calc(28px + env(safe-area-inset-bottom))}
  .lf-head h2{font-size:28px}
  .lf-mmeta{display:flex;flex-direction:column;gap:4px;font-size:11.5px;line-height:1.5;color:var(--lf-texto-2)}
  /* Fixos, cobririam o formulário ao rolar. */
  .lf-troca,.lf-idiomas{position:absolute}
  .lf-troca{top:14px;right:14px}
  .lf-idiomas{top:14px;right:108px}
  .lf-idioma{width:30px}
}

@media (max-width:480px){
  .lf-idiomas{top:64px;right:14px}
}

@media (max-width:400px){
  .lf-code-row{gap:6px}
  .lf-code{height:52px;font-size:19px}
  .lf-rules{grid-template-columns:minmax(0,1fr)}
}

.lf-secao{display:flex;align-items:center;gap:10px;margin:2px 0 -4px;font-size:12px;font-weight:600;color:var(--lf-texto-2)}
.lf-secao::after{content:"";flex:1;height:1px;background:var(--lf-linha)}

.lf-preparo{display:flex;flex-direction:column;gap:12px;margin:0;padding:20px 22px;list-style:none;border:1px solid var(--lf-linha);border-radius:16px;background:color-mix(in srgb,var(--lf-fundo) 86%,transparent);backdrop-filter:blur(8px)}
.lf-preparo li{display:grid;grid-template-columns:18px minmax(0,1fr);column-gap:12px}
.lf-preparo li::before{content:"";grid-row:1 / span 2;width:10px;height:10px;margin:4px;border-radius:50%;background:var(--lf-ponto)}
.lf-preparo li.agora::before{width:16px;height:16px;margin:1px;background:none;border:2px solid var(--lf-linha);border-top-color:var(--lf-texto);animation:lf-spin .8s linear infinite}
.lf-preparo li.feito::before{background:var(--lf-ok-ponto)}
.lf-preparo b{font-size:14px;font-weight:600;color:var(--lf-texto-2);text-wrap:pretty}
.lf-preparo li.agora b{color:var(--lf-texto)}
.lf-preparo li.feito b{color:var(--lf-ok-texto)}
.lf-preparo span{font-size:12.5px;line-height:1.4;color:var(--lf-texto-2);text-wrap:pretty;word-break:break-word}