// Aba Nichos (spec 2026-07-07 + refino 2026-07-07b) — comparação nicho vs nicho. Escopo buygoods.
// KPIs estilo home (clicáveis → drawer de destrinchamento por nicho) · gráfico de barras ·
// cards de nicho 2/linha (clicáveis → drawer de insights + produtos) · rodapé Logicall/SB/SMS.

const NICHE_COLORS = {
  ED:'#D8453B', WL:'#FD7119', ML:'#8B5CF6', BS:'#3B82F6', NP:'#EC4899',
  PT:'#1F9D6B', FG:'#E0922B', VL:'#06B6D4', JT:'#64748B', OUT:'#94A3B8',
};

// métrica → como ler/formatar (gráfico de barras + drawer de destrinchamento)
const NICHE_METRICS = {
  faturamento: { label:'Vendas válidas (bruta)', fmt:USDk,      get:n=>n.faturamento||0 },
  pedidos:     { label:'Pedidos',     fmt:NUM,       get:n=>n.pedidos||0 },
  aov:         { label:'AOV',         fmt:USD,       get:n=>n.aov||0 },
  refundRate:  { label:'Refund %',    fmt:v=>PCT(v), get:n=>n.refundRate||0, health:true },
  chargebacks: { label:'CBK', fmt:NUM,       get:n=>n.chargebacks||0 },
  cpaPaid:     { label:'CPA pago',    fmt:USDk,      get:n=>n.cpaPaid||0 },
};
const BAR_ORDER = ['faturamento','pedidos','aov','refundRate','chargebacks','cpaPaid'];

// KPIs no estilo da home (ícone + eyebrow + valor). metric != null = clicável (destrinchamento).
const NICHE_KPIS = [
  { metric:'faturamento', valueKey:'grossTotal', eye:'Receita total bruta', icon:'dollar', tint:'var(--fenix-orange-100, #FFF2E8)', fg:'var(--fenix-orange-600, #E0922B)', fmt:USDk, sub:'no período' },
  { metric:'aov',         eye:'AOV geral',   icon:'chart',  tint:'var(--fenix-blue-100, #EAF0FB)',    fg:'var(--fenix-blue, #3B82F6)',      fmt:USD,  sub:'ticket médio' },
  { metric:'refundRate',  eye:'Taxa refund', icon:'refresh',tint:'var(--warning-bg, #FEF3C7)',        fg:'var(--warning, #E0922B)',         fmt:v=>PCT(v), sub:'régua DOCX 5.1', health:true },
  { metric:'chargebacks', eye:'CBK', icon:'alert',  tint:'var(--negative-bg, #FDE7E5)',       fg:'var(--negative, #D8453B)',        fmt:NUM,  sub:'casos formais' },
  { metric:'cpaPaid',     eye:'CPA pago',    icon:'target', tint:'var(--fenix-blue-100, #EAF0FB)',    fg:'var(--fenix-blue, #3B82F6)',      fmt:USDk, sub:'comissão paga' },
  { metric:null, key:'activeNiches', eye:'Nichos ativos', icon:'globe', tint:'var(--gray-100)', fg:'var(--fg-2)', fmt:NUM, sub:'com venda no período' },
];

