ghostykit 0.2.1 → 0.3.1

package/dist/styles.css

@@ -2,41 +2,88 @@
 /* ── Utilidades (Tailwind v4, encerradas en .piloto) ── */
 /*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */
 .piloto {
+  --font-sans: var(--piloto-font);
+  --font-mono: var(--piloto-font-mono);
   --color-red-50: oklch(97.1% 0.013 17.38);
   --color-red-100: oklch(93.6% 0.032 17.717);
+  --color-red-500: oklch(63.7% 0.237 25.331);
   --color-red-600: oklch(57.7% 0.245 27.325);
   --color-red-700: oklch(50.5% 0.213 27.518);
   --color-red-800: oklch(44.4% 0.177 26.899);
   --color-black: #000;
-  --spacing: 0.25rem;
-  --container-md: 28rem;
-  --container-3xl: 48rem;
-  --text-xs: 0.75rem;
+  --color-white: #fff;
+  --spacing: calc(0.25 * var(--piloto-rem));
+  --container-md: calc(28 * var(--piloto-rem));
+  --container-xl: calc(36 * var(--piloto-rem));
+  --container-3xl: calc(48 * var(--piloto-rem));
+  --text-xs: calc(0.75 * var(--piloto-rem));
   --text-xs--line-height: calc(1 / 0.75);
-  --text-sm: 0.875rem;
+  --text-sm: calc(0.875 * var(--piloto-rem));
   --text-sm--line-height: calc(1.25 / 0.875);
-  --text-base: 1rem;
+  --text-base: calc(1 * var(--piloto-rem));
   --text-base--line-height: calc(1.5 / 1);
-  --text-lg: 1.125rem;
+  --text-lg: calc(1.125 * var(--piloto-rem));
   --text-lg--line-height: calc(1.75 / 1.125);
-  --text-xl: 1.25rem;
+  --text-xl: calc(1.25 * var(--piloto-rem));
   --text-xl--line-height: calc(1.75 / 1.25);
-  --text-2xl: 1.5rem;
+  --text-2xl: calc(1.5 * var(--piloto-rem));
   --text-2xl--line-height: calc(2 / 1.5);
-  --text-3xl: 1.875rem;
+  --text-3xl: calc(1.875 * var(--piloto-rem));
   --text-3xl--line-height: calc(2.25 / 1.875);
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
+  --font-weight-extrabold: 800;
+  --tracking-tight: -0.025em;
   --leading-tight: 1.25;
-  --radius-md: 0.375rem;
-  --radius-lg: 0.5rem;
-  --radius-xl: 0.75rem;
+  --radius-md: calc(0.375 * var(--piloto-rem));
+  --radius-lg: calc(0.5 * var(--piloto-rem));
+  --radius-xl: calc(0.75 * var(--piloto-rem));
+  --radius-2xl: calc(1 * var(--piloto-rem));
+  --radius-3xl: calc(1.5 * var(--piloto-rem));
   --ease-out: cubic-bezier(0, 0, 0.2, 1);
   --animate-spin: spin 1s linear infinite;
   --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+  --animate-bounce: bounce 1s infinite;
   --blur-sm: 8px;
   --default-transition-duration: 150ms;
   --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  --color-dark: var(--piloto-text);
+  --color-metal: var(--piloto-text-2);
+  --color-irongray: var(--piloto-text-3);
+  --color-outlines: var(--piloto-border);
+  --color-surfaceHover: var(--piloto-surface-hover);
+  --color-brand-100: var(--piloto-accent-100);
+  --color-brand-300: var(--piloto-accent-soft);
+  --color-brand-500: var(--piloto-accent);
+  --color-brand-600: var(--piloto-accent-strong);
+  --color-ring-info: var(--piloto-focus);
+  --color-text-primary: var(--piloto-text);
+  --color-text-secondary: var(--piloto-text-2);
+  --color-text-tertiary: var(--piloto-text-3);
+  --color-text-disabled: var(--piloto-text-disabled);
+  --color-text-inverse: var(--piloto-text-inverse);
+  --color-text-info: var(--piloto-accent-strong);
+  --color-text-success: var(--piloto-success);
+  --color-text-danger: var(--piloto-danger);
+  --color-background-primary: var(--piloto-bg);
+  --color-background-secondary: var(--piloto-surface);
+  --color-background-tertiary: var(--piloto-surface-2);
+  --color-background-inverse: var(--piloto-inverse);
+  --color-background-disabled: var(--piloto-surface-2);
+  --color-background-success: var(--piloto-success);
+  --color-border-primary: var(--piloto-border);
+  --color-border-secondary: var(--piloto-border-2);
+  --color-background: var(--piloto-bg);
+  --color-foreground: var(--piloto-text);
+  --color-muted: var(--piloto-surface);
+  --color-muted-foreground: var(--piloto-text-3);
+  --color-border: var(--piloto-border);
+  --color-sidebar: var(--piloto-surface);
+  --color-primary: var(--piloto-accent-strong);
+  --color-primary-foreground: var(--piloto-on-accent);
+}
+.piloto .\@container {
+  container-type: inline-size;
 }
 .piloto .pointer-events-auto {
   pointer-events: auto;
@@ -133,25 +180,22 @@
 .piloto .z-50 {
   z-index: 50;
 }
-.piloto .z-\[1000\] {
-  z-index: 1000;
-}
 .piloto .container {
   width: 100%;
   @media (width >= 40rem) {
-    max-width: 40rem;
+    max-width: calc(40 * var(--piloto-rem));
   }
   @media (width >= 48rem) {
-    max-width: 48rem;
+    max-width: calc(48 * var(--piloto-rem));
   }
   @media (width >= 64rem) {
-    max-width: 64rem;
+    max-width: calc(64 * var(--piloto-rem));
   }
   @media (width >= 80rem) {
-    max-width: 80rem;
+    max-width: calc(80 * var(--piloto-rem));
   }
   @media (width >= 96rem) {
-    max-width: 96rem;
+    max-width: calc(96 * var(--piloto-rem));
   }
 }
 .piloto .mx-4 {
@@ -318,7 +362,7 @@
   max-height: calc(var(--spacing) * 80);
 }
 .piloto .max-h-\[min\(70vh\,40rem\)\] {
-  max-height: min(70vh, 40rem);
+  max-height: min(70vh, calc(40 * var(--piloto-rem)));
 }
 .piloto .min-h-0 {
   min-height: 0px;
@@ -329,8 +373,8 @@
 .piloto .min-h-\[24px\] {
   min-height: 24px;
 }
-.piloto .min-h-\[40vh\] {
-  min-height: 40vh;
+.piloto .min-h-\[50vh\] {
+  min-height: 50vh;
 }
 .piloto .min-h-\[200px\] {
   min-height: 200px;
@@ -396,7 +440,7 @@
   max-width: calc(var(--spacing) * 56);
 }
 .piloto .max-w-\[16rem\] {
-  max-width: 16rem;
+  max-width: calc(16 * var(--piloto-rem));
 }
 .piloto .max-w-\[75\%\] {
   max-width: 75%;
@@ -404,8 +448,11 @@
 .piloto .max-w-\[80\%\] {
   max-width: 80%;
 }
-.piloto .max-w-\[92\%\] {
-  max-width: 92%;
+.piloto .max-w-\[90\%\] {
+  max-width: 90%;
+}
+.piloto .max-w-\[784px\] {
+  max-width: 784px;
 }
 .piloto .max-w-full {
   max-width: 100%;
@@ -413,6 +460,9 @@
 .piloto .max-w-md {
   max-width: var(--container-md);
 }
+.piloto .max-w-xl {
+  max-width: var(--container-xl);
+}
 .piloto .min-w-0 {
   min-width: 0px;
 }
@@ -447,6 +497,9 @@
 .piloto .transform {
   transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
 }
+.piloto .animate-bounce {
+  animation: var(--animate-bounce);
+}
 .piloto .animate-pulse {
   animation: var(--animate-pulse);
 }
@@ -480,6 +533,9 @@
 .piloto .place-items-center {
   place-items: center;
 }
+.piloto .items-baseline {
+  align-items: baseline;
+}
 .piloto .items-center {
   align-items: center;
 }
@@ -489,6 +545,9 @@
 .piloto .items-start {
   align-items: flex-start;
 }
+.piloto .\[justify-content\:safe_center\] {
+  justify-content: safe center;
+}
 .piloto .justify-between {
   justify-content: space-between;
 }
@@ -546,7 +605,7 @@
   border-bottom-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
 }
 .piloto :where(.divide-border > :not(:last-child)) {
-  border-color: var(--piloto-border-2);
+  border-color: var(--color-border);
 }
 .piloto .truncate {
   overflow: hidden;
@@ -569,20 +628,20 @@
   overflow-y: auto;
 }
 .piloto .rounded {
-  border-radius: 0.25rem;
+  border-radius: calc(0.25 * var(--piloto-rem));
 }
 .piloto .rounded-\(--piloto-radius-bubble\) {
   border-radius: var(--piloto-radius-bubble);
 }
-.piloto .rounded-\(--piloto-radius-button\) {
-  border-radius: var(--piloto-radius-button);
-}
-.piloto .rounded-\(--piloto-radius-card\) {
-  border-radius: var(--piloto-radius-card);
-}
 .piloto .rounded-\(--piloto-radius-input\) {
   border-radius: var(--piloto-radius-input);
 }
+.piloto .rounded-2xl {
+  border-radius: var(--radius-2xl);
+}
+.piloto .rounded-3xl {
+  border-radius: var(--radius-3xl);
+}
 .piloto .rounded-full {
   border-radius: calc(infinity * 1px);
 }
@@ -599,6 +658,10 @@
   border-style: var(--tw-border-style);
   border-width: 1px;
 }
+.piloto .border-\(length\:--piloto-border-width\) {
+  border-style: var(--tw-border-style);
+  border-width: var(--piloto-border-width);
+}
 .piloto .border-2 {
   border-style: var(--tw-border-style);
   border-width: 2px;
@@ -620,28 +683,49 @@
   border-style: dashed;
 }
 .piloto .border-border {
-  border-color: var(--piloto-border-2);
+  border-color: var(--color-border);
 }
 .piloto .border-border-primary {
-  border-color: var(--piloto-border);
+  border-color: var(--color-border-primary);
 }
 .piloto .border-border-secondary {
-  border-color: var(--piloto-border-2);
+  border-color: var(--color-border-secondary);
 }
 .piloto .border-brand-500 {
-  border-color: var(--piloto-accent);
+  border-color: var(--color-brand-500);
+}
+.piloto .border-brand-500\/40 {
+  border-color: var(--color-brand-500);
+  @supports (color: color-mix(in lab, red, red)) {
+    border-color: color-mix(in oklab, var(--color-brand-500) 40%, transparent);
+  }
 }
 .piloto .border-current {
   border-color: currentcolor;
 }
 .piloto .border-muted-foreground\/30 {
-  border-color: var(--piloto-text-3);
+  border-color: var(--color-muted-foreground);
   @supports (color: color-mix(in lab, red, red)) {
-    border-color: color-mix(in oklab, var(--piloto-text-3) 30%, transparent);
+    border-color: color-mix(in oklab, var(--color-muted-foreground) 30%, transparent);
   }
 }
+.piloto .border-outlines {
+  border-color: var(--color-outlines);
+}
 .piloto .border-sidebar {
-  border-color: var(--piloto-surface);
+  border-color: var(--color-sidebar);
+}
+.piloto .border-transparent {
+  border-color: transparent;
+}
+.piloto .border-t-transparent {
+  border-top-color: transparent;
+}
+.piloto .bg-\(--piloto-composer-bg\) {
+  background-color: var(--piloto-composer-bg);
+}
+.piloto .bg-\(--piloto-user-bubble\) {
+  background-color: var(--piloto-user-bubble);
 }
 .piloto .bg-\[var\(--sdm-bg\,inherit\)\] {
   background-color: var(--sdm-bg,inherit);
@@ -650,51 +734,66 @@
   background-color: var(--sdm-tbg);
 }
 .piloto .bg-background {
-  background-color: var(--piloto-bg);
+  background-color: var(--color-background);
+}
+.piloto .bg-background-disabled {
+  background-color: var(--color-background-disabled);
 }
 .piloto .bg-background-inverse\/80 {
-  background-color: var(--piloto-inverse);
+  background-color: var(--color-background-inverse);
   @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--piloto-inverse) 80%, transparent);
+    background-color: color-mix(in oklab, var(--color-background-inverse) 80%, transparent);
   }
 }
 .piloto .bg-background-primary {
-  background-color: var(--piloto-bg);
+  background-color: var(--color-background-primary);
+}
+.piloto .bg-background-primary\/80 {
+  background-color: var(--color-background-primary);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-background-primary) 80%, transparent);
+  }
 }
 .piloto .bg-background-secondary {
-  background-color: var(--piloto-surface);
+  background-color: var(--color-background-secondary);
+}
+.piloto .bg-background-secondary\/40 {
+  background-color: var(--color-background-secondary);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-background-secondary) 40%, transparent);
+  }
 }
 .piloto .bg-background-secondary\/50 {
-  background-color: var(--piloto-surface);
+  background-color: var(--color-background-secondary);
   @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--piloto-surface) 50%, transparent);
