/* Login (spec §4.4): sempre escuro (o login.html fixa data-tema="escuro" e não carrega o tema.js), logo RiseSales e
   botão principal laranja com texto escuro (--primaria e --primaria-texto do tema escuro). Só tokens; sem o brilho, a
   grade e o gradiente das páginas de venda (fora do escopo, §9). Arquivo público, como o login.html. */
.pagina-login { min-height: 100vh; display: grid; place-items: center; padding: var(--e4); background: var(--fundo); }
.login { width: min(360px, 100%); }
.cartao-login {
  display: grid; gap: var(--e4); padding: var(--e6) var(--e5);
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
}
.login-marca { display: flex; align-items: center; gap: var(--e2); }
.login-marca .chama { width: 34px; height: 34px; fill: var(--destaque); flex: none; }
.login-marca-texto { font-size: 26px; font-weight: 700; letter-spacing: -0.035em; line-height: 1; }
.marca-rise { color: var(--texto); }
.marca-sales { color: var(--destaque); }
.cartao-login h1 { margin: 0 0 var(--e2); font-size: var(--t-rotulo); font-weight: 600; text-transform: uppercase; letter-spacing: 0.16em; color: var(--texto-2); }
.cartao-login label { display: grid; gap: var(--e1); font-size: var(--t-tabela); font-weight: 500; color: var(--texto-2); }
.cartao-login input {
  min-height: var(--altura-campo); padding: 0 var(--e3);
  border: 1px solid var(--borda); border-radius: var(--raio-botao); background: var(--superficie-2); color: var(--texto); font: inherit;
}
.cartao-login input:focus-visible { outline: 2px solid var(--destaque); outline-offset: 0; border-color: var(--destaque); }
.cartao-login button {
  min-height: var(--altura-campo); margin-top: var(--e2);
  border: 0; border-radius: var(--raio-botao); background: var(--primaria); color: var(--primaria-texto); font-weight: 600;
}
.cartao-login button:hover { filter: brightness(1.08); }
.cartao-login button:disabled { opacity: 0.5; cursor: default; }
/* Plano 8 (spec 2026-10-13-vps-easypanel-design.md §4.1): o captcha do Turnstile (o widget tem 65px de altura) e o passo do
   código, com "lembrar este aparelho" e o "Voltar" discreto. */
.cartao-login .captcha { min-height: 65px; }
.cartao-login .dica { margin: 0; }
.cartao-login .lembrar { display: flex; align-items: center; gap: var(--e2); font-weight: 400; }
.cartao-login input[type="checkbox"] { min-height: 0; width: 18px; height: 18px; padding: 0; accent-color: var(--primaria); }
.cartao-login input[name="codigo"] { font-size: var(--t-medio); letter-spacing: 0.3em; text-align: center; }
.cartao-login button.voltar {
  min-height: var(--alvo-toque); margin-top: 0; background: none; color: var(--texto-2); font-weight: 500; text-decoration: underline;
}
@media (max-width: 767.98px) {
  .cartao-login { padding: var(--e5) var(--e4); }
}