function TweaksPanel({ values, onChange, visible }) {
  if (!visible) return null;
  return (
    <div style={{
      position: 'fixed', right: 20, bottom: 20, zIndex: 100,
      background: 'var(--panel)', border: '1px solid var(--border-strong)',
      borderRadius: 14, padding: 16, minWidth: 220,
      boxShadow: '0 10px 30px rgba(0,0,0,0.4)',
    }}>
      <div style={{ fontSize: 12, fontWeight: 600, color: 'var(--text-dim)', letterSpacing: 1, marginBottom: 12 }}>TWEAKS</div>
      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: 16 }}>
        <span style={{ fontSize: 13.5 }}>Tema</span>
        <div style={{ display: 'inline-flex', background: 'var(--panel-2)', borderRadius: 8, padding: 3, border: '1px solid var(--border)' }}>
          {[
            { id: 'dark',  label: 'Oscuro' },
            { id: 'light', label: 'Claro' },
          ].map(o => (
            <button key={o.id} onClick={() => onChange({ theme: o.id })}
              style={{
                padding: '5px 12px', fontSize: 12, fontWeight: 500, borderRadius: 6,
                background: values.theme === o.id ? 'var(--border-strong)' : 'transparent',
                color: values.theme === o.id ? 'var(--text)' : 'var(--text-dim)',
              }}>{o.label}</button>
          ))}
        </div>
      </div>
    </div>
  );
}

Object.assign(window, { TweaksPanel });