const NichosView = ({ data, onKpiSelect }) => {
  const [metric, setMetric] = React.useState('faturamento');
  const [drawer, setDrawer] = React.useState(null);
  const [openNiches, setOpenNiches] = React.useState({});   // expansível de produtos por nicho
  if (!data) return null;
  const niches = data.niches || [];
  const k = data.kpis || {};
  const g = data.global || {};
  const totalFat = niches.reduce((s,n)=>s+(n.faturamento||0), 0) || 1;
  const M = NICHE_METRICS[metric] || NICHE_METRICS.faturamento;
  const maxVal = Math.max(...niches.map(M.get), 1e-9);

  return (
    <div style={{ display:'flex', flexDirection:'column', gap:16 }}>
      {/* KPIs estilo home — clicáveis */}
      <div style={nv.kpiRow}>
        {NICHE_KPIS.map(kp => {
          const val = k[kp.valueKey || kp.metric || kp.key] || 0;
          const clickable = !!kp.metric;
          return (
            <div key={kp.eye}
              style={{ ...nv.kpi, ...(clickable ? nv.kpiClickable : {}) }}
              onClick={clickable ? () => setDrawer({ kind:'metric', metric:kp.metric }) : undefined}
              onMouseEnter={clickable ? e=>{e.currentTarget.style.boxShadow='var(--shadow-md)'; e.currentTarget.style.transform='translateY(-1px)';} : undefined}
              onMouseLeave={clickable ? e=>{e.currentTarget.style.boxShadow='var(--shadow-sm)'; e.currentTarget.style.transform='none';} : undefined}>
              <div style={nv.kpiTop}>
                <span style={nv.kpiEye}>{kp.eye}</span>
                <span style={{ ...nv.kpiIc, background:kp.tint }}><Icon name={kp.icon} size={16} color={kp.fg}/></span>
              </div>
              <div style={{ ...nv.kpiV, ...(kp.health ? { color:refundHealth(val).color } : {}) }} className="fenix-num">{kp.fmt(val)}</div>
              <div style={nv.kpiSub}>{clickable ? 'clique p/ destrinchar →' : kp.sub}</div>
            </div>
          );
        })}
      </div>

      {/* Gráfico de barras comparativo */}
      <div style={nv.card}>
        <div style={nv.cardHead}>
          <div>
            <div style={nv.eyebrow}>Comparação por nicho</div>
            <div style={nv.cardTitle}>Nicho vs. nicho — {M.label}</div>
          </div>
          <div style={nv.segRow}>
            {BAR_ORDER.map(mk => (
              <button key={mk} onClick={() => setMetric(mk)}
                style={{ ...nv.seg, ...(mk === metric ? nv.segOn : {}) }}>{NICHE_METRICS[mk].label}</button>
            ))}
          </div>
        </div>
        <div style={{ display:'flex', flexDirection:'column', gap:9, padding:'8px 6px 2px' }}>
          {niches.map(n => {
            const val = M.get(n);
            const pct = Math.max(1.5, val / maxVal * 100);
            const col = M.health ? refundHealth(val).color : (NICHE_COLORS[n.key] || '#FD7119');
            return (
              <div key={n.key} style={{ display:'flex', alignItems:'center', gap:12 }}>
                <div style={nv.barLabel}>{n.name}</div>
                <div style={nv.barTrack}><div style={{ width:pct+'%', height:'100%', background:col, borderRadius:6 }} /></div>
                <div style={nv.barVal} className="fenix-num">{M.fmt(val)}</div>
              </div>
            );
          })}
        </div>
      </div>

      {/* Seções por nicho — nome + Faturamento destaque + brancas clicáveis (spec 2026-07-09) */}
      {niches.map(n => {
        const rh = refundHealth(n.refundRate || 0);
        const share = totalFat ? (n.faturamento||0)/totalFat*100 : 0;
        const cards = [
          { eye:'Pedidos',     val:NUM(n.pedidos||0),       sub:'no período',    icon:'cart',    tint:'var(--fenix-blue-100)',   fg:'var(--fenix-blue)',        metric:'pedidos' },
          { eye:'AOV',         val:USD(n.aov||0),           sub:'ticket médio',  icon:'chart',   tint:'var(--fenix-blue-100)',   fg:'var(--fenix-blue)',        metric:'aov' },
          { eye:'Taxa refund', val:PCT(n.refundRate||0), valColor:rh.color, health:rh, icon:'refresh', tint:rh.bg,              fg:rh.color,                   metric:'refundRate' },
          { eye:'CBK', val:NUM(n.chargebacks||0),   sub:'casos formais', icon:'alert',   tint:'var(--negative-bg)',      fg:'var(--negative)',          metric:'chargebacks' },
          { eye:'CPA pago',    val:USDk(n.cpaPaid||0),      sub:'comissão',      icon:'target',  tint:'var(--fenix-orange-100)', fg:'var(--fenix-orange-600)',  metric:'cpaPaid' },
          { eye:'Devolvido',   val:USDk(n.amountReturned||0), sub:'refund + cgbk', icon:'refresh', tint:'var(--negative-bg)',    fg:'var(--negative)',          metric:'amountReturned' },
          { eye:'Gordura Logicall', val:USDk(n.logicallGordura||0), sub:'separado do direto', icon:'cart', tint:'var(--negative-bg)', fg:'#D8453B', logicall:true },
        ];
        const open = (metric, o) => onKpiSelect && onKpiSelect({ ...o, kind:'niche-metric', data:{ niche:n, metric } });
        const clickCard = (c) => c.logicall
          ? onKpiSelect && onKpiSelect({ eye:c.eye, val:c.val, sub:c.sub, icon:c.icon, tint:c.tint, fg:c.fg, kind:'logicall-gordura', data:{ products:n.logicallProducts } })
          : open(c.metric, c);
        return (
          <React.Fragment key={n.key}>
            <SectionTitle label={n.name} sub="Receita e indicadores do nicho"/>
            <div style={nv.secRow}>
              {/* Faturamento — destaque (navy), clicável */}
              <div style={{ ...nv.hero, cursor:'pointer', transition:'transform .15s' }}
                onClick={()=>open('faturamento', { eye:'Receita total bruta', val:USDk(n.grossTotal||0), sub:`${PCT(share)} do total`, icon:'dollar', tint:'rgba(255,168,102,.18)', fg:'#FFA866' })}
                onMouseEnter={e=>e.currentTarget.style.transform='translateY(-1px)'}
                onMouseLeave={e=>e.currentTarget.style.transform='none'}>
                <div style={nv.heroEye}>Receita total bruta</div>
                <div style={nv.heroVal} className="fenix-num">{USDk(n.grossTotal||0)}</div>
                <div style={nv.heroSub}>{PCT(share)} do total · {(n.produtos||[]).length} produtos</div>
              </div>
              {/* brancas clicáveis */}
              {cards.map(c => (
                <div key={c.eye} style={{ ...nv.wkpi, cursor:'pointer', transition:'box-shadow .15s, transform .15s' }}
                  onClick={()=>clickCard(c)}
                  onMouseEnter={e=>{e.currentTarget.style.boxShadow='var(--shadow-md)';e.currentTarget.style.transform='translateY(-1px)';}}
                  onMouseLeave={e=>{e.currentTarget.style.boxShadow='var(--shadow-sm)';e.currentTarget.style.transform='none';}}>
                  <div style={nv.wkpiTop}><span style={nv.wkpiEye}>{c.eye}</span><span style={{ ...nv.wkpiIc, background:c.tint }}><Icon name={c.icon} size={16} color={c.fg}/></span></div>
                  <div style={{ ...nv.wkpiV, ...(c.valColor?{color:c.valColor}:{}) }} className="fenix-num">{c.val}</div>
                  {c.health
                    ? <div style={nv.wkpiHealthWrap}><div style={{ ...nv.wkpiHealthChip, color:c.health.color, background:c.health.bg }}><span style={{ ...nv.wkpiHealthDot, background:c.health.color }}/>{c.health.label}</div></div>
                    : <div style={nv.wkpiSub}>{c.sub}</div>}
                </div>
              ))}
            </div>

            {/* Expansível: produtos do nicho, cada um com suas KPIs (comparar) */}
            {(() => {
              const isOpen = !!openNiches[n.key];
              const prods = (n.produtos || []).filter(p => (p.pedidos || 0) > 0 || (p.refunds || 0) > 0);
              return (
                <>
                  <div style={nv.prodToggle}
                    onClick={() => setOpenNiches(m => ({ ...m, [n.key]: !m[n.key] }))}
                    onMouseEnter={e => e.currentTarget.style.background = 'var(--gray-50)'}
                    onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
                    <span>Ver produtos do nicho <span style={nv.prodCount}>({prods.length})</span></span>
                    <Icon name="chevronDown" size={16} color="var(--fg-3)"
                      style={{ transform: isOpen ? 'rotate(180deg)' : 'none', transition: 'transform .18s' }} />
                  </div>
                  {isOpen && (
                    <div style={nv.prodPanel}>
                      {prods.length ? prods.map(p => {
                        const pr = refundHealth(p.refundRate || 0);
                        const pk = [
                          { eye: 'Receita total bruta', value: USDk(p.grossTotal || 0), sub: 'no período', icon: 'dollar', tint: 'var(--fenix-orange-100)', fg: 'var(--fenix-orange-600)' },
                          { eye: 'Pedidos', value: NUM(p.pedidos || 0), sub: 'no período', icon: 'cart', tint: 'var(--fenix-blue-100)', fg: 'var(--fenix-blue)' },
                          { eye: 'AOV', value: USD(p.aov || 0), sub: 'ticket médio', icon: 'chart', tint: 'var(--fenix-blue-100)', fg: 'var(--fenix-blue)' },
                          { eye: 'Taxa refund', value: PCT(p.refundRate || 0), icon: 'refresh', tint: pr.bg, fg: pr.color, health: pr },
                          { eye: 'CBK', value: NUM(p.chargebacks || 0), sub: 'casos formais', icon: 'alert', tint: 'var(--negative-bg)', fg: 'var(--negative)' },
                          { eye: 'CPA pago', value: USDk(p.cpaPaid || 0), sub: 'comissão', icon: 'target', tint: 'var(--fenix-orange-100)', fg: 'var(--fenix-orange-600)' },
                        ];
                        return (
                          <div key={p.name} style={nv.prodBlock}>
                            <div style={nv.prodName} onClick={() => gotoProduct(p.name)} title="Abrir a página do produto"
                              onMouseEnter={e => e.currentTarget.style.textDecoration = 'underline'}
                              onMouseLeave={e => e.currentTarget.style.textDecoration = 'none'}>
                              {p.name}<Icon name="chevron" size={13} color="var(--fg-3)" style={{ marginLeft: 5, verticalAlign: '-1px' }} />
                            </div>
                            <div style={nv.pKpiRow}>
                              {pk.map(c => <IconKpi key={c.eye} size="sm" {...c} />)}
                            </div>
                          </div>
                        );
                      }) : <div style={nv.prodEmpty}>Sem produtos com venda no período.</div>}
                    </div>
                  )}
                </>
              );
            })()}
          </React.Fragment>
        );
      })}

      {/* Rodapé: não atribuível por nicho */}
      <div style={nv.card}>
        <div style={nv.cardHead}>
          <div>
            <div style={nv.eyebrow}>Não atribuível por nicho</div>
            <div style={nv.cardTitle}>Gorduras &amp; SMS — total global do período</div>
          </div>
        </div>
        <div style={{ display:'flex', gap:14, padding:'4px 6px 10px', flexWrap:'wrap' }}>
          {[['Logicall (sem produto)', g.logicallNaoAtribuivel != null ? USDk(g.logicallNaoAtribuivel) : '—'],
            ['Salesbound', g.salesbound != null ? USDk(g.salesbound) : '—'],
            ['SMS', g.sms != null ? USDk(g.sms) : 'sem dado']].map(([l,v]) => (
            <div key={l} style={nv.gloBox}><div style={nv.kpiEye}>{l}</div><div style={{ ...nv.kpiV, marginTop:8 }} className="fenix-num">{v}</div></div>
          ))}
        </div>
        <div style={nv.note}>
          A gordura Logicall <b>com produto</b> agora aparece por nicho (KPI "Gordura Logicall" em cada
          seção). Aqui fica só a parte <b>sem produto</b> (Logicall histórica/sem match) + Salesbound
          (carrinhos multi-produto misturados). SMS não tem dado no banco. Escopo: buygoods.
        </div>
      </div>

      <NichoDrawer payload={drawer} niches={niches} kpis={k} totalFat={totalFat} onClose={() => setDrawer(null)} />
    </div>
  );
};