+    background-color: color-mix(in oklab, var(--color-background-secondary) 50%, transparent);
   }
 }
 .piloto .bg-background-success {
-  background-color: var(--piloto-success);
+  background-color: var(--color-background-success);
 }
 .piloto .bg-background\/50 {
-  background-color: var(--piloto-bg);
+  background-color: var(--color-background);
   @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--piloto-bg) 50%, transparent);
+    background-color: color-mix(in oklab, var(--color-background) 50%, transparent);
   }
 }
 .piloto .bg-background\/80 {
-  background-color: var(--piloto-bg);
+  background-color: var(--color-background);
   @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--piloto-bg) 80%, transparent);
+    background-color: color-mix(in oklab, var(--color-background) 80%, transparent);
   }
 }
 .piloto .bg-background\/90 {
-  background-color: var(--piloto-bg);
+  background-color: var(--color-background);
   @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--piloto-bg) 90%, transparent);
+    background-color: color-mix(in oklab, var(--color-background) 90%, transparent);
   }
 }
 .piloto .bg-background\/95 {
-  background-color: var(--piloto-bg);
+  background-color: var(--color-background);
   @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--piloto-bg) 95%, transparent);
+    background-color: color-mix(in oklab, var(--color-background) 95%, transparent);
   }
 }
 .piloto .bg-black\/10 {
@@ -710,25 +809,40 @@
   }
 }
 .piloto .bg-border-primary {
-  background-color: var(--piloto-border);
+  background-color: var(--color-border-primary);
+}
+.piloto .bg-brand-500 {
+  background-color: var(--color-brand-500);
+}
+.piloto .bg-brand-500\/10 {
+  background-color: var(--color-brand-500);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-brand-500) 10%, transparent);
+  }
 }
 .piloto .bg-brand-500\/15 {
-  background-color: var(--piloto-accent);
+  background-color: var(--color-brand-500);
   @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--piloto-accent) 15%, transparent);
+    background-color: color-mix(in oklab, var(--color-brand-500) 15%, transparent);
+  }
+}
+.piloto .bg-irongray\/10 {
+  background-color: var(--color-irongray);
+  @supports (color: color-mix(in lab, red, red)) {
+    background-color: color-mix(in oklab, var(--color-irongray) 10%, transparent);
   }
 }
 .piloto .bg-muted {
-  background-color: var(--piloto-surface);
+  background-color: var(--color-muted);
 }
 .piloto .bg-muted\/80 {
-  background-color: var(--piloto-surface);
+  background-color: var(--color-muted);
   @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--piloto-surface) 80%, transparent);
+    background-color: color-mix(in oklab, var(--color-muted) 80%, transparent);
   }
 }
 .piloto .bg-primary {
-  background-color: var(--piloto-accent-strong);
+  background-color: var(--color-primary);
 }
 .piloto .bg-red-50 {
   background-color: var(--color-red-50);
@@ -736,25 +850,28 @@
 .piloto .bg-red-100 {
   background-color: var(--color-red-100);
 }
+.piloto .bg-red-500 {
+  background-color: var(--color-red-500);
+}
 .piloto .bg-sidebar {
-  background-color: var(--piloto-surface);
+  background-color: var(--color-sidebar);
 }
 .piloto .bg-sidebar\/80 {
-  background-color: var(--piloto-surface);
+  background-color: var(--color-sidebar);
   @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--piloto-surface) 80%, transparent);
