/* Telas de login e "Minha senha" (usam as cores do estilo.css) */
body.tela-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 24px 16px;
  background: linear-gradient(160deg, var(--topo) 0%, var(--topo-2) 100%); }
.caixa-login { width: 100%; max-width: 380px; background: var(--card); border-radius: 14px; padding: 28px 26px 22px; box-shadow: 0 12px 40px rgba(0, 0, 0, .25); }
.logo-login { display: block; height: 64px; width: auto; margin: 0 auto 12px; }
@media (prefers-color-scheme: dark) { .logo-login { filter: brightness(0) invert(1); opacity: .9; } }
.caixa-login h1 { margin: 0; text-align: center; font-size: 22px; }
.caixa-login .sub { margin: 4px 0 18px; text-align: center; color: var(--sub); font-size: 13px; }
.caixa-login form { display: grid; gap: 6px; }
.caixa-login label { font-size: 12.5px; font-weight: 600; color: var(--sub); margin-top: 6px; }
.caixa-login label .nota { font-weight: 400; color: var(--mudo); }
.caixa-login input { height: 42px; padding: 0 12px; border: 1px solid var(--borda); border-radius: 8px; background: var(--card); color: var(--txt); font: inherit; font-size: 15px; }
.caixa-login input:focus { border-color: var(--azul); outline: 2px solid color-mix(in srgb, var(--azul) 25%, transparent); outline-offset: 0; }
.caixa-login .btn.primario { margin-top: 12px; justify-content: center; width: 100%; }
.caixa-login .erro { margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: var(--neg-bg); color: var(--neg); font-size: 13px; font-weight: 600; }
.caixa-login .dica { text-align: center; margin-top: 16px; }