/* ============================================================
   STYLE_INDEX.CSS - Estilos específicos da página de login
   ============================================================ */

/* --- PALETA E BACKGROUND (index) --- */
:root {
  --logo-start: #00758c; /* teal */
  --logo-end:   #009cbc; /* cyan-teal */
  --azul-escuro: #005f6b;
  --azul-claro:  #00a9c0;
  --texto-preto: #111111;
  --texto-cinza: #666666;
  --texto-cinza-70: rgba(0,0,0,0.7);
}

/* fundo do mapa aplicado ao body para cobrir 100% da viewport */
body {
  background: url('../imagens/BG_MAPA.png') no-repeat center center / cover fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* máscara azul full-width sobre o mapa (overlay) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none; /* não bloqueia interação */
  background: linear-gradient(135deg, rgba(0,117,140,0.26) 0%, rgba(0,156,188,0.26) 100%);
  z-index: 0;
}

/* aplicar layout central apenas no container de login e garantir que fique acima da máscara */
.login-tela {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  color: var(--texto-preto);
}

/* container branco do formulário */
.login-box {
  background: #ffffff;
  padding: 28px;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.18);
  max-width: 420px;
  width: 100%;
  color: var(--texto-preto);
  position: relative;
  z-index: 3;
}

/* garantir contraste do rodapé/infos com o fundo branco */
.login-footer,
.login-box .login-footer a,
.login-box div[style] {
  color: var(--texto-cinza-70);
}

/* bloco de usuários de teste: mais visível */
.login-box .test-usuarios,
.test-usuarios {
  color: rgba(0,0,0,0.85);
  font-size: 12px;
}

.test-usuarios strong {
  color: var(--texto-preto);
}

/* links e interativos em tons de azul */
.login-link,
.botao-primario {
  color: var(--logo-start);
}

.login-link:hover {
  color: var(--azul-claro);
}

/* foco nos inputs usando tom escuro do azul */
.input-padrao:focus {
  outline: 2px solid var(--azul-escuro);
  outline-offset: 2px;
}

/* garantir que labels e placeholders fiquem visíveis */
.login-box label {
  color: var(--texto-preto);
}

.login-box .input-padrao::placeholder {
  color: var(--texto-cinza-70);
  opacity: 1;
}

/* texto do checkbox "Manter conectado" */
.checkbox-container span[data-translate],
.checkbox-container span {
  color: var(--texto-cinza-70);
}

/* usuários de teste e informações secundárias */
.login-box div[style] {
  color: var(--texto-cinza-70);
}


/* === MELHORIAS UX === */
.input-grupo {
  margin-bottom: 5px;
}

.senha-container {
  position: relative;
}

.btn-mostrar-senha {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 5px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.btn-mostrar-senha:hover {
  background: rgba(0,0,0,0.1);
}

.input-erro {
  color: #e74c3c;
  font-size: 12px;
  margin-top: 5px;
  display: block;
  min-height: 16px;
}

.checkbox-container {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.input-padrao:focus {
  outline: 2px solid var(--azul-escuro);
  outline-offset: 2px;
}

.btn-loading {
  opacity: 0.7;
}

@media (max-width: 480px) {
  .login-sociais {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* === SELETOR DE IDIOMAS === */
.seletor-idioma-teste {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(255,255,255,0.9);
  padding: 8px;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 1000;
}

.seletor-idioma-teste label {
  font-size: 16px;
  margin-right: 5px;
}

.seletor-idioma-teste select {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 12px;
}