* {
    box-sizing: border-box;
}

:root {
    --login-panel:
        rgba(255, 255, 255, 0.94);

    --login-texto:
        #1f2d3d;

    --login-muted:
        #6c7a89;

    --login-borde:
        rgba(255, 255, 255, 0.62);

    --login-principal:
        #2e5f86;

    --login-principal-hover:
        #244d6d;

    --login-error:
        #b42318;
}

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

body {
    position: relative;
    min-height: 100vh;
    overflow-x: hidden;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    background-image:
        var(--fondo-login);

    background-position:
        center center;

    background-size:
        cover;

    background-repeat:
        no-repeat;

    background-attachment:
        fixed;

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

button,
input {
    font: inherit;
}

/* ==========================================================
   CAPA SOBRE EL FONDO
========================================================== */

.login-overlay-bg {
    position: fixed;
    inset: 0;
    z-index: 0;

    background:
        linear-gradient(
            120deg,
            rgba(18, 35, 50, 0.25),
            rgba(18, 35, 50, 0.08)
        );

    pointer-events: none;
}

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

.login-wrapper {
    position: relative;
    z-index: 1;

    width: 100%;
    min-height: 100vh;

    padding:
        24px
        16px;

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

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

.login-card {
    width:
        min(410px, 100%);

    padding:
        25px
        28px
        22px;

    border:
        1px solid
        var(--login-borde);

    border-radius:
        20px;

    background:
        var(--login-panel);

    box-shadow:
        0 22px 55px
        rgba(15, 23, 42, 0.23);

    backdrop-filter:
        blur(12px);

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

    overflow:
        hidden;
}

/* ==========================================================
   LOGOTIPO
========================================================== */

.logo-box {
    width:
        100%;

    height:
        94px;

    margin:
        0 auto 6px;

    padding:
        0;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;
}

.logo-box img,
.login-logo {
    display:
        block !important;

    width:
        auto !important;

    height:
        auto !important;

    max-width:
        180px !important;

    max-height:
        90px !important;

    min-width:
        0 !important;

    min-height:
        0 !important;

    object-fit:
        contain !important;

    object-position:
        center !important;

    position:
        static !important;

    inset:
        auto !important;

    margin:
        0 auto !important;

    padding:
        0 !important;

    transform:
        none !important;
}

.logo-respaldo {
    width:
        70px;

    height:
        70px;

    border-radius:
        18px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    background:
        rgba(46, 95, 134, 0.10);

    color:
        var(--login-principal);

    font-size:
        32px;
}

/* ==========================================================
   TÍTULOS
========================================================== */

.login-title {
    margin:
        0;

    text-align:
        center;

    color:
        var(--login-texto);

    font-size:
        25px;

    line-height:
        1.2;
}

.login-subtitle {
    margin:
        6px 0 20px;

    text-align:
        center;

    color:
        var(--login-muted);

    font-size:
        13px;

    line-height:
        1.45;
}

/* ==========================================================
   MENSAJE
========================================================== */

.alert {
    width:
        100%;

    margin-bottom:
        15px;

    padding:
        10px 12px;

    border:
        1px solid
        rgba(180, 35, 24, 0.22);

    border-radius:
        10px;

    background:
        rgba(255, 242, 240, 0.96);

    color:
        var(--login-error);

    display:
        flex;

    align-items:
        flex-start;

    gap:
        8px;

    font-size:
        13px;

    line-height:
        1.4;
}

.alert i {
    flex-shrink:
        0;

    margin-top:
        1px;
}

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

.form-group {
    margin-bottom:
        14px;
}

.form-group label {
    display:
        block;

    margin-bottom:
        6px;

    color:
        var(--login-texto);

    font-size:
        12px;

    font-weight:
        750;
}

.input-wrap {
    position:
        relative;
}

.input-wrap .icono-campo {
    position:
        absolute;

    top:
        50%;

    left:
        13px;

    transform:
        translateY(-50%);

    color:
        var(--login-muted);

    font-size:
        16px;

    pointer-events:
        none;

    z-index:
        2;
}

.input-wrap input {
    width:
        100%;

    min-height:
        44px;

    padding:
        10px
        12px
        10px
        41px;

    border:
        1px solid
        #d7e0e8;

    border-radius:
        10px;

    outline:
        none;

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

    color:
        var(--login-texto);

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

.input-password input {
    padding-right:
        50px;
}

.input-wrap input::placeholder {
    color:
        #9aa7b3;
}

.input-wrap input:focus {
    border-color:
        var(--login-principal);

    box-shadow:
        0 0 0 3px
        rgba(46, 95, 134, 0.12);
}

/* ==========================================================
   MOSTRAR U OCULTAR CONTRASEÑA
========================================================== */

.btn-mostrar-password {
    position:
        absolute;

    top:
        50%;

    right:
        7px;

    z-index:
        3;

    width:
        34px;

    height:
        34px;

    padding:
        0;

    margin:
        0;

    transform:
        translateY(-50%);

    border:
        0;

    border-radius:
        8px;

    background:
        transparent;

    color:
        var(--login-muted);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    font-size:
        17px;

    cursor:
        pointer;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}

.btn-mostrar-password:hover {
    background:
        rgba(46, 95, 134, 0.09);

    color:
        var(--login-principal);
}

.btn-mostrar-password:focus-visible {
    outline:
        2px solid
        var(--login-principal);

    outline-offset:
        1px;
}

.btn-mostrar-password i {
    pointer-events:
        none;
}

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

.btn-entrar {
    width:
        100%;

    min-height:
        45px;

    margin-top:
        4px;

    padding:
        10px
        16px;

    border:
        0;

    border-radius:
        10px;

    background:
        var(--login-principal);

    color:
        #ffffff;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        8px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        background 0.15s ease,
        transform 0.15s ease;
}

.btn-entrar:hover {
    background:
        var(--login-principal-hover);
}

.btn-entrar:active {
    transform:
        translateY(1px);
}

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

.footer {
    margin-top:
        19px;

    padding-top:
        15px;

    border-top:
        1px solid
        rgba(108, 122, 137, 0.18);

    text-align:
        center;

    color:
        var(--login-muted);

    font-size:
        10px;

    line-height:
        1.55;
}

/* ==========================================================
   RESPONSIVO
========================================================== */

@media (max-width: 520px) {

    body {
        background-attachment:
            scroll;
    }

    .login-wrapper {
        padding:
            14px
            11px;
    }

    .login-card {
        padding:
            21px
            18px
            19px;

        border-radius:
            17px;
    }

    .logo-box {
        height:
            82px;
    }

    .logo-box img,
    .login-logo {
        max-width:
            155px !important;

        max-height:
            78px !important;
    }

    .login-title {
        font-size:
            23px;
    }
}