orbital-ds 0.6.2 → 0.8.0

package/AGENTS.md

@@ -58,3 +58,23 @@ Si `pnpm check:ds` falla, **corrige la causa**; no lo desactives ni lo rodees.
 
 Copia `themes/qratia.css` (o `zyro.css`), cambia valores, no quites ninguno, añade
 `<tema>.fonts.css` con el `@import url()` de sus fuentes y ejecuta `pnpm check:ds`.
+
+## Estándar de integración (cómo debe ajustarse una app)
+
+Para que una app (o un agente que la edite) use orbital-ds sin romper nada:
+
+1. **La marca vive solo en `brand.css`.** Ninguna regla de color propia fuera de ese fichero; jamás se edita el paquete.
+2. **Solo variables públicas.** Nada de variables privadas de un tema: pueden renombrarse. Usa `--ds-*` y los tokens del contrato (`--zw-*` de `tactile` están obsoletas: usa `--ds-key-outline`, `--ds-key-edge` y `--ds-marker`).
+3. **Sin `!important` ni selectores propios** para vencer a la librería (lateral, raíl, botones). Si algo no se puede ajustar con un token, es un hueco de la librería: abre un issue.
+4. **El tema se elige con un solo `@import`** (o `pnpm theme`). Los temas con ámbito (`*.scoped.css`) son solo para un banco de pruebas; la marca (`brand.css`) gana siempre, también sobre ellos.
+5. **Patrón de página.** La cabecera lleva solo botón de menú, título y, siempre visibles, idioma y tema (y avisos si la app los tiene). El subtítulo y las acciones de la vista van al inicio del contenido, centrado en un ancho máximo; solo un lienzo (mapa, kanban, editor) ocupa todo el ancho.
+6. **Cada tema se documenta y se elige informado.** Lee `orbital-ds/themes/<tema>.guide.md` y su ficha `<tema>.meta.json` (esencia, gesto firma, paleta, accesibilidad, qué valores son aproximados) antes de usar o ajustar un tema.
+7. **Comprueba antes de dar algo por bueno:** `pnpm exec orbital-ds-doctor --css src/brand.css` y el `verify` de la app.
+
+### Accesibilidad (WCAG 2.2)
+
+- **Mínimo exigible: AA.** Texto 4,5:1; texto grande y controles 3:1. `pnpm check:ds` falla si un par principal de texto sobre su superficie (texto/fondo, tarjeta, popover, primario, secundario, lateral, destructivo) o un texto de estado (info, danger, warning, success, neutral) baja de 4,5:1.
+- **Objetivo: AAA en el texto del cuerpo** (7:1 para texto/fondo y texto/tarjeta). Se mide con `pnpm check:ds -- --aaa` y avisa, no falla: WCAG no aconseja exigir AAA a todo el sitio. Hoy todos los temas lo cumplen.
+- **Excepciones declaradas, nunca silenciosas.** Si un tema no puede cumplir un par (el azul de marca de Twitter con texto blanco da 3:1), lo declara en su ficha, en `a11y.exceptions`, con su porqué; el doctor lo muestra como aviso.
+- **Foco siempre visible** (anillo de 3:1 como mínimo) y sin que otro elemento lo tape.
+- **Una marca nueva debe volver a pasar el doctor.** Cambiar `--primary` obliga a revisar `--primary-foreground`, `--link` y `--ring`.

package/README.md

