/* Estilos exclusivos del login; conserva la cabecera y el azul del portal. */
body:has(.login-shell) {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    /* La segunda fila ocupa el espacio restante tras la altura real del header. */
    grid-template-rows: auto 1fr;
    background: #f4f7fa;
}

body:has(.login-shell) > .container {
    display: grid;
    width: 100%;
    max-width: none;
    padding: 0;
}

body:has(.login-shell) .portal-content {
    display: grid;
    min-width: 0;
    padding: 0;
}

.login-shell {
    display: grid;
    place-items: center;
    min-width: 0;
    padding: 12px 0;
}

.login-card {
    box-sizing: border-box;
    width: min(100%, 440px);
    /* Reserva los 304px del widget original incluso en pantallas de 320px. */
    padding: 24px clamp(7px, calc((100vw - 306px) / 2), 32px);
    background: #fff;
    border: 1px solid #dce5ed;
    border-radius: 20px;
    box-shadow: 0 12px 36px rgb(15 56 89 / 9%);
}

.login-heading { margin-bottom: 16px; text-align: center; }
.login-heading h1 {
    text-transform: none;
}
.login-heading > p:last-child { margin: 0; color: #4a5568; font-size: .875rem; line-height: 1.45; }
.login-card .form-label { color: #243b50; font-weight: 600; margin-bottom: 4px; }
/* Sobrescribe la utilidad mb-3 de Bootstrap solamente dentro del login. */
.login-card .mb-3 { margin-bottom: 12px !important; }
.login-card .form-control {
    width: 100%;
    min-height: 44px;
    padding: 8px 12px;
    border-color: #aabac8;
    border-radius: 10px;
    font-size: 1rem;
}
.login-card .form-control::placeholder { color: #4a5568; opacity: 1; }
.login-card .form-control:focus {
    border-color: var(--portal-blue);
    box-shadow: 0 0 0 3px rgb(15 56 89 / 14%);
}
.login-card .form-check { display: flex; align-items: center; gap: 8px; min-height: 44px; padding-left: 0; }
.login-card .form-check-input { margin: 0; flex-shrink: 0; width: 18px; height: 18px; border: 2px solid #718096; cursor: pointer; }
.login-card .form-check-input:checked { background-color: var(--portal-blue); border-color: var(--portal-blue); }
.login-card .form-check-label { padding-block: 10px; cursor: pointer; }
.login-card .g-recaptcha { display: flex; justify-content: center; }
.login-card .text-danger { font-size: .875rem; overflow-wrap: anywhere; }
.login-card .validation-summary-errors { margin-bottom: 16px; }
.login-card .validation-summary-errors ul { margin: 0; padding-left: 20px; }
.login-card .field-validation-error { display: block; margin-top: 6px; }
.login-card .input-validation-error { border-color: #b02a37; }
.login-password { position: relative; }
.login-card .login-password .form-control { padding-right: 58px; }
.login-password input::-ms-reveal { display: none; }
.login-password-toggle {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #4a5568;
    cursor: pointer;
}
.login-password-toggle:hover { background: #edf2f7; color: var(--portal-blue); }
.login-password-toggle:focus-visible { outline: 3px solid #0070c9; outline-offset: 1px; }
.login-password-slash { display: none; }
.login-password input[type="text"] + .login-password-toggle .login-password-slash { display: block; }
.login-submit {
    min-height: 44px;
    margin-top: 4px;
    border-radius: 10px;
    border-color: var(--portal-blue);
    background: var(--portal-blue);
    font-size: 1rem;
    font-weight: 600;
    transition: background-color .15s ease, border-color .15s ease;
}
.login-submit:hover, .login-submit:focus-visible {
    background: #174e78;
    border-color: #174e78;
}
.login-submit:active { background: #0a293f !important; border-color: #0a293f !important; }
/* Menos espacio decorativo para laptops con poca altura CSS por el escalado. */
@media (max-height: 700px) {
    .login-shell { padding-block: 8px; }
    .login-card { padding-block: 16px; }
    .login-heading { margin-bottom: 12px; }
    .login-card .mb-3 { margin-bottom: 8px !important; }
}
@media (prefers-reduced-motion: reduce) {
    .login-submit { transition: none; }
}