:root {
    color-scheme: light;
}


/* ============================================================
   BASE
============================================================ */

body.ef-login {
    margin: 0;
    font-family:
        Inter,
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    background: #eef5fa;
    color: #243b53;
}


.ef-login *,
.ef-login *::before,
.ef-login *::after {
    box-sizing: border-box;
}


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

.ef-login #kt_app_root {
    min-height: 100vh;
    min-height: 100svh;

    display: flex;
    flex-direction: column;

    padding: clamp(18px, 4vw, 56px);
}


.ef-login .ef-shell {
    width: 100%;
    max-width: 1140px;

    margin: auto;

    display: grid;
    grid-template-columns: 1.05fr 1fr;

    border: 1px solid #dce8f1;
    border-radius: 30px;

    overflow: hidden;

    background: #ffffff;

    box-shadow:
        0 24px 70px #2a52741a;
}


/* ============================================================
   ZONA IZQUIERDA / MARCA
============================================================ */

.ef-login .ef-brand {
    position: relative;

    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    gap: 54px;

    padding: 48px;

    background:
        linear-gradient(
            145deg,
            #eaf5fd,
            #d5e8f6
        );
}


/* Decoración circular */

.ef-login .ef-brand::after {
    content: "";

    position: absolute;

    width: 390px;
    height: 390px;

    border:
        65px solid
        #79acd124;

    border-radius: 50%;

    right: -185px;
    bottom: -195px;

    z-index: 0;

    pointer-events: none;
}


/* ============================================================
   LOGO
============================================================ */

.ef-login .ef-logo {
    display: block;

    background: #ffffff;

    border:
        1px solid
        #dbe8f2;

    padding: 18px;

    border-radius: 16px;

    position: relative;

    z-index: 5;

    flex-shrink: 0;
}


.ef-login .ef-logo img {
    display: block;

    width: 100%;
    max-width: 100%;

    height: auto;

    position: relative;

    z-index: 6;

    object-fit: contain;
}


/* ============================================================
   TEXTO DE MARCA
============================================================ */

.ef-login .ef-brand-copy {
    position: relative;
    z-index: 1;
}


.ef-login .ef-eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 8px;

    color: #416885;

    font-weight: 700;

    font-size: 11px;

    letter-spacing: .13em;

    text-transform: uppercase;
}


.ef-login .ef-dot {
    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: #4382b3;
}


.ef-login .ef-brand h2 {
    font-size:
        clamp(
            30px,
            3.6vw,
            45px
        );

    line-height: 1.14;

    letter-spacing: -.045em;

    font-weight: 750;

    color: #224b6b;

    margin:
        20px
        0;
}


.ef-login .ef-brand p {
    color: #4c6b83;

    line-height: 1.75;

    font-size: 15px;

    max-width: 340px;

    margin: 0;
}


/* ============================================================
   TAGS
============================================================ */

.ef-login .ef-tags {
    position: relative;

    z-index: 1;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;
}


.ef-login .ef-tags span {
    padding:
        8px
        12px;

    background:
        #ffffff8c;

    border:
        1px solid
        #ffffffc7;

    border-radius: 9px;

    color: #375c78;

    font-size: 12px;
}


/* ============================================================
   ZONA DE ACCESO
============================================================ */

.ef-login .ef-access {
    padding:
        48px
        46px
        28px;

    display: flex;

    flex-direction: column;

    min-width: 0;
}


.ef-login .ef-access h1 {
    margin:
        10px
        0
        8px;

    font-size: 32px;

    line-height: 1.2;

    letter-spacing: -.035em;

    color: #243b53;

    font-weight: 750;
}


.ef-login .ef-intro {
    margin:
        0
        0
        30px;

    color: #64758b;

    line-height: 1.6;

    font-size: 14px;
}


/* ============================================================
   CAMPOS
============================================================ */

.ef-login .ef-field {
    margin-bottom: 20px;
}


