/* Login do RaviLeads: estado da casca. Vitrine à esquerda (três frases do produto), cartão das etapas à direita.
   Cores só por tokens --d2-*; movimento só por transform e opacity. */

.login {
    position: fixed; inset: 0; z-index: calc(var(--d2-z-modal) - 10);
    display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(420px, 1fr);
    overflow: auto; overscroll-behavior: contain; background: var(--d2-bg); color: var(--d2-text);
}
html.login-ativo, html.login-ativo body { overflow: hidden; }
.login.is-entrando { animation: login-entrar var(--d2-mov-lento) var(--d2-curva-entrada) both; }
/* Entrada escalonada: cada peça em 280 ms, com atrasos curtos (no máximo 360 ms contando o atraso) */
.login.is-entrando .login-vitrine-centro { animation: login-subir 280ms var(--d2-curva-entrada) both 40ms; }
.login.is-entrando .login-cartao { animation: login-subir 280ms var(--d2-curva-entrada) both 40ms; }
/* Saída mais rápida que a entrada */
.login.is-saindo { animation: login-sair 240ms var(--d2-curva-saida) both; pointer-events: none; }
@keyframes login-entrar { from { opacity: 0; } to { opacity: 1; } }
@keyframes login-sair { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(1.012); } }
@keyframes login-subir { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* Marca */
.login-marca { display: flex; align-items: center; gap: 10px; }
/* Marca real do RaviLeads: ícone e escrita (uma variante só; a vitrine é noturna nos dois temas). */
.login-marca-icone { width: 38px; height: 38px; flex: none; }
.login-marca-escrita { height: 26px; width: auto; flex: none; }
.login-marca-movel { display: none; }
.login-marca-logo { height: 32px; width: auto; flex: none; }

/* Vitrine: chamada e três frases do produto. Superfície de marca profunda
   (cores.md, 3.6) com o escuro local da casa (.d2-noite) para as pastilhas; os textos
   soltos sobre o gradiente usam os tons do menu, que passam o contraste nos dois temas. */
.login-vitrine {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; gap: 36px; min-height: 100%; padding: 40px clamp(32px, 5vw, 72px) 32px;
    background: var(--d2-brand-gradiente-profundo); color: var(--d2-menu-texto);
}
.login-vitrine::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--d2-menu-texto) 12%, transparent) 1.2px, transparent 0) 0 0 / 24px 24px;
    mask-image: linear-gradient(to bottom, var(--d2-text), transparent 85%);
    -webkit-mask-image: linear-gradient(to bottom, var(--d2-text), transparent 85%);
}
.login-vitrine-centro { display: flex; flex-direction: column; gap: 16px; max-width: 560px; margin-block: auto; }
.login-vitrine-titulo { margin: 0; font-size: clamp(28px, 2.6vw, 40px); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; color: var(--d2-sobre-acento); }
.login-vitrine-texto { margin: 0; max-width: 52ch; font-size: var(--d2-fs-lg); line-height: 1.6; color: var(--d2-menu-texto); }
.login-destaques { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 14px; }
.login-destaque { display: flex; align-items: flex-start; gap: 14px; }
.login-destaque-icone {
    flex: none; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: var(--d2-radius-lg);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--d2-acento) 35%, transparent), var(--d2-shadow-sm);
}
.login-destaque-icone > .d2-icone { width: 18px; height: 18px; }
.login-destaque-texto { min-width: 0; padding-top: 8px; font-size: var(--d2-fs-md); line-height: 1.5; color: var(--d2-menu-texto); }


/* Lado do cartão: topo (idioma e tema), cartão centralizado e rodapé */
.login-lado { position: relative; display: flex; flex-direction: column; min-height: 100%; min-width: 0; background: var(--d2-bg); }
/* Filete da marca no topo do lado do formulário (cores.md, 3.6) */
.login-lado::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--d2-brand-filete); pointer-events: none; }
.login-topo {
    display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex: none;
    min-height: 72px; padding: calc(16px + env(safe-area-inset-top)) 24px 16px;
}
.login-topo-acoes { display: flex; align-items: center; gap: 8px; }
.login-idiomas {
    display: inline-flex; align-items: center; gap: 2px; padding: 3px;
    border: 1px solid var(--d2-border); border-radius: var(--d2-radius-pill); background: var(--d2-bg-subtle);
}
.login-idioma {
    min-width: 40px; height: 30px; padding: 0 10px; border: 0; border-radius: var(--d2-radius-pill);
    background: none; color: var(--d2-text-muted); font-size: var(--d2-fs-xs); font-weight: 700; letter-spacing: .05em; cursor: pointer;
}
.login-idioma:hover { color: var(--d2-text); background: var(--d2-bg-hover); }
.login-idioma.is-ativo { background: var(--d2-bg-elevated); color: var(--d2-brand-texto); box-shadow: var(--d2-shadow-sm); cursor: default; }
.login-idioma.is-carregando { animation: d2-pulsar 1.2s ease-in-out infinite; }
.login-tema { width: 38px; height: 38px; border-radius: var(--d2-radius-pill); }
.login-tema > .d2-icone { width: 18px; height: 18px; }

