/* Fonte base */
html, body { /* Define altura total e remove margens padrão */
  height: 100%; /* Ocupa 100% da altura da janela */
  margin: 0; /* Remove margens padrão do navegador */
  font-family: Inter, Arial, sans-serif; /* Define a família tipográfica */
}

body { /* Plano de fundo com degradê */
  background: linear-gradient(135deg, #0ea5e9 0%, #7641d1 100%); /* Cria um degradê de duas cores */
  display: flex; /* Ativa layout flexível */
  align-items: center; /* Centraliza verticalmente o conteúdo */
  justify-content: center; /* Centraliza horizontalmente o conteúdo */
}

.login-container { /* Cartão compacto do logon */
  width: 210px; /* Define uma largura compacta */
  padding: 24px; /* Espaçamento interno do cartão */
  background: rgba(255, 255, 255, 0.781); /* Fundo claro semitransparente */
  border-radius: 12px; /* Cantos arredondados */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15); /* Sombra para profundidade */
  text-align: center; /* Centraliza textos internos */
}

.logo { /* Logo com animação */
  width: 96px; /* Largura da imagem do logo */
  height: auto; /* Mantém proporção da imagem */
  display: block; /* Exibe como bloco para centralização */
  margin: 0 auto 8px; /* Centraliza e adiciona espaçamento inferior */
  animation: flutuar 3s ease-in-out infinite; /* Aplica animação contínua */
}

.app-name { /* Título do aplicativo */
  margin: 0 0 16px; /* Remove margem superior e adiciona inferior */
  font-size: 20px; /* Tamanho da fonte do título */
  font-weight: 600; /* Peso da fonte mais forte */
  color: #111827; /* Cor do texto */
}

.form { /* Container do formulário */
  display: grid; /* Usa grid para organizar os campos */
  gap: 12px; /* Espaçamento entre os elementos */
}

.campo label { /* Rótulo dos campos */
  display: block; /* Ocupa a largura total da linha */
  margin-bottom: 6px; /* Espaço abaixo do rótulo */
  font-size: 12px; /* Tamanho reduzido do rótulo */
  color: #374151; /* Cor do rótulo */
  text-align: left; /* Alinha o texto à esquerda */
}

.campo input { /* Campos de entrada */
  width: 100%; /* Ocupa toda a largura disponível */
  padding: 10px 12px; /* Espaçamento interno do input */
  border: 1px solid #d1d5db; /* Borda sutil */
  border-radius: 8px; /* Cantos arredondados do input */
  outline: none; /* Remove contorno padrão ao focar */
  background: #ffffff; /* Fundo branco para contraste */
  color: #111827; /* Cor do texto digitado */
  box-sizing: border-box; /* Inclui bordas no cálculo da largura */
}

.campo input:focus { /* Estado focado do input */
  border-color: #7c3aed; /* Destaca a borda ao focar */
  box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.2); /* Realce com sombra */
}

.acoes { /* Container dos botões */
  display: grid; /* Organiza os botões em grid */
  grid-template-columns: 1fr 1fr; /* Divide em duas colunas iguais */
  gap: 10px; /* Espaço entre os botões */
  margin-top: 8px; /* Espaço acima dos botões */
}

.btn { /* Estilo base dos botões */
  cursor: pointer; /* Mostra cursor de mão */
  border: none; /* Remove borda padrão */
  padding: 10px 12px; /* Espaçamento interno do botão */
  border-radius: 8px; /* Cantos arredondados */
  font-weight: 600; /* Destaque tipográfico */
  font-size: 14px; /* Tamanho da fonte do botão */
}

.btn.entrar { /* Botão de entrar */
  background: #2563eb; /* Cor de fundo azul */
  color: #ffffff; /* Cor do texto clara */
}

.btn.entrar:hover { /* Hover do botão entrar */
  background: #1e40af; /* Escurece a cor ao passar o mouse */
}

.btn.limpar { /* Botão de limpar */
  background: #e5e7eb; /* Cor de fundo cinza */
  color: #111827; /* Cor do texto escura */
}

.btn.limpar:hover { /* Hover do botão limpar */
  background: #d1d5db; /* Escurece levemente ao passar o mouse */
}

.erro { /* Mensagem de erro de autenticação */
  background: #fee2e2; /* Fundo vermelho claro */
  color: #991b1b; /* Texto vermelho escuro */
  padding: 8px 10px; /* Espaçamento interno da mensagem */
  border-radius: 8px; /* Cantos arredondados da caixa */
  margin-bottom: 12px; /* Espaço abaixo da mensagem */
  font-size: 13px; /* Tamanho da fonte da mensagem */
  text-align: center; /* Centraliza o texto */
}

@keyframes flutuar { /* Animação de flutuação do logo */
  0% { transform: translateY(0); } /* Posição inicial */
  50% { transform: translateY(-6px); } /* Move levemente para cima */
  100% { transform: translateY(0); } /* Retorna à posição inicial */
}