.ef-login .ef-field label {
    display: block;

    font-weight: 650;

    font-size: 13px;

    margin-bottom: 9px;

    color: #36516a;
}


.ef-login .ef-input-wrap {
    position: relative;
}


.ef-login .ef-input-icon {
    position: absolute;

    top: 17px;
    left: 15px;

    color: #67849b;

    width: 20px;
    height: 20px;

    pointer-events: none;
}


.ef-login .ef-input-wrap input {
    width: 100%;

    min-height: 54px;

    padding:
        13px
        46px;

    background: #f7fafc;

    border:
        1px solid
        #d9e4ed;

    border-radius: 11px;

    color: #243b53;

    font: inherit;

    font-size: 16px;

    outline: none;

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


.ef-login .ef-input-wrap input:focus {
    border-color: #5797c6;

    box-shadow:
        0
        0
        0
        4px
        #79acd126;

    background: #ffffff;
}


.ef-login .ef-input-wrap input::placeholder {
    color: #77899a;
}


/* ============================================================
   BOTÓN VER CONTRASEÑA
============================================================ */

.ef-login .ef-eye {
    position: absolute;

    right: 6px;
    top: 5px;

    width: 44px;
    height: 44px;

    border: 0;

    background: transparent;

    color: #52718a;

    cursor: pointer;

    display: grid;

    place-items: center;

    border-radius: 7px;
}


.ef-login svg {
    flex-shrink: 0;
}


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

.ef-login .ef-submit {
    width: 100%;

    min-height: 54px;

    margin-top: 4px;

    border:
        1px solid
        #689dc5;

    border-radius: 11px;

    background: #79acd1;

    color: #153850;

    font: inherit;

    font-size: 15px;

    font-weight: 750;

    cursor: pointer;

    box-shadow:
        0
        6px
        15px
        #79acd12b;

    transition:
        background-color .15s,
        box-shadow .15s,
        transform .15s;
}


.ef-login .ef-submit:hover {
    background: #69a1cb;
}


.ef-login .ef-submit:disabled {
    opacity: .65;

    cursor: wait;
}


.ef-login .ef-submit .indicator-progress {
    display: none;
}


.ef-login
.ef-submit[data-kt-indicator="on"]
.indicator-label {
    display: none;
}


.ef-login
.ef-submit[data-kt-indicator="on"]
.indicator-progress {
    display: inline;
}


/* ============================================================
   RECUPERAR CONTRASEÑA
============================================================ */

.ef-login .ef-recover {
    display: flex;

    gap: 13px;

    align-items: center;

    margin-top: 22px;

    padding: 15px;

    border:
        1px solid
        #dce9f3;

    border-radius: 12px;

    background: #f3f8fc;

    text-decoration: none;

    color: #264f70;

    transition:
        background-color .15s,
        border-color .15s;
}


.ef-login .ef-recover:hover {
    background: #e7f2fb;

    border-color: #79acd1;
}


.ef-login .ef-recover-icon {
    display: grid;

    place-items: center;

    width: 44px;
    height: 44px;

    border-radius: 12px;

    background: #dcecf8;

    color: #306995;

    flex-shrink: 0;
}


.ef-login .ef-recover strong {
    display: block;

    font-size: 13px;

    line-height: 1.5;

    font-weight: 700;
}


.ef-login .ef-recover small {
    display: block;

    color: #627a8e;

    font-size: 12px;

    margin-top: 2px;
}


.ef-login .ef-recover-arrow {
    margin-left: auto;
}


/* ============================================================
   FOOTER
============================================================ */

.ef-login .ef-footer {
    margin-top: 30px;

    padding-top: 20px;

    border-top:
        1px solid
        #e9eff4;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-wrap: wrap;

    gap: 8px;

    color: #62788a;

    font-size: 11px;
}


.ef-login .ef-footer span:first-child {
    background: #f0f5f9;

    border-radius: 20px;

    padding:
        5px
        10px;

    font-weight: 650;

    color: #4b6880;
}


.ef-login .ef-footer strong {
    font-weight: 600;
}


/* ============================================================
   ACCESIBILIDAD
============================================================ */

.ef-login a:focus-visible,
.ef-login button:focus-visible {
    outline:
        3px solid
        #326d99;

    outline-offset: 3px;
}


/* ============================================================
   TABLET
============================================================ */

@media (max-width:850px) {

    .ef-login .ef-brand {
        padding: 30px;
    }


    .ef-login .ef-access {
        padding:
            36px
            28px
            25px;
    }
}


/* ============================================================
   MÓVIL
============================================================ */

@media (max-width:650px) {

    /*
     * Evitamos que Metronic o el navegador
     * limite verticalmente el login.
     */

    html {
        min-height: 100%;
        height: auto;
    }


    body.ef-login {
        min-height: 100%;

        height: auto !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;

        -webkit-overflow-scrolling: touch;
    }


    /*
     * En escritorio kt_app_root es FLEX y centra
     * verticalmente .ef-shell mediante margin:auto.
     *
     * En móvil quitamos ese centrado vertical.
     */

    .ef-login #kt_app_root {
        display: block !important;

        width: 100%;

        min-height: 100vh;
        min-height: 100svh;
        min-height: 100dvh;

        height: auto !important;

        padding-top:
            max(
                14px,
                env(safe-area-inset-top)
            );

        padding-right: 14px;

        padding-bottom:
            max(
                14px,
                env(safe-area-inset-bottom)
            );

        padding-left: 14px;

        overflow: visible !important;
    }


    /*
     * La tarjeta comienza siempre desde arriba.
     * Esto evita que parte del logo quede fuera
     * del viewport en terminales con poca altura.
     */

    .ef-login .ef-shell {
        display: grid;

        grid-template-columns: 1fr;

        width: 100%;

        max-width: 460px;

        margin:
            0
            auto !important;

        border-radius: 22px;

        position: relative;

        overflow: hidden;
    }


    /* ========================================================
       CABECERA MÓVIL
    ======================================================== */

    .ef-login .ef-brand {
        position: relative;

        width: 100%;

        min-height: 0;

        padding:
            18px
            22px;

        gap: 0;

        flex-shrink: 0;

        overflow: hidden;

        isolation: isolate;
    }


    /*
     * Elemento decorativo siempre por detrás.
     */

    .ef-login .ef-brand::after {
        z-index: 0;

        pointer-events: none;
    }


    /*
     * El logo siempre queda por encima
     * del fondo y de la decoración.
     */

    .ef-login .ef-logo {
        position: relative;

        z-index: 10;

        display: block;

        width: 100%;

        max-width: 310px;

        min-height: 0;

        margin:
            0
            auto;

        padding: 12px;

        border-radius: 11px;

        background: #ffffff;

        flex-shrink: 0;

        overflow: visible;
    }


    .ef-login .ef-logo img {
        position: relative;

        z-index: 11;

        display: block;

        width: 100%;

        max-width: 100%;

        height: auto;

        max-height: none;

        object-fit: contain;
    }


    /*
     * En móvil ocultamos el contenido promocional
     * para dejar el logo y el formulario visibles.
     */

    .ef-login .ef-brand-copy,
    .ef-login .ef-tags {
        display: none;
    }


    /* ========================================================
       FORMULARIO MÓVIL
    ======================================================== */

    .ef-login .ef-access {
        width: 100%;

        min-width: 0;

        padding:
            26px
            22px
            22px;
    }


    .ef-login .ef-access h1 {
        font-size: 29px;
    }


    .ef-login .ef-intro {
        margin-bottom: 24px;
    }


    /*
     * Evita zoom automático de Safari/iOS
     * al pulsar sobre los campos.
     */

    .ef-login .ef-input-wrap input {
        font-size: 16px;
    }
}


