/* /entrar, /cadastro, /termos e /privacidade. Só o que é destas páginas.
   Todo componente global (botão, campo, aceite, cartão, cabeçalho, rodapé) está no v2.css. */

/* ---------- entrar e cadastro: um cartão só, no meio da tela ---------- */
.conta-auth{display:flex;flex-direction:column;min-height:100vh;min-height:100dvh}
.auth{flex:1 0 auto;display:flex;flex-direction:column;align-items:center;padding:20px var(--gutter) 28px}
.auth-cartao{width:100%;max-width:440px;display:flex;flex-direction:column;gap:20px;padding:24px 20px}
.auth-logo{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;margin:-8px 0 -4px}
.auth-logo img{height:28px;width:auto}
.auth-cab{display:flex;flex-direction:column;gap:8px}
.auth-cab h1{font-size:30px;line-height:1.15}
.auth-cab p{font-size:16px;line-height:1.5;color:var(--tinta-2)}
.auth-form{display:flex;flex-direction:column;gap:16px}
.auth-form .btn{margin-top:4px}

/* campo com erro (o auth.js liga .erro na caixa do campo) */
.campo.erro .campo-dado{border-color:var(--dor)}
.campo.erro .campo-dado:focus{box-shadow:0 0 0 4px rgba(180,35,24,.12)}
.campo-dica{font-size:13px;line-height:1.4;color:var(--tinta-2)}
/* a frase de erro aparece logo abaixo do campo que errou (sem mexer no auth.js: só a ordem visual muda).
   Sem campo marcado (ex.: e-mail ou senha não conferem), ela fica logo acima do botão. */
.auth-form>[data-campo="nome"]{order:1}
.auth-form>[data-campo="email"]{order:2}
.auth-form>[data-campo="senha"]{order:3}
.auth-form>[data-campo="aceite"]{order:4}
.auth-form>#msg{order:9;margin-top:-8px}
.auth-form>.btn{order:10}
.auth-form:has(>[data-campo="nome"].erro)>#msg{order:1}
.auth-form:has(>[data-campo="email"].erro)>#msg{order:2}
.auth-form:has(>[data-campo="senha"].erro)>#msg{order:3}
.auth-form:has(>[data-campo="aceite"].erro)>#msg{order:4}

/* senha com o botão Mostrar dentro do campo */
.senha-caixa{position:relative}
.senha-caixa .campo-dado{padding-right:112px}
.senha-caixa .campo-dado:focus{padding-right:111px}
.senha-ver{position:absolute;top:50%;right:6px;transform:translateY(-50%);display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border:0;border-radius:8px;background:none;color:var(--marca);font:600 15px var(--fonte);cursor:pointer}
.senha-ver svg{width:20px;height:20px;flex:none}
.senha-ver .olho-fechado{display:none}
.senha-ver[aria-pressed="true"] .olho{display:none}
.senha-ver[aria-pressed="true"] .olho-fechado{display:block}
.senha-ver:hover{background:var(--marca-clara)}

.auth-ajuda{display:flex;align-items:center;justify-content:center;gap:6px;min-height:44px;font-size:15px;font-weight:600;color:var(--marca);text-align:center}
.auth-ajuda svg{width:18px;height:18px;flex:none}
.auth-outra{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:15px;line-height:1.5;color:var(--tinta-2);text-align:center}
.auth-outra a{display:inline-flex;align-items:center;min-height:40px;font-weight:700;color:var(--marca);text-wrap:balance}
.auth-outra.em-linha{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0 6px}
.auth-outra+.auth-outra{margin-top:-12px}
/* o link de compra tem a cor de ação; o "já tem conta" fica menor, por último */
.auth-compra a{color:var(--acao)}
.auth-compra a:hover{color:var(--acao-hover)}
.auth-menor{font-size:14px}
.auth-menor a{min-height:44px;font-weight:600}
.aviso-pendente{padding:12px 14px;border-radius:var(--raio);background:var(--ok-claro);color:var(--tinta);font-size:15px;line-height:1.5;font-weight:600}

/* rodapé mínimo, claro, embaixo do cartão */
.auth-rodape{width:100%;max-width:440px;margin:24px auto 0;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:13px;line-height:1.5;color:var(--tinta-2);text-align:center}
.auth-rodape ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:0 18px}
.auth-rodape a{display:inline-flex;align-items:center;min-height:32px;color:var(--tinta-2);text-decoration:underline;text-underline-offset:2px}
.auth-rodape a:hover{color:var(--marca)}

@media (min-width:600px){
  .auth{justify-content:center;padding:48px var(--gutter)}
  .auth-cartao{max-width:400px;padding:32px 28px}
  .auth-cab h1{font-size:30px}
}

