@dataemergencia/emergency 0.2.1 → 0.4.0

package/dist/index.js

@@ -2,7 +2,7 @@ import { createRoot } from "react-dom/client";
 import axios, { isAxiosError } from "axios";
 import Pusher from "pusher-js";
 import { createStore } from "zustand/vanilla";
-import { createContext, useCallback, useContext, useEffect, useId, useRef } from "react";
+import { createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useStore } from "zustand";
 
@@ -55,13 +55,8 @@ function isFiniteNumber(value) {
 function isArrayOf(value, guard) {
 	return Array.isArray(value) && value.every(guard);
 }
-function isRealtimeConfig(value) {
-	if (!isRecord(value) || value["mode"] !== "public" || !isRecord(value["pusher"])) return false;
-	const pusher = value["pusher"];
-	return isString(pusher["key"]) && isString(pusher["cluster"]) && isString(pusher["channel_pattern"]);
-}
 function isConfigResponse(value) {
-	return isRecord(value) && isString(value["route_prefix"]) && isString(value["csrf_token"]) && isRealtimeConfig(value["realtime"]);
+	return isRecord(value) && isString(value["route_prefix"]) && isString(value["csrf_token"]);
 }
 function isSessionResponse(value) {
 	return isRecord(value) && isString(value["code"]) && isString(value["csrf_token"]) && isFiniteNumber(value["expires_in"]);
@@ -79,7 +74,7 @@ function isEmergencyResultPayload(value) {
 	return (value["emergency_id"] === null || isString(value["emergency_id"])) && isBoolean(value["simulated"]) && isArrayOf(value["responders"], isResponderPayload) && isArrayOf(value["failures"], isFailurePayload);
 }
 function isCurrentResponse(value) {
-	if (!isRecord(value) || !isBoolean(value["active"]) || !isRealtimeConfig(value["realtime"])) return false;
+	if (!isRecord(value) || !isBoolean(value["active"])) return false;
 	return value["emergency"] === null || isRecord(value["emergency"]) && !Array.isArray(value["emergency"]);
 }
 function isRefreshResponse(value) {
@@ -367,6 +362,7 @@ function createBffClient(options) {
 const copy = {
 	panelLabel: "Panel de emergencia",
 	close: "Cerrar panel de emergencia",
+	back: "Volver",
 	question: "¿Tiene usted una emergencia?",
 	illustrationAlt: "Ícono paramédico",
 	emergency: "Emergencia",
@@ -605,8 +601,9 @@ function themeToCssVariables(theme) {
 }
 
 // src/core/realtime.ts
+const DEFAULT_CHANNEL_PATTERN = "whatsapp.{phone}";
 function channelForPhone(pattern, phone) {
-	return pattern.replace("{phone}", phone.replace(/^\+/, ""));
+	return pattern.replace("{phone}", phone.replace(/\D/g, ""));
 }
 function toStatus(state) {
 	switch (state) {
@@ -621,11 +618,11 @@ function toStatus(state) {
 }
 function createPusherRealtimeProvider() {
 	return { subscribe(config, phones, handlers) {
-		if (typeof window === "undefined" || !config.pusher.key || !config.pusher.cluster) return null;
+		if (typeof window === "undefined" || !config.key || !config.cluster) return null;
 		let pusher;
 		try {
-			pusher = new Pusher(config.pusher.key, {
-				cluster: config.pusher.cluster,
+			pusher = new Pusher(config.key, {
+				cluster: config.cluster,
 				forceTLS: true
 			});
 		} catch {
@@ -637,7 +634,7 @@ function createPusherRealtimeProvider() {
 			handlers.onStatus(toStatus(change.current));
 		});
 		const channels = [...new Set(phones.filter((phone) => phone !== ""))].map((phone) => {
-			const channelName = channelForPhone(config.pusher.channel_pattern, phone);
+			const channelName = channelForPhone(config.channelPattern ?? DEFAULT_CHANNEL_PATTERN, phone);
 			pusher.subscribe(channelName).bind_global((eventName, data) => {
 				handlers.onEvent(channelName, eventName, data);
 			});
@@ -766,7 +763,6 @@ function createEmergencyController(deps) {
 	let sessionPromise = null;
 	let refreshing = false;
 	let realtimeSubscription = null;
-	let realtimeConfig = null;
 	let subscribedPhones = [];
 	let messageSequence = 0;
 	let lastReconcileAt = 0;
@@ -824,9 +820,12 @@ function createEmergencyController(deps) {
 		realtimeSubscription = null;
 		subscribedPhones = [];
 	}
-	function startRealtime(realtime, responders) {
-		if (!realtime) return;
-		realtimeConfig = realtime;
+	function startRealtime(responders) {
+		const realtime = config.realtime ?? null;
+		if (!realtime) {
+			if (responders.length > 0) patch({ realtimeStatus: "unavailable" });
+			return;
+		}
 		const phones = [...new Set(responders.map((responder) => responder.phone))];
 		if (realtimeSubscription && phones.length === subscribedPhones.length && phones.every((phone, index) => phone === subscribedPhones[index])) return;
 		realtimeSubscription?.disconnect();
@@ -860,7 +859,7 @@ function createEmergencyController(deps) {
 		const phase = get().phase.kind;
 		if (phase === "idle" || phase === "error") transition({ kind: "initializing" });
 		try {
-			realtimeConfig = (await bff.config()).realtime;
+			await bff.config();
 			const session = await bff.session(config.code);
 			patch({
 				sessionReady: true,
@@ -890,7 +889,6 @@ function createEmergencyController(deps) {
 	async function hydrateCurrent() {
 		try {
 			const current = await bff.current();
-			realtimeConfig = current.realtime;
 			if (current.active && current.emergency) {
 				const snapshot = payloadToSnapshot(current.emergency, { code: config.code });
 				patch({
@@ -906,7 +904,7 @@ function createEmergencyController(deps) {
 					emergencyId: snapshot.emergencyId,
 					simulated: snapshot.simulated
 				});
-				startRealtime(current.realtime, snapshot.responders);
+				startRealtime(snapshot.responders);
 				events.emit("emergency:resumed", { snapshot });
 				return;
 			}
@@ -988,7 +986,7 @@ function createEmergencyController(deps) {
 			});
 			pushMessage(failures.length > 0 ? "warning" : "success", failures.length > 0 ? copy.partialFailure : copy.activeBanner);
 			events.emit("emergency:activated", { snapshot: hydrated });
-			startRealtime(realtimeConfig, responders);
+			startRealtime(responders);
 		} catch (error) {
 			const normalized = toEmergencyError(error, "network");
 			if (normalized.code === "emergency_already_active") {
@@ -1080,7 +1078,7 @@ function createEmergencyController(deps) {
 				emergencyId: updated.emergencyId,
 				simulated: updated.simulated
 			});
-			startRealtime(realtimeConfig, responders);
+			startRealtime(responders);
 			events.emit("emergency:updated", { snapshot: updated });
 		} catch (error) {
 			const normalized = toEmergencyError(error, "network");
@@ -1213,7 +1211,6 @@ function createEmergencyController(deps) {
 		bff.destroy();
 		realtimeSubscription?.disconnect();
 		realtimeSubscription = null;
-		realtimeConfig = null;
 		subscribedPhones = [];
 		patch({
 			destroyed: true,
@@ -1344,6 +1341,24 @@ function installEmergencyFonts(input) {
 
 // src/core/config.ts
 const EMERGENCY_CODE_PATTERN = /^[A-Za-z][A-Za-z0-9]{5}$/;
+const DEFAULT_REALTIME_CHANNEL_PATTERN = "whatsapp.{phone}";
+/**
+* Validates the host-supplied realtime block. Returns `null` when the value is
+* present but invalid; callers treat `undefined` as "realtime not requested".
+*/
+function normalizeRealtimeConfig(value) {
+	if (!isRecord(value)) return null;
+	const key = value["key"];
+	const cluster = value["cluster"];
+	const channelPattern = value["channelPattern"];
+	if (typeof key !== "string" || key.trim() === "" || typeof cluster !== "string" || cluster.trim() === "") return null;
+	if (channelPattern !== void 0 && (typeof channelPattern !== "string" || channelPattern.trim() === "" || !channelPattern.includes("{phone}"))) return null;
+	return {
+		key,
+		cluster,
+		channelPattern: channelPattern ?? "whatsapp.{phone}"
+	};
+}
 const LOOPBACK_HOSTS = /* @__PURE__ */ new Set([
 	"localhost",
 	"127.0.0.1",
@@ -1404,6 +1419,12 @@ function validateConfig(config) {
 		config: null,
 		error: createEmergencyError("configuration", "The fallback requires a non-empty phone and label.")
 	};
+	const realtime = config.realtime === void 0 ? void 0 : normalizeRealtimeConfig(config.realtime);
+	if (realtime === null) return {
+		ok: false,
+		config: null,
+		error: createEmergencyError("configuration", "The realtime configuration requires a non-empty key and cluster, and a channel pattern containing {phone}.")
+	};
 	return {
 		ok: true,
 		error: null,
@@ -1414,79 +1435,12 @@ function validateConfig(config) {
 			locale: config.locale ?? "es",
 			geolocationTimeoutMs: config.geolocationTimeoutMs ?? 8e3,
 			requestTimeoutMs: config.requestTimeoutMs ?? 15e3,
-			fontLoading: normalizeFontLoading(config.fontLoading)
+			fontLoading: normalizeFontLoading(config.fontLoading),
+			realtime
 		}
 	};
 }
 
-// src/react/components/icons/paramedical-mark.tsx
-/**
-* Neutral inline illustration used by the idle panel.
-*/
-function ParamedicalMark({ className, title }) {
-	return /* @__PURE__ */ jsxs("svg", {
-		xmlns: "http://www.w3.org/2000/svg",
-		version: "1.0",
-		viewBox: "0 0 192 192",
-		width: "192",
-		height: "192",
-		id: "Star of life",
-		className,
-		"aria-label": title,
-		children: [
-			/* @__PURE__ */ jsx("defs", { id: "defs2886" }),
-			/* @__PURE__ */ jsxs("g", {
-				id: "cross",
-				children: [/* @__PURE__ */ jsx("path", {
-					d: "m 74,133 0,52 44,0 0,-52 44,26 22,-38 L 140,96 184,70 162,32 117,58 117,7 74,7 74,58 30,32 8,70 52,96 8,121 30,159 z",
-					id: "outline",
-					style: {
-						fill: "none",
-						stroke: "#3333bb",
-						strokeWidth: 6
-					}
-				}), /* @__PURE__ */ jsx("path", {
-					d: "m 74,133 0,52 44,0 0,-52 44,26 22,-38 L 140,96 184,70 162,32 117,58 117,7 74,7 74,58 30,32 8,70 52,96 8,121 30,159 z",
-					id: "inner",
-					style: {
-						fill: "#0000bb",
-						fillRule: "evenodd",
-						stroke: "#ffffff",
-						strokeWidth: 2
-					}
-				})]
-			}),
-			/* @__PURE__ */ jsxs("g", {
-				id: "symbols",
-				style: {
-					fill: "#ffffff",
-					fillRule: "evenodd",
-					stroke: "#3333bb",
-					strokeWidth: 2
-				},
-				children: [/* @__PURE__ */ jsx("path", {
-					d: "m 93,166 c 0,7 6,7 6,0 l 3,-138 c 0,-8 -12,-8 -12,0 l 3,135 0,3 z",
-					id: "rod"
-				}), /* @__PURE__ */ jsxs("g", {
-					id: "snake",
-					children: [/* @__PURE__ */ jsx("path", {
-						d: "m 100,153 c 7,4 3,15 -3,15 2,-5 3,-9 3,-15 z m 1,-40 c 10,9 4,22 -3,26 -6,3 -6,7 -6,15 -9,-10 -4,-19 4,-24 5,-4 5,-10 5,-17 z m 1,-30 c 0,11 -17,14 -17,22 0,3 1,9 6,12 0,-11 9,-12 15,-18 7,-7 7,-19 -4,-28 0,4 0,8 0,12 z M 90,77 C 80,69 76,55 80,46 c 3,-10 20,-11 20,-3 0,8 -20,3 -13,16 l 3,5 0,13 z",
-						id: "body"
-					}), /* @__PURE__ */ jsx("path", {
-						d: "m 95,43 c 7,-3 -7,-3 0,0 z",
-						id: "eye",
-						style: {
-							fill: "#3333bb",
-							fillRule: "evenodd",
-							stroke: "none"
-						}
-					})]
-				})]
-			})
-		]
-	});
-}
-
 // src/react/components/Icon/index.tsx
 /** Icons whose artwork does not fit the default 24x24 grid need their own canvas. */
 const viewBoxes = { emergency: "0 0 640 640" };
@@ -1543,6 +1497,18 @@ const paths = {
 		/* @__PURE__ */ jsx("path", { d: "M12 7h.01" })
 	] }),
 	"arrow-left": /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("path", { d: "M19 12H5" }), /* @__PURE__ */ jsx("path", { d: "m12 19-7-7 7-7" })] }),
+	"credit-card-plus": /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("path", { d: "M12 18H4a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5" }),
+		/* @__PURE__ */ jsx("path", { d: "M18 12h.01" }),
+		/* @__PURE__ */ jsx("path", { d: "M19 22v-6" }),
+		/* @__PURE__ */ jsx("path", { d: "m22 19-3-3-3 3" }),
+		/* @__PURE__ */ jsx("path", { d: "M6 12h.01" }),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "12",
+			r: "2"
+		})
+	] }),
 	emergency: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("path", { d: "M272.5 96C272.5 78.3 286.8 64 304.5 64L336.5 64C354.2 64 368.5 78.3 368.5 96L368.5 236.9L490.5 166.5C505.8 157.7 525.4 162.9 534.2 178.2L550.2 205.9C559 221.2 553.8 240.8 538.5 249.6L416.5 320L538.5 390.4C553.8 399.2 559.1 418.8 550.2 434.1L534.2 461.8C525.4 477.1 505.8 482.4 490.5 473.5L368.5 403.1L368.5 544C368.5 561.7 354.2 576 336.5 576L304.5 576C286.8 576 272.5 561.7 272.5 544L272.5 403.1L150.5 473.5C135.2 482.3 115.6 477.1 106.8 461.8L90.8 434.1C82 418.8 87.2 399.2 102.5 390.4L224.5 320L102.5 249.6C87.2 240.8 82 221.2 90.8 205.9L106.8 178.2C115.6 162.9 135.2 157.7 150.5 166.5L272.5 236.9L272.5 96z" }) })
 };
 function Icon({ name, className, title }) {
@@ -1572,6 +1538,16 @@ 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-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",
+	"emergency-availability__card-header": "de-emergency-emergency-availability__card-header-nA5Hwa",
+	"emergency-availability__card-title": "de-emergency-emergency-availability__card-title-nA5Hwa",
+	"emergency-availability__details": "de-emergency-emergency-availability__details-nA5Hwa",
+	"emergency-availability__label": "de-emergency-emergency-availability__label-nA5Hwa",
+	"emergency-availability__recharge": "de-emergency-emergency-availability__recharge-nA5Hwa",
+	"emergency-availability__rounds": "de-emergency-emergency-availability__rounds-nA5Hwa",
+	"emergency-availability__rounds-group": "de-emergency-emergency-availability__rounds-group-nA5Hwa",
 	"emergency-confirmation": "de-emergency-emergency-confirmation-nA5Hwa",
 	"emergency-confirmation__body": "de-emergency-emergency-confirmation__body-nA5Hwa",
 	"emergency-confirmation__button": "de-emergency-emergency-confirmation__button-nA5Hwa",
@@ -1596,7 +1572,11 @@ var panel_module_default = {
 	"emergency-feedback": "de-emergency-emergency-feedback-nA5Hwa",
 	"emergency-feedback__dismiss": "de-emergency-emergency-feedback__dismiss-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--pricing": "de-emergency-emergency-panel__body--pricing-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",
 	"emergency-panel__body-title-container": "de-emergency-emergency-panel__body-title-container-nA5Hwa",
 	"emergency-panel__button": "de-emergency-emergency-panel__button-nA5Hwa",
@@ -1606,14 +1586,41 @@ var panel_module_default = {
 	"emergency-panel__close-icon": "de-emergency-emergency-panel__close-icon-nA5Hwa",
 	"emergency-panel__footer": "de-emergency-emergency-panel__footer-nA5Hwa",
 	"emergency-panel__header": "de-emergency-emergency-panel__header-nA5Hwa",
+	"emergency-panel__prompt-region": "de-emergency-emergency-panel__prompt-region-nA5Hwa",
 	"emergency-panel__title": "de-emergency-emergency-panel__title-nA5Hwa",
 	"emergency-panel--hidden": "de-emergency-emergency-panel--hidden-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-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",
+	"emergency-pricing__price": "de-emergency-emergency-pricing__price-nA5Hwa",
+	"emergency-pricing__price-meta": "de-emergency-emergency-pricing__price-meta-nA5Hwa",
+	"emergency-pricing__price-note": "de-emergency-emergency-pricing__price-note-nA5Hwa",
+	"emergency-pricing__price-row": "de-emergency-emergency-pricing__price-row-nA5Hwa",
+	"emergency-pricing__select": "de-emergency-emergency-pricing__select-nA5Hwa",
+	"emergency-pricing__stat": "de-emergency-emergency-pricing__stat-nA5Hwa",
+	"emergency-pricing__stat-divider": "de-emergency-emergency-pricing__stat-divider-nA5Hwa",
+	"emergency-pricing__stat-label": "de-emergency-emergency-pricing__stat-label-nA5Hwa",
+	"emergency-pricing__stat-value": "de-emergency-emergency-pricing__stat-value-nA5Hwa",
+	"emergency-pricing__stats": "de-emergency-emergency-pricing__stats-nA5Hwa",
+	"emergency-pricing__subtitle": "de-emergency-emergency-pricing__subtitle-nA5Hwa",
+	"emergency-pricing__title": "de-emergency-emergency-pricing__title-nA5Hwa",
+	"emergency-pricing__titles": "de-emergency-emergency-pricing__titles-nA5Hwa",
 	"emergency-resume-notification-button": "de-emergency-emergency-resume-notification-button-nA5Hwa",
 	"emergency-resume-notification-card": "de-emergency-emergency-resume-notification-card-nA5Hwa",
 	"emergency-resume-notification-icon": "de-emergency-emergency-resume-notification-icon-nA5Hwa",
 	"emergency-resume-notification-message": "de-emergency-emergency-resume-notification-message-nA5Hwa",
 	"emergency-resume-notification-overlay": "de-emergency-emergency-resume-notification-overlay-nA5Hwa",
 	"emergency-resume-notification-title": "de-emergency-emergency-resume-notification-title-nA5Hwa",
+	"emergency-screen": "de-emergency-emergency-screen-nA5Hwa",
+	"emergency-screen__placeholder": "de-emergency-emergency-screen__placeholder-nA5Hwa",
+	"emergency-screen__placeholder-text": "de-emergency-emergency-screen__placeholder-text-nA5Hwa",
 	"emergency-status__abort-btn": "de-emergency-emergency-status__abort-btn-nA5Hwa",
 	"emergency-status__body": "de-emergency-emergency-status__body-nA5Hwa",
 	"emergency-status__cell": "de-emergency-emergency-status__cell-nA5Hwa",
@@ -1659,117 +1666,466 @@ function cls(...names) {
 	return names.filter((name) => Boolean(name)).map((name) => panel_module_default[name] ?? "").filter(Boolean).join(" ");
 }
 
-// src/react/components/MessageSurface/index.tsx
-function MessageSurface(props) {
-	const { variant, icon, title, text, details, className, children } = props;
-	const prefix = variant === "success" ? "simulacrum-success-message" : "emergency-error-message";
-	const success = variant === "success";
-	return /* @__PURE__ */ jsxs("div", {
-		className: [cls(prefix), className].filter(Boolean).join(" "),
-		role: success ? "status" : "alert",
-		"aria-live": success ? "polite" : "assertive",
-		children: [/* @__PURE__ */ jsxs("div", {
-			className: cls(`${prefix}__container`),
-			children: [/* @__PURE__ */ jsx("div", {
-				className: cls(`${prefix}__icon`),
-				children: /* @__PURE__ */ jsx(Icon, {
-					name: icon,
-					className: "status-icon"
-				})
-			}), /* @__PURE__ */ jsxs("div", {
-				className: cls(`${prefix}__content`),
+// src/react/components/EmergencyConfirmation/index.tsx
+function EmergencyConfirmation(props) {
+	const { abortConfirmation, simulationConfirmation, onCancelAbort, onCancelSimulation, onConfirmAbort, onConfirmSimulation } = props;
+	const cardRef = useRef(null);
+	const titleId = useId();
+	const danger = abortConfirmation;
+	const open = abortConfirmation || simulationConfirmation;
+	useEffect(() => {
+		if (open) cardRef.current?.querySelector("button")?.focus();
+	}, [open]);
+	if (!open) return null;
+	const title = danger ? copy.abortConfirmTitle : copy.simulateConfirmTitle;
+	const text = danger ? copy.abortConfirmText : copy.simulateConfirmText;
+	const tone = danger ? "danger" : "information";
+	return /* @__PURE__ */ jsx("div", {
+		className: cls("emergency-confirmation"),
+		role: "dialog",
+		"aria-modal": "true",
+		"aria-labelledby": titleId,
+		children: /* @__PURE__ */ jsxs("div", {
+			ref: cardRef,
+			className: cls("emergency-confirmation__card"),
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: cls("emergency-confirmation__body"),
 				children: [
-					/* @__PURE__ */ jsx("h3", {
-						className: cls(`${prefix}__title`),
+					/* @__PURE__ */ jsx("div", {
+						className: cls("emergency-confirmation__icon", `emergency-confirmation__icon--${tone}`),
+						children: /* @__PURE__ */ jsx(Icon, { name: danger ? "alert-triangle" : "info" })
+					}),
+					/* @__PURE__ */ jsx("h5", {
+						className: cls("emergency-confirmation__title"),
+						id: titleId,
 						children: title
 					}),
 					/* @__PURE__ */ jsx("p", {
-						className: cls(`${prefix}__text`),
+						className: cls("emergency-confirmation__text"),
 						children: text
-					}),
-					/* @__PURE__ */ jsx("div", {
-						className: cls(`${prefix}__details`),
-						children: details.map((detail) => /* @__PURE__ */ jsxs("span", {
-							className: cls(`${prefix}__detail`),
-							children: [/* @__PURE__ */ jsx(Icon, { name: detail.icon }), detail.text]
-						}, detail.text))
 					})
 				]
+			}), /* @__PURE__ */ jsxs("div", {
+				className: cls("emergency-confirmation__footer"),
+				children: [/* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: cls("emergency-confirmation__button", "emergency-confirmation__button--cancel"),
+					onClick: danger ? onCancelAbort : onCancelSimulation,
+					children: danger ? copy.abortCancel : copy.simulateCancel
+				}), /* @__PURE__ */ jsx("button", {
+					type: "button",
+					className: cls("emergency-confirmation__button", danger ? "emergency-confirmation__button--danger" : "emergency-confirmation__button--confirm"),
+					onClick: danger ? onConfirmAbort : onConfirmSimulation,
+					children: danger ? copy.abortConfirm : copy.simulateConfirm
+				})]
 			})]
-		}), children]
-	});
-}
-
-// src/react/components/EmergencyError/index.tsx
-function EmergencyError({ error, onRetry }) {
-	return /* @__PURE__ */ jsx(MessageSurface, {
-		variant: "error",
-		icon: "exclamation-circle",
-		title: copy.errorTitle,
-		text: error.message || copy.errorText,
-		details: [{
-			icon: "info",
-			text: copy.errorDetailInfo
-		}, {
-			icon: "arrow-left",
-			text: copy.errorDetailRetry
-		}],
-		children: /* @__PURE__ */ jsx("button", {
-			type: "button",
-			className: cls("emergency-feedback__dismiss"),
-			onClick: onRetry,
-			children: copy.retry
 		})
 	});
 }
 
-// src/react/components/EmergencyFeedback/index.tsx
-/** Time the feedback stays on screen before dismissing itself. */
-const FEEDBACK_AUTO_DISMISS_MS = 3e3;
-/** Time the geolocation feedback stays on screen before dismissing itself. */
-const GEOLOCATION_FEEDBACK_AUTO_DISMISS_MS = 5e3;
-function geolocationText(error) {
-	switch (error.code) {
-		case "geolocation_denied": return copy.geolocationDenied;
-		case "geolocation_timeout": return copy.geolocationTimeout;
-		case "geolocation_unsupported": return copy.geolocationUnsupported;
-		default: return copy.geolocationUnavailable;
-	}
-}
-function EmergencyFeedback({ abortResult, simulationResult, geolocationError, activationError, onDismiss }) {
-	const result = abortResult ?? simulationResult;
-	const feedbackActivationError = result ? null : activationError ?? null;
-	const feedbackGeolocationError = result || feedbackActivationError ? null : geolocationError;
-	if (!result && !feedbackActivationError && !feedbackGeolocationError) return null;
-	return /* @__PURE__ */ jsx(FeedbackSurface, {
-		result,
-		aborting: abortResult !== null,
-		geolocationError: feedbackGeolocationError,
-		activationError: feedbackActivationError,
-		onDismiss
-	});
-}
-function FeedbackSurface({ result, aborting, geolocationError, activationError, onDismiss }) {
-	const dismissRef = useRef(onDismiss);
+// src/react/hooks/useEscapeKey.ts
+function useEscapeKey(active, onEscape) {
 	useEffect(() => {
-		dismissRef.current = onDismiss;
-	}, [onDismiss]);
+		if (!active || typeof document === "undefined") return;
+		const handleKeyDown = (event) => {
+			if (event.key === "Escape") {
+				event.stopPropagation();
+				onEscape();
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown);
+		};
+	}, [active, onEscape]);
+}
+
+// src/react/hooks/useFocusTrap.ts
+const FOCUSABLE_SELECTOR = [
+	"a[href]",
+	"button:not([disabled])",
+	"input:not([disabled])",
+	"select:not([disabled])",
+	"textarea:not([disabled])",
+	"[tabindex]:not([tabindex=\"-1\"])"
+].join(",");
+/**
+* Keeps keyboard focus inside the dialog while it is open and restores focus to
+* the element that opened it when it closes.
+*/
+function useFocusTrap(ref, active) {
 	useEffect(() => {
-		const timeout = setTimeout(() => dismissRef.current(), geolocationError || activationError ? GEOLOCATION_FEEDBACK_AUTO_DISMISS_MS : FEEDBACK_AUTO_DISMISS_MS);
-		return () => clearTimeout(timeout);
-	}, [
-		result?.at,
-		geolocationError,
-		activationError
-	]);
-	const success = result?.ok === true;
-	const title = success ? aborting ? copy.abortSuccessTitle : copy.simulateSuccessTitle : copy.errorTitle;
-	const text = success ? result?.message ?? "" : geolocationError ? geolocationText(geolocationError) : activationError ? activationError.message || copy.errorText : result?.message ?? copy.errorText;
-	const details = success ? aborting ? [{
-		icon: "message",
-		text: copy.abortSuccessDetails
-	}] : [{
-		icon: "message",
+		if (!active || typeof document === "undefined") return;
+		const container = ref.current;
+		if (!container) return;
+		const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
+		const focusable = () => Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((element) => !element.hasAttribute("hidden") && element.getAttribute("aria-hidden") !== "true");
+		(focusable()[0] ?? container).focus({ preventScroll: true });
+		const handleKeyDown = (event) => {
+			if (event.key !== "Tab") return;
+			const items = focusable();
+			if (items.length === 0) {
+				event.preventDefault();
+				container.focus({ preventScroll: true });
+				return;
+			}
+			const first = items[0];
+			const last = items[items.length - 1];
+			const current = document.activeElement;
+			if (event.shiftKey && (current === first || !container.contains(current))) {
+				event.preventDefault();
+				if (last) last.focus({ preventScroll: true });
+				return;
+			}
+			if (!event.shiftKey && (current === last || !container.contains(current)) && first) {
+				event.preventDefault();
+				first.focus({ preventScroll: true });
+			}
+		};
+		document.addEventListener("keydown", handleKeyDown, true);
+		return () => {
+			document.removeEventListener("keydown", handleKeyDown, true);
+			if (previouslyFocused?.isConnected) previouslyFocused.focus({ preventScroll: true });
+		};
+	}, [active, ref]);
+}
+
+// src/react/screens/context.tsx
+const EmergencyScreenContext = createContext(null);
+function EmergencyScreenProvider({ children, initialScreen = "primary" }) {
+	const [state, setState] = useState({
+		screen: initialScreen,
+		history: []
+	});
+	const navigate = useCallback((next) => {
+		setState((current) => {
+			if (current.screen === next) return current;
+			return {
+				screen: next,
+				history: [...current.history, current.screen]
+			};
+		});
+	}, []);
+	const back = useCallback(() => {
+		setState((current) => {
+			const previous = current.history.at(-1);
+			if (!previous) return current;
+			return {
+				screen: previous,
+				history: current.history.slice(0, -1)
+			};
+		});
+	}, []);
+	const reset = useCallback(() => {
+		setState((current) => {
+			if (current.screen === "primary" && current.history.length === 0) return current;
+			return {
+				screen: "primary",
+				history: []
+			};
+		});
+	}, []);
+	const value = useMemo(() => ({
+		screen: state.screen,
+		history: state.history,
+		navigate,
+		back,
+		reset
+	}), [
+		back,
+		navigate,
+		reset,
+		state.history,
+		state.screen
+	]);
+	return /* @__PURE__ */ jsx(EmergencyScreenContext.Provider, {
+		value,
+		children
+	});
+}
+function useScreenNavigation() {
+	const value = useContext(EmergencyScreenContext);
+	if (!value) throw new Error("useScreenNavigation must be used inside EmergencyScreenProvider.");
+	return value;
+}
+
+// src/react/components/EmergencyHeader/index.tsx
+function EmergencyHeader({ titleId, onClose, title = copy.panelLabel, onBack }) {
+	return /* @__PURE__ */ jsxs("header", {
+		className: cls("emergency-panel__header"),
+		children: [
+			onBack ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cls("emergency-panel__close-button"),
+				"aria-label": copy.back,
+				onClick: onBack,
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "arrow-left",
+					className: cls("emergency-panel__close-icon")
+				})
+			}) : null,
+			/* @__PURE__ */ jsx("h2", {
+				className: cls("emergency-panel__title"),
+				id: titleId,
+				tabIndex: -1,
+				children: title
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cls("emergency-panel__close-button"),
+				"aria-label": copy.close,
+				onClick: onClose,
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "close",
+					className: cls("emergency-panel__close-icon")
+				})
+			})
+		]
+	});
+}
+
+// src/react/screens/layout.tsx
+/**
+* Shared shell for every screen. The wrapper is `display: contents` so the
+* header, body and footer stay direct grid rows of the emergency panel.
+*/
+function EmergencyScreenLayout({ screen, titleId, header, footer, children, bodyClassName }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cls("emergency-screen"),
+		"data-screen": screen,
+		children: [
+			header,
+			/* @__PURE__ */ jsx("section", {
+				className: cls("emergency-panel__body", bodyClassName ?? null),
+				"aria-labelledby": titleId,
+				children
+			}),
+			footer
+		]
+	});
+}
+
+// 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 }) {
+	return /* @__PURE__ */ jsx(EmergencyScreenLayout, {
+		screen,
+		titleId,
+		header: /* @__PURE__ */ jsx(EmergencyHeader, {
+			titleId,
+			title,
+			onClose,
+			onBack
+		}),
+		footer: null,
+		children: /* @__PURE__ */ jsx("div", {
+			className: cls("emergency-screen__placeholder"),
+			children: /* @__PURE__ */ jsx("p", {
+				className: cls("emergency-screen__placeholder-text"),
+				children: description
+			})
+		})
+	});
+}
+
+// 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/details/index.tsx
+function DetailsScreen({ titleId, onClose }) {
+	const { back } = useScreenNavigation();
+	return /* @__PURE__ */ jsx(PlaceholderScreen, {
+		screen: "details",
+		titleId,
+		title: detailsCopy.title,
+		description: detailsCopy.description,
+		onClose: () => onClose("close"),
+		onBack: back
+	});
+}
+
+// src/react/components/icons/paramedical-mark.tsx
+/**
+* Neutral inline illustration used by the idle panel.
+*/
+function ParamedicalMark({ className, title }) {
+	return /* @__PURE__ */ jsxs("svg", {
+		xmlns: "http://www.w3.org/2000/svg",
+		version: "1.0",
+		viewBox: "0 0 192 192",
+		width: "192",
+		height: "192",
+		id: "Star of life",
+		className,
+		"aria-label": title,
+		children: [
+			/* @__PURE__ */ jsx("defs", { id: "defs2886" }),
+			/* @__PURE__ */ jsxs("g", {
+				id: "cross",
+				children: [/* @__PURE__ */ jsx("path", {
+					d: "m 74,133 0,52 44,0 0,-52 44,26 22,-38 L 140,96 184,70 162,32 117,58 117,7 74,7 74,58 30,32 8,70 52,96 8,121 30,159 z",
+					id: "outline",
+					style: {
+						fill: "none",
+						stroke: "#3333bb",
+						strokeWidth: 6
+					}
+				}), /* @__PURE__ */ jsx("path", {
+					d: "m 74,133 0,52 44,0 0,-52 44,26 22,-38 L 140,96 184,70 162,32 117,58 117,7 74,7 74,58 30,32 8,70 52,96 8,121 30,159 z",
+					id: "inner",
+					style: {
+						fill: "#0000bb",
+						fillRule: "evenodd",
+						stroke: "#ffffff",
+						strokeWidth: 2
+					}
+				})]
+			}),
+			/* @__PURE__ */ jsxs("g", {
+				id: "symbols",
+				style: {
+					fill: "#ffffff",
+					fillRule: "evenodd",
+					stroke: "#3333bb",
+					strokeWidth: 2
+				},
+				children: [/* @__PURE__ */ jsx("path", {
+					d: "m 93,166 c 0,7 6,7 6,0 l 3,-138 c 0,-8 -12,-8 -12,0 l 3,135 0,3 z",
+					id: "rod"
+				}), /* @__PURE__ */ jsxs("g", {
+					id: "snake",
+					children: [/* @__PURE__ */ jsx("path", {
+						d: "m 100,153 c 7,4 3,15 -3,15 2,-5 3,-9 3,-15 z m 1,-40 c 10,9 4,22 -3,26 -6,3 -6,7 -6,15 -9,-10 -4,-19 4,-24 5,-4 5,-10 5,-17 z m 1,-30 c 0,11 -17,14 -17,22 0,3 1,9 6,12 0,-11 9,-12 15,-18 7,-7 7,-19 -4,-28 0,4 0,8 0,12 z M 90,77 C 80,69 76,55 80,46 c 3,-10 20,-11 20,-3 0,8 -20,3 -13,16 l 3,5 0,13 z",
+						id: "body"
+					}), /* @__PURE__ */ jsx("path", {
+						d: "m 95,43 c 7,-3 -7,-3 0,0 z",
+						id: "eye",
+						style: {
+							fill: "#3333bb",
+							fillRule: "evenodd",
+							stroke: "none"
+						}
+					})]
+				})]
+			})
+		]
+	});
+}
+
+// src/react/components/MessageSurface/index.tsx
+function MessageSurface(props) {
+	const { variant, icon, title, text, details, className, children } = props;
+	const prefix = variant === "success" ? "simulacrum-success-message" : "emergency-error-message";
+	const success = variant === "success";
+	return /* @__PURE__ */ jsxs("div", {
+		className: [cls(prefix), className].filter(Boolean).join(" "),
+		role: success ? "status" : "alert",
+		"aria-live": success ? "polite" : "assertive",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cls(`${prefix}__container`),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cls(`${prefix}__icon`),
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: icon,
+					className: "status-icon"
+				})
+			}), /* @__PURE__ */ jsxs("div", {
+				className: cls(`${prefix}__content`),
+				children: [
+					/* @__PURE__ */ jsx("h3", {
+						className: cls(`${prefix}__title`),
+						children: title
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: cls(`${prefix}__text`),
+						children: text
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: cls(`${prefix}__details`),
+						children: details.map((detail) => /* @__PURE__ */ jsxs("span", {
+							className: cls(`${prefix}__detail`),
+							children: [/* @__PURE__ */ jsx(Icon, { name: detail.icon }), detail.text]
+						}, detail.text))
+					})
+				]
+			})]
+		}), children]
+	});
+}
+
+// src/react/components/EmergencyError/index.tsx
+function EmergencyError({ error, onRetry }) {
+	return /* @__PURE__ */ jsx(MessageSurface, {
+		variant: "error",
+		icon: "exclamation-circle",
+		title: copy.errorTitle,
+		text: error.message || copy.errorText,
+		details: [{
+			icon: "info",
+			text: copy.errorDetailInfo
+		}, {
+			icon: "arrow-left",
+			text: copy.errorDetailRetry
+		}],
+		children: /* @__PURE__ */ jsx("button", {
+			type: "button",
+			className: cls("emergency-feedback__dismiss"),
+			onClick: onRetry,
+			children: copy.retry
+		})
+	});
+}
+
+// src/react/components/EmergencyFeedback/index.tsx
+/** Time the feedback stays on screen before dismissing itself. */
+const FEEDBACK_AUTO_DISMISS_MS = 3e3;
+/** Time the geolocation feedback stays on screen before dismissing itself. */
+const GEOLOCATION_FEEDBACK_AUTO_DISMISS_MS = 5e3;
+function geolocationText(error) {
+	switch (error.code) {
+		case "geolocation_denied": return copy.geolocationDenied;
+		case "geolocation_timeout": return copy.geolocationTimeout;
+		case "geolocation_unsupported": return copy.geolocationUnsupported;
+		default: return copy.geolocationUnavailable;
+	}
+}
+function EmergencyFeedback({ abortResult, simulationResult, geolocationError, activationError, onDismiss }) {
+	const result = abortResult ?? simulationResult;
+	const feedbackActivationError = result ? null : activationError ?? null;
+	const feedbackGeolocationError = result || feedbackActivationError ? null : geolocationError;
+	if (!result && !feedbackActivationError && !feedbackGeolocationError) return null;
+	return /* @__PURE__ */ jsx(FeedbackSurface, {
+		result,
+		aborting: abortResult !== null,
+		geolocationError: feedbackGeolocationError,
+		activationError: feedbackActivationError,
+		onDismiss
+	});
+}
+function FeedbackSurface({ result, aborting, geolocationError, activationError, onDismiss }) {
+	const dismissRef = useRef(onDismiss);
+	useEffect(() => {
+		dismissRef.current = onDismiss;
+	}, [onDismiss]);
+	useEffect(() => {
+		const timeout = setTimeout(() => dismissRef.current(), geolocationError || activationError ? GEOLOCATION_FEEDBACK_AUTO_DISMISS_MS : FEEDBACK_AUTO_DISMISS_MS);
+		return () => clearTimeout(timeout);
+	}, [
+		result?.at,
+		geolocationError,
+		activationError
+	]);
+	const success = result?.ok === true;
+	const title = success ? aborting ? copy.abortSuccessTitle : copy.simulateSuccessTitle : copy.errorTitle;
+	const text = success ? result?.message ?? "" : geolocationError ? geolocationText(geolocationError) : activationError ? activationError.message || copy.errorText : result?.message ?? copy.errorText;
+	const details = success ? aborting ? [{
+		icon: "message",
+		text: copy.abortSuccessDetails
+	}] : [{
+		icon: "message",
 		text: copy.simulateSuccessDetails
 	}, {
 		icon: "clock",
@@ -1983,101 +2339,129 @@ function EmergencyStatusPanel({ responders, refreshing, locale, onRefresh }) {
 	});
 }
 
-// src/react/components/EmergencyBody/index.tsx
-function EmergencyBody(props) {
-	const { active, responders, refreshing, loading, locale, geolocationError, activationError, error, abortResult, simulationResult, onRefresh, onRetry, onDismissFeedback } = props;
-	const showingFeedback = geolocationError !== null || Boolean(activationError) || abortResult !== null || simulationResult !== null;
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
-		!loading && !showingFeedback ? /* @__PURE__ */ jsx("div", {
-			className: cls("sos-img__container"),
-			id: "sos-img__container",
-			children: /* @__PURE__ */ jsx(ParamedicalMark, {
-				className: cls("sos-img"),
-				title: copy.illustrationAlt
-			})
-		}) : null,
-		active || loading || showingFeedback ? null : /* @__PURE__ */ jsx("div", {
-			className: cls("emergency-panel__body-title-container"),
-			children: /* @__PURE__ */ jsx("h4", {
-				className: cls("emergency-panel__body-title"),
-				children: copy.question
-			})
-		}),
-		active && !showingFeedback ? /* @__PURE__ */ jsx(EmergencyStatusPanel, {
-			responders,
-			refreshing,
-			locale,
-			onRefresh
-		}) : null,
-		loading ? /* @__PURE__ */ jsx(EmergencyLoading, {}) : null,
-		error ? /* @__PURE__ */ jsx(EmergencyError, {
-			error,
-			onRetry
-		}) : null,
-		/* @__PURE__ */ jsx(EmergencyFeedback, {
-			abortResult,
-			simulationResult,
-			geolocationError,
-			activationError,
-			onDismiss: onDismissFeedback
-		})
-	] });
+// src/react/screens/primary/copy.ts
+const primaryCopy = {
+	availabilityTitle: "Alertas Disponibles",
+	recharge: "Recargar",
+	details: "Detalles",
+	roundSingular: "ronda disponible",
+	roundPlural: "rondas disponibles"
+};
+/** Singular/plural label for the remaining rounds. */
+function roundsUnit(rounds) {
+	return rounds === 1 ? primaryCopy.roundSingular : primaryCopy.roundPlural;
+}
+function formatRounds(rounds) {
+	return `${rounds} ${roundsUnit(rounds)}`;
 }
 
-// src/react/components/EmergencyConfirmation/index.tsx
-function EmergencyConfirmation(props) {
-	const { abortConfirmation, simulationConfirmation, onCancelAbort, onCancelSimulation, onConfirmAbort, onConfirmSimulation } = props;
-	const cardRef = useRef(null);
-	const titleId = useId();
-	const danger = abortConfirmation;
-	const open = abortConfirmation || simulationConfirmation;
-	useEffect(() => {
-		if (open) cardRef.current?.querySelector("button")?.focus();
-	}, [open]);
-	if (!open) return null;
-	const title = danger ? copy.abortConfirmTitle : copy.simulateConfirmTitle;
-	const text = danger ? copy.abortConfirmText : copy.simulateConfirmText;
-	const tone = danger ? "danger" : "information";
-	return /* @__PURE__ */ jsx("div", {
-		className: cls("emergency-confirmation"),
-		role: "dialog",
-		"aria-modal": "true",
-		"aria-labelledby": titleId,
-		children: /* @__PURE__ */ jsxs("div", {
-			ref: cardRef,
-			className: cls("emergency-confirmation__card"),
-			children: [/* @__PURE__ */ jsxs("div", {
-				className: cls("emergency-confirmation__body"),
-				children: [
-					/* @__PURE__ */ jsx("div", {
-						className: cls("emergency-confirmation__icon", `emergency-confirmation__icon--${tone}`),
-						children: /* @__PURE__ */ jsx(Icon, { name: danger ? "alert-triangle" : "info" })
-					}),
-					/* @__PURE__ */ jsx("h5", {
-						className: cls("emergency-confirmation__title"),
-						id: titleId,
-						children: title
-					}),
-					/* @__PURE__ */ jsx("p", {
-						className: cls("emergency-confirmation__text"),
-						children: text
-					})
-				]
+// 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);
+	return /* @__PURE__ */ jsxs("section", {
+		className: cls("emergency-availability"),
+		"aria-label": primaryCopy.availabilityTitle,
+		children: [/* @__PURE__ */ jsxs("button", {
+			type: "button",
+			className: cls("emergency-availability__recharge"),
+			onClick: onRecharge,
+			children: [/* @__PURE__ */ jsx(Icon, { name: "credit-card-plus" }), primaryCopy.recharge]
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cls("emergency-availability__card"),
+			children: [/* @__PURE__ */ jsx("div", {
+				className: cls("emergency-availability__card-header"),
+				children: /* @__PURE__ */ jsx("h3", {
+					className: cls("emergency-availability__card-title"),
+					children: primaryCopy.availabilityTitle
+				})
 			}), /* @__PURE__ */ jsxs("div", {
-				className: cls("emergency-confirmation__footer"),
-				children: [/* @__PURE__ */ jsx("button", {
-					type: "button",
-					className: cls("emergency-confirmation__button", "emergency-confirmation__button--cancel"),
-					onClick: danger ? onCancelAbort : onCancelSimulation,
-					children: danger ? copy.abortCancel : copy.simulateCancel
+				className: cls("emergency-availability__card-body"),
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: cls("emergency-availability__rounds-group"),
+					"aria-label": formatRounds(rounds),
+					children: [/* @__PURE__ */ jsx("p", {
+						className: cls("emergency-availability__rounds"),
+						children: rounds
+					}), /* @__PURE__ */ jsx("p", {
+						className: cls("emergency-availability__label"),
+						children: roundsUnit(rounds)
+					})]
 				}), /* @__PURE__ */ jsx("button", {
 					type: "button",
-					className: cls("emergency-confirmation__button", danger ? "emergency-confirmation__button--danger" : "emergency-confirmation__button--confirm"),
-					onClick: danger ? onConfirmAbort : onConfirmSimulation,
-					children: danger ? copy.abortConfirm : copy.simulateConfirm
+					className: cls("emergency-availability__details"),
+					onClick: onDetails,
+					children: primaryCopy.details
 				})]
 			})]
-		})
+		})]
+	});
+}
+
+// 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 showingFeedback = geolocationError !== null || Boolean(activationError) || abortResult !== null || simulationResult !== null;
+	const idle = !active && !loading && !showingFeedback && error === null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cls("emergency-panel__body-split", idle && "emergency-panel__body-split--with-availability"),
+		children: [idle ? /* @__PURE__ */ jsx("div", {
+			className: cls("emergency-panel__availability-region"),
+			children: /* @__PURE__ */ jsx(Availability, {
+				onRecharge,
+				onDetails
+			})
+		}) : null, /* @__PURE__ */ jsxs("div", {
+			className: cls("emergency-panel__prompt-region"),
+			children: [
+				!loading && !showingFeedback ? /* @__PURE__ */ jsx("div", {
+					className: cls("sos-img__container"),
+					id: "sos-img__container",
+					children: /* @__PURE__ */ jsx(ParamedicalMark, {
+						className: cls("sos-img"),
+						title: copy.illustrationAlt
+					})
+				}) : null,
+				active || loading || showingFeedback ? null : /* @__PURE__ */ jsx("div", {
+					className: cls("emergency-panel__body-title-container"),
+					children: /* @__PURE__ */ jsx("h4", {
+						className: cls("emergency-panel__body-title"),
+						children: copy.question
+					})
+				}),
+				active && !showingFeedback ? /* @__PURE__ */ jsx(EmergencyStatusPanel, {
+					responders,
+					refreshing,
+					locale,
+					onRefresh
+				}) : null,
+				loading ? /* @__PURE__ */ jsx(EmergencyLoading, {}) : null,
+				error ? /* @__PURE__ */ jsx(EmergencyError, {
+					error,
+					onRetry
+				}) : null,
+				/* @__PURE__ */ jsx(EmergencyFeedback, {
+					abortResult,
+					simulationResult,
+					geolocationError,
+					activationError,
+					onDismiss: onDismissFeedback
+				})
+			]
+		})]
 	});
 }
 
@@ -2115,105 +2499,279 @@ function EmergencyFooter(props) {
 	});
 }
 
-// src/react/components/EmergencyHeader/index.tsx
-function EmergencyHeader({ titleId, onClose }) {
-	return /* @__PURE__ */ jsxs("header", {
-		className: cls("emergency-panel__header"),
-		children: [/* @__PURE__ */ jsx("h2", {
-			className: cls("emergency-panel__title"),
-			id: titleId,
-			children: copy.panelLabel
-		}), /* @__PURE__ */ jsx("button", {
-			type: "button",
-			className: cls("emergency-panel__close-button"),
-			"aria-label": copy.close,
-			onClick: onClose,
-			children: /* @__PURE__ */ jsx(Icon, {
-				name: "close",
-				className: cls("emergency-panel__close-icon")
-			})
-		})]
+// src/react/screens/primary/index.tsx
+function PrimaryScreen(props) {
+	const { navigate } = useScreenNavigation();
+	return /* @__PURE__ */ jsx(EmergencyScreenLayout, {
+		screen: "primary",
+		titleId: props.titleId,
+		header: /* @__PURE__ */ jsx(EmergencyHeader, {
+			titleId: props.titleId,
+			onClose: () => props.onClose("close")
+		}),
+		footer: /* @__PURE__ */ jsx(EmergencyFooter, {
+			active: props.active,
+			busy: props.busy,
+			aborting: props.aborting,
+			feedbackVisible: props.feedbackVisible,
+			onActivate: props.onActivate,
+			onRequestAbort: props.onRequestAbort,
+			onRequestSimulation: props.onRequestSimulation
+		}),
+		children: /* @__PURE__ */ jsx(EmergencyBody, {
+			active: props.active,
+			responders: props.responders,
+			refreshing: props.refreshing,
+			loading: props.loading,
+			locale: props.locale,
+			geolocationError: props.geolocationError,
+			activationError: props.activationError,
+			error: props.error,
+			abortResult: props.abortResult,
+			simulationResult: props.simulationResult,
+			onRefresh: props.onRefresh,
+			onRetry: props.onRetry,
+			onDismissFeedback: props.onDismissFeedback,
+			onRecharge: () => navigate("pricing"),
+			onDetails: () => navigate("details")
+		})
 	});
 }
 
-// src/react/hooks/useEscapeKey.ts
-function useEscapeKey(active, onEscape) {
-	useEffect(() => {
-		if (!active || typeof document === "undefined") return;
-		const handleKeyDown = (event) => {
-			if (event.key === "Escape") {
-				event.stopPropagation();
-				onEscape();
-			}
-		};
-		document.addEventListener("keydown", handleKeyDown);
-		return () => {
-			document.removeEventListener("keydown", handleKeyDown);
-		};
-	}, [active, onEscape]);
-}
+// src/react/screens/pricing/copy.ts
+const pricingCopy = {
+	title: "Recargar",
+	heading: "Elige tu paquete",
+	subtitle: "Alertas de WhatsApp para tus contactos",
+	bestValue: "MEJOR VALOR",
+	choose: "Seleccionar",
+	chosen: "Seleccionado",
+	whatsapp: "de WhatsApp",
+	rounds: "rondas de alerta",
+	perMessage: "por mensaje + IVA",
+	footnote: "Rondas calculadas con 3 contactos de emergencia. Válidas para pruebas y emergencias."
+};
 
-// src/react/hooks/useFocusTrap.ts
-const FOCUSABLE_SELECTOR = [
-	"a[href]",
-	"button:not([disabled])",
-	"input:not([disabled])",
-	"select:not([disabled])",
-	"textarea:not([disabled])",
-	"[tabindex]:not([tabindex=\"-1\"])"
-].join(",");
+// src/react/screens/pricing/data.ts
 /**
-* Keeps keyboard focus inside the dialog while it is open and restores focus to
-* the element that opened it when it closes.
+* Local demo catalog. Prices and per-message labels are literal values from the
+* mock; they are not derived from the package totals.
 */
-function useFocusTrap(ref, active) {
-	useEffect(() => {
-		if (!active || typeof document === "undefined") return;
-		const container = ref.current;
-		if (!container) return;
-		const previouslyFocused = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-		const focusable = () => Array.from(container.querySelectorAll(FOCUSABLE_SELECTOR)).filter((element) => !element.hasAttribute("hidden") && element.getAttribute("aria-hidden") !== "true");
-		(focusable()[0] ?? container).focus({ preventScroll: true });
-		const handleKeyDown = (event) => {
-			if (event.key !== "Tab") return;
-			const items = focusable();
-			if (items.length === 0) {
-				event.preventDefault();
-				container.focus({ preventScroll: true });
-				return;
-			}
-			const first = items[0];
-			const last = items[items.length - 1];
-			const current = document.activeElement;
-			if (event.shiftKey && (current === first || !container.contains(current))) {
-				event.preventDefault();
-				if (last) last.focus({ preventScroll: true });
-				return;
-			}
-			if (!event.shiftKey && current === last && first) {
-				event.preventDefault();
-				first.focus({ preventScroll: true });
-			}
-		};
-		document.addEventListener("keydown", handleKeyDown, true);
-		return () => {
-			document.removeEventListener("keydown", handleKeyDown, true);
-			if (previouslyFocused?.isConnected) previouslyFocused.focus({ preventScroll: true });
-		};
-	}, [active, ref]);
+const PRICING_PACKAGES = [{
+	id: "package-1",
+	label: "PAQUETE 1",
+	messages: 100,
+	priceLabel: "$7",
+	priceCaption: "IVA incluido",
+	perMessageLabel: "$0.06",
+	highlighted: false
+}, {
+	id: "package-2",
+	label: "PAQUETE 2",
+	messages: 200,
+	priceLabel: "12$",
+	priceNote: "($10 + IVA)",
+	priceCaption: "IVA incluido",
+	perMessageLabel: "$0.05",
+	highlighted: true,
+	badge: "MEJOR VALOR"
+}];
+/** Derives the alert rounds a package provides for the demo responder count. */
+function packageRounds(pkg) {
+	return calculateRounds(pkg.messages, 3);
+}
+
+// src/react/screens/pricing/PackageCard.tsx
+function PackageCard({ pkg, selected, onSelect }) {
+	const labelId = useId();
+	const rounds = packageRounds(pkg);
+	return /* @__PURE__ */ jsxs("section", {
+		className: cls("emergency-pricing__package", pkg.highlighted && "emergency-pricing__package--highlighted"),
+		"aria-labelledby": labelId,
+		"data-selected": selected ? "true" : void 0,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: cls("emergency-pricing__package-header"),
+				children: [/* @__PURE__ */ jsx("span", {
+					className: cls("emergency-pricing__package-label"),
+					id: labelId,
+					children: pkg.label
+				}), pkg.badge ? /* @__PURE__ */ jsx("span", {
+					className: cls("emergency-pricing__badge"),
+					children: pkg.badge
+				}) : null]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cls("emergency-pricing__price-row"),
+				children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("h4", {
+					className: cls("emergency-pricing__package-name"),
+					children: [pkg.messages, " alertas"]
+				}), /* @__PURE__ */ jsx("p", {
+					className: cls("emergency-pricing__package-caption"),
+					children: pricingCopy.whatsapp
+				})] }), /* @__PURE__ */ jsxs("div", {
+					className: cls("emergency-pricing__price-meta"),
+					children: [/* @__PURE__ */ jsx("span", {
+						className: cls("emergency-pricing__price"),
+						children: pkg.priceLabel
+					}), /* @__PURE__ */ jsxs("span", {
+						className: cls("emergency-pricing__price-note"),
+						children: [pkg.priceCaption, pkg.priceNote ? ` ${pkg.priceNote}` : null]
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: cls("emergency-pricing__stats"),
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: cls("emergency-pricing__stat"),
+						children: [/* @__PURE__ */ jsx("p", {
+							className: cls("emergency-pricing__stat-value"),
+							children: rounds
+						}), /* @__PURE__ */ jsx("p", {
+							className: cls("emergency-pricing__stat-label"),
+							children: pricingCopy.rounds
+						})]
+					}),
+					/* @__PURE__ */ jsx("div", {
+						className: cls("emergency-pricing__stat-divider"),
+						"aria-hidden": "true"
+					}),
+					/* @__PURE__ */ jsxs("div", {
+						className: cls("emergency-pricing__stat"),
+						children: [/* @__PURE__ */ jsx("p", {
+							className: cls("emergency-pricing__stat-value"),
+							children: pkg.perMessageLabel
+						}), /* @__PURE__ */ jsx("p", {
+							className: cls("emergency-pricing__stat-label"),
+							children: pricingCopy.perMessage
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ jsx("button", {
+				type: "button",
+				className: cls("emergency-pricing__select"),
+				"aria-pressed": selected,
+				onClick: () => onSelect(pkg.id),
+				children: selected ? pricingCopy.chosen : pricingCopy.choose
+			})
+		]
+	});
 }
 
+// src/react/screens/pricing/index.tsx
+function PricingScreen(props) {
+	const { back } = useScreenNavigation();
+	const [selected, setSelected] = useState(null);
+	return /* @__PURE__ */ jsx(EmergencyScreenLayout, {
+		screen: "pricing",
+		titleId: props.titleId,
+		bodyClassName: "emergency-panel__body--pricing",
+		header: /* @__PURE__ */ jsx(EmergencyHeader, {
+			titleId: props.titleId,
+			title: pricingCopy.title,
+			onClose: () => props.onClose("close"),
+			onBack: back
+		}),
+		footer: null,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: cls("emergency-pricing"),
+			children: [
+				/* @__PURE__ */ jsx("div", {
+					className: cls("emergency-pricing__heading"),
+					children: /* @__PURE__ */ jsxs("div", {
+						className: cls("emergency-pricing__titles"),
+						children: [/* @__PURE__ */ jsx("h3", {
+							className: cls("emergency-pricing__title"),
+							children: pricingCopy.heading
+						}), /* @__PURE__ */ jsx("p", {
+							className: cls("emergency-pricing__subtitle"),
+							children: pricingCopy.subtitle
+						})]
+					})
+				}),
+				PRICING_PACKAGES.map((pkg) => /* @__PURE__ */ jsx(PackageCard, {
+					pkg,
+					selected: selected === pkg.id,
+					onSelect: setSelected
+				}, pkg.id)),
+				/* @__PURE__ */ jsx("p", {
+					className: cls("emergency-pricing__footnote"),
+					children: pricingCopy.footnote
+				})
+			]
+		})
+	});
+}
+
+// src/react/screens/registry.ts
+/** Every screen the panel can render. Add one entry to add a screen. */
+const screenRegistry = {
+	primary: PrimaryScreen,
+	pricing: PricingScreen,
+	details: DetailsScreen
+};
+
 // src/react/components/EmergencyPanel/index.tsx
+function ActiveScreen({ screenProps, open, forcePrimary }) {
+	const { screen, reset } = useScreenNavigation();
+	const shouldReset = !open || forcePrimary;
+	const effectiveScreen = shouldReset ? "primary" : screen;
+	const previousOpen = useRef(open);
+	const previousScreen = useRef(effectiveScreen);
+	useEffect(() => {
+		if (shouldReset) reset();
+	}, [reset, shouldReset]);
+	useEffect(() => {
+		const wasOpen = previousOpen.current;
+		const previousEffectiveScreen = previousScreen.current;
+		previousOpen.current = open;
+		previousScreen.current = effectiveScreen;
+		if (!open || !wasOpen || previousEffectiveScreen === effectiveScreen) return;
+		document.getElementById(screenProps.titleId)?.focus({ preventScroll: true });
+	}, [
+		effectiveScreen,
+		open,
+		screenProps.titleId
+	]);
+	const Screen = screenRegistry[effectiveScreen];
+	return /* @__PURE__ */ 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 titleId = useId();
 	const dialogRef = useRef(null);
 	const feedbackVisible = geolocationError !== null || Boolean(activationError) || abortResult !== null || simulationResult !== null;
+	const forcePrimary = active || loading || error !== null || feedbackVisible;
 	const closeOnEscape = useCallback(() => {
 		onClose("escape");
 	}, [onClose]);
 	useFocusTrap(dialogRef, open);
 	useEscapeKey(open, closeOnEscape);
+	const screenProps = {
+		titleId,
+		active,
+		busy,
+		aborting,
+		loading,
+		locale,
+		responders,
+		refreshing,
+		geolocationError,
+		activationError,
+		error,
+		abortResult,
+		simulationResult,
+		feedbackVisible,
+		onClose,
+		onActivate,
+		onRefresh,
+		onRetry,
+		onDismissFeedback,
+		onRequestAbort,
+		onRequestSimulation
+	};
 	return /* @__PURE__ */ jsxs("div", {
 		ref: dialogRef,
 		className: cls("emergency-panel", !open && "emergency-panel--hidden"),
@@ -2224,48 +2782,18 @@ function EmergencyPanel(props) {
 		"aria-hidden": !open,
 		inert: !open,
 		tabIndex: -1,
-		children: [
-			/* @__PURE__ */ jsx(EmergencyHeader, {
-				titleId,
-				onClose: () => onClose("close")
-			}),
-			/* @__PURE__ */ jsx("section", {
-				className: cls("emergency-panel__body"),
-				"aria-labelledby": titleId,
-				children: /* @__PURE__ */ jsx(EmergencyBody, {
-					active,
-					responders,
-					refreshing,
-					loading,
-					locale,
-					geolocationError,
-					activationError,
-					error,
-					abortResult,
-					simulationResult,
-					onRefresh,
-					onRetry,
-					onDismissFeedback
-				})
-			}),
-			/* @__PURE__ */ jsx(EmergencyFooter, {
-				active,
-				busy,
-				aborting,
-				feedbackVisible,
-				onActivate,
-				onRequestAbort,
-				onRequestSimulation
-			}),
-			/* @__PURE__ */ jsx(EmergencyConfirmation, {
-				abortConfirmation,
-				simulationConfirmation,
-				onCancelAbort,
-				onCancelSimulation,
-				onConfirmAbort,
-				onConfirmSimulation
-			})
-		]
+		children: [/* @__PURE__ */ jsx(EmergencyScreenProvider, { children: /* @__PURE__ */ jsx(ActiveScreen, {
+			screenProps,
+			open,
+			forcePrimary
+		}) }), /* @__PURE__ */ jsx(EmergencyConfirmation, {
+			abortConfirmation,
+			simulationConfirmation,
+			onCancelAbort,
+			onCancelSimulation,
+			onConfirmAbort,
+			onConfirmSimulation
+		})]
 	});
 }