/* ============================================================
   MÓVILES CON MUY POCA ALTURA
============================================================ */

@media
(max-width:650px)
and
(max-height:650px) {

    .ef-login #kt_app_root {
        padding-top:
            max(
                8px,
                env(safe-area-inset-top)
            );

        padding-bottom:
            max(
                8px,
                env(safe-area-inset-bottom)
            );
    }


    .ef-login .ef-brand {
        padding:
            12px
            18px;
    }


    .ef-login .ef-logo {
        max-width: 260px;

        padding: 9px;
    }


    .ef-login .ef-access {
        padding:
            20px
            20px
            18px;
    }


    .ef-login .ef-access h1 {
        margin-top: 6px;

        font-size: 26px;
    }


    .ef-login .ef-intro {
        margin-bottom: 18px;
    }


    .ef-login .ef-field {
        margin-bottom: 15px;
    }


    .ef-login .ef-recover {
        margin-top: 16px;
    }


    .ef-login .ef-footer {
        margin-top: 20px;

        padding-top: 15px;
    }
}


/* ============================================================
   REDUCIR MOVIMIENTO
============================================================ */

@media (prefers-reduced-motion:reduce) {

    .ef-login * {
        transition: none !important;
    }
}


/* ============================================================
   TEMA OSCURO
============================================================ */

