{kpis.map(([n,l,c,e],i)=>(

{n}{e}

{l}

))}

; } /* ============ SITIO & HERO — controla la página principal EN VIVO ============ */ function SiteModule(){ const db=useDB();const toast=useContext(ToastCtx);const c=db.config; const heroRef=useRef(); const [drag,setDrag]=useState(null); const secs=c.sections||[]; const modular=!!c.modular; const [ak,setAk]=useState('');const [al,setAl]=useState('128');const [at,setAt]=useState('435');const [asn,setAsn]=useState('2025'); const [live,setLive]=useState(()=>!!(window.OMDB&&OMDB.isLive&&OMDB.isLive())); const conectarAPI=async()=>{if(!ak.trim()){toast('Pegá tu API key de API-Football');return;}toast('Conectando con la API…');const ok=await OMDB.setAPI({key:ak.trim(),league:+al,season:+asn,team:+at});setLive(ok);toast(ok?'✔ Datos EN VIVO desde la API':'No se pudo conectar · sigue en DEMO');}; const onHero=e=>{const f=e.target.files&&e.target.files[0];if(!f)return;if(f.size>4.5e6){toast('Imagen muy grande (máx 4.5MB)');return;}const r=new FileReader();r.onload=()=>{OMDB.set('config.hero_img',r.result);toast('Imagen del hero actualizada en el sitio');};r.readAsDataURL(f);}; const move=(from,to)=>{if(from===to||to<0||to>=secs.length)return;OMDB.update(s=>{const a=s.config.sections;const [it]=a.splice(from,1);a.splice(to,0,it);});}; const toggleSec=i=>OMDB.update(s=>{s.config.sections[i].on=!s.config.sections[i].on;}); const toggleBlk=(i,j)=>OMDB.update(s=>{s.config.sections[i].blocks[j].on=!s.config.sections[i].blocks[j].on;}); const allOn=v=>OMDB.update(s=>{s.config.sections.forEach(x=>{x.on=v;(x.blocks||[]).forEach(b=>b.on=v);});}); return <> ABRIR SITIO ↗}/>

OMDB.set('config.hero_titulo',v)}/> OMDB.set('config.hero_subtitulo',v)}/>

OMDB.set('config.whatsapp',v)} mono/> OMDB.set('config.mp_link',v)} mono/>

IMAGEN DEL HERO {c.hero_img&&}

SIN IMAGEN · el hero usa el video de fondo

}

⬆ Arrastrá o clic para {c.hero_img?'cambiar':'subir'}

TEMA DEL SITIO

{[['dark','Oscuro'],['light','Claro']].map(([t,l])=>( ))}

{/* ===== PROMO / BANNER DEL ÁLBUM (Mi Cuenta) ===== */}

BANNER / PUBLICIDAD DEL ÁLBUM (MI CUENTA)

e.preventDefault()} onDrop={e=>{e.preventDefault();const f=e.dataTransfer.files&&e.dataTransfer.files[0];if(f&&f.size<=4.5e6){const r=new FileReader();r.onload=()=>{OMDB.set('config.album_promo.img',r.result);toast('Banner del álbum actualizado');};r.readAsDataURL(f);}else{const u=e.dataTransfer.getData('text/uri-list')||e.dataTransfer.getData('text/plain');if(u&&/^https?:/.test(u)){OMDB.set('config.album_promo.img',u);toast('Banner del álbum actualizado');}}}} onClick={()=>{const i=document.createElement('input');i.type='file';i.accept='image/*';i.onchange=e=>{const f=e.target.files[0];if(!f)return;if(f.size>4.5e6){toast('Máx 4.5MB');return;}const r=new FileReader();r.onload=()=>{OMDB.set('config.album_promo.img',r.result);toast('Banner del álbum actualizado');};r.readAsDataURL(f);};i.click();}} className="press cursor-pointer relative rounded-2xl overflow-hidden border-2 border-dashed border-white/12 hover:border-cyanx/60 transition-colors grid place-items-center" style={{aspectRatio:'16/9',background:'linear-gradient(160deg,#1a1a20,#0e0e12)'}}> {(c.album_promo&&c.album_promo.img)?

:⬆ Arrastrá imagen/animación o clic}

OMDB.set('config.album_promo.link',e.target.value)} placeholder="Link de destino (https://…)" className="bg-white/[.06] border border-white/10 rounded-xl px-3 py-2 text-[11px] font-mono outline-none focus:border-cyanx/60"/> OMDB.set('config.album_promo.titulo',e.target.value)} placeholder="Título / texto del espacio" className="bg-white/[.06] border border-white/10 rounded-xl px-3 py-2 text-[11px] outline-none focus:border-cyanx/60"/> {(c.album_promo&&c.album_promo.img)&&}

{/* modularización y constructor viven en sus propias tarjetas */} {/* ===== DATOS REALES · API-FOOTBALL ===== */}

{live?'● ON':'○ OFF'}}/>

LIGAsetAl(e.target.value)} className="w-full bg-white/[.06] border border-white/10 rounded-xl px-2 py-2 text-[11px] font-mono text-center outline-none focus:border-river/60"/> EQUIPOsetAt(e.target.value)} className="w-full bg-white/[.06] border border-white/10 rounded-xl px-2 py-2 text-[11px] font-mono text-center outline-none focus:border-river/60"/> TEMPORADAsetAsn(e.target.value)} className="w-full bg-white/[.06] border border-white/10 rounded-xl px-2 py-2 text-[11px] font-mono text-center outline-none focus:border-river/60"/>

Liga 128 = Liga Profesional Argentina · Equipo 435 = River Plate · sin key el indicador queda en OFF

{/* constructor movido a su propia tarjeta */}

; } /* ============ MODULARIZACIÓN (tarjeta separada) ============ */ function ModularModule(){ const db=useDB();const toast=useContext(ToastCtx);const modular=!!db.config.modular; return <>

{modular?'ON':'OFF'}ESTADO
ABRIR SITIO ↗
; } /* ============ CONSTRUCTOR DEL SITIO (3 tarjetas) ============ */ function ConstructorModule(){ const db=useDB();const toast=useContext(ToastCtx); const secs=db.config.sections||[];const modular=!!db.config.modular; const [drag,setDrag]=useState(null); const move=(from,to)=>{if(from===to||to<0||to>=secs.length)return;OMDB.update(s=>{const a=s.config.sections;const [it]=a.splice(from,1);a.splice(to,0,it);});}; const toggleSec=i=>OMDB.update(s=>{s.config.sections[i].on=!s.config.sections[i].on;}); const toggleBlk=(i,j)=>OMDB.update(s=>{s.config.sections[i].blocks[j].on=!s.config.sections[i].blocks[j].on;}); const allOn=v=>OMDB.update(s=>{s.config.sections.forEach(x=>{x.on=v;(x.blocks||[]).forEach(b=>b.on=v);});}); const per=Math.max(1,Math.ceil(secs.length/3)); const groups=[[0,secs.slice(0,per)],[per,secs.slice(per,per*2)],[per*2,secs.slice(per*2)]]; const row=(sc,i)=>(

setDrag(i)} onDragEnd={()=>setDrag(null)} onDragOver={e=>{e.preventDefault();if(drag!==null&&drag!==i){move(drag,i);setDrag(i);}}} className="flex items-center gap-2 px-2.5 py-2 cursor-grab active:cursor-grabbing"> {sc.label} {sc.blocks&&{sc.blocks.filter(b=>b.on).length}/{sc.blocks.length}}

{sc.on&&sc.blocks&&sc.blocks.length>0&&
{sc.blocks.map((b,j)=>(
↳ {b.label}
))}
}
); return <>

}/>
{groups.map(([base,g],gi)=>(
GRUPO {gi+1} {g.map((sc,k)=>row(sc,base+k))}
))}
; } function RevenueModule(){ const [pts,setPts]=useState(()=>Array.from({length:56},(_,i)=>48+Math.sin(i/5)*13)); const [val,setVal]=useState(24900); useEffect(()=>{let raf,last=performance.now(),acc=0; const tick=t=>{acc+=t-last;last=t; if(acc>110){acc=0; setPts(p=>{const nx=Math.max(12,Math.min(82,p[p.length-1]+(Math.random()-.48)*9));return[...p.slice(1),nx];}); setVal(v=>Math.max(18500,Math.min(41000,v+Math.round((Math.random()-.44)*180))));} raf=requestAnimationFrame(tick);}; raf=requestAnimationFrame(tick);return()=>cancelAnimationFrame(raf);},[]); const W=260,H=88,n=pts.length; const xy=i=>[(i/(n-1))*W,H-(pts[i]/94*H)]; const line=pts.map((_,i)=>xy(i).join(',')).join(' '); const [hx,hy]=xy(n-1); const up=pts[n-1]>=pts[n-2];const col=up?'#22c55e':'#ff3b45'; const users=(window.OMAuth&&typeof OMAuth.users==='function')?(OMAuth.users()||[]):[]; const PLAN=[['VIP','#8b5cf6'],['Oro','#ffcf3e'],['Plata','#c0c0cb'],['Bronce','#c97b3a'],['Gratuito','#5b93ff']]; const price={VIP:8490,ORO:4490,PLATA:2490,BRONCE:1290};const pp=x=>price[(x||'').toUpperCase()]||0; const dist=PLAN.map(([k,c])=>[k,c,users.filter(u=>(u.nivel||'').toUpperCase()===k.toUpperCase()).length]); let totU=dist.reduce((s,d)=>s+d[2],0);if(!totU){dist[0][2]=1;totU=1;} const R=26,CC=2*Math.PI*R;let off=0; const arcs=dist.filter(d=>d[2]>0).map(([k,c,v])=>{const dash=v/totU*CC;const seg={c,dash,off};off+=dash;return seg;}); const payers=users.filter(u=>u.nivel&&!/GRAT/i.test(u.nivel)); const fmt=x=>'$'+Math.round(x).toLocaleString('es-AR'); return <> {fmt(val)}/mes}/>
{up?'▲':'▼'} LIVE

{[[fmt(val),"MES ACTUAL","text-gold2"],["$1.22M","META ANUAL","text-ink"],["20,41%","PROGRESO","text-green-400"],[String(payers.length||users.length),"OPERACIONES","text-ink"]].map(([b,s,cc],i)=>(
{b}{s}
))}

{totU}SOCIOS

SOCIOS POR PLAN
{dist.map(([k,c,v])=>
{k}{v}
)}

USUARIOS QUE GENERARON EL PAGO
{payers.length?payers.map((u,i)=>(
{(u.nombre||'?')[0]} {u.nombre||u.email} {u.nivel} {fmt(pp(u.nivel))}
)):
Sin pagos registrados aún · aparecerán cuando un socio pague.
}

