/* =====================================================================
   INTELIGÊNCIA COMERCIAL — sistema visual do Painel Comercial.
   Tudo aqui é escopado em `.bi` (as <section> do módulo) e em
   `main.modo-bi`. A barra lateral do site fica intacta: este arquivo
   não toca em .sidebar, .aba, .area-toggle nem em nenhuma tela fora
   da Inteligência Comercial.
   ===================================================================== */

.bi {
  --white:#FFFFFF;
  --bg:#F2F4F7;          /* plano de fundo */
  --r:8px;               /* raio de card */
  --rSm:5px;             /* raio de campo */
  --ink:#111318;         /* texto primário */
  --ink2:#4A4F57;        /* texto secundário */
  --ink3:#7A8189;        /* rótulos, eixos */
  --rule:#E3E6E9;        /* filete padrão */
  --rule2:#EFF1F3;       /* filete de linha de tabela */
  --ruleStrong:#C4C9CE;  /* filete de cabeçalho / baseline */
  --wash:#F7F8F9;        /* hover, zebra de cabeçalho */
  --sh:0 1px 2px rgba(17,19,24,.05), 0 6px 16px -8px rgba(17,19,24,.16);
  --blue:#2A78D6;        /* interativo + série primária */
  --blueDeep:#184F95;
  --blueBar:#9EC5F4;     /* barra de dados */
  --blueWash:#F1F6FD;
  --good:#006300;
  --bad:#C0322F;
  --badWash:#FCF3F2;
  --warn:#8A5A00;
  --warnInk:#8A5A00;
  --sans:"Source Sans 3",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --tit:"Mont","Mont Heavy","Mont ExtraBold","Mont Bold","Outfit","Archivo Black","Segoe UI",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  color:var(--ink);
  font-family:var(--sans);
  font-size:14.5px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

/* O <main> do site tem padding próprio; no modo BI o painel ocupa a
   coluna inteira para a topbar poder grudar no topo. */
main.modo-bi { padding:0; background:#F2F4F7; }

.bi h1,.bi h2,.bi h3,.bi h4 { margin:0; font-weight:600; letter-spacing:-.005em; }
.bi .mono { font-family:var(--mono); }
.bi .num,.bi td.r,.bi th.r,.bi .kv { font-variant-numeric:tabular-nums; }

/* ================= topbar ================= */
.bi .topbar { position:sticky; top:0; z-index:20; background:var(--white); border-bottom:1px solid var(--rule);
              padding:0 28px; min-height:54px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.bi .topbar h2 { font-family:var(--tit); font-size:19px; font-weight:800; letter-spacing:-.015em; }
.bi .topbar .ctx { margin-left:auto; font-size:12.5px; color:var(--ink3); font-variant-numeric:tabular-nums;
                   display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.bi .topbar .ctx select { min-width:0; width:auto; max-width:340px; font-size:13px; padding:5px 8px; }
.bi .topbar .ctx label { margin:0; }
/* A <section> carrega o respiro da página. As telas reconstruídas emitem
   .topbar + .conteudo: a topbar sangra até a borda (margem negativa) e o
   conteúdo herda só o padding lateral do pai. As telas antigas, que não
   emitem esse par, ficam com o respiro da própria seção. */
.bi { padding:24px 28px 60px; }
.bi > .topbar { margin:-24px -28px 0; }
.bi > .conteudo { padding:24px 0 0; max-width:1560px; }

/* ================= seções ================= */
.bi .block { margin:0 0 34px; }
.bi .bh { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding-bottom:9px;
          border-bottom:1px solid var(--ruleStrong); margin-bottom:15px; }
.bi .bh h2 { font-family:var(--tit); font-size:19px; font-weight:800; letter-spacing:-.015em; color:var(--ink); }
.bi .bh h3 { font-family:var(--tit); font-size:17px; font-weight:800; letter-spacing:-.015em; color:var(--ink); }
.bi .bh .note { margin-left:auto; font-size:12.5px; color:var(--ink3); font-variant-numeric:tabular-nums; }
.bi .hint { font-size:13px; color:var(--ink3); margin:11px 0 0; max-width:100ch; line-height:1.6; }
.bi .hint b { color:var(--ink2); font-weight:600; }

/* botão "i" + card de explicação */
.bi .ibtn { appearance:none; width:19px; height:19px; flex:none; border-radius:50%; border:1px solid var(--rule);
  background:var(--white); color:var(--ink3); font-family:var(--sans); font-size:11px; font-weight:700; line-height:1;
  cursor:pointer; padding:0; display:inline-flex; align-items:center; justify-content:center; vertical-align:middle;
  margin-left:3px; position:relative; top:-1px; }
.bi .ibtn:hover { border-color:var(--blue); color:var(--blue); background:var(--blueWash); }
.bi .ibtn[aria-expanded="true"] { border-color:var(--blue); background:var(--blue); color:#fff; }
.bi .ibtn:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
.bi .expl { background:var(--blueWash); border:1px solid #CBDFF6; border-left:3px solid var(--blue);
  border-radius:var(--r); padding:14px 18px; margin:0 0 14px; font-size:13.5px; color:var(--ink2); line-height:1.6; max-width:104ch; }
.bi .expl b { color:var(--ink); font-weight:600; }
.bi .expl dl { margin:0; display:grid; grid-template-columns:126px 1fr; gap:5px 16px; }
.bi .expl dt { font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.06em;
               text-transform:uppercase; color:var(--ink3); padding-top:4px; }
.bi .expl dd { margin:0; }
.bi .panel .expl { margin-bottom:12px; font-size:13px; }

.bi .panel { background:var(--white); border:1px solid var(--rule); border-radius:var(--r);
             box-shadow:var(--sh); padding:16px 18px 18px; }
.bi .panel h3 { font-family:var(--tit); font-size:16.5px; font-weight:800; letter-spacing:-.015em; color:var(--ink);
                padding-bottom:9px; border-bottom:1px solid var(--rule); margin-bottom:11px; }
.bi .panel .tw { background:none; border:0; border-radius:0; padding:0; box-shadow:none; }
.bi .panel .hint { margin-bottom:0; }

/* ================= KPI — cards ================= */
.bi .kpis { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media(min-width:900px)  { .bi .kpis { grid-template-columns:repeat(3,1fr); } }
@media(min-width:1200px) { .bi .kpis { grid-template-columns:repeat(4,1fr); } }
@media(min-width:1600px) { .bi .kpis { grid-template-columns:repeat(6,1fr); } }
.bi .kpi { background:var(--white); border:1px solid var(--rule); border-radius:var(--r); box-shadow:var(--sh);
           padding:15px 17px 16px; display:flex; flex-direction:column; min-height:108px; }
.bi .kpi .k { font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.075em; text-transform:uppercase;
              color:var(--ink3); margin-bottom:8px; line-height:1.3; }
.bi .kpis>.kpi:not(.dual) .k { min-height:29px; }
.bi .kpi .v { font-size:22px; font-weight:600; letter-spacing:-.02em; line-height:1.15;
              font-variant-numeric:tabular-nums; color:var(--ink); }
.bi .kpi .s { font-size:12.5px; color:var(--ink3); margin-top:auto; padding-top:8px;
              font-variant-numeric:tabular-nums; line-height:1.35; }
.bi .kpi.hero { border-color:var(--ruleStrong); }
.bi .kpi.hero .v { font-size:23px; }
.bi .kpi.dual { grid-row:span 2; padding:0; }
/* em tela larga os cards duplos ancoram nas duas colunas da direita */
@media(min-width:1600px) {
  .bi .kpis>.dual1 { grid-column:5; grid-row:1/span 2; }
  .bi .kpis>.dual2 { grid-column:6; grid-row:1/span 2; }
}
.bi .kpi.dual .kpipart { flex:1; display:flex; flex-direction:column; padding:15px 17px 16px; }
.bi .kpi.dual .kpipart+.kpipart { border-top:1px solid var(--rule); }
.bi .cur { color:var(--ink3); font-weight:400; font-size:.8em; margin-right:.32em; letter-spacing:.01em; }

/* ================= Mapa ================= */
/* Mapa e painel lado a lado. O painel troca de conteudo: lista de clientes
   ou ficha de um cliente, nunca os dois. Nada abaixo do mapa. */
.bi .bi-mapa-grade { display:grid; grid-template-columns:minmax(0,1fr) 370px; gap:14px; }
@media(max-width:1150px) { .bi .bi-mapa-grade { grid-template-columns:1fr; } }
.bi .bi-mapa-canvas { height:min(70vh,680px); min-height:400px; border:1px solid var(--rule);
  border-radius:var(--r); overflow:hidden; background:var(--white);
  /* O Leaflet numera seus painéis e controles de 400 até 1000. Sem um
     contexto de empilhamento próprio, esses valores sobem para a raiz e o
     mapa passa por cima do menu lateral (z-index 60) no celular. O
     isolate prende tudo isso aqui dentro. */
  position:relative; z-index:0; isolation:isolate; }
.bi .bi-mapa-vazio { display:flex; align-items:center; justify-content:center; height:100%;
  color:var(--ink3); font-size:13.5px; }
.bi .bi-mapa-painel { display:flex; flex-direction:column; height:min(70vh,680px); min-height:400px;
  border:1px solid var(--rule); border-radius:var(--r); background:var(--white); overflow:hidden; }
.bi .bi-mapa-painel-topo { display:flex; gap:8px; align-items:center; padding:10px;
  border-bottom:1px solid var(--rule); flex:none; }
.bi .bi-mapa-painel-topo input { flex:1; min-width:0; }
.bi .bi-mapa-painel-topo select { max-width:150px; }
.bi .bi-mapa-painel-nome { font-size:13px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bi .bi-mapa-painel-corpo { flex:1; overflow-y:auto; }
.bi .bi-mapa-painel-corpo.pad { padding:12px 14px 18px; }
.bi .bi-mapa-lista-cab { padding:8px 12px; font-size:11.5px; color:var(--ink3); letter-spacing:.04em;
  text-transform:uppercase; border-bottom:1px solid var(--rule); position:sticky; top:0; background:var(--white); }
.bi .bi-mapa-item { padding:9px 12px; border-bottom:1px solid var(--rule); cursor:pointer; }
.bi .bi-mapa-item:hover { background:var(--blueWash); }
.bi .bi-mapa-item.inativo .nm { color:var(--ink3); }
.bi .bi-mapa-item .l1 { display:flex; justify-content:space-between; gap:10px; align-items:baseline; }
.bi .bi-mapa-item .nm { font-size:13px; font-weight:600; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bi .bi-mapa-item .fv { font-size:12.5px; color:var(--ink2); font-variant-numeric:tabular-nums; flex:none; }
.bi .bi-mapa-item .l2 { font-size:11.5px; color:var(--ink3); margin-top:3px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* Numeros do cliente na ficha, em duas colunas. */
.bi .bi-mapa-num { display:grid; grid-template-columns:1fr 1fr; gap:8px 12px; margin:0 0 14px; }
.bi .bi-mapa-num div { display:flex; flex-direction:column; gap:1px; }
.bi .bi-mapa-num span { font-size:11px; color:var(--ink3); letter-spacing:.05em; text-transform:uppercase; }
.bi .bi-mapa-num b { font-size:15px; color:var(--ink); font-variant-numeric:tabular-nums; }
.bi .bi-mapa-h4 { font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink3);
  margin:18px 0 8px; font-family:var(--sans); }
.bi .bi-mapa-painel .tw { border:none; border-radius:0; }
.bi .bi-mapa-painel table { font-size:12.5px; }
.bi .bi-mapa-painel td.name { max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.bi .bi-mapa-filtros { gap:8px 12px; }
.bi .bi-mapa-filtros select { max-width:180px; }
/* O Leaflet injeta o proprio HTML; so alinhamos a tipografia com a do painel. */
.bi .leaflet-container { font:inherit; }
.bi .leaflet-tooltip { font-size:12.5px; line-height:1.35; }
.bi .bi-mapa-ficha { max-width:290px; }
.bi .bi-mapa-ficha .fx { margin-top:4px; font-size:12px; line-height:1.45; color:var(--ink2); }
.bi .bi-mapa-ficha .fx span { color:var(--ink3); }
.bi .bi-mapa-ficha .fx .ap { margin-top:4px; color:var(--warn); font-size:11.5px; }
.bi .bi-mapa-ficha-dl { display:grid; grid-template-columns:104px 1fr; gap:5px 12px; margin:0; font-size:12.5px; }
.bi .bi-mapa-ficha-dl dt { color:var(--ink3); }
.bi .bi-mapa-ficha-dl dd { margin:0; color:var(--ink); overflow-wrap:anywhere; }

/* Endereço em bloco próprio: é o dado mais lido na ficha, então ganha
   destaque visual em vez de disputar espaço linha a linha com o resto. */
.bi .bi-mapa-endereco { background:var(--wash); border:1px solid var(--rule); border-radius:var(--rSm);
  padding:10px 12px; margin:0 0 14px; line-height:1.5; overflow-wrap:anywhere; }
.bi .bi-mapa-endereco .l1 { font-size:13px; font-weight:600; color:var(--ink); }
.bi .bi-mapa-endereco .l1.vazio { font-weight:400; color:var(--ink3); }
.bi .bi-mapa-endereco .l2 { font-size:12.5px; color:var(--ink2); margin-top:1px; }
.bi .bi-mapa-pos { display:inline-block; margin-top:7px; padding:2px 8px; border-radius:99px;
  font-size:11px; font-weight:600; letter-spacing:.01em; }
.bi .bi-mapa-pos.exata { background:#E3F2E3; color:var(--good); }
.bi .bi-mapa-pos.aprox { background:#FBF0DC; color:var(--warnInk); }

/* Faixa de geocodificação pendente: neutra, não é aviso/erro — informativa. */
.bi .bi-mapa-geo { background:var(--wash); border:1px solid var(--rule); border-radius:var(--r);
  padding:12px 16px; margin-bottom:16px; }
.bi .bi-mapa-geo-topo { display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:8px; }
.bi .bi-mapa-geo-titulo { font-size:13px; font-weight:600; color:var(--ink); }
.bi .bi-mapa-geo-conta { font-size:12.5px; color:var(--ink3); font-variant-numeric:tabular-nums; }
.bi .bi-mapa-geo-trilha { height:6px; border-radius:99px; background:var(--rule2); overflow:hidden; }
.bi .bi-mapa-geo-barra { height:100%; width:0%; border-radius:99px; background:var(--blue);
  transition:width .4s ease; }
.bi .bi-mapa-geo-rodape { display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:9px; }
.bi .bi-mapa-geo-rodape span { font-size:12px; color:var(--ink3); font-variant-numeric:tabular-nums; }

/* ================= tabelas ================= */
.bi .tw { overflow-x:auto; position:relative; background-color:var(--white); border:1px solid var(--rule);
  border-radius:var(--r); box-shadow:var(--sh); padding:4px 16px 8px;
  background:linear-gradient(90deg,#fff 30%,rgba(255,255,255,0)),linear-gradient(90deg,rgba(255,255,255,0),#fff 70%) 100% 0,
             radial-gradient(farthest-side at 0 50%,rgba(17,19,24,.12),transparent),
             radial-gradient(farthest-side at 100% 50%,rgba(17,19,24,.12),transparent) 100% 0;
  background-repeat:no-repeat; background-size:44px 100%,44px 100%,13px 100%,13px 100%;
  background-attachment:local,local,scroll,scroll; }
.bi .tw table { border-collapse:collapse; width:100%; font-size:13.5px; min-width:0; }
.bi .tw th { position:sticky; top:0; background:var(--white); text-align:left; font-family:var(--sans); font-weight:600;
  font-size:11px; letter-spacing:.055em; text-transform:uppercase; color:var(--ink3); padding:11px 10px 8px;
  border-bottom:1px solid var(--ruleStrong); white-space:nowrap; z-index:2; }
.bi .tw td { padding:8px 10px; border-bottom:1px solid var(--rule2); vertical-align:middle; white-space:nowrap; color:var(--ink2); }
.bi .tw td:first-child,.bi .tw th:first-child { padding-left:0; }
.bi .tw td:last-child,.bi .tw th:last-child { padding-right:0; }
.bi .tw tbody tr:hover td { background:var(--wash); }
.bi .tw td.r,.bi .tw th.r { text-align:right; font-variant-numeric:tabular-nums; color:var(--ink); }
.bi .tw td.name { white-space:normal; min-width:165px; max-width:212px; color:var(--ink); font-weight:500; line-height:1.35; }
.bi .tw td.sup { white-space:nowrap; max-width:150px; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.bi .tw td.grp { white-space:nowrap; max-width:210px; overflow:hidden; text-overflow:ellipsis; font-size:13px; }
.bi .tw td.cod { font-family:var(--mono); font-size:12px; color:var(--ink3); letter-spacing:-.02em; }
.bi .tw td.rk { font-family:var(--mono); font-size:11.5px; color:var(--ink3); width:32px; text-align:right; padding-right:14px; }
/* GAP de clientes: é uma métrica de ação (quem parou de comprar), não um
   número de leitura passiva — por isso ganha peso na tabela. */
.bi .tw td.gap { font-weight:600; color:var(--warn); }
.bi .tw td.faixa { font-weight:600; color:var(--ink); white-space:nowrap; }
.bi .tw tfoot td { font-weight:600; color:var(--ink); border-top:1px solid var(--ruleStrong); border-bottom:0;
                   padding-top:9px; background:var(--white); }
.bi .tw tfoot tr:hover td { background:var(--white); }
.bi .tw tr.clicavel { cursor:pointer; }

/* estado */
.bi .pct { color:var(--ink); }
.bi .pct.bad { color:var(--bad); }
.bi .pct.crit { color:var(--bad); font-weight:600; }
.bi .neg { color:var(--bad); }
.bi .pos { color:var(--good); }
.bi .tag { font-family:var(--mono); font-size:11px; color:var(--ink3); letter-spacing:-.02em; }
.bi .na { color:var(--ink3); font-style:italic; font-size:13px; }

/* barra de distribuição */
.bi .minibar { display:inline-block; width:84px; height:7px; margin-right:9px; background:var(--rule2);
               border-radius:4px; overflow:hidden; vertical-align:middle; }
.bi .minibar i { display:block; height:100%; background:var(--blue); border-radius:4px; }

/* ================= layout ================= */
.bi .two { display:grid; grid-template-columns:1fr 1fr; gap:40px; }
.bi .side2 { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:40px; }
@media(max-width:1100px) { .bi .two,.bi .side2 { grid-template-columns:1fr; gap:28px; } }

/* ================= achados ================= */
.bi .find { background:var(--white); border:1px solid var(--rule); border-left:3px solid var(--rule);
            border-radius:var(--r); box-shadow:var(--sh); padding:15px 18px 16px; margin:0 0 12px; }
.bi .find.crit { border-left-color:var(--bad); }
.bi .find.att  { border-left-color:var(--warnInk); }
.bi .find.ok   { border-left-color:var(--good); }
.bi .find.inf  { border-left-color:var(--blue); }
.bi .find h4 { font-family:var(--tit); font-size:16.5px; font-weight:800; letter-spacing:-.015em; color:var(--ink); margin-bottom:8px; }
.bi .find dl { margin:0; display:grid; grid-template-columns:120px 1fr; gap:4px 16px; font-size:13.5px; }
.bi .find dt { font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.06em;
               text-transform:uppercase; color:var(--ink3); padding-top:4px; }
.bi .find dd { margin:0; color:var(--ink2); line-height:1.6; max-width:98ch; }
.bi ul.tight { margin:4px 0 0; padding-left:18px; color:var(--ink2); font-size:13.5px; }
.bi ul.tight li { margin-bottom:7px; line-height:1.55; }

/* ================= controles ================= */
.bi .ctl { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:0 0 22px; padding:12px 16px;
           background:var(--white); border:1px solid var(--rule); border-radius:var(--r); box-shadow:var(--sh); }
.bi .ctl label { font-family:var(--sans); font-size:11px; font-weight:600; letter-spacing:.075em;
                 text-transform:uppercase; color:var(--ink3); margin:0; display:inline-block; }
.bi select,.bi input[type=search],.bi input[type=text],.bi input[type=date] {
  font-family:var(--sans); font-size:14px; color:var(--ink); background:var(--white);
  border:1px solid var(--rule); border-radius:var(--rSm); padding:7px 9px; min-width:220px; width:auto; box-shadow:none; }
.bi select:focus,.bi input:focus,.bi textarea:focus { outline:2px solid var(--blue); outline-offset:-1px;
  border-color:var(--blue); box-shadow:none; }
.bi .grow { flex:1 1 320px; min-width:0; }
.bi .btn { background:var(--white); border:1px solid var(--rule); color:var(--ink2); border-radius:var(--rSm);
           padding:7px 14px; font-family:var(--sans); font-size:13.5px; font-weight:600; box-shadow:none; }
.bi .btn:hover { border-color:var(--blue); color:var(--blue); background:var(--blueWash); box-shadow:none; }
.bi .btn-primario { background:var(--blue); border-color:var(--blue); color:#fff; }
.bi .btn-primario:hover { background:var(--blueDeep); border-color:var(--blueDeep); color:#fff; }

/* ================= gráfico ================= */
.bi svg text { font-family:var(--sans); fill:var(--ink3); font-variant-numeric:tabular-nums; }
.bi .scat { width:100%; height:auto; display:block; }
.bi .chartwrap { position:relative; }
.bi .tipbox { position:absolute; z-index:5; pointer-events:none; background:var(--white); border:1px solid var(--ruleStrong);
  border-radius:6px; padding:9px 11px; font-size:12.5px; line-height:1.45; box-shadow:0 4px 14px -6px rgba(17,19,24,.28);
  min-width:190px; opacity:0; transition:opacity .1s; }
.bi .tipbox.on { opacity:1; }
.bi .tipbox .tn { font-weight:600; color:var(--ink); display:block; margin-bottom:5px; }
.bi .tipbox .tl { display:flex; justify-content:space-between; gap:16px; color:var(--ink3); }
.bi .tipbox .tl b { color:var(--ink); font-variant-numeric:tabular-nums; font-weight:600; }

/* ================= estados ================= */
.bi .bi-carregando { display:flex; align-items:center; gap:10px; color:var(--ink3); font-size:13.5px; padding:22px 4px; }
.bi .bi-spinner { border-color:var(--rule); border-top-color:var(--blue); }
.bi .vazio { text-align:center; color:var(--ink3); padding:32px; font-size:13.5px; }
.bi .aviso { background:#FFFBEB; border:1px solid #F3DFAE; border-left:3px solid var(--warnInk); color:var(--warnInk);
             border-radius:var(--r); padding:14px 18px; margin:0 0 22px; font-size:13.5px; }

/* =====================================================================
   Compatibilidade — as telas de Importação, Insights, Chat e Histórico
   continuam usando as classes antigas do site. Aqui elas herdam a
   paleta e a tipografia do painel para o módulo ficar coerente.
   ===================================================================== */
.bi .cartao { background:var(--white); border:1px solid var(--rule); border-radius:var(--r);
              box-shadow:var(--sh); padding:16px 18px 18px; margin-bottom:22px; }
.bi .cartao h2,.bi .cartao h3 { font-family:var(--tit); font-weight:800; letter-spacing:-.015em; color:var(--ink); }
.bi .cartao h2 { font-size:17px; margin-bottom:14px; }
.bi .cartao h3 { font-size:16.5px; margin-bottom:11px; }
.bi .bi-topo { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding-bottom:9px;
               border-bottom:1px solid var(--ruleStrong); margin-bottom:15px; }
/* Central de Importação, Insights, Chat e Histórico ainda montam o
   cabeçalho com .bi-topo. Quando ele é o primeiro filho da tela, vira a
   mesma topbar fixa das demais — o módulo inteiro abre igual. */
.bi > .bi-topo { position:sticky; top:0; z-index:20; align-items:center; gap:16px;
                 background:var(--white); border-bottom:1px solid var(--rule); border-radius:0;
                 margin:-24px -28px 24px; padding:9px 28px; min-height:54px; }
.bi > .bi-topo h2 { font-size:19px; }
.bi > .bi-topo .bi-topo-acoes { margin-left:auto; }
.bi .bi-topo h2 { font-family:var(--tit); font-size:19px; font-weight:800; letter-spacing:-.015em; color:var(--ink); }
.bi .bi-topo h3 { font-family:var(--tit); font-size:16.5px; font-weight:800; letter-spacing:-.015em; color:var(--ink); }
.bi .bi-sub { color:var(--ink3); font-size:12.5px; margin-top:3px; }
.bi .bi-topo-acoes { margin-left:auto; display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.bi .bi-ajuda { color:var(--ink3); font-size:13px; line-height:1.6; margin:0 0 12px; }
.bi .tabela-wrap { background:var(--white); border:1px solid var(--rule); border-radius:var(--r);
                   box-shadow:var(--sh); overflow:auto; padding:4px 16px 8px; }
.bi .tabela { border-collapse:collapse; width:100%; font-size:13.5px; min-width:0; }
.bi .tabela th,.bi .tabela td { padding:8px 10px; }
.bi .tabela thead th { background:var(--white); color:var(--ink3); font-size:11px; font-weight:600; letter-spacing:.055em;
                       text-transform:uppercase; border-bottom:1px solid var(--ruleStrong); padding-top:11px; }
.bi .tabela tbody td { border-top:0; border-bottom:1px solid var(--rule2); color:var(--ink2); }
.bi .tabela tbody tr:hover { background:var(--wash); }
.bi .tabela .col-num { text-align:right; font-variant-numeric:tabular-nums; color:var(--ink); }
.bi .dash-filtro label { font-size:11px; font-weight:600; letter-spacing:.075em; text-transform:uppercase; color:var(--ink3); }
.bi .rank { background:transparent; color:var(--ink3); font-family:var(--mono); font-size:11.5px; font-weight:400; }
.bi .rank-top { background:transparent; color:var(--ink); font-weight:600; }
.bi .pill { border-radius:var(--rSm); font-size:12px; font-weight:600; }
.bi .pill-pos { background:#EEF6EE; color:var(--good); }
.bi .pill-neg { background:var(--badWash); color:var(--bad); }
.bi .pill-warn { background:#FFFBEB; color:var(--warnInk); }
.bi .ins-card { background:var(--white); border:1px solid var(--rule); border-left:3px solid var(--rule);
                border-radius:var(--r); box-shadow:var(--sh); }
.bi .ins-card.sev-alta { border-left-color:var(--bad); }
.bi .ins-card.sev-media { border-left-color:var(--warnInk); }
.bi .ins-card.sev-baixa { border-left-color:var(--blue); }
.bi .ins-topo h4 { font-family:var(--tit); font-size:16.5px; font-weight:800; letter-spacing:-.015em; color:var(--ink); }
.bi .ins-rot { font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--ink3); }
.bi .ins-acao { background:var(--blueWash); border-radius:var(--rSm); }
.bi .ins-acao .ins-rot { color:var(--blueDeep); }
/* O seletor padrao dentro do BI, com a paleta desta area. O comportamento
   (veu transparente no toque) vem de styles.css e nao se repete aqui. */
.bi .sel { background:rgba(17,19,24,.05); border-color:var(--rule); border-radius:var(--r); }
.bi .sel-item { color:var(--ink2); font-family:var(--sans); }
.bi .sel-item.ativo { background:var(--white); color:var(--blueDeep); }
.bi .sel-n { background:rgba(17,19,24,.06); color:var(--ink3); }
.bi .sel-item.ativo .sel-n { background:var(--blueWash); color:var(--blueDeep); }
.bi .ins-nav-btn { background:var(--white); border-color:var(--ruleStrong); color:var(--ink); }
.bi .ins-progresso-cursor { background:var(--blue); }
.bi .chat-usuario { background:var(--blue); }
.bi .chat-ia { background:var(--white); border:1px solid var(--rule); }
.bi .imp-zona { border:1.5px dashed var(--ruleStrong); background:var(--wash); border-radius:var(--r); }
.bi .imp-zona-drag { border-color:var(--blue); background:var(--blueWash); }
.bi .passo-ok { background:#EEF6EE; border-color:#CFE4CF; color:var(--good); }
.bi .passo-erro { background:var(--badWash); border-color:#F0CFCE; color:var(--bad); }
.bi .passo-rodando { background:var(--blueWash); border-color:#CBDFF6; color:var(--blueDeep); }

@media(max-width:900px) {
  .bi { padding:18px; }
  .bi > .topbar { margin:-18px -18px 0; padding:10px 18px; }
  .bi .topbar .ctx { margin-left:0; width:100%; }
  .bi > .conteudo { padding:18px 0 0; }
  .bi > .bi-topo { margin:-18px -18px 18px; padding:9px 18px; }
}