html[data-ef-login-theme="dark"] {
    color-scheme: dark;
}


/* Fondo */

html[data-ef-login-theme="dark"]
body.ef-login {
    background:
        radial-gradient(
            ellipse at 15% 20%,
            #193349 0%,
            #0c1723 55%,
            #09121c 100%
        );

    color: #e6eef6;
}


/* Tarjeta */

html[data-ef-login-theme="dark"]
.ef-login .ef-shell {
    background: #152332;

    border-color: #2a4054;

    box-shadow:
        0
        28px
        90px
        #0006;
}


/* Marca */

html[data-ef-login-theme="dark"]
.ef-login .ef-brand {
    background:
        linear-gradient(
            145deg,
            #203e57,
            #142b40
        );
}


html[data-ef-login-theme="dark"]
.ef-login .ef-brand::after {
    border-color: #79acd114;
}


/*
 * Dejamos expresamente el logo blanco
 * también en tema oscuro.
 */

html[data-ef-login-theme="dark"]
.ef-login .ef-logo {
    background: #ffffff;

    border-color: #dbe8f2;
}


html[data-ef-login-theme="dark"]
.ef-login .ef-eyebrow {
    color: #9bc4e2;
}


html[data-ef-login-theme="dark"]
.ef-login .ef-dot {
    background: #91c0e2;
}


html[data-ef-login-theme="dark"]
.ef-login .ef-brand h2 {
    color: #ecf5fc;
}


html[data-ef-login-theme="dark"]
.ef-login .ef-brand p {
    color: #b4cada;
}


html[data-ef-login-theme="dark"]
.ef-login .ef-tags span {
    background: #79acd112;

    border-color: #79acd130;

    color: #c9dfef;
}


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

html[data-ef-login-theme="dark"]
.ef-login .ef-access h1 {
    color: #f0f5fa;
}


html[data-ef-login-theme="dark"]
.ef-login .ef-intro {
    color: #a9bccd;
}


html[data-ef-login-theme="dark"]
.ef-login .ef-field label {
    color: #cbdbe8;
}


html[data-ef-login-theme="dark"]
.ef-login .ef-input-icon {
    color: #8cabc3;
}


html[data-ef-login-theme="dark"]
.ef-login .ef-input-wrap input {
    background: #101d2a;

    border-color: #344b60;

    color: #f0f5fa;
}


html[data-ef-login-theme="dark"]
.ef-login .ef-input-wrap input:focus {
    background: #122232;

    border-color: #79acd1;

    box-shadow:
        0
        0
        0
        4px
        #79acd11f;
}


