/*!
 * Aera Grão - Página de login e cadastro
 * Formulário à esquerda; banner/propaganda à direita (em telas estreitas, abaixo do formulário).
 */
body.auth-page {
    height: auto;
    min-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    background: var(--bg);
}

.auth-split {
    display: grid;
    grid-template-columns: clamp(380px, 34vw, 520px) minmax(0, 1fr);
    min-height: 100vh;
}

/* ------------------------------ Formulário ------------------------------ */
.auth-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 40px clamp(24px, 4vw, 56px) 20px;
    border-right: 1px solid var(--border);
    background: radial-gradient(ellipse at 0% 0%, #16233d 0%, var(--surface-1) 60%);
}
.auth-inner { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 380px; margin: auto 0; }
.auth-foot { margin-top: 28px; color: var(--text-faint); font-size: 12px; }

.auth-brand { display: flex; align-items: center; gap: 12px; }
.auth-brand .rail-brand { flex: none; margin: 0; }
.auth-brand b { display: block; font-size: 17px; }
.auth-brand span { display: block; color: var(--text-muted); font-size: 12.5px; }

.auth-heading h1 { font-size: 24px; font-weight: 650; letter-spacing: -.01em; }
.auth-heading p { margin-top: 6px; color: var(--text-muted); font-size: 14px; }

.auth-tabs { display: flex; height: 42px; }
.auth-tabs > button { flex: 1; }
.auth-tabs > button.active { background: var(--accent); color: #fff; }

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.auth-form[hidden] { display: none; }
.auth-form .field input { height: 44px; }
.auth-form .primary-button { height: 46px; margin-top: 4px; font-size: 14.5px; }
.auth-form .form-error[hidden] { display: none; }
.auth-form button[disabled] { opacity: .6; cursor: progress; }
.auth-note { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: 12.5px; }
.auth-note .ico { width: 16px; height: 16px; color: var(--ok); }

.password-field { position: relative; display: block; }
.password-field input { width: 100%; padding-right: 44px; }
.password-toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text-faint);
    transform: translateY(-50%);
}
.password-toggle:hover, .password-toggle[aria-pressed="true"] { background: var(--surface-3); color: var(--text); }
.password-toggle .ico { width: 18px; height: 18px; }

/* -------------------------------- Banner -------------------------------- */
.auth-banner {
    position: relative;
    min-width: 0;
    min-height: 100vh;
    overflow: hidden;
    background: var(--banner-bg, #0b1220);
}
.banner-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: var(--banner-fit, cover);
    object-position: var(--banner-pos, center);
}
.banner-image[hidden], .banner-default[hidden], .banner-cta[hidden] { display: none; }

/* Banner padrão (sem imagem configurada) */
.banner-default {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    padding: clamp(32px, 6vw, 96px);
    background:
        radial-gradient(ellipse at 85% 15%, rgba(34, 197, 94, .22), transparent 55%),
        radial-gradient(ellipse at 10% 90%, rgba(59, 130, 246, .35), transparent 60%),
        linear-gradient(160deg, #0f1f3d 0%, #0b1220 70%);
}
.banner-default::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(148, 163, 184, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(148, 163, 184, .06) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
    pointer-events: none;
}
.banner-default-body { position: relative; z-index: 1; max-width: 620px; }
.banner-kicker {
    display: inline-block;
    padding: 5px 12px;
    border: 1px solid rgba(148, 163, 184, .35);
    border-radius: 999px;
    color: #cfe0ff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.banner-default h2 { margin: 18px 0 22px; font-size: clamp(28px, 3.4vw, 48px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
.banner-default ul { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; font-size: clamp(14px, 1.2vw, 17px); color: #cbd5e1; }
.banner-default li { display: flex; align-items: center; gap: 12px; }
.banner-default li .ico { width: 22px; height: 22px; padding: 3px; border-radius: 6px; background: rgba(34, 197, 94, .18); color: #86efac; }

.banner-default-cta { display: flex; align-items: center; gap: 12px 18px; flex-wrap: wrap; margin-top: 30px; }
.banner-default-cta span { color: #94a3b8; font-size: 14px; }
.banner-trial {
    display: inline-flex;
    align-items: center;
    height: 46px;
    padding: 0 24px;
    border-radius: 999px;
    background: #fff;
    color: #0b1220;
    font-weight: 700;
    text-decoration: none;
    transition: transform .15s, box-shadow .15s;
}
.banner-trial:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .35); }

/* Botão do WhatsApp sobre o banner */
.banner-cta {
    position: absolute;
    left: 50%;
    bottom: clamp(20px, 5vh, 48px);
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border-radius: 999px;
    background: #25d366;
    color: #fff;
    font-size: 15px;
    font-weight: 650;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .35);
    transform: translateX(-50%);
    transition: transform .15s, box-shadow .15s, background .15s;
}
.banner-cta:hover { background: #1fbe5b; box-shadow: 0 16px 36px rgba(0, 0, 0, .45); transform: translateX(-50%) translateY(-2px); }
.banner-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.banner-cta .ico { width: 22px; height: 22px; }

/* Banner desligado na Administração: só o formulário, centralizado */
body.auth-no-banner .auth-split { grid-template-columns: minmax(0, 1fr); }
body.auth-no-banner .auth-side { align-items: center; border-right: 0; }

/* ----------------------------- Telas estreitas ----------------------------- */
@media (max-width: 900px) {
    .auth-split { grid-template-columns: minmax(0, 1fr); }
    .auth-side { min-height: auto; padding: 32px 20px 24px; border-right: 0; border-bottom: 1px solid var(--border); }
    .auth-inner { margin: 0 auto; }
    .auth-foot { text-align: center; }
    /* Imagem na largura toda, na proporção dela; o botão logo abaixo (fora da imagem) */
    .auth-banner { display: flex; flex-direction: column; align-items: center; min-height: 0; padding-bottom: 28px; }
    .banner-image { position: static; width: 100%; height: auto; object-fit: contain; }
    .banner-default { position: relative; inset: auto; width: 100%; padding: 36px 24px 28px; }
    .banner-cta { position: static; margin-top: 20px; transform: none; }
    .banner-cta:hover { transform: translateY(-2px); }
}