/* ═══════════════════════════════════════════════════════════════
   +TOP DASHBOARD · v2-c · "Operations Room"
   Analítico denso · IBM Plex Sans/Mono · paleta osso + tinta.
   Marca +TOP intacta como acento (Verde #33AF47 · Laranja #F37021).
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Sans+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
  /* ── marca +TOP (canônico — intocado) ─────────────────────── */
  --top-green:        #33AF47;
  --top-green-dk:     #1F8C36;
  --top-green-lt:     #DCEEDF;
  --top-orange:       #F37021;
  --top-orange-dk:    #C25613;
  --top-orange-lt:    #FBE5D2;
  --top-red:          #EB5E28;
  --top-gray:         #2D2D2D;
  --top-gray-2:       #4A4A4A;

  /* ── osso & tinta ──────────────────────────────────────────── */
  --bone:             #F1F2EE;
  --bone-2:           #E8EAE5;
  --bone-3:           #DCDED7;
  --surface:          #FFFFFF;
  --surface-2:        #F7F8F4;
  --surface-3:        #EDEEEA;

  --ink:              #0F1115;
  --ink-2:            #2A2E33;
  --ink-3:            #565B61;
  --ink-dim:          #7B8088;
  --ink-mute:         #A4A8AE;

  --rule:             #DBDDD6;
  --rule-2:           #E5E7E1;
  --rule-3:           #C4C7BF;
  --rule-strong:      #1F2228;

  /* ── status (sóbrios, mas legíveis) ────────────────────────── */
  --ok:               #1F8348;
  --ok-bg:            #E5F1E9;
  --warn:             #B16A12;
  --warn-bg:          #FBEFD8;
  --bad:              #B0392B;
  --bad-bg:           #F9E2DD;
  --info:             #2660A6;
  --info-bg:          #E0EAF7;

  /* ── radius / sombras ──────────────────────────────────────── */
  --r-sm:             3px;
  --r:                4px;
  --r-lg:             6px;
  --sh-sm:            0 1px 0 rgba(15,17,21,.04);
  --sh:               0 1px 2px rgba(15,17,21,.05), 0 2px 6px rgba(15,17,21,.04);
  --sh-lg:            0 4px 14px rgba(15,17,21,.08), 0 1px 3px rgba(15,17,21,.05);

  /* ── font stacks ───────────────────────────────────────────── */
  --f-body:           'IBM Plex Sans', 'Helvetica Neue', sans-serif;
  --f-cond:           'IBM Plex Sans Condensed', 'IBM Plex Sans', sans-serif;
  --f-mono:           'IBM Plex Mono', 'SF Mono', monospace;

  /* ── compat shim (inline legados) ──────────────────────────── */
  --bg:               var(--bone);
  --bg-2:             var(--bone-2);
  --text:             var(--ink);
  --text-2:           var(--ink-2);
  --text-dim:         var(--ink-dim);
  --muted:            var(--ink-mute);
  --line:             var(--rule);
  --line-str:         var(--rule-3);
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAIS
   ═══════════════════════════════════════════════════════════════ */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{background:var(--bone)}
body{
  font-family:var(--f-body);
  color:var(--ink);
  background:var(--bone);
  font-size:13.5px;
  line-height:1.5;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:'ss03','cv02','zero','tnum';
  letter-spacing:-.005em;
}
a{color:inherit;text-decoration:none}
::selection{background:var(--ink);color:var(--bone)}
button{font-family:inherit;color:inherit}
input,select,textarea{font-family:inherit}

/* ═══════════════════════════════════════════════════════════════
   SHELL
   ═══════════════════════════════════════════════════════════════ */
.app{display:grid;grid-template-columns:240px 1fr;min-height:100vh}

