/*
    Pantalla de acceso v2 — diseño de Enrique (prototipos/c5b29d87-loginprototipo.html y su
    variante XDental c685f416-loginxdentalprototipo.html).

    IMPORTANTE: todo va colgado de `body.login-v2` y las clases llevan el prefijo `lg-` para no
    pisar nada del CSS heredado (bootstrap 3, drIcloud.css, DriCloud2021.css, site.css). Esta hoja
    solo se carga en _Layout_Login.cshtml, así que el resto del programa no se entera de que existe.

    La variante XDental se activa poniendo la clase `lg-xdental` en `.lg-wrap` (Marca.EsXDental);
    LexNube usa la paleta de DriCloud con su propio logotipo.
*/

body.login-v2 {
    /* Paleta azul de DriCloud */
    --lg-nav1: #0D1B33;
    --lg-nav2: #1B3A6B;
    --lg-accent2: #2E63B8;
    --lg-brand: #3568B4;
    --lg-brand-d: #24509A;
    --lg-brand-soft: #EDF6FE;
    --lg-sky: #6FBCEC;
    --lg-bg: #F8FAFD;
    --lg-surface: #ffffff;
    --lg-ink: #14263E;
    --lg-muted: #4D6076;
    --lg-faint: #8496a8;
    --lg-line: #DBE4F0;
    --lg-line-strong: #c6d2e2;
    --lg-danger: #d9584e;
    --lg-halo: rgba(111, 188, 236, .22);

    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: var(--lg-bg);
    color: var(--lg-ink);
    font-family: "Figtree", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* Paleta de XDentalCloud (verde azulado + naranja) */
body.login-v2 .lg-wrap.lg-xdental {
    --lg-nav1: #002E40;
    --lg-nav2: #004860;
    --lg-accent2: #0A6A86;
    --lg-brand: #F09018;
    --lg-brand-d: #D97E10;
    --lg-brand-soft: #FFF3E6;
    --lg-sky: #7FC6DE;
    --lg-halo: rgba(255, 255, 255, .16);
}

/* El layout de acceso vive dentro de .container-fluid > .col-sm-12: se anula su relleno
   solo en esta pantalla para que el diseño ocupe el ancho completo. */
body.login-v2 > .container-fluid,
body.login-v2 > .container-fluid > .col-sm-12 {
    padding: 0;
    margin: 0;
    width: 100%;
    float: none;
}

body.login-v2 * {
    box-sizing: border-box;
}

.lg-wrap {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    min-height: 100vh;
}

/* ---------------------------------------------------------------- Panel de marca (izquierda) */
.lg-brandside {
    position: relative;
    background: linear-gradient(140deg, var(--lg-nav1) 0%, var(--lg-nav2) 58%, var(--lg-accent2) 100%);
    color: #fff;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 40px 50px;
}

    .lg-brandside::before {
        content: "";
        position: absolute;
        inset: 0;
        opacity: .13;
        background-image: radial-gradient(circle at 1px 1px, #ffffff 1.4px, transparent 0);
        background-size: 26px 26px;
    }

    .lg-brandside::after {
        content: "";
        position: absolute;
        right: -160px;
        top: -120px;
        width: 520px;
        height: 520px;
        border-radius: 50%;
        background: radial-gradient(circle, var(--lg-halo), transparent 62%);
    }

.lg-bs-top {
    position: relative;
    display: flex;
    align-items: center;
    gap: 13px;
}

.lg-bs-logo {
    height: 56px;
    width: auto;
    max-width: 260px;
    flex: none;
    filter: drop-shadow(0 4px 12px rgba(0,0,0,.28));
}

/* Los logotipos de XDentalCloud y LexNube son oscuros (están hechos para fondo blanco):
   sobre el degradado se les pone una pastilla blanca detrás para que se lean. */
.lg-bs-logo-claro {
    background: #fff;
    border-radius: 12px;
    padding: 8px 14px;
    height: 62px;
}

.lg-bs-mid {
    position: relative;
    max-width: 430px;
}

    .lg-bs-mid h1 {
        font-size: 33px;
        line-height: 1.14;
        font-weight: 800;
        letter-spacing: -.6px;
        color: #fff;
        margin: 0;
        text-align: left;
    }

    .lg-bs-mid p {
        margin-top: 13px;
        font-size: 14.5px;
        color: #d6e4f4;
        line-height: 1.6;
        max-width: 390px;
    }

.lg-bs-features {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-top: 22px;
}

.lg-bs-feat {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13.5px;
    color: #eaf2fb;
    font-weight: 500;
}

    .lg-bs-feat .lg-ic {
        width: 30px;
        height: 30px;
        border-radius: 9px;
        background: rgba(255,255,255,.13);
        display: grid;
        place-items: center;
        flex: none;
        border: 1px solid rgba(255,255,255,.2);
    }

    .lg-bs-feat svg {
        width: 16px;
        height: 16px;
        color: #fff;
    }

.lg-bs-foot {
    position: relative;
    font-size: 12px;
    color: #b9cee6;
    display: flex;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}

    .lg-bs-foot a {
        color: #d6e4f4;
        text-decoration: none;
        transition: .12s;
    }

        .lg-bs-foot a:hover,
        .lg-bs-foot a:focus {
            color: #fff;
            text-decoration: underline;
        }

/* ---------------------------------------------------------------- Formulario (derecha) */
.lg-formside {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.lg-card {
    width: 100%;
    max-width: 384px;
}

    .lg-card h2 {
        font-size: 23px;
        font-weight: 800;
        letter-spacing: -.4px;
        color: var(--lg-ink);
        margin: 0;
        text-align: left;
    }

.lg-sub {
    color: var(--lg-muted);
    font-size: 14px;
    margin: 4px 0 22px;
}

.lg-clinica {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

    /* El logotipo de la clínica ya NO se mete a la fuerza en un cuadrado (12-09-2026).
       El intento anterior (cuadrado de 58x58 con object-fit: contain) no servía: casi todos los
       logotipos de clínica son APAISADOS, y al meterlos en un cuadrado la imagen se encoge hasta
       que cabe de ancho, con lo que se queda diminuta y con dos franjas vacías arriba y abajo.
       Ahora manda el ALTO: la caja mide 56 px de alto y el ancho se estira con el dibujo, hasta un
       tope. Un logotipo apaisado se ve grande y legible; uno cuadrado sigue saliendo cuadrado. */
    .lg-clinica .lg-logo-clinica {
        height: 56px;
        width: auto;
        max-width: 170px;
        min-width: 56px;
        border-radius: 14px;
        background: var(--lg-brand-soft);
        border: 1px solid var(--lg-line);
        object-fit: contain;
        padding: 3px;
        flex: none;
    }

    .lg-clinica .lg-nm b {
        font-size: 15.5px;
        font-weight: 700;
        display: block;
        line-height: 1.2;
        color: var(--lg-ink);
    }

    .lg-clinica .lg-nm small {
        font-size: 12.5px;
        color: var(--lg-faint);
    }

.lg-field {
    margin-bottom: 15px;
}

    .lg-field label {
        display: block;
        font-size: 12.5px;
        font-weight: 600;
        color: var(--lg-ink);
        margin-bottom: 6px;
    }

.lg-inp {
    position: relative;
    display: flex;
    align-items: center;
}

    .lg-inp > svg {
        position: absolute;
        left: 13px;
        width: 17px;
        height: 17px;
        color: var(--lg-faint);
        pointer-events: none;
    }

    .lg-inp input[type="text"],
    .lg-inp input[type="password"] {
        width: 100%;
        height: auto;
        padding: 12px 13px 12px 40px;
        border: 1px solid var(--lg-line-strong);
        border-radius: 11px;
        background: var(--lg-surface);
        color: var(--lg-ink);
        font-size: 14.5px;
        line-height: 1.3;
        outline: none;
        box-shadow: none;
        transition: .14s;
    }

        .lg-inp input[type="text"]:focus,
        .lg-inp input[type="password"]:focus {
            border-color: var(--lg-brand);
            box-shadow: 0 0 0 4px var(--lg-brand-soft);
        }

        .lg-inp input[readonly] {
            background: #f5f5f5;
            cursor: not-allowed;
        }

    .lg-inp .lg-toggle {
        position: absolute;
        right: 6px;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        border: none;
        background: none;
        color: var(--lg-faint);
        cursor: pointer;
        display: grid;
        place-items: center;
        padding: 0;
    }

        .lg-inp .lg-toggle:hover {
            color: var(--lg-muted);
        }

        /* Cuando la contraseña se está mostrando, el ojo queda marcado. */
        .lg-inp .lg-toggle-activo {
            color: var(--lg-primary, #2f6bd8);
        }

        .lg-inp .lg-toggle svg {
            width: 17px;
            height: 17px;
        }

.lg-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 4px 0 22px;
    flex-wrap: wrap;
}

.lg-chk {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--lg-muted);
    cursor: pointer;
    user-select: none;
    font-weight: 400;
    margin: 0;
}

    .lg-chk input {
        width: 16px;
        height: 16px;
        margin: 0;
        accent-color: var(--lg-brand);
    }

.lg-linkbtn {
    font-size: 13px;
    color: var(--lg-brand);
    text-decoration: none;
    font-weight: 600;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    font-family: inherit;
}

    .lg-linkbtn:hover,
    .lg-linkbtn:focus {
        color: var(--lg-brand-d);
        text-decoration: underline;
    }

.lg-btn {
    width: 100%;
    padding: 13px;
    border: none;
    border-radius: 11px;
    background: var(--lg-brand);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: .14s;
    box-shadow: 0 6px 18px rgba(53, 104, 180, .28);
}

    .lg-btn:hover,
    .lg-btn:focus {
        background: var(--lg-brand-d);
        color: #fff;
    }

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

.lg-legal {
    margin-top: 20px;
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 11.5px;
    color: var(--lg-faint);
}

    .lg-legal .lg-rgpd {
        width: 26px;
        height: 26px;
        border-radius: 7px;
        background: var(--lg-brand-soft);
        display: grid;
        place-items: center;
        flex: none;
        color: var(--lg-brand-d);
    }

    .lg-legal svg {
        width: 14px;
        height: 14px;
    }

.lg-back {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    font-size: 13px;
    color: var(--lg-muted);
    text-decoration: none;
    font-weight: 600;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    font-family: inherit;
}

    .lg-back:hover,
    .lg-back:focus {
        color: var(--lg-brand);
        text-decoration: none;
    }

    .lg-back svg {
        width: 15px;
        height: 15px;
    }

/* Avisos: error de acceso, sesión caducada y clínica de pruebas */
.lg-aviso {
    margin-bottom: 18px;
    padding: 11px 13px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
}

    .lg-aviso p, .lg-aviso ul {
        margin: 0;
        padding: 0;
        list-style: none;
    }

.lg-aviso-error {
    background: #fdecea;
    border: 1px solid #f3c6c1;
    color: #8d2b22;
}

.lg-aviso-info {
    background: var(--lg-brand-soft);
    border: 1px solid var(--lg-line-strong);
    color: var(--lg-muted);
}

.lg-aviso-ok {
    background: #eaf6ef;
    border: 1px solid #bfe3cf;
    color: #1f6b3a;
}

.lg-oculto {
    display: none;
}

.lg-copy {
    text-align: center;
    font-size: 11.5px;
    color: var(--lg-faint);
    margin-top: 26px;
}

/* ---------------------------------------------------------------- Móvil y tableta */
@media (max-width: 860px) {
    .lg-wrap {
        grid-template-columns: 1fr;
    }

    .lg-brandside {
        display: none;
    }

    .lg-formside {
        padding: 24px 18px;
        align-items: flex-start;
        padding-top: 40px;
    }
}

/* ---------------------------------------------------------------- P566 (Enrique, 27-09-2026)
   «La parte de la izquierda se ve más baja que la de la derecha: igualarlas y subir todo un pelín.»
   El texto de marca iba empujado hacia abajo (space-between con el logotipo arriba). Ahora el logotipo
   queda fijo arriba y el texto se centra en vertical igual que el formulario; los dos suben un poco. */
body.login-v2 .lg-brandside {
    justify-content: center;
    padding-bottom: calc(40px + 6vh);
}

body.login-v2 .lg-bs-top {
    position: absolute;
    top: 40px;
    left: 50px;
    z-index: 1;
}

body.login-v2 .lg-bs-foot {
    position: absolute;
    bottom: 32px;
    left: 50px;
    z-index: 1;
}

body.login-v2 .lg-formside {
    padding-bottom: calc(32px + 6vh);
}

@media (max-width: 860px) {
    body.login-v2 .lg-formside {
        padding-bottom: 32px;
    }

    /* En el iPhone, un campo con letra de menos de 16 px hace zoom al tocarlo y descoloca la pantalla. */
    body.login-v2 .lg-inp input[type="text"],
    body.login-v2 .lg-inp input[type="password"],
    body.login-v2 input,
    body.login-v2 select,
    body.login-v2 textarea {
        font-size: 16px;
    }
}