/* =========================================================================
   AUTH-ASAAS — telas de ACESSO da Cincare no visual "tipo Asaas" (o mesmo
   desenho que o Selyra adotou em src/shared/auth-asaas.css, na cor da Cincare)

   Quem carrega: as telas de src/pages/auth/ (login-{clinic,doctor,patient,
   filial,matriz,affiliate,seller}, forgot-password, reset-password,
   verify-email). Todas têm o mesmo esqueleto:
     main.login-page
       section.login-brand-panel   → lado da marca (marcação nova, abaixo)
       section.login-form-panel    → .login-form-area > .login-card > form.login-form
     footer.rodape-legal-global    → rodapé legal mínimo (conteúdo intocável)

   Ordem no <head>: base.css → CSS da tela (login-*.css; nas de senha/e-mail,
   login-patient.css + forgot-password.css) → <style> da própria tela, se houver
   → fonte Inter (Google Fonts) → ESTE ARQUIVO, sempre por último. Ele só
   sobrescreve: usa os mesmos seletores das folhas das telas (ou mais fortes) e
   ganha por vir depois. Nada aqui depende de JS; ids, names, scripts e o
   Turnstile de cada tela continuam os mesmos.

   Desktop (≥ 769px de largura e ≥ 501px de altura): cartão da marca à ESQUERDA
   (32px de margem, raio 24, degradê claro do verde-petróleo, parado enquanto a
   página rola) com o selo do papel, o título e a composição de vidro "voucher"
   (ver VOUCHER DE VIDRO); o formulário fica à DIREITA, direto no fundo claro, sem
   cartão, com 400px, e o rodapé legal no pé dessa coluna.
   Celular (≤ 768px, ou o celular deitado, até 500px de altura): só o formulário.

   Também pinta, na página inteira, os avisos (Toast) e os diálogos (ShowAlert,
   ShowConfirm, ShowPrompt) de src/shared/utils.js. As outras telas da família A
   sem o layout de login (access, cadastros, cadastro em análise, retorno do
   pagamento) podem carregar esta folha pelos tokens, pela fonte, pelo rodapé e por
   essas peças: o que é do layout de duas colunas só vale onde há .login-page.

   Escala: a raiz fica fixa em 16px (base.css a faz crescer até 20px em telas
   largas; o Asaas não cresce em 1920). Tudo daqui é escrito em px.

   Desfazer = tirar o <link> deste arquivo e voltar a marcação do lado da marca
   (as folhas das telas continuam inteiras por baixo).
   ========================================================================= */

:root {
  /* Escala clara do verde-petróleo (#00654e) para fundos, bordas e brilhos */
  --brand-teal-50: #eff9f5;
  --brand-teal-100: #dcf1ea;
  --brand-teal-200: #b5e1d3;
  --brand-teal-300: #7ec4ae;
  --brand-teal-800: #043b2e;

  /* Neutros do Asaas (sem o cinza-azulado do resto do site) */
  --as-n10: #fcfcfd;
  --as-n30: #f7f8fa;
  --as-n200: #d1d6dc;
  --as-n300: #b8c0cb;
  --as-n400: #8a94a3;
  --as-n600: #5e6877;
  --as-n900: #1d2125;

  /* Tons fortes de erro/sucesso/alerta do Asaas e os fundos suaves de cada um (os
     mesmos da família A nos painéis: --pa-erro-forte/-suave etc. em painel-asaas.css) */
  --as-erro: #b02a37;
  --as-erro-suave: #fcebec;
  --as-sucesso: #146c43;
  --as-sucesso-suave: #e8f3ee;
  --as-alerta: #b45309;
  --as-alerta-suave: #fff7e6;

  --as-fonte: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

html { font-size: 16px; }

body {
  font-family: var(--as-fonte);
  letter-spacing: 0.2px;
  background: var(--as-n10);
  color: var(--as-n900);
}

.login-page { background: var(--as-n10); }

/* =============================== FORMULÁRIO (os dois tamanhos) =============================== */

/* O cartão da tela vira só uma coluna: sem fundo, borda, sombra nem fio no topo. */
.login-card {
  width: 100%;
  max-width: 400px;
  padding: 0;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.login-card::before,
.login-card-line { display: none; }

/* "Voltar": link discreto acima do logo (a marcação nova o põe dentro do .login-card) */
.login-back-button {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 6px;
  margin: 0 0 40px;
  color: var(--as-n600);
  font-size: 14px;
  font-weight: 400;
  transition: color 0.15s ease;
}
.login-back-button svg { width: 16px; height: 16px; stroke-width: 2; }
.login-back-button:hover { color: var(--brand-teal); transform: none; }
.login-back-button:focus-visible { outline: 2px solid var(--brand-teal-500); outline-offset: 4px; border-radius: 4px; }

/* Logo da Cincare no topo do formulário */
.auth-logo {
  display: block;
  height: 40px;
  width: auto;
  max-width: 200px;
  object-fit: contain;
  object-position: left center;
  margin: 0 0 32px;
}

.login-card h2 {
  max-width: none;
  font-size: 22px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--as-n900);
  margin-bottom: 4px;
}
.login-description {
  max-width: none;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 400;
  color: var(--as-n600);
  margin-bottom: 32px;
}

.login-form label {
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--as-n900);
  margin-bottom: 6px;
}
.login-form input {
  height: 48px;
  padding: 0 16px;
  margin-bottom: 24px;
  border: 1px solid var(--as-n200);
  border-radius: 12px;
  background: #ffffff;
  color: var(--as-n900);
  font-size: 16px;
  box-shadow: none;
  transition: border-color 0.2s ease;
}
.login-form input::placeholder { color: var(--as-n400); }
.login-form input:hover:not(:focus) { border-color: var(--as-n300); }
.login-form input:focus {
  border-color: var(--as-n200);
  box-shadow: none;
  outline: 2px solid var(--brand-teal-500);
  outline-offset: -1px;
}
/* Campo obrigatório que o usuário deixou vazio ou com e-mail inválido (só depois de
   mexer nele: :user-invalid não acende na página recém-aberta) */