// ---------- Drawer lateral (dois modos: destrinchamento de métrica · insights de nicho) ----------
const NichoDrawer = ({ payload, niches, kpis, totalFat, onClose }) => {
  const open = !!payload;
  return (
    <>
      <div onClick={onClose} style={{ ...dw.scrim, opacity:open?1:0, pointerEvents:open?'auto':'none' }} />
      <aside style={{ ...dw.panel, transform:open?'translateX(0)':'translateX(104%)' }}>
        {payload && payload.kind === 'metric' && (
          <MetricBreakdown metric={payload.metric} niches={niches} kpis={kpis} onClose={onClose} />
        )}
      </aside>
    </>
  );
};

const DrawerHead = ({ eyebrow, title, tint, fg, icon, onClose }) => (
  <div style={dw.head}>
    <button style={dw.close} onClick={onClose}><Icon name="x" size={18} color="var(--fg-2)"/></button>
    <div style={dw.idRow}>
      <div style={{ ...dw.iconWrap, background:tint, color:fg }}><Icon name={icon} size={22} color={fg}/></div>
      <div><div style={dw.eyebrow}>{eyebrow}</div><div style={dw.title}>{title}</div></div>
    </div>
  </div>
);

// A conta do AOV por checkout = (receita FE + receita BE) ÷ ordens FE, mais o detalhe do
// back-end. Mesmo conteúdo do KDAovBlocks do KpiDrawer, no idioma deste drawer.
const AovConta = ({ kpis }) => {
  const feO = kpis.feOrders || 0, beO = kpis.beOrders || 0;
  const feR = kpis.feRevAov ?? 0, beR = kpis.beRevAov ?? 0;
  const row = (label, value) => (
    <div style={{ display:'flex', justifyContent:'space-between', padding:'7px 0', borderBottom:'1px solid var(--border-1)' }}>
      <span style={{ font:'600 12.5px/1.2 var(--font-sans)', color:'var(--fg-2)' }}>{label}</span>
      <span style={{ font:'700 12.5px/1 var(--font-mono)', color:'var(--fg-1)' }} className="fenix-num">{value}</span>
    </div>
  );
  return (
    <div style={{ marginBottom:16 }}>
      <div style={{ font:'700 10px/1 var(--font-sans)', letterSpacing:'.06em', textTransform:'uppercase', color:'var(--fg-3)', marginBottom:6 }}>
        AOV = por checkout</div>
      {row('Ticket Front-end', USD(feO ? feR / feO : 0))}
      {row('Upsells por checkout', USD(feO ? beR / feO : 0))}
      {row('AOV por checkout', USD(feO ? (feR + beR) / feO : 0))}
      {row('Ticket BE (quem levou)', beO ? USD(beR / beO) : '—')}
      {row('Take-rate de upsell', PCT(feO ? beO / feO * 100 : 0))}
      <div style={{ font:'500 10.5px/1.4 var(--font-sans)', color:'var(--fg-4)', marginTop:6 }}>
        (receita FE + receita BE) ÷ ordens FE.</div>
    </div>
  );
};

