@glatam/calendar-ui 1.0.4 → 1.0.6

package/dist/glatam-calendar.js

@@ -1,9 +1,9 @@
-import { css as E, LitElement as O, html as d } from "lit";
-import { property as s, customElement as T, state as u } from "lit/decorators.js";
-import { isTimeBlocked as I, formatISODate as _, generateMonthDays as A, generateWeekDays as j } from "@glatam/calendar-core";
-import { formatISODate as nt, isTimeBlocked as dt, parseISODate as ct } from "@glatam/calendar-core";
-import { classMap as N } from "lit/directives/class-map.js";
-const P = E`
+import { css as M, LitElement as T, html as c } from "lit";
+import { property as l, customElement as O, state as m } from "lit/decorators.js";
+import { formatISODate as z, parseISODate as P, isTimeBlocked as _, generateMonthDays as Y, generateWeekDays as L } from "@glatam/calendar-core";
+import { formatISODate as yt, isTimeBlocked as xt, parseISODate as wt } from "@glatam/calendar-core";
+import { classMap as A } from "lit/directives/class-map.js";
+const q = M`
   :host {
     /* Fonts */
     --glatam-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
@@ -91,7 +91,7 @@ const P = E`
     --glatam-padding: 24px;
     font-size: 1.1rem;
   }
-`, W = E`
+`, G = M`
   :host {
     display: grid;
     min-width: 0;
@@ -348,9 +348,9 @@ const P = E`
     }
   }
 `;
-function C(e, t, a) {
+function B(e, t, a) {
   if (t === a) return 0;
-  const i = (r, l) => {
+  const r = (i, s) => {
     const o = {
       year: "numeric",
       month: "numeric",
@@ -360,55 +360,71 @@ function C(e, t, a) {
       second: "numeric",
       hour12: !1
     };
-    l !== "local" && (o.timeZone = l);
-    const n = new Intl.DateTimeFormat("en-US", o).formatToParts(r), c = new Map(n.map(($) => [$.type, $.value])), m = Number(c.get("hour")), y = m === 24 ? 0 : m;
+    s !== "local" && (o.timeZone = s);
+    const n = new Intl.DateTimeFormat("en-US", o).formatToParts(i), d = new Map(n.map((f) => [f.type, f.value])), h = Number(d.get("hour")), y = h === 24 ? 0 : h;
     return new Date(
-      Number(c.get("year")),
-      Number(c.get("month")) - 1,
-      Number(c.get("day")),
+      Number(d.get("year")),
+      Number(d.get("month")) - 1,
+      Number(d.get("day")),
       y,
-      Number(c.get("minute")),
-      Number(c.get("second"))
+      Number(d.get("minute")),
+      Number(d.get("second"))
     );
   };
   try {
-    const r = i(e, t);
-    return (i(e, a).getTime() - r.getTime()) / (60 * 1e3);
+    const i = r(e, t);
+    return (r(e, a).getTime() - i.getTime()) / (60 * 1e3);
   } catch {
     return 0;
   }
 }
-function U(e, t) {
+function H(e, t) {
   if (t === 0)
     return { start: e.start, end: e.end, dayShift: 0 };
-  const a = (c) => {
-    const [m, y] = c.split(":").map(Number);
-    return m * 60 + y;
-  }, i = (c) => {
-    let m = c % 1440;
-    m < 0 && (m += 1440);
-    const y = String(Math.floor(m / 60)).padStart(2, "0"), $ = String(m % 60).padStart(2, "0");
-    return `${y}:${$}`;
-  }, r = a(e.start), l = a(e.end), o = r + t, p = l + t;
+  const a = (d) => {
+    const [h, y] = d.split(":").map(Number);
+    return h * 60 + y;
+  }, r = (d) => {
+    let h = d % 1440;
+    h < 0 && (h += 1440);
+    const y = String(Math.floor(h / 60)).padStart(2, "0"), f = String(h % 60).padStart(2, "0");
+    return `${y}:${f}`;
+  }, i = a(e.start), s = a(e.end), o = i + t, u = s + t;
   let n = 0;
   return o < 0 ? n = -1 : o >= 1440 && (n = 1), {
-    start: i(o),
-    end: i(p),
+    start: r(o),
+    end: r(u),
     dayShift: n
   };
 }
-var L = Object.defineProperty, F = Object.getOwnPropertyDescriptor, D = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? F(t, a) : t, l = e.length - 1, o; l >= 0; l--)
-    (o = e[l]) && (r = (i ? o(t, a, r) : o(r)) || r);
-  return i && r && L(t, a, r), r;
+function V(e, t, a) {
+  let r = null;
+  return { updatedRules: e.map((s) => {
+    if (s.id !== t) return s;
+    r = s;
+    const o = s.exceptions || [], u = o.includes(a) ? o : [...o, a];
+    return {
+      ...s,
+      exceptions: u
+    };
+  }), targetRule: r };
+}
+function F(e, t) {
+  const a = e.find((i) => i.id === t) || null;
+  return { updatedRules: e.filter((i) => i.id !== t), targetRule: a };
+}
+var X = Object.defineProperty, Z = Object.getOwnPropertyDescriptor, $ = (e, t, a, r) => {
+  for (var i = r > 1 ? void 0 : r ? Z(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (i = (r ? o(t, a, i) : o(i)) || i);
+  return r && i && X(t, a, i), i;
 };
-let f = class extends O {
+let w = class extends T {
   constructor() {
     super(...arguments), this.days = [], this.locale = "es", this.startOfWeekDay = 0, this.selectedDates = [], this.role = "provider", this.size = "medium", this.minDate = "", this.maxDate = "", this.showNeighboringMonth = !0, this.tileClassName = null;
   }
   getWeekdayNames() {
     const e = [], t = new Date(2026, 6, 12 + this.startOfWeekDay), a = new Intl.DateTimeFormat(this.locale, { weekday: "short" });
-    for (let i = 0; i < 7; i++)
+    for (let r = 0; r < 7; r++)
       e.push(a.format(t)), t.setDate(t.getDate() + 1);
     return e;
   }
@@ -422,23 +438,23 @@ let f = class extends O {
   }
   render() {
     const e = this.getWeekdayNames();
-    return d`
-      ${e.map((t) => d`<div class="weekday">${t}</div>`)}
+    return c`
+      ${e.map((t) => c`<div class="weekday">${t}</div>`)}
       
       ${this.days.map((t) => {
-      var p;
+      var u;
       if (!t.isCurrentMonth && !this.showNeighboringMonth)
-        return d`<div class="day-cell empty"></div>`;
-      const a = t.dateString === (/* @__PURE__ */ new Date()).toISOString().split("T")[0], i = this.selectedDates.includes(t.dateString), r = t.slots.filter((n) => n.isBlocked), l = this.minDate && t.dateString < this.minDate || this.maxDate && t.dateString > this.maxDate, o = this.tileClassName ? this.tileClassName({ date: t.date, dateString: t.dateString }) : "";
-      return d`
+        return c`<div class="day-cell empty"></div>`;
+      const a = t.dateString === z(/* @__PURE__ */ new Date()), r = this.selectedDates.includes(t.dateString), i = t.slots.filter((n) => n.isBlocked), s = this.minDate && t.dateString < this.minDate || this.maxDate && t.dateString > this.maxDate, o = this.tileClassName ? this.tileClassName({ date: t.date, dateString: t.dateString }) : "";
+      return c`
           <div 
-            class=${N({
+            class=${A({
         "day-cell": !0,
         padding: !t.isCurrentMonth,
         blocked: t.isBlocked,
         today: a,
-        selected: i,
-        disabled: !!l,
+        selected: r,
+        disabled: !!s,
         [o]: !!o
       })}
             part="day-cell ${o}"
@@ -447,15 +463,15 @@ let f = class extends O {
             <div class="day-number">${t.dayNumber}</div>
             
             <div class="slot-indicator">
-              ${t.isBlocked ? d`<div class="badge blocked-day">${((p = t.rule) == null ? void 0 : p.description) || "Bloqueado"}</div>` : r.slice(0, 2).map((n) => {
-        var c, m;
-        return d`
-                    <div class="badge blocked-slot" title=${((c = n.rule) == null ? void 0 : c.description) || ""}>
-                      🚫 ${((m = n.rule) == null ? void 0 : m.description) || n.start}
+              ${t.isBlocked ? c`<div class="badge blocked-day">${((u = t.rule) == null ? void 0 : u.description) || "Bloqueado"}</div>` : i.slice(0, 2).map((n) => {
+        var d, h;
+        return c`
+                    <div class="badge blocked-slot" title=${((d = n.rule) == null ? void 0 : d.description) || ""}>
+                      🚫 ${((h = n.rule) == null ? void 0 : h.description) || n.start}
                     </div>
                   `;
       })}
-              ${!t.isBlocked && r.length > 2 ? d`<div style="text-align: center; font-size: 0.65rem; color: var(--glatam-text-secondary);">+${r.length - 2} tareas</div>` : ""}
+              ${!t.isBlocked && i.length > 2 ? c`<div style="text-align: center; font-size: 0.65rem; color: var(--glatam-text-secondary);">+${i.length - 2} tareas</div>` : ""}
             </div>
           </div>
         `;
@@ -463,7 +479,7 @@ let f = class extends O {
     `;
   }
 };
