// Workspace v2, incorpora descobertas da reunião com Ana (28/04/2026)
// Mudanças: tabela de permanência mês a mês, alug vs aquis, peric/insal por obra,
// escalonamento de indiretos (0.30), rentabilidade por frente/obra/projeto,
// timeline com movimentação de frentes, alerta de impacto de preço,
// reajuste programado, versionamento, glossário do domínio.

const { useState: useS2, useMemo: useM2 } = React;

function fmt2(v, d=0) { return v == null || isNaN(v) ? '—' : Number(v).toLocaleString('pt-BR', {minimumFractionDigits:d, maximumFractionDigits:d}); }
function brl2(v) { return 'R$ ' + fmt2(v); }
function brl2k(v) {
  if (Math.abs(v) >= 1_000_000) return 'R$ ' + (v/1_000_000).toLocaleString('pt-BR',{maximumFractionDigits:2}) + ' M';
  if (Math.abs(v) >= 1_000) return 'R$ ' + (v/1_000).toLocaleString('pt-BR',{maximumFractionDigits:0}) + ' k';
  return brl2(v);
}

// Mapa de meses (8 = agosto, etc), referência da Ana
const MESES = ['Jan','Fev','Mar','Abr','Mai','Jun','Jul','Ago','Set','Out','Nov','Dez'];

// Cronograma exemplo da reunião: Obra1 ago→mai, Obra2 ago→nov, Obra3 dez→abr (deslocada da O2), Obra4 a partir da O4
const CRONOGRAMA_DEMO = {
  obras: [
    { id: 'O-1', nome: 'Cais Norte', inicio: 7, fim: 12, frentes: [
      { id: 'F-1', nome: 'Frente A · Cais Norte', inicio: 7, fim: 12, color: '#22A94A' },
      { id: 'F-2', nome: 'Frente B · Cais Norte', inicio: 7, fim: 12, color: '#1a8a3c' },
    ]},
    { id: 'O-2', nome: 'Cais Sul (extensão)', inicio: 7, fim: 10, frentes: [
      { id: 'F-3', nome: 'Frente C · Cais Sul → Atracadouro', inicio: 7, fim: 15, color: '#0E2A47', desloca: true },
    ]},
    { id: 'O-3', nome: 'Atracadouro PR-3', inicio: 11, fim: 15, frentes: [
      { id: 'F-3', nome: '(continuação Frente C)', inicio: 11, fim: 15, color: '#0E2A47', virtual: true },
    ]},
    { id: 'O-4', nome: 'Píer Sul (mar)', inicio: 11, fim: 17, frentes: [
      { id: 'F-4', nome: 'Frente D · Píer (embarcada)', inicio: 11, fim: 17, color: '#d97706' },
    ]},
  ],
  meses: [{m:7,y:26},{m:8,y:26},{m:9,y:26},{m:10,y:26},{m:11,y:26},{m:12,y:26},{m:1,y:27},{m:2,y:27},{m:3,y:27},{m:4,y:27},{m:5,y:27}],
};

function WorkspaceV2({ initialTela = 'frente' }) {
  const [tela, setTela] = useS2(initialTela); // frente | margem | timeline | base | versoes
  return (
    <div data-screen-label="Workspace v2" style={{ display: 'flex', height: '100%', minHeight: 800, background: 'var(--d-bg)' }}>
      <SideV2 tela={tela} setTela={setTela}/>
      <div style={{ flex: 1, display: 'flex', flexDirection: 'column', minWidth: 0 }}>
        <TopV2 tela={tela}/>
        <div style={{ flex: 1, overflow: 'auto', padding: 22 }} className="scroll">
          {tela === 'frente' && <EditorFrenteV2/>}
          {tela === 'margem' && <MargemValorVenda/>}
          {tela === 'timeline' && <TimelineGantt/>}
          {tela === 'base' && <BaseConhecimentoV2/>}
          {tela === 'versoes' && <VersoesMultiusuario/>}
          {tela === 'glossario' && <Glossario/>}
        </div>
      </div>
    </div>
  );
}

