@font-face{font-family:'Nexa Text Heavy'; src:url('../fonts/NexaTextHeavy.otf') format('opentype'); font-weight:800; font-display:swap;}
@font-face{font-family:'Nexa Text Bold'; src:url('../fonts/NexaTextBold.otf') format('opentype'); font-weight:700; font-display:swap;}
@font-face{font-family:'Nexa Text Book'; src:url('../fonts/NexaTextBook.otf') format('opentype'); font-weight:400; font-display:swap;}

:root{
  --vd-purple:#422C75;
  --vd-purple-soft:#6b52a0;
  --vd-offwhite:#FFFCF8;
  --vd-pink:#FF2F69;
  --vd-green:#00E290;
  --vd-white:#FFFFFF;
  --vd-black:#1A1A1A;
  --vd-border:#e7e1f3;
  --vd-card-shadow:0 1px 2px rgba(66,44,117,0.06), 0 6px 16px rgba(66,44,117,0.07);
  --vd-radius:14px;
  --font-heavy:'Nexa Text Heavy','Helvetica Neue',Arial,sans-serif;
  --font-bold:'Nexa Text Bold','Helvetica Neue',Arial,sans-serif;
  --font-book:'Nexa Text Book','Helvetica Neue',Arial,sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:#F6F3FB;
  color:var(--vd-purple);
  font-family:var(--font-book), Arial, sans-serif;
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-heavy),Arial,sans-serif; margin:0 0 4px 0; font-weight:800; color:var(--vd-purple);}
a{color:var(--vd-pink);}
::selection{background:var(--vd-pink); color:var(--vd-white);}

/* ---------- App shell / Sidebar ---------- */
.app-shell{display:flex; align-items:stretch; min-height:100vh;}
.sidebar{
  width:248px; flex-shrink:0; background:var(--vd-purple); color:var(--vd-offwhite);
  position:fixed; top:0; left:0; height:100vh; overflow-y:auto; z-index:70;
  display:flex; flex-direction:column; transition:transform .2s ease;
  background-image:linear-gradient(180deg, rgba(255,255,255,.04), transparent 220px);
}
.sidebar-brand{display:flex; align-items:center; gap:10px; padding:20px 18px; border-bottom:1px solid rgba(255,252,248,.12);}
.sidebar-brand .logo-dot{width:14px;height:14px;border-radius:50%;background:var(--vd-pink); flex-shrink:0; box-shadow:0 0 0 4px rgba(255,47,105,.18);}
.sidebar-brand .brand-mark{width:44px; height:44px; object-fit:contain; flex-shrink:0;}
.sidebar-brand h1{color:var(--vd-offwhite); font-size:15px; margin:0; line-height:1.25;}
.sidebar-brand span{font-size:10px; opacity:.65; display:block; font-family:var(--font-book); margin-top:2px;}
.sidebar-links{flex:1; overflow-y:auto; padding:14px 10px 10px;}
.nav-group{margin-bottom:14px;}
.nav-group-label{
  font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:rgba(255,252,248,.42);
  font-family:var(--font-bold),Arial,sans-serif; padding:4px 10px 6px;
}
.sidebar-links button{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left; border:none; background:transparent; color:var(--vd-offwhite);
  padding:9px 10px; border-radius:9px; font-family:var(--font-bold),Arial,sans-serif; font-size:12.5px;
  cursor:pointer; margin-bottom:2px; opacity:.78; transition:background .15s, opacity .15s;
}
.sidebar-links button .nav-icon{width:17px; height:17px; flex-shrink:0; opacity:.75; display:flex; align-items:center; justify-content:center;}
.sidebar-links button .nav-icon svg{width:100%; height:100%; display:block;}
.sidebar-links button:hover{background:rgba(255,252,248,.08); opacity:1;}
.sidebar-links button.active{background:var(--vd-pink); color:var(--vd-white); opacity:1;}
.sidebar-links button.active .nav-icon{opacity:1;}
.sidebar-close{display:none;}
.sidebar-toggle{
  display:inline-block; border:1px solid rgba(255,252,248,.4); background:transparent; color:var(--vd-offwhite);
  border-radius:8px; padding:6px 10px; font-size:16px; cursor:pointer; line-height:1;
}
.sidebar-overlay{display:none; position:fixed; inset:0; background:rgba(26,26,26,.4); z-index:65;}
.main-area{flex:1; min-width:0; margin-left:248px; transition:margin-left .18s ease;}
.sidebar{transition:transform .2s ease, width .18s ease;}
/* ---- Colapsada (desktop): so os icones/bolinhas, nome vira tooltip ---- */
@media(min-width:961px){
  .sidebar.collapsed{width:64px;}
  .sidebar.collapsed ~ .main-area{margin-left:64px;}
  .sidebar.collapsed .sidebar-brand{padding:16px 8px; justify-content:center;}
  .sidebar.collapsed .nav-group-label{display:none;}
  .sidebar.collapsed .sidebar-links button{justify-content:center; padding:11px 0; gap:0;}
  .sidebar.collapsed .sidebar-links button .nav-label{display:none;}
}
@media(max-width:960px){
  .sidebar{transform:translateX(-100%); box-shadow:2px 0 18px rgba(0,0,0,.2);}
  .sidebar.open{transform:translateX(0);}
  .sidebar.open ~ .sidebar-overlay, .sidebar-overlay.open{display:block;}
  .main-area{margin-left:0;}
}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky; top:0; z-index:50;
  background:var(--vd-purple); color:var(--vd-offwhite);
  padding:14px 24px; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:10px;
}
.topbar .brand{display:flex; align-items:center; gap:10px;}
.topbar .brand .logo-dot{width:14px;height:14px;border-radius:50%;background:var(--vd-pink);}
.topbar .brand h1{color:var(--vd-offwhite); font-size:17px; margin:0;}
.topbar .brand span{font-size:11px; opacity:.72; display:block; font-family:var(--font-book);}
.topbar .meta-info{font-size:11px; opacity:.78; text-align:right;}
.topbar .meta-info img{height:36px; width:auto; display:inline-block;}
.topbar .meta-info .meta-date{display:block;}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  padding:10px 24px; background:var(--vd-white); border-bottom:1px solid var(--vd-border);
  font-size:11.5px; color:var(--vd-purple-soft); font-family:var(--font-bold),Arial,sans-serif;
  letter-spacing:.02em;
}
.breadcrumb strong{color:var(--vd-pink);}