.login-centro { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; padding: 8px 24px 24px; }
/* Cartão do formulário: --d2-bg-elevated sobre --d2-bg (cores.md, 4) */
.login-cartao {
    position: relative; width: 100%; max-width: 456px; padding: 28px 24px 24px;
    border: 1px solid var(--d2-border); border-radius: var(--d2-radius-xl); background: var(--d2-bg-elevated); box-shadow: var(--d2-shadow-md);
}
.login-etapa { display: flex; flex-direction: column; }
.login-etapa.is-avancando { animation: login-avancar var(--d2-mov-lento) var(--d2-curva-entrada) both; }
.login-etapa.is-voltando { animation: login-voltar var(--d2-mov-lento) var(--d2-curva-entrada) both; }
@keyframes login-avancar { from { opacity: 0; transform: translateX(22px); } to { opacity: 1; transform: none; } }
@keyframes login-voltar { from { opacity: 0; transform: translateX(-22px); } to { opacity: 1; transform: none; } }

.login-cab { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.login-cab-icone {
    display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 10px; border-radius: var(--d2-radius-lg);
    background: var(--d2-brand-gradiente); color: var(--d2-sobre-brand); box-shadow: var(--d2-shadow-sm);
}
.login-cab-icone.is-aviso { background: var(--d2-aviso-fundo); color: var(--d2-aviso); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--d2-aviso) 28%, transparent); }
.login-cab-icone > .d2-icone { width: 22px; height: 22px; }
.login-titulo { margin: 0; font-size: var(--d2-fs-2xl); font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--d2-text); }
.login-texto { margin: 0; font-size: var(--d2-fs-md); line-height: 1.6; color: var(--d2-text-muted); overflow-wrap: anywhere; }

