@eduardoalvarez/arrecife 0.3.0 → 0.4.0

package/dist/index.js

@@ -1,19 +1,29 @@
-export { tokens } from './chunk-VSMW2CT4.js';
-import { cn, CaraDeMascota, Mascota } from './chunk-ND45OQOC.js';
-export { CaraDeMascota, Isotipo, Logo, Mascota, cn } from './chunk-ND45OQOC.js';
+export { tokens } from './chunk-VPT32GPG.js';
+import { alternarTema, temaActual, escucharTema } from './chunk-KPZNNMV5.js';
+export { TEMA_ATRIBUTO, TEMA_CLAVE, TEMA_EVENTO, alternarTema, aplicarTema, escucharTema, scriptTema, temaActual, temaGuardado, temaPreferido } from './chunk-KPZNNMV5.js';
+import { CaraDeMascota, Mascota } from './chunk-TB3IYPOD.js';
+export { CaraDeMascota, Isotipo, Logo, Mascota } from './chunk-TB3IYPOD.js';
 export { RUTA_ASSETS, aletas, caras, listaCaras, listaPoses, poses, usoDeCara } from './chunk-E3OMP2DL.js';
-import { __export, naming } from './chunk-I7GYZD2A.js';
-export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, shadow, sintaxis, size, spacing, tagline, typeScale } from './chunk-I7GYZD2A.js';
-import { cva } from 'class-variance-authority';
+import { Label } from './chunk-ZEOQKRQ7.js';
+export { Label } from './chunk-ZEOQKRQ7.js';
+import { Text } from './chunk-UOWIDFCB.js';
+export { Text, texto as textVariants } from './chunk-UOWIDFCB.js';
+import { cn } from './chunk-NHS7ETKJ.js';
+export { cn } from './chunk-NHS7ETKJ.js';
+import { naming } from './chunk-TSPJOM6K.js';
+export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, sintaxis, size, spacing, tagline, typeScale } from './chunk-TSPJOM6K.js';
+import { __export } from './chunk-MLKGABMK.js';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import { cva } from 'class-variance-authority';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
 import { Slot } from '@radix-ui/react-slot';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
 import { es } from 'date-fns/locale';
 import { DayPicker } from 'react-day-picker';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import * as LabelPrimitive from '@radix-ui/react-label';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
@@ -22,9 +32,167 @@ import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as ToastPrimitive from '@radix-ui/react-toast';
+import { useSyncExternalStore, useRef, useState, useEffect, useCallback, useId } from 'react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
-import { useRef, useState, useEffect, useCallback, useId } from 'react';
 
