@eduardoalvarez/arrecife 0.2.0 → 0.4.0

package/dist/index.cjs

@@ -1,11 +1,13 @@
 'use strict';
 
-var classVarianceAuthority = require('class-variance-authority');
+var AccordionPrimitive = require('@radix-ui/react-accordion');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
-var AvatarPrimitive = require('@radix-ui/react-avatar');
+var classVarianceAuthority = require('class-variance-authority');
+var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var reactSlot = require('@radix-ui/react-slot');
+var AvatarPrimitive = require('@radix-ui/react-avatar');
 var locale = require('date-fns/locale');
 var reactDayPicker = require('react-day-picker');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
@@ -20,8 +22,8 @@ var SeparatorPrimitive = require('@radix-ui/react-separator');
 var SwitchPrimitive = require('@radix-ui/react-switch');
 var TabsPrimitive = require('@radix-ui/react-tabs');
 var ToastPrimitive = require('@radix-ui/react-toast');
-var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var react = require('react');
+var TooltipPrimitive = require('@radix-ui/react-tooltip');
 
 function _interopNamespace(e) {
   if (e && e.__esModule) return e;
@@ -41,6 +43,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
+var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
+var AlertDialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(AlertDialogPrimitive);
 var AvatarPrimitive__namespace = /*#__PURE__*/_interopNamespace(AvatarPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
@@ -220,11 +224,11 @@ var control = {
   icon: 42
 };
 var spacing = {
-  xs: 8,
-  sm: 12,
-  md: 16,
-  lg: 26,
-  xl: 40,
+  stepXs: 8,
+  stepSm: 12,
+  stepMd: 16,
+  stepLg: 26,
+  stepXl: 40,
   section: 96
 };
 var size = {
@@ -249,6 +253,10 @@ var sintaxis = {
   /** `markup.deleted`, `invalid`. */
   invalido: dark.error
 };
+var series = {
+  dark: [dark.accent, dark.warm, brand.body, dark.textMuted],
+  light: [light.accent, light.warm, brand.body, light.textMuted]
+};
 var profundo = "#0D2129";
 var gradient = {
   dark: {
@@ -299,15 +307,99 @@ var tokens = {
   size,
   gradient,
   sintaxis,
+  series,
   shadow,
   motion,
   tagline,
   naming
 };
+
+// src/tema/index.ts
+var TEMA_CLAVE = "arrecife-tema";
+var TEMA_ATRIBUTO = "data-theme";
+var TEMA_EVENTO = "arrecife:tema";
+var esTema = (valor) => valor === "dark" || valor === "light";
+function temaActual() {
+  if (typeof document === "undefined") return "dark";
+  const puesto = document.documentElement.getAttribute(TEMA_ATRIBUTO);
+  return esTema(puesto) ? puesto : "dark";
+}
+function temaGuardado() {
+  if (typeof localStorage === "undefined") return null;
+  try {
+    const valor = localStorage.getItem(TEMA_CLAVE);
+    return esTema(valor) ? valor : null;
+  } catch {
+    return null;
+  }
+}
+function temaPreferido() {
+  const guardado = temaGuardado();
+  if (guardado) return guardado;
+  if (typeof matchMedia === "undefined") return "dark";
+  return matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
+}
+function aplicarTema(tema, persistir = true) {
+  if (typeof document === "undefined") return;
+  document.documentElement.setAttribute(TEMA_ATRIBUTO, tema);
+  document.documentElement.style.colorScheme = tema;
+  if (persistir) {
+    try {
+      localStorage.setItem(TEMA_CLAVE, tema);
+    } catch {
+    }
+  }
+  dispatchEvent(new CustomEvent(TEMA_EVENTO, { detail: tema }));
+}
+function alternarTema() {
+  const siguiente = temaActual() === "dark" ? "light" : "dark";
+  aplicarTema(siguiente);
+  return siguiente;
+}
+function escucharTema(alCambiar) {
+  if (typeof window === "undefined") return () => {
+  };
+  const propio = (evento) => {
+    const detalle = evento.detail;
+    if (esTema(detalle)) alCambiar(detalle);
+  };
+  const otraPestana = (evento) => {
+    if (evento.key !== TEMA_CLAVE) return;
+    const tema = esTema(evento.newValue) ? evento.newValue : temaPreferido();
+    aplicarTema(tema, false);
+    alCambiar(tema);
+  };
+  addEventListener(TEMA_EVENTO, propio);
+  addEventListener("storage", otraPestana);
+  return () => {
+    removeEventListener(TEMA_EVENTO, propio);
+    removeEventListener("storage", otraPestana);
+  };
+}
+var scriptTema = [
+  "(function () {",
+  "  var CLAVE = " + JSON.stringify(TEMA_CLAVE) + ";",
+  "  function resolver() {",
+  "    try {",
+  "      var guardado = localStorage.getItem(CLAVE);",
+  '      if (guardado === "dark" || guardado === "light") return guardado;',
+  "    } catch (e) {}",
+  '    return matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";',
+  "  }",
+  "  function aplicar() {",
+  "    var tema = resolver();",
+  "    document.documentElement.setAttribute(" + JSON.stringify(TEMA_ATRIBUTO) + ", tema);",
+  "    document.documentElement.style.colorScheme = tema;",
+  "  }",
+  "  aplicar();",
+  '  document.addEventListener("astro:after-swap", aplicar);',
+  "})();"
+].join("\n");
+var kebab = (nombre) => nombre.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
 var escalas = Object.keys(typeScale);
 var radios = Object.keys(radius);
-var espacios = Object.keys(spacing);
-var controles = Object.keys(control).map((nombre) => `control-${nombre}`);
+var espacios = Object.keys(spacing).map(kebab);
+var controles = Object.keys(control).map((nombre) => `control-${kebab(nombre)}`);
 var twMerge = tailwindMerge.extendTailwindMerge({
   extend: {
     classGroups: {
@@ -324,7 +416,165 @@ var twMerge = tailwindMerge.extendTailwindMerge({
 function cn(...inputs) {
   return twMerge(clsx.clsx(inputs));
 }
-var alert = classVarianceAuthority.cva("w-full rounded-card border p-md font-sans text-ui", {
+function Glyph({ children, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 8.5 6.5 12 13 4.5" }) });
+var Minus = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.5 8h9" }) });
+var ChevronDown = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6l4 4 4-4" }) });
+var ChevronUp = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 10l4-4 4 4" }) });
+var ChevronLeft = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 4L6 8l4 4" }) });
+var ChevronRight = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4l4 4-4 4" }) });
+var Close = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
+var Copy = (props) => /* @__PURE__ */ jsxRuntime.jsxs(Glyph, { ...props, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5.5", y: "5.5", width: "8", height: "8", rx: "1.5" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.5 3.5h-7a1.5 1.5 0 0 0-1.5 1.5v7" })
+] });
+var ArrowUpRight = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 11l6-6M5.5 5h5.5v5.5" }) });
+var Ellipsis = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, strokeWidth: 2.25, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 8h.01M8 8h.01M12 8h.01" }) });
+var Spinner = (props) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "6", opacity: 0.3 }),
+      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 2a6 6 0 0 1 6 6" })
+    ]
+  }
+);
+var Sol = (props) => /* @__PURE__ */ jsxRuntime.jsxs(Glyph, { ...props, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "3" }),
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v14l11-7z" }) });
+var Pause = (props) => /* @__PURE__ */ jsxRuntime.jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) });
+var Retry = (props) => /* @__PURE__ */ jsxRuntime.jsx(
+  GlifoMedia,
+  {
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(GlifoMedia, { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", ...props, children: [
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M7.5 10.5L10 8.5V15.5", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(GlifoMedia, { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", ...props, children: [
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M7.5 10.5L10 8.5V15.5", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+    AccordionPrimitive__namespace.Root,
+    {
+      className: cn("border-hairline w-full border-t", className),
+      ...props
+    }
+  );
+}
+function AccordionItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Item, { className: cn("border-hairline border-b", className), ...props });
+}
+function AccordionTrigger({
+  className,
+  children,
+  headingLevel = 3,
+  ...props
+}) {
+  const Encabezado = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Encabezado, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    AccordionPrimitive__namespace.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__ */ jsxRuntime.jsx(ChevronDown, { className: "text-text-muted shrink-0" })
+      ]
+    }
+  ) }) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Content, { className: "overflow-hidden", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("pb-step-md font-sans text-ui text-text-secondary max-w-measure", className), children }) });
+}
+var alert = classVarianceAuthority.cva("w-full rounded-card border p-step-md font-sans text-ui", {
   variants: {
     variant: {
       accent: "text-text-secondary",
@@ -377,7 +627,7 @@ function Alert({
       role: tono === "error" ? "alert" : "status",
       className: cn(alert({ variant, enfasis }), className),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-sm flex items-start", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex items-start", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "span",
           {
@@ -387,13 +637,183 @@ function Alert({
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
-          title ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-xs text-text-primary font-medium", children: title }) : null,
+          title ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mb-step-xs text-text-primary font-medium", children: title }) : null,
           children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-measure", children }) : null
         ] })
       ] })
     }
   );
 }