/* ---------- Filter bar ---------- */
.filterbar{
  background:var(--vd-white); border-bottom:1px solid var(--vd-border);
  padding:12px 24px; display:flex; flex-wrap:wrap; gap:14px; align-items:flex-end;
  position:sticky; top:65px; z-index:48;
}
.filterbar.compare-row{padding-top:0; gap:14px;}
.compare-toggle-wrap{display:flex; align-items:center; gap:8px;}
.compare-toggle{
  position:relative; width:38px; height:20px; border-radius:12px; background:#d8cff0; cursor:pointer; border:none; flex-shrink:0;
}
.compare-toggle .knob{position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:var(--vd-white); transition:.15s; box-shadow:0 1px 3px rgba(0,0,0,.3);}
.compare-toggle.on{background:var(--vd-pink);}
.compare-toggle.on .knob{left:20px;}
.compare-label{font-size:11.5px; font-family:var(--font-bold),Arial,sans-serif; color:var(--vd-purple);}
.filter-group{display:flex; flex-direction:column; gap:4px; min-width:150px;}
.filter-group label{font-size:10.5px; font-family:var(--font-bold),Arial,sans-serif; text-transform:uppercase; letter-spacing:.03em; color:var(--vd-purple-soft);}
.filter-group select, .filter-group input[type=date]{
  border:1px solid var(--vd-border); border-radius:7px; padding:6px 8px; font-size:12.5px;
  color:var(--vd-purple); background:var(--vd-offwhite); font-family:var(--font-book);
}
.period-presets{display:flex; gap:4px; flex-wrap:wrap;}
.period-presets button{
  border:1px solid var(--vd-border); background:var(--vd-offwhite); color:var(--vd-purple);
  padding:5px 10px; border-radius:14px; font-size:11.5px; cursor:pointer; font-family:var(--font-bold),Arial,sans-serif;
  transition:background .15s;
}
.period-presets button.active{background:var(--vd-pink); color:var(--vd-white); border-color:var(--vd-pink);}
.multiselect{position:relative;}
.multiselect-btn{
  border:1px solid var(--vd-border); border-radius:7px; padding:6px 10px; background:var(--vd-offwhite);
  font-size:12px; cursor:pointer; min-width:150px; text-align:left; color:var(--vd-purple); font-family:var(--font-book);
}
.multiselect-panel{
  display:none; position:absolute; top:100%; left:0; margin-top:4px; background:var(--vd-white);
  border:1px solid var(--vd-border); border-radius:10px; box-shadow:var(--vd-card-shadow);
  padding:8px; z-index:60; max-height:240px; overflow:auto; min-width:220px;
}
.multiselect-panel.open{display:block;}
.multiselect-panel label{display:flex; align-items:center; gap:6px; font-size:12px; padding:3px 2px; cursor:pointer; font-family:var(--font-book); color:var(--vd-purple);}
.multiselect-panel .ms-actions{display:flex; gap:8px; margin-bottom:6px; border-bottom:1px solid var(--vd-border); padding-bottom:6px;}
.multiselect-panel .ms-actions a{font-size:11px; cursor:pointer; text-decoration:underline;}
/* ---------- Popovers globais (Período / Origem) ----------
   Só estes dois filtros ficam sempre visíveis -- os demais (Campanha,
   Tipo de conteúdo, Tipo de lead) são contextuais e vivem dentro da seção
   onde fazem efeito (ver .contextual-filter abaixo). */
