@dataemergencia/emergency 0.4.0 → 0.6.0

package/dist/index.cjs

@@ -763,6 +763,7 @@ function createEmergencyStore(config) {
 		lastError: null,
 		geolocation: null,
 		geolocationError: null,
+		contactPhone: null,
 		realtimeStatus: "idle",
 		abortResult: null,
 		simulationResult: null,
@@ -1205,7 +1206,8 @@ function createEmergencyController(deps) {
 		patch({
 			panelOpen: false,
 			abortConfirmation: false,
-			simulationConfirmation: false
+			simulationConfirmation: false,
+			contactPhone: null
 		});
 		events.emit("panel:closed", { reason });
 	}
@@ -1254,6 +1256,7 @@ function createEmergencyController(deps) {
 			lastError: null,
 			geolocation: null,
 			geolocationError: null,
+			contactPhone: null,
 			realtimeStatus: "idle",
 			abortResult: null,
 			simulationResult: null,
@@ -1295,7 +1298,8 @@ function createEmergencyController(deps) {
 					geolocationError: null,
 					...state.geolocationError !== null || state.abortResult?.ok === false || state.simulationResult?.ok === false || state.phase.kind === "ready" && state.lastError !== null ? { lastError: null } : {}
 				});
-			}
+			},
+			setContactPhone: (phone) => patch({ contactPhone: phone })
 		},
 		store,
 		events
@@ -1526,6 +1530,11 @@ const paths = {
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 7h.01" })
 	] }),
 	"arrow-left": /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M19 12H5" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "m12 19-7-7 7-7" })] }),
