/* Trevo Drywall — folha de estilo compartilhada pelas telas do sistema.
   (login, inicio, nova proposta/cliente, fila/detalhe de aprovacao,
   ajuste, pos-aprovacao, historico). Extraida das mesmas variaveis e
   Identidade alinhada a proposta comercial Trevo aprovada. Mobile-first. */

:root{
  --navy:#075f35;
  --navy2:#064a2b;
  --blue:#087b42;
  --lime:#19a85b;
  --lime-soft:#e7f6ed;
  --bg:#f4f7f2;
  --card:#ffffff;
  --ink:#203021;
  --muted:#6d786d;
  --line:#dbe5d8;
  --soft:#edf4ea;
  --green:#087b42;
  --green-bg:#eaf6e6;
  --amber:#996515;
  --amber-bg:#fff7e7;
  --red:#a43c36;
  --red-bg:#fbeceb;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink);font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}
/* Rodada 39 (30/09/2026): Roberta reportou que, ao trocar de aba, a
   largura da página muda (perceptível pelo cabeçalho). Investigação:
   .shell já usa max-width:960px uniformemente em TODAS as telas internas
   (nenhuma página sobrescreve isso), main{padding:12px} também é igual em
   todas. O bug mais provável não é largura de container e sim conteúdo
   largo (SVGs/grids de telas como Visão Global) escapando do viewport sem
   barra de rolagem própria e empurrando a página inteira mais larga que a
   tela, o que desloca o .shell centralizado — overflow-x:hidden no
   documento impede isso sem afetar rolagem interna já tratada
   (.table-wrap{overflow:auto}).
   Nota: como não há navegador disponível para conferir visualmente o
   render ao vivo, esta é a correção estrutural mais provável — se Roberta
   ainda perceber diferença de tamanho depois do deploy, comparar
   screenshots das telas específicas para achar a causa exata. */
html,body{overflow-x:hidden}
body{min-height:100vh}
.shell{max-width:960px;margin:0 auto;min-height:100vh;background:#f7f9f7}
.topbar{background:#075f35;color:#fff;padding:16px;position:sticky;top:0;z-index:5;box-shadow:0 2px 12px rgba(9,26,44,.12)}
.brandline{display:flex;align-items:center;justify-content:space-between;gap:12px}
/* Rodada 52 (02/10/2026, pedido de Roberta: "tirar o quadrado branco da
   logo da trevo" — o PNG (trevo-mark.png) já é transparente; o quadrado
   branco vinha só do background-color/border brancos deste seletor,
   pensados pra uma versão antiga do mark. Removidos: a logo agora fica
   direto sobre o verde do cabeçalho, igual ao modelo que ela anexou. */
.brand{display:flex;align-items:center;gap:9px}.brand:before{content:"";width:38px;height:38px;flex:0 0 auto;background-image:url("../assets/trevo-mark.png");background-size:100% 100%;background-repeat:no-repeat;background-position:center}
.dekmark{font-size:0;line-height:1}.dekmark:before{content:"Trevo";font-size:22px;font-weight:850;letter-spacing:.08em;color:#fff}
.dekname{font-size:0;color:#fff;line-height:1.2}.dekname:before{content:"DRYWALL";display:block;font-size:9px;font-weight:850;letter-spacing:.22em;color:#dcefe4;margin-top:3px}.dekname small{display:none}
.pilot{font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;border:1px solid rgba(255,255,255,.45);padding:6px 9px;border-radius:999px;background:rgba(255,255,255,.09);color:#fff}
.product-title{margin-top:7px;font-size:15px;color:#f3fff0;border-top:1px solid rgba(255,255,255,.14);padding-top:9px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.product-title a,.product-title a:visited,.home-link,.home-link:visited{color:#f3fff0;text-decoration:none;font-weight:750}
.product-title button{background:none;border:1px solid rgba(255,255,255,.35);color:#f3fff0;border-radius:999px;padding:5px 11px;font-size:11px;font-weight:700;cursor:pointer}
main{padding:12px}
.hero{background:linear-gradient(145deg,#fff,#f7fbf5);border:1px solid var(--line);border-radius:20px;padding:17px;margin-bottom:14px;box-shadow:0 10px 28px rgba(47,127,45,.08)}
.eyebrow{font-size:11px;font-weight:800;letter-spacing:.10em;text-transform:uppercase;color:var(--blue);margin-bottom:8px}
h1{font-size:23px;line-height:1.12;margin:0 0 9px;color:var(--navy)}
.hero p{margin:0;color:var(--muted);font-size:14px;line-height:1.55}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:15px;margin-bottom:14px;box-shadow:0 7px 20px rgba(47,127,45,.05)}
.card h2{font-size:18px;margin:0 0 5px;color:var(--navy)}
.card .lead{font-size:13px;color:var(--muted);margin:0 0 14px;line-height:1.5}
label{display:block;font-size:12px;font-weight:750;color:#5b6776;margin-bottom:6px}
input[type=text],input[type=email],input[type=search],input[type=date],input[type=number],textarea,select{width:100%;border:1px solid #cfd7df;border-radius:14px;padding:13px 14px;font:inherit;font-size:15px;line-height:1.45;resize:vertical;outline:none;background:#fff}
input[type=text]:focus,input[type=email]:focus,input[type=search]:focus,textarea:focus{border-color:#77b76d;box-shadow:0 0 0 3px rgba(63,150,53,.10)}
.hint{font-size:11px;color:#7b8593;margin-top:7px;line-height:1.45}
/* 30/09/2026 (pedido de Roberta: "só ficou muito pequeno o texto do peso") — resumo de peso ao vivo do carrinho (cliente e vendedor) precisa de mais destaque que um .hint comum; classe própria para não alterar os outros usos de .hint no sistema. */
.peso-resumo{font-size:14px;color:var(--navy);margin-top:10px;line-height:1.5;background:#f2f6f3;border-radius:12px;padding:10px 12px}
.primary{width:100%;border:0;border-radius:14px;padding:14px 16px;background:var(--navy);color:#fff;font-weight:850;font-size:15px;margin-top:12px;cursor:pointer}
.primary:disabled{opacity:.6;cursor:default}
.secondary{width:100%;border:0;border-radius:13px;padding:14px 10px;font-size:14px;font-weight:800;cursor:pointer;background:#edf1f4;color:var(--navy)}
.secondary:disabled{opacity:.5;cursor:default}
.footer{padding:6px 4px 24px;text-align:center;color:#86909d;font-size:10px}
.footer strong{color:#5d6876}
.msg{border-radius:13px;padding:13px;font-size:13px;line-height:1.5;margin-bottom:14px}
.msg.info{background:var(--soft);color:#365142}
.msg.warn{background:var(--amber-bg);color:#72501b}
.msg.error{background:var(--red-bg);color:#7a2c27}
.hidden{display:none !important}
.nav-grid{display:grid;grid-template-columns:1fr;gap:8px;align-items:start}.money-positive{color:var(--green);font-weight:850}.money-negative{color:var(--red);font-weight:850}.chart-bars{display:flex;align-items:flex-end;gap:12px;height:190px;padding:12px 6px 0;border-bottom:1px solid var(--line)}.chart-column{flex:1;height:100%;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:5px}.chart-column i{display:block;width:66%;min-width:40px;background:linear-gradient(#25a864,#075f35);border-radius:8px 8px 0 0}.chart-column b{font-size:11px;color:var(--navy)}.chart-column.negativo i{background:linear-gradient(#e2554a,#8c231c)}.chart-column.negativo b{color:var(--red)}.chart-column span{font-size:10px;color:var(--muted);padding-bottom:7px}.table-wrap{overflow:auto}.data-table{width:100%;min-width:820px;border-collapse:collapse;font-size:11px}.data-table th,.data-table td{padding:10px 7px;border-bottom:1px solid var(--line);text-align:left}.data-table th{text-transform:uppercase;font-size:9px;color:var(--muted)}

/* --- listas / cards de registro (fila, historico, home) --- */
.lista{display:grid;gap:9px}
.item{display:block;width:100%;text-align:left;background:#f8fafb;border:1px solid #e6eaee;border-radius:14px;padding:13px 14px;cursor:pointer;font:inherit;color:inherit;text-decoration:none}
.item:hover{border-color:#b9d6b4}
.item .linha1{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
.item b{font-size:14px;color:var(--navy)}
.item .numero{font-size:11px;color:#7b8593;font-weight:700}
.item .linha2{display:flex;justify-content:space-between;gap:10px;margin-top:5px;font-size:12px;color:var(--muted)}
.empty{padding:26px 16px;text-align:center;color:#7b8593;font-size:13px;background:#f8fafb;border:1px dashed #d9e0e6;border-radius:14px}

/* Rodada 39 (30/09/2026): .product-list/.prod (lista de itens em
   detalhe-aprovacao.html) nunca tinha CSS proprio — nome e detalhe de cada
   produto ficavam sem espacamento/separacao entre eles, parecendo "todos
   empilhados" (reportado por Roberta com screenshot). Mesmo padrao visual
   ja usado em .item/.linha1/.linha2 (cards de Fechamentos/Aprovacoes). */
.product-list{display:flex;flex-direction:column;gap:8px}
.prod{display:flex;justify-content:space-between;align-items:baseline;gap:10px;background:#f8fafb;border:1px solid #e6eaee;border-radius:12px;padding:10px 14px;font-size:13px}
.prod b{font-size:13px;color:var(--navy)}
.prod span{color:var(--muted);text-align:right}

/* --- badges de status --- */
.badge{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.badge.ok{background:var(--green-bg);color:var(--green)}
.badge.pendente{background:var(--amber-bg);color:#72501b}
.badge.atencao{background:var(--red-bg);color:#7a2c27}
.badge.neutro{background:#eef2f5;color:#4c5c70}

/* --- info grid (dados somente-leitura) --- */
.info-grid{display:grid;gap:8px}
.info{background:#f7f9fb;border:1px solid #e3e7eb;border-radius:12px;padding:10px 11px}
/* Rodada seguinte (29/09/2026, pedido de Roberta: "Analise cliente: deixar
   em uma unica linha") — modificador PRÓPRIO (não mexe no `.info-grid`
   base, usado em outras telas com contagens de campo diferentes): os 4
   campos (Conversão/Volume fechado/PML/Valor em aberto) da Análise do
   cliente cabem numa única linha a partir de telas de desktop comuns. */
.info-grid-4{grid-template-columns:repeat(2,1fr)}
@media(min-width:640px){.info-grid-4{grid-template-columns:repeat(4,1fr)}}
.info small{display:block;color:#7a8593;font-size:10px;text-transform:uppercase;letter-spacing:.06em;font-weight:750;margin-bottom:3px}
.info b{font-size:13px;color:#213044}

/* --- resultado de busca de cliente --- */
.resultado-cliente{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1px solid #e6eaee;border-radius:12px;padding:11px 12px;margin-bottom:8px;cursor:pointer}
.resultado-cliente:hover{border-color:#b9d6b4}
.resultado-cliente .nome{font-size:13px;font-weight:800;color:var(--navy)}
.resultado-cliente .doc{font-size:11px;color:#7b8593}
/* Rodada 42 (01/10/2026, pedido de Roberta: "as abas ainda nao estao do
   mesmo tamanho que as demais"): causa real era relatorios.html (unica
   pagina com .internal-tabs usando <button class="chip"> em vez de <a>, como
   nav.js gera em todas as outras) — a regra abaixo so' tinha selector pra
   `a`, entao esses botoes caiam no .chip generico (padding 7px/11px, peso
   750) em vez do padding 9px/12px, peso 850 que toda outra aba do sistema
   usa. Agora `button` tem exatamente a mesma regra, qualquer elemento dentro
   de .internal-tabs fica do mesmo tamanho dali pra frente. */
.internal-tabs{display:flex;gap:6px;overflow-x:auto;padding:2px 0 12px;scrollbar-width:thin}.internal-tabs a,.internal-tabs a:visited,.internal-tabs button{white-space:nowrap;border:1px solid #d4dfd2;background:#fff;color:#596a59;border-radius:999px;padding:9px 12px;font-size:11px;font-weight:850;text-decoration:none;cursor:pointer}.internal-tabs a.active,.internal-tabs button.active{background:var(--navy);border-color:var(--navy);color:#fff}

/* --- nav de 2 camadas (grupo + sub-aba), Fase 2B7a1 28/09/2026 — ver
   public/fase2a/nav.js. A camada de grupo fica em cima (estilo de abas
   sublinhadas); a camada de sub-aba reaproveita .internal-tabs (pills)
   logo abaixo, ja definido acima. */
.nav2{margin-bottom:2px}
.nav2-grupos{display:flex;gap:4px;margin-bottom:10px;border-bottom:2px solid var(--line);overflow-x:auto;scrollbar-width:thin}
.nav2-grupo,.nav2-grupo:visited{white-space:nowrap;padding:9px 12px 11px;font-size:11px;font-weight:850;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-2px}
.nav2-grupo.active{color:var(--navy);border-bottom-color:var(--navy)}
.modal-backdrop{position:fixed;inset:0;background:#10271899;z-index:30;display:grid;place-items:center;padding:18px}.modal-card{width:min(440px,100%);max-height:calc(100vh - 36px);overflow-y:auto;background:#fff;border-radius:18px;padding:18px;box-shadow:0 20px 60px #0004}.modal-card textarea,.modal-card select{margin-bottom:12px}

/* --- card de empresa (Gestão de empresas / Painel global) — Fase 2B7a1,
   28/09/2026: extraido para cá porque antes so existia no <style> local de
   painel-global.html (como estilo de barra de progresso, classe "barra"),
   entao a mesma lista renderizada por painel-empresas.js ficava sem
   nenhum estilo em classificacao-clientes.html ("empilhada"). Compartilhado
   agora, funciona em qualquer página. */
.acoes{display:flex;gap:8px;flex-wrap:wrap}
.empresa-card{background:#f8fafb;border:1px solid #e6eaee;border-radius:14px;padding:13px 14px;margin-bottom:9px}
.empresa-card b{font-size:14px;color:var(--navy);display:block}
.empresa-card .doc{font-size:12px;color:#7b8593}
.empresa-card small{display:block;color:var(--muted);font-size:12px;margin:4px 0 2px}
.empresa-card .acoes{margin-top:9px}
.empresa-card .acoes button{width:auto;flex:1 1 140px;margin-top:0}

/* --- Inteligência Trevo (Visão Global / Clientes) — Fase 2B7a1,
   28/09/2026: widgets compartilhados entre painel-global.html e
   clientes.html, os dois consumindo o mesmo motor já testado
   (calcularVisaoGeral, via GET /api/fase2a/relatorios/visao-geral) —
   desenho aprovado por Roberta em prototipo-inteligencia-comercial-dek_6.html. */
.kpis-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.kpi-card{background:#fff;border:1px solid var(--line);border-radius:15px;padding:12px;min-height:86px}
.kpi-card small{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.06em;font-weight:850}
.kpi-card b{display:block;color:var(--navy);font-size:20px;margin:7px 0 2px}
.kpi-card span{font-size:10px;color:var(--muted)}
.funil-linha{display:grid;grid-template-columns:78px 1fr 92px;align-items:center;gap:8px;margin:9px 0;font-size:11px}
.track{height:10px;background:#edf2eb;border-radius:999px;overflow:hidden}
.fill{height:100%;background:linear-gradient(90deg,#80b874,var(--navy));border-radius:999px}
.donut-wrap{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:15px}
.donut{width:118px;height:118px;border-radius:50%;position:relative}
.donut:after{content:"";position:absolute;inset:24px;border-radius:50%;background:#fff}
.donut-legenda{display:grid;gap:7px;font-size:11px}
/* Rodada seguinte (29/09/2026, pedido de Roberta: "ajustar a nomenclatura
   e percentual para ficarem mais proximos") — nome da família e percentual
   ficam colados um ao outro (sem "justify-content:space-between" jogando o
   percentual pro extremo direito do card), o par inteiro alinhado à
   esquerda. */
.donut-legenda div{display:flex;align-items:center;gap:8px}
.donut-legenda div b{margin-left:2px}
.donut-legenda i{width:9px;height:9px;border-radius:3px;margin-right:6px;display:inline-block}
.rank-linha{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding:9px 0;font-size:12px}
.rank-linha:first-of-type{border-top:0}
.rank-linha b{color:var(--navy)}
.rank-linha .barra-mini{flex:1;height:8px;background:#edf2eb;border-radius:999px;overflow:hidden;margin:0 8px}
.rank-linha .barra-mini i{display:block;height:100%;background:linear-gradient(90deg,#80b874,var(--navy))}
.insight-box{background:linear-gradient(135deg,#eff7ec,#fff);border:1px solid var(--line);border-radius:14px;padding:12px;margin-top:10px;font-size:11.5px;color:var(--muted);line-height:1.5}
.insight-box strong{display:block;color:var(--navy);font-size:12px;margin-bottom:4px}
.chart-mensal{width:100%;height:auto;display:block}
.muted{color:var(--muted)}
.chart-mensal .eixo{font-size:8px;fill:var(--muted)}
.chart-mensal .valor{font-size:8px;font-weight:800}
.chart-mensal .valor-fat{fill:#e29b0b}
.chart-mensal .valor-vol{fill:#57964d}
.chart-mensal .valor-pml{fill:#2f7f2d;font-size:7.5px}
@media(min-width:640px){.kpis-grid{grid-template-columns:repeat(3,1fr)}.donut-wrap{grid-template-columns:150px 1fr}.donut{width:150px;height:150px}.donut:after{inset:32px}}
/* Rodada seguinte (29/09/2026, pedido de Roberta: "Desempenho: deixa em
   uma unica linha") — os 6 cards de KPI (Simulações/Propostas/Aprovadas/
   Vendas fechadas/Valor fechado/Tempo de decisão) cabem numa única linha
   a partir de telas de desktop comuns; abaixo disso continuam em grade
   responsiva (2 ou 3 colunas) para não espremer o conteúdo em telas
   estreitas. */
@media(min-width:980px){.kpis-grid{grid-template-columns:repeat(6,1fr)}.kpi-card{padding:10px;min-height:76px}.kpi-card b{font-size:17px}}

/* --- Inteligência Trevo, complemento fiel ao print aprovado (rodada
   seguinte, 28/09/2026): rótulo central do donut, mapa de destinos
   (ilustração estática + lista real), combinações top-5, cartões de
   cliente com badges, destaque de maiores clientes e o padrão de lista
   de Relatórios / fluxo governado de Bases Comerciais. Reaproveita as
   mesmas variáveis --navy/--navy2/--muted/--line/--soft já usadas em
   todo o resto do sistema (identidade única — sem paleta paralela). */
.donut-center{position:absolute;inset:0;z-index:2;display:grid;place-content:center;text-align:center}
.donut-center b{font-size:20px;color:var(--navy)}
.donut-center span{font-size:9px;color:var(--muted);line-height:1.3}
.map-layout{display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:10px}
.embedded-map{width:100%;height:auto;display:block}
.brazil-map{width:100%;max-width:220px;margin:auto}
.map-list{display:grid;gap:7px;font-size:10px}
.map-list div{display:flex;justify-content:space-between;gap:6px;border-bottom:1px solid var(--line);padding-bottom:5px}
.heat-scale{height:7px;border-radius:99px;background:linear-gradient(90deg,#f8e9b4,#e5a81a,#d86f16,#a73d21);margin-top:11px}
.heat-caption{display:flex;justify-content:space-between;color:var(--muted);font-size:9px;margin-top:4px}
.combo{display:flex;align-items:center;gap:10px;margin:11px 0}
.combo-rank{width:26px;height:26px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:var(--soft);color:var(--navy);font-weight:900;font-size:11px}
.combo-main{flex:1}
.combo-main b{display:block;font-size:12px;color:var(--ink)}
.combo-main span{font-size:10px;color:var(--muted)}
.combo-pct{font-size:18px;font-weight:900;color:var(--navy)}
.funnel-value{text-align:center;color:var(--navy);font-size:12px;font-weight:900;margin-top:8px}
.alert{background:var(--amber-bg);border:1px solid #f0d899;border-radius:13px;padding:12px 13px;color:#75541a;font-size:11px;line-height:1.5}
.client{width:100%;text-align:left;background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px;margin-top:8px;color:inherit;font:inherit;cursor:pointer}
.client:hover{border-color:#b9d6b4}
.client b{font-size:13px;color:var(--navy)}
.client p{font-size:11px;color:var(--muted);margin:5px 0 0}
.between{display:flex;align-items:center;justify-content:space-between;gap:8px;flex-wrap:wrap}
.client-meta{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}
.tag{background:var(--soft);border-radius:999px;padding:5px 8px;color:#3a5a3c;font-size:9px;font-weight:750}
.badge.warn{background:var(--amber-bg);color:#72501b}
.destaque-clientes{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
.destaque-clientes div{background:var(--soft);border-radius:12px;padding:10px 11px}
.destaque-clientes small{display:block;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.destaque-clientes b{display:block;margin-top:4px;font-size:12px;color:var(--navy)}
.close-box{border:1px solid var(--line);border-radius:13px;padding:11px;background:var(--soft)}
.close-box small{display:block;font-size:9px;color:var(--muted);text-transform:uppercase}
.close-box b{display:block;margin-top:5px;font-size:13px;color:var(--navy)}
.report-item{display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding:12px 0}
.report-item:first-child{border-top:0}
.report-item b{display:block;font-size:12px;color:var(--ink)}
.report-item span{display:block;font-size:10px;color:var(--muted);margin-top:3px}
.report-item button{white-space:nowrap;border:1px solid #b9cbb7;background:#fff;color:var(--navy);border-radius:10px;padding:9px 11px;font-size:10px;font-weight:850;cursor:pointer}
.governed-flow{display:grid;grid-template-columns:1fr;gap:8px}
.flow-step{border:1px solid var(--line);border-radius:12px;padding:11px;background:#f8faf7}
.flow-step b{font-size:11px;color:var(--navy)}
.flow-step span{display:block;font-size:10px;color:var(--muted);margin-top:4px}
@media(min-width:640px){.destaque-clientes{grid-template-columns:1fr 1fr}.governed-flow{grid-template-columns:repeat(4,1fr)}}

/* --- filtros por chip (rodada seguinte, 28/09/2026, pedido de Roberta:
   filtros de periodo/regiao/clientes na Visao Global) — extraido do
   <style> local de relatorios.html pra ficar compartilhado (mesmo padrao
   visual agora tambem em painel-global.html/clientes.html). Regras 6/8 de
   autoridade continuam so' no backend — isto e' so' apresentacao. */
.filtros{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.filtros .grupo{display:flex;flex-direction:column;gap:5px}
.filtros label{font-size:10px;color:var(--muted);text-transform:uppercase;font-weight:800}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:1px solid #d4dfd2;background:#fff;color:#596a59;border-radius:999px;padding:7px 11px;font-size:11px;font-weight:750;cursor:pointer}
.chip.active{background:var(--navy);border-color:var(--navy);color:#fff}
.chip-multi{border:1px solid #d4dfd2;background:#fff;color:#596a59;border-radius:999px;padding:6px 10px;font-size:11px;cursor:pointer;display:inline-flex;align-items:center;gap:5px}
.chip-multi.active{background:#eaf5ea;border-color:#8fbf8a;color:#1c4a26;font-weight:750}
.periodo-custom{display:flex;gap:8px;align-items:flex-end}

/* --- filtro em dropdown compacto (rodada 39, 30/09/2026, pedido de
   Roberta: "estado desejado: virar dropdown compacto — Período ▼ / Região
   ▼ / Clientes ▼, no mesmo estilo enxuto da barra de abas". Usado por
   enquanto só em painel-global.html (Visão Global) — Relatórios continua
   com o painel de chips sempre expandido antiga (tela adiada, não
   mexida) e Clientes nunca teve esse filtro. Como Região/Clientes
   continuam multi-seleção (com opção "todas"/"todos"), o painel do
   dropdown reaproveita os mesmos .chip-multi de sempre — só o botão que
   abre/fecha e' novo. */
.filtro-bar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.filtro-dropdown{position:relative}
.filtro-dropdown-btn{white-space:nowrap;border:1px solid #d4dfd2;background:#fff;color:var(--navy);border-radius:999px;padding:9px 12px;font-size:11px;font-weight:850;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.filtro-dropdown-btn .seta{font-size:9px;color:var(--muted)}
.filtro-dropdown.aberto .filtro-dropdown-btn{background:var(--navy);border-color:var(--navy);color:#fff}
.filtro-dropdown.aberto .filtro-dropdown-btn .seta{color:#fff}
.filtro-dropdown-painel{position:absolute;top:calc(100% + 6px);left:0;z-index:20;min-width:240px;max-width:min(340px,86vw);max-height:300px;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px rgba(15,40,25,.14);padding:10px}
.filtro-dropdown-atalho{width:100%;text-align:left;border:none;background:none;color:var(--navy);font-size:11px;font-weight:800;padding:6px 4px;cursor:pointer;border-bottom:1px solid var(--line);margin-bottom:6px}
.filtro-aviso-escopo{font-size:10px;color:var(--muted);margin:2px 0 0}
/* --- lista vertical dentro do dropdown (rodada 40, 01/10/2026, pedido de
   Roberta: "1a figura como está [chips lado a lado, quebrando linha] — 2a
   e 3a figura como deve ficar, uma opção embaixo da outra"). Só dentro do
   painel do dropdown — fora dele, .chips/.chip/.chip-multi continuam como
   sempre (chips lado a lado), usados em outras telas. */
.filtro-dropdown-painel .chips{flex-direction:column;flex-wrap:nowrap;gap:2px}
.filtro-dropdown-painel .chip,.filtro-dropdown-painel .chip-multi{width:100%;box-sizing:border-box;border-radius:8px;justify-content:flex-start;text-align:left;border-color:transparent;padding:8px 10px}
.filtro-dropdown-painel .chip:hover,.filtro-dropdown-painel .chip-multi:hover{background:#f3f7f3}
.filtro-dropdown-painel .chip.active,.filtro-dropdown-painel .chip-multi.active{background:#eaf5ea;border-color:#8fbf8a;color:#1c4a26}

/* --- funil em barras laterais (rodada seguinte, 28/09/2026) — mesmo
   padrao ja usado em Relatórios, agora compartilhado. */
.funnel-row{display:grid;grid-template-columns:80px 1fr 130px;align-items:center;gap:8px;font-size:11px;margin-bottom:9px}
.funnel-track{height:20px;background:#edf3ed;border-radius:6px;overflow:hidden}
.funnel-fill{height:100%;background:linear-gradient(90deg,#8fbf8a,var(--navy))}

/* --- seletor pequeno embutido no cabecalho de um card (ex.: "Formato do
   funil", "PML sem FT ▾", "Volume % / Faturamento R$ k") — rodada
   seguinte, 28/09/2026. */
.card-topo{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.select-inline{border:1px solid var(--line);border-radius:10px;padding:8px 10px;font-size:11px;font-weight:750;color:var(--navy);background:#fff}
/* Rodada seguinte (29/09/2026, pedido de Roberta: o seletor PML/PML com FT
   "deve constar: PML | PML com FT" — as duas opções sempre visíveis, não
   escondidas atrás de um dropdown que só mostra a selecionada). */
.toggle2{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;flex:0 0 auto}
.toggle2 button{border:0;background:#fff;color:var(--navy);font-size:11px;font-weight:750;padding:8px 11px;cursor:pointer;white-space:nowrap}
.toggle2 button+button{border-left:1px solid var(--line)}
.toggle2 button.active{background:var(--navy);color:#fff}
.chart-legenda{display:flex;flex-wrap:wrap;gap:12px;font-size:10.5px;color:var(--muted);margin:2px 0 10px}
.chart-legenda span{display:inline-flex;align-items:center;gap:5px}
.chart-legenda i{width:9px;height:9px;border-radius:3px;display:inline-block}

@media(min-width:560px){
  .topbar{padding:18px 20px 17px}
  main{padding:16px}
  .hero{padding:20px}
  .card{padding:17px}
  h1{font-size:26px}
  .nav-grid{grid-template-columns:repeat(2,1fr)}
}