+var button = classVarianceAuthority.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: "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"
+      }
+    },
+    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 Button({
+  className,
+  variant,
+  size: size2,
+  asChild = false,
+  loading = false,
+  icon,
+  children,
+  disabled,
+  ...props
+}) {
+  if (asChild) {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: cn(button({ variant, size: size2 }), className), ...props, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      className: cn(button({ variant, size: size2 }), className),
+      disabled: disabled === true || loading,
+      "aria-busy": loading || void 0,
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) : icon,
+        children
+      ]
+    }
+  );
+}
+var AlertDialog = AlertDialogPrimitive__namespace.Root;
+var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
+function AlertDialogOverlay({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AlertDialogPrimitive__namespace.Overlay,
+    {
+      className: cn("bg-brand-hull/70 fixed inset-0 z-50", className),
+      ...props
+    }
+  );
+}
+function AlertDialogContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogPrimitive__namespace.Portal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      AlertDialogPrimitive__namespace.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
+      }
+    )
+  ] });
+}
+function AlertDialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("gap-step-xs flex flex-col", className), ...props });
+}
+function AlertDialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: cn("gap-step-sm flex flex-col-reverse sm:flex-row sm:justify-end", className),
+      ...props
+    }
+  );
+}
+function AlertDialogTitle({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AlertDialogPrimitive__namespace.Title,
+    {
+      className: cn("text-h3 font-display text-text-primary", className),
+      ...props
+    }
+  );
+}
+function AlertDialogDescription({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AlertDialogPrimitive__namespace.Description,
+    {
+      className: cn("text-ui text-text-secondary max-w-measure", className),
+      ...props
+    }
+  );
+}
+function AlertDialogCancel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AlertDialogPrimitive__namespace.Cancel,
+    {
+      className: cn(button({ variant: "secondary" }), className),
+      ...props
+    }
+  );
+}
+function AlertDialogAction({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    AlertDialogPrimitive__namespace.Action,
+    {
+      className: cn(button({ variant: "primary" }), className),
+      ...props
+    }
+  );
+}
 var avatar = classVarianceAuthority.cva(
   "relative flex shrink-0 overflow-hidden rounded-pill bg-surface-raised border border-hairline",
   {
@@ -433,7 +853,7 @@ function AvatarFallback({
   );
 }
 var badge = classVarianceAuthority.cva(
-  ["inline-flex items-center gap-xs", "rounded-chip px-xs py-0.5", "font-sans text-tag", "transition-standard"],
+  ["inline-flex items-center gap-step-xs", "rounded-chip px-step-xs py-0.5", "font-sans text-tag", "transition-standard"],
   {
     variants: {
       variant: {
@@ -453,8 +873,8 @@ function Badge({ className, variant, ...props }) {
 }
 var categoria = classVarianceAuthority.cva(
   [
-    "inline-flex items-center gap-xs",
-    "rounded-pill px-sm py-0.5",
+    "inline-flex items-center gap-step-xs",
+    "rounded-pill px-step-sm py-0.5",
     "font-mono text-chip",
     "border transition-standard"
   ],
@@ -478,192 +898,16 @@ function CategoryBadge({ className, active = false, ...props }) {
     }
   );
 }
-var metrica = ["inline-flex items-center gap-xs", "rounded-pill", "font-mono text-chip text-text-muted"];
+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__ */ jsxRuntime.jsx(
     "span",
     {
-      className: cn(metrica, boxed && "border-hairline px-sm py-0.5 border", className),
+      className: cn(metrica, boxed && "border-hairline px-step-sm py-0.5 border", className),
       ...props
     }
   );
 }
-function Glyph({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 8.5 6.5 12 13 4.5" }) });
-var Minus = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3.5 8h9" }) });
-var ChevronDown = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 6l4 4 4-4" }) });
-var ChevronUp = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 10l4-4 4 4" }) });
-var ChevronLeft = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10 4L6 8l4 4" }) });
-var ChevronRight = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4l4 4-4 4" }) });
-var Close = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
-var Copy = (props) => /* @__PURE__ */ jsxRuntime.jsxs(Glyph, { ...props, children: [
-  /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "5.5", y: "5.5", width: "8", height: "8", rx: "1.5" }),
-  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M10.5 3.5h-7a1.5 1.5 0 0 0-1.5 1.5v7" })
-] });
-var ArrowUpRight = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M5 11l6-6M5.5 5h5.5v5.5" }) });
-var Ellipsis = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, strokeWidth: 2.25, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 8h.01M8 8h.01M12 8h.01" }) });
-var Spinner = (props) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "6", opacity: 0.3 }),
-      /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 2a6 6 0 0 1 6 6" })
-    ]
-  }
-);
-function GlifoMedia({ children, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v14l11-7z" }) });
-var Pause = (props) => /* @__PURE__ */ jsxRuntime.jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) });
-var Retry = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-  GlifoMedia,
-  {
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    ...props,
-    children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(GlifoMedia, { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", ...props, children: [
-  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M7.5 10.5L10 8.5V15.5", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(GlifoMedia, { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", ...props, children: [
-  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("path", { d: "M7.5 10.5L10 8.5V15.5", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.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 = classVarianceAuthority.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"
-  ],
-  {
-    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"
-      }
-    },
-    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 Button({
-  className,
-  variant,
-  size: size2,
-  asChild = false,
-  loading = false,
-  icon,
-  children,
-  disabled,
-  ...props
-}) {
-  if (asChild) {
-    return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: cn(button({ variant, size: size2 }), className), ...props, children });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      className: cn(button({ variant, size: size2 }), className),
-      disabled: disabled === true || loading,
-      "aria-busy": loading || void 0,
-      ...props,
-      children: [
-        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) : icon,
-        children
-      ]
-    }
-  );
-}
 function Calendar({
   className,
   classNames,
@@ -702,8 +946,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",
@@ -731,7 +975,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: {
@@ -821,7 +1065,7 @@ function Card({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(SUPERFICIE_TARJETA, className), ...props });
 }
 function CardHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("gap-xs p-lg flex flex-col", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("gap-step-xs p-step-lg flex flex-col", className), ...props });
 }
 function CardTitle({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "h3", variant: "h3", className, ...props });
