@eduardoalvarez/arrecife 0.5.1 → 0.7.0

package/dist/index.cjs

@@ -1,14 +1,15 @@
+'use client';
 'use strict';
 
+var classVarianceAuthority = require('class-variance-authority');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var clsx = require('clsx');
 var tailwindMerge = require('tailwind-merge');
 var jsxRuntime = require('react/jsx-runtime');
-var classVarianceAuthority = require('class-variance-authority');
 var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
-var reactSlot = require('@radix-ui/react-slot');
 var AvatarPrimitive = require('@radix-ui/react-avatar');
 var react = require('react');
+var reactSlot = require('@radix-ui/react-slot');
 var locale = require('date-fns/locale');
 var reactDayPicker = require('react-day-picker');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
@@ -70,144 +71,175 @@ var __export = (target, all) => {
 // src/tokens/tokens.ts
 var dark = {
   background: "#091319",
-  //          abismo · fondo de página
+  //          abyss · page background
   surface: "#10202B",
-  //             fosa · tarjetas y paneles
+  //             trench · cards and panels
   surfaceRaised: "#17303E",
-  //       corriente · menús, tabs activos
+  //       current · menus, active tabs
   border: "#22414F",
-  //              bordes de control
+  //              control borders
   hairline: "#1E3441",
-  //            divisiones sutiles
+  //            subtle dividers
   hairlineHover: "#2C4D5D",
-  //       hairline en hover de tarjeta
+  //       hairline on card hover
   textPrimary: "#EDF4F3",
-  //         espuma            16.84:1
+  //         foam              16.84:1
   textSecondary: "#A7BCC4",
-  //       bruma              9.50:1
+  //       haze               9.50:1
   textMuted: "#71919C",
-  //           plancton           5.57:1  nunca bajo 13px
+  //           plankton           5.57:1  never under 13px
   accent: "#35D6C0",
-  //              bioluz            10.31:1  interactivo
+  //              biolume           10.31:1  interactive
   accentHover: "#5FE3D1",
   accentOn: "#06171A",
-  //            tinta sobre bioluz
+  //            ink over biolume
   warm: "#F2A65A",
-  //                arena              9.28:1  humano y conversión
+  //                sand               9.28:1  human and conversion
   warmHover: "#F7BB7D",
   warmOn: "#2A1605",
-  //              tinta sobre arena
+  //              ink over sand
   success: "#4FB477",
   warning: "#E8A33D",
-  error: "#E15757"
-  //                                 4.51:1 sobre surface
+  error: "#E15757",
+  //                                 4.51:1 over surface
+  /**
+   * The destructive fill. It is NOT `error`, and the difference is the role.
+   *
+   * `error` is a TEXT color: it has to read against a dark surface, so it sits
+   * mid-red. `danger` is a FILL: what has to read is the ink ON TOP of it, so it
+   * goes lighter. Same reasoning as `accent` and `accentOn` — one is measured
+   * against the page, the other against what it carries.
+   *
+   * Measured: ink 6.53:1 over the fill and 7.92:1 over the hover; the fill
+   * itself 6.71:1 over abyss, 5.94 over surface and 4.91 over surfaceRaised, so
+   * the outline variant reads as text on all three.
+   */
+  danger: "#F4736B",
+  dangerHover: "#F78D86",
+  dangerOn: "#2B0A08"
+  //             ink over danger    6.53:1
 };
 var light = {
   background: "#F6F2EA",
-  //          papel
+  //          paper
   surface: "#FFFFFF",
   surfaceRaised: "#EFE9DE",
   border: "#E6DFD2",
   hairline: "#EBE6DC",
   hairlineHover: "#D3C8B2",
-  //       hairline en hover de tarjeta
+  //       hairline on card hover
   textPrimary: "#0B1524",
   //                           16.40:1
   textSecondary: "#3D4B58",
   textMuted: "#626A75",
-  //                             4.53:1 sobre surfaceRaised
+  //                             4.53:1 over surfaceRaised
   accent: "#0D7C6F",
-  //              bioluz oscura      4.55:1
+  //              dark biolume       4.55:1
   accentHover: "#0C7466",
   accentOn: "#FFFFFF",
   warm: "#A65B27",
-  //                arena oscura       4.54:1
+  //                dark sand          4.54:1
   warmHover: "#96511F",
   warmOn: "#FFF7EE",
   success: "#0F6B52",
   warning: "#8D6111",
-  //                               4.51:1 sobre surfaceRaised
-  error: "#C0392B"
+  //                               4.51:1 over surfaceRaised
+  error: "#C0392B",
+  /**
+   * In light mode `danger` and `error` land on the same hex, and that is not an
+   * oversight: over paper a red dark enough to carry white ink is also the red
+   * that reads as text. In dark they part company because the fill has to be
+   * lighter than the text color, not darker.
+   *
+   * Measured: ink 5.11:1 over the fill and 6.61:1 over the hover; the fill
+   * itself 4.87:1 over paper, 5.44 over surface and 4.50 over surfaceRaised —
+   * the last one is exactly on the AA line, which is where every light semantic
+   * in this palette sits.
+   */
+  danger: "#C0392B",
+  dangerHover: "#A32F22",
+  dangerOn: "#FFF6F4"
+  //                              5.11:1 over danger
 };
 var colors = { dark, light };
 var brand = {
-  /** Cuerpo de la mascota. 4.22:1 → SOLO relleno, NUNCA texto. */
+  /** The mascot's body. 4.22:1 → FILL ONLY, NEVER text. */
   body: "#3E7CB1",
-  /** Patrón de manchas. */
+  /** Spot pattern. */
   spots: "#C2D7E7",
-  /** Casco · contorno y fondo de bloques de código. */
+  /** Hull · outline, and the background of code blocks. */
   hull: "#0B1524"
 };
 var fonts = {
-  /** SOLO titulares y números grandes. Nunca cuerpo. */
+  /** Headlines and large numbers ONLY. Never body copy. */
   display: '"Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif',
-  /** Cuerpo e interfaz. */
+  /** Body and interface. */
   sans: '"Geist", ui-sans-serif, system-ui, sans-serif',
-  /** Código, rutas, etiquetas, metadatos, firma CLI. */
+  /** Code, paths, labels, metadata, the CLI signature. */
   mono: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace'
 };
 var typeScale = {
   display: { family: "display", size: 76, lineHeight: 0.96, weight: 800, tracking: "-0.035em" },
-  /** Métricas grandes. Números, no prosa: interlineado 1 y sin descendentes. */
+  /** Large metrics. Numbers, not prose: line height 1 and no descenders. */
   stat: { family: "display", size: 46, lineHeight: 1, weight: 800, tracking: "-0.035em" },
   h1: { family: "display", size: 44, lineHeight: 1.05, weight: 700, tracking: "-0.03em" },
   h2: { family: "display", size: 30, lineHeight: 1.1, weight: 600, tracking: "-0.02em" },
   h3: { family: "display", size: 25, lineHeight: 1.15, weight: 600, tracking: "-0.02em" },
   body: { family: "sans", size: 18, lineHeight: 1.75, weight: 400 },
   /**
-   * 17px. El botón grande y la bajada de las páginas internas.
+   * 17px. The large button, and the deck on interior pages.
    *
-   * Entra como escalón propio porque el documento lo usa DOS veces y en piezas
-   * distintas: «lg 15px 30px r12» con texto de 17, y «h1 44/700 · bajada 17px ·
-   * párrafo de contexto 15px». Un solo uso no habría justificado partir la
-   * distancia entre `ui` (15) y `body` (18); dos sí.
+   * It earns its own step because the identity document uses it TWICE, in two
+   * different pieces: «lg 15/30 r12» with 17px text, and «h1 44/700 · deck 17px
+   * · context paragraph 15px». One use would not have justified splitting the
+   * gap between `ui` (15) and `body` (18); two did.
    */
   lead: { family: "sans", size: 17, lineHeight: 1.5, weight: 400 },
   ui: { family: "sans", size: 15, lineHeight: 1.6, weight: 400 },
   label: { family: "sans", size: 13, lineHeight: 1.5, weight: 500 },
   /**
-   * La escala de las etiquetas de estado: sans 12.5/500, cuadrada.
+   * The status-badge scale: sans 12.5/500, squared off.
    *
-   * Es medio píxel por debajo de `label`, y esta vez el medio píxel sí importa:
-   * una etiqueta de estado va dentro de una tabla o al lado de un título, y a 13
-   * competía con el texto que acompaña. El documento la da en 12.5 y se ve.
+   * That is half a pixel below `label`, and this time the half pixel matters: a
+   * status badge sits inside a table or next to a title, and at 13 it competed
+   * with the text it accompanies. The document specifies 12.5 and it shows.
    */
   tag: { family: "sans", size: 12.5, lineHeight: 1.4, weight: 500 },
   /**
-   * La escala de categoría y métrica: mono 11.5.
+   * The category and metric scale: mono 11.5.
    *
-   * Rompe el suelo de `limits.minScreenPx`, y es a propósito. Ese suelo protege
-   * al TEXTO —lo que se lee en una frase—, y una píldora de una palabra no es
-   * texto corrido: es una marca. El contraste sigue medido y pasa AA (plancton
-   * 5.57:1 sobre abismo), que es la parte que no se negocia.
+   * It breaks the floor set by `limits.minScreenPx`, deliberately. That floor
+   * protects TEXT — what you read in a sentence — and a one-word pill is not
+   * running text: it is a mark. Contrast is still measured and still passes AA
+   * (plankton 5.57:1 over abyss), which is the part that is not negotiable.
    *
-   * A 13 las tres familias de etiqueta salían del tamaño de un botón pequeño y
-   * pesaban más que el título que acompañan. Ver `docs/decisiones.md`.
+   * At 13 the three badge families grew past the size of a small button and
+   * outweighed the title they accompany. See `docs/decisions.md`.
    */
   chip: { family: "mono", size: 11.5, lineHeight: 1.4, weight: 400 },
   /**
-   * Mono SIN transformar: fechas, rutas, versiones, nombres de archivo, la firma
-   * del footer y las métricas de etiqueta. Es la mayoría del mono del sistema.
+   * Mono with NO transform: dates, paths, versions, file names, the footer
+   * signature and metric labels. It is most of the mono in the system.
    *
-   * Existe porque `eyebrow` lleva `uppercase` de fábrica y no es una preferencia
-   * que se pueda apagar: es la escala del eyebrow. Un `18 ago 2026` en versalitas
-   * o un `pose-laptop-coffee.png` en mayúsculas están mal, y sin este escalón la
-   * única salida era un `normal-case` en cada sitio de uso.
+   * It exists because `eyebrow` ships `uppercase` and that is not a preference
+   * you can switch off: it IS the eyebrow scale. An `18 Aug 2026` in small caps
+   * or a `pose-laptop-coffee.png` in all caps are wrong, and without this step
+   * the only way out was a `normal-case` at every call site.
    *
-   * El documento dice 12.5. Son 13 por la misma razón por la que `textMuted` se
-   * corrigió: `limits.minScreenPx` es 13 y plancton «nunca bajo 13px». Esta
-   * escala es justo donde se escriben las metas en muted, así que ponerla en
-   * 12.5 habría dejado ilegible su uso más común por medio píxel.
+   * The document says 12.5. This is 13 for the same reason `textMuted` was
+   * corrected: `limits.minScreenPx` is 13 and plankton is «never under 13px».
+   * This scale is exactly where muted metadata gets written, so putting it at
+   * 12.5 would have made its most common use illegible by half a pixel.
    */
   meta: { family: "mono", size: 13, lineHeight: 1.6, weight: 400 },
   eyebrow: { family: "mono", size: 12, tracking: "0.12em", transform: "uppercase" }
 };
 var limits = {
-  /** Mínimo absoluto en pantalla. */
+  /** Absolute minimum on screen. */
   minScreenPx: 13,
-  /** Mínimo absoluto impreso. */
+  /** Absolute minimum in print. */
   minPrintPt: 12,
-  /** Medida máxima de cuerpo. */
+  /** Maximum body measure. */
   measure: "68ch"
 };
 var radius = {
@@ -221,8 +253,24 @@ var control = {
   sm: 14,
   md: 22,
   lg: 30,
-  /** Botón de icono: cuadrado, sin texto. */
-  icon: 42
+  /** Icon button: square, no text. */
+  icon: 42,
+  /**
+   * The dense icon button, 32×32.
+   *
+   * 42 is the right measure for a control you hit with a thumb, and the four
+   * reading sites are where that fits. `cursos` is the odd one out: it is the
+   * only admin app of the set, with three actions per table row, and at 42 the
+   * row grows with them — the original used 24 and 28.
+   *
+   * It is 32 and not 28 because 32 is `sm`'s height. A dense icon button lines
+   * up with a small text button, so a toolbar mixing the two stays on one
+   * baseline; 28 would have been a fifth height that matches nothing.
+   *
+   * It does not replace `icon`. A page's primary action stays at 42; this is for
+   * a row of a table. See `docs/decisions.md` § 22.
+   */
+  iconSm: 32
 };
 var spacing = {
   stepXs: 8,
@@ -233,43 +281,67 @@ var spacing = {
   section: 96
 };
 var size = {
-  /** Alto de la barra de navegación. */
+  /** Navigation bar height. */
   nav: 64,
-  /** Ancho de columna de lectura. */
+  /**
+   * The bar when it shares the screen with a sidebar.
+   *
+   * It is not «a smaller bar because it looks better». At 64 the header of an
+   * app shell competes with the rail beside it for the same corner, and the two
+   * together eat the top of the content area. 56 is what `cursos` had arrived at
+   * on its own, and it is the same reasoning as `control.iconSm`: the one admin
+   * app of the five is denser than the four reading sites. See
+   * `docs/decisions.md` § 30.
+   */
+  navCompact: 56,
+  /**
+   * The admin sidebar, and the rail it collapses to.
+   *
+   * They are tokens and not the consumer's `w-*` because a collapsible sidebar
+   * has to know BOTH: the layout beside it reserves one of the two, and two
+   * numbers written by hand in two files drift the first time one of them moves.
+   * A sidebar that never collapses is still just a box the layout sizes.
+   *
+   * 56 is the rail: `navCompact`'s height, so a panel's bar and its rail meet in
+   * a square corner instead of a step.
+   */
+  sidebar: 256,
+  sidebarRail: 56,
+  /** Reading column width. */
   content: 760,
-  /** Ancho máximo de página. */
+  /** Maximum page width. */
   wide: 1180
 };
-var sintaxis = {
-  /** El casco. Es el fondo del bloque en los dos modos. */
-  fondo: brand.hull,
-  /** Identificadores, funciones, tipos, variables. */
-  identificador: dark.textPrimary,
-  /** Cadenas, números, booleanos, null. */
+var syntax = {
+  /** The hull. It is the block background in both modes. */
+  background: brand.hull,
+  /** Identifiers, functions, types, variables. */
+  identifier: dark.textPrimary,
+  /** Strings, numbers, booleans, null. */
   literal: dark.accent,
-  /** Palabras clave, control de flujo, `import`, `this`. */
-  palabraClave: dark.warm,
-  /** Comentarios y puntuación. */
-  comentario: dark.textMuted,
+  /** Keywords, control flow, `import`, `this`. */
+  keyword: dark.warm,
+  /** Comments and punctuation. */
+  comment: dark.textMuted,
   /** `markup.deleted`, `invalid`. */
-  invalido: dark.error
+  invalid: dark.error
 };
 var series = {
   dark: [dark.accent, dark.warm, brand.body, dark.textMuted],
   light: [light.accent, light.warm, brand.body, light.textMuted]
 };
-var profundo = "#0D2129";
+var deep = "#0D2129";
 var gradient = {
   dark: {
-    hero: `linear-gradient(160deg, ${dark.background} 60%, ${profundo} 100%)`,
-    seccion: `linear-gradient(150deg, ${dark.surface} 0%, ${profundo} 100%)`,
-    /** El de la plantilla OG de artículo. 145°, del documento. */
-    og: `linear-gradient(145deg, ${dark.background} 55%, ${profundo} 100%)`
+    hero: `linear-gradient(160deg, ${dark.background} 60%, ${deep} 100%)`,
+    section: `linear-gradient(150deg, ${dark.surface} 0%, ${deep} 100%)`,
+    /** The one used by the article OG template. 145°, from the document. */
+    og: `linear-gradient(145deg, ${dark.background} 55%, ${deep} 100%)`
   },
   light: {
-    hero: `linear-gradient(160deg, ${light.background} 60%, ${light.surfaceRaised} 100%)`,
-    seccion: `linear-gradient(150deg, ${light.surface} 0%, ${light.surfaceRaised} 100%)`,
-    og: `linear-gradient(145deg, ${light.background} 55%, ${light.surfaceRaised} 100%)`
+    hero: `linear-gradient(160deg, ${light.background} 60%, ${light.surface} 100%)`,
+    section: `linear-gradient(150deg, ${light.surface} 0%, ${light.background} 100%)`,
+    og: `linear-gradient(145deg, ${light.background} 55%, ${light.surface} 100%)`
   }
 };
 var shadow = {
@@ -282,16 +354,16 @@ var motion = {
 };
 var tagline = {
   /** Hero. */
-  largo: "Ayudo a equipos de ingenier\xEDa a escalar con criterio",
-  /** Header, una línea. */
-  corto: "Ayudo a equipos a escalar con criterio",
+  long: "Ayudo a equipos de ingenier\xEDa a escalar con criterio",
+  /** Header, one line. */
+  short: "Ayudo a equipos a escalar con criterio",
   /** LinkedIn. */
   en: "Helping engineering teams scale with judgment"
 };
 var naming = {
   wordmark: "Eduardo \xC1lvarez",
   mascot: "Tiburonc\xEDn",
-  /** El dominio, para la firma CLI del footer: `$ cd ~/eduardoalvarez.dev/2026`. */
+  /** The domain, for the footer CLI signature: `$ cd ~/eduardoalvarez.dev/2026`. */
   domain: "eduardoalvarez.dev"
 };
 
@@ -307,7 +379,7 @@ var tokens = {
   spacing,
   size,
   gradient,
-  sintaxis,
+  syntax,
   series,
   shadow,
   motion,
@@ -315,102 +387,284 @@ var tokens = {
   naming
 };
 
-// src/tema/index.ts
-var TEMA_CLAVE = "arrecife-tema";
-var TEMA_ATRIBUTO = "data-theme";
-var TEMA_EVENTO = "arrecife:tema";
-var esTema = (valor) => valor === "dark" || valor === "light";
-function temaActual() {
+// src/theme/index.ts
+var THEME_KEY = "arrecife-theme";
+var THEME_ATTRIBUTE = "data-theme";
+var THEME_EVENT = "arrecife:theme";
+var isTheme = (value) => value === "dark" || value === "light";
+function currentTheme() {
   if (typeof document === "undefined") return "dark";
-  const puesto = document.documentElement.getAttribute(TEMA_ATRIBUTO);
-  return esTema(puesto) ? puesto : "dark";
+  const set = document.documentElement.getAttribute(THEME_ATTRIBUTE);
+  return isTheme(set) ? set : "dark";
 }
-function temaGuardado() {
+function storedTheme() {
   if (typeof localStorage === "undefined") return null;
   try {
-    const valor = localStorage.getItem(TEMA_CLAVE);
-    return esTema(valor) ? valor : null;
+    const value = localStorage.getItem(THEME_KEY);
+    return isTheme(value) ? value : null;
   } catch {
     return null;
   }
 }
-function temaPreferido() {
-  const guardado = temaGuardado();
-  if (guardado) return guardado;
+function preferredTheme({ base } = {}) {
+  const stored = storedTheme();
+  if (stored) return stored;
+  if (base) return base;
   if (typeof matchMedia === "undefined") return "dark";
   return matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";
 }
-function aplicarTema(tema, persistir = true) {
+function applyTheme(theme, persist = true) {
   if (typeof document === "undefined") return;
-  document.documentElement.setAttribute(TEMA_ATRIBUTO, tema);
-  document.documentElement.style.colorScheme = tema;
-  if (persistir) {
+  document.documentElement.setAttribute(THEME_ATTRIBUTE, theme);
+  document.documentElement.style.colorScheme = theme;
+  if (persist) {
     try {
-      localStorage.setItem(TEMA_CLAVE, tema);
+      localStorage.setItem(THEME_KEY, theme);
     } catch {
     }
   }
-  dispatchEvent(new CustomEvent(TEMA_EVENTO, { detail: tema }));
+  dispatchEvent(new CustomEvent(THEME_EVENT, { detail: theme }));
 }
-function alternarTema() {
-  const siguiente = temaActual() === "dark" ? "light" : "dark";
-  aplicarTema(siguiente);
-  return siguiente;
+function toggleTheme() {
+  const next = currentTheme() === "dark" ? "light" : "dark";
+  applyTheme(next);
+  return next;
 }
-function escucharTema(alCambiar) {
+function watchTheme(onChange, options = {}) {
   if (typeof window === "undefined") return () => {
   };
-  const propio = (evento) => {
-    const detalle = evento.detail;
-    if (esTema(detalle)) alCambiar(detalle);
+  const own = (event) => {
+    const detail = event.detail;
+    if (isTheme(detail)) onChange(detail);
   };
-  const otraPestana = (evento) => {
-    if (evento.key !== TEMA_CLAVE) return;
-    const tema = esTema(evento.newValue) ? evento.newValue : temaPreferido();
-    aplicarTema(tema, false);
-    alCambiar(tema);
+  const otherTab = (event) => {
+    if (event.key !== THEME_KEY) return;
+    const theme = isTheme(event.newValue) ? event.newValue : preferredTheme(options);
+    applyTheme(theme, false);
+    onChange(theme);
   };
-  addEventListener(TEMA_EVENTO, propio);
-  addEventListener("storage", otraPestana);
+  addEventListener(THEME_EVENT, own);
+  addEventListener("storage", otherTab);
   return () => {
-    removeEventListener(TEMA_EVENTO, propio);
-    removeEventListener("storage", otraPestana);
+    removeEventListener(THEME_EVENT, own);
+    removeEventListener("storage", otherTab);
   };
 }
-var scriptTema = [
-  "(function () {",
-  "  var CLAVE = " + JSON.stringify(TEMA_CLAVE) + ";",
-  "  function resolver() {",
-  "    try {",
-  "      var guardado = localStorage.getItem(CLAVE);",
-  '      if (guardado === "dark" || guardado === "light") return guardado;',
-  "    } catch (e) {}",
-  '    return matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";',
-  "  }",
-  "  function aplicar() {",
-  "    var tema = resolver();",
-  "    document.documentElement.setAttribute(" + JSON.stringify(TEMA_ATRIBUTO) + ", tema);",
-  "    document.documentElement.style.colorScheme = tema;",
-  "  }",
-  "  aplicar();",
-  '  document.addEventListener("astro:after-swap", aplicar);',
-  "})();"
-].join("\n");
-var kebab = (nombre) => nombre.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
-var escalas = Object.keys(typeScale);
-var radios = Object.keys(radius);
-var espacios = Object.keys(spacing).map(kebab);
-var controles = Object.keys(control).map((nombre) => `control-${kebab(nombre)}`);
+function themeScript({ base } = {}) {
+  return [
+    "(function () {",
+    "  var KEY = " + JSON.stringify(THEME_KEY) + ";",
+    "  function resolve() {",
+    "    try {",
+    "      var stored = localStorage.getItem(KEY);",
+    '      if (stored === "dark" || stored === "light") return stored;',
+    "    } catch (e) {}",
+    base ? "    return " + JSON.stringify(base) + ";" : '    return matchMedia("(prefers-color-scheme: light)").matches ? "light" : "dark";',
+    "  }",
+    "  function apply() {",
+    "    var theme = resolve();",
+    "    document.documentElement.setAttribute(" + JSON.stringify(THEME_ATTRIBUTE) + ", theme);",
+    "    document.documentElement.style.colorScheme = theme;",
+    "  }",
+    "  apply();",
+    '  document.addEventListener("astro:after-swap", apply);',
+    "})();"
+  ].join("\n");
+}
+var button = classVarianceAuthority.cva(
+  [
+    "inline-flex cursor-pointer items-center justify-center gap-step-xs whitespace-nowrap select-none",
+    "rounded-control font-sans font-medium",
+    "transition-standard",
+    "focus-ring",
+    "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"
+        ],
+        // The one control whose focus ring is not biolume. It is the system's
+        // only sand fill, and a biolume ring three pixels off a sand button puts
+        // both of the brand's accents in the same glance. See `decisions.md` § 37.
+        conversion: "bg-warm text-warm-on hover:bg-warm-hover focus-ring-warm",
+        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"
+        ],
+        /** Irreversible only. Never for «cancel» on a form. */
+        destructive: "bg-danger text-danger-on hover:bg-danger-hover",
+        destructiveOutline: [
+          "border-danger text-danger border bg-transparent",
+          "hover:bg-danger hover:text-danger-on"
+        ]
+      },
+      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",
+        /** A 42×42 square, no text. `aria-label` is mandatory on it. */
+        icon: "size-control-icon p-0",
+        /** 32×32, for a table row. Same height as `sm`, and same mandatory `aria-label`. */
+        "icon-sm": "size-control-icon-sm p-0"
+      }
+    },
+    compoundVariants: [
+      /**
+       * The tertiary has no box: neither horizontal padding nor control height.
+       * It goes here rather than as `px-0` on the variant so it beats the size's
+       * `px-*` without depending on the order cva concatenates classes in.
+       */
+      { variant: "tertiary", size: ["sm", "md", "lg"], class: "h-auto px-0" }
+    ],
+    defaultVariants: { variant: "primary", size: "md" }
+  }
+);
+var badge = classVarianceAuthority.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" }
+  }
+);
+var category = classVarianceAuthority.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 }
+  }
+);
+var metric = ["inline-flex items-center gap-step-xs", "rounded-pill", "font-mono text-chip text-text-muted"];
+var text = classVarianceAuthority.cva("", {
+  variants: {
+    variant: {
+      display: "text-display font-display",
+      // Large metrics: 46px of display. It is the only scale designed for a
+      // number, which is why its line height is 1.
+      stat: "text-stat font-display",
+      h1: "text-h1 font-display",
+      h2: "text-h2 font-display",
+      h3: "text-h3 font-display",
+      body: "text-body font-sans",
+      // 17px: the deck on interior pages and the large button.
+      lead: "text-lead font-sans",
+      ui: "text-ui font-sans",
+      label: "text-label font-sans",
+      // The two badge scales. `tag` is status (sans 12.5/500) and `chip` is
+      // category and metric (mono 11.5). Neither transforms the text.
+      tag: "text-tag font-sans",
+      chip: "text-chip font-mono",
+      // Mono with NO transform: dates, paths, versions, file names and the
+      // footer signature. It is the step that was missing, and the reason every
+      // call site ended up writing `variant="eyebrow" className="normal-case"`.
+      meta: "text-meta font-mono",
+      // `uppercase` does not fit in a size token: text-transform is not a
+      // modifier of --text-*. Which is why the variant sets it, not theme.css.
+      eyebrow: "text-eyebrow font-mono uppercase"
+    },
+    tone: {
+      primary: "text-text-primary",
+      secondary: "text-text-secondary",
+      muted: "text-text-muted",
+      accent: "text-accent",
+      warm: "text-warm",
+      success: "text-success",
+      warning: "text-warning",
+      error: "text-error"
+    }
+  },
+  defaultVariants: { variant: "body", tone: "primary" }
+});
+var alert = classVarianceAuthority.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"
+    },
+    emphasis: {
+      subtle: "",
+      strong: ""
+    }
+  },
+  compoundVariants: [
+    { variant: "accent", emphasis: "subtle", class: "border-accent/22 bg-accent/8" },
+    { variant: "success", emphasis: "subtle", class: "border-success/22 bg-success/8" },
+    { variant: "warning", emphasis: "subtle", class: "border-warning/22 bg-warning/8" },
+    { variant: "error", emphasis: "subtle", class: "border-error/22 bg-error/8" },
+    { variant: "accent", emphasis: "strong", class: "border-accent bg-accent/10" },
+    { variant: "success", emphasis: "strong", class: "border-success bg-success/10" },
+    { variant: "warning", emphasis: "strong", class: "border-warning bg-warning/10" },
+    { variant: "error", emphasis: "strong", class: "border-error bg-error/10" }
+  ],
+  defaultVariants: { variant: "accent", emphasis: "subtle" }
+});
+var avatar = classVarianceAuthority.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" }
+  }
+);
+
+// src/variants/card.ts
+var CARD_SURFACE = "rounded-card border-hairline bg-surface border";
+var CARD_HOVER = "transition-standard hover:border-hairline-hover";
+var CARD = [
+  "group block cursor-pointer",
+  CARD_SURFACE,
+  CARD_HOVER,
+  "focus-ring"
+];
+var kebab = (name) => name.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+var scales = Object.keys(typeScale);
+var radii = Object.keys(radius);
+var namespaces = Object.keys(spacing).map(kebab);
+var controls = Object.keys(control).map((name) => `control-${kebab(name)}`);
 var twMerge = tailwindMerge.extendTailwindMerge({
   extend: {
     classGroups: {
-      "font-size": [{ text: escalas }],
-      rounded: [{ rounded: radios }],
-      p: [{ p: espacios }],
-      px: [{ px: [...espacios, ...controles] }],
-      py: [{ py: espacios }],
-      gap: [{ gap: espacios }],
-      size: [{ size: controles }]
+      "font-size": [{ text: scales }],
+      rounded: [{ rounded: radii }],
+      p: [{ p: namespaces }],
+      px: [{ px: [...namespaces, ...controls] }],
+      py: [{ py: namespaces }],
+      gap: [{ gap: namespaces }],
+      size: [{ size: controls }]
     }
   }
 });
