/* =============================================================================
   Login.aspx - login, popups de verificacion (2FA) y panel de notificaciones

   Convencion de nombres (prefijo lg-):
     lg-page / lg-card / lg-logo / lg-field ...  login
     lg-popup / lg-pop / lg-pop-*                popups 2FA y mensaje general
     lg-notif-*                                  panel de notificaciones
     lg-btn / lg-input / lg-x                    componentes compartidos
   ============================================================================= */

:root {
    --lg-font: "Segoe UI", "Noto Sans", Arial, Helvetica, sans-serif;
    --lg-ink: #1c2733; /* titulos y texto principal */
    --lg-text: #3c4854; /* mensajes */
    --lg-muted: #5f6b76; /* textos de ayuda */
    --lg-faint: #8a949e; /* textos tenues e iconos */
    --lg-line: #d5dbe1; /* bordes de campos y separadores */
    --lg-line-soft: #e8ecf0;
    --lg-primary: #19479b; /* botones */
    --lg-primary-dark: #123a82;
    --lg-primary-tint: #eef2fa;
    --lg-link: #00a0e3;
    --lg-accent: #3b8bc0;
    --lg-focus: #2b92d4;
    --lg-danger: #d93025;
    --lg-warning: #f0a30a;
}

/* ---- Base: oculta el slideshow y la barra superior del master solo en esta pagina ---- */
#supersized,
#supersized-loader,
#controls-wrapper,
#slidecaption,
.top-nav-wrap-login {
    display: none !important;
}

html,
body {
    background: #f5f5f5 !important;
    font-family: var(--lg-font);
}

div.RadComboBox_Default table .rcbInputCell input {
    margin-bottom: 0 !important;
}

/* =============================================================================
   Componentes compartidos
   ============================================================================= */

/* ---- Campos de texto ---- */
input[type].lg-input {
    box-sizing: border-box;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 12px;
    font-family: inherit;
    font-size: 14px;
    color: var(--lg-ink);
    background: #fff;
    border: 1px solid var(--lg-line);
    border-radius: 6px;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}

    input[type].lg-input:focus {
        outline: none;
        border-color: var(--lg-focus);
        box-shadow: 0 0 0 3px rgba(43, 146, 212, .15);
    }

.lg-field input[type].lg-input {
    padding-right: 36px; /* espacio para el icono de validacion */
}

input[type].lg-input-code { /* codigo de verificacion */
    height: 44px;
    margin-bottom: 14px;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 8px;
    text-align: center;
}

input[type].lg-input-sm { /* telefono (junto al combo de area) */
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 34px;
}

/* ---- Botones ----
   <asp:Button>/<button class="lg-btn">  y  <telerik:RadButton CssClass="lg-btn">
   (en RadButton la clase queda en el <span class="RadButton"> y el boton real es input.rbDecorated,
   por eso los !important: pisan el skin de Telerik). Las variantes solo cambian variables. */
.lg-btn {
    --b-bg: var(--lg-primary);
    --b-bg-hover: var(--lg-primary-dark);
    --b-fg: #fff;
    --b-border: transparent;
    --b-border-w: 0;
    --b-h: 46px;
}

.lg-btn-secondary {
    --b-bg: #fff;
    --b-bg-hover: var(--lg-primary-tint);
    --b-fg: var(--lg-primary);
    --b-border: var(--lg-primary);
    --b-border-w: 1px;
}

.lg-btn-link {
    --b-bg: transparent;
    --b-bg-hover: transparent;
    --b-fg: var(--lg-link);
    --b-h: 34px;
}

.lg-btn:not(.RadButton),
.RadButton.lg-btn input.rbDecorated {
    display: block;
    box-sizing: border-box !important;
    width: 100% !important;
    height: var(--b-h) !important;
    margin: 0 !important;
    padding: 0 24px !important;
    font-family: inherit !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: var(--b-h) !important;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    text-shadow: none !important;
    color: var(--b-fg) !important;
    background: var(--b-bg) !important;
    border: var(--b-border-w) solid var(--b-border) !important;
    border-radius: 4px !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: background .15s;
}

    .lg-btn:not(.RadButton):hover,
    .lg-btn:not(.RadButton):focus,
    .RadButton.lg-btn input.rbDecorated:hover,
    .RadButton.lg-btn input.rbDecorated:focus {
        background: var(--b-bg-hover) !important;
        outline: none !important;
    }

    .lg-btn:not(.RadButton):focus-visible,
    .RadButton.lg-btn input.rbDecorated:focus-visible {
        box-shadow: 0 0 0 3px rgba(25, 71, 155, .25) !important;
    }

