/* ============================================================
   DIGREJA — AUTH SHELL (base das telas de acesso)
   Compartilhado por: login, verificar-2fa, reset-senha e
   forcar-troca-senha. Traz o cenario vivo, a moldura de luz do
   card e a marca. Cada tela carrega sua folha propria DEPOIS
   desta, so com o que e especifico dela.
   Cores derivam de --brand/--brand-2 (tokens.css) => white-label.
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --dg-orange: var(--color-secondary);
    --dg-orange-light: var(--color-secondary-soft);
    --dg-orange-dark: var(--color-secondary-strong);
    --dg-blue: var(--color-primary);
    --dg-blue-dark: var(--color-primary-strong);
    --dg-blue-soft: #29abe2;
    --dg-gray-100:#f8fafc; --dg-gray-200:#e2e8f0; --dg-gray-300:#cbd5e1;
    --dg-gray-400:#94a3b8; --dg-gray-500:#64748b; --dg-gray-600:#475569;
    --dg-gray-700:#334155; --dg-gray-800:#1e293b;

    /* Cenario: navy do Manual de Identidade tingido pela cor do tenant */
    --lg-deep:  color-mix(in srgb, var(--brand, #0085ca) 14%, #03182b);
    --lg-mid:   color-mix(in srgb, var(--brand, #0085ca) 26%, #062b49);
    --lg-ink:   color-mix(in srgb, var(--brand, #0085ca)  8%, #020f1c);
    --lg-radius: 22px;
    --lg-ease: cubic-bezier(.16, 1, .3, 1);
}

html, body { height: 100%; width: 100%; }
body {
    min-height: 100vh;
    background: var(--lg-ink);
    color: #fff;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* ---------------- cenario vivo ---------------- */
.login-bg {
    position: fixed; inset: 0; z-index: 0; overflow: hidden;
    background:
        radial-gradient(120% 90% at 12% 8%,  var(--lg-mid) 0%, transparent 55%),
        radial-gradient(100% 80% at 85% 95%, var(--lg-deep) 0%, transparent 60%),
        linear-gradient(160deg, #03182b 0%, var(--lg-mid) 48%, #021322 100%);
}
#netCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.lg-aurora { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; mix-blend-mode: screen; will-change: transform; pointer-events: none; }
.lg-a1 { width: 44vw; height: 44vw; left: -10vw; top: -14vw;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand,#0085ca) 55%, transparent), transparent 68%);
    animation: lgDrift1 26s ease-in-out infinite; }
.lg-a2 { width: 36vw; height: 36vw; right: -6vw; bottom: -12vw;
    background: radial-gradient(circle, color-mix(in srgb, var(--brand-2,#e87e04) 34%, transparent), transparent 68%);
    animation: lgDrift2 32s ease-in-out infinite; }
.lg-a3 { width: 28vw; height: 28vw; left: 38%; top: 52%;
    background: radial-gradient(circle, rgba(41,171,226,.28), transparent 70%);
    animation: lgDrift3 22s ease-in-out infinite; }
@keyframes lgDrift1 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(6vw,5vw) scale(1.12)} }
@keyframes lgDrift2 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-5vw,-4vw) scale(1.1)} }
@keyframes lgDrift3 { 0%,100%{transform:translate(0,0) scale(1)} 50%{transform:translate(-4vw,3vw) scale(.9)} }

.lg-floor {
    position: absolute; left: -25%; right: -25%; bottom: -6%; height: 52%;
    perspective: 520px; pointer-events: none; opacity: .62;
    -webkit-mask-image: linear-gradient(to top, #000 0%, transparent 82%);
            mask-image: linear-gradient(to top, #000 0%, transparent 82%);
}
.lg-floor i {
    position: absolute; inset: 0; transform: rotateX(74deg); transform-origin: bottom center;
    background:
        repeating-linear-gradient(90deg, rgba(41,171,226,.40) 0 1px, transparent 1px 100px),
        repeating-linear-gradient(0deg,  rgba(41,171,226,.30) 0 1px, transparent 1px 100px);
    animation: lgFloor 9s linear infinite;
}
@keyframes lgFloor { to { background-position: 0 100px, 0 100px; } }

.lg-scan {
    position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.045) 50%, transparent 58%);
    background-size: 280% 100%; animation: lgScan 11s ease-in-out infinite;
}
@keyframes lgScan { 0%{background-position:180% 0} 55%,100%{background-position:-80% 0} }

.lg-grain {
    position: absolute; inset: 0; opacity: .2; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------------- moldura de luz do card ----------------
   O gradiente gira pelo ANGULO (@property), nunca por transform num
   elemento maior que o shell: um ::before gigante torna o container
   rolavel e o navegador desloca o card ao focar um input. */
@property --lg-ang { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.auth-shell, .login-container {
    position: relative; width: 100%;
    padding: 1.5px; border-radius: calc(var(--lg-radius) + 2px);
    overflow: hidden; overflow: clip;
    box-shadow: 0 42px 90px -28px rgba(2,15,28,.78), 0 12px 30px -12px rgba(2,15,28,.55);
    opacity: 0; transform: translateY(26px) scale(.985);
    animation: lgCardIn 1s var(--lg-ease) .28s forwards;
}
@keyframes lgCardIn { to { opacity: 1; transform: none; } }
.auth-shell::before, .login-container::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit;
    background: conic-gradient(from var(--lg-ang),
        color-mix(in srgb, var(--brand,#0085ca) 95%, transparent) 0deg,
        rgba(41,171,226,.35) 60deg, rgba(255,255,255,.12) 120deg,
        color-mix(in srgb, var(--brand-2,#e87e04) 90%, transparent) 190deg,
        rgba(255,255,255,.12) 250deg, rgba(41,171,226,.40) 310deg,
        color-mix(in srgb, var(--brand,#0085ca) 95%, transparent) 360deg);
    animation: lgSpin 8s linear infinite;
}
@keyframes lgSpin { to { --lg-ang: 360deg; } }
/* O ::before da moldura e posicionado, entao seria pintado DEPOIS de um filho
   em fluxo normal e apareceria POR CIMA do card (card "transparente").
   Empilhar o conteudo acima dele resolve para qualquer tela. */
.auth-shell > *, .login-container > * { position: relative; z-index: 1; }

/* ---------------- marca (logo + wordmark) ---------------- */
.auth-brand { display: flex; align-items: center; justify-content: center; gap: 11px; }
.auth-brand .mark { width: 44px; height: 44px; flex: none; }
.auth-brand .mark svg { width: 100%; height: 100%; display: block; }
.auth-brand .cross-v, .auth-brand .cross-h { fill: var(--dg-blue); }
.auth-brand .dot-top   { fill: var(--dg-orange);   animation: lgOrb 3.4s ease-in-out infinite; }
.auth-brand .dot-left  { fill: var(--dg-blue-soft); animation: lgOrb 3.4s ease-in-out .35s infinite; }
.auth-brand .dot-right { fill: var(--dg-blue-soft); animation: lgOrb 3.4s ease-in-out .70s infinite; }
.auth-brand circle { transform-origin: center; transform-box: fill-box; }
@keyframes lgOrb { 0%,100%{transform:translateY(0);opacity:1} 50%{transform:translateY(-3px);opacity:.62} }
.auth-brand .wordmark { font-family: 'Montserrat', sans-serif; font-size: 1.72rem; font-weight: 800; letter-spacing: -.025em; line-height: 1; }
.auth-brand .text-orange { color: var(--dg-orange); }
.auth-brand .text-blue   { color: var(--dg-blue); }
.auth-tagline {
    margin-top: 5px; text-align: center; font-family: 'Montserrat', sans-serif;
    font-size: .68rem; font-weight: 600; letter-spacing: .16em;
    text-transform: uppercase; color: #9aa7b4;
}

/* ---------------- wrapper das telas de card unico ---------------- */
.auth-wrap {
    position: relative; z-index: 2; min-height: 100vh;
    display: grid; place-items: center; padding: 2rem 1.25rem;
}
.auth-wrap > .auth-shell { max-width: 460px; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001s !important; animation-iteration-count: 1 !important;
        transition-duration: .001s !important;
    }
    .auth-shell, .login-container { opacity: 1 !important; transform: none !important; }
    .lg-aurora, .lg-scan, .lg-floor i { animation: none !important; }
}