orbital-ds 0.7.0 → 0.9.0

package/dist/themes/zyro.scoped.css

@@ -1,389 +1,443 @@
-/*
- * TEMA zyro — «liquid glass» (traducido de faro-orbital-zyro-ui).
- *
- * Personalidad: lavanda claro / azul muy oscuro, acento azul profundo (claro) y
- * cian (oscuro). El cristal vive en la capa de NAVEGACIÓN y CONTROLES (sidebar,
- * campos, menús); el CONTENIDO (tarjetas) se mantiene casi opaco, como indican
- * las guías de cristal. Sidebar a ras de borde, sin silueta flotante. Acción
- * primaria = píldora con degradado de marca y brillo.
- *
- * Estructura del fichero:
- *   1. Variables claras (:root) y oscuras (.dark) — el CONTRATO del tema.
- *   2. Capa de PERSONALIDAD — reglas sobre los ganchos del DOM (`data-slot`,
- *      `data-variant`…) escritas solo con variables. Va SIN capa para ganar a las
- *      utilidades de los componentes, así que define también los estados
- *      (hover, active). Es lo que da forma propia a los elementos.
- *
- * Variables `--zy-*`: privadas de este tema (no son contrato).
- * Importar DESPUÉS de la estructura. Fuentes: `zyro.fonts.css`, lo primero del CSS.
- */
-
-/* ── 1. VARIABLES · PIEL CLARA ───────────────────────────────────────────── */
-:root:where([data-theme='zyro']) {
-  --radius: 18px;
-
-  /* Tipografía: Montserrat (titulares) + Roboto (cuerpo) */
-  --ds-font-sans: 'Roboto', system-ui, -apple-system, sans-serif;
-  --ds-font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
-  --ds-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
-
-  /* Lateral: iconos, raíl, logo y separadores (cada tema fija su forma y tamaño) */
-  --ds-sidebar-icon: 1.25rem;
-  --ds-sidebar-icon-stroke: 2;
-  --ds-sidebar-rail-w: 4.5rem;
-  --ds-sidebar-rail-item: 2.75rem;
-  --ds-sidebar-logo: 2.25rem;
-  --ds-sidebar-sep-inset: 0rem;
-  --ds-heading-tracking: -0.01em;
-
-  /* Color */
-  --background: #eaeefb;
-  --foreground: rgba(14, 22, 48, 0.92);
-
-  --card: rgba(255, 255, 255, 0.98);
-  --card-foreground: rgba(14, 22, 48, 0.92);
-  --popover: #ffffff;
-  --popover-foreground: rgba(14, 22, 48, 0.92);
-
-  --primary: #0349fe;
-  --primary-foreground: #ffffff;
-  --secondary: rgba(243, 246, 253, 0.9);
-  --secondary-foreground: rgba(14, 22, 48, 0.92);
-  --muted: rgba(243, 246, 253, 0.9);
-  --muted-foreground: rgba(14, 22, 48, 0.66);
-  --accent: rgba(3, 73, 254, 0.09);
-  --accent-foreground: #0349fe;
-  --destructive: #e61919;
-  --destructive-foreground: #ffffff;
-
-  --border: rgba(168, 190, 235, 0.3);
-  --input: rgba(168, 190, 235, 0.55);
-  --ring: #0349fe;
-
-  --chart-1: #0349fe;
-  --chart-2: #14bd44;
-  --chart-3: #ffb300;
-  --chart-4: #eb1919;
-  --chart-5: #9747ff;
-
-  --sidebar: rgba(255, 255, 255, 0.58);
-  --sidebar-foreground: rgba(14, 22, 48, 0.78);
-  --sidebar-primary: #0349fe;
-  --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: rgba(3, 73, 254, 0.09);
-  --sidebar-accent-foreground: #0349fe;
-  --sidebar-border: rgba(168, 190, 235, 0.35);
-  --sidebar-ring: #0349fe;
-
-  --danger: #c21414;
-  --danger-soft: rgba(235, 25, 25, 0.1);
-  --warning: #845f00;
-  --warning-soft: rgba(255, 179, 0, 0.16);
-  --success: #0b742a;
-  --success-soft: rgba(20, 189, 68, 0.12);
-  --info: #1267a1;
-  --info-soft: rgba(42, 147, 213, 0.12);
-  --neutral: rgba(14, 22, 48, 0.63);
-  --neutral-soft: rgba(14, 22, 48, 0.06);
-
-  --link: #0349fe;
-  --link-hover: #0236c0;
-  --inset: rgba(243, 246, 253, 0.9);
-  --inset-foreground: rgba(14, 22, 48, 0.92);
-  --brand: #0349fe;
-  --brand-bright: #36b3ed;
-
-  /* Formas: la esquina crece con el tamaño del contenedor (7·10·14·18·22) */
-  --ds-radius-sm: 7px;
-  --ds-radius-md: 10px;
-  --ds-radius-lg: 14px;
-  --ds-radius-xl: 18px;
-  --ds-radius-2xl: 22px;
-  --ds-radius-control: 10px;
-  --ds-radius-overlay: 22px;
-
-  /* Sombras de cristal: capa tenue + brillo interior en el borde superior */
-  --ds-shadow-card: 0 2px 14px rgba(28, 48, 100, 0.07);
-  --ds-shadow-card-hover: 0 6px 26px rgba(28, 48, 100, 0.1);
-  --ds-shadow-raised: 0 4px 30px rgba(28, 48, 100, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
-  --ds-shadow-overlay: 0 14px 52px rgba(28, 48, 100, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
-  --ds-shadow-popover: 0 14px 52px rgba(28, 48, 100, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
-
-  /* Medidas: controles algo más altos y holgados */
-  --ds-control-h-sm: 2.25rem;
-  --ds-control-h-md: 2.5rem;
-  --ds-control-h-lg: 2.75rem;
-  --ds-button-px-sm: 1rem;
-  --ds-button-px-md: 1.25rem;
-  --ds-button-px-lg: 1.5rem;
-  --ds-field-px: 1rem;
-
-  /* Materiales: cristal en navegación y controles; tarjetas sin desenfoque */
-  --ds-sidebar-backdrop: blur(28px) saturate(180%);
-  --ds-overlay-backdrop: blur(28px) saturate(180%);
-  --ds-field-backdrop: blur(12px) saturate(160%);
-  --ds-card-backdrop: none;
-  --ds-page-backdrop:
-    radial-gradient(55% 45% at 78% 6%, rgba(54, 179, 237, 0.3), transparent 70%),
-    radial-gradient(50% 45% at 96% 58%, rgba(3, 73, 254, 0.16), transparent 70%),
-    radial-gradient(55% 50% at 40% 106%, rgba(151, 71, 255, 0.14), transparent 70%);
-
-  /* Sidebar a ras de borde: sin separación, sin silueta; filo de 1px */
-  --ds-sidebar-pad: 0px;
-  --ds-sidebar-radius: 0px;
-  --ds-sidebar-shadow: 0 0 #0000;
-  --ds-sidebar-ring: 0px;
-  --ds-sidebar-edge: 1px solid var(--zy-glass-bs);
-  --ds-sidebar-item-radius: var(--ds-radius-lg);
-
-  /* Privadas de zyro */
-  --zy-accent-g: linear-gradient(135deg, #0349fe, #36b3ed);
-  --zy-accent-glow: rgba(3, 73, 254, 0.24);
-  --zy-glass-bt: rgba(255, 255, 255, 0.95);
-  --zy-glass-bs: rgba(168, 190, 235, 0.4);
-  --zy-card-bt: rgba(255, 255, 255, 1);
-  --zy-card-bs: rgba(168, 190, 235, 0.46);
-  --zy-field-bg: rgba(255, 255, 255, 0.72);
-  --zy-field-b: rgba(168, 190, 235, 0.55);
-  --zy-field-bt: rgba(255, 255, 255, 1);
-  --zy-pill: rgba(255, 255, 255, 0.55);
-  --zy-pill-on: rgba(255, 255, 255, 0.98);
-  --zy-conv-h: rgba(20, 40, 90, 0.04);
-  --zy-conv-a: rgba(3, 73, 254, 0.07);
-  --zy-conv-ab: rgba(3, 73, 254, 0.24);
-  --zy-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
-}
-
-/* ── 1b. VARIABLES · PIEL OSCURA ─────────────────────────────────────────── */
-:where(:root[data-theme='zyro']).dark {
-  --background: #0e3148;
-  --foreground: rgba(255, 255, 255, 0.94);
-
-  --card: rgba(16, 24, 54, 0.94);
-  --card-foreground: rgba(255, 255, 255, 0.94);
-  --popover: rgba(22, 32, 68, 0.97);
-  --popover-foreground: rgba(255, 255, 255, 0.94);
-
-  --primary: #36b3ed;
-  --primary-foreground: #04121c;
-  --secondary: rgba(255, 255, 255, 0.05);
-  --secondary-foreground: rgba(255, 255, 255, 0.94);
-  --muted: rgba(255, 255, 255, 0.05);
-  --muted-foreground: rgba(255, 255, 255, 0.68);
-  --accent: rgba(54, 179, 237, 0.16);
-  --accent-foreground: #36b3ed;
-  --destructive: #e61919;
-  --destructive-foreground: #ffffff;
-
-  --border: rgba(255, 255, 255, 0.07);
-  --input: rgba(255, 255, 255, 0.12);
-  --ring: #36b3ed;
-
-  --chart-1: #36b3ed;
-  --chart-2: #14bd44;
-  --chart-3: #ffb300;
-  --chart-4: #eb1919;
-  --chart-5: #9747ff;
-
-  --sidebar: rgba(255, 255, 255, 0.04);
-  --sidebar-foreground: rgba(255, 255, 255, 0.72);
-  --sidebar-primary: #36b3ed;
-  --sidebar-primary-foreground: #04121c;
-  --sidebar-accent: rgba(54, 179, 237, 0.16);
-  --sidebar-accent-foreground: #36b3ed;
-  --sidebar-border: rgba(255, 255, 255, 0.07);
-  --sidebar-ring: #36b3ed;
-
-  --danger: #ff6b6b;
-  --danger-soft: rgba(235, 25, 25, 0.2);
-  --warning: #ffb300;
-  --warning-soft: rgba(255, 179, 0, 0.18);
-  --success: #3cc864;
-  --success-soft: rgba(20, 189, 68, 0.18);
-  --info: #70b7e3;
-  --info-soft: rgba(42, 147, 213, 0.2);
-  --neutral: rgba(255, 255, 255, 0.6);
-  --neutral-soft: rgba(255, 255, 255, 0.08);
-
-  --link: #36b3ed;
-  --link-hover: #7fd0f5;
-  --inset: rgba(255, 255, 255, 0.05);
-  --inset-foreground: rgba(255, 255, 255, 0.94);
-  --brand: #36b3ed;
-  --brand-bright: #7fd0f5;
-
-  --ds-shadow-card: 0 2px 14px rgba(0, 0, 0, 0.3);
-  --ds-shadow-card-hover: 0 6px 26px rgba(0, 0, 0, 0.38);
-  --ds-shadow-raised: 0 8px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
-  --ds-shadow-overlay: 0 22px 64px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.13);
-  --ds-shadow-popover: 0 22px 64px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.13);
-
-  --ds-sidebar-backdrop: blur(24px) saturate(180%);
-  --ds-overlay-backdrop: blur(24px) saturate(180%);
-  --ds-page-backdrop:
-    radial-gradient(55% 45% at 78% 6%, rgba(54, 179, 237, 0.26), transparent 70%),
-    radial-gradient(50% 45% at 96% 58%, rgba(3, 73, 254, 0.24), transparent 70%),
-    radial-gradient(55% 50% at 40% 106%, rgba(151, 71, 255, 0.2), transparent 70%);
-
-  --zy-accent-g: linear-gradient(135deg, #36b3ed, #0349fe);
-  --zy-accent-glow: rgba(54, 179, 237, 0.42);
-  --zy-glass-bt: rgba(255, 255, 255, 0.3);
-  --zy-glass-bs: rgba(255, 255, 255, 0.07);
-  --zy-card-bt: rgba(255, 255, 255, 0.11);
-  --zy-card-bs: rgba(255, 255, 255, 0.06);
-  --zy-field-bg: rgba(255, 255, 255, 0.06);
-  --zy-field-b: rgba(255, 255, 255, 0.12);
-  --zy-field-bt: rgba(255, 255, 255, 0.26);
-  --zy-pill: rgba(255, 255, 255, 0.05);
-  --zy-pill-on: rgba(255, 255, 255, 0.12);
-  --zy-conv-h: rgba(255, 255, 255, 0.05);
-  --zy-conv-a: rgba(54, 179, 237, 0.14);
-  --zy-conv-ab: rgba(54, 179, 237, 0.4);
-}
-
-/* ── 2. PERSONALIDAD ─────────────────────────────────────────────────────────
- * Sin capa: gana a las utilidades de los componentes. Solo variables.
- */
-:root:where([data-theme='zyro']) {
-  /* Botones: píldora. Acción primaria con degradado de marca y brillo. */
-  [data-slot='button'] {
-    border-radius: 9999px;
-    transition: all var(--ds-motion-base) var(--zy-ease);
-  }
-  [data-slot='button'][data-size^='icon'] {
-    border-radius: var(--ds-radius-xl);
-  }
-  [data-slot='button']:active:not(:disabled) {
-    transform: scale(0.98);
-  }
-  [data-slot='button'][data-variant='default'] {
-    background-color: transparent;
-    background-image: var(--zy-accent-g);
-    color: #ffffff;
-    border-color: transparent;
-    box-shadow: 0 4px 16px var(--zy-accent-glow);
-  }
-  [data-slot='button'][data-variant='default']:hover:not(:disabled) {
-    filter: brightness(1.1);
-    box-shadow: 0 6px 22px var(--zy-accent-glow);
-  }
-  [data-slot='button'][data-variant='destructive'] {
-    box-shadow: 0 4px 16px rgba(235, 25, 25, 0.3);
-  }
-  [data-slot='button'][data-variant='outline'],
-  [data-slot='button'][data-variant='secondary'] {
-    border: 1px solid var(--zy-field-b);
-    background: color-mix(in oklch, var(--foreground) 5%, var(--background));
-    color: var(--muted-foreground);
-  }
-  [data-slot='button'][data-variant='outline']:hover:not(:disabled),
-  [data-slot='button'][data-variant='secondary']:hover:not(:disabled) {
-    background: color-mix(in oklch, var(--foreground) 11%, var(--background));
-    color: var(--foreground);
-  }
-  [data-slot='button'][data-variant='ghost']:hover:not(:disabled) {
-    background: var(--zy-conv-h);
-    color: var(--foreground);
-  }
-
-  /* Tarjetas: contenido casi opaco con filo superior luminoso */
-  [data-slot='card'] {
-    border: 1px solid var(--zy-card-bs);
-    border-top-color: var(--zy-card-bt);
-  }
-
-  /* Campos: cristal claro con filo superior */
-  [data-slot='input'],
-  [data-slot='textarea'],
-  [data-slot='select-trigger'] {
-    background-color: var(--zy-field-bg);
-    border-color: var(--zy-field-b);
-    border-top-color: var(--zy-field-bt);
-  }
-
-  /* Capas flotantes: filo de cristal */
-  [data-slot='dialog-content'],
-  [data-slot='popover-content'],
-  [data-slot='dropdown-menu-content'],
-  [data-slot='select-content'] {
-    border: 1px solid var(--zy-glass-bs);
-    border-top-color: var(--zy-glass-bt);
-  }
-
-  /* Etiquetas en píldora */
-  [data-slot='badge'] {
-    border-radius: 9999px;
-  }
-
-  /* Pestañas: píldora de cristal con la activa elevada */
-  [data-slot='tabs-list'] {
-    background: var(--zy-pill);
-    border: 1px solid var(--zy-card-bs);
-    border-radius: 9999px;
-  }
-  [data-slot='tabs-trigger'] {
-    border-radius: 9999px;
-  }
-  [data-slot='tabs-trigger'][data-active] {
-    background: var(--zy-pill-on);
-    box-shadow: 0 1px 6px rgba(28, 48, 100, 0.12);
-  }
-
-  /* Interruptor y progreso: degradado de marca */
-  [data-slot='switch'][data-checked] {
-    background-image: var(--zy-accent-g);
-    background-color: transparent;
-  }
-  [data-slot='progress-indicator'] {
-    background-image: var(--zy-accent-g);
-    background-color: transparent;
-  }
-
-  /* Sidebar: destino activo con tinte y filo, como la conversación activa de zyro */
-  [data-sidebar='menu-button'][data-active='true'] {
-    background: var(--zy-conv-a);
-    box-shadow: inset 0 0 0 1px var(--zy-conv-ab);
-    color: var(--sidebar-accent-foreground);
-  }
-  [data-sidebar='menu-button']:hover:not([data-active='true']) {
-    background: var(--zy-conv-h);
-  }
-}
-
-/* Ajustes de personalidad (vistos en el banco de pruebas) */
-:root:where([data-theme='zyro']) {
-  /* Grupos de botones: píldora solo en los extremos, el interior recto */
-  [data-slot='button-group'] [data-slot='button'] {
-    border-radius: 0;
-  }
-  [data-slot='button-group'] [data-slot='button']:first-child {
-    border-start-start-radius: 9999px;
-    border-end-start-radius: 9999px;
-  }
-  [data-slot='button-group'] [data-slot='button']:last-child {
-    border-start-end-radius: 9999px;
-    border-end-end-radius: 9999px;
-  }
-
-  /* Esqueletos: visibles sobre la tarjeta casi blanca */
-  [data-slot='skeleton'] {
-    background: color-mix(in oklch, var(--foreground) 9%, transparent);
-  }
-}
-
-/* Fondo vivo: los degradados derivan despacio (aproximación ligera, sin WebGL de la
-   malla original). `prefers-reduced-motion` ya detiene la animación en la estructura. */
-:root:where([data-theme='zyro']) {
-  body {
-    background-size: 160% 160%;
-    animation: zy-drift 40s ease-in-out infinite alternate;
-  }
-}
-@keyframes zy-drift {
-  from {
-    background-position: 0% 0%;
-  }
-  to {
-    background-position: 100% 100%;
-  }
-}
+/*
+ * TEMA zyro — «liquid glass» (traducido de faro-orbital-zyro-ui).
+ *
+ * Personalidad: lavanda claro / azul muy oscuro, acento azul profundo (claro) y
+ * cian (oscuro). El cristal vive en la capa de NAVEGACIÓN y CONTROLES (sidebar,
+ * campos, menús); el CONTENIDO (tarjetas) se mantiene casi opaco, como indican
+ * las guías de cristal. Sidebar a ras de borde, sin silueta flotante. Acción
+ * primaria = píldora con degradado de marca y brillo.
+ *
+ * Estructura del fichero:
+ *   1. Variables claras (:root) y oscuras (.dark) — el CONTRATO del tema.
+ *   2. Capa de PERSONALIDAD — reglas sobre los ganchos del DOM (`data-slot`,
+ *      `data-variant`…) escritas solo con variables. Va SIN capa para ganar a las
+ *      utilidades de los componentes, así que define también los estados
+ *      (hover, active). Es lo que da forma propia a los elementos.
+ *
+ * Variables `--zy-*`: privadas de este tema (no son contrato).
+ * Importar DESPUÉS de la estructura. Fuentes: `zyro.fonts.css`, lo primero del CSS.
+ */
+
+/* ── 1. VARIABLES · PIEL CLARA ───────────────────────────────────────────── */
+:root:where([data-theme='zyro']) {
+  --radius: 18px;
+
+  /* Tipografía: Montserrat (titulares) + Roboto (cuerpo) */
+  --ds-font-sans: 'Roboto', system-ui, -apple-system, sans-serif;
+  --ds-font-display: 'Montserrat', system-ui, -apple-system, sans-serif;
+  --ds-font-mono: ui-monospace, 'SF Mono', Menlo, monospace;
+
+  /* Lateral: iconos, raíl, logo y separadores (cada tema fija su forma y tamaño) */
+  --ds-sidebar-icon: 1.25rem;
+  --ds-sidebar-icon-stroke: 2;
+  --ds-sidebar-rail-w: 4.5rem;
+  --ds-sidebar-rail-item: 2.75rem;
+  --ds-sidebar-logo: 2.25rem;
+  --ds-sidebar-sep-inset: 0rem;
+  --ds-heading-tracking: -0.01em;
+
+  /* Color */
+  --background: #eaeefb;
+  --foreground: rgba(14, 22, 48, 0.92);
+
+  --card: rgba(255, 255, 255, 0.98);
+  --card-foreground: rgba(14, 22, 48, 0.92);
+  --popover: #ffffff;
+  --popover-foreground: rgba(14, 22, 48, 0.92);
+
+  --primary: #0349fe;
+  --primary-foreground: #ffffff;
+  --secondary: rgba(243, 246, 253, 0.9);
+  --secondary-foreground: rgba(14, 22, 48, 0.92);
+  --muted: rgba(243, 246, 253, 0.9);
+  --muted-foreground: rgba(14, 22, 48, 0.66);
+  --accent: rgba(3, 73, 254, 0.09);
+  --accent-foreground: #0349fe;
+  --destructive: #e61919;
+  --destructive-foreground: #ffffff;
+
+  --border: rgba(168, 190, 235, 0.3);
+  --input: rgba(168, 190, 235, 0.55);
+  --ring: #0349fe;
+
+  --chart-1: #0349fe;
+  --chart-2: #14bd44;
+  --chart-3: #ffb300;
+  --chart-4: #eb1919;
+  --chart-5: #9747ff;
+
+  --sidebar: rgba(255, 255, 255, 0.58);
+  --sidebar-foreground: rgba(14, 22, 48, 0.78);
+  --sidebar-primary: #0349fe;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: rgba(3, 73, 254, 0.09);
+  --sidebar-accent-foreground: #0349fe;
+  --sidebar-border: rgba(168, 190, 235, 0.35);
+  --sidebar-ring: #0349fe;
+
+  --danger: #c21414;
+  --danger-soft: rgba(235, 25, 25, 0.1);
+  --warning: #845f00;
+  --warning-soft: rgba(255, 179, 0, 0.16);
+  --success: #0b742a;
+  --success-soft: rgba(20, 189, 68, 0.12);
+  --info: #1267a1;
+  --info-soft: rgba(42, 147, 213, 0.12);
+  --neutral: rgba(14, 22, 48, 0.63);
+  --neutral-soft: rgba(14, 22, 48, 0.06);
+
+  --link: #0349fe;
+  --link-hover: #0236c0;
+  --inset: rgba(243, 246, 253, 0.9);
+  --inset-foreground: rgba(14, 22, 48, 0.92);
+  --brand: #0349fe;
+  --brand-bright: #36b3ed;
+
+  /* Formas: la esquina crece con el tamaño del contenedor (7·10·14·18·22) */
+  --ds-radius-sm: 7px;
+  --ds-radius-md: 10px;
+  --ds-radius-lg: 14px;
+  --ds-radius-xl: 18px;
+  --ds-radius-2xl: 22px;
+  --ds-radius-control: 10px;
+  --ds-radius-overlay: 22px;
+
+  /* Sombras de cristal: capa tenue + brillo interior en el borde superior */
+  --ds-shadow-card: 0 2px 14px rgba(28, 48, 100, 0.07);
+  --ds-shadow-card-hover: 0 6px 26px rgba(28, 48, 100, 0.1);
+  --ds-shadow-raised: 0 4px 30px rgba(28, 48, 100, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.85);
+  --ds-shadow-overlay: 0 14px 52px rgba(28, 48, 100, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
+  --ds-shadow-popover: 0 14px 52px rgba(28, 48, 100, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.95);
+
+  /* Medidas: controles algo más altos y holgados */
+  --ds-control-h-sm: 2.25rem;
+  --ds-control-h-md: 2.5rem;
+  --ds-control-h-lg: 2.75rem;
+  --ds-button-px-sm: 1rem;
+  --ds-button-px-md: 1.25rem;
+  --ds-button-px-lg: 1.5rem;
+  --ds-field-px: 1rem;
+
+  /* Materiales: cristal en navegación y controles; tarjetas sin desenfoque */
+  --ds-sidebar-backdrop: blur(28px) saturate(180%);
+  --ds-overlay-backdrop: blur(28px) saturate(180%);
+  --ds-field-backdrop: blur(12px) saturate(160%);
+  --ds-card-backdrop: none;
+  --ds-page-backdrop:
+    radial-gradient(55% 45% at 78% 6%, rgba(54, 179, 237, 0.3), transparent 70%),
+    radial-gradient(50% 45% at 96% 58%, rgba(3, 73, 254, 0.16), transparent 70%),
+    radial-gradient(55% 50% at 40% 106%, rgba(151, 71, 255, 0.14), transparent 70%);
+
+  /* Sidebar a ras de borde: sin separación, sin silueta; filo de 1px */
+  --ds-sidebar-pad: 0px;
+  --ds-sidebar-radius: 0px;
+  --ds-sidebar-shadow: 0 0 #0000;
+  --ds-sidebar-ring: 0px;
+  --ds-sidebar-edge: 1px solid var(--zy-glass-bs);
+  --ds-sidebar-item-radius: var(--ds-radius-lg);
+
+  /* Privadas de zyro */
+  --zy-accent-g: linear-gradient(135deg, #0349fe, #36b3ed);
+  --zy-accent-glow: rgba(3, 73, 254, 0.24);
+  --zy-glass-bt: rgba(255, 255, 255, 0.95);
+  --zy-glass-bs: rgba(168, 190, 235, 0.4);
+  --zy-card-bt: rgba(255, 255, 255, 1);
+  --zy-card-bs: rgba(168, 190, 235, 0.46);
+  --zy-field-bg: rgba(255, 255, 255, 0.72);
+  --zy-field-b: rgba(168, 190, 235, 0.55);
+  --zy-field-bt: rgba(255, 255, 255, 1);
+  --zy-pill: rgba(255, 255, 255, 0.55);
+  --zy-pill-on: rgba(255, 255, 255, 0.98);
+  --zy-conv-h: rgba(20, 40, 90, 0.04);
+  --zy-conv-a: rgba(3, 73, 254, 0.07);
+  --zy-conv-ab: rgba(3, 73, 254, 0.24);
+  --zy-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+/* ── 1b. VARIABLES · PIEL OSCURA ─────────────────────────────────────────── */
+:where(:root[data-theme='zyro']).dark {
+  --background: #0e3148;
+  --foreground: rgba(255, 255, 255, 0.94);
+
+  --card: rgba(16, 24, 54, 0.94);
+  --card-foreground: rgba(255, 255, 255, 0.94);
+  --popover: rgba(22, 32, 68, 0.97);
+  --popover-foreground: rgba(255, 255, 255, 0.94);
+
+  --primary: #36b3ed;
+  --primary-foreground: #04121c;
+  --secondary: rgba(255, 255, 255, 0.05);
+  --secondary-foreground: rgba(255, 255, 255, 0.94);
+  --muted: rgba(255, 255, 255, 0.05);
+  --muted-foreground: rgba(255, 255, 255, 0.68);
+  --accent: rgba(54, 179, 237, 0.16);
+  --accent-foreground: #36b3ed;
+  --destructive: #e61919;
+  --destructive-foreground: #ffffff;
+
+  --border: rgba(255, 255, 255, 0.07);
+  --input: rgba(255, 255, 255, 0.12);
+  --ring: #36b3ed;
+
+  --chart-1: #36b3ed;
+  --chart-2: #14bd44;
+  --chart-3: #ffb300;
+  --chart-4: #eb1919;
+  --chart-5: #9747ff;
+
+  --sidebar: rgba(255, 255, 255, 0.04);
+  --sidebar-foreground: rgba(255, 255, 255, 0.72);
+  --sidebar-primary: #36b3ed;
+  --sidebar-primary-foreground: #04121c;
+  --sidebar-accent: rgba(54, 179, 237, 0.16);
+  --sidebar-accent-foreground: #36b3ed;
+  --sidebar-border: rgba(255, 255, 255, 0.07);
+  --sidebar-ring: #36b3ed;
+
+  --danger: #ff6b6b;
+  --danger-soft: rgba(235, 25, 25, 0.2);
+  --warning: #ffb300;
+  --warning-soft: rgba(255, 179, 0, 0.18);
+  --success: #3cc864;
+  --success-soft: rgba(20, 189, 68, 0.18);
+  --info: #70b7e3;
+  --info-soft: rgba(42, 147, 213, 0.2);
+  --neutral: rgba(255, 255, 255, 0.6);
+  --neutral-soft: rgba(255, 255, 255, 0.08);
+
+  --link: #36b3ed;
+  --link-hover: #7fd0f5;
+  --inset: rgba(255, 255, 255, 0.05);
+  --inset-foreground: rgba(255, 255, 255, 0.94);
+  --brand: #36b3ed;
+  --brand-bright: #7fd0f5;
+
+  --ds-shadow-card: 0 2px 14px rgba(0, 0, 0, 0.3);
+  --ds-shadow-card-hover: 0 6px 26px rgba(0, 0, 0, 0.38);
+  --ds-shadow-raised: 0 8px 40px rgba(0, 0, 0, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.1);
+  --ds-shadow-overlay: 0 22px 64px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.13);
+  --ds-shadow-popover: 0 22px 64px rgba(0, 0, 0, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.13);
+
+  --ds-sidebar-backdrop: blur(24px) saturate(180%);
+  --ds-overlay-backdrop: blur(24px) saturate(180%);
+  --ds-page-backdrop:
+    radial-gradient(55% 45% at 78% 6%, rgba(54, 179, 237, 0.26), transparent 70%),
+    radial-gradient(50% 45% at 96% 58%, rgba(3, 73, 254, 0.24), transparent 70%),
+    radial-gradient(55% 50% at 40% 106%, rgba(151, 71, 255, 0.2), transparent 70%);
+
+  --zy-accent-g: linear-gradient(135deg, #36b3ed, #0349fe);
+  --zy-accent-glow: rgba(54, 179, 237, 0.42);
+  --zy-glass-bt: rgba(255, 255, 255, 0.3);
+  --zy-glass-bs: rgba(255, 255, 255, 0.07);
+  --zy-card-bt: rgba(255, 255, 255, 0.11);
+  --zy-card-bs: rgba(255, 255, 255, 0.06);
+  --zy-field-bg: rgba(255, 255, 255, 0.06);
+  --zy-field-b: rgba(255, 255, 255, 0.12);
+  --zy-field-bt: rgba(255, 255, 255, 0.26);
+  --zy-pill: rgba(255, 255, 255, 0.05);
+  --zy-pill-on: rgba(255, 255, 255, 0.12);
+  --zy-conv-h: rgba(255, 255, 255, 0.05);
+  --zy-conv-a: rgba(54, 179, 237, 0.14);
+  --zy-conv-ab: rgba(54, 179, 237, 0.4);
+}
+
+/* ── VARIABLES DE LA PERSONALIDAD ────────────────────────────────────────────
+ * Lo que las reglas de abajo piden: cámbialo aquí (o en el brand.css de la app),
+ * nunca en las reglas. Las `--zy-*` son privadas del tema.
+ */
+:root:where([data-theme='zyro']) {
+  /* Movimiento: suave y largo, como el cristal; curva muy amortiguada */
+  --ds-motion-fast: 140ms;
+  --ds-motion-base: 260ms;
+  --ds-motion-slow: 380ms;
+  --ds-ease-standard: cubic-bezier(0.16, 1, 0.3, 1);
+  --ds-ease-enter: cubic-bezier(0.16, 1, 0.3, 1);
+  --ds-ease-exit: cubic-bezier(0.7, 0, 0.84, 0);
+  --ds-motion-distance: 12px;
+  --ds-motion-scale: 0.97;
+  --ds-motion-blur: 6px;
+  --ds-spring-bounce: 0.1;
+  --ds-motion-stagger: 55ms;
+  --ds-motion-press-scale: 0.98;
+  --ds-rule-w: 1px;
+  --ds-shadow-button: 0 4px 16px var(--zy-accent-glow);
+  --ds-shadow-button-hover: 0 6px 22px var(--zy-accent-glow);
+  --zy-accent-ink: #ffffff; /* texto sobre el degradado de marca, en las dos pieles */
+  --zy-shadow-danger: 0 4px 16px rgba(235, 25, 25, 0.3);
+  --zy-shadow-tab-active: 0 1px 6px rgba(28, 48, 100, 0.12);
+  --zy-press-scale: 0.98;
+  --zy-hover-brightness: 1.1;
+  --zy-drift-duration: 40s;
+}
+
+/* La sombra lee un color que cambia de piel: se repite en .dark para que se resuelva allí. */
+:where(:root[data-theme='zyro']).dark {
+  --ds-shadow-button: 0 4px 16px var(--zy-accent-glow);
+  --ds-shadow-button-hover: 0 6px 22px var(--zy-accent-glow);
+}
+
+/* ── 2. PERSONALIDAD ─────────────────────────────────────────────────────────
+ * Sin capa: gana a las utilidades de los componentes. Solo variables (lo comprueba
+ * el doctor: tema `conformance: strict`). Familias completas.
+ */
+:root:where([data-theme='zyro']) {
+  /* Botones: píldora. Acción primaria con degradado de marca y brillo. */
+  [data-slot='button'] {
+    border-radius: var(--ds-radius-pill);
+    transition: all var(--ds-motion-base) var(--zy-ease);
+  }
+  [data-slot='button'][data-size^='icon'] {
+    border-radius: var(--ds-radius-xl);
+  }
+  [data-slot='button']:active:not(:disabled) {
+    transform: scale(var(--zy-press-scale));
+  }
+  [data-slot='button'][data-variant='default'] {
+    background-color: transparent;
+    background-image: var(--zy-accent-g);
+    color: var(--zy-accent-ink);
+    border-color: transparent;
+    box-shadow: var(--ds-shadow-button);
+  }
+  [data-slot='button'][data-variant='default']:hover:not(:disabled) {
+    filter: brightness(var(--zy-hover-brightness));
+    box-shadow: var(--ds-shadow-button-hover);
+  }
+  [data-slot='button'][data-variant='destructive'] {
+    box-shadow: var(--zy-shadow-danger);
+  }
+  [data-slot='button'][data-variant='outline'],
+  [data-slot='button'][data-variant='secondary'] {
+    border: var(--ds-rule-w) solid var(--zy-field-b);
+    background: color-mix(in oklch, var(--foreground) 5%, var(--background));
+    color: var(--muted-foreground);
+  }
+  [data-slot='button'][data-variant='outline']:hover:not(:disabled),
+  [data-slot='button'][data-variant='secondary']:hover:not(:disabled) {
+    background: color-mix(in oklch, var(--foreground) 11%, var(--background));
+    color: var(--foreground);
+  }
+  [data-slot='button'][data-variant='ghost']:hover:not(:disabled) {
+    background: var(--zy-conv-h);
+    color: var(--foreground);
+  }
+
+  /* Tarjetas: contenido casi opaco con filo superior luminoso */
+  [data-slot='card'] {
+    border: var(--ds-rule-w) solid var(--zy-card-bs);
+    border-top-color: var(--zy-card-bt);
+  }
+
+  /* Campos (familia «field»): cristal claro con filo superior */
+  [data-slot='input'],
+  [data-slot='textarea'],
+  [data-slot='select-trigger'],
+  [data-slot='native-select'],
+  [data-slot='input-group'],
+  [data-slot='input-otp-slot'] {
+    background-color: var(--zy-field-bg);
+    border-color: var(--zy-field-b);
+    border-top-color: var(--zy-field-bt);
+  }
+
+  /* Capas (familias «modal» y «floating»): filo de cristal */
+  [data-slot='dialog-content'],
+  [data-slot='sheet-content'],
+  [data-slot='alert-dialog-content'],
+  [data-slot='drawer-popup'],
+  [data-slot='popover-content'],
+  [data-slot='dropdown-menu-content'],
+  [data-slot='dropdown-menu-sub-content'],
+  [data-slot='select-content'],
+  [data-slot='context-menu-content'],
+  [data-slot='context-menu-sub-content'],
+  [data-slot='menubar-content'],
+  [data-slot='menubar-sub-content'],
+  [data-slot='hover-card-content'],
+  [data-slot='combobox-content'],
+  [data-slot='navigation-menu-popup'] {
+    border: var(--ds-rule-w) solid var(--zy-glass-bs);
+    border-top-color: var(--zy-glass-bt);
+  }
+
+  /* Etiquetas en píldora */
+  [data-slot='badge'] {
+    border-radius: var(--ds-radius-pill);
+  }
+
+  /* Conmutadores (familia «toggle»): píldora de cristal con el activo elevado */
+  [data-slot='tabs-list'] {
+    background: var(--zy-pill);
+    border: var(--ds-rule-w) solid var(--zy-card-bs);
+    border-radius: var(--ds-radius-pill);
+  }
+  [data-slot='tabs-trigger'],
+  [data-slot='toggle'],
+  [data-slot='toggle-group-item'] {
+    border-radius: var(--ds-radius-pill);
+  }
+  [data-slot='tabs-trigger'][data-active],
+  [data-slot='toggle'][aria-pressed='true'],
+  [data-slot='toggle-group-item'][aria-pressed='true'] {
+    background: var(--zy-pill-on);
+    box-shadow: var(--zy-shadow-tab-active);
+  }
+
+  /* Interruptor y progreso: degradado de marca */
+  [data-slot='switch'][data-checked] {
+    background-image: var(--zy-accent-g);
+    background-color: transparent;
+  }
+  [data-slot='progress-indicator'] {
+    background-image: var(--zy-accent-g);
+    background-color: transparent;
+  }
+
+  /* Sidebar: destino activo con tinte y filo, como la conversación activa de zyro */
+  [data-sidebar='menu-button'][data-active='true'] {
+    background: var(--zy-conv-a);
+    box-shadow: inset 0 0 0 var(--ds-rule-w) var(--zy-conv-ab);
+    color: var(--sidebar-accent-foreground);
+  }
+  [data-sidebar='menu-button']:hover:not([data-active='true']) {
+    background: var(--zy-conv-h);
+  }
+}
+
+/* Ajustes de personalidad (vistos en el banco de pruebas) */
+:root:where([data-theme='zyro']) {
+  /* Grupos de botones: píldora solo en los extremos, el interior recto */
+  [data-slot='button-group'] [data-slot='button'] {
+    border-radius: 0;
+  }
+  [data-slot='button-group'] [data-slot='button']:first-child {
+    border-start-start-radius: var(--ds-radius-pill);
+    border-end-start-radius: var(--ds-radius-pill);
+  }
+  [data-slot='button-group'] [data-slot='button']:last-child {
+    border-start-end-radius: var(--ds-radius-pill);
+    border-end-end-radius: var(--ds-radius-pill);
+  }
+
+  /* Esqueletos: visibles sobre la tarjeta casi blanca */
+  [data-slot='skeleton'] {
+    background: color-mix(in oklch, var(--foreground) 9%, transparent);
+  }
+}
+
+/* Fondo vivo: los degradados derivan despacio (aproximación ligera, sin WebGL de la
+   malla original). `prefers-reduced-motion` ya detiene la animación en la estructura. */
+:root:where([data-theme='zyro']) {
+  body {
+    background-size: 160% 160%;
+    animation: zy-drift var(--zy-drift-duration) ease-in-out infinite alternate;
+  }
+}
+@keyframes zy-drift {
+  from {
+    background-position: 0% 0%;
+  }
+  to {
+    background-position: 100% 100%;
+  }
+}