// ── EMAIL MODAL + ORDENES v2 — localStorage ───────────

// ── Email Modal (compartido) ──────────────────────────
function EmailModal({ orden, tipo, onClose }) {
  const [enviando,setEnviando]=React.useState(false);
  const [mejorado,setMejorado]=React.useState(false);
  const nombre=orden.clienteNombre||orden.cliente||orden.nombre||'Cliente';
  const [asunto,setAsunto]=React.useState(`Navarro Joyería · ${orden.tipo||'Comunicación'} ${orden.id||''}`);
  const [cuerpo,setCuerpo]=React.useState(`Estimado/a ${nombre},\n\nHemos recibido su encargo en Navarro Joyería.\n\nCódigo: ${orden.id||'—'}\nTrabajo: ${orden.tipo||orden.descripcion?.slice(0,60)||'—'}\nPresupuesto: ${clp(orden.valorPresupuesto||orden.presupuesto||0)}\nFecha entrega estimada: ${orden.fechaPromesa||orden.entrega||'A confirmar'}\n\nLe notificaremos cuando esté listo.\n\nGracias por confiar en nosotros.\n\n✦ Navarro Joyería · Valle de Colchagua`);

  async function mejorarConIA(){
    setEnviando(true);
    try {
      const resp=await window.claude.complete(`Mejora este email de joyería haciéndolo más cálido y elegante, manteniendo TODA la información exacta. Responde solo con el email mejorado:\n\n${cuerpo}`);
      setCuerpo(resp); setMejorado(true);
    } catch { alert('Sin conexión IA. Copia el email manualmente.'); }
    setEnviando(false);
  }

  return (
    <div style={posStyles.overlay} onClick={e=>e.target===e.currentTarget&&onClose()}>
      <div style={{...posStyles.modalBox,maxWidth:'480px'}}>
        <div style={{...posStyles.modalHeader,marginBottom:'13px'}}>
          <span style={{fontFamily:'Cormorant Garamond,serif',fontSize:'19px',fontWeight:600}}>✉️ Email al Cliente</span>
          <button onClick={onClose} style={posStyles.clearBtn}>✕</button>
        </div>
        <div style={{marginBottom:'8px'}}>
          <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Para</div>
          <input style={calcStyles.input} value={orden.emailCliente||orden.email||''} readOnly/>
        </div>
        <div style={{marginBottom:'8px'}}>
          <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Asunto</div>
          <input style={calcStyles.input} value={asunto} onChange={e=>setAsunto(e.target.value)}/>
        </div>
        <div style={{marginBottom:'10px'}}>
          <div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Mensaje</div>
          <textarea style={{...calcStyles.input,height:'150px',lineHeight:'1.6'}} value={cuerpo} onChange={e=>setCuerpo(e.target.value)}/>
        </div>
        {mejorado&&<div style={{background:'rgba(39,174,96,0.1)',border:'1px solid rgba(39,174,96,0.3)',borderRadius:'8px',padding:'8px',marginBottom:'8px',fontSize:'11px',color:'#27ae60'}}>✓ Email mejorado con IA</div>}
        <div style={{display:'flex',gap:'7px'}}>
          <button onClick={mejorarConIA} disabled={enviando} style={{...posStyles.cobrarBtn,flex:1,margin:0,fontSize:'12px',opacity:enviando?0.5:1}}>
            {enviando?'Generando…':'✨ Mejorar con IA'}
          </button>
          <button onClick={()=>{ navigator.clipboard?.writeText(`Para: ${orden.emailCliente||orden.email||''}\nAsunto: ${asunto}\n\n${cuerpo}`); alert('Copiado al portapapeles'); }}
            style={{...inv2Styles.btnSec,flex:1}}>📋 Copiar</button>
        </div>
        <div style={{marginTop:'8px',fontSize:'10px',color:'var(--cream-3)',textAlign:'center'}}>Copia y envía desde Gmail, Outlook u otro correo</div>
      </div>
    </div>
  );
}