/* ── sidebar ── */
.sidebar{
  background:var(--surface);
  border-right:1px solid var(--rule);
  position:sticky;top:0;height:100vh;
  display:flex;flex-direction:column;
}
.sidebar .brand{
  padding:18px 20px;border-bottom:1px solid var(--rule);
  display:flex;align-items:center;gap:12px;
  position:relative;
}
.sidebar .brand .logo{
  width:38px;height:38px;flex-shrink:0;border-radius:var(--r-sm);
  background:var(--bone);border:1px solid var(--rule-3);
  display:flex;align-items:center;justify-content:center;
  position:relative;
}
.sidebar .brand .logo::before,
.sidebar .brand .logo::after{
  content:'';position:absolute;border-radius:1px;
}
.sidebar .brand .logo::before{
  width:18px;height:5px;background:var(--top-orange);
}
.sidebar .brand .logo::after{
  width:5px;height:18px;background:var(--top-green);
}
.sidebar .brand .name{
  font-family:var(--f-body);
  font-weight:700;font-size:15.5px;color:var(--ink);
  letter-spacing:-.015em;line-height:1;
}
.sidebar .brand .name small{
  display:block;
  font-family:var(--f-mono);font-size:9.5px;
  color:var(--ink-dim);font-weight:500;letter-spacing:.18em;
  margin-top:5px;text-transform:uppercase;
}

.sidebar .section-lbl{
  padding:18px 20px 8px;
  font-size:9.5px;font-weight:500;font-family:var(--f-mono);
  letter-spacing:.2em;color:var(--ink-dim);text-transform:uppercase;
}
.sidebar nav{display:flex;flex-direction:column;gap:1px;flex:1;overflow-y:auto;padding-bottom:10px}
.sidebar nav a{
  display:flex;align-items:center;gap:11px;
  padding:8px 20px;font-weight:500;font-size:13px;
  color:var(--ink-2);
  transition:background .12s, color .12s;
  position:relative;
  border-left:2px solid transparent;
}
.sidebar nav a .ic{
  font-family:var(--f-mono);font-size:10px;
  width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--bone);border:1px solid var(--rule);border-radius:var(--r-sm);
  color:var(--ink-3);font-weight:500;flex-shrink:0;letter-spacing:0;
}
.sidebar nav a:hover{
  background:var(--surface-2);color:var(--ink);
}
.sidebar nav a:hover .ic{
  border-color:var(--rule-3);color:var(--top-green-dk);
}
.sidebar nav a.active{
  color:var(--ink);font-weight:600;
  background:var(--surface-2);
  border-left-color:var(--top-orange);
}
.sidebar nav a.active .ic{
  background:var(--top-orange);border-color:var(--top-orange-dk);color:#fff;
}

.sidebar .foot{
  padding:14px 20px;border-top:1px solid var(--rule);
  font-size:10.5px;color:var(--ink-3);font-family:var(--f-mono);
  display:flex;align-items:center;gap:8px;letter-spacing:.04em;
  background:var(--surface-2);
}
.sidebar .foot .dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--ok);
  box-shadow:0 0 0 3px rgba(31,131,72,.15);
}

/* ── main ── */
.main{display:flex;flex-direction:column;min-width:0}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 24px;background:var(--surface);
  border-bottom:1px solid var(--rule);
  position:sticky;top:0;z-index:20;
  gap:18px;min-height:62px;
}
.topbar .crumbs{
  font-family:var(--f-mono);
  font-size:10px;color:var(--ink-dim);
  font-weight:500;letter-spacing:.16em;text-transform:uppercase;
}
.topbar h1{
  font-family:var(--f-body);
  font-size:18px;font-weight:600;margin-top:3px;
  color:var(--ink);letter-spacing:-.02em;
  line-height:1.1;
}
.topbar h1 .ac{color:var(--ink-3);font-weight:500}
.topbar h1 .ac::before{
  content:'·';margin:0 6px;color:var(--ink-mute);font-weight:400;
}
.topbar .right{display:flex;align-items:center;gap:10px}
.topbar .search{
  background:var(--bone);border:1px solid var(--rule);
  color:var(--ink);border-radius:var(--r-sm);
  padding:7px 12px 7px 32px;width:280px;font-size:12.5px;outline:none;
  font-family:var(--f-body);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 24 24' fill='none' stroke='%237B8088' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
  background-repeat:no-repeat;background-position:11px center;
  transition:border-color .15s, background-color .15s, box-shadow .15s;
}
.topbar .search::placeholder{color:var(--ink-mute)}
.topbar .search:focus{
  border-color:var(--top-green-dk);background-color:var(--surface);
  box-shadow:0 0 0 3px rgba(31,140,54,.12);
}
.topbar .avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-body);font-weight:600;font-size:12px;
  cursor:pointer;letter-spacing:-.01em;
}
.topbar .logout{
  font-family:var(--f-mono);font-size:10px;
  color:var(--ink-dim);font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;padding:6px 4px;
}
.topbar .logout:hover{color:var(--top-red)}

