:root {
    --guinda: #741b47;
    --guinda-dark: #4d0f2e;
    --guinda-darker: #35091f;
    --guinda-light: #9c466c;

    --texto: #ffffff;
    --texto-suave: rgba(255, 255, 255, .78);

    --input-bg: rgba(255, 255, 255, .13);
    --input-border: rgba(255, 255, 255, .22);

    --panel-bg: rgba(56, 10, 34, .74);
}


/* =========================================================
   PÁGINA
   ========================================================= */

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

body {
    font-family:
        Arial,
        Helvetica,
        sans-serif;
}


/*
    background-size: cover hace exactamente lo que buscamos:

    - conserva la proporción;
    - llena toda la pantalla;
    - cuando cambia la proporción del monitor,
      recorta lo que sobra.

    Es decir, la imagen no se deforma.
*/

.login-page {
    width: 100%;
    min-height: 100vh;
    min-height: 100dvh;

    background-image: url('../img/bgLogin.png');
    background-repeat: no-repeat;

    /* CENTRADO TOTAL */
      background-position: center center;
    background-size: cover;

    overflow: hidden;
    position: relative;
}


/*
    Ligero sombreado general.

    Ayuda a que el login conserve contraste
    independientemente de la pantalla.
*/

.login-page::before {

    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(38, 4, 23, .08) 0%,
            rgba(38, 4, 23, .04) 40%,
            rgba(38, 4, 23, .12) 100%
        );

    pointer-events: none;
}


/* =========================================================
   POSICIONAMIENTO
   ========================================================= */

.login-container {
    display: flex;
    align-items: center;       /* centro vertical */
    justify-content: center;   /* centro horizontal */
    min-height: 100vh;
}


/* =========================================================
   TARJETA
   ========================================================= */

.login-card {

    width: 100%;
    max-width: 420px;

    padding:
        38px 40px 32px;

    color: var(--texto);

    background:
        linear-gradient(
            145deg,
            rgba(87, 18, 53, .78),
            rgba(49, 8, 30, .82)
        );

    border:
        1px solid rgba(255, 255, 255, .18);

    border-radius: 10px;

    box-shadow:
        0 24px 70px rgba(20, 0, 12, .35);

    /*
      El blur es opcional.

      Si quieres máxima compatibilidad,
      puede eliminarse.
    */

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}


/* =========================================================
   ENCABEZADO
   ========================================================= */

.login-header {
    text-align: center;
    margin-bottom: 30px;
}


.login-emblem {

    width: 52px;
    height: 52px;

    margin:
        0 auto 14px;

    display: flex;
    align-items: center;
    justify-content: center;

    border:
        1px solid rgba(255, 255, 255, .24);

    background:
        rgba(255, 255, 255, .08);

    border-radius: 50%;

    color: white;
}


.login-title {

    margin: 0;

    font-size: 1.75rem;

    font-weight: 600;

    letter-spacing:
        -.02em;
}


.login-subtitle {

    margin:
        6px 0 0;

    font-size:
        .9rem;

    color:
        var(--texto-suave);
}


/* =========================================================
   FORMULARIO
   ========================================================= */

.form-label {

    font-size:
        .84rem;

    font-weight:
        500;

    color:
        rgba(255, 255, 255, .9);

    margin-bottom:
        7px;
}


.login-input {

    position:
        relative;
}


.input-icon {

    position:
        absolute;

    left:
        15px;

    top:
        50%;

    transform:
        translateY(-50%);

    z-index:
        3;

    color:
        rgba(255, 255, 255, .72);

    display:
        flex;
}


.login-input .form-control {

    height:
        50px;

    padding:
        10px 48px 10px 45px;

    color:
        white;

    background:
        var(--input-bg);

    border:
        1px solid
        var(--input-border);

    border-radius:
        7px;

    box-shadow:
        none;

    transition:
        background .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


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

    color:
        rgba(255, 255, 255, .48);
}


.login-input .form-control:focus {

    color:
        white;

    background:
        rgba(255, 255, 255, .17);

    border-color:
        rgba(255, 255, 255, .55);

    box-shadow:
        0 0 0 .2rem
        rgba(255, 255, 255, .08);
}

/* =========================================================
   CHECKBOX
   ========================================================= */

.form-check-label {

    font-size:
        .82rem;

    color:
        rgba(255, 255, 255, .78);
}


.form-check-input {

    background-color:
        rgba(255, 255, 255, .12);

    border-color:
        rgba(255, 255, 255, .45);
}


.form-check-input:checked {

    background-color:
        var(--guinda-light);

    border-color:
        rgba(255, 255, 255, .6);
}


.form-check-input:focus {

    box-shadow:
        0 0 0 .2rem
        rgba(255, 255, 255, .08);

    border-color:
        white;
}


/* =========================================================
   RECUPERACIÓN
   ========================================================= */

.forgot-password {

    color:
        rgba(255, 255, 255, .82);

    font-size:
        .82rem;

    text-decoration:
        none;
}


.forgot-password:hover {

    color:
        white;

    text-decoration:
        underline;
}


/* =========================================================
   BOTÓN
   ========================================================= */

.btn-login {

    min-height:
        48px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    color:
        var(--guinda-dark);

    font-weight:
        600;

    background:
        rgba(255, 255, 255, .94);

    border:
        1px solid white;

    border-radius:
        7px;

    transition:
        all .2s ease;
}


.btn-login:hover {

    color:
        var(--guinda-darker);

    background:
        white;

    transform:
        translateY(-1px);

    box-shadow:
        0 8px 22px
        rgba(20, 0, 12, .18);
}


.btn-login:active {

    transform:
        translateY(0);
}


/* =========================================================
   PIE
   ========================================================= */

.login-footer {

    margin-top:
        24px;

    padding-top:
        20px;

    border-top:
        1px solid
        rgba(255, 255, 255, .12);

    text-align:
        center;

    color:
        rgba(255, 255, 255, .52);

    font-size:
        .72rem;

    letter-spacing:
        .02em;
}


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

@media (max-width: 991.98px) {

    /*
       En tablet centramos el login.
    */

    .login-container {
        transform:
            none;
    }

}


@media (max-width: 575.98px) {

    /*
       En celular la imagen seguirá usando cover.

       El fondo será recortado progresivamente,
       pero nunca deformado.
    */

    
    .login-container {

        padding:
            20px 16px;
    }


    .login-card {

        max-width:
            390px;

        padding:
            30px 24px 26px;

        background:
            rgba(56, 10, 34, .88);
    }


    .login-title {

        font-size:
            1.5rem;
    }

}