; } function WorldModule(){ const db=useDB();const toast=useContext(ToastCtx); const geo=db.visitas_geo||[]; const [hover,setHover]=useState(null); const dots=useMemo(()=>{ let seed=77;const rnd=()=>((seed=(seed*1103515245+12345)&0x7fffffff)/0x7fffffff); const zones=[[18,18,55,32,.5],[55,52,28,48,.6],[112,12,40,26,.5],[118,40,32,38,.55],[150,14,60,40,.5],[196,60,26,20,.45]]; const a=[];zones.forEach(z=>{for(let i=0;i{const t=setInterval(()=>{OMDB.update(s=>{if(!s.visitas_geo||!s.visitas_geo.length)return;const i=Math.floor(Math.random()*s.visitas_geo.length);s.visitas_geo[i].hoy++;s.visitas_geo[i].total++;s.kpis.visitas=(s.kpis.visitas||0)+1;s.kpis.visitas_hoy=(s.kpis.visitas_hoy||0)+1;});},6000);return()=>clearInterval(t);},[]); const max=Math.max(...geo.map(g=>g.total),1); const tabla=[...geo].sort((a,b)=>b.total-a.total); const totVis=db.kpis.visitas||0, hoyVis=db.kpis.visitas_hoy||0; return <> EN VIVO}/>

🌎 EN VIVO · pasá el cursor por cada punto

{totVis.toLocaleString('es-AR')}VISITAS TOTALES

{hoyVis.toLocaleString('es-AR')}HOY

UBICACIÓNHOYTOTAL
{tabla.map((g,i)=>
{g.lugar} {g.hoy} {g.total}
)} {tabla.every(g=>g.total===0)&&
Sin visitas aún · empezarán a entrar al publicar el sitio.
}

; } function ReferidosModule(){ const db=useDB();const toast=useContext(ToastCtx);const r=db.referidos; const list=[...r.lista].sort((a,b)=>b.ganancia-a.ganancia); const total=list.reduce((s,x)=>s+x.ganancia,0); const invit=list.reduce((s,x)=>s+x.invitados,0); const activos=list.reduce((s,x)=>s+x.activos,0); const max=Math.max(...list.map(x=>x.ganancia),1); const fmt=n=>'$'+n.toLocaleString('es-AR'); return <> {r.comision_pct}% C/SOCIO}/>
{[[fmt(total),'GANANCIA TOTAL','text-green-400'],[invit,'INVITADOS','text-ink'],[activos,'SOCIOS ACTIVOS','text-gold2']].map(([b,s,cc],i)=>(
{b}{s}
))}

{list.map((x,i)=>(
{i+1}

{x.nombre}{x.codigo}

{fmt(x.ganancia)} {x.invitados} inv · {x.activos} act

))}
; } function FiguritasModule(){ const toast=useContext(ToastCtx); const RZDEF=[["COMÚN","#9a9aa6","comun",false],["PLATA","#c0c0cb","plata",true],["ORO","#ffcf3e","oro",true],["LEYENDA","#ff2e3e","leyenda",true],["HOLOGRÁFICA","#8b5cf6","holografica",false],["ULTRA PREMIUM","#22d3ee","premium",false]]; const [rarezas,setRarezas]=useState(()=>{try{const v=JSON.parse(localStorage.getItem('om-figu-rarezas'));if(Array.isArray(v)&&v.length)return v;}catch(e){}return RZDEF.map(([name,color,slug,dark])=>({name,color,tex:'assets/rareza/'+slug+'.png',dark}));}); useEffect(()=>{try{localStorage.setItem('om-figu-rarezas',JSON.stringify(rarezas));}catch(e){}},[rarezas]); const CLUBS=[["River","assets/clubs/river.png"],["Boca","assets/clubs/boca.png"],["Racing","assets/clubs/racing.png"],["Independiente","assets/clubs/independiente.png"],["San Lorenzo","assets/clubs/sanlorenzo.png"],["Estudiantes","assets/clubs/estudiantes.png"],["Gimnasia","assets/clubs/gimnasia.png"],["Huracán","assets/clubs/huracan.png"],["Vélez","assets/clubs/velez.png"],["Tigre","assets/clubs/tigre.png"],["Newell's","assets/clubs/newells.png"],["Rosario Central","assets/clubs/rosario.png"],["Argentinos","assets/clubs/argentinos.png"],["Banfield","assets/clubs/banfield.png"],["Belgrano","assets/clubs/belgrano.png"],["Sarmiento","assets/clubs/sarmiento.png"],["Aldosivi","assets/clubs/aldosivi.png"],["Barracas","assets/clubs/barracas.png"],["Atl. Tucumán","assets/clubs/tucuman.png"],["Rivadavia","assets/clubs/rivadavia.png"],["Flamengo","assets/clubs/flamengo.png"],["Bragantino","assets/clubs/bragantino.png"],["Peñarol","assets/clubs/penarol.png"],["Millonarios","assets/clubs/millonarios.png"],["Santa Fe","assets/clubs/santafe.png"],["Blooming","assets/clubs/blooming.png"],["Caracas","assets/clubs/caracas.png"],["Carabobo","assets/clubs/carabobo.png"],["Ciudad Bolívar","assets/clubs/ciudadbolivar.png"],["Estudiantes RC","assets/clubs/estudiantesrc.png"],["Indep. Rivadavia","assets/clubs/indeprivadavia.png"]]; const FLAGS=[["Argentina","ar"],["Brasil","br"],["Uruguay","uy"],["Colombia","co"],["Chile","cl"],["Paraguay","py"],["Venezuela","ve"],["Perú","pe"]]; const flagUrl=(cc,w=80)=>`https://flagcdn.com/w${w}/${cc}.png`; const [rz,setRz]=useState(4); const [name,setName]=useState("Franco Armani"); const [num,setNum]=useState("23"); const [pos,setPos]=useState("ARQ"); const [club,setClub]=useState(0); const [flag,setFlag]=useState(0); const [photo,setPhoto]=useState(null); const fileRef=useRef();const addRef=useRef();const cardRef=useRef();const drag=useRef(null); const [flip,setFlip]=useState(false); const [debut,setDebut]=useState('1996'); const [edad,setEdad]=useState('38'); const onDropPhoto=e=>{e.preventDefault();e.stopPropagation();const f=e.dataTransfer.files&&e.dataTransfer.files[0];if(!f||!f.type.startsWith('image/')){return;}if(f.size>4.5e6){toast('Imagen muy grande (máx 4.5MB)');return;}const r=new FileReader();r.onload=()=>{setPhoto(r.result);toast('Foto del jugador cargada');};r.readAsDataURL(f);}; const [sel,setSel]=useState('foto'); const [layers,setLayers]=useState(()=>{try{const v=JSON.parse(localStorage.getItem('om-figu-layers'));if(Array.isArray(v)&&v.length)return v;}catch(e){}return [ {id:'foto', label:'Foto del jugador', tipo:'foto', x:50, y:60, w:84, on:true}, {id:'escudo',label:'Escudo del club', tipo:'escudo', x:15, y:11, w:20, on:true}, {id:'flag', label:'Bandera + año', tipo:'flag', x:85, y:10, w:22, on:true}, {id:'pitch', label:'Cancha / posición',tipo:'pitch', x:15, y:35, w:16, on:true}, ];}); useEffect(()=>{try{localStorage.setItem('om-figu-layers',JSON.stringify(layers.filter(l=>l.tipo!=='custom')));}catch(e){}},[layers]); const patch=(id,p)=>setLayers(ls=>ls.map(l=>l.id===id?{...l,...p}:l)); const zOf=t=>t==='foto'?10:t==='custom'?24:30; const startDrag=(e,id)=>{e.stopPropagation();setSel(id);const r=cardRef.current.getBoundingClientRect();const L=layers.find(l=>l.id===id);drag.current={id,sx:e.clientX,sy:e.clientY,ox:L.x,oy:L.y,rw:r.width,rh:r.height}; const mv=ev=>{const d=drag.current;if(!d)return;patch(d.id,{x:Math.max(2,Math.min(98,d.ox+(ev.clientX-d.sx)/d.rw*100)),y:Math.max(2,Math.min(98,d.oy+(ev.clientY-d.sy)/d.rh*100))});}; const up=()=>{drag.current=null;window.removeEventListener('pointermove',mv);window.removeEventListener('pointerup',up);}; window.addEventListener('pointermove',mv);window.addEventListener('pointerup',up);}; const addImage=e=>{const f=e.target.files&&e.target.files[0];if(!f)return;if(f.size>4.5e6){toast('Imagen muy grande (máx 4.5MB)');return;}const r=new FileReader();r.onload=()=>{const id='u'+Date.now();setLayers(ls=>[...ls,{id,label:'Imagen '+(ls.filter(l=>l.tipo==='custom').length+1),tipo:'custom',src:r.result,x:50,y:45,w:34,on:true}]);setSel(id);toast('Imagen agregada · arrastrala en la tarjeta');};r.readAsDataURL(f);e.target.value='';}; const removeLayer=id=>{setLayers(ls=>ls.filter(l=>l.id!==id));if(sel===id)setSel(null);}; const srcOf=l=>l.tipo==='foto'?photo:l.tipo==='escudo'?CLUBS[club][1]:l.tipo==='flag'?flagUrl(FLAGS[flag][1],160):l.src; const selLayer=layers.find(l=>l.id===sel); useEffect(()=>{ const h=e=>{ if(e.key!=='Delete'&&e.key!=='Backspace')return; const ae=document.activeElement;if(ae&&/INPUT|TEXTAREA|SELECT/.test(ae.tagName))return; if(sel==='foto'){setPhoto(null);toast('Foto eliminada');} else if(selLayer&&selLayer.tipo==='custom'){removeLayer(sel);toast('Capa eliminada');} }; window.addEventListener('keydown',h);return()=>window.removeEventListener('keydown',h); },[sel,selLayer]); const [year,setYear]=useState('2001');const [alt,setAlt]=useState('1,70');const [peso,setPeso]=useState('67'); const [nac,setNac]=useState('03-11-1979');const [sigla,setSigla]=useState('CARP'); const [enr,setEnr]=useState('EN RIVER PLATE: 1996 - 2000'); const [frontBg,setFrontBg]=useState(()=>{try{return localStorage.getItem('om-figu-frontbg')||null;}catch(e){return null;}});const [backBg,setBackBg]=useState(()=>{try{return localStorage.getItem('om-figu-backbg')||null;}catch(e){return null;}}); useEffect(()=>{try{frontBg?localStorage.setItem('om-figu-frontbg',frontBg):localStorage.removeItem('om-figu-frontbg');}catch(e){}},[frontBg]); useEffect(()=>{try{backBg?localStorage.setItem('om-figu-backbg',backBg):localStorage.removeItem('om-figu-backbg');}catch(e){}},[backBg]); const [nameFont,setNameFont]=useState('Oswald');const [nameSize,setNameSize]=useState(34);const [nameColor,setNameColor]=useState(''); const [precio,setPrecio]=useState(''); const [dorsoY,setDorsoY]=useState(6);const [dorsoSize,setDorsoSize]=useState(30);const [dorsoAlign,setDorsoAlign]=useState('center'); const rzFileRef=useRef(); const addRareza=e=>{const f=e.target.files&&e.target.files[0];if(!f)return;if(f.size>4.5e6){toast('Imagen muy grande (máx 4.5MB)');return;}const r=new FileReader();r.onload=()=>{setRarezas(rs=>{const nx=[...rs,{name:'RAREZA '+(rs.length+1),color:'#22d3ee',tex:r.result,dark:false,custom:true}];setRz(nx.length-1);return nx;});toast('Plantilla de rareza agregada');};r.readAsDataURL(f);e.target.value='';}; const removeRareza=i=>{setRarezas(rs=>{if(rs.length<=1)return rs;const nx=rs.filter((_,j)=>j!==i);return nx;});setRz(z=>Math.max(0,z>=i?z-1:z));toast('Plantilla quitada');}; const bgFRef=useRef();const bgBRef=useRef(); const POS=[['ARQ','Arquero',50,90],['LD','Lateral derecho',82,73],['DFC','Defensa central',50,79],['LI','Lateral izquierdo',18,73],['MCD','Volante de contención',50,61],['MC','Mediocampista central',50,48],['MCO','Enganche / mediapunta',50,35],['MD','Volante derecho',83,45],['MI','Volante izquierdo',17,45],['ED','Extremo derecho',83,20],['EI','Extremo izquierdo',17,20],['DC','Delantero centro',50,12],['SD','Segundo delantero',50,25]]; const [posIdx,setPosIdx]=useState(0); const posab=POS[posIdx][0];const posx=POS[posIdx][2];const posy=POS[posIdx][3]; const loadBg=(e,set,lbl)=>{const f=e.target.files&&e.target.files[0];if(!f)return;if(f.size>4.5e6){toast('Imagen muy grande (máx 4.5MB)');return;}const r=new FileReader();r.onload=()=>{set(r.result);toast(lbl+' cargado');};r.readAsDataURL(f);e.target.value='';}; const TEX=['comun','plata','oro','leyenda','holografica','premium']; const R=rarezas[rz]||rarezas[0]; const tex=R.tex; const frontTex=frontBg||tex;const backTex=backBg||tex; const dark=!!R.dark;const tcol=nameColor||(dark?'#2a1c08':'#f4f4f6');const tsh=dark?'0 1px 0 rgba(255,255,255,.35)':'0 2px 6px rgba(0,0,0,.8)'; const c=R.color; const onFile=e=>{const f=e.target.files&&e.target.files[0];if(!f)return;if(f.size>4.5e6){toast('Imagen muy grande (máx 4.5MB)');return;}const r=new FileReader();r.onload=()=>{setPhoto(r.result);toast('Imagen del jugador cargada');};r.readAsDataURL(f);}; const crear=()=>{ if(!name.trim()){toast('Poné un nombre');return;} const equipo=CLUBS[club][0].toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'').split(' ')[0]; OMDB.update(s=>{s.figuritas=[{clave:'c'+Date.now(),nombre:name.trim(),tier:R.name,categoria:R.name,equipo,clubNombre:CLUBS[club][0],img:photo,dorso:backBg||null,precio:parseInt(precio)||(s.gamif&&s.gamif.preciosRareza&&s.gamif.preciosRareza[R.name])||0,tenida:true,cant:1,num,pos,flag:FLAGS[flag][1],club:CLUBS[club][0]},...s.figuritas].slice(0,300);}); toast(`✔ ${name} · ${CLUBS[club][0]} · ${R.name} · $${(parseInt(precio)||0).toLocaleString('es-AR')} — publicada al pool`); }; const exportPNG=async()=>{ const W=520,H=728,cv=document.createElement('canvas');cv.width=W;cv.height=H;const x=cv.getContext('2d'); const rr=(a,b,w,h,r)=>{x.beginPath();x.moveTo(a+r,b);x.arcTo(a+w,b,a+w,b+h,r);x.arcTo(a+w,b+h,a,b+h,r);x.arcTo(a,b+h,a,b,r);x.arcTo(a,b,a+w,b,r);x.closePath();}; rr(0,0,W,H,40);x.clip(); const g=x.createLinearGradient(0,0,W,H);g.addColorStop(0,c+'55');g.addColorStop(.5,'#1a1226');g.addColorStop(1,'#0b0714');x.fillStyle=g;x.fillRect(0,0,W,H); const load=src=>new Promise(res=>{const im=new Image();im.crossOrigin='anonymous';im.onload=()=>res(im);im.onerror=()=>res(null);im.src=src;}); const bgim=await load(frontTex);if(bgim){const s=Math.max(W/bgim.width,H/bgim.height);const bw=bgim.width*s,bh=bgim.height*s;x.drawImage(bgim,(W-bw)/2,(H-bh)/2,bw,bh);} const drawImgLayer=async l=>{const cx=W*l.x/100,cy=H*l.y/100,w=W*l.w/100;const im=await load(srcOf(l));if(!im)return;const h=w*(im.height/im.width);x.drawImage(im,cx-w/2,cy-h/2,w,h);return{cx,cy,w,h};}; const drawPitch=l=>{const cx=W*l.x/100,cy=H*l.y/100,w=W*l.w/100,h=w*3/2;x.save();rr(cx-w/2,cy-h/2,w,h,8);x.clip();const pg=x.createLinearGradient(0,cy-h/2,0,cy+h/2);pg.addColorStop(0,'#2f7a2f');pg.addColorStop(1,'#1c4d1c');x.fillStyle=pg;x.fillRect(cx-w/2,cy-h/2,w,h);x.strokeStyle='rgba(255,255,255,.4)';x.lineWidth=1.2;x.beginPath();x.moveTo(cx-w/2,cy);x.lineTo(cx+w/2,cy);x.stroke();x.beginPath();x.arc(cx,cy,w*0.17,0,7);x.stroke(); const dx=cx-w/2+w*posx/100, dy=cy-h/2+h*posy/100;x.fillStyle='#ff2e3e';x.strokeStyle='#fff';x.lineWidth=2;x.beginPath();x.arc(dx,dy,w*0.1,0,7);x.fill();x.stroke(); x.restore();}; const vis=layers.filter(l=>l.on); for(const l of vis.filter(l=>zOf(l.tipo)<20)) await drawImgLayer(l); // dark gradient + iridiscente + streak (rareza / holográfico) const ov=x.createLinearGradient(0,H*0.45,0,H);ov.addColorStop(0,'rgba(0,0,0,0)');ov.addColorStop(1,'rgba(0,0,0,.95)');x.fillStyle=ov;x.fillRect(0,H*0.45,W,H*0.55); x.save();x.globalCompositeOperation='overlay';x.globalAlpha=.45;x.translate(W/2,H*0.42);x.rotate(-0.9);const cols=['#ff0078','#00c8ff','#78ff50','#ffdc00'];for(let i=-34;i<34;i++){x.fillStyle=cols[((i%4)+4)%4];x.fillRect(i*24,-H,12,H*2);}x.restore(); x.save();x.globalCompositeOperation='color-dodge';x.globalAlpha=.32;x.translate(W/2,H*0.42);x.rotate(-0.9);for(let i=-34;i<34;i++){x.fillStyle=(i%2?c:'#ffffff');x.fillRect(i*18,-H,7,H*2);}x.restore(); const hs=x.createLinearGradient(0,0,W,H);hs.addColorStop(.3,'rgba(255,255,255,0)');hs.addColorStop(.46,'rgba(255,255,255,.5)');hs.addColorStop(.5,c);hs.addColorStop(.54,'rgba(255,255,255,.4)');hs.addColorStop(.68,'rgba(255,255,255,0)');x.fillStyle=hs;x.fillRect(0,0,W,H); // chrome: capas superiores (escudo/flag/pitch/custom) for(const l of vis.filter(l=>zOf(l.tipo)>=20)){ if(l.tipo==='pitch'){drawPitch(l);continue;} const d=await drawImgLayer(l);if(!d)continue; if(l.tipo==='flag'){x.strokeStyle='rgba(255,255,255,.7)';x.lineWidth=2.5;rr(d.cx-d.w/2,d.cy-d.h/2,d.w,d.h,8);x.stroke();} if(l.tipo==='escudo'){x.fillStyle=tcol;x.textAlign='center';x.font='700 20px Oswald,sans-serif';x.fillText(sigla,d.cx,d.cy+d.h/2+20);} } x.fillStyle='rgba(255,255,255,.14)';x.font='900 130px Oswald, sans-serif';x.textAlign='right';x.fillText(num,W-30,158); x.textAlign='center';x.fillStyle='#fff';x.font='700 '+Math.round(nameSize*1.35)+'px '+nameFont+', sans-serif';x.fillText(name.toUpperCase().slice(0,16),W/2,H-92); x.fillStyle=c;x.font='700 22px "JetBrains Mono", monospace';x.fillText(R.name+' · #'+num,W/2,H-54); x.strokeStyle=c;x.lineWidth=8;rr(4,4,W-8,H-8,36);x.stroke(); const a=document.createElement('a');a.download=`figurita-${name.toLowerCase().replace(/\s+/g,'-')||'cromo'}.png`;a.href=cv.toDataURL('image/png');a.click(); toast('PNG descargado ✔'); }; return <>

setName(e.target.value)} className="w-full bg-white/[.06] border border-white/10 rounded-2xl px-4 py-3 text-[13px] font-semibold outline-none focus:border-river/60 transition-colors" placeholder="Nombre del jugador"/>
setNum(e.target.value.slice(0,3))} className="bg-white/[.06] border border-white/10 rounded-xl px-3 py-2 text-[11px] font-mono text-center outline-none focus:border-river/60 min-w-0" placeholder="N°"/>

{e.preventDefault();}} onDrop={onDropPhoto} onClick={()=>fileRef.current.click()} className="press cursor-pointer rounded-2xl border-2 border-dashed border-white/15 hover:border-cyanx/60 bg-white/[.04] px-4 py-4 flex items-center gap-3 transition-colors"> {photo?:}
Arrastrá una foto aquí o hacé clic para subir · PNG recortado ideal · máx 4.5MB

