@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

body,
html {
  background-color: #296390; /* Cor primária como fundo */
  font-family: "Open Sans", sans-serif; /* Fonte de texto padrão */
}

.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #ffffff; /* Para melhor contraste */
  height: 80vh;
}

.logo-container {
  margin-bottom: 2rem;
}

.logo {
  max-width: 200px; /* Ajuste a largura máxima conforme necessário */
  height: auto; /* Mantém a proporção do logo */
}

/* Seção de botões */
.button-section {
  display: flex;
  gap: 1rem;
  margin-bottom: 2rem;
}

/* Botões */
.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  transition: background-color 0.2s;
  font-size: 1rem;
  /* Adaptei as cores para uma melhor visualização sobre o fundo azul */
  color: #296390; /* Cor do texto do botão */
  background-color: #ffffff; /* Cor de fundo do botão */
  text-decoration: none;
  position: relative; /* Se necessário para evitar o deslocamento do logo */
  z-index: 10; /* Se necessário para manter o botão acima do logo */
  font-family: "Open Sans", sans-serif; /* Fonte de texto padrão */
  font-weight: 500; /* Peso da fonte */
}

.btn:hover {
  background-color: #e0e0e0;
}

/* Formulário de login do admin */
.login-form {
  display: flex; /* Começa escondido e será mostrado com JavaScript */
  flex-direction: column;
  align-items: center;
}

/* Estilos gerais para o formulário de login */
.login-form {
  max-width: 400px;
  margin: 3rem auto;
  padding: 3rem;
  background: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  text-align: center;
}

/* Corrigindo a cor da label 'Password' para visibilidade */
.login-form label {
  color: #000000; /* Cor mais escura para contraste */
}

/* Estiliza o rótulo */
.login-form label {
  display: block;
  text-align: left;
  margin: 0.5rem 0;
}

/* Estiliza o input do formulário */
.login-form .login-input {
  width: calc(100% - 20px);
  padding: 10px;
  margin-bottom: 20px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box; /* Ajusta a largura do input para incluir o padding */
}

/* Estiliza o botão de envio */
.login-form .login-btn {
  width: 100%;
  padding: 10px;
  background: #296390; /* Cor primária */
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: bold;
  text-transform: uppercase; /* Opção de estilo para o texto do botão */
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease; /* Transição suave para hover */
}

/* Efeito hover no botão de envio */
.login-form .login-btn:hover {
  background-color: #1e5a86; /* Um tom mais escuro da cor primária */
}

/* Estiliza o foco no input para melhorar a acessibilidade */
.login-form .login-input:focus {
  border-color: #296390;
  outline: none; /* Remover a outline padrão */
  box-shadow: 0 0 5px #296390; /* Adicionar um sombreado para indicar foco */
}

/* Pequenas correções de espaçamento e fonte para os elementos */
.login-form .form-group {
  margin-bottom: 1.5rem;
}

.login-form .login-input,
.login-form .login-btn {
  font-size: 1rem;
}

/* Certifique-se de que o formulário de login esteja inicialmente escondido e só apareça após a ação de clique */
#admin-login-form {
  display: none;
}

/* Após o clique no botão, a classe 'active' pode ser adicionada via JavaScript para exibir o formulário */
#admin-login-form.active {
  display: flex;
}