/* ═══════════════════════════════════════════
   TOKENS
   ═══════════════════════════════════════════ */
:root {
    --brand:   #0A5BD3;
    --brand-2: #1e40af;
    --brand-3: #0ea5e9;
    --text:    #0f172a;
    --muted:   #64748b;
    --border:  #e2e8f0;
    --bg:      #f8fafc;
    --input-h: 48px;
    --radius:  12px;
}

/* ═══════════════════════════════════════════
   RESET / BASE
   ═══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body.login-split {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
}

/* ═══════════════════════════════════════════
   SPLIT WRAPPER
   ═══════════════════════════════════════════ */
.ls-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100dvh;
}

/* ═══════════════════════════════════════════
   PAINEL ESQUERDO — MARCA
   ═══════════════════════════════════════════ */
.ls-brand {
    position: relative;
    overflow: hidden;
    background: linear-gradient(145deg, #0f2a6e 0%, var(--brand) 45%, var(--brand-3) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 3.5rem;
}

.ls-brand-inner {
    position: relative;
    z-index: 2;
    max-width: 420px;
}

/* Logo */
.ls-logo {
    height: 110px;
    width: auto;
    display: block;
    margin-bottom: 3rem;
    filter: brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.25));
}

/* Títulos */
.ls-headline {
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    font-weight: 800;
    line-height: 1.15;
    color: #fff;
    letter-spacing: -.5px;
    margin-bottom: 1rem;
}

.ls-sub {
    font-size: .95rem;
    color: rgba(255,255,255,.72);
    line-height: 1.65;
    margin-bottom: 2.5rem;
}

/* Feature list */
.ls-features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.ls-features li {
    display: flex;
    align-items: center;
    gap: .75rem;
    font-size: .9rem;
    color: rgba(255,255,255,.85);
    font-weight: 500;
}

.ls-features i {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    color: #fff;
}

/* Decorações */
.ls-deco {
    position: absolute;
    border-radius: 50%;
    opacity: .12;
    pointer-events: none;
}
.ls-deco-1 {
    width: 420px; height: 420px;
    background: #fff;
    top: -140px; right: -120px;
}
.ls-deco-2 {
    width: 260px; height: 260px;
    background: var(--brand-3);
    bottom: -80px; left: -60px;
    opacity: .2;
}
.ls-deco-3 {
    width: 160px; height: 160px;
    background: #fff;
    bottom: 80px; right: 40px;
    opacity: .06;
}

/* ═══════════════════════════════════════════
   PAINEL DIREITO — FORMULÁRIO
   ═══════════════════════════════════════════ */
.ls-form-panel {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem;
    background: #fff;
}

.ls-form-inner {
    width: 100%;
    max-width: 380px;
}

/* Logo mobile */
.ls-mobile-logo {
    display: none;
    text-align: center;
    margin-bottom: 1.5rem;
}
.ls-mobile-logo img {
    height: 48px;
    width: auto;
}

/* Títulos do form */
.ls-form-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -.3px;
    margin-bottom: .35rem;
}

.ls-form-sub {
    font-size: .875rem;
    color: var(--muted);
    margin-bottom: 2rem;
}

/* Alerta de erro */
.ls-alert-wrap:empty { display: none; }

.ls-alert {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    border-radius: var(--radius);
    padding: .75rem 1rem;
    font-size: .875rem;
    margin-bottom: 1.25rem;
}
.ls-alert:empty { display: none; }

/* Campo */
.ls-field {
    margin-bottom: 1.1rem;
}

.ls-field label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: .4rem;
    letter-spacing: .2px;
    text-transform: uppercase;
}

.ls-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.ls-icon {
    position: absolute;
    left: 14px;
    font-size: 1rem;
    color: var(--muted);
    pointer-events: none;
    z-index: 1;
}

