/* ============================================================
   Insight UP — Design System v3 (dark, moderno, limpo)
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
  --bg:#0a0a0c;
  --surface:#131316;
  --surface-2:#1a1a1e;
  --surface-3:#212126;
  --border:rgba(255,255,255,.07);
  --border-strong:rgba(255,255,255,.14);
  --text:#f3f2ee;
  --text-2:#9a9994;
  --text-3:#605f5c;

  --accent:#6d8cff;
  --accent-soft:rgba(109,140,255,.12);

  --ok:#3ddc9a;
  --ok-soft:rgba(61,220,154,.12);
  --warn:#f5b84c;
  --warn-soft:rgba(245,184,76,.12);
  --danger:#ff6b6b;
  --danger-soft:rgba(255,107,107,.12);

  --compra:#5b9dff;
  --compra-soft:rgba(91,157,255,.12);
  --venda:#33c9b0;
  --venda-soft:rgba(51,201,176,.12);
  --comportamento:#8fd15b;
  --comportamento-soft:rgba(143,209,91,.12);
  --resultado:#f0b429;
  --resultado-soft:rgba(240,180,41,.12);

  --radius-sm:8px;
  --radius:12px;
  --radius-lg:18px;
  --sidebar-w:232px;
}

html{scroll-behavior:smooth}
body{
  min-height:100vh;background:var(--bg);color:var(--text);
  font-family:'Inter','DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  display:flex;
}

/* ---------- layout shell ---------- */
.app-sidebar{
  width:var(--sidebar-w);min-height:100vh;position:fixed;top:0;left:0;z-index:100;
  background:var(--surface);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow-y:auto;
}
.app-main{margin-left:var(--sidebar-w);flex:1;min-width:0}
@media(max-width:960px){
  :root{--sidebar-w:0px}
  .app-sidebar{display:none}
}

/* ---------- sidebar ---------- */
.brand{display:flex;align-items:center;gap:10px;padding:1.35rem 1.15rem;border-bottom:1px solid var(--border)}
.brand-mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(155deg,var(--accent),#a06dff);display:flex;align-items:center;justify-content:center;flex-shrink:0}
.brand-name{font-size:14px;font-weight:600;letter-spacing:-.01em}
.brand-sub{font-size:11px;color:var(--text-3);margin-top:1px}

.nav-group{padding:.9rem .9rem .3rem}
.nav-label{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.09em;padding:0 .4rem .5rem;font-weight:600}
.nav-link{
  display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;margin-bottom:2px;
  color:var(--text-2);text-decoration:none;font-size:13px;font-weight:500;transition:background .15s,color .15s;
}
.nav-link:hover{background:var(--surface-2);color:var(--text)}
.nav-link.active{background:var(--accent-soft);color:var(--accent)}
.nav-ico{width:16px;height:16px;flex-shrink:0;display:flex;align-items:center;justify-content:center;opacity:.9}
.nav-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}

.sidebar-footer{margin-top:auto;padding:.9rem;border-top:1px solid var(--border)}
.status-row{display:flex;align-items:center;gap:7px;padding:5px 4px;font-size:11.5px;color:var(--text-2)}
.status-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
.btn-logout{display:flex;align-items:center;gap:8px;color:var(--text-2);text-decoration:none;font-size:12.5px;padding:8px 10px;border-radius:8px;transition:all .15s;margin-top:6px}
.btn-logout:hover{background:var(--danger-soft);color:var(--danger)}

/* ---------- topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:50;background:rgba(10,10,12,.85);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);padding:1.1rem 1.75rem;
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
}
.page-heading{display:flex;align-items:center;gap:10px}
.page-icon{width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.page-title{font-size:16px;font-weight:600;letter-spacing:-.01em}
.page-sub{font-size:12px;color:var(--text-3);margin-top:1px}

.tb-controls{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
select.ctl,.date-ctl{
  padding:7px 12px;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;
  color:var(--text);font-size:12.5px;font-family:inherit;cursor:pointer;outline:none;
}
select.ctl:hover,.date-ctl:hover{border-color:var(--border-strong)}
.seg{display:flex;gap:3px;background:var(--surface-2);padding:3px;border-radius:9px;border:1px solid var(--border)}
.seg-btn{padding:6px 12px;border-radius:6px;border:none;background:transparent;color:var(--text-2);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;font-family:inherit}
.seg-btn.active{background:var(--accent);color:#fff}
.btn-refresh{
  display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:9px;
  background:var(--accent-soft);color:var(--accent);border:1px solid rgba(109,140,255,.25);
  font-size:12.5px;font-weight:500;cursor:pointer;font-family:inherit;transition:all .15s;
}
.btn-refresh:hover{background:rgba(109,140,255,.2)}

/* ---------- content ---------- */
.content{padding:1.75rem}

