html { min-height: 100%; }
body.login-page {
    --login-primary: #3f51b5;
    --login-dark: #283593;
    margin: 0;
    min-height: 100vh;
    min-height: 100svh;
    color: #263238;
    background: radial-gradient(ellipse at 15% 0%, #e8eaf6 0%, transparent 55%),
                radial-gradient(ellipse at 95% 100%, #dfe4fa 0%, transparent 50%), #f4f6fb;
    font-family: "Segoe UI", Arial, sans-serif;
}
.login-page .login-shell {
    box-sizing: border-box;
    width: min(100%, 460px);
    margin: 0 auto;
    padding: clamp(36px, 9vh, 100px) 24px 40px;
}
.login-page #divLogoPrincipal { margin: 0 0 28px; text-align: center; }
.login-logo-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 82px;
    height: 82px;
    margin-bottom: 18px;
    background: white;
    border-radius: 23px;
    box-shadow: 0 8px 24px rgba(26, 35, 126, .14);
}
.login-page #logo_index { display: block; width: 54px; height: 54px; object-fit: contain; }
.login-title { margin: 0; color: #1a237e; font-size: 34px; font-weight: 800; letter-spacing: -1px; line-height: 1.2; }
.login-subtitle { margin: 8px 0 0; color: #5c6bc0; font-size: 13px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.login-page form { width: 100%; margin: 0; }
.login-page #login-div {
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    background: white;
    border: 1px solid rgba(63, 81, 181, .09);
    border-radius: 20px;
    box-shadow: 0 16px 44px rgba(26, 35, 126, .1), 0 2px 6px rgba(38, 50, 56, .05);
}
.login-page #login-div .k-card-body { padding: 30px; }
.login-field { margin-bottom: 22px; }
.login-field > label { display: block; margin-bottom: 9px; color: #546e7a; font-size: 12px; font-weight: 700; letter-spacing: .7px; text-transform: uppercase; }
.login-field > input,
.login-field > .k-input,
.login-field > .k-textbox {
    box-sizing: border-box;
    width: 100%;
    min-height: 50px;
    color: #263238;
    background: #f4f6fb;
    border: 1px solid #d5dbe8;
    border-radius: 10px;
    font-family: inherit;
    font-size: 16px;
}
.login-field > input { padding: 12px 14px; }
.login-field .k-input-inner { padding: 12px 14px; font-size: 16px; }
.login-field > input:focus,
.login-field > .k-input:focus-within,
.login-field > .k-textbox:focus-within {
    outline: none;
    background: white;
    border-color: var(--login-primary);
    box-shadow: 0 0 0 3px rgba(63, 81, 181, .16);
}
.login-page #main-button {
    width: 100%;
    min-height: 50px;
    margin-top: 4px;
    padding: 13px 18px;
    color: white;
    background: linear-gradient(135deg, #283593, #3f51b5 65%, #5c6bc0);
    border: 0;
    border-radius: 11px;
    box-shadow: 0 6px 16px rgba(63, 81, 181, .25);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
    cursor: pointer;
}
.login-page #main-button:hover { background: var(--login-dark); }
.login-page #main-button:focus-visible { outline: 3px solid #5c6bc0; outline-offset: 4px; }
.login-page #main-button:disabled,
.login-page #main-button.k-disabled { opacity: .6; cursor: wait; }
.login-page .k-invalid-msg { margin-top: 8px; font-size: 13px; }
@media (max-width: 420px) {
    .login-page .login-shell { padding-inline: 18px; }
    .login-page #login-div .k-card-body { padding: 24px; }
}

/* Paleta del panel de administración. */
body.login-page-admin {
    --login-primary: #00796b;
    --login-dark: #004d40;
    background: radial-gradient(ellipse at 15% 0%, #b2dfdb 0%, transparent 55%),
                radial-gradient(ellipse at 95% 100%, #80cbc4 0%, transparent 50%), #e0f2f1;
}
.login-page-admin .login-logo-wrap { box-shadow: 0 8px 24px rgba(0, 77, 64, .16); }
.login-page-admin .login-title { color: #004d40; }
.login-page-admin .login-subtitle { color: #00796b; }
.login-page-admin #login-div {
    border-color: rgba(0, 121, 107, .12);
    box-shadow: 0 16px 44px rgba(0, 77, 64, .12), 0 2px 6px rgba(38, 50, 56, .05);
}
.login-page-admin .login-field > label { color: #45665f; }
.login-page-admin .login-field > input,
.login-page-admin .login-field > .k-input,
.login-page-admin .login-field > .k-textbox { background: #f1f8f6; border-color: #c4dad4; }
.login-page-admin .login-field > input:focus,
.login-page-admin .login-field > .k-input:focus-within,
.login-page-admin .login-field > .k-textbox:focus-within {
    background: white;
    border-color: var(--login-primary);
    box-shadow: 0 0 0 3px rgba(0, 121, 107, .16);
}
.login-page-admin #main-button {
    background: linear-gradient(90deg, #003d33 0%, #00695c 48%, #00897b 100%);
    box-shadow: 0 6px 16px rgba(0, 105, 92, .25);
}
.login-page-admin #main-button:hover { background: var(--login-dark); }
.login-page-admin #main-button:focus-visible { outline-color: #00897b; }