+    background-color: color-mix(in oklab, var(--color-sidebar) 80%, transparent);
   }
 }
 .piloto .bg-text-danger {
-  background-color: var(--piloto-danger);
+  background-color: var(--color-text-danger);
 }
 .piloto .bg-text-primary {
-  background-color: var(--piloto-text);
+  background-color: var(--color-text-primary);
 }
 .piloto .bg-text-secondary\/70 {
-  background-color: var(--piloto-text-2);
+  background-color: var(--color-text-secondary);
   @supports (color: color-mix(in lab, red, red)) {
-    background-color: color-mix(in oklab, var(--piloto-text-2) 70%, transparent);
+    background-color: color-mix(in oklab, var(--color-text-secondary) 70%, transparent);
   }
 }
 .piloto .bg-transparent {
@@ -826,9 +943,6 @@
 .piloto .py-3 {
   padding-block: calc(var(--spacing) * 3);
 }
-.piloto .py-6 {
-  padding-block: calc(var(--spacing) * 6);
-}
 .piloto .py-8 {
   padding-block: calc(var(--spacing) * 8);
 }
@@ -844,6 +958,12 @@
 .piloto .pb-4 {
   padding-bottom: calc(var(--spacing) * 4);
 }
+.piloto .pb-\[10vh\] {
+  padding-bottom: 10vh;
+}
+.piloto .pl-2 {
+  padding-left: calc(var(--spacing) * 2);
+}
 .piloto .pl-2\.5 {
   padding-left: calc(var(--spacing) * 2.5);
 }
@@ -860,7 +980,10 @@
   text-align: left;
 }
 .piloto .font-mono {
-  font-family: var(--piloto-font-mono);
+  font-family: var(--font-mono);
+}
+.piloto .font-sans {
+  font-family: var(--font-sans);
 }
 .piloto .text-2xl {
   font-size: var(--text-2xl);
@@ -902,9 +1025,6 @@
 .piloto .text-\[13px\] {
   font-size: 13px;
 }
-.piloto .text-\[15px\] {
-  font-size: 15px;
-}
 .piloto .leading-6 {
   --tw-leading: calc(var(--spacing) * 6);
   line-height: calc(var(--spacing) * 6);
@@ -921,6 +1041,10 @@
   --tw-leading: var(--leading-tight);
   line-height: var(--leading-tight);
 }
+.piloto .font-extrabold {
+  --tw-font-weight: var(--font-weight-extrabold);
+  font-weight: var(--font-weight-extrabold);
+}
 .piloto .font-medium {
   --tw-font-weight: var(--font-weight-medium);
   font-weight: var(--font-weight-medium);
@@ -929,6 +1053,10 @@
   --tw-font-weight: var(--font-weight-semibold);
   font-weight: var(--font-weight-semibold);
 }
+.piloto .tracking-tight {
+  --tw-tracking: var(--tracking-tight);
+  letter-spacing: var(--tracking-tight);
+}
 .piloto .break-words {
   overflow-wrap: break-word;
 }
@@ -947,20 +1075,29 @@
 .piloto .whitespace-pre-wrap {
   white-space: pre-wrap;
 }
+.piloto .text-\(--piloto-user-text\) {
+  color: var(--piloto-user-text);
+}
 .piloto .text-\[var\(--sdm-c\,inherit\)\] {
   color: var(--sdm-c,inherit);
 }
-.piloto .text-brand-600 {
-  color: var(--piloto-accent-strong);
+.piloto .text-brand-500 {
+  color: var(--color-brand-500);
+}
+.piloto .text-dark {
+  color: var(--color-dark);
+}
+.piloto .text-metal {
+  color: var(--color-metal);
 }
 .piloto .text-muted-foreground {
-  color: var(--piloto-text-3);
+  color: var(--color-muted-foreground);
 }
 .piloto .text-primary {
-  color: var(--piloto-accent-strong);
+  color: var(--color-primary);
 }
 .piloto .text-primary-foreground {
-  color: var(--piloto-on-accent);
+  color: var(--color-primary-foreground);
 }
 .piloto .text-red-600 {
   color: var(--color-red-600);
@@ -972,25 +1109,31 @@
   color: var(--color-red-800);
 }
 .piloto .text-text-danger {
-  color: var(--piloto-danger);
+  color: var(--color-text-danger);
+}
+.piloto .text-text-disabled {
+  color: var(--color-text-disabled);
 }
 .piloto .text-text-info {
-  color: var(--piloto-accent-strong);
+  color: var(--color-text-info);
 }
 .piloto .text-text-inverse {
-  color: var(--piloto-text-inverse);
+  color: var(--color-text-inverse);
 }
 .piloto .text-text-primary {
-  color: var(--piloto-text);
+  color: var(--color-text-primary);
 }
 .piloto .text-text-secondary {
-  color: var(--piloto-text-2);
+  color: var(--color-text-secondary);
 }
 .piloto .text-text-success {
-  color: var(--piloto-success);
+  color: var(--color-text-success);
 }
 .piloto .text-text-tertiary {
-  color: var(--piloto-text-3);
+  color: var(--color-text-tertiary);
+}
+.piloto .text-white {
+  color: var(--color-white);
 }
 .piloto .lowercase {
   text-transform: lowercase;
@@ -1024,8 +1167,12 @@
   --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
-.piloto .shadow-\(--piloto-shadow-card\) {
-  --tw-shadow: var(--piloto-shadow-card);
+.piloto .shadow-\(--piloto-shadow-input\) {
+  --tw-shadow: var(--piloto-shadow-input);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.piloto .shadow-2xl {
+  --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
 .piloto .shadow-lg {
@@ -1036,6 +1183,13 @@
   --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
   box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
+.piloto .ring-2 {
+  --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+}
+.piloto .ring-ring-info {
+  --tw-ring-color: var(--color-ring-info);
+}
 .piloto .filter {
   filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
 }
@@ -1069,6 +1223,11 @@
   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
   transition-duration: var(--tw-duration, var(--default-transition-duration));
 }
+.piloto .transition-shadow {
+  transition-property: box-shadow;
+  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+  transition-duration: var(--tw-duration, var(--default-transition-duration));
+}
 .piloto .transition-transform {
   transition-property: transform, translate, scale, rotate;
   transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1104,12 +1263,15 @@
 .piloto .\[counter-reset\:line\] {
   counter-reset: line;
 }
+.piloto .ring-inset {
+  --tw-ring-inset: inset;
+}
 @media (hover: hover) {
   .piloto .group-hover\:block:is(:where(.group):hover *) {
     display: block;
   }
   .piloto .group-hover\:text-text-primary:is(:where(.group):hover *) {
-    color: var(--piloto-text);
+    color: var(--color-text-primary);
   }
   .piloto .group-hover\:opacity-100:is(:where(.group):hover *) {
     opacity: 100%;
@@ -1119,7 +1281,7 @@
   }
 }
 .piloto .placeholder\:text-text-tertiary::placeholder {
-  color: var(--piloto-text-3);
+  color: var(--color-text-tertiary);
 }
 .piloto .before\:mr-4::before {
   content: var(--tw-content);
@@ -1139,7 +1301,7 @@
 }
 .piloto .before\:font-mono::before {
   content: var(--tw-content);
-  font-family: var(--piloto-font-mono);
+  font-family: var(--font-mono);
 }
 .piloto .before\:text-\[13px\]::before {
   content: var(--tw-content);
@@ -1147,9 +1309,9 @@
 }
 .piloto .before\:text-muted-foreground\/50::before {
   content: var(--tw-content);
-  color: var(--piloto-text-3);
+  color: var(--color-muted-foreground);
   @supports (color: color-mix(in lab, red, red)) {
-    color: color-mix(in oklab, var(--piloto-text-3) 50%, transparent);
+    color: color-mix(in oklab, var(--color-muted-foreground) 50%, transparent);
   }
 }
 .piloto .before\:content-\[counter\(line\)\]::before {
@@ -1165,49 +1327,85 @@
   content: var(--tw-content);
   counter-increment: line;
 }
+.piloto .focus-within\:border-brand-300:focus-within {
+  border-color: var(--color-brand-300);
+}
 @media (hover: hover) {
   .piloto .hover\:border-border-primary:hover {
-    border-color: var(--piloto-border);
+    border-color: var(--color-border-primary);
   }
   .piloto .hover\:border-brand-300:hover {
-    border-color: var(--piloto-accent-soft);
+    border-color: var(--color-brand-300);
   }
   .piloto .hover\:border-text-tertiary:hover {
-    border-color: var(--piloto-text-3);
+    border-color: var(--color-text-tertiary);
   }
   .piloto .hover\:bg-background:hover {
-    background-color: var(--piloto-bg);
+    background-color: var(--color-background);
   }
   .piloto .hover\:bg-background-inverse:hover {
-    background-color: var(--piloto-inverse);
+    background-color: var(--color-background-inverse);
   }
   .piloto .hover\:bg-background-secondary:hover {
-    background-color: var(--piloto-surface);
+    background-color: var(--color-background-secondary);
+  }
+  .piloto .hover\:bg-background-secondary\/60:hover {
+    background-color: var(--color-background-secondary);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .piloto .hover\:bg-background-secondary\/60:hover {
+      background-color: color-mix(in oklab, var(--color-background-secondary) 60%, transparent);
+    }
+  }
+  .piloto .hover\:bg-background-tertiary:hover {
+    background-color: var(--color-background-tertiary);
+  }
+  .piloto .hover\:bg-black\/5:hover {
+    background-color: color-mix(in srgb, #000 5%, transparent);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .piloto .hover\:bg-black\/5:hover {
+      background-color: color-mix(in oklab, var(--color-black) 5%, transparent);
+    }
+  }
+  .piloto .hover\:bg-brand-600:hover {
+    background-color: var(--color-brand-600);
+  }
+  .piloto .hover\:bg-irongray\/20:hover {
+    background-color: var(--color-irongray);
+  }
+  @supports (color: color-mix(in lab, red, red)) {
+    .piloto .hover\:bg-irongray\/20:hover {
+      background-color: color-mix(in oklab, var(--color-irongray) 20%, transparent);
+    }
   }
   .piloto .hover\:bg-muted:hover {
-    background-color: var(--piloto-surface);
+    background-color: var(--color-muted);
   }
   .piloto .hover\:bg-muted\/40:hover {
-    background-color: var(--piloto-surface);
+    background-color: var(--color-muted);
   }
   @supports (color: color-mix(in lab, red, red)) {
     .piloto .hover\:bg-muted\/40:hover {
-      background-color: color-mix(in oklab, var(--piloto-surface) 40%, transparent);
+      background-color: color-mix(in oklab, var(--color-muted) 40%, transparent);
     }
   }
   .piloto .hover\:bg-primary\/90:hover {
-    background-color: var(--piloto-accent-strong);
+    background-color: var(--color-primary);
   }
   @supports (color: color-mix(in lab, red, red)) {
     .piloto .hover\:bg-primary\/90:hover {
-      background-color: color-mix(in oklab, var(--piloto-accent-strong) 90%, transparent);
+      background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
     }
   }
+  .piloto .hover\:text-dark:hover {
+    color: var(--color-dark);
+  }
   .piloto .hover\:text-foreground:hover {
-    color: var(--piloto-text);
+    color: var(--color-foreground);
   }
   .piloto .hover\:text-text-primary:hover {
-    color: var(--piloto-text);
+    color: var(--color-text-primary);
   }
   .piloto .hover\:underline:hover {
     text-decoration-line: underline;
@@ -1219,30 +1417,43 @@
 .piloto .focus-visible\:opacity-100:focus-visible {
   opacity: 100%;
 }
+.piloto .focus-visible\:outline-2:focus-visible {
+  outline-style: var(--tw-outline-style);
+  outline-width: 2px;
+}
+.piloto .focus-visible\:outline-offset-2:focus-visible {
+  outline-offset: 2px;
+}
+.piloto .focus-visible\:outline-brand-600:focus-visible {
+  outline-color: var(--color-brand-600);
+}
 .piloto .disabled\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
 .piloto .disabled\:opacity-30:disabled {
   opacity: 30%;
 }
+.piloto .disabled\:opacity-40:disabled {
+  opacity: 40%;
+}
 .piloto .disabled\:opacity-50:disabled {
   opacity: 50%;
 }
 @supports (backdrop-filter: var(--tw)) {
   .piloto .supports-\[backdrop-filter\]\:bg-background\/70 {
-    background-color: var(--piloto-bg);
+    background-color: var(--color-background);
   }
   @supports (color: color-mix(in lab, red, red)) {
     .piloto .supports-\[backdrop-filter\]\:bg-background\/70 {
-      background-color: color-mix(in oklab, var(--piloto-bg) 70%, transparent);
+      background-color: color-mix(in oklab, var(--color-background) 70%, transparent);
     }
   }
   .piloto .supports-\[backdrop-filter\]\:bg-sidebar\/70 {
-    background-color: var(--piloto-surface);
+    background-color: var(--color-sidebar);
   }
   @supports (color: color-mix(in lab, red, red)) {
     .piloto .supports-\[backdrop-filter\]\:bg-sidebar\/70 {
-      background-color: color-mix(in oklab, var(--piloto-surface) 70%, transparent);
+      background-color: color-mix(in oklab, var(--color-sidebar) 70%, transparent);
     }
   }
   .piloto .supports-\[backdrop-filter\]\:backdrop-blur {
@@ -1256,6 +1467,14 @@
     backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);
   }
 }
+@media (width >= 40rem) {
+  .piloto .sm\:px-6 {
+    padding-inline: calc(var(--spacing) * 6);
+  }
+  .piloto .sm\:pb-6 {
+    padding-bottom: calc(var(--spacing) * 6);
+  }
+}
 @media (prefers-color-scheme: dark) {
   .piloto .dark\:bg-\[var\(--shiki-dark-bg\,var\(--sdm-bg\,inherit\)\)\] {
     background-color: var(--shiki-dark-bg,var(--sdm-bg,inherit));
@@ -1267,12 +1486,27 @@
     color: var(--shiki-dark,var(--sdm-c,inherit));
   }
 }
+.piloto .\[\&_pre\]\:max-w-full pre {
+  max-width: 100%;
+}
+.piloto .\[\&_pre\]\:overflow-x-auto pre {
+  overflow-x: auto;
+}
 .piloto .\[\&_svg\]\:h-auto svg {
   height: auto;
 }
 .piloto .\[\&_svg\]\:w-auto svg {
   width: auto;
 }
+.piloto .\[\&_table\]\:block table {
+  display: block;
+}
+.piloto .\[\&_table\]\:max-w-full table {
+  max-width: 100%;
+}
+.piloto .\[\&_table\]\:overflow-x-auto table {
+  overflow-x: auto;
+}
 .piloto .\[\&_thead\]\:sticky thead {
   position: sticky;
 }
@@ -1374,6 +1608,10 @@
   syntax: "*";
   inherits: false;
 }
+@property --tw-tracking {
+  syntax: "*";
+  inherits: false;
+}
 @property --tw-ordinal {
   syntax: "*";
   inherits: false;
@@ -1561,6 +1799,11 @@
   initial-value: "";
   inherits: false;
 }
+@property --tw-outline-style {
+  syntax: "*";
+  inherits: false;
+  initial-value: solid;
+}
 @keyframes spin {
   to {
     transform: rotate(360deg);
@@ -1571,6 +1814,16 @@
     opacity: 0.5;
   }
 }
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
 @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     .piloto *, .piloto ::before, .piloto ::after, .piloto ::backdrop {
       --tw-translate-x: 0;
@@ -1587,6 +1840,7 @@
       --tw-border-style: solid;
       --tw-leading: initial;
       --tw-font-weight: initial;
+      --tw-tracking: initial;
       --tw-ordinal: initial;
       --tw-slashed-zero: initial;
       --tw-numeric-figure: initial;
@@ -1631,6 +1885,7 @@
       --tw-duration: initial;
       --tw-ease: initial;
       --tw-content: "";
+      --tw-outline-style: solid;
     }
   }
 
@@ -1638,141 +1893,140 @@
 /* ─────────────────────────────────────────────────────────────────────────────
    Piloto UI — la piel.
 
-   La idea: el agente es tu copiloto, y la cabina tiene su vocabulario. Tinta
-   sobre papel, contornos gruesos y sombras duras (nada de difuminados ni
-   degradados). Todo lo demás calla para que hable UNA pieza: el pase de
-   permiso, con su mecha que se consume y el sello que cae al contestar.
+   El chat es el de Ghosty Studio (`/c`): mismas piezas, mismas clases, mismos
+   valores. Aquí viven (1) las variables `--piloto-*`, cuyos valores de casa son
+   los de gs, (2) el CSS propio de gs que no es utilidad (`.ghosty-md`,
+   `.gs-prosa`, la garra, los puntitos), (3) el blindaje contra el CSS de la app
+   anfitriona y (4) la pieza nueva: el pase de permiso.
 
-   Todo color, radio, sombra y grosor es una variable `--piloto-*`. Tres pieles
-   de casa por `data-skin`: ghosty (default), easybits y neutral; cada una con su
+   Pieles por `data-skin`: ghosty (default), easybits y neutral; cada una con su
    oscuro (`data-theme="dark"`, o `auto` siguiendo al sistema).
    ───────────────────────────────────────────────────────────────────────────── */
 
 .piloto {
-  /* Tipografía. Las fuentes no se descargan solas: `ghostykit/fonts.css` las trae. */
-  --piloto-font: "Schibsted Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
-  --piloto-font-display: "Big Shoulders Stencil Display", "Schibsted Grotesk", Impact, "Arial Narrow", sans-serif;
+  --piloto-font: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+  /* La prosa de las respuestas: serif, como claude.ai (en Apple sale New York). */
+  --piloto-font-prose: ui-serif, "New York", "Iowan Old Style", Georgia, Cambria, "Times New Roman", serif;
   --piloto-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
-  --piloto-font-size: 15px;
+  /* El reloj y el sello del pase de permiso. */
+  --piloto-font-display: "Big Shoulders Stencil Display", Impact, "Arial Narrow", sans-serif;
 
-  /* Ghosty: papel blanco, tinta casi negra, lavanda y mantequilla. */
+  /* La unidad de las medidas (lo que vale 1rem dentro de Piloto). Ghosty corre a 18 px. */
+  --piloto-rem: 18px;
+
+  /* Ghosty (los tokens de gs `app.css`). */
   --piloto-bg: #ffffff;
-  --piloto-surface: #f4f4fb;
-  --piloto-surface-2: #e7e7f2;
+  --piloto-surface: #f6f6fa;
+  --piloto-surface-2: #e9ebef;
+  --piloto-surface-hover: #fafafd;
   --piloto-text: #191a20;
-  --piloto-text-2: #474956;
-  --piloto-text-3: #7d7f8c;
+  --piloto-text-2: #4b5563;
+  --piloto-text-3: #81838e;
   --piloto-text-disabled: #b6b6ba;
   --piloto-text-inverse: #ffffff;
   --piloto-inverse: #191a20;
-  --piloto-border: #191a20;
-  --piloto-border-2: #e3e3ec;
-  --piloto-accent: #8483e0;
-  --piloto-accent-strong: #6564cf;
-  --piloto-accent-soft: #dcdcfa;
+  --piloto-border: #e1e3e7;
+  --piloto-border-2: #e9ebef;
+  --piloto-accent-100: #f5f5fc;
+  --piloto-accent-soft: #aeadef;
+  --piloto-accent: #9a99ea;
+  --piloto-accent-strong: #8483e0;
   --piloto-on-accent: #ffffff;
-  --piloto-success: #3f9a62;
-  --piloto-success-soft: #c9ecd5;
-  --piloto-danger: #d64545;
-  --piloto-danger-soft: #fbd9d6;
+  --piloto-success: #7fbe60;
+  --piloto-danger: #ed695f;
   --piloto-warning: #ffd36e;
   --piloto-warning-ink: #191a20;
-  --piloto-focus: #6564cf;
-  --piloto-user-bubble: #dcdcfa;
+  --piloto-focus: #8483e0;
+  --piloto-user-bubble: #f0f0f4;
   --piloto-user-text: #191a20;
-  --piloto-shadow-color: #191a20;
+  --piloto-composer-bg: #ffffff;
 
-  /* Forma. */
-  --piloto-radius-bubble: 14px;
-  --piloto-radius-card: 14px;
-  --piloto-radius-input: 18px;
-  --piloto-radius-button: 10px;
-  --piloto-border-width: 2px;
-  --piloto-hairline: 1px;
-  --piloto-shadow-card: 4px 4px 0 var(--piloto-shadow-color);
-  --piloto-shadow-input: 4px 4px 0 var(--piloto-shadow-color);
-  --piloto-shadow-hero: 6px 6px 0 var(--piloto-shadow-color);
-  --piloto-max-width: 760px;
+  /* Forma (los valores de gs). */
+  --piloto-radius-bubble: 12px;
+  --piloto-radius-input: 24px;
+  --piloto-radius-card: 16px;
+  --piloto-radius-button: 12px;
+  --piloto-border-width: 1px;
+  --piloto-shadow-input: 0 12px 32px -16px rgb(25 26 32 / 0.25);
+  --piloto-shadow-color: #191a20;
+  /* El pase de permiso es lo único con sombra dura. */
+  --piloto-shadow-hero: 5px 5px 0 var(--piloto-shadow-color);
+  --piloto-ticket-border: 2px;
 
   position: relative;
   display: flex;
   flex-direction: column;
   height: 100%;
   min-height: 0;
+  min-width: 0;
   width: 100%;
   background: var(--piloto-bg);
   color: var(--piloto-text);
   font-family: var(--piloto-font);
-  font-size: var(--piloto-font-size);
-  line-height: 1.55;
+  line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   isolation: isolate;
-  container-type: inline-size;
 }
 
-/* ── Ghosty, oscuro: la sombra dura se vuelve lavanda (negro sobre negro no se ve). ── */
+/* ── Ghosty, oscuro (los valores del widget oscuro de gs) ── */
 .piloto[data-theme="dark"] {
-  --piloto-bg: #15161c;
-  --piloto-surface: #1f2029;
-  --piloto-surface-2: #2b2c38;
-  --piloto-text: #eeeef4;
-  --piloto-text-2: #b9bac6;
-  --piloto-text-3: #858796;
-  --piloto-text-disabled: #575966;
-  --piloto-text-inverse: #15161c;
-  --piloto-inverse: #eeeef4;
-  --piloto-border: #eeeef4;
-  --piloto-border-2: #2b2c38;
-  --piloto-accent: #9998ef;
-  --piloto-accent-strong: #aeadf5;
-  --piloto-accent-soft: #33335a;
-  --piloto-on-accent: #15161c;
-  --piloto-success: #6fcf92;
-  --piloto-success-soft: #1d3a2a;
-  --piloto-danger: #ff7b72;
-  --piloto-danger-soft: #42201f;
-  --piloto-focus: #aeadf5;
-  --piloto-user-bubble: #33335a;
-  --piloto-user-text: #eeeef4;
+  color-scheme: dark;
+  --piloto-bg: #16171d;
+  --piloto-surface: #1e1f26;
+  --piloto-surface-2: #2a2b33;
+  --piloto-surface-hover: #22232a;
+  --piloto-text: #ececf1;
+  --piloto-text-2: #b6b6ba;
+  --piloto-text-3: #81838e;
+  --piloto-text-disabled: #5b5d66;
+  --piloto-text-inverse: #16171d;
+  --piloto-inverse: #ececf1;
+  --piloto-border: #2c2d36;
+  --piloto-border-2: #24252d;
+  --piloto-user-bubble: #2a2b33;
+  --piloto-user-text: #ececf1;
+  --piloto-composer-bg: #16171d;
+  --piloto-shadow-input: 0 12px 32px -16px rgb(0 0 0 / 0.6);
   --piloto-shadow-color: #8483e0;
 }
 
-/* ── EasyBits: morado y ámbar, brutalista, nace oscuro. ── */
+/* ── EasyBits: morado y ámbar, contornos negros y sombras duras (brutalista). ── */
 .piloto[data-skin="easybits"] {
-  --piloto-font-display: "Big Shoulders Stencil Display", Impact, sans-serif;
-  --piloto-bg: #fffdf7;
+  --piloto-rem: 16px;
+  --piloto-font: "Satoshi", "Inter", ui-sans-serif, system-ui, sans-serif;
+  --piloto-bg: #ffffff;
   --piloto-surface: #f6f1ff;
   --piloto-surface-2: #ece3ff;
+  --piloto-surface-hover: #faf7ff;
   --piloto-text: #0b0b0f;
   --piloto-text-2: #3d3a48;
   --piloto-text-3: #75707f;
-  --piloto-text-inverse: #ffffff;
   --piloto-inverse: #0b0b0f;
   --piloto-border: #0b0b0f;
   --piloto-border-2: #e6e0f2;
+  --piloto-accent-100: #f6f1ff;
+  --piloto-accent-soft: #a78bfa;
   --piloto-accent: #7c3aed;
   --piloto-accent-strong: #6d28d9;
-  --piloto-accent-soft: #ede4ff;
-  --piloto-on-accent: #ffffff;
   --piloto-warning: #fbbf24;
   --piloto-warning-ink: #0b0b0f;
   --piloto-focus: #9870ed;
-  --piloto-user-bubble: #7c3aed;
-  --piloto-user-text: #ffffff;
+  --piloto-user-bubble: #ede4ff;
+  --piloto-user-text: #0b0b0f;
+  --piloto-radius-bubble: 10px;
+  --piloto-radius-input: 12px;
+  --piloto-radius-card: 12px;
+  --piloto-radius-button: 8px;
+  --piloto-border-width: 2px;
+  --piloto-shadow-input: 4px 4px 0 #0b0b0f;
   --piloto-shadow-color: #0b0b0f;
-  --piloto-radius-bubble: 4px;
-  --piloto-radius-card: 4px;
-  --piloto-radius-input: 6px;
-  --piloto-radius-button: 4px;
-  --piloto-border-width: 3px;
-  --piloto-shadow-card: 5px 5px 0 var(--piloto-shadow-color);
-  --piloto-shadow-input: 5px 5px 0 #7c3aed;
-  --piloto-shadow-hero: 7px 7px 0 #fbbf24;
+  --piloto-shadow-hero: 6px 6px 0 #7c3aed;
 }
 .piloto[data-skin="easybits"][data-theme="dark"] {
   --piloto-bg: #0b0b0f;
   --piloto-surface: #16141f;
   --piloto-surface-2: #241f33;
+  --piloto-surface-hover: #1c1928;
   --piloto-text: #f6f4fb;
   --piloto-text-2: #c5c0d3;
   --piloto-text-3: #8d879c;
@@ -1781,150 +2035,148 @@
   --piloto-inverse: #f6f4fb;
   --piloto-border: #f6f4fb;
   --piloto-border-2: #241f33;
+  --piloto-accent-soft: #c4b5fd;
   --piloto-accent: #8b5cf6;
   --piloto-accent-strong: #a78bfa;
-  --piloto-accent-soft: #2a1d4d;
-  --piloto-on-accent: #ffffff;
-  --piloto-success: #4ade80;
-  --piloto-success-soft: #14321f;
-  --piloto-danger: #f87171;
-  --piloto-danger-soft: #3b1515;
-  --piloto-user-bubble: #7c3aed;
+  --piloto-user-bubble: #2a1d4d;
+  --piloto-user-text: #f6f4fb;
+  --piloto-composer-bg: #0b0b0f;
+  --piloto-shadow-input: 4px 4px 0 #7c3aed;
   --piloto-shadow-color: #7c3aed;
-  --piloto-shadow-input: 5px 5px 0 #7c3aed;
-  --piloto-shadow-hero: 7px 7px 0 #fbbf24;
+  --piloto-shadow-hero: 6px 6px 0 #fbbf24;
 }
 
-/* ── Neutral: grafito monocromo, contorno fino; para apps con su propia marca fuerte. ── */
+/* ── Neutral: grafito, sin color de marca; para apps con su propia identidad fuerte. ── */
 .piloto[data-skin="neutral"] {
+  --piloto-rem: 16px;
   --piloto-font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
-  --piloto-font-display: ui-sans-serif, system-ui, sans-serif;
   --piloto-bg: #ffffff;
   --piloto-surface: #f5f5f4;
   --piloto-surface-2: #e7e5e4;
+  --piloto-surface-hover: #fafaf9;
   --piloto-text: #1c1917;
   --piloto-text-2: #44403c;
   --piloto-text-3: #78716c;
   --piloto-inverse: #1c1917;
-  --piloto-border: #1c1917;
-  --piloto-border-2: #e7e5e4;
+  --piloto-border: #e7e5e4;
+  --piloto-border-2: #f5f5f4;
+  --piloto-accent-100: #fafaf9;
+  --piloto-accent-soft: #a8a29e;
   --piloto-accent: #1c1917;
   --piloto-accent-strong: #1c1917;
-  --piloto-accent-soft: #e7e5e4;
-  --piloto-on-accent: #ffffff;
   --piloto-warning: #f5f5f4;
-  --piloto-warning-ink: #1c1917;
   --piloto-focus: #2563eb;
   --piloto-user-bubble: #f5f5f4;
-  --piloto-user-text: #1c1917;
-  --piloto-shadow-color: #d6d3d1;
   --piloto-radius-bubble: 10px;
-  --piloto-radius-card: 10px;
-  --piloto-radius-input: 12px;
+  --piloto-radius-input: 14px;
+  --piloto-radius-card: 12px;
   --piloto-radius-button: 8px;
-  --piloto-border-width: 1px;
-  --piloto-shadow-card: 0 0 0 transparent;
-  --piloto-shadow-input: 3px 3px 0 var(--piloto-shadow-color);
-  --piloto-shadow-hero: 4px 4px 0 var(--piloto-shadow-color);
+  --piloto-shadow-input: 0 1px 2px rgb(0 0 0 / 0.06);
+  --piloto-shadow-color: #d6d3d1;
+  --piloto-shadow-hero: 4px 4px 0 #d6d3d1;
+  --piloto-ticket-border: 1px;
 }
 .piloto[data-skin="neutral"][data-theme="dark"] {
   --piloto-bg: #171615;
   --piloto-surface: #22201f;
   --piloto-surface-2: #2e2b29;
+  --piloto-surface-hover: #1d1b1a;
   --piloto-text: #f5f5f4;
   --piloto-text-2: #d6d3d1;
   --piloto-text-3: #a8a29e;
   --piloto-text-disabled: #57534e;
   --piloto-text-inverse: #171615;
   --piloto-inverse: #f5f5f4;
-  --piloto-border: #a8a29e;
-  --piloto-border-2: #2e2b29;
+  --piloto-border: #2e2b29;
+  --piloto-border-2: #22201f;
   --piloto-accent: #f5f5f4;
   --piloto-accent-strong: #f5f5f4;
-  --piloto-accent-soft: #2e2b29;
   --piloto-on-accent: #171615;
   --piloto-warning: #22201f;
   --piloto-warning-ink: #f5f5f4;
-  --piloto-success: #86efac;
-  --piloto-success-soft: #1c3326;
-  --piloto-danger: #fca5a5;
-  --piloto-danger-soft: #3f1d1d;
   --piloto-user-bubble: #2e2b29;
   --piloto-user-text: #f5f5f4;
+  --piloto-composer-bg: #171615;
   --piloto-shadow-color: #000000;
+  --piloto-shadow-hero: 4px 4px 0 #000000;
 }
 
-/* `theme="auto"`: el oscuro de cada piel, siguiendo al sistema. */
 @media (prefers-color-scheme: dark) {
-  .piloto[data-theme="auto"] {
-    --piloto-bg: #15161c;
-    --piloto-surface: #1f2029;
-    --piloto-surface-2: #2b2c38;
-    --piloto-text: #eeeef4;
-    --piloto-text-2: #b9bac6;
-    --piloto-text-3: #858796;
-    --piloto-text-disabled: #575966;
-    --piloto-text-inverse: #15161c;
-    --piloto-inverse: #eeeef4;
-    --piloto-border: #eeeef4;
-    --piloto-border-2: #2b2c38;
-    --piloto-accent: #9998ef;
-    --piloto-accent-strong: #aeadf5;
-    --piloto-accent-soft: #33335a;
-    --piloto-on-accent: #15161c;
-    --piloto-success: #6fcf92;
-    --piloto-success-soft: #1d3a2a;
-    --piloto-danger: #ff7b72;
-    --piloto-danger-soft: #42201f;
-    --piloto-focus: #aeadf5;
-    --piloto-user-bubble: #33335a;
-    --piloto-user-text: #eeeef4;
-    --piloto-shadow-color: #8483e0;
-  }
-  .piloto[data-skin="easybits"][data-theme="auto"] {
-    --piloto-bg: #0b0b0f;
-    --piloto-surface: #16141f;
-    --piloto-surface-2: #241f33;
-    --piloto-text: #f6f4fb;
-    --piloto-text-2: #c5c0d3;
-    --piloto-text-3: #8d879c;
-    --piloto-text-inverse: #0b0b0f;
-    --piloto-inverse: #f6f4fb;
-    --piloto-border: #f6f4fb;
-    --piloto-border-2: #241f33;
-    --piloto-accent: #8b5cf6;
-    --piloto-accent-strong: #a78bfa;
-    --piloto-accent-soft: #2a1d4d;
-    --piloto-success: #4ade80;
-    --piloto-success-soft: #14321f;
-    --piloto-danger: #f87171;
-    --piloto-danger-soft: #3b1515;
-    --piloto-shadow-color: #7c3aed;
-  }
-  .piloto[data-skin="neutral"][data-theme="auto"] {
-    --piloto-bg: #171615;
-    --piloto-surface: #22201f;
-    --piloto-surface-2: #2e2b29;
-    --piloto-text: #f5f5f4;
-    --piloto-text-2: #d6d3d1;
-    --piloto-text-3: #a8a29e;
-    --piloto-text-inverse: #171615;
-    --piloto-inverse: #f5f5f4;
-    --piloto-border: #a8a29e;
-    --piloto-border-2: #2e2b29;
-    --piloto-accent: #f5f5f4;
-    --piloto-accent-strong: #f5f5f4;
-    --piloto-accent-soft: #2e2b29;
-    --piloto-on-accent: #171615;
-    --piloto-warning: #22201f;
-    --piloto-warning-ink: #f5f5f4;
-    --piloto-user-bubble: #2e2b29;
-    --piloto-user-text: #f5f5f4;
-    --piloto-shadow-color: #000000;
-  }
+.piloto[data-theme="auto"] {
+  color-scheme: dark;
+  --piloto-bg: #16171d;
+  --piloto-surface: #1e1f26;
+  --piloto-surface-2: #2a2b33;
+  --piloto-surface-hover: #22232a;
+  --piloto-text: #ececf1;
+  --piloto-text-2: #b6b6ba;
+  --piloto-text-3: #81838e;
+  --piloto-text-disabled: #5b5d66;
+  --piloto-text-inverse: #16171d;
+  --piloto-inverse: #ececf1;
+  --piloto-border: #2c2d36;
+  --piloto-border-2: #24252d;
+  --piloto-user-bubble: #2a2b33;
+  --piloto-user-text: #ececf1;
+  --piloto-composer-bg: #16171d;
+  --piloto-shadow-input: 0 12px 32px -16px rgb(0 0 0 / 0.6);
+  --piloto-shadow-color: #8483e0;
+}
+.piloto[data-skin="easybits"][data-theme="auto"] {
+  --piloto-bg: #0b0b0f;
+  --piloto-surface: #16141f;
+  --piloto-surface-2: #241f33;
+  --piloto-surface-hover: #1c1928;
+  --piloto-text: #f6f4fb;
+  --piloto-text-2: #c5c0d3;
+  --piloto-text-3: #8d879c;
+  --piloto-text-disabled: #4f4a5c;
+  --piloto-text-inverse: #0b0b0f;
+  --piloto-inverse: #f6f4fb;
+  --piloto-border: #f6f4fb;
+  --piloto-border-2: #241f33;
+  --piloto-accent-soft: #c4b5fd;
+  --piloto-accent: #8b5cf6;
+  --piloto-accent-strong: #a78bfa;
+  --piloto-user-bubble: #2a1d4d;
+  --piloto-user-text: #f6f4fb;
+  --piloto-composer-bg: #0b0b0f;
+  --piloto-shadow-input: 4px 4px 0 #7c3aed;
+  --piloto-shadow-color: #7c3aed;
+  --piloto-shadow-hero: 6px 6px 0 #fbbf24;
+}
+.piloto[data-skin="neutral"][data-theme="auto"] {
+  --piloto-bg: #171615;
+  --piloto-surface: #22201f;
+  --piloto-surface-2: #2e2b29;
+  --piloto-surface-hover: #1d1b1a;
+  --piloto-text: #f5f5f4;
+  --piloto-text-2: #d6d3d1;
+  --piloto-text-3: #a8a29e;
+  --piloto-text-disabled: #57534e;
+  --piloto-text-inverse: #171615;
+  --piloto-inverse: #f5f5f4;
+  --piloto-border: #2e2b29;
+  --piloto-border-2: #22201f;
+  --piloto-accent: #f5f5f4;
+  --piloto-accent-strong: #f5f5f4;
+  --piloto-on-accent: #171615;
+  --piloto-warning: #22201f;
+  --piloto-warning-ink: #f5f5f4;
+  --piloto-user-bubble: #2e2b29;
+  --piloto-user-text: #f5f5f4;
+  --piloto-composer-bg: #171615;
+  --piloto-shadow-color: #000000;
+  --piloto-shadow-hero: 4px 4px 0 #000000;
+}
 }
 
-/* ── Reset con alcance: sólo dentro de Piloto, para apps sin Tailwind o con otro. ── */
+/* ── Reset con alcance y BLINDAJE contra el CSS de la app anfitriona ──────────
+   Apps con Tailwind 3 + @tailwindcss/forms (EasyBits) pintan TODO textarea/input
+   con borde, fondo blanco, padding y un anillo al enfocar (`textarea:focus`).
+   Dentro de Piloto eso no aplica: el campo no tiene caja propia, la caja es la
+   tarjeta. Las utilidades de Piloto (`.piloto .px-1`) siguen ganando porque
+   pesan más que estos selectores. */
 .piloto *,
 .piloto *::before,
 .piloto *::after {
@@ -1933,15 +2185,33 @@
   margin: 0;
   padding: 0;
 }
-.piloto button,
-.piloto input,
 .piloto textarea,
-.piloto select {
+.piloto input,
+.piloto select,
+.piloto button {
+  -webkit-appearance: none;
+  appearance: none;
   font: inherit;
   color: inherit;
-  background: transparent;
   letter-spacing: inherit;
-}
+  background-color: transparent;
+  background-image: none;
+  border-radius: 0;
+  box-shadow: none;
+}
+.piloto textarea:focus,
+.piloto textarea:focus-visible,
+.piloto input:focus,
+.piloto input:focus-visible,
+.piloto select:focus {
+  outline: none;
+  box-shadow: none;
+  border-color: transparent;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-color: transparent;
+}
+.piloto input[type="file"] { display: none; }
 .piloto button { cursor: pointer; }
 .piloto button:disabled { cursor: default; }
 .piloto ul,
@@ -1952,48 +2222,87 @@
 .piloto svg { display: inline-block; flex-shrink: 0; vertical-align: middle; }
 .piloto a { color: inherit; text-decoration: inherit; }
 .piloto summary { list-style: revert; }
-.piloto :focus-visible { outline: 3px solid var(--piloto-focus); outline-offset: 2px; }
+.piloto h1,
+.piloto h2,
+.piloto h3 { font-size: inherit; font-weight: inherit; }
 .piloto [hidden] { display: none !important; }
 
-/* ── El marco ─────────────────────────────────────────────────────────────── */
-.piloto .piloto-column,
-.piloto .piloto-dock { max-width: var(--piloto-max-width); }
-.piloto .piloto-agent { max-width: min(100%, 68ch); }
-.piloto .piloto-scroll { scrollbar-width: thin; scrollbar-color: var(--piloto-border-2) transparent; }
+/* ── CSS de Ghosty Studio (gs `app.css`), tal cual ────────────────────────── */
+/* Barra de desplazamiento fina y del color de los bordes. */
+.piloto .gs-scroll { scrollbar-width: thin; scrollbar-color: var(--piloto-border) transparent; }
+.piloto .gs-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
+.piloto .gs-scroll::-webkit-scrollbar-track { background: transparent; }
+.piloto .gs-scroll::-webkit-scrollbar-thumb { background-color: var(--piloto-border); border-radius: 9999px; border: 2px solid transparent; background-clip: content-box; }
+.piloto .gs-scroll:hover::-webkit-scrollbar-thumb { background-color: var(--piloto-text-3); }
 
-/* Tu mensaje: una pieza sólida de color, sin sombra (la sombra es de lo que se toca). */
-.piloto .piloto-bubble-user {
-  background: var(--piloto-user-bubble);
-  color: var(--piloto-user-text);
-  border: var(--piloto-hairline) solid color-mix(in srgb, var(--piloto-border) 22%, transparent);
-}
+/* Markdown de gs. */
+.piloto .ghosty-md { line-height: 1.5; font-size: calc(0.875 * var(--piloto-rem)); }
+.piloto .ghosty-md p { margin: 0 0 calc(0.75 * var(--piloto-rem)) 0; }
+.piloto .ghosty-md p:last-child { margin-bottom: 0; }
+.piloto .ghosty-md h1, .piloto .ghosty-md h2, .piloto .ghosty-md h3 { margin: calc(0.75 * var(--piloto-rem)) 0 calc(0.5 * var(--piloto-rem)) 0; font-weight: 600; }
+.piloto .ghosty-md h1:first-child, .piloto .ghosty-md h2:first-child, .piloto .ghosty-md h3:first-child { margin-top: 0; }
+.piloto .ghosty-md ul, .piloto .ghosty-md ol { padding-left: 0; margin: calc(0.5 * var(--piloto-rem)) 0; list-style: none; }
+.piloto .ghosty-md ul:first-child, .piloto .ghosty-md ol:first-child { margin-top: 0; }
+.piloto .ghosty-md ul:last-child, .piloto .ghosty-md ol:last-child { margin-bottom: 0; }
+.piloto .ghosty-md ol { counter-reset: list-counter 0; }
+.piloto .ghosty-md li { position: relative; padding-left: calc(1.25 * var(--piloto-rem)); margin: 0 0 calc(0.25 * var(--piloto-rem)) 0; line-height: 1.5; }
+.piloto .ghosty-md li:last-child { margin-bottom: 0; }
+.piloto .ghosty-md ul > li::before { content: "•"; position: absolute; left: calc(0.25 * var(--piloto-rem)); color: var(--piloto-text-3); }
+.piloto .ghosty-md ol > li { counter-increment: list-counter 1; }
+.piloto .ghosty-md ol > li::before { content: counter(list-counter) "."; position: absolute; left: 0; color: var(--piloto-text-3); font-weight: 500; }
+.piloto .ghosty-md strong { font-weight: 600; }
+.piloto .ghosty-md em { font-style: italic; }
+.piloto .ghosty-md a { color: var(--piloto-accent-strong); text-decoration: underline; text-underline-offset: 2px; }
+.piloto .ghosty-md code { background: var(--piloto-surface-2); color: var(--piloto-text); padding: calc(0.1 * var(--piloto-rem)) calc(0.35 * var(--piloto-rem)); border-radius: calc(0.25 * var(--piloto-rem)); font-size: calc(0.8125 * var(--piloto-rem)); font-family: var(--piloto-font-mono); }
+.piloto .ghosty-md pre { background: var(--piloto-surface); border: 1px solid var(--piloto-border); color: var(--piloto-text); padding: calc(0.75 * var(--piloto-rem)); border-radius: calc(0.5 * var(--piloto-rem)); font-size: calc(0.8125 * var(--piloto-rem)); font-family: var(--piloto-font-mono); overflow-x: auto; margin: calc(0.5 * var(--piloto-rem)) 0; }
+.piloto .ghosty-md pre:last-child { margin-bottom: 0; }
+.piloto .ghosty-md pre code { background: none; padding: 0; color: inherit; }
+.piloto .ghosty-md blockquote { border-left: 2px solid var(--piloto-border); padding-left: calc(0.75 * var(--piloto-rem)); color: var(--piloto-text-3); margin: calc(0.5 * var(--piloto-rem)) 0; }
+.piloto .ghosty-md img { max-width: 100%; height: auto; display: block; margin: calc(0.5 * var(--piloto-rem)) 0; border-radius: calc(0.5 * var(--piloto-rem)); border: 1px solid var(--piloto-border); }
+/* El hilo del CRM (drawer del tablero, /crm): la burbuja del agente es blanca (o ámbar si
 
-/* La caja de escribir: contorno grueso y sombra dura. Al enfocar, la sombra se corre: «listo». */
-.piloto .piloto-composer {
-  background: var(--piloto-bg);
-  border: var(--piloto-border-width) solid var(--piloto-border);
-  box-shadow: var(--piloto-shadow-input);
-  transition: box-shadow 120ms ease-out, transform 120ms ease-out;
-}
-.piloto .piloto-composer:focus-within { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--piloto-accent); }
-.piloto[data-skin="neutral"] .piloto-composer:focus-within { transform: none; box-shadow: 0 0 0 3px var(--piloto-accent-soft); }
-.piloto .piloto-textarea::placeholder { color: var(--piloto-text-3); }
-/* El foco de la caja lo dice su sombra; el anillo va en los botones. */
-.piloto .piloto-textarea:focus-visible { outline: none; }
+/* La prosa de las respuestas: serif 16/24 (claude.ai usa su serif). La narración, igual, un punto menor. */
+.piloto .gs-prosa .ghosty-md,
+.piloto .gs-narracion { font-family: var(--piloto-font-prose); font-size: 16px; line-height: 24px; }
+.piloto .gs-narracion { font-size: 15px; line-height: 22px; }
+.piloto .gs-prosa .ghosty-md li { line-height: 24px; }
+.piloto .gs-prosa .ghosty-md p { margin-bottom: calc(0.9 * var(--piloto-rem)); }
+.piloto .gs-prosa .ghosty-md p:last-child { margin-bottom: 0; }
+.piloto .piloto-narration-text code { background: var(--piloto-surface-2); padding: calc(0.05 * var(--piloto-rem)) calc(0.3 * var(--piloto-rem)); border-radius: calc(0.25 * var(--piloto-rem)); font-size: 0.85em; font-family: var(--piloto-font-mono); }
+.piloto .piloto-narration-text strong { font-weight: 600; color: var(--piloto-text); }
+.piloto .piloto-narration-text a { color: var(--piloto-accent-strong); text-decoration: underline; text-underline-offset: 2px; }
 
-.piloto .piloto-send {
-  background: var(--piloto-surface-2);
-  color: var(--piloto-text-disabled);
-  border: var(--piloto-border-width) solid transparent;
-}
-.piloto .piloto-send[data-ready] {
-  background: var(--piloto-accent);
-  color: var(--piloto-on-accent);
-  border-color: var(--piloto-border);
+/* Cada tramo del texto al ritmo (`TextAtPace`) y los pasos que entran. */
+@keyframes gs-tramo { from { opacity: 0; } }
+@keyframes gs-paso-in { from { opacity: 0; transform: translateY(3px); } }
+.piloto .gs-paso-in { animation: gs-paso-in 0.3s ease-out both; }
+
+/* Puntitos de «escribiendo»: el rebote de siempre en el color de marca. */
+.piloto .gc-typing-dot {
+  background-color: var(--piloto-accent);
+  animation-duration: 900ms;
+  animation-delay: calc(var(--i, 0) * 150ms);
 }
-.piloto .piloto-send[data-ready]:hover { background: var(--piloto-accent-strong); }
-.piloto .piloto-send[data-ready]:active { transform: translate(1px, 1px); }
 
+/* La garra: baja, cierra, sube con el premio, suelta y descansa; en bucle. */
+.piloto .gs-garra { overflow: visible; }
+.piloto .gs-garra-rig,
+.piloto .gs-garra-l,
+.piloto .gs-garra-r { transform-box: fill-box; }
+.piloto .gs-garra-l { transform-origin: 100% 0; }
+.piloto .gs-garra-r { transform-origin: 0 0; }
+.piloto .gs-garra .gs-garra-rig { animation: gs-garra-dip 2.4s ease-in-out infinite both; }
+.piloto .gs-garra .gs-garra-l { animation: gs-garra-l 2.4s ease-in-out infinite both; }
+.piloto .gs-garra .gs-garra-r { animation: gs-garra-r 2.4s ease-in-out infinite both; }
+@keyframes gs-garra-dip { 0%, 55%, 100% { transform: translateY(0); } 15%, 25% { transform: translateY(2.5px); } 40% { transform: translateY(0); } }
+@keyframes gs-garra-l { 0%, 15%, 50%, 100% { transform: rotate(0); } 25%, 40% { transform: rotate(-16deg); } }
+@keyframes gs-garra-r { 0%, 15%, 50%, 100% { transform: rotate(0); } 25%, 40% { transform: rotate(16deg); } }
+
+/* El bloque de código y la tabla de Streamdown, con el borde de la piel. */
+.piloto .ghosty-md [data-streamdown="code-block"],
+.piloto .ghosty-md [data-streamdown="table-wrapper"] { margin: calc(0.75 * var(--piloto-rem)) 0; }
+
+/* ── La pieza nueva: el pase de permiso ─────────────────────────────────── */
 /* Botones con peso: presionarlos los hunde en su sombra. */
 .piloto .piloto-btn {
   display: inline-flex;
@@ -2003,7 +2312,7 @@
   min-height: 40px;
   padding: 0 1.1em;
   border-radius: var(--piloto-radius-button);
-  border: var(--piloto-border-width) solid var(--piloto-border);
+  border: var(--piloto-ticket-border) solid var(--piloto-text);
   font-weight: 650;
   font-size: 0.94em;
   transition: transform 90ms ease-out, box-shadow 90ms ease-out, background-color 120ms;
@@ -2019,114 +2328,6 @@
 .piloto .piloto-btn-quiet { background: var(--piloto-bg); color: var(--piloto-text); }
 .piloto .piloto-btn-quiet:not(:disabled):hover { background: var(--piloto-surface); }
 .piloto .piloto-btn[aria-busy] { animation: piloto-blink 0.8s steps(2, jump-none) infinite; }
-.piloto .piloto-primary { background: var(--piloto-accent); color: var(--piloto-on-accent); }
-.piloto .piloto-secondary { background: var(--piloto-surface); color: var(--piloto-text); border: var(--piloto-hairline) solid var(--piloto-border-2); }
-
-/* Los pasos: en vivo, renglones sueltos; al cerrar el turno la misma vista se vuelve tarjeta. */
-.piloto .piloto-steps {
-  border: var(--piloto-border-width) solid var(--piloto-border-2);
-  background: var(--piloto-bg);
-}
-.piloto .piloto-steps:hover { border-color: var(--piloto-border); }
-.piloto .piloto-steps[data-live] { border-color: transparent; background: transparent; }
-.piloto .piloto-step-detail { color: var(--piloto-text-3); margin-left: 0.6em; }
-.piloto .piloto-step { animation: piloto-step-in 220ms cubic-bezier(0.2, 0.9, 0.3, 1.3) both; }
-
-/* La narración: casillas palomeadas de una lista de verificación. */
-.piloto .piloto-narration > li > span:first-child {
-  border: var(--piloto-hairline) solid var(--piloto-accent);
-  border-radius: 4px;
-  background: var(--piloto-accent-soft);
-  color: var(--piloto-accent-strong);
-}
-
-/* Opciones de respuesta: botones de ancho completo con contorno. */
-.piloto .piloto-option {
-  border: var(--piloto-border-width) solid var(--piloto-border-2);
-  border-radius: var(--piloto-radius-button);
-}
-.piloto .piloto-option:hover { border-color: var(--piloto-border); background: var(--piloto-surface); }
-.piloto .piloto-suggestion {
-  border: var(--piloto-border-width) solid var(--piloto-border-2);
-}
-.piloto .piloto-suggestion:hover { border-color: var(--piloto-border); color: var(--piloto-text); }
-
-.piloto .piloto-reference {
-  border: var(--piloto-hairline) solid var(--piloto-accent);
-  background: var(--piloto-accent-soft);
-}
-
-.piloto .piloto-to-bottom { border: var(--piloto-border-width) solid var(--piloto-border); background: var(--piloto-bg); color: var(--piloto-text); }
-
-.piloto .piloto-menu { border: var(--piloto-border-width) solid var(--piloto-border); box-shadow: var(--piloto-shadow-card); }
-.piloto .piloto-drop { background: color-mix(in srgb, var(--piloto-bg) 86%, transparent); }
-.piloto .piloto-dialog { border: var(--piloto-border-width) solid var(--piloto-border); box-shadow: var(--piloto-shadow-hero); }
-.piloto .piloto-avatar-default {
-  display: block;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  background: var(--piloto-accent);
-  border: var(--piloto-border-width) solid var(--piloto-border);
-  box-shadow: 3px 3px 0 var(--piloto-shadow-color);
-}
-/* El estado vacío: si no cabe, se desplaza (nunca recorta el saludo ni la sombra del composer). */
-.piloto .piloto-empty {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  padding: 16px 16px 24px;
-}
-.piloto .piloto-empty-inner {
-  margin: auto 0;
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding-bottom: 6vh;
-}
-.piloto .piloto-welcome-text {
-  font-family: var(--piloto-font-display);
-  font-weight: 800;
-  /* Al ancho del CONTENEDOR (un panel lateral no es la ventana). */
-  font-size: clamp(26px, 8cqi, 44px);
-  line-height: 1;
-  letter-spacing: 0.01em;
-  max-width: 18ch;
-  color: var(--piloto-text);
-  text-wrap: balance;
-}
-.piloto .piloto-welcome-text[data-long] {
-  font-family: var(--piloto-font);
-  font-weight: 600;
-  font-size: clamp(16px, 4.2cqi, 19px);
-  line-height: 1.45;
-  letter-spacing: 0;
-  max-width: 44ch;
-  color: var(--piloto-text-2);
-}
-.piloto .piloto-narration-text code { background: var(--piloto-surface-2); padding: 0.05rem 0.3rem; border-radius: 4px; font-size: 0.88em; font-family: var(--piloto-font-mono); }
-.piloto .piloto-narration-text strong { font-weight: 700; color: var(--piloto-text); }
-.piloto .piloto-narration-text a { text-decoration: underline; text-decoration-color: var(--piloto-accent); text-underline-offset: 2px; }
-.piloto .piloto-wait-time { margin-left: 0.7em; color: var(--piloto-text-3); font-variant-numeric: tabular-nums; }
-.piloto .piloto-system-note { border: var(--piloto-hairline) solid var(--piloto-border-2); }
-
-/* Pensando: tres luces de cabina que se encienden por turno, sin suavizado (steps). */
-.piloto .piloto-typing { display: flex; gap: 5px; }
-.piloto .piloto-typing-dot {
-  width: 9px;
-  height: 9px;
-  border-radius: 2px;
-  border: var(--piloto-hairline) solid var(--piloto-border);
-  background: var(--piloto-surface-2);
-  animation: piloto-lamp 1.2s steps(1, end) infinite;
-}
-.piloto .piloto-typing-dot:nth-child(2) { animation-delay: 0.4s; }
-.piloto .piloto-typing-dot:nth-child(3) { animation-delay: 0.8s; }
-.piloto .piloto-rec-dot { background: var(--piloto-danger); animation: piloto-blink 1s steps(2, jump-none) infinite; }
 
 /* ── El pase de permiso (la pieza héroe) ───────────────────────────────────── */
 .piloto .piloto-ticket {
@@ -2134,7 +2335,7 @@
   max-width: min(100%, 560px);
   background: var(--piloto-bg);
   color: var(--piloto-text);
-  border: var(--piloto-border-width) solid var(--piloto-border);
+  border: var(--piloto-ticket-border) solid var(--piloto-text);
   border-radius: var(--piloto-radius-card);
   box-shadow: var(--piloto-shadow-hero);
   animation: piloto-ticket-in 340ms cubic-bezier(0.2, 0.9, 0.25, 1.25) both;
@@ -2148,7 +2349,7 @@
   height: 38px;
   flex-shrink: 0;
   border-radius: 50%;
-  border: var(--piloto-border-width) solid currentColor;
+  border: var(--piloto-ticket-border) solid currentColor;
   background: var(--piloto-bg);
   color: var(--piloto-text);
 }
@@ -2159,7 +2360,7 @@
   margin-top: 6px;
   padding: 1px 7px;
   border-radius: 4px;
-  border: var(--piloto-hairline) solid currentColor;
+  border: 1px solid currentColor;
   font-family: var(--piloto-font-mono);
   font-size: 0.78em;
   opacity: 0.85;
@@ -2168,7 +2369,7 @@
 .piloto .piloto-ticket-tear {
   position: relative;
   height: 0;
-  border-top: var(--piloto-border-width) dashed var(--piloto-border);
+  border-top: var(--piloto-ticket-border) dashed var(--piloto-text);
 }
 .piloto .piloto-ticket-tear::before,
 .piloto .piloto-ticket-tear::after {
@@ -2179,7 +2380,7 @@
   height: 16px;
   border-radius: 50%;
   background: var(--piloto-bg);
-  border: var(--piloto-border-width) solid var(--piloto-border);
+  border: var(--piloto-ticket-border) solid var(--piloto-text);
 }
 .piloto .piloto-ticket-tear::before { left: -10px; }
 .piloto .piloto-ticket-tear::after { right: -10px; }
@@ -2198,7 +2399,7 @@
 }
 .piloto .piloto-ticket[data-urgent] .piloto-ticket-clock { color: var(--piloto-danger); }
 /* La mecha: lo que queda, una barra sólida que se consume. */
-.piloto .piloto-fuse { height: 8px; background: var(--piloto-surface-2); border-top: var(--piloto-border-width) solid var(--piloto-border); }
+.piloto .piloto-fuse { height: 8px; background: var(--piloto-surface-2); border-top: var(--piloto-ticket-border) solid var(--piloto-text); }
 .piloto .piloto-fuse > span {
   display: block;
   height: 100%;
@@ -2250,72 +2451,7 @@
 .piloto .piloto-decision strong { color: var(--piloto-text); font-weight: 650; }
 .piloto .piloto-decision-detail { color: var(--piloto-text-3); }
 
-/* ── Markdown de las respuestas (Streamdown) ── */
-.piloto .piloto-md { line-height: 1.62; color: var(--piloto-text); }
-.piloto .piloto-md p { margin: 0 0 0.8rem 0; }
-.piloto .piloto-md p:last-child { margin-bottom: 0; }
-.piloto .piloto-md h1,
-.piloto .piloto-md h2,
-.piloto .piloto-md h3,
-.piloto .piloto-md h4 { margin: 1.1rem 0 0.45rem 0; font-weight: 750; line-height: 1.25; text-wrap: balance; }
-.piloto .piloto-md h1 { font-size: 1.4em; }
-.piloto .piloto-md h2 { font-size: 1.22em; }
-.piloto .piloto-md h3 { font-size: 1.08em; }
-.piloto .piloto-md h1:first-child,
-.piloto .piloto-md h2:first-child,
-.piloto .piloto-md h3:first-child { margin-top: 0; }
-.piloto .piloto-md ul,
-.piloto .piloto-md ol { margin: 0.5rem 0 0.8rem; padding: 0; }
-.piloto .piloto-md ol { counter-reset: piloto-list 0; }
-.piloto .piloto-md li { position: relative; padding-left: 1.4rem; margin: 0 0 0.3rem 0; }
-.piloto .piloto-md ul > li::before {
-  content: "";
-  position: absolute;
-  left: 0.3rem;
-  top: 0.62em;
-  width: 6px;
-  height: 6px;
-  background: var(--piloto-accent);
-  border-radius: 1px;
-}
-.piloto .piloto-md ol > li { counter-increment: piloto-list 1; }
-.piloto .piloto-md ol > li::before { content: counter(piloto-list) "."; position: absolute; left: 0; color: var(--piloto-text-3); font-weight: 650; font-variant-numeric: tabular-nums; }
-.piloto .piloto-md strong { font-weight: 700; }
-.piloto .piloto-md em { font-style: italic; }
-.piloto .piloto-md a {
-  color: var(--piloto-text);
-  text-decoration: underline;
-  text-decoration-color: var(--piloto-accent);
-  text-decoration-thickness: 2px;
-  text-underline-offset: 3px;
-}
-.piloto .piloto-md a:hover { background: var(--piloto-accent-soft); }
-.piloto .piloto-md :not(pre) > code { background: var(--piloto-surface-2); padding: 0.1rem 0.35rem; border-radius: 4px; font-size: 0.86em; font-family: var(--piloto-font-mono); }
-.piloto .piloto-md pre { max-width: 100%; overflow-x: auto; font-family: var(--piloto-font-mono); font-size: 0.85em; }
-.piloto .piloto-md blockquote { border-left: 3px solid var(--piloto-accent); padding-left: 0.85rem; color: var(--piloto-text-2); margin: 0.6rem 0; }
-.piloto .piloto-md hr { border-top: var(--piloto-border-width) solid var(--piloto-border-2); margin: 1.2rem 0; }
-.piloto .piloto-md table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-variant-numeric: tabular-nums; }
-.piloto .piloto-md th { font-weight: 700; text-align: left; background: var(--piloto-surface); }
-.piloto .piloto-md th,
-.piloto .piloto-md td { border: var(--piloto-hairline) solid var(--piloto-border-2); padding: 0.4rem 0.7rem; }
-.piloto .piloto-md img { max-width: 100%; height: auto; border-radius: 6px; }
-.piloto .piloto-md [data-streamdown="code-block"],
-.piloto .piloto-md [data-streamdown="table-wrapper"] {
-  margin: 0.8rem 0;
-  border: var(--piloto-border-width) solid var(--piloto-border-2) !important;
-  border-radius: calc(var(--piloto-radius-card) - 4px) !important;
-  box-shadow: none !important;
-}
 
-/* ── Movimiento: sólo lo que responde o dice «sigo vivo». Se apaga con reduce-motion. ── */
-@keyframes piloto-chunk { from { opacity: 0; } }
-@keyframes piloto-fade-up { from { opacity: 0; transform: translateY(4px); } }
-@keyframes piloto-step-in { from { opacity: 0; transform: translateX(-6px); } }
-@keyframes piloto-lamp { 0% { background: var(--piloto-accent); } 33%, 100% { background: var(--piloto-surface-2); } }
-@keyframes piloto-blink { 50% { opacity: 0.35; } }
-@keyframes piloto-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: 0.5; } }
-@keyframes piloto-pop { from { transform: scale(0); } }
-@keyframes piloto-ellipsis { 0% { opacity: 0; } 20%, 80% { opacity: 1; } 100% { opacity: 0; } }
 @keyframes piloto-ticket-in {
   from { opacity: 0; transform: translate(6px, 6px); box-shadow: 0 0 0 var(--piloto-shadow-color); }
 }
@@ -2324,26 +2460,9 @@
   70% { opacity: 1; transform: translateY(-50%) rotate(-8deg) scale(0.94); }
   100% { opacity: 1; transform: translateY(-50%) rotate(-9deg) scale(1); }
 }
-@keyframes piloto-claw-dip { 0%, 55%, 100% { transform: translateY(0); } 15%, 25% { transform: translateY(2.5px); } 40% { transform: translateY(0); } }
-@keyframes piloto-claw-l { 0%, 15%, 50%, 100% { transform: rotate(0); } 25%, 40% { transform: rotate(-16deg); } }
-@keyframes piloto-claw-r { 0%, 15%, 50%, 100% { transform: rotate(0); } 25%, 40% { transform: rotate(16deg); } }
 
-.piloto .piloto-chunk-in { animation: piloto-chunk 400ms linear both; }
-.piloto .piloto-fade-up { animation: piloto-fade-up 0.25s ease-out both; }
-.piloto .piloto-pulse { animation: piloto-pulse 1.1s ease-in-out infinite; }
-.piloto .piloto-pop { animation: piloto-pop 0.25s ease-out both; }
-.piloto .piloto-ellipsis { animation: piloto-ellipsis 1.4s linear infinite; }
-
-/* La garra: baja, cierra, sube con el premio, suelta y descansa. */
-.piloto .piloto-claw { overflow: visible; }
-.piloto .piloto-claw-rig,
-.piloto .piloto-claw-l,
-.piloto .piloto-claw-r { transform-box: fill-box; }
-.piloto .piloto-claw-l { transform-origin: 100% 0; }
-.piloto .piloto-claw-r { transform-origin: 0 0; }
-.piloto .piloto-claw .piloto-claw-rig { animation: piloto-claw-dip 2.4s ease-in-out infinite both; }
-.piloto .piloto-claw .piloto-claw-l { animation: piloto-claw-l 2.4s ease-in-out infinite both; }
-.piloto .piloto-claw .piloto-claw-r { animation: piloto-claw-r 2.4s ease-in-out infinite both; }
+@keyframes piloto-fade-up { from { opacity: 0; transform: translateY(4px); } }
+@keyframes piloto-blink { 50% { opacity: 0.35; } }
 
 @media (prefers-reduced-motion: reduce) {
   .piloto *,
@@ -2353,7 +2472,6 @@
     animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
   }
-  .piloto .piloto-typing-dot:first-child { background: var(--piloto-accent); }
 }
 
 /* Teléfono: el pase ocupa el ancho y sus botones también. */