/* Login — mesmo desenho do Aguativa CRM One */
:root { --azul: #2563eb; --azul-esc: #1d4ed8; --txt: #0f172a; --muted: #64748b; --borda: #e2e8f0; --campo: #f8fafc; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; color: var(--txt); background: #fff; }

.lg { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 100vh; }

.lg-brand { position: relative; overflow: hidden; color: #fff; display: flex; flex-direction: column; justify-content: space-between; padding: 3rem 3.5rem;
    background: radial-gradient(900px 500px at 0% 0%, rgba(6,182,212,.35), transparent 60%), radial-gradient(800px 600px at 100% 100%, rgba(99,102,241,.45), transparent 60%), linear-gradient(155deg, #0b1b3a 0%, #0f2a5c 55%, #12337a 100%); }
.lg-brand::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
    background-size: 48px 48px; mask-image: radial-gradient(circle at 30% 30%, #000, transparent 75%); -webkit-mask-image: radial-gradient(circle at 30% 30%, #000, transparent 75%); }
.lg-brand > * { position: relative; }
.lg-logo { display: flex; align-items: center; gap: .8rem; }
.lg-logo .ic { width: 52px; height: 52px; border-radius: 14px; background: #fff; border: 1px solid rgba(255,255,255,.35); display: flex; align-items: center; justify-content: center; padding: 6px; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.lg-logo .ic img { width: 100%; height: 100%; object-fit: contain; }
.lg-logo strong { font-size: 1.15rem; letter-spacing: -.01em; }
.lg-logo span { display: block; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; opacity: .7; margin-top: 1px; }
.lg-hero h1 { font-size: clamp(1.9rem, 3.2vw, 2.9rem); line-height: 1.12; font-weight: 800; letter-spacing: -.03em; margin: 0 0 1rem; }
.lg-hero h1 em { font-style: normal; background: linear-gradient(90deg, #67e8f9, #a5b4fc); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lg-hero p { max-width: 460px; font-size: 1rem; line-height: 1.6; opacity: .78; margin: 0 0 2rem; }
.lg-feat { display: grid; gap: .85rem; max-width: 480px; }
.lg-feat div { display: flex; align-items: center; gap: .85rem; padding: .75rem 1rem; border-radius: 14px; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(6px); font-size: .9rem; }
.lg-feat i { width: 34px; height: 34px; flex: none; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #38bdf8, #6366f1); font-size: .85rem; }
.lg-feat b { display: block; font-weight: 700; }
.lg-feat small { opacity: .7; font-size: .76rem; }
.lg-rodape { font-size: .74rem; opacity: .55; }

.lg-form { display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem; background: #fff; }
.lg-box { width: 100%; max-width: 400px; animation: surge .5s ease both; }
@keyframes surge { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.lg-mobile-logo { display: none; align-items: center; gap: .6rem; margin-bottom: 1.6rem; font-weight: 800; }
.lg-mobile-logo img { width: 38px; height: 38px; object-fit: contain; }
.lg-box h2 { font-size: 1.7rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 .35rem; }
.lg-box .sub { color: var(--muted); font-size: .92rem; margin-bottom: 1.8rem; }

.alerta { display: flex; gap: .6rem; align-items: flex-start; background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; border-radius: 12px; padding: .8rem 1rem; font-size: .84rem; margin-bottom: 1.1rem; }
.alerta.ok { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }

.campo { margin-bottom: 1.1rem; }
.campo label.l { display: block; font-size: .78rem; font-weight: 700; color: #334155; margin-bottom: .4rem; }
.campo .in { position: relative; }
.campo .in > i.ic { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: .9rem; transition: color .2s; pointer-events: none; }
.campo input { width: 100%; height: 50px; padding: 0 2.9rem 0 2.8rem; border: 1.5px solid var(--borda); background: var(--campo); border-radius: 12px; font-size: .95rem; color: var(--txt); outline: none; transition: border-color .2s, box-shadow .2s, background .2s; }
.campo input:focus { border-color: var(--azul); background: #fff; box-shadow: 0 0 0 4px rgba(37,99,235,.12); }
.campo .in:focus-within > i.ic { color: var(--azul); }
.campo .ver { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border: 0; background: none; color: #94a3b8; border-radius: 8px; cursor: pointer; }
.campo .ver:hover { color: var(--azul); background: #eff6ff; }
.dica { display: block; color: #94a3b8; font-size: .76rem; margin-top: .3rem; }
.caps { display: none; align-items: center; gap: .4rem; color: #b45309; font-size: .76rem; margin-top: .35rem; }

.btn-entrar { width: 100%; height: 52px; margin-top: .6rem; border: 0; border-radius: 12px; color: #fff; font-weight: 700; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: .6rem;
    background: linear-gradient(135deg, var(--azul), #4f46e5); box-shadow: 0 10px 24px rgba(37,99,235,.32); transition: transform .15s, box-shadow .2s, filter .2s; }
.btn-entrar:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(37,99,235,.4); filter: brightness(1.05); }
.btn-entrar:disabled { opacity: .7; cursor: wait; }
.seguro { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: 1.6rem; color: #94a3b8; font-size: .76rem; }
.seguro i { color: #22c55e; }

@media (max-width: 991.98px) {
    .lg { grid-template-columns: 1fr; }
    .lg-brand { display: none; }
    .lg-mobile-logo { display: flex; }
    .lg-form { align-items: flex-start; padding-top: 12vh; background: linear-gradient(180deg, #eff6ff 0%, #fff 40%); }
}
@media (max-width: 420px) { .lg-form { padding: 10vh 1.1rem 2rem; } .lg-box h2 { font-size: 1.5rem; } }

/* ── Tema escuro ── */
html[data-theme="dark"] { background: #fff; filter: invert(.92) hue-rotate(180deg); }
html[data-theme="dark"] img, html[data-theme="dark"] .lg-brand, html[data-theme="dark"] .btn-entrar { filter: invert(1) hue-rotate(180deg); }
.tema-login { position: fixed; top: 1rem; right: 1rem; z-index: 20; border: 1.5px solid var(--borda); background: #fff; width: 42px; height: 42px; border-radius: 12px; color: #475569; cursor: pointer; }
.tema-login:hover { color: var(--azul); background: #eff6ff; }
.tema-login .fa-sun { display: none; }
html[data-theme="dark"] .tema-login .fa-sun { display: inline; }
html[data-theme="dark"] .tema-login .fa-moon { display: none; }
.lembrar { display: flex; align-items: center; gap: .55rem; font-size: .85rem; color: #475569; margin: .2rem 0 1.2rem; cursor: pointer; user-select: none; }
.lembrar input { width: 17px; height: 17px; accent-color: var(--azul); cursor: pointer; }