@arquimedes.co/eureka-forms 3.0.52-new-steps → 3.0.53-new-steps

package/dist/FormSteps/BookingStep/MaterialBookingStep/MaterialBookingStep.js

@@ -21,6 +21,7 @@ function MaterialBookingStep({ step, editable, fetchSlots }) {
         '--eureka-primary': formStyle.primaryColor,
         '--eureka-text': formStyle.textColor,
         '--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
+        '--booking-accent': formStyle.secondaryContrastColor,
     };
     const { ref, value, onChange, error } = useFormStep(step, {
         defaultValue: null,

package/dist/FormSteps/CalendarStep/MaterialCalendarStep/MaterialCalendarStep.d.ts

@@ -1,3 +1,7 @@
 import { CalendarStepProps } from '../CalendarStep';
+/**
+ * Conector del paso CALENDAR: enlaza el estado del formulario (`useFormStep`) y el
+ * theming del form con el componente reutilizable `ErkCalendar` (en Shared).
+ */
 declare function MaterialCalendarStep({ step, editable }: CalendarStepProps): JSX.Element;
 export default MaterialCalendarStep;

package/dist/FormSteps/CalendarStep/MaterialCalendarStep/MaterialCalendarStep.js

@@ -1,269 +1,31 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useContext, useState, useCallback, useRef, useMemo } from 'react';
-import { startOfWeek, endOfWeek, addWeeks, addDays, addMonths, startOfMonth, endOfMonth, isSameMonth, isSameDay, isToday, format, parse, startOfDay, } from 'date-fns';
-import { es } from 'date-fns/locale';
-import { Popover } from '@mui/material';
-import ArrowLeftIcon from '../../../Icons/ArrowLeftIcon';
-import ArrowRightIcon from '../../../Icons/ArrowRightIcon';
-import ViewWeekIcon from '../../../Icons/ViewWeekIcon';
-import ViewDayIcon from '../../../Icons/ViewDayIcon';
-import CalendarIcon from '../../../Icons/CalendarIcon';
-import AddIcon from '../../../Icons/AddIcon';
-import CloseIcon from '../../../Icons/CloseIcon';
-import DeleteIcon from '../../../Icons/DeleteIcon';
-import { CalendarEventCategory, CalendarDefaultView, } from '../../../@Types/CalendarFormStep';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
 import { useFormStep } from '../../StepHooks';
 import FormContext from '../../../Contexts/FormContext';
 import { selectBreakPoint, useAppSelector } from '../../../hooks';
 import { calcStepWidth } from '../../StepFunctions';
-import styles from './MaterialCalendarStep.module.css';
-// ---------------------------------------------------------------------------
-// Constants
-// ---------------------------------------------------------------------------
-const CELL_HEIGHT = 48; // px per hour
-const WEEK_START = 1; // Monday
-const CATEGORY_COLORS = {
-    [CalendarEventCategory.WORKING]: '#4CAF50',
-    [CalendarEventCategory.PHYSICAL]: '#2196F3',
-    [CalendarEventCategory.VIRTUAL]: '#9C27B0',
-    [CalendarEventCategory.SPECIFIC]: '#FF9800',
-    [CalendarEventCategory.MEETING]: '#E91E63',
-    [CalendarEventCategory.BUSY]: '#607D8B',
-    [CalendarEventCategory.CUSTOM]: '#795548',
-};
-const CATEGORY_LABELS = {
-    [CalendarEventCategory.WORKING]: 'Trabajo',
-    [CalendarEventCategory.PHYSICAL]: 'Presencial',
-    [CalendarEventCategory.VIRTUAL]: 'Virtual',
-    [CalendarEventCategory.SPECIFIC]: 'Específico',
-    [CalendarEventCategory.MEETING]: 'Reunión',
-    [CalendarEventCategory.BUSY]: 'Ocupado',
-    [CalendarEventCategory.CUSTOM]: 'Personalizado',
-};
-// ---------------------------------------------------------------------------
-// Helpers
-// ---------------------------------------------------------------------------
-function parseTime(hhmm) {
-    const [h, m] = hhmm.split(':').map(Number);
-    return { h: h ?? 0, m: m ?? 0 };
-}
-function toMinutes(hhmm) {
-    const { h, m } = parseTime(hhmm);
-    return h * 60 + m;
-}
-function minutesToHHMM(mins) {
-    const h = Math.floor(mins / 60);
-    const m = mins % 60;
-    return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
-}
-function isoToHHMM(iso) {
-    // "2024-06-19T09:30:00" → "09:30"
-    return iso.slice(11, 16);
-}
-function dateAndTimeToISO(date, hhmm) {
-    const { h, m } = parseTime(hhmm);
-    const d = new Date(date);
-    d.setHours(h, m, 0, 0);
-    return d.toISOString().slice(0, 19);
-}
-function isoToDate(iso) {
-    // Treat as local time (no timezone shift)
-    return parse(iso.slice(0, 19), 'yyyy-MM-dd\'T\'HH:mm:ss', new Date());
-}
-function newEventId() {
-    return `evt-${Date.now()}-${Math.random().toString(36).slice(2, 7)}`;
-}
-function EventBlock({ event, minHour, template, onDelete, readOnly }) {
-    const startMins = toMinutes(isoToHHMM(event.start));
-    const endMins = toMinutes(isoToHHMM(event.end));
-    const top = (startMins - minHour * 60) * (CELL_HEIGHT / 60);
-    const height = Math.max((endMins - startMins) * (CELL_HEIGHT / 60), 18);
-    const color = template?.color ?? CATEGORY_COLORS[event.category] ?? '#607D8B';
-    const label = event.title ?? template?.name ?? CATEGORY_LABELS[event.category];
-    return (_jsxs("div", { className: styles.eventBlock, style: { top, height, backgroundColor: color }, title: `${label}  ${isoToHHMM(event.start)}–${isoToHHMM(event.end)}`, children: [_jsx("span", { className: styles.eventLabel, children: label }), _jsxs("span", { className: styles.eventTime, children: [isoToHHMM(event.start), "\u2013", isoToHHMM(event.end)] }), !readOnly && (_jsx("button", { type: "button", className: styles.eventDeleteBtn, onClick: (e) => { e.stopPropagation(); onDelete(event.id); }, "aria-label": "Eliminar", children: _jsx(DeleteIcon, { size: 13 }) }))] }));
-}
-// ---------------------------------------------------------------------------
-// Main component
-// ---------------------------------------------------------------------------
+import ErkCalendar from '../../../Shared/ErkCalendar/ErkCalendar';
+/**
+ * Conector del paso CALENDAR: enlaza el estado del formulario (`useFormStep`) y el
+ * theming del form con el componente reutilizable `ErkCalendar` (en Shared).
+ */
 function MaterialCalendarStep({ step, editable }) {
     const currentBreakPoint = useAppSelector(selectBreakPoint);
-    const { postview } = useAppSelector((state) => state.global);
-    const form = useContext(FormContext);
+    const { postview, formStyle } = useAppSelector((state) => state.global);
+    const formCtx = useContext(FormContext);
     const isReadOnly = !editable || postview;
-    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, form.size);
-    // ------------------------------------------------------------------
-    // Resolve config
-    // ------------------------------------------------------------------
-    const minTimeStr = step.minTime ?? '00:00';
-    const maxTimeStr = step.maxTime ?? '23:00';
-    const minHour = parseTime(minTimeStr).h;
-    const maxHour = parseTime(maxTimeStr).h + 1;
-    const totalHours = maxHour - minHour;
-    const showWeekends = step.showWeekends ?? true;
-    const allowedCategories = (step.allowedCategories?.length ? step.allowedCategories : Object.values(CalendarEventCategory));
-    const defaultViewMode = (step.defaultView ?? CalendarDefaultView.WEEK);
-    // ------------------------------------------------------------------
-    // Form value
-    // ------------------------------------------------------------------
-    const { value, onChange } = useFormStep(step, {
+    const widthStyle = currentBreakPoint <= step.size ? '100%' : calcStepWidth(step.size, formCtx.size);
+    const cssVars = {
+        width: widthStyle,
+        '--eureka-outline': formStyle.outlineColor,
+        '--eureka-primary': formStyle.primaryColor,
+        '--eureka-text': formStyle.textColor,
+        '--eureka-bg': formStyle.standAloneBackgroundColor ?? '#fff',
+    };
+    const { ref, value, onChange, error } = useFormStep(step, {
         defaultValue: null,
-        rules: {
-            required: step.required ? 'Este campo es obligatorio' : undefined,
-        },
+        rules: { required: step.required ? 'Este campo es obligatorio' : undefined },
     });
-    const events = useMemo(() => value?.events ?? [], [value?.events]);
-    const setEvents = useCallback((updater) => {
-        onChange({
-            type: 'CALENDAR_VALUE',
-            events: updater(events),
-            timezone: value?.timezone,
-        });
-    }, [events, value?.timezone, onChange]);
-    const deleteEvent = useCallback((id) => setEvents((prev) => prev.filter((e) => e.id !== id)), [setEvents]);
-    // ------------------------------------------------------------------
-    // Navigation state
-    // ------------------------------------------------------------------
-    const [viewMode, setViewMode] = useState(defaultViewMode);
-    const [current, setCurrent] = useState(() => startOfDay(new Date()));
-    const [createState, setCreate] = useState(null);
-    // Create form
-    const [newCategory, setNewCategory] = useState(allowedCategories[0] ?? CalendarEventCategory.WORKING);
-    const [newTitle, setNewTitle] = useState('');
-    const [newStart, setNewStart] = useState('09:00');
-    const [newEnd, setNewEnd] = useState('10:00');
-    const gridRef = useRef(null);
-    // ------------------------------------------------------------------
-    // Derived view dates
-    // ------------------------------------------------------------------
-    const weekStart = startOfWeek(current, { weekStartsOn: WEEK_START });
-    const weekEnd = endOfWeek(current, { weekStartsOn: WEEK_START });
-    const visibleDays = (() => {
-        if (viewMode === 'day')
-            return [current];
-        const days = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i));
-        return showWeekends ? days : days.filter((d) => d.getDay() !== 0 && d.getDay() !== 6);
-    })();
-    // ------------------------------------------------------------------
-    // Navigate
-    // ------------------------------------------------------------------
-    const prev = () => {
-        if (viewMode === 'month')
-            setCurrent((d) => addMonths(d, -1));
-        else if (viewMode === 'week')
-            setCurrent((d) => addWeeks(d, -1));
-        else
-            setCurrent((d) => addDays(d, -1));
-    };
-    const next = () => {
-        if (viewMode === 'month')
-            setCurrent((d) => addMonths(d, 1));
-        else if (viewMode === 'week')
-            setCurrent((d) => addWeeks(d, 1));
-        else
-            setCurrent((d) => addDays(d, 1));
-    };
-    const navLabel = () => {
-        if (viewMode === 'month')
-            return format(current, 'MMMM yyyy', { locale: es });
-        if (viewMode === 'week') {
-            const s = format(weekStart, 'd MMM', { locale: es });
-            const e = format(weekEnd, 'd MMM yyyy', { locale: es });
-            return `${s} – ${e}`;
-        }
-        return format(current, 'EEEE d \'de\' MMMM yyyy', { locale: es });
-    };
-    // ------------------------------------------------------------------
-    // Events per day (for time-grid views)
-    // ------------------------------------------------------------------
-    const eventsForDay = (day) => events.filter((e) => isSameDay(isoToDate(e.start), day));
-    // ------------------------------------------------------------------
-    // Create flow
-    // ------------------------------------------------------------------
-    const handleGridClick = (e, day) => {
-        if (isReadOnly)
-            return;
-        const rect = (e.currentTarget).getBoundingClientRect();
-        const relY = e.clientY - rect.top;
-        const clickedMins = Math.round((relY / CELL_HEIGHT) * 60) * 30; // snap to 30min
-        const startMins = minHour * 60 + clickedMins;
-        const startHHMM = minutesToHHMM(Math.min(startMins, (maxHour - 1) * 60));
-        const endHHMM = minutesToHHMM(Math.min(startMins + 60, maxHour * 60));
-        setNewStart(startHHMM);
-        setNewEnd(endHHMM);
-        setNewCategory(allowedCategories[0] ?? CalendarEventCategory.WORKING);
-        setNewTitle('');
-        setCreate({ anchorEl: e.currentTarget, date: day, startMins });
-    };
-    const handleMonthDayClick = (day) => {
-        setCurrent(day);
-        setViewMode('day');
-    };
-    const handleCreate = () => {
-        if (!createState)
-            return;
-        const startISO = dateAndTimeToISO(createState.date, newStart);
-        const endISO = dateAndTimeToISO(createState.date, newEnd);
-        const template = step.eventTemplates?.find((t) => t.category === newCategory);
-        const evt = {
-            id: newEventId(),
-            category: newCategory,
-            start: startISO,
-            end: endISO,
-            title: newTitle || undefined,
-            eventTemplateId: template?.id,
-        };
-        setEvents((prev) => [...prev, evt]);
-        setCreate(null);
-    };
-    // ------------------------------------------------------------------
-    // Hour labels column
-    // ------------------------------------------------------------------
-    const hourLabels = Array.from({ length: totalHours }, (_, i) => minHour + i);
-    // ------------------------------------------------------------------
-    // Time-grid view (week / day)
-    // ------------------------------------------------------------------
-    const renderTimeGrid = () => (_jsxs("div", { className: styles.gridWrapper, children: [_jsxs("div", { className: styles.gridHeader, style: { gridTemplateColumns: `48px repeat(${visibleDays.length}, 1fr)` }, children: [_jsx("div", { className: styles.cornerCell }), visibleDays.map((day) => (_jsxs("div", { className: `${styles.dayHeader} ${isToday(day) ? styles.dayHeaderToday : ''}`, onClick: () => { setCurrent(day); setViewMode('day'); }, children: [_jsx("span", { className: styles.dayHeaderDow, children: format(day, 'EEE', { locale: es }) }), _jsx("span", { className: `${styles.dayHeaderNum} ${isToday(day) ? styles.todayCircle : ''}`, children: format(day, 'd') })] }, day.toISOString())))] }), _jsx("div", { className: styles.gridBody, ref: gridRef, children: _jsxs("div", { className: styles.gridInner, style: { gridTemplateColumns: `48px repeat(${visibleDays.length}, 1fr)` }, children: [_jsx("div", { className: styles.hourLabels, children: hourLabels.map((h) => (_jsx("div", { className: styles.hourLabel, style: { height: CELL_HEIGHT }, children: h > 0 && `${String(h).padStart(2, '0')}:00` }, h))) }), visibleDays.map((day) => (_jsxs("div", { className: styles.dayColumn, style: { height: totalHours * CELL_HEIGHT }, onClick: (e) => handleGridClick(e, day), children: [hourLabels.map((h) => (_jsx("div", { className: styles.hourLine, style: { top: (h - minHour) * CELL_HEIGHT } }, h))), eventsForDay(day).map((evt) => (_jsx(EventBlock, { event: evt, minHour: minHour, template: step.eventTemplates?.find((t) => t.category === evt.category), onDelete: deleteEvent, readOnly: isReadOnly }, evt.id)))] }, day.toISOString())))] }) })] }));
-    // ------------------------------------------------------------------
-    // Month view
-    // ------------------------------------------------------------------
-    const renderMonth = () => {
-        const mStart = startOfMonth(current);
-        const mEnd = endOfMonth(current);
-        const gridStart = startOfWeek(mStart, { weekStartsOn: WEEK_START });
-        const gridEnd = endOfWeek(mEnd, { weekStartsOn: WEEK_START });
-        const days = [];
-        let d = gridStart;
-        while (d <= gridEnd) {
-            days.push(d);
-            d = addDays(d, 1);
-        }
-        const DOW_LABELS = ['Lun', 'Mar', 'Mié', 'Jue', 'Vie', 'Sáb', 'Dom'];
-        return (_jsxs("div", { className: styles.monthGrid, children: [DOW_LABELS.map((lbl) => (_jsx("div", { className: styles.monthDowHeader, children: lbl }, lbl))), days.map((day) => {
-                    const dayEvts = eventsForDay(day);
-                    const outside = !isSameMonth(day, current);
-                    return (_jsxs("div", { className: [
-                            styles.monthCell,
-                            outside ? styles.monthCellOutside : '',
-                            isToday(day) ? styles.monthCellToday : '',
-                        ].filter(Boolean).join(' '), onClick: () => handleMonthDayClick(day), children: [_jsx("span", { className: `${styles.monthCellNum} ${isToday(day) ? styles.todayCircle : ''}`, children: format(day, 'd') }), dayEvts.slice(0, 3).map((evt) => {
-                                const color = CATEGORY_COLORS[evt.category] ?? '#607D8B';
-                                return (_jsx("div", { className: styles.monthEventDot, style: { backgroundColor: color }, children: evt.title ?? CATEGORY_LABELS[evt.category] }, evt.id));
-                            }), dayEvts.length > 3 && (_jsxs("div", { className: styles.monthMoreLabel, children: ["+", dayEvts.length - 3, " m\u00E1s"] }))] }, day.toISOString()));
-                })] }));
-    };
-    // ------------------------------------------------------------------
-    // Create popover
-    // ------------------------------------------------------------------
-    const needsTitle = newCategory === CalendarEventCategory.MEETING ||
-        newCategory === CalendarEventCategory.CUSTOM;
-    const renderCreatePopover = () => {
-        if (!createState)
-            return null;
-        return (_jsxs(Popover, { open: true, anchorEl: createState.anchorEl, onClose: () => setCreate(null), anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, slotProps: { paper: { className: styles.popoverPaper } }, children: [_jsxs("div", { className: styles.popoverHeader, children: [_jsx("span", { className: styles.popoverTitle, children: "Nuevo evento" }), _jsx("button", { type: "button", className: styles.popoverClose, onClick: () => setCreate(null), children: _jsx(CloseIcon, { size: 16 }) })] }), _jsxs("div", { className: styles.popoverBody, children: [_jsx("div", { className: styles.popoverLabel, children: "Tipo" }), _jsx("div", { className: styles.categoryGrid, children: allowedCategories.map((cat) => (_jsxs("button", { type: "button", className: `${styles.categoryChip} ${newCategory === cat ? styles.categoryChipActive : ''}`, style: newCategory === cat ? { backgroundColor: CATEGORY_COLORS[cat], color: '#fff' } : {}, onClick: () => setNewCategory(cat), children: [_jsx("span", { className: styles.categoryDot, style: { backgroundColor: CATEGORY_COLORS[cat] } }), CATEGORY_LABELS[cat]] }, cat))) }), needsTitle && (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.popoverLabel, children: "Nombre" }), _jsx("input", { className: styles.popoverInput, value: newTitle, onChange: (e) => setNewTitle(e.target.value), placeholder: "Ej: Standup, Visita cliente\u2026", autoFocus: true })] })), _jsxs("div", { className: styles.timeRow, children: [_jsxs("div", { children: [_jsx("div", { className: styles.popoverLabel, children: "Inicio" }), _jsx("input", { type: "time", className: styles.popoverInput, value: newStart, onChange: (e) => setNewStart(e.target.value) })] }), _jsx("span", { className: styles.timeDash, children: "\u2013" }), _jsxs("div", { children: [_jsx("div", { className: styles.popoverLabel, children: "Fin" }), _jsx("input", { type: "time", className: styles.popoverInput, value: newEnd, onChange: (e) => setNewEnd(e.target.value) })] })] }), _jsxs("button", { type: "button", className: styles.createBtn, style: { backgroundColor: CATEGORY_COLORS[newCategory] }, onClick: handleCreate, children: [_jsx(AddIcon, { size: 16 }), "Agregar bloque"] })] })] }));
-    };
-    // ------------------------------------------------------------------
-    // Render
-    // ------------------------------------------------------------------
-    return (_jsxs("div", { className: styles.container, style: { width: widthStyle }, children: [_jsxs("div", { className: styles.toolbar, children: [_jsxs("div", { className: styles.viewSwitcher, children: [_jsx("button", { type: "button", className: `${styles.viewBtn} ${viewMode === 'day' ? styles.viewBtnActive : ''}`, onClick: () => setViewMode('day'), title: "D\u00EDa", children: _jsx(ViewDayIcon, { size: 18 }) }), _jsx("button", { type: "button", className: `${styles.viewBtn} ${viewMode === 'week' ? styles.viewBtnActive : ''}`, onClick: () => setViewMode('week'), title: "Semana", children: _jsx(ViewWeekIcon, { size: 18 }) }), _jsx("button", { type: "button", className: `${styles.viewBtn} ${viewMode === 'month' ? styles.viewBtnActive : ''}`, onClick: () => setViewMode('month'), title: "Mes", children: _jsx(CalendarIcon, { size: 18 }) })] }), _jsxs("div", { className: styles.navGroup, children: [_jsx("button", { type: "button", className: styles.navBtn, onClick: prev, children: _jsx(ArrowLeftIcon, { size: 20 }) }), _jsx("span", { className: styles.navLabel, children: navLabel() }), _jsx("button", { type: "button", className: styles.navBtn, onClick: next, children: _jsx(ArrowRightIcon, { size: 20 }) })] }), events.length > 0 && (_jsxs("span", { className: styles.eventBadge, children: [events.length, " evento", events.length !== 1 ? 's' : ''] })), !isReadOnly && viewMode !== 'month' && (_jsx("span", { className: styles.hintText, children: "Clic en el grid para agregar" }))] }), _jsx("div", { className: styles.calendarCard, children: viewMode === 'month' ? renderMonth() : renderTimeGrid() }), !isReadOnly && renderCreatePopover()] }));
+    return (_jsx("div", { ref: ref, style: cssVars, children: _jsx(ErkCalendar, { value: value, onChange: onChange, defaultView: step.defaultView, enabledViews: step.enabledViews, allowedCategories: step.allowedCategories, eventTemplates: step.eventTemplates, showWeekends: step.showWeekends, minTime: step.minTime, maxTime: step.maxTime, allowRecurring: step.allowRecurring, timezone: step.timezone, readOnly: isReadOnly, error: error?.message }) }));
 }
 export default MaterialCalendarStep;

