/* ═══════════════════════════════════════════════════════════════
   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;
}

/* ── Pilha do formulario ───────────────────────────────────────
   Google, campos e Entrar tem TODOS width:100% + box-sizing:border-box,
   sem padding/margin lateral proprio — o respiro lateral vem do padding
   do .login-card. Assim as 4 bordas esquerda/direita formam uma linha
   unica. Altura unica de 46px (alvo de toque >=44px) e mesmo raio. */
.login-google-btn,
.login-entrar-btn,
.login-input .dash-input-element {
    box-sizing: border-box;
    width: 100%;
    border-radius: var(--r-md);
    font-family: var(--font-body);
    font-size: 0.92rem;
}
.login-google-btn,
.login-entrar-btn { height: 46px; }

/* Botao Google — SECUNDARIO: fundo levemente elevado, borda 1px visivel */
.login-google-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 0 20px;
    background: rgba(90, 138, 153, 0.06);
    border: 1px solid var(--c-primary-vivid);
    font-weight: 600;
    color: var(--c-text);
    cursor: pointer;
    text-decoration: none;
    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: rgba(90, 138, 153, 0.12);
    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;
}

/* Divisor "ou" — mesmo espaco acima e abaixo; texto legivel (nao faint) */
.login-divisor {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: var(--c-text-muted);
    font-size: 0.75rem;
    text-transform: lowercase;
    letter-spacing: 0.04em;
}
.login-divisor::before,
.login-divisor::after {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg,
                transparent 0%, var(--c-border-hover) 50%, transparent 100%);
}

/* Form usuario + senha */
.login-form {
    display: flex;
    flex-direction: column;
}
.login-field {
    display: flex;
    flex-direction: column;
    gap: 8px;             /* rotulo -> campo (e campo senha -> link) */
    text-align: left;
}
.login-field + .login-field { margin-top: 20px; }  /* bloco Usuario -> bloco Senha */

/* Rotulo persistente acima de cada campo */
.login-label {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--c-text-muted);   /* >=4.5:1 no card */
    letter-spacing: 0.01em;
}

/* dcc.Input (Dash 4) renderiza um wrapper .dash-input-container (nossa
   className .login-input cai nele) + o <input> interno .dash-input-element.
   A lib do Dash impoe height:34px + overflow:hidden NO WRAPPER, entao o
   input de 46px era cortado (12px, incluindo a borda inferior). Correcao:
   aplicar a altura no proprio wrapper. Escopo obrigatorio em .login-input
   — .dash-input-container global (outros inputs do app) fica intacto. */
.login-input.dash-input-container {
    display: flex;
    align-items: center;
    width: 100%;
    height: 46px;
    min-height: 46px;
    overflow: visible;
    box-sizing: border-box;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
}
.login-input .dash-input-element {
    width: 100%;
    height: 100%;
    padding: 0 14px;
    background: var(--c-card);
    border: 1px solid var(--c-primary-vivid);   /* >=3:1 no card */
    color: var(--c-text);
    transition: border-color var(--motion-base),
                box-shadow var(--motion-base);
}
/* Neutraliza o texto vermelho do :invalid do Dash (os campos sao required,
   entao :invalid fica ativo). O texto digitado nao deve mudar de cor —
   ficava rgb(255,0,0), so' 3.99:1 no card. Mantem o token padrao. */
.login-input .dash-input-element,
.login-input .dash-input-element:invalid {
    color: var(--c-text);
}
.login-input .dash-input-element::placeholder { color: var(--c-text-muted); }
.login-input .dash-input-element:focus,
.login-input .dash-input-element:focus-visible {
    outline: none;
    border-color: var(--c-primary-light);
    box-shadow: var(--focus-ring);
}

/* Campo de senha — input + botao de mostrar/ocultar (olho) sobreposto */
.login-senha-wrap { position: relative; width: 100%; }
.login-senha-wrap .login-input .dash-input-element {
    padding-right: 48px;   /* nao passar sob o olho (>=44px) */
}
.login-eye-btn {
    position: absolute;
    top: 0;
    right: 0;
    /* O .dash-input-element do Dash tem z-index:1 (e como o involucro virou
       flex, esse z-index passou a valer) — sem isto o input fica POR CIMA
       do botao, escondendo o icone e capturando o clique. */
    z-index: 2;
    width: 44px;    /* alvo de toque >=44x44 */
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    border-radius: var(--r-md);
    color: var(--c-text-muted);
    font-size: 1.05rem;
    cursor: pointer;
    transition: color var(--motion-fast);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.login-eye-btn:hover { color: var(--c-text); }
.login-eye-btn:focus-visible {
    outline: none;
    color: var(--c-text);
    box-shadow: var(--focus-ring);
}

/* Link "Esqueci minha senha" — alinhado a direita, abaixo da senha.
   O espaco de 8px vem do gap do .login-field (nao repetir aqui). */
.login-forgot {
    align-self: flex-end;
    font-size: 0.78rem;
    color: var(--c-text-muted);   /* >=4.5:1 */
    text-decoration: none;
    border-radius: var(--r-sm);
    transition: color var(--motion-fast);
}
.login-forgot:hover { color: var(--c-text); text-decoration: underline; }
.login-forgot:focus-visible {
    outline: none;
    color: var(--c-text);
    box-shadow: var(--focus-ring);
}

/* Container de mensagem — entre senha e Entrar. COLAPSA quando vazio (sem
   espaco morto); com mensagem, assume altura natural. A mensagem so'
   aparece em recarga de pagina (redirect ?erro=), presente ja' na 1a
   pintura — nao ha insercao dinamica, entao nao ha salto de layout. */
.login-msg {
    height: 0;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    display: flex;
    align-items: center;
    font-size: 0.8rem;
    line-height: 1.35;
    text-align: left;
}
.login-msg--erro,
.login-msg--info {
    height: auto;
    min-height: 20px;
    margin-top: 16px;
    overflow: visible;
}
.login-msg--erro { color: #e88a8a; }          /* alto contraste no card */
.login-msg--info { color: var(--c-text-muted); }

/* Botao Entrar — PRIMARIO: fundo solido no azul de destaque do "BI"
   (--c-primary-light); texto escuro para contraste >=4.5:1 (texto branco
   nesse azul fica ~3.8:1 e reprovaria). */
.login-entrar-btn {
    margin-top: 28px;   /* espaco (maior) antes do primario */
    padding: 0 24px;
    background: var(--c-primary-light);
    border: 1px solid var(--c-primary-light);
    color: var(--c-bg);
    font-weight: 700;
    cursor: pointer;
    transition: filter var(--motion-base),
                box-shadow var(--motion-base),
                transform var(--motion-base);
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.login-entrar-btn:hover {
    filter: brightness(1.08);
    box-shadow: 0 4px 14px rgba(90, 138, 153, 0.28);
    transform: translateY(-1px);
}
.login-entrar-btn:focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
}

@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,
    .login-entrar-btn,
    .login-entrar-btn:hover { transform: none; transition: none; }
    .login-header, .login-card { animation: none; }
}