+	"map-pin": /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 22s7-6.2 7-12a7 7 0 1 0-14 0c0 5.8 7 12 7 12z" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("circle", {
+		cx: "12",
+		cy: "10",
+		r: "2.5"
+	})] }),
 	"credit-card-plus": /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M12 18H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5" }),
 		/* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", { d: "M18 12h.01" }),
@@ -1567,6 +1576,12 @@ var panel_module_default = {
 	"de-emergency-slide-in": "de-emergency-de-emergency-slide-in-nA5Hwa",
 	"de-emergency-slide-up": "de-emergency-de-emergency-slide-up-nA5Hwa",
 	"de-emergency-spin": "de-emergency-de-emergency-spin-nA5Hwa",
+	"emergency-alert-row__badge": "de-emergency-emergency-alert-row__badge-nA5Hwa",
+	"emergency-alert-row__button": "de-emergency-emergency-alert-row__button-nA5Hwa",
+	"emergency-alert-row__stat": "de-emergency-emergency-alert-row__stat-nA5Hwa",
+	"emergency-alert-row__stats": "de-emergency-emergency-alert-row__stats-nA5Hwa",
+	"emergency-alert-row__time": "de-emergency-emergency-alert-row__time-nA5Hwa",
+	"emergency-alert-row__top": "de-emergency-emergency-alert-row__top-nA5Hwa",
 	"emergency-availability": "de-emergency-emergency-availability-nA5Hwa",
 	"emergency-availability__card": "de-emergency-emergency-availability__card-nA5Hwa",
 	"emergency-availability__card-body": "de-emergency-emergency-availability__card-body-nA5Hwa",
@@ -1590,6 +1605,19 @@ var panel_module_default = {
 	"emergency-confirmation__icon--information": "de-emergency-emergency-confirmation__icon--information-nA5Hwa",
 	"emergency-confirmation__text": "de-emergency-emergency-confirmation__text-nA5Hwa",
 	"emergency-confirmation__title": "de-emergency-emergency-confirmation__title-nA5Hwa",
+	"emergency-details": "de-emergency-emergency-details-nA5Hwa",
+	"emergency-details__balance": "de-emergency-emergency-details__balance-nA5Hwa",
+	"emergency-details__card": "de-emergency-emergency-details__card-nA5Hwa",
+	"emergency-details__card-body": "de-emergency-emergency-details__card-body-nA5Hwa",
+	"emergency-details__card-header": "de-emergency-emergency-details__card-header-nA5Hwa",
+	"emergency-details__card-title": "de-emergency-emergency-details__card-title-nA5Hwa",
+	"emergency-details__empty": "de-emergency-emergency-details__empty-nA5Hwa",
+	"emergency-details__heading": "de-emergency-emergency-details__heading-nA5Hwa",
+	"emergency-details__history-button": "de-emergency-emergency-details__history-button-nA5Hwa",
+	"emergency-details__list": "de-emergency-emergency-details__list-nA5Hwa",
+	"emergency-details__section": "de-emergency-emergency-details__section-nA5Hwa",
+	"emergency-details__subtitle": "de-emergency-emergency-details__subtitle-nA5Hwa",
+	"emergency-details__title": "de-emergency-emergency-details__title-nA5Hwa",
 	"emergency-error-message": "de-emergency-emergency-error-message-nA5Hwa",
 	"emergency-error-message__container": "de-emergency-emergency-error-message__container-nA5Hwa",
 	"emergency-error-message__content": "de-emergency-emergency-error-message__content-nA5Hwa",
@@ -1600,10 +1628,33 @@ var panel_module_default = {
 	"emergency-error-message__title": "de-emergency-emergency-error-message__title-nA5Hwa",
 	"emergency-feedback": "de-emergency-emergency-feedback-nA5Hwa",
 	"emergency-feedback__dismiss": "de-emergency-emergency-feedback__dismiss-nA5Hwa",
+	"emergency-history": "de-emergency-emergency-history-nA5Hwa",
+	"emergency-history__empty": "de-emergency-emergency-history__empty-nA5Hwa",
+	"emergency-history__heading": "de-emergency-emergency-history__heading-nA5Hwa",
+	"emergency-history__list": "de-emergency-emergency-history__list-nA5Hwa",
+	"emergency-history__more": "de-emergency-emergency-history__more-nA5Hwa",
+	"emergency-history__subtitle": "de-emergency-emergency-history__subtitle-nA5Hwa",
+	"emergency-history__title": "de-emergency-emergency-history__title-nA5Hwa",
+	"emergency-message-detail": "de-emergency-emergency-message-detail-nA5Hwa",
+	"emergency-message-detail__back": "de-emergency-emergency-message-detail__back-nA5Hwa",
+	"emergency-message-detail__card": "de-emergency-emergency-message-detail__card-nA5Hwa",
+	"emergency-message-detail__card-header": "de-emergency-emergency-message-detail__card-header-nA5Hwa",
+	"emergency-message-detail__card-title": "de-emergency-emergency-message-detail__card-title-nA5Hwa",
+	"emergency-message-detail__empty": "de-emergency-emergency-message-detail__empty-nA5Hwa",
+	"emergency-message-detail__empty-text": "de-emergency-emergency-message-detail__empty-text-nA5Hwa",
+	"emergency-message-detail__label": "de-emergency-emergency-message-detail__label-nA5Hwa",
+	"emergency-message-detail__list": "de-emergency-emergency-message-detail__list-nA5Hwa",
+	"emergency-message-detail__row": "de-emergency-emergency-message-detail__row-nA5Hwa",
+	"emergency-message-detail__value": "de-emergency-emergency-message-detail__value-nA5Hwa",
 	"emergency-panel": "de-emergency-emergency-panel-nA5Hwa",
 	"emergency-panel__availability-region": "de-emergency-emergency-panel__availability-region-nA5Hwa",
 	"emergency-panel__body": "de-emergency-emergency-panel__body-nA5Hwa",
+	"emergency-panel__body--details": "de-emergency-emergency-panel__body--details-nA5Hwa",
+	"emergency-panel__body--history": "de-emergency-emergency-panel__body--history-nA5Hwa",
+	"emergency-panel__body--message-detail": "de-emergency-emergency-panel__body--message-detail-nA5Hwa",
+	"emergency-panel__body--pre-emergency": "de-emergency-emergency-panel__body--pre-emergency-nA5Hwa",
 	"emergency-panel__body--pricing": "de-emergency-emergency-panel__body--pricing-nA5Hwa",
+	"emergency-panel__body--primary": "de-emergency-emergency-panel__body--primary-nA5Hwa",
 	"emergency-panel__body-split": "de-emergency-emergency-panel__body-split-nA5Hwa",
 	"emergency-panel__body-split--with-availability": "de-emergency-emergency-panel__body-split--with-availability-nA5Hwa",
 	"emergency-panel__body-title": "de-emergency-emergency-panel__body-title-nA5Hwa",
@@ -1612,19 +1663,37 @@ var panel_module_default = {
 	"emergency-panel__button--emergency": "de-emergency-emergency-panel__button--emergency-nA5Hwa",
 	"emergency-panel__button--simulation": "de-emergency-emergency-panel__button--simulation-nA5Hwa",
 	"emergency-panel__close-button": "de-emergency-emergency-panel__close-button-nA5Hwa",
+	"emergency-panel__close-button--prompt": "de-emergency-emergency-panel__close-button--prompt-nA5Hwa",
 	"emergency-panel__close-icon": "de-emergency-emergency-panel__close-icon-nA5Hwa",
 	"emergency-panel__footer": "de-emergency-emergency-panel__footer-nA5Hwa",
+	"emergency-panel__footer--single": "de-emergency-emergency-panel__footer--single-nA5Hwa",
+	"emergency-panel__footer--square": "de-emergency-emergency-panel__footer--square-nA5Hwa",
 	"emergency-panel__header": "de-emergency-emergency-panel__header-nA5Hwa",
 	"emergency-panel__prompt-region": "de-emergency-emergency-panel__prompt-region-nA5Hwa",
+	"emergency-panel__prompt-region--idle": "de-emergency-emergency-panel__prompt-region--idle-nA5Hwa",
+	"emergency-panel__sr-only": "de-emergency-emergency-panel__sr-only-nA5Hwa",
 	"emergency-panel__title": "de-emergency-emergency-panel__title-nA5Hwa",
 	"emergency-panel--hidden": "de-emergency-emergency-panel--hidden-nA5Hwa",
+	"emergency-pre-emergency": "de-emergency-emergency-pre-emergency-nA5Hwa",
+	"emergency-pre-emergency__error": "de-emergency-emergency-pre-emergency__error-nA5Hwa",
+	"emergency-pre-emergency__form": "de-emergency-emergency-pre-emergency__form-nA5Hwa",
+	"emergency-pre-emergency__input": "de-emergency-emergency-pre-emergency__input-nA5Hwa",
+	"emergency-pre-emergency__input--area-code": "de-emergency-emergency-pre-emergency__input--area-code-nA5Hwa",
+	"emergency-pre-emergency__input--invalid": "de-emergency-emergency-pre-emergency__input--invalid-nA5Hwa",
+	"emergency-pre-emergency__input--number": "de-emergency-emergency-pre-emergency__input--number-nA5Hwa",
+	"emergency-pre-emergency__input--valid": "de-emergency-emergency-pre-emergency__input--valid-nA5Hwa",
+	"emergency-pre-emergency__label": "de-emergency-emergency-pre-emergency__label-nA5Hwa",
+	"emergency-pre-emergency__notice": "de-emergency-emergency-pre-emergency__notice-nA5Hwa",
+	"emergency-pre-emergency__notice-icon": "de-emergency-emergency-pre-emergency__notice-icon-nA5Hwa",
+	"emergency-pre-emergency__notice-text": "de-emergency-emergency-pre-emergency__notice-text-nA5Hwa",
+	"emergency-pre-emergency__phone-row": "de-emergency-emergency-pre-emergency__phone-row-nA5Hwa",
 	"emergency-pricing": "de-emergency-emergency-pricing-nA5Hwa",
 	"emergency-pricing__badge": "de-emergency-emergency-pricing__badge-nA5Hwa",
-	"emergency-pricing__footnote": "de-emergency-emergency-pricing__footnote-nA5Hwa",
 	"emergency-pricing__heading": "de-emergency-emergency-pricing__heading-nA5Hwa",
 	"emergency-pricing__package": "de-emergency-emergency-pricing__package-nA5Hwa",
 	"emergency-pricing__package--highlighted": "de-emergency-emergency-pricing__package--highlighted-nA5Hwa",
 	"emergency-pricing__package-caption": "de-emergency-emergency-pricing__package-caption-nA5Hwa",
+	"emergency-pricing__package-footnote": "de-emergency-emergency-pricing__package-footnote-nA5Hwa",
 	"emergency-pricing__package-header": "de-emergency-emergency-pricing__package-header-nA5Hwa",
 	"emergency-pricing__package-label": "de-emergency-emergency-pricing__package-label-nA5Hwa",
 	"emergency-pricing__package-name": "de-emergency-emergency-pricing__package-name-nA5Hwa",
@@ -1820,18 +1889,27 @@ function useFocusTrap(ref, active) {
 }
 
 // src/react/screens/context.tsx
+const EMPTY_PARAMS = {};
 const EmergencyScreenContext = (0, react.createContext)(null);
+function paramsEqual(first, second) {
+	return first.messageId === second.messageId;
+}
 function EmergencyScreenProvider({ children, initialScreen = "primary" }) {
 	const [state, setState] = (0, react.useState)({
 		screen: initialScreen,
+		params: EMPTY_PARAMS,
 		history: []
 	});
-	const navigate = (0, react.useCallback)((next) => {
+	const navigate = (0, react.useCallback)((next, params = EMPTY_PARAMS) => {
 		setState((current) => {
-			if (current.screen === next) return current;
+			if (current.screen === next && paramsEqual(current.params, params)) return current;
 			return {
 				screen: next,
-				history: [...current.history, current.screen]
+				params,
+				history: [...current.history, {
+					screen: current.screen,
+					params: current.params
+				}]
 			};
 		});
 	}, []);
@@ -1840,31 +1918,47 @@ function EmergencyScreenProvider({ children, initialScreen = "primary" }) {
 			const previous = current.history.at(-1);
 			if (!previous) return current;
 			return {
-				screen: previous,
+				screen: previous.screen,
+				params: previous.params,
 				history: current.history.slice(0, -1)
 			};
 		});
 	}, []);
+	const replace = (0, react.useCallback)((next, params = EMPTY_PARAMS) => {
+		setState((current) => {
+			if (current.screen === next && paramsEqual(current.params, params)) return current;
+			return {
+				screen: next,
+				params,
+				history: current.history.at(-1)?.screen === next ? current.history.slice(0, -1) : current.history
+			};
+		});
+	}, []);
 	const reset = (0, react.useCallback)(() => {
 		setState((current) => {
-			if (current.screen === "primary" && current.history.length === 0) return current;
+			if (current.screen === "primary" && current.params.messageId === void 0 && current.history.length === 0) return current;
 			return {
 				screen: "primary",
+				params: EMPTY_PARAMS,
 				history: []
 			};
 		});
 	}, []);
 	const value = (0, react.useMemo)(() => ({
 		screen: state.screen,
+		params: state.params,
 		history: state.history,
 		navigate,
+		replace,
 		back,
 		reset
 	}), [
 		back,
 		navigate,
+		replace,
 		reset,
 		state.history,
+		state.params,
 		state.screen
 	]);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyScreenContext.Provider, {
@@ -1913,6 +2007,245 @@ function EmergencyHeader({ titleId, onClose, title = copy.panelLabel, onBack })
 	});
 }
 
+// src/react/screens/primary/data.ts
+/**
+* Derives the remaining alert rounds from available messages and designated
+* responders. Invalid or non-positive input collapses to the minimum of one
+* round instead of producing `Infinity`, `NaN` or a negative value.
+*/
+function calculateRounds(messages, responders) {
+	if (!Number.isFinite(messages) || !Number.isFinite(responders)) return 1;
+	const availableMessages = Math.floor(messages);
+	const designatedResponders = Math.floor(responders);
+	if (availableMessages <= 0 || designatedResponders <= 0) return 1;
+	return Math.max(1, Math.floor(availableMessages / designatedResponders));
+}
+
+// src/react/screens/details/copy.ts
+const detailsCopy = {
+	title: "Detalles",
+	summaryTitle: "Alertas Disponibles",
+	historyTitle: "Historial de alertas",
+	historySubtitle: "Tus últimas alertas y recargas.",
+	historyEmpty: "Todavía no tienes alertas en tu historial.",
+	summaryEmpty: "Todavía no tienes un saldo de alertas disponible.",
+	viewHistory: "Ver historial",
+	messagesSingular: "mensaje de alerta",
+	messagesPlural: "mensajes de alerta",
+	contactsSingular: "contacto de emergencia",
+	contactsPlural: "contactos de emergencia",
+	roundsSingular: "ronda de avisos",
+	roundsPlural: "rondas de avisos"
+};
+/** Returns the balance sentence split into text and emphasized number parts. */
+function alertBalanceParts(messages, responders) {
+	if (!Number.isFinite(messages) || !Number.isFinite(responders) || messages < 0 || responders < 0) return [];
+	const rounds = calculateRounds(messages, responders);
+	const messagesUnit = messages === 1 ? detailsCopy.messagesSingular : detailsCopy.messagesPlural;
+	const contactsUnit = responders === 1 ? detailsCopy.contactsSingular : detailsCopy.contactsPlural;
+	const roundsUnit = rounds === 1 ? detailsCopy.roundsSingular : detailsCopy.roundsPlural;
+	return [
+		messages === 1 ? "Te queda " : "Te quedan ",
+		messages,
+		` ${messagesUnit}, dado que tienes `,
+		responders,
+		` ${contactsUnit}, `,
+		rounds === 1 ? "te queda " : "te quedan ",
+		rounds,
+		` ${roundsUnit}.`
+	];
+}
+
+// src/react/screens/details/AlertBalanceSentence.tsx
+/** Renders the balance sentence with its numbers visually emphasized. */
+function AlertBalanceSentence({ messages, responders }) {
+	const parts = alertBalanceParts(messages, responders);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: parts.map((part, index) => typeof part === "number" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("strong", { children: part }, index) : part) });
+}
+
+// src/core/date.ts
+/**
+* Formats a timestamp as `h:mmam` or `h:mmpm` in local time, without a space
+* or leading zero.
+*/
+function formatShortTime(value, locale = "es") {
+	if (value === null) return "";
+	const date = value instanceof Date ? value : new Date(value);
+	if (Number.isNaN(date.getTime())) return "";
+	const parts = new Intl.DateTimeFormat(locale, {
+		hour: "numeric",
+		minute: "2-digit",
+		hour12: true
+	}).formatToParts(date);
+	const hour = parts.find((part) => part.type === "hour")?.value;
+	const minute = parts.find((part) => part.type === "minute")?.value;
+	const dayPeriod = parts.find((part) => part.type === "dayPeriod")?.value;
+	if (!hour || !minute) return "";
+	return `${hour}:${minute}${normalizePeriod(dayPeriod)}`;
+}
+/**
+* Formats a timestamp as `dd/mm/yyyy hh:mm` in local time, using 24-hour time
+* and zero-padded parts. Missing or invalid input collapses to an empty string.
+*/
+function formatDateTime(value, locale = "es") {
+	if (value === null) return "";
+	const date = value instanceof Date ? value : new Date(value);
+	if (Number.isNaN(date.getTime())) return "";
+	const parts = new Intl.DateTimeFormat(locale, {
+		day: "2-digit",
+		month: "2-digit",
+		year: "numeric",
+		hour: "2-digit",
+		minute: "2-digit",
+		hourCycle: "h23"
+	}).formatToParts(date);
+	const day = parts.find((part) => part.type === "day")?.value;
+	const month = parts.find((part) => part.type === "month")?.value;
+	const year = parts.find((part) => part.type === "year")?.value;
+	const hour = parts.find((part) => part.type === "hour")?.value;
+	const minute = parts.find((part) => part.type === "minute")?.value;
+	if (!day || !month || !year || !hour || !minute) return "";
+	return `${day}/${month}/${year} ${hour}:${minute}`;
+}
+function normalizePeriod(dayPeriod) {
+	if (!dayPeriod) return "";
+	if (/^p/i.test(dayPeriod)) return "pm";
+	return /^a/i.test(dayPeriod) ? "am" : "";
+}
+
+// src/react/screens/history/copy.ts
+const historyCopy = {
+	title: "Historial de alertas",
+	subtitle: "Consulta tus alertas, pruebas y recargas.",
+	empty: "Todavía no tienes alertas en tu historial.",
+	showMore: "Ver más",
+	kindLabels: {
+		emergency: "Emergencia",
+		test: "Prueba",
+		recharge: "Recarga"
+	}
+};
+function formatContacts(count) {
+	return count === 1 ? "1 contacto" : `${count} contactos`;
+}
+function formatMessages(count) {
+	return count === 1 ? "1 mensaje" : `${count} mensajes`;
+}
+function formatHistoryRounds(count) {
+	return count === 1 ? "1 ronda" : `${count} rondas`;
+}
+
+// src/react/screens/history/data.ts
+/** Local demo alert history, newest first. */
+const DEMO_ALERT_HISTORY = [
+	{
+		id: "alert-2026-10-31",
+		kind: "emergency",
+		occurredAt: "2026-10-31T13:50:00",
+		responders: 3,
+		remainingMessages: 27
+	},
+	{
+		id: "alert-2026-10-20",
+		kind: "recharge",
+		occurredAt: "2026-10-20T09:15:00",
+		responders: 3,
+		remainingMessages: 100
+	},
+	{
+		id: "alert-2026-10-12",
+		kind: "test",
+		occurredAt: "2026-10-12T18:40:00",
+		responders: 3,
+		remainingMessages: 73
+	},
+	{
+		id: "alert-2026-10-01",
+		kind: "recharge",
+		occurredAt: "2026-10-01T11:05:00",
+		responders: 3,
+		remainingMessages: 76
+	}
+];
+/** Returns a newest-first copy of the history. */
+function sortedHistoryEntries(entries = DEMO_ALERT_HISTORY) {
+	return [...entries].sort((first, second) => new Date(second.occurredAt).getTime() - new Date(first.occurredAt).getTime());
+}
+/** Newest entry, used as the source of the current balance. */
+function latestHistoryEntry(entries = DEMO_ALERT_HISTORY) {
+	return sortedHistoryEntries(entries)[0] ?? null;
+}
+/** Resolves a single history entry by id. */
+function historyEntryById(id, entries = DEMO_ALERT_HISTORY) {
+	if (!id) return null;
+	return entries.find((entry) => entry.id === id) ?? null;
+}
+/** Rounds represented by the entry's remaining messages and responders. */
+function historyEntryRounds(entry) {
+	return calculateRounds(entry.remainingMessages, entry.responders);
+}
+/** Current balance derived from the newest history entry. */
+function currentAlertBalance(entries = DEMO_ALERT_HISTORY) {
+	const latest = latestHistoryEntry(entries);
+	if (!latest) return null;
+	return {
+		messages: latest.remainingMessages,
+		responders: latest.responders,
+		rounds: historyEntryRounds(latest)
+	};
+}
+
+// src/react/screens/history/AlertHistoryRow.tsx
+/** Reusable history row. The whole row is a button with a full text label. */
+function AlertHistoryRow({ entry, locale, onOpen }) {
+	const occurredAt = formatDateTime(entry.occurredAt, locale);
+	const rounds = historyEntryRounds(entry);
+	const label = [
+		historyCopy.kindLabels[entry.kind],
+		occurredAt,
+		formatContacts(entry.responders),
+		`${formatMessages(entry.remainingMessages)} restantes`,
+		`${formatHistoryRounds(rounds)} de avisos`
+	].join(", ");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+		className: cls("emergency-alert-row"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			className: cls("emergency-alert-row__button"),
+			"aria-label": label,
+			onClick: () => onOpen(entry.id),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: cls("emergency-alert-row__top"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("time", {
+					className: cls("emergency-alert-row__time"),
+					dateTime: entry.occurredAt,
+					children: occurredAt
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: cls("emergency-alert-row__badge"),
+					"data-kind": entry.kind,
+					children: historyCopy.kindLabels[entry.kind]
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+				className: cls("emergency-alert-row__stats"),
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: cls("emergency-alert-row__stat"),
+						children: formatContacts(entry.responders)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: cls("emergency-alert-row__stat"),
+						children: formatMessages(entry.remainingMessages)
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+						className: cls("emergency-alert-row__stat"),
+						children: formatHistoryRounds(rounds)
+					})
+				]
+			})]
+		})
+	});
+}
+
 // src/react/screens/layout.tsx
 /**
 * Shared shell for every screen. The wrapper is `display: contents` so the
@@ -1934,45 +2267,429 @@ function EmergencyScreenLayout({ screen, titleId, header, footer, children, body
 	});
 }
 
-// src/react/screens/PlaceholderScreen.tsx
-/** Minimal in-design screen used to prove navigation before real designs land. */
-function PlaceholderScreen({ screen, titleId, title, description, onClose, onBack }) {
+// src/react/screens/details/index.tsx
+function DetailsScreen({ titleId, locale, onClose }) {
+	const { back, navigate } = useScreenNavigation();
+	const balance = currentAlertBalance();
+	const preview = sortedHistoryEntries().slice(0, 2);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyScreenLayout, {
-		screen,
+		screen: "details",
 		titleId,
+		bodyClassName: "emergency-panel__body--details",
 		header: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyHeader, {
 			titleId,
-			title,
-			onClose,
-			onBack
+			title: detailsCopy.title,
+			onClose: () => onClose("close"),
+			onBack: back
 		}),
 		footer: null,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: cls("emergency-details"),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("section", {
+				className: cls("emergency-details__section"),
+				"aria-label": detailsCopy.summaryTitle,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: cls("emergency-details__card"),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: cls("emergency-details__card-header"),
+						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+							className: cls("emergency-details__card-title"),
+							children: detailsCopy.summaryTitle
+						})
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: cls("emergency-details__card-body"),
+						children: balance ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: cls("emergency-details__balance"),
+							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertBalanceSentence, {
+								messages: balance.messages,
+								responders: balance.responders
+							})
+						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: cls("emergency-details__empty"),
+							children: detailsCopy.summaryEmpty
+						})
+					})]
+				})
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				className: cls("emergency-details__section"),
+				"aria-label": detailsCopy.historyTitle,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: cls("emergency-details__heading"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+							className: cls("emergency-details__title"),
+							children: detailsCopy.historyTitle
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+							className: cls("emergency-details__subtitle"),
+							children: detailsCopy.historySubtitle
+						})]
+					}),
+					preview.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+						className: cls("emergency-details__list"),
+						children: preview.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertHistoryRow, {
+							entry,
+							locale,
+							onOpen: (messageId) => navigate("message-detail", { messageId })
+						}, entry.id))
+					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: cls("emergency-details__empty"),
+						children: detailsCopy.historyEmpty
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+						type: "button",
+						className: cls("emergency-details__history-button"),
+						onClick: () => navigate("history"),
+						children: detailsCopy.viewHistory
+					})
+				]
+			})]
+		})
+	});
+}
+
+// src/react/screens/history/index.tsx
+function HistoryScreen({ titleId, locale, onClose }) {
+	const { back, navigate } = useScreenNavigation();
+	const listId = (0, react.useId)();
+	const [expanded, setExpanded] = (0, react.useState)(false);
+	const entries = sortedHistoryEntries();
+	const hiddenCount = Math.max(0, entries.length - 2);
+	const visibleEntries = expanded ? entries : entries.slice(0, 2);
+	const showMore = hiddenCount > 0 && !expanded;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyScreenLayout, {
+		screen: "history",
+		titleId,
+		bodyClassName: "emergency-panel__body--history",
+		header: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyHeader, {
+			titleId,
+			title: historyCopy.title,
+			onClose: () => onClose("close"),
+			onBack: back
+		}),
+		footer: null,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: cls("emergency-history"),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: cls("emergency-history__heading"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+					className: cls("emergency-history__title"),
+					children: historyCopy.title
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					className: cls("emergency-history__subtitle"),
+					children: historyCopy.subtitle
+				})]
+			}), entries.length > 0 ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+				className: cls("emergency-history__list"),
+				id: listId,
+				children: visibleEntries.map((entry) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(AlertHistoryRow, {
+					entry,
+					locale,
+					onOpen: (messageId) => navigate("message-detail", { messageId })
+				}, entry.id))
+			}), showMore ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: cls("emergency-history__more"),
+				"aria-expanded": expanded,
+				"aria-controls": listId,
+				onClick: () => setExpanded(true),
+				children: historyCopy.showMore
+			}) : null] }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: cls("emergency-history__empty"),
+				children: historyCopy.empty
+			})]
+		})
+	});
+}
+
+// src/react/screens/message-detail/index.tsx
+const messageDetailCopy = {
+	title: "Detalle del mensaje",
+	dateTime: "Fecha y hora",
+	kind: "Tipo",
+	responders: "Contactos de emergencia",
+	messages: "Mensajes restantes",
+	rounds: "Rondas de avisos",
+	notFound: "No encontramos este mensaje. Puede que ya no esté disponible en tu historial.",
+	backToHistory: "Volver al historial"
+};
+function MessageDetailScreen({ titleId, locale, onClose }) {
+	const { back, params, replace } = useScreenNavigation();
+	const entry = historyEntryById(params.messageId);
+	const header = /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyHeader, {
+		titleId,
+		title: messageDetailCopy.title,
+		onClose: () => onClose("close"),
+		onBack: back
+	});
+	if (!entry) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyScreenLayout, {
+		screen: "message-detail",
+		titleId,
+		bodyClassName: "emergency-panel__body--message-detail",
+		header,
+		footer: null,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: cls("emergency-message-detail__empty"),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: cls("emergency-message-detail__empty-text"),
+				children: messageDetailCopy.notFound
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				className: cls("emergency-message-detail__back"),
+				onClick: () => replace("history"),
+				children: messageDetailCopy.backToHistory
+			})]
+		})
+	});
+	const rounds = historyEntryRounds(entry);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyScreenLayout, {
+		screen: "message-detail",
+		titleId,
+		bodyClassName: "emergency-panel__body--message-detail",
+		header,
+		footer: null,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-			className: cls("emergency-screen__placeholder"),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: cls("emergency-screen__placeholder-text"),
-				children: description
+			className: cls("emergency-message-detail"),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: cls("emergency-message-detail__card"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: cls("emergency-message-detail__card-header"),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+						className: cls("emergency-message-detail__card-title"),
+						children: messageDetailCopy.title
+					})
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("dl", {
+					className: cls("emergency-message-detail__list"),
+					children: [
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: cls("emergency-message-detail__row"),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
+								className: cls("emergency-message-detail__label"),
+								children: messageDetailCopy.dateTime
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
+								className: cls("emergency-message-detail__value"),
+								children: formatDateTime(entry.occurredAt, locale)
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: cls("emergency-message-detail__row"),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
+								className: cls("emergency-message-detail__label"),
+								children: messageDetailCopy.kind
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
+								className: cls("emergency-message-detail__value"),
+								children: historyCopy.kindLabels[entry.kind]
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: cls("emergency-message-detail__row"),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
+								className: cls("emergency-message-detail__label"),
+								children: messageDetailCopy.responders
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
+								className: cls("emergency-message-detail__value"),
+								children: formatContacts(entry.responders)
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: cls("emergency-message-detail__row"),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
+								className: cls("emergency-message-detail__label"),
+								children: messageDetailCopy.messages
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
+								className: cls("emergency-message-detail__value"),
+								children: formatMessages(entry.remainingMessages)
+							})]
+						}),
+						/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+							className: cls("emergency-message-detail__row"),
+							children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("dt", {
+								className: cls("emergency-message-detail__label"),
+								children: messageDetailCopy.rounds
+							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("dd", {
+								className: cls("emergency-message-detail__value"),
+								children: formatHistoryRounds(rounds)
+							})]
+						})
+					]
+				})]
 			})
 		})
 	});
 }
 
