// ════════════════════════════════════════
//  MESERA APP v3
//  Estados: pendiente → despachado → cobrado → recibido
// ════════════════════════════════════════
function MeseraApp({dm,tema,setTema,toggleDm,session,onSalir}){
  const T=tema||THEMES.facebook;
  const C=T;
  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=""}=session;
  const[mesas,setMesas]=useState(Array.from({length:15},(_,i)=>({
    id:i+1,num:i+1,estado:"libre",pedidoActual:[],pedidos:[],
  })));
  const[prods,setProds]=useState([]);
  const[vista,setVista]=useState("mesas");
  const[mesaActual,setMesaActual]=useState(null);
  const[tabPos,setTabPos]=useState("nuevo");
  const[catM,setCatM]=useState("Todas");
  const[rapidaPedido,setRapidaPedido]=useState([]);
  const[toast3,setToast3]=useState(null);
  const[showPago,setShowPago]=useState(null);
  const[montoStr,setMontoStr]=useState("");
  const[metodoPagoM,setMetodoPagoM]=useState("Efectivo");
  const[montoEfM,setMontoEfM]=useState("");
  const[montoTrM,setMontoTrM]=useState("");
  const[showThemePicker,setShowThemePicker]=useState(false);
  const[enviandoPedido,setEnviandoPedido]=useState(false);
  const[enviandoRapida,setEnviandoRapida]=useState(false);
  const t3=(msg,type="ok")=>{setToast3({msg,type});setTimeout(()=>setToast3(null),3000);};
  const[online,setOnline]=useState(navigator.onLine);
  React.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 DEFAULT_MESAS=Array.from({length:15},(_,i)=>({id:i+1,num:i+1,estado:"libre",pedidoActual:[],pedidos:[]}));
  const updateMesaFB=(mesaId,pedidos,estado)=>{
    if(!empresaId)return;
    const num=mesaId==="vr"?"⚡":mesaId;
    NexusFirebase.updateMesa(empresaId,String(mesaId),{id:mesaId,num,estado,pedidos:pedidos.map(p=>({...p,items:limpiarItems(p.items||[])}))}).catch(()=>{});
  };

  useEffect(()=>{
    if(!empresaId)return;
    const unsubInv=NexusFirebase.listenInventario(empresaId,raw=>{
      setProds(raw.filter(p=>p.ventaUnit>0).map(p=>({...p,emoji:EMOJIS_POS[p.categoria]||"🍾",precio:p.ventaUnit||0,imgUrl:p.imgUrl||""})));
    });
    const unsubMesas=NexusFirebase.listenMesas(empresaId,fbMesas=>{
      setMesas(prev=>{
        const updated=DEFAULT_MESAS.map(dm=>{
          const fb=fbMesas.find(m=>String(m.id)===String(dm.id));
          const local=prev.find(p=>String(p.id)===String(dm.id));
          if(!fb)return{...dm,pedidoActual:local?.pedidoActual||[]};
          (fb.pedidos||[]).forEach(fbP=>{
            const lP=(local?.pedidos||[]).find(lp=>lp.id===fbP.id);
            if(lP&&lP.estado!=="recibido"&&fbP.estado==="recibido")t3(`✅ Caja confirmó recibo — Mesa ${dm.num} — ${COP(fbP.total)}`);
          });
          return{...fb,id:dm.id,num:dm.num,pedidoActual:local?.pedidoActual||[]};
        });
        const vrFB=fbMesas.find(m=>String(m.id)==="vr");
        if(vrFB){
          const vrLocal=prev.find(m=>String(m.id)==="vr");
          (vrFB.pedidos||[]).forEach(fbP=>{
            const lP=(vrLocal?.pedidos||[]).find(lp=>lp.id===fbP.id);
            if(lP&&lP.estado!=="recibido"&&fbP.estado==="recibido")t3(`✅ Caja confirmó recibo — Venta Rápida — ${COP(fbP.total)}`);
          });
          const exists=updated.some(m=>String(m.id)==="vr");
          if(exists)return updated.map(m=>String(m.id)==="vr"?{...vrFB,pedidoActual:vrLocal?.pedidoActual||[]}:m);
          return[...updated,{...vrFB,pedidoActual:vrLocal?.pedidoActual||[]}];
        }
        return updated;
      });
    });
    return()=>{unsubInv();unsubMesas();};
  },[empresaId]);

  const getMesa=()=>mesaActual==="rapida"
    ?{id:"rapida",num:"⚡",estado:"libre",pedidoActual:rapidaPedido,pedidos:[]}
    :mesas.find(m=>m.id===mesaActual)||null;
  const m=getMesa();
  const pedidoActual=mesaActual==="rapida"?rapidaPedido:(m?.pedidoActual||[]);
  const totalActual=pedidoActual.reduce((a,i)=>a+(i.precio||0)*i.qty,0);
  // Solo cuentan como pendientes los que están en estado pendiente o despachado
  const pedidosPendientes=(m?.pedidos||[]).filter(p=>p.estado==="pendiente"||p.estado==="despachado"||p.estado==="cobrado");
  const pedidosCobrados=(m?.pedidos||[]).filter(p=>p.estado==="cobrado"||p.estado==="cobrado_despachado"||p.estado==="recibido");
  const totalPendiente=pedidosPendientes.reduce((a,p)=>a+p.total,0);
  const totalCobrado=pedidosCobrados.reduce((a,p)=>a+p.total,0);

  const setPedidoActual=fn=>{
    if(mesaActual==="rapida")setRapidaPedido(fn);
    else setMesas(prev=>prev.map(m2=>m2.id===mesaActual?{...m2,pedidoActual:typeof fn==="function"?fn(m2.pedidoActual||[]):fn}:m2));
  };
  const addItem=prod=>{
    if((prod.stock||0)<=0){t3(`❌ Sin stock: ${prod.nombre}`,"err");return;}
    setPedidoActual(prev=>{const ex=prev.find(i=>i.id===prod.id);if(ex)return prev.map(i=>i.id===prod.id?{...i,qty:i.qty+1}:i);return[...prev,{...prod,qty:1}];});
    if(mesaActual!=="rapida")setMesas(prev=>prev.map(m2=>m2.id===mesaActual?{...m2,estado:"ocupada"}:m2));
  };
  const cambioQty=(id,d)=>setPedidoActual(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 setQtyItem=(id,val)=>setPedidoActual(prev=>prev.map(i=>i.id===id?{...i,qty:Math.max(1,parseInt(val)||1)}:i));

  // Limpia campos pesados (imgUrl base64) de los items antes de enviar al GS
  const limpiarItems=(items)=>(items||[]).map(({imgUrl,imgBase64,...rest})=>rest);

  const enviarPedido=async()=>{
    if(enviandoPedido)return;
    if(!pedidoActual.length){t3("Agrega productos primero","err");return;}
    setEnviandoPedido(true);
    const pedId="P"+Date.now();
    const nuevoPed={
      id:pedId,
      items:limpiarItems(pedidoActual),// sin imgUrl
      total:totalActual,estado:"pendiente",
      hora:new Date().toLocaleTimeString("es-CO",{hour:"2-digit",minute:"2-digit"})
    };
    const mesaObj=mesas.find(x=>x.id===mesaActual);
    // Limpiar también los pedidos existentes al enviar
    const pedidosExistentes=(mesaObj?.pedidos||[]).map(p=>({...p,items:limpiarItems(p.items)}));
    const pedidosActualizados=[...pedidosExistentes,nuevoPed];
    const pedidosConImg=[...(mesaObj?.pedidos||[]),{...nuevoPed,items:[...pedidoActual]}];
    setMesas(prev=>prev.map(m2=>m2.id===mesaActual?{...m2,pedidoActual:[],estado:"ocupada",pedidos:pedidosConImg}:m2));
    t3(`✅ Pedido ${pedidosConImg.length} enviado — ${COP(totalActual)}`);
    setTabPos("cuenta");
    setEnviandoPedido(false);
    updateMesaFB(mesaActual,pedidosActualizados,"ocupada");
  };

  // E-06: Venta rápida → siempre va a barra
  const enviarRapida=async()=>{
    if(enviandoRapida)return;
    if(!rapidaPedido.length){t3("Agrega productos primero","err");return;}
    setEnviandoRapida(true);
    const total=rapidaPedido.reduce((a,i)=>a+(i.precio||0)*i.qty,0);
    const pedId="VR"+Date.now();
    const pedRapido={id:pedId,items:limpiarItems(rapidaPedido),total,estado:"pendiente",tipo:"rapida",
      origen:"mesera",mesera:usuario,
      hora:new Date().toLocaleTimeString("es-CO",{hour:"2-digit",minute:"2-digit"})};
    setRapidaPedido([]);
    t3(`✅ Venta rápida enviada a barra — ${COP(total)}`);
    setVista("mesas");
    setEnviandoRapida(false);
    updateMesaFB("vr",[pedRapido],"ocupada");
  };

  // Abrir modal de cobro — para pedido individual o total
  const abrirPago=(tipo,pedidoId,montoOverride)=>{
    let total=0;
    if(tipo==="total")total=totalPendiente;
    else if(tipo==="diferencia")total=montoOverride||0;
    else{const ped=m?.pedidos.find(p=>p.id===pedidoId);if(!ped)return;total=ped.total;}
    setShowPago({tipo,total,pedidoId});
    setMontoStr(String(total));
    setMetodoPagoM("Efectivo");
  };

  // Confirmar cobro — marca pedido como "cobrado" (no recibido aún por cajero)
  const confirmarPago=async()=>{
    const esMixto=metodoPagoM==="Mixto";
    const monto=esMixto?(parseInput(montoEfM)||0)+(parseInput(montoTrM)||0):parseInput(montoStr)||0;
    if(monto<showPago.total){t3("El monto es menor al total","err");return;}
    const cambio=monto-showPago.total;
    const metodoFinal=esMixto?`Mixto: Efectivo ${COP(parseInput(montoEfM)||0)} + Transfer ${COP(parseInput(montoTrM)||0)}`:metodoPagoM;
    // Cobro de diferencia (cajero modificó pedido)
    if(showPago.tipo==="diferencia"){
      const mesaObj=mesas.find(x=>x.id===mesaActual);
      if(mesaObj){
        const actualizados=(mesaObj.pedidos||[]).map(p=>
          p.id===showPago.pedidoId?{...p,diferencia:0,montoCobrado:(p.montoCobrado||0)+showPago.total}:p
        );
        setMesas(prev=>prev.map(m2=>m2.id===mesaActual?{...m2,pedidos:actualizados}:m2));
        setShowPago(null);setMontoEfM("");setMontoTrM("");
        t3(`✅ Diferencia cobrada — Cambio: ${COP(cambio)}`);
        updateMesaFB(mesaActual,actualizados,"ocupada");
      }
      return;
    }
    // Venta rápida cobro
    if(showPago.tipo==="rapida_cobro"){
      const vrPed=showPago.pedidoVR;
      const vrMesa=mesas.find(m=>String(m.id)==="vr");
      if(vrMesa){
        const actualiz=(vrMesa.pedidos||[]).map(p=>{
          if(p.id!==vrPed.id)return p;
          const nuevoEstado=p.estado==="despachado"?"cobrado_despachado":"cobrado";
          return{...p,estado:nuevoEstado,metodoPago:metodoFinal,montoCobrado:monto};
        });
        setMesas(prev=>prev.map(m2=>String(m2.id)==="vr"?{...m2,pedidos:actualiz}:m2));
        setShowPago(null);setMontoStr("");setMontoEfM("");setMontoTrM("");
        t3(`✅ Cobrado — Caja recibirá el dinero. Cambio: ${COP(cambio)}`);
        updateMesaFB("vr",actualiz,"ocupada");
      }
      return;
    }
    const mesaObj=mesas.find(x=>x.id===mesaActual);
    const pedidosActualizados=(mesaObj?.pedidos||[]).map(p=>{
      const esPedidoObjetivo=
        (showPago.tipo==="total"&&(p.estado==="pendiente"||p.estado==="despachado"))||
        (showPago.tipo==="pedido"&&p.id===showPago.pedidoId);
      if(esPedidoObjetivo){
        const nuevoEstado=p.estado==="despachado"?"cobrado_despachado":"cobrado";
        return{...p,estado:nuevoEstado,metodoPago:metodoFinal,montoCobrado:monto};
      }
      return p;
    });
    setMesas(prev=>prev.map(m2=>m2.id===mesaActual?{...m2,pedidos:pedidosActualizados}:m2));
    setShowPago(null);setMontoEfM("");setMontoTrM("");
    t3(`✅ Cobrado — Cambio: ${COP(cambio)}`);
    updateMesaFB(mesaActual,pedidosActualizados,"ocupada");
  };

  const eliminarPedido=async(pedidoId)=>{
    const mesaObj=mesas.find(x=>x.id===mesaActual);
    if(!mesaObj)return;
    const ped=mesaObj.pedidos.find(p=>p.id===pedidoId);
    if(!ped||ped.estado!=="pendiente"){t3("Solo se pueden eliminar pedidos pendientes","err");return;}
    if(!window.confirm("¿Eliminar este pedido? Esta acción no se puede deshacer."))return;
    const restantes=mesaObj.pedidos.filter(p=>p.id!==pedidoId);
    const nuevoEstado=restantes.length===0?"libre":"ocupada";
    setMesas(prev=>prev.map(m2=>m2.id===mesaActual?{...m2,pedidos:restantes,estado:nuevoEstado,pedidoActual:nuevoEstado==="libre"?[]:m2.pedidoActual}:m2));
    t3("🗑 Pedido eliminado");
    if(nuevoEstado==="libre")setVista("mesas");
    updateMesaFB(mesaActual,restantes,nuevoEstado);
  };

  const cerrarMesa=async()=>{
    const pedidos=m?.pedidos||[];
    if(!pedidos.length){t3("Sin pedidos en esta mesa","err");return;}
    const sinCobrar=pedidos.filter(p=>p.estado==="pendiente"||p.estado==="despachado");
    if(sinCobrar.length>0){
      const pendT=sinCobrar.reduce((a,p)=>a+p.total,0);
      t3(`🚫 Falta cobrar ${COP(pendT)} al cliente`,"err");
      return;
    }
    if(!window.confirm(`¿Cerrar Mesa ${m?.num}?\nEl cliente se fue — caja recibirá el dinero después.`))return;
    const pedidosActualizados=pedidos.map(p=>
      (p.estado==="cobrado"||p.estado==="cobrado_despachado")
        ?{...p,estado:"pendiente_caja",mesaCerrada:m?.num}
        :p
    );
    setMesas(prev=>prev.map(m2=>m2.id===mesaActual?{...m2,estado:"libre",pedidoActual:[],pedidos:[]}:m2));
    t3(`✅ Mesa ${m?.num} cerrada`);setVista("mesas");
    updateMesaFB(mesaActual,pedidosActualizados.filter(p=>p.estado==="pendiente_caja"),"libre");
  };

  const libres=mesas.filter(m2=>m2.estado==="libre"&&String(m2.id)!=="vr"&&String(m2.id)!=="rapida").length;
  const totalPendienteMesas=mesas.filter(m2=>String(m2.id)!=="vr"&&String(m2.id)!=="rapida"&&m2.estado==="ocupada").reduce((a,m2)=>{
    return a+(m2.pedidos||[]).filter(p=>p.estado==="pendiente"||p.estado==="despachado").reduce((b,p)=>b+p.total,0);
  },0);
  const sugs=sugerenciasBilletes(showPago?.total||0);

  // Estado color helper
  const estadoInfo=(est)=>({
    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:"📦 Despachado · 💰 Cobrado"},
    recibido:{bg:T.greenBg,color:T.green,label:"✅ Caja recibió"},
    anulado:{bg:T.redBg,color:T.red,label:"❌ Anulado"},
  }[est]||{bg:T.btn2,color:T.muted,label:est});

  return(
    <div style={{fontFamily:"'Inter',system-ui,sans-serif",background:T?.bg||"#07090f",minHeight:"100vh",color:T?.text||"#ffffff",maxHeight:"100vh",overflow:"hidden",display:"flex",flexDirection:"column"}}>
      {toast3&&<div style={{position:"fixed",top:14,right:14,zIndex:999,background:toast3.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)"}}>{toast3.msg}</div>}

      {/* MODAL PAGO */}
      {showPago&&<div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.8)",zIndex:200,display:"flex",alignItems:"center",justifyContent:"center",padding:16}}>
        <div style={{background:T.card,border:B1,borderRadius:16,width:"100%",maxWidth:360,padding:22,animation:"fadeIn .2s"}}>
          <div style={{fontWeight:800,fontSize:16,color:T.accent,marginBottom:3}}>
            💰 {showPago.tipo==="total"?"Pagar total":"Pagar pedido"}
          </div>
          <div style={{fontSize:13,color:T.muted,marginBottom:14}}>{mesaActual==="rapida"?"⚡ Venta Rápida":`Mesa ${m?.num}`}</div>
          <div style={{fontSize:13,color:T.muted,textTransform:"uppercase",letterSpacing:.7,marginBottom:3}}>Total a cobrar</div>
          <div style={{fontSize:32,fontWeight:900,color:T.accent,marginBottom:12}}>{COP(showPago.total)}</div>

          {/* Método de pago */}
          <div style={{fontSize:13,color:T.muted,textTransform:"uppercase",letterSpacing:.7,marginBottom:6}}>Método de pago</div>
          <div style={{display:"flex",gap:5,marginBottom:12,flexWrap:"wrap"}}>
            {["Efectivo","Transferencia","Mixto"].map(mp=>(
              <button key={mp} onClick={()=>setMetodoPagoM(mp)}
                style={{flex:1,background:metodoPagoM===mp?T.accent:T.inp,color:metodoPagoM===mp?T.card:T.muted,
                  border:metodoPagoM===mp?BA1:B1,borderRadius:7,padding:"7px 4px",
                  fontSize:13,fontWeight:700,cursor:"pointer",minWidth:60}}>
                {mp}
              </button>
            ))}
          </div>

          {/* Sugerencias */}
          <div style={{fontSize:13,color:T.muted,textTransform:"uppercase",letterSpacing:.7,marginBottom:5}}>Sugerencias</div>
          <div style={{display:"flex",gap:5,flexWrap:"wrap",marginBottom:10}}>
            {sugs.map(s=>(
              <button key={s} onClick={()=>{setMontoStr(String(s));if(metodoPagoM==="Mixto")setMontoEfM(String(s));}}
                style={{background:parseInput(montoStr)===s?T.greenBg:T.inp,border:`1px solid ${parseFloat(montoStr)===s?T.green:T.border}`,
                  color:parseFloat(montoStr)===s?T.green:T.accent,borderRadius:7,padding:"6px 10px",fontSize:13,fontWeight:700,cursor:"pointer"}}>
                {s===showPago.total?"✓ Exacto":fmtB(s)}
              </button>
            ))}
          </div>

          {metodoPagoM!=="Mixto"&&<>
            <div style={{fontSize:13,color:T.muted,textTransform:"uppercase",letterSpacing:.7,marginBottom:5}}>Monto recibido</div>
            <input type="text" inputMode="numeric" value={montoStr}
              onChange={e=>{const v=fmtInput(e.target.value);setMontoStr(v);}}
              style={{width:"100%",background:T.inp,border:B1,borderRadius:8,color:T.text,padding:"12px",fontSize:22,fontWeight:700,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",textAlign:"center",marginBottom:10}}/>
            {montoStr&&parseInput(montoStr)>0&&<div style={{background:parseInput(montoStr)>=showPago.total?"#0a2535":"#2d0f0f",border:`1px solid ${parseInput(montoStr)>=showPago.total?"#f59e0b":"#6b2020"}`,borderRadius:9,padding:"10px",textAlign:"center",marginBottom:14}}>
              <div style={{fontSize:13,color:parseInput(montoStr)>=showPago.total?"#f59e0b":"#f85149",textTransform:"uppercase",letterSpacing:.8}}>Cambio a devolver</div>
              <div style={{fontSize:26,fontWeight:800,color:"#fff",marginTop:3}}>
                {parseInput(montoStr)>=showPago.total?COP(parseInput(montoStr)-showPago.total):`Faltan ${COP(showPago.total-parseInput(montoStr))}`}
              </div>
            </div>}
          </>}
          {metodoPagoM==="Mixto"&&<div style={{marginBottom:10}}>
            <div style={{fontSize:13,color:"#4ade80",marginBottom:3}}>💵 Efectivo</div>
            <input type="text" inputMode="numeric" value={montoEfM} onChange={e=>setMontoEfM(fmtInput(e.target.value))} placeholder="$ 0"
              style={{width:"100%",background:T.inp,border:`1px solid ${T.green}`,borderRadius:7,color:T.text,padding:"10px",fontSize:19,fontWeight:700,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",textAlign:"center",marginBottom:8}}/>
            <div style={{fontSize:13,color:T.accent,marginBottom:3}}>📲 Transferencia</div>
            <input type="text" inputMode="numeric" value={montoTrM} onChange={e=>setMontoTrM(fmtInput(e.target.value))} placeholder="$ 0"
              style={{width:"100%",background:T.inp,border:`1px solid ${T.accent}`,borderRadius:7,color:T.text,padding:"10px",fontSize:19,fontWeight:700,outline:"none",fontFamily:"'Inter',system-ui,sans-serif",textAlign:"center",marginBottom:8}}/>
            {(parseInput(montoEfM)||0)+(parseInput(montoTrM)||0)>0&&<div style={{background:(parseInput(montoEfM)||0)+(parseInput(montoTrM)||0)>=showPago.total?"#0a2535":"#2d0f0f",border:`1px solid ${(parseInput(montoEfM)||0)+(parseInput(montoTrM)||0)>=showPago.total?"#f59e0b":"#6b2020"}`,borderRadius:9,padding:"10px",textAlign:"center",marginBottom:10}}>
              <div style={{fontSize:13,color:(parseInput(montoEfM)||0)+(parseInput(montoTrM)||0)>=showPago.total?"#f59e0b":"#f85149",textTransform:"uppercase",letterSpacing:.8}}>Cambio a devolver</div>
              <div style={{fontSize:22,fontWeight:800,color:"#fff",marginTop:3}}>
                {(parseInput(montoEfM)||0)+(parseInput(montoTrM)||0)>=showPago.total
                  ?COP((parseInput(montoEfM)||0)+(parseInput(montoTrM)||0)-showPago.total)
                  :`Faltan ${COP(showPago.total-(parseInput(montoEfM)||0)-(parseInput(montoTrM)||0))}`}
              </div>
            </div>}
          </div>}
          <div style={{display:"flex",gap:8}}>
            <button onClick={()=>setShowPago(null)} style={{flex:1,background:T.btn2,color:T.muted,border:"none",borderRadius:8,padding:"11px",fontSize:13,fontWeight:700,cursor:"pointer"}}>Cancelar</button>
            <button onClick={confirmarPago} style={{flex:2,background:T.btnGrad,color:"#fff",border:"none",borderRadius:8,padding:"11px",fontSize:16,fontWeight:800,cursor:"pointer"}}>✅ Confirmar</button>
          </div>
        </div>
      </div>}

      {/* TOPBAR */}
      <div style={{background:T.topbar,borderBottom:B2,padding:"10px 16px",display:"flex",alignItems:"center",justifyContent:"space-between",gap:8,flexWrap:"wrap",flexShrink:0}}>
        <div style={{display:"flex",alignItems:"center",gap:10}}>
          {vista!=="mesas"&&<button onClick={()=>setVista("mesas")} style={{background:"rgba(255,255,255,.15)",color:"#fff",border:"none",borderRadius:7,padding:"6px 12px",fontSize:13,fontWeight:700,cursor:"pointer"}}>← Mesas</button>}
          <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:6}}>
              🌸 {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"}/>
              {!online&&<span style={{background:"#dc2626",color:"#fff",borderRadius:5,padding:"1px 7px",fontSize:9,fontWeight:800}}>Sin conexión</span>}
              {totalPendienteMesas>0&&<span style={{background:"rgba(0,0,0,.25)",color:T.topbarAccent,borderRadius:5,padding:"1px 7px",fontSize:9,fontWeight:700}}>⏳ {COP(totalPendienteMesas)}</span>}
            </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>
          <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>

      {/* VISTA MESAS */}
      {vista==="mesas"&&<div style={{flex:1,overflowY:"auto",padding:14}}>
        <div style={{display:"flex",gap:8,marginBottom:14,flexWrap:"wrap"}}>
          <div style={{background:T.card,border:B1,borderRadius:9,padding:"7px 13px",fontSize:13,color:T.muted}}>🟢 <b style={{color:"#4ade80"}}>{libres}</b> libres</div>
          <div style={{background:T.card,border:B1,borderRadius:9,padding:"7px 13px",fontSize:13,color:T.muted}}>🔴 <b style={{color:"#f85149"}}>{mesas.filter(m2=>m2.estado==="ocupada"&&String(m2.id)!=="vr"&&String(m2.id)!=="rapida").length}</b> ocupadas</div>
          {totalPendienteMesas>0&&<div style={{background:"#2d1a00",border:"1px solid #92400e",borderRadius:9,padding:"7px 13px",fontSize:13,color:"#fbbf24"}}>⏳ Pendiente: <b>{COP(totalPendienteMesas)}</b></div>}
        </div>
        {/* Venta rápida de mesera — solo visible mientras no se haya cobrado */}
        {mesas.filter(m=>String(m.id)==="vr").flatMap(vr=>
          (vr.pedidos||[]).filter(p=>p.estado==="pendiente"||p.estado==="despachado").map((ped,i)=>{
            const estadoLabel=
              ped.estado==="despachado"?"📦 Despachada — pendiente cobrar":
              "⏳ En barra";
            const estadoColor=
              ped.estado==="despachado"?"#f59e0b":
              "#fbbf24";
            return(
            <div key={"vr"+i} style={{background:"linear-gradient(135deg,#1a1205,#0d1622)",border:"2px solid #818cf8",borderRadius:12,padding:12,marginBottom:10,boxShadow:"0 0 10px rgba(129,140,248,.15)"}}>
              <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:6}}>
                <span style={{fontWeight:800,fontSize:13,color:"#fde68a"}}>⚡ Venta Rápida · {ped.hora||""}</span>
                <span style={{background:"#0a2535",color:estadoColor,borderRadius:5,padding:"2px 8px",fontSize:13,fontWeight:700}}>
                  {estadoLabel}
                </span>
              </div>
              <div style={{fontSize:13,color:T.muted,marginBottom:8}}>
                {(ped.items||[]).map(it=>it.emoji+" "+it.nombre+" x"+(it.qty||1)).join(" · ")}
              </div>
              <div style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
                <span style={{fontWeight:800,fontSize:16,color:"#fde68a"}}>{COP(ped.total)}</span>
                <button onClick={()=>{setShowPago({tipo:"rapida_cobro",total:ped.total,pedidoVR:ped});setMontoStr(String(ped.total));setMetodoPagoM("Efectivo");}}
                  style={{background:"linear-gradient(135deg,#818cf8,#6366f1)",color:"#fff",border:"none",borderRadius:7,padding:"7px 14px",fontSize:13,fontWeight:800,cursor:"pointer"}}>
                  💰 Cobrar {COP(ped.total)}
                </button>
              </div>
            </div>
            );
          })
        )}
        <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fill,minmax(95px,1fr))",gap:10}}>
          {mesas.filter(m2=>String(m2.id)!=="vr"&&String(m2.id)!=="rapida").map(m2=>{
            const pend=(m2.pedidos||[]).filter(p=>p.estado==="pendiente"||p.estado==="despachado").reduce((a,p)=>a+p.total,0);
            const cobradoSinRecibir=(m2.pedidos||[]).filter(p=>p.estado==="cobrado"||p.estado==="cobrado_despachado"||p.estado==="pendiente_caja").reduce((a,p)=>a+p.total,0);
            const yaRecibido=(m2.pedidos||[]).every(p=>p.estado==="recibido"||p.estado==="anulado")&&(m2.pedidos||[]).length>0;
            const ocupada=m2.estado==="ocupada";
            return(
              <div key={m2.id} onClick={()=>{setMesaActual(m2.id);setTabPos("nuevo");setVista("pos");}}
                style={{borderRadius:14,padding:"16px 10px",textAlign:"center",cursor:"pointer",position:"relative",
                  border:`2px solid ${ocupada?"#dc2626":T.blue}`,
                  background:ocupada?"linear-gradient(135deg,#1a0808,#2d0f0f)":"linear-gradient(135deg,#071020,#0d1929)",
                  boxShadow:ocupada?"0 2px 8px rgba(220,38,38,.2)":`0 2px 8px ${T.blue}22`}}>
                <div style={{position:"absolute",top:6,right:6,width:7,height:7,borderRadius:"50%",background:ocupada?"#dc2626":T.blue}}></div>
                <div style={{fontSize:22,fontWeight:900,color:ocupada?"#f85149":T.blue}}>{m2.num}</div>
                <div style={{fontSize:9,fontWeight:700,color:ocupada?"#f85149":T.blue,textTransform:"uppercase",letterSpacing:.5}}>{ocupada?"Ocupada":"Libre"}</div>
                {ocupada&&pend>0&&<div style={{fontSize:13,color:"#fbbf24",fontWeight:700,marginTop:2}}>⏳ {COP(pend)}</div>}
                {ocupada&&cobradoSinRecibir>0&&<div style={{fontSize:9,color:"#86efac",marginTop:1}}>💰 {COP(cobradoSinRecibir)}</div>}
                {ocupada&&pend===0&&cobradoSinRecibir===0&&yaRecibido&&<div style={{fontSize:9,color:T.blue,fontWeight:700,marginTop:2}}>✅ Caja recibió</div>}
                {ocupada&&pend===0&&cobradoSinRecibir===0&&!yaRecibido&&<div style={{fontSize:9,color:T.blue,marginTop:2}}>✅ Al día</div>}
              </div>
            );
          })}
          <div onClick={()=>{setMesaActual("rapida");setRapidaPedido([]);setVista("pos");}}
            style={{borderRadius:14,padding:"16px 10px",textAlign:"center",cursor:"pointer",border:"2px dashed #6366f1",background:"linear-gradient(135deg,#0a1220,#080c14)"}}>
            <div style={{fontSize:19,fontWeight:900,color:"#fcd34d"}}>⚡</div>
            <div style={{fontSize:9,fontWeight:700,color:"#fcd34d",textTransform:"uppercase",letterSpacing:.5}}>Rápida</div>
          </div>
        </div>
      </div>}

      {/* VISTA POS */}
      {vista==="pos"&&m&&<div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}}>
        <div style={{background:T.topbar,padding:"10px 14px",display:"flex",alignItems:"center",gap:10,borderBottom:B1,flexShrink:0,flexWrap:"wrap"}}>
          <span style={{background:T.btnGrad,color:"#fff",borderRadius:8,padding:"5px 13px",fontSize:13,fontWeight:800}}>
            {mesaActual==="rapida"?"⚡ Rápida":`Mesa ${m.num}`}
          </span>
          {mesaActual!=="rapida"&&totalPendiente>0&&<span style={{background:"#2d1a00",color:"#fbbf24",borderRadius:7,padding:"4px 10px",fontSize:13,fontWeight:700}}>⏳ {COP(totalPendiente)}</span>}
          {mesaActual!=="rapida"&&totalCobrado>0&&<span style={{background:"#1a2d00",color:"#86efac",borderRadius:7,padding:"4px 10px",fontSize:13,fontWeight:700}}>💰 {COP(totalCobrado)}</span>}
          {mesaActual!=="rapida"&&<span style={{marginLeft:"auto",fontSize:13,fontWeight:700,color:"#fff"}}>Total: <b style={{color:T.topbarAccent}}>{COP(totalPendiente+totalCobrado+totalActual)}</b></span>}
        </div>

        {/* Tabs */}
        {mesaActual!=="rapida"&&<div style={{display:"flex",background:T.inp,borderBottom:B1,flexShrink:0}}>
          {[["nuevo","🛒 Nuevo"],["cuenta","🧾 Cuenta"]].map(([k,l])=>(
            <button key={k} onClick={()=>setTabPos(k)} style={{flex:1,padding:"10px",fontSize:13,fontWeight:700,cursor:"pointer",border:"none",background:"transparent",color:tabPos===k?T.accent:T.muted,borderBottom:tabPos===k?BA1:"2px solid transparent"}}>
              {l}{k==="cuenta"&&totalPendiente>0&&<span style={{background:"#dc2626",color:"#fff",borderRadius:"50%",width:16,height:16,fontSize:9,fontWeight:800,display:"inline-flex",alignItems:"center",justifyContent:"center",marginLeft:4}}>{pedidosPendientes.length}</span>}
            </button>
          ))}
        </div>}

        {/* Tab Nuevo pedido — diseño mobile */}
        {(tabPos==="nuevo"||mesaActual==="rapida")&&(()=>{
          const cats=["Todas",...[...new Set(prods.map(p=>p.categoria).filter(Boolean))]];
          const filtrados=catM==="Todas"?prods:prods.filter(p=>p.categoria===catM);
          return(
          <div style={{flex:1,display:"flex",flexDirection:"column",overflow:"hidden"}}>

            {/* Píldoras de categoría — scroll horizontal */}
            <div style={{overflowX:"auto",WebkitOverflowScrolling:"touch",flexShrink:0,padding:"10px 14px",borderBottom:B1,scrollbarWidth:"none",msOverflowStyle:"none"}}>
              <div style={{display:"flex",gap:8,width:"max-content"}}>
                {cats.map(cat=>{
                  const activa=catM===cat;
                  return(
                    <button key={cat} onClick={()=>setCatM(cat)} style={{
                      padding:"8px 18px",borderRadius:22,border:"none",whiteSpace:"nowrap",
                      background:activa?T.accent:T.card,
                      color:activa?"#000":T.muted,
                      fontWeight:700,fontSize:13,cursor:"pointer",
                      boxShadow:activa?`0 3px 10px ${T.accent}55`:"none",
                      transition:"all .15s",flexShrink:0
                    }}>{cat}</button>
                  );
                })}
              </div>
            </div>

            {/* Grilla de productos — 2 columnas */}
            <div style={{flex:1,overflowY:"auto",padding:12}}>
              {prods.length===0&&<div style={{color:T.muted,textAlign:"center",padding:48,fontSize:14}}>⏳ Cargando productos...</div>}
              {prods.length>0&&filtrados.length===0&&<div style={{color:T.muted,textAlign:"center",padding:48,fontSize:14}}>Sin productos en esta categoría</div>}
              <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
                {filtrados.map(p=>{
                  const en=pedidoActual.find(i=>i.id===p.id);
                  const sinStock=(p.stock||0)<=0;
                  return(
                    <div key={p.id} style={{
                      background:T.card,
                      border:`2px solid ${en?T.accent:sinStock?T.border:T.border}`,
                      borderRadius:18,padding:"14px 10px 12px",
                      textAlign:"center",position:"relative",
                      opacity:sinStock?.5:1,
                      boxShadow:en?`0 0 16px ${T.accent}44`:"0 2px 8px rgba(0,0,0,.2)",
                      transition:"all .15s"
                    }}>
                      {sinStock&&<div style={{position:"absolute",top:7,left:7,background:"#dc2626",color:"#fff",borderRadius:6,fontSize:9,fontWeight:800,padding:"2px 6px",letterSpacing:.5}}>AGOTADO</div>}

                      {/* Imagen circular */}
                      <div style={{width:70,height:70,borderRadius:"50%",background:T.inp,margin:"0 auto 10px",display:"flex",alignItems:"center",justifyContent:"center",overflow:"hidden",border:`2px solid ${en?T.accent:T.border}`,transition:"border-color .15s"}}>
                        {p.imgUrl
                          ?<img src={p.imgUrl} alt={p.nombre} loading="lazy" style={{width:"100%",height:"100%",objectFit:"cover",filter:sinStock?"grayscale(1)":"none"}}/>
                          :<span style={{fontSize:34,lineHeight:1,filter:sinStock?"grayscale(1)":"none"}}>{p.emoji}</span>
                        }
                      </div>

                      {/* Nombre */}
                      <div style={{fontSize:13,fontWeight:700,color:sinStock?T.muted:T.text,lineHeight:1.3,marginBottom:5,
                        display:"-webkit-box",WebkitLineClamp:2,WebkitBoxOrient:"vertical",overflow:"hidden",minHeight:34}}>
                        {p.nombre}
                      </div>

                      {/* Precio */}
                      <div style={{fontSize:17,fontWeight:900,color:sinStock?T.muted:T.accent,marginBottom:10,letterSpacing:.3}}>
                        {sinStock?"—":COP(p.precio)}
                      </div>

                      {/* Controles */}
                      {!sinStock&&(en?(
                        <div style={{display:"flex",alignItems:"center",justifyContent:"center",gap:10}}>
                          <button onClick={()=>cambioQty(p.id,-1)} style={{background:T.inp,color:T.accent,border:`1.5px solid ${T.accent}`,borderRadius:"50%",width:30,height:30,fontSize:18,cursor:"pointer",fontWeight:900,display:"flex",alignItems:"center",justifyContent:"center"}}>−</button>
                          <span style={{fontWeight:900,fontSize:17,color:T.text,minWidth:22,textAlign:"center"}}>{en.qty}</span>
                          <button onClick={()=>cambioQty(p.id,1)} style={{background:T.accent,color:"#000",border:"none",borderRadius:"50%",width:30,height:30,fontSize:18,cursor:"pointer",fontWeight:900,display:"flex",alignItems:"center",justifyContent:"center"}}>+</button>
                        </div>
                      ):(
                        <button onClick={()=>addItem(p)} style={{width:"100%",background:T.btnGrad,color:"#fff",border:"none",borderRadius:22,padding:"9px 0",fontSize:13,fontWeight:800,cursor:"pointer",boxShadow:"0 3px 10px rgba(0,0,0,.3)"}}>
                          + Agregar
                        </button>
                      ))}
                    </div>
                  );
                })}
              </div>
            </div>

            {/* Carrito inferior */}
            <div style={{background:T.card,borderTop:`2px solid ${pedidoActual.length>0?T.accent:T.border}`,flexShrink:0,maxHeight:"40vh",display:"flex",flexDirection:"column",transition:"border-color .2s"}}>
              <div style={{padding:"10px 16px",display:"flex",justifyContent:"space-between",alignItems:"center",flexShrink:0}}>
                <span style={{fontSize:14,fontWeight:800,color:pedidoActual.length>0?T.accent:T.muted}}>
                  🛒 {pedidoActual.length===0?"Toca un producto para agregar":`${pedidoActual.length} producto${pedidoActual.length>1?"s":""}  ·  ${COP(totalActual)}`}
                </span>
                {mesaActual!=="rapida"&&m.estado==="ocupada"&&pedidoActual.length===0&&<button onClick={cerrarMesa} style={{background:"#2d0f0f",color:"#f85149",border:"1px solid #6b2020",borderRadius:7,padding:"5px 10px",fontSize:12,fontWeight:700,cursor:"pointer"}}>🚪 Cerrar mesa</button>}
              </div>

              {pedidoActual.length>0&&<>
                <div style={{overflowY:"auto",flex:1,padding:"0 14px"}}>
                  {pedidoActual.map(item=>(
                    <div key={item.id} style={{display:"flex",alignItems:"center",gap:10,padding:"7px 0",borderBottom:`1px solid ${T.border}`}}>
                      <span style={{fontSize:22,flexShrink:0}}>{item.emoji}</span>
                      <div style={{flex:1,minWidth:0}}>
                        <div style={{fontSize:13,fontWeight:700,color:T.text,overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"}}>{item.nombre}</div>
                        <div style={{fontSize:12,color:T.muted}}>{COP(item.precio)}</div>
                      </div>
                      <div style={{display:"flex",alignItems:"center",gap:6,flexShrink:0}}>
                        <button onClick={()=>cambioQty(item.id,-1)} style={{background:T.inp,color:T.accent,border:"none",borderRadius:"50%",width:26,height:26,fontSize:16,cursor:"pointer",fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center"}}>−</button>
                        <span style={{fontWeight:800,fontSize:15,color:T.text,minWidth:18,textAlign:"center"}}>{item.qty}</span>
                        <button onClick={()=>cambioQty(item.id,1)} style={{background:T.accent,color:"#000",border:"none",borderRadius:"50%",width:26,height:26,fontSize:16,cursor:"pointer",fontWeight:700,display:"flex",alignItems:"center",justifyContent:"center"}}>+</button>
                      </div>
                      <div style={{fontSize:14,fontWeight:800,color:T.accent,flexShrink:0,minWidth:58,textAlign:"right"}}>{COP((item.precio||0)*item.qty)}</div>
                    </div>
                  ))}
                </div>
                <div style={{padding:"10px 14px",flexShrink:0}}>
                  {(()=>{const proc=mesaActual==="rapida"?enviandoRapida:enviandoPedido;return(
                    <button onClick={mesaActual==="rapida"?enviarRapida:enviarPedido} disabled={proc}
                      style={{width:"100%",background:proc?"#065f46":T.btnGrad,color:proc?"#6ee7b7":"#fff",border:"none",borderRadius:14,padding:"14px",fontSize:16,fontWeight:800,cursor:proc?"not-allowed":"pointer",boxShadow:proc?"none":`0 4px 18px ${T.accent}44`,transition:"all .15s"}}>
                      {proc?"⏳ Enviando...":"✅ Enviar a barra — "+COP(totalActual)}
                    </button>
                  );})()}
                </div>
              </>}
            </div>
          </div>
          );
        })()}

        {/* Tab Cuenta */}
        {tabPos==="cuenta"&&mesaActual!=="rapida"&&<div style={{flex:1,overflowY:"auto",padding:14}}>
          {m.pedidos.length===0
            ?<div style={{color:T.muted,textAlign:"center",padding:24}}>Sin pedidos enviados</div>
            :<>
              {m.pedidos.map((ped,i)=>{
                const est=estadoInfo(ped.estado);
                const puedeCobrar=ped.estado==="despachado"||ped.estado==="pendiente";
                return(
                  <div key={ped.id||i} style={{background:T.card,border:`1px solid ${ped.estado==="pendiente"||ped.estado==="despachado"?T.border:T.greenBd}`,borderRadius:11,padding:14,marginBottom:10,opacity:ped.estado==="anulado"?.5:1}}>
                    <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:8}}>
                      <div style={{fontSize:16,color:T.muted,fontWeight:600}}>Pedido {i+1} · {ped.hora||""}</div>
                      <span style={{background:est.bg,color:est.color,borderRadius:5,padding:"3px 10px",fontSize:13,fontWeight:700}}>{est.label}</span>
                    </div>
                    <div style={{fontSize:16,color:T.text,marginBottom:10,lineHeight:1.8}}>
                      {(ped.items||[]).map((it,j)=>(
                        <div key={j} style={{display:"flex",justifyContent:"space-between",alignItems:"center"}}>
                          <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>
                    {/* Diferencia si cajero editó pedido después de que mesera cobró */}
                    {ped.diferencia!==null&&ped.diferencia!==undefined&&ped.diferencia!==0&&<div style={{background:ped.diferencia>0?"#2d0f0f":"#0a2a1a",border:`1px solid ${ped.diferencia>0?"#dc2626":"#16a34a"}`,borderRadius:9,padding:"10px 14px",marginBottom:8}}>
                      <div style={{fontWeight:800,fontSize:13,color:ped.diferencia>0?"#f85149":"#4ade80",marginBottom:4}}>
                        {ped.diferencia>0?"⚠️ El cajero modificó el pedido — debes cobrar más":"✅ El cajero modificó el pedido — debes devolver"}
                      </div>
                      <div style={{display:"flex",justifyContent:"space-between",fontSize:13,color:T.muted,marginBottom:2}}>
                        <span>Tú cobraste:</span><span style={{color:T.text,fontWeight:700}}>{COP(ped.montoCobrado||0)}</span>
                      </div>
                      <div style={{display:"flex",justifyContent:"space-between",fontSize:13,color:T.muted,marginBottom:6}}>
                        <span>Total despachado:</span><span style={{color:T.accent,fontWeight:700}}>{COP(ped.totalDespachado||ped.total)}</span>
                      </div>
                      <div style={{display:"flex",justifyContent:"space-between",fontSize:16,fontWeight:900,paddingTop:6,borderTop:`1px solid ${ped.diferencia>0?"#6b2020":"#166534"}`}}>
                        <span style={{color:ped.diferencia>0?"#f85149":"#4ade80"}}>{ped.diferencia>0?"💰 Cobrar al cliente:":"💵 Devolver al cliente:"}</span>
                        <span style={{color:ped.diferencia>0?"#f85149":"#4ade80"}}>{COP(Math.abs(ped.diferencia))}</span>
                      </div>
                      {ped.diferencia>0&&<button onClick={()=>abrirPago("diferencia",ped.id,Math.abs(ped.diferencia))}
                        style={{width:"100%",background:"linear-gradient(135deg,#dc2626,#b91c1c)",color:"#fff",border:"none",borderRadius:7,padding:"8px",fontSize:13,fontWeight:800,cursor:"pointer",marginTop:8}}>
                        💰 Cobrar diferencia {COP(Math.abs(ped.diferencia))}
                      </button>}
                    </div>}
                    <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",gap:8}}>
                      <span style={{fontWeight:800,fontSize:19,color:T.accent}}>{COP(ped.total)}</span>
                      <div style={{display:"flex",gap:6}}>
                        {ped.estado==="pendiente"&&<button onClick={()=>eliminarPedido(ped.id)}
                          style={{background:T.redBg,color:T.red,border:`1px solid ${T.redBd}`,borderRadius:7,padding:"9px 12px",fontSize:13,fontWeight:800,cursor:"pointer"}}>
                          🗑 Eliminar
                        </button>}
                        {puedeCobrar&&<button onClick={()=>abrirPago("pedido",ped.id)}
                          style={{background:T.btnGrad,color:"#fff",border:"none",borderRadius:7,padding:"9px 18px",fontSize:16,fontWeight:800,cursor:"pointer"}}>
                          💰 Pagar ahora
                        </button>}
                      </div>
                    </div>
                  </div>
                );
              })}

              {/* Resumen y botones */}
              <div style={{background:T.inp,border:B1,borderRadius:12,padding:14,marginTop:6}}>
                {totalPendiente>0&&<div style={{display:"flex",justifyContent:"space-between",fontSize:16,color:T.muted,marginBottom:6}}>
                  <span>⏳ Pendiente:</span><span style={{color:"#fbbf24",fontWeight:700}}>{COP(totalPendiente)}</span>
                </div>}
                {totalCobrado>0&&<div style={{display:"flex",justifyContent:"space-between",fontSize:16,color:T.muted,marginBottom:6}}>
                  <span>💰 Cobrado (en caja):</span><span style={{color:"#86efac",fontWeight:700}}>{COP(totalCobrado)}</span>
                </div>}

                {/* Pagar total — solo pedidos despachados */}
                {pedidosPendientes.filter(p=>p.estado==="despachado"||p.estado==="pendiente").length>0&&<button
                  onClick={()=>{const t=pedidosPendientes.filter(p=>p.estado==="despachado"||p.estado==="pendiente").reduce((a,p)=>a+p.total,0);setShowPago({tipo:"total",total:t});setMontoStr(String(t));setMetodoPagoM("Efectivo");}}
                  style={{width:"100%",background:T.btnGrad,color:"#fff",border:"none",borderRadius:9,padding:"13px",fontSize:16,fontWeight:800,cursor:"pointer",marginBottom:8}}>
                  💰 PAGAR TOTAL — {COP(pedidosPendientes.reduce((a,p)=>a+p.total,0))}
                </button>}

                <button onClick={cerrarMesa}
                  disabled={totalPendiente>0||(m.pedidos||[]).some(p=>p.estado==="cobrado")}
                  style={{width:"100%",background:totalPendiente>0||(m.pedidos||[]).some(p=>p.estado==="cobrado")?"#1a1a1a":"#0a2a1a",
                    color:totalPendiente>0||(m.pedidos||[]).some(p=>p.estado==="cobrado")?"#555":"#4ade80",
                    border:B1,borderRadius:8,padding:"10px",fontSize:13,fontWeight:700,
                    cursor:totalPendiente>0||(m.pedidos||[]).some(p=>p.estado==="cobrado")?"not-allowed":"pointer",opacity:totalPendiente>0||(m.pedidos||[]).some(p=>p.estado==="cobrado")?.4:1}}>
                  {totalPendiente>0?"🚫 Cobra pendientes primero"
                    :(m.pedidos||[]).some(p=>p.estado==="cobrado")?"🚫 Cajero pendiente de recibir"
                    :"🚪 Cerrar mesa"}
                </button>
              </div>
            </>}
        </div>}
      </div>}
      {showThemePicker&&<ThemePicker tema={tema} setTema={setTema} onClose={()=>setShowThemePicker(false)}/>}
    </div>
  );
}