const MetricBreakdown = ({ metric, niches, kpis, onClose }) => {
  const M = NICHE_METRICS[metric];
  const ranked = [...niches].sort((a,b) => M.get(b) - M.get(a));
  const max = Math.max(...ranked.map(M.get), 1e-9);
  const total = kpis[metric] || 0;
  return (
    <>
      <DrawerHead eyebrow="Destrinchamento" title={`${M.label} por nicho`}
        tint="var(--fenix-orange-100, #FFF2E8)" fg="var(--fenix-orange-600, #E0922B)" icon="layers" onClose={onClose}/>
      <div style={dw.body}>
        <div style={dw.totalCard}>
          <span style={dw.totalEye}>{M.label} — geral</span>
          <div style={dw.totalVal} className="fenix-num">{M.fmt(total)}</div>
        </div>
        {metric === 'faturamento' && <KDDeducoes grossTotal={kpis.grossTotal} refundAmountGross={kpis.refundAmountGross}
          refundCount={kpis.refundCount} chargebackAmountGross={kpis.chargebackAmountGross}
          chargebackCount={kpis.chargebackCount} validOrders={kpis.validOrders}
          partialAmount={kpis.partialAmount} partialCount={kpis.partialCount} />}
        {metric === 'aov' && <AovConta kpis={kpis} />}
        <div style={{ display:'flex', flexDirection:'column', gap:12 }}>
          {ranked.map(n => {
            const val = M.get(n);
            const pct = Math.max(1.5, val / max * 100);
            const col = M.health ? refundHealth(val).color : (NICHE_COLORS[n.key] || '#FD7119');
            return (
              <div key={n.key}>
                <div style={{ display:'flex', justifyContent:'space-between', marginBottom:6 }}>
                  <span style={{ display:'inline-flex', alignItems:'center', gap:8, font:'600 13px/1 var(--font-sans)', color:'var(--fg-1)' }}>
                    <span style={{ width:9, height:9, borderRadius:3, background:NICHE_COLORS[n.key]||'#FD7119' }}/>{n.name}</span>
                  <span style={{ font:'700 13px/1 var(--font-mono)', color:'var(--fg-1)' }}>{M.fmt(val)}</span>
                </div>
                <div style={{ height:8, background:'var(--gray-100)', borderRadius:4, overflow:'hidden' }}>
                  <div style={{ width:pct+'%', height:'100%', background:col, borderRadius:4 }}/>
                </div>
              </div>
            );
          })}
        </div>
      </div>
    </>
  );
};

