La barra de pestanas ya no queda debajo del titulo nativo (macOS)

La barra existia pero estaba DIBUJADA DETRAS de la barra de titulo de macOS:
solo asomaban ~12 px por debajo, y como el titulo nativo es translucido hasta
se tenia del color de la barra. Con el rediseno estilo Chrome el sintoma se
volvio evidente (no se veian ni las pestanas ni los controles), pero el fallo
venia de antes: no lo causo el CSS.

Causa (medida en vivo con instrumentacion): en macOS las coordenadas de los
webviews HIJOS son relativas al MARCO de la ventana (incluye el titulo) y
ademas `inner_size()` devuelve el marco, no el area de contenido
(inner_size == outer_size e inner_position == outer_position). Al colocar la
barra en y=0 quedaba bajo el titulo, y el contenido en y=40 arrancaba 12 px
por debajo, tapando el resto.

Arreglo: `top_offset()` compensa el alto del titulo (28 pt) SOLO cuando hace
falta. La deteccion es en caliente -- si el marco y el interior miden lo mismo
hay que compensar; el dia que Tauri lo corrija la resta dejara de ser 0 y no se
compensara nada -- y en Windows/Linux devuelve 0 (ahi las coordenadas ya son
del area de cliente). Se aplica en los tres sitios que colocan webviews:
layout_all, la creacion de la barra y la creacion de cada pestana.

Verificado en el Mac con la app real: barra completa y alineada bajo el
titulo, redimensionado, pestana nueva, cierre de pestana y cambio de pestana.

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

dist/index.html

@@ -11,26 +11,31 @@
         emite   ls-ready, ls-new-tab, ls-activate, ls-close-tab, ls-reload, ls-zoom, ls-cycle, ls-activate-n
     -->
     <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). */
       :root {
-        --bg: #f4f4f5;          /* zinc-100 */
-        --fg: #3f3f46;          /* zinc-700 */
-        --muted: #a1a1aa;       /* zinc-400 */
-        --tab-bg: transparent;
+        --bg: #dee1e6;          /* franja de pestañas (Chrome claro) */
+        --fg: #45474a;
+        --muted: #5f6368;
         --tab-active-bg: #ffffff;
-        --tab-active-fg: #18181b;
+        --tab-active-fg: #202124;
         --accent: #6366f1;      /* indigo-500, color de Labstream */
-        --border: #e4e4e7;      /* zinc-200 */
-        --hover: rgba(0, 0, 0, 0.05);
+        --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 */
+        --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: #18181b;
-          --fg: #d4d4d8;
-          --muted: #71717a;
-          --tab-active-bg: #27272a;
-          --tab-active-fg: #fafafa;
-          --border: #27272a;
-          --hover: rgba(255, 255, 255, 0.07);
+          --bg: #202124;        /* franja (Chrome oscuro) */
+          --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;
+          --hover: rgba(255, 255, 255, 0.08);
+          --btn-hover: rgba(255, 255, 255, 0.1);
+          --sep: rgba(255, 255, 255, 0.25);
         }
       }
       * { box-sizing: border-box; }
@@ -48,18 +53,22 @@
       }
       #bar {
         display: flex;
-        align-items: stretch;
-        gap: 4px;
+        align-items: center;
+        gap: 2px;
         height: 40px;
-        padding: 5px 8px 0;
+        padding: 0 6px 0 8px;
         border-bottom: 1px solid var(--border);
       }
       #tabs {
         display: flex;
-        align-items: stretch;
-        gap: 2px;
+        align-items: flex-end;
         flex: 1 1 auto;
         min-width: 0;
+        /* Se extiende 1px sobre el borde inferior de la barra para que la pestaña ACTIVA
+           lo tape con su propio fondo y quede FUNDIDA con el contenido (look Chrome). */
+        align-self: stretch;
+        margin-bottom: -1px;
+        padding: 0 4px;
         overflow-x: auto;
         scrollbar-width: none;
       }
@@ -67,28 +76,64 @@
       .tab {
         display: flex;
         align-items: center;
-        gap: 6px;
-        flex: 0 1 200px;
-        min-width: 96px;
-        padding: 0 6px 0 12px;
-        border-radius: 8px 8px 0 0;
-        background: var(--tab-bg);
+        gap: 7px;
+        flex: 0 1 220px;
+        min-width: 100px;
+        height: 30px;
+        margin-bottom: 5px;
+        padding: 0 6px 0 10px;
+        border-radius: 9px;         /* inactiva: píldora redondeada (hover) */
         position: relative;
-        overflow: hidden;
+        overflow: visible;          /* deja asomar las curvas de la base de la activa */
       }
