/* ===========================================
   LOGIN - SISTEMA RFID COBAEM
=========================================== */

:root {
    --wine: #7A1531;
    --gold: #B38E5D;
    --gray: #f5f6f8;
    --dark: #343a40;
}

/* Fondo */

body {
    background: #f3f5f7;
}

/* Sección */

.login-page {
    min-height: calc(100vh - 150px);
    display: flex;
    align-items: center;
    padding: 50px 0;
}

/* Texto */

.login-heading {
    color: var(--wine);
    font-size: 2.5rem;
    font-weight: 700;
}

.login-text {
    color: #666;
    font-size: 1.05rem;
    margin-top: 20px;
    margin-bottom: 30px;
}

/* Características */

.feature-box {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.feature-box div {
    background: #fff;
    border-left: 5px solid var(--wine);
    padding: 14px 18px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
    font-weight: 500;
}

.feature-box i {
    color: var(--wine);
    margin-right: 10px;
}

/* Tarjeta */

.login-card {

    background: #fff;

    border-radius: 18px;

    padding: 40px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, .15);

    max-width: 460px;

    margin: auto;
}

/* Logo */

.login-logo {

    width: 110px;

    display: block;

    margin: 0 auto 20px;
}

/* Título */

.login-card h3 {

    text-align: center;

    color: var(--wine);

    margin-bottom: 30px;

    font-weight: bold;
}

/* Labels */

.login-card label {

    font-weight: 600;

    color: #555;
}

/* Inputs */

.form-control {

    height: 48px;

    border-radius: 10px;
}

.input-group-text {

    background: #fff;

    color: var(--wine);

    border-radius: 10px 0 0 10px;
}

/* Botón principal */

.btn-gov {

    background: var(--wine);

    color: #fff;

    border: none;

    border-radius: 10px;

    height: 48px;

    font-weight: 600;

    transition: .3s;
}

.btn-gov:hover {

    background: #5d1026;

    color: #fff;
}

/* Botones secundarios */

.btn-outline-gov {

    border: 2px solid var(--wine);

    color: var(--wine);

    border-radius: 10px;

    font-weight: 600;
}

.btn-outline-gov:hover {

    background: var(--wine);

    color: #fff;
}

/* Alertas */

.alert {

    border-radius: 10px;
}

/* Responsive */

@media(max-width:992px) {

    .login-heading {

        text-align: center;

        font-size: 2rem;
    }

    .login-text {

        text-align: center;
    }

    .feature-box {

        margin-bottom: 35px;
    }

}

@media(max-width:576px) {

    .login-card {

        padding: 25px;
    }

    .login-heading {

        font-size: 1.8rem;
    }

    /* Utilidades de color institucional */

    .bg-gov {
        background: var(--wine);
    }

    .text-gov {
        color: var(--wine);
    }

}