const nv = {
  kpiRow:{ display:'grid', gridTemplateColumns:'repeat(6, minmax(0,1fr))', gap:14 },
  kpi:{ background:'#fff', border:'1px solid var(--border-1)', borderRadius:'var(--r-lg)', padding:16, boxShadow:'var(--shadow-sm)', transition:'box-shadow .15s, transform .15s' },
  kpiClickable:{ cursor:'pointer' },
  kpiTop:{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:12 },
  kpiEye:{ font:'700 10px/1.2 var(--font-sans)', letterSpacing:'.04em', textTransform:'uppercase', color:'var(--fg-3)' },
  kpiIc:{ width:30, height:30, borderRadius:'var(--r-sm)', display:'flex', alignItems:'center', justifyContent:'center', flex:'none' },
  kpiV:{ font:'800 22px/1 var(--font-num)', letterSpacing:'-.01em', color:'var(--fg-1)', fontVariantNumeric:'tabular-nums' },
  kpiSub:{ font:'500 10.5px/1.3 var(--font-sans)', color:'var(--fg-4)', marginTop:9 },

  card:{ background:'#fff', border:'1px solid var(--border-1)', borderRadius:'var(--r-lg)', boxShadow:'var(--shadow-sm)', padding:'16px 20px 14px' },
  cardHead:{ display:'flex', alignItems:'flex-start', justifyContent:'space-between', gap:14, flexWrap:'wrap', marginBottom:10 },
  eyebrow:{ font:'700 10px/1 var(--font-sans)', letterSpacing:'.1em', textTransform:'uppercase', color:'var(--fg-3)' },
  cardTitle:{ font:'800 16px/1.2 var(--font-display)', color:'var(--fg-1)', marginTop:5 },

  segRow:{ display:'inline-flex', background:'var(--bg-sunken)', borderRadius:'var(--r-md)', padding:3, gap:2, flexWrap:'wrap' },
  seg:{ border:0, background:'transparent', font:'600 11.5px/1 var(--font-sans)', padding:'7px 11px', borderRadius:'var(--r-sm)', color:'var(--fg-2)', cursor:'pointer' },
  segOn:{ background:'var(--fenix-navy)', color:'#F6E9E0' },

  barLabel:{ width:158, flex:'none', font:'600 12.5px/1.2 var(--font-sans)', color:'var(--fg-2)', textAlign:'right', whiteSpace:'nowrap', overflow:'hidden', textOverflow:'ellipsis' },
  barTrack:{ flex:1, height:22, background:'var(--gray-100)', borderRadius:6, overflow:'hidden' },
  barVal:{ width:92, flex:'none', font:'700 12.5px/1 var(--font-mono)', color:'var(--fg-1)', textAlign:'right' },

  // Seções por nicho — Faturamento destaque + brancas clicáveis (spec 2026-07-09)
  secRow:{ display:'grid', gridTemplateColumns:'1.3fr repeat(7, minmax(0,1fr))', gap:10 },
  hero:{ background:'var(--fenix-navy)', borderRadius:'var(--r-lg)', padding:'16px 18px', display:'flex', flexDirection:'column', justifyContent:'center' },
  heroEye:{ font:'700 10px/1.2 var(--font-sans)', letterSpacing:'.06em', textTransform:'uppercase', color:'#FFA866' },
  heroVal:{ font:'800 28px/1 var(--font-num)', letterSpacing:'-.02em', color:'#fff', margin:'10px 0 8px', fontVariantNumeric:'tabular-nums' },
  heroSub:{ font:'600 10.5px/1.3 var(--font-sans)', color:'rgba(246,233,224,.6)' },
  wkpi:{ background:'#fff', border:'1px solid var(--border-1)', borderRadius:'var(--r-lg)', padding:'14px 14px', boxShadow:'var(--shadow-sm)', minWidth:0, display:'flex', flexDirection:'column' },
  wkpiTop:{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:6, marginBottom:11 },
  wkpiEye:{ font:'700 10px/1.2 var(--font-sans)', letterSpacing:'.04em', textTransform:'uppercase', color:'var(--fg-3)' },
  wkpiIc:{ width:26, height:26, borderRadius:'var(--r-sm)', display:'flex', alignItems:'center', justifyContent:'center', flex:'none' },
  wkpiV:{ font:'800 19px/1 var(--font-num)', color:'var(--fg-1)', letterSpacing:'-.01em', fontVariantNumeric:'tabular-nums' },
  wkpiSub:{ font:'600 10px/1.2 var(--font-sans)', color:'var(--fg-4)', marginTop:8 },
  wkpiHealthWrap:{ marginTop:8 },
  wkpiHealthChip:{ display:'inline-flex', alignItems:'center', gap:5, font:'700 10px/1 var(--font-sans)', padding:'4px 7px', borderRadius:'var(--r-pill)' },
  wkpiHealthDot:{ width:6, height:6, borderRadius:'50%', flex:'none' },

  // Expansível de produtos por nicho (spec 2026-07-10)
  prodToggle:{ display:'flex', alignItems:'center', justifyContent:'space-between', gap:8,
    padding:'9px 14px', marginTop:-6, borderRadius:'var(--r-md)', cursor:'pointer',
    font:'600 12.5px/1 var(--font-sans)', color:'var(--fg-2)', transition:'background .12s', userSelect:'none' },
  prodCount:{ color:'var(--fg-4)', fontWeight:700 },
  prodPanel:{ display:'flex', flexDirection:'column', gap:10, padding:'4px 4px 6px' },
  prodBlock:{ background:'var(--bg-sunken)', border:'1px solid var(--border-1)', borderRadius:'var(--r-md)', padding:'12px 14px' },
  prodName:{ display:'inline-flex', alignItems:'center', font:'700 13px/1 var(--font-mono)', color:'var(--fg-1)',
    letterSpacing:'-.01em', cursor:'pointer', marginBottom:11 },
  pKpiRow:{ display:'grid', gridTemplateColumns:'repeat(6, minmax(0,1fr))', gap:8, alignItems:'start' },
  pKpi:{ background:'#fff', border:'1px solid var(--border-1)', borderRadius:'var(--r-sm)', padding:'9px 11px', minWidth:0 },
  pKpiEye:{ font:'700 9px/1.1 var(--font-sans)', letterSpacing:'.04em', textTransform:'uppercase', color:'var(--fg-4)' },
  pKpiVal:{ font:'700 15px/1 var(--font-mono)', color:'var(--fg-1)', marginTop:7, fontVariantNumeric:'tabular-nums' },
  prodEmpty:{ font:'500 12.5px/1.4 var(--font-sans)', color:'var(--fg-3)', padding:'8px 6px' },

  gloBox:{ flex:1, minWidth:130, background:'var(--bg-sunken)', border:'1px solid var(--border-1)', borderRadius:'var(--r-md)', padding:'12px 14px' },
  note:{ font:'500 11.5px/1.5 var(--font-sans)', color:'var(--fg-3)', marginTop:2 },
};

