body{
    margin: 0;
    padding: 0;
    min-height: 100vh;

    /* MAIS ESCURO E ELEGANTE */
    background: linear-gradient(
        135deg,
        rgba(10, 15, 25, 0.95),
        rgba(20, 30, 45, 0.92),
        rgba(30, 40, 55, 0.90)
    );
}

@media only screen and (max-width: 700px) {
    body{
        background: linear-gradient(
            135deg,
            rgba(10, 15, 25, 0.95),
            rgba(20, 30, 45, 0.92),
            rgba(30, 40, 55, 0.90)
        );
    }

    .form-login{
        padding-bottom: 50px;
    }
}

.vertical-offset-100{
    padding-top:100px;
}

.recuperar{
    margin-top:25px;
    font-size:12px;
    text-align:center;
}


/* ===== CARD (MENOS TRANSPARENTE = MAIS ELEGANTE) ===== */
.form-login {
    background: rgba(20, 25, 35, 0.85) !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,0.08);

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);

    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
}


/* ===== INPUTS ===== */
.form-control {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.08);
    color: #fff;
}

.form-control::placeholder {
    color: #aaa;
}

.form-control:focus {
    background: rgba(255,255,255,0.12);
    color: #fff;
    box-shadow: none;
}


/* ===== BOTÃO MAIS ELEGANTE ===== */
.btn-primary {
    background: linear-gradient(135deg, #1e40af, #1d4ed8);
    border: none;
}

.btn-primary:hover {
    background: linear-gradient(135deg, #1d4ed8, #2563eb);
}


/* ===== LOGO ===== */
.panel-heading img {
    filter: brightness(1.05);
}

body{
    background: url(../img/fundo6.jpg);
    background-color: #757575;
    background-size: cover; 
   
}

 @media only screen and (max-width: 700px) {
        body{
        background: url(../);
        background-color: #757575;
        background-size: cover; 
       
    }

    .form-login{
        padding-bottom: 50px;
    }

 }

.vertical-offset-100{
    padding-top:100px;
}


.recuperar{
    margin-top:25px;
    font-size:12px;
    text-align:center;
}

/* ===== LISTA DE USUÁRIOS ===== */

#usuario {
    background-color: #1e293b; /* fundo escuro */
    color: #fff; /* texto branco */
    border: 1px solid #3b82f6;
    font-weight: 500;
}

#usuario option {
    background-color: #fff; /* lista branca */
    color: #000; /* texto preto */
    padding: 10px;
}

/* efeito quando abre */
#usuario:focus {
    border-color: #3b82f6;
    box-shadow: 0 0 5px #3b82f6;
}