.topbar .sync-pill{
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--f-mono);font-size:10px;
  color:var(--ink-3);letter-spacing:.06em;
  border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:5px 10px;background:var(--surface-2);
}
.topbar .sync-pill::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--ok);
}
.topbar .sync-pill b{color:var(--ink);font-weight:600;letter-spacing:0}

.content{padding:20px 24px 60px;max-width:1500px;width:100%}

/* ═══════════════════════════════════════════════════════════════
   FILTROS
   ═══════════════════════════════════════════════════════════════ */
.filters{
  display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-bottom:18px;padding:10px 14px;
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r);box-shadow:var(--sh-sm);
}
.filters .lbl{
  font-family:var(--f-mono);
  font-size:9.5px;color:var(--ink-dim);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;margin-left:4px;
}
.filters select,.filters input[type="date"]{
  background:var(--bone);border:1px solid var(--rule);
  color:var(--ink);border-radius:var(--r-sm);
  padding:6px 28px 6px 10px;
  font-family:var(--f-body);font-size:12.5px;font-weight:500;
  outline:none;min-width:130px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%230F1115' stroke-width='2.4' stroke-linecap='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 8px center;
}
.filters select:hover,.filters input[type="date"]:hover{border-color:var(--rule-3);background-color:var(--surface)}
.filters select:focus,.filters input[type="date"]:focus{
  border-color:var(--top-green-dk);box-shadow:0 0 0 3px rgba(31,140,54,.12);background-color:var(--surface);
}

/* ═══════════════════════════════════════════════════════════════
   BOTÕES
   ═══════════════════════════════════════════════════════════════ */
.btn{
  padding:7px 14px;border:1px solid transparent;border-radius:var(--r-sm);
  cursor:pointer;font-weight:600;font-size:12px;letter-spacing:.005em;
  font-family:var(--f-body);
  display:inline-flex;align-items:center;gap:6px;transition:all .12s;
  background:transparent;
}
.btn.primary{
  background:var(--ink);color:#fff;border-color:var(--ink);
}
.btn.primary:hover{
  background:var(--ink-2);border-color:var(--ink-2);
}
.btn.warning{
  background:var(--top-orange);color:#fff;border-color:var(--top-orange-dk);
}
.btn.warning:hover{background:var(--top-orange-dk);border-color:var(--top-orange-dk)}
.btn.ghost{
  background:var(--surface);color:var(--ink);border-color:var(--rule);
}
.btn.ghost:hover{
  background:var(--surface-2);border-color:var(--rule-3);
}
.btn.sm{padding:5px 10px;font-size:11px}

/* ═══════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════ */
.hero{
  position:relative;overflow:hidden;margin-bottom:18px;
  background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r);
  padding:18px 22px;display:flex;align-items:center;justify-content:space-between;
  gap:24px;box-shadow:var(--sh-sm);
}
.hero::before{
  content:'';position:absolute;top:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,
    var(--top-green) 0%,var(--top-green) 22%,
    var(--ink) 22%,var(--ink) 78%,
    var(--top-orange) 78%,var(--top-orange) 100%);
}
.hero h2{
  font-family:var(--f-body);
  font-size:22px;font-weight:600;color:var(--ink);
  letter-spacing:-.022em;line-height:1.15;
}
.hero h2 .hl{color:var(--top-green-dk)}
.hero h2 .hl-o{color:var(--top-orange)}
.hero p{
  font-size:13px;color:var(--ink-3);margin-top:6px;font-weight:400;
  max-width:62ch;line-height:1.5;
}
.hero p b{font-weight:600;color:var(--ink)}
.hero .tag{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--bone);color:var(--ink);
  font-family:var(--f-mono);
  font-size:10px;font-weight:500;padding:4px 10px;
  letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--rule-3);border-radius:var(--r-sm);
  margin-bottom:10px;
}
.hero .tag::before{
  content:'';width:6px;height:6px;border-radius:50%;
  background:var(--top-orange);
}
.hero-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;flex-shrink:0}

