orbital-ds 0.5.0 → 0.6.2

package/dist/themes/friendly.css

@@ -1,310 +1,310 @@
-/*
- * TEMA friendly — «SaaS amable con personalidad».
- *
- * Referencia: la interfaz de SerpWatch (v2). Se conserva lo que le da carácter y se
- * corrigen sus defectos. Valores LEÍDOS de la referencia: lienzo #F5F6FC, tinta índigo
- * #232450, fuente Rubik, sombras teñidas de índigo, botón en píldora en mayúsculas con
- * brillo de color debajo, naranja #FBB232 como segundo acento, tarjetas de esquina
- * pequeña frente a botones del todo redondos.
- *
- * Mejoras respecto a la referencia:
- *   - El botón primario usa un periwinkle algo más oscuro (#5F6EC9) para que el texto
- *     blanco alcance contraste AA (el original, #7987CE, queda en torno a 3:1); el
- *     original se conserva como brillo (`--brand-bright`).
- *   - Texto atenuado y de estado con contraste AA.
- *
- * Importar DESPUÉS de la estructura. Variables `--zf-*`: privadas de este tema.
- * Fuentes: `friendly.fonts.css` (Rubik), lo primero del CSS de la app.
- */
-
-/* ── VARIABLES · PIEL CLARA ──────────────────────────────────────────────── */
-:root {
-  --radius: 8px;
-
-  --ds-font-sans: 'Rubik', 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;
-  --ds-heading-tracking: normal;
-
-  /* Color: lienzo azulado, tinta índigo, acento periwinkle + naranja cálido */
-  --background: #f5f6fc;
-  --foreground: #232450;
-
-  --card: #ffffff;
-  --card-foreground: #232450;
-  --popover: #ffffff;
-  --popover-foreground: #232450;
-
-  --primary: #5f6ec9;
-  --primary-foreground: #ffffff;
-  --secondary: #e8eaf8;
-  --secondary-foreground: #232450;
-  --muted: #eef0fa;
-  --muted-foreground: #6b6d96;
-  --accent: rgba(55, 132, 247, 0.14);
-  --accent-foreground: #2a64c4;
-  --destructive: #e5484d;
-  --destructive-foreground: #ffffff;
-
-  --border: rgba(35, 36, 80, 0.08);
-  --input: rgba(35, 36, 80, 0.18);
-  --ring: #5f6ec9;
-
-  --chart-1: #5f6ec9;
-  --chart-2: #fbb232;
-  --chart-3: #1db87a;
-  --chart-4: #e5484d;
-  --chart-5: #3784f7;
-
-  --sidebar: #ffffff;
-  --sidebar-foreground: #3a3b6b;
-  --sidebar-primary: #5f6ec9;
-  --sidebar-primary-foreground: #ffffff;
-  --sidebar-accent: rgba(55, 132, 247, 0.16);
-  --sidebar-accent-foreground: #2a64c4;
-  --sidebar-border: rgba(35, 36, 80, 0.07);
-  --sidebar-ring: #5f6ec9;
-
-  --danger: #c7343a;
-  --danger-soft: rgba(229, 72, 77, 0.12);
-  --warning: #9a5b00;
-  --warning-soft: rgba(251, 178, 50, 0.24);
-  --success: #0a7d55;
-  --success-soft: rgba(29, 184, 122, 0.14);
-  --info: #2a64c4;
-  --info-soft: rgba(55, 132, 247, 0.14);
-  --neutral: #6b6d96;
-  --neutral-soft: rgba(35, 36, 80, 0.07);
-
-  --link: #2a64c4;
-  --link-hover: #1f4f9e;
-  --inset: #eef0fa;
-  --inset-foreground: #232450;
-  --brand: #5f6ec9;
-  --brand-bright: #7987ce;
-
-  /* Formas: superficies de esquina pequeña; las acciones, del todo redondas */
-  --ds-radius-sm: 4px;
-  --ds-radius-md: 6px;
-  --ds-radius-lg: 8px;
-  --ds-radius-xl: 10px;
-  --ds-radius-2xl: 14px;
-  --ds-radius-control: 10px;
-  --ds-radius-overlay: 14px;
-
-  /* Sombras suaves TEÑIDAS de índigo (nunca negras) */
-  --ds-shadow-card: 0 8px 20px rgba(0, 4, 131, 0.04);
-  --ds-shadow-card-hover: 0 10px 26px rgba(0, 4, 131, 0.09);
-  --ds-shadow-control: 0 0 #0000;
-  --ds-shadow-raised: 0 8px 20px rgba(0, 4, 131, 0.06);
-  --ds-shadow-overlay: 0 16px 40px rgba(35, 36, 80, 0.16);
-  --ds-shadow-popover: 0 16px 40px rgba(35, 36, 80, 0.16);
-
-  /* Medidas: controles de 38px, botones generosos */
-  --ds-control-h-sm: 2rem;
-  --ds-control-h-md: 2.375rem;
-  --ds-control-h-lg: 2.75rem;
-  --ds-button-px-sm: 1rem;
-  --ds-button-px-md: 1.5rem;
-  --ds-button-px-lg: 2rem;
-  --ds-field-px: 0.875rem;
-  --ds-card-spacing: 1.25rem;
-  --ds-card-spacing-sm: 1rem;
-
-  /* Sin cristal: material plano y luminoso */
-  --ds-card-backdrop: none;
-  --ds-overlay-backdrop: none;
-  --ds-field-backdrop: none;
-  --ds-sidebar-backdrop: none;
-  --ds-page-backdrop: none;
-
-  /* Sidebar a ras de borde, blanco sobre el lienzo, filas con tinte azul */
-  --ds-sidebar-pad: 0px;
-  --ds-sidebar-radius: 0px;
-  --ds-sidebar-shadow: 0 0 #0000;
-  --ds-sidebar-ring: 0px;
-  --ds-sidebar-edge: 1px solid var(--sidebar-border);
-  --ds-sidebar-item-radius: 6px;
-  --ds-sidebar-item-h: 2.75rem;
-
-  /* Privadas de friendly */
-  --zf-orange: #fbb232;
-  --zf-orange-ink: #232450;
-  --zf-glow: rgba(95, 110, 201, 0.42);
-  --zf-glow-hover: rgba(95, 110, 201, 0.55);
-  --zf-fill: rgba(35, 36, 80, 0.05);
-  --zf-fill-hover: rgba(35, 36, 80, 0.08);
-}
-
-/* ── VARIABLES · PIEL OSCURA («noche índigo») ────────────────────────────── */
-.dark {
-  --background: #16173b;
-  --foreground: #ecedfa;
-
-  --card: #1f2150;
-  --card-foreground: #ecedfa;
-  --popover: #25275c;
-  --popover-foreground: #ecedfa;
-
-  --primary: #8a98f0;
-  --primary-foreground: #14153a;
-  --secondary: #2a2c63;
-  --secondary-foreground: #ecedfa;
-  --muted: #232557;
-  --muted-foreground: #a3a6d4;
-  --accent: rgba(86, 156, 255, 0.18);
-  --accent-foreground: #8dbbff;
-  --destructive: #ef5d62;
-  --destructive-foreground: #14153a;
-
-  --border: rgba(255, 255, 255, 0.09);
-  --input: rgba(255, 255, 255, 0.2);
-  --ring: #8a98f0;
-
-  --chart-1: #8a98f0;
-  --chart-2: #fbb232;
-  --chart-3: #3fd397;
-  --chart-4: #ef5d62;
-  --chart-5: #569cff;
-
-  --sidebar: #1b1d47;
-  --sidebar-foreground: #c4c6ec;
-  --sidebar-primary: #8a98f0;
-  --sidebar-primary-foreground: #14153a;
-  --sidebar-accent: rgba(86, 156, 255, 0.2);
-  --sidebar-accent-foreground: #8dbbff;
-  --sidebar-border: rgba(255, 255, 255, 0.07);
-  --sidebar-ring: #8a98f0;
-
-  --danger: #ff7a7f;
-  --danger-soft: rgba(239, 93, 98, 0.2);
-  --warning: #fbb232;
-  --warning-soft: rgba(251, 178, 50, 0.18);
-  --success: #3fd397;
-  --success-soft: rgba(63, 211, 151, 0.16);
-  --info: #8dbbff;
-  --info-soft: rgba(86, 156, 255, 0.2);
-  --neutral: #a3a6d4;
-  --neutral-soft: rgba(255, 255, 255, 0.08);
-
-  --link: #8dbbff;
-  --link-hover: #b4d1ff;
-  --inset: #232557;
-  --inset-foreground: #ecedfa;
-  --brand: #8a98f0;
-  --brand-bright: #aab4f6;
-
-  --ds-shadow-card: 0 8px 20px rgba(0, 0, 20, 0.28);
-  --ds-shadow-card-hover: 0 10px 26px rgba(0, 0, 20, 0.4);
-  --ds-shadow-raised: 0 8px 20px rgba(0, 0, 20, 0.3);
-  --ds-shadow-overlay: 0 16px 40px rgba(0, 0, 20, 0.5);
-  --ds-shadow-popover: 0 16px 40px rgba(0, 0, 20, 0.5);
-
-  --zf-orange-ink: #232450;
-  --zf-glow: rgba(138, 152, 240, 0.4);
-  --zf-glow-hover: rgba(138, 152, 240, 0.55);
-  --zf-fill: rgba(255, 255, 255, 0.07);
-  --zf-fill-hover: rgba(255, 255, 255, 0.11);
-}
-
-/* ── PERSONALIDAD ────────────────────────────────────────────────────────────
- * Sin capa: gana a las utilidades de los componentes. Solo variables.
- */
-:root {
-  /* Botones: píldora en mayúsculas con espaciado, y brillo de color debajo */
-  [data-slot='button'] {
-    border-radius: 9999px;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    font-weight: 500;
-    transition:
-      transform var(--ds-motion-base) ease,
-      box-shadow var(--ds-motion-base) ease,
-      background-color var(--ds-motion-base) ease;
-  }
-  [data-slot='button'][data-variant='link'] {
-    text-transform: none;
-    letter-spacing: normal;
-  }
-  [data-slot='button'][data-size^='icon'] {
-    border-radius: var(--ds-radius-xl);
-  }
-  [data-slot='button'][data-variant='default'] {
-    box-shadow: 0 8px 8px -3px var(--zf-glow);
-  }
-  [data-slot='button'][data-variant='default']:hover:not(:disabled) {
-    transform: translateY(-1px);
-    box-shadow: 0 10px 12px -3px var(--zf-glow-hover);
-  }
-  [data-slot='button'][data-variant='default']:active:not(:disabled) {
-    transform: translateY(0);
-  }
-  [data-slot='button'][data-variant='secondary'] {
-    background: var(--zf-fill);
-    color: var(--foreground);
-  }
-  [data-slot='button'][data-variant='secondary']:hover:not(:disabled),
-  [data-slot='button'][data-variant='ghost']:hover:not(:disabled) {
-    background: var(--zf-fill-hover);
-  }
-  [data-slot='button'][data-variant='outline'] {
-    background: transparent;
-    border: 1.5px solid color-mix(in oklch, var(--primary) 55%, transparent);
-    color: var(--primary);
-  }
-  [data-slot='button'][data-variant='outline']:hover:not(:disabled) {
-    background: color-mix(in oklch, var(--primary) 10%, transparent);
-  }
-
-  /* Tarjetas: blancas, sin borde, solo la sombra teñida */
-  [data-slot='card'] {
-    border-color: transparent;
-  }
-
-  /* Campos rellenos (sin borde), como el buscador de la referencia */
-  [data-slot='input'],
-  [data-slot='textarea'],
-  [data-slot='select-trigger'] {
-    background: var(--zf-fill);
-    border-color: transparent;
-  }
-
-  /* Etiquetas en píldora; la secundaria es el naranja de la marca */
-  [data-slot='badge'] {
-    border-radius: 9999px;
-  }
-  [data-slot='badge'][data-variant='secondary'] {
-    background: var(--zf-orange);
-    color: var(--zf-orange-ink);
-  }
-
-  /* Tablas: cabeceras en mayúsculas pequeñas */
-  [data-slot='table-head'] {
-    text-transform: uppercase;
-    font-size: 0.75rem;
-    letter-spacing: 0.05em;
-    font-weight: 600;
-    color: var(--foreground);
-  }
-
-  /* Sidebar: la fila activa con tinte azul y peso medio */
-  [data-sidebar='menu-button'][data-active='true'] {
-    font-weight: 500;
-  }
-  [data-sidebar='menu-button']:hover:not([data-active='true']) {
-    background: var(--zf-fill);
-  }
-
-  /* Pestañas: píldora tintada */
-  [data-slot='tabs-list'] {
-    background: var(--zf-fill);
-    border-radius: 9999px;
-  }
-  [data-slot='tabs-trigger'] {
-    border-radius: 9999px;
-  }
-  [data-slot='tabs-trigger'][data-active] {
-    background: var(--card);
-    box-shadow: var(--ds-shadow-raised);
-  }
-}
+/*
+ * TEMA friendly — «SaaS amable con personalidad».
+ *
+ * Referencia: la interfaz de SerpWatch (v2). Se conserva lo que le da carácter y se
+ * corrigen sus defectos. Valores LEÍDOS de la referencia: lienzo #F5F6FC, tinta índigo
+ * #232450, fuente Rubik, sombras teñidas de índigo, botón en píldora en mayúsculas con
+ * brillo de color debajo, naranja #FBB232 como segundo acento, tarjetas de esquina
+ * pequeña frente a botones del todo redondos.
+ *
+ * Mejoras respecto a la referencia:
+ *   - El botón primario usa un periwinkle algo más oscuro (#5F6EC9) para que el texto
+ *     blanco alcance contraste AA (el original, #7987CE, queda en torno a 3:1); el
+ *     original se conserva como brillo (`--brand-bright`).
+ *   - Texto atenuado y de estado con contraste AA.
+ *
+ * Importar DESPUÉS de la estructura. Variables `--zf-*`: privadas de este tema.
+ * Fuentes: `friendly.fonts.css` (Rubik), lo primero del CSS de la app.
+ */
+
+/* ── VARIABLES · PIEL CLARA ──────────────────────────────────────────────── */
+:root {
+  --radius: 8px;
+
+  --ds-font-sans: 'Rubik', 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;
+  --ds-heading-tracking: normal;
+
+  /* Color: lienzo azulado, tinta índigo, acento periwinkle + naranja cálido */
+  --background: #f5f6fc;
+  --foreground: #232450;
+
+  --card: #ffffff;
+  --card-foreground: #232450;
+  --popover: #ffffff;
+  --popover-foreground: #232450;
+
+  --primary: #5f6ec9;
+  --primary-foreground: #ffffff;
+  --secondary: #e8eaf8;
+  --secondary-foreground: #232450;
+  --muted: #eef0fa;
+  --muted-foreground: #6b6d96;
+  --accent: rgba(55, 132, 247, 0.14);
+  --accent-foreground: #2a64c4;
+  --destructive: #e5484d;
+  --destructive-foreground: #ffffff;
+
+  --border: rgba(35, 36, 80, 0.08);
+  --input: rgba(35, 36, 80, 0.18);
+  --ring: #5f6ec9;
+
+  --chart-1: #5f6ec9;
+  --chart-2: #fbb232;
+  --chart-3: #1db87a;
+  --chart-4: #e5484d;
+  --chart-5: #3784f7;
+
+  --sidebar: #ffffff;
+  --sidebar-foreground: #3a3b6b;
+  --sidebar-primary: #5f6ec9;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: rgba(55, 132, 247, 0.16);
+  --sidebar-accent-foreground: #2a64c4;
+  --sidebar-border: rgba(35, 36, 80, 0.07);
+  --sidebar-ring: #5f6ec9;
+
+  --danger: #bb3137;
+  --danger-soft: rgba(229, 72, 77, 0.12);
+  --warning: #955800;
+  --warning-soft: rgba(251, 178, 50, 0.24);
+  --success: #097650;
+  --success-soft: rgba(29, 184, 122, 0.14);
+  --info: #2962c0;
+  --info-soft: rgba(55, 132, 247, 0.14);
+  --neutral: #616389;
+  --neutral-soft: rgba(35, 36, 80, 0.07);
+
+  --link: #2a64c4;
+  --link-hover: #1f4f9e;
+  --inset: #eef0fa;
+  --inset-foreground: #232450;
+  --brand: #5f6ec9;
+  --brand-bright: #7987ce;
+
+  /* Formas: superficies de esquina pequeña; las acciones, del todo redondas */
+  --ds-radius-sm: 4px;
+  --ds-radius-md: 6px;
+  --ds-radius-lg: 8px;
+  --ds-radius-xl: 10px;
+  --ds-radius-2xl: 14px;
+  --ds-radius-control: 10px;
+  --ds-radius-overlay: 14px;
+
+  /* Sombras suaves TEÑIDAS de índigo (nunca negras) */
+  --ds-shadow-card: 0 8px 20px rgba(0, 4, 131, 0.04);
+  --ds-shadow-card-hover: 0 10px 26px rgba(0, 4, 131, 0.09);
+  --ds-shadow-control: 0 0 #0000;
+  --ds-shadow-raised: 0 8px 20px rgba(0, 4, 131, 0.06);
+  --ds-shadow-overlay: 0 16px 40px rgba(35, 36, 80, 0.16);
+  --ds-shadow-popover: 0 16px 40px rgba(35, 36, 80, 0.16);
+
+  /* Medidas: controles de 38px, botones generosos */
+  --ds-control-h-sm: 2rem;
+  --ds-control-h-md: 2.375rem;
+  --ds-control-h-lg: 2.75rem;
+  --ds-button-px-sm: 1rem;
+  --ds-button-px-md: 1.5rem;
+  --ds-button-px-lg: 2rem;
+  --ds-field-px: 0.875rem;
+  --ds-card-spacing: 1.25rem;
+  --ds-card-spacing-sm: 1rem;
+
+  /* Sin cristal: material plano y luminoso */
+  --ds-card-backdrop: none;
+  --ds-overlay-backdrop: none;
+  --ds-field-backdrop: none;
+  --ds-sidebar-backdrop: none;
+  --ds-page-backdrop: none;
+
+  /* Sidebar a ras de borde, blanco sobre el lienzo, filas con tinte azul */
+  --ds-sidebar-pad: 0px;
+  --ds-sidebar-radius: 0px;
+  --ds-sidebar-shadow: 0 0 #0000;
+  --ds-sidebar-ring: 0px;
+  --ds-sidebar-edge: 1px solid var(--sidebar-border);
+  --ds-sidebar-item-radius: 6px;
+  --ds-sidebar-item-h: 2.75rem;
+
+  /* Privadas de friendly */
+  --zf-orange: #fbb232;
+  --zf-orange-ink: #232450;
+  --zf-glow: rgba(95, 110, 201, 0.42);
+  --zf-glow-hover: rgba(95, 110, 201, 0.55);
+  --zf-fill: rgba(35, 36, 80, 0.05);
+  --zf-fill-hover: rgba(35, 36, 80, 0.08);
+}
+
+/* ── VARIABLES · PIEL OSCURA («noche índigo») ────────────────────────────── */
+.dark {
+  --background: #16173b;
+  --foreground: #ecedfa;
+
+  --card: #1f2150;
+  --card-foreground: #ecedfa;
+  --popover: #25275c;
+  --popover-foreground: #ecedfa;
+
+  --primary: #8a98f0;
+  --primary-foreground: #14153a;
+  --secondary: #2a2c63;
+  --secondary-foreground: #ecedfa;
+  --muted: #232557;
+  --muted-foreground: #a3a6d4;
+  --accent: rgba(86, 156, 255, 0.18);
+  --accent-foreground: #8dbbff;
+  --destructive: #ef5d62;
+  --destructive-foreground: #14153a;
+
+  --border: rgba(255, 255, 255, 0.09);
+  --input: rgba(255, 255, 255, 0.2);
+  --ring: #8a98f0;
+
+  --chart-1: #8a98f0;
+  --chart-2: #fbb232;
+  --chart-3: #3fd397;
+  --chart-4: #ef5d62;
+  --chart-5: #569cff;
+
+  --sidebar: #1b1d47;
+  --sidebar-foreground: #c4c6ec;
+  --sidebar-primary: #8a98f0;
+  --sidebar-primary-foreground: #14153a;
+  --sidebar-accent: rgba(86, 156, 255, 0.2);
+  --sidebar-accent-foreground: #8dbbff;
+  --sidebar-border: rgba(255, 255, 255, 0.07);
+  --sidebar-ring: #8a98f0;
+
+  --danger: #ff7a7f;
+  --danger-soft: rgba(239, 93, 98, 0.2);
+  --warning: #fbb232;
+  --warning-soft: rgba(251, 178, 50, 0.18);
+  --success: #3fd397;
+  --success-soft: rgba(63, 211, 151, 0.16);
+  --info: #8dbbff;
+  --info-soft: rgba(86, 156, 255, 0.2);
+  --neutral: #a3a6d4;
+  --neutral-soft: rgba(255, 255, 255, 0.08);
+
+  --link: #8dbbff;
+  --link-hover: #b4d1ff;
+  --inset: #232557;
+  --inset-foreground: #ecedfa;
+  --brand: #8a98f0;
+  --brand-bright: #aab4f6;
+
+  --ds-shadow-card: 0 8px 20px rgba(0, 0, 20, 0.28);
+  --ds-shadow-card-hover: 0 10px 26px rgba(0, 0, 20, 0.4);
+  --ds-shadow-raised: 0 8px 20px rgba(0, 0, 20, 0.3);
+  --ds-shadow-overlay: 0 16px 40px rgba(0, 0, 20, 0.5);
+  --ds-shadow-popover: 0 16px 40px rgba(0, 0, 20, 0.5);
+
+  --zf-orange-ink: #232450;
+  --zf-glow: rgba(138, 152, 240, 0.4);
+  --zf-glow-hover: rgba(138, 152, 240, 0.55);
+  --zf-fill: rgba(255, 255, 255, 0.07);
+  --zf-fill-hover: rgba(255, 255, 255, 0.11);
+}
+
+/* ── PERSONALIDAD ────────────────────────────────────────────────────────────
+ * Sin capa: gana a las utilidades de los componentes. Solo variables.
+ */
+:root {
+  /* Botones: píldora en mayúsculas con espaciado, y brillo de color debajo */
+  [data-slot='button'] {
+    border-radius: 9999px;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    font-weight: 500;
+    transition:
+      transform var(--ds-motion-base) ease,
+      box-shadow var(--ds-motion-base) ease,
+      background-color var(--ds-motion-base) ease;
+  }
+  [data-slot='button'][data-variant='link'] {
+    text-transform: none;
+    letter-spacing: normal;
+  }
+  [data-slot='button'][data-size^='icon'] {
+    border-radius: var(--ds-radius-xl);
+  }
+  [data-slot='button'][data-variant='default'] {
+    box-shadow: 0 8px 8px -3px var(--zf-glow);
+  }
+  [data-slot='button'][data-variant='default']:hover:not(:disabled) {
+    transform: translateY(-1px);
+    box-shadow: 0 10px 12px -3px var(--zf-glow-hover);
+  }
+  [data-slot='button'][data-variant='default']:active:not(:disabled) {
+    transform: translateY(0);
+  }
+  [data-slot='button'][data-variant='secondary'] {
+    background: var(--zf-fill);
+    color: var(--foreground);
+  }
+  [data-slot='button'][data-variant='secondary']:hover:not(:disabled),
+  [data-slot='button'][data-variant='ghost']:hover:not(:disabled) {
+    background: var(--zf-fill-hover);
+  }
+  [data-slot='button'][data-variant='outline'] {
+    background: transparent;
+    border: 1.5px solid color-mix(in oklch, var(--primary) 55%, transparent);
+    color: var(--primary);
+  }
+  [data-slot='button'][data-variant='outline']:hover:not(:disabled) {
+    background: color-mix(in oklch, var(--primary) 10%, transparent);
+  }
+
+  /* Tarjetas: blancas, sin borde, solo la sombra teñida */
+  [data-slot='card'] {
+    border-color: transparent;
+  }
+
+  /* Campos rellenos (sin borde), como el buscador de la referencia */
+  [data-slot='input'],
+  [data-slot='textarea'],
+  [data-slot='select-trigger'] {
+    background: var(--zf-fill);
+    border-color: transparent;
+  }
+
+  /* Etiquetas en píldora; la secundaria es el naranja de la marca */
+  [data-slot='badge'] {
+    border-radius: 9999px;
+  }
+  [data-slot='badge'][data-variant='secondary'] {
+    background: var(--zf-orange);
+    color: var(--zf-orange-ink);
+  }
+
+  /* Tablas: cabeceras en mayúsculas pequeñas */
+  [data-slot='table-head'] {
+    text-transform: uppercase;
+    font-size: 0.75rem;
+    letter-spacing: 0.05em;
+    font-weight: 600;
+    color: var(--foreground);
+  }
+
+  /* Sidebar: la fila activa con tinte azul y peso medio */
+  [data-sidebar='menu-button'][data-active='true'] {
+    font-weight: 500;
+  }
+  [data-sidebar='menu-button']:hover:not([data-active='true']) {
+    background: var(--zf-fill);
+  }
+
+  /* Pestañas: píldora tintada */
+  [data-slot='tabs-list'] {
+    background: var(--zf-fill);
+    border-radius: 9999px;
+  }
+  [data-slot='tabs-trigger'] {
+    border-radius: 9999px;
+  }
+  [data-slot='tabs-trigger'][data-active] {
+    background: var(--card);
+    box-shadow: var(--ds-shadow-raised);
+  }
+}