+function Glyph({ children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      width: "1em",
+      height: "1em",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.75,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...props,
+      children
+    }
+  );
+}
+var Check = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M3 8.5 6.5 12 13 4.5" }) });
+var Minus = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M3.5 8h9" }) });
+var ChevronDown = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4" }) });
+var ChevronUp = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M4 10l4-4 4 4" }) });
+var ChevronLeft = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M10 4L6 8l4 4" }) });
+var ChevronRight = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4" }) });
+var Close = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
+var Copy = (props) => /* @__PURE__ */ jsxs(Glyph, { ...props, children: [
+  /* @__PURE__ */ jsx("rect", { x: "5.5", y: "5.5", width: "8", height: "8", rx: "1.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M10.5 3.5h-7a1.5 1.5 0 0 0-1.5 1.5v7" })
+] });
+var ArrowUpRight = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M5 11l6-6M5.5 5h5.5v5.5" }) });
+var Ellipsis = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, strokeWidth: 2.25, children: /* @__PURE__ */ jsx("path", { d: "M4 8h.01M8 8h.01M12 8h.01" }) });
+var Spinner = (props) => /* @__PURE__ */ jsxs(
+  "svg",
+  {
+    viewBox: "0 0 16 16",
+    width: "1em",
+    height: "1em",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    "aria-hidden": "true",
+    focusable: "false",
+    className: "motion-safe:animate-spin",
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6", opacity: 0.3 }),
+      /* @__PURE__ */ jsx("path", { d: "M8 2a6 6 0 0 1 6 6" })
+    ]
+  }
+);
+var Sol = (props) => /* @__PURE__ */ jsxs(Glyph, { ...props, children: [
+  /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "3" }),
+  /* @__PURE__ */ jsx("path", { d: "M8 1.5v1.2M8 13.3v1.2M14.5 8h-1.2M2.7 8H1.5M12.6 3.4l-.85.85M4.25 11.75l-.85.85M12.6 12.6l-.85-.85M4.25 4.25l-.85-.85" })
+] });
+var Luna = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M13.5 9.4A5.8 5.8 0 0 1 6.6 2.5a5.8 5.8 0 1 0 6.9 6.9Z" }) });
+function GlifoMedia({ children, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...props,
+      children
+    }
+  );
+}
+var Play = (props) => /* @__PURE__ */ jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" }) });
+var Pause = (props) => /* @__PURE__ */ jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) });
+var Retry = (props) => /* @__PURE__ */ jsx(
+  GlifoMedia,
+  {
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    ...props,
+    children: /* @__PURE__ */ jsx("path", { d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" })
+  }
+);
+var GoBackSeconds = (props) => /* @__PURE__ */ jsxs(GlifoMedia, { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M16.5 8.5H13.8604C13.6452 8.5 13.4541 8.63772 13.386 8.84189L12.7194 10.8419C12.6114 11.1657 12.8524 11.5 13.1937 11.5H14.5C15.6046 11.5 16.5 12.3954 16.5 13.5C16.5 14.6046 15.6046 15.5 14.5 15.5H12.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M7.5 10.5L10 8.5V15.5", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M14 4.5L12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C8.7288 22 5.82446 20.4293 4 18.001M8 2.83209C6.87754 3.32251 5.86251 4.01303 5 4.85857C3.14864 6.67349 2 9.20261 2 12C2 12.6849 2.06886 13.3538 2.20004 14",
+      strokeLinejoin: "round"
+    }
+  )
+] });
+var AdvanceSeconds = (props) => /* @__PURE__ */ jsxs(GlifoMedia, { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", ...props, children: [
+  /* @__PURE__ */ jsx("path", { d: "M16.5 8.5H13.8604C13.6452 8.5 13.4541 8.63772 13.386 8.84189L12.7194 10.8419C12.6114 11.1657 12.8524 11.5 13.1937 11.5H14.5C15.6046 11.5 16.5 12.3954 16.5 13.5C16.5 14.6046 15.6046 15.5 14.5 15.5H12.5" }),
+  /* @__PURE__ */ jsx("path", { d: "M7.5 10.5L10 8.5V15.5", strokeLinejoin: "round" }),
+  /* @__PURE__ */ jsx(
+    "path",
+    {
+      d: "M10 4.5L12 2C6.47715 2 2 6.47715 2 12C2 12.6849 2.06886 13.3538 2.20004 14M16 2.83209C19.5318 4.3752 22 7.89936 22 12C22 17.5228 17.5228 22 12 22C8.72852 22 5.82443 20.4287 4 18",
+      strokeLinejoin: "round"
+    }
+  )
+] });
+var VolumeOn = (props) => /* @__PURE__ */ jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" }) });
+var VolumeMuted = (props) => /* @__PURE__ */ jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" }) });
+function Accordion({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AccordionPrimitive.Root,
+    {
+      className: cn("border-hairline w-full border-t", className),
+      ...props
+    }
+  );
+}
+function AccordionItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Item, { className: cn("border-hairline border-b", className), ...props });
+}
+function AccordionTrigger({
+  className,
+  children,
+  headingLevel = 3,
+  ...props
+}) {
+  const Encabezado = `h${headingLevel}`;
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { asChild: true, children: /* @__PURE__ */ jsx(Encabezado, { children: /* @__PURE__ */ jsxs(
+    AccordionPrimitive.Trigger,
+    {
+      className: cn(
+        "gap-step-sm py-step-sm flex w-full cursor-pointer items-center justify-between text-left",
+        "font-sans text-lead font-medium text-text-primary",
+        "transition-standard",
+        "hover:text-accent",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "disabled:pointer-events-none disabled:opacity-50",
+        "[&[data-state=open]>svg]:rotate-180",
+        className
+      ),
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(ChevronDown, { className: "text-text-muted shrink-0" })
+      ]
+    }
+  ) }) });
+}
+function AccordionContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Content, { className: "overflow-hidden", ...props, children: /* @__PURE__ */ jsx("div", { className: cn("pb-step-md font-sans text-ui text-text-secondary max-w-measure", className), children }) });
+}
 var alert = cva("w-full rounded-card border p-step-md font-sans text-ui", {
   variants: {
     variant: {
@@ -95,273 +263,267 @@ function Alert({
     }
   );
 }
-var avatar = cva(
-  "relative flex shrink-0 overflow-hidden rounded-pill bg-surface-raised border border-hairline",
+var button = cva(
+  [
+    "inline-flex cursor-pointer items-center justify-center gap-step-xs whitespace-nowrap select-none",
+    "rounded-control font-sans font-medium",
+    "transition-standard",
+    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:shrink-0"
+  ],
   {
     variants: {
+      variant: {
+        primary: [
+          "bg-accent text-accent-on hover:bg-accent-hover",
+          "light:bg-brand-hull light:text-accent-on light:hover:bg-text-secondary"
+        ],
+        conversion: "bg-warm text-warm-on hover:bg-warm-hover",
+        secondary: [
+          "border-hairline-hover border bg-transparent text-text-primary",
+          "hover:border-accent hover:text-accent"
+        ],
+        tertiary: [
+          "bg-transparent font-mono font-normal text-text-secondary",
+          "hover:text-accent hover:underline hover:underline-offset-4"
+        ]
+      },
       size: {
-        sm: "size-8",
-        md: "size-10",
-        lg: "size-14",
-        xl: "size-24"
+        sm: "h-8 px-control-sm text-label",
+        md: "h-10 px-control-md text-ui",
+        lg: "h-12 px-control-lg text-lead",
+        /** Cuadrado 42×42, sin texto. Lleva `aria-label` obligatorio. */
+        icon: "size-control-icon p-0"
       }
     },
-    defaultVariants: { size: "md" }
+    compoundVariants: [
+      /**
+       * El terciario no tiene caja: ni padding horizontal ni alto de control.
+       * Va aquí y no como `px-0` en la variante para que gane al `px-*` del
+       * tamaño sin depender del orden en que cva concatena las clases.
+       */
+      { variant: "tertiary", size: ["sm", "md", "lg"], class: "h-auto px-0" }
+    ],
+    defaultVariants: { variant: "primary", size: "md" }
   }
 );
-function Avatar({ className, size: size2, ...props }) {
-  return /* @__PURE__ */ jsx(AvatarPrimitive.Root, { className: cn(avatar({ size: size2 }), className), ...props });
-}
-function AvatarImage({
+function Button({
   className,
+  variant,
+  size: size2,
+  asChild = false,
+  loading = false,
+  icon,
+  children,
+  disabled,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(AvatarPrimitive.Image, { className: cn("aspect-square size-full object-cover", className), ...props });
+  if (asChild) {
+    return /* @__PURE__ */ jsx(Slot, { className: cn(button({ variant, size: size2 }), className), ...props, children });
+  }
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      className: cn(button({ variant, size: size2 }), className),
+      disabled: disabled === true || loading,
+      "aria-busy": loading || void 0,
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsx(Spinner, {}) : icon,
+        children
+      ]
+    }
+  );
 }
-function AvatarFallback({
+var AlertDialog = AlertDialogPrimitive.Root;
+var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+function AlertDialogOverlay({
   className,
   ...props
 }) {
   return /* @__PURE__ */ jsx(
-    AvatarPrimitive.Fallback,
+    AlertDialogPrimitive.Overlay,
     {
-      className: cn(
-        "text-label font-mono text-text-secondary flex size-full items-center justify-center uppercase",
-        className
-      ),
+      className: cn("bg-brand-hull/70 fixed inset-0 z-50", className),
       ...props
     }
   );
 }
-var badge = cva(
-  ["inline-flex items-center gap-step-xs", "rounded-chip px-step-xs py-0.5", "font-sans text-tag", "transition-standard"],
-  {
-    variants: {
-      variant: {
-        neutral: "bg-surface-raised text-text-secondary",
-        accent: "bg-accent/8 text-text-primary",
-        warm: "bg-warm/8 text-text-primary",
-        success: "bg-success/8 text-text-primary",
-        warning: "bg-warning/8 text-text-primary",
-        error: "bg-error/8 text-text-primary"
+function AlertDialogContent({
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(AlertDialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsx(
+      AlertDialogPrimitive.Content,
+      {
+        className: cn(
+          "fixed top-1/2 left-1/2 z-50 w-full max-w-content -translate-x-1/2 -translate-y-1/2",
+          "gap-step-md p-step-lg flex flex-col",
+          "rounded-panel border-border bg-surface shadow-standard border",
+          "text-text-primary font-sans",
+          className
+        ),
+        ...props,
+        children
       }
-    },
-    defaultVariants: { variant: "neutral" }
-  }
-);
-function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsx("span", { className: cn(badge({ variant }), className), ...props });
+    )
+  ] });
 }
-var categoria = cva(
-  [
-    "inline-flex items-center gap-step-xs",
-    "rounded-pill px-step-sm py-0.5",
-    "font-mono text-chip",
-    "border transition-standard"
-  ],
-  {
-    variants: {
-      active: {
-        false: "border-warm/28 bg-transparent text-warm",
-        true: "border-warm bg-warm text-warm-on"
-      }
-    },
-    defaultVariants: { active: false }
-  }
-);
-function CategoryBadge({ className, active = false, ...props }) {
+function AlertDialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("gap-step-xs flex flex-col", className), ...props });
+}
+function AlertDialogFooter({ className, ...props }) {
   return /* @__PURE__ */ jsx(
-    "span",
+    "div",
     {
-      "data-active": active || void 0,
-      className: cn(categoria({ active }), className),
+      className: cn("gap-step-sm flex flex-col-reverse sm:flex-row sm:justify-end", className),
       ...props
     }
   );
 }
-var metrica = ["inline-flex items-center gap-step-xs", "rounded-pill", "font-mono text-chip text-text-muted"];
-function MetricBadge({ className, boxed = false, ...props }) {
+function AlertDialogTitle({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
-    "span",
+    AlertDialogPrimitive.Title,
     {
-      className: cn(metrica, boxed && "border-hairline px-step-sm py-0.5 border", className),
+      className: cn("text-h3 font-display text-text-primary", className),
       ...props
     }
   );
 }
-function Glyph({ children, ...props }) {
+function AlertDialogDescription({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
-    "svg",
+    AlertDialogPrimitive.Description,
     {
-      viewBox: "0 0 16 16",
-      width: "1em",
-      height: "1em",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 1.75,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      focusable: "false",
-      ...props,
-      children
+      className: cn("text-ui text-text-secondary max-w-measure", className),
+      ...props
     }
   );
 }
-var Check = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M3 8.5 6.5 12 13 4.5" }) });
-var Minus = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M3.5 8h9" }) });
-var ChevronDown = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M4 6l4 4 4-4" }) });
-var ChevronUp = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M4 10l4-4 4 4" }) });
-var ChevronLeft = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M10 4L6 8l4 4" }) });
-var ChevronRight = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M6 4l4 4-4 4" }) });
-var Close = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M4 4l8 8M12 4l-8 8" }) });
-var Copy = (props) => /* @__PURE__ */ jsxs(Glyph, { ...props, children: [
-  /* @__PURE__ */ jsx("rect", { x: "5.5", y: "5.5", width: "8", height: "8", rx: "1.5" }),
-  /* @__PURE__ */ jsx("path", { d: "M10.5 3.5h-7a1.5 1.5 0 0 0-1.5 1.5v7" })
-] });
-var ArrowUpRight = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M5 11l6-6M5.5 5h5.5v5.5" }) });
-var Ellipsis = (props) => /* @__PURE__ */ jsx(Glyph, { ...props, strokeWidth: 2.25, children: /* @__PURE__ */ jsx("path", { d: "M4 8h.01M8 8h.01M12 8h.01" }) });
-var Spinner = (props) => /* @__PURE__ */ jsxs(
-  "svg",
+function AlertDialogCancel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Cancel,
+    {
+      className: cn(button({ variant: "secondary" }), className),
+      ...props
+    }
+  );
+}
+function AlertDialogAction({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    AlertDialogPrimitive.Action,
+    {
+      className: cn(button({ variant: "primary" }), className),
+      ...props
+    }
+  );
+}
+var avatar = cva(
+  "relative flex shrink-0 overflow-hidden rounded-pill bg-surface-raised border border-hairline",
   {
-    viewBox: "0 0 16 16",
-    width: "1em",
-    height: "1em",
-    fill: "none",
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    "aria-hidden": "true",
-    focusable: "false",
-    className: "motion-safe:animate-spin",
-    ...props,
-    children: [
-      /* @__PURE__ */ jsx("circle", { cx: "8", cy: "8", r: "6", opacity: 0.3 }),
-      /* @__PURE__ */ jsx("path", { d: "M8 2a6 6 0 0 1 6 6" })
-    ]
+    variants: {
+      size: {
+        sm: "size-8",
+        md: "size-10",
+        lg: "size-14",
+        xl: "size-24"
+      }
+    },
+    defaultVariants: { size: "md" }
   }
 );
-function GlifoMedia({ children, ...props }) {
+function Avatar({ className, size: size2, ...props }) {
+  return /* @__PURE__ */ jsx(AvatarPrimitive.Root, { className: cn(avatar({ size: size2 }), className), ...props });
+}
+function AvatarImage({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(AvatarPrimitive.Image, { className: cn("aspect-square size-full object-cover", className), ...props });
+}
+function AvatarFallback({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsx(
-    "svg",
+    AvatarPrimitive.Fallback,
     {
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: "0 0 24 24",
-      fill: "none",
-      "aria-hidden": "true",
-      focusable: "false",
-      ...props,
-      children
+      className: cn(
+        "text-label font-mono text-text-secondary flex size-full items-center justify-center uppercase",
+        className
+      ),
+      ...props
     }
   );
 }
-var Play = (props) => /* @__PURE__ */ jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" }) });
-var Pause = (props) => /* @__PURE__ */ jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) });
-var Retry = (props) => /* @__PURE__ */ jsx(
-  GlifoMedia,
+var badge = cva(
+  ["inline-flex items-center gap-step-xs", "rounded-chip px-step-xs py-0.5", "font-sans text-tag", "transition-standard"],
   {
-    stroke: "currentColor",
-    strokeWidth: 2,
-    strokeLinecap: "round",
-    strokeLinejoin: "round",
-    ...props,
-    children: /* @__PURE__ */ jsx("path", { d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" })
+    variants: {
+      variant: {
+        neutral: "bg-surface-raised text-text-secondary",
+        accent: "bg-accent/8 text-text-primary",
+        warm: "bg-warm/8 text-text-primary",
+        success: "bg-success/8 text-text-primary",
+        warning: "bg-warning/8 text-text-primary",
+        error: "bg-error/8 text-text-primary"
+      }
+    },
+    defaultVariants: { variant: "neutral" }
   }
 );
-var GoBackSeconds = (props) => /* @__PURE__ */ jsxs(GlifoMedia, { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", ...props, children: [
-  /* @__PURE__ */ jsx("path", { d: "M16.5 8.5H13.8604C13.6452 8.5 13.4541 8.63772 13.386 8.84189L12.7194 10.8419C12.6114 11.1657 12.8524 11.5 13.1937 11.5H14.5C15.6046 11.5 16.5 12.3954 16.5 13.5C16.5 14.6046 15.6046 15.5 14.5 15.5H12.5" }),
-  /* @__PURE__ */ jsx("path", { d: "M7.5 10.5L10 8.5V15.5", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M14 4.5L12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C8.7288 22 5.82446 20.4293 4 18.001M8 2.83209C6.87754 3.32251 5.86251 4.01303 5 4.85857C3.14864 6.67349 2 9.20261 2 12C2 12.6849 2.06886 13.3538 2.20004 14",
-      strokeLinejoin: "round"
-    }
-  )
-] });
-var AdvanceSeconds = (props) => /* @__PURE__ */ jsxs(GlifoMedia, { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", ...props, children: [
-  /* @__PURE__ */ jsx("path", { d: "M16.5 8.5H13.8604C13.6452 8.5 13.4541 8.63772 13.386 8.84189L12.7194 10.8419C12.6114 11.1657 12.8524 11.5 13.1937 11.5H14.5C15.6046 11.5 16.5 12.3954 16.5 13.5C16.5 14.6046 15.6046 15.5 14.5 15.5H12.5" }),
-  /* @__PURE__ */ jsx("path", { d: "M7.5 10.5L10 8.5V15.5", strokeLinejoin: "round" }),
-  /* @__PURE__ */ jsx(
-    "path",
-    {
-      d: "M10 4.5L12 2C6.47715 2 2 6.47715 2 12C2 12.6849 2.06886 13.3538 2.20004 14M16 2.83209C19.5318 4.3752 22 7.89936 22 12C22 17.5228 17.5228 22 12 22C8.72852 22 5.82443 20.4287 4 18",
-      strokeLinejoin: "round"
-    }
-  )
-] });
-var VolumeOn = (props) => /* @__PURE__ */ jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" }) });
-var VolumeMuted = (props) => /* @__PURE__ */ jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" }) });
-var button = cva(
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx("span", { className: cn(badge({ variant }), className), ...props });
+}
+var categoria = cva(
   [
-    "inline-flex cursor-pointer items-center justify-center gap-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"
+    "inline-flex items-center gap-step-xs",
+    "rounded-pill px-step-sm py-0.5",
+    "font-mono text-chip",
+    "border transition-standard"
   ],
   {
     variants: {
-      variant: {
-        primary: [
-          "bg-accent text-accent-on hover:bg-accent-hover",
-          "light:bg-brand-hull light:text-accent-on light:hover:bg-text-secondary"
-        ],
-        conversion: "bg-warm text-warm-on hover:bg-warm-hover",
-        secondary: [
-          "border-hairline-hover border bg-transparent text-text-primary",
-          "hover:border-accent hover:text-accent"
-        ],
-        tertiary: [
-          "bg-transparent font-mono font-normal text-text-secondary",
-          "hover:text-accent hover:underline hover:underline-offset-4"
-        ]
-      },
-      size: {
-        sm: "h-8 px-control-sm text-label",
-        md: "h-10 px-control-md text-ui",
-        lg: "h-12 px-control-lg text-lead",
-        /** Cuadrado 42×42, sin texto. Lleva `aria-label` obligatorio. */
-        icon: "size-control-icon p-0"
+      active: {
+        false: "border-warm/28 bg-transparent text-warm",
+        true: "border-warm bg-warm text-warm-on"
       }
     },
-    compoundVariants: [
-      /**
-       * El terciario no tiene caja: ni padding horizontal ni alto de control.
-       * Va aquí y no como `px-0` en la variante para que gane al `px-*` del
-       * tamaño sin depender del orden en que cva concatena las clases.
-       */
-      { variant: "tertiary", size: ["sm", "md", "lg"], class: "h-auto px-0" }
-    ],
-    defaultVariants: { variant: "primary", size: "md" }
+    defaultVariants: { active: false }
   }
 );
-function Button({
-  className,
-  variant,
-  size: size2,
-  asChild = false,
-  loading = false,
-  icon,
-  children,
-  disabled,
-  ...props
-}) {
-  if (asChild) {
-    return /* @__PURE__ */ jsx(Slot, { className: cn(button({ variant, size: size2 }), className), ...props, children });
-  }
-  return /* @__PURE__ */ jsxs(
-    "button",
+function CategoryBadge({ className, active = false, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
     {
-      className: cn(button({ variant, size: size2 }), className),
-      disabled: disabled === true || loading,
-      "aria-busy": loading || void 0,
-      ...props,
-      children: [
-        loading ? /* @__PURE__ */ jsx(Spinner, {}) : icon,
-        children
-      ]
+      "data-active": active || void 0,
+      className: cn(categoria({ active }), className),
+      ...props
+    }
+  );
+}
+var metrica = ["inline-flex items-center gap-step-xs", "rounded-pill", "font-mono text-chip text-text-muted"];
+function MetricBadge({ className, boxed = false, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(metrica, boxed && "border-hairline px-step-sm py-0.5 border", className),
+      ...props
     }
   );
 }
@@ -442,80 +604,6 @@ function Calendar({
     }
   );
 }
-var ETIQUETA = {
-  display: "h1",
-  stat: "p",
-  h1: "h1",
-  h2: "h2",
-  h3: "h3",
-  body: "p",
-  lead: "p",
-  ui: "p",
-  label: "span",
-  tag: "span",
-  meta: "p",
-  chip: "span",
-  eyebrow: "p"
-};
-var texto = cva("", {
-  variants: {
-    variant: {
-      display: "text-display font-display",
-      // Métricas grandes: 46px de display. Es la única escala pensada para un
-      // número, y por eso el interlineado es 1.
-      stat: "text-stat font-display",
-      h1: "text-h1 font-display",
-      h2: "text-h2 font-display",
-      h3: "text-h3 font-display",
-      body: "text-body font-sans",
-      // 17px: la bajada de las páginas internas y el botón grande.
-      lead: "text-lead font-sans",
-      ui: "text-ui font-sans",
-      label: "text-label font-sans",
-      // Las dos escalas de etiqueta. `tag` es el estado (sans 12.5/500) y `chip`
-      // la categoría y la métrica (mono 11.5). Ninguna transforma el texto.
-      tag: "text-tag font-sans",
-      chip: "text-chip font-mono",
-      // Mono SIN transformar: fechas, rutas, versiones, nombres de archivo y la
-      // firma del footer. Es el escalón que faltaba, y por el que cada sitio de
-      // uso terminaba escribiendo `variant="eyebrow" className="normal-case"`.
-      meta: "text-meta font-mono",
-      // `uppercase` no cabe en un token de tamaño: text-transform no es un
-      // modificador de --text-*. Por eso lo pone la variante y no theme.css.
-      eyebrow: "text-eyebrow font-mono uppercase"
-    },
-    tone: {
-      primary: "text-text-primary",
-      secondary: "text-text-secondary",
-      muted: "text-text-muted",
-      accent: "text-accent",
-      warm: "text-warm",
-      success: "text-success",
-      warning: "text-warning",
-      error: "text-error"
-    }
-  },
-  defaultVariants: { variant: "body", tone: "primary" }
-});
-function Text({
-  className,
-  variant,
-  tone,
-  as,
-  asChild = false,
-  measure,
-  children,
-  ...props
-}) {
-  const escala = variant ?? "body";
-  const limitar = measure ?? escala === "body";
-  const clases = cn(texto({ variant, tone }), limitar && "max-w-measure", className);
-  if (asChild) {
-    return /* @__PURE__ */ jsx(Slot, { className: clases, ...props, children });
-  }
-  const Etiqueta = as ?? ETIQUETA[escala];
-  return /* @__PURE__ */ jsx(Etiqueta, { className: clases, ...props, children });
-}
 var SUPERFICIE_TARJETA = "rounded-card border-hairline bg-surface border";
 var HOVER_TARJETA = "transition-standard hover:border-hairline-hover";
 function Card({ className, ...props }) {
@@ -806,19 +894,6 @@ function Input({ className, invalid = false, ...props }) {
     }
   );
 }
-function Label2({ className, ...props }) {
-  return /* @__PURE__ */ jsx(
-    LabelPrimitive.Root,
-    {
-      className: cn(
-        "text-label font-sans text-text-secondary select-none",
-        "peer-disabled:opacity-50 group-data-[disabled]:opacity-50",
-        className
-      ),
-      ...props
-    }
-  );
-}
 function Pagination({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     "nav",
@@ -1400,6 +1475,76 @@ function ToastDescription({
 }) {
   return /* @__PURE__ */ jsx(ToastPrimitive.Description, { className: cn("max-w-measure", className), ...props });
 }
+var avisos = [];
+var suscriptores = /* @__PURE__ */ new Set();
+var contador = 0;
+function emitir(siguientes) {
+  avisos = siguientes;
+  for (const avisar of suscriptores) avisar();
+}
+var suscribirse = (avisar) => {
+  suscriptores.add(avisar);
+  return () => {
+    suscriptores.delete(avisar);
+  };
+};
+var leer = () => avisos;
+var VACIO = [];
+var enServidor = () => VACIO;
+function crear(mensaje, opciones = {}) {
+  contador += 1;
+  const id = `arrecife-toast-${contador}`;
+  const { description, ...resto } = opciones;
+  emitir([
+    ...avisos,
+    {
+      ...resto,
+      // El primer argumento es la línea principal. Si además llega `title`, el
+      // mensaje pasa a ser la descripción: así `toast('Guardado')` y
+      // `toast('No se pudo guardar', { title: 'Error' })` se leen igual de bien.
+      ...opciones.title ? { description: description ?? mensaje } : { title: mensaje, ...description === void 0 ? {} : { description } },
+      id,
+      abierto: true
+    }
+  ]);
+  return id;
+}
+function descartar(id) {
+  emitir(avisos.map((a) => id === void 0 || a.id === id ? { ...a, abierto: false } : a));
+}
+function retirar(id) {
+  emitir(avisos.filter((a) => a.id !== id));
+}
+var toast2 = Object.assign(crear, {
+  success: (mensaje, opciones = {}) => crear(mensaje, { ...opciones, variant: "success" }),
+  error: (mensaje, opciones = {}) => crear(mensaje, { ...opciones, variant: "error" }),
+  dismiss: descartar
+});
+function Toaster({ duration = 5e3, label = "Avisos" }) {
+  const lista = useSyncExternalStore(suscribirse, leer, enServidor);
+  return /* @__PURE__ */ jsxs(ToastProvider, { duration, label, children: [
+    lista.map(({ id, title, description, variant, duration: propio, action, abierto }) => /* @__PURE__ */ jsxs(
+      Toast,
+      {
+        open: abierto,
+        variant: variant ?? "neutral",
+        ...propio === void 0 ? {} : { duration: propio },
+        onOpenChange: (sigue) => {
+          if (!sigue) retirar(id);
+        },
+        children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            title ? /* @__PURE__ */ jsx(ToastTitle, { children: title }) : null,
+            description ? /* @__PURE__ */ jsx(ToastDescription, { children: description }) : null
+          ] }),
+          action
+        ]
+      },
+      id
+    )),
+    /* @__PURE__ */ jsx(ToastViewport, {})
+  ] });
+}
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
@@ -1439,6 +1584,7 @@ function ArticleCard({
   dateTime,
   readingMinutes,
   tags,
+  headingLevel = 3,
   className,
   ...props
 }) {
@@ -1454,7 +1600,15 @@ function ArticleCard({
       i > 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }) : null,
       m
     ] }, i)) }) : null,
