@chronowl/widget 1.0.0

package/dist/index.mjs

@@ -0,0 +1,2053 @@
+import { jsx as e, jsxs as s, Fragment as q } from "react/jsx-runtime";
+import { forwardRef as U, useState as p, useMemo as J, useId as he, useRef as ee, useEffect as I, useCallback as N } from "react";
+const fe = {
+  "display-lg": "text-display-lg",
+  "display-md": "text-display-md",
+  "display-sm": "text-display-sm",
+  "headline-lg": "text-headline-lg",
+  "headline-md": "text-headline-md",
+  "headline-sm": "text-headline-sm",
+  "title-lg": "text-title-lg",
+  "title-md": "text-title-md",
+  "title-sm": "text-title-sm",
+  "body-lg": "text-body-lg",
+  "body-md": "text-body-md",
+  "body-sm": "text-body-sm",
+  "label-lg": "text-label-lg",
+  "label-md": "text-label-md",
+  "label-sm": "text-label-sm"
+}, ve = {
+  "display-lg": "h1",
+  "display-md": "h1",
+  "display-sm": "h2",
+  "headline-lg": "h2",
+  "headline-md": "h3",
+  "headline-sm": "h4",
+  "title-lg": "h5",
+  "title-md": "h6",
+  "title-sm": "h6",
+  "body-lg": "p",
+  "body-md": "p",
+  "body-sm": "p",
+  "label-lg": "span",
+  "label-md": "span",
+  "label-sm": "small"
+}, pe = {
+  left: "text-left",
+  center: "text-center",
+  right: "text-right"
+};
+function d({
+  variant: r = "body-md",
+  as: a,
+  color: n,
+  truncate: t = !1,
+  align: i,
+  children: l,
+  className: o = "",
+  ...c
+}) {
+  const u = a || ve[r];
+  return /* @__PURE__ */ e(
+    u,
+    {
+      className: [
+        "font-sans",
+        fe[r],
+        i ? pe[i] : "",
+        t ? "truncate" : "",
+        o
+      ].filter(Boolean).join(" "),
+      style: n ? { color: n } : void 0,
+      ...c,
+      children: l
+    }
+  );
+}
+const ge = {
+  sm: "h-8 px-3 text-label-md min-w-[44px]",
+  md: "h-10 px-5 text-label-lg min-w-[44px]",
+  lg: "h-12 px-6 text-label-lg min-w-[44px]"
+}, be = {
+  filled: {
+    primary: "bg-primary text-primary-on hover:bg-tertiary active:bg-tertiary shadow-elevation-1 hover:shadow-elevation-2",
+    secondary: "bg-secondary text-secondary-on hover:bg-secondary-container active:bg-secondary-container shadow-elevation-1",
+    error: "bg-error text-error-on hover:bg-red-800 active:bg-red-900 shadow-elevation-1",
+    success: "bg-success text-success-on hover:bg-green-700 active:bg-green-800 shadow-elevation-1",
+    warning: "bg-warning text-warning-on hover:bg-yellow-600 active:bg-yellow-700 shadow-elevation-1"
+  },
+  tonal: {
+    primary: "bg-primary-container text-primary-on-container hover:bg-secondary-container",
+    secondary: "bg-secondary-container text-secondary-on-container hover:bg-secondary",
+    error: "bg-error-container text-error-on-container hover:bg-red-200",
+    success: "bg-success-container text-success-on-container hover:bg-green-200",
+    warning: "bg-warning-container text-warning-on-container hover:bg-yellow-200"
+  },
+  outlined: {
+    primary: "border border-primary text-primary hover:bg-primary-container",
+    secondary: "border border-neutral-variant text-neutral hover:bg-surface-variant",
+    error: "border border-error text-error hover:bg-error-container",
+    success: "border border-success text-success hover:bg-success-container",
+    warning: "border border-warning text-warning hover:bg-warning-container"
+  },
+  text: {
+    primary: "text-primary hover:bg-primary-container",
+    secondary: "text-neutral hover:bg-surface-variant",
+    error: "text-error hover:bg-error-container",
+    success: "text-success hover:bg-success-container",
+    warning: "text-warning hover:bg-warning-container"
+  }
+}, S = U(
+  ({
+    variant: r = "filled",
+    color: a = "primary",
+    size: n = "md",
+    fullWidth: t = !1,
+    loading: i = !1,
+    icon: l,
+    iconPosition: o = "start",
+    disabled: c,
+    children: u,
+    className: f = "",
+    ...y
+  }, m) => {
+    var D;
+    const b = c || i, k = "inline-flex items-center justify-center gap-2 font-sans font-bold rounded-full transition-all duration-medium-1 ease-standard focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary select-none cursor-pointer", z = b ? "opacity-40 pointer-events-none cursor-not-allowed" : "", g = t ? "w-full" : "", j = [
+      k,
+      ge[n],
+      ((D = be[r]) == null ? void 0 : D[a]) ?? "",
+      z,
+      g,
+      f
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ e("button", { ref: m, className: j, disabled: b, ...y, children: i ? /* @__PURE__ */ s(
+      "svg",
+      {
+        className: "animate-spin h-4 w-4",
+        viewBox: "0 0 24 24",
+        fill: "none",
+        "aria-hidden": "true",
+        children: [
+          /* @__PURE__ */ e(
+            "circle",
+            {
+              className: "opacity-25",
+              cx: "12",
+              cy: "12",
+              r: "10",
+              stroke: "currentColor",
+              strokeWidth: "4"
+            }
+          ),
+          /* @__PURE__ */ e(
+            "path",
+            {
+              className: "opacity-75",
+              fill: "currentColor",
+              d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
+            }
+          )
+        ]
+      }
+    ) : /* @__PURE__ */ s(q, { children: [
+      l && o === "start" && /* @__PURE__ */ e("span", { className: "inline-flex shrink-0", children: l }),
+      u && /* @__PURE__ */ e("span", { children: u }),
+      l && o === "end" && /* @__PURE__ */ e("span", { className: "inline-flex shrink-0", children: l })
+    ] }) });
+  }
+);
+S.displayName = "Button";
+const xe = {
+  sm: 16,
+  md: 20,
+  lg: 24
+}, ye = {
+  calendar: "M19 4h-1V2h-2v2H8V2H6v2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 16H5V10h14v10zm0-12H5V6h14v2z",
+  clock: "M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm.5-13H11v6l5.2 3.2.8-1.3-4.5-2.7V7z",
+  check: "M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z",
+  close: "M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12 19 6.41z",
+  "chevron-left": "M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12l4.58-4.59z",
+  "chevron-right": "M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6-6-6z",
+  "chevron-down": "M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z",
+  search: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z",
+  user: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z",
+  mail: "M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4l-8 5-8-5V6l8 5 8-5v2z",
+  phone: "M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z",
+  notes: "M14 2H6c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z",
+  alert: "M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z",
+  info: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z",
+  star: "M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27z",
+  location: "M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z",
+  edit: "M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z",
+  trash: "M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z",
+  "arrow-left": "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z",
+  "arrow-right": "M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8-8-8z",
+  spinner: "M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z",
+  owl: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-1-3h6l-1 3H10zm5-5c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm-6 0c-.55 0-1-.45-1-1s.45-1 1-1 1 .45 1 1-.45 1-1 1zm3-5c-2.76 0-5 1.12-5 2.5h10C17 8.12 14.76 7 12 7z"
+};
+function v({ name: r, size: a = "md", color: n, className: t = "", ...i }) {
+  const l = xe[a], o = ye[r];
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      width: l,
+      height: l,
+      viewBox: "0 0 24 24",
+      fill: n || "currentColor",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      className: t,
+      ...i,
+      children: /* @__PURE__ */ e("path", { d: o })
+    }
+  );
+}
+function V({ title: r = "ChronOwl", subtitle: a, onBack: n, actions: t }) {
+  return /* @__PURE__ */ s("header", { className: "flex items-center gap-3 px-4 py-3 bg-surface border-b border-neutral-variant/30", children: [
+    n && /* @__PURE__ */ e(
+      S,
+      {
+        variant: "text",
+        size: "sm",
+        onClick: n,
+        "aria-label": "Volver",
+        className: "shrink-0 -ml-2",
+        children: /* @__PURE__ */ e(v, { name: "arrow-left", size: "md" })
+      }
+    ),
+    /* @__PURE__ */ s("div", { className: "flex items-center gap-2 flex-1 min-w-0", children: [
+      /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full bg-primary flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(v, { name: "owl", size: "sm", color: "#FFFFFF" }) }),
+      /* @__PURE__ */ s("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ e(d, { variant: "title-md", as: "h1", truncate: !0, className: "text-surface-on", children: r }),
+        a && /* @__PURE__ */ e(d, { variant: "body-sm", as: "p", truncate: !0, className: "text-surface-on-variant", children: a })
+      ] })
+    ] }),
+    t && /* @__PURE__ */ e("div", { className: "flex items-center gap-1 shrink-0", children: t })
+  ] });
+}
+function Ne({ steps: r, currentStep: a, onStepClick: n }) {
+  return /* @__PURE__ */ e("nav", { "aria-label": "Progreso de reserva", className: "px-4 py-3", children: /* @__PURE__ */ e("ol", { className: "flex items-center w-full", children: r.map((t, i) => {
+    const l = i < a, o = i === a, c = n && l;
+    return /* @__PURE__ */ s(
+      "li",
+      {
+        className: [
+          "flex items-center",
+          i < r.length - 1 ? "flex-1" : ""
+        ].join(" "),
+        children: [
+          /* @__PURE__ */ s(
+            "button",
+            {
+              type: "button",
+              disabled: !c,
+              onClick: () => c && n(i),
+              "aria-current": o ? "step" : void 0,
+              className: [
+                "flex items-center gap-2 group",
+                c ? "cursor-pointer" : "cursor-default",
+                "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary rounded"
+              ].join(" "),
+              children: [
+                /* @__PURE__ */ e(
+                  "span",
+                  {
+                    className: [
+                      "flex items-center justify-center w-7 h-7 rounded-full text-label-sm font-bold shrink-0",
+                      "transition-all duration-medium-1 ease-standard",
+                      l ? "bg-primary text-primary-on" : o ? "bg-primary text-primary-on ring-2 ring-primary/30 ring-offset-2" : "bg-surface-variant text-surface-on-variant"
+                    ].join(" "),
+                    children: l ? "✓" : i + 1
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  d,
+                  {
+                    variant: "label-md",
+                    as: "span",
+                    className: [
+                      "hidden sm:inline",
+                      o ? "text-primary font-bold" : l ? "text-surface-on" : "text-surface-on-variant"
+                    ].join(" "),
+                    children: t
+                  }
+                )
+              ]
+            }
+          ),
+          i < r.length - 1 && /* @__PURE__ */ e(
+            "div",
+            {
+              className: [
+                "flex-1 h-0.5 mx-2",
+                "transition-colors duration-medium-1 ease-standard",
+                l ? "bg-primary" : "bg-neutral-variant/40"
+              ].join(" ")
+            }
+          )
+        ]
+      },
+      t
+    );
+  }) }) });
+}
+function _({ companyName: r, poweredBy: a = !0 }) {
+  return /* @__PURE__ */ e("footer", { className: "px-4 py-3 border-t border-neutral-variant/30 bg-surface", children: /* @__PURE__ */ s("div", { className: "flex items-center justify-between", children: [
+    r && /* @__PURE__ */ s(d, { variant: "body-sm", className: "text-surface-on-variant", children: [
+      "© ",
+      r
+    ] }),
+    a && /* @__PURE__ */ s("div", { className: "flex items-center gap-1 ml-auto", children: [
+      /* @__PURE__ */ e(v, { name: "owl", size: "sm", color: "#7F8C8D" }),
+      /* @__PURE__ */ e(d, { variant: "label-sm", className: "text-surface-on-variant", children: "Powered by ChronOwl" })
+    ] })
+  ] }) });
+}
+function we({
+  steps: r,
+  currentStep: a,
+  onStepClick: n,
+  onBack: t,
+  title: i = "ChronOwl",
+  children: l,
+  footer: o
+}) {
+  return /* @__PURE__ */ s("div", { className: "chronowl-widget flex flex-col w-full max-w-[480px] mx-auto min-h-[400px] max-h-[90vh] bg-surface rounded-xl shadow-elevation-3 overflow-hidden font-sans", children: [
+    /* @__PURE__ */ s("div", { className: "shrink-0", children: [
+      /* @__PURE__ */ e(
+        V,
+        {
+          title: i,
+          subtitle: "Reserva tu cita",
+          onBack: a > 0 ? t : void 0
+        }
+      ),
+      /* @__PURE__ */ e(Ne, { steps: r, currentStep: a, onStepClick: n })
+    ] }),
+    /* @__PURE__ */ e("main", { className: "flex-1 overflow-y-auto px-4 py-4", children: l }),
+    /* @__PURE__ */ e("div", { className: "shrink-0", children: o || /* @__PURE__ */ e(_, { poweredBy: !0 }) })
+  ] });
+}
+const Se = {
+  0: "shadow-elevation-0",
+  1: "shadow-elevation-1",
+  2: "shadow-elevation-2",
+  3: "shadow-elevation-3",
+  4: "shadow-elevation-4",
+  5: "shadow-elevation-5"
+}, Ce = {
+  sm: "p-3",
+  md: "p-4",
+  lg: "p-6"
+};
+function ze({
+  elevation: r = 1,
+  outlined: a = !1,
+  padding: n = "md",
+  children: t,
+  className: i = "",
+  ...l
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: [
+        "bg-surface rounded-md font-sans",
+        "transition-shadow duration-medium-1 ease-standard",
+        a ? "border border-neutral-variant" : Se[r],
+        Ce[n],
+        i
+      ].filter(Boolean).join(" "),
+      ...l,
+      children: t
+    }
+  );
+}
+function Fe({ service: r, selected: a = !1, onSelect: n }) {
+  return /* @__PURE__ */ e(
+    "button",
+    {
+      type: "button",
+      onClick: () => n(r),
+      "aria-pressed": a,
+      className: "w-full text-left focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary rounded-md",
+      children: /* @__PURE__ */ e(
+        ze,
+        {
+          elevation: a ? 2 : 1,
+          className: [
+            "transition-all duration-medium-1 ease-standard cursor-pointer",
+            "hover:shadow-elevation-2",
+            a ? "ring-2 ring-primary bg-primary-container" : "hover:bg-surface-variant"
+          ].join(" "),
+          children: /* @__PURE__ */ s("div", { className: "flex items-start justify-between gap-3", children: [
+            /* @__PURE__ */ s("div", { className: "flex-1 min-w-0", children: [
+              /* @__PURE__ */ e(
+                d,
+                {
+                  variant: "title-sm",
+                  className: a ? "text-primary-on-container" : "text-surface-on",
+                  children: r.name
+                }
+              ),
+              /* @__PURE__ */ e(
+                d,
+                {
+                  variant: "body-sm",
+                  className: [
+                    "mt-1",
+                    a ? "text-primary-on-container/70" : "text-surface-on-variant"
+                  ].join(" "),
+                  truncate: !0,
+                  children: r.description
+                }
+              ),
+              /* @__PURE__ */ s("div", { className: "flex items-center gap-3 mt-2", children: [
+                /* @__PURE__ */ s("span", { className: "inline-flex items-center gap-1 text-body-sm text-surface-on-variant", children: [
+                  /* @__PURE__ */ e(v, { name: "clock", size: "sm" }),
+                  r.duration,
+                  " min"
+                ] }),
+                r.category && /* @__PURE__ */ e("span", { className: "text-body-sm text-surface-on-variant", children: r.category })
+              ] })
+            ] }),
+            /* @__PURE__ */ s("div", { className: "text-right shrink-0", children: [
+              /* @__PURE__ */ s(d, { variant: "title-md", className: "text-primary", children: [
+                r.currency,
+                r.price
+              ] }),
+              a && /* @__PURE__ */ e("span", { className: "inline-flex mt-1", children: /* @__PURE__ */ e(v, { name: "check", size: "sm", color: "#2C3E50" }) })
+            ] })
+          ] })
+        }
+      )
+    }
+  );
+}
+const ke = {
+  sm: "h-4 w-4 border-2",
+  md: "h-6 w-6 border-2",
+  lg: "h-10 w-10 border-3"
+};
+function re({ size: r = "md", color: a, className: n = "", ...t }) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      role: "progressbar",
+      "aria-label": "Cargando",
+      className: [
+        "inline-block rounded-full border-solid border-current border-r-transparent animate-spin",
+        ke[r],
+        n
+      ].filter(Boolean).join(" "),
+      style: a ? { borderColor: a, borderRightColor: "transparent" } : void 0,
+      ...t
+    }
+  );
+}
+function K({ message: r = "Cargando...", size: a = "md" }) {
+  return /* @__PURE__ */ s("div", { className: "flex flex-col items-center justify-center py-12 gap-4", children: [
+    /* @__PURE__ */ e(re, { size: a }),
+    /* @__PURE__ */ e(d, { variant: "body-md", className: "text-surface-on-variant", children: r })
+  ] });
+}
+function ae({ icon: r = "calendar", title: a, description: n, action: t }) {
+  return /* @__PURE__ */ s("div", { className: "flex flex-col items-center justify-center py-12 px-4 text-center", children: [
+    /* @__PURE__ */ e("div", { className: "w-16 h-16 rounded-full bg-surface-variant flex items-center justify-center mb-4", children: /* @__PURE__ */ e(v, { name: r, size: "lg", color: "#7F8C8D" }) }),
+    /* @__PURE__ */ e(d, { variant: "title-md", className: "text-surface-on mb-2", children: a }),
+    n && /* @__PURE__ */ e(d, { variant: "body-md", className: "text-surface-on-variant mb-6 max-w-xs", children: n }),
+    t && /* @__PURE__ */ e(S, { variant: "tonal", onClick: t.onClick, children: t.label })
+  ] });
+}
+function Ee({
+  services: r,
+  selectedServiceId: a,
+  onSelectService: n,
+  loading: t = !1
+}) {
+  return t ? /* @__PURE__ */ e(K, { message: "Cargando servicios..." }) : r.length === 0 ? /* @__PURE__ */ e(
+    ae,
+    {
+      icon: "info",
+      title: "Sin servicios disponibles",
+      description: "No hay servicios configurados en este momento."
+    }
+  ) : /* @__PURE__ */ s("div", { className: "w-full", children: [
+    /* @__PURE__ */ e(d, { variant: "title-sm", className: "mb-3 px-1 text-surface-on", children: "Selecciona un servicio" }),
+    /* @__PURE__ */ e("div", { className: "flex flex-col gap-3", children: r.map((i) => /* @__PURE__ */ e(
+      Fe,
+      {
+        service: i,
+        selected: i.id === a,
+        onSelect: n
+      },
+      i.id
+    )) })
+  ] });
+}
+const Le = ["Lu", "Ma", "Mi", "Ju", "Vi", "Sa", "Do"], Q = [
+  "Enero",
+  "Febrero",
+  "Marzo",
+  "Abril",
+  "Mayo",
+  "Junio",
+  "Julio",
+  "Agosto",
+  "Septiembre",
+  "Octubre",
+  "Noviembre",
+  "Diciembre"
+];
+function X(r) {
+  return `${r.getFullYear()}-${String(r.getMonth() + 1).padStart(2, "0")}-${String(r.getDate()).padStart(2, "0")}`;
+}
+function Z(r, a) {
+  return r.getFullYear() === a.getFullYear() && r.getMonth() === a.getMonth() && r.getDate() === a.getDate();
+}
+function Me({
+  selectedDate: r,
+  onSelectDate: a,
+  minDate: n,
+  maxDate: t,
+  disabledDates: i = [],
+  availableDates: l = []
+}) {
+  const o = /* @__PURE__ */ new Date(), [c, u] = p((r == null ? void 0 : r.getMonth()) ?? o.getMonth()), [f, y] = p((r == null ? void 0 : r.getFullYear()) ?? o.getFullYear()), m = J(() => new Set(i), [i]), b = J(() => new Set(l), [l]), k = new Date(f, c + 1, 0).getDate(), z = (new Date(f, c, 1).getDay() + 6) % 7, g = () => {
+    c === 0 ? (u(11), y(f - 1)) : u(c - 1);
+  }, j = () => {
+    c === 11 ? (u(0), y(f + 1)) : u(c + 1);
+  }, D = (h) => {
+    const C = new Date(f, c, h), L = X(C);
+    if (m.has(L) || n && C < new Date(n.getFullYear(), n.getMonth(), n.getDate()) || t && C > t) return !0;
+    const M = new Date(o.getFullYear(), o.getMonth(), o.getDate());
+    return C < M;
+  }, x = (h) => {
+    if (b.size === 0) return !0;
+    const C = X(new Date(f, c, h));
+    return b.has(C);
+  }, w = [];
+  for (let h = 0; h < z; h++) w.push(null);
+  for (let h = 1; h <= k; h++) w.push(h);
+  return /* @__PURE__ */ s("div", { className: "w-full max-w-[320px] mx-auto", children: [
+    /* @__PURE__ */ s("div", { className: "flex items-center justify-between mb-3", children: [
+      /* @__PURE__ */ e(S, { variant: "text", size: "sm", onClick: g, "aria-label": "Mes anterior", children: /* @__PURE__ */ e(v, { name: "chevron-left", size: "md" }) }),
+      /* @__PURE__ */ s(d, { variant: "title-sm", className: "text-surface-on", children: [
+        Q[c],
+        " ",
+        f
+      ] }),
+      /* @__PURE__ */ e(S, { variant: "text", size: "sm", onClick: j, "aria-label": "Mes siguiente", children: /* @__PURE__ */ e(v, { name: "chevron-right", size: "md" }) })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-0.5 mb-1", children: Le.map((h) => /* @__PURE__ */ e("div", { className: "text-center text-label-sm text-surface-on-variant py-1", children: h }, h)) }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-7 gap-0.5", children: w.map((h, C) => {
+      if (h === null) return /* @__PURE__ */ e("div", {}, `empty-${C}`);
+      const L = new Date(f, c, h), M = D(h), B = x(h) && !M, T = r ? Z(L, r) : !1, R = Z(L, o);
+      return /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          disabled: M,
+          onClick: () => B && a(L),
+          "aria-pressed": T,
+          "aria-label": `${h} de ${Q[c]}${M ? ", no disponible" : ""}`,
+          className: [
+            "aspect-square flex items-center justify-center rounded-full",
+            "text-body-sm font-sans min-h-[36px] min-w-[36px]",
+            "transition-all duration-short-2 ease-standard",
+            "focus-visible:outline-2 focus-visible:outline-offset-1 focus-visible:outline-primary",
+            T ? "bg-primary text-primary-on font-bold" : R && !M ? "border border-primary text-primary font-bold" : B ? "text-surface-on hover:bg-primary-container cursor-pointer" : "text-surface-on-variant opacity-30 cursor-not-allowed"
+          ].join(" "),
+          children: h
+        },
+        h
+      );
+    }) })
+  ] });
+}
+function je({
+  selectedDate: r,
+  onSelectDate: a,
+  minDate: n,
+  maxDate: t,
+  disabledDates: i,
+  availableDates: l
+}) {
+  return /* @__PURE__ */ s("div", { className: "w-full", children: [
+    /* @__PURE__ */ e(d, { variant: "title-sm", className: "mb-3 px-1 text-surface-on", children: "Selecciona una fecha" }),
+    /* @__PURE__ */ e("div", { className: "bg-surface rounded-md shadow-elevation-1 p-4", children: /* @__PURE__ */ e(
+      Me,
+      {
+        selectedDate: r,
+        onSelectDate: a,
+        minDate: n,
+        maxDate: t,
+        disabledDates: i,
+        availableDates: l
+      }
+    ) }),
+    r && /* @__PURE__ */ s(d, { variant: "body-sm", className: "mt-2 px-1 text-surface-on-variant text-center", children: [
+      "Fecha seleccionada:",
+      " ",
+      /* @__PURE__ */ e("span", { className: "font-bold text-primary", children: r.toLocaleDateString("es-ES", {
+        weekday: "long",
+        day: "numeric",
+        month: "long"
+      }) })
+    ] })
+  ] });
+}
+function De({
+  slots: r,
+  selectedSlotId: a,
+  onSelectSlot: n,
+  columns: t = 4
+}) {
+  const i = r.filter((c) => parseInt(c.startTime.split(":")[0], 10) < 12), l = r.filter((c) => parseInt(c.startTime.split(":")[0], 10) >= 12), o = (c) => /* @__PURE__ */ e(
+    "div",
+    {
+      className: "grid gap-2",
+      style: { gridTemplateColumns: `repeat(${t}, 1fr)` },
+      children: c.map((u) => {
+        const f = u.id === a;
+        return /* @__PURE__ */ e(
+          "button",
+          {
+            type: "button",
+            disabled: !u.available,
+            onClick: () => u.available && n(u),
+            "aria-pressed": f,
+            className: [
+              "py-2 px-2 rounded-sm text-label-lg font-sans text-center",
+              "transition-all duration-short-2 ease-standard",
+              "min-h-[44px] min-w-[44px]",
+              "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
+              f ? "bg-primary text-primary-on shadow-elevation-1" : u.available ? "bg-surface border border-neutral-variant/40 text-surface-on hover:bg-primary-container hover:border-primary/30" : "bg-surface-variant text-surface-on-variant opacity-30 cursor-not-allowed"
+            ].join(" "),
+            children: u.startTime
+          },
+          u.id
+        );
+      })
+    }
+  );
+  return /* @__PURE__ */ s("div", { className: "w-full space-y-4", children: [
+    i.length > 0 && /* @__PURE__ */ s("div", { children: [
+      /* @__PURE__ */ e(d, { variant: "label-md", className: "mb-2 text-surface-on-variant", children: "Mañana" }),
+      o(i)
+    ] }),
+    l.length > 0 && /* @__PURE__ */ s("div", { children: [
+      /* @__PURE__ */ e(d, { variant: "label-md", className: "mb-2 text-surface-on-variant", children: "Tarde" }),
+      o(l)
+    ] })
+  ] });
+}
+const $ = U(
+  ({
+    label: r,
+    error: a,
+    helperText: n,
+    leadingIcon: t,
+    trailingIcon: i,
+    fullWidth: l = !0,
+    className: o = "",
+    id: c,
+    ...u
+  }, f) => {
+    const y = he(), m = c ?? y, b = !!a, k = [
+      "relative",
+      l ? "w-full" : "inline-flex"
+    ].join(" "), z = [
+      "peer w-full h-12 px-4 rounded-xs bg-surface border font-sans text-body-lg",
+      "text-surface-on placeholder-transparent",
+      "transition-all duration-medium-1 ease-standard",
+      "focus:outline-none focus:ring-2",
+      t ? "pl-11" : "",
+      i ? "pr-11" : "",
+      b ? "border-error focus:ring-error focus:border-error" : "border-neutral-variant focus:ring-primary focus:border-primary",
+      "disabled:opacity-40 disabled:cursor-not-allowed",
+      o
+    ].filter(Boolean).join(" "), g = [
+      "absolute left-4 top-1/2 -translate-y-1/2 text-body-lg font-sans pointer-events-none",
+      "transition-all duration-medium-1 ease-standard origin-left",
+      "peer-focus:top-0 peer-focus:text-label-sm peer-focus:bg-surface peer-focus:px-1 peer-focus:-translate-y-1/2 peer-focus:scale-90",
+      "peer-[:not(:placeholder-shown)]:top-0 peer-[:not(:placeholder-shown)]:text-label-sm peer-[:not(:placeholder-shown)]:bg-surface peer-[:not(:placeholder-shown)]:px-1 peer-[:not(:placeholder-shown)]:-translate-y-1/2 peer-[:not(:placeholder-shown)]:scale-90",
+      t ? "left-11" : "",
+      b ? "text-error peer-focus:text-error" : "text-surface-on-variant peer-focus:text-primary"
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ s("div", { className: k, children: [
+      /* @__PURE__ */ s("div", { className: "relative", children: [
+        t && /* @__PURE__ */ e("span", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-surface-on-variant", children: t }),
+        /* @__PURE__ */ e(
+          "input",
+          {
+            ref: f,
+            id: m,
+            className: z,
+            placeholder: r || " ",
+            "aria-invalid": b,
+            "aria-describedby": a ? `${m}-error` : n ? `${m}-helper` : void 0,
+            ...u
+          }
+        ),
+        r && /* @__PURE__ */ e("label", { htmlFor: m, className: g, children: r }),
+        i && /* @__PURE__ */ e("span", { className: "absolute right-3 top-1/2 -translate-y-1/2 text-surface-on-variant", children: i })
+      ] }),
+      (a || n) && /* @__PURE__ */ e(
+        "p",
+        {
+          id: a ? `${m}-error` : `${m}-helper`,
+          className: [
+            "mt-1 px-4 text-body-sm",
+            b ? "text-error" : "text-surface-on-variant"
+          ].join(" "),
+          children: a || n
+        }
+      )
+    ] });
+  }
+);
+$.displayName = "Input";
+function Be(r) {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(r);
+}
+function Te(r) {
+  return /^[\d\s\-+()]{7,20}$/.test(r);
+}
+function ar(r, a = "es-ES") {
+  return r.toLocaleDateString(a, {
+    weekday: "long",
+    day: "numeric",
+    month: "long",
+    year: "numeric"
+  });
+}
+function nr(r, a = "es-ES") {
+  return r.toLocaleDateString(a, {
+    weekday: "short",
+    day: "numeric",
+    month: "short"
+  });
+}
+function $e(r) {
+  return `${r.getFullYear()}-${String(r.getMonth() + 1).padStart(2, "0")}-${String(r.getDate()).padStart(2, "0")}`;
+}
+function He({ onSubmit: r, loading: a = !1, initialValues: n }) {
+  const [t, i] = p((n == null ? void 0 : n.clientName) ?? ""), [l, o] = p((n == null ? void 0 : n.clientEmail) ?? ""), [c, u] = p((n == null ? void 0 : n.clientPhone) ?? ""), [f, y] = p((n == null ? void 0 : n.notes) ?? ""), [m, b] = p({}), k = () => {
+    const g = {};
+    return t.trim() || (g.clientName = "El nombre es requerido"), l.trim() ? Be(l) || (g.clientEmail = "Email no válido") : g.clientEmail = "El email es requerido", c.trim() ? Te(c) || (g.clientPhone = "Teléfono no válido") : g.clientPhone = "El teléfono es requerido", b(g), Object.keys(g).length === 0;
+  };
+  return /* @__PURE__ */ s("form", { onSubmit: (g) => {
+    g.preventDefault(), k() && r({
+      clientName: t.trim(),
+      clientEmail: l.trim(),
+      clientPhone: c.trim(),
+      notes: f.trim() || void 0
+    });
+  }, noValidate: !0, className: "w-full", children: [
+    /* @__PURE__ */ e(d, { variant: "title-sm", className: "mb-4 text-surface-on", children: "Tus datos" }),
+    /* @__PURE__ */ s("div", { className: "space-y-4", children: [
+      /* @__PURE__ */ e(
+        $,
+        {
+          label: "Nombre completo",
+          type: "text",
+          value: t,
+          onChange: (g) => i(g.target.value),
+          error: m.clientName,
+          leadingIcon: /* @__PURE__ */ e(v, { name: "user", size: "sm" }),
+          autoComplete: "name",
+          maxLength: 100,
+          required: !0
+        }
+      ),
+      /* @__PURE__ */ e(
+        $,
+        {
+          label: "Email",
+          type: "email",
+          value: l,
+          onChange: (g) => o(g.target.value),
+          error: m.clientEmail,
+          leadingIcon: /* @__PURE__ */ e(v, { name: "mail", size: "sm" }),
+          autoComplete: "email",
+          maxLength: 254,
+          required: !0
+        }
+      ),
+      /* @__PURE__ */ e(
+        $,
+        {
+          label: "Teléfono",
+          type: "tel",
+          value: c,
+          onChange: (g) => u(g.target.value),
+          error: m.clientPhone,
+          leadingIcon: /* @__PURE__ */ e(v, { name: "phone", size: "sm" }),
+          autoComplete: "tel",
+          maxLength: 20,
+          required: !0
+        }
+      ),
+      /* @__PURE__ */ e(
+        $,
+        {
+          label: "Notas (opcional)",
+          type: "text",
+          value: f,
+          onChange: (g) => y(g.target.value),
+          leadingIcon: /* @__PURE__ */ e(v, { name: "notes", size: "sm" }),
+          maxLength: 500
+        }
+      )
+    ] }),
+    /* @__PURE__ */ e(
+      S,
+      {
+        type: "submit",
+        variant: "filled",
+        color: "primary",
+        size: "lg",
+        fullWidth: !0,
+        loading: a,
+        className: "mt-6",
+        children: "Confirmar reserva"
+      }
+    )
+  ] });
+}
+function A({
+  orientation: r = "horizontal",
+  inset: a = !1,
+  className: n = "",
+  ...t
+}) {
+  const i = r === "horizontal";
+  return /* @__PURE__ */ e(
+    "hr",
+    {
+      role: "separator",
+      "aria-orientation": r,
+      className: [
+        "border-0 bg-neutral-variant",
+        i ? "h-px w-full" : "w-px h-full",
+        a && i ? "mx-4" : "",
+        a && !i ? "my-4" : "",
+        n
+      ].filter(Boolean).join(" "),
+      ...t
+    }
+  );
+}
+const Ie = {
+  confirmed: "bg-success-container text-success-on-container",
+  pending: "bg-warning-container text-warning-on-container",
+  cancelled: "bg-error-container text-error-on-container",
+  completed: "bg-primary-container text-primary-on-container",
+  info: "bg-secondary-container text-secondary-on-container"
+}, Ae = {
+  sm: "text-label-sm px-2 py-0.5",
+  md: "text-label-md px-3 py-1",
+  lg: "text-label-lg px-4 py-1.5"
+};
+function We({
+  variant: r,
+  size: a = "md",
+  icon: n,
+  children: t,
+  className: i = "",
+  ...l
+}) {
+  return /* @__PURE__ */ s(
+    "span",
+    {
+      className: [
+        "inline-flex items-center gap-1.5 font-sans font-bold rounded-full whitespace-nowrap",
+        Ie[r],
+        Ae[a],
+        i
+      ].filter(Boolean).join(" "),
+      ...l,
+      children: [
+        n && /* @__PURE__ */ e("span", { className: "inline-flex shrink-0", children: n }),
+        t
+      ]
+    }
+  );
+}
+const Pe = {
+  confirmed: "check",
+  pending: "clock",
+  cancelled: "close",
+  completed: "check",
+  info: "info"
+};
+function ne({ status: r, label: a }) {
+  return /* @__PURE__ */ e(We, { variant: r, icon: /* @__PURE__ */ e(v, { name: Pe[r], size: "sm" }), children: a });
+}
+function Oe({
+  open: r,
+  onClose: a,
+  confirmation: n,
+  onNewBooking: t
+}) {
+  const i = ee(null);
+  return I(() => {
+    const l = i.current;
+    l && (r ? l.showModal() : l.close());
+  }, [r]), I(() => {
+    const l = i.current;
+    if (!l) return;
+    const o = () => a();
+    return l.addEventListener("close", o), () => l.removeEventListener("close", o);
+  }, [a]), n ? /* @__PURE__ */ e(
+    "dialog",
+    {
+      ref: i,
+      className: [
+        "w-[90vw] max-w-md rounded-xl bg-surface shadow-elevation-5 p-0",
+        "backdrop:bg-scrim/40 backdrop:backdrop-blur-sm",
+        "animate-in fade-in slide-in-from-bottom-4"
+      ].join(" "),
+      "aria-labelledby": "confirmation-title",
+      children: /* @__PURE__ */ s("div", { className: "p-6", children: [
+        /* @__PURE__ */ e("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ e("div", { className: "w-16 h-16 rounded-full bg-success-container flex items-center justify-center", children: /* @__PURE__ */ e(v, { name: "check", size: "lg", color: "#27AE60" }) }) }),
+        /* @__PURE__ */ e(
+          d,
+          {
+            variant: "headline-sm",
+            as: "h2",
+            align: "center",
+            id: "confirmation-title",
+            className: "text-surface-on mb-1",
+            children: "¡Reserva confirmada!"
+          }
+        ),
+        /* @__PURE__ */ e(d, { variant: "body-md", align: "center", className: "text-surface-on-variant mb-4", children: "Tu cita ha sido agendada exitosamente." }),
+        /* @__PURE__ */ e("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ e(ne, { status: n.status, label: "Confirmada" }) }),
+        /* @__PURE__ */ e(A, { className: "my-4" }),
+        /* @__PURE__ */ s("div", { className: "space-y-3", children: [
+          /* @__PURE__ */ s("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ e(v, { name: "star", size: "sm", color: "#7F8C8D" }),
+            /* @__PURE__ */ s("div", { children: [
+              /* @__PURE__ */ e(d, { variant: "label-md", className: "text-surface-on-variant", children: "Servicio" }),
+              /* @__PURE__ */ e(d, { variant: "body-md", className: "text-surface-on", children: n.service.name })
+            ] })
+          ] }),
+          /* @__PURE__ */ s("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ e(v, { name: "calendar", size: "sm", color: "#7F8C8D" }),
+            /* @__PURE__ */ s("div", { children: [
+              /* @__PURE__ */ e(d, { variant: "label-md", className: "text-surface-on-variant", children: "Fecha" }),
+              /* @__PURE__ */ e(d, { variant: "body-md", className: "text-surface-on", children: new Date(n.date).toLocaleDateString("es-ES", {
+                weekday: "long",
+                day: "numeric",
+                month: "long",
+                year: "numeric"
+              }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ s("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ e(v, { name: "clock", size: "sm", color: "#7F8C8D" }),
+            /* @__PURE__ */ s("div", { children: [
+              /* @__PURE__ */ e(d, { variant: "label-md", className: "text-surface-on-variant", children: "Hora" }),
+              /* @__PURE__ */ s(d, { variant: "body-md", className: "text-surface-on", children: [
+                n.timeSlot.startTime,
+                " - ",
+                n.timeSlot.endTime
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ s("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ e(v, { name: "user", size: "sm", color: "#7F8C8D" }),
+            /* @__PURE__ */ s("div", { children: [
+              /* @__PURE__ */ e(d, { variant: "label-md", className: "text-surface-on-variant", children: "Cliente" }),
+              /* @__PURE__ */ e(d, { variant: "body-md", className: "text-surface-on", children: n.clientName }),
+              /* @__PURE__ */ e(d, { variant: "body-sm", className: "text-surface-on-variant", children: n.clientEmail })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ e(A, { className: "my-4" }),
+        /* @__PURE__ */ s(d, { variant: "body-sm", align: "center", className: "text-surface-on-variant mb-4", children: [
+          "ID de reserva: ",
+          /* @__PURE__ */ e("span", { className: "font-bold", children: n.id })
+        ] }),
+        /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ e(S, { variant: "filled", fullWidth: !0, onClick: a, children: "Cerrar" }),
+          t && /* @__PURE__ */ e(S, { variant: "tonal", fullWidth: !0, onClick: t, children: "Nueva reserva" })
+        ] })
+      ] })
+    }
+  ) : null;
+}
+function Re({
+  open: r,
+  onClose: a,
+  title: n = "Ha ocurrido un error",
+  message: t,
+  onRetry: i
+}) {
+  const l = ee(null);
+  return I(() => {
+    const o = l.current;
+    o && (r ? o.showModal() : o.close());
+  }, [r]), I(() => {
+    const o = l.current;
+    if (!o) return;
+    const c = () => a();
+    return o.addEventListener("close", c), () => o.removeEventListener("close", c);
+  }, [a]), /* @__PURE__ */ e(
+    "dialog",
+    {
+      ref: l,
+      className: [
+        "w-[90vw] max-w-sm rounded-xl bg-surface shadow-elevation-5 p-0",
+        "backdrop:bg-scrim/40 backdrop:backdrop-blur-sm"
+      ].join(" "),
+      "aria-labelledby": "error-title",
+      children: /* @__PURE__ */ s("div", { className: "p-6", children: [
+        /* @__PURE__ */ e("div", { className: "flex justify-center mb-4", children: /* @__PURE__ */ e("div", { className: "w-14 h-14 rounded-full bg-error-container flex items-center justify-center", children: /* @__PURE__ */ e(v, { name: "alert", size: "lg", color: "#C0392B" }) }) }),
+        /* @__PURE__ */ e(
+          d,
+          {
+            variant: "title-lg",
+            as: "h2",
+            align: "center",
+            id: "error-title",
+            className: "text-surface-on mb-2",
+            children: n
+          }
+        ),
+        /* @__PURE__ */ e(d, { variant: "body-md", align: "center", className: "text-surface-on-variant mb-6", children: t }),
+        /* @__PURE__ */ s("div", { className: "flex flex-col gap-2", children: [
+          i && /* @__PURE__ */ e(S, { variant: "filled", fullWidth: !0, onClick: i, children: "Reintentar" }),
+          /* @__PURE__ */ e(S, { variant: i ? "tonal" : "filled", fullWidth: !0, onClick: a, children: "Cerrar" })
+        ] })
+      ] })
+    }
+  );
+}
+const Ye = ["Servicio", "Fecha y hora", "Datos", "Confirmación"], qe = {
+  service: 0,
+  datetime: 1,
+  form: 2,
+  confirmation: 3
+};
+function Ue({
+  services: r,
+  onFetchSlots: a,
+  onSubmitBooking: n,
+  companyName: t = "ChronOwl",
+  title: i = t
+}) {
+  const [l, o] = p("service"), [c, u] = p(null), [f, y] = p(), [m, b] = p(null), [k, z] = p([]), [g, j] = p(!1), [D, x] = p(!1), [w, h] = p(null), [C, L] = p(!1), [M, B] = p(null), T = qe[l], R = N(() => {
+    l === "datetime" ? (o("service"), y(void 0), b(null), z([])) : l === "form" && o("datetime");
+  }, [l]), ie = N((F) => {
+    const H = ["service", "datetime", "form", "confirmation"];
+    F < T && o(H[F]);
+  }, [T]), se = N((F) => {
+    u(F);
+  }, []), le = N(() => {
+    c && (o("datetime"), y(void 0), b(null), z([]));
+  }, [c]), oe = N(
+    async (F) => {
+      if (y(F), b(null), !c) return;
+      const H = `${F.getFullYear()}-${String(F.getMonth() + 1).padStart(2, "0")}-${String(F.getDate()).padStart(2, "0")}`;
+      j(!0);
+      try {
+        const Y = await a(c.id, H);
+        z(Y);
+      } catch {
+        B("No se pudieron cargar los horarios. Intenta de nuevo."), z([]);
+      } finally {
+        j(!1);
+      }
+    },
+    [c, a]
+  ), ce = N((F) => {
+    b(F);
+  }, []), de = N(() => {
+    f && m && o("form");
+  }, [f, m]), me = N(
+    async (F) => {
+      if (!c || !f || !m) return;
+      const H = `${f.getFullYear()}-${String(f.getMonth() + 1).padStart(2, "0")}-${String(f.getDate()).padStart(2, "0")}`, Y = {
+        serviceId: c.id,
+        date: H,
+        timeSlotId: m.id,
+        ...F
+      };
+      x(!0);
+      try {
+        const ue = await n(Y);
+        h(ue), L(!0), o("confirmation");
+      } catch {
+        B("No se pudo completar la reserva. Por favor, intenta de nuevo.");
+      } finally {
+        x(!1);
+      }
+    },
+    [c, f, m, n]
+  ), G = N(() => {
+    o("service"), u(null), y(void 0), b(null), z([]), h(null), L(!1);
+  }, []);
+  return /* @__PURE__ */ s(q, { children: [
+    /* @__PURE__ */ e(
+      we,
+      {
+        steps: Ye,
+        currentStep: T,
+        onStepClick: ie,
+        onBack: R,
+        title: i,
+        footer: void 0,
+        children: (() => {
+          switch (l) {
+            case "service":
+              return /* @__PURE__ */ s("div", { children: [
+                /* @__PURE__ */ e(
+                  Ee,
+                  {
+                    services: r,
+                    selectedServiceId: c == null ? void 0 : c.id,
+                    onSelectService: se
+                  }
+                ),
+                c && /* @__PURE__ */ e("div", { className: "mt-6", children: /* @__PURE__ */ e(
+                  S,
+                  {
+                    variant: "filled",
+                    fullWidth: !0,
+                    size: "lg",
+                    onClick: le,
+                    icon: /* @__PURE__ */ e(v, { name: "arrow-right", size: "sm" }),
+                    iconPosition: "end",
+                    children: "Continuar"
+                  }
+                ) })
+              ] });
+            case "datetime":
+              return /* @__PURE__ */ s("div", { className: "space-y-6", children: [
+                c && /* @__PURE__ */ s("div", { className: "bg-primary-container rounded-sm px-4 py-3", children: [
+                  /* @__PURE__ */ e(d, { variant: "label-md", className: "text-primary-on-container/70", children: "Servicio seleccionado" }),
+                  /* @__PURE__ */ s(d, { variant: "title-sm", className: "text-primary-on-container", children: [
+                    c.name,
+                    " — ",
+                    c.currency,
+                    c.price
+                  ] })
+                ] }),
+                /* @__PURE__ */ e(
+                  je,
+                  {
+                    selectedDate: f,
+                    onSelectDate: oe
+                  }
+                ),
+                f && /* @__PURE__ */ s(q, { children: [
+                  /* @__PURE__ */ e(A, {}),
+                  g ? /* @__PURE__ */ e(K, { message: "Buscando horarios...", size: "sm" }) : /* @__PURE__ */ e(
+                    De,
+                    {
+                      slots: k,
+                      selectedSlotId: m == null ? void 0 : m.id,
+                      onSelectSlot: ce,
+                      columns: 4
+                    }
+                  )
+                ] }),
+                m && /* @__PURE__ */ e("div", { className: "mt-4", children: /* @__PURE__ */ e(
+                  S,
+                  {
+                    variant: "filled",
+                    fullWidth: !0,
+                    size: "lg",
+                    onClick: de,
+                    icon: /* @__PURE__ */ e(v, { name: "arrow-right", size: "sm" }),
+                    iconPosition: "end",
+                    children: "Continuar"
+                  }
+                ) })
+              ] });
+            case "form":
+              return /* @__PURE__ */ s("div", { className: "space-y-4", children: [
+                c && f && m && /* @__PURE__ */ s("div", { className: "bg-primary-container rounded-sm px-4 py-3 space-y-1", children: [
+                  /* @__PURE__ */ e(d, { variant: "label-md", className: "text-primary-on-container/70", children: "Resumen de tu reserva" }),
+                  /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ e(v, { name: "star", size: "sm", color: "#2C3E50" }),
+                    /* @__PURE__ */ e(d, { variant: "body-sm", className: "text-primary-on-container", children: c.name })
+                  ] }),
+                  /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ e(v, { name: "calendar", size: "sm", color: "#2C3E50" }),
+                    /* @__PURE__ */ e(d, { variant: "body-sm", className: "text-primary-on-container", children: f.toLocaleDateString("es-ES", {
+                      weekday: "short",
+                      day: "numeric",
+                      month: "short"
+                    }) })
+                  ] }),
+                  /* @__PURE__ */ s("div", { className: "flex items-center gap-2", children: [
+                    /* @__PURE__ */ e(v, { name: "clock", size: "sm", color: "#2C3E50" }),
+                    /* @__PURE__ */ s(d, { variant: "body-sm", className: "text-primary-on-container", children: [
+                      m.startTime,
+                      " - ",
+                      m.endTime
+                    ] })
+                  ] })
+                ] }),
+                /* @__PURE__ */ e(A, {}),
+                /* @__PURE__ */ e(He, { onSubmit: me, loading: D })
+              ] });
+            case "confirmation":
+              return /* @__PURE__ */ s("div", { className: "flex flex-col items-center justify-center py-8", children: [
+                /* @__PURE__ */ e("div", { className: "w-16 h-16 rounded-full bg-success-container flex items-center justify-center mb-4", children: /* @__PURE__ */ e(v, { name: "check", size: "lg", color: "#27AE60" }) }),
+                /* @__PURE__ */ e(d, { variant: "headline-sm", align: "center", className: "text-surface-on mb-2", children: "¡Reserva confirmada!" }),
+                /* @__PURE__ */ e(d, { variant: "body-md", align: "center", className: "text-surface-on-variant mb-6", children: "Revisa tu email para los detalles." }),
+                /* @__PURE__ */ e(S, { variant: "tonal", onClick: G, children: "Nueva reserva" })
+              ] });
+          }
+        })()
+      }
+    ),
+    /* @__PURE__ */ e(
+      Oe,
+      {
+        open: C,
+        onClose: () => L(!1),
+        confirmation: w,
+        onNewBooking: G
+      }
+    ),
+    /* @__PURE__ */ e(
+      Re,
+      {
+        open: !!M,
+        onClose: () => B(null),
+        message: M ?? "",
+        onRetry: () => B(null)
+      }
+    )
+  ] });
+}
+function tr({
+  services: r,
+  onFetchSlots: a,
+  onSubmitBooking: n,
+  theme: t = "light",
+  companyName: i,
+  className: l = ""
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: [
+        "chronowl-root w-full max-w-[480px]",
+        t === "dark" ? "chronowl-dark" : "chronowl-light",
+        l
+      ].filter(Boolean).join(" "),
+      style: { width: "100%", maxWidth: 480 },
+      "data-theme": t,
+      children: /* @__PURE__ */ e(
+        Ue,
+        {
+          services: r,
+          onFetchSlots: a,
+          onSubmitBooking: n,
+          companyName: i
+        }
+      )
+    }
+  );
+}
+function Ve({ htmlFor: r, required: a, children: n, className: t = "", ...i }) {
+  return /* @__PURE__ */ s(
+    "label",
+    {
+      htmlFor: r,
+      className: [
+        "block text-label-lg text-surface-on font-sans mb-1",
+        t
+      ].filter(Boolean).join(" "),
+      ...i,
+      children: [
+        n,
+        a && /* @__PURE__ */ e("span", { className: "text-error ml-0.5", "aria-label": "requerido", children: "*" })
+      ]
+    }
+  );
+}
+function ir({
+  label: r,
+  htmlFor: a,
+  error: n,
+  helperText: t,
+  required: i,
+  children: l
+}) {
+  return /* @__PURE__ */ s("div", { className: "mb-4 w-full", children: [
+    /* @__PURE__ */ e(Ve, { htmlFor: a, required: i, children: r }),
+    l,
+    n && /* @__PURE__ */ e(d, { variant: "body-sm", className: "mt-1 px-1 text-error", children: n }),
+    !n && t && /* @__PURE__ */ e(d, { variant: "body-sm", className: "mt-1 px-1 text-surface-on-variant", children: t })
+  ] });
+}
+function sr({
+  slots: r,
+  selectedSlotId: a,
+  onSelectSlot: n,
+  loading: t = !1
+}) {
+  return t ? /* @__PURE__ */ s("div", { className: "flex items-center justify-center py-8", children: [
+    /* @__PURE__ */ e(re, { size: "md" }),
+    /* @__PURE__ */ e(d, { variant: "body-md", className: "ml-3 text-surface-on-variant", children: "Cargando horarios..." })
+  ] }) : r.length === 0 ? /* @__PURE__ */ e(d, { variant: "body-md", className: "text-center py-8 text-surface-on-variant", children: "No hay horarios disponibles para esta fecha." }) : /* @__PURE__ */ s("div", { className: "w-full", children: [
+    /* @__PURE__ */ e(d, { variant: "title-sm", className: "mb-3 text-surface-on", children: "Selecciona un horario" }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-3 sm:grid-cols-4 gap-2", children: r.map((i) => {
+      const l = i.id === a, o = i.available;
+      return /* @__PURE__ */ e(
+        "button",
+        {
+          type: "button",
+          disabled: !o,
+          onClick: () => o && n(i),
+          "aria-pressed": l,
+          "aria-label": `${i.startTime} - ${i.endTime}${o ? "" : ", no disponible"}`,
+          className: [
+            "py-2.5 px-3 rounded-sm text-label-lg font-sans text-center",
+            "transition-all duration-medium-1 ease-standard",
+            "min-h-[44px] min-w-[44px]",
+            "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
+            l ? "bg-primary text-primary-on shadow-elevation-1" : o ? "bg-surface-variant text-surface-on hover:bg-primary-container hover:text-primary-on-container" : "bg-surface-variant text-surface-on-variant opacity-40 cursor-not-allowed"
+          ].join(" "),
+          children: i.startTime
+        },
+        i.id
+      );
+    }) })
+  ] });
+}
+function _e({ slot: r, selected: a = !1, onSelect: n }) {
+  return /* @__PURE__ */ s(
+    "button",
+    {
+      type: "button",
+      disabled: !r.available,
+      onClick: () => r.available && n(r),
+      "aria-pressed": a,
+      "aria-label": `${r.startTime} a ${r.endTime}${r.available ? "" : ", no disponible"}`,
+      className: [
+        "flex flex-col items-center justify-center py-3 px-4 rounded-sm",
+        "min-h-[56px] min-w-[44px]",
+        "transition-all duration-medium-1 ease-standard",
+        "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary",
+        a ? "bg-primary text-primary-on shadow-elevation-1" : r.available ? "bg-surface-variant text-surface-on hover:bg-primary-container hover:text-primary-on-container border border-transparent hover:border-primary/20" : "bg-surface-variant text-surface-on-variant opacity-40 cursor-not-allowed line-through"
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ e(d, { variant: "label-lg", as: "span", className: "inherit", children: r.startTime }),
+        /* @__PURE__ */ e(d, { variant: "body-sm", as: "span", className: "opacity-70", children: r.endTime })
+      ]
+    }
+  );
+}
+const Ke = U(
+  ({ icon: r, iconPosition: a = "start", ...n }, t) => /* @__PURE__ */ e(
+    $,
+    {
+      ref: t,
+      leadingIcon: a === "start" ? r : void 0,
+      trailingIcon: a === "end" ? r : void 0,
+      ...n
+    }
+  )
+);
+Ke.displayName = "InputWithIcon";
+function lr({
+  children: r,
+  orientation: a = "horizontal",
+  fullWidth: n = !1
+}) {
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: [
+        "flex gap-3",
+        a === "vertical" ? "flex-col" : "flex-row items-center",
+        n ? "w-full [&>*]:flex-1" : ""
+      ].filter(Boolean).join(" "),
+      role: "group",
+      children: r
+    }
+  );
+}
+function or({
+  slots: r,
+  selectedSlotId: a,
+  onSelectSlot: n,
+  loading: t = !1
+}) {
+  if (t)
+    return /* @__PURE__ */ e(K, { message: "Buscando horarios disponibles..." });
+  const i = r.filter((l) => l.available);
+  return r.length === 0 || i.length === 0 ? /* @__PURE__ */ e(
+    ae,
+    {
+      icon: "clock",
+      title: "Sin horarios disponibles",
+      description: "No hay horarios disponibles para la fecha seleccionada. Intenta con otra fecha."
+    }
+  ) : /* @__PURE__ */ s("div", { className: "w-full", children: [
+    /* @__PURE__ */ s("div", { className: "flex items-center justify-between mb-3 px-1", children: [
+      /* @__PURE__ */ e(d, { variant: "title-sm", className: "text-surface-on", children: "Horarios disponibles" }),
+      /* @__PURE__ */ s(d, { variant: "label-sm", className: "text-surface-on-variant", children: [
+        i.length,
+        " disponible",
+        i.length !== 1 ? "s" : ""
+      ] })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-2", children: r.map((l) => /* @__PURE__ */ e(
+      _e,
+      {
+        slot: l,
+        selected: l.id === a,
+        onSelect: n
+      },
+      l.id
+    )) })
+  ] });
+}
+function te({ header: r, footer: a, children: n }) {
+  return /* @__PURE__ */ s("div", { className: "chronowl-widget flex flex-col w-full max-w-[480px] mx-auto min-h-[400px] max-h-[90vh] bg-surface rounded-xl shadow-elevation-3 overflow-hidden font-sans", children: [
+    r && /* @__PURE__ */ e("div", { className: "shrink-0", children: r }),
+    /* @__PURE__ */ e("main", { className: "flex-1 overflow-y-auto px-4 py-4", children: n }),
+    a && /* @__PURE__ */ e("div", { className: "shrink-0", children: a })
+  ] });
+}
+function cr({ children: r, maxWidth: a = "480px" }) {
+  return /* @__PURE__ */ e("div", { className: "flex items-center justify-center min-h-screen p-4 bg-scrim/40", children: /* @__PURE__ */ e(
+    "div",
+    {
+      className: "w-full bg-surface rounded-xl shadow-elevation-5 overflow-hidden font-sans",
+      style: { maxWidth: a },
+      children: r
+    }
+  ) });
+}
+function dr({
+  confirmation: r,
+  onNewBooking: a,
+  onClose: n,
+  companyName: t
+}) {
+  return /* @__PURE__ */ e(
+    te,
+    {
+      header: /* @__PURE__ */ e(V, { title: "ChronOwl", subtitle: "Reserva confirmada" }),
+      footer: /* @__PURE__ */ e(_, { companyName: t, poweredBy: !0 }),
+      children: /* @__PURE__ */ s("div", { className: "flex flex-col items-center py-4", children: [
+        /* @__PURE__ */ e("div", { className: "w-20 h-20 rounded-full bg-success-container flex items-center justify-center mb-5 animate-bounce", children: /* @__PURE__ */ e(v, { name: "check", size: "lg", color: "#27AE60" }) }),
+        /* @__PURE__ */ e(d, { variant: "headline-sm", align: "center", className: "text-surface-on mb-1", children: "¡Reserva confirmada!" }),
+        /* @__PURE__ */ e(d, { variant: "body-md", align: "center", className: "text-surface-on-variant mb-4", children: "Tu cita ha sido agendada exitosamente." }),
+        /* @__PURE__ */ e(ne, { status: r.status, label: "Confirmada" }),
+        /* @__PURE__ */ e(A, { className: "my-5 w-full" }),
+        /* @__PURE__ */ s("div", { className: "w-full space-y-4 bg-surface-variant rounded-md p-4", children: [
+          /* @__PURE__ */ s("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full bg-primary-container flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(v, { name: "star", size: "sm", color: "#2C3E50" }) }),
+            /* @__PURE__ */ s("div", { children: [
+              /* @__PURE__ */ e(d, { variant: "label-sm", className: "text-surface-on-variant", children: "Servicio" }),
+              /* @__PURE__ */ e(d, { variant: "body-lg", className: "text-surface-on font-bold", children: r.service.name }),
+              /* @__PURE__ */ s(d, { variant: "body-sm", className: "text-surface-on-variant", children: [
+                r.service.duration,
+                " min — ",
+                r.service.currency,
+                r.service.price
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ s("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full bg-primary-container flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(v, { name: "calendar", size: "sm", color: "#2C3E50" }) }),
+            /* @__PURE__ */ s("div", { children: [
+              /* @__PURE__ */ e(d, { variant: "label-sm", className: "text-surface-on-variant", children: "Fecha y hora" }),
+              /* @__PURE__ */ e(d, { variant: "body-lg", className: "text-surface-on font-bold", children: new Date(r.date).toLocaleDateString("es-ES", {
+                weekday: "long",
+                day: "numeric",
+                month: "long",
+                year: "numeric"
+              }) }),
+              /* @__PURE__ */ s(d, { variant: "body-sm", className: "text-surface-on-variant", children: [
+                r.timeSlot.startTime,
+                " - ",
+                r.timeSlot.endTime
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ s("div", { className: "flex items-start gap-3", children: [
+            /* @__PURE__ */ e("div", { className: "w-8 h-8 rounded-full bg-primary-container flex items-center justify-center shrink-0", children: /* @__PURE__ */ e(v, { name: "user", size: "sm", color: "#2C3E50" }) }),
+            /* @__PURE__ */ s("div", { children: [
+              /* @__PURE__ */ e(d, { variant: "label-sm", className: "text-surface-on-variant", children: "Cliente" }),
+              /* @__PURE__ */ e(d, { variant: "body-lg", className: "text-surface-on font-bold", children: r.clientName }),
+              /* @__PURE__ */ e(d, { variant: "body-sm", className: "text-surface-on-variant", children: r.clientEmail })
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ s(d, { variant: "body-sm", align: "center", className: "text-surface-on-variant mt-4", children: [
+          "ID de reserva: ",
+          /* @__PURE__ */ e("span", { className: "font-bold font-mono", children: r.id })
+        ] }),
+        /* @__PURE__ */ e(d, { variant: "body-sm", align: "center", className: "text-surface-on-variant mt-1 mb-6", children: "Te hemos enviado un email de confirmación." }),
+        /* @__PURE__ */ s("div", { className: "w-full space-y-2", children: [
+          a && /* @__PURE__ */ e(S, { variant: "filled", fullWidth: !0, size: "lg", onClick: a, children: "Nueva reserva" }),
+          n && /* @__PURE__ */ e(S, { variant: "tonal", fullWidth: !0, size: "lg", onClick: n, children: "Cerrar" })
+        ] })
+      ] })
+    }
+  );
+}
+function mr({
+  title: r = "Sin disponibilidad",
+  message: a = "No hay horarios disponibles en este momento. Por favor, intenta más tarde.",
+  onRetry: n,
+  onBack: t,
+  companyName: i
+}) {
+  return /* @__PURE__ */ e(
+    te,
+    {
+      header: /* @__PURE__ */ e(V, { title: "ChronOwl", onBack: t }),
+      footer: /* @__PURE__ */ e(_, { companyName: i, poweredBy: !0 }),
+      children: /* @__PURE__ */ s("div", { className: "flex flex-col items-center justify-center py-12 px-4", children: [
+        /* @__PURE__ */ e("div", { className: "w-20 h-20 rounded-full bg-error-container flex items-center justify-center mb-5", children: /* @__PURE__ */ e(v, { name: "alert", size: "lg", color: "#C0392B" }) }),
+        /* @__PURE__ */ e(d, { variant: "headline-sm", align: "center", className: "text-surface-on mb-2", children: r }),
+        /* @__PURE__ */ e(d, { variant: "body-md", align: "center", className: "text-surface-on-variant mb-8 max-w-xs", children: a }),
+        /* @__PURE__ */ s("div", { className: "flex items-center gap-2 mb-8 opacity-30", children: [
+          /* @__PURE__ */ e(v, { name: "calendar", size: "lg", color: "#7F8C8D" }),
+          /* @__PURE__ */ e(v, { name: "close", size: "md", color: "#C0392B" }),
+          /* @__PURE__ */ e(v, { name: "clock", size: "lg", color: "#7F8C8D" })
+        ] }),
+        /* @__PURE__ */ s("div", { className: "w-full max-w-xs space-y-3", children: [
+          n && /* @__PURE__ */ e(
+            S,
+            {
+              variant: "filled",
+              fullWidth: !0,
+              size: "lg",
+              onClick: n,
+              icon: /* @__PURE__ */ e(v, { name: "spinner", size: "sm" }),
+              iconPosition: "start",
+              children: "Reintentar"
+            }
+          ),
+          t && /* @__PURE__ */ e(
+            S,
+            {
+              variant: "tonal",
+              fullWidth: !0,
+              size: "lg",
+              onClick: t,
+              icon: /* @__PURE__ */ e(v, { name: "arrow-left", size: "sm" }),
+              iconPosition: "start",
+              children: "Volver al inicio"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+}
+const ur = {
+  // Primarios - Azul Nocturno
+  primary: "#2C3E50",
+  onPrimary: "#FFFFFF",
+  primaryContainer: "#E8F4F8",
+  onPrimaryContainer: "#2C3E50",
+  // Secundarios - Luz de Luna
+  secondary: "#E8F4F8",
+  onSecondary: "#2C3E50",
+  secondaryContainer: "#D1E8F0",
+  onSecondaryContainer: "#1A252F",
+  // Terciario - Azul Profundo
+  tertiary: "#1A252F",
+  onTertiary: "#FFFFFF",
+  tertiaryContainer: "#34495E",
+  onTertiaryContainer: "#E8F4F8",
+  // Neutral - Gris Nocturno
+  neutral: "#7F8C8D",
+  onNeutral: "#FFFFFF",
+  neutralVariant: "#BDC3C7",
+  onNeutralVariant: "#2C3E50",
+  // Surface
+  surface: "#FFFFFF",
+  onSurface: "#2C3E50",
+  surfaceVariant: "#F0F3F5",
+  onSurfaceVariant: "#7F8C8D",
+  surfaceDim: "#E0E3E5",
+  surfaceBright: "#FFFFFF",
+  surfaceContainerLowest: "#FFFFFF",
+  surfaceContainerLow: "#F8F9FA",
+  surfaceContainer: "#F0F3F5",
+  surfaceContainerHigh: "#E8EBEE",
+  surfaceContainerHighest: "#E0E3E5",
+  // Outline
+  outline: "#BDC3C7",
+  outlineVariant: "#E0E3E5",
+  // Error
+  error: "#C0392B",
+  onError: "#FFFFFF",
+  errorContainer: "#FADBD8",
+  onErrorContainer: "#78281F",
+  // Warning
+  warning: "#F39C12",
+  onWarning: "#FFFFFF",
+  warningContainer: "#FEF5E7",
+  onWarningContainer: "#7E5109",
+  // Success
+  success: "#27AE60",
+  onSuccess: "#FFFFFF",
+  successContainer: "#D5F5E3",
+  onSuccessContainer: "#1E8449",
+  // Inverse
+  inverseSurface: "#2C3E50",
+  inverseOnSurface: "#FFFFFF",
+  inversePrimary: "#A3C4D4",
+  // Overlay/Scrim
+  scrim: "#000000",
+  shadow: "#000000"
+}, hr = {
+  displayLarge: {
+    fontSize: "57px",
+    lineHeight: "64px",
+    fontWeight: 700,
+    letterSpacing: "-0.25px"
+  },
+  displayMedium: {
+    fontSize: "45px",
+    lineHeight: "52px",
+    fontWeight: 700,
+    letterSpacing: "0px"
+  },
+  displaySmall: {
+    fontSize: "36px",
+    lineHeight: "44px",
+    fontWeight: 700,
+    letterSpacing: "0px"
+  },
+  headlineLarge: {
+    fontSize: "32px",
+    lineHeight: "40px",
+    fontWeight: 700,
+    letterSpacing: "0px"
+  },
+  headlineMedium: {
+    fontSize: "28px",
+    lineHeight: "36px",
+    fontWeight: 700,
+    letterSpacing: "0px"
+  },
+  headlineSmall: {
+    fontSize: "24px",
+    lineHeight: "32px",
+    fontWeight: 700,
+    letterSpacing: "0px"
+  },
+  titleLarge: {
+    fontSize: "22px",
+    lineHeight: "28px",
+    fontWeight: 700,
+    letterSpacing: "0px"
+  },
+  titleMedium: {
+    fontSize: "18px",
+    lineHeight: "24px",
+    fontWeight: 700,
+    letterSpacing: "0.15px"
+  },
+  titleSmall: {
+    fontSize: "14px",
+    lineHeight: "20px",
+    fontWeight: 700,
+    letterSpacing: "0.1px"
+  },
+  bodyLarge: {
+    fontSize: "16px",
+    lineHeight: "24px",
+    fontWeight: 400,
+    letterSpacing: "0.15px"
+  },
+  bodyMedium: {
+    fontSize: "14px",
+    lineHeight: "20px",
+    fontWeight: 400,
+    letterSpacing: "0.25px"
+  },
+  bodySmall: {
+    fontSize: "12px",
+    lineHeight: "16px",
+    fontWeight: 400,
+    letterSpacing: "0.4px"
+  },
+  labelLarge: {
+    fontSize: "14px",
+    lineHeight: "20px",
+    fontWeight: 700,
+    letterSpacing: "0.1px"
+  },
+  labelMedium: {
+    fontSize: "12px",
+    lineHeight: "16px",
+    fontWeight: 700,
+    letterSpacing: "0.5px"
+  },
+  labelSmall: {
+    fontSize: "11px",
+    lineHeight: "16px",
+    fontWeight: 700,
+    letterSpacing: "0.5px"
+  }
+}, fr = "'Inter', 'Roboto', system-ui, sans-serif", vr = {
+  size0: "0px",
+  size1: "4px",
+  size2: "8px",
+  size3: "12px",
+  size4: "16px",
+  size5: "24px",
+  size6: "32px",
+  size7: "40px",
+  size8: "48px"
+}, pr = {
+  size0: 0,
+  size1: 4,
+  size2: 8,
+  size3: 12,
+  size4: 16,
+  size5: 24,
+  size6: 32,
+  size7: 40,
+  size8: 48
+}, gr = {
+  level0: "none",
+  level1: "0 1px 3px rgba(44, 62, 80, 0.12)",
+  level2: "0 3px 6px rgba(44, 62, 80, 0.16)",
+  level3: "0 6px 10px rgba(44, 62, 80, 0.2)",
+  level4: "0 8px 16px rgba(44, 62, 80, 0.24)",
+  level5: "0 12px 28px rgba(44, 62, 80, 0.3)"
+}, Ge = {
+  short1: "50ms",
+  short2: "100ms",
+  medium1: "200ms",
+  medium2: "300ms",
+  long1: "400ms",
+  long2: "500ms"
+}, Je = {
+  standard: "cubic-bezier(0.2, 0, 0, 1)",
+  emphasized: "cubic-bezier(0.2, 0, 0, 1)",
+  decelerate: "cubic-bezier(0.05, 0.7, 0.1, 1)",
+  accelerate: "cubic-bezier(0.3, 0, 0.8, 0.15)"
+}, br = { duration: Ge, easing: Je }, xr = {
+  extraSmall: "4px",
+  small: "8px",
+  medium: "12px",
+  large: "16px",
+  extraLarge: "28px",
+  full: "999px"
+}, W = {
+  services: (r) => `/api/services/${r}`,
+  availability: (r, a, n) => `/api/availability/${r}/${a}/${n}`,
+  bookings: "/api/bookings",
+  bookingDetail: (r, a) => `/api/bookings/${r}/${a}`,
+  cancelBooking: (r, a) => `/api/bookings/${r}/${a}/cancel`
+}, Qe = "", Xe = 3e4;
+let E = {
+  baseUrl: Qe,
+  saasId: ""
+};
+function yr(r) {
+  if (r.baseUrl !== void 0) {
+    const a = r.baseUrl;
+    a && !a.startsWith("https://") && !a.includes("localhost") && !a.includes("127.0.0.1") && console.warn("[ChronOwl] La URL del API no usa HTTPS. Las API keys se enviarán en texto plano.");
+  }
+  E = { ...E, ...r };
+}
+async function P(r, a) {
+  if (!E.baseUrl)
+    throw new Error('[ChronOwl] API URL no configurada. Llama a configureApi({ baseUrl: "..." }) primero.');
+  const n = `${E.baseUrl}${r}`, t = {
+    "Content-Type": "application/json"
+  };
+  E.apiKey && (t["x-api-key"] = E.apiKey);
+  const i = new AbortController(), l = setTimeout(() => i.abort(), Xe);
+  try {
+    const o = await fetch(n, {
+      ...a,
+      headers: { ...t, ...a == null ? void 0 : a.headers },
+      signal: i.signal
+    }), c = await o.json();
+    if (!o.ok || !c.success)
+      throw new Error(c.error || `Error ${o.status}`);
+    return c.data;
+  } catch (o) {
+    throw o.name === "AbortError" ? new Error("La solicitud tardó demasiado. Intenta de nuevo.") : o;
+  } finally {
+    clearTimeout(l);
+  }
+}
+const O = {
+  async getServices(r) {
+    const a = r || E.saasId;
+    return P(W.services(a));
+  },
+  async getAvailability(r, a, n) {
+    const t = n || E.saasId;
+    return P(W.availability(t, r, a));
+  },
+  async createBooking(r) {
+    return P(W.bookings, {
+      method: "POST",
+      body: JSON.stringify({ ...r, saasId: r.saasId || E.saasId })
+    });
+  },
+  async cancelBooking(r, a) {
+    const n = a || E.saasId;
+    return P(W.cancelBooking(n, r), {
+      method: "PATCH"
+    });
+  }
+};
+function Nr(r) {
+  const [a, n] = p([]), [t, i] = p(!0), [l, o] = p(null), c = N(async () => {
+    i(!0), o(null);
+    try {
+      const u = await O.getServices(r);
+      n(u);
+    } catch (u) {
+      o(u instanceof Error ? u.message : "Error al cargar servicios");
+    } finally {
+      i(!1);
+    }
+  }, [r]);
+  return I(() => {
+    r && c();
+  }, [r, c]), { services: a, loading: t, error: l, refetch: c };
+}
+function wr(r) {
+  const [a, n] = p([]), [t, i] = p(!1), [l, o] = p(null), c = N(
+    async (f, y) => {
+      i(!0), o(null);
+      try {
+        const m = $e(y), b = await O.getAvailability(f, m, r);
+        n(b);
+      } catch (m) {
+        o(m instanceof Error ? m.message : "Error al cargar horarios"), n([]);
+      } finally {
+        i(!1);
+      }
+    },
+    [r]
+  ), u = N(() => {
+    n([]), o(null);
+  }, []);
+  return { slots: a, loading: t, error: l, fetchSlots: c, clearSlots: u };
+}
+function Sr(r) {
+  const [a, n] = p(null), [t, i] = p(!1), [l, o] = p(null), c = N(
+    async (y) => {
+      i(!0), o(null);
+      try {
+        const m = await O.createBooking({ ...y, saasId: r });
+        return n(m), m;
+      } catch (m) {
+        const b = m instanceof Error ? m.message : "Error al crear reserva";
+        return o(b), null;
+      } finally {
+        i(!1);
+      }
+    },
+    [r]
+  ), u = N(
+    async (y) => {
+      i(!0), o(null);
+      try {
+        await O.cancelBooking(y, r), n(null);
+      } catch (m) {
+        o(m instanceof Error ? m.message : "Error al cancelar reserva");
+      } finally {
+        i(!1);
+      }
+    },
+    [r]
+  ), f = N(() => {
+    n(null), o(null);
+  }, []);
+  return { booking: a, loading: t, error: l, createBooking: c, cancelBooking: u, reset: f };
+}
+function Cr({
+  initialValues: r,
+  validationRules: a = {},
+  onSubmit: n
+}) {
+  const [t, i] = p(r), [l, o] = p({}), [c, u] = p({}), [f, y] = p(!1), m = N(
+    (x, w) => {
+      const h = a[x];
+      if (h) return h(w, t);
+    },
+    [a, t]
+  ), b = N(() => {
+    const x = {};
+    let w = !0;
+    for (const h of Object.keys(t)) {
+      const C = m(h, t[h]);
+      C && (x[h] = C, w = !1);
+    }
+    return o(x), w;
+  }, [t, m]), k = N(
+    (x, w) => {
+      if (i((h) => ({ ...h, [x]: w })), c[x]) {
+        const h = m(x, w);
+        o((C) => ({ ...C, [x]: h }));
+      }
+    },
+    [c, m]
+  ), z = N(
+    (x) => {
+      u((h) => ({ ...h, [x]: !0 }));
+      const w = m(x, t[x]);
+      o((h) => ({ ...h, [x]: w }));
+    },
+    [t, m]
+  ), g = N(async () => {
+    const x = {};
+    for (const w of Object.keys(t))
+      x[w] = !0;
+    if (u(x), !!b()) {
+      y(!0);
+      try {
+        await n(t);
+      } finally {
+        y(!1);
+      }
+    }
+  }, [t, b, n]), j = N(() => {
+    i(r), o({}), u({});
+  }, [r]), D = Object.values(l).every((x) => !x);
+  return { values: t, errors: l, touched: c, isValid: D, isSubmitting: f, handleChange: k, handleBlur: z, handleSubmit: g, reset: j };
+}
+function zr(...r) {
+  return r.filter(Boolean).join(" ");
+}
+function Fr(r, a = "$") {
+  return `${a}${r.toLocaleString()}`;
+}
+function kr(r) {
+  if (r < 60) return `${r} min`;
+  const a = Math.floor(r / 60), n = r % 60;
+  return n > 0 ? `${a}h ${n}min` : `${a}h`;
+}
+const Er = ["Servicio", "Fecha y hora", "Datos", "Confirmación"], Lr = {
+  xs: 320,
+  sm: 480,
+  md: 768,
+  lg: 1024,
+  xl: 1200
+}, Mr = {
+  es: {
+    steps: ["Servicio", "Fecha y hora", "Datos", "Confirmación"],
+    selectService: "Selecciona un servicio",
+    selectDate: "Selecciona una fecha",
+    selectTime: "Selecciona un horario",
+    yourData: "Tus datos",
+    confirm: "Confirmar reserva",
+    continue: "Continuar",
+    back: "Volver",
+    close: "Cerrar",
+    newBooking: "Nueva reserva",
+    loading: "Cargando...",
+    noSlots: "No hay horarios disponibles",
+    noServices: "No hay servicios disponibles",
+    bookingConfirmed: "Reserva confirmada",
+    bookingError: "Error al crear la reserva",
+    required: "Este campo es requerido",
+    invalidEmail: "Email no válido",
+    poweredBy: "Powered by ChronOwl"
+  },
+  en: {
+    steps: ["Service", "Date & Time", "Details", "Confirmation"],
+    selectService: "Select a service",
+    selectDate: "Select a date",
+    selectTime: "Select a time slot",
+    yourData: "Your details",
+    confirm: "Confirm booking",
+    continue: "Continue",
+    back: "Back",
+    close: "Close",
+    newBooking: "New booking",
+    loading: "Loading...",
+    noSlots: "No available time slots",
+    noServices: "No services available",
+    bookingConfirmed: "Booking confirmed",
+    bookingError: "Error creating booking",
+    required: "This field is required",
+    invalidEmail: "Invalid email",
+    poweredBy: "Powered by ChronOwl"
+  }
+};
+export {
+  W as API_ENDPOINTS,
+  or as AvailabilityGrid,
+  _e as AvailabilitySlot,
+  Er as BOOKING_STEPS,
+  Lr as BREAKPOINTS,
+  We as Badge,
+  He as BookingForm,
+  Ue as BookingPage,
+  we as BookingPageTemplate,
+  S as Button,
+  lr as ButtonGroup,
+  je as Calendar,
+  ze as Card,
+  cr as CenteredLayout,
+  tr as ChronOwlWidget,
+  ne as ConfirmationBadge,
+  Oe as ConfirmationModal,
+  dr as ConfirmationPage,
+  Me as DateSelector,
+  A as Divider,
+  ae as EmptyState,
+  Re as ErrorModal,
+  mr as ErrorPage,
+  _ as Footer,
+  ir as FormGroup,
+  V as Header,
+  v as Icon,
+  $ as Input,
+  Ke as InputWithIcon,
+  Mr as LOCALE,
+  Ve as Label,
+  K as LoadingState,
+  te as MainLayout,
+  Fe as ServiceCard,
+  Ee as ServiceList,
+  re as Spinner,
+  Ne as Stepper,
+  sr as TimeSelector,
+  De as TimeSlotSelector,
+  d as Typography,
+  O as chronowlApi,
+  zr as cn,
+  ur as colors,
+  yr as configureApi,
+  xr as corners,
+  $e as dateToString,
+  tr as default,
+  Ge as duration,
+  Je as easing,
+  gr as elevation,
+  fr as fontFamily,
+  Fr as formatCurrency,
+  ar as formatDate,
+  nr as formatDateShort,
+  kr as formatDuration,
+  br as motion,
+  vr as spacing,
+  pr as spacingValues,
+  hr as typescale,
+  wr as useAvailability,
+  Sr as useBooking,
+  Cr as useForm,
+  Nr as useServices
+};