/* ============================================================
   PANORAMA - Tela de Login
   ============================================================ */

/* Imagem de fundo no tema claro */
body {
    background: url(/build/images/wallpaper8.08fa84a5.jpg) no-repeat center center;
    background-size: cover;
}

/* ============================================================
   WRAPPER PRINCIPAL - Transparente no claro, escuro no dark
   ============================================================ */
.auth-page-wrapper {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: transparent;
}

/* Véu suavizador sobre a imagem + luzes de canto */
.auth-page-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 70% 60% at 5% 5%, rgba(186, 230, 253, 0.45) 0%, transparent 55%),
        radial-gradient(ellipse 60% 60% at 95% 90%, rgba(221, 214, 254, 0.4) 0%, transparent 55%),
        linear-gradient(180deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.04) 100%);
    pointer-events: none;
    z-index: 0;
}

/* Conteúdo e footer acima dos orbs */
.auth-page-content,
footer.footer {
    position: relative;
    z-index: 1;
}

/* ============================================================
   ORBS FLUTUANTES - Base compartilhada
   ============================================================ */
.login-bg-orb--1,
.login-bg-orb--2,
.login-bg-orb--3,
.login-bg-orb--4 {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

/* Orb 1 - Azul celeste, superior esquerdo */
.login-bg-orb--1 {
    top: -18%;
    left: -10%;
    width: clamp(280px, 52vw, 780px);
    height: clamp(280px, 52vw, 780px);
    background: radial-gradient(circle at 42% 42%,
        rgba(56, 189, 248, 0.25) 0%,
        rgba(14, 165, 233, 0.1) 38%,
        transparent 65%);
    animation: orbFlutuar 20s ease-in-out infinite alternate;
}

/* Orb 2 - Lavanda, inferior direito */
.login-bg-orb--2 {
    bottom: -18%;
    right: -8%;
    width: clamp(240px, 48vw, 720px);
    height: clamp(240px, 48vw, 720px);
    background: radial-gradient(circle at 58% 55%,
        rgba(167, 139, 250, 0.25) 0%,
        rgba(139, 92, 246, 0.1) 38%,
        transparent 65%);
    animation: orbFlutuar 25s ease-in-out infinite alternate-reverse;
}

/* Orb 3 - Verde menta, lateral direita */
.login-bg-orb--3 {
    top: 28%;
    right: 3%;
    width: clamp(140px, 26vw, 420px);
    height: clamp(140px, 26vw, 420px);
    background: radial-gradient(circle,
        rgba(52, 211, 153, 0.2) 0%,
        rgba(16, 185, 129, 0.08) 45%,
        transparent 65%);
    animation: orbFlutuar 17s ease-in-out infinite alternate;
    animation-delay: -6s;
}

/* Orb 4 - Rosa suave, inferior esquerdo */
.login-bg-orb--4 {
    bottom: 12%;
    left: 4%;
    width: clamp(110px, 20vw, 360px);
    height: clamp(110px, 20vw, 360px);
    background: radial-gradient(circle,
        rgba(251, 113, 133, 0.18) 0%,
        rgba(244, 63, 94, 0.07) 45%,
        transparent 65%);
    animation: orbFlutuar 22s ease-in-out infinite alternate-reverse;
    animation-delay: -11s;
}

@keyframes orbFlutuar {
    0%   { transform: translate(0, 0) scale(1); }
    30%  { transform: translate(2vw, -3vh) scale(1.04); }
    65%  { transform: translate(-1.5vw, 2vh) scale(0.97); }
    100% { transform: translate(3vw, -1vh) scale(1.06); }
}

/* ============================================================
   TEMA ESCURO - Véu escuro sobre a mesma imagem
   ============================================================ */
[data-bs-theme="dark"] .auth-page-wrapper {
    background: rgba(6, 13, 31, 0.72);
}

[data-bs-theme="dark"] .auth-page-wrapper::before {
    background:
        radial-gradient(ellipse 75% 65% at 12% 10%, rgba(37, 99, 235, 0.3) 0%, transparent 55%),
        radial-gradient(ellipse 60% 60% at 88% 90%, rgba(109, 40, 217, 0.25) 0%, transparent 55%);
}

/* Grid pontilhado estrelado */
[data-bs-theme="dark"] .auth-page-wrapper::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}

/* Orbs no escuro: mais saturados e com leve blur */
[data-bs-theme="dark"] .login-bg-orb--1 {
    background: radial-gradient(circle at 42% 42%,
        rgba(59, 130, 246, 0.62) 0%,
        rgba(37, 99, 235, 0.28) 36%,
        transparent 62%);
    filter: blur(1.5px);
}

[data-bs-theme="dark"] .login-bg-orb--2 {
    background: radial-gradient(circle at 58% 55%,
        rgba(139, 92, 246, 0.6) 0%,
        rgba(109, 40, 217, 0.28) 36%,
        transparent 62%);
    filter: blur(1.5px);
}

[data-bs-theme="dark"] .login-bg-orb--3 {
    background: radial-gradient(circle,
        rgba(6, 182, 212, 0.52) 0%,
        rgba(8, 145, 178, 0.22) 44%,
        transparent 62%);
    filter: blur(1px);
}

[data-bs-theme="dark"] .login-bg-orb--4 {
    background: radial-gradient(circle,
        rgba(236, 72, 153, 0.48) 0%,
        rgba(219, 39, 119, 0.18) 44%,
        transparent 62%);
    filter: blur(1px);
}