@@ -830,13 +1074,13 @@ function CardDescription({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", className, ...props });
 }
 function CardContent({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-lg pb-lg", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("px-step-lg pb-step-lg", className), ...props });
 }
 function CardFooter({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.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
     }
   );
@@ -887,7 +1131,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",
@@ -930,7 +1174,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
@@ -957,10 +1201,10 @@ function DialogContent({
   ] });
 }
 function DialogHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("gap-xs flex flex-col pr-8", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("gap-step-xs flex flex-col pr-8", className), ...props });
 }
 function DialogFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("gap-sm flex flex-col-reverse sm:flex-row sm:justify-end", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("gap-step-sm flex flex-col-reverse sm:flex-row sm:justify-end", className), ...props });
 }
 function DialogTitle({
   className,
@@ -997,7 +1241,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"
@@ -1049,7 +1293,7 @@ function DropdownMenuLabel({
   return /* @__PURE__ */ jsxRuntime.jsx(
     DropdownMenuPrimitive__namespace.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
     }
   );
@@ -1090,7 +1334,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",
@@ -1098,7 +1342,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",
+        "file:mr-step-sm file:border-0 file:bg-transparent file:font-sans file:text-label file:text-text-secondary",
         className
       ),
       ...props
@@ -1130,7 +1374,7 @@ function Pagination({ className, ...props }) {
   );
 }
 function PaginationContent({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("gap-xs flex flex-row items-center", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("ul", { className: cn("gap-step-xs flex flex-row items-center", className), ...props });
 }
 function PaginationItem(props) {
   return /* @__PURE__ */ jsxRuntime.jsx("li", { ...props });
@@ -1141,7 +1385,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",
@@ -1154,13 +1398,13 @@ function PaginationLink({ className, isActive = false, ...props }) {
   );
 }
 function PaginationPrevious({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(PaginationLink, { "aria-label": "P\xE1gina anterior", className: cn("gap-xs", className), ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(PaginationLink, { "aria-label": "P\xE1gina anterior", className: cn("gap-step-xs", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft, {}),
     "Anterior"
   ] });
 }
 function PaginationNext({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(PaginationLink, { "aria-label": "P\xE1gina siguiente", className: cn("gap-xs", className), ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs(PaginationLink, { "aria-label": "P\xE1gina siguiente", className: cn("gap-step-xs", className), ...props, children: [
     "Siguiente",
     /* @__PURE__ */ jsxRuntime.jsx(ChevronRight, {})
   ] });
@@ -1191,7 +1435,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",
@@ -1220,7 +1464,7 @@ function Progress({ className, value, label, tone = "accent", ...props }) {
   );
 }
 function RadioGroup2({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Root, { className: cn("gap-sm grid", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(RadioGroupPrimitive__namespace.Root, { className: cn("gap-step-sm grid", className), ...props });
 }
 function RadioGroupItem({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -1252,7 +1496,7 @@ function SelectTrigger({
     SelectPrimitive__namespace.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",
@@ -1303,7 +1547,7 @@ function SelectLabel({
   return /* @__PURE__ */ jsxRuntime.jsx(
     SelectPrimitive__namespace.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
     }
   );
@@ -1317,7 +1561,7 @@ function SelectItem({
     SelectPrimitive__namespace.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",
@@ -1419,19 +1663,19 @@ function SheetHeader({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: cn("p-lg flex-1 overflow-y-auto", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("p-step-lg flex-1 overflow-y-auto", className), ...props });
 }
 function SheetFooter({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.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
     }
   );
@@ -1542,7 +1786,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
       ),
@@ -1551,13 +1795,13 @@ function TableHead({ className, ...props }) {
   );
 }
 function TableCell({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("td", { className: cn("px-sm py-sm text-text-secondary align-middle", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("td", { className: cn("px-step-sm py-step-sm text-text-secondary align-middle", className), ...props });
 }
 function TableCaption({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("caption", { className: cn("mt-sm text-label text-text-muted", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("caption", { className: cn("mt-step-sm text-label text-text-muted", className), ...props });
 }
 function Tabs({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { className: cn("gap-md flex flex-col", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsPrimitive__namespace.Root, { className: cn("gap-step-md flex flex-col", className), ...props });
 }
 function TabsList({
   className,
@@ -1566,7 +1810,7 @@ function TabsList({
   return /* @__PURE__ */ jsxRuntime.jsx(
     TabsPrimitive__namespace.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
     }
   );
@@ -1579,7 +1823,7 @@ function TabsTrigger({
     TabsPrimitive__namespace.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",
@@ -1614,7 +1858,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",
@@ -1638,7 +1882,7 @@ function ToastViewport({
     ToastPrimitive__namespace.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
       ),
@@ -1648,7 +1892,7 @@ function ToastViewport({
 }
 var toast = classVarianceAuthority.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"
   ],
@@ -1699,6 +1943,76 @@ function ToastDescription({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ToastPrimitive__namespace.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 = react.useSyncExternalStore(suscribirse, leer, enServidor);
+  return /* @__PURE__ */ jsxRuntime.jsxs(ToastProvider, { duration, label, children: [
+    lista.map(({ id, title, description, variant, duration: propio, action, abierto }) => /* @__PURE__ */ jsxRuntime.jsxs(
+      Toast,
+      {
+        open: abierto,
+        variant: variant ?? "neutral",
+        ...propio === void 0 ? {} : { duration: propio },
+        onOpenChange: (sigue) => {
+          if (!sigue) retirar(id);
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
+            title ? /* @__PURE__ */ jsxRuntime.jsx(ToastTitle, { children: title }) : null,
+            description ? /* @__PURE__ */ jsxRuntime.jsx(ToastDescription, { children: description }) : null
+          ] }),
+          action
+        ]
+      },
+      id
+    )),
+    /* @__PURE__ */ jsxRuntime.jsx(ToastViewport, {})
+  ] });
+}
 var TooltipProvider = TooltipPrimitive__namespace.Provider;
 var Tooltip = TooltipPrimitive__namespace.Root;
 var TooltipTrigger = TooltipPrimitive__namespace.Trigger;
@@ -1712,7 +2026,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
@@ -1738,6 +2052,7 @@ function ArticleCard({
   dateTime,
   readingMinutes,
   tags,
+  headingLevel = 3,
   className,
   ...props
 }) {
@@ -1748,14 +2063,22 @@ function ArticleCard({
       " min de lectura"
     ] }, "lectura") : null
   ].filter(Boolean);
-  return /* @__PURE__ */ jsxRuntime.jsx(Tarjeta, { className: cn("p-lg", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "gap-sm flex h-full flex-col", children: [
-    meta.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", tone: "muted", as: "p", className: "gap-xs flex items-center", children: meta.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "gap-xs flex items-center", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Tarjeta, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
+    meta.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", tone: "muted", as: "p", className: "gap-step-xs flex items-center", children: meta.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "gap-step-xs flex items-center", children: [
       i > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\xB7" }) : null,
       m
     ] }, i)) }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "h3", variant: "h3", className: "group-hover:text-accent transition-standard", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Text,
+      {
+        as: headingLevel === 2 ? "h2" : "h3",
+        variant: "h3",
+        className: "group-hover:text-accent transition-standard",
+        children: title
+      }
+    ),
     excerpt ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", className: "line-clamp-2", children: excerpt }) : null,
-    tags && tags.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-xs mt-auto flex flex-wrap pt-sm", children: tags.map((t) => /* @__PURE__ */ jsxRuntime.jsx(CategoryBadge, { children: t }, t)) }) : null
+    tags && tags.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-step-xs mt-auto flex flex-wrap pt-step-sm", children: tags.map((t) => /* @__PURE__ */ jsxRuntime.jsx(CategoryBadge, { children: t }, t)) }) : null
   ] }) });
 }
 var AVATAR = "size-[52px]";
@@ -1763,16 +2086,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__ */ jsxRuntime.jsxs("div", { className: cn(SUPERFICIE_TARJETA, "p-lg gap-md flex items-start", className), ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(SUPERFICIE_TARJETA, "p-step-lg gap-step-md flex items-start", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: cn(AVATAR, "shrink-0"), children: [
       src ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src, alt: "" }) : null,
       /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: iniciales(name) })
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-xs flex min-w-0 flex-1 flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex min-w-0 flex-1 flex-col", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", as: "p", className: "font-medium", children: name }),
       role ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "chip", tone: "muted", as: "p", children: role }) : null,
-      bio ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", className: "mt-xs", children: bio }) : null,
-      action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-xs gap-sm flex flex-wrap items-center", children: action }) : null
+      bio ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", className: "mt-step-xs", children: bio }) : null,
+      action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-step-xs gap-step-sm flex flex-wrap items-center", children: action }) : null
     ] })
   ] });
 }
@@ -1891,7 +2214,7 @@ function Volumen({
   onSilenciar,
   onCambiarVolumen
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-xs hidden items-center sm:flex", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs hidden items-center sm:flex", children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
@@ -2138,8 +2461,8 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             ...puntero
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface/95 border-accent/25 border-t backdrop-blur-md", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-sm px-md flex items-center py-5", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-xs flex shrink-0 items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface/95 border-accent/25 border-t backdrop-blur-md", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm px-step-md flex items-center py-5", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex shrink-0 items-center", children: [
             /* @__PURE__ */ jsxRuntime.jsx(Onda, { grosor: "w-[2px]", alto: "h-4", sonando: isPlaying }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-eyebrow font-mono text-accent hidden uppercase sm:block", children: "Narraci\xF3n" })
           ] }),
@@ -2156,7 +2479,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             /* @__PURE__ */ jsxRuntime.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,
@@ -2181,7 +2504,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, src, preload: "metadata" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: staticRef, children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-sm mb-md flex items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm mb-step-md flex items-center", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Onda, { grosor: "w-[3px]", alto: "h-5", sonando: isPlaying }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-eyebrow font-mono text-accent uppercase", children: "Narraci\xF3n de audio" }),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-chip font-mono text-text-muted ml-auto tabular-nums", children: [
@@ -2190,13 +2513,13 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             formatTime(duration)
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-md", children: /* @__PURE__ */ jsxRuntime.jsx(BarraProgreso, { alto: "h-1.5", perilla: 14, progreso: progress, ...puntero }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-sm flex items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-step-md", children: /* @__PURE__ */ jsxRuntime.jsx(BarraProgreso, { alto: "h-1.5", perilla: 14, progreso: progress, ...puntero }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex items-center", children: [
           /* @__PURE__ */ jsxRuntime.jsx(BotonSalto, { segundos: -15, className: "p-2", tamano: "w-6 h-6", onSaltar: skip }),
           /* @__PURE__ */ jsxRuntime.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,
@@ -2205,7 +2528,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             }
           ),
           /* @__PURE__ */ jsxRuntime.jsx(BotonSalto, { segundos: 15, className: "p-2", tamano: "w-6 h-6", onSaltar: skip }),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-sm ml-auto flex items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm ml-auto flex items-center", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
               BotonVelocidad,
               {
@@ -2235,8 +2558,8 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
     return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, src, preload: "metadata" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: staticRef, className: "w-full", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-xs", children: /* @__PURE__ */ jsxRuntime.jsx(BarraProgreso, { alto: "h-1.5", perilla: 12, progreso: progress, ...puntero }) }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-chip font-mono text-text-muted mb-sm flex justify-between", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-step-xs", children: /* @__PURE__ */ jsxRuntime.jsx(BarraProgreso, { alto: "h-1.5", perilla: 12, progreso: progress, ...puntero }) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-chip font-mono text-text-muted mb-step-sm flex justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime(currentTime) }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime(duration) })
         ] }),
@@ -2268,16 +2591,16 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
       flotanteJsx
     ] });
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface rounded-control border-border p-md w-full border", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface rounded-control border-border p-step-md w-full border", children: [
     /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, src, preload: "metadata" }),
-    title ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui font-sans text-text-secondary mb-sm truncate", children: title }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-sm", children: /* @__PURE__ */ jsxRuntime.jsx(BarraProgreso, { alto: "h-2", perilla: 16, progreso: progress, ...puntero }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-chip font-mono text-text-muted mb-sm flex justify-between", children: [
+    title ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui font-sans text-text-secondary mb-step-sm truncate", children: title }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-step-sm", children: /* @__PURE__ */ jsxRuntime.jsx(BarraProgreso, { alto: "h-2", perilla: 16, progreso: progress, ...puntero }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-chip font-mono text-text-muted mb-step-sm flex justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime(currentTime) }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime(duration) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-xs flex items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex items-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx(BotonSalto, { segundos: -15, className: "p-2", tamano: "w-5 h-5", onSaltar: skip }),
         /* @__PURE__ */ jsxRuntime.jsx(
           BotonPlay,
@@ -2291,7 +2614,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
         ),
         /* @__PURE__ */ jsxRuntime.jsx(BotonSalto, { segundos: 15, className: "p-2", tamano: "w-5 h-5", onSaltar: skip })
       ] }),
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-sm flex items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex items-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           BotonVelocidad,
           {
@@ -2319,11 +2642,11 @@ function Blockquote({ children, author, source, className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Text, { variant: "body", tone: "secondary", children }),
-        author || source ? /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "mt-sm", children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "label", tone: "muted", as: "span", children: [
+        author || source ? /* @__PURE__ */ jsxRuntime.jsx("footer", { className: "mt-step-sm", children: /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "label", tone: "muted", as: "span", children: [
           author ? /* @__PURE__ */ jsxRuntime.jsx("cite", { className: "not-italic", children: author }) : null,
           author && source ? " \xB7 " : null,
           source
@@ -2342,11 +2665,11 @@ function Breadcrumb({
   ...props
 }) {
   const enlace = (href, contenido) => linkAsChild ? /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: ENLACE, children: linkAsChild({ href, children: contenido }) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: ENLACE, children: contenido });
-  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Ruta", className: cn("font-mono text-meta text-text-muted", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("ol", { className: "gap-xs flex flex-wrap items-center", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Ruta", className: cn("font-mono text-meta text-text-muted", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("ol", { className: "gap-step-xs flex flex-wrap items-center", children: [
     /* @__PURE__ */ jsxRuntime.jsx("li", { children: enlace(homeHref, /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": homeLabel, children: "~" })) }),
     items.map((item2, i) => {
       const ultimo = i === items.length - 1;
-      return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "gap-xs flex items-center", children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "gap-step-xs flex items-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-border", children: "/" }),
         item2.href && !ultimo ? enlace(item2.href, item2.label) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-current": ultimo ? "page" : void 0, className: "text-text-secondary", children: item2.label })
       ] }, i);
@@ -2376,7 +2699,7 @@ function CodeBlock({ children, language, copyText, className, ...props }) {
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-hairline px-sm flex items-center justify-between border-b py-1.5", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border-hairline px-step-sm flex items-center justify-between border-b py-1.5", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-eyebrow font-mono text-text-muted uppercase", children: [
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-accent", children: "\u276F" }),
             " ",
@@ -2390,7 +2713,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"
@@ -2402,7 +2725,7 @@ function CodeBlock({ children, language, copyText, className, ...props }) {
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "p-md font-mono text-meta text-text-primary overflow-x-auto leading-relaxed", children })
+        /* @__PURE__ */ jsxRuntime.jsx("pre", { className: "p-step-md font-mono text-meta text-text-primary overflow-x-auto leading-relaxed", children })
       ]
     }
   );
@@ -2416,15 +2739,15 @@ function CourseCard({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Tarjeta, { className: cn("p-lg", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "gap-sm flex h-full flex-col", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Tarjeta, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
     status ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "warm", children: status }) }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "h3", variant: "h3", className: "group-hover:text-accent transition-standard", children: title }),
     summary ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", className: "line-clamp-3", children: summary }) : null,
-    meta && meta.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", tone: "muted", as: "p", className: "gap-xs flex flex-wrap items-center", children: meta.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "gap-xs flex items-center", children: [
+    meta && meta.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", tone: "muted", as: "p", className: "gap-step-xs flex flex-wrap items-center", children: meta.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "gap-step-xs flex items-center", children: [
       i > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\xB7" }) : null,
       m
     ] }, i)) }) : null,
