/* Tela de login (cauth/templates/login.html) — sempre escura, nas cores TSMX / SGP Neo
   (fundo --neo-bg #111118, cartão --neo-bg-card, destaque laranja #e8590c). */
:root {
  --lg-bg: #111118;
  --lg-cartao: rgba(25, 25, 40, .85);
  --lg-borda: rgba(255, 255, 255, .08);
  --lg-texto: #f0f0f0;
  --lg-texto-suave: #8a8a9a;
  --lg-campo: rgba(255, 255, 255, .04);
  --lg-laranja: #e8590c;
  --lg-laranja-hover: #f06b22;
  --lg-erro: #ff5e70;
}

html, body.login-pagina { min-height: 100%; }
body.login-pagina {
  margin: 0;
  background-color: var(--lg-bg) !important;
  /* brilho laranja suave atrás do cartão e um toque azul no lado da marca */
  background-image:
    radial-gradient(60rem 40rem at 85% 15%, rgba(232, 89, 12, .14), transparent 60%),
    radial-gradient(50rem 40rem at 10% 90%, rgba(40, 60, 120, .25), transparent 60%) !important;
  background-attachment: fixed;
  color: var(--lg-texto);
  font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.login-layout { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 992px) { .login-layout { grid-template-columns: 1.1fr 1fr; } }

/* ---- Marca ---------------------------------------------------------------- */
.login-marca {
  flex-direction: column; justify-content: center; align-items: flex-end;
  padding: 4rem 5rem; border-right: 1px solid var(--lg-borda);
}
.login-logo { width: min(520px, 100%); max-height: 160px; object-fit: contain; }

/* ---- Cartão --------------------------------------------------------------- */
.login-cartao-area {
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 2.5rem 1.25rem;
}
.login-cartao {
  width: 100%; max-width: 420px;
  background: var(--lg-cartao);
  border: 1px solid var(--lg-borda);
  border-radius: 24px;
  padding: 2.5rem 2.25rem 2.25rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .45);
  backdrop-filter: blur(8px);
}
.login-logo-mobile { display: block; width: 70%; max-height: 90px; object-fit: contain; margin: 0 auto 1.75rem; }
.login-titulo { font-size: 1.6rem; font-weight: 500; margin: 0 0 .35rem; color: #fff; }
.login-subtitulo { color: var(--lg-texto-suave); margin: 0 0 1.75rem; font-size: .9rem; }

.login-alerta {
  display: flex; align-items: flex-start;
  background: rgba(255, 94, 112, .08); border: 1px solid rgba(255, 94, 112, .3); color: #ffb3bd;
  border-radius: 12px; padding: .75rem .9rem; font-size: .85rem; margin-bottom: 1.25rem; line-height: 1.45;
}
.login-alerta i { color: var(--lg-erro); margin-top: .15rem; }
.login-suspensao { margin-bottom: 0; }
.login-suspensao a, .login-suspensao a:visited { color: #fff; }

.login-rotulo { display: block; font-size: .8rem; font-weight: 500; color: #c4c7c5; margin: 0 0 .4rem .15rem; }
.login-campo {
  position: relative; display: flex; align-items: center;
  background: var(--lg-campo); border: 1px solid rgba(255, 255, 255, .12); border-radius: 12px;
  margin-bottom: 1.1rem; transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.login-campo:hover { border-color: rgba(255, 255, 255, .25); }
.login-campo:focus-within { border-color: var(--lg-laranja); box-shadow: 0 0 0 3px rgba(232, 89, 12, .25); background: rgba(255, 255, 255, .06); }
.login-campo > i { width: 2.75rem; text-align: center; color: var(--lg-texto-suave); font-size: 1rem; }
.login-campo:focus-within > i { color: var(--lg-laranja); }
.login-campo input {
  flex: 1; min-width: 0; height: 3rem; background: transparent; border: 0; outline: 0;
  color: #fff; font-size: .95rem; padding-right: .75rem;
}
.login-campo input::placeholder { color: #6f7385; }
/* preenchimento automático do navegador sem o fundo amarelo/branco */
.login-campo input:-webkit-autofill { -webkit-text-fill-color: #fff; transition: background-color 9999s ease-out; caret-color: #fff; }
.login-ver-senha {
  border: 0; background: transparent; color: var(--lg-texto-suave); width: 2.75rem; height: 3rem; border-radius: 0 12px 12px 0;
}
.login-ver-senha:hover { color: #fff; }

.login-captcha { margin: .25rem 0 1.1rem; }

.login-botao {
  display: block; width: 100%; height: 3rem; margin-top: .5rem;
  border: 0; border-radius: 100px; background: var(--lg-laranja); color: #fff;
  font-size: .95rem; font-weight: 500; letter-spacing: .03em;
  box-shadow: 0 8px 20px rgba(232, 89, 12, .3); transition: background-color .15s, box-shadow .15s, transform .05s;
}
.login-botao:hover { background: var(--lg-laranja-hover); box-shadow: 0 10px 24px rgba(232, 89, 12, .4); }
.login-botao:active { transform: translateY(1px); }
.login-botao:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.login-ou { display: flex; align-items: center; gap: .75rem; color: var(--lg-texto-suave); font-size: .8rem; margin: 1.25rem 0 1rem; }
.login-ou::before, .login-ou::after { content: ""; flex: 1; height: 1px; background: var(--lg-borda); }
.login-oauth {
  display: block; text-align: center; padding: .7rem 1rem; margin-bottom: .6rem;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 100px; color: #fff; text-decoration: none; font-weight: 500;
  transition: background-color .15s, border-color .15s;
}
.login-oauth:hover { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .3); color: #fff; }

/* ---- Rodapé --------------------------------------------------------------- */
.login-rodape { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-top: 2rem; color: var(--lg-texto-suave); font-size: .8rem; }
.login-rodape img { opacity: .85; }
#version { color: #607d8b; }

@media (max-width: 575.98px) {
  .login-cartao { padding: 2rem 1.4rem 1.6rem; border-radius: 20px; }
}