/* ============================================================================
   iBooster Demo Tracker - login, barra lateral e topo
   Mesmo casco do CRM: split screen no acesso, lateral fixa de 248px, topo
   sticky com vidro. Quem trabalha nos dois nao aprende dois produtos.
   ========================================================================== */

/* ---------------- login ---------------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
@media(max-width:900px){.login{grid-template-columns:1fr}}

.login-arte{
  position:relative;overflow:hidden;padding:56px 52px;display:flex;flex-direction:column;
  justify-content:space-between;color:#fff;
  background:linear-gradient(150deg,#0B2472 0%,#1D4ED8 46%,#3AA0E8 100%);
}
@media(max-width:900px){.login-arte{display:none}}
.login-arte::after{
  content:'';position:absolute;inset:0;opacity:.5;
  background:radial-gradient(900px 480px at 88% 8%,rgba(255,255,255,.24),transparent 62%),
             radial-gradient(700px 520px at 4% 100%,rgba(0,0,0,.34),transparent 60%);
}
.login-arte > *{position:relative;z-index:1}
.login-arte h1{font-size:38px;line-height:1.14;font-weight:800;letter-spacing:-.025em;max-width:14ch}
.login-arte p{margin-top:16px;max-width:40ch;font-size:15px;opacity:.9;line-height:1.6}
.login-arte .selo-marca{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.18em;font-size:11px;text-transform:uppercase;opacity:.92}
.login-numeros{display:flex;gap:34px;flex-wrap:wrap}
.login-numeros div span{display:block}
.login-numeros .v{font-size:26px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.login-numeros .k{font-size:11px;text-transform:uppercase;letter-spacing:.12em;opacity:.78;margin-top:3px;font-weight:600}

.login-lado{display:grid;place-items:center;padding:32px 26px;background:var(--surface)}
.login-caixa{width:min(400px,100%);display:grid;gap:16px}
.login-caixa .marca{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.login-caixa h2{font-size:25px;font-weight:800;letter-spacing:-.02em}
.login-caixa .sub{color:var(--ink-3);font-size:14px;margin-top:5px}
.login-rodape{font-size:11.5px;color:var(--ink-4);text-align:center;margin-top:2px}

/* ---------------- casco ---------------- */
.casco{display:grid;grid-template-columns:var(--sidebar) 1fr;min-height:100vh}
@media(max-width:1000px){.casco{grid-template-columns:1fr}}

.lateral{
  background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;gap:6px;padding:14px 12px;
  position:sticky;top:0;height:100vh;z-index:30;
}
@media(max-width:1000px){
  .lateral{position:fixed;inset:0 auto 0 0;width:var(--sidebar);transform:translateX(-100%);
    transition:transform var(--transicao);box-shadow:var(--sombra-3)}
  .lateral.aberta{transform:none}
}
.lateral-marca{display:flex;align-items:center;gap:9px;padding:8px 10px 14px;font-weight:800;letter-spacing:-.02em}
.lateral-marca .logo{width:26px;height:26px;flex:none}
.lateral-marca small{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.11em;
  color:var(--ink-3);font-weight:750;margin-top:1px}
.nav{display:grid;gap:2px}
.nav-grupo{padding:14px 10px 6px}
.nav button{
  display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border-radius:var(--r-sm);
  font-size:13.5px;font-weight:600;color:var(--ink-2);
  transition:background var(--transicao),color var(--transicao);text-align:left;position:relative;
}
.nav svg{width:17px;height:17px;flex:none;stroke-width:1.9}
.nav button:hover{background:var(--surface-3);color:var(--ink)}
.nav button.ativo{background:var(--brand-soft);color:var(--brand);font-weight:700;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--brand) 14%,transparent)}
.nav button.ativo::before{content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);
  width:3px;height:18px;border-radius:0 3px 3px 0;background:var(--brand)}
.nav .conta-badge{margin-left:auto;font-size:10.5px;font-weight:800;padding:1px 7px;border-radius:20px;
  background:var(--surface-3);color:var(--ink-3);min-width:19px;text-align:center}
.nav button.ativo .conta-badge{background:var(--brand);color:#fff}

.lateral-fim{margin-top:auto;display:grid;gap:8px;padding-top:10px;border-top:1px solid var(--line-soft)}
.pulso-coleta{display:flex;align-items:center;gap:9px;padding:9px 10px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--line-soft)}
.pulso-coleta .ponto{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 18%,transparent)}
.pulso-coleta.coletando .ponto{background:var(--warn);animation:pulsa 1.1s infinite}
.pulso-coleta.erro{border-color:var(--brand-line);background:var(--brand-soft)}
.pulso-coleta.erro .ponto{background:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 18%,transparent)}
.pulso-coleta.erro .t{color:var(--brand)}
@keyframes pulsa{0%,100%{opacity:1}50%{opacity:.35}}
.pulso-coleta .t{font-size:11.5px;font-weight:700;line-height:1.25}
.pulso-coleta .d{font-size:10.5px;color:var(--ink-3)}

/* ---------------- topo ---------------- */
.painel{min-width:0;display:flex;flex-direction:column;
  background:radial-gradient(880px 360px at 62% -12%,color-mix(in srgb,var(--brand) 4.5%,transparent),transparent 62%)}
.topo{
  height:var(--topo);display:flex;align-items:center;gap:14px;padding:0 22px;
  background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:25;
}
.topo h1{font-size:16.5px;font-weight:750;letter-spacing:-.015em}
.topo .subt{font-size:12px;color:var(--ink-3);margin-top:1px}
.topo-dir{margin-left:auto;display:flex;align-items:center;gap:8px}
.btn-menu{display:none;padding:7px;border-radius:var(--r-sm)}
@media(max-width:1000px){.btn-menu{display:block}}
.conteudo{padding:20px 22px 48px;max-width:1320px;width:100%;margin:0 auto}
.vista{display:grid;gap:16px}