/* Garantir que o box-sizing esteja corretamente configurado para todos os elementos */
*,
*::before,
*::after {
    box-sizing: border-box; /* Inclui padding e border no cálculo de largura e altura */
}

/* Estilos gerais da tela de login */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f4f6f9;
    color: #ffffff;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centraliza horizontalmente */
    align-items: center; /* Centraliza verticalmente */
    height: 100vh; /* Garante que o body ocupe 100% da altura da tela */
}

/* Container centralizado da tela de login */
.login-container {
    margin-top: 40px;
    margin-bottom: 40px;
    width: 90%; /* Ajusta a largura para telas pequenas */
    max-width: 500px; /* Limita a largura máxima da caixa */
    padding: 30px;
    background-color: #1a2b3c;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Alinha os elementos ao centro verticalmente */
    align-items: center; /* Alinha os elementos ao centro horizontalmente */
}

/* Caixa de login com logo e título */
.login-box {
    text-align: center;
    width: 100%;
    margin-top: 20px;
}

.logo img {
    width: 200px; /* Ajusta o tamanho da logo */
    margin-bottom: 20px;
}

h2 {
    color: #ffb100;
    font-size: 1.6em; /* Ajuste do tamanho do título */
    margin-bottom: 20px;
}

/* Estilo do formulário */
.login-form .mb-3 {
    margin-bottom: 20px;
}

/* Estilos dos rótulos (labels) */
.form-label {
    font-size: 1.2rem; /* Ajusta o tamanho das fontes das labels */
    color: #f8f8f8;
    text-align: left;
}

/* Estilos dos campos de entrada (Usuário e Senha) */
.form-control {
    width: 100%; /* Ajusta para ocupar toda a largura disponível */
    padding: 15px; /* Ajuste de padding para aumentar a altura do campo */
    border-radius: 5px;
    border: 1px solid #ffb100;
    background-color: #0f1b22;
    color: #ffffff;
    font-size: 1.2rem; /* Aumenta o tamanho da fonte dentro dos inputs */
    margin-bottom: 15px; /* Ajusta a margem entre os campos */
    padding-right: 20px; /* Ajusta o padding à direita */
}

    .form-control:focus {
        border-color: #ffb100;
        outline: none;
        box-shadow: 0 0 5px rgba(255, 177, 0, 0.6);
    }

/* Estilos do botão de login */
.btn {
    width: 100%;
    padding: 16px;
    background-color: #ffb100;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.4em;
    cursor: pointer;
}

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

/* Mensagens de erro ou feedback */
.login-msg {
    color: #ff0000;
    margin-top: 12px;
    font-size: 1rem;
}

/* Ajustes adicionais para telas pequenas */
@media (max-width: 600px) {
    /* Ajusta o padding da caixa de login */
    .login-container {
        padding: 6vw; /* Diminui o padding ainda mais */
        margin-bottom: 20vw; /* Aumenta a distância da caixa em relação ao footer */
    }

    /* Ajuste a logo para ter mais espaço superior */
    .logo img {
        width: 25vw; /* Diminui a largura da logo para 25% da tela */
        max-width: 150px; /* Limita o tamanho máximo da logo */
        margin-top: 4vw; /* Garante que a logo tenha um espaço mais razoável da parte superior */
    }

    /* Título com o aumento proporcional */
    h2 {
        font-size: 1.6em; /* Reduz o tamanho do título para que fique proporcional */
        margin-top: 0;
    }

    /* Ajuste do tamanho das labels */
    .form-label {
        font-size: 1.2rem; /* Reduz o tamanho das labels */
    }

    /* Ajustes para os campos de input */
    .form-control {
        font-size: 1.4rem; /* Diminui o tamanho da fonte dentro dos inputs */
        padding: 12px; /* Ajusta o padding para diminuir a altura do campo */
        padding-right: 20px; /* Ajusta o padding à direita */
    }

    /* Ajusta o botão para não ficar muito grande */
    .btn {
        font-size: 1.4rem; /* Diminui o tamanho do botão */
        padding: 14px; /* Ajusta o padding do botão */
    }

    /* Ajuste da mensagem de erro */
    .login-msg {
        font-size: 1rem; /* Ajusta o tamanho da mensagem de erro */
    }
}