.lg-btn-link:not(.RadButton),
.RadButton.lg-btn-link input.rbDecorated {
    font-weight: 600 !important;
    text-transform: none;
}

    .RadButton.lg-btn-link input.rbDecorated:hover {
        text-decoration: underline;
    }

.RadButton.lg-btn,
.RadButton.lg-x {
    display: block !important;
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

.RadButton.lg-btn {
    width: 100% !important;
    margin: 0 0 8px !important;
}

.RadButton.lg-btn-link {
    margin-top: 6px !important;
}

/* ---- Boton cerrar (x) ---- */
.lg-x:not(.RadButton),
.RadButton.lg-x input.rbDecorated {
    width: 30px !important;
    height: 30px !important;
    padding: 0 !important;
    font-size: 22px !important;
    line-height: 28px !important;
    color: var(--lg-faint) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
    cursor: pointer;
}

    .lg-x:not(.RadButton):hover,
    .RadButton.lg-x input.rbDecorated:hover {
        color: var(--lg-ink) !important;
        background: #eef1f4 !important;
    }

.RadButton.lg-x {
    width: 30px !important;
    margin: 0 !important;
}

/* ---- Envio en curso (evita doble clic; ver initNotifClamp/lgSetBusy en Login.aspx) ---- */
body.lg-busy {
    cursor: wait;
}

    body.lg-busy .lg-btn,
    body.lg-busy .lg-x {
        pointer-events: none;
        opacity: .6;
    }

/* =============================================================================
   Login
   ============================================================================= */
.lg-page {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
    padding: 56px 16px 32px;
}

.lg-card {
    box-sizing: border-box;
    width: 100%;
    max-width: 390px;
    padding: 36px 34px 30px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, .06);
}

    .lg-card .errorsValidationSummary {
        margin-bottom: 18px;
        padding: 12px 14px;
    }

        .lg-card .errorsValidationSummary ul li {
            font-size: 13px;
            margin-right: 0;
        }

/* ---- Logos y lema ---- */
.lg-logo-osi {
    display: block;
    width: auto;
    height: 22px;
    margin-bottom: 4px;
}

.lg-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 40px;
}

    .lg-logo a {
        background: none !important;
        padding-right: 0 !important;
        cursor: pointer;
    }

    .lg-logo img {
        display: block;
        width: 200px;
        max-width: 100%;
        height: auto;
    }

.lg-tagline {
    display: flex;
    align-items: center;
    align-self: stretch;
    gap: 14px;
    margin-top: 14px;
}

.lg-tagline-line {
    flex: 1 1 0;
    height: 1px;
    background: var(--lg-line);
}

.lg-tagline-text {
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 2px;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--lg-accent);
}

/* ---- Formulario ---- */
.lg-field {
    position: relative;
    margin-bottom: 16px;
}

.lg-label-row {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.lg-label {
    display: block;
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--lg-ink);
}

.lg-label-row .infoImage {
    width: 14px;
    height: 14px;
    margin-left: 6px;
    cursor: help;
}

.lg-warn { /* icono del validador, sobre el campo */
    position: absolute;
    right: 10px;
    bottom: 11px;
}

    .lg-warn img {
        display: block;
        width: 18px;
        height: 18px;
    }

.lg-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 2px 0 14px;
    font-size: 12px;
}

.lg-remember {
    display: flex;
    align-items: center;
    color: var(--lg-ink);
}

    .lg-remember input[type="checkbox"] {
        margin: 0 8px 0 4px;
        cursor: pointer;
    }

    .lg-remember label {
        margin: 0;
        font-size: 12px;
        font-weight: normal;
        cursor: pointer;
    }

.lg-options a {
    color: var(--lg-link);
    background: none !important;
    padding: 0 !important;
    text-decoration: none;
}

    .lg-options a:hover {
        text-decoration: underline;
    }

