// ─── CajeroApp.jsx — Vista del cajero: barra, mesas, cobros, historial ───

function CajeroApp({dm,tema,setTema,toggleDm,session,onSalir}){
  const T=tema||THEMES.facebook;
  const C=T;
  // Bordes precalculados para usar el tema en toda la vista
  const B1="1px solid "+T.border;
  const B2="2px solid "+T.border;
  const BA1="1px solid "+T.accent;
  const BA2="2px solid "+T.accent;
  const{usuario,pass,negocio,empresaId="",rol=""}=session;
  const[prods,setProds]=useState([]);
  const[mesas,setMesas]=useState([]);
  const HIST_KEY=`nx_hist_${usuario}`;
  const TURNO_KEY=`caja_turno_${usuario}`;
  const CIERRE_PENDIENTE_KEY=`cierre_pendiente_${usuario}`;
  const[ventas,setVentas]=useState(()=>{try{const s=localStorage.getItem(`nx_hist_${usuario}`);return s?JSON.parse(s):[];}catch{return[];}});
  const saveHist=(v)=>{try{localStorage.setItem(`nx_hist_${usuario}`,JSON.stringify(v.slice(0,100)));}catch{}};
  const[online,setOnline]=useState(navigator.onLine);
  useEffect(()=>{
    const onOn=()=>setOnline(true);
    const onOff=()=>setOnline(false);
    window.addEventListener('online',onOn);
    window.addEventListener('offline',onOff);
    return()=>{window.removeEventListener('online',onOn);window.removeEventListener('offline',onOff);};
  },[]);
  const[turnoActivo,setTurnoActivo]=useState(()=>{try{const s=localStorage.getItem(`caja_turno_${usuario}`);return s?JSON.parse(s):null;}catch{return null;}});
  const[modalApertura,setModalApertura]=useState(false);
  const[procesandoApertura,setProcesandoApertura]=useState(false);
  const[reintentandoCierre,setReintentandoCierre]=useState(false);
  const despachando=React.useRef(new Set());
  const[modalCierre,setModalCierre]=useState(false);
  const[cierrePendiente,setCierrePendiente]=useState(()=>{try{const s=localStorage.getItem(`cierre_pendiente_${usuario}`);return s?JSON.parse(s):null;}catch{return null;}});
  const[efectivoInicial,setEfectivoInicial]=useState("");
  const[efectivoContado,setEfectivoContado]=useState("");
  const[cierreObs,setCierreObs]=useState("");
  const[procesandoCierre,setProcesandoCierre]=useState(false);
  const[tab,setTab]=useState("pedidos");
  const[barraCat,setBarraCat]=useState("Todas");
  const[pedidoCajero,setPedidoCajero]=useState([]);
  const[montoEfectivo,setMontoEfectivo]=useState("");
  const[montoTransfer,setMontoTransfer]=useState("");
  const[tipo,setTipo]=useState("venta");
  const[metodoPago,setMetodoPago]=useState("Efectivo");
  const[pagoMixto,setPagoMixto]=useState(false);
  const[toast4,setToast4]=useState(null);
  const[editPedidos,setEditPedidos]=useState({});
  const[procesandoRecibo,setProcesandoRecibo]=useState({});
  const colaRecibo=React.useRef([]);
  const procesandoCola=React.useRef(false);
  const anularTextRef=React.useRef(null);
  const danoTextRef=React.useRef(null);
  const ORDEN_ESTADO={pendiente:0,despachado:1,cobrado:2,cobrado_despachado:3,pendiente_caja:4,recibido:5,anulado:6};
  const[procesandoBarra,setProcesandoBarra]=useState(false);
  const[showThemePicker,setShowThemePicker]=useState(false);
  const[mesaDetalle,setMesaDetalle]=useState(null);
  const[histPass,setHistPass]=useState("");
  const[histAuth,setHistAuth]=useState(false);
  const[histPassError,setHistPassError]=useState(false);
  const[modalAnular,setModalAnular]=useState(null);
  const[anularMotivo,setAnularMotivo]=useState("");
  const[anularPin,setAnularPin]=useState("");
  const[modalFiado,setModalFiado]=useState(null);
  const[fiadoNombre,setFiadoNombre]=useState("");
  const[fiadoTel,setFiadoTel]=useState("");
  const[fiadoPlazo,setFiadoPlazo]=useState("7");
  const[fiadoPlazoCustom,setFiadoPlazoCustom]=useState("");
  const[modalDano,setModalDano]=useState(null);
  const[danoProducto,setDanoProducto]=useState(null);
  const[danoQty,setDanoQty]=useState(1);
  const[danoObs,setDanoObs]=useState("");
  const[procesandoDano,setProcesandoDano]=useState(false);
  const[pedidoFrio,setPedidoFrio]=useState([]);
  const[metodoFrio,setMetodoFrio]=useState("Efectivo");
  const[montoFrioEf,setMontoFrioEf]=useState("");
  const[montoFrioTr,setMontoFrioTr]=useState("");
  const[pagoMixtoFrio,setPagoMixtoFrio]=useState(false);
  const[procesandoFrio,setProcesandoFrio]=useState(false);
  const[tipoFrio,setTipoFrio]=useState("venta");
  const[modalFiadoFrio,setModalFiadoFrio]=useState(null);
  const[fiadoFrioNombre,setFiadoFrioNombre]=useState("");
  const[fiadoFrioTel,setFiadoFrioTel]=useState("");
  const[fiadoFrioPlazo,setFiadoFrioPlazo]=useState("7");
  const[fiadoFrioPlazoCustom,setFiadoFrioPlazoCustom]=useState("");
  const PLAZOS_FIADO=[{val:"7",lbl:"1 Semana"},{val:"15",lbl:"15 Días"},{val:"30",lbl:"1 Mes"},{val:"custom",lbl:"Manual"}];
  const[modalFrioPres,setModalFrioPres]=useState(null);
  const[frioPrecioCustom,setFrioPrecioCustom]=useState("");
  const[frioPresOpt,setFrioPresOpt]=useState("caja");
  const[modalAgregar,setModalAgregar]=useState(null);
  const[fiados,setFiados]=useState([]);
  const[cargandoFiados,setCargandoFiados]=useState(false);
  const[modalPagarFiado,setModalPagarFiado]=useState(null);
  const[metodoPagoFiado,setMetodoPagoFiado]=useState("Efectivo");
  const[montoFiadoEf,setMontoFiadoEf]=useState("");
  const[montoFiadoTr,setMontoFiadoTr]=useState("");
  const cargarFiados=async()=>{if(!empresaId)return;setCargandoFiados(true);try{const fs=await NexusFirebase.getFiados(empresaId);setFiados(fs);}catch(e){}finally{setCargandoFiados(false);};};
  const pagarFiado=async(f)=>{
    try{
      const metodo=f.metodoPago||metodoPagoFiado;
      await NexusFirebase.marcarFiadoPagado(empresaId,f.fbId,metodo);
      guardarVentaFB({fecha:fechaVenta(),metodoPago:metodo,items:[{nombre:`Cobro fiado: ${f.cliente}`,tipoVenta:"cobro_fiado",cantidad:1,ingreso:f.total,costo:0,unidadesDesc:0}]});
      setFiados(prev=>prev.filter(x=>x.fbId!==f.fbId));
      setModalPagarFiado(null);t4(`✅ Fiado de ${f.cliente} pagado`);
    }catch(e){t4("Error al marcar pagado","err");}
  };
  const eliminarFiado=async(f)=>{
    if(!window.confirm(`¿Eliminar fiado de ${f.cliente}?`))return;
    try{await NexusFirebase.deleteFiado(empresaId,f.fbId);setFiados(prev=>prev.filter(x=>x.fbId!==f.fbId));t4("Fiado eliminado","err");}catch(e){t4("Error","err");}
  };
  const totalFrio=pedidoFrio.reduce((a,i)=>a+(i.precioTotal||0)*i.qty,0);
  const montoTotalFrio=(parseInput(montoFrioEf)||0)+(parseInput(montoFrioTr)||0);
  const cambioFrio=montoTotalFrio>0?montoTotalFrio-totalFrio:null;
  const sugsFrio=sugerenciasBilletes(totalFrio);


  const frioAddPres=(producto,precio,presentacion)=>{
    const cu=producto.cajUnid||24;
    const unidades=presentacion==="caja"?cu:presentacion==="media"?Math.floor(cu/2):6;
    const LABELS={caja:"📦 Caja",media:"📦 ½ Caja",sixpack:"🍺 Sixpack"};
    const SUFIJOS={caja:" (Caja)",media:" (½ Caja)",sixpack:" (Sixpack)"};
    const itemId=`${producto.id}_${presentacion}`;
    const vc=precio||0;
    const costoUnit=(producto.compra||0)/cu;
    const costoTotal=Math.round(costoUnit*unidades);
    setMontoFrioEf("");
    setPedidoFrio(prev=>{
      const ex=prev.find(i=>i.itemId===itemId);
      if(ex)return prev.map(i=>i.itemId===itemId?{...i,qty:i.qty+1,precioTotal:vc,costoTotal}:i);
      return[...prev,{itemId,id:producto.id,nombre:`${producto.nombre}${SUFIJOS[presentacion]}`,nombreOriginal:producto.nombre,emoji:producto.emoji,imgUrl:producto.imgUrl||"",precioTotal:vc,precioBase:vc,costoTotal,unidades,presentacion,presLabel:LABELS[presentacion],qty:1}];
    });
    setModalFrioPres(null);setFrioPrecioCustom("");setFrioPresOpt("caja");
  };
  // Compat alias
  const frioAddCaja=(producto,precioCustom)=>frioAddPres(producto,precioCustom,"caja");

  const t4=(msg,type="ok")=>{setToast4({msg,type});setTimeout(()=>setToast4(null),3000);};

  const total=pedidoCajero.reduce((a,i)=>a+(i.precio||0)*i.qty,0);
  const montoTotal=(parseInput(montoEfectivo)||0)+(parseInput(montoTransfer)||0);
  const cambio=montoTotal>0?montoTotal-total:null;
  const sugs=sugerenciasBilletes(total);

  useEffect(()=>{
    if(total>0&&!pagoMixto){setMontoEfectivo(fmtInput(String(total)));}
    if(total===0){setMontoEfectivo("");}
  },[total,pagoMixto]);

  const ventasHoy=ventas.filter(v=>!v.anulada&&v.tipo==="venta");
  const totalCobrado=ventasHoy.reduce((a,v)=>a+v.total,0);

  const parseMixtoAmounts=(metodoPago)=>{
    if(!(metodoPago||"").startsWith("Mixto"))return{ef:0,tr:0};
    let ef=0,tr=0;
    const parts=(metodoPago||"").split("+");
    parts.forEach(p=>{const n=parseInt(p.replace(/[^0-9]/g,""))||0;if(p.indexOf("Efectivo")>=0)ef=n;else if(p.indexOf("Transfer")>=0)tr=n;});
    return{ef,tr};
  };
  const totalEfectivo=ventasHoy.reduce((a,v)=>{if(v.metodoPago==="Efectivo")return a+v.total;if((v.metodoPago||"").startsWith("Mixto")){if(v.totalEfectivo)return a+v.totalEfectivo;return a+parseMixtoAmounts(v.metodoPago).ef;}return a;},0);
  const totalTransfer=ventasHoy.reduce((a,v)=>{if(v.metodoPago==="Transferencia")return a+v.total;if((v.metodoPago||"").startsWith("Mixto")){if(v.totalTransfer)return a+v.totalTransfer;return a+parseMixtoAmounts(v.metodoPago).tr;}return a;},0);
  const totalFiado=ventasHoy.filter(v=>v.metodoPago==="Fiado"||v.metodoPago==="Crédito").reduce((a,v)=>a+v.total,0);
  const totalPendienteMesas=mesas.filter(m=>String(m.id)!=="vr"&&String(m.id)!=="rapida"&&m.estado==="ocupada").reduce((a,m)=>{
    return a+(m.pedidos||[]).filter(p=>p.estado==="pendiente"||p.estado==="despachado").reduce((b,p)=>b+p.total,0);
  },0);
  const mesasOcupadas=mesas.filter(m=>m.estado==="ocupada"&&String(m.id)!=="vr"&&String(m.id)!=="rapida").length;

  const mapProds=(raw)=>raw.filter(p=>p.ventaUnit>0).map(p=>({...p,emoji:EMOJIS_POS[p.categoria]||"🍾",precio:p.ventaUnit||0,imgUrl:p.imgUrl||""})).sort((a,b)=>{const oa=a.orden??9999;const ob=b.orden??9999;return oa!==ob?oa-ob:a.nombre.localeCompare(b.nombre,"es");});
  const updateMesaFB=(mesaId,pedidos,estado)=>{
    if(!empresaId)return;
    const num=mesaId==="vr"?"⚡":mesaId;
    NexusFirebase.updateMesa(empresaId,String(mesaId),{id:mesaId,num,estado,pedidos}).catch(()=>{});
  };

  useEffect(()=>{
    if(!empresaId)return;
    const unsubInv=NexusFirebase.listenInventario(empresaId,raw=>setProds(mapProds(raw)));
    const unsubMesas=NexusFirebase.listenMesas(empresaId,fbMesas=>{
      setMesas(prev=>{
        return fbMesas.map(fb=>{
          const local=prev.find(m=>String(m.id)===String(fb.id));
          const fbPeds=fb.pedidos||[];
          const locPeds=local?.pedidos||[];
          const pedidos=fbPeds.length>0
            ?fbPeds.map(fp=>{const lp=locPeds.find(x=>x.id===fp.id);if(!lp)return fp;const eF=ORDEN_ESTADO[fp.estado]||0;const eL=ORDEN_ESTADO[lp.estado]||0;return eL>eF?{...fp,estado:lp.estado}:fp;})
            :locPeds.some(p=>p.estado==="pendiente_caja")?locPeds:[];
          return{...fb,pedidos};
        });
      });
    });
    return()=>{unsubInv();unsubMesas();}
  },[]);

  const guardarVentaFB=(venta)=>{if(empresaId)NexusFirebase.saveVenta(empresaId,venta).catch(()=>{});};
  const actualizarStockFB=(items)=>{if(!empresaId)return;items.forEach(i=>{const unid=i.unidadesDesc||i.unid||i.qty||0;if(unid&&(i.id||i.productoId))NexusFirebase.updateStock(empresaId,i.id||i.productoId,-unid).catch(()=>{});});};
  const guardarFiadoFB=(fiado)=>{if(empresaId)NexusFirebase.saveFiado(empresaId,fiado).catch(()=>{});};


  useEffect(()=>{if(!turnoActivo)setModalApertura(true);},[]);
  useEffect(()=>{if(tab==="fiados")cargarFiados();},[tab]);


  // Fecha del turno: usa la fecha de apertura para que ventas nocturnas no cambien de día
  const fechaVenta=()=>{
    const now=new Date();
    const timeStr=now.toLocaleTimeString("es-CO",{hour:"2-digit",minute:"2-digit",second:"2-digit"});
    if(turnoActivo?.fechaISO){
      const apert=new Date(turnoActivo.fechaISO);
      const dateStr=apert.toLocaleDateString("es-CO",{day:"2-digit",month:"2-digit",year:"numeric"});
      return dateStr+" "+timeStr;
    }
    return now.toLocaleDateString("es-CO",{day:"2-digit",month:"2-digit",year:"numeric"})+" "+timeStr;
  };

  const abrirCaja=async()=>{
    if(procesandoApertura)return;
    setProcesandoApertura(true);
    const fechaISO=new Date().toISOString();
    const efInicial=parseInput(efectivoInicial)||0;
    const turno={fechaISO,efectivoInicial:efInicial,usuario};
    localStorage.setItem(TURNO_KEY,JSON.stringify(turno));
    setTurnoActivo(turno);
    setVentas([]);saveHist([]);
    setModalApertura(false);setEfectivoInicial("");
    t4("✅ Caja abierta — turno iniciado");
    if(empresaId){NexusFirebase.abrirTurno(empresaId,{usuario,efectivoInicial:efInicial,fecha:fechaHoraExacta()}).then(id=>{const t={...turno,fbId:id};localStorage.setItem(TURNO_KEY,JSON.stringify(t));setTurnoActivo(t);}).catch(()=>{});}
    guardarVentaFB({fecha:fechaHoraExacta(),metodoPago:"Apertura",items:[{nombre:"Apertura de caja",tipoVenta:"apertura",cantidad:1,ingreso:0,costo:0,unidadesDesc:0,efectivoInicial:efInicial}]});
  };

  const cerrarCaja=async()=>{
    if(procesandoCierre)return;
    setProcesandoCierre(true);
    const efContado=parseInput(efectivoContado)||0;
    const efIni=turnoActivo?.efectivoInicial||0;
    const efEsperado=totalEfectivo+efIni;
    const diferencia=efContado-efEsperado;
    const fechaCierre=fechaHoraExacta();
    const ventasTurno=ventas.filter(v=>!v.anulada);
    const anuladas=ventas.filter(v=>v.anulada);
    const lineas=[
      `╔══════════════════════════════════╗`,
      `║       CIERRE DE CAJA             ║`,
      `╚══════════════════════════════════╝`,
      `Negocio : ${negocio}`,
      `Cajero  : ${usuario}`,
      `Cierre  : ${fechaCierre}`,
      `Apertura: ${turnoActivo?.fechaISO?new Date(turnoActivo.fechaISO).toLocaleString("es-CO",{day:"2-digit",month:"2-digit",year:"numeric",hour:"2-digit",minute:"2-digit"}):"—"}`,
      `──────────────────────────────────`,
      `Efectivo inicial  : ${COP(efIni)}`,
      `──────────────────────────────────`,
      `VENTAS DEL TURNO`,
      `  Total cobrado   : ${COP(totalCobrado)}`,
      `  Efectivo ventas : ${COP(totalEfectivo)}`,
      `  Transferencia   : ${COP(totalTransfer)}`,
      ...(totalFiado>0?[`  Fiado           : ${COP(totalFiado)}`]:[]),
      `  Pendiente mesas : ${COP(totalPendienteMesas)}`,
      `  Transacciones   : ${ventasTurno.length}`,
      `  Anulaciones     : ${anuladas.length}`,
      `──────────────────────────────────`,
      `CUADRE`,
      `  Efectivo esperado: ${COP(efEsperado)}`,
      `  Efectivo contado : ${COP(efContado)}`,
      `  Diferencia       : ${diferencia>=0?"+":""}${COP(diferencia)} ${diferencia===0?"✅":diferencia>0?"(sobrante)":"(faltante)"}`,
      ...(cierreObs?[`  Observaciones   : ${cierreObs}`]:[]),
      `──────────────────────────────────`,
      `NEXUS Digital Solutions`,
    ];
    const cierreDatos={fecha:fechaVenta(),totalCobrado,totalEfectivo,totalTransfer,totalFiado,efContado,diferencia,observacion:cierreObs,efectivoInicial:efIni,transacciones:ventasTurno.length,anulaciones:anuladas.length,usuario};
    setModalCierre(false);setEfectivoContado("");setCierreObs("");setProcesandoCierre(false);
    guardarVentaFB({fecha:fechaVenta(),metodoPago:"Cierre",items:[{nombre:"Cierre de caja",tipoVenta:"cierre",cantidad:1,ingreso:totalCobrado,costo:0,unidadesDesc:0,...cierreDatos}]});
    if(empresaId&&turnoActivo?.fbId){NexusFirebase.cerrarTurno(empresaId,turnoActivo.fbId,cierreDatos).catch(()=>{});}
    localStorage.removeItem(CIERRE_PENDIENTE_KEY);setCierrePendiente(null);
    setVentas([]);saveHist([]);localStorage.removeItem(TURNO_KEY);setTurnoActivo(null);
    t4("✅ Cierre guardado en el perfil del propietario");
    setTimeout(()=>setModalApertura(true),600);
  };

  const reintentarCierre=async()=>{
    if(!cierrePendiente||reintentandoCierre)return;
    setReintentandoCierre(true);
    try{
      localStorage.removeItem(CIERRE_PENDIENTE_KEY);setCierrePendiente(null);
      setVentas([]);saveHist([]);localStorage.removeItem(TURNO_KEY);setTurnoActivo(null);
      t4("✅ Cierre sincronizado");setTimeout(()=>setModalApertura(true),600);
    }catch(e){t4("⚠️ Error al reintentar cierre","err");}
    finally{setReintentandoCierre(false);}
  };

  useEffect(()=>{
    if(!cierrePendiente)return;
    const intervalo=setInterval(reintentarCierre,30000);
    return()=>clearInterval(intervalo);
  },[cierrePendiente]);

  const getPedidosMesa=(m)=>m.pedidos||[];

  const pendientes=mesas.filter(m=>{const peds=getPedidosMesa(m);return m.estado==="ocupada"&&peds.some(p=>p.estado==="pendiente"||p.estado==="cobrado");});
  const cobradosPendientes=mesas.filter(m=>{const peds=getPedidosMesa(m);const esVR=String(m.id)==="vr";if(esVR)return peds.some(p=>p.estado==="cobrado_despachado");return peds.some(p=>p.estado==="cobrado_despachado"||p.estado==="pendiente_caja");});
  const nuevos=mesas.filter(m=>{const peds=getPedidosMesa(m);return m.estado==="ocupada"&&peds.some(p=>p.estado==="pendiente"||p.estado==="cobrado");}).length;
  const nuevosRecibir=cobradosPendientes.length;

  const getPedItems=(mesaId,pedId,origItems)=>editPedidos[`${mesaId}-${pedId}`]||origItems||[];
  const editItem=(mesaId,pedId,itemId,delta,origItems)=>{
    const key=`${mesaId}-${pedId}`;
    const items=getPedItems(mesaId,pedId,origItems);
    const updated=items.map(it=>{const id=it.id||it.nombre;if(id!==itemId)return it;const nq=(it.qty||it.cantidad||1)+delta;if(nq<=0)return null;return{...it,qty:nq,cantidad:nq};}).filter(Boolean);
    const total=updated.reduce((a,it)=>a+(it.precio||0)*(it.qty||1),0);
    setEditPedidos(prev=>({...prev,[key]:updated}));
    return{items:updated,total};
  };
  const delItem=(mesaId,pedId,itemId,origItems)=>editItem(mesaId,pedId,itemId,-999,origItems);
  const getEditTotal=(mesaId,pedId,origItems)=>getPedItems(mesaId,pedId,origItems).reduce((a,it)=>a+(it.precio||0)*(it.qty||it.cantidad||1),0);

  const addItemPedido=(mesaId,pedId,producto,origItems)=>{
    if((producto.stock||0)<=0){t4(`❌ Sin stock: ${producto.nombre}`,"err");return;}
    const key=`${mesaId}-${pedId}`;
    const items=getPedItems(mesaId,pedId,origItems);
    const existente=items.find(it=>(it.id||it.nombre)===(producto.id||producto.nombre));
    let updated;
    if(existente){updated=items.map(it=>(it.id||it.nombre)===(producto.id||producto.nombre)?{...it,qty:(it.qty||it.cantidad||1)+1}:it);}
    else{updated=[...items,{id:producto.id,nombre:producto.nombre,emoji:producto.emoji||"🍾",precio:producto.precio||producto.ventaUnit||0,qty:1,imgUrl:producto.imgUrl||""}];}
    setEditPedidos(prev=>({...prev,[key]:updated}));
  };

  const cajAdd=p=>{if((p.stock||0)<=0){t4(`❌ Sin stock: ${p.nombre}`,"err");return;}setPedidoCajero(prev=>{const ex=prev.find(i=>i.id===p.id);if(ex)return prev.map(i=>i.id===p.id?{...i,qty:i.qty+1}:i);return[...prev,{...p,qty:1}];});};
  const cajQty=(id,d)=>setPedidoCajero(prev=>{const it=prev.find(i=>i.id===id);if(!it)return prev;const nq=it.qty+d;if(nq<=0)return prev.filter(i=>i.id!==id);return prev.map(i=>i.id===id?{...i,qty:nq}:i);});
  const cajSetQty=(id,val)=>setPedidoCajero(prev=>prev.map(i=>i.id===id?{...i,qty:Math.max(1,parseInt(val)||1)}:i));
  const cajDel=id=>setPedidoCajero(prev=>prev.filter(i=>i.id!==id));

  const frioQty=(itemId,d)=>{setPedidoFrio(prev=>{const it=prev.find(i=>i.itemId===itemId);if(!it)return prev;const nq=it.qty+d;if(nq<=0)return prev.filter(i=>i.itemId!==itemId);return prev.map(i=>i.itemId===itemId?{...i,qty:nq}:i);});setMontoFrioEf("");};
  const frioSetQty=(itemId,val)=>{setPedidoFrio(prev=>prev.map(i=>i.itemId===itemId?{...i,qty:Math.max(1,parseInt(val)||1)}:i));setMontoFrioEf("");};
  const frioDel=itemId=>{setPedidoFrio(prev=>prev.filter(i=>i.itemId!==itemId));setMontoFrioEf("");};

  const registrarFrio=async()=>{
    if(!pedidoFrio.length||procesandoFrio)return;
    if(tipoFrio==="fiado"){setModalFiadoFrio({items:[...pedidoFrio],total:totalFrio});setFiadoFrioNombre("");setFiadoFrioTel("");setFiadoFrioPlazo("7");setFiadoFrioPlazoCustom("");return;}
    const montoFrio_real=(!pagoMixtoFrio&&montoTotalFrio===0)?totalFrio:montoTotalFrio;
    if(montoFrio_real<totalFrio){t4("El monto es menor al total","err");return;}
    const cambioReal=montoFrio_real-totalFrio;
    const metodo=pagoMixtoFrio?`Mixto: Efectivo ${COP(parseInput(montoFrioEf)||0)} + Transfer ${COP(parseInput(montoFrioTr)||0)}`:metodoFrio;
    setProcesandoFrio(true);
    const itemsFrio=pedidoFrio.slice();
    setVentas(prev=>{const updated=[{id:"V"+Date.now(),mesa:"❄️ Punto Frío",origen:"frio",items:itemsFrio.map(i=>({...i,precio:i.precioTotal})),total:totalFrio,tipo:"venta",metodoPago:metodo,totalEfectivo:pagoMixtoFrio?(parseInput(montoFrioEf)||0):(metodoFrio==="Efectivo"?totalFrio:0),totalTransfer:pagoMixtoFrio?(parseInput(montoFrioTr)||0):(metodoFrio==="Transferencia"?totalFrio:0),hora:new Date().toLocaleTimeString("es-CO",{hour:"2-digit",minute:"2-digit"}),cambio:Math.max(0,cambioReal),anulada:false},...prev].slice(0,100);saveHist(updated);return updated;});
    t4(`✅ Punto Frío — ${metodo.split(":")[0]} — Cambio: ${COP(Math.max(0,cambioReal))}`);
    setPedidoFrio([]);setMontoFrioEf("");setMontoFrioTr("");setPagoMixtoFrio(false);setTipoFrio("venta");
    setTimeout(()=>setProcesandoFrio(false),2000);
    const itemsFrioFB=itemsFrio.map(i=>({...i,tipoVenta:i.presentacion==="media"?"½ Caja":i.presentacion==="sixpack"?"Sixpack":"Caja",nombre:i.nombreOriginal||i.nombre,cantidad:i.qty,ingreso:(i.precioTotal||0)*i.qty,costo:Math.round((i.costoTotal||0)*i.qty),unidadesDesc:(i.unidades||1)*i.qty}));
    guardarVentaFB({fecha:fechaVenta(),metodoPago:metodo,items:itemsFrioFB});
    actualizarStockFB(itemsFrioFB);
  };

  const confirmarFiadoFrio=async()=>{
    if(!fiadoFrioNombre.trim()){t4("Nombre obligatorio","err");return;}
    if(!fiadoFrioTel.trim()){t4("Teléfono obligatorio","err");return;}
    const diasPlazo=fiadoFrioPlazo==="custom"?(parseInt(fiadoFrioPlazoCustom)||7):parseInt(fiadoFrioPlazo);
    const fechaLimite=new Date();fechaLimite.setDate(fechaLimite.getDate()+diasPlazo);
    const fechaLimStr=fechaLimite.toLocaleDateString("es-CO",{day:"2-digit",month:"2-digit",year:"numeric"});
    setProcesandoFrio(true);
    const itemsFiado=modalFiadoFrio.items.slice();const totalFiadoFrio=modalFiadoFrio.total;
    const nomFiado=fiadoFrioNombre;const telFiado=fiadoFrioTel;
    setVentas(prev=>{const updated=[{id:"V"+Date.now(),mesa:"❄️ Punto Frío",origen:"frio",items:itemsFiado.map(i=>({...i,precio:i.precioTotal})),total:totalFiadoFrio,tipo:"fiado",metodoPago:"Fiado",cliente:nomFiado,telefono:telFiado,plazo:`${diasPlazo}d — ${fechaLimStr}`,hora:new Date().toLocaleTimeString("es-CO",{hour:"2-digit",minute:"2-digit"}),cambio:0,anulada:false},...prev].slice(0,100);saveHist(updated);return updated;});
    t4(`✅ Fiado P.Frío — ${nomFiado} — ${diasPlazo} días`);
    setModalFiadoFrio(null);setPedidoFrio([]);setMontoFrioEf("");setMontoFrioTr("");setPagoMixtoFrio(false);setTipoFrio("venta");
    setTimeout(()=>setProcesandoFrio(false),2000);
    const itemsFiadoFB=itemsFiado.map(i=>({...i,tipoVenta:"Fiado Caja",nombre:i.nombreOriginal||i.nombre,cantidad:i.qty,ingreso:(i.precioTotal||0)*i.qty,costo:(i.costoTotal||0)*i.qty,unidadesDesc:(i.unidades||1)*i.qty,cliente:nomFiado,telefono:telFiado,plazo:diasPlazo+"d",fechaLimite:fechaLimStr}));
    guardarVentaFB({fecha:fechaVenta(),metodoPago:"Fiado",items:itemsFiadoFB});
    guardarFiadoFB({cliente:nomFiado,telefono:telFiado,total:totalFiadoFrio,plazo:diasPlazo,fechaLimite:fechaLimStr,items:itemsFiadoFB,origen:"frio"});
    actualizarStockFB(itemsFiadoFB);
  };

  const registrarDano=async()=>{
    if(!danoProducto||procesandoDano)return;
    setProcesandoDano(true);
    const prod=danoProducto;const qty=danoQty;const obs=danoObs;
    setVentas(prev=>{const updated=[{id:"V"+Date.now(),mesa:"💥 Daño",origen:"daño",items:[{...prod,qty}],total:0,tipo:"daño",metodoPago:"N/A",hora:new Date().toLocaleTimeString("es-CO",{hour:"2-digit",minute:"2-digit"}),cambio:0,anulada:false,observacion:obs},...prev].slice(0,100);saveHist(updated);return updated;});
    t4(`💥 Daño registrado — ${prod.nombre} x${qty}`);
    setModalDano(null);setDanoProducto(null);setDanoQty(1);setDanoObs("");
    setTimeout(()=>setProcesandoDano(false),2000);
    const itemDano={...prod,tipoVenta:"daño",cantidad:qty,ingreso:0,costo:Math.round((prod.compra||0)/(prod.cajUnid||1))*qty,unidadesDesc:qty,observacion:obs};
    guardarVentaFB({fecha:fechaVenta(),metodoPago:"N/A",items:[itemDano]});
    actualizarStockFB([itemDano]);
  };

  const eliminarPedidoCaj=async(mesaId,pedidoId)=>{
    const mesa=mesas.find(m=>String(m.id)===String(mesaId));if(!mesa)return;
    const peds=getPedidosMesa(mesa);
    const ped=peds.find(p=>p.id===pedidoId);
    if(!ped||ped.estado!=="pendiente"){t4("Solo se pueden eliminar pedidos pendientes","err");return;}
    if(!window.confirm("¿Eliminar este pedido? Esta acción no se puede deshacer."))return;
    const restantes=peds.filter(p=>p.id!==pedidoId);
    const nuevoEstado=restantes.length===0?"libre":"ocupada";
    setMesas(prev=>prev.map(m=>String(m.id)===String(mesaId)?{...m,pedido:restantes,pedidos:restantes,estado:nuevoEstado}:m));
    t4("🗑 Pedido eliminado");
    updateMesaFB(mesaId,restantes,nuevoEstado);
  };

  const despachar=async(mesaId,ped)=>{
    if(despachando.current.has(ped.id))return;
    despachando.current.add(ped.id);
    try{
      const mesa=mesas.find(m=>String(m.id)===String(mesaId));if(!mesa)return;
      const peds=getPedidosMesa(mesa);
      const protegidos=["recibido","anulado"];
      const actualizados=peds.map(p=>{
        if(p.id===ped.id&&!protegidos.includes(p.estado)){
          const yaCobrado=p.estado==="cobrado";
          const nuevoEstado=yaCobrado?"cobrado_despachado":"despachado";
          const totalDespachado=ped.total;
          const totalCobradoAntes=yaCobrado?(p.montoCobrado||p.total):null;
          const diferencia=yaCobrado?totalDespachado-(totalCobradoAntes||0):null;
          if(yaCobrado&&diferencia!==0){const msg=diferencia>0?`⚠️ Mesera cobró ${COP(totalCobradoAntes)} pero despachas ${COP(totalDespachado)}. Mesera debe cobrar +${COP(diferencia)} adicionales.`:`⚠️ Mesera cobró ${COP(totalCobradoAntes)} pero despachas ${COP(totalDespachado)}. Mesera debe devolver ${COP(Math.abs(diferencia))} al cliente.`;t4(msg,diferencia>0?"err":"info");}
          return{...p,estado:nuevoEstado,items:ped.items,total:totalDespachado,totalDespachado,diferencia};
        }
        return p;
      });
      setMesas(prev=>prev.map(m=>String(m.id)===String(mesaId)?{...m,pedido:actualizados,pedidos:actualizados}:m));
      t4(`✅ Mesa ${mesaId} despachada — ${COP(ped.total)}`);
      updateMesaFB(mesaId,actualizados,"ocupada");
    }catch(e){t4("Error al despachar","err");}
    finally{despachando.current.delete(ped.id);}
  };

  const procesarColaRecibo=async()=>{
    if(procesandoCola.current)return;
    procesandoCola.current=true;
    while(colaRecibo.current.length>0){
      const{mesaId,ped}=colaRecibo.current.shift();
      try{
        const estadoActual=await new Promise(resolve=>{setMesas(prev=>{resolve(prev);return prev;});});
        const mesaActual=estadoActual.find(m=>String(m.id)===String(mesaId));
        const pedsActuales=mesaActual?getPedidosMesa(mesaActual):[];
        const pedCheck=pedsActuales.find(p=>p.id===ped.id);
        if(pedCheck?.estado==="recibido"){setProcesandoRecibo(prev=>({...prev,[ped.id]:false}));continue;}
        const pedsBase=pedsActuales.length>0?pedsActuales:[{...ped}];
        const actualizados=pedsBase.map(p=>p.id===ped.id?{...p,estado:"recibido"}:p);
        const todosTerminados=actualizados.every(p=>p.estado==="recibido"||p.estado==="anulado");
        const mesaYaCerrada=mesaActual?.estado==="libre";
        const pedidosRestantes=actualizados.filter(p=>p.estado!=="recibido"&&p.estado!=="anulado");
        const estadoMesa=todosTerminados?"libre":(mesaYaCerrada?"libre":"ocupada");
        const pedidoFinal=todosTerminados?[]:pedidosRestantes;
        // Mantener actualizados en local (no limpiar) para que el merge del sync
        // prefiera "recibido" (5) sobre Drive "pendiente_caja" (4) mientras Drive no confirma
        const pedidosLocFinal=actualizados;
        const estadoLocal=todosTerminados?"libre":(mesaYaCerrada?"libre":"ocupada");
        setMesas(prev=>prev.map(m=>String(m.id)===String(mesaId)?{...m,estado:estadoLocal,pedido:pedidosLocFinal,pedidos:pedidosLocFinal}:m));
        const now=new Date();
        const fecha=fechaVenta();
        const esVR=String(mesaId)==="vr";
        const origenPed=ped.origen||"";
        const mesaLabel=esVR?(origenPed==="mesera"?`⚡ V.Rápida Mesera`:"⚡ V.Rápida Barra"):`Mesa ${mesaId}`;
        setVentas(prev=>{const updated=[{id:"V"+Date.now(),mesa:mesaLabel,origen:esVR?(origenPed||"barra"):"mesa",items:ped.items||[],total:ped.total,tipo:"venta",metodoPago:ped.metodoPago||"Efectivo",totalEfectivo:ped.totalEfectivo||(ped.metodoPago==="Efectivo"?ped.total:0),totalTransfer:ped.totalTransfer||(ped.metodoPago==="Transferencia"?ped.total:0),hora:now.toLocaleTimeString("es-CO",{hour:"2-digit",minute:"2-digit"}),cambio:0,anulada:false},...prev].slice(0,100);saveHist(updated);return updated;});
        t4(`✅ Recibido — ${mesaLabel} — ${COP(ped.total)}`);
        const itemsMesa=(ped.items||[]).map(i=>{const prod=prods.find(pp=>String(pp.id)===String(i.id)||pp.nombre===i.nombre);const costoUnit=prod?(prod.compra||0)/(prod.cajUnid||1):0;return{id:i.id,nombre:i.nombre||"",tipoVenta:"venta",cantidad:i.qty||i.cantidad||1,ingreso:(i.precio||0)*(i.qty||i.cantidad||1),costo:Math.round(costoUnit)*(i.qty||i.cantidad||1),unidadesDesc:i.qty||i.cantidad||1};});
        guardarVentaFB({fecha,metodoPago:ped.metodoPago||"Efectivo",items:itemsMesa});
        actualizarStockFB(itemsMesa);
        updateMesaFB(mesaId,pedidoFinal,estadoMesa);
      }catch(e){t4(`Error: ${e.message||"Sin conexión"}`,"err");}
      finally{setProcesandoRecibo(prev=>({...prev,[ped.id]:false}));}
    }
    procesandoCola.current=false;
  };

  const recibirDinero=(mesaId,ped)=>{
    if(procesandoRecibo[ped.id])return;
    setProcesandoRecibo(prev=>({...prev,[ped.id]:true}));
    colaRecibo.current.push({mesaId,ped});
    procesarColaRecibo();
  };

  const registrar=async()=>{
    if(!pedidoCajero.length)return;
    if(procesandoBarra)return;
    const montoEfectivo_real=(!pagoMixto&&montoTotal===0)?total:montoTotal;
    if(tipo==="venta"&&montoEfectivo_real<total){t4("El monto es menor al total","err");return;}
    if(tipo==="fiado"){setModalFiado({items:[...pedidoCajero],total,metodoPago,montoTotal:montoEfectivo_real,montoEfectivo,montoTransfer,pagoMixto,tipo});setFiadoNombre("");setFiadoTel("");return;}
    const cambioReal=montoEfectivo_real-total;
    const metodo=pagoMixto?`Mixto: Efectivo ${COP(parseInput(montoEfectivo)||0)} + Transfer ${COP(parseInput(montoTransfer)||0)}`:metodoPago;
    setProcesandoBarra(true);
    const itemsBarra=pedidoCajero.slice();
    setVentas(prev=>{const updated=[{id:"V"+Date.now(),mesa:"🍺 Barra",origen:"barra",items:itemsBarra,total,tipo,metodoPago:metodo,totalEfectivo:pagoMixto?(parseInput(montoEfectivo)||0):(metodoPago==="Efectivo"?total:0),totalTransfer:pagoMixto?(parseInput(montoTransfer)||0):(metodoPago==="Transferencia"?total:0),hora:new Date().toLocaleTimeString("es-CO",{hour:"2-digit",minute:"2-digit"}),cambio:Math.max(0,cambioReal),anulada:false},...prev].slice(0,100);saveHist(updated);return updated;});
    t4(tipo==="venta"?`✅ ${metodo.split(":")[0]} — Cambio: ${COP(Math.max(0,cambioReal))}`:`✅ ${tipo} registrado`);
    setPedidoCajero([]);setMontoEfectivo("");setMontoTransfer("");setPagoMixto(false);
    setTimeout(()=>setProcesandoBarra(false),2000);
    const itemsBarraFB=itemsBarra.map(i=>{const costoUnit=(i.compra||0)/(i.cajUnid||1);return{...i,tipoVenta:tipo,cantidad:i.qty,ingreso:(i.precio||0)*i.qty,costo:Math.round(costoUnit)*i.qty,unidadesDesc:i.qty};});
    guardarVentaFB({fecha:fechaVenta(),metodoPago:metodo,items:itemsBarraFB});
    actualizarStockFB(itemsBarraFB);
  };

  const anularVenta=id=>{const v=ventas.find(x=>x.id===id);if(!v)return;setAnularMotivo("");setModalAnular({ventaId:id,step:"motivo"});};
  const ejecutarAnulacion=async()=>{
    if(!anularMotivo.trim()){t4("Escribe el motivo","err");return;}
    const id=modalAnular.ventaId;
    const v=ventas.find(x=>x.id===id);
    const motivo=anularMotivo;
    setVentas(prev=>{const updated=prev.map(x=>x.id===id?{...x,anulada:true,motivo}:x);saveHist(updated);return updated;});
    setModalAnular(null);setAnularPin("");setAnularMotivo("");
    t4("❌ Venta anulada","err");
    if(v){
      guardarVentaFB({fecha:fechaVenta(),metodoPago:`ANULADO: ${motivo} | ${v.mesa||"Barra"}`,items:(v.items||[]).map(i=>({nombre:i.nombre||"",tipoVenta:"anulado",cantidad:i.qty||i.cantidad||1,ingreso:0,costo:0,unidadesDesc:i.qty||i.cantidad||1}))});
    }
  };

  const tipoInfo=t=>TIPOS_POS.find(x=>x.val===t)||TIPOS_POS[0];

  return(
    <div style={{fontFamily:"'Inter',system-ui,sans-serif",background:T?.bg||"#07090f",minHeight:"100vh",color:T?.text||"#ffffff",display:"flex",flexDirection:"column",maxHeight:"100vh",overflow:"hidden"}}>
      {toast4&&<div style={{position:"fixed",top:14,right:14,zIndex:999,background:toast4.type==="err"?"#dc2626":"#16a34a",color:"#fff",padding:"10px 18px",borderRadius:9,fontWeight:700,fontSize:13,animation:"fadeIn .2s",boxShadow:"0 4px 20px rgba(0,0,0,.4)"}}>{toast4.msg}</div>}

      {/* TOPBAR */}
      <div style={{background:T.topbar,borderBottom:B2,padding:"8px 16px",flexShrink:0}}>
        <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",gap:8,flexWrap:"wrap"}}>
          <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:"#fff"}}>{negocio}</div>
              <div style={{fontSize:13,color:T.topbarText,display:"flex",alignItems:"center",gap:4}}>
                🍺 {session.usuario}
                <span style={{width:7,height:7,borderRadius:"50%",background:online?"#4ade80":"#f85149",display:"inline-block",flexShrink:0}} title={online?"En línea":"Sin conexión"}/>
{nuevos>0&&<span style={{background:"#dc2626",color:"#fff",borderRadius:"50%",width:15,height:15,fontSize:9,fontWeight:800,display:"inline-flex",alignItems:"center",justifyContent:"center"}}>{nuevos}</span>}
              </div>
            </div>
          </div>
          <div style={{display:"flex",gap:5,flexWrap:"wrap"}}>
            {[{l:"🏆 Total",v:COP(totalCobrado),c:T.topbarAccent},{l:"💵 Efectivo",v:COP(totalEfectivo),c:T.green},{l:"📲 Transfer.",v:COP(totalTransfer),c:T.topbarAccent},
              ...(totalFiado>0?[{l:"📋 Fiado",v:COP(totalFiado),c:T.topbarAccent}]:[]),
              {l:"⏳ Pendiente",v:COP(totalPendienteMesas),c:T.topbarAccent},{l:`🪑 Mesas`,v:`${mesasOcupadas} ocup.`,c:T.red}]
              .map((k,i)=>(
              <div key={i} style={{background:"rgba(255,255,255,.06)",border:"1px solid rgba(255,255,255,.12)",borderRadius:8,padding:"5px 11px",textAlign:"center",minWidth:72}}>
                <div style={{fontSize:13,color:T.topbarText,whiteSpace:"nowrap",letterSpacing:.3}}>{k.l}</div>
                {k.v&&<div style={{fontSize:13,fontWeight:800,color:k.c,whiteSpace:"nowrap"}}>{k.v}</div>}
              </div>
            ))}
          </div>
          <div style={{display:"flex",gap:6}}>
