// desktop.jsx — Desktop shell: Sidebar, Topbar, HomeDesktop, CuentasDesktop, CierreDesktop
const { useState: dS, useEffect: dE, useRef: dR, useMemo: dM } = React;
const seed  = window.SisyphusSeed;
const S     = window.S;
const DIcon = window.Icon;

// Safe store hook - always called unconditionally
function useStore() { return window.useSisyStore(); }

// ── Design primitives ────────────────────────────────────────────────────────
function DPanel({ title, sub, action, children, style }) {
  return (
    <div className="card-hov" style={{ background:'var(--card)', border:'1px solid var(--border)', borderRadius:16, padding:'18px 20px', transition:'transform 0.18s, box-shadow 0.18s', ...style }}>
      {(title || action) && (
        <div style={{ display:'flex', alignItems:'baseline', justifyContent:'space-between', marginBottom:sub?4:14 }}>
          {title && <div style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:16, fontWeight:600, letterSpacing:'-0.01em' }}>{title}</div>}
          {action && <button onClick={action.onClick} style={{ fontSize:12, color:'var(--accent-bright)', background:'none', border:'none', cursor:'pointer', fontFamily:'inherit', fontWeight:600, display:'flex', alignItems:'center', gap:4 }}>{action.label} <DIcon name="chevRight" size={12} /></button>}
        </div>
      )}
      {sub && <div style={{ fontSize:12, color:'var(--text-3)', marginBottom:14 }}>{sub}</div>}
      {children}
    </div>
  );
}

function DHeading({ title, sub }) {
  return (
    <div style={{ marginBottom:16 }}>
      <div style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:22, fontWeight:600, letterSpacing:'-0.02em' }}>{title}</div>
      {sub && <div style={{ fontSize:13, color:'var(--text-3)', marginTop:3 }}>{sub}</div>}
    </div>
  );
}

