/* ============================================================================
   login.css — card centralizado para a tela de login/semacesso, no mesmo
   estilo (raio 11-16px, borda fina, acento lime/petróleo) usado no badge de
   atalho do Ctrl+K/Ctrl+F. AUTO-INJETADO só nesta view (main-class.php).
   Par: views/login.php (wrapper .login-shell/.login-card — só escopo,
   nenhum HTML de conteúdo novo). Aditivo — remover este arquivo volta ao
   layout anterior sem quebrar nada.
   ============================================================================ */

/* site.css reserva padding-top pra compensar a navbar fixa; aqui não há
   navbar (usuário deslogado) — zera pra permitir centralizar o card. */
body {
  padding-top: 0 !important;
}

.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
}

.login-shell>#main {
  width: 100%;
  max-width: 380px;
  float: none;
}

.login-card {
  background: #fff;
  border: 1px solid rgba(5, 51, 69, .12);
  border-radius: 16px;
  box-shadow: 0 20px 45px rgba(5, 51, 69, .12);
  padding: 32px 28px 24px;
}

.theme-4 .login-card,
.theme-5 .login-card {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .14);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .45);
}

.login-card>.row {
  margin: 0 0 20px !important;
}

.login-card img {
  max-width: 200px;
  min-height: 80px;
  width: auto;
  height: auto;
}

/* .stack-container é reciclado por várias telas (site.css) com largura fixa
   de 390px + fundo/borda próprios — maior que o miolo do card (380px - 56px
   de padding) e por isso "vazava" pra fora. Neutralizado só aqui dentro do
   card de login; as outras telas que usam .stack-container não são afetadas. */
.login-card .stack-container {
  width: 100% !important;
  margin: 0 !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
}

/* zerar a margin acima colava o bloco tradicional no do Google quando os
   dois métodos estão habilitados (forma-login com mais de uma opção) */
.login-card .stack-container+.stack-container {
  margin-top: 18px !important;
}

/* botão "Continuar com o Google" — logo oficial (SVG 4 cores) em vez da
   imagem estática antiga; segue as diretrizes de marca do Google (fundo
   branco, borda cinza, sem inverter no tema escuro). */
.google-signin-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 40px;
  background: #fff;
  border: 1px solid #dadce0;
  border-radius: 8px;
  color: #3c4043;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  transition: box-shadow .15s ease, background .15s ease;
}

.google-signin-btn:hover,
.google-signin-btn:focus {
  box-shadow: 0 1px 4px rgba(0, 0, 0, .25);
  background: #f8f9fa;
  color: #3c4043;
  text-decoration: none;
}

.google-signin-btn-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.login-card p {
  color: rgba(5, 51, 69, .65);
  font-size: 13.5px;
  text-align: center;
  margin-bottom: 18px;
}

.theme-4 .login-card p,
.theme-5 .login-card p {
  color: rgba(230, 240, 242, .6);
}

.login-card .form-control {
  height: 40px;
  border-color: rgba(5, 51, 69, .2);
}

.theme-4 .login-card .form-control,
.theme-5 .login-card .form-control {
  background: rgba(255, 255, 255, .06) !important;
  border-color: rgba(255, 255, 255, .16) !important;
  color: #e6f0f2 !important;
}

.theme-4 .login-card .form-control::placeholder,
.theme-5 .login-card .form-control::placeholder {
  color: rgba(230, 240, 242, .45);
}

.login-card #salvaDados {
  width: 100%;
  height: 42px;
  border-radius: 8px;
}

.login-card #esqueci-minha-senha {
  float: none !important;
  display: block;
  text-align: center;
  margin-top: 14px !important;
  font-size: 12.5px;
}

.theme-4 .login-card #esqueci-minha-senha,
.theme-5 .login-card #esqueci-minha-senha {
  color: #60a5fa;
}

.login-footer {
  width: 100%;
  max-width: 380px;
  margin: 16px auto 0;
  text-align: center;
}

.login-footer>a {
  font-size: 12px;
  color: rgba(5, 51, 69, .55);
  text-decoration: none;
}

.login-footer>a:hover {
  text-decoration: underline;
}

.theme-4 .login-footer>a,
.theme-5 .login-footer>a {
  color: rgba(230, 240, 242, .5);
}

.iilex-social-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  margin-top: 10px;
}

.iilex-social-links a {
  color: rgba(5, 51, 69, .45);
  line-height: 0;
  transition: color .15s ease;
}

.iilex-social-links a:hover {
  color: rgba(5, 51, 69, .8);
}

.iilex-social-links svg {
  width: 18px;
  height: 18px;
}

.theme-4 .iilex-social-links a,
.theme-5 .iilex-social-links a {
  color: rgba(230, 240, 242, .4);
}

.theme-4 .iilex-social-links a:hover,
.theme-5 .iilex-social-links a:hover {
  color: rgba(230, 240, 242, .85);
}

/* alerta de sessão (só aparece quando a expiração é real — ver
   Usuarios::verificaLogin()): cantos + cores próprias, dark-aware. */
.login-shell #info-message {
  border-radius: 10px;
  margin-bottom: 18px;
  font-size: 13px;
  padding: 10px 14px;
}

.theme-4 .login-shell #info-message.alert-danger,
.theme-5 .login-shell #info-message.alert-danger {
  background: #2a1010 !important;
  border-color: #5a1e1e !important;
  color: #f87171 !important;
}