/* ==========================================================
   WIZERHUB — Auth (Login & Register) — split-screen premium
   ========================================================== */

.wz-auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.wz-auth__brand {
    background: linear-gradient(180deg, var(--wz-card-dark) 0%, var(--wz-purple) 100%);
    color: #fff;
    padding: 56px 56px;
    position: relative;
    overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
}
.wz-auth__brand::before,
.wz-auth__brand::after {
    content: '';
    position: absolute;
    width: 380px; height: 380px;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
}
.wz-auth__brand::before { top: -120px; right: -100px; background: var(--wz-gold); opacity: 0.18; }
.wz-auth__brand::after  { bottom: -140px; left: -120px; background: var(--wz-purple-bright); opacity: 0.45; }
.wz-auth__brand-head { position: relative; z-index: 2; display: flex; align-items: center; gap: 12px; }
.wz-auth__brand-head img { height: 30px; filter: brightness(2); }
.wz-auth__brand-head .name { font-weight: 600; letter-spacing: -0.01em; }

.wz-auth__brand-content { position: relative; z-index: 2; max-width: 460px; }
.wz-auth__brand-content h2 {
    font-size: clamp(28px, 3vw, 40px);
    line-height: 1.1; letter-spacing: -0.025em; margin: 0 0 16px;
    color: #fff; font-weight: 600;
}
.wz-auth__brand-content p { color: rgba(255,255,255,0.78); font-size: 16px; line-height: 1.6; }
.wz-auth__features { margin-top: 32px; display: grid; gap: 14px; }
.wz-auth__feature {
    display: flex; gap: 12px; align-items: flex-start;
    padding: 14px 16px;
    border-radius: var(--wz-radius-lg);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
}
.wz-auth__feature .ico-wrap {
    width: 36px; height: 36px;
    border-radius: var(--wz-radius-md);
    background: rgba(212,175,55,0.15);
    color: var(--wz-gold-bright);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.wz-auth__feature .copy h4 { color: #fff; margin: 0 0 4px; font-size: 14px; font-weight: 600; }
.wz-auth__feature .copy p { color: rgba(255,255,255,0.7); margin: 0; font-size: 13px; }

.wz-auth__brand-foot { position: relative; z-index: 2; color: rgba(255,255,255,0.5); font-size: 13px; }

.wz-auth__form-side {
    background: var(--wz-canvas);
    padding: 56px;
    display: flex; flex-direction: column;
    overflow-y: auto;
}
.wz-auth__topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 56px; }
.wz-auth__topbar a { color: var(--wz-text-muted); font-size: 14px; }
.wz-auth__topbar a:hover { color: var(--wz-purple); }

.wz-auth__inner { width: 100%; max-width: 440px; margin: 0 auto; flex: 1; display: flex; flex-direction: column; justify-content: center; padding: 24px 0; }
.wz-auth__title { font-size: 30px; font-weight: 600; letter-spacing: -0.02em; color: var(--wz-text-strong); margin: 0 0 8px; }
.wz-auth__sub { color: var(--wz-text-muted); margin: 0 0 32px; font-size: 15px; }

.wz-auth__form { display: grid; gap: 18px; }
.wz-auth__row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.wz-auth__steps {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 28px;
}
.wz-auth__step {
    display: flex; align-items: center; gap: 8px;
    color: var(--wz-text-muted);
}
.wz-auth__step .num {
    width: 28px; height: 28px;
    border-radius: var(--wz-radius-pill);
    background: var(--wz-surface-2);
    border: 1px solid var(--wz-border);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 13px; font-weight: 600;
    color: var(--wz-text-muted);
}
.wz-auth__step.is-active .num { background: var(--wz-purple); color: var(--wz-gold-bright); border-color: var(--wz-purple); }
.wz-auth__step.is-done .num { background: var(--wz-success); color: #fff; border-color: var(--wz-success); }
.wz-auth__step.is-active span { color: var(--wz-text-strong); font-weight: 500; }
.wz-auth__step-sep {
    flex: 1; height: 1px;
    background: var(--wz-border);
}
.wz-auth__step-sep.is-done { background: var(--wz-success); }

.wz-auth__step-pane { display: none; }
.wz-auth__step-pane.is-current { display: grid; gap: 18px; animation: wz-fade-in .3s ease; }
@keyframes wz-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

.wz-auth__nav-row { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }

.wz-auth__divider {
    text-align: center; position: relative;
    color: var(--wz-text-muted); font-size: 13px;
    margin: 8px 0;
}
.wz-auth__divider::before, .wz-auth__divider::after {
    content: ''; position: absolute; top: 50%; width: calc(50% - 32px);
    height: 1px; background: var(--wz-border);
}
.wz-auth__divider::before { left: 0; }
.wz-auth__divider::after { right: 0; }

.wz-auth__sponsor-card {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    border-radius: var(--wz-radius-md);
    background: var(--wz-gold-tint);
    border: 1px solid rgba(212,175,55,0.30);
    color: var(--wz-gold-deep);
    font-size: 14px;
}
.wz-auth__sponsor-card .avatar {
    width: 32px; height: 32px;
    border-radius: var(--wz-radius-pill);
    background: linear-gradient(180deg, var(--wz-gold-bright), var(--wz-gold));
    color: var(--wz-purple-deep);
    font-size: 13px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
}

@media (max-width: 980px) {
    .wz-auth { grid-template-columns: 1fr; }
    .wz-auth__brand { display: none; }
    .wz-auth__form-side { padding: 24px; }
    .wz-auth__topbar { margin-bottom: 24px; }
}

/* ==========================================================
   DARK MODE — auth (login / register / forgot)
   El panel izquierdo se mantiene (purple+gold) pero más rico,
   el derecho pasa a dark glassmorphism.
   ========================================================== */
body.is-dark .wz-auth__brand {
    background: linear-gradient(165deg, #1A0F3A 0%, #100A1F 60%, #2A1A4A 100%);
    border-right: 1px solid rgba(123,57,252,0.20);
}
body.is-dark .wz-auth__brand::before {
    background: var(--wz-gold);
    opacity: 0.22;
    filter: blur(90px);
}
body.is-dark .wz-auth__brand::after {
    background: var(--wz-purple-bright);
    opacity: 0.55;
    filter: blur(90px);
}
body.is-dark .wz-auth__brand-head img { filter: brightness(2) drop-shadow(0 4px 16px rgba(123,57,252,0.40)); }
body.is-dark .wz-auth__feature {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
}
body.is-dark .wz-auth__feature .ico-wrap {
    background: rgba(230,197,102,0.18);
    color: var(--wz-gold-bright);
}

body.is-dark .wz-auth__form-side {
    background: var(--wz-bg);
    position: relative;
    overflow-y: auto;
    overflow-x: hidden;
}
/* Suave glow púrpura en el panel right */
body.is-dark .wz-auth__form-side::before {
    content: '';
    position: absolute;
    top: -120px; right: -120px;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(123,57,252,0.20) 0%, transparent 65%);
    filter: blur(50px);
    pointer-events: none;
    z-index: 0;
}
body.is-dark .wz-auth__inner,
body.is-dark .wz-auth__topbar { position: relative; z-index: 1; }

body.is-dark .wz-auth__topbar a { color: var(--wz-ink-muted); }
body.is-dark .wz-auth__topbar a:hover { color: var(--wz-purple-bright); }
body.is-dark .wz-auth__title { color: var(--wz-ink-strong); }
body.is-dark .wz-auth__sub { color: var(--wz-ink-muted); }

/* Steps */
body.is-dark .wz-auth__step .num {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--wz-ink-muted);
}
body.is-dark .wz-auth__step.is-active .num {
    background: var(--wz-purple);
    color: var(--wz-gold-bright);
    border-color: var(--wz-purple-bright);
    box-shadow: 0 0 0 4px rgba(123,57,252,0.20);
}
body.is-dark .wz-auth__step.is-done .num {
    background: var(--wz-success);
    color: #fff;
    border-color: var(--wz-success);
}
body.is-dark .wz-auth__step.is-active span { color: var(--wz-ink-strong); }
body.is-dark .wz-auth__step span { color: var(--wz-ink-muted); }
body.is-dark .wz-auth__step-sep { background: rgba(255,255,255,0.10); }
body.is-dark .wz-auth__step-sep.is-done { background: var(--wz-success); }

/* Divider */
body.is-dark .wz-auth__divider { color: var(--wz-ink-muted); }
body.is-dark .wz-auth__divider::before,
body.is-dark .wz-auth__divider::after { background: rgba(255,255,255,0.10); }

/* Sponsor card */
body.is-dark .wz-auth__sponsor-card {
    background: rgba(230,197,102,0.10);
    border: 1px solid rgba(230,197,102,0.28);
    color: var(--wz-gold-bright);
}
body.is-dark .wz-auth__sponsor-card .avatar {
    background: linear-gradient(180deg, var(--wz-gold-bright), var(--wz-gold-deep));
    color: #1A1208;
}