/* Importando uma fonte do Google Fonts para um visual mais profissional */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

/* Reset básico para garantir consistência entre navegadores */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {
    /* Cor de fundo escura, semelhante à imagem */
    background-color: #121417; 
    color: #f0f0f0; /* Cor do texto padrão */
    /* Usando Flexbox para centralizar o container de login perfeitamente */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Garante que o corpo ocupe a tela inteira */
}

/* O container que segura o logo e o formulário */
.login-container {
    background-color: #1a1d21;
    padding: 40px 30px;
    border-radius: 8px;
    border: 1px solid #2d3138;
    width: 100%;
    max-width: 400px; /* Largura máxima da caixa de login */
    text-align: center;

    /* Animação de entrada (fade-in) */
    animation: fadeIn 0.8s ease-in-out;
}

/* Estilo do logo */
.logo {
    max-width: 120px; /* Tamanho do logo */
    margin-bottom: 30px; /* Espaço entre o logo e o formulário */
}

/* Agrupamento dos inputs */
.input-group {
    margin-bottom: 20px;
}

/* Estilo dos campos de texto (email e senha) */
input {
    width: 100%;
    padding: 15px;
    background-color: #121417;
    border: 1px solid #3a3f48;
    border-radius: 5px;
    color: #f0f0f0;
    font-size: 16px;
    /* Transição suave para o efeito de foco */
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Efeito visual quando o usuário clica no campo */
input:focus {
    outline: none; /* Remove a borda padrão do navegador */
    border-color: #6e8efb; /* Cor da borda ao focar */
    box-shadow: 0 0 10px rgba(110, 142, 251, 0.2);
}

/* Estilo do botão de Entrar */
button {
    width: 100%;
    padding: 15px;
    background-color: #3e4a3d; /* Verde escuro do exemplo */
    border: none;
    border-radius: 5px;
    color: #e0e0e0;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    /* Transição suave para o efeito de hover */
    transition: background-color 0.3s ease, transform 0.2s ease;
}

/* Efeito visual quando o mouse passa por cima do botão */
button:hover {
    background-color: #4c5a4b;
    transform: translateY(-2px); /* Eleva o botão levemente */
}


/* Definição da animação de fade-in */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

body{display:flex;justify-content:center;align-items:center;min-height:100vh}.login-container{background-color:#1a1d21;padding:40px 30px;border-radius:8px;border:1px solid #2d3138;width:100%;max-width:400px;text-align:center;animation:fadeIn .8s ease-in-out}.logo{max-width:120px;margin-bottom:30px}.input-group{margin-bottom:20px}input{width:100%;padding:15px;background-color:#121417;border:1px solid #3a3f48;border-radius:5px;color:#f0f0f0;font-size:16px;transition:border-color .3s ease,box-shadow .3s ease}input:focus{outline:none;border-color:#6e8efb;box-shadow:0 0 10px rgba(110,142,251,.2)}button{width:100%;padding:15px;background-color:#3e4a3d;border:none;border-radius:5px;color:#e0e0e0;font-size:16px;font-weight:500;cursor:pointer;transition:background-color .3s ease,transform .2s ease}button:hover{background-color:#4c5a4b;transform:translateY(-2px)}@keyframes fadeIn{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}

/* ================================================= */
/* NOVO: AJUSTES RESPONSIVOS PARA LOGIN     */
/* ================================================= */
@media (max-width: 480px) {
    .login-container {
        width: 90%;
        padding: 30px 20px;
    }
}