const dw = {
  scrim:{ position:'fixed', inset:0, background:'rgba(1,27,54,.45)', backdropFilter:'blur(2px)', transition:'opacity .25s', zIndex:60 },
  panel:{ position:'fixed', top:0, right:0, bottom:0, width:430, maxWidth:'94%', background:'#fff',
    boxShadow:'var(--shadow-lg)', zIndex:61, transition:'transform .3s var(--ease)', display:'flex', flexDirection:'column', overflow:'hidden' },
  head:{ padding:'22px 24px 18px', borderBottom:'1px solid var(--border-1)', position:'relative' },
  close:{ position:'absolute', top:18, right:18, width:34, height:34, borderRadius:'var(--r-sm)', border:0, background:'var(--gray-100)', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center' },
  idRow:{ display:'flex', alignItems:'center', gap:13 },
  iconWrap:{ width:48, height:48, borderRadius:'var(--r-md)', display:'flex', alignItems:'center', justifyContent:'center', flex:'none' },
  eyebrow:{ font:'var(--text-label)', letterSpacing:'.06em', textTransform:'uppercase', color:'var(--fg-3)', marginBottom:4 },
  title:{ font:'800 17px/1.15 var(--font-display)', color:'var(--fg-1)', letterSpacing:'-.01em' },
  body:{ padding:'20px 24px', overflowY:'auto', flex:1 },
  totalCard:{ background:'var(--fenix-navy)', borderRadius:'var(--r-lg)', padding:'18px 20px', marginBottom:16 },
  totalEye:{ font:'var(--text-label)', letterSpacing:'.06em', textTransform:'uppercase', color:'#FFA866' },
  totalVal:{ font:'800 34px/1 var(--font-num)', color:'#F6E9E0', letterSpacing:'-.015em', margin:'10px 0 4px', fontVariantNumeric:'tabular-nums' },
};

window.NichosView = NichosView;