<button onClick={()=>setShowThemePicker(true)} style={{background:"rgba(255,255,255,.15)",color:"#fff",border:"none",borderRadius:7,padding:"5px 10px",fontSize:16,cursor:"pointer"}} title="Cambiar tema">🎨</button>
            {turnoActivo&&<button onClick={()=>{setEfectivoContado("");setCierreObs("");setModalCierre(true);}} style={{background:"rgba(220,150,0,.35)",color:"#fcd34d",border:"1px solid rgba(220,150,0,.5)",borderRadius:7,padding:"5px 12px",fontSize:13,fontWeight:700,cursor:"pointer"}}>🔒 Cierre</button>}
            <button onClick={onSalir} style={{background:"rgba(200,0,0,.4)",color:"#fff",border:"1px solid rgba(255,80,80,.4)",borderRadius:7,padding:"5px 12px",fontSize:13,fontWeight:700,cursor:"pointer"}}>🔒 Salir</button>
          </div>
        </div>
        <div style={{display:"flex",gap:2,marginTop:8,overflowX:"auto"}}>
          {[["barra","🍺 Barra",false],["frio","❄️ P.Frío",false],["pedidos",`🔔 Pedidos${nuevos>0?` (${nuevos})`:""}`,nuevos>0],["mesas","🪑 Mesas",false],["recibir",`💰 Recibir${cobradosPendientes.length>0?` (${cobradosPendientes.length})`:""}`,cobradosPendientes.length>0],["fiados",`📋 Fiados${fiados.filter(f=>!f.pagado).length>0?` (${fiados.filter(f=>!f.pagado).length})`:""}`,fiados.filter(f=>!f.pagado).length>0],["historial","🕒 Historial",false]]
            .map(([k,l,alert])=>(
            <button key={k} onClick={()=>setTab(k)} style={{padding:"10px 18px",fontSize:13,fontWeight:700,cursor:"pointer",border:"none",background:tab===k?"rgba(255,255,255,.1)":"transparent",color:tab===k?T.topbarAccent:alert?T.topbarAccent:T.topbarText,borderRadius:"7px 7px 0 0",whiteSpace:"nowrap",borderBottom:tab===k?"2px solid "+T.topbarAccent:"2px solid transparent",letterSpacing:.2}}>
              {l}
            </button>
          ))}
        </div>
      </div>

      <div style={{flex:1,overflow:"hidden",display:"flex"}}>

        {/* BANNER APERTURA */}
        {!turnoActivo&&<div onClick={()=>setModalApertura(true)} style={{position:"absolute",top:0,left:0,right:0,bottom:0,zIndex:50,display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",background:"rgba(0,0,0,.75)",backdropFilter:"blur(6px)",cursor:"pointer"}}>
          <div style={{background:"linear-gradient(135deg,#052e0f,#064e1a)",border:"2px solid #16a34a",borderRadius:20,padding:"40px 48px",textAlign:"center",maxWidth:380,boxShadow:"0 0 40px rgba(22,163,74,.4)"}}>
            <div style={{fontSize:56,marginBottom:12}}>🔓</div>
            <div style={{fontWeight:900,fontSize:22,color:"#4ade80",marginBottom:8}}>Turno no iniciado</div>
            <div style={{fontSize:14,color:"#86efac",marginBottom:24}}>Debes abrir el turno antes de registrar ventas</div>
            <div style={{background:"linear-gradient(135deg,#16a34a,#15803d)",color:"#fff",borderRadius:12,padding:"14px 32px",fontSize:17,fontWeight:800,boxShadow:"0 4px 16px rgba(22,163,74,.5)"}}>
              ✅ Iniciar turno ahora
            </div>
          </div>
        </div>}

        {/* TAB PEDIDOS */}
        {tab==="pedidos"&&<div style={{flex:1,overflowY:"auto",padding:14}}>
          {pendientes.length===0
            ?<div style={{background:T.card,border:B1,borderRadius:12,padding:32,textAlign:"center",color:T.muted}}><div style={{fontSize:32,marginBottom:8}}>🟢</div>Sin pedidos pendientes</div>
            :pendientes.flatMap(m=>{
              const peds=getPedidosMesa(m).filter(p=>p.estado==="pendiente"||p.estado==="cobrado");
              return peds.map(ped=>(
                <div key={`${m.id}-${ped.id}`} style={{background:T.card,border:BA1,borderRadius:12,padding:14,marginBottom:10,boxShadow:"0 0 12px "+T.accentBg}}>
                  <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:8}}>
                    <span style={{background:T.accentBg,color:T.accent,borderRadius:6,padding:"4px 10px",fontSize:13,fontWeight:800}}>{String(m.id)==="vr"?"⚡ Venta Rápida":`Mesa ${m.id}`}</span>
                    <div style={{display:"flex",gap:5,alignItems:"center",flexWrap:"wrap"}}>
                      {ped.estado==="cobrado"&&<span style={{background:T.greenBg,color:T.green,borderRadius:6,padding:"4px 10px",fontSize:13,fontWeight:700}}>💰 Ya cobrado: {COP(ped.montoCobrado||ped.total)}</span>}
                      <span style={{background:T.accentBg,color:T.accent,borderRadius:6,padding:"4px 10px",fontSize:13,fontWeight:700}}>⏳ {ped.hora||""}</span>
                    </div>
                  </div>
                  {getPedItems(m.id,ped.id,ped.items).map((it,i)=>{
                    const itemId=it.id||it.nombre;
                    return(
                      <div key={i} style={{display:"flex",alignItems:"center",gap:8,padding:"9px 0",borderBottom:B1}}>
                        <span style={{fontSize:20}}>{it.emoji||"🍾"}</span>
                        <span style={{flex:1,fontSize:16,fontWeight:600,color:T.text}}>{it.nombre}</span>
                        <span style={{fontSize:13,color:T.muted,minWidth:65}}>{COP(it.precio||0)}</span>
                        <div style={{display:"flex",alignItems:"center",gap:4}}>
                          <button onClick={()=>editItem(m.id,ped.id,itemId,-1,ped.items)} style={{background:T.btn2,color:T.accent,border:"none",borderRadius:5,width:28,height:28,fontSize:16,cursor:"pointer",fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center"}}>−</button>
                          <span style={{fontSize:16,fontWeight:700,color:T.text,minWidth:26,textAlign:"center"}}>{it.qty||it.cantidad||1}</span>
                          <button onClick={()=>editItem(m.id,ped.id,itemId,1,ped.items)} style={{background:T.btn2,color:T.accent,border:"none",borderRadius:5,width:28,height:28,fontSize:16,cursor:"pointer",fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center"}}>+</button>
                        </div>
                        <span style={{fontSize:16,fontWeight:700,color:T.accent,minWidth:68,textAlign:"right"}}>{COP((it.precio||0)*(it.qty||it.cantidad||1))}</span>
                        <button onClick={()=>delItem(m.id,ped.id,itemId,ped.items)} style={{background:"none",border:"none",color:"#f85149",cursor:"pointer",fontSize:19,padding:"0 4px"}}>✕</button>
                      </div>
                    );
                  })}
                  <button onClick={()=>setModalAgregar({mesaId:m.id,pedId:ped.id,origItems:ped.items})}
                    style={{width:"100%",background:T.inp,border:`1px dashed ${T.accent}`,borderRadius:8,padding:"8px",marginTop:6,color:T.accent,fontSize:13,fontWeight:700,cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",gap:6}}>
                    ➕ Agregar producto
                  </button>
                  {editPedidos[`${m.id}-${ped.id}`]&&<div style={{fontSize:13,color:"#fbbf24",padding:"5px 0",fontStyle:"italic"}}>✏️ Pedido editado</div>}
                  <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginTop:10,gap:8}}>
                    <span style={{fontSize:20,fontWeight:900,color:T.accent}}>{COP(getEditTotal(m.id,ped.id,ped.items))}</span>
                    <div style={{display:"flex",gap:6}}>
                      {ped.estado==="pendiente"&&<button onClick={()=>eliminarPedidoCaj(m.id,ped.id)}
                        style={{background:T.redBg,color:T.red,border:`1px solid ${T.redBd}`,borderRadius:8,padding:"11px 12px",fontSize:13,fontWeight:800,cursor:"pointer"}}>
                        🗑 Eliminar
                      </button>}
                      <button onClick={()=>{const ei=getPedItems(m.id,ped.id,ped.items);const et=getEditTotal(m.id,ped.id,ped.items);despachar(m.id,{...ped,items:ei,total:et});setEditPedidos(prev=>{const n={...prev};delete n[`${m.id}-${ped.id}`];return n;});}} disabled={getPedItems(m.id,ped.id,ped.items).length===0}
                        style={{background:getPedItems(m.id,ped.id,ped.items).length===0?T.btn2:T.btnGrad,color:getPedItems(m.id,ped.id,ped.items).length===0?T.muted:"#fff",border:"none",borderRadius:8,padding:"11px 22px",fontSize:16,fontWeight:800,cursor:"pointer"}}>
                        📦 Despachar — {COP(getEditTotal(m.id,ped.id,ped.items))}
                      </button>
                    </div>
                  </div>
                </div>
              ));
            })}
        </div>}

        {/* TAB RECIBIR */}
        {tab==="recibir"&&<div style={{flex:1,overflowY:"auto",padding:14}}>
          <div style={{fontWeight:700,fontSize:13,color:T.accent,marginBottom:12}}>💰 Recibir dinero de mesera</div>
          {cobradosPendientes.length===0
            ?<div style={{background:T.card,border:B1,borderRadius:12,padding:32,textAlign:"center",color:T.muted}}><div style={{fontSize:32,marginBottom:8}}>✅</div>Sin dinero pendiente de recibir</div>
            :cobradosPendientes.flatMap(m=>{
              const esVR=String(m.id)==="vr";
              const peds=getPedidosMesa(m).filter(p=>esVR?(p.estado==="cobrado_despachado"):(p.estado==="cobrado_despachado"||p.estado==="pendiente_caja"));
              return peds.map(ped=>(
                <div key={`r-${m.id}-${ped.id}`} style={{background:T.greenBg,border:`1px solid ${T.greenBd}`,borderRadius:12,padding:14,marginBottom:10}}>
                  <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:8}}>
                    <span style={{background:String(m.id)==="vr"?T.accentBg:T.greenBg,color:String(m.id)==="vr"?T.accent:T.green,borderRadius:6,padding:"4px 10px",fontSize:13,fontWeight:800}}>{String(m.id)==="vr"?`⚡ V.Rápida${ped.mesera?" — "+ped.mesera:""}`:`Mesa ${m.id}`}</span>
                    <span style={{background:ped.estado==="pendiente_caja"?T.accentBg:T.greenBg,color:ped.estado==="pendiente_caja"?T.accent:T.green,borderRadius:6,padding:"3px 9px",fontSize:13,fontWeight:700}}>{ped.estado==="pendiente_caja"?`🚪 Mesa ${ped.mesaCerrada||m.id} cerrada · 💰 Cobrado`:ped.estado==="cobrado_despachado"?"📦 Despachado · 💰 Cobrado":"💰 Cobrado · Pendiente despacho"}</span>
                  </div>
                  <div style={{fontSize:13,color:T.muted,marginBottom:6,lineHeight:1.6}}>{(ped.items||[]).map(it=>`${it.emoji||"🍾"} ${it.nombre} x${it.qty||it.cantidad||1}`).join(" · ")}</div>
                  {ped.metodoPago&&<div style={{fontSize:13,color:T.accent,marginBottom:6}}>💳 {ped.metodoPago}</div>}
                  <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
                    <span style={{fontSize:19,fontWeight:900,color:T.green}}>{COP(ped.total)}</span>
                    <button onClick={()=>!procesandoRecibo[ped.id]&&recibirDinero(m.id,ped)} disabled={procesandoRecibo[ped.id]}
                      style={{background:procesandoRecibo[ped.id]?T.btn2:T.btnGrad,color:"#fff",border:"none",borderRadius:8,padding:"9px 18px",fontSize:13,fontWeight:800,cursor:procesandoRecibo[ped.id]?"not-allowed":"pointer",opacity:procesandoRecibo[ped.id]?.7:1,minWidth:130}}>
                      {procesandoRecibo[ped.id]?"⏳ Procesando...":"✅ Recibido"}
                    </button>
                  </div>
                </div>
              ));
            })}
        </div>}

        {/* TAB MESAS */}
        {tab==="mesas"&&<div style={{flex:1,overflowY:"auto",padding:14}}>
          <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(110px,1fr))",gap:10}}>
            {mesas.filter(m=>String(m.id)!=="vr"&&String(m.id)!=="rapida").map(m=>{
              const peds=getPedidosMesa(m);
              const pendT=peds.filter(p=>p.estado==="pendiente"||p.estado==="despachado").reduce((a,p)=>a+p.total,0);
              const cobT=peds.filter(p=>p.estado==="cobrado"||p.estado==="cobrado_despachado"||p.estado==="pendiente_caja").reduce((a,p)=>a+p.total,0);
              const ocupada=m.estado==="ocupada";
              const tienePeds=peds.length>0;
              return(
                <div key={m.id} onClick={()=>tienePeds&&setMesaDetalle(m.id)} style={{background:ocupada?"linear-gradient(135deg,#1a0808,#2d0f0f)":"linear-gradient(135deg,#071020,#0d1929)",border:`2px solid ${ocupada?"#dc2626":T.blue}`,borderRadius:12,padding:12,textAlign:"center",cursor:tienePeds?"pointer":"default",transition:"opacity .15s",opacity:1}}>
                  <div style={{fontSize:20,fontWeight:900,color:ocupada?"#f85149":T.blue}}>{m.id}</div>
                  <div style={{fontSize:9,color:ocupada?"#f85149":T.blue,fontWeight:700,textTransform:"uppercase",marginBottom:4}}>{ocupada?"Ocupada":"Libre"}</div>
                  {pendT>0&&<div style={{fontSize:13,color:"#fbbf24",fontWeight:700}}>⏳ {COP(pendT)}</div>}
                  {cobT>0&&<div style={{fontSize:13,color:"#86efac",fontWeight:700}}>💰 {COP(cobT)}</div>}
                  {tienePeds&&<div style={{fontSize:9,color:T.muted,marginTop:4}}>Ver detalle →</div>}
                </div>
              );
            })}
          </div>
        </div>}

        {/* TAB BARRA */}
        {tab==="barra"&&<div style={{flex:1,display:"flex",overflow:"hidden"}}>
          {/* Productos */}
          <div style={{flex:1,overflowY:"auto",padding:12}}>
            <div style={{display:"flex",alignItems:"center",gap:8,marginBottom:8}}>
              <div style={{fontSize:13,fontWeight:700,color:T.accent}}>🍺 Selecciona productos</div>
              <button onClick={()=>setModalDano(true)} style={{background:"linear-gradient(135deg,#dc2626,#991b1b)",color:"#fff",border:"none",borderRadius:8,padding:"6px 14px",fontSize:13,fontWeight:800,cursor:"pointer"}}>💥 Daño</button>
            </div>
            <div style={{display:"flex",gap:6,overflowX:"auto",paddingBottom:8,marginBottom:8,scrollbarWidth:"none"}}>
              {["Todas",...[...new Set(prods.map(p=>p.categoria).filter(Boolean))]].map(cat=>(
                <button key={cat} onClick={()=>setBarraCat(cat)} style={{background:barraCat===cat?T.accent:T.inp,color:barraCat===cat?T.bg:T.muted,border:`1px solid ${barraCat===cat?T.accent:T.border}`,borderRadius:20,padding:"5px 14px",fontSize:13,fontWeight:700,cursor:"pointer",whiteSpace:"nowrap",flexShrink:0}}>{EMOJIS_POS[cat]||""} {cat}</button>
              ))}
            </div>
            <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(130px,1fr))",gap:8}}>
              {prods.filter(p=>barraCat==="Todas"||p.categoria===barraCat).map(p=>{
                const sel=pedidoCajero.find(i=>i.id===p.id);
                const sinStock=(p.stock||0)<=0;
                return(
                  <div key={p.id} onClick={()=>cajAdd(p)} style={{background:sinStock?T.inp:sel?T.accentBg:T.card,border:sinStock?`1px solid ${T.redBd}`:sel?BA2:B1,borderRadius:10,padding:"10px 6px",textAlign:"center",cursor:sinStock?"not-allowed":"pointer",position:"relative",boxShadow:sel?"0 0 8px "+T.accentBg:"none",transition:"all .15s",opacity:sinStock?.5:1}}>
                    {sinStock&&<div style={{position:"absolute",top:3,left:3,background:"#dc2626",color:"#fff",borderRadius:3,fontSize:8,fontWeight:800,padding:"1px 4px"}}>AGOTADO</div>}
                    {sel&&!sinStock&&<div style={{position:"absolute",top:-6,right:-6,background:T.accent,color:T.bg,borderRadius:"50%",width:22,height:22,fontSize:13,fontWeight:800,display:"flex",alignItems:"center",justifyContent:"center"}}>{sel.qty}</div>}
                    {p.imgUrl?<img src={p.imgUrl} alt={p.nombre} loading="lazy" style={{width:72,height:72,borderRadius:8,objectFit:"contain",background:T.inp,display:"block",margin:"0 auto 6px",filter:sinStock?"grayscale(1)":"none"}}/>:<div style={{fontSize:36,marginBottom:6}}>{p.emoji}</div>}
                    <div style={{fontSize:13,color:sinStock?T.muted:T.text,fontWeight:600,lineHeight:1.3}}>{p.nombre}</div>
                    <div style={{fontSize:13,color:T.accent,fontWeight:700,marginTop:3}}>{COP(p.precio)}</div>
                  </div>
                );
              })}
            </div>
          </div>
          {/* Carrito + Pago */}
          <div style={{width:290,background:T.card,padding:12,overflowY:"auto",flexShrink:0,borderLeft:B1}}>
            <div style={{fontWeight:700,fontSize:13,color:T.accent,marginBottom:10}}>🧾 🍺 Venta Barra</div>
            {pedidoCajero.length===0
              ?<div style={{color:T.muted,fontSize:13,textAlign:"center",padding:24}}>Toca un producto para agregar</div>
              :pedidoCajero.map(item=>(
                <div key={item.id} style={{display:"flex",alignItems:"center",gap:6,padding:"8px 0",borderBottom:B1}}>
                  {item.imgUrl?<img src={item.imgUrl} alt={item.nombre} loading="lazy" style={{width:30,height:30,borderRadius:6,objectFit:"cover",flexShrink:0}}/>:<span style={{fontSize:16,flexShrink:0}}>{item.emoji||"🍾"}</span>}
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{fontSize:13,fontWeight:700,color:T.text,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{item.nombre}</div>
                    <div style={{fontSize:13,color:T.muted}}>{COP(item.precio)} c/u</div>
                  </div>
                  <div style={{display:"flex",alignItems:"center",gap:3}}>
                    <button onClick={()=>cajQty(item.id,-1)} style={{background:T.btn2,color:T.accent,border:"none",borderRadius:5,width:22,height:22,fontSize:16,cursor:"pointer",fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center"}}>−</button>
                    <input type="number" value={item.qty} onChange={e=>cajSetQty(item.id,e.target.value)} style={{width:32,background:T.inp,border:B1,borderRadius:5,color:T.text,padding:2,fontSize:13,textAlign:"center",outline:"none",fontFamily:"'Inter',system-ui,sans-serif"}}/>
                    <button onClick={()=>cajQty(item.id,1)} style={{background:T.btn2,color:T.accent,border:"none",borderRadius:5,width:22,height:22,fontSize:16,cursor:"pointer",fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center"}}>+</button>
                  </div>
                  <div style={{fontSize:13,fontWeight:700,color:T.accent,minWidth:60,textAlign:"right"}}>{COP((item.precio||0)*item.qty)}</div>
                  <button onClick={()=>cajDel(item.id)} style={{background:"none",border:"none",color:"#f85149",cursor:"pointer",fontSize:13}}>✕</button>
                </div>
              ))}
            {pedidoCajero.length>0&&<>
              <div style={{marginTop:10,background:T.inp,border:`1px solid ${T.accent}`,borderRadius:8,padding:"8px 12px",display:"flex",justifyContent:"space-between"}}>
                <span style={{fontSize:13,color:T.muted}}>TOTAL</span>
                <span style={{fontSize:20,fontWeight:900,color:T.accent}}>{COP(total)}</span>
              </div>
              <select value={tipo} onChange={e=>setTipo(e.target.value)} style={{width:"100%",background:T.inp,border:B1,color:T.text,borderRadius:8,padding:"8px",fontSize:13,outline:"none",cursor:"pointer",fontFamily:"'Inter',system-ui,sans-serif",marginTop:8,marginBottom:8}}>
                {TIPOS_POS.map(t=><option key={t.val} value={t.val} style={{background:T.card}}>{t.lbl}</option>)}
              </select>
              <div style={{display:"flex",gap:5,marginBottom:8,flexWrap:"wrap"}}>
                {["Efectivo","Transferencia","Mixto"].map(mp=>(
                  <button key={mp} onClick={()=>{setMetodoPago(mp);setPagoMixto(mp==="Mixto");}} style={{flex:1,background:metodoPago===mp?T.btnGrad:T.inp,color:metodoPago===mp?"#fff":T.muted,border:`1px solid ${metodoPago===mp?T.accent:T.border}`,borderRadius:6,padding:"6px 4px",fontSize:13,fontWeight:700,cursor:"pointer"}}>{mp}</button>
                ))}
              </div>
              {total>0&&<div style={{display:"flex",gap:5,flexWrap:"wrap",marginBottom:8}}>
                {sugs.map(s=>(
                  <button key={s} onClick={()=>setMontoEfectivo(fmtInput(String(s)))} style={{background:parseInput(montoEfectivo)===s?T.greenBg:T.inp,border:`1px solid ${parseInput(montoEfectivo)===s?T.greenBd:T.border}`,color:parseInput(montoEfectivo)===s?T.green:T.accent,borderRadius:6,padding:"6px 8px",fontSize:13,fontWeight:700,cursor:"pointer"}}>
                    {s===total?"✓ Exacto":fmtB(s)}
                  </button>
                ))}
              </div>}
              {pagoMixto?(
                <>
                  <input type="text" inputMode="numeric" value={montoEfectivo} onChange={e=>setMontoEfectivo(fmtInput(e.target.value))} placeholder="$ 0 Efectivo" style={{width:"100%",background:T.inp,border:`1px solid ${T.green}`,borderRadius:7,color:T.text,padding:"9px",fontSize:16,fontWeight:700,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",textAlign:"center",marginBottom:8}}/>
                  <input type="text" inputMode="numeric" value={montoTransfer} onChange={e=>setMontoTransfer(fmtInput(e.target.value))} placeholder="$ 0 Transfer." style={{width:"100%",background:T.inp,border:`1px solid ${T.accent}`,borderRadius:7,color:T.text,padding:"9px",fontSize:16,fontWeight:700,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",textAlign:"center",marginBottom:8}}/>
                </>
              ):(
                <input type="text" inputMode="numeric" value={montoEfectivo} onChange={e=>setMontoEfectivo(fmtInput(e.target.value))} placeholder={COP(total)||"$ 0"} style={{width:"100%",background:T.inp,border:B2,borderRadius:8,color:T.text,padding:"9px",fontSize:19,fontWeight:800,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",textAlign:"center",marginBottom:8}} onFocus={e=>e.target.select()}/>
              )}
              {montoTotal>0&&<div style={{background:cambio>=0?T.accentBg:T.redBg,border:`2px solid ${cambio>=0?T.accent:T.redBd}`,borderRadius:8,padding:"8px",textAlign:"center",marginBottom:10}}>
                <div style={{fontSize:9,color:cambio>=0?T.accent:T.red,textTransform:"uppercase",letterSpacing:.8}}>Cambio</div>
                <div style={{fontSize:19,fontWeight:800,color:T.text,marginTop:2}}>{cambio>=0?COP(cambio):`Faltan ${COP(Math.abs(cambio))}`}</div>
              </div>}
              <button onClick={registrar} disabled={!pedidoCajero.length||procesandoBarra}
                style={{width:"100%",background:(!pedidoCajero.length||procesandoBarra)?(procesandoBarra?"linear-gradient(135deg,#065f46,#047857)":T.btn2):(T.btnGrad),color:(!pedidoCajero.length||procesandoBarra)?(procesandoBarra?"#6ee7b7":T.muted):"#fff",border:"none",borderRadius:9,padding:"12px",fontSize:13,fontWeight:800,cursor:(!pedidoCajero.length||procesandoBarra)?"not-allowed":"pointer"}}>
                {procesandoBarra?"⏳ Procesando...":`✅ Registrar — ${COP(total)}`}
              </button>
            </>}
          </div>
        </div>}

        {/* TAB PUNTO FRÍO */}
        {tab==="frio"&&<div style={{flex:1,display:"flex",overflow:"hidden"}}>
          <div style={{flex:1,overflowY:"auto",padding:12}}>
            <div style={{fontSize:13,fontWeight:700,color:T.accent,marginBottom:10}}>❄️ Punto Frío — Venta por Caja</div>
            <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(130px,1fr))",gap:8}}>
              {prods.filter(p=>(p.cajUnid||0)>1&&(p.ventaCaja||0)>0).map(p=>{
                const pCaja=p.ventaCaja;
                const sinPrecio=false;
                const enCarrito=pedidoFrio.some(i=>i.id===p.id);
                const sinStock=(p.stock||0)<=0;
                return(
                  <div key={p.id} onClick={()=>{if(sinStock){t4(`❌ Sin stock: ${p.nombre}`,"err");return;}setModalFrioPres({...p,ventaCaja:pCaja});setFrioPresOpt("caja");setFrioPrecioCustom(fmtInput(String(pCaja)));}}
                    style={{background:sinStock?T.inp:enCarrito?T.accentBg:T.card,border:sinStock?`1px solid ${T.redBd}`:enCarrito?BA2:B1,borderRadius:10,padding:"10px 6px",textAlign:"center",cursor:sinStock?"not-allowed":"pointer",position:"relative",transition:"all .15s",opacity:sinStock?.5:1}}>
                    {sinStock&&<div style={{position:"absolute",top:4,left:4,background:"#dc2626",color:"#fff",borderRadius:4,fontSize:8,fontWeight:800,padding:"1px 4px",zIndex:1}}>AGOTADO</div>}
                    {!sinStock&&enCarrito&&<div style={{position:"absolute",top:-6,right:-6,background:T.accent,color:T.bg,borderRadius:"50%",width:22,height:22,fontSize:13,fontWeight:800,display:"flex",alignItems:"center",justifyContent:"center"}}>✓</div>}
                    {!sinStock&&sinPrecio&&<div style={{position:"absolute",top:4,left:4,background:"#f59e0b",color:"#000",borderRadius:4,fontSize:8,fontWeight:800,padding:"1px 4px"}}>sin precio</div>}
                    {p.imgUrl?<img src={p.imgUrl} alt={p.nombre} loading="lazy" style={{width:72,height:72,borderRadius:8,objectFit:"contain",background:T.inp,display:"block",margin:"0 auto 6px",filter:sinStock?"grayscale(1)":"none"}}/>:<div style={{fontSize:36,marginBottom:6}}>{p.emoji}</div>}
                    <div style={{fontSize:13,color:sinStock?T.muted:T.text,fontWeight:600,lineHeight:1.3}}>{p.nombre}</div>
                    <div style={{fontSize:13,color:T.muted,marginTop:2}}>{sinStock?"Agotado":`${p.cajUnid||24} unid`}</div>
                    <div style={{fontSize:13,color:sinStock?T.muted:T.accent,fontWeight:700,marginTop:2}}>{sinStock?"":pCaja>0?`Caja: ${COP(pCaja)}`:"—"}</div>
                  </div>
                );
              })}
            </div>
          </div>
          <div style={{width:290,background:T.card,padding:12,overflowY:"auto",flexShrink:0,borderLeft:B1}}>
            <div style={{fontWeight:700,fontSize:13,color:T.accent,marginBottom:10}}>🧾 ❄️ Punto Frío</div>
            {pedidoFrio.length===0?<div style={{color:T.muted,fontSize:13,textAlign:"center",padding:24}}>Toca un producto y elige presentación</div>
              :pedidoFrio.map(item=>(
                <div key={item.itemId} style={{display:"flex",alignItems:"center",gap:6,padding:"8px 0",borderBottom:B1}}>
                  {item.imgUrl?<img src={item.imgUrl} alt={item.nombre} loading="lazy" style={{width:30,height:30,borderRadius:6,objectFit:"cover",flexShrink:0}}/>:<span style={{fontSize:16,flexShrink:0}}>{item.emoji||"🍾"}</span>}
                  <div style={{flex:1,minWidth:0}}>
                    <div style={{fontSize:13,fontWeight:700,color:T.text,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{item.nombre}</div>
                    <div style={{fontSize:13,color:T.muted}}>{COP(item.precioTotal)} · {item.unidades} unid</div>
                  </div>
                  <div style={{display:"flex",alignItems:"center",gap:3}}>
                    <button onClick={()=>frioQty(item.itemId,-1)} style={{background:T.btn2,color:T.accent,border:"none",borderRadius:5,width:22,height:22,fontSize:16,cursor:"pointer",fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center"}}>−</button>
                    <input type="number" value={item.qty} onChange={e=>frioSetQty(item.itemId,e.target.value)} style={{width:32,background:T.inp,border:B1,borderRadius:5,color:T.text,padding:2,fontSize:13,textAlign:"center",outline:"none",fontFamily:"'Inter',system-ui,sans-serif"}}/>
                    <button onClick={()=>frioQty(item.itemId,1)} style={{background:T.btn2,color:T.accent,border:"none",borderRadius:5,width:22,height:22,fontSize:16,cursor:"pointer",fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center"}}>+</button>
                  </div>
                  <div style={{fontSize:13,fontWeight:700,color:T.accent,minWidth:60,textAlign:"right"}}>{COP((item.precioTotal||0)*item.qty)}</div>
                  <button onClick={()=>frioDel(item.itemId)} style={{background:"none",border:"none",color:"#f85149",cursor:"pointer",fontSize:13}}>✕</button>
                </div>
              ))}
            {pedidoFrio.length>0&&<>
              <div style={{marginTop:10,background:T.inp,border:`1px solid ${T.accent}`,borderRadius:8,padding:"8px 12px",display:"flex",justifyContent:"space-between"}}>
                <span style={{fontSize:13,color:T.muted}}>TOTAL</span>
                <span style={{fontSize:20,fontWeight:900,color:T.accent}}>{COP(totalFrio)}</span>
              </div>
              <div style={{display:"flex",gap:5,marginTop:8,marginBottom:8}}>
                {[{v:"venta",l:"💰 Venta"},{v:"fiado",l:"📋 Fiado"}].map(t=>(
                  <button key={t.v} onClick={()=>setTipoFrio(t.v)} style={{flex:1,background:tipoFrio===t.v?T.blue:T.inp,color:tipoFrio===t.v?"#fff":T.muted,border:tipoFrio===t.v?`1px solid ${T.blue}`:B1,borderRadius:6,padding:"6px 4px",fontSize:13,fontWeight:700,cursor:"pointer"}}>{t.l}</button>
                ))}
              </div>
              {tipoFrio==="venta"&&<>
                <div style={{display:"flex",gap:5,marginBottom:8,flexWrap:"wrap"}}>
                  {["Efectivo","Transferencia","Mixto"].map(mp=>(
                    <button key={mp} onClick={()=>{setMetodoFrio(mp);setPagoMixtoFrio(mp==="Mixto");}} style={{flex:1,background:metodoFrio===mp?T.btnGrad:T.inp,color:metodoFrio===mp?"#fff":T.muted,border:metodoFrio===mp?`1px solid ${T.accent}`:B1,borderRadius:6,padding:"6px 4px",fontSize:13,fontWeight:700,cursor:"pointer"}}>{mp}</button>
                  ))}
                </div>
                {pagoMixtoFrio?(
                  <>
                    <input type="text" inputMode="numeric" value={montoFrioEf} onChange={e=>setMontoFrioEf(fmtInput(e.target.value))} placeholder="$ 0 Efectivo" style={{width:"100%",background:T.inp,border:`1px solid ${T.green}`,borderRadius:7,color:T.text,padding:"9px",fontSize:16,fontWeight:700,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",textAlign:"center",marginBottom:8}}/>
                    <input type="text" inputMode="numeric" value={montoFrioTr} onChange={e=>setMontoFrioTr(fmtInput(e.target.value))} placeholder="$ 0 Transfer." style={{width:"100%",background:T.inp,border:`1px solid ${T.accent}`,borderRadius:7,color:T.text,padding:"9px",fontSize:16,fontWeight:700,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",textAlign:"center",marginBottom:8}}/>
                  </>
                ):(
                  <input type="text" inputMode="numeric" value={montoFrioEf!==undefined&&montoFrioEf!==""?montoFrioEf:new Intl.NumberFormat("es-CO").format(totalFrio)} onChange={e=>setMontoFrioEf(fmtInput(e.target.value))} onFocus={e=>{if(!montoFrioEf)setMontoFrioEf(new Intl.NumberFormat("es-CO").format(totalFrio));}} style={{width:"100%",background:T.inp,border:B1,borderRadius:7,color:T.text,padding:"9px",fontSize:19,fontWeight:700,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",textAlign:"center",marginBottom:8}}/>
                )}
                {montoTotalFrio>0&&<div style={{background:cambioFrio>=0?T.accentBg:T.redBg,border:`1px solid ${cambioFrio>=0?T.accent:T.redBd}`,borderRadius:8,padding:"8px",textAlign:"center",marginBottom:10}}>
                  <div style={{fontSize:9,color:cambioFrio>=0?T.accent:T.red,textTransform:"uppercase",letterSpacing:.8}}>Cambio</div>
                  <div style={{fontSize:19,fontWeight:800,color:T.text,marginTop:2}}>{cambioFrio>=0?COP(cambioFrio):`Faltan ${COP(Math.abs(cambioFrio))}`}</div>
                </div>}
              </>}
              <button onClick={registrarFrio} disabled={!pedidoFrio.length||procesandoFrio}
                style={{width:"100%",background:(!pedidoFrio.length||procesandoFrio)?(procesandoFrio?"linear-gradient(135deg,#065f46,#047857)":"#1e2d45"):(tipoFrio==="fiado"?"linear-gradient(135deg,#16a34a,#15803d)":T.btnGrad),color:(!pedidoFrio.length||procesandoFrio)?(procesandoFrio?"#6ee7b7":"#8a9aaf"):"#fff",border:"none",borderRadius:9,padding:"12px",fontSize:13,fontWeight:800,cursor:(!pedidoFrio.length||procesandoFrio)?"not-allowed":"pointer"}}>
                {procesandoFrio?"⏳ Procesando...":(tipoFrio==="fiado"?`📋 Fiado — ${COP(totalFrio)}`:`❄️ Cobrar — ${COP(totalFrio)}`)}
              </button>
            </>}
          </div>
        </div>}


        {/* TAB FIADOS */}
        {tab==="fiados"&&<div style={{flex:1,overflowY:"auto",padding:14}}>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:12,flexWrap:"wrap",gap:8}}>
            <div style={{fontWeight:800,fontSize:17,color:T.accent}}>📋 Fiados</div>
            <button onClick={cargarFiados} disabled={cargandoFiados} style={{background:T.card,border:"1px solid "+T.border,borderRadius:7,padding:"7px 14px",color:T.accent,fontWeight:700,fontSize:13,cursor:"pointer"}}>{cargandoFiados?"⏳ Cargando...":"🔄 Actualizar"}</button>
          </div>
          {(()=>{
            const pend=fiados.filter(f=>!f.pagado);
            const totalPend=pend.reduce((a,f)=>a+(f.total||0),0);
            const hoy=new Date();hoy.setHours(0,0,0,0);
            const vencidos=pend.filter(f=>{if(!f.fechaLimite)return false;const[d,m,y]=f.fechaLimite.split("/");const lim=new Date(`${y}-${m}-${d}`);return lim<hoy;});
            if(pend.length===0&&!cargandoFiados)return<div style={{textAlign:"center",padding:40,color:T.muted}}>✅ Sin fiados pendientes</div>;
            return(<>
              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:8,marginBottom:14}}>
                {[{l:"💸 Total pendiente",v:COP(totalPend),c:T.accent},{l:"👥 Clientes",v:pend.length,c:T.text},{l:"⚠️ Vencidos",v:vencidos.length,c:vencidos.length>0?T.red:T.muted}].map((s,i)=>(
                  <div key={i} style={{background:T.card,border:`1px solid ${T.border}`,borderRadius:9,padding:"10px 12px",borderTop:`3px solid ${s.c}`,textAlign:"center"}}>
                    <div style={{fontSize:11,color:T.muted,marginBottom:3}}>{s.l}</div>
                    <div style={{fontWeight:900,fontSize:16,color:s.c}}>{s.v}</div>
                  </div>
                ))}
              </div>
              {pend.map(f=>{
                const ts=f.ts?.toDate?f.ts.toDate():f.ts?new Date(f.ts):null;
                const fecha=ts?ts.toLocaleDateString("es-CO",{day:"2-digit",month:"2-digit",year:"numeric"}):"—";
                const vencido=(()=>{if(!f.fechaLimite)return false;const[d,m,y]=f.fechaLimite.split("/");return new Date(`${y}-${m}-${d}`)<hoy;})();
                return(
                  <div key={f.fbId} style={{background:T.card,border:`2px solid ${vencido?T.red:T.border}`,borderRadius:12,padding:14,marginBottom:10}}>
                    <div style={{display:"flex",justifyContent:"space-between",alignItems:"flex-start",gap:8,marginBottom:8}}>
                      <div>
                        <div style={{fontWeight:800,fontSize:15,color:T.text}}>{f.cliente}</div>
                        <div style={{fontSize:13,color:T.muted}}>{f.telefono||"Sin tel."} · {fecha}</div>
                        {f.fechaLimite&&<div style={{fontSize:12,fontWeight:700,marginTop:2,color:vencido?"#f85149":"#4ade80"}}>{vencido?"⚠️ Vencido":"⏳ Vence"}: {f.fechaLimite}</div>}
                        <div style={{fontSize:12,color:T.muted,marginTop:4,lineHeight:1.6}}>
                          {(f.items||[]).slice(0,3).map((i,idx)=><span key={idx} style={{marginRight:6,background:T.inp,borderRadius:4,padding:"1px 5px"}}>{i.nombre||i.nombreOriginal} ×{i.cantidad||i.qty}</span>)}
                          {(f.items||[]).length>3&&<span style={{color:T.muted}}>+{f.items.length-3} más</span>}
                        </div>
                      </div>
                      <div style={{textAlign:"right",flexShrink:0}}>
                        <div style={{fontWeight:900,fontSize:20,color:vencido?T.red:T.accent}}>{COP(f.total)}</div>
                        <div style={{fontSize:11,color:T.muted,textTransform:"uppercase",marginTop:2}}>{f.origen||"barra"}</div>
                      </div>
                    </div>
                    <div style={{display:"flex",gap:8}}>
                      <button onClick={()=>{setModalPagarFiado(f);setMetodoPagoFiado("Efectivo");setMontoFiadoEf("");setMontoFiadoTr("");}} style={{flex:2,background:"linear-gradient(135deg,#16a34a,#15803d)",color:"#fff",border:"none",borderRadius:8,padding:"9px",fontWeight:800,fontSize:14,cursor:"pointer"}}>💰 Cobrar {COP(f.total)}</button>
                      <button onClick={()=>eliminarFiado(f)} style={{flex:"none",background:"rgba(220,38,38,.15)",color:T.red,border:`1px solid ${T.red}`,borderRadius:8,padding:"9px 14px",fontWeight:700,fontSize:13,cursor:"pointer"}}>🗑</button>
                    </div>
                  </div>
                );
              })}
            </>);
          })()}
          {modalPagarFiado&&<div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.8)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:300,padding:16}}>
            <div style={{background:T.card,border:`1px solid ${T.accent}`,borderRadius:16,padding:24,maxWidth:380,width:"100%"}}>
              <div style={{fontWeight:800,fontSize:17,color:T.accent,marginBottom:4}}>💰 Cobrar Fiado</div>
              <div style={{color:T.text,fontWeight:800,fontSize:17,marginBottom:2}}>{modalPagarFiado.cliente}</div>
              <div style={{color:T.muted,fontSize:13,marginBottom:6}}>{modalPagarFiado.telefono}</div>
              <div style={{fontSize:12,color:T.muted,marginBottom:12,background:T.inp,borderRadius:8,padding:"8px 10px",lineHeight:1.7}}>
                {(modalPagarFiado.items||[]).map((i,idx)=><div key={idx}>{i.nombre||i.nombreOriginal} × {i.cantidad||i.qty} — <span style={{color:T.accent,fontWeight:700}}>{COP((i.ingreso||0))}</span></div>)}
              </div>
              <div style={{fontWeight:900,fontSize:30,color:T.accent,marginBottom:14,textAlign:"center"}}>{COP(modalPagarFiado.total)}</div>
              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",gap:6,marginBottom:12}}>
                {["Efectivo","Transferencia","Mixto"].map(m=>(
                  <button key={m} onClick={()=>{setMetodoPagoFiado(m);setMontoFiadoEf("");setMontoFiadoTr("");}} style={{padding:"9px 4px",borderRadius:8,border:`2px solid ${metodoPagoFiado===m?T.accent:T.border}`,background:metodoPagoFiado===m?T.accentBg:"transparent",color:metodoPagoFiado===m?T.accent:T.muted,fontWeight:700,cursor:"pointer",fontSize:13}}>{m}</button>
                ))}
              </div>
              {metodoPagoFiado==="Mixto"&&<div style={{marginBottom:12}}>
                <div style={{fontSize:12,color:"#4ade80",marginBottom:3}}>💵 Efectivo</div>
                <input type="text" inputMode="numeric" value={montoFiadoEf} onChange={e=>setMontoFiadoEf(fmtInput(e.target.value))} placeholder="$ 0" style={{width:"100%",background:T.inp,border:`1px solid ${T.green}`,borderRadius:7,color:T.text,padding:"9px",fontSize:17,fontWeight:700,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",textAlign:"center",marginBottom:8}}/>
                <div style={{fontSize:12,color:T.accent,marginBottom:3}}>📲 Transferencia</div>
                <input type="text" inputMode="numeric" value={montoFiadoTr} onChange={e=>setMontoFiadoTr(fmtInput(e.target.value))} placeholder="$ 0" style={{width:"100%",background:T.inp,border:`1px solid ${T.accent}`,borderRadius:7,color:T.text,padding:"9px",fontSize:17,fontWeight:700,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",textAlign:"center"}}/>
              </div>}
              <div style={{display:"flex",gap:8,marginTop:4}}>
                <button onClick={()=>{setModalPagarFiado(null);setMontoFiadoEf("");setMontoFiadoTr("");}} style={{flex:1,background:T.inp,border:"1px solid "+T.border,borderRadius:8,padding:"11px",color:T.muted,fontWeight:700,cursor:"pointer"}}>Cancelar</button>
                <button onClick={()=>{
                  const metodoFinal=metodoPagoFiado==="Mixto"?`Mixto: Efectivo ${COP(parseInput(montoFiadoEf)||0)} + Transfer ${COP(parseInput(montoFiadoTr)||0)}`:metodoPagoFiado;
                  pagarFiado({...modalPagarFiado,metodoPago:metodoFinal});
                }} style={{flex:2,background:"linear-gradient(135deg,#16a34a,#15803d)",color:"#fff",border:"none",borderRadius:8,padding:"11px",fontWeight:800,fontSize:15,cursor:"pointer"}}>✅ Confirmar Pago</button>
              </div>
            </div>
          </div>}
        </div>}

        {/* TAB HISTORIAL */}
        {tab==="historial"&&<div style={{flex:1,overflowY:"auto",padding:14}}>
          {!histAuth&&<div style={{display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center",padding:40,gap:16}}>
            <div style={{fontSize:32}}>🔐</div>
            <div style={{fontWeight:700,fontSize:16,color:T.accent,textAlign:"center"}}>Historial protegido</div>
            <input type="password" value={histPass} onChange={e=>{setHistPass(e.target.value);setHistPassError(false);}} onKeyDown={e=>{if(e.key==="Enter"){if(histPass===pass){setHistAuth(true);setHistPass("");}else setHistPassError(true);}}} placeholder="Contraseña" style={{background:T.inp,border:histPassError?`1px solid ${T.red}`:B1,borderRadius:8,color:T.text,padding:"10px 16px",fontSize:16,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",textAlign:"center",width:200}}/>
            {histPassError&&<div style={{fontSize:13,color:"#f85149"}}>❌ Contraseña incorrecta</div>}
            <button onClick={()=>{if(histPass===pass){setHistAuth(true);setHistPass("");}else setHistPassError(true);}} style={{background:"linear-gradient(135deg,#f59e0b,#d97706)",color:"#000",border:"none",borderRadius:8,padding:"10px 24px",fontSize:16,fontWeight:800,cursor:"pointer"}}>Entrar</button>
          </div>}
          {histAuth&&<>
            <div style={{background:T.card,border:B1,borderRadius:14,padding:16,marginBottom:14}}>
              <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:12,flexWrap:"wrap",gap:8}}>
                <div style={{fontWeight:800,fontSize:16,color:T.accent}}>📊 Resumen del turno</div>
                {turnoActivo&&<div style={{fontSize:13,color:T.muted}}>⏰ Apertura: {new Date(turnoActivo.fechaISO).toLocaleString("es-CO",{day:"2-digit",month:"2-digit",hour:"2-digit",minute:"2-digit"})} · 💵 Inicial: {COP(turnoActivo.efectivoInicial||0)}</div>}
              </div>
              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8,marginBottom:10}}>
                {[{l:"💰 Total cobrado",v:COP(totalCobrado),c:"#f59e0b"},{l:"💵 Efectivo",v:COP(totalEfectivo),c:"#4ade80"},{l:"📲 Transferencia",v:COP(totalTransfer),c:"#fcd34d"},...(totalFiado>0?[{l:"📋 Fiado",v:COP(totalFiado),c:"#fbbf24"}]:[]),{l:"⏳ Pendiente mesas",v:COP(totalPendienteMesas),c:"#fbbf24"},{l:"❌ Anuladas",v:ventas.filter(v=>v.anulada).length+" venta(s)",c:T.red}].map((k,i)=>(
                  <div key={i} style={{background:T.inp,borderRadius:9,padding:"10px 12px",border:B1}}>
                    <div style={{fontSize:13,color:T.muted,marginBottom:3}}>{k.l}</div>
                    <div style={{fontSize:16,fontWeight:800,color:k.c}}>{k.v}</div>
                  </div>
                ))}
              </div>
            </div>
            {ventas.map(v=>{
              const origenBadge=(()=>{
                if(v.origen==="frio"||v.mesa==="❄️ Punto Frío")return{lbl:"❄️ Punto Frío",bg:T.inp,col:T.blue};
                if(v.origen==="daño"||v.mesa==="💥 Daño")return{lbl:"💥 Daño",bg:T.redBg,col:T.red};
                if(v.origen==="mesera"||v.mesa?.includes("Mesera"))return{lbl:"🌸 Mesera",bg:T.accentBg,col:T.muted};
                if(v.origen==="barra"||v.mesa==="🍺 Barra")return{lbl:"🍺 Barra",bg:T.accentBg,col:T.blue};
                if(v.mesa?.includes("Mesa"))return{lbl:"🪑 Mesa",bg:T.accentBg,col:T.accent};
                return null;
              })();
              return(
                <div key={v.id} style={{background:v.anulada?T.redBg:T.card,border:B1,borderRadius:10,padding:"10px 12px",marginBottom:8,opacity:v.anulada?.5:1}}>
                  <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:4}}>
                    <div style={{display:"flex",alignItems:"center",gap:6}}>
                      <span style={{fontWeight:700,fontSize:13,color:T.text}}>{v.anulada?"❌ ":""}{v.mesa}</span>
                      <span style={{fontSize:13,color:T.muted}}>{v.hora}</span>
                      {origenBadge&&<span style={{background:origenBadge.bg,color:origenBadge.col,borderRadius:5,padding:"1px 7px",fontSize:9,fontWeight:700,border:`1px solid ${origenBadge.col}44`}}>{origenBadge.lbl}</span>}
                      <span style={{background:tipoInfo(v.tipo).bg,color:tipoInfo(v.tipo).col,borderRadius:5,padding:"1px 7px",fontSize:9,fontWeight:700}}>{tipoInfo(v.tipo).lbl}</span>
                    </div>
                    <div style={{display:"flex",alignItems:"center",gap:6}}>
                      <span style={{fontWeight:800,fontSize:13,color:v.anulada?T.muted:T.accent}}>{COP(v.total)}</span>
                      {!v.anulada&&<button onClick={()=>anularVenta(v.id)} style={{background:T.redBg,color:T.red,border:`1px solid ${T.redBd}`,borderRadius:5,padding:"3px 9px",fontSize:9,fontWeight:700,cursor:"pointer"}}>🔐 Anular</button>}
                    </div>
                  </div>
                  <div style={{fontSize:13,color:T.muted}}>{v.items.slice(0,3).map(i=>`${i.emoji||""}${i.nombre} x${i.qty}`).join(" · ")}{v.items.length>3?` +${v.items.length-3} más`:""}</div>
                  {v.metodoPago&&<div style={{fontSize:13,color:T.accent,marginTop:2}}>💳 {v.metodoPago}{v.cambio>0?` · Cambio: ${COP(v.cambio)}`:""}</div>}
                  {v.tipo==="fiado"&&v.cliente&&<div style={{fontSize:13,color:T.green,marginTop:2}}>📋 {v.cliente} · 📞 {v.telefono||"sin tel"}{v.plazo?` · 📅 ${v.plazo}`:""}</div>}
                </div>
              );
            })}
          </>}
        </div>}

      </div>

      {/* MODAL PRECIO FRÍO */}
      {modalFrioPres&&<div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.8)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:200,padding:16}}>
        <div style={{background:T.card,border:`2px solid ${T.accent}`,borderRadius:14,padding:24,maxWidth:400,width:"100%"}}>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14}}>
            <div style={{fontWeight:800,fontSize:16,color:T.accent}}>❄️ Punto Frío — Presentación</div>
            <button onClick={()=>{setModalFrioPres(null);setFrioPrecioCustom("");setFrioPresOpt("caja");}} style={{background:"none",border:"none",color:T.red,fontSize:19,cursor:"pointer"}}>✕</button>
          </div>
          <div style={{display:"flex",alignItems:"center",gap:10,marginBottom:16,background:T.inp,borderRadius:10,padding:12}}>
            {modalFrioPres.imgUrl?<img src={modalFrioPres.imgUrl} alt={modalFrioPres.nombre} style={{width:52,height:52,borderRadius:8,objectFit:"contain",background:T.card}}/>:<span style={{fontSize:32}}>{modalFrioPres.emoji}</span>}
            <div>
              <div style={{fontSize:16,fontWeight:700,color:T.text}}>{modalFrioPres.nombre}</div>
              <div style={{fontSize:13,color:T.muted}}>{modalFrioPres.cajUnid||24} unid/caja · Precio caja: {COP(modalFrioPres.ventaCaja||0)}</div>
            </div>
          </div>
          {/* Opciones de presentación */}
          {(()=>{
            const cu=modalFrioPres.cajUnid||24;
            const pCaja=modalFrioPres.ventaCaja||0;
            const pMedia=Math.round(pCaja/2);
            const pSix=Math.round((pCaja/cu)*6);
            const opts=[
              {key:"caja",lbl:"📦 Caja",sub:`${cu} unid`,precio:pCaja},
              {key:"media",lbl:"📦 ½ Caja",sub:`${Math.floor(cu/2)} unid`,precio:pMedia},
              ...(cu>=12?[{key:"sixpack",lbl:"🍺 Sixpack",sub:"6 unid",precio:pSix}]:[]),
            ];
            return(
              <>
                <div style={{display:"grid",gridTemplateColumns:`repeat(${opts.length},1fr)`,gap:8,marginBottom:14}}>
                  {opts.map(o=>(
                    <button key={o.key} onClick={()=>{setFrioPresOpt(o.key);setFrioPrecioCustom(fmtInput(String(o.precio)));}}
                      style={{background:frioPresOpt===o.key?T.accentBg:T.inp,border:frioPresOpt===o.key?BA2:B1,borderRadius:10,padding:"10px 6px",cursor:"pointer",textAlign:"center",transition:"all .15s"}}>
                      <div style={{fontSize:16,marginBottom:3}}>{o.lbl.split(" ")[0]}</div>
                      <div style={{fontSize:13,fontWeight:800,color:frioPresOpt===o.key?T.accent:T.text}}>{o.lbl.split(" ").slice(1).join(" ")}</div>
                      <div style={{fontSize:13,color:T.muted,marginTop:2}}>{o.sub}</div>
                      <div style={{fontSize:13,fontWeight:700,color:frioPresOpt===o.key?T.accent:T.muted,marginTop:4}}>{COP(o.precio)}</div>
                    </button>
                  ))}
                </div>
                <div style={{fontSize:13,color:T.muted,marginBottom:6,textAlign:"center"}}>Precio editable ↓</div>
                <input type="text" inputMode="numeric" value={frioPrecioCustom} onChange={e=>setFrioPrecioCustom(fmtInput(e.target.value))} style={{width:"100%",background:T.inp,border:BA2,borderRadius:8,color:T.text,padding:"12px",fontSize:22,fontWeight:800,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",textAlign:"center",marginBottom:12}}/>
                <div style={{display:"flex",gap:8}}>
                  <button onClick={()=>{setModalFrioPres(null);setFrioPrecioCustom("");setFrioPresOpt("caja");}} style={{flex:1,background:T.btn2,color:T.muted,border:"none",borderRadius:8,padding:"12px",cursor:"pointer",fontWeight:700}}>Cancelar</button>
                  <button onClick={()=>frioAddPres(modalFrioPres,parseInput(frioPrecioCustom)||0,frioPresOpt)}
                    style={{flex:2,background:T.btnGrad,color:"#fff",border:"none",borderRadius:8,padding:"12px",cursor:"pointer",fontWeight:800,fontSize:16}}>
                    ✅ Agregar — {COP(parseInput(frioPrecioCustom)||0)}
                  </button>
                </div>
              </>
            );
          })()}
        </div>
      </div>}

      {/* MODAL DETALLE MESA */}
      {mesaDetalle&&(()=>{
        const md=mesas.find(m=>String(m.id)===String(mesaDetalle));
        if(!md)return null;
        const peds=getPedidosMesa(md);
        const ESTADO_LABEL={pendiente:{bg:T.accentBg,color:T.accent,label:"⏳ Pendiente"},despachado:{bg:T.inp,color:T.blue,label:"📦 Despachado"},cobrado:{bg:T.greenBg,color:T.green,label:"💰 Cobrado"},cobrado_despachado:{bg:T.inp,color:T.accent,label:"📦 Desp · 💰 Cobrado"},pendiente_caja:{bg:T.accentBg,color:T.accent,label:"🏦 Pendiente caja"},recibido:{bg:T.greenBg,color:T.green,label:"✅ Recibido"},anulado:{bg:T.redBg,color:T.red,label:"❌ Anulado"}};
        const totalGeneral=peds.reduce((a,p)=>a+(p.estado!=="anulado"?p.total:0),0);
        const totalPend=peds.filter(p=>p.estado==="pendiente"||p.estado==="despachado").reduce((a,p)=>a+p.total,0);
        const totalCob=peds.filter(p=>p.estado==="cobrado"||p.estado==="cobrado_despachado"||p.estado==="pendiente_caja"||p.estado==="recibido").reduce((a,p)=>a+p.total,0);
        return(
          <div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.8)",display:"flex",alignItems:"flex-end",justifyContent:"center",zIndex:200,padding:0}} onClick={()=>setMesaDetalle(null)}>
            <div style={{background:T.card,border:`2px solid ${T.accent}`,borderRadius:"18px 18px 0 0",width:"100%",maxWidth:520,maxHeight:"88vh",display:"flex",flexDirection:"column",overflow:"hidden"}} onClick={e=>e.stopPropagation()}>
              {/* Header */}
              <div style={{background:T.topbar,padding:"14px 18px",display:"flex",justifyContent:"space-between",alignItems:"center",flexShrink:0}}>
                <div>
                  <div style={{fontWeight:900,fontSize:19,color:"#fff"}}>🪑 Mesa {md.num||md.id}</div>
                  <div style={{fontSize:13,color:T.topbarText}}>{peds.length} pedido{peds.length!==1?"s":""} · {md.estado==="ocupada"?"🔴 Ocupada":"🟢 Libre"}</div>
                </div>
                <button onClick={()=>setMesaDetalle(null)} style={{background:"rgba(255,255,255,.15)",color:"#fff",border:"none",borderRadius:8,padding:"6px 12px",fontSize:13,fontWeight:700,cursor:"pointer"}}>✕ Cerrar</button>
              </div>
              {/* Resumen */}
              <div style={{display:"flex",gap:8,padding:"10px 14px",flexShrink:0,borderBottom:`1px solid ${T.border}`}}>
                <div style={{flex:1,background:T.inp,borderRadius:8,padding:"8px 10px",textAlign:"center"}}>
                  <div style={{fontSize:13,color:T.muted}}>⏳ Pendiente</div>
                  <div style={{fontSize:16,fontWeight:800,color:"#fbbf24"}}>{COP(totalPend)}</div>
                </div>
                <div style={{flex:1,background:T.inp,borderRadius:8,padding:"8px 10px",textAlign:"center"}}>
                  <div style={{fontSize:13,color:T.muted}}>💰 Cobrado</div>
                  <div style={{fontSize:16,fontWeight:800,color:T.green}}>{COP(totalCob)}</div>
                </div>
                <div style={{flex:1,background:T.inp,borderRadius:8,padding:"8px 10px",textAlign:"center"}}>
                  <div style={{fontSize:13,color:T.muted}}>🧾 Total</div>
                  <div style={{fontSize:16,fontWeight:800,color:T.accent}}>{COP(totalGeneral)}</div>
                </div>
              </div>
              {/* Pedidos */}
              <div style={{flex:1,overflowY:"auto",padding:14}}>
                {peds.length===0
                  ?<div style={{color:T.muted,textAlign:"center",padding:24}}>Sin pedidos</div>
                  :peds.map((ped,i)=>{
                    const ei=ESTADO_LABEL[ped.estado]||{bg:T.btn2,color:T.muted,label:ped.estado};
                    const puedElim=ped.estado==="pendiente";
                    return(
                      <div key={ped.id||i} style={{background:T.bg,border:`1px solid ${puedElim?T.border:T.border}`,borderRadius:10,padding:12,marginBottom:10,opacity:ped.estado==="anulado"?.5:1}}>
                        <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:8}}>
                          <span style={{fontSize:13,color:T.muted,fontWeight:600}}>Pedido {i+1}{ped.hora?` · ${ped.hora}`:""}</span>
                          <div style={{display:"flex",gap:6,alignItems:"center"}}>
                            <span style={{background:ei.bg,color:ei.color,borderRadius:5,padding:"3px 9px",fontSize:13,fontWeight:700}}>{ei.label}</span>
                            {puedElim&&<button onClick={async()=>{
                              if(!window.confirm("¿Eliminar este pedido?"))return;
                              const restantes=peds.filter(p=>p.id!==ped.id);
                              const nuevoEstado=restantes.length===0?"libre":"ocupada";
                              try{
                                setMesas(prev=>prev.map(m=>String(m.id)===String(md.id)?{...m,pedidos:restantes,estado:nuevoEstado}:m));
                                updateMesaFB(md.id,restantes,nuevoEstado);
                                if(nuevoEstado==="libre")setMesaDetalle(null);
                                t4("🗑 Pedido eliminado");
                              }catch(e){t4("Error: "+e.message,"err");}
                            }} style={{background:T.redBg,color:T.red,border:`1px solid ${T.redBd}`,borderRadius:5,padding:"3px 9px",fontSize:13,fontWeight:700,cursor:"pointer"}}>🗑</button>}
                          </div>
                        </div>
                        {(ped.items||[]).map((it,j)=>(
                          <div key={j} style={{display:"flex",justifyContent:"space-between",fontSize:13,color:T.text,padding:"3px 0",borderBottom:`1px solid ${T.border}`}}>
                            <span>{it.emoji||""} {it.nombre} <span style={{color:T.muted}}>x{it.qty||it.cantidad||1}</span></span>
                            <span style={{color:T.accent,fontWeight:700}}>{COP((it.precio||0)*(it.qty||it.cantidad||1))}</span>
                          </div>
                        ))}
                        <div style={{display:"flex",justifyContent:"space-between",marginTop:8}}>
                          <span style={{fontSize:13,color:T.muted}}>{ped.metodoPago?`💳 ${ped.metodoPago}`:""}</span>
                          <span style={{fontSize:16,fontWeight:800,color:T.accent}}>{COP(ped.total)}</span>
                        </div>
                      </div>
                    );
                  })
                }
              </div>
            </div>
          </div>
        );
      })()}

      {/* MODAL ANULAR */}
      {modalAnular&&<div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.75)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:200,padding:16}}>
        <div style={{background:T.card,border:"1px solid #f85149",borderRadius:14,padding:24,maxWidth:380,width:"100%"}}>
          <div style={{fontWeight:800,fontSize:16,color:T.red,marginBottom:12}}>❌ Motivo de anulación</div>
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:6,marginBottom:10}}>
            {["Error de digitación","Cliente canceló","Producto no disponible","Orden duplicada","Cortesía del negocio","Otro"].map(m=>(
              <button key={m} onClick={()=>{if(m==="Otro"){setAnularMotivo("");setTimeout(()=>anularTextRef.current?.focus(),50);}else setAnularMotivo(m);}} style={{background:anularMotivo===m?T.redBg:T.inp,color:anularMotivo===m?T.red:T.muted,border:`1px solid ${anularMotivo===m?T.red:T.border}`,borderRadius:8,padding:"8px 10px",fontSize:13,fontWeight:700,cursor:"pointer",textAlign:"left"}}>{m}</button>
            ))}
          </div>
          <textarea ref={anularTextRef} value={anularMotivo} onChange={e=>setAnularMotivo(e.target.value)} placeholder="O escribe el motivo aquí..." rows={2} style={{width:"100%",background:T.inp,border:B1,borderRadius:8,color:T.text,padding:"10px 12px",fontSize:13,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",resize:"none",marginBottom:12}}/>
          <div style={{display:"flex",gap:8}}>
            <button onClick={()=>setModalAnular(null)} style={{flex:1,background:T.btn2,color:T.muted,border:"none",borderRadius:8,padding:"10px",cursor:"pointer",fontWeight:700}}>Cancelar</button>
            <button onClick={ejecutarAnulacion} style={{flex:2,background:"linear-gradient(135deg,#f59e0b,#d97706)",color:"#000",border:"none",borderRadius:8,padding:"10px",cursor:"pointer",fontWeight:800,fontSize:16}}>✅ Confirmar</button>
          </div>
        </div>
      </div>}

      {/* MODAL FIADO */}
      {modalFiado&&<div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.75)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:200,padding:16}}>
        <div style={{background:T.card,border:"1px solid #4ade80",borderRadius:14,padding:24,maxWidth:380,width:"100%"}}>
          <div style={{fontWeight:800,fontSize:16,color:"#4ade80",marginBottom:14}}>📋 Registrar Fiado — {COP(modalFiado.total)}</div>
          <input value={fiadoNombre} onChange={e=>setFiadoNombre(e.target.value)} placeholder="Nombre del cliente *" style={{width:"100%",background:T.inp,border:B1,borderRadius:8,color:T.text,padding:"10px 12px",fontSize:16,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",marginBottom:10}}/>
          <input value={fiadoTel} onChange={e=>setFiadoTel(e.target.value)} placeholder="Teléfono *" type="tel" style={{width:"100%",background:T.inp,border:B1,borderRadius:8,color:T.text,padding:"10px 12px",fontSize:16,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",marginBottom:10}}/>
          <div style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:6,marginBottom:14}}>
            {PLAZOS_FIADO.map(p=>(
              <button key={p.val} onClick={()=>setFiadoPlazo(p.val)} style={{background:fiadoPlazo===p.val?"#16a34a":"#080c14",color:fiadoPlazo===p.val?"#fff":"#8a9aaf",border:`1px solid ${fiadoPlazo===p.val?"#16a34a":"#1e3a5f"}`,borderRadius:7,padding:"8px",fontSize:13,fontWeight:700,cursor:"pointer"}}>{p.lbl}</button>
            ))}
          </div>
          <div style={{display:"flex",gap:8}}>
            <button onClick={()=>setModalFiado(null)} style={{flex:1,background:"#1e3a5f",color:T.muted,border:"none",borderRadius:8,padding:"10px",cursor:"pointer",fontWeight:700}}>Cancelar</button>
            <button onClick={async()=>{
              if(!fiadoNombre.trim()){t4("Nombre obligatorio","err");return;}
              if(!fiadoTel.trim()){t4("Teléfono obligatorio","err");return;}
              const diasPlazo=fiadoPlazo==="custom"?(parseInt(fiadoPlazoCustom)||7):parseInt(fiadoPlazo);
              const fechaLimite=new Date();fechaLimite.setDate(fechaLimite.getDate()+diasPlazo);
              const fechaLimStr=fechaLimite.toLocaleDateString("es-CO",{day:"2-digit",month:"2-digit",year:"numeric"});
              const itemsFiadoBarra=modalFiado.items.slice();const totalFiadoBarra=modalFiado.total;
              const nFiado=fiadoNombre;const tFiado=fiadoTel;
              setVentas(prev=>{const updated=[{id:"V"+Date.now(),mesa:"🍺 Barra",origen:"barra",items:itemsFiadoBarra,total:totalFiadoBarra,tipo:"fiado",metodoPago:"Fiado",cliente:nFiado,telefono:tFiado,plazo:`${diasPlazo}d — ${fechaLimStr}`,hora:new Date().toLocaleTimeString("es-CO",{hour:"2-digit",minute:"2-digit"}),cambio:0,anulada:false},...prev].slice(0,100);saveHist(updated);return updated;});
              setModalFiado(null);setPedidoCajero([]);setMontoEfectivo("");setMontoTransfer("");setPagoMixto(false);
              t4(`✅ Fiado — ${nFiado} — ${diasPlazo} días`);
              const itemsFiadoBarraFB=itemsFiadoBarra.map(i=>{const cu=(i.compra||0)/(i.cajUnid||1);return{...i,tipoVenta:"fiado",cantidad:i.qty,ingreso:(i.precio||0)*i.qty,costo:Math.round(cu)*i.qty,unidadesDesc:i.qty,cliente:nFiado,telefono:tFiado,plazo:diasPlazo+"d",fechaLimite:fechaLimStr};});
              guardarVentaFB({fecha:fechaVenta(),metodoPago:"Fiado",items:itemsFiadoBarraFB});
              guardarFiadoFB({cliente:nFiado,telefono:tFiado,total:totalFiadoBarra,plazo:diasPlazo,fechaLimite:fechaLimStr,items:itemsFiadoBarraFB,origen:"barra"});
              actualizarStockFB(itemsFiadoBarraFB);
            }} style={{flex:2,background:"linear-gradient(135deg,#16a34a,#15803d)",color:"#fff",border:"none",borderRadius:8,padding:"10px",cursor:"pointer",fontWeight:800,fontSize:16}}>✅ Confirmar Fiado</button>
          </div>
        </div>
      </div>}

      {/* MODAL FIADO FRÍO */}
      {modalFiadoFrio&&<div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.75)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:200,padding:16}}>
        <div style={{background:T.card,border:"1px solid #4ade80",borderRadius:14,padding:24,maxWidth:380,width:"100%"}}>
          <div style={{fontWeight:800,fontSize:16,color:"#4ade80",marginBottom:14}}>📋 Fiado Punto Frío — {COP(modalFiadoFrio.total)}</div>
          <input value={fiadoFrioNombre} onChange={e=>setFiadoFrioNombre(e.target.value)} placeholder="Nombre del cliente *" style={{width:"100%",background:T.inp,border:B1,borderRadius:8,color:T.text,padding:"10px 12px",fontSize:16,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",marginBottom:10}}/>
          <input value={fiadoFrioTel} onChange={e=>setFiadoFrioTel(e.target.value)} placeholder="Teléfono *" type="tel" style={{width:"100%",background:T.inp,border:B1,borderRadius:8,color:T.text,padding:"10px 12px",fontSize:16,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",marginBottom:10}}/>
          <div style={{display:"grid",gridTemplateColumns:"repeat(2,1fr)",gap:6,marginBottom:14}}>
            {PLAZOS_FIADO.map(p=>(
              <button key={p.val} onClick={()=>setFiadoFrioPlazo(p.val)} style={{background:fiadoFrioPlazo===p.val?"#16a34a":"#080c14",color:fiadoFrioPlazo===p.val?"#fff":"#8a9aaf",border:`1px solid ${fiadoFrioPlazo===p.val?"#16a34a":"#1e3a5f"}`,borderRadius:7,padding:"8px",fontSize:13,fontWeight:700,cursor:"pointer"}}>{p.lbl}</button>
            ))}
          </div>
          <div style={{display:"flex",gap:8}}>
            <button onClick={()=>setModalFiadoFrio(null)} style={{flex:1,background:"#1e3a5f",color:T.muted,border:"none",borderRadius:8,padding:"10px",cursor:"pointer",fontWeight:700}}>Cancelar</button>
            <button onClick={confirmarFiadoFrio} disabled={procesandoFrio} style={{flex:2,background:procesandoFrio?"#065f46":"linear-gradient(135deg,#16a34a,#15803d)",color:"#fff",border:"none",borderRadius:8,padding:"10px",cursor:procesandoFrio?"not-allowed":"pointer",fontWeight:800,fontSize:16}}>{procesandoFrio?"⏳ Procesando...":"✅ Confirmar Fiado"}</button>
          </div>
        </div>
      </div>}

      {/* MODAL DAÑO */}
      {modalDano&&<div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.75)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:200,padding:16}}>
        <div style={{background:T.card,border:"1px solid #f85149",borderRadius:14,padding:24,maxWidth:400,width:"100%",maxHeight:"80vh",overflowY:"auto"}}>
          <div style={{fontWeight:800,fontSize:16,color:"#f85149",marginBottom:12}}>💥 Registrar Daño</div>
          <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(90px,1fr))",gap:6,marginBottom:14,maxHeight:200,overflowY:"auto"}}>
            {prods.map(p=>(
              <div key={p.id} onClick={()=>setDanoProducto(p)} style={{background:danoProducto?.id===p.id?T.redBg:T.inp,border:`2px solid ${danoProducto?.id===p.id?T.red:T.border}`,borderRadius:8,padding:"8px 4px",textAlign:"center",cursor:"pointer"}}>
                {p.imgUrl?<img src={p.imgUrl} alt={p.nombre} loading="lazy" style={{width:32,height:32,borderRadius:6,objectFit:"cover",display:"block",margin:"0 auto 3px"}}/>:<div style={{fontSize:22,marginBottom:2}}>{p.emoji}</div>}
                <div style={{fontSize:9,color:T.text,fontWeight:600,lineHeight:1.2}}>{p.nombre}</div>
              </div>
            ))}
          </div>
          {danoProducto&&<div style={{display:"flex",alignItems:"center",gap:8,marginBottom:12}}>
            <span style={{fontSize:13,color:T.muted}}>Cantidad:</span>
            <button onClick={()=>setDanoQty(Math.max(1,danoQty-1))} style={{background:T.btn2,color:"#f85149",border:"none",borderRadius:5,width:26,height:26,fontSize:16,cursor:"pointer",fontWeight:700}}>−</button>
            <input type="number" value={danoQty} onChange={e=>setDanoQty(Math.max(1,parseInt(e.target.value)||1))} style={{width:50,background:T.inp,border:B1,borderRadius:5,color:T.text,padding:4,fontSize:16,textAlign:"center",outline:"none",fontFamily:"'Inter',system-ui,sans-serif"}}/>
            <button onClick={()=>setDanoQty(danoQty+1)} style={{background:T.btn2,color:"#f85149",border:"none",borderRadius:5,width:26,height:26,fontSize:16,cursor:"pointer",fontWeight:700}}>+</button>
          </div>}
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:6,marginBottom:8}}>
            {["Botella rota","Producto vencido","Derrame","Producto en mal estado","Consumo interno","Otro"].map(m=>(
              <button key={m} onClick={()=>{if(m==="Otro"){setDanoObs("");setTimeout(()=>danoTextRef.current?.focus(),50);}else setDanoObs(m);}} style={{background:danoObs===m?T.redBg:T.inp,color:danoObs===m?T.red:T.muted,border:`1px solid ${danoObs===m?T.red:T.border}`,borderRadius:8,padding:"8px 10px",fontSize:13,fontWeight:700,cursor:"pointer",textAlign:"left"}}>{m}</button>
            ))}
          </div>
          <textarea ref={danoTextRef} value={danoObs} onChange={e=>setDanoObs(e.target.value)} placeholder="O escribe la observación aquí..." rows={2} style={{width:"100%",background:T.inp,border:B1,borderRadius:8,color:T.text,padding:"10px 12px",fontSize:13,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",resize:"none",marginBottom:14}}/>
          <div style={{display:"flex",gap:8}}>
            <button onClick={()=>{setModalDano(null);setDanoProducto(null);setDanoQty(1);setDanoObs("");}} style={{flex:1,background:"#1e3a5f",color:T.muted,border:"none",borderRadius:8,padding:"10px",cursor:"pointer",fontWeight:700}}>Cancelar</button>
            <button onClick={registrarDano} disabled={!danoProducto||procesandoDano} style={{flex:2,background:(!danoProducto||procesandoDano)?"#1e2d45":"linear-gradient(135deg,#dc2626,#991b1b)",color:(!danoProducto||procesandoDano)?"#8a9aaf":"#fff",border:"none",borderRadius:8,padding:"10px",cursor:(!danoProducto||procesandoDano)?"not-allowed":"pointer",fontWeight:800,fontSize:16}}>{procesandoDano?"⏳ Procesando...":"💥 Confirmar Daño"}</button>
          </div>
        </div>
      </div>}

      {/* MODAL AGREGAR PRODUCTO */}
      {modalAgregar&&<div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.8)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:200,padding:16}}>
        <div style={{background:T.card,border:BA1,borderRadius:14,padding:20,maxWidth:440,width:"100%",maxHeight:"85vh",display:"flex",flexDirection:"column"}}>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:12}}>
            <div style={{fontWeight:800,fontSize:16,color:T.accent}}>➕ Agregar producto al pedido</div>
            <button onClick={()=>setModalAgregar(null)} style={{background:"none",border:"none",color:"#f85149",fontSize:19,cursor:"pointer",padding:"0 4px"}}>✕</button>
          </div>
          <div style={{overflowY:"auto",flex:1}}>
            <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(95px,1fr))",gap:6}}>
              {prods.map(p=>{
                const sinStock=(p.stock||0)<=0;
                return(
                  <div key={p.id} onClick={()=>{addItemPedido(modalAgregar.mesaId,modalAgregar.pedId,p,modalAgregar.origItems);if((p.stock||0)>0){t4(`✅ ${p.nombre} agregado`);setModalAgregar(null);}}}
                    style={{background:sinStock?"#1a0a0a":T.inp,border:sinStock?`1px solid ${T.redBd}`:"1px solid #1e2d45",borderRadius:9,padding:"8px 4px",textAlign:"center",cursor:sinStock?"not-allowed":"pointer",opacity:sinStock?.5:1,position:"relative"}}>
                    {sinStock&&<div style={{position:"absolute",top:2,left:2,background:"#dc2626",color:"#fff",borderRadius:3,fontSize:7,fontWeight:800,padding:"1px 3px"}}>AGOTADO</div>}
                    {p.imgUrl?<img src={p.imgUrl} alt={p.nombre} loading="lazy" style={{width:36,height:36,borderRadius:6,objectFit:"cover",display:"block",margin:"0 auto 3px",filter:sinStock?"grayscale(1)":"none"}}/>:<div style={{fontSize:24,marginBottom:2}}>{p.emoji}</div>}
                    <div style={{fontSize:13,color:sinStock?T.muted:T.text,fontWeight:600,lineHeight:1.2}}>{p.nombre}</div>
                    <div style={{fontSize:13,color:sinStock?T.muted:T.accent,fontWeight:700,marginTop:2}}>{sinStock?"Agotado":COP(p.precio)}</div>
                  </div>
                );
              })}
            </div>
          </div>
        </div>
      </div>}

      {showThemePicker&&<ThemePicker tema={tema} setTema={setTema} onClose={()=>setShowThemePicker(false)}/>}

      {/* MODAL APERTURA DE CAJA */}
      {modalApertura&&<div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.92)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:500,padding:16}}>
        <div style={{background:T.card,border:`2px solid ${T.accent}`,borderRadius:18,padding:28,maxWidth:380,width:"100%",textAlign:"center"}}>
          <div style={{fontSize:40,marginBottom:10}}>🔑</div>
          <div style={{fontWeight:900,fontSize:19,color:T.accent,marginBottom:6}}>{negocio}</div>
          <div style={{fontWeight:700,fontSize:16,color:T.text,marginBottom:4}}>Apertura de caja</div>
          <div style={{fontSize:13,color:T.muted,marginBottom:20}}>Ingresa el efectivo inicial para comenzar el turno</div>
          <div style={{fontSize:13,color:T.muted,textAlign:"left",marginBottom:6}}>💵 Efectivo inicial en caja</div>
          <input type="text" inputMode="numeric" value={efectivoInicial} onChange={e=>setEfectivoInicial(fmtInput(e.target.value))} placeholder="$ 0" style={{width:"100%",background:T.inp,border:BA2,borderRadius:10,color:T.text,padding:"14px",fontSize:26,fontWeight:800,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",textAlign:"center",marginBottom:18}} onFocus={e=>e.target.select()} autoFocus/>
          <button onClick={abrirCaja} disabled={procesandoApertura} style={{width:"100%",background:procesandoApertura?"#065f46":"linear-gradient(135deg,#f59e0b,#d97706)",color:procesandoApertura?"#6ee7b7":"#000",border:"none",borderRadius:10,padding:"16px",fontSize:16,fontWeight:800,cursor:procesandoApertura?"not-allowed":"pointer",marginBottom:10}}>
            {procesandoApertura?"⏳ Abriendo...":"✅ Abrir caja — iniciar turno"}
          </button>
          <button onClick={onSalir} style={{width:"100%",background:"none",border:`1px solid ${T.border}`,borderRadius:10,padding:"10px",fontSize:13,fontWeight:600,cursor:"pointer",color:T.muted}}>
            🔄 Cambiar usuario
          </button>
          <div style={{fontSize:13,color:T.muted,marginTop:10}}>Cajero: {usuario}</div>
        </div>
      </div>}

      {/* BANNER CIERRE PENDIENTE */}
      {cierrePendiente&&<div style={{position:"fixed",top:0,left:0,right:0,zIndex:500,background:"linear-gradient(90deg,#b45309,#d97706)",color:"#fff",padding:"10px 16px",display:"flex",alignItems:"center",justifyContent:"space-between",gap:8,fontSize:13,fontWeight:700,boxShadow:"0 2px 8px rgba(0,0,0,.4)"}}>
        <span>⚠️ Cierre pendiente de sincronizar — sin conexión</span>
        <button onClick={reintentarCierre} disabled={reintentandoCierre} style={{background:"rgba(255,255,255,.2)",border:"1px solid rgba(255,255,255,.5)",color:"#fff",borderRadius:7,padding:"5px 14px",fontSize:13,fontWeight:800,cursor:reintentandoCierre?"not-allowed":"pointer",whiteSpace:"nowrap",opacity:reintentandoCierre?.6:1}}>{reintentandoCierre?"⏳ Reintentando...":"🔄 Reintentar ahora"}</button>
      </div>}

      {/* MODAL CIERRE DE CAJA */}
      {modalCierre&&<div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.85)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:400,padding:16}}>
        <div style={{background:T.card,border:`2px solid #fcd34d`,borderRadius:18,padding:24,maxWidth:420,width:"100%",maxHeight:"90vh",overflowY:"auto"}}>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:16}}>
            <div style={{fontWeight:900,fontSize:16,color:"#fcd34d"}}>🔒 Cierre de caja</div>
            <button onClick={()=>setModalCierre(false)} style={{background:"none",border:"none",color:T.red,fontSize:19,cursor:"pointer"}}>✕</button>
          </div>
          {/* Apertura info */}
          {turnoActivo&&<div style={{background:T.inp,borderRadius:8,padding:"8px 12px",marginBottom:12,fontSize:13,color:T.muted}}>
            ⏰ Turno desde: {new Date(turnoActivo.fechaISO).toLocaleString("es-CO",{day:"2-digit",month:"2-digit",year:"numeric",hour:"2-digit",minute:"2-digit"})} · 💵 Inicial: {COP(turnoActivo.efectivoInicial||0)}
          </div>}
          {/* Resumen */}
          <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:8,marginBottom:14}}>
            {[
              {l:"💰 Total cobrado",v:COP(totalCobrado),c:"#f59e0b"},
              {l:"💵 Efectivo ventas",v:COP(totalEfectivo),c:"#4ade80"},
              {l:"📲 Transferencia",v:COP(totalTransfer),c:"#60a5fa"},
              ...(totalFiado>0?[{l:"📋 Fiado",v:COP(totalFiado),c:"#fbbf24"}]:[]),
              {l:"💵 Efectivo total",v:COP(totalEfectivo+(turnoActivo?.efectivoInicial||0)),c:"#4ade80"},
              {l:"⏳ Pendiente",v:COP(totalPendienteMesas),c:"#fbbf24"},
              {l:"🧾 Transacciones",v:ventas.filter(v=>!v.anulada).length,c:T.text},
              {l:"❌ Anuladas",v:ventas.filter(v=>v.anulada).length,c:T.red},
            ].map((k,i)=>(
              <div key={i} style={{background:T.inp,borderRadius:8,padding:"9px 10px",border:B1}}>
                <div style={{fontSize:13,color:T.muted,marginBottom:2}}>{k.l}</div>
                <div style={{fontSize:16,fontWeight:800,color:k.c}}>{k.v}</div>
              </div>
            ))}
          </div>
          {/* Efectivo contado */}
          <div style={{fontSize:13,color:T.muted,marginBottom:5}}>💵 Efectivo contado en caja (incluye inicial)</div>
          <input type="text" inputMode="numeric" value={efectivoContado} onChange={e=>setEfectivoContado(fmtInput(e.target.value))} placeholder={COP(totalEfectivo+(turnoActivo?.efectivoInicial||0))} style={{width:"100%",background:T.inp,border:BA2,borderRadius:8,color:T.text,padding:"12px",fontSize:22,fontWeight:800,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",textAlign:"center",marginBottom:10}} onFocus={e=>e.target.select()}/>
          {(parseInput(efectivoContado)||0)>0&&(()=>{
            const diff=(parseInput(efectivoContado)||0)-(totalEfectivo+(turnoActivo?.efectivoInicial||0));
            return<div style={{background:diff===0?T.greenBg:diff>0?"rgba(245,158,11,.15)":T.redBg,border:`1px solid ${diff===0?T.greenBd:diff>0?"#f59e0b":T.redBd}`,borderRadius:8,padding:"10px",textAlign:"center",marginBottom:10}}>
              <div style={{fontSize:13,color:diff===0?T.green:diff>0?"#f59e0b":T.red,textTransform:"uppercase",letterSpacing:.7,fontWeight:700}}>Diferencia</div>
              <div style={{fontSize:20,fontWeight:900,color:diff===0?T.green:diff>0?"#f59e0b":T.red}}>{diff>=0?"+":""}{COP(diff)} {diff===0?"✅":diff>0?"(sobrante)":"(faltante)"}</div>
            </div>;
          })()}
          {/* Observaciones */}
          <div style={{fontSize:13,color:T.muted,marginBottom:5}}>📝 Observaciones (opcional)</div>
          <textarea value={cierreObs} onChange={e=>setCierreObs(e.target.value)} placeholder="Ej: Todo cuadra. Efectivo entregado a propietario." rows={2} style={{width:"100%",background:T.inp,border:B1,borderRadius:8,color:T.text,padding:"9px 12px",fontSize:13,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",resize:"none",marginBottom:14}}/>
          <div style={{display:"flex",gap:8}}>
            <button onClick={()=>setModalCierre(false)} style={{flex:1,background:T.btn2,color:T.muted,border:"none",borderRadius:8,padding:"12px",cursor:"pointer",fontWeight:700}}>Cancelar</button>
            <button onClick={cerrarCaja} disabled={procesandoCierre} style={{flex:2,background:procesandoCierre?"#065f46":"linear-gradient(135deg,#f59e0b,#d97706)",color:procesandoCierre?"#6ee7b7":"#000",border:"none",borderRadius:8,padding:"12px",cursor:procesandoCierre?"not-allowed":"pointer",fontWeight:800,fontSize:16}}>
              {procesandoCierre?"⏳ Cerrando...":"🔒 Confirmar cierre"}
            </button>
          </div>
        </div>
      </div>}

    </div>
  );
}