// ─────────────────────────────────────────
//  APP CLIENTE
// ─────────────────────────────────────────
function ClienteApp({session,onSalir,dm,tema,setTema,toggleDm}){
  const C=tema||THEMES.facebook;
  const{usuario,pass,negocio}=session;
  const empresaId=session.empresaId||"";
  const[products,setProducts]=useState(()=>{try{const s=localStorage.getItem(`inv_${usuario}`);return s?JSON.parse(s):INIT_PRODS;}catch{return INIT_PRODS;}});
  const[ventas,setVentas]=useState(()=>{try{const s=localStorage.getItem(`vnt_${usuario}`);return s?JSON.parse(s):[];}catch{return[];}});
  const[tab,setTab]=useState("inventario");
  const[search,setSearch]=useState("");
  const[catFil,setCatFil]=useState("Todas");
  const[toast,setToast]=useState(null);
  const[sheetOk,setSheetOk]=useState(false);
  const[needSync,setNeedSync]=useState(false);
  const[syncing,setSyncing]=useState(false);
  const[guardando,setGuardando]=useState(false);
  const[colaCountC,setColaCountC]=useState(0);
  const[online,setOnline]=useState(()=>window.NexusOnline!==undefined?window.NexusOnline:navigator.onLine);
  const[ventasHoy,setVentasHoy]=useState({});
  const[showThemePicker,setShowThemePicker]=useState(false);
  const[showPerfil,setShowPerfil]=useState(false);
  const[showPlanModal,setShowPlanModal]=useState(false);
  const[showAdminPass,setShowAdminPass]=useState(false);
  const[showNewPass,setShowNewPass]=useState(false);
  const[comprasHoy,setComprasHoy]=useState({});
  const[delId,setDelId]=useState(null);
  const[modal,setModal]=useState(false);
  const[form,setForm]=useState({});
  const[editId,setEditId]=useState(null);
  const[refEdited,setRefEdited]=useState(false);
  const[minEdited,setMinEdited]=useState(false);
  const CAT_PREFIX={"Aguardiente":"AGU","Ron":"RON","Whisky":"WHI","Vodka":"VOD","Tequila":"TEQ","Gin":"GIN","Vino":"VIN","Champán":"CHA","Cerveza":"CER","Bebida Hidratante":"HID","Sin alcohol":"SIN","Refresco":"REF","Cigarrillos":"CIG"};
  const generarSKU=(categoria,prods)=>{
    const prefix=CAT_PREFIX[categoria]||(categoria||"PRO").normalize("NFD").replace(/[\u0300-\u036f]/g,"").replace(/[^a-zA-Z]/g,"").slice(0,3).toUpperCase();
    const regex=new RegExp(`^${prefix}-(\\d+)$`);
    const nums=prods.map(p=>p.referencia?.match(regex)).filter(Boolean).map(m=>parseInt(m[1]));
    const next=nums.length>0?Math.max(...nums)+1:1;
    return `${prefix}-${String(next).padStart(3,"0")}`;
  };

  const toast2=(msg,type="ok")=>{setToast({msg,type});setTimeout(()=>setToast(null),2500);};
  const inp={width:"100%",background:C.inp,border:`1px solid ${C.border}`,borderRadius:8,color:C.text,padding:"10px 14px",fontSize:13,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",letterSpacing:.2,boxShadow:"inset 0 1px 2px rgba(0,0,0,.05)"};
  const btnS=(col,bg,brd)=>({background:bg,color:col,border:`1px solid ${brd}`,padding:"9px 20px",borderRadius:8,fontSize:13,fontWeight:600,cursor:"pointer",letterSpacing:.3});
  const thS={padding:"11px 12px",textAlign:"left",fontSize:13,textTransform:"uppercase",letterSpacing:1.2,color:"#f0a500",fontWeight:700,whiteSpace:"nowrap",background:dm?"#071020":"#1e3a5f",borderBottom:dm?"2px solid #1a3050":"2px solid #f0a500",position:"sticky",top:0,zIndex:10};

  // Computed
  const filtered=useMemo(()=>products.filter(p=>(catFil==="Todas"||p.categoria===catFil)&&p.nombre.toLowerCase().includes(search.toLowerCase())).sort((a,b)=>a.nombre.localeCompare(b.nombre,"es")),[products,catFil,search]);
  const totalStock=useMemo(()=>products.reduce((a,p)=>a+p.stock,0),[products]);
  const valorCompra=useMemo(()=>products.reduce((a,p)=>a+(p.compra/(p.cajUnid||1))*p.stock,0),[products]);
  const valorVenta=useMemo(()=>products.reduce((a,p)=>a+p.ventaUnit*p.stock,0),[products]);
  const ganancia=valorVenta-valorCompra;
  const bajoStock=useMemo(()=>products.filter(p=>p.stock<p.stockMin&&p.stockMin>0),[products]);
  const itemsResurtir=useMemo(()=>products.filter(p=>p.stock<p.stockMin&&p.stockMin>0).map(p=>{const faltante=p.stockMin-p.stock;const cajasNeed=p.cajUnid>0?Math.ceil(faltante/p.cajUnid):faltante;return{...p,faltante,cajasNeed,costo:cajasNeed*p.compra};}),[products]);
  const costoResurtir=useMemo(()=>itemsResurtir.reduce((a,p)=>a+p.costo,0),[itemsResurtir]);
  const porCat=useMemo(()=>CATS.map(cat=>{const ps=products.filter(p=>p.categoria===cat);if(!ps.length)return null;const vc=ps.reduce((a,p)=>a+(p.compra/(p.cajUnid||1))*p.stock,0),vv=ps.reduce((a,p)=>a+p.ventaUnit*p.stock,0);return{cat,n:ps.length,vc,vv,gan:vv-vc};}).filter(Boolean),[products]);
  // Extraer solo la fecha (sin hora) para agrupar — soporta "DD/MM/YYYY HH:MM:SS" y "YYYY-MM-DD"
  const extraerFecha=(f)=>{if(!f)return"";const s=String(f).split(" ")[0];return s;};
  const histAgr=useMemo(()=>{const g={};ventas.forEach(v=>{const fd=extraerFecha(v.fecha);if(!fd)return;if(!g[fd])g[fd]={fecha:fd,items:[],ing:0,cos:0,gan:0};g[fd].items.push(v);g[fd].ing+=(v.ingreso||0);g[fd].cos+=(v.costo||0);g[fd].gan+=(v.ganancia||0);});return Object.values(g).sort((a,b)=>b.fecha.localeCompare(a.fecha));},[ventas]);
  const ranking=useMemo(()=>{const r={};ventas.forEach(v=>{if(!r[v.nombre])r[v.nombre]={nombre:v.nombre,unidades:0,ing:0,gan:0};r[v.nombre].unidades+=(v.unidadesDesc||0);r[v.nombre].ing+=(v.ingreso||0);r[v.nombre].gan+=(v.ganancia||0);});return Object.values(r).sort((a,b)=>b.unidades-a.unidades).slice(0,8);},[ventas]);
  const semanales=useMemo(()=>{const s={};ventas.forEach(v=>{const k=`Sem ${semNum(v.fecha)}`;if(!s[k])s[k]={l:k,v:0};s[k].v+=(v.ingreso||0);});return Object.values(s).slice(-8);},[ventas]);
  const[periodoFil,setPeriodoFil]=useState("todo");
  const[retiros,setRetiros]=useState([]);
  const[retiroMonto,setRetiroMonto]=useState("");
  const[retiroObs,setRetiroObs]=useState("");
  const[cargandoRetiros,setCargandoRetiros]=useState(false);
  const cargarRetiros=()=>{
    if(!empresaId)return;
    setCargandoRetiros(true);
    NexusFirebase.getRetiros(empresaId).then(r=>setRetiros(r)).catch(()=>{}).finally(()=>setCargandoRetiros(false));
  };
  const gananciaTotal=useMemo(()=>ventas.filter(it=>it.tipoVenta!=="cierre"&&it.tipoVenta!=="apertura").reduce((a,v)=>a+(v.ganancia||(( v.ingreso||0)-(v.costo||0))),0),[ventas]);
  const totalRetirado=useMemo(()=>retiros.reduce((a,r)=>a+(r.monto||0),0),[retiros]);
  const saldoDisponible=gananciaTotal-totalRetirado;
  const parseFechaHist=(f)=>{if(!f)return null;const s=String(f);if(s.includes("/")){const[dd,mm,yyyy]=s.split("/");return new Date(parseInt(yyyy),parseInt(mm)-1,parseInt(dd));}return new Date(s);};
  const histAgrFil=useMemo(()=>{if(periodoFil==="todo")return histAgr;const ahora=new Date();return histAgr.filter(dia=>{const d=parseFechaHist(dia.fecha);if(!d)return false;const diff=(ahora-d)/(1000*60*60*24);if(periodoFil==="hoy")return diff<1;if(periodoFil==="semana")return diff<7;if(periodoFil==="mes")return diff<30;return true;});},[histAgr,periodoFil]);
  const cierresHist=useMemo(()=>ventas.filter(v=>v.tipoVenta==="cierre"||v.nombre==="Cierre de caja").sort((a,b)=>String(b.fecha).localeCompare(String(a.fecha))),[ventas]);
  const anulacionesHist=useMemo(()=>ventas.filter(v=>v.tipoVenta==="anulado").sort((a,b)=>String(b.fecha).localeCompare(String(a.fecha))),[ventas]);
  const statsFilPeriodo=useMemo(()=>{let ing=0,cos=0,gan=0,dias=0;histAgrFil.forEach(d=>{const its=d.items.filter(it=>it.tipoVenta!=="cierre"&&it.tipoVenta!=="apertura");if(!its.length)return;dias++;its.forEach(it=>{ing+=(it.ingreso||0);cos+=(it.costo||0);gan+=(it.ganancia||0);});});return{ing,cos,gan,dias};},[histAgrFil]);
  const calcVH=useMemo(()=>{let ing=0,cos=0;Object.entries(ventasHoy).forEach(([id,v])=>{const p=products.find(x=>x.id===parseInt(id));if(!p)return;const c=parseInt(v.cantidad)||0;if(!c)return;const ec=v.tipo==="caja";const pv=ec?(p.ventaCaja||p.ventaUnit*p.cajUnid):p.ventaUnit;const pc=ec?p.compra*p.cajUnid:p.compra;ing+=pv*c;cos+=pc*c;});return{ing,cos,gan:ing-cos};},[ventasHoy,products]);
  const calcCH=useMemo(()=>{let total=0,items=0;Object.entries(comprasHoy).forEach(([id,v])=>{const p=products.find(x=>x.id===parseInt(id));if(!p)return;const c=parseInt(v.cantidad)||0;if(!c)return;const ec=v.tipo==="caja";const costoUnit=p.cajUnid>0?p.compra/p.cajUnid:p.compra;total+=ec?p.compra*c:costoUnit*c;items++;});return{total,items};},[comprasHoy,products]);

  // Drive
  // ── Imágenes: URL remota (ImgBB) = visible en todos los dispositivos ──
  const IMGBB_KEY="2cbcc4b7e51f45e43a6af31f2c8e4e61";
  const IMG_KEY=`imgs_${usuario}`;
  const loadImgsLocal=()=>{try{return JSON.parse(localStorage.getItem(IMG_KEY)||"{}");}catch{return{};}};
  const saveImgLocal=(id,url)=>{try{const m=loadImgsLocal();m[String(id)]=url;localStorage.setItem(IMG_KEY,JSON.stringify(m));}catch{}};
  const mergeImgs=(prods)=>{const imgs=loadImgsLocal();return prods.map(p=>({...p,imgUrl:p.imgUrl||imgs[String(p.id)]||""}));};
  const subirImagen=async(dataUrl, nombreProd="")=>{
    try{
      // Comprimir imagen antes de subir
      const compressed=await new Promise(resolve=>{
        const img=new Image();
        img.onload=()=>{
          const canvas=document.createElement("canvas");
          const MAX=400;
          const ratio=Math.min(MAX/img.width,MAX/img.height,1);
          canvas.width=img.width*ratio;
          canvas.height=img.height*ratio;
          canvas.getContext("2d").drawImage(img,0,0,canvas.width,canvas.height);
          resolve(canvas.toDataURL("image/jpeg",0.8));
        };
        img.onerror=()=>resolve(dataUrl);
        img.src=dataUrl;
      });
      // Subir a Google Drive via script maestro
      const res=await fetch(SCRIPT_MAESTRO,{
        method:"POST",
        body:JSON.stringify({
          accion:"subirImagen",
          usuario,pass,
          base64:compressed,
          nombre:(nombreProd||"prod").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"").replace(/[^a-z0-9]/gi,"_").slice(0,30)+"_"+Date.now()+".jpg"
        })
      });
      const d=await res.json();
      if(d.ok&&d.url){
        // d.url es base64 directo — funciona en móvil sin restricciones
        // d.driveUrl guardado también para referencia
        return d.url;
      }
      toast2("⚠️ Drive: "+(d.error||"Sin respuesta")+" — imagen guardada local","err");
      return compressed;
    }catch(e){
      toast2("⚠️ Error imagen: "+e.message+" — guardada local","err");
      return dataUrl;
    }
  };

  const cargarFirestore=useCallback(async()=>{
    if(!empresaId)return;
    try{
      const prods=await NexusFirebase.getInventario(empresaId);
      if(prods.length>0){
        const withImgs=mergeImgs(prods);
        setProducts(withImgs);
        try{localStorage.setItem(`inv_${usuario}`,JSON.stringify(withImgs));}catch{}
        setSheetOk(true);
      }
    }catch(e){}
  },[empresaId]);
  const cargarVentas=useCallback(async()=>{
    if(!empresaId)return;
    try{
      const vs=await NexusFirebase.getVentas(empresaId,500);
      const norm=vs.map(v=>({...v,fecha:v.ts?.toDate?v.ts.toDate().toLocaleDateString("es-CO"):v.fecha||""}));
      setVentas(norm);
      try{localStorage.setItem(`vnt_${usuario}`,JSON.stringify(norm));}catch{}
    }catch(e){}
  },[empresaId]);
  const exportarCSV=useCallback((ps)=>{
    const cols=["id","nombre","categoria","ventaUnit","ventaCaja","cajUnid","stock","stockMin","proveedor","imgUrl"];
    const esc=(v)=>{const s=String(v==null?"":""+v);return s.includes(",")||s.includes('"')||s.includes("\n")?'"'+s.replace(/"/g,'""')+'"':s;};
    const rows=[cols.join(","),...ps.map(p=>cols.map(c=>esc(p[c])).join(","))];
    const csv=rows.join("\r\n");
    const blob=new Blob(["\uFEFF"+csv],{type:"text/csv;charset=utf-8;"});
    const url=URL.createObjectURL(blob);
    const a=document.createElement("a");
    const fecha=new Date().toISOString().slice(0,10);
    a.href=url;a.download=`backup_inventario_${fecha}.csv`;
    document.body.appendChild(a);a.click();
    setTimeout(()=>{document.body.removeChild(a);URL.revokeObjectURL(url);},1000);
  },[]);
  const guardarDrive=useCallback(async(ps)=>{
    if(SCRIPT_MAESTRO==="PEGA_AQUI_URL_SCRIPT_MAESTRO")return;
    // Enviar imgUrl (texto corto) pero quitar el base64 viejo y el flag temporal
    const limpios=ps.map(({imgBase64,_imgSubiendo,...rest})=>({...rest,imgUrl:rest.imgUrl?String(rest.imgUrl).slice(0,45000):""}));
    setGuardando(true);const ok=await driveC({accion:"guardarInventario",usuario,pass,productos:limpios});if(ok){setSheetOk(true);exportarCSV(limpios);toast2("💾 Backup guardado","ok");}else toast2("⚠️ Sin conexión — guardado en cola","err");setGuardando(false);
  },[exportarCSV]);

  const[syncingDrive,setSyncingDrive]=useState(false);
  const rol=session.rol||"propietario";

  const syncDriveCompleto=useCallback(async()=>{
    setSyncingDrive(true);
    try{
      await cargarFirestore();
      await cargarVentas();
      setLastSyncTs(new Date().toLocaleTimeString("es-CO",{hour:"2-digit",minute:"2-digit"}));
    }catch(e){}
    finally{setSyncingDrive(false);}
  },[cargarFirestore,cargarVentas]);

  // Cola offline
  useEffect(()=>{
    NexusDB.getOps(usuario).then(ops=>setColaCountC(ops.length)).catch(()=>{});
    const onOn=()=>setOnline(true);const onOff=()=>setOnline(false);
    window.addEventListener('nexus-online',onOn);window.addEventListener('nexus-offline',onOff);
    return()=>{window.removeEventListener('nexus-online',onOn);window.removeEventListener('nexus-offline',onOff);};
  },[]);
  const encolarC=async(payload)=>{await NexusDB.addOp(usuario,payload).catch(()=>{});setColaCountC(p=>p+1);};
  const driveC=async(payload)=>{try{const res=await fetch(SCRIPT_MAESTRO,{method:"POST",body:JSON.stringify(payload)});const d=await res.json();if(d.ok)return true;await encolarC(payload);return false;}catch(e){await encolarC(payload);return false;}};
  const procesarColaC=async()=>{
    const ops=await NexusDB.getOps(usuario).catch(()=>[]);
    if(!ops.length)return;
    const exitosos=[];
    for(const op of ops){try{const r=await fetch(SCRIPT_MAESTRO,{method:"POST",body:JSON.stringify(op.payload)});const d=await r.json();if(d.ok)exitosos.push(op.id);else break;}catch(e){break;}}
    if(exitosos.length){await NexusDB.clearOps(exitosos).catch(()=>{});setColaCountC(p=>Math.max(0,p-exitosos.length));toast2(`✅ ${exitosos.length} registro${exitosos.length>1?"s":""} sincronizado${exitosos.length>1?"s":""}`);}
  };
  useEffect(()=>{if(!colaCountC)return;const iv=setInterval(procesarColaC,30000);return()=>clearInterval(iv);},[colaCountC]);

  // Listener en tiempo real — inventario siempre actualizado
  useEffect(()=>{
    if(!empresaId)return;
    const unsub=NexusFirebase.listenInventario(empresaId,prods=>{
      const withImgs=mergeImgs(prods);
      setProducts(withImgs);
      try{localStorage.setItem(`inv_${usuario}`,JSON.stringify(withImgs));}catch{}
      setSheetOk(true);
    });
    cargarVentas();
    cargarRetiros();
    return()=>unsub();
  },[empresaId]);
  // Auto-guardado local
  useEffect(()=>{try{localStorage.setItem(`inv_${usuario}`,JSON.stringify(products));}catch{}},[products]);

  useEffect(()=>{if(tab==="turnos"&&turnos.length===0)cargarTurnos();},[tab]);

  const saveProdFB=(prod)=>{
    if(!empresaId)return;
    const{imgBase64,_imgSubiendo,...clean}=prod;
    NexusFirebase.saveProducto(empresaId,clean).catch(()=>{});
  };

  const updProd=(id,field,val)=>{
    if(field==="imgUrl"&&val)saveImgLocal(id,val);
    setProducts(ps=>ps.map(p=>p.id===id?{...p,[field]:["nombre","categoria","emojiCustom","imgUrl"].includes(field)?val:isNaN(val)?val:+val}:p));
  };
  // Estado de celda en edición — evita conflicto controlled/uncontrolled
  const[editingCell,setEditingCell]=React.useState(null);// {id, field, val}
  const startEdit=(id,field,rawVal)=>setEditingCell({id,field,val:String(rawVal||"")});
  const navTo=(row,col)=>{let r=row,c=col;if(c<0){r--;c=9;}if(c>9){r++;c=0;}if(r<0)r=0;const el=document.querySelector(`[data-navrow="${r}"][data-navcol="${c}"]`);if(el)setTimeout(()=>{el.focus();try{el.select();}catch(e){}},15);};
  const mkNav=(ri,ci,commit=true)=>e=>{if(e.key==="Tab"){e.preventDefault();if(commit)commitEdit();navTo(ri,e.shiftKey?ci-1:ci+1);}else if(e.key==="Enter"){e.preventDefault();if(commit)commitEdit();navTo(ri+1,ci);}else if(e.key==="ArrowDown"){e.preventDefault();if(commit)commitEdit();navTo(ri+1,ci);}else if(e.key==="ArrowUp"){e.preventDefault();if(commit)commitEdit();navTo(ri-1,ci);}else if(e.key==="Escape")setEditingCell(null);};
  const commitEdit=()=>{
    if(!editingCell)return;
    const{id,field,val}=editingCell;
    if(field==="_cajas"){
      const cajas=parseInt(val)||0;
      if(cajas>0){
        const p=products.find(x=>x.id===id);
        if(p){
          const nuevoStock=cajas*(p.cajUnid||1);
          const minSugerido=(p.cajUnid||1)*2;
          const updated={...p,stock:nuevoStock,...(!p.stockMin||p.stockMin===0?{stockMin:minSugerido}:{})};
          setProducts(ps=>ps.map(x=>x.id===id?updated:x));
          saveProdFB(updated);
        }
      }
      setEditingCell(null);
      return;
    }
    if(field==="_stockMinCajas"){
      const cajas=parseInt(val)||0;
      const p=products.find(x=>x.id===id);
      if(p&&cajas>=0){
        const nuevoMin=cajas*(p.cajUnid||1);
        const updated={...p,stockMin:nuevoMin};
        setProducts(ps=>ps.map(x=>x.id===id?updated:x));
        saveProdFB(updated);
      }
      setEditingCell(null);
      return;
    }
    const num=+val.replace(/\D/g,"");
    const newVal=isNaN(num)?0:num;
    updProd(id,field,newVal);
    setEditingCell(null);
    const prod=products.find(x=>x.id===id);
    if(prod) saveProdFB({...prod,[field]:newVal});
  };
  const openNew=()=>{const catDef="Aguardiente";const sku=generarSKU(catDef,products);setForm({nombre:"",referencia:sku,categoria:catDef,compra:"",ventaUnit:"",ventaCaja:"",cajUnid:"12",stock:"",stockMin:"24"});setEditId(null);setRefEdited(false);setMinEdited(false);setModal(true);};
  const saveProd=()=>{
    if(!form.nombre?.trim())return toast2("El nombre es obligatorio","err");
    const p2={...form,compra:+form.compra||0,ventaUnit:+form.ventaUnit||0,ventaCaja:+form.ventaCaja||0,cajUnid:+form.cajUnid||0,stock:+form.stock||0,stockMin:+form.stockMin||0};
    if(editId){
      const updated={...p2,id:editId};
      setProducts(ps=>ps.map(p=>p.id===editId?updated:p));
      saveProdFB(updated);
      toast2("Actualizado ✓");
    } else {
      const nuevo={...p2,id:Date.now()};
      setProducts(ps=>[...ps,nuevo]);
      saveProdFB(nuevo);
      toast2("Producto agregado ✓");
    }
    setModal(false);
  };
  const doDel=()=>{
    if(empresaId) NexusFirebase.deleteProducto(empresaId,delId).catch(()=>{});
    setProducts(ps=>ps.filter(p=>p.id!==delId));
    setDelId(null);
    toast2("Eliminado","err");
  };

  const forzarSync=async()=>{
    if(!empresaId){toast2("Sin empresaId","err");return;}
    if(!window.confirm("¿Guardar todo el inventario en Firestore?"))return;
    setSyncing(true);
    try{
      const limpios=products.map(({imgBase64,_imgSubiendo,...rest})=>rest);
      await NexusFirebase.saveInventarioCompleto(empresaId,limpios);
      setSheetOk(true);
      toast2("✅ Inventario guardado en Firestore");
    }catch(e){toast2("❌ "+e.message,"err");}
    finally{setSyncing(false);}
  };
  const guardarVentas=async()=>{
    const items=[];
    Object.entries(ventasHoy).forEach(([id,v])=>{
      const p=products.find(x=>x.id===parseInt(id));if(!p)return;
      const c=parseInt(v.cantidad)||0;if(!c)return;
      const ec=v.tipo==="caja";
      const ud=ec?c*p.cajUnid:c;
      const pv=ec?(p.ventaCaja||p.ventaUnit*p.cajUnid):p.ventaUnit;
      const pc=ec?p.compra*p.cajUnid:p.compra;
      items.push({productoId:p.id,nombre:p.nombre,categoria:p.categoria,tipoVenta:ec?"Caja":"Unidad",cantidad:c,unidadesDesc:ud,ventaUnit:pv,compra:pc,ingreso:pv*c,costo:pc*c,ganancia:(pv-pc)*c});
    });
    if(!items.length)return toast2("No hay ventas para guardar","err");
    const prodsActualizados=products.map(p=>{const it=items.find(i=>i.productoId===p.id);return it?{...p,stock:Math.max(0,p.stock-it.unidadesDesc)}:p;});
    setProducts(prodsActualizados);
    if(empresaId){
      NexusFirebase.saveVenta(empresaId,{fecha:fechaHoy(),items}).catch(()=>{});
      prodsActualizados.filter(p=>items.find(i=>i.productoId===p.id)).forEach(p=>saveProdFB(p));
    }
    setVentas(prev=>[...prev,...items.map(i=>({fecha:fechaHoy(),...i}))]);
    toast2("✅ Ventas guardadas y stock actualizado");
    setVentasHoy({});
  };

  const guardarCompras=async()=>{
    const items=[];
    Object.entries(comprasHoy).forEach(([id,v])=>{
      const p=products.find(x=>x.id===parseInt(id));if(!p)return;
      const c=parseInt(v.cantidad)||0;if(!c)return;
      const ec=v.tipo==="caja";items.push({id:p.id,unid:ec?c*p.cajUnid:c});
    });
    if(!items.length)return toast2("No hay compras para registrar","err");
    const productsActualizados=products.map(p=>{const it=items.find(i=>i.id===p.id);return it?{...p,stock:p.stock+it.unid}:p;});
    setProducts(productsActualizados);
    setComprasHoy({});
    if(empresaId){
      productsActualizados.filter(p=>items.find(i=>i.id===p.id)).forEach(p=>saveProdFB(p));
    }
    toast2(`✅ Stock actualizado — ${items.length} producto(s)`);
  };

  const esLunes=HOY.getDay()===1;
  const TABS=rol==="bodeguero"?[
    {id:"inventario",l:"📦 Inventario"},
    {id:"compras",l:"🛒 Recibir compra"},
    {id:"resurtido",l:`📋 Resurtido${esLunes?" 🟢":""}`},
  ]:[
    {id:"inventario",l:"📦 Inventario"},
    {id:"historial",l:"🕒 Historial"},
    {id:"analytics",l:"📊 Análisis"},
    {id:"resurtido",l:`📋 Resurtido${esLunes?" 🟢":""}`},
    {id:"financiero",l:"💰 Financiero"},
    {id:"retiros",l:"💸 Retiros"},
    {id:"turnos",l:"🔄 Turnos"},
    {id:"fiados",l:"📋 Fiados"},
  ];
  const[turnos,setTurnos]=useState([]);
  const[cargandoTurnos,setCargandoTurnos]=useState(false);
  const cargarTurnos=async()=>{if(!empresaId)return;setCargandoTurnos(true);try{const ts=await NexusFirebase.getTurnos(empresaId,50);setTurnos(ts);}catch(e){}finally{setCargandoTurnos(false);};};
  const[fiadosAdmin,setFiadosAdmin]=useState([]);
  const[cargandoFiadosAdmin,setCargandoFiadosAdmin]=useState(false);
  const[modalPagoAdmin,setModalPagoAdmin]=useState(null);
  const[metodoPagoAdmin,setMetodoPagoAdmin]=useState("Efectivo");
  const cargarFiadosAdmin=async()=>{if(!empresaId)return;setCargandoFiadosAdmin(true);try{const fs=await NexusFirebase.getFiados(empresaId);setFiadosAdmin(fs);}catch(e){}finally{setCargandoFiadosAdmin(false);};};
  const pagarFiadoAdmin=async(f)=>{try{await NexusFirebase.marcarFiadoPagado(empresaId,f.fbId,metodoPagoAdmin);setFiadosAdmin(prev=>prev.map(x=>x.fbId===f.fbId?{...x,pagado:true,metodoPago:metodoPagoAdmin}:x));setModalPagoAdmin(null);toast2(`✅ Fiado de ${f.cliente} cobrado`);}catch(e){toast2("Error","err");}};
  const[usuariosNeg,setUsuariosNeg]=useState([]);
  const[cambioPassUsr,setCambioPassUsr]=useState(null);
  const[nuevaPassNeg,setNuevaPassNeg]=useState("");
  const cargarUsuarios=async()=>{
    try{
      if(!empresaId)return;
      const todos=await NexusFirebase.getUsuarios();
      setUsuariosNeg(todos.filter(u=>u.empresaId===empresaId));
    }catch(e){}
  };
  const cambiarPassNeg=async()=>{
    if(!nuevaPassNeg||nuevaPassNeg.length<4){toast2("Mínimo 4 caracteres","err");return;}
    try{
      const snap=await FB_DB.collection('usuarios').where('usuario','==',cambioPassUsr).limit(1).get();
      if(snap.empty){toast2("Usuario no encontrado","err");return;}
      await FB_DB.collection('usuarios').doc(snap.docs[0].id).update({pass:nuevaPassNeg});
      toast2("✅ Contraseña actualizada");setCambioPassUsr(null);setNuevaPassNeg("");setShowNewPass(false);cargarUsuarios();
    }catch(e){toast2("Error al cambiar contraseña","err");}
  };
  const genPassNeg=()=>{
    // Genera contraseña facil basada en el negocio
    const year=new Date().getFullYear();
    const slug=negocio.split(" ")[0].toLowerCase().replace(/[^a-z]/g,"").slice(0,4)||"nexus";
    setNuevaPassNeg(slug.charAt(0).toUpperCase()+slug.slice(1)+year);
  };

  const cellInp={background:"transparent",border:"none",borderBottom:`1px solid ${C.border}`,color:C.text,padding:"4px 6px",fontSize:16,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",width:"100%",textAlign:"right",fontWeight:600,whiteSpace:"nowrap"};

  return(
    <div style={{fontFamily:"'Inter',system-ui,sans-serif",background:C.bg,minHeight:"100vh",color:C.text}}>
      <style>{`
        @keyframes fadeIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}
        .tr:hover td{background:${dm?"#1a2030":"#e8f0fb"}!important;}
        input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
        input[type=number]{-moz-appearance:textfield;}
        @media print{.np{display:none!important;}}
        .cli-header{position:sticky;top:0;z-index:50;background:${C.bg};padding:10px 20px;border-bottom:2px solid ${dm?C.border:C.accent};display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;}
        .cli-wrap{width:100%;padding:0 20px 60px;}
        .cli-hide-mobile{display:table-cell;}
        .cli-btn-txt{display:inline;}
        .cli-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;padding:12px 0;}
        .cli-tabs{display:flex;gap:2px;border-bottom:1px solid ${C.border};margin-bottom:0;overflow-x:auto;}
        .cli-fmt{display:flex;align-items:center;gap:6px;padding:8px 0 12px;flex-wrap:wrap;}
        .cli-data *{font-size:16px;font-family:'Inter',system-ui,sans-serif;font-weight:400;}
        @media(max-width:768px){
          .cli-header{padding:8px 12px;gap:6px;}
          .cli-wrap{padding:0 8px 80px;}
          .cli-btn-txt{display:none;}
          .cli-stats{grid-template-columns:repeat(2,1fr);}
          .cli-tabs button{padding:8px 10px!important;font-size:11px!important;}
          .cli-tbl th:nth-child(3),.cli-tbl td:nth-child(3),
          .cli-tbl th:nth-child(4),.cli-tbl td:nth-child(4),
          .cli-tbl th:nth-child(5),.cli-tbl td:nth-child(5),
          .cli-tbl th:nth-child(7),.cli-tbl td:nth-child(7),
          .cli-tbl th:nth-child(8),.cli-tbl td:nth-child(8),
          .cli-tbl th:nth-child(9),.cli-tbl td:nth-child(9),
          .cli-tbl th:nth-child(11),.cli-tbl td:nth-child(11),
          .cli-tbl th:nth-child(13),.cli-tbl td:nth-child(13){display:none!important;}
        }
      `}</style>
      {toast&&<div style={{position:"fixed",top:16,right:16,zIndex:999,background:toast.type==="err"?C.red:C.green,color:"#fff",padding:"10px 20px",borderRadius:9,fontWeight:700,fontSize:16,boxShadow:C.shadow,animation:"fadeIn .2s"}}>{toast.msg}</div>}

      {/* HEADER STICKY */}
      <div className="np cli-header">
        <div style={{display:"flex",alignItems:"center",gap:10}}>
          <div style={{width:42,height:42,borderRadius:"50%",background:"#000",display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 0 12px rgba(240,165,0,.5)",flexShrink:0}}><Logo size={28}/></div>
          <div>
            <div style={{fontWeight:800,fontSize:16,color:C.text}}>{negocio}</div>
            <div style={{fontSize:12,color:C.muted,display:"flex",alignItems:"center",gap:5}}>
              <span className="cli-btn-txt">{DIAS[HOY.getDay()]}, {HOY.getDate()} {MESES[HOY.getMonth()]}</span>
              {online
                ?<span style={{display:"inline-flex",alignItems:"center",gap:3,color:"#4ade80",fontWeight:700}}><span style={{width:6,height:6,borderRadius:"50%",background:"#4ade80",display:"inline-block"}}/>En línea</span>
                :<span style={{color:"#f87171",fontWeight:700}}>⚠️ Sin conexión</span>}
            </div>
          </div>
        </div>
        <div style={{display:"flex",gap:6,alignItems:"center"}}>
          {!online&&<span style={{fontSize:12,color:"#fff",fontWeight:800,background:"#dc2626",borderRadius:6,padding:"3px 8px",border:"1px solid #f87171"}}>No apagues el PC</span>}
          <button onClick={()=>setShowPerfil(true)} style={{display:"flex",alignItems:"center",gap:8,background:C.card,border:`1px solid ${C.border}`,borderRadius:24,padding:"5px 12px 5px 5px",cursor:"pointer"}}>
            <div style={{width:30,height:30,borderRadius:"50%",background:"#000",display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 0 8px rgba(240,165,0,.4)"}}><Logo size={20}/></div>
            <span style={{fontSize:13,fontWeight:700,color:C.text,maxWidth:80,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{usuario}</span>
            <span style={{fontSize:10,color:C.muted}}>▼</span>
          </button>
        </div>
      </div>

      {/* PANEL PERFIL estilo Facebook */}
      {showPerfil&&<>
        <div onClick={()=>setShowPerfil(false)} style={{position:"fixed",inset:0,zIndex:299,background:"rgba(0,0,0,.4)"}}/>
        <div style={{position:"fixed",top:0,right:0,bottom:0,width:300,background:C.card,borderLeft:`1px solid ${C.border}`,zIndex:300,display:"flex",flexDirection:"column",boxShadow:"-4px 0 24px rgba(0,0,0,.3)",fontFamily:"'Inter',system-ui,sans-serif"}}>
          {/* Cabecera perfil */}
          <div style={{background:C.topbar||C.accent,padding:"24px 20px 20px"}}>
            <div style={{display:"flex",alignItems:"center",gap:12}}>
              <div style={{width:56,height:56,borderRadius:"50%",background:"#000",display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 0 16px rgba(240,165,0,.5)",flexShrink:0}}><Logo size={38}/></div>
              <div>
                <div style={{fontWeight:800,fontSize:16,color:"#fff"}}>{usuario}</div>
                <div style={{fontSize:12,color:"rgba(255,255,255,.7)",marginTop:2}}>{negocio}</div>
                <span style={{display:"inline-block",marginTop:4,background:"rgba(255,255,255,.2)",color:"#fff",borderRadius:20,padding:"2px 10px",fontSize:11,fontWeight:700}}>
                  {rol==="propietario"?"👑 Propietario":rol==="bodeguero"?"📦 Bodeguero":rol==="supervisor"?"📋 Supervisor":rol==="vendedor"?"🛒 Vendedor":rol}
                </span>
              </div>
            </div>
          </div>
          {/* Menú */}
          <div style={{flex:1,overflowY:"auto",padding:"8px 0"}}>
            {[
              {icon:"📋",label:"Mi Plan",sub:"Nexus POS · Activo",onClick:()=>setShowPlanModal(true)},
              {icon:"🎨",label:"Cambiar tema",sub:"Personaliza la apariencia",onClick:()=>{setShowThemePicker(true);setShowPerfil(false);}},
              {icon:"🔐",label:"Administrar contraseñas",sub:"Usuarios de tu negocio",onClick:()=>{setShowAdminPass(true);setShowPerfil(false);cargarUsuarios();}},
            ].map((item,i)=>(
              <button key={i} onClick={item.onClick} style={{width:"100%",display:"flex",alignItems:"center",gap:12,padding:"12px 20px",background:"none",border:"none",cursor:"pointer",textAlign:"left",borderBottom:`1px solid ${C.border}`}}>
                <span style={{fontSize:22,width:32,textAlign:"center"}}>{item.icon}</span>
                <div>
                  <div style={{fontWeight:700,fontSize:14,color:C.text}}>{item.label}</div>
                  <div style={{fontSize:12,color:C.muted,marginTop:1}}>{item.sub}</div>
                </div>
              </button>
            ))}
          </div>
          <div style={{padding:16,borderTop:`1px solid ${C.border}`}}>
            <button onClick={onSalir} style={{width:"100%",background:C.redBg,color:C.red,border:`1px solid ${C.redBd}`,borderRadius:10,padding:"12px",fontSize:14,fontWeight:800,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",gap:8}}>
              🔒 Cerrar sesión
            </button>
          </div>
        </div>
      </>}

      {/* MODAL PLAN */}
      {showPlanModal&&<div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.6)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:400,padding:16}}>
        <div style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:18,padding:28,maxWidth:340,width:"100%",fontFamily:"'Inter',system-ui,sans-serif"}}>
          <div style={{textAlign:"center",marginBottom:20}}>
            <div style={{fontSize:40,marginBottom:8}}>📋</div>
            <div style={{fontWeight:900,fontSize:20,color:C.accent}}>Nexus POS</div>
            <div style={{fontSize:13,color:C.muted,marginTop:2}}>Plan activo</div>
          </div>
          {[
            {l:"Negocio",v:negocio},
            {l:"Usuario",v:usuario},
            {l:"Rol",v:rol},
            {l:"Estado",v:"✅ Activo"},
            {l:"Soporte",v:"Nexus Digital Solutions"},
          ].map((r,i)=>(
            <div key={i} style={{display:"flex",justifyContent:"space-between",padding:"9px 0",borderBottom:`1px solid ${C.border}`,fontSize:13}}>
              <span style={{color:C.muted,fontWeight:600}}>{r.l}</span>
              <span style={{color:C.text,fontWeight:700}}>{r.v}</span>
            </div>
          ))}
          <button onClick={()=>setShowPlanModal(false)} style={{width:"100%",marginTop:20,background:C.accent,color:"#fff",border:"none",borderRadius:10,padding:"12px",fontSize:14,fontWeight:800,cursor:"pointer"}}>Cerrar</button>
        </div>
      </div>}

      {/* MODAL ADMINISTRAR CONTRASEÑAS */}
      {showAdminPass&&<div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.6)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:400,padding:16}}>
        <div style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:18,padding:24,maxWidth:400,width:"100%",fontFamily:"'Inter',system-ui,sans-serif",maxHeight:"80vh",display:"flex",flexDirection:"column"}}>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:16}}>
            <div style={{fontWeight:800,fontSize:17,color:C.accent}}>🔐 Administrar contraseñas</div>
            <button onClick={()=>setShowAdminPass(false)} style={{background:"none",border:"none",color:C.muted,fontSize:20,cursor:"pointer"}}>✕</button>
          </div>
          <div style={{overflowY:"auto",flex:1}}>
            {usuariosNeg.length===0
              ?<div style={{textAlign:"center",padding:24,color:C.muted}}>Cargando usuarios...</div>
              :usuariosNeg.map((u,i)=>(
                <div key={u.id||i} style={{borderBottom:`1px solid ${C.border}`,padding:"12px 0"}}>
                  <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:8}}>
                    <div>
                      <div style={{fontWeight:700,color:C.text,fontSize:14}}>{u.usuario}</div>
                      <div style={{fontSize:12,color:C.muted}}>{u.rol} · {u.activo?"✅ Activo":"⛔ Suspendido"}</div>
                    </div>
                    <button onClick={()=>{setCambioPassUsr(u.usuario);setNuevaPassNeg("");}}
                      style={{background:C.accentBg,color:C.accent,border:`1px solid ${C.accent}`,borderRadius:7,padding:"6px 12px",fontSize:12,fontWeight:700,cursor:"pointer"}}>
                      🔑 Cambiar
                    </button>
                  </div>
                  {cambioPassUsr===u.usuario&&<div style={{display:"flex",gap:8,flexDirection:"column",marginTop:8,background:C.gray,borderRadius:10,padding:12}}>
                    <div style={{fontSize:12,color:C.muted,fontWeight:600,textTransform:"uppercase",letterSpacing:.6}}>Contraseña actual</div>
                    <div style={{background:C.inp,border:`1px solid ${C.border}`,borderRadius:7,padding:"8px 12px",fontSize:14,fontFamily:"monospace",color:C.text,letterSpacing:2}}>{u.pass||"—"}</div>
                    <div style={{fontSize:12,color:C.muted,fontWeight:600,textTransform:"uppercase",letterSpacing:.6,marginTop:4}}>Nueva contraseña</div>
                    <div style={{position:"relative"}}>
                      <input type={showNewPass?"text":"password"} value={nuevaPassNeg} onChange={e=>setNuevaPassNeg(e.target.value)}
                        placeholder="Nueva contraseña" style={{background:C.inp,border:`1px solid ${C.border}`,borderRadius:7,color:C.text,padding:"8px 36px 8px 12px",fontSize:14,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",width:"100%",boxSizing:"border-box"}}/>
                      <button onClick={()=>setShowNewPass(v=>!v)} style={{position:"absolute",right:8,top:"50%",transform:"translateY(-50%)",background:"none",border:"none",cursor:"pointer",fontSize:16,color:C.muted,padding:2}}>{showNewPass?"🙈":"👁️"}</button>
                    </div>
                    <div style={{display:"flex",gap:6}}>
                      <button onClick={genPassNeg} style={{flex:1,background:C.card,color:C.muted,border:`1px solid ${C.border}`,borderRadius:7,padding:"7px",fontSize:12,cursor:"pointer"}}>🎲 Generar</button>
                      <button onClick={()=>{setCambioPassUsr(null);setNuevaPassNeg("");setShowNewPass(false);}} style={{flex:1,background:C.card,color:C.muted,border:`1px solid ${C.border}`,borderRadius:7,padding:"7px",fontSize:12,cursor:"pointer"}}>Cancelar</button>
                      <button onClick={cambiarPassNeg} style={{flex:2,background:"linear-gradient(135deg,#f59e0b,#d97706)",color:"#fff",border:"none",borderRadius:7,padding:"7px",fontSize:12,fontWeight:700,cursor:"pointer"}}>✅ Guardar</button>
                    </div>
                  </div>}
                </div>
              ))
            }
          </div>
        </div>
      </div>}

      <div className="cli-wrap">

        {/* STATS */}
        <div className="np cli-stats">
          {[{l:"Productos",v:products.length,c:C.text,i:"📦"},{l:"En stock",v:totalStock,c:C.text,i:"🔢"},{l:"Invertido",v:COP(valorCompra),c:C.red,i:"💸"},{l:"Ganancia potencial",v:COP(ganancia),c:C.green,i:"📈"}].map((s,i)=>(
            <div key={i} style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:11,padding:"12px 14px",borderLeft:`3px solid ${s.c}`,boxShadow:`0 2px 12px ${s.c}18`}}>
              <div style={{fontSize:13,color:C.muted,marginBottom:3}}>{s.i} {s.l}</div>
              <div style={{fontWeight:800,fontSize:22,color:s.c,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{s.v}</div>
            </div>
          ))}
        </div>

        {/* TABS */}
        <div className="np cli-tabs">
          {TABS.map(t=>(
            <button key={t.id} onClick={()=>setTab(t.id)}
              style={{background:tab===t.id?(dm?"#0b1628":C.card):C.card,color:tab===t.id?"#f0a500":C.muted,border:`1px solid ${C.border}`,borderBottom:tab===t.id?"3px solid #f0a500":"1px solid transparent",padding:"9px 14px",borderRadius:"8px 8px 0 0",fontSize:13,fontWeight:tab===t.id?700:600,cursor:"pointer",whiteSpace:"nowrap",flexShrink:0,letterSpacing:.3}}>
              {t.l}
            </button>
          ))}
        </div>


        {/* CONTENIDO TABS — clase cli-data aplica formato global */}
        <div className="cli-data">
        {/* ══ INVENTARIO inline ══ */}
        {tab==="inventario"&&<>
          <div className="np" style={{display:"flex",gap:10,flexWrap:"wrap",marginBottom:8,alignItems:"center"}}>
            <div style={{flex:1,minWidth:160,position:"relative"}}>
              <span style={{position:"absolute",left:10,top:"50%",transform:"translateY(-50%)",color:C.muted}}>🔍</span>
              <input type="text" placeholder="Buscar..." value={search} onChange={e=>setSearch(e.target.value)} style={{...inp,paddingLeft:32}}/>
            </div>
            <select value={catFil} onChange={e=>setCatFil(e.target.value)} style={{...inp,width:"auto",cursor:"pointer"}}>
              <option value="Todas">Todas</option>
              {CATS.map(c=><option key={c} style={{background:C.card}}>{c}</option>)}
            </select>
            <button onClick={forzarSync} disabled={syncing||guardando} style={{background:syncing||guardando?C.btn2:C.btnGrad,color:"#fff",border:"none",borderRadius:8,padding:"10px 20px",fontSize:13,fontWeight:800,cursor:syncing||guardando?"not-allowed":"pointer",opacity:syncing||guardando?.7:1,whiteSpace:"nowrap"}}>
              {syncing||guardando?"⏳ Guardando...":"💾 Guardar inventario"}
            </button>
            <button onClick={openNew} style={{background:C.accent,color:"#fff",border:"none",borderRadius:8,padding:"10px 20px",fontSize:13,fontWeight:800,cursor:"pointer",whiteSpace:"nowrap"}}>＋ Agregar producto</button>
          </div>
          <div className="np" style={{display:"flex",gap:6,flexWrap:"wrap",marginBottom:8}}>
            {["Todas",...[...new Set(products.map(p=>p.categoria).filter(Boolean))].sort()].map(cat=>(
              <button key={cat} onClick={()=>setCatFil(cat)} style={{padding:"5px 12px",fontSize:13,fontWeight:700,borderRadius:20,border:`1px solid ${catFil===cat?C.accent:C.border}`,background:catFil===cat?C.accentBg:C.card,color:catFil===cat?C.accent:C.muted,cursor:"pointer",whiteSpace:"nowrap"}}>
                {cat==="Todas"?"🏷️ Todas":`${EMOJIS_POS[cat]||"📦"} ${cat}`}
              </button>
            ))}
          </div>
          <div style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:14,overflowX:"auto",overflowY:"auto",maxHeight:"calc(100vh - 260px)",boxShadow:"0 4px 24px rgba(0,0,0,.2)"}}>
            <table className="cli-tbl" style={{width:"100%",borderCollapse:"collapse",minWidth:600}}>
              <thead><tr>
                {["📷","Producto","Ref.","Categoría","P.Compra","Venta Unit.","Venta Caja","Unid/Caja","Cajas","Stock","Mín (caj)","Margen","Gan/Unit",""].map((h,i)=>(
                  <th key={i} style={{...thS,textAlign:i>=3&&i<=11?"right":"left"}}>{h}</th>
                ))}
              </tr></thead>
              <tbody>
                {filtered.length===0
                  ?<tr><td colSpan={14} style={{padding:40,textAlign:"center",color:C.muted}}>Edita cualquier celda directamente</td></tr>
                  :filtered.map((p,ri)=>{
                    const costoUnit=p.cajUnid>0?p.compra/p.cajUnid:p.compra;
                    const m=PCT(costoUnit,p.ventaUnit);
                    const low=p.stock<p.stockMin&&p.stockMin>0;
                    return(
                      <tr key={p.id} className="tr" style={{borderBottom:`1px solid ${C.border}`,background:ri%2===0?C.card:C.gray}}>
                        <td style={{padding:"4px 6px",textAlign:"center",width:52}}>
                          <label title="Cargar imagen del producto" style={{cursor:"pointer",display:"inline-flex",alignItems:"center",justifyContent:"center",position:"relative"}}>
                            {p._imgSubiendo
                              ?<div style={{width:36,height:36,borderRadius:8,background:C.inp,border:`1px solid ${C.border}`,display:"flex",alignItems:"center",justifyContent:"center",fontSize:16}}>⏳</div>
                              :p.imgUrl
                              ?<img src={p.imgUrl} alt="" loading="lazy" onError={e=>{e.target.onerror=null;e.target.style.display="none";e.target.parentNode.querySelector(".img-placeholder").style.display="flex";}} style={{width:36,height:36,borderRadius:8,objectFit:"cover",border:`1px solid ${C.border}`,display:"block"}}/>
                              :<div style={{width:36,height:36,borderRadius:8,background:C.inp,border:`2px dashed ${C.border}`,display:"flex",alignItems:"center",justifyContent:"center",fontSize:19,color:C.muted,cursor:"pointer"}}>📷</div>
                            }
                            <input type="file" accept="image/*" style={{display:"none"}} onChange={e=>{
                              const file=e.target.files?.[0];
                              if(!file)return;
                              setProducts(ps=>ps.map(x=>x.id===p.id?{...x,_imgSubiendo:true}:x));
                              subirImagenCloudinary(file).then(url=>{
                                const updatedProds=products.map(x=>x.id===p.id?{...x,imgUrl:url,_imgSubiendo:false}:x);
                                setProducts(updatedProds);
                                saveImgLocal(p.id,url);
                                if(session.empresaId){
                                  NexusFirebase.saveProducto(session.empresaId,{...p,imgUrl:url}).catch(()=>{});
                                }
                                toast2("📷 Imagen subida a la nube ✅");
                              }).catch(err=>{
                                setProducts(ps=>ps.map(x=>x.id===p.id?{...x,_imgSubiendo:false}:x));
                                toast2("❌ Error al subir imagen: "+err.message,"err");
                              }).finally(()=>{e.target.value="";});
                            }}/>
                          </label>
                        </td>
                        <td style={{padding:"5px 10px",minWidth:180}}>
                          <input data-navrow={ri} data-navcol={0} value={p.nombre} onChange={e=>updProd(p.id,"nombre",e.target.value)} onKeyDown={mkNav(ri,0,false)} style={{...cellInp,textAlign:"left",fontWeight:600,fontSize:16,color:C.text}}/>
                        </td>
                        <td style={{padding:"5px 6px",minWidth:90}}>
                          <input data-navrow={ri} data-navcol={1} value={p.referencia||""} onChange={e=>updProd(p.id,"referencia",e.target.value)} placeholder="—" onKeyDown={mkNav(ri,1,false)} style={{...cellInp,textAlign:"left",fontSize:13,color:C.muted,fontWeight:400,width:85}}/>
                        </td>
                        <td style={{padding:"5px 10px",minWidth:130}}>
                          <select data-navrow={ri} data-navcol={2} value={p.categoria} onChange={e=>updProd(p.id,"categoria",e.target.value)} onKeyDown={mkNav(ri,2,false)}
                            style={{background:C.inp,border:`1px solid ${C.border}`,borderRadius:6,color:C.text,padding:"4px 7px",fontSize:13,cursor:"pointer",outline:"none",width:"100%",fontFamily:"'Inter',system-ui,sans-serif"}}>
                            {CATS.map(c=><option key={c} style={{background:C.card}}>{c}</option>)}
                          </select>
                        </td>
                        {[["compra",C.red],["ventaUnit",C.text],["ventaCaja",C.muted],["cajUnid",C.muted]].map(([f,col],fi)=>{
                          const isPrice=["compra","ventaUnit","ventaCaja"].includes(f);
                          const rawVal=p[f]||0;
                          const displayVal=isPrice&&rawVal?new Intl.NumberFormat("es-CO",{minimumFractionDigits:0,maximumFractionDigits:0}).format(rawVal):String(rawVal||"");
                          const ci=fi+3;
                          return(
                          <td key={f} style={{padding:"5px 8px",minWidth:75}}>
                            <input
                              data-navrow={ri} data-navcol={ci}
                              type="text"
                              inputMode="numeric"
                              value={editingCell?.id===p.id&&editingCell?.field===f?editingCell.val:displayVal}
                              onFocus={()=>startEdit(p.id,f,rawVal)}
                              onBlur={commitEdit}
                              onChange={e=>{
                                if(editingCell?.id===p.id&&editingCell?.field===f){
                                  setEditingCell(prev=>({...prev,val:e.target.value.replace(/[^0-9]/g,"")}));
                                }
                              }}
                              onKeyDown={mkNav(ri,ci)}
                              style={{...cellInp,color:col,fontWeight:f==="compra"||f==="stock"?700:400,width:82,fontSize:16}}/>
                          </td>
                        );})}
                        {/* CAJAS — editable, calcula stock */}
                        <td style={{padding:"5px 8px",minWidth:70}}>
                          <input
                            type="text" inputMode="numeric" placeholder="—"
                            value={editingCell?.id===p.id&&editingCell?.field==="_cajas"?editingCell.val:p.cajUnid>1?String(Math.floor(p.stock/(p.cajUnid||1))||""):""}
                            data-navrow={ri} data-navcol={7}
                            onFocus={()=>p.cajUnid>1&&startEdit(p.id,"_cajas",Math.floor(p.stock/(p.cajUnid||1)))}
                            onBlur={commitEdit}
                            onChange={e=>{if(editingCell?.id===p.id&&editingCell?.field==="_cajas")setEditingCell(prev=>({...prev,val:e.target.value.replace(/[^0-9]/g,"")}));}}
                            onKeyDown={mkNav(ri,7)}
                            style={{...cellInp,color:C.accent,fontWeight:700,width:60,opacity:p.cajUnid>1?1:.4,cursor:p.cajUnid>1?"text":"default",fontSize:16}}
                            readOnly={p.cajUnid<=1}
                            title={p.cajUnid>1?`Escribe cajas → calcula stock (×${p.cajUnid})`:"Producto por unidad"}/>
                        </td>
                        {/* STOCK */}
                        <td style={{padding:"5px 8px",minWidth:75}}>
                          {(()=>{const rawVal=p.stock||0;const ci=8;return(
                            <input data-navrow={ri} data-navcol={ci} type="text" inputMode="numeric"
                              value={editingCell?.id===p.id&&editingCell?.field==="stock"?editingCell.val:String(rawVal||"")}
                              onFocus={()=>startEdit(p.id,"stock",rawVal)} onBlur={commitEdit}
                              onChange={e=>{if(editingCell?.id===p.id&&editingCell?.field==="stock")setEditingCell(prev=>({...prev,val:e.target.value.replace(/[^0-9]/g,"")}));}}
                              onKeyDown={mkNav(ri,ci)}
                              style={{...cellInp,color:low?C.red:C.text,fontWeight:700,width:82,fontSize:16}}/>
                          );})()}
                        </td>
                        {/* MÍNIMO en cajas (si cajUnid>1) o unidades */}
                        <td style={{padding:"5px 8px",minWidth:75}}>
                          {(()=>{
                            const rawMin=p.stockMin||0;
                            const enCajas=p.cajUnid>1;
                            const dispVal=enCajas?String(Math.ceil(rawMin/(p.cajUnid||1))||""):String(rawMin||"");
                            const editField=enCajas?"_stockMinCajas":"stockMin";
                            const editVal=enCajas?Math.ceil(rawMin/(p.cajUnid||1)):rawMin;
                            const ci=9;
                            return(
                              <input data-navrow={ri} data-navcol={ci} type="text" inputMode="numeric"
                                value={editingCell?.id===p.id&&editingCell?.field===editField?editingCell.val:dispVal}
                                onFocus={()=>startEdit(p.id,editField,editVal)} onBlur={commitEdit}
                                onChange={e=>{if(editingCell?.id===p.id&&editingCell?.field===editField)setEditingCell(prev=>({...prev,val:e.target.value.replace(/[^0-9]/g,"")}));}}
                                onKeyDown={mkNav(ri,ci)}
                                title={enCajas?`Mínimo en cajas (1 caja = ${p.cajUnid} unid). Actual: ${rawMin} unid`:"Mínimo en unidades"}
                                style={{...cellInp,color:C.muted,fontWeight:400,width:82,fontSize:16}}/>
                            );
                          })()}
                        </td>
                        <td style={{padding:"5px 8px",textAlign:"right"}}>
                          {p.compra&&p.ventaUnit?<span style={{color:mc(m,C),fontWeight:800,fontSize:13}}>{m}%</span>:"—"}
                        </td>
                        <td style={{padding:"5px 8px",textAlign:"right",color:C.green,fontWeight:700,fontSize:13}}>
                          {p.compra&&p.ventaUnit?COP(p.ventaUnit-costoUnit):"—"}
                        </td>
                        <td style={{padding:"5px 8px"}}>
                          <button onClick={()=>setDelId(p.id)} style={{background:"none",border:"none",cursor:"pointer",fontSize:16,color:C.red,opacity:.6}}>🗑️</button>
                        </td>
                      </tr>
                    );
                  })}
              </tbody>
            </table>
          </div>
          <div className="np" style={{marginTop:6,fontSize:13,color:C.muted,textAlign:"right"}}>{filtered.length} de {products.length} productos</div>
        </>}


        {/* ══ COMPRAS ══ */}
        {tab==="compras"&&<>
          <div style={{background:C.greenBg,border:`1px solid ${C.greenBd}`,borderRadius:10,padding:"11px 16px",marginBottom:14,fontSize:13,color:C.green}}>
            🛒 Registra el mercado que llegó hoy — el stock se suma automáticamente
          </div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:10,marginBottom:14}} className="np">
            <div style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:11,padding:"12px 14px",borderTop:`3px solid ${C.blue}`}}>
              <div style={{fontSize:13,color:C.muted,marginBottom:3}}>🛒 Productos a recibir</div>
              <div style={{fontWeight:800,fontSize:20,color:C.blue}}>{calcCH.items}</div>
            </div>
            <div style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:11,padding:"12px 14px",borderTop:`3px solid ${C.red}`}}>
              <div style={{fontSize:13,color:C.muted,marginBottom:3}}>💸 Costo total compra</div>
              <div style={{fontWeight:800,fontSize:20,color:C.red}}>{COP(calcCH.total)}</div>
            </div>
          </div>
          <div style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:12,overflowX:"auto",overflowY:"auto",maxHeight:"calc(100vh - 340px)",marginBottom:12}}>
            <table style={{width:"100%",borderCollapse:"collapse",minWidth:500}}>
              <thead><tr>
                {["Producto","Stock actual","Cantidad recibida","Tipo","Unidades a sumar"].map((h,i)=>(
                  <th key={i} style={{...thS,top:0}}>{h}</th>
                ))}
              </tr></thead>
              <tbody>
                {products.map(p=>{
                  const v=comprasHoy[p.id]||{cantidad:"",tipo:"caja"};
                  const c=parseInt(v.cantidad)||0;
                  const ec=v.tipo==="caja";
                  const ud=c?(ec?c*p.cajUnid:c):0;
                  const act=c>0;
                  return(
                    <tr key={p.id} className="tr" style={{borderBottom:`1px solid ${C.border}`,background:act?C.greenBg:C.card}}>
                      <td style={{padding:"8px 11px",fontWeight:act?700:400,color:C.text,fontSize:13}}>{p.nombre}</td>
                      <td style={{padding:"8px 11px",color:p.stock<p.stockMin?C.red:C.muted,fontSize:13}}>{p.stock}{p.stock<p.stockMin&&p.stockMin>0?" ⚠️":""}</td>
                      <td style={{padding:"8px 11px"}}>
                        <input type="number" min="0" value={v.cantidad} placeholder="0"
                          onChange={e=>setComprasHoy(prev=>({...prev,[p.id]:{...v,cantidad:e.target.value}}))}
                          style={{width:62,background:C.inp,border:`1px solid ${act?C.greenBd:C.border}`,borderRadius:6,padding:"5px 6px",fontSize:13,textAlign:"center",color:C.text,outline:"none"}}/>
                      </td>
                      <td style={{padding:"8px 11px"}}>
                        <select value={v.tipo} onChange={e=>setComprasHoy(prev=>({...prev,[p.id]:{...v,tipo:e.target.value}}))}
                          style={{background:C.inp,border:`1px solid ${C.border}`,borderRadius:6,padding:"5px 7px",fontSize:13,color:C.text,cursor:"pointer",outline:"none"}}>
                          <option value="unidad">Por unidad</option>
                          {p.cajUnid>0&&<option value="caja">Por caja ({p.cajUnid}u)</option>}
                        </select>
                      </td>
                      <td style={{padding:"8px 11px",color:act?C.green:C.muted,fontWeight:act?700:400,fontSize:13}}>{act?`+${ud}`:"—"}</td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
          <div className="np" style={{display:"flex",gap:10,justifyContent:"flex-end"}}>
            <button onClick={()=>setComprasHoy({})} style={{...btnS(C.muted,C.card,C.border)}}>Limpiar</button>
            <button onClick={guardarCompras} style={{background:C.text,color:C.bg,border:"none",borderRadius:7,padding:"10px 24px",fontSize:16,fontWeight:700,cursor:"pointer"}}>✅ Confirmar — actualizar stock</button>
          </div>
        </>}

        {/* ══ HISTORIAL ══ */}
        {tab==="historial"&&<div>
          <div className="np" style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:10,flexWrap:"wrap",gap:10}}>
            <div>
              <div style={{fontWeight:800,fontSize:19,color:C.text}}>🕒 Historial de Ventas</div>
              <div style={{fontSize:13,color:C.muted}}>Historial de caja</div>
            </div>
            <div style={{display:"flex",gap:8}}>
              <button onClick={()=>window.print()} style={{...btnS(C.text,C.card,C.border)}}>🖨️ Imprimir</button>
            </div>
          </div>
          {/* Filtro de período */}
          <div style={{display:"flex",gap:6,marginBottom:14,flexWrap:"wrap"}}>
            {[["hoy","Hoy"],["semana","7 días"],["mes","30 días"],["todo","Todo"]].map(([k,l])=>(
              <button key={k} onClick={()=>setPeriodoFil(k)} style={{padding:"6px 14px",fontSize:13,fontWeight:700,borderRadius:7,border:`1px solid ${periodoFil===k?C.accent:C.border}`,background:periodoFil===k?C.accentBg:C.card,color:periodoFil===k?C.accent:C.muted,cursor:"pointer"}}>{l}</button>
            ))}
          </div>
          {/* Resumen del período */}
          {histAgrFil.length>0&&<div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(130px,1fr))",gap:8,marginBottom:10}}>
            {[{l:"📅 Días",v:statsFilPeriodo.dias,c:C.text},{l:"💰 Ingresos",v:COP(statsFilPeriodo.ing),c:C.blue},{l:"💸 Costos",v:COP(statsFilPeriodo.cos),c:C.red},{l:"📈 Ganancia período",v:COP(statsFilPeriodo.gan),c:C.green}].map((s,i)=>(
              <div key={i} style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:9,padding:"9px 12px"}}>
                <div style={{fontSize:13,color:C.muted,marginBottom:2}}>{s.l}</div>
                <div style={{fontSize:16,fontWeight:800,color:s.c}}>{s.v}</div>
              </div>
            ))}
          </div>}
          {rol!=="bodeguero"&&<div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(160px,1fr))",gap:8,marginBottom:14}}>
            <div style={{background:C.greenBg,border:`1px solid ${C.greenBd}`,borderRadius:9,padding:"10px 14px",borderLeft:`4px solid ${C.green}`}}>
              <div style={{fontSize:13,color:C.green,fontWeight:700,marginBottom:2}}>📈 GANANCIA TOTAL ACUMULADA</div>
              <div style={{fontSize:19,fontWeight:900,color:C.green}}>{COP(gananciaTotal)}</div>
            </div>
            <div onClick={()=>setTab("retiros")} style={{background:saldoDisponible>=0?C.accentBg:C.redBg,border:`1px solid ${saldoDisponible>=0?C.accent:C.red}`,borderRadius:9,padding:"10px 14px",borderLeft:`4px solid ${saldoDisponible>=0?C.accent:C.red}`,cursor:"pointer"}}>
              <div style={{fontSize:13,color:saldoDisponible>=0?C.accent:C.red,fontWeight:700,marginBottom:2}}>💸 SALDO DISPONIBLE PARA RETIRO</div>
              <div style={{fontSize:19,fontWeight:900,color:saldoDisponible>=0?C.accent:C.red}}>{COP(saldoDisponible)}</div>
              <div style={{fontSize:13,color:C.muted,marginTop:2}}>Retirado: {COP(totalRetirado)} · Ver retiros →</div>
            </div>
          </div>}
          {/* Cierres de caja */}
          {cierresHist.length>0&&<div style={{marginBottom:18}}>
            <div style={{fontWeight:700,fontSize:13,color:"#fcd34d",marginBottom:8}}>🔒 Cierres de caja registrados</div>
            <div style={{display:"grid",gap:6}}>
              {cierresHist.map((c,i)=>(
                <div key={i} style={{background:C.card,border:`1px solid #fcd34d44`,borderRadius:9,padding:"10px 14px",display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",gap:8}}>
                  <div>
                    <div style={{fontSize:13,fontWeight:700,color:"#fcd34d"}}>🔒 Cierre — {fechaLeg(c.fecha)}</div>
                    <div style={{fontSize:13,color:C.muted,marginTop:2}}>{c.usuario||"Cajero"}{c.observacion?` · ${c.observacion}`:""}</div>
                  </div>
                  <div style={{display:"flex",gap:12,fontSize:13,flexWrap:"wrap"}}>
                    {c.ingreso>0&&<span style={{color:C.blue,fontWeight:700}}>💰 {COP(c.ingreso)}</span>}
                    {c.totalEfectivo>0&&<span style={{color:C.green}}>💵 {COP(c.totalEfectivo)}</span>}
                    {c.diferencia!=null&&<span style={{color:c.diferencia===0?C.green:c.diferencia>0?"#fcd34d":C.red,fontWeight:700}}>{c.diferencia>=0?"+":""}{COP(c.diferencia)}</span>}
                  </div>
                </div>
              ))}
            </div>
          </div>}
          {/* Anulaciones */}
          {anulacionesHist.length>0&&<div style={{marginBottom:18}}>
            <div style={{fontWeight:700,fontSize:13,color:C.red,marginBottom:8}}>❌ Anulaciones registradas ({anulacionesHist.length})</div>
            <div style={{background:C.card,border:`1px solid ${C.redBd}`,borderRadius:10,overflow:"hidden"}}>
              <table style={{width:"100%",borderCollapse:"collapse",fontSize:13}}>
                <thead><tr style={{background:C.redBg,borderBottom:`1px solid ${C.redBd}`}}>
                  {["Fecha","Producto","Cajero","Obs / Motivo"].map((h,i)=>(
                    <th key={i} style={{padding:"7px 12px",textAlign:"left",fontSize:13,textTransform:"uppercase",color:C.red,fontWeight:700}}>{h}</th>
                  ))}
                </tr></thead>
                <tbody>
                  {anulacionesHist.map((v,i)=>{
                    const raw=v.metodoPago||v.observacion||v.motivo||"";
                    const sinPrefijo=raw.startsWith("ANULADO:")?raw.slice(8).trim():raw;
                    const partes=sinPrefijo.split("|");
                    const motivo=(partes[0]||"").trim();
                    const origen=(partes[1]||"").trim();
                    return(
                    <tr key={i} style={{borderBottom:`1px solid ${C.border}`,background:i%2===0?C.card:C.gray,opacity:.9}}>
                      <td style={{padding:"7px 12px",color:C.muted,whiteSpace:"nowrap"}}>{fechaLeg(v.fecha)}</td>
                      <td style={{padding:"7px 12px",color:C.text,fontWeight:500}}>{v.nombre}</td>
                      <td style={{padding:"7px 12px",color:C.muted}}>{v.usuario||v.cajero||"—"}</td>
                      <td style={{padding:"7px 12px",fontSize:13}}>
                        {motivo
                          ?<span style={{color:C.red,fontWeight:600}}>{motivo}{origen?<span style={{color:C.muted,fontWeight:400}}> · {origen}</span>:""}</span>
                          :<span style={{color:C.muted}}>—</span>}
                      </td>
                    </tr>
                    );
                  })}
                </tbody>
              </table>
            </div>
          </div>}
          {histAgrFil.length===0
            ?<div style={{background:C.gray,border:`1px solid ${C.border}`,borderRadius:12,padding:32,textAlign:"center",color:C.muted}}><div style={{fontSize:32,marginBottom:8}}>📋</div><div style={{fontWeight:700,fontSize:16}}>Sin ventas en este período</div></div>
            :<div style={{display:"grid",gap:10}}>
              {histAgrFil.filter(dia=>dia.items.some(it=>it.tipoVenta!=="cierre"&&it.tipoVenta!=="apertura")).map(dia=>{
                const itemsVenta=dia.items.filter(it=>it.tipoVenta!=="cierre"&&it.tipoVenta!=="apertura"&&it.tipoVenta!=="anulado");
                const itemsAnulados=dia.items.filter(it=>it.tipoVenta==="anulado");
                const ingNet=itemsVenta.reduce((a,it)=>a+(it.ingreso||0),0);
                const cosNet=itemsVenta.reduce((a,it)=>a+(it.costo||0),0);
                const ganNet=itemsVenta.reduce((a,it)=>a+(it.ganancia||0),0);
                return(
                <div key={dia.fecha} style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:11,overflow:"hidden"}}>
                  <div style={{background:C.gray,padding:"10px 14px",display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",gap:8,borderBottom:`1px solid ${C.border}`}}>
                    <div style={{display:"flex",alignItems:"center",gap:10}}>
                      <div style={{fontWeight:700,fontSize:16,color:C.text}}>📅 {fechaLeg(dia.fecha)}</div>
                    </div>
                    <div style={{display:"flex",gap:14,fontSize:13}}>
                      <span style={{color:C.blue}}>💰 {COP(ingNet)}</span>
                      <span style={{color:C.red}}>💸 {COP(cosNet)}</span>
                      <span style={{color:C.green}}>📈 {COP(ganNet)}</span>
                    </div>
                  </div>
                  <table style={{width:"100%",borderCollapse:"collapse",fontSize:13}}>
                    <thead><tr style={{borderBottom:`1px solid ${C.border}`}}>
                      {["Producto","Tipo","Cant.","Unid.","Ingreso","Costo","Ganancia"].map((h,i)=>(
                        <th key={i} style={{padding:"7px 12px",textAlign:i>=4?"right":"left",fontSize:13,textTransform:"uppercase",color:C.muted,fontWeight:700}}>{h}</th>
                      ))}
                    </tr></thead>
                    <tbody>
                      {itemsVenta.map((it,i)=>(
                        <tr key={i} style={{borderBottom:`1px solid ${C.border}`,background:i%2===0?C.card:C.gray}}>
                          <td style={{padding:"7px 12px",fontWeight:500,color:C.text}}>{it.nombre}</td>
                          <td style={{padding:"7px 12px"}}><span style={{background:C.gray,borderRadius:5,padding:"2px 6px",fontSize:13,color:C.muted}}>{it.tipoVenta}</span></td>
                          <td style={{padding:"7px 12px",color:C.text}}>{it.cantidad}</td>
                          <td style={{padding:"7px 12px",color:C.red}}>{it.unidadesDesc}</td>
                          <td style={{padding:"7px 12px",textAlign:"right",color:C.blue,fontWeight:600}}>{COP(it.ingreso||0)}</td>
                          <td style={{padding:"7px 12px",textAlign:"right",color:C.red}}>{COP(it.costo||0)}</td>
                          <td style={{padding:"7px 12px",textAlign:"right",color:C.green,fontWeight:600}}>{COP(it.ganancia||0)}</td>
                        </tr>
                      ))}
                    </tbody>
                  </table>
                </div>
                );
              })}
            </div>
          }
        </div>}

        {/* ══ ANALYTICS ══ */}
        {tab==="analytics"&&(()=>{
          const ahora=new Date();
          const diasMap={};
          for(let i=29;i>=0;i--){const d=new Date(ahora);d.setDate(d.getDate()-i);const k=d.toLocaleDateString("es-CO",{day:"2-digit",month:"2-digit",year:"numeric"});diasMap[k]={fecha:k,ing:0,gan:0,d};}
          histAgr.forEach(dia=>{if(diasMap[dia.fecha]){diasMap[dia.fecha].ing+=dia.ing;diasMap[dia.fecha].gan+=dia.gan;}});
          const dias30=Object.values(diasMap);
          const maxIng=Math.max(...dias30.map(d=>d.ing),1);
          const hoyKey=ahora.toLocaleDateString("es-CO",{day:"2-digit",month:"2-digit",year:"numeric"});
          const semKey=new Date(ahora);semKey.setDate(semKey.getDate()-7);
          const statHoy=histAgr.find(d=>d.fecha===hoyKey)||{ing:0,gan:0,items:[]};
          const stat7=histAgr.filter(d=>{const dd=parseFechaHist(d.fecha);return dd&&(ahora-dd)/(86400000)<7;});
          const stat30=histAgr.filter(d=>{const dd=parseFechaHist(d.fecha);return dd&&(ahora-dd)/(86400000)<30;});
          const sum=(arr,k)=>arr.reduce((a,d)=>a+(d[k]||0),0);
          const mejorDia=histAgr.reduce((a,d)=>d.ing>a.ing?d:a,{ing:0,fecha:"—"});
          const W=500,H=160,PL=8,PR=8,PT=10,PB=28;
          const cw=W-PL-PR,ch=H-PT-PB;
          const px=i=>PL+i*(cw/(dias30.length-1));
          const py=v=>PT+ch-(v/maxIng)*ch;
          const points=dias30.map((d,i)=>({x:px(i),y:py(d.ing),ing:d.ing,gan:d.gan,fecha:d.fecha}));
          const pathD=points.map((p,i)=>`${i===0?"M":"L"}${p.x.toFixed(1)},${p.y.toFixed(1)}`).join(" ");
          const areaD=`${pathD} L${points[points.length-1].x.toFixed(1)},${(PT+ch).toFixed(1)} L${points[0].x.toFixed(1)},${(PT+ch).toFixed(1)} Z`;
          const[tooltip,setTooltip]=React.useState(null);
          const ticksY=3;
          return(
            <div style={{paddingBottom:20}}>
              {/* KPI CARDS */}
              <div style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:10,marginBottom:14}}>
                {[
                  {l:"Hoy",ing:statHoy.ing,gan:statHoy.gan,icon:"📅",c:C.accent},
                  {l:"7 días",ing:sum(stat7,"ing"),gan:sum(stat7,"gan"),icon:"📆",c:C.blue},
                  {l:"30 días",ing:sum(stat30,"ing"),gan:sum(stat30,"gan"),icon:"🗓",c:C.green},
                  {l:"Mejor día",ing:mejorDia.ing,gan:0,sub:mejorDia.fecha,icon:"🏆",c:"#f59e0b"},
                ].map((s,i)=>(
                  <div key={i} style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:12,padding:"14px 16px",borderLeft:`3px solid ${s.c}`}}>
                    <div style={{fontSize:12,color:C.muted,marginBottom:4,fontWeight:600}}>{s.icon} {s.l}{s.sub?` · ${s.sub}`:""}</div>
                    <div style={{fontWeight:900,fontSize:20,color:s.c}}>{COP(s.ing)}</div>
                    {s.gan>0&&<div style={{fontSize:12,color:C.green,marginTop:2}}>Gan: {COP(s.gan)}</div>}
                  </div>
                ))}
              </div>

              {/* GRÁFICA LÍNEA */}
              <div style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:12,padding:"14px 14px 10px",marginBottom:14}}>
                <div style={{fontWeight:700,fontSize:15,color:C.text,marginBottom:10}}>📈 Ventas diarias — últimos 30 días</div>
                <div style={{overflowX:"auto"}}>
                  <svg viewBox={`0 0 ${W} ${H}`} style={{width:"100%",minWidth:300,display:"block"}} onMouseLeave={()=>setTooltip(null)}>
                    <defs>
                      <linearGradient id="agrad" x1="0" y1="0" x2="0" y2="1">
                        <stop offset="0%" stopColor={C.accent} stopOpacity="0.3"/>
                        <stop offset="100%" stopColor={C.accent} stopOpacity="0.02"/>
                      </linearGradient>
                    </defs>
                    {/* Grid lines */}
                    {Array.from({length:ticksY+1},(_,i)=>{const yv=(maxIng/ticksY)*i;const yp=py(yv);return(
                      <g key={i}>
                        <line x1={PL} y1={yp} x2={W-PR} y2={yp} stroke={C.border} strokeWidth="0.5" strokeDasharray="3,3"/>
                        <text x={PL} y={yp-2} fontSize="8" fill={C.muted} textAnchor="start">{yv>=1000000?`${(yv/1000000).toFixed(1)}M`:yv>=1000?`${(yv/1000).toFixed(0)}K`:yv}</text>
                      </g>
                    );})}
                    {/* Area */}
                    <path d={areaD} fill="url(#agrad)"/>
                    {/* Line */}
                    <path d={pathD} fill="none" stroke={C.accent} strokeWidth="2" strokeLinejoin="round" strokeLinecap="round"/>
                    {/* X labels — cada 7 días */}
                    {points.filter((_,i)=>i%7===0||i===points.length-1).map((p,i)=>(
                      <text key={i} x={p.x} y={H-6} fontSize="8" fill={C.muted} textAnchor="middle">{p.fecha.slice(0,5)}</text>
                    ))}
                    {/* Dots + hover */}
                    {points.map((p,i)=>(
                      <circle key={i} cx={p.x} cy={p.y} r={p.ing>0?3:1.5}
                        fill={p.ing>0?C.accent:C.border} stroke={C.card} strokeWidth="1.5"
                        style={{cursor:"pointer"}}
                        onMouseEnter={()=>setTooltip(p)} onTouchStart={()=>setTooltip(p)}/>
                    ))}
                    {/* Tooltip */}
                    {tooltip&&tooltip.ing>0&&(()=>{
                      const tx=Math.min(Math.max(tooltip.x,40),W-40);
                      const ty=Math.max(tooltip.y-30,PT+4);
                      return(
                        <g>
                          <rect x={tx-38} y={ty-14} width={76} height={30} rx="5" fill={C.card} stroke={C.accent} strokeWidth="1"/>
                          <text x={tx} y={ty} fontSize="9" fill={C.accent} textAnchor="middle" fontWeight="700">{tooltip.fecha.slice(0,5)}</text>
                          <text x={tx} y={ty+10} fontSize="9" fill={C.text} textAnchor="middle">{COP(tooltip.ing)}</text>
                        </g>
                      );
                    })()}
                  </svg>
                </div>
              </div>

              {/* TOP PRODUCTOS */}
              <div style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:12,overflow:"hidden"}}>
                <div style={{padding:"12px 16px",borderBottom:`1px solid ${C.border}`,fontWeight:700,fontSize:15,color:C.text}}>🏆 Productos más vendidos</div>
                {ranking.length===0?<div style={{padding:24,textAlign:"center",color:C.muted}}>Sin datos</div>:
                <table style={{width:"100%",borderCollapse:"collapse",fontSize:13}}>
                  <thead><tr style={{background:C.gray}}>
                    {["#","Producto","Unidades","Ingresos","Ganancia"].map((h,i)=>(
                      <th key={i} style={{padding:"9px 12px",textAlign:i>=2?"right":"left",fontSize:12,textTransform:"uppercase",color:C.muted,fontWeight:700}}>{h}</th>
                    ))}
                  </tr></thead>
                  <tbody>
                    {ranking.map((r,i)=>(
                      <tr key={i} style={{borderBottom:`1px solid ${C.border}`,background:i%2===0?C.card:C.gray}}>
                        <td style={{padding:"9px 12px",fontWeight:800,color:i===0?"#fcd34d":i===1?"#9ca3af":i===2?"#cd7f32":C.muted,fontSize:15}}>{i===0?"🥇":i===1?"🥈":i===2?"🥉":`${i+1}`}</td>
                        <td style={{padding:"9px 12px",fontWeight:i<3?700:400,color:C.text}}>{r.nombre}</td>
                        <td style={{padding:"9px 12px",textAlign:"right",fontWeight:700,color:C.text}}>{r.unidades}</td>
                        <td style={{padding:"9px 12px",textAlign:"right",color:C.blue||C.accent,fontWeight:600}}>{COP(r.ing)}</td>
                        <td style={{padding:"9px 12px",textAlign:"right",color:C.green,fontWeight:600}}>{COP(r.gan)}</td>
                      </tr>
                    ))}
                  </tbody>
                </table>}
              </div>
            </div>
          );
        })()}

        {/* ══ RESURTIDO ══ */}
        {tab==="resurtido"&&<div>
          <div className="np" style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14,flexWrap:"wrap",gap:10}}>
            <div>
              <div style={{fontWeight:800,fontSize:19,color:C.text}}>📋 Informe de Resurtido</div>
              <div style={{fontSize:13,color:C.muted}}>{DIAS[HOY.getDay()]}, {HOY.getDate()} de {MESES[HOY.getMonth()]} {HOY.getFullYear()}{esLunes?" · ✅ Día de resurtido":""}</div>
            </div>
            <div style={{display:"flex",gap:8}}>
              <button onClick={()=>window.print()} style={{...btnS(C.text,C.card,C.border)}}>🖨️ Imprimir</button>
            </div>
          </div>
          {itemsResurtir.length===0
            ?<div style={{background:C.greenBg,border:`1px solid ${C.greenBd}`,borderRadius:12,padding:40,textAlign:"center"}}><div style={{fontSize:48,marginBottom:8}}>✅</div><div style={{fontWeight:800,color:C.green,fontSize:20}}>¡Todo el inventario está al día!</div><div style={{color:C.green,opacity:.7,marginTop:4}}>No hay productos bajo el mínimo</div></div>
            :<>
              <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(140px,1fr))",gap:10,marginBottom:16}}>
                {[
                  {l:"Productos",v:itemsResurtir.length,icon:"📦",c:C.red,sub:"bajo mínimo"},
                  {l:"Unidades",v:itemsResurtir.reduce((a,p)=>a+p.faltante,0),icon:"🔢",c:"#f59e0b",sub:"que faltan"},
                  {l:"Cajas",v:itemsResurtir.reduce((a,p)=>a+p.cajasNeed,0),icon:"📫",c:C.accent,sub:"a pedir"},
                  {l:"Inversión",v:COP(costoResurtir),icon:"💰",c:C.green,sub:"estimada"},
                ].map((s,i)=>(
                  <div key={i} style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:12,padding:"14px 16px",borderTop:`3px solid ${s.c}`}}>
                    <div style={{fontSize:12,color:C.muted,marginBottom:4}}>{s.icon} {s.l}</div>
                    <div style={{fontWeight:900,fontSize:20,color:s.c}}>{s.v}</div>
                    <div style={{fontSize:11,color:C.muted,marginTop:2}}>{s.sub}</div>
                  </div>
                ))}
              </div>
              <div style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:12,overflow:"hidden",overflowX:"auto"}}>
                <table style={{width:"100%",borderCollapse:"collapse",minWidth:500}}>
                  <thead><tr>{["Producto","Categoría","Stock","Mín (cajas)","Faltan","Cajas a pedir","Costo est."].map((h,i)=>(<th key={i} style={thS}>{h}</th>))}</tr></thead>
                  <tbody>
                    {itemsResurtir.map((p,i)=>(
                      <tr key={p.id} style={{borderBottom:`1px solid ${C.border}`,background:i%2===0?C.card:C.gray}}>
                        <td style={{padding:"11px 14px",fontWeight:600,color:C.text}}>{p.nombre}</td>
                        <td style={{padding:"11px 14px"}}><span style={{background:C.gray,borderRadius:5,padding:"2px 7px",fontSize:13,color:C.muted}}>{p.categoria}</span></td>
                        <td style={{padding:"11px 14px",color:C.red,fontWeight:700}}>{p.stock}</td>
                        <td style={{padding:"11px 14px",color:C.muted}}>{p.cajUnid>1?`${Math.ceil(p.stockMin/(p.cajUnid||1))} caj.`:p.stockMin}</td>
                        <td style={{padding:"11px 14px"}}><span style={{background:C.redBg,color:C.red,borderRadius:6,padding:"3px 10px",fontWeight:800}}>+{p.faltante} unid</span></td>
                        <td style={{padding:"11px 14px",fontWeight:700,color:C.text}}>{p.cajasNeed} caja{p.cajasNeed>1?"s":""}</td>
                        <td style={{padding:"11px 14px",fontWeight:700,color:C.text}}>{COP(p.costo)}</td>
                      </tr>
                    ))}
                  </tbody>
                  <tfoot><tr style={{background:C.gray,borderTop:`2px solid ${C.border}`}}>
                    <td colSpan={6} style={{padding:"11px 14px",fontWeight:800,textAlign:"right",color:C.muted}}>TOTAL A INVERTIR:</td>
                    <td style={{padding:"11px 14px",fontWeight:800,color:C.red,fontSize:16}}>{COP(costoResurtir)}</td>
                  </tr></tfoot>
                </table>
              </div>
            </>
          }
        </div>}

        {/* ══ FINANCIERO ══ */}
        {tab==="financiero"&&<div>
          <div className="np" style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14,flexWrap:"wrap",gap:10}}>
            <div><div style={{fontWeight:800,fontSize:19,color:C.text}}>💰 Informe Financiero</div><div style={{fontSize:13,color:C.muted}}>{MESES[HOY.getMonth()]} {HOY.getFullYear()}</div></div>
            <button onClick={()=>window.print()} style={{...btnS(C.text,C.card,C.border)}}>🖨️ Imprimir</button>
          </div>
          <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(150px,1fr))",gap:10,marginBottom:18}}>
            {[{l:"Valor invertido",v:COP(valorCompra),c:C.red,d:"Costo del stock"},{l:"Valor a precio venta",v:COP(valorVenta),c:C.blue,d:"Si se vende todo"},{l:"Ganancia bruta",v:COP(ganancia),c:C.green,d:"Venta menos compra"},{l:"Margen general",v:PCT(valorCompra,valorVenta)+"%",c:mc(PCT(valorCompra,valorVenta),C),d:"% sobre costo"},{l:"Ganancia neta",v:COP(ganancia),c:C.green,d:"Ganancia total del inventario"}].map((s,i)=>(
              <div key={i} style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:11,padding:"12px 14px",borderTop:`3px solid ${s.c}`}}>
                <div style={{fontSize:13,color:C.muted,marginBottom:3}}>{s.l}</div>
                <div style={{fontWeight:800,fontSize:19,color:s.c,marginBottom:2}}>{s.v}</div>
                <div style={{fontSize:13,color:C.muted}}>{s.d}</div>
              </div>
            ))}
          </div>
          <div style={{fontWeight:700,fontSize:16,marginBottom:10,color:C.text}}>Por categoría</div>
          <div style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:12,overflow:"hidden",overflowX:"auto"}}>
            <table style={{width:"100%",borderCollapse:"collapse",minWidth:500}}>
              <thead><tr>{["Categoría","Prods","Valor compra","Valor venta","Ganancia","Margen"].map((h,i)=>(<th key={i} style={thS}>{h}</th>))}</tr></thead>
              <tbody>
                {porCat.map((c,i)=>(
                  <tr key={c.cat} style={{borderBottom:`1px solid ${C.border}`,background:i%2===0?C.card:C.gray}}>
                    <td style={{padding:"10px 14px",fontWeight:700,color:C.text}}>{c.cat}</td>
                    <td style={{padding:"10px 14px",color:C.muted}}>{c.n}</td>
                    <td style={{padding:"10px 14px",color:C.red,fontWeight:600}}>{COP(c.vc)}</td>
                    <td style={{padding:"10px 14px",color:C.blue,fontWeight:600}}>{COP(c.vv)}</td>
                    <td style={{padding:"10px 14px",color:C.green,fontWeight:700}}>{COP(c.gan)}</td>
                    <td style={{padding:"10px 14px"}}><span style={{color:mc(PCT(c.vc,c.vv),C),fontWeight:800}}>{PCT(c.vc,c.vv)}%</span></td>
                  </tr>
                ))}
              </tbody>
              <tfoot><tr style={{background:C.gray,borderTop:`2px solid ${C.border}`}}>
                <td style={{padding:"10px 14px",fontWeight:800,color:C.text}}>TOTAL</td>
                <td style={{padding:"10px 14px",color:C.muted}}>{products.length}</td>
                <td style={{padding:"10px 14px",fontWeight:800,color:C.red}}>{COP(valorCompra)}</td>
                <td style={{padding:"10px 14px",fontWeight:800,color:C.blue}}>{COP(valorVenta)}</td>
                <td style={{padding:"10px 14px",fontWeight:800,color:C.green}}>{COP(ganancia)}</td>
                <td style={{padding:"10px 14px",fontWeight:800,color:C.text}}>{PCT(valorCompra,valorVenta)}%</td>
              </tr></tfoot>
            </table>
          </div>
        </div>}



      {/* ══ RETIROS ══ */}
      {tab==="retiros"&&<div>
        <div className="np" style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14,flexWrap:"wrap",gap:10}}>
          <div>
            <div style={{fontWeight:800,fontSize:19,color:C.text}}>💸 Retiros de Ganancia</div>
            <div style={{fontSize:13,color:C.muted}}>Registro de dinero retirado del negocio</div>
          </div>
        </div>
        {/* KPI saldo */}
        <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(150px,1fr))",gap:10,marginBottom:18}}>
          {[
            {l:"📈 Ganancia total acumulada",v:COP(gananciaTotal),c:C.green,bg:C.greenBg,bd:C.greenBd},
            {l:"💸 Total retirado",v:COP(totalRetirado),c:C.red,bg:C.redBg,bd:C.redBd},
            {l:"🏦 Saldo disponible",v:COP(saldoDisponible),c:saldoDisponible>=0?C.accent:C.red,bg:saldoDisponible>=0?C.accentBg:C.redBg,bd:saldoDisponible>=0?C.accent:C.red},
          ].map((s,i)=>(
            <div key={i} style={{background:s.bg,border:`1px solid ${s.bd}`,borderRadius:11,padding:"14px 16px",borderTop:`3px solid ${s.c}`}}>
              <div style={{fontSize:13,color:C.muted,marginBottom:4,fontWeight:700}}>{s.l}</div>
              <div style={{fontWeight:900,fontSize:20,color:s.c}}>{s.v}</div>
            </div>
          ))}
        </div>
        {/* Formulario nuevo retiro */}
        <div style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:12,padding:"16px 20px",marginBottom:18}}>
          <div style={{fontWeight:700,fontSize:16,color:C.text,marginBottom:12}}>➕ Registrar nuevo retiro</div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 2fr auto",gap:10,alignItems:"end"}}>
            <div>
              <div style={{fontSize:13,color:C.muted,marginBottom:4}}>Monto *</div>
              <input type="text" inputMode="numeric" placeholder="$ 0" value={retiroMonto}
                onChange={e=>setRetiroMonto(fmtInput(e.target.value))}
                style={{width:"100%",background:C.inp,border:`1px solid ${C.border}`,borderRadius:8,color:C.text,padding:"10px 12px",fontSize:16,fontWeight:800,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",textAlign:"center"}}/>
            </div>
            <div>
              <div style={{fontSize:13,color:C.muted,marginBottom:4}}>Observación (opcional)</div>
              <input type="text" placeholder="ej: pago nómina, gastos personales..." value={retiroObs}
                onChange={e=>setRetiroObs(e.target.value)}
                style={{width:"100%",background:C.inp,border:`1px solid ${C.border}`,borderRadius:8,color:C.text,padding:"10px 12px",fontSize:13,outline:"none",fontFamily:"'Inter',system-ui,sans-serif"}}/>
            </div>
            <button onClick={()=>{
              const m=parseInput(retiroMonto);
              if(!m){toast2("Ingresa un monto","err");return;}
              const nuevo={fecha:fechaHoraExacta(),monto:m,observacion:retiroObs.trim()};
              setRetiroMonto("");setRetiroObs("");
              NexusFirebase.saveRetiro(empresaId,nuevo).then(()=>{toast2(`✅ Retiro de ${COP(m)} registrado`);cargarRetiros();}).catch(()=>toast2("Error al guardar","err"));
            }} style={{background:C.btnGrad,color:"#fff",border:"none",borderRadius:8,padding:"10px 20px",fontSize:13,fontWeight:700,cursor:"pointer",whiteSpace:"nowrap"}}>
              💸 Registrar
            </button>
          </div>
        </div>
        {/* Historial retiros */}
        {retiros.length===0
          ?<div style={{background:C.gray,border:`1px solid ${C.border}`,borderRadius:12,padding:32,textAlign:"center",color:C.muted}}>
            <div style={{fontSize:32,marginBottom:8}}>💸</div>
            <div style={{fontWeight:700}}>Sin retiros registrados</div>
          </div>
          :<div style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:12,overflow:"hidden"}}>
            <table style={{width:"100%",borderCollapse:"collapse",fontSize:13}}>
              <thead><tr style={{background:C.gray}}>
                {["Fecha","Monto","Observación",""].map((h,i)=>(
                  <th key={i} style={{padding:"10px 14px",textAlign:i===1?"right":"left",fontSize:13,textTransform:"uppercase",color:C.muted,fontWeight:700}}>{h}</th>
                ))}
              </tr></thead>
              <tbody>
                {retiros.map((r,i)=>(
                  <tr key={r.id} style={{borderBottom:`1px solid ${C.border}`,background:i%2===0?C.card:C.gray}}>
                    <td style={{padding:"10px 14px",color:C.muted,fontSize:13}}>{fechaLeg(r.fecha)}</td>
                    <td style={{padding:"10px 14px",textAlign:"right",fontWeight:800,color:C.accent,fontSize:16}}>{COP(r.monto)}</td>
                    <td style={{padding:"10px 14px",color:C.text}}>{r.observacion||<span style={{color:C.muted}}>—</span>}</td>
                    <td style={{padding:"10px 14px",textAlign:"center"}}>
                      <button onClick={()=>{
                        if(!r.fbId){toast2("Sin ID","err");return;}
                        NexusFirebase.deleteRetiro(empresaId,r.fbId).then(()=>{toast2("Retiro eliminado");cargarRetiros();}).catch(()=>toast2("Error al eliminar","err"));
                      }} style={{background:C.redBg,color:C.red,border:`1px solid ${C.redBd}`,borderRadius:6,padding:"4px 10px",fontSize:13,fontWeight:700,cursor:"pointer"}}>
                        🗑️
                      </button>
                    </td>
                  </tr>
                ))}
              </tbody>
              <tfoot><tr style={{background:C.gray,borderTop:`2px solid ${C.border}`}}>
                <td style={{padding:"10px 14px",fontWeight:700,color:C.muted,fontSize:13}}>TOTAL RETIRADO</td>
                <td style={{padding:"10px 14px",textAlign:"right",fontWeight:900,color:C.red,fontSize:16}}>{COP(totalRetirado)}</td>
                <td colSpan={2}></td>
              </tr></tfoot>
            </table>
          </div>
        }
      </div>}

      {/* TURNOS TAB */}
      {tab==="turnos"&&<div>
        <div className="np" style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14,flexWrap:"wrap",gap:8}}>
          <div>
            <div style={{fontWeight:800,fontSize:18,color:C.text}}>🔄 Cierres de Turno</div>
            <div style={{fontSize:13,color:C.muted}}>Historial de aperturas y cierres de caja</div>
          </div>
          <button onClick={cargarTurnos} disabled={cargandoTurnos} style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:7,padding:"8px 16px",color:C.accent,fontWeight:700,fontSize:13,cursor:"pointer"}}>{cargandoTurnos?"⏳ Cargando...":"🔄 Actualizar"}</button>
        </div>
        {(()=>{
          const cerrados=turnos.filter(t=>t.estado==="cerrado"&&t.totalCobrado>0);
          if(cerrados.length>0){
            const totalAcum=cerrados.reduce((a,t)=>a+(t.totalCobrado||0),0);
            const totalEf=cerrados.reduce((a,t)=>a+(t.totalEfectivo||0),0);
            const totalTr=cerrados.reduce((a,t)=>a+(t.totalTransfer||0),0);
            return(
              <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(140px,1fr))",gap:10,marginBottom:18}}>
                {[{l:"🏆 Total acumulado",v:COP(totalAcum),c:C.green},{l:"💵 Efectivo total",v:COP(totalEf),c:C.text},{l:"📲 Transfer total",v:COP(totalTr),c:C.accent},{l:"📋 Turnos cerrados",v:cerrados.length,c:C.muted}].map((s,i)=>(
                  <div key={i} style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:10,padding:"12px 14px",borderTop:`3px solid ${s.c}`}}>
                    <div style={{fontSize:12,color:C.muted,marginBottom:3}}>{s.l}</div>
                    <div style={{fontWeight:900,fontSize:18,color:s.c}}>{s.v}</div>
                  </div>
                ))}
              </div>
            );
          }
        })()}
        {cargandoTurnos&&<div style={{textAlign:"center",padding:40,color:C.muted}}>⏳ Cargando...</div>}
        {!cargandoTurnos&&turnos.length===0&&<div style={{textAlign:"center",padding:40,color:C.muted}}>Sin turnos registrados</div>}
        {!cargandoTurnos&&turnos.length>0&&<div style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:12,overflow:"hidden"}}>
          <div style={{overflowX:"auto"}}>
            <table style={{width:"100%",borderCollapse:"collapse",fontSize:13}}>
              <thead>
                <tr style={{background:C.gray}}>
                  {["Cajero","Apertura","Cierre","Ini. Efect.","Total","Efectivo","Transfer.","Diferencia","Obs.","Estado"].map((h,i)=>(
                    <th key={i} style={{padding:"10px 12px",textAlign:"center",fontSize:12,textTransform:"uppercase",letterSpacing:.6,color:C.muted,fontWeight:700,whiteSpace:"nowrap",borderBottom:`1px solid ${C.border}`}}>{h}</th>
                  ))}
                </tr>
              </thead>
              <tbody>
                {turnos.map((t,i)=>{
                  const fmt=d=>{if(!d)return"—";const dd=d?.toDate?d.toDate():new Date(d);return dd.toLocaleString("es-CO",{day:"2-digit",month:"2-digit",hour:"2-digit",minute:"2-digit"});};
                  const diff=t.diferencia;
                  const abierto=t.estado==="abierto";
                  return(
                    <tr key={t.fbId} style={{borderBottom:`1px solid ${C.border}`,background:i%2===0?C.card:C.gray}}>
                      <td style={{padding:"10px 12px",fontWeight:700,color:C.text,whiteSpace:"nowrap",textAlign:"center"}}>👤 {t.usuario||"—"}</td>
                      <td style={{padding:"10px 12px",color:C.muted,whiteSpace:"nowrap",textAlign:"center"}}>{fmt(t.apertura)}</td>
                      <td style={{padding:"10px 12px",color:C.muted,whiteSpace:"nowrap",textAlign:"center"}}>{abierto?"—":fmt(t.cierre)}</td>
                      <td style={{padding:"10px 12px",textAlign:"center",color:C.muted}}>{COP(t.efectivoInicial||0)}</td>
                      <td style={{padding:"10px 12px",textAlign:"center",fontWeight:800,color:C.green}}>{t.totalCobrado>0?COP(t.totalCobrado):"—"}</td>
                      <td style={{padding:"10px 12px",textAlign:"center",color:C.text}}>{t.totalEfectivo>0?COP(t.totalEfectivo):"—"}</td>
                      <td style={{padding:"10px 12px",textAlign:"center",color:C.accent}}>{t.totalTransfer>0?COP(t.totalTransfer):"—"}</td>
                      <td style={{padding:"10px 12px",textAlign:"center",fontWeight:700,color:diff===undefined||abierto?C.muted:diff===0?"#4ade80":diff>0?"#fcd34d":C.red}}>
                        {diff===undefined||abierto?"—":`${diff>=0?"+":""}${COP(diff)}`}
                      </td>
                      <td style={{padding:"10px 12px",color:C.muted,maxWidth:120,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap",textAlign:"center"}} title={t.observacion||""}>{t.observacion||"—"}</td>
                      <td style={{padding:"10px 12px",textAlign:"center"}}>
                        <span style={{color:abierto?"#4ade80":C.muted,fontSize:12,fontWeight:700,whiteSpace:"nowrap"}}>
                          {abierto?"🟢 Abierto":"✅ Cerrado"}
                        </span>
                      </td>
                    </tr>
                  );
                })}
              </tbody>
            </table>
          </div>
        </div>}
      </div>}

      {/* FIADOS TAB */}
      {tab==="fiados"&&<div style={{padding:16,maxWidth:700,margin:"0 auto",width:"100%"}}>
        <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14,flexWrap:"wrap",gap:8}}>
          <div style={{fontWeight:800,fontSize:18,color:C.accent}}>📋 Fiados</div>
          <button onClick={cargarFiadosAdmin} disabled={cargandoFiadosAdmin} style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:7,padding:"8px 16px",color:C.accent,fontWeight:700,fontSize:13,cursor:"pointer"}}>{cargandoFiadosAdmin?"⏳ Cargando...":"🔄 Cargar"}</button>
        </div>
        {fiadosAdmin.length===0&&!cargandoFiadosAdmin&&<div style={{textAlign:"center",padding:40,color:C.muted}}>Toca "Cargar" para ver los fiados</div>}
        {["pendiente","pagado"].map(estado=>{
          const lista=fiadosAdmin.filter(f=>(estado==="pendiente"?!f.pagado:f.pagado));
          if(!lista.length)return null;
          const totalPend=lista.reduce((a,f)=>a+(f.total||0),0);
          return(
            <div key={estado} style={{marginBottom:20}}>
              <div style={{fontWeight:700,fontSize:14,color:estado==="pendiente"?C.red:"#4ade80",marginBottom:8,display:"flex",justifyContent:"space-between"}}>
                <span>{estado==="pendiente"?"⏳ Pendientes":"✅ Pagados"} ({lista.length})</span>
                {estado==="pendiente"&&<span style={{color:C.red,fontWeight:900}}>{COP(totalPend)}</span>}
              </div>
              {lista.map(f=>{
                const ts=f.ts?.toDate?f.ts.toDate():null;
                const fecha=ts?ts.toLocaleDateString("es-CO",{day:"2-digit",month:"2-digit",year:"numeric"}):"—";
                return(
                  <div key={f.fbId} style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:11,padding:14,marginBottom:8}}>
                    <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",gap:8}}>
                      <div>
                        <div style={{fontWeight:800,fontSize:15,color:C.text}}>{f.cliente}</div>
                        <div style={{fontSize:13,color:C.muted}}>{f.telefono} · {fecha}</div>
                        {f.fechaLimite&&<div style={{fontSize:12,color:C.red,fontWeight:700}}>Vence: {f.fechaLimite}</div>}
                        {f.metodoPago&&<div style={{fontSize:12,color:"#4ade80",marginTop:2}}>Pagado con: {f.metodoPago}</div>}
                      </div>
                      <div style={{textAlign:"right",flexShrink:0}}>
                        <div style={{fontWeight:900,fontSize:18,color:C.accent}}>{COP(f.total)}</div>
                        <div style={{fontSize:11,color:C.muted}}>{f.origen||"barra"}</div>
                      </div>
                    </div>
                    {!f.pagado&&<button onClick={()=>{setModalPagoAdmin(f);setMetodoPagoAdmin("Efectivo");}} style={{marginTop:10,width:"100%",background:"linear-gradient(135deg,#16a34a,#15803d)",color:"#fff",border:"none",borderRadius:8,padding:"9px",fontWeight:800,fontSize:14,cursor:"pointer",fontFamily:"'Inter',system-ui,sans-serif"}}>✅ Marcar Pagado</button>}
                  </div>
                );
              })}
            </div>
          );
        })}
        {modalPagoAdmin&&<div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.75)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:300,padding:16}}>
          <div style={{background:C.card,border:`1px solid ${C.accent}`,borderRadius:14,padding:24,maxWidth:360,width:"100%"}}>
            <div style={{fontWeight:800,fontSize:17,color:C.accent,marginBottom:8}}>💰 Cobrar Fiado</div>
            <div style={{fontWeight:700,color:C.text,marginBottom:4}}>{modalPagoAdmin.cliente} — {COP(modalPagoAdmin.total)}</div>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8,margin:"16px 0"}}>
              {["Efectivo","Transferencia"].map(m=>(
                <button key={m} onClick={()=>setMetodoPagoAdmin(m)} style={{padding:"10px",borderRadius:8,border:`2px solid ${metodoPagoAdmin===m?C.accent:C.border}`,background:metodoPagoAdmin===m?C.accentBg:"transparent",color:metodoPagoAdmin===m?C.accent:C.muted,fontWeight:700,cursor:"pointer",fontFamily:"'Inter',system-ui,sans-serif"}}>{m}</button>
              ))}
            </div>
            <div style={{display:"flex",gap:8}}>
              <button onClick={()=>setModalPagoAdmin(null)} style={{flex:1,background:C.inp,border:`1px solid ${C.border}`,borderRadius:8,padding:"11px",color:C.muted,fontWeight:700,cursor:"pointer",fontFamily:"'Inter',system-ui,sans-serif"}}>Cancelar</button>
              <button onClick={()=>pagarFiadoAdmin(modalPagoAdmin)} style={{flex:2,background:"linear-gradient(135deg,#16a34a,#15803d)",color:"#fff",border:"none",borderRadius:8,padding:"11px",fontWeight:800,fontSize:15,cursor:"pointer",fontFamily:"'Inter',system-ui,sans-serif"}}>✅ Confirmar</button>
            </div>
          </div>
        </div>}
      </div>}

        </div>{/* fin cli-data */}
      </div>{/* fin cli-wrap */}
      {/* MODAL PRODUCTO */}
      {modal&&<div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.55)",backdropFilter:"blur(4px)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:100,padding:16}}>
        <div style={{background:C.card,border:`1px solid ${C.border}`,borderRadius:14,padding:26,width:"100%",maxWidth:460,maxHeight:"90vh",overflowY:"auto"}}>
          <div style={{fontWeight:800,fontSize:16,marginBottom:18,color:C.text}}>{editId?"✏️ Editar":"➕ Nuevo producto"}</div>
          <div style={{display:"grid",gap:12}}>
            {/* Nombre — obligatorio */}
            <div>
              <label style={{fontSize:13,color:C.muted,textTransform:"uppercase",letterSpacing:.8,display:"block",marginBottom:4}}>Nombre <span style={{color:C.red}}>*</span></label>
              <input type="text" placeholder="Ej. Aguardiente Antioqueño 750ml" value={form.nombre??""} onChange={e=>{
                const val=e.target.value;
                setForm(p=>({...p,nombre:val,...(!refEdited&&!editId?{referencia:generarSKU(p.categoria||"Aguardiente",products)}:{})}));
              }} style={inp}/>
            </div>
            {/* Categoría — auto-actualiza SKU */}
            <div>
              <label style={{fontSize:13,color:C.muted,textTransform:"uppercase",letterSpacing:.8,display:"block",marginBottom:4}}>Categoría</label>
              <select value={form.categoria||"Aguardiente"} onChange={e=>{const cat=e.target.value;setForm(p=>({...p,categoria:cat,...(!refEdited&&!editId?{referencia:generarSKU(cat,products)}:{})}));}} style={{...inp,cursor:"pointer"}}>
                {CATS.map(c=><option key={c} style={{background:C.card}}>{c}</option>)}
              </select>
            </div>
            {/* Referencia — auto-generada, editable */}
            <div>
              <label style={{fontSize:13,color:C.muted,textTransform:"uppercase",letterSpacing:.8,display:"block",marginBottom:4}}>Referencia / SKU <span style={{fontSize:13,color:C.muted,textTransform:"none"}}>(auto)</span></label>
              <input type="text" placeholder="Ej. AGU-001" value={form.referencia??""} onChange={e=>{setRefEdited(true);setForm(p=>({...p,referencia:e.target.value}));}} style={inp}/>
            </div>
            {/* Campos opcionales */}
            {[{l:"Precio de compra por CAJA (COP)",k:"compra",t:"number",ph:"63000"},{l:"Precio venta por unidad (COP)",k:"ventaUnit",t:"number",ph:"5000"},{l:"Precio venta por caja (COP)",k:"ventaCaja",t:"number",ph:"120000"},{l:"Unidades por caja",k:"cajUnid",t:"number",ph:"12"},{l:"Stock actual (unidades)",k:"stock",t:"number",ph:"0"},{l:"Stock mínimo",k:"stockMin",t:"number",ph:"12"}].map(f=>(
              <div key={f.k}>
                <label style={{fontSize:13,color:C.muted,textTransform:"uppercase",letterSpacing:.8,display:"block",marginBottom:4}}>{f.l} <span style={{fontSize:13,color:C.muted,textTransform:"none"}}>(opcional)</span></label>
                <input type={f.t} placeholder={f.ph} value={form[f.k]??""} onChange={e=>{
                  const val=e.target.value;
                  if(f.k==="stockMin"){setMinEdited(true);setForm(p=>({...p,stockMin:val}));}
                  else if(f.k==="cajUnid"){const cu=parseInt(val)||0;setForm(p=>({...p,cajUnid:val,...(!minEdited&&!editId&&cu>0?{stockMin:String(cu*2)}:{})}));}
                  else{setForm(p=>({...p,[f.k]:val}));}
                }} style={inp}/>
                {f.k==="stockMin"&&!editId&&form.cajUnid&&<div style={{fontSize:13,color:C.muted,marginTop:3}}>💡 Sugerido: {(parseInt(form.cajUnid)||0)*2} un. ({form.cajUnid} × 2)</div>}
              </div>
            ))}
            {form.compra&&form.ventaUnit&&<div style={{background:C.greenBg,border:`1px solid ${C.greenBd}`,borderRadius:8,padding:"10px 14px",display:"flex",justifyContent:"space-between"}}>
              <span style={{fontSize:13,color:C.muted}}>Ganancia por unidad:</span>
              <span style={{fontWeight:800,color:C.green}}>{COP(+form.ventaUnit-(+form.compra/(+form.cajUnid||1)))} ({PCT(+form.compra/(+form.cajUnid||1),form.ventaUnit)}%)</span>
            </div>}
          </div>
          <div style={{display:"flex",gap:10,marginTop:20}}>
            <button onClick={()=>setModal(false)} style={{flex:1,...btnS(C.muted,C.card,C.border)}}>Cancelar</button>
            <button onClick={saveProd} style={{flex:2,background:C.text,color:C.bg,border:"none",borderRadius:7,padding:"11px",fontSize:16,fontWeight:700,cursor:"pointer"}}>{editId?"Guardar":"Agregar"}</button>
          </div>
        </div>
      </div>}

      {/* CONFIRM DELETE */}
      {delId&&<div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.55)",backdropFilter:"blur(4px)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:100,padding:16}}>
        <div style={{background:C.card,border:`1px solid ${C.redBd}`,borderRadius:14,padding:28,maxWidth:360,width:"100%",textAlign:"center"}}>
          <div style={{fontSize:36,marginBottom:10}}>🗑️</div>
          <div style={{fontWeight:800,fontSize:16,marginBottom:8,color:C.text}}>¿Eliminar producto?</div>
          <p style={{color:C.muted,fontSize:16,marginBottom:22}}>Esta acción no se puede deshacer.</p>
          <div style={{display:"flex",gap:10}}>
            <button onClick={()=>setDelId(null)} style={{flex:1,...btnS(C.muted,C.card,C.border)}}>Cancelar</button>
            <button onClick={doDel} style={{flex:1,background:C.red,border:"none",borderRadius:7,color:"#fff",padding:"11px",fontSize:16,fontWeight:700,cursor:"pointer"}}>Eliminar</button>
          </div>
        </div>
      </div>}
      {showThemePicker&&<ThemePicker tema={tema} setTema={setTema} onClose={()=>setShowThemePicker(false)}/>}
    </div>
  );
}