-    typeof progress === "number" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-xs mt-auto flex flex-col pt-sm", children: [
+    typeof progress === "number" ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs mt-auto flex flex-col pt-step-sm", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Progress, { value: progress, tone: "warm", label: `Progreso del curso: ${progress}%` }),
       /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "label", tone: "muted", as: "p", children: [
         progress,
@@ -2515,13 +2838,13 @@ function EmptyState({
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CaraDeMascota, { expresion, className: CARA, basePath }),
         /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", as: "p", className: "font-medium", children: title }),
         description ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", tone: "muted", as: "p", className: "max-w-measure font-normal", children: description }) : null,
-        action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-xs", children: action }) : null
+        action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-step-xs", children: action }) : null
       ]
     }
   );
@@ -2530,11 +2853,13 @@ function Footer({
   social,
   year = (/* @__PURE__ */ new Date()).getFullYear(),
   children,
+  brand: brand2,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: cn("border-hairline w-full border-t", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-wide px-md py-xl gap-lg mx-auto flex flex-col", children: [
-    children ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-md flex flex-wrap items-center", children }) : null,
+  return /* @__PURE__ */ jsxRuntime.jsx("footer", { className: cn("border-hairline w-full border-t", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-wide px-step-md py-step-xl gap-step-lg mx-auto flex flex-col", children: [
+    brand2 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: brand2 }) : null,
+    children ? /* @__PURE__ */ jsxRuntime.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.
@@ -2584,27 +2909,55 @@ function Hero({
   action,
   pose,
   basePath,
+  variant = "cabecera",
   className,
   ...props
 }) {
+  const centrado = variant === "centrado";
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "gap-md flex flex-col md:max-w-[62%]", children: [
-          eyebrow ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: eyebrow }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "h1", variant: "display", children: title }),
-          description ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "body", tone: "secondary", children: description }) : null,
-          action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-sm mt-xs flex flex-wrap items-center", children: action }) : null
-        ] }),
-        pose ? /* @__PURE__ */ jsxRuntime.jsx(
+        centrado && pose ? /* @__PURE__ */ jsxRuntime.jsx(
+          Mascota,
+          {
+            pose,
+            basePath,
+            className: "mb-step-md mx-auto w-48 md:w-56"
+          }
+        ) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            className: cn(
+              "gap-step-md flex flex-col",
+              centrado ? "items-center text-center" : "md:max-w-[62%]"
+            ),
+            children: [
+              eyebrow ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: eyebrow }) : null,
+              /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "h1", variant: "display", children: title }),
+              description ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "body", tone: "secondary", children: description }) : null,
+              action ? /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  className: cn(
+                    "gap-step-sm mt-step-xs flex flex-wrap items-center",
+                    centrado && "justify-center"
+                  ),
+                  children: action
+                }
+              ) : null
+            ]
+          }
+        ),
+        !centrado && pose ? /* @__PURE__ */ jsxRuntime.jsx(
           Mascota,
           {
             pose,
@@ -2612,7 +2965,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"
             )
           }