function sendEmailOT(id,datos,tipo){
  const notifs=lsGet('email_pendientes',[]); notifs.push({id,tipo,datos,fecha:hoy(),enviado:false}); lsSet('email_pendientes',notifs);
}

// ── Órdenes de Trabajo ────────────────────────────────
function Ordenes({ tiendaId }) {
  const { useState, useEffect } = React;
  const [ordenes,    setOrdenes]   = useState(()=>lsGet('ordenes',[]));
  const [vista,      setVista]     = useState('kanban');
  const [filtroTipo, setFiltroTipo]= useState('Todos');
  const [filtroFuente,setFiltroFuente]=useState('Todos');
  const [selId,      setSel]       = useState(null);
  const [modalNuevo, setModalNuevo]= useState(false);
  const [emailModal, setEmailModal]= useState(null);
  const [nuevo, setNuevo]=useState({tipo:'Reparación',tiendaOrigen:tiendaId||'navarro',clienteNombre:'',emailCliente:'',telefonoCliente:'',descripcion:'',metal:'Plata 925',costoMateriales:0,manoObra:0,margenOT:40,valorPresupuesto:0,abono:0,artesano:TECNICOS[0],fechaPromesa:'',urgente:false,notas:''});

  const ESTADOS=['Recibido','En proceso','Listo','Entregado'];
  const TIPOS=['Reparación','Hechura','Encargo','Grabado Láser','Diseño Joya','Argollas Matrimonio','Otro'];
  const ICON_TIPO={'Reparación':'🔧','Hechura':'⚒️','Encargo':'📋','Grabado Láser':'✨','Diseño Joya':'✏️','Argollas Matrimonio':'💍','Otro':'💼'};
  const COLOR_EST={'Recibido':'#2980b9','En proceso':'#f39c12','Listo':'#27ae60','Entregado':'var(--cream-3)'};
  const colorTipo=t=>({'Reparación':'#2980b9','Hechura':'#8e44ad','Grabado Láser':'#16a085','Argollas Matrimonio':'#c9a84c','Diseño Joya':'#d35400'}[t]||'var(--cream-3)');

  function getAllWorks() {
    const ots = lsGet('ordenes',[]).map(o=>({...o,_fuente:'OT'}));
    const argollas = lsGet('argollas_cotiz',[]).map(a=>({
      id:a.id, _fuente:'Argollas', tipo:'Argollas Matrimonio',
      clienteNombre:a.cliente, telefonoCliente:a.telefono||a.clienteTelefono||'',
      descripcion:`${a.estilo} · ${a.metal} · ${a.ancho}`,
      valorPresupuesto:a.precio, abono:a.senal||0, artesano:a.tecnico||'',
      estado:a.estado==='En producción'?'En proceso':a.estado==='Presupuesto'?'Recibido':a.estado||'Recibido',
      fechaIngreso:a.fecha||hoy(), fechaPromesa:a.fechaEntrega||'', urgente:false,
      tiendaOrigen:a.tiendaOrigen||tiendaId||'navarro',
    }));
    const hechuras = lsGet('hechuras_data',[]).map(h=>({
      id:h.id, _fuente:'Hechuras', tipo:'Hechura',
      clienteNombre:h.cliente, telefonoCliente:h.telefono||'',
      descripcion:`${h.tipo}: ${(h.descripcion||'').slice(0,60)}`,
      valorPresupuesto:h.presupuesto, abono:h.senal||0, artesano:h.artesano||h.tecnico||'',
      estado:h.estado||'Recibido', fechaIngreso:h.ingreso||hoy(), fechaPromesa:h.entrega||'',
      urgente:h.urgente||false, tiendaOrigen:tiendaId||'navarro',
    }));
    
    const pedidosCat = lsGet('pedidos_catalogo',[]).map(pc=>({
      id:pc.id, _fuente:'Pedidos',
      tipo:'Encargo',
      clienteNombre:pc.cliente, telefonoCliente:pc.telefono||'',
      descripcion:`Pedido catálogo: ${pc.tipo}${pc.metal?' '+pc.metal:''} — ${(pc.descripcion||'').slice(0,60)}`,
      valorPresupuesto:pc.presupuesto||0, abono:0, artesano:'',
      estado:pc.estado==='Buscando'?'Recibido':pc.estado==='Encontrado'||pc.estado==='Presentado al cliente'?'En proceso':pc.estado==='Comprado'?'Listo':pc.estado==='Vendido'?'Entregado':pc.estado||'Recibido',
      fechaIngreso:pc.fechaIngreso||hoy(), fechaPromesa:'',
      urgente:false, tiendaOrigen:tiendaId||'navarro',
    }));
    const grabados = lsGet('grabados',[]).map(g=>({
      id:g.id, _fuente:'Grabado', tipo:'Grabado Láser',
      clienteNombre:g.cliente, telefonoCliente:'',
      descripcion:`"${g.texto}" ${g.pieza} ${g.material}`,
      valorPresupuesto:g.precio, abono:0, artesano:'',
      estado:g.estado||'Recibido', fechaIngreso:g.fecha||hoy(), fechaPromesa:g.entrega||'',
      urgente:false, tiendaOrigen:tiendaId||'navarro',
    }));
    return [...ots,...argollas,...hechuras,...grabados,...pedidosCat];
  }

  const [allWorks, setAllWorks] = useState(getAllWorks);

  function cambiarEstado(id, fuente, nuevoEstado) {
    if (fuente==='OT') {
      const lista=ordenes.map(o=>o.id===id?{...o,estado:nuevoEstado}:o);
      setOrdenes(lista); lsSet('ordenes',lista);
    } else if (fuente==='Argollas') {
      const lista=lsGet('argollas_cotiz',[]).map(a=>a.id===id?{...a,estado:nuevoEstado==='En proceso'?'En producción':nuevoEstado}:a);
      lsSet('argollas_cotiz',lista);
    } else if (fuente==='Hechuras') {
      const lista=lsGet('hechuras_data',[]).map(h=>h.id===id?{...h,estado:nuevoEstado}:h);
      lsSet('hechuras_data',lista);
    } else if (fuente==='Grabado') {
      const lista=lsGet('grabados',[]).map(g=>g.id===id?{...g,estado:nuevoEstado}:g);
      lsSet('grabados',lista);
    }
    setAllWorks(getAllWorks());
  }

  function guardar(lista){ setOrdenes(lista); lsSet('ordenes',lista); setAllWorks(getAllWorks()); }

  function crearOrden(){
    const id=`OT-${new Date().getFullYear()}-${String(ordenes.length+1).padStart(3,'0')}`;
    const lista=[...ordenes,{...nuevo,id,estado:'Recibido',fechaIngreso:hoy(),_fuente:'OT'}];
    guardar(lista); setSel(id); setModalNuevo(false);
    if(nuevo.emailCliente) sendEmailOT(id,{...nuevo,id},'ot_recibida');
    setNuevo({tipo:'Reparación',tiendaOrigen:tiendaId||'navarro',clienteNombre:'',emailCliente:'',telefonoCliente:'',descripcion:'',metal:'Plata 925',costoMateriales:0,manoObra:0,margenOT:40,valorPresupuesto:0,abono:0,artesano:TECNICOS[0],fechaPromesa:'',urgente:false,notas:''});
  }

  function avanzarEstado(id,fuente){
    const work=allWorks.find(w=>w.id===id);
    if(!work) return;
    const idx=ESTADOS.indexOf(work.estado);
    const sig=ESTADOS[Math.min(idx+1,ESTADOS.length-1)];
    cambiarEstado(id,fuente||work._fuente,sig);
  }

  const filtrados=allWorks.filter(o=>{
    const matchTienda=!tiendaId||o.tiendaOrigen===tiendaId||o._fuente!=='OT';
    const matchTipo=filtroTipo==='Todos'||o.tipo===filtroTipo;
    const matchFuente=filtroFuente==='Todos'||o._fuente===filtroFuente;
    return matchTienda&&matchTipo&&matchFuente;
  });
  const selOrden=ordenes.find(o=>o.id===selId);

  return (
    <div style={{display:'flex',height:'100%',overflow:'hidden'}}>
      <div style={{flex:1,display:'flex',flexDirection:'column',overflow:'hidden'}}>
        {/* Toolbar */}
        <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',padding:'8px 11px',borderBottom:'1px solid var(--border)',gap:'6px',flexWrap:'wrap',flexShrink:0}}>
          <div style={{display:'flex',gap:'4px',flexWrap:'wrap'}}>
            {['Todos',...TIPOS].map(t=>(
              <button key={t} onClick={()=>setFiltroTipo(t)}
                style={{padding:'4px 8px',borderRadius:'20px',border:'1px solid var(--border)',background:filtroTipo===t?'var(--surface-2)':'transparent',color:filtroTipo===t?'var(--cream)':'var(--cream-3)',cursor:'pointer',fontSize:'10px',fontFamily:'Inter,sans-serif',whiteSpace:'nowrap'}}>
                {t==='Todos'?t:`${ICON_TIPO[t]||'💼'} ${t}`}
              </button>
            ))}
          </div>
          <div style={{display:'flex',gap:'6px',flexShrink:0}}>
            <div style={{display:'flex',border:'1px solid var(--border)',borderRadius:'6px',overflow:'hidden'}}>
              <button onClick={()=>setVista('kanban')} style={{padding:'4px 9px',background:vista==='kanban'?'var(--surface-2)':'transparent',border:'none',color:vista==='kanban'?'var(--cream)':'var(--cream-3)',cursor:'pointer',fontSize:'10px'}}>⊞</button>
              <button onClick={()=>setVista('lista')}  style={{padding:'4px 9px',background:vista==='lista'?'var(--surface-2)':'transparent',border:'none',color:vista==='lista'?'var(--cream)':'var(--cream-3)',cursor:'pointer',fontSize:'10px'}}>≡</button>
            </div>
            <button onClick={()=>setModalNuevo(true)} style={inv2Styles.btnGold}>+ Nueva OT</button>
          </div>
        </div>

        {/* Stats */}
        <div style={{display:'flex',gap:'1px',borderBottom:'1px solid var(--border)',background:'var(--border)',flexShrink:0}}>
          {ESTADOS.map(e=>{
            const cnt=filtrados.filter(o=>o.estado===e).length;
            return <div key={e} style={{flex:1,display:'flex',flexDirection:'column',alignItems:'center',padding:'7px',background:'var(--bg-card)',borderTop:`2px solid ${COLOR_EST[e]}`}}>
              <div style={{color:COLOR_EST[e],fontWeight:700,fontSize:'15px'}}>{cnt}</div>
              <div style={{color:'var(--cream-3)',fontSize:'9px'}}>{e}</div>
            </div>;
          })}
          <div style={{flex:1.5,display:'flex',flexDirection:'column',alignItems:'center',padding:'7px',background:'var(--bg-card)',borderTop:'2px solid var(--gold)'}}>
            <div style={{color:'var(--gold)',fontWeight:700,fontSize:'12px'}}>{clp(filtrados.filter(o=>o.estado!=='Entregado').reduce((s,o)=>s+(o.valorPresupuesto||0),0))}</div>
            <div style={{color:'var(--cream-3)',fontSize:'9px'}}>En taller</div>
          </div>
        </div>

        {/* Kanban */}
        {vista==='kanban'&&(
          <div style={{flex:1,display:'flex',overflow:'hidden',gap:'1px',background:'var(--border)'}}>
            {ESTADOS.map(estado=>{
              const items=filtrados.filter(o=>o.estado===estado);
              return (
                <div key={estado} style={{flex:1,display:'flex',flexDirection:'column',background:'var(--bg)',minWidth:'170px'}}>
                  <div style={{display:'flex',justifyContent:'space-between',padding:'7px 9px',borderBottom:`2px solid ${COLOR_EST[estado]}`,flexShrink:0}}>
                    <span style={{color:COLOR_EST[estado],fontWeight:600,fontSize:'10px'}}>{estado}</span>
                    <span style={{background:COLOR_EST[estado]+'22',color:COLOR_EST[estado],padding:'1px 6px',borderRadius:'20px',fontSize:'9px',fontWeight:700}}>{items.length}</span>
                  </div>
                  <div style={{flex:1,overflowY:'auto',padding:'6px',display:'flex',flexDirection:'column',gap:'6px'}}>
                    {items.length===0&&<div style={{textAlign:'center',color:'var(--cream-3)',fontSize:'10px',padding:'14px'}}>Sin órdenes</div>}
                    {items.map(o=>(
                      <div key={o.id} onClick={()=>setSel(o.id===selId?null:o.id)}
                        style={{background:'var(--bg-card)',border:`1px solid ${selId===o.id?'var(--gold)':'var(--border)'}`,borderRadius:'8px',padding:'9px',cursor:'pointer',transition:'all 0.1s'}}>
                        <div style={{display:'flex',justifyContent:'space-between',marginBottom:'4px'}}>
                          <span style={{fontSize:'9px',color:colorTipo(o.tipo),fontWeight:600}}>{ICON_TIPO[o.tipo]||'💼'} {o.tipo}</span>
                          {o.urgente&&<span style={{fontSize:'8px',color:'#c0392b',fontWeight:700}}>🔴</span>}
                        </div>
                        <div style={{color:'var(--cream)',fontSize:'11px',fontWeight:500,marginBottom:'2px'}}>{o.clienteNombre}</div>
                        <div style={{color:'var(--cream-3)',fontSize:'9px',overflow:'hidden',textOverflow:'ellipsis',whiteSpace:'nowrap',marginBottom:'5px'}}>{o.descripcion?.slice(0,45)}</div>
                        <div style={{display:'flex',justifyContent:'space-between',fontSize:'9px'}}>
                          <span style={{color:'var(--cream-3)',fontFamily:'monospace'}}>{o.id}</span>
                          <span style={{color:'var(--gold)',fontWeight:600}}>{clp(o.valorPresupuesto)}</span>
                        </div>
                      </div>
                    ))}
                  </div>
                </div>
              );
            })}
          </div>
        )}

        {/* Lista */}
        {vista==='lista'&&(
          <div style={{flex:1,overflowY:'auto',padding:'0 13px 13px'}}>
            {filtrados.length===0
              ? <div style={{textAlign:'center',padding:'40px',color:'var(--cream-3)'}}>
                  <div style={{fontSize:'30px',marginBottom:'8px'}}>🔧</div>
                  Sin órdenes. Crea la primera con "+ Nueva OT"
                </div>
              : <table style={{width:'100%',borderCollapse:'collapse',marginTop:'8px'}}>
                  <thead><tr>{['ID','Tipo','Cliente','Presupuesto','Estado','Entrega',''].map(h=><th key={h} style={inv2Styles.th}>{h}</th>)}</tr></thead>
                  <tbody>
                    {filtrados.map(o=>(
                      <tr key={o.id} onClick={()=>setSel(o.id===selId?null:o.id)} style={{...inv2Styles.tr,cursor:'pointer',...(selId===o.id?{background:'rgba(201,168,76,0.06)'}:{})}}>
                        <td style={inv2Styles.td}><span style={{fontFamily:'monospace',fontSize:'9px',color:'var(--cream-3)'}}>{o.id}</span></td>
                        <td style={inv2Styles.td}><span style={{color:colorTipo(o.tipo),fontSize:'11px'}}>{ICON_TIPO[o.tipo]||'💼'} {o.tipo}</span></td>
                        <td style={inv2Styles.td}><span style={{color:'var(--cream)',fontSize:'12px'}}>{o.clienteNombre}</span></td>
                        <td style={inv2Styles.td}><span style={{color:'var(--gold)',fontWeight:600,fontSize:'12px'}}>{clp(o.valorPresupuesto)}</span></td>
                        <td style={inv2Styles.td}><span style={estadoBadge(o.estado)}>{o.estado}</span></td>
                        <td style={inv2Styles.td}><span style={{color:'var(--cream-3)',fontSize:'11px'}}>{o.fechaPromesa||'—'}</span></td>
                        <td style={inv2Styles.td}>{o.estado!=='Entregado'&&<button onClick={e=>{e.stopPropagation();avanzarEstado(o.id, o._fuente);}} style={{...inv2Styles.btnSec,fontSize:'9px',padding:'3px 7px'}}>→</button>}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>
            }
          </div>
        )}
      </div>

      {/* Detalle */}
      {selOrden&&(
        <div style={{width:'280px',borderLeft:'1px solid var(--border)',padding:'15px',overflowY:'auto',flexShrink:0}}>
          <div style={{display:'flex',justifyContent:'space-between',alignItems:'center',marginBottom:'12px'}}>
            <div style={{fontFamily:'Cormorant Garamond,serif',fontSize:'17px',fontWeight:600}}>{ICON_TIPO[selOrden.tipo]} {selOrden.tipo}</div>
            <button onClick={()=>setSel(null)} style={{background:'none',border:'none',color:'var(--cream-3)',cursor:'pointer'}}>✕</button>
          </div>
          <div style={{fontFamily:'monospace',fontSize:'10px',color:'var(--cream-3)',marginBottom:'6px'}}>{selOrden.id}</div>
          <div style={{marginBottom:'10px',display:'flex',gap:'5px',flexWrap:'wrap'}}>
            <span style={estadoBadge(selOrden.estado)}>{selOrden.estado}</span>
            {selOrden.urgente&&<span style={{...estadoBadge('Cancelado'),background:'rgba(192,57,43,0.15)',color:'#c0392b'}}>URGENTE</span>}
          </div>
          {[{l:'Cliente',v:selOrden.clienteNombre},{l:'Email',v:selOrden.emailCliente},{l:'Teléfono',v:selOrden.telefonoCliente},{l:'Metal',v:selOrden.metal},{l:'Artesano',v:selOrden.tecnico},{l:'Ingreso',v:selOrden.fechaIngreso},{l:'Entrega',v:selOrden.fechaPromesa},{l:'Presupuesto',v:clp(selOrden.valorPresupuesto)},{l:'Abono',v:clp(selOrden.senal)},{l:'Saldo',v:clp(selOrden.valorPresupuesto-selOrden.senal)}].filter(f=>f.v).map(f=>(
            <div key={f.l} style={{display:'flex',justifyContent:'space-between',padding:'5px 0',borderBottom:'1px solid var(--border)',fontSize:'11px'}}>
              <span style={{color:'var(--cream-3)'}}>{f.l}</span>
              <span style={{color:'var(--cream)',fontWeight:f.l==='Presupuesto'?700:400}}>{f.v}</span>
            </div>
          ))}
          <div style={{background:'var(--surface)',borderRadius:'7px',padding:'9px',marginTop:'10px',fontSize:'11px',color:'var(--cream-2)',lineHeight:'1.5',borderLeft:'2px solid var(--gold)'}}>{selOrden.descripcion}</div>
          {selOrden.notas&&<div style={{background:'rgba(201,168,76,0.05)',borderRadius:'7px',padding:'7px',marginTop:'7px',fontSize:'10px',color:'var(--cream-3)'}}>📝 {selOrden.notas}</div>}
          <div style={{display:'flex',gap:'5px',marginTop:'12px',flexWrap:'wrap'}}>
            {selOrden.estado!=='Entregado'&&selOrden.estado!=='Cancelado'&&(
              <button onClick={()=>avanzarEstado(selOrden.id)} style={{...posStyles.cobrarBtn,flex:1,margin:0,fontSize:'11px'}}>
                → {ESTADOS[ESTADOS.indexOf(selOrden.estado)+1]}
              </button>
            )}
            {selOrden.emailCliente&&<button onClick={()=>setEmailModal(selOrden)} style={{...inv2Styles.btnSec,fontSize:'11px'}}>✉️</button>}
          </div>
        </div>
      )}

      {/* Modal nueva OT */}
      {modalNuevo&&(
        <div style={posStyles.overlay} onClick={e=>e.target===e.currentTarget&&setModalNuevo(false)}>
          <div style={{...posStyles.modalBox,maxWidth:'490px'}}>
            <div style={{...posStyles.modalHeader,marginBottom:'13px'}}>
              <span style={{fontFamily:'Cormorant Garamond,serif',fontSize:'20px',fontWeight:600}}>Nueva Orden de Trabajo</span>
              <button onClick={()=>setModalNuevo(false)} style={posStyles.clearBtn}>✕</button>
            </div>
            <div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:'8px'}}>
              <div><div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Tipo *</div>
                <select style={{...invStyles2.select,width:'100%'}} value={nuevo.tipo} onChange={e=>setNuevo(n=>({...n,tipo:e.target.value}))}>
                  {TIPOS.map(t=><option key={t}>{t}</option>)}</select></div>
              <div style={{gridColumn:'1/-1'}}><div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Cliente</div>
                <ClienteSearch value={nuevo.clienteNombre} placeholder="Nombre o RUT del cliente…"
                  onChange={c=>setNuevo(n=>({...n,clienteNombre:c.nombre,telefonoCliente:c.whatsapp||c.telefono||n.telefonoCliente,emailCliente:c.email||n.emailCliente}))}/></div>
              <div><div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Email (para notificar)</div>
                <input type="email" style={calcStyles.input} placeholder="cliente@email.cl" value={nuevo.emailCliente} onChange={e=>setNuevo(n=>({...n,emailCliente:e.target.value}))}/></div>
              <div><div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Teléfono</div>
                <input style={calcStyles.input} placeholder="+56 9 …" value={nuevo.telefonoCliente} onChange={e=>setNuevo(n=>({...n,telefonoCliente:e.target.value}))}/></div>
              <div style={{gridColumn:'1/-1'}}><div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Descripción *</div>
                <textarea style={{...calcStyles.input,height:'60px'}} placeholder="Describe el trabajo…" value={nuevo.descripcion} onChange={e=>setNuevo(n=>({...n,descripcion:e.target.value}))}/></div>
              <div><div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Metal</div>
                <select style={{...invStyles2.select,width:'100%'}} value={nuevo.metal} onChange={e=>setNuevo(n=>({...n,metal:e.target.value}))}>
                  {['Plata 925','Oro 18K','Oro 14K','Cobre','Latón','Platino','Mixto'].map(m=><option key={m}>{m}</option>)}</select></div>
              <div><div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Artesano</div>
                <select style={{...invStyles2.select,width:'100%'}} value={nuevo.artesano||nuevo.tecnico||TECNICOS[0]} onChange={e=>setNuevo(n=>({...n,artesano:e.target.value,tecnico:e.target.value}))}>
                  {TECNICOS.map(t=><option key={t}>{t}</option>)}</select></div>
              {/* Desglose de costos */}
              <div style={{gridColumn:'1/-1',background:'var(--surface)',borderRadius:'8px',padding:'12px',border:'1px solid var(--border)'}}>
                <div style={{fontSize:'11px',color:'var(--gold)',fontWeight:600,marginBottom:'8px'}}>Desglose de costos</div>
                <div style={{display:'grid',gridTemplateColumns:'1fr 1fr 1fr',gap:'8px',marginBottom:'8px'}}>
                  <div><div style={{fontSize:'10px',color:'var(--cream-3)',marginBottom:'3px'}}>Costo materiales</div>
                    <input type="number" step="1000" style={calcStyles.input} placeholder="0"
                      value={nuevo.costoMateriales||''} onChange={e=>{ const v=parseInt(e.target.value)||0; const base=v+(nuevo.manoObra||0); const total=Math.round(base*(1+(nuevo.margenOT||40)/100)); setNuevo(n=>({...n,costoMateriales:v,valorPresupuesto:total})); }}/></div>
                  <div><div style={{fontSize:'10px',color:'var(--cream-3)',marginBottom:'3px'}}>Mano de obra</div>
                    <input type="number" step="1000" style={calcStyles.input} placeholder="0"
                      value={nuevo.manoObra||''} onChange={e=>{ const v=parseInt(e.target.value)||0; const base=(nuevo.costoMateriales||0)+v; const total=Math.round(base*(1+(nuevo.margenOT||40)/100)); setNuevo(n=>({...n,manoObra:v,valorPresupuesto:total})); }}/></div>
                  <div><div style={{fontSize:'10px',color:'var(--cream-3)',marginBottom:'3px'}}>Margen %</div>
                    <input type="number" step="5" min="0" max="300" style={calcStyles.input} placeholder="40"
                      value={nuevo.margenOT||''} onChange={e=>{ const v=parseInt(e.target.value)||0; const base=(nuevo.costoMateriales||0)+(nuevo.manoObra||0); const total=Math.round(base*(1+v/100)); setNuevo(n=>({...n,margenOT:v,valorPresupuesto:total})); }}/></div>
                </div>
                <div style={{display:'flex',justifyContent:'space-between',alignItems:'center'}}>
                  <span style={{fontSize:'11px',color:'var(--cream-3)'}}>Total calculado (editable)</span>
                  <input type="number" style={{...calcStyles.input,width:'140px',color:'var(--gold)',fontWeight:700,fontSize:'16px',textAlign:'right'}}
                    value={nuevo.valorPresupuesto||''} onChange={e=>setNuevo(n=>({...n,valorPresupuesto:parseInt(e.target.value)||0}))}/>
                </div>
              </div>
              <div><div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Abono CLP</div>
                <input type="number" style={calcStyles.input} value={nuevo.abono||0} onChange={e=>setNuevo(n=>({...n,abono:parseInt(e.target.value)||0}))}/></div>
              <div><div style={{fontSize:'11px',color:'var(--cream-3)',marginBottom:'3px'}}>Fecha promesa</div>
                <input type="date" style={calcStyles.input} value={nuevo.fechaPromesa} onChange={e=>setNuevo(n=>({...n,fechaPromesa:e.target.value}))}/></div>
              <div style={{display:'flex',alignItems:'center',gap:'7px',paddingTop:'12px'}}>
                <input type="checkbox" checked={nuevo.urgente} onChange={e=>setNuevo(n=>({...n,urgente:e.target.checked}))} style={{accentColor:'#c0392b',width:'14px',height:'14px'}}/>
                <label style={{color:'#c0392b',fontSize:'12px',fontWeight:600,cursor:'pointer'}}>URGENTE</label>
              </div>
            </div>
            <button onClick={crearOrden} style={{...posStyles.cobrarBtn,width:'100%',marginTop:'13px'}}>✦ Crear Orden de Trabajo</button>
          </div>
        </div>
      )}

      {emailModal&&<EmailModal orden={emailModal} tipo="ot" onClose={()=>setEmailModal(null)}/>}
    </div>
  );
}

Object.assign(window, { EmailModal, sendEmailOT, Ordenes });