// ─── ADMIN NEXUS ───
function AdminNexus({dm,tema,setTema,toggleDm,onSalir}){
  const C=tema||THEMES.facebook;
  const[tab,setTab]=useState("empresas");
  const[showThemePicker,setShowThemePicker]=useState(false);
  const[empresas,setEmpresas]=useState([]);
  const[usuarios,setUsuarios]=useState([]);
  const[loading,setLoading]=useState(true);
  const[colaAdmin,setColaAdmin]=useState(0);
  const[online,setOnline]=useState(()=>window.NexusOnline!==undefined?window.NexusOnline:navigator.onLine);
  const[toast2,setToast2]=useState(null);
  const[expandidas,setExpandidas]=useState({});

  // Modales
  const[cambioPasUser,setCambioPasUser]=useState(null);
  const[nuevaPass,setNuevaPass]=useState("");
  const[modalEditEmp,setModalEditEmp]=useState(null);
  const[editEmpForm,setEditEmpForm]=useState({});
  const[guardandoEmp,setGuardandoEmp]=useState(false);
  const[modalEditUsr,setModalEditUsr]=useState(null);
  const[editUsrForm,setEditUsrForm]=useState({});
  const[guardandoUsr,setGuardandoUsr]=useState(false);
  const[modalNuevoUsr,setModalNuevoUsr]=useState(null);
  const[nuevoUsrForm,setNuevoUsrForm]=useState({rol:"cajero",pass:""});
  const[creandoUsr,setCreandoUsr]=useState(null);
  const[newEmp,setNewEmp]=useState({nombre:"",tipo:"Discoteca",plan:"basico",notas:""});
  const[creds,setCreds]=useState(null);

  // Config editable
  const[appUrl,setAppUrl]=useState(()=>localStorage.getItem("nx_admin_appurl")||"vermillion-cobbler-36193c.netlify.app");
  const[editingUrl,setEditingUrl]=useState(false);
  const[appUrlDraft,setAppUrlDraft]=useState("");

  useEffect(()=>{document.body.style.background=C.bg;},[C.bg]);

  const t2=(msg,type="ok")=>{setToast2({msg,type});setTimeout(()=>setToast2(null),2800);};

  const TIPOS_NEG=["Discoteca","Bar","Restaurante","Ferretería","Tienda","Construcción","General"];
  const PLANES=["basico","profesional","enterprise"];
  const ROLES_LISTA=["propietario","cajero","mesero","mesera","bodeguero","supervisor","vendedor"];
  const ROLES_BASE={
    "Discoteca":   ["propietario","cajero","mesero","bodeguero"],
    "Bar":         ["propietario","cajero","mesero","bodeguero"],
    "Restaurante": ["propietario","cajero","mesero","bodeguero"],
    "Ferretería":  ["propietario","cajero","bodeguero"],
    "Tienda":      ["propietario","cajero","bodeguero"],
    "Construcción":["propietario","cajero","bodeguero"],
    "General":     ["propietario","cajero"],
  };
  const ROL_LABELS={
    propietario:"👔 Propietario",cajero:"🍺 Cajero",
    mesero:"🌸 Mesero",mesera:"🌸 Mesera",
    vendedor:"🛒 Vendedor",supervisor:"📋 Supervisor",
    bodeguero:"📦 Bodeguero",
  };
  const PLANES_DEFAULT={basico:{nombre:"Básico",precio:0},profesional:{nombre:"Profesional",precio:49000},enterprise:{nombre:"Enterprise",precio:99000}};
  const EXTRA_DEFAULT=15000;
  const[planesConfig,setPlanesConfig]=useState(()=>{try{const s=localStorage.getItem("nx_planes_config");return s?JSON.parse(s):PLANES_DEFAULT;}catch{return PLANES_DEFAULT;}});
  const[extraPrecio,setExtraPrecio]=useState(()=>{try{const s=localStorage.getItem("nx_extra_precio");return parseInt(s)||EXTRA_DEFAULT;}catch{return EXTRA_DEFAULT;}});
  const[editandoPlanes,setEditandoPlanes]=useState(false);
  const[planesDraft,setPlanesDraft]=useState({});
  const[extraDraft,setExtraDraft]=useState("");

  // ── Estilos dinámicos del tema ──
  const F="'Inter',system-ui,sans-serif";
  const inp2={width:"100%",background:C.inp,border:"1px solid "+C.border,borderRadius:7,color:C.text,padding:"11px 14px",fontSize:16,outline:"none",fontFamily:F,fontWeight:400};
  const inp2Sm={...inp2,padding:"8px 12px",fontSize:16};
  const thS2={padding:"10px 12px",textAlign:"left",fontSize:13,textTransform:"uppercase",letterSpacing:.6,color:C.muted,fontWeight:600,background:C.bg,borderBottom:"1px solid "+C.border,fontFamily:F};
  const tdS2={padding:"10px 12px",borderBottom:"1px solid "+C.border,color:C.text,verticalAlign:"middle",fontSize:16,fontFamily:F,fontWeight:400};
  const btnPrim={background:C.btnGrad,color:"#000",border:"none",borderRadius:7,padding:"11px 18px",fontWeight:500,cursor:"pointer",fontSize:16,fontFamily:F};
  const btnSec={background:C.btn2||C.gray,color:C.muted,border:"1px solid "+C.border,borderRadius:7,padding:"11px 14px",fontWeight:500,cursor:"pointer",fontSize:16,fontFamily:F};
  const btnDanger={background:C.redBg,color:C.red,border:"1px solid "+C.redBd,borderRadius:7,padding:"11px 14px",fontWeight:500,cursor:"pointer",fontSize:16,fontFamily:F};

  const cargar=async()=>{
    setLoading(true);
    try{
      const[emps,usrs]=await Promise.all([NexusFirebase.getEmpresas(),NexusFirebase.getUsuarios()]);
      setEmpresas(emps);setUsuarios(usrs);
    }catch(e){t2("Error al cargar datos","err");}
    setLoading(false);
  };
  useEffect(()=>{cargar();},[]);

  // ── Empresa ──
  const guardarEmpresa=async()=>{
    setGuardandoEmp(true);
    try{
      const{id,...datos}=editEmpForm;
      await NexusFirebase.updateEmpresa(id,datos);
      t2("✅ Empresa actualizada");setModalEditEmp(null);cargar();
    }catch(e){t2("Error al guardar","err");}
    setGuardandoEmp(false);
  };
  const toggleEmpresa=async(id,activo)=>{
    if(!confirm(activo?"¿Activar empresa?":"⚠️ ¿Suspender empresa? Todos sus usuarios perderán acceso."))return;
    try{
      await NexusFirebase.updateEmpresa(id,{activo});
      t2(activo?"Activada ✅":"Suspendida 🔒",activo?"ok":"err");cargar();
    }catch(e){t2("Error","err");}
  };
  const eliminarEmpresa=async(id,nombre)=>{
    if(!confirm(`⚠️ ¿ELIMINAR "${nombre}" permanentemente?\n\nSe borrarán la empresa y todos sus usuarios. Esta acción NO se puede deshacer.`))return;
    try{
      const usrsEmp=usuarios.filter(u=>u.empresaId===id);
      await Promise.all(usrsEmp.map(u=>FB_DB.collection('usuarios').doc(u.id).delete()));
      await FB_DB.collection('empresas').doc(id).delete();
      t2(`🗑️ ${nombre} eliminada`,"err");cargar();
    }catch(e){t2("Error al eliminar","err");}
  };
  const crearEmpresa=async()=>{
    if(!newEmp.nombre.trim()){t2("El nombre es obligatorio","err");return;}
    try{
      const empresaId=await NexusFirebase.crearEmpresa({...newEmp,activo:true});
      const rolesBase=ROLES_BASE[newEmp.tipo]||["propietario","cajero"];
      const slug=newEmp.nombre.toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"").replace(/[^a-z0-9]/g,"").slice(0,10);
      const nuevasCreds=[];
      for(const rol of rolesBase){
        const usuario=`${slug}_${SUFIJO_ROL_MAP[rol]||rol}`;
        const pass=generarPassFacil(rol);
        await NexusFirebase.crearUsuario({usuario,pass,rol,empresaId,negocio:newEmp.nombre,activo:true});
        nuevasCreds.push({usuario,pass,rol});
      }
      setCreds(nuevasCreds);
      t2(`✅ ${newEmp.nombre} creada`);
      setNewEmp({nombre:"",tipo:"Discoteca",plan:"basico",notas:""});
      cargar();
    }catch(e){t2("Error al crear empresa","err");}
  };

  // ── Usuario ──
  const guardarUsuario=async()=>{
    setGuardandoUsr(true);
    try{
      const{id,...datos}=editUsrForm;
      await NexusFirebase.updateUsuario(id,datos);
      t2("✅ Usuario actualizado");setModalEditUsr(null);cargar();
    }catch(e){t2("Error al guardar","err");}
    setGuardandoUsr(false);
  };
  const toggleUser=async(id,activo)=>{
    try{
      await NexusFirebase.toggleUsuario(id,activo);
      t2(activo?"Usuario activado":"Suspendido",activo?"ok":"err");cargar();
    }catch(e){t2("Error","err");}
  };
  const cambiarPass=async()=>{
    if(!nuevaPass||nuevaPass.length<4){t2("Mínimo 4 caracteres","err");return;}
    try{
      const usr=usuarios.find(u=>u.usuario===cambioPasUser);
      if(!usr){t2("Usuario no encontrado","err");return;}
      await NexusFirebase.updateUsuario(usr.id,{pass:nuevaPass});
      t2(`✅ Contraseña de ${cambioPasUser} actualizada`);setCambioPasUser(null);setNuevaPass("");
    }catch(e){t2("Error al cambiar contraseña","err");}
  };
  const crearUsuario=async(empId)=>{
    if(!nuevoUsrForm.rol||!nuevoUsrForm.pass){t2("Rol y contraseña son obligatorios","err");return;}
    setCreandoUsr(empId);
    try{
      const emp=empresas.find(e=>e.id===empId);
      const slug=(emp?.nombre||"neg").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"").replace(/[^a-z0-9]/g,"").slice(0,10);
      const usuarioNom=`${slug}_${SUFIJO_ROL_MAP[nuevoUsrForm.rol]||nuevoUsrForm.rol}`;
      await NexusFirebase.crearUsuario({usuario:usuarioNom,pass:nuevoUsrForm.pass,rol:nuevoUsrForm.rol,empresaId:empId,negocio:emp?.nombre||"",activo:true,esExtra:true});
      t2(`✅ Usuario ${usuarioNom} creado`);setModalNuevoUsr(null);setNuevoUsrForm({rol:"cajero",pass:""});cargar();
    }catch(e){t2("Error al crear usuario","err");}
    setCreandoUsr(null);
  };
  const genPass=(ref="")=>{
    const partes=(ref||"").split("_");
    const sufijo=partes[partes.length-1]||"";
    setNuevaPass(generarPassFacil(sufijo)||"Nexus"+new Date().getFullYear());
  };
  const genPassNuevo=()=>{
    const sufijo=nuevoUsrForm.rol||"user";
    setNuevoUsrForm(p=>({...p,pass:generarPassFacil(sufijo)||"Nexus"+new Date().getFullYear()}));
  };

  const toggleExpand=(id)=>setExpandidas(prev=>({...prev,[id]:!prev[id]}));
  const calcFactura=(empId)=>{
    const usrs=usuarios.filter(u=>u.empresaId===empId);
    const emp=empresas.find(e=>e.id===empId);
    const base=planesConfig[emp?.plan]?.precio||0;
    const extras=usrs.filter(u=>u.esExtra).length;
    return{base,extras,extraCost:extras*extraPrecio,total:base+extras*extraPrecio,usrs};
  };
  const totalMensual=empresas.filter(e=>e.activo).reduce((a,e)=>a+calcFactura(e.id).total,0);

  // ── Render ──
  return(
    <>
      {toast2&&<div style={{position:"fixed",top:16,right:16,zIndex:999,background:toast2.type==="err"?C.red:"#16a34a",color:"#fff",padding:"10px 20px",borderRadius:9,fontWeight:700,fontSize:16,animation:"fadeIn .2s",boxShadow:"0 4px 20px rgba(0,0,0,.5)"}}>{toast2.msg}</div>}

      {/* HEADER */}
      <div style={{background:C.topbar,borderBottom:"2px solid "+C.border,padding:"12px 18px",display:"flex",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:10,position:"sticky",top:0,zIndex:50}}>
        <div style={{display:"flex",alignItems:"center",gap:10}}>
          <div style={{width:52,height:52,borderRadius:"50%",background:"#000",display:"flex",alignItems:"center",justifyContent:"center",boxShadow:"0 0 16px rgba(240,165,0,.5)",flexShrink:0}}><Logo size={38}/></div>
          <div>
            <div style={{fontWeight:900,fontSize:22,color:C.topbarAccent,letterSpacing:3,textShadow:"0 0 18px rgba(240,165,0,.4)"}}>NEXUS <span style={{fontWeight:500,color:C.topbarText,fontSize:14,letterSpacing:1}}>DIGITAL SOLUTIONS</span></div>
            <div style={{fontSize:13,color:C.topbarAccent,fontWeight:700,letterSpacing:1,opacity:.85}}>⚡ Panel Administrador</div>
          </div>
        </div>
        <div style={{display:"flex",alignItems:"center",gap:8}}>
          <span title={online?"En línea":"Sin conexión"} style={{display:"inline-flex",alignItems:"center",gap:4,fontSize:13,color:online?"#4ade80":"#f85149",fontWeight:700}}>
            <span style={{width:8,height:8,borderRadius:"50%",background:online?"#4ade80":"#f85149",display:"inline-block",flexShrink:0}}/>
            {colaAdmin>0&&<span onClick={procesarColaAdmin} title="Operaciones pendientes — clic para sincronizar" style={{background:"#f59e0b",color:"#000",borderRadius:"50%",minWidth:16,height:16,fontSize:9,fontWeight:900,display:"inline-flex",alignItems:"center",justifyContent:"center",cursor:"pointer",padding:"0 3px"}}>{colaAdmin}</span>}
          </span>
          <button onClick={cargar} disabled={loading} style={{background:C.accentBg,color:loading?C.muted:C.text,border:"1px solid "+C.border,borderRadius:7,padding:"6px 12px",cursor:loading?"not-allowed":"pointer",fontSize:13,fontWeight:700}}>{loading?"⏳":"🔄"} Recargar</button>
          <button onClick={()=>setShowThemePicker(true)} style={{background:C.accentBg,color:C.accent,border:"1px solid "+C.border,borderRadius:7,padding:"6px 10px",cursor:"pointer",fontSize:16}}>🎨</button>
          <button onClick={onSalir} style={{background:C.redBg,color:C.red,border:"1px solid "+C.redBd,borderRadius:7,padding:"7px 14px",cursor:"pointer",fontSize:13,fontWeight:700}}>🔒 Salir</button>
        </div>
      </div>
      {showThemePicker&&<ThemePicker tema={tema} setTema={setTema} onClose={()=>setShowThemePicker(false)}/>}

      <div style={{maxWidth:1100,margin:"0 auto",padding:"14px 14px 80px"}}>
        {/* STATS */}
        <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(130px,1fr))",gap:10,marginBottom:16}}>
          {[
            {l:"Empresas",v:empresas.length,c:C.accent,i:"🏪"},
            {l:"Activas",v:empresas.filter(e=>e.activo).length,c:C.green,i:"✅"},
            {l:"Suspendidas",v:empresas.filter(e=>!e.activo).length,c:C.red,i:"🔒"},
            {l:"Total usuarios",v:usuarios.length,c:C.accent,i:"👥"},
            {l:"Usuarios activos",v:usuarios.filter(u=>u.activo).length,c:C.green,i:"🟢"},
            {l:"Facturación mes",v:COP(totalMensual),c:C.blue,i:"💰"},
          ].map((s,i)=>(
            <div key={i} style={{background:C.card,border:"1px solid "+C.border,borderRadius:10,padding:"10px 14px",borderLeft:`3px solid ${s.c}`}}>
              <div style={{fontSize:13,color:C.muted,marginBottom:2}}>{s.i} {s.l}</div>
              <div style={{fontWeight:800,fontSize:19,color:s.c,whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis"}}>{s.v}</div>
            </div>
          ))}
        </div>

        {/* TABS */}
        <div style={{display:"flex",gap:2,borderBottom:"2px solid "+C.border,marginBottom:16,overflowX:"auto"}}>
          {[["empresas","🏪 Empresas"],["nueva","➕ Nueva empresa"],["facturacion","💰 Facturación"],["config","⚙️ Config"]].map(([k,l])=>(
            <button key={k} onClick={()=>setTab(k)} style={{padding:"8px 16px",fontSize:13,fontWeight:600,cursor:"pointer",border:"none",background:tab===k?C.card:"transparent",color:tab===k?C.accent:C.muted,borderRadius:"8px 8px 0 0",whiteSpace:"nowrap",borderBottom:tab===k?`2px solid ${C.accent}`:"2px solid transparent",marginBottom:-2}}>{l}</button>
          ))}
        </div>

        {/* ══ EMPRESAS ══ */}
        {tab==="empresas"&&<div>
          {loading
            ?<div style={{color:C.muted,textAlign:"center",padding:48}}>⏳ Cargando...</div>
            :empresas.length===0
              ?<div style={{color:C.muted,textAlign:"center",padding:48}}>Sin empresas registradas</div>
              :<div style={{display:"grid",gap:12}}>
                {empresas.map(e=>{
                  const usrsEmp=usuarios.filter(u=>u.empresaId===e.id);
                  const fact=calcFactura(e.id);
                  const abierta=expandidas[e.id];
                  return(
                    <div key={e.id} style={{background:C.card,border:`1px solid ${e.activo?C.border:C.redBd}`,borderRadius:14,overflow:"hidden",opacity:e.activo?1:.75}}>
                      {/* Cabecera */}
                      <div style={{padding:"14px 18px",display:"flex",alignItems:"center",justifyContent:"space-between",flexWrap:"wrap",gap:10}}>
                        <div style={{display:"flex",alignItems:"center",gap:12,cursor:"pointer",flex:1}} onClick={()=>toggleExpand(e.id)}>
                          <div style={{fontSize:26}}>{e.tipo==="Discoteca"?"🎶":e.tipo==="Bar"?"🍺":e.tipo==="Restaurante"?"🍽️":e.tipo==="Ferretería"?"🔧":e.tipo==="Tienda"?"🛒":"🏢"}</div>
                          <div>
                            <div style={{fontWeight:800,fontSize:16,color:C.text}}>{e.nombre}</div>
                            <div style={{fontSize:13,color:C.accent,fontWeight:700,textTransform:"uppercase",letterSpacing:.7}}>{e.tipo} · Plan <span style={{color:C.blue}}>{e.plan}</span></div>
                            {e.notas&&<div style={{fontSize:13,color:C.muted,marginTop:1}}>{e.notas}</div>}
                          </div>
                        </div>
                        <div style={{display:"flex",alignItems:"center",gap:6,flexWrap:"wrap"}}>
                          <span style={{background:C.accentBg,color:C.blue,border:"1px solid "+C.border,borderRadius:6,padding:"3px 10px",fontSize:13,fontWeight:700}}>👥 {usrsEmp.length}</span>
                          {fact.extras>0&&<span style={{background:C.accentBg,color:C.accent,border:"1px solid "+C.border,borderRadius:6,padding:"3px 10px",fontSize:13,fontWeight:700}}>+{fact.extras} extra</span>}
                          <span style={{background:C.greenBg,color:C.green,border:"1px solid "+C.greenBd,borderRadius:6,padding:"3px 10px",fontSize:13,fontWeight:700}}>{COP(fact.total)}/mes</span>
                          <span style={{background:e.activo?C.greenBg:C.redBg,color:e.activo?C.green:C.red,border:`1px solid ${e.activo?C.greenBd:C.redBd}`,borderRadius:6,padding:"3px 10px",fontSize:13,fontWeight:700}}>{e.activo?"● Activa":"● Suspendida"}</span>
                          <button onClick={()=>{setEditEmpForm({...e});setModalEditEmp(e);}} style={{background:C.accentBg,color:C.accent,border:"1px solid "+C.border,borderRadius:6,padding:"4px 10px",fontSize:13,fontWeight:700,cursor:"pointer"}}>✏️ Editar</button>
                          <span style={{color:C.muted,fontSize:16,cursor:"pointer"}} onClick={()=>toggleExpand(e.id)}>{abierta?"▲":"▼"}</span>
                        </div>
                      </div>

                      {/* Expandido */}
                      {abierta&&<div style={{borderTop:"1px solid "+C.border}}>
                        <div style={{padding:"8px 18px",background:C.bg,display:"flex",gap:8,flexWrap:"wrap",alignItems:"center",borderBottom:"1px solid "+C.border}}>
                          <button onClick={()=>{setModalNuevoUsr(e.id);setNuevoUsrForm({rol:"cajero",pass:""});}} style={{background:C.greenBg,color:C.green,border:"1px solid "+C.greenBd,borderRadius:6,padding:"5px 12px",fontSize:13,fontWeight:700,cursor:"pointer"}}>➕ Agregar usuario</button>
                          <button onClick={()=>toggleEmpresa(e.id,!e.activo)} style={{background:e.activo?C.redBg:C.greenBg,color:e.activo?C.red:C.green,border:`1px solid ${e.activo?C.redBd:C.greenBd}`,borderRadius:6,padding:"5px 12px",fontSize:13,fontWeight:700,cursor:"pointer"}}>{e.activo?"🔒 Suspender empresa":"✅ Activar empresa"}</button>
                          <button onClick={()=>eliminarEmpresa(e.id,e.nombre)} style={{background:C.redBg,color:C.red,border:"1px solid "+C.redBd,borderRadius:6,padding:"5px 12px",fontSize:13,fontWeight:700,cursor:"pointer"}}>🗑️ Eliminar empresa</button>
                        </div>
                        {usrsEmp.length===0
                          ?<div style={{padding:"16px 18px",color:C.muted,fontSize:13}}>Sin usuarios — usa ➕ Agregar usuario</div>
                          :<div style={{overflowX:"auto"}}>
                            <table style={{width:"100%",borderCollapse:"collapse"}}>
                              <thead><tr>{["Usuario","Rol","Tipo","Estado","Acciones"].map((h,i)=><th key={i} style={thS2}>{h}</th>)}</tr></thead>
                              <tbody>
                                {usrsEmp.map((u,i)=>(
                                  <tr key={u.id} style={{background:i%2===0?C.card:C.bg}}>
                                    <td style={{...tdS2,fontFamily:"monospace",fontWeight:700,color:C.text}}>{u.usuario}</td>
                                    <td style={tdS2}><span style={{background:C.accentBg,color:C.accent,border:"1px solid "+C.border,borderRadius:5,padding:"2px 8px",fontSize:13,fontWeight:700}}>{ROL_LABELS[u.rol]||u.rol}</span></td>
                                    <td style={tdS2}>{u.esExtra?<span style={{background:C.accentBg,color:C.accent,border:"1px solid "+C.border,borderRadius:5,padding:"2px 8px",fontSize:13,fontWeight:700}}>💰 Extra</span>:<span style={{background:C.greenBg,color:C.green,border:"1px solid "+C.greenBd,borderRadius:5,padding:"2px 8px",fontSize:13,fontWeight:700}}>Base</span>}</td>
                                    <td style={tdS2}><span style={{background:u.activo?C.greenBg:C.redBg,color:u.activo?C.green:C.red,borderRadius:5,padding:"2px 8px",fontSize:13,fontWeight:700}}>{u.activo?"🟢 Activo":"🔴 Suspendido"}</span></td>
                                    <td style={tdS2}>
                                      <div style={{display:"flex",gap:5,flexWrap:"wrap"}}>
                                        <button onClick={()=>{setEditUsrForm({...u});setModalEditUsr(u);}} style={{background:C.accentBg,color:C.blue,border:"1px solid "+C.border,borderRadius:5,padding:"4px 10px",fontSize:13,fontWeight:700,cursor:"pointer"}}>✏️ Editar</button>
                                        <button onClick={()=>{setCambioPasUser(u.usuario);setNuevaPass("");}} style={{background:C.accentBg,color:C.accent,border:"1px solid "+C.border,borderRadius:5,padding:"4px 10px",fontSize:13,fontWeight:700,cursor:"pointer"}}>🔑 Pass</button>
                                        <button onClick={()=>toggleUser(u.id,!u.activo)} style={{background:u.activo?C.redBg:C.greenBg,color:u.activo?C.red:C.green,border:`1px solid ${u.activo?C.redBd:C.greenBd}`,borderRadius:5,padding:"4px 10px",fontSize:13,fontWeight:700,cursor:"pointer"}}>{u.activo?"Suspender":"Activar"}</button>
                                      </div>
                                    </td>
                                  </tr>
                                ))}
                              </tbody>
                            </table>
                          </div>}
                      </div>}
                    </div>
                  );
                })}
              </div>}
        </div>}

        {/* ══ NUEVA EMPRESA ══ */}
        {tab==="nueva"&&<div style={{maxWidth:560}}>
          <div style={{background:C.card,border:"1px solid "+C.border,borderRadius:12,padding:20}}>
            <div style={{fontWeight:700,fontSize:16,color:C.accent,marginBottom:14}}>➕ Crear nueva empresa</div>
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12,marginBottom:12}}>
              <div style={{gridColumn:"1/-1"}}>
                <label style={{fontSize:13,color:C.muted,textTransform:"uppercase",letterSpacing:.7,display:"block",marginBottom:4}}>Nombre del negocio</label>
                <input style={inp2} value={newEmp.nombre} onChange={e=>setNewEmp(p=>({...p,nombre:e.target.value}))} placeholder="Ej. Discotk La Rumba"/>
              </div>
              <div>
                <label style={{fontSize:13,color:C.muted,textTransform:"uppercase",letterSpacing:.7,display:"block",marginBottom:4}}>Tipo</label>
                <select style={{...inp2,cursor:"pointer"}} value={newEmp.tipo} onChange={e=>setNewEmp(p=>({...p,tipo:e.target.value}))}>
                  {TIPOS_NEG.map(t=><option key={t} style={{background:C.card}}>{t}</option>)}
                </select>
              </div>
              <div>
                <label style={{fontSize:13,color:C.muted,textTransform:"uppercase",letterSpacing:.7,display:"block",marginBottom:4}}>Plan</label>
                <select style={{...inp2,cursor:"pointer"}} value={newEmp.plan} onChange={e=>setNewEmp(p=>({...p,plan:e.target.value}))}>
                  {PLANES.map(p=><option key={p} style={{background:C.card}}>{p}</option>)}
                </select>
              </div>
              <div style={{gridColumn:"1/-1"}}>
                <label style={{fontSize:13,color:C.muted,textTransform:"uppercase",letterSpacing:.7,display:"block",marginBottom:4}}>Notas internas</label>
                <input style={inp2} value={newEmp.notas} onChange={e=>setNewEmp(p=>({...p,notas:e.target.value}))} placeholder="Referido por... WhatsApp: 310..."/>
              </div>
            </div>
            <div style={{background:C.bg,border:"1px solid "+C.border,borderRadius:8,padding:"10px 14px",marginBottom:14}}>
              <div style={{fontSize:13,color:C.accent,fontWeight:700,marginBottom:6}}>👥 Usuarios que se crearán automáticamente:</div>
              <div style={{display:"flex",gap:6,flexWrap:"wrap"}}>
                {(ROLES_BASE[newEmp.tipo]||["propietario","cajero"]).map(r=>(
                  <span key={r} style={{background:C.accentBg,color:C.accent,border:"1px solid "+C.border,borderRadius:5,padding:"2px 9px",fontSize:13,fontWeight:700}}>{ROL_LABELS[r]||r}</span>
                ))}
              </div>
            </div>
            {creds&&<div style={{background:C.bg,border:"1px solid "+C.accent,borderRadius:10,padding:16,marginBottom:14,animation:"fadeIn .3s"}}>
              <div style={{fontWeight:700,color:C.accent,fontSize:13,marginBottom:10}}>🔐 Credenciales — guárdalas AHORA</div>
              {creds.map((u,i)=>(
                <div key={i} style={{display:"flex",justifyContent:"space-between",alignItems:"center",padding:"8px 0",borderBottom:i<creds.length-1?"1px solid "+C.border:"none",gap:8,flexWrap:"wrap"}}>
                  <span style={{fontSize:13,color:C.muted,textTransform:"uppercase",minWidth:80}}>{ROL_LABELS[u.rol]||u.rol}</span>
                  <span style={{fontFamily:"monospace",fontWeight:700,color:C.text}}>{u.usuario}</span>
                  <span style={{fontFamily:"monospace",background:C.accentBg,color:C.accent,fontWeight:700,padding:"3px 12px",borderRadius:5}}>{u.pass}</span>
                </div>
              ))}
              <div style={{fontSize:13,color:C.red,marginTop:10,padding:"8px",background:C.redBg,borderRadius:6}}>⚠️ Estas contraseñas NO se mostrarán de nuevo.</div>
            </div>}
            <button onClick={crearEmpresa} style={{...btnPrim,width:"100%",padding:12,fontSize:16}}>✅ Crear empresa y generar usuarios</button>
          </div>
        </div>}

        {/* ══ FACTURACIÓN ══ */}
        {tab==="facturacion"&&<div>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:14,flexWrap:"wrap",gap:8}}>
            <div style={{fontWeight:800,fontSize:16,color:C.text}}>💰 Facturación mensual</div>
            <div style={{background:C.greenBg,border:"1px solid "+C.greenBd,borderRadius:9,padding:"8px 18px",textAlign:"center"}}>
              <div style={{fontSize:13,color:C.green}}>TOTAL A FACTURAR</div>
              <div style={{fontWeight:900,fontSize:22,color:C.green}}>{COP(totalMensual)}</div>
            </div>
          </div>
          <div style={{display:"grid",gap:10}}>
            {empresas.map(e=>{
              const fact=calcFactura(e.id);
              return(
                <div key={e.id} style={{background:C.card,border:`1px solid ${e.activo?C.border:C.redBd}`,borderRadius:12,padding:"14px 18px",display:"flex",justifyContent:"space-between",alignItems:"center",flexWrap:"wrap",gap:12,opacity:e.activo?1:.5}}>
                  <div>
                    <div style={{fontWeight:700,fontSize:16,color:C.text}}>{e.nombre}</div>
                    <div style={{fontSize:13,color:C.accent,marginTop:2}}>{e.tipo} · Plan <b style={{color:C.blue}}>{e.plan}</b></div>
                  </div>
                  <div style={{display:"flex",gap:8,flexWrap:"wrap",alignItems:"center"}}>
                    <div style={{background:C.bg,border:"1px solid "+C.border,borderRadius:8,padding:"6px 12px",textAlign:"center",minWidth:90}}>
                      <div style={{fontSize:9,color:C.muted}}>PLAN BASE</div>
                      <div style={{fontWeight:700,color:C.accent}}>{COP(fact.base)}</div>
                    </div>
                    {fact.extras>0&&<div style={{background:C.accentBg,border:"1px solid "+C.border,borderRadius:8,padding:"6px 12px",textAlign:"center",minWidth:90}}>
                      <div style={{fontSize:9,color:C.accent}}>{fact.extras} EXTRA</div>
                      <div style={{fontWeight:700,color:C.accent}}>{COP(fact.extraCost)}</div>
                    </div>}
                    <div style={{background:e.activo?C.greenBg:C.redBg,border:`1px solid ${e.activo?C.greenBd:C.redBd}`,borderRadius:8,padding:"6px 16px",textAlign:"center",minWidth:100}}>
                      <div style={{fontSize:9,color:e.activo?C.green:C.red}}>{e.activo?"TOTAL MES":"SUSPENDIDA"}</div>
                      <div style={{fontWeight:900,fontSize:19,color:e.activo?C.green:C.red}}>{e.activo?COP(fact.total):"—"}</div>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
          <div style={{background:C.bg,border:"1px solid "+C.border,borderRadius:10,padding:14,marginTop:16}}>
            <div style={{fontSize:13,color:C.muted,marginBottom:8,fontWeight:700}}>📋 Precios de referencia</div>
            <div style={{display:"grid",gridTemplateColumns:"repeat(auto-fit,minmax(170px,1fr))",gap:8}}>
              {[
                {l:`Plan ${planesConfig.basico?.nombre||"Básico"}`,v:planesConfig.basico?.precio===0?"Gratis":COP(planesConfig.basico?.precio||0)+"/mes",c:C.green},
                {l:`Plan ${planesConfig.profesional?.nombre||"Profesional"}`,v:COP(planesConfig.profesional?.precio||0)+"/mes",c:C.accent},
                {l:`Plan ${planesConfig.enterprise?.nombre||"Enterprise"}`,v:COP(planesConfig.enterprise?.precio||0)+"/mes",c:C.blue},
                {l:"Usuario adicional",v:COP(extraPrecio)+"/mes",c:C.accent},
              ].map((p,i)=>(
                <div key={i} style={{background:C.card,border:"1px solid "+C.border,borderRadius:8,padding:"8px 12px"}}>
                  <div style={{fontSize:13,color:C.muted}}>{p.l}</div>
                  <div style={{fontWeight:700,color:p.c,fontSize:13,marginTop:2}}>{p.v}</div>
                </div>
              ))}
            </div>
          </div>
        </div>}

        {/* ══ CONFIG ══ */}
        {tab==="config"&&<div style={{maxWidth:720}}>
          <div style={{display:"grid",gap:14}}>
            {/* URL App */}
            <div style={{background:C.card,border:"1px solid "+C.border,borderRadius:12,padding:18}}>
              <div style={{fontWeight:700,color:C.accent,fontSize:16,marginBottom:14}}>🌐 URL de la aplicación</div>
              {editingUrl
                ?<div style={{display:"flex",gap:8}}>
                  <input value={appUrlDraft} onChange={e=>setAppUrlDraft(e.target.value)} style={{...inp2,flex:1}} placeholder="ej. mi-app.netlify.app"/>
                  <button onClick={()=>{setAppUrl(appUrlDraft);localStorage.setItem("nx_admin_appurl",appUrlDraft);setEditingUrl(false);t2("✅ URL actualizada");}} style={btnPrim}>Guardar</button>
                  <button onClick={()=>setEditingUrl(false)} style={btnSec}>Cancelar</button>
                </div>
                :<div style={{display:"flex",alignItems:"center",gap:12,flexWrap:"wrap"}}>
                  <code style={{background:C.bg,border:"1px solid "+C.border,borderRadius:6,padding:"8px 14px",color:C.blue,fontSize:13,flex:1,wordBreak:"break-all"}}>{appUrl}</code>
                  <button onClick={()=>{setAppUrlDraft(appUrl);setEditingUrl(true);}} style={{background:C.accentBg,color:C.accent,border:"1px solid "+C.border,borderRadius:7,padding:"7px 14px",fontSize:13,fontWeight:700,cursor:"pointer"}}>✏️ Editar</button>
                  <button onClick={()=>window.open("https://"+appUrl,"_blank")} style={{background:C.greenBg,color:C.green,border:"1px solid "+C.greenBd,borderRadius:7,padding:"7px 14px",fontSize:13,fontWeight:700,cursor:"pointer"}}>🔗 Abrir</button>
                </div>}
            </div>
            {/* Planes y precios */}
            <div style={{background:C.card,border:"1px solid "+C.border,borderRadius:12,padding:18}}>
              <div style={{display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:14}}>
                <div style={{fontWeight:700,color:C.accent,fontSize:16}}>💳 Planes y precios</div>
                {!editandoPlanes
                  ?<button onClick={()=>{setPlanesDraft(JSON.parse(JSON.stringify(planesConfig)));setExtraDraft(extraPrecio);setEditandoPlanes(true);}} style={{background:C.accentBg,color:C.accent,border:"1px solid "+C.border,borderRadius:7,padding:"6px 14px",fontSize:13,fontWeight:700,cursor:"pointer"}}>✏️ Editar precios</button>
                  :<div style={{display:"flex",gap:6}}>
                    <button onClick={()=>{
                      const parsed={};
                      Object.keys(planesDraft).forEach(k=>{parsed[k]={...planesDraft[k],precio:parseInt(String(planesDraft[k].precio).replace(/[^0-9]/g,""))||0};});
                      const ep=parseInt(String(extraDraft).replace(/[^0-9]/g,""))||0;
                      setPlanesConfig(parsed);setExtraPrecio(ep);
                      localStorage.setItem("nx_planes_config",JSON.stringify(parsed));
                      localStorage.setItem("nx_extra_precio",String(ep));
                      setEditandoPlanes(false);t2("✅ Precios guardados");
                    }} style={btnPrim}>✅ Guardar</button>
                    <button onClick={()=>setEditandoPlanes(false)} style={btnSec}>Cancelar</button>
                  </div>}
              </div>
              {!editandoPlanes
                ?<div style={{display:"grid",gap:8}}>
                  {Object.entries(planesConfig).map(([k,p])=>(
                    <div key={k} style={{display:"flex",justifyContent:"space-between",alignItems:"center",background:C.bg,borderRadius:8,padding:"10px 14px",border:"1px solid "+C.border}}>
                      <div>
                        <div style={{fontWeight:700,fontSize:13,color:C.text}}>{p.nombre}</div>
                        <div style={{fontSize:13,color:C.muted,textTransform:"uppercase",letterSpacing:.5,marginTop:1}}>plan {k}</div>
                      </div>
                      <div style={{fontWeight:900,fontSize:19,color:p.precio===0?C.green:C.accent}}>{p.precio===0?"Gratis":COP(p.precio)+"/mes"}</div>
                    </div>
                  ))}
                  <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",background:C.bg,borderRadius:8,padding:"10px 14px",border:"1px solid "+C.border}}>
                    <div>
                      <div style={{fontWeight:700,fontSize:13,color:C.text}}>Usuario adicional</div>
                      <div style={{fontSize:13,color:C.muted,textTransform:"uppercase",letterSpacing:.5,marginTop:1}}>por usuario extra</div>
                    </div>
                    <div style={{fontWeight:900,fontSize:19,color:C.accent}}>{COP(extraPrecio)}/mes</div>
                  </div>
                </div>
                :<div style={{display:"grid",gap:10}}>
                  {Object.entries(planesDraft).map(([k,p])=>(
                    <div key={k} style={{background:C.bg,border:"1px solid "+C.border,borderRadius:8,padding:"12px 14px"}}>
                      <div style={{fontSize:13,color:C.muted,textTransform:"uppercase",letterSpacing:.5,marginBottom:8}}>Plan {k}</div>
                      <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:10}}>
                        <div>
                          <label style={{fontSize:13,color:C.muted,display:"block",marginBottom:4}}>Nombre visible</label>
                          <input style={inp2} value={p.nombre} onChange={e=>setPlanesDraft(prev=>({...prev,[k]:{...prev[k],nombre:e.target.value}}))} placeholder="Ej. Básico"/>
                        </div>
                        <div>
                          <label style={{fontSize:13,color:C.muted,display:"block",marginBottom:4}}>Precio mensual ($)</label>
                          <input style={inp2} value={p.precio===0&&p.precio!==undefined?0:p.precio} onChange={e=>setPlanesDraft(prev=>({...prev,[k]:{...prev[k],precio:e.target.value}}))} placeholder="0" type="number" min="0"/>
                        </div>
                      </div>
                    </div>
                  ))}
                  <div style={{background:C.bg,border:"1px solid "+C.border,borderRadius:8,padding:"12px 14px"}}>
                    <div style={{fontSize:13,color:C.muted,textTransform:"uppercase",letterSpacing:.5,marginBottom:8}}>Usuario adicional</div>
                    <div>
                      <label style={{fontSize:13,color:C.muted,display:"block",marginBottom:4}}>Precio por usuario extra/mes ($)</label>
                      <input style={inp2} value={extraDraft} onChange={e=>setExtraDraft(e.target.value)} placeholder="15000" type="number" min="0"/>
                    </div>
                  </div>
                </div>}
            </div>
            {/* Firebase */}
            <div style={{background:C.card,border:"1px solid "+C.border,borderRadius:12,padding:18}}>
              <div style={{fontWeight:700,color:C.accent,fontSize:16,marginBottom:10}}>🔥 Base de datos</div>
              <code style={{background:C.bg,border:"1px solid "+C.border,borderRadius:6,padding:"8px 14px",color:C.blue,fontSize:13,display:"block",wordBreak:"break-all"}}>nexus-database-1cc8e · Firebase Firestore</code>
              <div style={{fontSize:13,color:C.green,marginTop:8}}>✅ Conectado — Tiempo real</div>
            </div>
            {/* Resumen */}
            <div style={{background:C.card,border:"1px solid "+C.border,borderRadius:12,padding:18}}>
              <div style={{fontWeight:700,color:C.accent,fontSize:16,marginBottom:12}}>📊 Resumen global</div>
              {[
                {l:"Empresas registradas",v:empresas.length,c:C.accent},
                {l:"Empresas activas",v:empresas.filter(e=>e.activo).length,c:C.green},
                {l:"Usuarios totales",v:usuarios.length,c:C.accent},
                {l:"Usuarios activos",v:usuarios.filter(u=>u.activo).length,c:C.green},
                {l:"Usuarios extra (cobro)",v:usuarios.filter(u=>u.esExtra).length,c:C.accent},
                {l:"Facturación mensual estimada",v:COP(totalMensual),c:C.blue},
              ].map((s,i,arr)=>(
                <div key={i} style={{display:"flex",justifyContent:"space-between",padding:"8px 0",borderBottom:i<arr.length-1?"1px solid "+C.border:"none"}}>
                  <span style={{fontSize:13,color:C.muted}}>{s.l}</span>
                  <span style={{fontWeight:800,color:s.c}}>{s.v}</span>
                </div>
              ))}
            </div>
          </div>
        </div>}
      </div>

      {/* ══ MODAL EDITAR EMPRESA ══ */}
      {modalEditEmp&&<div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.75)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:300,padding:16}}>
        <div style={{background:C.card,border:"2px solid "+C.accent,borderRadius:16,padding:24,maxWidth:500,width:"100%",maxHeight:"90vh",overflowY:"auto"}}>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:16}}>
            <div style={{fontWeight:800,fontSize:16,color:C.accent}}>✏️ Editar empresa</div>
            <button onClick={()=>setModalEditEmp(null)} style={{background:"none",border:"none",color:C.red,fontSize:20,cursor:"pointer"}}>✕</button>
          </div>
          <div style={{display:"grid",gap:12}}>
            {[{l:"Nombre",k:"nombre",ph:"Nombre del negocio"},{l:"Notas internas",k:"notas",ph:"Referido, contacto, obs..."}].map(f=>(
              <div key={f.k}>
                <label style={{fontSize:13,color:C.muted,textTransform:"uppercase",letterSpacing:.7,display:"block",marginBottom:4}}>{f.l}</label>
                <input style={inp2} value={editEmpForm[f.k]||""} onChange={e=>setEditEmpForm(p=>({...p,[f.k]:e.target.value}))} placeholder={f.ph}/>
              </div>
            ))}
            <div style={{display:"grid",gridTemplateColumns:"1fr 1fr",gap:12}}>
              <div>
                <label style={{fontSize:13,color:C.muted,textTransform:"uppercase",letterSpacing:.7,display:"block",marginBottom:4}}>Tipo de negocio</label>
                <select style={{...inp2,cursor:"pointer"}} value={editEmpForm.tipo||"Discoteca"} onChange={e=>setEditEmpForm(p=>({...p,tipo:e.target.value}))}>
                  {TIPOS_NEG.map(t=><option key={t} style={{background:C.card}}>{t}</option>)}
                </select>
              </div>
              <div>
                <label style={{fontSize:13,color:C.muted,textTransform:"uppercase",letterSpacing:.7,display:"block",marginBottom:4}}>Plan</label>
                <select style={{...inp2,cursor:"pointer"}} value={editEmpForm.plan||"basico"} onChange={e=>setEditEmpForm(p=>({...p,plan:e.target.value}))}>
                  {PLANES.map(p=><option key={p} style={{background:C.card}}>{p}</option>)}
                </select>
              </div>
            </div>
            <div style={{display:"flex",alignItems:"center",gap:10,background:C.bg,borderRadius:8,padding:"10px 14px"}}>
              <span style={{fontSize:13,color:C.muted,flex:1}}>Estado de la empresa</span>
              <button onClick={()=>setEditEmpForm(p=>({...p,activo:!p.activo}))} style={{background:editEmpForm.activo?C.greenBg:C.redBg,color:editEmpForm.activo?C.green:C.red,border:`1px solid ${editEmpForm.activo?C.greenBd:C.redBd}`,borderRadius:7,padding:"6px 14px",fontSize:13,fontWeight:700,cursor:"pointer"}}>{editEmpForm.activo?"● Activa — click para suspender":"● Suspendida — click para activar"}</button>
            </div>
          </div>
          <div style={{display:"flex",gap:8,marginTop:18}}>
            <button onClick={()=>setModalEditEmp(null)} style={btnSec}>Cancelar</button>
            <button onClick={guardarEmpresa} disabled={guardandoEmp} style={{...btnPrim,flex:1,opacity:guardandoEmp?.6:1}}>{guardandoEmp?"⏳ Guardando...":"✅ Guardar cambios"}</button>
          </div>
        </div>
      </div>}

      {/* ══ MODAL EDITAR USUARIO ══ */}
      {modalEditUsr&&<div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.75)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:300,padding:16}}>
        <div style={{background:C.card,border:"2px solid "+C.blue,borderRadius:16,padding:24,maxWidth:420,width:"100%"}}>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:16}}>
            <div style={{fontWeight:800,fontSize:16,color:C.blue}}>✏️ Editar usuario</div>
            <button onClick={()=>setModalEditUsr(null)} style={{background:"none",border:"none",color:C.red,fontSize:20,cursor:"pointer"}}>✕</button>
          </div>
          <div style={{display:"grid",gap:12}}>
            <div>
              <label style={{fontSize:13,color:C.muted,textTransform:"uppercase",letterSpacing:.7,display:"block",marginBottom:4}}>Nombre de usuario</label>
              <input style={{...inp2,fontFamily:"monospace"}} value={editUsrForm.usuario||""} onChange={e=>setEditUsrForm(p=>({...p,usuario:e.target.value.toLowerCase().replace(/\s/g,"")}))} placeholder="nombre_usuario"/>
            </div>
            <div>
              <label style={{fontSize:13,color:C.muted,textTransform:"uppercase",letterSpacing:.7,display:"block",marginBottom:4}}>Rol</label>
              <select style={{...inp2,cursor:"pointer"}} value={editUsrForm.rol||"cajero"} onChange={e=>setEditUsrForm(p=>({...p,rol:e.target.value}))}>
                {ROLES_LISTA.map(r=><option key={r} value={r} style={{background:C.card}}>{ROL_LABELS[r]||r}</option>)}
              </select>
            </div>
            <div style={{display:"flex",alignItems:"center",gap:10,background:C.bg,borderRadius:8,padding:"10px 14px"}}>
              <span style={{fontSize:13,color:C.muted,flex:1}}>Usuario extra (cobro adicional)</span>
              <button onClick={()=>setEditUsrForm(p=>({...p,esExtra:!p.esExtra}))} style={{background:editUsrForm.esExtra?C.accentBg:C.bg,color:editUsrForm.esExtra?C.accent:C.muted,border:`1px solid ${editUsrForm.esExtra?C.border:C.border}`,borderRadius:7,padding:"6px 14px",fontSize:13,fontWeight:700,cursor:"pointer"}}>{editUsrForm.esExtra?"💰 Extra — click para quitar":"Base — click para marcar extra"}</button>
            </div>
            <div style={{display:"flex",alignItems:"center",gap:10,background:C.bg,borderRadius:8,padding:"10px 14px"}}>
              <span style={{fontSize:13,color:C.muted,flex:1}}>Estado</span>
              <button onClick={()=>setEditUsrForm(p=>({...p,activo:!p.activo}))} style={{background:editUsrForm.activo?C.greenBg:C.redBg,color:editUsrForm.activo?C.green:C.red,border:`1px solid ${editUsrForm.activo?C.greenBd:C.redBd}`,borderRadius:7,padding:"6px 14px",fontSize:13,fontWeight:700,cursor:"pointer"}}>{editUsrForm.activo?"🟢 Activo":"🔴 Suspendido"}</button>
            </div>
          </div>
          <div style={{display:"flex",gap:8,marginTop:16}}>
            <button onClick={()=>setModalEditUsr(null)} style={btnSec}>Cancelar</button>
            <button onClick={guardarUsuario} disabled={guardandoUsr} style={{...btnPrim,flex:1,opacity:guardandoUsr?.6:1}}>{guardandoUsr?"⏳ Guardando...":"✅ Guardar"}</button>
          </div>
        </div>
      </div>}

      {/* ══ MODAL CAMBIO CONTRASEÑA ══ */}
      {cambioPasUser&&<div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.7)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:300,padding:16}}>
        <div style={{background:C.card,border:"1px solid "+C.accent,borderRadius:14,padding:24,maxWidth:360,width:"100%"}}>
          <div style={{fontWeight:700,fontSize:16,color:C.accent,marginBottom:4}}>🔑 Cambiar contraseña</div>
          <div style={{fontFamily:"monospace",fontSize:13,color:C.muted,marginBottom:14}}>{cambioPasUser}</div>
          <input type="text" value={nuevaPass} onChange={e=>setNuevaPass(e.target.value)} placeholder="Nueva contraseña (mín. 4 caracteres)" style={{...inp2,marginBottom:8}}/>
          <button onClick={()=>genPass(cambioPasUser)} style={{background:C.bg,color:C.accent,border:"1px solid "+C.accent,borderRadius:6,padding:"6px 12px",fontSize:13,cursor:"pointer",marginBottom:14,width:"100%"}}>🎲 Generar automáticamente</button>
          <div style={{display:"flex",gap:8}}>
            <button onClick={()=>setCambioPasUser(null)} style={btnSec}>Cancelar</button>
            <button onClick={cambiarPass} style={{...btnPrim,flex:2}}>✅ Confirmar</button>
          </div>
        </div>
      </div>}

      {/* ══ MODAL NUEVO USUARIO ══ */}
      {modalNuevoUsr&&<div style={{position:"fixed",inset:0,background:"rgba(0,0,0,.75)",display:"flex",alignItems:"center",justifyContent:"center",zIndex:300,padding:16}}>
        <div style={{background:C.card,border:"2px solid "+C.green,borderRadius:16,padding:24,maxWidth:400,width:"100%"}}>
          <div style={{display:"flex",justifyContent:"space-between",alignItems:"center",marginBottom:16}}>
            <div style={{fontWeight:800,fontSize:16,color:C.green}}>➕ Agregar usuario</div>
            <button onClick={()=>setModalNuevoUsr(null)} style={{background:"none",border:"none",color:C.red,fontSize:20,cursor:"pointer"}}>✕</button>
          </div>
          <div style={{fontSize:13,color:C.muted,marginBottom:14}}>Empresa: <b style={{color:C.text}}>{empresas.find(e=>e.id===modalNuevoUsr)?.nombre}</b></div>
          <div style={{display:"grid",gap:12}}>
            <div>
              <label style={{fontSize:13,color:C.muted,textTransform:"uppercase",letterSpacing:.7,display:"block",marginBottom:4}}>Rol</label>
              <select style={{...inp2,cursor:"pointer"}} value={nuevoUsrForm.rol} onChange={e=>setNuevoUsrForm(p=>({...p,rol:e.target.value}))}>
                {ROLES_LISTA.map(r=><option key={r} value={r} style={{background:C.card}}>{ROL_LABELS[r]||r}</option>)}
              </select>
            </div>
            <div>
              <label style={{fontSize:13,color:C.muted,textTransform:"uppercase",letterSpacing:.7,display:"block",marginBottom:4}}>Contraseña</label>
              <div style={{display:"flex",gap:6}}>
                <input type="text" value={nuevoUsrForm.pass} onChange={e=>setNuevoUsrForm(p=>({...p,pass:e.target.value}))} placeholder="Contraseña" style={{...inp2}}/>
                <button onClick={genPassNuevo} style={{background:C.bg,color:C.accent,border:"1px solid "+C.accent,borderRadius:6,padding:"0 12px",fontSize:16,cursor:"pointer",whiteSpace:"nowrap"}}>🎲</button>
              </div>
            </div>
          </div>
          <div style={{fontSize:13,color:C.muted,marginTop:10,background:C.bg,borderRadius:7,padding:"8px 12px"}}>
            Usuario generado: <code style={{color:C.blue}}>{(empresas.find(e=>e.id===modalNuevoUsr)?.nombre||"neg").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g,"").replace(/[^a-z0-9]/g,"").slice(0,10)}_{nuevoUsrForm.rol}</code>
          </div>
          <div style={{display:"flex",gap:8,marginTop:16}}>
            <button onClick={()=>setModalNuevoUsr(null)} style={btnSec}>Cancelar</button>
            <button onClick={()=>crearUsuario(modalNuevoUsr)} disabled={!!creandoUsr} style={{...btnPrim,flex:1,background:"linear-gradient(135deg,"+C.green+","+C.greenBd+")",opacity:creandoUsr?.6:1}}>{creandoUsr?"⏳ Creando...":"✅ Crear usuario"}</button>
          </div>
        </div>
      </div>}
    </>
  );
}