@coventia/softphone 0.3.0 → 0.4.0

package/dist/element/index.js

@@ -6931,7 +6931,7 @@ var require_jsx_runtime = __commonJS({
 });
 
 // src/element/index.ts
-var import_react41 = __toESM(require_react(), 1);
+var import_react46 = __toESM(require_react(), 1);
 var import_client = __toESM(require_client(), 1);
 
 // src/react/context.tsx
@@ -6950,7 +6950,7 @@ function useSoftphone() {
 }
 
 // src/ui/SoftphoneWidget.tsx
-var import_react39 = __toESM(require_react(), 1);
+var import_react44 = __toESM(require_react(), 1);
 
 // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
 var import_react3 = __toESM(require_react());
@@ -7446,7 +7446,7 @@ function useDevices() {
 }
 
 // src/ui/views/Dialpad.tsx
-var import_react7 = __toESM(require_react(), 1);
+var import_react11 = __toESM(require_react(), 1);
 
 // src/ui/dialing/CountryPicker.tsx
 var import_react5 = __toESM(require_react(), 1);
@@ -7456,6 +7456,36 @@ var PACKED = "AC247 AD376 AE971 AF93 AG1 AI1 AL355 AM374 AO244 AR54 AS1 AT43 AU6
 var DIAL_CODES = new Map(
   PACKED.split(" ").map((token) => [token.slice(0, 2), Number(token.slice(2))])
 );
+var REGIONS_BY_CODE = (() => {
+  const map = /* @__PURE__ */ new Map();
+  for (const [region, code] of DIAL_CODES) map.set(code, [...map.get(code) ?? [], region]);
+  return map;
+})();
+var MAIN_REGION = {
+  1: "US",
+  7: "RU",
+  39: "IT",
+  44: "GB",
+  47: "NO",
+  61: "AU",
+  212: "MA",
+  262: "RE",
+  290: "SH",
+  358: "FI",
+  590: "GP",
+  599: "CW"
+};
+function regionOfInternational(typed) {
+  const text = String(typed ?? "").trim();
+  if (!text.startsWith("+")) return null;
+  const digits = text.slice(1).replace(/\D/g, "");
+  for (let length = 1; length <= Math.min(3, digits.length); length++) {
+    const code = Number(digits.slice(0, length));
+    const regions = REGIONS_BY_CODE.get(code);
+    if (regions) return MAIN_REGION[code] ?? regions[0] ?? null;
+  }
+  return null;
+}
 var DEFAULT_COUNTRY = "ES";
 var REGION_NAMES = (() => {
   try {
@@ -7510,12 +7540,16 @@ function CountryMark({ code }) {
 }
 function CountryPicker({
   value,
-  onChange
+  onChange,
+  fromNumber = false
 }) {
   const [open, setOpen] = (0, import_react5.useState)(false);
   const [query, setQuery] = (0, import_react5.useState)("");
   const rootRef = (0, import_react5.useRef)(null);
   const inputRef = (0, import_react5.useRef)(null);
+  (0, import_react5.useEffect)(() => {
+    if (fromNumber) setOpen(false);
+  }, [fromNumber]);
   const results = (0, import_react5.useMemo)(() => {
     const q = query.trim().toLowerCase().replace(/^\+/, "");
     if (!q) return COUNTRIES;
@@ -7544,6 +7578,12 @@ function CountryPicker({
     else setQuery("");
   }, [open]);
   const dial = DIAL_CODES.get(value);
+  if (fromNumber) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "cv-cp", ref: rootRef, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { className: "cv-cp-chip", "data-from-number": true, title: "El prefijo viene del n\xFAmero marcado", part: "country-chip", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(CountryMark, { code: value || "+" }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "cv-sr-only", children: dial ? `Prefijo del n\xFAmero marcado: ${countryName(value)} (+${dial})` : "Prefijo del n\xFAmero marcado" })
+    ] }) });
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "cv-cp", ref: rootRef, children: [
     /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
       "button",
@@ -8114,27 +8154,413 @@ function playRingback() {
   };
 }
 
-// src/ui/views/Dialpad.tsx
+// src/ui/outbound/OutboundNumberPicker.tsx
+var import_react9 = __toESM(require_react(), 1);
+
+// src/ui/outbound/outbound-change.ts
+var import_react8 = __toESM(require_react(), 1);
+
+// src/core/outbound-numbers.ts
+function isOutboundNumberRefused(value) {
+  const refusal = value?.refusal;
+  return value instanceof Error && !!refusal && (refusal.reason === "platform" || refusal.reason === "user") && typeof refusal.retryAfterSeconds === "number";
+}
+
+// src/ui/outbound/outbound-number-store.ts
+var import_react7 = __toESM(require_react(), 1);
+var stores = /* @__PURE__ */ new WeakMap();
+function outboundNumberStore(softphone) {
+  const source = softphone.sources?.outboundNumbers;
+  if (!source) return null;
+  let store = stores.get(softphone);
+  if (!store) {
+    store = createOutboundNumberStore(source);
+    stores.set(softphone, store);
+  }
+  return store;
+}
+function createOutboundNumberStore(source) {
+  let settings = null;
+  let inFlight = null;
+  const listeners = /* @__PURE__ */ new Set();
+  const apply = (next) => {
+    settings = next;
+    for (const l of listeners) l();
+  };
+  return {
+    getSettings: () => settings,
+    refresh() {
+      inFlight ??= (async () => {
+        if (!settings && source.cached) {
+          const early = await source.cached().catch(() => null);
+          if (early && !settings) apply(early);
+        }
+        try {
+          apply(await source.get());
+        } catch (error) {
+          console.warn("[softphone] outbound numbers could not be loaded; keeping the previous ones", error);
+        } finally {
+          inFlight = null;
+        }
+      })();
+      return inFlight;
+    },
+    async setMine(id) {
+      apply(await source.setMine(id));
+    },
+    subscribe(listener) {
+      listeners.add(listener);
+      return () => listeners.delete(listener);
+    }
+  };
+}
+var noSubscribe = () => () => {
+};
+var noSettings = () => null;
+function useOutboundNumbers(store) {
+  const settings = (0, import_react7.useSyncExternalStore)(store?.subscribe ?? noSubscribe, store?.getSettings ?? noSettings);
+  const [failed, setFailed] = (0, import_react7.useState)(false);
+  const load = (0, import_react7.useCallback)(() => {
+    if (!store) return () => {
+    };
+    let live = true;
+    setFailed(false);
+    void store.refresh().then(() => {
+      if (live) setFailed(store.getSettings() === null);
+    });
+    return () => {
+      live = false;
+    };
+  }, [store]);
+  (0, import_react7.useEffect)(load, [load]);
+  return { settings, failed, retry: load };
+}
+function useKnownOutboundNumbers(store) {
+  return (0, import_react7.useSyncExternalStore)(store?.subscribe ?? noSubscribe, store?.getSettings ?? noSettings);
+}
+function useCountdown(until) {
+  const [, setTick] = (0, import_react7.useState)(0);
+  (0, import_react7.useEffect)(() => {
+    if (!until) return void 0;
+    const timer = setInterval(() => {
+      setTick((n) => n + 1);
+      if (secondsLeft(until) === 0) clearInterval(timer);
+    }, 1e3);
+    return () => clearInterval(timer);
+  }, [until]);
+  return secondsLeft(until);
+}
+function secondsLeft(until) {
+  return until ? Math.max(0, Math.ceil((until - Date.now()) / 1e3)) : 0;
+}
+function numberName(n, format = formatIntl) {
+  if (!n) return "N\xFAmero de la organizaci\xF3n";
+  return n.label || format(`+${n.number}`);
+}
+function effectiveNumber(settings) {
+  return settings?.numbers.find((n) => n.id === settings.effective);
+}
+
+// src/ui/outbound/outbound-change.ts
+var KIND_TAG = {
+  mobile: { tag: "M\xF3vil", hint: "No usar para atenci\xF3n al cliente ni para llamadas comerciales no solicitadas." },
+  commercial: { tag: "Comercial (400)", hint: "Solo para llamadas comerciales. No recibe llamadas." }
+};
+function noticeText(situation, seconds, current) {
+  switch (situation) {
+    case "platform":
+      return `El cambio de n\xFAmero de salida no est\xE1 disponible temporalmente. Vuelve a intentarlo en ${seconds} s. Hasta entonces, tus llamadas seguir\xE1n saliendo desde ${current}.`;
+    case "user":
+      return `Acabas de cambiar el n\xFAmero de salida. Podr\xE1s cambiarlo de nuevo en ${seconds} s. Hasta entonces, tus llamadas saldr\xE1n desde ${current}.`;
+    case "wait":
+      return `Podr\xE1s cambiar el n\xFAmero de salida en ${seconds} s.`;
+    case "pending":
+      return seconds > 0 ? `Tu n\xFAmero de salida todav\xEDa no se ha aplicado. Podr\xE1s volver a elegirlo en ${seconds} s.` : "Tu n\xFAmero de salida todav\xEDa no se ha aplicado. Vuelve a elegirlo para aplicarlo.";
+  }
+}
+function useOutboundNumberChange(store, settings, current) {
+  const [busy, setBusy] = (0, import_react8.useState)(false);
+  const [notice, setNotice] = (0, import_react8.useState)(null);
+  const [waitUntil, setWaitUntil] = (0, import_react8.useState)(null);
+  (0, import_react8.useEffect)(() => {
+    const s = settings?.changeAvailableInSeconds ?? 0;
+    setWaitUntil(s > 0 ? Date.now() + s * 1e3 : null);
+  }, [settings]);
+  const refusedUntil = notice?.kind === "refused" ? notice.until : null;
+  const blockedFor = useCountdown(refusedUntil ?? waitUntil);
+  (0, import_react8.useEffect)(() => {
+    if (notice?.kind === "refused" && blockedFor === 0) setNotice(null);
+  }, [notice, blockedFor]);
+  const locked = busy || blockedFor > 0;
+  const choose = async (id) => {
+    if (!store || !settings || locked) return false;
+    if (id === settings.mine) return true;
+    setBusy(true);
+    setNotice(null);
+    try {
+      await store.setMine(id);
+      return true;
+    } catch (error) {
+      setNotice(
+        isOutboundNumberRefused(error) ? { kind: "refused", reason: error.refusal.reason, until: Date.now() + error.refusal.retryAfterSeconds * 1e3 } : { kind: "error", text: errorText(error) }
+      );
+      return false;
+    } finally {
+      setBusy(false);
+    }
+  };
+  return {
+    busy,
+    locked,
+    choose,
+    /** What to say about the choice right now, if anything. */
+    message: settings ? currentMessage(notice, settings.state, blockedFor, current) : null,
+    /** The message is an error (the change failed), not information (wait, pending). */
+    isError: notice?.kind === "error"
+  };
+}
+function currentMessage(notice, state, blockedFor, current) {
+  if (notice?.kind === "refused") return blockedFor > 0 ? noticeText(notice.reason, blockedFor, current) : null;
+  if (notice?.kind === "error") return notice.text;
+  if (state === "pending" || state === "failed") return noticeText("pending", blockedFor, current);
+  return blockedFor > 0 ? noticeText("wait", blockedFor, current) : null;
+}
+function errorText(error) {
+  const message = error instanceof Error ? error.message : "";
+  return message && !/HTTP \d+/.test(message) ? message : "No se ha podido cambiar el n\xFAmero de salida. Int\xE9ntalo de nuevo.";
+}
+
+// src/ui/outbound/OutboundNumberPicker.tsx
 var import_jsx_runtime3 = __toESM(require_jsx_runtime(), 1);
+var CALLOUT_MS = 6e3;
+function OutboundNumberPicker({ onBusyChange }) {
+  const softphone = useSoftphone();
+  const store = outboundNumberStore(softphone);
+  const { settings } = useOutboundNumbers(store);
+  const formatIntl2 = useIntlFormatter();
+  const current = settings ? numberName(effectiveNumber(settings), formatIntl2) : "";
+  const { busy, locked, choose: apply, message, isError } = useOutboundNumberChange(store, settings, current);
+  const [open, setOpen] = (0, import_react9.useState)(false);
+  const [applying, setApplying] = (0, import_react9.useState)(void 0);
+  const [callout, setCallout] = (0, import_react9.useState)(false);
+  const rootRef = (0, import_react9.useRef)(null);
+  const chipRef = (0, import_react9.useRef)(null);
+  const keys = useListKeyboard(open);
+  (0, import_react9.useEffect)(() => onBusyChange?.(busy), [busy, onBusyChange]);
+  (0, import_react9.useEffect)(() => {
+    if (!message) setCallout(false);
+  }, [message]);
+  (0, import_react9.useEffect)(() => {
+    if (!callout) return void 0;
+    const timer = setTimeout(() => setCallout(false), CALLOUT_MS);
+    return () => clearTimeout(timer);
+  }, [callout]);
+  const floating = open || callout;
+  (0, import_react9.useEffect)(() => {
+    if (!floating) return;
+    const close = () => {
+      setOpen(false);
+      setCallout(false);
+    };
+    const root = rootRef.current?.getRootNode() ?? document;
+    const onDown = (e) => {
+      if (!rootRef.current?.contains(e.target)) close();
+    };
+    const onKey = (e) => {
+      if (e.key !== "Escape") return;
+      if (rootRef.current?.contains(e.target)) chipRef.current?.focus();
+      close();
+    };
+    root.addEventListener("pointerdown", onDown);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      root.removeEventListener("pointerdown", onDown);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [floating]);
+  if (!store || !settings || settings.numbers.length < 2) return null;
+  const orgDefault = settings.numbers.find((n) => n.id === settings.orgDefault);
+  const applyingNumber = applying === null ? orgDefault : settings.numbers.find((n) => n.id === applying);
+  const shown = applying === void 0 ? current : numberName(applyingNumber, formatIntl2);
+  const choose = async (id) => {
+    if (locked) return;
+    setOpen(false);
+    chipRef.current?.focus();
+    if (id === settings.mine) return;
+    setCallout(false);
+    setApplying(id);
+    const applied = await apply(id);
+    setApplying(void 0);
+    if (!applied) setCallout(true);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cv-on", ref: rootRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "button",
+      {
+        ref: chipRef,
+        type: "button",
+        className: "cv-on-chip",
+        onClick: () => {
+          setCallout(false);
+          setOpen((o) => !o);
+        },
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-label": `Llamar desde: ${shown}${busy ? " (aplicando)" : ""}. Cambiar n\xFAmero de salida`,
+        "aria-busy": busy,
+        part: "outbound-number-chip",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "cv-on-label", children: "Llamar desde:" }),
+          busy ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(LoaderCircle, { size: 13, className: "cv-on-icon cv-on-spin", "aria-hidden": true }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "cv-on-current", children: shown }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ChevronDown, { size: 13, className: "cv-cp-caret", "data-open": open, "aria-hidden": true })
+        ]
+      }
+    ),
+    open ? /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        className: "cv-cp-pop cv-on-pop",
+        role: "dialog",
+        "aria-label": "Llamar desde",
+        part: "outbound-number-list",
+        onBlur: (e) => {
+          if (!e.currentTarget.contains(e.relatedTarget)) setOpen(false);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "cv-on-title", children: "Llamar desde" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cv-cp-list", role: "listbox", "aria-disabled": locked, ref: keys.listRef, onKeyDown: keys.onKeyDown, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              OptionRow,
+              {
+                selected: settings.mine === null,
+                disabled: locked,
+                title: "Por defecto de la organizaci\xF3n",
+                sub: orgDefault ? numberName(orgDefault, formatIntl2) : "Sin n\xFAmero por defecto",
+                onSelect: () => void choose(null)
+              }
+            ),
+            settings.numbers.map((n) => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              OptionRow,
+              {
+                selected: settings.mine === n.id,
+                disabled: locked,
+                title: numberName(n, formatIntl2),
+                sub: n.label ? formatIntl2(`+${n.number}`) : null,
+                tag: KIND_TAG[n.kind],
+                onSelect: () => void choose(n.id)
+              },
+              n.id
+            ))
+          ] }),
+          message ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "cv-on-notice", role: "status", "data-kind": isError ? "error" : "info", children: message }) : null
+        ]
+      }
+    ) : null,
+    callout && !open && message ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "cv-on-callout", role: "status", "data-kind": isError ? "error" : "info", part: "outbound-number-notice", children: message }) : null
+  ] });
+}
+function OptionRow({
+  selected,
+  disabled,
+  title,
+  sub,
+  tag,
+  onSelect
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "button",
+    {
+      type: "button",
+      role: "option",
+      "aria-selected": selected,
+      "aria-disabled": disabled,
+      className: "cv-cp-item cv-on-item",
+      tabIndex: -1,
+      onClick: onSelect,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "cv-on-text", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: "cv-on-line", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "cv-cp-name", children: title }),
+            tag ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "cv-on-tag", children: tag.tag }) : null
+          ] }),
+          sub ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "cv-on-sub", children: sub }) : null,
+          tag ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "cv-on-hint", children: tag.hint }) : null
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Check, { size: 14, className: "cv-cp-check", "data-on": selected, "aria-hidden": true })
+      ]
+    }
+  );
+}
+var optionsOf = (list) => list ? [...list.querySelectorAll('[role="option"]')] : [];
+var fold = (text) => text.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase();
+var TYPEAHEAD_MS = 700;
+function useListKeyboard(open) {
+  const listRef = (0, import_react9.useRef)(null);
+  const typed = (0, import_react9.useRef)({ text: "", at: 0 });
+  (0, import_react9.useEffect)(() => {
+    if (!open) return;
+    const options = optionsOf(listRef.current);
+    (options.find((o) => o.getAttribute("aria-selected") === "true") ?? options[0])?.focus();
+  }, [open]);
+  const onKeyDown = (e) => {
+    const options = optionsOf(listRef.current);
+    const at = options.indexOf(e.target);
+    const move = {
+      ArrowDown: Math.min(at + 1, options.length - 1),
+      ArrowUp: Math.max(at - 1, 0),
+      Home: 0,
+      End: options.length - 1
+    };
+    let next = move[e.key];
+    if (next === void 0 && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+      const now = Date.now();
+      const text = now - typed.current.at < TYPEAHEAD_MS ? typed.current.text + e.key : e.key;
+      typed.current = { text, at: now };
+      const wanted = fold(text);
+      const match = options.findIndex((o) => fold(o.querySelector(".cv-cp-name")?.textContent ?? "").startsWith(wanted));
+      next = match >= 0 ? match : void 0;
+    }
+    if (next === void 0) return;
+    e.preventDefault();
+    options[next]?.focus();
+  };
+  return { listRef, onKeyDown };
+}
+
+// src/ui/views/Dialpad.tsx
+var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
 var NOT_DIALABLE = /* @__PURE__ */ new Set(["*", "#"]);
+var DISPLAY_SIZES = ["1.375rem", "1.25rem", "1.125rem", "1rem"];
 function Dialpad({ outcome = null, onIntent, keyTones = true } = {}) {
   const softphone = useSoftphone();
   const state = useSoftphoneState();
-  const [value, setValue] = (0, import_react7.useState)("");
-  const [country, setCountry] = (0, import_react7.useState)(DEFAULT_COUNTRY);
+  const [value, setValue] = (0, import_react11.useState)("");
+  const [country, setCountry] = (0, import_react11.useState)(DEFAULT_COUNTRY);
+  const [changingNumber, setChangingNumber] = (0, import_react11.useState)(false);
   const format = useNumberFormatter();
-  const inputRef = (0, import_react7.useRef)(null);
-  const caretRef = (0, import_react7.useRef)(null);
+  const inputRef = (0, import_react11.useRef)(null);
+  const caretRef = (0, import_react11.useRef)(null);
   const display = format(country, value);
   const target = toE164(country, value);
-  const canCall = state === "online" && target.length > 1;
-  (0, import_react7.useLayoutEffect)(() => {
+  const canCall = state === "online" && target.length > 1 && !changingNumber;
+  const typedInternational = value.trim().startsWith("+");
+  const numberRegion = regionOfInternational(value);
+  (0, import_react11.useLayoutEffect)(() => {
     const caret = caretRef.current;
     if (caret === null || !inputRef.current) return;
     caretRef.current = null;
     const pos = caretAfterDigits(display, caret);
     inputRef.current.setSelectionRange(pos, pos);
   }, [display]);
+  (0, import_react11.useLayoutEffect)(() => {
+    const input = inputRef.current;
+    if (!input) return;
+    for (const size of DISPLAY_SIZES) {
+      input.style.fontSize = size;
+      if (input.scrollWidth <= input.clientWidth) break;
+    }
+  }, [display]);
   const append = (key) => {
     onIntent?.();
     setValue((v) => v + key);
@@ -8149,11 +8575,18 @@ function Dialpad({ outcome = null, onIntent, keyTones = true } = {}) {
     onIntent?.();
     void softphone.call(target);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cv-view", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cv-dial-prefix", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CountryPicker, { value: country, onChange: setCountry }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "cv-dial-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "cv-dial-side", "aria-hidden": true }),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "cv-view", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(OutboundNumberPicker, { onBusyChange: setChangingNumber }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "cv-dial-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        CountryPicker,
+        {
+          value: numberRegion ?? country,
+          onChange: setCountry,
+          fromNumber: typedInternational
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "input",
         {
           ref: inputRef,
@@ -8170,22 +8603,24 @@ function Dialpad({ outcome = null, onIntent, keyTones = true } = {}) {
           inputMode: "tel"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
         "button",
         {
           type: "button",
           className: "cv-dial-side",
           "data-hidden": value.length === 0,
+          tabIndex: value.length === 0 ? -1 : void 0,
+          "aria-hidden": value.length === 0 || void 0,
           onClick: backspace,
           "aria-label": "Borrar",
-          children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Delete, { size: 19 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Delete, { size: 19 })
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: "cv-dial-outcome", role: "status", part: "error", "data-shown": outcome !== null, children: outcome?.text ?? "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cv-keypad", children: KEYPAD_KEYS.map(([key, letters]) => {
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "cv-dial-outcome", role: "status", part: "error", "data-shown": outcome !== null, children: outcome?.text ?? "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "cv-keypad", children: KEYPAD_KEYS.map(([key, letters]) => {
       const dialable = !NOT_DIALABLE.has(key);
-      return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
         "button",
         {
           type: "button",
@@ -8195,14 +8630,14 @@ function Dialpad({ outcome = null, onIntent, keyTones = true } = {}) {
           "aria-disabled": !dialable,
           title: dialable ? void 0 : "Solo disponible durante una llamada",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("b", { children: key }),
-            letters ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("small", { children: letters }) : null
+            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("b", { children: key }),
+            letters ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("small", { children: letters }) : null
           ]
         },
         key
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "cv-dial-foot", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "cv-dial-foot", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
       "button",
       {
         type: "button",
@@ -8211,14 +8646,14 @@ function Dialpad({ outcome = null, onIntent, keyTones = true } = {}) {
         disabled: !canCall,
         "aria-label": "Llamar",
         part: "call-button",
-        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Phone, { size: 26 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Phone, { size: 26 })
       }
     ) })
   ] });
 }
 
 // src/ui/views/CallScreen.tsx
-var import_react12 = __toESM(require_react(), 1);
+var import_react16 = __toESM(require_react(), 1);
 
 // src/ui/lib/format.ts
 function formatDuration(totalSeconds) {
@@ -8360,10 +8795,10 @@ var ERROR_TEXT = {
 };
 
 // src/ui/lib/useTicker.ts
-var import_react9 = __toESM(require_react(), 1);
+var import_react13 = __toESM(require_react(), 1);
 function useTicker(enabled, intervalMs = 1e3) {
-  const [now, setNow] = (0, import_react9.useState)(() => Date.now());
-  (0, import_react9.useEffect)(() => {
+  const [now, setNow] = (0, import_react13.useState)(() => Date.now());
+  (0, import_react13.useEffect)(() => {
     if (!enabled) return;
     setNow(Date.now());
     const id = setInterval(() => setNow(Date.now()), intervalMs);
@@ -8373,8 +8808,8 @@ function useTicker(enabled, intervalMs = 1e3) {
 }
 
 // src/ui/views/DevicePicker.tsx
-var import_react10 = __toESM(require_react(), 1);
-var import_jsx_runtime4 = __toESM(require_jsx_runtime(), 1);
+var import_react14 = __toESM(require_react(), 1);
+var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
 function deviceLabel(device, index, kind) {
   if (device.label) return device.label;
   return kind === "input" ? `Micr\xF3fono ${index + 1}` : `Altavoz ${index + 1}`;
@@ -8389,11 +8824,11 @@ function DevicePicker({
   onChange,
   emptyText
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "cv-settings-row", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "cv-settings-row-icon", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Icon3, { size: 16 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("span", { className: "cv-settings-row-text", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "cv-settings-row-label", id: `cv-settings-label-${kind}`, children: label }),
-      options.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-settings-row", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cv-settings-row-icon", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon3, { size: 16 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "cv-settings-row-text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cv-settings-row-label", id: `cv-settings-label-${kind}`, children: label }),
+      options.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
         "select",
         {
           className: "cv-settings-select",
@@ -8401,22 +8836,22 @@ function DevicePicker({
           value: value ?? DEFAULT_OPTION,
           onChange: (e) => onChange(e.target.value === DEFAULT_OPTION ? null : e.target.value),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: DEFAULT_OPTION, children: "Predeterminado del sistema" }),
-            options.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("option", { value: d.deviceId, children: deviceLabel(d, i, kind) }, d.deviceId))
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: DEFAULT_OPTION, children: "Predeterminado del sistema" }),
+            options.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("option", { value: d.deviceId, children: deviceLabel(d, i, kind) }, d.deviceId))
           ]
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "cv-settings-empty", children: emptyText })
+      ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cv-settings-empty", children: emptyText })
     ] })
   ] });
 }
 function DevicePickers() {
   const softphone = useSoftphone();
   const devices = useDevices();
-  (0, import_react10.useEffect)(() => {
+  (0, import_react14.useEffect)(() => {
     void softphone.audio.refresh();
   }, [softphone]);
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       DevicePicker,
       {
         icon: Mic,
@@ -8428,7 +8863,7 @@ function DevicePickers() {
         emptyText: "No se encontr\xF3 ning\xFAn micr\xF3fono"
       }
     ),
-    devices.canSelectOutput ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    devices.canSelectOutput ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
       DevicePicker,
       {
         icon: Headphones,
@@ -8442,13 +8877,13 @@ function DevicePickers() {
     ) : (
       // Safari and most of Firefox have no `setSinkId` at all — nothing here would do anything,
       // and offering a picker that silently fails is worse than not offering one.
-      /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "cv-settings-note", children: "Tu navegador no permite elegir el altavoz desde aqu\xED \u2014 c\xE1mbialo en los ajustes del sistema." })
+      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "cv-settings-note", children: "Tu navegador no permite elegir el altavoz desde aqu\xED \u2014 c\xE1mbialo en los ajustes del sistema." })
     )
   ] });
 }
 
 // src/ui/views/CallScreen.tsx
-var import_jsx_runtime5 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
 function Control({
   icon: Icon3,
   label,
@@ -8458,8 +8893,8 @@ function Control({
   disabled = false,
   title
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-ctrl-item", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-ctrl-item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       "button",
       {
         type: "button",
@@ -8470,10 +8905,10 @@ function Control({
         onClick,
         disabled,
         title,
-        children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon3, { size: 19 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon3, { size: 19 })
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cv-ctrl-label", "aria-hidden": true, children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "cv-ctrl-label", "aria-hidden": true, children: label })
   ] });
 }
 var STATUS_LABEL = {
@@ -8511,42 +8946,42 @@ function ConsultScreen({
   const [rawM = "0", ss = "00"] = formatDuration(heldSeconds).split(":");
   const mm = rawM.padStart(2, "0");
   const canComplete = heldSeconds >= MIN_CONSULT_HOLD_SECONDS;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-view", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-call", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { type: "button", className: "cv-consult-hold-banner", onClick: onReturn, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Pause, { size: 13, "aria-hidden": true }),
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-view", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-call", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { type: "button", className: "cv-consult-hold-banner", onClick: onReturn, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Pause, { size: 13, "aria-hidden": true }),
         mainName,
         " en espera \xB7 Volver"
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-avatar-wrap", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-avatar", "aria-hidden": true, children: initials(name) }),
-        answered ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cv-avatar-dot", "aria-hidden": true }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-avatar-wrap", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cv-avatar", "aria-hidden": true, children: initials(name) }),
+        answered ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "cv-avatar-dot", "aria-hidden": true }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-call-name", children: name }),
-      showNumber ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-call-number", children: number }) : null,
-      answered ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-timer", "aria-label": "Duraci\xF3n de la llamada", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("b", { children: mm }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("i", { children: ":" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("b", { children: ss })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-call-status", children: STATUS_LABEL[s] ?? "" })
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cv-call-name", children: name }),
+      showNumber ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cv-call-number", children: number }) : null,
+      answered ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-timer", "aria-label": "Duraci\xF3n de la llamada", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("b", { children: mm }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("i", { children: ":" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("b", { children: ss })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cv-call-status", children: STATUS_LABEL[s] ?? "" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-controls", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-transfer-actions", children: [
-        answered ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "cv-btn cv-btn--accent", onClick: onComplete, disabled: !canComplete, children: "Completar" }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("button", { className: "cv-btn", onClick: onReturn, children: "Cancelar" })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-controls", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-transfer-actions", children: [
+        answered ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { className: "cv-btn cv-btn--accent", onClick: onComplete, disabled: !canComplete, children: "Completar" }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { className: "cv-btn", onClick: onReturn, children: "Cancelar" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-controls-primary", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-ctrl-item", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cv-controls-primary", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-ctrl-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
             className: "cv-round cv-round--hangup",
             onClick: onHangupAll,
             "aria-label": "Colgar todo",
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PhoneOff, { size: 26 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PhoneOff, { size: 26 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cv-ctrl-label", "aria-hidden": true, children: "Colgar todo" })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "cv-ctrl-label", "aria-hidden": true, children: "Colgar todo" })
       ] }) })
     ] })
   ] });
@@ -8579,10 +9014,10 @@ function TransferPicker({
   const others = agents.filter((a) => a.userId !== myUserId);
   if (others.length === 0) return null;
   const filtered = filterAgents(others, query);
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-presence", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-presence-list", role: "listbox", "aria-label": "Compa\xF1eros", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "cv-presence-empty", children: "Sin coincidencias" }) : filtered.map((agent) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-presence", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cv-presence-list", role: "listbox", "aria-label": "Compa\xF1eros", children: filtered.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "cv-presence-empty", children: "Sin coincidencias" }) : filtered.map((agent) => {
       const isBusy = agent.state === "en_llamada";
-      return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         "button",
         {
           type: "button",
@@ -8591,9 +9026,9 @@ function TransferPicker({
           disabled: isBusy,
           onClick: () => onSelect(agent.extension),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cv-presence-dot", "data-state": agent.state, "aria-hidden": true }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cv-presence-name", children: agent.name ?? agent.extension }),
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "cv-presence-meta", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "cv-presence-dot", "data-state": agent.state, "aria-hidden": true }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "cv-presence-name", children: agent.name ?? agent.extension }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "cv-presence-meta", children: [
               agent.extension,
               " \xB7 ",
               PRESENCE_LABEL[agent.state]
@@ -8603,7 +9038,7 @@ function TransferPicker({
         agent.userId
       );
     }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "cv-presence-legend", children: "Desconectado: sin conexi\xF3n en el softphone web. Puede atender desde otro dispositivo." })
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "cv-presence-legend", children: "Desconectado: sin conexi\xF3n en el softphone web. Puede atender desde otro dispositivo." })
   ] });
 }
 function CallScreen({
@@ -8613,24 +9048,27 @@ function CallScreen({
 }) {
   const view = useCall(call);
   const softphone = useSoftphone();
-  const [panel, setPanel] = (0, import_react12.useState)(null);
+  const outbound = useOutboundNumbers(call.direction === "outbound" ? outboundNumberStore(softphone) : null).settings;
+  const formatIntl2 = useIntlFormatter();
+  const fromName = outbound && outbound.numbers.length > 1 ? numberName(effectiveNumber(outbound), formatIntl2) : null;
+  const [panel, setPanel] = (0, import_react16.useState)(null);
   const showTransfer = panel === "transfer";
   const showKeypad = panel === "keypad";
   const showDevices = panel === "devices";
   const togglePanel = (p) => setPanel((cur) => cur === p ? null : p);
-  const [transferTo, setTransferTo] = (0, import_react12.useState)("");
-  const [consultCall, setConsultCall] = (0, import_react12.useState)(null);
-  const [consultOutcome, setConsultOutcome] = (0, import_react12.useState)(null);
-  const [myUserId, setMyUserId] = (0, import_react12.useState)(null);
+  const [transferTo, setTransferTo] = (0, import_react16.useState)("");
+  const [consultCall, setConsultCall] = (0, import_react16.useState)(null);
+  const [consultOutcome, setConsultOutcome] = (0, import_react16.useState)(null);
+  const [myUserId, setMyUserId] = (0, import_react16.useState)(null);
   const consultView = useCall(consultCall);
-  const consultIntentRef = (0, import_react12.useRef)(null);
-  const controlsRef = (0, import_react12.useRef)(null);
+  const consultIntentRef = (0, import_react16.useRef)(null);
+  const controlsRef = (0, import_react16.useRef)(null);
   const now = useTicker(view?.state === "active");
   const consultNow = useTicker(consultView?.state === "active");
   const isConnected = view ? view.state === "active" || view.state === "held" || view.state === "reconnecting" : false;
   const transferPickerActive = isConnected && showTransfer && !consultCall;
   const presence = usePresence(transferPickerActive);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     const listAgents = softphone.sources?.listAgents;
     if (!listAgents) return;
     let cancelled = false;
@@ -8640,7 +9078,7 @@ function CallScreen({
       cancelled = true;
     };
   }, [softphone]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!consultCall) return;
     return consultCall.on("ended" /* Ended */, ({ reason }) => {
       const intent = consultIntentRef.current;
@@ -8662,7 +9100,7 @@ function CallScreen({
     setTransferTo(extension);
     void startConsult(extension);
   };
-  const [quickTransfer, setQuickTransfer] = (0, import_react12.useState)(false);
+  const [quickTransfer, setQuickTransfer] = (0, import_react16.useState)(false);
   const selectPresenceAgentAuto = (extension) => {
     void call.transfer(extension);
   };
@@ -8677,7 +9115,7 @@ function CallScreen({
     consultIntentRef.current = "cancel";
     await call.cancelConsult();
   };
-  (0, import_react12.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!showDevices) return;
     const onKey = (e) => {
       if (e.key === "Escape") setPanel(null);
@@ -8685,7 +9123,7 @@ function CallScreen({
     document.addEventListener("keydown", onKey);
     return () => document.removeEventListener("keydown", onKey);
   }, [showDevices]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (!showKeypad) return;
     const onKey = (e) => {
       if (e.key === "Escape") setPanel(null);
@@ -8702,7 +9140,7 @@ function CallScreen({
       root.removeEventListener("pointerdown", onDown);
     };
   }, [showKeypad, isConnected]);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react16.useEffect)(() => {
     if (view && view.state !== "active") setPanel((cur) => cur === "keypad" ? null : cur);
   }, [view?.state]);
   if (!view || view.state === "ended") return null;
@@ -8713,7 +9151,7 @@ function CallScreen({
   const number = view.remote.number;
   const showNumber = number !== name;
   if (consultCall && consultView) {
-    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
       ConsultScreen,
       {
         mainName: name,
@@ -8729,20 +9167,20 @@ function CallScreen({
   const IncomingActionIcon = incomingAction?.icon ?? ExternalLink;
   const [rawM = "0", ss = "00"] = formatDuration(elapsedSeconds(view.answeredAt, now)).split(":");
   const mm = rawM.padStart(2, "0");
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-view", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-call", children: showDevices ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-call-devices-inline", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-call-devices-header", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { type: "button", className: "cv-call-devices-chip", onClick: () => setPanel(null), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ArrowLeft, { size: 13, "aria-hidden": true }),
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-view", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cv-call", children: showDevices ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-call-devices-inline", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-call-devices-header", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { type: "button", className: "cv-call-devices-chip", onClick: () => setPanel(null), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ArrowLeft, { size: 13, "aria-hidden": true }),
           "Volver"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cv-call-devices-title", children: "Dispositivos" })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "cv-call-devices-title", children: "Dispositivos" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "cv-call-devices-context", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "cv-call-devices-context", children: [
         showNumber ? `${number} \xB7 ` : "",
         s === "active" ? `${mm}:${ss}` : STATUS_LABEL[s] ?? ""
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-settings-section-body", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DevicePickers, {}) })
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cv-settings-section-body", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DevicePickers, {}) })
     ] }) : transferPickerActive ? (
       /*
         Found live (2026-09-29): the agent list a moment ago picked between showing ONE agent row
@@ -8759,17 +9197,17 @@ function CallScreen({
         calling doesn't disappear" compact context line (below) instead of the full block gives
         that ~150px back to the one thing this screen is actually for right now: the list.
       */
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-transfer", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-transfer-context", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cv-call-devices-title", children: name }),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("p", { className: "cv-call-devices-context", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-transfer", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-transfer-context", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "cv-call-devices-title", children: name }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("p", { className: "cv-call-devices-context", children: [
             showNumber ? `${number} \xB7 ` : "",
             s === "active" ? `${mm}:${ss}` : STATUS_LABEL[s] ?? ""
           ] })
         ] }),
-        consultOutcome ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "cv-dial-outcome", role: "status", "data-shown": "true", children: consultFailText(consultOutcome) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-transfer-row", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        consultOutcome ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("p", { className: "cv-dial-outcome", role: "status", "data-shown": "true", children: consultFailText(consultOutcome) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-transfer-row", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "input",
             {
               className: "cv-search",
@@ -8780,7 +9218,7 @@ function CallScreen({
               autoFocus: true
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
             "button",
             {
               className: "cv-btn cv-btn--accent",
@@ -8790,10 +9228,10 @@ function CallScreen({
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-segmented", role: "tablist", "aria-label": "Modo de transferencia", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cv-segmented", role: "tablist", "aria-label": "Modo de transferencia", children: [
           { key: "consult", label: "Hablar primero" },
           { key: "auto", label: "Transferir directo" }
-        ].map(({ key, label }) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        ].map(({ key, label }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
@@ -8805,7 +9243,7 @@ function CallScreen({
           },
           key
         )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           TransferPicker,
           {
             agents: presence,
@@ -8815,54 +9253,61 @@ function CallScreen({
           }
         )
       ] })
-    ) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-avatar-wrap", children: [
-        isRinging ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cv-avatar-ping", "aria-hidden": true }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-avatar", "aria-hidden": true, children: initials(name) }),
-        s === "active" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cv-avatar-dot", "aria-hidden": true }) : null
+    ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-avatar-wrap", children: [
+        isRinging ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "cv-avatar-ping", "aria-hidden": true }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cv-avatar", "aria-hidden": true, children: initials(name) }),
+        s === "active" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "cv-avatar-dot", "aria-hidden": true }) : null
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-call-name", children: name }),
-      showNumber ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-call-number", children: number }) : null,
-      s === "active" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-timer", "aria-label": "Duraci\xF3n de la llamada", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("b", { children: mm }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("i", { children: ":" }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("b", { children: ss })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-call-status", children: s === "held" ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cv-badge-hold", children: STATUS_LABEL[s] }) : STATUS_LABEL[s] ?? "" }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-call-chips", children: [
-        incomingAction ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cv-call-name", children: name }),
+      showNumber ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cv-call-number", children: number }) : null,
+      fromName ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-call-from", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PhoneOutgoing, { size: 11, "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+          "Desde ",
+          fromName
+        ] })
+      ] }) : null,
+      s === "active" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-timer", "aria-label": "Duraci\xF3n de la llamada", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("b", { children: mm }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("i", { children: ":" }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("b", { children: ss })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cv-call-status", children: s === "held" ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "cv-badge-hold", children: STATUS_LABEL[s] }) : STATUS_LABEL[s] ?? "" }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-call-chips", children: [
+        incomingAction ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
           "button",
           {
             type: "button",
             className: "cv-call-devices-chip",
             onClick: () => incomingAction.onClick(view.remote.contact),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(IncomingActionIcon, { size: 13, "aria-hidden": true }),
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(IncomingActionIcon, { size: 13, "aria-hidden": true }),
               incomingAction.label
             ]
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("button", { type: "button", className: "cv-call-devices-chip", onClick: () => setPanel("devices"), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Headphones, { size: 13, "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("button", { type: "button", className: "cv-call-devices-chip", onClick: () => setPanel("devices"), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Headphones, { size: 13, "aria-hidden": true }),
           "Dispositivos"
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-controls", ref: controlsRef, children: isRinging ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-controls-primary", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-ctrl-item", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cv-controls", ref: controlsRef, children: isRinging ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-controls-primary", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-ctrl-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
             className: "cv-round cv-round--hangup",
             onClick: () => void call.reject(),
             "aria-label": "Rechazar",
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PhoneOff, { size: 26 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PhoneOff, { size: 26 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cv-ctrl-label", "aria-hidden": true, children: "Rechazar" })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "cv-ctrl-label", "aria-hidden": true, children: "Rechazar" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-ctrl-item", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-ctrl-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
@@ -8870,14 +9315,14 @@ function CallScreen({
             onClick: () => void call.answer(),
             "aria-label": "Contestar",
             part: "answer-button",
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Phone, { size: 26 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Phone, { size: 26 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cv-ctrl-label", "aria-hidden": true, children: "Contestar" })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "cv-ctrl-label", "aria-hidden": true, children: "Contestar" })
       ] })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
-      inCall ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-controls-row", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+      inCall ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-controls-row", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Control,
           {
             icon: view.isMuted ? MicOff : Mic,
@@ -8887,7 +9332,7 @@ function CallScreen({
             onClick: () => call.mute(!view.isMuted)
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Control,
           {
             icon: view.isOnHold ? Play : Pause,
@@ -8897,7 +9342,7 @@ function CallScreen({
             onClick: () => view.isOnHold ? void call.unhold() : void call.hold()
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Control,
           {
             icon: ArrowLeftRight,
@@ -8907,7 +9352,7 @@ function CallScreen({
             onClick: () => togglePanel("transfer")
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           Control,
           {
             icon: Grid3x3,
@@ -8920,8 +9365,8 @@ function CallScreen({
           }
         )
       ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-controls-primary", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "cv-ctrl-item", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cv-controls-primary", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "cv-ctrl-item", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
           "button",
           {
             type: "button",
@@ -8929,12 +9374,12 @@ function CallScreen({
             onClick: () => void call.hangup(),
             "aria-label": "Colgar",
             part: "hangup-button",
-            children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(PhoneOff, { size: 26 })
+            children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(PhoneOff, { size: 26 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "cv-ctrl-label", "aria-hidden": true, children: "Colgar" })
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "cv-ctrl-label", "aria-hidden": true, children: "Colgar" })
       ] }) }),
-      inCall && showKeypad ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "cv-keypad-popover cv-keypad-popover--above", role: "dialog", "aria-label": "Teclado", children: KEYPAD_KEYS.map(([key, letters]) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      inCall && showKeypad ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cv-keypad-popover cv-keypad-popover--above", role: "dialog", "aria-label": "Teclado", children: KEYPAD_KEYS.map(([key, letters]) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
         "button",
         {
           type: "button",
@@ -8944,8 +9389,8 @@ function CallScreen({
             if (keyTones) playKeyTone(key);
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("b", { children: key }),
-            letters ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("small", { children: letters }) : null
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("b", { children: key }),
+            letters ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("small", { children: letters }) : null
           ]
         },
         key
@@ -8955,29 +9400,29 @@ function CallScreen({
 }
 
 // src/ui/views/ContactsTab.tsx
-var import_react16 = __toESM(require_react(), 1);
+var import_react20 = __toESM(require_react(), 1);
 
 // src/ui/views/DetailRow.tsx
-var import_jsx_runtime6 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
 function DetailRow({
   icon: Icon3,
   eyebrow,
   text,
   onClick
 }) {
-  const inner = /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "cv-detail-row-icon", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon3, { size: 16 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "cv-detail-row-text", children: [
-      eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "cv-detail-row-eyebrow", children: eyebrow }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "cv-detail-row-value", children: text })
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "cv-detail-row-icon", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Icon3, { size: 16 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("span", { className: "cv-detail-row-text", children: [
+      eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "cv-detail-row-eyebrow", children: eyebrow }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "cv-detail-row-value", children: text })
     ] }),
-    onClick ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(ChevronRight, { size: 16, className: "cv-detail-row-chevron", "aria-hidden": true }) : null
+    onClick ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ChevronRight, { size: 16, className: "cv-detail-row-chevron", "aria-hidden": true }) : null
   ] });
-  return onClick ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { type: "button", className: "cv-detail-row cv-detail-row--action", onClick, children: inner }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "cv-detail-row", children: inner });
+  return onClick ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", className: "cv-detail-row cv-detail-row--action", onClick, children: inner }) : /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "cv-detail-row", children: inner });
 }
 
 // src/ui/views/ContactDetail.tsx
-var import_jsx_runtime7 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
 function ContactDetail({
   contact,
   onBack,
@@ -8987,19 +9432,19 @@ function ContactDetail({
   const formatIntl2 = useIntlFormatter();
   const formatted = formatIntl2(contact.phone);
   const name = contact.name ?? formatted;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "cv-detail", role: "region", "aria-label": name, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "cv-detail-head", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("button", { type: "button", className: "cv-detail-back", onClick: onBack, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ArrowLeft, { size: 16, "aria-hidden": true }),
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "cv-detail", role: "region", "aria-label": name, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "cv-detail-head", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", className: "cv-detail-back", onClick: onBack, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(ArrowLeft, { size: 16, "aria-hidden": true }),
       "Contactos"
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "cv-detail-body", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "cv-detail-identity", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "cv-detail-avatar", "aria-hidden": true, children: initials(contact.name) }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { className: "cv-detail-name", children: name })
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "cv-detail-body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "cv-detail-identity", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "cv-detail-avatar", "aria-hidden": true, children: initials(contact.name) }),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h2", { className: "cv-detail-name", children: name })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "cv-detail-rows", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(DetailRow, { icon: Phone, eyebrow: "Tel\xE9fono", text: formatted }),
-        contactAction ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "cv-detail-rows", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DetailRow, { icon: Phone, eyebrow: "Tel\xE9fono", text: formatted }),
+        contactAction ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           DetailRow,
           {
             icon: contactAction.icon ?? ExternalLink,
@@ -9009,14 +9454,14 @@ function ContactDetail({
         ) : null
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "cv-detail-foot", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "cv-detail-foot", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "button",
       {
         type: "button",
         className: "cv-btn cv-btn--accent cv-detail-call",
         onClick: () => void softphone.call(contact.phone),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Phone, { size: 16, "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Phone, { size: 16, "aria-hidden": true }),
           "Llamar"
         ]
       }
@@ -9025,19 +9470,19 @@ function ContactDetail({
 }
 
 // src/ui/lib/useInfiniteList.ts
-var import_react15 = __toESM(require_react(), 1);
+var import_react19 = __toESM(require_react(), 1);
 function useInfiniteList(loadPage) {
-  const [items, setItems] = (0, import_react15.useState)([]);
-  const [loading2, setLoading] = (0, import_react15.useState)(true);
-  const [loadingMore, setLoadingMore] = (0, import_react15.useState)(false);
-  const [hasMore, setHasMore] = (0, import_react15.useState)(true);
-  const [error, setError] = (0, import_react15.useState)(false);
-  const seqRef = (0, import_react15.useRef)(0);
-  const itemsRef = (0, import_react15.useRef)(items);
+  const [items, setItems] = (0, import_react19.useState)([]);
+  const [loading2, setLoading] = (0, import_react19.useState)(true);
+  const [loadingMore, setLoadingMore] = (0, import_react19.useState)(false);
+  const [hasMore, setHasMore] = (0, import_react19.useState)(true);
+  const [error, setError] = (0, import_react19.useState)(false);
+  const seqRef = (0, import_react19.useRef)(0);
+  const itemsRef = (0, import_react19.useRef)(items);
   itemsRef.current = items;
-  const loadingMoreRef = (0, import_react15.useRef)(false);
-  const hasMoreRef = (0, import_react15.useRef)(true);
-  (0, import_react15.useEffect)(() => {
+  const loadingMoreRef = (0, import_react19.useRef)(false);
+  const hasMoreRef = (0, import_react19.useRef)(true);
+  (0, import_react19.useEffect)(() => {
     const seq = ++seqRef.current;
     loadingMoreRef.current = false;
     hasMoreRef.current = true;
@@ -9060,7 +9505,7 @@ function useInfiniteList(loadPage) {
       if (seq === seqRef.current) setLoading(false);
     });
   }, [loadPage]);
-  const loadMore = (0, import_react15.useCallback)(() => {
+  const loadMore = (0, import_react19.useCallback)(() => {
     if (loadingMoreRef.current || !hasMoreRef.current) return;
     const seq = seqRef.current;
     loadingMoreRef.current = true;
@@ -9076,11 +9521,11 @@ function useInfiniteList(loadPage) {
       if (seq === seqRef.current) setLoadingMore(false);
     });
   }, [loadPage]);
-  const [containerEl, setContainerEl] = (0, import_react15.useState)(null);
-  const [sentinelEl, setSentinelEl] = (0, import_react15.useState)(null);
-  const loadMoreRef = (0, import_react15.useRef)(loadMore);
+  const [containerEl, setContainerEl] = (0, import_react19.useState)(null);
+  const [sentinelEl, setSentinelEl] = (0, import_react19.useState)(null);
+  const loadMoreRef = (0, import_react19.useRef)(loadMore);
   loadMoreRef.current = loadMore;
-  (0, import_react15.useEffect)(() => {
+  (0, import_react19.useEffect)(() => {
     if (!containerEl || !sentinelEl) return;
     const observer = new IntersectionObserver(
       ([entry]) => {
@@ -9103,21 +9548,21 @@ function useInfiniteList(loadPage) {
 }
 
 // src/ui/views/ContactsTab.tsx
-var import_jsx_runtime8 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
 var PAGE = 50;
 function ContactsTab({
   source,
   contactAction
 }) {
   const softphone = useSoftphone();
-  const [search, setSearch] = (0, import_react16.useState)("");
-  const [debouncedSearch, setDebouncedSearch] = (0, import_react16.useState)("");
-  const [selected, setSelected] = (0, import_react16.useState)(null);
-  (0, import_react16.useEffect)(() => {
+  const [search, setSearch] = (0, import_react20.useState)("");
+  const [debouncedSearch, setDebouncedSearch] = (0, import_react20.useState)("");
+  const [selected, setSelected] = (0, import_react20.useState)(null);
+  (0, import_react20.useEffect)(() => {
     const t = setTimeout(() => setDebouncedSearch(search), 200);
     return () => clearTimeout(t);
   }, [search]);
-  const loadPage = (0, import_react16.useCallback)(
+  const loadPage = (0, import_react20.useCallback)(
     (skip) => source({ search: debouncedSearch, skip, limit: PAGE }).then((page) => ({
       items: page.items,
       hasMore: skip + page.items.length < page.total
@@ -9133,10 +9578,10 @@ function ContactsTab({
     sentinelRef
   } = useInfiniteList(loadPage);
   const loading2 = loadingPage || search !== debouncedSearch;
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "cv-view", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "cv-list-head", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "cv-search-field", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Search, { className: "cv-search-icon", size: 15, "aria-hidden": true }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "cv-view", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "cv-list-head", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "cv-search-field", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Search, { className: "cv-search-icon", size: 15, "aria-hidden": true }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "input",
         {
           className: "cv-search cv-search--icon",
@@ -9146,41 +9591,41 @@ function ContactsTab({
           "aria-label": "Buscar contactos"
         }
       ),
-      search ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      search ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "button",
         {
           type: "button",
           className: "cv-search-clear",
           onClick: () => setSearch(""),
           "aria-label": "Limpiar b\xFAsqueda",
-          children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(X, { size: 14 })
+          children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(X, { size: 14 })
         }
       ) : null
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "cv-list", ref: containerRef, children: loading2 ? (
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "cv-list", ref: containerRef, children: loading2 ? (
       // The spinner alone was silent to a screen reader — nothing else on this state carries
       // the word "loading" for it to announce. `role="status"` + real text fixes both the
       // accessibility gap and, incidentally, gives the icon something to be decorative NEXT TO
       // rather than being the sole carrier of the information itself.
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "cv-empty", role: "status", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LoaderCircle, { className: "cv-empty-spinner", size: 18, "aria-hidden": true }),
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "cv-empty-title", children: "Cargando\u2026" })
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "cv-empty", role: "status", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LoaderCircle, { className: "cv-empty-spinner", size: 18, "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "cv-empty-title", children: "Cargando\u2026" })
       ] })
-    ) : items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "cv-empty", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "cv-empty-icon", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Users, { size: 20 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "cv-empty-title", children: search ? "Sin resultados" : "No tienes contactos" }),
-      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("p", { className: "cv-empty-sub", children: search ? `Nada coincide con \xAB${search}\xBB.` : "Tus contactos con tel\xE9fono aparecer\xE1n aqu\xED." })
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+    ) : items.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "cv-empty", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "cv-empty-icon", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Users, { size: 20 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "cv-empty-title", children: search ? "Sin resultados" : "No tienes contactos" }),
+      /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { className: "cv-empty-sub", children: search ? `Nada coincide con \xAB${search}\xBB.` : "Tus contactos con tel\xE9fono aparecer\xE1n aqu\xED." })
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
       items.map((c) => (
         // A row, not a button: the name area and the call action are separate controls, so
         // neither is nested inside the other (nested interactives are invalid + inaccessible).
-        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "cv-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "cv-item-avatar", "aria-hidden": true, children: initials(c.name) === "#" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(User, { size: 17 }) : initials(c.name) }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("button", { type: "button", className: "cv-item-main", onClick: () => setSelected(c), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "cv-item-name", children: c.name ?? c.phone }),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "cv-item-sub", children: c.phone })
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "cv-item", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "cv-item-avatar", "aria-hidden": true, children: initials(c.name) === "#" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(User, { size: 17 }) : initials(c.name) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", { type: "button", className: "cv-item-main", onClick: () => setSelected(c), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "cv-item-name", children: c.name ?? c.phone }),
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "cv-item-sub", children: c.phone })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
             "button",
             {
               type: "button",
@@ -9188,15 +9633,15 @@ function ContactsTab({
               "data-tone": "accent",
               "aria-label": `Llamar a ${c.name ?? c.phone}`,
               onClick: () => void softphone.call(c.phone),
-              children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Phone, { size: 16 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Phone, { size: 16 })
             }
           )
         ] }, c.id)
       )),
-      hasMore ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ref: sentinelRef, className: "cv-list-sentinel", "aria-hidden": true }) : null,
-      loadingMore ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: "cv-list-loading-more", role: "status", "aria-label": "Cargando m\xE1s contactos", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(LoaderCircle, { className: "cv-list-loading-more-spinner", size: 14, "aria-hidden": true }) }) : null
+      hasMore ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { ref: sentinelRef, className: "cv-list-sentinel", "aria-hidden": true }) : null,
+      loadingMore ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "cv-list-loading-more", role: "status", "aria-label": "Cargando m\xE1s contactos", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(LoaderCircle, { className: "cv-list-loading-more-spinner", size: 14, "aria-hidden": true }) }) : null
     ] }) }),
-    selected ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    selected ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       ContactDetail,
       {
         contact: selected,
@@ -9208,13 +9653,13 @@ function ContactsTab({
 }
 
 // src/ui/views/HistoryTab.tsx
-var import_react20 = __toESM(require_react(), 1);
+var import_react24 = __toESM(require_react(), 1);
 
 // src/ui/views/HistoryDetail.tsx
-var import_react18 = __toESM(require_react(), 1);
+var import_react22 = __toESM(require_react(), 1);
 
 // src/ui/views/history-format.tsx
-var import_jsx_runtime9 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
 var OUTCOME_LABELS = {
   "no-answer": "No contestada",
   busy: "Ocupada",
@@ -9235,8 +9680,8 @@ function fullDateLabel(at) {
   });
 }
 function Icon2({ entry }) {
-  if (entry.missed) return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PhoneMissed, { size: 16 });
-  return entry.direction === "inbound" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PhoneIncoming, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(PhoneOutgoing, { size: 16 });
+  if (entry.missed) return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PhoneMissed, { size: 16 });
+  return entry.direction === "inbound" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PhoneIncoming, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(PhoneOutgoing, { size: 16 });
 }
 function statusIcon(entry) {
   if (entry.missed) return PhoneMissed;
@@ -9248,16 +9693,16 @@ function statusTone(entry) {
 }
 
 // src/ui/views/HistoryDetail.tsx
-var import_jsx_runtime10 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
 function HandlerChain({ handlers }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "cv-detail-handlers", children: handlers.map((h, i) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "cv-detail-handlers", children: handlers.map((h, i) => {
     const isLast = i === handlers.length - 1;
     const label = h.name ?? `Ext. ${h.extension}`;
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "cv-detail-handler-hop", children: [
-      i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ArrowRight, { size: 12, className: "cv-detail-handler-arrow", "aria-hidden": true }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "cv-detail-handler-chip", "data-tone": isLast ? "accent" : void 0, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "cv-detail-handler-hop", children: [
+      i > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ArrowRight, { size: 12, className: "cv-detail-handler-arrow", "aria-hidden": true }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "cv-detail-handler-chip", "data-tone": isLast ? "accent" : void 0, children: [
         label,
-        h.name ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("span", { className: "cv-detail-handler-ext", children: [
+        h.name ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "cv-detail-handler-ext", children: [
           "\xB7 ",
           h.extension
         ] }) : null
@@ -9265,15 +9710,26 @@ function HandlerChain({ handlers }) {
     ] }, `${h.extension}-${i}`);
   }) });
 }
+function outboundFrom(entry, known, formatIntl2) {
+  if (entry.direction !== "outbound" || !entry.from) return null;
+  const number = formatIntl2(`+${entry.from}`);
+  const label = known?.numbers.find((n) => n.number === entry.from)?.label;
+  if (!label) return number;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+    label,
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "cv-detail-row-sub", children: number })
+  ] });
+}
 function HistoryDetail({
   entry,
   onBack
 }) {
   const softphone = useSoftphone();
   const formatIntl2 = useIntlFormatter();
-  const [detail, setDetail] = (0, import_react18.useState)(null);
-  const [loadingDetail, setLoadingDetail] = (0, import_react18.useState)(false);
-  (0, import_react18.useEffect)(() => {
+  const knownNumbers = useKnownOutboundNumbers(outboundNumberStore(softphone));
+  const [detail, setDetail] = (0, import_react22.useState)(null);
+  const [loadingDetail, setLoadingDetail] = (0, import_react22.useState)(false);
+  (0, import_react22.useEffect)(() => {
     const load = entry.loadDetail;
     if (!load) return;
     let cancelled = false;
@@ -9286,53 +9742,55 @@ function HistoryDetail({
   }, [entry]);
   const formatted = formatIntl2(entry.number);
   const name = entry.name ?? formatted;
+  const from = outboundFrom(entry, knownNumbers, formatIntl2);
   const handledBy = detail?.handledBy ?? entry.handledBy;
   const recordingUrls = detail?.recordingUrls ?? [];
   const loadingRecording = entry.recorded && loadingDetail && recordingUrls.length === 0;
   const statusText = entry.missed ? entry.outcome ? OUTCOME_LABELS[entry.outcome] : "Perdida" : "Contestada";
   const handlerLabel = handledBy.length > 1 ? "Ruta de la llamada" : entry.direction === "outbound" ? "Realizada por" : "Atendida por";
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cv-detail", role: "region", "aria-label": name, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "cv-detail-head", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("button", { type: "button", className: "cv-detail-back", onClick: onBack, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ArrowLeft, { size: 16, "aria-hidden": true }),
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "cv-detail", role: "region", "aria-label": name, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "cv-detail-head", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("button", { type: "button", className: "cv-detail-back", onClick: onBack, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ArrowLeft, { size: 16, "aria-hidden": true }),
       "Historial"
     ] }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cv-detail-body", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cv-detail-identity", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "cv-detail-avatar", "data-tone": statusTone(entry), "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Icon2, { entry }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("h2", { className: "cv-detail-name", "data-tone": entry.missed ? "danger" : void 0, children: name }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "cv-detail-meta", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "cv-detail-body", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "cv-detail-identity", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "cv-detail-avatar", "data-tone": statusTone(entry), "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon2, { entry }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h2", { className: "cv-detail-name", "data-tone": entry.missed ? "danger" : void 0, children: name }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { className: "cv-detail-meta", children: [
           statusText,
           " \xB7 ",
           timeLabel(entry.at)
         ] })
       ] }),
-      entry.recorded ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "cv-detail-recording", children: loadingRecording ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cv-detail-recording-status", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(LoaderCircle, { size: 14, className: "cv-detail-recording-spinner", "aria-hidden": true }),
+      entry.recorded ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "cv-detail-recording", children: loadingRecording ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "cv-detail-recording-status", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(LoaderCircle, { size: 14, className: "cv-detail-recording-spinner", "aria-hidden": true }),
         "Cargando grabaci\xF3n\u2026"
-      ] }) : recordingUrls.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "cv-detail-recording-label", children: recordingUrls.length === 1 ? "Grabaci\xF3n" : "Grabaciones" }),
-        recordingUrls.map((url) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("audio", { controls: true, src: url, className: "cv-detail-audio", preload: "metadata" }, url))
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "cv-detail-recording-status cv-detail-recording-status--warn", children: "No se pudo cargar la grabaci\xF3n ahora. Int\xE9ntalo de nuevo m\xE1s tarde." }) }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("p", { className: "cv-detail-recording-status", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Mic, { size: 14, "aria-hidden": true }),
+      ] }) : recordingUrls.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "cv-detail-recording-label", children: recordingUrls.length === 1 ? "Grabaci\xF3n" : "Grabaciones" }),
+        recordingUrls.map((url) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("audio", { controls: true, src: url, className: "cv-detail-audio", preload: "metadata" }, url))
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "cv-detail-recording-status cv-detail-recording-status--warn", children: "No se pudo cargar la grabaci\xF3n ahora. Int\xE9ntalo de nuevo m\xE1s tarde." }) }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("p", { className: "cv-detail-recording-status", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Mic, { size: 14, "aria-hidden": true }),
         "Esta llamada no se grab\xF3."
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "cv-detail-rows", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DetailRow, { icon: statusIcon(entry), eyebrow: "Estado", text: statusText }),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DetailRow, { icon: CalendarClock, eyebrow: "Fecha y hora", text: fullDateLabel(entry.at) }),
-        entry.durationSec > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DetailRow, { icon: Timer, eyebrow: "Duraci\xF3n", text: formatDuration(entry.durationSec) }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DetailRow, { icon: Phone, eyebrow: "N\xFAmero", text: formatted }),
-        handledBy.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DetailRow, { icon: User, eyebrow: handlerLabel, text: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(HandlerChain, { handlers: handledBy }) }) : null,
-        entry.direction === "inbound" && entry.did ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DetailRow, { icon: Hash, eyebrow: "N\xFAmero marcado (DID)", text: formatIntl2(entry.did) }) : null
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "cv-detail-rows", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DetailRow, { icon: statusIcon(entry), eyebrow: "Estado", text: statusText }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DetailRow, { icon: CalendarClock, eyebrow: "Fecha y hora", text: fullDateLabel(entry.at) }),
+        entry.durationSec > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DetailRow, { icon: Timer, eyebrow: "Duraci\xF3n", text: formatDuration(entry.durationSec) }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DetailRow, { icon: Phone, eyebrow: "N\xFAmero", text: formatted }),
+        handledBy.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DetailRow, { icon: User, eyebrow: handlerLabel, text: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HandlerChain, { handlers: handledBy }) }) : null,
+        entry.direction === "inbound" && entry.did ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DetailRow, { icon: Hash, eyebrow: "N\xFAmero marcado (DID)", text: formatIntl2(entry.did) }) : null,
+        from ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DetailRow, { icon: PhoneOutgoing, eyebrow: "Llamada desde", text: from }) : null
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "cv-detail-foot", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "cv-detail-foot", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
       "button",
       {
         type: "button",
         className: "cv-btn cv-btn--accent cv-detail-call",
         onClick: () => void softphone.call(entry.number),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Phone, { size: 16, "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Phone, { size: 16, "aria-hidden": true }),
           "Llamar"
         ]
       }
@@ -9341,7 +9799,7 @@ function HistoryDetail({
 }
 
 // src/ui/views/HistoryTab.tsx
-var import_jsx_runtime11 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
 var PAGE2 = 30;
 function startOfDay(at) {
   return new Date(at.getFullYear(), at.getMonth(), at.getDate()).getTime();
@@ -9367,9 +9825,9 @@ function PersonFilter({
   directory,
   onChange
 }) {
-  const [open, setOpen] = (0, import_react20.useState)(false);
-  const rootRef = (0, import_react20.useRef)(null);
-  (0, import_react20.useEffect)(() => {
+  const [open, setOpen] = (0, import_react24.useState)(false);
+  const rootRef = (0, import_react24.useRef)(null);
+  (0, import_react24.useEffect)(() => {
     if (!open) return;
     const root = rootRef.current?.getRootNode() ?? document;
     const onDown = (e) => {
@@ -9391,8 +9849,8 @@ function PersonFilter({
     ...directory.people.filter((p) => !directory.me || p.userId !== directory.me.userId).map((p) => ({ v: p.userId, label: p.name ?? "Sin nombre" }))
   ];
   const label = options.find((o) => o.v === value)?.label ?? "Todas las personas";
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "cv-person-filter", ref: rootRef, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "cv-person-filter", ref: rootRef, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "button",
       {
         type: "button",
@@ -9401,13 +9859,13 @@ function PersonFilter({
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Users, { size: 13, "aria-hidden": true }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "cv-person-filter-label", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ChevronDown, { size: 13, className: "cv-person-filter-caret", "data-open": open, "aria-hidden": true })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Users, { size: 13, "aria-hidden": true }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "cv-person-filter-label", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(ChevronDown, { size: 13, className: "cv-person-filter-caret", "data-open": open, "aria-hidden": true })
         ]
       }
     ),
-    open ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "cv-person-filter-pop", role: "listbox", children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    open ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "cv-person-filter-pop", role: "listbox", children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "button",
       {
         type: "button",
@@ -9419,8 +9877,8 @@ function PersonFilter({
           setOpen(false);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "cv-person-filter-name", children: opt.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Check, { size: 14, className: "cv-person-filter-check", "data-on": opt.v === value, "aria-hidden": true })
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "cv-person-filter-name", children: opt.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Check, { size: 14, className: "cv-person-filter-check", "data-on": opt.v === value, "aria-hidden": true })
         ]
       },
       opt.v || "all"
@@ -9431,11 +9889,11 @@ function HistoryTab({ source }) {
   const softphone = useSoftphone();
   const formatIntl2 = useIntlFormatter();
   const now = Date.now();
-  const [status, setStatus] = (0, import_react20.useState)("all");
-  const [agentId, setAgentId] = (0, import_react20.useState)("");
-  const [directory, setDirectory] = (0, import_react20.useState)(null);
-  const [selected, setSelected] = (0, import_react20.useState)(null);
-  (0, import_react20.useEffect)(() => {
+  const [status, setStatus] = (0, import_react24.useState)("all");
+  const [agentId, setAgentId] = (0, import_react24.useState)("");
+  const [directory, setDirectory] = (0, import_react24.useState)(null);
+  const [selected, setSelected] = (0, import_react24.useState)(null);
+  (0, import_react24.useEffect)(() => {
     const listAgents = softphone.sources?.listAgents;
     if (!listAgents) return;
     let cancelled = false;
@@ -9445,7 +9903,7 @@ function HistoryTab({ source }) {
       cancelled = true;
     };
   }, [softphone]);
-  const loadPage = (0, import_react20.useCallback)(
+  const loadPage = (0, import_react24.useCallback)(
     (skip) => source({
       skip,
       limit: PAGE2,
@@ -9456,9 +9914,9 @@ function HistoryTab({ source }) {
   );
   const { items: entries, loading: loading2, loadingMore, hasMore, containerRef, sentinelRef } = useInfiniteList(loadPage);
   const groups = groupByDay(entries, now);
-  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "cv-view", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "cv-list-head", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "cv-segmented", role: "tablist", "aria-label": "Filtrar por estado", children: ["all", "missed"].map((key) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "cv-view", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "cv-list-head", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "cv-segmented", role: "tablist", "aria-label": "Filtrar por estado", children: ["all", "missed"].map((key) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
         "button",
         {
           type: "button",
@@ -9470,36 +9928,36 @@ function HistoryTab({ source }) {
         },
         key
       )) }),
-      directory ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(PersonFilter, { value: agentId, directory, onChange: setAgentId }) : null
+      directory ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(PersonFilter, { value: agentId, directory, onChange: setAgentId }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "cv-list", ref: containerRef, children: [
-      loading2 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "cv-empty", children: "Cargando\u2026" }),
-      !loading2 && entries.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "cv-empty", children: status === "missed" ? "Sin llamadas perdidas" : "Sin llamadas recientes" }),
-      !loading2 && groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "cv-history-day", children: group.label }),
-        group.rows.map((e) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "cv-item", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "cv-item-avatar", "data-tone": statusTone(e), "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Icon2, { entry: e }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "cv-list", ref: containerRef, children: [
+      loading2 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "cv-empty", children: "Cargando\u2026" }),
+      !loading2 && entries.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "cv-empty", children: status === "missed" ? "Sin llamadas perdidas" : "Sin llamadas recientes" }),
+      !loading2 && groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "cv-history-day", children: group.label }),
+        group.rows.map((e) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "cv-item", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "cv-item-avatar", "data-tone": statusTone(e), "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon2, { entry: e }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
             "button",
             {
               type: "button",
               className: "cv-item-main",
               onClick: () => setSelected(e),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "cv-item-name", "data-tone": e.missed ? "danger" : void 0, children: e.name ?? formatIntl2(e.number) }),
-                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "cv-item-sub", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "tabular-nums", children: timeLabel(e.at) }),
-                  e.missed ? /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("span", { className: "cv-item-sub-outcome", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "cv-item-name", "data-tone": e.missed ? "danger" : void 0, children: e.name ?? formatIntl2(e.number) }),
+                /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "cv-item-sub", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "tabular-nums", children: timeLabel(e.at) }),
+                  e.missed ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("span", { className: "cv-item-sub-outcome", children: [
                     " ",
                     "\xB7 ",
                     e.outcome ? OUTCOME_LABELS[e.outcome] : "Perdida"
                   ] }) : e.durationSec > 0 && ` \xB7 ${formatDuration(e.durationSec)}`,
-                  e.recorded ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Mic, { size: 11, className: "cv-item-sub-rec", "aria-label": "Grabada" }) : null
+                  e.recorded ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Mic, { size: 11, className: "cv-item-sub-rec", "aria-label": "Grabada" }) : null
                 ] })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "button",
             {
               type: "button",
@@ -9507,30 +9965,30 @@ function HistoryTab({ source }) {
               "data-tone": "accent",
               "aria-label": `Llamar a ${e.name ?? e.number}`,
               onClick: () => void softphone.call(e.number),
-              children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Phone, { size: 16 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Phone, { size: 16 })
             }
           )
         ] }, e.id))
       ] }, group.label)),
-      !loading2 && hasMore ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { ref: sentinelRef, className: "cv-list-sentinel", "aria-hidden": true }) : null,
-      loadingMore ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "cv-list-loading-more", role: "status", "aria-label": "Cargando m\xE1s llamadas", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(LoaderCircle, { className: "cv-list-loading-more-spinner", size: 14, "aria-hidden": true }) }) : null
+      !loading2 && hasMore ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { ref: sentinelRef, className: "cv-list-sentinel", "aria-hidden": true }) : null,
+      loadingMore ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "cv-list-loading-more", role: "status", "aria-label": "Cargando m\xE1s llamadas", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(LoaderCircle, { className: "cv-list-loading-more-spinner", size: 14, "aria-hidden": true }) }) : null
     ] }),
-    selected ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HistoryDetail, { entry: selected, onBack: () => setSelected(null) }) : null
+    selected ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(HistoryDetail, { entry: selected, onBack: () => setSelected(null) }) : null
   ] });
 }
 
 // src/ui/views/SettingsTab.tsx
-var import_react29 = __toESM(require_react(), 1);
+var import_react34 = __toESM(require_react(), 1);
 
 // src/ui/audio/ringtone-store.ts
-var stores = /* @__PURE__ */ new WeakMap();
+var stores2 = /* @__PURE__ */ new WeakMap();
 function ringtoneStore(softphone) {
   const source = softphone.sources?.ringtones;
   if (!source) return null;
-  let store = stores.get(softphone);
+  let store = stores2.get(softphone);
   if (!store) {
     store = createRingtoneStore(source);
-    stores.set(softphone, store);
+    stores2.set(softphone, store);
   }
   return store;
 }
@@ -9627,19 +10085,19 @@ async function decodeRingtone(url) {
 }
 
 // src/ui/views/SettingsSection.tsx
-var import_jsx_runtime12 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
 function SettingsSection({
   title,
   children
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("section", { className: "cv-settings-section", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "cv-settings-section-title", children: title }),
-    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "cv-settings-section-body", children })
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("section", { className: "cv-settings-section", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h3", { className: "cv-settings-section-title", children: title }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "cv-settings-section-body", children })
   ] });
 }
 
 // src/ui/views/settings/SettingsNavRow.tsx
-var import_jsx_runtime13 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
 function SettingsNavRow({
   icon: Icon3,
   title,
@@ -9647,44 +10105,46 @@ function SettingsNavRow({
   onOpen,
   rowRef
 }) {
-  const inner = /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "cv-settings-row-icon", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon3, { size: 16 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { className: "cv-settings-nav-text", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "cv-settings-nav-title", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "cv-settings-nav-value", children: value })
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "cv-settings-row-icon", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon3, { size: 16 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "cv-settings-nav-text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "cv-settings-nav-title", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "cv-settings-nav-value", children: value })
     ] }),
-    onOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ChevronRight, { size: 16, className: "cv-settings-nav-chevron", "aria-hidden": true }) : null
+    onOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronRight, { size: 16, className: "cv-settings-nav-chevron", "aria-hidden": true }) : null
   ] });
-  return onOpen ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", className: "cv-settings-nav", onClick: onOpen, ref: rowRef, children: inner }) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "cv-settings-nav cv-settings-nav--static", children: inner });
+  return onOpen ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("button", { type: "button", className: "cv-settings-nav", onClick: onOpen, ref: rowRef, children: inner }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "cv-settings-nav cv-settings-nav--static", children: inner });
 }
 
 // src/ui/views/settings/DevicePage.tsx
-var import_react24 = __toESM(require_react(), 1);
+var import_react28 = __toESM(require_react(), 1);
 
 // src/ui/views/settings/ChoiceList.tsx
-var import_react22 = __toESM(require_react(), 1);
-var import_jsx_runtime14 = __toESM(require_jsx_runtime(), 1);
+var import_react26 = __toESM(require_react(), 1);
+var import_jsx_runtime15 = __toESM(require_jsx_runtime(), 1);
 function ChoiceList({
   label,
   choices,
   value,
   onSelect,
-  onReselect
+  onReselect,
+  disabled = false
 }) {
-  const name = (0, import_react22.useId)();
-  const pointer = (0, import_react22.useRef)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "cv-choices", role: "radiogroup", "aria-label": label, children: choices.map((c) => {
+  const name = (0, import_react26.useId)();
+  const pointer = (0, import_react26.useRef)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "cv-choices", role: "radiogroup", "aria-label": label, "aria-disabled": disabled || void 0, children: choices.map((c) => {
     const checked = c.value === value;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
       "label",
       {
         className: "cv-choice",
         "data-checked": checked || void 0,
+        "data-disabled": disabled || void 0,
         onPointerDown: () => {
           pointer.current = true;
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
             "input",
             {
               type: "radio",
@@ -9695,22 +10155,26 @@ function ChoiceList({
               onChange: () => {
                 const via = pointer.current ? "pointer" : "keyboard";
                 pointer.current = false;
-                onSelect(c.value, via);
+                if (!disabled) onSelect(c.value, via);
               },
               onClick: () => {
                 if (c.value === value) {
                   pointer.current = false;
-                  onReselect?.(c.value);
+                  if (!disabled) onReselect?.(c.value);
                 }
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "cv-choice-text", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "cv-choice-label", children: c.label }),
-            c.sub ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "cv-choice-sub", children: c.sub }) : null
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "cv-choice-text", children: [
+            c.tag ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { className: "cv-choice-line", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "cv-choice-label", children: c.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "cv-choice-tag", children: c.tag })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "cv-choice-label", children: c.label }),
+            c.sub ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "cv-choice-sub", children: c.sub }) : null,
+            c.hint ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "cv-choice-hint", children: c.hint }) : null
           ] }),
           c.trailing,
-          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Check, { size: 16, className: "cv-choice-check", "aria-hidden": true })
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Check, { size: 16, className: "cv-choice-check", "aria-hidden": true })
         ]
       },
       c.value
@@ -9719,18 +10183,18 @@ function ChoiceList({
 }
 
 // src/ui/views/settings/SettingsPage.tsx
-var import_react23 = __toESM(require_react(), 1);
-var import_jsx_runtime15 = __toESM(require_jsx_runtime(), 1);
+var import_react27 = __toESM(require_react(), 1);
+var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
 function SettingsPage({
   title,
   intro,
   onBack,
   children
 }) {
-  const titleId = (0, import_react23.useId)();
-  const heading = (0, import_react23.useRef)(null);
-  (0, import_react23.useEffect)(() => heading.current?.focus(), []);
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+  const titleId = (0, import_react27.useId)();
+  const heading = (0, import_react27.useRef)(null);
+  (0, import_react27.useEffect)(() => heading.current?.focus(), []);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
     "div",
     {
       className: "cv-detail cv-settings-page",
@@ -9743,13 +10207,13 @@ function SettingsPage({
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "cv-detail-head", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("button", { type: "button", className: "cv-detail-back", onClick: onBack, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(ArrowLeft, { size: 16, "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "cv-detail-head", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { type: "button", className: "cv-detail-back", onClick: onBack, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(ArrowLeft, { size: 16, "aria-hidden": true }),
           "Ajustes"
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "cv-settings-page-body", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h2", { className: "cv-settings-page-title", id: titleId, tabIndex: -1, ref: heading, children: title }),
-          intro ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "cv-settings-page-intro", children: intro }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "cv-settings-page-body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h2", { className: "cv-settings-page-title", id: titleId, tabIndex: -1, ref: heading, children: title }),
+          intro ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "cv-settings-page-intro", children: intro }) : null,
           children
         ] })
       ]
@@ -9758,7 +10222,7 @@ function SettingsPage({
 }
 
 // src/ui/views/settings/DevicePage.tsx
-var import_jsx_runtime16 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
 var SYSTEM_DEFAULT = "";
 var PAGES = {
   input: {
@@ -9791,8 +10255,8 @@ function DevicePage({ kind, onBack }) {
     { value: SYSTEM_DEFAULT, label: "Predeterminado del sistema" },
     ...list.map((d, i) => ({ value: d.deviceId, label: deviceLabel(d, i, kind) }))
   ];
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(SettingsPage, { title: page.title, intro: page.intro, onBack, children: [
-    list.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(SettingsPage, { title: page.title, intro: page.intro, onBack, children: [
+    list.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
       ChoiceList,
       {
         label: page.title,
@@ -9800,15 +10264,15 @@ function DevicePage({ kind, onBack }) {
         value: current ?? SYSTEM_DEFAULT,
         onSelect: (v) => void apply(v === SYSTEM_DEFAULT ? null : v)
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "cv-settings-page-empty", children: page.empty }),
-    kind === "output" ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(SpeakerTest, { sinkId: devices.currentOutputId }) : null
+    ) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "cv-settings-page-empty", children: page.empty }),
+    kind === "output" ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SpeakerTest, { sinkId: devices.currentOutputId }) : null
   ] });
 }
 function SpeakerTest({ sinkId }) {
-  const [testing, setTesting] = (0, import_react24.useState)(false);
-  const tone = (0, import_react24.useRef)(null);
-  const timer = (0, import_react24.useRef)(null);
-  (0, import_react24.useEffect)(
+  const [testing, setTesting] = (0, import_react28.useState)(false);
+  const tone = (0, import_react28.useRef)(null);
+  const timer = (0, import_react28.useRef)(null);
+  (0, import_react28.useEffect)(
     () => () => {
       tone.current?.stop();
       if (timer.current) clearTimeout(timer.current);
@@ -9823,17 +10287,17 @@ function SpeakerTest({ sinkId }) {
     if (timer.current) clearTimeout(timer.current);
     timer.current = setTimeout(() => setTesting(false), TEST_TONE_MS);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("button", { type: "button", className: "cv-btn cv-settings-test", onClick: test, disabled: testing, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Volume2, { size: 16, "aria-hidden": true }),
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("button", { type: "button", className: "cv-btn cv-settings-test", onClick: test, disabled: testing, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Volume2, { size: 16, "aria-hidden": true }),
     testing ? "Sonando\u2026" : "Probar altavoz"
   ] });
 }
 
 // src/ui/views/settings/RingtonePage.tsx
-var import_react27 = __toESM(require_react(), 1);
+var import_react31 = __toESM(require_react(), 1);
 
 // src/ui/views/settings/ringtone-state.ts
-var import_react26 = __toESM(require_react(), 1);
+var import_react30 = __toESM(require_react(), 1);
 
 // src/ui/audio/preview.ts
 var PREVIEW_MAX_MS = 1e4;
@@ -9845,13 +10309,13 @@ function previewDurationMs(buffer, loop) {
 }
 
 // src/ui/views/settings/ringtone-state.ts
-var noSubscribe = () => () => {
+var noSubscribe2 = () => () => {
 };
-var noSettings = () => null;
+var noSettings2 = () => null;
 function useRingtoneSettings(store) {
-  const settings = (0, import_react26.useSyncExternalStore)(store?.subscribe ?? noSubscribe, store?.getSettings ?? noSettings);
-  const [failed, setFailed] = (0, import_react26.useState)(false);
-  const load = (0, import_react26.useCallback)(() => {
+  const settings = (0, import_react30.useSyncExternalStore)(store?.subscribe ?? noSubscribe2, store?.getSettings ?? noSettings2);
+  const [failed, setFailed] = (0, import_react30.useState)(false);
+  const load = (0, import_react30.useCallback)(() => {
     if (!store) return () => {
     };
     let live = true;
@@ -9863,7 +10327,7 @@ function useRingtoneSettings(store) {
       live = false;
     };
   }, [store]);
-  (0, import_react26.useEffect)(load, [load]);
+  (0, import_react30.useEffect)(load, [load]);
   return { settings, failed, retry: load };
 }
 function ringtoneSummary(settings, failed) {
@@ -9876,11 +10340,11 @@ function ringtoneSummary(settings, failed) {
   return settings.catalogue.find((r) => r.url === null)?.name ?? "Predeterminado";
 }
 function useRingtonePreview(store, sinkId) {
-  const [playing, setPlaying] = (0, import_react26.useState)(null);
-  const [error, setError] = (0, import_react26.useState)(null);
-  const current = (0, import_react26.useRef)(null);
-  const generation = (0, import_react26.useRef)(0);
-  const stop = (0, import_react26.useCallback)(() => {
+  const [playing, setPlaying] = (0, import_react30.useState)(null);
+  const [error, setError] = (0, import_react30.useState)(null);
+  const current = (0, import_react30.useRef)(null);
+  const generation = (0, import_react30.useRef)(0);
+  const stop = (0, import_react30.useCallback)(() => {
     generation.current += 1;
     const c = current.current;
     current.current = null;
@@ -9888,7 +10352,7 @@ function useRingtonePreview(store, sinkId) {
     c?.tone?.stop();
     setPlaying(null);
   }, []);
-  (0, import_react26.useEffect)(() => stop, [stop]);
+  (0, import_react30.useEffect)(() => stop, [stop]);
   const start = (settings, choice) => {
     stop();
     primeAudio();
@@ -9919,7 +10383,7 @@ function useRingtonePreview(store, sinkId) {
 }
 
 // src/ui/views/settings/RingtonePage.tsx
-var import_jsx_runtime17 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
 var ORG_DEFAULT = "";
 var KEYBOARD_SETTLE_MS = 300;
 function RingtonePage({
@@ -9932,8 +10396,8 @@ function RingtonePage({
   const softphone = useSoftphone();
   const devices = useDevices();
   const preview = useRingtonePreview(store, devices.canSelectRingtoneOutput ? devices.currentRingtoneOutputId : null);
-  const [pending, setPending] = (0, import_react27.useState)(void 0);
-  const [error, setError] = (0, import_react27.useState)(null);
+  const [pending, setPending] = (0, import_react31.useState)(void 0);
+  const [error, setError] = (0, import_react31.useState)(null);
   const save = useSerialSave(store, {
     onSettled: () => setPending(void 0),
     onFailed: () => {
@@ -9941,12 +10405,12 @@ function RingtonePage({
       setError("No se pudo guardar el tono. Int\xE9ntalo de nuevo.");
     }
   });
-  const latest = (0, import_react27.useRef)(settings);
+  const latest = (0, import_react31.useRef)(settings);
   latest.current = settings;
-  const settle = (0, import_react27.useRef)(null);
+  const settle = (0, import_react31.useRef)(null);
   const { stop: stopPreview } = preview;
-  (0, import_react27.useEffect)(() => softphone.on("incomingCall" /* IncomingCall */, stopPreview), [softphone, stopPreview]);
-  (0, import_react27.useEffect)(
+  (0, import_react31.useEffect)(() => softphone.on("incomingCall" /* IncomingCall */, stopPreview), [softphone, stopPreview]);
+  (0, import_react31.useEffect)(
     () => () => {
       if (settle.current) {
         clearTimeout(settle.current.timer);
@@ -9982,14 +10446,14 @@ function RingtonePage({
     if (preview.playing === value) preview.stop();
     else preview.start(settings, value);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     SettingsPage,
     {
       title: "Tono de llamada",
       intro: "Lo que suena cuando entra una llamada. Se guarda en tu cuenta, as\xED que es el mismo en todos tus dispositivos.",
       onBack,
-      children: settings ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+      children: settings ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_jsx_runtime18.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           ChoiceList,
           {
             label: "Tono de llamada",
@@ -9999,13 +10463,13 @@ function RingtonePage({
             onReselect
           }
         ),
-        error ?? preview.error ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "cv-settings-error", role: "alert", children: error ?? preview.error }) : null
-      ] }) : failed ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "cv-empty", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "cv-empty-title", children: "No se pudieron cargar los tonos." }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("button", { type: "button", className: "cv-btn cv-settings-retry", onClick: onRetry, children: "Reintentar" })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "cv-empty", role: "status", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(LoaderCircle, { className: "cv-empty-spinner", size: 18, "aria-hidden": true }),
-        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "cv-empty-title", children: "Cargando\u2026" })
+        error ?? preview.error ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "cv-settings-error", role: "alert", children: error ?? preview.error }) : null
+      ] }) : failed ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "cv-empty", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "cv-empty-title", children: "No se pudieron cargar los tonos." }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("button", { type: "button", className: "cv-btn cv-settings-retry", onClick: onRetry, children: "Reintentar" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "cv-empty", role: "status", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(LoaderCircle, { className: "cv-empty-spinner", size: 18, "aria-hidden": true }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "cv-empty-title", children: "Cargando\u2026" })
       ] })
     }
   );
@@ -10016,9 +10480,9 @@ function currentValue(settings) {
 function choicesFor(settings, playing) {
   const org = settings.orgDefault ? settings.catalogue.find((r) => r.id === settings.orgDefault) : void 0;
   const builtIn = settings.catalogue.find((r) => r.url === null);
-  const mark = (value) => playing === value ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "cv-choice-playing", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Volume2, { size: 15, "aria-hidden": true }),
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "cv-sr-only", children: "Sonando" })
+  const mark = (value) => playing === value ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("span", { className: "cv-choice-playing", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Volume2, { size: 15, "aria-hidden": true }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "cv-sr-only", children: "Sonando" })
   ] }) : void 0;
   const orgChoice = {
     value: ORG_DEFAULT,
@@ -10029,11 +10493,11 @@ function choicesFor(settings, playing) {
   return [orgChoice, ...settings.catalogue.map((r) => ({ value: r.id, label: r.name, trailing: mark(r.id) }))];
 }
 function useSerialSave(store, handlers) {
-  const wanted = (0, import_react27.useRef)(null);
-  const busy = (0, import_react27.useRef)(false);
-  const on = (0, import_react27.useRef)(handlers);
+  const wanted = (0, import_react31.useRef)(null);
+  const busy = (0, import_react31.useRef)(false);
+  const on = (0, import_react31.useRef)(handlers);
   on.current = handlers;
-  const [save] = (0, import_react27.useState)(() => (id) => {
+  const [save] = (0, import_react31.useState)(() => (id) => {
     wanted.current = { id };
     if (busy.current) return;
     busy.current = true;
@@ -10054,21 +10518,123 @@ function useSerialSave(store, handlers) {
   return save;
 }
 
+// src/ui/views/settings/OutboundNumberPage.tsx
+var import_react33 = __toESM(require_react(), 1);
+var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1);
+var ORG_DEFAULT2 = "";
+var KEYBOARD_SETTLE_MS2 = 800;
+function OutboundNumberPage({
+  store,
+  settings,
+  onBack
+}) {
+  const formatIntl2 = useIntlFormatter();
+  const current = numberName(effectiveNumber(settings), formatIntl2);
+  const change = useOutboundNumberChange(store, settings, current);
+  const [pending, setPending] = (0, import_react33.useState)(void 0);
+  const settle = (0, import_react33.useRef)(null);
+  const choose = (0, import_react33.useRef)(change.choose);
+  choose.current = change.choose;
+  (0, import_react33.useEffect)(
+    () => () => {
+      if (settle.current) clearTimeout(settle.current);
+    },
+    []
+  );
+  const notice = (0, import_react33.useRef)(null);
+  const apply = async (value) => {
+    setPending(value);
+    const applied = await choose.current(value || null);
+    setPending(void 0);
+    if (!applied) requestAnimationFrame(() => notice.current?.scrollIntoView?.({ block: "nearest" }));
+  };
+  const onSelect = (value, via) => {
+    if (settle.current) clearTimeout(settle.current);
+    settle.current = null;
+    if (via === "pointer") {
+      void apply(value);
+      return;
+    }
+    setPending(value);
+    settle.current = setTimeout(() => {
+      settle.current = null;
+      void apply(value);
+    }, KEYBOARD_SETTLE_MS2);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    SettingsPage,
+    {
+      title: "N\xFAmero de salida",
+      intro: "El n\xFAmero que ve la persona a la que llamas. Es el mismo en todos tus dispositivos y tambi\xE9n puedes cambiarlo desde el teclado.",
+      onBack,
+      children: [
+        change.message ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "cv-settings-notice", role: "status", "data-kind": change.isError ? "error" : "info", ref: notice, children: change.message }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          ChoiceList,
+          {
+            label: "N\xFAmero de salida",
+            choices: choicesFor2(settings, formatIntl2, change.busy ? pending : void 0),
+            value: pending ?? currentValue2(settings),
+            onSelect,
+            disabled: change.locked
+          }
+        )
+      ]
+    }
+  );
+}
+function currentValue2(settings) {
+  return settings.mine && settings.numbers.some((n) => n.id === settings.mine) ? settings.mine : ORG_DEFAULT2;
+}
+function choicesFor2(settings, formatIntl2, applying) {
+  const orgDefault = settings.numbers.find((n) => n.id === settings.orgDefault);
+  const spinner = (value) => applying === value ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "cv-choice-applying", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LoaderCircle, { size: 15, className: "cv-choice-applying-icon", "aria-hidden": true }),
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "cv-sr-only", children: "Aplicando" })
+  ] }) : void 0;
+  return [
+    {
+      value: ORG_DEFAULT2,
+      label: "Por defecto de la organizaci\xF3n",
+      sub: orgDefault ? numberName(orgDefault, formatIntl2) : "Sin n\xFAmero por defecto",
+      trailing: spinner(ORG_DEFAULT2)
+    },
+    ...settings.numbers.map((n) => {
+      const kind = KIND_TAG[n.kind];
+      return {
+        value: n.id,
+        label: numberName(n, formatIntl2),
+        ...n.label ? { sub: formatIntl2(`+${n.number}`) } : {},
+        ...kind ? { tag: kind.tag, hint: kind.hint } : {},
+        trailing: spinner(n.id)
+      };
+    })
+  ];
+}
+function outboundSummary(settings, formatIntl2) {
+  const effective = effectiveNumber(settings);
+  const name = numberName(effective, formatIntl2);
+  return settings.mine || !effective ? name : `${name} \xB7 organizaci\xF3n`;
+}
+
 // src/ui/views/SettingsTab.tsx
-var import_jsx_runtime18 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime20 = __toESM(require_jsx_runtime(), 1);
 function SettingsTab() {
   const softphone = useSoftphone();
   const devices = useDevices();
   const store = ringtoneStore(softphone);
   const ringtone = useRingtoneSettings(store);
-  const [page, setPage] = (0, import_react29.useState)(null);
-  const list = (0, import_react29.useRef)(null);
-  const rows = (0, import_react29.useRef)({});
-  const returnTo = (0, import_react29.useRef)(null);
-  (0, import_react29.useEffect)(() => {
+  const outStore = outboundNumberStore(softphone);
+  const outbound = useOutboundNumbers(outStore).settings;
+  const formatIntl2 = useIntlFormatter();
+  const [page, setPage] = (0, import_react34.useState)(null);
+  const list = (0, import_react34.useRef)(null);
+  const rows = (0, import_react34.useRef)({});
+  const returnTo = (0, import_react34.useRef)(null);
+  (0, import_react34.useEffect)(() => {
     void softphone.audio.refresh();
   }, [softphone]);
-  (0, import_react29.useEffect)(() => {
+  (0, import_react34.useEffect)(() => {
     list.current?.toggleAttribute("inert", page !== null);
     if (page === null && returnTo.current) {
       rows.current[returnTo.current]?.focus();
@@ -10083,9 +10649,9 @@ function SettingsTab() {
   const rowRef = (p) => (el) => {
     rows.current[p] = el;
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "cv-view cv-settings", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "cv-settings-body", ref: list, children: [
-      store ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(SettingsSection, { title: "Llamadas entrantes", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "cv-view cv-settings", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "cv-settings-body", ref: list, children: [
+      store ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SettingsSection, { title: "Llamadas entrantes", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
         SettingsNavRow,
         {
           icon: Music,
@@ -10095,8 +10661,18 @@ function SettingsTab() {
           rowRef: rowRef("tone")
         }
       ) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(SettingsSection, { title: "Dispositivos", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      outStore && outbound && outbound.numbers.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(SettingsSection, { title: "Llamadas salientes", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        SettingsNavRow,
+        {
+          icon: PhoneOutgoing,
+          title: "N\xFAmero de salida",
+          value: outboundSummary(outbound, formatIntl2),
+          onOpen: open("outbound"),
+          rowRef: rowRef("outbound")
+        }
+      ) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(SettingsSection, { title: "Dispositivos", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           SettingsNavRow,
           {
             icon: Mic,
@@ -10106,7 +10682,7 @@ function SettingsTab() {
             rowRef: rowRef("input")
           }
         ),
-        devices.canSelectOutput ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        devices.canSelectOutput ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           SettingsNavRow,
           {
             icon: Headphones,
@@ -10118,7 +10694,7 @@ function SettingsTab() {
         ) : (
           // Safari and most of Firefox have no `setSinkId`: offering a page whose choice silently does
           // nothing is worse than saying where the choice really lives.
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             SettingsNavRow,
             {
               icon: Headphones,
@@ -10127,7 +10703,7 @@ function SettingsTab() {
             }
           )
         ),
-        devices.canSelectRingtoneOutput ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        devices.canSelectRingtoneOutput ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
           SettingsNavRow,
           {
             icon: BellRing,
@@ -10139,7 +10715,7 @@ function SettingsTab() {
         ) : null
       ] })
     ] }),
-    page === "tone" && store ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    page === "tone" && store ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
       RingtonePage,
       {
         store,
@@ -10148,12 +10724,12 @@ function SettingsTab() {
         onRetry: ringtone.retry,
         onBack: back
       }
-    ) : page !== null && page !== "tone" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(DevicePage, { kind: page, onBack: back }) : null
+    ) : page === "outbound" && outStore && outbound ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(OutboundNumberPage, { store: outStore, settings: outbound, onBack: back }) : page !== null && page !== "tone" && page !== "outbound" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(DevicePage, { kind: page, onBack: back }) : null
   ] });
 }
 
 // src/ui/permission/useMicPermission.ts
-var import_react31 = __toESM(require_react(), 1);
+var import_react36 = __toESM(require_react(), 1);
 
 // src/core/env.ts
 function isBrowser() {
@@ -10165,8 +10741,8 @@ function isWebRtcSupported() {
 
 // src/ui/permission/useMicPermission.ts
 function useMicPermission() {
-  const [state, setState] = (0, import_react31.useState)("checking");
-  const warm = (0, import_react31.useCallback)(async () => {
+  const [state, setState] = (0, import_react36.useState)("checking");
+  const warm = (0, import_react36.useCallback)(async () => {
     try {
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
       for (const track of stream.getTracks()) track.stop();
@@ -10175,7 +10751,7 @@ function useMicPermission() {
       setState("denied");
     }
   }, []);
-  (0, import_react31.useEffect)(() => {
+  (0, import_react36.useEffect)(() => {
     if (!isWebRtcSupported()) {
       setState("unsupported");
       return;
@@ -10266,60 +10842,60 @@ function unblockGuide() {
 }
 
 // src/ui/permission/MicPermissionGate.tsx
-var import_jsx_runtime19 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime21 = __toESM(require_jsx_runtime(), 1);
 function MicPrompt({
   state,
   onRequest
 }) {
   if (state === "unsupported") {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "cv-gate", "data-state": state, "data-tone": "danger", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MicOff, { size: 22 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "cv-gate-title", children: "Llamadas no disponibles" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: "Este navegador no admite llamadas. Prueba con Chrome, Edge o Firefox." })
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "cv-gate", "data-state": state, "data-tone": "danger", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MicOff, { size: 22 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "cv-gate-title", children: "Llamadas no disponibles" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: "Este navegador no admite llamadas. Prueba con Chrome, Edge o Firefox." })
     ] });
   }
   if (state === "denied") {
     const guide = unblockGuide();
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "cv-gate", "data-state": state, "data-tone": "danger", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(MicOff, { size: 22 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "cv-gate-title", children: "Micr\xF3fono bloqueado" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: "Perm\xEDtelo en tu navegador para poder llamar." }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("details", { className: "cv-help", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("summary", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CircleHelp, { size: 13, "aria-hidden": true }),
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "cv-gate", "data-state": state, "data-tone": "danger", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MicOff, { size: 22 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "cv-gate-title", children: "Micr\xF3fono bloqueado" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: "Perm\xEDtelo en tu navegador para poder llamar." }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("details", { className: "cv-help", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("summary", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CircleHelp, { size: 13, "aria-hidden": true }),
           "C\xF3mo permitirlo"
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("ol", { children: guide.steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("li", { children: step }, step)) }),
-        guide.url ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("a", { href: guide.url, target: "_blank", rel: "noreferrer noopener", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("ol", { children: guide.steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("li", { children: step }, step)) }),
+        guide.url ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("a", { href: guide.url, target: "_blank", rel: "noreferrer noopener", children: [
           "Gu\xEDa del navegador",
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(ExternalLink, { size: 11, "aria-hidden": true })
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ExternalLink, { size: 11, "aria-hidden": true })
         ] }) : null
       ] })
     ] });
   }
   if (state === "warming") {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "cv-gate", "data-state": state, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Mic, { size: 22 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "cv-gate-title", children: "Permite el micr\xF3fono" }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: "Acepta el aviso que muestra el navegador para continuar." })
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "cv-gate", "data-state": state, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Mic, { size: 22 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "cv-gate-title", children: "Permite el micr\xF3fono" }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: "Acepta el aviso que muestra el navegador para continuar." })
     ] });
   }
   if (state === "checking") {
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "cv-gate", "data-state": state, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Mic, { size: 22 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: "Preparando el micr\xF3fono\u2026" })
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "cv-gate", "data-state": state, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Mic, { size: 22 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: "Preparando el micr\xF3fono\u2026" })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "cv-gate", "data-state": state, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Mic, { size: 22 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h3", { className: "cv-gate-title", children: "Permite el micr\xF3fono" }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { children: "Lo necesitamos para que puedas hablar durante las llamadas." }),
-    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("button", { className: "cv-btn cv-btn--accent", onClick: onRequest, children: "Permitir micr\xF3fono" })
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "cv-gate", "data-state": state, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Mic, { size: 22 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "cv-gate-title", children: "Permite el micr\xF3fono" }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { children: "Lo necesitamos para que puedas hablar durante las llamadas." }),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("button", { className: "cv-btn cv-btn--accent", onClick: onRequest, children: "Permitir micr\xF3fono" })
   ] });
 }
 
 // src/ui/permission/ErrorGate.tsx
-var import_jsx_runtime20 = (
+var import_jsx_runtime22 = (
   /*
         `part` on all four, because this is the most intrusive thing the SDK draws — it replaces the
         whole dialpad — and inside `<coventia-softphone>` a shadow root makes it otherwise unreachable
@@ -10335,36 +10911,36 @@ function ErrorGate({
   onRetry
 }) {
   const text = ERROR_TEXT[error.code];
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "cv-gate", "data-tone": "danger", "data-code": error.code, part: "error-gate", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(TriangleAlert, { size: 22 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "cv-gate-title", part: "error-title", children: text.title }),
-    text.body === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("p", { part: "error-body", children: text.body }),
-    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("button", { className: "cv-btn cv-btn--accent", onClick: onRetry, part: "error-retry", children: "Reintentar" })
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "cv-gate", "data-tone": "danger", "data-code": error.code, part: "error-gate", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TriangleAlert, { size: 22 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("h3", { className: "cv-gate-title", part: "error-title", children: text.title }),
+    text.body === void 0 ? null : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { part: "error-body", children: text.body }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("button", { className: "cv-btn cv-btn--accent", onClick: onRetry, part: "error-retry", children: "Reintentar" })
   ] });
 }
 
 // src/ui/permission/LeaderGate.tsx
-var import_jsx_runtime21 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime23 = __toESM(require_jsx_runtime(), 1);
 function LeaderGate() {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { className: "cv-gate", part: "leader-gate", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(MonitorSmartphone, { size: 22 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("h3", { className: "cv-gate-title", part: "leader-title", children: "Tel\xE9fono activo en otra pesta\xF1a" }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { part: "leader-body", children: "Solo una pesta\xF1a puede usar el tel\xE9fono a la vez. Cierra la otra para activar esta." })
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "cv-gate", part: "leader-gate", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "cv-gate-mark", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MonitorSmartphone, { size: 22 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h3", { className: "cv-gate-title", part: "leader-title", children: "Tel\xE9fono activo en otra pesta\xF1a" }),
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { part: "leader-body", children: "Solo una pesta\xF1a puede usar el tel\xE9fono a la vez. Cierra la otra para activar esta." })
   ] });
 }
 
 // src/ui/lib/useCallOutcome.ts
-var import_react32 = __toESM(require_react(), 1);
+var import_react37 = __toESM(require_react(), 1);
 var BACKSTOP_MS = 6e3;
 function useCallOutcome() {
   const softphone = useSoftphone();
-  const [code, setCode] = (0, import_react32.useState)(null);
-  const timer = (0, import_react32.useRef)(void 0);
-  const clear = (0, import_react32.useCallback)(() => {
+  const [code, setCode] = (0, import_react37.useState)(null);
+  const timer = (0, import_react37.useRef)(void 0);
+  const clear = (0, import_react37.useCallback)(() => {
     clearTimeout(timer.current);
     setCode(null);
   }, []);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react37.useEffect)(() => {
     const off = softphone.on("error" /* Error */, (error) => {
       if (error.fatal) return;
       clearTimeout(timer.current);
@@ -10376,7 +10952,7 @@ function useCallOutcome() {
       clearTimeout(timer.current);
     };
   }, [softphone]);
-  (0, import_react32.useEffect)(() => softphone.on("incomingCall" /* IncomingCall */, () => clear()), [softphone, clear]);
+  (0, import_react37.useEffect)(() => softphone.on("incomingCall" /* IncomingCall */, () => clear()), [softphone, clear]);
   return {
     outcome: code === null ? null : { code, text: ERROR_TEXT[code].title },
     clear
@@ -10384,12 +10960,12 @@ function useCallOutcome() {
 }
 
 // src/ui/audio/useCallAudio.ts
-var import_react34 = __toESM(require_react(), 1);
+var import_react39 = __toESM(require_react(), 1);
 function useCallAudio(enabled) {
   const softphone = useSoftphone();
-  const remote = (0, import_react34.useRef)(null);
-  const tone = (0, import_react34.useRef)(null);
-  (0, import_react34.useEffect)(() => {
+  const remote = (0, import_react39.useRef)(null);
+  const tone = (0, import_react39.useRef)(null);
+  (0, import_react39.useEffect)(() => {
     if (!enabled || typeof document === "undefined") return;
     const prime = () => primeAudio();
     const gestures = ["pointerdown", "keydown"];
@@ -10483,7 +11059,7 @@ function useCallAudio(enabled) {
 }
 
 // src/ui/notices/TransferNotices.tsx
-var import_jsx_runtime22 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime24 = __toESM(require_jsx_runtime(), 1);
 function TransferNotices({
   notices,
   dismiss
@@ -10495,7 +11071,7 @@ function TransferNotices({
     if (notice.caller) void softphone.call(notice.caller).catch(() => {
     });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
     "div",
     {
       className: "cv-transfer-notices",
@@ -10503,20 +11079,20 @@ function TransferNotices({
       part: "transfer-notices",
       "data-has-notices": notices.length > 0,
       children: [
-        notices.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "cv-transfer-notices-count", children: [
+        notices.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "cv-transfer-notices-count", children: [
           notices.length,
           " traspasos sin conectar"
         ] }) : null,
-        notices.map((notice) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "cv-transfer-notice", part: "transfer-notice", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "cv-transfer-notice-mark", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PhoneMissed, { size: 16 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "cv-transfer-notice-body", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "cv-transfer-notice-header", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "cv-transfer-notice-title", children: [
+        notices.map((notice) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "cv-transfer-notice", part: "transfer-notice", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "cv-transfer-notice-mark", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(PhoneMissed, { size: 16 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "cv-transfer-notice-body", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "cv-transfer-notice-header", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "cv-transfer-notice-title", children: [
                 "El traspaso a ",
                 notice.target,
                 " no se conect\xF3"
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                 "button",
                 {
                   type: "button",
@@ -10524,17 +11100,17 @@ function TransferNotices({
                   onClick: () => dismiss(notice.id),
                   "aria-label": "Descartar aviso",
                   part: "transfer-notice-dismiss",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(X, { size: 14 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(X, { size: 14 })
                 }
               )
             ] }),
-            notice.caller ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "cv-transfer-notice-subtitle", children: [
+            notice.caller ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("p", { className: "cv-transfer-notice-subtitle", children: [
               notice.caller,
               " se ha desconectado."
             ] }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "cv-transfer-notice-footer", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "cv-transfer-notice-age", children: formatAge(elapsedSeconds(notice.at, now)) }),
-              notice.caller ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "cv-transfer-notice-footer", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "cv-transfer-notice-age", children: formatAge(elapsedSeconds(notice.at, now)) }),
+              notice.caller ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                 "button",
                 {
                   type: "button",
@@ -10542,7 +11118,7 @@ function TransferNotices({
                   onClick: () => callBack(notice),
                   part: "transfer-notice-callback",
                   children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Phone, { size: 14, "aria-hidden": true }),
+                    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Phone, { size: 14, "aria-hidden": true }),
                     "Llamar de vuelta"
                   ]
                 }
@@ -10556,15 +11132,15 @@ function TransferNotices({
 }
 
 // src/ui/notices/useTransferNotices.ts
-var import_react37 = __toESM(require_react(), 1);
+var import_react42 = __toESM(require_react(), 1);
 function useTransferNotices() {
   const softphone = useSoftphone();
-  const [notices, setNotices] = (0, import_react37.useState)([]);
-  const nextId = (0, import_react37.useRef)(0);
-  const dismiss = (0, import_react37.useCallback)((id) => {
+  const [notices, setNotices] = (0, import_react42.useState)([]);
+  const nextId = (0, import_react42.useRef)(0);
+  const dismiss = (0, import_react42.useCallback)((id) => {
     setNotices((prev) => prev.filter((n) => n.id !== id));
   }, []);
-  (0, import_react37.useEffect)(
+  (0, import_react42.useEffect)(
     () => softphone.on("transferOutcome" /* TransferOutcome */, (payload) => {
       if (payload.status === "not-connected") {
         const id = nextId.current++;
@@ -10577,7 +11153,7 @@ function useTransferNotices() {
 }
 
 // src/ui/SoftphoneWidget.tsx
-var import_jsx_runtime23 = __toESM(require_jsx_runtime(), 1);
+var import_jsx_runtime25 = __toESM(require_jsx_runtime(), 1);
 function SoftphoneWidget(props) {
   const {
     contacts,
@@ -10593,7 +11169,7 @@ function SoftphoneWidget(props) {
   const fallback = softphone.sources;
   const contactsSource = contacts ?? fallback?.contacts;
   const historySource = history ?? fallback?.history;
-  const [tab, setTab] = (0, import_react39.useState)("dialer");
+  const [tab, setTab] = (0, import_react44.useState)("dialer");
   const call = useActiveCall();
   const isLeader = useIsLeader();
   const softphoneState = useSoftphoneState();
@@ -10622,15 +11198,15 @@ function SoftphoneWidget(props) {
     // optional parts of a phone, so this is never conditionally hidden.
     { id: "settings", icon: Settings, label: "Ajustes", show: true }
   ].filter((t) => t.show);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "div",
     {
       className: className ? `cv-softphone ${className}` : "cv-softphone",
       ...theme === "system" ? {} : { "data-cv-theme": theme },
       children: [
-        screenIsFree ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(TransferNotices, { notices: transferNotices, dismiss: dismissTransferNotice }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "cv-body", children: isFollower ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LeaderGate, {}) : blocked ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(MicPrompt, { state: mic.state, onRequest: () => void mic.request() }) : call ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CallScreen, { call, keyTones: sounds, ...incomingCallAction ? { incomingCallAction } : {} }) : fatal ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ErrorGate, { error: fatal, onRetry: retry }) : tab === "contacts" && contactsSource ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ContactsTab, { source: contactsSource, ...contactAction ? { contactAction } : {} }) : tab === "history" && historySource ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(HistoryTab, { source: historySource }) : tab === "settings" ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SettingsTab, {}) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Dialpad, { outcome, onIntent: clearOutcome, keyTones: sounds }) }),
-        screenIsFree ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "cv-tabs", role: "tablist", children: tabs.map(({ id, icon: Icon3, label }) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+        screenIsFree ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(TransferNotices, { notices: transferNotices, dismiss: dismissTransferNotice }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "cv-body", children: isFollower ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(LeaderGate, {}) : blocked ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(MicPrompt, { state: mic.state, onRequest: () => void mic.request() }) : call ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CallScreen, { call, keyTones: sounds, ...incomingCallAction ? { incomingCallAction } : {} }) : fatal ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ErrorGate, { error: fatal, onRetry: retry }) : tab === "contacts" && contactsSource ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ContactsTab, { source: contactsSource, ...contactAction ? { contactAction } : {} }) : tab === "history" && historySource ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(HistoryTab, { source: historySource }) : tab === "settings" ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(SettingsTab, {}) : /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Dialpad, { outcome, onIntent: clearOutcome, keyTones: sounds }) }),
+        screenIsFree ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "cv-tabs", role: "tablist", children: tabs.map(({ id, icon: Icon3, label }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
           "button",
           {
             role: "tab",
@@ -10638,8 +11214,8 @@ function SoftphoneWidget(props) {
             className: "cv-tab",
             onClick: () => setTab(id),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon3, { size: 20 }),
-              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: label })
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon3, { size: 20 }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { children: label })
             ]
           },
           id
@@ -10650,7 +11226,7 @@ function SoftphoneWidget(props) {
 }
 
 // src/styles/softphone.css
-var softphone_default = "/**\r\n * @coventia/softphone/styles.css\r\n *\r\n * The theming contract (SPEC \xA72.6) + all component styles. A host restyles the softphone by\r\n * overriding the `--cv-*` custom properties \u2014 which are INHERITED, so they cross the shadow boundary\r\n * of `<coventia-softphone>` by design (the host's own CSS *selectors* do not, which is what stops a\r\n * stray `button { width:100% }` from destroying the dialpad).\r\n *\r\n * Defaults match the Coventia product: light surface, emerald accent, soft rounded key cards.\r\n *\r\n * Reseller:  coventia-softphone { --cv-accent:#7c3aed; --cv-bg:#0b0b0f; }\r\n * CRM (shadcn bridge, ~15 lines, dark mode included):\r\n *   .cv-softphone { --cv-bg:hsl(var(--background)); --cv-text:hsl(var(--foreground)); \u2026 }\r\n *\r\n * TYPOGRAPHY NOTE: `--cv-font` is a system stack on purpose. An embedded widget should inherit its\r\n * host's type, not force a webfont into someone else's app; hosts override the token if they want.\r\n *\r\n * Strings are Spanish-only (SPEC \xA72.4). No i18n.\r\n */\r\n\r\n/*\r\n * The custom element's own box.\r\n *\r\n * A custom element is `display: inline` by default and has NO size \u2014 and the widget inside now fills\r\n * its host rather than asserting 340\xD7520, so without this the element would render to ZERO. The\r\n * drop-in promise is \"one tag and it works\", which means the TAG must carry a box.\r\n *\r\n * These are defaults, not decisions: they sit on `:host`, so any host stylesheet outranks them \u2014\r\n *\r\n *   coventia-softphone { width: 100%; height: 100%; }   \u2190 a sidebar\r\n *   coventia-softphone { height: 600px; }               \u2190 taller\r\n *\r\n * React consumers never see this: they import `/ui` and their own wrapper states the box (the CRM's\r\n * PhoneDialer does exactly that).\r\n */\r\n:host {\r\n  display: block;\r\n  width: 340px;\r\n  height: 520px;\r\n}\r\n\r\n/* React's container inside the shadow root \u2014 element path only; inert everywhere else.\r\n *\r\n * It must pass the host's height straight through. `.cv-softphone` below is `height: 100%`, and a\r\n * percentage height resolves against the PARENT: leave this div at its default `auto` and that 100%\r\n * silently becomes `auto` too, so the widget collapses to its content height and the host's `height`\r\n * is ignored. What you see is a short card stranded in a taller box \u2014 which reads as a broken widget,\r\n * not as a broken wrapper. */\r\n.cv-mount {\r\n  height: 100%;\r\n}\r\n\r\n:host,\r\n.cv-softphone {\r\n  /* Surface */\r\n  --cv-bg: #ffffff;\r\n  --cv-surface: #f9fafb;\r\n  --cv-surface-2: #f3f4f6;\r\n  --cv-border: #f3f4f6;\r\n  --cv-border-strong: #e5e7eb;\r\n\r\n  /* Text \u2014 three tiers, split by CONTRAST DUTY, not by taste:\r\n     `text`  informational primary        17.7:1\r\n     `muted` informational secondary       4.8:1  (AA \u2014 phone numbers, timestamps, tab labels)\r\n     `faint` DECORATIVE only               2.5:1  (keypad letters, placeholder \u2014 never information)\r\n     The legacy used gray-400 for all secondary text, which fails AA at 2.54:1. Splitting the tier\r\n     keeps the look while making the informational text legible. */\r\n  --cv-text: #111827;\r\n  --cv-muted: #6b7280;\r\n  --cv-faint: #9ca3af;\r\n\r\n  /* Intent \u2014 emerald. Split by CONTRAST DUTY, because one \"brand green\" cannot do all three jobs:\r\n     `accent`        FILL that carries a white glyph  \u2192 emerald-600, white 3.77:1 \u2713\r\n                     (emerald-500 is the prettier brand green but white on it is 2.54:1 \u2014 the\r\n                      call button's phone icon would fail WCAG non-text contrast. Measured, not guessed.)\r\n     `accent-strong` emerald AS TEXT on a surface     \u2192 emerald-700, 5.48:1 \u2713 for the 10px tab label\r\n     `accent-light`  DECORATIVE only (the ring halo)  \u2014 never carries text, so it stays vivid */\r\n  --cv-accent: #059669;\r\n  --cv-accent-strong: #047857;\r\n  --cv-accent-light: #10b981;\r\n  --cv-accent-soft: #a7f3d0;\r\n  --cv-accent-contrast: #ffffff;\r\n  --cv-danger: #ef4444;\r\n  /* `--cv-danger` ITSELF fails 3:1 non-text contrast against `--cv-danger-soft` (2.6:1, measured) \u2014\r\n     the same AS-TEXT/on-a-tinted-surface split `accent` already has, `danger` was just missing until\r\n     the Historial tab's status badges needed it. Darker on light (mirrors `accent-strong`), LIGHTER on\r\n     dark (red-400) \u2014 same inversion `accent-strong` documents above, same reason: emphasis on a dark\r\n     surface means more light, not less.\r\n     red-700 (#b91c1c) was the first pick here and overshot both minimums (6.47:1 text, 4.47:1 badge)\r\n     enough to read as a dark, brownish red rather than red \u2014 red-600 clears both with real margin\r\n     still (4.83:1 / 3.34:1, measured) and looks like red. */\r\n  --cv-danger-strong: #dc2626;\r\n  --cv-danger-soft: #fecaca;\r\n  /* A third status hue, sky \u2014 for the Historial row status chip specifically: an outgoing call that\r\n     WAS answered gets its own colour rather than sharing `accent`, matching the legacy CRM's own\r\n     three-way split (emerald/sky/rose) that this file's earlier restrained accent-only-for-\"fine\"\r\n     version had collapsed away. Same strong/soft split, same inversion, as `accent`/`danger` above \u2014\r\n     4.47:1 light / 4.42:1 dark against `-soft`, measured. */\r\n  --cv-info: #0284c7;\r\n  --cv-info-strong: #0369a1;\r\n  --cv-info-soft: #bae6fd;\r\n  --cv-hold: #6366f1;\r\n\r\n  /* Shape & type */\r\n  --cv-radius: 16px;\r\n  /* Strong ease-out. The built-in CSS easings are too weak to read as intentional. */\r\n  --cv-ease-out: cubic-bezier(0.23, 1, 0.32, 1);\r\n  --cv-radius-key: 16px;\r\n  --cv-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\r\n  --cv-font-size: 14px;\r\n  --cv-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 3px rgb(0 0 0 / 0.06);\r\n\r\n  color: var(--cv-text);\r\n  font-family: var(--cv-font);\r\n  font-size: var(--cv-font-size);\r\n}\r\n\r\n/**\r\n * Dark theme \u2014 matched to the Coventia product's own dark tokens, not invented.\r\n *\r\n * The CRM defines `--background: 240 10% 10%` (#17171c) with surfaces at 15.9% (#27272a) and borders\r\n * at 25.9% (#404044) \u2014 the zinc/240-hue family. An earlier draft here used a near-black\r\n * (#0f0f13, ~half the luminance of the product's background) with 2%-luminance borders that were\r\n * effectively invisible. That is the \"black tonality\" that read wrong: right hue, wrong lightness.\r\n *\r\n * Note the accent INVERTS: on light, `accent-strong` is darker than `accent` (emerald-700); on dark\r\n * it must be LIGHTER (emerald-400), because emphasis on a dark surface means more light, not less.\r\n * Same token, opposite direction \u2014 miss this and the timer/active tab sink into the background.\r\n *\r\n * \u2500\u2500 HOW THE THEME IS CHOSEN \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n * By default it follows the OS (`prefers-color-scheme`). But a host must be able to PIN it: the\r\n * Coventia CRM toggles dark with a class (next-themes), not the OS setting \u2014 so a user with a dark\r\n * OS but the CRM in light mode would otherwise get a dark widget inside a light app.\r\n *\r\n *   <SoftphoneWidget theme=\"light\" />   \u2192 data-cv-theme=\"light\"  \u2014 always light\r\n *   <SoftphoneWidget theme=\"dark\" />    \u2192 data-cv-theme=\"dark\"   \u2014 always dark\r\n *   <SoftphoneWidget />                 \u2192 follows the OS\r\n *\r\n * To follow the HOST's theme rather than the OS, pass the host's current theme through, e.g.\r\n * next-themes: `const { resolvedTheme } = useTheme(); <SoftphoneWidget theme={resolvedTheme} />`.\r\n *\r\n * The dark block is duplicated below (OS-driven vs. pinned) on purpose: plain CSS has no way to\r\n * share a declaration block across a media query and a selector, and the honest duplication beats a\r\n * clever custom-property toggle nobody can debug.\r\n */\r\n@media (prefers-color-scheme: dark) {\r\n  :host(:not([data-cv-theme='light'])),\r\n  .cv-softphone:not([data-cv-theme='light']) {\r\n    --cv-bg: #17171c;          /* CRM --background            240 10% 10%  */\r\n    --cv-surface: #202027;     /* between bg and secondary                 */\r\n    --cv-surface-2: #27272a;   /* CRM --secondary/--muted     240 3.7% 15.9% */\r\n    --cv-border: #2e2e33;\r\n    --cv-border-strong: #404044; /* CRM --border              240 3.7% 25.9% */\r\n    --cv-text: #fafafa;        /* CRM --foreground            0 0% 98%     */\r\n    --cv-muted: #a1a1aa;       /* CRM --muted-foreground      240 5% 64.9% \u2192 6.97:1 AA */\r\n    --cv-faint: #71717a;       /* decorative only                          */\r\n    --cv-accent-strong: #34d399; /* emerald-400 \u2014 9.29:1 on #17171c        */\r\n    --cv-accent-light: #34d399;  /* the halo reads brighter on dark          */\r\n    --cv-accent-soft: #065f46;   /* glows must darken on dark, not glare     */\r\n    --cv-danger-strong: #f87171; /* red-400 \u2014 LIGHTER than --cv-danger, same inversion as accent-strong */\r\n    --cv-danger-soft: #7f1d1d;\r\n    --cv-info-strong: #38bdf8;   /* sky-400 \u2014 same inversion, same reason */\r\n    --cv-info-soft: #0c4a6e;\r\n    --cv-shadow: 0 1px 2px rgb(0 0 0 / 0.4);\r\n  }\r\n}\r\n\r\n/* Pinned dark \u2014 wins regardless of the OS setting. */\r\n:host([data-cv-theme='dark']),\r\n.cv-softphone[data-cv-theme='dark'] {\r\n  --cv-bg: #17171c;\r\n  --cv-surface: #202027;\r\n  --cv-surface-2: #27272a;\r\n  --cv-border: #2e2e33;\r\n  --cv-border-strong: #404044;\r\n  --cv-text: #fafafa;\r\n  --cv-muted: #a1a1aa;\r\n  --cv-faint: #71717a;\r\n  --cv-accent-strong: #34d399;\r\n  --cv-accent-light: #34d399;\r\n  --cv-accent-soft: #065f46;\r\n  --cv-danger-strong: #f87171;\r\n  --cv-danger-soft: #7f1d1d;\r\n  --cv-info-strong: #38bdf8;\r\n  --cv-info-soft: #0c4a6e;\r\n  --cv-shadow: 0 1px 2px rgb(0 0 0 / 0.4);\r\n}\r\n\r\n.cv-softphone,\r\n.cv-softphone *,\r\n.cv-softphone *::before,\r\n.cv-softphone *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* \u2500\u2500 Shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-softphone {\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  /* FILL the box the host gives us; do not assert one.\r\n     This was `width: 340px; height: 520px`, which is a component telling its host how big its\r\n     layout is. The CRM's panel is 310 wide, so the third keypad column was simply cut off \u2014 and no\r\n     amount of theming could have fixed it, because the widget was not asking. A component in\r\n     someone else's layout accepts a size. */\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  /* \u2026but a dialpad is not a spreadsheet. Given 900px it should not become a 900px dialpad with\r\n     300px keys; it should be itself, centred. Cap and centre rather than stretch. */\r\n  max-width: var(--cv-max-width, 420px);\r\n  margin-inline: auto;\r\n\r\n  /* Adapt to THIS box, not to the viewport. The widget can be 310px wide inside a 1920px screen \u2014\r\n     a media query would ask the wrong question and get a confident wrong answer. Container queries\r\n     are the only ones that know the truth, and a shadow root is the ideal place for them. */\r\n  container-type: inline-size;\r\n  container-name: cv;\r\n\r\n  background: var(--cv-bg);\r\n  overflow: hidden;\r\n  /* The containing block for `.cv-transfer-notices` \u2014 it overlays this whole shell, top edge to top\r\n     edge, not just `.cv-body`, so it reads as one seamless panel rather than a strip that starts a few\r\n     pixels short of the shell's own rounded corner. */\r\n  position: relative;\r\n\r\n  /* The frame is the HOST's call. The CRM's panel already draws `border rounded-xl shadow-2xl`, so\r\n     drawing our own put a card inside a card \u2014 nested chrome, which is always wrong. Defaulting to\r\n     a frame still suits a bare drop-in on a blank page; a host that has its own sets these to\r\n     `none` / `0` and the double edge disappears. */\r\n  border: var(--cv-shell-border, 1px solid var(--cv-border-strong));\r\n  border-radius: var(--cv-shell-radius, var(--cv-radius));\r\n  box-shadow: var(--cv-shell-shadow, 0 4px 24px rgb(0 0 0 / 0.06));\r\n}\r\n\r\n/* Narrow hosts \u2014 a sidebar, a phone-width column. Reclaim the horizontal padding first: at 260px\r\n   the gutters cost more than they give, and a cramped keypad is worse than a tight one. */\r\n@container cv (max-width: 300px) {\r\n  .cv-keypad { padding: 0 0.6rem; gap: 6px; }\r\n  .cv-dial-prefix { padding: 0.7rem 0.6rem 0; }\r\n  .cv-dial-head { padding: 0.3rem 0.6rem 0.6rem; }\r\n  .cv-display { font-size: 1.5rem; }\r\n}\r\n\r\n/* Short hosts. The flex chain already lets the keypad absorb what is left, but below this the keys\r\n   stop being tappable \u2014 so buy the height back from the chrome instead of from the keys. */\r\n@container cv (max-height: 440px) {\r\n  .cv-dial-prefix { padding-top: 0.5rem; }\r\n  .cv-dial-head { padding-top: 0.2rem; padding-bottom: 0.4rem; }\r\n  .cv-dial-foot { padding-bottom: 0.5rem; }\r\n  .cv-controls { gap: 0.4rem; padding-bottom: 0.6rem; }\r\n}\r\n\r\n/* The flex chain that makes the layout work: body flexes, views fill it, only the\r\n   keypad/list grows. Without `min-height:0` a grid child refuses to shrink and overflows. */\r\n.cv-body {\r\n  flex: 1;\r\n  min-height: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n.cv-view {\r\n  flex: 1;\r\n  min-height: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  /* Containing block for `.cv-detail` below \u2014 an absolute overlay must cover exactly THIS tab's\r\n     content, not escape to whatever the next positioned ancestor up the tree happens to be. */\r\n  position: relative;\r\n}\r\n\r\n/* \u2500\u2500 Tab bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-tabs {\r\n  display: flex;\r\n  border-top: 1px solid var(--cv-border);\r\n  background: var(--cv-bg);\r\n  flex-shrink: 0;\r\n}\r\n.cv-tab {\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 3px;\r\n  padding: 9px 0 8px;\r\n  background: none;\r\n  border: none;\r\n  color: var(--cv-muted);\r\n  cursor: pointer;\r\n  font: inherit;\r\n  transition: color 0.15s ease, background 0.15s ease;\r\n}\r\n.cv-tab:hover:not(:disabled) { background: var(--cv-surface); }\r\n.cv-tab[aria-selected='true'] { color: var(--cv-accent-strong); }\r\n.cv-tab:disabled { opacity: 0.35; cursor: not-allowed; }\r\n.cv-tab span { font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 0.01em; }\r\n\r\n/* \u2500\u2500 Transfer outcome notices (Phase A \u2014 transfer-outcome-relay.md \xA75.5) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/*\r\n  A persistent, dismissable banner OVER `.cv-body`, never a toast and never auto-dismissed \u2014 it carries\r\n  an action, and WCAG 2.2.1 requires a time limit to be removable, adjustable or extended.\r\n\r\n  Overlaps rather than reserving its own height, the same reasoning `.cv-dial-outcome`'s own comment\r\n  already gives for why the widget never lets a line of text resize the keypad under a moving finger \u2014\r\n  here that principle cuts the other way: appearing costs nothing but a repaint, not a reflow, so the\r\n  widget's overall height stays identical whether a notice is showing or not, exactly like `.cv-detail`\r\n  overlaying `.cv-body`'s own list rather than pushing it down. It sits over whatever the current tab\r\n  happens to be showing (most often the dialer's country picker and number field \u2014 an acceptable loss:\r\n  the agent is not expected to start a fresh manual dial before dealing with a transfer that just failed\r\n  to connect), which is also why it outranks `.cv-detail` in `z-index`.\r\n\r\n  `[data-has-notices='false']` collapses to zero footprint: the element stays mounted (so its\r\n  `role=\"status\"` region exists before the FIRST notice ever arrives \u2014 an aria-live region inserted at\r\n  the same moment as its own content is not reliably announced), but an idle widget, the common case,\r\n  covers nothing and costs no paint either.\r\n*/\r\n.cv-transfer-notices {\r\n  position: absolute;\r\n  inset: 0 0 auto 0;\r\n  z-index: 3; /* above `.cv-detail`'s 2 \u2014 this is the higher-priority thing on screen */\r\n}\r\n.cv-transfer-notices[data-has-notices='true'] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.5rem;\r\n  padding: 0.6rem 0.75rem;\r\n  background: var(--cv-bg);\r\n  box-shadow: var(--cv-shadow);\r\n  animation: cv-transfer-notices-in 200ms var(--cv-ease-out) both;\r\n}\r\n@keyframes cv-transfer-notices-in {\r\n  from { opacity: 0; transform: translateY(-6px); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-transfer-notices[data-has-notices='true'] { animation: none; }\r\n}\r\n.cv-transfer-notices-count {\r\n  margin: 0;\r\n  font: 600 0.72rem var(--cv-font);\r\n  color: var(--cv-muted);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.04em;\r\n}\r\n.cv-transfer-notice {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 0.6rem;\r\n  padding: 0.65rem 0.7rem;\r\n  border-radius: var(--cv-radius-key);\r\n  border: 1px solid var(--cv-danger-soft);\r\n  background: var(--cv-surface);\r\n}\r\n/* Same shape as `.cv-gate-mark`, smaller \u2014 one visual language for \"here is a status\", not two. */\r\n.cv-transfer-notice-mark {\r\n  flex-shrink: 0;\r\n  display: grid;\r\n  place-items: center;\r\n  width: 30px;\r\n  height: 30px;\r\n  border-radius: 999px;\r\n  background: var(--cv-danger-soft);\r\n  color: var(--cv-danger);\r\n}\r\n.cv-transfer-notice-body { flex: 1; min-width: 0; }\r\n/*\r\n  Title shares its row with only the dismiss button (24px) \u2014 not the whole card's width, and not the\r\n  \"Llamar de vuelta\" button, which gets its own row below (`.cv-transfer-notice-footer`). The original\r\n  layout put mark + title + subtitle + a full button all in one flex row, leaving the title as little as\r\n  ~80px to wrap into at the real ~340px embed width \u2014 nearly every word landed on its own line.\r\n  `align-items: flex-start` keeps the dismiss pinned to the first line even when the title wraps to two.\r\n*/\r\n.cv-transfer-notice-header { display: flex; align-items: flex-start; gap: 0.4rem; }\r\n.cv-transfer-notice-title {\r\n  flex: 1;\r\n  min-width: 0;\r\n  margin: 0;\r\n  font: 600 0.82rem var(--cv-font);\r\n  color: var(--cv-text);\r\n  line-height: 1.35;\r\n}\r\n.cv-transfer-notice-subtitle {\r\n  margin: 0.15rem 0 0;\r\n  font-size: 0.78rem;\r\n  color: var(--cv-muted);\r\n  line-height: 1.35;\r\n}\r\n/* Age and the callback button share a row too, same reasoning as the header \u2014 a short fixed-width\r\n   timestamp beside a content-sized button, neither one fighting the title for space above. */\r\n.cv-transfer-notice-footer {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 0.5rem;\r\n  margin-top: 0.35rem;\r\n}\r\n.cv-transfer-notice-age { margin: 0; font-size: 0.7rem; color: var(--cv-faint); flex-shrink: 0; }\r\n/*\r\n  `.cv-btn.cv-transfer-notice-callback` \u2014 TWO classes, not one. Equal-specificity selectors resolve by\r\n  source order, and this rule used to lose its `padding`/`font-size` to the shared `.cv-btn` rule below\r\n  simply because that one appears later in the file; the button rendered at full default CTA size\r\n  instead of this smaller, secondary one, which is what actually forced the title into that ~80px\r\n  column above. The extra class is what makes this override win regardless of source order.\r\n*/\r\n.cv-btn.cv-transfer-notice-callback {\r\n  flex-shrink: 0;\r\n  padding: 0.35rem 0.6rem;\r\n  font-size: 0.75rem;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n  white-space: nowrap;\r\n}\r\n/* Same round icon-only shape as `.cv-search-clear` \u2014 one dismiss affordance, not a new one. */\r\n.cv-transfer-notice-dismiss {\r\n  flex-shrink: 0;\r\n  width: 24px;\r\n  height: 24px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: none;\r\n  border-radius: 999px;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  cursor: pointer;\r\n  transition: color 0.12s ease, background 0.12s ease, transform 0.1s var(--cv-ease-out);\r\n}\r\n.cv-transfer-notice-dismiss:hover { color: var(--cv-text); background: var(--cv-surface-2); }\r\n.cv-transfer-notice-dismiss:active { transform: scale(0.88); }\r\n\r\n/* \u2500\u2500 Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-btn {\r\n  font: 600 0.875rem var(--cv-font);\r\n  cursor: pointer;\r\n  padding: 0.5rem 0.9rem;\r\n  border-radius: 10px;\r\n  border: 1px solid var(--cv-border-strong);\r\n  background: var(--cv-bg);\r\n  color: var(--cv-text);\r\n  transition: background 0.15s ease, transform 0.06s ease;\r\n}\r\n.cv-btn:hover:not(:disabled) { background: var(--cv-surface); }\r\n.cv-btn:active:not(:disabled) { transform: scale(0.97); }\r\n.cv-btn:disabled { opacity: 0.45; cursor: not-allowed; }\r\n.cv-btn--accent {\r\n  background: var(--cv-accent);\r\n  border-color: var(--cv-accent);\r\n  color: var(--cv-accent-contrast);\r\n}\r\n.cv-btn--accent:hover:not(:disabled) { background: var(--cv-accent-strong); }\r\n\r\n/* Round action buttons (answer / hangup / call) */\r\n.cv-round {\r\n  width: 64px;\r\n  height: 64px;\r\n  border-radius: 999px;\r\n  border: none;\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: #fff;\r\n  transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;\r\n}\r\n.cv-round:active:not(:disabled) { transform: scale(0.94); }\r\n.cv-round--answer {\r\n  background: var(--cv-accent);\r\n  box-shadow: 0 8px 20px -4px var(--cv-accent-soft);\r\n}\r\n.cv-round--answer:hover:not(:disabled) { background: var(--cv-accent-strong); }\r\n.cv-round--answer:disabled {\r\n  background: var(--cv-surface-2);\r\n  color: var(--cv-faint);\r\n  box-shadow: none;\r\n  cursor: not-allowed;\r\n}\r\n.cv-round--hangup {\r\n  background: var(--cv-danger);\r\n  box-shadow: 0 8px 20px -4px var(--cv-danger-soft);\r\n}\r\n.cv-round--hangup:hover:not(:disabled) { filter: brightness(0.94); }\r\n\r\n/* \u2500\u2500 Dialpad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/* The prefix chip, on its own row above the number.\r\n   Sharing a line with the number starves it: chip + erase button eat the middle, and a formatted\r\n   international number needs every pixel. The number is the content; the prefix is a setting. */\r\n.cv-dial-prefix {\r\n  flex-shrink: 0;\r\n  display: flex;\r\n  justify-content: center;\r\n  padding: 1rem 1rem 0;\r\n}\r\n.cv-dial-head {\r\n  flex-shrink: 0;\r\n  display: flex;\r\n  align-items: center;\r\n  padding: 0.35rem 1rem 0.75rem;\r\n  gap: 0.25rem;\r\n}\r\n/*\r\n * The outcome of the last attempt, under the number.\r\n *\r\n * ALWAYS in the layout, visible or not. The keypad is `flex: 1` and absorbs whatever height is left,\r\n * so a line that appears and disappears would resize every key and shift the whole grid under the\r\n * user's finger \u2014 mid-dial, which is exactly when this text arrives. Reserving the row costs one line\r\n * of height and buys a keypad that never moves.\r\n */\r\n.cv-dial-outcome {\r\n  flex-shrink: 0;\r\n  margin: 0;\r\n  min-height: 1.15rem;\r\n  padding: 0 1rem;\r\n  text-align: center;\r\n  font-size: 0.78rem;\r\n  line-height: 1.15rem;\r\n  color: var(--cv-muted);\r\n  /*\r\n    One line, always. `error-text.test.ts` caps every outcome at 48 characters so nothing should ever\r\n    reach this \u2014 but a cap depends on whoever writes the next string remembering it, and the failure\r\n    it prevents is not cosmetic: the keypad below is `flex: 1`, so a second line resizes all twelve\r\n    keys and shifts the grid under a finger that is already moving. Truncating is visibly wrong and\r\n    harmless; reflowing the dialpad mid-dial is invisibly wrong and makes the user misdial.\r\n  */\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  /* Muted, not danger: the phone still works. A red line here would read as a broken phone. */\r\n  opacity: 0;\r\n  transition: opacity 150ms ease-out;\r\n}\r\n.cv-dial-outcome[data-shown='true'] {\r\n  opacity: 1;\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-dial-outcome {\r\n    transition: none;\r\n  }\r\n}\r\n\r\n.cv-display {\r\n  flex: 1;\r\n  min-width: 0;\r\n  font: 600 1.75rem var(--cv-font);\r\n  font-variant-numeric: tabular-nums;\r\n  letter-spacing: -0.02em;\r\n  text-align: center;\r\n  color: var(--cv-text);\r\n  border: none;\r\n  background: none;\r\n  padding: 0;\r\n  caret-color: var(--cv-accent);\r\n}\r\n.cv-display::placeholder { color: var(--cv-faint); font-weight: 400; }\r\n.cv-display:focus { outline: none; }\r\n\r\n/* The spacer/erase pair keeps the number optically centred. */\r\n.cv-dial-side {\r\n  width: 36px;\r\n  height: 36px;\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: none;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  cursor: pointer;\r\n  border-radius: 999px;\r\n  transition: color 0.15s ease, opacity 0.15s ease, transform 0.06s ease;\r\n}\r\n.cv-dial-side:hover { color: var(--cv-text); }\r\n.cv-dial-side:active { transform: scale(0.9); }\r\n.cv-dial-side[data-hidden='true'] { opacity: 0; pointer-events: none; }\r\n\r\n/* THE layout fix: the keypad flexes to fill, and its rows share the space equally.\r\n   Keys must NOT use aspect-ratio \u2014 that overflows the shell and shoves the call button\r\n   under the tab bar. */\r\n.cv-keypad {\r\n  flex: 1;\r\n  min-height: 0;\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  grid-template-rows: repeat(4, 1fr);\r\n  gap: 8px;\r\n  padding: 0 1rem;\r\n}\r\n.cv-key {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 1px;\r\n  border-radius: var(--cv-radius-key);\r\n  border: 1px solid var(--cv-border);\r\n  background: var(--cv-bg);\r\n  box-shadow: var(--cv-shadow);\r\n  color: var(--cv-text);\r\n  cursor: pointer;\r\n  user-select: none;\r\n  transition: background 0.12s ease, transform 0.06s ease;\r\n}\r\n.cv-key:hover { background: var(--cv-surface); }\r\n.cv-key:active { transform: scale(0.95); background: var(--cv-surface-2); }\r\n.cv-key b { font: 500 1.25rem/1 var(--cv-font); }\r\n.cv-key small {\r\n  font-size: 9px;\r\n  font-weight: 600;\r\n  letter-spacing: 0.14em;\r\n  /* Decorative: the letters carry no information the digit doesn't. `faint`, not `muted`. */\r\n  color: var(--cv-faint);\r\n  line-height: 1;\r\n}\r\n\r\n.cv-dial-foot {\r\n  flex-shrink: 0;\r\n  display: flex;\r\n  justify-content: center;\r\n  padding: 0.75rem 0 1rem;\r\n}\r\n\r\n/* \u2500\u2500 Active call \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-call {\r\n  flex: 1;\r\n  min-height: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 0.15rem;\r\n  text-align: center;\r\n  padding: 1rem;\r\n  /*\r\n    A REAL bug, found live (plan T7): the transfer picker's agent list can make this box's content\r\n    taller than the space `flex: 1` actually allocates it \u2014 the avatar/name/timer/status ABOVE the\r\n    picker are still shown while transferring, unlike `.cv-call-devices-inline`'s own \"swap the\r\n    content\" fix for the pre-connect devices screen. Without this, the overflow painted straight past\r\n    `.cv-call`'s own shrunk box and onto `.cv-controls` below it \u2014 not scroll, actual overlap, controls\r\n    rendered ON TOP of list rows. `overflow-y: auto` keeps any excess inside THIS box, scrollable,\r\n    exactly like `.cv-presence-list`'s own internal scroll already does for the list itself.\r\n  */\r\n  overflow-y: auto;\r\n}\r\n\r\n.cv-avatar-wrap { position: relative; margin-bottom: 0.85rem; }\r\n.cv-avatar {\r\n  position: relative;\r\n  width: 68px;\r\n  height: 68px;\r\n  border-radius: 999px;\r\n  /* accent \u2192 accent-strong (emerald 600\u2192700): white initials clear 3.77:1 at EVERY stop. Starting\r\n     the ramp at emerald-500 would look punchier but drop the light end to 2.54:1. */\r\n  background: linear-gradient(135deg, var(--cv-accent) 0%, var(--cv-accent-strong) 100%);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: #fff;\r\n  font: 700 1.3rem var(--cv-font);\r\n  letter-spacing: -0.01em;\r\n  box-shadow: 0 8px 20px -6px var(--cv-accent-soft);\r\n}\r\n/* A soft halo while ringing \u2014 the one moment worth animating. */\r\n.cv-avatar-ping {\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: 999px;\r\n  /* Decorative \u2014 nothing sits on it, so it uses the vivid emerald. */\r\n  background: var(--cv-accent-light);\r\n  opacity: 0.16;\r\n  animation: cv-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;\r\n  pointer-events: none;\r\n}\r\n@keyframes cv-ping {\r\n  0% { transform: scale(1); opacity: 0.22; }\r\n  80%, 100% { transform: scale(1.7); opacity: 0; }\r\n}\r\n.cv-avatar-dot {\r\n  position: absolute;\r\n  bottom: 1px;\r\n  right: 1px;\r\n  width: 14px;\r\n  height: 14px;\r\n  border-radius: 999px;\r\n  background: var(--cv-accent);\r\n  border: 2px solid var(--cv-bg);\r\n}\r\n\r\n.cv-call-name { font-size: 1rem; font-weight: 600; line-height: 1.2; }\r\n.cv-call-number { font-size: 0.75rem; color: var(--cv-muted); margin-top: 2px; }\r\n\r\n.cv-timer {\r\n  display: flex;\r\n  align-items: baseline;\r\n  justify-content: center;\r\n  gap: 1px;\r\n  margin-top: 0.75rem;\r\n  color: var(--cv-accent-strong);\r\n}\r\n.cv-timer b {\r\n  font: 700 2.25rem/1 var(--cv-font);\r\n  font-variant-numeric: tabular-nums;\r\n  letter-spacing: -0.03em;\r\n}\r\n.cv-timer i {\r\n  font: 300 1.75rem/1 var(--cv-font);\r\n  font-style: normal;\r\n  color: var(--cv-accent);\r\n  animation: cv-blink 1.6s ease-in-out infinite;\r\n  margin: 0 1px;\r\n}\r\n@keyframes cv-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }\r\n\r\n.cv-call-status {\r\n  margin-top: 0.6rem;\r\n  font-size: 0.78rem;\r\n  color: var(--cv-muted);\r\n  letter-spacing: 0.04em;\r\n}\r\n.cv-badge-hold { color: var(--cv-hold); font-weight: 600; }\r\n\r\n/* \u2500\u2500 Device check (ringing / dialing / in-call) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   Before a call connects there is only ONE other control on screen (Colgar, or\r\n   Rechazar/Contestar) \u2014 putting Dispositivos in that same neighbourhood, even\r\n   spaced out, keeps it a mis-tap away from hanging up or answering. The entry\r\n   chip lives beside the call status instead, removing it from that neighbourhood\r\n   rather than just adding distance within it \u2014 same resting-pill SHAPE as `.cv-cp`\r\n   (CountryPicker), reused rather than invented fresh.\r\n\r\n   Opening it does NOT pop a panel into that same tight space, though \u2014 this\r\n   SDK's real production embed (a 310\xD7520 host panel with its own header eating\r\n   further into that) leaves too little free room around a trigger sitting in\r\n   vertically-centred content for a floating popover to open into without either\r\n   overlapping Colgar/Rechazar/Contestar or clamping itself down to something\r\n   cramped and scrolly for just two rows. `.cv-call-devices-inline` REPLACES the\r\n   avatar/name/status block in `.cv-call` instead (see that JSX's own comment) \u2014\r\n   an inline swap, not an overlay, so it gets the full box, not a leftover sliver.\r\n\r\n   Once connected it is the SAME chip and the SAME swap. Dispositivos used to be a fifth control in\r\n   the call row (with a floating popover), which is what forced that row down to 40px buttons and\r\n   9px labels in a 310px host. A set-once setting does not need a slot among the four things you do\r\n   mid-call (mute, hold, transfer, keypad), and the control row stays live under the swap.\r\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-call-devices-chip {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.35rem;\r\n  height: 26px;\r\n  padding: 0 0.65rem;\r\n  border: 1px solid var(--cv-border-strong);\r\n  border-radius: 999px;\r\n  background: var(--cv-bg);\r\n  color: var(--cv-muted);\r\n  font: 600 0.7rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;\r\n}\r\n.cv-call-devices-chip:hover { background: var(--cv-surface); }\r\n.cv-call-devices-chip:active { transform: scale(0.95); }\r\n\r\n/*\r\n  The entry-point row \u2014 ONE chip today (Dispositivos), up to two once a host configures\r\n  `incomingCallAction` (that one first: who is calling outranks a phone-utility setting). `width:\r\n  100%` + `flex-wrap` on purpose: a host's action label is arbitrary text this component cannot\r\n  assume is short, so two chips sit side by side when they fit and wrap onto their own centred line\r\n  when they do not, rather than overflowing `.cv-call`'s fixed width.\r\n*/\r\n.cv-call-chips {\r\n  width: 100%;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: center;\r\n  gap: 0.5rem;\r\n  margin-top: 0.65rem;\r\n}\r\n\r\n.cv-call-devices-inline {\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.9rem;\r\n  /* `.cv-call` centres and centre-aligns its normal (avatar) content \u2014 rows read left-aligned\r\n     everywhere else in the widget (Ajustes, the in-call popover), so this opts back out of both. */\r\n  text-align: left;\r\n  animation: cv-call-devices-in 0.18s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n@keyframes cv-call-devices-in {\r\n  from { opacity: 0; transform: translateY(6px); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-call-devices-inline { animation: none; }\r\n}\r\n.cv-call-devices-header { display: flex; align-items: center; gap: 0.5rem; }\r\n.cv-call-devices-title { font-size: 0.95rem; font-weight: 600; color: var(--cv-text); }\r\n/* `--cv-muted` on `--cv-bg` \u2014 the same already-verified pairing `.cv-settings-note` uses\r\n   (4.83:1 light / 6.97:1 dark), not a new one. */\r\n.cv-call-devices-context {\r\n  margin: 0;\r\n  font-size: 0.78rem;\r\n  color: var(--cv-muted);\r\n}\r\n\r\n/* \u2500\u2500 Call controls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   TWO TIERS. Hang up is the one action that must never be hunted for, so it sits\r\n   alone, centred, and largest \u2014 the anchor. The secondaries flank above it. They\r\n   used to share a single row, where hang up was just the last button and carried\r\n   the same weight as \"transfer\"; mid-call, that is the wrong hierarchy.\r\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-controls {\r\n  flex-shrink: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 0.9rem;\r\n  padding: 0.35rem 1rem 1.1rem;\r\n  /* The containing block for `.cv-keypad-popover` \u2014 see that rule's own comment for why it is\r\n     anchored here rather than to the trigger button. */\r\n  position: relative;\r\n}\r\n/* FOUR controls, sized so they never need to shrink to fit. This row held five (Dispositivos too) and\r\n   the only way to fit five in the CRM's 310px host was a 40px button with a 9px label and ~6px gaps \u2014\r\n   below the 44/48px a thumb needs, and below legible for a word read mid-call. The default 48px size\r\n   below was never actually seen: it only applied above a 360px host, which no real embed is.\r\n   Dispositivos is the `.cv-call-chips` chip up by the call info instead (the same entry point the\r\n   ringing and dialing screens already use). 4 \xD7 52 + 3 \xD7 20 = 268px, inside 310 - 2 \xD7 16 padding. */\r\n.cv-controls-row {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 1.25rem;\r\n}\r\n.cv-controls-primary {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 2.75rem;\r\n}\r\n/* Button + its word. The column keeps the label from widening the hit target. */\r\n.cv-ctrl-item {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n}\r\n/* 10px, muted: present when you look for it, silent when you don't. An icon-only\r\n   control is a quiz, and mid-call is the worst time to sit one. */\r\n.cv-ctrl-label {\r\n  font-size: 0.625rem;\r\n  line-height: 1;\r\n  color: var(--cv-muted);\r\n  white-space: nowrap;\r\n  user-select: none;\r\n}\r\n/* The four secondaries' words get a notch more than Colgar / Rechazar / Contestar's 10px \u2014 they are\r\n   the ones read mid-call, and the five-up row used to shrink them to 9px (8px in a sidebar). */\r\n.cv-controls-row .cv-ctrl-label { font-size: 0.6875rem; }\r\n.cv-ctrl {\r\n  width: 52px;\r\n  height: 52px;\r\n  border-radius: 999px;\r\n  border: 1px solid var(--cv-border-strong);\r\n  background: var(--cv-bg);\r\n  color: var(--cv-text);\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: background 0.15s ease, color 0.15s ease, transform 0.06s ease;\r\n}\r\n.cv-ctrl:hover { background: var(--cv-surface); }\r\n.cv-ctrl:active { transform: scale(0.94); }\r\n.cv-ctrl:disabled {\r\n  opacity: 0.4;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n/* The ON states say what they MEAN, in the widget's own tokens: muted is danger,\r\n   held is hold, transfer-open is accent. Colour is the state, not decoration. */\r\n.cv-ctrl[data-tone='danger'] {\r\n  background: var(--cv-danger);\r\n  border-color: var(--cv-danger);\r\n  color: #fff;\r\n}\r\n.cv-ctrl[data-tone='hold'] {\r\n  background: var(--cv-hold);\r\n  border-color: var(--cv-hold);\r\n  color: #fff;\r\n}\r\n.cv-ctrl[data-tone='accent'] {\r\n  background: var(--cv-accent-soft);\r\n  border-color: transparent;\r\n  color: var(--cv-accent-strong);\r\n}\r\n.cv-ctrl[data-tone]:hover { filter: brightness(0.95); }\r\n\r\n/* Muted is the one state worth animating: it is invisible, it is easy to forget,\r\n   and the cost of forgetting is talking to nobody. Same halo the avatar rings\r\n   with \u2014 one language, not two. */\r\n.cv-ctrl[data-tone='danger'] {\r\n  position: relative;\r\n}\r\n.cv-ctrl[data-tone='danger']::after {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: 999px;\r\n  background: var(--cv-danger);\r\n  animation: cv-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;\r\n  pointer-events: none;\r\n  z-index: -1;\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-ctrl[data-tone='danger']::after { animation: none; opacity: 0; }\r\n}\r\n.cv-ctrl[aria-pressed='true'] {\r\n  background: var(--cv-text);\r\n  color: var(--cv-bg);\r\n  border-color: var(--cv-text);\r\n}\r\n\r\n/*\r\n  Sidebar-narrow (this file's own \u2264300px tier, up in \"Narrow hosts\"). The four 52px controls with\r\n  20px gaps need 268px, which a 260px host cannot give \u2014 so this tier steps down to 44px with 12px\r\n  gaps (4 \xD7 44 + 3 \xD7 12 = 212px) and reclaims `.cv-controls`'s own horizontal padding, the first\r\n  lever that block's own comment names. 44px is still the Apple HIG minimum tap target; the five-up\r\n  row this replaced went to 36px here.\r\n\r\n  Placed AFTER `.cv-controls`/`.cv-controls-row` above rather than up with this file's other\r\n  `@container` blocks near the top: `gap` and `padding-left`/`-right` here have the same specificity as\r\n  those base rules' own shorthand, so \u2014 unlike a compound selector such as `.cv-controls-row .cv-ctrl`,\r\n  which wins on specificity regardless of position \u2014 source order is what decides, and a narrower-width\r\n  override declared BEFORE the base rule it means to narrow loses to it. Confirmed live: moved up into\r\n  the \"Narrow hosts\" section, the `.cv-ctrl` width and label font-size reductions took effect (compound\r\n  selectors) but `gap` and `.cv-controls`'s padding silently did not (plain selectors, later base rule won).\r\n*/\r\n@container cv (max-width: 300px) {\r\n  .cv-controls { padding-left: 0.5rem; padding-right: 0.5rem; }\r\n  .cv-controls-row { gap: 0.75rem; }\r\n  .cv-controls-row .cv-ctrl { width: 44px; height: 44px; }\r\n  .cv-controls-row .cv-ctrl-label { font-size: 0.625rem; }\r\n}\r\n\r\n/*\r\n  The attended-transfer target-entry panel (`docs/specs/transfer-availability.md` \xA75): an optional\r\n  outcome line, then a row of whatever's actionable (input+button today). Once a consult exists,\r\n  `ConsultScreen` takes over the whole screen instead \u2014 this panel is ONLY ever the pre-consult /\r\n  retry-after-failure state now; it used to also cover the consulting/answered phases, which is why\r\n  its rule is a column container built for more than one child even though there's only ever one row\r\n  here today. (History: was two near-duplicate rules \u2014 `.cv-transfer` as a bare ROW,\r\n  `.cv-transfer-consult` as a column \u2014 until the row version turned out to be a real,\r\n  reproduced-in-browser bug: the optional `.cv-dial-outcome` message rendered as a THIRD item in the\r\n  same horizontal row as the input and button, squeezing the input to its content-minimum. Merged\r\n  rather than patched.)\r\n*/\r\n.cv-transfer {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.3rem;\r\n  width: 100%;\r\n  padding: 0.2rem 0.25rem 0;\r\n  /* `.cv-call` centres and centre-aligns its normal (avatar) content \u2014 same reasoning\r\n     `.cv-call-devices-inline` already opts out of for the OTHER inline swap in this box (its own\r\n     comment): rows read left-aligned everywhere else in the widget, and a centred context line\r\n     sitting directly above a left-aligned input/toggle/list read as two layouts stacked on top of\r\n     each other, found live (2026-09-29). */\r\n  text-align: left;\r\n  /* Found live (2026-09-29): `.cv-call`'s avatar/name/timer block used to sit ABOVE this,\r\n     unconditionally, so this panel only ever got whatever was left over \u2014 see the JSX call site's own\r\n     comment. Now that this IS the whole of `.cv-call`'s content while a transfer is in progress\r\n     (a swap, not an addition), it should CLAIM `.cv-call`'s available height, not just sit in it \u2014\r\n     `flex: 1` does that; `min-height: 0` is what lets a flex child actually shrink to fit instead of\r\n     forcing its parent to grow past it (the same reason `.cv-call`/`.cv-view`/`.cv-body` all set it,\r\n     see their own comments). This is what lets `.cv-presence-list` below flex-grow into real room\r\n     instead of needing its own hand-tuned `max-height` guess. */\r\n  flex: 1;\r\n  min-height: 0;\r\n  /* Same entrance `.cv-call-devices-inline` already uses for the analogous inline swap (its own\r\n     comment) \u2014 reused, not a second animation invented for this widget's second inline-swap view. */\r\n  animation: cv-call-devices-in 0.18s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-transfer { animation: none; }\r\n}\r\n/* The compact \"who am I still on the phone with\" line while the picker is open \u2014 reuses\r\n   `.cv-call-devices-inline`'s own two classes verbatim (`.cv-call-devices-title` for the name,\r\n   `.cv-call-devices-context` for the number/timer line) rather than inventing a second \"quiet header\"\r\n   style for the same widget; only the tiny stacking gap between them is new.\r\n\r\n   Found live (2026-09-29): `.cv-transfer`'s own `gap` alone gave every section \u2014 context, input row,\r\n   mode toggle, results list \u2014 the exact same spacing, so nothing read as its own group; the eye had\r\n   no cue for where \"who I'm on the phone with\" ends and \"pick a transfer target\" begins. This extra\r\n   `margin-bottom`, on top of the base `gap`, is that cue \u2014 the toggle stays close to the list it\r\n   controls (unchanged), only the boundary above the interactive controls opened up. */\r\n.cv-transfer-context {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  flex-shrink: 0;\r\n  margin-bottom: 0.35rem;\r\n}\r\n/* Plan T3: the mode toggle reuses `.cv-segmented` (HistoryTab's own filter control) as-is, but its\r\n   `margin-bottom` (needed THERE, where the surrounding layout has no gap of its own) is redundant\r\n   here \u2014 `.cv-transfer`'s own `gap` above already spaces every child, so the two would stack. Scoped\r\n   to this context only; HistoryTab's own copy is untouched. */\r\n.cv-transfer .cv-segmented { margin-bottom: 0; flex-shrink: 0; }\r\n.cv-transfer .cv-presence-legend { flex-shrink: 0; }\r\n/* Same treatment as `.cv-call-status` (the avatar's own \"Llamando\u2026\"/\"En espera\" line) \u2014 one muted\r\n   status-line vocabulary for the whole call screen, not a second one invented for this panel. */\r\n.cv-transfer-status {\r\n  margin: 0;\r\n  font-size: 0.78rem;\r\n  color: var(--cv-muted);\r\n  letter-spacing: 0.04em;\r\n}\r\n/* The target-entry/retry row: an input plus one button. */\r\n.cv-transfer-row {\r\n  display: flex;\r\n  gap: 0.5rem;\r\n}\r\n/*\r\n  Flex items default to `min-width: auto`, which floors them at their CONTENT size rather than letting\r\n  them shrink or grow to fill the row \u2014 `.cv-search`'s own `width: 100%` never actually took effect\r\n  here, because `.cv-btn`'s text (\"Llamar\") set an unshrinkable floor and the input, having no\r\n  `flex-grow`, never reclaimed the space left over. `flex: 1` + `min-width: 0` is what actually makes\r\n  an input-plus-button row behave like one; `flex: none` keeps the button at its natural size.\r\n*/\r\n.cv-transfer-row .cv-search {\r\n  flex: 1;\r\n  min-width: 0;\r\n}\r\n/* `max-width` + ellipsis: the label now includes whatever was typed (\"Llamar a {typed}\", spec \xA74.5)\r\n   and `truncateForButton` already bounds that in JS \u2014 this is the CSS backstop, so a value that\r\n   slips past it (a very wide character set, a future copy change) still can't push `.cv-search` down\r\n   to an unusable sliver the way the pre-truncation button did before this was noticed. */\r\n.cv-transfer-row .cv-btn {\r\n  flex: none;\r\n  max-width: 60%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n/* The consult-answered row: one or two buttons, no input. */\r\n.cv-transfer-actions {\r\n  display: flex;\r\n  gap: 0.5rem;\r\n}\r\n.cv-transfer-actions .cv-btn {\r\n  flex: 1;\r\n}\r\n/* The ringing phase has only \"Cancelar\" \u2014 a secondary, low-stakes action. Letting the row's own\r\n   `flex: 1` stretch a LONE button edge to edge reads as oversized for what it is, and nothing else in\r\n   this widget sizes a single button to the full row; every other `.cv-btn` sizes to its content. */\r\n.cv-transfer-actions .cv-btn:only-child {\r\n  flex: none;\r\n}\r\n\r\n/*\r\n  The agent picker (spec \xA74.5, plan T7) \u2014 an inline, always-visible filtered list under the\r\n  input+button row, not a click-to-open popover like `.cv-person-filter-pop`: the whole point is that\r\n  typing already filters it, so hiding it behind a second interaction would undo that.\r\n\r\n  Redesigned live (2026-09-29): T7 (72px) and T3 (30px) both hand-tuned a `max-height` in PIXELS\r\n  against whatever else happened to be on screen at the time, and both were broken by the very next\r\n  addition above the list (T3's own toggle broke T7's number the same way this would keep breaking on\r\n  the next change) \u2014 down to \"barely proves the list is scrollable\" at 30px, which is what the user\r\n  was actually seeing: \"users cannot almost see any of the listed users.\" The real fix wasn't a bigger\r\n  magic number, it was `.cv-transfer`'s own move to `flex: 1` (see its comment) freeing real height\r\n  from the block that used to sit above this whole panel \u2014 `.cv-presence` and this list now flex-grow\r\n  into whatever's ACTUALLY left after the context line, input row, toggle and legend take their own\r\n  natural size, on whatever real height the host panel gives `.cv-call` (this SDK's fixed ~310\xD7520\r\n  embed today, but also whatever a different host gives it tomorrow \u2014 no more re-tuning a constant\r\n  every time something above the list changes). `.cv-call`'s own `overflow-y: auto` (its own comment)\r\n  is still the last-resort net if content ever genuinely doesn't fit; this just means that net should\r\n  now rarely, if ever, have to catch anything for a normal agent list.\r\n*/\r\n.cv-presence {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.35rem;\r\n  flex: 1;\r\n  min-height: 0;\r\n}\r\n.cv-presence-list {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  flex: 1;\r\n  min-height: 0;\r\n  overflow-y: auto;\r\n  padding: 0.25rem;\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: var(--cv-radius-key);\r\n  background: var(--cv-surface);\r\n}\r\n.cv-presence-empty {\r\n  margin: 0;\r\n  padding: 0.5rem;\r\n  text-align: center;\r\n  font-size: 0.78rem;\r\n  color: var(--cv-muted);\r\n}\r\n.cv-presence-item {\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  padding: 0.4rem 0.5rem;\r\n  border: none;\r\n  border-radius: calc(var(--cv-radius) - 4px);\r\n  background: none;\r\n  color: var(--cv-text);\r\n  font: 400 0.8rem var(--cv-font);\r\n  text-align: left;\r\n  cursor: pointer;\r\n}\r\n.cv-presence-item:hover:not(:disabled) { background: var(--cv-surface-2); }\r\n/* En llamada rows are a hard block, not just a hint (CallScreen.tsx's own comment on the row has why)\r\n   \u2014 same `:disabled` treatment `.cv-btn`/`.cv-tab` already use elsewhere in this file, not a new pattern. */\r\n.cv-presence-item:disabled { opacity: 0.45; cursor: not-allowed; }\r\n.cv-presence-dot {\r\n  flex-shrink: 0;\r\n  width: 8px;\r\n  height: 8px;\r\n  border-radius: 999px;\r\n}\r\n/* Reuses existing intent tokens rather than inventing new ones \u2014 `--cv-accent` already means\r\n   \"good, reachable\" (the answer button), `--cv-hold` already means \"occupied elsewhere\" (the hold\r\n   toggle), and `--cv-faint` is this file's own DECORATIVE-only tier (see the `--cv-*` legend near the\r\n   top) \u2014 exactly what \"no signal for this person\" is, no signal being the whole point of that tier. */\r\n.cv-presence-dot[data-state='disponible'] { background: var(--cv-accent); }\r\n.cv-presence-dot[data-state='en_llamada'] { background: var(--cv-hold); }\r\n.cv-presence-dot[data-state='desconectado'] { background: var(--cv-faint); }\r\n.cv-presence-name {\r\n  flex: 1;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n.cv-presence-meta {\r\n  flex-shrink: 0;\r\n  font-size: 0.72rem;\r\n  color: var(--cv-muted);\r\n}\r\n/* Spec \xA74.6: Desconectado is a HINT, never \"can't transfer\" \u2014 this is what tells the agent so, right\r\n   under the list it describes. `--cv-muted`, NOT `--cv-faint`: this text is informational (the reader\r\n   needs it to not misread the state), and `--cv-faint` is reserved for decorative-only content that\r\n   fails AA on purpose \u2014 using it here would repeat the exact tier mistake this file's own `--cv-*`\r\n   comment block warns against. */\r\n.cv-presence-legend {\r\n  margin: 0;\r\n  font-size: 0.7rem;\r\n  color: var(--cv-muted);\r\n  line-height: 1.35;\r\n}\r\n\r\n/*\r\n  `ConsultScreen`'s \"someone is still waiting\" banner (`docs/specs/transfer-availability.md` \xA75, the\r\n  cross-talk fix) \u2014 full-width and tappable, not a passive status line, because the entire reason this\r\n  screen exists is to make \"go back to the caller\" impossible to miss. Neutral surface + the same\r\n  `--cv-hold` colour `.cv-badge-hold` already uses for the same fact elsewhere, not a new soft-fill\r\n  token: a text/icon tint on a plain surface is already proven legible here, and inventing an\r\n  unmeasured background-tint pairing risks a real contrast regression this file takes seriously\r\n  elsewhere (see the `-soft`/`-strong` split's own comments).\r\n*/\r\n.cv-consult-hold-banner {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 0.4rem;\r\n  width: 100%;\r\n  padding: 0.5rem 0.75rem;\r\n  border-radius: 999px;\r\n  border: 1px solid var(--cv-border);\r\n  background: var(--cv-surface);\r\n  color: var(--cv-hold);\r\n  font: 600 0.78rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: background 0.15s ease, border-color 0.15s ease;\r\n}\r\n.cv-consult-hold-banner:hover {\r\n  background: var(--cv-surface-2);\r\n  border-color: var(--cv-hold);\r\n}\r\n.cv-consult-hold-banner:active {\r\n  transform: scale(0.98);\r\n}\r\n\r\n@keyframes cv-pop-in-up {\r\n  from { opacity: 0; transform: translateY(4px) scale(0.97); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n\r\n/*\r\n  The in-call DTMF keypad \u2014 the one floating popover left on the call screen. (Dispositivos was the\r\n  other; it is inline content now, `.cv-call-devices-inline` above, in every call state.)\r\n\r\n  Opens UPWARD (`bottom: 100%`): the trigger sits at the bottom of the call screen, and there is no\r\n  room to open downward. Anchored to `.cv-controls`'s own horizontal padding \u2014 a container whose width\r\n  is bounded by ITS parent, never the narrow trigger itself \u2014 the same fix CountryPicker's own popover\r\n  needed (see its comment): anchoring to a narrow, off-centre trigger let the popover's edge reach\r\n  `.cv-softphone`'s `overflow: hidden` and get clipped.\r\n*/\r\n.cv-keypad-popover {\r\n  position: absolute;\r\n  z-index: 20;\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 8px;\r\n  padding: 0.85rem 1rem;\r\n  background: var(--cv-surface);\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: var(--cv-radius);\r\n  box-shadow: var(--cv-shadow);\r\n}\r\n.cv-keypad-popover--above {\r\n  bottom: 100%;\r\n  left: 1rem;\r\n  right: 1rem;\r\n  margin-bottom: 0.6rem;\r\n  transform-origin: bottom center;\r\n  animation: cv-pop-in-up 0.14s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n/* `.cv-key` already carries the full key look (border, hover, active-scale, digit/letter type) from\r\n   the pre-call dialer \u2014 only the size needs setting here, since this grid has no flex ancestor to\r\n   stretch the rows the way `.cv-keypad` gets to.\r\n\r\n   A fixed HEIGHT, not an `aspect-ratio`. This popover opens upward from `.cv-controls`, so it has\r\n   (host height - controls block - margin) to work with, and a ratio ties its height to the host's\r\n   WIDTH, which says nothing about how much height there is. Found live: the CRM's real body is 310\xD7473\r\n   (a 520px panel minus its 45px header), and a 1.3 ratio made this popover 285px \u2014 with the 184px\r\n   controls block that is 479px, so its top ~7px were clipped by `.cv-softphone`'s `overflow: hidden`.\r\n   48px keys give a 243px popover at ANY width, fit that host with room to spare, and stay at the\r\n   44-48px minimum tap target (the old ratio gave 45px keys at a 260px host, 58px at 310). */\r\n.cv-keypad-popover .cv-key {\r\n  height: 48px;\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-keypad-popover--above { animation: none; }\r\n}\r\n\r\n/* \u2500\u2500 Lists (contacts / history) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-list-head { flex-shrink: 0; padding: 0.85rem 1rem 0.5rem; }\r\n.cv-search {\r\n  width: 100%;\r\n  padding: 0.5rem 0.75rem;\r\n  border-radius: 10px;\r\n  border: 1px solid var(--cv-border-strong);\r\n  background: var(--cv-surface);\r\n  color: var(--cv-text);\r\n  font: inherit;\r\n  transition: border-color 0.15s ease, background 0.15s ease;\r\n  /* Found live (2026-09-29): in the transfer row specifically, `.cv-btn`'s own `max-width: 60%`\r\n     (needed for the dynamic \"Llamar a {typed}\" label) can leave the input narrower than its\r\n     placeholder text \u2014 an `<input>` has no native ellipsis, so it hard-clipped mid-word\r\n     (\"...o n\xFAm\") instead of trailing off cleanly. A real, if rare, risk for ANY `.cv-search` usage\r\n     wherever it's squeezed, not just this one row \u2014 the fix belongs on the base rule. */\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n.cv-search::placeholder { color: var(--cv-muted); }\r\n.cv-search:focus { outline: none; border-color: var(--cv-accent); background: var(--cv-bg); }\r\n\r\n/*\r\n  A wrapper around `.cv-search`, not a change to it \u2014 that class is also the transfer-target input\r\n  in CallScreen, which wants neither an icon nor a clear button. `.cv-search--icon` is an ADDITIVE\r\n  modifier on the input itself (padding only), so the base class is byte-for-byte what it was for\r\n  every other consumer.\r\n*/\r\n.cv-search-field { position: relative; display: flex; align-items: center; }\r\n.cv-search--icon { padding-left: 2.15rem; padding-right: 1.85rem; }\r\n.cv-search-icon {\r\n  position: absolute;\r\n  left: 0.75rem;\r\n  color: var(--cv-muted);\r\n  pointer-events: none;\r\n}\r\n.cv-search-clear {\r\n  position: absolute;\r\n  right: 0.5rem;\r\n  width: 22px;\r\n  height: 22px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: none;\r\n  border-radius: 999px;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  cursor: pointer;\r\n  transition: color 0.12s ease, transform 0.1s var(--cv-ease-out);\r\n}\r\n.cv-search-clear:hover { color: var(--cv-text); }\r\n.cv-search-clear:active { transform: scale(0.88); }\r\n\r\n/* \u2500\u2500 Historial filters: status (Todas/Perdidas) + person \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-segmented {\r\n  display: flex;\r\n  gap: 2px;\r\n  padding: 2px;\r\n  border-radius: 10px;\r\n  background: var(--cv-surface-2);\r\n  margin-bottom: 0.4rem;\r\n}\r\n.cv-segmented-btn {\r\n  flex: 1;\r\n  padding: 0.35rem 0;\r\n  border: none;\r\n  border-radius: 8px;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  font: 600 0.75rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;\r\n}\r\n/* The active segment is stated by its own fill + shadow, not colour alone \u2014 the same reasoning\r\n   `.cv-item-action[data-tone='accent']`'s own comment gives for resting-state colour: a state that\r\n   only differs by hue must still read on a screen that renders neither. */\r\n.cv-segmented-btn[aria-selected='true'] {\r\n  background: var(--cv-bg);\r\n  color: var(--cv-text);\r\n  box-shadow: var(--cv-shadow);\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-segmented-btn { transition: none; }\r\n}\r\n\r\n/* The person filter \u2014 same combobox SHAPE as `.cv-cp-*` (CountryPicker): a chip opening a positioned\r\n   popover list with a checkmark on the active row. Not the same CLASSES: the two pickers have nothing\r\n   to do with each other and sharing a namespace would make a future change to one silently reach the\r\n   other. */\r\n.cv-person-filter { position: relative; width: 100%; }\r\n.cv-person-filter-chip {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.4rem;\r\n  width: 100%;\r\n  padding: 0.4rem 0.65rem;\r\n  border: 1px solid var(--cv-border-strong);\r\n  border-radius: 10px;\r\n  background: var(--cv-surface);\r\n  color: var(--cv-muted);\r\n  font: 500 0.78rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: background 0.15s ease, border-color 0.15s ease;\r\n}\r\n.cv-person-filter-chip:hover { background: var(--cv-surface-2); }\r\n/*\r\n  Border only, no fill \u2014 the popover opening and the caret rotating already say \"this is open\";\r\n  painting the whole width of a wide text pill solid green on top of that was the same over-strong\r\n  green the selected row had (see its own comment below). A coloured border is the same restrained\r\n  signal `.cv-search:focus` already uses for \"active\" elsewhere in this file.\r\n*/\r\n.cv-person-filter-chip[aria-expanded='true'] {\r\n  border-color: var(--cv-accent);\r\n}\r\n.cv-person-filter-label {\r\n  flex: 1;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  text-align: left;\r\n  color: var(--cv-text);\r\n}\r\n.cv-person-filter-caret {\r\n  flex-shrink: 0;\r\n  transition: transform 0.18s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n.cv-person-filter-caret[data-open='true'] { transform: rotate(180deg); }\r\n.cv-person-filter-pop {\r\n  position: absolute;\r\n  top: calc(100% + 6px);\r\n  left: 0;\r\n  right: 0;\r\n  z-index: 20;\r\n  max-height: 220px;\r\n  overflow-y: auto;\r\n  padding: 0.25rem;\r\n  background: var(--cv-surface);\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: var(--cv-radius);\r\n  box-shadow: var(--cv-shadow);\r\n  transform-origin: top center;\r\n  animation: cv-cp-in 0.14s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-person-filter-pop { animation: none; }\r\n  .cv-person-filter-caret { transition: none; }\r\n}\r\n.cv-person-filter-item {\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  padding: 0.45rem 0.5rem;\r\n  border: none;\r\n  border-radius: calc(var(--cv-radius) - 4px);\r\n  background: none;\r\n  color: var(--cv-text);\r\n  font: 400 0.8rem var(--cv-font);\r\n  text-align: left;\r\n  cursor: pointer;\r\n}\r\n.cv-person-filter-item:hover { background: var(--cv-surface-2); }\r\n/*\r\n  NOT a solid `--cv-accent-soft` fill \u2014 that read as a wall of saturated green across a wide row,\r\n  much louder than the legacy CRM's own treatment for this exact list (`bg-emerald-50` \u2014 a barely-\r\n  there wash \u2014 plus coloured text, never a strong fill). Coloured, bold text + the checkmark carry\r\n  \"selected\" instead; `--cv-accent-strong` is already verified elsewhere in this file as AA against\r\n  `--cv-surface`, which is what this popover sits on.\r\n*/\r\n.cv-person-filter-item[aria-selected='true'] .cv-person-filter-name {\r\n  font-weight: 600;\r\n  color: var(--cv-accent-strong);\r\n}\r\n.cv-person-filter-name {\r\n  flex: 1;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n.cv-person-filter-check { color: var(--cv-accent-strong); flex-shrink: 0; }\r\n.cv-person-filter-check[data-on='false'] { opacity: 0; }\r\n\r\n.cv-list {\r\n  flex: 1;\r\n  min-height: 0;\r\n  overflow-y: auto;\r\n  padding: 0 0.5rem 0.5rem;\r\n}\r\n/*\r\n  Historial's day group header. Sticky within `.cv-list` (its nearest scrolling ancestor \u2014 a plain\r\n  wrapper div between the two does not break that), OPAQUE `--cv-bg` rather than a translucent\r\n  `/85 + backdrop-blur` treatment: it still needs to fully occlude rows scrolling underneath it, and\r\n  a flat match to the list's own background does that with no new CSS feature this file doesn't\r\n  already use elsewhere.\r\n*/\r\n.cv-history-day {\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 1;\r\n  padding: 0.5rem 0.6rem 0.35rem;\r\n  background: var(--cv-bg);\r\n  color: var(--cv-muted);\r\n  font-size: 0.68rem;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.04em;\r\n}\r\n.cv-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.7rem;\r\n  padding: 0.5rem;\r\n  border-radius: 12px;\r\n  /*\r\n    NOT `cursor: pointer` \u2014 this div has no click handler of its own; only its children\r\n    (`.cv-item-main`, `.cv-item-action`) do, and each already sets its own pointer cursor. Putting\r\n    it here too used to make the WHOLE row's box promise a click \u2014 its own padding, and the flex\r\n    `gap` between avatar/name/button \u2014 none of which does anything when clicked. Most noticeable\r\n    right where one row's padding meets the next, which reads as \"there's something clickable\r\n    between these two contacts\" when there is not.\r\n  */\r\n  transition: background 0.12s ease;\r\n  text-align: left;\r\n  width: 100%;\r\n  border: none;\r\n  background: none;\r\n  font: inherit;\r\n  color: inherit;\r\n}\r\n.cv-item:hover { background: var(--cv-surface); }\r\n.cv-item-avatar {\r\n  width: 40px;\r\n  height: 40px;\r\n  border-radius: 999px;\r\n  /*\r\n    RADIAL, not diagonal \u2014 deliberately. The initials sit centered, so a radial gradient puts them\r\n    at its lightest point (pure `--cv-surface`) no matter what, while the edges still darken toward\r\n    `--cv-surface-2` for the same cheap depth a diagonal gradient gave. A diagonal version measured\r\n    4.39:1 for `--cv-muted` text at its far corner \u2014 under the 4.5:1 text needs \u2014 because centered\r\n    text's exact position against a DIAGONAL gradient depends on glyph width, not just circle size.\r\n    Centering the gradient on the centered text removes that dependency entirely, structurally,\r\n    rather than nudging a token and hoping the margin holds. Both stops stay tokens, so this is\r\n    still theme-correct for free \u2014 a hardcoded gray gradient would not adapt to dark mode.\r\n  */\r\n  background: radial-gradient(circle, var(--cv-surface), var(--cv-surface-2));\r\n  /*\r\n    Without this, the circle's own boundary can vanish: `.cv-item:hover` sets the ROW background to\r\n    `--cv-surface` \u2014 the exact color the gradient above STARTS at (1.00 contrast ratio, i.e.\r\n    identical) in both themes. `--cv-border-strong` is the same token `.cv-search`'s border already\r\n    uses against this same surface a few rules up \u2014 a pairing already proven visible, not a new one.\r\n  */\r\n  border: 1px solid var(--cv-border-strong);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: var(--cv-muted);\r\n  font-size: 0.78rem;\r\n  font-weight: 700;\r\n  flex-shrink: 0;\r\n}\r\n/*\r\n  The Historial row's status chip \u2014 WHY a call needs colour at all: direction is already the icon's\r\n  shape (an arrow in/out), but \"did this connect\" is not shape-able, and a flat grey circle made every\r\n  row look identical at a glance. Small badge, not a row-wide fill (that mistake already got made once\r\n  on the person filter \u2014 see its own comment): a 40px circle reads as a status glyph, the same way a\r\n  colored icon-badge does anywhere else; a wide fill reads as decoration competing with the text next\r\n  to it. `--danger-strong`/`--accent-strong` (not the plain base tokens) because the base tokens\r\n  measure BELOW 3:1 non-text contrast against their own `-soft` fill \u2014 `--cv-danger` on\r\n  `--cv-danger-soft` is 2.6:1; `--cv-danger-strong` is 4.47:1 light / 3.62:1 dark, measured.\r\n*/\r\n.cv-item-avatar[data-tone='accent'] { background: var(--cv-accent-soft); color: var(--cv-accent-strong); }\r\n.cv-item-avatar[data-tone='info'] { background: var(--cv-info-soft); color: var(--cv-info-strong); }\r\n.cv-item-avatar[data-tone='danger'] { background: var(--cv-danger-soft); color: var(--cv-danger-strong); }\r\n/* A button, reset to look like plain content \u2014 the row is a container, not a control. */\r\n.cv-item-main {\r\n  flex: 1;\r\n  min-width: 0;\r\n  display: block;\r\n  border: none;\r\n  background: none;\r\n  padding: 0;\r\n  font: inherit;\r\n  color: inherit;\r\n  text-align: left;\r\n  cursor: pointer;\r\n  transition: transform 0.1s var(--cv-ease-out);\r\n}\r\n.cv-item-main:disabled { cursor: default; }\r\n.cv-item-main:not(:disabled):active { transform: scale(0.985); }\r\n.cv-item-name {\r\n  display: block;\r\n  font-weight: 600;\r\n  font-size: 0.875rem;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n/*\r\n  14px bold does not clear WCAG's large-text bar (18.66px bold) \u2014 this text needs the full 4.5:1, not\r\n  the 3:1 large-text minimum. `--cv-danger-strong`: 6.47:1 light / 6.46:1 dark against `--cv-bg`,\r\n  measured; the plain `--cv-danger` this used to be was only 3.76:1 light \u2014 a real (if marginal) fail.\r\n*/\r\n.cv-item-name[data-tone='danger'] { color: var(--cv-danger-strong); }\r\n.cv-item-sub {\r\n  display: block;\r\n  font-size: 0.72rem;\r\n  color: var(--cv-muted);\r\n  margin-top: 1px;\r\n  font-variant-numeric: tabular-nums;\r\n}\r\n.cv-item-sub-outcome { color: var(--cv-danger-strong); }\r\n/*\r\n  Decorative reinforcement, not the sole carrier \u2014 the row's own play button is what says \"this call\r\n  has a recording\" (it only renders when one exists); this is a small hint IN the metadata line that\r\n  the button is worth pressing, so `--cv-faint` (2.5:1, documented above as decorative-only) is the\r\n  right tier here, same reasoning `.cv-empty-icon`/`.cv-gate-mark` already use for icons next to real\r\n  text rather than standing alone.\r\n\r\n  `display: inline-flex` is load-bearing, not decoration \u2014 every OTHER inline icon in this file gets\r\n  an explicit `display` for the same reason: `/react` + `/ui` render straight into the host's light\r\n  DOM (no shadow root), so a host reset like Tailwind Preflight's `svg { display: block }` reaches\r\n  this element directly. Without an explicit override here, that reset knocks the icon onto its own\r\n  line instead of trailing the duration text it is meant to sit beside.\r\n*/\r\n.cv-item-sub-rec {\r\n  display: inline-flex;\r\n  color: var(--cv-faint);\r\n  margin-left: 0.3rem;\r\n  vertical-align: -1px;\r\n}\r\n.cv-item-action {\r\n  width: 34px;\r\n  height: 34px;\r\n  border-radius: 999px;\r\n  border: none;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  transition: background 0.12s ease, color 0.12s ease, transform 0.1s var(--cv-ease-out);\r\n}\r\n.cv-item-action:hover { background: var(--cv-accent); color: #fff; }\r\n.cv-item-action:active { transform: scale(0.9); }\r\n/*\r\n  The call action specifically (ContactsTab) \u2014 NOT History's \"play recording\", which shares this\r\n  same class and must stay neutral; a play button has no reason to be accent-colored. Scoped with\r\n  `data-tone`, the same modifier convention `.cv-ctrl[data-tone]` already uses elsewhere in this file.\r\n\r\n  Coloured at REST, not just on hover: a hover-only reveal never fires on a touchscreen, so the one\r\n  affordance that most needs to read as \"you can tap this\" would be invisible on exactly the devices\r\n  a phone widget is likeliest to run on. `accent-strong` is already verified elsewhere in this file\r\n  as AA on a surface; `accent-soft` is the same hover tint `.cv-ctrl[data-tone='accent']` uses, just\r\n  transparent at rest so fifty rows of solid fill never turns the list into a wall of green.\r\n*/\r\n.cv-item-action[data-tone='accent'] { color: var(--cv-accent-strong); }\r\n.cv-item-action[data-tone='accent']:hover { background: var(--cv-accent-soft); color: var(--cv-accent-strong); }\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-item-main, .cv-item-action, .cv-search-clear { transition: none; }\r\n}\r\n\r\n.cv-empty {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 100%;\r\n  color: var(--cv-muted);\r\n  text-align: center;\r\n  padding: 2.5rem 1.25rem;\r\n  font-size: 0.82rem;\r\n}\r\n.cv-empty-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 48px;\r\n  height: 48px;\r\n  border-radius: 999px;\r\n  background: var(--cv-surface);\r\n  color: var(--cv-faint);\r\n  margin-bottom: 0.75rem;\r\n}\r\n.cv-empty-title { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--cv-muted); }\r\n/*\r\n  `--cv-muted`, NOT `--cv-faint` \u2014 this file documents faint as \"decorative only... never\r\n  information\" (2.5:1, below AA), and this line IS information: it is the reason the list is\r\n  empty, sometimes echoing the user's own search back to them. `--cv-faint` here measured 2.54:1\r\n  light / 3.70:1 dark against a 4.5:1 bar \u2014 a real failure, not a rounding difference.\r\n*/\r\n.cv-empty-sub { margin: 0.2rem 0 0; font-size: 0.75rem; color: var(--cv-muted); }\r\n.cv-empty-spinner {\r\n  margin-bottom: 0.75rem;\r\n  animation: cv-spin 0.8s linear infinite;\r\n  /* A loading spinner's rotation IS the information, with no static equivalent \u2014 unlike this\r\n     file's other motion, it stays exempt from reduced-motion rather than freezing into a shape\r\n     that would just look stuck. Colour comes from `.cv-empty`'s own `color: var(--cv-muted)` \u2014\r\n     the spinner no longer sets its own, now that it sits next to real text instead of standing\r\n     alone: the icon is decorative reinforcement, same as `.cv-empty-icon`, not the sole carrier. */\r\n}\r\n@keyframes cv-spin {\r\n  to { transform: rotate(360deg); }\r\n}\r\n\r\n/* The scroll-triggered \"load more\" marker \u2014 see `useInfiniteList`. Never visible itself; a small\r\n   height so it has a real box for the `IntersectionObserver` to track. */\r\n.cv-list-sentinel {\r\n  height: 1px;\r\n}\r\n.cv-list-loading-more {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 0.75rem 0 0.25rem;\r\n  color: var(--cv-muted);\r\n}\r\n/* Exempt from reduced-motion for the same reason `.cv-empty-spinner` is \u2014 see its own comment. */\r\n.cv-list-loading-more-spinner {\r\n  animation: cv-spin 0.8s linear infinite;\r\n}\r\n\r\n/* \u2500\u2500 Contact detail (overlays the list) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-detail {\r\n  position: absolute;\r\n  inset: 0;\r\n  /* Above the list's own sticky day-group header (`.cv-history-day`, z-index: 1) \u2014 otherwise\r\n     that header's z-index wins the stacking fight wherever its unscrolled flow position happens\r\n     to land on top of this overlay, and it paints through despite both having an opaque bg. */\r\n  z-index: 2;\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: var(--cv-bg);\r\n  animation: cv-detail-in 220ms var(--cv-ease-out) both;\r\n}\r\n@keyframes cv-detail-in {\r\n  from { opacity: 0; transform: translateX(10px); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-detail { animation: none; }\r\n}\r\n\r\n.cv-detail-head { flex-shrink: 0; padding: 0.6rem 0.5rem 0; }\r\n.cv-detail-back {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n  padding: 0.4rem 0.5rem;\r\n  border: none;\r\n  border-radius: 8px;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  font: 600 0.82rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: color 0.12s ease, transform 0.1s var(--cv-ease-out);\r\n}\r\n.cv-detail-back:hover { color: var(--cv-text); }\r\n.cv-detail-back:active { transform: scale(0.97); }\r\n\r\n.cv-detail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 1.25rem; }\r\n.cv-detail-identity {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  text-align: center;\r\n  padding: 0.75rem 0 1.5rem;\r\n}\r\n.cv-detail-avatar {\r\n  width: 72px;\r\n  height: 72px;\r\n  border-radius: 999px;\r\n  /* Same radial + border treatment as `.cv-item-avatar` (see its own comment), just larger. Neutral\r\n     by default \u2014 a contact has no \"status\" to colour. `HistoryDetail` overrides both with `[data-tone]`\r\n     below: a call DOES have one, the same one the list row already shows, so the hero avatar staying\r\n     grey there would be information the list already gave up on repeating here. */\r\n  background: radial-gradient(circle, var(--cv-surface), var(--cv-surface-2));\r\n  border: 1px solid var(--cv-border-strong);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: var(--cv-muted);\r\n  font-size: 1.35rem;\r\n  font-weight: 700;\r\n  margin-bottom: 0.85rem;\r\n}\r\n/* Same token pairs already verified for `.cv-item-avatar[data-tone]` \u2014 size doesn't change a contrast\r\n   ratio, so no new numbers to measure here. */\r\n.cv-detail-avatar[data-tone='accent'] { background: var(--cv-accent-soft); color: var(--cv-accent-strong); border-color: transparent; }\r\n.cv-detail-avatar[data-tone='info'] { background: var(--cv-info-soft); color: var(--cv-info-strong); border-color: transparent; }\r\n.cv-detail-avatar[data-tone='danger'] { background: var(--cv-danger-soft); color: var(--cv-danger-strong); border-color: transparent; }\r\n.cv-detail-name {\r\n  margin: 0;\r\n  font-size: 1.1rem;\r\n  font-weight: 700;\r\n  color: var(--cv-text);\r\n  letter-spacing: -0.01em;\r\n}\r\n.cv-detail-name[data-tone='danger'] { color: var(--cv-danger-strong); }\r\n.cv-detail-meta {\r\n  margin: 0.2rem 0 0;\r\n  font-size: 0.78rem;\r\n  color: var(--cv-muted);\r\n}\r\n\r\n/* \u2500\u2500 Call detail: recording \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-detail-recording { margin-bottom: 1rem; }\r\n.cv-detail-recording-label {\r\n  margin: 0 0 0.4rem;\r\n  padding: 0 0.15rem;\r\n  font-size: 0.68rem;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.03em;\r\n  color: var(--cv-muted);\r\n}\r\n.cv-detail-audio { width: 100%; display: block; }\r\n.cv-detail-audio + .cv-detail-audio { margin-top: 0.5rem; }\r\n.cv-detail-recording-status {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  margin: 0 0 1rem;\r\n  padding: 0.65rem 0.75rem;\r\n  border-radius: 12px;\r\n  background: var(--cv-surface);\r\n  color: var(--cv-muted);\r\n  font-size: 0.78rem;\r\n}\r\n/*\r\n  Text colour only, same neutral `--cv-surface` background the other states use \u2014 NOT a\r\n  `--cv-danger-soft` fill. Measured first, not assumed: `--cv-danger-strong` on `--cv-danger-soft`\r\n  is 3.34:1 light / 3.62:1 dark, well under the 4.5:1 this 0.78rem text needs (it only ever cleared\r\n  the SEPARATE 3:1 non-text bar this token was built for \u2014 an icon on that badge, not body text on\r\n  it). Same lesson the person-filter fix already paid for: a badge-strength pairing that works for an\r\n  icon is not automatically safe for text.\r\n*/\r\n.cv-detail-recording-status--warn { color: var(--cv-danger-strong); }\r\n.cv-detail-recording-spinner { animation: cv-spin 0.8s linear infinite; flex-shrink: 0; }\r\n\r\n/* \u2500\u2500 Call detail: who handled it \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-detail-handlers { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }\r\n.cv-detail-handler-hop { display: inline-flex; align-items: center; gap: 0.3rem; }\r\n.cv-detail-handler-arrow { color: var(--cv-faint); flex-shrink: 0; }\r\n.cv-detail-handler-chip {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n  padding: 0.15rem 0.5rem;\r\n  border-radius: 999px;\r\n  background: var(--cv-surface-2);\r\n  color: var(--cv-text);\r\n  font-size: 0.75rem;\r\n  font-weight: 600;\r\n}\r\n/* The LAST hop \u2014 the one the call actually ended with \u2014 is the one worth a glance first. */\r\n.cv-detail-handler-chip[data-tone='accent'] { background: var(--cv-accent-soft); color: var(--cv-accent-strong); }\r\n.cv-detail-handler-ext {\r\n  font-weight: 400;\r\n  font-variant-numeric: tabular-nums;\r\n  opacity: 0.75;\r\n}\r\n\r\n.cv-detail-rows {\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: 14px;\r\n  overflow: hidden;\r\n  background: var(--cv-bg);\r\n}\r\n.cv-detail-row {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.7rem;\r\n  width: 100%;\r\n  padding: 0.7rem 0.85rem;\r\n  border: none;\r\n  border-top: 1px solid var(--cv-border);\r\n  background: none;\r\n  font: inherit;\r\n  color: inherit;\r\n  text-align: left;\r\n}\r\n.cv-detail-row:first-child { border-top: none; }\r\n.cv-detail-row--action {\r\n  cursor: pointer;\r\n  transition: background 0.12s ease;\r\n}\r\n.cv-detail-row--action:hover { background: var(--cv-surface); }\r\n.cv-detail-row-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 999px;\r\n  background: var(--cv-surface-2);\r\n  /*\r\n    Without this the circle nearly vanishes into its own row: `--cv-surface-2` measures only ~1.1:1\r\n    against the row's rest-state background and ~1.05:1 against `--cv-surface`, the color\r\n    `.cv-detail-row--action:hover` sets the ROW to \u2014 both far below a readable boundary, and worse\r\n    than `.cv-item-avatar`/`.cv-detail-avatar` above even manage WITH their border (1.18:1 light /\r\n    1.57:1 dark). Same token, same fix, same reason.\r\n  */\r\n  border: 1px solid var(--cv-border-strong);\r\n  color: var(--cv-muted);\r\n  flex-shrink: 0;\r\n}\r\n.cv-detail-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }\r\n.cv-detail-row-eyebrow {\r\n  font-size: 0.68rem;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.03em;\r\n  color: var(--cv-muted);\r\n}\r\n.cv-detail-row-value {\r\n  font-size: 0.85rem;\r\n  font-weight: 500;\r\n  color: var(--cv-text);\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n.cv-detail-row-chevron { color: var(--cv-faint); flex-shrink: 0; }\r\n\r\n.cv-detail-foot { flex-shrink: 0; padding: 0.85rem 1.25rem 1.1rem; }\r\n.cv-detail-call { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.4rem; }\r\n\r\n/* \u2500\u2500 Settings tab (device selection, SPEC \xA77 Phase 2) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-settings-body {\r\n  flex: 1;\r\n  min-height: 0;\r\n  overflow-y: auto;\r\n  padding: 1rem;\r\n  display: flex;\r\n  flex-direction: column;\r\n  /* Generous separation BETWEEN sections, deliberately larger than any gap inside one \u2014 grouping\r\n     only reads as grouping if the space between groups is clearly bigger than the space within one\r\n     (see impeccable's layout guidance: \"tight grouping, generous separation\"). */\r\n  gap: 1.5rem;\r\n}\r\n\r\n/*\r\n  One labeled group (`SettingsSection`): a title, and a bordered body holding its rows. Ajustes\r\n  started as a flat list of two rows with nothing to say they were related \u2014 fine for exactly two\r\n  rows, unreadable the moment an unrelated third setting lands with nothing to tell it apart from\r\n  the device rows above it.\r\n\r\n  The body is ONE card, not a card per row: `.cv-settings-row`/`.cv-settings-note` below carry no\r\n  border or background of their own, only a divider between siblings \u2014 the same shape\r\n  `.cv-detail-rows`/`.cv-detail-row` already use elsewhere in this file, and deliberately not a\r\n  stack of individually-bordered cards (nested-card territory).\r\n*/\r\n.cv-settings-section { display: flex; flex-direction: column; gap: 0.5rem; }\r\n.cv-settings-section-title {\r\n  margin: 0;\r\n  padding: 0 0.2rem;\r\n  font-size: 0.7rem;\r\n  font-weight: 700;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.04em;\r\n  color: var(--cv-muted);\r\n}\r\n.cv-settings-section-body {\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: 14px;\r\n  background: var(--cv-bg);\r\n  overflow: hidden;\r\n}\r\n.cv-settings-section-body > * { padding: 0.75rem 0.85rem; }\r\n.cv-settings-section-body > *:not(:first-child) { border-top: 1px solid var(--cv-border); }\r\n\r\n.cv-settings-row { display: flex; align-items: center; gap: 0.7rem; }\r\n/* Same treatment as `.cv-detail-row-icon`, same reason \u2014 see its own comment on why the border is\r\n   load-bearing: `--cv-surface-2` alone nearly vanishes into the section's own background. */\r\n.cv-settings-row-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 999px;\r\n  background: var(--cv-surface-2);\r\n  border: 1px solid var(--cv-border-strong);\r\n  color: var(--cv-muted);\r\n  flex-shrink: 0;\r\n}\r\n.cv-settings-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }\r\n/* Same pairing as `.cv-detail-row-eyebrow` (`--cv-muted` on `--cv-bg`), verified there already. */\r\n.cv-settings-row-label {\r\n  font-size: 0.68rem;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.03em;\r\n  color: var(--cv-muted);\r\n}\r\n.cv-settings-select {\r\n  width: 100%;\r\n  padding: 0.45rem 0.6rem;\r\n  border-radius: 8px;\r\n  border: 1px solid var(--cv-border-strong);\r\n  background: var(--cv-surface);\r\n  color: var(--cv-text);\r\n  font: inherit;\r\n  font-size: 0.85rem;\r\n  transition: border-color 0.15s ease, background 0.15s ease;\r\n}\r\n.cv-settings-select:focus { outline: none; border-color: var(--cv-accent); background: var(--cv-bg); }\r\n.cv-settings-empty { font-size: 0.85rem; color: var(--cv-muted); }\r\n\r\n/* `--cv-danger-strong` is the AS-TEXT danger token (see its definition): red-600 on the light `--cv-bg`,\r\n   red-400 on the dark one. */\r\n.cv-settings-error { margin: 0.6rem 0.2rem 0; font-size: 0.78rem; line-height: 1.4; color: var(--cv-danger-strong); }\r\n\r\n/*\r\n  Ajustes as a list (custom-ringtone.md \xA74.6, revised 2026-10-14): each row names a setting, shows its CURRENT\r\n  value under the name, and opens a page. Same icon circle and dividers as the device rows above (they live in\r\n  the same `.cv-settings-section-body`, which supplies the padding and the dividers), same chevron as\r\n  `.cv-detail-row--action` \u2014 one row vocabulary across the widget.\r\n*/\r\n.cv-settings-nav {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.7rem;\r\n  width: 100%;\r\n  border: none;\r\n  background: none;\r\n  font: inherit;\r\n  color: inherit;\r\n  text-align: left;\r\n}\r\nbutton.cv-settings-nav { cursor: pointer; transition: background 0.12s ease; }\r\nbutton.cv-settings-nav:hover { background: var(--cv-surface); }\r\nbutton.cv-settings-nav:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: -2px; }\r\n.cv-settings-nav-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }\r\n.cv-settings-nav-title { font-size: 0.88rem; font-weight: 600; color: var(--cv-text); }\r\n/* One line, cut with an ellipsis \u2014 the full device name is on its page. `--cv-muted` on `--cv-bg` is the\r\n   pairing already verified for `.cv-settings-note`. The static row (a note, no page) may wrap instead. */\r\n.cv-settings-nav-value {\r\n  font-size: 0.8rem;\r\n  color: var(--cv-muted);\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n.cv-settings-nav--static .cv-settings-nav-value { white-space: normal; line-height: 1.45; }\r\n.cv-settings-nav-chevron { flex-shrink: 0; color: var(--cv-muted); }\r\n\r\n/* A settings page: the `.cv-detail` overlay (entrance, back button, reduced motion all inherited) with a\r\n   scrolling body of its own. */\r\n.cv-settings-page-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0.25rem 1rem 1rem; }\r\n.cv-settings-page-title {\r\n  margin: 0.15rem 0.2rem 0.35rem;\r\n  font-size: 1.05rem;\r\n  font-weight: 700;\r\n  letter-spacing: -0.01em;\r\n  color: var(--cv-text);\r\n}\r\n/* Focus lands here on open (for keyboard and screen-reader users); a ring on a heading would only look\r\n   like a stray box to everyone else. */\r\n.cv-settings-page-title:focus { outline: none; }\r\n.cv-settings-page-intro { margin: 0 0.2rem 0.85rem; font-size: 0.8rem; line-height: 1.45; color: var(--cv-muted); }\r\n.cv-settings-page-empty { margin: 0; padding: 0 0.2rem; font-size: 0.85rem; color: var(--cv-muted); }\r\n\r\n/* The checkmark list: one card like `.cv-settings-section-body`, a row per choice. */\r\n.cv-choices {\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: 14px;\r\n  background: var(--cv-bg);\r\n  overflow: hidden;\r\n}\r\n.cv-choice {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.6rem;\r\n  min-height: 44px;\r\n  padding: 0.6rem 0.85rem;\r\n  cursor: pointer;\r\n  transition: background 0.12s ease;\r\n}\r\n.cv-choice + .cv-choice { border-top: 1px solid var(--cv-border); }\r\n.cv-choice:hover { background: var(--cv-surface); }\r\n/* The real control: a native radio, kept in the accessibility tree and keyboard order, drawn by the row. */\r\n.cv-choice-input {\r\n  position: absolute;\r\n  opacity: 0;\r\n  width: 1px;\r\n  height: 1px;\r\n  margin: 0;\r\n  pointer-events: none;\r\n}\r\n.cv-choice:has(.cv-choice-input:focus-visible) { outline: 2px solid var(--cv-accent); outline-offset: -2px; }\r\n.cv-choice-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }\r\n.cv-choice-label { font-size: 0.88rem; color: var(--cv-text); overflow-wrap: anywhere; }\r\n.cv-choice-sub { font-size: 0.78rem; color: var(--cv-muted); }\r\n.cv-choice[data-checked] .cv-choice-label { font-weight: 600; }\r\n.cv-choice-check { flex-shrink: 0; color: var(--cv-accent-strong); visibility: hidden; }\r\n.cv-choice[data-checked] .cv-choice-check { visibility: visible; }\r\n.cv-choice-playing { display: inline-flex; flex-shrink: 0; color: var(--cv-accent-strong); }\r\n\r\n.cv-settings-test,\r\n.cv-settings-retry {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.4rem;\r\n}\r\n.cv-settings-test { margin-top: 0.85rem; }\r\n.cv-settings-retry { margin-top: 0.6rem; }\r\n\r\n/* Visually hidden, still read aloud. */\r\n.cv-sr-only {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  overflow: hidden;\r\n  clip-path: inset(50%);\r\n  white-space: nowrap;\r\n}\r\n/* `--cv-muted` on `--cv-bg` \u2014 4.83:1 light / 6.97:1 dark, computed fresh for THIS pairing (the note\r\n   used to sit on `--cv-surface` with its own card; now it sits directly on the section's `--cv-bg`,\r\n   a different background that earns its own check rather than inheriting the old one's number). */\r\n.cv-settings-note {\r\n  margin: 0;\r\n  color: var(--cv-muted);\r\n  font-size: 0.8rem;\r\n  line-height: 1.5;\r\n}\r\n\r\n/* \u2500\u2500 Centred states (mic gate) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-center {\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 0.85rem;\r\n  padding: 1.75rem;\r\n  text-align: center;\r\n}\r\n.cv-center p { color: var(--cv-muted); margin: 0; font-size: 0.85rem; line-height: 1.5; }\r\n\r\n\r\n/* \"C\xF3mo permitirlo\" \u2014 a native <details> disclosure.\r\n   Collapsed by default: the people who already know where the padlock is should not have to read\r\n   past three steps to get there, and the people who don't get them without leaving the app. */\r\n.cv-help {\r\n  width: 100%;\r\n  margin-top: 0.15rem;\r\n  text-align: left;\r\n}\r\n.cv-help summary {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n  justify-content: center;\r\n  width: 100%;\r\n  padding: 0.3rem;\r\n  border-radius: 8px;\r\n  color: var(--cv-muted);\r\n  font: 500 0.75rem var(--cv-font);\r\n  cursor: pointer;\r\n  list-style: none; /* hide the default triangle; the icon is the affordance */\r\n  transition: color 0.15s ease, background 0.15s ease;\r\n}\r\n.cv-help summary::-webkit-details-marker { display: none; }\r\n.cv-help summary:hover { color: var(--cv-text); background: var(--cv-surface-2); }\r\n.cv-help[open] summary { color: var(--cv-text); margin-bottom: 0.35rem; }\r\n\r\n.cv-help ol {\r\n  margin: 0;\r\n  padding: 0.6rem 0.7rem 0.6rem 1.6rem;\r\n  background: var(--cv-surface);\r\n  border-radius: 10px;\r\n  color: var(--cv-muted);\r\n  font-size: 0.73rem;\r\n  line-height: 1.55;\r\n}\r\n.cv-help li + li { margin-top: 0.3rem; }\r\n.cv-help li::marker { color: var(--cv-faint); font-variant-numeric: tabular-nums; }\r\n\r\n.cv-help a {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.25rem;\r\n  margin-top: 0.45rem;\r\n  padding-left: 0.1rem;\r\n  color: var(--cv-accent-strong);\r\n  font-size: 0.73rem;\r\n  font-weight: 500;\r\n  text-decoration: none;\r\n}\r\n.cv-help a:hover { text-decoration: underline; }\r\n\r\n/* The panel is the only thing that moves, and only when opened by hand \u2014 so it animates. */\r\n.cv-help[open] ol {\r\n  animation: cv-gate-in 200ms var(--cv-ease-out) both;\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-help[open] ol { animation: none; }\r\n}\r\n\r\n/* \u2500\u2500 The permission gate \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   Four states, and only ONE of them deserves a designed screen.\r\n\r\n   `checking` resolves in ~100\u2013400 ms. Rendering it immediately means the user\r\n   sees text appear and vanish inside a blink \u2014 a flash reads as jank, not as\r\n   information. So it is delayed 450 ms with `both` fill: invisible during the\r\n   delay, and if the check finishes first (the usual case, and always the case\r\n   when permission is already granted) it is never painted at all.\r\n\r\n   `prompting` is the one the user actually reads and acts on. It gets the\r\n   hierarchy: mark, title, reason, action.\r\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-gate {\r\n  flex: 1;\r\n  min-height: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 0.6rem;\r\n  padding: 1.5rem 1.75rem;\r\n  text-align: center;\r\n}\r\n\r\n/* The disc echoes the call avatar \u2014 one visual language, not two. */\r\n.cv-gate-mark {\r\n  display: grid;\r\n  place-items: center;\r\n  width: 52px;\r\n  height: 52px;\r\n  border-radius: 999px;\r\n  background: var(--cv-accent-soft);\r\n  color: var(--cv-accent-strong);\r\n  margin-bottom: 0.15rem;\r\n}\r\n.cv-gate[data-tone='danger'] .cv-gate-mark {\r\n  background: var(--cv-danger-soft);\r\n  color: var(--cv-danger);\r\n}\r\n\r\n.cv-gate-title {\r\n  margin: 0;\r\n  font: 600 0.95rem var(--cv-font);\r\n  color: var(--cv-text);\r\n  letter-spacing: -0.01em;\r\n}\r\n.cv-gate p {\r\n  margin: 0;\r\n  color: var(--cv-muted);\r\n  font-size: 0.8rem;\r\n  line-height: 1.5;\r\n  max-width: 24ch; /* two comfortable lines, not one long one */\r\n}\r\n.cv-gate .cv-btn { margin-top: 0.5rem; }\r\n\r\n/* Entrance. Staggered 45 ms apart: the eye follows mark \u2192 title \u2192 reason \u2192\r\n   action, which is the order it needs to read them in anyway. */\r\n.cv-gate > * {\r\n  animation: cv-gate-in 260ms var(--cv-ease-out) both;\r\n}\r\n.cv-gate > *:nth-child(2) { animation-delay: 45ms; }\r\n.cv-gate > *:nth-child(3) { animation-delay: 90ms; }\r\n.cv-gate > *:nth-child(4) { animation-delay: 135ms; }\r\n\r\n@keyframes cv-gate-in {\r\n  from { opacity: 0; transform: translateY(6px); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n\r\n/* The checking state: held back, then a quiet fade. No stagger, no movement \u2014\r\n   it is a status, not a screen, and it should barely register. */\r\n.cv-gate[data-state='checking'] > *,\r\n.cv-gate[data-state='warming'] > * {\r\n  animation: cv-gate-wait 200ms var(--cv-ease-out) 450ms both;\r\n}\r\n@keyframes cv-gate-wait {\r\n  from { opacity: 0; }\r\n  to   { opacity: 1; }\r\n}\r\n/* A slow breath rather than a spinner: a spinner promises a long wait, and this\r\n   is not one. */\r\n.cv-gate[data-state='checking'] .cv-gate-mark,\r\n.cv-gate[data-state='warming'] .cv-gate-mark {\r\n  background: var(--cv-surface-2);\r\n  color: var(--cv-muted);\r\n  animation: cv-gate-wait 200ms var(--cv-ease-out) 450ms both,\r\n             cv-breathe 1.8s ease-in-out 450ms infinite;\r\n}\r\n@keyframes cv-breathe {\r\n  0%, 100% { opacity: 1; }\r\n  50%      { opacity: 0.45; }\r\n}\r\n\r\n/* Reduced motion: keep the fade and \u2014 critically \u2014 keep the DELAY, which is\r\n   timing rather than motion and is the whole point. Drop the travel. */\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-gate > * {\r\n    animation: cv-gate-wait 200ms var(--cv-ease-out) both;\r\n  }\r\n  .cv-gate[data-state='checking'] .cv-gate-mark,\r\n  .cv-gate[data-state='warming'] .cv-gate-mark {\r\n    animation: cv-gate-wait 200ms var(--cv-ease-out) 450ms both;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-avatar-ping,\r\n  .cv-timer i { animation: none; }\r\n  .cv-softphone *,\r\n  .cv-softphone *::before { transition-duration: 0.01ms !important; }\r\n}\r\n\r\n/* `*` and `#` stay in the grid \u2014 a keypad without them is not a keypad \u2014 but they are not part of a\r\n   number (toE164 keeps digits only). Dimmed rather than `disabled` so the grid still reads as a\r\n   keypad and the glyphs stay legible; they become live DTMF on the in-call screen. */\r\n.cv-key[data-dialable='false'] {\r\n  cursor: default;\r\n}\r\n.cv-key[data-dialable='false'] b {\r\n  color: var(--cv-faint);\r\n}\r\n.cv-key[data-dialable='false']:hover {\r\n  background: none;\r\n}\r\n.cv-key[data-dialable='false']:active {\r\n  transform: none;\r\n}\r\n\r\n/* \u2500\u2500 Country picker \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   The prefix chip + its list. Sits where the old left spacer was, so the number\r\n   stays optically centred against the 36px erase button on the right.\r\n\r\n   The popover is absolutely positioned inside the widget rather than portalled:\r\n   there is nowhere to portal TO inside a shadow root, and the widget already owns\r\n   its stacking context. That also means it cannot be clipped by a host's\r\n   `overflow:hidden` \u2014 the failure SPEC \xA72.6 lists for the CRM's Radix version.\r\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/* The anchor spans the whole ROW, not just the chip.\r\n   With the chip centred, anchoring to the chip put the popover's left edge at ~120px and its right\r\n   edge past the widget \u2014 clipped by `.cv-softphone { overflow: hidden }`, which is the classic\r\n   absolute-inside-overflow bug. Anchoring to the full row makes overflowing arithmetically\r\n   impossible: `left:0; right:0` cannot be wider than the row that contains it. */\r\n.cv-cp {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: center;\r\n  width: 100%;\r\n}\r\n/* A PILL, with a resting surface and a border.\r\n   This was `border: none; background: none` \u2014 invisible until hover, so it read as a label rather\r\n   than a control. That was survivable when it sat inline beside the number; alone on its own row it\r\n   is just floating text, and nothing says \"you can change this\". A control that changes state has to\r\n   look like one at rest, not only under a cursor that may never arrive (touch has no hover at all). */\r\n.cv-cp-chip {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n  height: 30px;\r\n  padding: 0 0.5rem 0 0.4rem;\r\n  border: 1px solid var(--cv-border-strong);\r\n  border-radius: 999px;\r\n  background: var(--cv-surface);\r\n  color: var(--cv-text);\r\n  font: 600 0.8rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: background 0.15s, border-color 0.15s;\r\n}\r\n.cv-cp-chip:hover { background: var(--cv-surface-2); }\r\n.cv-cp-chip:active { transform: scale(0.95); }\r\n/* Open: the chip is the thing the list belongs to, so it stays visibly engaged while the list is up. */\r\n.cv-cp-chip[aria-expanded='true'] {\r\n  background: var(--cv-accent-soft);\r\n  border-color: var(--cv-accent);\r\n}\r\n.cv-cp-dial {\r\n  font-variant-numeric: tabular-nums;\r\n  letter-spacing: -0.02em;\r\n}\r\n.cv-cp-caret {\r\n  color: var(--cv-faint);\r\n  flex-shrink: 0;\r\n  transition: transform 0.18s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n.cv-cp-caret[data-open='true'] { transform: rotate(180deg); }\r\n\r\n/* The country mark. TWO designed states in ONE 20\xD714 box (a flag's own 3:2), so the chip and every\r\n   row keep their rhythm whichever is showing \u2014 nothing reflows when the flags land. The plate is the\r\n   LOADING state (flags are a lazy import) and the offline state, not a fallback: there is no flash of\r\n   something broken, only a designed plate becoming a designed flag, once per session.\r\n   `::part(country-mark)` lets a host restyle either. */\r\n.cv-mark {\r\n  width: 20px;\r\n  height: 14px;\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 14px;\r\n  line-height: 1;\r\n  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', var(--cv-font);\r\n}\r\n/* The SVG fills the slot exactly; 3x2 is the flag aspect, so nothing is letterboxed or cropped. */\r\n.cv-mark-svg {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: block;\r\n  border-radius: 2px;\r\n  object-fit: cover;\r\n}\r\n.cv-mark[data-plate='true'] {\r\n  /* The ISO code set into the slot a flag will occupy. */\r\n  font-family: var(--cv-font);\r\n  font-size: 8.5px;\r\n  font-weight: 700;\r\n  letter-spacing: 0.04em;\r\n  color: var(--cv-text);\r\n  background: var(--cv-surface-2);\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: 3px;\r\n  /* Cap-height letters sit optically high in a 14px box; nudge them back to centre. */\r\n  padding-top: 1px;\r\n}\r\n\r\n.cv-cp-pop {\r\n  position: absolute;\r\n  top: calc(100% + 6px);\r\n  /* Pinned to BOTH row edges, so it is bounded by the container by construction \u2014 no width guess,\r\n     no media query, nothing to clip. `max-width` keeps it from looking stretched on a wide host. */\r\n  left: 0;\r\n  right: 0;\r\n  margin-inline: auto;\r\n  max-width: 260px;\r\n  z-index: 20;\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: var(--cv-surface);\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: var(--cv-radius);\r\n  box-shadow: var(--cv-shadow);\r\n  overflow: hidden;\r\n  /* Grows from the chip it belongs to, rather than appearing on top of it. */\r\n  transform-origin: top center;\r\n  animation: cv-cp-in 0.14s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n@keyframes cv-cp-in {\r\n  from { opacity: 0; transform: translateY(-4px) scale(0.97); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-cp-pop { animation: none; }\r\n  .cv-cp-caret { transition: none; }\r\n}\r\n.cv-cp-search {\r\n  flex-shrink: 0;\r\n  padding: 0.5rem 0.65rem;\r\n  border: none;\r\n  border-bottom: 1px solid var(--cv-border);\r\n  background: none;\r\n  color: var(--cv-text);\r\n  font: 400 0.8rem var(--cv-font);\r\n  outline: none;\r\n}\r\n.cv-cp-search::placeholder { color: var(--cv-faint); }\r\n/* Both states named explicitly. In the CRM the widget mounts via `/ui`, i.e. in the LIGHT DOM \u2014 none\r\n   of the shadow-DOM isolation the web-component playground proves applies there, so a host's focus\r\n   ring (or the browser's own) can land on our input. The accent underline IS the focus indicator. */\r\n.cv-cp-search:focus,\r\n.cv-cp-search:focus-visible {\r\n  outline: none;\r\n  border-bottom-color: var(--cv-accent);\r\n  border-bottom-width: 2px;\r\n  padding-bottom: calc(0.5rem - 1px);\r\n}\r\n.cv-cp-list {\r\n  overflow-y: auto;\r\n  max-height: 220px;\r\n  padding: 0.25rem;\r\n}\r\n.cv-cp-item {\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  padding: 0.4rem 0.45rem;\r\n  border: none;\r\n  border-radius: calc(var(--cv-radius) - 4px);\r\n  background: none;\r\n  color: var(--cv-text);\r\n  font: 400 0.8rem var(--cv-font);\r\n  text-align: left;\r\n  cursor: pointer;\r\n}\r\n.cv-cp-item:hover { background: var(--cv-surface-2); }\r\n/* The current country is stated by the row, not only by a tick at the far right. */\r\n.cv-cp-item[aria-selected='true'] { background: var(--cv-accent-soft); }\r\n.cv-cp-item[aria-selected='true'] .cv-cp-name { font-weight: 600; }\r\n.cv-cp-name {\r\n  flex: 1;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n.cv-cp-item .cv-cp-dial {\r\n  color: var(--cv-muted);\r\n  font-weight: 400;\r\n}\r\n.cv-cp-check { color: var(--cv-accent-strong); flex-shrink: 0; }\r\n.cv-cp-check[data-on='false'] { opacity: 0; }\r\n.cv-cp-empty {\r\n  margin: 0;\r\n  padding: 1rem 0.5rem;\r\n  text-align: center;\r\n  color: var(--cv-muted);\r\n  font-size: 0.78rem;\r\n}\r\n";
+var softphone_default = "/**\r\n * @coventia/softphone/styles.css\r\n *\r\n * The theming contract (SPEC \xA72.6) + all component styles. A host restyles the softphone by\r\n * overriding the `--cv-*` custom properties \u2014 which are INHERITED, so they cross the shadow boundary\r\n * of `<coventia-softphone>` by design (the host's own CSS *selectors* do not, which is what stops a\r\n * stray `button { width:100% }` from destroying the dialpad).\r\n *\r\n * Defaults match the Coventia product: light surface, emerald accent, soft rounded key cards.\r\n *\r\n * Reseller:  coventia-softphone { --cv-accent:#7c3aed; --cv-bg:#0b0b0f; }\r\n * CRM (shadcn bridge, ~15 lines, dark mode included):\r\n *   .cv-softphone { --cv-bg:hsl(var(--background)); --cv-text:hsl(var(--foreground)); \u2026 }\r\n *\r\n * TYPOGRAPHY NOTE: `--cv-font` is a system stack on purpose. An embedded widget should inherit its\r\n * host's type, not force a webfont into someone else's app; hosts override the token if they want.\r\n *\r\n * Strings are Spanish-only (SPEC \xA72.4). No i18n.\r\n */\r\n\r\n/*\r\n * The custom element's own box.\r\n *\r\n * A custom element is `display: inline` by default and has NO size \u2014 and the widget inside now fills\r\n * its host rather than asserting 340\xD7520, so without this the element would render to ZERO. The\r\n * drop-in promise is \"one tag and it works\", which means the TAG must carry a box.\r\n *\r\n * These are defaults, not decisions: they sit on `:host`, so any host stylesheet outranks them \u2014\r\n *\r\n *   coventia-softphone { width: 100%; height: 100%; }   \u2190 a sidebar\r\n *   coventia-softphone { height: 600px; }               \u2190 taller\r\n *\r\n * React consumers never see this: they import `/ui` and their own wrapper states the box (the CRM's\r\n * PhoneDialer does exactly that).\r\n */\r\n:host {\r\n  display: block;\r\n  width: 340px;\r\n  height: 520px;\r\n}\r\n\r\n/* React's container inside the shadow root \u2014 element path only; inert everywhere else.\r\n *\r\n * It must pass the host's height straight through. `.cv-softphone` below is `height: 100%`, and a\r\n * percentage height resolves against the PARENT: leave this div at its default `auto` and that 100%\r\n * silently becomes `auto` too, so the widget collapses to its content height and the host's `height`\r\n * is ignored. What you see is a short card stranded in a taller box \u2014 which reads as a broken widget,\r\n * not as a broken wrapper. */\r\n.cv-mount {\r\n  height: 100%;\r\n}\r\n\r\n:host,\r\n.cv-softphone {\r\n  /* Surface */\r\n  --cv-bg: #ffffff;\r\n  --cv-surface: #f9fafb;\r\n  --cv-surface-2: #f3f4f6;\r\n  --cv-border: #f3f4f6;\r\n  --cv-border-strong: #e5e7eb;\r\n\r\n  /* Text \u2014 three tiers, split by CONTRAST DUTY, not by taste:\r\n     `text`  informational primary        17.7:1\r\n     `muted` informational secondary       4.8:1  (AA \u2014 phone numbers, timestamps, tab labels)\r\n     `faint` DECORATIVE only               2.5:1  (keypad letters, placeholder \u2014 never information)\r\n     The legacy used gray-400 for all secondary text, which fails AA at 2.54:1. Splitting the tier\r\n     keeps the look while making the informational text legible. */\r\n  --cv-text: #111827;\r\n  --cv-muted: #6b7280;\r\n  --cv-faint: #9ca3af;\r\n\r\n  /* Intent \u2014 emerald. Split by CONTRAST DUTY, because one \"brand green\" cannot do all three jobs:\r\n     `accent`        FILL that carries a white glyph  \u2192 emerald-600, white 3.77:1 \u2713\r\n                     (emerald-500 is the prettier brand green but white on it is 2.54:1 \u2014 the\r\n                      call button's phone icon would fail WCAG non-text contrast. Measured, not guessed.)\r\n     `accent-strong` emerald AS TEXT on a surface     \u2192 emerald-700, 5.48:1 \u2713 for the 10px tab label\r\n     `accent-light`  DECORATIVE only (the ring halo)  \u2014 never carries text, so it stays vivid */\r\n  --cv-accent: #059669;\r\n  --cv-accent-strong: #047857;\r\n  --cv-accent-light: #10b981;\r\n  --cv-accent-soft: #a7f3d0;\r\n  --cv-accent-contrast: #ffffff;\r\n  --cv-danger: #ef4444;\r\n  /* `--cv-danger` ITSELF fails 3:1 non-text contrast against `--cv-danger-soft` (2.6:1, measured) \u2014\r\n     the same AS-TEXT/on-a-tinted-surface split `accent` already has, `danger` was just missing until\r\n     the Historial tab's status badges needed it. Darker on light (mirrors `accent-strong`), LIGHTER on\r\n     dark (red-400) \u2014 same inversion `accent-strong` documents above, same reason: emphasis on a dark\r\n     surface means more light, not less.\r\n     red-700 (#b91c1c) was the first pick here and overshot both minimums (6.47:1 text, 4.47:1 badge)\r\n     enough to read as a dark, brownish red rather than red \u2014 red-600 clears both with real margin\r\n     still (4.83:1 / 3.34:1, measured) and looks like red. */\r\n  --cv-danger-strong: #dc2626;\r\n  --cv-danger-soft: #fecaca;\r\n  /* A third status hue, sky \u2014 for the Historial row status chip specifically: an outgoing call that\r\n     WAS answered gets its own colour rather than sharing `accent`, matching the legacy CRM's own\r\n     three-way split (emerald/sky/rose) that this file's earlier restrained accent-only-for-\"fine\"\r\n     version had collapsed away. Same strong/soft split, same inversion, as `accent`/`danger` above \u2014\r\n     4.47:1 light / 4.42:1 dark against `-soft`, measured. */\r\n  --cv-info: #0284c7;\r\n  --cv-info-strong: #0369a1;\r\n  --cv-info-soft: #bae6fd;\r\n  --cv-hold: #6366f1;\r\n\r\n  /* Shape & type */\r\n  --cv-radius: 16px;\r\n  /* Strong ease-out. The built-in CSS easings are too weak to read as intentional. */\r\n  --cv-ease-out: cubic-bezier(0.23, 1, 0.32, 1);\r\n  --cv-radius-key: 16px;\r\n  --cv-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;\r\n  --cv-font-size: 14px;\r\n  --cv-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 1px 3px rgb(0 0 0 / 0.06);\r\n\r\n  color: var(--cv-text);\r\n  font-family: var(--cv-font);\r\n  font-size: var(--cv-font-size);\r\n}\r\n\r\n/**\r\n * Dark theme \u2014 matched to the Coventia product's own dark tokens, not invented.\r\n *\r\n * The CRM defines `--background: 240 10% 10%` (#17171c) with surfaces at 15.9% (#27272a) and borders\r\n * at 25.9% (#404044) \u2014 the zinc/240-hue family. An earlier draft here used a near-black\r\n * (#0f0f13, ~half the luminance of the product's background) with 2%-luminance borders that were\r\n * effectively invisible. That is the \"black tonality\" that read wrong: right hue, wrong lightness.\r\n *\r\n * Note the accent INVERTS: on light, `accent-strong` is darker than `accent` (emerald-700); on dark\r\n * it must be LIGHTER (emerald-400), because emphasis on a dark surface means more light, not less.\r\n * Same token, opposite direction \u2014 miss this and the timer/active tab sink into the background.\r\n *\r\n * \u2500\u2500 HOW THE THEME IS CHOSEN \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n * By default it follows the OS (`prefers-color-scheme`). But a host must be able to PIN it: the\r\n * Coventia CRM toggles dark with a class (next-themes), not the OS setting \u2014 so a user with a dark\r\n * OS but the CRM in light mode would otherwise get a dark widget inside a light app.\r\n *\r\n *   <SoftphoneWidget theme=\"light\" />   \u2192 data-cv-theme=\"light\"  \u2014 always light\r\n *   <SoftphoneWidget theme=\"dark\" />    \u2192 data-cv-theme=\"dark\"   \u2014 always dark\r\n *   <SoftphoneWidget />                 \u2192 follows the OS\r\n *\r\n * To follow the HOST's theme rather than the OS, pass the host's current theme through, e.g.\r\n * next-themes: `const { resolvedTheme } = useTheme(); <SoftphoneWidget theme={resolvedTheme} />`.\r\n *\r\n * The dark block is duplicated below (OS-driven vs. pinned) on purpose: plain CSS has no way to\r\n * share a declaration block across a media query and a selector, and the honest duplication beats a\r\n * clever custom-property toggle nobody can debug.\r\n */\r\n@media (prefers-color-scheme: dark) {\r\n  :host(:not([data-cv-theme='light'])),\r\n  .cv-softphone:not([data-cv-theme='light']) {\r\n    --cv-bg: #17171c;          /* CRM --background            240 10% 10%  */\r\n    --cv-surface: #202027;     /* between bg and secondary                 */\r\n    --cv-surface-2: #27272a;   /* CRM --secondary/--muted     240 3.7% 15.9% */\r\n    --cv-border: #2e2e33;\r\n    --cv-border-strong: #404044; /* CRM --border              240 3.7% 25.9% */\r\n    --cv-text: #fafafa;        /* CRM --foreground            0 0% 98%     */\r\n    --cv-muted: #a1a1aa;       /* CRM --muted-foreground      240 5% 64.9% \u2192 6.97:1 AA */\r\n    --cv-faint: #71717a;       /* decorative only                          */\r\n    --cv-accent-strong: #34d399; /* emerald-400 \u2014 9.29:1 on #17171c        */\r\n    --cv-accent-light: #34d399;  /* the halo reads brighter on dark          */\r\n    --cv-accent-soft: #065f46;   /* glows must darken on dark, not glare     */\r\n    --cv-danger-strong: #f87171; /* red-400 \u2014 LIGHTER than --cv-danger, same inversion as accent-strong */\r\n    --cv-danger-soft: #7f1d1d;\r\n    --cv-info-strong: #38bdf8;   /* sky-400 \u2014 same inversion, same reason */\r\n    --cv-info-soft: #0c4a6e;\r\n    --cv-shadow: 0 1px 2px rgb(0 0 0 / 0.4);\r\n  }\r\n}\r\n\r\n/* Pinned dark \u2014 wins regardless of the OS setting. */\r\n:host([data-cv-theme='dark']),\r\n.cv-softphone[data-cv-theme='dark'] {\r\n  --cv-bg: #17171c;\r\n  --cv-surface: #202027;\r\n  --cv-surface-2: #27272a;\r\n  --cv-border: #2e2e33;\r\n  --cv-border-strong: #404044;\r\n  --cv-text: #fafafa;\r\n  --cv-muted: #a1a1aa;\r\n  --cv-faint: #71717a;\r\n  --cv-accent-strong: #34d399;\r\n  --cv-accent-light: #34d399;\r\n  --cv-accent-soft: #065f46;\r\n  --cv-danger-strong: #f87171;\r\n  --cv-danger-soft: #7f1d1d;\r\n  --cv-info-strong: #38bdf8;\r\n  --cv-info-soft: #0c4a6e;\r\n  --cv-shadow: 0 1px 2px rgb(0 0 0 / 0.4);\r\n}\r\n\r\n.cv-softphone,\r\n.cv-softphone *,\r\n.cv-softphone *::before,\r\n.cv-softphone *::after {\r\n  box-sizing: border-box;\r\n}\r\n\r\n/* \u2500\u2500 Shell \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-softphone {\r\n  display: flex;\r\n  flex-direction: column;\r\n\r\n  /* FILL the box the host gives us; do not assert one.\r\n     This was `width: 340px; height: 520px`, which is a component telling its host how big its\r\n     layout is. The CRM's panel is 310 wide, so the third keypad column was simply cut off \u2014 and no\r\n     amount of theming could have fixed it, because the widget was not asking. A component in\r\n     someone else's layout accepts a size. */\r\n  width: 100%;\r\n  height: 100%;\r\n\r\n  /* \u2026but a dialpad is not a spreadsheet. Given 900px it should not become a 900px dialpad with\r\n     300px keys; it should be itself, centred. Cap and centre rather than stretch. */\r\n  max-width: var(--cv-max-width, 420px);\r\n  margin-inline: auto;\r\n\r\n  /* Adapt to THIS box, not to the viewport. The widget can be 310px wide inside a 1920px screen \u2014\r\n     a media query would ask the wrong question and get a confident wrong answer. Container queries\r\n     are the only ones that know the truth, and a shadow root is the ideal place for them. */\r\n  container-type: inline-size;\r\n  container-name: cv;\r\n\r\n  background: var(--cv-bg);\r\n  overflow: hidden;\r\n  /* The containing block for `.cv-transfer-notices` \u2014 it overlays this whole shell, top edge to top\r\n     edge, not just `.cv-body`, so it reads as one seamless panel rather than a strip that starts a few\r\n     pixels short of the shell's own rounded corner. */\r\n  position: relative;\r\n\r\n  /* The frame is the HOST's call. The CRM's panel already draws `border rounded-xl shadow-2xl`, so\r\n     drawing our own put a card inside a card \u2014 nested chrome, which is always wrong. Defaulting to\r\n     a frame still suits a bare drop-in on a blank page; a host that has its own sets these to\r\n     `none` / `0` and the double edge disappears. */\r\n  border: var(--cv-shell-border, 1px solid var(--cv-border-strong));\r\n  border-radius: var(--cv-shell-radius, var(--cv-radius));\r\n  box-shadow: var(--cv-shell-shadow, 0 4px 24px rgb(0 0 0 / 0.06));\r\n}\r\n\r\n/* Narrow hosts \u2014 a sidebar, a phone-width column. Reclaim the horizontal padding first: at 260px\r\n   the gutters cost more than they give, and a cramped keypad is worse than a tight one. */\r\n@container cv (max-width: 300px) {\r\n  .cv-keypad { padding: 0 0.6rem; gap: 6px; }\r\n  .cv-dial-head { margin: 0 0.6rem 0.6rem; }\r\n}\r\n\r\n/* Short hosts. The flex chain already lets the keypad absorb what is left, but below this the keys\r\n   stop being tappable \u2014 so buy the height back from the chrome instead of from the keys. */\r\n@container cv (max-height: 440px) {\r\n  .cv-dial-head { margin-bottom: 0.4rem; }\r\n  .cv-dial-foot { padding-bottom: 0.5rem; }\r\n  .cv-controls { gap: 0.4rem; padding-bottom: 0.6rem; }\r\n}\r\n\r\n/* The flex chain that makes the layout work: body flexes, views fill it, only the\r\n   keypad/list grows. Without `min-height:0` a grid child refuses to shrink and overflows. */\r\n.cv-body {\r\n  flex: 1;\r\n  min-height: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n}\r\n.cv-view {\r\n  flex: 1;\r\n  min-height: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  /* Containing block for `.cv-detail` below \u2014 an absolute overlay must cover exactly THIS tab's\r\n     content, not escape to whatever the next positioned ancestor up the tree happens to be. */\r\n  position: relative;\r\n}\r\n\r\n/* \u2500\u2500 Tab bar \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-tabs {\r\n  display: flex;\r\n  border-top: 1px solid var(--cv-border);\r\n  background: var(--cv-bg);\r\n  flex-shrink: 0;\r\n}\r\n.cv-tab {\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 3px;\r\n  padding: 9px 0 8px;\r\n  background: none;\r\n  border: none;\r\n  color: var(--cv-muted);\r\n  cursor: pointer;\r\n  font: inherit;\r\n  transition: color 0.15s ease, background 0.15s ease;\r\n}\r\n.cv-tab:hover:not(:disabled) { background: var(--cv-surface); }\r\n.cv-tab[aria-selected='true'] { color: var(--cv-accent-strong); }\r\n.cv-tab:disabled { opacity: 0.35; cursor: not-allowed; }\r\n.cv-tab span { font-size: 10px; font-weight: 600; line-height: 1; letter-spacing: 0.01em; }\r\n\r\n/* \u2500\u2500 Transfer outcome notices (Phase A \u2014 transfer-outcome-relay.md \xA75.5) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/*\r\n  A persistent, dismissable banner OVER `.cv-body`, never a toast and never auto-dismissed \u2014 it carries\r\n  an action, and WCAG 2.2.1 requires a time limit to be removable, adjustable or extended.\r\n\r\n  Overlaps rather than reserving its own height, the same reasoning `.cv-dial-outcome`'s own comment\r\n  already gives for why the widget never lets a line of text resize the keypad under a moving finger \u2014\r\n  here that principle cuts the other way: appearing costs nothing but a repaint, not a reflow, so the\r\n  widget's overall height stays identical whether a notice is showing or not, exactly like `.cv-detail`\r\n  overlaying `.cv-body`'s own list rather than pushing it down. It sits over whatever the current tab\r\n  happens to be showing (most often the dialer's country picker and number field \u2014 an acceptable loss:\r\n  the agent is not expected to start a fresh manual dial before dealing with a transfer that just failed\r\n  to connect), which is also why it outranks `.cv-detail` in `z-index`.\r\n\r\n  `[data-has-notices='false']` collapses to zero footprint: the element stays mounted (so its\r\n  `role=\"status\"` region exists before the FIRST notice ever arrives \u2014 an aria-live region inserted at\r\n  the same moment as its own content is not reliably announced), but an idle widget, the common case,\r\n  covers nothing and costs no paint either.\r\n*/\r\n.cv-transfer-notices {\r\n  position: absolute;\r\n  inset: 0 0 auto 0;\r\n  z-index: 3; /* above `.cv-detail`'s 2 \u2014 this is the higher-priority thing on screen */\r\n}\r\n.cv-transfer-notices[data-has-notices='true'] {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.5rem;\r\n  padding: 0.6rem 0.75rem;\r\n  background: var(--cv-bg);\r\n  box-shadow: var(--cv-shadow);\r\n  animation: cv-transfer-notices-in 200ms var(--cv-ease-out) both;\r\n}\r\n@keyframes cv-transfer-notices-in {\r\n  from { opacity: 0; transform: translateY(-6px); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-transfer-notices[data-has-notices='true'] { animation: none; }\r\n}\r\n.cv-transfer-notices-count {\r\n  margin: 0;\r\n  font: 600 0.72rem var(--cv-font);\r\n  color: var(--cv-muted);\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.04em;\r\n}\r\n.cv-transfer-notice {\r\n  display: flex;\r\n  align-items: flex-start;\r\n  gap: 0.6rem;\r\n  padding: 0.65rem 0.7rem;\r\n  border-radius: var(--cv-radius-key);\r\n  border: 1px solid var(--cv-danger-soft);\r\n  background: var(--cv-surface);\r\n}\r\n/* Same shape as `.cv-gate-mark`, smaller \u2014 one visual language for \"here is a status\", not two. */\r\n.cv-transfer-notice-mark {\r\n  flex-shrink: 0;\r\n  display: grid;\r\n  place-items: center;\r\n  width: 30px;\r\n  height: 30px;\r\n  border-radius: 999px;\r\n  background: var(--cv-danger-soft);\r\n  color: var(--cv-danger);\r\n}\r\n.cv-transfer-notice-body { flex: 1; min-width: 0; }\r\n/*\r\n  Title shares its row with only the dismiss button (24px) \u2014 not the whole card's width, and not the\r\n  \"Llamar de vuelta\" button, which gets its own row below (`.cv-transfer-notice-footer`). The original\r\n  layout put mark + title + subtitle + a full button all in one flex row, leaving the title as little as\r\n  ~80px to wrap into at the real ~340px embed width \u2014 nearly every word landed on its own line.\r\n  `align-items: flex-start` keeps the dismiss pinned to the first line even when the title wraps to two.\r\n*/\r\n.cv-transfer-notice-header { display: flex; align-items: flex-start; gap: 0.4rem; }\r\n.cv-transfer-notice-title {\r\n  flex: 1;\r\n  min-width: 0;\r\n  margin: 0;\r\n  font: 600 0.82rem var(--cv-font);\r\n  color: var(--cv-text);\r\n  line-height: 1.35;\r\n}\r\n.cv-transfer-notice-subtitle {\r\n  margin: 0.15rem 0 0;\r\n  font-size: 0.78rem;\r\n  color: var(--cv-muted);\r\n  line-height: 1.35;\r\n}\r\n/* Age and the callback button share a row too, same reasoning as the header \u2014 a short fixed-width\r\n   timestamp beside a content-sized button, neither one fighting the title for space above. */\r\n.cv-transfer-notice-footer {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: space-between;\r\n  gap: 0.5rem;\r\n  margin-top: 0.35rem;\r\n}\r\n.cv-transfer-notice-age { margin: 0; font-size: 0.7rem; color: var(--cv-faint); flex-shrink: 0; }\r\n/*\r\n  `.cv-btn.cv-transfer-notice-callback` \u2014 TWO classes, not one. Equal-specificity selectors resolve by\r\n  source order, and this rule used to lose its `padding`/`font-size` to the shared `.cv-btn` rule below\r\n  simply because that one appears later in the file; the button rendered at full default CTA size\r\n  instead of this smaller, secondary one, which is what actually forced the title into that ~80px\r\n  column above. The extra class is what makes this override win regardless of source order.\r\n*/\r\n.cv-btn.cv-transfer-notice-callback {\r\n  flex-shrink: 0;\r\n  padding: 0.35rem 0.6rem;\r\n  font-size: 0.75rem;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n  white-space: nowrap;\r\n}\r\n/* Same round icon-only shape as `.cv-search-clear` \u2014 one dismiss affordance, not a new one. */\r\n.cv-transfer-notice-dismiss {\r\n  flex-shrink: 0;\r\n  width: 24px;\r\n  height: 24px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: none;\r\n  border-radius: 999px;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  cursor: pointer;\r\n  transition: color 0.12s ease, background 0.12s ease, transform 0.1s var(--cv-ease-out);\r\n}\r\n.cv-transfer-notice-dismiss:hover { color: var(--cv-text); background: var(--cv-surface-2); }\r\n.cv-transfer-notice-dismiss:active { transform: scale(0.88); }\r\n\r\n/* \u2500\u2500 Buttons \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-btn {\r\n  font: 600 0.875rem var(--cv-font);\r\n  cursor: pointer;\r\n  padding: 0.5rem 0.9rem;\r\n  border-radius: 10px;\r\n  border: 1px solid var(--cv-border-strong);\r\n  background: var(--cv-bg);\r\n  color: var(--cv-text);\r\n  transition: background 0.15s ease, transform 0.06s ease;\r\n}\r\n.cv-btn:hover:not(:disabled) { background: var(--cv-surface); }\r\n.cv-btn:active:not(:disabled) { transform: scale(0.97); }\r\n.cv-btn:disabled { opacity: 0.45; cursor: not-allowed; }\r\n.cv-btn--accent {\r\n  background: var(--cv-accent);\r\n  border-color: var(--cv-accent);\r\n  color: var(--cv-accent-contrast);\r\n}\r\n.cv-btn--accent:hover:not(:disabled) { background: var(--cv-accent-strong); }\r\n\r\n/* Round action buttons (answer / hangup / call) */\r\n.cv-round {\r\n  width: 64px;\r\n  height: 64px;\r\n  border-radius: 999px;\r\n  border: none;\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: #fff;\r\n  transition: background 0.15s ease, transform 0.08s ease, box-shadow 0.15s ease;\r\n}\r\n.cv-round:active:not(:disabled) { transform: scale(0.94); }\r\n.cv-round--answer {\r\n  background: var(--cv-accent);\r\n  box-shadow: 0 8px 20px -4px var(--cv-accent-soft);\r\n}\r\n.cv-round--answer:hover:not(:disabled) { background: var(--cv-accent-strong); }\r\n.cv-round--answer:disabled {\r\n  background: var(--cv-surface-2);\r\n  color: var(--cv-faint);\r\n  box-shadow: none;\r\n  cursor: not-allowed;\r\n}\r\n.cv-round--hangup {\r\n  background: var(--cv-danger);\r\n  box-shadow: 0 8px 20px -4px var(--cv-danger-soft);\r\n}\r\n.cv-round--hangup:hover:not(:disabled) { filter: brightness(0.94); }\r\n\r\n/* \u2500\u2500 Dialpad \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/* The number: ONE bordered field, the prefix inside it on the left and erase on the right \u2014 the pattern of the\r\n   providers' dialers (Talkdesk \"[\u{1F1FA}\u{1F1F8} +1 \u25BE | Type or paste a number]\", Zendesk, Aircall; outbound-number-per-agent.md\r\n   \xA75.5, 2026-10-26). The prefix is part of the number being dialled, so it sits inside the same box. The number\r\n   shrinks to fit (`DISPLAY_SIZES` in Dialpad.tsx). The field is the positioned ancestor of the country list, so the\r\n   list spans its width (`left: 0; right: 0`). */\r\n.cv-dial-head {\r\n  flex-shrink: 0;\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  height: 46px;\r\n  margin: 0 1rem 0.75rem;\r\n  padding: 0 0.2rem 0 0;\r\n  border: 1px solid var(--cv-border-strong);\r\n  border-radius: 10px;\r\n  background: var(--cv-bg);\r\n  transition: border-color 0.15s ease, box-shadow 0.15s ease;\r\n}\r\n/* With no \"Llamar desde\" line above it (an org with one number), the field opens the view. */\r\n.cv-view > .cv-dial-head:first-child { margin-top: 1rem; }\r\n/* Focus shows on the field, as on any input (WCAG 2.4.7): the accent border and a soft ring. */\r\n.cv-dial-head:focus-within {\r\n  border-color: var(--cv-accent);\r\n  box-shadow: 0 0 0 3px color-mix(in srgb, var(--cv-accent) 18%, transparent);\r\n}\r\n.cv-dial-head > .cv-cp {\r\n  position: static;\r\n  width: auto;\r\n  flex-shrink: 0;\r\n  align-self: stretch;\r\n}\r\n/* The prefix as the field's leading segment: the same chip, flush with the field, divided from the number. */\r\n.cv-dial-head .cv-cp-chip {\r\n  height: 100%;\r\n  padding: 0 0.45rem 0 0.65rem;\r\n  border: 0;\r\n  border-right: 1px solid var(--cv-border);\r\n  border-radius: 9px 0 0 9px;\r\n  background: var(--cv-surface);\r\n}\r\n.cv-dial-head .cv-cp-chip:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: -2px; }\r\n/* Following a number typed in full (\"+44 \u2026\"): read-only \u2014 the flag alone, no caret, no hover. */\r\n.cv-cp-chip[data-from-number] {\r\n  cursor: default;\r\n  padding: 0 0.6rem;\r\n}\r\n/*\r\n * The outcome of the last attempt, under the number.\r\n *\r\n * ALWAYS in the layout, visible or not. The keypad is `flex: 1` and absorbs whatever height is left,\r\n * so a line that appears and disappears would resize every key and shift the whole grid under the\r\n * user's finger \u2014 mid-dial, which is exactly when this text arrives. Reserving the row costs one line\r\n * of height and buys a keypad that never moves.\r\n */\r\n.cv-dial-outcome {\r\n  flex-shrink: 0;\r\n  margin: 0;\r\n  min-height: 1.15rem;\r\n  padding: 0 1rem;\r\n  text-align: center;\r\n  font-size: 0.78rem;\r\n  line-height: 1.15rem;\r\n  color: var(--cv-muted);\r\n  /*\r\n    One line, always. `error-text.test.ts` caps every outcome at 48 characters so nothing should ever\r\n    reach this \u2014 but a cap depends on whoever writes the next string remembering it, and the failure\r\n    it prevents is not cosmetic: the keypad below is `flex: 1`, so a second line resizes all twelve\r\n    keys and shifts the grid under a finger that is already moving. Truncating is visibly wrong and\r\n    harmless; reflowing the dialpad mid-dial is invisibly wrong and makes the user misdial.\r\n  */\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  /* Muted, not danger: the phone still works. A red line here would read as a broken phone. */\r\n  opacity: 0;\r\n  transition: opacity 150ms ease-out;\r\n}\r\n.cv-dial-outcome[data-shown='true'] {\r\n  opacity: 1;\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-dial-outcome {\r\n    transition: none;\r\n  }\r\n}\r\n\r\n/* Left-aligned after the prefix segment, as a phone field reads (\"+34 | 600 11 12 22\"). 1.375rem is the start of\r\n   `DISPLAY_SIZES`, which steps it down until a long number fits the field. */\r\n.cv-display {\r\n  flex: 1;\r\n  min-width: 0;\r\n  height: 100%;\r\n  font: 500 1.375rem var(--cv-font);\r\n  font-variant-numeric: tabular-nums;\r\n  letter-spacing: -0.01em;\r\n  text-align: left;\r\n  color: var(--cv-text);\r\n  border: none;\r\n  background: none;\r\n  padding: 0 0.6rem;\r\n  caret-color: var(--cv-accent);\r\n}\r\n/* `--cv-muted`, not `--cv-faint`: a placeholder is read like any text (4.5:1). */\r\n.cv-display::placeholder { color: var(--cv-muted); font-weight: 400; }\r\n/* The field around it shows focus (`.cv-dial-head:focus-within`). */\r\n.cv-display:focus { outline: none; }\r\n\r\n/* The spacer/erase pair keeps the number optically centred. */\r\n.cv-dial-side {\r\n  width: 36px;\r\n  height: 36px;\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: none;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  cursor: pointer;\r\n  border-radius: 999px;\r\n  transition: color 0.15s ease, opacity 0.15s ease, transform 0.06s ease;\r\n}\r\n.cv-dial-side:hover { color: var(--cv-text); }\r\n.cv-dial-side:active { transform: scale(0.9); }\r\n.cv-dial-side[data-hidden='true'] { opacity: 0; pointer-events: none; }\r\n\r\n/* THE layout fix: the keypad flexes to fill, and its rows share the space equally.\r\n   Keys must NOT use aspect-ratio \u2014 that overflows the shell and shoves the call button\r\n   under the tab bar. */\r\n.cv-keypad {\r\n  flex: 1;\r\n  min-height: 0;\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  grid-template-rows: repeat(4, 1fr);\r\n  gap: 8px;\r\n  padding: 0 1rem;\r\n}\r\n.cv-key {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 1px;\r\n  border-radius: var(--cv-radius-key);\r\n  border: 1px solid var(--cv-border);\r\n  background: var(--cv-bg);\r\n  box-shadow: var(--cv-shadow);\r\n  color: var(--cv-text);\r\n  cursor: pointer;\r\n  user-select: none;\r\n  transition: background 0.12s ease, transform 0.06s ease;\r\n}\r\n.cv-key:hover { background: var(--cv-surface); }\r\n.cv-key:active { transform: scale(0.95); background: var(--cv-surface-2); }\r\n.cv-key b { font: 500 1.25rem/1 var(--cv-font); }\r\n.cv-key small {\r\n  font-size: 9px;\r\n  font-weight: 600;\r\n  letter-spacing: 0.14em;\r\n  /* `muted` (was `faint`, 2.5:1): the letters are read when dialling a number written in letters (900-FLORES),\r\n     so they are text, held to 4.5:1 like any other (design critique, 2026-10-26). */\r\n  color: var(--cv-muted);\r\n  line-height: 1;\r\n}\r\n\r\n.cv-dial-foot {\r\n  flex-shrink: 0;\r\n  display: flex;\r\n  justify-content: center;\r\n  padding: 0.75rem 0 1rem;\r\n}\r\n\r\n/* \u2500\u2500 Active call \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-call {\r\n  flex: 1;\r\n  min-height: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 0.15rem;\r\n  text-align: center;\r\n  padding: 1rem;\r\n  /*\r\n    A REAL bug, found live (plan T7): the transfer picker's agent list can make this box's content\r\n    taller than the space `flex: 1` actually allocates it \u2014 the avatar/name/timer/status ABOVE the\r\n    picker are still shown while transferring, unlike `.cv-call-devices-inline`'s own \"swap the\r\n    content\" fix for the pre-connect devices screen. Without this, the overflow painted straight past\r\n    `.cv-call`'s own shrunk box and onto `.cv-controls` below it \u2014 not scroll, actual overlap, controls\r\n    rendered ON TOP of list rows. `overflow-y: auto` keeps any excess inside THIS box, scrollable,\r\n    exactly like `.cv-presence-list`'s own internal scroll already does for the list itself.\r\n  */\r\n  overflow-y: auto;\r\n}\r\n\r\n.cv-avatar-wrap { position: relative; margin-bottom: 0.85rem; }\r\n.cv-avatar {\r\n  position: relative;\r\n  width: 68px;\r\n  height: 68px;\r\n  border-radius: 999px;\r\n  /* accent \u2192 accent-strong (emerald 600\u2192700): white initials clear 3.77:1 at EVERY stop. Starting\r\n     the ramp at emerald-500 would look punchier but drop the light end to 2.54:1. */\r\n  background: linear-gradient(135deg, var(--cv-accent) 0%, var(--cv-accent-strong) 100%);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: #fff;\r\n  font: 700 1.3rem var(--cv-font);\r\n  letter-spacing: -0.01em;\r\n  box-shadow: 0 8px 20px -6px var(--cv-accent-soft);\r\n}\r\n/* A soft halo while ringing \u2014 the one moment worth animating. */\r\n.cv-avatar-ping {\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: 999px;\r\n  /* Decorative \u2014 nothing sits on it, so it uses the vivid emerald. */\r\n  background: var(--cv-accent-light);\r\n  opacity: 0.16;\r\n  animation: cv-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;\r\n  pointer-events: none;\r\n}\r\n@keyframes cv-ping {\r\n  0% { transform: scale(1); opacity: 0.22; }\r\n  80%, 100% { transform: scale(1.7); opacity: 0; }\r\n}\r\n.cv-avatar-dot {\r\n  position: absolute;\r\n  bottom: 1px;\r\n  right: 1px;\r\n  width: 14px;\r\n  height: 14px;\r\n  border-radius: 999px;\r\n  background: var(--cv-accent);\r\n  border: 2px solid var(--cv-bg);\r\n}\r\n\r\n.cv-call-name { font-size: 1rem; font-weight: 600; line-height: 1.2; }\r\n.cv-call-number { font-size: 0.75rem; color: var(--cv-muted); margin-top: 2px; }\r\n/* Which of the org's numbers this outbound call shows. Smaller than the callee: context, not identity \u2014 but muted,\r\n   not faint: --cv-faint is under 4.5:1 at this size in both themes, and the agent may need to read it mid-call. */\r\n.cv-call-from {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.25rem;\r\n  max-width: 100%;\r\n  margin-top: 4px;\r\n  font-size: 0.72rem;\r\n  color: var(--cv-muted);\r\n}\r\n.cv-call-from span {\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n\r\n.cv-timer {\r\n  display: flex;\r\n  align-items: baseline;\r\n  justify-content: center;\r\n  gap: 1px;\r\n  margin-top: 0.75rem;\r\n  color: var(--cv-accent-strong);\r\n}\r\n.cv-timer b {\r\n  font: 700 2.25rem/1 var(--cv-font);\r\n  font-variant-numeric: tabular-nums;\r\n  letter-spacing: -0.03em;\r\n}\r\n.cv-timer i {\r\n  font: 300 1.75rem/1 var(--cv-font);\r\n  font-style: normal;\r\n  color: var(--cv-accent);\r\n  animation: cv-blink 1.6s ease-in-out infinite;\r\n  margin: 0 1px;\r\n}\r\n@keyframes cv-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }\r\n\r\n.cv-call-status {\r\n  margin-top: 0.6rem;\r\n  font-size: 0.78rem;\r\n  color: var(--cv-muted);\r\n  letter-spacing: 0.04em;\r\n}\r\n.cv-badge-hold { color: var(--cv-hold); font-weight: 600; }\r\n\r\n/* \u2500\u2500 Device check (ringing / dialing / in-call) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   Before a call connects there is only ONE other control on screen (Colgar, or\r\n   Rechazar/Contestar) \u2014 putting Dispositivos in that same neighbourhood, even\r\n   spaced out, keeps it a mis-tap away from hanging up or answering. The entry\r\n   chip lives beside the call status instead, removing it from that neighbourhood\r\n   rather than just adding distance within it \u2014 same resting-pill SHAPE as `.cv-cp`\r\n   (CountryPicker), reused rather than invented fresh.\r\n\r\n   Opening it does NOT pop a panel into that same tight space, though \u2014 this\r\n   SDK's real production embed (a 310\xD7520 host panel with its own header eating\r\n   further into that) leaves too little free room around a trigger sitting in\r\n   vertically-centred content for a floating popover to open into without either\r\n   overlapping Colgar/Rechazar/Contestar or clamping itself down to something\r\n   cramped and scrolly for just two rows. `.cv-call-devices-inline` REPLACES the\r\n   avatar/name/status block in `.cv-call` instead (see that JSX's own comment) \u2014\r\n   an inline swap, not an overlay, so it gets the full box, not a leftover sliver.\r\n\r\n   Once connected it is the SAME chip and the SAME swap. Dispositivos used to be a fifth control in\r\n   the call row (with a floating popover), which is what forced that row down to 40px buttons and\r\n   9px labels in a 310px host. A set-once setting does not need a slot among the four things you do\r\n   mid-call (mute, hold, transfer, keypad), and the control row stays live under the swap.\r\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-call-devices-chip {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.35rem;\r\n  height: 26px;\r\n  padding: 0 0.65rem;\r\n  border: 1px solid var(--cv-border-strong);\r\n  border-radius: 999px;\r\n  background: var(--cv-bg);\r\n  color: var(--cv-muted);\r\n  font: 600 0.7rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;\r\n}\r\n.cv-call-devices-chip:hover { background: var(--cv-surface); }\r\n.cv-call-devices-chip:active { transform: scale(0.95); }\r\n\r\n/*\r\n  The entry-point row \u2014 ONE chip today (Dispositivos), up to two once a host configures\r\n  `incomingCallAction` (that one first: who is calling outranks a phone-utility setting). `width:\r\n  100%` + `flex-wrap` on purpose: a host's action label is arbitrary text this component cannot\r\n  assume is short, so two chips sit side by side when they fit and wrap onto their own centred line\r\n  when they do not, rather than overflowing `.cv-call`'s fixed width.\r\n*/\r\n.cv-call-chips {\r\n  width: 100%;\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  justify-content: center;\r\n  gap: 0.5rem;\r\n  margin-top: 0.65rem;\r\n}\r\n\r\n.cv-call-devices-inline {\r\n  width: 100%;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.9rem;\r\n  /* `.cv-call` centres and centre-aligns its normal (avatar) content \u2014 rows read left-aligned\r\n     everywhere else in the widget (Ajustes, the in-call popover), so this opts back out of both. */\r\n  text-align: left;\r\n  animation: cv-call-devices-in 0.18s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n@keyframes cv-call-devices-in {\r\n  from { opacity: 0; transform: translateY(6px); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-call-devices-inline { animation: none; }\r\n}\r\n.cv-call-devices-header { display: flex; align-items: center; gap: 0.5rem; }\r\n.cv-call-devices-title { font-size: 0.95rem; font-weight: 600; color: var(--cv-text); }\r\n/* `--cv-muted` on `--cv-bg` \u2014 the same already-verified pairing `.cv-settings-note` uses\r\n   (4.83:1 light / 6.97:1 dark), not a new one. */\r\n.cv-call-devices-context {\r\n  margin: 0;\r\n  font-size: 0.78rem;\r\n  color: var(--cv-muted);\r\n}\r\n\r\n/* \u2500\u2500 Call controls \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   TWO TIERS. Hang up is the one action that must never be hunted for, so it sits\r\n   alone, centred, and largest \u2014 the anchor. The secondaries flank above it. They\r\n   used to share a single row, where hang up was just the last button and carried\r\n   the same weight as \"transfer\"; mid-call, that is the wrong hierarchy.\r\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-controls {\r\n  flex-shrink: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 0.9rem;\r\n  padding: 0.35rem 1rem 1.1rem;\r\n  /* The containing block for `.cv-keypad-popover` \u2014 see that rule's own comment for why it is\r\n     anchored here rather than to the trigger button. */\r\n  position: relative;\r\n}\r\n/* FOUR controls, sized so they never need to shrink to fit. This row held five (Dispositivos too) and\r\n   the only way to fit five in the CRM's 310px host was a 40px button with a 9px label and ~6px gaps \u2014\r\n   below the 44/48px a thumb needs, and below legible for a word read mid-call. The default 48px size\r\n   below was never actually seen: it only applied above a 360px host, which no real embed is.\r\n   Dispositivos is the `.cv-call-chips` chip up by the call info instead (the same entry point the\r\n   ringing and dialing screens already use). 4 \xD7 52 + 3 \xD7 20 = 268px, inside 310 - 2 \xD7 16 padding. */\r\n.cv-controls-row {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 1.25rem;\r\n}\r\n.cv-controls-primary {\r\n  display: flex;\r\n  justify-content: center;\r\n  gap: 2.75rem;\r\n}\r\n/* Button + its word. The column keeps the label from widening the hit target. */\r\n.cv-ctrl-item {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n}\r\n/* 10px, muted: present when you look for it, silent when you don't. An icon-only\r\n   control is a quiz, and mid-call is the worst time to sit one. */\r\n.cv-ctrl-label {\r\n  font-size: 0.625rem;\r\n  line-height: 1;\r\n  color: var(--cv-muted);\r\n  white-space: nowrap;\r\n  user-select: none;\r\n}\r\n/* The four secondaries' words get a notch more than Colgar / Rechazar / Contestar's 10px \u2014 they are\r\n   the ones read mid-call, and the five-up row used to shrink them to 9px (8px in a sidebar). */\r\n.cv-controls-row .cv-ctrl-label { font-size: 0.6875rem; }\r\n.cv-ctrl {\r\n  width: 52px;\r\n  height: 52px;\r\n  border-radius: 999px;\r\n  border: 1px solid var(--cv-border-strong);\r\n  background: var(--cv-bg);\r\n  color: var(--cv-text);\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  transition: background 0.15s ease, color 0.15s ease, transform 0.06s ease;\r\n}\r\n.cv-ctrl:hover { background: var(--cv-surface); }\r\n.cv-ctrl:active { transform: scale(0.94); }\r\n.cv-ctrl:disabled {\r\n  opacity: 0.4;\r\n  cursor: not-allowed;\r\n  pointer-events: none;\r\n}\r\n\r\n/* The ON states say what they MEAN, in the widget's own tokens: muted is danger,\r\n   held is hold, transfer-open is accent. Colour is the state, not decoration. */\r\n.cv-ctrl[data-tone='danger'] {\r\n  background: var(--cv-danger);\r\n  border-color: var(--cv-danger);\r\n  color: #fff;\r\n}\r\n.cv-ctrl[data-tone='hold'] {\r\n  background: var(--cv-hold);\r\n  border-color: var(--cv-hold);\r\n  color: #fff;\r\n}\r\n.cv-ctrl[data-tone='accent'] {\r\n  background: var(--cv-accent-soft);\r\n  border-color: transparent;\r\n  color: var(--cv-accent-strong);\r\n}\r\n.cv-ctrl[data-tone]:hover { filter: brightness(0.95); }\r\n\r\n/* Muted is the one state worth animating: it is invisible, it is easy to forget,\r\n   and the cost of forgetting is talking to nobody. Same halo the avatar rings\r\n   with \u2014 one language, not two. */\r\n.cv-ctrl[data-tone='danger'] {\r\n  position: relative;\r\n}\r\n.cv-ctrl[data-tone='danger']::after {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  border-radius: 999px;\r\n  background: var(--cv-danger);\r\n  animation: cv-ping 1.6s cubic-bezier(0, 0, 0.2, 1) infinite;\r\n  pointer-events: none;\r\n  z-index: -1;\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-ctrl[data-tone='danger']::after { animation: none; opacity: 0; }\r\n}\r\n.cv-ctrl[aria-pressed='true'] {\r\n  background: var(--cv-text);\r\n  color: var(--cv-bg);\r\n  border-color: var(--cv-text);\r\n}\r\n\r\n/*\r\n  Sidebar-narrow (this file's own \u2264300px tier, up in \"Narrow hosts\"). The four 52px controls with\r\n  20px gaps need 268px, which a 260px host cannot give \u2014 so this tier steps down to 44px with 12px\r\n  gaps (4 \xD7 44 + 3 \xD7 12 = 212px) and reclaims `.cv-controls`'s own horizontal padding, the first\r\n  lever that block's own comment names. 44px is still the Apple HIG minimum tap target; the five-up\r\n  row this replaced went to 36px here.\r\n\r\n  Placed AFTER `.cv-controls`/`.cv-controls-row` above rather than up with this file's other\r\n  `@container` blocks near the top: `gap` and `padding-left`/`-right` here have the same specificity as\r\n  those base rules' own shorthand, so \u2014 unlike a compound selector such as `.cv-controls-row .cv-ctrl`,\r\n  which wins on specificity regardless of position \u2014 source order is what decides, and a narrower-width\r\n  override declared BEFORE the base rule it means to narrow loses to it. Confirmed live: moved up into\r\n  the \"Narrow hosts\" section, the `.cv-ctrl` width and label font-size reductions took effect (compound\r\n  selectors) but `gap` and `.cv-controls`'s padding silently did not (plain selectors, later base rule won).\r\n*/\r\n@container cv (max-width: 300px) {\r\n  .cv-controls { padding-left: 0.5rem; padding-right: 0.5rem; }\r\n  .cv-controls-row { gap: 0.75rem; }\r\n  .cv-controls-row .cv-ctrl { width: 44px; height: 44px; }\r\n  .cv-controls-row .cv-ctrl-label { font-size: 0.625rem; }\r\n}\r\n\r\n/*\r\n  The attended-transfer target-entry panel (`docs/specs/transfer-availability.md` \xA75): an optional\r\n  outcome line, then a row of whatever's actionable (input+button today). Once a consult exists,\r\n  `ConsultScreen` takes over the whole screen instead \u2014 this panel is ONLY ever the pre-consult /\r\n  retry-after-failure state now; it used to also cover the consulting/answered phases, which is why\r\n  its rule is a column container built for more than one child even though there's only ever one row\r\n  here today. (History: was two near-duplicate rules \u2014 `.cv-transfer` as a bare ROW,\r\n  `.cv-transfer-consult` as a column \u2014 until the row version turned out to be a real,\r\n  reproduced-in-browser bug: the optional `.cv-dial-outcome` message rendered as a THIRD item in the\r\n  same horizontal row as the input and button, squeezing the input to its content-minimum. Merged\r\n  rather than patched.)\r\n*/\r\n.cv-transfer {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.3rem;\r\n  width: 100%;\r\n  padding: 0.2rem 0.25rem 0;\r\n  /* `.cv-call` centres and centre-aligns its normal (avatar) content \u2014 same reasoning\r\n     `.cv-call-devices-inline` already opts out of for the OTHER inline swap in this box (its own\r\n     comment): rows read left-aligned everywhere else in the widget, and a centred context line\r\n     sitting directly above a left-aligned input/toggle/list read as two layouts stacked on top of\r\n     each other, found live (2026-09-29). */\r\n  text-align: left;\r\n  /* Found live (2026-09-29): `.cv-call`'s avatar/name/timer block used to sit ABOVE this,\r\n     unconditionally, so this panel only ever got whatever was left over \u2014 see the JSX call site's own\r\n     comment. Now that this IS the whole of `.cv-call`'s content while a transfer is in progress\r\n     (a swap, not an addition), it should CLAIM `.cv-call`'s available height, not just sit in it \u2014\r\n     `flex: 1` does that; `min-height: 0` is what lets a flex child actually shrink to fit instead of\r\n     forcing its parent to grow past it (the same reason `.cv-call`/`.cv-view`/`.cv-body` all set it,\r\n     see their own comments). This is what lets `.cv-presence-list` below flex-grow into real room\r\n     instead of needing its own hand-tuned `max-height` guess. */\r\n  flex: 1;\r\n  min-height: 0;\r\n  /* Same entrance `.cv-call-devices-inline` already uses for the analogous inline swap (its own\r\n     comment) \u2014 reused, not a second animation invented for this widget's second inline-swap view. */\r\n  animation: cv-call-devices-in 0.18s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-transfer { animation: none; }\r\n}\r\n/* The compact \"who am I still on the phone with\" line while the picker is open \u2014 reuses\r\n   `.cv-call-devices-inline`'s own two classes verbatim (`.cv-call-devices-title` for the name,\r\n   `.cv-call-devices-context` for the number/timer line) rather than inventing a second \"quiet header\"\r\n   style for the same widget; only the tiny stacking gap between them is new.\r\n\r\n   Found live (2026-09-29): `.cv-transfer`'s own `gap` alone gave every section \u2014 context, input row,\r\n   mode toggle, results list \u2014 the exact same spacing, so nothing read as its own group; the eye had\r\n   no cue for where \"who I'm on the phone with\" ends and \"pick a transfer target\" begins. This extra\r\n   `margin-bottom`, on top of the base `gap`, is that cue \u2014 the toggle stays close to the list it\r\n   controls (unchanged), only the boundary above the interactive controls opened up. */\r\n.cv-transfer-context {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  flex-shrink: 0;\r\n  margin-bottom: 0.35rem;\r\n}\r\n/* Plan T3: the mode toggle reuses `.cv-segmented` (HistoryTab's own filter control) as-is, but its\r\n   `margin-bottom` (needed THERE, where the surrounding layout has no gap of its own) is redundant\r\n   here \u2014 `.cv-transfer`'s own `gap` above already spaces every child, so the two would stack. Scoped\r\n   to this context only; HistoryTab's own copy is untouched. */\r\n.cv-transfer .cv-segmented { margin-bottom: 0; flex-shrink: 0; }\r\n.cv-transfer .cv-presence-legend { flex-shrink: 0; }\r\n/* Same treatment as `.cv-call-status` (the avatar's own \"Llamando\u2026\"/\"En espera\" line) \u2014 one muted\r\n   status-line vocabulary for the whole call screen, not a second one invented for this panel. */\r\n.cv-transfer-status {\r\n  margin: 0;\r\n  font-size: 0.78rem;\r\n  color: var(--cv-muted);\r\n  letter-spacing: 0.04em;\r\n}\r\n/* The target-entry/retry row: an input plus one button. */\r\n.cv-transfer-row {\r\n  display: flex;\r\n  gap: 0.5rem;\r\n}\r\n/*\r\n  Flex items default to `min-width: auto`, which floors them at their CONTENT size rather than letting\r\n  them shrink or grow to fill the row \u2014 `.cv-search`'s own `width: 100%` never actually took effect\r\n  here, because `.cv-btn`'s text (\"Llamar\") set an unshrinkable floor and the input, having no\r\n  `flex-grow`, never reclaimed the space left over. `flex: 1` + `min-width: 0` is what actually makes\r\n  an input-plus-button row behave like one; `flex: none` keeps the button at its natural size.\r\n*/\r\n.cv-transfer-row .cv-search {\r\n  flex: 1;\r\n  min-width: 0;\r\n}\r\n/* `max-width` + ellipsis: the label now includes whatever was typed (\"Llamar a {typed}\", spec \xA74.5)\r\n   and `truncateForButton` already bounds that in JS \u2014 this is the CSS backstop, so a value that\r\n   slips past it (a very wide character set, a future copy change) still can't push `.cv-search` down\r\n   to an unusable sliver the way the pre-truncation button did before this was noticed. */\r\n.cv-transfer-row .cv-btn {\r\n  flex: none;\r\n  max-width: 60%;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n/* The consult-answered row: one or two buttons, no input. */\r\n.cv-transfer-actions {\r\n  display: flex;\r\n  gap: 0.5rem;\r\n}\r\n.cv-transfer-actions .cv-btn {\r\n  flex: 1;\r\n}\r\n/* The ringing phase has only \"Cancelar\" \u2014 a secondary, low-stakes action. Letting the row's own\r\n   `flex: 1` stretch a LONE button edge to edge reads as oversized for what it is, and nothing else in\r\n   this widget sizes a single button to the full row; every other `.cv-btn` sizes to its content. */\r\n.cv-transfer-actions .cv-btn:only-child {\r\n  flex: none;\r\n}\r\n\r\n/*\r\n  The agent picker (spec \xA74.5, plan T7) \u2014 an inline, always-visible filtered list under the\r\n  input+button row, not a click-to-open popover like `.cv-person-filter-pop`: the whole point is that\r\n  typing already filters it, so hiding it behind a second interaction would undo that.\r\n\r\n  Redesigned live (2026-09-29): T7 (72px) and T3 (30px) both hand-tuned a `max-height` in PIXELS\r\n  against whatever else happened to be on screen at the time, and both were broken by the very next\r\n  addition above the list (T3's own toggle broke T7's number the same way this would keep breaking on\r\n  the next change) \u2014 down to \"barely proves the list is scrollable\" at 30px, which is what the user\r\n  was actually seeing: \"users cannot almost see any of the listed users.\" The real fix wasn't a bigger\r\n  magic number, it was `.cv-transfer`'s own move to `flex: 1` (see its comment) freeing real height\r\n  from the block that used to sit above this whole panel \u2014 `.cv-presence` and this list now flex-grow\r\n  into whatever's ACTUALLY left after the context line, input row, toggle and legend take their own\r\n  natural size, on whatever real height the host panel gives `.cv-call` (this SDK's fixed ~310\xD7520\r\n  embed today, but also whatever a different host gives it tomorrow \u2014 no more re-tuning a constant\r\n  every time something above the list changes). `.cv-call`'s own `overflow-y: auto` (its own comment)\r\n  is still the last-resort net if content ever genuinely doesn't fit; this just means that net should\r\n  now rarely, if ever, have to catch anything for a normal agent list.\r\n*/\r\n.cv-presence {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 0.35rem;\r\n  flex: 1;\r\n  min-height: 0;\r\n}\r\n.cv-presence-list {\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 2px;\r\n  flex: 1;\r\n  min-height: 0;\r\n  overflow-y: auto;\r\n  padding: 0.25rem;\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: var(--cv-radius-key);\r\n  background: var(--cv-surface);\r\n}\r\n.cv-presence-empty {\r\n  margin: 0;\r\n  padding: 0.5rem;\r\n  text-align: center;\r\n  font-size: 0.78rem;\r\n  color: var(--cv-muted);\r\n}\r\n.cv-presence-item {\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  padding: 0.4rem 0.5rem;\r\n  border: none;\r\n  border-radius: calc(var(--cv-radius) - 4px);\r\n  background: none;\r\n  color: var(--cv-text);\r\n  font: 400 0.8rem var(--cv-font);\r\n  text-align: left;\r\n  cursor: pointer;\r\n}\r\n.cv-presence-item:hover:not(:disabled) { background: var(--cv-surface-2); }\r\n/* En llamada rows are a hard block, not just a hint (CallScreen.tsx's own comment on the row has why)\r\n   \u2014 same `:disabled` treatment `.cv-btn`/`.cv-tab` already use elsewhere in this file, not a new pattern. */\r\n.cv-presence-item:disabled { opacity: 0.45; cursor: not-allowed; }\r\n.cv-presence-dot {\r\n  flex-shrink: 0;\r\n  width: 8px;\r\n  height: 8px;\r\n  border-radius: 999px;\r\n}\r\n/* Reuses existing intent tokens rather than inventing new ones \u2014 `--cv-accent` already means\r\n   \"good, reachable\" (the answer button), `--cv-hold` already means \"occupied elsewhere\" (the hold\r\n   toggle), and `--cv-faint` is this file's own DECORATIVE-only tier (see the `--cv-*` legend near the\r\n   top) \u2014 exactly what \"no signal for this person\" is, no signal being the whole point of that tier. */\r\n.cv-presence-dot[data-state='disponible'] { background: var(--cv-accent); }\r\n.cv-presence-dot[data-state='en_llamada'] { background: var(--cv-hold); }\r\n.cv-presence-dot[data-state='desconectado'] { background: var(--cv-faint); }\r\n.cv-presence-name {\r\n  flex: 1;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n.cv-presence-meta {\r\n  flex-shrink: 0;\r\n  font-size: 0.72rem;\r\n  color: var(--cv-muted);\r\n}\r\n/* Spec \xA74.6: Desconectado is a HINT, never \"can't transfer\" \u2014 this is what tells the agent so, right\r\n   under the list it describes. `--cv-muted`, NOT `--cv-faint`: this text is informational (the reader\r\n   needs it to not misread the state), and `--cv-faint` is reserved for decorative-only content that\r\n   fails AA on purpose \u2014 using it here would repeat the exact tier mistake this file's own `--cv-*`\r\n   comment block warns against. */\r\n.cv-presence-legend {\r\n  margin: 0;\r\n  font-size: 0.7rem;\r\n  color: var(--cv-muted);\r\n  line-height: 1.35;\r\n}\r\n\r\n/*\r\n  `ConsultScreen`'s \"someone is still waiting\" banner (`docs/specs/transfer-availability.md` \xA75, the\r\n  cross-talk fix) \u2014 full-width and tappable, not a passive status line, because the entire reason this\r\n  screen exists is to make \"go back to the caller\" impossible to miss. Neutral surface + the same\r\n  `--cv-hold` colour `.cv-badge-hold` already uses for the same fact elsewhere, not a new soft-fill\r\n  token: a text/icon tint on a plain surface is already proven legible here, and inventing an\r\n  unmeasured background-tint pairing risks a real contrast regression this file takes seriously\r\n  elsewhere (see the `-soft`/`-strong` split's own comments).\r\n*/\r\n.cv-consult-hold-banner {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 0.4rem;\r\n  width: 100%;\r\n  padding: 0.5rem 0.75rem;\r\n  border-radius: 999px;\r\n  border: 1px solid var(--cv-border);\r\n  background: var(--cv-surface);\r\n  color: var(--cv-hold);\r\n  font: 600 0.78rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: background 0.15s ease, border-color 0.15s ease;\r\n}\r\n.cv-consult-hold-banner:hover {\r\n  background: var(--cv-surface-2);\r\n  border-color: var(--cv-hold);\r\n}\r\n.cv-consult-hold-banner:active {\r\n  transform: scale(0.98);\r\n}\r\n\r\n@keyframes cv-pop-in-up {\r\n  from { opacity: 0; transform: translateY(4px) scale(0.97); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n\r\n/*\r\n  The in-call DTMF keypad \u2014 the one floating popover left on the call screen. (Dispositivos was the\r\n  other; it is inline content now, `.cv-call-devices-inline` above, in every call state.)\r\n\r\n  Opens UPWARD (`bottom: 100%`): the trigger sits at the bottom of the call screen, and there is no\r\n  room to open downward. Anchored to `.cv-controls`'s own horizontal padding \u2014 a container whose width\r\n  is bounded by ITS parent, never the narrow trigger itself \u2014 the same fix CountryPicker's own popover\r\n  needed (see its comment): anchoring to a narrow, off-centre trigger let the popover's edge reach\r\n  `.cv-softphone`'s `overflow: hidden` and get clipped.\r\n*/\r\n.cv-keypad-popover {\r\n  position: absolute;\r\n  z-index: 20;\r\n  display: grid;\r\n  grid-template-columns: repeat(3, 1fr);\r\n  gap: 8px;\r\n  padding: 0.85rem 1rem;\r\n  background: var(--cv-surface);\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: var(--cv-radius);\r\n  box-shadow: var(--cv-shadow);\r\n}\r\n.cv-keypad-popover--above {\r\n  bottom: 100%;\r\n  left: 1rem;\r\n  right: 1rem;\r\n  margin-bottom: 0.6rem;\r\n  transform-origin: bottom center;\r\n  animation: cv-pop-in-up 0.14s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n/* `.cv-key` already carries the full key look (border, hover, active-scale, digit/letter type) from\r\n   the pre-call dialer \u2014 only the size needs setting here, since this grid has no flex ancestor to\r\n   stretch the rows the way `.cv-keypad` gets to.\r\n\r\n   A fixed HEIGHT, not an `aspect-ratio`. This popover opens upward from `.cv-controls`, so it has\r\n   (host height - controls block - margin) to work with, and a ratio ties its height to the host's\r\n   WIDTH, which says nothing about how much height there is. Found live: the CRM's real body is 310\xD7473\r\n   (a 520px panel minus its 45px header), and a 1.3 ratio made this popover 285px \u2014 with the 184px\r\n   controls block that is 479px, so its top ~7px were clipped by `.cv-softphone`'s `overflow: hidden`.\r\n   48px keys give a 243px popover at ANY width, fit that host with room to spare, and stay at the\r\n   44-48px minimum tap target (the old ratio gave 45px keys at a 260px host, 58px at 310). */\r\n.cv-keypad-popover .cv-key {\r\n  height: 48px;\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-keypad-popover--above { animation: none; }\r\n}\r\n\r\n/* \u2500\u2500 Lists (contacts / history) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-list-head { flex-shrink: 0; padding: 0.85rem 1rem 0.5rem; }\r\n.cv-search {\r\n  width: 100%;\r\n  padding: 0.5rem 0.75rem;\r\n  border-radius: 10px;\r\n  border: 1px solid var(--cv-border-strong);\r\n  background: var(--cv-surface);\r\n  color: var(--cv-text);\r\n  font: inherit;\r\n  transition: border-color 0.15s ease, background 0.15s ease;\r\n  /* Found live (2026-09-29): in the transfer row specifically, `.cv-btn`'s own `max-width: 60%`\r\n     (needed for the dynamic \"Llamar a {typed}\" label) can leave the input narrower than its\r\n     placeholder text \u2014 an `<input>` has no native ellipsis, so it hard-clipped mid-word\r\n     (\"...o n\xFAm\") instead of trailing off cleanly. A real, if rare, risk for ANY `.cv-search` usage\r\n     wherever it's squeezed, not just this one row \u2014 the fix belongs on the base rule. */\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n.cv-search::placeholder { color: var(--cv-muted); }\r\n.cv-search:focus { outline: none; border-color: var(--cv-accent); background: var(--cv-bg); }\r\n\r\n/*\r\n  A wrapper around `.cv-search`, not a change to it \u2014 that class is also the transfer-target input\r\n  in CallScreen, which wants neither an icon nor a clear button. `.cv-search--icon` is an ADDITIVE\r\n  modifier on the input itself (padding only), so the base class is byte-for-byte what it was for\r\n  every other consumer.\r\n*/\r\n.cv-search-field { position: relative; display: flex; align-items: center; }\r\n.cv-search--icon { padding-left: 2.15rem; padding-right: 1.85rem; }\r\n.cv-search-icon {\r\n  position: absolute;\r\n  left: 0.75rem;\r\n  color: var(--cv-muted);\r\n  pointer-events: none;\r\n}\r\n.cv-search-clear {\r\n  position: absolute;\r\n  right: 0.5rem;\r\n  width: 22px;\r\n  height: 22px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border: none;\r\n  border-radius: 999px;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  cursor: pointer;\r\n  transition: color 0.12s ease, transform 0.1s var(--cv-ease-out);\r\n}\r\n.cv-search-clear:hover { color: var(--cv-text); }\r\n.cv-search-clear:active { transform: scale(0.88); }\r\n\r\n/* \u2500\u2500 Historial filters: status (Todas/Perdidas) + person \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-segmented {\r\n  display: flex;\r\n  gap: 2px;\r\n  padding: 2px;\r\n  border-radius: 10px;\r\n  background: var(--cv-surface-2);\r\n  margin-bottom: 0.4rem;\r\n}\r\n.cv-segmented-btn {\r\n  flex: 1;\r\n  padding: 0.35rem 0;\r\n  border: none;\r\n  border-radius: 8px;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  font: 600 0.75rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;\r\n}\r\n/* The active segment is stated by its own fill + shadow, not colour alone \u2014 the same reasoning\r\n   `.cv-item-action[data-tone='accent']`'s own comment gives for resting-state colour: a state that\r\n   only differs by hue must still read on a screen that renders neither. */\r\n.cv-segmented-btn[aria-selected='true'] {\r\n  background: var(--cv-bg);\r\n  color: var(--cv-text);\r\n  box-shadow: var(--cv-shadow);\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-segmented-btn { transition: none; }\r\n}\r\n\r\n/* The person filter \u2014 same combobox SHAPE as `.cv-cp-*` (CountryPicker): a chip opening a positioned\r\n   popover list with a checkmark on the active row. Not the same CLASSES: the two pickers have nothing\r\n   to do with each other and sharing a namespace would make a future change to one silently reach the\r\n   other. */\r\n.cv-person-filter { position: relative; width: 100%; }\r\n.cv-person-filter-chip {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.4rem;\r\n  width: 100%;\r\n  padding: 0.4rem 0.65rem;\r\n  border: 1px solid var(--cv-border-strong);\r\n  border-radius: 10px;\r\n  background: var(--cv-surface);\r\n  color: var(--cv-muted);\r\n  font: 500 0.78rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: background 0.15s ease, border-color 0.15s ease;\r\n}\r\n.cv-person-filter-chip:hover { background: var(--cv-surface-2); }\r\n/*\r\n  Border only, no fill \u2014 the popover opening and the caret rotating already say \"this is open\";\r\n  painting the whole width of a wide text pill solid green on top of that was the same over-strong\r\n  green the selected row had (see its own comment below). A coloured border is the same restrained\r\n  signal `.cv-search:focus` already uses for \"active\" elsewhere in this file.\r\n*/\r\n.cv-person-filter-chip[aria-expanded='true'] {\r\n  border-color: var(--cv-accent);\r\n}\r\n.cv-person-filter-label {\r\n  flex: 1;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n  text-align: left;\r\n  color: var(--cv-text);\r\n}\r\n.cv-person-filter-caret {\r\n  flex-shrink: 0;\r\n  transition: transform 0.18s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n.cv-person-filter-caret[data-open='true'] { transform: rotate(180deg); }\r\n.cv-person-filter-pop {\r\n  position: absolute;\r\n  top: calc(100% + 6px);\r\n  left: 0;\r\n  right: 0;\r\n  z-index: 20;\r\n  max-height: 220px;\r\n  overflow-y: auto;\r\n  padding: 0.25rem;\r\n  background: var(--cv-surface);\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: var(--cv-radius);\r\n  box-shadow: var(--cv-shadow);\r\n  transform-origin: top center;\r\n  animation: cv-cp-in 0.14s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-person-filter-pop { animation: none; }\r\n  .cv-person-filter-caret { transition: none; }\r\n}\r\n.cv-person-filter-item {\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  padding: 0.45rem 0.5rem;\r\n  border: none;\r\n  border-radius: calc(var(--cv-radius) - 4px);\r\n  background: none;\r\n  color: var(--cv-text);\r\n  font: 400 0.8rem var(--cv-font);\r\n  text-align: left;\r\n  cursor: pointer;\r\n}\r\n.cv-person-filter-item:hover { background: var(--cv-surface-2); }\r\n/*\r\n  NOT a solid `--cv-accent-soft` fill \u2014 that read as a wall of saturated green across a wide row,\r\n  much louder than the legacy CRM's own treatment for this exact list (`bg-emerald-50` \u2014 a barely-\r\n  there wash \u2014 plus coloured text, never a strong fill). Coloured, bold text + the checkmark carry\r\n  \"selected\" instead; `--cv-accent-strong` is already verified elsewhere in this file as AA against\r\n  `--cv-surface`, which is what this popover sits on.\r\n*/\r\n.cv-person-filter-item[aria-selected='true'] .cv-person-filter-name {\r\n  font-weight: 600;\r\n  color: var(--cv-accent-strong);\r\n}\r\n.cv-person-filter-name {\r\n  flex: 1;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n.cv-person-filter-check { color: var(--cv-accent-strong); flex-shrink: 0; }\r\n.cv-person-filter-check[data-on='false'] { opacity: 0; }\r\n\r\n.cv-list {\r\n  flex: 1;\r\n  min-height: 0;\r\n  overflow-y: auto;\r\n  padding: 0 0.5rem 0.5rem;\r\n}\r\n/*\r\n  Historial's day group header. Sticky within `.cv-list` (its nearest scrolling ancestor \u2014 a plain\r\n  wrapper div between the two does not break that), OPAQUE `--cv-bg` rather than a translucent\r\n  `/85 + backdrop-blur` treatment: it still needs to fully occlude rows scrolling underneath it, and\r\n  a flat match to the list's own background does that with no new CSS feature this file doesn't\r\n  already use elsewhere.\r\n*/\r\n.cv-history-day {\r\n  position: sticky;\r\n  top: 0;\r\n  z-index: 1;\r\n  padding: 0.5rem 0.6rem 0.35rem;\r\n  background: var(--cv-bg);\r\n  color: var(--cv-muted);\r\n  font-size: 0.68rem;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.04em;\r\n}\r\n.cv-item {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.7rem;\r\n  padding: 0.5rem;\r\n  border-radius: 12px;\r\n  /*\r\n    NOT `cursor: pointer` \u2014 this div has no click handler of its own; only its children\r\n    (`.cv-item-main`, `.cv-item-action`) do, and each already sets its own pointer cursor. Putting\r\n    it here too used to make the WHOLE row's box promise a click \u2014 its own padding, and the flex\r\n    `gap` between avatar/name/button \u2014 none of which does anything when clicked. Most noticeable\r\n    right where one row's padding meets the next, which reads as \"there's something clickable\r\n    between these two contacts\" when there is not.\r\n  */\r\n  transition: background 0.12s ease;\r\n  text-align: left;\r\n  width: 100%;\r\n  border: none;\r\n  background: none;\r\n  font: inherit;\r\n  color: inherit;\r\n}\r\n.cv-item:hover { background: var(--cv-surface); }\r\n.cv-item-avatar {\r\n  width: 40px;\r\n  height: 40px;\r\n  border-radius: 999px;\r\n  /*\r\n    RADIAL, not diagonal \u2014 deliberately. The initials sit centered, so a radial gradient puts them\r\n    at its lightest point (pure `--cv-surface`) no matter what, while the edges still darken toward\r\n    `--cv-surface-2` for the same cheap depth a diagonal gradient gave. A diagonal version measured\r\n    4.39:1 for `--cv-muted` text at its far corner \u2014 under the 4.5:1 text needs \u2014 because centered\r\n    text's exact position against a DIAGONAL gradient depends on glyph width, not just circle size.\r\n    Centering the gradient on the centered text removes that dependency entirely, structurally,\r\n    rather than nudging a token and hoping the margin holds. Both stops stay tokens, so this is\r\n    still theme-correct for free \u2014 a hardcoded gray gradient would not adapt to dark mode.\r\n  */\r\n  background: radial-gradient(circle, var(--cv-surface), var(--cv-surface-2));\r\n  /*\r\n    Without this, the circle's own boundary can vanish: `.cv-item:hover` sets the ROW background to\r\n    `--cv-surface` \u2014 the exact color the gradient above STARTS at (1.00 contrast ratio, i.e.\r\n    identical) in both themes. `--cv-border-strong` is the same token `.cv-search`'s border already\r\n    uses against this same surface a few rules up \u2014 a pairing already proven visible, not a new one.\r\n  */\r\n  border: 1px solid var(--cv-border-strong);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: var(--cv-muted);\r\n  font-size: 0.78rem;\r\n  font-weight: 700;\r\n  flex-shrink: 0;\r\n}\r\n/*\r\n  The Historial row's status chip \u2014 WHY a call needs colour at all: direction is already the icon's\r\n  shape (an arrow in/out), but \"did this connect\" is not shape-able, and a flat grey circle made every\r\n  row look identical at a glance. Small badge, not a row-wide fill (that mistake already got made once\r\n  on the person filter \u2014 see its own comment): a 40px circle reads as a status glyph, the same way a\r\n  colored icon-badge does anywhere else; a wide fill reads as decoration competing with the text next\r\n  to it. `--danger-strong`/`--accent-strong` (not the plain base tokens) because the base tokens\r\n  measure BELOW 3:1 non-text contrast against their own `-soft` fill \u2014 `--cv-danger` on\r\n  `--cv-danger-soft` is 2.6:1; `--cv-danger-strong` is 4.47:1 light / 3.62:1 dark, measured.\r\n*/\r\n.cv-item-avatar[data-tone='accent'] { background: var(--cv-accent-soft); color: var(--cv-accent-strong); }\r\n.cv-item-avatar[data-tone='info'] { background: var(--cv-info-soft); color: var(--cv-info-strong); }\r\n.cv-item-avatar[data-tone='danger'] { background: var(--cv-danger-soft); color: var(--cv-danger-strong); }\r\n/* A button, reset to look like plain content \u2014 the row is a container, not a control. */\r\n.cv-item-main {\r\n  flex: 1;\r\n  min-width: 0;\r\n  display: block;\r\n  border: none;\r\n  background: none;\r\n  padding: 0;\r\n  font: inherit;\r\n  color: inherit;\r\n  text-align: left;\r\n  cursor: pointer;\r\n  transition: transform 0.1s var(--cv-ease-out);\r\n}\r\n.cv-item-main:disabled { cursor: default; }\r\n.cv-item-main:not(:disabled):active { transform: scale(0.985); }\r\n.cv-item-name {\r\n  display: block;\r\n  font-weight: 600;\r\n  font-size: 0.875rem;\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n/*\r\n  14px bold does not clear WCAG's large-text bar (18.66px bold) \u2014 this text needs the full 4.5:1, not\r\n  the 3:1 large-text minimum. `--cv-danger-strong`: 6.47:1 light / 6.46:1 dark against `--cv-bg`,\r\n  measured; the plain `--cv-danger` this used to be was only 3.76:1 light \u2014 a real (if marginal) fail.\r\n*/\r\n.cv-item-name[data-tone='danger'] { color: var(--cv-danger-strong); }\r\n.cv-item-sub {\r\n  display: block;\r\n  font-size: 0.72rem;\r\n  color: var(--cv-muted);\r\n  margin-top: 1px;\r\n  font-variant-numeric: tabular-nums;\r\n}\r\n.cv-item-sub-outcome { color: var(--cv-danger-strong); }\r\n/*\r\n  Decorative reinforcement, not the sole carrier \u2014 the row's own play button is what says \"this call\r\n  has a recording\" (it only renders when one exists); this is a small hint IN the metadata line that\r\n  the button is worth pressing, so `--cv-faint` (2.5:1, documented above as decorative-only) is the\r\n  right tier here, same reasoning `.cv-empty-icon`/`.cv-gate-mark` already use for icons next to real\r\n  text rather than standing alone.\r\n\r\n  `display: inline-flex` is load-bearing, not decoration \u2014 every OTHER inline icon in this file gets\r\n  an explicit `display` for the same reason: `/react` + `/ui` render straight into the host's light\r\n  DOM (no shadow root), so a host reset like Tailwind Preflight's `svg { display: block }` reaches\r\n  this element directly. Without an explicit override here, that reset knocks the icon onto its own\r\n  line instead of trailing the duration text it is meant to sit beside.\r\n*/\r\n.cv-item-sub-rec {\r\n  display: inline-flex;\r\n  color: var(--cv-faint);\r\n  margin-left: 0.3rem;\r\n  vertical-align: -1px;\r\n}\r\n.cv-item-action {\r\n  width: 34px;\r\n  height: 34px;\r\n  border-radius: 999px;\r\n  border: none;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  cursor: pointer;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  flex-shrink: 0;\r\n  transition: background 0.12s ease, color 0.12s ease, transform 0.1s var(--cv-ease-out);\r\n}\r\n.cv-item-action:hover { background: var(--cv-accent); color: #fff; }\r\n.cv-item-action:active { transform: scale(0.9); }\r\n/*\r\n  The call action specifically (ContactsTab) \u2014 NOT History's \"play recording\", which shares this\r\n  same class and must stay neutral; a play button has no reason to be accent-colored. Scoped with\r\n  `data-tone`, the same modifier convention `.cv-ctrl[data-tone]` already uses elsewhere in this file.\r\n\r\n  Coloured at REST, not just on hover: a hover-only reveal never fires on a touchscreen, so the one\r\n  affordance that most needs to read as \"you can tap this\" would be invisible on exactly the devices\r\n  a phone widget is likeliest to run on. `accent-strong` is already verified elsewhere in this file\r\n  as AA on a surface; `accent-soft` is the same hover tint `.cv-ctrl[data-tone='accent']` uses, just\r\n  transparent at rest so fifty rows of solid fill never turns the list into a wall of green.\r\n*/\r\n.cv-item-action[data-tone='accent'] { color: var(--cv-accent-strong); }\r\n.cv-item-action[data-tone='accent']:hover { background: var(--cv-accent-soft); color: var(--cv-accent-strong); }\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-item-main, .cv-item-action, .cv-search-clear { transition: none; }\r\n}\r\n\r\n.cv-empty {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  height: 100%;\r\n  color: var(--cv-muted);\r\n  text-align: center;\r\n  padding: 2.5rem 1.25rem;\r\n  font-size: 0.82rem;\r\n}\r\n.cv-empty-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 48px;\r\n  height: 48px;\r\n  border-radius: 999px;\r\n  background: var(--cv-surface);\r\n  color: var(--cv-faint);\r\n  margin-bottom: 0.75rem;\r\n}\r\n.cv-empty-title { margin: 0; font-size: 0.85rem; font-weight: 600; color: var(--cv-muted); }\r\n/*\r\n  `--cv-muted`, NOT `--cv-faint` \u2014 this file documents faint as \"decorative only... never\r\n  information\" (2.5:1, below AA), and this line IS information: it is the reason the list is\r\n  empty, sometimes echoing the user's own search back to them. `--cv-faint` here measured 2.54:1\r\n  light / 3.70:1 dark against a 4.5:1 bar \u2014 a real failure, not a rounding difference.\r\n*/\r\n.cv-empty-sub { margin: 0.2rem 0 0; font-size: 0.75rem; color: var(--cv-muted); }\r\n.cv-empty-spinner {\r\n  margin-bottom: 0.75rem;\r\n  animation: cv-spin 0.8s linear infinite;\r\n  /* A loading spinner's rotation IS the information, with no static equivalent \u2014 unlike this\r\n     file's other motion, it stays exempt from reduced-motion rather than freezing into a shape\r\n     that would just look stuck. Colour comes from `.cv-empty`'s own `color: var(--cv-muted)` \u2014\r\n     the spinner no longer sets its own, now that it sits next to real text instead of standing\r\n     alone: the icon is decorative reinforcement, same as `.cv-empty-icon`, not the sole carrier. */\r\n}\r\n@keyframes cv-spin {\r\n  to { transform: rotate(360deg); }\r\n}\r\n\r\n/* The scroll-triggered \"load more\" marker \u2014 see `useInfiniteList`. Never visible itself; a small\r\n   height so it has a real box for the `IntersectionObserver` to track. */\r\n.cv-list-sentinel {\r\n  height: 1px;\r\n}\r\n.cv-list-loading-more {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  padding: 0.75rem 0 0.25rem;\r\n  color: var(--cv-muted);\r\n}\r\n/* Exempt from reduced-motion for the same reason `.cv-empty-spinner` is \u2014 see its own comment. */\r\n.cv-list-loading-more-spinner {\r\n  animation: cv-spin 0.8s linear infinite;\r\n}\r\n\r\n/* \u2500\u2500 Contact detail (overlays the list) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-detail {\r\n  position: absolute;\r\n  inset: 0;\r\n  /* Above the list's own sticky day-group header (`.cv-history-day`, z-index: 1) \u2014 otherwise\r\n     that header's z-index wins the stacking fight wherever its unscrolled flow position happens\r\n     to land on top of this overlay, and it paints through despite both having an opaque bg. */\r\n  z-index: 2;\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: var(--cv-bg);\r\n  animation: cv-detail-in 220ms var(--cv-ease-out) both;\r\n}\r\n@keyframes cv-detail-in {\r\n  from { opacity: 0; transform: translateX(10px); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-detail { animation: none; }\r\n}\r\n\r\n.cv-detail-head { flex-shrink: 0; padding: 0.6rem 0.5rem 0; }\r\n.cv-detail-back {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n  padding: 0.4rem 0.5rem;\r\n  border: none;\r\n  border-radius: 8px;\r\n  background: none;\r\n  color: var(--cv-muted);\r\n  font: 600 0.82rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: color 0.12s ease, transform 0.1s var(--cv-ease-out);\r\n}\r\n.cv-detail-back:hover { color: var(--cv-text); }\r\n.cv-detail-back:active { transform: scale(0.97); }\r\n\r\n.cv-detail-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0 1.25rem; }\r\n.cv-detail-identity {\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  text-align: center;\r\n  padding: 0.75rem 0 1.5rem;\r\n}\r\n.cv-detail-avatar {\r\n  width: 72px;\r\n  height: 72px;\r\n  border-radius: 999px;\r\n  /* Same radial + border treatment as `.cv-item-avatar` (see its own comment), just larger. Neutral\r\n     by default \u2014 a contact has no \"status\" to colour. `HistoryDetail` overrides both with `[data-tone]`\r\n     below: a call DOES have one, the same one the list row already shows, so the hero avatar staying\r\n     grey there would be information the list already gave up on repeating here. */\r\n  background: radial-gradient(circle, var(--cv-surface), var(--cv-surface-2));\r\n  border: 1px solid var(--cv-border-strong);\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  color: var(--cv-muted);\r\n  font-size: 1.35rem;\r\n  font-weight: 700;\r\n  margin-bottom: 0.85rem;\r\n}\r\n/* Same token pairs already verified for `.cv-item-avatar[data-tone]` \u2014 size doesn't change a contrast\r\n   ratio, so no new numbers to measure here. */\r\n.cv-detail-avatar[data-tone='accent'] { background: var(--cv-accent-soft); color: var(--cv-accent-strong); border-color: transparent; }\r\n.cv-detail-avatar[data-tone='info'] { background: var(--cv-info-soft); color: var(--cv-info-strong); border-color: transparent; }\r\n.cv-detail-avatar[data-tone='danger'] { background: var(--cv-danger-soft); color: var(--cv-danger-strong); border-color: transparent; }\r\n.cv-detail-name {\r\n  margin: 0;\r\n  font-size: 1.1rem;\r\n  font-weight: 700;\r\n  color: var(--cv-text);\r\n  letter-spacing: -0.01em;\r\n}\r\n.cv-detail-name[data-tone='danger'] { color: var(--cv-danger-strong); }\r\n.cv-detail-meta {\r\n  margin: 0.2rem 0 0;\r\n  font-size: 0.78rem;\r\n  color: var(--cv-muted);\r\n}\r\n\r\n/* \u2500\u2500 Call detail: recording \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-detail-recording { margin-bottom: 1rem; }\r\n.cv-detail-recording-label {\r\n  margin: 0 0 0.4rem;\r\n  padding: 0 0.15rem;\r\n  font-size: 0.68rem;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.03em;\r\n  color: var(--cv-muted);\r\n}\r\n.cv-detail-audio { width: 100%; display: block; }\r\n.cv-detail-audio + .cv-detail-audio { margin-top: 0.5rem; }\r\n.cv-detail-recording-status {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  margin: 0 0 1rem;\r\n  padding: 0.65rem 0.75rem;\r\n  border-radius: 12px;\r\n  background: var(--cv-surface);\r\n  color: var(--cv-muted);\r\n  font-size: 0.78rem;\r\n}\r\n/*\r\n  Text colour only, same neutral `--cv-surface` background the other states use \u2014 NOT a\r\n  `--cv-danger-soft` fill. Measured first, not assumed: `--cv-danger-strong` on `--cv-danger-soft`\r\n  is 3.34:1 light / 3.62:1 dark, well under the 4.5:1 this 0.78rem text needs (it only ever cleared\r\n  the SEPARATE 3:1 non-text bar this token was built for \u2014 an icon on that badge, not body text on\r\n  it). Same lesson the person-filter fix already paid for: a badge-strength pairing that works for an\r\n  icon is not automatically safe for text.\r\n*/\r\n.cv-detail-recording-status--warn { color: var(--cv-danger-strong); }\r\n.cv-detail-recording-spinner { animation: cv-spin 0.8s linear infinite; flex-shrink: 0; }\r\n\r\n/* \u2500\u2500 Call detail: who handled it \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-detail-handlers { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }\r\n.cv-detail-handler-hop { display: inline-flex; align-items: center; gap: 0.3rem; }\r\n.cv-detail-handler-arrow { color: var(--cv-faint); flex-shrink: 0; }\r\n.cv-detail-handler-chip {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n  padding: 0.15rem 0.5rem;\r\n  border-radius: 999px;\r\n  background: var(--cv-surface-2);\r\n  color: var(--cv-text);\r\n  font-size: 0.75rem;\r\n  font-weight: 600;\r\n}\r\n/* The LAST hop \u2014 the one the call actually ended with \u2014 is the one worth a glance first. */\r\n.cv-detail-handler-chip[data-tone='accent'] { background: var(--cv-accent-soft); color: var(--cv-accent-strong); }\r\n.cv-detail-handler-ext {\r\n  font-weight: 400;\r\n  font-variant-numeric: tabular-nums;\r\n  opacity: 0.75;\r\n}\r\n\r\n.cv-detail-rows {\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: 14px;\r\n  overflow: hidden;\r\n  background: var(--cv-bg);\r\n}\r\n.cv-detail-row {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.7rem;\r\n  width: 100%;\r\n  padding: 0.7rem 0.85rem;\r\n  border: none;\r\n  border-top: 1px solid var(--cv-border);\r\n  background: none;\r\n  font: inherit;\r\n  color: inherit;\r\n  text-align: left;\r\n}\r\n.cv-detail-row:first-child { border-top: none; }\r\n.cv-detail-row--action {\r\n  cursor: pointer;\r\n  transition: background 0.12s ease;\r\n}\r\n.cv-detail-row--action:hover { background: var(--cv-surface); }\r\n.cv-detail-row-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 999px;\r\n  background: var(--cv-surface-2);\r\n  /*\r\n    Without this the circle nearly vanishes into its own row: `--cv-surface-2` measures only ~1.1:1\r\n    against the row's rest-state background and ~1.05:1 against `--cv-surface`, the color\r\n    `.cv-detail-row--action:hover` sets the ROW to \u2014 both far below a readable boundary, and worse\r\n    than `.cv-item-avatar`/`.cv-detail-avatar` above even manage WITH their border (1.18:1 light /\r\n    1.57:1 dark). Same token, same fix, same reason.\r\n  */\r\n  border: 1px solid var(--cv-border-strong);\r\n  color: var(--cv-muted);\r\n  flex-shrink: 0;\r\n}\r\n.cv-detail-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }\r\n.cv-detail-row-eyebrow {\r\n  font-size: 0.68rem;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.03em;\r\n  color: var(--cv-muted);\r\n}\r\n.cv-detail-row-value {\r\n  font-size: 0.85rem;\r\n  font-weight: 500;\r\n  color: var(--cv-text);\r\n  white-space: nowrap;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n.cv-detail-row-chevron { color: var(--cv-faint); flex-shrink: 0; }\r\n/* A second line under a row's value, for two facts that would each be cut off sharing one line (\"Llamada desde\":\r\n   the name the org gave the number, then the number). */\r\n.cv-detail-row-sub {\r\n  display: block;\r\n  font-size: 0.75rem;\r\n  font-weight: 400;\r\n  color: var(--cv-muted);\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n}\r\n\r\n.cv-detail-foot { flex-shrink: 0; padding: 0.85rem 1.25rem 1.1rem; }\r\n.cv-detail-call { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.4rem; }\r\n\r\n/* \u2500\u2500 Settings tab (device selection, SPEC \xA77 Phase 2) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-settings-body {\r\n  flex: 1;\r\n  min-height: 0;\r\n  overflow-y: auto;\r\n  padding: 1rem;\r\n  display: flex;\r\n  flex-direction: column;\r\n  /* Generous separation BETWEEN sections, deliberately larger than any gap inside one \u2014 grouping\r\n     only reads as grouping if the space between groups is clearly bigger than the space within one\r\n     (see impeccable's layout guidance: \"tight grouping, generous separation\"). */\r\n  gap: 1.5rem;\r\n}\r\n\r\n/*\r\n  One labeled group (`SettingsSection`): a title, and a bordered body holding its rows. Ajustes\r\n  started as a flat list of two rows with nothing to say they were related \u2014 fine for exactly two\r\n  rows, unreadable the moment an unrelated third setting lands with nothing to tell it apart from\r\n  the device rows above it.\r\n\r\n  The body is ONE card, not a card per row: `.cv-settings-row`/`.cv-settings-note` below carry no\r\n  border or background of their own, only a divider between siblings \u2014 the same shape\r\n  `.cv-detail-rows`/`.cv-detail-row` already use elsewhere in this file, and deliberately not a\r\n  stack of individually-bordered cards (nested-card territory).\r\n*/\r\n.cv-settings-section { display: flex; flex-direction: column; gap: 0.5rem; }\r\n.cv-settings-section-title {\r\n  margin: 0;\r\n  padding: 0 0.2rem;\r\n  font-size: 0.7rem;\r\n  font-weight: 700;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.04em;\r\n  color: var(--cv-muted);\r\n}\r\n.cv-settings-section-body {\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: 14px;\r\n  background: var(--cv-bg);\r\n  overflow: hidden;\r\n}\r\n.cv-settings-section-body > * { padding: 0.75rem 0.85rem; }\r\n.cv-settings-section-body > *:not(:first-child) { border-top: 1px solid var(--cv-border); }\r\n\r\n.cv-settings-row { display: flex; align-items: center; gap: 0.7rem; }\r\n/* Same treatment as `.cv-detail-row-icon`, same reason \u2014 see its own comment on why the border is\r\n   load-bearing: `--cv-surface-2` alone nearly vanishes into the section's own background. */\r\n.cv-settings-row-icon {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  width: 32px;\r\n  height: 32px;\r\n  border-radius: 999px;\r\n  background: var(--cv-surface-2);\r\n  border: 1px solid var(--cv-border-strong);\r\n  color: var(--cv-muted);\r\n  flex-shrink: 0;\r\n}\r\n.cv-settings-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.35rem; }\r\n/* Same pairing as `.cv-detail-row-eyebrow` (`--cv-muted` on `--cv-bg`), verified there already. */\r\n.cv-settings-row-label {\r\n  font-size: 0.68rem;\r\n  font-weight: 600;\r\n  text-transform: uppercase;\r\n  letter-spacing: 0.03em;\r\n  color: var(--cv-muted);\r\n}\r\n.cv-settings-select {\r\n  width: 100%;\r\n  padding: 0.45rem 0.6rem;\r\n  border-radius: 8px;\r\n  border: 1px solid var(--cv-border-strong);\r\n  background: var(--cv-surface);\r\n  color: var(--cv-text);\r\n  font: inherit;\r\n  font-size: 0.85rem;\r\n  transition: border-color 0.15s ease, background 0.15s ease;\r\n}\r\n.cv-settings-select:focus { outline: none; border-color: var(--cv-accent); background: var(--cv-bg); }\r\n.cv-settings-empty { font-size: 0.85rem; color: var(--cv-muted); }\r\n\r\n/* `--cv-danger-strong` is the AS-TEXT danger token (see its definition): red-600 on the light `--cv-bg`,\r\n   red-400 on the dark one. */\r\n.cv-settings-error { margin: 0.6rem 0.2rem 0; font-size: 0.78rem; line-height: 1.4; color: var(--cv-danger-strong); }\r\n/* Why the choice cannot change right now, and until when (N\xFAmero de salida). Calm, like the dialpad's notice: the\r\n   phone keeps working. Above the list, so it is in sight of the row just tapped. */\r\n.cv-settings-notice {\r\n  margin: 0 0 0.75rem;\r\n  padding: 0.6rem 0.75rem;\r\n  border-radius: 10px;\r\n  background: var(--cv-surface-2);\r\n  color: var(--cv-text);\r\n  font-size: 0.78rem;\r\n  line-height: 1.4;\r\n}\r\n.cv-settings-notice[data-kind='error'] { color: var(--cv-danger-strong); }\r\n\r\n/*\r\n  Ajustes as a list (custom-ringtone.md \xA74.6, revised 2026-10-14): each row names a setting, shows its CURRENT\r\n  value under the name, and opens a page. Same icon circle and dividers as the device rows above (they live in\r\n  the same `.cv-settings-section-body`, which supplies the padding and the dividers), same chevron as\r\n  `.cv-detail-row--action` \u2014 one row vocabulary across the widget.\r\n*/\r\n.cv-settings-nav {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.7rem;\r\n  width: 100%;\r\n  border: none;\r\n  background: none;\r\n  font: inherit;\r\n  color: inherit;\r\n  text-align: left;\r\n}\r\nbutton.cv-settings-nav { cursor: pointer; transition: background 0.12s ease; }\r\nbutton.cv-settings-nav:hover { background: var(--cv-surface); }\r\nbutton.cv-settings-nav:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: -2px; }\r\n.cv-settings-nav-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }\r\n.cv-settings-nav-title { font-size: 0.88rem; font-weight: 600; color: var(--cv-text); }\r\n/* One line, cut with an ellipsis \u2014 the full device name is on its page. `--cv-muted` on `--cv-bg` is the\r\n   pairing already verified for `.cv-settings-note`. The static row (a note, no page) may wrap instead. */\r\n.cv-settings-nav-value {\r\n  font-size: 0.8rem;\r\n  color: var(--cv-muted);\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n.cv-settings-nav--static .cv-settings-nav-value { white-space: normal; line-height: 1.45; }\r\n.cv-settings-nav-chevron { flex-shrink: 0; color: var(--cv-muted); }\r\n\r\n/* A settings page: the `.cv-detail` overlay (entrance, back button, reduced motion all inherited) with a\r\n   scrolling body of its own. */\r\n.cv-settings-page-body { flex: 1; min-height: 0; overflow-y: auto; padding: 0.25rem 1rem 1rem; }\r\n.cv-settings-page-title {\r\n  margin: 0.15rem 0.2rem 0.35rem;\r\n  font-size: 1.05rem;\r\n  font-weight: 700;\r\n  letter-spacing: -0.01em;\r\n  color: var(--cv-text);\r\n}\r\n/* Focus lands here on open (for keyboard and screen-reader users); a ring on a heading would only look\r\n   like a stray box to everyone else. */\r\n.cv-settings-page-title:focus { outline: none; }\r\n.cv-settings-page-intro { margin: 0 0.2rem 0.85rem; font-size: 0.8rem; line-height: 1.45; color: var(--cv-muted); }\r\n.cv-settings-page-empty { margin: 0; padding: 0 0.2rem; font-size: 0.85rem; color: var(--cv-muted); }\r\n\r\n/* The checkmark list: one card like `.cv-settings-section-body`, a row per choice. */\r\n.cv-choices {\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: 14px;\r\n  background: var(--cv-bg);\r\n  overflow: hidden;\r\n}\r\n.cv-choice {\r\n  position: relative;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.6rem;\r\n  min-height: 44px;\r\n  padding: 0.6rem 0.85rem;\r\n  cursor: pointer;\r\n  transition: background 0.12s ease;\r\n}\r\n.cv-choice + .cv-choice { border-top: 1px solid var(--cv-border); }\r\n.cv-choice:hover { background: var(--cv-surface); }\r\n/* The real control: a native radio, kept in the accessibility tree and keyboard order, drawn by the row. */\r\n.cv-choice-input {\r\n  position: absolute;\r\n  opacity: 0;\r\n  width: 1px;\r\n  height: 1px;\r\n  margin: 0;\r\n  pointer-events: none;\r\n}\r\n.cv-choice:has(.cv-choice-input:focus-visible) { outline: 2px solid var(--cv-accent); outline-offset: -2px; }\r\n.cv-choice-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1rem; }\r\n.cv-choice-label { font-size: 0.88rem; color: var(--cv-text); overflow-wrap: anywhere; }\r\n.cv-choice-sub { font-size: 0.78rem; color: var(--cv-muted); }\r\n.cv-choice[data-checked] .cv-choice-label { font-weight: 600; }\r\n.cv-choice-check { flex-shrink: 0; color: var(--cv-accent-strong); visibility: hidden; }\r\n.cv-choice[data-checked] .cv-choice-check { visibility: visible; }\r\n.cv-choice-playing { display: inline-flex; flex-shrink: 0; color: var(--cv-accent-strong); }\r\n/* A tagged choice (N\xFAmero de salida): the label and its tag on one line, like the dialpad's list. */\r\n.cv-choice-line { display: flex; align-items: center; gap: 0.35rem; min-width: 0; }\r\n/* Locked while a change is in flight or must wait: the chosen row stays clear, the others step back. */\r\n.cv-choice[data-disabled] { cursor: default; }\r\n.cv-choice[data-disabled]:not([data-checked]) { opacity: 0.55; }\r\n.cv-choice[data-disabled]:hover { background: none; }\r\n.cv-choice-applying { display: inline-flex; flex-shrink: 0; color: var(--cv-muted); }\r\n/* Exempt from reduced-motion like `.cv-empty-spinner`: the rotation is the information. */\r\n.cv-choice-applying-icon { animation: cv-spin 0.8s linear infinite; }\r\n\r\n.cv-settings-test,\r\n.cv-settings-retry {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.4rem;\r\n}\r\n.cv-settings-test { margin-top: 0.85rem; }\r\n.cv-settings-retry { margin-top: 0.6rem; }\r\n\r\n/* Visually hidden, still read aloud. */\r\n.cv-sr-only {\r\n  position: absolute;\r\n  width: 1px;\r\n  height: 1px;\r\n  overflow: hidden;\r\n  clip-path: inset(50%);\r\n  white-space: nowrap;\r\n}\r\n/* `--cv-muted` on `--cv-bg` \u2014 4.83:1 light / 6.97:1 dark, computed fresh for THIS pairing (the note\r\n   used to sit on `--cv-surface` with its own card; now it sits directly on the section's `--cv-bg`,\r\n   a different background that earns its own check rather than inheriting the old one's number). */\r\n.cv-settings-note {\r\n  margin: 0;\r\n  color: var(--cv-muted);\r\n  font-size: 0.8rem;\r\n  line-height: 1.5;\r\n}\r\n\r\n/* \u2500\u2500 Centred states (mic gate) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-center {\r\n  flex: 1;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 0.85rem;\r\n  padding: 1.75rem;\r\n  text-align: center;\r\n}\r\n.cv-center p { color: var(--cv-muted); margin: 0; font-size: 0.85rem; line-height: 1.5; }\r\n\r\n\r\n/* \"C\xF3mo permitirlo\" \u2014 a native <details> disclosure.\r\n   Collapsed by default: the people who already know where the padlock is should not have to read\r\n   past three steps to get there, and the people who don't get them without leaving the app. */\r\n.cv-help {\r\n  width: 100%;\r\n  margin-top: 0.15rem;\r\n  text-align: left;\r\n}\r\n.cv-help summary {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n  justify-content: center;\r\n  width: 100%;\r\n  padding: 0.3rem;\r\n  border-radius: 8px;\r\n  color: var(--cv-muted);\r\n  font: 500 0.75rem var(--cv-font);\r\n  cursor: pointer;\r\n  list-style: none; /* hide the default triangle; the icon is the affordance */\r\n  transition: color 0.15s ease, background 0.15s ease;\r\n}\r\n.cv-help summary::-webkit-details-marker { display: none; }\r\n.cv-help summary:hover { color: var(--cv-text); background: var(--cv-surface-2); }\r\n.cv-help[open] summary { color: var(--cv-text); margin-bottom: 0.35rem; }\r\n\r\n.cv-help ol {\r\n  margin: 0;\r\n  padding: 0.6rem 0.7rem 0.6rem 1.6rem;\r\n  background: var(--cv-surface);\r\n  border-radius: 10px;\r\n  color: var(--cv-muted);\r\n  font-size: 0.73rem;\r\n  line-height: 1.55;\r\n}\r\n.cv-help li + li { margin-top: 0.3rem; }\r\n.cv-help li::marker { color: var(--cv-faint); font-variant-numeric: tabular-nums; }\r\n\r\n.cv-help a {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.25rem;\r\n  margin-top: 0.45rem;\r\n  padding-left: 0.1rem;\r\n  color: var(--cv-accent-strong);\r\n  font-size: 0.73rem;\r\n  font-weight: 500;\r\n  text-decoration: none;\r\n}\r\n.cv-help a:hover { text-decoration: underline; }\r\n\r\n/* The panel is the only thing that moves, and only when opened by hand \u2014 so it animates. */\r\n.cv-help[open] ol {\r\n  animation: cv-gate-in 200ms var(--cv-ease-out) both;\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-help[open] ol { animation: none; }\r\n}\r\n\r\n/* \u2500\u2500 The permission gate \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   Four states, and only ONE of them deserves a designed screen.\r\n\r\n   `checking` resolves in ~100\u2013400 ms. Rendering it immediately means the user\r\n   sees text appear and vanish inside a blink \u2014 a flash reads as jank, not as\r\n   information. So it is delayed 450 ms with `both` fill: invisible during the\r\n   delay, and if the check finishes first (the usual case, and always the case\r\n   when permission is already granted) it is never painted at all.\r\n\r\n   `prompting` is the one the user actually reads and acts on. It gets the\r\n   hierarchy: mark, title, reason, action.\r\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n.cv-gate {\r\n  flex: 1;\r\n  min-height: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  align-items: center;\r\n  justify-content: center;\r\n  gap: 0.6rem;\r\n  padding: 1.5rem 1.75rem;\r\n  text-align: center;\r\n}\r\n\r\n/* The disc echoes the call avatar \u2014 one visual language, not two. */\r\n.cv-gate-mark {\r\n  display: grid;\r\n  place-items: center;\r\n  width: 52px;\r\n  height: 52px;\r\n  border-radius: 999px;\r\n  background: var(--cv-accent-soft);\r\n  color: var(--cv-accent-strong);\r\n  margin-bottom: 0.15rem;\r\n}\r\n.cv-gate[data-tone='danger'] .cv-gate-mark {\r\n  background: var(--cv-danger-soft);\r\n  color: var(--cv-danger);\r\n}\r\n\r\n.cv-gate-title {\r\n  margin: 0;\r\n  font: 600 0.95rem var(--cv-font);\r\n  color: var(--cv-text);\r\n  letter-spacing: -0.01em;\r\n}\r\n.cv-gate p {\r\n  margin: 0;\r\n  color: var(--cv-muted);\r\n  font-size: 0.8rem;\r\n  line-height: 1.5;\r\n  max-width: 24ch; /* two comfortable lines, not one long one */\r\n}\r\n.cv-gate .cv-btn { margin-top: 0.5rem; }\r\n\r\n/* Entrance. Staggered 45 ms apart: the eye follows mark \u2192 title \u2192 reason \u2192\r\n   action, which is the order it needs to read them in anyway. */\r\n.cv-gate > * {\r\n  animation: cv-gate-in 260ms var(--cv-ease-out) both;\r\n}\r\n.cv-gate > *:nth-child(2) { animation-delay: 45ms; }\r\n.cv-gate > *:nth-child(3) { animation-delay: 90ms; }\r\n.cv-gate > *:nth-child(4) { animation-delay: 135ms; }\r\n\r\n@keyframes cv-gate-in {\r\n  from { opacity: 0; transform: translateY(6px); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n\r\n/* The checking state: held back, then a quiet fade. No stagger, no movement \u2014\r\n   it is a status, not a screen, and it should barely register. */\r\n.cv-gate[data-state='checking'] > *,\r\n.cv-gate[data-state='warming'] > * {\r\n  animation: cv-gate-wait 200ms var(--cv-ease-out) 450ms both;\r\n}\r\n@keyframes cv-gate-wait {\r\n  from { opacity: 0; }\r\n  to   { opacity: 1; }\r\n}\r\n/* A slow breath rather than a spinner: a spinner promises a long wait, and this\r\n   is not one. */\r\n.cv-gate[data-state='checking'] .cv-gate-mark,\r\n.cv-gate[data-state='warming'] .cv-gate-mark {\r\n  background: var(--cv-surface-2);\r\n  color: var(--cv-muted);\r\n  animation: cv-gate-wait 200ms var(--cv-ease-out) 450ms both,\r\n             cv-breathe 1.8s ease-in-out 450ms infinite;\r\n}\r\n@keyframes cv-breathe {\r\n  0%, 100% { opacity: 1; }\r\n  50%      { opacity: 0.45; }\r\n}\r\n\r\n/* Reduced motion: keep the fade and \u2014 critically \u2014 keep the DELAY, which is\r\n   timing rather than motion and is the whole point. Drop the travel. */\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-gate > * {\r\n    animation: cv-gate-wait 200ms var(--cv-ease-out) both;\r\n  }\r\n  .cv-gate[data-state='checking'] .cv-gate-mark,\r\n  .cv-gate[data-state='warming'] .cv-gate-mark {\r\n    animation: cv-gate-wait 200ms var(--cv-ease-out) 450ms both;\r\n  }\r\n}\r\n\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-avatar-ping,\r\n  .cv-timer i { animation: none; }\r\n  .cv-softphone *,\r\n  .cv-softphone *::before { transition-duration: 0.01ms !important; }\r\n}\r\n\r\n/* `*` and `#` stay in the grid \u2014 a keypad without them is not a keypad \u2014 but they are not part of a\r\n   number (toE164 keeps digits only). Dimmed rather than `disabled` so the grid still reads as a\r\n   keypad and the glyphs stay legible; they become live DTMF on the in-call screen. */\r\n.cv-key[data-dialable='false'] {\r\n  cursor: default;\r\n}\r\n.cv-key[data-dialable='false'] b {\r\n  color: var(--cv-faint);\r\n}\r\n.cv-key[data-dialable='false']:hover {\r\n  background: none;\r\n}\r\n.cv-key[data-dialable='false']:active {\r\n  transform: none;\r\n}\r\n\r\n/* \u2500\u2500 Country picker \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\r\n   The prefix chip + its list. Sits where the old left spacer was, so the number\r\n   stays optically centred against the 36px erase button on the right.\r\n\r\n   The popover is absolutely positioned inside the widget rather than portalled:\r\n   there is nowhere to portal TO inside a shadow root, and the widget already owns\r\n   its stacking context. That also means it cannot be clipped by a host's\r\n   `overflow:hidden` \u2014 the failure SPEC \xA72.6 lists for the CRM's Radix version.\r\n   \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/* The anchor spans the whole ROW, not just the chip.\r\n   With the chip centred, anchoring to the chip put the popover's left edge at ~120px and its right\r\n   edge past the widget \u2014 clipped by `.cv-softphone { overflow: hidden }`, which is the classic\r\n   absolute-inside-overflow bug. Anchoring to the full row makes overflowing arithmetically\r\n   impossible: `left:0; right:0` cannot be wider than the row that contains it. */\r\n.cv-cp {\r\n  position: relative;\r\n  display: flex;\r\n  justify-content: center;\r\n  width: 100%;\r\n}\r\n/* A PILL, with a resting surface and a border.\r\n   This was `border: none; background: none` \u2014 invisible until hover, so it read as a label rather\r\n   than a control. That was survivable when it sat inline beside the number; alone on its own row it\r\n   is just floating text, and nothing says \"you can change this\". A control that changes state has to\r\n   look like one at rest, not only under a cursor that may never arrive (touch has no hover at all). */\r\n.cv-cp-chip {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n  height: 30px;\r\n  padding: 0 0.5rem 0 0.4rem;\r\n  border: 1px solid var(--cv-border-strong);\r\n  border-radius: 999px;\r\n  background: var(--cv-surface);\r\n  color: var(--cv-text);\r\n  font: 600 0.8rem var(--cv-font);\r\n  cursor: pointer;\r\n  transition: background 0.15s, border-color 0.15s;\r\n}\r\n.cv-cp-chip:hover { background: var(--cv-surface-2); }\r\n.cv-cp-chip:active { transform: scale(0.95); }\r\n/* Open: the chip is the thing the list belongs to, so it stays visibly engaged while the list is up. */\r\n.cv-cp-chip[aria-expanded='true'] {\r\n  background: var(--cv-accent-soft);\r\n  border-color: var(--cv-accent);\r\n}\r\n.cv-cp-dial {\r\n  font-variant-numeric: tabular-nums;\r\n  letter-spacing: -0.02em;\r\n}\r\n.cv-cp-caret {\r\n  color: var(--cv-faint);\r\n  flex-shrink: 0;\r\n  transition: transform 0.18s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n.cv-cp-caret[data-open='true'] { transform: rotate(180deg); }\r\n\r\n/* The country mark. TWO designed states in ONE 20\xD714 box (a flag's own 3:2), so the chip and every\r\n   row keep their rhythm whichever is showing \u2014 nothing reflows when the flags land. The plate is the\r\n   LOADING state (flags are a lazy import) and the offline state, not a fallback: there is no flash of\r\n   something broken, only a designed plate becoming a designed flag, once per session.\r\n   `::part(country-mark)` lets a host restyle either. */\r\n.cv-mark {\r\n  width: 20px;\r\n  height: 14px;\r\n  flex-shrink: 0;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  font-size: 14px;\r\n  line-height: 1;\r\n  font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', var(--cv-font);\r\n}\r\n/* The SVG fills the slot exactly; 3x2 is the flag aspect, so nothing is letterboxed or cropped. */\r\n.cv-mark-svg {\r\n  width: 100%;\r\n  height: 100%;\r\n  display: block;\r\n  border-radius: 2px;\r\n  object-fit: cover;\r\n}\r\n.cv-mark[data-plate='true'] {\r\n  /* The ISO code set into the slot a flag will occupy. */\r\n  font-family: var(--cv-font);\r\n  font-size: 8.5px;\r\n  font-weight: 700;\r\n  letter-spacing: 0.04em;\r\n  color: var(--cv-text);\r\n  background: var(--cv-surface-2);\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: 3px;\r\n  /* Cap-height letters sit optically high in a 14px box; nudge them back to centre. */\r\n  padding-top: 1px;\r\n}\r\n\r\n.cv-cp-pop {\r\n  position: absolute;\r\n  top: calc(100% + 6px);\r\n  /* Pinned to BOTH row edges, so it is bounded by the container by construction \u2014 no width guess,\r\n     no media query, nothing to clip. `max-width` keeps it from looking stretched on a wide host. */\r\n  left: 0;\r\n  right: 0;\r\n  margin-inline: auto;\r\n  max-width: 260px;\r\n  z-index: 20;\r\n  display: flex;\r\n  flex-direction: column;\r\n  background: var(--cv-surface);\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: var(--cv-radius);\r\n  box-shadow: var(--cv-shadow);\r\n  overflow: hidden;\r\n  /* Grows from the chip it belongs to, rather than appearing on top of it. */\r\n  transform-origin: top center;\r\n  animation: cv-cp-in 0.14s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n@keyframes cv-cp-in {\r\n  from { opacity: 0; transform: translateY(-4px) scale(0.97); }\r\n  to   { opacity: 1; transform: none; }\r\n}\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-cp-pop { animation: none; }\r\n  .cv-cp-caret { transition: none; }\r\n}\r\n.cv-cp-search {\r\n  flex-shrink: 0;\r\n  padding: 0.5rem 0.65rem;\r\n  border: none;\r\n  border-bottom: 1px solid var(--cv-border);\r\n  background: none;\r\n  color: var(--cv-text);\r\n  font: 400 0.8rem var(--cv-font);\r\n  outline: none;\r\n}\r\n.cv-cp-search::placeholder { color: var(--cv-faint); }\r\n/* Both states named explicitly. In the CRM the widget mounts via `/ui`, i.e. in the LIGHT DOM \u2014 none\r\n   of the shadow-DOM isolation the web-component playground proves applies there, so a host's focus\r\n   ring (or the browser's own) can land on our input. The accent underline IS the focus indicator. */\r\n.cv-cp-search:focus,\r\n.cv-cp-search:focus-visible {\r\n  outline: none;\r\n  border-bottom-color: var(--cv-accent);\r\n  border-bottom-width: 2px;\r\n  padding-bottom: calc(0.5rem - 1px);\r\n}\r\n.cv-cp-list {\r\n  overflow-y: auto;\r\n  max-height: 220px;\r\n  padding: 0.25rem;\r\n}\r\n.cv-cp-item {\r\n  width: 100%;\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  padding: 0.4rem 0.45rem;\r\n  border: none;\r\n  border-radius: calc(var(--cv-radius) - 4px);\r\n  background: none;\r\n  color: var(--cv-text);\r\n  font: 400 0.8rem var(--cv-font);\r\n  text-align: left;\r\n  cursor: pointer;\r\n}\r\n.cv-cp-item:hover { background: var(--cv-surface-2); }\r\n/* The current country is stated by the row, not only by a tick at the far right. */\r\n.cv-cp-item[aria-selected='true'] { background: var(--cv-accent-soft); }\r\n.cv-cp-item[aria-selected='true'] .cv-cp-name { font-weight: 600; }\r\n.cv-cp-name {\r\n  flex: 1;\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n.cv-cp-item .cv-cp-dial {\r\n  color: var(--cv-muted);\r\n  font-weight: 400;\r\n}\r\n.cv-cp-check { color: var(--cv-accent-strong); flex-shrink: 0; }\r\n.cv-cp-check[data-on='false'] { opacity: 0; }\r\n.cv-cp-empty {\r\n  margin: 0;\r\n  padding: 1rem 0.5rem;\r\n  text-align: center;\r\n  color: var(--cv-muted);\r\n  font-size: 0.78rem;\r\n}\r\n\r\n/* \u2500\u2500 \"Llamar desde\" (outbound-number-per-agent.md \xA75.5) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 */\r\n/* \"Llamar desde: Oficina \u25BE\" \u2014 a light line right above the number field, as the providers' dialers label their\r\n   caller ID (\"Caller ID: \u2026 \u25BE\", \"Outbound on: \u2026 \u25BE\", \"From: \u2026 \u25BE\"; outbound-number-per-agent.md \xA75.5, 2026-10-26). Not a\r\n   strip with a divider: under the host's own header that read as a second title bar. The line is the positioned\r\n   ancestor, so its list and callout drop under it. */\r\n.cv-on {\r\n  position: relative;\r\n  flex-shrink: 0;\r\n  display: flex;\r\n  padding: 0.9rem 1rem 0.4rem;\r\n}\r\n.cv-on-chip {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  gap: 0.3rem;\r\n  max-width: 100%;\r\n  min-width: 0;\r\n  height: 26px;\r\n  margin-left: -0.3rem;\r\n  padding: 0 0.3rem;\r\n  border: 0;\r\n  border-radius: 6px;\r\n  background: none;\r\n  color: var(--cv-text);\r\n  font: 0.8rem var(--cv-font);\r\n  text-align: left;\r\n  cursor: pointer;\r\n  transition: background 0.15s;\r\n}\r\n.cv-on-chip:hover { background: var(--cv-surface-2); }\r\n.cv-on-chip:focus-visible { outline: 2px solid var(--cv-accent); outline-offset: 0; }\r\n.cv-on-label { flex-shrink: 0; color: var(--cv-muted); }\r\n.cv-on-chip .cv-on-current { font-weight: 600; }\r\n.cv-on-icon { color: var(--cv-accent-strong); flex-shrink: 0; }\r\n.cv-on-spin { animation: cv-spin 0.9s linear infinite; }\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-on-spin { animation: none; }\r\n}\r\n.cv-on-current {\r\n  min-width: 0;\r\n  overflow: hidden;\r\n  text-overflow: ellipsis;\r\n  white-space: nowrap;\r\n}\r\n/* Drops under the strip, over the number and the keypad, inset to the strip's edges. Capped so that in the CRM's\r\n   473px panel it never reaches the tab bar: the LIST gives way (it scrolls), never the title or a refusal message. */\r\n.cv-on-pop {\r\n  top: calc(100% + 4px);\r\n  left: 0.5rem;\r\n  right: 0.5rem;\r\n  max-width: none;\r\n  max-height: 330px;\r\n}\r\n.cv-on-pop .cv-cp-list {\r\n  flex: 1 1 auto;\r\n  min-height: 0;\r\n  max-height: none;\r\n}\r\n.cv-on-title {\r\n  flex-shrink: 0;\r\n  margin: 0;\r\n  padding: 0.5rem 0.75rem 0.4rem;\r\n  border-bottom: 1px solid var(--cv-border);\r\n  font: 600 0.7rem var(--cv-font);\r\n  letter-spacing: 0.06em;\r\n  text-transform: uppercase;\r\n  color: var(--cv-muted);\r\n}\r\n.cv-on-item { align-items: flex-start; }\r\n/* Locked while a change is applying or the limit says wait: still legible (the choice is visible), not usable. */\r\n.cv-on-item[aria-disabled='true'] { cursor: default; }\r\n.cv-on-item[aria-disabled='true']:not([aria-selected='true']) { opacity: 0.55; }\r\n.cv-on-item[aria-disabled='true']:not([aria-selected='true']):hover { background: none; }\r\n.cv-on-text {\r\n  flex: 1;\r\n  min-width: 0;\r\n  display: flex;\r\n  flex-direction: column;\r\n  gap: 1px;\r\n}\r\n.cv-on-line {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.35rem;\r\n  min-width: 0;\r\n}\r\n.cv-on-sub {\r\n  color: var(--cv-muted);\r\n  font-size: 0.74rem;\r\n  font-variant-numeric: tabular-nums;\r\n}\r\n/* A quiet, neutral pill: it tells the agent what the number is for, it is not a warning. Shared with Ajustes. */\r\n.cv-on-tag,\r\n.cv-choice-tag {\r\n  flex-shrink: 0;\r\n  padding: 0 0.35rem;\r\n  border: 1px solid var(--cv-border-strong);\r\n  border-radius: 999px;\r\n  color: var(--cv-muted);\r\n  font-size: 0.66rem;\r\n  font-weight: 600;\r\n  line-height: 1.4;\r\n}\r\n/* The usage rule IS information (when not to call from this number): --cv-muted, not --cv-faint, which is under\r\n   4.5:1 at this size in both themes (see `.cv-empty-sub`). */\r\n.cv-on-hint,\r\n.cv-choice-hint {\r\n  color: var(--cv-muted);\r\n  font-size: 0.7rem;\r\n  line-height: 1.3;\r\n}\r\n.cv-on-item .cv-cp-check { margin-top: 2px; }\r\n/* Why a change cannot happen right now, and until when. Calm, not alarming: the phone keeps working. */\r\n.cv-on-notice {\r\n  flex-shrink: 0;\r\n  margin: 0;\r\n  padding: 0.55rem 0.75rem;\r\n  border-top: 1px solid var(--cv-border);\r\n  background: var(--cv-surface-2);\r\n  color: var(--cv-text);\r\n  font-size: 0.74rem;\r\n  line-height: 1.4;\r\n}\r\n.cv-on-notice[data-kind='error'] { color: var(--cv-danger-strong); }\r\n/* A change that did not go through, after the (optimistic) list already closed: the same words, where the list\r\n   was (under the strip). Same place and surface as the list; dismissed by a tap elsewhere, when the wait is over,\r\n   or after a few seconds. */\r\n.cv-on-callout {\r\n  position: absolute;\r\n  top: calc(100% + 4px);\r\n  left: 0.5rem;\r\n  right: 0.5rem;\r\n  margin: 0;\r\n  z-index: 20;\r\n  padding: 0.6rem 0.75rem;\r\n  background: var(--cv-surface);\r\n  border: 1px solid var(--cv-border);\r\n  border-radius: var(--cv-radius);\r\n  box-shadow: var(--cv-shadow);\r\n  color: var(--cv-text);\r\n  font-size: 0.74rem;\r\n  line-height: 1.4;\r\n  transform-origin: top center;\r\n  animation: cv-cp-in 0.14s cubic-bezier(0.2, 0, 0.2, 1);\r\n}\r\n.cv-on-callout[data-kind='error'] { color: var(--cv-danger-strong); }\r\n@media (prefers-reduced-motion: reduce) {\r\n  .cv-on-callout { animation: none; }\r\n}\r\n";
 
 // src/element/index.ts
 var EVENTS = {
@@ -10827,9 +11403,9 @@ var CoventiaSoftphoneElement = class extends HTMLElement {
       ...this.#config.incomingCallAction ? { incomingCallAction: this.#config.incomingCallAction } : {}
     };
     this.#root.render(
-      (0, import_react41.createElement)(
+      (0, import_react46.createElement)(
         SoftphoneProvider,
-        { softphone: this.#softphone, children: (0, import_react41.createElement)(SoftphoneWidget, widgetProps) }
+        { softphone: this.#softphone, children: (0, import_react46.createElement)(SoftphoneWidget, widgetProps) }
       )
     );
   }