Tip: seleccioná la foto en la tarjeta y presioná Supr / Delete para eliminarla.

{rarezas.map((rr,i)=>( {rr.custom&&} ))}

{CLUBS.map(([n,src],i)=>)}

{FLAGS.map((f,i)=>)}

addRef.current.click()} className="press font-mono text-[8px] tracking-[1px] text-cyanx border border-cyanx/40 rounded-lg px-2.5 py-1 hover:bg-cyanx/10">＋ IMAGEN}/>
{layers.map(l=>(
setSel(l.id)} className={`flex items-center gap-2 rounded-xl px-2.5 py-2 border cursor-pointer transition-colors ${sel===l.id?'border-river bg-river/10':'border-white/[.08] bg-white/[.05]'} ${l.on?'':'opacity-45'}`}> {l.tipo==='pitch'?🟩:} {l.label} patch(l.id,{on:v})} size={16}/> {l.tipo==='custom'&&}
))}
{selLayer&&

EDITAR · {selLayer.label.toUpperCase()}
{[['x','X ◄ ►',0,100],['y','Y ▲ ▼',0,100],['w','TAMAÑO',6,120]].map(([k,lb,mn,mx])=>(
{lb}patch(selLayer.id,{[k]:+e.target.value})} className="flex-1"/>{Math.round(selLayer[k])}
))}
Tip: también podés arrastrar la imagen directamente sobre la tarjeta.

}

FICHA TÉCNICA · DORSO

POSICIÓN DEL NOMBRE (DORSO)
ALTURAsetDorsoY(+e.target.value)} className="flex-1"/>

TAMAÑOsetDorsoSize(+e.target.value)} className="flex-1"/>

{[['left','⇤'],['center','↔'],['right','⇥']].map(([a,ic])=>)}

{[['FECHA DEBUT',debut,setDebut],['EDAD',edad,setEdad],['ALTURA',alt,setAlt],['PESO (KG)',peso,setPeso],['NACIMIENTO',nac,setNac],['EN EL CLUB',enr,setEnr]].map(([lb,v,set])=>( {lb}set(e.target.value)} className="w-full bg-white/[.06] border border-white/10 rounded-lg px-2.5 py-1.5 text-[10.5px] outline-none focus:border-river/60 min-w-0"/>))}

PLANTILLA DE FONDO (RAREZA)
{rarezas.map((rr,i)=>( } ))}

COLOR DE LA TIPOGRAFÍA
{['','#ffffff','#111119','#ffcf3e','#ff2e3e','#22d3ee','#8b5cf6'].map(col=>( ))} setNameColor(e.target.value)} className="absolute inset-0 w-full h-full cursor-pointer opacity-0"/>🎨

loadBg(e,setFrontBg,'Fondo frente')} className="hidden"/> loadBg(e,setBackBg,'Fondo dorso')} className="hidden"/> {(frontBg||backBg)&&}

Se dibuja un punto rojo en la cancha según la posición · activá la capa “Cancha / posición”.

TAMAÑOsetNameSize(+e.target.value)} className="flex-1"/>{nameSize}px

$ setPrecio(e.target.value.replace(/[^0-9]/g,''))} placeholder="Ej: 3000 · vacío = precio por rareza" className="flex-1 bg-white/[.06] border border-white/10 rounded-xl px-3 py-2.5 text-[12px] font-mono outline-none focus:border-gold2/60"/>

Este valor aparece bajo el visor del dorso en la colección del socio · base del futuro juego de batallas.

VISTA PREVIA EN VIVO · FRENTE Y DORSO
FRENTE

setSel(null)}/> {layers.filter(l=>l.on&&!(l.tipo==='foto'&&!photo)).map(l=>(
startDrag(e,l.id)} className={`absolute cursor-grab active:cursor-grabbing ${sel===l.id?'ring-1 ring-river2/80 ring-offset-0':''}`} style={{left:l.x+'%',top:l.y+'%',width:l.w+'%',transform:'translate(-50%,-50%)',zIndex:zOf(l.tipo),touchAction:'none'}}> {l.tipo==='pitch' ?

: } {l.tipo==='escudo'&&{sigla}} {l.tipo==='flag'&&null}
))} {/* sheen + holo */} {rz>=4&&} {/* escudo + sigla */} {/* pitch + posición */} {/* flag + año */} {/* stats altura/peso */}
{[['↥',alt],['KG',peso]].map(([k,v],i)=>(
{k} {v}
))}
{/* nameplate + ribbon + footer */}
{(name||'—').toUpperCase()} {nac}
{enr}
CARP Official Collection
{!photo&&
SIN FOTO · arrastrá una imagen
}
DORSO
{rz>=4&&}
{photo&&}

{(name||'—').toUpperCase()} FICHA TÉCNICA · #{num}

{[['DEBUT',debut],['EDAD',edad+' años'],['ALTURA',alt+' m'],['PESO',peso+' kg'],['NACIMIENTO',nac],['POSICIÓN',pos]].map(([k,v])=>(
{k} {v}
))}

{enr}

CARP Official Collection · {R.name}

