/* ===========================================================================
   ESTATÍSTICAS (BI) — painel › Publicidade (Lalo, 03/10/2026)
   Uma cor por papel: roxo da marca para quantidade (claro → escuro), verde/rosa só para subiu/desceu.
   =========================================================================== */
.bi { --bi-1: #EEEDF8; --bi-2: #CFCBEF; --bi-3: #A39DE0; --bi-4: #6D66C4; --bi-5: #44409B; }
.bi-filtros { position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 14px; background: rgba(255, 255, 255, .96); backdrop-filter: blur(6px); }
.bi-filtros label { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; font-weight: 600; color: var(--mudo); }
.bi-filtros select { padding: 8px 10px; border: 1px solid var(--linha); border-radius: 10px; background: #fff; font: 600 .86rem var(--fonte); color: var(--tinta); }
.bi-filtros__info { margin-left: auto; font-size: .78rem; color: var(--mudo); }
[data-corpo] { transition: opacity .3s; } [data-corpo].is-carregando { opacity: .45; }

.bi-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.bi-kpi { display: grid; gap: 2px; padding: 14px 16px; border: 1px solid var(--linha); border-radius: 14px; background: #fff; }
.bi-kpi__rot { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mudo); }
.bi-kpi__val { font: 800 1.6rem/1.15 var(--fonte-t); color: var(--tinta); }
.bi-kpi__var { justify-self: start; padding: 1px 8px; border-radius: 99px; font-size: .74rem; font-weight: 700; background: #F1F0F8; color: var(--mudo); }
.bi-kpi__var.is-sobe { background: var(--verde-claro); color: #1F6B35; } .bi-kpi__var.is-desce { background: var(--rosa-claro); color: var(--rosa); }
.bi-kpi small { font-size: .72rem; color: var(--mudo); }

.bi-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bi-c { min-width: 0; padding: 16px 18px; border: 1px solid var(--linha); border-radius: 16px; background: #fff; }
.bi-c--largo { grid-column: 1 / -1; }
.bi-c header { margin-bottom: 12px; } .bi-c h3 { margin: 0; font-size: 1rem; } .bi-c header p { margin: 2px 0 0; font-size: .8rem; color: var(--mudo); }
.bi-c h4 { margin: 14px 0 6px; font: 700 .8rem var(--fonte-t); color: var(--tinta); }
.bi-vazio { margin: 6px 0; font-size: .84rem; color: var(--mudo); }

/* gráficos por dia: um embaixo do outro, cada um com a sua escala */
.bi-mini { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 14px; }
.bi-graf { margin: 0; min-width: 0; }
.bi-graf figcaption { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; color: var(--mudo); } .bi-graf figcaption b { color: var(--tinta); }
.bi-graf svg { display: block; width: 100%; height: auto; overflow: visible; }
.bi-graf text { font: 600 10px var(--fonte); fill: var(--mudo); }
.bi-eixo { stroke: var(--linha); stroke-width: 1; }
.bi-linha { fill: none; stroke: var(--bi-5); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.bi-area { fill: var(--bi-1); }
.bi-barra { fill: var(--bi-4); }
.bi-alvo { fill: transparent; cursor: crosshair; }
.bi-cruz line { stroke: var(--bi-3); stroke-width: 1; stroke-dasharray: 3 3; } .bi-cruz circle { fill: var(--bi-5); stroke: #fff; stroke-width: 2; }
@media (max-width: 900px) { .bi-grade { grid-template-columns: 1fr; } .bi-mini { grid-template-columns: 1fr; } }

/* tabela de canais */
.bi-tab { overflow-x: auto; }
.bi-tab table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.bi-tab th { padding: 6px 8px; text-align: left; font-size: .72rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--mudo); border-bottom: 1px solid var(--linha); white-space: nowrap; }
.bi-tab td { padding: 8px; border-bottom: 1px solid #F1F0F8; white-space: nowrap; color: var(--tinta); }
.bi-tab tr.is-sel td { background: #F6F5FD; }
.bi-col-barra { width: 34%; } .bi-col-barra .bi-barrinha { margin-right: 8px; }
.bi-link { padding: 0; border: 0; background: none; font: 700 .86rem var(--fonte); color: var(--marca); cursor: pointer; text-align: left; }
.bi-tag { display: inline-block; padding: 0 7px; border-radius: 99px; font-size: .66rem; font-weight: 700; background: #F1F0F8; color: var(--mudo); vertical-align: 1px; }
.bi-tag--pago { background: var(--ambar-claro); color: var(--ambar); }
.bi-coroa { color: #C99A00; font-size: .95rem; }

/* barrinhas das listas (mesma cor, comprimento = quantidade) */
.bi-barrinha { display: inline-block; flex: 1; min-width: 50px; height: 8px; border-radius: 99px; background: #F1F0F8; overflow: hidden; vertical-align: middle; }
.bi-barrinha i { display: block; height: 100%; border-radius: 99px; background: var(--bi-4); }
.bi-lista { display: grid; gap: 2px; }
.bi-lin { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: .84rem; color: var(--tinta); }
.bi-lin > span:first-child { flex: 0 1 46%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-lin b { min-width: 34px; text-align: right; } .bi-lin em { min-width: 70px; font-style: normal; font-size: .76rem; color: var(--mudo); }
.bi-lin small { color: var(--mudo); font-size: .74rem; }
.bi-ncl { display: inline-block; min-width: 26px; padding: 0 6px; border-radius: 6px; background: var(--marca-claro); color: var(--marca); font-size: .74rem; text-align: center; }
.bi-ferr { padding: 4px 0 8px; border-bottom: 1px dashed var(--linha); } .bi-ferr:last-child { border-bottom: 0; }
.bi-ferr small { display: block; margin-top: -2px; font-size: .76rem; color: var(--mudo); }

/* tipos de marca nas pesquisas (as três cores de sempre: produto, comércio, serviço) */
.bi-tipos { display: flex; gap: 2px; height: 14px; margin-bottom: 6px; border-radius: 99px; overflow: hidden; }
.bi-tipos i { display: block; height: 100%; }
.bi-tipo--produto { background: #6D66C4; } .bi-tipo--comercial { background: #E0A800; } .bi-tipo--servico { background: #2E9A5B; }
.bi-tipos__leg { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-bottom: 10px; font-size: .76rem; color: var(--mudo); }
.bi-tipos__leg i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 3px; vertical-align: -1px; }
.bi-tipos__leg b { color: var(--tinta); }

/* mapa do Brasil em quadradinhos */
.bi-c--largo .bi-mapa { float: left; width: min(420px, 100%); margin: 0 24px 8px 0; }
.bi-mapa svg { display: block; width: 100%; height: auto; }
.bi-uf { cursor: pointer; } .bi-uf rect { stroke: #fff; stroke-width: 2; transition: transform .3s; }
.bi-uf__sigla { font: 800 12px var(--fonte-t); fill: var(--tinta); pointer-events: none; } .bi-uf__n { font: 600 10px var(--fonte); fill: var(--tinta); pointer-events: none; }
.bi-uf--0 rect, i.bi-uf--0 { fill: #F5F5FA; background: #F5F5FA; }
.bi-uf--1 rect, i.bi-uf--1 { fill: var(--bi-1); background: var(--bi-1); } .bi-uf--2 rect, i.bi-uf--2 { fill: var(--bi-2); background: var(--bi-2); }
.bi-uf--3 rect, i.bi-uf--3 { fill: var(--bi-3); background: var(--bi-3); } .bi-uf--4 rect, i.bi-uf--4 { fill: var(--bi-4); background: var(--bi-4); }
.bi-uf--5 rect, i.bi-uf--5 { fill: var(--bi-5); background: var(--bi-5); }
.bi-uf--4 text, .bi-uf--5 text { fill: #fff; }
.bi-uf:hover rect, .bi-uf:focus rect { stroke: #2F6FD6; stroke-width: 3; } .bi-uf.is-sel rect { stroke: #2F6FD6; stroke-width: 4; }
.bi-uf:focus { outline: none; }
.bi-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; font-size: .74rem; color: var(--mudo); }
.bi-legenda i { display: inline-block; width: 22px; height: 10px; border-radius: 3px; } .bi-legenda small { flex-basis: 100%; }
.bi-regioes { overflow: hidden; } .bi-regioes h4:first-child { margin-top: 0; }
.bi-alterna { display: inline-flex; margin-bottom: 8px; padding: 3px; border: 1px solid var(--linha); border-radius: 99px; background: #F5F5FA; }
.bi-alterna button { padding: 5px 14px; border: 0; border-radius: 99px; background: transparent; font: 700 .78rem var(--fonte); color: var(--mudo); cursor: pointer; }
.bi-alterna button.is-on { background: var(--marca); color: #fff; }
@media (max-width: 700px) { .bi-c--largo .bi-mapa { float: none; margin-right: 0; } }

.bi-dica { position: fixed; z-index: 50; max-width: 280px; padding: 6px 10px; border-radius: 8px; background: var(--marca-900); color: #fff; font-size: .78rem; pointer-events: none; box-shadow: var(--sombra); }
.bi-rodape { margin: 14px 2px 0; font-size: .74rem; color: var(--mudo); }

/* Leitura do gestor: alerta (rosa/vermelho), atenção (laranja), positivo (verde) — sempre com o nome escrito, nunca só a cor */
.bi-leitura { margin: 0 0 16px; padding: 16px 18px; border: 1px solid var(--linha); border-radius: 16px; background: #fff; }
.bi-leitura header h3 { margin: 0; font-size: 1.05rem; } .bi-leitura header p { margin: 2px 0 10px; font-size: .82rem; color: var(--mudo); }
.bi-leitura__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
.bi-ponto { padding: 12px 14px; border: 1px solid var(--linha); border-left-width: 5px; border-radius: 12px; background: #FCFCFE; }
.bi-ponto--alerta { border-left-color: #C4483F; background: #FDF4F3; } .bi-ponto--atencao { border-left-color: #E08A00; background: #FFF9EE; } .bi-ponto--positivo { border-left-color: #1EB955; background: #F3FBF6; }
.bi-ponto b { display: block; margin-top: 6px; font: 700 .92rem/1.3 var(--fonte-t); color: var(--tinta); }
.bi-ponto p { margin: 4px 0 6px; font-size: .82rem; color: var(--corpo); }
.bi-ponto ul { margin: 0; padding-left: 18px; font-size: .8rem; color: var(--tinta); } .bi-ponto ul li { margin: 2px 0; }
.bi-ld { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: .7rem; font-weight: 800; letter-spacing: .02em; }
.bi-ld--alerta { background: #FDE3E1; color: #A3352D; } .bi-ld--atencao { background: #FFEFD2; color: #8A5A00; } .bi-ld--positivo { background: #DDF5E6; color: #1F6B35; }