@@ -2634,11 +2987,11 @@ function LinkRow({
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tarjeta,
     {
-      className: cn("px-md py-sm", className),
+      className: cn("px-step-md py-step-sm", className),
       ...props,
       rel,
       ...target ? { target } : {},
-      children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "gap-sm flex items-center", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "gap-step-sm flex items-center", children: [
         icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-text-muted group-hover:text-accent transition-standard shrink-0 text-2xl", children: icon }) : null,
         /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "min-w-0 flex-1", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "span", variant: "ui", className: "group-hover:text-accent transition-standard block font-medium", children: name }),
@@ -2668,10 +3021,10 @@ function Nav({ brand: brand2, children, actions, className, ...props }) {
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-wide px-md h-nav gap-lg mx-auto flex items-center", children: [
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-wide px-step-md h-nav gap-step-lg mx-auto flex items-center", children: [
         brand2 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: brand2 }) : null,
-        children ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Principal", className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "gap-md flex items-center", children }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
-        actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-sm flex shrink-0 items-center", children: actions }) : null
+        children ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Principal", className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "gap-step-md flex items-center", children }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+        actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-step-sm flex shrink-0 items-center", children: actions }) : null
       ] })
     }
   );
@@ -2709,6 +3062,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
 }) {
@@ -2719,53 +3076,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__ */ jsxRuntime.jsx(
+    Button,
+    {
+      type: "submit",
+      variant: "conversion",
+      loading: enviando,
+      className: cn("disabled:opacity-60", nameField && "sm:self-start"),
+      children: submitLabel
+    }
+  );
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "gap-xs flex flex-col", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex flex-col", children: [
           /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "h2", variant: "h3", children: title }),
           description ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", children: description }) : null
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: enviar, className: "gap-sm flex flex-col sm:flex-row sm:items-end", noValidate: true, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-xs flex flex-1 flex-col", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: id, children: fieldLabel }),
-            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("form", { onSubmit: enviar, className: "gap-step-sm flex flex-col", noValidate: true, children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex flex-col sm:flex-row sm:items-end", children: [
+            nameField ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex flex-1 flex-col", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: `${id}-nombre`, children: nameLabel }),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Input,
+                {
+                  id: `${id}-nombre`,
+                  name: "name",
+                  type: "text",
+                  autoComplete: "name",
+                  required: true,
+                  placeholder: namePlaceholder,
+                  disabled: enviando,
+                  ...nameInputProps
+                }
+              )
+            ] }) : null,
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex flex-1 flex-col", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: id, children: fieldLabel }),
+              /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-            Button,
-            {
-              type: "submit",
-              variant: "conversion",
-              loading: enviando,
-              className: "disabled:opacity-60",
-              children: submitLabel
-            }
-          )
+          nameField ? boton : null
         ] }),
         state === "exito" ? /* @__PURE__ */ jsxRuntime.jsx(Alert, { id: `${id}-aviso`, variant: "success", enfasis: "fuerte", children: successMessage }) : null,
         error ? /* @__PURE__ */ jsxRuntime.jsx(Alert, { id: `${id}-aviso`, variant: "error", enfasis: "fuerte", children: errorMessage }) : null,
