orbital-ds 0.8.0 → 0.9.0

package/dist/styles.css

@@ -1,528 +1,876 @@
-/*
- * orbital-ds · ESTRUCTURA común a todos los temas.
- *
- * Reglas de oro:
- *   1. Esta hoja no tiene colores ni fuentes concretas: eso lo aporta un TEMA
- *      (`orbital-ds/themes/<tema>.css`).
- *   2. Todo lo que cambia el aspecto es una VARIABLE (`--ds-*` o las de color
- *      de shadcn). Las utilidades de Tailwind solo REFERENCIAN variables
- *      (`@theme inline { --radius-sm: var(--ds-radius-sm) }`), nunca llevan un
- *      valor escrito. Por eso un tema puede cambiar formas, sombras, fuentes,
- *      escala tipográfica y anatomía del sidebar, también EN VIVO.
- *   3. Los valores por defecto viven en la capa `theme` de Tailwind: cualquier
- *      tema (CSS sin capa) los gana, sea cual sea el orden de importación.
- *
- * Uso en la app:
- *
- *   @import 'orbital-ds/themes/<tema>.fonts.css';  <- lo PRIMERO del fichero
- *   @import 'tailwindcss';
- *   @import 'orbital-ds/styles.css';               <- esta estructura
- *   @import 'orbital-ds/themes/<tema>.css';        <- un tema
- *   @source '../node_modules/orbital-ds/dist';     <- que Tailwind vea las clases
- */
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-  /* ── TIPOGRAFÍA ─────────────────────────────────────────────────────────
-   * Familias: las define el tema (--ds-font-sans / -display / -mono).
-   * Escala: Tailwind la lee de variables; cada paso lleva tamaño e interlineado.
-   * Los tamaños por defecto son los estándar de Tailwind.
-   *   Display text-4xl · H1 text-3xl · H2 text-xl · H3 text-base · cuerpo text-sm
-   *   etiqueta/ayuda text-xs. La jerarquía la hacen tamaño y peso, no el color.
-   */
-  --font-sans: var(--ds-font-sans);
-  --font-display: var(--ds-font-display);
-  --font-mono: var(--ds-font-mono);
-
-  --ds-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
-  --ds-font-display: var(--ds-font-sans);
-  --ds-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
-
-  --text-xs: var(--ds-text-xs);
-  --text-xs--line-height: var(--ds-leading-xs);
-  --text-sm: var(--ds-text-sm);
-  --text-sm--line-height: var(--ds-leading-sm);
-  --text-base: var(--ds-text-base);
-  --text-base--line-height: var(--ds-leading-base);
-  --text-lg: var(--ds-text-lg);
-  --text-lg--line-height: var(--ds-leading-lg);
-  --text-xl: var(--ds-text-xl);
-  --text-xl--line-height: var(--ds-leading-xl);
-  --text-2xl: var(--ds-text-2xl);
-  --text-2xl--line-height: var(--ds-leading-2xl);
-  --text-3xl: var(--ds-text-3xl);
-  --text-3xl--line-height: var(--ds-leading-3xl);
-  --text-4xl: var(--ds-text-4xl);
-  --text-4xl--line-height: var(--ds-leading-4xl);
-
-  --ds-text-xs: 0.75rem;
-  --ds-leading-xs: 1.3333;
-  --ds-text-sm: 0.875rem;
-  --ds-leading-sm: 1.4286;
-  --ds-text-base: 1rem;
-  --ds-leading-base: 1.5;
-  --ds-text-lg: 1.125rem;
-  --ds-leading-lg: 1.5556;
-  --ds-text-xl: 1.25rem;
-  --ds-leading-xl: 1.4;
-  --ds-text-2xl: 1.5rem;
-  --ds-leading-2xl: 1.3333;
-  --ds-text-3xl: 1.875rem;
-  --ds-leading-3xl: 1.2;
-  --ds-text-4xl: 2.25rem;
-  --ds-leading-4xl: 1.1111;
-
-  /* Espaciado de letras de los títulos (los que no traen su propia clase). */
-  --ds-heading-tracking: normal;
-
-  /* ── FORMAS ─────────────────────────────────────────────────────────────
-   * Rampa de radios, derivada de `--radius` (mover UN valor cambia la redondez
-   * del producto). Un tema puede además fijar cada paso con --ds-radius-*.
-   *   sm chip · md control · lg fila · xl tarjeta · 2xl vista y barra
-   * Radios semánticos: los componentes piden el hueco, no una medida.
-   *   control: campos, selects, pestañas, tooltips · overlay: diálogos y paneles
-   */
-  --radius-sm: var(--ds-radius-sm);
-  --radius-md: var(--ds-radius-md);
-  --radius-lg: var(--ds-radius-lg);
-  --radius-xl: var(--ds-radius-xl);
-  --radius-2xl: var(--ds-radius-2xl);
-  --radius-control: var(--ds-radius-control);
-  --radius-overlay: var(--ds-radius-overlay);
-
-  --ds-radius-sm: calc(var(--radius) - 4px);
-  --ds-radius-md: calc(var(--radius) - 2px);
-  --ds-radius-lg: var(--radius);
-  --ds-radius-xl: calc(var(--radius) + 6px);
-  --ds-radius-2xl: calc(var(--radius) + 8px);
-  --ds-radius-control: 2rem;
-  --ds-radius-overlay: 2rem;
-
-  /* ── ALTURA DE CONTROLES ────────────────────────────────────────────────
-   * Una escala para botón, campo y select: alineados en una misma fila.
-   */
-  --ds-control-h-sm: 2rem;
-  --ds-control-h-md: 2.25rem;
-  --ds-control-h-lg: 2.5rem;
-
-  /* ── SOMBRAS ────────────────────────────────────────────────────────────
-   * Un hueco por tipo de pieza. `control` está vacío (`0 0 #0000`): existe para que
-   * un tema pueda dar relieve a los campos con solo dar valor. «Sin sombra» se
-   * escribe `0 0 #0000`, NUNCA `none`: una variable con `none` invalida todo el
-   * `box-shadow` (anillo de foco incluido).
-   *   card/-hover: tarjeta (reposo y realce) · raised: piezas que flotan
-   *   overlay: capas · popover: menús y selects
-   */
-  --shadow-card: var(--ds-shadow-card);
-  --shadow-card-hover: var(--ds-shadow-card-hover);
-  --shadow-control: var(--ds-shadow-control);
-  --shadow-raised: var(--ds-shadow-raised);
-  --shadow-overlay: var(--ds-shadow-overlay);
-  --shadow-popover: var(--ds-shadow-popover);
-
-  --ds-shadow-card: 0 1px 2px rgb(0 0 0 / 0.08), 0 3px 10px rgb(0 0 0 / 0.07);
-  --ds-shadow-card-hover: 0 3px 6px rgb(0 0 0 / 0.1), 0 14px 32px rgb(0 0 0 / 0.14);
-  --ds-shadow-control: 0 0 #0000;
-  --ds-shadow-raised: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.1);
-  --ds-shadow-overlay: 0 10px 15px rgb(0 0 0 / 0.1), 0 4px 6px rgb(0 0 0 / 0.1);
-  --ds-shadow-popover: 0 25px 50px rgb(0 0 0 / 0.25);
-
-  /* ── CAPAS, MOVIMIENTO, FOCO, VELO ──────────────────────────────────────
-   * z-index con nombre (nunca un número en un componente) · dos o tres
-   * duraciones · grosor del anillo de foco · velo tras diálogos y paneles.
-   */
-  --ds-z-raised: 10;
-  --ds-z-sticky: 20;
-  --ds-z-sidebar: 21; /* por encima de la cabecera sticky: su filete no debe quedar tapado */
-  --ds-z-overlay: 50;
-
-  --ds-motion-fast: 100ms;
-  --ds-motion-base: 200ms;
-  --ds-motion-slow: 300ms;
-  --ds-motion-blink: 1s;
-
-  --ds-ring-width: 3px;
-
-  --color-scrim: var(--ds-scrim);
-  --ds-scrim: oklch(0 0 0 / 0.8);
-
-  /* ── ESPACIADO INTERNO ──────────────────────────────────────────────────
-   * Un hueco por tipo de pieza. Más aire o más densidad = cambiar estos valores.
-   *   card (md / sm) · field: campos y selects · cell: celdas de tabla
-   *   overlay: diálogos y paneles · popover · menu / menu-item: menús
-   *   button: por tamaño · badge: etiquetas
-   */
-  --ds-card-spacing: 1.5rem;
-  --ds-card-spacing-sm: 1rem;
-  --ds-field-px: 0.75rem;
-  --ds-cell-p: 0.75rem;
-  --ds-overlay-p: 1.5rem;
-  --ds-overlay-gap: 1.5rem;
-  --ds-popover-p: 1rem;
-  --ds-menu-p: 0.25rem;
-  --ds-menu-item-px: 0.75rem;
-  --ds-menu-item-py: 0.5rem;
-  --ds-button-px-sm: 0.75rem;
-  --ds-button-px-md: 1rem;
-  --ds-button-px-lg: 1rem;
-  --ds-badge-px: 0.625rem;
-
-  /* ── MATERIALES ─────────────────────────────────────────────────────────
-   * Cómo es la superficie, más allá del color. Cada valor es un
-   * `backdrop-filter` completo (p. ej. `blur(28px) saturate(180%)`); por
-   * defecto `none`: sin efecto y sin coste. `page-backdrop` es un
-   * `background-image` para el fondo de la página (degradado, imagen o none).
-   * Referencia: el cristal va en la capa de navegación y controles; el
-   * contenido (tarjetas) se mantiene casi opaco.
-   */
-  --ds-card-backdrop: none;
-  --ds-overlay-backdrop: none;
-  --ds-field-backdrop: none;
-  --ds-sidebar-backdrop: none;
-  --ds-page-backdrop: none;
-
-  /* ── SIDEBAR: ANATOMÍA ──────────────────────────────────────────────────
-   * pad: hueco entre la barra y el borde de la ventana (0 = pegada al borde).
-   * radius / shadow / ring: silueta de la barra flotante (0 / none = sin silueta).
-   * edge: borde de la barra pegada (p. ej. `1px solid var(--sidebar-border)`).
-   * item-radius / item-h: forma y altura de las filas de navegación.
-   */
-  --ds-sidebar-pad: 0.5rem;
-  --ds-sidebar-radius: var(--ds-radius-lg);
-  --ds-sidebar-shadow: var(--ds-shadow-raised);
-  --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;
-
-  /* ── BALDOSA DE ICONO ───────────────────────────────────────────────────
-   * Un icono grande (Lucide) dentro de una baldosa tintada: la «mascota» barata.
-   * sm / md / lg: lado de la baldosa; radius: su esquina; fill: cuánto relleno
-   * lleva el icono (0 = solo trazo; 0.2 = aspecto duotono suave).
-   */
-  --ds-icon-tile-sm: 2rem;
-  --ds-icon-tile-md: 2.75rem;
-  --ds-icon-tile-lg: 3.75rem;
-  --ds-icon-tile-radius: var(--ds-radius-lg);
-  --ds-icon-tile-fill: 0;
-
-  /* ── COLOR (mapeo de las variables del tema a utilidades) ─────────────── */
-  --color-background: var(--background);
-  --color-foreground: var(--foreground);
-  --color-card: var(--card);
-  --color-card-foreground: var(--card-foreground);
-  --color-inset: var(--inset);
-  --color-inset-foreground: var(--inset-foreground);
-  --color-popover: var(--popover);
-  --color-popover-foreground: var(--popover-foreground);
-  --color-primary: var(--primary);
-  --color-primary-foreground: var(--primary-foreground);
-  /* Texto acentuado: SIEMPRE `text-link`, nunca el color de marca — puede no
-   * alcanzar contraste de texto sobre las superficies claras. */
-  --color-link: var(--link);
-  --color-link-hover: var(--link-hover);
-  --color-brand: var(--brand);
-  --color-brand-bright: var(--brand-bright);
-  --color-secondary: var(--secondary);
-  --color-secondary-foreground: var(--secondary-foreground);
-  --color-muted: var(--muted);
-  --color-muted-foreground: var(--muted-foreground);
-  --color-accent: var(--accent);
-  --color-accent-foreground: var(--accent-foreground);
-  --color-destructive: var(--destructive);
-  --color-destructive-foreground: var(--destructive-foreground);
-  --color-border: var(--border);
-  --color-input: var(--input);
-  --color-ring: var(--ring);
-
-  --color-chart-1: var(--chart-1);
-  --color-chart-2: var(--chart-2);
-  --color-chart-3: var(--chart-3);
-  --color-chart-4: var(--chart-4);
-  --color-chart-5: var(--chart-5);
-
-  /*
-   * Estado. Se exponen como colores del tema para que una etiqueta de severidad
-   * se escriba `bg-danger-soft text-danger` y nadie tenga que elegir un rojo a
-   * mano.
-   */
-  --color-danger: var(--danger);
-  --color-danger-soft: var(--danger-soft);
-  --color-warning: var(--warning);
-  --color-warning-soft: var(--warning-soft);
-  --color-success: var(--success);
-  --color-success-soft: var(--success-soft);
-  --color-neutral: var(--neutral);
-  --color-neutral-soft: var(--neutral-soft);
-  --color-info: var(--info);
-  --color-info-soft: var(--info-soft);
-
-  --color-sidebar: var(--sidebar);
-  --color-sidebar-foreground: var(--sidebar-foreground);
-  --color-sidebar-primary: var(--sidebar-primary);
-  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
-  --color-sidebar-accent: var(--sidebar-accent);
-  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
-  --color-sidebar-border: var(--sidebar-border);
-  --color-sidebar-ring: var(--sidebar-ring);
-}
-
-@layer base {
-  * {
-    @apply border-border outline-ring/50;
-  }
-
-  html,
-  body,
-  #app {
-    min-height: 100%;
-  }
-
-  body {
-    @apply bg-background text-foreground font-sans m-0 antialiased;
-    background-image: var(--ds-page-backdrop);
-    background-attachment: fixed;
-    background-size: cover;
-  }
-
-  a {
-    @apply text-link hover:text-link-hover;
-  }
-
-  /* Títulos: fuente de titulares del tema (`--ds-font-display`). */
-  h1,
-  h2,
-  h3,
-  h4,
-  [data-slot='card-title'],
-  [data-slot='dialog-title'],
-  [data-slot='sheet-title'],
-  [data-slot='alert-title'] {
-    font-family: var(--font-display);
-  }
-
-  h1,
-  h2,
-  h3,
-  h4 {
-    letter-spacing: var(--ds-heading-tracking);
-  }
-
-  /*
-   * EXCEPCIÓN: los enlaces del CHROME no son enlaces de texto — son destinos de
-   * navegación. Deben heredar el color de su superficie, no el color de enlace.
-   */
-  [data-slot='sidebar'] a,
-  [data-sidebar='menu-button'],
-  [role='menuitem'],
-  [role='menuitemradio'],
-  [role='option'] {
-    color: inherit;
-  }
-  [data-slot='sidebar'] a:hover,
-  [data-sidebar='menu-button']:hover {
-    color: inherit;
-  }
-
-  ::selection {
-    background: color-mix(in oklch, var(--brand) 25%, transparent);
-  }
-
-  /*
-   * TARJETA: radio `xl`, borde de 1px y sombra de reposo. `ui/card.tsx` ya lleva
-   * estos valores; esta regla los GARANTIZA aunque se regenere con la CLI de
-   * shadcn. Material de la tarjeta: `--ds-card-backdrop`.
-   */
-  [data-slot='card'] {
-    @apply rounded-xl shadow-card ring-0;
-    border: 1px solid var(--border);
-    -webkit-backdrop-filter: var(--ds-card-backdrop);
-    backdrop-filter: var(--ds-card-backdrop);
-  }
-
-  /*
-   * Estados de interacción, resueltos UNA vez para toda la aplicación. La lista
-   * de roles cubre lo que Base UI renderiza sin <button>: opciones de menú y
-   * select, pestañas, switches, checkboxes y radios.
-   */
-  button:not(:disabled),
-  select:not(:disabled),
-  [role='button']:not([aria-disabled='true'], [data-disabled]),
-  [role='menuitem']:not([aria-disabled='true'], [data-disabled]),
-  [role='menuitemcheckbox']:not([aria-disabled='true'], [data-disabled]),
-  [role='menuitemradio']:not([aria-disabled='true'], [data-disabled]),
-  [role='option']:not([aria-disabled='true'], [data-disabled]),
-  [role='tab']:not([aria-disabled='true'], [data-disabled]),
-  [role='switch']:not([aria-disabled='true'], [data-disabled]),
-  [role='checkbox']:not([aria-disabled='true'], [data-disabled]),
-  [role='radio']:not([aria-disabled='true'], [data-disabled]),
-  [role='combobox']:not([aria-disabled='true'], [data-disabled]),
-  [role='slider']:not([aria-disabled='true'], [data-disabled]),
-  input[type='checkbox']:not(:disabled),
-  input[type='radio']:not(:disabled),
-  input[type='range']:not(:disabled),
-  a[href],
-  label[for],
-  summary {
-    @apply cursor-pointer;
-  }
-
-  button:disabled,
-  select:disabled,
-  input:disabled,
-  [aria-disabled='true'],
-  [data-disabled] {
-    @apply cursor-not-allowed;
-  }
-
-  /*
-   * Los primitivos de menú/select traen `cursor-default` como UTILIDAD, y las
-   * utilidades ganan a la capa base: aquí el pointer se IMPONE para los roles
-   * interactivos de esos popups.
-   */
-  [role='menuitem']:not([aria-disabled='true'], [data-disabled]),
-  [role='menuitemcheckbox']:not([aria-disabled='true'], [data-disabled]),
-  [role='menuitemradio']:not([aria-disabled='true'], [data-disabled]),
-  [role='option']:not([aria-disabled='true'], [data-disabled]) {
-    cursor: pointer !important;
-  }
-
-  [aria-busy='true'] {
-    @apply cursor-progress;
-  }
-
-  /* Foco visible solo en navegación por teclado, nunca al hacer clic. */
-  :focus-visible {
-    @apply outline-ring outline-2 outline-offset-2;
-  }
-
-  /*
-   * MATERIALES de la capa de controles y navegación. Por `data-slot`, para que
-   * los hereden todos los componentes sin que ninguno escriba un efecto propio.
-   */
-  [data-slot='popover-content'],
-  [data-slot='dropdown-menu-content'],
-  [data-slot='dropdown-menu-sub-content'],
-  [data-slot='select-content'],
-  [data-slot='dialog-content'],
-  [data-slot='sheet-content'],
-  [data-slot='tooltip-content'] {
-    -webkit-backdrop-filter: var(--ds-overlay-backdrop);
-    backdrop-filter: var(--ds-overlay-backdrop);
-  }
-
-  [data-slot='input'],
-  [data-slot='textarea'],
-  [data-slot='select-trigger'] {
-    -webkit-backdrop-filter: var(--ds-field-backdrop);
-    backdrop-filter: var(--ds-field-backdrop);
-  }
-
-  /*
-   * SIDEBAR. Anatomía por variables (ver arriba): `--ds-sidebar-*`. El borde de
-   * la barra pegada y el material de cristal van aquí; la silueta flotante
-   * (pad, radio, sombra, anillo) la aplica el propio componente.
-   */
-  [data-slot='sidebar-inner'] {
-    border-right: var(--ds-sidebar-edge);
-    -webkit-backdrop-filter: var(--ds-sidebar-backdrop);
-    backdrop-filter: var(--ds-sidebar-backdrop);
-  }
-
-  /*
-   * 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 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: 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'],
-  [data-collapsible='icon'] [data-slot='sidebar-footer'],
-  [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: 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;
-  }
-  [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;
-  }
-
-  /*
-   * `prefers-reduced-motion`: en un chrome que se pliega a diario, la animación
-   * de anchura es justo el movimiento que molesta a quien pide menos movimiento.
-   */
-  @media (prefers-reduced-motion: reduce) {
-    *,
-    *::before,
-    *::after {
-      transition-duration: 0.01ms !important;
-      animation-duration: 0.01ms !important;
-      animation-iteration-count: 1 !important;
-    }
-  }
-
-  /*
-   * `prefers-reduced-transparency`: quien lo pide no debe recibir cristal. Se
-   * anulan los materiales (el soporte del navegador aún es limitado).
-   */
-  @media (prefers-reduced-transparency: reduce) {
-    [data-slot='card'],
-    [data-slot='popover-content'],
-    [data-slot='dropdown-menu-content'],
-    [data-slot='dropdown-menu-sub-content'],
-    [data-slot='select-content'],
-    [data-slot='dialog-content'],
-    [data-slot='sheet-content'],
-    [data-slot='tooltip-content'],
-    [data-slot='input'],
-    [data-slot='textarea'],
-    [data-slot='select-trigger'],
-    [data-slot='sidebar-inner'] {
-      -webkit-backdrop-filter: none;
-      backdrop-filter: none;
-    }
-  }
-}
-
-/* Baldosa de icono: el relleno del icono lo decide el tema (--ds-icon-tile-fill). */
-@layer base {
-  [data-slot='icon-tile'] svg {
-    fill: color-mix(in oklch, currentColor calc(var(--ds-icon-tile-fill) * 100%), transparent);
-  }
-}
+/*
+ * orbital-ds · ESTRUCTURA común a todos los temas.
+ *
+ * Reglas de oro:
+ *   1. Esta hoja no tiene colores ni fuentes concretas: eso lo aporta un TEMA
+ *      (`orbital-ds/themes/<tema>.css`).
+ *   2. Todo lo que cambia el aspecto es una VARIABLE (`--ds-*` o las de color
+ *      de shadcn). Las utilidades de Tailwind solo REFERENCIAN variables
+ *      (`@theme inline { --radius-sm: var(--ds-radius-sm) }`), nunca llevan un
+ *      valor escrito. Por eso un tema puede cambiar formas, sombras, fuentes,
+ *      escala tipográfica y anatomía del sidebar, también EN VIVO.
+ *   3. Los valores por defecto viven en la capa `theme` de Tailwind: cualquier
+ *      tema (CSS sin capa) los gana, sea cual sea el orden de importación.
+ *
+ * Uso en la app:
+ *
+ *   @import 'orbital-ds/themes/<tema>.fonts.css';  <- lo PRIMERO del fichero
+ *   @import 'tailwindcss';
+ *   @import 'orbital-ds/styles.css';               <- esta estructura
+ *   @import 'orbital-ds/themes/<tema>.css';        <- un tema
+ *   @source '../node_modules/orbital-ds/dist';     <- que Tailwind vea las clases
+ */
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  /* ── TIPOGRAFÍA ─────────────────────────────────────────────────────────
+   * Familias: las define el tema (--ds-font-sans / -display / -mono).
+   * Escala: Tailwind la lee de variables; cada paso lleva tamaño e interlineado.
+   * Los tamaños por defecto son los estándar de Tailwind.
+   *   Display text-4xl · H1 text-3xl · H2 text-xl · H3 text-base · cuerpo text-sm
+   *   etiqueta/ayuda text-xs. La jerarquía la hacen tamaño y peso, no el color.
+   */
+  --font-sans: var(--ds-font-sans);
+  --font-display: var(--ds-font-display);
+  --font-mono: var(--ds-font-mono);
+
+  --ds-font-sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+  --ds-font-display: var(--ds-font-sans);
+  --ds-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
+
+  --text-xs: var(--ds-text-xs);
+  --text-xs--line-height: var(--ds-leading-xs);
+  --text-sm: var(--ds-text-sm);
+  --text-sm--line-height: var(--ds-leading-sm);
+  --text-base: var(--ds-text-base);
+  --text-base--line-height: var(--ds-leading-base);
+  --text-lg: var(--ds-text-lg);
+  --text-lg--line-height: var(--ds-leading-lg);
+  --text-xl: var(--ds-text-xl);
+  --text-xl--line-height: var(--ds-leading-xl);
+  --text-2xl: var(--ds-text-2xl);
+  --text-2xl--line-height: var(--ds-leading-2xl);
+  --text-3xl: var(--ds-text-3xl);
+  --text-3xl--line-height: var(--ds-leading-3xl);
+  --text-4xl: var(--ds-text-4xl);
+  --text-4xl--line-height: var(--ds-leading-4xl);
+
+  --ds-text-xs: 0.75rem;
+  --ds-leading-xs: 1.3333;
+  --ds-text-sm: 0.875rem;
+  --ds-leading-sm: 1.4286;
+  --ds-text-base: 1rem;
+  --ds-leading-base: 1.5;
+  --ds-text-lg: 1.125rem;
+  --ds-leading-lg: 1.5556;
+  --ds-text-xl: 1.25rem;
+  --ds-leading-xl: 1.4;
+  --ds-text-2xl: 1.5rem;
+  --ds-leading-2xl: 1.3333;
+  --ds-text-3xl: 1.875rem;
+  --ds-leading-3xl: 1.2;
+  --ds-text-4xl: 2.25rem;
+  --ds-leading-4xl: 1.1111;
+
+  /* Espaciado de letras de los títulos (los que no traen su propia clase). */
+  --ds-heading-tracking: normal;
+
+  /* ── FORMAS ─────────────────────────────────────────────────────────────
+   * Rampa de radios, derivada de `--radius` (mover UN valor cambia la redondez
+   * del producto). Un tema puede además fijar cada paso con --ds-radius-*.
+   *   sm chip · md control · lg fila · xl tarjeta · 2xl vista y barra
+   * Radios semánticos: los componentes piden el hueco, no una medida.
+   *   control: campos, selects, pestañas, tooltips · overlay: diálogos y paneles
+   */
+  --radius-sm: var(--ds-radius-sm);
+  --radius-md: var(--ds-radius-md);
+  --radius-lg: var(--ds-radius-lg);
+  --radius-xl: var(--ds-radius-xl);
+  --radius-2xl: var(--ds-radius-2xl);
+  --radius-control: var(--ds-radius-control);
+  --radius-overlay: var(--ds-radius-overlay);
+  /* Radios por PAPEL (un tema cambia uno y se mueven todas las piezas de ese papel). */
+  --radius-popover: var(--ds-radius-popover);
+  --radius-item: var(--ds-radius-item);
+  --radius-button: var(--ds-radius-button);
+  --radius-badge: var(--ds-radius-badge);
+  --radius-check: var(--ds-radius-check);
+  --radius-card: var(--ds-radius-card);
+  --radius-panel: var(--ds-radius-panel);
+  --radius-chip: var(--ds-radius-chip);
+  --radius-avatar: var(--ds-radius-avatar);
+  --radius-bubble: var(--ds-radius-bubble);
+  --radius-xs: var(--ds-radius-xs);
+  --radius-tooltip: var(--ds-radius-tooltip);
+  --radius-tab: var(--ds-radius-tab);
+  --radius-field-multiline: var(--ds-radius-field-multiline);
+  --radius-inset: var(--ds-radius-inset);
+  --radius-skeleton: var(--ds-radius-skeleton);
+  --radius-track: var(--ds-radius-track);
+  --text-2xs: var(--ds-text-2xs);
+  --text-2xs--line-height: var(--ds-leading-2xs);
+
+  --ds-radius-sm: calc(var(--radius) - 4px);
+  --ds-radius-md: calc(var(--radius) - 2px);
+  --ds-radius-lg: var(--radius);
+  --ds-radius-xl: calc(var(--radius) + 6px);
+  --ds-radius-2xl: calc(var(--radius) + 8px);
+  --ds-radius-control: 2rem;
+  --ds-radius-overlay: 2rem;
+  --ds-radius-popover: var(--ds-radius-2xl); /* menús, listas, popover, hover-card */
+  --ds-radius-item: var(--ds-radius-xl); /* filas de menú, lista y comando */
+  --ds-radius-button: var(--ds-radius-lg);
+  --ds-radius-badge: var(--ds-radius-md);
+  --ds-radius-check: 6px; /* casilla */
+  --ds-radius-card: var(--ds-radius-xl);
+  --ds-radius-panel: var(--ds-radius-2xl); /* acordeón y paneles agrupados */
+  --ds-radius-chip: var(--ds-radius-xl); /* adjuntos y fichas */
+  --ds-radius-avatar: var(--ds-radius-pill);
+  --ds-radius-bubble: var(--ds-radius-overlay);
+  --ds-radius-xs: 2px; /* marcas de leyenda y flecha del tooltip */
+  --ds-radius-tooltip: var(--ds-radius-2xl);
+  --ds-radius-tab: var(--ds-radius-xl);
+  --ds-radius-field-multiline: var(--ds-radius-md); /* textarea y campos de varias líneas */
+  --ds-radius-inset: var(--ds-radius-xl); /* contenido junto al lateral «inset» */
+  --ds-radius-skeleton: var(--ds-radius-xl);
+  --ds-radius-track: var(--ds-radius-lg); /* progreso y deslizador */
+  --ds-text-2xs: 0.625rem;
+  --ds-leading-2xs: 1.4;
+
+  /* ── ALTURA DE CONTROLES ────────────────────────────────────────────────
+   * Una escala para botón, campo y select: alineados en una misma fila.
+   */
+  --ds-control-h-sm: 2rem;
+  --ds-control-h-md: 2.25rem;
+  --ds-control-h-lg: 2.5rem;
+
+  /* ── SOMBRAS ────────────────────────────────────────────────────────────
+   * Un hueco por tipo de pieza. `control` está vacío (`0 0 #0000`): existe para que
+   * un tema pueda dar relieve a los campos con solo dar valor. «Sin sombra» se
+   * escribe `0 0 #0000`, NUNCA `none`: una variable con `none` invalida todo el
+   * `box-shadow` (anillo de foco incluido).
+   *   card/-hover: tarjeta (reposo y realce) · raised: piezas que flotan
+   *   overlay: capas · popover: menús y selects
+   */
+  --shadow-card: var(--ds-shadow-card);
+  --shadow-card-hover: var(--ds-shadow-card-hover);
+  --shadow-control: var(--ds-shadow-control);
+  --shadow-raised: var(--ds-shadow-raised);
+  --shadow-overlay: var(--ds-shadow-overlay);
+  --shadow-popover: var(--ds-shadow-popover);
+  --shadow-dialog: var(--ds-shadow-dialog);
+
+  --ds-shadow-card: 0 1px 2px rgb(0 0 0 / 0.08), 0 3px 10px rgb(0 0 0 / 0.07);
+  --ds-shadow-card-hover: 0 3px 6px rgb(0 0 0 / 0.1), 0 14px 32px rgb(0 0 0 / 0.14);
+  --ds-shadow-control: 0 0 #0000;
+  --ds-shadow-raised: 0 1px 3px rgb(0 0 0 / 0.1), 0 1px 2px rgb(0 0 0 / 0.1);
+  --ds-shadow-overlay: 0 10px 15px rgb(0 0 0 / 0.1), 0 4px 6px rgb(0 0 0 / 0.1);
+  --ds-shadow-popover: 0 25px 50px rgb(0 0 0 / 0.25);
+  --ds-shadow-dialog: 0 0 #0000; /* diálogos, alertas y cajones: sin sombra salvo que el tema la pida */
+
+  /* ── CAPAS, MOVIMIENTO, FOCO, VELO ──────────────────────────────────────
+   * z-index con nombre (nunca un número en un componente) · dos o tres
+   * duraciones · grosor del anillo de foco · velo tras diálogos y paneles.
+   */
+  --ds-z-raised: 10;
+  --ds-z-sticky: 20;
+  --ds-z-sidebar: 21; /* por encima de la cabecera sticky: su filete no debe quedar tapado */
+  --ds-z-overlay: 50;
+
+  --ds-motion-fast: 100ms;
+  --ds-motion-base: 200ms;
+  --ds-motion-slow: 300ms;
+  --ds-motion-blink: 1s;
+  --ds-motion-snap: 150ms; /* ajustes de tamaño (altura de un toast) */
+  --ds-motion-layout: 350ms; /* desplazamientos de layout (menú de navegación) */
+  --ds-motion-swipe: 400ms; /* cierre por gesto (drawer), se multiplica por la fuerza */
+  --ds-motion-slower: 500ms; /* entradas y salidas apiladas (toasts) */
+
+  /* Curvas de aceleración: un tema cambia aquí su «personalidad de movimiento». */
+  --ds-ease-standard: cubic-bezier(0.22, 1, 0.36, 1); /* entrar y moverse */
+  --ds-ease-emphasized: cubic-bezier(0.32, 0.72, 0, 1); /* paneles que llegan desde el borde */
+  --ds-ease-enter: cubic-bezier(0.23, 1, 0.32, 1); /* aparecer */
+  --ds-ease-exit: cubic-bezier(0.7, 0, 0.84, 0); /* desaparecer */
+  --ds-ease-overshoot: cubic-bezier(0.45, 1.005, 0, 1.005); /* con un leve rebote */
+
+  /* Coreografía (la usan Motion y los presets de orbital-ds/lib/motion): recorrido al
+   * entrar, escala de partida, desenfoque de entrada, rebote del muelle, retardo en cascada
+   * y hundimiento al pulsar. Un tema los ajusta para tener su movimiento de fábrica. */
+  --ds-motion-distance: 8px;
+  --ds-motion-scale: 0.96;
+  --ds-motion-blur: 0px;
+  --ds-spring-bounce: 0.15;
+  --ds-motion-stagger: 40ms;
+  --ds-motion-press-scale: 0.97;
+
+  --ds-z-stack: 1000; /* base del apilado interno (toasts unos sobre otros) */
+
+  --ds-ring-width: 3px;
+
+  /* ── GESTO DE TECLA Y ROTULADOR ─────────────────────────────────────────
+   * Huecos que usa la PERSONALIDAD de un tema con piezas «pulsables» (tactile).
+   * Aquí viven sus valores neutros para que una app pueda fijarlos en su
+   * brand.css (el doctor rechaza en una marca las --ds-* que no existen).
+   *   outline/edge: color del contorno y de la arista · border: grosor del
+   *   contorno · edge-w(-sm): arista inferior en reposo (controles pequeños) ·
+   *   edge-w-pressed: arista al pulsar · press(-sm): cuánto se hunde ·
+   *   radius(-sm): radio de la tecla · weight: peso de su texto ·
+   *   disabled-opacity · rule-w: filete de superficies · overlay-edge-w: arista de
+   *   diálogos · marker(-thickness/-offset): rotulador bajo los títulos (gesto
+   *   común: lo dibuja la estructura; transparent = apagado).
+   */
+  --ds-key-outline: var(--foreground);
+  --ds-key-edge: var(--border);
+  --ds-key-border: 1px;
+  --ds-key-edge-w: 1px;
+  --ds-key-edge-w-sm: 1px;
+  --ds-key-edge-w-pressed: 1px;
+  --ds-key-press: 0px;
+  --ds-key-press-sm: 0px;
+  --ds-key-radius: var(--ds-radius-lg);
+  --ds-key-radius-sm: var(--ds-radius-control);
+  --ds-key-weight: 600;
+  --ds-key-disabled-opacity: 0.5;
+  --ds-rule-w: 1px;
+  --ds-overlay-edge-w: 1px;
+  --ds-marker: transparent; /* gesto COMÚN: dale un color y cualquier tema lo dibuja */
+  --ds-marker-thickness: 0.42em;
+  --ds-marker-offset: -0.3em;
+
+  /* ── TÍTULOS Y ETIQUETAS ────────────────────────────────────────────────
+   * display-variation: ejes de la fuente de titulares (`font-variation-settings`,
+   * p. ej. Fraunces `"SOFT" 50, "WONK" 1`) · heading-weight: h1–h3 ·
+   * title-weight: títulos de componentes · title-leading: su interlineado ·
+   * label-tracking: etiquetas en versalitas (cabeceras de tabla) · strong-weight:
+   * texto de control enfático · nav-weight: destinos del lateral.
+   */
+  --ds-label-weight: 600;
+  --ds-display-variation: normal;
+  --ds-heading-weight: 700;
+  --ds-title-weight: 600;
+  --ds-title-leading: 1.25;
+  --ds-label-tracking: 0.05em;
+  --ds-strong-weight: 600;
+  --ds-nav-weight: 500;
+  --ds-nav-active-weight: 500;
+  --ds-tab-weight: 500;
+  --ds-tab-active-weight: 500;
+
+  /* ── PERSONALIDAD COMÚN (cualquier tema) ────────────────────────────────
+   * Huecos neutros para lo que un tema suele cambiar en su PERSONALIDAD, de modo
+   * que ninguna regla escriba un valor y una app pueda ajustarlo en brand.css.
+   *   radius-pill: forma de píldora · button-case/-tracking: mayúsculas y espaciado
+   *   del botón · button-outline-w: contorno del botón «outline» · shadow-button(-hover):
+   *   brillo bajo el botón principal · hover-lift: cuánto sube al señalarlo ·
+   *   hover-opacity: atenuado al señalar · tab-indicator-w: subrayado de la pestaña activa.
+   */
+  --ds-radius-pill: 9999px;
+  --ds-button-case: none;
+  --ds-button-tracking: normal;
+  --ds-button-outline-w: 1px;
+  --ds-shadow-button: 0 0 #0000;
+  --ds-shadow-button-hover: 0 0 #0000;
+  --ds-hover-lift: 0px;
+  --ds-hover-opacity: 1;
+  --ds-tab-indicator-w: 0px;
+
+  --color-scrim: var(--ds-scrim);
+  --ds-scrim: oklch(0 0 0 / 0.8);
+  --ds-scrim-blur: 4px; /* desenfoque del velo */
+
+  /* ── ESTADOS DE INTERACCIÓN COMUNES ──────────────────────────────────────
+   * ring-color: color del anillo de foco · disabled-opacity: lo desactivado ·
+   * layer-ring(-w): filo de las capas flotantes y diálogos · separator: líneas de
+   * menús · control-h-xs: controles mínimos (chips, botones dentro de un campo).
+   */
+  --ds-ring-color: color-mix(in oklch, var(--ring) 50%, transparent);
+  --ds-invalid-ring: color-mix(in oklch, var(--destructive) 20%, transparent);
+  --ds-disabled-opacity: 0.5;
+  --ds-layer-ring: color-mix(in oklch, var(--foreground) 5%, transparent);
+  --ds-layer-ring-w: 1px;
+  --ds-separator: color-mix(in oklch, var(--border) 50%, transparent);
+  --ds-control-h-xs: 1.5rem;
+  --ds-chip-h: 1.375rem;
+  --ds-field-bg: color-mix(in oklch, var(--input) 30%, transparent);
+  --ds-field-bg-hover: color-mix(in oklch, var(--input) 50%, transparent);
+  --ds-invalid-border: var(--destructive); /* borde de un campo con error */
+  --ds-switch-track-off: var(--input); /* carril del interruptor apagado */
+  --ds-check-bg: transparent; /* fondo de casilla y radio sin marcar */
+  --ds-row-hover: color-mix(in oklch, var(--muted) 50%, transparent); /* fila señalada (tabla, acordeón abierto, item muted) */
+  --ds-choice-selected: color-mix(in oklch, var(--primary) 10%, transparent); /* opción elegida en tarjeta */
+  --ds-choice-selected-border: color-mix(in oklch, var(--primary) 40%, transparent);
+  --ds-choice-card-bg: color-mix(in oklch, var(--primary) 5%, transparent); /* tarjeta de elección de Field */
+  --ds-choice-card-border: color-mix(in oklch, var(--primary) 30%, transparent);
+  --ds-tab-foreground: color-mix(in oklch, var(--foreground) 60%, transparent);
+  --ds-sidebar-label: color-mix(in oklch, var(--sidebar-foreground) 70%, transparent);
+  --ds-tooltip-bg: var(--foreground);
+  --ds-tooltip-fg: var(--background);
+  --ds-switch-thumb-bg: var(--background);
+  --ds-switch-thumb-checked-bg: var(--background);
+  --ds-drawer-edge: var(--popover);
+  --ds-bubble-tinted: oklch(from var(--primary) 0.93 calc(c * 0.4) h);
+  --ds-bubble-tinted-hover: oklch(from var(--primary) 0.88 calc(c * 0.5) h);
+
+  /* ── MEDIDAS DE PIEZAS ──────────────────────────────────────────────────
+   * Cada pieza pide su hueco; los valores son los que tenía escritos.
+   */
+  --ds-check-size: 1rem; /* casilla y radio */
+  --ds-switch-w: 2rem;
+  --ds-switch-h: 1.15rem;
+  --ds-switch-w-sm: 1.5rem;
+  --ds-switch-h-sm: 0.875rem;
+  --ds-switch-thumb: 1rem;
+  --ds-switch-thumb-sm: 0.75rem;
+  --ds-track-h: 0.75rem; /* progreso y deslizador */
+  --ds-slider-thumb: 1rem;
+  --ds-tabs-list-p: 3px;
+  --ds-tab-line-w: 2px;
+  --ds-tab-line-offset: -5px;
+  --ds-table-head-h: 3rem;
+  --ds-popover-w: 18rem;
+  --ds-hover-card-w: 18rem;
+  --ds-sheet-w: 24rem;
+  --ds-drawer-w: 24rem;
+  --ds-drawer-inset: 0.5rem;
+  --ds-toast-w: 24rem;
+  --ds-toast-gap: 0.75rem;
+  --ds-toast-peek: 0.75rem;
+  --ds-toast-offset: 1rem;
+  --ds-scrollbar-w: 0.625rem;
+  --ds-touch-target: 2.75rem;
+  --ds-sidebar-w: 17.5rem;
+  --ds-sidebar-w-mobile: 18rem;
+  --ds-sidebar-item-h-lg: 3.5rem;
+  --ds-sidebar-sub-item-h: 1.75rem;
+  --ds-avatar-sm: 1.5rem;
+  --ds-avatar-md: 2rem;
+  --ds-avatar-lg: 2.5rem;
+  --ds-avatar-ring-w: 2px;
+  --ds-kbd-h: 1.25rem;
+  --ds-empty-p: 3rem;
+  --ds-item-px: 1rem;
+  --ds-item-py: 0.875rem;
+  --ds-alert-px: 1rem;
+  --ds-alert-py: 0.75rem;
+  --ds-badge-py: 0.25rem;
+  --ds-bubble-px: 0.875rem;
+  --ds-bubble-py: 0.625rem;
+  --ds-bubble-max-w: 80%;
+  --ds-overlay-close-inset: 1rem;
+  --ds-drawer-handle: 100px; /* zona de arrastre del cajón */
+  --ds-carousel-gap: 1rem; /* separación entre diapositivas */
+  --ds-menu-label-py: 0.625rem; /* etiquetas de grupo en menús */
+  --ds-sidebar-rail-handle-w: 2px; /* asa del raíl para plegar el lateral */
+
+  /* ── PESOS DE PIEZAS ────────────────────────────────────────────────────
+   * button: texto del botón · overlay-title: títulos de diálogo, hoja, cajón,
+   * popover y toast · table-head: cabecera de tabla.
+   */
+  --ds-button-weight: 600;
+  --ds-overlay-title-weight: 500;
+  --ds-table-head-weight: 500;
+
+  /* ── MOVIMIENTO ADICIONAL ───────────────────────────────────────────── */
+  --ds-ease-panel: ease-in-out; /* hojas laterales */
+  --ds-ease-collapse: linear; /* plegar el lateral */
+  --ds-motion-spin: 1s;
+  --ds-motion-shimmer: 1.5s; /* brillo de carga */
+  --ds-scroll-fade: 2rem; /* fundido en el borde de una zona con scroll */ /* giro de los indicadores de carga */
+  --ds-z-toast: var(--ds-z-overlay); /* avisos efímeros (súbelo para que queden sobre los diálogos) */
+
+  /* ── ESPACIADO INTERNO ──────────────────────────────────────────────────
+   * Un hueco por tipo de pieza. Más aire o más densidad = cambiar estos valores.
+   *   card (md / sm) · field: campos y selects · cell: celdas de tabla
+   *   overlay: diálogos y paneles · popover · menu / menu-item: menús
+   *   button: por tamaño · badge: etiquetas
+   */
+  --ds-card-spacing: 1.5rem;
+  --ds-card-spacing-sm: 1rem;
+  --ds-field-px: 0.75rem;
+  --ds-cell-p: 0.75rem;
+  --ds-overlay-p: 1.5rem;
+  --ds-overlay-gap: 1.5rem;
+  --ds-popover-p: 1rem;
+  --ds-menu-p: 0.25rem;
+  --ds-menu-item-px: 0.75rem;
+  --ds-menu-item-py: 0.5rem;
+  --ds-button-px-sm: 0.75rem;
+  --ds-button-px-md: 1rem;
+  --ds-button-px-lg: 1rem;
+  --ds-badge-px: 0.625rem;
+  --ds-banner-px: 1rem; /* aviso de página (Banner) */
+  --ds-banner-py: 0.625rem;
+  --ds-tabs-gap: 0.25rem; /* separación entre pestañas cuando el tema las separa */
+
+  /* ── MATERIALES ─────────────────────────────────────────────────────────
+   * Cómo es la superficie, más allá del color. Cada valor es un
+   * `backdrop-filter` completo (p. ej. `blur(28px) saturate(180%)`); por
+   * defecto `none`: sin efecto y sin coste. `page-backdrop` es un
+   * `background-image` para el fondo de la página (degradado, imagen o none).
+   * Referencia: el cristal va en la capa de navegación y controles; el
+   * contenido (tarjetas) se mantiene casi opaco.
+   */
+  --ds-card-backdrop: none;
+  --ds-overlay-backdrop: none;
+  --ds-field-backdrop: none;
+  --ds-sidebar-backdrop: none;
+  --ds-page-backdrop: none;
+
+  /* ── SIDEBAR: ANATOMÍA ──────────────────────────────────────────────────
+   * pad: hueco entre la barra y el borde de la ventana (0 = pegada al borde).
+   * radius / shadow / ring: silueta de la barra flotante (0 / none = sin silueta).
+   * edge: borde de la barra pegada (p. ej. `1px solid var(--sidebar-border)`).
+   * item-radius / item-h: forma y altura de las filas de navegación.
+   */
+  --ds-sidebar-pad: 0.5rem;
+  --ds-sidebar-radius: var(--ds-radius-lg);
+  --ds-sidebar-shadow: var(--ds-shadow-raised);
+  --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;
+
+  /* ── BALDOSA DE ICONO ───────────────────────────────────────────────────
+   * Un icono grande (Lucide) dentro de una baldosa tintada: la «mascota» barata.
+   * sm / md / lg: lado de la baldosa; radius: su esquina; fill: cuánto relleno
+   * lleva el icono (0 = solo trazo; 0.2 = aspecto duotono suave).
+   */
+  --ds-icon-tile-sm: 2rem;
+  --ds-icon-tile-md: 2.75rem;
+  --ds-icon-tile-lg: 3.75rem;
+  --ds-icon-tile-radius: var(--ds-radius-lg);
+  --ds-icon-tile-fill: 0;
+
+  /* ── COLOR (mapeo de las variables del tema a utilidades) ─────────────── */
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-inset: var(--inset);
+  --color-inset-foreground: var(--inset-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  /* Texto acentuado: SIEMPRE `text-link`, nunca el color de marca — puede no
+   * alcanzar contraste de texto sobre las superficies claras. */
+  --color-link: var(--link);
+  --color-link-hover: var(--link-hover);
+  --color-brand: var(--brand);
+  --color-brand-bright: var(--brand-bright);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+
+  /*
+   * Estado. Se exponen como colores del tema para que una etiqueta de severidad
+   * se escriba `bg-danger-soft text-danger` y nadie tenga que elegir un rojo a
+   * mano.
+   */
+  --color-danger: var(--danger);
+  --color-danger-soft: var(--danger-soft);
+  --color-warning: var(--warning);
+  --color-warning-soft: var(--warning-soft);
+  --color-success: var(--success);
+  --color-success-soft: var(--success-soft);
+  --color-neutral: var(--neutral);
+  --color-neutral-soft: var(--neutral-soft);
+  --color-info: var(--info);
+  --color-info-soft: var(--info-soft);
+
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+/* Valores de la piel oscura que la ESTRUCTURA necesita (capa theme: un tema los gana). */
+@layer theme {
+  .dark {
+    --ds-invalid-ring: color-mix(in oklch, var(--destructive) 40%, transparent);
+    --ds-check-bg: color-mix(in oklch, var(--input) 30%, transparent);
+    --ds-tab-foreground: var(--muted-foreground);
+    --ds-switch-thumb-bg: var(--foreground);
+    --ds-switch-thumb-checked-bg: var(--primary-foreground);
+    --ds-drawer-edge: var(--border);
+    --ds-invalid-border: color-mix(in oklch, var(--destructive) 50%, transparent);
+    --ds-choice-card-bg: color-mix(in oklch, var(--primary) 10%, transparent);
+    --ds-choice-card-border: color-mix(in oklch, var(--primary) 20%, transparent);
+    --ds-switch-track-off: color-mix(in oklch, var(--input) 80%, transparent);
+    --ds-layer-ring: color-mix(in oklch, var(--foreground) 10%, transparent);
+    --ds-bubble-tinted: oklch(from var(--primary) 0.3 calc(c * 0.4) h);
+    --ds-bubble-tinted-hover: oklch(from var(--primary) 0.35 calc(c * 0.5) h);
+  }
+}
+
+/* Utilidades que usan los componentes (antes no existían y no hacían nada). */
+@utility scrollbar-none {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+@utility no-scrollbar {
+  scrollbar-width: none;
+  &::-webkit-scrollbar {
+    display: none;
+  }
+}
+@utility scrollbar-thin {
+  scrollbar-width: thin;
+}
+@utility scrollbar-gutter-stable {
+  scrollbar-gutter: stable;
+}
+@utility scrollbar-thumb-transparent {
+  scrollbar-color: transparent transparent;
+}
+@utility scrollbar-track-transparent {
+  scrollbar-color: auto transparent;
+}
+@utility scroll-fade-b {
+  mask-image: linear-gradient(to bottom, #000 calc(100% - var(--ds-scroll-fade)), transparent);
+}
+@utility scroll-fade-x {
+  mask-image: linear-gradient(to right, transparent, #000 var(--ds-scroll-fade), #000 calc(100% - var(--ds-scroll-fade)), transparent);
+}
+@utility shimmer {
+  background-image: linear-gradient(90deg, transparent, color-mix(in oklch, var(--foreground) 8%, transparent), transparent);
+  background-size: 200% 100%;
+  animation: ds-shimmer var(--ds-motion-shimmer) linear infinite;
+}
+@keyframes ds-shimmer {
+  from {
+    background-position: 100% 0;
+  }
+  to {
+    background-position: -100% 0;
+  }
+}
+/* Acordeón de Base UI: anima hasta --accordion-panel-height (tw-animate solo conoce Radix y otros). */
+@utility animate-accordion-open {
+  animation: ds-accordion-open var(--ds-motion-base) var(--ds-ease-standard);
+}
+@utility animate-accordion-close {
+  animation: ds-accordion-close var(--ds-motion-base) var(--ds-ease-standard);
+}
+@keyframes ds-accordion-open {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--accordion-panel-height, auto);
+  }
+}
+@keyframes ds-accordion-close {
+  from {
+    height: var(--accordion-panel-height, auto);
+  }
+  to {
+    height: 0;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+
+  html,
+  body,
+  #app {
+    min-height: 100%;
+  }
+
+  body {
+    @apply bg-background text-foreground font-sans m-0 antialiased;
+    background-image: var(--ds-page-backdrop);
+    background-attachment: fixed;
+    background-size: cover;
+  }
+
+  a {
+    @apply text-link hover:text-link-hover;
+  }
+
+  /* Títulos: fuente de titulares del tema (`--ds-font-display`), en TODOS los títulos
+   * de componente (familia «title» del contrato), no solo en algunos. */
+  h1,
+  h2,
+  h3,
+  h4,
+  [data-slot='card-title'],
+  [data-slot='dialog-title'],
+  [data-slot='sheet-title'],
+  [data-slot='alert-dialog-title'],
+  [data-slot='drawer-title'],
+  [data-slot='empty-title'],
+  [data-slot='popover-title'],
+  [data-slot='alert-title'] {
+    font-family: var(--font-display);
+    font-variation-settings: var(--ds-display-variation);
+  }
+
+  h1,
+  h2,
+  h3,
+  h4 {
+    letter-spacing: var(--ds-heading-tracking);
+  }
+
+  /*
+   * ROTULADOR (gesto común): franja translúcida bajo los títulos. Es un subrayado
+   * grueso, que se pinta DETRÁS de la letra, sigue el texto línea a línea y no
+   * ocupa sitio: con `--ds-marker: transparent` (por defecto) no se ve ni mueve nada.
+   * Lo enciende cualquier tema o el brand.css de una app con un color.
+   */
+  [data-slot='card-title'],
+  [data-slot='dialog-title'],
+  [data-slot='sheet-title'],
+  [data-slot='alert-dialog-title'],
+  [data-slot='drawer-title'],
+  [data-slot='empty-title'],
+  header h1 {
+    text-decoration-line: underline;
+    text-decoration-color: var(--ds-marker);
+    text-decoration-thickness: var(--ds-marker-thickness);
+    text-underline-offset: var(--ds-marker-offset);
+    text-decoration-skip-ink: none;
+  }
+
+  /*
+   * EXCEPCIÓN: los enlaces del CHROME no son enlaces de texto — son destinos de
+   * navegación. Deben heredar el color de su superficie, no el color de enlace.
+   */
+  [data-slot='sidebar'] a,
+  [data-sidebar='menu-button'],
+  [role='menuitem'],
+  [role='menuitemradio'],
+  [role='option'] {
+    color: inherit;
+  }
+  [data-slot='sidebar'] a:hover,
+  [data-sidebar='menu-button']:hover {
+    color: inherit;
+  }
+
+  ::selection {
+    background: color-mix(in oklch, var(--brand) 25%, transparent);
+  }
+
+  /*
+   * TARJETA: radio `xl`, borde de 1px y sombra de reposo. `ui/card.tsx` ya lleva
+   * estos valores; esta regla los GARANTIZA aunque se regenere con la CLI de
+   * shadcn. Material de la tarjeta: `--ds-card-backdrop`.
+   */
+  [data-slot='card'] {
+    @apply rounded-xl shadow-card ring-0;
+    border: 1px solid var(--border);
+    -webkit-backdrop-filter: var(--ds-card-backdrop);
+    backdrop-filter: var(--ds-card-backdrop);
+  }
+
+  /*
+   * Estados de interacción, resueltos UNA vez para toda la aplicación. La lista
+   * de roles cubre lo que Base UI renderiza sin <button>: opciones de menú y
+   * select, pestañas, switches, checkboxes y radios.
+   */
+  button:not(:disabled),
+  select:not(:disabled),
+  [role='button']:not([aria-disabled='true'], [data-disabled]),
+  [role='menuitem']:not([aria-disabled='true'], [data-disabled]),
+  [role='menuitemcheckbox']:not([aria-disabled='true'], [data-disabled]),
+  [role='menuitemradio']:not([aria-disabled='true'], [data-disabled]),
+  [role='option']:not([aria-disabled='true'], [data-disabled]),
+  [role='tab']:not([aria-disabled='true'], [data-disabled]),
+  [role='switch']:not([aria-disabled='true'], [data-disabled]),
+  [role='checkbox']:not([aria-disabled='true'], [data-disabled]),
+  [role='radio']:not([aria-disabled='true'], [data-disabled]),
+  [role='combobox']:not([aria-disabled='true'], [data-disabled]),
+  [role='slider']:not([aria-disabled='true'], [data-disabled]),
+  input[type='checkbox']:not(:disabled),
+  input[type='radio']:not(:disabled),
+  input[type='range']:not(:disabled),
+  a[href],
+  label[for],
+  summary {
+    @apply cursor-pointer;
+  }
+
+  button:disabled,
+  select:disabled,
+  input:disabled,
+  [aria-disabled='true'],
+  [data-disabled] {
+    @apply cursor-not-allowed;
+  }
+
+  /*
+   * Los primitivos de menú/select traen `cursor-default` como UTILIDAD, y las
+   * utilidades ganan a la capa base: aquí el pointer se IMPONE para los roles
+   * interactivos de esos popups.
+   */
+  [role='menuitem']:not([aria-disabled='true'], [data-disabled]),
+  [role='menuitemcheckbox']:not([aria-disabled='true'], [data-disabled]),
+  [role='menuitemradio']:not([aria-disabled='true'], [data-disabled]),
+  [role='option']:not([aria-disabled='true'], [data-disabled]) {
+    cursor: pointer !important;
+  }
+
+  [aria-busy='true'] {
+    @apply cursor-progress;
+  }
+
+  /* Foco visible solo en navegación por teclado, nunca al hacer clic. */
+  :focus-visible {
+    @apply outline-ring outline-2 outline-offset-2;
+  }
+
+  /*
+   * MATERIALES de la capa de controles y navegación. Por `data-slot`, para que
+   * los hereden todos los componentes sin que ninguno escriba un efecto propio.
+   */
+  [data-slot='popover-content'],
+  [data-slot='dropdown-menu-content'],
+  [data-slot='dropdown-menu-sub-content'],
+  [data-slot='select-content'],
+  [data-slot='dialog-content'],
+  [data-slot='sheet-content'],
+  [data-slot='tooltip-content'] {
+    -webkit-backdrop-filter: var(--ds-overlay-backdrop);
+    backdrop-filter: var(--ds-overlay-backdrop);
+  }
+
+  [data-slot='input'],
+  [data-slot='textarea'],
+  [data-slot='select-trigger'] {
+    -webkit-backdrop-filter: var(--ds-field-backdrop);
+    backdrop-filter: var(--ds-field-backdrop);
+  }
+
+  /*
+   * SIDEBAR. Anatomía por variables (ver arriba): `--ds-sidebar-*`. El borde de
+   * la barra pegada y el material de cristal van aquí; la silueta flotante
+   * (pad, radio, sombra, anillo) la aplica el propio componente.
+   */
+  [data-slot='sidebar-inner'] {
+    border-right: var(--ds-sidebar-edge);
+    -webkit-backdrop-filter: var(--ds-sidebar-backdrop);
+    backdrop-filter: var(--ds-sidebar-backdrop);
+  }
+
+  /*
+   * 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 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: 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'],
+  [data-collapsible='icon'] [data-slot='sidebar-footer'],
+  [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: 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;
+  }
+  [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;
+  }
+
+  /*
+   * `prefers-reduced-motion`: en un chrome que se pliega a diario, la animación
+   * de anchura es justo el movimiento que molesta a quien pide menos movimiento.
+   */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      transition-duration: 0.01ms !important;
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+    }
+  }
+
+  /*
+   * `prefers-reduced-transparency`: quien lo pide no debe recibir cristal. Se
+   * anulan los materiales (el soporte del navegador aún es limitado).
+   */
+  @media (prefers-reduced-transparency: reduce) {
+    [data-slot='card'],
+    [data-slot='popover-content'],
+    [data-slot='dropdown-menu-content'],
+    [data-slot='dropdown-menu-sub-content'],
+    [data-slot='select-content'],
+    [data-slot='dialog-content'],
+    [data-slot='sheet-content'],
+    [data-slot='tooltip-content'],
+    [data-slot='input'],
+    [data-slot='textarea'],
+    [data-slot='select-trigger'],
+    [data-slot='sidebar-inner'] {
+      -webkit-backdrop-filter: none;
+      backdrop-filter: none;
+    }
+  }
+}
+
+/* Baldosa de icono: el relleno del icono lo decide el tema (--ds-icon-tile-fill). */
+@layer base {
+  [data-slot='icon-tile'] svg {
+    fill: color-mix(in oklch, currentColor calc(var(--ds-icon-tile-fill) * 100%), transparent);
+  }
+}