const gwapS={scr:{padding:'8px 16px 0',display:'grid',gap:16,alignContent:'start',fontFamily:'var(--font-sans)',color:'var(--text-primary)'},tabs:{display:'flex',background:'var(--gray-100)',borderRadius:999,padding:4},tab:on=>({flex:1,textAlign:'center',padding:'8px',borderRadius:999,fontSize:13,fontWeight:on?700:400,background:on?'#fff':'transparent',boxShadow:on?'var(--shadow-card)':'none'}),bal:{background:'var(--blue-deep)',color:'#fff',borderRadius:16,padding:18,display:'grid',gap:6,position:'relative',overflow:'hidden'},acts:{display:'grid',gridTemplateColumns:'repeat(3,1fr)',gap:8,textAlign:'center',fontSize:12},ic:{width:44,height:44,borderRadius:'50%',background:'var(--gray-100)',margin:'0 auto 6px',display:'grid',placeItems:'center',color:'var(--blue-primary)'},tx:{display:'flex',justifyContent:'space-between',alignItems:'center',borderBottom:'1px solid var(--border-subtle)',padding:'10px 0',fontSize:13}};
const Ic=d=><svg viewBox="0 0 24 24" width="20" height="20" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round"><path d={d}/></svg>;
function GwapScreen(){return <div style={gwapS.scr}>
<div><b style={{fontSize:20,display:'block'}}>Hola, Carlos</b><span style={{color:'var(--text-muted)',fontSize:13}}>¿Cómo estás hoy?</span></div>
<div style={gwapS.tabs}><span style={gwapS.tab(true)}>USD Wallet</span><span style={gwapS.tab(false)}>XCO Wallet</span></div>
<div style={gwapS.bal}><img src="assets/isotipo-b-white.png" alt="" style={{position:'absolute',right:14,top:14,width:44,opacity:.9}}/><span style={{opacity:.8,fontSize:13}}>Saldo disponible</span><b style={{fontFamily:'var(--font-mono)',fontSize:26,color:'var(--amber-token)',fontWeight:600}}>$7.43 USD</b><span style={{fontSize:12,opacity:.7,marginTop:8}}>Debit •••• 8831</span></div>
<div style={gwapS.acts}><div><div style={gwapS.ic}>{Ic('M12 19V5M5 12l7-7 7 7')}</div>Enviar</div><div><div style={gwapS.ic}>{Ic('M12 5v14M19 12l-7 7-7-7')}</div>Recibir</div><div><div style={gwapS.ic}>{Ic('M2 8h20M2 6a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2z')}</div>Mis tarjetas</div></div>
<div><div style={{display:'flex',justifyContent:'space-between',fontSize:13,marginBottom:4}}><b>Transacciones <span style={{color:'var(--text-muted)',fontWeight:400}}>USD</span></b><a href="#">Ocultar</a></div>
{[['RAPI**VERF $0.50','+ $0.50',1],['Reversal RAPI**VERF','+ $0.50',1],['RAPI**VERF $0.50','− $0.50',0],['Bantokens · venta tokens','+ $250.00',1]].map(([n,v,p],i)=><div key={i} style={gwapS.tx}><span>{n}</span><b style={{fontFamily:'var(--font-mono)',fontWeight:600,color:p?'#2f9e44':'var(--text-primary)'}}>{v}</b></div>)}</div>
</div>}
function GwapPhone(){return <div style={{transform:'scale(.55)',transformOrigin:'top right',position:'absolute',right:0,top:110}}><IOSDevice>{<GwapScreen/>}</IOSDevice></div>}
ReactDOM.createRoot(document.getElementById('phone')).render(<GwapPhone/>);