@eduardoalvarez/arrecife 0.5.1 → 0.7.0

package/dist/index.js

@@ -1,25 +1,30 @@
-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-YZ2SDOVZ.js';
-export { CaraDeMascota, Isotipo, Logo, Mascota } from './chunk-YZ2SDOVZ.js';
-export { RUTA_ASSETS, aletas, caras, listaCaras, listaPoses, poses, usoDeCara } from './chunk-E3OMP2DL.js';
-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';
+'use client';
+import { Label } from './chunk-727HCBD4.js';
+export { Label } from './chunk-727HCBD4.js';
+import { Text } from './chunk-WGNIRIN7.js';
+export { Text } from './chunk-WGNIRIN7.js';
+export { tokens } from './chunk-TA7TLWW4.js';
+import { toggleTheme, currentTheme, watchTheme } from './chunk-GCRII2KQ.js';
+export { THEME_ATTRIBUTE, THEME_EVENT, THEME_KEY, applyTheme, currentTheme, preferredTheme, storedTheme, themeScript, toggleTheme, watchTheme } from './chunk-GCRII2KQ.js';
+import { alert, button, avatar, badge, category, metric, CARD_SURFACE, CARD } from './chunk-E6KFUSKB.js';
+export { CARD, CARD_HOVER, CARD_SURFACE, alert as alertVariants, avatar as avatarVariants, badge as badgeVariants, button as buttonVariants, category as categoryBadgeVariants, metric as metricBadgeVariants } from './chunk-E6KFUSKB.js';
+export { text as textVariants } from './chunk-ODBFN44D.js';
+import { MascotFace, Mascot } from './chunk-JN3IS5OS.js';
+export { Isotype, Logo, Mascot, MascotFace } from './chunk-JN3IS5OS.js';
+export { social_exports as social } from './chunk-45HVCTB7.js';
+import { cn } from './chunk-2WPWEIMD.js';
+export { cn } from './chunk-2WPWEIMD.js';
+export { ASSETS_PATH, faceList, faceUsage, faces, fins, poseList, poses } from './chunk-CKRSQPTX.js';
+import { naming } from './chunk-OMKSESQB.js';
+export { brand, colors, control, dark, fonts, gradient, light, limits, motion, naming, radius, series, shadow, size, spacing, syntax, tagline, typeScale } from './chunk-OMKSESQB.js';
+import './chunk-MLKGABMK.js';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 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 { useId, useState, useEffect, useSyncExternalStore, useRef, useCallback } from 'react';
+import { createContext, useId, useState, useEffect, useSyncExternalStore, useRef, useCallback, useContext } from 'react';
+import { Slot } from '@radix-ui/react-slot';
 import { es } from 'date-fns/locale';
 import { DayPicker } from 'react-day-picker';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
@@ -88,16 +93,16 @@ var Spinner = (props) => /* @__PURE__ */ jsxs(
     ]
   }
 );