/* ---- Panel de notificaciones ---- */
.lg-notif {
    margin-top: 28px;
    padding-top: 18px;
    border-top: 1px solid var(--lg-line-soft);
}

.lg-notif-header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--lg-ink);
}

    .lg-notif-header svg {
        width: 16px;
        height: 16px;
        margin-right: 8px;
        fill: var(--lg-link);
    }

.lg-notif-list {
    max-height: 220px;
    margin: 0;
    padding: 0;
    overflow-y: auto;
    list-style: none;
}

.lg-notif-item { /* color por tipo: --n-bg / --n-bar */
    --n-bg: #f7fafc;
    --n-bar: var(--lg-link);
    margin: 0 0 8px;
    padding: 8px 10px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--lg-text);
    background: var(--n-bg);
    border-left: 3px solid var(--n-bar);
    border-radius: 4px;
}

.lg-notif-warning {
    --n-bg: #fff8ec;
    --n-bar: var(--lg-warning);
}

.lg-notif-critical {
    --n-bg: #fff1f0;
    --n-bar: var(--lg-danger);
}

.lg-notif-text { /* 3 lineas; "Read more" despliega el resto */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    overflow-wrap: anywhere;
    white-space: pre-line;
}

.lg-expanded .lg-notif-text {
    display: block;
    -webkit-line-clamp: unset;
    overflow: visible;
}

.lg-notif-more {
    display: block;
    margin: 4px 0 0;
    padding: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    color: var(--lg-link);
    background: none;
    border: 0;
    cursor: pointer;
}

    .lg-notif-more[hidden] {
        display: none;
    }

    .lg-notif-more:hover {
        text-decoration: underline;
    }

.lg-notif-empty {
    display: block;
    padding: 6px 0;
    font-size: 12px;
    text-align: center;
    color: var(--lg-faint);
}

/* =============================================================================
   Popups: verificacion 2FA (RNOTPNotification) y mensaje general (RntGeneral)
   ============================================================================= */
.TelerikModalOverlay {
    background: var(--lg-ink) !important;
    opacity: .55 !important;
    filter: alpha(opacity=55) !important;
}

.lg-popup.RadNotification {
    max-width: 94vw;
    background: #fff !important;
    border: 0 !important;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .28) !important;
    overflow: hidden;
}

    .lg-popup.RadNotification .rnTitleBar {
        display: none !important;
    }

    .lg-popup.RadNotification .rnContentWrapper {
        padding: 0 !important;
    }

.lg-pop {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 450px;
    padding: 30px 34px 26px;
    font-family: var(--lg-font);
    text-align: center;
    color: var(--lg-ink);
}

.lg-pop-sm { /* mensaje general: mas bajo */
    min-height: 270px;
}

.lg-pop-close {
    position: absolute;
    top: 10px;
    right: 12px;
}

.lg-pop-head {
    margin-bottom: 14px;
}

.lg-pop-logo {
    display: block;
    align-self: center;
    width: 150px;
    max-width: 60%;
    height: auto;
    margin: 0 auto 18px;
}

.lg-pop-title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--lg-ink);
}

.lg-pop-note { /* mensaje del servidor dentro de una caja (se oculta si esta vacio) */
    display: block;
    padding: 9px 12px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--lg-text);
    background: #f1f7fb;
    border-radius: 6px;
}

.lg-pop-text { /* mensaje general */
    display: block;
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--lg-text);
}

.lg-pop-hint {
    margin: 0 0 14px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--lg-muted);
}

.lg-pop-error {
    display: block;
    margin: 10px 0;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--lg-danger);
}

.lg-pop-note:empty,
.lg-pop-error:empty {
    display: none;
}

.lg-pop-form {
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

.lg-pop-phone-row {
    display: flex;
    align-items: center;
    margin-bottom: 12px;
}

    .lg-pop-phone-row .RadComboBox {
        flex: 0 0 110px;
        width: 110px !important;
        margin-right: 8px;
    }

/* =============================================================================
   Pantallas angostas
   ============================================================================= */
@media only screen and (max-width: 480px) {
    .lg-page {
        padding-top: 24px;
    }

    .lg-card {
        padding: 28px 22px 24px;
    }

    .lg-logo {
        margin-bottom: 28px;
    }

    .lg-pop {
        padding: 26px 20px 20px;
    }
}