package/dist/Shared/ErkBookingPicker/ErkBookingPicker.d.ts

@@ -21,8 +21,11 @@ export interface ErkBookingPickerProps {
     error?: string;
 }
 /**
- * Selector de cita reutilizable en una sola vista (persona · día · hora), con panel
- * de resumen a la izquierda y barra de confirmación. Réplica del diseño del mockup.
+ * Selector de cita: una tarjeta de entrada ("Agendar cita") abre el wizard en un modal —
+ * una decisión por pantalla (persona → día → hora → confirmar), con panel izquierdo de
+ * resumen que se va llenando, breadcrumb navegable arriba y barra inferior Atrás / Siguiente.
+ * En el paso final el panel derecho desaparece y el resumen se expande en una columna
+ * centrada (cross-fade corto). Confirmar cierra el modal y deja el resumen compacto.
  */
 declare function ErkBookingPicker({ value, onChange, label, description, durationMinutes, bufferMinutes, bookingMode, temporaryLockMinutes, personSelectionMode, persons, collectContact, fetchSlots, readOnly, error, }: ErkBookingPickerProps): JSX.Element;
 export default ErkBookingPicker;

package/dist/Shared/ErkBookingPicker/ErkBookingPicker.js

@@ -1,8 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Dialog } from '@mui/material';
 import { addDays, addMonths, format, isBefore, isSameDay, isSameMonth, startOfDay, startOfMonth, startOfWeek, } from 'date-fns';
 import { es } from 'date-fns/locale';
 import { BookingMode, PersonSelectionMode, } from '../../@Types/BookingFormStep';