/* ═══════════════════════════════════════════════════════════════
   KPI
   ═══════════════════════════════════════════════════════════════ */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.kpi-grid.cols-3{grid-template-columns:repeat(3,1fr)}
.kpi-grid.cols-5{grid-template-columns:repeat(5,1fr)}
.kpi-grid.cols-6{grid-template-columns:repeat(6,1fr)}

.kpi{
  background:var(--surface);
  border:1px solid var(--rule);
  border-radius:var(--r);
  padding:14px 16px;position:relative;
  overflow:hidden;transition:border-color .15s, box-shadow .15s;
  box-shadow:var(--sh-sm);
}
.kpi::before{
  content:'';position:absolute;top:0;left:0;width:100%;height:2px;
  background:var(--top-green);
}
.kpi.orange::before{background:var(--top-orange)}
.kpi.gray::before{background:var(--ink)}
.kpi.red::before{background:var(--top-red)}
.kpi:hover{
  border-color:var(--rule-3);box-shadow:var(--sh);
}
.kpi .label{
  font-family:var(--f-mono);
  font-size:9.5px;color:var(--ink-dim);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  display:block;line-height:1.3;
}
.kpi .val{
  font-family:var(--f-body);
  font-size:26px;font-weight:600;color:var(--ink);
  margin-top:8px;line-height:1.05;letter-spacing:-.025em;
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:'tnum','zero';
}
.kpi .val .u{
  font-family:var(--f-mono);
  font-size:11px;color:var(--ink-dim);margin-left:5px;
  font-weight:500;letter-spacing:.04em;
}
.kpi .delta,.kpi .sub{
  font-size:11.5px;margin-top:8px;font-weight:500;
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-body);color:var(--ink-3);
}
.kpi .delta.up{color:var(--ok)}
.kpi .delta.down{color:var(--bad)}
.kpi .delta.up::before{content:'▲';font-size:8px}
.kpi .delta.down::before{content:'▼';font-size:8px}
.kpi .sub{color:var(--ink-3);font-weight:400}
.kpi .sub b{font-weight:600;color:var(--ink);font-family:var(--f-mono);font-size:11.5px}