-// src/react/screens/details/copy.ts
-const detailsCopy = {
-	title: "Detalles",
-	description: "Aquí podrás consultar el detalle de tus alertas disponibles. Esta pantalla estará disponible próximamente."
+// src/core/phone.ts
+const VENEZUELA_DIALLING_CODE = "+58";
+const VENEZUELAN_MOBILE_PATTERN = /^4\d{9}$/;
+function normalizeVenezuelanPhone(input) {
+	return input.replace(/\D/g, "").replace(/^0+/, "");
+}
+function formatVenezuelanPhone(input) {
+	const digits = normalizeVenezuelanPhone(input).slice(0, 10);
+	if (digits.length <= 3) return digits;
+	return `${digits.slice(0, 3)} ${digits.slice(3)}`;
+}
+function isValidVenezuelanPhone(input) {
+	return VENEZUELAN_MOBILE_PATTERN.test(normalizeVenezuelanPhone(input));
+}
+function toVenezuelanE164(input) {
+	const digits = normalizeVenezuelanPhone(input);
+	if (!VENEZUELAN_MOBILE_PATTERN.test(digits)) return null;
+	return `${"+58"}${digits}`;
+}
+
+// src/react/components/EmergencyFooter/index.tsx
+function EmergencyFooter(props) {
+	const { active, busy, aborting, feedbackVisible, showSimulation = true, emergencyDisabled = false, square = false, onActivate, onRequestAbort, onRequestSimulation } = props;
+	if (active) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
+		className: cls("emergency-panel__footer", square && "emergency-panel__footer--square"),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			className: cls("emergency-status__abort-btn"),
+			"aria-label": copy.abort,
+			disabled: aborting || feedbackVisible,
+			onClick: onRequestAbort,
+			children: [copy.abort, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "alert-triangle" })]
+		})
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
+		className: cls("emergency-panel__footer", !showSimulation && "emergency-panel__footer--single", square && "emergency-panel__footer--square"),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			className: cls("emergency-panel__button", "emergency-panel__button--emergency"),
+			"aria-label": copy.emergencyAria,
+			disabled: busy || feedbackVisible || emergencyDisabled,
+			onClick: onActivate,
+			children: [copy.emergency, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "emergency" })]
+		}), showSimulation ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
+			type: "button",
+			className: cls("emergency-panel__button", "emergency-panel__button--simulation"),
+			"aria-label": copy.testAria,
+			disabled: busy || feedbackVisible,
+			onClick: onRequestSimulation,
+			children: [copy.test, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "list-check" })]
+		}) : null]
+	});
+}
+
+// src/react/screens/pre-emergency/copy.ts
+const preEmergencyCopy = {
+	title: "Pre-emergencia",
+	permissionNotice: "Debes autorizar todos los permisos de ubicación",
+	phoneLabel: "Indique su número de teléfono",
+	phonePlaceholder: "Ej. 0412 000 0000",
+	areaCodeLabel: "Código de país",
+	areaCode: "+58",
+	invalidPhone: "Ingresa un número móvil venezolano válido. Ej. 412 1301234"
 };
 
