orbital-ds 0.2.0 → 0.3.0

package/dist/styles.css

@@ -1,427 +1,486 @@
-/*
- * orbital-ds · ESTRUCTURA común a todos los temas.
- *
- * Mapea las variables del tema a utilidades de Tailwind (@theme), define los
- * tokens semánticos (radios, alturas, sombras, capas, movimiento, foco) y la
- * capa base de interacción. NO contiene colores ni fuentes: eso lo aporta un
- * TEMA (un fichero de `orbital-ds/themes/`). Uso en la app:
- *
- *   @import 'tailwindcss';
- *   @import 'orbital-ds/themes/qratia.css';   <- un tema
- *   @import 'orbital-ds/styles.css';          <- la estructura
- *   @source '../node_modules/orbital-ds/dist'; <- que Tailwind vea las clases
- */
-
-@custom-variant dark (&:is(.dark *));
-
-@theme inline {
-
-  /*
-   * ESCALA DE TEXTO — solo utilidades ESTÁNDAR de Tailwind, sin tamaños a medida.
-   *
-   *   Display   text-4xl  36/700   nota y cifras clave
-   *   H1        text-3xl  30/700   título de vista
-   *   H2        text-xl   20/700   detalle, modal
-   *   H3        text-base 16/600   título de tarjeta
-   *   H4        text-sm   14/600   grupo dentro de tarjeta
-   *   Cuerpo    text-sm   14/400   campos y texto corriente
-   *   Fila      text-sm   14/400-500
-   *   Etiqueta  text-xs   12/600   en mayúsculas, con tracking ancho
-   *   Ayuda     text-xs   12/400   notas y validación
-   *   Dato      text-xs   12/500   mono y `tabular-nums`
-   *
-   * REGLAS: la jerarquía la hacen TAMAÑO Y PESO, nunca el color · interlineado
-   * ajustado en títulos, holgado en cuerpo · tracking negativo solo de 20px para
-   * arriba; ancho solo en mayúsculas · máximo tres niveles de título por vista ·
-   * números comparables SIEMPRE `tabular-nums`.
-   */
-
-  /*
-   * Rampa de radios, toda derivada de `--radius`: cambiar la redondez del
-   * producto es mover UN valor.
-   *   sm  chip · md  control · lg  fila · xl  tarjeta · 2xl  vista y barra
-   */
-  --radius-sm: calc(var(--radius) - 4px);
-  --radius-md: calc(var(--radius) - 2px);
-  --radius-lg: var(--radius);
-  --radius-xl: calc(var(--radius) + 6px);
-  --radius-2xl: calc(var(--radius) + 8px);
-
-  /*
-   * RADIOS SEMÁNTICOS — los componentes piden el hueco, no una medida. Un tema
-   * que quiera controles menos redondos cambia ESTOS valores (p. ej.
-   * `var(--radius-md)`), sin tocar ningún componente.
-   *   control  campos, selects, pestañas, tooltips · overlay  diálogos y paneles
-   */
-  --radius-control: 2rem;
-  --radius-overlay: 2rem;
-
-  /*
-   * ALTURA DE CONTROLES — una escala para botón, campo y select, así alineados
-   * en una misma fila. Densidad distinta = cambiar estos tres valores.
-   */
-  --ds-control-h-sm: 2rem;
-  --ds-control-h-md: 2.25rem;
-  --ds-control-h-lg: 2.5rem;
-
-  /*
-   * SOMBRAS SEMÁNTICAS — un hueco por tipo de pieza. `control` vale `none` hoy:
-   * el hueco existe para que un tema pueda dar relieve a los campos con solo
-   * dar valor aquí (sin tocar el componente).
-   *   control  campos y botones · raised  piezas que flotan · overlay  capas
-   */
-  --shadow-control: none;
-  --shadow-raised: var(--shadow-sm);
-  --shadow-overlay: var(--shadow-lg);
-  --shadow-popover: var(--shadow-2xl);
-
-  /*
-   * CAPAS (z-index) — tres niveles con nombre; ningún componente escribe un
-   * número. raised: pieza que sobresale de su fila · sticky: barras fijas ·
-   * overlay: menús, diálogos, paneles y tooltips.
-   */
-  --ds-z-raised: 10;
-  --ds-z-sticky: 20;
-  --ds-z-overlay: 50;
-
-  /* MOVIMIENTO — dos duraciones; `reduced-motion` ya se respeta en la capa base. */
-  --ds-motion-fast: 100ms;
-  --ds-motion-base: 200ms;
-  --ds-motion-slow: 300ms;
-  --ds-motion-blink: 1s;
-
-  /* FOCO — grosor del anillo de foco/error de todos los controles. */
-  --ds-ring-width: 3px;
-
-  /* Velo tras diálogos y paneles. Un tema puede cambiar su tinte u opacidad. */
-  --color-scrim: oklch(0 0 0 / 0.8);
-
-  /*
-   * ESPACIADO INTERNO — un hueco por tipo de pieza. Los valores por defecto son
-   * los de siempre; un tema que quiera más aire (o más densidad) los cambia aquí,
-   * sin tocar ningún componente.
-   *   card  tarjeta (md / sm) · field  campos y selects · cell  celdas de tabla
-   *   overlay  diálogos y paneles · popover · menu / menu-item  menús
-   *   button  botones 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. Un tema de cristal (zyro) les da valores.
-   * El fondo de la página (`page-backdrop`) es un `background-image`: degradado,
-   * imagen o `none`.
-   */
-  --ds-card-backdrop: none;
-  --ds-overlay-backdrop: none;
-  --ds-field-backdrop: none;
-  --ds-sidebar-backdrop: none;
-  --ds-page-backdrop: none;
-
-  /*
-   * Dos sombras y no más: reposo y realce al señalar. Una tarjeta que no se
-   * puede pulsar no necesita la segunda.
-   *
-   * EN CAPAS y TINTADAS CON LA TINTA del tema (no negro): una capa tensa
-   * pegada a la pieza + una suave más lejana — es lo que hace que la tarjeta
-   * se despegue del lienzo de forma natural y armónica (patrón validado:
-   * joshwcomeau.com/css/designing-shadows).
-   */
-  --shadow-card:
-    0 1px 2px oklch(0.186 0.048 269 / 0.08),
-    0 3px 10px oklch(0.186 0.048 269 / 0.07);
-  --shadow-card-hover:
-    0 3px 6px oklch(0.186 0.048 269 / 0.1),
-    0 14px 32px oklch(0.186 0.048 269 / 0.14);
-
-  --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 cian de marca — no alcanza
-   * 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
-   * volver a 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;
-  }
-
-  a {
-    @apply text-link hover:text-link-hover;
-  }
-
-  /*
-   * EXCEPCIÓN: los enlaces del CHROME no son enlaces de texto — son destinos de
-   * navegación. Deben heredar el color de su superficie (blanco en la barra de
-   * marca, tinta en un menú), no el azul de enlace, que rompería el diseño.
-   */
-  [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 según el design system: radio `xl`, borde de 1px y sombra de reposo.
-   * `components/ui/card.tsx` ya lleva estos valores; esta regla los GARANTIZA
-   * aunque alguien regenere el primitivo con la CLI de shadcn (que los pisa).
-   */
-  [data-slot='card'] {
-    @apply rounded-xl shadow-card ring-0;
-    border: 1px solid var(--border);
-  }
-
-  /*
-   * Estados de interacción, resueltos UNA vez para toda la aplicación
-   * (spec `sistema-de-componentes`). Ninguna feature debería volver a declarar
-   * cursor ni anillo de foco.
-   *
-   * La lista de roles cubre lo que Base UI renderiza sin <button>: opciones de
-   * menú y select, pestañas, switches, checkboxes y radios — con hover pero sin
-   * pointer quedarían «muertos» al señalar.
-   */
-  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 por orden de cascada — por eso una opción
-   * de idioma quedaba sin pointer aunque la regla de arriba la cubriera. Como
-   * los primitivos no se editan a mano, 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;
-  }
-
-  /*
-   * SIDEBAR FLOTANTE según el DS (Identity Hub): la barra va despegada del
-   * borde, con el radio de vista (2xl ≈ 20px) y la sombra de realce — el efecto
-   * flotante es lo que le da el aire moderno. El primitivo trae `rounded-lg` y
-   * `shadow-sm` en su variante floating; se corrige AQUÍ (capa base), no en el
-   * componente, igual que la tarjeta.
-   */
-  [data-variant='floating'] [data-slot='sidebar-inner'] {
-    border-radius: var(--radius-2xl);
-    box-shadow: var(--shadow-card-hover);
-  }
-
-  /*
-   * TAMAÑO Y ALINEACIÓN DE LA NAVEGACIÓN — ajuste del DS sobre el primitivo
-   * (capa base, no el componente; los `!important` baten a las utilidades que
-   * el primitivo trae escritas).
-   *
-   * EXPANDIDO: filas de 40px con icono de 18px — las medidas del diseño
-   * («Revisión de llamada»), más presentes que las del shadcn por defecto.
-   *
-   * COLAPSADO: el primitivo amplió el raíl a 64px (`--sidebar-width-icon: 4rem`)
-   * pero conservó botones de 32px y `p-2` (8px) pensados para el raíl de 48px
-   * del shadcn original: quedaban pegados a la izquierda con 24px muertos.
-   * Botón a 40px y padding lateral a (64−40)/2 = 12px → centrado.
-   */
-  [data-sidebar='menu-button'] {
-    min-height: 2.5rem;
-  }
-  [data-sidebar='menu-button'] svg {
-    width: 1.125rem !important;
-    height: 1.125rem !important;
-  }
-
-  [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;
-  }
-  [data-collapsible='icon'] [data-sidebar='menu-button'] {
-    width: 2.5rem !important;
-    height: 2.5rem !important;
-    padding: 0.6875rem !important; /* (40−18)/2: icono centrado */
-  }
-  /* 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;
-  }
-
-  /*
-   * `prefers-reduced-motion` no es un detalle de cortesía: 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;
-    }
-  }
-}
-
-
-/*
- * Aplicación de los MATERIALES. Va en la capa base para que cualquier utilidad
- * explícita la gane, y por `data-slot` para que lo hereden todos los
- * componentes del paquete sin que ninguno escriba un efecto propio.
- */
-@layer base {
-  body {
-    background-image: var(--ds-page-backdrop);
-    background-attachment: fixed;
-    background-size: cover;
-  }
-
-  [data-slot='card'] {
-    -webkit-backdrop-filter: var(--ds-card-backdrop);
-    backdrop-filter: var(--ds-card-backdrop);
-  }
-
-  [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);
-  }
-
-  [data-slot='sidebar-inner'] {
-    -webkit-backdrop-filter: var(--ds-sidebar-backdrop);
-    backdrop-filter: var(--ds-sidebar-backdrop);
-  }
-}
+/*
+ * 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-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-item-radius: var(--ds-radius-md);
+  --ds-sidebar-item-h: 2.5rem;
+
+  /* ── 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 de 40px y padding lateral de 12px → icono centrado en el
+   * raíl de 64px.
+   */
+  [data-sidebar='menu-button'] {
+    min-height: var(--ds-sidebar-item-h);
+  }
+  [data-sidebar='menu-button'] svg {
+    width: 1.125rem !important;
+    height: 1.125rem !important;
+  }
+
+  [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;
+  }
+  [data-collapsible='icon'] [data-sidebar='menu-button'] {
+    width: 2.5rem !important;
+    height: 2.5rem !important;
+    padding: 0.6875rem !important; /* (40−18)/2: icono centrado */
+  }
+  /* 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;
+  }
+
+  /*
+   * `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;
+    }
+  }
+}