-        disclaimer ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-sm flex items-center", children: [
+        disclaimer ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex items-center", children: [
           expresion ? /* @__PURE__ */ jsxRuntime.jsx(CaraDeMascota, { expresion, basePath, className: "w-10 max-w-none" }) : null,
           /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", tone: "muted", as: "p", className: "font-normal", children: disclaimer })
         ] }) : null
@@ -2773,11 +3151,11 @@ function NewsletterForm({
     }
   );
 }
-var cabecera = classVarianceAuthority.cva("gap-sm flex flex-col", {
+var cabecera = classVarianceAuthority.cva("gap-step-sm flex flex-col", {
   variants: {
     size: {
       display: "py-section",
-      page: "py-xl"
+      page: "py-step-xl"
     }
   },
   defaultVariants: { size: "page" }
@@ -2796,9 +3174,65 @@ function PageHeader({
     eyebrow ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: eyebrow }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(Text, { as, variant: size2 === "display" ? "display" : "h1", className: "max-w-measure", children: title }),
     description ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "body", tone: "secondary", children: description }) : null,
-    action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-sm mt-sm flex flex-wrap items-center", children: action }) : null
+    action ? /* @__PURE__ */ jsxRuntime.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] = react.useState(0);
+  const pendiente = react.useRef(0);
+  react.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__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "h-1 w-full overflow-hidden",
+        sticky && "sticky top-0 z-40",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn("h-full", tone === "warm" ? "bg-warm" : "bg-accent"),
+          style: { width: `${avance}%` }
+        }
+      )
+    }
+  );
+}
 function SidebarItem({
   active = false,
   asChild = false,
@@ -2813,7 +3247,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
@@ -2847,14 +3281,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__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", className: "px-sm", children: title }) : null,
+        title ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", className: "px-step-sm", children: title }) : null,
         /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "gap-0.5 flex flex-1 flex-col", children }),
