// ── MÓDULO INSUMOS ────────────────────────────────────

function Insumos() {
  const { useState } = React;

  const CATEGORIAS = [
    { id:'oficina',      icon:'🖥', label:'Oficina',               subs:['Insumos impresoras','Papelería','Audiovisuales','Computación','Otros'] },
    { id:'joyeria',      icon:'💍', label:'Joyería / Taller',      subs:['Piedras','Metales','Accesorios','Broches','Hilos y alambres','Esmaltes','Otros'] },
    { id:'empaques',     icon:'📦', label:'Empaques',              subs:['Cajas joyas','Bolsas','Especiales','Cintas y lazos','Papel tissue','Otros'] },
    { id:'aseo',         icon:'🧹', label:'Aseo',                  subs:['Limpiadores','Paños','Bolsas basura','Desinfectantes','Otros'] },
    { id:'herramientas', icon:'🔧', label:'Herramientas / Maquinaria', subs:['Herramientas manuales','Maquinaria','Pulidoras','Equipos soldadura','Repuestos','Otros'] },
    { id:'exhibicion',   icon:'🪟', label:'Exhibición & Muestras', subs:['Expositores','Bustos','Displays','Muestras catálogo','Otros'] },
    { id:'ambientacion', icon:'🕯', label:'Ambientación & Deco',   subs:['Fragancias','Iluminación','Decoración','Música ambiente','Plantas','Otros'] },
  ];

  const [catSel, setCatSel] = useState('oficina');
  const [subSel, setSubSel] = useState(null);
  const [vista, setVista] = useState('lista'); // lista | solicitudes
  const [modal, setModal] = useState(false);
  const [modalSolic, setModalSolic] = useState(false);
  const [busqueda, setBusqueda] = useState('');

  const [insumos, setInsumos] = useState(() => lsGet('insumos_data', [
    // Oficina
    { id:'INS-001', cat:'oficina', sub:'Insumos impresoras', nombre:'Tóner Godex GE300 negro', unidad:'unidad', stock:2, min:1, precio:28000, proveedor:'Godex Chile', estado:'OK', ultimo:'2026-03-15' },
    { id:'INS-002', cat:'oficina', sub:'Papelería', nombre:'Papel A4 resma 500h', unidad:'resma', stock:3, min:2, precio:4500, proveedor:'Librería central', estado:'OK', ultimo:'2026-04-01' },
    { id:'INS-003', cat:'oficina', sub:'Insumos impresoras', nombre:'Rollo papel térmico 80mm', unidad:'pack x10', stock:1, min:2, precio:8500, proveedor:'PaperTech', estado:'Bajo stock', ultimo:'2026-04-10' },
    // Joyería
    { id:'INS-004', cat:'joyeria', sub:'Piedras', nombre:'Circones blancos 2mm', unidad:'bolsa x100', stock:8, min:3, precio:12000, proveedor:'Distribuidora Gemas', estado:'OK', ultimo:'2026-04-05' },
    { id:'INS-005', cat:'joyeria', sub:'Broches', nombre:'Broche palanca plata 925 8mm', unidad:'pack x50', stock:2, min:3, precio:9500, proveedor:'Accesorios Joyería SA', estado:'Bajo stock', ultimo:'2026-03-20' },
    { id:'INS-006', cat:'joyeria', sub:'Metales', nombre:'Plata 925 lámina 0.5mm', unidad:'gramo', stock:450, min:100, precio:2200, proveedor:'Metalúrgica Norte', estado:'OK', ultimo:'2026-04-18' },
    { id:'INS-007', cat:'joyeria', sub:'Accesorios', nombre:'Cadena plata figaro 2mm', unidad:'metro', stock:12, min:5, precio:3800, proveedor:'Accesorios Joyería SA', estado:'OK', ultimo:'2026-04-12' },
    // Empaques
    { id:'INS-008', cat:'empaques', sub:'Cajas joyas', nombre:'Caja anillo terciopelo negro', unidad:'unidad', stock:45, min:20, precio:890, proveedor:'Empaques Navarro', estado:'OK', ultimo:'2026-04-08' },
    { id:'INS-009', cat:'empaques', sub:'Bolsas', nombre:'Bolsa organza dorada 10x15cm', unidad:'pack x50', stock:3, min:4, precio:5500, proveedor:'Empaques Navarro', estado:'Bajo stock', ultimo:'2026-03-28' },
    { id:'INS-010', cat:'empaques', sub:'Cajas joyas', nombre:'Caja collar rígida blanca', unidad:'unidad', stock:0, min:10, precio:1200, proveedor:'Empaques Navarro', estado:'Agotado', ultimo:'2026-03-10' },
    // Herramientas
    { id:'INS-011', cat:'herramientas', sub:'Herramientas manuales', nombre:'Alicates planos acero inox', unidad:'unidad', stock:4, min:2, precio:18000, proveedor:'Ferretería Silva', estado:'OK', ultimo:'2026-02-20' },
    { id:'INS-012', cat:'herramientas', sub:'Pulidoras', nombre:'Disco pulir fieltro 3"', unidad:'pack x12', stock:1, min:2, precio:6500, proveedor:'Herramientas Pro', estado:'Bajo stock', ultimo:'2026-04-01' },
    // Aseo
    { id:'INS-013', cat:'aseo', sub:'Limpiadores', nombre:'Líquido limpiador ultrasonido', unidad:'litro', stock:2, min:1, precio:8900, proveedor:'QuimiClear', estado:'OK', ultimo:'2026-04-10' },
    // Exhibición
    { id:'INS-014', cat:'exhibicion', sub:'Bustos', nombre:'Busto expositor joyería terciopelo', unidad:'unidad', stock:3, min:2, precio:12500, proveedor:'Display Store', estado:'OK', ultimo:'2026-01-15' },
    // Ambientación
    { id:'INS-015', cat:'ambientacion', sub:'Fragancias', nombre:'Difusor aroma jazmín 200ml', unidad:'unidad', stock:2, min:1, precio:9800, proveedor:'Aromas Chile', estado:'OK', ultimo:'2026-03-22' },
  ]));

  const [solicitudes, setSolicitudes] = useState(() => lsGet('insumos_solicitudes', [
    { id:'SOL-001', fecha:'2026-04-20', insumo:'Rollo papel térmico 80mm', cantidad:5, proveedor:'PaperTech', total:42500, estado:'Pendiente', usuario:'Admin' },
    { id:'SOL-002', fecha:'2026-04-15', insumo:'Broche palanca plata 925 8mm', cantidad:2, proveedor:'Accesorios Joyería SA', total:19000, estado:'Enviada', usuario:'Admin' },
    { id:'SOL-003', fecha:'2026-04-10', insumo:'Caja anillo terciopelo negro', cantidad:100, proveedor:'Empaques Navarro', total:89000, estado:'Recibida', usuario:'Admin' },
  ]));

  const [formIns, setFormIns] = useState({ nombre:'', cat:catSel, sub:'', unidad:'unidad', stock:'', min:'', precio:'', proveedor:'' });
  const [formSolic, setFormSolic] = useState({ insumo:'', cantidad:'', proveedor:'', nota:'' });

  const catActual = CATEGORIAS.find(c=>c.id===catSel);
  const listaFiltrada = insumos.filter(i => {
    if (i.cat !== catSel) return false;
    if (subSel && i.sub !== subSel) return false;
    if (busqueda && !i.nombre.toLowerCase().includes(busqueda.toLowerCase())) return false;
    return true;
  });

  const alertas = insumos.filter(i=>i.estado==='Bajo stock'||i.estado==='Agotado');
  const colorEstado = e=>({OK:'#27ae60','Bajo stock':'#f39c12','Agotado':'#c0392b'}[e]||'#aaa');
  const bgEstado = e=>({OK:'rgba(39,174,96,0.12)','Bajo stock':'rgba(243,156,18,0.12)','Agotado':'rgba(192,57,43,0.12)'}[e]||'rgba(100,100,100,0.1)');

  function guardarInsumo() {
    if (!formIns.nombre) return;
    const nuevo = { ...formIns, id:`INS-${String(insumos.length+1).padStart(3,'0')}`, estado:parseInt(formIns.stock||0)===0?'Agotado':parseInt(formIns.stock||0)<parseInt(formIns.min||1)?'Bajo stock':'OK', ultimo:hoy() };
    const next = [...insumos, nuevo];
    setInsumos(next); lsSet('insumos_data', next); setModal(false);
    setFormIns({ nombre:'', cat:catSel, sub:'', unidad:'unidad', stock:'', min:'', precio:'', proveedor:'' });
  }

  function crearSolicitud() {
    if (!formSolic.insumo || !formSolic.cantidad) return;
    const ins = insumos.find(i=>i.nombre.toLowerCase().includes(formSolic.insumo.toLowerCase()));
    const nueva = { id:`SOL-${String(solicitudes.length+1).padStart(3,'0')}`, fecha:hoy(), insumo:ins?.nombre||formSolic.insumo, cantidad:parseInt(formSolic.cantidad)||1, proveedor:formSolic.proveedor||ins?.proveedor||'', total:parseInt(formSolic.cantidad||0)*(ins?.precio||0), estado:'Pendiente', usuario:'Admin', nota:formSolic.nota };
    const next = [nueva, ...solicitudes];
    setSolicitudes(next); lsSet('insumos_solicitudes', next); setModalSolic(false);
    setFormSolic({ insumo:'', cantidad:'', proveedor:'', nota:'' });
  }

  return (
    <div style={{display:'flex',height:'100%',overflow:'hidden'}}>

      {/* Sidebar categorías */}
      <div style={{width:'160px',background:'var(--bg-sidebar)',borderRight:'1px solid var(--border)',display:'flex',flexDirection:'column',flexShrink:0}}>
        <div style={{padding:'12px 10px',borderBottom:'1px solid var(--border)'}}>
          <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'14px',fontWeight:600,color:'var(--cream)'}}>Insumos</div>
          <div style={{fontSize:'9px',color:'var(--cream-3)'}}>Gestión de stock</div>
        </div>
        {alertas.length>0&&(
          <div style={{margin:'8px',padding:'6px 8px',background:'rgba(243,156,18,0.1)',border:'1px solid rgba(243,156,18,0.3)',borderRadius:'6px',fontSize:'9px',color:'#f39c12',cursor:'pointer'}} onClick={()=>{setCatSel('todos');setBusqueda('');}}>
            ⚠ {alertas.length} alertas de stock
          </div>
        )}
        <nav style={{flex:1,overflowY:'auto',padding:'4px'}}>
          {CATEGORIAS.map(c=>(
            <button key={c.id} onClick={()=>{setCatSel(c.id);setSubSel(null);}}
              style={{display:'flex',alignItems:'center',gap:'6px',width:'100%',padding:'7px 8px',borderRadius:'6px',border:'none',background:catSel===c.id?'var(--gold-dim)':'transparent',color:catSel===c.id?'var(--cream)':'var(--cream-3)',cursor:'pointer',fontFamily:'Inter,sans-serif',fontSize:'10px',textAlign:'left',borderLeft:`2px solid ${catSel===c.id?'var(--gold)':'transparent'}`}}>
              <span>{c.icon}</span><span>{c.label}</span>
              <span style={{marginLeft:'auto',fontSize:'9px',color:'var(--cream-3)'}}>{insumos.filter(i=>i.cat===c.id).length}</span>
            </button>
          ))}
        </nav>
        <div style={{padding:'8px',borderTop:'1px solid var(--border)'}}>
          <button onClick={()=>setVista(v=>v==='lista'?'solicitudes':'lista')}
            style={{width:'100%',padding:'6px',background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'6px',color:'var(--cream-3)',fontSize:'9px',cursor:'pointer',fontFamily:'Inter,sans-serif'}}>
            {vista==='lista'?'📋 Solicitudes':'📦 Ver stock'}
          </button>
        </div>
      </div>

      {/* Contenido principal */}
      <div style={{flex:1,display:'flex',flexDirection:'column',overflow:'hidden'}}>
        {/* Toolbar */}
        <div style={{padding:'10px 16px',borderBottom:'1px solid var(--border)',background:'var(--bg-card)',display:'flex',gap:'8px',alignItems:'center',flexShrink:0}}>
          <span style={{fontSize:'16px'}}>{catActual?.icon}</span>
          <span style={{fontFamily:'Cormorant Garamond,serif',fontSize:'15px',fontWeight:600,color:'var(--cream)'}}>{catActual?.label}</span>
          <div style={{display:'flex',gap:'4px',marginLeft:'8px'}}>
            {catActual?.subs.map(s=>(
              <button key={s} onClick={()=>setSubSel(subSel===s?null:s)}
                style={{padding:'3px 9px',borderRadius:'20px',border:`1px solid ${subSel===s?'var(--gold)':'var(--border)'}`,background:subSel===s?'var(--gold-dim)':'transparent',color:subSel===s?'var(--gold)':'var(--cream-3)',fontSize:'9px',cursor:'pointer'}}>
                {s}
              </button>
            ))}
          </div>
          <input style={{background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'6px',padding:'5px 9px',color:'var(--cream)',fontSize:'11px',marginLeft:'auto',outline:'none',width:'180px'}}
            placeholder="Buscar insumo..." value={busqueda} onChange={e=>setBusqueda(e.target.value)}/>
          <button onClick={()=>setModalSolic(true)} style={{background:'transparent',border:'1px solid var(--border)',color:'var(--cream-2)',borderRadius:'7px',padding:'6px 12px',fontSize:'11px',cursor:'pointer',fontFamily:'Inter,sans-serif'}}>📋 Solicitud</button>
          <button onClick={()=>{setFormIns(p=>({...p,cat:catSel,sub:catActual?.subs[0]||''}));setModal(true);}} style={{background:'var(--gold)',color:'var(--bg)',border:'none',borderRadius:'7px',padding:'6px 12px',fontWeight:600,fontSize:'11px',cursor:'pointer',fontFamily:'Inter,sans-serif'}}>+ Agregar</button>
        </div>

        {vista==='lista' ? (
          <div style={{flex:1,overflowY:'auto',padding:'0 16px 16px'}}>
            {listaFiltrada.length===0 ? (
              <div style={{textAlign:'center',color:'var(--cream-3)',padding:'40px',fontSize:'12px'}}>Sin insumos en esta categoría. Agrega el primero →</div>
            ) : (
              <table style={{width:'100%',borderCollapse:'collapse',marginTop:'8px'}}>
                <thead>
                  <tr>{['ID','Nombre','Sub-categoría','Unidad','Stock','Mín.','Precio unit.','Proveedor','Estado',''].map(h=>(
                    <th key={h} style={invStyles.th}>{h}</th>
                  ))}</tr>
                </thead>
                <tbody>
                  {listaFiltrada.map(ins=>(
                    <tr key={ins.id} style={{...invStyles.tr,...(ins.estado==='Agotado'?{background:'rgba(192,57,43,0.04)'}:ins.estado==='Bajo stock'?{background:'rgba(243,156,18,0.04)'}:{})}}>
                      <td style={invStyles.td}><span style={{fontFamily:'monospace',fontSize:'9px',color:'var(--cream-3)'}}>{ins.id}</span></td>
                      <td style={invStyles.td}><span style={{fontWeight:500,color:'var(--cream)',fontSize:'11px'}}>{ins.nombre}</span></td>
                      <td style={invStyles.td}><span style={{fontSize:'10px',color:'var(--cream-3)'}}>{ins.sub}</span></td>
                      <td style={invStyles.td}><span style={{fontSize:'10px',color:'var(--cream-2)'}}>{ins.unidad}</span></td>
                      <td style={invStyles.td}>
                        <span style={{fontWeight:700,color:colorEstado(ins.estado),fontSize:'13px'}}>{ins.stock}</span>
                      </td>
                      <td style={invStyles.td}><span style={{fontSize:'10px',color:'var(--cream-3)'}}>{ins.min}</span></td>
                      <td style={invStyles.td}><span style={{color:'var(--gold)',fontSize:'11px'}}>{clp(ins.precio)}</span></td>
                      <td style={invStyles.td}><span style={{fontSize:'10px',color:'var(--cream-3)'}}>{ins.proveedor}</span></td>
                      <td style={invStyles.td}>
                        <span style={{fontSize:'10px',fontWeight:600,padding:'2px 7px',borderRadius:'20px',background:bgEstado(ins.estado),color:colorEstado(ins.estado)}}>
                          {ins.estado}
                        </span>
                      </td>
                      <td style={invStyles.td}>
                        <div style={{display:'flex',gap:'4px'}}>
                          <button onClick={()=>{const n=insumos.map(x=>x.id===ins.id?{...x,stock:x.stock+1,estado:x.stock+1>=x.min?'OK':x.estado}:x);setInsumos(n);lsSet('insumos_data',n);}} style={{...invStyles.btnEdit,fontSize:'10px',padding:'2px 6px'}}>+1</button>
                          <button onClick={()=>setModalSolic(true)} style={invStyles.btnEdit}>📋</button>
                        </div>
                      </td>
                    </tr>
                  ))}
                </tbody>
              </table>
            )}
          </div>
        ) : (
          /* Vista solicitudes */
          <div style={{flex:1,overflowY:'auto',padding:'12px 16px'}}>
            <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:'12px'}}>
              <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'15px',fontWeight:600,color:'var(--cream)'}}>Solicitudes de Compra</div>
              <button onClick={()=>setModalSolic(true)} style={{background:'var(--gold)',color:'var(--bg)',border:'none',borderRadius:'7px',padding:'6px 14px',fontWeight:600,fontSize:'11px',cursor:'pointer',fontFamily:'Inter,sans-serif'}}>+ Nueva solicitud</button>
            </div>
            <table style={{width:'100%',borderCollapse:'collapse'}}>
              <thead><tr>{['ID','Fecha','Insumo','Cantidad','Proveedor','Total','Estado',''].map(h=><th key={h} style={invStyles.th}>{h}</th>)}</tr></thead>
              <tbody>
                {solicitudes.map(s=>(
                  <tr key={s.id} style={invStyles.tr}>
                    <td style={invStyles.td}><span style={{fontFamily:'monospace',fontSize:'10px',color:'var(--cream-3)'}}>{s.id}</span></td>
                    <td style={invStyles.td}><span style={{fontSize:'10px',color:'var(--cream-3)'}}>{s.fecha}</span></td>
                    <td style={invStyles.td}><span style={{fontSize:'11px',color:'var(--cream)'}}>{s.insumo}</span></td>
                    <td style={invStyles.td}><span style={{fontSize:'11px',color:'var(--cream)'}}>{s.cantidad}</span></td>
                    <td style={invStyles.td}><span style={{fontSize:'10px',color:'var(--cream-3)'}}>{s.proveedor}</span></td>
                    <td style={invStyles.td}><span style={{color:'var(--gold)',fontWeight:600,fontSize:'11px'}}>{clp(s.total)}</span></td>
                    <td style={invStyles.td}>
                      <span style={{fontSize:'10px',fontWeight:600,padding:'2px 7px',borderRadius:'20px',
                        background:{Pendiente:'rgba(243,156,18,0.12)',Enviada:'rgba(41,128,185,0.12)',Recibida:'rgba(39,174,96,0.12)'}[s.estado]||'rgba(100,100,100,0.1)',
                        color:{Pendiente:'#f39c12',Enviada:'#2980b9',Recibida:'#27ae60'}[s.estado]||'#aaa'}}>
                        {s.estado}
                      </span>
                    </td>
                    <td style={invStyles.td}>
                      <button onClick={()=>{const map={Pendiente:'Enviada',Enviada:'Recibida',Recibida:'Recibida'};const n=solicitudes.map(x=>x.id===s.id?{...x,estado:map[x.estado]}:x);setSolicitudes(n);lsSet('insumos_solicitudes',n);}} style={invStyles.btnEdit}>Avanzar</button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          </div>
        )}
      </div>

      {/* Modal agregar insumo */}
      {modal && (
        <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,0.7)',zIndex:500,display:'flex',alignItems:'center',justifyContent:'center'}}>
          <div style={{background:'var(--bg-card)',border:'1px solid var(--border)',borderRadius:'14px',padding:'24px',width:'480px',maxHeight:'85vh',overflowY:'auto',boxShadow:'0 20px 60px rgba(0,0,0,0.7)'}}>
            <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'18px',fontWeight:600,color:'var(--cream)',marginBottom:'16px',display:'flex',justifyContent:'space-between'}}>
              Agregar Insumo
              <button onClick={()=>setModal(false)} style={{background:'transparent',border:'none',color:'var(--cream-3)',fontSize:'18px',cursor:'pointer'}}>✕</button>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'10px'}}>
              <div style={{gridColumn:'1/-1'}}>
                <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Nombre *</div>
                <input style={{background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'6px',padding:'6px 9px',color:'var(--cream)',fontSize:'12px',width:'100%',outline:'none'}}
                  value={formIns.nombre} onChange={e=>setFormIns(p=>({...p,nombre:e.target.value}))}/>
              </div>
              <div>
                <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Categoría</div>
                <select style={{background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'6px',padding:'6px 9px',color:'var(--cream)',fontSize:'12px',width:'100%',outline:'none'}}
                  value={formIns.cat} onChange={e=>setFormIns(p=>({...p,cat:e.target.value,sub:''}))}>
                  {CATEGORIAS.map(c=><option key={c.id} value={c.id}>{c.icon} {c.label}</option>)}
                </select>
              </div>
              <div>
                <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Sub-categoría</div>
                <select style={{background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'6px',padding:'6px 9px',color:'var(--cream)',fontSize:'12px',width:'100%',outline:'none'}}
                  value={formIns.sub} onChange={e=>setFormIns(p=>({...p,sub:e.target.value}))}>
                  {(CATEGORIAS.find(c=>c.id===formIns.cat)?.subs||[]).map(s=><option key={s}>{s}</option>)}
                </select>
              </div>
              {[{l:'Unidad',k:'unidad',ph:'unidad / metro / gramo'},{l:'Stock actual',k:'stock',ph:'0',type:'number'},{l:'Stock mínimo',k:'min',ph:'2',type:'number'},{l:'Precio unitario ($)',k:'precio',ph:'5000',type:'number'},{l:'Proveedor',k:'proveedor',ph:'Nombre proveedor'}].map(f=>(
                <div key={f.k} style={f.k==='proveedor'?{gridColumn:'1/-1'}:{}}>
                  <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>{f.l}</div>
                  <input type={f.type||'text'} style={{background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'6px',padding:'6px 9px',color:'var(--cream)',fontSize:'12px',width:'100%',outline:'none'}}
                    placeholder={f.ph} value={formIns[f.k]} onChange={e=>setFormIns(p=>({...p,[f.k]:e.target.value}))}/>
                </div>
              ))}
            </div>
            <div style={{display:'flex',gap:'8px',marginTop:'16px'}}>
              <button onClick={()=>setModal(false)} style={{flex:1,padding:'9px',background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'8px',color:'var(--cream-3)',cursor:'pointer',fontSize:'12px',fontFamily:'Inter,sans-serif'}}>Cancelar</button>
              <button onClick={guardarInsumo} style={{flex:2,padding:'9px',background:'var(--gold)',color:'var(--bg)',border:'none',borderRadius:'8px',fontWeight:600,cursor:'pointer',fontSize:'12px',fontFamily:'Inter,sans-serif'}}>✦ Guardar Insumo</button>
            </div>
          </div>
        </div>
      )}

      {/* Modal solicitud */}
      {modalSolic && (
        <div style={{position:'fixed',inset:0,background:'rgba(0,0,0,0.7)',zIndex:500,display:'flex',alignItems:'center',justifyContent:'center'}}>
          <div style={{background:'var(--bg-card)',border:'1px solid var(--border)',borderRadius:'14px',padding:'24px',width:'420px',boxShadow:'0 20px 60px rgba(0,0,0,0.7)'}}>
            <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'18px',fontWeight:600,color:'var(--cream)',marginBottom:'16px',display:'flex',justifyContent:'space-between'}}>
              Nueva Solicitud de Compra
              <button onClick={()=>setModalSolic(false)} style={{background:'transparent',border:'none',color:'var(--cream-3)',fontSize:'18px',cursor:'pointer'}}>✕</button>
            </div>
            <div style={{display:'flex',flexDirection:'column',gap:'10px'}}>
              {[{l:'Insumo *',k:'insumo',ph:'Nombre del insumo'},{l:'Cantidad',k:'cantidad',ph:'1',type:'number'},{l:'Proveedor',k:'proveedor',ph:'Nombre o contacto'},{l:'Observaciones',k:'nota',ph:'Detalles adicionales...'}].map(f=>(
                <div key={f.k}>
                  <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>{f.l}</div>
                  <input type={f.type||'text'} style={{background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'6px',padding:'6px 9px',color:'var(--cream)',fontSize:'12px',width:'100%',outline:'none'}}
                    placeholder={f.ph} value={formSolic[f.k]} onChange={e=>setFormSolic(p=>({...p,[f.k]:e.target.value}))}/>
                </div>
              ))}
            </div>
            <div style={{display:'flex',gap:'8px',marginTop:'16px'}}>
              <button onClick={()=>setModalSolic(false)} style={{flex:1,padding:'9px',background:'var(--surface)',border:'1px solid var(--border)',borderRadius:'8px',color:'var(--cream-3)',cursor:'pointer',fontSize:'12px',fontFamily:'Inter,sans-serif'}}>Cancelar</button>
              <button onClick={crearSolicitud} style={{flex:2,padding:'9px',background:'var(--gold)',color:'var(--bg)',border:'none',borderRadius:'8px',fontWeight:600,cursor:'pointer',fontSize:'12px',fontFamily:'Inter,sans-serif'}}>📋 Crear Solicitud</button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

Object.assign(window, { Insumos });