-      .tab:hover { background: var(--hover); }
+      .tab:not(.active):hover { background: var(--hover); }
+      /* Separador fino a la IZQUIERDA de cada inactiva; se oculta pegado a la activa,
+         al hover y en la primera (igual que Chrome). */
+      .tab:not(.active)::before {
+        content: "";
+        position: absolute;
+        left: -1px;
+        top: 50%;
+        transform: translateY(-50%);
+        width: 1px;
+        height: 16px;
+        background: var(--sep);
+      }
+      .tab:first-child::before,
+      .tab:hover::before,
+      .tab.active + .tab::before,
+      .tab:hover + .tab::before { display: none; }
       .tab.active {
         background: var(--tab-active-bg);
         color: var(--tab-active-fg);
-        box-shadow: 0 -1px 0 var(--border), 1px 0 0 var(--border), -1px 0 0 var(--border);
+        height: 35px;
+        margin-bottom: 0;           /* su base cae 1px SOBRE el borde de la barra y lo tapa */
+        border-radius: 10px 10px 0 0;
+        z-index: 1;
       }
-      .tab.active::before {
+      /* Curvas cóncavas de Chrome en la base de la pestaña activa: dos piezas de 8px con
+         un cuarto de círculo transparente que "derrama" el fondo hacia los lados. */
+      .tab.active::before,
+      .tab.active::after {
         content: "";
         position: absolute;
-        top: 0; left: 0; right: 0;
-        height: 2px;
-        background: var(--accent);
-        border-radius: 2px 2px 0 0;
+        bottom: 0;
+        width: 8px;
+        height: 8px;
+      }
+      .tab.active::before {
+        left: -8px;
+        background: radial-gradient(circle at 0 0, transparent 8px, var(--tab-active-bg) 8.5px);
+      }
+      .tab.active::after {
+        right: -8px;
+        background: radial-gradient(circle at 8px 0, transparent 8px, var(--tab-active-bg) 8.5px);
+      }
+      .tab .favicon {
+        flex: 0 0 auto;
+        width: 14px;
+        height: 14px;
+        border-radius: 3px;
       }
       .tab .titulo {
         flex: 1 1 auto;
@@ -103,26 +148,26 @@
         height: 18px;
         display: grid;
         place-items: center;
-        border-radius: 5px;
+        border-radius: 50%;         /* circulito, como el × de Chrome */
         color: var(--muted);
         font-size: 13px;
         line-height: 1;
         visibility: hidden;
       }
       .tab:hover .cerrar, .tab.active .cerrar { visibility: visible; }
-      .tab .cerrar:hover { background: var(--hover); color: var(--tab-active-fg); }
+      .tab .cerrar:hover { background: var(--btn-hover); color: var(--tab-active-fg); }
       button {
         appearance: none;
         border: 0;
         background: transparent;
         color: var(--fg);
         font: inherit;
-        border-radius: 7px;
+        border-radius: 50%;
         cursor: default;
         display: grid;
         place-items: center;
       }
-      button:hover { background: var(--hover); }
+      button:hover { background: var(--btn-hover); }
       .icono {
         flex: 0 0 auto;
         width: 30px;
@@ -186,6 +231,15 @@
       const $pct = document.getElementById("z-pct");
       const $ver = document.getElementById("version");
 
+      // Favicon de las pestañas (look Chrome): mini logo Labstream en SVG inline —
+      // cuadrado indigo con la "L" — para no depender de archivos ni de la red.
+      const FAVICON = "data:image/svg+xml," + encodeURIComponent(
+        "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'>" +
+        "<rect width='16' height='16' rx='4' fill='#6366f1'/>" +
+        "<path d='M5.2 3.8v7h5.6' stroke='#fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' fill='none'/>" +
+        "</svg>",
+      );
+
       function render() {
         $tabs.textContent = "";
         for (const t of estado.tabs) {
@@ -193,6 +247,12 @@
           el.className = "tab" + (t.active ? " active" : "");
           el.title = t.title;
 
+          const fav = document.createElement("img");
+          fav.className = "favicon";
+          fav.src = FAVICON;
+          fav.alt = "";
+          el.appendChild(fav);
+
           const titulo = document.createElement("span");
           titulo.className = "titulo";
           titulo.textContent = t.title || "Labstream OS";

src-tauri/Cargo.lock

@@ -1946,7 +1946,7 @@ dependencies = [
 
 [[package]]
 name = "labstream-desktop"
-version = "1.4.0"
+version = "1.4.2"
 dependencies = [
  "serde",
  "serde_json",

src-tauri/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "labstream-desktop"
-version = "1.4.0"
+version = "1.4.2"
 description = "Cliente de escritorio de Labstream OS"
 authors = ["Labstream SAS"]
 edition = "2021"

src-tauri/src/lib.rs

@@ -51,6 +51,9 @@ use tauri_plugin_opener::OpenerExt;
 const SERVER_URL: &str = "https://os.labstreamsas.com";
 const TAB_BAR_H: f64 = 40.0; // alto lógico de la barra de pestañas (chrome)
 const CHROME: &str = "chrome";
+// Alto de la barra de título nativa de macOS (ventana estándar). Ver `top_offset`.
+#[cfg(target_os = "macos")]
+const MACOS_TITLEBAR_H: f64 = 28.0;
 
 // Escalones de zoom (como un navegador). 1.0 = 100%.
 const ZOOM_STEPS: &[f64] = &[0.5, 0.67, 0.75, 0.8, 0.9, 1.0, 1.1, 1.25, 1.5, 1.75, 2.0, 2.5];
@@ -268,19 +271,40 @@ fn get_webview<R: Runtime>(app: &AppHandle<R>, label: &str) -> Option<Webview<R>
     main_window(app).and_then(|w| w.webviews().into_iter().find(|v| v.label() == label))
 }
 
+// En macOS las coordenadas de los webviews HIJOS son relativas al MARCO de la ventana
+// (incluye la barra de título) y `inner_size()` devuelve también el marco. Sin compensar,
+// la barra de pestañas se dibuja DEBAJO del título nativo y solo asoman ~12 px (además el
+// título translúcido se teñía del color de la barra). Se detecta en caliente: si el marco y
+// el interior miden lo mismo hay que compensar; si Tauri lo corrige, la resta deja de ser 0
+// y no se compensa nada. En Windows/Linux siempre es 0 (ahí las coordenadas ya son del área
+// de cliente).
+fn top_offset<R: Runtime>(win: &Window<R>, scale: f64) -> f64 {
+    #[cfg(target_os = "macos")]
+    if let (Ok(outer), Ok(inner)) = (win.outer_size(), win.inner_size()) {
+        let o = outer.to_logical::<f64>(scale).height;
+        let i = inner.to_logical::<f64>(scale).height;
+        if (o - i).abs() < 1.0 {
+            return MACOS_TITLEBAR_H;
+        }
+    }
+    let _ = (win, scale);
+    0.0
+}
+
 // Geometría: barra arriba (alto fijo), contenido debajo ocupando el resto.
 fn layout_all<R: Runtime>(app: &AppHandle<R>) {
     let Some(win) = main_window(app) else { return };
     let scale = win.scale_factor().unwrap_or(1.0);
     let Ok(size) = win.inner_size() else { return };
     let size = size.to_logical::<f64>(scale);
-    let content_h = (size.height - TAB_BAR_H).max(0.0);
+    let top = top_offset(&win, scale);
+    let content_h = (size.height - top - TAB_BAR_H).max(0.0);
     for wv in win.webviews() {
         if wv.label() == CHROME {
-            let _ = wv.set_position(LogicalPosition::new(0.0, 0.0));
+            let _ = wv.set_position(LogicalPosition::new(0.0, top));
             let _ = wv.set_size(LogicalSize::new(size.width, TAB_BAR_H));
         } else {
-            let _ = wv.set_position(LogicalPosition::new(0.0, TAB_BAR_H));
+            let _ = wv.set_position(LogicalPosition::new(0.0, top + TAB_BAR_H));
             let _ = wv.set_size(LogicalSize::new(size.width, content_h));
         }
     }
@@ -375,10 +399,11 @@ fn create_tab<R: Runtime>(app: &AppHandle<R>, url: Option<String>, activate: boo
             }
         });
 
+    let top = top_offset(&win, scale);
     let created = win.add_child(
         builder,
-        LogicalPosition::new(0.0, TAB_BAR_H),
-        LogicalSize::new(size.width, (size.height - TAB_BAR_H).max(0.0)),
+        LogicalPosition::new(0.0, top + TAB_BAR_H),
+        LogicalSize::new(size.width, (size.height - top - TAB_BAR_H).max(0.0)),
     );
 
     match created {
@@ -892,7 +917,7 @@ pub fn run() {
             let size = win.inner_size()?.to_logical::<f64>(scale);
             win.add_child(
                 WebviewBuilder::new(CHROME, WebviewUrl::App("index.html".into())),
-                LogicalPosition::new(0.0, 0.0),
+                LogicalPosition::new(0.0, top_offset(&win, scale)),
                 LogicalSize::new(size.width, TAB_BAR_H),
             )?;
 

src-tauri/tauri.conf.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "Labstream OS",
-  "version": "1.4.0",
+  "version": "1.4.2",
   "identifier": "co.labstream.os",
   "build": {
     "frontendDist": "../dist"