-        pie.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", tone: "muted", as: "p", className: "border-hairline px-sm pt-sm border-t", children: pie.map((p, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+        pie.length > 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { children: [
           i > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " \xB7 " }) : null,
           p
         ] }, i)) }) : null
@@ -2863,7 +3297,7 @@ function SidebarNav({
   );
 }
 function Stat({ value, label, tone = "neutral", progress, className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(SUPERFICIE_TARJETA, "p-lg gap-xs flex flex-col", className), ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(SUPERFICIE_TARJETA, "p-step-lg gap-step-xs flex flex-col", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "stat", as: "p", tone: tone === "alerta" ? "warm" : "accent", children: value }),
     /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", children: label }),
     typeof progress === "number" ? /* @__PURE__ */ jsxRuntime.jsx(
@@ -2872,7 +3306,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
   ] });
@@ -2884,6 +3318,7 @@ function TalkCard({
   dateTime,
   location,
   status,
+  description,
   className,
   ...props
 }) {
@@ -2891,18 +3326,49 @@ function TalkCard({
     date ? /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime, children: date }, "fecha") : null,
     location ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: location }, "lugar") : null
   ].filter(Boolean);
-  return /* @__PURE__ */ jsxRuntime.jsx(Tarjeta, { className: cn("p-lg", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "gap-sm flex h-full flex-col", children: [
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-sm flex items-start justify-between", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Tarjeta, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex items-start justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: event }),
       status ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "neutral", children: status }) : null
     ] }),
     /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "h3", variant: "h3", className: "group-hover:text-accent transition-standard", children: title }),