-// src/react/screens/details/index.tsx
-function DetailsScreen({ titleId, onClose }) {
+// src/react/screens/pre-emergency/index.tsx
+function PreEmergencyScreen(props) {
 	const { back } = useScreenNavigation();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlaceholderScreen, {
-		screen: "details",
-		titleId,
-		title: detailsCopy.title,
-		description: detailsCopy.description,
-		onClose: () => onClose("close"),
-		onBack: back
+	const phoneId = (0, react.useId)();
+	const errorId = `${phoneId}-error`;
+	const permissionId = `${phoneId}-permission`;
+	const [digits, setDigits] = (0, react.useState)("");
+	const [touched, setTouched] = (0, react.useState)(false);
+	const valid = isValidVenezuelanPhone(digits);
+	const invalid = touched && digits.length > 0 && !valid;
+	const handleChange = (event) => {
+		const next = normalizeVenezuelanPhone(event.target.value).slice(0, 10);
+		setDigits(next);
+	};
+	const handleSubmit = () => {
+		setTouched(true);
+		if (!valid) return;
+		const phone = toVenezuelanE164(digits);
+		if (phone === null) return;
+		props.onSetContactPhone(phone);
+		props.onActivate();
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyScreenLayout, {
+		screen: "pre-emergency",
+		titleId: props.titleId,
+		bodyClassName: "emergency-panel__body--pre-emergency",
+		header: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyHeader, {
+			titleId: props.titleId,
+			title: preEmergencyCopy.title,
+			onClose: () => props.onClose("close"),
+			onBack: back
+		}),
+		footer: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyFooter, {
+			active: props.active,
+			busy: props.busy,
+			aborting: props.aborting,
+			feedbackVisible: props.feedbackVisible,
+			emergencyDisabled: !valid,
+			showSimulation: false,
+			onActivate: handleSubmit,
+			onRequestAbort: props.onRequestAbort,
+			onRequestSimulation: props.onRequestSimulation
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: cls("emergency-pre-emergency"),
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
+				role: "note",
+				"aria-labelledby": permissionId,
+				className: cls("emergency-pre-emergency__notice"),
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+					name: "map-pin",
+					className: cls("emergency-pre-emergency__notice-icon")
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+					id: permissionId,
+					className: cls("emergency-pre-emergency__notice-text"),
+					children: preEmergencyCopy.permissionNotice
+				})]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("form", {
+				className: cls("emergency-pre-emergency__form"),
+				noValidate: true,
+				onSubmit: (event) => {
+					event.preventDefault();
+					handleSubmit();
+				},
+				onKeyDown: (event) => {
+					if (event.key === "Enter") {
+						event.preventDefault();
+						handleSubmit();
+					}
+				},
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
+						htmlFor: phoneId,
+						className: cls("emergency-pre-emergency__label"),
+						children: preEmergencyCopy.phoneLabel
+					}),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+						className: cls("emergency-pre-emergency__phone-row"),
+						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							type: "tel",
+							"aria-label": preEmergencyCopy.areaCodeLabel,
+							className: cls("emergency-pre-emergency__input", "emergency-pre-emergency__input--area-code", valid && "emergency-pre-emergency__input--valid"),
+							value: preEmergencyCopy.areaCode,
+							disabled: true,
+							readOnly: true
+						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+							id: phoneId,
+							type: "tel",
+							inputMode: "tel",
+							autoComplete: "tel-national",
+							placeholder: preEmergencyCopy.phonePlaceholder,
+							className: cls("emergency-pre-emergency__input", "emergency-pre-emergency__input--number", valid && "emergency-pre-emergency__input--valid", invalid && "emergency-pre-emergency__input--invalid"),
+							value: formatVenezuelanPhone(digits),
+							"aria-invalid": invalid,
+							"aria-describedby": invalid ? errorId : void 0,
+							onChange: handleChange,
+							onBlur: () => setTouched(true)
+						})]
+					}),
+					invalid ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						id: errorId,
+						role: "alert",
+						className: cls("emergency-pre-emergency__error"),
+						children: preEmergencyCopy.invalidPhone
+					}) : null
+				]
+			})]
+		})
 	});
 }
 