@@ -469,16 +723,16 @@ var Spinner = (props) => /* @__PURE__ */ jsxRuntime.jsxs(
     ]
   }
 );
-var Camara = (props) => /* @__PURE__ */ jsxRuntime.jsxs(Glyph, { ...props, children: [
+var Camera = (props) => /* @__PURE__ */ jsxRuntime.jsxs(Glyph, { ...props, children: [
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M2 5.5h2.6l1-1.5h4.8l1 1.5H14v7.5H2z" }),
   /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "9", r: "2.4" })
 ] });
-var Sol = (props) => /* @__PURE__ */ jsxRuntime.jsxs(Glyph, { ...props, children: [
+var Sun = (props) => /* @__PURE__ */ jsxRuntime.jsxs(Glyph, { ...props, children: [
   /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "8", cy: "8", r: "3" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 1.5v1.2M8 13.3v1.2M14.5 8h-1.2M2.7 8H1.5M12.6 3.4l-.85.85M4.25 11.75l-.85.85M12.6 12.6l-.85-.85M4.25 4.25l-.85-.85" })
 ] });
-var Luna = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.5 9.4A5.8 5.8 0 0 1 6.6 2.5a5.8 5.8 0 1 0 6.9 6.9Z" }) });
-function GlifoMedia({ children, ...props }) {
+var Moon = (props) => /* @__PURE__ */ jsxRuntime.jsx(Glyph, { ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.5 9.4A5.8 5.8 0 0 1 6.6 2.5a5.8 5.8 0 1 0 6.9 6.9Z" }) });
+function MediaGlyph({ children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
@@ -492,10 +746,10 @@ function GlifoMedia({ children, ...props }) {
     }
   );
 }
-var Play = (props) => /* @__PURE__ */ jsxRuntime.jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v14l11-7z" }) });
-var Pause = (props) => /* @__PURE__ */ jsxRuntime.jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) });
+var Play = (props) => /* @__PURE__ */ jsxRuntime.jsx(MediaGlyph, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 5v14l11-7z" }) });
+var Pause = (props) => /* @__PURE__ */ jsxRuntime.jsx(MediaGlyph, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 4h4v16H6V4zm8 0h4v16h-4V4z" }) });
 var Retry = (props) => /* @__PURE__ */ jsxRuntime.jsx(
-  GlifoMedia,
+  MediaGlyph,
   {
     stroke: "currentColor",
     strokeWidth: 2,
@@ -505,7 +759,7 @@ var Retry = (props) => /* @__PURE__ */ jsxRuntime.jsx(
     children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" })
   }
 );
-var GoBackSeconds = (props) => /* @__PURE__ */ jsxRuntime.jsxs(GlifoMedia, { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", ...props, children: [
+var GoBackSeconds = (props) => /* @__PURE__ */ jsxRuntime.jsxs(MediaGlyph, { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", ...props, children: [
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.5 8.5H13.8604C13.6452 8.5 13.4541 8.63772 13.386 8.84189L12.7194 10.8419C12.6114 11.1657 12.8524 11.5 13.1937 11.5H14.5C15.6046 11.5 16.5 12.3954 16.5 13.5C16.5 14.6046 15.6046 15.5 14.5 15.5H12.5" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.5 10.5L10 8.5V15.5", strokeLinejoin: "round" }),
   /* @__PURE__ */ jsxRuntime.jsx(
@@ -516,7 +770,7 @@ var GoBackSeconds = (props) => /* @__PURE__ */ jsxRuntime.jsxs(GlifoMedia, { str
     }
   )
 ] });
-var AdvanceSeconds = (props) => /* @__PURE__ */ jsxRuntime.jsxs(GlifoMedia, { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", ...props, children: [
+var AdvanceSeconds = (props) => /* @__PURE__ */ jsxRuntime.jsxs(MediaGlyph, { stroke: "currentColor", strokeWidth: 1.5, strokeLinecap: "round", ...props, children: [
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.5 8.5H13.8604C13.6452 8.5 13.4541 8.63772 13.386 8.84189L12.7194 10.8419C12.6114 11.1657 12.8524 11.5 13.1937 11.5H14.5C15.6046 11.5 16.5 12.3954 16.5 13.5C16.5 14.6046 15.6046 15.5 14.5 15.5H12.5" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M7.5 10.5L10 8.5V15.5", strokeLinejoin: "round" }),
   /* @__PURE__ */ jsxRuntime.jsx(
@@ -527,8 +781,8 @@ var AdvanceSeconds = (props) => /* @__PURE__ */ jsxRuntime.jsxs(GlifoMedia, { st
     }
   )
 ] });
-var VolumeOn = (props) => /* @__PURE__ */ jsxRuntime.jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" }) });
-var VolumeMuted = (props) => /* @__PURE__ */ jsxRuntime.jsx(GlifoMedia, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" }) });
+var VolumeOn = (props) => /* @__PURE__ */ jsxRuntime.jsx(MediaGlyph, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z" }) });
+var VolumeMuted = (props) => /* @__PURE__ */ jsxRuntime.jsx(MediaGlyph, { fill: "currentColor", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z" }) });
 function Accordion({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     AccordionPrimitive__namespace.Root,
@@ -550,8 +804,8 @@ function AccordionTrigger({
   headingLevel = 3,
   ...props
 }) {
-  const Encabezado = `h${headingLevel}`;
-  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Encabezado, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionPrimitive__namespace.Header, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Heading, { children: /* @__PURE__ */ jsxRuntime.jsxs(
     AccordionPrimitive__namespace.Trigger,
     {
       className: cn(
@@ -559,7 +813,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
@@ -582,45 +836,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__ */ jsxRuntime.jsx("div", { className: cn("pb-step-md font-sans text-ui text-text-secondary max-w-measure", className), children })
     }
   );
 }
-var alert = classVarianceAuthority.cva("w-full rounded-card border p-step-md font-sans text-ui", {
-  variants: {
-    variant: {
-      accent: "text-text-secondary",
-      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: "!",
@@ -629,26 +858,26 @@ var GLIFO = {
 function Alert({
   className,
   variant,
-  enfasis,
+  emphasis,
   title,
   icon,
   children,
   ...props
 }) {
-  const tono = variant ?? "accent";
+  const tone = variant ?? "accent";
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex items-start", children: [
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -659,79 +888,6 @@ function Alert({
     }
   );
 }
-var button = classVarianceAuthority.cva(
-  [
-    "inline-flex cursor-pointer items-center justify-center gap-step-xs whitespace-nowrap select-none",
-    "rounded-control font-sans font-medium",
-    "transition-standard",
-    "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
-    "disabled:pointer-events-none disabled:opacity-50",
-    "[&_svg]:shrink-0"
-  ],
-  {
-    variants: {
-      variant: {
-        primary: [
-          "bg-accent text-accent-on hover:bg-accent-hover",
-          "light:bg-brand-hull light:text-accent-on light:hover:bg-text-secondary"
-        ],
-        conversion: "bg-warm text-warm-on hover:bg-warm-hover",
-        secondary: [
-          "border-hairline-hover border bg-transparent text-text-primary",
-          "hover:border-accent hover:text-accent"
-        ],
-        tertiary: [
-          "bg-transparent font-mono font-normal text-text-secondary",
-          "hover:text-accent hover:underline hover:underline-offset-4"
-        ]
-      },
-      size: {
-        sm: "h-8 px-control-sm text-label",
-        md: "h-10 px-control-md text-ui",
-        lg: "h-12 px-control-lg text-lead",
-        /** Cuadrado 42×42, sin texto. Lleva `aria-label` obligatorio. */
-        icon: "size-control-icon p-0"
-      }
-    },
-    compoundVariants: [
-      /**
-       * El terciario no tiene caja: ni padding horizontal ni alto de control.
-       * Va aquí y no como `px-0` en la variante para que gane al `px-*` del
-       * tamaño sin depender del orden en que cva concatena las clases.
-       */
-      { variant: "tertiary", size: ["sm", "md", "lg"], class: "h-auto px-0" }
-    ],
-    defaultVariants: { variant: "primary", size: "md" }
-  }
-);
-function Button({
-  className,
-  variant,
-  size: size2,
-  asChild = false,
-  loading = false,
-  icon,
-  children,
-  disabled,
-  ...props
-}) {
-  if (asChild) {
-    return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: cn(button({ variant, size: size2 }), className), ...props, children });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "button",
-    {
-      className: cn(button({ variant, size: size2 }), className),
-      disabled: disabled === true || loading,
-      "aria-busy": loading || void 0,
-      ...props,
-      children: [
-        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) : icon,
-        children
-      ]
-    }
-  );
-}
 var AlertDialog = AlertDialogPrimitive__namespace.Root;
 var AlertDialogTrigger = AlertDialogPrimitive__namespace.Trigger;
 function AlertDialogOverlay({
@@ -829,20 +985,6 @@ function AlertDialogAction({
     }
   );
 }
-var avatar = classVarianceAuthority.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__ */ jsxRuntime.jsx(AvatarPrimitive__namespace.Root, { className: cn(avatar({ size: size2 }), className), ...props });
 }
@@ -879,22 +1021,22 @@ function AvatarUpload({
   ...props
 }) {
   const id = react.useId();
-  const [previa, setPrevia] = react.useState(null);
+  const [preview, setPreview] = react.useState(null);
   react.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__ */ jsxRuntime.jsxs("div", { className: cn("relative inline-flex", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { size: size2, children: [
-      imagen ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: imagen, alt: "" }) : null,
+      image ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src: image, alt: "" }) : null,
       /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: fallback })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs(
@@ -905,13 +1047,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__ */ jsxRuntime.jsx(Camara, { "aria-hidden": "true" }),
+          /* @__PURE__ */ jsxRuntime.jsx(Camera, { "aria-hidden": "true" }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: label }),
           /* @__PURE__ */ jsxRuntime.jsx(
             "input",
@@ -920,7 +1062,7 @@ function AvatarUpload({
               type: "file",
               accept,
               disabled,
-              onChange: elegir,
+              onChange: pick,
               className: "sr-only"
             }
           )
@@ -929,62 +1071,56 @@ function AvatarUpload({
     )
   ] });
 }
-var badge = classVarianceAuthority.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__ */ jsxRuntime.jsx("span", { className: cn(badge({ variant }), className), ...props });
 }
-var categoria = classVarianceAuthority.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(reactSlot.Slot, { className: cn(button({ variant, size: size2 }), className), ...props, children });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      className: cn(button({ variant, size: size2 }), className),
+      disabled: disabled === true || loading,
+      "aria-busy": loading || void 0,
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) : icon,
+        children
+      ]
+    }
+  );
+}
 function Calendar({
   className,
   classNames,
@@ -992,24 +1128,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__ */ jsxRuntime.jsx(
@@ -1019,32 +1155,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",
@@ -1062,7 +1198,7 @@ function Calendar({
     }
   );
 }
-var ETIQUETA = {
+var LABEL = {
   display: "h1",
   stat: "p",
   h1: "h1",
@@ -1077,46 +1213,6 @@ var ETIQUETA = {
   chip: "span",
   eyebrow: "p"
 };
-var texto = classVarianceAuthority.cva("", {
-  variants: {
-    variant: {
-      display: "text-display font-display",
-      // Métricas grandes: 46px de display. Es la única escala pensada para un
-      // número, y por eso el interlineado es 1.
-      stat: "text-stat font-display",
-      h1: "text-h1 font-display",
-      h2: "text-h2 font-display",
-      h3: "text-h3 font-display",
-      body: "text-body font-sans",
-      // 17px: la bajada de las páginas internas y el botón grande.
-      lead: "text-lead font-sans",
-      ui: "text-ui font-sans",
-      label: "text-label font-sans",
-      // Las dos escalas de etiqueta. `tag` es el estado (sans 12.5/500) y `chip`
-      // la categoría y la métrica (mono 11.5). Ninguna transforma el texto.
-      tag: "text-tag font-sans",
-      chip: "text-chip font-mono",
-      // Mono SIN transformar: fechas, rutas, versiones, nombres de archivo y la
-      // firma del footer. Es el escalón que faltaba, y por el que cada sitio de
-      // uso terminaba escribiendo `variant="eyebrow" className="normal-case"`.
-      meta: "text-meta font-mono",
-      // `uppercase` no cabe en un token de tamaño: text-transform no es un
-      // modificador de --text-*. Por eso lo pone la variante y no theme.css.
-      eyebrow: "text-eyebrow font-mono uppercase"
-    },
-    tone: {
-      primary: "text-text-primary",
-      secondary: "text-text-secondary",
-      muted: "text-text-muted",
-      accent: "text-accent",
-      warm: "text-warm",
-      success: "text-success",
-      warning: "text-warning",
-      error: "text-error"
-    }
-  },
-  defaultVariants: { variant: "body", tone: "primary" }
-});
 function Text({
   className,
   variant,
@@ -1127,19 +1223,17 @@ function Text({
   children,
   ...props
 }) {
-  const escala = variant ?? "body";
-  const limitar = measure ?? escala === "body";
-  const clases = cn(texto({ variant, tone }), limitar && "max-w-measure", className);
+  const scale = variant ?? "body";
+  const clamp = measure ?? scale === "body";
+  const classes = cn(text({ variant, tone }), clamp && "max-w-measure", className);
   if (asChild) {
-    return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: clases, ...props, children });
+    return /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: classes, ...props, children });
   }
-  const Etiqueta = as ?? ETIQUETA[escala];
-  return /* @__PURE__ */ jsxRuntime.jsx(Etiqueta, { className: clases, ...props, children });
+  const Label4 = as ?? LABEL[scale];
+  return /* @__PURE__ */ jsxRuntime.jsx(Label4, { className: classes, ...props, children });
 }
-var SUPERFICIE_TARJETA = "rounded-card border-hairline bg-surface border";
-var HOVER_TARJETA = "transition-standard hover:border-hairline-hover";
 function Card({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(SUPERFICIE_TARJETA, className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn(CARD_SURFACE, className), ...props });
 }
 function CardHeader({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("gap-step-xs p-step-lg flex flex-col", className), ...props });
@@ -1170,7 +1264,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",
@@ -1213,10 +1307,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
       ),
@@ -1267,7 +1361,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__ */ jsxRuntime.jsx(Close, {})
             }
@@ -1416,7 +1510,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",
@@ -1466,7 +1560,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
       ),
@@ -1551,7 +1645,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
@@ -1578,7 +1672,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
@@ -1692,23 +1786,23 @@ var panel2 = classVarianceAuthority.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"
         ]
       }
     },
@@ -1728,7 +1822,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__ */ jsxRuntime.jsx(Close, {})
         }
@@ -1803,7 +1897,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
@@ -1904,7 +1998,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
@@ -1921,7 +2015,7 @@ function TabsContent({
     TabsPrimitive__namespace.Content,
     {
       className: cn(
-        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent",
+        "focus-ring",
         className
       ),
       ...props
@@ -1940,7 +2034,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
@@ -1995,7 +2089,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__ */ jsxRuntime.jsx(Close, {})
       }
@@ -2020,62 +2114,62 @@ function ToastDescription({
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(ToastPrimitive__namespace.Description, { className: cn("max-w-measure", className), ...props });
 }
-var avisos = [];
-var suscriptores = /* @__PURE__ */ new Set();
-var contador = 0;
-function emitir(siguientes) {
-  avisos = siguientes;
-  for (const avisar of suscriptores) avisar();
+var 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 = react.useSyncExternalStore(suscribirse, leer, enServidor);
+  const list = react.useSyncExternalStore(subscribe, read, onServer);
   return /* @__PURE__ */ jsxRuntime.jsxs(ToastProvider, { duration, label, children: [
-    lista.map(({ id, title, description, variant, duration: propio, action, abierto }) => /* @__PURE__ */ jsxRuntime.jsxs(
+    list.map(({ id, title, description, variant, duration: own, action, open }) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -2112,15 +2206,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 ? reactSlot.Slot : "a";
-  return /* @__PURE__ */ jsxRuntime.jsx(Raiz, { className: cn(TARJETA, className), ...props, children });
+function CardShell({ asChild = false, className, children, ...props }) {
+  const Root18 = asChild ? reactSlot.Slot : "a";
+  return /* @__PURE__ */ jsxRuntime.jsx(Root18, { className: cn(CARD, className), ...props, children });
 }
 function ArticleCard({
   title,
@@ -2130,17 +2218,18 @@ function ArticleCard({
   readingMinutes,
   tags,
   headingLevel = 3,
+  tagAsChild,
   className,
   ...props
 }) {
   const meta = [
-    date ? /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime, children: date }, "fecha") : null,
+    date ? /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime, children: date }, "date") : null,
     readingMinutes ? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
       readingMinutes,
       " min de lectura"
     ] }, "lectura") : null
   ].filter(Boolean);
-  return /* @__PURE__ */ jsxRuntime.jsx(Tarjeta, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(CardShell, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
     meta.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", tone: "muted", as: "p", className: "gap-step-xs flex items-center", children: meta.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "gap-step-xs flex items-center", children: [
       i > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\xB7" }) : null,
       m
@@ -2155,18 +2244,20 @@ function ArticleCard({
       }
     ),
     excerpt ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", className: "line-clamp-2", children: excerpt }) : null,
-    tags && tags.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-step-xs mt-auto flex flex-wrap pt-step-sm", children: tags.map((t) => /* @__PURE__ */ jsxRuntime.jsx(CategoryBadge, { children: t }, t)) }) : null
+    tags && tags.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-step-xs mt-auto flex flex-wrap pt-step-sm", children: tags.map(
+      (t) => tagAsChild ? /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: category({ active: false }), children: tagAsChild({ tag: t, children: t }) }, t) : /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn(SUPERFICIE_TARJETA, "p-step-lg gap-step-md flex items-start", className), ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(CARD_SURFACE, "p-step-lg gap-step-md flex items-start", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsxs(Avatar, { className: cn(AVATAR, "shrink-0"), children: [
       src ? /* @__PURE__ */ jsxRuntime.jsx(AvatarImage, { src, alt: "" }) : null,
-      /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: iniciales(name) })
+      /* @__PURE__ */ jsxRuntime.jsx(AvatarFallback, { children: initials(name) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex min-w-0 flex-1 flex-col", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", as: "p", className: "font-medium", children: name }),
@@ -2184,45 +2275,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__ */ jsxRuntime.jsx("div", { className: cn("flex items-end gap-[2px]", alto), "aria-hidden": "true", children: WAVEFORM_HEIGHTS.map((h, i) => /* @__PURE__ */ jsxRuntime.jsx(
+function Wave({ strokeWidth, height, playing }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-end gap-[2px]", height), "aria-hidden": "true", children: WAVEFORM_HEIGHTS.map((h, i) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
           "div",
           {
             className: cn("bg-accent absolute h-full", redondeada && "rounded-pill"),
-            style: { width: `${progreso}%` }
+            style: { width: `${progress}%` }
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx(
@@ -2230,9 +2321,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)`
             }
           }
         )
@@ -2240,66 +2331,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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(GoBackSeconds, { className: tamano }) : /* @__PURE__ */ jsxRuntime.jsx(AdvanceSeconds, { className: tamano })
+      "aria-label": seconds < 0 ? "Retroceder 15 segundos" : "Adelantar 15 segundos",
+      children: seconds < 0 ? /* @__PURE__ */ jsxRuntime.jsx(GoBackSeconds, { className: size2 }) : /* @__PURE__ */ jsxRuntime.jsx(AdvanceSeconds, { className: size2 })
     }
   );
 }
-function BotonVelocidad({
+function SpeedButton({
   className,
-  velocidad,
-  onCambiar
+  speed,
+  onChange
 }) {
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs hidden items-center sm:flex", children: [
     /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(VolumeMuted, { className: tamano }) : /* @__PURE__ */ jsxRuntime.jsx(VolumeOn, { className: tamano })
+        "aria-label": muted ? "Activar sonido" : "Silenciar",
+        children: muted || volume === 0 ? /* @__PURE__ */ jsxRuntime.jsx(VolumeMuted, { className: size2 }) : /* @__PURE__ */ jsxRuntime.jsx(VolumeOn, { className: size2 })
       }
     ),
     /* @__PURE__ */ jsxRuntime.jsx(
@@ -2309,47 +2400,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__ */ jsxRuntime.jsx(Spinner, { className: cn("motion-safe:animate-spin", className) });
+function PlayIcon({ className, loading, error, playing }) {
+  if (loading) return /* @__PURE__ */ jsxRuntime.jsx(Spinner, { className: cn("motion-safe:animate-spin", className) });
   if (error) return /* @__PURE__ */ jsxRuntime.jsx(Retry, { className });
-  if (sonando) return /* @__PURE__ */ jsxRuntime.jsx(Pause, { className });
+  if (playing) return /* @__PURE__ */ jsxRuntime.jsx(Pause, { className });
   return /* @__PURE__ */ jsxRuntime.jsx(Play, { className });
 }
-function BotonPlay({
+function PlayButton({
   className,
-  tamano,
-  etiqueta,
-  texto: texto2,
-  onAlternar,
-  ...estado
+  size: size2,
+  label,
+  text: text2,
+  onToggle,
+  ...state
 }) {
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(IconoPlay, { className: tamano, ...estado }),
-        texto2 ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: texto2 }) : null
+        /* @__PURE__ */ jsxRuntime.jsx(PlayIcon, { className: size2, ...state }),
+        text2 ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: text2 }) : null
       ]
     }
   );
@@ -2368,7 +2459,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
   const [isMuted, setIsMuted] = react.useState(false);
   const [playbackRate, setPlaybackRate] = react.useState(1);
   const [isStaticVisible, setIsStaticVisible] = react.useState(true);
-  const flotante = mode === "banner" || mode === "compact";
+  const floating = mode === "banner" || mode === "compact";
   react.useEffect(() => {
     const audio = audioRef.current;
     if (!audio) return;
@@ -2411,7 +2502,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
     };
   }, []);
   react.useEffect(() => {
-    if (!flotante || !staticRef.current) return;
+    if (!floating || !staticRef.current) return;
     const observer = new IntersectionObserver(
       (entries) => {
         const entry = entries[0];
@@ -2421,7 +2512,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
     );
     observer.observe(staticRef.current);
     return () => observer.disconnect();
-  }, [flotante]);
+  }, [floating]);
   const togglePlay = react.useCallback(async () => {
     const audio = audioRef.current;
     if (!audio) return;
@@ -2510,37 +2601,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__ */ jsxRuntime.jsxs(
+  const floatingJsx = /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-          BarraProgreso,
+          ProgressBar,
           {
-            alto: "h-1",
-            perilla: 10,
-            progreso: progress,
+            height: "h-1",
+            knob: 10,
+            progress,
             redondeada: false,
             tabIndex: -1,
-            ...puntero
+            ...pointer
           }
         ),
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "bg-surface/95 border-accent/25 border-t backdrop-blur-md", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm px-step-md flex items-center py-5", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex shrink-0 items-center", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(Onda, { grosor: "w-[2px]", alto: "h-4", sonando: isPlaying }),
+            /* @__PURE__ */ jsxRuntime.jsx(Wave, { strokeWidth: "w-[2px]", height: "h-4", playing: isPlaying }),
             /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-eyebrow font-mono text-accent hidden uppercase sm:block", children: "Narraci\xF3n" })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 flex-1", children: [
@@ -2552,24 +2643,24 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             ] })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex shrink-0 items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(BotonSalto, { segundos: -15, className: "p-1.5", tamano: "w-5 h-5", onSaltar: skip }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { seconds: -15, className: "p-1.5", size: "w-5 h-5", onSkip: skip }),
             /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(BotonSalto, { segundos: 15, className: "p-1.5", tamano: "w-5 h-5", onSaltar: skip }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { seconds: 15, className: "p-1.5", size: "w-5 h-5", onSkip: skip }),
             /* @__PURE__ */ jsxRuntime.jsx(
-              BotonVelocidad,
+              SpeedButton,
               {
                 className: "text-label ml-0.5 px-1.5 py-0.5",
-                velocidad: playbackRate,
-                onCambiar: handlePlaybackRateChange
+                speed: playbackRate,
+                onChange: handlePlaybackRateChange
               }
             )
           ] })
@@ -2582,7 +2673,7 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
       /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, src, preload: "metadata" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: staticRef, children: [
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm mb-step-md flex items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Onda, { grosor: "w-[3px]", alto: "h-5", sonando: isPlaying }),
+          /* @__PURE__ */ jsxRuntime.jsx(Wave, { strokeWidth: "w-[3px]", height: "h-5", playing: isPlaying }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-eyebrow font-mono text-accent uppercase", children: "Narraci\xF3n de audio" }),
           /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-chip font-mono text-text-muted ml-auto tabular-nums", children: [
             formatTime(currentTime),
@@ -2590,125 +2681,125 @@ function AudioPlayer({ src, title, mode = "full", onFirstPlay }) {
             formatTime(duration)
           ] })
         ] }),
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-step-md", children: /* @__PURE__ */ jsxRuntime.jsx(BarraProgreso, { alto: "h-1.5", perilla: 14, progreso: progress, ...puntero }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-step-md", children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { height: "h-1.5", knob: 14, progress, ...pointer }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(BotonSalto, { segundos: -15, className: "p-2", tamano: "w-6 h-6", onSaltar: skip }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { seconds: -15, className: "p-2", size: "w-6 h-6", onSkip: skip }),
           /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(BotonSalto, { segundos: 15, className: "p-2", tamano: "w-6 h-6", onSaltar: skip }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { seconds: 15, className: "p-2", size: "w-6 h-6", onSkip: skip }),
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm ml-auto flex items-center", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              BotonVelocidad,
+              SpeedButton,
               {
                 className: "text-label px-2 py-1",
-                velocidad: playbackRate,
-                onCambiar: handlePlaybackRateChange
+                speed: playbackRate,
+                onChange: handlePlaybackRateChange
               }
             ),
             /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
       /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, src, preload: "metadata" }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: staticRef, className: "w-full", children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-step-xs", children: /* @__PURE__ */ jsxRuntime.jsx(BarraProgreso, { alto: "h-1.5", perilla: 12, progreso: progress, ...puntero }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-step-xs", children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { height: "h-1.5", knob: 12, progress, ...pointer }) }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-chip font-mono text-text-muted mb-step-sm flex justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime(currentTime) }),
           /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime(duration) })
         ] }),
         /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(BotonSalto, { segundos: -15, className: "p-1.5", tamano: "w-5 h-5", onSaltar: skip }),
+            /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { seconds: -15, className: "p-1.5", size: "w-5 h-5", onSkip: skip }),
             /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(BotonSalto, { segundos: 15, className: "p-1.5", tamano: "w-5 h-5", onSaltar: skip })
+            /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { seconds: 15, className: "p-1.5", size: "w-5 h-5", onSkip: skip })
           ] }),
           /* @__PURE__ */ jsxRuntime.jsx(
-            BotonVelocidad,
+            SpeedButton,
             {
               className: "text-label px-1.5 py-0.5",
-              velocidad: playbackRate,
-              onCambiar: handlePlaybackRateChange
+              speed: playbackRate,
+              onChange: handlePlaybackRateChange
             }
           )
         ] })
       ] }),
-      flotanteJsx
+      floatingJsx
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "bg-surface rounded-control border-border p-step-md w-full border", children: [
     /* @__PURE__ */ jsxRuntime.jsx("audio", { ref: audioRef, src, preload: "metadata" }),
     title ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-ui font-sans text-text-secondary mb-step-sm truncate", children: title }) : null,
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-step-sm", children: /* @__PURE__ */ jsxRuntime.jsx(BarraProgreso, { alto: "h-2", perilla: 16, progreso: progress, ...puntero }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-step-sm", children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBar, { height: "h-2", knob: 16, progress, ...pointer }) }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-chip font-mono text-text-muted mb-step-sm flex justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime(currentTime) }),
       /* @__PURE__ */ jsxRuntime.jsx("span", { children: formatTime(duration) })
     ] }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex items-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(BotonSalto, { segundos: -15, className: "p-2", tamano: "w-5 h-5", onSaltar: skip }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { seconds: -15, className: "p-2", size: "w-5 h-5", onSkip: skip }),
         /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(BotonSalto, { segundos: 15, className: "p-2", tamano: "w-5 h-5", onSaltar: skip })
+        /* @__PURE__ */ jsxRuntime.jsx(SkipButton, { seconds: 15, className: "p-2", size: "w-5 h-5", onSkip: skip })
       ] }),
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex items-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx(
-          BotonVelocidad,
+          SpeedButton,
           {
             className: "text-label px-2 py-1",
-            velocidad: playbackRate,
-            onCambiar: handlePlaybackRateChange
+            speed: playbackRate,
+            onChange: handlePlaybackRateChange
           }
         ),
         /* @__PURE__ */ jsxRuntime.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
           }
         )
       ] })
@@ -2732,7 +2823,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 = "/",
@@ -2741,28 +2832,28 @@ function Breadcrumb({
   className,
   ...props
 }) {
-  const enlace = (href, contenido) => linkAsChild ? /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: ENLACE, children: linkAsChild({ href, children: contenido }) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: ENLACE, children: contenido });
+  const link = (href, content) => linkAsChild ? /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: LINK, children: linkAsChild({ href, children: content }) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href, className: LINK, children: content });
   return /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Ruta", className: cn("font-mono text-meta text-text-muted", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("ol", { className: "gap-step-xs flex flex-wrap items-center", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("li", { children: enlace(homeHref, /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": homeLabel, children: "~" })) }),
+    /* @__PURE__ */ jsxRuntime.jsx("li", { children: link(homeHref, /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-label": homeLabel, children: "~" })) }),
     items.map((item2, i) => {
-      const ultimo = i === items.length - 1;
+      const last = i === items.length - 1;
       return /* @__PURE__ */ jsxRuntime.jsxs("li", { className: "gap-step-xs flex items-center", children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-border", children: "/" }),
-        item2.href && !ultimo ? enlace(item2.href, item2.label) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-current": ultimo ? "page" : void 0, className: "text-text-secondary", children: item2.label })
+        item2.href && !last ? link(item2.href, item2.label) : /* @__PURE__ */ jsxRuntime.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] = react.useState(false);
-  const temporizador = react.useRef(null);
-  const copiar = react.useCallback(async () => {
+  const timer = react.useRef(null);
+  const copy = react.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]);
@@ -2786,14 +2877,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__ */ jsxRuntime.jsx(Check, { className: "text-accent" }) : /* @__PURE__ */ jsxRuntime.jsx(Copy, {}),
@@ -2816,7 +2907,7 @@ function CourseCard({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Tarjeta, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(CardShell, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
     status ? /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "warm", children: status }) }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "h3", variant: "h3", className: "group-hover:text-accent transition-standard", children: title }),
     summary ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", className: "line-clamp-3", children: summary }) : null,
@@ -2834,8 +2925,8 @@ function CourseCard({
   ] }) });
 }
 
-// src/brand/catalogo.ts
-var caras = {
+// src/brand/catalog.ts
+var faces = {
   annoyed: "face-annoyed.png",
   confused: "face-confused.png",
   hearts: "face-hearts.png",
@@ -2850,27 +2941,27 @@ var poses = {
   peek: "pose-peek.png",
   surf: "pose-surf.png"
 };
-var aletas = {
-  /** Dos azules. Para fondos claros. */
+var fins = {
+  /** Two blues. For light backgrounds. */
   color: "fin.png",
-  /** Silueta a una tinta. Para fondos oscuros. */
-  espuma: "fin-foam.png"
+  /** Single-ink silhouette. For dark backgrounds. */
+  foam: "fin-foam.png"
 };
-var usoDeCara = {
-  wink: "Formularios, nota al pie amable",
-  waiting: "Sin resultados, estado de espera",
-  laughing: "\xC9xito, suscripci\xF3n confirmada",
-  shades: "M\xF3dulo o curso completado",
-  hearts: "Agradecimiento, OG de art\xEDculo",
-  confused: "404, p\xE1gina no encontrada",
-  annoyed: "Error del servidor, fallo de build"
+var faceUsage = {
+  wink: "Forms, a friendly footnote",
+  waiting: "No results, waiting state",
+  laughing: "Success, subscription confirmed",
+  shades: "Module or course completed",
+  hearts: "Gratitude, article OG",
+  confused: "404, page not found",
+  annoyed: "Server error, build failure"
 };
-var RUTA_ASSETS = "/brand";
-var listaCaras = Object.keys(caras);
-var listaPoses = Object.keys(poses);
-function Mascota({
+var ASSETS_PATH = "/brand";
+var faceList = Object.keys(faces);
+var poseList = Object.keys(poses);
+function Mascot({
   pose,
-  basePath = RUTA_ASSETS,
+  basePath = ASSETS_PATH,
   alt = "",
   className,
   ...props
@@ -2885,9 +2976,9 @@ function Mascota({
     }
   );
 }
-function CaraDeMascota({
-  expresion,
-  basePath = RUTA_ASSETS,
+function MascotFace({
+  expression,
+  basePath = ASSETS_PATH,
   alt = "",
   className,
   ...props
@@ -2895,30 +2986,42 @@ function CaraDeMascota({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "img",
     {
-      src: `${basePath}/${caras[expresion]}`,
+      src: `${basePath}/${faces[expression]}`,
       alt,
       className: cn("h-auto w-full max-w-24 select-none", className),
       ...props
     }
   );
 }
-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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "text-text-muted shrink-0", children: icon }) : null,
+          /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "muted", as: "p", className: "max-w-measure", children: title2 }),
+          description2 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", tone: "muted", as: "p", className: "max-w-measure font-normal", children: description2 }) : null,
+          action2 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-step-xs", children: action2 }) : null
+        ]
+      }
+    );
+  }
+  const { variant, title, description, action, expression, basePath, className, ...rest } = props;
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(CaraDeMascota, { expresion, className: CARA, basePath }),
+        /* @__PURE__ */ jsxRuntime.jsx(MascotFace, { expression, className: FACE, basePath }),
         /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", as: "p", className: "font-medium", children: title }),
         description ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", tone: "muted", as: "p", className: "max-w-measure font-normal", children: description }) : null,
         action ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-step-xs", children: action }) : null
@@ -2926,12 +3029,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,
@@ -2940,68 +3043,68 @@ function EventCalendar({
   onDeleteEvent,
   selected,
   onSelectDay,
-  formatDay = (dia) => dateFns.format(dia, "EEEE d 'de' MMMM", { locale: locale.es }),
-  formatTime: formatTime2 = (fecha) => dateFns.format(fecha, "HH:mm", { locale: locale.es }),
+  formatDay = (day) => dateFns.format(day, "EEEE d 'de' MMMM", { locale: locale.es }),
+  formatTime: formatTime2 = (date) => dateFns.format(date, "HH:mm", { locale: locale.es }),
   emptyMessage = "Nada en este d\xEDa.",
   className,
   ...props
 }) {
   const id = react.useId();
   const [diaInterno, setDiaInterno] = react.useState(() => selected ?? /* @__PURE__ */ new Date());
-  const dia = selected ?? diaInterno;
-  const [mes, setMes] = react.useState(() => dia);
-  const [editando, setEditando] = react.useState(null);
-  const [titulo, setTitulo] = react.useState("");
-  const [cuando, setCuando] = react.useState("");
+  const day = selected ?? diaInterno;
+  const [month, setMonth] = react.useState(() => day);
+  const [editing, setEditing] = react.useState(null);
+  const [title, setTitle] = react.useState("");
+  const [when, setWhen] = react.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__ */ jsxRuntime.jsxs("div", { className: cn("gap-step-lg flex flex-col md:flex-row md:items-start", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.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"
@@ -3016,8 +3119,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__ */ jsxRuntime.jsx(Text, { as: "h3", variant: "h3", id: `${id}-dia`, className: "first-letter:uppercase", children: formatDay(dia) }),
-          delDia.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "gap-step-xs flex flex-col", children: delDia.map((evento) => /* @__PURE__ */ jsxRuntime.jsxs(
+          /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "h3", variant: "h3", id: `${id}-dia`, className: "first-letter:uppercase", children: formatDay(day) }),
+          ofTheDay.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "gap-step-xs flex flex-col", children: ofTheDay.map((event) => /* @__PURE__ */ jsxRuntime.jsxs(
             "li",
             {
               className: "border-hairline gap-step-sm py-step-xs flex items-center border-b last:border-b-0",
@@ -3027,85 +3130,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__ */ jsxRuntime.jsx("time", { dateTime: evento.start.toISOString(), children: formatTime2(evento.start) })
+                    children: /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime: event.start.toISOString(), children: formatTime2(event.start) })
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "span", variant: "ui", className: "min-w-0 flex-1 truncate", children: evento.title }),
+                /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "span", variant: "ui", className: "min-w-0 flex-1 truncate", children: event.title }),
                 onUpdateEvent ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(AlertDialog, { children: [
-                  /* @__PURE__ */ jsxRuntime.jsx(AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "tertiary", size: "sm", "aria-label": `Borrar \xAB${evento.title}\xBB`, children: "./borrar" }) }),
+                  /* @__PURE__ */ jsxRuntime.jsx(AlertDialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "tertiary", size: "sm", "aria-label": `Borrar \xAB${event.title}\xBB`, children: "./borrar" }) }),
                   /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogContent, { children: [
                     /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogHeader, { children: [
                       /* @__PURE__ */ jsxRuntime.jsxs(AlertDialogTitle, { children: [
                         "Borrar \xAB",
-                        evento.title,
+                        event.title,
                         "\xBB"
                       ] }),
                       /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(AlertDialogFooter, { children: [
                       /* @__PURE__ */ jsxRuntime.jsx(AlertDialogCancel, { children: "Mejor no" }),
-                      /* @__PURE__ */ jsxRuntime.jsx(AlertDialogAction, { onClick: () => onDeleteEvent(evento.id), children: "Borrar el evento" })
+                      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Text, { as: "p", variant: "ui", tone: "muted", children: emptyMessage })
           ),
-          editable ? /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: enviar, className: "gap-step-sm border-hairline pt-step-md flex flex-col border-t", children: [
+          editable ? /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: submit, className: "gap-step-sm border-hairline pt-step-md flex flex-col border-t", children: [
             /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex flex-col", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: `${id}-titulo`, children: "T\xEDtulo" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: `${id}-title`, children: "T\xEDtulo" }),
               /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex flex-col", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: `${id}-cuando`, children: "Cu\xE1ndo" }),
+              /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: `${id}-when`, children: "Cu\xE1ndo" }),
               /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex flex-wrap items-center", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", size: "sm", children: editando ? "Guardar" : "A\xF1adir" }),
-              editando ? /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "tertiary", size: "sm", onClick: cancelar, children: "./cancelar" }) : null
+              /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "submit", size: "sm", children: editing ? "Guardar" : "A\xF1adir" }),
+              editing ? /* @__PURE__ */ jsxRuntime.jsx(Button, { type: "button", variant: "tertiary", size: "sm", onClick: cancel, children: "./cancelar" }) : null
             ] })
           ] }) : null
         ]
@@ -3121,7 +3224,7 @@ function Footer({
   className,
   ...props
 }) {
-  const firma = /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "meta", tone: "muted", as: "p", className: "ml-auto shrink-0", children: [
+  const signature = /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "meta", tone: "muted", as: "p", className: "ml-auto shrink-0", children: [
     /* @__PURE__ */ jsxRuntime.jsxs("span", { "aria-hidden": "true", className: "text-accent", children: [
       "$",
       " "
@@ -3129,45 +3232,52 @@ function Footer({
     "cd ~/",
     naming.domain,
     "/",
-    year
+    year,
+    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-center", children: brand2 }, "marca") : null,
     children ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("ul", { className: "flex items-center gap-[18px]", children: social.map((red) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("ul", { className: "flex items-center gap-[18px]", children: social.map((socialLink) => /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("footer", { className: cn("border-hairline w-full border-t", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-wide px-step-md py-step-xl gap-step-lg mx-auto flex flex-col", children: [
     /* @__PURE__ */ jsxRuntime.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 ? reactSlot.Slot : "a";
+  const Root18 = asChild ? reactSlot.Slot : "a";
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Raiz,
+    Root18,
     {
       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
@@ -3181,24 +3291,24 @@ function Hero({
   action,
   pose,
   basePath,
-  variant = "cabecera",
+  variant = "header",
   className,
   ...props
 }) {
-  const centrado = variant === "centrado";
+  const centered = variant === "centered";
   return /* @__PURE__ */ jsxRuntime.jsxs(
     "section",
     {
       className: cn(
-        "degradado-hero rounded-panel border-hairline relative overflow-hidden border",
-        // 44 arriba, 40 a los lados y abajo. Del documento.
+        "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__ */ jsxRuntime.jsx(
-          Mascota,
+        centered && pose ? /* @__PURE__ */ jsxRuntime.jsx(
+          Mascot,
           {
             pose,
             basePath,
@@ -3210,7 +3320,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__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: eyebrow }) : null,
@@ -3221,7 +3331,7 @@ function Hero({
                 {
                   className: cn(
                     "gap-step-sm mt-step-xs flex flex-wrap items-center",
-                    centrado && "justify-center"
+                    centered && "justify-center"
                   ),
                   children: action
                 }
@@ -3229,14 +3339,14 @@ function Hero({
             ]
           }
         ),
-        !centrado && pose ? /* @__PURE__ */ jsxRuntime.jsx(
-          Mascota,
+        !centered && pose ? /* @__PURE__ */ jsxRuntime.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"
             )
@@ -3257,7 +3367,7 @@ function LinkRow({
   const rel = external ? "noopener noreferrer" : props.rel;
   const target = external ? "_blank" : props.target;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Tarjeta,
+    CardShell,
     {
       className: cn("px-step-md py-step-sm", className),
       ...props,
@@ -3280,39 +3390,48 @@ function LinkRow({
     }
   );
 }
-function Nav({ brand: brand2, children, actions, className, ...props }) {
+function Nav({ brand: brand2, children, actions, size: size2 = "default", className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: "max-w-wide px-step-md h-nav gap-step-lg mx-auto flex items-center", children: [
-        brand2 ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: brand2 }) : null,
-        children ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Principal", className: "ml-auto min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "gap-step-md flex items-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-text-muted font-mono text-meta select-none", children: "~/" }),
-          children
-        ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
-        actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-step-sm flex shrink-0 items-center", children: actions }) : null
-      ] })
+      children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "shrink-0", children: brand2 }) : null,
+            children ? /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Principal", className: "ml-auto min-w-0", children: /* @__PURE__ */ jsxRuntime.jsxs("ul", { className: "gap-step-md flex items-center", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-text-muted font-mono text-meta select-none", children: "~/" }),
+              children
+            ] }) }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-1" }),
+            actions ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-step-sm flex shrink-0 items-center", children: actions }) : null
+          ]
+        }
+      )
     }
   );
 }
 function NavItem({ active = false, asChild = false, className, children, ...props }) {
-  const Raiz = asChild ? reactSlot.Slot : "a";
+  const Root18 = asChild ? reactSlot.Slot : "a";
   return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    Raiz,
+    Root18,
     {
       "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
       ),
@@ -3329,39 +3448,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 = react.useId();
-  const enviando = state === "enviando";
+  const form = react.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;
+  react.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__ */ jsxRuntime.jsx(
+  const button2 = /* @__PURE__ */ jsxRuntime.jsx(
     Button,
     {
       type: "submit",
       variant: "conversion",
-      loading: enviando,
+      loading: sending,
       className: cn("disabled:opacity-60", nameField && "sm:self-start"),
       children: submitLabel
     }
@@ -3370,65 +3499,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__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex flex-col", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "h2", variant: "h3", children: title }),
-          description ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", children: description }) : null
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: enviar, className: "gap-step-sm flex flex-col", noValidate: true, children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex flex-col sm:flex-row sm:items-end", children: [
-            nameField ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex flex-1 flex-col", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: `${id}-nombre`, children: nameLabel }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Input,
-                {
-                  id: `${id}-nombre`,
-                  name: "name",
-                  type: "text",
-                  autoComplete: "name",
-                  required: true,
-                  placeholder: namePlaceholder,
-                  disabled: enviando,
-                  ...nameInputProps
-                }
-              )
-            ] }) : null,
-            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex flex-1 flex-col", children: [
-              /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: id, children: fieldLabel }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                Input,
-                {
-                  id,
-                  name: "email",
-                  type: "email",
-                  autoComplete: "email",
-                  required: true,
-                  placeholder,
-                  disabled: enviando,
-                  invalid: error,
-                  "aria-describedby": state === "exito" || error ? `${id}-aviso` : void 0
-                }
-              )
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("gap-step-md flex min-w-0 flex-1 flex-col"), children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "h2", variant: "h3", children: title }),
+            description ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", children: description }) : null
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsxs("form", { ref: form, onSubmit: submit, className: "gap-step-sm flex flex-col", noValidate: true, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex flex-col sm:flex-row sm:items-start", children: [
+              nameField ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex flex-1 flex-col", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: `${id}-name`, children: nameLabel }),
+                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Text, { id: `${id}-name-error`, variant: "label", tone: "error", as: "p", role: "alert", children: nameError }) : null
+              ] }) : null,
+              /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-xs flex flex-1 flex-col", children: [
+                /* @__PURE__ */ jsxRuntime.jsx(Label2, { htmlFor: id, children: fieldLabel }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  Input,
+                  {
+                    id,
+                    name: "email",
+                    type: "email",
+                    autoComplete: "email",
+                    required: true,
+                    placeholder,
+                    disabled: 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__ */ jsxRuntime.jsx(Text, { id: `${id}-email-error`, variant: "label", tone: "error", as: "p", role: "alert", children: emailError }) : null
+              ] }),
+              nameField ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "sm:mt-[26px]", children: button2 })
             ] }),
-            nameField ? null : boton
+            nameField ? button2 : null
           ] }),
-          nameField ? boton : null
+          state === "success" ? /* @__PURE__ */ jsxRuntime.jsx(Alert, { id: `${id}-notice`, variant: "success", emphasis: "strong", children: successMessage }) : null,
+          error ? /* @__PURE__ */ jsxRuntime.jsx(Alert, { id: `${id}-notice`, variant: "error", emphasis: "strong", children: errorMessage }) : null,
+          disclaimer ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex items-center", children: [
+            expression ? /* @__PURE__ */ jsxRuntime.jsx(MascotFace, { expression, basePath, className: "w-10 max-w-none" }) : null,
+            /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", tone: "muted", as: "p", className: "font-normal", children: disclaimer })
+          ] }) : null
         ] }),
-        state === "exito" ? /* @__PURE__ */ jsxRuntime.jsx(Alert, { id: `${id}-aviso`, variant: "success", enfasis: "fuerte", children: successMessage }) : null,
-        error ? /* @__PURE__ */ jsxRuntime.jsx(Alert, { id: `${id}-aviso`, variant: "error", enfasis: "fuerte", children: errorMessage }) : null,
-        disclaimer ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex items-center", children: [
-          expresion ? /* @__PURE__ */ jsxRuntime.jsx(CaraDeMascota, { expresion, basePath, className: "w-10 max-w-none" }) : null,
-          /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", tone: "muted", as: "p", className: "font-normal", children: disclaimer })
-        ] }) : null
+        aside ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "shrink-0 md:max-w-[42%]", children: aside }) : null
       ]
     }
   );
 }
-var cabecera = classVarianceAuthority.cva("gap-step-sm flex flex-col", {
+var header = classVarianceAuthority.cva("gap-step-sm flex flex-col", {
   variants: {
     size: {
       display: "py-section",
@@ -3447,7 +3590,7 @@ function PageHeader({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: cn(cabecera({ size: size2 }), className), ...props, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("header", { className: cn(header({ size: size2 }), className), ...props, children: [
     eyebrow ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: eyebrow }) : null,
     /* @__PURE__ */ jsxRuntime.jsx(Text, { as, variant: size2 === "display" ? "display" : "h1", className: "max-w-measure", children: title }),
     description ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "body", tone: "secondary", children: description }) : null,
@@ -3461,33 +3604,33 @@ function ScrollingProgressBar({
   className,
   ...props
 }) {
-  const [avance, setAvance] = react.useState(0);
-  const pendiente = react.useRef(0);
+  const [seek, setAvance] = react.useState(0);
+  const pendingOne = react.useRef(0);
   react.useEffect(() => {
-    const medir = () => {
-      pendiente.current = 0;
-      const elemento = target?.current;
-      const inicio = elemento ? elemento.getBoundingClientRect().top + scrollY : 0;
-      const alto = elemento ? elemento.offsetHeight : document.documentElement.scrollHeight;
-      const recorrible = alto - innerHeight;
-      if (recorrible <= 0) {
-        setAvance(scrollY >= inicio ? 100 : 0);
+    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__ */ jsxRuntime.jsx(
@@ -3504,75 +3647,181 @@ function ScrollingProgressBar({
         "div",
         {
           className: cn("h-full", tone === "warm" ? "bg-warm" : "bg-accent"),
-          style: { width: `${avance}%` }
+          style: { width: `${seek}%` }
         }
       )
     }
   );
 }
+var Collapsed = react.createContext(false);
 function SidebarItem({
   active = false,
   asChild = false,
   badge: badge2,
+  icon,
   className,
   children,
   ...props
 }) {
-  const Raiz = asChild ? reactSlot.Slot : "a";
+  const Root18 = asChild ? reactSlot.Slot : "a";
+  const collapsed = react.useContext(Collapsed);
   return /* @__PURE__ */ jsxRuntime.jsx("li", { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    Raiz,
+    Root18,
     {
       "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__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: active ? "text-accent" : "text-text-muted", children: "\u25B8" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "min-w-0 flex-1 truncate", children }),
-        badge2 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "text-body shrink-0", children: icon })
+        ) : /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: active ? "text-accent" : "text-text-muted", children: "\u25B8" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: collapsed ? "sr-only" : "min-w-0 flex-1 truncate", children }),
+        badge2 ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("text-text-muted", collapsed ? "sr-only" : "shrink-0"), children: badge2 }) : null
       ]
     }
   ) });
 }
+function SidebarGroup({ label, children, className, ...props }) {
+  const id = react.useId();
+  const collapsed = react.useContext(Collapsed);
+  return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+          Text,
+          {
+            variant: "meta",
+            tone: "muted",
+            as: "p",
+            id,
+            className: collapsed ? "sr-only" : "px-step-sm pb-step-xs",
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
+  const footer = [version, branch].filter(Boolean);
+  const top = collapsed ? mark : brand2;
+  return /* @__PURE__ */ jsxRuntime.jsx(Collapsed.Provider, { value: collapsed, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", className: "px-step-sm", children: title }) : null,
+        top || onCollapsedChange ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("span", { className: "min-w-0", children: top }) : null,
+              onCollapsedChange ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(ChevronRight, {}) : /* @__PURE__ */ jsxRuntime.jsx(ChevronLeft, {})
+                }
+              ) : null
+            ]
+          }
+        ) : null,
+        title && !collapsed ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", className: "px-step-sm", children: title }) : null,
         /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "gap-0.5 flex flex-1 flex-col", children }),
-        pie.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "meta", tone: "muted", as: "p", className: "border-hairline px-step-sm pt-step-sm border-t", children: pie.map((p, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
-          i > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: " \xB7 " }) : null,
-          p
-        ] }, i)) }) : null
+        user ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { children: [
+              i > 0 ? /* @__PURE__ */ jsxRuntime.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,
@@ -3580,30 +3829,52 @@ function Stat({
   progress,
   icon,
   description,
+  delta,
+  spark,
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn(SUPERFICIE_TARJETA, "p-step-lg gap-step-xs flex flex-col", className), ...props, children: [
-    /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("div", { className: cn(CARD_SURFACE, "p-step-lg gap-step-xs flex flex-col", className), ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex items-start justify-between", children: [
+      /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Text, { variant: "stat", as: "p", tone: tone === "alerta" ? "warm" : "accent", children: value }),
+    /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "stat", as: "p", tone: tone === "neutral" ? "primary" : "warm", children: value }),
+    delta && DeltaGlyph ? /* @__PURE__ */ jsxRuntime.jsxs(Text, { variant: "label", tone: "secondary", as: "p", className: "gap-step-xs flex items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "sr-only", children: [
+        DELTA[delta.direction].label,
+        " "
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(DeltaGlyph, { className: "shrink-0" }),
+      delta.value
+    ] }) : null,
     description ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", as: "p", children: description }) : null,
     typeof progress === "number" ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "mt-auto pt-step-md", children: spark }) : null
   ] });
 }
 function TalkCard({
@@ -3614,25 +3885,55 @@ function TalkCard({
   location,
   status,
   description,
+  resources,
   className,
   ...props
 }) {
-  const pie = [
-    date ? /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime, children: date }, "fecha") : null,
-    location ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: location }, "lugar") : null
+  const footer = [
+    date ? /* @__PURE__ */ jsxRuntime.jsx("time", { dateTime, children: date }, "date") : null,
+    location ? /* @__PURE__ */ jsxRuntime.jsx("span", { children: location }, "location") : null
   ].filter(Boolean);
-  return /* @__PURE__ */ jsxRuntime.jsx(Tarjeta, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("article", { className: "gap-step-sm flex h-full flex-col", children: [
+  const body = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "gap-step-sm flex items-start justify-between", children: [
       /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "accent", as: "p", children: event }),
       status ? /* @__PURE__ */ jsxRuntime.jsx(Badge, { variant: "neutral", children: status }) : null
     ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(Text, { as: "h3", variant: "h3", className: "group-hover:text-accent transition-standard", children: title }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Text,
+      {
+        as: "h3",
+        variant: "h3",
+        className: cn(!resources && "group-hover:text-accent transition-standard"),
+        children: title
+      }
+    ),
     description ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "ui", tone: "secondary", className: "line-clamp-2", children: description }) : null,
-    pie.length > 0 ? /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "label", tone: "muted", as: "p", className: "gap-step-xs mt-auto flex items-center pt-step-sm", children: pie.map((m, i) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "gap-step-xs flex items-center", children: [
-      i > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\xB7" }) : null,
-      m
-    ] }, i)) }) : null
-  ] }) });
+    footer.length > 0 ? /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs("span", { className: "gap-step-xs flex items-center", children: [
+          i > 0 ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", children: "\xB7" }) : null,
+          m
+        ] }, i))
+      }
+    ) : null,
+    resources ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "gap-step-md mt-auto flex flex-wrap items-center pt-step-sm", children: resources }) : null
+  ] });
+  if (resources) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "article",
+      {
+        className: cn(CARD_SURFACE, "p-step-lg gap-step-sm flex h-full flex-col", className),
+        ...props,
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(CardShell, { className: cn("p-step-lg", className), ...props, children: /* @__PURE__ */ jsxRuntime.jsx("article", { className: "gap-step-sm flex h-full flex-col", children: body }) });
 }
 function ThemeToggle({
   label = "Cambiar de tema",
@@ -3650,20 +3951,20 @@ function ThemeToggle({
       size: size2,
       "aria-label": label,
       className: cn("[&_svg]:size-[19px]", className),
-      onClick: () => onThemeChange?.(alternarTema()),
+      onClick: () => onThemeChange?.(toggleTheme()),
       ...props,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(Sol, { className: "light:hidden" }),
-        /* @__PURE__ */ jsxRuntime.jsx(Luna, { className: "hidden light:block" })
+        /* @__PURE__ */ jsxRuntime.jsx(Sun, { className: "light:hidden" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Moon, { className: "hidden light:block" })
       ]
     }
   );
 }
-function useTema() {
-  return react.useSyncExternalStore(suscribirse2, temaActual, servidor);
+function useTheme() {
+  return react.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",
@@ -3675,35 +3976,35 @@ function TableOfContents({
   return /* @__PURE__ */ jsxRuntime.jsxs("nav", { "aria-label": typeof title === "string" ? title : "En esta p\xE1gina", className: cn("gap-step-sm flex flex-col", className), ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx(Text, { variant: "eyebrow", tone: "muted", as: "p", children: title }),
     /* @__PURE__ */ jsxRuntime.jsx("ul", { className: "border-hairline gap-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__ */ jsxRuntime.jsx("li", { children: linkAsChild ? /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: clases, "aria-current": activo ? "location" : void 0, children: linkAsChild({ href: item2.href, children: item2.label }) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: item2.href, className: clases, "aria-current": activo ? "location" : void 0, children: item2.label }) }, item2.href);
+      return /* @__PURE__ */ jsxRuntime.jsx("li", { children: linkAsChild ? /* @__PURE__ */ jsxRuntime.jsx(reactSlot.Slot, { className: classes, "aria-current": active ? "location" : void 0, children: linkAsChild({ href: item2.href, children: item2.label }) }) : /* @__PURE__ */ jsxRuntime.jsx("a", { href: item2.href, className: classes, "aria-current": active ? "location" : void 0, children: item2.label }) }, item2.href);
     }) })
   ] });
 }
-function Isotipo({
-  sobre = "oscuro",
-  basePath = RUTA_ASSETS,
+function Isotype({
+  background = "dark",
+  basePath = ASSETS_PATH,
   alt = "",
   className,
   ...props
 }) {
-  const archivo = sobre === "oscuro" ? aletas.espuma : aletas.color;
+  const file = background === "dark" ? fins.foam : fins.color;
   return /* @__PURE__ */ jsxRuntime.jsx(
     "img",
     {
-      src: `${basePath}/${archivo}`,
+      src: `${basePath}/${file}`,
       alt,
       width: 147,
       height: 111,
@@ -3713,55 +4014,56 @@ function Isotipo({
   );
 }
 function Logo({
-  sobre = "oscuro",
-  basePath = RUTA_ASSETS,
-  soloIsotipo = false,
-  conLema = false,
+  background = "dark",
+  basePath = ASSETS_PATH,
+  isotypeOnly = false,
+  withTagline = false,
   className,
   ...props
 }) {
-  const conAleta = /* @__PURE__ */ jsxRuntime.jsx(
-    Isotipo,
+  const withFin = /* @__PURE__ */ jsxRuntime.jsx(
+    Isotype,
     {
-      sobre,
+      background,
       basePath,
-      alt: soloIsotipo ? naming.wordmark : "",
-      className: conLema ? "h-9 w-auto" : "h-7 w-auto"
+      alt: isotypeOnly ? naming.wordmark : "",
+      className: withTagline ? "h-9 w-auto" : "h-7 w-auto"
     }
   );
   const wordmark = /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-ui font-display text-text-primary font-bold tracking-[-0.02em]", children: naming.wordmark });
-  if (soloIsotipo) {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("gap-step-xs inline-flex items-center", className), ...props, children: conAleta });
+  if (isotypeOnly) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("gap-step-xs inline-flex items-center", className), ...props, children: withFin });
   }
-  if (conLema) {
+  if (withTagline) {
     return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("gap-step-sm inline-flex items-center", className), ...props, children: [
-      conAleta,
+      withFin,
       /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", className: "bg-hairline h-8 w-px shrink-0" }),
       /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "flex min-w-0 flex-col", children: [
         wordmark,
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-eyebrow font-mono text-text-muted uppercase", children: tagline.corto })
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-eyebrow font-mono text-text-muted uppercase", children: tagline.short })
       ] })
     ] });
   }
   return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("gap-step-xs inline-flex items-center", className), ...props, children: [
-    conAleta,
+    withFin,
     wordmark
   ] });
 }
 
-// src/lib/social.tsx
+// src/social/index.tsx
 var social_exports = {};
 __export(social_exports, {
-  Correo: () => Correo,
   Discord: () => Discord,
+  Email: () => Email,
   GitHub: () => GitHub,
   Instagram: () => Instagram,
   LinkedIn: () => LinkedIn,
+  Newsletter: () => Newsletter,
   Rss: () => Rss,
   X: () => X,
   YouTube: () => YouTube
 });
-function Marca({ children, ...props }) {
+function Brand({ children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
@@ -3776,7 +4078,7 @@ function Marca({ children, ...props }) {
     }
   );
 }
-function Funcional({ children, ...props }) {
+function Functional({ children, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "svg",
     {
@@ -3795,21 +4097,26 @@ function Funcional({ children, ...props }) {
     }
   );
 }
-var GitHub = (props) => /* @__PURE__ */ jsxRuntime.jsx(Marca, { ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Marca, { ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Marca, { ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Marca, { ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Marca, { ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Marca, { ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Funcional, { ...props, children: [
+var GitHub = (props) => /* @__PURE__ */ jsxRuntime.jsx(Brand, { ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Brand, { ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Brand, { ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Brand, { ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Brand, { ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(Brand, { ...props, children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(Functional, { ...props, children: [
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16" }),
   /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "5", cy: "19", r: "1.6", fill: "currentColor", stroke: "none" })
 ] });
-var Correo = (props) => /* @__PURE__ */ jsxRuntime.jsxs(Funcional, { ...props, children: [
+var Email = (props) => /* @__PURE__ */ jsxRuntime.jsxs(Functional, { ...props, children: [
   /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "2.75", y: "4.75", width: "18.5", height: "14.5", rx: "2" }),
   /* @__PURE__ */ jsxRuntime.jsx("path", { d: "m3.5 7.5 7.4 5.2a2 2 0 0 0 2.2 0l7.4-5.2" })
 ] });
+var Newsletter = (props) => /* @__PURE__ */ jsxRuntime.jsxs(Functional, { ...props, children: [
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M18 8.5a6 6 0 1 0-12 0c0 5-2 6.5-2 6.5h16s-2-1.5-2-6.5" }),
+  /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M13.7 19a2 2 0 0 1-3.4 0" })
+] });
 
+exports.ASSETS_PATH = ASSETS_PATH;
 exports.Accordion = Accordion;
 exports.AccordionContent = AccordionContent;
 exports.AccordionItem = AccordionItem;
@@ -3836,8 +4143,10 @@ exports.Badge = Badge;
 exports.Blockquote = Blockquote;
 exports.Breadcrumb = Breadcrumb;
 exports.Button = Button;
+exports.CARD = CARD;
+exports.CARD_HOVER = CARD_HOVER;
+exports.CARD_SURFACE = CARD_SURFACE;
 exports.Calendar = Calendar;
-exports.CaraDeMascota = CaraDeMascota;
 exports.Card = Card;
 exports.CardContent = CardContent;
 exports.CardDescription = CardDescription;
@@ -3876,14 +4185,14 @@ exports.EmptyState = EmptyState;
 exports.EventCalendar = EventCalendar;
 exports.Footer = Footer;
 exports.FooterLink = FooterLink;
-exports.HOVER_TARJETA = HOVER_TARJETA;
 exports.Hero = Hero;
 exports.Input = Input;
-exports.Isotipo = Isotipo;
+exports.Isotype = Isotype;
 exports.Label = Label2;
 exports.LinkRow = LinkRow;
 exports.Logo = Logo;
-exports.Mascota = Mascota;
+exports.Mascot = Mascot;
+exports.MascotFace = MascotFace;
 exports.MetricBadge = MetricBadge;
 exports.Nav = Nav;
 exports.NavItem = NavItem;
@@ -3901,10 +4210,8 @@ exports.PopoverAnchor = PopoverAnchor;
 exports.PopoverContent = PopoverContent;
 exports.PopoverTrigger = PopoverTrigger;
 exports.Progress = Progress;
-exports.RUTA_ASSETS = RUTA_ASSETS;
 exports.RadioGroup = RadioGroup2;
 exports.RadioGroupItem = RadioGroupItem;
-exports.SUPERFICIE_TARJETA = SUPERFICIE_TARJETA;
 exports.ScrollingProgressBar = ScrollingProgressBar;
 exports.Select = Select;
 exports.SelectContent = SelectContent;
@@ -3924,14 +4231,15 @@ exports.SheetFooter = SheetFooter;
 exports.SheetHeader = SheetHeader;
 exports.SheetTitle = SheetTitle;
 exports.SheetTrigger = SheetTrigger;
+exports.SidebarGroup = SidebarGroup;
 exports.SidebarItem = SidebarItem;
 exports.SidebarNav = SidebarNav;
 exports.Skeleton = Skeleton;
 exports.Stat = Stat;
 exports.Switch = Switch;
-exports.TEMA_ATRIBUTO = TEMA_ATRIBUTO;
-exports.TEMA_CLAVE = TEMA_CLAVE;
-exports.TEMA_EVENTO = TEMA_EVENTO;
+exports.THEME_ATTRIBUTE = THEME_ATTRIBUTE;
+exports.THEME_EVENT = THEME_EVENT;
+exports.THEME_KEY = THEME_KEY;
 exports.Table = Table;
 exports.TableBody = TableBody;
 exports.TableCaption = TableCaption;
@@ -3956,44 +4264,45 @@ exports.TooltipContent = TooltipContent;
 exports.TooltipProvider = TooltipProvider;
 exports.TooltipTrigger = TooltipTrigger;
 exports.alertVariants = alert;
-exports.aletas = aletas;
-exports.alternarTema = alternarTema;
-exports.aplicarTema = aplicarTema;
+exports.applyTheme = applyTheme;
 exports.avatarVariants = avatar;
 exports.badgeVariants = badge;
 exports.brand = brand;
 exports.buttonVariants = button;
-exports.caras = caras;
-exports.categoryBadgeVariants = categoria;
+exports.categoryBadgeVariants = category;
 exports.cn = cn;
 exports.colors = colors;
 exports.control = control;
+exports.currentTheme = currentTheme;
 exports.dark = dark;
-exports.escucharTema = escucharTema;
+exports.faceList = faceList;
+exports.faceUsage = faceUsage;
+exports.faces = faces;
+exports.fins = fins;
 exports.fonts = fonts;
 exports.gradient = gradient;
 exports.light = light;
 exports.limits = limits;
-exports.listaCaras = listaCaras;
-exports.listaPoses = listaPoses;
+exports.metricBadgeVariants = metric;
 exports.motion = motion;
 exports.naming = naming;
+exports.poseList = poseList;
 exports.poses = poses;
+exports.preferredTheme = preferredTheme;
 exports.radius = radius;
-exports.scriptTema = scriptTema;
 exports.series = series;
 exports.shadow = shadow;
-exports.sintaxis = sintaxis;
 exports.size = size;
 exports.social = social_exports;
 exports.spacing = spacing;
+exports.storedTheme = storedTheme;
+exports.syntax = syntax;
 exports.tagline = tagline;
-exports.temaActual = temaActual;
-exports.temaGuardado = temaGuardado;
-exports.temaPreferido = temaPreferido;
-exports.textVariants = texto;
+exports.textVariants = text;
+exports.themeScript = themeScript;
 exports.toast = toast2;
+exports.toggleTheme = toggleTheme;
 exports.tokens = tokens;
 exports.typeScale = typeScale;
-exports.useTema = useTema;
-exports.usoDeCara = usoDeCara;
+exports.useTheme = useTheme;
+exports.watchTheme = watchTheme;