@eduardoalvarez/arrecife 0.2.0 → 0.4.0

package/dist/index.js

@@ -1,19 +1,29 @@
-export { tokens } from './chunk-22OXRTAL.js';
-import { cn, CaraDeMascota, Mascota } from './chunk-ZL5X6XO7.js';
-export { CaraDeMascota, Isotipo, Logo, Mascota, cn } from './chunk-ZL5X6XO7.js';
+export { tokens } from './chunk-VPT32GPG.js';
+import { alternarTema, temaActual, escucharTema } from './chunk-KPZNNMV5.js';
+export { TEMA_ATRIBUTO, TEMA_CLAVE, TEMA_EVENTO, alternarTema, aplicarTema, escucharTema, scriptTema, temaActual, temaGuardado, temaPreferido } from './chunk-KPZNNMV5.js';
+import { CaraDeMascota, Mascota } from './chunk-TB3IYPOD.js';
+export { CaraDeMascota, Isotipo, Logo, Mascota } from './chunk-TB3IYPOD.js';
 export { RUTA_ASSETS, aletas, caras, listaCaras, listaPoses, poses, usoDeCara } from './chunk-E3OMP2DL.js';
-import { __export, naming } from './chunk-DHF63QNM.js';
-export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, shadow, sintaxis, size, spacing, tagline, typeScale } from './chunk-DHF63QNM.js';
-import { cva } from 'class-variance-authority';
+import { Label } from './chunk-ZEOQKRQ7.js';
+export { Label } from './chunk-ZEOQKRQ7.js';
+import { Text } from './chunk-UOWIDFCB.js';
+export { Text, texto as textVariants } from './chunk-UOWIDFCB.js';
+import { cn } from './chunk-NHS7ETKJ.js';
+export { cn } from './chunk-NHS7ETKJ.js';
+import { naming } from './chunk-TSPJOM6K.js';
+export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, sintaxis, size, spacing, tagline, typeScale } from './chunk-TSPJOM6K.js';
+import { __export } from './chunk-MLKGABMK.js';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cva } from 'class-variance-authority';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { Slot } from '@radix-ui/react-slot';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { es } from 'date-fns/locale';
 import { DayPicker } from 'react-day-picker';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import * as LabelPrimitive from '@radix-ui/react-label';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -22,10 +32,168 @@ import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as ToastPrimitive from '@radix-ui/react-toast';
+import { useSyncExternalStore, useRef, useState, useEffect, useCallback, useId } from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { useRef, useState, useEffect, useCallback, useId } from 'react';
 
-var alert = cva("w-full rounded-card border p-md font-sans text-ui", {
+function Glyph({ children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      width: "1em",
+      height: "1em",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.75,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...props,
+      children
+    }
+  );
+}
+var Check = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M3 8.5 6.5 12 13 4.5" }) });
+var Minus = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M3.5 8h9" }) });
+var ChevronDown = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4" }) });
+var ChevronUp = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M4 10l4-4 4 4" }) });
+var ChevronLeft = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M10 4L6 8l4 4" }) });
+var ChevronRight = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4" }) });
+var Close = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
+var Copy = (props) => /* @__PURE__ */ jsxs(Glyph, { ...props, children: [
+  /* @__PURE__ */ jsx("rect", { x: "5.5", y: "5.5", width: "8", height: "8", rx: "1.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M10.5 3.5h-7a1.5 1.5 0 0 0-1.5 1.5v7" })
+] });
+var ArrowUpRight = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M5 11l6-6M5.5 5h5.5v5.5" }) });
+var Ellipsis = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, strokeWidth: 2.25, children: /* @__PURE__ */ jsx("path", { d: "M4 8h.01M8 8h.01M12 8h.01" }) });
+var Spinner = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 16 16",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    "aria-hidden": "true",
+    focusable: "false",
+    className: "motion-safe:animate-spin",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6", opacity: 0.3 }),
+      /* @__PURE__ */ jsx("path", { d: "M8 2a6 6 0 0 1 6 6" })
+    ]
+  }
+);
+var Sol = (props) => /* @__PURE__ */ jsxs(Glyph, { ...props, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "3" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 1.5v1.2M8 13.3v1.2M14.5 8h-1.2M2.7 8H1.5M12.6 3.4l-.85.85M4.25 11.75l-.85.85M12.6 12.6l-.85-.85M4.25 4.25l-.85-.85" })
+] });
+var Luna = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M13.5 9.4A5.8 5.8 0 0 1 6.6 2.5a5.8 5.8 0 1 0 6.9 6.9Z" }) });
+function GlifoMedia({ children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...props,
+      children
+    }
+  );
+}
+var Play = (props) => /* @__PURE__ */ jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" }) });
+var Pause = (props) => /* @__PURE__ */ jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) });
+var Retry = (props) => /* @__PURE__ */ jsx(
+  GlifoMedia,
+  {
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" })
+  }
+);
+var GoBackSeconds = (props) => /* @__PURE__ */ jsxs(GlifoMedia, { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M16.5 8.5H13.8604C13.6452 8.5 13.4541 8.63772 13.386 8.84189L12.7194 10.8419C12.6114 11.1657 12.8524 11.5 13.1937 11.5H14.5C15.6046 11.5 16.5 12.3954 16.5 13.5C16.5 14.6046 15.6046 15.5 14.5 15.5H12.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M7.5 10.5L10 8.5V15.5", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M14 4.5L12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C8.7288 22 5.82446 20.4293 4 18.001M8 2.83209C6.87754 3.32251 5.86251 4.01303 5 4.85857C3.14864 6.67349 2 9.20261 2 12C2 12.6849 2.06886 13.3538 2.20004 14",
+      strokeLinejoin: "round"
+    }
+  )
+] });
+var AdvanceSeconds = (props) => /* @__PURE__ */ jsxs(GlifoMedia, { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M16.5 8.5H13.8604C13.6452 8.5 13.4541 8.63772 13.386 8.84189L12.7194 10.8419C12.6114 11.1657 12.8524 11.5 13.1937 11.5H14.5C15.6046 11.5 16.5 12.3954 16.5 13.5C16.5 14.6046 15.6046 15.5 14.5 15.5H12.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M7.5 10.5L10 8.5V15.5", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M10 4.5L12 2C6.47715 2 2 6.47715 2 12C2 12.6849 2.06886 13.3538 2.20004 14M16 2.83209C19.5318 4.3752 22 7.89936 22 12C22 17.5228 17.5228 22 12 22C8.72852 22 5.82443 20.4287 4 18",
+      strokeLinejoin: "round"
+    }
+  )
+] });
+var VolumeOn = (props) => /* @__PURE__ */ jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" }) });
+var VolumeMuted = (props) => /* @__PURE__ */ jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" }) });
+function Accordion({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Root,
+    {
+      className: cn("border-hairline w-full border-t", className),
+      ...props
+    }
+  );
+}
+function AccordionItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Item, { className: cn("border-hairline border-b", className), ...props });
+}
+function AccordionTrigger({
+  className,
+  children,
+  headingLevel = 3,
+  ...props
+}) {
+  const Encabezado = `h${headingLevel}`;
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { asChild: true, children: /* @__PURE__ */ jsx(Encabezado, { children: /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Trigger,
+    {
+      className: cn(
+        "gap-step-sm py-step-sm flex w-full cursor-pointer items-center justify-between text-left",
+        "font-sans text-lead font-medium text-text-primary",
+        "transition-standard",
+        "hover:text-accent",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "[&[data-state=open]>svg]:rotate-180",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronDown, { className: "text-text-muted shrink-0" })
+      ]
+    }
+  ) }) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Content, { className: "overflow-hidden", ...props, children: /* @__PURE__ */ jsx("div", { className: cn("pb-step-md font-sans text-ui text-text-secondary max-w-measure", className), children }) });
+}
+var alert = cva("w-full rounded-card border p-step-md font-sans text-ui", {
   variants: {
     variant: {
       accent: "text-text-secondary",
@@ -78,7 +246,7 @@ function Alert({
       role: tono === "error" ? "alert" : "status",
       className: cn(alert({ variant, enfasis }), className),
       ...props,
-      children: /* @__PURE__ */ jsxs("div", { className: "gap-sm flex items-start", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "gap-step-sm flex items-start", children: [
         /* @__PURE__ */ jsx(
           "span",
           {
@@ -88,280 +256,274 @@ function Alert({
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          title ? /* @__PURE__ */ jsx("p", { className: "mb-xs text-text-primary font-medium", children: title }) : null,
+          title ? /* @__PURE__ */ jsx("p", { className: "mb-step-xs text-text-primary font-medium", children: title }) : null,
           children ? /* @__PURE__ */ jsx("div", { className: "max-w-measure", children }) : null
         ] })
       ] })
     }
   );
 }
-var avatar = cva(
-  "relative flex shrink-0 overflow-hidden rounded-pill bg-surface-raised border border-hairline",
+var button = cva(
+  [
+    "inline-flex cursor-pointer items-center justify-center gap-step-xs whitespace-nowrap select-none",
+    "rounded-control font-sans font-medium",
+    "transition-standard",
+    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:shrink-0"
+  ],
   {
     variants: {
+      variant: {
+        primary: [
+          "bg-accent text-accent-on hover:bg-accent-hover",
+          "light:bg-brand-hull light:text-accent-on light:hover:bg-text-secondary"
+        ],
+        conversion: "bg-warm text-warm-on hover:bg-warm-hover",
+        secondary: [
+          "border-hairline-hover border bg-transparent text-text-primary",
+          "hover:border-accent hover:text-accent"
+        ],
+        tertiary: [
+          "bg-transparent font-mono font-normal text-text-secondary",
+          "hover:text-accent hover:underline hover:underline-offset-4"
+        ]
+      },
       size: {
-        sm: "size-8",
-        md: "size-10",
-        lg: "size-14",
-        xl: "size-24"
+        sm: "h-8 px-control-sm text-label",
+        md: "h-10 px-control-md text-ui",
+        lg: "h-12 px-control-lg text-lead",
+        /** Cuadrado 42×42, sin texto. Lleva `aria-label` obligatorio. */
+        icon: "size-control-icon p-0"
       }
     },
-    defaultVariants: { size: "md" }
+    compoundVariants: [
+      /**
+       * El terciario no tiene caja: ni padding horizontal ni alto de control.
+       * Va aquí y no como `px-0` en la variante para que gane al `px-*` del
+       * tamaño sin depender del orden en que cva concatena las clases.
+       */
+      { variant: "tertiary", size: ["sm", "md", "lg"], class: "h-auto px-0" }
+    ],
+    defaultVariants: { variant: "primary", size: "md" }
   }
 );
-function Avatar({ className, size: size2, ...props }) {
-  return /* @__PURE__ */ jsx(AvatarPrimitive.Root, { className: cn(avatar({ size: size2 }), className), ...props });
-}
-function AvatarImage({
+function Button({
   className,
+  variant,
+  size: size2,
+  asChild = false,
+  loading = false,
+  icon,
+  children,
+  disabled,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(AvatarPrimitive.Image, { className: cn("aspect-square size-full object-cover", className), ...props });
+  if (asChild) {
+    return /* @__PURE__ */ jsx(Slot, { className: cn(button({ variant, size: size2 }), className), ...props, children });
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: cn(button({ variant, size: size2 }), className),
+      disabled: disabled === true || loading,
+      "aria-busy": loading || void 0,
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsx(Spinner, {}) : icon,
+        children
+      ]
+    }
+  );
 }
-function AvatarFallback({
+var AlertDialog = AlertDialogPrimitive.Root;
+var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+function AlertDialogOverlay({
   className,
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    AvatarPrimitive.Fallback,
+    AlertDialogPrimitive.Overlay,
     {
-      className: cn(
-        "text-label font-mono text-text-secondary flex size-full items-center justify-center uppercase",
-        className
-      ),
+      className: cn("bg-brand-hull/70 fixed inset-0 z-50", className),
       ...props
     }
   );
 }
-var badge = cva(
-  ["inline-flex items-center gap-xs", "rounded-chip px-xs py-0.5", "font-sans text-tag", "transition-standard"],
-  {
-    variants: {
-      variant: {
-        neutral: "bg-surface-raised text-text-secondary",
-        accent: "bg-accent/8 text-text-primary",
-        warm: "bg-warm/8 text-text-primary",
-        success: "bg-success/8 text-text-primary",
-        warning: "bg-warning/8 text-text-primary",
-        error: "bg-error/8 text-text-primary"
+function AlertDialogContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(AlertDialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      AlertDialogPrimitive.Content,
+      {
+        className: cn(
+          "fixed top-1/2 left-1/2 z-50 w-full max-w-content -translate-x-1/2 -translate-y-1/2",
+          "gap-step-md p-step-lg flex flex-col",
+          "rounded-panel border-border bg-surface shadow-standard border",
+          "text-text-primary font-sans",
+          className
+        ),
+        ...props,
+        children
       }
-    },
-    defaultVariants: { variant: "neutral" }
-  }
-);
-function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsx("span", { className: cn(badge({ variant }), className), ...props });
+    )
+  ] });
 }
-var categoria = cva(
-  [
-    "inline-flex items-center gap-xs",
-    "rounded-pill px-sm py-0.5",
-    "font-mono text-chip",
-    "border transition-standard"
-  ],
-  {
-    variants: {
-      active: {
-        false: "border-warm/28 bg-transparent text-warm",
-        true: "border-warm bg-warm text-warm-on"
-      }
-    },
-    defaultVariants: { active: false }
-  }
-);
-function CategoryBadge({ className, active = false, ...props }) {
+function AlertDialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("gap-step-xs flex flex-col", className), ...props });
+}
+function AlertDialogFooter({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    "span",
+    "div",
     {
-      "data-active": active || void 0,
-      className: cn(categoria({ active }), className),
+      className: cn("gap-step-sm flex flex-col-reverse sm:flex-row sm:justify-end", className),
       ...props
     }
   );
 }
-var metrica = ["inline-flex items-center gap-xs", "rounded-pill", "font-mono text-chip text-text-muted"];
-function MetricBadge({ className, boxed = false, ...props }) {
+function AlertDialogTitle({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
-    "span",
+    AlertDialogPrimitive.Title,
     {
-      className: cn(metrica, boxed && "border-hairline px-sm py-0.5 border", className),
+      className: cn("text-h3 font-display text-text-primary", className),
       ...props
     }
   );
 }
-function Glyph({ children, ...props }) {
+function AlertDialogDescription({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
-    "svg",
+    AlertDialogPrimitive.Description,
     {
-      viewBox: "0 0 16 16",
-      width: "1em",
-      height: "1em",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 1.75,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      focusable: "false",
-      ...props,
-      children
+      className: cn("text-ui text-text-secondary max-w-measure", className),
+      ...props
     }
   );
 }
-var Check = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M3 8.5 6.5 12 13 4.5" }) });
-var Minus = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M3.5 8h9" }) });
-var ChevronDown = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4" }) });
-var ChevronUp = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M4 10l4-4 4 4" }) });
-var ChevronLeft = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M10 4L6 8l4 4" }) });
-var ChevronRight = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4" }) });
-var Close = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
-var Copy = (props) => /* @__PURE__ */ jsxs(Glyph, { ...props, children: [
-  /* @__PURE__ */ jsx("rect", { x: "5.5", y: "5.5", width: "8", height: "8", rx: "1.5" }),
-  /* @__PURE__ */ jsx("path", { d: "M10.5 3.5h-7a1.5 1.5 0 0 0-1.5 1.5v7" })
-] });
-var ArrowUpRight = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M5 11l6-6M5.5 5h5.5v5.5" }) });
-var Ellipsis = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, strokeWidth: 2.25, children: /* @__PURE__ */ jsx("path", { d: "M4 8h.01M8 8h.01M12 8h.01" }) });
-var Spinner = (props) => /* @__PURE__ */ jsxs(
-  "svg",
+function AlertDialogCancel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Cancel,
+    {
+      className: cn(button({ variant: "secondary" }), className),
+      ...props
+    }
+  );
+}
+function AlertDialogAction({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Action,
+    {
+      className: cn(button({ variant: "primary" }), className),
+      ...props
+    }
+  );
+}
+var avatar = cva(
+  "relative flex shrink-0 overflow-hidden rounded-pill bg-surface-raised border border-hairline",
   {
-    viewBox: "0 0 16 16",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    "aria-hidden": "true",
-    focusable: "false",
-    className: "motion-safe:animate-spin",
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6", opacity: 0.3 }),
-      /* @__PURE__ */ jsx("path", { d: "M8 2a6 6 0 0 1 6 6" })
-    ]
+    variants: {
+      size: {
+        sm: "size-8",
+        md: "size-10",
+        lg: "size-14",
+        xl: "size-24"
+      }
+    },
+    defaultVariants: { size: "md" }
   }
 );
-function GlifoMedia({ children, ...props }) {
+function Avatar({ className, size: size2, ...props }) {
+  return /* @__PURE__ */ jsx(AvatarPrimitive.Root, { className: cn(avatar({ size: size2 }), className), ...props });
+}
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AvatarPrimitive.Image, { className: cn("aspect-square size-full object-cover", className), ...props });
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
-    "svg",
+    AvatarPrimitive.Fallback,
     {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      "aria-hidden": "true",
-      focusable: "false",
-      ...props,
-      children
+      className: cn(
+        "text-label font-mono text-text-secondary flex size-full items-center justify-center uppercase",
+        className
+      ),
+      ...props
     }
   );
 }
