/* Abrime La Puerta · Acceso */

body.login-page {
    display: block;
    min-height: 100vh;
    background: #f4f7fb;
    color: #172235;
}

.login-shell {
    display: grid;
    grid-template-columns: minmax(360px, .92fr) minmax(440px, 1.08fr);
    min-height: 100vh;
}

.login-brand-panel {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
    padding: clamp(34px, 6vw, 74px);
    color: #fff;
    background: #101b2d;
}

.login-brand-panel::before,
.login-brand-panel::after {
    position: absolute;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.login-brand-panel::before { width: 480px; height: 480px; top: -250px; right: -220px; }
.login-brand-panel::after { width: 300px; height: 300px; bottom: -180px; left: -130px; }

.login-brand,
.login-brand-mobile {
    display: inline-flex;
    align-items: center;
    gap: 11px;
    width: fit-content;
    color: inherit;
    font-size: 20px;
    font-weight: 850;
    letter-spacing: -.025em;
}

.login-brand__mark {
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
}

.login-pitch { position: relative; z-index: 1; max-width: 490px; margin: auto 0; }
.login-kicker { margin: 0 0 16px; color: #72e6c6; font-size: 12px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.login-pitch h1 { max-width: 470px; color: #fff; font-size: clamp(38px, 4vw, 58px); line-height: 1.03; letter-spacing: -.055em; }
.login-pitch p { max-width: 430px; margin: 22px 0 0; color: #bfd0df; font-size: 17px; line-height: 1.6; }

.login-points { display: grid; gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; color: #e7f2fb; font-size: 14px; }
.login-points li { display: flex; align-items: center; gap: 10px; }
.login-points li::before { width: 8px; height: 8px; border-radius: 50%; background: #22d3a7; content: ""; }
.login-origin { position: relative; z-index: 1; margin: 30px 0 0; color: #9bb0c3; font-size: 13px; }

.login-access-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 44px 28px;
    background: #fff;
}

.login-card { display:flex; flex-direction:column; width:min(100%, 430px); }
.login-brand-mobile { order:0; }
.login-title { order:1; }
.login-subtitle { order:2; }
.login-error { order:3; }
.login-google { order:4; }
.login-oauth-separator { order:5; }
.login-form { order:6; }
.login-help { order:7; }
.login-divider { order:8; }
.login-new { order:9; }

.login-brand-mobile { display: none; margin-bottom: 40px; color: #172235; }
.login-title { margin: 0; color: #172235; font-size: 34px; line-height: 1.08; letter-spacing: -.045em; }
.login-subtitle { margin: 10px 0 30px; color: #718096; font-size: 15px; line-height: 1.55; }

.login-form { display: grid; gap: 18px; }
.login-field { display: grid; gap: 7px; }
.login-field .label { color: #34455d; font-size: 13px; font-weight: 800; }
.login-field .input { min-height: 50px; border-color: #d8e2ee; border-radius: 12px; background: #fff; box-shadow: none; }
.login-field .input:focus { border-color: #22b88c; box-shadow: 0 0 0 4px rgba(34,211,167,.13); }
.login-remember { display: flex; align-items: center; gap: 10px; color: #617188; font-size: 14px; cursor: pointer; }
.login-remember input { width: 17px; height: 17px; accent-color: #18b98d; }
.login-submit { min-height: 52px; border: 0; border-radius: 12px; background: #101b2d; color: #fff; font-size: 15px; font-weight: 800; box-shadow: 0 10px 20px rgba(16,27,45,.16); }
.login-submit:hover { background: #1d304a; transform: translateY(-1px); }
.login-oauth-separator { display: flex; align-items: center; gap: 12px; margin: 23px 0 16px; color: #8795a8; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.login-oauth-separator::before, .login-oauth-separator::after { height: 1px; flex: 1; background: #e4ebf2; content: ""; }
.login-google { display: flex; min-height: 51px; align-items: center; justify-content: center; gap: 11px; border: 1px solid #d8e2ee; border-radius: 12px; color: #26364d; font-size: 15px; font-weight: 800; transition: border-color .18s, background .18s, transform .18s; }
.login-google:hover { border-color: #b9c9dc; background: #f8fafc; transform: translateY(-1px); }
.login-google .login-google__icon { display: block !important; width: 20px !important; min-width: 20px !important; max-width: 20px !important; height: 20px !important; max-height: 20px !important; flex: 0 0 20px !important; }
.login-help { display: flex; justify-content: space-between; gap: 16px; margin-top: 23px; font-size: 14px; }
.login-help a { color: #1a8570; font-weight: 800; }
.login-help a:hover { color: #0b5d4d; }
.login-error { margin: 0 0 20px; padding: 13px 14px; border: 1px solid #fecaca; border-radius: 12px; background: #fff1f2; color: #a52a37; font-size: 14px; line-height: 1.45; }
.login-divider { height: 1px; margin: 29px 0 20px; background: #e8edf3; }
.login-new { margin: 0; color: #718096; font-size: 14px; text-align: center; }
.login-new a { color: #1a8570; font-weight: 800; }

@media (max-width: 860px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-brand-panel { display: none; }
    .login-access-panel { min-height: 100vh; padding: 42px 24px; }
    .login-brand-mobile { display: inline-flex; }
}

@media (max-width: 460px) {
    .login-access-panel { align-items: flex-start; padding: 30px 20px; }
    .login-brand-mobile { margin-bottom: 34px; }
    .login-title { font-size: 30px; }
    .login-help { flex-direction: column; gap: 11px; }
}