/* triple variation pills (LM / L3M / YoY) */
.kpi-vars{
  display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;
}
.kpi-vars .v{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-mono);
  font-size:10.5px;font-weight:500;padding:2px 8px;
  background:var(--bone);color:var(--ink-2);
  border:1px solid var(--rule);border-radius:var(--r-sm);
  font-variant-numeric:tabular-nums;
  letter-spacing:0;
}
.kpi-vars .v .lbl{
  font-size:9px;font-weight:600;color:var(--ink-dim);
  letter-spacing:.14em;text-transform:uppercase;
}
.kpi-vars .v.up{color:var(--ok);background:var(--ok-bg);border-color:#C5E0CE}
.kpi-vars .v.up .lbl{color:var(--ok);opacity:.8}
.kpi-vars .v.down{color:var(--bad);background:var(--bad-bg);border-color:#EBCDC5}
.kpi-vars .v.down .lbl{color:var(--bad);opacity:.8}
.kpi-vars .v.up::after{content:'▲';font-size:7px}
.kpi-vars .v.down::after{content:'▼';font-size:7px}

/* inline triple variation for table cells */
.var-cell{
  display:inline-flex;align-items:center;gap:3px;
  font-family:var(--f-mono);
  font-size:11.5px;font-weight:500;font-variant-numeric:tabular-nums;
  letter-spacing:0;
}
.var-cell.up{color:var(--ok)}
.var-cell.down{color:var(--bad)}
.var-cell.up::before{content:'▲';font-size:7px}
.var-cell.down::before{content:'▼';font-size:7px}

/* ═══════════════════════════════════════════════════════════════
   GRID / PANEL
   ═══════════════════════════════════════════════════════════════ */
.grid-2{display:grid;grid-template-columns:2fr 1fr;gap:12px;margin-bottom:18px}
.grid-2.even{grid-template-columns:1fr 1fr}
.grid-2.rev{grid-template-columns:1fr 2fr}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-bottom:18px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:18px}

.panel{
  background:var(--surface);border:1px solid var(--rule);
  border-radius:var(--r);padding:16px 18px;position:relative;
  margin-bottom:12px;box-shadow:var(--sh-sm);
}
.panel.tight{padding:12px 14px}
.panel h3{
  font-family:var(--f-body);
  font-size:13px;font-weight:600;color:var(--ink);
  margin-bottom:14px;letter-spacing:-.012em;
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  line-height:1.2;
  padding-bottom:10px;border-bottom:1px solid var(--rule-2);
}
.panel h3 .mini{
  font-family:var(--f-mono);font-size:10px;color:var(--ink-dim);
  font-weight:500;letter-spacing:.06em;
}
.panel h3 a{
  font-family:var(--f-mono);
  font-size:10px;color:var(--ink-2);font-weight:500;letter-spacing:.1em;
  display:inline-flex;align-items:center;gap:4px;text-transform:uppercase;
  border:1px solid var(--rule);border-radius:var(--r-sm);
  padding:3px 8px;background:var(--bone);
  transition:all .12s;
}
.panel h3 a:hover{
  background:var(--top-orange);color:#fff;border-color:var(--top-orange-dk);
}
.panel-actions{display:flex;gap:6px;align-items:center}

/* ═══════════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════════ */
.tabs{
  display:flex;gap:0;padding:0;background:transparent;
  border:none;border-bottom:1px solid var(--rule);
  margin-bottom:18px;width:100%;
}
.tabs button{
  background:transparent;border:none;cursor:pointer;
  padding:9px 18px 11px;
  font-family:var(--f-body);
  font-size:13px;font-weight:500;color:var(--ink-dim);
  letter-spacing:-.005em;transition:color .12s, border-color .12s;
  position:relative;
  border-bottom:2px solid transparent;margin-bottom:-1px;
}
.tabs button:hover{color:var(--ink)}
.tabs button.active{
  color:var(--ink);font-weight:600;
  border-bottom-color:var(--top-orange);
}

.tab-content{display:none}
.tab-content.active{display:block}

/* ═══════════════════════════════════════════════════════════════
   TABELA
   ═══════════════════════════════════════════════════════════════ */
table{
  width:100%;border-collapse:collapse;font-size:12.5px;
  font-family:var(--f-body);
}
th{
  font-family:var(--f-mono);
  font-size:9.5px;font-weight:500;color:var(--ink-dim);
  text-transform:uppercase;letter-spacing:.18em;
  padding:9px 12px;text-align:left;
  background:var(--bone);
  border-bottom:1px solid var(--rule);
  border-top:1px solid var(--rule);
  white-space:nowrap;
}
td{
  padding:9px 12px;
  border-bottom:1px solid var(--rule-2);
  color:var(--ink-2);vertical-align:middle;
}
tbody tr:last-child td{border-bottom:1px solid var(--rule)}
td b{font-weight:600;color:var(--ink)}
tbody tr{transition:background .1s}
tbody tr:hover td{background:var(--surface-2)}
.tbl-row-link{cursor:pointer}
.tbl-row-link:hover td{background:var(--top-orange-lt)}
.txt-num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;text-align:right;letter-spacing:0;font-weight:500}
.txt-c{text-align:center}