@@ -1,73 +1,87 @@
-# orbital-ds
-
-Sistema de diseño genérico: **estructura común + temas intercambiables + ~60 componentes**
-sobre [Base UI](https://base-ui.com) y Tailwind v4 (los de shadcn en su versión Base UI).
-
-- `styles.css` — la ESTRUCTURA: mapea variables de tema a utilidades de Tailwind y define los
-  tokens semánticos (radios, alturas, sombras, espaciado, capas, movimiento, foco, materiales)
-  y la capa base. No lleva colores ni fuentes.
-- `themes/<tema>.css` — un TEMA: paleta (claro/oscuro), radio base y tipografía.
-  Hoy: `qratia` y `zyro` (cristal). Añadir otro = añadir otro fichero.
-- `themes/<tema>.fonts.css` — las fuentes del tema (un `@import url()`; va el primero).
-- `ui/*` — componentes, uno por fichero (`orbital-ds/ui/button`, …): quien no usa gráficos
-  no necesita `recharts`, quien no usa el calendario no necesita `react-day-picker`.
-- `contract.json` + `pnpm check:ds` — el contrato de tema y su comprobación.
-
-## Uso en una app (Tailwind v4)
-
-```css
-@import 'orbital-ds/themes/qratia.fonts.css'; /* fuentes: lo primero */
-@import 'tailwindcss';
-@plugin '@tailwindcss/typography';
-@import 'tw-animate-css';
-@import 'orbital-ds/styles.css';              /* estructura */
-@import 'orbital-ds/themes/qratia.css';       /* tema (después de la estructura) */
-@source '../node_modules/orbital-ds/dist';    /* que Tailwind vea las clases del paquete */
-```
-
-```tsx
-import { Button } from 'orbital-ds/ui/button';
-```
-
-Cambiar de identidad = cambiar `qratia` por `zyro` en esas dos líneas de tema/fuentes.
-Detalle del contrato, tokens y reglas de nombres en [`docs/CONTRACT.md`](docs/CONTRACT.md).
-
-## Guía de cada tema
-
-Cada tema lleva su documentación, que viaja con el paquete:
-
-- `orbital-ds/themes/<tema>.guide.md` — guía de diseño: esencia, gesto firma, principios, referencias (qué se tomó de cada una), paleta, tipografía, formas, accesibilidad y estado de los valores (confirmados, aproximados o de diseño propio).
-- `orbital-ds/themes/<tema>.meta.json` — la misma ficha legible por máquina.
-
-`pnpm check:ds` falla si a un tema le falta alguna de las dos. Un tema nuevo debe nacer con ambas.
-
-## Marca de una app
-
-Lo propio de cada app (color principal, acento, radio, fuentes) va en **su** `src/brand.css`,
-importado después del tema. Ninguna actualización de orbital-ds lo toca. `pnpm exec orbital-ds-init`
-lo crea la primera vez. Detalle en [`docs/CONTRACT.md`](docs/CONTRACT.md).
-
-## Regla
-
-Ningún componente lleva valores propios (colores, medidas, sombras, z-index, duraciones):
-pide un hueco a una variable. Para cambiar el aspecto se cambia el tema, no el componente.
-Si un componente necesita un hueco nuevo, se AÑADE el token con un valor que deje el aspecto
-como estaba. `pnpm check:ds` lo comprueba.
-
-## Desarrollo
-
-```bash
-pnpm install
-pnpm verify    # doctor + typecheck + build
-pnpm check:ds    # solo el contrato de tema y los valores fijos
-```
-
-Peers obligatorios: `react`, `react-dom`, `@base-ui/react`, `tailwindcss`, `tailwind-merge`,
-`class-variance-authority`, `clsx`, `lucide-react`, `tw-animate-css`.
-Opcionales (solo si usas ese componente): `recharts`, `sonner`, `next-themes`, `cmdk`,
-`date-fns` + `react-day-picker`, `embla-carousel-react`, `input-otp`,
-`react-resizable-panels`, `@shadcn/react`.
-
-## Licencia
-
-MIT © Fractalia Systems
+# orbital-ds
+
+Sistema de diseño genérico: **estructura común + temas intercambiables + ~60 componentes**
+sobre [Base UI](https://base-ui.com) y Tailwind v4 (los de shadcn en su versión Base UI).
+
+- `styles.css` — la ESTRUCTURA: mapea variables de tema a utilidades de Tailwind y define los
+  tokens semánticos (radios, alturas, sombras, espaciado, capas, movimiento, foco, materiales)
+  y la capa base. No lleva colores ni fuentes.
+- `themes/<tema>.css` — un TEMA: paleta (claro/oscuro), radio base y tipografía.
+  Hoy: `qratia` y `zyro` (cristal). Añadir otro = añadir otro fichero.
+- `themes/<tema>.fonts.css` — las fuentes del tema (un `@import url()`; va el primero).
+- `ui/*` — componentes, uno por fichero (`orbital-ds/ui/button`, …): quien no usa gráficos
+  no necesita `recharts`, quien no usa el calendario no necesita `react-day-picker`.
+- `contract.json` + `pnpm check:ds` — el contrato de tema y su comprobación.
+
+## Uso en una app (Tailwind v4)
+
+```css
+@import 'orbital-ds/themes/qratia.fonts.css'; /* fuentes: lo primero */
+@import 'tailwindcss';
+@plugin '@tailwindcss/typography';
+@import 'tw-animate-css';
+@import 'orbital-ds/styles.css';              /* estructura */
+@import 'orbital-ds/themes/qratia.css';       /* tema (después de la estructura) */
+@source '../node_modules/orbital-ds/dist';    /* que Tailwind vea las clases del paquete */
+```
+
+```tsx
+import { Button } from 'orbital-ds/ui/button';
+```
+
+Cambiar de identidad = cambiar `qratia` por `zyro` en esas dos líneas de tema/fuentes.
+Detalle del contrato, tokens y reglas de nombres en [`docs/CONTRACT.md`](docs/CONTRACT.md).
+
+## Generar la marca desde un color (asistente)
+
+```
+pnpm exec orbital-ds-init                      # asistente interactivo
+pnpm exec orbital-ds-init --primary "#1D63D8"  # sin preguntas (CI, scripts)
+```
+
+A partir del **color primario** (hex, `rgb()`, `hsl()` u `oklch()`) deriva en OKLCH los neutros teñidos
+(papel, tinta, tarjeta, bordes, lateral), el texto sobre el primario, el enlace y el foco, en piel clara y
+oscura, y **comprueba el contraste** (AA 4,5:1). Si un color no llega, lo ajusta lo mínimo y te lo dice.
+Escribe solo un bloque delimitado en `brand.css`; con `--update` lo reescribe y lo tuyo de fuera no se
+toca. Opciones: `--theme`, `--accent`, `--no-marker` (apaga el rotulador de `tactile`), `--dry-run`,
+`--yes`, `--out`. Sin dependencias.
+
+## Guía de cada tema
+
+Cada tema lleva su documentación, que viaja con el paquete:
+
+- `orbital-ds/themes/<tema>.guide.md` — guía de diseño: esencia, gesto firma, principios, referencias (qué se tomó de cada una), paleta, tipografía, formas, accesibilidad y estado de los valores (confirmados, aproximados o de diseño propio).
+- `orbital-ds/themes/<tema>.meta.json` — la misma ficha legible por máquina.
+
+`pnpm check:ds` falla si a un tema le falta alguna de las dos. Un tema nuevo debe nacer con ambas.
+
+## Marca de una app
+
+Lo propio de cada app (color principal, acento, radio, fuentes) va en **su** `src/brand.css`,
+importado después del tema. Ninguna actualización de orbital-ds lo toca. `pnpm exec orbital-ds-init`
+lo crea la primera vez. Detalle en [`docs/CONTRACT.md`](docs/CONTRACT.md).
+
+## Regla
+
+Ningún componente lleva valores propios (colores, medidas, sombras, z-index, duraciones):
+pide un hueco a una variable. Para cambiar el aspecto se cambia el tema, no el componente.
+Si un componente necesita un hueco nuevo, se AÑADE el token con un valor que deje el aspecto
+como estaba. `pnpm check:ds` lo comprueba.
+
+## Desarrollo
+
+```bash
+pnpm install
+pnpm verify    # doctor + typecheck + build
+pnpm check:ds    # solo el contrato de tema y los valores fijos
+```
+
+Peers obligatorios: `react`, `react-dom`, `@base-ui/react`, `tailwindcss`, `tailwind-merge`,
+`class-variance-authority`, `clsx`, `lucide-react`, `tw-animate-css`.
+Opcionales (solo si usas ese componente): `recharts`, `sonner`, `next-themes`, `cmdk`,
+`date-fns` + `react-day-picker`, `embla-carousel-react`, `input-otp`,
+`react-resizable-panels`, `@shadcn/react`.
+
+## Licencia
+
+MIT © Fractalia Systems

package/components.manifest.json

@@ -1,6 +1,6 @@
 {
   "package": "orbital-ds",
-  "version": "0.6.1",
+  "version": "0.8.0",
   "engine": "@base-ui/react",
   "docs": [
     "README.md",
@@ -1256,6 +1256,7 @@
       ],
       "slots": [
         "tooltip",
+        "tooltip-arrow",
         "tooltip-content",
         "tooltip-provider",
         "tooltip-trigger"

package/contract.json

@@ -1,162 +1,168 @@
-{
-  "version": 3,
-  "descripcion": "Contrato de tema de orbital-ds: todo tema (themes/*.css) debe definir estos tokens en :root. Nombres en inglés estándar; los de shadcn sin prefijo; los propios con --ds-. baseTheme es el tema aplicado siempre (los demás se aplican encima, con ámbito).",
-  "root": [
-    "radius",
-    "background",
-    "foreground",
-    "card",
-    "card-foreground",
-    "popover",
-    "popover-foreground",
-    "primary",
-    "primary-foreground",
-    "secondary",
-    "secondary-foreground",
-    "muted",
-    "muted-foreground",
-    "accent",
-    "accent-foreground",
-    "destructive",
-    "destructive-foreground",
-    "border",
-    "input",
-    "ring",
-    "chart-1",
-    "chart-2",
-    "chart-3",
-    "chart-4",
-    "chart-5",
-    "sidebar",
-    "sidebar-foreground",
-    "sidebar-primary",
-    "sidebar-primary-foreground",
-    "sidebar-accent",
-    "sidebar-accent-foreground",
-    "sidebar-border",
-    "sidebar-ring",
-    "danger",
-    "danger-soft",
-    "warning",
-    "warning-soft",
-    "success",
-    "success-soft",
-    "info",
-    "info-soft",
-    "neutral",
-    "neutral-soft",
-    "link",
-    "link-hover",
-    "inset",
-    "inset-foreground",
-    "brand",
-    "brand-bright"
-  ],
-  "fonts": [
-    "ds-font-sans"
-  ],
-  "dark": {
-    "descripcion": "Recomendados en .dark (si faltan, el tema hereda el valor claro y doctor avisa).",
-    "avisar_si_falta": [
-      "background",
-      "foreground",
-      "card",
-      "card-foreground",
-      "popover",
-      "popover-foreground",
-      "primary",
-      "primary-foreground",
-      "muted",
-      "muted-foreground",
-      "border",
-      "input",
-      "ring",
-      "danger",
-      "warning",
-      "success",
-      "info",
-      "link"
-    ]
-  },
-  "baseTheme": "qratia",
-  "brand": {
-    "descripcion": "Grupo ESTABLE de variables que una app suele personalizar en su fichero de marca (brand.css). Renombrar o quitar una es versión MAYOR. Todas están también en `root` salvo las --ds-*.",
-    "tokens": [
-      {
-        "name": "primary",
-        "example": "oklch(0.55 0.2 260)",
-        "about": "color de acción principal (botones, foco)"
-      },
-      {
-        "name": "primary-foreground",
-        "example": "#ffffff",
-        "about": "texto sobre el color principal (comprueba el contraste)"
-      },
-      {
-        "name": "ring",
-        "example": "oklch(0.55 0.2 260)",
-        "about": "anillo de foco; suele ir igual que primary"
-      },
-      {
-        "name": "link",
-        "example": "oklch(0.5 0.15 260)",
-        "about": "texto de enlace: más oscuro que primary para tener contraste"
-      },
-      {
-        "name": "link-hover",
-        "example": "oklch(0.42 0.13 260)",
-        "about": "enlace al pasar el ratón"
-      },
-      {
-        "name": "brand",
-        "example": "oklch(0.7 0.13 220)",
-        "about": "acento de marca (detalles, selección)"
-      },
-      {
-        "name": "brand-bright",
-        "example": "oklch(0.8 0.13 220)",
-        "about": "acento de marca sobre fondos oscuros"
-      },
-      {
-        "name": "sidebar-primary",
-        "example": "oklch(0.8 0.13 220)",
-        "about": "acento dentro del sidebar"
-      },
-      {
-        "name": "sidebar-primary-foreground",
-        "example": "#04121c",
-        "about": "texto sobre el acento del sidebar"
-      },
-      {
-        "name": "sidebar-accent-foreground",
-        "example": "oklch(0.85 0.1 220)",
-        "about": "texto del destino activo del sidebar"
-      },
-      {
-        "name": "accent-foreground",
-        "example": "oklch(0.5 0.15 260)",
-        "about": "texto sobre superficies de acento suave"
-      },
-      {
-        "name": "chart-1",
-        "example": "oklch(0.55 0.2 260)",
-        "about": "primera serie de las gráficas: la marca"
-      },
-      {
-        "name": "radius",
-        "example": "12px",
-        "about": "redondez base (en temas cuya rampa deriva de ella)"
-      },
-      {
-        "name": "ds-font-sans",
-        "example": "'Inter', system-ui, sans-serif",
-        "about": "fuente del cuerpo (carga la fuente en tu app)"
-      },
-      {
-        "name": "ds-font-display",
-        "example": "'Sora', system-ui, sans-serif",
-        "about": "fuente de los titulares"
-      }
-    ]
-  }
-}
+{
+  "version": 4,
+  "descripcion": "Contrato de tema de orbital-ds: todo tema (themes/*.css) debe definir estos tokens en :root. Nombres en inglés estándar; los de shadcn sin prefijo; los propios con --ds-. baseTheme es el tema aplicado siempre (los demás se aplican encima, con ámbito).",
+  "root": [
+    "radius",
+    "background",
+    "foreground",
+    "card",
+    "card-foreground",
+    "popover",
+    "popover-foreground",
+    "primary",
+    "primary-foreground",
+    "secondary",
+    "secondary-foreground",
+    "muted",
+    "muted-foreground",
+    "accent",
+    "accent-foreground",
+    "destructive",
+    "destructive-foreground",
+    "border",
+    "input",
+    "ring",
+    "chart-1",
+    "chart-2",
+    "chart-3",
+    "chart-4",
+    "chart-5",
+    "sidebar",
+    "sidebar-foreground",
+    "sidebar-primary",
+    "sidebar-primary-foreground",
+    "sidebar-accent",
+    "sidebar-accent-foreground",
+    "sidebar-border",
+    "sidebar-ring",
+    "danger",
+    "danger-soft",
+    "warning",
+    "warning-soft",
+    "success",
+    "success-soft",
+    "info",
+    "info-soft",
+    "neutral",
+    "neutral-soft",
+    "link",
+    "link-hover",
+    "inset",
+    "inset-foreground",
+    "brand",
+    "brand-bright",
+    "ds-sidebar-icon",
+    "ds-sidebar-icon-stroke",
+    "ds-sidebar-rail-w",
+    "ds-sidebar-rail-item",
+    "ds-sidebar-logo",
+    "ds-sidebar-sep-inset"
+  ],
+  "fonts": [
+    "ds-font-sans"
+  ],
+  "dark": {
+    "descripcion": "Recomendados en .dark (si faltan, el tema hereda el valor claro y doctor avisa).",
+    "avisar_si_falta": [
+      "background",
+      "foreground",
+      "card",
+      "card-foreground",
+      "popover",
+      "popover-foreground",
+      "primary",
+      "primary-foreground",
+      "muted",
+      "muted-foreground",
+      "border",
+      "input",
+      "ring",
+      "danger",
+      "warning",
+      "success",
+      "info",
+      "link"
+    ]
+  },
+  "baseTheme": "qratia",
+  "brand": {
+    "descripcion": "Grupo ESTABLE de variables que una app suele personalizar en su fichero de marca (brand.css). Renombrar o quitar una es versión MAYOR. Todas están también en `root` salvo las --ds-*.",
+    "tokens": [
+      {
+        "name": "primary",
+        "example": "oklch(0.55 0.2 260)",
+        "about": "color de acción principal (botones, foco)"
+      },
+      {
+        "name": "primary-foreground",
+        "example": "#ffffff",
+        "about": "texto sobre el color principal (comprueba el contraste)"
+      },
+      {
+        "name": "ring",
+        "example": "oklch(0.55 0.2 260)",
+        "about": "anillo de foco; suele ir igual que primary"
+      },
+      {
+        "name": "link",
+        "example": "oklch(0.5 0.15 260)",
+        "about": "texto de enlace: más oscuro que primary para tener contraste"
+      },
+      {
+        "name": "link-hover",
+        "example": "oklch(0.42 0.13 260)",
+        "about": "enlace al pasar el ratón"
+      },
+      {
+        "name": "brand",
+        "example": "oklch(0.7 0.13 220)",
+        "about": "acento de marca (detalles, selección)"
+      },
+      {
+        "name": "brand-bright",
+        "example": "oklch(0.8 0.13 220)",
+        "about": "acento de marca sobre fondos oscuros"
+      },
+      {
+        "name": "sidebar-primary",
+        "example": "oklch(0.8 0.13 220)",
+        "about": "acento dentro del sidebar"
+      },
+      {
+        "name": "sidebar-primary-foreground",
+        "example": "#04121c",
+        "about": "texto sobre el acento del sidebar"
+      },
+      {
+        "name": "sidebar-accent-foreground",
+        "example": "oklch(0.85 0.1 220)",
+        "about": "texto del destino activo del sidebar"
+      },
+      {
+        "name": "accent-foreground",
+        "example": "oklch(0.5 0.15 260)",
+        "about": "texto sobre superficies de acento suave"
+      },
+      {
+        "name": "chart-1",
+        "example": "oklch(0.55 0.2 260)",
+        "about": "primera serie de las gráficas: la marca"
+      },
+      {
+        "name": "radius",
+        "example": "12px",
+        "about": "redondez base (en temas cuya rampa deriva de ella)"
+      },
+      {
+        "name": "ds-font-sans",
+        "example": "'Inter', system-ui, sans-serif",
+        "about": "fuente del cuerpo (carga la fuente en tu app)"
+      },
+      {
+        "name": "ds-font-display",
+        "example": "'Sora', system-ui, sans-serif",
+        "about": "fuente de los titulares"
+      }
+    ]
+  }
+}

package/dist/styles.css

@@ -194,6 +194,11 @@
   --ds-sidebar-ring: 1px;
   --ds-sidebar-edge: 0 solid transparent;
   --ds-sidebar-rail-w: 4rem; /* ancho del lateral contraído (raíl de iconos) */
+  --ds-sidebar-rail-item: 2.5rem; /* lado del botón de cada destino en el raíl */
+  --ds-sidebar-icon: 1.125rem; /* tamaño de los iconos del lateral */
+  --ds-sidebar-icon-stroke: 2; /* grosor del trazo de esos iconos */
+  --ds-sidebar-logo: 2rem; /* ficha del logo y del avatar del lateral */
+  --ds-sidebar-sep-inset: 0rem; /* margen lateral de los separadores (negativo = de borde a borde) */
   --ds-sidebar-item-radius: var(--ds-radius-md);
   --ds-sidebar-item-h: 2.5rem;
 
@@ -435,15 +440,27 @@
    * TAMAÑO Y ALINEACIÓN DE LA NAVEGACIÓN (los `!important` baten a las
    * utilidades que el primitivo trae escritas).
    * EXPANDIDO: filas de altura `--ds-sidebar-item-h` con icono de 18px.
-   * COLAPSADO: botón de 40px y padding lateral de 12px → icono centrado en el
-   * raíl de 64px.
+   * COLAPSADO: botón cuadrado de `--ds-sidebar-rail-item` con el icono centrado,
+   * sin etiqueta, y el botón centrado en el raíl (`--ds-sidebar-rail-w`).
    */
   [data-sidebar='menu-button'] {
     min-height: var(--ds-sidebar-item-h);
   }
   [data-sidebar='menu-button'] svg {
-    width: 1.125rem !important;
-    height: 1.125rem !important;
+    width: var(--ds-sidebar-icon) !important;
+    height: var(--ds-sidebar-icon) !important;
+    stroke-width: var(--ds-sidebar-icon-stroke);
+  }
+  /* Logo / avatar del lateral (botones lg: marca y cuenta) */
+  [data-sidebar='menu-button'][data-size='lg'] > :first-child {
+    width: var(--ds-sidebar-logo);
+    height: var(--ds-sidebar-logo);
+    flex: 0 0 var(--ds-sidebar-logo);
+  }
+  /* Separadores: alineados con las filas (0) o de borde a borde (negativo) */
+  [data-slot='sidebar-separator'] {
+    margin-inline: var(--ds-sidebar-sep-inset);
+    width: auto;
   }
 
   [data-collapsible='icon'] [data-slot='sidebar-header'],
@@ -451,14 +468,19 @@
   [data-collapsible='icon'] [data-slot='sidebar-group'] {
     padding-inline: 0.75rem;
   }
+  /* Raíl: tecla cuadrada, centrada, con el icono centrado dentro y sin etiqueta */
   [data-collapsible='icon'] [data-sidebar='menu-button'] {
-    width: 2.5rem !important;
-    height: 2.5rem !important;
-    padding: 0.6875rem !important; /* (40−18)/2: icono centrado */
+    width: var(--ds-sidebar-rail-item) !important;
+    height: var(--ds-sidebar-rail-item) !important;
+    min-height: var(--ds-sidebar-rail-item);
+    padding: 0 !important;
+    gap: 0;
+    justify-content: center;
+    margin-inline: auto;
   }
-  /* Botones lg (marca, cuenta): dentro va una ficha de 32px → 4px de aire. */
-  [data-collapsible='icon'] [data-sidebar='menu-button'][data-size='lg'] {
-    padding: 0.25rem !important;
+  [data-collapsible='icon'] [data-sidebar='menu-button'] > span:last-child:not(:first-child),
+  [data-collapsible='icon'] [data-sidebar='menu-button'][data-size='lg'] > :not(:first-child) {
+    display: none;
   }
 
   /*