/*
 * Tela dividida das paginas de visitante (layouts/auth-split): entrar, cadastro, senha, 2FA.
 * Celular e tablet (< 1024 px): so a coluna do formulario, logo em cima. PC: painel indigo
 * fixo a esquerda (55%) e o formulario a direita, que rola sozinho se for longo.
 * So tokens (tokens.css). A ilustracao (brand/hero-agenda.svg) so e citada no @media do PC.
 */
body.split { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; padding: 0; }
.split-shell { display: flex; flex: 1 0 auto; flex-direction: column; }
.split-hero { display: none; }

.split-main { position: relative; display: flex; flex: 1 0 auto; flex-direction: column; min-width: 0; padding: var(--sp-4) var(--sp-4) var(--sp-5); }
.split-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.split-form { width: 100%; max-width: 400px; margin: auto; padding-top: var(--sp-5); }

.split-title { margin: 0 0 var(--sp-2); font-size: var(--fs-7); font-weight: 800; line-height: 1.15; letter-spacing: -0.01em; color: var(--text); }
.split-subtitle { margin: 0 0 var(--sp-2); }

/* Rotulos em mono, pequenos e em caixa alta; campos de 48 px */
.split-form label,
.split-form .label { margin: var(--sp-4) 0 var(--sp-2); font: 500 var(--fs-1)/1.2 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.split-form input,
.split-form select { min-height: 48px; background: var(--surface); }
.split-form input:focus,
.split-form select:focus { border-color: var(--primary); }
.split-form input[readonly] { background: var(--surface-2); }
.split-form input::placeholder { color: var(--text-muted); opacity: 1; }

.field { position: relative; }
.field-icon { position: absolute; top: 50%; left: 14px; width: 20px; height: 20px; color: var(--text-muted); transform: translateY(-50%); pointer-events: none; }
.field input { padding-left: 44px; }
.field-password input { padding-right: 52px; }

.split-form .pw-toggle {
    position: absolute;
    top: 50%;
    right: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    min-height: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    color: var(--text-muted);
    background: transparent;
    border-radius: var(--r-control);
    transform: translateY(-50%);
}
.split-form .pw-toggle:hover { color: var(--text); background: var(--surface-2); }
.split-form .pw-toggle[hidden],
.pw-toggle .pw-eye-off,
.pw-toggle[aria-pressed="true"] .pw-eye { display: none; }
.pw-toggle[aria-pressed="true"] .pw-eye-off { display: block; }

/* Botoes: 48 px; o principal com icone */
.split-form button,
.split-form a.button { min-height: 48px; }
.split-submit { display: flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: var(--sp-5); box-shadow: var(--shadow-2); }
.split-form a.button-secondary,
.split-form button.button-secondary { gap: var(--sp-3); background: var(--surface); box-shadow: var(--shadow-1); }
.split-form a.button-secondary:hover,
.split-form button.button-secondary:hover { color: var(--text); background: var(--surface-2); }
.google-g { flex: none; }

/* "ou" entre linhas finas; o rodape "Acesso seguro" no mesmo desenho */
.split-form .divider,
.split-secure { display: flex; align-items: center; gap: var(--sp-3); font: 500 var(--fs-1)/1.2 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.split-form .divider { margin: var(--sp-4) 0 0; }
.split-form .divider::before,
.split-form .divider::after,
.split-secure::before,
.split-secure::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.split-secure { margin: var(--sp-6) 0 0; letter-spacing: 0.16em; }

.split-alt { margin: var(--sp-4) 0 0; text-align: center; font-size: var(--fs-2); }
.split-alt a { font-weight: 600; }

/* Painel (PC): fixo, sempre indigo escuro, independente do tema */
@media (min-width: 1024px) {
    .split-hero {
        position: fixed;
        inset: 0 auto 0 0;
        display: flex;
        flex-direction: column;
        gap: var(--sp-5);
        width: 55%;
        padding: clamp(var(--sp-5), 3.5vw, var(--sp-8));
        overflow: hidden;
        color: var(--hero-text);
        background: var(--hero-bg) linear-gradient(165deg, var(--hero-bg-top) 0%, var(--hero-bg-mid) 48%, var(--hero-bg) 100%);
    }
    .split-main { margin-left: 55%; padding: var(--sp-6) var(--sp-7); }
    .split-top { position: absolute; top: var(--sp-5); right: var(--sp-5); }
    .split-top .split-logo { display: none; }
    .split-form { padding-top: 0; }
    /*
     * Ilustracao: so aqui (o celular nunca baixa). Trocar a imagem (ex.: uma por segmento): troque o
     * arquivo e o ?v= (10 primeiros hex do md5, como o BrandAsset; o AuthSplitTest confere).
     */
    .split-art { background: url("../brand/hero-agenda.svg?v=733712389a") center / contain no-repeat; }
}

.split-hero-logo { display: block; flex: none; align-self: flex-start; width: auto; height: 32px; }
.split-art { flex: 1 1 auto; min-height: 0; }
.split-hero-copy { flex: none; max-width: 36rem; margin-top: auto; }
.split-tag { display: inline-flex; margin: 0 0 var(--sp-4); padding: 6px var(--sp-3); font: 500 var(--fs-1)/1.2 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--hero-text); background: var(--hero-pill); border: 1px solid var(--hero-line); border-radius: var(--r-pill); }
.split-headline { margin: 0 0 var(--sp-4); font-size: clamp(2.25rem, 1rem + 2.6vw, 4rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; color: var(--hero-text); }
.split-highlight { color: var(--hero-highlight); white-space: nowrap; }
.split-hero-lead { max-width: 30rem; margin: 0; font-size: var(--fs-4); line-height: 1.5; color: var(--hero-text-soft); }

/* Tela baixa (notebook com zoom, celular deitado): so espacos e tamanhos menores */
@media (max-height: 640px) {
    .split-main { padding-block: var(--sp-3); }
    .split-form { padding-top: var(--sp-2); }
    .split-title { font-size: var(--fs-6); }
    .split-subtitle { margin-bottom: 0; }
    .split-form label,
    .split-form .label { margin: var(--sp-2) 0 var(--sp-1); }
    .split-submit { margin-top: var(--sp-3); }
    .split-form .divider,
    .split-alt { margin-top: var(--sp-3); }
    .split-form a.button { margin-top: var(--sp-3); }
    .split-secure { margin-top: var(--sp-4); }
    .split-hero { gap: var(--sp-3); }
    .split-headline { margin-bottom: var(--sp-2); font-size: clamp(1.75rem, 0.8rem + 2vw, 2.75rem); }
    .split-tag { margin-bottom: var(--sp-2); }
    .split-hero-lead { font-size: var(--fs-3); }
}