.login-form input:user-invalid { border-color: var(--as-erro); }
.login-form input:user-invalid:focus { outline-color: var(--as-erro); }
/* o hover de cima (0,3,1) ganharia do vermelho (0,2,1): o campo com erro fica vermelho
   com o mouse em cima. Regra à parte, e não um :not(:user-invalid) no hover, para o
   navegador que não conhece :user-invalid descartar só esta linha, não o hover. */
.login-form input:user-invalid:hover { border-color: var(--as-erro); }

/* "Esqueceu sua senha?": colado no campo de senha, à direita (a ordem no HTML não muda) */
.forgot-password {
  align-self: flex-end;
  width: fit-content;
  margin: -14px 0 20px;
  font-size: 14px;
  font-weight: 500;
  color: var(--brand-teal);
  transition: color 0.15s ease;
}
.forgot-password:hover { opacity: 1; color: var(--brand-teal-700); text-decoration: underline; text-underline-offset: 3px; }
.forgot-password:focus-visible { outline: 2px solid var(--brand-teal-500); outline-offset: 3px; border-radius: 4px; }

/* Ação principal: pílula verde-petróleo chapada, 48px (o <a> de "Voltar para o login"
   das telas de senha também carrega .login-submit-button) */
.login-form button,
.login-submit-button {
  display: inline-flex;
  width: 100%;
  height: 48px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  border-radius: 999px;
  background: var(--brand-teal);
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0;
  text-decoration: none;
  box-shadow: none;
  filter: none;
  transform: none;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
}
.login-form button[type="submit"] { margin-top: 16px; }
.login-form button svg,
.login-submit-button svg { width: 16px; height: 16px; stroke-width: 2.2; }
.login-form button:hover,
.login-submit-button:hover { background: var(--brand-teal-700); transform: none; filter: none; box-shadow: none; }
.login-form button:active,
.login-submit-button:active { background: var(--brand-teal-800); transform: none; filter: none; }
.login-form button:focus-visible,
.login-submit-button:focus-visible { outline: 2px solid var(--brand-teal-500); outline-offset: 2px; }
.login-form button:disabled { background: var(--brand-teal-400); cursor: progress; }

/* "Não tem uma conta?" vira o bloco de primeiro acesso (como no Selyra/Asaas):
   divisória, rótulo e botão contornado de largura total. */
.cadastro-link {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--as-n200);
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--as-n900);
}
.cadastro-link a {
  display: flex;
  height: 48px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--brand-teal);
  border-radius: 999px;
  color: var(--brand-teal);
  font-size: 16px;
  font-weight: 600;
  transition: background-color 0.15s ease;
}
.cadastro-link a:hover { opacity: 1; background: var(--brand-teal-50); }
.cadastro-link a:focus-visible { outline: 2px solid var(--brand-teal-500); outline-offset: 2px; }

/* ---------- peças das telas de senha e de e-mail (forgot/reset/verify) ---------- */
.fp-confirm-icon {
  width: 56px;
  height: 56px;
  margin: 0 0 24px;
  border-radius: 16px;
  background: var(--brand-teal-50);
  color: var(--brand-teal);
  box-shadow: none;
}
/* os passos de confirmação ("E-mail enviado!", "Senha atualizada!"…) seguem a coluna,
   alinhados à esquerda como o resto do formulário (forgot-password.css os centralizava) */
.fp-confirm,
.fp-confirm .login-description { text-align: left; }
.fp-confirm-icon::after { display: none; }
/* o ícone herda a cor do quadrado (forgot-password.css o pintava de teal direto, e o
   X do "Link expirado" saía teal sobre o fundo rosa) */
.fp-confirm-icon svg { width: 28px; height: 28px; color: inherit; }
/* variantes do resultado do passo (verify-email: #stepInvalid / #stepSuccess); mesma
   força do <style> da tela, que vem antes deste arquivo */
.fp-confirm-icon.is-error { background: var(--as-erro-suave); color: var(--as-erro); }
.fp-confirm-icon.is-success { background: var(--as-sucesso-suave); color: var(--as-sucesso); }
.fp-confirm-note { font-size: 14px; line-height: 1.55; color: var(--as-n600); margin-bottom: 24px; }
.login-form .fp-confirm-note { margin: 16px 0 0; }
/* o "reenviar" é um <button> dentro do form: sem isto ele herdaria a pílula de 48px */
.login-form .fp-link-button,
.fp-link-button {
  display: inline;
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--brand-teal);
  font-size: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.login-form .fp-link-button:hover,
.fp-link-button:hover { background: none; color: var(--brand-teal-700); opacity: 1; }
.login-form .fp-link-button:active,
.fp-link-button:active { background: none; }
/* Desabilitado (verify-email: "Enviando..." por ~30s depois de cada reenvio) continua
   texto, em cinza e sem sublinhado. Precisa de (0,3,0): a ".login-form button:disabled"
   de cima é (0,2,1) e ganhava da ".login-form .fp-link-button" (0,2,0) — o reenviar
   virava um bloco teal com texto teal. */
.login-form .fp-link-button:disabled,
.fp-link-button:disabled {
  background: none;
  color: var(--as-n600);
  opacity: 1;
  text-decoration: none;
  cursor: not-allowed;
}
/* Campo do código: Inter com algarismos de largura igual (a monoespaçada caía na
   Consolas no Windows, de zero cortado: o "00000000" parecia "ØØØØ") */