; } function PlantillaModule(){ const toast=useContext(ToastCtx);const db=useDB();const f=db.formacion; const PRESETS={'4-3-3':{def:4,med:3,del:3},'4-4-2':{def:4,med:4,del:2},'3-5-2':{def:3,med:5,del:2},'4-2-3-1':{def:4,med:5,del:1},'3-4-3':{def:3,med:4,del:3}}; const setEsquema=e=>OMDB.update(s=>{const p=PRESETS[e];s.formacion.esquema=e;['def','med','del'].forEach(k=>{const cur=s.formacion[k]||[];const arr=[];for(let i=0;iOMDB.update(s=>{if(line==='arq'||line==='dt'){if(!s.formacion[line]||typeof s.formacion[line]!=='object')s.formacion[line]={n:'',foto:''};s.formacion[line].n=v;}else{if(!s.formacion[line][i]||typeof s.formacion[line][i]!=='object')s.formacion[line][i]={n:'',foto:''};s.formacion[line][i].n=v;}}); const upPhoto=(line,i,file)=>{if(!file)return;if(file.size>4.5e6){toast('Imagen muy grande (máx 4.5MB)');return;}const r=new FileReader();r.onload=()=>{OMDB.update(s=>{if(line==='arq'||line==='dt'){if(!s.formacion[line]||typeof s.formacion[line]!=='object')s.formacion[line]={n:'',foto:''};s.formacion[line].foto=r.result;}else{if(!s.formacion[line][i]||typeof s.formacion[line][i]!=='object')s.formacion[line][i]={n:String(s.formacion[line][i]||''),foto:''};s.formacion[line][i].foto=r.result;}});toast('Rostro actualizado ✔');};r.readAsDataURL(file);}; const pick=(line,i)=>{const inp=document.createElement('input');inp.type='file';inp.accept='image/*';inp.style.display='none';document.body.appendChild(inp);inp.onchange=e=>{upPhoto(line,i,e.target.files[0]);inp.remove();};inp.click();}; const live=f.live!==false; const setLive=v=>OMDB.set('formacion.live',v); const Line=({line,label,arr,gk})=>(

{label}

{arr.map((p,i)=>(
setName(line,i,e.target.value)} className="flex-1 bg-transparent text-[11.5px] font-semibold outline-none min-w-0" placeholder="Nombre"/>
))}

); return <> {f.esquema}}/>

Edición en vivo{live?'Los cambios se reflejan y guardan al instante':'Pausado · el sitio no se actualiza'}

{live?'ON':'OFF'}

{Object.keys(PRESETS).map(e=>)}

{Line({line:'del',label:'DELANTEROS',arr:f.del})} {Line({line:'med',label:'MEDIOCAMPO',arr:f.med})} {Line({line:'def',label:'DEFENSA',arr:f.def})} {Line({line:'arq',label:'ARQUERO',arr:[f.arq],gk:true})} {Line({line:'dt',label:'DIRECTOR TÉCNICO',arr:[f.dt||{n:'',foto:''}],gk:true})}

Tocá el círculo o “FOTO” para subir el rostro · editá el nombre · cambiá el esquema arriba · todo se guarda solo
; } function SponsorsModule(){ const toast=useContext(ToastCtx);const db=useDB();const sp=db.sponsors||{}; const TC={ORO:'text-gold2',PLATA:'text-[#c0c0cb]',BRONCE:'text-[#b0763a]'}; const BC={ORO:'rgba(212,164,55,.35)',PLATA:'rgba(192,192,203,.25)',BRONCE:'rgba(176,118,58,.3)'}; const setLogo=(tier,i,src)=>OMDB.update(s=>{s.sponsors[tier][i].logo=src;}); const setLink=(tier,i,v)=>OMDB.update(s=>{s.sponsors[tier][i].link=v;}); const onDrop=(e,tier,i)=>{e.preventDefault();e.stopPropagation();const f=e.dataTransfer.files&&e.dataTransfer.files[0];if(f){if(f.size>4.5e6){toast('Imagen muy grande');return;}const r=new FileReader();r.onload=()=>{setLogo(tier,i,r.result);toast('Logo actualizado ✔');};r.readAsDataURL(f);return;}const url=e.dataTransfer.getData('text/uri-list')||e.dataTransfer.getData('text/plain');if(url&&/^https?:/.test(url)){setLogo(tier,i,url);toast('Logo actualizado ✔');}}; const pick=(tier,i)=>{const inp=document.createElement('input');inp.type='file';inp.accept='image/*';inp.onchange=e=>{const f=e.target.files[0];if(!f)return;if(f.size>4.5e6){toast('Imagen muy grande');return;}const r=new FileReader();r.onload=()=>{setLogo(tier,i,r.result);toast('Logo actualizado ✔');};r.readAsDataURL(f);};inp.click();}; return <>
{['ORO','PLATA','BRONCE'].map(t=>(
{t}
{(sp[t]||[]).map((sponsor,i)=>(

e.preventDefault()} onDrop={e=>onDrop(e,t,i)} onClick={()=>pick(t,i)} className="press h-12 rounded-xl grid place-items-center bg-white/[.05] cursor-pointer hover:bg-white/[.09] transition-colors px-2 overflow-hidden border-2 border-dashed" style={{borderColor:BC[t]}}> {sponsor.logo?:{sponsor.nombre}}
setLink(t,i,e.target.value)} placeholder="link…" className="bg-white/[.06] border border-white/10 rounded-lg px-2 py-1 text-[8px] font-mono outline-none focus:border-river/60 min-w-0"/>
))}

))}
Clic o arrastrá una imagen a cada logo · el link se abre desde el sitio ; } function HistoriasModule(){ const toast=useContext(ToastCtx); const viajes=[["Boca Juniors vs River Plate","La Bombonera · 25/05",["BUS","ENTRADA"]],["River Plate vs Talleres","Más Monumental · 01/06",["BUS","COMIDA"]],["River Plate vs Independiente","Más Monumental · 08/06",["BUS"]]]; return <> ⚡ IA}/>
{viajes.map(([t,s,tags])=>(
{t}{s}
{tags.map(g=>{g})}

))}

{`VAMOS A LA BOMBONERA\nBOCA JRS VS RIVER PLATE\nVIERNES 25/05 · BUS 10:00 HS + ENTRADA\nDESDE EL OBELISCO · RESERVA AL 11 2234-5678\n¡CUPOS LIMITADOS!`}
; } function SorteosModule(){ const toast=useContext(ToastCtx); const db=useDB();const s=db.sorteo;const sold=useMemo(()=>new Set(s.sold),[s.sold]); const toggle=n=>OMDB.update(st=>{const set=new Set(st.sorteo.sold);set.has(n)?set.delete(n):set.add(n);st.sorteo.sold=[...set].sort((a,b)=>a-b);}); const [over,setOver]=useState(false); const onDrop=e=>{e.preventDefault();setOver(false);try{const d=JSON.parse(e.dataTransfer.getData('text/plain'));if(d&&d.img){OMDB.update(st=>{st.sorteo.img=d.img;st.sorteo.img_dorso=d.dorso||d.img;if(d.premio)st.sorteo.premio=d.premio;if(d.titulo)st.sorteo.titulo=d.titulo;});toast('Premio del sorteo actualizado ✔');}}catch(x){}}; return <> 1× $3.000 · 2× $5.000}/>
{e.preventDefault();setOver(true);}} onDragLeave={()=>setOver(false)} onDrop={onDrop} className="grid grid-cols-[auto_1fr] gap-5 items-center rounded-2xl transition-all" style={over?{outline:'2px dashed #22d3ee',outlineOffset:4,background:'rgba(34,211,238,.06)'}:{}}>
{s.premio} arrastrá un premio aquí ↖

{Array.from({length:s.total},(_,n)=>{const vend=sold.has(n); return ;})}

DISPONIBLE {s.total-sold.size} VENDIDOS {sold.size} ELIGIENDO (en el sitio)
; } function ReelsModule(){ const db=useDB();const toast=useContext(ToastCtx); const [txt,setTxt]=useState('');const [url,setUrl]=useState('');const [plat,setPlat]=useState('YOUTUBE'); const add=()=>{ if(!txt.trim()){toast('Poné un título');return;} if(!url.trim()){toast('Pegá el link de YouTube o TikTok');return;} OMDB.update(s=>{s.reels=[{titulo:txt.trim(),vistas:'0',plataforma:plat,url:url.trim()},...s.reels];}); setTxt('');setUrl('');toast('Video publicado en el sitio'); }; const del=i=>OMDB.update(s=>{s.reels.splice(i,1);}); return <>
setTxt(e.target.value)} placeholder="Título del video…" className="bg-white/[.06] border border-white/10 rounded-xl px-3 py-2 text-[11px] outline-none focus:border-river/60 min-w-0"/>

{['YOUTUBE','TIKTOK'].map(p=>( ))}
setUrl(e.target.value)} onKeyDown={e=>e.key==='Enter'&&add()} placeholder="Pegá el link…" className="flex-1 bg-white/[.06] border border-white/10 rounded-xl px-3 py-2 text-[10px] font-mono outline-none focus:border-river/60 min-w-0"/>

{db.reels.map((r,i)=>(

{r.titulo}{r.plataforma} · {r.url?r.url.slice(0,26)+'…':r.vistas+' vistas'}

))}
; } /* ============ PUBLICIDADES · BANNERS DEL SITIO ============ */ function PublicidadesModule(){ const db=useDB();const toast=useContext(ToastCtx); const ads=db.config.banners||[]; const [drag,setDrag]=useState(null); const ZC={'CALIENTE':'#ff2e3e','MEDIA':'#ffcf3e','FRÍA':'#22d3ee'}; const setImg=(i,file)=>{if(!file)return;if(!/^image\//.test(file.type)){toast('Solo imágenes');return;}if(file.size>4.5e6){toast('Máx 4.5MB');return;}const r=new FileReader();r.onload=()=>{OMDB.update(s=>{s.config.banners[i].img=r.result;});toast('Banner #'+(i+1)+' actualizado en el sitio');};r.readAsDataURL(file);}; const setUrl=(i,v)=>OMDB.update(s=>{s.config.banners[i].img=v;}); const setLink=(i,v)=>OMDB.update(s=>{s.config.banners[i].link=v;}); const setPrecio=(i,v)=>OMDB.update(s=>{s.config.banners[i].precio=parseInt(v)||0;}); const ocupados=ads.filter(a=>a.img).length; return <> {ocupados}/{ads.length} VENDIDOS}/>
{Object.entries(ZC).map(([z,c])=>{z})} Arrastrá una imagen o pegá URL + link de destino

{ads.map((a,i)=>{const zc=ZC[a.zona]||'#9a9aa6'; return

{i+1} {a.pos} {a.zona}
{e.preventDefault();setDrag(i);}} onDragLeave={()=>setDrag(null)} onDrop={e=>{e.preventDefault();setDrag(null);setImg(i,e.dataTransfer.files&&e.dataTransfer.files[0]);}} className={`relative rounded-xl border-2 border-dashed grid place-items-center overflow-hidden cursor-pointer transition-colors ${drag===i?'border-river bg-river/10':'border-white/15 hover:border-white/30'}`} style={{aspectRatio:'300/160',background:'rgba(255,255,255,.03)'}}> setImg(i,e.target.files&&e.target.files[0])}/> {a.img?:⬇ ARRASTRÁ UNA IMAGEN
O TOCÁ PARA SUBIR} {a.img&&} setUrl(i,e.target.value)} placeholder="…o pegá la URL de la imagen" className="bg-white/[.06] border border-white/10 rounded-lg px-2.5 py-1.5 text-[9.5px] font-mono outline-none focus:border-river/60"/> setLink(i,e.target.value)} placeholder="Link de destino (https://…)" className="bg-white/[.06] border border-white/10 rounded-lg px-2.5 py-1.5 text-[9.5px] font-mono outline-none focus:border-river/60"/>
$/messetPrecio(i,e.target.value)} className="flex-1 bg-white/[.06] border border-white/10 rounded-lg px-2.5 py-1.5 text-[10px] font-mono outline-none focus:border-river/60" style={{color:zc}}/>

;})}
; } /* ============ PREMIOS ARRASTRABLES (islas) ============ */ function PrizeIsland({idx}){ const db=useDB(); const p=(db.premios||[])[idx];if(!p)return null; const onDrag=e=>{e.dataTransfer.setData('text/plain',JSON.stringify({img:p.img,dorso:p.dorso||p.img,titulo:p.titulo,premio:p.titulo}));e.dataTransfer.effectAllowed='copy';}; return <>

{p.titulo} 1× $3.000 · 2× $5.000 · ↕ arrastrá a Sorteos ; } /* ============ GESTOR DE PREMIOS (isla única, 3 premios editables) ============ */ function PremiosModule(){ const db=useDB();const toast=useContext(ToastCtx);const premios=db.premios||[]; const setImg=(i,src)=>OMDB.update(s=>{s.premios[i].img=src;}); const onDropImg=(e,i)=>{e.preventDefault();e.stopPropagation();const f=e.dataTransfer.files&&e.dataTransfer.files[0];if(f){if(f.size>4.5e6){toast('Imagen muy grande (máx 4.5MB)');return;}const r=new FileReader();r.onload=()=>{setImg(i,r.result);toast('Imagen del premio actualizada ✔');};r.readAsDataURL(f);return;}const url=e.dataTransfer.getData('text/uri-list')||e.dataTransfer.getData('text/plain');if(url&&/^https?:/.test(url)){setImg(i,url);toast('Imagen del premio actualizada ✔');}}; const pick=i=>{const inp=document.createElement('input');inp.type='file';inp.accept='image/*';inp.onchange=e=>{const f=e.target.files[0];if(!f)return;if(f.size>4.5e6){toast('Imagen muy grande');return;}const r=new FileReader();r.onload=()=>{setImg(i,r.result);toast('Imagen actualizada ✔');};r.readAsDataURL(f);};inp.click();}; const dragToSorteo=(e,p)=>{e.dataTransfer.setData('text/plain',JSON.stringify({img:p.img,dorso:p.dorso||p.img,titulo:p.titulo,premio:p.titulo}));e.dataTransfer.effectAllowed='copy';}; return <>
{premios.map((p,i)=>(

dragToSorteo(e,p)} onDragOver={e=>e.preventDefault()} onDrop={e=>onDropImg(e,i)} onClick={()=>pick(i)} className="press cursor-grab active:cursor-grabbing rounded-xl overflow-hidden grid place-items-center flex-1 min-h-[130px] border-2 border-dashed border-white/12 hover:border-cyanx/60 transition-colors" style={{background:`radial-gradient(circle at 50% 40%,${p.accent}22,rgba(0,0,0,.25))`}}> {p.img?:Arrastrá o clic para subir}
{p.titulo} setImg(i,e.target.value)} placeholder="…o pegá URL de imagen" className="bg-white/[.06] border border-white/10 rounded-lg px-2 py-1.5 text-[9px] font-mono outline-none focus:border-river/60 min-w-0"/> {p.precio} · ↕ arrastrá a Sorteos
))}
; } function ViajesModule(){ const db=useDB();const toast=useContext(ToastCtx); const CLUBS=[['barracas','Barracas Central'],['boca','Boca'],['racing','Racing'],['independiente','Independiente'],['sanlorenzo','San Lorenzo'],['estudiantes','Estudiantes'],['gimnasia','Gimnasia La Plata'],['huracan','Huracán'],['velez','Vélez'],['tigre','Tigre'],['newells',"Newell's"],['rosario','Rosario Central'],['argentinos','Argentinos'],['banfield','Banfield'],['belgrano','Belgrano'],['sarmiento','Sarmiento'],['aldosivi','Aldosivi'],['tucuman','Atl. Tucumán'],['rivadavia','Riestra/Rivadavia'],['flamengo','Flamengo'],['penarol','Peñarol'],['millonarios','Millonarios']]; const [rival,setRival]=useState('');const [crest,setCrest]=useState('barracas');const [fecha,setFecha]=useState('');const [precio,setPrecio]=useState('');const [cupos,setCupos]=useState('');const [punto,setPunto]=useState('La Costanera · Corrientes');const [flyer,setFlyer]=useState(null);const [over,setOver]=useState(false); const readFlyer=f=>{if(!f)return;if(f.size>4.5e6){toast('Imagen muy grande (máx 4.5MB)');return;}const r=new FileReader();r.onload=()=>{setFlyer(r.result); // 1) heurística por nombre de archivo const nm=(f.name||'').replace(/[_\-.]/g,' ');const hit=CLUBS.find(([,n])=>nm.toLowerCase().includes(n.toLowerCase().split(' ')[0]));if(hit){setCrest(hit[0]);setRival(hit[1]);} toast('Flyer cargado · leyendo con OCR…'); // 2) OCR con Tesseract.js (lee el texto del flyer) const run=()=>{try{window.Tesseract.recognize(r.result,'spa').then(({data})=>{ const txt=(data.text||'').toUpperCase(); const cl=CLUBS.find(([,n])=>txt.includes(n.toUpperCase().split(' ')[0]));if(cl){setCrest(cl[0]);setRival(cl[1]);} const fm=txt.match(/(\d{1,2})[\/\-](\d{1,2})(?:[\/\-](\d{2,4}))?/);if(fm){const y=fm[3]?(fm[3].length===2?'20'+fm[3]:fm[3]):'2026';setFecha(`${y}-${fm[2].padStart(2,'0')}-${fm[1].padStart(2,'0')}T20:00`);} const pm=txt.match(/\$?\s?(\d{2,3}[.\s]?\d{3})/);if(pm){const n=pm[1].replace(/[.\s]/g,'');if(+n>=1000)setPrecio(n);} toast('✔ OCR completo · revisá los campos'); }).catch(()=>toast('No pude leer el flyer · completá a mano'));}catch(e){toast('Cargá los datos a mano');}}; if(window.Tesseract)run(); else{const sc=document.createElement('script');sc.src='https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js';sc.onload=run;sc.onerror=()=>toast('Completá los datos a mano');document.head.appendChild(sc);} };r.readAsDataURL(f);}; const onDrop=e=>{e.preventDefault();setOver(false);const f=e.dataTransfer.files&&e.dataTransfer.files[0];if(f)readFlyer(f);}; const publicar=()=>{if(!rival.trim()){toast('Poné el rival');return;} OMDB.update(s=>{s.viajes=[{destino:'Buenos Aires',rival:rival.trim(),crest,comp:'Liga Profesional',fecha:fecha||'A confirmar',salida:'Salimos un día antes',punto:punto.trim(),precio:precio?('$'+(+precio).toLocaleString('es-AR')):'Consultar',cupos:+cupos||40,estado:'ABIERTO',flyer},...s.viajes].slice(0,12);}); toast('✔ Viaje publicado en el sitio');setRival('');setFecha('');setPrecio('');setCupos('');setFlyer(null);}; const del=i=>OMDB.update(s=>{s.viajes.splice(i,1);}); const Inp=({v,set,ph,type='text'})=>set(e.target.value)} placeholder={ph} type={type} className="w-full bg-white/[.06] border border-white/10 rounded-xl px-3 py-2 text-[11.5px] outline-none focus:border-river/60"/>; return <> ARRASTRÁ EL FLYER ↘}/>

{e.preventDefault();setOver(true);}} onDragLeave={()=>setOver(false)} onDrop={onDrop} onClick={()=>{const i=document.createElement('input');i.type='file';i.accept='image/*';i.onchange=e=>readFlyer(e.target.files[0]);i.click();}} className="press rounded-2xl border-2 border-dashed grid place-items-center text-center cursor-pointer overflow-hidden relative" style={{borderColor:over?'#ff2e3e':'rgba(255,255,255,.18)',minHeight:150,background:over?'rgba(224,30,47,.08)':'rgba(255,255,255,.03)'}}> {flyer?:
📲
FLYER WHATSAPP
arrastrá o clic
}

RIVAL

ESCUDO DEL RIVAL (manual si la API no lo reconoce)
{CLUBS.map(([k,n])=>( ))}

FECHA

PRECIO (ARS)

CUPOS

PUNTO DE SALIDA

{(db.viajes||[]).map((v,i)=>(
{e.target.style.visibility='hidden';}}/>
River vs {v.rival}{v.fecha} · {v.precio||'—'}

))}
; } function AsientosModule(){ const db=useDB();const a=db.asientos||{zonas:[],vendidos:[]}; const vendidos=useMemo(()=>new Set(a.vendidos||[]),[a.vendidos]); const zonaDe=n=>a.zonas.find(z=>n>=z.desde&&n<=z.hasta); const toggle=n=>OMDB.update(s=>{const set=new Set(s.asientos.vendidos);set.has(n)?set.delete(n):set.add(n);s.asientos.vendidos=[...set].sort((x,y)=>x-y);}); const total=a.zonas.length?a.zonas[a.zonas.length-1].hasta:0; return <> {vendidos.size}/{total} OCUPADOS}/>
{a.zonas.map(z=>({z.plan} ({z.desde}-{z.hasta})))}

