@giouwur/biometric-sdk 1.0.0

package/dist/index.js

@@ -0,0 +1,4725 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AuthService: () => AuthService,
+  BiometricProvider: () => BiometricProvider,
+  BiometricService: () => BiometricService,
+  BiometricSlot: () => BiometricSlot,
+  Button: () => Button,
+  Card: () => Card,
+  FINGER_NAMES: () => FINGER_NAMES,
+  FaceCameraModal: () => FaceCameraModal,
+  FaceEnrollModule: () => FaceEnrollModule,
+  FingerCaptureModal: () => FingerCaptureModal,
+  FingerEnrollModule: () => FingerEnrollModule,
+  FingerRollCaptureModal: () => FingerRollCaptureModal,
+  FingerRollEnrollModule: () => FingerRollEnrollModule,
+  FingerprintImpressionType: () => FingerprintImpressionType,
+  FingerprintPosition: () => FingerprintPosition,
+  Input: () => Input,
+  IrisCameraModal: () => IrisCameraModal,
+  IrisEnrollModule: () => IrisEnrollModule,
+  IrisPosition: () => IrisPosition,
+  LEFT_FINGERS: () => LEFT_FINGERS,
+  Loader: () => Loader,
+  MissingBiometricModal: () => MissingBiometricModal,
+  MissingFingerModal: () => MissingFingerModal,
+  Modal: () => Modal,
+  ModuleHeader: () => ModuleHeader,
+  PalmCaptureModal: () => PalmCaptureModal,
+  PalmEnrollModule: () => PalmEnrollModule,
+  ProgressBar: () => ProgressBar,
+  QualityBadge: () => QualityBadge,
+  RIGHT_FINGERS: () => RIGHT_FINGERS,
+  Select: () => Select,
+  StatusChip: () => StatusChip,
+  TableHeader: () => TableHeader,
+  TableRow: () => TableRow,
+  TableWrapper: () => TableWrapper,
+  Tabs: () => Tabs,
+  TabsContent: () => TabsContent,
+  TabsList: () => TabsList,
+  TabsTrigger: () => TabsTrigger,
+  api: () => api_default,
+  base64toBlob: () => base64toBlob,
+  canvasToBase64: () => canvasToBase64,
+  detectImageFormat: () => detectImageFormat,
+  downloadImageAsBase64: () => downloadImageAsBase64,
+  getImageSrcForDisplay: () => getImageSrcForDisplay,
+  isRemoteImage: () => isRemoteImage,
+  isValidBase64: () => isValidBase64,
+  normalizeImageForStorage: () => normalizeImageForStorage,
+  setApiBaseUrl: () => setApiBaseUrl,
+  useAuthStore: () => useAuthStore,
+  useBiometricConfig: () => useBiometricConfig,
+  useBiometricStore: () => useBiometricStore,
+  useEnrollmentStore: () => useEnrollmentStore,
+  useUiStore: () => useUiStore
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/components/BiometricProvider.tsx
+var import_react = require("react");
+
+// src/lib/stores/biometricStore.ts
+var import_zustand2 = require("zustand");
+
+// src/lib/stores/uiStore.ts
+var import_zustand = require("zustand");
+var MAX_MESSAGES = 100;
+var useUiStore = (0, import_zustand.create)((set, get) => ({
+  messages: [],
+  isConsoleOpen: false,
+  /**
+   * Añade un nuevo mensaje de log a la consola global.
+   */
+  addMessage: (message) => {
+    const timestamp = (/* @__PURE__ */ new Date()).toLocaleTimeString();
+    const formattedMessage = `[${timestamp}] ${message}`;
+    set((state) => ({
+      messages: [
+        ...state.messages.slice(
+          state.messages.length >= MAX_MESSAGES ? 1 : 0
+        ),
+        formattedMessage
+      ]
+    }));
+  },
+  /**
+   * Abre o cierra la consola de eventos.
+   */
+  toggleConsole: () => {
+    set((state) => ({ isConsoleOpen: !state.isConsoleOpen }));
+  },
+  /**
+   * Limpia todos los mensajes de la consola.
+   */
+  clearMessages: () => {
+    set({ messages: [] });
+  }
+}));
+
+// src/lib/stores/biometricStore.ts
+var DEFAULT_WS_URL = "ws://127.0.0.1:5000/biometric";
+var RECONNECT_DELAY = 3e3;
+var getOrCreateSessionId = () => {
+  let sid = localStorage.getItem("bio_session_id");
+  if (!sid) {
+    sid = typeof crypto !== "undefined" && crypto.randomUUID ? crypto.randomUUID() : `sess_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+    localStorage.setItem("bio_session_id", sid);
+  }
+  return sid;
+};
+var useBiometricStore = (0, import_zustand2.create)((set, get) => ({
+  socket: null,
+  isConnected: false,
+  deviceStatus: null,
+  lastMessage: null,
+  handlers: /* @__PURE__ */ new Map(),
+  missingFingers: {},
+  markFingerAsMissing: (position, reason) => {
+    const { missingFingers, sendMessage, isConnected } = get();
+    const newMissing = { ...missingFingers, [position]: reason };
+    set({ missingFingers: newMissing });
+    if (isConnected) {
+      console.log("\u{1F4E4} Sincronizando dedos faltantes con Backend...", Object.keys(newMissing));
+      sendMessage({
+        messageType: "UPDATE_MISSING_BIOMETRICS",
+        payload: Object.keys(newMissing)
+      });
+    }
+  },
+  restoreFinger: (position) => {
+    const { missingFingers, sendMessage, isConnected } = get();
+    const newMissing = { ...missingFingers };
+    delete newMissing[position];
+    set({ missingFingers: newMissing });
+    if (isConnected) {
+      console.log("\u{1F4E4} Sincronizando dedos faltantes con Backend...", Object.keys(newMissing));
+      sendMessage({
+        messageType: "UPDATE_MISSING_BIOMETRICS",
+        payload: Object.keys(newMissing)
+      });
+    }
+  },
+  getExpectedFingers: (allPositions) => {
+    const { missingFingers } = get();
+    return allPositions.filter((pos) => !missingFingers[pos]);
+  },
+  clearAllMissingFingers: () => {
+    const { isConnected, sendMessage } = get();
+    set({ missingFingers: {} });
+    if (isConnected) {
+      console.log("\u{1F9F9} Limpiando todas las excepciones biom\xE9tricas...");
+      sendMessage({
+        messageType: "UPDATE_MISSING_BIOMETRICS",
+        payload: []
+      });
+    }
+  },
+  init: (wsUrl, deviceId) => {
+    if (wsUrl && typeof window !== "undefined") {
+      localStorage.setItem("biometric_ws_url", wsUrl);
+    }
+    if (deviceId && typeof window !== "undefined") {
+      localStorage.setItem("biometric_device_id", deviceId);
+    }
+    get().connect();
+  },
+  registerHandler: (messageType, handler) => {
+    get().handlers.set(messageType, handler);
+  },
+  unregisterHandler: (messageType) => {
+    get().handlers.delete(messageType);
+  },
+  sendMessage: (message) => {
+    const { socket, isConnected } = get();
+    if (socket && isConnected) {
+      socket.send(JSON.stringify(message));
+    } else {
+      useUiStore.getState().addMessage("Socket no conectado. Mensaje no enviado.");
+      console.error("Socket no conectado.");
+    }
+  },
+  disconnect: () => {
+    const { socket } = get();
+    if (socket) {
+      socket.close();
+    }
+    set({ isConnected: false, socket: null });
+  },
+  resetSession: () => {
+    localStorage.removeItem("bio_session_id");
+    get().disconnect();
+    setTimeout(() => get().connect(), 500);
+  },
+  connect: () => {
+    const { socket } = get();
+    if (socket && (socket.readyState === WebSocket.OPEN || socket.readyState === WebSocket.CONNECTING)) {
+      return;
+    }
+    let baseUrl = DEFAULT_WS_URL;
+    if (typeof window !== "undefined") {
+      const storedUrl = localStorage.getItem("biometric_ws_url");
+      if (storedUrl) {
+        baseUrl = storedUrl;
+      }
+    }
+    const sid = getOrCreateSessionId();
+    const finalUrl = `${baseUrl.replace(/\/$/, "")}?sid=${sid}`;
+    const log = useUiStore.getState().addMessage;
+    console.log(`Intentando conectar a: ${finalUrl}`);
+    const ws = new WebSocket(finalUrl);
+    ws.onopen = () => {
+      log(`\u{1F4E1} Conexi\xF3n establecida (Sesi\xF3n: ${sid.substring(0, 8)}...)`);
+      set({ isConnected: true, socket: ws });
+      const { missingFingers } = get();
+      const missingKeys = Object.keys(missingFingers);
+      if (missingKeys.length > 0) {
+        ws.send(JSON.stringify({
+          messageType: "UPDATE_MISSING_BIOMETRICS",
+          payload: missingKeys
+        }));
+      }
+    };
+    ws.onclose = (event) => {
+      log(`\u{1F50C} Desconectado. C\xF3digo: ${event.code}. Reconectando en 3s...`);
+      set({ isConnected: false, socket: null });
+      if (event.code !== 1e3) {
+        setTimeout(() => {
+          get().connect();
+        }, RECONNECT_DELAY);
+      }
+    };
+    ws.onerror = (error) => {
+      log("\u{1F4A5} Error en WebSocket. Ver consola.");
+      console.error("\u{1F4A5} Error en WebSocket:", error);
+    };
+    ws.onmessage = (event) => {
+      try {
+        const message = JSON.parse(event.data);
+        if (!message.messageType.includes("_FRAME")) {
+          set({ lastMessage: message });
+        }
+        if (message.messageType === "DEVICE_STATUS_UPDATE") {
+          set({ deviceStatus: message.payload });
+          return;
+        }
+        const handler = get().handlers.get(message.messageType);
+        if (handler) {
+          handler(message);
+        } else {
+          if (message.messageType !== "FINGER_PREVIEW_FRAME" && message.messageType !== "FACE_QUALITY_FEEDBACK" && message.messageType !== "PALM_PREVIEW_FRAME" && message.messageType !== "IRIS_PREVIEW_FRAME" && message.messageType !== "CURRENT_CONFIG") {
+            log(`Mensaje recibido sin handler: ${message.messageType}`);
+          }
+        }
+      } catch (error) {
+        log("Error al procesar mensaje.");
+        console.error("Error parsing JSON:", error);
+      }
+    };
+    set({ socket: ws });
+  }
+}));
+
+// src/components/BiometricProvider.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var BiometricContext = (0, import_react.createContext)(null);
+function useBiometricConfig() {
+  const ctx = (0, import_react.useContext)(BiometricContext);
+  if (!ctx) {
+    throw new Error(
+      "useBiometricConfig must be used within a <BiometricProvider>. Wrap your app with <BiometricProvider config={{...}}>."
+    );
+  }
+  return ctx;
+}
+function BiometricProvider({
+  config,
+  children
+}) {
+  const initialized = (0, import_react.useRef)(false);
+  (0, import_react.useEffect)(() => {
+    if (!initialized.current) {
+      initialized.current = true;
+      useBiometricStore.getState().init(config.wsUrl, config.deviceId);
+    }
+  }, [config.wsUrl, config.deviceId]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(BiometricContext.Provider, { value: config, children });
+}
+
+// src/components/enrollment/FingerEnrollModule.tsx
+var import_react5 = require("react");
+var import_react_hot_toast = require("react-hot-toast");
+
+// src/lib/stores/enrollmentStore.ts
+var import_zustand3 = require("zustand");
+
+// src/types/abis-types.ts
+var FingerprintPosition = /* @__PURE__ */ ((FingerprintPosition2) => {
+  FingerprintPosition2["RightThumb"] = "RightThumb";
+  FingerprintPosition2["RightIndex"] = "RightIndex";
+  FingerprintPosition2["RightMiddle"] = "RightMiddle";
+  FingerprintPosition2["RightRing"] = "RightRing";
+  FingerprintPosition2["RightLittle"] = "RightLittle";
+  FingerprintPosition2["LeftThumb"] = "LeftThumb";
+  FingerprintPosition2["LeftIndex"] = "LeftIndex";
+  FingerprintPosition2["LeftMiddle"] = "LeftMiddle";
+  FingerprintPosition2["LeftRing"] = "LeftRing";
+  FingerprintPosition2["LeftLittle"] = "LeftLittle";
+  FingerprintPosition2["RightUpperPalm"] = "RightUpperPalm";
+  FingerprintPosition2["RightLowerPalm"] = "RightLowerPalm";
+  FingerprintPosition2["RightWritersPalm"] = "RightWritersPalm";
+  FingerprintPosition2["LeftUpperPalm"] = "LeftUpperPalm";
+  FingerprintPosition2["LeftLowerPalm"] = "LeftLowerPalm";
+  FingerprintPosition2["LeftWritersPalm"] = "LeftWritersPalm";
+  return FingerprintPosition2;
+})(FingerprintPosition || {});
+var FingerprintImpressionType = /* @__PURE__ */ ((FingerprintImpressionType2) => {
+  FingerprintImpressionType2["LiveScanPlain"] = "LiveScanPlain";
+  FingerprintImpressionType2["LiveScanRolled"] = "LiveScanRolled";
+  FingerprintImpressionType2["RolledContact"] = "RolledContact";
+  FingerprintImpressionType2["NonLiveScanPlain"] = "NonLiveScanPlain";
+  FingerprintImpressionType2["NonLiveScanRolled"] = "NonLiveScanRolled";
+  FingerprintImpressionType2["LatentImpression"] = "LatentImpression";
+  FingerprintImpressionType2["LatentTracing"] = "LatentTracing";
+  FingerprintImpressionType2["LatentPhoto"] = "LatentPhoto";
+  FingerprintImpressionType2["LatentLift"] = "LatentLift";
+  FingerprintImpressionType2["LiveScanPalm"] = "LiveScanPalm";
+  FingerprintImpressionType2["NonLiveScanPalm"] = "NonLiveScanPalm";
+  FingerprintImpressionType2["LatentPalmImpression"] = "LatentPalmImpression";
+  FingerprintImpressionType2["LatentPalmTracing"] = "LatentPalmTracing";
+  FingerprintImpressionType2["LatentPalmPhoto"] = "LatentPalmPhoto";
+  FingerprintImpressionType2["LatentPalmLift"] = "LatentPalmLift";
+  FingerprintImpressionType2["LiveScanOpticalContactPlain"] = "LiveScanOpticalContactPlain";
+  FingerprintImpressionType2["LiveScanOpticalContactRolled"] = "LiveScanOpticalContactRolled";
+  FingerprintImpressionType2["LiveScanOpticalContactlessPlain"] = "LiveScanOpticalContactlessPlain";
+  FingerprintImpressionType2["LiveScanOpticalContactlessRolled"] = "LiveScanOpticalContactlessRolled";
+  FingerprintImpressionType2["LiveScanCapacitivePlain"] = "LiveScanCapacitivePlain";
+  FingerprintImpressionType2["LiveScanCapacitiveRolled"] = "LiveScanCapacitiveRolled";
+  FingerprintImpressionType2["LiveScanUltrasonicPlain"] = "LiveScanUltrasonicPlain";
+  FingerprintImpressionType2["LiveScanUltrasonicRolled"] = "LiveScanUltrasonicRolled";
+  FingerprintImpressionType2["LiveScanThermalPlain"] = "LiveScanThermalPlain";
+  FingerprintImpressionType2["LiveScanThermalRolled"] = "LiveScanThermalRolled";
+  FingerprintImpressionType2["LiveScanVerticalSwipe"] = "LiveScanVerticalSwipe";
+  FingerprintImpressionType2["LiveScanOpticalPalm"] = "LiveScanOpticalPalm";
+  FingerprintImpressionType2["NonLiveScanOpticalPalm"] = "NonLiveScanOpticalPalm";
+  FingerprintImpressionType2["Swipe"] = "Swipe";
+  FingerprintImpressionType2["LiveScanContactless"] = "LiveScanContactless";
+  return FingerprintImpressionType2;
+})(FingerprintImpressionType || {});
+var IrisPosition = /* @__PURE__ */ ((IrisPosition2) => {
+  IrisPosition2["Right"] = "Right";
+  IrisPosition2["Left"] = "Left";
+  return IrisPosition2;
+})(IrisPosition || {});
+
+// src/lib/utils/imageHelpers.ts
+function normalizeImageForStorage(imageString) {
+  if (!imageString) return "";
+  if (imageString.startsWith("http://") || imageString.startsWith("https://")) {
+    return imageString;
+  }
+  if (imageString.includes("data:image") && imageString.includes(",")) {
+    const parts = imageString.split(",");
+    return parts.length > 1 ? parts[1] : imageString;
+  }
+  return imageString;
+}
+function getImageSrcForDisplay(imageString, format = "png") {
+  if (!imageString) return void 0;
+  if (imageString.startsWith("http://") || imageString.startsWith("https://")) {
+    return imageString;
+  }
+  if (imageString.startsWith("data:image")) {
+    return imageString;
+  }
+  return `data:image/${format};base64,${imageString}`;
+}
+function isRemoteImage(imageString) {
+  if (!imageString) return false;
+  return imageString.startsWith("http://") || imageString.startsWith("https://");
+}
+async function downloadImageAsBase64(url) {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to download image: ${response.status} ${response.statusText}`);
+  }
+  const blob = await response.blob();
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onloadend = () => {
+      const dataUrl = reader.result;
+      const base64 = dataUrl.split(",")[1] || "";
+      resolve(base64);
+    };
+    reader.onerror = reject;
+    reader.readAsDataURL(blob);
+  });
+}
+function canvasToBase64(canvas, format = "image/jpeg", quality = 0.95) {
+  const dataUrl = canvas.toDataURL(format, quality);
+  return dataUrl.split(",")[1] || "";
+}
+function base64toBlob(base64Data) {
+  try {
+    const sliceSize = 512;
+    const byteCharacters = atob(base64Data);
+    const byteArrays = [];
+    for (let offset = 0; offset < byteCharacters.length; offset += sliceSize) {
+      const slice = byteCharacters.slice(offset, offset + sliceSize);
+      const byteNumbers = new Array(slice.length);
+      for (let i = 0; i < slice.length; i++) {
+        byteNumbers[i] = slice.charCodeAt(i);
+      }
+      byteArrays.push(new Uint8Array(byteNumbers));
+    }
+    return new Blob(byteArrays, { type: "application/octet-stream" });
+  } catch (error) {
+    console.error("Error converting base64 to blob:", error);
+    return null;
+  }
+}
+function detectImageFormat(base64Data) {
+  if (!base64Data) return "unknown";
+  const cleanData = normalizeImageForStorage(base64Data);
+  if (!cleanData) return "unknown";
+  try {
+    if (cleanData.startsWith("iVBOR")) return "image/png";
+    if (cleanData.startsWith("/9j/")) return "image/jpeg";
+    if (cleanData.startsWith("R0lGO")) return "image/gif";
+    if (cleanData.startsWith("Qk")) return "image/bmp";
+    if (cleanData.includes("V0VCU")) return "image/webp";
+    if (cleanData.startsWith("AAAA")) return "image/jp2";
+    return "unknown";
+  } catch (error) {
+    console.error("Error detecting image format:", error);
+    return "unknown";
+  }
+}
+function isValidBase64(str) {
+  if (!str || typeof str !== "string") return false;
+  try {
+    const cleaned = normalizeImageForStorage(str);
+    atob(cleaned);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+// src/lib/stores/enrollmentStore.ts
+var FINGER_MAP_INV = {
+  RightThumb: "RIGHT_THUMB",
+  RightIndex: "RIGHT_INDEX",
+  RightMiddle: "RIGHT_MIDDLE",
+  RightRing: "RIGHT_RING",
+  RightLittle: "RIGHT_LITTLE",
+  LeftThumb: "LEFT_THUMB",
+  LeftIndex: "LEFT_INDEX",
+  LeftMiddle: "LEFT_MIDDLE",
+  LeftRing: "LEFT_RING",
+  LeftLittle: "LEFT_LITTLE"
+};
+var PALM_MAP_INV = {
+  RightUpperPalm: "UPPERPALMRIGHT",
+  RightLowerPalm: "LOWERPALMRIGHT",
+  RightWritersPalm: "WRITERSPALMRIGHT",
+  LeftUpperPalm: "UPPERPALMLEFT",
+  LeftLowerPalm: "LOWERPALMLEFT",
+  LeftWritersPalm: "WRITERSPALMLEFT"
+};
+var FINGER_MAP = {
+  RIGHT_THUMB: "RightThumb" /* RightThumb */,
+  RIGHT_INDEX: "RightIndex" /* RightIndex */,
+  RIGHT_MIDDLE: "RightMiddle" /* RightMiddle */,
+  RIGHT_RING: "RightRing" /* RightRing */,
+  RIGHT_LITTLE: "RightLittle" /* RightLittle */,
+  LEFT_THUMB: "LeftThumb" /* LeftThumb */,
+  LEFT_INDEX: "LeftIndex" /* LeftIndex */,
+  LEFT_MIDDLE: "LeftMiddle" /* LeftMiddle */,
+  LEFT_RING: "LeftRing" /* LeftRing */,
+  LEFT_LITTLE: "LeftLittle" /* LeftLittle */
+};
+var PALM_MAP = {
+  UPPERPALMLEFT: "LeftUpperPalm" /* LeftUpperPalm */,
+  LOWERPALMLEFT: "LeftLowerPalm" /* LeftLowerPalm */,
+  WRITERSPALMLEFT: "LeftWritersPalm" /* LeftWritersPalm */,
+  UPPERPALMRIGHT: "RightUpperPalm" /* RightUpperPalm */,
+  LOWERPALMRIGHT: "RightLowerPalm" /* RightLowerPalm */,
+  WRITERSPALMRIGHT: "RightWritersPalm" /* RightWritersPalm */
+};
+var useEnrollmentStore = (0, import_zustand3.create)((set, get) => ({
+  externalId: "",
+  fullName: "",
+  isUpdateMode: false,
+  isLoading: false,
+  fingerprints: {},
+  rolledFingerprints: {},
+  missingFingers: {},
+  palms: {},
+  missingPalms: {},
+  faces: [],
+  faceCaptures: Array(5).fill(null),
+  missingFaces: {},
+  irises: {},
+  missingIrises: {},
+  _originalSnapshot: null,
+  setDemographics: (id, name) => set({ externalId: id, fullName: name }),
+  addFingerprint: (pos, image, quality = 100) => set((state) => {
+    const nextMissing = { ...state.missingFingers };
+    delete nextMissing[pos];
+    return {
+      fingerprints: {
+        ...state.fingerprints,
+        [pos]: { image, quality, impressionType: "LiveScanPlain" }
+      },
+      missingFingers: nextMissing
+    };
+  }),
+  addRolledFingerprint: (pos, image, quality = 100) => set((state) => {
+    const nextMissing = { ...state.missingFingers };
+    delete nextMissing[pos];
+    return {
+      rolledFingerprints: {
+        ...state.rolledFingerprints,
+        [pos]: { image, quality, impressionType: "RolledContact" }
+      },
+      missingFingers: nextMissing
+    };
+  }),
+  removeFingerprint: (pos) => set((state) => {
+    const next = { ...state.fingerprints };
+    delete next[pos];
+    return { fingerprints: next };
+  }),
+  removeRolledFingerprint: (pos) => set((state) => {
+    const next = { ...state.rolledFingerprints };
+    delete next[pos];
+    return { rolledFingerprints: next };
+  }),
+  addMissingFinger: (pos, reason) => set((state) => {
+    const nextFingers = { ...state.fingerprints };
+    const nextRolled = { ...state.rolledFingerprints };
+    delete nextFingers[pos];
+    delete nextRolled[pos];
+    return {
+      missingFingers: { ...state.missingFingers, [pos]: reason },
+      fingerprints: nextFingers,
+      rolledFingerprints: nextRolled
+    };
+  }),
+  removeMissingFinger: (pos) => set((state) => {
+    const next = { ...state.missingFingers };
+    delete next[pos];
+    return { missingFingers: next };
+  }),
+  addPalm: (pos, image, quality = 100) => set((state) => {
+    const nextMissing = { ...state.missingPalms };
+    delete nextMissing[pos];
+    return {
+      palms: {
+        ...state.palms,
+        [pos]: { image, quality, impressionType: "LiveScanPalm" }
+      },
+      missingPalms: nextMissing
+    };
+  }),
+  removePalm: (pos) => set((state) => {
+    const next = { ...state.palms };
+    delete next[pos];
+    return { palms: next };
+  }),
+  addMissingPalm: (pos, reason) => set((state) => {
+    const nextPalms = { ...state.palms };
+    delete nextPalms[pos];
+    return {
+      missingPalms: { ...state.missingPalms, [pos]: reason },
+      palms: nextPalms
+    };
+  }),
+  removeMissingPalm: (pos) => set((state) => {
+    const next = { ...state.missingPalms };
+    delete next[pos];
+    return { missingPalms: next };
+  }),
+  setFaces: (items) => set({ faces: items }),
+  setFaceCaptures: (items) => set({ faceCaptures: items }),
+  removeFace: (index) => set((state) => {
+    const nextCaptures = [...state.faceCaptures];
+    nextCaptures[index] = null;
+    const nextFaces = state.faces.filter((_, i) => i !== index);
+    return { faceCaptures: nextCaptures, faces: nextFaces };
+  }),
+  addMissingFace: (index, reason) => set((state) => {
+    const nextCaptures = [...state.faceCaptures];
+    nextCaptures[index] = null;
+    const nextFaces = state.faces.filter((_, i) => i !== index);
+    return {
+      missingFaces: { ...state.missingFaces, [index]: reason },
+      faceCaptures: nextCaptures,
+      faces: nextFaces
+    };
+  }),
+  removeMissingFace: (index) => set((state) => {
+    const next = { ...state.missingFaces };
+    delete next[index];
+    return { missingFaces: next };
+  }),
+  setIrises: (right, left) => set((state) => {
+    const nextMissing = { ...state.missingIrises };
+    if (right) delete nextMissing.right;
+    if (left) delete nextMissing.left;
+    return { irises: { right, left }, missingIrises: nextMissing };
+  }),
+  removeIris: (side) => set((state) => {
+    const next = { ...state.irises };
+    if (side === "left") delete next.left;
+    if (side === "right") delete next.right;
+    return { irises: next };
+  }),
+  addMissingIris: (side, reason) => set((state) => {
+    const nextIrises = { ...state.irises };
+    if (side === "left") delete nextIrises.left;
+    if (side === "right") delete nextIrises.right;
+    return {
+      missingIrises: { ...state.missingIrises, [side]: reason },
+      irises: nextIrises
+    };
+  }),
+  removeMissingIris: (side) => set((state) => {
+    const next = { ...state.missingIrises };
+    delete next[side];
+    return { missingIrises: next };
+  }),
+  resetEnrollment: () => set({
+    externalId: "",
+    fullName: "",
+    isUpdateMode: false,
+    fingerprints: {},
+    rolledFingerprints: {},
+    missingFingers: {},
+    palms: {},
+    missingPalms: {},
+    faces: [],
+    faceCaptures: Array(5).fill(null),
+    missingFaces: {},
+    irises: {},
+    missingIrises: {},
+    _originalSnapshot: null
+  }),
+  loadApplicantData: async (data) => {
+    set({ isLoading: true });
+    try {
+      const updates = {
+        externalId: data.externalId,
+        fullName: data.customDetails?.fullName || "Solicitante",
+        isUpdateMode: true,
+        fingerprints: {},
+        rolledFingerprints: {},
+        missingFingers: {},
+        palms: {},
+        missingPalms: {},
+        faces: [],
+        faceCaptures: Array(5).fill(null),
+        missingFaces: {},
+        irises: {},
+        missingIrises: {}
+      };
+      if (data.fingerprintModality?.fingerprints) {
+        for (const fp of data.fingerprintModality.fingerprints) {
+          let internalPos = FINGER_MAP_INV[fp.position];
+          let isPalm = false;
+          if (!internalPos) {
+            internalPos = PALM_MAP_INV[fp.position];
+            isPalm = true;
+          }
+          if (!internalPos) continue;
+          let rawImage = fp.image.dataBytes || "";
+          if (!rawImage && fp.image.dataUrl && isRemoteImage(fp.image.dataUrl)) {
+            try {
+              rawImage = await downloadImageAsBase64(fp.image.dataUrl);
+            } catch (e) {
+              console.warn(`No se pudo descargar imagen de ${fp.position}:`, e);
+              rawImage = fp.image.dataUrl;
+            }
+          } else if (!rawImage && fp.image.dataUrl) {
+            rawImage = fp.image.dataUrl;
+          }
+          const imageSrc = normalizeImageForStorage(rawImage);
+          const qualityVal = fp.display?.quality ?? fp.image.qualities?.placement ?? fp.image.qualities?.imageQuality ?? 0;
+          const impression = fp.impressionType || "Unknown";
+          const item = {
+            image: imageSrc,
+            quality: qualityVal,
+            impressionType: impression
+          };
+          if (isPalm) {
+            updates.palms[internalPos] = item;
+          } else {
+            const impressionLower = impression.toLowerCase();
+            const isRolled = impressionLower.includes("rolled");
+            if (isRolled) {
+              updates.rolledFingerprints[internalPos] = item;
+            } else {
+              updates.fingerprints[internalPos] = item;
+            }
+          }
+        }
+      }
+      if (data.fingerprintModality?.missingFingerprints) {
+        data.fingerprintModality.missingFingerprints.forEach((mf) => {
+          const fingerPos = FINGER_MAP_INV[mf.position];
+          if (fingerPos) {
+            updates.missingFingers[fingerPos] = mf.missingReasonText || "Amputaci\xF3n";
+            if (updates.fingerprints) delete updates.fingerprints[fingerPos];
+            if (updates.rolledFingerprints) delete updates.rolledFingerprints[fingerPos];
+            return;
+          }
+          const palmPos = PALM_MAP_INV[mf.position];
+          if (palmPos) {
+            updates.missingPalms[palmPos] = mf.missingReasonText || "No capturable";
+            if (updates.palms) delete updates.palms[palmPos];
+          }
+        });
+      }
+      if (data.faceModality?.faces) {
+        const validFaces = data.faceModality.faces.filter(
+          (f) => f.template && f.image?.qualities?.valid === true
+        );
+        const latestFaces = validFaces.slice(-5);
+        const loadedFaces = [];
+        for (const f of latestFaces) {
+          let rawImage = f.image.dataBytes || "";
+          if (!rawImage && f.image.dataUrl && isRemoteImage(f.image.dataUrl)) {
+            try {
+              rawImage = await downloadImageAsBase64(f.image.dataUrl);
+            } catch (e) {
+              console.warn("No se pudo descargar imagen de rostro:", e);
+              rawImage = f.image.dataUrl;
+            }
+          } else if (!rawImage && f.image.dataUrl) {
+            rawImage = f.image.dataUrl;
+          }
+          const rawQuality = f.template?.qualities?.quality || 0;
+          const normalizedQuality = Math.min(Math.round(rawQuality / 2), 100);
+          loadedFaces.push({
+            image: normalizeImageForStorage(rawImage),
+            quality: normalizedQuality
+          });
+        }
+        updates.faces = loadedFaces;
+        const newCaptures = Array(5).fill(null);
+        loadedFaces.forEach((face, index) => {
+          if (index < 5) newCaptures[index] = face;
+        });
+        updates.faceCaptures = newCaptures;
+      }
+      if (data.irisModality?.irises) {
+        const newIrises = {};
+        for (const iris of data.irisModality.irises) {
+          let rawImage = iris.image.dataBytes || "";
+          if (!rawImage && iris.image.dataUrl && isRemoteImage(iris.image.dataUrl)) {
+            try {
+              rawImage = await downloadImageAsBase64(iris.image.dataUrl);
+            } catch (e) {
+              console.warn(
+                `No se pudo descargar imagen de iris ${iris.position}:`,
+                e
+              );
+              rawImage = iris.image.dataUrl;
+            }
+          } else if (!rawImage && iris.image.dataUrl) {
+            rawImage = iris.image.dataUrl;
+          }
+          const item = {
+            image: normalizeImageForStorage(rawImage),
+            quality: iris.image.qualities?.quality || 100
+          };
+          if (iris.position === "Right") newIrises.right = item;
+          if (iris.position === "Left") newIrises.left = item;
+        }
+        updates.irises = newIrises;
+      }
+      if (data.irisModality?.missingIrises) {
+        data.irisModality.missingIrises.forEach((mi) => {
+          if (mi.position === "Right") {
+            updates.missingIrises["right"] = mi.missingReasonText || "No capturable";
+            if (updates.irises) delete updates.irises.right;
+          }
+          if (mi.position === "Left") {
+            updates.missingIrises["left"] = mi.missingReasonText || "No capturable";
+            if (updates.irises) delete updates.irises.left;
+          }
+        });
+      }
+      if (data.faceModality?.missingFaces) {
+        data.faceModality.missingFaces.forEach((mf) => {
+          updates.missingFaces[mf.index] = mf.missingReasonText || "No capturable";
+          if (updates.faceCaptures) {
+            updates.faceCaptures[mf.index] = null;
+          }
+        });
+        if (updates.faces && updates.faces.length > 0) {
+          updates.faces = updates.faceCaptures.filter((item) => item !== null);
+        }
+      }
+      const snapshot = {
+        fingerprints: { ...updates.fingerprints },
+        rolledFingerprints: { ...updates.rolledFingerprints },
+        missingFingers: { ...updates.missingFingers },
+        palms: { ...updates.palms },
+        missingPalms: { ...updates.missingPalms },
+        faces: [...updates.faces || []],
+        faceCaptures: [...updates.faceCaptures || Array(5).fill(null)],
+        missingFaces: { ...updates.missingFaces },
+        irises: { ...updates.irises },
+        missingIrises: { ...updates.missingIrises }
+      };
+      set((state) => ({
+        ...state,
+        ...updates,
+        _originalSnapshot: snapshot,
+        isLoading: false
+      }));
+    } catch (error) {
+      console.error("Error loading applicant data:", error);
+    } finally {
+      set({ isLoading: false });
+    }
+  },
+  buildEnrollmentRequest: () => {
+    const state = get();
+    const plainFingerprints = Object.entries(state.fingerprints).map(([key, item]) => ({
+      position: FINGER_MAP[key],
+      impressionType: "LiveScanPlain" /* LiveScanPlain */,
+      image: { dataBytes: normalizeImageForStorage(item.image) }
+    })).filter((f) => f.position);
+    const rolledFingerprints = Object.entries(state.rolledFingerprints).map(([key, item]) => ({
+      position: FINGER_MAP[key],
+      impressionType: "RolledContact" /* RolledContact */,
+      image: { dataBytes: normalizeImageForStorage(item.image) }
+    })).filter((f) => f.position);
+    const palmFingerprints = Object.entries(state.palms).map(([key, item]) => ({
+      position: PALM_MAP[key],
+      impressionType: "LiveScanPlain" /* LiveScanPlain */,
+      image: { dataBytes: normalizeImageForStorage(item.image) }
+    })).filter((f) => f.position);
+    const allFrictionRidge = [
+      ...plainFingerprints,
+      ...rolledFingerprints,
+      ...palmFingerprints
+    ];
+    const fingerMissing = Object.entries(state.missingFingers).map(([key, reason]) => ({
+      position: FINGER_MAP[key],
+      missingReasonCode: "UAP",
+      missingReasonText: reason
+    })).filter((f) => f.position);
+    const palmMissing = Object.entries(state.missingPalms).map(([key, reason]) => ({
+      position: PALM_MAP[key],
+      missingReasonCode: "UAP",
+      missingReasonText: reason
+    })).filter((f) => f.position);
+    const allMissingFingerprints = [...fingerMissing, ...palmMissing];
+    let finalFaces = [];
+    if (state.faces.length > 0) {
+      finalFaces = state.faces.map((item) => ({
+        image: { dataBytes: normalizeImageForStorage(item.image) }
+      }));
+    } else {
+      finalFaces = state.faceCaptures.filter((item) => item !== null).map((item) => ({
+        image: { dataBytes: normalizeImageForStorage(item.image) }
+      }));
+    }
+    const faceMissing = Object.entries(
+      state.missingFaces
+    ).map(([idx, reason]) => ({
+      index: Number(idx),
+      missingReasonCode: "UAP",
+      missingReasonText: reason
+    }));
+    const finalIrises = [];
+    if (state.irises.right) {
+      finalIrises.push({
+        position: "Right" /* Right */,
+        image: {
+          dataBytes: normalizeImageForStorage(state.irises.right.image)
+        }
+      });
+    }
+    if (state.irises.left) {
+      finalIrises.push({
+        position: "Left" /* Left */,
+        image: { dataBytes: normalizeImageForStorage(state.irises.left.image) }
+      });
+    }
+    const irisMissing = Object.entries(
+      state.missingIrises
+    ).map(([side, reason]) => ({
+      position: side === "right" ? "Right" /* Right */ : "Left" /* Left */,
+      missingReasonCode: "UAP",
+      missingReasonText: reason
+    }));
+    const request = {
+      externalId: state.externalId || `AUTO-${Date.now()}`,
+      enrollAction: { enrollActionType: "Masterize" },
+      customDetails: {
+        fullName: state.fullName || "Unknown Applicant"
+      },
+      fingerprintModality: {
+        fingerprints: allFrictionRidge,
+        missingFingerprints: allMissingFingerprints
+      },
+      faceModality: {
+        faces: finalFaces,
+        missingFaces: faceMissing.length > 0 ? faceMissing : void 0
+      },
+      irisModality: {
+        irises: finalIrises,
+        missingIrises: irisMissing.length > 0 ? irisMissing : void 0
+      }
+    };
+    return request;
+  },
+  getDirtyModalities: () => {
+    const state = get();
+    const snap = state._originalSnapshot;
+    const dirty = /* @__PURE__ */ new Set();
+    if (!snap) {
+      if (Object.keys(state.fingerprints).length > 0 || Object.keys(state.rolledFingerprints).length > 0 || Object.keys(state.missingFingers).length > 0 || Object.keys(state.palms).length > 0 || Object.keys(state.missingPalms).length > 0)
+        dirty.add("fingerprint");
+      if (state.faces.length > 0 || state.faceCaptures.some((f) => f !== null) || Object.keys(state.missingFaces).length > 0)
+        dirty.add("face");
+      if (state.irises.right || state.irises.left || Object.keys(state.missingIrises).length > 0)
+        dirty.add("iris");
+      return dirty;
+    }
+    const fingerprintChanged = JSON.stringify(state.fingerprints) !== JSON.stringify(snap.fingerprints) || JSON.stringify(state.rolledFingerprints) !== JSON.stringify(snap.rolledFingerprints) || JSON.stringify(state.missingFingers) !== JSON.stringify(snap.missingFingers) || JSON.stringify(state.palms) !== JSON.stringify(snap.palms) || JSON.stringify(state.missingPalms) !== JSON.stringify(snap.missingPalms);
+    if (fingerprintChanged) dirty.add("fingerprint");
+    const faceChanged = JSON.stringify(state.faces) !== JSON.stringify(snap.faces) || JSON.stringify(state.faceCaptures) !== JSON.stringify(snap.faceCaptures) || JSON.stringify(state.missingFaces) !== JSON.stringify(snap.missingFaces);
+    if (faceChanged) dirty.add("face");
+    const irisChanged = JSON.stringify(state.irises) !== JSON.stringify(snap.irises) || JSON.stringify(state.missingIrises) !== JSON.stringify(snap.missingIrises);
+    if (irisChanged) dirty.add("iris");
+    return dirty;
+  },
+  buildUpdateRequest: () => {
+    const state = get();
+    const dirty = state.getDirtyModalities();
+    const request = {
+      customDetails: {
+        fullName: state.fullName || "Unknown Applicant"
+      }
+    };
+    if (dirty.has("fingerprint")) {
+      const plainFingerprints = Object.entries(state.fingerprints).map(([key, item]) => ({
+        position: FINGER_MAP[key],
+        impressionType: "LiveScanPlain" /* LiveScanPlain */,
+        image: { dataBytes: normalizeImageForStorage(item.image) }
+      })).filter((f) => f.position);
+      const rolledFingerprints = Object.entries(state.rolledFingerprints).map(([key, item]) => ({
+        position: FINGER_MAP[key],
+        impressionType: "RolledContact" /* RolledContact */,
+        image: { dataBytes: normalizeImageForStorage(item.image) }
+      })).filter((f) => f.position);
+      const palmFingerprints = Object.entries(state.palms).map(([key, item]) => ({
+        position: PALM_MAP[key],
+        impressionType: "LiveScanPlain" /* LiveScanPlain */,
+        image: { dataBytes: normalizeImageForStorage(item.image) }
+      })).filter((f) => f.position);
+      const fingerMissing = Object.entries(state.missingFingers).map(([key, reason]) => ({
+        position: FINGER_MAP[key],
+        missingReasonCode: "UAP",
+        missingReasonText: reason
+      })).filter((f) => f.position);
+      const palmMissing = Object.entries(state.missingPalms).map(([key, reason]) => ({
+        position: PALM_MAP[key],
+        missingReasonCode: "UAP",
+        missingReasonText: reason
+      })).filter((f) => f.position);
+      request.fingerprintModality = {
+        fingerprints: [
+          ...plainFingerprints,
+          ...rolledFingerprints,
+          ...palmFingerprints
+        ],
+        missingFingerprints: [...fingerMissing, ...palmMissing]
+      };
+    }
+    if (dirty.has("face")) {
+      let finalFaces = [];
+      if (state.faces.length > 0) {
+        finalFaces = state.faces.map((item) => ({
+          image: { dataBytes: normalizeImageForStorage(item.image) }
+        }));
+      } else {
+        finalFaces = state.faceCaptures.filter((item) => item !== null).map((item) => ({
+          image: { dataBytes: normalizeImageForStorage(item.image) }
+        }));
+      }
+      const faceMissing = Object.entries(
+        state.missingFaces
+      ).map(([idx, reason]) => ({
+        index: Number(idx),
+        missingReasonCode: "UAP",
+        missingReasonText: reason
+      }));
+      request.faceModality = {
+        faces: finalFaces,
+        missingFaces: faceMissing.length > 0 ? faceMissing : void 0
+      };
+    }
+    if (dirty.has("iris")) {
+      const finalIrises = [];
+      if (state.irises.right) {
+        finalIrises.push({
+          position: "Right" /* Right */,
+          image: {
+            dataBytes: normalizeImageForStorage(state.irises.right.image)
+          }
+        });
+      }
+      if (state.irises.left) {
+        finalIrises.push({
+          position: "Left" /* Left */,
+          image: {
+            dataBytes: normalizeImageForStorage(state.irises.left.image)
+          }
+        });
+      }
+      const irisMissing = Object.entries(
+        state.missingIrises
+      ).map(([side, reason]) => ({
+        position: side === "right" ? "Right" /* Right */ : "Left" /* Left */,
+        missingReasonCode: "UAP",
+        missingReasonText: reason
+      }));
+      request.irisModality = {
+        irises: finalIrises,
+        missingIrises: irisMissing.length > 0 ? irisMissing : void 0
+      };
+    }
+    return request;
+  }
+}));
+
+// src/components/ui/BiometricSlot.tsx
+var import_framer_motion = require("framer-motion");
+var import_tb = require("react-icons/tb");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var iconMap = {
+  finger: import_tb.TbFingerprint,
+  face: import_tb.TbFaceId,
+  palm: import_tb.TbHandStop,
+  iris: import_tb.TbEye
+};
+function BiometricSlot({
+  title,
+  position,
+  status,
+  quality,
+  imageUrl,
+  onCapture,
+  onRequestMissing,
+  onRestore,
+  onDelete,
+  missingReason: externalMissingReason,
+  iconType,
+  isDisabled = false,
+  className = "",
+  isLoadedFromBackend = false
+}) {
+  const IconComponent = iconMap[iconType];
+  const missingReason = externalMissingReason || null;
+  const isMissing = !!missingReason;
+  let ringClass = "ring-border/50 dark:ring-white/10";
+  let glowClass = "";
+  let elevationClass = "elevation-1 hover:elevation-2";
+  let statusColor = "text-foreground/40";
+  let buttonStyle = "bg-primary text-primary-foreground hover:bg-primary/90 hover:shadow-glow-primary";
+  let borderClass = "border-white/10";
+  if (status === "captured" && !isMissing) {
+    const q = quality || 0;
+    if (q >= 80) {
+      ringClass = "ring-quality-good/60";
+      glowClass = "glow-success";
+      elevationClass = "elevation-3";
+      statusColor = "text-quality-good";
+      buttonStyle = "bg-secondary text-foreground hover:bg-secondary/80 border border-border/50";
+      borderClass = "border-quality-good/30";
+    } else if (q >= 50) {
+      ringClass = "ring-quality-ok/50";
+      glowClass = "";
+      elevationClass = "elevation-2";
+      statusColor = "text-quality-ok";
+      buttonStyle = "bg-secondary text-foreground hover:bg-secondary/80 border border-border/50";
+      borderClass = "border-quality-ok/30";
+    } else {
+      ringClass = "ring-quality-bad/50";
+      glowClass = "glow-danger";
+      elevationClass = "elevation-2";
+      statusColor = "text-quality-bad";
+      buttonStyle = "bg-secondary text-foreground hover:bg-secondary/80 border border-border/50";
+      borderClass = "border-quality-bad/30";
+    }
+  } else if (isMissing) {
+    ringClass = "ring-red-500/30";
+    borderClass = "border-red-500/20 border-dashed";
+    glowClass = "";
+    elevationClass = "elevation-1";
+    statusColor = "text-red-400";
+    buttonStyle = "bg-transparent border border-red-500/30 text-red-400 cursor-not-allowed opacity-50";
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    import_framer_motion.motion.div,
+    {
+      className: `
+        relative flex flex-col p-3 rounded-md transition-all duration-300
+        group cursor-pointer select-none
+        bg-card/40
+        ${elevationClass}
+        ${borderClass}
+        ${status === "captured" && !isMissing ? "ring-2 " + ringClass : "hover:ring-1 hover:ring-primary/30 hover:border-primary/30"}
+        ${glowClass}
+        hover:-translate-y-1
+        ${isDisabled ? "opacity-50 pointer-events-none grayscale hover:translate-y-0" : ""}
+        ${isMissing ? "bg-red-500/5" : ""}
+        ${className}
+      `,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex justify-between items-start w-full mb-3 z-10 h-6", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "p",
+            {
+              className: "text-xs font-bold truncate text-foreground/70",
+              title,
+              children: title
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-1", children: [
+            status === "captured" && !isMissing && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_jsx_runtime2.Fragment, { children: isLoadedFromBackend ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-blue-500/90 text-white text-[9px] px-1.5 py-0.5 rounded-full font-bold flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tb.TbCloud, { size: 10 }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Cargado" })
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "bg-green-500/90 text-white text-[9px] px-1.5 py-0.5 rounded-full font-bold flex items-center gap-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tb.TbCheck, { size: 10 }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: "Nuevo" })
+            ] }) }),
+            isMissing ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  onRestore?.();
+                },
+                className: "text-green-500 hover:bg-green-500/10 p-1 rounded-full transition-colors",
+                title: "Restaurar",
+                children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tb.TbRestore, { size: 16 })
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-0.5", children: [
+              status === "captured" && onDelete && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onDelete();
+                  },
+                  disabled: isDisabled,
+                  className: "text-foreground/20 hover:text-red-500 hover:bg-red-500/10 p-1 rounded-full disabled:opacity-0 transition-colors",
+                  title: "Eliminar captura",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tb.TbTrash, { size: 16 })
+                }
+              ),
+              onRequestMissing && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "button",
+                {
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onRequestMissing();
+                  },
+                  disabled: isDisabled,
+                  className: "text-foreground/20 hover:text-red-500 hover:bg-red-500/10 p-1 rounded-full disabled:opacity-0 transition-colors",
+                  title: "Marcar como no capturable",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tb.TbBan, { size: 16 })
+                }
+              )
+            ] })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "div",
+          {
+            className: "\r\n          relative w-full flex-1 min-h-[100px] flex items-center justify-center\r\n          rounded-md overflow-hidden\r\n          bg-black/5 dark:bg-white/5 border border-transparent\r\n          group-hover:border-white/5 transition-all\r\n        ",
+            onClick: !isDisabled && !isMissing ? onCapture : void 0,
+            children: isMissing ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex flex-col items-center text-center p-2 animate-in zoom-in duration-300", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tb.TbBan, { size: 32, className: "text-red-400/50 mb-2" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "text-[10px] text-red-400 font-bold uppercase tracking-wider", children: missingReason })
+            ] }) : imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              import_framer_motion.motion.img,
+              {
+                initial: { opacity: 0 },
+                animate: { opacity: 1 },
+                src: imageUrl,
+                className: "w-full h-full object-contain p-2",
+                alt: title
+              }
+            ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              IconComponent,
+              {
+                size: 40,
+                className: `
+              text-foreground/10 transition-all duration-300
+              ${!isDisabled && "group-hover:scale-110 group-hover:text-primary/40"}
+            `
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "w-full mt-4 flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "span",
+            {
+              className: `text-[10px] uppercase font-bold tracking-wider ${statusColor}`,
+              children: isMissing ? "Omitido" : status === "captured" ? `${quality}% Calidad` : "Pendiente"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                if (!isMissing) onCapture();
+              },
+              disabled: isDisabled || isMissing,
+              className: `h-8 px-3 rounded-sm text-xs font-bold flex items-center gap-1 transition-all shadow-sm ${buttonStyle}`,
+              children: [
+                status === "captured" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tb.TbRefresh, { size: 14 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_tb.TbPlus, { size: 14 }),
+                /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { children: status === "captured" ? "Repetir" : "Capturar" })
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/ui/MissingFingerModal.tsx
+var import_react3 = require("react");
+
+// src/components/ui/Modal.tsx
+var import_framer_motion2 = require("framer-motion");
+var import_tb2 = require("react-icons/tb");
+var import_react2 = require("react");
+var import_react_dom = require("react-dom");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function Modal({
+  isOpen,
+  onClose,
+  title,
+  children,
+  allowClose = true
+}) {
+  const [mounted, setMounted] = (0, import_react2.useState)(false);
+  (0, import_react2.useEffect)(() => {
+    setMounted(true);
+    return () => setMounted(false);
+  }, []);
+  (0, import_react2.useEffect)(() => {
+    if (isOpen) document.body.style.overflow = "hidden";
+    else document.body.style.overflow = "unset";
+    return () => {
+      document.body.style.overflow = "unset";
+    };
+  }, [isOpen]);
+  if (!mounted) return null;
+  const modalContent = /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_framer_motion2.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "fixed inset-0 z-[9999] flex items-center justify-center p-4 sm:p-6", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      import_framer_motion2.motion.div,
+      {
+        className: "absolute inset-0  backdrop-blur-md transition-all",
+        initial: { opacity: 0 },
+        animate: { opacity: 1 },
+        exit: { opacity: 0 },
+        onClick: allowClose ? onClose : void 0
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      import_framer_motion2.motion.div,
+      {
+        className: "\r\n              relative z-10 w-full max-w-2xl flex flex-col\r\n              rounded-sm overflow-hidden\r\n              bg-card/95\r\n              elevation-5\r\n              max-h-[85vh]\r\n            ",
+        initial: { scale: 0.92, opacity: 0, y: 25 },
+        animate: { scale: 1, opacity: 1, y: 0 },
+        exit: { scale: 0.95, opacity: 0, y: 15 },
+        transition: {
+          type: "spring",
+          bounce: 0.35,
+          duration: 0.5
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "absolute top-0 inset-x-0 h-[1px] bg-gradient-to-r from-transparent via-primary/60 to-transparent z-20" }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex items-center justify-between px-6 py-5 border-b border-white/5 bg-white/5 relative z-10", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { className: "text-xl font-bold text-foreground tracking-tight drop-shadow-sm", children: title }),
+            allowClose && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+              "button",
+              {
+                onClick: onClose,
+                className: "\r\n                    group p-2 rounded-full\r\n                    text-foreground/50 hover:text-foreground\r\n                    hover:bg-white/10 transition-all duration-200\r\n                  ",
+                children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                  import_tb2.TbX,
+                  {
+                    size: 22,
+                    className: "group-hover:scale-110 transition-transform"
+                  }
+                )
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            "div",
+            {
+              className: "\r\n                p-6 sm:p-8 \r\n                overflow-y-auto \r\n                scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border/40 hover:scrollbar-thumb-border/70\r\n              ",
+              children
+            }
+          )
+        ]
+      }
+    )
+  ] }) });
+  return (0, import_react_dom.createPortal)(modalContent, document.body);
+}
+
+// src/components/ui/Button.tsx
+var import_tb3 = require("react-icons/tb");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function Button({
+  variant = "primary",
+  size = "md",
+  isLoading = false,
+  icon,
+  className = "",
+  children,
+  disabled,
+  ...props
+}) {
+  const variantClasses = {
+    primary: `
+      bg-primary text-primary-foreground
+      elevation-2
+      hover:elevation-3 hover:-translate-y-1 hover:scale-[1.02]
+      active:scale-[0.97] active:translate-y-0
+      shadow-primary/20
+    `,
+    secondary: `
+      bg-secondary text-secondary-foreground
+      elevation-1
+      hover:elevation-2 hover:-translate-y-1
+      active:scale-[0.97]
+    `,
+    success: `
+      bg-success/10 text-success
+      elevation-1
+      hover:bg-success hover:text-white hover:elevation-2 hover:-translate-y-1 hover:glow-success
+      active:scale-[0.97]
+    `,
+    danger: `
+      bg-danger/10 text-danger
+      elevation-1
+      hover:bg-danger hover:text-white hover:elevation-2 hover:-translate-y-1 hover:glow-danger
+      active:scale-[0.97]
+    `,
+    warning: `
+      bg-warning/10 text-warning
+      elevation-1
+      hover:bg-warning hover:text-foreground hover:elevation-2 hover:-translate-y-1 hover:glow-warning
+      active:scale-[0.97]
+    `,
+    ghost: `
+      bg-transparent
+      border border-border-default
+      hover:bg-secondary/50 hover:elevation-1 hover:-translate-y-1
+      active:scale-[0.97]
+    `
+  };
+  const sizeClasses = {
+    sm: "px-3 py-1.5 text-xs rounded-sm",
+    md: "px-4 py-2.5 text-sm rounded-md",
+    lg: "px-6 py-3.5 text-base rounded-md"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+    "button",
+    {
+      className: `
+        ${variantClasses[variant]}
+        ${sizeClasses[size]}
+        font-semibold inline-flex items-center justify-center gap-2
+        transition-all duration-250
+        disabled:opacity-50 disabled:cursor-not-allowed
+        ${className}
+      `,
+      disabled: disabled || isLoading,
+      ...props,
+      children: [
+        isLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_tb3.TbLoader, { className: "animate-spin" }) : icon,
+        children
+      ]
+    }
+  );
+}
+
+// src/components/ui/MissingFingerModal.tsx
+var import_tb4 = require("react-icons/tb");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var REASONS_BY_TYPE = {
+  finger: [
+    "Amputaci\xF3n Total",
+    "Amputaci\xF3n Parcial",
+    "Herida / Vendaje",
+    "Deformidad",
+    "Imposibilidad F\xEDsica",
+    "Otro"
+  ],
+  palm: [
+    "Herida / Vendaje",
+    "Deformidad",
+    "Imposibilidad F\xEDsica",
+    "Otro"
+  ],
+  iris: [
+    "Pr\xF3tesis Ocular",
+    "Lesi\xF3n / Cirug\xEDa",
+    "Ceguera",
+    "Imposibilidad F\xEDsica",
+    "Otro"
+  ],
+  face: [
+    "Lesi\xF3n Facial",
+    "Vendaje / Cubrimiento",
+    "Imposibilidad F\xEDsica",
+    "Otro"
+  ]
+};
+var WARNINGS = {
+  finger: "Al marcar este dedo como no capturable, el sistema lo ignorar\xE1 autom\xE1ticamente durante el escaneo.",
+  palm: "Al marcar esta palma como no capturable, ser\xE1 excluida del enrolamiento.",
+  iris: "Al marcar este iris como no capturable, ser\xE1 excluido del enrolamiento.",
+  face: "Al marcar este \xE1ngulo facial como no capturable, ser\xE1 excluido del enrolamiento."
+};
+var MissingBiometricModal = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  positionName,
+  biometricType = "finger"
+}) => {
+  const reasons = REASONS_BY_TYPE[biometricType];
+  const [selectedReason, setSelectedReason] = (0, import_react3.useState)(reasons[0]);
+  (0, import_react3.useEffect)(() => {
+    if (isOpen) {
+      setSelectedReason(REASONS_BY_TYPE[biometricType][0]);
+    }
+  }, [isOpen, biometricType]);
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    Modal,
+    {
+      isOpen,
+      onClose,
+      title: `Omitir captura: ${positionName}`,
+      children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "p-4 space-y-4", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "bg-warning/10 border-l-4 border-warning p-3 text-sm text-warning", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { children: WARNINGS[biometricType] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "space-y-2 mt-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "font-semibold text-foreground/70 mb-2", children: "Seleccione el motivo:" }),
+          reasons.map((reason) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+            "label",
+            {
+              className: `flex items-center p-3 border rounded-sm cursor-pointer transition-colors ${selectedReason === reason ? "bg-primary/10 border-primary ring-1 ring-primary" : "hover:bg-secondary/50 border-border-default"}`,
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+                  "input",
+                  {
+                    type: "radio",
+                    name: "reason",
+                    value: reason,
+                    checked: selectedReason === reason,
+                    onChange: (e) => setSelectedReason(e.target.value),
+                    className: "h-4 w-4 text-primary focus:ring-primary border-border-default"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ml-3 text-foreground", children: reason })
+              ]
+            },
+            reason
+          ))
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "flex justify-end space-x-3 pt-4 border-t border-border-default mt-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Button,
+            {
+              onClick: onClose,
+              variant: "secondary",
+              size: "md",
+              children: "Cancelar"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            Button,
+            {
+              onClick: () => onConfirm(selectedReason),
+              variant: "danger",
+              size: "md",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_tb4.TbBan, {}),
+              children: "Confirmar Excepci\xF3n"
+            }
+          )
+        ] })
+      ] })
+    }
+  );
+};
+var MissingFingerModal = MissingBiometricModal;
+
+// src/components/ui/ProgressBar.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function ProgressBar({
+  current,
+  total,
+  label = "Progreso del enrolamiento",
+  className = ""
+}) {
+  const progress = Math.min(100, Math.max(0, current / total * 100));
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: `w-full mt-8 ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex justify-between text-xs font-semibold text-foreground/50 mb-2 uppercase tracking-wider", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { children: label }),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { children: [
+        current,
+        " / ",
+        total,
+        " Completadas"
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "h-3 w-full bg-secondary rounded-full overflow-hidden border border-white/5", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "div",
+      {
+        className: "h-full bg-gradient-to-r from-primary to-purple-500 transition-all duration-700 ease-out relative",
+        style: { width: `${progress}%` },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute inset-0 bg-white/20 animate-pulse" }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "absolute right-0 top-0 bottom-0 w-[1px] bg-white/50 shadow-[0_0_10px_2px_rgba(255,255,255,0.5)]" })
+        ]
+      }
+    ) })
+  ] });
+}
+
+// src/components/enrollment/ModuleHeader.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function ModuleHeader({
+  icon,
+  title,
+  subtitle,
+  progress,
+  children
+}) {
+  const isConnected = useBiometricStore((s) => s.isConnected);
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "glass rounded-sm p-6 md:p-8 border border-white/10", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-col md:flex-row justify-between items-start md:items-center gap-6", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("h2", { className: "text-2xl font-bold text-foreground flex items-center gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "p-2 bg-primary/10 rounded-sm text-primary", children: icon }),
+          title
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "text-foreground/60 mt-2 max-w-xl text-sm", children: subtitle })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex flex-wrap gap-3 items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+          "div",
+          {
+            className: `px-3 py-1.5 rounded-sm text-[10px] font-bold uppercase tracking-wider flex items-center gap-2 border ${isConnected ? "bg-green-500/10 border-green-500/20 text-green-600 dark:text-green-400" : "bg-red-500/10 border-red-500/20 text-red-600 dark:text-red-400"}`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+                "span",
+                {
+                  className: `w-1.5 h-1.5 rounded-full ${isConnected ? "bg-green-500 animate-pulse" : "bg-red-500"}`
+                }
+              ),
+              isConnected ? "Conectado" : "Desconectado"
+            ]
+          }
+        ),
+        children
+      ] })
+    ] }),
+    progress && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(ProgressBar, { current: progress.current, total: progress.total })
+  ] });
+}
+
+// src/components/ui/Select.tsx
+var import_react4 = require("react");
+var import_framer_motion3 = require("framer-motion");
+var import_tb5 = require("react-icons/tb");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function Select({
+  value,
+  onChange,
+  options,
+  placeholder = "Seleccionar...",
+  disabled = false,
+  className = ""
+}) {
+  const [isOpen, setIsOpen] = (0, import_react4.useState)(false);
+  const containerRef = (0, import_react4.useRef)(null);
+  (0, import_react4.useEffect)(() => {
+    function handleClickOutside(event) {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const selectedOption = options.find((opt) => opt.value === value);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+    "div",
+    {
+      className: `relative w-full min-w-[200px] ${className}`,
+      ref: containerRef,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: () => !disabled && setIsOpen(!isOpen),
+            disabled,
+            className: `
+          w-full flex items-center justify-between
+          px-4 py-3 rounded-md text-sm font-medium
+          transition-all duration-250
+          ${disabled ? "opacity-50 cursor-not-allowed bg-secondary border-border elevation-1" : isOpen ? "bg-card elevation-3 ring-2 ring-primary/50 glow-primary text-foreground" : "bg-card/50 elevation-1 hover:elevation-2 hover:-translate-y-0.5 hover:border-primary/30 text-foreground/80"}
+        `,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "flex items-center gap-2 truncate", children: [
+                selectedOption?.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-primary/80", children: selectedOption.icon }),
+                selectedOption ? selectedOption.label : /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "text-muted-foreground", children: placeholder })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                import_tb5.TbChevronDown,
+                {
+                  className: `
+            w-4 h-4 opacity-50 transition-transform duration-300
+            ${isOpen ? "rotate-180 text-primary" : ""}
+          `
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_framer_motion3.AnimatePresence, { children: isOpen && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+          import_framer_motion3.motion.div,
+          {
+            initial: { opacity: 0, y: 8, scale: 0.98 },
+            animate: { opacity: 1, y: 0, scale: 1 },
+            exit: { opacity: 0, y: 8, scale: 0.98 },
+            transition: { duration: 0.2, ease: "easeOut" },
+            className: "\r\n              absolute z-50 top-full left-0 right-0 mt-2\r\n              p-1.5 rounded-md border border-white/10\r\n              bg-card/95 backdrop-blur-2xl\r\n              shadow-2xl shadow-black/20\r\n              max-h-64 overflow-y-auto\r\n              scrollbar-thin scrollbar-track-transparent scrollbar-thumb-border/50\r\n            ",
+            children: options.map((option) => {
+              const isSelected = option.value === value;
+              return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+                "div",
+                {
+                  onClick: () => {
+                    onChange(option.value);
+                    setIsOpen(false);
+                  },
+                  className: `
+                    flex items-center justify-between px-3 py-2.5 rounded-sm cursor-pointer
+                    text-sm transition-all duration-150
+                    ${isSelected ? "bg-primary/10 text-primary font-semibold" : "text-foreground/70 hover:bg-white/5 hover:text-foreground"}
+                  `,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center gap-2.5", children: [
+                      option.icon && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                        "span",
+                        {
+                          className: isSelected ? "text-primary" : "opacity-50",
+                          children: option.icon
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { children: option.label })
+                    ] }),
+                    isSelected && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                      import_framer_motion3.motion.div,
+                      {
+                        initial: { scale: 0 },
+                        animate: { scale: 1 },
+                        transition: {
+                          type: "spring",
+                          stiffness: 300,
+                          damping: 20
+                        },
+                        children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_tb5.TbCheck, { size: 16 })
+                      }
+                    )
+                  ]
+                },
+                option.value
+              );
+            })
+          }
+        ) })
+      ]
+    }
+  );
+}
+
+// src/components/ui/QualityBadge.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function QualityBadge({ quality, className = "" }) {
+  if (quality === null || quality === void 0) return null;
+  const baseClasses = "flex flex-col items-center justify-center w-16 h-16 rounded-full border-2 backdrop-blur-xl shadow-lg animate-in zoom-in duration-300";
+  let colorClasses = "";
+  if (quality >= 80) {
+    colorClasses = "text-quality-good border-quality-good/30 bg-quality-good/10 shadow-[0_0_10px_-3px_rgba(var(--quality-good),0.3)]";
+  } else if (quality >= 50) {
+    colorClasses = "text-quality-ok border-quality-ok/30 bg-quality-ok/10 shadow-[0_0_10px_-3px_rgba(var(--quality-ok),0.3)]";
+  } else {
+    colorClasses = "text-quality-bad border-quality-bad/30 bg-quality-bad/10 shadow-[0_0_10px_-3px_rgba(var(--quality-bad),0.3)]";
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: `${baseClasses} ${colorClasses} ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-xl font-bold tracking-tighter leading-none", children: quality }),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "text-[8px] font-bold uppercase tracking-widest opacity-70 mt-0.5", children: "CALIDAD" })
+  ] });
+}
+
+// src/components/ui/Loader.tsx
+var import_tb6 = require("react-icons/tb");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function Loader({ size = 24, text, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: `flex flex-col items-center justify-center gap-2 text-primary ${className}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_tb6.TbLoader, { size, className: "animate-spin" }),
+    text && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("p", { className: "text-sm text-foreground/80", children: text })
+  ] });
+}
+
+// src/components/enrollment/FingerCaptureModal.tsx
+var import_tb7 = require("react-icons/tb");
+var import_framer_motion4 = require("framer-motion");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function FingerCaptureModal({
+  isOpen,
+  onCancel,
+  captureType,
+  previewImage,
+  previewQuality
+}) {
+  const isWaiting = !previewImage;
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    Modal,
+    {
+      isOpen,
+      onClose: onCancel,
+      title: captureType,
+      allowClose: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col md:flex-row gap-8 items-stretch p-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+          "div",
+          {
+            className: "\r\n              relative w-full max-w-[280px] aspect-[3/4]\r\n              rounded-md overflow-hidden\r\n              bg-black/5 dark:bg-white/5\r\n              border border-border/50 dark:border-white/10\r\n              shadow-inner flex items-center justify-center\r\n            ",
+            children: [
+              isWaiting && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                import_framer_motion4.motion.div,
+                {
+                  className: "absolute inset-x-0 h-[2px] bg-primary/80 z-10 shadow-[0_0_15px_2px_rgba(var(--primary),0.6)]",
+                  animate: { top: ["0%", "100%", "0%"] },
+                  transition: { duration: 3, repeat: Infinity, ease: "linear" }
+                }
+              ),
+              previewImage ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                import_framer_motion4.motion.img,
+                {
+                  initial: { opacity: 0, scale: 0.95 },
+                  animate: { opacity: 1, scale: 1 },
+                  transition: { duration: 0.3 },
+                  src: previewImage,
+                  alt: "Vista previa",
+                  className: "object-contain w-full h-full p-4 rotate-180 drop-shadow-xl"
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col items-center justify-center text-foreground/30 gap-4", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "relative", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_tb7.TbFingerprint, { size: 80, className: "animate-pulse" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                    import_tb7.TbScan,
+                    {
+                      size: 30,
+                      className: "absolute -bottom-2 -right-2 text-primary animate-bounce"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col items-center gap-2", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Loader, { size: 20 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-xs font-medium tracking-wide uppercase", children: "Esperando Esc\xE1ner" })
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                "div",
+                {
+                  className: "absolute inset-0 pointer-events-none opacity-10",
+                  style: {
+                    backgroundImage: "radial-gradient(circle, currentColor 1px, transparent 1px)",
+                    backgroundSize: "20px 20px"
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "absolute top-4 right-4", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(QualityBadge, { quality: previewQuality }) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex-1 flex flex-col justify-between min-h-[320px]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-6", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("h4", { className: "text-sm font-bold text-foreground uppercase tracking-wider flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "w-2 h-2 rounded-full bg-primary animate-pulse" }),
+                "Estado del Dispositivo"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "p-4 rounded-md bg-secondary/50 border border-border/50 text-sm text-foreground/80 leading-relaxed", children: isWaiting ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { children: "El dispositivo est\xE1 inicializando. Por favor, prepare al usuario para la captura." }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("p", { className: "text-quality-good font-medium", children: "\xA1Imagen capturada! Analizando calidad biom\xE9trica..." }) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("h4", { className: "text-xs font-semibold text-foreground/60 uppercase tracking-wide", children: "Instrucciones" }),
+              /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("ul", { className: "text-sm text-foreground/70 space-y-2 list-disc list-inside marker:text-primary", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { children: "Coloque el dedo firmemente en el centro." }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { children: "Aplique presi\xF3n uniforme." }),
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("li", { children: "Mantenga la posici\xF3n hasta escuchar el tono." })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: "mt-auto pt-6", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
+            "button",
+            {
+              onClick: onCancel,
+              className: "\r\n                group w-full flex items-center justify-center gap-2 px-4 py-3.5\r\n                rounded-md font-semibold text-sm\r\n                bg-red-500/10 text-red-600 dark:text-red-400 \r\n                border border-red-500/20\r\n                hover:bg-red-500 hover:text-white hover:border-red-500\r\n                transition-all duration-200 shadow-sm\r\n              ",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+                  import_tb7.TbX,
+                  {
+                    size: 18,
+                    className: "transition-transform group-hover:rotate-90"
+                  }
+                ),
+                "Cancelar Captura"
+              ]
+            }
+          ) })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/components/enrollment/FingerEnrollModule.tsx
+var import_tb8 = require("react-icons/tb");
+
+// src/lib/constants/fingerPositions.ts
+var FINGER_NAMES = {
+  RIGHT_THUMB: "Pulgar Der.",
+  RIGHT_INDEX: "\xCDndice Der.",
+  RIGHT_MIDDLE: "Medio Der.",
+  RIGHT_RING: "Anular Der.",
+  RIGHT_LITTLE: "Me\xF1ique Der.",
+  LEFT_THUMB: "Pulgar Izq.",
+  LEFT_INDEX: "\xCDndice Izq.",
+  LEFT_MIDDLE: "Medio Izq.",
+  LEFT_RING: "Anular Izq.",
+  LEFT_LITTLE: "Me\xF1ique Izq."
+};
+var RIGHT_FINGERS = [
+  "RIGHT_THUMB",
+  "RIGHT_INDEX",
+  "RIGHT_MIDDLE",
+  "RIGHT_RING",
+  "RIGHT_LITTLE"
+];
+var LEFT_FINGERS = [
+  "LEFT_THUMB",
+  "LEFT_INDEX",
+  "LEFT_MIDDLE",
+  "LEFT_RING",
+  "LEFT_LITTLE"
+];
+
+// src/components/enrollment/FingerEnrollModule.tsx
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var CAPTURE_GROUPS_4_4_2 = [
+  { label: "Mano Derecha (4 dedos)", backendMode: "RightSlap4" },
+  { label: "Mano Izquierda (4 dedos)", backendMode: "LeftSlap4" },
+  { label: "Pulgares (2 dedos)", backendMode: "Thumbs2" }
+];
+var CAPTURE_GROUPS_2_2 = [
+  { label: "\xCDndice y Medio Der.", backendMode: "RightIndexMiddle" },
+  { label: "Anular y Me\xF1ique Der.", backendMode: "RightRingLittle" },
+  { label: "\xCDndice y Medio Izq.", backendMode: "LeftIndexMiddle" },
+  { label: "Anular y Me\xF1ique Izq.", backendMode: "LeftRingLittle" },
+  { label: "Ambos Pulgares", backendMode: "Thumbs2" }
+];
+var getFingersForMode = (backendMode) => {
+  switch (backendMode) {
+    case "RightSlap4":
+      return ["RIGHT_INDEX", "RIGHT_MIDDLE", "RIGHT_RING", "RIGHT_LITTLE"];
+    case "LeftSlap4":
+      return ["LEFT_INDEX", "LEFT_MIDDLE", "LEFT_RING", "LEFT_LITTLE"];
+    case "Thumbs2":
+      return ["RIGHT_THUMB", "LEFT_THUMB"];
+    case "RightIndexMiddle":
+      return ["RIGHT_INDEX", "RIGHT_MIDDLE"];
+    case "RightRingLittle":
+      return ["RIGHT_RING", "RIGHT_LITTLE"];
+    case "LeftIndexMiddle":
+      return ["LEFT_INDEX", "LEFT_MIDDLE"];
+    case "LeftRingLittle":
+      return ["LEFT_RING", "LEFT_LITTLE"];
+    default:
+      return [];
+  }
+};
+function FingerEnrollModule({ className = "" }) {
+  const {
+    addFingerprint,
+    addMissingFinger,
+    removeMissingFinger,
+    removeFingerprint,
+    fingerprints: storeFingerprints,
+    missingFingers: enrollmentMissingFingers
+  } = useEnrollmentStore();
+  const [fingerResults, setFingerResults] = (0, import_react5.useState)({});
+  const [selectedMode, setSelectedMode] = (0, import_react5.useState)(
+    "MODE_4_4_2" /* Mode4_4_2 */
+  );
+  const [isModalOpen, setIsModalOpen] = (0, import_react5.useState)(false);
+  const isModalOpenRef = (0, import_react5.useRef)(isModalOpen);
+  const [isProcessing, setIsProcessing] = (0, import_react5.useState)(false);
+  const [currentCaptureInfo, setCurrentCaptureInfo] = (0, import_react5.useState)(null);
+  const [previewImage, setPreviewImage] = (0, import_react5.useState)(null);
+  const [previewQuality, setPreviewQuality] = (0, import_react5.useState)(null);
+  const [fingerToMarkMissing, setFingerToMarkMissing] = (0, import_react5.useState)(
+    null
+  );
+  const {
+    isConnected,
+    sendMessage,
+    registerHandler,
+    unregisterHandler,
+    getExpectedFingers,
+    markFingerAsMissing,
+    restoreFinger,
+    missingFingers,
+    clearAllMissingFingers
+  } = useBiometricStore();
+  const addMessage = useUiStore((s) => s.addMessage);
+  (0, import_react5.useEffect)(() => {
+    const loaded = {};
+    Object.entries(storeFingerprints).forEach(([key, item]) => {
+      loaded[key] = {
+        Finger: key,
+        Quality: item.quality,
+        Image: item.image,
+        Error: null
+      };
+    });
+    setFingerResults((prev) => ({ ...prev, ...loaded }));
+  }, [storeFingerprints]);
+  const allMissingFingers = (0, import_react5.useMemo)(
+    () => ({ ...enrollmentMissingFingers, ...missingFingers }),
+    [enrollmentMissingFingers, missingFingers]
+  );
+  const capturedCount = (0, import_react5.useMemo)(() => {
+    const successCount = Object.values(fingerResults).filter(
+      (r) => r && r.Quality >= 40 && !r.Error
+    ).length;
+    const missingCount = Object.keys(allMissingFingers).length;
+    return successCount + missingCount;
+  }, [fingerResults, allMissingFingers]);
+  const isCapturing = isProcessing || isModalOpen;
+  const modeOptions = [
+    { value: "MODE_4_4_2" /* Mode4_4_2 */, label: "4\u20134\u20132 (Est\xE1ndar)", icon: "\u{1F44B}" },
+    { value: "MODE_2_2" /* Mode2_2 */, label: "2\u20132 (Pares)", icon: "\u270C\uFE0F" },
+    { value: "MODE_1_1" /* Mode1_1 */, label: "1\u20131 (Individual)", icon: "\u261D\uFE0F" }
+  ];
+  (0, import_react5.useEffect)(() => {
+    isModalOpenRef.current = isModalOpen;
+  }, [isModalOpen]);
+  (0, import_react5.useEffect)(() => {
+    const handlePreview = (data) => {
+      if (!isModalOpenRef.current) return;
+      setPreviewImage(data.biometricData?.capturedImage || null);
+      setPreviewQuality(data.biometricData?.quality || null);
+    };
+    const handleComplete = (data) => {
+      setIsModalOpen(false);
+      setIsProcessing(false);
+      setCurrentCaptureInfo(null);
+      setPreviewImage(null);
+      setPreviewQuality(null);
+      const segments = data.biometricData?.segments;
+      if (Array.isArray(segments)) {
+        const newRes = {};
+        for (const seg of segments) {
+          if (seg.finger) {
+            newRes[seg.finger] = {
+              Finger: seg.finger,
+              Quality: seg.quality,
+              Image: seg.image,
+              Error: null
+            };
+            addMessage(
+              `Huella ${FINGER_NAMES[seg.finger]} capturada (${seg.quality}).`
+            );
+          }
+        }
+        setFingerResults((prev) => ({ ...prev, ...newRes }));
+        import_react_hot_toast.toast.success("Captura completada");
+      }
+    };
+    const handleError = (data) => {
+      import_react_hot_toast.toast.error(data.error || data.messageType || "Error desconocido");
+      addMessage(`Error captura: ${data.error}`);
+      setIsModalOpen(false);
+      setIsProcessing(false);
+      setPreviewImage(null);
+      setPreviewQuality(null);
+    };
+    const handleEnrollment = (data) => {
+      setIsProcessing(false);
+      const wsqs = data.biometricData?.wsqFiles || {};
+      const count = Object.keys(wsqs).length;
+      Object.entries(wsqs).forEach(([pos, base64]) => {
+        const fingerInfo = fingerResults[pos];
+        const imageToSave = fingerInfo?.Image || base64;
+        const normalizedImage = normalizeImageForStorage(imageToSave);
+        addFingerprint(pos, normalizedImage, fingerInfo?.Quality || 100);
+      });
+      Object.entries(missingFingers).forEach(([pos, reason]) => {
+        addMissingFinger(pos, reason);
+      });
+      addMessage(`Procesamiento finalizado. ${count} huellas listas.`);
+      import_react_hot_toast.toast.success("Huellas planas guardadas");
+    };
+    registerHandler("FINGER_PREVIEW_FRAME", handlePreview);
+    registerHandler("FINGER_CAPTURE_COMPLETE", handleComplete);
+    registerHandler("ENROLLMENT_COMPLETE", handleEnrollment);
+    registerHandler("FINGER_QUALITY_LOW", handleError);
+    registerHandler("DUPLICATE_FINGER", handleError);
+    registerHandler("FINGER_ERROR", handleError);
+    registerHandler("ERROR_DEVICE_BUSY", handleError);
+    registerHandler("ERROR_DEVICE_NOT_FOUND", handleError);
+    registerHandler("ERROR_CAPTURE_FAILED", handleError);
+    registerHandler("ERROR", handleError);
+    return () => {
+      unregisterHandler("FINGER_PREVIEW_FRAME");
+      unregisterHandler("FINGER_CAPTURE_COMPLETE");
+      unregisterHandler("ENROLLMENT_COMPLETE");
+      unregisterHandler("FINGER_QUALITY_LOW");
+      unregisterHandler("DUPLICATE_FINGER");
+      unregisterHandler("FINGER_ERROR");
+      unregisterHandler("ERROR_DEVICE_BUSY");
+      unregisterHandler("ERROR_DEVICE_NOT_FOUND");
+      unregisterHandler("ERROR_CAPTURE_FAILED");
+      unregisterHandler("ERROR");
+    };
+  }, [
+    registerHandler,
+    unregisterHandler,
+    addMessage,
+    addFingerprint,
+    addMissingFinger,
+    missingFingers,
+    fingerResults
+  ]);
+  const startCapture = (mode, info) => {
+    if (!isConnected) {
+      import_react_hot_toast.toast.error("Servicio no conectado.");
+      return;
+    }
+    if (isProcessing) return;
+    let fingersAttempting = [];
+    if (info.type === "MODE_1_1" /* Mode1_1 */) {
+      fingersAttempting = [info.targetFinger];
+    } else {
+      fingersAttempting = getFingersForMode(mode);
+    }
+    const fingersWithoutEnrollmentMissing = fingersAttempting.filter(
+      (f) => !enrollmentMissingFingers[f]
+    );
+    const expectedFingers = getExpectedFingers(fingersWithoutEnrollmentMissing);
+    if (expectedFingers.length === 0) {
+      const msg = "Todos los dedos de este grupo est\xE1n marcados como omitidos/faltantes.";
+      import_react_hot_toast.toast.error(msg);
+      addMessage(msg);
+      return;
+    }
+    setIsProcessing(true);
+    setIsModalOpen(true);
+    setCurrentCaptureInfo(info);
+    setPreviewImage(null);
+    setPreviewQuality(null);
+    sendMessage({
+      messageType: "START_FINGER_CAPTURE",
+      biometricData: {
+        mode,
+        targetFinger: info?.targetFinger || null,
+        expectedFingers
+      }
+    });
+    addMessage(`Iniciando captura: ${mode}.`);
+  };
+  const cancelCapture = () => {
+    sendMessage({ messageType: "ABORT_FINGER_CAPTURE" });
+    setIsModalOpen(false);
+    setIsProcessing(false);
+    setPreviewImage(null);
+    setPreviewQuality(null);
+    addMessage("Captura cancelada.");
+  };
+  const processBatch = () => {
+    if (capturedCount < 10) {
+      const msg = `Faltan dedos por procesar (${capturedCount}/10).`;
+      import_react_hot_toast.toast.error(msg);
+      return;
+    }
+    setIsProcessing(true);
+    addMessage("Procesando huellas capturadas...");
+    sendMessage({ messageType: "FINALIZE_ENROLLMENT" });
+  };
+  const resetAll = () => {
+    setFingerResults({});
+    setIsProcessing(false);
+    clearAllMissingFingers();
+    addMessage("M\xF3dulo reiniciado.");
+  };
+  const handleConfirmMissing = (reason) => {
+    if (fingerToMarkMissing) {
+      markFingerAsMissing(fingerToMarkMissing, reason);
+      addMissingFinger(fingerToMarkMissing, reason);
+      setFingerResults((prev) => {
+        const next = { ...prev };
+        delete next[fingerToMarkMissing];
+        return next;
+      });
+      removeFingerprint(fingerToMarkMissing);
+      addMessage(`Dedo ${fingerToMarkMissing} marcado como: ${reason}`);
+      setFingerToMarkMissing(null);
+    }
+  };
+  const renderFingerGrid = (fingers) => fingers.map((f) => {
+    const res = fingerResults[f];
+    const missing = allMissingFingers[f] || null;
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      BiometricSlot,
+      {
+        position: f,
+        title: FINGER_NAMES[f].split(" ")[0],
+        status: res ? res.Error ? "error" : "captured" : "pending",
+        imageUrl: getImageSrcForDisplay(res?.Image, "png"),
+        quality: res?.Quality,
+        iconType: "finger",
+        missingReason: missing,
+        onCapture: () => startCapture("SingleFinger", {
+          type: "MODE_1_1" /* Mode1_1 */,
+          targetFinger: f,
+          label: FINGER_NAMES[f]
+        }),
+        onRequestMissing: () => setFingerToMarkMissing(f),
+        onRestore: () => {
+          removeMissingFinger(f);
+          if (missingFingers[f]) restoreFinger(f);
+        },
+        onDelete: () => {
+          removeFingerprint(f);
+          setFingerResults((prev) => {
+            const next = { ...prev };
+            delete next[f];
+            return next;
+          });
+        },
+        isDisabled: isCapturing || !isConnected
+      },
+      f
+    );
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "space-y-8 animate-in fade-in duration-500", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      ModuleHeader,
+      {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_tb8.TbFingerprint, { size: 24 }),
+        title: "Huellas Planas",
+        subtitle: "Capture las 10 huellas digitales (Slaps).",
+        progress: { current: capturedCount, total: 10 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            Button,
+            {
+              variant: "success",
+              size: "sm",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_tb8.TbSend, { size: 16 }),
+              onClick: processBatch,
+              disabled: !isConnected || isCapturing || capturedCount < 10,
+              isLoading: isProcessing,
+              children: "Guardar"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_tb8.TbReload, { size: 16 }),
+              onClick: resetAll,
+              disabled: isCapturing,
+              children: "Limpiar"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col lg:flex-row gap-4 items-stretch lg:items-center bg-secondary/30 p-4 rounded-md border border-white/5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex flex-col sm:flex-row items-start sm:items-center gap-3 flex-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { className: "text-xs font-bold uppercase tracking-wider text-foreground/50 min-w-max", children: "Modo:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "w-full sm:max-w-xs", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          Select,
+          {
+            options: modeOptions,
+            value: selectedMode,
+            onChange: (val) => setSelectedMode(val),
+            disabled: isCapturing
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "flex gap-3 w-full sm:w-auto flex-wrap", children: [
+        (selectedMode === "MODE_4_4_2" /* Mode4_4_2 */ ? CAPTURE_GROUPS_4_4_2 : selectedMode === "MODE_2_2" /* Mode2_2 */ ? CAPTURE_GROUPS_2_2 : []).map((g) => /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+          "button",
+          {
+            disabled: !isConnected || isCapturing,
+            onClick: () => startCapture(g.backendMode, {
+              type: selectedMode,
+              label: g.label
+            }),
+            className: "flex items-center gap-2 px-4 py-2.5 rounded-md bg-background border border-border/60 text-foreground/70 font-medium text-xs hover:border-primary hover:text-primary hover:bg-primary/5 active:scale-95 transition-all duration-200 disabled:opacity-50",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_tb8.TbHandClick, { size: 16 }),
+              " ",
+              g.label
+            ]
+          },
+          g.label
+        )),
+        selectedMode === "MODE_1_1" /* Mode1_1 */ && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "text-sm text-foreground/50 italic py-2", children: "Seleccione un dedo abajo para capturar individualmente." })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "grid grid-cols-1 xl:grid-cols-2 gap-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "glass p-6 rounded-sm border border-white/10 relative overflow-hidden group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_tb8.TbFingerprint, { size: 120 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-lg font-bold text-foreground mb-5 pl-3 border-l-4 border-primary", children: "Mano Derecha" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4", children: renderFingerGrid(RIGHT_FINGERS) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "glass p-6 rounded-sm border border-white/10 relative overflow-hidden group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_tb8.TbFingerprint, { size: 120 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("h3", { className: "text-lg font-bold text-foreground mb-5 pl-3 border-l-4 border-secondary-foreground/50", children: "Mano Izquierda" }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4", children: renderFingerGrid(LEFT_FINGERS) })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      FingerCaptureModal,
+      {
+        isOpen: isModalOpen,
+        onCancel: cancelCapture,
+        captureType: currentCaptureInfo?.label || "Captura de huella",
+        previewImage,
+        previewQuality
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      MissingFingerModal,
+      {
+        isOpen: !!fingerToMarkMissing,
+        onClose: () => setFingerToMarkMissing(null),
+        onConfirm: handleConfirmMissing,
+        positionName: fingerToMarkMissing ? FINGER_NAMES[fingerToMarkMissing] : ""
+      }
+    )
+  ] });
+}
+
+// src/components/enrollment/FaceEnrollModule.tsx
+var import_react7 = require("react");
+var import_react_hot_toast3 = require("react-hot-toast");
+
+// src/components/enrollment/FaceCameraModal.tsx
+var import_react6 = require("react");
+var import_react_hot_toast2 = require("react-hot-toast");
+var import_tb9 = require("react-icons/tb");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function FaceCameraModal({
+  isOpen,
+  onClose,
+  onCaptured
+}) {
+  const videoRef = (0, import_react6.useRef)(null);
+  const canvasRef = (0, import_react6.useRef)(null);
+  const [isCameraLoading, setIsCameraLoading] = (0, import_react6.useState)(true);
+  const [isValidating, setIsValidating] = (0, import_react6.useState)(false);
+  const [validationError, setValidationError] = (0, import_react6.useState)(null);
+  const [tempImage, setTempImage] = (0, import_react6.useState)(null);
+  const { sendMessage, registerHandler, unregisterHandler } = useBiometricStore();
+  const addMessage = useUiStore((s) => s.addMessage);
+  const startCamera = (0, import_react6.useCallback)(async () => {
+    setIsCameraLoading(true);
+    setValidationError(null);
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({
+        video: {
+          width: { ideal: 1920 },
+          height: { ideal: 1080 },
+          facingMode: "user"
+        }
+      });
+      if (videoRef.current) {
+        videoRef.current.srcObject = stream;
+        videoRef.current.onloadedmetadata = () => setIsCameraLoading(false);
+      }
+    } catch (err) {
+      const msg = "No se pudo acceder a la c\xE1mara. Verifique permisos.";
+      import_react_hot_toast2.toast.error(msg);
+      setValidationError(msg);
+      setIsCameraLoading(false);
+    }
+  }, []);
+  const stopCamera = (0, import_react6.useCallback)(() => {
+    if (videoRef.current?.srcObject) {
+      videoRef.current.srcObject.getTracks().forEach((t) => t.stop());
+      videoRef.current.srcObject = null;
+    }
+  }, []);
+  (0, import_react6.useEffect)(() => {
+    if (isOpen) {
+      const timer = setTimeout(() => {
+        startCamera();
+      }, 0);
+      return () => clearTimeout(timer);
+    } else {
+      stopCamera();
+    }
+    return () => stopCamera();
+  }, [isOpen, startCamera, stopCamera]);
+  const captureAndValidate = () => {
+    const video = videoRef.current;
+    const canvas = canvasRef.current;
+    if (!video || !canvas) return;
+    setValidationError(null);
+    canvas.width = video.videoWidth;
+    canvas.height = video.videoHeight;
+    const ctx = canvas.getContext("2d");
+    ctx?.drawImage(video, 0, 0);
+    const base64 = canvas.toDataURL("image/jpeg", 0.95).split(",")[1];
+    setTempImage(base64);
+    setIsValidating(true);
+    sendMessage({
+      messageType: "VALIDATE_FACE_IMAGE",
+      Payload: base64
+    });
+  };
+  (0, import_react6.useEffect)(() => {
+    const onValidationResult = (msg) => {
+      if (!isValidating) return;
+      setIsValidating(false);
+      const { isValid, message, qualityScore } = msg.payload;
+      if (isValid) {
+        import_react_hot_toast2.toast.success(`Foto aceptada (Calidad: ${qualityScore})`);
+        addMessage(`\u2705 Foto aceptada. Calidad: ${qualityScore}`);
+        setValidationError(null);
+        if (tempImage) onCaptured(tempImage, qualityScore || 0);
+      } else {
+        setValidationError(message || "La imagen no cumple los est\xE1ndares.");
+        addMessage(`\u274C Foto rechazada: ${message}`);
+        setTempImage(null);
+      }
+    };
+    registerHandler("FACE_VALIDATION_RESULT", onValidationResult);
+    return () => unregisterHandler("FACE_VALIDATION_RESULT");
+  }, [
+    isValidating,
+    tempImage,
+    onCaptured,
+    registerHandler,
+    unregisterHandler,
+    addMessage
+  ]);
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    Modal,
+    {
+      isOpen,
+      onClose,
+      title: "Captura de Rostro",
+      allowClose: !isValidating,
+      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex flex-col items-center w-full max-w-4xl mx-auto", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          "div",
+          {
+            className: `relative w-full aspect-video bg-black rounded-md overflow-hidden shadow-2xl border-2 transition-colors duration-300 ${validationError ? "border-red-500/50" : "border-white/10"}`,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                "video",
+                {
+                  ref: videoRef,
+                  autoPlay: true,
+                  playsInline: true,
+                  muted: true,
+                  className: `w-full h-full object-cover transform scale-x-[-1] ${isValidating ? "opacity-50 blur-sm" : ""}`
+                }
+              ),
+              (isCameraLoading || isValidating) && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute inset-0 flex flex-col items-center justify-center z-20 bg-black/40 backdrop-blur-sm", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+                Loader,
+                {
+                  text: isValidating ? "Validando..." : "Iniciando c\xE1mara...",
+                  size: 50
+                }
+              ) }),
+              !isCameraLoading && !isValidating && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "absolute inset-0 pointer-events-none opacity-60", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute inset-0 m-auto w-[30%] h-[50%] border-2 border-dashed border-white/70 rounded-[40%]" }),
+                /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-4 h-4 text-white/80", children: "+" })
+              ] })
+            ]
+          }
+        ),
+        validationError && /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "w-full mt-4 p-3 bg-red-500/10 border border-red-500/20 rounded-md flex items-center justify-center gap-3 animate-in fade-in slide-in-from-bottom-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "p-2 bg-red-500/20 rounded-full text-red-500", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_tb9.TbAlertTriangle, { size: 20 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: "text-red-500 font-medium text-sm text-center", children: validationError })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "w-full mt-6 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "button",
+          {
+            onClick: captureAndValidate,
+            disabled: isCameraLoading || isValidating,
+            className: `flex items-center gap-3 px-12 py-4 rounded-full font-bold text-lg shadow-xl transition-all ${isCameraLoading || isValidating ? "bg-secondary text-foreground/50 cursor-wait" : "bg-primary text-white hover:scale-105 active:scale-95 shadow-primary/25"}`,
+            children: isValidating ? "Analizando..." : /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_tb9.TbCamera, { size: 26 }),
+              " ",
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { children: "CAPTURAR" })
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("canvas", { ref: canvasRef, className: "hidden" })
+      ] })
+    }
+  );
+}
+
+// src/components/enrollment/FaceEnrollModule.tsx
+var import_tb10 = require("react-icons/tb");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var INITIAL_SLOTS = Array(5).fill(null);
+function FaceEnrollModule({ className = "" }) {
+  const {
+    faceCaptures,
+    setFaceCaptures,
+    removeFace,
+    addMissingFace,
+    removeMissingFace,
+    missingFaces
+  } = useEnrollmentStore();
+  const [slots, setSlots] = (0, import_react7.useState)(INITIAL_SLOTS);
+  const [faceToMarkMissing, setFaceToMarkMissing] = (0, import_react7.useState)(
+    null
+  );
+  const [finalTemplate, setFinalTemplate] = (0, import_react7.useState)(null);
+  const [isModalOpen, setIsModalOpen] = (0, import_react7.useState)(false);
+  const [activeSlot, setActiveSlot] = (0, import_react7.useState)(0);
+  const [isProcessing, setIsProcessing] = (0, import_react7.useState)(false);
+  const [jp2Images, setJp2Images] = (0, import_react7.useState)([]);
+  const { isConnected, sendMessage, registerHandler, unregisterHandler } = useBiometricStore();
+  const addMessage = useUiStore((s) => s.addMessage);
+  (0, import_react7.useEffect)(() => {
+    if (faceCaptures && faceCaptures.length > 0) {
+      const newSlots = [...faceCaptures];
+      while (newSlots.length < 5) newSlots.push(null);
+      setSlots(newSlots);
+    }
+  }, [faceCaptures]);
+  (0, import_react7.useEffect)(() => {
+    const onComplete = (msg) => {
+      setIsProcessing(false);
+      const tmpl = msg.biometricData?.finalTemplate;
+      const jp2List = msg.biometricData?.jp2Base64Images || [];
+      setFinalTemplate(tmpl);
+      setJp2Images(jp2List);
+      const formattedFaces = jp2List.map((img) => ({
+        image: normalizeImageForStorage(img),
+        quality: 100
+      }));
+      setFaceCaptures(formattedFaces);
+      addMessage("Plantilla facial generada exitosamente.");
+      import_react_hot_toast3.toast.success("Enrolamiento facial completado");
+    };
+    const onError = (msg) => {
+      setIsProcessing(false);
+      const err = msg.error || "Error de validaci\xF3n";
+      import_react_hot_toast3.toast.error(err, { duration: 5e3 });
+      addMessage("Error: " + err);
+    };
+    registerHandler("FACE_ENROLLMENT_COMPLETE", onComplete);
+    registerHandler("ERROR", onError);
+    return () => {
+      unregisterHandler("FACE_ENROLLMENT_COMPLETE");
+      unregisterHandler("ERROR");
+    };
+  }, [registerHandler, unregisterHandler, addMessage, setFaceCaptures]);
+  const capturedCount = (0, import_react7.useMemo)(() => {
+    const captured = slots.filter((s) => s !== null).length;
+    const missing = Object.keys(missingFaces).length;
+    return captured + missing;
+  }, [slots, missingFaces]);
+  const openSlot = (idx) => {
+    if (!isConnected) return import_react_hot_toast3.toast.error("Sistema desconectado.");
+    setActiveSlot(idx);
+    setIsModalOpen(true);
+  };
+  const handleCaptured = (img, quality) => {
+    const next = [...slots];
+    next[activeSlot] = {
+      image: normalizeImageForStorage(img),
+      quality
+    };
+    setSlots(next);
+    setFaceCaptures(next);
+    setIsModalOpen(false);
+  };
+  const handleDeleteFace = (index) => {
+    const next = [...slots];
+    next[index] = null;
+    setSlots(next);
+    removeFace(index);
+    import_react_hot_toast3.toast.success(`\xC1ngulo ${index + 1} eliminado`);
+  };
+  const handleConfirmMissingFace = (reason) => {
+    if (faceToMarkMissing !== null) {
+      const next = [...slots];
+      next[faceToMarkMissing] = null;
+      setSlots(next);
+      removeFace(faceToMarkMissing);
+      addMissingFace(faceToMarkMissing, reason);
+      setFaceToMarkMissing(null);
+    }
+  };
+  const finalize = () => {
+    const validSlots = slots.filter((s) => s !== null);
+    const missingCount = Object.keys(missingFaces).length;
+    const totalAccountedFor = validSlots.length + missingCount;
+    const imgs = validSlots.map((s) => s.image);
+    if (totalAccountedFor < 5) {
+      return import_react_hot_toast3.toast.error(
+        `Se requieren 5 \xE1ngulos (${validSlots.length} capturados, ${missingCount} omitidos).`
+      );
+    }
+    if (imgs.length === 0) {
+      return import_react_hot_toast3.toast.error("Capture al menos un \xE1ngulo facial.");
+    }
+    setIsProcessing(true);
+    sendMessage({
+      messageType: "FINALIZE_FACE_ENROLLMENT",
+      biometricData: { faceImages: imgs }
+    });
+  };
+  const downloadPackage = () => {
+    if (jp2Images.length === 0)
+      return import_react_hot_toast3.toast.error("No hay datos para descargar");
+    const payload = { faceIsoImages: jp2Images, template: finalTemplate };
+    const blob = new Blob([JSON.stringify(payload, null, 2)], {
+      type: "application/json"
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = `FACE_ENROLL_${(/* @__PURE__ */ new Date()).getTime()}.json`;
+    a.click();
+  };
+  const resetAll = () => {
+    setSlots(INITIAL_SLOTS);
+    setFinalTemplate(null);
+    setFaceCaptures(Array(5).fill(null));
+    setJp2Images([]);
+    setIsProcessing(false);
+  };
+  const isBusy = isProcessing || isModalOpen;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "space-y-8 animate-in fade-in duration-500", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+      ModuleHeader,
+      {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tb10.TbFaceId, { size: 24 }),
+        title: "Enrolamiento Facial",
+        subtitle: "Capture 5 \xE1ngulos de alta definici\xF3n para el registro facial.",
+        progress: { current: capturedCount, total: 5 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            Button,
+            {
+              variant: "success",
+              size: "sm",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tb10.TbSend, { size: 16 }),
+              onClick: finalize,
+              disabled: !isConnected || isBusy || capturedCount < 5,
+              isLoading: isProcessing,
+              children: "Guardar"
+            }
+          ),
+          finalTemplate && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            Button,
+            {
+              variant: "secondary",
+              size: "sm",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tb10.TbDownload, { size: 16 }),
+              onClick: downloadPackage,
+              children: "Exportar"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tb10.TbReload, { size: 16 }),
+              onClick: resetAll,
+              disabled: isBusy,
+              children: "Limpiar"
+            }
+          )
+        ]
+      }
+    ),
+    finalTemplate && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "glass p-8 rounded-sm text-center w-full relative overflow-hidden border border-green-500/20", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "absolute inset-0 bg-gradient-to-b from-quality-good/10 to-transparent pointer-events-none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tb10.TbFaceId, { className: "mx-auto text-green-500 mb-4", size: 40 }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h3", { className: "text-xl font-bold text-foreground mb-2", children: "Biometr\xEDa Generada Correctamente" }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex justify-center gap-3 mt-6", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          Button,
+          {
+            variant: "success",
+            size: "md",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tb10.TbDownload, { size: 18 }),
+            onClick: downloadPackage,
+            children: "Exportar JSON"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          Button,
+          {
+            variant: "ghost",
+            size: "md",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_tb10.TbReload, { size: 18 }),
+            onClick: resetAll,
+            children: "Nuevo Tr\xE1mite"
+          }
+        )
+      ] })
+    ] }),
+    !finalTemplate && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "grid grid-cols-2 md:grid-cols-5 gap-4", children: slots.map((s, i) => {
+      const isMissing = !!missingFaces[i];
+      return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        BiometricSlot,
+        {
+          title: `\xC1ngulo ${i + 1}`,
+          position: `${i + 1}`,
+          status: isMissing ? "pending" : s ? "captured" : "pending",
+          imageUrl: s ? getImageSrcForDisplay(s.image, "jpeg") : null,
+          quality: s?.quality,
+          iconType: "face",
+          onCapture: () => openSlot(i),
+          onDelete: () => handleDeleteFace(i),
+          onRequestMissing: () => setFaceToMarkMissing(i),
+          onRestore: () => removeMissingFace(i),
+          missingReason: missingFaces[i] || null,
+          isDisabled: !isConnected || isBusy
+        },
+        i
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      MissingBiometricModal,
+      {
+        isOpen: faceToMarkMissing !== null,
+        onClose: () => setFaceToMarkMissing(null),
+        onConfirm: handleConfirmMissingFace,
+        positionName: faceToMarkMissing !== null ? `\xC1ngulo ${faceToMarkMissing + 1}` : "",
+        biometricType: "face"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      FaceCameraModal,
+      {
+        isOpen: isModalOpen,
+        onClose: () => setIsModalOpen(false),
+        onCaptured: handleCaptured
+      }
+    )
+  ] });
+}
+
+// src/components/enrollment/PalmEnrollModule.tsx
+var import_react8 = require("react");
+var import_react_hot_toast4 = require("react-hot-toast");
+
+// src/components/enrollment/PalmCaptureModal.tsx
+var import_tb11 = require("react-icons/tb");
+var import_framer_motion5 = require("framer-motion");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function PalmCaptureModal({
+  isOpen,
+  onCancel,
+  onRetry,
+  captureType,
+  previewImage,
+  statusMessage,
+  errorState
+}) {
+  const isWaiting = !previewImage && !errorState;
+  let statusStyles = "bg-primary/10 border-primary/20 text-primary";
+  let statusIcon = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Loader, { size: 18, className: "animate-spin" });
+  if (errorState) {
+    statusStyles = "bg-red-500/10 border-red-500/20 text-red-600 dark:text-red-400";
+    statusIcon = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_tb11.TbAlertTriangle, { size: 20 });
+  } else if (statusMessage.toLowerCase().includes("\xE9xito") || statusMessage.toLowerCase().includes("capturada")) {
+    statusStyles = "bg-green-500/10 border-green-500/20 text-green-600 dark:text-green-400";
+    statusIcon = /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_tb11.TbCheck, { size: 20 });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    Modal,
+    {
+      isOpen,
+      onClose: onCancel,
+      title: captureType,
+      allowClose: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col md:flex-row gap-8 items-stretch p-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex-1 flex justify-center bg-card/50 rounded-md p-4 border border-border/50 shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+          "div",
+          {
+            className: "\r\n              relative w-full max-w-[320px] aspect-[4/5]\r\n              rounded-md overflow-hidden\r\n              bg-zinc-950 border border-white/10\r\n              shadow-inner flex items-center justify-center\r\n            ",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                "div",
+                {
+                  className: "absolute inset-0 pointer-events-none opacity-20",
+                  style: {
+                    backgroundImage: "linear-gradient(0deg, transparent 24%, #444 25%, #444 26%, transparent 27%, transparent 74%, #444 75%, #444 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, #444 25%, #444 26%, transparent 27%, transparent 74%, #444 75%, #444 76%, transparent 77%, transparent)",
+                    backgroundSize: "40px 40px"
+                  }
+                }
+              ),
+              isWaiting && /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                import_framer_motion5.motion.div,
+                {
+                  className: "absolute inset-x-0 h-[2px] bg-primary z-10 shadow-[0_0_15px_2px_rgba(var(--primary),0.8)]",
+                  animate: { top: ["0%", "100%", "0%"] },
+                  transition: { duration: 4, repeat: Infinity, ease: "linear" }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "relative z-1 w-full h-full flex items-center justify-center p-4", children: previewImage ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                "img",
+                {
+                  src: previewImage,
+                  alt: "Vista previa",
+                  className: "object-contain w-full h-full"
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex flex-col items-center justify-center text-white/20 gap-4", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "relative", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_tb11.TbHandStop, { size: 90, className: "opacity-60" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+                    import_tb11.TbScan,
+                    {
+                      size: 30,
+                      className: "absolute -bottom-2 -right-2 text-primary animate-pulse"
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-[10px] font-bold tracking-[0.25em] uppercase opacity-60 text-center", children: "Esperando Esc\xE1ner" })
+              ] }) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "flex-1 flex flex-col justify-between gap-6 min-h-[340px]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "space-y-6", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("h4", { className: "text-xs font-bold text-muted-foreground uppercase tracking-wider", children: "Estado del Dispositivo" }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+                "div",
+                {
+                  className: `
+                    p-4 rounded-md border flex items-start gap-3 shadow-sm
+                    transition-colors duration-200 ${statusStyles}
+                `,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "mt-0.5 shrink-0", children: statusIcon }),
+                    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("p", { className: "text-sm font-medium leading-snug", children: statusMessage })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("div", { className: "space-y-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("h4", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_tb11.TbScan, { className: "text-primary" }),
+                " Instrucciones"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "bg-secondary/30 border border-border rounded-md p-4", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("ul", { className: "text-sm text-foreground/80 space-y-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("li", { className: "flex gap-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-primary mt-2 shrink-0" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "Retire anillos y accesorios de la mano." })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("li", { className: "flex gap-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-primary mt-2 shrink-0" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "Mantenga la palma plana contra la superficie." })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("li", { className: "flex gap-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "w-1.5 h-1.5 rounded-full bg-primary mt-2 shrink-0" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: "Junte los dedos firmemente." })
+                ] })
+              ] }) })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "flex gap-3 pt-4 border-t border-border", children: errorState ? /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_jsx_runtime15.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+              "button",
+              {
+                onClick: onCancel,
+                className: "flex-1 px-4 py-3 rounded-md font-medium text-sm border border-border hover:bg-secondary transition-colors",
+                children: "Cancelar"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+              "button",
+              {
+                onClick: onRetry,
+                className: "flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-md font-medium text-sm bg-primary text-primary-foreground hover:bg-primary/90 transition-all shadow-lg shadow-primary/20",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_tb11.TbReload, { size: 18 }),
+                  " Reintentar"
+                ]
+              }
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+            "button",
+            {
+              onClick: onCancel,
+              className: "\r\n                  w-full flex items-center justify-center gap-2 px-4 py-3\r\n                  rounded-md font-semibold text-sm\r\n                  bg-secondary hover:bg-red-500/10 \r\n                  text-foreground hover:text-red-600\r\n                  border border-transparent hover:border-red-500/20\r\n                  transition-all duration-200\r\n                ",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_tb11.TbX, { size: 18 }),
+                "Cancelar Captura"
+              ]
+            }
+          ) })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/components/enrollment/PalmEnrollModule.tsx
+var import_tb12 = require("react-icons/tb");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var PALM_NAMES = {
+  UPPERPALMLEFT: "Superior Izq.",
+  LOWERPALMLEFT: "Inferior Izq.",
+  WRITERSPALMLEFT: "Escritor Izq.",
+  UPPERPALMRIGHT: "Superior Der.",
+  LOWERPALMRIGHT: "Inferior Der.",
+  WRITERSPALMRIGHT: "Escritor Der."
+};
+var LEFT_PALMS = ["UPPERPALMLEFT", "LOWERPALMLEFT", "WRITERSPALMLEFT"];
+var RIGHT_PALMS = ["UPPERPALMRIGHT", "LOWERPALMRIGHT", "WRITERSPALMRIGHT"];
+function PalmEnrollModule({ className = "" }) {
+  const {
+    addPalm,
+    removePalm,
+    addMissingPalm,
+    removeMissingPalm,
+    missingPalms,
+    palms: storePalms
+  } = useEnrollmentStore();
+  const [palmResults, setPalmResults] = (0, import_react8.useState)({});
+  const [finalTemplate, setFinalTemplate] = (0, import_react8.useState)(null);
+  const [palmWsqs, setPalmWsqs] = (0, import_react8.useState)({});
+  const [isModalOpen, setIsModalOpen] = (0, import_react8.useState)(false);
+  const isModalOpenRef = (0, import_react8.useRef)(isModalOpen);
+  const [isProcessing, setIsProcessing] = (0, import_react8.useState)(false);
+  const [currentPalm, setCurrentPalm] = (0, import_react8.useState)(null);
+  const [previewImage, setPreviewImage] = (0, import_react8.useState)(null);
+  const [modalStatus, setModalStatus] = (0, import_react8.useState)("Esperando...");
+  const [modalError, setModalError] = (0, import_react8.useState)(false);
+  const [pendingPalm, setPendingPalm] = (0, import_react8.useState)(null);
+  const [showReplaceConfirm, setShowReplaceConfirm] = (0, import_react8.useState)(false);
+  const [palmToMarkMissing, setPalmToMarkMissing] = (0, import_react8.useState)(
+    null
+  );
+  const { isConnected, sendMessage, registerHandler, unregisterHandler } = useBiometricStore();
+  const addMessage = useUiStore((s) => s.addMessage);
+  (0, import_react8.useEffect)(() => {
+    const loaded = {};
+    Object.entries(storePalms).forEach(([key, item]) => {
+      loaded[key] = {
+        finger: key,
+        quality: item.quality,
+        image: item.image,
+        isCaptured: true,
+        error: null
+      };
+    });
+    setPalmResults((prev) => ({ ...prev, ...loaded }));
+  }, [storePalms]);
+  const capturedCount = (0, import_react8.useMemo)(() => {
+    const captured = Object.values(palmResults).filter(
+      (p) => p?.isCaptured
+    ).length;
+    const missing = Object.keys(missingPalms).length;
+    return captured + missing;
+  }, [palmResults, missingPalms]);
+  const isCapturing = isProcessing || isModalOpen;
+  (0, import_react8.useEffect)(() => {
+    isModalOpenRef.current = isModalOpen;
+  }, [isModalOpen]);
+  (0, import_react8.useEffect)(() => {
+    const onPreview = (d) => {
+      if (!isModalOpenRef.current) return;
+      setPreviewImage(d.payload);
+    };
+    const onStatus = (d) => {
+      if (!isModalOpenRef.current) return;
+      setModalStatus(d.payload.message);
+    };
+    const onComplete = (d) => {
+      const seg = d.biometricData?.segments?.[0];
+      if (seg && seg.finger === currentPalm) {
+        setPalmResults((prev) => ({
+          ...prev,
+          [seg.finger]: { ...seg, isCaptured: true }
+        }));
+      }
+      import_react_hot_toast4.toast.success("Palma capturada");
+      setIsProcessing(false);
+      setTimeout(() => setIsModalOpen(false), 500);
+    };
+    const onError = (d) => {
+      const msg = d.error || "Error durante la captura";
+      import_react_hot_toast4.toast.error(msg);
+      setModalError(true);
+      setModalStatus(msg);
+      setIsProcessing(false);
+    };
+    const onTemplate = (d) => {
+      const tmpl = d.biometricData?.finalTemplate || "";
+      const wsqFiles = d.biometricData?.wsqFiles || {};
+      setPalmWsqs(wsqFiles);
+      setFinalTemplate(tmpl);
+      Object.entries(wsqFiles).forEach(([pos, base64]) => {
+        const cached = palmResults[pos];
+        const imageToSave = cached?.image || base64;
+        addPalm(pos, imageToSave, cached?.quality || 100);
+      });
+      addMessage("Plantilla de palmas generada exitosamente.");
+      import_react_hot_toast4.toast.success("Plantilla generada");
+    };
+    registerHandler("PALM_PREVIEW_FRAME", onPreview);
+    registerHandler("PALM_CAPTURE_STATUS", onStatus);
+    registerHandler("PALM_CAPTURE_COMPLETE", onComplete);
+    registerHandler("PALM_TEMPLATE_GENERATED", onTemplate);
+    registerHandler("PALM_ERROR", onError);
+    registerHandler("ERROR", onError);
+    return () => {
+      unregisterHandler("PALM_PREVIEW_FRAME");
+      unregisterHandler("PALM_CAPTURE_STATUS");
+      unregisterHandler("PALM_CAPTURE_COMPLETE");
+      unregisterHandler("PALM_TEMPLATE_GENERATED");
+      unregisterHandler("PALM_ERROR");
+      unregisterHandler("ERROR");
+    };
+  }, [
+    currentPalm,
+    registerHandler,
+    unregisterHandler,
+    addMessage,
+    addPalm,
+    palmResults
+  ]);
+  const openCapture = (pos) => {
+    setPreviewImage(null);
+    setModalError(false);
+    setModalStatus("Iniciando esc\xE1ner...");
+    setCurrentPalm(pos);
+    setIsModalOpen(true);
+    setIsProcessing(true);
+    sendMessage({
+      messageType: "START_PALM_CAPTURE",
+      biometricData: { targetFinger: pos }
+    });
+  };
+  const startCapture = (pos) => {
+    if (!isConnected || isCapturing) return;
+    if (palmResults[pos]?.isCaptured) {
+      setPendingPalm(pos);
+      setShowReplaceConfirm(true);
+      return;
+    }
+    openCapture(pos);
+  };
+  const retryCapture = () => {
+    if (!currentPalm) return;
+    openCapture(currentPalm);
+  };
+  const cancelCapture = () => {
+    sendMessage({ messageType: "ABORT_PALM_CAPTURE" });
+    setIsModalOpen(false);
+    setIsProcessing(false);
+    setModalError(false);
+    setPreviewImage(null);
+    setCurrentPalm(null);
+  };
+  const handleDeletePalm = (pos) => {
+    setPalmResults((prev) => {
+      const next = { ...prev };
+      delete next[pos];
+      return next;
+    });
+    removePalm(pos);
+    import_react_hot_toast4.toast.success(`Palma ${PALM_NAMES[pos]} eliminada`);
+  };
+  const handleConfirmMissingPalm = (reason) => {
+    if (palmToMarkMissing) {
+      setPalmResults((prev) => {
+        const next = { ...prev };
+        delete next[palmToMarkMissing];
+        return next;
+      });
+      removePalm(palmToMarkMissing);
+      addMissingPalm(palmToMarkMissing, reason);
+      setPalmToMarkMissing(null);
+    }
+  };
+  const finalize = () => {
+    if (capturedCount === 0)
+      return import_react_hot_toast4.toast.error("Capture al menos una palma.");
+    setIsProcessing(true);
+    sendMessage({ messageType: "FINALIZE_PALM_ENROLLMENT" });
+  };
+  const resetState = () => {
+    setPalmResults({});
+    setFinalTemplate(null);
+    setIsProcessing(false);
+  };
+  const downloadTemplate = () => {
+    if (!finalTemplate) return;
+    const payload = {
+      template: finalTemplate,
+      wsqImages: palmWsqs
+    };
+    const blob = new Blob([JSON.stringify(payload, null, 2)], {
+      type: "application/json"
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "paquete_palmas_abis.json";
+    a.click();
+    URL.revokeObjectURL(url);
+  };
+  const renderPalmGrid = (palms) => palms.map((pos) => {
+    const r = palmResults[pos];
+    const isMissing = !!missingPalms[pos];
+    const status = isMissing ? "pending" : r ? r.error ? "error" : "captured" : "pending";
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      BiometricSlot,
+      {
+        position: pos,
+        title: PALM_NAMES[pos],
+        status,
+        imageUrl: getImageSrcForDisplay(r?.image, "png"),
+        quality: r?.quality,
+        iconType: "palm",
+        onCapture: () => startCapture(pos),
+        onDelete: () => handleDeletePalm(pos),
+        onRequestMissing: () => setPalmToMarkMissing(pos),
+        onRestore: () => removeMissingPalm(pos),
+        missingReason: missingPalms[pos] || null,
+        isDisabled: !isConnected || isCapturing
+      },
+      pos
+    );
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "space-y-8 animate-in fade-in duration-500", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      ModuleHeader,
+      {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_tb12.TbHandStop, { size: 24 }),
+        title: "Enrolamiento de Palmas",
+        subtitle: "Capture las palmas superiores, inferiores y de escritor de ambas manos.",
+        progress: { current: capturedCount, total: 6 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            Button,
+            {
+              variant: "success",
+              size: "sm",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_tb12.TbSend, { size: 16 }),
+              onClick: finalize,
+              disabled: !isConnected || isCapturing || capturedCount === 0,
+              isLoading: isProcessing,
+              children: "Guardar"
+            }
+          ),
+          finalTemplate && /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            Button,
+            {
+              variant: "secondary",
+              size: "sm",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_tb12.TbDownload, { size: 16 }),
+              onClick: downloadTemplate,
+              children: "Exportar"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_tb12.TbReload, { size: 16 }),
+              onClick: resetState,
+              disabled: isCapturing,
+              children: "Limpiar"
+            }
+          )
+        ]
+      }
+    ),
+    finalTemplate && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "glass p-8 rounded-sm text-center w-full relative overflow-hidden border border-green-500/20", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute inset-0 bg-gradient-to-b from-quality-good/10 to-transparent pointer-events-none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("p", { className: "text-foreground/60 mb-6 text-base", children: "Paquete ABIS generado exitosamente" }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex flex-col sm:flex-row justify-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          Button,
+          {
+            variant: "success",
+            size: "md",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_tb12.TbDownload, { size: 18 }),
+            onClick: downloadTemplate,
+            children: "Descargar Paquete ABIS"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+          Button,
+          {
+            variant: "ghost",
+            size: "md",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_tb12.TbReload, { size: 18 }),
+            onClick: resetState,
+            children: "Nuevo Tr\xE1mite"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "grid grid-cols-1 xl:grid-cols-2 gap-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "glass p-6 rounded-sm border border-white/10 relative overflow-hidden group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_tb12.TbHandStop, { size: 120 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "text-lg font-bold text-foreground mb-5 pl-3 border-l-4 border-primary", children: "Mano Derecha" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-4", children: renderPalmGrid(RIGHT_PALMS) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "glass p-6 rounded-sm border border-white/10 relative overflow-hidden group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_tb12.TbHandStop, { size: 120, className: "-scale-x-100" }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("h3", { className: "text-lg font-bold text-foreground mb-5 pl-3 border-l-4 border-secondary-foreground/50", children: "Mano Izquierda" }),
+        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "grid grid-cols-1 sm:grid-cols-3 gap-4", children: renderPalmGrid(LEFT_PALMS) })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      PalmCaptureModal,
+      {
+        isOpen: isModalOpen,
+        onCancel: cancelCapture,
+        onRetry: retryCapture,
+        previewImage,
+        statusMessage: modalStatus,
+        errorState: modalError,
+        captureType: currentPalm ? PALM_NAMES[currentPalm] : "Captura de Palma"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      Modal,
+      {
+        isOpen: showReplaceConfirm,
+        onClose: () => setShowReplaceConfirm(false),
+        title: "\xBFReemplazar Captura?",
+        children: /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "text-center p-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("p", { className: "text-foreground/80 mb-6 text-sm leading-relaxed", children: [
+            "Ya existe una captura guardada para",
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "font-bold text-foreground", children: pendingPalm && PALM_NAMES[pendingPalm] }),
+            ". \xBFDesea capturar nuevamente y sobrescribir la anterior?"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex gap-3 justify-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              Button,
+              {
+                variant: "secondary",
+                size: "md",
+                onClick: () => setShowReplaceConfirm(false),
+                children: "Cancelar"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              Button,
+              {
+                variant: "primary",
+                size: "md",
+                onClick: () => {
+                  if (!pendingPalm) return;
+                  setShowReplaceConfirm(false);
+                  openCapture(pendingPalm);
+                },
+                children: "Confirmar Reemplazo"
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      MissingBiometricModal,
+      {
+        isOpen: !!palmToMarkMissing,
+        onClose: () => setPalmToMarkMissing(null),
+        onConfirm: handleConfirmMissingPalm,
+        positionName: palmToMarkMissing ? PALM_NAMES[palmToMarkMissing] : "",
+        biometricType: "palm"
+      }
+    )
+  ] });
+}
+
+// src/components/enrollment/IrisEnrollModule.tsx
+var import_react10 = require("react");
+var import_react_hot_toast5 = require("react-hot-toast");
+
+// src/components/enrollment/IrisCameraModal.tsx
+var import_react9 = require("react");
+var import_tb13 = require("react-icons/tb");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function IrisCameraModal({
+  isOpen,
+  onClose,
+  onStartCapture,
+  onAbortCapture,
+  isCapturing,
+  statusMessage,
+  previewRight,
+  previewLeft,
+  distance,
+  cameraStatus
+}) {
+  const imgRef = (0, import_react9.useRef)(null);
+  const lastBlobUrl = (0, import_react9.useRef)(null);
+  (0, import_react9.useEffect)(() => {
+    const base64 = previewRight || previewLeft;
+    if (imgRef.current && base64) {
+      try {
+        const byteString = atob(base64.split(",")[1]);
+        const arrayBuffer = new ArrayBuffer(byteString.length);
+        const intArray = new Uint8Array(arrayBuffer);
+        for (let i = 0; i < byteString.length; i++) {
+          intArray[i] = byteString.charCodeAt(i);
+        }
+        const blob = new Blob([intArray], { type: "image/bmp" });
+        const url = URL.createObjectURL(blob);
+        imgRef.current.src = url;
+        if (lastBlobUrl.current) URL.revokeObjectURL(lastBlobUrl.current);
+        lastBlobUrl.current = url;
+      } catch (e) {
+        console.warn("\u26A0\uFE0F Error cargando frame BMP:", e);
+      }
+    }
+  }, [previewRight, previewLeft]);
+  (0, import_react9.useEffect)(() => {
+    if (!isOpen && lastBlobUrl.current) {
+      URL.revokeObjectURL(lastBlobUrl.current);
+      lastBlobUrl.current = null;
+    }
+  }, [isOpen]);
+  let statusColor = "text-foreground/70";
+  let statusBg = "bg-secondary/50 border-border";
+  if (statusMessage.toLowerCase().includes("error")) {
+    statusColor = "text-red-500";
+    statusBg = "bg-red-500/10 border-red-500/20";
+  } else if (statusMessage.toLowerCase().includes("lista") || statusMessage.toLowerCase().includes("completado")) {
+    statusColor = "text-green-500";
+    statusBg = "bg-green-500/10 border-green-500/20";
+  }
+  const isDistanceOptimal = distance !== null && distance >= 100 && distance <= 120;
+  const distanceColor = isDistanceOptimal ? "text-green-500" : "text-yellow-500";
+  const hasPreview = !!(previewRight || previewLeft);
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    Modal,
+    {
+      isOpen,
+      onClose,
+      title: "Captura de Iris",
+      allowClose: !isCapturing,
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex flex-col md:flex-row gap-6 items-stretch", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "flex-1 flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "relative w-full max-w-[340px] aspect-[4/3] rounded-md p-1 bg-muted/20 border border-border shadow-sm", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "w-full h-full rounded-md overflow-hidden bg-zinc-950 relative flex items-center justify-center border border-white/5 shadow-inner group", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "div",
+            {
+              className: "absolute inset-0 opacity-20 pointer-events-none",
+              style: {
+                backgroundImage: "linear-gradient(#333 1px, transparent 1px), linear-gradient(90deg, #333 1px, transparent 1px)",
+                backgroundSize: "20px 20px"
+              }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+            "img",
+            {
+              ref: imgRef,
+              alt: "Vista previa",
+              className: `
+                    relative z-10 object-contain w-full h-full transition-opacity duration-200
+                    ${hasPreview ? "opacity-100" : "opacity-0"}
+                  `
+            }
+          ),
+          !hasPreview && /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "absolute inset-0 flex flex-col items-center justify-center text-white/20 gap-4 z-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_tb13.TbEye, { size: 80, className: "opacity-50" }),
+              isCapturing && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "absolute inset-0 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Loader, { size: 30 }) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("p", { className: "text-[10px] font-bold tracking-[0.2em] uppercase opacity-60", children: isCapturing ? "Iniciando Sensor..." : "C\xE1mara en espera" })
+          ] })
+        ] }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex-1 flex flex-col justify-between gap-6 min-h-[320px] py-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "space-y-5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "bg-card border border-border rounded-md p-3 flex flex-col gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "text-[10px] uppercase font-bold text-muted-foreground flex items-center gap-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_tb13.TbRuler, {}),
+                  " Distancia"
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+                  "span",
+                  {
+                    className: `text-lg font-mono font-bold ${distanceColor}`,
+                    children: [
+                      distance ?? "--",
+                      " ",
+                      /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "text-xs text-muted-foreground", children: "mm" })
+                    ]
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "bg-card border border-border rounded-md p-3 flex flex-col gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "text-[10px] uppercase font-bold text-muted-foreground flex items-center gap-1", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_tb13.TbActivity, {}),
+                  " Estado"
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                  "span",
+                  {
+                    className: "text-sm font-medium truncate",
+                    title: cameraStatus,
+                    children: cameraStatus
+                  }
+                )
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "div",
+              {
+                className: `p-4 rounded-md border ${statusBg} transition-colors duration-300`,
+                children: /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex items-start gap-3", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    import_tb13.TbScan,
+                    {
+                      className: `mt-0.5 shrink-0 ${statusColor}`,
+                      size: 18
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                    "p",
+                    {
+                      className: `text-sm font-medium leading-snug ${statusColor}`,
+                      children: statusMessage
+                    }
+                  )
+                ] })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "space-y-3 pt-4 border-t border-border", children: !isCapturing ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+              "button",
+              {
+                onClick: onClose,
+                className: "flex-1 flex items-center justify-center gap-2 px-4 py-3 rounded-md font-semibold text-sm border border-border hover:bg-secondary transition-colors",
+                children: "Cerrar"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+              "button",
+              {
+                onClick: onStartCapture,
+                className: "flex-[2] flex items-center justify-center gap-2 px-4 py-3 rounded-md font-semibold text-sm bg-primary text-white hover:bg-primary/90 shadow-lg shadow-primary/20 transition-all",
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_tb13.TbPlayerPlay, { size: 18 }),
+                  " Iniciar Captura"
+                ]
+              }
+            )
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+            "button",
+            {
+              onClick: onAbortCapture,
+              className: "w-full flex items-center justify-center gap-2 px-4 py-3 rounded-md font-semibold text-sm bg-red-500/10 text-red-600 border border-red-500/20 hover:bg-red-500 hover:text-white transition-all",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_tb13.TbPlayerStop, { size: 18 }),
+                " Detener / Cancelar"
+              ]
+            }
+          ) })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/components/enrollment/IrisEnrollModule.tsx
+var import_tb14 = require("react-icons/tb");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var IRIS_NAMES = {
+  right: "Ojo Derecho",
+  left: "Ojo Izquierdo"
+};
+function IrisEnrollModule({ className = "" }) {
+  const {
+    setIrises,
+    removeIris,
+    addMissingIris,
+    removeMissingIris,
+    missingIrises,
+    irises: storeIrises
+  } = useEnrollmentStore();
+  const [finalTemplate, setFinalTemplate] = (0, import_react10.useState)(null);
+  const [finalQuality, setFinalQuality] = (0, import_react10.useState)(null);
+  const [jp2IrisImages, setJp2IrisImages] = (0, import_react10.useState)([]);
+  const [rightIrisImage, setRightIrisImage] = (0, import_react10.useState)(null);
+  const [leftIrisImage, setLeftIrisImage] = (0, import_react10.useState)(null);
+  const [irisQualities, setIrisQualities] = (0, import_react10.useState)({
+    right: null,
+    left: null
+  });
+  const [irisMode, setIrisMode] = (0, import_react10.useState)("both");
+  const [isModalOpen, setIsModalOpen] = (0, import_react10.useState)(false);
+  const isModalOpenRef = (0, import_react10.useRef)(isModalOpen);
+  const [isCapturing, setIsCapturing] = (0, import_react10.useState)(false);
+  const [modalStatus, setModalStatus] = (0, import_react10.useState)("Esperando...");
+  const [previewRight, setPreviewRight] = (0, import_react10.useState)(null);
+  const [previewLeft, setPreviewLeft] = (0, import_react10.useState)(null);
+  const [distance, setDistance] = (0, import_react10.useState)(null);
+  const [cameraStatus, setCameraStatus] = (0, import_react10.useState)("Desconocido");
+  const [showReplaceConfirm, setShowReplaceConfirm] = (0, import_react10.useState)(false);
+  const [irisToMarkMissing, setIrisToMarkMissing] = (0, import_react10.useState)(
+    null
+  );
+  const { isConnected, sendMessage, registerHandler, unregisterHandler } = useBiometricStore();
+  const addMessage = useUiStore((s) => s.addMessage);
+  (0, import_react10.useEffect)(() => {
+    if (storeIrises.right && !rightIrisImage) {
+      const srcRight = getImageSrcForDisplay(storeIrises.right.image) || null;
+      setRightIrisImage(srcRight);
+      setIrisQualities((prev) => ({
+        ...prev,
+        right: storeIrises.right.quality
+      }));
+    }
+    if (storeIrises.left && !leftIrisImage) {
+      const srcLeft = getImageSrcForDisplay(storeIrises.left.image) || null;
+      setLeftIrisImage(srcLeft);
+      setIrisQualities((prev) => ({
+        ...prev,
+        left: storeIrises.left.quality
+      }));
+    }
+  }, [storeIrises]);
+  const capturedCount = (0, import_react10.useMemo)(() => {
+    let count = 0;
+    if (rightIrisImage) count++;
+    if (leftIrisImage) count++;
+    count += Object.keys(missingIrises).length;
+    return count;
+  }, [rightIrisImage, leftIrisImage, missingIrises]);
+  const modeOptions = [
+    { value: "both", label: "Ambos Ojos (Dual)", icon: "\u{1F440}" },
+    { value: "right", label: "Solo Derecho", icon: "\u{1F441}" },
+    { value: "left", label: "Solo Izquierdo", icon: "\u{1F441}" }
+  ];
+  const parseCameraStatus = (code) => {
+    switch (Number(code)) {
+      case 2:
+        return "C\xE1mara lista";
+      case 4:
+        return "Capturando";
+      case 5:
+        return "Completado";
+      default:
+        return "Estado desconocido";
+    }
+  };
+  (0, import_react10.useEffect)(() => {
+    isModalOpenRef.current = isModalOpen;
+  }, [isModalOpen]);
+  (0, import_react10.useEffect)(() => {
+    const handlePreviewFrame = (msg) => {
+      if (!isModalOpenRef.current) return;
+      const { irisRightBase64, irisLeftBase64 } = msg.biometricData || {};
+      if (irisRightBase64)
+        setPreviewRight(getImageSrcForDisplay(irisRightBase64) || null);
+      if (irisLeftBase64)
+        setPreviewLeft(getImageSrcForDisplay(irisLeftBase64) || null);
+    };
+    const handleComplete = (msg) => {
+      const d = msg.biometricData || {};
+      if (d.irisRightBase64)
+        setRightIrisImage(getImageSrcForDisplay(d.irisRightBase64) || null);
+      if (d.irisLeftBase64)
+        setLeftIrisImage(getImageSrcForDisplay(d.irisLeftBase64) || null);
+      setFinalTemplate(d.finalTemplate || null);
+      setFinalQuality(d.quality || null);
+      const jp2List = {
+        right: d.irisRightBase64 || null,
+        left: d.irisLeftBase64 || null
+      };
+      setJp2IrisImages(jp2List);
+      const rightData = d.irisRightBase64 ? {
+        image: normalizeImageForStorage(d.irisRightBase64),
+        quality: d.irisRightQuality || 100
+      } : void 0;
+      const leftData = d.irisLeftBase64 ? {
+        image: normalizeImageForStorage(d.irisLeftBase64),
+        quality: d.irisLeftQuality || 100
+      } : void 0;
+      setIrises(rightData, leftData);
+      setIrisQualities({
+        right: d.irisRightQuality || null,
+        left: d.irisLeftQuality || null
+      });
+      setIsCapturing(false);
+      setIsModalOpen(false);
+      setPreviewRight(null);
+      setPreviewLeft(null);
+      import_react_hot_toast5.toast.success("Plantilla de iris generada");
+    };
+    const handleStatusUpdate = (msg) => {
+      if (!isModalOpenRef.current) return;
+      const d = msg.biometricData || {};
+      if (d.distance !== void 0) setDistance(d.distance);
+      if (d.status !== void 0) {
+        const st = parseCameraStatus(d.status);
+        setCameraStatus(st);
+        setModalStatus("Captura en proceso...");
+      }
+    };
+    const handleError = (msg) => {
+      const err = msg.error || "Error desconocido";
+      import_react_hot_toast5.toast.error(err);
+      setIsCapturing(false);
+      setModalStatus("Error: " + err);
+    };
+    registerHandler("IRIS_PREVIEW_FRAME", handlePreviewFrame);
+    registerHandler("IRIS_ENROLLMENT_COMPLETE", handleComplete);
+    registerHandler("IRIS_STATUS_UPDATE", handleStatusUpdate);
+    registerHandler("IRIS_ERROR", handleError);
+    return () => {
+      unregisterHandler("IRIS_PREVIEW_FRAME");
+      unregisterHandler("IRIS_ENROLLMENT_COMPLETE");
+      unregisterHandler("IRIS_STATUS_UPDATE");
+      unregisterHandler("IRIS_ERROR");
+    };
+  }, [registerHandler, unregisterHandler, setIrises]);
+  const startCapture = () => {
+    if (!isConnected) return import_react_hot_toast5.toast.error("Servicio no conectado.");
+    setFinalTemplate(null);
+    setFinalQuality(null);
+    setRightIrisImage(null);
+    setLeftIrisImage(null);
+    setIrisQualities({ right: null, left: null });
+    setPreviewRight(null);
+    setPreviewLeft(null);
+    setIsModalOpen(true);
+    setModalStatus("Listo para iniciar");
+    setDistance(0);
+    sendMessage({
+      messageType: "START_IRIS_PREVIEW",
+      biometricData: { mode: irisMode }
+    });
+  };
+  const openModal = () => {
+    const hasExistingData = irisMode === "both" && (rightIrisImage || leftIrisImage) || irisMode === "right" && rightIrisImage || irisMode === "left" && leftIrisImage;
+    if (hasExistingData) {
+      setShowReplaceConfirm(true);
+    } else {
+      startCapture();
+    }
+  };
+  const handleStartCapture = () => {
+    setIsCapturing(true);
+    setModalStatus("Capturando... Mantenga la mirada fija.");
+    sendMessage({
+      messageType: "START_IRIS_CAPTURE",
+      biometricData: { mode: irisMode }
+    });
+  };
+  const handleAbortCapture = () => {
+    setIsCapturing(false);
+    setModalStatus("Cancelado por el usuario.");
+    sendMessage({ messageType: "ABORT_IRIS_CAPTURE" });
+  };
+  const closeModal = () => {
+    if (isCapturing) handleAbortCapture();
+    setIsModalOpen(false);
+  };
+  const downloadTemplate = () => {
+    if (!finalTemplate) return;
+    const payload = {
+      template: finalTemplate,
+      irisIsoImages: jp2IrisImages
+    };
+    const blob = new Blob([JSON.stringify(payload, null, 2)], {
+      type: "application/json"
+    });
+    const url = URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url;
+    a.download = "paquete_iris_abis.json";
+    a.click();
+    URL.revokeObjectURL(url);
+    addMessage("Paquete de iris descargado correctamente.");
+  };
+  const resetState = () => {
+    setFinalTemplate(null);
+    setFinalQuality(null);
+    setRightIrisImage(null);
+    setLeftIrisImage(null);
+    setIrisQualities({ right: null, left: null });
+  };
+  const handleDeleteIris = (side) => {
+    if (side === "right") {
+      setRightIrisImage(null);
+      setIrisQualities((prev) => ({ ...prev, right: null }));
+    } else {
+      setLeftIrisImage(null);
+      setIrisQualities((prev) => ({ ...prev, left: null }));
+    }
+    removeIris(side);
+    import_react_hot_toast5.toast.success(`Iris ${IRIS_NAMES[side]} eliminado`);
+  };
+  const handleConfirmMissingIris = (reason) => {
+    if (irisToMarkMissing) {
+      const side = irisToMarkMissing;
+      handleDeleteIris(side);
+      addMissingIris(irisToMarkMissing, reason);
+      setIrisToMarkMissing(null);
+    }
+  };
+  const isBusy = isCapturing || isModalOpen;
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "space-y-8 animate-in fade-in duration-500", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      ModuleHeader,
+      {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_tb14.TbEye, { size: 24 }),
+        title: "Enrolamiento de Iris",
+        subtitle: "Utilice el esc\xE1ner binocular para capturar el patr\xF3n del iris.",
+        progress: { current: capturedCount, total: 2 },
+        children: [
+          finalTemplate && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            Button,
+            {
+              variant: "secondary",
+              size: "sm",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_tb14.TbDownload, { size: 16 }),
+              onClick: downloadTemplate,
+              children: "Exportar"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_tb14.TbReload, { size: 16 }),
+              onClick: resetState,
+              disabled: isBusy,
+              children: "Limpiar"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col sm:flex-row gap-4 items-end bg-secondary/30 p-4 rounded-md border border-white/5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex-1 w-full sm:w-auto", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("label", { className: "text-xs font-bold text-foreground/50 uppercase tracking-wider mb-2 block", children: "Modo de Captura" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "w-full sm:max-w-xs", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          Select,
+          {
+            options: modeOptions,
+            value: irisMode,
+            onChange: setIrisMode,
+            disabled: isBusy || !isConnected
+          }
+        ) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        Button,
+        {
+          variant: "success",
+          size: "md",
+          icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_tb14.TbScanEye, { size: 20 }),
+          onClick: openModal,
+          disabled: !isConnected || isBusy,
+          children: "Iniciar Esc\xE1ner"
+        }
+      )
+    ] }),
+    finalTemplate && /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "glass p-8 rounded-sm text-center w-full relative overflow-hidden border border-green-500/20", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "absolute inset-0 bg-gradient-to-b from-quality-good/10 to-transparent pointer-events-none" }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-foreground/60 mb-6 text-base", children: "Paquete ABIS generado correctamente." }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex flex-col sm:flex-row justify-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          Button,
+          {
+            variant: "success",
+            size: "md",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_tb14.TbDownload, { size: 18 }),
+            onClick: downloadTemplate,
+            children: "Descargar Paquete ABIS"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+          Button,
+          {
+            variant: "ghost",
+            size: "md",
+            icon: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_tb14.TbReload, { size: 18 }),
+            onClick: resetState,
+            children: "Nuevo Tr\xE1mite"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8", children: ["right", "left"].map((side) => {
+      const image = side === "right" ? rightIrisImage : leftIrisImage;
+      const quality = irisQualities[side];
+      const missing = missingIrises[side] || null;
+      return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        BiometricSlot,
+        {
+          position: side,
+          title: IRIS_NAMES[side],
+          status: image ? "captured" : "pending",
+          imageUrl: image,
+          quality,
+          iconType: "iris",
+          missingReason: missing,
+          onCapture: openModal,
+          onDelete: () => handleDeleteIris(side),
+          onRequestMissing: () => setIrisToMarkMissing(side),
+          onRestore: () => removeMissingIris(side),
+          isDisabled: !isConnected || isBusy,
+          className: "min-h-[260px]"
+        },
+        side
+      );
+    }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      IrisCameraModal,
+      {
+        isOpen: isModalOpen,
+        onClose: closeModal,
+        onStartCapture: handleStartCapture,
+        onAbortCapture: handleAbortCapture,
+        isCapturing,
+        statusMessage: modalStatus,
+        previewRight,
+        previewLeft,
+        distance,
+        cameraStatus
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      MissingBiometricModal,
+      {
+        isOpen: !!irisToMarkMissing,
+        onClose: () => setIrisToMarkMissing(null),
+        onConfirm: handleConfirmMissingIris,
+        positionName: irisToMarkMissing ? IRIS_NAMES[irisToMarkMissing] : "",
+        biometricType: "iris"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      Modal,
+      {
+        isOpen: showReplaceConfirm,
+        onClose: () => setShowReplaceConfirm(false),
+        title: "\xBFReemplazar Captura?",
+        children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "text-center p-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("p", { className: "text-foreground/80 mb-6 text-sm leading-relaxed", children: "Ya existe una captura de iris para este modo. \xBFDesea capturar nuevamente y sobrescribir la anterior?" }),
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "flex gap-3 justify-center", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              Button,
+              {
+                variant: "secondary",
+                size: "md",
+                onClick: () => setShowReplaceConfirm(false),
+                children: "Cancelar"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+              Button,
+              {
+                variant: "primary",
+                size: "md",
+                onClick: () => {
+                  setShowReplaceConfirm(false);
+                  startCapture();
+                },
+                children: "Confirmar Reemplazo"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+}
+
+// src/components/enrollment/FingerRollEnrollModule.tsx
+var import_react11 = require("react");
+var import_react_hot_toast6 = require("react-hot-toast");
+
+// src/components/enrollment/FingerRollCaptureModal.tsx
+var import_tb15 = require("react-icons/tb");
+var import_framer_motion6 = require("framer-motion");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function FingerRollCaptureModal({
+  isOpen,
+  onCancel,
+  captureType,
+  previewImage,
+  previewQuality,
+  rollStatus
+}) {
+  let statusStyles = "bg-secondary/50 border-border/50 text-foreground/80";
+  let statusIcon = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Loader, { size: 18, className: "text-foreground/50 animate-spin" });
+  const statusLower = rollStatus.toLowerCase();
+  if (statusLower.includes("rolar") || statusLower.includes("detectado") || statusLower.includes("coloque")) {
+    statusStyles = "bg-primary/10 border-primary/20 text-primary";
+    statusIcon = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_tb15.TbRotateClockwise, { size: 20, className: "animate-pulse" });
+  } else if (statusLower.includes("completo") || statusLower.includes("\xE9xito") || statusLower.includes("ok")) {
+    statusStyles = "bg-quality-good/10 border-quality-good/20 text-quality-good";
+    statusIcon = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_tb15.TbCheck, { size: 20 });
+  } else if (statusLower.includes("error") || statusLower.includes("falla") || statusLower.includes("mala")) {
+    statusStyles = "bg-quality-bad/10 border-quality-bad/20 text-quality-bad";
+    statusIcon = /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_tb15.TbX, { size: 20 });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    Modal,
+    {
+      isOpen,
+      onClose: onCancel,
+      title: captureType,
+      allowClose: true,
+      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col md:flex-row gap-8 items-stretch p-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "flex-1 flex justify-center bg-card/50 rounded-md p-4 border border-white/5", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          "div",
+          {
+            className: "\r\n              relative w-full max-w-[280px] aspect-[3/4]\r\n              rounded-md overflow-hidden\r\n              bg-black/5 dark:bg-white/5\r\n              border border-border/50 dark:border-white/10\r\n              shadow-inner flex items-center justify-center\r\n            ",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                import_framer_motion6.motion.div,
+                {
+                  className: "absolute inset-y-0 w-[2px] bg-primary/80 z-10 shadow-[0_0_20px_2px_rgba(var(--primary),0.6)]",
+                  animate: { left: ["5%", "95%", "5%"] },
+                  transition: { duration: 4, repeat: Infinity, ease: "easeInOut" }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                "div",
+                {
+                  className: "absolute inset-0 pointer-events-none opacity-[0.08] z-0",
+                  style: {
+                    backgroundImage: "linear-gradient(0deg, transparent 24%, currentColor 25%, currentColor 26%, transparent 27%, transparent 74%, currentColor 75%, currentColor 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, currentColor 25%, currentColor 26%, transparent 27%, transparent 74%, currentColor 75%, currentColor 76%, transparent 77%, transparent)",
+                    backgroundSize: "20px 20px",
+                    color: "currentColor"
+                  }
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "relative z-1 w-full h-full flex items-center justify-center", children: previewImage ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                import_framer_motion6.motion.img,
+                {
+                  initial: { opacity: 0, scale: 0.95 },
+                  animate: { opacity: 1, scale: 1 },
+                  src: previewImage,
+                  alt: "Huella rolada",
+                  className: "object-contain w-full h-full p-4 rotate-180 drop-shadow-lg"
+                }
+              ) : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex flex-col items-center justify-center text-foreground/30 gap-3", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "relative", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_tb15.TbFingerprint, { size: 70, className: "opacity-80" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                    import_framer_motion6.motion.div,
+                    {
+                      className: "absolute -right-2 -bottom-2 text-primary",
+                      animate: { rotate: 360 },
+                      transition: {
+                        duration: 8,
+                        repeat: Infinity,
+                        ease: "linear"
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_tb15.TbRotateClockwise, { size: 28 })
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-[10px] font-bold tracking-widest uppercase opacity-70", children: "Esperando inicio" })
+              ] }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "absolute top-3 right-3 z-20", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(QualityBadge, { quality: previewQuality }) })
+            ]
+          }
+        ) }),
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex-1 flex flex-col justify-between gap-6 min-h-[300px]", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-4", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("h4", { className: "text-xs font-bold text-foreground/50 uppercase tracking-wider mb-2", children: "Estado del Proceso" }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+                "div",
+                {
+                  className: `
+                    p-4 rounded-md border flex items-start gap-3 shadow-sm
+                    transition-all duration-300 ${statusStyles}
+                `,
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "mt-0.5 shrink-0", children: statusIcon }),
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "text-sm font-medium leading-snug", children: rollStatus })
+                  ]
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "space-y-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("h4", { className: "text-xs font-semibold text-foreground/60 uppercase tracking-wide flex items-center gap-1", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_tb15.TbScan, { className: "mb-0.5" }),
+                " Gu\xEDa de Rolado"
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "bg-card border border-border/60 rounded-md p-3 space-y-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex gap-3 items-center text-sm text-foreground/70", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "w-6 h-6 rounded-full bg-secondary flex items-center justify-center text-xs font-bold shrink-0", children: "1" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "leading-tight", children: [
+                    "Apoye el ",
+                    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("strong", { children: "borde lateral" }),
+                    " de la u\xF1a."
+                  ] })
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "h-px w-8 bg-border mx-auto" }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex gap-3 items-center text-sm text-foreground/70", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "w-6 h-6 rounded-full bg-secondary flex items-center justify-center text-xs font-bold shrink-0", children: "2" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "leading-tight", children: "Gire suavemente hacia el lado opuesto." })
+                ] })
+              ] })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "pt-4 border-t border-border/40", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+            "button",
+            {
+              onClick: onCancel,
+              className: "\r\n                group w-full flex items-center justify-center gap-2 px-4 py-3.5\r\n                rounded-md font-semibold text-sm\r\n                bg-red-500/10 text-red-600 dark:text-red-400 \r\n                border border-red-500/20\r\n                hover:bg-red-500 hover:text-white hover:border-red-500\r\n                transition-all duration-200 shadow-sm\r\n              ",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_tb15.TbX, { size: 18 }),
+                "Abortar Captura"
+              ]
+            }
+          ) })
+        ] })
+      ] })
+    }
+  );
+}
+
+// src/components/enrollment/FingerRollEnrollModule.tsx
+var import_tb16 = require("react-icons/tb");
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function FingerRollEnrollModule({ className = "" }) {
+  const {
+    addRolledFingerprint,
+    addMissingFinger,
+    removeMissingFinger,
+    removeRolledFingerprint,
+    rolledFingerprints: storeRolled,
+    missingFingers: enrollmentMissingFingers
+  } = useEnrollmentStore();
+  const [fingerResults, setFingerResults] = (0, import_react11.useState)({});
+  const [isModalOpen, setIsModalOpen] = (0, import_react11.useState)(false);
+  const isModalOpenRef = (0, import_react11.useRef)(isModalOpen);
+  const [isProcessing, setIsProcessing] = (0, import_react11.useState)(false);
+  const [currentFinger, setCurrentFinger] = (0, import_react11.useState)(null);
+  const [previewImage, setPreviewImage] = (0, import_react11.useState)(null);
+  const [previewQuality, setPreviewQuality] = (0, import_react11.useState)(null);
+  const [rollStatus, setRollStatus] = (0, import_react11.useState)("Coloque el dedo...");
+  const [fingerToMarkMissing, setFingerToMarkMissing] = (0, import_react11.useState)(
+    null
+  );
+  const {
+    isConnected,
+    sendMessage,
+    registerHandler,
+    unregisterHandler,
+    missingFingers,
+    markFingerAsMissing,
+    restoreFinger,
+    clearAllMissingFingers
+  } = useBiometricStore();
+  const addMessage = useUiStore((s) => s.addMessage);
+  (0, import_react11.useEffect)(() => {
+    const loaded = {};
+    Object.entries(storeRolled).forEach(([key, item]) => {
+      loaded[key] = {
+        Finger: key,
+        Quality: item.quality,
+        Image: item.image,
+        Error: null
+      };
+    });
+    setFingerResults((prev) => ({ ...prev, ...loaded }));
+  }, [storeRolled]);
+  const allMissingFingers = (0, import_react11.useMemo)(
+    () => ({ ...enrollmentMissingFingers, ...missingFingers }),
+    [enrollmentMissingFingers, missingFingers]
+  );
+  const capturedCount = (0, import_react11.useMemo)(() => {
+    const success = Object.values(fingerResults).filter(
+      (r) => r && r.Quality >= 40
+    ).length;
+    const missing = Object.keys(allMissingFingers).length;
+    return success + missing;
+  }, [fingerResults, allMissingFingers]);
+  const isCapturing = isProcessing || isModalOpen;
+  (0, import_react11.useEffect)(() => {
+    isModalOpenRef.current = isModalOpen;
+  }, [isModalOpen]);
+  (0, import_react11.useEffect)(() => {
+    const handlePreview = (d) => {
+      if (!isModalOpenRef.current) return;
+      setPreviewImage(d.biometricData?.capturedImage || null);
+      setPreviewQuality(d.biometricData?.quality || null);
+    };
+    const handleRollStart = (d) => {
+      setRollStatus(d.payload || "Dedo detectado. Comience a rolar...");
+    };
+    const handleRollComplete = (d) => {
+      setRollStatus(d.payload || "Rolado completo. Procesando...");
+    };
+    const handleCaptureComplete = (d) => {
+      setIsProcessing(false);
+      setIsModalOpen(false);
+      const seg = d.biometricData?.segments?.[0];
+      if (!seg || seg.finger !== currentFinger) {
+        import_react_hot_toast6.toast.error("No se recibi\xF3 el segmento esperado.");
+        return;
+      }
+      setFingerResults((prev) => ({
+        ...prev,
+        [seg.finger]: {
+          Finger: seg.finger,
+          Quality: seg.quality,
+          Image: seg.image,
+          Error: null
+        }
+      }));
+      if (seg.image) {
+        addRolledFingerprint(seg.finger, seg.image, seg.quality || 100);
+      }
+      import_react_hot_toast6.toast.success(`Huella rolada capturada (${seg.quality}%)`);
+      setCurrentFinger(null);
+      setPreviewImage(null);
+      setPreviewQuality(null);
+      setRollStatus("Coloque el dedo...");
+    };
+    const handleError = (d) => {
+      const msg = d.error || d.messageType || "Error desconocido";
+      import_react_hot_toast6.toast.error(msg);
+      setIsModalOpen(false);
+      setIsProcessing(false);
+      setCurrentFinger(null);
+      setPreviewImage(null);
+      setPreviewQuality(null);
+    };
+    const handleEnrollmentComplete = (d) => {
+      const wsqs = d.biometricData?.wsqFiles;
+      if (wsqs) {
+        Object.entries(wsqs).forEach(([pos, base64]) => {
+          const localResult = fingerResults[pos];
+          const imageToStore = localResult?.Image || base64;
+          const quality = localResult?.Quality || 100;
+          addRolledFingerprint(pos, imageToStore, quality);
+        });
+        addMessage("Huellas roladas guardadas en memoria.");
+      }
+      import_react_hot_toast6.toast.success("Procesamiento finalizado");
+      setIsProcessing(false);
+    };
+    registerHandler("FINGER_PREVIEW_FRAME", handlePreview);
+    registerHandler("FINGER_ROLL_START_SIGNAL", handleRollStart);
+    registerHandler("FINGER_ROLL_COMPLETE_SIGNAL", handleRollComplete);
+    registerHandler("FINGER_CAPTURE_COMPLETE", handleCaptureComplete);
+    registerHandler("ENROLLMENT_COMPLETE", handleEnrollmentComplete);
+    registerHandler("ERROR", handleError);
+    registerHandler("FINGER_ERROR", handleError);
+    registerHandler("DUPLICATE_FINGER", handleError);
+    registerHandler("FINGER_QUALITY_LOW", handleError);
+    return () => {
+      unregisterHandler("FINGER_PREVIEW_FRAME");
+      unregisterHandler("FINGER_ROLL_START_SIGNAL");
+      unregisterHandler("FINGER_ROLL_COMPLETE_SIGNAL");
+      unregisterHandler("FINGER_CAPTURE_COMPLETE");
+      unregisterHandler("ENROLLMENT_COMPLETE");
+      unregisterHandler("ERROR");
+      unregisterHandler("FINGER_ERROR");
+      unregisterHandler("DUPLICATE_FINGER");
+      unregisterHandler("FINGER_QUALITY_LOW");
+    };
+  }, [
+    registerHandler,
+    unregisterHandler,
+    currentFinger,
+    addMessage,
+    addRolledFingerprint,
+    fingerResults
+  ]);
+  const startRollCapture = (finger) => {
+    if (!isConnected) return import_react_hot_toast6.toast.error("Servicio no conectado.");
+    if (allMissingFingers[finger]) {
+      import_react_hot_toast6.toast.error(`El dedo ${FINGER_NAMES[finger]} est\xE1 marcado como omitido.`);
+      return;
+    }
+    setIsProcessing(true);
+    setIsModalOpen(true);
+    setCurrentFinger(finger);
+    setPreviewImage(null);
+    setPreviewQuality(null);
+    setRollStatus(`Coloque ${FINGER_NAMES[finger]}...`);
+    addMessage(`Iniciando captura rolada: ${FINGER_NAMES[finger]}`);
+    sendMessage({
+      messageType: "START_FINGER_ROLL_CAPTURE",
+      biometricData: {
+        targetFinger: finger,
+        expectedFingers: [finger]
+      }
+    });
+  };
+  const cancelCapture = () => {
+    sendMessage({ messageType: "ABORT_FINGER_ROLL_CAPTURE" });
+    setIsModalOpen(false);
+    setIsProcessing(false);
+    setCurrentFinger(null);
+    setPreviewImage(null);
+    setPreviewQuality(null);
+  };
+  const processBatch = () => {
+    if (capturedCount < 10) {
+      import_react_hot_toast6.toast.error(`Faltan huellas por procesar (${capturedCount}/10).`);
+      return;
+    }
+    setIsProcessing(true);
+    sendMessage({ messageType: "FINALIZE_ENROLLMENT" });
+  };
+  const resetState = () => {
+    setFingerResults({});
+    setIsProcessing(false);
+    clearAllMissingFingers();
+    addMessage("M\xF3dulo reiniciado.");
+  };
+  const handleConfirmMissing = (reason) => {
+    if (fingerToMarkMissing) {
+      markFingerAsMissing(fingerToMarkMissing, reason);
+      addMissingFinger(fingerToMarkMissing, reason);
+      setFingerResults((prev) => {
+        const next = { ...prev };
+        delete next[fingerToMarkMissing];
+        return next;
+      });
+      removeRolledFingerprint(fingerToMarkMissing);
+      addMessage(`Dedo ${fingerToMarkMissing} marcado como: ${reason}`);
+      setFingerToMarkMissing(null);
+    }
+  };
+  const renderFingerGrid = (fingers) => fingers.map((finger) => {
+    const res = fingerResults[finger];
+    const missing = allMissingFingers[finger] || null;
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      BiometricSlot,
+      {
+        position: finger,
+        title: FINGER_NAMES[finger].split(" ")[0],
+        status: res ? res.Error ? "error" : "captured" : "pending",
+        iconType: "finger",
+        imageUrl: getImageSrcForDisplay(res?.Image, "png"),
+        quality: res?.Quality,
+        missingReason: missing,
+        onCapture: () => startRollCapture(finger),
+        onRequestMissing: () => setFingerToMarkMissing(finger),
+        onRestore: () => {
+          removeMissingFinger(finger);
+          if (missingFingers[finger]) restoreFinger(finger);
+        },
+        onDelete: () => {
+          removeRolledFingerprint(finger);
+          setFingerResults((prev) => {
+            const next = { ...prev };
+            delete next[finger];
+            return next;
+          });
+        },
+        isDisabled: !isConnected || isCapturing
+      },
+      finger
+    );
+  });
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "space-y-8 animate-in fade-in duration-500", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      ModuleHeader,
+      {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tb16.TbFingerprint, { size: 24 }),
+        title: "Huellas Roladas",
+        subtitle: "Capture las huellas rodando el dedo de un lado a otro.",
+        progress: { current: capturedCount, total: 10 },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            Button,
+            {
+              variant: "success",
+              size: "sm",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tb16.TbSend, { size: 16 }),
+              onClick: processBatch,
+              disabled: !isConnected || isCapturing || capturedCount < 10,
+              isLoading: isProcessing,
+              children: "Guardar"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+            Button,
+            {
+              variant: "ghost",
+              size: "sm",
+              icon: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tb16.TbReload, { size: 16 }),
+              onClick: resetState,
+              disabled: isCapturing,
+              children: "Limpiar"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "grid grid-cols-1 xl:grid-cols-2 gap-8", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "glass p-6 rounded-sm border border-white/10 relative overflow-hidden group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tb16.TbFingerprint, { size: 120 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "text-lg font-bold text-foreground mb-5 pl-3 border-l-4 border-primary", children: "Mano Derecha" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4", children: renderFingerGrid(RIGHT_FINGERS) })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "glass p-6 rounded-sm border border-white/10 relative overflow-hidden group", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "absolute top-0 right-0 p-4 opacity-5 group-hover:opacity-10 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_tb16.TbFingerprint, { size: 120 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("h3", { className: "text-lg font-bold text-foreground mb-5 pl-3 border-l-4 border-secondary-foreground/50", children: "Mano Izquierda" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-4", children: renderFingerGrid(LEFT_FINGERS) })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      FingerRollCaptureModal,
+      {
+        isOpen: isModalOpen,
+        onCancel: cancelCapture,
+        captureType: currentFinger ? `${FINGER_NAMES[currentFinger]} (Rolado)` : "Captura Rolada",
+        previewImage,
+        previewQuality,
+        rollStatus
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+      MissingFingerModal,
+      {
+        isOpen: !!fingerToMarkMissing,
+        onClose: () => setFingerToMarkMissing(null),
+        onConfirm: handleConfirmMissing,
+        positionName: fingerToMarkMissing ? FINGER_NAMES[fingerToMarkMissing] : ""
+      }
+    )
+  ] });
+}
+
+// src/components/ui/Card.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function Card({
+  variant = "default",
+  padding = "md",
+  rounded = "3xl",
+  className = "",
+  children
+}) {
+  const variantClasses = {
+    subtle: "bg-card/50 elevation-1 hover:elevation-2 hover:-translate-y-1",
+    default: "bg-card/60 elevation-2 hover:elevation-3 hover:-translate-y-1",
+    medium: "bg-card/70 elevation-3 hover:elevation-4 hover:-translate-y-1",
+    strong: "bg-card/80 elevation-4",
+    modal: "bg-card/90 elevation-5",
+    // Mantener las antiguas para compatibilidad
+    glass: "glass",
+    "glass-subtle": "glass-subtle",
+    "glass-strong": "glass-strong",
+    outlined: "bg-transparent border-2 border-border-emphasis elevation-1"
+  };
+  const paddingClasses = {
+    none: "p-0",
+    sm: "p-4",
+    md: "p-6 md:p-8",
+    lg: "p-8 md:p-12"
+  };
+  const roundedClasses = {
+    lg: "rounded-sm",
+    xl: "rounded-md",
+    "2xl": "rounded-md",
+    "3xl": "rounded-md"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: `
+      ${variantClasses[variant]}
+      ${paddingClasses[padding]}
+      ${roundedClasses[rounded]}
+      transition-all duration-300
+      ${className}
+    `, children });
+}
+
+// src/components/ui/Input.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function Input({
+  label,
+  icon,
+  error,
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "space-y-2 w-full", children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("label", { className: "block text-xs font-semibold uppercase tracking-wider text-foreground/50 ml-1", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "relative", children: [
+      icon && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "absolute left-4 top-1/2 -translate-y-1/2 text-foreground/40", children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        "input",
+        {
+          className: `
+            w-full bg-secondary/50 border border-border-default
+            rounded-md py-3 px-4
+            ${icon ? "pl-11" : ""}
+
+            elevation-1
+            hover:elevation-2 hover:-translate-y-0.5
+            focus:elevation-3 focus:ring-2 focus:ring-primary/50 focus:glow-primary focus:-translate-y-1
+
+            outline-none
+            transition-all duration-250
+            text-foreground placeholder:text-foreground/30
+            disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:translate-y-0
+
+            ${error ? "border-danger/50 focus:ring-danger/50 focus:glow-danger" : ""}
+            ${className}
+          `,
+          ...props
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-xs text-danger ml-1", children: error })
+  ] });
+}
+
+// src/components/ui/StatusChip.tsx
+var import_tb17 = require("react-icons/tb");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function StatusChip({
+  status,
+  label,
+  icon,
+  isLoading = false,
+  size = "md",
+  showDot = true
+}) {
+  const statusClasses = {
+    success: `
+      bg-success/10 border-success/20 text-success
+      elevation-1 glow-success
+      hover:scale-105 hover:elevation-2
+    `,
+    warning: `
+      bg-warning/10 border-warning/20 text-warning
+      elevation-1 glow-warning
+      hover:scale-105 hover:elevation-2
+      animate-pulse
+    `,
+    danger: `
+      bg-danger/10 border-danger/20 text-danger
+      elevation-1 glow-danger
+      hover:scale-105 hover:elevation-2
+    `,
+    info: `
+      bg-info/10 border-info/20 text-info
+      elevation-1
+      shadow-[0_0_12px_rgba(59,130,246,0.2)]
+      hover:scale-105 hover:elevation-2
+    `,
+    neutral: `
+      bg-secondary/50 border-border-default text-foreground/60
+      elevation-1
+      hover:scale-105 hover:elevation-2
+    `
+  };
+  const sizeClasses = {
+    sm: "px-2 py-1 text-[10px] rounded-custom-sm",
+    md: "px-3 py-1.5 text-xs rounded-custom-md"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: `
+      inline-flex items-center gap-2 border font-semibold uppercase tracking-wider
+      transition-all duration-250
+      ${statusClasses[status]}
+      ${sizeClasses[size]}
+    `, children: [
+    isLoading ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_tb17.TbLoader, { className: "animate-spin" }) : icon,
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: label }),
+    showDot && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: `w-1.5 h-1.5 rounded-full bg-current ${status === "success" ? "shadow-[0_0_8px_currentColor] animate-pulse" : ""}` })
+  ] });
+}
+
+// src/components/ui/Tabs.tsx
+var React3 = __toESM(require("react"));
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function cn(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var TabsContext = React3.createContext(null);
+function Tabs({
+  defaultValue,
+  value,
+  // Agregado para soportar modo controlado si se necesita
+  className,
+  children,
+  onValueChange
+}) {
+  const [internalTab, setInternalTab] = React3.useState(defaultValue || "");
+  const activeTab = value !== void 0 ? value : internalTab;
+  const handleTabChange = (val) => {
+    setInternalTab(val);
+    if (onValueChange) onValueChange(val);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(TabsContext.Provider, { value: { activeTab, setActiveTab: handleTabChange }, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: cn("w-full", className), children }) });
+}
+function TabsList({
+  className,
+  children
+}) {
+  return (
+    // Quitamos 'inline-flex' y 'h-12' fijo para permitir responsive real
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+      "div",
+      {
+        className: cn(
+          "flex items-center justify-start w-full overflow-x-auto scrollbar-hide",
+          className
+        ),
+        children
+      }
+    )
+  );
+}
+function TabsTrigger({
+  value,
+  children,
+  className,
+  disabled
+}) {
+  const context = React3.useContext(TabsContext);
+  if (!context) throw new Error("TabsTrigger must be used within Tabs");
+  const isActive = context.activeTab === value;
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "button",
+    {
+      onClick: () => !disabled && context.setActiveTab(value),
+      disabled,
+      "data-state": isActive ? "active" : "inactive",
+      className: cn(
+        "inline-flex items-center justify-center whitespace-nowrap px-4 py-2 text-sm font-medium transition-all ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+        className
+      ),
+      children
+    }
+  );
+}
+function TabsContent({
+  value,
+  children,
+  className
+}) {
+  const context = React3.useContext(TabsContext);
+  if (!context) throw new Error("TabsContent must be used within Tabs");
+  if (context.activeTab !== value) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "div",
+    {
+      className: cn(
+        "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 animate-in fade-in zoom-in-95 duration-200",
+        className
+      ),
+      children
+    }
+  );
+}
+
+// src/components/ui/TableWrapper.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function cn2(...classes) {
+  return classes.filter(Boolean).join(" ");
+}
+var TableWrapper = ({
+  children,
+  className,
+  variant = "default"
+}) => {
+  const elevationClass = variant === "strong" ? "elevation-3" : "elevation-2";
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn2(
+    "rounded-md overflow-hidden",
+    elevationClass,
+    className
+  ), children });
+};
+var TableHeader = ({ children, className }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("thead", { className: cn2(
+  "elevation-3",
+  "bg-card/80",
+  className
+), children });
+var TableRow = ({ children, onClick, className }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  "tr",
+  {
+    onClick,
+    className: cn2(
+      "bg-card/40",
+      "elevation-1",
+      "hover:elevation-2",
+      "hover:-translate-y-0.5",
+      "hover:bg-card/60",
+      "transition-all duration-250",
+      onClick && "cursor-pointer",
+      className
+    ),
+    children
+  }
+);
+
+// src/lib/api.ts
+var import_axios = __toESM(require("axios"));
+
+// src/lib/stores/authStore.ts
+var import_zustand4 = require("zustand");
+var import_js_cookie = __toESM(require("js-cookie"));
+var useAuthStore = (0, import_zustand4.create)((set) => ({
+  token: null,
+  user: null,
+  login: (token, user) => {
+    import_js_cookie.default.set("auth-token", token, {
+      expires: 7,
+      sameSite: "strict",
+      secure: typeof window !== "undefined" && window.location.protocol === "https:"
+    });
+    localStorage.setItem("auth-user", JSON.stringify(user));
+    set({ token, user });
+  },
+  logout: () => {
+    import_js_cookie.default.remove("auth-token");
+    localStorage.removeItem("auth-user");
+    set({ token: null, user: null });
+  },
+  initializeAuth: () => {
+    const token = import_js_cookie.default.get("auth-token") || null;
+    const userStr = localStorage.getItem("auth-user");
+    const user = userStr ? JSON.parse(userStr) : null;
+    set({ token, user });
+  }
+}));
+
+// src/lib/api.ts
+var _apiBaseUrl = "http://localhost:8080/api/v1";
+function setApiBaseUrl(url) {
+  _apiBaseUrl = url;
+  api.defaults.baseURL = url;
+}
+var api = import_axios.default.create({
+  baseURL: _apiBaseUrl,
+  headers: { "Content-Type": "application/json" }
+});
+api.interceptors.request.use((config) => {
+  const token = useAuthStore.getState().token;
+  if (token) {
+    config.headers["x-access-token"] = token;
+  }
+  return config;
+});
+var api_default = api;
+
+// src/lib/services/biometricService.ts
+var AuthService = {
+  login: async (credentials) => {
+    const { data } = await api_default.post("/auth/login", credentials);
+    return data;
+  }
+};
+var BiometricService = {
+  enrollApplicant: async (payload) => {
+    const { data } = await api_default.post("/biometric/enrollment", payload);
+    return data;
+  },
+  updateApplicant: async (externalId, payload) => {
+    const { data } = await api_default.put(`/biometric/update/${externalId}`, payload);
+    return data;
+  },
+  getApplicant: async (externalId) => {
+    const { data } = await api_default.get(`/biometric/${externalId}`);
+    return data;
+  },
+  verifyIdentity: async (externalId, biometricData) => {
+    const { data } = await api_default.post(`/biometric/${externalId}/verify`, biometricData);
+    return data;
+  },
+  identifyProbe: async (biometricData) => {
+    const { data } = await api_default.post(`/biometric/identify`, biometricData);
+    return data;
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AuthService,
+  BiometricProvider,
+  BiometricService,
+  BiometricSlot,
+  Button,
+  Card,
+  FINGER_NAMES,
+  FaceCameraModal,
+  FaceEnrollModule,
+  FingerCaptureModal,
+  FingerEnrollModule,
+  FingerRollCaptureModal,
+  FingerRollEnrollModule,
+  FingerprintImpressionType,
+  FingerprintPosition,
+  Input,
+  IrisCameraModal,
+  IrisEnrollModule,
+  IrisPosition,
+  LEFT_FINGERS,
+  Loader,
+  MissingBiometricModal,
+  MissingFingerModal,
+  Modal,
+  ModuleHeader,
+  PalmCaptureModal,
+  PalmEnrollModule,
+  ProgressBar,
+  QualityBadge,
+  RIGHT_FINGERS,
+  Select,
+  StatusChip,
+  TableHeader,
+  TableRow,
+  TableWrapper,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  api,
+  base64toBlob,
+  canvasToBase64,
+  detectImageFormat,
+  downloadImageAsBase64,
+  getImageSrcForDisplay,
+  isRemoteImage,
+  isValidBase64,
+  normalizeImageForStorage,
+  setApiBaseUrl,
+  useAuthStore,
+  useBiometricConfig,
+  useBiometricStore,
+  useEnrollmentStore,
+  useUiStore
+});
+//# sourceMappingURL=index.js.map