// ── Sidebar ──────────────────────────────────────────────────────────────────
function Sidebar({ tab, onTab, profilePhoto, userName, onOpenAdd, onOpenSettings }) {
  const items = [
    { id:'home',       label:'Resumen',      icon:'home' },
    { id:'movimientos',label:'Movimientos',   icon:'cards' },
    { id:'pagos',      label:'Pagos',         icon:'calendar' },
    { id:'analisis',   label:'Análisis',      icon:'pie' },
    { id:'cuentas',    label:'Cuentas',       icon:'wallet' },
    { id:'cierre',     label:'Cierre de mes', icon:'archive' },
  ];

  return (
    <aside style={{
      width:240, flexShrink:0, height:'100dvh', display:'flex', flexDirection:'column',
      borderRight:'1px solid var(--border)', padding:'20px 12px', gap:4,
      background:'rgba(8,5,15,0.98)', position:'sticky', top:0,
    }}>
      {/* Logo */}
      <div style={{ display:'flex', alignItems:'center', gap:10, padding:'4px 8px 20px' }}>
        {window.SisyphusLogoMark
          ? React.createElement(window.SisyphusLogoMark, { size: 28 })
          : <div style={{ width:28, height:28, borderRadius:8, background:'linear-gradient(145deg,#c4b5fd,#7c3aed)' }} />}
        <span style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:17, fontWeight:700, letterSpacing:'-0.02em' }}>Sisyphus<span style={{ color:'var(--accent)' }}>.</span></span>
      </div>

      <div style={{ fontSize:10, color:'var(--text-3)', textTransform:'uppercase', letterSpacing:'0.12em', fontWeight:700, padding:'0 8px 6px' }}>Menú</div>

      {/* Nav items */}
      {items.map(it => {
        const active = tab === it.id;
        return (
          <button key={it.id} onClick={() => onTab(it.id)} style={{
            display:'flex', alignItems:'center', gap:10, padding:'10px 12px', borderRadius:10,
            background: active ? 'var(--accent-dim)' : 'transparent',
            color: active ? 'var(--accent-bright)' : 'var(--text-2)',
            border:`1px solid ${active ? 'var(--border-strong)' : 'transparent'}`,
            fontFamily:'inherit', fontSize:13.5, fontWeight: active ? 600 : 500,
            cursor:'pointer', textAlign:'left', width:'100%', transition:'all 0.13s',
          }}>
            <DIcon name={it.icon} size={16} strokeWidth={active ? 2.2 : 1.8} />
            {it.label}
            {active && <div style={{ width:5, height:5, borderRadius:'50%', background:'var(--accent-bright)', marginLeft:'auto' }} />}
          </button>
        );
      })}

      <div style={{ flex:1 }} />

      {/* Close month shortcut */}
      <button onClick={() => onTab('cierre')} style={{
        display:'flex', alignItems:'center', gap:10, padding:'10px 12px', borderRadius:10, width:'100%',
        background: tab==='cierre' ? 'var(--accent-dim)' : 'rgba(99,102,241,0.07)',
        border:`1px solid ${tab==='cierre' ? 'var(--border-strong)' : 'rgba(99,102,241,0.2)'}`,
        color: tab==='cierre' ? 'var(--accent-bright)' : '#818cf8',
        fontFamily:'inherit', fontSize:12.5, fontWeight:600, cursor:'pointer', marginBottom:12, transition:'all 0.13s',
      }}>
        <DIcon name="archive" size={14} /> Cerrar el mes
      </button>

      {/* Profile */}
      <button onClick={() => onOpenSettings ? onOpenSettings() : onTab('config')} style={{
        display:'flex', alignItems:'center', gap:10, padding:'10px 12px', borderRadius:10, width:'100%',
        background:'transparent', border:'1px solid transparent', cursor:'pointer', fontFamily:'inherit', transition:'all 0.13s',
      }}
        onMouseEnter={e => e.currentTarget.style.background='rgba(255,255,255,0.04)'}
        onMouseLeave={e => e.currentTarget.style.background='transparent'}
      >
        <div style={{ width:32, height:32, borderRadius:'50%', background: profilePhoto ? 'transparent' : 'linear-gradient(145deg, var(--accent-bright), var(--accent-deep))', overflow:'hidden', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--on-accent)', fontWeight:700, fontSize:13, flexShrink:0 }}>
          {profilePhoto ? <img src={profilePhoto} style={{ width:'100%', height:'100%', objectFit:'cover' }} alt="p" /> : (userName||'A').charAt(0).toUpperCase()}
        </div>
        <div style={{ flex:1, minWidth:0, textAlign:'left' }}>
          <div style={{ fontSize:13, fontWeight:600, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap', color:'var(--text)' }}>{userName || 'Adolfo'}</div>
          <div style={{ fontSize:11, color:'var(--text-3)' }}>adolfo@sisyphus.app</div>
        </div>
        <DIcon name="settings" size={13} style={{ color:'var(--text-3)', flexShrink:0 }} />
      </button>
    </aside>
  );
}

// ── Topbar ───────────────────────────────────────────────────────────────────
function Topbar({ title, sub, tab, ccy, onCcy, onNotif, notifCount, onCalc, onAdd, monthLabel, onMonthSelect, selectedMonthIdx }) {
  const [monthOpen, setMonthOpen] = dS(false);
  const months = (() => {
    const arr = [];
    const now = new Date();
    for (let i = 0; i < 12; i++) {
      const d = new Date(now.getFullYear(), now.getMonth() - i, 1);
      arr.push({ label: d.toLocaleDateString('es-AR', { month:'long', year:'numeric' }).replace(' de ', ' ').replace(/^\w/, c => c.toUpperCase()), idx: i });
    }
    return arr;
  })();
  return (
    <div style={{
      height:64, flexShrink:0, display:'flex', alignItems:'center', justifyContent:'space-between',
      padding:'0 28px', borderBottom:'1px solid var(--border)',
      background:'rgba(8,5,15,0.92)', backdropFilter:'blur(20px)', position:'sticky', top:0, zIndex:850,
    }}>
      <div>
        <div style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:18, fontWeight:600, letterSpacing:'-0.01em' }}>{title}</div>
        {sub && <div style={{ fontSize:11.5, color:'var(--text-3)', marginTop:1 }}>{sub}</div>}
      </div>
      <div style={{ display:'flex', alignItems:'center', gap:8 }}>
        {/* Current month label (read-only) */}
        <div style={{ display:'flex', alignItems:'center', gap:6, padding:'7px 12px', borderRadius:10, background:'rgba(255,255,255,0.04)', border:'1px solid var(--border)', fontSize:12.5, fontWeight:600, color:'var(--text-2)' }}>
          <DIcon name="calendar" size={13} /> {monthLabel || new Date().toLocaleDateString('es-AR', { month:'long', year:'numeric' }).replace(' de ',' ').replace(/^\w/,c=>c.toUpperCase())}
        </div>
        {/* Currency toggle */}
        <button onClick={onCcy} style={{ display:'flex', alignItems:'center', gap:6, padding:'7px 12px', borderRadius:10, background:'rgba(255,255,255,0.04)', border:'1px solid var(--border)', fontSize:12.5, fontWeight:600, color:'var(--text-2)', cursor:'pointer', fontFamily:'inherit', transition:'all 0.13s' }}>
          <DIcon name="exchange" size={13} /> {ccy}
        </button>
        {/* CSV export */}
        <button onClick={() => window.SisExport?.csv?.()}
          style={{ width:36, height:36, borderRadius:10, background:'rgba(255,255,255,0.04)', border:'1px solid var(--border)', color:'var(--text-2)', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', transition:'all 0.13s' }}
          title="Exportar movimientos CSV">
          <DIcon name="arrowDown" size={15} />
        </button>
        {/* Calculator */}
        <button onClick={onCalc} style={{ width:36, height:36, borderRadius:10, background:'rgba(255,255,255,0.04)', border:'1px solid var(--border)', color:'var(--text-2)', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', transition:'all 0.13s' }}
          title="Calculadora">
          <DIcon name="dollar" size={15} />
        </button>
        {/* Notifications */}
        <button onClick={onNotif} style={{ width:36, height:36, borderRadius:10, background:'rgba(255,255,255,0.04)', border:'1px solid var(--border)', color:'var(--text-2)', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', position:'relative', transition:'all 0.13s' }}>
          <DIcon name="bell" size={15} />
          {notifCount > 0 && <span style={{ position:'absolute', top:6, right:7, width:7, height:7, borderRadius:'50%', background:'var(--accent)', boxShadow:'0 0 6px var(--accent-glow)' }} />}
        </button>
        {/* New expense */}
        <button onClick={onAdd} style={{ display:'flex', alignItems:'center', gap:7, padding:'8px 16px', borderRadius:10, background:'linear-gradient(145deg, var(--accent-bright), var(--accent-deep))', color:'var(--on-accent)', border:'none', cursor:'pointer', fontFamily:'inherit', fontSize:13, fontWeight:600, boxShadow:'0 4px 16px var(--accent-glow)', transition:'all 0.14s' }}>
          <DIcon name="plus" size={14} strokeWidth={2.5} /> Nuevo gasto
        </button>
      </div>
    </div>
  );
}

// ── HomeDesktop ──────────────────────────────────────────────────────────────
function HomeDesktop({ ccy, spentState, budgets, extraIngresos, paidPagos, onTogglePaid, onNav, userName, cuotasGrupos, movimientos, confirmedIngs, onConfirmIngreso, onOpenCloseMonth, extraPagos, collectedDeudores, metas = [], onAddMeta, onUpdateMeta, onDeleteMeta }) {
  const { movs = [] } = useStore();
  const _seen = new Set((movimientos||[]).map(m=>m.id));
  const allMovs = [...(movimientos || []), ...movs.filter(m => !_seen.has(m.id))];
  const conv = n => ccy === 'USD' ? n / seed.fxBlue : n;
  const fmt  = n => S.fmtMoney(conv(n), ccy);
  const t    = S.monthlyTotals(spentState, budgets, extraIngresos);
  const r    = S.runway(spentState, budgets, extraIngresos);
  const dist = S.distribucion(spentState, budgets);
  const DonutPane = window.DonutPane;

  const paid = paidPagos || new Set();
  const collected = collectedDeudores || new Set();
  const allPagos = [...(seed.pagos || []), ...(extraPagos || [])];
  const pendingPagos = allPagos.filter(p => !paid.has(p.id)).sort((a,b) => new Date(a.due||'9999') - new Date(b.due||'9999'));

  const totalEgr = dist.filter(d => !['ahorroUSD','inversion','emergencia'].includes(d.id)).reduce((a,b) => a+b.spent, 0);

  return (
    <div style={{ display:'grid', gridTemplateColumns:'1fr 360px', gap:24, padding:'28px 28px 44px', maxWidth:1280, margin:'0 auto', alignItems:'start' }}>
      {/* LEFT */}
      <div style={{ display:'flex', flexDirection:'column', gap:20 }}>
        {/* Hero card */}
        <div className="si-0" style={{ padding:'24px 26px', borderRadius:18, background:'var(--card)', border:'1px solid var(--border)', position:'relative', overflow:'hidden', transition:'transform 0.18s, box-shadow 0.18s' }}>
          <div style={{ position:'absolute', inset:0, background:'radial-gradient(60% 50% at 90% 10%, rgba(139,92,246,0.18), transparent)', pointerEvents:'none' }} />
          <div style={{ fontSize:10.5, color:'var(--accent-bright)', textTransform:'uppercase', letterSpacing:'0.14em', fontWeight:700, display:'flex', alignItems:'center', gap:6, marginBottom:10 }}>
            <span style={{ width:6, height:6, borderRadius:'50%', background:'var(--accent-bright)', display:'inline-block' }} /> Te queda este mes
          </div>
          <div style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:48, fontWeight:700, letterSpacing:'-0.04em', lineHeight:1 }}>
            {window.AnimatedNumber
              ? React.createElement(window.AnimatedNumber, { value: r.restante, format: fmt, duration: 600 })
              : fmt(r.restante)}
          </div>
          <div style={{ fontSize:13, color:'var(--text-2)', marginTop:10 }}>
            de <strong style={{ color:'var(--text)' }}>{fmt(t.ingTotal)}</strong> ingresados · quedan <strong style={{ color:'var(--text)' }}>{r.remainingDays} días</strong> de {new Date().toLocaleDateString('es-AR',{month:'long'})}
          </div>
          {/* Progress bar */}
          <div style={{ marginTop:14, height:4, background:'rgba(255,255,255,0.06)', borderRadius:999 }}>
            <div style={{ height:'100%', width:`${Math.min(new Date().getDate()/r.daysInMonth*100,100).toFixed(0)}%`, background:'linear-gradient(90deg, var(--accent-deep), var(--accent-bright))', borderRadius:999, transition:'width 0.6s' }} />
          </div>
          <div style={{ display:'flex', justifyContent:'space-between', marginTop:6, fontSize:10.5, color:'var(--text-3)' }}>
            <span>Día {new Date().getDate()}/{r.daysInMonth}</span>
            <span>{Math.round(new Date().getDate()/r.daysInMonth*100)}% del mes</span>
          </div>
          {/* Forecast */}
          {r.forecastNeto != null && (
            <div style={{ marginTop:14, padding:'10px 14px', borderRadius:11, background: r.forecastNeto >= 0 ? 'rgba(139,92,246,0.1)' : 'rgba(248,113,113,0.1)', border:`1px solid ${r.forecastNeto >= 0 ? 'rgba(139,92,246,0.2)' : 'rgba(248,113,113,0.2)'}`, display:'flex', alignItems:'center', gap:12 }}>
              <div style={{ width:28, height:28, borderRadius:8, background: r.forecastNeto >= 0 ? 'var(--accent-dim)' : 'rgba(248,113,113,0.15)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                <DIcon name={r.forecastNeto >= 0 ? 'trend' : 'arrowDown'} size={13} style={{ color: r.forecastNeto >= 0 ? 'var(--accent-bright)' : '#f87171' }} />
              </div>
              <div>
                <div style={{ fontSize:10, textTransform:'uppercase', letterSpacing:'0.1em', fontWeight:700, color:'var(--text-3)' }}>Pronóstico fin de mes</div>
                <div style={{ fontSize:13, fontWeight:500, color:'var(--text-2)', marginTop:2 }}>
                  Tras pagar tus vencimientos terminás con <strong style={{ color: r.forecast >= 0 ? 'var(--accent-bright)' : '#f87171', fontFamily:'Space Grotesk, sans-serif' }}>{fmt(r.forecastNeto)}</strong>
                </div>
              </div>
              <button onClick={() => onNav('cierre')} style={{ marginLeft:'auto', padding:'6px 12px', borderRadius:8, background:'rgba(255,255,255,0.06)', border:'1px solid var(--border)', color:'var(--text-2)', cursor:'pointer', fontFamily:'inherit', fontSize:11.5, fontWeight:600, display:'flex', alignItems:'center', gap:6, flexShrink:0 }}>
                <DIcon name="archive" size={11} /> Cerrar mes
              </button>
            </div>
          )}
        </div>

        {/* Próximos pagos */}
        <div className="si-1">
        <DPanel title="Próximos pagos" sub="Vencimientos del mes" action={{ label:'Ver todos', onClick:() => onNav('pagos') }}>
          <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
            {pendingPagos.slice(0,6).map(p => {
              const cat = seed.catPorId[p.cat];
              const ds  = S.dueState(p.due);
              const dl  = S.dueLabel(p.due);
              const isUrgent = ds==='urgent'||ds==='late';
              const CatChip = window.CatChip;
              return (
                <div key={p.id} style={{ display:'flex', alignItems:'center', gap:12, padding:'10px 12px', borderRadius:11, background:'rgba(255,255,255,0.025)', border:`1px solid ${isUrgent?'rgba(248,113,113,0.2)':'var(--border)'}` }}>
                  {CatChip && <CatChip cat={cat} size={34} />}
                  <div style={{ flex:1 }}>
                    <div style={{ fontSize:13.5, fontWeight:500 }}>{p.name}</div>
                    <div style={{ fontSize:11, marginTop:2, color: isUrgent?'#f87171':ds==='warn'?'#fbbf24':'var(--text-3)', fontWeight: isUrgent?700:400, textTransform:'uppercase', letterSpacing:'0.06em' }}>{dl}</div>
                  </div>
                  <div style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:14, fontWeight:600, fontVariantNumeric:'tabular-nums' }}>{fmt(p.amount)}</div>
                  <button onClick={() => onTogglePaid(p.id)} className="ripple-btn" style={{ padding:'6px 14px', borderRadius:8, background:'var(--accent-dim)', border:'1px solid var(--border-strong)', color:'var(--accent-bright)', cursor:'pointer', fontFamily:'inherit', fontSize:12, fontWeight:600, transition:'all 0.13s' }}>Pagar</button>
                </div>
              );
            })}
          </div>
        </DPanel>
        </div>

        {/* Dónde se va la plata */}
        <div className="si-2">
        <DPanel title="Dónde se va la plata" sub="Por categoría · mes corriente" action={{ label:'Análisis', onClick:() => onNav('analisis') }}>
          <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
            {dist.filter(d=>d.spent>0).sort((a,b)=>b.spent-a.spent).slice(0,6).map(d => {
              const pct = d.budget>0 ? Math.min(d.spent/d.budget,1) : 0;
              const over = d.spent > d.budget;
              return (
                <div key={d.id} style={{ display:'flex', alignItems:'center', gap:12, padding:'10px 12px', borderRadius:10, background:'rgba(255,255,255,0.02)' }}>
                  {window.CatChip && <window.CatChip cat={seed.catPorId[d.id]} size={32} />}
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ display:'flex', justifyContent:'space-between', marginBottom:5 }}>
                      <span style={{ fontSize:13, fontWeight:500 }}>{d.name}</span>
                      <span style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:13, fontWeight:600, fontVariantNumeric:'tabular-nums', color: over?'#f87171':'var(--text)' }}>{fmt(d.spent)}<span style={{ color:'var(--text-3)', fontWeight:400 }}> / {fmt(d.budget)}</span></span>
                    </div>
                    <div style={{ height:3, background:'rgba(255,255,255,0.06)', borderRadius:999 }}>
                      <div style={{ height:'100%', width:`${pct*100}%`, background: over?'#f87171':d.color||'var(--accent)', borderRadius:999, transition:'width 0.5s' }} />
                    </div>
                  </div>
                  <span style={{ fontSize:11, fontWeight:700, color: over?'#f87171':'var(--text-3)', width:36, textAlign:'right', flexShrink:0 }}>{Math.round(pct*100)}%</span>
                </div>
              );
            })}
          </div>
        </DPanel>
        </div>
      </div>

      {/* RIGHT */}
      <div className="si-0" style={{ display:'flex', flexDirection:'column', gap:12, position:'sticky', top:88 }}>
        {/* KPIs 2×2 */}
        <div style={{ display:'grid', gridTemplateColumns:'1fr 1fr', gap:10 }}>
          {[
            { l:'INGRESOS', v:t.ingTotal, delta:'+5%',      icon:'arrowDown', color:'var(--green)',          deltaColor:'var(--green)' },
            { l:'EGRESOS',  v:t.egrTotal,  delta:'-2%',      icon:'arrowUp',   color:'#f87171',               deltaColor:'var(--green)' },
            { l:'AHORRO',   v:t.ahoTotal,   delta:'+18%',     icon:'shield',    color:'var(--accent-bright)',  deltaColor:'var(--green)' },
            { l:'NETO',     v:t.neto,     delta:'este mes', icon:'calendar',  color:'var(--text)',           deltaColor:'var(--text-3)' },
          ].map(k => (
            <div key={k.l} style={{ padding:'14px 16px', borderRadius:14, background:'var(--card)', border:'1px solid var(--border)' }}>
              <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between', marginBottom:6 }}>
                <div style={{ fontSize:10, textTransform:'uppercase', letterSpacing:'0.12em', fontWeight:700, color:'var(--text-3)' }}>{k.l}</div>
                <DIcon name={k.icon} size={13} style={{ color: k.color }} strokeWidth={2} />
              </div>
              <div style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:20, fontWeight:700, letterSpacing:'-0.02em', color: k.color }}>
                {window.AnimatedNumber
                  ? React.createElement(window.AnimatedNumber, { value: k.v, format: fmt, duration: 700 })
                  : fmt(k.v)}
              </div>
              <div style={{ fontSize:11, marginTop:4, color: k.deltaColor, fontWeight:600 }}>{k.delta}</div>
            </div>
          ))}
        </div>

        {/* Distribución donut */}
        {DonutPane && (
          <DPanel title="Distribución" sub="Por grupo">
            <DonutPane dist={dist} totalEgr={totalEgr} ccy={ccy} isDesktop={false} />
          </DPanel>
        )}

        {/* Metas de ahorro */}
        {metas && metas.length > 0 && (
          <DPanel title="Metas de ahorro" sub={`${metas.length} meta${metas.length===1?'':'s'}`} action={{ label:'Gestionar →', onClick:() => onNav('config') }}>
            <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
              {metas.slice(0,4).map(m => {
                const pct = m.objetivo > 0 ? Math.min((m.actual||0)/m.objetivo, 1) : 0;
                return (
                  <div key={m.id} style={{ display:'flex', alignItems:'center', gap:10 }}>
                    <div style={{ width:30, height:30, borderRadius:8, background:(m.color||'#8b5cf6')+'22', color:m.color||'#8b5cf6', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                      <DIcon name={m.icono||'star'} size={13} strokeWidth={1.8} />
                    </div>
                    <div style={{ flex:1, minWidth:0 }}>
                      <div style={{ display:'flex', justifyContent:'space-between', marginBottom:4 }}>
                        <span style={{ fontSize:12.5, fontWeight:500 }}>{m.nombre}</span>
                        <span style={{ fontSize:11.5, color:'var(--text-3)', fontFamily:'Space Grotesk, sans-serif', fontVariantNumeric:'tabular-nums' }}>{Math.round(pct*100)}%</span>
                      </div>
                      <div style={{ height:4, background:'rgba(255,255,255,0.06)', borderRadius:999, overflow:'hidden' }}>
                        <div style={{ height:'100%', width:`${pct*100}%`, background: pct>=1 ? '#4ade80' : (m.color||'var(--accent-bright)'), borderRadius:999, transition:'width 0.5s' }} />
                      </div>
                    </div>
                  </div>
                );
              })}
            </div>
          </DPanel>
        )}

        {/* Movimientos recientes */}
        <DPanel title="Movimientos recientes" sub="" action={{ label:'Ver todos', onClick:() => onNav('movimientos') }}>
          <div style={{ display:'flex', flexDirection:'column', gap:0 }}>
            {allMovs.slice(0, 6).map((m, i) => {
              const isIng = m.kind === 'ingreso';
              const cat   = isIng ? null : seed.catPorId[m.cat];
              const dateD = new Date(m.date);
              const dateStr = dateD.toLocaleDateString('es-AR', { day:'2-digit', month:'short' });
              return (
                <div key={m.id || i} style={{ display:'flex', alignItems:'center', gap:10, padding:'9px 0', borderTop: i===0 ? 'none' : '1px solid var(--border)' }}>
                  <div style={{ width:30, height:30, borderRadius:8, background: isIng ? 'rgba(74,222,128,0.12)' : 'var(--accent-dim)', color: isIng ? '#4ade80' : 'var(--accent-bright)', display:'flex', alignItems:'center', justifyContent:'center', flexShrink:0 }}>
                    {window.CatChip ? React.createElement(window.CatChip, { cat, size:30 }) : <DIcon name={isIng?'arrowDown':'dollar'} size={13} />}
                  </div>
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ fontSize:12.5, fontWeight:500, overflow:'hidden', textOverflow:'ellipsis', whiteSpace:'nowrap' }}>{m.desc}</div>
                    <div style={{ fontSize:11, color:'var(--text-3)', marginTop:1 }}>{isIng ? 'Ingreso' : cat?.name} · {dateStr}</div>
                  </div>
                  <div style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:13, fontWeight:600, fontVariantNumeric:'tabular-nums', color: isIng ? '#4ade80' : 'var(--text)', flexShrink:0 }}>
                    {isIng ? '+' : '-'}{fmt(Math.abs(m.amount))}
                  </div>
                </div>
              );
            })}
          </div>
        </DPanel>
      </div>
    </div>
  );
}

