/* ==========================================================================
   Login — acceso al panel (split navy + workspace claro)
   ========================================================================== */
.auth { min-height: 100vh; min-height: 100dvh; display: grid; grid-template-columns: 1.05fr 1fr; background: var(--bg); }

/* Panel izquierdo: identidad de marca (navy) */
.auth__aside {
    position: relative; overflow: hidden;
    background: var(--nav-bg);
    background-image: linear-gradient(165deg, var(--nav-bg-2) 0%, var(--nav-bg) 55%, oklch(0.17 0.03 262) 100%);
    color: var(--nav-text); padding: 46px 52px; display: flex; flex-direction: column;
}
/* Motivo de señal: anillos concéntricos (eco del logo, no copia) */
.auth__aside::before {
    content: ''; position: absolute; top: -10%; right: -18%;
    width: 560px; height: 560px; border-radius: 50%;
    background:
        radial-gradient(circle, oklch(0.815 0.158 84 / 0.16) 0 12%, transparent 13%),
        repeating-radial-gradient(circle, transparent 0 44px, oklch(1 0 0 / 0.05) 44px 45px);
    -webkit-mask-image: radial-gradient(circle, #000 55%, transparent 72%);
    mask-image: radial-gradient(circle, #000 55%, transparent 72%);
    pointer-events: none;
}
.auth__brand { display: flex; align-items: center; gap: 12px; position: relative; z-index: 1; }
.auth__brand .mark {
    width: 42px; height: 42px; border-radius: var(--r-btn);
    background: var(--accent); color: var(--accent-ink);
    display: grid; place-items: center; box-shadow: var(--shadow-accent);
}
.auth__brand .mark .ico { width: 24px; height: 24px; }
.auth__brand .name { font-size: var(--fs-18); font-weight: 700; letter-spacing: -0.02em; color: var(--nav-text-strong); }
.auth__brand .name b { color: var(--accent); }
.auth__brand .sub { font-size: 11px; color: var(--nav-faint); letter-spacing: .04em; text-transform: uppercase; }

.auth__aside-body { margin-top: auto; position: relative; z-index: 1; }
.auth__aside-body h2 { color: var(--nav-text-strong); font-size: 2rem; line-height: 1.15; font-weight: 800; letter-spacing: -0.035em; max-width: 460px; }
.auth__aside-body p { margin-top: 16px; font-size: var(--fs-14); color: var(--nav-muted); max-width: 420px; line-height: 1.6; }

.auth__points { margin-top: 30px; display: flex; flex-direction: column; gap: 13px; }
.auth__point { display: flex; align-items: center; gap: 11px; font-size: var(--fs-13); color: var(--nav-text); }
.auth__point .tick { width: 24px; height: 24px; border-radius: var(--r-full); background: oklch(0.815 0.158 84 / 0.16); color: var(--accent); display: grid; place-items: center; flex: 0 0 auto; }
.auth__point .tick .ico { width: 14px; height: 14px; }

.auth__aside-foot { margin-top: 32px; position: relative; z-index: 1; font-size: 11px; color: var(--nav-faint); }
.auth__aside-foot b { color: var(--nav-muted); font-weight: 600; }

/* Panel derecho: formulario */
.auth__main { display: grid; place-items: center; padding: 40px 24px; overflow-y: auto; }
/* Viewport bajo (teclado móvil / pantallas cortas): permitir scroll sin recortar */
@media (max-height: 680px) { .auth__main { align-items: start; padding: 24px; } }
.auth__card { width: 100%; max-width: 384px; }
.auth__logo-sm { display: none; }
.auth__card h1 { font-size: var(--fs-22); font-weight: 700; letter-spacing: -0.025em; }
.auth__card .lead { color: var(--text-muted); font-size: var(--fs-13); margin-top: 6px; margin-bottom: 26px; }

.input-wrap { position: relative; }
.input-wrap .lead-ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--text-faint); width: 18px; height: 18px; pointer-events: none; }
.auth .input { height: 46px; padding-left: 42px; }
.auth .input.no-ico { padding-left: 14px; }

.pw-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: 0; background: transparent; color: var(--text-faint); cursor: pointer; border-radius: var(--r-sm); display: grid; place-items: center; }
.pw-toggle:hover { color: var(--text-secondary); background: var(--surface-2); }

.field-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.checkbox-app { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-13); color: var(--text-secondary); cursor: pointer; }
.checkbox-app input { width: 16px; height: 16px; accent-color: var(--accent); }

.auth__foot { text-align: center; margin-top: 26px; font-size: 11px; color: var(--text-faint); }
.auth__foot b { color: var(--text-muted); font-weight: 600; }

@media (max-width: 900px) {
    .auth { grid-template-columns: 1fr; }
    .auth__aside { display: none; }
    .auth__logo-sm { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
    .auth__logo-sm .mark { width: 38px; height: 38px; border-radius: var(--r-btn); background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }
    .auth__logo-sm .name { font-weight: 700; font-size: var(--fs-16); letter-spacing: -0.02em; }
    .auth__logo-sm .name b { color: var(--accent-deep); }
}