/* ==========================================================================
   mktdoimovel — telas de acesso (login, recuperação e definição de senha)
   Layout de card centralizado, a partir do mockup Login.dc.html.

   Depende de base/assets/css/design-system.css, que já define os tokens
   (--c-bg, --c-card, --c-muted, --c-text, --c-danger, --c-radius, --c-shadow)
   e o componente .ds-input. Incluir design-system.css ANTES deste arquivo.

   Prefixo lg-* (login) para não colidir com o tema Vuexy nem com ds-*.
   ========================================================================== */

:root {
    /* Laranja da marca — mesmo valor de --c-navbar-from (gradiente da navbar).
       Não está em design-system.css porque lá só entraram tokens usados nas
       telas internas. */
    --lg-brand:       #ffa045;
    --lg-brand-hover: #f08a2a;
}

/* ── Moldura ───────────────────────────────────────────────────────────── */
body.lg-body {
    margin: 0;
    background: var(--c-bg);
    font-family: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    color: var(--c-text);
}

.lg-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
}

.lg-inner {
    width: 100%;
    max-width: 392px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Cabeçalho (logo + subtítulo) ──────────────────────────────────────── */
.lg-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
    text-align: center;
}

.lg-logo img { display: block; width: 210px; max-width: 100%; height: auto; }

.lg-sub { font-size: 13px; color: var(--c-muted); }

/* ── Card ──────────────────────────────────────────────────────────────── */
.lg-card {
    background: var(--c-card);
    border-radius: var(--c-radius);
    box-shadow: var(--c-shadow);
    padding: 28px 26px 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* O <form> é um único filho flex do card, então o gap acima não separa os
   campos que estão dentro dele — precisa ser flex também. */
.lg-card form {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
}

/* ── Campos ────────────────────────────────────────────────────────────── */
.lg-field { display: flex; flex-direction: column; gap: 6px; }

.lg-field-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
}

.lg-label { font-size: 12px; font-weight: 600; color: var(--c-text); }

/* Sobrescreve o .ds-input na altura/tamanho de fonte desta tela. O foco também
   muda: o padrão do design system é o roxo --c-primary, que destoa no meio de
   uma tela toda laranja. */
.lg-card .ds-input { height: 42px; font-size: 13.5px; }
.lg-card .ds-input:focus {
    border-color: var(--lg-brand);
    box-shadow: 0 0 0 3px rgba(255, 160, 69, .18);
}

.lg-pw { position: relative; display: flex; }
.lg-pw .ds-input { flex: 1; padding-right: 40px; }

.lg-pw-toggle {
    position: absolute;
    right: 2px;
    top: 0;
    height: 42px;
    width: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    cursor: pointer;
    color: var(--c-muted);
    font-size: 17px;
    padding: 0;
}
.lg-pw-toggle:hover { color: var(--lg-brand); }

/* ── Checkbox "Manter conectado" ───────────────────────────────────────── */
.lg-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--c-text);
    cursor: pointer;
    user-select: none;
}
.lg-check input {
    width: 15px;
    height: 15px;
    accent-color: var(--lg-brand);
    cursor: pointer;
    margin: 0;
}

/* ── Faixa de aviso (erro / sucesso) ───────────────────────────────────── */
.lg-alert {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.45;
    border-radius: var(--c-radius-sm);
    padding: 9px 11px;
}
.lg-alert i { font-size: 15px; flex-shrink: 0; margin-top: 1px; }

.lg-alert--danger  { color: var(--c-danger); background: var(--c-danger-lt); }
.lg-alert--success { color: #2d6a08;         background: var(--c-success-lt); }

.lg-alert a { color: inherit; text-decoration: underline; }

/* ── Botão principal ───────────────────────────────────────────────────── */
.lg-btn {
    height: 44px;
    width: 100%;
    border: 0;
    border-radius: 7px;
    background: var(--lg-brand);
    color: #fff;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(255, 160, 69, .28);
    transition: background .13s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
}
.lg-btn:hover  { background: var(--lg-brand-hover); color: #fff; }
.lg-btn.is-loading { opacity: .85; cursor: default; pointer-events: none; }

/* Spinner que aparece só enquanto o form está sendo enviado */
.lg-btn .lg-spin { display: none; font-size: 16px; }
.lg-btn.is-loading .lg-spin { display: inline-block; animation: lg-spin .7s linear infinite; }
@keyframes lg-spin { to { transform: rotate(360deg); } }

/* ── Links ─────────────────────────────────────────────────────────────── */
.lg-link { color: var(--lg-brand); text-decoration: none; font-weight: 600; }
.lg-link:hover { color: var(--lg-brand-hover); text-decoration: underline; }

/* ── Rodapé ────────────────────────────────────────────────────────────── */
.lg-foot {
    text-align: center;
    font-size: 11.5px;
    color: var(--c-muted);
    line-height: 1.6;
}
.lg-foot a { color: var(--c-muted); font-weight: 600; text-decoration: none; }
.lg-foot a:hover { text-decoration: underline; }

/* Selo do reCAPTCHA v3 escondido — permitido pelos termos do Google desde que
   a página exiba o aviso de atribuição, que está em .lg-foot. */
.grecaptcha-badge { visibility: hidden; }

/* ── Texto corrido dentro do card (telas de sucesso) ───────────────────── */
.lg-text { font-size: 13px; line-height: 1.6; color: var(--c-text); margin: 0; }
.lg-title { font-size: 17px; font-weight: 700; color: var(--c-text-strong); margin: 0; }
.lg-icon-ok {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    background: var(--c-success-lt);
    color: #2d6a08;
    align-self: center;
}