/* ═══════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════ */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  font-family:var(--f-mono);
  font-size:9.5px;font-weight:500;
  padding:2px 8px;letter-spacing:.12em;
  text-transform:uppercase;border-radius:var(--r-sm);
  border:1px solid transparent;
}
.badge::before{
  content:'';width:5px;height:5px;border-radius:50%;background:currentColor;
}
.badge.ok{background:var(--ok-bg);color:var(--ok);border-color:#C5E0CE}
.badge.warn{background:var(--warn-bg);color:var(--warn);border-color:#ECD2A1}
.badge.bad{background:var(--bad-bg);color:var(--bad);border-color:#EBCDC5}
.badge.info{background:var(--info-bg);color:var(--info);border-color:#C2D5EE}
.badge.neutral{background:var(--bone);color:var(--ink-3);border-color:var(--rule)}
.badge.green{background:var(--top-green-lt);color:var(--top-green-dk);border-color:#B8DABE}
.badge.orange{background:var(--top-orange-lt);color:var(--top-orange-dk);border-color:#F1C8A2}

/* ═══════════════════════════════════════════════════════════════
   BARS / PROGRESS
   ═══════════════════════════════════════════════════════════════ */
.bar{
  height:8px;background:var(--bone-2);border-radius:var(--r-sm);overflow:hidden;
  position:relative;border:1px solid var(--rule);
}
.bar > span{
  display:block;height:100%;
  background:linear-gradient(90deg,var(--top-green),var(--top-green-dk));
  border-radius:1px;
}
.bar.orange > span{background:linear-gradient(90deg,var(--top-orange),var(--top-orange-dk))}

/* ═══════════════════════════════════════════════════════════════
   FUNNEL
   ═══════════════════════════════════════════════════════════════ */
.funnel{display:flex;flex-direction:column;gap:6px}
.funnel .step{
  background:var(--bone);
  border:1px solid var(--rule);
  border-left:3px solid var(--top-green);
  border-radius:var(--r-sm);
  padding:11px 14px;
  display:flex;justify-content:space-between;align-items:center;gap:14px;
  transition:background .12s, border-color .12s;
}
.funnel .step:hover{
  background:var(--surface-2);border-color:var(--rule-3);
}
.funnel .step.s2{border-left-color:var(--top-orange)}
.funnel .step.s3{border-left-color:var(--top-red)}
.funnel .step .t{
  font-family:var(--f-body);
  font-weight:600;font-size:13px;color:var(--ink);letter-spacing:-.005em;
}
.funnel .step .r{
  font-family:var(--f-mono);
  font-size:10px;color:var(--ink-dim);margin-top:2px;
  font-weight:500;letter-spacing:.08em;text-transform:uppercase;
}
.funnel .step .n{
  font-family:var(--f-body);
  font-size:20px;font-weight:600;color:var(--top-green-dk);
  letter-spacing:-.025em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.funnel .step.s2 .n{color:var(--top-orange-dk)}
.funnel .step.s3 .n{color:var(--top-red)}

/* ═══════════════════════════════════════════════════════════════
   PILL / DETAIL HEAD
   ═══════════════════════════════════════════════════════════════ */
.detail-head{
  display:flex;gap:18px;align-items:center;
  margin-bottom:18px;padding:16px 20px;
  background:var(--surface);border:1px solid var(--rule);
  border-left:3px solid var(--top-green);
  border-radius:var(--r);box-shadow:var(--sh-sm);
}
.detail-head .av{
  width:60px;height:60px;flex-shrink:0;border-radius:var(--r);
  background:var(--ink);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-body);font-weight:600;
  font-size:22px;letter-spacing:-.03em;
}
.detail-head .av.orange{background:var(--top-orange)}
.detail-head h2{
  font-family:var(--f-body);
  font-size:22px;font-weight:600;color:var(--ink);
  letter-spacing:-.025em;line-height:1.1;
}
.detail-head p{
  font-family:var(--f-body);
  font-size:13px;color:var(--ink-3);margin-top:4px;font-weight:400;
}
.detail-head .actions{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}

.pill-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px}
.pill{
  background:var(--surface);border:1px solid var(--rule);
  color:var(--ink-2);border-radius:var(--r-sm);
  font-family:var(--f-body);
  font-size:11.5px;font-weight:500;padding:5px 11px;
  display:inline-flex;align-items:baseline;gap:5px;
}
.pill b{
  color:var(--ink);font-weight:600;
  font-family:var(--f-mono);font-size:11.5px;
}

/* back link */
.back-link{
  font-family:var(--f-mono);
  font-size:10.5px;color:var(--ink-2);font-weight:500;letter-spacing:.1em;
  display:inline-flex;align-items:center;gap:5px;margin-bottom:10px;
  text-transform:uppercase;
  padding:4px 10px;background:var(--bone);
  border:1px solid var(--rule);border-radius:var(--r-sm);
  transition:all .12s;
}
.back-link:hover{
  background:var(--ink);color:#fff;border-color:var(--ink);
}

/* ═══════════════════════════════════════════════════════════════
   ALERTAS
   ═══════════════════════════════════════════════════════════════ */
.alert{
  padding:11px 14px;font-size:12.5px;border-radius:var(--r-sm);
  display:flex;gap:10px;align-items:flex-start;margin-bottom:12px;
  border:1px solid;border-left-width:3px;
  font-family:var(--f-body);font-weight:400;
  line-height:1.5;
}
.alert .icn{
  flex-shrink:0;width:18px;height:18px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:600;color:#fff;
  font-family:var(--f-mono);
  margin-top:1px;
}
.alert b{font-weight:600;color:var(--ink)}
.alert.warn{background:var(--warn-bg);border-color:#ECD2A1;border-left-color:var(--warn);color:var(--ink-2)}
.alert.warn .icn{background:var(--warn)}
.alert.info{background:var(--info-bg);border-color:#C2D5EE;border-left-color:var(--info);color:var(--ink-2)}
.alert.info .icn{background:var(--info)}
.alert.bad{background:var(--bad-bg);border-color:#EBCDC5;border-left-color:var(--bad);color:var(--ink-2)}
.alert.bad .icn{background:var(--bad)}
.alert.ok{background:var(--ok-bg);border-color:#C5E0CE;border-left-color:var(--ok);color:var(--ink-2)}
.alert.ok .icn{background:var(--ok)}

/* ═══════════════════════════════════════════════════════════════
   CHARTS
   ═══════════════════════════════════════════════════════════════ */
.chart-wrap{position:relative;width:100%;height:280px}
.chart-wrap.lg{height:340px}
.chart-wrap.sm{height:220px}
.chart-wrap > canvas{position:absolute!important;inset:0;width:100%!important;height:100%!important}

/* ═══════════════════════════════════════════════════════════════
   HEATMAP
   ═══════════════════════════════════════════════════════════════ */
.heatmap{display:grid;gap:2px;font-size:10px}
.heatmap .cell{
  aspect-ratio:1;background:var(--bone-2);
  border-radius:2px;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);
  font-weight:500;color:var(--ink-3);
  letter-spacing:0;
}
.heatmap .cell.l1{background:var(--top-green-lt);color:var(--top-green-dk)}
.heatmap .cell.l2{background:#BFE2C5;color:var(--top-green-dk)}
.heatmap .cell.l3{background:#7DCB85;color:#fff}
.heatmap .cell.l4{background:var(--top-green);color:#fff}
.heatmap .cell.l5{background:var(--top-green-dk);color:#fff}
.heatmap .lbl{
  font-family:var(--f-mono);font-size:9.5px;color:var(--ink-dim);
  font-weight:500;text-align:center;letter-spacing:.04em;
}

/* ═══════════════════════════════════════════════════════════════
   LEGEND
   ═══════════════════════════════════════════════════════════════ */
.legend{
  display:flex;gap:14px;flex-wrap:wrap;
  font-family:var(--f-mono);
  font-size:10px;color:var(--ink-2);
  font-weight:500;letter-spacing:.08em;text-transform:uppercase;
}
.legend .it{display:inline-flex;align-items:center;gap:6px}
.legend .it::before{content:'';width:10px;height:2px;background:var(--top-green)}
.legend .it.orange::before{background:var(--top-orange)}
.legend .it.gray::before{background:var(--ink)}
.legend .it.red::before{background:var(--top-red)}

/* ═══════════════════════════════════════════════════════════════
   SECTION TITLE
   ═══════════════════════════════════════════════════════════════ */
.section-title{
  display:flex;align-items:baseline;gap:10px;
  margin:16px 0 12px;
}
.section-title h2{
  font-family:var(--f-body);
  font-size:15px;font-weight:600;color:var(--ink);
  letter-spacing:-.018em;line-height:1.1;
  display:flex;align-items:baseline;gap:10px;
}
.section-title h2::before{
  content:'';width:4px;height:14px;background:var(--top-orange);
  display:inline-block;align-self:center;
}
.section-title .mini{
  font-family:var(--f-mono);
  font-size:10px;color:var(--ink-dim);font-weight:500;
  letter-spacing:.08em;
}

/* ═══════════════════════════════════════════════════════════════
   LOGIN
   ═══════════════════════════════════════════════════════════════ */
.login-wrap{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:
    linear-gradient(180deg,var(--bone) 0%,var(--bone-2) 100%);
  padding:20px;position:relative;
}
.login-wrap::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--rule-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule-2) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity:.6;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%);
  mask-image:radial-gradient(ellipse 60% 60% at 50% 50%, #000 30%, transparent 80%);
}
.login-card{
  width:100%;max-width:420px;padding:36px 36px 28px;
  background:var(--surface);
  border:1px solid var(--rule);border-radius:var(--r);
  box-shadow:var(--sh-lg);position:relative;z-index:1;
}
.login-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(90deg,
    var(--top-green) 0%,var(--top-green) 33%,
    var(--ink) 33%,var(--ink) 66%,
    var(--top-orange) 66%,var(--top-orange) 100%);
}
.login-card .logo-big{
  width:56px;height:56px;margin:8px 0 22px;border-radius:var(--r);
  background:var(--bone);border:1px solid var(--rule-3);
  position:relative;
}
.login-card .logo-big::before,.login-card .logo-big::after{
  content:'';position:absolute;border-radius:1px;
}
.login-card .logo-big::before{
  width:28px;height:9px;background:var(--top-orange);
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.login-card .logo-big::after{
  width:9px;height:28px;background:var(--top-green);
  top:50%;left:50%;transform:translate(-50%,-50%);
}
.login-card h2{
  font-family:var(--f-body);font-size:22px;font-weight:600;
  text-align:left;color:var(--ink);letter-spacing:-.025em;line-height:1.1;
}
.login-card h2 .ac{color:var(--top-orange);font-weight:600}
.login-card .sub{
  font-family:var(--f-mono);
  text-align:left;font-size:10px;color:var(--ink-dim);
  margin-top:6px;margin-bottom:22px;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
}
.login-card label{
  display:block;font-family:var(--f-mono);
  font-size:10px;color:var(--ink-dim);font-weight:500;
  margin:14px 0 6px;letter-spacing:.16em;text-transform:uppercase;
}
.login-card input{
  width:100%;padding:9px 12px;background:var(--bone);
  border:1px solid var(--rule);
  color:var(--ink);border-radius:var(--r-sm);
  font-family:var(--f-body);font-size:13.5px;font-weight:500;outline:none;
  transition:all .15s;
}
.login-card input:focus{
  border-color:var(--top-green-dk);background:var(--surface);
  box-shadow:0 0 0 3px rgba(31,140,54,.12);
}
.login-card input::placeholder{color:var(--ink-mute)}
.login-card .opts{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:12px;font-size:11.5px;color:var(--ink-3);
  font-family:var(--f-body);
}
.login-card .opts label{
  font-family:var(--f-body);font-size:11.5px;color:var(--ink-2);
  font-weight:500;text-transform:none;letter-spacing:0;margin:0;
}
.login-card .opts a{color:var(--top-green-dk);font-weight:600}
.login-card .opts a:hover{text-decoration:underline}
.login-card .btn{width:100%;padding:11px;margin-top:22px;font-size:12.5px}
.login-card .foot{
  font-family:var(--f-mono);
  text-align:center;margin-top:22px;font-size:9.5px;color:var(--ink-dim);
  letter-spacing:.18em;text-transform:uppercase;
  padding-top:14px;border-top:1px solid var(--rule);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVO
   ═══════════════════════════════════════════════════════════════ */
@media(max-width:1100px){
  .kpi-grid{grid-template-columns:repeat(2,1fr)}
  .kpi-grid.cols-3,.kpi-grid.cols-5,.kpi-grid.cols-6{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--rule)}
  .grid-2,.grid-2.even,.grid-2.rev,.grid-3,.grid-4{grid-template-columns:1fr}
  .topbar .search{display:none}
}
@media(max-width:600px){
  .kpi-grid,.kpi-grid.cols-3,.kpi-grid.cols-5,.kpi-grid.cols-6{grid-template-columns:1fr}
  .content{padding:14px}
  .topbar{padding:10px 14px}
}

/* Empty state — para gráficos/tabelas sem dados.
   Subiu junto com o trabalho de remoção de mock-data (post-deploy v1.0). */
.empty-state {
  padding: 24px 16px;
  text-align: center;
  color: var(--ink-mute, #6c6c70);
  font-size: 13px;
  font-style: italic;
}
.empty-state-chart {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
  color: var(--ink-mute, #6c6c70);
  font-size: 13px;
  font-style: italic;
}