+import ErkButton from '../ErkButton/ErkButton';
 import ErkTextField from '../ErkTextField/ErkTextField';
 import styles from './ErkBookingPicker.module.css';
 const WEEK_STARTS_ON = 1;
@@ -12,6 +14,26 @@ const MODE_LABEL = {
     [BookingMode.VIRTUAL]: 'Virtual',
     [BookingMode.HYBRID]: 'Híbrida',
 };
+const STEP_LABEL = {
+    person: 'Persona',
+    day: 'Día',
+    hour: 'Hora',
+    confirm: 'Confirmar',
+};
+const STEP_HINT = {
+    person: 'Elige con quién agendar',
+    day: 'Elige un día',
+    hour: 'Elige una hora libre',
+    confirm: 'Confirma tu cita',
+};
+/** Duración del fade al reestructurarse el layout (entrar/salir del paso final). */
+const XFADE_MS = 160;
+/** El CTA de confirmar usa el acento del form (secondaryContrastColor vía --booking-accent). */
+const ACCENT_SX = {
+    backgroundColor: 'var(--booking-accent, #ee6c4d)',
+    '&:hover': { backgroundColor: 'var(--booking-accent, #ee6c4d)', filter: 'brightness(0.95)' },
+    '&:disabled': { backgroundColor: 'var(--booking-accent, #ee6c4d)', color: '#fff' },
+};
 function fmtDate(date) {
     return format(date, 'yyyy-MM-dd');
 }
