/* Tela de login JC — fiel ao Template_Front_End.jpeg. Consome o design system
   compartilhado (app-theme.css): fundo branco, logo central, botão verde,
   link PORTAL JC. SEM campos de credencial (o SSO trata login/senha
   no Keycloak). Aqui ficam apenas ajustes específicos da tela de login. */
@import url('/app-theme.css');

.login-shell {
  width: 100%;
  max-width: var(--shell-max);
  /* min-width:0 garante que o shell encolha junto ao viewport (flex item). */
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Logo OFICIAL um pouco maior na tela de login (foco total na marca).
   Como a logo completa ja inclui o wordmark, dimensionamos pela largura. */
.login-shell .brand-logo--full {
  width: 300px;
  max-width: 86vw;
  height: auto;
}

.login-btn {
  margin-top: 40px;
}

.login-msg {
  margin-top: 16px;
  font-size: 13px;
  line-height: 1.4;
  color: #b62929;
  background: #fdecec;
  border: 1px solid #f6c9c9;
  border-radius: 10px;
  padding: 10px 14px;
  width: 100%;
}

/* "Entrar com outra conta" — variante ghost/outline (secundaria ao botao
   verde). Revelada por login.js apos uma negacao de acesso. Reutiliza os
   tokens do app-theme.css (altura/raio/teal) para coerencia visual. */
.btn-secondary.login-switch {
  margin-top: 14px;
  width: 100%;
  max-width: 100%;
  height: var(--btn-h);
  border: 1.5px solid var(--jc-teal);
  border-radius: var(--btn-radius);
  background: transparent;
  color: var(--jc-teal);
  font-size: 16px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: filter 0.15s, transform 0.05s;
}

.btn-secondary.login-switch:hover:not(:disabled) {
  filter: brightness(1.06);
  background: rgba(0, 0, 0, 0.02);
}

.btn-secondary.login-switch:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-secondary.login-switch:disabled {
  opacity: 0.72;
  cursor: progress;
}

.login-foot {
  margin-top: 56px;
}