.login-faixa { margin-bottom: 18px; }
.login-faixa[hidden] { display: none; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-form .d2-field { margin: 0; }
.login-linha-senha { position: relative; }
.login-esqueci { position: absolute; top: 0; right: 0; font-size: var(--d2-fs-sm); line-height: 1.5; }
.login-codigo input { font-family: var(--d2-font-mono); font-size: var(--d2-fs-xl); letter-spacing: .32em; text-align: center; }
.login-enviar { width: 100%; height: 44px; justify-content: center; gap: 8px; margin-top: 6px; font-size: var(--d2-fs-md); font-weight: 600; }
.login-enviar > .d2-icone { transition: transform var(--d2-mov-rapido) var(--d2-curva-entrada); }
.login-enviar:hover:not(:disabled) > .d2-icone { transform: translateX(3px); }
.login-acoes-extra { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; font-size: var(--d2-fs-sm); }
.login-acoes-extra > :only-child { margin: 0 auto; }
.login-link { font-size: var(--d2-fs-sm); }

.login-regras { list-style: none; margin: -4px 0 0; padding: 12px 14px; display: grid; gap: 7px; border-radius: var(--d2-radius-md); background: var(--d2-bg-subtle); }
.login-regra { display: flex; align-items: center; gap: 9px; font-size: var(--d2-fs-sm); color: var(--d2-text-muted); }
.login-regra-marca {
    flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
    border: 1.5px solid var(--d2-border-strong); color: var(--d2-sobre-brand);
}
.login-regra-marca > .d2-icone { width: 11px; height: 11px; stroke-width: 3; opacity: 0; transform: scale(.4); transition: opacity var(--d2-mov-rapido), transform var(--d2-mov-normal) var(--d2-curva-entrada); }
.login-regra.is-ok { color: var(--d2-text); }
.login-regra.is-ok .login-regra-marca { border-color: var(--d2-ok); background: var(--d2-ok); }
.login-regra.is-ok .login-regra-marca > .d2-icone { opacity: 1; transform: none; }
.login-nota {
    display: flex; align-items: flex-start; gap: 10px; margin: 0 0 18px; padding: 12px 14px; border-radius: var(--d2-radius-md);
    background: var(--d2-bg-subtle); font-size: var(--d2-fs-sm); line-height: 1.55; color: var(--d2-text-muted);
}
.login-nota > .d2-icone { flex: none; margin-top: 2px; color: var(--d2-info); }

.login-cartao.is-ocupado .login-form > :not(.login-enviar) { opacity: .62; pointer-events: none; transition: opacity var(--d2-mov-rapido); }
.login-cartao.is-concluido .login-etapa { opacity: .55; transform: scale(.99); transition: opacity var(--d2-mov-normal), transform var(--d2-mov-normal) var(--d2-curva-saida); }

.login-rodape {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px 16px; flex: none;
    padding: 16px 24px calc(18px + env(safe-area-inset-bottom)); font-size: var(--d2-fs-xs); color: var(--d2-text-faint);
}
.login-rodape-seguro { display: inline-flex; align-items: center; gap: 6px; }
.login-rodape-seguro > .d2-icone { width: 13px; height: 13px; color: var(--d2-ok); }

/* Sobreposto: sessão expirou com a casca aberta. O trabalho fica atrás do véu e volta igual depois */
.login.is-sobreposto {
    grid-template-columns: minmax(0, 1fr); place-items: center; padding: 24px;
    background: color-mix(in srgb, var(--d2-bg) 90%, transparent);
}
.login.is-sobreposto .login-vitrine { display: none; }
.login.is-sobreposto .login-lado {
    width: min(460px, 100%); min-height: 0; max-height: calc(100dvh - 48px); overflow: auto;
    border: 1px solid var(--d2-border-strong); border-radius: var(--d2-radius-xl); box-shadow: var(--d2-shadow-lg);
}
.login.is-sobreposto .login-topo { justify-content: space-between; min-height: 0; padding: 18px 20px 4px; }
.login.is-sobreposto .login-marca-movel { display: flex; }
.login.is-sobreposto .login-marca-icone { width: 30px; height: 30px; }
.login.is-sobreposto .login-marca-escrita { height: 21px; }
.login.is-sobreposto .login-lado { background: var(--d2-bg-elevated); }
.login.is-sobreposto .login-cartao { max-width: 408px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.login.is-sobreposto .login-centro { padding: 16px 28px 8px; }
.login.is-sobreposto .login-rodape { padding: 12px 20px 16px; }
.login.is-sobreposto.is-entrando .login-lado { animation: login-subir var(--d2-mov-lento) var(--d2-curva-entrada) both; }

/* Telas médias: a vitrine sai e a marca aparece no topo */
@media (max-width: 1023.98px) {
    .login { grid-template-columns: minmax(0, 1fr); }
    .login-vitrine { display: none; }
    .login-topo { justify-content: space-between; }
    .login-marca-movel { display: flex; }
    .login-lado {
        background:
            radial-gradient(90% 40% at 0% 0%, color-mix(in srgb, var(--d2-brand) 10%, transparent), transparent 70%),
            var(--d2-bg);
    }
}

/* Celular */
@media (max-width: 759.98px) {
    .login-topo { min-height: 0; padding: calc(12px + env(safe-area-inset-top)) 16px 8px; }
    .login-marca-icone { width: 32px; height: 32px; }
    .login-marca-escrita { height: 22px; }
    /* Topo inteiro dentro de 360 px: marca encolhe, idiomas e tema com 44 px de altura. */
    .login-topo { gap: 8px; }
    .login-topo-acoes { gap: 4px; }
    .login-idioma { min-width: 40px; height: 44px; padding: 0 6px; }
    /* Alvo de toque de 44 px no próprio link, centrado na linha do rótulo. */
    .login-esqueci { display: inline-flex; align-items: center; min-height: 44px; top: -13px; padding: 0 2px; }
    .login-tema { width: 44px; height: 44px; }
    .login-centro { align-items: flex-start; padding: 20px 20px 16px; }
    .login-lado { background: var(--d2-bg-elevated); }
    .login-cartao { max-width: 408px; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
    .login-cab { margin-bottom: 20px; }
    .login-titulo { font-size: var(--d2-fs-xl); }
    .login-enviar { height: 48px; }
    .login-acoes-extra .login-link { min-height: 44px; }
    .login-rodape { justify-content: center; text-align: center; padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); }
    .login.is-sobreposto { padding: 0; align-items: end; }
    .login.is-sobreposto .login-lado { width: 100%; max-height: 94dvh; border-radius: var(--d2-radius-xl) var(--d2-radius-xl) 0 0; border-bottom: 0; }
    .login.is-sobreposto .login-centro { padding: 12px 20px 4px; }
    html.teclado-aberto .login-rodape { display: none; }
}

/* Celulares estreitos: a escrita da marca encolhe para o topo caber sem cortar nada */
@media (max-width: 420px) {
    .login-marca-movel .login-marca-logo { height: 26px; }
}

/* Notebooks: a vitrine aperta os espaços para caber inteira na altura da tela */
@media (max-height: 900px) and (min-width: 1024px) {
    .login-vitrine { gap: 24px; padding-top: 32px; padding-bottom: 24px; }
    .login-destaques { gap: 10px; margin-top: 4px; }
}

/* Telas baixas: o cartão sobe e nada fica cortado */
@media (max-height: 640px) and (min-width: 760px) {
    .login-centro { align-items: flex-start; }
    .login-vitrine { gap: 24px; padding-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
    .login-etapa.is-avancando, .login-etapa.is-voltando, .login.is-entrando .login-cartao,
    .login.is-entrando .login-vitrine-centro { animation: none; }
    .login-enviar:hover:not(:disabled) > .d2-icone, .login-cartao.is-concluido .login-etapa { transform: none; }
}