/* ---------- termos e privacidade: folha de leitura com índice ---------- */
.conta-doc .rodape{padding-bottom:40px}   /* aqui não tem barra fixa embaixo */
.doc-cab{padding:28px 0 20px}
.doc-cab .wrap{display:flex;flex-direction:column;gap:8px}
.doc-meta{font-size:15px;line-height:1.5;color:var(--tinta-2)}
.doc-voltar-consulta{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;min-height:44px;font-size:15px;font-weight:600;color:var(--marca)}
.doc-voltar-consulta svg{width:18px;height:18px;flex:none}
.doc-grade{display:grid;gap:16px;padding-bottom:48px}

.doc-indice{background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio-cartao);padding:0 16px}
.doc-indice summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:52px;font-size:15px;font-weight:700;color:var(--tinta);cursor:pointer;list-style:none}
.doc-indice summary::-webkit-details-marker{display:none}
.doc-indice summary small{font-size:13px;font-weight:500;color:var(--tinta-2)}
.doc-indice summary svg{width:16px;height:16px;flex:none;color:var(--tinta-2);transition:transform .2s}
.doc-indice[open] summary svg{transform:rotate(180deg)}
.doc-indice ol{list-style:none;margin:0;padding:4px 0 10px;border-top:1px solid var(--linha)}
.doc-indice a{display:flex;align-items:center;min-height:44px;padding:4px 0;font-size:15px;line-height:1.35;font-weight:500;color:var(--tinta);text-decoration:none}
.doc-indice a:hover{color:var(--marca);text-decoration:underline}

.doc-folha{min-width:0;background:var(--superficie);border:1px solid var(--linha);border-radius:var(--raio-cartao);box-shadow:var(--sombra);padding:8px 20px 28px}
.doc-texto{max-width:68ch;font-size:17px;line-height:1.65;color:var(--tinta)}
.doc-texto h2{font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-.01em;margin-top:28px;padding-top:24px;border-top:1px solid var(--linha);scroll-margin-top:16px}
.doc-texto h2:first-child{margin-top:12px;padding-top:0;border-top:0}
.doc-texto p,.doc-texto ul{margin-top:12px}
.doc-texto p,.doc-texto li{text-wrap:wrap}   /* sem balance/pretty: a linha vai até o fim da coluna */
.doc-texto ul{padding-left:22px}
.doc-texto li{padding-left:4px}
.doc-texto li+li{margin-top:8px}
.doc-texto li::marker{color:var(--marca)}
.doc-texto b{font-weight:700}
.doc-texto a{font-weight:600}
.doc-volta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 24px;margin-top:28px;padding-top:20px;border-top:1px solid var(--linha);font-size:16px}
.doc-volta a{display:inline-flex;align-items:center;gap:6px;min-height:44px;font-weight:700}
.doc-volta svg{width:18px;height:18px;flex:none}
.doc-volta .doc-inicio{font-weight:500;color:var(--tinta-2)}

/* celular: índice e folha encostam nas bordas da tela (a linha de leitura ganha 32px) */
@media (max-width:599px){
  .doc-indice,.doc-folha{margin-inline:calc(var(--gutter) * -1);border-radius:0;border-inline:0}
  .doc-indice{padding-inline:var(--gutter)}
  .doc-folha{padding:4px var(--gutter) 24px}
}
/* desktop: índice fixo na coluna da esquerda, a folha na da direita */
.doc-nav{position:sticky;top:24px;display:flex;flex-direction:column;gap:12px}
@media (min-width:1024px){.doc-nav{top:88px}}
.doc-nav ol{list-style:none;margin:0;padding:0;border-left:2px solid var(--linha)}
.doc-nav a{display:flex;align-items:center;min-height:36px;margin-left:-2px;padding:6px 0 6px 14px;border-left:2px solid transparent;font-size:14px;line-height:1.35;font-weight:500;color:var(--tinta-2);text-decoration:none}
.doc-nav a:hover{border-left-color:var(--marca);color:var(--marca)}
@media (min-width:900px){
  .doc-cab{padding:56px 0 32px}
  .doc-cab .wrap,.doc-grade{max-width:calc(1000px + var(--gutter) * 2)}
  .doc-grade{grid-template-columns:232px minmax(0,1fr);gap:48px;align-items:start;padding-bottom:72px}
  .doc-folha{padding:16px 44px 40px}   /* 44px: a coluna de texto ganha 8px e o item 5 da privacidade cabe numa linha */
  .doc-texto{font-size:16px;line-height:1.75}
}
@media (prefers-reduced-motion:reduce){.doc-indice summary svg{transition:none}}
/* telas muito estreitas (320px): o link do suporte cabe em uma linha */
@media (max-width:359px){
  .auth-cartao{padding:20px 16px}
  .auth-ajuda{font-size:14px}
  .auth-ajuda svg{display:none}
}