@@ -2198,32 +2915,6 @@ function EmergencyLoading() {
 	});
 }
 
-// src/core/date.ts
-/**
-* Formats a timestamp as `h:mmam` or `h:mmpm` in local time, without a space
-* or leading zero.
-*/
-function formatShortTime(value, locale = "es") {
-	if (value === null) return "";
-	const date = value instanceof Date ? value : new Date(value);
-	if (Number.isNaN(date.getTime())) return "";
-	const parts = new Intl.DateTimeFormat(locale, {
-		hour: "numeric",
-		minute: "2-digit",
-		hour12: true
-	}).formatToParts(date);
-	const hour = parts.find((part) => part.type === "hour")?.value;
-	const minute = parts.find((part) => part.type === "minute")?.value;
-	const dayPeriod = parts.find((part) => part.type === "dayPeriod")?.value;
-	if (!hour || !minute) return "";
-	return `${hour}:${minute}${normalizePeriod(dayPeriod)}`;
-}
-function normalizePeriod(dayPeriod) {
-	if (!dayPeriod) return "";
-	if (/^p/i.test(dayPeriod)) return "pm";
-	return /^a/i.test(dayPeriod) ? "am" : "";
-}
-
 // src/react/components/StatusIcon/index.tsx
 /**
 * Explicit responder state model:
@@ -2384,23 +3075,9 @@ function formatRounds(rounds) {
 	return `${rounds} ${roundsUnit(rounds)}`;
 }
 
-// src/react/screens/primary/data.ts
-/**
-* Derives the remaining alert rounds from available messages and designated
-* responders. Invalid or non-positive input collapses to the minimum of one
-* round instead of producing `Infinity`, `NaN` or a negative value.
-*/
-function calculateRounds(messages, responders) {
-	if (!Number.isFinite(messages) || !Number.isFinite(responders)) return 1;
-	const availableMessages = Math.floor(messages);
-	const designatedResponders = Math.floor(responders);
-	if (availableMessages <= 0 || designatedResponders <= 0) return 1;
-	return Math.max(1, Math.floor(availableMessages / designatedResponders));
-}
-
 // src/react/screens/primary/Availability.tsx
 function Availability({ onRecharge, onDetails }) {
-	const rounds = calculateRounds(100, 3);
+	const rounds = calculateRounds(27, 3);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
 		className: cls("emergency-availability"),
 		"aria-label": primaryCopy.availabilityTitle,
@@ -2442,7 +3119,7 @@ function Availability({ onRecharge, onDetails }) {
 
 // src/react/components/EmergencyBody/index.tsx
 function EmergencyBody(props) {
-	const { active, responders, refreshing, loading, locale, geolocationError, activationError, error, abortResult, simulationResult, onRefresh, onRetry, onDismissFeedback, onRecharge, onDetails } = props;
+	const { active, responders, refreshing, loading, locale, geolocationError, activationError, error, abortResult, simulationResult, onRefresh, onRetry, onDismissFeedback, onRecharge, onDetails, onClose } = props;
 	const showingFeedback = geolocationError !== null || Boolean(activationError) || abortResult !== null || simulationResult !== null;
 	const idle = !active && !loading && !showingFeedback && error === null;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
@@ -2454,8 +3131,18 @@ function EmergencyBody(props) {
 				onDetails
 			})
 		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: cls("emergency-panel__prompt-region"),
+			className: cls("emergency-panel__prompt-region", idle && "emergency-panel__prompt-region--idle"),
 			children: [
+				idle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+					type: "button",
+					className: cls("emergency-panel__close-button", "emergency-panel__close-button--prompt"),
+					"aria-label": copy.close,
+					onClick: onClose,
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, {
+						name: "close",
+						className: cls("emergency-panel__close-icon")
+					})
+				}) : null,
 				!loading && !showingFeedback ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 					className: cls("sos-img__container"),
 					id: "sos-img__container",
