Pestañas de colores, como los grupos de Chrome

Con la barra ya en la fila del título, teñir es lo que hace que un montón de
pestañas abiertas se lea de un vistazo: todo lo de un cliente en verde, lo que está
en revisión en rojo. Se elige con clic derecho sobre la pestaña ▸ Color, con marca
en el que tiene puesto, y "Sin color" para quitarlo.

Nueve colores, los mismos que usa Chrome para sus grupos. El color se guarda con la
sesión (lista `colors` en estado.json, paralela a `tabs`), así que sobrevive a
cerrar la app. Un estado.json viejo sin colores carga igual: la lista entra por
serde default y todas las pestañas salen sin teñir.

Cómo se pinta: la inactiva lleva el color de fondo translúcido y se le quita el
separador vertical (con fondo propio ya se ve dónde acaba). La ACTIVA no se tiñe
entera —tiene que seguir fundida con el contenido, que es lo que le da el aspecto de
Chrome— sino que lleva el color en una franja de 3 px arriba. En el CSS el color va
en componentes RGB sueltos (`--tc: r, g, b`) para sacar de una sola definición tanto
el tono sólido como el fondo translúcido, en vez de repetir nueve colores por tema.

Al restaurar la sesión, el color se empareja con su URL ANTES de filtrar por origen:
el filtro puede descartar entradas y entonces los índices de las dos listas dejarían
de casar, y las pestañas saldrían con el color de otra.

El id que llega del menú se valida contra la paleta antes de guardarlo; uno
desconocido deja la pestaña sin color en vez de escribir cualquier cosa en el disco.

Verificado: sintaxis del script con node --check, y en el navegador que la inactiva
se tiñe, que la activa conserva su fondo de tarjeta con la franja del color encima,
y que el separador desaparece en las teñidas. La compilación la verifica el CI.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

dist/index.html

@@ -135,6 +135,32 @@
         right: -8px;
         background: radial-gradient(circle at 8px 0, transparent 8px, var(--tab-active-bg) 8.5px);
       }
+      /* ── Color de pestaña ────────────────────────────────────────────────────────────
+         Misma idea que los grupos de Chrome: teñir para agrupar de un vistazo («todo lo de
+         este cliente, en verde»). El color se elige con clic derecho sobre la pestaña ▸ Color,
+         y se guarda con la sesión.
+         Va en componentes RGB sueltos (`--tc: r, g, b`) para sacar de UNA sola definición
+         tanto el tono sólido como el fondo translúcido, sin repetir nueve colores por tema.
+         La pestaña ACTIVA no se tiñe entera: tiene que seguir fundida con el contenido, así
+         que lleva el color en una franja superior — igual que Chrome. */
+      .tab[data-color="gris"]     { --tc: 95, 99, 104; }
+      .tab[data-color="azul"]     { --tc: 26, 115, 232; }
+      .tab[data-color="rojo"]     { --tc: 217, 48, 37; }
+      .tab[data-color="amarillo"] { --tc: 249, 171, 0; }
+      .tab[data-color="verde"]    { --tc: 30, 142, 62; }
+      .tab[data-color="rosa"]     { --tc: 208, 24, 132; }
+      .tab[data-color="morado"]   { --tc: 147, 52, 230; }
+      .tab[data-color="cian"]     { --tc: 0, 123, 131; }
+      .tab[data-color="naranja"]  { --tc: 250, 144, 62; }
+      .tab[data-color]:not(.active) { background: rgba(var(--tc), 0.18); }
+      .tab[data-color]:not(.active):hover { background: rgba(var(--tc), 0.32); }
+      /* Con fondo propio el separador vertical sobra: ya se ve dónde acaba cada pestaña. */
+      .tab[data-color]:not(.active)::before { display: none; }
+      .tab[data-color].active { box-shadow: inset 0 3px 0 rgb(var(--tc)); }
+      @media (prefers-color-scheme: dark) {
+        .tab[data-color]:not(.active) { background: rgba(var(--tc), 0.36); }
+        .tab[data-color]:not(.active):hover { background: rgba(var(--tc), 0.5); }
+      }
       /* Reordenar arrastrando: NO se usa drag&drop de HTML5 (en el webview de la barra en
          macOS los eventos no llegan), sino eventos de puntero. Se apaga el arrastre nativo de
          WebKit para que no salga la imagen fantasma al mover una pestaña. */
@@ -417,6 +443,7 @@
           const el = document.createElement("div");
           el.className = "tab" + (t.active ? " active" : "");
           el.dataset.label = t.label;
+          if (t.color) el.dataset.color = t.color; // teñido desde el menú de la pestaña
           el.title = texto;
 
           const fav = document.createElement("span");