/* login.css : so a tela de login. Fundo verde escuro da marca (mesma superficie
   da sidebar), cartao branco centralizado. Toda cor vem de token do style.css;
   nenhum hex aqui. */

.tela-login {
  margin: 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-4);
  background: var(--sidebar-fundo);
  font-family: var(--font);
  color: var(--texto);
}

.login-cartao {
  width: 100%;
  max-width: 380px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 16px;
  padding: var(--sp-6, 32px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
}

.login-marca {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}

.login-marca .logo-quadro {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cor-primaria);
  color: var(--texto-sobre-cor-primaria);
  font-size: var(--fs-xl);
}

.login-marca .marca-nome {
  font-family: var(--font-titulo);
  font-weight: 700;
  font-size: var(--fs-lg);
  color: var(--texto);
}

.login-marca .marca-sub {
  font-size: var(--fs-xs);
  color: var(--texto-suave);
}

.login-titulo {
  font-family: var(--font-titulo);
  font-size: var(--fs-2xl);
  margin: 0 0 var(--sp-1);
  color: var(--texto);
}

.login-sub {
  margin: 0 0 var(--sp-5);
  font-size: var(--fs-sm);
  color: var(--texto-secundario);
}

.login-msg {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-3);
  border-radius: 10px;
  font-size: var(--fs-sm);
  margin: 0 0 var(--sp-4);
}

.login-msg-erro {
  background: var(--perigo-suave);
  color: var(--perigo);
}

.login-msg-aviso {
  background: var(--aviso-suave);
  color: var(--aviso);
}

.login-form {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.login-campo {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}

.login-campo span {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--texto-secundario);
}

.login-campo input {
  width: 100%;
  box-sizing: border-box;
  padding: 11px var(--sp-3);
  font-family: var(--font);
  font-size: var(--fs-base);
  color: var(--texto);
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 10px;
  transition: border-color .15s, box-shadow .15s;
}

.login-campo input:focus {
  outline: none;
  border-color: var(--cor-primaria);
  box-shadow: 0 0 0 3px var(--cor-primaria-soft);
}

.login-entrar {
  margin-top: var(--sp-1);
  justify-content: center;
  width: 100%;
  padding: 12px;
  font-size: var(--fs-base);
}