La barra se pinta del color de la app: blanca en claro, negra en oscuro

Venía con el gris de Chrome (#dee1e6 / #202124) en los dos temas, y encima de una
app negra se veía como una franja de navegador pegada a la ventana en vez de parte
de ella. Ahora la franja es casi blanca en tema claro y negra en oscuro, del tono de
la app.

El truco de Chrome se conserva —la pestaña activa es una tarjeta del color del
CONTENIDO y se funde con él—, solo que en oscuro el contraste va al revés: la franja
queda MÁS negra que el contenido, así que la activa destaca por ser más clara. Quien
marca el corte de verdad es el borde inferior, que la activa tapa con su fondo.

De paso, dos ajustes que arrastraba el cambio:

- El hover de las pestañas inactivas en tema claro era blanco al 55%: sobre una
  franja casi blanca no se habría visto nada. Ahora oscurece.
- El ancho máximo de pestaña sube de 240 a 280 px. Los títulos ahora traen nombre
  real y sección («Hotjamin Orgánicos · Archivos») y a 240 se cortaban de más. Con
  muchas pestañas abiertas no cambia nada: mandan el reparto elástico y el modo
  compacto de solo icono.

Verificado: sintaxis del script con node --check y la barra montada en el navegador
con el CSS real, en los dos temas.

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

dist/index.html

@@ -15,28 +15,35 @@
       (`data-tauri-drag-region`). En Windows hay título nativo aparte y no se reserva nada.
     -->
     <style>
-      /* Paleta estilo Chrome: la barra es una FRANJA más oscura y la pestaña activa es una
+      /* La barra se pinta del color de la APP, no del gris de Chrome: blanca en tema claro y
-         tarjeta del color del contenido que se funde con él (sin línea debajo). */
+         negra en oscuro, para que la ventana se lea como una sola pieza y no como una franja
+         de navegador pegada encima.
+         El truco de Chrome se conserva igual —la pestaña activa es una tarjeta del color del
+         CONTENIDO que se funde con él—, solo que ahora el contraste va al revés en oscuro: la
+         franja es más negra que el contenido, así que la activa destaca por ser más clara. La
+         diferencia es sutil a propósito; quien la marca de verdad es el borde inferior, que la
+         pestaña activa tapa con su propio fondo. */
       :root {
-        --bg: #dee1e6;          /* franja de pestañas (Chrome claro) */
+        --bg: #f4f5f7;          /* franja: casi blanca, del tono de la app en claro */
         --fg: #45474a;
         --muted: #5f6368;
-        --tab-active-bg: #ffffff;
+        --tab-active-bg: #ffffff;  /* mismo fondo que la app → pestaña fundida con el contenido */
         --tab-active-fg: #202124;
         --accent: #6366f1;      /* indigo-500, color de Labstream */
-        --border: #c9ccd1;      /* línea bajo la barra (la tapa la pestaña activa) */
+        --border: #dcdee1;      /* línea bajo la barra (la tapa la pestaña activa) */
-        --hover: rgba(255, 255, 255, 0.55);  /* píldora de hover en pestañas inactivas */
+        /* Sobre una franja casi blanca, un hover blanco no se vería: aquí oscurece. */
+        --hover: rgba(0, 0, 0, 0.06);
         --btn-hover: rgba(0, 0, 0, 0.08);
         --sep: rgba(0, 0, 0, 0.22);          /* separador fino entre pestañas inactivas */
       }
       @media (prefers-color-scheme: dark) {
         :root {
-          --bg: #202124;        /* franja (Chrome oscuro) */
+          --bg: #0d0d0f;        /* franja: negra, más oscura que el contenido */
           --fg: #bdc1c6;
           --muted: #80868b;
           --tab-active-bg: #18181b;  /* mismo fondo que la app → pestaña fundida con el contenido */
           --tab-active-fg: #e8eaed;
-          --border: #101013;
+          --border: #26262a;
           --hover: rgba(255, 255, 255, 0.08);
           --btn-hover: rgba(255, 255, 255, 0.1);
           --sep: rgba(255, 255, 255, 0.25);
@@ -81,10 +88,13 @@
         display: flex;
         align-items: center;
         gap: 7px;
-        /* Elástico como en Chrome: se reparten el ancho y se encogen al abrir más. */
+        /* Elástico como en Chrome: se reparten el ancho y se encogen al abrir más. El tope
+           sube a 280 px porque los títulos ahora traen nombre real y sección
+           («Hotjamin Orgánicos · Archivos»), y a 240 se cortaban de más. Con muchas pestañas
+           abiertas da igual: mandan el reparto y el modo compacto. */
         flex: 1 1 220px;
         min-width: 42px;
-        max-width: 240px;
+        max-width: 280px;
         height: 30px;
         margin-bottom: 5px;
         padding: 0 6px 0 10px;