html[data-ef-login-theme="dark"]
.ef-login .ef-input-wrap input::placeholder {
    color: #91a7bb;
}


html[data-ef-login-theme="dark"]
.ef-login .ef-input-wrap input:-webkit-autofill {
    -webkit-text-fill-color: #f0f5fa;

    box-shadow:
        0
        0
        0
        1000px
        #101d2a
        inset;

    caret-color: #f0f5fa;
}


html[data-ef-login-theme="dark"]
.ef-login .ef-eye {
    color: #9abbd5;
}


/* ============================================================
   BOTÓN LOGIN OSCURO
============================================================ */

html[data-ef-login-theme="dark"]
.ef-login .ef-submit {
    background: #79acd1;

    color: #102e44;

    border-color: #8dbbdb;

    box-shadow:
        0
        6px
        20px
        #0002;
}


html[data-ef-login-theme="dark"]
.ef-login .ef-submit:hover {
    background: #96c1df;
}


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

html[data-ef-login-theme="dark"]
.ef-login .ef-recover {
    background: #1b3043;

    border-color: #344f66;

    color: #deedf8;
}


html[data-ef-login-theme="dark"]
.ef-login .ef-recover:hover {
    background: #223c53;

    border-color: #79acd1;
}


html[data-ef-login-theme="dark"]
.ef-login .ef-recover-icon {
    background: #2a4963;

    color: #a7d1ee;
}


html[data-ef-login-theme="dark"]
.ef-login .ef-recover small {
    color: #acc2d3;
}


/* ============================================================
   FOOTER OSCURO
============================================================ */

html[data-ef-login-theme="dark"]
.ef-login .ef-footer {
    border-top-color: #2b4053;

    color: #a4bacb;
}


html[data-ef-login-theme="dark"]
.ef-login .ef-footer span:first-child {
    background: #20374a;

    color: #b9d3e6;
}


html[data-ef-login-theme="dark"]
.ef-login a:focus-visible,

html[data-ef-login-theme="dark"]
.ef-login button:focus-visible {
    outline-color: #a7d1ee;
}


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

.ef-login .ef-reset-icon {
    width: 60px;
    height: 60px;

    display: grid;

    place-items: center;

    border-radius: 18px;

    background: #e4f0fa;

    color: #346f9b;

    margin:
        0
        0
        22px;
}


.ef-login .ef-access h1 {
    font-size: 30px;
}


.ef-login .ef-back {
    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    min-height: 48px;

    margin-top: 14px;

    border:
        1px solid
        #d9e4ed;

    border-radius: 11px;

    color: #365b78;

    text-decoration: none;

    font-size: 14px;

    font-weight: 650;
}


.ef-login .ef-back:hover {
    background: #edf5fb;

    border-color: #79acd1;
}


.ef-login .ef-reset-note {
    margin:
        24px
        0
        0;

    padding: 15px;

    border-radius: 11px;

    background: #f3f8fc;

    color: #627a8e;

    line-height: 1.65;

    font-size: 12px;
}


/* ============================================================
   RECUPERACIÓN PASSWORD OSCURO
============================================================ */

html[data-ef-login-theme="dark"]
.ef-login .ef-reset-icon {
    background: #284962;

    color: #a7d1ee;
}


html[data-ef-login-theme="dark"]
.ef-login .ef-back {
    border-color: #344f66;

    color: #c6dfef;
}


html[data-ef-login-theme="dark"]
.ef-login .ef-back:hover {
    background: #223c53;

    border-color: #79acd1;
}


html[data-ef-login-theme="dark"]
.ef-login .ef-reset-note {
    background: #1b3043;

    color: #acc2d3;
}


/* ============================================================
   RECUPERACIÓN EN MÓVIL
============================================================ */

@media (max-width:650px) {

    .ef-login .ef-access h1 {
        font-size: 27px;
    }


    .ef-login .ef-reset-icon {
        width: 50px;
        height: 50px;

        margin-bottom: 18px;
    }
}