/* Definindo a paleta de cores como variáveis para consistência */
:root {
    --primary-color: #64bc60;
    --primary-hover-color: #78c975;
    --secondary-color: #444446;
    
    --background-color: #f5f5f5;
    --text-color: #444446;
    --text-light-color: #f5f5f5;
    --secondary-text-color: #777779;
    --border-color: #5a5a5c;
    
    --danger-color: #dc3545; /* Cor de perigo/erro do tema principal */

    --card-bg-color: #ffffff;
    --card-shadow: 0 4px 8px rgba(0,0,0,0.05);
}

/* Estilos gerais da página */
body {
    /* Define a imagem de fundo */
    background-image: url('../images/background.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    
    /* Cor de fundo de fallback, caso a imagem não carregue */
    background-color: var(--background-color); 
    
    height: 100vh;
    margin: 0;
    font-family: 'Lato', sans-serif; /* Fonte consistente com o tema principal */
    
    /* Usa Flexbox para centralizar o conteúdo */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* O contêiner que envolve o formulário */
.login-wrapper {
    display: flex;
    align-items: center;
    
    /* Fundo branco semi-transparente para destacar o conteúdo */
    background-color: rgba(255, 255, 255, 0.95);
    
    padding: 40px;
    border-radius: 10px;
    border: 1px solid var(--border-color); /* Borda consistente com o tema */
    box-shadow: var(--card-shadow); /* Sombra consistente com o tema */
}

/* A caixa que contém a imagem, título e os campos de login */
.login-container {
    width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Estilos para a imagem de logo dentro do formulário */
.login-image {
    max-width: 100%;
    height: auto;
    margin-bottom: 20px;
    border-radius: 10px;
}

.login-container h2 {
    text-align: center;
    margin-bottom: 25px;
    color: var(--text-color); /* Aplicado: Texto Principal */
}

/* Estilos para os rótulos (labels) */
.login-container label {
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
    color: var(--secondary-text-color); /* Aplicado: Texto Secundário */
    font-weight: bold;
}

/* Estilos para os campos de texto e senha */
.login-container input[type="text"],
.login-container input[type="password"] {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--border-color); /* Aplicado: Bordas/Divisórias */
    border-radius: 5px;
    box-sizing: border-box;
    color: var(--text-color); /* Cor do texto digitado */
    background-color: #fff;
}

/* Estilos para o botão de "Entrar" */
.login-container button {
    width: 100%;
    padding: 12px;
    margin-top: 25px;
    border: none;
    border-radius: 5px;
    background-color: var(--primary-color); /* Aplicado: Botão Primário */
    color: var(--text-light-color); /* Aplicado: Texto Claro */
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* Efeito ao passar o mouse sobre o botão */
.login-container button:hover {
    background-color: var(--primary-hover-color); /* Aplicado: Hover do Botão Primário */
}

/* Estilos para a mensagem de erro */
.error-message {
    color: var(--danger-color); /* Aplicado: Cor de erro do tema principal */
    text-align: center;
    margin-top: 15px;
    min-height: 20px;
}