function SideV2({ tela, setTela }) {
  return (
    <aside style={{ width: 232, background: 'white', borderRight: '1px solid var(--d-border)', display: 'flex', flexDirection: 'column' }}>
      <div style={{ padding: '16px 14px', borderBottom: '1px solid var(--d-border)' }}>
        <DUI.Logo small/>
        <div style={{ font: '600 9.5px/1 Inter', letterSpacing: '0.1em', color: 'var(--d-text-3)', textTransform: 'uppercase', marginTop: 8, paddingTop: 8, borderTop: '1px dashed var(--d-border)' }}>v2 · pós reunião Ana</div>
      </div>
      <div style={{ padding: '14px 8px', flex: 1, overflow: 'auto' }} className="scroll">
        <div style={{ padding: '10px 10px 6px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
          <span style={{ font: '600 10.5px/1 Inter', letterSpacing: '0.08em', color: 'var(--d-text-3)', textTransform: 'uppercase' }}>Orçamento atual</span>
        </div>
        <div style={{ padding: '0 10px 10px', font: '500 11.5px/1.4 Inter', color: 'var(--d-text-3)' }}>
          <div className="d-mono" style={{color: 'var(--d-text-2)'}}>P-2026-014</div>
          <div style={{ font: '600 13px/1.3 Inter', color: 'var(--d-text)', marginTop: 2 }}>Terminal Portuário Sul</div>
        </div>
        <DUI.NavItem icon="pile" label="Editor de Frente" active={tela==='frente'} onClick={()=>setTela('frente')}/>
        <DUI.NavItem icon="money" label="Margem & Valor venda" active={tela==='margem'} onClick={()=>setTela('margem')}/>
        <DUI.NavItem icon="clock" label="Cronograma · Gantt" active={tela==='timeline'} onClick={()=>setTela('timeline')}/>
        <DUI.NavItem icon="layers" label="Versões / Equipe" active={tela==='versoes'} onClick={()=>setTela('versoes')}/>

        <div style={{ font: '600 10.5px/1 Inter', letterSpacing: '0.08em', color: 'var(--d-text-3)', textTransform: 'uppercase', padding: '20px 10px 8px' }}>Sistema</div>
        <DUI.NavItem icon="book" label="Base de conhecimento" active={tela==='base'} onClick={()=>setTela('base')}/>
        <DUI.NavItem icon="info" label="Glossário do domínio" active={tela==='glossario'} onClick={()=>setTela('glossario')}/>
      </div>
      <div style={{ padding: '12px 14px', borderTop: '1px solid var(--d-border)', display: 'flex', alignItems: 'center', gap: 10 }}>
        <div style={{ width: 28, height: 28, borderRadius: 100, background: '#22A94A', color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', font: '600 12px/1 Inter' }}>AN</div>
        <div style={{ minWidth: 0, flex: 1 }}>
          <div style={{ font: '600 12.5px/1.2 Inter' }}>Ana</div>
          <div style={{ font: '500 11px/1.2 Inter', color: 'var(--d-text-3)' }}>Planejamento</div>
        </div>
      </div>
    </aside>
  );
}

function TopV2({ tela }) {
  const titulos = {
    frente: ['Frente F-1 · Cravação A, Berço 12-18', 'Cais Norte · Terminal Portuário Sul'],
    margem: ['Margem & Valor de Venda', 'Rentabilidade por frente, obra e projeto'],
    timeline: ['Cronograma do projeto', 'Movimentação de frentes entre obras'],
    base: ['Base de Conhecimento', 'Cadastros, reajustes e alertas de impacto'],
    versoes: ['Versões e equipe', 'Controle de revisões e usuários'],
    glossario: ['Glossário do domínio', 'Termos validados pela Ana'],
  };
  const [t1, t2] = titulos[tela] || titulos.frente;
  return (
    <header style={{ height: 60, background: 'white', borderBottom: '1px solid var(--d-border)', display: 'flex', alignItems: 'center', padding: '0 22px', gap: 14 }}>
      <div style={{ flex: 1, minWidth: 0 }}>
        <div style={{ font: '600 16px/1.1 Inter', color: 'var(--d-text)' }}>{t1}</div>
        <div style={{ font: '500 12px/1 Inter', color: 'var(--d-text-3)', marginTop: 4 }}>{t2}</div>
      </div>
      <span className="chip chip-warn"><span style={{display:'inline-block',width:6,height:6,borderRadius:100,background:'#d97706',marginRight:4}}/>RASCUNHO · v3</span>
      <button className="btn btn-sm"><DUI.Icon name="share" size={13}/>Comentar</button>
      <button className="btn btn-sm btn-primary"><DUI.Icon name="check" size={13}/>Salvar revisão</button>
    </header>
  );
}

/* ============================ EDITOR FRENTE V2 ============================ */
function EditorFrenteV2({ projeto, frente, onUpdateFrente }) {
  const [estacas, setEstacas] = useS2(168);
  const [equipes, setEquipes] = useS2(2);
  const [peric, setPeric] = useS2(true);
  const [insal, setInsal] = useS2(false);
  const [embarcada, setEmbarcada] = useS2(false);
  const [forneceMaterial, setForneceMaterial] = useS2(true);
  const [meses] = useS2([
    { fase: 'MOB', label: 'Ago/26' }, { fase: 'MOB', label: 'Set/26' },
    { fase: 'EXEC', label: 'Out/26' }, { fase: 'EXEC', label: 'Nov/26' },
    { fase: 'EXEC', label: 'Dez/26' }, { fase: 'EXEC', label: 'Jan/27' },
    { fase: 'EXEC', label: 'Fev/27' }, { fase: 'DESM', label: 'Mar/27' },
  ]);

  // Tabela de permanência mensal, equipe
  const equipeBase = [
    { cargo: 'Engº Produção', tipo:'I', mensal: [0.3,0.3,0.3,0.3,0.3,0.3,0.3,0.3], salario: 14000 },
    { cargo: 'Mestre de Obra', tipo:'D', mensal: [0.5,0.5,1,1,1,1,1,0.5], salario: 12000 },
    { cargo: 'Encarregado', tipo:'D', mensal: [1,1,equipes,equipes,equipes,equipes,equipes,1], salario: 8500 },
    { cargo: 'Op. Perfuratriz', tipo:'D', mensal: [0,0,equipes,equipes,equipes,equipes,equipes,0], salario: 5500 },
    { cargo: 'Op. Guindaste', tipo:'D-loc', mensal: [0,equipes,equipes,equipes,equipes,equipes,equipes,0], salario: 0, loc: true },
    { cargo: 'Soldador', tipo:'D', mensal: [0,1,2*equipes,2*equipes,2*equipes,2*equipes,2*equipes,1], salario: 4500 },
    { cargo: 'Apontador', tipo:'D', mensal: [0,1,equipes,equipes,equipes,equipes,equipes,1], salario: 3500 },
    { cargo: 'Ajudantes A+C', tipo:'D', mensal: [0,2,5*equipes,5*equipes,5*equipes,5*equipes,5*equipes,2], salario: 2650 },
    { cargo: 'Téc. Segurança', tipo:'D', mensal: [0.5,0.5,1,1,1,1,1,0.5], salario: 5500 },
    { cargo: 'Comprador', tipo:'I', mensal: [0,0,1,1,1,1,1,0], salario: 7000, soGrandeObra: true },
  ];

  const adicionalPeric = peric ? 0.30 : 0;
  const adicionalInsal = insal ? 0.20 : 0;

  const totalMOporMes = meses.map((_,mi) => {
    return equipeBase.reduce((s, l) => {
      if (l.loc) return s; // operador locado não vira salário
      const base = l.salario * (1 + adicionalPeric + adicionalInsal);
      const comEnc = base * 2.05; // encargos + dissídio
      return s + comEnc * l.mensal[mi];
    }, 0);
  });
  const totalMO = totalMOporMes.reduce((s,v)=>s+v,0);

  // Equipamentos com modo locação/aquisição
  const equipamentos = [
    { nome: 'Guindaste 100t', modo: 'Aluguel', mensal: [0,1,1,1,1,1,1,0], custo_mes: 95000 },
    { nome: 'Perfuratriz Wirth', modo: 'Aquisição', mensal: [0,1,1,1,1,1,1,0], custo_mes: 3150, aquisicao: 145000, mesAquisicao: 0 },
    { nome: 'Martelo vibratório', modo: 'Aluguel', mensal: [0,1,1,1,1,1,1,0], custo_mes: 18500 },
    { nome: 'Máq. solda + acessórios', modo: 'Aquisição', mensal: [0,2,2,2,2,2,2,0], custo_mes: 80, aquisicao: 4000, mesAquisicao: 1 },
    embarcada && { nome: 'Apoio náutico (cliente)', modo: 'Cliente', mensal: [0,0,1,1,1,1,1,0], custo_mes: 0 },
    embarcada && { nome: 'Balsa (locada)', modo: 'Aluguel', mensal: [0,1,1,1,1,1,1,0], custo_mes: 145000 },
  ].filter(Boolean);

  const totalEqporMes = meses.map((_,mi) => equipamentos.reduce((s,e) => {
    if (e.modo === 'Aquisição' && mi === e.mesAquisicao) return s + e.aquisicao;
    if (e.modo === 'Aluguel' || e.modo === 'Aquisição') return s + e.custo_mes * (e.mensal[mi]||0);
    return s;
  }, 0));
  const totalEq = totalEqporMes.reduce((s,v)=>s+v,0);

  // Materiais, alguns zerados se cliente fornece
  const materiais = [
    { nome: 'Eletrodo (E7018)', calc: '1.5 kg/m × 168 estacas × 35m × 1.5kg/m = 13.230 kg', total: 429975, zerado: false },
    { nome: 'Tricone Ø1300 (rocha)', calc: '7 unid / 100m × (168×35m) = 412 → joga nos 2 primeiros meses', total: 7416000, zerado: false, alerta: 'comprar cedo' },
    { nome: 'Diesel S10', calc: '1.000 L/mês × 2 equipes × 6 meses', total: 77400, zerado: false },
    { nome: 'Armação pré-montada', calc: 'Cliente fornece, apenas instalação', total: 0, zerado: true, fornecedor: 'cliente' },
    { nome: 'Concreto', calc: 'Cliente fornece, instalação inclusa', total: 0, zerado: true, fornecedor: 'cliente' },
  ].filter(m => forneceMaterial ? true : !m.zerado);

  const totalMat = materiais.reduce((s,m)=>s+m.total, 0);

  return (
    <div style={{ maxWidth: 1380, display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 380px', gap: 18 }}>
      <div>
        {/* Configuração geral da frente */}
        <Card2 title="Configuração da frente" icon="pile">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 14, marginBottom: 16 }}>
            <Field2 label="Tipo de estaca">
              <select className="inp"><option>metálica Ø1300</option><option>metálica Ø1900</option><option>pré-moldada Ø60</option></select>
            </Field2>
            <Field2 label="Quantidade de estacas">
              <input type="number" className="inp inp-num" value={estacas} onChange={e=>setEstacas(+e.target.value)}/>
            </Field2>
            <Field2 label="Comprimento médio (m)">
              <input type="number" className="inp inp-num" defaultValue="35"/>
            </Field2>
            <Field2 label="Equipes simultâneas">
              <input type="number" className="inp inp-num" value={equipes} onChange={e=>setEquipes(+e.target.value)}/>
            </Field2>
          </div>

          {/* Flags de adicionais, Ana ressaltou que isso não pode duplicar cargos */}
          <div style={{ display: 'flex', gap: 10, flexWrap: 'wrap' }}>
            <FlagToggle on={peric} setOn={setPeric} label="Periculosidade" desc="+30% sobre salário" hint="próximo a gás/alta tensão"/>
            <FlagToggle on={insal} setOn={setInsal} label="Insalubridade" desc="+20% sobre salário" hint="trabalho insalubre"/>
            <FlagToggle on={embarcada} setOn={setEmbarcada} label="Obra embarcada" desc="balsa + apoio náutico" hint="execução no mar"/>
            <FlagToggle on={forneceMaterial} setOn={setForneceMaterial} label="Cliente fornece material" desc="armação/concreto zerados" hint="MO de instalação se mantém" inverted/>
          </div>
        </Card2>

        {/* HERANÇA DE RECURSOS — frente herda equipe/equipamento de outra frente do mesmo projeto */}
        <HerancaFrenteCard projeto={projeto} frente={frente} meses={meses} onUpdateFrente={onUpdateFrente}/>

        {/* Tabela de permanência, Mão de obra mês a mês */}
        <Card2 title="Tabela de permanência, Mão de obra" icon="user" subtitle="Quantidade alocada em cada mês. Indiretos podem ter escalonamento (0,3 = 30% do tempo).">
          <div style={{ overflow: 'auto' }} className="scroll">
            <table className="tbl" style={{ minWidth: '100%', tableLayout: 'fixed' }}>
              <thead>
                <tr>
                  <th style={{ width: 170, position:'sticky', left:0, background:'var(--d-bg)', zIndex:2 }}>Cargo</th>
                  <th style={{ width: 38 }}>Tipo</th>
                  {meses.map((m,i) => (
                    <th key={i} className="num" style={{ width: 56, padding: '6px 4px' }}>
                      <div style={{ font: '500 9px/1 Inter', color: m.fase === 'EXEC' ? '#22A94A' : m.fase === 'MOB' ? '#d97706' : '#7c8597', marginBottom: 2 }}>{m.fase}</div>
                      <div style={{ font: '600 10.5px/1 JetBrains Mono', color: 'var(--d-text-2)' }}>{m.label}</div>
                    </th>
                  ))}
                  <th className="num" style={{ width: 90 }}>Total</th>
                </tr>
              </thead>
              <tbody>
                {equipeBase.map((l, li) => {
                  const totalLinha = l.loc ? 0 : l.mensal.reduce((s,q,i) => s + q * l.salario * (1 + adicionalPeric + adicionalInsal) * 2.05, 0);
                  return (
                    <tr key={li}>
                      <td style={{ position:'sticky', left:0, background:'white', zIndex:1, fontWeight: 500 }}>
                        {l.cargo}
                        {l.loc && <span className="chip" style={{ height: 16, fontSize: 9, marginLeft: 6, padding: '0 5px' }}>LOC</span>}
                        {l.soGrandeObra && <span className="chip chip-warn" style={{ height: 16, fontSize: 9, marginLeft: 6, padding: '0 5px' }}>OBRA GRANDE</span>}
                      </td>
                      <td><span style={{ font: '600 10px/1 JetBrains Mono', color: l.tipo.startsWith('D') ? '#1a8a3c' : '#2363b8' }}>{l.tipo}</span></td>
                      {l.mensal.map((q, mi) => {
                        // Heatmap por linha: intensidade relativa ao máximo daquela linha
                        const linhaMax = Math.max(...l.mensal, 1);
                        const intensidade = q === 0 ? 0 : Math.max(0.18, q / linhaMax);
                        const isMobDesm = mi === 0 || mi === l.mensal.length - 1;
                        // Verde para EXEC, âmbar para MOB/DESM. Alpha cresce com intensidade.
                        const bg = q === 0 ? 'transparent'
                          : isMobDesm
                            ? `rgba(217, 119, 6, ${(intensidade * 0.32).toFixed(2)})`
                            : `rgba(34, 169, 74, ${(intensidade * 0.42).toFixed(2)})`;
                        const fg = q === 0 ? 'var(--d-text-4)'
                          : intensidade >= 0.7
                            ? (isMobDesm ? '#7a3f02' : '#0f5e26')
                            : 'var(--d-text)';
                        const fw = q === 0 ? 500 : (intensidade >= 0.7 ? 700 : intensidade >= 0.4 ? 600 : 500);
                        return (
                          <td key={mi} className="num" style={{ background: bg, font: `${fw} 11.5px/1 JetBrains Mono`, color: fg }} title={q === 0 ? 'sem alocação' : `${q} ${q === 1 ? 'pessoa' : 'pessoas'} · ${(intensidade*100).toFixed(0)}% do pico`}>
                            {q === 0 ? '—' : q.toFixed(q < 1 ? 2 : (q % 1 === 0 ? 0 : 1))}
                          </td>
                        );
                      })}
                      <td className="num" style={{ fontWeight: 600 }}>{l.loc ? '—' : brl2k(totalLinha)}</td>
                    </tr>
                  );
                })}
                <tr style={{ background: 'var(--d-bg)' }}>
                  <td style={{ position:'sticky', left:0, background:'var(--d-bg-2)', zIndex:1, fontWeight: 700 }} colSpan={2}>Total mensal</td>
                  {totalMOporMes.map((v, mi) => (
                    <td key={mi} className="num" style={{ font: '700 11px/1 JetBrains Mono', color: '#0E2A47' }}>{brl2k(v)}</td>
                  ))}
                  <td className="num" style={{ font: '800 12px/1 JetBrains Mono', color: '#22A94A' }}>{brl2k(totalMO)}</td>
                </tr>
              </tbody>
            </table>
          </div>
          <div style={{ display: 'flex', gap: 18, marginTop: 12, alignItems: 'center', flexWrap: 'wrap', font: '500 11px/1.4 Inter', color: 'var(--d-text-3)' }}>
            <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
              MOB/DESM
              <span style={{ display: 'inline-flex', height: 12, borderRadius: 2, overflow: 'hidden', border: '1px solid var(--d-border)' }}>
                {[0.08, 0.16, 0.24, 0.32].map((a,i) => <span key={i} style={{ width: 14, height: '100%', background: `rgba(217, 119, 6, ${a})` }}/>)}
              </span>
            </span>
            <span style={{ display: 'flex', alignItems: 'center', gap: 5 }}>
              EXEC
              <span style={{ display: 'inline-flex', height: 12, borderRadius: 2, overflow: 'hidden', border: '1px solid var(--d-border)' }}>
                {[0.10, 0.20, 0.30, 0.42].map((a,i) => <span key={i} style={{ width: 14, height: '100%', background: `rgba(34, 169, 74, ${a})` }}/>)}
              </span>
              <span style={{ font: '500 10px/1 Inter', color: 'var(--d-text-4)' }}>baixa → alta alocação</span>
            </span>
            <span><strong>D</strong> = Direto · <strong>I</strong> = Indireto · <strong>LOC</strong> = vem incluso na locação (conta no quadro p/ refeição/aloj)</span>
          </div>
        </Card2>

        {/* Equipamentos com aluguel/aquisição */}
        <Card2 title="Equipamentos, permanência e modo de aquisição" icon="truck"
          subtitle="Locação distribui pelo período de uso. Aquisição concentra no mês de compra (rateado entre obras futuras).">
          <table className="tbl">
            <thead>
              <tr>
                <th>Equipamento</th>
                <th>Modo</th>
                {meses.map((m,i) => <th key={i} className="num" style={{padding:'6px 4px'}}><div style={{font:'500 10px/1 JetBrains Mono'}}>{m.label.split('/')[0]}</div></th>)}
                <th className="num">Total</th>
              </tr>
            </thead>
            <tbody>
              {equipamentos.map((e, ei) => {
                const total = meses.reduce((s,_,mi) => {
                  if (e.modo === 'Aquisição' && mi === e.mesAquisicao) return s + e.aquisicao;
                  return s + (e.custo_mes || 0) * (e.mensal[mi]||0);
                }, 0);
                return (
                  <tr key={ei}>
                    <td style={{fontWeight: 500}}>{e.nome}</td>
                    <td><ModoChip2 modo={e.modo}/></td>
                    {e.mensal.map((q,mi) => {
                      const isAquis = e.modo === 'Aquisição' && mi === e.mesAquisicao;
                      const valor = isAquis ? e.aquisicao : (q ? e.custo_mes * q : 0);
                      return (
                        <td key={mi} className="num" style={{
                          background: isAquis ? '#fef3e6' : (q ? '#f0fbf3' : 'transparent'),
                          font: '500 10.5px/1 JetBrains Mono',
                          color: valor === 0 ? 'var(--d-text-4)' : (isAquis ? '#a46a02' : 'var(--d-text)'),
                          fontWeight: isAquis ? 700 : 500,
                        }}>
                          {valor === 0 ? '—' : brl2k(valor)}
                        </td>
                      );
                    })}
                    <td className="num" style={{fontWeight:600}}>{brl2k(total)}</td>
                  </tr>
                );
              })}
              <tr style={{ background: 'var(--d-bg)' }}>
                <td colSpan={2} style={{fontWeight:700}}>Total mensal</td>
                {totalEqporMes.map((v,mi) => (
                  <td key={mi} className="num" style={{font:'700 10.5px/1 JetBrains Mono', color: '#0E2A47'}}>{brl2k(v)}</td>
                ))}
                <td className="num" style={{font:'800 12px/1 JetBrains Mono', color:'#22A94A'}}>{brl2k(totalEq)}</td>
              </tr>
            </tbody>
          </table>
        </Card2>

        {/* Materiais com lógica de "zerado" */}
        <Card2 title="Materiais e ferramentas" icon="pkg" subtitle="Itens que o cliente fornece aparecem zerados, mas continuam visíveis para o sistema lembrar da MO de instalação.">
          <table className="tbl">
            <thead><tr><th>Material</th><th>Cálculo</th><th className="num">Total</th><th></th></tr></thead>
            <tbody>
              {materiais.map((m, mi) => (
                <tr key={mi} style={{ opacity: m.zerado ? 0.65 : 1 }}>
                  <td style={{fontWeight: 500}}>
                    {m.nome}
                    {m.alerta && <span className="chip chip-warn" style={{height:16, fontSize:9, marginLeft:6, padding:'0 5px'}}>{m.alerta}</span>}
                    {m.zerado && <span className="chip" style={{height:16, fontSize:9, marginLeft:6, padding:'0 5px', background:'#e8effa', color:'#1d4f97'}}>FORNECIDO POR {m.fornecedor.toUpperCase()}</span>}
                  </td>
                  <td className="d-mono" style={{font:'500 11px/1.4 JetBrains Mono', color:'var(--d-text-3)'}}>{m.calc}</td>
                  <td className="num" style={{fontWeight:600, color: m.zerado ? 'var(--d-text-3)' : 'var(--d-text)'}}>{brl2(m.total)}</td>
                  <td><button className="btn btn-sm btn-ghost"><DUI.Icon name="edit" size={11}/></button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card2>

        {/* Memória de cálculo */}
        <Card2 title="Memória de cálculo" icon="calc" subtitle="Cotações e cálculos auxiliares. Espelho da aba homônima da planilha da Ana.">
          <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 14 }}>
            <Field2 label="Cidade origem"><input className="inp" defaultValue="Sertãozinho / SP"/></Field2>
            <Field2 label="Cidade obra"><input className="inp" defaultValue="Santos / SP"/></Field2>
            <Field2 label="Distância (km)"><input className="inp inp-num" defaultValue="386"/></Field2>
            <Field2 label="Cotação frete (carreta seca)"><input className="inp inp-num" defaultValue="21.500"/></Field2>
            <Field2 label="Diesel R$/L (atual)" hint="puxa da Base de Conhecimento"><input className="inp inp-num" defaultValue="6,45"/></Field2>
            <Field2 label="Eletrodo R$/kg"><input className="inp inp-num" defaultValue="32,50"/></Field2>
            <Field2 label="Tricones, pedir importado?" hint="3 meses de antecipação"><select className="inp"><option>Sim, joga nos 2 primeiros meses</option><option>Não, comprar no Brasil</option></select></Field2>
            <Field2 label="Combustível, responsável"><select className="inp"><option>Destaca</option><option>Cliente fornece (zerar)</option></select></Field2>
          </div>
        </Card2>
      </div>

      {/* Painel direito */}
      <div style={{ position: 'sticky', top: 0, alignSelf: 'flex-start', display: 'flex', flexDirection: 'column', gap: 12 }}>
        <div className="card" style={{ padding: 0, overflow: 'hidden' }}>
          <div style={{ padding: '14px 18px', background: '#0E2A47', color: 'white' }}>
            <div style={{ font: '500 11px/1 Inter', textTransform: 'uppercase', letterSpacing: '0.08em', color: 'rgba(255,255,255,0.6)' }}>Custo da frente</div>
            <div className="d-mono" style={{ font: '700 28px/1.05 JetBrains Mono', marginTop: 8 }}>{brl2k(totalMO + totalEq + totalMat)}</div>
            <div style={{ font: '500 11.5px/1.4 Inter', color: 'rgba(255,255,255,0.7)', marginTop: 4 }}>{meses.length} meses · ago/26 → mar/27</div>
          </div>
          <div style={{ padding: 14 }}>
            <SumLine label="Mão de obra" v={totalMO} pct={totalMO/(totalMO+totalEq+totalMat)*100} color="#0E2A47"/>
            <SumLine label="Equipamentos" v={totalEq} pct={totalEq/(totalMO+totalEq+totalMat)*100} color="#22A94A"/>
            <SumLine label="Materiais" v={totalMat} pct={totalMat/(totalMO+totalEq+totalMat)*100} color="#d97706"/>
            <div style={{ marginTop: 12, paddingTop: 12, borderTop: '1px dashed var(--d-border)' }}>
              <SumLine label="Indiretos (alim+aloj+EPI)" v={420000} pct={null} color="#7c8597"/>
              <SumLine label="Mob/desmob equipamentos" v={143200} pct={null} color="#7c8597"/>
              <SumLine label="Baixada (60d)" v={28000} pct={null} color="#7c8597"/>
            </div>
          </div>
        </div>

        {/* Receita do bolo */}
        <div className="card" style={{ padding: 14, background: 'linear-gradient(135deg, #fff8e6, white)' }}>
          <div style={{ font: '600 11px/1 Inter', color: '#a46a02', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 8, display: 'flex', alignItems: 'center', gap: 6 }}>
            <DUI.Icon name="sparkle" size={12}/> Receita do bolo
          </div>
          <div style={{ font: '500 12.5px/1.5 Inter', color: 'var(--d-text-2)', marginBottom: 10 }}>
            Frente parecida orçada antes? Copie a estrutura.
          </div>
          {[
            { id: 'P-2025-038', nome: 'Píer Itaqui, F2', sim: 92 },
            { id: 'P-2024-021', nome: 'Cais Pecém, F1', sim: 81 },
            { id: 'P-2025-009', nome: 'Subest. Itu, F1', sim: 68 },
          ].map(r => (
            <div key={r.id} style={{ display: 'flex', alignItems: 'center', gap: 8, padding: '6px 0', borderTop: '1px solid rgba(0,0,0,0.05)', cursor: 'pointer' }}>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div className="d-mono" style={{ font: '500 10.5px/1 JetBrains Mono', color: 'var(--d-text-3)' }}>{r.id}</div>
                <div style={{ font: '600 12px/1.3 Inter' }}>{r.nome}</div>
              </div>
              <div style={{ font: '700 11.5px/1 Inter', color: r.sim > 85 ? '#1a8a3c' : 'var(--d-text-2)' }}>{r.sim}%<div style={{font:'500 9px/1 Inter', color:'var(--d-text-3)', marginTop:3, textAlign:'right'}}>match</div></div>
              <DUI.Icon name="chevR" size={13} style={{color: 'var(--d-text-4)'}}/>
            </div>
          ))}
        </div>

        {/* Alerta de impacto */}
        <div className="card" style={{ padding: 14, borderLeft: '3px solid #d97706' }}>
          <div style={{ font: '600 11px/1 Inter', color: '#d97706', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6, display: 'flex', alignItems: 'center', gap: 6 }}>
            <DUI.Icon name="bell" size={12}/> Impacto detectado
          </div>
          <div style={{ font: '500 12px/1.5 Inter', color: 'var(--d-text-2)' }}>
            Diesel subiu de R$ 6,15 → <strong style={{color:'#d97706'}}>R$ 6,45</strong> em 28/04. Esta frente foi recalculada (+R$ 3.600).
          </div>
          <button className="btn btn-sm" style={{ marginTop: 8, width: '100%' }}><DUI.Icon name="eye" size={12}/>Ver outros 7 projetos afetados</button>
        </div>
      </div>
    </div>
  );
}

function FlagToggle({ on, setOn, label, desc, hint, inverted }) {
  const active = inverted ? !on : on;
  return (
    <button onClick={() => setOn(!on)} style={{
      flex: '1 1 200px', minWidth: 200, padding: '10px 12px', textAlign: 'left',
      border: '1.5px solid', borderColor: on ? '#22A94A' : 'var(--d-border)',
      borderRadius: 8, background: on ? '#f0fbf3' : 'white', cursor: 'pointer', font: 'inherit',
    }}>
      <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
        <div style={{ width: 28, height: 16, borderRadius: 100, background: on ? '#22A94A' : 'var(--d-border-strong)', position: 'relative', flex: 'none' }}>
          <div style={{ position: 'absolute', top: 2, left: on ? 14 : 2, width: 12, height: 12, borderRadius: 100, background: 'white', transition: 'left 0.15s' }}/>
        </div>
        <div style={{ flex: 1 }}>
          <div style={{ font: '600 12.5px/1.2 Inter', color: on ? '#1a8a3c' : 'var(--d-text)' }}>{label}</div>
          <div style={{ font: '500 11px/1.3 Inter', color: 'var(--d-text-3)', marginTop: 2 }}>{desc}</div>
        </div>
      </div>
      <div style={{ font: '500 10.5px/1.3 Inter', color: 'var(--d-text-4)', marginTop: 6, paddingLeft: 36 }}>{hint}</div>
    </button>
  );
}

function ModoChip2({ modo }) {
  const map = {
    'Aluguel': { bg: '#e6f5ea', fg: '#1a8a3c' },
    'Aquisição': { bg: '#fef3e6', fg: '#a46a02' },
    'Cliente': { bg: '#e8effa', fg: '#1d4f97' },
  };
  const s = map[modo] || map['Aluguel'];
  return <span className="chip" style={{ background: s.bg, color: s.fg, height: 18, padding:'0 6px', fontSize:10 }}>{modo === 'Cliente' ? 'CLIENTE' : modo.toUpperCase()}</span>;
}

function Card2({ title, subtitle, icon, actions, children }) {
  return (
    <div className="card" style={{ padding: 0, marginBottom: 14 }}>
      <div style={{ padding: '12px 18px', borderBottom: '1px solid var(--d-border)', display: 'flex', alignItems: 'flex-start', gap: 14 }}>
        <div style={{ flex: 1, minWidth: 0 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
            {icon && <DUI.Icon name={icon} size={15} style={{ color: 'var(--d-text-3)' }}/>}
            <h3 style={{ margin: 0, font: '600 13.5px/1 Inter' }}>{title}</h3>
          </div>
          {subtitle && <div style={{ font: '500 11.5px/1.4 Inter', color: 'var(--d-text-3)', marginTop: 5 }}>{subtitle}</div>}
        </div>
        {actions && <div style={{ display: 'flex', alignItems: 'center', gap: 8, flexShrink: 0 }}>{actions}</div>}
      </div>
      <div style={{ padding: 18 }}>{children}</div>
    </div>
  );
}
function Field2({ label, hint, children }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
      <span style={{ font: '600 11.5px/1 Inter', color: 'var(--d-text-2)' }}>{label}</span>
      {children}
      {hint && <span style={{ font: '500 11px/1.3 Inter', color: 'var(--d-text-3)' }}>{hint}</span>}
    </label>
  );
}
function SumLine({ label, v, pct, color }) {
  return (
    <div style={{ marginBottom: 10 }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 8 }}>
        <span style={{ font: '500 12px/1 Inter', flex: 1 }}>{label}</span>
        <span className="d-mono" style={{ font: '600 12px/1 JetBrains Mono' }}>{brl2k(v)}</span>
        {pct != null && <span style={{ font: '500 10.5px/1 Inter', color: 'var(--d-text-3)', width: 36, textAlign: 'right' }}>{pct.toFixed(1)}%</span>}
      </div>
      {pct != null && (
        <div style={{ height: 3, background: 'var(--d-bg-2)', borderRadius: 100, marginTop: 4 }}>
          <div style={{ height: '100%', width: pct + '%', background: color, borderRadius: 100 }}/>
        </div>
      )}
    </div>
  );
}

/* ============================ MARGEM & VALOR DE VENDA ============================ */
function MargemValorVenda() {
  // Risco: cliente fechar só obra menor → empresa fica deficitária
  const [margens, setMargens] = useS2({ 'F-1': 35, 'F-2': 35, 'F-3': 28, 'F-4': 45 });
  const frentes = [
    { id: 'F-1', obra: 'Cais Norte', nome: 'Cravação A, Berço 12-18', custo: 4850000 },
    { id: 'F-2', obra: 'Cais Norte', nome: 'Cravação B, Berço 19-24', custo: 3920000 },
    { id: 'F-3', obra: 'Cais Sul → Atracadouro', nome: 'Frente C (deslocada)', custo: 6240000 },
    { id: 'F-4', obra: 'Píer Sul (mar)', nome: 'Frente D, embarcada', custo: 5680000 },
  ];

  const obras = {};
  frentes.forEach(f => {
    if (!obras[f.obra]) obras[f.obra] = { custo: 0, venda: 0 };
    const venda = f.custo * (1 + margens[f.id]/100);
    obras[f.obra].custo += f.custo;
    obras[f.obra].venda += venda;
  });
  const totalCusto = frentes.reduce((s,f)=>s+f.custo,0);
  const totalVenda = frentes.reduce((s,f)=>s+f.custo*(1+margens[f.id]/100),0);
  const margemTotal = (totalVenda - totalCusto) / totalCusto * 100;

  return (
    <div style={{ maxWidth: 1280 }}>
      {/* Topo: KPIs */}
      <div className="card" style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', marginBottom: 18 }}>
        <DUI.Kpi label="Custo total" value={brl2k(totalCusto)} sub="soma das frentes"/>
        <DUI.Kpi label="Valor de venda" value={brl2k(totalVenda)} accent="#22A94A"/>
        <DUI.Kpi label="Lucro projetado" value={brl2k(totalVenda - totalCusto)} sub={`${margemTotal.toFixed(1)}% sobre custo`}/>
        <DUI.Kpi label="Risco se só F-3 fechar" value="−R$ 1,4 M" accent="#c8302a" sub="frente carregadora"/>
      </div>

      {/* Calculadora reversa */}
      <Card2 title="Calculadora reversa, atingir margem alvo" icon="calc"
        subtitle="Cliente quer rentabilidade X? Sistema calcula o valor de venda em segundos.">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 14, alignItems: 'flex-end' }}>
          <Field2 label="Custo apurado da frente"><input className="inp inp-num" defaultValue="4.850.000" disabled style={{background:'var(--d-bg-2)'}}/></Field2>
          <Field2 label="Margem alvo (%)"><input className="inp inp-num" defaultValue="35"/></Field2>
          <div className="card" style={{ padding: '10px 14px', boxShadow: 'none', background: 'var(--d-green-soft)' }}>
            <div style={{ font: '600 11px/1 Inter', color: '#1a8a3c', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Valor de venda sugerido</div>
            <div className="d-mono" style={{ font: '800 22px/1 JetBrains Mono', color: '#1a8a3c', marginTop: 5 }}>R$ 6.547.500</div>
            <div style={{ font: '500 11px/1.3 Inter', color: 'var(--d-text-3)', marginTop: 4 }}>já considerando seguro 1,2% sobre venda</div>
          </div>
        </div>
      </Card2>

      {/* Tabela: Margem por frente */}
      <Card2 title="Margem por frente, protege contra glosa de obra" icon="layers"
        subtitle="A obra grande pode 'carregar' o lucro. Se o cliente fecha só a menor, lucro vai a zero. Cada frente precisa ser viável sozinha.">
        <table className="tbl">
          <thead><tr>
            <th>Frente</th>
            <th>Obra</th>
            <th className="num">Custo</th>
            <th style={{ width: 240 }}>Margem (%)</th>
            <th className="num">Valor venda</th>
            <th className="num">Lucro</th>
            <th>Status</th>
          </tr></thead>
          <tbody>
            {frentes.map(f => {
              const m = margens[f.id];
              const venda = f.custo * (1 + m/100);
              const lucro = venda - f.custo;
              const status = m < 25 ? { l: 'risco', c: '#c8302a' } : m < 35 ? { l: 'aceitável', c: '#d97706' } : { l: 'saudável', c: '#22A94A' };
              return (
                <tr key={f.id}>
                  <td>
                    <div className="d-mono" style={{ font: '500 11px/1 JetBrains Mono', color: 'var(--d-text-3)' }}>{f.id}</div>
                    <div style={{ fontWeight: 600, marginTop: 2 }}>{f.nome}</div>
                  </td>
                  <td style={{ color: 'var(--d-text-2)' }}>{f.obra}</td>
                  <td className="num">{brl2k(f.custo)}</td>
                  <td>
                    <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
                      <input type="range" min="0" max="60" value={m} onChange={e=>setMargens({...margens, [f.id]: +e.target.value})} style={{ flex: 1, accentColor: status.c }}/>
                      <span className="d-mono" style={{ font: '700 13px/1 JetBrains Mono', color: status.c, width: 38, textAlign: 'right' }}>{m}%</span>
                    </div>
                  </td>
                  <td className="num" style={{ fontWeight: 600 }}>{brl2k(venda)}</td>
                  <td className="num" style={{ color: '#22A94A', fontWeight: 600 }}>{brl2k(lucro)}</td>
                  <td><span className="chip" style={{ background: status.c+'22', color: status.c, height: 18, fontSize: 10 }}>{status.l.toUpperCase()}</span></td>
                </tr>
              );
            })}
            <tr style={{ background: 'var(--d-bg)' }}>
              <td colSpan={2} style={{ fontWeight: 700 }}>Total do projeto</td>
              <td className="num" style={{ fontWeight: 700 }}>{brl2k(totalCusto)}</td>
              <td className="num d-mono" style={{ fontWeight: 700, color: '#22A94A' }}>{margemTotal.toFixed(1)}%</td>
              <td className="num" style={{ fontWeight: 700 }}>{brl2k(totalVenda)}</td>
              <td className="num" style={{ fontWeight: 700, color: '#22A94A' }}>{brl2k(totalVenda - totalCusto)}</td>
              <td></td>
            </tr>
          </tbody>
        </table>
      </Card2>

      {/* HERANÇA — risco financeiro de dependência entre frentes (v5) */}
      <Card2 title="Risco de herança de recursos entre frentes" icon="bell"
        subtitle="Quando uma frente recebe equipe e equipamentos cedidos por outra, ganha desconto. Mas vira refém: se a frente fonte cancelar, o custo volta — e a margem despenca.">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 12, marginBottom: 14 }}>
          <div className="card" style={{ padding: 14, boxShadow: 'none', borderLeft: '3px solid #1a8a3c' }}>
            <div style={{ font: '600 11px/1 Inter', color: '#1a8a3c', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6 }}>Cenário planejado</div>
            <div style={{ font: '600 13px/1.3 Inter', marginBottom: 8 }}>F-4 herda de F-1 (Cravação A)</div>
            <div style={{ display: 'flex', justifyContent: 'space-between', font: '500 12px/1.5 Inter', color: 'var(--d-text-2)' }}>
              <span>Custo F-4 sem herança</span>
              <span className="d-mono">R$ 5.680k</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', font: '500 12px/1.5 Inter', color: '#1a8a3c' }}>
              <span>Desconto por compartilhamento</span>
              <span className="d-mono" style={{fontWeight:700}}>− R$ 1.850k</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 6, marginTop: 6, borderTop: '1px solid var(--d-border)', font: '700 13px/1.4 Inter', color: 'var(--d-text)' }}>
              <span>Custo F-4 com herança</span>
              <span className="d-mono">R$ 3.830k</span>
            </div>
            <div style={{ marginTop: 8, font: '500 11px/1.4 Inter', color: 'var(--d-text-3)' }}>
              Margem F-4 sobe de 45% para <strong style={{color:'#1a8a3c'}}>61% </strong> — atrativo para fechar o pacote.
            </div>
          </div>

          <div className="card" style={{ padding: 14, boxShadow: 'none', borderLeft: '3px solid var(--d-danger)', background: 'var(--d-warn-bg)' }}>
            <div style={{ font: '600 11px/1 Inter', color: 'var(--d-danger)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 6, display:'flex', alignItems:'center', gap:6 }}>
              <DUI.Icon name="bell" size={12}/>Cenário de risco — F-1 cancelada/atrasada
            </div>
            <div style={{ font: '600 13px/1.3 Inter', marginBottom: 8 }}>F-4 perde os recursos cedidos</div>
            <div style={{ display: 'flex', justifyContent: 'space-between', font: '500 12px/1.5 Inter', color: 'var(--d-text-2)' }}>
              <span>Custo F-4 com herança (planejado)</span>
              <span className="d-mono">R$ 3.830k</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', font: '500 12px/1.5 Inter', color: 'var(--d-danger)' }}>
              <span>Re-mobilização forçada</span>
              <span className="d-mono" style={{fontWeight:700}}>+ R$ 2.380k</span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', paddingTop: 6, marginTop: 6, borderTop: '1px solid var(--d-border)', font: '700 13px/1.4 Inter', color: 'var(--d-text)' }}>
              <span>Custo real da F-4</span>
              <span className="d-mono">R$ 6.210k</span>
            </div>
            <div style={{ marginTop: 8, font: '500 11px/1.4 Inter', color: 'var(--d-text-3)' }}>
              Margem F-4 cai para <strong style={{color:'var(--d-danger)'}}>−7%</strong> — projeto fica deficitário se F-1 não acontecer.
            </div>
          </div>
        </div>

        <div style={{ padding: 12, background: 'var(--d-bg)', borderRadius: 6, font: '500 12.5px/1.5 Inter', color: 'var(--d-text-2)', display:'flex', alignItems:'flex-start', gap: 10 }}>
          <DUI.Icon name="info" size={16} style={{color:'var(--d-warn)', flex:'none', marginTop: 2}}/>
          <div>
            <strong>Recomendação:</strong> condicionar a margem reduzida da F-4 ao fechamento conjunto da F-1 no contrato. Se cliente glosa F-1, contrato deve permitir reajuste automático do valor de venda da F-4 — caso contrário, a Destaca absorve o prejuízo de re-mobilização.
          </div>
        </div>
      </Card2>

      {/* Análise de glosa */}
      <Card2 title="Análise de glosa, e se o cliente fechar só parte?" icon="info">
        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12 }}>
          {[
            { titulo: 'Cenário A, fecha tudo', frentes: ['F-1','F-2','F-3','F-4'], cor: '#22A94A' },
            { titulo: 'Cenário B, fecha só Cais Norte', frentes: ['F-1','F-2'], cor: '#0E2A47' },
            { titulo: 'Cenário C, fecha só F-3 (deslocada)', frentes: ['F-3'], cor: '#d97706', alerta: 'frente carregadora, lucro mínimo' },
            { titulo: 'Cenário D, fecha só F-4 (embarcada)', frentes: ['F-4'], cor: '#0E2A47' },
          ].map((c, ci) => {
            const fs = frentes.filter(f => c.frentes.includes(f.id));
            const cu = fs.reduce((s,f)=>s+f.custo,0);
            const vd = fs.reduce((s,f)=>s+f.custo*(1+margens[f.id]/100),0);
            return (
              <div key={ci} className="card" style={{ padding: 14, boxShadow: 'none', borderLeft: '3px solid '+c.cor }}>
                <div style={{ font: '600 13px/1.3 Inter', marginBottom: 6 }}>{c.titulo}</div>
                <div style={{ display: 'flex', gap: 14, font: '500 11.5px/1 Inter', color: 'var(--d-text-3)' }}>
                  <span>Custo: <strong className="d-mono" style={{color:'var(--d-text)'}}>{brl2k(cu)}</strong></span>
                  <span>Venda: <strong className="d-mono" style={{color:'var(--d-text)'}}>{brl2k(vd)}</strong></span>
                  <span style={{marginLeft:'auto'}}>Margem: <strong className="d-mono" style={{color:c.cor}}>{((vd-cu)/cu*100).toFixed(1)}%</strong></span>
                </div>
                {c.alerta && <div style={{ marginTop: 8, padding: '6px 10px', background: '#fef3e6', borderRadius: 4, font: '500 11px/1.4 Inter', color: '#a46a02' }}>⚠ {c.alerta}</div>}
              </div>
            );
          })}
        </div>
      </Card2>
    </div>
  );
}

/* ============================ TIMELINE / GANTT (v5) ============================
   Cada frente fica na SUA obra (sem deslocamento entre obras).
   Linha tracejada conecta frente fonte → frente que herda recursos no mês de transferência.
============================================================================ */
function TimelineGantt() {
  const meses = ['Ago/26','Set/26','Out/26','Nov/26','Dez/26','Jan/27','Fev/27','Mar/27','Abr/27','Mai/27','Jun/27'];
  // Modelo: linhas representam Obras (com suas frentes embaixo). Frentes nunca mudam de obra.
  const linhas = [
    { tipo: 'obra', nome: 'Obra 1 · Cais Norte', start: 0, end: 8, cor: 'rgba(14,42,71,0.10)' },
    { tipo: 'frente', id: 'F-1', nome: 'F-1 · Cravação A — Berço 12-18', start: 0, end: 8, cor: '#22A94A', cede: true },
    { tipo: 'frente', id: 'F-2', nome: 'F-2 · Cravação B — Berço 19-24', start: 0, end: 7, cor: '#1a8a3c' },
    { tipo: 'obra', nome: 'Obra 2 · Cais Sul (extensão)', start: 0, end: 9, cor: 'rgba(14,42,71,0.10)' },
    { tipo: 'frente', id: 'F-3', nome: 'F-3 · Perfuração rocha', start: 0, end: 9, cor: '#0E2A47' },
    { tipo: 'frente', id: 'F-4', nome: 'F-4 · Acabamento e arrasamento', start: 8, end: 11, cor: '#d97706', herda: { de: 'F-1', mes: 8, recursos: 'equipe + equipamentos da F-1' } },
    { tipo: 'obra', nome: 'Obra 3 · Mole de atracação 4', start: 4, end: 10, cor: 'rgba(14,42,71,0.10)' },
    { tipo: 'frente', id: 'F-5', nome: 'F-5 · Cravação embarcada', start: 4, end: 10, cor: '#a45f0e' },
  ];
  const colW = 84;
  const rowH = 38;
  const labelW = 280;

  return (
    <div style={{ maxWidth: 1380 }}>
      <Card2 title="Cronograma do projeto" icon="clock"
        subtitle="Cada frente permanece na sua obra. Quando uma frente termina antes, seus recursos podem ser cedidos a outra frente do mesmo projeto (linha tracejada vermelha = herança de recursos).">
        {/* Header de meses */}
        <div style={{ display: 'flex', borderBottom: '1px solid var(--d-border)', position: 'sticky', top: 0, background: 'white', zIndex: 2 }}>
          <div style={{ width: labelW, padding: '8px 12px', font: '600 11px/1 Inter', color: 'var(--d-text-3)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Obra / Frente</div>
          <div style={{ flex: 1, display: 'flex' }}>
            {meses.map((m, i) => (
              <div key={i} style={{ width: colW, padding: '8px 0', textAlign: 'center', font: '600 10.5px/1 JetBrains Mono', color: 'var(--d-text-2)', borderLeft: '1px solid var(--d-border)' }}>{m}</div>
            ))}
          </div>
        </div>
        {/* Linhas */}
        <div style={{ position: 'relative' }}>
          {linhas.map((l, li) => (
            <div key={li} style={{ display: 'flex', height: rowH, borderBottom: '1px solid var(--d-border)', alignItems: 'center', background: l.tipo === 'obra' ? '#fafbfc' : 'white' }}>
              <div style={{ width: labelW, padding: '0 12px', display: 'flex', alignItems: 'center', gap: 8 }}>
                {l.tipo === 'obra' ? <DUI.Icon name="layers" size={14} style={{color: 'var(--d-navy)'}}/> : <DUI.Icon name="pile" size={13} style={{color: 'var(--d-text-3)'}}/>}
                <span style={{ font: l.tipo === 'obra' ? '600 12.5px/1.2 Inter' : '500 12px/1.2 Inter', color: 'var(--d-text)' }}>{l.nome}</span>
                {l.cede && <span style={{ font: '600 9px/1 JetBrains Mono', color: '#1a8a3c', background: 'var(--d-green-soft)', padding: '2px 5px', borderRadius: 3, letterSpacing: '0.04em' }}>CEDE</span>}
                {l.herda && <span style={{ font: '600 9px/1 JetBrains Mono', color: 'var(--d-warn)', background: 'var(--d-warn-bg)', padding: '2px 5px', borderRadius: 3, letterSpacing: '0.04em' }}>HERDA</span>}
              </div>
              <div style={{ flex: 1, position: 'relative', height: '100%' }}>
                {meses.map((_,i) => <div key={i} style={{ position:'absolute', left: i*colW, top: 0, bottom: 0, width: 1, background: 'var(--d-border)' }}/>)}
                <div style={{
                  position: 'absolute',
                  left: l.start * colW + 4,
                  width: (l.end - l.start) * colW - 8,
                  top: l.tipo === 'obra' ? 4 : 8,
                  height: l.tipo === 'obra' ? rowH - 8 : rowH - 16,
                  background: l.cor,
                  borderRadius: l.tipo === 'obra' ? 4 : 100,
                  display: 'flex', alignItems: 'center', justifyContent: l.tipo === 'frente' ? 'center' : 'flex-start',
                  paddingLeft: l.tipo === 'obra' ? 10 : 0,
                  font: '600 11px/1 Inter',
                  color: l.tipo === 'frente' ? 'white' : 'var(--d-text-2)',
                }}>
                  {l.tipo === 'obra' && <span>{l.nome.split('·')[0].trim()}</span>}
                  {l.tipo === 'frente' && <span>{l.id}</span>}
                </div>
              </div>
            </div>
          ))}
          {/* Seta de herança F-1 → F-4: F-1 está na linha 1, F-4 na linha 5 (índices 1 e 5 do array de linhas)
              Distância vertical = (5 - 1) * rowH. Origem horizontal: fim da F-1 (col 8). Destino: início da F-4 (col 8). */}
          <svg style={{
            position: 'absolute',
            left: labelW + (8 * colW) - 6,
            top: rowH * 1 + (rowH - 16) / 2 + 8,
            width: 60,
            height: rowH * 4 + 8,
            pointerEvents: 'none',
            overflow: 'visible',
          }}>
            {/* Linha tracejada vertical com pequena curva */}
            <path d={`M 4 0 Q 4 ${rowH * 2}, 14 ${rowH * 4 - 6}`}
              stroke="#c8302a" strokeWidth="1.8" strokeDasharray="5 3" fill="none"/>
            {/* Cabeça da seta apontando para baixo-direita */}
            <polygon points={`8,${rowH*4 - 12} 18,${rowH*4 - 6} 10,${rowH*4 - 2}`} fill="#c8302a"/>
            {/* Label "herda" no meio da curva */}
            <rect x="-4" y={rowH * 1.8} width="50" height="16" rx="3" fill="white" stroke="#c8302a" strokeWidth="0.8"/>
            <text x="20" y={rowH * 1.8 + 11} textAnchor="middle" fontSize="9.5" fontWeight="700" fill="#c8302a" fontFamily="JetBrains Mono">↰ HERDA</text>
          </svg>
        </div>
        <div style={{ display: 'flex', gap: 18, marginTop: 14, font: '500 11px/1.4 Inter', color: 'var(--d-text-3)', flexWrap: 'wrap' }}>
          <span><span style={{display:'inline-block',width:24,height:8,background:'#22A94A',borderRadius:100,verticalAlign:'middle',marginRight:6}}/>Frente em terra</span>
          <span><span style={{display:'inline-block',width:24,height:8,background:'#a45f0e',borderRadius:100,verticalAlign:'middle',marginRight:6}}/>Frente embarcada</span>
          <span><span style={{display:'inline-block',width:24,height:0,borderTop:'2px dashed #c8302a',verticalAlign:'middle',marginRight:6}}/>Herança de recursos (frente fonte → frente que herda)</span>
          <span style={{marginLeft:'auto', color: 'var(--d-warn)' }}><DUI.Icon name="bell" size={11} style={{verticalAlign:-1, marginRight:3}}/>Frentes "HERDA" têm risco financeiro vinculado à frente fonte (ver Margem & Venda)</span>
        </div>
      </Card2>
    </div>
  );
}

/* ============================ BASE V2 ============================ */
function BaseConhecimentoV2() {
  const [tab, setTab] = useS2('cargos');
  const [novoCargo, setNovoCargo] = useS2(false);
  const tabs = [
    { id: 'cargos', label: 'Cargos & Reajustes', icon: 'user' },
    { id: 'equip', label: 'Equipamentos', icon: 'truck' },
    { id: 'mat', label: 'Materiais & insumos', icon: 'pkg' },
    { id: 'alertas', label: 'Alertas de impacto', icon: 'bell' },
    { id: 'reajustes', label: 'Reajustes programados', icon: 'clock' },
  ];
  return (
    <div style={{ maxWidth: 1280 }}>
      <div style={{ display: 'flex', gap: 4, borderBottom: '1px solid var(--d-border)', marginBottom: 16 }}>
        {tabs.map(t => (
          <button key={t.id} onClick={()=>setTab(t.id)} style={{
            background: 'none', border: 'none', cursor: 'pointer',
            padding: '10px 14px', font: '500 13px/1 Inter',
            color: tab === t.id ? 'var(--d-text)' : 'var(--d-text-3)',
            borderBottom: '2px solid', borderColor: tab === t.id ? '#22A94A' : 'transparent',
            display: 'flex', alignItems: 'center', gap: 7, marginBottom: -1,
          }}>
            <DUI.Icon name={t.icon} size={14}/>{t.label}
          </button>
        ))}
      </div>

      {tab === 'cargos' && (
        <Card2 title="Cargos · valores base + adicionais por flag de obra" icon="user"
          subtitle='Periculosidade e insalubridade são FLAGS por obra, não duplicam o cargo. "Tudo é variável", Ana.'
          actions={<button className="btn btn-primary btn-sm" onClick={()=>setNovoCargo(true)}><DUI.Icon name="plus" size={12}/>Novo cargo</button>}>
          <table className="tbl">
            <thead><tr><th>Cargo</th><th>Tipo</th><th className="num">Salário base</th><th className="num">Encargos</th><th className="num">+Peric.</th><th className="num">+Insal.</th><th className="num">HE padrão</th><th>Próx. dissídio</th></tr></thead>
            <tbody>
              {[
                ['Engº Produção','I',14000,1.0,30,20,0,'Out/26 +5%'],
                ['Mestre de Obra','D',12000,1.0,30,20,'20h/mês','Out/26 +5%'],
                ['Op. Perfuratriz','D',5500,1.0,30,20,'40h/mês','Out/26 +5%'],
                ['Soldador','D',4500,1.0,30,20,'40h/mês','Out/26 +5%'],
                ['Ajudante A','D',2500,1.0,30,20,'40h/mês','Out/26 +5%'],
                ['Comprador','I',7000,1.0,0,0,'20h/mês','Out/26 +5%'],
              ].map((r,i) => (
                <tr key={i}>
                  <td style={{fontWeight:600}}>{r[0]}</td>
                  <td><span className="chip" style={{background: r[1]==='D'?'#e6f5ea':'#e8effa', color: r[1]==='D'?'#1a8a3c':'#1d4f97', height:18, fontSize:10}}>{r[1]==='D'?'DIRETO':'INDIRETO'}</span></td>
                  <td className="num">{brl2(r[2])}</td>
                  <td className="num">{(r[3]*100).toFixed(0)}%</td>
                  <td className="num">{r[4]>0?'+'+r[4]+'%':'—'}</td>
                  <td className="num">{r[5]>0?'+'+r[5]+'%':'—'}</td>
                  <td className="num">{r[6]||'—'}</td>
                  <td><span className="chip chip-warn" style={{height:18, fontSize:10}}>{r[7]}</span></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card2>
      )}

      {tab === 'reajustes' && (
        <Card2 title="Reajustes programados" icon="clock"
          subtitle='Aplicar do mês X em diante (não retroativo). Dissídio anual em outubro é regra da categoria da Destaca.'>
          <table className="tbl">
            <thead><tr><th>Item</th><th>Valor atual</th><th>Novo valor</th><th>A partir de</th><th>Status</th><th></th></tr></thead>
            <tbody>
              {[
                ['Salários (dissídio)','base','+5,0%','Out/26','agendado','#d97706'],
                ['Diesel S10','R$ 6,15/L','R$ 6,45/L','28/04/26','aplicado','#22A94A'],
                ['Aluguel guindaste 100t','R$ 92.000/mês','R$ 95.000/mês','01/06/26','agendado','#d97706'],
                ['Eletrodo (E7018)','R$ 32,50/kg','R$ 34,00/kg','15/05/26','agendado','#d97706'],
              ].map((r,i) => (
                <tr key={i}>
                  <td style={{fontWeight:500}}>{r[0]}</td>
                  <td className="d-mono" style={{color:'var(--d-text-3)'}}>{r[1]}</td>
                  <td className="d-mono" style={{fontWeight:700, color: '#0E2A47'}}>{r[2]}</td>
                  <td className="d-mono">{r[3]}</td>
                  <td><span className="chip" style={{background: r[5]+'22', color: r[5], height:18, fontSize:10}}>{r[4].toUpperCase()}</span></td>
                  <td><button className="btn btn-sm btn-ghost"><DUI.Icon name="edit" size={11}/></button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card2>
      )}

      {tab === 'alertas' && (
        <Card2 title="Alertas de impacto, quando um preço muda" icon="bell"
          subtitle='Toda mudança em cadastro consulta projetos ativos antes de propagar. Você decide se aplica.'>
          {[
            { item: 'Diesel S10', de: 'R$ 6,15/L', para: 'R$ 6,45/L', projetos: 7, impacto: 18400, dt: '28/04/26', status: 'aplicado' },
            { item: 'Aluguel Guindaste 100t', de: 'R$ 92.000', para: 'R$ 95.000', projetos: 3, impacto: 24000, dt: 'pendente', status: 'aguardando' },
            { item: 'Salário Soldador', de: 'R$ 4.500', para: 'R$ 4.725', projetos: 12, impacto: 67500, dt: 'Out/26', status: 'agendado' },
          ].map((a,i) => (
            <div key={i} className="card" style={{ padding: 14, marginBottom: 10, boxShadow: 'none', borderLeft: '3px solid '+(a.status==='aplicado'?'#22A94A':a.status==='agendado'?'#d97706':'#c8302a') }}>
              <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>
                <DUI.Icon name="bell" size={16} style={{color: 'var(--d-text-3)'}}/>
                <div style={{ flex: 1 }}>
                  <div style={{ font: '600 13px/1.2 Inter' }}>{a.item} · <span className="d-mono" style={{ color: 'var(--d-text-3)' }}>{a.de}</span> → <span className="d-mono" style={{ color: '#d97706' }}>{a.para}</span></div>
                  <div style={{ font: '500 11.5px/1.3 Inter', color: 'var(--d-text-3)', marginTop: 4 }}>
                    {a.projetos} projetos ativos afetados · impacto estimado <strong className="d-mono" style={{color:'var(--d-text-2)'}}>+{brl2k(a.impacto)}</strong>
                  </div>
                </div>
                <span className="chip" style={{ background: (a.status==='aplicado'?'#22A94A':a.status==='agendado'?'#d97706':'#c8302a')+'22', color: a.status==='aplicado'?'#1a8a3c':a.status==='agendado'?'#a46a02':'#9d2520', height: 20, fontSize: 10 }}>{a.status.toUpperCase()}</span>
                <button className="btn btn-sm">Ver afetados</button>
              </div>
            </div>
          ))}
        </Card2>
      )}

      {tab === 'equip' && (
        <Card2 title="Equipamentos · catálogo + modo padrão (alug/aquis)" icon="truck"
          subtitle='Aluguel distribui custo no período de uso. Aquisição concentra no mês de compra e é rateada entre obras futuras.'>
          <table className="tbl">
            <thead><tr><th>Equipamento</th><th>Modo padrão</th><th className="num">Aquisição</th><th className="num">Deprec./mês</th><th className="num">Aluguel/mês</th><th className="num">Manut./mês</th><th className="num">Diesel L/h</th><th></th></tr></thead>
            <tbody>
              {(window.DESTACA_DATA?.equipamentos || []).map(e => (
                <tr key={e.id}>
                  <td style={{fontWeight:600}}>{e.nome}</td>
                  <td><span className="chip" style={{background: e.modo === 'aluguel' ? '#fef3e6' : '#e6f5ea', color: e.modo === 'aluguel' ? '#a46a02' : '#1a8a3c', height:18, fontSize:10}}>{(e.modo||'aquis').toUpperCase()}</span></td>
                  <td className="num d-mono">{brl2(e.valor)}</td>
                  <td className="num d-mono">{brl2(e.deprec_mes)}</td>
                  <td className="num d-mono">{e.aluguel_mes ? brl2(e.aluguel_mes) : '—'}</td>
                  <td className="num d-mono">{brl2(e.manut_mes)}</td>
                  <td className="num d-mono">{e.diesel_lh > 0 ? e.diesel_lh + ' L/h' : '—'}</td>
                  <td><button className="btn btn-sm btn-ghost"><DUI.Icon name="edit" size={11}/></button></td>
                </tr>
              ))}
            </tbody>
          </table>
        </Card2>
      )}

      {tab === 'mat' && (
        <>
          <Card2 title="Materiais & insumos" icon="pkg"
            subtitle='Cliente pode fornecer parte (armação/concreto). Mesmo zerado, MO de instalação é mantida.'>
            <table className="tbl">
              <thead><tr><th>Material</th><th>Unidade</th><th className="num">Custo unitário</th><th>Var. 12m</th><th></th></tr></thead>
              <tbody>
                {(window.DESTACA_DATA?.materiais || []).map((m,i) => {
                  const vars12m = ['+10,8%', '+14,4%', '+23,6%', '+10,6%', '+8,2%', '+5,1%'];
                  const variacao = vars12m[i % vars12m.length];
                  const cor = parseFloat(variacao) > 15 ? '#c8302a' : parseFloat(variacao) > 10 ? '#d97706' : '#22A94A';
                  return (
                    <tr key={m.id}>
                      <td style={{fontWeight:600}}>{m.nome}</td>
                      <td>{m.unid}</td>
                      <td className="num d-mono">{brl2(m.custo)}</td>
                      <td className="num"><span style={{color:cor, fontWeight:600, font:'600 11.5px/1 JetBrains Mono'}}>{variacao}</span></td>
                      <td><button className="btn btn-sm btn-ghost"><DUI.Icon name="edit" size={11}/></button></td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </Card2>

          <Card2 title="Despesas indiretas" icon="money"
            subtitle='Custos por critério (por funcionário/dia, por obra/mês, etc).'>
            <table className="tbl">
              <thead><tr><th>Despesa</th><th>Critério</th><th className="num">Valor</th><th></th></tr></thead>
              <tbody>
                {(window.DESTACA_DATA?.despesas || []).map(d => (
                  <tr key={d.id}>
                    <td style={{fontWeight:600}}>{d.nome}</td>
                    <td style={{color:'var(--d-text-2)'}}>{d.unid}</td>
                    <td className="num d-mono">{brl2(d.valor)}</td>
                    <td><button className="btn btn-sm btn-ghost"><DUI.Icon name="edit" size={11}/></button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </Card2>

          <Card2 title="Tipos de solo & produtividade" icon="layers"
            subtitle='Estacas/dia por equipe. Fator de dificuldade ajusta cronograma e consumo de diesel.'>
            <table className="tbl">
              <thead><tr><th>Solo</th><th className="num">Estacas/dia (frente)</th><th className="num">Fator dificuldade</th><th></th></tr></thead>
              <tbody>
                {(window.DESTACA_DATA?.solos || []).map(s => (
                  <tr key={s.id}>
                    <td style={{fontWeight:600}}>{s.nome}</td>
                    <td className="num d-mono">{s.estacas_dia}</td>
                    <td className="num d-mono">×{s.fator}</td>
                    <td><button className="btn btn-sm btn-ghost"><DUI.Icon name="edit" size={11}/></button></td>
                  </tr>
                ))}
              </tbody>
            </table>
          </Card2>

          <Card2 title="BDI / Margens, composição padrão" icon="calc"
            subtitle='Aplicado por padrão. Cada projeto pode sobrescrever.'>
            <div style={{ padding: 16, display: 'grid', gridTemplateColumns: 'repeat(2, 1fr)', gap: 12, maxWidth: 600 }}>
              {[
                ['Lucro', '12,00'],
                ['Impostos (PIS/COFINS/ISS)', '8,65'],
                ['Despesas indiretas', '4,50'],
                ['Riscos / contingência', '2,00'],
              ].map((r,i) => (
                <label key={i} style={{display:'flex', flexDirection:'column', gap:5}}>
                  <span style={{font:'500 11.5px/1 Inter', color:'var(--d-text-3)'}}>{r[0]}</span>
                  <div style={{ position: 'relative' }}>
                    <input className="inp" defaultValue={r[1]} style={{ paddingRight: 24, textAlign: 'right', fontFamily: 'JetBrains Mono' }}/>
                    <span style={{ position: 'absolute', right: 9, top: 8, font: '500 12px/1 JetBrains Mono', color: 'var(--d-text-3)' }}>%</span>
                  </div>
                </label>
              ))}
            </div>
            <div style={{ margin: '4px 16px 16px', padding: 14, background: 'var(--d-green-soft)', borderRadius: 6, display: 'flex', alignItems: 'baseline', gap: 14 }}>
              <span style={{font:'600 11px/1 Inter', color:'#1a8a3c', textTransform:'uppercase', letterSpacing:'0.06em'}}>BDI total</span>
              <span className="d-mono" style={{ font: '800 22px/1 JetBrains Mono', color: '#1a8a3c' }}>27,15%</span>
              <span style={{font:'500 11.5px/1.4 Inter', color:'#1a8a3c', marginLeft:'auto'}}>fator multiplicador <strong className="d-mono">1,2715</strong></span>
            </div>
          </Card2>
        </>
      )}
      {novoCargo && <ModalNovoCargo onClose={()=>setNovoCargo(false)}/>}
    </div>
  );
}

/* ============================ MODAL NOVO CARGO ============================ */
function ModalNovoCargo({ onClose }) {
  const [salario, setSalario] = useS2(5500);
  const [encargos, setEncargos] = useS2(100);
  const [tipo, setTipo] = useS2('D');
  const [peric, setPeric] = useS2(30);
  const [insal, setInsal] = useS2(20);
  const [he, setHe] = useS2(40);

  const custoMes = salario * (1 + encargos/100);
  const custoHora = custoMes / 220;
  const custoComPeric = salario * (1 + peric/100) * (1 + encargos/100);
  const custoComAmbos = salario * (1 + (peric+insal)/100) * (1 + encargos/100);

  return (
    <div onClick={onClose} style={{ position: 'fixed', inset: 0, background: 'rgba(14, 42, 71, 0.55)', display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 100, padding: 20 }}>
      <div onClick={e=>e.stopPropagation()} className="card" style={{ width: '100%', maxWidth: 720, maxHeight: '90vh', overflow: 'auto', padding: 0 }} className_="scroll">
        {/* header */}
        <div style={{ padding: '18px 24px', borderBottom: '1px solid var(--d-border)', display: 'flex', alignItems: 'center', gap: 12 }}>
          <div style={{ width: 34, height: 34, borderRadius: 8, background: 'var(--d-green-soft)', color: '#1a8a3c', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            <DUI.Icon name="user" size={16}/>
          </div>
          <div style={{ flex: 1 }}>
            <h2 style={{ margin: 0, font: '700 17px/1.15 Inter' }}>Novo cargo</h2>
            <div style={{ font: '500 12px/1.3 Inter', color: 'var(--d-text-3)', marginTop: 3 }}>Cadastrar cargo na base de conhecimento. Disponível para todos os orçamentos futuros.</div>
          </div>
          <button className="btn btn-ghost" onClick={onClose}><DUI.Icon name="x" size={14}/></button>
        </div>

        <div style={{ padding: 24 }}>
          {/* identificação */}
          <SecaoForm titulo="Identificação">
            <div style={{ display: 'grid', gridTemplateColumns: '2fr 1fr', gap: 14 }}>
              <CampoForm label="Nome do cargo" hint="Ex: Operador de Perfuratriz">
                <input className="inp" placeholder="Nome do cargo" autoFocus/>
              </CampoForm>
              <CampoForm label="Categoria">
                <select className="inp"><option>Operacional</option><option>Técnica</option><option>Administrativa</option><option>Liderança</option></select>
              </CampoForm>
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, marginTop: 12 }}>
              <CampoForm label="Tipo" hint="Direto entra na frente de obra · Indireto pode escalonar (0,3 = 30% do tempo)">
                <div style={{ display: 'flex', gap: 6 }}>
                  {[['D','Direto'],['I','Indireto'],['D-loc','Direto (vem na locação)']].map(t => (
                    <button key={t[0]} type="button" onClick={()=>setTipo(t[0])} className="btn btn-sm" style={{
                      flex: 1, background: tipo === t[0] ? '#0E2A47' : 'white',
                      color: tipo === t[0] ? 'white' : 'var(--d-text-2)', borderColor: tipo === t[0] ? '#0E2A47' : 'var(--d-border)',
                    }}>{t[1]}</button>
                  ))}
                </div>
              </CampoForm>
              <CampoForm label="CBO (opcional)" hint="Classificação Brasileira de Ocupações">
                <input className="inp" placeholder="0000-00"/>
              </CampoForm>
            </div>
          </SecaoForm>

          {/* remuneração */}
          <SecaoForm titulo="Remuneração base">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
              <CampoForm label="Salário base mensal" hint="Sem encargos, adicionais ou HE">
                <div style={{ position:'relative' }}>
                  <span style={{ position:'absolute', left:10, top:9, font:'500 11.5px/1 JetBrains Mono', color:'var(--d-text-3)' }}>R$</span>
                  <input className="inp" type="number" value={salario} onChange={e=>setSalario(+e.target.value||0)} style={{ paddingLeft: 36, fontFamily:'JetBrains Mono' }}/>
                </div>
              </CampoForm>
              <CampoForm label="Encargos" hint="INSS + FGTS + 13º + férias + provisões. Padrão Destaca: ~100%.">
                <div style={{ position:'relative' }}>
                  <input className="inp" type="number" value={encargos} onChange={e=>setEncargos(+e.target.value||0)} style={{ paddingRight:24, fontFamily:'JetBrains Mono' }}/>
                  <span style={{ position:'absolute', right:9, top:9, font:'500 11.5px/1 JetBrains Mono', color:'var(--d-text-3)' }}>%</span>
                </div>
              </CampoForm>
              <CampoForm label="HE padrão (h/mês)" hint="Aplicada inevitavelmente para a maioria dos cargos">
                <input className="inp" type="number" value={he} onChange={e=>setHe(+e.target.value||0)} style={{ fontFamily:'JetBrains Mono' }}/>
              </CampoForm>
            </div>
          </SecaoForm>

          {/* adicionais */}
          <SecaoForm titulo="Adicionais (aplicados via flag de obra)">
            <div style={{ font: '500 11.5px/1.5 Inter', color: 'var(--d-text-3)', background: 'var(--d-bg)', padding: 10, borderRadius: 6, marginBottom: 12 }}>
              <DUI.Icon name="info" size={12} style={{ marginRight: 4 }}/>
              Não duplicam o cargo na base. Quando a flag está ativa numa obra, todos os cargos diretos recebem o adicional.
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14 }}>
              <CampoForm label="Periculosidade" hint="Próximo a gás, alta tensão, mar, etc.">
                <div style={{ position:'relative' }}>
                  <input className="inp" type="number" value={peric} onChange={e=>setPeric(+e.target.value||0)} style={{ paddingRight: 24, fontFamily:'JetBrains Mono' }}/>
                  <span style={{ position:'absolute', right:9, top:9, font:'500 11.5px/1 JetBrains Mono', color:'var(--d-text-3)' }}>%</span>
                </div>
              </CampoForm>
              <CampoForm label="Insalubridade" hint="Ambiente insalubre conforme NR-15.">
                <div style={{ position:'relative' }}>
                  <input className="inp" type="number" value={insal} onChange={e=>setInsal(+e.target.value||0)} style={{ paddingRight: 24, fontFamily:'JetBrains Mono' }}/>
                  <span style={{ position:'absolute', right:9, top:9, font:'500 11.5px/1 JetBrains Mono', color:'var(--d-text-3)' }}>%</span>
                </div>
              </CampoForm>
            </div>
          </SecaoForm>

          {/* benefícios */}
          <SecaoForm titulo="Benefícios padrão (não rateáveis)">
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 10 }}>
              {[['Almoço','35','/dia'],['Transporte','12','/dia'],['EPI','450','/mês'],['Plano saúde','280','/mês']].map((b,i) => (
                <div key={i} style={{ background: 'var(--d-bg)', padding: 10, borderRadius: 6 }}>
                  <div style={{ font: '500 11px/1 Inter', color: 'var(--d-text-3)', marginBottom: 4 }}>{b[0]}</div>
                  <div style={{ display:'flex', alignItems:'baseline', gap:4 }}>
                    <span style={{font:'500 11px/1 JetBrains Mono', color:'var(--d-text-3)'}}>R$</span>
                    <input className="inp" defaultValue={b[1]} style={{ height: 26, padding: '0 6px', fontFamily:'JetBrains Mono', fontWeight:600 }}/>
                    <span style={{font:'500 10px/1 Inter', color:'var(--d-text-4)'}}>{b[2]}</span>
                  </div>
                </div>
              ))}
            </div>
          </SecaoForm>

          {/* dissídio */}
          <SecaoForm titulo="Reajuste programado">
            <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 14 }}>
              <CampoForm label="Mês do dissídio">
                <select className="inp" defaultValue="10"><option value="1">Janeiro</option><option value="5">Maio</option><option value="10">Outubro</option><option value="0">Sem dissídio</option></select>
              </CampoForm>
              <CampoForm label="Reajuste estimado">
                <div style={{ position:'relative' }}>
                  <input className="inp" defaultValue="5,0" style={{ paddingRight: 24, fontFamily:'JetBrains Mono' }}/>
                  <span style={{ position:'absolute', right:9, top:9, font:'500 11.5px/1 JetBrains Mono', color:'var(--d-text-3)' }}>%</span>
                </div>
              </CampoForm>
              <CampoForm label="Sindicato/categoria">
                <input className="inp" placeholder="SINTICOM-SP"/>
              </CampoForm>
            </div>
          </SecaoForm>

          {/* preview de custo, vivo */}
          <div style={{ background: 'var(--d-green-soft)', borderRadius: 8, padding: 16, marginTop: 6 }}>
            <div style={{ font: '600 11px/1 Inter', color: '#1a8a3c', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 12 }}>
              Pré-visualização do custo · recalcula em tempo real
            </div>
            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 12 }}>
              {[
                ['Custo/mês (base)', custoMes, false],
                ['Custo/hora', custoHora, false],
                ['Com periculosidade', custoComPeric, true],
                ['Peric. + Insal.', custoComAmbos, true],
              ].map((p,i) => (
                <div key={i}>
                  <div style={{ font: '500 10.5px/1 Inter', color: '#1a8a3c' }}>{p[0]}</div>
                  <div className="d-mono" style={{ font: '700 16px/1.1 JetBrains Mono', color: '#0f5e26', marginTop: 6 }}>
                    R$ {Number(p[1]).toLocaleString('pt-BR', {maximumFractionDigits: p[2] ? 0 : 2})}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </div>

        {/* footer */}
        <div style={{ padding: '14px 24px', borderTop: '1px solid var(--d-border)', background: 'var(--d-bg)', display: 'flex', alignItems: 'center', gap: 10 }}>
          <div style={{ font: '500 11.5px/1.4 Inter', color: 'var(--d-text-3)', flex: 1 }}>
            <DUI.Icon name="info" size={11}/> O cargo entra na base imediatamente. Orçamentos existentes não são alterados.
          </div>
          <button className="btn" onClick={onClose}>Cancelar</button>
          <button className="btn">Salvar como rascunho</button>
          <button className="btn btn-primary" onClick={onClose}><DUI.Icon name="check" size={13}/>Cadastrar cargo</button>
        </div>
      </div>
    </div>
  );
}
function SecaoForm({ titulo, children }) {
  return (
    <div style={{ marginBottom: 18 }}>
      <div style={{ font: '600 11px/1 Inter', color: 'var(--d-text-2)', textTransform: 'uppercase', letterSpacing: '0.06em', marginBottom: 10, paddingBottom: 6, borderBottom: '1px solid var(--d-border)' }}>{titulo}</div>
      {children}
    </div>
  );
}
function CampoForm({ label, hint, children }) {
  return (
    <label style={{ display: 'flex', flexDirection: 'column', gap: 5 }}>
      <span style={{ font: '600 11.5px/1 Inter', color: 'var(--d-text-2)' }}>{label}</span>
      {children}
      {hint && <span style={{ font: '500 10.5px/1.4 Inter', color: 'var(--d-text-4)' }}>{hint}</span>}
    </label>
  );
}
function VersoesMultiusuario() {
  return (
    <div style={{ maxWidth: 1100, display: 'grid', gridTemplateColumns: '1fr 320px', gap: 18 }}>
      <Card2 title="Histórico de revisões deste orçamento" icon="layers"
        subtitle='Versões nomeadas, Ana hoje cria revisões manualmente. Sistema preserva todas, com diff.'>
        {[
          { v: 'v3', label: 'Após reunião alinhamento 04/05', auto: 'Ana', dt: '06/05/26 09:14', cur: true, mudancas: '+ adicionou Frente D embarcada · BDI 27% → 30%' },
          { v: 'v2', label: 'Diesel atualizado (28/04)', auto: 'Sistema', dt: '28/04/26 16:02', mudancas: 'Diesel R$ 6,15 → R$ 6,45 · impacto +R$ 3.6k' },
          { v: 'v1.1', label: 'Ajuste comprador grande obra', auto: 'Ana', dt: '24/04/26 11:30', mudancas: '+ comprador 1.0 nos meses EXEC' },
          { v: 'v1', label: 'Versão inicial', auto: 'Ana', dt: '22/04/26 14:50', mudancas: 'Criação · 4 obras, 4 frentes' },
        ].map((r, i) => (
          <div key={i} style={{ padding: '14px 0', borderBottom: '1px solid var(--d-border)', display: 'flex', alignItems: 'flex-start', gap: 14 }}>
            <div style={{ width: 50, font: '700 14px/1 JetBrains Mono', color: r.cur ? '#22A94A' : 'var(--d-text-3)' }}>{r.v}</div>
            <div style={{ flex: 1 }}>
              <div style={{ font: '600 13px/1.3 Inter', display: 'flex', alignItems: 'center', gap: 8 }}>
                {r.label}
                {r.cur && <span className="chip chip-green" style={{height:18, fontSize:10}}>ATUAL</span>}
              </div>
              <div style={{ font: '500 11.5px/1.3 Inter', color: 'var(--d-text-3)', marginTop: 3 }}>
                por {r.auto} · {r.dt}
              </div>
              <div style={{ font: '500 11.5px/1.4 Inter', color: 'var(--d-text-2)', marginTop: 6 }}>{r.mudancas}</div>
            </div>
            <div style={{ display: 'flex', gap: 6 }}>
              <button className="btn btn-sm">Diff</button>
              {!r.cur && <button className="btn btn-sm">Restaurar</button>}
            </div>
          </div>
        ))}
      </Card2>

      <div>
        <Card2 title="Equipe & papéis" icon="user">
          {[
            { nome: 'Ana', papel: 'Planejamento', acesso: 'orçar + aprovar', cor: '#22A94A', online: true },
            { nome: 'Carla', papel: 'Compras', acesso: 'cotar preços de equipamentos', cor: '#0E2A47', online: true },
            { nome: 'Marcos', papel: 'Compras', acesso: 'cotar materiais', cor: '#0E2A47', online: false },
            { nome: 'Wanderlei', papel: 'Diretoria', acesso: 'aprovar valor de venda', cor: '#d97706', online: false },
            { nome: 'Décio', papel: 'Diretoria', acesso: 'aprovar valor de venda', cor: '#d97706', online: false },
          ].map((u,i) => (
            <div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '8px 0', borderBottom: '1px solid var(--d-border)' }}>
              <div style={{ position: 'relative' }}>
                <div style={{ width: 28, height: 28, borderRadius: 100, background: u.cor, color: 'white', display: 'flex', alignItems: 'center', justifyContent: 'center', font: '600 11px/1 Inter' }}>{u.nome[0]}</div>
                {u.online && <div style={{ position: 'absolute', bottom: -1, right: -1, width: 9, height: 9, borderRadius: 100, background: '#22A94A', border: '2px solid white' }}/>}
              </div>
              <div style={{ flex: 1, minWidth: 0 }}>
                <div style={{ font: '600 12.5px/1.2 Inter' }}>{u.nome}</div>
                <div style={{ font: '500 11px/1.3 Inter', color: 'var(--d-text-3)' }}>{u.papel} · {u.acesso}</div>
              </div>
            </div>
          ))}
        </Card2>
      </div>
    </div>
  );
}

/* ============================ GLOSSÁRIO ============================ */
function Glossario() {
  const termos = [
    ['Projeto/Contrato', 'Vínculo comercial com o cliente. Contém uma ou mais obras.'],
    ['Obra', 'Estrutura física específica em local próprio. Várias obras de um mesmo projeto podem estar em locais diferentes.'],
    ['Frente de trabalho', 'Equipe completa autossuficiente alocada a uma obra. Pode ser deslocada entre obras.'],
    ['Cravação', 'Processo de instalar a estaca no solo.'],
    ['Estaca pré-moldada / metálica', 'Tipos de estaca; afetam consumo de eletrodo (1 kg/m vs 1,5–2 kg/m).'],
    ['Tricone', 'Ferramenta de perfuração em rocha. 7 unid/100m (Ø1,30m) ou 9-10/100m (Ø1,90m).'],
    ['Eletrodo', 'Material de soldagem de estacas.'],
    ['Gabarito de cravação', 'Ferramenta que alinha a estaca; necessária na maioria das obras.'],
    ['Memória de cálculo', 'Aba auxiliar com cotações, distâncias e cálculos de apoio.'],
    ['CPU', 'Composição de Custo Unitário.'],
    ['BDI', 'Benefício e Despesas Indiretas.'],
    ['MO direta', 'Operadores, ajudantes, soldadores, mestre de obra.'],
    ['MO indireta', 'Gerente de contrato, gestor de meio ambiente, comprador.'],
    ['Dissídio', 'Reajuste anual de salário (categoria Destaca: outubro).'],
    ['Periculosidade', 'Adicional de 30% para trabalho de risco (gás, alta tensão).'],
    ['Insalubridade', 'Adicional de 20% para trabalho insalubre.'],
    ['Hora extra', 'Aplicada inevitavelmente para a maioria dos cargos.'],
    ['Encargos', 'Custos sociais sobre salário (~100%).'],
    ['Baixada', 'Mandar pessoal de volta para casa (a cada 60 ou 90 dias).'],
    ['Obra embarcada', 'Realizada no mar, sobre balsa.'],
    ['Apoio náutico', 'Equipamentos de suporte em obras embarcadas.'],
    ['EPI', 'Equipamento de proteção individual.'],
    ['Ensaio', 'Teste técnico em estaca (terceirizado).'],
    ['Rentabilidade', 'Lucro percentual sobre o custo da obra.'],
    ['Valor de venda', 'Preço final cobrado do cliente.'],
    ['Custo da obra', 'Soma de todos os custos antes da margem.'],
    ['Administração central', 'Custo overhead da empresa, rateado por obra.'],
    ['Receita do bolo', 'Orçamentos passados que viram base para os próximos.'],
  ];
  return (
    <div style={{ maxWidth: 900 }}>
      <Card2 title="Termos do domínio" subtitle="Validados na reunião com Ana (28/04/2026). Use para alinhamento entre dev e operação." icon="book">
        <div style={{ display: 'grid', gridTemplateColumns: '1fr 2fr', gap: 0 }}>
          {termos.map(([t,d], i) => (
            <React.Fragment key={i}>
              <div style={{ padding: '10px 14px 10px 0', borderTop: i > 0 ? '1px solid var(--d-border)' : 'none', font: '600 13px/1.4 Inter' }}>{t}</div>
              <div style={{ padding: '10px 0 10px 14px', borderTop: i > 0 ? '1px solid var(--d-border)' : 'none', font: '500 13px/1.5 Inter', color: 'var(--d-text-2)' }}>{d}</div>
            </React.Fragment>
          ))}
        </div>
      </Card2>
    </div>
  );
}

/* ============================ HERANÇA DE RECURSOS (v5) ============================
   Modelo correto: frente herda recursos (equipe/equipamento) de OUTRA frente do
   mesmo projeto que termina antes. Cada frente pertence a UMA obra. A herança é
   frente-para-frente, não frente-para-obra.

   frente.heranca = {
     deFrenteId, deFrenteNome, deObraId, deObraNome,
     mesInicio,                  // a partir de quando recebe os recursos
     recursos: [string],         // o que herda (texto descritivo)
     custoEvitado,               // R$ que NÃO se duplica (vira desconto)
     custoRiscoSeCancelar,       // R$ adicional caso a frente fonte cancele
   }
============================================================================ */
function HerancaFrenteCard({ projeto, frente, meses, onUpdateFrente }) {
  const semContexto = !projeto || !frente;

  // Lista de frentes-fonte possíveis (todas do projeto exceto a atual)
  const frentesFonte = !semContexto ? projeto.obras.flatMap(o =>
    o.frentes.filter(f => f.id !== frente.id).map(f => ({
      id: f.id, nome: f.nome, obraId: o.id, obraNome: o.nome
    }))
  ) : [];

  const [, force] = React.useReducer(x => x + 1, 0);
  const refresh = () => { force(); if (onUpdateFrente) onUpdateFrente(); };

  const her = !semContexto && frente.heranca;
  const ativo = !!her;
  const totalMeses = meses.length;

  const ligar = () => {
    if (semContexto || frentesFonte.length === 0) return;
    const f = frentesFonte[0];
    frente.heranca = {
      deFrenteId: f.id,
      deFrenteNome: f.nome,
      deObraId: f.obraId,
      deObraNome: f.obraNome,
      mesInicio: Math.max(2, Math.floor(totalMeses / 2)),
      recursos: ['Equipe completa de cravação', 'Equipamentos principais'],
      custoEvitado: 850000,
      custoRiscoSeCancelar: 1240000,
    };
    refresh();
  };
  const desligar = () => { if (semContexto) return; delete frente.heranca; refresh(); };
  const setFonte = (fid) => {
    const f = frentesFonte.find(x => x.id === fid);
    if (!f) return;
    frente.heranca = { ...frente.heranca, deFrenteId: f.id, deFrenteNome: f.nome, deObraId: f.obraId, deObraNome: f.obraNome };
    refresh();
  };
  const setMes = (n) => { frente.heranca = { ...frente.heranca, mesInicio: Number(n) }; refresh(); };

  const obraAtual = !semContexto && projeto.obras.find(o => o.frentes.some(f => f.id === frente.id));

  // Lado "cede": frentes deste projeto que herdam DESTA frente
  const cedidasPara = !semContexto ? projeto.obras.flatMap(o =>
    o.frentes.filter(x => x.heranca?.deFrenteId === frente.id).map(x => ({
      id: x.id, nome: x.nome, obraNome: o.nome,
      custoEvitado: x.heranca.custoEvitado, mesInicio: x.heranca.mesInicio,
      recursos: x.heranca.recursos,
    }))
  ) : [];

  return (
    <Card2 title="Herança de recursos entre frentes" icon="share"
      subtitle="Quando uma frente termina antes, seus recursos (equipe e equipamentos) podem ser cedidos a outra frente do mesmo projeto. Reduz o custo da frente que recebe, mas cria dependência financeira.">

      {/* LADO CEDE — esta frente é fonte para outras */}
      {cedidasPara.length > 0 && (
        <div style={{ padding: 14, marginBottom: 16, background: 'var(--d-green-soft)', borderLeft: '3px solid #1a8a3c', borderRadius: 6 }}>
          <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 8 }}>
            <DUI.Icon name="share" size={14} style={{ color: '#1a8a3c' }}/>
            <span style={{ font: '700 12.5px/1 Inter', color: '#1a8a3c', textTransform: 'uppercase', letterSpacing: '0.05em' }}>
              Esta frente cede recursos para outras
            </span>
          </div>
          <div style={{ font: '500 12px/1.5 Inter', color: 'var(--d-text-2)', marginBottom: 10 }}>
            Quando esta frente termina, equipe e equipamentos são cedidos para a(s) frente(s) abaixo, gerando desconto no projeto. Atenção: alteração ou cancelamento desta frente impacta as frentes herdeiras.
          </div>
          {cedidasPara.map(d => (
            <div key={d.id} style={{ padding: 10, background: 'white', borderRadius: 4, marginBottom: 6, display: 'flex', alignItems: 'center', gap: 10 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '3px 8px', background: '#1a8a3c', color: 'white', borderRadius: 100, font: '600 11px/1 Inter' }}>
                <DUI.Icon name="pile" size={11}/>{d.id}
              </span>
              <div style={{ flex: 1 }}>
                <div style={{ font: '600 12.5px/1.3 Inter' }}>{d.nome}</div>
                <div style={{ font: '500 11px/1.3 Inter', color: 'var(--d-text-3)', marginTop: 2 }}>
                  recebe a partir do mês {d.mesInicio} · {d.obraNome} · recursos: {d.recursos.join(', ')}
                </div>
              </div>
              <div style={{ textAlign: 'right' }}>
                <div style={{ font: '500 10px/1 Inter', color: 'var(--d-text-3)', textTransform: 'uppercase', letterSpacing: '0.05em' }}>Economia gerada</div>
                <div className="d-mono" style={{ font: '700 14px/1 JetBrains Mono', color: '#1a8a3c', marginTop: 4 }}>
                  − R$ {(d.custoEvitado/1000).toLocaleString('pt-BR')}k
                </div>
              </div>
            </div>
          ))}
        </div>
      )}

      <div style={{ display: 'flex', alignItems: 'center', gap: 14, marginBottom: ativo ? 16 : 0 }}>
        <FlagToggle
          on={ativo}
          setOn={(v) => v ? ligar() : desligar()}
          label="Esta frente herda recursos de outra frente"
          desc={ativo ? 'recursos cedidos por outra frente' : 'mobilização própria'}
          hint="ex: F-1 termina mês 8, equipe migra para F-4"
        />
        {!ativo && obraAtual && cedidasPara.length === 0 && (
          <span style={{ font: '500 12px/1.4 Inter', color: 'var(--d-text-3)' }}>
            Frente em <strong style={{ color: 'var(--d-text-2)' }}>{obraAtual.nome}</strong> mobiliza recursos próprios nos {totalMeses} meses.
          </span>
        )}
        {semContexto && (
          <span style={{ font: '500 11.5px/1.4 Inter', color: 'var(--d-text-3)', fontStyle: 'italic' }}>
            (modo demo: abra uma frente real para configurar herança)
          </span>
        )}
      </div>

      {ativo && her && (() => {
        // Obras com pelo menos uma frente que possa ceder (qualquer frente do projeto exceto a atual)
        const obrasComFonte = projeto.obras.filter(o => o.frentes.some(x => x.id !== frente.id));
        const frentesDaObraSelecionada = projeto.obras
          .find(o => o.id === her.deObraId)?.frentes
          .filter(x => x.id !== frente.id) || [];

        const setObra = (oid) => {
          const o = projeto.obras.find(x => x.id === oid);
          if (!o) return;
          const primeiraFrente = o.frentes.find(x => x.id !== frente.id);
          if (!primeiraFrente) return;
          frente.heranca = {
            ...frente.heranca,
            deObraId: o.id, deObraNome: o.nome,
            deFrenteId: primeiraFrente.id, deFrenteNome: primeiraFrente.nome,
          };
          refresh();
        };

        return (
        <>
          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 14, padding: 14, background: 'var(--d-bg)', borderRadius: 8, marginBottom: 12 }}>
            <Field2 label="Obra fonte" hint="onde está a frente que cede os recursos">
              <select className="inp" value={her.deObraId} onChange={(e) => setObra(e.target.value)}>
                {obrasComFonte.map(o => (
                  <option key={o.id} value={o.id}>{o.nome}</option>
                ))}
              </select>
            </Field2>
            <Field2 label="Frente que cede os recursos" hint={`em ${her.deObraNome}`}>
              <select className="inp" value={her.deFrenteId} onChange={(e) => setFonte(e.target.value)}>
                {frentesDaObraSelecionada.map(f => (
                  <option key={f.id} value={f.id}>{f.nome}</option>
                ))}
              </select>
            </Field2>
          </div>

          {/* Resumo do que herda */}
          <div style={{ padding: 14, background: 'white', borderRadius: 6, border: '1px solid var(--d-border)', marginBottom: 12 }}>
            <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 10 }}>
              <span style={{ display: 'inline-flex', alignItems: 'center', gap: 6, padding: '4px 10px', background: 'var(--d-green-soft)', color: '#1a8a3c', borderRadius: 100, fontWeight: 600, fontSize: 12 }}>
                <DUI.Icon name="pile" size={12}/>{her.deFrenteNome}
              </span>
              <span style={{ color: 'var(--d-text-3)' }}>↰ cede recursos para esta frente a partir do mês {her.mesInicio}</span>
            </div>
            <div style={{ font: '600 10.5px/1 Inter', color: 'var(--d-text-3)', textTransform: 'uppercase', letterSpacing: '0.05em', marginBottom: 6 }}>Recursos compartilhados</div>
            <ul style={{ margin: 0, padding: '0 0 0 18px', font: '500 12.5px/1.6 Inter', color: 'var(--d-text-2)' }}>
              {her.recursos.map((r, i) => <li key={i}>{r}</li>)}
            </ul>
            <div style={{ marginTop: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 10px', background: 'var(--d-green-soft)', borderRadius: 4 }}>
              <span style={{ font: '600 12px/1.3 Inter', color: '#1a8a3c' }}>Custo evitado nesta frente (não duplica mobilização)</span>
              <span className="d-mono" style={{ font: '700 14px/1 JetBrains Mono', color: '#1a8a3c' }}>
                − R$ {(her.custoEvitado/1000).toLocaleString('pt-BR')}k
              </span>
            </div>
          </div>

          {/* AVISO DE RISCO */}
          <div style={{ padding: 14, background: 'var(--d-warn-bg)', border: '1px solid var(--d-warn)', borderRadius: 6 }}>
            <div style={{ display: 'flex', alignItems: 'flex-start', gap: 10 }}>
              <DUI.Icon name="bell" size={18} style={{ color: 'var(--d-danger)', marginTop: 2, flex: 'none' }}/>
              <div style={{ flex: 1 }}>
                <div style={{ font: '700 13px/1.2 Inter', color: 'var(--d-danger)', textTransform: 'uppercase', letterSpacing: '0.04em', marginBottom: 6 }}>
                  Risco financeiro: dependência da frente fonte
                </div>
                <div style={{ font: '500 12.5px/1.5 Inter', color: 'var(--d-text-2)' }}>
                  Se <strong>{her.deFrenteNome}</strong> for cancelada, atrasada ou tiver glosa parcial, esta frente perde os recursos cedidos e precisará re-mobilizar:
                </div>
                <div style={{ marginTop: 10, display: 'flex', justifyContent: 'space-between', alignItems: 'center', padding: '8px 10px', background: 'white', borderRadius: 4, border: '1px dashed var(--d-danger)' }}>
                  <span style={{ font: '600 12px/1.3 Inter', color: 'var(--d-danger)' }}>Custo adicional projetado em caso de cancelamento</span>
                  <span className="d-mono" style={{ font: '700 14px/1 JetBrains Mono', color: 'var(--d-danger)' }}>
                    + R$ {(her.custoRiscoSeCancelar/1000).toLocaleString('pt-BR')}k
                  </span>
                </div>
                <div style={{ marginTop: 8, font: '500 11.5px/1.4 Inter', color: 'var(--d-text-3)' }}>
                  Inclui: nova mobilização de equipe, frete de equipamento, perda de janela de cronograma. Cenário considerado em <strong>Margem & Venda</strong>.
                </div>
              </div>
            </div>
          </div>
        </>
        );
      })()}
    </Card2>
  );
}

window.WorkspaceV2 = WorkspaceV2;
Object.assign(window, { EditorFrenteV2, MargemValorVenda, TimelineGantt, BaseConhecimentoV2, VersoesMultiusuario, Glossario, HerancaFrenteCard });