From f6eea754045dab75807dd4258f10c77652dfd7f7 Mon Sep 17 00:00:00 2001
From: Munka <hola@labstream.co>
Date: Wed, 29 Jul 2026 15:45:38 -0500
Subject: [PATCH] La barra se pinta del color de la app: blanca en claro, negra
 en oscuro
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 | 30 ++++++++++++++++++++----------
 1 file changed, 20 insertions(+), 10 deletions(-)

diff --git a/dist/index.html b/dist/index.html
index fdf30ce..c3e63cb 100644
--- a/dist/index.html
+++ b/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
-         tarjeta del color del contenido que se funde con él (sin línea debajo). */
+      /* La barra se pinta del color de la APP, no del gris de Chrome: blanca en tema claro y
+         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) */
-        --hover: rgba(255, 255, 255, 0.55);  /* píldora de hover en pestañas inactivas */
+        --border: #dcdee1;      /* línea bajo la barra (la tapa la pestaña activa) */
+        /* 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;