/* Telas públicas: login, cadastro, recuperação de senha, termos e instalação */
body.pagina-acesso { background-color: var(--fundo-acesso, var(--bg)); background-size: cover; background-position: center; background-attachment: fixed; }
.acesso { padding: 32px 16px; }
.acesso-lado { display: flex; gap: 28px; align-items: center; justify-content: center; width: 100%; max-width: 980px; flex-wrap: wrap; }
.acesso-lado .acesso-caixa { flex: 0 1 400px; }
.acesso-lado .promo { flex: 0 1 380px; margin-top: 0; }
.acesso-larga { max-width: 720px; }
.acesso-caixa .cartao h2 { font-size: 20px; }
.rotulo-acesso { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--laranja); margin-bottom: 2px; }
.carimbo a { color: inherit; }
body.pagina-acesso .carimbo { color: var(--suave); }

/* fundo com imagem: o texto do rodapé ganha contraste */
body.com-imagem .marca-sub, body.com-imagem .carimbo { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }

.seg { display: inline-flex; border: 1px solid var(--linha); border-radius: 4px; overflow: hidden; }
.seg button { background: var(--campo); color: var(--suave); border: 0; border-right: 1px solid var(--linha); padding: 9px 14px; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600; }
.seg button:last-child { border-right: 0; }
.seg button.ativo { background: var(--laranja-bg); color: var(--ambar); }
.seg-largo { display: flex; }
.seg-largo button { flex: 1; }

/* escolha de plano no cadastro */
.planos-escolha { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.plano-op { position: relative; border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px; cursor: pointer; background: var(--campo); transition: border-color .15s, box-shadow .15s; }
.plano-op:hover { border-color: var(--fraco); }
.plano-op.ativo { border-color: var(--laranja); box-shadow: 0 0 0 2px var(--laranja-bg); }
.plano-op input { position: absolute; opacity: 0; pointer-events: none; }
.plano-op strong { display: block; font-family: var(--f-titulo); font-size: 14px; }
.plano-op .preco { font-family: var(--f-titulo); font-size: 18px; font-weight: 700; color: var(--ambar); margin: 2px 0; }
.plano-op .preco small { font-size: 11px; color: var(--suave); font-weight: 600; }
.plano-op p { margin: 4px 0 0; font-size: 12px; color: var(--suave); }
.plano-op ul { margin: 6px 0 0; padding-left: 16px; font-size: 11.5px; color: var(--suave); }
.plano-op .selo { position: absolute; top: -9px; right: 10px; background: var(--laranja); color: var(--sobre-cor); font-size: 10px; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 10px; text-transform: uppercase; }

.aceite { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; cursor: pointer; }
.aceite input { margin-top: 3px; accent-color: var(--laranja); }
.dica.ok { color: var(--ok); font-weight: 600; }
.dica.erro { color: var(--erro); font-weight: 600; }

.texto-legal .legal { white-space: pre-line; font-size: 13px; line-height: 1.6; color: var(--texto); max-height: 52vh; overflow-y: auto; padding-right: 6px; }

@media (max-width: 700px) { .acesso-lado .promo { flex-basis: 100%; } }
.acesso-caixa .com-botao .btn { width: auto; flex-shrink: 0; padding: 9px 16px; }

/* "não sou um robô" (Cloudflare Turnstile) */
.robo { min-height: 65px; display: flex; justify-content: center; }
.robo.oculto { display: none; }
.robo iframe { max-width: 100%; }
.robo-aviso { font-size: 12px; color: var(--suave); text-align: center; align-self: center; }