-    /* @__PURE__ */ jsx(Text, { as: "h3", variant: "h3", className: "group-hover:text-accent transition-standard", children: title }),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: headingLevel === 2 ? "h2" : "h3",
+        variant: "h3",
+        className: "group-hover:text-accent transition-standard",
+        children: title
+      }
+    ),
     excerpt ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", className: "line-clamp-2", children: excerpt }) : null,
     tags && tags.length > 0 ? /* @__PURE__ */ jsx("div", { className: "gap-step-xs mt-auto flex flex-wrap pt-step-sm", children: tags.map((t) => /* @__PURE__ */ jsx(CategoryBadge, { children: t }, t)) }) : null
   ] }) });
@@ -2162,10 +2316,12 @@ function Footer({
   social,
   year = (/* @__PURE__ */ new Date()).getFullYear(),
   children,
+  brand: brand2,
   className,
   ...props
 }) {
   return /* @__PURE__ */ jsx("footer", { className: cn("border-hairline w-full border-t", className), ...props, children: /* @__PURE__ */ jsxs("div", { className: "max-w-wide px-step-md py-step-xl gap-step-lg mx-auto flex flex-col", children: [
+    brand2 ? /* @__PURE__ */ jsx("div", { className: "flex items-center", children: brand2 }) : null,
     children ? /* @__PURE__ */ jsx("div", { className: "gap-step-md flex flex-wrap items-center", children }) : null,
     social && social.length > 0 ? (
       // 18px de separación, del documento. No es un escalón de `spacing`:
@@ -2216,9 +2372,11 @@ function Hero({
   action,
   pose,
   basePath,
+  variant = "cabecera",
   className,
   ...props
 }) {
+  const centrado = variant === "centrado";
   return /* @__PURE__ */ jsxs(
     "section",
     {
@@ -2230,13 +2388,39 @@ function Hero({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "gap-step-md flex flex-col md:max-w-[62%]", children: [
-          eyebrow ? /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: eyebrow }) : null,
-          /* @__PURE__ */ jsx(Text, { as: "h1", variant: "display", children: title }),
-          description ? /* @__PURE__ */ jsx(Text, { variant: "body", tone: "secondary", children: description }) : null,
-          action ? /* @__PURE__ */ jsx("div", { className: "gap-step-sm mt-step-xs flex flex-wrap items-center", children: action }) : null
-        ] }),
-        pose ? /* @__PURE__ */ jsx(
+        centrado && pose ? /* @__PURE__ */ jsx(
+          Mascota,
+          {
+            pose,
+            basePath,
+            className: "mb-step-md mx-auto w-48 md:w-56"
+          }
+        ) : null,
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "gap-step-md flex flex-col",
+              centrado ? "items-center text-center" : "md:max-w-[62%]"
+            ),
+            children: [
+              eyebrow ? /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: eyebrow }) : null,
+              /* @__PURE__ */ jsx(Text, { as: "h1", variant: "display", children: title }),
+              description ? /* @__PURE__ */ jsx(Text, { variant: "body", tone: "secondary", children: description }) : null,
+              action ? /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: cn(
+                    "gap-step-sm mt-step-xs flex flex-wrap items-center",
+                    centrado && "justify-center"
+                  ),
+                  children: action
+                }
+              ) : null
+            ]
+          }
+        ),
+        !centrado && pose ? /* @__PURE__ */ jsx(
           Mascota,
           {
             pose,
@@ -2341,6 +2525,10 @@ function NewsletterForm({
   submitLabel = "Suscribirme",
   placeholder = "tu@correo.dev",
   fieldLabel = "Correo electr\xF3nico",
+  nameField = false,
+  nameLabel = "Nombre",
+  namePlaceholder = "C\xF3mo te llamas",
+  nameInputProps,
   className,
   ...props
 }) {
@@ -2351,8 +2539,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__ */ jsx(
+    Button,
+    {
+      type: "submit",
+      variant: "conversion",
+      loading: enviando,
+      className: cn("disabled:opacity-60", nameField && "sm:self-start"),
+      children: submitLabel
+    }
+  );
   return /* @__PURE__ */ jsxs(
     "section",
     {
@@ -2366,34 +2565,44 @@ function NewsletterForm({
           /* @__PURE__ */ jsx(Text, { as: "h2", variant: "h3", children: title }),
           description ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", children: description }) : null
         ] }),
-        /* @__PURE__ */ jsxs("form", { onSubmit: enviar, className: "gap-step-sm flex flex-col sm:flex-row sm:items-end", noValidate: true, children: [
-          /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex flex-1 flex-col", children: [
-            /* @__PURE__ */ jsx(Label2, { htmlFor: id, children: fieldLabel }),
-            /* @__PURE__ */ jsx(
-              Input,
-              {
-                id,
-                name: "email",
-                type: "email",
-                autoComplete: "email",
-                required: true,
-                placeholder,
-                disabled: enviando,
-                invalid: error,
-                "aria-describedby": state === "exito" || error ? `${id}-aviso` : void 0
-              }
-            )
+        /* @__PURE__ */ jsxs("form", { onSubmit: enviar, className: "gap-step-sm flex flex-col", noValidate: true, children: [
+          /* @__PURE__ */ jsxs("div", { className: "gap-step-sm flex flex-col sm:flex-row sm:items-end", children: [
+            nameField ? /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex flex-1 flex-col", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-nombre`, children: nameLabel }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id: `${id}-nombre`,
+                  name: "name",
+                  type: "text",
+                  autoComplete: "name",
+                  required: true,
+                  placeholder: namePlaceholder,
+                  disabled: enviando,
+                  ...nameInputProps
+                }
+              )
+            ] }) : null,
+            /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex flex-1 flex-col", children: [
+              /* @__PURE__ */ jsx(Label, { htmlFor: id, children: fieldLabel }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  id,
+                  name: "email",
+                  type: "email",
+                  autoComplete: "email",
+                  required: true,
+                  placeholder,
+                  disabled: enviando,
+                  invalid: error,
+                  "aria-describedby": state === "exito" || error ? `${id}-aviso` : void 0
+                }
+              )
+            ] }),
+            nameField ? null : boton
           ] }),
-          /* @__PURE__ */ jsx(
-            Button,
-            {
-              type: "submit",
-              variant: "conversion",
-              loading: enviando,
-              className: "disabled:opacity-60",
-              children: submitLabel
-            }
-          )
+          nameField ? boton : null
         ] }),
         state === "exito" ? /* @__PURE__ */ jsx(Alert, { id: `${id}-aviso`, variant: "success", enfasis: "fuerte", children: successMessage }) : null,
         error ? /* @__PURE__ */ jsx(Alert, { id: `${id}-aviso`, variant: "error", enfasis: "fuerte", children: errorMessage }) : null,