.filter-popover-btn{min-width:190px; font-family:var(--font-bold),Arial,sans-serif; display:flex; align-items:center; gap:6px;}
.multiselect-panel.wide{min-width:300px;}
.popover-hr{border:none; border-top:1px solid var(--vd-border); margin:10px 0;}
.origin-tree-panel{min-width:260px; max-height:340px;}
.origin-tree-group{
  display:flex; align-items:center; gap:6px; font-size:12px; padding:5px 2px; cursor:pointer;
  font-family:var(--font-bold),Arial,sans-serif; color:var(--vd-purple); border-top:1px solid var(--vd-border); margin-top:2px;
}
.origin-tree-panel label:first-of-type.origin-tree-group{border-top:none; margin-top:0;}
.origin-tree-child{display:flex; align-items:center; gap:6px; font-size:12px; padding:3px 2px 3px 20px; cursor:pointer; color:var(--vd-purple); font-family:var(--font-book);}

/* ---------- Barra de progresso de meta (ex.: meta anual de leads) ---------- */
.goal-progress{background:var(--vd-white); border-radius:var(--vd-radius); padding:16px 18px; box-shadow:var(--vd-card-shadow); border:1px solid var(--vd-border); margin-bottom:18px;}
.goal-progress-head{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap;}
.goal-progress-title{font-size:13px; font-family:var(--font-bold),Arial,sans-serif; color:var(--vd-purple);}
.goal-progress-value{font-size:20px; font-family:var(--font-heavy),Arial,sans-serif; color:var(--vd-purple); white-space:nowrap;}
.goal-progress-sub{font-size:11px; color:var(--vd-purple-soft); margin:2px 0 10px;}
.goal-progress-track{background:#f1ecfb; border-radius:8px; height:14px; overflow:hidden;}
.goal-progress-fill{height:100%; background:linear-gradient(90deg, var(--vd-purple), var(--vd-pink)); border-radius:8px;}
.goal-progress-footer{font-size:11px; color:var(--vd-purple-soft); margin-top:6px;}

/* ---------- Filtro contextual (embutido dentro de uma seção) ---------- */
.contextual-filter{display:flex; align-items:center; gap:8px; margin-bottom:14px; flex-wrap:wrap;}
.contextual-filter .cf-label{font-size:10.5px; font-family:var(--font-bold),Arial,sans-serif; text-transform:uppercase; letter-spacing:.03em; color:var(--vd-purple-soft);}

.btn-clear-filters{
  border:1px solid var(--vd-pink); color:var(--vd-pink); background:transparent; border-radius:16px;
  padding:6px 14px; font-size:12px; cursor:pointer; font-family:var(--font-bold),Arial,sans-serif; height:32px;
  transition:background .15s, color .15s;
}
.btn-clear-filters:hover{background:var(--vd-pink); color:var(--vd-white);}

/* ---------- Layout ---------- */
.container{padding:22px 24px 60px 24px; max-width:1500px; margin:0 auto;}
.section{display:none;}
.section.active{display:block; animation:fadein .18s ease;}
@keyframes fadein{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
.section-title{margin-bottom:16px;}
.section-title h2{font-size:21px;}
.section-title p{margin:0; font-size:12.5px; color:var(--vd-purple-soft);}

/* ---------- Cards ---------- */
.cards-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; margin-bottom:22px;}
.card{
  background:var(--vd-white); border-radius:var(--vd-radius); padding:16px 18px; box-shadow:var(--vd-card-shadow);
  border:1px solid var(--vd-border);
}
.card .card-label{font-size:11px; text-transform:uppercase; letter-spacing:.03em; color:var(--vd-purple-soft); font-family:var(--font-bold),Arial,sans-serif; margin-bottom:6px;}
.card .card-value{font-size:27px; font-family:var(--font-heavy),Arial,sans-serif; color:var(--vd-purple); line-height:1;}
.card .card-value.pink{color:var(--vd-pink);}
.card .card-sub{font-size:11px; color:var(--vd-purple-soft); margin-top:4px;}

/* ---------- Panels / charts / tables ---------- */
.panel-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:18px;}
.panel-grid.single{grid-template-columns:1fr;}
@media(max-width:980px){.panel-grid{grid-template-columns:1fr;}}
.panel{
  background:var(--vd-white); border-radius:var(--vd-radius); padding:18px; box-shadow:var(--vd-card-shadow);
  border:1px solid var(--vd-border); min-width:0;
}
.panel h3{font-size:14px; margin-bottom:2px;}
.panel .panel-sub{font-size:11px; color:var(--vd-purple-soft); margin-bottom:12px;}
.chart-wrap{position:relative; height:280px;}
.chart-wrap.small{height:220px;}
/* duas séries de escalas diferentes (ex.: cliques x impressões) viram dois
   gráficos de eixo único empilhados, em vez de um gráfico de eixo duplo --
   eixo duplo distorce a leitura ao alinhar arbitrariamente duas escalas. */
