/* ─── LOCAL ICONS (needed before mnm-views.jsx loads) ─────────────────────── */
var IcCalcLocal = function(){return <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="2.5" y="2" width="15" height="16" rx="2" stroke="currentColor" strokeWidth="1.4"/><rect x="5" y="5" width="3.5" height="2.5" rx=".5" fill="currentColor" opacity="0.5"/><rect x="11.5" y="5" width="3.5" height="2.5" rx=".5" fill="currentColor" opacity="0.5"/><rect x="5" y="9.5" width="3.5" height="2.5" rx=".5" fill="currentColor" opacity="0.5"/><rect x="11.5" y="9.5" width="3.5" height="2.5" rx=".5" fill="currentColor" opacity="0.5"/><rect x="5" y="14" width="10" height="2.5" rx=".5" fill="currentColor" opacity="0.5"/></svg>;};
var IcGasto   = function(){return <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="7.5" stroke="currentColor" strokeWidth="1.4"/><path d="M10 6.5v7M7.5 11l2.5 2.5 2.5-2.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>;};
var IcIngreso = function(){return <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><circle cx="10" cy="10" r="7.5" stroke="currentColor" strokeWidth="1.4"/><path d="M10 13.5v-7M7.5 9l2.5-2.5 2.5 2.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/></svg>;};
var IcMicQA   = function(){return <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><rect x="7" y="2" width="6" height="9" rx="3" stroke="currentColor" strokeWidth="1.4"/><path d="M4 10.5C4 13.54 6.69 16 10 16s6-2.46 6-5.5" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/><path d="M10 16v3" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round"/></svg>;};

// mnm-consolidado.jsx — Portafolio + Empresa (6 tabs) + QuickAdd
const { useState, useEffect } = React;

/* ─── DATA ───────────────────────────────────────────────────────────────────── */
const COMPANIES_DATA = [
  {id:'A', nombre:'Cafetería El Roble', desc:'Restaurante de comida peruana', ciudad:'Bogotá',
   initials:'ER', logo:'uploads/download.jpg', color:'#4DDB6E', etapa:'activa',
   kpis:{revenue:'$12,400', margen:'38%', cash:'$8,200', runway:'4.2', burn:'$3,100'},
   cambios:{revenue:'+12%', margen:'-2pp'}, estado:'saludable'},
  {id:'B', nombre:'LogiSaaS', desc:'SaaS de logística para pymes', ciudad:'Panamá',
   initials:'LS', logo:'uploads/images.jpg', color:'#4A8FFF', etapa:'activa',
   kpis:{revenue:'$16,000', margen:'44%', cash:'$11,300', runway:'8.1', burn:'$1,800'},
   cambios:{revenue:'+8%', margen:'+1pp'}, estado:'saludable'},
  {id:'C', nombre:'Consultoría RRHH', desc:'Servicios de RRHH para startups', ciudad:'Panamá',
   initials:'CR', logo:'uploads/logo-abstracto-forma-triangular_1043-1.avif', color:'#F5A623', etapa:'pre-revenue',
   kpis:{revenue:'$0', burn:'$950', runway:'6.8', cash:'$6,460'},
   cambios:{}, estado:'pre-revenue'},
];
const PL_DATA = {
  A:[['Ingresos','$12,400',false,false],['Costo de ventas','($7,688)',false,false],['Margen bruto','$4,712  (38%)',true,false],['Gastos operativos','($2,160)',false,false],['EBITDA','$2,552  (21%)',true,false],['Depreciación','($370)',false,false],['Utilidad neta','$2,182  (18%)',true,true]],
  B:[['Ingresos','$16,000',false,false],['Costo de ventas','($2,400)',false,false],['Margen bruto','$13,600  (85%)',true,false],['Gastos operativos','($8,200)',false,false],['EBITDA','$5,400  (34%)',true,false],['Depreciación','($200)',false,false],['Utilidad neta','$5,200  (33%)',true,true]],
  C:[['Sin datos de ingresos','—',false,false],['Burn Rate','($950)/mes',false,false],['Runway','6.8 meses',true,true]],
};
const GROUPED_KPIS = {
  A:{
    Rentabilidad:[{l:'M. Bruto',v:'38%',s:'yellow'},{l:'M. Contribución',v:'29%',s:'green'},{l:'EBITDA',v:'21%',s:'green'},{l:'M. Neto',v:'18%',s:'green'}],
    Liquidez:[{l:'Free Cash Flow',v:'$1,200',s:'green'},{l:'CCC',v:'42 días',s:'yellow'},{l:'AR Days',v:'58 ▲',s:'red'},{l:'AP Days',v:'30',s:'green'}],
    'Unit Economics':[{l:'CAC',v:'$84 ▲',s:'yellow'},{l:'LTV',v:'$620',s:'green'},{l:'LTV/CAC',v:'7.4x',s:'green'},{l:'Break-even',v:'$9,800',s:'green'}],
  },
  B:{
    Rentabilidad:[{l:'M. Bruto',v:'85%',s:'green'},{l:'M. Contribución',v:'72%',s:'green'},{l:'EBITDA',v:'34%',s:'green'},{l:'M. Neto',v:'33%',s:'green'}],
    Liquidez:[{l:'Free Cash Flow',v:'$4,100',s:'green'},{l:'CCC',v:'18 días',s:'green'},{l:'AR Days',v:'22',s:'green'},{l:'AP Days',v:'45',s:'yellow'}],
    'Unit Economics':[{l:'CAC',v:'$210',s:'yellow'},{l:'LTV',v:'$1,840',s:'green'},{l:'LTV/CAC',v:'8.8x',s:'green'},{l:'Break-even',v:'$4,100',s:'green'}],
  },
  C:{
    Rentabilidad:[{l:'Revenue',v:'$0',s:'info'},{l:'Burn Rate',v:'$950/mes',s:'yellow'},{l:'Runway',v:'6.8 m',s:'yellow'},{l:'Aportes',v:'$6,460',s:'info'}],
    Liquidez:[{l:'Cash on Hand',v:'$6,460',s:'green'},{l:'Burn/semana',v:'$237',s:'info'},{l:'Gastos fijos',v:'$750/mes',s:'info'},{l:'Gastos var.',v:'$200/mes',s:'info'}],
    'Unit Economics':[{l:'Clientes',v:'0',s:'info'},{l:'Pipeline',v:'3 leads',s:'info'},{l:'POC activos',v:'1',s:'green'},{l:'MRR objetivo',v:'$3,000',s:'info'}],
  },
};
const PRODUCTS_DATA = {
  A:[
    {id:1,nombre:'Almuerzo ejecutivo',precio:18,costo:9.5,margen:47,vendidos:412,revenue:7416,costos:[{l:'Ingredientes',v:'$8.00'},{l:'Mano de obra',v:'$1.50'}]},
    {id:2,nombre:'Delivery combo',precio:32,costo:22,margen:31,vendidos:89,revenue:2848,costos:[{l:'Ingredientes',v:'$14.00'},{l:'Empaque',v:'$2.50'},{l:'Comisión delivery',v:'$5.50'}]},
  ],
  B:[{id:1,nombre:'Plan Starter',precio:299,costo:45,margen:85,vendidos:38,revenue:11362,costos:[{l:'Infraestructura',v:'$30.00'},{l:'Soporte',v:'$15.00'}]}],
  C:[],
};
const TXS_DATA = {
  A:[
    {id:1,fecha:'22 may',cat:'Insumos',desc:'Compra semanal',monto:'−$840',origen:'Manual',tipo:'gasto'},
    {id:2,fecha:'21 may',cat:'Ventas',desc:'Cierre caja',monto:'+$1,240',origen:'Manual',tipo:'ingreso'},
    {id:3,fecha:'20 may',cat:'Delivery',desc:'Liquidación iFood',monto:'+$380',origen:'Integración',tipo:'ingreso'},
    {id:4,fecha:'18 may',cat:'Servicios',desc:'Gas y electricidad',monto:'−$210',origen:'WhatsApp',tipo:'gasto'},
  ],
  B:[
    {id:1,fecha:'22 may',cat:'Suscripciones',desc:'Nuevos clientes',monto:'+$897',origen:'Integración',tipo:'ingreso'},
    {id:2,fecha:'19 may',cat:'Infraestructura',desc:'AWS mensual',monto:'−$340',origen:'Manual',tipo:'gasto'},
  ],
  C:[],
};
const SOCIOS_DATA = {
  A:[{id:1,nombre:'Isai Campo',pct:60,rol:'CEO / Dueño',acceso:'administrador'},{id:2,nombre:'María López',pct:30,rol:'Socia inversora',acceso:'solo-lectura'},{id:3,nombre:'Carlos Pérez',pct:10,rol:'Operaciones',acceso:'colaborador'}],
  B:[{id:1,nombre:'Isai Campo',pct:100,rol:'Fundador',acceso:'administrador'}],
  C:[{id:1,nombre:'Isai Campo',pct:80,rol:'CEO',acceso:'administrador'},{id:2,nombre:'Carla Vega',pct:20,rol:'Socia',acceso:'colaborador'}],
};
const INFO_GENERAL = {
  A:{legal:'Restaurante Sabor Peruano SAS',pais:'Colombia',regimen:'Simplificado',industria:'Restaurantes / Foodservice',fundacion:'Marzo 2022',desc:'Restaurante de comida peruana enfocado en almuerzo ejecutivo en Bogotá. 3 años en operación.'},
  B:{legal:'LogiSaaS SL',pais:'Panamá',regimen:'Sociedad de Responsabilidad',industria:'SaaS / Logística',fundacion:'Enero 2023',desc:'Plataforma SaaS de gestión logística para pymes en LATAM.'},
  C:{legal:'Consultoría RRHH SpA',pais:'Panamá',regimen:'Persona jurídica',industria:'Consultoría / RRHH',fundacion:'Octubre 2024',desc:'Servicios de recursos humanos para startups en etapa temprana.'},
};
const PORTFOLIO_HALLAZGOS = [
  {empresa:'Cafetería El Roble',color:'#4DDB6E',sev:'critico', text:'AR Days subieron de 32 a 58 días'},
  {empresa:'LogiSaaS',color:'#4A8FFF',sev:'advertencia', text:'Churn mensual superó 5% por primera vez'},
  {empresa:'Consultoría RRHH',color:'#F5A623',sev:'advertencia', text:'Runway reducido: solo 6.8 meses disponibles'},
];
const PORTFOLIO_NOTIFICATIONS = [
  {id:1,icon:'🔔',text:'Sesión Laboratorio mañana 14:00 · Empresa A · Ana Gómez',urgent:true},
  {id:2,icon:'👤',text:'Carlos Pérez aceptó invitación a Consultoría RRHH',urgent:false},
];
const CATS_GASTO  = ['Insumos / materia prima','Renta','Servicios','Nómina','Marketing','Comisiones','Equipos','Otro'];
const CATS_INGRESO= ['Ventas mostrador','Delivery','Suscripciones','Servicios','Proyecto','Otro'];
const ESTADO_CFG  = {saludable:{label:'● Saludable',c:'var(--s-green)',bg:'var(--s-green-bg)'},'pre-revenue':{label:'○ Pre-revenue',c:'var(--s-yellow)',bg:'var(--s-yellow-bg)'},atencion:{label:'▲ Atención',c:'var(--s-yellow)',bg:'var(--s-yellow-bg)'},critico:{label:'✕ Crítico',c:'var(--s-red)',bg:'var(--s-red-bg)'}};
const SEV_COLOR   = {critico:'var(--s-red)',advertencia:'var(--s-yellow)',info:'var(--t2)'};
const KPI_COLOR   = {green:'var(--s-green)',yellow:'var(--s-yellow)',red:'var(--s-red)',info:'var(--t2)'};

/* ─── QUICK ADD MODAL ────────────────────────────────────────────────────────── */
function QuickAddModal({ companyId, onClose }) {
  const [step,setStep]   = useState(companyId?'type':'empresa');
  const [cid,setCid]     = useState(companyId||null);
  const [type,setType]   = useState(null);
  const [monto,setMonto] = useState('');
  const [cat,setCat]     = useState('');
  const [desc,setDesc]   = useState('');
  const [saved,setSaved] = useState(false);
  const [rec,setRec]     = useState(false);
  const [recSecs,setRecSecs] = useState(0);
  const [transcribed,setTranscribed] = useState(false);
  useEffect(function(){ if(!rec){return;} var t=setInterval(function(){setRecSecs(function(s){return s+1;});},1000); var a=setTimeout(function(){setRec(false);setTimeout(function(){setTranscribed(true);},1400);},5000); return function(){clearInterval(t);clearTimeout(a);}; },[rec]);
  var fmt=function(s){return '0:'+String(s).padStart(2,'0');};
  var emp=COMPANIES_DATA.find(function(c){return c.id===cid;});
  var Shell=function(p){return <div onClick={onClose} style={{position:'fixed',inset:0,background:'rgba(0,0,0,0.45)',zIndex:200,display:'flex',alignItems:'flex-end',justifyContent:'flex-end',padding:'24px'}}><div onClick={function(e){e.stopPropagation();}} style={{background:'rgba(255,252,248,0.90)',backdropFilter:'blur(36px) saturate(180%)',WebkitBackdropFilter:'blur(36px) saturate(180%)',borderRadius:'28px',border:'0.5px solid rgba(255,255,255,0.75)',boxShadow:'0 32px 80px rgba(0,0,0,0.14),0 0 0 0.5px rgba(255,255,255,0.5) inset',width:'380px',maxWidth:'calc(100vw - 48px)',boxShadow:'0 40px 80px rgba(0,0,0,0.4)',animation:'fadeInUp 0.2s ease',overflow:'hidden'}}>{p.children}</div></div>;};
  var Head=function(p){return <div style={{padding:'14px 18px',borderBottom:'1px solid var(--border)',display:'flex',alignItems:'center',justifyContent:'space-between'}}><div><p style={{fontSize:'14px',fontWeight:700,color:'var(--t1)',margin:0}}>{p.title}</p>{p.sub&&<p style={{fontSize:'11.5px',color:'var(--t3)',margin:'2px 0 0'}}>{p.sub}</p>}</div><button onClick={onClose} style={{background:'none',border:'none',cursor:'pointer',color:'var(--t3)',fontSize:'18px',lineHeight:1,padding:'2px 6px'}}>×</button></div>;};
  if(saved) return <Shell><Head title="¡Registrado!" sub={emp&&emp.nombre}/><div style={{padding:'24px',textAlign:'center'}}><div style={{width:'48px',height:'48px',borderRadius:'50%',background:'var(--s-green-bg)',border:'2px solid var(--s-green)',display:'flex',alignItems:'center',justifyContent:'center',margin:'0 auto 14px',fontSize:'22px'}}>✓</div><p style={{fontSize:'14px',color:'var(--t2)',marginBottom:'14px'}}>Guardado en {emp&&emp.nombre}</p><div style={{display:'flex',gap:'8px',justifyContent:'center'}}><button onClick={function(){setStep('type');setMonto('');setCat('');setDesc('');setSaved(false);}} style={{padding:'8px 18px',borderRadius:'100px',background:'var(--surf-2)',border:'1px solid var(--border)',color:'var(--t2)',fontSize:'12.5px',cursor:'pointer',fontFamily:'var(--font)'}}>+ Otro</button><button onClick={onClose} style={{padding:'8px 18px',borderRadius:'100px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'12.5px',fontWeight:700,cursor:'pointer',fontFamily:'var(--font)'}}>Listo</button></div></div></Shell>;
  if(step==='empresa') return <Shell><Head title="Registrar en..."/><div style={{padding:'12px'}}>{COMPANIES_DATA.map(function(c){return <button key={c.id} onClick={function(){setCid(c.id);setStep('type');}} style={{width:'100%',display:'flex',alignItems:'center',gap:'12px',padding:'11px 12px',borderRadius:'var(--radius-sm)',background:'none',border:'none',cursor:'pointer',marginBottom:'6px',fontFamily:'var(--font)'}} onMouseEnter={function(e){e.currentTarget.style.background='var(--surf-2)';}} onMouseLeave={function(e){e.currentTarget.style.background='none';}}><div style={{width:'32px',height:'32px',borderRadius:'9px',background:c.color+'22',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'11px',fontWeight:800,color:c.color,flexShrink:0}}>{c.initials}</div><div style={{textAlign:'left'}}><p style={{fontSize:'13.5px',fontWeight:600,color:'var(--t1)',margin:0}}>{c.nombre}</p><p style={{fontSize:'11.5px',color:'var(--t3)',margin:0}}>{c.desc}</p></div></button>;})}</div></Shell>;
  if(step==='type') return <Shell><Head title="¿Qué registrar?" sub={emp&&emp.nombre}/><div style={{padding:'12px',display:'grid',gridTemplateColumns:'1fr 1fr',gap:'8px'}}>{[{id:'gasto',icon:<IcGasto/>,label:'Gasto'},{id:'ingreso',icon:<IcIngreso/>,label:'Ingreso'},{id:'voz',icon:<IcMicQA/>,label:'Nota de voz'},{id:'producto',icon:<IcCalcLocal/>,label:'Producto / Servicio'}].map(function(t){return <button key={t.id} onClick={function(){setType(t.id);setStep('form');}} style={{padding:'18px 10px',borderRadius:'var(--radius)',background:'var(--surf-2)',border:'1px solid var(--border)',cursor:'pointer',display:'flex',flexDirection:'column',alignItems:'center',gap:'8px',fontFamily:'var(--font)',transition:'all 0.12s'}} onMouseEnter={function(e){e.currentTarget.style.borderColor='var(--accent-border)';e.currentTarget.style.background='var(--accent-bg)';}} onMouseLeave={function(e){e.currentTarget.style.borderColor='var(--border)';e.currentTarget.style.background='var(--surf-2)';}}>
    <span style={{color:'var(--accent)',lineHeight:0,display:'flex',fontSize:'22px'}}>{typeof t.icon==='string'?<span style={{fontSize:'22px'}}>{t.icon}</span>:t.icon}</span><span style={{fontSize:'13px',fontWeight:600,color:'var(--t1)'}}>{t.label}</span></button>;})}</div></Shell>;
  if(step==='form'&&type==='voz') return <Shell><Head title="Nota de voz" sub={emp&&emp.nombre}/><div style={{padding:'20px',textAlign:'center'}}>
    {!transcribed ? (rec ? <><div style={{position:'relative',width:'72px',height:'72px',margin:'0 auto 14px'}}><span style={{position:'absolute',inset:0,borderRadius:'50%',border:'1px solid var(--s-red)',animation:'pulseRing 1.8s ease-out infinite'}}/><div style={{position:'absolute',inset:0,borderRadius:'50%',background:'var(--s-red-bg)',border:'2px solid var(--s-red)',display:'flex',alignItems:'center',justifyContent:'center',color:'var(--s-red)'}}><Ic.Mic/></div></div><p style={{fontFamily:'var(--font-mono)',fontSize:'28px',color:'var(--s-red)',fontWeight:700,letterSpacing:'-0.03em',marginBottom:'6px'}}>{fmt(recSecs)}</p><button onClick={function(){setRec(false);}} style={{padding:'9px 22px',borderRadius:'100px',background:'var(--surf-2)',border:'1px solid var(--border)',color:'var(--t2)',fontSize:'13px',cursor:'pointer',fontFamily:'var(--font)',fontWeight:600}}>Detener</button></> : recSecs>0 ? <><div style={{width:'42px',height:'42px',borderRadius:'50%',border:'2px solid var(--accent)',borderTopColor:'transparent',animation:'spin 0.9s linear infinite',margin:'0 auto 14px'}}/><p style={{fontSize:'13px',color:'var(--t2)'}}>Procesando...</p></> : <><button onClick={function(){setRec(true);}} style={{width:'72px',height:'72px',borderRadius:'50%',background:'var(--s-red-bg)',border:'2px solid var(--s-red)',color:'var(--s-red)',display:'flex',alignItems:'center',justifyContent:'center',cursor:'pointer',margin:'0 auto 14px'}}><Ic.Mic/></button><p style={{fontSize:'13px',color:'var(--t2)'}}>Toca para grabar</p></>) : <>
    <p style={{fontSize:'12px',color:'var(--t3)',fontStyle:'italic',marginBottom:'8px',textAlign:'left'}}>Transcripción detectada:</p>
    <div style={{background:'var(--surf-2)',borderRadius:'var(--radius-sm)',padding:'10px 12px',marginBottom:'12px',textAlign:'left',fontSize:'13px',color:'var(--t2)'}}>
      "Pagué ciento veinte dólares de gas para la cocina hoy"
    </div>
    <p style={{fontSize:'12px',color:'var(--t2)',fontWeight:600,marginBottom:'8px',textAlign:'left'}}>Datos extraídos (editables):</p>
    <div style={{background:'var(--surf-2)',borderRadius:'var(--radius-sm)',padding:'12px',marginBottom:'12px'}}>
      {[['Tipo','Gasto'],['Monto','$120.00 USD'],['Categoría','Gas / Servicios'],['Fecha','22 may 2026']].map(function(row){return <div key={row[0]} style={{display:'flex',justifyContent:'space-between',padding:'5px 0',borderBottom:'1px solid var(--border)'}}><span style={{fontSize:'12px',color:'var(--t3)'}}>{row[0]}</span><span style={{fontSize:'12.5px',fontWeight:600,color:'var(--t1)'}}>{row[1]}</span></div>;})}
    </div>
    <p style={{fontSize:'11.5px',color:'var(--s-yellow)',marginBottom:'12px'}}>Los datos no se guardan hasta que confirmes.</p>
    <div style={{display:'flex',gap:'8px'}}><button onClick={function(){setTranscribed(false);setRec(false);setRecSecs(0);}} style={{flex:1,padding:'9px',borderRadius:'100px',background:'none',border:'1px solid var(--border-2)',color:'var(--t2)',fontSize:'12.5px',cursor:'pointer',fontFamily:'var(--font)'}}>Volver</button><button onClick={function(){setSaved(true);}} style={{flex:1,padding:'9px',borderRadius:'100px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'12.5px',fontWeight:700,cursor:'pointer',fontFamily:'var(--font)'}}>Confirmar</button></div></>}
  </div></Shell>;
  if(step==='form'&&type==='producto') return <Shell><Head title='Nuevo producto / servicio' sub={emp&&emp.nombre}/><div style={{flex:1,overflowY:'auto'}}><CalculadoraListView setView={function(){}}/></div></Shell>;
  return <Shell><Head title={type==='gasto'?'Nuevo gasto':'Nuevo ingreso'} sub={emp&&emp.nombre}/><div style={{padding:'16px 18px'}}>
    {type!=='producto'?<>
      <div style={{marginBottom:'12px'}}><label style={{fontSize:'11.5px',fontWeight:600,color:'var(--t2)',display:'block',marginBottom:'5px'}}>Monto</label><div style={{display:'flex',alignItems:'center',background:'var(--surf-2)',border:'1px solid var(--border)',borderRadius:'var(--radius-sm)',overflow:'hidden'}}><span style={{padding:'9px 11px',fontSize:'13px',color:'var(--t3)',borderRight:'1px solid var(--border)'}}>$</span><input type="number" value={monto} onChange={function(e){setMonto(e.target.value);}} placeholder="0.00" style={{flex:1,border:'none',background:'transparent',padding:'9px 11px',fontSize:'14px',fontFamily:'var(--font-mono)',color:'var(--t1)'}}/></div></div>
      <div style={{marginBottom:'12px'}}><label style={{fontSize:'11.5px',fontWeight:600,color:'var(--t2)',display:'block',marginBottom:'5px'}}>Categoría</label><select value={cat} onChange={function(e){setCat(e.target.value);}} style={{width:'100%',padding:'9px 12px',borderRadius:'var(--radius-sm)',fontSize:'13px'}}><option value="">Seleccionar...</option>{(type==='gasto'?CATS_GASTO:CATS_INGRESO).map(function(c){return <option key={c} value={c}>{c}</option>;})}</select></div>
      <div style={{marginBottom:'16px'}}><label style={{fontSize:'11.5px',fontWeight:600,color:'var(--t2)',display:'block',marginBottom:'5px'}}>Descripción (opcional)</label><input value={desc} onChange={function(e){setDesc(e.target.value);}} placeholder="Ej: Compra semanal de insumos" style={{width:'100%',padding:'9px 12px',borderRadius:'var(--radius-sm)',fontSize:'13px'}}/></div>
    </>:<>
      <div style={{marginBottom:'12px'}}><label style={{fontSize:'11.5px',fontWeight:600,color:'var(--t2)',display:'block',marginBottom:'5px'}}>Nombre del producto / servicio</label><input value={desc} onChange={function(e){setDesc(e.target.value);}} placeholder="Ej: Plan Premium" style={{width:'100%',padding:'9px 12px',borderRadius:'var(--radius-sm)',fontSize:'13px'}}/></div>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'10px',marginBottom:'16px'}}>
        {[['Precio de venta',monto,setMonto],['Costo unitario',cat,setCat]].map(function(row){return <div key={row[0]}><label style={{fontSize:'11.5px',fontWeight:600,color:'var(--t2)',display:'block',marginBottom:'5px'}}>{row[0]}</label><div style={{display:'flex',alignItems:'center',background:'var(--surf-2)',border:'1px solid var(--border)',borderRadius:'var(--radius-sm)',overflow:'hidden'}}><span style={{padding:'9px 8px',fontSize:'12px',color:'var(--t3)',borderRight:'1px solid var(--border)'}}>$</span><input type="number" value={row[1]} onChange={function(e){row[2](e.target.value);}} placeholder="0" style={{flex:1,border:'none',background:'transparent',padding:'9px 8px',fontSize:'13px',fontFamily:'var(--font-mono)',color:'var(--t1)',width:'60px'}}/></div></div>;})}</div>
    </>}
    <div style={{display:'flex',gap:'8px'}}><button onClick={function(){setStep('type');}} style={{flex:1,padding:'10px',borderRadius:'100px',background:'none',border:'1px solid var(--border-2)',color:'var(--t2)',fontSize:'13px',cursor:'pointer',fontFamily:'var(--font)'}}>← Atrás</button><button onClick={function(){setSaved(true);}} style={{flex:2,padding:'10px',borderRadius:'100px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'13px',fontWeight:700,cursor:'pointer',fontFamily:'var(--font)'}}>Guardar</button></div>
  </div></Shell>;
}

/* ─── COMPANY CARD ───────────────────────────────────────────────────────────── */
function CompanyCard({ c, onClick }) {
  var estado = ESTADO_CFG[c.estado]||ESTADO_CFG.saludable;
  var prerev = c.etapa==='pre-revenue';
  var kpiRows = prerev ? [
    {nm:'Burn Rate',kv:c.kpis.burn+'/mes',kc:'var(--t1)'},
    {nm:'Runway',kv:c.kpis.runway+' meses',kc:'var(--t1)'},
    {nm:'Cash',kv:c.kpis.cash,kc:'var(--s-green)'},
    {nm:'Revenue',kv:'Pre-revenue',kc:'var(--t3)'},
  ] : [
    {nm:'Revenue',kv:c.kpis.revenue,kc:(c.cambios.revenue && c.cambios.revenue[0]==='+') ? 'var(--s-green)' : 'var(--t1)'},
    {nm:'M. Bruto',kv:c.kpis.margen,kc:(c.cambios.margen && c.cambios.margen[0]==='-') ? 'var(--s-yellow)' : 'var(--s-green)'},
    {nm:'Cash',kv:c.kpis.cash,kc:'var(--t1)'},
    {nm:'Runway',kv:c.kpis.runway+' m',kc:'var(--t1)'},
  ];
  var [hov,setHov] = useState(false);
  return (
    <div onClick={onClick} onMouseEnter={function(){setHov(true);}} onMouseLeave={function(){setHov(false);}}
      style={{background:hov?'rgba(255,255,255,0.82)':'rgba(255,255,255,0.68)',backdropFilter:'var(--glass-blur)',WebkitBackdropFilter:'var(--glass-blur)',border:'0.5px solid var(--glass-border)',boxShadow:hov?'0 0 0 0.5px rgba(255,255,255,0.7) inset,0 14px 40px rgba(0,0,0,0.10)':'var(--glass-shadow)',borderRadius:'var(--radius-lg)',padding:'18px',cursor:'pointer',transition:'all 0.15s',transform:hov?'translateY(-2px)':'none',boxShadow:hov?'0 8px 28px rgba(0,0,0,0.12)':'none'}}>
      <div style={{display:'flex',alignItems:'center',gap:'10px',marginBottom:'12px'}}>
        {c.logo
          ? <img src={c.logo} alt={c.nombre} style={{width:'36px',height:'36px',borderRadius:'10px',objectFit:'cover',flexShrink:0,border:'1px solid var(--border)'}}/>
          : <div style={{width:'36px',height:'36px',borderRadius:'10px',background:c.color+'22',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'12px',fontWeight:800,color:c.color,flexShrink:0}}>{c.initials}</div>}
        <div style={{flex:1,minWidth:0}}><p style={{fontSize:'13.5px',fontWeight:700,color:'var(--t1)',margin:0,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{c.nombre}</p><p style={{fontSize:'11px',color:'var(--t3)',margin:'1px 0 0',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{c.desc}</p></div>
        <span style={{fontSize:'10px',fontWeight:700,padding:'2px 7px',borderRadius:'100px',background:estado.bg,color:estado.c,whiteSpace:'nowrap',flexShrink:0}} className="keep-nowrap">{estado.label}</span>
      </div>
      <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'7px'}}>
        {kpiRows.map(function(row){return(
          <div key={row.nm} style={{background:'var(--surf-2)',borderRadius:'var(--radius-sm)',padding:'8px 10px'}}>
            <p style={{fontSize:'9.5px',color:'var(--t3)',margin:'0 0 2px',fontWeight:600,textTransform:'uppercase',letterSpacing:'0.05em'}}>{row.nm}</p>
            <p style={{fontFamily:'var(--font-mono)',fontSize:'13px',fontWeight:600,color:row.kc,margin:0}}>{row.kv}</p>
          </div>
        );})}
      </div>
    </div>
  );
}

/* ─── PORTAFOLIO (CONSOLIDADO) VIEW ─────────────────────────────────────────── */
function ConsolidadoView({ onSelectEmpresa }) {
  var [companies, setCompanies]            = useState(COMPANIES_DATA.slice());
  var [numiOpen, setNumiOpen]              = useState(false);
  var [dismissedNotifs,setDismissedNotifs] = useState([]);
  var visibleNotifs = PORTFOLIO_NOTIFICATIONS.filter(function(n){return dismissedNotifs.indexOf(n.id)<0;});

  function handleCreated(data) {
    var newC = {
      id:'NEW'+Date.now(), nombre:data.nombre||'Nueva empresa', desc:data.desc||'',
      ciudad:data.pais||'', initials:(data.nombre||'NE').slice(0,2).toUpperCase(), color:'#9C8D7C',
      etapa:(data.etapa&&data.etapa.indexOf('pre-revenue')>-1)?'pre-revenue':'activa',
      kpis:{revenue:'$0',margen:'—',cash:'$0',runway:'—',burn:'$0'}, cambios:{}, estado:'pre-revenue',
    };
    setCompanies(function(cs){return cs.concat([newC]);});
    setNumiOpen(false);
  }

  var [creationMode, setCreationMode] = useState(null); // null | 'numi' | 'form'
  var [formData, setFormData] = useState({nombre:'',desc:'',pais:'Colombia',industria:'',etapa:'activa'});

  if(creationMode==='numi') return <CompanyCreationChat onComplete={handleCreated} onCancel={function(){setCreationMode(null);}}/>;
  if(creationMode==='form') return (
    <div style={{height:'100%',overflowY:'auto',padding:'32px 24px',background:'var(--bg)'}}>
      <button onClick={function(){setCreationMode(null);}} style={{fontSize:'12.5px',color:'var(--accent)',background:'none',border:'none',cursor:'pointer',fontFamily:'var(--font)',fontWeight:500,marginBottom:'20px',display:'flex',alignItems:'center',gap:'4px',padding:0}}>← Volver</button>
      <div style={{maxWidth:'520px'}}>
        <h2 style={{fontSize:'20px',fontWeight:600,color:'var(--t1)',marginBottom:'20px'}}>Nueva empresa</h2>
        {[['Nombre de la empresa','nombre','Ej: Cafetería El Roble'],['Descripción corta (máx 160 car.)','desc','¿A qué se dedica en una línea?']].map(function(f){return(
          <div key={f[1]} style={{marginBottom:'14px'}}>
            <label style={{fontSize:'11.5px',fontWeight:600,color:'var(--t2)',display:'block',marginBottom:'5px'}}>{f[0]}</label>
            <input value={formData[f[1]]} onChange={function(e){var v=e.target.value;setFormData(function(p){var n=Object.assign({},p);n[f[1]]=v;return n;});}} placeholder={f[2]} style={{width:'100%',padding:'10px 13px',borderRadius:'10px',fontSize:'13.5px'}}/>
          </div>
        );})}
        <div style={{marginBottom:'14px'}}>
          <label style={{fontSize:'11.5px',fontWeight:600,color:'var(--t2)',display:'block',marginBottom:'6px'}}>País</label>
          <div style={{display:'flex',flexWrap:'wrap',gap:'7px'}}>
            {['México','Colombia','Argentina','Perú','Chile','Panamá','Otro'].map(function(p){return(
              <button key={p} onClick={function(){setFormData(function(fd){return Object.assign({},fd,{pais:p});});}} style={{padding:'6px 14px',borderRadius:'100px',border:'0.5px solid '+(formData.pais===p?'var(--accent-border)':'var(--glass-border)'),background:formData.pais===p?'var(--glass-bg-atmo)':'var(--glass-bg)',backdropFilter:'var(--glass-blur)',color:formData.pais===p?'var(--t1)':'var(--t3)',fontSize:'12.5px',cursor:'pointer',fontFamily:'var(--font)',fontWeight:formData.pais===p?600:400}}>{p}</button>
            );})}
          </div>
        </div>
        <div style={{marginBottom:'14px'}}>
          <label style={{fontSize:'11.5px',fontWeight:600,color:'var(--t2)',display:'block',marginBottom:'6px'}}>Industria</label>
          <select value={formData.industria} onChange={function(e){var v=e.target.value;setFormData(function(p){return Object.assign({},p,{industria:v});});}} style={{width:'100%',padding:'10px 13px',borderRadius:'10px',fontSize:'13.5px'}}>
            <option value="">Seleccionar...</option>
            {['Restaurante / Food service','SaaS / Tech','Servicios profesionales','Retail','Consultoría','Manufactura','Educación','Otra'].map(function(o){return <option key={o} value={o}>{o}</option>;})}
          </select>
        </div>
        <div style={{marginBottom:'24px'}}>
          <label style={{fontSize:'11.5px',fontWeight:600,color:'var(--t2)',display:'block',marginBottom:'6px'}}>Etapa</label>
          <div style={{display:'flex',gap:'8px'}}>
            {[['activa','Ya tenemos ventas'],['pre-revenue','Todavía no facturamos']].map(function(row){return(
              <button key={row[0]} onClick={function(){setFormData(function(p){return Object.assign({},p,{etapa:row[0]});});}} style={{flex:1,padding:'10px',borderRadius:'10px',border:'0.5px solid '+(formData.etapa===row[0]?'var(--accent-border)':'var(--glass-border)'),background:formData.etapa===row[0]?'var(--glass-bg-atmo)':'var(--glass-bg)',backdropFilter:'var(--glass-blur)',color:formData.etapa===row[0]?'var(--t1)':'var(--t3)',fontSize:'12.5px',cursor:'pointer',fontFamily:'var(--font)',fontWeight:formData.etapa===row[0]?600:400}}>{row[1]}</button>
            );})}
          </div>
        </div>
        <button onClick={function(){if(formData.nombre.trim()){handleCreated(formData);}}} disabled={!formData.nombre.trim()} style={{width:'100%',padding:'12px',borderRadius:'100px',background:formData.nombre.trim()?'var(--accent)':'var(--glass-bg)',border:'none',color:formData.nombre.trim()?'var(--accent-text)':'var(--t3)',fontSize:'14px',fontWeight:600,cursor:formData.nombre.trim()?'pointer':'default',fontFamily:'var(--font)'}}>Crear empresa →</button>
      </div>
    </div>
  );
  if(numiOpen==='choose') return (
    <div style={{height:'100%',display:'flex',alignItems:'center',justifyContent:'center',background:'var(--bg)',padding:'24px'}}>
      <div style={{maxWidth:'480px',width:'100%',animation:'fadeInUp 0.25s ease'}}>
        <button onClick={function(){setNumiOpen(false);}} style={{fontSize:'12.5px',color:'var(--t3)',background:'none',border:'none',cursor:'pointer',fontFamily:'var(--font)',marginBottom:'20px',display:'flex',alignItems:'center',gap:'4px',padding:0}}>← Cancelar</button>
        <h2 style={{fontSize:'22px',fontWeight:600,color:'var(--t1)',marginBottom:'8px'}}>Nueva empresa</h2>
        <p style={{fontSize:'13.5px',color:'var(--t2)',marginBottom:'28px',lineHeight:1.55}}>¿Cómo prefieres crear tu empresa?</p>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'14px'}}>
          {[{id:'numi',icon:'✦',title:'Crear con asistente',desc:'Te guiamos paso a paso en una conversación'},
            {id:'form',icon:'≡',title:'Formulario manual',desc:'Completa los campos a tu ritmo'}].map(function(opt){return(
            <button key={opt.id} onClick={function(){setCreationMode(opt.id);setNumiOpen(false);}} style={{padding:'28px 20px',borderRadius:'var(--radius-card)',background:'var(--glass-bg)',backdropFilter:'var(--glass-blur)',border:'0.5px solid var(--glass-border)',cursor:'pointer',display:'flex',flexDirection:'column',alignItems:'flex-start',gap:'10px',fontFamily:'var(--font)',textAlign:'left',transition:'all 0.15s'}}
              onMouseEnter={function(e){e.currentTarget.style.background='var(--glass-bg-atmo)';e.currentTarget.style.borderColor='var(--accent-border)';}}
              onMouseLeave={function(e){e.currentTarget.style.background='var(--glass-bg)';e.currentTarget.style.borderColor='var(--glass-border)';}}>
              <div style={{width:'36px',height:'36px',borderRadius:'10px',background:'var(--glass-bg-atmo)',border:'0.5px solid var(--glass-border)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'18px',color:'var(--accent)'}}>{opt.icon}</div>
              <div><p style={{fontSize:'14px',fontWeight:600,color:'var(--t1)',margin:'0 0 5px'}}>{opt.title}</p><p style={{fontSize:'12px',color:'var(--t2)',margin:0,lineHeight:1.5}}>{opt.desc}</p></div>
            </button>
          );})}
        </div>
      </div>
    </div>
  );
  if(numiOpen===true||creationMode==='numi') return <CompanyCreationChat onComplete={handleCreated} onCancel={function(){setNumiOpen(false);setCreationMode(null);}}/>;
  return (
    <div style={{display:'flex',flexDirection:'column',height:'100%',overflow:'hidden'}}>
      <div style={{padding:'14px 24px',borderBottom:'1px solid var(--border)',flexShrink:0,display:'flex',alignItems:'center',justifyContent:'space-between',flexWrap:'wrap',gap:'10px'}}>
        <div><h1 style={{fontSize:'16px',fontWeight:700,color:'var(--t1)',margin:0}}>Mi Portafolio</h1><p style={{fontSize:'12px',color:'var(--t3)',margin:'2px 0 0'}}>Mayo 2026 · 3 empresas activas</p></div>
        <div style={{display:'flex',gap:'6px'}}>{['Cash','Accrual'].map(function(m){return <button key={m} style={{padding:'6px 14px',borderRadius:'100px',background:m==='Cash'?'var(--surf-2)':'none',border:m==='Cash'?'1px solid var(--border)':'none',fontSize:'12.5px',fontWeight:m==='Cash'?600:400,color:m==='Cash'?'var(--t1)':'var(--t3)',cursor:'pointer',fontFamily:'var(--font)'}}>{m}</button>; })}</div>
      </div>
      <div style={{flex:1,overflowY:'auto',padding:'20px 24px'}} className="main-scroll">
        {/* Consolidated totals */}
        <div className="grid-3" style={{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:'10px',marginBottom:'20px'}}>
          {[['Revenue total','$28,400','var(--orange,#F97316)'],['Cash total','$26,160','var(--t1)'],['Margen prom.','41%','var(--t1)']].map(function(row){return(
            <div key={row[0]} style={{background:'rgba(255,255,255,0.68)',backdropFilter:'var(--glass-blur)',WebkitBackdropFilter:'var(--glass-blur)',border:'0.5px solid rgba(255,255,255,0.65)',boxShadow:'0 0 0 0.5px rgba(255,255,255,0.5) inset,0 4px 20px rgba(0,0,0,0.06)',borderRadius:'var(--radius-card)',padding:'16px 18px'}}>
              <p style={{fontSize:'10.5px',fontWeight:700,color:'var(--t3)',textTransform:'uppercase',letterSpacing:'0.06em',margin:'0 0 5px'}}>{row[0]}</p>
              <p style={{fontFamily:'var(--font-mono)',fontSize:'22px',fontWeight:700,color:row[2],margin:0,letterSpacing:'-0.03em'}}>{row[1]}</p>
            </div>
          );})}
        </div>

        {/* Company grid */}
        <div style={{display:'grid',gridTemplateColumns:'repeat(auto-fill,minmax(260px,1fr))',gap:'12px',marginBottom:'24px'}}>
          {companies.map(function(c){return <CompanyCard key={c.id} c={c} onClick={function(){onSelectEmpresa(c.id);}}/>;})}
          <div onClick={function(){setNumiOpen('choose');}} style={{background:'var(--surf-1)',border:'1px dashed var(--border-2)',borderRadius:'var(--radius-lg)',padding:'20px',cursor:'pointer',display:'flex',flexDirection:'column',alignItems:'center',justifyContent:'center',gap:'10px',minHeight:'160px'}} onMouseEnter={function(e){e.currentTarget.style.borderColor='var(--accent-border)';}} onMouseLeave={function(e){e.currentTarget.style.borderColor='var(--border-2)';}}>
            <div style={{width:'36px',height:'36px',borderRadius:'50%',background:'var(--surf-2)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'20px',color:'var(--t3)',fontWeight:300}}>+</div>
            <p style={{fontSize:'13px',fontWeight:600,color:'var(--t3)',margin:0}}>Agregar empresa</p>
          </div>
        </div>

        {/* Portfolio hallazgos */}
        <div style={{marginBottom:'16px'}}>
          <p style={{fontSize:'12px',fontWeight:700,color:'var(--t3)',textTransform:'uppercase',letterSpacing:'0.06em',marginBottom:'10px'}}>Hallazgos del portafolio</p>
          <div style={{background:'rgba(255,255,255,0.68)',backdropFilter:'var(--glass-blur)',WebkitBackdropFilter:'var(--glass-blur)',border:'0.5px solid rgba(255,255,255,0.6)',boxShadow:'var(--glass-shadow)',borderRadius:'var(--radius-card)',overflow:'hidden'}}>
            {PORTFOLIO_HALLAZGOS.map(function(h,i){var c=SEV_COLOR[h.sev]||'var(--t2)'; return(
              <div key={i} style={{padding:'11px 16px',display:'flex',alignItems:'center',gap:'10px',borderBottom:i<PORTFOLIO_HALLAZGOS.length-1?'1px solid var(--border)':'none'}}>
                <span style={{width:'8px',height:'8px',borderRadius:'50%',background:c,flexShrink:0}}/>
                <span style={{display:'inline-flex',alignItems:'center',gap:'4px',fontSize:'10px',fontWeight:700,padding:'2px 7px',borderRadius:'100px',background:h.color+'18',color:h.color,flexShrink:0}}>{h.empresa}</span>
                <span style={{fontSize:'12.5px',color:'var(--t2)',flex:1}}>{h.text}</span>
              </div>
            );})}
          </div>
        </div>

        {/* Notifications */}
        {visibleNotifs.length>0&&(
          <div>
            <p style={{fontSize:'12px',fontWeight:700,color:'var(--t3)',textTransform:'uppercase',letterSpacing:'0.06em',marginBottom:'10px'}}>Notificaciones</p>
            <div style={{display:'flex',flexDirection:'column',gap:'7px'}}>
              {visibleNotifs.map(function(n){return(
                <div key={n.id} style={{display:'flex',alignItems:'center',gap:'10px',padding:'10px 14px',background:'var(--surf-1)',border:'1px solid '+(n.urgent?'var(--accent-border)':'var(--border)'),borderRadius:'var(--radius)',animation:'fadeInUp 0.2s ease'}}>
                  <span style={{fontSize:'16px',flexShrink:0}}>{n.icon}</span>
                  <span style={{fontSize:'12.5px',color:'var(--t2)',flex:1,lineHeight:1.4}}>{n.text}</span>
                  <button onClick={function(){setDismissedNotifs(function(d){return d.concat([n.id]);});}} style={{background:'none',border:'none',cursor:'pointer',color:'var(--t3)',fontSize:'16px',lineHeight:1,padding:'2px 4px'}}>×</button>
                </div>
              );})}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

/* ─── FINANCIERO TAB ─────────────────────────────────────────────────────────── */
function FinancieroTab({ companyId }) {
  var kpiGroups = GROUPED_KPIS[companyId]||GROUPED_KPIS.A;
  var pl = PL_DATA[companyId]||[];
  var products = PRODUCTS_DATA[companyId]||[];
  var txs = TXS_DATA[companyId]||[];
  var [plOpen,setPlOpen] = useState(true);
  var [expProd,setExpProd] = useState(null);
  return (
    <div style={{padding:'20px 24px',maxWidth:'840px'}}>
      {/* KPIs agrupados */}
      {Object.keys(kpiGroups).map(function(group){return(
        <div key={group} style={{marginBottom:'16px'}}>
          <p style={{fontSize:'11px',fontWeight:700,color:'var(--t3)',textTransform:'uppercase',letterSpacing:'0.07em',marginBottom:'8px'}}>{group}</p>
          <div className="grid-4" style={{display:'grid',gridTemplateColumns:'repeat(4,1fr)',gap:'8px'}}>
            {kpiGroups[group].map(function(k){var kc=KPI_COLOR[k.s]||'var(--t2)'; return(
              <div key={k.l} style={{background:'rgba(255,255,255,0.72)',backdropFilter:'var(--glass-blur)',WebkitBackdropFilter:'var(--glass-blur)',border:'0.5px solid rgba(255,255,255,0.6)',borderRadius:'var(--radius-card)',padding:'10px 12px',borderLeft:'3px solid '+kc}}>
                <p style={{fontSize:'10px',color:'var(--t3)',margin:'0 0 4px',fontWeight:600,textTransform:'uppercase',letterSpacing:'0.05em'}}>{k.l}</p>
                <p style={{fontFamily:'var(--font-mono)',fontSize:'15px',fontWeight:600,color:kc,margin:0}}>{k.v}</p>
              </div>
            );})}
          </div>
        </div>
      );})}

      {/* P&L */}
      <div style={{background:'var(--glass-bg)',backdropFilter:'var(--glass-blur)',WebkitBackdropFilter:'var(--glass-blur)',border:'0.5px solid var(--glass-border)',boxShadow:'var(--glass-shadow)',borderRadius:'var(--radius-card)',overflow:'hidden',marginBottom:'16px'}}>
        <button onClick={function(){setPlOpen(function(o){return !o;});}} style={{width:'100%',padding:'12px 16px',display:'flex',justifyContent:'space-between',alignItems:'center',background:'none',border:'none',cursor:'pointer',fontFamily:'var(--font)'}}>
          <span style={{fontSize:'13px',fontWeight:700,color:'var(--t1)'}}>Estado de Resultados (P&L)</span>
          <span style={{color:'var(--t3)',transition:'transform 0.2s',transform:plOpen?'rotate(180deg)':'',lineHeight:0}}><Ic.Chevron/></span>
        </button>
        {plOpen&&<div style={{padding:'0 16px 14px',borderTop:'1px solid var(--border)'}}>
          {pl.map(function(row,i){return(
            <div key={i} style={{display:'flex',justifyContent:'space-between',padding:'7px 0',borderBottom:i<pl.length-1?'1px solid var(--border)':'none',background:row[3]?'var(--accent-bg)':'none',borderRadius:row[3]?'6px':'none',padding:row[3]?'7px 8px':'7px 0',marginTop:row[3]?'4px':'0'}}>
              <span style={{fontSize:'13px',color:row[2]?'var(--t1)':'var(--t2)',fontWeight:row[2]||row[3]?700:400}}>{row[0]}</span>
              <span style={{fontFamily:'var(--font-mono)',fontSize:'13px',fontWeight:row[2]||row[3]?700:400,color:row[3]?'var(--accent)':row[2]?'var(--t1)':'var(--t2)'}}>{row[1]}</span>
            </div>
          );})}
        </div>}
      </div>

      {/* Chart */}
      <div style={{background:'var(--glass-bg)',backdropFilter:'var(--glass-blur)',WebkitBackdropFilter:'var(--glass-blur)',border:'0.5px solid var(--glass-border)',boxShadow:'var(--glass-shadow)',borderRadius:'var(--radius-card)',padding:'16px 20px',marginBottom:'16px'}}>
        <p style={{fontSize:'12px',fontWeight:700,color:'var(--t3)',textTransform:'uppercase',letterSpacing:'0.06em',marginBottom:'12px'}}>Presupuesto vs Real</p>
        <div style={{display:'flex',alignItems:'flex-end',gap:'6px',height:'72px'}}>
          {['Ene','Feb','Mar','Abr','May'].map(function(m,i){var real=[65,72,80,55,90][i]; var ppto=[70,70,75,75,80][i]; return(
            <div key={m} style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',gap:'4px'}}>
              <div style={{width:'100%',display:'flex',gap:'2px',alignItems:'flex-end',height:'52px'}}>
                <div style={{flex:1,background:'var(--accent)',borderRadius:'3px 3px 0 0',height:real+'%',opacity:0.85}}/>
                <div style={{flex:1,background:'var(--surf-3)',borderRadius:'3px 3px 0 0',height:ppto+'%',border:'1px solid var(--border-2)'}}/>
              </div>
              <span style={{fontSize:'10px',color:'var(--t3)'}}>{m}</span>
            </div>
          );})}
        </div>
        <div style={{display:'flex',gap:'14px',marginTop:'8px'}}>
          {[['var(--accent)','Real'],['var(--surf-3)','Presupuesto']].map(function(row){return <div key={row[1]} style={{display:'flex',gap:'5px',alignItems:'center'}}><span style={{width:'10px',height:'6px',borderRadius:'2px',background:row[0],border:'1px solid var(--border-2)',display:'inline-block'}}/><span style={{fontSize:'11px',color:'var(--t3)'}}>{row[1]}</span></div>;})}
        </div>
      </div>

      {/* Productos */}
      <div style={{marginBottom:'16px'}}>
        <div style={{display:'flex',justifyContent:'space-between',marginBottom:'8px'}}><p style={{fontSize:'12px',fontWeight:700,color:'var(--t3)',textTransform:'uppercase',letterSpacing:'0.06em',margin:0}}>Productos y servicios</p><button style={{fontSize:'12.5px',color:'var(--accent)',background:'none',border:'none',cursor:'pointer',fontFamily:'var(--font)',fontWeight:600}}>+ Agregar</button></div>
        {products.length===0?<div style={{padding:'16px',background:'rgba(255,255,255,0.72)',backdropFilter:'var(--glass-blur)',WebkitBackdropFilter:'var(--glass-blur)',border:'0.5px solid rgba(255,255,255,0.6)',borderRadius:'var(--radius-card)',textAlign:'center'}}><p style={{fontSize:'12.5px',color:'var(--t3)',margin:0}}>Sin productos definidos</p></div>:products.map(function(p){return(
          <div key={p.id} style={{background:'rgba(255,255,255,0.72)',backdropFilter:'var(--glass-blur)',WebkitBackdropFilter:'var(--glass-blur)',border:'0.5px solid rgba(255,255,255,0.6)',borderRadius:'var(--radius-card)',overflow:'hidden',marginBottom:'8px'}}>
            <div onClick={function(){setExpProd(expProd===p.id?null:p.id);}} style={{padding:'12px 16px',cursor:'pointer',display:'flex',justifyContent:'space-between',alignItems:'center',gap:'12px'}}>
              <div style={{flex:1,minWidth:0}}>
                <p style={{fontSize:'13.5px',fontWeight:600,color:'var(--t1)',margin:'0 0 4px'}}>{p.nombre}</p>
                <div style={{display:'flex',gap:'14px',flexWrap:'wrap'}}>
                  {[['Precio','$'+p.precio,'var(--t1)'],['Costo','$'+p.costo,'var(--t2)'],['Margen',p.margen+'%',p.margen>40?'var(--s-green)':'var(--s-yellow)']].map(function(row){return <span key={row[0]} style={{fontSize:'12px',color:'var(--t3)'}}>{row[0]} <strong style={{color:row[2],fontFamily:'var(--font-mono)'}}>{row[1]}</strong></span>;})}
                </div>
              </div>
              <div style={{textAlign:'right',flexShrink:0}}><p style={{fontFamily:'var(--font-mono)',fontSize:'14px',fontWeight:700,color:'var(--s-green)',margin:'0 0 3px'}}>${p.revenue.toLocaleString('es')}</p><p style={{fontSize:'10px',color:'var(--t3)',margin:0}}>mayo</p></div>
              <span style={{color:'var(--t3)',transition:'transform 0.2s',transform:expProd===p.id?'rotate(180deg)':'',lineHeight:0,flexShrink:0}}><Ic.Chevron/></span>
            </div>
            {expProd===p.id&&<div style={{padding:'0 16px 14px',borderTop:'1px solid var(--border)'}}>
              {p.costos.map(function(cost,ci){return <div key={ci} style={{display:'flex',justifyContent:'space-between',padding:'6px 0',borderBottom:'1px solid var(--border)'}}><span style={{fontSize:'13px',color:'var(--t2)'}}>{cost.l}</span><span style={{fontFamily:'var(--font-mono)',fontSize:'13px',color:'var(--t1)',fontWeight:500}}>{cost.v}</span></div>;})}
              <div style={{display:'flex',justifyContent:'space-between',padding:'8px 0'}}><span style={{fontSize:'13px',fontWeight:700,color:'var(--t1)'}}>Margen neto</span><span style={{fontFamily:'var(--font-mono)',fontSize:'14px',fontWeight:700,color:'var(--s-green)'}}>{'$'+(p.precio-p.costo).toFixed(2)+' ('+p.margen+'%)'}</span></div>
            </div>}
          </div>
        );})}
      </div>

      {/* Transacciones */}
      <div>
        <div style={{display:'flex',justifyContent:'space-between',marginBottom:'8px'}}><p style={{fontSize:'12px',fontWeight:700,color:'var(--t3)',textTransform:'uppercase',letterSpacing:'0.06em',margin:0}}>Transacciones recientes</p><button style={{fontSize:'12.5px',color:'var(--accent)',background:'none',border:'none',cursor:'pointer',fontFamily:'var(--font)',fontWeight:600}}>Ver todas</button></div>
        {txs.length===0?<div style={{padding:'16px',background:'rgba(255,255,255,0.72)',backdropFilter:'var(--glass-blur)',WebkitBackdropFilter:'var(--glass-blur)',border:'0.5px solid rgba(255,255,255,0.6)',borderRadius:'var(--radius-card)',textAlign:'center'}}><p style={{fontSize:'12.5px',color:'var(--t3)',margin:0}}>Sin transacciones registradas</p></div>:
        <div style={{background:'rgba(255,255,255,0.72)',backdropFilter:'var(--glass-blur)',WebkitBackdropFilter:'var(--glass-blur)',border:'0.5px solid rgba(255,255,255,0.6)',borderRadius:'var(--radius-card)',overflow:'hidden'}}>
          {txs.map(function(tx,i){return(
            <div key={tx.id} style={{padding:'11px 16px',display:'flex',alignItems:'center',gap:'10px',borderBottom:i<txs.length-1?'1px solid var(--border)':'none'}} onMouseEnter={function(e){e.currentTarget.style.background='var(--surf-2)';}} onMouseLeave={function(e){e.currentTarget.style.background='transparent';}}>
              <div style={{width:'30px',height:'30px',borderRadius:'8px',background:tx.tipo==='ingreso'?'var(--s-green-bg)':'var(--s-red-bg)',display:'flex',alignItems:'center',justifyContent:'center',flexShrink:0}}>
                <svg width="12" height="12" viewBox="0 0 12 12" fill="none"><path d={tx.tipo==='ingreso'?'M6 10V2M3 5L6 2l3 3':'M6 2v8M3 7l3 3 3-3'} stroke={tx.tipo==='ingreso'?'var(--s-green)':'var(--s-red)'} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
              </div>
              <div style={{flex:1,minWidth:0}}><p style={{fontSize:'13px',fontWeight:500,color:'var(--t1)',margin:'0 0 3px',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{tx.desc}</p>
                <div style={{display:'flex',gap:'8px'}}><span style={{fontSize:'11px',color:'var(--t3)'}}>{tx.fecha}</span><span style={{fontSize:'11px',color:'var(--t3)'}}>· {tx.cat}</span><span style={{fontSize:'10px',fontWeight:600,padding:'1px 6px',borderRadius:'100px',background:'var(--surf-3)',color:'var(--t3)'}}>{tx.origen}</span></div></div>
              <span style={{fontFamily:'var(--font-mono)',fontSize:'13.5px',fontWeight:700,color:tx.tipo==='ingreso'?'var(--s-green)':'var(--s-red)',flexShrink:0}}>{tx.monto}</span>
            </div>
          );})}
        </div>}
      </div>
    </div>
  );
}

/* ─── ESTRUCTURA TAB ─────────────────────────────────────────────────────────── */
function EstructuraTab({ companyId }) {
  var info = INFO_GENERAL[companyId]||INFO_GENERAL.A;
  var socios = (SOCIOS_DATA[companyId]||[]).slice();
  var [sociosState,setSociosState] = useState(socios);
  var totalPct = sociosState.reduce(function(a,s){return a+(s.pct||0);},0);
  var ACCESO_LABELS = {'administrador':'Administrador','colaborador':'Colaborador','solo-lectura':'Solo lectura'};
  var ACCESO_COLORS = {'administrador':'var(--accent)','colaborador':'var(--s-yellow)','solo-lectura':'var(--t3)'};
  var setAcceso = function(id,v){setSociosState(function(ss){return ss.map(function(s){return s.id===id?Object.assign({},s,{acceso:v}):s;});});};
  return (
    <div style={{padding:'20px 24px',maxWidth:'720px'}}>
      {/* Info general */}
      <div style={{background:'var(--glass-bg)',backdropFilter:'var(--glass-blur)',WebkitBackdropFilter:'var(--glass-blur)',border:'0.5px solid var(--glass-border)',boxShadow:'var(--glass-shadow)',borderRadius:'var(--radius-card)',padding:'18px 20px',marginBottom:'14px'}}>
        <div style={{display:'flex',justifyContent:'space-between',marginBottom:'14px'}}><p style={{fontSize:'13px',fontWeight:700,color:'var(--t1)',margin:0}}>Información general</p><button style={{fontSize:'12px',color:'var(--accent)',background:'none',border:'none',cursor:'pointer',fontFamily:'var(--font)',fontWeight:600}}>Editar</button></div>
        <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'10px'}}>
          {[['Nombre legal',info.legal],['País',info.pais],['Régimen',info.regimen],['Industria',info.industria],['Fundación',info.fundacion]].map(function(row){return(
            <div key={row[0]}><p style={{fontSize:'10.5px',color:'var(--t3)',margin:'0 0 2px',fontWeight:600,textTransform:'uppercase',letterSpacing:'0.05em'}}>{row[0]}</p><p style={{fontSize:'13px',color:'var(--t1)',margin:0}}>{row[1]}</p></div>
          );})}
        </div>
        <div style={{marginTop:'12px',paddingTop:'12px',borderTop:'1px solid var(--border)'}}><p style={{fontSize:'10.5px',color:'var(--t3)',margin:'0 0 4px',fontWeight:600,textTransform:'uppercase',letterSpacing:'0.05em'}}>Descripción</p><p style={{fontSize:'13px',color:'var(--t2)',margin:0,lineHeight:1.6}}>{info.desc}</p></div>
      </div>

      {/* Socios */}
      <div style={{background:'rgba(255,255,255,0.72)',backdropFilter:'var(--glass-blur)',WebkitBackdropFilter:'var(--glass-blur)',border:'0.5px solid rgba(255,255,255,0.6)',borderRadius:'var(--radius-card)',overflow:'hidden',marginBottom:'14px'}}>
        <div style={{padding:'14px 18px',borderBottom:'1px solid var(--border)',display:'flex',justifyContent:'space-between',alignItems:'center'}}>
          <div><p style={{fontSize:'13px',fontWeight:700,color:'var(--t1)',margin:0}}>Socios y participación</p><p style={{fontSize:'11.5px',color:totalPct===100?'var(--s-green)':'var(--s-yellow)',margin:'2px 0 0',fontWeight:600}}>Total: {totalPct}% {totalPct===100?'✓':'⚠ No cuadra'}</p></div>
          <button style={{fontSize:'12px',color:'var(--accent)',background:'none',border:'none',cursor:'pointer',fontFamily:'var(--font)',fontWeight:600}}>+ Agregar socio</button>
        </div>
        <div style={{overflowX:'auto'}}>
          <table style={{width:'100%',borderCollapse:'collapse',minWidth:'500px'}}>
            <thead><tr style={{background:'var(--surf-2)'}}>{['Nombre','%','Rol','Acceso',''].map(function(h){return <th key={h} style={{padding:'8px 16px',textAlign:'left',fontSize:'10.5px',fontWeight:700,color:'var(--t3)',textTransform:'uppercase',letterSpacing:'0.06em',whiteSpace:'nowrap'}}>{h}</th>;})}</tr></thead>
            <tbody>{sociosState.map(function(s){return(
              <tr key={s.id} style={{borderTop:'1px solid var(--border)'}}>
                <td style={{padding:'11px 16px',fontSize:'13px',fontWeight:500,color:'var(--t1)'}}>{s.nombre}</td>
                <td style={{padding:'11px 16px',fontFamily:'var(--font-mono)',fontSize:'13px',color:'var(--t1)',fontWeight:700}}>{s.pct}%</td>
                <td style={{padding:'11px 16px',fontSize:'12.5px',color:'var(--t2)'}}>{s.rol}</td>
                <td style={{padding:'11px 16px'}}>
                  <select value={s.acceso} onChange={function(e){setAcceso(s.id,e.target.value);}} style={{padding:'5px 10px',borderRadius:'var(--radius-sm)',fontSize:'12px',fontWeight:600,color:ACCESO_COLORS[s.acceso]||'var(--t2)',background:'var(--surf-2)',border:'1px solid var(--border)'}}>
                    <option value="administrador">Administrador</option>
                    <option value="colaborador">Colaborador</option>
                    <option value="solo-lectura">Solo lectura</option>
                  </select>
                </td>
                <td style={{padding:'11px 16px'}}><button style={{fontSize:'11.5px',color:'var(--s-red)',background:'none',border:'none',cursor:'pointer',fontFamily:'var(--font)'}}>Remover</button></td>
              </tr>
            );})}
            </tbody>
          </table>
        </div>
      </div>

      {/* Documentos */}
      <div style={{background:'rgba(255,255,255,0.72)',backdropFilter:'var(--glass-blur)',WebkitBackdropFilter:'var(--glass-blur)',border:'0.5px solid rgba(255,255,255,0.6)',borderRadius:'var(--radius-card)',padding:'18px 20px'}}>
        <div style={{display:'flex',justifyContent:'space-between',marginBottom:'12px'}}><p style={{fontSize:'13px',fontWeight:700,color:'var(--t1)',margin:0}}>Documentos</p><button style={{fontSize:'12px',color:'var(--accent)',background:'none',border:'none',cursor:'pointer',fontFamily:'var(--font)',fontWeight:600}}>+ Subir</button></div>
        {[{name:'acta-constitutiva.pdf',date:'15 ene 2022'},{name:'estados-auditados-2024.pdf',date:'3 feb 2025'}].map(function(d){return(
          <div key={d.name} style={{display:'flex',alignItems:'center',gap:'10px',padding:'9px 12px',background:'var(--surf-2)',borderRadius:'var(--radius-sm)',marginBottom:'7px'}}>
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="2" y="1" width="10" height="12" rx="1.5" stroke="currentColor" strokeWidth="1.3"/><path d="M4 5h6M4 7.5h6M4 10h4" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round"/></svg>
            <span style={{fontSize:'13px',color:'var(--t1)',flex:1,overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap'}}>{d.name}</span>
            <span style={{fontSize:'11px',color:'var(--t3)',flexShrink:0}}>{d.date}</span>
            <div style={{display:'flex',gap:'8px',flexShrink:0}}><button style={{fontSize:'11.5px',color:'var(--accent)',background:'none',border:'none',cursor:'pointer',fontFamily:'var(--font)'}}>↓</button><button style={{fontSize:'11.5px',color:'var(--s-red)',background:'none',border:'none',cursor:'pointer',fontFamily:'var(--font)'}}>✕</button></div>
          </div>
        );})}
      </div>
    </div>
  );
}

/* ─── EMPRESA ESPECÍFICA VIEW ────────────────────────────────────────────────── */
function EmpresaView({ companyId, onBack, setView }) {
  var [tab,setTab] = useState('financiero');
  var c = COMPANIES_DATA.find(function(x){return x.id===companyId;})||COMPANIES_DATA[0];
  var estado = ESTADO_CFG[c.estado]||ESTADO_CFG.saludable;
  var TABS = ['financiero','estructura'];
  var TLABELS = {financiero:'Financiero',estructura:'Estructura'};
  var topKpis = c.etapa==='pre-revenue' ? [
    {label:'Burn Rate',value:c.kpis.burn+'/mes'},{label:'Runway',value:c.kpis.runway+' meses'},{label:'Cash on Hand',value:c.kpis.cash},{label:'Revenue',value:'Pre-revenue'},{label:'Estado',value:estado.label},
  ] : [
    {label:'Revenue',value:c.kpis.revenue,change:c.cambios.revenue},{label:'M. Bruto',value:c.kpis.margen,change:c.cambios.margen},{label:'Cash on Hand',value:c.kpis.cash},{label:'Runway',value:c.kpis.runway+' m'},{label:'Burn Rate',value:c.kpis.burn+'/mes'},
  ];
  return (
    <div style={{display:'flex',flexDirection:'column',height:'100%',overflow:'hidden'}}>
      {/* ZONA FIJA */}
      <div style={{flexShrink:0,borderBottom:'1px solid var(--border)',background:'var(--surf-1)'}}>
        {/* Header */}
        <div style={{padding:'10px 24px',display:'flex',alignItems:'center',justifyContent:'space-between',gap:'12px',flexWrap:'wrap'}}>
          <div style={{display:'flex',alignItems:'center',gap:'10px'}}>
            <button onClick={onBack} style={{fontSize:'12.5px',color:'var(--accent)',background:'none',border:'none',cursor:'pointer',fontFamily:'var(--font)',display:'flex',alignItems:'center',gap:'4px',padding:0,fontWeight:600}}>
              <svg width="13" height="13" viewBox="0 0 13 13" fill="none"><path d="M8 3L4.5 6.5L8 10" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/></svg>
              Portafolio
            </button>
            <span style={{color:'var(--border-2)'}}>›</span>
            <div style={{display:'flex',alignItems:'center',gap:'8px'}}>
              {c.logo
              ? <img src={c.logo} alt={c.nombre} style={{width:'24px',height:'24px',borderRadius:'7px',objectFit:'cover',border:'1px solid var(--border)'}}/>
              : <div style={{width:'24px',height:'24px',borderRadius:'7px',background:c.color+'22',backdropFilter:'blur(8px)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'9px',fontWeight:800,color:c.color}}>{c.initials}</div>}
              <span style={{fontSize:'14px',fontWeight:700,color:'var(--t1)'}}>{c.nombre}</span>
              <span style={{fontSize:'10px',fontWeight:700,padding:'2px 7px',borderRadius:'100px',background:estado.bg,color:estado.c}}>{estado.label}</span>
            </div>
          </div>
          <div style={{display:'flex',gap:'6px',alignItems:'center'}}>
            <div style={{display:'flex',gap:'4px',padding:'3px',background:'var(--surf-2)',borderRadius:'var(--radius-sm)'}}>
              {['Cash','Accrual'].map(function(m){return <button key={m} style={{padding:'5px 12px',borderRadius:'5px',background:m==='Cash'?'var(--surf-1)':'transparent',border:m==='Cash'?'1px solid var(--border)':'none',fontSize:'12px',fontWeight:m==='Cash'?600:400,color:m==='Cash'?'var(--t1)':'var(--t3)',cursor:'pointer',fontFamily:'var(--font)'}}>{m}</button>; })}</div>
            <select style={{padding:'6px 10px',borderRadius:'var(--radius-sm)',fontSize:'12px',color:'var(--t2)'}}><option>Mayo 2026</option><option>Abril 2026</option><option>Q1 2026</option></select>
          </div>
        </div>
        {/* 5 KPI strip */}
        <div style={{display:'flex',gap:'0',padding:'0 24px',overflowX:'auto',borderTop:'1px solid var(--border)'}}>
          {topKpis.map(function(k,i){return(
            <div key={k.label} style={{flex:'0 0 auto',padding:'10px 20px',borderRight:i<4?'1px solid var(--border)':'none',cursor:'default',minWidth:'120px',transition:'background 0.1s'}} onMouseEnter={function(e){e.currentTarget.style.background='var(--glass-bg-atmo)';}} onMouseLeave={function(e){e.currentTarget.style.background='transparent';}}>
              <p style={{fontSize:'10px',color:'var(--t3)',margin:'0 0 3px',fontWeight:600,textTransform:'uppercase',letterSpacing:'0.05em'}}>{k.label}</p>
              <div style={{display:'flex',alignItems:'baseline',gap:'5px'}}>
                <span style={{fontFamily:'var(--font-mono)',fontSize:'15px',fontWeight:700,color:'var(--t1)'}}>{k.value}</span>
                {k.change&&<span style={{fontSize:'10.5px',fontWeight:600,color:k.change[0]==='-'?'var(--s-yellow)':'var(--s-green)'}}>{k.change}</span>}
              </div>
            </div>
          );})}
        </div>
        {/* Tabs */}
        <div style={{display:'flex',gap:'0',padding:'0 24px',overflowX:'auto',borderTop:'1px solid var(--border)'}}>
          {TABS.map(function(t){return(
            <button key={t} onClick={function(){setTab(t);}} style={{padding:'10px 18px',background:'none',border:'none',borderBottom:'2px solid '+(tab===t?'var(--accent)':'transparent'),color:tab===t?'var(--accent)':'var(--t3)',fontSize:'13px',fontWeight:tab===t?700:400,cursor:'pointer',fontFamily:'var(--font)',whiteSpace:'nowrap',transition:'color 0.15s'}}>{TLABELS[t]}</button>
          );})}
        </div>
      </div>
      {/* Tab content */}
      <div style={{flex:1,overflowY:'auto'}} className="main-scroll">
        {tab==='financiero'  && <FinancieroTab companyId={companyId}/>}
        {tab==='estructura'  && <EstructuraTab companyId={companyId}/>}
      </div>
    </div>
  );
}

/* ─── NUMI COMPANY CREATION CHAT ──────────────────────────────────────────── */
var NUMI_FLOW = [
  {key:'nombre',    msg:'¡Hola! Soy Numi, tu asistente financiero. Vamos a crear tu empresa juntos. ¿Cuál es el nombre de tu empresa o negocio?', inputType:'text', placeholder:'Ej: Cafetería El Roble...'},
  {key:'desc',      msg:function(d){return 'Perfecto, '+d.nombre+'. ¿En una línea, a qué se dedica?';}, inputType:'text', placeholder:'Ej: Restaurante de comida casera en Bogotá'},
  {key:'pais',      msg:'¿Y en qué país opera?', inputType:'options', options:['México','Colombia','Argentina','Perú','Chile','Panamá','Otro']},
  {key:'industria', msg:function(d){return '¿En qué industria entraría '+d.nombre+'?';}, inputType:'options', options:['Restaurante / Food service','SaaS / Tech','Servicios profesionales','Retail','Consultoría','Manufactura','Educación','Otra']},
  {key:'etapa',     msg:function(d){return '¿En qué etapa está '+d.nombre+' ahora mismo?';}, inputType:'options', options:['Todavía no facturamos (pre-revenue)','Ya tenemos ventas (operando)']},
  {key:'socios',    msg:function(d){return '¿Tienes socios en '+d.nombre+'?';}, inputType:'options', options:['Soy el único dueño / dueña','Sí, tenemos socios']},
  {key:'metodo',    msg:function(d){return '¿Cómo prefieres empezar a cargar los números de '+d.nombre+'?';}, inputType:'options', options:['Conectar mi banco o app contable','Subir un archivo (Excel, CSV, PDF)','Ir ingresando a mano','Lo haré después']},
];

function NumiSummaryCard({ data, onConfirm, onEdit }) {
  var pairs = [['Nombre',data.nombre],['Descripción',data.desc],['País',data.pais],['Industria',data.industria],['Etapa',data.etapa],['Socios',data.socios],['Ingreso de datos',data.metodo]].filter(function(p){return p[1];});
  return (
    <div style={{maxWidth:'88%',background:'var(--surf-1)',border:'1px solid var(--border-2)',borderRadius:'16px',padding:'18px 20px',boxShadow:'0 4px 24px rgba(0,0,0,0.07)',width:'100%',animation:'numiPop 0.25s ease'}}>
      <p style={{fontSize:'13px',fontWeight:700,color:'var(--t1)',margin:'0 0 12px'}}>Resumen de tu empresa</p>
      {pairs.map(function(p){
        return <div key={p[0]} style={{display:'flex',justifyContent:'space-between',padding:'5px 0',borderBottom:'1px solid var(--border)'}}><span style={{fontSize:'12px',color:'var(--t3)'}}>{p[0]}</span><span style={{fontSize:'12.5px',fontWeight:500,color:'var(--t1)',maxWidth:'60%',textAlign:'right',lineHeight:1.35}}>{p[1]}</span></div>;
      })}
      <div style={{display:'flex',gap:'8px',marginTop:'14px'}}>
        <button onClick={onEdit} style={{flex:1,padding:'9px',borderRadius:'100px',background:'none',border:'1px solid var(--border-2)',color:'var(--t2)',fontSize:'13px',cursor:'pointer',fontFamily:'var(--font)',fontWeight:500}}>Editar algo</button>
        <button onClick={onConfirm} style={{flex:2,padding:'9px',borderRadius:'100px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'13px',fontWeight:700,cursor:'pointer',fontFamily:'var(--font)'}}>Crear empresa →</button>
      </div>
    </div>
  );
}

function CompanyCreationChat({ onComplete, onCancel }) {
  var [messages, setMessages]     = useState([]);
  var [step, setStep]             = useState(0);
  var [data, setData]             = useState({});
  var [input, setInput]           = useState('');
  var [typing, setTyping]         = useState(false);
  var [summary, setSummary]       = useState(false);
  var [done, setDone]             = useState(false);
  var bottomRef                   = useRef(null);

  function pushNumi(text, delay) {
    delay = delay || 600;
    setTyping(true);
    setTimeout(function(){
      var msg = typeof text === 'function' ? text(data) : text;
      setMessages(function(m){return m.concat([{role:'numi',text:msg}]);});
      setTyping(false);
    }, delay);
  }

  useEffect(function(){
    setTimeout(function(){
      setMessages([{role:'numi',text:NUMI_FLOW[0].msg}]);
    }, 300);
  },[]);

  useEffect(function(){
    if(bottomRef.current) bottomRef.current.scrollTop = bottomRef.current.scrollHeight;
  },[messages,typing,summary]);

  function handleResponse(value) {
    var currentStep = NUMI_FLOW[step];
    var newData = Object.assign({}, data);
    newData[currentStep.key] = value;
    setData(newData);
    setMessages(function(m){return m.concat([{role:'user',text:value}]);});
    setInput('');
    var nextStep = step + 1;
    if (nextStep < NUMI_FLOW.length) {
      setStep(nextStep);
      var nextFlow = NUMI_FLOW[nextStep];
      var nextMsg = typeof nextFlow.msg === 'function' ? nextFlow.msg(newData) : nextFlow.msg;
      setTyping(true);
      setTimeout(function(){
        setMessages(function(m){return m.concat([{role:'numi',text:nextMsg}]);});
        setTyping(false);
      }, 700);
    } else {
      setTyping(true);
      setTimeout(function(){
        setMessages(function(m){return m.concat([{role:'numi',text:'Listo. Revisa el resumen antes de crear tu empresa:',isSummary:true,summaryData:newData}]);});
        setTyping(false);
        setSummary(true);
      }, 800);
    }
  }

  var curFlow = NUMI_FLOW[step];
  var avatarStyle = {width:'28px',height:'28px',borderRadius:'50%',background:'var(--accent)',display:'flex',alignItems:'center',justifyContent:'center',fontSize:'10px',fontWeight:800,color:'var(--accent-text)',flexShrink:0,marginTop:'2px'};

  return (
    <div style={{height:'100%',display:'flex',flexDirection:'column',background:'var(--bg)'}}>
      {/* Header */}
      <div style={{padding:'14px 24px',borderBottom:'1px solid var(--border)',display:'flex',alignItems:'center',justifyContent:'space-between',flexShrink:0,background:'var(--surf-1)'}}>
        <div style={{display:'flex',alignItems:'center',gap:'10px'}}>
          <div style={avatarStyle}>N</div>
          <div>
            <p style={{fontSize:'14px',fontWeight:700,color:'var(--t1)',margin:0}}>Numi</p>
            <p style={{fontSize:'11px',color:'var(--t3)',margin:'1px 0 0'}}>Tu asistente financiero · Creando empresa</p>
          </div>
        </div>
        <button onClick={onCancel} style={{background:'none',border:'none',cursor:'pointer',color:'var(--t3)',fontSize:'22px',lineHeight:1,padding:'2px 6px'}}>×</button>
      </div>

      {/* Messages */}
      <div ref={bottomRef} style={{flex:1,overflowY:'auto',padding:'20px 24px',display:'flex',flexDirection:'column',gap:'14px'}} className="main-scroll">
        {messages.map(function(msg,i){
          if(msg.isSummary) return (
            <div key={i} style={{display:'flex',gap:'10px',alignItems:'flex-start',animation:'numiPop 0.25s ease'}}>
              <div style={avatarStyle}>N</div>
              <div style={{display:'flex',flexDirection:'column',gap:'10px',flex:1}}>
                <div style={{maxWidth:'75%',padding:'10px 14px',borderRadius:'12px 12px 12px 4px',background:'var(--surf-1)',color:'var(--t2)',fontSize:'13.5px',lineHeight:1.55,border:'1px solid var(--border)',boxShadow:'0 2px 8px rgba(0,0,0,0.06)'}}>{msg.text}</div>
                <NumiSummaryCard data={msg.summaryData} onConfirm={function(){onComplete(msg.summaryData);}} onEdit={function(){setSummary(false);setStep(0);setData({});setMessages([]);setTimeout(function(){setMessages([{role:'numi',text:NUMI_FLOW[0].msg}]);},200);}}/>
              </div>
            </div>
          );
          return (
            <div key={i} style={{display:'flex',justifyContent:msg.role==='user'?'flex-end':'flex-start',animation:'fadeInUp 0.2s ease'}}>
              {msg.role==='numi'&&<div style={Object.assign({},avatarStyle,{marginRight:'10px'})}>N</div>}
              <div style={{maxWidth:'75%',padding:'10px 14px',borderRadius:msg.role==='user'?'12px 12px 4px 12px':'12px 12px 12px 4px',background:msg.role==='user'?'rgba(36,36,36,0.88)':'var(--glass-bg)',backdropFilter:'var(--glass-blur)',WebkitBackdropFilter:'var(--glass-blur)',color:msg.role==='user'?'#f6f3f1':'var(--t1)',fontSize:'13.5px',lineHeight:1.55,border:'0.5px solid '+(msg.role==='user'?'rgba(255,255,255,0.12)':'var(--glass-border)'),boxShadow:'var(--glass-shadow)'}}>
                {msg.text}
              </div>
            </div>
          );
        })}
        {typing&&(
          <div style={{display:'flex',alignItems:'center',gap:'10px'}}>
            <div style={avatarStyle}>N</div>
            <div style={{padding:'10px 14px',borderRadius:'12px 12px 12px 4px',background:'var(--surf-1)',border:'1px solid var(--border)',display:'flex',gap:'4px',alignItems:'center',boxShadow:'0 2px 8px rgba(0,0,0,0.06)'}}>
              {[0,1,2].map(function(i){return <span key={i} style={{width:'5px',height:'5px',borderRadius:'50%',background:'var(--t3)',animation:'recBlink 1.2s '+i*0.28+'s ease infinite'}}/>;})
            }
            </div>
          </div>
        )}
      </div>

      {/* Input area */}
      {!summary&&!typing&&curFlow&&(
        <div style={{padding:'14px 24px',borderTop:'1px solid var(--border)',flexShrink:0,background:'var(--surf-1)'}}>
          {curFlow.inputType==='options' ? (
            <div style={{display:'flex',flexWrap:'wrap',gap:'8px'}}>
              {curFlow.options.map(function(opt){
                return <button key={opt} onClick={function(){handleResponse(opt);}} style={{padding:'8px 16px',borderRadius:'100px',background:'var(--surf-2)',border:'1px solid var(--border-2)',color:'var(--t1)',fontSize:'13px',fontWeight:500,cursor:'pointer',fontFamily:'var(--font)',transition:'all 0.12s'}}
                  onMouseEnter={function(e){e.currentTarget.style.background='var(--accent)';e.currentTarget.style.color='var(--accent-text)';e.currentTarget.style.borderColor='var(--accent)';}}
                  onMouseLeave={function(e){e.currentTarget.style.background='var(--surf-2)';e.currentTarget.style.color='var(--t1)';e.currentTarget.style.borderColor='var(--border-2)';}}
                >{opt}</button>;
              })}
            </div>
          ) : (
            <div style={{display:'flex',gap:'8px'}}>
              <input value={input} onChange={function(e){setInput(e.target.value);}} onKeyDown={function(e){if(e.key==='Enter'&&input.trim())handleResponse(input.trim());}} placeholder={curFlow.placeholder||'Escribe tu respuesta...'} autoFocus style={{flex:1,padding:'11px 16px',borderRadius:'100px',fontSize:'13.5px'}}/>
              <button onClick={function(){if(input.trim())handleResponse(input.trim());}} style={{padding:'11px 18px',borderRadius:'100px',background:'var(--accent)',border:'none',color:'var(--accent-text)',fontSize:'13.5px',fontWeight:700,cursor:'pointer',fontFamily:'var(--font)'}}>→</button>
            </div>
          )}
        </div>
      )}
    </div>
  );
}

Object.assign(window, { ConsolidadoView, EmpresaView, QuickAddModal, COMPANIES_DATA, CompanyCreationChat, IcCalcLocal });