@@ -2431,6 +2640,62 @@ function PageHeader({
     action ? /* @__PURE__ */ jsx("div", { className: "gap-step-sm mt-step-sm flex flex-wrap items-center", children: action }) : null
   ] });
 }
+function ScrollingProgressBar({
+  target,
+  tone = "accent",
+  sticky = true,
+  className,
+  ...props
+}) {
+  const [avance, setAvance] = useState(0);
+  const pendiente = useRef(0);
+  useEffect(() => {
+    const medir = () => {
+      pendiente.current = 0;
+      const elemento = target?.current;
+      const inicio = elemento ? elemento.getBoundingClientRect().top + scrollY : 0;
+      const alto = elemento ? elemento.offsetHeight : document.documentElement.scrollHeight;
+      const recorrible = alto - innerHeight;
+      if (recorrible <= 0) {
+        setAvance(scrollY >= inicio ? 100 : 0);
+        return;
+      }
+      const recorrido = scrollY - inicio;
+      setAvance(Math.min(100, Math.max(0, recorrido / recorrible * 100)));
+    };
+    const alMoverse = () => {
+      if (pendiente.current) return;
+      pendiente.current = requestAnimationFrame(medir);
+    };
+    medir();
+    addEventListener("scroll", alMoverse, { passive: true });
+    addEventListener("resize", alMoverse);
+    return () => {
+      if (pendiente.current) cancelAnimationFrame(pendiente.current);
+      removeEventListener("scroll", alMoverse);
+      removeEventListener("resize", alMoverse);
+    };
+  }, [target]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "h-1 w-full overflow-hidden",
+        sticky && "sticky top-0 z-40",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn("h-full", tone === "warm" ? "bg-warm" : "bg-accent"),
+          style: { width: `${avance}%` }
+        }
+      )
+    }
+  );
+}
 function SidebarItem({
   active = false,
   asChild = false,
@@ -2516,6 +2781,7 @@ function TalkCard({
   dateTime,
   location,
   status,
+  description,
   className,
   ...props
 }) {
@@ -2529,12 +2795,43 @@ function TalkCard({
       status ? /* @__PURE__ */ jsx(Badge, { variant: "neutral", children: status }) : null
     ] }),
     /* @__PURE__ */ jsx(Text, { as: "h3", variant: "h3", className: "group-hover:text-accent transition-standard", children: title }),
+    description ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", className: "line-clamp-2", children: description }) : null,
     pie.length > 0 ? /* @__PURE__ */ jsx(Text, { variant: "label", tone: "muted", as: "p", className: "gap-step-xs mt-auto flex items-center pt-step-sm", children: pie.map((m, i) => /* @__PURE__ */ jsxs("span", { className: "gap-step-xs flex items-center", children: [
       i > 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }) : null,
       m
     ] }, i)) }) : null
   ] }) });
 }
