/* ═══════════════════════════════════════════════════════════════
   LOGIN — alinhado ao hub: dark scene, wordmark "Dsmarketing BI"
   centralizado, card escuro elevado, ambient gradients sutis.
   Tokens herdados de custom.css (paleta, font-display, elevation).
   ═══════════════════════════════════════════════════════════════ */
.login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 56px 24px;
    background: var(--c-bg);
    font-family: var(--font-body);
    color: var(--c-text);
    position: relative;
    overflow: hidden;
}

/* Ambient gradients — atmosfera dimensional sem ruido */
.login-ambient {
    position: absolute;
    width: 720px;
    height: 720px;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(80px);
    opacity: 0.35;
    z-index: 0;
}
.login-ambient--top {
    top: -260px;
    left: -200px;
    background: radial-gradient(circle, var(--c-primary-light) 0%,
                                transparent 60%);
}
.login-ambient--bottom {
    bottom: -300px;
    right: -240px;
    background: radial-gradient(circle, var(--c-primary) 0%,
                                transparent 65%);
    opacity: 0.28;
}

/* Stage — coluna centralizada (wordmark + card) */
.login-stage {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 100%;
    max-width: 420px;
}

/* Header — wordmark centralizado herda .hub-title/.hub-subtitle */
.login-header {
    text-align: center;
    animation: hub-card-in 0.55s ease both;
}
.login-title { font-size: clamp(2rem, 3vw + 0.8rem, 2.6rem); }
.login-subtitle { font-size: 0.85rem; }

/* Card de acao — superficie escura com elevation steel-blue */
.login-card {
    width: 100%;
    background: var(--c-card);
    border: 1px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: 32px 28px 24px;
    box-shadow: var(--elev-2);
    text-align: center;
    animation: hub-card-in 0.55s ease both;
    animation-delay: 0.08s;
}

/* Botao Google — superficie escura com lift steel-blue no hover */
.login-google-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding: 14px 24px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: var(--r-md);
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--c-text);
    cursor: pointer;
    text-decoration: none;
    font-family: var(--font-body);
    transition: border-color var(--motion-base),
                background var(--motion-base),
                box-shadow var(--motion-base),
                transform var(--motion-base);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.login-google-btn:hover {
    border-color: var(--c-primary-light);
    background: var(--c-card);
    box-shadow: 0 4px 14px rgba(90, 138, 153, 0.18),
                0 0 0 1px rgba(90, 138, 153, 0.18);
    transform: translateY(-1px);
}
.login-google-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}
.login-google-btn img {
    background: white;
    border-radius: 50%;
    padding: 2px;
}

/* Linha decorativa abaixo do botao (mesmo gradient do app) */
.login-rule {
    height: 1px;
    width: 100%;
    margin: 22px 0 14px;
    background: linear-gradient(90deg,
                transparent 0%,
                var(--c-border) 30%,
                var(--c-border) 70%,
                transparent 100%);
}

/* Erro — chip discreto coerente com tema dark */
.login-erro {
    background: rgba(232, 138, 138, 0.08);
    color: #e88a8a;
    border: 1px solid rgba(232, 138, 138, 0.24);
    font-size: 0.82rem;
    padding: 10px 14px;
    border-radius: var(--r-md);
    margin-bottom: 16px;
    text-align: left;
}

.login-rodape {
    color: var(--c-text-faint);
    font-size: 0.72rem;
    letter-spacing: 0.01em;
}

@media (max-width: 479px) {
    .login-page { padding: 40px 16px; }
    .login-stage { gap: 22px; }
    .login-card { padding: 26px 22px 22px; }
    .login-ambient { width: 480px; height: 480px; filter: blur(60px); }
}

@media (prefers-reduced-motion: reduce) {
    .login-google-btn,
    .login-google-btn:hover { transform: none; transition: none; }
    .login-header, .login-card { animation: none; }
}