{Array.from({length:total},(_,i)=>{const n=i+1;const z=zonaDe(n);const oc=vendidos.has(n); return ;})}

Se refleja en vivo en el sitio (Viajes · elegí tu asiento). Los ocupados aparecen tachados por clase.
; } function PasajerosPanel({a,zonaDe}){ const ocup=a.ocupantes||{}; const nums=Object.keys(ocup).map(Number).sort((x,y)=>x-y); const [qr,setQr]=useState(null); return
CLIC = VER QR}/> {nums.length===0?
Todavía no hay pasajeros. Cuando un socio pague su asiento aparece acá con su avatar, identificador y QR.
:
{nums.map(n=>{const o=ocup[n];const z=zonaDe(n)||{color:'#9a9aa6',plan:'—'}; return
{o.avatar?:o.iniciales}
{o.nombre}#{o.codigo||'—'} · ASIENTO {String(n).padStart(2,'0')} · {z.plan}{o.monto==='sena'?'Seña':'Pago total'} · {o.metodo==='stripe'?'Stripe':'MercadoPago'}

;})}
} {qr!==null&&
setQr(null)}>

e.stopPropagation()}>
ASIENTO {String(qr).padStart(2,'0')} · {ocup[qr].nombre}

Escaneá para validar identidad, asiento y pago del pasajero.

}
; } function PagosModule(){ const db=useDB();const toast=useContext(ToastCtx); const p=(db.config.pagos)||{}; const env=p.entorno||'test'; const setEnv=v=>OMDB.update(s=>{s.config.pagos={...s.config.pagos,entorno:v};}); // credenciales por entorno: config.pagos.test.* / config.pagos.prod.* const cur=p[env]||{}; const set=(k,v)=>OMDB.update(s=>{const pg={...s.config.pagos};pg[env]={...(pg[env]||{}),[k]:v};s.config.pagos=pg;}); const enc=v=>v?('enc:'+btoa(unescape(encodeURIComponent(v)))):''; const isSaved=v=>typeof v==='string'&&v.indexOf('enc:')===0; // input público (visible) const Pub=({k,label,ph})=>(
{label} set(k,e.target.value)} placeholder={ph} className="w-full bg-white/[.06] border border-white/10 rounded-lg px-2.5 py-1.5 font-mono text-[9.5px] outline-none focus:border-river/60"/>
); // input secreto (enmascarado) const Sec2=({k,label})=>{ const saved=isSaved(cur[k]);const [edit,setEdit]=useState(false);const [v,setV]=useState(''); if(saved&&!edit)return
{label} 🔒
•••••••••••••• ✓ cifrado

; return
{label} 🔒
setV(e.target.value)} placeholder="Pegá el token secreto…" className="flex-1 bg-white/[.06] border border-white/10 rounded-lg px-2.5 py-1.5 font-mono text-[9.5px] outline-none focus:border-river/60"/>
; }; return <> {['test','prod'].map(e=>)}
}/>

Mercado Pago

Stripe

Se guardan por entorno (test / producción). Los tokens secretos quedan cifrados (nunca en claro ni visibles) y solo se usan server-side en el checkout real (Edge Function). El entorno activo {env.toUpperCase()} es el que usa todo el sitio para cobrar.

; } function MensajesModule(){ const db=useDB();const toast=useContext(ToastCtx); const msgs=db.mensajes||[]; const noLeidos=msgs.filter(m=>!m.leido).length; const marcar=id=>OMDB.update(s=>{const m=(s.mensajes||[]).find(x=>x.id===id);if(m)m.leido=true;}); const borrar=id=>OMDB.update(s=>{s.mensajes=(s.mensajes||[]).filter(x=>x.id!==id);}); return <> 0?{noLeidos} nuevos:{msgs.length} total}/>
{msgs.length===0&&
Sin mensajes todavía. Los que lleguen del formulario de contacto aparecen acá.
} {msgs.map(m=>(

{!m.leido&&} {m.nombre} {m.asunto}

{m.mensaje}

{m.email&&{m.email}} {new Date(m.fecha).toLocaleString('es-AR',{day:'2-digit',month:'short',hour:'2-digit',minute:'2-digit'})}
{!m.leido&&}

))}
; } function AdminsModule(){ const toast=useContext(ToastCtx); const isRoot=!!(window.OMAdmin&&typeof OMAdmin.isRoot==='function'&&OMAdmin.isRoot()); const [,force]=useState(0);const refresh=()=>force(x=>x+1); const [nombre,setNombre]=useState('');const [email,setEmail]=useState('');const [priv,setPriv]=useState([]); const [nuevo,setNuevo]=useState(null); const PRIVS=[['site','Sitio & Hero'],['figus','Figuritas'],['sorteos','Sorteos'],['viajes','Viajes'],['msgs','Mensajes'],['pagos','Pagos & API'],['plantel','Plantel']]; const list=isRoot?OMAdmin.listAdmins():[]; const togglePriv=p=>setPriv(v=>v.includes(p)?v.filter(x=>x!==p):[...v,p]); const crear=()=>{const r=OMAdmin.crearAdmin({nombre,email,priv});if(!r.ok){toast(r.error);return;}setNuevo({email,code:r.invcode});setNombre('');setEmail('');setPriv([]);refresh();toast('Admin creado · pasale el código de invitación');}; if(!isRoot) return <>
Solo el administrador root puede gestionar admins y privilegios.
; return <> {list.length} CUENTAS}/>

CREAR NUEVO ADMIN setNombre(e.target.value)} placeholder="Nombre completo" className="bg-white/[.06] border border-white/10 rounded-xl px-3 py-2.5 text-[12px] outline-none focus:border-river/60"/> setEmail(e.target.value)} type="email" placeholder="Correo del admin" className="bg-white/[.06] border border-white/10 rounded-xl px-3 py-2.5 text-[12px] outline-none focus:border-river/60"/> PRIVILEGIOS
{PRIVS.map(([id,l])=>)}
{nuevo&&

CÓDIGO DE INVITACIÓN PARA {nuevo.email}
{nuevo.code}
Pasale este código al admin. Debe entrar al panel → "Activá tu cuenta", poner su correo + este código y crear su contraseña.

}

CUENTAS DE ADMIN
👑
Administrador ROOTacceso total · no se puede revocar

{list.length===0&&
Sin admins creados todavía.
} {list.map(a=>
{(a.nombre||'?').slice(0,2).toUpperCase()}
{a.nombre}{a.email}
{a.estado==='pendiente'?PEND · {a.invcode}:ACTIVO}
)}

; } /* ============ MODULE REGISTRY (hiper modular) ============ */ function ProdeTriviaModule(){ const db=useDB(); const pr=(db.prode&&db.prode.participaciones)||[]; const tr=(db.trivia&&db.trivia.participaciones)||[]; const Av=({a,n,s=28})=>{a?:(n||'?').slice(0,2).toUpperCase()}; const rank=[...tr].sort((a,b)=>b.aciertos-a.aciertos); return <> {tr.length+pr.length} JUGADAS}/>

🧠 TRIVIA · RANKING DE ACIERTOS
{rank.length===0&&
Nadie jugó la trivia todavía.
} {rank.map((p,i)=>
{i+1}
{p.nombre}{p.semana} · {new Date(p.fecha).toLocaleDateString('es-AR',{day:'2-digit',month:'short'})}
{p.aciertos}/{p.total}
)}

🎯 PRODE · PRONÓSTICOS ENVIADOS
{pr.length===0&&
Sin pronósticos esta semana.
} {pr.map(p=>

{p.nombre}{p.semana} · {p.partidos} partido(s)
{p.aciertos||0} pts
)}

; } function EnviarModule(){ const db=useDB();const toast=useContext(ToastCtx); const recibidos=db.mensajes||[]; const enviados=db.mensajes_enviados||[]; const admin=window.OMAdmin&&OMAdmin.current&&OMAdmin.current(); const contactos=[...new Map(recibidos.filter(m=>m.email).map(m=>[m.email,{nombre:m.nombre,email:m.email,id:m.email}])).values()]; const [dest,setDest]=useState('');const [txt,setTxt]=useState(''); const hilo=[...recibidos.filter(m=>m.email===dest).map(m=>({...m,dir:'in'})),...enviados.filter(m=>m.email===dest).map(m=>({...m,dir:'out'}))].sort((a,b)=>a.fecha-b.fecha); const Av=({n,s=30})=>{(n||'?').slice(0,2).toUpperCase()}; const enviar=()=>{ if(!dest){toast('Elegí un destinatario');return;} if(!txt.trim())return; OMDB.update(s=>{s.mensajes_enviados=[...(s.mensajes_enviados||[]),{id:'e'+Date.now(),email:dest,mensaje:txt.trim(),fecha:Date.now(),por:(admin&&admin.nombre)||'Admin'}];}); const c=contactos.find(x=>x.email===dest);const body=encodeURIComponent(txt.trim()); window.open(`mailto:${dest}?subject=${encodeURIComponent('Orgullo Millonario · respuesta')}&body=${body}`,'_blank'); setTxt('');toast('Respuesta enviada a '+((c&&c.nombre)||dest)); }; return <> {contactos.length} contactos}/>

{contactos.length===0&&
Sin contactos aún.
} {contactos.map(c=>)}

{dest?<>
c.email===dest)||{}).nombre}/>
{(contactos.find(c=>c.email===dest)||{}).nombre}● socio identificado · {dest}

{hilo.length===0&&
Sin mensajes con este socio.
} {hilo.map((m,i)=>
{m.mensaje} {new Date(m.fecha).toLocaleString('es-AR',{day:'2-digit',month:'short',hour:'2-digit',minute:'2-digit'})}
)}

