@eduardoalvarez/arrecife 0.3.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);
@@ -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,11 +307,94 @@ 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);
@@ -325,6 +416,164 @@ var twMerge = tailwindMerge.extendTailwindMerge({
 function cn(...inputs) {
   return twMerge(clsx.clsx(inputs));
 }
+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: {
@@ -395,6 +644,176 @@ function Alert({
     }
   );
 }
+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",
   {
@@ -489,182 +908,6 @@ function MetricBadge({ className, boxed = false, ...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-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
-      ]
-    }
-  );
-}
 function Calendar({
   className,
   classNames,
@@ -1700,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;
@@ -1739,6 +2052,7 @@ function ArticleCard({
   dateTime,
   readingMinutes,
   tags,
+  headingLevel = 3,
   className,
   ...props
 }) {
@@ -1754,7 +2068,15 @@ function ArticleCard({
       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-step-xs mt-auto flex flex-wrap pt-step-sm", children: tags.map((t) => /* @__PURE__ */ jsxRuntime.jsx(CategoryBadge, { children: t }, t)) }) : null
   ] }) });
@@ -2531,10 +2853,12 @@ 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-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`:
@@ -2585,9 +2909,11 @@ function Hero({
   action,
   pose,
   basePath,
+  variant = "cabecera",
   className,
   ...props
 }) {
+  const centrado = variant === "centrado";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "section",
     {
@@ -2599,13 +2925,39 @@ function Hero({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-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-step-sm mt-step-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,
@@ -2710,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
 }) {
@@ -2720,8 +3076,19 @@ 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",
     {
@@ -2735,34 +3102,44 @@ function NewsletterForm({
           /* @__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-step-sm flex flex-col sm:flex-row sm:items-end", noValidate: true, children: [
-          /* @__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
-              }
-            )
+        /* @__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,
@@ -2800,6 +3177,62 @@ function PageHeader({
     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,
@@ -2885,6 +3318,7 @@ function TalkCard({
   dateTime,
   location,
   status,
+  description,
   className,
   ...props
 }) {
@@ -2898,12 +3332,43 @@ function TalkCard({
       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 }),
+    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",
@@ -2922,7 +3387,11 @@ function TableOfContents({
         "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
         "cursor-pointer",
         item2.nested && "pl-step-lg",
-        activo ? "border-accent text-accent" : "border-transparent text-text-secondary hover:text-text-primary"
+        "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);
     }) })
@@ -3030,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;
@@ -3109,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;
@@ -3132,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;
@@ -3148,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;
@@ -3170,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;
@@ -3180,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;