-var Play = (props) => /* @__PURE__ */ jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" }) });
-var Pause = (props) => /* @__PURE__ */ jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) });
-var Retry = (props) => /* @__PURE__ */ jsx(
-  GlifoMedia,
+var badge = cva(
+  ["inline-flex items-center gap-step-xs", "rounded-chip px-step-xs py-0.5", "font-sans text-tag", "transition-standard"],
   {
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    ...props,
-    children: /* @__PURE__ */ jsx("path", { d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" })
+    variants: {
+      variant: {
+        neutral: "bg-surface-raised text-text-secondary",
+        accent: "bg-accent/8 text-text-primary",
+        warm: "bg-warm/8 text-text-primary",
+        success: "bg-success/8 text-text-primary",
+        warning: "bg-warning/8 text-text-primary",
+        error: "bg-error/8 text-text-primary"
+      }
+    },
+    defaultVariants: { variant: "neutral" }
   }
 );
-var GoBackSeconds = (props) => /* @__PURE__ */ jsxs(GlifoMedia, { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", ...props, children: [
-  /* @__PURE__ */ jsx("path", { d: "M16.5 8.5H13.8604C13.6452 8.5 13.4541 8.63772 13.386 8.84189L12.7194 10.8419C12.6114 11.1657 12.8524 11.5 13.1937 11.5H14.5C15.6046 11.5 16.5 12.3954 16.5 13.5C16.5 14.6046 15.6046 15.5 14.5 15.5H12.5" }),
-  /* @__PURE__ */ jsx("path", { d: "M7.5 10.5L10 8.5V15.5", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M14 4.5L12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C8.7288 22 5.82446 20.4293 4 18.001M8 2.83209C6.87754 3.32251 5.86251 4.01303 5 4.85857C3.14864 6.67349 2 9.20261 2 12C2 12.6849 2.06886 13.3538 2.20004 14",
-      strokeLinejoin: "round"
-    }
-  )
-] });
-var AdvanceSeconds = (props) => /* @__PURE__ */ jsxs(GlifoMedia, { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", ...props, children: [
-  /* @__PURE__ */ jsx("path", { d: "M16.5 8.5H13.8604C13.6452 8.5 13.4541 8.63772 13.386 8.84189L12.7194 10.8419C12.6114 11.1657 12.8524 11.5 13.1937 11.5H14.5C15.6046 11.5 16.5 12.3954 16.5 13.5C16.5 14.6046 15.6046 15.5 14.5 15.5H12.5" }),
-  /* @__PURE__ */ jsx("path", { d: "M7.5 10.5L10 8.5V15.5", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M10 4.5L12 2C6.47715 2 2 6.47715 2 12C2 12.6849 2.06886 13.3538 2.20004 14M16 2.83209C19.5318 4.3752 22 7.89936 22 12C22 17.5228 17.5228 22 12 22C8.72852 22 5.82443 20.4287 4 18",
-      strokeLinejoin: "round"
-    }
-  )
-] });
-var VolumeOn = (props) => /* @__PURE__ */ jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" }) });
-var VolumeMuted = (props) => /* @__PURE__ */ jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" }) });
-var button = cva(
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx("span", { className: cn(badge({ variant }), className), ...props });
+}
+var categoria = cva(
   [
-    "inline-flex cursor-pointer items-center justify-center gap-xs whitespace-nowrap select-none",
-    "rounded-control font-sans font-medium",
-    "transition-standard",
-    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
-    "disabled:pointer-events-none disabled:opacity-50",
-    "[&_svg]:shrink-0"
+    "inline-flex items-center gap-step-xs",
+    "rounded-pill px-step-sm py-0.5",
+    "font-mono text-chip",
+    "border transition-standard"
   ],
   {
     variants: {
-      variant: {
-        primary: [
-          "bg-accent text-accent-on hover:bg-accent-hover",
-          "light:bg-brand-hull light:text-accent-on light:hover:bg-text-secondary"
-        ],
-        conversion: "bg-warm text-warm-on hover:bg-warm-hover",
-        secondary: [
-          "border-hairline-hover border bg-transparent text-text-primary",
-          "hover:border-accent hover:text-accent"
-        ],
-        tertiary: [
-          "bg-transparent font-mono font-normal text-text-secondary",
-          "hover:text-accent hover:underline hover:underline-offset-4"
-        ]
-      },
-      size: {
-        sm: "h-8 px-control-sm text-label",
-        md: "h-10 px-control-md text-ui",
-        lg: "h-12 px-control-lg text-lead",
-        /** Cuadrado 42×42, sin texto. Lleva `aria-label` obligatorio. */
-        icon: "size-control-icon p-0"
+      active: {
+        false: "border-warm/28 bg-transparent text-warm",
+        true: "border-warm bg-warm text-warm-on"
       }
     },
-    compoundVariants: [
-      /**
-       * El terciario no tiene caja: ni padding horizontal ni alto de control.
-       * Va aquí y no como `px-0` en la variante para que gane al `px-*` del
-       * tamaño sin depender del orden en que cva concatena las clases.
-       */
-      { variant: "tertiary", size: ["sm", "md", "lg"], class: "h-auto px-0" }
-    ],
-    defaultVariants: { variant: "primary", size: "md" }
+    defaultVariants: { active: false }
   }
 );
-function Button({
-  className,
-  variant,
-  size: size2,
-  asChild = false,
-  loading = false,
-  icon,
-  children,
-  disabled,
-  ...props
-}) {
-  if (asChild) {
-    return /* @__PURE__ */ jsx(Slot, { className: cn(button({ variant, size: size2 }), className), ...props, children });
-  }
-  return /* @__PURE__ */ jsxs(
-    "button",
+function CategoryBadge({ className, active = false, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
     {
-      className: cn(button({ variant, size: size2 }), className),
-      disabled: disabled === true || loading,
-      "aria-busy": loading || void 0,
-      ...props,
-      children: [
-        loading ? /* @__PURE__ */ jsx(Spinner, {}) : icon,
-        children
-      ]
+      "data-active": active || void 0,
+      className: cn(categoria({ active }), className),
+      ...props
+    }
+  );
+}
+var metrica = ["inline-flex items-center gap-step-xs", "rounded-pill", "font-mono text-chip text-text-muted"];
+function MetricBadge({ className, boxed = false, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(metrica, boxed && "border-hairline px-step-sm py-0.5 border", className),
+      ...props
     }
   );
 }
@@ -403,8 +565,8 @@ function Calendar({
         // la raíz, y sin esto se ancla al primer ancestro posicionado —o al
         // viewport— y las flechas acaban en los bordes de la página.
         root: cn("relative", fullWidth ? "w-full" : "w-fit"),
-        months: cn("gap-md flex flex-col sm:flex-row", fullWidth && "w-full"),
-        month: cn("gap-sm flex flex-col", fullWidth && "min-w-0 flex-1"),
+        months: cn("gap-step-md flex flex-col sm:flex-row", fullWidth && "w-full"),
+        month: cn("gap-step-sm flex flex-col", fullWidth && "min-w-0 flex-1"),
         month_caption: "h-8 flex items-center justify-center",
         caption_label: "text-ui font-sans font-medium text-text-primary capitalize",
         nav: "absolute inset-x-0 top-0 flex items-center justify-between",
@@ -432,7 +594,7 @@ function Calendar({
         range_start: "[&_button]:bg-accent [&_button]:text-accent-on [&_button]:rounded-r-none",
         range_middle: "[&_button]:bg-surface-raised [&_button]:text-text-primary [&_button]:rounded-none",
         range_end: "[&_button]:bg-accent [&_button]:text-accent-on [&_button]:rounded-l-none",
-        footer: "text-label font-sans text-text-secondary pt-sm",
+        footer: "text-label font-sans text-text-secondary pt-step-sm",
         ...classNames
       },
       components: {
@@ -442,87 +604,13 @@ function Calendar({
     }
   );
 }
-var ETIQUETA = {
-  display: "h1",
-  stat: "p",
-  h1: "h1",
-  h2: "h2",
-  h3: "h3",
-  body: "p",
-  lead: "p",
-  ui: "p",
-  label: "span",
-  tag: "span",
-  meta: "p",
-  chip: "span",
-  eyebrow: "p"
-};
-var texto = cva("", {
-  variants: {
-    variant: {
-      display: "text-display font-display",
-      // Métricas grandes: 46px de display. Es la única escala pensada para un
-      // número, y por eso el interlineado es 1.
-      stat: "text-stat font-display",
-      h1: "text-h1 font-display",
-      h2: "text-h2 font-display",
-      h3: "text-h3 font-display",
-      body: "text-body font-sans",
-      // 17px: la bajada de las páginas internas y el botón grande.
-      lead: "text-lead font-sans",
-      ui: "text-ui font-sans",
-      label: "text-label font-sans",
-      // Las dos escalas de etiqueta. `tag` es el estado (sans 12.5/500) y `chip`
-      // la categoría y la métrica (mono 11.5). Ninguna transforma el texto.
-      tag: "text-tag font-sans",
-      chip: "text-chip font-mono",
-      // Mono SIN transformar: fechas, rutas, versiones, nombres de archivo y la
-      // firma del footer. Es el escalón que faltaba, y por el que cada sitio de
-      // uso terminaba escribiendo `variant="eyebrow" className="normal-case"`.
-      meta: "text-meta font-mono",
-      // `uppercase` no cabe en un token de tamaño: text-transform no es un
-      // modificador de --text-*. Por eso lo pone la variante y no theme.css.
-      eyebrow: "text-eyebrow font-mono uppercase"
-    },
-    tone: {
-      primary: "text-text-primary",
-      secondary: "text-text-secondary",
-      muted: "text-text-muted",
-      accent: "text-accent",
-      warm: "text-warm",
-      success: "text-success",
-      warning: "text-warning",
-      error: "text-error"
-    }
-  },
-  defaultVariants: { variant: "body", tone: "primary" }
-});
-function Text({
-  className,
-  variant,
-  tone,
-  as,
-  asChild = false,
-  measure,
-  children,
-  ...props
-}) {
-  const escala = variant ?? "body";
-  const limitar = measure ?? escala === "body";
-  const clases = cn(texto({ variant, tone }), limitar && "max-w-measure", className);
-  if (asChild) {
-    return /* @__PURE__ */ jsx(Slot, { className: clases, ...props, children });
-  }
-  const Etiqueta = as ?? ETIQUETA[escala];
-  return /* @__PURE__ */ jsx(Etiqueta, { className: clases, ...props, children });
-}
 var SUPERFICIE_TARJETA = "rounded-card border-hairline bg-surface border";
 var HOVER_TARJETA = "transition-standard hover:border-hairline-hover";
 function Card({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn(SUPERFICIE_TARJETA, className), ...props });
 }
 function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("gap-xs p-lg flex flex-col", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("gap-step-xs p-step-lg flex flex-col", className), ...props });
 }
 function CardTitle({ className, ...props }) {
   return /* @__PURE__ */ jsx(Text, { as: "h3", variant: "h3", className, ...props });
@@ -531,13 +619,13 @@ function CardDescription({ className, ...props }) {
   return /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", className, ...props });
 }
 function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("px-lg pb-lg", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("px-step-lg pb-step-lg", className), ...props });
 }
 function CardFooter({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("border-hairline px-lg py-md gap-sm flex items-center border-t", className),
+      className: cn("border-hairline px-step-lg py-step-md gap-step-sm flex items-center border-t", className),
       ...props
     }
   );
@@ -588,7 +676,7 @@ function DateField({
       "data-invalid": invalid || void 0,
       "aria-invalid": invalid || void 0,
       className: cn(
-        "px-sm h-10 w-full",
+        "px-step-sm h-10 w-full",
         "rounded-control border-border bg-surface border",
         "font-mono text-ui text-text-primary",
         "transition-standard",
@@ -631,7 +719,7 @@ function DialogContent({
       {
         className: cn(
           "fixed top-1/2 left-1/2 z-50 w-full max-w-content -translate-x-1/2 -translate-y-1/2",
-          "gap-md p-lg flex flex-col",
+          "gap-step-md p-step-lg flex flex-col",
           "rounded-panel border-border bg-surface shadow-standard border",
           "text-text-primary font-sans",
           className
@@ -658,10 +746,10 @@ function DialogContent({
   ] });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("gap-xs flex flex-col pr-8", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("gap-step-xs flex flex-col pr-8", className), ...props });
 }
 function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("gap-sm flex flex-col-reverse sm:flex-row sm:justify-end", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("gap-step-sm flex flex-col-reverse sm:flex-row sm:justify-end", className), ...props });
 }
 function DialogTitle({
   className,
@@ -698,7 +786,7 @@ var panel = [
   "text-text-primary font-sans"
 ];
 var item = [
-  "rounded-chip px-sm relative flex h-9 cursor-default items-center gap-2 select-none",
+  "rounded-chip px-step-sm relative flex h-9 cursor-default items-center gap-2 select-none",
   "text-ui text-text-secondary transition-standard",
   "data-[highlighted]:bg-surface data-[highlighted]:text-text-primary",
   "data-[disabled]:pointer-events-none data-[disabled]:opacity-50"
@@ -750,7 +838,7 @@ function DropdownMenuLabel({
   return /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Label,
     {
-      className: cn("px-sm text-eyebrow font-mono text-text-secondary py-1.5 uppercase", className),
+      className: cn("px-step-sm text-eyebrow font-mono text-text-secondary py-1.5 uppercase", className),
       ...props
     }
   );
@@ -791,7 +879,7 @@ function Input({ className, invalid = false, ...props }) {
       "data-invalid": invalid || void 0,
       "aria-invalid": invalid || void 0,
       className: cn(
-        "h-10 w-full px-sm",
+        "h-10 w-full px-step-sm",
         "rounded-control border border-border bg-surface",
         "font-sans text-ui text-text-primary placeholder:text-text-muted",
         "transition-standard",
@@ -799,20 +887,7 @@ function Input({ className, invalid = false, ...props }) {
         "focus-visible:border-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
         "disabled:pointer-events-none disabled:opacity-50",
         "data-[invalid]:border-error data-[invalid]:focus-visible:outline-error",
-        "file:mr-sm file:border-0 file:bg-transparent file:font-sans file:text-label file:text-text-secondary",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function Label2({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    LabelPrimitive.Root,
-    {
-      className: cn(
-        "text-label font-sans text-text-secondary select-none",
-        "peer-disabled:opacity-50 group-data-[disabled]:opacity-50",
+        "file:mr-step-sm file:border-0 file:bg-transparent file:font-sans file:text-label file:text-text-secondary",
         className
       ),
       ...props
@@ -831,7 +906,7 @@ function Pagination({ className, ...props }) {
   );
 }
 function PaginationContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx("ul", { className: cn("gap-xs flex flex-row items-center", className), ...props });
+  return /* @__PURE__ */ jsx("ul", { className: cn("gap-step-xs flex flex-row items-center", className), ...props });
 }
 function PaginationItem(props) {
   return /* @__PURE__ */ jsx("li", { ...props });
@@ -842,7 +917,7 @@ function PaginationLink({ className, isActive = false, ...props }) {
     {
       "aria-current": isActive ? "page" : void 0,
       className: cn(
-        "rounded-chip px-sm inline-flex h-9 min-w-9 cursor-pointer items-center justify-center",
+        "rounded-chip px-step-sm inline-flex h-9 min-w-9 cursor-pointer items-center justify-center",
         "font-sans text-ui text-text-secondary",
         "transition-standard",
         "hover:bg-surface hover:text-text-primary",
@@ -855,13 +930,13 @@ function PaginationLink({ className, isActive = false, ...props }) {
   );
 }
 function PaginationPrevious({ className, ...props }) {
-  return /* @__PURE__ */ jsxs(PaginationLink, { "aria-label": "P\xE1gina anterior", className: cn("gap-xs", className), ...props, children: [
+  return /* @__PURE__ */ jsxs(PaginationLink, { "aria-label": "P\xE1gina anterior", className: cn("gap-step-xs", className), ...props, children: [
     /* @__PURE__ */ jsx(ChevronLeft, {}),
     "Anterior"
   ] });
 }
 function PaginationNext({ className, ...props }) {
-  return /* @__PURE__ */ jsxs(PaginationLink, { "aria-label": "P\xE1gina siguiente", className: cn("gap-xs", className), ...props, children: [
+  return /* @__PURE__ */ jsxs(PaginationLink, { "aria-label": "P\xE1gina siguiente", className: cn("gap-step-xs", className), ...props, children: [
     "Siguiente",
     /* @__PURE__ */ jsx(ChevronRight, {})
   ] });
@@ -892,7 +967,7 @@ function PopoverContent({
       align,
       sideOffset,
       className: cn(
-        "z-50 w-72 p-md",
+        "z-50 w-72 p-step-md",
         "rounded-panel border-border bg-surface-raised shadow-standard border",
         "text-text-primary font-sans text-ui",
         "outline-none",
@@ -921,7 +996,7 @@ function Progress({ className, value, label, tone = "accent", ...props }) {
   );
 }
 function RadioGroup2({ className, ...props }) {
-  return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { className: cn("gap-sm grid", className), ...props });
+  return /* @__PURE__ */ jsx(RadioGroupPrimitive.Root, { className: cn("gap-step-sm grid", className), ...props });
 }
 function RadioGroupItem({ className, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -953,7 +1028,7 @@ function SelectTrigger({
     SelectPrimitive.Trigger,
     {
       className: cn(
-        "gap-sm px-sm flex h-10 w-full cursor-pointer items-center justify-between",
+        "gap-step-sm px-step-sm flex h-10 w-full cursor-pointer items-center justify-between",
         "rounded-control border-border bg-surface border",
         "font-sans text-ui text-text-primary",
         "transition-standard",
@@ -1004,7 +1079,7 @@ function SelectLabel({
   return /* @__PURE__ */ jsx(
     SelectPrimitive.Label,
     {
-      className: cn("px-sm text-eyebrow font-mono text-text-secondary py-1.5 uppercase", className),
+      className: cn("px-step-sm text-eyebrow font-mono text-text-secondary py-1.5 uppercase", className),
       ...props
     }
   );
@@ -1018,7 +1093,7 @@ function SelectItem({
     SelectPrimitive.Item,
     {
       className: cn(
-        "rounded-chip px-sm relative flex h-9 w-full cursor-default items-center pr-8 select-none",
+        "rounded-chip px-step-sm relative flex h-9 w-full cursor-default items-center pr-8 select-none",
         "text-ui text-text-secondary transition-standard",
         "data-[highlighted]:bg-surface data-[highlighted]:text-text-primary",
         "data-[state=checked]:text-text-primary",
@@ -1120,19 +1195,19 @@ function SheetHeader({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("border-hairline gap-xs p-lg flex flex-col border-b pr-12", className),
+      className: cn("border-hairline gap-step-xs p-step-lg flex flex-col border-b pr-12", className),
       ...props
     }
   );
 }
 function SheetBody({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("p-lg flex-1 overflow-y-auto", className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn("p-step-lg flex-1 overflow-y-auto", className), ...props });
 }
 function SheetFooter({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cn("border-hairline gap-sm p-lg flex flex-wrap justify-end border-t", className),
+      className: cn("border-hairline gap-step-sm p-step-lg flex flex-wrap justify-end border-t", className),
       ...props
     }
   );
@@ -1243,7 +1318,7 @@ function TableHead({ className, ...props }) {
     "th",
     {
       className: cn(
-        "px-sm h-10 text-left align-middle",
+        "px-step-sm h-10 text-left align-middle",
         "text-eyebrow font-mono text-text-muted uppercase",
         className
       ),
@@ -1252,13 +1327,13 @@ function TableHead({ className, ...props }) {
   );
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsx("td", { className: cn("px-sm py-sm text-text-secondary align-middle", className), ...props });
+  return /* @__PURE__ */ jsx("td", { className: cn("px-step-sm py-step-sm text-text-secondary align-middle", className), ...props });
 }
 function TableCaption({ className, ...props }) {
-  return /* @__PURE__ */ jsx("caption", { className: cn("mt-sm text-label text-text-muted", className), ...props });
+  return /* @__PURE__ */ jsx("caption", { className: cn("mt-step-sm text-label text-text-muted", className), ...props });
 }
 function Tabs({ className, ...props }) {
-  return /* @__PURE__ */ jsx(TabsPrimitive.Root, { className: cn("gap-md flex flex-col", className), ...props });
+  return /* @__PURE__ */ jsx(TabsPrimitive.Root, { className: cn("gap-step-md flex flex-col", className), ...props });
 }
 function TabsList({
   className,
@@ -1267,7 +1342,7 @@ function TabsList({
   return /* @__PURE__ */ jsx(
     TabsPrimitive.List,
     {
-      className: cn("rounded-control bg-surface gap-xs inline-flex items-center p-1", className),
+      className: cn("rounded-control bg-surface gap-step-xs inline-flex items-center p-1", className),
       ...props
     }
   );
@@ -1280,7 +1355,7 @@ function TabsTrigger({
     TabsPrimitive.Trigger,
     {
       className: cn(
-        "rounded-chip px-sm inline-flex h-8 cursor-pointer items-center justify-center whitespace-nowrap",
+        "rounded-chip px-step-sm inline-flex h-8 cursor-pointer items-center justify-center whitespace-nowrap",
         "font-sans text-label text-text-secondary",
         "transition-standard",
         "hover:text-text-primary",
@@ -1315,7 +1390,7 @@ function Textarea({ className, invalid = false, ...props }) {
       "data-invalid": invalid || void 0,
       "aria-invalid": invalid || void 0,
       className: cn(
-        "min-h-24 w-full px-sm py-xs",
+        "min-h-24 w-full px-step-sm py-step-xs",
         "rounded-control border border-border bg-surface",
         "font-sans text-ui text-text-primary placeholder:text-text-muted",
         "transition-standard",
@@ -1339,7 +1414,7 @@ function ToastViewport({
     ToastPrimitive.Viewport,
     {
       className: cn(
-        "gap-sm p-lg fixed right-0 bottom-0 z-50 flex max-h-screen w-full flex-col-reverse",
+        "gap-step-sm p-step-lg fixed right-0 bottom-0 z-50 flex max-h-screen w-full flex-col-reverse",
         "sm:max-w-[420px] sm:flex-col",
         className
       ),
@@ -1349,7 +1424,7 @@ function ToastViewport({
 }
 var toast = cva(
   [
-    "gap-md p-md pr-10 relative flex w-full items-start justify-between",
+    "gap-step-md p-step-md pr-10 relative flex w-full items-start justify-between",
     "rounded-card border bg-surface shadow-standard",
     "font-sans text-ui text-text-secondary"
   ],
@@ -1400,6 +1475,76 @@ function ToastDescription({
 }) {
   return /* @__PURE__ */ jsx(ToastPrimitive.Description, { className: cn("max-w-measure", className), ...props });
 }
+var avisos = [];
+var suscriptores = /* @__PURE__ */ new Set();
+var contador = 0;
+function emitir(siguientes) {
+  avisos = siguientes;
+  for (const avisar of suscriptores) avisar();
+}
+var suscribirse = (avisar) => {
+  suscriptores.add(avisar);
+  return () => {
+    suscriptores.delete(avisar);
+  };
+};
+var leer = () => avisos;
+var VACIO = [];
+var enServidor = () => VACIO;
+function crear(mensaje, opciones = {}) {
+  contador += 1;
+  const id = `arrecife-toast-${contador}`;
+  const { description, ...resto } = opciones;
+  emitir([
+    ...avisos,
+    {
+      ...resto,
+      // El primer argumento es la línea principal. Si además llega `title`, el
+      // mensaje pasa a ser la descripción: así `toast('Guardado')` y
+      // `toast('No se pudo guardar', { title: 'Error' })` se leen igual de bien.
+      ...opciones.title ? { description: description ?? mensaje } : { title: mensaje, ...description === void 0 ? {} : { description } },
+      id,
+      abierto: true
+    }
+  ]);
+  return id;
+}
+function descartar(id) {
+  emitir(avisos.map((a) => id === void 0 || a.id === id ? { ...a, abierto: false } : a));
+}
+function retirar(id) {
+  emitir(avisos.filter((a) => a.id !== id));
+}
+var toast2 = Object.assign(crear, {
+  success: (mensaje, opciones = {}) => crear(mensaje, { ...opciones, variant: "success" }),
+  error: (mensaje, opciones = {}) => crear(mensaje, { ...opciones, variant: "error" }),
+  dismiss: descartar
+});
+function Toaster({ duration = 5e3, label = "Avisos" }) {
+  const lista = useSyncExternalStore(suscribirse, leer, enServidor);
+  return /* @__PURE__ */ jsxs(ToastProvider, { duration, label, children: [
+    lista.map(({ id, title, description, variant, duration: propio, action, abierto }) => /* @__PURE__ */ jsxs(
+      Toast,
+      {
+        open: abierto,
+        variant: variant ?? "neutral",
+        ...propio === void 0 ? {} : { duration: propio },
+        onOpenChange: (sigue) => {
+          if (!sigue) retirar(id);
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            title ? /* @__PURE__ */ jsx(ToastTitle, { children: title }) : null,
+            description ? /* @__PURE__ */ jsx(ToastDescription, { children: description }) : null
+          ] }),
+          action
+        ]
+      },
+      id
+    )),
+    /* @__PURE__ */ jsx(ToastViewport, {})
+  ] });
+}
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
@@ -1413,7 +1558,7 @@ function TooltipContent({
     {
       sideOffset,
       className: cn(
-        "z-50 px-sm py-1.5",
+        "z-50 px-step-sm py-1.5",
         "rounded-chip border-border bg-surface-raised shadow-standard border",
         "font-sans text-label text-text-primary",
         className
@@ -1439,6 +1584,7 @@ function ArticleCard({
   dateTime,
   readingMinutes,
   tags,
+  headingLevel = 3,
   className,
   ...props
 }) {
@@ -1449,14 +1595,22 @@ function ArticleCard({
       " min de lectura"
     ] }, "lectura") : null
   ].filter(Boolean);
-  return /* @__PURE__ */ jsx(Tarjeta, { className: cn("p-lg", className), ...props, children: /* @__PURE__ */ jsxs("article", { className: "gap-sm flex h-full flex-col", children: [
-    meta.length > 0 ? /* @__PURE__ */ jsx(Text, { variant: "meta", tone: "muted", as: "p", className: "gap-xs flex items-center", children: meta.map((m, i) => /* @__PURE__ */ jsxs("span", { className: "gap-xs flex items-center", children: [
+  return /* @__PURE__ */ jsx(Tarjeta, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
+    meta.length > 0 ? /* @__PURE__ */ jsx(Text, { variant: "meta", tone: "muted", as: "p", className: "gap-step-xs flex items-center", children: meta.map((m, i) => /* @__PURE__ */ jsxs("span", { className: "gap-step-xs flex items-center", children: [
       i > 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }) : null,
       m
     ] }, i)) }) : null,
-    /* @__PURE__ */ jsx(Text, { as: "h3", variant: "h3", className: "group-hover:text-accent transition-standard", children: title }),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: headingLevel === 2 ? "h2" : "h3",
+        variant: "h3",
+        className: "group-hover:text-accent transition-standard",
+        children: title
+      }
+    ),
     excerpt ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", className: "line-clamp-2", children: excerpt }) : null,
-    tags && tags.length > 0 ? /* @__PURE__ */ jsx("div", { className: "gap-xs mt-auto flex flex-wrap pt-sm", children: tags.map((t) => /* @__PURE__ */ jsx(CategoryBadge, { children: t }, t)) }) : null
+    tags && tags.length > 0 ? /* @__PURE__ */ jsx("div", { className: "gap-step-xs mt-auto flex flex-wrap pt-step-sm", children: tags.map((t) => /* @__PURE__ */ jsx(CategoryBadge, { children: t }, t)) }) : null
   ] }) });
 }
 var AVATAR = "size-[52px]";
@@ -1464,16 +1618,16 @@ function iniciales(nombre) {
   return nombre.split(/\s+/).slice(0, 2).map((p) => p[0] ?? "").join("").toUpperCase();
 }
 function AuthorCard({ name, role, src, bio, action, className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn(SUPERFICIE_TARJETA, "p-lg gap-md flex items-start", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(SUPERFICIE_TARJETA, "p-step-lg gap-step-md flex items-start", className), ...props, children: [
     /* @__PURE__ */ jsxs(Avatar, { className: cn(AVATAR, "shrink-0"), children: [
       src ? /* @__PURE__ */ jsx(AvatarImage, { src, alt: "" }) : null,
       /* @__PURE__ */ jsx(AvatarFallback, { children: iniciales(name) })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "gap-xs flex min-w-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex min-w-0 flex-1 flex-col", children: [
       /* @__PURE__ */ jsx(Text, { variant: "ui", as: "p", className: "font-medium", children: name }),
       role ? /* @__PURE__ */ jsx(Text, { variant: "chip", tone: "muted", as: "p", children: role }) : null,
-      bio ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", className: "mt-xs", children: bio }) : null,
-      action ? /* @__PURE__ */ jsx("div", { className: "mt-xs gap-sm flex flex-wrap items-center", children: action }) : null
+      bio ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", className: "mt-step-xs", children: bio }) : null,
+      action ? /* @__PURE__ */ jsx("div", { className: "mt-step-xs gap-step-sm flex flex-wrap items-center", children: action }) : null
     ] })
   ] });
 }
@@ -1592,7 +1746,7 @@ function Volumen({
   onSilenciar,
   onCambiarVolumen
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: "gap-xs hidden items-center sm:flex", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "gap-step-xs hidden items-center sm:flex", children: [
     /* @__PURE__ */ jsx(
       "button",
       {
@@ -1839,8 +1993,8 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             ...puntero
           }
         ),
-        /* @__PURE__ */ jsx("div", { className: "bg-surface/95 border-accent/25 border-t backdrop-blur-md", children: /* @__PURE__ */ jsxs("div", { className: "gap-sm px-md flex items-center py-5", children: [
-          /* @__PURE__ */ jsxs("div", { className: "gap-xs flex shrink-0 items-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "bg-surface/95 border-accent/25 border-t backdrop-blur-md", children: /* @__PURE__ */ jsxs("div", { className: "gap-step-sm px-step-md flex items-center py-5", children: [
+          /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex shrink-0 items-center", children: [
             /* @__PURE__ */ jsx(Onda, { grosor: "w-[2px]", alto: "h-4", sonando: isPlaying }),
             /* @__PURE__ */ jsx("span", { className: "text-eyebrow font-mono text-accent hidden uppercase sm:block", children: "Narraci\xF3n" })
           ] }),
@@ -1857,7 +2011,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             /* @__PURE__ */ jsx(
               BotonPlay,
               {
-                className: "rounded-pill px-sm gap-xs flex items-center py-1.5",
+                className: "rounded-pill px-step-sm gap-step-xs flex items-center py-1.5",
                 tamano: "w-4 h-4",
                 etiqueta: etiquetaPlay,
                 onAlternar: togglePlay,
@@ -1882,7 +2036,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("audio", { ref: audioRef, src, preload: "metadata" }),
       /* @__PURE__ */ jsxs("div", { ref: staticRef, children: [
-        /* @__PURE__ */ jsxs("div", { className: "gap-sm mb-md flex items-center", children: [
+        /* @__PURE__ */ jsxs("div", { className: "gap-step-sm mb-step-md flex items-center", children: [
           /* @__PURE__ */ jsx(Onda, { grosor: "w-[3px]", alto: "h-5", sonando: isPlaying }),
           /* @__PURE__ */ jsx("span", { className: "text-eyebrow font-mono text-accent uppercase", children: "Narraci\xF3n de audio" }),
           /* @__PURE__ */ jsxs("span", { className: "text-chip font-mono text-text-muted ml-auto tabular-nums", children: [
@@ -1891,13 +2045,13 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             formatTime(duration)
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "mb-md", children: /* @__PURE__ */ jsx(BarraProgreso, { alto: "h-1.5", perilla: 14, progreso: progress, ...puntero }) }),
-        /* @__PURE__ */ jsxs("div", { className: "gap-sm flex items-center", children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-step-md", children: /* @__PURE__ */ jsx(BarraProgreso, { alto: "h-1.5", perilla: 14, progreso: progress, ...puntero }) }),
+        /* @__PURE__ */ jsxs("div", { className: "gap-step-sm flex items-center", children: [
           /* @__PURE__ */ jsx(BotonSalto, { segundos: -15, className: "p-2", tamano: "w-6 h-6", onSaltar: skip }),
           /* @__PURE__ */ jsx(
             BotonPlay,
             {
-              className: "rounded-pill px-lg gap-xs text-ui flex items-center py-2 font-medium",
+              className: "rounded-pill px-step-lg gap-step-xs text-ui flex items-center py-2 font-medium",
               tamano: "w-4 h-4",
               etiqueta: etiquetaPlay,
               texto: etiquetaPlay,
@@ -1906,7 +2060,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             }
           ),
           /* @__PURE__ */ jsx(BotonSalto, { segundos: 15, className: "p-2", tamano: "w-6 h-6", onSaltar: skip }),
-          /* @__PURE__ */ jsxs("div", { className: "gap-sm ml-auto flex items-center", children: [
+          /* @__PURE__ */ jsxs("div", { className: "gap-step-sm ml-auto flex items-center", children: [
             /* @__PURE__ */ jsx(
               BotonVelocidad,
               {
@@ -1936,8 +2090,8 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("audio", { ref: audioRef, src, preload: "metadata" }),
       /* @__PURE__ */ jsxs("div", { ref: staticRef, className: "w-full", children: [
-        /* @__PURE__ */ jsx("div", { className: "mb-xs", children: /* @__PURE__ */ jsx(BarraProgreso, { alto: "h-1.5", perilla: 12, progreso: progress, ...puntero }) }),
-        /* @__PURE__ */ jsxs("div", { className: "text-chip font-mono text-text-muted mb-sm flex justify-between", children: [
+        /* @__PURE__ */ jsx("div", { className: "mb-step-xs", children: /* @__PURE__ */ jsx(BarraProgreso, { alto: "h-1.5", perilla: 12, progreso: progress, ...puntero }) }),
+        /* @__PURE__ */ jsxs("div", { className: "text-chip font-mono text-text-muted mb-step-sm flex justify-between", children: [
           /* @__PURE__ */ jsx("span", { children: formatTime(currentTime) }),
           /* @__PURE__ */ jsx("span", { children: formatTime(duration) })
         ] }),
@@ -1969,16 +2123,16 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
       flotanteJsx
     ] });
   }
-  return /* @__PURE__ */ jsxs("div", { className: "bg-surface rounded-control border-border p-md w-full border", children: [
+  return /* @__PURE__ */ jsxs("div", { className: "bg-surface rounded-control border-border p-step-md w-full border", children: [
     /* @__PURE__ */ jsx("audio", { ref: audioRef, src, preload: "metadata" }),
-    title ? /* @__PURE__ */ jsx("p", { className: "text-ui font-sans text-text-secondary mb-sm truncate", children: title }) : null,
-    /* @__PURE__ */ jsx("div", { className: "mb-sm", children: /* @__PURE__ */ jsx(BarraProgreso, { alto: "h-2", perilla: 16, progreso: progress, ...puntero }) }),
-    /* @__PURE__ */ jsxs("div", { className: "text-chip font-mono text-text-muted mb-sm flex justify-between", children: [
+    title ? /* @__PURE__ */ jsx("p", { className: "text-ui font-sans text-text-secondary mb-step-sm truncate", children: title }) : null,
+    /* @__PURE__ */ jsx("div", { className: "mb-step-sm", children: /* @__PURE__ */ jsx(BarraProgreso, { alto: "h-2", perilla: 16, progreso: progress, ...puntero }) }),
+    /* @__PURE__ */ jsxs("div", { className: "text-chip font-mono text-text-muted mb-step-sm flex justify-between", children: [
       /* @__PURE__ */ jsx("span", { children: formatTime(currentTime) }),
       /* @__PURE__ */ jsx("span", { children: formatTime(duration) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "gap-xs flex items-center", children: [
+      /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex items-center", children: [
         /* @__PURE__ */ jsx(BotonSalto, { segundos: -15, className: "p-2", tamano: "w-5 h-5", onSaltar: skip }),
         /* @__PURE__ */ jsx(
           BotonPlay,
@@ -1992,7 +2146,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
         ),
         /* @__PURE__ */ jsx(BotonSalto, { segundos: 15, className: "p-2", tamano: "w-5 h-5", onSaltar: skip })
       ] }),
-      /* @__PURE__ */ jsxs("div", { className: "gap-sm flex items-center", children: [
+      /* @__PURE__ */ jsxs("div", { className: "gap-step-sm flex items-center", children: [
         /* @__PURE__ */ jsx(
           BotonVelocidad,
           {
@@ -2020,11 +2174,11 @@ function Blockquote({ children, author, source, className, ...props }) {
   return /* @__PURE__ */ jsxs(
     "blockquote",
     {
-      className: cn("border-accent pl-md my-lg border-l-2", className),
+      className: cn("border-accent pl-step-md my-step-lg border-l-2", className),
       ...props,
       children: [
         /* @__PURE__ */ jsx(Text, { variant: "body", tone: "secondary", children }),
-        author || source ? /* @__PURE__ */ jsx("footer", { className: "mt-sm", children: /* @__PURE__ */ jsxs(Text, { variant: "label", tone: "muted", as: "span", children: [
+        author || source ? /* @__PURE__ */ jsx("footer", { className: "mt-step-sm", children: /* @__PURE__ */ jsxs(Text, { variant: "label", tone: "muted", as: "span", children: [
           author ? /* @__PURE__ */ jsx("cite", { className: "not-italic", children: author }) : null,
           author && source ? " \xB7 " : null,
           source
@@ -2043,11 +2197,11 @@ function Breadcrumb({
   ...props
 }) {
   const enlace = (href, contenido) => linkAsChild ? /* @__PURE__ */ jsx(Slot, { className: ENLACE, children: linkAsChild({ href, children: contenido }) }) : /* @__PURE__ */ jsx("a", { href, className: ENLACE, children: contenido });
-  return /* @__PURE__ */ jsx("nav", { "aria-label": "Ruta", className: cn("font-mono text-meta text-text-muted", className), ...props, children: /* @__PURE__ */ jsxs("ol", { className: "gap-xs flex flex-wrap items-center", children: [
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Ruta", className: cn("font-mono text-meta text-text-muted", className), ...props, children: /* @__PURE__ */ jsxs("ol", { className: "gap-step-xs flex flex-wrap items-center", children: [
     /* @__PURE__ */ jsx("li", { children: enlace(homeHref, /* @__PURE__ */ jsx("span", { "aria-label": homeLabel, children: "~" })) }),
     items.map((item2, i) => {
       const ultimo = i === items.length - 1;
-      return /* @__PURE__ */ jsxs("li", { className: "gap-xs flex items-center", children: [
+      return /* @__PURE__ */ jsxs("li", { className: "gap-step-xs flex items-center", children: [
         /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-border", children: "/" }),
         item2.href && !ultimo ? enlace(item2.href, item2.label) : /* @__PURE__ */ jsx("span", { "aria-current": ultimo ? "page" : void 0, className: "text-text-secondary", children: item2.label })
       ] }, i);
@@ -2077,7 +2231,7 @@ function CodeBlock({ children, language, copyText, className, ...props }) {
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "border-hairline px-sm flex items-center justify-between border-b py-1.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "border-hairline px-step-sm flex items-center justify-between border-b py-1.5", children: [
           /* @__PURE__ */ jsxs("span", { className: "text-eyebrow font-mono text-text-muted uppercase", children: [
             /* @__PURE__ */ jsx("span", { className: "text-accent", children: "\u276F" }),
             " ",
@@ -2091,7 +2245,7 @@ function CodeBlock({ children, language, copyText, className, ...props }) {
               "aria-label": copiado ? "C\xF3digo copiado" : "Copiar c\xF3digo",
               "aria-live": "polite",
               className: cn(
-                "gap-xs rounded-chip flex items-center px-2 py-1",
+                "gap-step-xs rounded-chip flex items-center px-2 py-1",
                 "text-label font-mono text-text-muted cursor-pointer",
                 "transition-standard hover:bg-surface hover:text-text-primary",
                 "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
@@ -2103,7 +2257,7 @@ function CodeBlock({ children, language, copyText, className, ...props }) {
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsx("pre", { className: "p-md font-mono text-meta text-text-primary overflow-x-auto leading-relaxed", children })
+        /* @__PURE__ */ jsx("pre", { className: "p-step-md font-mono text-meta text-text-primary overflow-x-auto leading-relaxed", children })
       ]
     }
   );
@@ -2117,15 +2271,15 @@ function CourseCard({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Tarjeta, { className: cn("p-lg", className), ...props, children: /* @__PURE__ */ jsxs("article", { className: "gap-sm flex h-full flex-col", children: [
+  return /* @__PURE__ */ jsx(Tarjeta, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
     status ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge, { variant: "warm", children: status }) }) : null,
     /* @__PURE__ */ jsx(Text, { as: "h3", variant: "h3", className: "group-hover:text-accent transition-standard", children: title }),
     summary ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", className: "line-clamp-3", children: summary }) : null,
-    meta && meta.length > 0 ? /* @__PURE__ */ jsx(Text, { variant: "label", tone: "muted", as: "p", className: "gap-xs flex flex-wrap items-center", children: meta.map((m, i) => /* @__PURE__ */ jsxs("span", { className: "gap-xs flex items-center", children: [
+    meta && meta.length > 0 ? /* @__PURE__ */ jsx(Text, { variant: "label", tone: "muted", as: "p", className: "gap-step-xs flex flex-wrap items-center", children: meta.map((m, i) => /* @__PURE__ */ jsxs("span", { className: "gap-step-xs flex items-center", children: [
       i > 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }) : null,
       m
     ] }, i)) }) : null,
-    typeof progress === "number" ? /* @__PURE__ */ jsxs("div", { className: "gap-xs mt-auto flex flex-col pt-sm", children: [
+    typeof progress === "number" ? /* @__PURE__ */ jsxs("div", { className: "gap-step-xs mt-auto flex flex-col pt-step-sm", children: [
       /* @__PURE__ */ jsx(Progress, { value: progress, tone: "warm", label: `Progreso del curso: ${progress}%` }),
       /* @__PURE__ */ jsxs(Text, { variant: "label", tone: "muted", as: "p", children: [
         progress,
@@ -2147,13 +2301,13 @@ function EmptyState({
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn(SUPERFICIE_TARJETA, "p-lg gap-sm flex flex-col items-center text-center", className),
+      className: cn(SUPERFICIE_TARJETA, "p-step-lg gap-step-sm flex flex-col items-center text-center", className),
       ...props,
       children: [
         /* @__PURE__ */ jsx(CaraDeMascota, { expresion, className: CARA, basePath }),
         /* @__PURE__ */ jsx(Text, { variant: "ui", as: "p", className: "font-medium", children: title }),
         description ? /* @__PURE__ */ jsx(Text, { variant: "label", tone: "muted", as: "p", className: "max-w-measure font-normal", children: description }) : null,
-        action ? /* @__PURE__ */ jsx("div", { className: "mt-xs", children: action }) : null
+        action ? /* @__PURE__ */ jsx("div", { className: "mt-step-xs", children: action }) : null
       ]
     }
   );
@@ -2162,11 +2316,13 @@ function Footer({
   social,
   year = (/* @__PURE__ */ new Date()).getFullYear(),
   children,
+  brand: brand2,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx("footer", { className: cn("border-hairline w-full border-t", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "max-w-wide px-md py-xl gap-lg mx-auto flex flex-col", children: [
-    children ? /* @__PURE__ */ jsx("div", { className: "gap-md flex flex-wrap items-center", children }) : null,
+  return /* @__PURE__ */ jsx("footer", { className: cn("border-hairline w-full border-t", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "max-w-wide px-step-md py-step-xl gap-step-lg mx-auto flex flex-col", children: [
+    brand2 ? /* @__PURE__ */ jsx("div", { className: "flex items-center", children: brand2 }) : null,
+    children ? /* @__PURE__ */ jsx("div", { className: "gap-step-md flex flex-wrap items-center", children }) : null,
     social && social.length > 0 ? (
       // 18px de separación, del documento. No es un escalón de `spacing`:
       // es el ritmo de una fila de iconos, no el de una página.
@@ -2216,27 +2372,55 @@ function Hero({
   action,
   pose,
   basePath,
+  variant = "cabecera",
   className,
   ...props
 }) {
+  const centrado = variant === "centrado";
   return /* @__PURE__ */ jsxs(
     "section",
     {
       className: cn(
         "degradado-hero rounded-panel border-hairline relative overflow-hidden border",
         // 44 arriba, 40 a los lados y abajo. Del documento.
-        "px-xl pt-[44px] pb-xl",
+        "px-step-xl pt-[44px] pb-step-xl",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "gap-md flex flex-col md:max-w-[62%]", children: [
-          eyebrow ? /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: eyebrow }) : null,
-          /* @__PURE__ */ jsx(Text, { as: "h1", variant: "display", children: title }),
-          description ? /* @__PURE__ */ jsx(Text, { variant: "body", tone: "secondary", children: description }) : null,
-          action ? /* @__PURE__ */ jsx("div", { className: "gap-sm mt-xs flex flex-wrap items-center", children: action }) : null
-        ] }),
-        pose ? /* @__PURE__ */ jsx(
+        centrado && pose ? /* @__PURE__ */ jsx(
+          Mascota,
+          {
+            pose,
+            basePath,
+            className: "mb-step-md mx-auto w-48 md:w-56"
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "gap-step-md flex flex-col",
+              centrado ? "items-center text-center" : "md:max-w-[62%]"
+            ),
+            children: [
+              eyebrow ? /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: eyebrow }) : null,
+              /* @__PURE__ */ jsx(Text, { as: "h1", variant: "display", children: title }),
+              description ? /* @__PURE__ */ jsx(Text, { variant: "body", tone: "secondary", children: description }) : null,
+              action ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "gap-step-sm mt-step-xs flex flex-wrap items-center",
+                    centrado && "justify-center"
+                  ),
+                  children: action
+                }
+              ) : null
+            ]
+          }
+        ),
+        !centrado && pose ? /* @__PURE__ */ jsx(
           Mascota,
           {
             pose,
@@ -2244,7 +2428,7 @@ function Hero({
             className: cn(
               // En móvil, en el flujo y bajo los botones. Desde md, sangrando por
               // la esquina inferior derecha.
-              "mt-lg mx-auto w-40",
+              "mt-step-lg mx-auto w-40",
               "md:mt-0 md:absolute md:right-0 md:-bottom-4 md:mx-0 md:w-64"
             )
           }
@@ -2266,11 +2450,11 @@ function LinkRow({
   return /* @__PURE__ */ jsx(
     Tarjeta,
     {
-      className: cn("px-md py-sm", className),
+      className: cn("px-step-md py-step-sm", className),
       ...props,
       rel,
       ...target ? { target } : {},
-      children: /* @__PURE__ */ jsxs("span", { className: "gap-sm flex items-center", children: [
+      children: /* @__PURE__ */ jsxs("span", { className: "gap-step-sm flex items-center", children: [
         icon ? /* @__PURE__ */ jsx("span", { className: "text-text-muted group-hover:text-accent transition-standard shrink-0 text-2xl", children: icon }) : null,
         /* @__PURE__ */ jsxs("span", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsx(Text, { as: "span", variant: "ui", className: "group-hover:text-accent transition-standard block font-medium", children: name }),
@@ -2300,10 +2484,10 @@ function Nav({ brand: brand2, children, actions, className, ...props }) {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxs("div", { className: "max-w-wide px-md h-nav gap-lg mx-auto flex items-center", children: [
+      children: /* @__PURE__ */ jsxs("div", { className: "max-w-wide px-step-md h-nav gap-step-lg mx-auto flex items-center", children: [
         brand2 ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: brand2 }) : null,
-        children ? /* @__PURE__ */ jsx("nav", { "aria-label": "Principal", className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx("ul", { className: "gap-md flex items-center", children }) }) : /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-        actions ? /* @__PURE__ */ jsx("div", { className: "gap-sm flex shrink-0 items-center", children: actions }) : null
+        children ? /* @__PURE__ */ jsx("nav", { "aria-label": "Principal", className: "min-w-0 flex-1", children: /* @__PURE__ */ jsx("ul", { className: "gap-step-md flex items-center", children }) }) : /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+        actions ? /* @__PURE__ */ jsx("div", { className: "gap-step-sm flex shrink-0 items-center", children: actions }) : null
       ] })
     }
   );
@@ -2341,6 +2525,10 @@ function NewsletterForm({
   submitLabel = "Suscribirme",
   placeholder = "tu@correo.dev",
   fieldLabel = "Correo electr\xF3nico",
+  nameField = false,
+  nameLabel = "Nombre",
+  namePlaceholder = "C\xF3mo te llamas",
+  nameInputProps,
   className,
   ...props
 }) {
@@ -2351,53 +2539,74 @@ function NewsletterForm({
     evento.preventDefault();
     const datos = new FormData(evento.currentTarget);
     const correo = String(datos.get("email") ?? "");
-    onSubmitEmail?.(correo);
+    const nombre = nameField ? String(datos.get("name") ?? "") : void 0;
+    onSubmitEmail?.(correo, nombre);
   }
+  const boton = /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "submit",
+      variant: "conversion",
+      loading: enviando,
+      className: cn("disabled:opacity-60", nameField && "sm:self-start"),
+      children: submitLabel
+    }
+  );
   return /* @__PURE__ */ jsxs(
     "section",
     {
       className: cn(
-        "degradado-seccion rounded-panel border-hairline p-lg gap-md flex flex-col border",
+        "degradado-seccion rounded-panel border-hairline p-step-lg gap-step-md flex flex-col border",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "gap-xs flex flex-col", children: [
+        /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex flex-col", children: [
           /* @__PURE__ */ jsx(Text, { as: "h2", variant: "h3", children: title }),
           description ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", children: description }) : null
         ] }),
-        /* @__PURE__ */ jsxs("form", { onSubmit: enviar, className: "gap-sm flex flex-col sm:flex-row sm:items-end", noValidate: true, children: [
-          /* @__PURE__ */ jsxs("div", { className: "gap-xs flex flex-1 flex-col", children: [
-            /* @__PURE__ */ jsx(Label2, { htmlFor: id, children: fieldLabel }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                id,
-                name: "email",
-                type: "email",
-                autoComplete: "email",
-                required: true,
-                placeholder,
-                disabled: enviando,
-                invalid: error,
-                "aria-describedby": state === "exito" || error ? `${id}-aviso` : void 0
-              }
-            )
+        /* @__PURE__ */ jsxs("form", { onSubmit: enviar, className: "gap-step-sm flex flex-col", noValidate: true, children: [
+          /* @__PURE__ */ jsxs("div", { className: "gap-step-sm flex flex-col sm:flex-row sm:items-end", children: [
+            nameField ? /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex flex-1 flex-col", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-nombre`, children: nameLabel }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: `${id}-nombre`,
+                  name: "name",
+                  type: "text",
+                  autoComplete: "name",
+                  required: true,
+                  placeholder: namePlaceholder,
+                  disabled: enviando,
+                  ...nameInputProps
+                }
+              )
+            ] }) : null,
+            /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex flex-1 flex-col", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: id, children: fieldLabel }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id,
+                  name: "email",
+                  type: "email",
+                  autoComplete: "email",
+                  required: true,
+                  placeholder,
+                  disabled: enviando,
+                  invalid: error,
+                  "aria-describedby": state === "exito" || error ? `${id}-aviso` : void 0
+                }
+              )
+            ] }),
+            nameField ? null : boton
           ] }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              type: "submit",
-              variant: "conversion",
-              loading: enviando,
-              className: "disabled:opacity-60",
-              children: submitLabel
-            }
-          )
+          nameField ? boton : null
         ] }),
         state === "exito" ? /* @__PURE__ */ jsx(Alert, { id: `${id}-aviso`, variant: "success", enfasis: "fuerte", children: successMessage }) : null,
         error ? /* @__PURE__ */ jsx(Alert, { id: `${id}-aviso`, variant: "error", enfasis: "fuerte", children: errorMessage }) : null,
-        disclaimer ? /* @__PURE__ */ jsxs("div", { className: "gap-sm flex items-center", children: [
+        disclaimer ? /* @__PURE__ */ jsxs("div", { className: "gap-step-sm flex items-center", children: [
           expresion ? /* @__PURE__ */ jsx(CaraDeMascota, { expresion, basePath, className: "w-10 max-w-none" }) : null,
           /* @__PURE__ */ jsx(Text, { variant: "label", tone: "muted", as: "p", className: "font-normal", children: disclaimer })
         ] }) : null
@@ -2405,11 +2614,11 @@ function NewsletterForm({
     }
   );
 }
-var cabecera = cva("gap-sm flex flex-col", {
+var cabecera = cva("gap-step-sm flex flex-col", {
   variants: {
     size: {
       display: "py-section",
-      page: "py-xl"
+      page: "py-step-xl"
     }
   },
   defaultVariants: { size: "page" }
@@ -2428,9 +2637,65 @@ function PageHeader({
     eyebrow ? /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: eyebrow }) : null,
     /* @__PURE__ */ jsx(Text, { as, variant: size2 === "display" ? "display" : "h1", className: "max-w-measure", children: title }),
     description ? /* @__PURE__ */ jsx(Text, { variant: "body", tone: "secondary", children: description }) : null,
-    action ? /* @__PURE__ */ jsx("div", { className: "gap-sm mt-sm flex flex-wrap items-center", children: action }) : null
+    action ? /* @__PURE__ */ jsx("div", { className: "gap-step-sm mt-step-sm flex flex-wrap items-center", children: action }) : null
   ] });
 }
+function ScrollingProgressBar({
+  target,
+  tone = "accent",
+  sticky = true,
+  className,
+  ...props
+}) {
+  const [avance, setAvance] = useState(0);
+  const pendiente = useRef(0);
+  useEffect(() => {
+    const medir = () => {
+      pendiente.current = 0;
+      const elemento = target?.current;
+      const inicio = elemento ? elemento.getBoundingClientRect().top + scrollY : 0;
+      const alto = elemento ? elemento.offsetHeight : document.documentElement.scrollHeight;
+      const recorrible = alto - innerHeight;
+      if (recorrible <= 0) {
+        setAvance(scrollY >= inicio ? 100 : 0);
+        return;
+      }
+      const recorrido = scrollY - inicio;
+      setAvance(Math.min(100, Math.max(0, recorrido / recorrible * 100)));
+    };
+    const alMoverse = () => {
+      if (pendiente.current) return;
+      pendiente.current = requestAnimationFrame(medir);
+    };
+    medir();
+    addEventListener("scroll", alMoverse, { passive: true });
+    addEventListener("resize", alMoverse);
+    return () => {
+      if (pendiente.current) cancelAnimationFrame(pendiente.current);
+      removeEventListener("scroll", alMoverse);
+      removeEventListener("resize", alMoverse);
+    };
+  }, [target]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "h-1 w-full overflow-hidden",
+        sticky && "sticky top-0 z-40",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("h-full", tone === "warm" ? "bg-warm" : "bg-accent"),
+          style: { width: `${avance}%` }
+        }
+      )
+    }
+  );
+}
 function SidebarItem({
   active = false,
   asChild = false,
@@ -2445,7 +2710,7 @@ function SidebarItem({
     {
       "aria-current": active ? "page" : void 0,
       className: cn(
-        "rounded-chip px-sm gap-xs flex cursor-pointer items-center py-1.5",
+        "rounded-chip px-step-sm gap-step-xs flex cursor-pointer items-center py-1.5",
         "font-mono text-meta transition-standard",
         "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
         // El activo es fondo `surfaceRaised` y tinta primaria, igual que
@@ -2479,14 +2744,14 @@ function SidebarNav({
     {
       "aria-label": typeof title === "string" ? title : "Administraci\xF3n",
       className: cn(
-        "border-hairline bg-surface p-sm gap-sm flex h-full flex-col border-r",
+        "border-hairline bg-surface p-step-sm gap-step-sm flex h-full flex-col border-r",
         className
       ),
       ...props,
       children: [
-        title ? /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", className: "px-sm", children: title }) : null,
+        title ? /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", className: "px-step-sm", children: title }) : null,
         /* @__PURE__ */ jsx("ul", { className: "gap-0.5 flex flex-1 flex-col", children }),
-        pie.length > 0 ? /* @__PURE__ */ jsx(Text, { variant: "meta", tone: "muted", as: "p", className: "border-hairline px-sm pt-sm border-t", children: pie.map((p, i) => /* @__PURE__ */ jsxs("span", { children: [
+        pie.length > 0 ? /* @__PURE__ */ jsx(Text, { variant: "meta", tone: "muted", as: "p", className: "border-hairline px-step-sm pt-step-sm border-t", children: pie.map((p, i) => /* @__PURE__ */ jsxs("span", { children: [
           i > 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7 " }) : null,
           p
         ] }, i)) }) : null
@@ -2495,7 +2760,7 @@ function SidebarNav({
   );
 }
 function Stat({ value, label, tone = "neutral", progress, className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn(SUPERFICIE_TARJETA, "p-lg gap-xs flex flex-col", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(SUPERFICIE_TARJETA, "p-step-lg gap-step-xs flex flex-col", className), ...props, children: [
     /* @__PURE__ */ jsx(Text, { variant: "stat", as: "p", tone: tone === "alerta" ? "warm" : "accent", children: value }),
     /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", children: label }),
     typeof progress === "number" ? /* @__PURE__ */ jsx(
@@ -2504,7 +2769,7 @@ function Stat({ value, label, tone = "neutral", progress, className, ...props })
         value: progress,
         tone: tone === "alerta" ? "warm" : "accent",
         label: `${label}: ${progress}%`,
-        className: "mt-sm"
+        className: "mt-step-sm"
       }
     ) : null
   ] });
@@ -2516,6 +2781,7 @@ function TalkCard({
   dateTime,
   location,
   status,
+  description,
   className,
   ...props
 }) {
@@ -2523,18 +2789,49 @@ function TalkCard({
     date ? /* @__PURE__ */ jsx("time", { dateTime, children: date }, "fecha") : null,
     location ? /* @__PURE__ */ jsx("span", { children: location }, "lugar") : null
   ].filter(Boolean);
-  return /* @__PURE__ */ jsx(Tarjeta, { className: cn("p-lg", className), ...props, children: /* @__PURE__ */ jsxs("article", { className: "gap-sm flex h-full flex-col", children: [
-    /* @__PURE__ */ jsxs("div", { className: "gap-sm flex items-start justify-between", children: [
+  return /* @__PURE__ */ jsx(Tarjeta, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
+    /* @__PURE__ */ jsxs("div", { className: "gap-step-sm flex items-start justify-between", children: [
       /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: event }),
       status ? /* @__PURE__ */ jsx(Badge, { variant: "neutral", children: status }) : null
     ] }),
     /* @__PURE__ */ jsx(Text, { as: "h3", variant: "h3", className: "group-hover:text-accent transition-standard", children: title }),
-    pie.length > 0 ? /* @__PURE__ */ jsx(Text, { variant: "label", tone: "muted", as: "p", className: "gap-xs mt-auto flex items-center pt-sm", children: pie.map((m, i) => /* @__PURE__ */ jsxs("span", { className: "gap-xs flex items-center", children: [
+    description ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", className: "line-clamp-2", children: description }) : null,
+    pie.length > 0 ? /* @__PURE__ */ jsx(Text, { variant: "label", tone: "muted", as: "p", className: "gap-step-xs mt-auto flex items-center pt-step-sm", children: pie.map((m, i) => /* @__PURE__ */ jsxs("span", { className: "gap-step-xs flex items-center", children: [
       i > 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }) : null,
       m
     ] }, i)) }) : null
   ] }) });
 }
+function ThemeToggle({
+  label = "Cambiar de tema",
+  onThemeChange,
+  variant = "secondary",
+  size: size2 = "icon",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      variant,
+      size: size2,
+      "aria-label": label,
+      className: cn("[&_svg]:size-[19px]", className),
+      onClick: () => onThemeChange?.(alternarTema()),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Sol, { className: "light:hidden" }),
+        /* @__PURE__ */ jsx(Luna, { className: "hidden light:block" })
+      ]
+    }
+  );
+}
+function useTema() {
+  return useSyncExternalStore(suscribirse2, temaActual, servidor);
+}
+var suscribirse2 = (avisar) => escucharTema(() => avisar());
+var servidor = () => "dark";
 function TableOfContents({
   items,
   title = "En esta p\xE1gina",
@@ -2543,17 +2840,21 @@ function TableOfContents({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs("nav", { "aria-label": typeof title === "string" ? title : "En esta p\xE1gina", className: cn("gap-sm flex flex-col", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("nav", { "aria-label": typeof title === "string" ? title : "En esta p\xE1gina", className: cn("gap-step-sm flex flex-col", className), ...props, children: [
     /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", children: title }),
-    /* @__PURE__ */ jsx("ul", { className: "border-hairline gap-xs flex flex-col border-l", children: items.map((item2) => {
+    /* @__PURE__ */ jsx("ul", { className: "border-hairline gap-step-xs flex flex-col border-l", children: items.map((item2) => {
       const activo = item2.href === activeHref;
       const clases = cn(
-        "px-sm -ml-px block border-l",
+        "px-step-sm -ml-px block border-l",
         "font-sans text-label transition-standard",
         "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
         "cursor-pointer",
-        item2.nested && "pl-lg",
-        activo ? "border-accent text-accent" : "border-transparent text-text-secondary hover:text-text-primary"
+        item2.nested && "pl-step-lg",
+        "border-transparent text-text-secondary hover:text-text-primary",
+        // El hover del activo se declara con las dos variantes juntas para
+        // que gane al `hover:` de arriba por especificidad y no por el orden
+        // en que Tailwind decida emitir las reglas.
+        "aria-[current]:border-accent aria-[current]:text-accent aria-[current]:hover:text-accent"
       );
       return /* @__PURE__ */ jsx("li", { children: linkAsChild ? /* @__PURE__ */ jsx(Slot, { className: clases, "aria-current": activo ? "location" : void 0, children: linkAsChild({ href: item2.href, children: item2.label }) }) : /* @__PURE__ */ jsx("a", { href: item2.href, className: clases, "aria-current": activo ? "location" : void 0, children: item2.label }) }, item2.href);
     }) })
@@ -2621,4 +2922,4 @@ var Correo = (props) => /* @__PURE__ */ jsxs(Funcional, { ...props, children: [
   /* @__PURE__ */ jsx("path", { d: "m3.5 7.5 7.4 5.2a2 2 0 0 0 2.2 0l7.4-5.2" })
 ] });
 
-export { Alert, ArticleCard, AudioPlayer, AuthorCard, Avatar, AvatarFallback, AvatarImage, Badge, Blockquote, Breadcrumb, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryBadge, Checkbox, Code, CodeBlock, CourseCard, DateField, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, Footer, FooterLink, HOVER_TARJETA, Hero, Input, Label2 as Label, LinkRow, MetricBadge, Nav, NavItem, NewsletterForm, PageHeader, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup2 as RadioGroup, RadioGroupItem, SUPERFICIE_TARJETA, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarItem, SidebarNav, Skeleton, Stat, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TalkCard, Text, Textarea, Toast, ToastAction, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, categoria as categoryBadgeVariants, social_exports as social, texto as textVariants };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, ArticleCard, AudioPlayer, AuthorCard, Avatar, AvatarFallback, AvatarImage, Badge, Blockquote, Breadcrumb, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryBadge, Checkbox, Code, CodeBlock, CourseCard, DateField, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, Footer, FooterLink, HOVER_TARJETA, Hero, Input, LinkRow, MetricBadge, Nav, NavItem, NewsletterForm, PageHeader, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup2 as RadioGroup, RadioGroupItem, SUPERFICIE_TARJETA, ScrollingProgressBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarItem, SidebarNav, Skeleton, Stat, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TalkCard, Textarea, ThemeToggle, Toast, ToastAction, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, categoria as categoryBadgeVariants, social_exports as social, toast2 as toast, useTema };