.chart-stack{display:flex; flex-direction:column; gap:10px; height:280px;}
.chart-stack .chart-wrap{flex:1; height:auto; min-height:0;}
.chart-stack .chart-stack-label{font-size:10.5px; color:var(--vd-purple-soft); font-family:var(--font-bold),Arial,sans-serif; margin-bottom:-4px;}

table.data-table{width:100%; border-collapse:collapse; font-size:12.5px;}
table.data-table th{
  text-align:left; padding:8px 10px; background:var(--vd-purple); color:var(--vd-offwhite);
  font-family:var(--font-bold),Arial,sans-serif; font-size:11px; text-transform:uppercase; letter-spacing:.02em;
  position:sticky; top:0;
}
table.data-table td{padding:7px 10px; border-bottom:1px solid var(--vd-border);}
table.data-table tr:nth-child(even) td{background:#faf8fd;}
table.data-table tr:hover td{background:#f1ecfb;}
table.data-table td.td-bar{font-variant-numeric:tabular-nums;}
.table-scroll{max-height:420px; overflow:auto; border:1px solid var(--vd-border); border-radius:10px;}
.table-controls{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px; gap:10px; flex-wrap:wrap;}
.table-controls input[type=search]{
  border:1px solid var(--vd-border); border-radius:7px; padding:6px 10px; font-size:12.5px; min-width:200px;
  background:var(--vd-offwhite); color:var(--vd-purple);
}
.pagination{display:flex; gap:6px; align-items:center; justify-content:flex-end; margin-top:8px; font-size:12px;}
.pagination button{
  border:1px solid var(--vd-border); background:var(--vd-white); color:var(--vd-purple); border-radius:7px;
  padding:4px 10px; cursor:pointer; font-size:12px;
}
.pagination button:disabled{opacity:.4; cursor:default;}

.badge{display:inline-block; padding:2px 9px; border-radius:12px; font-size:10.5px; font-family:var(--font-bold),Arial,sans-serif; color:var(--vd-white);}
.badge.lead{background:#9b8bc4;}
.badge.reuniao{background:var(--vd-purple-soft);}
.badge.proposta{background:#c9558a;}
.badge.ganho{background:var(--vd-pink);}
.badge.tier-top{background:var(--vd-pink);}
.badge.tier-alto{background:var(--vd-purple);}
.badge.tier-padrao{background:var(--vd-purple-soft);}

.origin-legend{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px;}
.origin-chip{
  display:flex; align-items:center; gap:6px; border:1px solid var(--vd-border); border-radius:16px;
  padding:5px 12px; font-size:11.5px; cursor:pointer; background:var(--vd-white); font-family:var(--font-bold),Arial,sans-serif;
  transition:background .15s, color .15s;
}
.origin-chip.active{background:var(--vd-purple); color:var(--vd-offwhite); border-color:var(--vd-purple);}
.origin-chip .dot{width:9px;height:9px;border-radius:50%;}

.notice{
  background:#faf8fd; border:1px dashed var(--vd-border); border-radius:9px; padding:9px 12px;
  font-size:11.5px; color:var(--vd-purple-soft); margin-top:8px;
}
.notice.error{background:#fff0f4; border-color:#ffc2d4; color:#a1244b;}
.footnote{font-size:11px; color:var(--vd-purple-soft); border-top:1px solid var(--vd-border); margin-top:30px; padding-top:14px;}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:980px){.two-col{grid-template-columns:1fr;}}
.mini-funnel{display:flex; gap:10px; flex-wrap:wrap;}
.mini-funnel .step{
  flex:1; min-width:110px; text-align:center; background:var(--vd-offwhite); border:1px solid var(--vd-border);
  border-radius:12px; padding:12px 6px;
}
.mini-funnel .step .n{font-size:21px; font-family:var(--font-heavy),Arial,sans-serif; color:var(--vd-purple);}
.mini-funnel .step .lbl{font-size:10.5px; color:var(--vd-purple-soft); text-transform:uppercase;}

/* ---------- Table sort + export ---------- */
table.data-table th{cursor:pointer; user-select:none; white-space:nowrap;}
table.data-table th .sort-arrow{opacity:.55; font-size:9px; margin-left:4px;}
table.data-table th.sorted .sort-arrow{opacity:1;}
.table-controls .tbl-actions{display:flex; gap:6px; align-items:center;}
.btn-export{
  border:1px solid var(--vd-purple); background:var(--vd-white); color:var(--vd-purple); border-radius:14px;
  padding:5px 11px; font-size:11px; cursor:pointer; font-family:var(--font-bold),Arial,sans-serif;
  transition:background .15s, color .15s;
}
.btn-export:hover{background:var(--vd-purple); color:var(--vd-offwhite);}
.btn-export.xlsx{border-color:var(--vd-green); color:#1a7a52;}
.btn-export.xlsx:hover{background:var(--vd-green); color:var(--vd-purple);}

/* ---------- KPI comparison cards ---------- */
.card.compare .card-value{font-size:20px;}
.card.compare .compare-vs{font-size:11px; color:var(--vd-purple-soft); margin-top:2px;}
.card.compare .compare-delta{font-size:11px; font-family:var(--font-bold),Arial,sans-serif; margin-top:2px;}
.card.compare .compare-delta.up{color:#1a7a52;}
.card.compare .compare-delta.down{color:var(--vd-pink);}

/* ---------- Rankings / Top 10 ---------- */
.ranking-list{list-style:none; margin:0; padding:0;}
.ranking-list li{
  display:flex; align-items:center; gap:10px; padding:7px 4px; border-bottom:1px solid var(--vd-border); font-size:12px;
}
.ranking-list li:last-child{border-bottom:none;}
.ranking-list .rank-n{
  width:20px; height:20px; border-radius:50%; background:var(--vd-purple); color:var(--vd-offwhite);
  display:flex; align-items:center; justify-content:center; font-size:10.5px; font-family:var(--font-bold),Arial,sans-serif; flex-shrink:0;
}
.ranking-list li:nth-child(1) .rank-n{background:var(--vd-pink);}
.ranking-list .rank-label{flex:1; min-width:0; color:var(--vd-purple); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ranking-list .rank-value{font-family:var(--font-bold),Arial,sans-serif; color:var(--vd-purple-soft); flex-shrink:0;}

/* ---------- Heatmap ---------- */
.heatmap-wrap{overflow-x:auto;}
table.heatmap{border-collapse:collapse; font-size:10.5px; width:100%;}
table.heatmap th{
  padding:4px 5px; background:var(--vd-purple); color:var(--vd-offwhite); font-size:9.5px; text-align:center;
  font-family:var(--font-bold),Arial,sans-serif;
}
table.heatmap td{padding:5px; text-align:center; border:1px solid var(--vd-offwhite); color:var(--vd-purple); font-family:var(--font-book);}
table.heatmap td.hm-row-label{background:var(--vd-offwhite); font-family:var(--font-bold),Arial,sans-serif; text-align:left; padding:5px 8px; color:var(--vd-purple-soft); font-size:10px;}
table.heatmap td.hm-empty{background:#faf8fd; color:var(--vd-purple-soft);}
.chart-fallback-note{font-size:11px;color:var(--vd-purple-soft, #6b52a0);text-align:center;padding:8px;opacity:.75;}

/* ---------- Boot / fatal error screen ---------- */
#bootError{
  max-width:640px; margin:80px auto; background:var(--vd-white); border:1px solid var(--vd-border);
  border-radius:var(--vd-radius); padding:28px 30px; box-shadow:var(--vd-card-shadow); text-align:left;
}
#bootError h2{color:var(--vd-pink);}
#bootError pre{background:#faf8fd; border-radius:8px; padding:10px 12px; font-size:11px; overflow:auto; color:var(--vd-purple-soft);}