-    pie.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", tone: "muted", as: "p", className: "gap-xs mt-auto flex items-center pt-sm", children: pie.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "gap-xs flex items-center", children: [
+    description ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", className: "line-clamp-2", children: description }) : null,
+    pie.length > 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "gap-step-xs flex items-center", children: [
       i > 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+    Button,
+    {
+      type: "button",
+      variant,
+      size: size2,
+      "aria-label": label,
+      className: cn("[&_svg]:size-[19px]", className),
+      onClick: () => onThemeChange?.(alternarTema()),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Sol, { className: "light:hidden" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Luna, { className: "hidden light:block" })
+      ]
+    }
+  );
+}
+function useTema() {
+  return react.useSyncExternalStore(suscribirse2, temaActual, servidor);
+}
+var suscribirse2 = (avisar) => escucharTema(() => avisar());
+var servidor = () => "dark";
 function TableOfContents({
   items,
   title = "En esta p\xE1gina",
@@ -2911,17 +3377,21 @@ function TableOfContents({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { "aria-label": typeof title === "string" ? title : "En esta p\xE1gina", className: cn("gap-sm flex flex-col", className), ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("nav", { "aria-label": typeof title === "string" ? title : "En esta p\xE1gina", className: cn("gap-step-sm flex flex-col", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", children: title }),
-    /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "border-hairline gap-xs flex flex-col border-l", children: items.map((item2) => {
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("li", { children: linkAsChild ? /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: clases, "aria-current": activo ? "location" : void 0, children: linkAsChild({ href: item2.href, children: item2.label }) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: item2.href, className: clases, "aria-current": activo ? "location" : void 0, children: item2.label }) }, item2.href);
     }) })
@@ -2954,7 +3424,7 @@ function Logo({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("gap-xs inline-flex items-center", className), ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("gap-step-xs inline-flex items-center", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(
       Isotipo,
       {
@@ -3029,7 +3499,21 @@ var Correo = (props) => /* @__PURE__ */ jsxRuntime.jsxs(Funcional, { ...props, c
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m3.5 7.5 7.4 5.2a2 2 0 0 0 2.2 0l7.4-5.2" })
 ] });
 
+exports.Accordion = Accordion;
+exports.AccordionContent = AccordionContent;
+exports.AccordionItem = AccordionItem;
+exports.AccordionTrigger = AccordionTrigger;
 exports.Alert = Alert;
+exports.AlertDialog = AlertDialog;
+exports.AlertDialogAction = AlertDialogAction;
+exports.AlertDialogCancel = AlertDialogCancel;
+exports.AlertDialogContent = AlertDialogContent;
+exports.AlertDialogDescription = AlertDialogDescription;
+exports.AlertDialogFooter = AlertDialogFooter;
+exports.AlertDialogHeader = AlertDialogHeader;
+exports.AlertDialogOverlay = AlertDialogOverlay;
+exports.AlertDialogTitle = AlertDialogTitle;
+exports.AlertDialogTrigger = AlertDialogTrigger;
 exports.ArticleCard = ArticleCard;
 exports.AudioPlayer = AudioPlayer;
 exports.AuthorCard = AuthorCard;
@@ -3108,6 +3592,7 @@ exports.RUTA_ASSETS = RUTA_ASSETS;
 exports.RadioGroup = RadioGroup2;
 exports.RadioGroupItem = RadioGroupItem;
 exports.SUPERFICIE_TARJETA = SUPERFICIE_TARJETA;
+exports.ScrollingProgressBar = ScrollingProgressBar;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
 exports.SelectGroup = SelectGroup;
@@ -3131,6 +3616,9 @@ exports.SidebarNav = SidebarNav;
 exports.Skeleton = Skeleton;
 exports.Stat = Stat;
 exports.Switch = Switch;
+exports.TEMA_ATRIBUTO = TEMA_ATRIBUTO;
+exports.TEMA_CLAVE = TEMA_CLAVE;
+exports.TEMA_EVENTO = TEMA_EVENTO;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableCaption = TableCaption;
@@ -3147,18 +3635,22 @@ exports.TabsTrigger = TabsTrigger;
 exports.TalkCard = TalkCard;
 exports.Text = Text;
 exports.Textarea = Textarea;
+exports.ThemeToggle = ThemeToggle;
 exports.Toast = Toast;
 exports.ToastAction = ToastAction;
 exports.ToastDescription = ToastDescription;
 exports.ToastProvider = ToastProvider;
 exports.ToastTitle = ToastTitle;
 exports.ToastViewport = ToastViewport;
+exports.Toaster = Toaster;
 exports.Tooltip = Tooltip;
 exports.TooltipContent = TooltipContent;
 exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
 exports.alertVariants = alert;
 exports.aletas = aletas;
+exports.alternarTema = alternarTema;
+exports.aplicarTema = aplicarTema;
 exports.avatarVariants = avatar;
 exports.badgeVariants = badge;
 exports.brand = brand;
@@ -3169,6 +3661,7 @@ exports.cn = cn;
 exports.colors = colors;
 exports.control = control;
 exports.dark = dark;
+exports.escucharTema = escucharTema;
 exports.fonts = fonts;
 exports.gradient = gradient;
 exports.light = light;
@@ -3179,13 +3672,20 @@ exports.motion = motion;
 exports.naming = naming;
 exports.poses = poses;
 exports.radius = radius;
+exports.scriptTema = scriptTema;
+exports.series = series;
 exports.shadow = shadow;
 exports.sintaxis = sintaxis;
 exports.size = size;
 exports.social = social_exports;
 exports.spacing = spacing;
 exports.tagline = tagline;
+exports.temaActual = temaActual;
+exports.temaGuardado = temaGuardado;
+exports.temaPreferido = temaPreferido;
 exports.textVariants = texto;
+exports.toast = toast2;
 exports.tokens = tokens;
 exports.typeScale = typeScale;
+exports.useTema = useTema;
 exports.usoDeCara = usoDeCara;