@@ -2494,47 +3181,16 @@ function EmergencyBody(props) {
 	});
 }
 
-// src/react/components/EmergencyFooter/index.tsx
-function EmergencyFooter(props) {
-	const { active, busy, aborting, feedbackVisible, onActivate, onRequestAbort, onRequestSimulation } = props;
-	if (active) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("footer", {
-		className: cls("emergency-panel__footer"),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-			type: "button",
-			className: cls("emergency-status__abort-btn"),
-			"aria-label": copy.abort,
-			disabled: aborting || feedbackVisible,
-			onClick: onRequestAbort,
-			children: [copy.abort, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "alert-triangle" })]
-		})
-	});
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
-		className: cls("emergency-panel__footer"),
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-			type: "button",
-			className: cls("emergency-panel__button", "emergency-panel__button--emergency"),
-			"aria-label": copy.emergencyAria,
-			disabled: busy || feedbackVisible,
-			onClick: onActivate,
-			children: [copy.emergency, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "emergency" })]
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
-			type: "button",
-			className: cls("emergency-panel__button", "emergency-panel__button--simulation"),
-			"aria-label": copy.testAria,
-			disabled: busy || feedbackVisible,
-			onClick: onRequestSimulation,
-			children: [copy.test, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Icon, { name: "list-check" })]
-		})]
-	});
-}
-
 // src/react/screens/primary/index.tsx
 function PrimaryScreen(props) {
 	const { navigate } = useScreenNavigation();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyScreenLayout, {
+	const idle = !props.active && !props.loading && !props.feedbackVisible && props.error === null;
+	const needsContactPhone = props.contactPhone === null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(EmergencyScreenLayout, {
 		screen: "primary",
 		titleId: props.titleId,
-		header: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyHeader, {
+		bodyClassName: idle ? "emergency-panel__body--primary" : void 0,
+		header: idle ? null : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyHeader, {
 			titleId: props.titleId,
 			onClose: () => props.onClose("close")
 		}),
@@ -2543,11 +3199,17 @@ function PrimaryScreen(props) {
 			busy: props.busy,
 			aborting: props.aborting,
 			feedbackVisible: props.feedbackVisible,
-			onActivate: props.onActivate,
+			square: idle,
+			onActivate: needsContactPhone ? () => navigate("pre-emergency") : props.onActivate,
 			onRequestAbort: props.onRequestAbort,
 			onRequestSimulation: props.onRequestSimulation
 		}),
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyBody, {
+		children: [idle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
+			className: cls("emergency-panel__sr-only"),
+			id: props.titleId,
+			tabIndex: -1,
+			children: copy.panelLabel
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyBody, {
 			active: props.active,
 			responders: props.responders,
 			refreshing: props.refreshing,
@@ -2562,8 +3224,9 @@ function PrimaryScreen(props) {
 			onRetry: props.onRetry,
 			onDismissFeedback: props.onDismissFeedback,
 			onRecharge: () => navigate("pricing"),
-			onDetails: () => navigate("details")
-		})
+			onDetails: () => navigate("details"),
+			onClose: () => props.onClose("close")
+		})]
 	});
 }
 
