/* Estilos globais para a página */
body {
    margin: 0;
    padding: 0;
    background-color: #F9F4E8;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    /* Centraliza o login-box verticalmente */
}

/* Estilos da caixa de login */
#login-box {
    margin-top: 0;
    /* Remove margem fixa para centralização */
    max-width: 400px;
    /* Reduz um pouco o tamanho para um look mais compacto */
    padding: 30px;
    /* Aumenta o espaçamento interno */
    background-color: #ffffffe0;
    border-top: 4px solid #9E1B1E;
    color: #111111;
    border-radius: 20px;
    /* Cantos arredondados */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    /* Sombra suave para profundidade */
    text-align: center;
    /* Centraliza o texto dentro do box */
}

/* Estilo para a imagem dentro da caixa de login */
#login-box img {
    margin-bottom: 20px;
    width: 150px;
    /* Ajusta o tamanho da logo para harmonia */
}

/* Estilos para os labels dos inputs */
#login-box .form-group label {
    color: black !important;
    font-weight: 500;
    /* Deixa o texto um pouco mais bold para modernidade */
    margin-bottom: 5px;
    /* Espaçamento abaixo do label */
    display: block;
    /* Garante que cada label ocupe uma linha */
}

/* Estilos para os inputs */
#login-box .form-control {
    border-radius: 8px;
    /* Arredonda os cantos dos inputs */
    border: 1px solid #ccc;
    /* Borda mais suave */
    padding: 10px;
    /* Mais espaço interno nos campos */
    transition: border-color 0.3s ease;
    /* Transição suave na borda */
}

#login-box .form-control:focus {
    /*border-color: #4484bc;*/
    border-color: #9E1B1E;
    /* Cor do botão ao focar */
    outline: none;
    /* Remove o outline padrão */
    box-shadow: 0 0 5px rgba(158, 27, 30, 0.2);
    /* Sombra leve ao focar */
}

/* Estilos para o checkbox */
#login-box .form-check-label {
    color: #333;
    /* Tom mais escuro para harmonia */
    font-weight: 400;
}

/* Estilos para o botão de conectar */
.btn-info {
    color: #fff;
    background-color: #9E1B1E;
    border-color: #C5A059;
    font-weight: bold;
    text-transform: uppercase;
    border-radius: 8px;
    /* Arredonda o botão */
    padding: 10px 20px;
    /* Ajusta o tamanho do botão */
    transition: background-color 0.3s ease;
    /* Transição suave */
    width: 100%;
    /* Botão ocupa toda a largura */
    margin-top: 20px;
    /* Espaçamento acima do botão */
}

.btn-info:hover {
    color: #fff;
    background-color: #9E1B1E;
    border-color: #9E1B1E;
}

/* Estilos para o texto de erro (bootstrap alert) */
.alert-danger {
    color: #ecf0c0;
    background-color: #ff6961;
    border-color: #ff6961;
    border-radius: 8px;
    /* Arredonda os alertas */
}