/* ============================================================
   SIAlFAC - LOGIN
   ============================================================ */


/* ============================================================
   FONDO
   ============================================================ */

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {

    min-height: 100vh !important;

    background-image: url("../images/fondo_sialfac.png") !important;

    background-size: cover !important;

    background-position: center center !important;

    background-repeat: no-repeat !important;

    background-attachment: fixed !important;

    background-color: #ffffff !important;
}


/* ============================================================
   CONTENEDOR LOGIN
   ============================================================ */

.login-content {

    width: 100% !important;

    min-height: 100vh !important;

    display: flex !important;

    align-items: center !important;

    justify-content: center !important;

    padding: 30px !important;

    background: transparent !important;

    background-color: transparent !important;
}


/* ============================================================
   CAJA
   ============================================================ */

.login-box {

    width: 390px !important;

    height: 400px !important;

    min-height: 400px !important;

    max-width: 95vw !important;

    position: relative !important;

    background: rgba(255, 255, 255, 0.96) !important;

    border-radius: 18px !important;

    box-shadow:
        0 18px 45px rgba(0, 45, 80, 0.20),
        0 5px 15px rgba(0, 0, 0, 0.08) !important;

    overflow: hidden !important;
}


/* ============================================================
   FRANJA SUPERIOR
   ============================================================ */

.login-box::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background: linear-gradient(
        90deg,
        #005b8f 0%,
        #087b9e 55%,
        #d71920 100%
    );

    z-index: 10;
}


/* ============================================================
   FORMULARIOS VALI ADMIN
   ============================================================ */

.login-box .login-form,
.login-box .forget-form {

    position: absolute !important;

    top: 0 !important;
    left: 0 !important;

    width: 100% !important;

    box-sizing: border-box !important;

    padding: 35px 34px 30px !important;
}


/* ============================================================
   TITULO
   ============================================================ */

.login-head {

    text-align: center !important;

    font-size: 23px !important;

    font-weight: 600 !important;

    color: #174d70 !important;

    margin-top: 5px !important;

    margin-bottom: 25px !important;

    padding-bottom: 16px !important;

    border-bottom: 1px solid #e5ebef !important;
}


.login-head i {

    color: #17698c !important;

    margin-right: 8px !important;
}


/* ============================================================
   LABELS
   ============================================================ */

.login-form .form-group label,
.forget-form .form-group label {

    color: #48606f !important;

    font-size: 12px !important;

    font-weight: 600 !important;

    letter-spacing: 0.4px !important;

    margin-bottom: 7px !important;
}


/* ============================================================
   INPUT
   ============================================================ */

.login-input-group {

    position: relative;

    width: 100%;
}


.login-input-icon {

    position: absolute;

    left: 14px;

    top: 50%;

    transform: translateY(-50%);

    color: #28708f;

    font-size: 16px;

    z-index: 3;

    transition: color 0.2s ease;
}


.login-input-group .form-control {

    height: 46px !important;

    padding-left: 43px !important;

    padding-right: 14px !important;

    border: 1px solid #d5dfe5 !important;

    border-radius: 9px !important;

    background-color: #fafdff !important;

    color: #304858 !important;

    font-size: 14px !important;

    box-shadow: none !important;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease !important;
}


.login-input-group .form-control::placeholder {

    color: #9aaab4 !important;
}


.login-input-group .form-control:focus {

    border-color: #19739b !important;

    background-color: #ffffff !important;

    box-shadow:
        0 0 0 3px rgba(25, 115, 155, 0.12) !important;

    outline: none !important;
}


.login-input-group:focus-within .login-input-icon {

    color: #d71920;
}


/* ============================================================
   OLVIDASTE CONTRASEÑA
   ============================================================ */

.login-form .utility {

    text-align: right !important;
}


.login-form .utility p {

    margin: 0 !important;
}


.login-form .utility a,
.forget-form a {

    color: #17698c !important;

    font-size: 13px !important;

    font-weight: 500 !important;

    text-decoration: none !important;
}


.login-form .utility a:hover,
.forget-form a:hover {

    color: #d71920 !important;
}


/* ============================================================
   ALERTA
   ============================================================ */

#alertLogin {

    margin-top: 8px !important;

    margin-bottom: 5px !important;

    font-size: 13px !important;
}


/* ============================================================
   BOTON
   ============================================================ */

.login-form .btn-container,
.forget-form .btn-container {

    margin-top: 22px !important;
}


.login-form .btn-primary,
.forget-form .btn-primary {

    width: 100% !important;

    height: 46px !important;

    border: none !important;

    border-radius: 9px !important;

    background: linear-gradient(
        90deg,
        #08668e 0%,
        #087b9e 70%,
        #c91e27 100%
    ) !important;

    color: #ffffff !important;

    font-size: 13px !important;

    font-weight: 600 !important;

    letter-spacing: 0.3px !important;

    box-shadow:
        0 5px 12px rgba(8, 102, 142, 0.20) !important;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease !important;
}


.login-form .btn-primary:hover,
.forget-form .btn-primary:hover {

    transform: translateY(-1px) !important;

    box-shadow:
        0 8px 18px rgba(8, 102, 142, 0.28) !important;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 576px) {

    .login-content {

        padding: 15px !important;
    }

    .login-box {

        width: 100% !important;

        max-width: 390px !important;

        height: 400px !important;

        min-height: 400px !important;
    }

    .login-box .login-form,
    .login-box .forget-form {

        padding: 32px 24px 25px !important;
    }
}


/* ============================================================
   AJUSTE FORMULARIO RECUPERAR CONTRASEÑA
   ============================================================ */

/* Altura normal para el login */
.login-box {
    height: 400px !important;
    min-height: 400px !important;
}

/* Altura cuando se muestra "Olvidaste tu contraseña" */
.login-box.flipped {
    height: 320px !important;
    min-height: 320px !important;
}