+function ThemeToggle({
+  label = "Cambiar de tema",
+  onThemeChange,
+  variant = "secondary",
+  size: size2 = "icon",
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    Button,
+    {
+      type: "button",
+      variant,
+      size: size2,
+      "aria-label": label,
+      className: cn("[&_svg]:size-[19px]", className),
+      onClick: () => onThemeChange?.(alternarTema()),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(Sol, { className: "light:hidden" }),
+        /* @__PURE__ */ jsx(Luna, { className: "hidden light:block" })
+      ]
+    }
+  );
+}
+function useTema() {
+  return useSyncExternalStore(suscribirse2, temaActual, servidor);
+}
+var suscribirse2 = (avisar) => escucharTema(() => avisar());
+var servidor = () => "dark";
 function TableOfContents({
   items,
   title = "En esta p\xE1gina",
@@ -2553,7 +2850,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__ */ jsx("li", { children: linkAsChild ? /* @__PURE__ */ jsx(Slot, { className: clases, "aria-current": activo ? "location" : void 0, children: linkAsChild({ href: item2.href, children: item2.label }) }) : /* @__PURE__ */ jsx("a", { href: item2.href, className: clases, "aria-current": activo ? "location" : void 0, children: item2.label }) }, item2.href);
     }) })
@@ -2621,4 +2922,4 @@ var Correo = (props) => /* @__PURE__ */ jsxs(Funcional, { ...props, children: [
   /* @__PURE__ */ jsx("path", { d: "m3.5 7.5 7.4 5.2a2 2 0 0 0 2.2 0l7.4-5.2" })
 ] });
 