// ── CuentasDesktop ───────────────────────────────────────────────────────────
function CuentasDesktop({ ccy, cuentasState, tarjetasState, onAddCuenta, onUpdateCuenta, onDeleteCuenta, onAddTarjeta, onUpdateTarjeta, onDeleteTarjeta }) {
  const conv  = n => ccy === 'USD' ? n / seed.fxBlue : n;
  const fmt   = n => S.fmtMoney(conv(n), ccy);
  const cuentas = cuentasState || seed.cuentas || [];
  const tarjetas = tarjetasState || [];

  const [cuentaPage, setCuentaPage] = dS(0);
  const [tarjetaPage, setTarjetaPage] = dS(0);
  const [editingId, setEditingId]   = dS(null); // cuenta id being edited
  const [editName,  setEditName]    = dS('');
  const [editBal,   setEditBal]     = dS('');
  const [addingCuenta, setAddingCuenta] = dS(false);
  const [newName, setNewName] = dS('');
  const [newBal,  setNewBal]  = dS('');
  const [newType, setNewType] = dS('ARS');
  const [addingTarjeta, setAddingTarjeta] = dS(false);
  const [newTName, setNewTName] = dS('');
  const [newTCorte, setNewTCorte] = dS('');
  const [newTVenc, setNewTVenc]   = dS('');

  const PAGE = 4;
  const cuentaPages = Math.ceil((cuentas.length + 1) / PAGE); // +1 for "add" card
  const tarjetaPages = Math.ceil((tarjetas.length + 1) / PAGE);

  const total  = cuentas.reduce((a,c) => a + (c.type==='USD' ? c.balance*seed.fxBlue : c.balance), 0);
  const liquid = cuentas.filter(c=>c.type!=='USD').reduce((a,c)=>a+c.balance,0);
  const usdBal = cuentas.filter(c=>c.type==='USD').reduce((a,c)=>a+c.balance*seed.fxBlue,0);
  const totalNZ = total || 1;
  const typeIcon = { ARS:'bank', USD:'dollar', INV:'trend' };

  function startEdit(c) { setEditingId(c.id); setEditName(c.name); setEditBal(String(c.balance)); }
  function saveEdit(c) {
    const bal = parseFloat(editBal.replace(/\./g,'').replace(',','.')) || c.balance;
    onUpdateCuenta?.({ ...c, name: editName.trim() || c.name, balance: bal });
    setEditingId(null);
  }
  function commitAdd() {
    const bal = parseFloat(newBal.replace(/\./g,'').replace(',','.')) || 0;
    if (!newName.trim()) return;
    onAddCuenta?.({ id:'c'+Date.now(), name:newName.trim(), balance:bal, type:newType });
    setNewName(''); setNewBal(''); setAddingCuenta(false);
  }
  function commitAddTarjeta() {
    if (!newTName.trim()) return;
    onAddTarjeta?.({ id:'t'+Date.now(), name:newTName.trim(), corte:newTCorte, vencimiento:newTVenc, active:true });
    setNewTName(''); setNewTCorte(''); setNewTVenc(''); setAddingTarjeta(false);
  }

  // Visible cuenta slots (4 per page, last slot on last page = add button)
  const allCuentaItems = [...cuentas, { _isAdd: true }];
  const visibleCuentas = allCuentaItems.slice(cuentaPage * PAGE, (cuentaPage + 1) * PAGE);

  const allTarjetaItems = [...tarjetas, { _isAdd: true }];
  const visibleTarjetas = allTarjetaItems.slice(tarjetaPage * PAGE, (tarjetaPage + 1) * PAGE);

  function AccountCard({ c }) {
    const isEditing = editingId === c.id;
    const arsVal = c.type === 'USD' ? c.balance * seed.fxBlue : c.balance;
    return (
      <div style={{ padding:'18px', borderRadius:14, background:'var(--card)', border:'1px solid var(--border)', position:'relative', minHeight:140 }}>
        {/* Delete X */}
        <button onClick={() => { if(window.confirm(`¿Eliminar "${c.name}"?`)) onDeleteCuenta?.(c.id); }}
          style={{ position:'absolute', top:10, right:10, width:22, height:22, borderRadius:6, background:'rgba(255,255,255,0.06)', border:'none', color:'var(--text-3)', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center', transition:'all 0.12s' }}
          onMouseEnter={e=>{e.currentTarget.style.background='rgba(248,113,113,0.18)';e.currentTarget.style.color='#f87171';}}
          onMouseLeave={e=>{e.currentTarget.style.background='rgba(255,255,255,0.06)';e.currentTarget.style.color='var(--text-3)';}}>
          <DIcon name="x" size={11} />
        </button>
        <div style={{ display:'flex', alignItems:'center', gap:10, marginBottom:14 }}>
          <div style={{ width:36, height:36, borderRadius:10, background:'var(--accent-dim)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--accent-bright)', flexShrink:0 }}>
            <DIcon name={typeIcon[c.type]||'bank'} size={16} />
          </div>
          <span style={{ fontSize:10.5, fontWeight:700, color:'var(--text-3)', background:'rgba(255,255,255,0.05)', padding:'2px 7px', borderRadius:999 }}>{c.type||'ARS'}</span>
        </div>
        {isEditing ? (
          <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
            <input value={editName} onChange={e=>setEditName(e.target.value)} placeholder="Nombre" style={{ padding:'6px 9px', borderRadius:8, background:'rgba(255,255,255,0.07)', border:'1px solid var(--accent)', color:'var(--text)', fontFamily:'inherit', fontSize:13, outline:'none', width:'100%', boxSizing:'border-box' }} />
            <input value={editBal} onChange={e=>setEditBal(e.target.value)} placeholder="Saldo" style={{ padding:'6px 9px', borderRadius:8, background:'rgba(255,255,255,0.07)', border:'1px solid var(--border-strong)', color:'var(--text)', fontFamily:'Space Grotesk, sans-serif', fontSize:14, outline:'none', width:'100%', boxSizing:'border-box' }} />
            <div style={{ display:'flex', gap:6 }}>
              <button onClick={()=>saveEdit(c)} style={{ flex:1, padding:'7px 0', borderRadius:8, background:'var(--accent)', color:'var(--on-accent)', border:'none', cursor:'pointer', fontFamily:'inherit', fontSize:12, fontWeight:600 }}>Guardar</button>
              <button onClick={()=>setEditingId(null)} style={{ padding:'7px 12px', borderRadius:8, background:'rgba(255,255,255,0.06)', color:'var(--text-2)', border:'none', cursor:'pointer', fontFamily:'inherit', fontSize:12 }}>✕</button>
            </div>
          </div>
        ) : (
          <div onClick={()=>startEdit(c)} style={{ cursor:'pointer' }}>
            <div style={{ fontSize:12.5, color:'var(--text-2)', marginBottom:4 }}>{c.name}</div>
            <div style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:20, fontWeight:700, fontVariantNumeric:'tabular-nums', letterSpacing:'-0.02em' }}>
              {c.type==='USD' ? `US$ ${new Intl.NumberFormat('es-AR').format(c.balance)}` : fmt(c.balance)}
            </div>
            {c.type==='USD' && <div style={{ fontSize:11, color:'var(--text-3)', marginTop:3 }}>{fmt(arsVal)}</div>}
            <div style={{ fontSize:10.5, color:'var(--accent-bright)', marginTop:6, opacity:0.7 }}>Click para editar</div>
          </div>
        )}
      </div>
    );
  }

  function AddCuentaCard() {
    return addingCuenta ? (
      <div style={{ padding:'18px', borderRadius:14, background:'var(--card)', border:'1px solid var(--accent)', minHeight:140 }}>
        <div style={{ fontSize:11, color:'var(--accent-bright)', textTransform:'uppercase', letterSpacing:'0.1em', fontWeight:700, marginBottom:10 }}>Nueva cuenta</div>
        <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
          <input value={newName} onChange={e=>setNewName(e.target.value)} placeholder="Nombre (ej: BBVA · cta sueldo)" style={{ padding:'7px 10px', borderRadius:8, background:'rgba(255,255,255,0.07)', border:'1px solid var(--border-strong)', color:'var(--text)', fontFamily:'inherit', fontSize:13, outline:'none', boxSizing:'border-box', width:'100%' }} />
          <input value={newBal} onChange={e=>setNewBal(e.target.value)} placeholder="Saldo inicial" style={{ padding:'7px 10px', borderRadius:8, background:'rgba(255,255,255,0.07)', border:'1px solid var(--border-strong)', color:'var(--text)', fontFamily:'Space Grotesk, sans-serif', fontSize:13, outline:'none', boxSizing:'border-box', width:'100%' }} />
          <div style={{ display:'flex', gap:6 }}>
            {['ARS','USD'].map(t=>(
              <button key={t} onClick={()=>setNewType(t)} style={{ flex:1, padding:'6px 0', borderRadius:8, background:newType===t?'var(--accent)':'rgba(255,255,255,0.05)', color:newType===t?'var(--on-accent)':'var(--text-2)', border:'none', cursor:'pointer', fontFamily:'inherit', fontSize:12, fontWeight:700 }}>{t}</button>
            ))}
          </div>
          <div style={{ display:'flex', gap:6 }}>
            <button onClick={commitAdd} style={{ flex:1, padding:'7px 0', borderRadius:8, background:'var(--accent)', color:'var(--on-accent)', border:'none', cursor:'pointer', fontFamily:'inherit', fontSize:12, fontWeight:600 }}>Agregar</button>
            <button onClick={()=>setAddingCuenta(false)} style={{ padding:'7px 12px', borderRadius:8, background:'rgba(255,255,255,0.06)', color:'var(--text-2)', border:'none', cursor:'pointer', fontFamily:'inherit', fontSize:12 }}>✕</button>
          </div>
        </div>
      </div>
    ) : (
      <button onClick={()=>setAddingCuenta(true)} style={{ padding:'18px', borderRadius:14, background:'rgba(255,255,255,0.02)', border:'1px dashed var(--border-strong)', cursor:'pointer', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:8, minHeight:140, transition:'background 0.15s', fontFamily:'inherit', color:'var(--text-3)', width:'100%' }}
        onMouseEnter={e=>e.currentTarget.style.background='rgba(167,139,250,0.06)'}
        onMouseLeave={e=>e.currentTarget.style.background='rgba(255,255,255,0.02)'}>
        <div style={{ width:32, height:32, borderRadius:9, background:'var(--accent-dim)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--accent-bright)' }}><DIcon name="plus" size={16} /></div>
        <span style={{ fontSize:12.5, fontWeight:600 }}>Agregar cuenta</span>
      </button>
    );
  }

  function TarjetaCard({ t }) {
    const [editing, setEditing] = dS(false);
    const [eName, setEName]     = dS(t.name);
    const [eCorte, setECorte]   = dS(t.corte || '');
    const [eVenc, setEVenc]     = dS(t.vencimiento || '');
    function saveT() {
      onUpdateTarjeta?.(t.id, { name: eName.trim()||t.name, corte: eCorte, vencimiento: eVenc });
      setEditing(false);
    }
    return (
      <div style={{ padding:'18px', borderRadius:14, background:'var(--card)', border:'1px solid var(--border)', position:'relative' }}>
        <button onClick={()=>{ if(window.confirm(`¿Eliminar "${t.name}"?`)) onDeleteTarjeta?.(t.id); }}
          style={{ position:'absolute', top:10, right:10, width:22, height:22, borderRadius:6, background:'rgba(255,255,255,0.06)', border:'none', color:'var(--text-3)', cursor:'pointer', display:'flex', alignItems:'center', justifyContent:'center' }}
          onMouseEnter={e=>{e.currentTarget.style.background='rgba(248,113,113,0.18)';e.currentTarget.style.color='#f87171';}}
          onMouseLeave={e=>{e.currentTarget.style.background='rgba(255,255,255,0.06)';e.currentTarget.style.color='var(--text-3)';}}>
          <DIcon name="x" size={11} />
        </button>
        <div style={{ width:36, height:36, borderRadius:10, background:'var(--accent-dim)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--accent-bright)', marginBottom:12 }}>
          <DIcon name="cards" size={16} />
        </div>
        {editing ? (
          <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
            <input value={eName} onChange={e=>setEName(e.target.value)} placeholder="Nombre" style={{ padding:'6px 9px', borderRadius:8, background:'rgba(255,255,255,0.07)', border:'1px solid var(--accent)', color:'var(--text)', fontFamily:'inherit', fontSize:13, outline:'none', width:'100%', boxSizing:'border-box' }} />
            <div style={{ display:'flex', gap:6 }}>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:10, color:'var(--text-3)', marginBottom:3 }}>Día cierre</div>
                <input value={eCorte} onChange={e=>setECorte(e.target.value)} placeholder="ej: 15" style={{ padding:'6px 9px', borderRadius:8, background:'rgba(255,255,255,0.07)', border:'1px solid var(--border-strong)', color:'var(--text)', fontFamily:'inherit', fontSize:13, outline:'none', width:'100%', boxSizing:'border-box' }} />
              </div>
              <div style={{ flex:1 }}>
                <div style={{ fontSize:10, color:'var(--text-3)', marginBottom:3 }}>Día vencimiento</div>
                <input value={eVenc} onChange={e=>setEVenc(e.target.value)} placeholder="ej: 22" style={{ padding:'6px 9px', borderRadius:8, background:'rgba(255,255,255,0.07)', border:'1px solid var(--border-strong)', color:'var(--text)', fontFamily:'inherit', fontSize:13, outline:'none', width:'100%', boxSizing:'border-box' }} />
              </div>
            </div>
            <div style={{ display:'flex', gap:6 }}>
              <button onClick={saveT} style={{ flex:1, padding:'7px 0', borderRadius:8, background:'var(--accent)', color:'var(--on-accent)', border:'none', cursor:'pointer', fontFamily:'inherit', fontSize:12, fontWeight:600 }}>Guardar</button>
              <button onClick={()=>setEditing(false)} style={{ padding:'7px 12px', borderRadius:8, background:'rgba(255,255,255,0.06)', color:'var(--text-2)', border:'none', cursor:'pointer', fontFamily:'inherit', fontSize:12 }}>✕</button>
            </div>
          </div>
        ) : (
          <div onClick={()=>{ setEName(t.name); setECorte(t.corte||''); setEVenc(t.vencimiento||''); setEditing(true); }} style={{ cursor:'pointer' }}>
            <div style={{ fontSize:13.5, fontWeight:600, marginBottom:10 }}>{t.name}</div>
            <div style={{ display:'flex', flexDirection:'column', gap:5 }}>
              <div style={{ display:'flex', justifyContent:'space-between', fontSize:12 }}>
                <span style={{ color:'var(--text-3)' }}>Cierre</span>
                <span style={{ fontWeight:600 }}>{t.corte ? `Día ${t.corte}` : '—'}</span>
              </div>
              <div style={{ display:'flex', justifyContent:'space-between', fontSize:12 }}>
                <span style={{ color:'var(--text-3)' }}>Vencimiento</span>
                <span style={{ fontWeight:600, color:'var(--accent-bright)' }}>{t.vencimiento ? `Día ${t.vencimiento}` : '—'}</span>
              </div>
            </div>
            <div style={{ fontSize:10.5, color:'var(--accent-bright)', marginTop:8, opacity:0.7 }}>Click para editar</div>
          </div>
        )}
      </div>
    );
  }

  function AddTarjetaCard() {
    return addingTarjeta ? (
      <div style={{ padding:'18px', borderRadius:14, background:'var(--card)', border:'1px solid var(--accent)' }}>
        <div style={{ fontSize:11, color:'var(--accent-bright)', textTransform:'uppercase', letterSpacing:'0.1em', fontWeight:700, marginBottom:10 }}>Nueva tarjeta</div>
        <div style={{ display:'flex', flexDirection:'column', gap:6 }}>
          <input value={newTName} onChange={e=>setNewTName(e.target.value)} placeholder="Nombre (ej: Visa Galicia)" style={{ padding:'7px 10px', borderRadius:8, background:'rgba(255,255,255,0.07)', border:'1px solid var(--border-strong)', color:'var(--text)', fontFamily:'inherit', fontSize:13, outline:'none', boxSizing:'border-box', width:'100%' }} />
          <div style={{ display:'flex', gap:6 }}>
            <input value={newTCorte} onChange={e=>setNewTCorte(e.target.value)} placeholder="Día cierre" style={{ flex:1, padding:'7px 10px', borderRadius:8, background:'rgba(255,255,255,0.07)', border:'1px solid var(--border-strong)', color:'var(--text)', fontFamily:'inherit', fontSize:13, outline:'none' }} />
            <input value={newTVenc} onChange={e=>setNewTVenc(e.target.value)} placeholder="Día vencimiento" style={{ flex:1, padding:'7px 10px', borderRadius:8, background:'rgba(255,255,255,0.07)', border:'1px solid var(--border-strong)', color:'var(--text)', fontFamily:'inherit', fontSize:13, outline:'none' }} />
          </div>
          <div style={{ display:'flex', gap:6 }}>
            <button onClick={commitAddTarjeta} style={{ flex:1, padding:'7px 0', borderRadius:8, background:'var(--accent)', color:'var(--on-accent)', border:'none', cursor:'pointer', fontFamily:'inherit', fontSize:12, fontWeight:600 }}>Agregar</button>
            <button onClick={()=>setAddingTarjeta(false)} style={{ padding:'7px 12px', borderRadius:8, background:'rgba(255,255,255,0.06)', color:'var(--text-2)', border:'none', cursor:'pointer', fontFamily:'inherit', fontSize:12 }}>✕</button>
          </div>
        </div>
      </div>
    ) : (
      <button onClick={()=>setAddingTarjeta(true)} style={{ padding:'18px', borderRadius:14, background:'rgba(255,255,255,0.02)', border:'1px dashed var(--border-strong)', cursor:'pointer', display:'flex', flexDirection:'column', alignItems:'center', justifyContent:'center', gap:8, minHeight:120, transition:'background 0.15s', fontFamily:'inherit', color:'var(--text-3)', width:'100%' }}
        onMouseEnter={e=>e.currentTarget.style.background='rgba(167,139,250,0.06)'}
        onMouseLeave={e=>e.currentTarget.style.background='rgba(255,255,255,0.02)'}>
        <div style={{ width:32, height:32, borderRadius:9, background:'var(--accent-dim)', display:'flex', alignItems:'center', justifyContent:'center', color:'var(--accent-bright)' }}><DIcon name="plus" size={16} /></div>
        <span style={{ fontSize:12.5, fontWeight:600 }}>Agregar tarjeta</span>
      </button>
    );
  }

  function Carousel({ page, setPage, total }) {
    if (total <= 1) return null;
    return (
      <div style={{ display:'flex', alignItems:'center', justifyContent:'center', gap:10, marginTop:14 }}>
        <button onClick={()=>setPage(p=>Math.max(0,p-1))} disabled={page===0} style={{ width:28, height:28, borderRadius:8, background:'rgba(255,255,255,0.06)', border:'none', color: page===0 ? 'var(--text-3)' : 'var(--text)', cursor: page===0 ? 'default' : 'pointer', display:'flex', alignItems:'center', justifyContent:'center' }}>
          <DIcon name="chevLeft" size={13} />
        </button>
        {Array.from({length:total}).map((_,i) => (
          <button key={i} onClick={()=>setPage(i)} style={{ width:6, height:6, borderRadius:'50%', background: i===page ? 'var(--accent-bright)' : 'rgba(255,255,255,0.2)', border:'none', cursor:'pointer', padding:0, transition:'background 0.15s' }} />
        ))}
        <button onClick={()=>setPage(p=>Math.min(total-1,p+1))} disabled={page===total-1} style={{ width:28, height:28, borderRadius:8, background:'rgba(255,255,255,0.06)', border:'none', color: page===total-1 ? 'var(--text-3)' : 'var(--text)', cursor: page===total-1 ? 'default' : 'pointer', display:'flex', alignItems:'center', justifyContent:'center' }}>
          <DIcon name="chevRight" size={13} />
        </button>
      </div>
    );
  }

  return (
    <div style={{ display:'grid', gridTemplateColumns:'1fr 360px', gap:24, padding:'28px 28px 44px', maxWidth:1280, margin:'0 auto', alignItems:'start' }}>
      {/* LEFT */}
      <div style={{ display:'flex', flexDirection:'column', gap:20 }}>
        {/* Patrimonio */}
        <div style={{ padding:'24px 26px', borderRadius:18, background:'var(--card)', border:'1px solid var(--border)' }}>
          <div style={{ fontSize:10, color:'var(--text-3)', textTransform:'uppercase', letterSpacing:'0.12em', fontWeight:700, marginBottom:8 }}>PATRIMONIO TOTAL</div>
          <div style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:44, fontWeight:700, letterSpacing:'-0.04em', fontVariantNumeric:'tabular-nums' }}>{fmt(total)}</div>
          <div style={{ fontSize:13, color:'var(--text-3)', marginTop:6 }}>{cuentas.length} cuentas · {cuentas.filter(c=>c.type==='USD').length} en dólares</div>
          <div style={{ marginTop:16, height:6, borderRadius:999, overflow:'hidden', display:'flex', gap:2 }}>
            {[{pct:liquid/totalNZ*100,color:'var(--accent)'},{pct:usdBal/totalNZ*100,color:'#34d399'}].filter(s=>s.pct>0).map((s,i)=>(
              <div key={i} style={{ height:'100%', width:`${s.pct}%`, background:s.color, borderRadius:999, transition:'width 0.6s' }} />
            ))}
          </div>
          <div style={{ display:'flex', gap:16, marginTop:8, fontSize:12, color:'var(--text-3)', fontWeight:500 }}>
            <span>● Líquido ARS {Math.round(liquid/totalNZ*100)}%</span>
            <span style={{ color:'#34d399' }}>● Dólares {Math.round(usdBal/totalNZ*100)}%</span>
          </div>
        </div>

        {/* Tus cuentas */}
        <div>
          <div style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:16, fontWeight:600, marginBottom:4 }}>Tus cuentas</div>
          <div style={{ fontSize:12, color:'var(--text-3)', marginBottom:14 }}>Detalle y saldos</div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:12 }}>
            {visibleCuentas.map((c, i) =>
              c._isAdd ? <AddCuentaCard key="add" /> : <AccountCard key={c.id} c={c} />
            )}
          </div>
          <Carousel page={cuentaPage} setPage={setCuentaPage} total={cuentaPages} />
        </div>

        {/* Tarjetas */}
        <div>
          <div style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:16, fontWeight:600, marginBottom:4 }}>Tarjetas</div>
          <div style={{ fontSize:12, color:'var(--text-3)', marginBottom:14 }}>Fecha de cierre y vencimiento</div>
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:12 }}>
            {visibleTarjetas.map((t, i) =>
              t._isAdd ? <AddTarjetaCard key="add-t" /> : <TarjetaCard key={t.id} t={t} />
            )}
          </div>
          <Carousel page={tarjetaPage} setPage={setTarjetaPage} total={tarjetaPages} />
        </div>
      </div>

      {/* RIGHT: Composición */}
      <div style={{ position:'sticky', top:88 }}>
        <DPanel title="Composición" sub="Saldo por cuenta">
          <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
            {cuentas.map(c => {
              const arsVal = c.type === 'USD' ? c.balance * seed.fxBlue : c.balance;
              const pct = Math.round(arsVal / totalNZ * 100);
              return (
                <div key={c.id} style={{ display:'flex', flexDirection:'column', gap:5 }}>
                  <div style={{ display:'flex', alignItems:'center', justifyContent:'space-between' }}>
                    <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                      <span style={{ fontSize:10.5, fontWeight:700, padding:'2px 7px', borderRadius:999, background:'rgba(139,92,246,0.1)', color:'var(--accent-bright)' }}>{c.type==='USD'?'$':c.name.split(' ')[0]}</span>
                      <span style={{ fontSize:13, fontWeight:500 }}>{c.name}</span>
                    </div>
                    <div style={{ display:'flex', alignItems:'center', gap:8 }}>
                      <span style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:13, fontWeight:600, fontVariantNumeric:'tabular-nums' }}>{fmt(arsVal)}</span>
                      <span style={{ fontSize:11, color:'var(--text-3)', width:32, textAlign:'right' }}>{pct}%</span>
                    </div>
                  </div>
                  <div style={{ height:3, background:'rgba(255,255,255,0.05)', borderRadius:999 }}>
                    <div style={{ height:'100%', width:`${pct}%`, background:'var(--accent)', borderRadius:999 }} />
                  </div>
                </div>
              );
            })}
          </div>
        </DPanel>
      </div>
    </div>
  );
}