.login-form .verify-otp-input {
  height: 64px;
  margin-top: 0;
  border: 1px solid var(--as-n200);
  border-radius: 12px;
  background: #ffffff;
  font-family: var(--as-fonte);
  font-variant-numeric: tabular-nums;
  font-size: 24px;
}
.verify-tip { font-size: 14px; color: var(--as-n600); margin: -12px 0 0; }
.verify-loading { border-radius: 12px; background: var(--brand-teal-50); color: var(--brand-teal-700); font-size: 14px; }

/* ---------- rodapé legal mínimo ([A14d]): só a forma, o texto é intocável ---------- */
.rodape-legal-global {
  padding: 16px;
  text-align: center;
  font-size: 12px;
  line-height: 1.6;
  color: var(--as-n600);
}
.rodape-legal-global a { color: inherit; }
.rodape-legal-global a:hover { color: var(--brand-teal); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- peças do src/shared/utils.js: avisos (Toast) e diálogos ----------
   A mesma pele dos painéis ([J1] e [J2] de painel-asaas.css), sem o [data-painel]:
   aqui ela vale para a página inteira que carrega esta folha. O utils.js injeta o
   próprio <style> no <head> quando roda, DEPOIS deste arquivo; por isso cada regra
   leva um "body" na frente — fica um degrau acima da dele: (0,1,1) contra (0,1,0),
   (0,2,1) contra (0,2,0), (0,3,1) contra (0,3,0) nos :hover e no .is-prompt. Onde a
   regra dele tem de continuar valendo (largura total dos botões no celular, altura
   da caixa de texto multilinha, espaço reservado do erro) esta folha não mexe. */

/* Avisos (Toast): cartão claro com o ícone num círculo no tom — não o bloco chapado
   vermelho/verde de antes. O lugar é o do utils.js (canto de baixo à direita); no
   layout de login do desktop ele vai para o canto de cima (ver DESKTOP), para não
   cobrir o rodapé legal nem os botões. */
body #cincare-toast-container { bottom: 24px; right: 24px; gap: 8px; }
body .cincare-toast {
  min-width: 280px;
  max-width: 400px;
  padding: 16px;
  gap: 12px;
  border: 1px solid var(--as-n200);
  border-radius: 16px;
  background: var(--as-n10);
  color: var(--as-n900);
  font: 500 14px/1.45 var(--as-fonte);
  letter-spacing: 0.2px;
  box-shadow: 0 16px 24px rgba(29, 33, 37, 0.16);
}
body .cincare-toast.toast-success,
body .cincare-toast.toast-error,
body .cincare-toast.toast-warning,
body .cincare-toast.toast-info { background: var(--as-n10); }
body .cincare-toast-icon {
  display: flex;
  width: 24px;
  height: 24px;
  margin-top: -2px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
body .cincare-toast-icon svg { width: 16px; height: 16px; stroke-width: 2.4; }
body .toast-success .cincare-toast-icon { background: var(--as-sucesso-suave); color: var(--as-sucesso); }
body .toast-error .cincare-toast-icon { background: var(--as-erro-suave); color: var(--as-erro); }
body .toast-warning .cincare-toast-icon { background: var(--as-alerta-suave); color: var(--as-alerta); }
body .toast-info .cincare-toast-icon { background: var(--brand-teal-50); color: var(--brand-teal); }

/* Diálogos (ShowAlert / ShowConfirm / ShowPrompt): o modal do Asaas — alinhado à
   esquerda, raio 24, borda fina, botões em pílula à direita. Aparecem nas telas de
   acesso: o segundo fator (ShowPrompt de src/shared/auth/mfa-challenge.js) na
   matriz, filial e vendedor, e o aviso de ?pending=1 / ?rejected=1 (ShowAlert) no
   afiliado e no vendedor. Botão e campo com 48px, como os do formulário. */
body .cincare-modal-overlay { background: rgba(29, 33, 37, 0.4); font-family: var(--as-fonte); }
body .cincare-modal-box {
  max-width: 480px;
  padding: 24px;
  text-align: left;
  border: 1px solid var(--as-n200);
  border-radius: 24px;
  background: var(--as-n10);
  box-shadow: none;
}
body .cincare-modal-icon { width: 40px; height: 40px; margin: 0 0 16px; border: 0; }
body .cincare-modal-icon i,
body .cincare-modal-icon svg { width: 20px; height: 20px; stroke-width: 2; }
body .cincare-modal-icon.is-info { background: var(--brand-teal-50); color: var(--brand-teal); }
body .cincare-modal-icon.is-success { background: var(--as-sucesso-suave); color: var(--as-sucesso); }
body .cincare-modal-icon.is-warning { background: var(--as-alerta-suave); color: var(--as-alerta); }
body .cincare-modal-icon.is-danger { background: var(--as-erro-suave); color: var(--as-erro); }
body .cincare-modal-title { margin: 0 0 8px; font-size: 20px; font-weight: 500; line-height: 1.3; letter-spacing: 0; color: var(--as-n900); }
body .cincare-modal-text { margin: 0 0 24px; font-size: 16px; line-height: 1.5; color: var(--as-n600); }
body .cincare-modal-text strong { font-weight: 600; color: var(--as-n900); }
/* no diálogo com campo o texto fica mais perto do campo (o utils.js põe 14px) */
body .cincare-modal-box.is-prompt .cincare-modal-text { margin-bottom: 16px; }
body .cincare-modal-actions { justify-content: flex-end; gap: 16px; }
body .cincare-modal-btn {
  min-width: 0;
  min-height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  font: 600 16px/1 var(--as-fonte);
  letter-spacing: 0;
}
body .cincare-modal-btn:active { transform: none; }
body .cincare-modal-btn.is-secondary { background: transparent; border-color: var(--brand-teal); color: var(--brand-teal); }
body .cincare-modal-btn.is-secondary:hover { background: var(--brand-teal-50); border-color: var(--brand-teal); }
body .cincare-modal-btn.is-primary { background: var(--brand-teal); border-color: var(--brand-teal); color: #ffffff; }
body .cincare-modal-btn.is-primary:hover { background: var(--brand-teal-700); border-color: var(--brand-teal-700); }
body .cincare-modal-btn.is-danger { background: var(--as-erro); border-color: var(--as-erro); color: #ffffff; }
body .cincare-modal-btn.is-danger:hover { background: #842029; border-color: #842029; }
body .cincare-modal-btn:focus-visible { outline: 2px solid var(--brand-teal-500); outline-offset: 2px; }
body .cincare-modal-field { margin: 0 0 24px; }
/* 16px no campo: abaixo disso o iOS dá zoom na página ao focar */
body .cincare-modal-input {
  min-height: 48px;
  padding: 11px 16px;
  border: 1px solid var(--as-n200);
  border-radius: 12px;
  background: #ffffff;
  color: var(--as-n900);
  font-size: 16px;
  line-height: 1.5;
}
body .cincare-modal-input::placeholder { color: var(--as-n400); }
body .cincare-modal-input:hover:not(:focus) { border-color: var(--as-n300); }
body .cincare-modal-input:focus { border-color: var(--as-n200); box-shadow: none; outline: 2px solid var(--brand-teal-500); outline-offset: -1px; }
body .cincare-modal-input.is-invalid { border-color: var(--as-erro); box-shadow: none; outline-color: var(--as-erro); }
/* o hover de cima (0,3,1) apagaria o vermelho do campo com erro */
body .cincare-modal-input.is-invalid:hover { border-color: var(--as-erro); }
body .cincare-modal-hint { margin-top: 8px; font-size: 13px; line-height: 1.45; color: var(--as-n600); }
body .cincare-modal-error { font-size: 13px; font-weight: 500; color: var(--as-erro); }

@media (max-width: 480px) {
  body #cincare-toast-container { left: 16px; right: 16px; bottom: 16px; }
  body .cincare-toast { max-width: 100%; min-width: 0; }
  /* botões um embaixo do outro, o principal em cima (a ordem vem do utils.js) */
  body .cincare-modal-actions { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
}

/* =============================== DESKTOP ===============================
   Largura de 769px em diante E altura de 501px em diante: o celular deitado (ex.:
   844×390) tem largura de desktop, mas as duas colunas não cabem na altura dele (o
   voucher saía cortado e o "Entrar" ficava abaixo da dobra); ele fica com o layout
   de celular (ver CELULAR, no fim). Toda media query de desktop leva o mesmo
   "(min-height: 501px)". */
@media (min-width: 769px) and (min-height: 501px) {
  /* body posicionado: o rodapé legal desce para o pé da coluna do formulário. Só no
     layout de login (o body que tem a .login-page): access, cadastros, telas em
     análise e retorno também podem carregar esta folha, e ali o body e o rodapé
     ficam no fluxo normal — o rodapé só ganha a forma (fonte, cor, links). */
  body:has(.login-page) { position: relative; }
  /* navegador sem :has(): o body de toda tela que carrega a folha fica posicionado,
     como era antes (o rodapé abaixo continua preso à .login-page de qualquer jeito) */
  @supports not selector(:has(*)) {
    body { position: relative; }
  }

  /* Avisos (Toast) no layout de login: no canto de CIMA, à direita. No canto de baixo
     eles ficavam 3,8s em cima do rodapé legal (no pé da coluna) e, subindo acima
     dele, cobriam o "Entrar" ou o "Criar conta" em quase todo notebook (o formulário
     centralizado chega perto do pé). No alto da coluna só há o "Voltar" e o logo,
     encostados à esquerda do formulário: a largura máxima do aviso para antes do
     fim do logo (122px depois da borda do formulário, que fica em 3/4 da tela menos
     metade do formulário), com 8px de folga mesmo com os 10px da barra de rolagem
     que o base.css reserva (scrollbar-gutter):
       25vw + 40px  → formulário de 400px (tela de ~944px em diante)
       50vw − 196px → formulário mais estreito (coluna de 769 a ~944px)
     Um aviso de uma ou duas linhas termina em ~100px, e o título do formulário
     começa abaixo de 128px; só um aviso longo (3+ linhas) ou dois de uma vez em tela
     baixa encostam no título, que é texto, nunca num controle. Só no layout de
     login: o utils.js cria o container no fim do <body>, depois do <main
     class="login-page"> (o mesmo "~" do rodapé, sem depender de :has). Nas outras
     telas (e no celular) o aviso fica embaixo, como era. */
  .login-page ~ #cincare-toast-container { top: 24px; bottom: auto; }
  .login-page ~ #cincare-toast-container .cincare-toast {
    --toast-max: min(400px, calc(25vw + 40px), calc(50vw - 196px));
    min-width: min(280px, var(--toast-max));
    max-width: var(--toast-max);
  }

  .login-page {
    min-height: 100vh;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  /* ---------- formulário: à direita, centralizado, direto no fundo ---------- */
  .login-form-panel {
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* embaixo sobra o lugar do rodapé legal (posição absoluta, ver abaixo: ~63px com
       as duas linhas e o respiro) e mais ~40px de ar até o "Criar conta". 56/104 e
       não 64/120: com o Turnstile no tamanho em que o navegador o desenha (até 72px)
       o 1440×900 passava 13px e rolava. */
    padding: 56px 48px 104px;
    background: transparent;
  }
  .login-form-area {
    display: flex;
    width: 100%;
    min-height: 0;
    padding-top: 0;
    justify-content: center;
  }
  /* Tela que ainda não levou o "Voltar" para dentro do .login-card: fica no canto */
  .login-form-panel > .login-back-button { position: absolute; top: 40px; left: 48px; margin: 0; }

  /* rodapé no pé da coluna do formulário: só o que vem depois da .login-page (nas
     telas de acesso ele é irmão do <main>, no fim do body) */
  .login-page ~ .rodape-legal-global {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    padding: 0 48px 24px;
  }

  /* ---------- marca: cartão claro à esquerda, parado enquanto a página rola ---------- */
  .login-brand-panel {
    position: sticky;
    top: 32px;
    align-self: start;
    display: flex;
    height: calc(100vh - 64px);
    min-height: 0;
    margin: 32px 0 32px 32px;
    padding: 56px 48px 48px;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 32px;
    overflow: hidden;
    border: 0;
    border-radius: 24px;
    background:
      radial-gradient(70% 45% at 50% 0%, rgba(255, 255, 255, 0.9), transparent 70%),
      linear-gradient(194deg, var(--brand-teal-50) -4%, var(--brand-teal-100) 104%);
  }
  /* pontilhado verde bem leve, que some nas bordas */
  .login-brand-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0, 101, 78, 0.16) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: 1;
    pointer-events: none;
    -webkit-mask-image: radial-gradient(70% 60% at 50% 62%, #000 20%, transparent 75%);
    mask-image: radial-gradient(70% 60% at 50% 62%, #000 20%, transparent 75%);
  }
  /* halo verde embaixo */
  .login-brand-panel::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -180px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: rgba(0, 101, 78, 0.14);
    filter: blur(90px);
    pointer-events: none;
  }

  /* selo do papel, título e descrição (centralizados, acima da composição) */
  .auth-marca-texto {
    position: relative;
    z-index: 2;
    width: min(100%, 560px);
    margin: 0 auto;
    text-align: center;
  }
  .auth-papel {
    display: inline-flex;
    height: 32px;
    align-items: center;
    gap: 8px;
    margin-bottom: 18px;
    padding: 0 14px;
    border: 1px solid var(--brand-teal-200);
    border-radius: 999px;
    background: var(--as-n10);
    color: var(--brand-teal-700);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .auth-papel svg { width: 14px; height: 14px; stroke-width: 2.2; }
  .auth-titulo {
    margin: 0 0 14px;
    font-size: 36px;
    font-weight: 500;
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-wrap: balance;
    color: var(--as-n900);
  }
  .auth-titulo span { color: var(--brand-teal); }
  .auth-descricao {
    max-width: 470px;
    margin: 0 auto;
    font-size: 16px;
    line-height: 1.55;
    color: var(--as-n600);
  }

  /* ---------- composição: moldura e halo (as peças medem em cqw) ---------- */
  .auth-visual {
    /* Largura do voucher, lida pelo voucher e pelos selos em volta (que se prendem
       às bordas dele). O cqw só é resolvido onde a variável é usada, nos filhos, e
       ali vale a largura deste quadro. Piso de 312px: abaixo disso "Voucher de
       consulta" não cabe ao lado do selo "Válido" (125 + 58px de miolo + margens). */
    --vo-w: clamp(312px, 54cqw, 400px);
    /* quanto cada selo de vidro entra na margem do voucher (ela tem 24px; sobram 8
       até o que está escrito) */
    --vidro-sobre: 16px;
    display: block;
    position: relative;
    z-index: 1;
    flex: none;
    container-type: inline-size;
    width: min(100%, 760px);
    height: clamp(340px, 56vh, 560px);
    margin: 0 auto;
  }
  .auth-visual::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70cqw;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(26, 144, 120, 0.22) 0%, rgba(26, 144, 120, 0.06) 45%, transparent 70%);
  }

  @keyframes auth-flutua { 50% { translate: 0 -8px; } }
}

/* =============================== VOUCHER DE VIDRO (desktop) ===============================
   O centro do cartão da marca, no lugar do "painel de saúde" do Selyra: um cartão de
   VIDRO com cara de voucher de consulta — o produto da Cincare — igual ao que o
   paciente vê na área dele (src/shared/vouchers/voucher-ui.js): especialidade, selo
   "Válido" (o rótulo que o app dá ao voucher ativo), código no formato CIN-XXXX-XX
   mascarado e as linhas de pagamento e validade (30 dias, README "Fluxo de um
   voucher"). Valores FICTÍCIOS e fixos, nenhum número da plataforma. Embaixo dele,
   manchas de luz verde e dourada desfocadas, que aparecem borradas através do vidro;
   em volta, selos do mesmo vidro com o que o papel da tela faz.
   - Os entalhes laterais do "ticket" são recortados por máscara só no vidro de dentro
     (.auth-voucher__vidro); a sombra fica no invólucro (.auth-voucher), senão a
     máscara a cortaria. O picote passa exatamente na altura dos entalhes: as duas
     coisas leem a mesma conta (--vo-picote).
   - Nada em palco 3D e nenhum filter/opacity nos pais do vidro: isso vira "backdrop
     root" e o backdrop-filter deixa de enxergar as manchas.
   Sem logo dentro da composição (o logo está no formulário). */
@media (min-width: 769px) and (min-height: 501px) {
  /* manchas de luz atrás do vidro */
  .auth-luz {
    position: absolute;
    z-index: 0;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(32px);
    opacity: 0.8;
    animation: auth-luz 16s ease-in-out infinite alternate;
  }
  .auth-luz--1 { width: 38cqw; left: 15%; top: 10%; opacity: 0.75; background: radial-gradient(circle at 40% 40%, #4fd1ae, #10a07e 70%); }
  .auth-luz--2 { width: 27cqw; left: 56%; top: 30%; opacity: 0.6; background: radial-gradient(circle at 40% 40%, #f3cf6b, #d9a321 70%); animation-delay: -6s; }
  .auth-luz--3 { width: 26cqw; left: 30%; top: 56%; background: radial-gradient(circle at 40% 40%, #a7e8d3, #2bb08f 70%); animation-delay: -11s; }

  /* invólucro: posição, flutuação e sombra */
  .auth-voucher {
    /* medidas internas fixas: é delas que sai a altura do picote */
    --vo-pad: 24px;
    --vo-icone: 48px;
    --vo-vao: 32px;
    --vo-entalhe: 12px;
    --vo-picote: calc(var(--vo-pad) + var(--vo-icone) + var(--vo-vao) / 2);
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 50%;
    width: var(--vo-w);
    translate: -50% -50%;
    border-radius: 28px;
    color: var(--as-n900);
    box-shadow: 0 32px 64px -24px rgba(5, 78, 61, 0.45);
    animation: auth-voucher-flutua 9s ease-in-out infinite;
  }
  /* o vidro, com os dois entalhes recortados na altura do picote */
  .auth-voucher__vidro {
    position: relative;
    padding: var(--vo-pad) var(--vo-pad) calc(var(--vo-pad) - 4px);
    border-radius: inherit;
    background: rgba(255, 255, 255, 0.42);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.8);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    -webkit-mask:
      radial-gradient(circle at 0 var(--vo-picote), transparent var(--vo-entalhe), #000 calc(var(--vo-entalhe) + 0.5px)) left / 51% 100% no-repeat,
      radial-gradient(circle at 100% var(--vo-picote), transparent var(--vo-entalhe), #000 calc(var(--vo-entalhe) + 0.5px)) right / 51% 100% no-repeat;
    mask:
      radial-gradient(circle at 0 var(--vo-picote), transparent var(--vo-entalhe), #000 calc(var(--vo-entalhe) + 0.5px)) left / 51% 100% no-repeat,
      radial-gradient(circle at 100% var(--vo-picote), transparent var(--vo-entalhe), #000 calc(var(--vo-entalhe) + 0.5px)) right / 51% 100% no-repeat;
  }
  /* o picote, de um entalhe ao outro */
  .auth-voucher__vidro::before {
    content: "";
    position: absolute;
    left: calc(var(--vo-entalhe) + 8px);
    right: calc(var(--vo-entalhe) + 8px);
    top: var(--vo-picote);
    border-top: 2px dashed rgba(0, 101, 78, 0.28);
    translate: 0 -1px;
  }

  .auth-voucher__topo { display: flex; height: var(--vo-icone); align-items: center; gap: 12px; }
  .auth-voucher__icone {
    flex: none;
    display: grid;
    width: var(--vo-icone);
    height: var(--vo-icone);
    place-items: center;
    border-radius: 14px;
    color: #ffffff;
    background: linear-gradient(135deg, var(--brand-teal-400), var(--brand-teal));
    box-shadow: 0 8px 16px -6px rgba(0, 101, 78, 0.6);
  }
  .auth-voucher__icone svg { width: 24px; height: 24px; stroke-width: 1.9; }
  .auth-voucher__rotulo { display: flex; min-width: 0; flex-direction: column; line-height: 1.2; }
  /* O piso de largura do voucher (--vo-w) já faz caber; as reticências são só a rede
     de segurança (fonte que não carregou, especialidade longa): sem elas o texto
     passava por baixo do selo "Válido" ("Voucher de consu"). */
  .auth-voucher__rotulo small,
  .auth-voucher__rotulo strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .auth-voucher__rotulo small { font-size: 13px; color: var(--as-n600); }
  .auth-voucher__rotulo strong { font-size: 19px; font-weight: 600; letter-spacing: -0.01em; }
  /* mesmas cores do selo "Válido" do app (voucher-ui.js) */
  .auth-voucher__selo {
    flex: none;
    align-self: flex-start;
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #065f46;
    background: rgba(209, 250, 229, 0.9);
  }

  /* o código, como o paciente mostra no atendimento, com um brilho que passa */
  .auth-voucher__codigo {
    position: relative;
    overflow: hidden;
    margin-top: var(--vo-vao);
    padding: 12px 16px 13px;
    border: 1px dashed rgba(0, 101, 78, 0.32);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.55);
    text-align: center;
  }
  .auth-voucher__codigo small { display: block; margin-bottom: 2px; font-size: 12px; color: var(--as-n600); }
  .auth-voucher__codigo strong {
    display: block;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--as-n900);
  }
  .auth-voucher__codigo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 38%, rgba(255, 255, 255, 0.6) 50%, transparent 62%);
    translate: -110% 0;
    animation: auth-voucher-brilho 5s ease-in-out infinite;
  }

  .auth-voucher__dados { display: grid; gap: 6px; margin-top: 12px; }
  .auth-voucher__dado {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border-radius: 14px;
    font-size: 13px;
    color: var(--as-n600);
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.8);
  }
  .auth-voucher__dado svg { flex: none; width: 18px; height: 18px; color: var(--brand-teal); }
  .auth-voucher__dado b { margin-left: auto; font-size: 14px; font-weight: 600; color: var(--as-n900); }

  /* Selos de vidro em volta, PRESOS ÀS BORDAS DO VOUCHER (não às do quadro): cada um
     entra só --vidro-sobre (16px) na margem dele (vidro sobre vidro) e cresce PARA
     FORA. Assim, texto mais comprido nunca tampa o que está escrito no voucher; no
     máximo chega perto da borda do cartão da marca — e aí as reticências (max-width)
     cortam antes de encostar nela. Presos às bordas do quadro, como no Selyra, um
     selo de 16 caracteres cobria o ícone e o "Válido" em 1366px.
     display:block (e não flex) para as reticências funcionarem no texto solto. */
  .auth-vidro,
  .auth-aviso {
    position: absolute;
    z-index: 3;
    white-space: nowrap;
    color: var(--as-n900);
    background: rgba(255, 255, 255, 0.55);
    -webkit-backdrop-filter: blur(18px) saturate(180%);
    backdrop-filter: blur(18px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.75);
    box-shadow: 0 20px 40px -20px rgba(5, 78, 61, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.8);
    animation: auth-flutua 7s ease-in-out infinite;
  }
  .auth-vidro {
    display: block;
    /* do voucher até a borda do cartão (48px de respiro), menos 8px de folga */
    max-width: calc((100cqw - var(--vo-w)) / 2 + var(--vidro-sobre) + 40px);
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 20px 10px 16px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
  }
  .auth-vidro svg {
    display: inline-block;
    width: 22px;
    height: 22px;
    margin: 1px 10px 0 0;
    vertical-align: top;
    stroke-width: 1.8;
    color: var(--brand-teal-700);
  }
  /* --1 e --2 à direita do voucher, --3 e --4 à esquerda */
  .auth-vidro--1,
  .auth-vidro--2 { left: calc(50% + var(--vo-w) / 2 - var(--vidro-sobre)); }
  .auth-vidro--3,
  .auth-vidro--4 { right: calc(50% + var(--vo-w) / 2 - var(--vidro-sobre)); }
  .auth-vidro--1 { top: 16%; animation-delay: -1s; }
  .auth-vidro--2 { top: 63%; animation-delay: -3s; }
  .auth-vidro--3 { top: 9%; animation-delay: -5s; }
  .auth-vidro--4 { top: 73%; animation-delay: -2s; }
  /* aviso: um acontecimento do papel, centralizado embaixo */
  .auth-aviso {
    display: inline-flex;
    align-items: center;
    left: 0;
    right: 0;
    bottom: 2%;
    width: max-content;
    gap: 10px;
    margin-inline: auto;
    padding: 8px 20px 8px 8px;
    border-radius: 16px;
    font-size: 15px;
    font-weight: 500;
    animation-delay: -4s;
  }
  .auth-aviso svg {
    width: 32px;
    height: 32px;
    padding: 6px;
    border-radius: 10px;
    color: var(--as-sucesso);
    background: #dcfce7;
  }

  @keyframes auth-luz { 50% { translate: 3cqw -3cqw; scale: 1.1; } 100% { translate: -2cqw 2cqw; scale: 0.95; } }
  @keyframes auth-voucher-flutua { 50% { translate: -50% calc(-50% - 10px); } }
  @keyframes auth-voucher-brilho { 0%, 70% { translate: -110% 0; } 92%, 100% { translate: 110% 0; } }
}

/* No desktop a parte forte do título não parte no meio (o balance partia
   "do / balcão ao relatório."). Ela tem de caber numa linha de ~300px a 28px (o cartão
   em 769px): até ~22 caracteres. */
@media (min-width: 769px) and (min-height: 501px) {
  .auth-titulo span { white-space: nowrap; }
}
/* Os selos precisam de lado: o voucher tem piso de 312px e cada selo cresce para fora
   dele até a borda do cartão. A conta (quadro = largura/2 − 128px):
     sobra para o selo = (quadro − voucher) / 2 + 16 (entra no voucher) + 24 (até a borda)
     1366 → 162px · 1440 → 176 · 1536 → 187 · 1920 → 220
   O selo mede 70px + o texto (16px) ou 54px + 7/8 do texto (14px). O texto de selo
   vai até 105px a 16px (≈ 13 caracteres; o mais largo da receita é "Link de 1 hora"):
   em 1366–1439 ele só cabe no selo compacto (146px); de 1440 em diante, no normal
   (175px). Abaixo de 1366 nem o compacto cabe (o Selyra cortava em 1300; o voucher
   da Cincare é mais largo por dentro que o cartão dele): os selos somem e o voucher
   ocupa mais do quadro. */
@media (min-width: 769px) and (max-width: 1365px) and (min-height: 501px) {
  .auth-vidro { display: none; }
  .auth-visual { --vo-w: min(70cqw, 360px); }
  .auth-voucher { --vo-pad: 20px; --vo-icone: 44px; --vo-vao: 28px; border-radius: 24px; }
}
/* 1366–1439 (o notebook de 1366): selos compactos. Medido em 1366, 1400, 1439, 1440,
   1536, 1600 e 1920 com os textos mais largos da receita: nenhum selo encosta no que
   está escrito no voucher nem chega a 24px da borda do cartão. */
@media (min-width: 1366px) and (max-width: 1439px) and (min-height: 501px) {
  .auth-vidro { padding: 8px 14px 8px 12px; font-size: 14px; line-height: 20px; }
  .auth-vidro svg { width: 18px; height: 18px; margin: 1px 8px 0 0; }
}
/* Meia tela estreita (tablet deitado, janela pequena): o cartão e a composição encolhem */
@media (min-width: 769px) and (max-width: 1100px) and (min-height: 501px) {
  .login-brand-panel {
    top: 16px;
    height: calc(100vh - 32px);
    margin: 16px 0 16px 16px;
    padding: 48px 32px 40px;
    gap: 24px;
  }
  .login-form-panel { padding-inline: 32px; }
  .login-form-panel > .login-back-button { left: 32px; }
  .login-page ~ .rodape-legal-global { padding-inline: 32px; }
  .auth-titulo { font-size: 28px; }
  .auth-visual { height: 320px; }
  .auth-aviso { display: none; }
}
/* Quadro bem estreito (meia tela de ~770–900px): o voucher toma a largura e o selo
   "Válido" sai do topo para o nome da especialidade caber. */
@container (max-width: 440px) {
  .auth-voucher { width: 90cqw; }
  .auth-voucher__selo { display: none; }
}
/* Tela baixa: menos ar dos dois lados para caber sem rolar. O formulário do login
   (com o Turnstile) pede ~890px de altura no espaçamento cheio; o 1536×864 (1920 com
   125% de zoom) passava 25px. Daqui para baixo o formulário fica mais junto. */
@media (min-width: 769px) and (min-height: 501px) and (max-height: 880px) {
  .login-form-panel { padding-top: 32px; padding-bottom: 88px; }
  .login-back-button { margin-bottom: 28px; }
  .auth-logo { margin-bottom: 24px; }
  .login-description { margin-bottom: 24px; }
  .login-form input { margin-bottom: 20px; }
  .forgot-password { margin: -12px 0 16px; }
  .cadastro-link { margin-top: 24px; padding-top: 20px; }
}
/* Notebook de 768–800px de altura: o lado da marca também aperta, e o aviso sai — com
   o quadro baixo ele subia sobre o pé do voucher. */
@media (min-width: 769px) and (min-height: 501px) and (max-height: 820px) {
  .login-brand-panel { padding-top: 40px; padding-bottom: 32px; gap: 20px; }
  .auth-visual { height: clamp(300px, 50vh, 400px); }
  .auth-aviso { display: none; }
}
/* (o título só baixa para 32px no cartão largo; até 1100px vale o 28px de cima) */
@media (min-width: 1101px) and (min-height: 501px) and (max-height: 820px) {
  .auth-titulo { font-size: 32px; }
}
/* Até 800px de altura (1366×768 e 1024×768 em tela cheia, a janela do MacBook de
   1440×900, ~790px úteis): o formulário ainda passava 9–27px — aperta mais um pouco,
   e o rodapé legal desce 8px. Na janela real do notebook de 1366×768 (~657px úteis)
   a página rola de qualquer jeito: o cartão da marca fica parado e o rodapé chega
   certo ao fim. */
@media (min-width: 769px) and (min-height: 501px) and (max-height: 800px) {
  .login-form-panel { padding-top: 24px; padding-bottom: 76px; }
  .login-back-button { margin-bottom: 24px; }
  .auth-logo { margin-bottom: 20px; }
  .login-description { margin-bottom: 20px; }
  .cadastro-link { margin-top: 20px; padding-top: 16px; }
  .login-page ~ .rodape-legal-global { padding-bottom: 16px; }
}
/* Ainda mais baixa: a descrição sai para o voucher não ficar espremido */
@media (min-width: 769px) and (min-height: 501px) and (max-height: 760px) {
  .auth-descricao { display: none; }
}
/* Desktop bem baixo (até 580px de altura: janela encolhida, o notebook com as
   ferramentas do navegador abertas embaixo): o voucher (~310px) e o título não
   cabem juntos no cartão. Medido no piloto: em 1366×540 o voucher encostava na borda
   de baixo, em 1366×520 saía 10px cortado e em 1366×501, 19px, com o selo do papel
   cortado no topo; com 580px sobram 20px. A composição sai e o cartão fica com o
   selo do papel, o título e a descrição, que volta porque agora há lugar (o
   formulário não muda). */
@media (min-width: 769px) and (min-height: 501px) and (max-height: 580px) {
  .auth-visual { display: none; }
  .auth-descricao { display: block; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-luz,
  .auth-voucher,
  .auth-voucher__codigo::after,
  .auth-vidro,
  .auth-aviso { animation: none; }
  .auth-voucher__codigo::after { display: none; }
}

/* =============================== CELULAR =============================== */
/* Só o formulário: o lado da marca some, a página fica no fundo claro. Some só para
   os olhos: o <h1> da página (o título do papel) mora nele, e com display:none o
   leitor de tela ficava sem título nenhum. A composição, que é enfeite, sai de vez.
   Vale também para a tela baixa de até 500px (o celular deitado, ex.: 844×390), que
   tem largura de desktop mas não a altura das duas colunas; ali a coluna do
   formulário fica centralizada, com os mesmos 440px. O 500.98px (e não 500px) fecha
   a brecha das alturas fracionárias que o zoom do navegador produz: uma janela de
   500,5px não entrava nem aqui nem no "(min-height: 501px)" do desktop. */
@media (max-width: 768px), (max-height: 500.98px) {
  .login-page { display: block; min-height: 0; }
  .login-brand-panel {
    position: absolute;
    width: 1px;
    height: 1px;
    min-height: 0;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    border: 0;
    white-space: nowrap;
    clip-path: inset(50%);
  }
  .auth-visual { display: none; }
  .login-form-panel {
    display: block;
    min-height: 0;
    padding: 24px 16px 32px;
    background: transparent;
  }
  .login-form-area { display: block; min-height: 0; padding-top: 0; }
  .login-card { max-width: 440px; margin: 0 auto; padding: 0; border-radius: 0; }
  .login-back-button { margin-bottom: 28px; }
  .auth-logo { height: 36px; margin-bottom: 28px; }
  .login-card h2 { font-size: 24px; }
  .login-description { font-size: 15px; margin-bottom: 28px; }
  .login-form input { margin-bottom: 20px; }
  .forgot-password { margin: -10px 0 20px; }
  .cadastro-link { margin-top: 28px; }
  .rodape-legal-global { padding: 8px 16px 24px; }
}