.ls-input {
    width: 100%;
    height: var(--input-h);
    padding: 0 44px 0 42px;
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font-size: .95rem;
    color: var(--text);
    background: var(--bg);
    outline: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.ls-input::placeholder { color: #94a3b8; }

.ls-input:focus {
    border-color: var(--brand);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(10,91,211,.12);
}

/* Botão olho */
.ls-eye {
    position: absolute;
    right: 0;
    width: 44px;
    height: var(--input-h);
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--muted);
    font-size: 1rem;
    transition: color .15s;
}
.ls-eye:hover { color: var(--brand); }

/* Validação inline */
.ls-validation {
    display: block;
    font-size: .78rem;
    color: #dc2626;
    margin-top: .3rem;
}
.ls-validation:empty { display: none; }

/* ═══════════════════════════════════════════
   BOTÃO ENTRAR
   ═══════════════════════════════════════════ */
.ls-btn {
    width: 100%;
    height: 50px;
    margin-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-3) 100%);
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: filter .2s, transform .08s, box-shadow .2s;
    box-shadow: 0 4px 16px rgba(10,91,211,.28);
    letter-spacing: .1px;
}

.ls-btn:hover  { filter: brightness(1.06); box-shadow: 0 6px 20px rgba(10,91,211,.36); }
.ls-btn:active { transform: translateY(1px); filter: brightness(.97); }
.ls-btn:disabled { opacity: .7; cursor: not-allowed; }

.ls-btn span, .ls-btn i { color: #fff !important; }

[data-btn-label] {
    display: inline-block;
    transition: opacity .15s ease;
}
[data-btn-label].is-hiding { opacity: 0; }

#btnArrow { transition: transform .2s; }
.ls-btn:hover #btnArrow { transform: translateX(3px); }

/* ═══════════════════════════════════════════
   RODAPÉ
   ═══════════════════════════════════════════ */
.ls-footer {
    margin-top: 2.5rem;
    font-size: .75rem;
    color: #94a3b8;
    text-align: center;
}

/* ═══════════════════════════════════════════
   RESPONSIVO — tablet e mobile
   ═══════════════════════════════════════════ */
@media (max-width: 900px) {
    .ls-wrap {
        grid-template-columns: 1fr;
    }
    .ls-brand {
        display: none;
    }
    .ls-form-panel {
        min-height: 100dvh;
        padding: 2rem 1.5rem;
        background: linear-gradient(160deg, #f0f5ff 0%, #fff 60%);
    }
    .ls-mobile-logo {
        display: block;
    }
}

@media (max-width: 480px) {
    .ls-form-inner {
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════════
   LAYOUT CENTRADO (novo Login)
   ═══════════════════════════════════════════ */
body.login-centered {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.lc-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lc-card {
    width: min(420px, 100%);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 8px 32px rgba(2, 6, 23, .08);
    padding: 2.5rem 2.25rem;
}

.lc-logo-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 1.75rem;
}

.lc-logo {
    height: 80px;
    width: auto;
    display: block;
}

.lc-card .ls-form-title,
.lc-card .ls-form-sub {
    text-align: center;
}

/* ═══════════════════════════════════════════
   COMPAT — classes antigas (VerifyCode usa algumas)
   ═══════════════════════════════════════════ */
body.auth {
    background: radial-gradient(900px 480px at 10% 10%, rgba(10,91,211,.18), transparent 75%),
                radial-gradient(700px 400px at 90% 25%, rgba(14,165,233,.18), transparent 75%),
                #f8fafc;
}
.auth-container {
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.auth-card-wrapper {
    display: grid;
    place-items: center;
    padding: clamp(24px, 6vw, 64px);
}
.auth-card {
    width: min(480px, 92vw);
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 20px;
    box-shadow: 0 8px 28px rgba(2,6,23,.08);
}
.auth-card .card-header {
    border-bottom: 0;
    text-align: center;
    padding: 2rem 2rem 0;
    background: #fff;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.auth-card .card-body { padding: 2rem; }
.text-muted-2 { color: var(--muted); }
.brand-logo {
    height: 80px;
    max-width: 100%;
    width: auto;
    display: block;
    object-fit: contain;
}
.brand-badge {
    background: transparent;
    padding: .6rem 1rem;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
}
.btn-brand {
    min-height: 44px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 10px;
    background: linear-gradient(90deg, var(--brand), var(--brand-3));
    color: #fff;
    border: 0;
    box-shadow: 0 4px 14px rgba(10,91,211,.25);
    transition: transform .06s ease, filter .2s ease;
}
.btn-brand:hover  { filter: brightness(1.04); }
.btn-brand:active { transform: translateY(1px); }
.btn-brand span   { color: #fff !important; }