-var Camara = (props) => /* @__PURE__ */ jsxs(Glyph, { ...props, children: [
+var Camera = (props) => /* @__PURE__ */ jsxs(Glyph, { ...props, children: [
   /* @__PURE__ */ jsx("path", { d: "M2 5.5h2.6l1-1.5h4.8l1 1.5H14v7.5H2z" }),
   /* @__PURE__ */ jsx("circle", { cx: "8", cy: "9", r: "2.4" })
 ] });
-var Sol = (props) => /* @__PURE__ */ jsxs(Glyph, { ...props, children: [
+var Sun = (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 }) {
+var Moon = (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 MediaGlyph({ children, ...props }) {
   return /* @__PURE__ */ jsx(
     "svg",
     {
@@ -111,10 +116,10 @@ function GlifoMedia({ children, ...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 Play = (props) => /* @__PURE__ */ jsx(MediaGlyph, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M8 5v14l11-7z" }) });
+var Pause = (props) => /* @__PURE__ */ jsx(MediaGlyph, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) });
 var Retry = (props) => /* @__PURE__ */ jsx(
-  GlifoMedia,
+  MediaGlyph,
   {
     stroke: "currentColor",
     strokeWidth: 2,
@@ -124,7 +129,7 @@ var Retry = (props) => /* @__PURE__ */ jsx(
     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: [
+var GoBackSeconds = (props) => /* @__PURE__ */ jsxs(MediaGlyph, { 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(
@@ -135,7 +140,7 @@ var GoBackSeconds = (props) => /* @__PURE__ */ jsxs(GlifoMedia, { stroke: "curre
     }
   )
 ] });
-var AdvanceSeconds = (props) => /* @__PURE__ */ jsxs(GlifoMedia, { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", ...props, children: [
+var AdvanceSeconds = (props) => /* @__PURE__ */ jsxs(MediaGlyph, { 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(
@@ -146,8 +151,8 @@ var AdvanceSeconds = (props) => /* @__PURE__ */ jsxs(GlifoMedia, { stroke: "curr
     }
   )
 ] });
-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 VolumeOn = (props) => /* @__PURE__ */ jsx(MediaGlyph, { 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(MediaGlyph, { 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,
@@ -169,8 +174,8 @@ function AccordionTrigger({
   headingLevel = 3,
   ...props
 }) {
-  const Encabezado = `h${headingLevel}`;
-  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { asChild: true, children: /* @__PURE__ */ jsx(Encabezado, { children: /* @__PURE__ */ jsxs(
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsx(AccordionPrimitive.Header, { asChild: true, children: /* @__PURE__ */ jsx(Heading, { children: /* @__PURE__ */ jsxs(
     AccordionPrimitive.Trigger,
     {
       className: cn(
@@ -178,7 +183,7 @@ function AccordionTrigger({
         "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",
+        "focus-ring",
         "disabled:pointer-events-none disabled:opacity-50",
         "[&[data-state=open]>svg]:rotate-180",
         className
@@ -201,45 +206,20 @@ function AccordionContent({
     {
       className: cn(
         "overflow-hidden",
-        "motion-safe:data-[state=open]:desplegar motion-safe:data-[state=closed]:replegar"
+        "motion-safe:data-[state=open]:expand motion-safe:data-[state=closed]:collapse"
       ),
       ...props,
       children: /* @__PURE__ */ jsx("div", { className: cn("pb-step-md font-sans text-ui text-text-secondary max-w-measure", className), children })
     }
   );
 }
-var alert = cva("w-full rounded-card border p-step-md font-sans text-ui", {
-  variants: {
-    variant: {
-      accent: "text-text-secondary",
-      success: "text-text-secondary",
-      warning: "text-text-secondary",
-      error: "text-text-secondary"
-    },
-    enfasis: {
-      sutil: "",
-      fuerte: ""
-    }
-  },
-  compoundVariants: [
-    { variant: "accent", enfasis: "sutil", class: "border-accent/22 bg-accent/8" },
-    { variant: "success", enfasis: "sutil", class: "border-success/22 bg-success/8" },
-    { variant: "warning", enfasis: "sutil", class: "border-warning/22 bg-warning/8" },
-    { variant: "error", enfasis: "sutil", class: "border-error/22 bg-error/8" },
-    { variant: "accent", enfasis: "fuerte", class: "border-accent bg-accent/10" },
-    { variant: "success", enfasis: "fuerte", class: "border-success bg-success/10" },
-    { variant: "warning", enfasis: "fuerte", class: "border-warning bg-warning/10" },
-    { variant: "error", enfasis: "fuerte", class: "border-error bg-error/10" }
-  ],
-  defaultVariants: { variant: "accent", enfasis: "sutil" }
-});
-var glifoColor = {
+var colorGlyph = {
   accent: "text-accent",
   success: "text-success",
   warning: "text-warning",
   error: "text-error"
 };
-var GLIFO = {
+var GLYPH = {
   accent: "\u2726",
   success: "\u2713",
   warning: "!",
@@ -248,26 +228,26 @@ var GLIFO = {
 function Alert({
   className,
   variant,
-  enfasis,
+  emphasis,
   title,
   icon,
   children,
   ...props
 }) {
-  const tono = variant ?? "accent";
+  const tone = variant ?? "accent";
   return /* @__PURE__ */ jsx(
     "div",
     {
-      role: tono === "error" ? "alert" : "status",
-      className: cn(alert({ variant, enfasis }), className),
+      role: tone === "error" ? "alert" : "status",
+      className: cn(alert({ variant, emphasis }), className),
       ...props,
       children: /* @__PURE__ */ jsxs("div", { className: "gap-step-sm flex items-start", children: [
         /* @__PURE__ */ jsx(
           "span",
           {
             "aria-hidden": "true",
-            className: cn("font-mono text-ui leading-normal select-none", glifoColor[tono]),
-            children: icon ?? GLIFO[tono]
+            className: cn("font-mono text-ui leading-normal select-none", colorGlyph[tone]),
+            children: icon ?? GLYPH[tone]
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -278,79 +258,6 @@ function Alert({
     }
   );
 }
-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: "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__ */ 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
-      ]
-    }
-  );
-}
 var AlertDialog = AlertDialogPrimitive.Root;
 var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 function AlertDialogOverlay({
@@ -448,20 +355,6 @@ function AlertDialogAction({
     }
   );
 }
-var avatar = cva(
-  "relative flex shrink-0 overflow-hidden rounded-pill bg-surface-raised border border-hairline",
-  {
-    variants: {
-      size: {
-        sm: "size-8",
-        md: "size-10",
-        lg: "size-14",
-        xl: "size-24"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
 function Avatar({ className, size: size2, ...props }) {
   return /* @__PURE__ */ jsx(AvatarPrimitive.Root, { className: cn(avatar({ size: size2 }), className), ...props });
 }
@@ -498,22 +391,22 @@ function AvatarUpload({
   ...props
 }) {
   const id = useId();
-  const [previa, setPrevia] = useState(null);
+  const [preview, setPreview] = useState(null);
   useEffect(() => {
-    if (!previa) return;
-    return () => URL.revokeObjectURL(previa);
-  }, [previa]);
-  function elegir(evento) {
-    const archivo = evento.target.files?.[0];
-    if (!archivo) return;
-    setPrevia(URL.createObjectURL(archivo));
-    onSelectFile?.(archivo);
-    evento.target.value = "";
+    if (!preview) return;
+    return () => URL.revokeObjectURL(preview);
+  }, [preview]);
+  function pick(event) {
+    const file = event.target.files?.[0];
+    if (!file) return;
+    setPreview(URL.createObjectURL(file));
+    onSelectFile?.(file);
+    event.target.value = "";
   }
-  const imagen = previa ?? src;
+  const image = preview ?? src;
   return /* @__PURE__ */ jsxs("div", { className: cn("relative inline-flex", className), ...props, children: [
     /* @__PURE__ */ jsxs(Avatar, { size: size2, children: [
-      imagen ? /* @__PURE__ */ jsx(AvatarImage, { src: imagen, alt: "" }) : null,
+      image ? /* @__PURE__ */ jsx(AvatarImage, { src: image, alt: "" }) : null,
       /* @__PURE__ */ jsx(AvatarFallback, { children: fallback })
     ] }),
     /* @__PURE__ */ jsxs(
@@ -524,13 +417,13 @@ function AvatarUpload({
           "rounded-pill absolute -right-1 -bottom-1 flex size-6 cursor-pointer items-center justify-center",
           "border-hairline bg-surface-raised text-text-secondary border",
           "transition-standard hover:text-accent hover:border-accent",
-          // El foco vive en el input, que está oculto: sin esto, tabular hasta
-          // el control no se ve por ninguna parte.
-          "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-accent",
+          // Focus lives on the input, which is hidden: without this, tabbing to
+          // the control shows up nowhere.
+          "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-3 has-[:focus-visible]:outline-accent",
           disabled && "pointer-events-none opacity-50"
         ),
         children: [
-          /* @__PURE__ */ jsx(Camara, { "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx(Camera, { "aria-hidden": "true" }),
           /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
           /* @__PURE__ */ jsx(
             "input",
@@ -539,7 +432,7 @@ function AvatarUpload({
               type: "file",
               accept,
               disabled,
-              onChange: elegir,
+              onChange: pick,
               className: "sr-only"
             }
           )
@@ -548,62 +441,56 @@ function AvatarUpload({
     )
   ] });
 }
-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"
-      }
-    },
-    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 }) {
   return /* @__PURE__ */ jsx(
     "span",
     {
       "data-active": active || void 0,
-      className: cn(categoria({ active }), className),
+      className: cn(category({ 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),
+      className: cn(metric, boxed && "border-hairline px-step-sm py-0.5 border", className),
       ...props
     }
   );
 }
+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",
+    {
+      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 Calendar({
   className,
   classNames,
@@ -611,24 +498,24 @@ function Calendar({
   fullWidth = false,
   ...props
 }) {
-  const dia = [
+  const day = [
     "relative p-0 text-center",
     fullWidth ? "h-9 flex-1" : "size-9",
     "text-ui font-sans text-text-primary"
   ].join(" ");
-  const botonDia = [
+  const dayButton = [
     fullWidth ? "h-9 w-full" : "size-9",
     "rounded-chip inline-flex items-center justify-center",
     "transition-standard cursor-pointer",
     "hover:bg-surface-raised",
-    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+    "focus-ring",
     "disabled:pointer-events-none disabled:opacity-50"
   ].join(" ");
-  const navegacion = [
+  const navigation = [
     "size-8 rounded-chip inline-flex items-center justify-center",
     "text-text-secondary transition-standard cursor-pointer",
     "hover:bg-surface-raised hover:text-text-primary",
-    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+    "focus-ring",
     "disabled:pointer-events-none disabled:opacity-50"
   ].join(" ");
   return /* @__PURE__ */ jsx(
@@ -638,32 +525,32 @@ function Calendar({
       showOutsideDays,
       className: cn("font-sans", className),
       classNames: {
-        // `relative` obligatorio: la navegación se posiciona en absoluto contra
-        // la raíz, y sin esto se ancla al primer ancestro posicionado —o al
-        // viewport— y las flechas acaban en los bordes de la página.
+        // `relative` is mandatory: the navigation is absolutely positioned
+        // against the root, and without this it anchors to the first positioned
+        // ancestor — or to the viewport — and the arrows end up at the page edges.
         root: cn("relative", fullWidth ? "w-full" : "w-fit"),
         months: cn("gap-step-md flex flex-col sm:flex-row", fullWidth && "w-full"),
         month: cn("gap-step-sm flex flex-col", fullWidth && "min-w-0 flex-1"),
         month_caption: "h-8 flex items-center justify-center",
         caption_label: "text-ui font-sans font-medium text-text-primary capitalize",
         nav: "absolute inset-x-0 top-0 flex items-center justify-between",
-        button_previous: navegacion,
-        button_next: navegacion,
+        button_previous: navigation,
+        button_next: navigation,
         month_grid: "w-full border-collapse",
         weekdays: cn("flex", fullWidth && "w-full"),
-        // `textMuted` no va sobre `surfaceRaised` —4.07:1—, y un calendario dentro de
-        // un Popover vive justo ahí.
+        // `textMuted` does not go over `surfaceRaised` — 4.07:1 — and a calendar
+        // inside a Popover lives exactly there.
         weekday: cn(
           "h-9 text-eyebrow font-mono text-text-secondary uppercase flex items-center justify-center",
           fullWidth ? "flex-1" : "w-9"
         ),
         week: "flex w-full",
-        day: dia,
-        day_button: botonDia,
+        day,
+        day_button: dayButton,
         today: "text-accent font-medium",
-        // Los días de los meses vecinos se atenúan, pero no por debajo de AA:
-        // `textSecondary` al 85 % da 5.09:1 en el peor caso, que es sobre
-        // `surfaceRaised`. Al 75 % ya no pasa en modo claro.
+        // Days from neighbouring months are dimmed, but not below AA:
+        // `textSecondary` at 85 % gives 5.09:1 in the worst case, which is over
+        // `surfaceRaised`. At 75 % it no longer passes in light mode.
         outside: "text-text-secondary opacity-85",
         disabled: "opacity-50",
         hidden: "invisible",
@@ -681,10 +568,8 @@ function Calendar({
     }
   );
 }
-var SUPERFICIE_TARJETA = "rounded-card border-hairline bg-surface border";
-var HOVER_TARJETA = "transition-standard hover:border-hairline-hover";
 function Card({ className, ...props }) {
-  return /* @__PURE__ */ jsx("div", { className: cn(SUPERFICIE_TARJETA, className), ...props });
+  return /* @__PURE__ */ jsx("div", { className: cn(CARD_SURFACE, className), ...props });
 }
 function CardHeader({ className, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("gap-step-xs p-step-lg flex flex-col", className), ...props });
@@ -715,7 +600,7 @@ function Checkbox({ className, ...props }) {
         "rounded-chip border-border bg-surface size-5 shrink-0 cursor-pointer border",
         "text-accent-on transition-standard",
         "hover:border-hairline-hover",
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-ring",
         "disabled:pointer-events-none disabled:opacity-50",
         "data-[state=checked]:border-accent data-[state=checked]:bg-accent",
         "data-[state=indeterminate]:border-accent data-[state=indeterminate]:bg-accent",
@@ -758,10 +643,10 @@ function DateField({
         "font-mono text-ui text-text-primary",
         "transition-standard",
         "hover:border-hairline-hover",
-        "focus-visible:border-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-visible:border-accent focus-ring",
         "disabled:pointer-events-none disabled:opacity-50",
         "data-[invalid]:border-error data-[invalid]:focus-visible:outline-error",
-        // El indicador nativo hereda el esquema del tema activo.
+        // The native indicator inherits the active theme's scheme.
         "scheme-light dark:scheme-dark [&::-webkit-calendar-picker-indicator]:cursor-pointer",
         className
       ),
@@ -812,7 +697,7 @@ function DialogContent({
                 "rounded-chip text-text-muted absolute top-4 right-4 flex size-8 cursor-pointer items-center justify-center",
                 "transition-standard",
                 "hover:bg-surface-raised hover:text-text-primary",
-                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+                "focus-ring"
               ),
               children: /* @__PURE__ */ jsx(Close, {})
             }
@@ -961,7 +846,7 @@ function Input({ className, invalid = false, ...props }) {
         "font-sans text-ui text-text-primary placeholder:text-text-muted",
         "transition-standard",
         "hover:border-hairline-hover",
-        "focus-visible:border-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-visible:border-accent focus-ring",
         "disabled:pointer-events-none disabled:opacity-50",
         "data-[invalid]:border-error data-[invalid]:focus-visible:outline-error",
         "file:mr-step-sm file:border-0 file:bg-transparent file:font-sans file:text-label file:text-text-secondary",
@@ -998,7 +883,7 @@ function PaginationLink({ className, isActive = false, ...props }) {
         "font-sans text-ui text-text-secondary",
         "transition-standard",
         "hover:bg-surface hover:text-text-primary",
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-ring",
         isActive && "bg-surface-raised text-text-primary",
         className
       ),
@@ -1083,7 +968,7 @@ function RadioGroupItem({ className, ...props }) {
         "rounded-pill border-border bg-surface size-5 shrink-0 cursor-pointer border",
         "transition-standard",
         "hover:border-hairline-hover",
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-ring",
         "disabled:pointer-events-none disabled:opacity-50",
         "data-[state=checked]:border-accent",
         className
@@ -1110,7 +995,7 @@ function SelectTrigger({
         "font-sans text-ui text-text-primary",
         "transition-standard",
         "hover:border-hairline-hover",
-        "focus-visible:border-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-visible:border-accent focus-ring",
         "disabled:pointer-events-none disabled:opacity-50",
         "data-[placeholder]:text-text-muted",
         className
@@ -1224,23 +1109,23 @@ var panel2 = cva(
       side: {
         right: [
           "inset-y-0 right-0 h-full w-3/4 max-w-content border-l",
-          "motion-safe:data-[state=open]:deslizar-entra-derecha",
-          "motion-safe:data-[state=closed]:deslizar-sale-derecha"
+          "motion-safe:data-[state=open]:slide-in-right",
+          "motion-safe:data-[state=closed]:slide-out-right"
         ],
         left: [
           "inset-y-0 left-0 h-full w-3/4 max-w-content border-r",
-          "motion-safe:data-[state=open]:deslizar-entra-izquierda",
-          "motion-safe:data-[state=closed]:deslizar-sale-izquierda"
+          "motion-safe:data-[state=open]:slide-in-left",
+          "motion-safe:data-[state=closed]:slide-out-left"
         ],
         top: [
           "inset-x-0 top-0 border-b",
-          "motion-safe:data-[state=open]:deslizar-entra-arriba",
-          "motion-safe:data-[state=closed]:deslizar-sale-arriba"
+          "motion-safe:data-[state=open]:slide-in-top",
+          "motion-safe:data-[state=closed]:slide-out-top"
         ],
         bottom: [
           "inset-x-0 bottom-0 border-t",
-          "motion-safe:data-[state=open]:deslizar-entra-abajo",
-          "motion-safe:data-[state=closed]:deslizar-sale-abajo"
+          "motion-safe:data-[state=open]:slide-in-bottom",
+          "motion-safe:data-[state=closed]:slide-out-bottom"
         ]
       }
     },
@@ -1260,7 +1145,7 @@ function SheetContent({ className, side, children, ...props }) {
             "rounded-chip text-text-muted absolute top-4 right-4 flex size-8 cursor-pointer items-center justify-center",
             "transition-standard",
             "hover:bg-surface-raised hover:text-text-primary",
-            "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+            "focus-ring"
           ),
           children: /* @__PURE__ */ jsx(Close, {})
         }
@@ -1335,7 +1220,7 @@ function Switch({ className, ...props }) {
         "rounded-pill border-border bg-surface-raised inline-flex h-6 w-11 shrink-0 cursor-pointer items-center border",
         "transition-standard",
         "hover:border-hairline-hover",
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-ring",
         "disabled:pointer-events-none disabled:opacity-50",
         "data-[state=checked]:border-accent data-[state=checked]:bg-accent",
         className
@@ -1436,7 +1321,7 @@ function TabsTrigger({
         "font-sans text-label text-text-secondary",
         "transition-standard",
         "hover:text-text-primary",
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-ring",
         "disabled:pointer-events-none disabled:opacity-50",
         "data-[state=active]:bg-surface-raised data-[state=active]:text-text-primary",
         className
@@ -1453,7 +1338,7 @@ function TabsContent({
     TabsPrimitive.Content,
     {
       className: cn(
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-ring",
         className
       ),
       ...props
@@ -1472,7 +1357,7 @@ function Textarea({ className, invalid = false, ...props }) {
         "font-sans text-ui text-text-primary placeholder:text-text-muted",
         "transition-standard",
         "hover:border-hairline-hover",
-        "focus-visible:border-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-visible:border-accent focus-ring",
         "disabled:pointer-events-none disabled:opacity-50",
         "data-[invalid]:border-error data-[invalid]:focus-visible:outline-error",
         className
@@ -1527,7 +1412,7 @@ function Toast({ className, variant, children, ...props }) {
           "rounded-chip text-text-muted absolute top-3 right-3 flex size-7 cursor-pointer items-center justify-center",
           "transition-standard",
           "hover:bg-surface-raised hover:text-text-primary",
-          "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+          "focus-ring"
         ),
         children: /* @__PURE__ */ jsx(Close, {})
       }
@@ -1552,62 +1437,62 @@ 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 warnings = [];
+var subscribers = /* @__PURE__ */ new Set();
+var counter = 0;
+function emit(next) {
+  warnings = next;
+  for (const warn of subscribers) warn();
 }
-var suscribirse = (avisar) => {
-  suscriptores.add(avisar);
+var subscribe = (warn) => {
+  subscribers.add(warn);
   return () => {
-    suscriptores.delete(avisar);
+    subscribers.delete(warn);
   };
 };
-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 } },
+var read = () => warnings;
+var EMPTY = [];
+var onServer = () => EMPTY;
+function create(message, options = {}) {
+  counter += 1;
+  const id = `arrecife-toast-${counter}`;
+  const { description, ...rest } = options;
+  emit([
+    ...warnings,
+    {
+      ...rest,
+      // The first argument is the main line. If a `title` also arrives, the
+      // message becomes the description: that way `toast('Guardado')` and
+      // `toast('No se pudo guardar', { title: 'Error' })` both read well.
+      ...options.title ? { description: description ?? message } : { title: message, ...description === void 0 ? {} : { description } },
       id,
-      abierto: true
+      open: true
     }
   ]);
   return id;
 }
-function descartar(id) {
-  emitir(avisos.map((a) => id === void 0 || a.id === id ? { ...a, abierto: false } : a));
+function discard(id) {
+  emit(warnings.map((a) => id === void 0 || a.id === id ? { ...a, open: false } : a));
 }
-function retirar(id) {
-  emitir(avisos.filter((a) => a.id !== id));
+function remove(id) {
+  emit(warnings.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
+var toast2 = Object.assign(create, {
+  success: (message, options = {}) => create(message, { ...options, variant: "success" }),
+  error: (message, options = {}) => create(message, { ...options, variant: "error" }),
+  dismiss: discard
 });
 function Toaster({ duration = 5e3, label = "Avisos" }) {
-  const lista = useSyncExternalStore(suscribirse, leer, enServidor);
+  const list = useSyncExternalStore(subscribe, read, onServer);
   return /* @__PURE__ */ jsxs(ToastProvider, { duration, label, children: [
-    lista.map(({ id, title, description, variant, duration: propio, action, abierto }) => /* @__PURE__ */ jsxs(
+    list.map(({ id, title, description, variant, duration: own, action, open }) => /* @__PURE__ */ jsxs(
       Toast,
       {
-        open: abierto,
+        open,
         variant: variant ?? "neutral",
-        ...propio === void 0 ? {} : { duration: propio },
-        onOpenChange: (sigue) => {
-          if (!sigue) retirar(id);
+        ...own === void 0 ? {} : { duration: own },
+        onOpenChange: (stillOpen) => {
+          if (!stillOpen) remove(id);
         },
         children: [
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -1644,15 +1529,9 @@ function TooltipContent({
     }
   ) });
 }
-var TARJETA = [
-  "group block cursor-pointer",
-  SUPERFICIE_TARJETA,
-  HOVER_TARJETA,
-  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
-];
-function Tarjeta({ asChild = false, className, children, ...props }) {
-  const Raiz = asChild ? Slot : "a";
-  return /* @__PURE__ */ jsx(Raiz, { className: cn(TARJETA, className), ...props, children });
+function CardShell({ asChild = false, className, children, ...props }) {
+  const Root17 = asChild ? Slot : "a";
+  return /* @__PURE__ */ jsx(Root17, { className: cn(CARD, className), ...props, children });
 }
 function ArticleCard({
   title,
@@ -1662,17 +1541,18 @@ function ArticleCard({
   readingMinutes,
   tags,
   headingLevel = 3,
+  tagAsChild,
   className,
   ...props
 }) {
   const meta = [
-    date ? /* @__PURE__ */ jsx("time", { dateTime, children: date }, "fecha") : null,
+    date ? /* @__PURE__ */ jsx("time", { dateTime, children: date }, "date") : null,
     readingMinutes ? /* @__PURE__ */ jsxs("span", { children: [
       readingMinutes,
       " min de lectura"
     ] }, "lectura") : null
   ].filter(Boolean);
-  return /* @__PURE__ */ jsx(Tarjeta, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
+  return /* @__PURE__ */ jsx(CardShell, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
     meta.length > 0 ? /* @__PURE__ */ jsx(Text, { variant: "meta", tone: "muted", as: "p", className: "gap-step-xs flex items-center", children: meta.map((m, i) => /* @__PURE__ */ jsxs("span", { className: "gap-step-xs flex items-center", children: [
       i > 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "\xB7" }) : null,
       m
@@ -1687,18 +1567,20 @@ function ArticleCard({
       }
     ),
     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
+    tags && tags.length > 0 ? /* @__PURE__ */ jsx("div", { className: "gap-step-xs mt-auto flex flex-wrap pt-step-sm", children: tags.map(
+      (t) => tagAsChild ? /* @__PURE__ */ jsx(Slot, { className: category({ active: false }), children: tagAsChild({ tag: t, children: t }) }, t) : /* @__PURE__ */ jsx(CategoryBadge, { children: t }, t)
+    ) }) : null
   ] }) });
 }
 var AVATAR = "size-[52px]";
-function iniciales(nombre) {
-  return nombre.split(/\s+/).slice(0, 2).map((p) => p[0] ?? "").join("").toUpperCase();
+function initials(name) {
+  return name.split(/\s+/).slice(0, 2).map((p) => p[0] ?? "").join("").toUpperCase();
 }
 function AuthorCard({ name, role, src, bio, action, className, ...props }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn(SUPERFICIE_TARJETA, "p-step-lg gap-step-md flex items-start", className), ...props, children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn(CARD_SURFACE, "p-step-lg gap-step-md flex items-start", className), ...props, children: [
     /* @__PURE__ */ jsxs(Avatar, { className: cn(AVATAR, "shrink-0"), children: [
       src ? /* @__PURE__ */ jsx(AvatarImage, { src, alt: "" }) : null,
-      /* @__PURE__ */ jsx(AvatarFallback, { children: iniciales(name) })
+      /* @__PURE__ */ jsx(AvatarFallback, { children: initials(name) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex min-w-0 flex-1 flex-col", children: [
       /* @__PURE__ */ jsx(Text, { variant: "ui", as: "p", className: "font-medium", children: name }),
@@ -1716,45 +1598,45 @@ function formatTime(seconds) {
 }
 var WAVEFORM_HEIGHTS = [35, 65, 100, 65, 35];
 var RATES = [1, 1.25, 1.5, 1.75, 2];
-function Onda({ grosor, alto, sonando }) {
-  return /* @__PURE__ */ jsx("div", { className: cn("flex items-end gap-[2px]", alto), "aria-hidden": "true", children: WAVEFORM_HEIGHTS.map((h, i) => /* @__PURE__ */ jsx(
+function Wave({ strokeWidth, height, playing }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("flex items-end gap-[2px]", height), "aria-hidden": "true", children: WAVEFORM_HEIGHTS.map((h, i) => /* @__PURE__ */ jsx(
     "span",
     {
-      className: cn("rounded-pill bg-accent transition-standard", grosor),
-      style: { height: `${h}%`, opacity: sonando ? 1 : 0.3 + h / 100 * 0.4 }
+      className: cn("rounded-pill bg-accent transition-standard", strokeWidth),
+      style: { height: `${h}%`, opacity: playing ? 1 : 0.3 + h / 100 * 0.4 }
     },
     i
   )) });
 }
-function BarraProgreso({
-  alto,
-  perilla,
-  progreso,
+function ProgressBar({
+  height,
+  knob,
+  progress,
   redondeada = true,
   tabIndex = 0,
-  ...puntero
+  ...pointer
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
     {
       className: cn(
         "group bg-surface-raised relative cursor-pointer",
-        alto,
+        height,
         redondeada && "rounded-pill"
       ),
       role: "slider",
       "aria-label": "Progreso del audio",
       "aria-valuemin": 0,
       "aria-valuemax": 100,
-      "aria-valuenow": Math.round(progreso),
+      "aria-valuenow": Math.round(progress),
       tabIndex,
-      ...puntero,
+      ...pointer,
       children: [
         /* @__PURE__ */ jsx(
           "div",
           {
             className: cn("bg-accent absolute h-full", redondeada && "rounded-pill"),
-            style: { width: `${progreso}%` }
+            style: { width: `${progress}%` }
           }
         ),
         /* @__PURE__ */ jsx(
@@ -1762,9 +1644,9 @@ function BarraProgreso({
           {
             className: "rounded-pill bg-text-primary absolute top-1/2 -translate-y-1/2 opacity-0 transition-opacity group-hover:opacity-100",
             style: {
-              width: perilla,
-              height: perilla,
-              left: `calc(${progreso}% - ${perilla / 2}px)`
+              width: knob,
+              height: knob,
+              left: `calc(${progress}% - ${knob / 2}px)`
             }
           }
         )
@@ -1772,66 +1654,66 @@ function BarraProgreso({
     }
   );
 }
-var CONTROL = "rounded-chip transition-standard cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent";
-function BotonSalto({
-  segundos,
+var CONTROL = "rounded-chip transition-standard cursor-pointer focus-ring";
+function SkipButton({
+  seconds,
   className,
-  tamano,
-  onSaltar
+  size: size2,
+  onSkip
 }) {
   return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
-      onClick: () => onSaltar(segundos),
+      onClick: () => onSkip(seconds),
       className: cn("text-text-muted hover:text-text-primary", CONTROL, className),
-      "aria-label": segundos < 0 ? "Retroceder 15 segundos" : "Adelantar 15 segundos",
-      children: segundos < 0 ? /* @__PURE__ */ jsx(GoBackSeconds, { className: tamano }) : /* @__PURE__ */ jsx(AdvanceSeconds, { className: tamano })
+      "aria-label": seconds < 0 ? "Retroceder 15 segundos" : "Adelantar 15 segundos",
+      children: seconds < 0 ? /* @__PURE__ */ jsx(GoBackSeconds, { className: size2 }) : /* @__PURE__ */ jsx(AdvanceSeconds, { className: size2 })
     }
   );
 }
-function BotonVelocidad({
+function SpeedButton({
   className,
-  velocidad,
-  onCambiar
+  speed,
+  onChange
 }) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
-      onClick: onCambiar,
+      onClick: onChange,
       className: cn(
-        // `textMuted` sobre `surfaceRaised` da 4.07:1 en oscuro y no pasa AA.
-        // El original del portafolio arrastra ese mismo fallo.
+        // `textMuted` over `surfaceRaised` gives 4.07:1 in dark and fails AA.
+        // The portfolio original carries that same failure.
         "text-text-secondary hover:text-text-primary bg-surface-raised",
         CONTROL,
         className
       ),
       "aria-label": "Cambiar velocidad de reproducci\xF3n",
       children: [
-        velocidad,
+        speed,
         "x"
       ]
     }
   );
 }
-function Volumen({
-  tamano,
-  ancho,
-  silenciado,
-  volumen,
-  onSilenciar,
-  onCambiarVolumen
+function Volume({
+  size: size2,
+  width,
+  muted,
+  volume,
+  onMute,
+  onVolumeChange
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "gap-step-xs hidden items-center sm:flex", children: [
     /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
-        onClick: onSilenciar,
+        onClick: onMute,
         className: cn("text-text-muted hover:text-text-primary p-1", CONTROL),
-        "aria-label": silenciado ? "Activar sonido" : "Silenciar",
-        children: silenciado || volumen === 0 ? /* @__PURE__ */ jsx(VolumeMuted, { className: tamano }) : /* @__PURE__ */ jsx(VolumeOn, { className: tamano })
+        "aria-label": muted ? "Activar sonido" : "Silenciar",
+        children: muted || volume === 0 ? /* @__PURE__ */ jsx(VolumeMuted, { className: size2 }) : /* @__PURE__ */ jsx(VolumeOn, { className: size2 })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -1841,47 +1723,47 @@ function Volumen({
         min: "0",
         max: "1",
         step: "0.1",
-        value: silenciado ? 0 : volumen,
-        onChange: onCambiarVolumen,
+        value: muted ? 0 : volume,
+        onChange: onVolumeChange,
         className: cn(
           "bg-surface-raised rounded-pill h-1 cursor-pointer appearance-none",
           "[accent-color:var(--color-accent)]",
-          ancho
+          width
         ),
         "aria-label": "Volumen"
       }
     )
   ] });
 }
-function IconoPlay({ className, cargando, error, sonando }) {
-  if (cargando) return /* @__PURE__ */ jsx(Spinner, { className: cn("motion-safe:animate-spin", className) });
+function PlayIcon({ className, loading, error, playing }) {
+  if (loading) return /* @__PURE__ */ jsx(Spinner, { className: cn("motion-safe:animate-spin", className) });
   if (error) return /* @__PURE__ */ jsx(Retry, { className });
-  if (sonando) return /* @__PURE__ */ jsx(Pause, { className });
+  if (playing) return /* @__PURE__ */ jsx(Pause, { className });
   return /* @__PURE__ */ jsx(Play, { className });
 }
-function BotonPlay({
+function PlayButton({
   className,
-  tamano,
-  etiqueta,
-  texto: texto2,
-  onAlternar,
-  ...estado
+  size: size2,
+  label,
+  text: text2,
+  onToggle,
+  ...state
 }) {
   return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
-      onClick: onAlternar,
+      onClick: onToggle,
       className: cn(
         "text-accent-on transition-standard cursor-pointer",
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
-        estado.error ? "bg-error hover:bg-error/80" : "bg-accent hover:bg-accent-hover",
+        "focus-ring",
+        state.error ? "bg-error hover:bg-error/80" : "bg-accent hover:bg-accent-hover",
         className
       ),
-      "aria-label": etiqueta,
+      "aria-label": label,
       children: [
-        /* @__PURE__ */ jsx(IconoPlay, { className: tamano, ...estado }),
-        texto2 ? /* @__PURE__ */ jsx("span", { children: texto2 }) : null
+        /* @__PURE__ */ jsx(PlayIcon, { className: size2, ...state }),
+        text2 ? /* @__PURE__ */ jsx("span", { children: text2 }) : null
       ]
     }
   );
@@ -1900,7 +1782,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
   const [isMuted, setIsMuted] = useState(false);
   const [playbackRate, setPlaybackRate] = useState(1);
   const [isStaticVisible, setIsStaticVisible] = useState(true);
-  const flotante = mode === "banner" || mode === "compact";
+  const floating = mode === "banner" || mode === "compact";
   useEffect(() => {
     const audio = audioRef.current;
     if (!audio) return;
@@ -1943,7 +1825,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
     };
   }, []);
   useEffect(() => {
-    if (!flotante || !staticRef.current) return;
+    if (!floating || !staticRef.current) return;
     const observer = new IntersectionObserver(
       (entries) => {
         const entry = entries[0];
@@ -1953,7 +1835,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
     );
     observer.observe(staticRef.current);
     return () => observer.disconnect();
-  }, [flotante]);
+  }, [floating]);
   const togglePlay = useCallback(async () => {
     const audio = audioRef.current;
     if (!audio) return;
@@ -2042,37 +1924,37 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
     [duration]
   );
   const progress = duration > 0 ? currentTime / duration * 100 : 0;
-  const etiquetaPlay = hasError ? "Reintentar" : isPlaying ? "Pausar" : "Reproducir";
-  const estadoPlay = { cargando: isLoading, error: hasError, sonando: isPlaying };
-  const puntero = {
+  const playLabel = hasError ? "Reintentar" : isPlaying ? "Pausar" : "Reproducir";
+  const playState = { loading: isLoading, error: hasError, playing: isPlaying };
+  const pointer = {
     onPointerDown: handlePointerDown,
     onPointerMove: handlePointerMove,
     onPointerUp: handlePointerUp
   };
-  const flotanteJsx = /* @__PURE__ */ jsxs(
+  const floatingJsx = /* @__PURE__ */ jsxs(
     "div",
     {
       "aria-hidden": isStaticVisible,
       className: cn(
         "fixed inset-x-0 bottom-0 z-40 xl:hidden",
-        // Aparece y desaparece: el sistema no anima desplazamiento.
+        // It appears and disappears: the system does not animate displacement.
         isStaticVisible && "hidden"
       ),
       children: [
         /* @__PURE__ */ jsx(
-          BarraProgreso,
+          ProgressBar,
           {
-            alto: "h-1",
-            perilla: 10,
-            progreso: progress,
+            height: "h-1",
+            knob: 10,
+            progress,
             redondeada: false,
             tabIndex: -1,
-            ...puntero
+            ...pointer
           }
         ),
         /* @__PURE__ */ jsx("div", { className: "bg-surface/95 border-accent/25 border-t backdrop-blur-md", children: /* @__PURE__ */ jsxs("div", { className: "gap-step-sm px-step-md flex items-center py-5", children: [
           /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex shrink-0 items-center", children: [
-            /* @__PURE__ */ jsx(Onda, { grosor: "w-[2px]", alto: "h-4", sonando: isPlaying }),
+            /* @__PURE__ */ jsx(Wave, { strokeWidth: "w-[2px]", height: "h-4", playing: isPlaying }),
             /* @__PURE__ */ jsx("span", { className: "text-eyebrow font-mono text-accent hidden uppercase sm:block", children: "Narraci\xF3n" })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -2084,24 +1966,24 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             ] })
           ] }),
           /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
-            /* @__PURE__ */ jsx(BotonSalto, { segundos: -15, className: "p-1.5", tamano: "w-5 h-5", onSaltar: skip }),
+            /* @__PURE__ */ jsx(SkipButton, { seconds: -15, className: "p-1.5", size: "w-5 h-5", onSkip: skip }),
             /* @__PURE__ */ jsx(
-              BotonPlay,
+              PlayButton,
               {
                 className: "rounded-pill px-step-sm gap-step-xs flex items-center py-1.5",
-                tamano: "w-4 h-4",
-                etiqueta: etiquetaPlay,
-                onAlternar: togglePlay,
-                ...estadoPlay
+                size: "w-4 h-4",
+                label: playLabel,
+                onToggle: togglePlay,
+                ...playState
               }
             ),
-            /* @__PURE__ */ jsx(BotonSalto, { segundos: 15, className: "p-1.5", tamano: "w-5 h-5", onSaltar: skip }),
+            /* @__PURE__ */ jsx(SkipButton, { seconds: 15, className: "p-1.5", size: "w-5 h-5", onSkip: skip }),
             /* @__PURE__ */ jsx(
-              BotonVelocidad,
+              SpeedButton,
               {
                 className: "text-label ml-0.5 px-1.5 py-0.5",
-                velocidad: playbackRate,
-                onCambiar: handlePlaybackRateChange
+                speed: playbackRate,
+                onChange: handlePlaybackRateChange
               }
             )
           ] })
@@ -2114,7 +1996,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
       /* @__PURE__ */ jsx("audio", { ref: audioRef, src, preload: "metadata" }),
       /* @__PURE__ */ jsxs("div", { ref: staticRef, children: [
         /* @__PURE__ */ jsxs("div", { className: "gap-step-sm mb-step-md flex items-center", children: [
-          /* @__PURE__ */ jsx(Onda, { grosor: "w-[3px]", alto: "h-5", sonando: isPlaying }),
+          /* @__PURE__ */ jsx(Wave, { strokeWidth: "w-[3px]", height: "h-5", playing: isPlaying }),
           /* @__PURE__ */ jsx("span", { className: "text-eyebrow font-mono text-accent uppercase", children: "Narraci\xF3n de audio" }),
           /* @__PURE__ */ jsxs("span", { className: "text-chip font-mono text-text-muted ml-auto tabular-nums", children: [
             formatTime(currentTime),
@@ -2122,125 +2004,125 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             formatTime(duration)
           ] })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "mb-step-md", children: /* @__PURE__ */ jsx(BarraProgreso, { alto: "h-1.5", perilla: 14, progreso: progress, ...puntero }) }),
+        /* @__PURE__ */ jsx("div", { className: "mb-step-md", children: /* @__PURE__ */ jsx(ProgressBar, { height: "h-1.5", knob: 14, progress, ...pointer }) }),
         /* @__PURE__ */ jsxs("div", { className: "gap-step-sm flex items-center", children: [
-          /* @__PURE__ */ jsx(BotonSalto, { segundos: -15, className: "p-2", tamano: "w-6 h-6", onSaltar: skip }),
+          /* @__PURE__ */ jsx(SkipButton, { seconds: -15, className: "p-2", size: "w-6 h-6", onSkip: skip }),
           /* @__PURE__ */ jsx(
-            BotonPlay,
+            PlayButton,
             {
               className: "rounded-pill px-step-lg gap-step-xs text-ui flex items-center py-2 font-medium",
-              tamano: "w-4 h-4",
-              etiqueta: etiquetaPlay,
-              texto: etiquetaPlay,
-              onAlternar: togglePlay,
-              ...estadoPlay
+              size: "w-4 h-4",
+              label: playLabel,
+              text: playLabel,
+              onToggle: togglePlay,
+              ...playState
             }
           ),
-          /* @__PURE__ */ jsx(BotonSalto, { segundos: 15, className: "p-2", tamano: "w-6 h-6", onSaltar: skip }),
+          /* @__PURE__ */ jsx(SkipButton, { seconds: 15, className: "p-2", size: "w-6 h-6", onSkip: skip }),
           /* @__PURE__ */ jsxs("div", { className: "gap-step-sm ml-auto flex items-center", children: [
             /* @__PURE__ */ jsx(
-              BotonVelocidad,
+              SpeedButton,
               {
                 className: "text-label px-2 py-1",
-                velocidad: playbackRate,
-                onCambiar: handlePlaybackRateChange
+                speed: playbackRate,
+                onChange: handlePlaybackRateChange
               }
             ),
             /* @__PURE__ */ jsx(
-              Volumen,
+              Volume,
               {
-                tamano: "w-4 h-4",
-                ancho: "w-16",
-                silenciado: isMuted,
-                volumen: volume,
-                onSilenciar: toggleMute,
-                onCambiarVolumen: handleVolumeChange
+                size: "w-4 h-4",
+                width: "w-16",
+                muted: isMuted,
+                volume,
+                onMute: toggleMute,
+                onVolumeChange: handleVolumeChange
               }
             )
           ] })
         ] })
       ] }),
-      flotanteJsx
+      floatingJsx
     ] });
   }
   if (mode === "compact") {
     return /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("audio", { ref: audioRef, src, preload: "metadata" }),
       /* @__PURE__ */ jsxs("div", { ref: staticRef, className: "w-full", children: [
-        /* @__PURE__ */ jsx("div", { className: "mb-step-xs", children: /* @__PURE__ */ jsx(BarraProgreso, { alto: "h-1.5", perilla: 12, progreso: progress, ...puntero }) }),
+        /* @__PURE__ */ jsx("div", { className: "mb-step-xs", children: /* @__PURE__ */ jsx(ProgressBar, { height: "h-1.5", knob: 12, progress, ...pointer }) }),
         /* @__PURE__ */ jsxs("div", { className: "text-chip font-mono text-text-muted mb-step-sm flex justify-between", children: [
           /* @__PURE__ */ jsx("span", { children: formatTime(currentTime) }),
           /* @__PURE__ */ jsx("span", { children: formatTime(duration) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsx(BotonSalto, { segundos: -15, className: "p-1.5", tamano: "w-5 h-5", onSaltar: skip }),
+            /* @__PURE__ */ jsx(SkipButton, { seconds: -15, className: "p-1.5", size: "w-5 h-5", onSkip: skip }),
             /* @__PURE__ */ jsx(
-              BotonPlay,
+              PlayButton,
               {
                 className: "rounded-pill flex size-[34px] items-center justify-center",
-                tamano: "w-4 h-4",
-                etiqueta: etiquetaPlay,
-                onAlternar: togglePlay,
-                ...estadoPlay
+                size: "w-4 h-4",
+                label: playLabel,
+                onToggle: togglePlay,
+                ...playState
               }
             ),
-            /* @__PURE__ */ jsx(BotonSalto, { segundos: 15, className: "p-1.5", tamano: "w-5 h-5", onSaltar: skip })
+            /* @__PURE__ */ jsx(SkipButton, { seconds: 15, className: "p-1.5", size: "w-5 h-5", onSkip: skip })
           ] }),
           /* @__PURE__ */ jsx(
-            BotonVelocidad,
+            SpeedButton,
             {
               className: "text-label px-1.5 py-0.5",
-              velocidad: playbackRate,
-              onCambiar: handlePlaybackRateChange
+              speed: playbackRate,
+              onChange: handlePlaybackRateChange
             }
           )
         ] })
       ] }),
-      flotanteJsx
+      floatingJsx
     ] });
   }
   return /* @__PURE__ */ jsxs("div", { className: "bg-surface rounded-control border-border p-step-md w-full border", children: [
     /* @__PURE__ */ jsx("audio", { ref: audioRef, src, preload: "metadata" }),
     title ? /* @__PURE__ */ jsx("p", { className: "text-ui font-sans text-text-secondary mb-step-sm truncate", children: title }) : null,
-    /* @__PURE__ */ jsx("div", { className: "mb-step-sm", children: /* @__PURE__ */ jsx(BarraProgreso, { alto: "h-2", perilla: 16, progreso: progress, ...puntero }) }),
+    /* @__PURE__ */ jsx("div", { className: "mb-step-sm", children: /* @__PURE__ */ jsx(ProgressBar, { height: "h-2", knob: 16, progress, ...pointer }) }),
     /* @__PURE__ */ jsxs("div", { className: "text-chip font-mono text-text-muted mb-step-sm flex justify-between", children: [
       /* @__PURE__ */ jsx("span", { children: formatTime(currentTime) }),
       /* @__PURE__ */ jsx("span", { children: formatTime(duration) })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex items-center", children: [
-        /* @__PURE__ */ jsx(BotonSalto, { segundos: -15, className: "p-2", tamano: "w-5 h-5", onSaltar: skip }),
+        /* @__PURE__ */ jsx(SkipButton, { seconds: -15, className: "p-2", size: "w-5 h-5", onSkip: skip }),
         /* @__PURE__ */ jsx(
-          BotonPlay,
+          PlayButton,
           {
             className: "rounded-pill flex size-12 items-center justify-center",
-            tamano: "w-6 h-6",
-            etiqueta: etiquetaPlay,
-            onAlternar: togglePlay,
-            ...estadoPlay
+            size: "w-6 h-6",
+            label: playLabel,
+            onToggle: togglePlay,
+            ...playState
           }
         ),
-        /* @__PURE__ */ jsx(BotonSalto, { segundos: 15, className: "p-2", tamano: "w-5 h-5", onSaltar: skip })
+        /* @__PURE__ */ jsx(SkipButton, { seconds: 15, className: "p-2", size: "w-5 h-5", onSkip: skip })
       ] }),
       /* @__PURE__ */ jsxs("div", { className: "gap-step-sm flex items-center", children: [
         /* @__PURE__ */ jsx(
-          BotonVelocidad,
+          SpeedButton,
           {
             className: "text-label px-2 py-1",
-            velocidad: playbackRate,
-            onCambiar: handlePlaybackRateChange
+            speed: playbackRate,
+            onChange: handlePlaybackRateChange
           }
         ),
         /* @__PURE__ */ jsx(
-          Volumen,
+          Volume,
           {
-            tamano: "w-5 h-5",
-            ancho: "w-20",
-            silenciado: isMuted,
-            volumen: volume,
-            onSilenciar: toggleMute,
-            onCambiarVolumen: handleVolumeChange
+            size: "w-5 h-5",
+            width: "w-20",
+            muted: isMuted,
+            volume,
+            onMute: toggleMute,
+            onVolumeChange: handleVolumeChange
           }
         )
       ] })
@@ -2264,7 +2146,7 @@ function Blockquote({ children, author, source, className, ...props }) {
     }
   );
 }
-var ENLACE = "transition-standard hover:text-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent rounded-chip cursor-pointer";
+var LINK = "transition-standard hover:text-accent focus-ring rounded-chip cursor-pointer";
 function Breadcrumb({
   items,
   homeHref = "/",
@@ -2273,28 +2155,28 @@ function Breadcrumb({
   className,
   ...props
 }) {
-  const enlace = (href, contenido) => linkAsChild ? /* @__PURE__ */ jsx(Slot, { className: ENLACE, children: linkAsChild({ href, children: contenido }) }) : /* @__PURE__ */ jsx("a", { href, className: ENLACE, children: contenido });
+  const link = (href, content) => linkAsChild ? /* @__PURE__ */ jsx(Slot, { className: LINK, children: linkAsChild({ href, children: content }) }) : /* @__PURE__ */ jsx("a", { href, className: LINK, children: content });
   return /* @__PURE__ */ jsx("nav", { "aria-label": "Ruta", className: cn("font-mono text-meta text-text-muted", className), ...props, children: /* @__PURE__ */ jsxs("ol", { className: "gap-step-xs flex flex-wrap items-center", children: [
-    /* @__PURE__ */ jsx("li", { children: enlace(homeHref, /* @__PURE__ */ jsx("span", { "aria-label": homeLabel, children: "~" })) }),
+    /* @__PURE__ */ jsx("li", { children: link(homeHref, /* @__PURE__ */ jsx("span", { "aria-label": homeLabel, children: "~" })) }),
     items.map((item2, i) => {
-      const ultimo = i === items.length - 1;
+      const last = i === items.length - 1;
       return /* @__PURE__ */ jsxs("li", { className: "gap-step-xs flex items-center", children: [
         /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-border", children: "/" }),
-        item2.href && !ultimo ? enlace(item2.href, item2.label) : /* @__PURE__ */ jsx("span", { "aria-current": ultimo ? "page" : void 0, className: "text-text-secondary", children: item2.label })
+        item2.href && !last ? link(item2.href, item2.label) : /* @__PURE__ */ jsx("span", { "aria-current": last ? "page" : void 0, className: "text-text-secondary", children: item2.label })
       ] }, i);
     })
   ] }) });
 }
 function CodeBlock({ children, language, copyText, className, ...props }) {
   const [copiado, setCopiado] = useState(false);
-  const temporizador = useRef(null);
-  const copiar = useCallback(async () => {
+  const timer = useRef(null);
+  const copy = useCallback(async () => {
     if (!copyText) return;
     try {
       await navigator.clipboard.writeText(copyText);
       setCopiado(true);
-      if (temporizador.current) clearTimeout(temporizador.current);
-      temporizador.current = setTimeout(() => setCopiado(false), 2e3);
+      if (timer.current) clearTimeout(timer.current);
+      timer.current = setTimeout(() => setCopiado(false), 2e3);
     } catch {
     }
   }, [copyText]);
@@ -2318,14 +2200,14 @@ function CodeBlock({ children, language, copyText, className, ...props }) {
             "button",
             {
               type: "button",
-              onClick: copiar,
+              onClick: copy,
               "aria-label": copiado ? "C\xF3digo copiado" : "Copiar c\xF3digo",
               "aria-live": "polite",
               className: cn(
                 "gap-step-xs rounded-chip flex items-center px-2 py-1",
                 "text-label font-mono text-text-muted cursor-pointer",
                 "transition-standard hover:bg-surface hover:text-text-primary",
-                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+                "focus-ring"
               ),
               children: [
                 copiado ? /* @__PURE__ */ jsx(Check, { className: "text-accent" }) : /* @__PURE__ */ jsx(Copy, {}),
@@ -2348,7 +2230,7 @@ function CourseCard({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(Tarjeta, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
+  return /* @__PURE__ */ jsx(CardShell, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
     status ? /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(Badge, { variant: "warm", children: status }) }) : null,
     /* @__PURE__ */ jsx(Text, { as: "h3", variant: "h3", className: "group-hover:text-accent transition-standard", children: title }),
     summary ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", className: "line-clamp-3", children: summary }) : null,
@@ -2365,23 +2247,35 @@ function CourseCard({
     ] }) : null
   ] }) });
 }
-var CARA = "w-[66px] max-w-none";
-function EmptyState({
-  expresion,
-  title,
-  description,
-  action,
-  basePath,
-  className,
-  ...props
-}) {
+var FACE = "w-[66px] max-w-none";
+function EmptyState(props) {
+  if (props.variant === "inline") {
+    const { variant: variant2, title: title2, description: description2, action: action2, icon, className: className2, ...rest2 } = props;
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "py-step-lg px-step-md gap-step-xs flex flex-col items-center text-center",
+          className2
+        ),
+        ...rest2,
+        children: [
+          icon ? /* @__PURE__ */ jsx("span", { className: "text-text-muted shrink-0", children: icon }) : null,
+          /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "muted", as: "p", className: "max-w-measure", children: title2 }),
+          description2 ? /* @__PURE__ */ jsx(Text, { variant: "label", tone: "muted", as: "p", className: "max-w-measure font-normal", children: description2 }) : null,
+          action2 ? /* @__PURE__ */ jsx("div", { className: "mt-step-xs", children: action2 }) : null
+        ]
+      }
+    );
+  }
+  const { variant, title, description, action, expression, basePath, className, ...rest } = props;
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn(SUPERFICIE_TARJETA, "p-step-lg gap-step-sm flex flex-col items-center text-center", className),
-      ...props,
+      className: cn(CARD_SURFACE, "p-step-lg gap-step-sm flex flex-col items-center text-center", className),
+      ...rest,
       children: [
-        /* @__PURE__ */ jsx(CaraDeMascota, { expresion, className: CARA, basePath }),
+        /* @__PURE__ */ jsx(MascotFace, { expression, className: FACE, basePath }),
         /* @__PURE__ */ jsx(Text, { variant: "ui", as: "p", className: "font-medium", children: title }),
         description ? /* @__PURE__ */ jsx(Text, { variant: "label", tone: "muted", as: "p", className: "max-w-measure font-normal", children: description }) : null,
         action ? /* @__PURE__ */ jsx("div", { className: "mt-step-xs", children: action }) : null
@@ -2389,12 +2283,12 @@ function EmptyState({
     }
   );
 }
-var mismoDia = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
-function aValorDeCampo(fecha) {
-  const dos = (n) => String(n).padStart(2, "0");
-  return `${fecha.getFullYear()}-${dos(fecha.getMonth() + 1)}-${dos(fecha.getDate())}T${dos(
-    fecha.getHours()
-  )}:${dos(fecha.getMinutes())}`;
+var sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+function toFieldValue(date) {
+  const two = (n) => String(n).padStart(2, "0");
+  return `${date.getFullYear()}-${two(date.getMonth() + 1)}-${two(date.getDate())}T${two(
+    date.getHours()
+  )}:${two(date.getMinutes())}`;
 }
 function EventCalendar({
   events,
@@ -2403,68 +2297,68 @@ function EventCalendar({
   onDeleteEvent,
   selected,
   onSelectDay,
-  formatDay = (dia) => format(dia, "EEEE d 'de' MMMM", { locale: es }),
-  formatTime: formatTime2 = (fecha) => format(fecha, "HH:mm", { locale: es }),
+  formatDay = (day) => format(day, "EEEE d 'de' MMMM", { locale: es }),
+  formatTime: formatTime2 = (date) => format(date, "HH:mm", { locale: es }),
   emptyMessage = "Nada en este d\xEDa.",
   className,
   ...props
 }) {
   const id = useId();
   const [diaInterno, setDiaInterno] = useState(() => selected ?? /* @__PURE__ */ new Date());
-  const dia = selected ?? diaInterno;
-  const [mes, setMes] = useState(() => dia);
-  const [editando, setEditando] = useState(null);
-  const [titulo, setTitulo] = useState("");
-  const [cuando, setCuando] = useState("");
+  const day = selected ?? diaInterno;
+  const [month, setMonth] = useState(() => day);
+  const [editing, setEditing] = useState(null);
+  const [title, setTitle] = useState("");
+  const [when, setWhen] = useState("");
   const editable = Boolean(onCreateEvent ?? onUpdateEvent);
-  const delDia = events.filter((e) => mismoDia(e.start, dia)).sort((a, b) => a.start.getTime() - b.start.getTime());
-  function elegirDia(nuevo) {
+  const ofTheDay = events.filter((e) => sameDay(e.start, day)).sort((a, b) => a.start.getTime() - b.start.getTime());
+  function pickDay(nuevo) {
     if (!nuevo) return;
     setDiaInterno(nuevo);
-    setMes(nuevo);
+    setMonth(nuevo);
     onSelectDay?.(nuevo);
-    cancelar();
+    cancel();
   }
-  function cancelar() {
-    setEditando(null);
-    setTitulo("");
-    setCuando("");
+  function cancel() {
+    setEditing(null);
+    setTitle("");
+    setWhen("");
   }
-  function editar(evento) {
-    setEditando(evento.id);
-    setTitulo(evento.title);
-    setCuando(aValorDeCampo(evento.start));
+  function edit(event) {
+    setEditing(event.id);
+    setTitle(event.title);
+    setWhen(toFieldValue(event.start));
   }
-  function enviar(e) {
+  function submit(e) {
     e.preventDefault();
-    if (!titulo.trim() || !cuando) return;
-    const start = new Date(cuando);
+    if (!title.trim() || !when) return;
+    const start = new Date(when);
     if (Number.isNaN(start.getTime())) return;
-    if (editando) {
-      const previo = events.find((ev) => ev.id === editando);
-      if (previo) onUpdateEvent?.({ ...previo, title: titulo.trim(), start });
+    if (editing) {
+      const previous = events.find((ev) => ev.id === editing);
+      if (previous) onUpdateEvent?.({ ...previous, title: title.trim(), start });
     } else {
-      onCreateEvent?.({ title: titulo.trim(), start });
+      onCreateEvent?.({ title: title.trim(), start });
     }
-    cancelar();
+    cancel();
   }
-  const conEvento = events.map((e) => e.start);
+  const withEvent = events.map((e) => e.start);
   return /* @__PURE__ */ jsxs("div", { className: cn("gap-step-lg flex flex-col md:flex-row md:items-start", className), ...props, children: [
     /* @__PURE__ */ jsx(
       Calendar,
       {
         mode: "single",
-        selected: dia,
-        onSelect: elegirDia,
-        month: mes,
-        onMonthChange: setMes,
-        modifiers: { conEvento },
+        selected: day,
+        onSelect: pickDay,
+        month,
+        onMonthChange: setMonth,
+        modifiers: { withEvent },
         modifiersClassNames: {
-          // El punto va bajo el número, no encima del fondo del día: sobre el
-          // seleccionado —que es bioluz sólido— un punto de acento desaparece.
-          // `after:` en Tailwind v4 ya trae `content: ""`, así que no hace falta
-          // declararlo con un valor arbitrario.
-          conEvento: cn(
+          // The dot goes under the number, not on top of the day's background:
+          // over the selected one — which is solid biolume — an accent dot
+          // disappears. `after:` in Tailwind v4 already ships `content: ""`, so
+          // there is no need to declare it with an arbitrary value.
+          withEvent: cn(
             "after:bg-accent after:absolute after:bottom-1 after:left-1/2",
             "after:size-1 after:-translate-x-1/2 after:rounded-pill",
             "[&[data-selected=true]]:after:bg-accent-on"
@@ -2479,8 +2373,8 @@ function EventCalendar({
         "aria-labelledby": `${id}-dia`,
         className: "border-hairline rounded-card p-step-md gap-step-md flex min-w-0 flex-1 flex-col border",
         children: [
-          /* @__PURE__ */ jsx(Text, { as: "h3", variant: "h3", id: `${id}-dia`, className: "first-letter:uppercase", children: formatDay(dia) }),
-          delDia.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "gap-step-xs flex flex-col", children: delDia.map((evento) => /* @__PURE__ */ jsxs(
+          /* @__PURE__ */ jsx(Text, { as: "h3", variant: "h3", id: `${id}-dia`, className: "first-letter:uppercase", children: formatDay(day) }),
+          ofTheDay.length > 0 ? /* @__PURE__ */ jsx("ul", { className: "gap-step-xs flex flex-col", children: ofTheDay.map((event) => /* @__PURE__ */ jsxs(
             "li",
             {
               className: "border-hairline gap-step-sm py-step-xs flex items-center border-b last:border-b-0",
@@ -2490,85 +2384,85 @@ function EventCalendar({
                   {
                     as: "span",
                     variant: "meta",
-                    tone: evento.tone === "warm" ? "warm" : "accent",
+                    tone: event.tone === "warm" ? "warm" : "accent",
                     className: "shrink-0 tabular-nums",
-                    children: /* @__PURE__ */ jsx("time", { dateTime: evento.start.toISOString(), children: formatTime2(evento.start) })
+                    children: /* @__PURE__ */ jsx("time", { dateTime: event.start.toISOString(), children: formatTime2(event.start) })
                   }
                 ),
-                /* @__PURE__ */ jsx(Text, { as: "span", variant: "ui", className: "min-w-0 flex-1 truncate", children: evento.title }),
+                /* @__PURE__ */ jsx(Text, { as: "span", variant: "ui", className: "min-w-0 flex-1 truncate", children: event.title }),
                 onUpdateEvent ? /* @__PURE__ */ jsx(
                   Button,
                   {
                     variant: "tertiary",
                     size: "sm",
-                    onClick: () => editar(evento),
-                    "aria-label": `Editar \xAB${evento.title}\xBB`,
-                    children: "./editar"
+                    onClick: () => edit(event),
+                    "aria-label": `Editar \xAB${event.title}\xBB`,
+                    children: "./edit"
                   }
                 ) : null,
                 onDeleteEvent ? /* @__PURE__ */ jsxs(AlertDialog, { children: [
-                  /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", "aria-label": `Borrar \xAB${evento.title}\xBB`, children: "./borrar" }) }),
+                  /* @__PURE__ */ jsx(AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Button, { variant: "tertiary", size: "sm", "aria-label": `Borrar \xAB${event.title}\xBB`, children: "./borrar" }) }),
                   /* @__PURE__ */ jsxs(AlertDialogContent, { children: [
                     /* @__PURE__ */ jsxs(AlertDialogHeader, { children: [
                       /* @__PURE__ */ jsxs(AlertDialogTitle, { children: [
                         "Borrar \xAB",
-                        evento.title,
+                        event.title,
                         "\xBB"
                       ] }),
                       /* @__PURE__ */ jsxs(AlertDialogDescription, { children: [
                         "Se borra del ",
-                        formatDay(evento.start),
+                        formatDay(event.start),
                         " a las ",
-                        formatTime2(evento.start),
+                        formatTime2(event.start),
                         ". No se puede deshacer."
                       ] })
                     ] }),
                     /* @__PURE__ */ jsxs(AlertDialogFooter, { children: [
                       /* @__PURE__ */ jsx(AlertDialogCancel, { children: "Mejor no" }),
-                      /* @__PURE__ */ jsx(AlertDialogAction, { onClick: () => onDeleteEvent(evento.id), children: "Borrar el evento" })
+                      /* @__PURE__ */ jsx(AlertDialogAction, { onClick: () => onDeleteEvent(event.id), children: "Borrar el event" })
                     ] })
                   ] })
                 ] }) : null
               ]
             },
-            evento.id
+            event.id
           )) }) : (
-            // `EmptyState` no: lleva una cara de la mascota, y la mascota tiene
-            // siete sitios contados donde puede aparecer. Un día vacío de una
-            // agenda no es uno de ellos — y en un mes de treinta días, la mitad lo
-            // serían.
+            // `EmptyState` is not used: it carries a mascot face, and the mascot
+            // has seven counted places where it may appear. An empty day in a
+            // schedule is not one of them — and in a thirty-day month, half of them
+            // would be.
             /* @__PURE__ */ jsx(Text, { as: "p", variant: "ui", tone: "muted", children: emptyMessage })
           ),
-          editable ? /* @__PURE__ */ jsxs("form", { onSubmit: enviar, className: "gap-step-sm border-hairline pt-step-md flex flex-col border-t", children: [
+          editable ? /* @__PURE__ */ jsxs("form", { onSubmit: submit, className: "gap-step-sm border-hairline pt-step-md flex flex-col border-t", children: [
             /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex flex-col", children: [
-              /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-titulo`, children: "T\xEDtulo" }),
+              /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-title`, children: "T\xEDtulo" }),
               /* @__PURE__ */ jsx(
                 Input,
                 {
-                  id: `${id}-titulo`,
-                  value: titulo,
-                  onChange: (e) => setTitulo(e.target.value),
+                  id: `${id}-title`,
+                  value: title,
+                  onChange: (e) => setTitle(e.target.value),
                   placeholder: "Publicar el art\xEDculo",
                   required: true
                 }
               )
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex flex-col", children: [
-              /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-cuando`, children: "Cu\xE1ndo" }),
+              /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-when`, children: "Cu\xE1ndo" }),
               /* @__PURE__ */ jsx(
                 DateField,
                 {
-                  id: `${id}-cuando`,
+                  id: `${id}-when`,
                   withTime: true,
-                  value: cuando,
-                  onChange: (e) => setCuando(e.target.value),
+                  value: when,
+                  onChange: (e) => setWhen(e.target.value),
                   required: true
                 }
               )
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "gap-step-sm flex flex-wrap items-center", children: [
-              /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", children: editando ? "Guardar" : "A\xF1adir" }),
-              editando ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "tertiary", size: "sm", onClick: cancelar, children: "./cancelar" }) : null
+              /* @__PURE__ */ jsx(Button, { type: "submit", size: "sm", children: editing ? "Guardar" : "A\xF1adir" }),
+              editing ? /* @__PURE__ */ jsx(Button, { type: "button", variant: "tertiary", size: "sm", onClick: cancel, children: "./cancelar" }) : null
             ] })
           ] }) : null
         ]
@@ -2584,7 +2478,7 @@ function Footer({
   className,
   ...props
 }) {
-  const firma = /* @__PURE__ */ jsxs(Text, { variant: "meta", tone: "muted", as: "p", className: "ml-auto shrink-0", children: [
+  const signature = /* @__PURE__ */ jsxs(Text, { variant: "meta", tone: "muted", as: "p", className: "ml-auto shrink-0", children: [
     /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: "text-accent", children: [
       "$",
       " "
@@ -2592,45 +2486,52 @@ function Footer({
     "cd ~/",
     naming.domain,
     "/",
-    year
+    year,
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "bg-accent motion-safe:caret ml-[0.2em] inline-block h-[1em] w-[0.5em] translate-y-[0.15em]"
+      }
+    )
   ] });
-  const filas = [
+  const rows = [
     brand2 ? /* @__PURE__ */ jsx("div", { className: "flex items-center", children: brand2 }, "marca") : null,
     children ? /* @__PURE__ */ jsx("div", { className: "gap-step-md flex flex-wrap items-center", children }, "enlaces") : null,
     social && social.length > 0 ? (
-      // 18px de separación, del documento. No es un escalón de `spacing`:
-      // es el ritmo de una fila de iconos, no el de una página.
-      /* @__PURE__ */ jsx("ul", { className: "flex items-center gap-[18px]", children: social.map((red) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      // 18px of separation, from the document. It is not a `spacing` step: it is
+      // the rhythm of a row of icons, not that of a page.
+      /* @__PURE__ */ jsx("ul", { className: "flex items-center gap-[18px]", children: social.map((socialLink) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
         "a",
         {
-          href: red.href,
-          "aria-label": red.label,
+          href: socialLink.href,
+          "aria-label": socialLink.label,
           className: cn(
             "text-text-muted hover:text-accent transition-standard block cursor-pointer text-[19px]",
-            "rounded-chip focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent"
+            "rounded-chip focus-ring"
           ),
-          children: red.icon
+          children: socialLink.icon
         }
-      ) }, red.href)) }, "redes")
+      ) }, socialLink.href)) }, "socialLinks")
     ) : null
   ].filter(Boolean);
-  const [primera, ...resto] = filas;
+  const [first, ...rest] = rows;
   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: [
     /* @__PURE__ */ jsxs("div", { className: "gap-step-md flex flex-wrap items-center", children: [
-      primera ?? null,
-      firma
+      first ?? null,
+      signature
     ] }),
-    resto
+    rest
   ] }) });
 }
 function FooterLink({ asChild = false, className, ...props }) {
-  const Raiz = asChild ? Slot : "a";
+  const Root17 = asChild ? Slot : "a";
   return /* @__PURE__ */ jsx(
-    Raiz,
+    Root17,
     {
       className: cn(
         "font-mono text-meta text-text-secondary hover:text-accent transition-standard cursor-pointer",
-        "rounded-chip focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "rounded-chip focus-ring",
         className
       ),
       ...props
@@ -2644,24 +2545,24 @@ function Hero({
   action,
   pose,
   basePath,
-  variant = "cabecera",
+  variant = "header",
   className,
   ...props
 }) {
-  const centrado = variant === "centrado";
+  const centered = variant === "centered";
   return /* @__PURE__ */ jsxs(
     "section",
     {
       className: cn(
-        "degradado-hero rounded-panel border-hairline relative overflow-hidden border",
-        // 44 arriba, 40 a los lados y abajo. Del documento.
+        "gradient-hero rounded-panel border-hairline relative overflow-hidden border",
+        // 44 top, 40 on the sides and bottom. From the document.
         "px-step-xl pt-[44px] pb-step-xl",
         className
       ),
       ...props,
       children: [
-        centrado && pose ? /* @__PURE__ */ jsx(
-          Mascota,
+        centered && pose ? /* @__PURE__ */ jsx(
+          Mascot,
           {
             pose,
             basePath,
@@ -2673,7 +2574,7 @@ function Hero({
           {
             className: cn(
               "gap-step-md flex flex-col",
-              centrado ? "items-center text-center" : "md:max-w-[62%]"
+              centered ? "items-center text-center" : "md:max-w-[62%]"
             ),
             children: [
               eyebrow ? /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: eyebrow }) : null,
@@ -2684,7 +2585,7 @@ function Hero({
                 {
                   className: cn(
                     "gap-step-sm mt-step-xs flex flex-wrap items-center",
-                    centrado && "justify-center"
+                    centered && "justify-center"
                   ),
                   children: action
                 }
@@ -2692,14 +2593,14 @@ function Hero({
             ]
           }
         ),
-        !centrado && pose ? /* @__PURE__ */ jsx(
-          Mascota,
+        !centered && pose ? /* @__PURE__ */ jsx(
+          Mascot,
           {
             pose,
             basePath,
             className: cn(
-              // En móvil, en el flujo y bajo los botones. Desde md, sangrando por
-              // la esquina inferior derecha.
+              // On mobile, in the flow and below the buttons. From md up, bleeding
+              // off the bottom-right corner.
               "mt-step-lg mx-auto w-40",
               "md:mt-0 md:absolute md:right-0 md:-bottom-4 md:mx-0 md:w-64"
             )
@@ -2720,7 +2621,7 @@ function LinkRow({
   const rel = external ? "noopener noreferrer" : props.rel;
   const target = external ? "_blank" : props.target;
   return /* @__PURE__ */ jsx(
-    Tarjeta,
+    CardShell,
     {
       className: cn("px-step-md py-step-sm", className),
       ...props,
@@ -2743,39 +2644,48 @@ function LinkRow({
     }
   );
 }
-function Nav({ brand: brand2, children, actions, className, ...props }) {
+function Nav({ brand: brand2, children, actions, size: size2 = "default", className, ...props }) {
   return /* @__PURE__ */ jsx(
     "header",
     {
       className: cn(
         "sticky top-0 z-50 w-full",
-        // abismo al 86 % con 14px de desenfoque detrás. El alfa va sobre el
-        // token, así que sigue el modo: en claro es papel al 86 %.
+        // Abyss at 86 % with 14px of blur behind. The alpha rides on the token,
+        // so it follows the mode: in light it is paper at 86 %.
         "bg-background/86 backdrop-blur-[14px]",
         "border-hairline border-b",
         className
       ),
       ...props,
-      children: /* @__PURE__ */ jsxs("div", { className: "max-w-wide px-step-md h-nav gap-step-lg mx-auto flex items-center", children: [
-        brand2 ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: brand2 }) : null,
-        children ? /* @__PURE__ */ jsx("nav", { "aria-label": "Principal", className: "ml-auto min-w-0", children: /* @__PURE__ */ jsxs("ul", { className: "gap-step-md flex items-center", children: [
-          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-text-muted font-mono text-meta select-none", children: "~/" }),
-          children
-        ] }) }) : /* @__PURE__ */ jsx("div", { className: "flex-1" }),
-        actions ? /* @__PURE__ */ jsx("div", { className: "gap-step-sm flex shrink-0 items-center", children: actions }) : null
-      ] })
+      children: /* @__PURE__ */ jsxs(
+        "div",
+        {
+          className: cn(
+            "max-w-wide px-step-md gap-step-lg mx-auto flex items-center",
+            size2 === "compact" ? "h-nav-compact" : "h-nav"
+          ),
+          children: [
+            brand2 ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: brand2 }) : null,
+            children ? /* @__PURE__ */ jsx("nav", { "aria-label": "Principal", className: "ml-auto min-w-0", children: /* @__PURE__ */ jsxs("ul", { className: "gap-step-md flex items-center", children: [
+              /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-text-muted font-mono text-meta select-none", children: "~/" }),
+              children
+            ] }) }) : /* @__PURE__ */ jsx("div", { className: "flex-1" }),
+            actions ? /* @__PURE__ */ jsx("div", { className: "gap-step-sm flex shrink-0 items-center", children: actions }) : null
+          ]
+        }
+      )
     }
   );
 }
 function NavItem({ active = false, asChild = false, className, children, ...props }) {
-  const Raiz = asChild ? Slot : "a";
+  const Root17 = asChild ? Slot : "a";
   return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-    Raiz,
+    Root17,
     {
       "aria-current": active ? "page" : void 0,
       className: cn(
         "font-mono text-meta transition-standard cursor-pointer",
-        "rounded-chip focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "rounded-chip focus-ring",
         active ? "text-accent underline decoration-1 underline-offset-4" : "text-text-secondary hover:text-accent",
         className
       ),
@@ -2792,39 +2702,49 @@ function NavItem({ active = false, asChild = false, className, children, ...prop
 function NewsletterForm({
   title,
   description,
-  state = "reposo",
+  state = "idle",
   onSubmitEmail,
   successMessage = "Ya est\xE1s dentro. Te llega un correo cada dos semanas, y nada m\xE1s.",
   errorMessage = "No se pudo suscribir ese correo. Rev\xEDsalo y vuelve a intentar.",
   disclaimer,
-  expresion,
+  expression,
   basePath,
   submitLabel = "Suscribirme",
-  placeholder = "tu@correo.dev",
+  placeholder = "tu@email.dev",
   fieldLabel = "Correo electr\xF3nico",
   nameField = false,
   nameLabel = "Nombre",
   namePlaceholder = "C\xF3mo te llamas",
   nameInputProps,
+  aside,
+  resetOnSuccess = true,
+  onFieldChange,
+  fieldErrors,
   className,
   ...props
 }) {
   const id = useId();
-  const enviando = state === "enviando";
+  const form = useRef(null);
+  const sending = state === "sending";
   const error = state === "error";
-  function enviar(evento) {
-    evento.preventDefault();
-    const datos = new FormData(evento.currentTarget);
-    const correo = String(datos.get("email") ?? "");
-    const nombre = nameField ? String(datos.get("name") ?? "") : void 0;
-    onSubmitEmail?.(correo, nombre);
+  const nameError = fieldErrors?.name;
+  const emailError = fieldErrors?.email;
+  useEffect(() => {
+    if (state === "success" && resetOnSuccess) form.current?.reset();
+  }, [state, resetOnSuccess]);
+  function submit(event) {
+    event.preventDefault();
+    const data = new FormData(event.currentTarget);
+    const email = String(data.get("email") ?? "");
+    const name = nameField ? String(data.get("name") ?? "") : void 0;
+    onSubmitEmail?.(email, name);
   }
-  const boton = /* @__PURE__ */ jsx(
+  const button2 = /* @__PURE__ */ jsx(
     Button,
     {
       type: "submit",
       variant: "conversion",
-      loading: enviando,
+      loading: sending,
       className: cn("disabled:opacity-60", nameField && "sm:self-start"),
       children: submitLabel
     }
@@ -2833,65 +2753,79 @@ function NewsletterForm({
     "section",
     {
       className: cn(
-        "degradado-seccion rounded-panel border-hairline p-step-lg gap-step-md flex flex-col border",
+        "gradient-section rounded-panel border-hairline p-step-lg border",
+        // Two columns from `md` up when there is an illustration, one otherwise.
+        // `items-center` centres the pose against the block of text and form
+        // rather than against the panel, which is what the blog was doing by
+        // hand with an absolute position and a reserved `pr`.
+        aside ? "gap-step-lg flex flex-col md:flex-row md:items-center" : "gap-step-md flex flex-col",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex flex-col", children: [
-          /* @__PURE__ */ jsx(Text, { as: "h2", variant: "h3", children: title }),
-          description ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", children: description }) : null
-        ] }),
-        /* @__PURE__ */ jsxs("form", { onSubmit: enviar, className: "gap-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
-                }
-              )
+        /* @__PURE__ */ jsxs("div", { className: cn("gap-step-md flex min-w-0 flex-1 flex-col"), children: [
+          /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex flex-col", children: [
+            /* @__PURE__ */ jsx(Text, { as: "h2", variant: "h3", children: title }),
+            description ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", children: description }) : null
+          ] }),
+          /* @__PURE__ */ jsxs("form", { ref: form, onSubmit: submit, 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-start", children: [
+              nameField ? /* @__PURE__ */ jsxs("div", { className: "gap-step-xs flex flex-1 flex-col", children: [
+                /* @__PURE__ */ jsx(Label, { htmlFor: `${id}-name`, children: nameLabel }),
+                /* @__PURE__ */ jsx(
+                  Input,
+                  {
+                    id: `${id}-name`,
+                    name: "name",
+                    type: "text",
+                    autoComplete: "name",
+                    required: true,
+                    placeholder: namePlaceholder,
+                    disabled: sending,
+                    invalid: Boolean(nameError),
+                    "aria-describedby": nameError ? `${id}-name-error` : void 0,
+                    onChange: (e) => onFieldChange?.("name", e.currentTarget.value),
+                    ...nameInputProps
+                  }
+                ),
+                nameError ? /* @__PURE__ */ jsx(Text, { id: `${id}-name-error`, variant: "label", tone: "error", as: "p", role: "alert", children: nameError }) : null
+              ] }) : 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: sending,
+                    invalid: error || Boolean(emailError),
+                    onChange: (e) => onFieldChange?.("email", e.currentTarget.value),
+                    "aria-describedby": emailError ? `${id}-email-error` : state === "success" || error ? `${id}-notice` : void 0
+                  }
+                ),
+                emailError ? /* @__PURE__ */ jsx(Text, { id: `${id}-email-error`, variant: "label", tone: "error", as: "p", role: "alert", children: emailError }) : null
+              ] }),
+              nameField ? null : /* @__PURE__ */ jsx("div", { className: "sm:mt-[26px]", children: button2 })
             ] }),
-            nameField ? null : boton
+            nameField ? button2 : null
           ] }),
-          nameField ? boton : null
+          state === "success" ? /* @__PURE__ */ jsx(Alert, { id: `${id}-notice`, variant: "success", emphasis: "strong", children: successMessage }) : null,
+          error ? /* @__PURE__ */ jsx(Alert, { id: `${id}-notice`, variant: "error", emphasis: "strong", children: errorMessage }) : null,
+          disclaimer ? /* @__PURE__ */ jsxs("div", { className: "gap-step-sm flex items-center", children: [
+            expression ? /* @__PURE__ */ jsx(MascotFace, { expression, basePath, className: "w-10 max-w-none" }) : null,
+            /* @__PURE__ */ jsx(Text, { variant: "label", tone: "muted", as: "p", className: "font-normal", children: disclaimer })
+          ] }) : null
         ] }),
-        state === "exito" ? /* @__PURE__ */ jsx(Alert, { id: `${id}-aviso`, variant: "success", enfasis: "fuerte", children: successMessage }) : null,
-        error ? /* @__PURE__ */ jsx(Alert, { id: `${id}-aviso`, variant: "error", enfasis: "fuerte", children: errorMessage }) : null,
-        disclaimer ? /* @__PURE__ */ jsxs("div", { className: "gap-step-sm flex items-center", children: [
-          expresion ? /* @__PURE__ */ jsx(CaraDeMascota, { expresion, basePath, className: "w-10 max-w-none" }) : null,
-          /* @__PURE__ */ jsx(Text, { variant: "label", tone: "muted", as: "p", className: "font-normal", children: disclaimer })
-        ] }) : null
+        aside ? /* @__PURE__ */ jsx("div", { className: "shrink-0 md:max-w-[42%]", children: aside }) : null
       ]
     }
   );
 }
-var cabecera = cva("gap-step-sm flex flex-col", {
+var header = cva("gap-step-sm flex flex-col", {
   variants: {
     size: {
       display: "py-section",
@@ -2910,7 +2844,7 @@ function PageHeader({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs("header", { className: cn(cabecera({ size: size2 }), className), ...props, children: [
+  return /* @__PURE__ */ jsxs("header", { className: cn(header({ size: size2 }), className), ...props, children: [
     eyebrow ? /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: eyebrow }) : null,
     /* @__PURE__ */ jsx(Text, { as, variant: size2 === "display" ? "display" : "h1", className: "max-w-measure", children: title }),
     description ? /* @__PURE__ */ jsx(Text, { variant: "body", tone: "secondary", children: description }) : null,
@@ -2924,33 +2858,33 @@ function ScrollingProgressBar({
   className,
   ...props
 }) {
-  const [avance, setAvance] = useState(0);
-  const pendiente = useRef(0);
+  const [seek, setAvance] = useState(0);
+  const pendingOne = 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);
+    const measure = () => {
+      pendingOne.current = 0;
+      const element = target?.current;
+      const start = element ? element.getBoundingClientRect().top + scrollY : 0;
+      const height = element ? element.offsetHeight : document.documentElement.scrollHeight;
+      const walkable = height - innerHeight;
+      if (walkable <= 0) {
+        setAvance(scrollY >= start ? 100 : 0);
         return;
       }
-      const recorrido = scrollY - inicio;
-      setAvance(Math.min(100, Math.max(0, recorrido / recorrible * 100)));
+      const walk = scrollY - start;
+      setAvance(Math.min(100, Math.max(0, walk / walkable * 100)));
     };
-    const alMoverse = () => {
-      if (pendiente.current) return;
-      pendiente.current = requestAnimationFrame(medir);
+    const onMove = () => {
+      if (pendingOne.current) return;
+      pendingOne.current = requestAnimationFrame(measure);
     };
-    medir();
-    addEventListener("scroll", alMoverse, { passive: true });
-    addEventListener("resize", alMoverse);
+    measure();
+    addEventListener("scroll", onMove, { passive: true });
+    addEventListener("resize", onMove);
     return () => {
-      if (pendiente.current) cancelAnimationFrame(pendiente.current);
-      removeEventListener("scroll", alMoverse);
-      removeEventListener("resize", alMoverse);
+      if (pendingOne.current) cancelAnimationFrame(pendingOne.current);
+      removeEventListener("scroll", onMove);
+      removeEventListener("resize", onMove);
     };
   }, [target]);
   return /* @__PURE__ */ jsx(
@@ -2967,75 +2901,181 @@ function ScrollingProgressBar({
         "div",
         {
           className: cn("h-full", tone === "warm" ? "bg-warm" : "bg-accent"),
-          style: { width: `${avance}%` }
+          style: { width: `${seek}%` }
         }
       )
     }
   );
 }
+var Collapsed = createContext(false);
 function SidebarItem({
   active = false,
   asChild = false,
   badge: badge2,
+  icon,
   className,
   children,
   ...props
 }) {
-  const Raiz = asChild ? Slot : "a";
+  const Root17 = asChild ? Slot : "a";
+  const collapsed = useContext(Collapsed);
   return /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-    Raiz,
+    Root17,
     {
       "aria-current": active ? "page" : void 0,
       className: cn(
         "rounded-chip px-step-sm gap-step-xs flex cursor-pointer items-center py-1.5",
+        collapsed && "justify-center",
         "font-mono text-meta transition-standard",
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
-        // El activo es fondo `surfaceRaised` y tinta primaria, igual que
-        // `TabsTrigger`. NO bioluz: `tokens.ts` lo dice explícito — acento
-        // claro pasa sobre background y sobre surface, pero sobre
-        // surfaceRaised mide 4.2 y no es color de texto ahí. El acento se
-        // queda en el `▸`, que es decorativo y le aplica el umbral de 3:1.
+        "focus-ring",
+        // The active item is `surfaceRaised` with primary ink, same as
+        // `TabsTrigger`. NOT biolume: `tokens.ts` says so explicitly — light
+        // accent passes over background and over surface, but over
+        // surfaceRaised it measures 4.2 and is not a text color there. The
+        // accent stays on the `▸`, which is decorative and gets the 3:1
+        // threshold.
         active ? "bg-surface-raised text-text-primary" : "text-text-secondary hover:text-text-primary hover:bg-surface-raised",
         className
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: active ? "text-accent" : "text-text-muted", children: "\u25B8" }),
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children }),
-        badge2 ? /* @__PURE__ */ jsx("span", { className: "text-text-muted shrink-0", children: badge2 }) : null
+        icon ? (
+          // A shade bigger than the 13px mono label, which is what keeps it
+          // reading as a glyph rather than as a character in the word.
+          /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-body shrink-0", children: icon })
+        ) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: active ? "text-accent" : "text-text-muted", children: "\u25B8" }),
+        /* @__PURE__ */ jsx("span", { className: collapsed ? "sr-only" : "min-w-0 flex-1 truncate", children }),
+        badge2 ? /* @__PURE__ */ jsx("span", { className: cn("text-text-muted", collapsed ? "sr-only" : "shrink-0"), children: badge2 }) : null
       ]
     }
   ) });
 }
+function SidebarGroup({ label, children, className, ...props }) {
+  const id = useId();
+  const collapsed = useContext(Collapsed);
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      className: cn(
+        "mt-step-md first:mt-0",
+        // In a rail the label has nowhere to go, so the block becomes a rule.
+        // The label itself stays in the accessibility tree naming the list.
+        collapsed && "border-hairline pt-step-md mt-step-sm border-t first:border-t-0",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          Text,
+          {
+            variant: "meta",
+            tone: "muted",
+            as: "p",
+            id,
+            className: collapsed ? "sr-only" : "px-step-sm pb-step-xs",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx("ul", { "aria-labelledby": id, className: "gap-0.5 flex flex-col", children })
+      ]
+    }
+  );
+}
 function SidebarNav({
   title,
+  brand: brand2,
+  mark,
+  user,
+  collapsed = false,
+  onCollapsedChange,
+  collapseLabel = "Plegar el panel",
+  expandLabel = "Desplegar el panel",
   version,
   branch,
   children,
   className,
   ...props
 }) {
-  const pie = [version, branch].filter(Boolean);
-  return /* @__PURE__ */ jsxs(
+  const footer = [version, branch].filter(Boolean);
+  const top = collapsed ? mark : brand2;
+  return /* @__PURE__ */ jsx(Collapsed.Provider, { value: collapsed, children: /* @__PURE__ */ jsxs(
     "nav",
     {
       "aria-label": typeof title === "string" ? title : "Administraci\xF3n",
       className: cn(
         "border-hairline bg-surface p-step-sm gap-step-sm flex h-full flex-col border-r",
+        // The width is the component's only when it can collapse: the layout
+        // beside it has to reserve one of the two, and it cannot know which.
+        // It does NOT transition. The system's only transition animates colour
+        // and border, and a rail that slides is the entrance animation this
+        // library does not have — same call as the `Switch` knob, which changes
+        // position without moving.
+        onCollapsedChange && (collapsed ? "w-sidebar-rail" : "w-sidebar"),
         className
       ),
       ...props,
       children: [
-        title ? /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", className: "px-step-sm", children: title }) : null,
+        top || onCollapsedChange ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "border-hairline px-step-sm pb-step-sm mb-step-xs gap-step-xs flex items-center border-b",
+              collapsed ? "justify-center" : "justify-between"
+            ),
+            children: [
+              top ? /* @__PURE__ */ jsx("span", { className: "min-w-0", children: top }) : null,
+              onCollapsedChange ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  onClick: () => onCollapsedChange(!collapsed),
+                  "aria-expanded": !collapsed,
+                  "aria-label": collapsed ? expandLabel : collapseLabel,
+                  className: cn(
+                    "rounded-chip transition-standard shrink-0 cursor-pointer p-1",
+                    "text-text-muted hover:text-text-primary hover:bg-surface-raised",
+                    "focus-ring"
+                  ),
+                  children: collapsed ? /* @__PURE__ */ jsx(ChevronRight, {}) : /* @__PURE__ */ jsx(ChevronLeft, {})
+                }
+              ) : null
+            ]
+          }
+        ) : null,
+        title && !collapsed ? /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", className: "px-step-sm", children: title }) : null,
         /* @__PURE__ */ jsx("ul", { className: "gap-0.5 flex flex-1 flex-col", children }),
-        pie.length > 0 ? /* @__PURE__ */ jsx(Text, { variant: "meta", tone: "muted", as: "p", className: "border-hairline px-step-sm pt-step-sm border-t", children: pie.map((p, i) => /* @__PURE__ */ jsxs("span", { children: [
-          i > 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7 " }) : null,
-          p
-        ] }, i)) }) : null
+        user ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "border-hairline px-step-sm pt-step-sm border-t",
+              collapsed && "flex justify-center"
+            ),
+            children: user
+          }
+        ) : null,
+        footer.length > 0 && !collapsed ? /* @__PURE__ */ jsx(
+          Text,
+          {
+            variant: "meta",
+            tone: "muted",
+            as: "p",
+            className: cn("px-step-sm", user ? "" : "border-hairline pt-step-sm border-t"),
+            children: footer.map((p, i) => /* @__PURE__ */ jsxs("span", { children: [
+              i > 0 ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: " \xB7 " }) : null,
+              p
+            ] }, i))
+          }
+        ) : null
       ]
     }
-  );
+  ) });
 }
+var DELTA = {
+  up: { glyph: ChevronUp, label: "sube" },
+  down: { glyph: ChevronDown, label: "baja" },
+  flat: { glyph: Minus, label: "sin cambio" }
+};
 function Stat({
   value,
   label,
@@ -3043,30 +3083,52 @@ function Stat({
   progress,
   icon,
   description,
+  delta,
+  spark,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: cn(SUPERFICIE_TARJETA, "p-step-lg gap-step-xs flex flex-col", className), ...props, children: [
-    /* @__PURE__ */ jsxs(Text, { variant: "eyebrow", tone: "muted", as: "p", className: "gap-step-xs flex items-center", children: [
+  const DeltaGlyph = delta ? DELTA[delta.direction].glyph : null;
+  return /* @__PURE__ */ jsxs("div", { className: cn(CARD_SURFACE, "p-step-lg gap-step-xs flex flex-col", className), ...props, children: [
+    /* @__PURE__ */ jsxs("div", { className: "gap-step-sm flex items-start justify-between", children: [
+      /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", className: "min-w-0", children: label }),
       icon ? (
-        // `aria-hidden` no hace falta: los glifos del sistema ya lo traen
-        // puesto. Lo que sí hace falta es que no encoja al lado de un título
-        // largo, porque un icono aplastado se lee como otro icono.
-        /* @__PURE__ */ jsx("span", { className: "shrink-0", children: icon })
-      ) : null,
-      label
+        // `aria-hidden` is not needed: the system's glyphs already carry it.
+        // The circle is a SURFACE — the tint at 10 %, same as an alert's — and
+        // the colour stays on the glyph, which is § 4b and also what keeps it
+        // on the 3:1 graphical threshold instead of text's 4.5.
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "size-control-icon-sm text-ui flex shrink-0 items-center justify-center rounded-full",
+              tone === "neutral" ? "bg-accent/10 text-accent" : "bg-warm/10 text-warm"
+            ),
+            children: icon
+          }
+        )
+      ) : null
     ] }),
-    /* @__PURE__ */ jsx(Text, { variant: "stat", as: "p", tone: tone === "alerta" ? "warm" : "accent", children: value }),
+    /* @__PURE__ */ jsx(Text, { variant: "stat", as: "p", tone: tone === "neutral" ? "primary" : "warm", children: value }),
+    delta && DeltaGlyph ? /* @__PURE__ */ jsxs(Text, { variant: "label", tone: "secondary", as: "p", className: "gap-step-xs flex items-center", children: [
+      /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+        DELTA[delta.direction].label,
+        " "
+      ] }),
+      /* @__PURE__ */ jsx(DeltaGlyph, { className: "shrink-0" }),
+      delta.value
+    ] }) : null,
     description ? /* @__PURE__ */ jsx(Text, { variant: "ui", tone: "secondary", as: "p", children: description }) : null,
     typeof progress === "number" ? /* @__PURE__ */ jsx(
       Progress,
       {
         value: progress,
-        tone: tone === "alerta" ? "warm" : "accent",
+        tone: tone === "neutral" ? "accent" : "warm",
         label: `${label}: ${progress}%`,
         className: "mt-step-sm"
       }
-    ) : null
+    ) : null,
+    spark ? /* @__PURE__ */ jsx("div", { className: "mt-auto pt-step-md", children: spark }) : null
   ] });
 }
 function TalkCard({
@@ -3077,25 +3139,55 @@ function TalkCard({
   location,
   status,
   description,
+  resources,
   className,
   ...props
 }) {
-  const pie = [
-    date ? /* @__PURE__ */ jsx("time", { dateTime, children: date }, "fecha") : null,
-    location ? /* @__PURE__ */ jsx("span", { children: location }, "lugar") : null
+  const footer = [
+    date ? /* @__PURE__ */ jsx("time", { dateTime, children: date }, "date") : null,
+    location ? /* @__PURE__ */ jsx("span", { children: location }, "location") : null
   ].filter(Boolean);
-  return /* @__PURE__ */ jsx(Tarjeta, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs("div", { className: "gap-step-sm flex items-start justify-between", children: [
       /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: event }),
       status ? /* @__PURE__ */ jsx(Badge, { variant: "neutral", children: status }) : null
     ] }),
-    /* @__PURE__ */ jsx(Text, { as: "h3", variant: "h3", className: "group-hover:text-accent transition-standard", children: title }),
+    /* @__PURE__ */ jsx(
+      Text,
+      {
+        as: "h3",
+        variant: "h3",
+        className: cn(!resources && "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
-  ] }) });
+    footer.length > 0 ? /* @__PURE__ */ jsx(
+      Text,
+      {
+        variant: "label",
+        tone: "muted",
+        as: "p",
+        className: cn("gap-step-xs flex items-center pt-step-sm", !resources && "mt-auto"),
+        children: footer.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,
+    resources ? /* @__PURE__ */ jsx("div", { className: "gap-step-md mt-auto flex flex-wrap items-center pt-step-sm", children: resources }) : null
+  ] });
+  if (resources) {
+    return /* @__PURE__ */ jsx(
+      "article",
+      {
+        className: cn(CARD_SURFACE, "p-step-lg gap-step-sm flex h-full flex-col", className),
+        ...props,
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(CardShell, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsx("article", { className: "gap-step-sm flex h-full flex-col", children: body }) });
 }
 function ThemeToggle({
   label = "Cambiar de tema",
@@ -3113,20 +3205,20 @@ function ThemeToggle({
       size: size2,
       "aria-label": label,
       className: cn("[&_svg]:size-[19px]", className),
-      onClick: () => onThemeChange?.(alternarTema()),
+      onClick: () => onThemeChange?.(toggleTheme()),
       ...props,
       children: [
-        /* @__PURE__ */ jsx(Sol, { className: "light:hidden" }),
-        /* @__PURE__ */ jsx(Luna, { className: "hidden light:block" })
+        /* @__PURE__ */ jsx(Sun, { className: "light:hidden" }),
+        /* @__PURE__ */ jsx(Moon, { className: "hidden light:block" })
       ]
     }
   );
 }
-function useTema() {
-  return useSyncExternalStore(suscribirse2, temaActual, servidor);
+function useTheme() {
+  return useSyncExternalStore(subscribe2, currentTheme, server);
 }
-var suscribirse2 = (avisar) => escucharTema(() => avisar());
-var servidor = () => "dark";
+var subscribe2 = (warn) => watchTheme(() => warn());
+var server = () => "dark";
 function TableOfContents({
   items,
   title = "En esta p\xE1gina",
@@ -3138,83 +3230,22 @@ function TableOfContents({
   return /* @__PURE__ */ jsxs("nav", { "aria-label": typeof title === "string" ? title : "En esta p\xE1gina", className: cn("gap-step-sm flex flex-col", className), ...props, children: [
     /* @__PURE__ */ jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", children: title }),
     /* @__PURE__ */ jsx("ul", { className: "border-hairline gap-step-xs flex flex-col border-l", children: items.map((item2) => {
-      const activo = item2.href === activeHref;
-      const clases = cn(
+      const active = item2.href === activeHref;
+      const classes = cn(
         "px-step-sm -ml-px block border-l",
         "font-sans text-label transition-standard",
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-ring",
         "cursor-pointer",
         item2.nested && "pl-step-lg",
         "border-transparent text-text-secondary hover:text-text-primary",
-        // El hover del activo se declara con las dos variantes juntas para
-        // que gane al `hover:` de arriba por especificidad y no por el orden
-        // en que Tailwind decida emitir las reglas.
+        // The active hover is declared with both variants together so it
+        // beats the `hover:` above by specificity and not by the order
+        // Tailwind happens to emit the rules in.
         "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);
+      return /* @__PURE__ */ jsx("li", { children: linkAsChild ? /* @__PURE__ */ jsx(Slot, { className: classes, "aria-current": active ? "location" : void 0, children: linkAsChild({ href: item2.href, children: item2.label }) }) : /* @__PURE__ */ jsx("a", { href: item2.href, className: classes, "aria-current": active ? "location" : void 0, children: item2.label }) }, item2.href);
     }) })
   ] });
 }
 
-// src/lib/social.tsx
-var social_exports = {};
-__export(social_exports, {
-  Correo: () => Correo,
-  Discord: () => Discord,
-  GitHub: () => GitHub,
-  Instagram: () => Instagram,
-  LinkedIn: () => LinkedIn,
-  Rss: () => Rss,
-  X: () => X,
-  YouTube: () => YouTube
-});
-function Marca({ children, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      width: "1em",
-      height: "1em",
-      fill: "currentColor",
-      "aria-hidden": "true",
-      focusable: "false",
-      ...props,
-      children
-    }
-  );
-}
-function Funcional({ children, ...props }) {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      width: "1em",
-      height: "1em",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 1.6,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      focusable: "false",
-      ...props,
-      children
-    }
-  );
-}
-var GitHub = (props) => /* @__PURE__ */ jsx(Marca, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M12 .5C5.73.5.5 5.73.5 12a11.5 11.5 0 0 0 7.86 10.91c.58.1.79-.25.79-.55 0-.27-.01-1.18-.02-2.14-3.2.7-3.88-1.36-3.88-1.36-.52-1.33-1.28-1.68-1.28-1.68-1.05-.72.08-.7.08-.7 1.16.08 1.77 1.19 1.77 1.19 1.03 1.77 2.7 1.26 3.36.96.1-.75.4-1.26.73-1.55-2.55-.29-5.24-1.28-5.24-5.69 0-1.26.45-2.29 1.19-3.09-.12-.29-.52-1.46.11-3.05 0 0 .97-.31 3.18 1.18a11 11 0 0 1 5.79 0c2.2-1.49 3.17-1.18 3.17-1.18.63 1.59.23 2.76.12 3.05.74.8 1.18 1.83 1.18 3.09 0 4.42-2.69 5.39-5.25 5.68.41.36.78 1.06.78 2.14 0 1.55-.01 2.79-.01 3.17 0 .3.2.66.79.55A11.5 11.5 0 0 0 23.5 12C23.5 5.73 18.27.5 12 .5Z" }) });
-var LinkedIn = (props) => /* @__PURE__ */ jsx(Marca, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M4.98 3.5a2.5 2.5 0 1 1 0 5 2.5 2.5 0 0 1 0-5ZM3 9h4v12H3V9Zm7 0h3.8v1.71h.05a4.17 4.17 0 0 1 3.75-2.06c4.01 0 4.75 2.64 4.75 6.07V21h-4v-5.4c0-1.29-.02-2.95-1.8-2.95-1.8 0-2.08 1.4-2.08 2.85V21h-3.97V9Z" }) });
-var X = (props) => /* @__PURE__ */ jsx(Marca, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M17.53 3h3.06l-6.69 7.64L21.75 21h-6.16l-4.83-6.3L5.25 21H2.19l7.15-8.17L2.5 3h6.32l4.36 5.77L17.53 3Zm-1.07 16.17h1.7L7.62 4.74H5.8l10.66 14.43Z" }) });
-var Instagram = (props) => /* @__PURE__ */ jsx(Marca, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M12 2.16c3.2 0 3.58.01 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s-.01 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58-.01-4.85-.07c-1.17-.05-1.8-.25-2.23-.41-.56-.22-.96-.48-1.38-.9-.42-.42-.68-.82-.9-1.38-.16-.42-.36-1.06-.41-2.23C2.17 15.58 2.16 15.2 2.16 12s.01-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.17 8.8 2.16 12 2.16Zm0 3.68a6.16 6.16 0 1 0 0 12.32 6.16 6.16 0 0 0 0-12.32Zm0 10.16a4 4 0 1 1 0-8 4 4 0 0 1 0 8Zm7.85-10.4a1.44 1.44 0 1 1-2.88 0 1.44 1.44 0 0 1 2.88 0Z" }) });
-var Discord = (props) => /* @__PURE__ */ jsx(Marca, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M20.32 5.56A18.5 18.5 0 0 0 15.7 4.1a.07.07 0 0 0-.07.04c-.2.36-.42.82-.58 1.19a17 17 0 0 0-5.1 0c-.16-.38-.39-.83-.59-1.19a.07.07 0 0 0-.07-.04c-1.6.28-3.15.77-4.62 1.46a.06.06 0 0 0-.03.03C1.66 10 .9 14.28 1.28 18.5a.08.08 0 0 0 .03.05 18.6 18.6 0 0 0 5.6 2.84.07.07 0 0 0 .08-.03c.43-.59.81-1.21 1.14-1.86a.07.07 0 0 0-.04-.1c-.6-.23-1.18-.51-1.74-.83a.07.07 0 0 1-.01-.12l.35-.27a.07.07 0 0 1 .07-.01 13.3 13.3 0 0 0 11.3 0 .07.07 0 0 1 .08.01l.34.27c.04.04.04.1-.01.12-.55.33-1.13.6-1.74.83a.07.07 0 0 0-.04.1c.34.65.72 1.27 1.14 1.86a.07.07 0 0 0 .08.03 18.5 18.5 0 0 0 5.6-2.84.07.07 0 0 0 .04-.05c.45-4.88-.75-9.12-3.18-12.88a.06.06 0 0 0-.03-.03ZM8.4 15.93c-1.1 0-2.01-1.01-2.01-2.25 0-1.24.89-2.25 2.01-2.25 1.13 0 2.03 1.02 2.02 2.25 0 1.24-.9 2.25-2.02 2.25Zm7.22 0c-1.1 0-2.01-1.01-2.01-2.25 0-1.24.89-2.25 2.01-2.25 1.13 0 2.03 1.02 2.02 2.25 0 1.24-.89 2.25-2.02 2.25Z" }) });
-var YouTube = (props) => /* @__PURE__ */ jsx(Marca, { ...props, children: /* @__PURE__ */ jsx("path", { d: "M23.5 6.9a3 3 0 0 0-2.12-2.12C19.5 4.27 12 4.27 12 4.27s-7.5 0-9.38.51A3 3 0 0 0 .5 6.9 31.3 31.3 0 0 0 0 12a31.3 31.3 0 0 0 .5 5.1 3 3 0 0 0 2.12 2.12c1.88.51 9.38.51 9.38.51s7.5 0 9.38-.51a3 3 0 0 0 2.12-2.12A31.3 31.3 0 0 0 24 12a31.3 31.3 0 0 0-.5-5.1ZM9.6 15.6V8.4l6.24 3.6-6.24 3.6Z" }) });
-var Rss = (props) => /* @__PURE__ */ jsxs(Funcional, { ...props, children: [
-  /* @__PURE__ */ jsx("path", { d: "M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16" }),
-  /* @__PURE__ */ jsx("circle", { cx: "5", cy: "19", r: "1.6", fill: "currentColor", stroke: "none" })
-] });
-var Correo = (props) => /* @__PURE__ */ jsxs(Funcional, { ...props, children: [
-  /* @__PURE__ */ jsx("rect", { x: "2.75", y: "4.75", width: "18.5", height: "14.5", rx: "2" }),
-  /* @__PURE__ */ jsx("path", { d: "m3.5 7.5 7.4 5.2a2 2 0 0 0 2.2 0l7.4-5.2" })
-] });
-
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, ArticleCard, AudioPlayer, AuthorCard, Avatar, AvatarFallback, AvatarImage, AvatarUpload, 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, EventCalendar, 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, ToastAction, 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 };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogTitle, AlertDialogTrigger, ArticleCard, AudioPlayer, AuthorCard, Avatar, AvatarFallback, AvatarImage, AvatarUpload, 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, EventCalendar, Footer, FooterLink, Hero, Input, LinkRow, MetricBadge, Nav, NavItem, NewsletterForm, PageHeader, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup2 as RadioGroup, RadioGroupItem, ScrollingProgressBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Sheet, SheetBody, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, SidebarGroup, SidebarItem, SidebarNav, Skeleton, Stat, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableOfContents, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, TalkCard, Textarea, ThemeToggle, ToastAction, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, toast2 as toast, useTheme };