-export { Alert, ArticleCard, AudioPlayer, AuthorCard, Avatar, AvatarFallback, AvatarImage, Badge, Blockquote, Breadcrumb, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryBadge, Checkbox, Code, CodeBlock, CourseCard, DateField, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, Footer, FooterLink, HOVER_TARJETA, Hero, Input, Label2 as Label, LinkRow, MetricBadge, Nav, NavItem, NewsletterForm, PageHeader, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup2 as RadioGroup, RadioGroupItem, SUPERFICIE_TARJETA, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarItem, SidebarNav, Skeleton, Stat, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TalkCard, Text, Textarea, Toast, ToastAction, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, categoria as categoryBadgeVariants, social_exports as social, texto as textVariants };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, ArticleCard, AudioPlayer, AuthorCard, Avatar, AvatarFallback, AvatarImage, Badge, Blockquote, Breadcrumb, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CategoryBadge, Checkbox, Code, CodeBlock, CourseCard, DateField, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, Footer, FooterLink, HOVER_TARJETA, Hero, Input, LinkRow, MetricBadge, Nav, NavItem, NewsletterForm, PageHeader, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup2 as RadioGroup, RadioGroupItem, SUPERFICIE_TARJETA, ScrollingProgressBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarItem, SidebarNav, Skeleton, Stat, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TalkCard, Textarea, ThemeToggle, Toast, ToastAction, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, categoria as categoryBadgeVariants, social_exports as social, toast2 as toast, useTema };