@@ -2577,7 +3240,7 @@ const pricingCopy = {
 	chosen: "Seleccionado",
 	whatsapp: "de WhatsApp",
 	rounds: "rondas de alerta",
-	perMessage: "por mensaje + IVA",
+	perMessage: "IVA Incluido",
 	footnote: "Rondas calculadas con 3 contactos de emergencia. Válidas para pruebas y emergencias."
 };
 
@@ -2591,17 +3254,16 @@ const PRICING_PACKAGES = [{
 	label: "PAQUETE 1",
 	messages: 100,
 	priceLabel: "$7",
-	priceCaption: "IVA incluido",
-	perMessageLabel: "$0.06",
+	priceCaption: "IVA incluído",
+	perMessageLabel: "$0.07",
 	highlighted: false
 }, {
 	id: "package-2",
 	label: "PAQUETE 2",
 	messages: 200,
 	priceLabel: "12$",
-	priceNote: "($10 + IVA)",
-	priceCaption: "IVA incluido",
-	perMessageLabel: "$0.05",
+	priceCaption: "IVA incluído",
+	perMessageLabel: "$0.06",
 	highlighted: true,
 	badge: "MEJOR VALOR"
 }];
@@ -2678,6 +3340,10 @@ function PackageCard({ pkg, selected, onSelect }) {
 					})
 				]
 			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+				className: cls("emergency-pricing__package-footnote"),