package/dist/themes/friendly.guide.md

@@ -0,0 +1,38 @@
+# Tema `friendly` — guía de diseño
+
+## Esencia
+SaaS amable con personalidad: lienzo lila muy claro, tinta índigo, botones en píldora con brillo de color y un segundo acento naranja.
+
+## Gesto firma
+Botón primario en **píldora con mayúsculas y brillo de color debajo**; tarjetas de esquina pequeña frente a botones del todo redondos.
+
+## Principios
+- Contraste de formas: tarjetas casi rectas, acciones totalmente redondeadas.
+- Sombras teñidas de índigo, nunca grises neutras.
+- El naranja `#FBB232` es un segundo acento puntual.
+
+## Referencias y qué se tomó de cada una
+- **SerpWatch v2** (analizada en navegador): lienzo `#F5F6FC`, tinta `#232450`, fuente Rubik, botón periwinkle en píldora con mayúsculas, sombras teñidas, naranja como segundo acento, tarjetas de radio pequeño.
+- Se **corrigió** de la referencia: el periwinkle original `#7987CE` con texto blanco da ≈3:1; aquí el primario es `#5F6EC9` (AA) y el original se conserva como brillo (`--brand-bright`).
+
+## Paleta
+- Claro: fondo `#F5F6FC`, tinta `#232450`, tarjeta `#FFFFFF`, primario `#5F6EC9`, borde `rgba(35,36,80,.08)`.
+- Oscuro: fondo `#16173B`, tarjeta `#1F2150`, texto `#ECEDFA`.
+
+## Tipografía
+**Rubik** para titulares y cuerpo (`friendly.fonts.css`, lo primero del CSS de la app).
+
+## Formas y profundidad
+Radio base 8px; botones en píldora; sombras teñidas de índigo.
+
+## Qué evita
+Primario con contraste insuficiente, grises neutros en sombras.
+
+## Accesibilidad
+Primario `#5F6EC9` con texto blanco: AA. Texto atenuado y de estado también con AA.
+
+## Estado de los valores
+- **Leídos de la referencia**: lienzo, tinta, fuente, naranja, forma de botón.
+- **Ajustados**: primario (para contraste).
+- **Pendiente**: la piel oscura no procede de la referencia (diseño propio).
+- Limitación conocida: su sombra de botón anula el anillo de foco (corrección prevista en el paquete).

package/dist/themes/friendly.meta.json

@@ -0,0 +1,14 @@
+{
+  "name": "friendly",
+  "label": "Amable",
+  "essence": "SaaS amable con personalidad: lienzo lila, tinta índigo, botones en píldora con brillo.",
+  "signature": ["botón en píldora con mayúsculas y brillo de color", "tarjetas de esquina pequeña frente a botones redondos"],
+  "fonts": { "display": "Rubik", "body": "Rubik", "file": "friendly.fonts.css", "distributable": true },
+  "palette": { "light": { "background": "#F5F6FC", "foreground": "#232450", "primary": "#5F6EC9" }, "dark": { "background": "#16173B" } },
+  "radii": [8, 999],
+  "references": [
+    { "name": "SerpWatch v2", "tookFromIt": "lienzo, tinta, Rubik, botón en píldora, naranja, sombras teñidas", "source": "análisis en navegador" }
+  ],
+  "status": { "verified": ["lienzo #F5F6FC", "tinta #232450", "fuente Rubik", "naranja #FBB232"], "approximate": [], "designed": ["primario #5F6EC9 (ajustado a AA)", "piel oscura"], "pending": ["anillo de foco en botones"] },
+  "guide": "friendly.guide.md"
+}