/* =====================================================================
   contabil-margem.css — Módulo Contábil · Margem de Contribuição
   Skin "Claude Design" (mesmos tokens do dash-v2 / Funil de Oportunidades),
   compartilhada pelos 3 submódulos:
     • contabil-margem.html            → Visão Geral
     • contabil-margem-analitico.html  → Analítico
     • contabil-margem-nf.html         → Analítico por NF

   Prefixos:
     fx-*  família herdada do Funil (head, tabs, filtros, painéis, dropdowns)
     mg-*  visuais próprios deste módulo (hero, KPIs, cascata, tributos,
           filiais, matriz)
   ===================================================================== */

/* ---------- layout base ---------- */
.fx-wrap{padding:22px 0 48px;display:flex;flex-direction:column;gap:16px;}
.fx-panel{background:#fff;border:1px solid #E3EAF2;border-radius:14px;padding:20px 22px;min-width:0;}
.fx-p-title{font-size:14.5px;font-weight:800;color:#0A2E5C;}
.fx-p-sub{font-size:12px;color:#7C93A8;margin-top:2px;}
.fx-p-hint{font-size:11.5px;color:#7C93A8;}
.fx-p-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.fx-empty{padding:24px;text-align:center;color:#93A7BA;font-size:12px;}

/* ---------- título + abas de submódulo ---------- */
.fx-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.fx-bc{display:flex;align-items:center;gap:6px;font-size:12px;color:#7C93A8;}
.fx-titlerow{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;}
.fx-title{margin:4px 0 0;font-size:23px;font-weight:800;letter-spacing:-0.5px;color:#0A2E5C;}
.fx-titlesub{font-size:12.5px;color:#7C93A8;font-weight:600;}
.fx-head-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.fx-tabs{display:flex;align-items:center;background:#FFFFFF;border:1px solid #E3EAF2;border-radius:11px;padding:3px;}
.fx-tabs a,.fx-tabs span{padding:8px 16px;border-radius:8px;font-size:12.5px;font-weight:600;color:#5B7189;text-decoration:none;white-space:nowrap;}
.fx-tabs a:hover{color:#0A2E5C;}
.fx-tabs .active{background:#0A2E5C;font-weight:700;color:#fff;}

/* ---------- banner de conexão ---------- */
.mg-banner{padding:11px 16px;border-radius:12px;font-size:13px;display:flex;align-items:center;gap:10px;
  background:#EFF6FF;border:1px solid #BFDBFE;color:#1E40AF;}
.mg-banner.ok{background:#EAF8F0;border-color:#CFEEDD;color:#22794C;}
.mg-banner.warn{background:#FDF3E7;border-color:#F6DFC0;color:#A8541F;}
.mg-banner.err{background:#FCEDED;border-color:#F3D2D2;color:#B54545;}
.mg-banner code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11.5px;background:rgba(10,46,92,0.06);
  border-radius:5px;padding:2px 6px;font-weight:600;}
.mg-banner svg{flex-shrink:0;}

/* ---------- barra de filtros ---------- */
.fx-filters{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;background:#fff;border:1px solid #E3EAF2;border-radius:12px;}
.fx-fdiv{width:1px;height:24px;background:#E3EAF2;}
.fx-fbtn{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:9px;border:1px solid #E3EAF2;background:#fff;
  font-size:12.5px;font-weight:600;color:#33495E;cursor:pointer;font-family:inherit;white-space:nowrap;}
.fx-fbtn:hover{border-color:#1272C4;}
.fx-fbtn .fx-fk{font-weight:700;color:#93A7BA;}
.fx-fbtn svg{flex-shrink:0;}
.fx-flimpar{margin-left:auto;display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:9px;border:none;
  background:transparent;font-size:12.5px;font-weight:600;color:#5B7189;cursor:pointer;font-family:inherit;white-space:nowrap;}
.fx-flimpar:hover{color:#B54545;}

/* dropdowns (padrão av-dd do portal) */
.av-dd{position:relative;display:inline-block;}
.av-dd-btn{padding:8px 12px;border-radius:9px;border:1px solid #E3EAF2;background:#fff;font-size:12.5px;font-weight:600;color:#33495E;
  cursor:pointer;display:inline-flex;align-items:center;gap:7px;font-family:inherit;white-space:nowrap;}
.av-dd-btn:hover{border-color:#1272C4;}
.av-dd-btn.has{border-color:#1272C4;background:#F0F7FE;}
.av-dd-btn .cnt{background:#1272C4;color:#fff;border-radius:999px;padding:0 7px;font-size:11px;font-weight:700;}
.av-dd-panel{position:absolute;z-index:60;top:calc(100% + 5px);left:0;width:274px;max-height:340px;display:none;flex-direction:column;
  background:#fff;border:1px solid #E3EAF2;border-radius:12px;box-shadow:0 10px 30px rgba(10,46,92,0.14);overflow:hidden;}
.av-dd.open .av-dd-panel{display:flex;}
.av-dd-search{padding:8px;border-bottom:1px solid #E3EAF2;}
.av-dd-search input{width:100%;padding:6px 8px;border:1px solid #E3EAF2;border-radius:6px;font-size:12px;font-family:inherit;box-sizing:border-box;}
.av-dd-list{overflow-y:auto;padding:4px;}
.av-dd-opt{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:6px;font-size:12.5px;color:#33495E;cursor:pointer;}
.av-dd-opt:hover{background:#F0F5FA;}
.av-dd-foot{display:flex;justify-content:space-between;padding:6px 10px;border-top:1px solid #E3EAF2;}
.av-dd-foot button{font-size:11.5px;color:#0A5A9E;background:none;border:none;cursor:pointer;font-weight:600;font-family:inherit;}
/* painel do período (Ano + Mês em chips) */
.fx-period-panel{width:340px;max-width:calc(100vw - 48px);max-height:none;overflow:visible;padding:12px;}
.fx-pp-sec{font-size:10.5px;font-weight:800;letter-spacing:0.8px;text-transform:uppercase;color:#93A7BA;margin:2px 2px 8px;}
.fx-pp-sec.mt{margin-top:12px;}
.fx-chips{display:flex;flex-wrap:wrap;gap:6px;}
.fx-chips button{padding:6px 12px;border-radius:8px;border:1px solid #E3EAF2;background:#fff;font-size:12px;font-weight:600;color:#33495E;
  cursor:pointer;font-family:inherit;}
.fx-chips button:hover{border-color:#1272C4;}
.fx-chips button.active{background:#0A2E5C;border-color:#0A2E5C;color:#fff;font-weight:700;}
.fx-pp-hint{font-size:11px;color:#93A7BA;margin-top:10px;}

/* ---------- grids ---------- */
.mg-top{display:grid;grid-template-columns:1.12fr 1fr 1fr;gap:14px;align-items:stretch;}
.mg-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;}
.fx-grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:14px;align-items:stretch;}

/* ---------- HERO (consolidado) ---------- */
.mg-hero{min-width:0;padding:22px;border-radius:14px;background:linear-gradient(150deg,#071E3D,#0E4A8A);color:#fff;
  position:relative;overflow:hidden;display:flex;flex-direction:column;}
.mg-hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(circle at 92% 8%, rgba(47,191,113,0.18), transparent 46%);}
.mg-hero>*{position:relative;}
.mg-hero-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.mg-hero-k{font-size:11.5px;font-weight:800;letter-spacing:1px;color:#A8C3DD;}
.mg-hero-pill{font-size:11px;font-weight:700;color:#CFE2F3;background:rgba(255,255,255,0.12);border-radius:999px;padding:4px 11px;white-space:nowrap;}
.mg-hero-vrow{display:flex;align-items:baseline;gap:12px;margin-top:12px;flex-wrap:wrap;}
.mg-hero-v{font-size:34px;font-weight:800;letter-spacing:-0.8px;}
.mg-hero-q{font-size:13px;font-weight:700;color:#4FD98D;}
.mg-hero-bar{display:flex;height:10px;border-radius:999px;overflow:hidden;margin-top:16px;background:rgba(255,255,255,0.10);}
.mg-hero-bar span{display:block;height:100%;}
.mg-hero-leg{display:flex;gap:14px;margin-top:10px;font-size:10.5px;font-weight:600;color:#8FAECB;flex-wrap:wrap;}
.mg-hero-leg span{display:inline-flex;align-items:center;gap:5px;}
.mg-hero-leg i{width:8px;height:8px;border-radius:2px;display:inline-block;}
.mg-hero-spacer{flex:1;min-height:12px;}
.mg-hero-foot{display:flex;gap:26px;margin-top:18px;padding-top:14px;border-top:1px solid rgba(255,255,255,0.10);flex-wrap:wrap;}
.mg-hero-foot .l{font-size:10.5px;font-weight:700;color:#8FAECB;letter-spacing:.03em;}
.mg-hero-foot .v{font-size:15px;font-weight:800;margin-top:3px;}
.mg-hero-foot .v.gr{color:#4FD98D;}
.mg-hero-foot .v.rd{color:#FF9C9C;}

/* ---------- cards de resumo (Receita bruta / Total de deduções) ---------- */
.mg-sum{background:#fff;border:1px solid #E3EAF2;border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;min-width:0;}
.mg-sum-k{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#7C93A8;}
.mg-sum-v{font-size:29px;font-weight:800;letter-spacing:-0.7px;color:#0A2E5C;margin-top:8px;line-height:1;}
.mg-sum-v.amb{color:#C77E22;}
.mg-sum-note{font-size:11.5px;color:#7C93A8;font-weight:600;margin-top:6px;}
.mg-sum-spacer{flex:1;min-height:14px;}
.mg-sum-rows{display:flex;flex-direction:column;}
.mg-sum-row{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 0;border-top:1px dashed #EDF2F8;}
.mg-sum-row:first-child{border-top:1px solid #EDF2F8;}
.mg-sum-row .l{font-size:12px;color:#5B7189;font-weight:600;}
.mg-sum-row .v{font-size:12.5px;font-weight:800;color:#0A2E5C;white-space:nowrap;font-variant-numeric:tabular-nums;}

/* ---------- faixa de KPIs ---------- */
.mg-kpi{background:#fff;border:1px solid #E3EAF2;border-radius:14px;padding:15px 17px;position:relative;overflow:hidden;min-width:0;}
.mg-kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:#1272C4;}
.mg-kpi.cy::before{background:#28A3C4;}
.mg-kpi.pu::before{background:#7A4BC4;}
.mg-kpi.gr::before{background:#2FBF71;}
.mg-kpi.am::before{background:#E8A33D;}
.mg-kpi-l{font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:#7C93A8;}
.mg-kpi-v{font-size:22px;font-weight:800;letter-spacing:-0.5px;color:#0A2E5C;margin-top:8px;line-height:1;}
.mg-kpi-s{font-size:11px;font-weight:600;color:#7C93A8;margin-top:7px;}
.mg-kpi.gr .mg-kpi-s{color:#22794C;}
.mg-kpi.am .mg-kpi-s{color:#A8541F;}

/* ---------- gráfico de evolução ---------- */
.mg-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11px;font-weight:700;color:#5B7189;}
.mg-legend span{display:inline-flex;align-items:center;gap:6px;}
.mg-legend i{width:10px;height:10px;border-radius:3px;display:inline-block;}
.mg-legend i.ln{width:16px;height:3px;border-radius:2px;}
.mg-chart{position:relative;height:270px;margin-top:16px;min-width:0;}

/* ---------- cascata (composição da margem) ---------- */
/* padding-top dá folga para o rótulo que fica ACIMA da barra mais alta */
.mg-wf{display:flex;align-items:flex-end;gap:6px;height:268px;margin-top:16px;padding:18px 0 26px;position:relative;}
.mg-wf-col{flex:1;min-width:0;height:100%;position:relative;display:flex;flex-direction:column;justify-content:flex-end;}
.mg-wf-bar{position:absolute;left:8%;right:8%;border-radius:4px;}
.mg-wf-bar.thin{left:14%;right:14%;min-height:3px;}
.mg-wf-val{position:absolute;left:0;right:0;text-align:center;font-size:10.5px;font-weight:800;white-space:nowrap;color:#0A2E5C;}
.mg-wf-val.neg{color:#C77E22;}
.mg-wf-lab{position:absolute;left:-6px;right:-6px;bottom:-24px;text-align:center;font-size:10.5px;font-weight:600;color:#5B7189;line-height:1.25;}
.mg-wf-axis{position:absolute;left:0;right:0;bottom:26px;border-bottom:1px solid #E3EAF2;}

/* ---------- impostos por tributo ---------- */
.mg-trib-stack{display:flex;height:14px;border-radius:999px;overflow:hidden;background:#F0F4F9;margin-top:18px;}
.mg-trib-stack span{display:block;height:100%;}
.mg-trib-rows{display:flex;flex-direction:column;gap:9px;margin-top:16px;}
.mg-trib-row{display:grid;grid-template-columns:86px 1fr 104px 52px;gap:11px;align-items:center;}
.mg-trib-tag{font-size:10px;font-weight:800;letter-spacing:.04em;color:#fff;background:#0A2E5C;border-radius:6px;padding:4px 0;text-align:center;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mg-trib-track{height:9px;border-radius:999px;background:#F0F4F9;overflow:hidden;}
.mg-trib-fill{height:100%;border-radius:999px;}
.mg-trib-v{text-align:right;font-size:12px;font-weight:800;color:#0A2E5C;white-space:nowrap;font-variant-numeric:tabular-nums;}
.mg-trib-p{text-align:right;font-size:11.5px;font-weight:600;color:#7C93A8;white-space:nowrap;font-variant-numeric:tabular-nums;}

/* ---------- margem por filial ---------- */
.mg-fil{display:flex;flex-direction:column;gap:11px;margin-top:18px;}
.mg-frow{display:grid;grid-template-columns:170px 1fr 66px 92px 92px 44px;gap:12px;align-items:center;}
/* cabeçalho: MESMA grade da linha, senão o rótulo não cai sobre a coluna */
.mg-fhead{display:grid;grid-template-columns:170px 1fr 66px 92px 92px 44px;gap:12px;align-items:end;
  padding-bottom:9px;border-bottom:1px solid #F0F5FA;}
.mg-fhead>div{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#93A7BA;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mg-fhead>div.n{text-align:right;}
.mg-fhead>div.bar{text-transform:none;letter-spacing:0;font-weight:600;font-size:10px;color:#7C93A8;}
/* referência: de qual medida/coluna do modelo saiu cada número */
.mg-fref{display:flex;flex-wrap:wrap;gap:6px 8px;align-items:center;margin-top:5px;padding-top:12px;border-top:1px solid #F0F5FA;}
.mg-fref-k{font-size:9.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#93A7BA;}
.mg-fref-i{font-size:10.5px;color:#5B7189;background:#F7FAFD;border:1px solid #EDF3F9;border-radius:7px;padding:4px 8px;line-height:1.35;}
.mg-fref-i b{color:#0A2E5C;font-weight:700;}
.mg-fref-i code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;color:#1272C4;}
/* no desktop os 4 números entram direto na grade da linha; no mobile viram
   uma faixa própria embaixo da barra (ver o @media) */
.mg-fnums{display:contents;}
.mg-fname{font-size:12px;font-weight:700;color:#0A2E5C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mg-ftrack{height:18px;border-radius:5px;background:#F0F4F9;overflow:hidden;position:relative;}
.mg-ffill{height:100%;border-radius:5px;}
.mg-fmeta{position:absolute;top:0;bottom:0;width:2px;background:#33495E;opacity:.55;}
.mg-fpct{text-align:right;font-size:12px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums;}
.mg-fval{text-align:right;font-size:12px;font-weight:700;color:#0A2E5C;white-space:nowrap;font-variant-numeric:tabular-nums;}
.mg-frec{text-align:right;font-size:12px;font-weight:600;color:#93A7BA;white-space:nowrap;font-variant-numeric:tabular-nums;}
.mg-fnota{text-align:right;font-size:12px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums;}
.mg-gr{color:#22794C;} .mg-am{color:#A8541F;} .mg-rd{color:#B54545;}

/* ---------- ANALÍTICO: visuais por dimensão ---------- */
/* grades: linha 1 = cliente | (dispersão + tipo de cliente) · linha 2 = família | estratégia
   Painéis da MESMA linha têm a MESMA altura: `align-items:stretch` + altura de
   linha fixa (`grid-template-rows` — `min-height` seria piso, não teto). Com `align-items:start` cada card ficava do tamanho
   do próprio conteúdo, e o mais curto deixava faixa branca ao lado do mais longo.
   Como a altura agora é fixa, quem tem mais item ROLA POR DENTRO (ver .mg-rk /
   .mg-bl abaixo) em vez de esticar o card — é isso que faz caber mais cliente,
   mais família e mais produto sem desalinhar a grade. */
.mg-an-g1{display:grid;grid-template-columns:1.18fr 1fr;gap:14px;align-items:stretch;grid-template-rows:900px;}
.mg-an-g2{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:stretch;grid-template-rows:700px;}
.mg-an-g1>.fx-panel,.mg-an-g2>.fx-panel,.mg-an-col>.fx-panel{display:flex;flex-direction:column;min-height:0;}
.mg-an-col{display:flex;flex-direction:column;gap:14px;min-width:0;min-height:0;}
/* na coluna da direita a dispersão tem altura fixa e o tipo de cliente pega o resto */
.mg-an-col>.fx-panel:last-child{flex:1;}
.mg-an-scatter{height:236px;margin-top:14px;position:relative;min-width:0;overflow:hidden;}

/* rolagem interna das listas: cabeçalho preso no topo, resto corre por baixo.
   O padding-bottom do cabeçalho cobre o `gap` da lista — sem ele a primeira
   linha aparecia rasgada no vão entre o cabeçalho e o corpo. */
.mg-rk,.mg-bl{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding-right:6px;
  scrollbar-width:thin;scrollbar-color:#CBD9E6 transparent;}
.mg-rk::-webkit-scrollbar,.mg-bl::-webkit-scrollbar,.mg-st-rows::-webkit-scrollbar{width:8px;}
.mg-rk::-webkit-scrollbar-track,.mg-bl::-webkit-scrollbar-track,.mg-st-rows::-webkit-scrollbar-track{background:transparent;}
.mg-rk::-webkit-scrollbar-thumb,.mg-bl::-webkit-scrollbar-thumb,.mg-st-rows::-webkit-scrollbar-thumb{background:#D8E3EE;border-radius:999px;}
.mg-rk::-webkit-scrollbar-thumb:hover,.mg-bl::-webkit-scrollbar-thumb:hover,.mg-st-rows::-webkit-scrollbar-thumb:hover{background:#BACBDC;}
.mg-rk-row.hd,.mg-bl-row.hd,.mg-st-row.hd{position:sticky;top:0;z-index:2;background:#fff;}
/* o Top de produtos fica fora das grades (card de largura cheia): sem altura de
   linha para herdar, o limite de rolagem é dado aqui */
#mg-an-prod{max-height:470px;}

/* lista ranqueada (clientes, produtos) */
.mg-rk{display:flex;flex-direction:column;gap:10px;margin-top:16px;}
.mg-rk.two{display:grid;grid-template-columns:1fr 1fr;gap:10px 22px;align-content:start;}
.mg-rk-row{display:grid;grid-template-columns:22px 1fr 88px 88px 60px;gap:10px;align-items:center;min-width:0;}
.mg-rk.sub .mg-rk-row{grid-template-columns:22px 1fr 118px 88px 88px 60px;}
/* cabeçalho na mesma grade: nomeia receita, margem R$ e % (padrão do painel de estratégia) */
.mg-rk-row.hd{align-items:end;padding-bottom:9px;border-bottom:1px solid #F0F5FA;}
.mg-rk-row.hd>div{font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#93A7BA;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mg-rk-row.hd>div.n{text-align:right;}
.mg-rk-n{font-size:10px;font-weight:800;color:#C3D2E0;font-variant-numeric:tabular-nums;}
.mg-rk-mid{min-width:0;}
.mg-rk-name{font-size:11.5px;font-weight:700;color:#0A2E5C;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mg-rk-cod{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;font-weight:700;color:#1272C4;margin-right:7px;}
.mg-rk-track{height:5px;border-radius:999px;background:#F0F4F9;overflow:hidden;margin-top:5px;}
.mg-rk-fill{height:100%;border-radius:999px;}
.mg-rk-sub{font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#93A7BA;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mg-rk-rb{text-align:right;font-size:11.5px;font-weight:600;color:#93A7BA;white-space:nowrap;font-variant-numeric:tabular-nums;}
.mg-rk-v{text-align:right;font-size:11.5px;font-weight:700;color:#0A2E5C;white-space:nowrap;font-variant-numeric:tabular-nums;}
.mg-rk-p{text-align:right;font-size:11.5px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums;}

/* barras simples (tipo de cliente, família de produto) */
.mg-bl{display:flex;flex-direction:column;gap:12px;margin-top:16px;}
.mg-bl-row{display:grid;grid-template-columns:1fr 92px 92px 60px;gap:10px;align-items:center;min-width:0;}
.mg-bl-row.hd{align-items:end;padding-bottom:11px;border-bottom:1px solid #F0F5FA;}
.mg-bl-row.hd>div{font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#93A7BA;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mg-bl-row.hd>div.n{text-align:right;}
.mg-bl-mid{min-width:0;}
.mg-bl-name{font-size:10.5px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#0A2E5C;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mg-bl-track{height:7px;border-radius:999px;background:#F0F4F9;overflow:hidden;margin-top:6px;}
.mg-bl-fill{height:100%;border-radius:999px;}
.mg-bl-rb{text-align:right;font-size:11.5px;font-weight:600;color:#93A7BA;white-space:nowrap;font-variant-numeric:tabular-nums;}
.mg-bl-v{text-align:right;font-size:11.5px;font-weight:700;color:#0A2E5C;white-space:nowrap;font-variant-numeric:tabular-nums;}
.mg-bl-p{text-align:right;font-size:11.5px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums;}

/* estratégia de venda: faixa de participação + colunas de % de margem */
.mg-st-band{display:flex;height:11px;border-radius:999px;overflow:hidden;background:#F0F4F9;margin-top:16px;}
.mg-st-band span{display:block;height:100%;}
.mg-st-cols{display:flex;align-items:flex-end;gap:10px;flex:1 1 auto;min-height:132px;margin-top:14px;}
.mg-st-col{flex:1;min-width:0;height:100%;display:flex;align-items:flex-end;}
.mg-st-bar{width:100%;border-radius:6px 6px 0 0;}
.mg-st-rows{display:flex;flex-direction:column;gap:7px;margin-top:14px;flex:0 1 auto;min-height:0;max-height:340px;
  overflow-y:auto;overscroll-behavior:contain;padding-right:6px;scrollbar-width:thin;scrollbar-color:#CBD9E6 transparent;}
.mg-st-row.hd{padding-bottom:8px;}
.mg-st-row{display:grid;grid-template-columns:9px 1fr 84px 84px 58px 58px;gap:8px;align-items:center;}
.mg-st-row.hd>span{font-size:9px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#93A7BA;text-align:right;}
.mg-st-row.hd>span:nth-child(2){text-align:left;}
.mg-st-dot{width:9px;height:9px;border-radius:3px;}
.mg-st-n{font-size:11px;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#33495E;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mg-st-rb{text-align:right;font-size:11.5px;font-weight:600;color:#93A7BA;white-space:nowrap;font-variant-numeric:tabular-nums;}
.mg-st-v{text-align:right;font-size:11.5px;font-weight:700;color:#0A2E5C;white-space:nowrap;font-variant-numeric:tabular-nums;}
.mg-st-part{text-align:right;font-size:11px;font-weight:600;color:#93A7BA;white-space:nowrap;font-variant-numeric:tabular-nums;}
.mg-st-p{text-align:right;font-size:11.5px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums;}

/* ---------- tabela / matriz ---------- */
.mg-tbl-panel{padding:0;overflow:hidden;}
.mg-tbl-head{display:flex;align-items:flex-start;justify-content:space-between;padding:17px 20px 13px;flex-wrap:wrap;gap:10px;}
.mg-tbl-tools{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.mg-seg{display:flex;align-items:center;background:#F0F4F9;border-radius:9px;padding:3px;}
.mg-seg button{padding:6px 13px;border-radius:7px;border:none;background:transparent;font-size:12px;font-weight:600;color:#5B7189;cursor:pointer;font-family:inherit;}
.mg-seg button.active{background:#fff;box-shadow:0 1px 2px rgba(10,46,92,0.10);font-weight:700;color:#0A2E5C;}
.mg-tbtn{padding:7px 12px;border-radius:9px;border:1px solid #E3EAF2;background:#fff;font-size:12px;font-weight:700;color:#0A2E5C;
  cursor:pointer;font-family:inherit;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;}
.mg-tbtn:hover{border-color:#1272C4;}
.mg-tbtn.excel{border-color:#CFEEDD;background:#EAF8F0;color:#22794C;}
.mg-tbl-wrap{overflow:auto;max-height:660px;}
table.mg-tbl{width:100%;border-collapse:collapse;font-size:12.5px;}
table.mg-tbl thead th{position:sticky;top:0;z-index:2;background:#0A2E5C;color:rgba(255,255,255,.88);text-align:right;padding:10px 14px;
  font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;}
table.mg-tbl thead th.dim{text-align:left;}
table.mg-tbl thead th.srt{cursor:pointer;user-select:none;}
table.mg-tbl thead th.srt:hover{color:#fff;}
table.mg-tbl tbody td{padding:9px 14px;border-bottom:1px solid #F0F5FA;text-align:right;font-variant-numeric:tabular-nums;color:#33495E;white-space:nowrap;}
table.mg-tbl tbody td.dim{text-align:left;color:#1272C4;font-weight:700;white-space:normal;}
table.mg-tbl tbody td.ded{color:#C77E22;}
table.mg-tbl tbody td.soft{color:#7C93A8;}
/* coluna de TEXTO (códigos da reforma): alinha à esquerda, como as dimensões */
table.mg-tbl thead th.txt{text-align:left;}
table.mg-tbl tbody td.txt{text-align:left;color:#5B7189;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11.5px;}
table.mg-tbl tbody td.mrg{color:#0A2E5C;font-weight:800;}
table.mg-tbl tbody tr:hover td{background:#F7FAFD;}
/* relatório largo (a aba por NF abre com 44 colunas): a 1ª coluna acompanha a
   rolagem horizontal, senão o nome do cliente sai de vista no meio do caminho */
table.mg-tbl thead th.dim:first-child{position:sticky;left:0;z-index:3;}
table.mg-tbl tbody td.dim:first-child{position:sticky;left:0;z-index:1;background:#fff;box-shadow:1px 0 0 #F0F5FA;}
table.mg-tbl tbody tr:hover td.dim:first-child{background:#F7FAFD;}
table.mg-tbl tbody tr.mg-total td.dim:first-child{background:#F7FAFD;}
table.mg-tbl tbody tr.mg-total td{background:#F7FAFD;font-weight:800;color:#0A2E5C;border-top:1px solid #E3EAF2;border-bottom:none;}
table.mg-tbl tbody tr.mg-total td.dim{color:#0A2E5C;}
table.mg-tbl tbody tr.mg-total td.ded{color:#B54545;}
.mg-tg{cursor:pointer;display:inline-block;width:14px;color:#1272C4;font-size:11px;user-select:none;}
.mg-tbl-foot{padding:10px 20px 14px;font-size:11px;color:#93A7BA;}

/* ---------- cards mobile da tabela ---------- */
.mg-cards{display:none;flex-direction:column;gap:8px;padding:0 14px 16px;}
.mg-card{border:1px solid #E3EAF2;border-radius:12px;padding:12px 14px;background:#fff;}
.mg-card.total{background:#F7FAFD;}
.mg-card-t{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.mg-card-n{font-size:12px;font-weight:800;color:#0A2E5C;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mg-card-p{font-size:11.5px;font-weight:800;white-space:nowrap;}
.mg-card-g{display:grid;grid-template-columns:1fr 1fr;gap:5px 12px;margin-top:9px;}
.mg-card-g div{display:flex;align-items:baseline;justify-content:space-between;gap:8px;font-size:11px;}
.mg-card-g .l{color:#7C93A8;font-weight:600;}
.mg-card-g .v{color:#33495E;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}

/* esconde a faixa de cards de submódulo (estática ou injetada pelo nav-sidebar.js):
   a navegação deste módulo é pelas ABAS do topo. */
.area-main section:has(.modulo-card){display:none !important;}

/* =====================================================================
   TABLET (<1100px)
   ===================================================================== */
@media (max-width:1100px){
  .mg-top{grid-template-columns:1fr 1fr;}
  .mg-hero{grid-column:1 / -1;}
  .mg-kpis{grid-template-columns:repeat(3,1fr);}
  .mg-frow,.mg-fhead{grid-template-columns:132px 1fr 60px 84px 84px 40px;gap:9px;}
  .mg-an-g1,.mg-an-g2{grid-template-columns:1fr;grid-template-rows:auto;}
  /* em coluna única tudo volta à altura natural: rolagem aninhada em tela
     estreita é pior do que a página crescer */
  #mg-an-prod{max-height:none;}
  .mg-rk.two{grid-template-columns:1fr;}
  .mg-rk-row{grid-template-columns:22px 1fr 80px 80px 56px;gap:8px;}
  .mg-rk.sub .mg-rk-row{grid-template-columns:22px 1fr 96px 80px 80px 56px;gap:8px;}
  .mg-bl-row{grid-template-columns:1fr 84px 84px 56px;gap:8px;}
  .mg-st-row{grid-template-columns:9px 1fr 78px 78px 54px 54px;gap:7px;}
}

/* =====================================================================
   MOBILE (<768px) — sem tocar no desktop
   ===================================================================== */
@media (max-width:767.98px){
  .fx-wrap{padding:14px 0 28px;gap:10px;}
  .fx-panel{padding:16px;border-radius:13px;}
  .fx-head{align-items:flex-start;}
  .fx-title{font-size:17px;letter-spacing:-0.3px;}
  .fx-titlesub{font-size:11px;}
  .fx-bc{font-size:10.5px;}
  .fx-head-right{width:100%;gap:10px;}
  .fx-tabs{width:100%;background:#F0F4F9;border:none;border-radius:9px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;}
  .fx-tabs::-webkit-scrollbar{display:none;}
  .fx-tabs a,.fx-tabs span{flex:1 0 auto;text-align:center;padding:7px 12px;font-size:11.5px;border-radius:7px;}
  .fx-filters{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding:10px 12px;}
  .fx-filters::-webkit-scrollbar{display:none;}
  .fx-filters>*,.fx-filters .av-dd{flex-shrink:0;}
  .fx-flimpar{margin-left:8px;}
  .mg-banner{font-size:12px;padding:10px 13px;}

  .mg-top{grid-template-columns:1fr;gap:10px;}
  .mg-kpis{grid-template-columns:1fr 1fr;gap:9px;}
  .mg-kpi{padding:13px 14px;}
  .mg-kpi-v{font-size:18px;}
  .mg-kpi-l{font-size:9.5px;}
  .mg-kpi-s{font-size:10px;}
  .mg-hero{padding:18px;}
  .mg-hero-v{font-size:27px;}
  .mg-hero-foot{gap:16px;margin-top:14px;padding-top:12px;}
  .mg-hero-foot .l{font-size:9px;}
  .mg-hero-foot .v{font-size:13px;}
  .mg-sum{padding:16px;}
  .mg-sum-v{font-size:24px;}
  .fx-grid2{grid-template-columns:1fr;gap:10px;}
  .mg-chart{height:220px;}
  .mg-wf{height:208px;gap:3px;padding:16px 0 30px;}
  .mg-wf-val{font-size:9px;}
  .mg-wf-lab{font-size:9px;bottom:-28px;}
  .mg-wf-axis{bottom:30px;}
  .mg-trib-row{grid-template-columns:70px 1fr 84px 44px;gap:8px;}
  .mg-trib-tag{font-size:9px;}
  .mg-trib-v{font-size:11px;}
  .mg-trib-p{font-size:10.5px;}
  /* filial: nome em cima, números embaixo */
  .mg-frow{display:block;}
  .mg-frow>.mg-fname{display:flex;align-items:baseline;justify-content:space-between;gap:8px;}
  .mg-ftrack{margin-top:6px;height:14px;}
  .mg-fnums{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-top:5px;}
  .mg-fpct,.mg-fval,.mg-frec,.mg-fnota{text-align:left;font-size:11px;}
  /* sem a grade, o cabeçalho nao alinha: cada numero leva o proprio rotulo */
  .mg-fhead{display:none;}
  .mg-fnums>div::before{content:attr(data-k);display:block;font-size:8.5px;font-weight:800;letter-spacing:.04em;
    text-transform:uppercase;color:#93A7BA;margin-bottom:1px;}
  /* no celular a referencia vira texto corrido: 7 chips empilhados comiam 1/4 da tela */
  .mg-fref{display:block;margin-top:3px;padding-top:11px;}
  .mg-fref-k{display:block;margin-bottom:4px;}
  .mg-fref-i{display:inline;background:none;border:none;padding:0;font-size:10px;}
  .mg-fref-i:not(:last-child)::after{content:" · ";color:#C3D2E0;}
  /* tabela → cards */
  .mg-tbl-head{padding:14px 14px 10px;}
  .mg-tbl-wrap{display:none;}
  .mg-cards{display:flex;}
  .mg-tbl-tools .mg-seg{display:none;}
  /* analitico: some a coluna da unidade e encolhe os numeros */
  .mg-an-scatter{height:200px;}
  .mg-rk-row,.mg-rk.sub .mg-rk-row{grid-template-columns:20px 1fr 78px 54px;gap:7px;}
  .mg-rk.sub .mg-rk-sub{display:none;}
  .mg-rk-name{font-size:11px;}
  .mg-bl-row{grid-template-columns:1fr 84px 56px;gap:8px;}
  .mg-bl-name{font-size:10px;}
  .mg-st-cols{min-height:104px;height:auto;gap:6px;}
  /* celular: a receita sai da lista (a barra ja mostra) e o resto respira */
  .mg-st-row{grid-template-columns:9px 1fr 78px 54px 54px;gap:6px;}
  .mg-st-row>.mg-st-rb{display:none;}
  .mg-st-row.hd>span:nth-child(3){display:none;}
  .mg-rk-row>.mg-rk-rb,.mg-rk-row.hd>div.rb,.mg-rk-row.hd>div.sub,
  .mg-bl-row>.mg-bl-rb,.mg-bl-row.hd>div.rb{display:none;}
  .mg-rk-row.hd>div,.mg-bl-row.hd>div{font-size:8.5px;}
}