@@ -31,22 +53,31 @@ function capitalize(text) {
     return text.charAt(0).toUpperCase() + text.slice(1);
 }
 /**
- * Selector de cita reutilizable en una sola vista (persona · día · hora), con panel
- * de resumen a la izquierda y barra de confirmación. Réplica del diseño del mockup.
+ * Selector de cita: una tarjeta de entrada ("Agendar cita") abre el wizard en un modal —
+ * una decisión por pantalla (persona → día → hora → confirmar), con panel izquierdo de
+ * resumen que se va llenando, breadcrumb navegable arriba y barra inferior Atrás / Siguiente.
+ * En el paso final el panel derecho desaparece y el resumen se expande en una columna
+ * centrada (cross-fade corto). Confirmar cierra el modal y deja el resumen compacto.
  */
 function ErkBookingPicker({ value, onChange, label, description, durationMinutes, bufferMinutes, bookingMode, temporaryLockMinutes, personSelectionMode, persons, collectContact = false, fetchSlots, readOnly = false, error, }) {
     const needsPerson = !!personSelectionMode && personSelectionMode !== PersonSelectionMode.NONE;
     const personsOptional = personSelectionMode === PersonSelectionMode.OPTIONAL;
     const today = startOfDay(new Date());
+    const wizardKeys = useMemo(() => (needsPerson ? ['person', 'day', 'hour', 'confirm'] : ['day', 'hour', 'confirm']), [needsPerson]);
+    const finalIdx = wizardKeys.length - 1;
+    const [open, setOpen] = useState(false);
+    const [wizStep, setWizStep] = useState(0);
+    const [xfade, setXfade] = useState(false);
     const [person, setPerson] = useState(undefined);
     const [personTouched, setPersonTouched] = useState(false);
-    const [date, setDate] = useState(today);
+    const [date, setDate] = useState(undefined);
     const [viewMonth, setViewMonth] = useState(() => startOfMonth(today));
     const [slot, setSlot] = useState(undefined);
     const [slots, setSlots] = useState([]);
     const [loading, setLoading] = useState(false);
     const [contactName, setContactName] = useState('');
     const [contactEmail, setContactEmail] = useState('');
+    const reduceMotion = useMemo(() => typeof window !== 'undefined' && !!window.matchMedia?.('(prefers-reduced-motion: reduce)').matches, []);
     const monthCells = useMemo(() => {
         const first = startOfWeek(startOfMonth(viewMonth), { weekStartsOn: WEEK_STARTS_ON });
         return Array.from({ length: 42 }, (_, i) => addDays(first, i));
@@ -67,15 +98,41 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
         }
     }, [fetchSlots]);
     useEffect(() => {
-        if (value)
-            return;
-        if (needsPerson && !personsOptional && !personTouched)
+        if (value || !date)
             return;
         void loadSlots(date, person?.id);
-    }, [value, needsPerson, personsOptional, personTouched, date, person, loadSlots]);
+    }, [value, date, person, loadSlots]);
+    // Al entrar/salir del paso final el layout se reestructura; el reacomodo
+    // ocurre mientras la tarjeta está invisible (fade corto en dos fases).
+    const goToStep = (target) => {
+        const crossesFinal = (wizStep === finalIdx) !== (target === finalIdx);
+        if (!crossesFinal || reduceMotion) {
+            setWizStep(target);
+            return;
+        }
+        setXfade(true);
+        window.setTimeout(() => {
+            setWizStep(target);
+            requestAnimationFrame(() => requestAnimationFrame(() => setXfade(false)));
+        }, XFADE_MS);
+    };
+    const currentKey = wizardKeys[wizStep];
+    const canAdvance = (() => {
+        switch (currentKey) {
+            case 'person':
+                return personsOptional ? personTouched : !!person;
+            case 'day':
+                return !!date;
+            case 'hour':
+                return !!slot;
+            default:
+                return true;
+        }
+    })();
     const confirm = () => {
-        if (!slot)
+        if (!slot || !date)
             return;
+        setOpen(false);
         onChange({
             type: 'BOOKING_VALUE',
             slotId: slot.id,
@@ -91,8 +148,10 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
     };
     const reset = () => {
         onChange(null);
+        setWizStep(0);
         setPerson(undefined);
         setPersonTouched(false);
+        setDate(undefined);
         setSlot(undefined);
         setContactName('');
         setContactEmail('');
@@ -102,9 +161,9 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
         setPersonTouched(true);
         setSlot(undefined);
     };
-    // Read-only / already booked → compact summary
+    // Read-only / already booked → compact summary with the same card aesthetic
     if (readOnly || value) {
-        return (_jsx("div", { className: styles.container, children: _jsxs("div", { className: styles.booked, children: [_jsx("div", { className: styles.bookedIcon, children: "\u2713" }), _jsxs("div", { className: styles.bookedInfo, children: [_jsx("span", { className: styles.bookedLabel, children: label }), _jsx("span", { className: styles.bookedMain, children: value
+        return (_jsx("div", { className: styles.container, children: _jsxs("div", { className: styles.entry, children: [_jsx("div", { className: styles.bookedIcon, children: "\u2713" }), _jsxs("div", { className: styles.entryInfo, children: [_jsx("span", { className: styles.entryLabel, children: label }), _jsx("span", { className: styles.bookedMain, children: value
                                     ? [
                                         value.personName,
                                         capitalize(longDate(new Date(value.date + 'T00:00:00'))),
@@ -112,38 +171,53 @@ function ErkBookingPicker({ value, onChange, label, description, durationMinutes
                                     ]
                                         .filter(Boolean)
                                         .join(' · ')
-                                    : 'Sin cita' })] }), value && !readOnly && (_jsx("button", { type: "button", className: styles.changeBtn, onClick: reset, children: "Cambiar" }))] }) }));
+                                    : 'Sin cita' })] }), value && !readOnly && _jsx(ErkButton, { text: "Cambiar", variant: "outlined", onClick: reset })] }) }));
     }
-    // Stepper state
-    const steps = [...(needsPerson ? ['Persona'] : []), 'Día y hora', 'Confirmar'];
-    const current = needsPerson && !personTouched ? 0 : slot ? steps.length - 1 : needsPerson ? 1 : 0;
-    return (_jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.card, children: [_jsxs("div", { className: styles.book, children: [_jsxs("aside", { className: styles.who, children: [_jsxs("div", { className: styles.brand, children: [_jsx("div", { className: styles.avatar, children: person ? initials(person.name) : '📅' }), _jsxs("div", { children: [_jsx("h2", { className: styles.brandName, children: person?.name ?? label }), _jsx("p", { className: styles.brandRole, children: person?.role ?? description ?? 'Agenda tu cita' }), person && (_jsx("button", { type: "button", className: styles.change, onClick: () => pickPerson(undefined), children: "Cambiar persona" }))] })] }), _jsxs("div", { className: styles.meta, children: [_jsx("span", { className: styles.metaLbl, children: "Detalles" }), _jsxs("div", { className: styles.row, children: [_jsx("span", { className: styles.ic, children: "\u25F7" }), durationMinutes, " min", bufferMinutes ? ` · buffer ${bufferMinutes} min` : ''] }), bookingMode && (_jsxs("div", { className: styles.row, children: [_jsx("span", { className: styles.ic, children: "\u25F1" }), _jsx("span", { className: styles.pill, children: MODE_LABEL[bookingMode] })] }))] }), !!temporaryLockMinutes && (_jsxs("div", { className: styles.lock, children: ["\u23F3 Reservaremos el horario ", _jsxs("b", { children: [temporaryLockMinutes, " min"] }), " mientras confirmas."] }))] }), _jsxs("div", { className: styles.right, children: [_jsx("div", { className: styles.stepper, children: steps.map((s, i) => (_jsxs("span", { className: styles.stepGroup, children: [_jsxs("span", { className: i < current
-                                                        ? `${styles.stepItem} ${styles.stepDone}`
-                                                        : i === current
-                                                            ? `${styles.stepItem} ${styles.stepOn}`
-                                                            : styles.stepItem, children: [_jsx("span", { className: styles.stepNum, children: i < current ? '✓' : i + 1 }), s] }), i < steps.length - 1 && _jsx("span", { className: styles.stepSep })] }, s))) }), needsPerson && (_jsxs(_Fragment, { children: [_jsx("p", { className: styles.blockLbl, children: "\u00BFCon qui\u00E9n quieres agendar?" }), _jsxs("div", { className: styles.persons, children: [(persons ?? []).map((p) => (_jsxs("button", { type: "button", className: person?.id === p.id ? `${styles.pcard} ${styles.pcardOn}` : styles.pcard, onClick: () => pickPerson(p), children: [_jsx("span", { className: styles.pav, children: initials(p.name) }), _jsxs("span", { className: styles.pinfo, children: [_jsx("span", { className: styles.pn, children: p.name }), p.role && _jsx("span", { className: styles.pr, children: p.role })] })] }, p.id))), personsOptional && (_jsxs("button", { type: "button", className: personTouched && !person
-                                                            ? `${styles.pcard} ${styles.pcardAny} ${styles.pcardOn}`
-                                                            : `${styles.pcard} ${styles.pcardAny}`, onClick: () => pickPerson(undefined), children: [_jsx("span", { className: styles.pav, children: "\u2726" }), _jsxs("span", { className: styles.pinfo, children: [_jsx("span", { className: styles.pn, children: "Cualquiera" }), _jsx("span", { className: styles.pr, children: "El sistema asigna" })] })] }))] })] })), _jsxs("div", { className: styles.pick, children: [_jsxs("div", { children: [_jsx("p", { className: styles.blockLbl, children: "Elige un d\u00EDa" }), _jsxs("div", { className: styles.monthHead, children: [_jsx("span", { className: styles.monthTitle, children: capitalize(format(viewMonth, 'MMMM yyyy', { locale: es })) }), _jsxs("span", { className: styles.monthNav, children: [_jsx("button", { type: "button", onClick: () => setViewMonth((m) => addMonths(m, -1)), children: "\u2039" }), _jsx("button", { type: "button", onClick: () => setViewMonth((m) => addMonths(m, 1)), children: "\u203A" })] })] }), _jsxs("div", { className: styles.mgrid, children: [DOW.map((d, i) => (_jsx("span", { className: styles.mdow, children: d }, i))), monthCells.map((d) => {
-                                                                const outside = !isSameMonth(d, viewMonth);
-                                                                const past = isBefore(d, today);
-                                                                const selectable = !outside && !past;
-                                                                const cls = isSameDay(d, date)
-                                                                    ? `${styles.mday} ${styles.mdaySel}`
-                                                                    : selectable
-                                                                        ? `${styles.mday} ${styles.mdayFree}`
-                                                                        : `${styles.mday} ${styles.mdayNone}`;
-                                                                return (_jsx("button", { type: "button", disabled: !selectable, className: cls, onClick: () => {
-                                                                        setDate(d);
-                                                                        setSlot(undefined);
-                                                                    }, children: format(d, 'd') }, d.toISOString()));
-                                                            })] })] }), _jsxs("div", { children: [_jsx("p", { className: styles.blockLbl, children: "Horarios libres" }), _jsxs("div", { className: styles.slotsHead, children: [_jsx("b", { children: capitalize(longDate(date)) }), " \u00B7 ", durationMinutes, " min"] }), loading ? (_jsx("div", { className: styles.empty, children: "Buscando horarios\u2026" })) : slots.length === 0 ? (_jsx("div", { className: styles.empty, children: "No hay horarios disponibles ese d\u00EDa." })) : (_jsx("div", { className: styles.slots, children: slots.map((s) => (_jsx("button", { type: "button", disabled: !s.available, className: slot?.id === s.id
-                                                                ? `${styles.slot} ${styles.slotSel}`
-                                                                : s.available
-                                                                    ? styles.slot
-                                                                    : `${styles.slot} ${styles.slotTaken}`, onClick: () => s.available && setSlot(s), children: s.startTime }, s.id))) }))] })] })] })] }), _jsxs("div", { className: styles.confirm, children: [_jsx("div", { className: styles.selSummary, children: slot
-                                    ? [person?.name, capitalize(longDate(date)), `${slot.startTime}–${slot.endTime}`]
-                                        .filter(Boolean)
-                                        .join(' · ')
-                                    : 'Elige día y hora' }), collectContact && (_jsxs("div", { className: styles.cfields, children: [_jsx(ErkTextField, { label: "Nombre", value: contactName, onChange: setContactName }), _jsx(ErkTextField, { label: "Correo", value: contactEmail, onChange: setContactEmail })] })), _jsx("button", { type: "button", className: styles.cta, disabled: !slot, onClick: confirm, children: "Confirmar cita" })] })] }), error && _jsx("div", { className: styles.err, children: error })] }));
+    const isFinal = wizStep === finalIdx;
+    const personLabel = person?.name ?? (personTouched && personsOptional ? 'Cualquiera' : undefined);
+    const dayText = date ? capitalize(longDate(date)) : undefined;
+    const hourText = slot ? `${slot.startTime} – ${slot.endTime}` : undefined;
+    const summaryRows = [
+        ...(needsPerson ? [{ key: 'person', placeholder: 'Persona', text: personLabel }] : []),
+        { key: 'day', placeholder: 'Día', text: dayText },
+        { key: 'hour', placeholder: 'Hora', text: hourText },
+    ];
+    const navParts = [];
+    if (personLabel)
+        navParts.push(_jsx("b", { children: personLabel }, "p"));
+    if (dayText)
+        navParts.push(_jsx("span", { children: dayText }, "d"));
+    if (hourText)
+        navParts.push(_jsx("span", { className: styles.navHl, children: hourText }, "h"));
+    return (_jsxs("div", { className: styles.container, children: [_jsxs("div", { className: styles.entry, children: [_jsx("div", { className: styles.avatar, children: "\uD83D\uDCC5" }), _jsxs("div", { className: styles.entryInfo, children: [_jsx("span", { className: styles.entryLabel, children: label }), _jsx("span", { className: styles.entrySub, children: description ?? 'Agenda tu cita' })] }), _jsx(ErkButton, { text: "Agendar cita", onClick: () => setOpen(true) })] }), _jsx(Dialog, { open: open, onClose: () => setOpen(false), maxWidth: "md", fullWidth: true, slotProps: { paper: { style: { borderRadius: 16, background: 'transparent', boxShadow: 'none' } } }, children: _jsxs("div", { className: `${styles.card}${isFinal ? ` ${styles.cardFinal}` : ''}${xfade ? ` ${styles.xfade}` : ''}`, children: [_jsxs("div", { className: isFinal ? `${styles.book} ${styles.bookFinal}` : styles.book, children: [_jsxs("aside", { className: styles.who, children: [_jsxs("div", { className: styles.brand, children: [_jsx("div", { className: styles.avatar, children: person ? initials(person.name) : '📅' }), _jsxs("div", { children: [_jsx("h2", { className: styles.brandName, children: person?.name ?? label }), _jsx("p", { className: styles.brandRole, children: person?.role ?? description ?? 'Agenda tu cita' })] })] }), _jsxs("div", { className: styles.meta, children: [_jsxs("div", { className: styles.row, children: [_jsx("span", { className: styles.ic, children: "\u25F7" }), durationMinutes, " min", bufferMinutes ? ` · buffer ${bufferMinutes} min` : ''] }), bookingMode && (_jsxs("div", { className: styles.row, children: [_jsx("span", { className: styles.ic, children: "\u25F1" }), _jsx("span", { className: styles.pill, children: MODE_LABEL[bookingMode] })] }))] }), _jsx("div", { className: styles.sum, "aria-live": "polite", children: summaryRows.map((r) => (_jsxs("div", { className: r.text ? `${styles.srow} ${styles.srowOn}` : styles.srow, children: [_jsx("span", { className: styles.dot, children: "\u2713" }), _jsx("span", { children: r.text ?? r.placeholder })] }, r.key))) }), isFinal && collectContact && (_jsxs("div", { className: styles.cfields, children: [_jsx(ErkTextField, { label: "Nombre", value: contactName, onChange: setContactName }), _jsx(ErkTextField, { label: "Correo", value: contactEmail, onChange: setContactEmail })] })), !!temporaryLockMinutes && (_jsxs("div", { className: styles.lock, children: ["\u23F3 Reservaremos el horario ", _jsxs("b", { children: [temporaryLockMinutes, " min"] }), " mientras confirmas."] }))] }), _jsxs("div", { className: styles.right, children: [_jsx("nav", { className: styles.stepper, "aria-label": "Progreso", children: wizardKeys.map((key, i) => (_jsxs("span", { className: styles.stepGroup, children: [_jsxs("button", { type: "button", disabled: i >= wizStep, onClick: () => goToStep(i), className: i < wizStep
+                                                            ? `${styles.stepItem} ${styles.stepDone}`
+                                                            : i === wizStep
+                                                                ? `${styles.stepItem} ${styles.stepOn}`
+                                                                : styles.stepItem, children: [_jsx("span", { className: styles.stepNum, children: i < wizStep ? '✓' : i + 1 }), STEP_LABEL[key]] }), i < wizardKeys.length - 1 && _jsx("span", { className: styles.stepSep })] }, key))) }), currentKey === 'person' && (_jsxs("section", { className: styles.pane, children: [_jsx("h3", { className: styles.q, children: "\u00BFCon qui\u00E9n quieres agendar?" }), _jsx("p", { className: styles.qsub, children: personsOptional
+                                                        ? 'Elige una persona o deja que el sistema asigne a quien esté disponible.'
+                                                        : 'Elige la persona con la que quieres tu cita.' }), _jsxs("div", { className: styles.persons, children: [(persons ?? []).map((p) => (_jsxs("button", { type: "button", className: person?.id === p.id ? `${styles.pcard} ${styles.pcardOn}` : styles.pcard, onClick: () => pickPerson(p), children: [_jsx("span", { className: styles.pav, children: initials(p.name) }), _jsxs("span", { className: styles.pinfo, children: [_jsx("span", { className: styles.pn, children: p.name }), p.role && _jsx("span", { className: styles.pr, children: p.role })] }), _jsx("span", { className: styles.chk, children: "\u2713" })] }, p.id))), personsOptional && (_jsxs("button", { type: "button", className: personTouched && !person
+                                                                ? `${styles.pcard} ${styles.pcardAny} ${styles.pcardOn}`
+                                                                : `${styles.pcard} ${styles.pcardAny}`, onClick: () => pickPerson(undefined), children: [_jsx("span", { className: styles.pav, children: "\u2726" }), _jsxs("span", { className: styles.pinfo, children: [_jsx("span", { className: styles.pn, children: "Cualquiera" }), _jsx("span", { className: styles.pr, children: "El sistema asigna" })] }), _jsx("span", { className: styles.chk, children: "\u2713" })] }))] })] }, "person")), currentKey === 'day' && (_jsxs("section", { className: styles.pane, children: [_jsx("h3", { className: styles.q, children: "Elige un d\u00EDa" }), _jsx("p", { className: styles.qsub, children: "Solo se muestran fechas a partir de hoy." }), _jsxs("div", { className: styles.monthWrap, children: [_jsxs("div", { className: styles.monthHead, children: [_jsx("span", { className: styles.monthTitle, children: capitalize(format(viewMonth, 'MMMM yyyy', { locale: es })) }), _jsxs("span", { className: styles.monthNav, children: [_jsx("button", { type: "button", "aria-label": "Mes anterior", onClick: () => setViewMonth((m) => addMonths(m, -1)), children: "\u2039" }), _jsx("button", { type: "button", "aria-label": "Mes siguiente", onClick: () => setViewMonth((m) => addMonths(m, 1)), children: "\u203A" })] })] }), _jsxs("div", { className: styles.mgrid, children: [DOW.map((d, i) => (_jsx("span", { className: styles.mdow, children: d }, i))), monthCells.map((d) => {
+                                                                    const outside = !isSameMonth(d, viewMonth);
+                                                                    const past = isBefore(d, today);
+                                                                    const selectable = !outside && !past;
+                                                                    const cls = date && isSameDay(d, date)
+                                                                        ? `${styles.mday} ${styles.mdaySel}`
+                                                                        : selectable
+                                                                            ? `${styles.mday} ${styles.mdayFree}`
+                                                                            : `${styles.mday} ${styles.mdayNone}`;
+                                                                    return (_jsx("button", { type: "button", disabled: !selectable, className: cls, onClick: () => {
+                                                                            setDate(d);
+                                                                            setSlot(undefined);
+                                                                        }, children: format(d, 'd') }, d.toISOString()));
+                                                                })] })] })] }, "day")), currentKey === 'hour' && (_jsxs("section", { className: styles.pane, children: [_jsx("h3", { className: styles.q, children: "Elige una hora" }), _jsxs("p", { className: styles.qsub, children: [dayText, " \u00B7 citas de ", durationMinutes, " min"] }), loading ? (_jsx("div", { className: styles.empty, children: "Buscando horarios\u2026" })) : slots.length === 0 ? (_jsx("div", { className: styles.empty, children: "No hay horarios disponibles ese d\u00EDa." })) : (_jsxs(_Fragment, { children: [_jsx("div", { className: styles.slots, children: slots.map((s) => (_jsx("button", { type: "button", disabled: !s.available, className: slot?.id === s.id
+                                                                    ? `${styles.slot} ${styles.slotSel}`
+                                                                    : s.available
+                                                                        ? styles.slot
+                                                                        : `${styles.slot} ${styles.slotTaken}`, onClick: () => s.available && setSlot(s), children: s.startTime }, s.id))) }), _jsx("p", { className: styles.takenNote, children: "Tachados = ocupados por otro evento o cita." })] }))] }, "hour")), currentKey === 'confirm' && (_jsxs("section", { className: `${styles.pane} ${styles.paneFinal}`, children: [_jsx("h3", { className: styles.q, children: "Revisa y confirma tu cita" }), _jsx("p", { className: styles.qsub, children: collectContact
+                                                        ? 'Si todo está bien, completa tus datos y confirma.'
+                                                        : 'Si todo está bien, confirma tu cita.' })] }, "confirm"))] })] }), _jsxs("div", { className: styles.navbar, children: [_jsx("div", { className: styles.navSummary, children: isFinal || !canAdvance || navParts.length === 0
+                                        ? STEP_HINT[currentKey]
+                                        : navParts.reduce((acc, part, i) => (i === 0 ? [part] : [...acc, _jsx("span", { children: " \u00B7 " }, `s${i}`), part]), []) }), wizStep > 0 && (_jsx(ErkButton, { text: "Atr\u00E1s", variant: "outlined", onClick: () => goToStep(wizStep - 1) })), isFinal ? (_jsx(ErkButton, { text: "Confirmar cita", sx: ACCENT_SX, disabled: !slot, onClick: confirm })) : (_jsx(ErkButton, { text: "Siguiente", disabled: !canAdvance, onClick: () => goToStep(wizStep + 1) }))] })] }) }), error && _jsx("div", { className: styles.err, children: error })] }));
 }
 export default ErkBookingPicker;