setTxt(e.target.value)} onKeyDown={e=>e.key==='Enter'&&enviar()} placeholder="Escribí una respuesta…" className="flex-1 bg-white/[.06] border border-white/10 rounded-xl px-3 py-2 text-[11.5px] outline-none focus:border-river/60 min-w-0"/>
:
Elegí un socio de la izquierda para responderle. Cada uno se identifica por su avatar y su ID.
}

; } const FULL='md:col-span-2 xl:col-span-3'; function TestimoniosModule(){ const db=useDB();const toast=useContext(ToastCtx); const list=db.testimonios||[]; const upd=(i,k,v)=>OMDB.update(s=>{s.testimonios[i][k]=v;}); const del=i=>OMDB.update(s=>{s.testimonios.splice(i,1);}); const add=()=>OMDB.update(s=>{s.testimonios=[{nombre:'Nuevo hincha',lugar:'Corrientes',tag:'SOCIO',color:'#ff2e3e',texto:'Escribí el testimonio…',avatar:null},...(s.testimonios||[])];}); const pickAv=i=>{const inp=document.createElement('input');inp.type='file';inp.accept='image/*';inp.onchange=e=>{const f=e.target.files&&e.target.files[0];if(!f)return;if(f.size>4.5e6){toast('Imagen muy grande');return;}const r=new FileReader();r.onload=()=>{upd(i,'avatar',r.result);toast('Avatar actualizado ✔');};r.readAsDataURL(f);};inp.click();}; return <> ＋ NUEVO}/>
{list.length===0&&
Sin testimonios. Tocá ＋ Nuevo.
} {list.map((t,i)=>(

upd(i,'nombre',e.target.value)} placeholder="Nombre" className="bg-white/[.06] border border-white/10 rounded-lg px-2.5 py-1.5 text-[11px] font-bold outline-none focus:border-river/60"/> upd(i,'lugar',e.target.value)} placeholder="Ciudad" className="bg-white/[.06] border border-white/10 rounded-lg px-2.5 py-1.5 text-[10px] outline-none focus:border-river/60"/>
upd(i,'tag',e.target.value)} placeholder="Etiqueta (ej: SOCIO VIP)" className="bg-white/[.06] border border-white/10 rounded-lg px-2.5 py-1.5 text-[9.5px] font-mono outline-none focus:border-river/60"/> upd(i,'texto',e.target.value)} rows="2" placeholder="Testimonio…" className="bg-white/[.06] border border-white/10 rounded-lg px-2.5 py-1.5 text-[11px] outline-none focus:border-river/60 resize-none"/> <div className="flex items-center gap-2"> <div className="flex gap-1">{['#ff2e3e','#e0a24e','#8b5cf6','#22d3ee','#22c55e'].map(cl=><button key={cl} onClick={()=>upd(i,'color',cl)} className="press w-5 h-5 rounded-full border-2" style={{background:cl,borderColor:t.color===cl?'#fff':'transparent'}}/>)}</div> <button onClick={()=>del(i)} className="press ml-auto font-mono text-[8px] tracking-[1px] text-dim hover:text-river2 flex items-center gap-1"><Ic n="trash" s={12}/>ELIMINAR</button> </div> </div> </div>))} </div> </>; } function AuditoriaModule(){ const db=useDB();const toast=useContext(ToastCtx); const [rep,setRep]=useState(null);const [prompt,setPrompt]=useState('');const fRef=useRef(); const run=()=>{ const p=(db.config.pagos)||{};const env=p.entorno||'test';const cur=p[env]||{}; const bronce=(db.planes||[]).find(x=>x.id==='BRONCE'); const checks=[ ['Secciones del sitio', (db.config.sections||[]).length, (db.config.sections||[]).length>0], ['Figuritas en el pool', (db.figuritas||[]).length, true], ['Sponsors cargados', ['ORO','PLATA','BRONCE'].reduce((n,t)=>n+(((db.sponsors||{})[t])||[]).length,0), true], ['Banners publicitarios', (db.config.banners||[]).length, true], ['Planes de socio', (db.planes||[]).length, (db.planes||[]).length===4], ['Bronce gratis', bronce&&bronce.precio===0?'sí':'no', bronce&&bronce.precio===0], ['Pasarela MP activa ('+env+')', cur.mp_activo?'sí':'no', true], ['Pasarela Stripe activa ('+env+')', cur.stripe_activo?'sí':'no', true], ['Tokens secretos cifrados', (typeof cur.mp_access_token==='string'&&cur.mp_access_token.indexOf('enc:')===0)?'sí':'—', true], ['Contadores en cero (launch)', (db.kpis.socios===0)?'sí':'no', true], ['Visitas geolocalizadas', (db.visitas_geo||[]).length, (db.visitas_geo||[]).length>0], ['Trivia · participaciones', ((db.trivia&&db.trivia.participaciones)||[]).length, true], ['Prode · pronósticos', ((db.prode&&db.prode.participaciones)||[]).length, true], ['Mensajes recibidos', (db.mensajes||[]).length, true], ]; setRep({fecha:new Date().toLocaleString('es-AR'),checks}); toast('Auditoría ejecutada · '+checks.length+' checks'); }; const descargar=()=>{ if(!rep){run();return;} const rows=rep.checks.map(c=>`<tr><td>${c[0]}</td><td style="text-align:center">${c[1]}</td><td style="text-align:center;color:${c[2]?'#0a0':'#c00'}">${c[2]?'OK':'REVISAR'}</td></tr>`).join(''); const html=`<!DOCTYPE html><html><head><meta charset="utf-8"><title>Auditoría · Orgullo Millonario</title></head><body style="font-family:Arial,sans-serif"> <h1 style="color:#e01e2f">Informe de Arquitectura · Orgullo Millonario</h1> <p><b>Fecha:</b> ${rep.fecha}</p> <h2>Stack</h2><p>Astro + React + Tailwind CSS · Supabase (PostgreSQL, Auth, Storage, Realtime) · Hostinger. Capa OM-DB (Panel escribe / Sitio lee en vivo).</p> <h2>Checks del ecosistema</h2> <table border="1" cellpadding="6" cellspacing="0" style="border-collapse:collapse;width:100%"><tr style="background:#eee"><th align="left">Ítem</th><th>Valor</th><th>Estado</th></tr>${rows}</table> <h2>Base de datos</h2><p>profiles, figuritas, user_figuritas, posts, comentarios, viajes_reservas, config, mensajes. RLS activo; trigger auth→profiles; RPC atómica de intercambio P2P; bucket Storage orgullo-media (solo URLs).</p> <h2>Seguridad</h2><p>Claves públicas en cliente; tokens secretos cifrados (server-side en checkout). LiteSpeed cache deshabilitado para HTML dinámico. Panel privado (SHA-256, admin root).</p> </body></html>`; const blob=new Blob(['\ufeff'+html],{type:'application/msword'}); const a=document.createElement('a');a.href=URL.createObjectURL(blob);a.download='auditoria-orgullo-millonario.doc';a.click(); toast('Informe .doc (Word) descargado ✔'); }; const subir=e=>{const f=e.target.files&&e.target.files[0];if(!f)return; setPrompt(`Actuá como arquitecto full-stack senior (Astro + React + Tailwind + Supabase). Analizá el informe de auditoría "${f.name}" del proyecto Orgullo Millonario y devolvé, priorizado por criticidad: (1) vulnerabilidades de seguridad y cómo cerrarlas (RLS, tokens, cache), (2) errores de lógica/rutas rotas, (3) optimizaciones de rendimiento (LCP/TBT/SEO), (4) el código exacto para corregir cada punto sin romper la estética liquid glass ni la capa OM-DB. Todo modular y compatible con Hostinger.`); toast('Documento leído · prompt generado abajo');e.target.value='';}; return <> <Sec label="AUTO-AUDITORÍA · INFORME DESCARGABLE" right={<button onClick={run} className="press font-mono text-[8px] tracking-[1px] text-cyanx border border-cyanx/40 rounded-lg px-2.5 py-1 hover:bg-cyanx/10">▶ EJECUTAR</button>}/> <div className="grid md:grid-cols-2 gap-3 flex-1"> <div className="rounded-2xl border border-white/[.08] bg-white/[.03] p-3 flex flex-col"> <b className="font-mono text-[8.5px] tracking-[1.5px] text-gold2 mb-2">RESULTADO DEL TEST</b> <div className="flex flex-col gap-1 overflow-y-auto max-h-[280px] pr-1 flex-1"> {!rep&&<p className="text-mut text-[11px] py-6 text-center">Tocá ▶ Ejecutar para correr el test sobre todo el sitio.</p>} {rep&&rep.checks.map((c,i)=><div key={i} className="flex items-center gap-2 rounded-lg px-2.5 py-1.5 bg-white/[.04]"> <i className={`w-2 h-2 rounded-full flex-none ${c[2]?'bg-green-400':'bg-river2'}`}/> <b className="text-[10.5px] flex-1 truncate">{c[0]}</b><span className="font-mono text-[9px] text-gold2">{String(c[1])}</span></div>)} </div> <button onClick={descargar} className="press rounded-xl py-2.5 mt-2 text-[12px] font-bold text-white" style={{background:'linear-gradient(160deg,#ff2e3e,#8d0917)'}}>⬇ Descargar informe .doc (Word)</button> </div> <div className="rounded-2xl border border-white/[.08] bg-white/[.03] p-3 flex flex-col"> <b className="font-mono text-[8.5px] tracking-[1.5px] text-cyanx mb-2">SUBÍ UN INFORME · GENERAR PROMPT</b> <input ref={fRef} type="file" accept=".doc,.docx,.txt" onChange={subir} className="hidden"/> <div onClick={()=>fRef.current.click()} onDragOver={e=>e.preventDefault()} onDrop={e=>{e.preventDefault();if(e.dataTransfer.files[0]){fRef.current.files=e.dataTransfer.files;subir({target:fRef.current});}}} className="press cursor-pointer rounded-xl border-2 border-dashed border-white/15 hover:border-cyanx/60 grid place-items-center py-6 text-center transition-colors mb-2"> <div><div className="text-[22px] mb-1">📄⬆</div><b className="text-[11px] block">Arrastrá tu .docx/.doc aquí</b><small className="font-mono text-[7.5px] text-dim">o tocá para subirlo</small></div> </div> {prompt&&<><span className="font-mono text-[7px] tracking-[1px] text-mut mb-1">PROMPT PARA SOLUCIONAR</span> <textarea readOnly value={prompt} className="flex-1 min-h-[120px] bg-white/[.06] border border-white/10 rounded-lg px-2.5 py-2 text-[10px] outline-none resize-none"/> <button onClick={()=>{navigator.clipboard&&navigator.clipboard.writeText(prompt);toast('Prompt copiado ✔');}} className="press glass rounded-xl py-2 mt-2 text-[11px] font-bold text-ink">Copiar prompt</button></>} </div> </div> </>; } const MODULES=[ {id:'audit', title:'Auto-Auditoría', icon:'grid', span:FULL, rootOnly:true, C:AuditoriaModule}, {id:'kpi', title:'Dashboard & Métricas', icon:'dash', span:FULL, bare:true, C:KpiModule}, {id:'site', title:'Sitio & Hero', icon:'eye', span:FULL, C:SiteModule}, {id:'modular',title:'Modularización', icon:'grid', span:FULL, C:ModularModule}, {id:'constr',title:'Constructor del Sitio', icon:'drag', span:FULL, C:ConstructorModule}, {id:'ads', title:'Publicidades · Banners',icon:'card', span:FULL, C:PublicidadesModule}, {id:'rev', title:'Facturación', icon:'down', span:'md:col-span-2 xl:col-span-2', C:RevenueModule}, {id:'world', title:'Visitas', icon:'eye', span:'xl:col-span-1', C:WorldModule}, {id:'refs', title:'Referidos · Socios', icon:'users', span:'xl:col-span-1', C:ReferidosModule}, {id:'figus', title:'Figuritas Builder', icon:'card', span:FULL, C:FiguritasModule}, {id:'squad', title:'Plantilla', icon:'squad', span:'xl:col-span-1', C:PlantillaModule}, {id:'viajes',title:'Viajes', icon:'gift', span:FULL, C:ViajesModule}, {id:'testi', title:'La Banda Habla', icon:'chat', span:'xl:col-span-1', C:TestimoniosModule}, {id:'premios',title:'Gestor de Premios', icon:'gift', span:'xl:col-span-1', C:PremiosModule}, {id:'sorteo',title:'Sorteos', icon:'gift', span:FULL, C:SorteosModule}, {id:'asientos',title:'Asientos por Plan', icon:'gift',span:'xl:col-span-1', C:AsientosModule}, {id:'pagos', title:'Cuentas de Pago', icon:'gift', span:'xl:col-span-1', C:PagosModule}, {id:'spons', title:'Sponsors', icon:'heart', span:'xl:col-span-1', C:SponsorsModule}, {id:'reels', title:'Reels TikTok', icon:'play', span:'xl:col-span-1', C:ReelsModule}, {id:'msgs', title:'Mensajes · Recibir', icon:'chat', span:'xl:col-span-1', C:MensajesModule}, {id:'enviar',title:'Mensajes · Enviar', icon:'chat', span:'xl:col-span-1', C:EnviarModule}, {id:'protriv',title:'Prode & Trivia', icon:'gift', span:FULL, C:ProdeTriviaModule}, {id:'admins',title:'Administradores', icon:'grid', span:FULL, rootOnly:true, C:AdminsModule}, ]; const LS_KEY='om-panel-modules-v1'; /* ============ MODULE MANAGER SHEET ============ */ function ModuleSheet({open,onClose,enabled,setEnabled}){ if(!open)return null; return <div className="fixed inset-0 z-[80] flex items-end md:items-center justify-center" onClick={onClose}> <div className="absolute inset-0 bg-black/60 backdrop-blur-sm"/> <div onClick={e=>e.stopPropagation()} className="glass-deep relative rounded-t-glass md:rounded-glass w-full md:w-[420px] p-6 safe-b" style={{animation:'sheetUp .35s cubic-bezier(.22,1,.36,1) both'}}> <div className="w-10 h-1 rounded-full bg-white/20 mx-auto mb-4 md:hidden"/> <div className="flex items-center justify-between mb-4"> <b className="font-disp text-[16px] tracking-[1px]">MÓDULOS DEL PANEL</b> <button onClick={onClose} className="press w-8 h-8 rounded-full glass grid place-items-center text-mut hover:text-ink"><Ic n="x" s={14}/></button> </div> <div className="flex flex-col gap-2 max-h-[55vh] overflow-y-auto"> {MODULES.map(m=>{ const on=enabled.includes(m.id); return <button key={m.id} onClick={()=>setEnabled(on?enabled.filter(x=>x!==m.id):[...enabled,m.id])} className="press flex items-center gap-3 bg-white/[.05] border border-white/[.08] rounded-2xl px-4 py-3 text-left"> <span className={on?'text-river2':'text-dim'}><Ic n={m.icon} s={16}/></span> <b className={`text-[12.5px] flex-1 ${on?'':'text-dim'}`}>{m.title}</b> <span className={`w-11 h-6 rounded-full p-[3px] transition-colors ${on?'bg-river':'bg-white/15'}`}> <i className={`block w-[18px] h-[18px] rounded-full bg-white shadow transition-transform ${on?'translate-x-5':''}`}/> </span> </button>;})} </div> <p className="font-mono text-[8px] text-dim tracking-[1px] mt-4 text-center">TU CONFIGURACIÓN SE GUARDA AUTOMÁTICAMENTE</p> </div> </div>; } /* ============ SEARCH FULLSCREEN ============ */ function SearchOverlay({open,onClose,onGo}){ const [q,setQ]=useState(''); const inRef=useRef(); useEffect(()=>{if(open){setQ('');setTimeout(()=>inRef.current&&inRef.current.focus(),80);}},[open]); if(!open)return null; const ql=q.trim().toLowerCase(); const res=MODULES.filter(m=>!ql||m.title.toLowerCase().includes(ql)); return <div className="fixed inset-0 z-[95] flex flex-col" style={{animation:'sheetUp .3s cubic-bezier(.22,1,.36,1) both'}}> <div className="absolute inset-0 bg-black/80 backdrop-blur-xl" onClick={onClose}/> <div className="relative flex flex-col h-full px-4 md:px-8 pt-6 md:pt-16 pb-10 max-w-[820px] w-full mx-auto safe-b"> <div className="glass-deep rounded-glass flex items-center gap-3 px-5 py-4"> <span className="text-river2"><Ic n="search" s={20}/></span> <input ref={inRef} value={q} onChange={e=>setQ(e.target.value)} placeholder="Buscar módulos, secciones, herramientas…" className="flex-1 bg-transparent text-[17px] md:text-[20px] font-semibold outline-none placeholder:text-dim min-w-0"/> <button onClick={onClose} className="press w-9 h-9 rounded-full glass grid place-items-center text-mut hover:text-ink flex-none"><Ic n="x" s={16}/></button> </div> <div className="mt-4 flex flex-col gap-2 overflow-y-auto"> <span className="font-mono text-[9px] tracking-[2px] text-mut px-1 mt-2">{ql?`${res.length} RESULTADO(S)`:'TODOS LOS MÓDULOS'}</span> {res.map(m=>( <button key={m.id} onClick={()=>{onGo(m.id);onClose();}} className="press glass rounded-2xl flex items-center gap-3.5 px-4 py-3.5 text-left"> <span className="w-10 h-10 rounded-xl grid place-items-center text-river2 flex-none" style={{background:'rgba(224,30,47,.12)',border:'1px solid rgba(224,30,47,.3)'}}><Ic n={m.icon} s={17}/></span> <b className="text-[14px] flex-1">{m.title}</b> <span className="font-mono text-[9px] text-dim tracking-[1px]">IR ↗</span> </button>))} {res.length===0&&<div className="glass rounded-2xl p-8 text-center text-mut text-[13px]">Sin resultados para “{q}”.</div>} </div> </div> </div>; } /* ============ APP ============ */ function App(){ const toast=useContext(ToastCtx); const [enabled,setEnabledRaw]=useState(()=>{const all=MODULES.map(m=>m.id);try{const v=JSON.parse(localStorage.getItem(LS_KEY));if(!Array.isArray(v))return all;return[...v.filter(id=>all.includes(id)),...all.filter(id=>!v.includes(id))];}catch(e){return all;}}); const setEnabled=v=>{setEnabledRaw(v);try{localStorage.setItem(LS_KEY,JSON.stringify(v));}catch(e){}}; const [cols,setColsRaw]=useState(()=>{try{return JSON.parse(localStorage.getItem('om-panel-cols'))||{};}catch(e){return {};}}); const setCol=(id,n)=>setColsRaw(p=>{const nx={...p,[id]:n};try{localStorage.setItem('om-panel-cols',JSON.stringify(nx));}catch(e){}return nx;}); const [sheet,setSheet]=useState(false); const [search,setSearch]=useState(false); const [notif,setNotif]=useState(false); const [amenu,setAmenu]=useState(false); const [adminAv,setAdminAv]=useState(()=>{try{return localStorage.getItem('om-admin-av')||'';}catch(e){return '';}}); const avRef=useRef(); const pickAv=e=>{const f=e.target.files&&e.target.files[0];if(!f)return;if(f.size>3e6){toast('Imagen muy grande (máx 3MB)');return;}const r=new FileReader();r.onload=()=>{setAdminAv(r.result);try{localStorage.setItem('om-admin-av',r.result);}catch(x){}toast('Avatar actualizado ✔');setAmenu(false);};r.readAsDataURL(f);e.target.value='';}; const [dragId,setDragId]=useState(null); const [clock,setClock]=useState(''); useEffect(()=>{const f=()=>{const d=new Date(),p=n=>String(n).padStart(2,'0');setClock(`${p(d.getDate())}/${p(d.getMonth()+1)}/${d.getFullYear()} · ${p(d.getHours())}:${p(d.getMinutes())} HS`);};f();const t=setInterval(f,30000);return()=>clearInterval(t);},[]); const isRoot=!!(window.OMAdmin&&typeof OMAdmin.isRoot==='function'&&OMAdmin.isRoot()); const mods=enabled.map(id=>MODULES.find(m=>m.id===id)).filter(Boolean).filter(m=>!m.rootOnly||isRoot); const reorder=(toId)=>{if(!dragId||dragId===toId)return;const a=[...enabled];const from=a.indexOf(dragId),to=a.indexOf(toId);if(from<0||to<0)return;a.splice(from,1);a.splice(to,0,dragId);setEnabled(a);}; const navGo=id=>{const el=document.getElementById('mod-'+id);if(el){const y=el.getBoundingClientRect().top+window.scrollY-84;window.scrollTo({top:y,behavior:'smooth'});}else toast('Activá ese módulo desde “Módulos”');}; return <> {/* fondo liquid */} <div className="blob w-[520px] h-[520px] -top-40 -left-32" style={{background:'radial-gradient(circle,#8d0917 0%,transparent 70%)',opacity:.55,animation:'drift1 18s ease-in-out infinite'}}/> <div className="blob w-[420px] h-[420px] top-1/3 -right-32" style={{background:'radial-gradient(circle,#3b1d6e 0%,transparent 70%)',opacity:.5,animation:'drift2 22s ease-in-out infinite'}}/> <div className="blob w-[380px] h-[380px] bottom-0 left-1/3" style={{background:'radial-gradient(circle,#5a4008 0%,transparent 70%)',opacity:.4,animation:'drift1 26s ease-in-out infinite'}}/> {/* topbar glass */} <header className="sticky top-0 z-[60] px-3 md:px-6 pt-3"> <div className="glass-deep rounded-glass flex items-center gap-3 px-4 md:px-5 py-2.5 max-w-[1440px] mx-auto"> <img src="assets/logo-om.webp" alt="OM" className="w-8 h-9 object-contain"/> <div className="leading-tight mr-2"> <b className="font-disp text-[13px] tracking-[1px] block">PANEL SAAS</b> <small className="font-mono text-[7px] tracking-[2px] text-river2">ORGULLO MILLONARIO</small> </div> <nav className="hidden lg:flex items-center gap-1 flex-1 justify-center"> {MODULES.slice(0,7).map(m=>( <button key={m.id} onClick={()=>navGo(m.id)} className="press flex items-center gap-2 px-3.5 py-2 rounded-full text-[11px] font-semibold text-mut hover:text-ink hover:bg-white/[.07] transition-colors"> <Ic n={m.icon} s={13}/>{m.title.split(' ')[0]} </button>))} </nav> <div className="flex items-center gap-2 ml-auto"> <button onClick={()=>{OMDB.save();OMDB.exportBackup();toast('Configuración guardada · respaldo descargado ✔');}} title="Guardar configuración y descargar respaldo" className="press hidden sm:flex items-center gap-1.5 rounded-full glass px-3 h-9 text-[11px] font-bold text-green-400"><Ic n="down" s={13}/>Guardar</button> <button onClick={()=>{const inp=document.createElement('input');inp.type='file';inp.accept='.json,application/json';inp.onchange=e=>{const f=e.target.files&&e.target.files[0];if(!f)return;const r=new FileReader();r.onload=()=>{OMDB.importBackup(r.result)?(toast('Configuración cargada ✔'),setTimeout(()=>location.reload(),700)):toast('JSON inválido');};r.readAsText(f);};inp.click();}} title="Cargar configuración desde un JSON" className="press hidden sm:flex items-center gap-1.5 rounded-full glass px-3 h-9 text-[11px] font-bold text-cyanx"><Ic n="up" s={13}/>Cargar</button> <ThemeToggle/> <button onClick={()=>setSearch(true)} className="press w-9 h-9 rounded-full glass grid place-items-center text-mut hover:text-ink"><Ic n="search" s={15}/></button> <div className="relative"> <button onClick={()=>setNotif(v=>!v)} className="press w-9 h-9 rounded-full glass grid place-items-center text-mut hover:text-ink relative"><Ic n="bell" s={15}/><i className="absolute top-1.5 right-2 w-[6px] h-[6px] rounded-full bg-river2"/></button> {notif&&<><div className="fixed inset-0 z-[70]" onClick={()=>setNotif(false)}/><div className="glass-deep rounded-glass absolute right-0 mt-2 w-[280px] p-3 z-[71]" style={{animation:'sheetUp .25s cubic-bezier(.22,1,.36,1) both'}}> <div className="flex items-center justify-between mb-2 px-1"><b className="font-disp text-[12px] tracking-[1px]">NOTIFICACIONES</b><span className="font-mono text-[7px] text-green-400 tracking-[1px]">EN VIVO</span></div> <div className="flex flex-col gap-1.5"> {(()=>{const u=(window.OMAuth&&OMAuth.users&&OMAuth.users())||[];const k=(window.OMDB&&OMDB.get&&OMDB.get().kpis)||{};return [ ['users','Socios registrados',(u.length||k.socios||0)+' en total','#8b5cf6'], ['ticket','Reservas de viaje',(k.reservas||0)+' activas','#22c55e'], ['eye','Visitas al sitio',(k.visitas||0)+' totales','#5b93ff'], ['gift','Sorteo en curso','Camiseta firmada','#ffcf3e'], ].map(([ic,t,s,cc],i)=>(<div key={i} className="flex items-center gap-2.5 rounded-xl px-2.5 py-2 bg-white/[.04] border border-white/[.06]"><span className="w-7 h-7 rounded-lg grid place-items-center flex-none" style={{color:cc,background:cc+'1e'}}><Ic n={ic} s={14}/></span><div className="min-w-0 flex-1"><b className="text-[11px] block truncate">{t}</b><small className="font-mono text-[8px] text-mut">{s}</small></div></div>));})()} </div> </div></>} </div> <button onClick={()=>setSheet(true)} className="press hidden md:flex items-center gap-2 px-4 py-2 rounded-full text-[11px] font-bold text-white" style={{background:'linear-gradient(160deg,#ff2e3e,#8d0917)',boxShadow:'0 8px 24px -6px rgba(224,30,47,.6)'}}><Ic n="grid" s={13}/>Módulos</button> <div className="relative"> <input ref={avRef} type="file" accept="image/*" onChange={pickAv} className="hidden"/> <button onClick={()=>setAmenu(v=>!v)} title="Cuenta de admin" className="press w-9 h-9 rounded-full grid place-items-center overflow-hidden font-disp font-bold text-[14px] text-gold2 border-2 border-river" style={{background:'radial-gradient(circle at 35% 30%,#3a3a44,#17171c)'}}>{adminAv?<img src={adminAv} alt="" className="w-full h-full object-cover"/>:'A'}</button> {amenu&&<><div className="fixed inset-0 z-[70]" onClick={()=>setAmenu(false)}/><div className="glass-deep rounded-glass absolute right-0 mt-2 w-[220px] p-2 z-[71]" style={{animation:'sheetUp .25s cubic-bezier(.22,1,.36,1) both'}}> <div className="flex items-center gap-2.5 px-2 py-2 mb-1"> <span className="w-10 h-10 rounded-full grid place-items-center overflow-hidden font-disp font-bold text-[15px] text-gold2 border-2 border-river flex-none" style={{background:'radial-gradient(circle at 35% 30%,#3a3a44,#17171c)'}}>{adminAv?<img src={adminAv} alt="" className="w-full h-full object-cover"/>:'A'}</span> <div className="min-w-0"><b className="text-[12px] block">Administrador</b><small className="font-mono text-[7.5px] text-green-400 tracking-[1px]">● SESIÓN ACTIVA</small></div> </div> <button onClick={()=>avRef.current.click()} className="press w-full flex items-center gap-2.5 rounded-xl px-2.5 py-2.5 text-[11.5px] font-semibold text-mut hover:text-ink hover:bg-white/[.06]"><Ic n="eye" s={14}/> Cambiar avatar</button> {adminAv&&<button onClick={()=>{setAdminAv('');try{localStorage.removeItem('om-admin-av');}catch(x){}toast('Avatar quitado');}} className="press w-full flex items-center gap-2.5 rounded-xl px-2.5 py-2.5 text-[11.5px] font-semibold text-mut hover:text-ink hover:bg-white/[.06]"><Ic n="trash" s={14}/> Quitar avatar</button>} <button onClick={()=>{OMAdmin.logout();location.reload();}} className="press w-full flex items-center gap-2.5 rounded-xl px-2.5 py-2.5 text-[11.5px] font-semibold text-river2 hover:bg-river/10"><Ic n="x" s={14}/> Cerrar sesión</button> </div></>} </div> </div> </div> </header> {/* grid de módulos */} <main className="relative z-10 px-3 md:px-6 py-4 pb-40 md:pb-24 max-w-[1440px] mx-auto grid gap-3 md:gap-4 items-stretch auto-rows-min" style={{gridTemplateColumns:'repeat('+(window.innerWidth<768?1:Math.min(3,Math.max(1,mods.length)))+',minmax(0,1fr))'}}> {(()=>{const gridN=window.innerWidth<768?1:Math.min(3,Math.max(1,mods.length));return mods.map((m,i)=>{ const span=Math.min(gridN,Math.max(1,cols[m.id]||1)); const ColCtl=gridN>1?<div className="hidden md:flex items-center gap-0.5 mr-1"> {[1,2,3].slice(0,gridN).map(n=><button key={n} onClick={e=>{e.stopPropagation();setCol(m.id,n);}} title={n+' columna'+(n>1?'s':'')} className={`press w-5 h-5 rounded grid place-items-center text-[8px] font-mono ${span===n?'bg-river text-white':'text-dim hover:text-ink'}`} style={span===n?{}:{background:'rgba(255,255,255,.06)'}}>{n}</button>)} </div>:null; return m.bare ?<div key={m.id} id={'mod-'+m.id} draggable onDragStart={()=>setDragId(m.id)} onDragEnd={()=>setDragId(null)} onDragOver={e=>{e.preventDefault();reorder(m.id);}} className={`relative rise ${dragId===m.id?'opacity-50':''}`} style={{animationDelay:i*60+'ms',gridColumn:'span '+span}}>{gridN>1&&<div className="hidden md:flex items-center gap-0.5 absolute top-2 right-2 z-20 rounded-lg px-1 py-0.5" style={{background:'rgba(10,10,14,.6)',backdropFilter:'blur(6px)'}}>{[1,2,3].slice(0,gridN).map(n=><button key={n} onClick={e=>{e.stopPropagation();setCol(m.id,n);}} title={n+' columna'+(n>1?'s':'')} className={`press w-5 h-5 rounded grid place-items-center text-[8px] font-mono ${span===n?'bg-river text-white':'text-dim hover:text-ink'}`} style={span===n?{}:{background:'rgba(255,255,255,.06)'}}>{n}</button>)}</div>}<m.C/></div> :<section key={m.id} id={'mod-'+m.id} onDragOver={e=>{e.preventDefault();reorder(m.id);}} className={`glass rounded-glass p-5 flex flex-col h-full rise ${dragId===m.id?'opacity-50 ring-2 ring-river':''}`} style={{animationDelay:i*60+'ms',gridColumn:'span '+span}}> <div draggable onDragStart={()=>setDragId(m.id)} onDragEnd={()=>setDragId(null)} className="flex items-center gap-2.5 mb-4 cursor-grab active:cursor-grabbing"> <span className="w-8 h-8 rounded-xl grid place-items-center text-river2" style={{background:'rgba(224,30,47,.12)',border:'1px solid rgba(224,30,47,.3)'}}><Ic n={m.icon} s={15}/></span> <b className="font-disp text-[14px] tracking-[1.5px] flex-1">{m.title.toUpperCase()}</b> {ColCtl} <span className="text-dim"><Ic n="drag" s={15}/></span> </div> <m.C/> </section>;});})()} {mods.length===0&&<div className="col-span-full glass rounded-glass p-10 text-center text-mut text-[13px]">No hay módulos activos. Tocá <b className="text-ink">Módulos</b> para activarlos.</div>} </main> {/* footer */} <footer className="relative z-10 hidden md:flex items-center gap-5 px-6 pb-4 max-w-[1440px] mx-auto font-mono text-[8px] tracking-[1px] text-dim"> <span>ORGULLO MILLONARIO ® 2026</span><span>PANEL SAAS v3.0 · LIQUID</span> <span className="text-green-400">SERVIDORES: ONLINE ●</span><span className="ml-auto">ACTUALIZADO: {clock}</span> </footer> {/* tab bar móvil */} <nav className="lg:hidden fixed bottom-3 inset-x-3 z-[70] safe-b"> <div className="glass-deep rounded-glass flex items-center justify-around px-2 py-2"> {[['kpi','dash','Inicio'],['figus','card','Figus'],['squad','squad','Plantel'],['sorteo','gift','Sorteos']].map(([id,ic,l])=>( <button key={id} onClick={()=>navGo(id)} className="press flex flex-col items-center gap-1 px-4 py-1.5 rounded-2xl text-mut hover:text-ink"> <Ic n={ic} s={19}/><small className="font-mono text-[7px] tracking-[1px]">{l}</small> </button>))} <button onClick={()=>setSheet(true)} className="press flex flex-col items-center gap-1 px-4 py-1.5 rounded-2xl text-white"> <span className="w-[26px] h-[26px] -my-[3px] rounded-full grid place-items-center" style={{background:'linear-gradient(160deg,#ff2e3e,#8d0917)',boxShadow:'0 6px 18px -4px rgba(224,30,47,.7)'}}><Ic n="grid" s={13}/></span> <small className="font-mono text-[7px] tracking-[1px]">Módulos</small> </button> </div> </nav> <ModuleSheet open={sheet} onClose={()=>setSheet(false)} enabled={enabled} setEnabled={setEnabled}/> <SearchOverlay open={search} onClose={()=>setSearch(false)} onGo={navGo}/> </>; } /* ============ THEME TOGGLE (dentro del menú) ============ */ function ThemeToggle(){ const [t,setT]=useState(()=>(window.omGetTema?window.omGetTema():'dark')); useEffect(()=>{const h=e=>setT(e.detail);window.addEventListener('om-tema',h);return()=>window.removeEventListener('om-tema',h);},[]); const toggle=()=>{const nt=window.omToggleTema?window.omToggleTema():(t==='dark'?'light':'dark');setT(nt);}; return <button onClick={toggle} title="Tema claro / oscuro" className="press w-9 h-9 rounded-full glass grid place-items-center text-gold2 hover:text-ink"><Ic n={t==='light'?'moon':'sun'} s={15}/></button>; } /* ============ ADMIN LOGIN (privado) ============ */ function AdminLogin({onOk}){ const [mode,setMode]=useState('login'); const [email,setEmail]=useState('');const [pass,setPass]=useState('');const [show,setShow]=useState(false); const [code,setCode]=useState('');const [pass2,setPass2]=useState(''); const [err,setErr]=useState('');const [ok,setOk]=useState('');const [loading,setLoading]=useState(false); const submit=async()=>{setErr('');setLoading(true);const r=await OMAdmin.login(email,pass);if(r.ok){onOk();}else{setErr(r.error);setLoading(false);}}; const activar=async()=>{setErr('');setOk('');if(pass!==pass2){setErr('Las contraseñas no coinciden');return;}setLoading(true);const r=await OMAdmin.activar(email,code,pass);setLoading(false);if(r.ok){setOk('¡Cuenta activada! Ya podés ingresar.');setMode('login');setPass('');setPass2('');setCode('');}else setErr(r.error);}; return <div className="relative min-h-[100dvh] grid place-items-center px-4"> <div className="blob w-[520px] h-[520px] -top-40 -left-32" style={{background:'radial-gradient(circle,#8d0917,transparent 70%)',opacity:.5,animation:'drift1 18s ease-in-out infinite'}}/> <div className="blob w-[420px] h-[420px] bottom-0 -right-32" style={{background:'radial-gradient(circle,#3b1d6e,transparent 70%)',opacity:.45,animation:'drift2 22s ease-in-out infinite'}}/> <div className="glass-deep relative rounded-glass w-full max-w-[400px] p-7 md:p-8 rise"> <div className="flex flex-col items-center text-center mb-6"> <img src="assets/logo-om.webp" alt="OM" className="w-14 h-14 object-contain mb-3"/> <b className="font-disp text-[22px] tracking-[1px]">PANEL SAAS · PRIVADO</b> <small className="font-mono text-[8px] tracking-[2px] text-river2 mt-1">ACCESO SOLO ADMINISTRADORES</small> </div> {ok&&<div className="text-[12px] text-green-400 bg-green-500/10 border border-green-500/30 rounded-xl px-3 py-2 mb-3">{ok}</div>} {mode==='login'?<div className="flex flex-col gap-3"> <Fld icon="eye" type="email" autoComplete="username" value={email} onChange={e=>setEmail(e.target.value)} onKeyDown={e=>e.key==='Enter'&&submit()} placeholder="Correo de administrador"/> <label className="flex items-center gap-3 bg-white/[.06] border border-white/12 rounded-2xl px-4 py-3.5 focus-within:border-river/60 transition-colors"> <span className="text-mut flex-none"><Ic n="grid" s={16}/></span> <input type={show?'text':'password'} autoComplete="current-password" value={pass} onChange={e=>setPass(e.target.value)} onKeyDown={e=>e.key==='Enter'&&submit()} placeholder="Contraseña" className="flex-1 bg-transparent text-[14px] outline-none placeholder:text-dim min-w-0"/> <button type="button" onClick={()=>setShow(!show)} className="press text-mut hover:text-ink flex-none text-[11px] font-mono">{show?'OCULTAR':'VER'}</button> </label> {err&&<div className="text-[12px] text-river2 bg-river/10 border border-river/30 rounded-xl px-3 py-2">{err}</div>} <button onClick={submit} disabled={loading} className="press rounded-2xl py-3.5 text-[14px] font-bold text-white mt-1" style={{background:'linear-gradient(160deg,#ff2e3e,#8d0917)',boxShadow:'0 12px 30px -8px rgba(224,30,47,.6)'}}>{loading?'Verificando…':'INGRESAR AL PANEL'}</button> <button onClick={()=>{setMode('activar');setErr('');}} className="press font-mono text-[10px] text-mut hover:text-ink tracking-[1px] mt-1">¿Te invitaron? ACTIVÁ TU CUENTA →</button> </div>:<div className="flex flex-col gap-3"> <div className="font-mono text-[9px] tracking-[2px] text-gold2 text-center mb-1">ACTIVAR CUENTA DE ADMIN</div> <Fld icon="eye" type="email" value={email} onChange={e=>setEmail(e.target.value)} placeholder="Tu correo (el que te invitaron)"/> <Fld icon="grid" value={code} onChange={e=>setCode(e.target.value)} placeholder="Código de invitación (6 dígitos)"/> <Fld icon="grid" type="password" value={pass} onChange={e=>setPass(e.target.value)} placeholder="Creá tu contraseña (6+)"/> <Fld icon="grid" type="password" value={pass2} onChange={e=>setPass2(e.target.value)} placeholder="Repetí la contraseña"/> {err&&<div className="text-[12px] text-river2 bg-river/10 border border-river/30 rounded-xl px-3 py-2">{err}</div>} <button onClick={activar} disabled={loading} className="press rounded-2xl py-3.5 text-[14px] font-bold text-white mt-1" style={{background:'linear-gradient(160deg,#22c55e,#0f7a3d)'}}>{loading?'Activando…':'ACTIVAR Y CREAR CONTRASEÑA'}</button> <button onClick={()=>{setMode('login');setErr('');}} className="press font-mono text-[10px] text-mut hover:text-ink tracking-[1px] mt-1">← VOLVER AL INGRESO</button> </div>} <p className="font-mono text-[8px] text-dim tracking-[1px] mt-5 text-center">🔒 Sesión cifrada · las credenciales nunca se almacenan en claro</p> </div> </div>; } function AdminGate(){ const [authed,setAuthed]=useState(()=>!!(window.OMAdmin&&typeof OMAdmin.isAuthed==='function'&&OMAdmin.isAuthed())); if(!authed) return <AdminLogin onOk={()=>setAuthed(true)}/>; return <App/>; } ReactDOM.createRoot(document.getElementById('root')).render(<ToastHost><AdminGate/></ToastHost>);