-f.styles = E`
+w.styles = M`
     :host { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; width: 100%; }
     .weekday { font-size: 0.75rem; font-weight: 600; color: var(--glatam-text-secondary); text-transform: uppercase; text-align: center; padding: 8px 0; letter-spacing: 0.05em; }
     .day-cell {
@@ -496,55 +512,55 @@ f.styles = E`
       .day-number { margin-bottom: 0; font-size: 0.8rem; }
     }
   `;
-D([
-  s({ type: Array })
-], f.prototype, "days", 2);
-D([
-  s({ type: String })
-], f.prototype, "locale", 2);
-D([
-  s({ type: Number })
-], f.prototype, "startOfWeekDay", 2);
-D([
-  s({ type: Array })
-], f.prototype, "selectedDates", 2);
-D([
-  s({ type: String })
-], f.prototype, "role", 2);
-D([
-  s({ type: String, reflect: !0 })
-], f.prototype, "size", 2);
-D([
-  s({ type: String })
-], f.prototype, "minDate", 2);
-D([
-  s({ type: String })
-], f.prototype, "maxDate", 2);
-D([
-  s({ type: Boolean })
-], f.prototype, "showNeighboringMonth", 2);
-D([
-  s({ attribute: !1 })
-], f.prototype, "tileClassName", 2);
-f = D([
-  T("glatam-calendar-month-view")
-], f);
-var H = Object.defineProperty, q = Object.getOwnPropertyDescriptor, R = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? q(t, a) : t, l = e.length - 1, o; l >= 0; l--)
-    (o = e[l]) && (r = (i ? o(t, a, r) : o(r)) || r);
-  return i && r && H(t, a, r), r;
+$([
+  l({ type: Array })
+], w.prototype, "days", 2);
+$([
+  l({ type: String })
+], w.prototype, "locale", 2);
+$([
+  l({ type: Number })
+], w.prototype, "startOfWeekDay", 2);
+$([
+  l({ type: Array })
+], w.prototype, "selectedDates", 2);
+$([
+  l({ type: String })
+], w.prototype, "role", 2);
+$([
+  l({ type: String, reflect: !0 })
+], w.prototype, "size", 2);
+$([
+  l({ type: String })
+], w.prototype, "minDate", 2);
+$([
+  l({ type: String })
+], w.prototype, "maxDate", 2);
+$([
+  l({ type: Boolean })
+], w.prototype, "showNeighboringMonth", 2);
+$([
+  l({ attribute: !1 })
+], w.prototype, "tileClassName", 2);
+w = $([
+  O("glatam-calendar-month-view")
+], w);
+var J = Object.defineProperty, K = Object.getOwnPropertyDescriptor, k = (e, t, a, r) => {
+  for (var i = r > 1 ? void 0 : r ? K(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (i = (r ? o(t, a, i) : o(i)) || i);
+  return r && i && J(t, a, i), i;
 };
-let w = class extends O {
+let x = class extends T {
   constructor() {
-    super(...arguments), this.days = [], this.slots = [], this.locale = "es", this.selectedRange = null, this.role = "provider", this.isDragging = !1, this.dragDayIndex = null, this.dragStartSlotIndex = null, this.dragEndSlotIndex = null, this.handleMouseUp = () => {
+    super(...arguments), this.days = [], this.slots = [], this.locale = "es", this.selectedRange = null, this.role = "provider", this.minDate = "", this.maxDate = "", this.isDragging = !1, this.dragDayIndex = null, this.dragStartSlotIndex = null, this.dragEndSlotIndex = null, this.handleMouseUp = () => {
       if (!this.isDragging || this.dragDayIndex === null || this.dragStartSlotIndex === null || this.dragEndSlotIndex === null) {
         this.isDragging = !1;
         return;
       }
       this.isDragging = !1;
-      const e = Math.min(this.dragStartSlotIndex, this.dragEndSlotIndex), t = Math.max(this.dragStartSlotIndex, this.dragEndSlotIndex), a = this.days[this.dragDayIndex], i = a.slots.slice(e, t + 1);
-      i.some((r) => r.isBlocked) || this.dispatchEvent(new CustomEvent("range-select", {
-        detail: { dateString: a.dateString, start: i[0].start, end: i[i.length - 1].end },
+      const e = Math.min(this.dragStartSlotIndex, this.dragEndSlotIndex), t = Math.max(this.dragStartSlotIndex, this.dragEndSlotIndex), a = this.days[this.dragDayIndex], r = a.slots.slice(e, t + 1);
+      r.some((i) => i.isBlocked) || this.dispatchEvent(new CustomEvent("range-select", {
+        detail: { dateString: a.dateString, start: r[0].start, end: r[r.length - 1].end },
         bubbles: !0,
         composed: !0
       })), this.dragDayIndex = null, this.dragStartSlotIndex = null, this.dragEndSlotIndex = null;
@@ -557,16 +573,20 @@ let w = class extends O {
     window.removeEventListener("mouseup", this.handleMouseUp), super.disconnectedCallback();
   }
   handleMouseDown(e, t, a) {
-    if (a) {
-      if (this.role === "buyer") return;
-      this.dispatchEvent(new CustomEvent("slot-click", {
-        detail: { dateString: this.days[e].dateString, slot: this.days[e].slots[t], isBlocked: !0 },
-        bubbles: !0,
-        composed: !0
-      }));
-      return;
+    var s;
+    const r = (s = this.days[e]) == null ? void 0 : s.dateString;
+    if (!(this.minDate && r < this.minDate || this.maxDate && r > this.maxDate)) {
+      if (a) {
+        if (this.role === "buyer") return;
+        this.dispatchEvent(new CustomEvent("slot-click", {
+          detail: { dateString: this.days[e].dateString, slot: this.days[e].slots[t], isBlocked: !0 },
+          bubbles: !0,
+          composed: !0
+        }));
+        return;
+      }
+      this.isDragging = !0, this.dragDayIndex = e, this.dragStartSlotIndex = t, this.dragEndSlotIndex = t;
     }
-    this.isDragging = !0, this.dragDayIndex = e, this.dragStartSlotIndex = t, this.dragEndSlotIndex = t;
   }
   handleMouseEnter(e, t, a) {
     this.isDragging && e === this.dragDayIndex && !a && (this.dragEndSlotIndex = t);
@@ -576,43 +596,44 @@ let w = class extends O {
   }
   isSlotDragSelecting(e, t) {
     if (!this.isDragging || e !== this.dragDayIndex) return !1;
-    const a = Math.min(this.dragStartSlotIndex, this.dragEndSlotIndex), i = Math.max(this.dragStartSlotIndex, this.dragEndSlotIndex);
-    return t >= a && t <= i;
+    const a = Math.min(this.dragStartSlotIndex, this.dragEndSlotIndex), r = Math.max(this.dragStartSlotIndex, this.dragEndSlotIndex);
+    return t >= a && t <= r;
   }
   render() {
-    const e = (/* @__PURE__ */ new Date()).toISOString().split("T")[0];
-    return d`
+    const e = z(/* @__PURE__ */ new Date());
+    return c`
       <div class="time-col">
         <div class="header-cell">Hora</div>
-        ${this.slots.map((t) => d`<div class="slot-cell time-slot-label">${t.start}</div>`)}
+        ${this.slots.map((t) => c`<div class="slot-cell time-slot-label">${t.start}</div>`)}
       </div>
 
       ${this.days.map((t, a) => {
-      const i = t.dateString === e, r = new Intl.DateTimeFormat(this.locale, { weekday: "short" }).format(t.date);
-      return d`
+      const r = t.dateString === e, i = new Intl.DateTimeFormat(this.locale, { weekday: "short" }).format(t.date), s = this.minDate && t.dateString < this.minDate || this.maxDate && t.dateString > this.maxDate;
+      return c`
           <div class="day-col">
-            <div class="header-cell ${i ? "today" : ""}">
-              <div>${r}</div>
+            <div class="header-cell ${r ? "today" : ""}">
+              <div>${i}</div>
               <div class="day-num">${t.dayNumber}</div>
             </div>
             
-            ${t.slots.map((l, o) => {
-        var m, y;
-        const p = l.isBlocked, n = this.isSlotSelected(t.dateString, l), c = this.isSlotDragSelecting(a, o);
-        return d`
+            ${t.slots.map((o, u) => {
+        var y, f;
+        const n = o.isBlocked, d = this.isSlotSelected(t.dateString, o), h = this.isSlotDragSelecting(a, u);
+        return c`
                 <div
-                  class=${N({
+                  class=${A({
           "slot-cell": !0,
-          available: !p,
-          blocked: p,
-          selected: n,
-          "drag-selecting": c
+          available: !n && !s,
+          blocked: n,
+          selected: d,
+          "drag-selecting": h,
+          disabled: s
         })}
-                  @mousedown=${() => this.handleMouseDown(a, o, p)}
-                  @mouseenter=${() => this.handleMouseEnter(a, o, p)}
-                  title=${p && ((m = l.rule) != null && m.description) ? l.rule.description : ""}
+                  @mousedown=${() => this.handleMouseDown(a, u, n)}
+                  @mouseenter=${() => this.handleMouseEnter(a, u, n)}
+                  title=${n && ((y = o.rule) != null && y.description) ? o.rule.description : ""}
                 >
-                  ${p ? ((y = l.rule) == null ? void 0 : y.description) || "Ocupado" : n ? "Reservado" : ""}
+                  ${n ? ((f = o.rule) == null ? void 0 : f.description) || "Ocupado" : d ? "Reservado" : ""}
                 </div>
               `;
       })}
@@ -622,7 +643,7 @@ let w = class extends O {
     `;
   }
 };
-w.styles = E`
+x.styles = M`
     :host {
       display: grid; grid-template-columns: var(--glatam-time-col-width) repeat(7, 1fr); gap: 2px;
       width: 100%; background-color: var(--glatam-border); border: 1px solid var(--glatam-border);
@@ -674,52 +695,59 @@ w.styles = E`
     }
     .slot-cell.selected { background-color: var(--glatam-selection-bg); border-left: 3px solid var(--glatam-selection-border); }
     .slot-cell.drag-selecting { background-color: var(--glatam-primary-light); }
+    .slot-cell.disabled { opacity: 0.35; cursor: not-allowed; background-color: var(--glatam-surface); pointer-events: none; }
   `;
-R([
-  s({ type: Array })
-], w.prototype, "days", 2);
-R([
-  s({ type: Array })
-], w.prototype, "slots", 2);
-R([
-  s({ type: String })
-], w.prototype, "locale", 2);
-R([
-  s({ type: Object })
-], w.prototype, "selectedRange", 2);
-R([
-  s({ type: String })
-], w.prototype, "role", 2);
-R([
-  u()
-], w.prototype, "isDragging", 2);
-R([
-  u()
-], w.prototype, "dragDayIndex", 2);
-R([
-  u()
-], w.prototype, "dragStartSlotIndex", 2);
-R([
-  u()
-], w.prototype, "dragEndSlotIndex", 2);
-w = R([
-  T("glatam-calendar-week-view")
-], w);
-var G = Object.defineProperty, V = Object.getOwnPropertyDescriptor, z = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? V(t, a) : t, l = e.length - 1, o; l >= 0; l--)
-    (o = e[l]) && (r = (i ? o(t, a, r) : o(r)) || r);
-  return i && r && G(t, a, r), r;
+k([
+  l({ type: Array })
+], x.prototype, "days", 2);
+k([
+  l({ type: Array })
+], x.prototype, "slots", 2);
+k([
+  l({ type: String })
+], x.prototype, "locale", 2);
+k([
+  l({ type: Object })
+], x.prototype, "selectedRange", 2);
+k([
+  l({ type: String })
+], x.prototype, "role", 2);
+k([
+  l({ type: String })
+], x.prototype, "minDate", 2);
+k([
+  l({ type: String })
+], x.prototype, "maxDate", 2);
+k([
+  m()
+], x.prototype, "isDragging", 2);
+k([
+  m()
+], x.prototype, "dragDayIndex", 2);
+k([
+  m()
+], x.prototype, "dragStartSlotIndex", 2);
+k([
+  m()
+], x.prototype, "dragEndSlotIndex", 2);
+x = k([
+  O("glatam-calendar-week-view")
+], x);
+var Q = Object.defineProperty, tt = Object.getOwnPropertyDescriptor, R = (e, t, a, r) => {
+  for (var i = r > 1 ? void 0 : r ? tt(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (i = (r ? o(t, a, i) : o(i)) || i);
+  return r && i && Q(t, a, i), i;
 };
-let S = class extends O {
+let S = class extends T {
   constructor() {
-    super(...arguments), this.day = null, this.slots = [], this.locale = "es", this.selectedRange = null, this.role = "provider", this.isDragging = !1, this.dragStartSlotIndex = null, this.dragEndSlotIndex = null, this.handleMouseUp = () => {
+    super(...arguments), this.day = null, this.slots = [], this.locale = "es", this.selectedRange = null, this.role = "provider", this.minDate = "", this.maxDate = "", this.isDragging = !1, this.dragStartSlotIndex = null, this.dragEndSlotIndex = null, this.handleMouseUp = () => {
       if (!this.isDragging || !this.day || this.dragStartSlotIndex === null || this.dragEndSlotIndex === null) {
         this.isDragging = !1;
         return;
       }
       this.isDragging = !1;
       const e = Math.min(this.dragStartSlotIndex, this.dragEndSlotIndex), t = Math.max(this.dragStartSlotIndex, this.dragEndSlotIndex), a = this.day.slots.slice(e, t + 1);
-      a.some((i) => i.isBlocked) || this.dispatchEvent(new CustomEvent("range-select", {
+      a.some((r) => r.isBlocked) || this.dispatchEvent(new CustomEvent("range-select", {
         detail: { dateString: this.day.dateString, start: a[0].start, end: a[a.length - 1].end },
         bubbles: !0,
         composed: !0
@@ -733,16 +761,20 @@ let S = class extends O {
     window.removeEventListener("mouseup", this.handleMouseUp), super.disconnectedCallback();
   }
   handleMouseDown(e, t) {
-    if (t && this.day) {
-      if (this.role === "buyer") return;
-      this.dispatchEvent(new CustomEvent("slot-click", {
-        detail: { dateString: this.day.dateString, slot: this.day.slots[e], isBlocked: !0 },
-        bubbles: !0,
-        composed: !0
-      }));
-      return;
+    if (!this.day) return;
+    const a = this.day.dateString;
+    if (!(this.minDate && a < this.minDate || this.maxDate && a > this.maxDate)) {
+      if (t) {
+        if (this.role === "buyer") return;
+        this.dispatchEvent(new CustomEvent("slot-click", {
+          detail: { dateString: this.day.dateString, slot: this.day.slots[e], isBlocked: !0 },
+          bubbles: !0,
+          composed: !0
+        }));
+        return;
+      }
+      this.isDragging = !0, this.dragStartSlotIndex = e, this.dragEndSlotIndex = e;
     }
-    this.isDragging = !0, this.dragStartSlotIndex = e, this.dragEndSlotIndex = e;
   }
   handleMouseEnter(e, t) {
     this.isDragging && !t && (this.dragEndSlotIndex = e);
@@ -756,36 +788,37 @@ let S = class extends O {
     return e >= t && e <= a;
   }
   render() {
-    if (!this.day) return d`<div>Cargando...</div>`;
-    const e = this.day.dateString === (/* @__PURE__ */ new Date()).toISOString().split("T")[0], t = new Intl.DateTimeFormat(this.locale, { weekday: "long", day: "numeric", month: "long" }).format(this.day.date);
-    return d`
+    if (!this.day) return c`<div>Cargando...</div>`;
+    const e = this.day.dateString === z(/* @__PURE__ */ new Date()), t = this.minDate && this.day.dateString < this.minDate || this.maxDate && this.day.dateString > this.maxDate, a = new Intl.DateTimeFormat(this.locale, { weekday: "long", day: "numeric", month: "long" }).format(this.day.date);
+    return c`
       <div class="time-col">
         <div class="header-cell">Hora</div>
-        ${this.slots.map((a) => d`<div class="slot-cell time-slot-label">${a.start}</div>`)}
+        ${this.slots.map((r) => c`<div class="slot-cell time-slot-label">${r.start}</div>`)}
       </div>
 
       <div class="day-col">
         <div class="header-cell ${e ? "today" : ""}">
-          <div style="text-transform: capitalize;">${t}</div>
+          <div style="text-transform: capitalize;">${a}</div>
         </div>
 
-        ${this.day.slots.map((a, i) => {
-      var p, n;
-      const r = a.isBlocked, l = this.isSlotSelected(a), o = this.isSlotDragSelecting(i);
-      return d`
+        ${this.day.slots.map((r, i) => {
+      var n, d;
+      const s = r.isBlocked, o = this.isSlotSelected(r), u = this.isSlotDragSelecting(i);
+      return c`
             <div
-              class=${N({
+              class=${A({
         "slot-cell": !0,
-        available: !r,
-        blocked: r,
-        selected: l,
-        "drag-selecting": o
+        available: !s && !t,
+        blocked: s,
+        selected: o,
+        "drag-selecting": u,
+        disabled: t
       })}
-              @mousedown=${() => this.handleMouseDown(i, r)}
-              @mouseenter=${() => this.handleMouseEnter(i, r)}
-              title=${r && ((p = a.rule) != null && p.description) ? a.rule.description : ""}
+              @mousedown=${() => this.handleMouseDown(i, s)}
+              @mouseenter=${() => this.handleMouseEnter(i, s)}
+              title=${s && ((n = r.rule) != null && n.description) ? r.rule.description : ""}
             >
-              ${r ? ((n = a.rule) == null ? void 0 : n.description) || "Ocupado" : l ? "Reservado" : ""}
+              ${s ? ((d = r.rule) == null ? void 0 : d.description) || "Ocupado" : o ? "Reservado" : ""}
             </div>
           `;
     })}
@@ -793,7 +826,7 @@ let S = class extends O {
     `;
   }
 };
-S.styles = E`
+S.styles = M`
     :host {
       display: grid; grid-template-columns: var(--glatam-time-col-width) 1fr; gap: 2px;
       width: 100%; background-color: var(--glatam-border); border: 1px solid var(--glatam-border);
@@ -822,35 +855,42 @@ S.styles = E`
     }
     .slot-cell.selected { background-color: var(--glatam-selection-bg); border-left: 3px solid var(--glatam-selection-border); }
     .slot-cell.drag-selecting { background-color: var(--glatam-primary-light); }
+    .slot-cell.disabled { opacity: 0.35; cursor: not-allowed; background-color: var(--glatam-surface); pointer-events: none; }
   `;
-z([
-  s({ type: Object })
+R([
+  l({ type: Object })
 ], S.prototype, "day", 2);
-z([
-  s({ type: Array })
+R([
+  l({ type: Array })
 ], S.prototype, "slots", 2);
-z([
-  s({ type: String })
+R([
+  l({ type: String })
 ], S.prototype, "locale", 2);
-z([
-  s({ type: Object })
+R([
+  l({ type: Object })
 ], S.prototype, "selectedRange", 2);
-z([
-  s({ type: String })
+R([
+  l({ type: String })
 ], S.prototype, "role", 2);
-z([
-  u()
+R([
+  l({ type: String })
+], S.prototype, "minDate", 2);
+R([
+  l({ type: String })
+], S.prototype, "maxDate", 2);
+R([
+  m()
 ], S.prototype, "isDragging", 2);
-z([
-  u()
+R([
+  m()
 ], S.prototype, "dragStartSlotIndex", 2);
-z([
-  u()
+R([
+  m()
 ], S.prototype, "dragEndSlotIndex", 2);
-S = z([
-  T("glatam-calendar-day-view")
+S = R([
+  O("glatam-calendar-day-view")
 ], S);
-const Y = E`
+const et = M`
   dialog {
     background: transparent;
     border: none;
@@ -1006,17 +1046,24 @@ const Y = E`
     background: rgba(255, 69, 58, 0.18);
   }
 `;
-var Z = Object.defineProperty, J = Object.getOwnPropertyDescriptor, k = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? J(t, a) : t, l = e.length - 1, o; l >= 0; l--)
-    (o = e[l]) && (r = (i ? o(t, a, r) : o(r)) || r);
-  return i && r && Z(t, a, r), r;
+var at = Object.defineProperty, it = Object.getOwnPropertyDescriptor, E = (e, t, a, r) => {
+  for (var i = r > 1 ? void 0 : r ? it(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (i = (r ? o(t, a, i) : o(i)) || i);
+  return r && i && at(t, a, i), i;
 };
-let x = class extends O {
+let D = class extends T {
   constructor() {
     super(...arguments), this.open = !1, this.dateString = "", this.startTime = "", this.endTime = "", this.isRange = !1, this.existingRule = null, this.description = "", this.blockAllDay = !0, this.isRecurring = !1, this.selectedDays = [];
   }
   willUpdate(e) {
-    e.has("open") && this.open && (this.existingRule ? (this.description = "Bloqueo", this.blockAllDay = !this.existingRule.slots || this.existingRule.slots.length === 0, this.isRecurring = this.existingRule.type === "weekly", this.selectedDays = this.existingRule.daysOfWeek || []) : (this.description = "", this.blockAllDay = !this.isRange, this.isRecurring = !1, this.selectedDays = [(/* @__PURE__ */ new Date(this.dateString + "T00:00:00")).getDay()]));
+    if (e.has("open") && this.open)
+      if (this.existingRule)
+        this.description = this.existingRule.description || "", this.blockAllDay = !this.existingRule.slots || this.existingRule.slots.length === 0, this.isRecurring = this.existingRule.type === "weekly", this.selectedDays = this.existingRule.daysOfWeek || [], this.existingRule.slots && this.existingRule.slots.length > 0 && (this.startTime = this.existingRule.slots[0].start, this.endTime = this.existingRule.slots[0].end);
+      else {
+        this.description = "", this.blockAllDay = !this.isRange, this.isRecurring = !1;
+        const t = P(this.dateString);
+        this.selectedDays = [t.getDay()];
+      }
   }
   updated(e) {
     var t;
@@ -1034,7 +1081,7 @@ let x = class extends O {
   }
   handleSave() {
     const e = {
-      title: this.description || "Bloqueo",
+      title: this.description.trim(),
       blockAllDay: this.blockAllDay,
       isRecurring: this.isRecurring,
       selectedDays: this.selectedDays,
@@ -1046,14 +1093,14 @@ let x = class extends O {
   }
   handleDelete() {
     this.existingRule && this.dispatchEvent(new CustomEvent("delete-rule", {
-      detail: { id: this.existingRule.id },
+      detail: { id: this.existingRule.id, dateString: this.dateString, rule: this.existingRule },
       bubbles: !0,
       composed: !0
     }));
   }
   render() {
     const e = ["D", "L", "M", "M", "J", "V", "S"], t = this.isRange ? `${this.dateString} (${this.startTime} - ${this.endTime})` : this.dateString;
-    return d`
+    return c`
       <dialog id="booking-dialog" @close=${this.handleDialogClose}>
         <div class="modal-content">
           <h3>${this.existingRule ? "Gestionar Bloqueo" : "Crear Bloqueo"}</h3>
@@ -1096,12 +1143,13 @@ let x = class extends O {
             </label>
           </div>
 
-          ${this.isRecurring ? d`
+          ${this.isRecurring ? c`
                 <div class="form-group">
                   <label>Repetir los días</label>
                   <div class="days-grid">
-                    ${[1, 2, 3, 4, 5, 6, 0].map((a) => d`
+                    ${[1, 2, 3, 4, 5, 6, 0].map((a) => c`
                       <button 
+                        type="button"
                         class="day-btn ${this.selectedDays.includes(a) ? "selected" : ""}"
                         @click=${() => this.toggleDay(a)}
                       >
@@ -1113,55 +1161,303 @@ let x = class extends O {
               ` : ""}
 
           <div class="btn-actions">
-            ${this.existingRule ? d`<button class="btn btn-danger" @click=${this.handleDelete}>Eliminar</button>` : ""}
-            <button class="btn btn-cancel" @click=${() => this.dispatchEvent(new CustomEvent("close"))}>Cancelar</button>
-            <button class="btn btn-save" @click=${this.handleSave}>Guardar</button>
+            ${this.existingRule ? c`<button type="button" class="btn btn-danger" @click=${this.handleDelete}>Eliminar</button>` : ""}
+            <button type="button" class="btn btn-cancel" @click=${() => this.dispatchEvent(new CustomEvent("close"))}>Cancelar</button>
+            <button type="button" class="btn btn-save" @click=${this.handleSave}>Guardar</button>
           </div>
         </div>
       </dialog>
     `;
   }
 };
-x.styles = Y;
-k([
-  s({ type: Boolean })
-], x.prototype, "open", 2);
-k([
-  s({ type: String })
-], x.prototype, "dateString", 2);
-k([
-  s({ type: String })
-], x.prototype, "startTime", 2);
-k([
-  s({ type: String })
-], x.prototype, "endTime", 2);
-k([
-  s({ type: Boolean })
-], x.prototype, "isRange", 2);
-k([
-  s({ type: Object })
-], x.prototype, "existingRule", 2);
-k([
-  u()
-], x.prototype, "description", 2);
-k([
-  u()
-], x.prototype, "blockAllDay", 2);
-k([
-  u()
-], x.prototype, "isRecurring", 2);
-k([
-  u()
-], x.prototype, "selectedDays", 2);
-x = k([
-  T("glatam-calendar-modal")
-], x);
-var X = Object.defineProperty, K = Object.getOwnPropertyDescriptor, h = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? K(t, a) : t, l = e.length - 1, o; l >= 0; l--)
-    (o = e[l]) && (r = (i ? o(t, a, r) : o(r)) || r);
-  return i && r && X(t, a, r), r;
+D.styles = et;
+E([
+  l({ type: Boolean })
+], D.prototype, "open", 2);
+E([
+  l({ type: String })
+], D.prototype, "dateString", 2);
+E([
+  l({ type: String })
+], D.prototype, "startTime", 2);
+E([
+  l({ type: String })
+], D.prototype, "endTime", 2);
+E([
+  l({ type: Boolean })
+], D.prototype, "isRange", 2);
+E([
+  l({ type: Object })
+], D.prototype, "existingRule", 2);
+E([
+  m()
+], D.prototype, "description", 2);
+E([
+  m()
+], D.prototype, "blockAllDay", 2);
+E([
+  m()
+], D.prototype, "isRecurring", 2);
+E([
+  m()
+], D.prototype, "selectedDays", 2);
+D = E([
+  O("glatam-calendar-modal")
+], D);
+const rt = M`
+  :host {
+    display: contents;
+    font-family: var(--glatam-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
+  }
+
+  dialog {
+    border: none;
+    border-radius: var(--glatam-border-radius, 16px);
+    padding: 0;
+    background: var(--glatam-bg, #ffffff);
+    color: var(--glatam-text, #1d1d1f);
+    max-width: 440px;
+    width: 90vw;
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
+    overflow: hidden;
+  }
+
+  dialog::backdrop {
+    background: rgba(0, 0, 0, 0.4);
+    backdrop-filter: blur(8px);
+    -webkit-backdrop-filter: blur(8px);
+  }
+
+  .confirmation-container {
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 18px;
+  }
+
+  .header {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+  }
+
+  .title {
+    font-size: 1.15rem;
+    font-weight: 600;
+    margin: 0;
+    color: var(--glatam-text, #1d1d1f);
+    line-height: 1.3;
+  }
+
+  .subtitle {
+    font-size: 0.88rem;
+    color: var(--glatam-text-secondary, #86868b);
+    margin: 0;
+    line-height: 1.4;
+  }
+
+  .rule-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 12px;
+    background: var(--glatam-surface, #f5f5f7);
+    border-radius: 8px;
+    font-size: 0.82rem;
+    font-weight: 500;
+    color: var(--glatam-text, #1d1d1f);
+  }
+
+  .options-group {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  .option-card {
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+    padding: 14px 16px;
+    border: 1.5px solid var(--glatam-border, #e5e5ea);
+    border-radius: 12px;
+    background: var(--glatam-bg, #ffffff);
+    cursor: pointer;
+    text-align: left;
+    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
+    width: 100%;
+    box-sizing: border-box;
+  }
+
+  .option-card:hover {
+    border-color: var(--glatam-primary, #5856d6);
+    background: var(--glatam-primary-light, rgba(88, 86, 214, 0.06));
+    transform: translateY(-1px);
+  }
+
+  .option-card:active {
+    transform: scale(0.99);
+  }
+
+  .option-icon {
+    font-size: 1.25rem;
+    line-height: 1;
+    margin-top: 2px;
+  }
+
+  .option-text {
+    display: flex;
+    flex-direction: column;
+    gap: 3px;
+  }
+
+  .option-title {
+    font-size: 0.92rem;
+    font-weight: 600;
+    color: var(--glatam-text, #1d1d1f);
+  }
+
+  .option-desc {
+    font-size: 0.8rem;
+    color: var(--glatam-text-secondary, #86868b);
+    line-height: 1.35;
+  }
+
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+    margin-top: 4px;
+  }
+
+  .btn-cancel {
+    padding: 10px 18px;
+    border-radius: 10px;
+    border: 1px solid var(--glatam-border, #e5e5ea);
+    background: var(--glatam-surface, #f5f5f7);
+    color: var(--glatam-text, #1d1d1f);
+    font-weight: 500;
+    font-size: 0.88rem;
+    cursor: pointer;
+    transition: background 0.15s ease;
+  }
+
+  .btn-cancel:hover {
+    background: var(--glatam-border, #e5e5ea);
+  }
+`;
+var ot = Object.defineProperty, st = Object.getOwnPropertyDescriptor, N = (e, t, a, r) => {
+  for (var i = r > 1 ? void 0 : r ? st(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (i = (r ? o(t, a, i) : o(i)) || i);
+  return r && i && ot(t, a, i), i;
+};
+let C = class extends T {
+  constructor() {
+    super(...arguments), this.open = !1, this.dateString = "", this.targetRule = null;
+  }
+  updated(e) {
+    var t;
+    if (e.has("open")) {
+      const a = (t = this.shadowRoot) == null ? void 0 : t.getElementById("series-dialog");
+      a && (this.open ? a.open || a.showModal() : a.open && a.close());
+    }
+  }
+  handleDialogClose() {
+    this.open && this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 }));
+  }
+  handleSelectOption(e) {
+    this.targetRule && this.dispatchEvent(
+      new CustomEvent("confirm-action", {
+        detail: {
+          actionType: e,
+          dateString: this.dateString,
+          targetRule: this.targetRule
+        },
+        bubbles: !0,
+        composed: !0
+      })
+    );
+  }
+  render() {
+    var t;
+    const e = ((t = this.targetRule) == null ? void 0 : t.description) || "Bloqueo recurrente";
+    return c`
+      <dialog id="series-dialog" @close=${this.handleDialogClose}>
+        <div class="confirmation-container">
+          <div class="header">
+            <h3 class="title">¿Eliminar bloqueo recurrente?</h3>
+            <p class="subtitle">
+              Este horario pertenece a una regla con patrón de repetición semanal.
+            </p>
+            <div class="rule-badge">
+              <span>📅 ${this.dateString}</span> • <span>${e}</span>
+            </div>
+          </div>
+
+          <div class="options-group">
+            <button
+              type="button"
+              class="option-card"
+              @click=${() => this.handleSelectOption("delete_instance")}
+              title="Anular la regla solo en esta fecha"
+            >
+              <span class="option-icon">🗓️</span>
+              <div class="option-text">
+                <span class="option-title">Eliminar / Liberar solo este día</span>
+                <span class="option-desc">
+                  Libera el horario exclusivamente para el ${this.dateString}. El resto de semanas continuarán bloqueadas.
+                </span>
+              </div>
+            </button>
+
+            <button
+              type="button"
+              class="option-card"
+              @click=${() => this.handleSelectOption("delete_series")}
+              title="Eliminar la regla semanal completa"
+            >
+              <span class="option-icon">🔄</span>
+              <div class="option-text">
+                <span class="option-title">Eliminar toda la serie recurrente</span>
+                <span class="option-desc">
+                  Remueve la regla semanal completa, liberando este horario para todas las semanas pasadas y futuras.
+                </span>
+              </div>
+            </button>
+          </div>
+
+          <div class="actions">
+            <button
+              type="button"
+              class="btn-cancel"
+              @click=${() => this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 }))}
+            >
+              Cancelar
+            </button>
+          </div>
+        </div>
+      </dialog>
+    `;
+  }
+};
+C.styles = rt;
+N([
+  l({ type: Boolean })
+], C.prototype, "open", 2);
+N([
+  l({ type: String })
+], C.prototype, "dateString", 2);
+N([
+  l({ type: Object })
+], C.prototype, "targetRule", 2);
+C = N([
+  O("glatam-series-confirmation-modal")
+], C);
+var lt = Object.defineProperty, nt = Object.getOwnPropertyDescriptor, p = (e, t, a, r) => {
+  for (var i = r > 1 ? void 0 : r ? nt(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (i = (r ? o(t, a, i) : o(i)) || i);
+  return r && i && lt(t, a, i), i;
 };
-const Q = [
+const dt = [
   { start: "09:00", end: "10:00" },
   { start: "10:00", end: "11:00" },
   { start: "11:00", end: "12:00" },
@@ -1172,15 +1468,15 @@ const Q = [
   { start: "16:00", end: "17:00" },
   { start: "17:00", end: "18:00" }
 ];
-let g = class extends O {
+let g = class extends T {
   constructor() {
-    super(...arguments), this.role = "provider", this.size = "medium", this.view = "month", this.locale = "es", this.startOfWeekDay = 0, this.rules = [], this.selectedDates = [], this.selectedRange = null, this.hostTimezone = "America/Bogota", this.activeTimezone = "local", this.slots = Q, this.minDate = "", this.maxDate = "", this.showNeighboringMonth = !0, this.tileClassName = null, this.activeDate = /* @__PURE__ */ new Date(), this.localRules = [], this.darkMode = !1, this.modalOpen = !1, this.modalDateString = "", this.modalStartTime = "", this.modalEndTime = "", this.modalIsRange = !1, this.modalExistingRule = null;
+    super(...arguments), this.role = "provider", this.size = "medium", this.view = "month", this.locale = "es", this.startOfWeekDay = 0, this.rules = [], this.selectedDates = [], this.selectedRange = null, this.hostTimezone = "America/Bogota", this.activeTimezone = "local", this.slots = dt, this.minDate = "", this.maxDate = "", this.showNeighboringMonth = !0, this.tileClassName = null, this.enableSeriesConfirmation = !1, this.activeDate = /* @__PURE__ */ new Date(), this.localRules = [], this.darkMode = !1, this.modalOpen = !1, this.modalDateString = "", this.modalStartTime = "", this.modalEndTime = "", this.modalIsRange = !1, this.modalExistingRule = null, this.seriesModalOpen = !1, this.seriesTargetRule = null, this.seriesTargetDateString = "";
   }
   firstUpdated() {
     this.darkMode = window.matchMedia("(prefers-color-scheme: dark)").matches, this.localRules = [...this.rules];
   }
   willUpdate(e) {
-    e.has("rules") && (this.localRules = [...this.rules || []]);
+    e.has("rules") && this.rules !== this.localRules && (this.localRules = [...this.rules || []]);
   }
   updated(e) {
     e.has("darkMode") && this.classList.toggle("dark-mode", this.darkMode);
@@ -1199,65 +1495,85 @@ let g = class extends O {
   }
   handleDaySelect(e) {
     const { dateString: t, isBlocked: a } = e.detail;
-    this.role === "buyer" && a || (this.activeDate = /* @__PURE__ */ new Date(t + "T00:00:00"), this.view = "day", this.dispatchEvent(new CustomEvent("date-selected", { detail: { dateString: t }, bubbles: !0, composed: !0 })));
+    this.role === "buyer" && a || (this.activeDate = P(t), this.view = "day", this.dispatchEvent(new CustomEvent("date-selected", { detail: { dateString: t }, bubbles: !0, composed: !0 })));
   }
   handleRangeSelect(e) {
-    var $, M;
-    const { dateString: t, start: a, end: i } = e.detail, r = this.activeTimezone === "local" ? C(this.activeDate, this.hostTimezone, "local") : 0, l = (/* @__PURE__ */ new Date()).toISOString().split("T")[0], o = this.minDate || (this.role === "buyer" ? l : "");
-    if (this.role === "buyer" && o && t < o) return;
-    const p = this.getDisplaySlots(r), n = p.findIndex((B) => B.start === a), c = p.findIndex((B) => B.end === i), m = (($ = this.slots[n]) == null ? void 0 : $.start) || a, y = ((M = this.slots[c]) == null ? void 0 : M.end) || i;
+    var W, U;
+    const { dateString: t, start: a, end: r } = e.detail, i = this.activeTimezone === "local" ? B(this.activeDate, this.hostTimezone, "local") : 0, s = z(/* @__PURE__ */ new Date()), o = this.minDate || (this.role === "buyer" ? s : "");
+    if (this.role === "buyer" && (o && t < o || this.maxDate && t > this.maxDate)) return;
+    const u = this.getDisplaySlots(i), n = a.split(" ")[0], d = r.split(" ")[0], h = u.findIndex((j) => j.start.startsWith(n)), y = u.findIndex((j) => j.end.startsWith(d)), f = ((W = this.slots[h]) == null ? void 0 : W.start) || n, I = ((U = this.slots[y]) == null ? void 0 : U.end) || d;
     if (this.role === "buyer") {
-      this.selectedRange = { dateString: t, start: a, end: i }, this.dispatchEvent(new CustomEvent("booking-selected", { detail: { dateString: t, start: a, end: i, hostStart: m, hostEnd: y }, bubbles: !0, composed: !0 }));
+      this.selectedRange = { dateString: t, start: n, end: d }, this.dispatchEvent(new CustomEvent("booking-selected", { detail: { dateString: t, start: n, end: d, hostStart: f, hostEnd: I }, bubbles: !0, composed: !0 }));
       return;
     }
-    this.openModal(t, m, y, !0, null);
+    this.openModal(t, f, I, !0, null);
   }
   handleSlotClick(e) {
-    const { dateString: t, slot: a } = e.detail, i = /* @__PURE__ */ new Date(t + "T00:00:00"), r = this.activeTimezone === "local" ? C(this.activeDate, this.hostTimezone, "local") : 0, l = (/* @__PURE__ */ new Date()).toISOString().split("T")[0], o = this.minDate || (this.role === "buyer" ? l : "");
-    if (this.role === "buyer" && (a.isBlocked || o && t < o)) return;
-    const p = this.getDisplaySlots(r), n = p.findIndex((y) => y.start === a.start), c = this.slots[n] || a;
+    const { dateString: t, slot: a } = e.detail, r = P(t), i = this.activeTimezone === "local" ? B(this.activeDate, this.hostTimezone, "local") : 0, s = z(/* @__PURE__ */ new Date()), o = this.minDate || (this.role === "buyer" ? s : "");
+    if (this.role === "buyer" && (a.isBlocked || o && t < o || this.maxDate && t > this.maxDate)) return;
+    const u = this.getDisplaySlots(i), n = a.start.split(" ")[0], d = u.findIndex((f) => f.start.startsWith(n)), h = this.slots[d] || a;
     if (this.role === "buyer") {
-      this.selectedRange = { dateString: t, start: a.start, end: a.end }, this.dispatchEvent(new CustomEvent("booking-selected", { detail: { dateString: t, start: a.start, end: a.end, hostStart: c.start, hostEnd: c.end }, bubbles: !0, composed: !0 }));
+      this.selectedRange = { dateString: t, start: a.start, end: a.end }, this.dispatchEvent(new CustomEvent("booking-selected", { detail: { dateString: t, start: a.start, end: a.end, hostStart: h.start, hostEnd: h.end }, bubbles: !0, composed: !0 }));
       return;
     }
-    const m = this.localRules.find((y) => I(i, c, [y]));
-    this.openModal(t, c.start, c.end, !0, m || null);
+    const y = this.localRules.find((f) => _(r, h, [f]));
+    this.openModal(t, h.start, h.end, !0, y || null);
   }
   handleBlockDayAction() {
-    const e = _(this.activeDate), t = this.localRules.find((a) => I(this.activeDate, void 0, [a]));
+    const e = z(this.activeDate), t = this.localRules.find((a) => _(this.activeDate, void 0, [a]));
     this.openModal(e, "", "", !1, t || null);
   }
-  openModal(e, t, a, i, r) {
-    this.modalDateString = e, this.modalStartTime = t, this.modalEndTime = a, this.modalIsRange = i, this.modalExistingRule = r, this.modalOpen = !0;
+  openModal(e, t, a, r, i) {
+    this.modalDateString = e, this.modalStartTime = t, this.modalEndTime = a, this.modalIsRange = r, this.modalExistingRule = i, this.modalOpen = !0;
   }
   handleSaveRule(e) {
-    const t = e.detail, a = this.modalExistingRule ? this.modalExistingRule.id : `rule-${Date.now()}`, i = {
+    var s;
+    const t = e.detail, a = this.modalExistingRule ? this.modalExistingRule.id : `rule-${Date.now()}`, r = {
       id: a,
       type: t.isRecurring ? "weekly" : "date-range",
       slots: t.blockAllDay ? void 0 : [{ start: t.startTime, end: t.endTime }],
       daysOfWeek: t.isRecurring ? t.selectedDays : void 0,
       startDate: t.isRecurring ? void 0 : t.dateString,
       endDate: t.isRecurring ? void 0 : t.dateString,
-      description: t.title
-    };
-    this.localRules = this.modalExistingRule ? this.localRules.map((r) => r.id === a ? i : r) : [...this.localRules, i], this.modalOpen = !1, this.dispatchEvent(new CustomEvent("rules-changed", { detail: { rules: this.localRules }, bubbles: !0, composed: !0 }));
+      description: t.title,
+      exceptions: (s = this.modalExistingRule) == null ? void 0 : s.exceptions
+    }, i = this.modalExistingRule ? this.localRules.map((o) => o.id === a ? r : o) : [...this.localRules, r];
+    this.localRules = i, this.rules = i, this.modalOpen = !1, this.dispatchEvent(new CustomEvent("rules-changed", { detail: { rules: i }, bubbles: !0, composed: !0 }));
   }
   handleDeleteRule(e) {
-    this.localRules = this.localRules.filter((t) => t.id !== e.detail.id), this.modalOpen = !1, this.dispatchEvent(new CustomEvent("rules-changed", { detail: { rules: this.localRules }, bubbles: !0, composed: !0 }));
+    const t = e.detail.rule || this.localRules.find((s) => s.id === e.detail.id), a = e.detail.dateString || this.modalDateString;
+    if (this.enableSeriesConfirmation && t && t.type === "weekly") {
+      this.modalOpen = !1, this.seriesTargetRule = t, this.seriesTargetDateString = a, this.seriesModalOpen = !0;
+      return;
+    }
+    const { updatedRules: r, targetRule: i } = F(this.localRules, e.detail.id);
+    if (this.localRules = r, this.rules = r, this.modalOpen = !1, i) {
+      const s = { actionType: "delete_series", targetRule: i, dateString: a, updatedRules: r };
+      this.dispatchEvent(new CustomEvent("rule-action-triggered", { detail: s, bubbles: !0, composed: !0 }));
+    }
+    this.dispatchEvent(new CustomEvent("rules-changed", { detail: { rules: r }, bubbles: !0, composed: !0 }));
+  }
+  handleConfirmSeriesAction(e) {
+    const { actionType: t, dateString: a, targetRule: r } = e.detail, { updatedRules: i, targetRule: s } = t === "delete_instance" ? V(this.localRules, r.id, a) : F(this.localRules, r.id);
+    if (this.localRules = i, this.rules = i, this.seriesModalOpen = !1, s) {
+      const o = { actionType: t, targetRule: s, dateString: a, updatedRules: i };
+      this.dispatchEvent(new CustomEvent("rule-action-triggered", { detail: o, bubbles: !0, composed: !0 }));
+    }
+    this.dispatchEvent(new CustomEvent("rules-changed", { detail: { rules: i }, bubbles: !0, composed: !0 }));
   }
   getDisplaySlots(e) {
     return e === 0 ? this.slots : this.slots.map((t) => {
-      const a = U(t, e), i = a.dayShift > 0 ? " (+1d)" : a.dayShift < 0 ? " (-1d)" : "";
-      return { start: a.start + i, end: a.end + i };
+      const a = H(t, e), r = a.dayShift > 0 ? " (+1d)" : a.dayShift < 0 ? " (-1d)" : "";
+      return { start: a.start + r, end: a.end + r };
     });
   }
   render() {
-    var p;
-    const e = this.activeDate.getFullYear(), t = this.activeDate.getMonth(), a = I(this.activeDate, void 0, this.localRules), i = this.activeTimezone === "local" ? C(this.activeDate, this.hostTimezone, "local") : 0, r = this.getDisplaySlots(i), l = (n) => n.map((c) => ({ ...c, slots: c.slots.map((m, y) => {
-      var $, M;
-      return { ...m, start: (($ = r[y]) == null ? void 0 : $.start) || m.start, end: ((M = r[y]) == null ? void 0 : M.end) || m.end };
-    }) })), o = ((p = this.hostTimezone.split("/").pop()) == null ? void 0 : p.replace("_", " ")) || "Anfitrión";
-    return d`
+    var u;
+    const e = this.activeDate.getFullYear(), t = this.activeDate.getMonth(), a = _(this.activeDate, void 0, this.localRules), r = this.activeTimezone === "local" ? B(this.activeDate, this.hostTimezone, "local") : 0, i = this.getDisplaySlots(r), s = (n) => n.map((d) => ({ ...d, slots: d.slots.map((h, y) => {
+      var f, I;
+      return { ...h, start: ((f = i[y]) == null ? void 0 : f.start) || h.start, end: ((I = i[y]) == null ? void 0 : I.end) || h.end };
+    }) })), o = ((u = this.hostTimezone.split("/").pop()) == null ? void 0 : u.replace("_", " ")) || "Anfitrión";
+    return c`
       <div class="calendar-header">
         <div class="nav-group">
           <button class="btn" @click=${() => this.activeDate = /* @__PURE__ */ new Date()}>Hoy</button>
@@ -1267,7 +1583,7 @@ let g = class extends O {
         </div>
         
         <div class="view-group">
-          ${this.role === "provider" ? d`
+          ${this.role === "provider" ? c`
             <div class="timezone-badge">
               🌐 Zona:
               <select class="timezone-select" @change=${(n) => this.activeTimezone = n.target.value}>
@@ -1276,7 +1592,7 @@ let g = class extends O {
               </select>
             </div>
           ` : ""}
-          ${this.role === "provider" && this.view === "day" ? d`<button class="btn btn-primary" @click=${this.handleBlockDayAction} style="margin-right: 8px;">${a ? "Liberar Día" : "Bloquear Día"}</button>` : ""}
+          ${this.role === "provider" && this.view === "day" ? c`<button class="btn btn-primary" @click=${this.handleBlockDayAction} style="margin-right: 8px;">${a ? "Liberar Día" : "Bloquear Día"}</button>` : ""}
           <button class="btn" @click=${() => this.darkMode = !this.darkMode} style="margin-right: 8px;">${this.darkMode ? "☀️" : "🌙"}</button>
           <div class="btn-group">
             <button class="btn ${this.view === "month" ? "active" : ""}" @click=${() => this.view = "month"}>Mes</button>
@@ -1287,7 +1603,7 @@ let g = class extends O {
       </div>
 
       <div class="calendar-body">
-        ${this.view === "month" ? d`<glatam-calendar-month-view .days=${A(e, t, this.localRules, this.slots, this.startOfWeekDay)} .locale=${this.locale} .startOfWeekDay=${this.startOfWeekDay} .role=${this.role} .size=${this.size} .minDate=${this.minDate || (this.role === "buyer" ? (/* @__PURE__ */ new Date()).toISOString().split("T")[0] : "")} .maxDate=${this.maxDate} .showNeighboringMonth=${this.showNeighboringMonth} .tileClassName=${this.tileClassName} @day-select=${this.handleDaySelect}></glatam-calendar-month-view>` : this.view === "week" ? d`<glatam-calendar-week-view .days=${l(j(this.activeDate, this.localRules, this.slots, this.startOfWeekDay))} .slots=${r} .locale=${this.locale} .selectedRange=${this.selectedRange} .role=${this.role} @range-select=${this.handleRangeSelect} @slot-click=${this.handleSlotClick}></glatam-calendar-week-view>` : d`<glatam-calendar-day-view .day=${l(j(this.activeDate, this.localRules, this.slots, this.startOfWeekDay)).find((n) => n.dateString === _(this.activeDate)) || null} .slots=${r} .locale=${this.locale} .selectedRange=${this.selectedRange} .role=${this.role} @range-select=${this.handleRangeSelect} @slot-click=${this.handleSlotClick}></glatam-calendar-day-view>`}
+        ${this.view === "month" ? c`<glatam-calendar-month-view .days=${Y(e, t, this.localRules, this.slots, this.startOfWeekDay)} .locale=${this.locale} .startOfWeekDay=${this.startOfWeekDay} .role=${this.role} .size=${this.size} .minDate=${this.minDate || (this.role === "buyer" ? z(/* @__PURE__ */ new Date()) : "")} .maxDate=${this.maxDate} .showNeighboringMonth=${this.showNeighboringMonth} .tileClassName=${this.tileClassName} @day-select=${this.handleDaySelect}></glatam-calendar-month-view>` : this.view === "week" ? c`<glatam-calendar-week-view .days=${s(L(this.activeDate, this.localRules, this.slots, this.startOfWeekDay))} .slots=${i} .locale=${this.locale} .selectedRange=${this.selectedRange} .role=${this.role} .minDate=${this.minDate || (this.role === "buyer" ? z(/* @__PURE__ */ new Date()) : "")} .maxDate=${this.maxDate} @range-select=${this.handleRangeSelect} @slot-click=${this.handleSlotClick}></glatam-calendar-week-view>` : c`<glatam-calendar-day-view .day=${s(L(this.activeDate, this.localRules, this.slots, this.startOfWeekDay)).find((n) => n.dateString === z(this.activeDate)) || null} .slots=${i} .locale=${this.locale} .selectedRange=${this.selectedRange} .role=${this.role} .minDate=${this.minDate || (this.role === "buyer" ? z(/* @__PURE__ */ new Date()) : "")} .maxDate=${this.maxDate} @range-select=${this.handleRangeSelect} @slot-click=${this.handleSlotClick}></glatam-calendar-day-view>`}
       </div>
 
       <glatam-calendar-modal
@@ -1295,91 +1611,159 @@ let g = class extends O {
         .isRange=${this.modalIsRange} .existingRule=${this.modalExistingRule} @save-rule=${this.handleSaveRule}
         @delete-rule=${this.handleDeleteRule} @close=${() => this.modalOpen = !1}
       ></glatam-calendar-modal>
+
+      <glatam-series-confirmation-modal
+        .open=${this.seriesModalOpen} .dateString=${this.seriesTargetDateString} .targetRule=${this.seriesTargetRule}
+        @confirm-action=${this.handleConfirmSeriesAction} @close=${() => this.seriesModalOpen = !1}
+      ></glatam-series-confirmation-modal>
     `;
   }
 };
-g.styles = [P, W];
-h([
-  s({ type: String })
+g.styles = [q, G];
+p([
+  l({ type: String })
 ], g.prototype, "role", 2);
-h([
-  s({ type: String, reflect: !0 })
+p([
+  l({ type: String, reflect: !0 })
 ], g.prototype, "size", 2);
-h([
-  s({ type: String })
+p([
+  l({ type: String })
 ], g.prototype, "view", 2);
-h([
-  s({ type: String })
+p([
+  l({ type: String })
 ], g.prototype, "locale", 2);
-h([
-  s({ type: Number })
+p([
+  l({ type: Number })
 ], g.prototype, "startOfWeekDay", 2);
-h([
-  s({ type: Array })
+p([
+  l({ type: Array })
 ], g.prototype, "rules", 2);
-h([
-  s({ type: Array })
+p([
+  l({ type: Array })
 ], g.prototype, "selectedDates", 2);
-h([
-  s({ type: Object })
+p([
+  l({ type: Object })
 ], g.prototype, "selectedRange", 2);
-h([
-  s({ type: String })
+p([
+  l({ type: String })
 ], g.prototype, "hostTimezone", 2);
-h([
-  s({ type: String })
+p([
+  l({ type: String })
 ], g.prototype, "activeTimezone", 2);
-h([
-  s({ type: Array })
+p([
+  l({ type: Array })
 ], g.prototype, "slots", 2);
-h([
-  s({ type: String })
+p([
+  l({ type: String })
 ], g.prototype, "minDate", 2);
-h([
-  s({ type: String })
+p([
+  l({ type: String })
 ], g.prototype, "maxDate", 2);
-h([
-  s({ type: Boolean })
+p([
+  l({ type: Boolean })
 ], g.prototype, "showNeighboringMonth", 2);
-h([
-  s({ attribute: !1 })
+p([
+  l({ attribute: !1 })
 ], g.prototype, "tileClassName", 2);
-h([
-  u()
+p([
+  l({ type: Boolean, attribute: "enable-series-confirmation" })
+], g.prototype, "enableSeriesConfirmation", 2);
+p([
+  m()
 ], g.prototype, "activeDate", 2);
-h([
-  u()
+p([
+  m()
 ], g.prototype, "localRules", 2);
-h([
-  u()
+p([
+  m()
 ], g.prototype, "darkMode", 2);
-h([
-  u()
+p([
+  m()
 ], g.prototype, "modalOpen", 2);
-h([
-  u()
+p([
+  m()
 ], g.prototype, "modalDateString", 2);
-h([
-  u()
+p([
+  m()
 ], g.prototype, "modalStartTime", 2);
-h([
-  u()
+p([
+  m()
 ], g.prototype, "modalEndTime", 2);
-h([
-  u()
+p([
+  m()
 ], g.prototype, "modalIsRange", 2);
-h([
-  u()
+p([
+  m()
 ], g.prototype, "modalExistingRule", 2);
-g = h([
-  T("glatam-calendar")
+p([
+  m()
+], g.prototype, "seriesModalOpen", 2);
+p([
+  m()
+], g.prototype, "seriesTargetRule", 2);
+p([
+  m()
+], g.prototype, "seriesTargetDateString", 2);
+g = p([
+  O("glatam-calendar")
 ], g);
-var tt = Object.defineProperty, et = Object.getOwnPropertyDescriptor, v = (e, t, a, i) => {
-  for (var r = i > 1 ? void 0 : i ? et(t, a) : t, l = e.length - 1, o; l >= 0; l--)
-    (o = e[l]) && (r = (i ? o(t, a, r) : o(r)) || r);
-  return i && r && tt(t, a, r), r;
+const ct = M`
+  :host {
+    display: inline-block;
+    background: transparent;
+    border: none;
+    padding: 0;
+    box-shadow: none;
+    width: 100%;
+  }
+
+  .mini-calendar-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 4px 8px;
+    margin-bottom: 8px;
+    user-select: none;
+  }
+
+  .mini-month-title {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--glatam-text);
+    text-transform: capitalize;
+    letter-spacing: -0.01em;
+  }
+
+  .mini-nav-btn {
+    background: transparent;
+    border: 1px solid var(--glatam-border);
+    border-radius: 8px;
+    color: var(--glatam-text);
+    width: 28px;
+    height: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    font-size: 0.75rem;
+    transition: background-color var(--glatam-transition-fast), border-color var(--glatam-transition-fast), transform var(--glatam-transition-fast);
+  }
+
+  .mini-nav-btn:hover:not(:disabled) {
+    background-color: var(--glatam-surface);
+    border-color: var(--glatam-text-secondary);
+  }
+
+  .mini-nav-btn:active:not(:disabled) {
+    transform: scale(0.95);
+  }
+`;
+var gt = Object.defineProperty, pt = Object.getOwnPropertyDescriptor, v = (e, t, a, r) => {
+  for (var i = r > 1 ? void 0 : r ? pt(t, a) : t, s = e.length - 1, o; s >= 0; s--)
+    (o = e[s]) && (i = (r ? o(t, a, i) : o(i)) || i);
+  return r && i && gt(t, a, i), i;
 };
-let b = class extends O {
+let b = class extends T {
   constructor() {
     super(...arguments), this.role = "buyer", this.locale = "es", this.startOfWeekDay = 0, this.rules = [], this.selectedRange = null, this.size = "medium", this.hostTimezone = "America/Bogota", this.activeTimezone = "local", this.minDate = "", this.maxDate = "", this.showNeighboringMonth = !0, this.tileClassName = null, this.slots = [
       { start: "09:00", end: "10:00" },
@@ -1391,7 +1775,30 @@ let b = class extends O {
       { start: "15:00", end: "16:00" },
       { start: "16:00", end: "17:00" },
       { start: "17:00", end: "18:00" }
-    ], this.activeDate = /* @__PURE__ */ new Date(), this.dropdownOpen = !1, this.dropdownSelectedDateString = "";
+    ], this.activeDate = /* @__PURE__ */ new Date(), this.dropdownOpen = !1, this.dropdownSelectedDateString = "", this.touchStartX = 0, this.touchStartY = 0;
+  }
+  handlePrevMonth(e) {
+    e.stopPropagation();
+    const t = new Date(this.activeDate);
+    t.setMonth(t.getMonth() - 1), this.activeDate = t;
+  }
+  handleNextMonth(e) {
+    e.stopPropagation();
+    const t = new Date(this.activeDate);
+    t.setMonth(t.getMonth() + 1), this.activeDate = t;
+  }
+  handleTouchStart(e) {
+    e.touches && e.touches.length > 0 && (this.touchStartX = e.touches[0].clientX, this.touchStartY = e.touches[0].clientY);
+  }
+  handleTouchEnd(e) {
+    if (e.changedTouches && e.changedTouches.length > 0) {
+      const t = this.touchStartX - e.changedTouches[0].clientX, a = this.touchStartY - e.changedTouches[0].clientY;
+      Math.abs(t) > 50 && Math.abs(t) > Math.abs(a) && (t > 0 ? this.handleNextMonth(e) : this.handlePrevMonth(e));
+    }
+  }
+  getFormattedMonthTitle() {
+    const e = this.activeDate.toLocaleDateString(this.locale || "es", { month: "long", year: "numeric" });
+    return e.charAt(0).toUpperCase() + e.slice(1);
   }
   handleDropdownDaySelect(e) {
     this.dropdownSelectedDateString = e.detail.dateString;
@@ -1407,135 +1814,116 @@ let b = class extends O {
     this.selectedRange = { dateString: this.dropdownSelectedDateString, start: e.displayStart, end: e.displayEnd }, this.dispatchEvent(new CustomEvent("booking-selected", { detail: t, bubbles: !0, composed: !0 })), this.dropdownOpen = !1, this.dropdownSelectedDateString = "";
   }
   render() {
-    const e = this.selectedRange ? `Reserva: ${this.selectedRange.dateString} (${this.selectedRange.start} - ${this.selectedRange.end})` : "Seleccionar Fecha y Hora", t = this.activeDate.getFullYear(), a = this.activeDate.getMonth(), i = this.dropdownSelectedDateString ? /* @__PURE__ */ new Date(this.dropdownSelectedDateString + "T00:00:00") : null, r = i && this.activeTimezone === "local" ? C(i, this.hostTimezone, "local") : 0, l = i ? this.slots.map((o) => {
-      const p = I(i, o, this.rules), n = U(o, r), c = n.dayShift > 0 ? " (+1d)" : n.dayShift < 0 ? " (-1d)" : "";
-      return {
-        ...o,
-        displayStart: n.start + c,
-        displayEnd: n.end + c,
-        isBlocked: p
-      };
+    const e = this.selectedRange ? `Reserva: ${this.selectedRange.dateString} (${this.selectedRange.start} - ${this.selectedRange.end})` : "Seleccionar Fecha y Hora", t = this.activeDate.getFullYear(), a = this.activeDate.getMonth(), r = this.dropdownSelectedDateString ? /* @__PURE__ */ new Date(this.dropdownSelectedDateString + "T00:00:00") : null, i = r && this.activeTimezone === "local" ? B(r, this.hostTimezone, "local") : 0, s = r ? this.slots.map((o) => {
+      const u = _(r, o, this.rules), n = H(o, i), d = n.dayShift > 0 ? " (+1d)" : n.dayShift < 0 ? " (-1d)" : "";
+      return { ...o, displayStart: n.start + d, displayEnd: n.end + d, isBlocked: u };
     }) : [];
-    return d`
+    return c`
       <div class="dropdown-container">
         <button class="btn btn-primary dropdown-toggle" @click=${() => this.dropdownOpen = !this.dropdownOpen}>
           <span>${e}</span> <span>${this.dropdownOpen ? "▲" : "▼"}</span>
         </button>
 
-        ${this.dropdownOpen ? d`
-              <div class="dropdown-card" style="--glatam-day-min-height: 38px;">
-                ${this.dropdownSelectedDateString ? d`
-                      <div style="display:flex; justify-content:space-between; align-items:center; border-bottom: 1px solid var(--glatam-border); padding-bottom:8px;">
-                        <button class="btn" style="height:28px; padding:0 8px; font-size:0.75rem;" @click=${() => this.dropdownSelectedDateString = ""}>&lt; Volver</button>
-                        <span style="font-size:0.8rem; font-weight:600; color: var(--glatam-text);">${this.dropdownSelectedDateString}</span>
-                      </div>
-                      <div class="slot-list">
-                        ${l.map((o) => d`
-                          <button
-                            class="slot-btn ${o.isBlocked ? "blocked" : ""}"
-                            ?disabled=${o.isBlocked}
-                            @click=${() => this.selectDropdownSlot(o)}
-                          >
-                            ${o.displayStart} - ${o.displayEnd} ${o.isBlocked ? "(Ocupado)" : ""}
-                          </button>
-                        `)}
-                      </div>
-                    ` : d`
-                      <div style="font-weight:600; font-size:0.9rem; text-align:center; color: var(--glatam-text);">Selecciona un Día</div>
-                      <glatam-calendar-month-view
-                        .days=${A(t, a, this.rules, this.slots, this.startOfWeekDay)}
-                        .locale=${this.locale}
-                        .startOfWeekDay=${this.startOfWeekDay}
-                        .role=${this.role}
-                        size="small"
-                        .minDate=${this.minDate}
-                        .maxDate=${this.maxDate}
-                        .showNeighboringMonth=${this.showNeighboringMonth}
-                        .tileClassName=${this.tileClassName}
-                        @day-select=${this.handleDropdownDaySelect}
-                      ></glatam-calendar-month-view>
-                    `}
+        ${this.dropdownOpen ? c`
+          <div class="dropdown-card" style="--glatam-day-min-height: 38px;">
+            ${this.dropdownSelectedDateString ? c`
+              <div style="display:flex; justify-space-between; align-items:center; border-bottom: 1px solid var(--glatam-border); padding-bottom:8px;">
+                <button class="btn" style="height:28px; padding:0 8px; font-size:0.75rem;" @click=${() => this.dropdownSelectedDateString = ""}>&lt; Volver</button>
+                <span style="font-size:0.8rem; font-weight:600; color: var(--glatam-text);">${this.dropdownSelectedDateString}</span>
+              </div>
+              <div class="slot-list">
+                ${s.map((o) => c`
+                  <button class="slot-btn ${o.isBlocked ? "blocked" : ""}" ?disabled=${o.isBlocked} @click=${() => this.selectDropdownSlot(o)}>
+                    ${o.displayStart} - ${o.displayEnd} ${o.isBlocked ? "(Ocupado)" : ""}
+                  </button>
+                `)}
               </div>
-            ` : ""}
+            ` : c`
+              <div class="mini-calendar-header">
+                <button type="button" class="mini-nav-btn" aria-label="Mes anterior" @click=${this.handlePrevMonth}>&lt;</button>
+                <span class="mini-month-title">${this.getFormattedMonthTitle()}</span>
+                <button type="button" class="mini-nav-btn" aria-label="Mes siguiente" @click=${this.handleNextMonth}>&gt;</button>
+              </div>
+              <div class="mini-calendar-touch-wrapper" @touchstart=${this.handleTouchStart} @touchend=${this.handleTouchEnd}>
+                <glatam-calendar-month-view
+                  .days=${Y(t, a, this.rules, this.slots, this.startOfWeekDay)}
+                  .locale=${this.locale} .startOfWeekDay=${this.startOfWeekDay} .role=${this.role} size="small"
+                  .minDate=${this.minDate} .maxDate=${this.maxDate} .showNeighboringMonth=${this.showNeighboringMonth}
+                  .tileClassName=${this.tileClassName} @day-select=${this.handleDropdownDaySelect}
+                ></glatam-calendar-month-view>
+              </div>
+            `}
+          </div>
+        ` : ""}
       </div>
     `;
   }
 };
-b.styles = [
-  P,
-  W,
-  E`
-      :host {
-        display: inline-block;
-        background: transparent;
-        border: none;
-        padding: 0;
-        box-shadow: none;
-        width: 100%;
-      }
-    `
-];
+b.styles = [q, G, ct];
 v([
-  s({ type: String })
+  l({ type: String })
 ], b.prototype, "role", 2);
 v([
-  s({ type: String })
+  l({ type: String })
 ], b.prototype, "locale", 2);
 v([
-  s({ type: Number })
+  l({ type: Number })
 ], b.prototype, "startOfWeekDay", 2);
 v([
-  s({ type: Array })
+  l({ type: Array })
 ], b.prototype, "rules", 2);
 v([
-  s({ type: Object })
+  l({ type: Object })
 ], b.prototype, "selectedRange", 2);
 v([
-  s({ type: String, reflect: !0 })
+  l({ type: String, reflect: !0 })
 ], b.prototype, "size", 2);
 v([
-  s({ type: String })
+  l({ type: String })
 ], b.prototype, "hostTimezone", 2);
 v([
-  s({ type: String })
+  l({ type: String })
 ], b.prototype, "activeTimezone", 2);
 v([
-  s({ type: String })
+  l({ type: String })
 ], b.prototype, "minDate", 2);
 v([
-  s({ type: String })
+  l({ type: String })
 ], b.prototype, "maxDate", 2);
 v([
-  s({ type: Boolean })
+  l({ type: Boolean })
 ], b.prototype, "showNeighboringMonth", 2);
 v([
-  s({ attribute: !1 })
+  l({ attribute: !1 })
 ], b.prototype, "tileClassName", 2);
 v([
-  s({ type: Array })
+  l({ type: Array })
 ], b.prototype, "slots", 2);
 v([
-  u()
+  m()
 ], b.prototype, "activeDate", 2);
 v([
-  u()
+  m()
 ], b.prototype, "dropdownOpen", 2);
 v([
-  u()
+  m()
 ], b.prototype, "dropdownSelectedDateString", 2);
 b = v([
-  T("glatam-calendar-mini")
+  O("glatam-calendar-mini")
 ], b);
 export {
   g as GlatamCalendar,
   S as GlatamCalendarDayView,
   b as GlatamCalendarMini,
-  x as GlatamCalendarModal,
-  f as GlatamCalendarMonthView,
-  w as GlatamCalendarWeekView,
-  W as calendarStyles,
-  nt as formatISODate,
-  dt as isTimeBlocked,
-  ct as parseISODate,
-  P as variablesStyles
+  D as GlatamCalendarModal,
+  w as GlatamCalendarMonthView,
+  x as GlatamCalendarWeekView,
+  C as GlatamSeriesConfirmationModal,
+  G as calendarStyles,
+  F as deleteSeries,
+  V as deleteSingleInstance,
+  yt as formatISODate,
+  xt as isTimeBlocked,
+  wt as parseISODate,
+  q as variablesStyles
 };