+				children: pricingCopy.footnote
+			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				className: cls("emergency-pricing__select"),
@@ -2706,30 +3372,23 @@ function PricingScreen(props) {
 		footer: null,
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 			className: cls("emergency-pricing"),
-			children: [
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					className: cls("emergency-pricing__heading"),
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-						className: cls("emergency-pricing__titles"),
-						children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
-							className: cls("emergency-pricing__title"),
-							children: pricingCopy.heading
-						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-							className: cls("emergency-pricing__subtitle"),
-							children: pricingCopy.subtitle
-						})]
-					})
-				}),
-				PRICING_PACKAGES.map((pkg) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PackageCard, {
-					pkg,
-					selected: selected === pkg.id,
-					onSelect: setSelected
-				}, pkg.id)),
-				/* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-					className: cls("emergency-pricing__footnote"),
-					children: pricingCopy.footnote
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: cls("emergency-pricing__heading"),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+					className: cls("emergency-pricing__titles"),
+					children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h3", {
+						className: cls("emergency-pricing__title"),
+						children: pricingCopy.heading
+					}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
+						className: cls("emergency-pricing__subtitle"),
+						children: pricingCopy.subtitle
+					})]
 				})
-			]
+			}), PRICING_PACKAGES.map((pkg) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PackageCard, {
+				pkg,
+				selected: selected === pkg.id,
+				onSelect: setSelected
+			}, pkg.id))]
 		})
 	});
 }
@@ -2738,8 +3397,11 @@ function PricingScreen(props) {
 /** Every screen the panel can render. Add one entry to add a screen. */
 const screenRegistry = {
 	primary: PrimaryScreen,
+	"pre-emergency": PreEmergencyScreen,
 	pricing: PricingScreen,
-	details: DetailsScreen
+	details: DetailsScreen,
+	history: HistoryScreen,
+	"message-detail": MessageDetailScreen
 };
 
 // src/react/components/EmergencyPanel/index.tsx
@@ -2768,7 +3430,7 @@ function ActiveScreen({ screenProps, open, forcePrimary }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Screen, { ...screenProps });
 }
 function EmergencyPanel(props) {
-	const { open, theme, active, busy, aborting, loading, locale, responders, refreshing, geolocationError, activationError, error, abortResult, simulationResult, abortConfirmation, simulationConfirmation, onClose, onActivate, onRefresh, onRetry, onDismissFeedback, onRequestAbort, onRequestSimulation, onCancelAbort, onCancelSimulation, onConfirmAbort, onConfirmSimulation } = props;
+	const { open, theme, active, busy, aborting, loading, locale, responders, refreshing, geolocationError, contactPhone, activationError, error, abortResult, simulationResult, abortConfirmation, simulationConfirmation, onClose, onActivate, onRefresh, onRetry, onDismissFeedback, onRequestAbort, onRequestSimulation, onCancelAbort, onCancelSimulation, onConfirmAbort, onConfirmSimulation, onSetContactPhone } = props;
 	const titleId = (0, react.useId)();
 	const dialogRef = (0, react.useRef)(null);
 	const feedbackVisible = geolocationError !== null || Boolean(activationError) || abortResult !== null || simulationResult !== null;
@@ -2793,13 +3455,15 @@ function EmergencyPanel(props) {
 		abortResult,
 		simulationResult,
 		feedbackVisible,
+		contactPhone,
 		onClose,
 		onActivate,
 		onRefresh,
 		onRetry,
 		onDismissFeedback,
 		onRequestAbort,
-		onRequestSimulation
+		onRequestSimulation,
+		onSetContactPhone
 	};
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		ref: dialogRef,
@@ -2906,6 +3570,7 @@ function EmergencyRoot() {
 	const responders = useEmergencyStore((state) => state.responders);
 	const resumeAvailable = useEmergencyStore((state) => state.resumeAvailable);
 	const geolocationError = useEmergencyStore((state) => state.geolocationError);
+	const contactPhone = useEmergencyStore((state) => state.contactPhone);
 	const lastError = useEmergencyStore((state) => state.lastError);
 	const abortResult = useEmergencyStore((state) => state.abortResult);
 	const simulationResult = useEmergencyStore((state) => state.simulationResult);
@@ -2931,6 +3596,7 @@ function EmergencyRoot() {
 		responders,
 		refreshing: phase.kind === "refreshing",
 		geolocationError,
+		contactPhone,
 		activationError,
 		error: showError ? error : null,
 		abortResult,
@@ -2957,7 +3623,8 @@ function EmergencyRoot() {
 		},
 		onConfirmSimulation: () => {
 			client.simulate();
-		}
+		},
+		onSetContactPhone: (phone) => client.setContactPhone(phone)
 	})] });
 }
 
@@ -2989,6 +3656,7 @@ function createFailedClient(error) {
 		lastError: error,
 		geolocation: null,
 		geolocationError: null,
+		contactPhone: null,
 		realtimeStatus: "idle",
 		abortResult: null,
 		simulationResult: null,
@@ -3017,7 +3685,8 @@ function createFailedClient(error) {
 		cancelAbortConfirmation: noop,
 		requestSimulationConfirmation: noop,
 		cancelSimulationConfirmation: noop,
-		dismissFeedback: noop
+		dismissFeedback: noop,
+		setContactPhone: noop
 	};
 }
 function attachTrigger(trigger, client) {
@@ -3106,6 +3775,7 @@ function mount(options) {
 		requestSimulationConfirmation: () => client.requestSimulationConfirmation(),
 		cancelSimulationConfirmation: () => client.cancelSimulationConfirmation(),
 		dismissFeedback: () => client.dismissFeedback(),
+		setContactPhone: (phone) => client.setContactPhone(phone),
 		destroy
 	};
 }