feat: NET graph as filled area with color-coded arrows

La gráfica NET de la pestaña Sistema ahora se dibuja como área rellena en
ambas series (download y upload), igual que el resto del panel. La cabecera
colorea cada flecha con el color de su línea (↓ cian para download, ↑ naranja
para upload) para distinguir las dos series de un vistazo.

Añade el helper vlen() que cuenta caracteres UTF-8 (code points) en vez de
bytes, necesario para alinear a la derecha texto con flechas en fuente
monoespaciada.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

lua/widget.lua

@@ -110,6 +110,13 @@ local function num(expr)
     return tonumber(str(expr)) or 0
 end
 
+-- Longitud visible en caracteres (code points UTF-8), no bytes. Necesario para
+-- alinear texto que contiene flechas (↓ ↑) en fuente monoespaciada.
+local function vlen(s)
+    local _, n = s:gsub("[^\128-\191]", "")
+    return n
+end
+
 -- Convierte un texto de tasa de conky ("1.2MiB", "300KiB", "5B") a KiB/s ------
 local function rate_kib(s)
     local n, unit = s:match("([%d%.]+)%s*([KMGTPi]*)B?")
@@ -381,12 +388,21 @@ local function draw_sys(cr)
     gh = row("DISK I/O", str("${diskio}"), COL.orange, 26)
     graph(cr, x, y, gw, gh, { { data = hist.diskio, c = COL.purple, fill = true } }); y = y + gh + 6
 
-    -- NET (red: download + upload). Dos series: down (cian) y up (naranja).
-    gh = row("NET", "↓ " .. str("${downspeed " .. NIF .. "}") ..
-                    "   ↑ " .. str("${upspeed " .. NIF .. "}"), COL.blue, 26)
+    -- NET (red: download + upload) como área. Cabecera con las flechas
+    -- coloreadas igual que su línea (↓ cian = down, ↑ naranja = up) para
+    -- distinguir las dos series de un vistazo.
+    text(cr, x, y + 11, "NET", COL.blue, 11, true)
+    local dn_s = "↓ " .. str("${downspeed " .. NIF .. "}")
+    local up_s = "↑ " .. str("${upspeed " .. NIF .. "}")
+    local up_x = W - 10 - vlen(up_s) * 10 * 0.6
+    local dn_x = up_x - 10 - vlen(dn_s) * 10 * 0.6
+    text(cr, dn_x, y + 11, dn_s, COL.down, 10)
+    text(cr, up_x, y + 11, up_s, COL.up,   10)
+    y = y + 15
+    gh = 26
     graph(cr, x, y, gw, gh, {
-        { data = hist.down, c = COL.down },
-        { data = hist.up,   c = COL.up },
+        { data = hist.down, c = COL.down, fill = true },
+        { data = hist.up,   c = COL.up,   fill = true },
     }); y = y + gh + 6
 
     -- Uso de discos