@dataemergencia/emergency 0.5.0 → 0.6.0

package/dist/index.cjs

@@ -1576,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",
@@ -1599,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",
@@ -1609,11 +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",
@@ -1622,13 +1663,14 @@ 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__divider": "de-emergency-emergency-panel__divider-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__header--close-only": "de-emergency-emergency-panel__header--close-only-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",
@@ -1847,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
+				}]
 			};
 		});
 	}, []);
@@ -1867,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, {
@@ -1906,12 +1973,11 @@ function useScreenNavigation() {
 }
 
 // src/react/components/EmergencyHeader/index.tsx
-function EmergencyHeader({ titleId, onClose, title = copy.panelLabel, onBack, variant = "default" }) {
-	const closeOnly = variant === "close-only";
+function EmergencyHeader({ titleId, onClose, title = copy.panelLabel, onBack }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("header", {
-		className: cls("emergency-panel__header", closeOnly && "emergency-panel__header--close-only"),
+		className: cls("emergency-panel__header"),
 		children: [
-			onBack && !closeOnly ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			onBack ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 				type: "button",
 				className: cls("emergency-panel__close-button"),
 				"aria-label": copy.back,
@@ -1922,7 +1988,7 @@ function EmergencyHeader({ titleId, onClose, title = copy.panelLabel, onBack, va
 				})
 			}) : null,
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("h2", {
-				className: cls("emergency-panel__title", closeOnly && "emergency-panel__sr-only"),
+				className: cls("emergency-panel__title"),
 				id: titleId,
 				tabIndex: -1,
 				children: title
@@ -1941,6 +2007,245 @@ function EmergencyHeader({ titleId, onClose, title = copy.panelLabel, onBack, va
 	});
 }
 
+// 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
@@ -1962,46 +2267,254 @@ 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.jsx)("div", {
-			className: cls("emergency-screen__placeholder"),
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("p", {
-				className: cls("emergency-screen__placeholder-text"),
-				children: description
-			})
+		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/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/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/details/index.tsx
-function DetailsScreen({ titleId, onClose }) {
-	const { back } = useScreenNavigation();
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PlaceholderScreen, {
-		screen: "details",
+// 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: detailsCopy.title,
-		description: detailsCopy.description,
+		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-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/core/phone.ts
@@ -2026,9 +2539,9 @@ function toVenezuelanE164(input) {
 
 // src/react/components/EmergencyFooter/index.tsx
 function EmergencyFooter(props) {
-	const { active, busy, aborting, feedbackVisible, showSimulation = true, emergencyDisabled = false, onActivate, onRequestAbort, onRequestSimulation } = 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"),
+		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"),
@@ -2039,7 +2552,7 @@ function EmergencyFooter(props) {
 		})
 	});
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("footer", {
-		className: cls("emergency-panel__footer", !showSimulation && "emergency-panel__footer--single"),
+		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"),
@@ -2402,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:
@@ -2588,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,
@@ -2646,23 +3119,30 @@ 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", {
 		className: cls("emergency-panel__body-split", idle && "emergency-panel__body-split--with-availability"),
-		children: [idle ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		children: [idle ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 			className: cls("emergency-panel__availability-region"),
 			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Availability, {
 				onRecharge,
 				onDetails
 			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("hr", {
-			className: cls("emergency-panel__divider"),
-			"aria-hidden": "true"
-		})] }) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
-			className: cls("emergency-panel__prompt-region"),
+		}) : null, /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			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",
@@ -2706,12 +3186,12 @@ function PrimaryScreen(props) {
 	const { navigate } = useScreenNavigation();
 	const idle = !props.active && !props.loading && !props.feedbackVisible && props.error === null;
 	const needsContactPhone = props.contactPhone === null;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyScreenLayout, {
+	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,
-			variant: idle ? "close-only" : "default",
 			onClose: () => props.onClose("close")
 		}),
 		footer: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmergencyFooter, {
@@ -2719,11 +3199,17 @@ function PrimaryScreen(props) {
 			busy: props.busy,
 			aborting: props.aborting,
 			feedbackVisible: props.feedbackVisible,
+			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,
@@ -2738,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")
+		})]
 	});
 }
 
@@ -2912,7 +3399,9 @@ const screenRegistry = {
 	primary: PrimaryScreen,
 	"pre-emergency": PreEmergencyScreen,
 	pricing: PricingScreen,
-	details: DetailsScreen
+	details: DetailsScreen,
+	history: HistoryScreen,
+	"message-detail": MessageDetailScreen
 };
 
 // src/react/components/EmergencyPanel/index.tsx