Goto Site Setup => Theming (or just @@theming-controlpanel)
Click Copy on Barceloneta Theme
Type barceloneta as title into pop-up form and click Create
Now you should be at theme editor where you can open and edit also rules.xml. On theming control panel you'll see that your copy overrides the default Barceloneta. When in doubt, you can just download your version and delete it, and then you'll have the original Bareloneta Theme in use, and you can have a clean start
Note that to see changes on rules.xml on a production server, you need to click Clear cache button on theme editor or theming control panel.
For easy customization of that Barceloneta Theme copy styles, you should now be able to
customize variables ./less/variables.plone.less
open ./less/barceloneta.plone.less
click Build CSS button and then Compile
This would create a new version of ./less/barceloneta-compiled.css, which is defined as the theme's main CSS file in ./manifest.css with your customized values in it.
Again, on production server, there may be caching issues. Clicking Build CSS on a fresh private/incognito browser window and re-activating theme after build might help.
That's surprising. Even ZMI is not recommended (because theme editor has all the additional features), editing theme files through ZMI should still work. E.g. ZMI editor for a copied Barceloneta Theme rules.xml should be available at:
Oh, yes. On ZMI the editor depends on content-type and size of the file. For rules.xml edit tab on ZMI, change its content type value to text/xml; charset=utf-8 and you should see the editor (unless the file is bigger than 64kb that seems to be condition for the editor on ZMI).