/* dvh acompanha a barra de endereço do Safari; 100vh sozinho mede a tela
   como se a barra não existisse e esconde o pé do cartão atrás dela. */
.account-modal{
  position:fixed;
  inset:0;
  z-index:20;
  background:var(--green-800);
  display:none;
  height:100vh;
  height:100dvh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  padding:max(20px,env(safe-area-inset-top)) 20px max(20px,env(safe-area-inset-bottom));
}
/* margin:auto no cartão centraliza quando cabe e vira rolagem quando não
   cabe — ao contrário de place-items:center, que corta o topo. */
.account-modal.is-open{display:flex}
.account-card{
  margin:auto;
  width:min(430px,100%);
  background:var(--surface-card);
  padding:42px 40px;
  box-shadow:14px 14px 0 var(--lime-300);
}
.account-brand{
  font-size:23px;
  font-weight:700;
  letter-spacing:-1.3px;
  color:var(--green-900);
  text-decoration:none;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:53px;
}
.account-brand b{color:var(--clay-500)}
.account-card h1{font:600 35px/1 Fraunces,serif;letter-spacing:-1.1px;margin:11px 0}
.account-card>p{font-size:var(--text-sm);color:#62776f;line-height:1.55;margin:0 0 24px}
.account-card label{
  display:grid;
  gap:7px;
  font-size:var(--text-xs);
  font-weight:600;
  color:#4e6962;
  margin-top:14px;
}
.account-card input{
  border:1px solid var(--border);
  background:var(--surface-card);
  border-radius:var(--radius-xs);
  padding:12px;
  font:var(--text-sm) "DM Sans";
  outline-color:#56a094;
}
/* 16px: abaixo disso o iOS dá zoom ao focar e não volta mais. */
@media(max-width:820px){
  .account-card input{font-size:var(--text-md);padding:13px 12px}
}
.account-card .generate{width:100%;margin:25px 0 14px}
.account-card>small{
  display:block;
  text-align:center;
  color:var(--text-muted);
  font-size:var(--text-xs);
  line-height:1.4;
}
@media(max-width:500px){
  .account-card{padding:33px 25px}
  .account-card h1{font-size:31px}
}
/* tela baixa (iPhone deitado, ou com o teclado aberto): encolhe o cartão
   para o campo e o botão continuarem visíveis sem precisar rolar. */
@media(max-height:730px){
  .account-card{padding:26px 24px}
  .account-brand{margin-bottom:20px}
  .account-card h1{font-size:26px;margin:8px 0}
  .account-card>p{margin-bottom:16px;font-size:var(--text-xs)}
  .account-card .generate{margin:18px 0 10px}
}
/* Sugestão de correção do e-mail: é aviso, não erro. Por isso o tom é o das dicas do formulário, e não o vermelho de falha. */
.email-sugestao{margin:6px 0 0;font:var(--text-xs) "DM Sans",sans-serif;color:var(--text-muted)}
.email-sugestao button{
  border:0;
  background:transparent;
  padding:0;
  font:700 var(--text-xs) "DM Sans",sans-serif;
  color:var(--green-600);
  cursor:pointer;
  text-decoration:underline;
  text-underline-offset:2px;
}
.email-sugestao button:hover{color:#1b5a4f}
.auth-error{
  background:var(--neutral-100);
  border:1px solid #eccfc4;
  border-radius:var(--radius-xs);
  color:var(--clay-700);
  font:var(--text-xs)/1.55 "DM Sans";
  padding:11px 13px;
  margin:0 0 14px;
}
.auth-spam .auth-tip{font-size:var(--text-xs);color:var(--text-muted)}
.auth-spam{
  display:flex;
  gap:11px;
  background:var(--neutral-100);
  border:1px solid #e8d5b8;
  border-radius:var(--radius-xs);
  padding:13px 15px;
  margin:4px 0 16px;
  text-align:left;
}
.auth-spam>span{color:#c08a3e;font-size:var(--text-base);line-height:1.2}
.auth-spam strong{display:block;font-size:var(--text-xs);color:#7a5a2b;margin-bottom:5px}
.auth-spam p{margin:0 0 6px;font:var(--text-xs)/1.55 "DM Sans";color:#7b6647}
.auth-spam p:last-child{margin-bottom:0}
.auth-spam b{color:#5f4a2e}
/* Entrada pelo código de 6 dígitos, no cartão "confira seu e-mail". */
.auth-code{margin:16px 0 14px;padding-top:16px;border-top:1px solid #e7e8e1;text-align:left}
.auth-code>label{display:block;font:600 var(--text-xs) "DM Sans";color:#4e6962;margin-bottom:8px}
.auth-code>div{display:flex;gap:8px}
.auth-code input{
  flex:1;
  min-width:0;
  border:1px solid var(--border);
  border-radius:var(--radius-xs);
  background:var(--surface-card);
  padding:12px;
  font:600 var(--text-lg)/1 "DM Mono",monospace;
  letter-spacing:5px;
  text-align:center;
  color:var(--text-strong);
  outline-color:#56a094;
}
.auth-code .generate{flex:none;width:auto;margin:0;padding:12px 18px}
.auth-code small{
  display:block;
  margin-top:8px;
  font:var(--text-xs)/1.5 "DM Sans";
  color:var(--text-muted);
}
/* No app instalado o código é o caminho principal, então ganha destaque. */
.is-standalone .auth-code{border-top:0;padding-top:0;margin-top:4px}
.is-standalone .auth-code>label{font-size:var(--text-xs);color:var(--text-strong)}
@media(max-width:820px){
  .auth-code input{font-size:var(--text-lg)}
}

/* ---------------------------------------------------------------- ENTRAR COM SENHA

   A tela de acesso tem quatro painéis dentro do mesmo cartão: senha, criar
   conta, recuperar e link mágico. Só um aparece por vez; as abas alternam
   entre os dois principais e somem nos outros dois, que são becos com volta.
------------------------------------------------------------------------- */

/* Entrar com Google: fica acima das abas porque é o caminho mais curto — quem entra por aqui já chega com o e-mail verificado. */
.google-button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid var(--border);
  background:var(--surface-card);
  border-radius:var(--radius-xs);
  padding:13px 14px;
  font:700 var(--text-sm) "DM Sans",sans-serif;
  color:#3d5b55;
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.google-button:hover:not(:disabled){
  border-color:#a9c2b6;
  background:#fff;
  box-shadow:0 1px 6px rgba(28,90,79,.1);
}
.google-button:disabled{opacity:.6;cursor:default}
.auth-ou{
  display:flex;
  align-items:center;
  gap:12px;
  margin:16px 0 14px;
  font:600 var(--text-2xs) "DM Sans",sans-serif;
  letter-spacing:.6px;
  color:var(--text-muted);
  text-transform:uppercase;
}
.auth-ou:before,.auth-ou:after{content:"";flex:1;height:1px;background:var(--border)}
.auth-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
  background:var(--neutral-200);
  border-radius:var(--radius-xs);
  padding:4px;
  margin:0 0 20px;
}
.auth-tab{
  border:0;
  background:transparent;
  border-radius:var(--radius-xs);
  padding:9px 6px;
  cursor:pointer;
  font:600 var(--text-xs) "DM Sans";
  color:var(--text-muted);
  transition:background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.auth-tab:hover{color:var(--green-600)}
.auth-tab.is-on{
  background:var(--surface-card);
  color:var(--green-900);
  box-shadow:0 1px 3px rgba(30,60,52,.13);
}

.auth-pane{display:block}
.auth-pane.hidden{display:none}

/* Campo de senha com o botão "ver" encostado na borda de dentro. */
.pw-wrap{position:relative;display:block}
.pw-wrap input{width:100%;padding-right:56px}
.pw-eye{
  position:absolute;
  top:50%;
  right:6px;
  transform:translateY(-50%);
  border:0;
  background:transparent;
  color:var(--text-muted);
  font:600 var(--text-2xs) "DM Sans";
  text-transform:uppercase;
  letter-spacing:.5px;
  padding:7px 8px;
  cursor:pointer;
  border-radius:var(--radius-xs);
}
.pw-eye:hover{color:var(--green-600);background:var(--neutral-200)}

/* Três barrinhas: fraca, média, boa. Cor só muda de intensidade — é uma
   medida ordenada, não categorias diferentes. */
.pw-meter{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-top:7px}
.pw-meter i{
  height:3px;
  border-radius:var(--radius-xs);
  background:var(--border);
  transition:background-color var(--dur-base) var(--ease-out);
}
.pw-meter[data-nivel="1"] i:nth-child(1){background:#d99a7a}
.pw-meter[data-nivel="2"] i:nth-child(-n+2){background:#c7b95e}
.pw-meter[data-nivel="3"] i{background:#3f9184}

.auth-links{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;margin-top:2px}
.auth-links button{
  border:0;
  background:transparent;
  color:#4e6962;
  font:600 var(--text-xs) "DM Sans";
  cursor:pointer;
  padding:4px 0;
  text-decoration:underline;
  text-underline-offset:3px;
}
.auth-links button:hover{color:var(--green-600)}

.auth-note{
  display:block;
  font:var(--text-xs)/1.55 "DM Sans";
  color:var(--text-muted);
  margin:12px 0 0;
  text-align:center;
}
#pane-forgot .auth-note{margin:0 0 18px;text-align:left}
.auth-terms{
  display:block;
  text-align:center;
  color:var(--text-muted);
  font-size:var(--text-xs);
  line-height:1.4;
  margin-top:18px;
}

#auth-confirm .outline-button,#auth-sent .outline-button{width:100%;margin-top:8px}

/* ---------------------------------------------------------------- ESPERA
   Cartão mostrado enquanto o app ainda não sabe se a pessoa está conectada.
   Ocupa o lugar do formulário de login para que ele não pisque na tela de
   quem já tem sessão — antes o login aparecia por dois ou três segundos e
   sumia sozinho, o que parecia erro. */
.account-loading{text-align:center;padding-top:52px;padding-bottom:52px}
.account-loading .account-brand{justify-content:center;margin-bottom:30px}
.account-loading p{margin:18px 0 0;font-size:var(--text-xs);color:#62776f}
.auth-spinner{
  display:inline-block;
  width:26px;
  height:26px;
  border:2px solid var(--border);
  border-top-color:#56a094;
  border-radius:50%;
  animation:auth-gira .8s linear infinite;
}
@keyframes auth-gira{
  to{transform:rotate(360deg)}
}
@media(prefers-reduced-motion:reduce){
  .auth-spinner{animation-duration:2.4s}
}

/* ------------------------------------------------- TELA DE ACESSO EM DUAS METADES
   O cartão de acesso continua exatamente o mesmo — os sete que se revezam
   (carregando, falha, entrar, confirmar, nova senha…) não sabem que isto
   existe. O que mudou é só o lado direito: um painel fixo com a foto e o que
   o produto faz, para quem chega no login não olhar para uma tela vazia.

   position:fixed, e não uma coluna de flex, porque os cartões são irmãos
   diretos do modal e se revezam com display:none — uma coluna a mais
   mudaria o cálculo do margin:auto que centraliza o cartão da vez.
------------------------------------------------------------------------- */
.account-hero{
  position:fixed;
  inset:0 0 0 auto;
  width:46%;
  display:none;
  background:url("/assets/dentist-consultation.jpg") center 22% / cover no-repeat var(--green-800);
}
/* O véu é o que deixa o texto legível por cima da foto e casa a imagem com
   o verde do resto da tela. Sem ele, a foto clara come as letras brancas. */
.hero-veu{
  position:absolute;
  inset:0;
  background:linear-gradient(190deg,rgba(23,74,70,.34) 0%,rgba(17,59,56,.72) 52%,rgba(15,50,48,.94) 100%);
}
.hero-texto{
  position:relative;
  height:100%;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:26px;
  padding:48px clamp(32px,4vw,62px) clamp(40px,6vh,64px);
  color:var(--text-on-dark);
}
.hero-marca{
  display:flex;
  align-items:center;
  gap:9px;
  font-size:var(--text-xl);
  font-weight:700;
  letter-spacing:-1.1px;
  margin-bottom:auto;
  animation:hero-entra .6s .15s both;
}
.hero-marca b{color:var(--clay-300)}
.hero-texto h2{
  font:600 clamp(27px,2.6vw,38px)/1.12 Fraunces,serif;
  letter-spacing:-1.1px;
  margin:0;
  max-width:11.5em;
  animation:hero-entra .6s .3s both;
}
.hero-fatos{list-style:none;margin:0;padding:0;display:grid;gap:13px;max-width:420px}
.hero-fatos li{
  display:grid;
  gap:3px;
  padding:14px 16px;
  border-radius:var(--radius-sm);
  background:rgba(255,254,250,.09);
  border:1px solid rgba(255,254,250,.16);
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
  animation:hero-entra .6s both;
}
.hero-fatos li:nth-child(1){animation-delay:.45s}
.hero-fatos li:nth-child(2){animation-delay:.58s}
.hero-fatos li:nth-child(3){animation-delay:.71s}
.hero-fatos b{font:700 var(--text-sm) "DM Sans",sans-serif}
.hero-fatos span{font-size:var(--text-xs);line-height:1.45;color:rgba(255,254,250,.76)}
@keyframes hero-entra{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:none}
}

/* Só a partir de 900px: abaixo disso a foto roubaria a metade da tela de
   quem só quer digitar o e-mail, e o cartão é o que importa no celular. */
@media(min-width:900px){
  .account-hero{display:block}
  .account-modal{padding-right:calc(46% + 24px);padding-left:24px}
}
/* Telas largas: o painel para de crescer e vira uma faixa. */
@media(min-width:1700px){
  .account-hero{width:min(46%,760px)}
  .account-modal{padding-right:calc(min(46%,760px) + 24px)}
}

@media(prefers-reduced-motion:reduce){
  .hero-marca,.hero-texto h2,.hero-fatos li{animation:none}
}

/* -------------------------------------------------------- BOTÃO DE ACESSO
   Aqui NÃO tem vidro, e é de propósito. O botão fica sobre o cartão branco:
   não há nada atrás dele para atravessar. A tentativa de dar um fundo falso
   (uma nuvem colorida atrás da pastilha) virou um borrão de três cores
   vazando pelas bordas — pior do que não ter fundo nenhum.

   Vidro só vale onde existe algo atrás. Na home existe (a aurora da página);
   aqui não existe, então o botão é o que ele é: uma pastilha verde sólida,
   com um fio de luz no topo, um fio de sombra embaixo e a sombra projetada.

   O realce de cima é um FIO de 1px, não uma calota. Calota clareia justamente
   a faixa onde as letras ficam — foi assim que a versão anterior caiu para
   2,1:1 de contraste.
------------------------------------------------------------------------- */
.account-card .generate{
  position:relative;
  border:0;
  border-radius:999px;
  padding:16px 24px;
  font:700 var(--text-base)/1 "DM Sans",sans-serif;
  letter-spacing:.1px;
  color:#fff;
  background:linear-gradient(180deg,#2a8579 0%,var(--green-700) 52%,var(--green-800) 100%);
  box-shadow:
    0 1px 0 rgba(255,255,255,.3) inset,
    0 -1px 0 rgba(0,0,0,.2) inset,
    0 10px 22px -10px rgba(14,58,54,.45),
    0 2px 5px rgba(14,58,54,.2);
  text-shadow:0 1px 1px rgba(6,32,30,.28);
  transition:transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out);
}
.account-card .generate b{
  font-size:var(--text-md);
  margin-left:12px;
  font-weight:600;
  color:var(--lime-300);
}
.account-card .generate:hover:not(:disabled){
  transform:translateY(-1px);
  filter:brightness(1.08);
  box-shadow:
    0 1px 0 rgba(255,255,255,.34) inset,
    0 -1px 0 rgba(0,0,0,.2) inset,
    0 16px 30px -10px rgba(14,58,54,.5),
    0 2px 5px rgba(14,58,54,.22);
}
.account-card .generate:active:not(:disabled){
  /* só a sombra: o encolher vem do motion.css */
  box-shadow:
    0 2px 5px rgba(0,0,0,.22) inset,
    0 4px 10px -7px rgba(14,58,54,.4);
}
.account-card .generate:focus-visible{outline:2px solid #7fb8ac;outline-offset:3px}
.account-card .generate:disabled{opacity:.6}
/* O botão do código fica lado a lado com o campo: pastilha menor, sem esticar. */
.account-card .auth-code .generate{padding:13px 20px;font-size:var(--text-sm)}

@media(prefers-reduced-motion:reduce){
  .account-card .generate{transition:none}
  .account-card .generate:hover:not(:disabled){transform:none}
  .account-card .generate:active:not(:disabled){transform:none}
}