// ── CierreDesktop ────────────────────────────────────────────────────────────
function CierreDesktop({ ccy, spentState, budgets, movimientos, onClose, onOpenModal }) {
  const [cerrando, setCerrando] = dS(false);
  const conv = n => ccy === 'USD' ? n / seed.fxBlue : n;
  const fmt  = n => S.fmtMoney(conv(n), ccy);
  const stats = dM(() => window.MonthClose?.buildStats?.() || null, [spentState]);
  const history = dM(() => window.MonthClose?.getHistory?.() || [], []);
  const monthName = new Date().toLocaleDateString('es-AR', { month:'long', year:'numeric' });
  const allMovs = movimientos || [];
  const movCount = allMovs.length;

  function handleCerrar() {
    if (onOpenModal) { onOpenModal(); return; }
    if (cerrando) return;
    setCerrando(true);
    try { window.MonthClose?.cerrarMes?.(() => {}); onClose?.(); }
    catch(e) { console.error(e); }
    finally { setCerrando(false); }
  }

  const dist = S.distribucion(spentState, budgets);
  const catList = [...dist].filter(d=>d.spent>0).sort((a,b)=>b.spent-a.spent);

  return (
    <div style={{ display:'grid', gridTemplateColumns:'1fr 340px', gap:24, padding:'28px 28px 44px', maxWidth:1280, margin:'0 auto', alignItems:'start' }}>
      {/* LEFT */}
      <div style={{ display:'flex', flexDirection:'column', gap:20 }}>
        {/* Hero */}
        <div style={{ padding:'28px 30px', borderRadius:18, background:'var(--card)', border:'1px solid var(--border)' }}>
          <div style={{ fontSize:10, textTransform:'uppercase', letterSpacing:'0.14em', fontWeight:700, color:'var(--accent-bright)', marginBottom:10 }}>CIERRE DE MES</div>
          <div style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:36, fontWeight:700, letterSpacing:'-0.03em', marginBottom:12 }}>Estás por cerrar {monthName}</div>
          <div style={{ fontSize:13.5, color:'var(--text-2)', lineHeight:1.6, marginBottom:20 }}>
            {stats ? `Cerraste el mes con una tasa de ahorro del ${Math.round((stats.ahoTotal/stats.ingTotal)*100)}%. Revisá el resumen y archivá para empezar ${new Date(Date.now()+32*86400000).toLocaleDateString('es-AR',{month:'long'})} en limpio.` : 'Revisá el resumen y archivá el mes.'}
          </div>
          <button onClick={handleCerrar} disabled={cerrando} style={{
            display:'inline-flex', alignItems:'center', gap:8, padding:'12px 24px', borderRadius:12,
            background:'var(--accent)', color:'var(--on-accent)', border:'none', cursor: cerrando?'not-allowed':'pointer',
            fontFamily:'inherit', fontSize:14, fontWeight:600, transition:'all 0.14s',
          }}>
            <DIcon name="archive" size={15} /> {cerrando ? 'Cerrando…' : `Cerrar mes y empezar ${new Date(Date.now()+32*86400000).toLocaleDateString('es-AR',{month:'long'})}`}
          </button>
        </div>

        {/* KPIs grid */}
        {stats && (
          <div style={{ display:'grid', gridTemplateColumns:'repeat(4,1fr)', gap:12 }}>
            {[['INGRESOS',stats.ingTotal],['EGRESOS',stats.egrTotal],['AHORRO NETO',stats.ahoTotal],['MOVIMIENTOS',movCount]].map(([l,v]) => (
              <div key={l} style={{ padding:'14px 16px', borderRadius:12, background:'var(--card)', border:'1px solid var(--border)' }}>
                <div style={{ fontSize:9.5, textTransform:'uppercase', letterSpacing:'0.1em', fontWeight:700, color:'var(--text-3)', marginBottom:6 }}>{l}</div>
                <div style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:l==='MOVIMIENTOS'?24:18, fontWeight:700, fontVariantNumeric:'tabular-nums', letterSpacing:'-0.02em' }}>{l==='MOVIMIENTOS' ? v : fmt(v)}</div>
              </div>
            ))}
          </div>
        )}

        {/* Category bars */}
        <DPanel title="Resumen por categoría" sub="En qué se fue el mes">
          <div style={{ display:'flex', flexDirection:'column', gap:10 }}>
            {catList.slice(0,10).map(d => {
              const pct = d.budget > 0 ? Math.min(d.spent/d.budget,2) : 0;
              const over = d.spent > d.budget;
              return (
                <div key={d.id} style={{ display:'flex', alignItems:'center', gap:12 }}>
                  {window.CatChip && <window.CatChip cat={seed.catPorId[d.id]} size={32} />}
                  <div style={{ flex:1, minWidth:0 }}>
                    <div style={{ display:'flex', justifyContent:'space-between', marginBottom:5 }}>
                      <span style={{ fontSize:13, fontWeight:500 }}>{d.name}</span>
                      <span style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:13, fontWeight:600, fontVariantNumeric:'tabular-nums', color: over?'#f87171':'var(--text)' }}>{fmt(d.spent)}</span>
                    </div>
                    <div style={{ height:4, background:'rgba(255,255,255,0.06)', borderRadius:999 }}>
                      <div style={{ height:'100%', width:`${Math.min(pct,1)*100}%`, background: over?'#f87171':d.color||'var(--accent)', borderRadius:999 }} />
                    </div>
                  </div>
                  <span style={{ fontSize:11.5, fontWeight:700, color: over?'#f87171':'var(--text-3)', width:36, textAlign:'right', flexShrink:0 }}>{Math.round(d.budget>0?d.spent/d.budget*100:0)}%</span>
                </div>
              );
            })}
          </div>
        </DPanel>
      </div>

      {/* RIGHT */}
      <div style={{ display:'flex', flexDirection:'column', gap:20, position:'sticky', top:88 }}>
        {/* Cómo venís chart */}
        <DPanel title="Cómo venís" sub="Neto de los últimos 6 meses">
          <div style={{ display:'flex', flexDirection:'column', gap:8 }}>
            {(history.slice(-6).length > 0 ? history.slice(-6) : seed.history||[]).map((h, i) => {
              const maxNeto = Math.max(...(history.length ? history : seed.history||[]).map(x=>Math.abs(x.neto)||1));
              const pct = Math.min(Math.abs(h.neto)/maxNeto, 1) * 100;
              return (
                <div key={i} style={{ display:'flex', alignItems:'center', gap:10 }}>
                  <span style={{ fontSize:11, color:'var(--text-3)', width:28, flexShrink:0 }}>{h.monthName?.slice(0,3) || ''}</span>
                  <div style={{ flex:1, height:6, background:'rgba(255,255,255,0.05)', borderRadius:999, overflow:'hidden' }}>
                    <div style={{ height:'100%', width:`${pct}%`, background: i === (history.slice(-6).length||6)-1 ? 'var(--accent)' : 'rgba(139,92,246,0.35)', borderRadius:999, transition:'width 0.5s' }} />
                  </div>
                  <span style={{ fontFamily:'Space Grotesk, sans-serif', fontSize:11.5, fontWeight:600, fontVariantNumeric:'tabular-nums', color: h.neto>=0?'#4ade80':'#f87171' }}>{S.fmtMoney(Math.abs(h.neto||0), 'ARS')}</span>
                </div>
              );
            })}
          </div>
        </DPanel>
      </div>
    </div>
  );
}

window.DesktopTopbar  = Topbar;
window.DesktopSidebar = Sidebar;
window.HomeDesktop    = HomeDesktop;
window.CuentasDesktop = CuentasDesktop;
window.CierreDesktop  = CierreDesktop;