.alert-banner{
  background:var(--danger-soft);border:1px solid rgba(255,107,107,.3);border-radius:var(--radius);
  padding:14px 18px;margin-bottom:1.5rem;
}
.alert-banner .t{color:var(--danger);font-weight:600;font-size:13.5px;margin-bottom:6px}
.alert-banner .r{color:var(--text-2);font-size:13px;padding:2px 0}
.alert-banner a{color:var(--accent);text-decoration:none;margin-left:6px}

/* ---------- KPI cards ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;margin-bottom:1.5rem}
.kpi{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px;transition:border-color .15s,transform .15s;position:relative;overflow:hidden;
}
.kpi:hover{border-color:var(--border-strong)}
.kpi::before{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--text-3);opacity:.4}
.kpi.st-ok::before{background:var(--ok)}
.kpi.st-warn::before{background:var(--warn)}
.kpi.st-alert::before{background:var(--danger)}
.kpi.st-pending{opacity:.55}
.kpi-lbl{font-size:11px;color:var(--text-2);margin-bottom:6px;font-weight:500;line-height:1.3}
.kpi-val{font-size:20px;font-weight:600;letter-spacing:-.01em;line-height:1.1}
.kpi-sub{font-size:11px;color:var(--text-3);margin-top:5px;line-height:1.4}
.kpi-desc{font-size:10.5px;color:var(--text-3);margin-top:6px;padding-top:6px;border-top:1px solid var(--border);line-height:1.4}
.kpi-flag{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:600;margin-top:8px;padding:2px 8px;border-radius:20px}
.flag-ok{background:var(--ok-soft);color:var(--ok)}
.flag-warn{background:var(--warn-soft);color:var(--warn)}
.flag-alert{background:var(--danger-soft);color:var(--danger)}
.flag-pend{background:var(--surface-3);color:var(--text-3)}

/* ---------- headline / result cards ---------- */
.headline-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:1.5rem}
@media(max-width:900px){.headline-grid{grid-template-columns:repeat(2,1fr)}}
.headline-card{border-radius:var(--radius-lg);padding:20px 22px;border:1px solid var(--border);background:var(--surface)}
.headline-card.pos{border-color:rgba(61,220,154,.3);background:linear-gradient(160deg,rgba(61,220,154,.07),var(--surface) 60%)}
.headline-card.neg{border-color:rgba(255,107,107,.3);background:linear-gradient(160deg,rgba(255,107,107,.07),var(--surface) 60%)}
.headline-lbl{font-size:11.5px;color:var(--text-2);font-weight:600;text-transform:uppercase;letter-spacing:.06em;margin-bottom:8px}
.headline-val{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1}
.headline-sub{font-size:12px;color:var(--text-3);margin-top:6px}

/* ---------- section header ---------- */
.sec-head{display:flex;align-items:center;gap:10px;margin:2rem 0 1rem}
.sec-head:first-child{margin-top:0}
.sec-label{font-size:12.5px;font-weight:600;display:flex;align-items:center;gap:7px}
.sec-tag{font-size:10.5px;padding:3px 9px;border-radius:20px;font-weight:600}
.sec-line{flex:1;height:1px;background:var(--border)}

/* ---------- charts ---------- */
.chart-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:1.5rem}
@media(max-width:900px){.chart-row{grid-template-columns:1fr}}
.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem 1.2rem}
.chart-ttl{font-size:12px;color:var(--text-2);margin-bottom:1rem;font-weight:500}
.chart-wrap{position:relative;height:190px}

/* ---------- table ---------- */
.tbl-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:1.5rem}
.tbl-head-bar{padding:.9rem 1.2rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.tbl-title{font-size:13px;font-weight:600}
.tbl-count{font-size:11.5px;color:var(--text-3)}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:12px;min-width:640px}
thead th{padding:9px 12px;text-align:left;font-size:10px;color:var(--text-3);border-bottom:1px solid var(--border);white-space:nowrap;font-weight:600;text-transform:uppercase;letter-spacing:.04em;background:var(--surface-2)}
tbody td{padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.03);white-space:nowrap;color:var(--text)}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--surface-2)}
.tag{font-size:10px;font-weight:600;padding:2px 8px;border-radius:20px;display:inline-block;white-space:nowrap}
.tag-ok{background:var(--ok-soft);color:var(--ok)}
.tag-alert{background:var(--danger-soft);color:var(--danger)}
.tag-warn{background:var(--warn-soft);color:var(--warn)}
.tag-pend{background:var(--surface-3);color:var(--text-3)}

.empty{text-align:center;padding:2.5rem 1rem;color:var(--text-3);font-size:12.5px}
.note-pill{font-size:11px;color:var(--text-2);padding:6px 12px;background:var(--surface-2);border-radius:8px;border:1px solid var(--border);display:inline-block;margin-bottom:1rem}
.divider{height:1px;background:var(--border);margin:1.75rem 0}

/* ---------- misc ---------- */
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--surface-3);border-radius:20px}
::-webkit-scrollbar-thumb:hover{background:var(--border-strong)}