frontend-plus-react 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,5 +1,5 @@
 // src/components/grid/GenericDataGrid.tsx
-import { useState as useState12, useEffect as useEffect3, useMemo as useMemo8, useRef as useRef3 } from "react";
+import { useState as useState12, useEffect as useEffect5, useCallback as useCallback11, useContext as useContext4, useMemo as useMemo9, useRef as useRef6 } from "react";
 import { DataGrid } from "react-data-grid";
 import "react-data-grid/lib/styles.css";
 
@@ -66,12 +66,27 @@ var useSnackbar = () => {
   return context;
 };
 
+// src/utils/errores.ts
+function mensajeDeError(error, porDefecto = "Error desconocido") {
+  if (error instanceof Error) return error.message || porDefecto;
+  if (typeof error === "string" && error !== "") return error;
+  return porDefecto;
+}
+function requerido(valor, descripcion) {
+  if (valor === null || valor === void 0) {
+    throw new Error(`El servidor no devolvi\xF3 ${descripcion}`);
+  }
+  return valor;
+}
+
 // src/env.ts
 var getEnvVar = (key) => {
-  if (typeof import.meta !== "undefined" && import.meta.env) {
+  const viteEnv = import.meta.env;
+  if (viteEnv) {
     const viteKey = `VITE_${key}`;
-    if (import.meta.env[viteKey]) {
-      return import.meta.env[viteKey];
+    const valor = viteEnv[viteKey];
+    if (valor) {
+      return valor;
     }
   }
   if (typeof process !== "undefined" && process.env) {
@@ -93,61 +108,89 @@ var envConfig = {
 
 // src/utils/fetchApi.ts
 import JSON4all from "json4all";
+var obtenerDefinicionesDeProcedimientos = () => void 0;
+function registrarFuenteDeProcedimientos(fuente) {
+  obtenerDefinicionesDeProcedimientos = fuente;
+}
+function codificarParametro(valor, encoding, procedureName, paramName) {
+  switch (encoding ?? "JSON4all") {
+    case "plain":
+      if (typeof valor === "object" && valor !== null) {
+        throw new Error(`El par\xE1metro '${paramName}' de '${procedureName}' es plain y no admite objetos`);
+      }
+      return String(valor);
+    case "JSON":
+      return JSON.stringify(valor);
+    case "JSON4all":
+      return JSON4all.stringify(valor);
+    default:
+      throw new Error(`Encoding '${encoding}' no soportado para el par\xE1metro '${paramName}' de '${procedureName}'`);
+  }
+}
+function codificarParametros(procedureName, params) {
+  const definicion = obtenerDefinicionesDeProcedimientos()?.[procedureName];
+  const codificados = {};
+  if (!definicion) {
+    for (const [nombre, valor] of Object.entries(params)) {
+      if (valor === void 0) continue;
+      codificados[nombre] = typeof valor === "object" && valor !== null ? JSON4all.stringify(valor) : String(valor);
+    }
+    return { codificados, method: "post" };
+  }
+  const declarados = new Set(definicion.parameters.map((p) => p.name));
+  for (const nombre of Object.keys(params)) {
+    if (!declarados.has(nombre)) {
+      console.warn(`El par\xE1metro '${nombre}' no est\xE1 declarado en el procedimiento '${procedureName}' y no se env\xEDa`);
+    }
+  }
+  for (const paramDef of definicion.parameters) {
+    const valor = params[paramDef.name];
+    if (valor === void 0) continue;
+    codificados[paramDef.name] = codificarParametro(valor, paramDef.encoding, procedureName, paramDef.name);
+  }
+  return { codificados, method: definicion.method ?? "post" };
+}
 async function fetchApi(endPoint, options) {
   const BACKEND_URL = envConfig.backendUrl;
-  const defaultHeaders = {
-    "Content-Type": "application/x-www-form-urlencoded"
-  };
+  const { sinContentType, ...opcionesDeFetch } = options;
+  const headers = new Headers(opcionesDeFetch.headers);
+  if (!sinContentType && !headers.has("Content-Type")) {
+    headers.set("Content-Type", "application/x-www-form-urlencoded");
+  }
   const config = {
-    ...options,
-    headers: {
-      ...options?.headers && "Content-Type" in options.headers && options.headers["Content-Type"] === void 0 ? {} : { "Content-Type": "application/x-www-form-urlencoded" },
-      ...options?.headers
-    },
+    ...opcionesDeFetch,
+    headers,
     credentials: "include"
   };
-  if (config.headers && config.headers["Content-Type"] === void 0) {
-    delete config.headers["Content-Type"];
-  }
   if (config.method === "GET" || config.method === "HEAD") {
     delete config.body;
   }
   return await fetch(BACKEND_URL + endPoint, config);
 }
-var executeBackendProcedure = async (procedureName, params) => {
-  function stringifyObjectsAndArraysInParams(params2) {
-    const newParams = {};
-    for (const key in params2) {
-      if (Object.prototype.hasOwnProperty.call(params2, key)) {
-        const value = params2[key];
-        if (typeof value === "object" && value !== null) {
-          try {
-            newParams[key] = JSON.stringify(value);
-          } catch (e) {
-            console.warn(`Warning: Could not stringify value for key '${key}'. Keeping original value. Error:`, e);
-            newParams[key] = value;
-          }
-        } else {
-          newParams[key] = value;
-        }
-      }
-    }
-    return newParams;
+function esRespuestaConError(resultado) {
+  if (typeof resultado !== "object" || resultado === null || !("error" in resultado)) return false;
+  const { error } = resultado;
+  return typeof error === "object" && error !== null && "message" in error;
+}
+function resultadoDeProcedimiento(texto) {
+  const resultado = parseBackendResponse(texto);
+  if (esRespuestaConError(resultado)) {
+    throw new Error(resultado.error.message);
   }
-  const body = new URLSearchParams(stringifyObjectsAndArraysInParams(params));
-  const response = await fetchApi(`/${procedureName}`, { body, method: "POST" });
+  return resultado;
+}
+async function ejecutar(descripcion, procedureName, pedido) {
+  const response = await pedido;
   if (response.ok) {
-    const rawResponseText = await response.text();
-    const result = parseBackendResponse(rawResponseText);
-    if (result.error) {
-      throw new Error(result.error.message);
-    } else {
-      return result;
-    }
-  } else {
-    const errorTextDefinition = await response.text();
-    throw new Error(`Error al ejecutar procedure '${procedureName}': ${response.status} - ${errorTextDefinition}`);
+    return resultadoDeProcedimiento(await response.text());
   }
+  const errorTextDefinition = await response.text();
+  throw new Error(`Error al ejecutar ${descripcion} '${procedureName}': ${response.status} - ${errorTextDefinition}`);
+}
+var executeBackendProcedure = async (procedureName, params) => {
+  const { codificados, method } = codificarParametros(procedureName, params);
+  const query = new URLSearchParams(codificados);
+  return ejecutar("procedure", procedureName, method === "get" ? fetchApi(`/${procedureName}?${query}`, { method: "GET" }) : fetchApi(`/${procedureName}`, { body: query, method: "POST" }));
 };
 function parseBackendResponse(text) {
   const trimmedText = text.trim();
@@ -178,45 +221,21 @@ function parseBackendResponse(text) {
         }
       }
     }
-    throw new Error(`No se pudo parsear la respuesta del servidor: ${e.message}`);
+    throw new Error(`No se pudo parsear la respuesta del servidor: ${mensajeDeError(e)}`);
   }
 }
 var executeBackendUpload = async (procedureName, file, params) => {
   const formData = new FormData();
   formData.append("file", file);
-  for (const key in params) {
-    if (Object.prototype.hasOwnProperty.call(params, key)) {
-      const value = params[key];
-      if (typeof value === "object" && value !== null) {
-        formData.append(key, JSON.stringify(value));
-      } else {
-        formData.append(key, value);
-      }
-    }
-  }
-  const response = await fetchApi(`/${procedureName}`, {
-    body: formData,
-    method: "POST",
-    headers: {
-      "Content-Type": void 0
-      // Dejamos que el navegador establezca el boundary
-    }
-  });
-  if (response.ok) {
-    const rawResponseText = await response.text();
-    const result = parseBackendResponse(rawResponseText);
-    if (result.error) {
-      throw new Error(result.error.message);
-    } else {
-      return result;
-    }
-  } else {
-    const errorTextDefinition = await response.text();
-    throw new Error(`Error al ejecutar upload '${procedureName}': ${response.status} - ${errorTextDefinition}`);
+  const { codificados } = codificarParametros(procedureName, params);
+  for (const [key, value] of Object.entries(codificados)) {
+    formData.append(key, value);
   }
+  return ejecutar("upload", procedureName, fetchApi(`/${procedureName}`, { body: formData, method: "POST", sinContentType: true }));
 };
 
 // src/hooks/useApiCall.ts
+var comoError = (err) => err instanceof Error ? err : new Error(mensajeDeError(err));
 var useApiCall = () => {
   const { showSnackbar } = useSnackbar();
   const [loading, setLoading] = useState2(false);
@@ -228,7 +247,7 @@ var useApiCall = () => {
       const result = await executeBackendProcedure(procedureName, params);
       return result === null ? void 0 : result;
     } catch (err) {
-      if (opts.isCritical) setError(err);
+      if (opts.isCritical) setError(comoError(err));
       let snackbarMessage = `Error inesperado al ejecutar '${procedureName}'.`;
       if (err instanceof TypeError) {
         snackbarMessage = `Problema de conexi\xF3n: ${err.message}. Por favor, revisa tu internet o intenta de nuevo.`;
@@ -248,7 +267,7 @@ var useApiCall = () => {
       const result = await executeBackendUpload(procedureName, file, params);
       return result === null ? void 0 : result;
     } catch (err) {
-      if (opts.isCritical) setError(err);
+      if (opts.isCritical) setError(comoError(err));
       let snackbarMessage = `Error inesperado al subir archivo en '${procedureName}'.`;
       if (err instanceof TypeError) {
         snackbarMessage = `Problema de conexi\xF3n: ${err.message}. Por favor, revisa tu internet o intenta de nuevo.`;
@@ -266,28 +285,28 @@ var useApiCall = () => {
 var useApiCallWithoutSnackbar = () => {
   const [loading, setLoading] = useState2(false);
   const [error, setError] = useState2(null);
-  const callApi = useCallback2(async (procedureName, params, opts = { isCritical: true }) => {
+  const callApi = useCallback2(async (procedureName, params, _opts = { isCritical: true }) => {
     setLoading(true);
     setError(null);
     try {
       const result = await executeBackendProcedure(procedureName, params);
       return result === null ? void 0 : result;
     } catch (err) {
-      setError(err);
+      setError(comoError(err));
       console.error(`Error en la llamada API (WithoutSnackbar) para ${procedureName}:`, err);
       throw err;
     } finally {
       setLoading(false);
     }
   }, []);
-  const callApiUpload = useCallback2(async (procedureName, file, params, opts = { isCritical: true }) => {
+  const callApiUpload = useCallback2(async (procedureName, file, params, _opts = { isCritical: true }) => {
     setLoading(true);
     setError(null);
     try {
       const result = await executeBackendUpload(procedureName, file, params);
       return result === null ? void 0 : result;
     } catch (err) {
-      setError(err);
+      setError(comoError(err));
       console.error(`Error en la subida API (WithoutSnackbar) para ${procedureName}:`, err);
       throw err;
     } finally {
@@ -300,6 +319,207 @@ var useApiCallWithoutSnackbar = () => {
 // src/components/grid/GenericDataGrid.tsx
 import { CircularProgress as CircularProgress4, Typography as Typography8, Box as Box12, Alert as Alert2, useTheme as useTheme4, Dialog as Dialog4 } from "@mui/material";
 
+// src/store/index.ts
+import { configureStore, combineReducers } from "@reduxjs/toolkit";
+import {
+  persistStore,
+  persistReducer,
+  FLUSH,
+  REHYDRATE,
+  PAUSE,
+  PERSIST,
+  PURGE,
+  REGISTER
+} from "redux-persist";
+import storage from "redux-persist/lib/storage";
+
+// src/store/clientContextSlice.ts
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+var initialState = {
+  menu: [],
+  procedure: {},
+  procedures: [],
+  config: {},
+  // Inicializa con un objeto vacío o valores por defecto adecuados
+  useragent: {},
+  // Igual aquí
+  username: "",
+  status: "idle",
+  // Por defecto, sin carga
+  error: null
+  // Sin error
+};
+var fetchClientContext = createAsyncThunk(
+  "clientContext/fetchClientContext",
+  async (_, { rejectWithValue }) => {
+    try {
+      const setupResponse = await fetchApi("/client-setup", { method: "GET" });
+      if (!setupResponse.ok) {
+        const errorData = await setupResponse.text();
+        throw new Error(errorData || "Error al obtener configuraci\xF3n del cliente");
+      }
+      const clientSetup = await setupResponse.json();
+      return clientSetup;
+    } catch (error) {
+      return rejectWithValue(mensajeDeError(error, "Error desconocido al cargar el contexto"));
+    }
+  }
+);
+var clientContextSlice = createSlice({
+  name: "clientContext",
+  initialState,
+  reducers: {
+    // Un reducer para limpiar el contexto del cliente (ej. al cerrar sesión)
+    clearClientContext: (state) => {
+      Object.assign(state, initialState);
+    }
+    // Puedes añadir otros reducers aquí si necesitas modificar partes del clientContext directamente
+    // pero el thunk es la forma preferida para la carga inicial.
+  },
+  // **extraReducers maneja las acciones del thunk asíncrono**
+  extraReducers: (builder) => {
+    builder.addCase(fetchClientContext.pending, (state) => {
+      state.status = "loading";
+      state.error = null;
+    }).addCase(fetchClientContext.fulfilled, (state, action) => {
+      state.status = "succeeded";
+      state.menu = action.payload.menu;
+      state.procedure = action.payload.procedure;
+      state.procedures = action.payload.procedures;
+      state.config = action.payload.config;
+      state.useragent = action.payload.useragent;
+      state.username = action.payload.username;
+      state.error = null;
+    }).addCase(fetchClientContext.rejected, (state, action) => {
+      state.status = "failed";
+      state.error = action.payload || "Fallo al cargar el contexto del cliente";
+    });
+  }
+});
+var { clearClientContext } = clientContextSlice.actions;
+var clientContextSlice_default = clientContextSlice.reducer;
+
+// src/store/routerSlice.ts
+import { createSlice as createSlice2 } from "@reduxjs/toolkit";
+var initialState2 = {
+  currentPath: "/",
+  previousPath: null,
+  redirectPath: null
+  // <--- Inicializamos en null
+};
+var routerSlice = createSlice2({
+  name: "router",
+  initialState: initialState2,
+  reducers: {
+    setCurrentPath: (state, action) => {
+      state.previousPath = state.currentPath;
+      state.currentPath = action.payload;
+    },
+    setRedirectPath: (state, action) => {
+      state.redirectPath = action.payload;
+    },
+    resetRouterState: (state) => {
+      state.currentPath = "/";
+      state.previousPath = null;
+      state.redirectPath = null;
+    }
+  }
+});
+var { setCurrentPath, setRedirectPath, resetRouterState } = routerSlice.actions;
+var routerSlice_default = routerSlice.reducer;
+
+// src/store/menuUiSlice.ts
+import { createSlice as createSlice3 } from "@reduxjs/toolkit";
+var initialState3 = {
+  isDrawerOpen: false,
+  subMenuOpenStates: {}
+};
+var menuUiSlice = createSlice3({
+  name: "menuUi",
+  initialState: initialState3,
+  reducers: {
+    setDrawerOpen: (state, action) => {
+      state.isDrawerOpen = action.payload;
+    },
+    toggleDrawer: (state) => {
+      state.isDrawerOpen = !state.isDrawerOpen;
+    },
+    setSubMenuOpen: (state, action) => {
+      state.subMenuOpenStates[action.payload.menuName] = action.payload.isOpen;
+    },
+    toggleSubMenu: (state, action) => {
+      state.subMenuOpenStates[action.payload] = !state.subMenuOpenStates[action.payload];
+    },
+    // --- NUEVO REDUCER: Establecer el estado de todos los submenús ---
+    setAllSubMenusOpen: (state, action) => {
+      for (const menuName in state.subMenuOpenStates) {
+        if (Object.prototype.hasOwnProperty.call(state.subMenuOpenStates, menuName)) {
+          state.subMenuOpenStates[menuName] = action.payload;
+        }
+      }
+    },
+    resetMenuUiState: (state) => {
+      Object.assign(state, initialState3);
+    }
+  }
+});
+var {
+  setDrawerOpen,
+  toggleDrawer,
+  setSubMenuOpen,
+  toggleSubMenu,
+  setAllSubMenusOpen,
+  // ¡Exportamos la nueva acción!
+  resetMenuUiState
+} = menuUiSlice.actions;
+var menuUiSlice_default = menuUiSlice.reducer;
+
+// src/store/index.ts
+import { useDispatch, useSelector } from "react-redux";
+var rootReducer = combineReducers({
+  clientContext: clientContextSlice_default,
+  router: routerSlice_default,
+  menuUi: menuUiSlice_default
+  // ...otros slices
+});
+var persistConfig = {
+  key: "root",
+  storage,
+  whitelist: ["clientContext", "router", "menuUi"]
+};
+var persistedReducer = persistReducer(persistConfig, rootReducer);
+var store = configureStore({
+  reducer: persistedReducer,
+  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
+    serializableCheck: {
+      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
+    }
+  })
+});
+var persistor = persistStore(store);
+registrarFuenteDeProcedimientos(() => {
+  const { procedure, procedures } = store.getState().clientContext;
+  if (procedure && Object.keys(procedure).length > 0) return procedure;
+  return procedures?.length ? Object.fromEntries(procedures.map((p) => [p.action, p])) : void 0;
+});
+var useAppDispatch = useDispatch;
+var useAppSelector = useSelector;
+var useClientContext = () => {
+  return useAppSelector((state) => state.clientContext);
+};
+var useClientContextStatus = () => {
+  return useAppSelector((state) => state.clientContext.status);
+};
+var useIsDrawerOpen = () => {
+  return useAppSelector((state) => state.menuUi.isDrawerOpen);
+};
+var useSubMenuOpenState = (menuName) => {
+  return useAppSelector((state) => state.menuUi.subMenuOpenStates[menuName] || false);
+};
+var useRedirectPath = () => {
+  return useAppSelector((state) => state.router.redirectPath);
+};
+
 // src/components/ConfirmDialog.tsx
 import Dialog from "@mui/material/Dialog";
 import DialogTitle from "@mui/material/DialogTitle";
@@ -443,20 +663,42 @@ var DataGridOptionsDialog = ({
 };
 
 // src/components/grid/utils/helpers.ts
-var NEW_ROW_INDICATOR = "$new";
-var DOM_TEMP_ID = Symbol("domTempId");
-var getPrimaryKeyValues = (row, primaryKey) => {
-  if (row[DOM_TEMP_ID]) return String(row[DOM_TEMP_ID]);
-  return primaryKey.map((key) => {
-    return row[key] !== void 0 && row[key] !== null ? String(row[key]) : "NULL_OR_UNDEFINED";
-  }).join("|");
-};
-var sameValue = (a, b) => {
-  if (a === b) return true;
-  if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
-  const isAEmpty = a === null || a === void 0;
-  const isBEmpty = b === null || b === void 0;
-  if (isAEmpty && isBEmpty) return true;
+import typeStore from "type-store";
+
+// src/utils/routeUtils.ts
+import { Children, isValidElement } from "react";
+var extractPathsFromRoutes = (node) => {
+  const paths = [];
+  Children.forEach(node, (child) => {
+    if (!isValidElement(child)) return;
+    if (child.props.path) {
+      paths.push(child.props.path);
+    }
+    if (child.props.children) {
+      paths.push(...extractPathsFromRoutes(child.props.children));
+    }
+  });
+  return paths;
+};
+
+// src/types/index.ts
+var DOM_TEMP_ID = Symbol("domTempId");
+
+// src/components/grid/utils/helpers.ts
+var typerFrom = (fieldDef) => typeStore.typerFrom(fieldDef);
+var NEW_ROW_INDICATOR = "$new";
+var getPrimaryKeyValues = (row, primaryKey) => {
+  if (row[DOM_TEMP_ID]) return String(row[DOM_TEMP_ID]);
+  return primaryKey.map((key) => {
+    return row[key] !== void 0 && row[key] !== null ? String(row[key]) : "NULL_OR_UNDEFINED";
+  }).join("|");
+};
+var sameValue = (a, b) => {
+  if (a === b) return true;
+  if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
+  const isAEmpty = a === null || a === void 0;
+  const isBEmpty = b === null || b === void 0;
+  if (isAEmpty && isBEmpty) return true;
   return false;
 };
 var isNumericType = (typeName) => {
@@ -466,6 +708,16 @@ var isDateTimeType = (typeName) => {
   const t = typeName?.toLowerCase() || "";
   return ["date", "time", "timestamp", "interval", "tsrange", "time_range", "daterange"].some((type) => t.includes(type));
 };
+var compararValores = (a, b) => {
+  if (typeof a === "number" && typeof b === "number") return a - b;
+  if (a instanceof Date && b instanceof Date) return a.getTime() - b.getTime();
+  if (typeof a === "string" && typeof b === "string") return a < b ? -1 : a > b ? 1 : 0;
+  if (typeof a === "bigint" && typeof b === "bigint") return a < b ? -1 : a > b ? 1 : 0;
+  const esNumerico = (v) => typeof v === "string" && v.trim() !== "" && !Number.isNaN(Number(v));
+  if (typeof a === "number" && esNumerico(b)) return a - Number(b);
+  if (esNumerico(a) && typeof b === "number") return Number(a) - b;
+  return null;
+};
 var filterOperators = [
   { value: "=", label: "=" },
   { value: "~", label: "~" },
@@ -632,7 +884,7 @@ var useGridActions = ({
         }, 500);
       } catch (err) {
         console.error(`Error al eliminar la fila '${rowId}':`, err);
-        showError(`Error al eliminar la fila '${rowId}': ${err.message || "Error desconocido"}`);
+        showError(`Error al eliminar la fila '${rowId}': ${mensajeDeError(err, "Error desconocido")}`);
         setExitingRowIds((prev) => {
           const newSet = new Set(prev);
           newSet.delete(rowId);
@@ -670,19 +922,19 @@ var useGridActions = ({
         if (updated > 0) messages.push(`${updated} fila(s) actualizada(s).`);
         if (skipped > 0) messages.push(`${skipped} fila(s) omitida(s).`);
         if (deleted > 0) messages.push(`${deleted} fila(s) eliminada(s).`);
-        if (skippedColumns?.length > 0) messages.push(`Columnas omitidas: ${skippedColumns.join(", ")}`);
+        if (skippedColumns && skippedColumns.length > 0) messages.push(`Columnas omitidas: ${skippedColumns.join(", ")}`);
         showSuccess(messages.join("\n") || "Importaci\xF3n finalizada sin cambios detectados.");
-        const newData = await callApi("table_data", {
+        const newData = requerido(await callApi("table_data", {
           table: tableName,
           fixedFields
-        });
+        }), "los datos de la tabla");
         setTableData(newData);
       } else if (result && result.message) {
         showSuccess(result.message);
       }
     } catch (err) {
       console.error("Error durante la importaci\xF3n:", err);
-      showError(`Importaci\xF3n cancelada: ${err.message || "Error desconocido"}`);
+      showError(`Importaci\xF3n cancelada: ${mensajeDeError(err, "Error desconocido")}`);
     }
   }, [tableName, fixedFields, callApiUpload, callApi, showSuccess, showError, setTableData]);
   return {
@@ -701,8 +953,8 @@ var useGridActions = ({
 };
 
 // src/hooks/grid/useGridDataView.ts
-import { useState as useState5, useCallback as useCallback4, useMemo } from "react";
-import typeStore from "type-store";
+import { useState as useState5, useCallback as useCallback4, useMemo, useRef } from "react";
+import typeStore2 from "type-store";
 
 // src/components/grid/utils/typedControls.ts
 var BestControls = {
@@ -723,7 +975,7 @@ var BestControls = {
       if (plainValue === null || plainValue === void 0) {
         return plainValue;
       }
-      return typer.fromUserInput(plainValue);
+      return typer.fromUserInput(String(plainValue));
     }
   },
   number: {
@@ -756,7 +1008,7 @@ var BestControls = {
     }
   },
   date: {
-    getTypedValue: (plainValue, typer) => {
+    getTypedValue: (plainValue) => {
       if (plainValue === null || plainValue === void 0 || plainValue === "") return null;
       if (plainValue instanceof Date) return plainValue;
       const parts = String(plainValue).trim().split(/[-\/]/).map((s) => s.trim());
@@ -774,15 +1026,14 @@ var BestControls = {
       }
       const date = new Date(year, month, day);
       if (date.getFullYear() === year && date.getMonth() === month && date.getDate() === day) {
-        date.isRealDate = true;
-        return date;
+        return Object.assign(date, { isRealDate: true });
       }
       return null;
     }
   }
 };
-var getBestTypedValue = (value, typer) => {
-  value = value === "" ? typer.emptyValue : value;
+var getBestTypedValue = (valor, typer) => {
+  const value = valor === "" ? typer.emptyValue : valor;
   const typeName = typer.typeName;
   if (["integer", "bigint", "decimal", "double", "float", "number"].includes(typeName)) {
     return BestControls.number.getTypedValue(value);
@@ -791,12 +1042,13 @@ var getBestTypedValue = (value, typer) => {
     return BestControls.boolean.getTypedValue(value);
   }
   if (typeName === "date" || typeName && typeName.toLowerCase().includes("timestamp")) {
-    return BestControls.date.getTypedValue(value, typer);
+    return BestControls.date.getTypedValue(value);
   }
   return BestControls.text.getTypedValue(value, typer);
 };
 
 // src/hooks/grid/useGridDataView.ts
+var MAXIMO_FILAS_EDICION_PUNTUAL = 3;
 var useGridDataView = ({ tableData, tableDefinition }) => {
   const [sortColumns, setSortColumns] = useState5([]);
   const getInitialSortColumns = useCallback4((def) => {
@@ -835,7 +1087,20 @@ var useGridDataView = ({ tableData, tableDefinition }) => {
       return !prev;
     });
   }, []);
+  const vistaAnteriorRef = useRef(null);
   const filteredRows = useMemo(() => {
+    const anterior = vistaAnteriorRef.current;
+    if (anterior && anterior.filters === filters && anterior.isFilterRowVisible === isFilterRowVisible && anterior.sortColumns === sortColumns && anterior.tableDefinition === tableDefinition && anterior.tableData.length === tableData.length) {
+      const reemplazos = /* @__PURE__ */ new Map();
+      for (let i = 0; i < tableData.length && reemplazos.size <= MAXIMO_FILAS_EDICION_PUNTUAL; i++) {
+        if (anterior.tableData[i] !== tableData[i]) reemplazos.set(anterior.tableData[i], tableData[i]);
+      }
+      if (reemplazos.size <= MAXIMO_FILAS_EDICION_PUNTUAL) {
+        const filas = reemplazos.size === 0 ? anterior.filas : anterior.filas.map((fila) => reemplazos.get(fila) ?? fila);
+        vistaAnteriorRef.current = { ...anterior, tableData, filas };
+        return filas;
+      }
+    }
     let rows = [...tableData];
     if (isFilterRowVisible) {
       Object.keys(filters).forEach((key) => {
@@ -851,7 +1116,7 @@ var useGridDataView = ({ tableData, tableDefinition }) => {
         }
         if (filterValue === "" && operator !== "\u2205" && operator !== "!=\u2205") return;
         const fieldDef = tableDefinition?.fields.find((f) => f.name === key);
-        const typer = fieldDef ? typeStore.typerFrom(fieldDef) : null;
+        const typer = fieldDef ? typeStore2.typerFrom(fieldDef) : null;
         let parsedFilterValue = filterValue;
         if (typer && filterValue !== "" && !["~", "!~", "\u2205", "!=\u2205"].includes(operator)) {
           try {
@@ -885,14 +1150,22 @@ var useGridDataView = ({ tableData, tableDefinition }) => {
               return rawValue === null || rawValue === void 0 || rawValue === "";
             case "!=\u2205":
               return rawValue !== null && rawValue !== void 0 && rawValue !== "";
-            case ">":
-              return rawValue !== null && rawValue !== void 0 && rawValue > parsedFilterValue;
-            case ">=":
-              return rawValue !== null && rawValue !== void 0 && rawValue >= parsedFilterValue;
-            case "<":
-              return rawValue !== null && rawValue !== void 0 && rawValue < parsedFilterValue;
-            case "<=":
-              return rawValue !== null && rawValue !== void 0 && rawValue <= parsedFilterValue;
+            case ">": {
+              const orden = compararValores(rawValue, parsedFilterValue);
+              return orden !== null && orden > 0;
+            }
+            case ">=": {
+              const orden = compararValores(rawValue, parsedFilterValue);
+              return orden !== null && orden >= 0;
+            }
+            case "<": {
+              const orden = compararValores(rawValue, parsedFilterValue);
+              return orden !== null && orden < 0;
+            }
+            case "<=": {
+              const orden = compararValores(rawValue, parsedFilterValue);
+              return orden !== null && orden <= 0;
+            }
             default:
               return cellValue.includes(fValLower);
           }
@@ -919,6 +1192,7 @@ var useGridDataView = ({ tableData, tableDefinition }) => {
         return 0;
       });
     }
+    vistaAnteriorRef.current = { tableData, filas: rows, filters, isFilterRowVisible, sortColumns, tableDefinition };
     return rows;
   }, [tableData, filters, isFilterRowVisible, tableDefinition, sortColumns]);
   const summaryData = useMemo(() => {
@@ -931,10 +1205,10 @@ var useGridDataView = ({ tableData, tableDefinition }) => {
       if (values.length === 0 && agg !== "count" && agg !== "countTrue") return;
       switch (agg) {
         case "sum":
-          result[field.name] = { type: "sum", value: values.reduce((a, b) => Number(a) + Number(b), 0) };
+          result[field.name] = { type: "sum", value: values.reduce((a, b) => a + Number(b), 0) };
           break;
         case "avg":
-          const sum = values.reduce((a, b) => Number(a) + Number(b), 0);
+          const sum = values.reduce((a, b) => a + Number(b), 0);
           result[field.name] = { type: "avg", value: sum / values.length };
           break;
         case "min":
@@ -979,29 +1253,195 @@ var useGridDataView = ({ tableData, tableDefinition }) => {
 };
 
 // src/hooks/grid/useGridEvents.ts
-import { useCallback as useCallback5 } from "react";
+import { useCallback as useCallback5, useRef as useRef3 } from "react";
+
+// src/components/grid/detalles.tsx
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect2, useMemo as useMemo2, useRef as useRef2 } from "react";
+import { IconButton, Tooltip } from "@mui/material";
+import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+
+// src/pages/WScreens.tsx
+import { Box as Box2, Typography, Paper as Paper2 } from "@mui/material";
+import ConstructionIcon from "@mui/icons-material/Construction";
+import WarningAmberIcon from "@mui/icons-material/WarningAmber";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var MyCustomDashboard = ({ screenName }) => {
+  return /* @__PURE__ */ jsx4(Box2, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsxs4(Paper2, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600 }, children: [
+    /* @__PURE__ */ jsxs4(Typography, { variant: "h5", component: "h1", gutterBottom: true, children: [
+      "\xA1Bienvenido a tu WScreen: ",
+      screenName,
+      "!"
+    ] }),
+    /* @__PURE__ */ jsx4(Typography, { variant: "body1", color: "text.secondary", children: "Esta es una pantalla de interfaz de usuario personalizada." }),
+    /* @__PURE__ */ jsx4(Box2, { sx: { mt: 3 }, children: /* @__PURE__ */ jsx4(ConstructionIcon, { sx: { fontSize: 80, color: "primary.main" } }) })
+  ] }) });
+};
+var FallbackWScreen = ({ screenName }) => {
+  return /* @__PURE__ */ jsx4(Box2, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsxs4(Paper2, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600, backgroundColor: "warning.light", border: "1px solid orange" }, children: [
+    /* @__PURE__ */ jsx4(Typography, { variant: "h5", component: "h1", gutterBottom: true, color: "warning.dark", children: "WScreen No Implementada" }),
+    /* @__PURE__ */ jsxs4(Typography, { variant: "body1", color: "warning.dark", children: [
+      'No se encontr\xF3 un componente implementado para la **WScreen**: **`"$',
+      screenName,
+      '"`**. Por favor, verifica el `menuType` en la definici\xF3n del men\xFA o aseg\xFArate de que el componente est\xE9 correctamente importado y mapeado en el frontend.'
+    ] }),
+    /* @__PURE__ */ jsx4(Box2, { sx: { mt: 3 }, children: /* @__PURE__ */ jsx4(WarningAmberIcon, { sx: { fontSize: 80, color: "warning.dark" } }) })
+  ] }) });
+};
+var wScreens = {
+  "MyCustomDashboard": MyCustomDashboard
+  // Agrega más componentes de wScreen aquí:
+  // 'AnotherWScreen': AnotherWScreenComponent,
+};
+var extendWScreens = (newWScreens) => {
+  wScreens = { ...wScreens, ...newWScreens };
+  console.log("wScreens extendidos:", wScreens);
+};
+
+// src/components/grid/condiciones.ts
+var condiciones = {};
+var extendConditions = (nuevas) => {
+  condiciones = { ...condiciones, ...nuevas };
+};
+var avisadas = /* @__PURE__ */ new Set();
+function cumpleCondicion(nombre, fila) {
+  if (!nombre) return true;
+  const condicion = condiciones[nombre];
+  if (!condicion) {
+    if (!avisadas.has(nombre)) {
+      avisadas.add(nombre);
+      console.warn(`La condici\xF3n '${nombre}' de un detalle no est\xE1 registrada (extendConditions / myConditions): se muestra el detalle.`);
+    }
+    return true;
+  }
+  return condicion(fila);
+}
+
+// src/components/grid/detalles.tsx
+import { Fragment as Fragment2, jsx as jsx5 } from "react/jsx-runtime";
+var DETALLE = Symbol("detalle");
+var esFilaDetalle = (row) => typeof row === "object" && row !== null && row[DETALLE] === true;
+var claveDetalle = (rowId, detailTable) => `${rowId}|${detailTable.abr}`;
+var ALTO_INICIAL_DETALLE = 140;
+var ALTO_MINIMO_DETALLE = 80;
+var normalizarCampoDeDetalle = (campo) => {
+  if (typeof campo === "string") return { target: campo, source: campo, tieneValor: false };
+  if ("value" in campo) return { target: campo.target, value: campo.value, tieneValor: true, until: campo.until };
+  return { target: campo.target, source: campo.source, tieneValor: false, nullMeansAll: campo.nullMeansAll, until: campo.until };
+};
+function calcularFixedFieldsDetalle(detailTable, row) {
+  return detailTable.fields.map(normalizarCampoDeDetalle).filter((campo) => !campo.nullMeansAll || campo.source !== void 0 && row[campo.source] != null).map((campo) => {
+    const fixedField = {
+      fieldName: campo.target,
+      value: campo.tieneValor ? campo.value : row[campo.source]
+    };
+    if (campo.until !== void 0) fixedField.until = campo.until;
+    return fixedField;
+  });
+}
+var CacheGrillasContext = createContext2(null);
+var DetallesGrillaContext = createContext2(null);
+var useDetallesGrilla = () => {
+  const detalles = useContext2(DetallesGrillaContext);
+  if (!detalles) throw new Error("falta DetallesGrillaContext.Provider");
+  return detalles;
+};
+function BotonDetalle({ row, rowId, detailTable, deshabilitado }) {
+  const { abiertos, alternarDetalle } = useDetallesGrilla();
+  if (!cumpleCondicion(detailTable.condition, row)) return /* @__PURE__ */ jsx5("div", { className: "fpr-boton-detalle" });
+  const abierto = abiertos.has(claveDetalle(rowId, detailTable));
+  const titulo = deshabilitado ? "Grab\xE1 la fila para ver sus detalles" : `${detailTable.label || detailTable.abr}${abierto ? " (replegar)" : ""} \u2014 Ctrl+click: en otra pesta\xF1a`;
+  return /* @__PURE__ */ jsx5(Tooltip, { title: titulo, children: /* @__PURE__ */ jsx5("span", { className: "fpr-boton-detalle", children: /* @__PURE__ */ jsx5(
+    IconButton,
+    {
+      size: "small",
+      disabled: deshabilitado,
+      onClick: (e) => alternarDetalle(row, rowId, detailTable, e.ctrlKey || e.metaKey),
+      onAuxClick: (e) => {
+        if (e.button === 1) alternarDetalle(row, rowId, detailTable, true);
+      },
+      children: abierto ? /* @__PURE__ */ jsx5(KeyboardArrowDownIcon, { fontSize: "small" }) : /* @__PURE__ */ jsx5(KeyboardArrowRightIcon, { fontSize: "small" })
+    }
+  ) }) });
+}
+var AltoDisponibleContext = createContext2(void 0);
+var MARGEN_VERTICAL_DETALLE = 8;
+function DetalleWScreen({ fila, altoMaximo, onAlto, onAncho }) {
+  const nombre = fila.detailTable.wScreen ?? "";
+  const Pantalla = wScreens[nombre];
+  const params = useMemo2(
+    () => Object.fromEntries(fila.fixedFields.map((fixedField) => [fixedField.fieldName, fixedField.value])),
+    [fila.fixedFields]
+  );
+  const contenido = useRef2(null);
+  useEffect2(() => {
+    const elemento = contenido.current;
+    if (!elemento) return;
+    const medir = () => {
+      onAlto(elemento.offsetHeight + MARGEN_VERTICAL_DETALLE);
+      onAncho(elemento.offsetWidth);
+    };
+    medir();
+    const observador = new ResizeObserver(medir);
+    observador.observe(elemento);
+    return () => observador.disconnect();
+  }, [onAlto, onAncho]);
+  return /* @__PURE__ */ jsx5(AltoDisponibleContext.Provider, { value: altoMaximo === void 0 ? void 0 : altoMaximo - MARGEN_VERTICAL_DETALLE, children: /* @__PURE__ */ jsx5("div", { className: "fpr-detalle-wscreen", children: /* @__PURE__ */ jsx5("div", { ref: contenido, className: "fpr-detalle-wscreen-contenido", children: Pantalla ? /* @__PURE__ */ jsx5(Pantalla, { screenName: nombre, params }) : /* @__PURE__ */ jsx5(FallbackWScreen, { screenName: nombre }) }) }) });
+}
+function CeldaDetalle({ fila }) {
+  const { renderDetalle } = useDetallesGrilla();
+  return /* @__PURE__ */ jsx5(Fragment2, { children: renderDetalle(fila) });
+}
+
+// src/hooks/grid/useGridEvents.ts
+var VIGENCIA_TECLA_PENDIENTE = 400;
+var VIGENCIA_VALOR_PENDIENTE_F4 = 1e3;
 var useGridEvents = ({ dataGridRef, tableDefinition, filteredRows, tableData, fixedFields, setSelectedCell, setTableData, setSortColumns }) => {
+  const filteredRowsRef = useRef3(filteredRows);
+  filteredRowsRef.current = filteredRows;
+  const tableDefinitionRef = useRef3(tableDefinition);
+  tableDefinitionRef.current = tableDefinition;
+  const valoresF4Pendientes = useRef3(/* @__PURE__ */ new Map());
+  const teclasPendientes = useRef3([]);
+  const editorActivo = useRef3(null);
+  const registrarEditor = useCallback5((procesar) => {
+    editorActivo.current = procesar;
+    const cola = teclasPendientes.current;
+    while (cola.length > 0 && Date.now() - cola[0].cuando > VIGENCIA_TECLA_PENDIENTE) cola.shift();
+    const pendiente = cola.shift();
+    if (pendiente) procesar(pendiente.key);
+    return () => {
+      if (editorActivo.current === procesar) editorActivo.current = null;
+    };
+  }, []);
   const handleKeyPressInEditor = useCallback5((rowIndex, columnKey, event, currentColumns, handleCommit) => {
-    if (dataGridRef.current && tableDefinition) {
+    const tableDefinition2 = tableDefinitionRef.current;
+    const filteredRows2 = filteredRowsRef.current;
+    if (dataGridRef.current && tableDefinition2) {
       const currentColumnIndex = currentColumns.findIndex((col) => col.key === columnKey);
       const editableColumns = currentColumns.filter((col) => {
-        const fieldDefinition = tableDefinition.fields.find((f) => f.name === col.key);
-        return col.key !== "actionsColumn" && col.customType !== "detail" && (fieldDefinition?.editable !== false && !fieldDefinition?.clientSide);
+        const fieldDefinition = tableDefinition2.fields.find((f) => f.name === col.key);
+        return col.key !== "actionsColumn" && !(esColumnaPropia(col) && col.customType === "detail") && (fieldDefinition?.editable !== false && !fieldDefinition?.clientSide);
       });
       const { key, target } = event;
       const input = target;
       if (currentColumnIndex !== -1 && editableColumns.length > 0) {
         const editableColumnKeys = editableColumns.map((col) => col.key);
         let currentEditableColumnIndex = editableColumnKeys.indexOf(columnKey);
-        const hacerFoco = ({ rowIdx, idx }) => setTimeout(() => dataGridRef.current?.selectCell({ rowIdx, idx }, { enableEditor: true, shouldFocusCell: true }), 10);
+        const hacerFoco = ({ rowIdx, idx }) => dataGridRef.current?.selectCell({ rowIdx, idx }, { enableEditor: true, shouldFocusCell: true });
+        const filaDeDatos = (desde, paso) => {
+          let i = desde + paso;
+          while (i >= 0 && i < filteredRows2.length && esFilaDetalle(filteredRows2[i])) i += paso;
+          return i >= 0 && i < filteredRows2.length ? i : -1;
+        };
         const calcularColumnaSiguiente = () => {
           let nextEditableColumnIndex = currentEditableColumnIndex + 1;
           let nextRowIndex = rowIndex;
           if (nextEditableColumnIndex >= editableColumns.length) {
             nextEditableColumnIndex = 0;
-            nextRowIndex++;
-            if (nextRowIndex >= filteredRows.length) {
-              nextRowIndex = 0;
+            nextRowIndex = filaDeDatos(rowIndex, 1);
+            if (nextRowIndex === -1) {
+              nextRowIndex = filaDeDatos(-1, 1);
             }
           }
           const nextColumnKey = editableColumnKeys[nextEditableColumnIndex];
@@ -1019,20 +1459,12 @@ var useGridEvents = ({ dataGridRef, tableDefinition, filteredRows, tableData, fi
           return { rowIdx: nextRowIndex, idx: nextColumnIndex };
         };
         const calcularFilaSiguiente = () => {
-          let nextRowIndex = rowIndex;
-          nextRowIndex++;
-          if (nextRowIndex >= filteredRows.length) {
-            return { rowIdx: rowIndex, idx: currentColumnIndex };
-          }
-          return { rowIdx: nextRowIndex, idx: currentColumnIndex };
+          const nextRowIndex = filaDeDatos(rowIndex, 1);
+          return { rowIdx: nextRowIndex === -1 ? rowIndex : nextRowIndex, idx: currentColumnIndex };
         };
         const calcularFilaAnterior = () => {
-          let nextRowIndex = rowIndex;
-          nextRowIndex--;
-          if (nextRowIndex < 0) {
-            return { rowIdx: rowIndex, idx: currentColumnIndex };
-          }
-          return { rowIdx: nextRowIndex, idx: currentColumnIndex };
+          const nextRowIndex = filaDeDatos(rowIndex, -1);
+          return { rowIdx: nextRowIndex === -1 ? rowIndex : nextRowIndex, idx: currentColumnIndex };
         };
         if (currentEditableColumnIndex !== -1) {
           switch (true) {
@@ -1068,11 +1500,16 @@ var useGridEvents = ({ dataGridRef, tableDefinition, filteredRows, tableData, fi
               break;
             }
             case key === "F4": {
-              setSortColumns([]);
               const { rowIdx, idx } = calcularFilaSiguiente();
-              const previousRow = filteredRows[rowIndex - 1];
+              const indiceAnterior = filaDeDatos(rowIndex, -1);
+              const previousRow = indiceAnterior === -1 ? void 0 : filteredRows2[indiceAnterior];
               if (previousRow) {
-                handleCommit(previousRow[columnKey], true, true).then(() => hacerFoco({ rowIdx, idx }));
+                const pendiente = valoresF4Pendientes.current.get(`${indiceAnterior}|${columnKey}`);
+                const valorACopiar = pendiente && Date.now() - pendiente.cuando < VIGENCIA_VALOR_PENDIENTE_F4 ? pendiente.valor : previousRow[columnKey];
+                valoresF4Pendientes.current.set(`${rowIndex}|${columnKey}`, { valor: valorACopiar, cuando: Date.now() });
+                void handleCommit(valorACopiar, true, true);
+                editorActivo.current = null;
+                hacerFoco({ rowIdx, idx });
               }
               break;
             }
@@ -1082,8 +1519,17 @@ var useGridEvents = ({ dataGridRef, tableDefinition, filteredRows, tableData, fi
         }
       }
     }
-  }, [filteredRows, tableDefinition, tableData, dataGridRef]);
+  }, [dataGridRef]);
   const handleCellKeyDown = useCallback5((args, event) => {
+    if (event.key === "F4" && !(event.target instanceof HTMLInputElement) && !esFilaDetalle(args.row)) {
+      const fieldDefinition = tableDefinitionRef.current?.fields.find((f) => f.name === args.column.key);
+      if (fieldDefinition && fieldDefinition.editable !== false && !fieldDefinition.clientSide) {
+        if (editorActivo.current) editorActivo.current(event.key);
+        else teclasPendientes.current.push({ key: event.key, cuando: Date.now() });
+        event.preventGridDefault();
+        return;
+      }
+    }
     if (["Enter", "Tab", "ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft"].includes(event.key)) {
       event.preventGridDefault();
     }
@@ -1098,23 +1544,27 @@ var useGridEvents = ({ dataGridRef, tableDefinition, filteredRows, tableData, fi
     setSelectedCell(args);
   }, [setSelectedCell]);
   const handleCellClick = useCallback5((args, _event) => {
+    if (esFilaDetalle(args.row)) return;
     const fieldDefinition = tableDefinition?.fields.find((f) => f.name === args.column.key);
     const isFixedField = fixedFields?.some((f) => f.fieldName === args.column.key);
     const isEditable = fieldDefinition?.editable !== false && !isFixedField;
     if (isEditable) {
-      setSortColumns([]);
       args.selectCell(true);
     }
-  }, [tableDefinition, fixedFields, setSortColumns]);
+  }, [tableDefinition, fixedFields]);
   const handleRowsChange = useCallback5((updatedRows, data) => {
+    const reemplazos = /* @__PURE__ */ new Map();
     data.indexes.forEach((index) => {
       const oldRow = filteredRows[index];
       const newRow = updatedRows[index];
-      if (oldRow && newRow && oldRow[DOM_TEMP_ID] && !newRow[DOM_TEMP_ID]) {
+      if (!oldRow || !newRow || esFilaDetalle(oldRow)) return;
+      if (oldRow[DOM_TEMP_ID] && !newRow[DOM_TEMP_ID]) {
         newRow[DOM_TEMP_ID] = oldRow[DOM_TEMP_ID];
       }
+      reemplazos.set(oldRow, newRow);
     });
-    setTableData(updatedRows);
+    if (reemplazos.size === 0) return;
+    setTableData((prevData) => prevData.map((row) => reemplazos.get(row) ?? row));
   }, [setTableData, filteredRows]);
   return {
     handleCellMouseDown,
@@ -1122,33 +1572,42 @@ var useGridEvents = ({ dataGridRef, tableDefinition, filteredRows, tableData, fi
     handleCellClick,
     handleCellKeyDown,
     handleKeyPressInEditor,
+    registrarEditor,
     handleSelectedCellChange,
     handleRowsChange
   };
 };
 
 // src/hooks/grid/useGridLayout.ts
-import { useMemo as useMemo2 } from "react";
+import { useMemo as useMemo3 } from "react";
 var useGridLayout = ({
   filteredRows,
   isFilterRowVisible,
   tableData,
   summaryData,
   filters,
-  setFilters
+  setFilters,
+  altoDetalles = 0,
+  altoMinimoCuerpo = MIN_BODY_HEIGHT,
+  // 24 px de margen inferior de la caja que contiene la grilla + lo que ocupa una barra de scroll horizontal (que le quita
+  // alto a la grilla y, si no sobra lugar, hace aparecer una barra vertical aunque haya una sola fila)
+  holgura = 24 + 24,
+  filasVisiblesMax,
+  conPie = true
 }) => {
-  const gridHeight = useMemo2(() => {
+  const gridHeight = useMemo3(() => {
     const filterHeight2 = isFilterRowVisible ? FILTER_ROW_HEIGHT : 0;
-    let calculatedHeight = filteredRows.length * ROW_HEIGHT + HEADER_ROW_HEIGHT + filterHeight2 + SUMMARY_ROW_HEIGHT + 40;
+    const filasParaAlto = filasVisiblesMax === void 0 ? filteredRows.length : Math.min(filteredRows.length, filasVisiblesMax);
+    let calculatedHeight = filasParaAlto * ROW_HEIGHT + altoDetalles + HEADER_ROW_HEIGHT + filterHeight2 + (conPie ? SUMMARY_ROW_HEIGHT : 0) + holgura;
     if (tableData.length > 0 && filteredRows.length === 0 && isFilterRowVisible || tableData.length === 0) {
-      calculatedHeight = Math.max(calculatedHeight, MIN_BODY_HEIGHT) + filterHeight2;
+      calculatedHeight = Math.max(calculatedHeight, altoMinimoCuerpo) + filterHeight2;
     }
     return calculatedHeight;
-  }, [filteredRows.length, isFilterRowVisible, tableData.length]);
-  const bottomSummaryRow = useMemo2(() => {
-    return { id: "bottomSummaryRow", ...summaryData };
+  }, [filteredRows.length, isFilterRowVisible, tableData.length, altoDetalles, altoMinimoCuerpo, holgura, filasVisiblesMax, conPie]);
+  const bottomSummaryRow = useMemo3(() => {
+    return { id: "bottomSummaryRow", totales: summaryData };
   }, [summaryData]);
-  const summaryRows = useMemo2(() => {
+  const summaryRows = useMemo3(() => {
     if (!isFilterRowVisible) return void 0;
     return [{ id: "filterRow", filters, setFilters }];
   }, [isFilterRowVisible, filters, setFilters]);
@@ -1157,7 +1616,7 @@ var useGridLayout = ({
 };
 
 // src/hooks/grid/useGridMenu.ts
-import React2, { useMemo as useMemo3 } from "react";
+import React4, { useMemo as useMemo4 } from "react";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import ViewColumnIcon from "@mui/icons-material/ViewColumn";
 import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
@@ -1176,21 +1635,21 @@ var useGridMenu = ({
   triggerExport
 }) => {
   const { showSuccess, showError, showWarning } = useSnackbar();
-  const menuOptions = useMemo3(() => {
+  const menuOptions = useMemo4(() => {
     if (!tableDefinition) return [];
     const options = [];
     options.push({
       id: "refresh",
       label: "refrescar la grilla desde la base de datos",
-      icon: React2.createElement(RefreshIcon),
+      icon: React4.createElement(RefreshIcon),
       handler: async () => {
         try {
-          const data = await callApi("table_data", { table: tableName, fixedFields });
+          const data = requerido(await callApi("table_data", { table: tableName, fixedFields }), "los datos de la tabla");
           setTableData(data);
           if (resetSorting) resetSorting();
           showSuccess("Grilla refrescada correctamente");
         } catch (err) {
-          showError(`Error al refrescar: ${err.message || "Error desconocido"}`);
+          showError(`Error al refrescar: ${mensajeDeError(err, "Error desconocido")}`);
         }
       },
       visible: true
@@ -1198,7 +1657,7 @@ var useGridMenu = ({
     options.push({
       id: "showColumns",
       label: "mostrar las columnas relacionadas",
-      icon: React2.createElement(ViewColumnIcon),
+      icon: React4.createElement(ViewColumnIcon),
       handler: async () => {
         console.log("Mostrar columnas relacionadas");
       },
@@ -1207,7 +1666,7 @@ var useGridMenu = ({
     options.push({
       id: "hideColumns",
       label: "ocultar o mostrar columnas",
-      icon: React2.createElement(VisibilityOffIcon),
+      icon: React4.createElement(VisibilityOffIcon),
       handler: async () => {
         console.log("Ocultar/mostrar columnas");
       },
@@ -1217,7 +1676,7 @@ var useGridMenu = ({
       options.push({
         id: "export",
         label: "exportar",
-        icon: React2.createElement(FileDownloadIcon),
+        icon: React4.createElement(FileDownloadIcon),
         handler: async () => {
           if (triggerExport) triggerExport();
           else showWarning("La funcionalidad de exportaci\xF3n no est\xE1 disponible en este momento.");
@@ -1229,7 +1688,7 @@ var useGridMenu = ({
       options.push({
         id: "import",
         label: "importar (Excel/Tab)",
-        icon: React2.createElement(FileUploadIcon),
+        icon: React4.createElement(FileUploadIcon),
         handler: async () => {
           if (triggerImport) triggerImport();
           else showWarning("La funcionalidad de importaci\xF3n no est\xE1 disponible en este momento.");
@@ -1241,7 +1700,7 @@ var useGridMenu = ({
       options.push({
         id: "deleteAll",
         label: "borrar todos los registros",
-        icon: React2.createElement(DeleteSweepIcon),
+        icon: React4.createElement(DeleteSweepIcon),
         handler: async () => {
           showWarning("Esta operaci\xF3n eliminar\xE1 TODOS los registros de la tabla");
         },
@@ -1251,7 +1710,7 @@ var useGridMenu = ({
     options.push({
       id: "completeTable",
       label: "tabla completa y filtrada",
-      icon: React2.createElement(FilterAltIcon),
+      icon: React4.createElement(FilterAltIcon),
       handler: async () => {
         console.log("Toggle tabla completa/filtrada");
       },
@@ -1263,220 +1722,77 @@ var useGridMenu = ({
 };
 
 // src/hooks/grid/useGridColumns.ts
-import { useMemo as useMemo6 } from "react";
+import React9, { useMemo as useMemo7 } from "react";
 
 // src/utils/functions.tsx
 import * as JSON4all2 from "json4all";
+var cambiarGuionesBajosPorEspacios = (texto) => texto.replace(/_/g, " ");
 
-// src/store/index.ts
-import { configureStore, combineReducers } from "@reduxjs/toolkit";
-import {
-  persistStore,
-  persistReducer,
-  FLUSH,
-  REHYDRATE,
-  PAUSE,
-  PERSIST,
-  PURGE,
-  REGISTER
-} from "redux-persist";
-import storage from "redux-persist/lib/storage";
+// src/components/grid/renderers/headerCellRenderers.tsx
+import { Box as Box3, IconButton as IconButton2, Tooltip as Tooltip2, Typography as Typography2 } from "@mui/material";
+import SearchIcon from "@mui/icons-material/Search";
+import SearchOffIcon from "@mui/icons-material/SearchOff";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import AddIcon from "@mui/icons-material/Add";
 
-// src/store/clientContextSlice.ts
-import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
-var initialState = {
-  menu: [],
-  procedure: {},
-  procedures: [],
-  config: {},
-  // Inicializa con un objeto vacío o valores por defecto adecuados
-  useragent: {},
-  // Igual aquí
-  username: "",
-  status: "idle",
-  // Por defecto, sin carga
-  error: null
-  // Sin error
-};
-var fetchClientContext = createAsyncThunk(
-  "clientContext/fetchClientContext",
-  async (_, { rejectWithValue }) => {
-    try {
-      const setupResponse = await fetchApi("/client-setup", { method: "GET" });
-      if (!setupResponse.ok) {
-        const errorData = await setupResponse.text();
-        throw new Error(errorData || "Error al obtener configuraci\xF3n del cliente");
+// src/components/grid/estadoGrilla.ts
+import { createContext as createContext3, useContext as useContext3, useSyncExternalStore } from "react";
+function crearEstadoGrilla() {
+  let feedback = /* @__PURE__ */ new Map();
+  let cambiosLocales = /* @__PURE__ */ new Map();
+  const suscriptores = /* @__PURE__ */ new Set();
+  const avisar = () => suscriptores.forEach((alCambiar) => alCambiar());
+  return {
+    obtenerFeedback: () => feedback,
+    obtenerCambiosLocales: () => cambiosLocales,
+    setFeedback(actualizacion) {
+      const nuevo = typeof actualizacion === "function" ? actualizacion(feedback) : actualizacion;
+      if (nuevo !== feedback) {
+        feedback = nuevo;
+        avisar();
       }
-      const clientSetup = await setupResponse.json();
-      return clientSetup;
-    } catch (error) {
-      return rejectWithValue(error.message || "Error desconocido al cargar el contexto");
-    }
-  }
-);
-var clientContextSlice = createSlice({
-  name: "clientContext",
-  initialState,
-  reducers: {
-    // Un reducer para limpiar el contexto del cliente (ej. al cerrar sesión)
-    clearClientContext: (state) => {
-      Object.assign(state, initialState);
-    }
-    // Puedes añadir otros reducers aquí si necesitas modificar partes del clientContext directamente
-    // pero el thunk es la forma preferida para la carga inicial.
-  },
-  // **extraReducers maneja las acciones del thunk asíncrono**
-  extraReducers: (builder) => {
-    builder.addCase(fetchClientContext.pending, (state) => {
-      state.status = "loading";
-      state.error = null;
-    }).addCase(fetchClientContext.fulfilled, (state, action) => {
-      state.status = "succeeded";
-      state.menu = action.payload.menu;
-      state.procedure = action.payload.procedure;
-      state.procedures = action.payload.procedures;
-      state.config = action.payload.config;
-      state.useragent = action.payload.useragent;
-      state.username = action.payload.username;
-      state.error = null;
-    }).addCase(fetchClientContext.rejected, (state, action) => {
-      state.status = "failed";
-      state.error = action.payload || "Fallo al cargar el contexto del cliente";
-    });
-  }
-});
-var { clearClientContext } = clientContextSlice.actions;
-var clientContextSlice_default = clientContextSlice.reducer;
-
-// src/store/routerSlice.ts
-import { createSlice as createSlice2 } from "@reduxjs/toolkit";
-var initialState2 = {
-  currentPath: "/",
-  previousPath: null,
-  redirectPath: null
-  // <--- Inicializamos en null
-};
-var routerSlice = createSlice2({
-  name: "router",
-  initialState: initialState2,
-  reducers: {
-    setCurrentPath: (state, action) => {
-      state.previousPath = state.currentPath;
-      state.currentPath = action.payload;
-    },
-    setRedirectPath: (state, action) => {
-      state.redirectPath = action.payload;
-    },
-    resetRouterState: (state) => {
-      state.currentPath = "/";
-      state.previousPath = null;
-      state.redirectPath = null;
-    }
-  }
-});
-var { setCurrentPath, setRedirectPath, resetRouterState } = routerSlice.actions;
-var routerSlice_default = routerSlice.reducer;
-
-// src/store/menuUiSlice.ts
-import { createSlice as createSlice3 } from "@reduxjs/toolkit";
-var initialState3 = {
-  isDrawerOpen: false,
-  subMenuOpenStates: {}
-};
-var menuUiSlice = createSlice3({
-  name: "menuUi",
-  initialState: initialState3,
-  reducers: {
-    setDrawerOpen: (state, action) => {
-      state.isDrawerOpen = action.payload;
-    },
-    toggleDrawer: (state) => {
-      state.isDrawerOpen = !state.isDrawerOpen;
-    },
-    setSubMenuOpen: (state, action) => {
-      state.subMenuOpenStates[action.payload.menuName] = action.payload.isOpen;
     },
-    toggleSubMenu: (state, action) => {
-      state.subMenuOpenStates[action.payload] = !state.subMenuOpenStates[action.payload];
-    },
-    // --- NUEVO REDUCER: Establecer el estado de todos los submenús ---
-    setAllSubMenusOpen: (state, action) => {
-      for (const menuName in state.subMenuOpenStates) {
-        if (Object.prototype.hasOwnProperty.call(state.subMenuOpenStates, menuName)) {
-          state.subMenuOpenStates[menuName] = action.payload;
-        }
+    setCambiosLocales(actualizacion) {
+      const nuevo = typeof actualizacion === "function" ? actualizacion(cambiosLocales) : actualizacion;
+      if (nuevo !== cambiosLocales) {
+        cambiosLocales = nuevo;
+        avisar();
       }
     },
-    resetMenuUiState: (state) => {
-      Object.assign(state, initialState3);
+    suscribir(alCambiar) {
+      suscriptores.add(alCambiar);
+      return () => {
+        suscriptores.delete(alCambiar);
+      };
     }
+  };
+}
+var EstadoGrillaContext = createContext3(null);
+function useEstadoGrilla() {
+  const estado = useContext3(EstadoGrillaContext);
+  if (!estado) {
+    throw new Error("useEstadoGrilla debe usarse dentro de EstadoGrillaContext.Provider");
   }
-});
-var {
-  setDrawerOpen,
-  toggleDrawer,
-  setSubMenuOpen,
-  toggleSubMenu,
-  setAllSubMenusOpen,
-  // ¡Exportamos la nueva acción!
-  resetMenuUiState
-} = menuUiSlice.actions;
-var menuUiSlice_default = menuUiSlice.reducer;
-
-// src/store/index.ts
-import { useDispatch, useSelector } from "react-redux";
-var rootReducer = combineReducers({
-  clientContext: clientContextSlice_default,
-  router: routerSlice_default,
-  menuUi: menuUiSlice_default
-  // ...otros slices
-});
-var persistConfig = {
-  key: "root",
-  storage,
-  whitelist: ["clientContext", "router", "menuUi"]
-};
-var persistedReducer = persistReducer(persistConfig, rootReducer);
-var store = configureStore({
-  reducer: persistedReducer,
-  middleware: (getDefaultMiddleware) => getDefaultMiddleware({
-    serializableCheck: {
-      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER]
-    }
-  })
-});
-var persistor = persistStore(store);
-var useAppDispatch = useDispatch;
-var useAppSelector = useSelector;
-var useClientContextStatus = () => {
-  return useAppSelector((state) => state.clientContext.status);
-};
-var useIsDrawerOpen = () => {
-  return useAppSelector((state) => state.menuUi.isDrawerOpen);
-};
-var useSubMenuOpenState = (menuName) => {
-  return useAppSelector((state) => state.menuUi.subMenuOpenStates[menuName] || false);
-};
-var useRedirectPath = () => {
-  return useAppSelector((state) => state.router.redirectPath);
-};
-
-// src/utils/functions.tsx
-var cambiarGuionesBajosPorEspacios = (texto) => texto.replace(/_/g, " ");
+  return estado;
+}
+function useFeedbackCelda(cellKey) {
+  const estado = useEstadoGrilla();
+  return useSyncExternalStore(estado.suscribir, () => estado.obtenerFeedback().get(cellKey));
+}
+function useCeldaPendiente(rowId, columnKey) {
+  const estado = useEstadoGrilla();
+  return useSyncExternalStore(estado.suscribir, () => estado.obtenerCambiosLocales().get(rowId)?.has(columnKey) ?? false);
+}
+var VistaGrillaContext = createContext3({ isFilterRowVisible: false });
+var useVistaGrilla = () => useContext3(VistaGrillaContext);
 
-// src/components/grid/renderers/headerCellRenderers.tsx
-import { Box as Box2, IconButton, Tooltip, Typography } from "@mui/material";
-import SearchIcon from "@mui/icons-material/Search";
-import SearchOffIcon from "@mui/icons-material/SearchOff";
-import MoreVertIcon from "@mui/icons-material/MoreVert";
-import AddIcon from "@mui/icons-material/Add";
-import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+// src/components/grid/renderers/headerCellRenderers.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 var defaultColumnHeaderCellRenderer = (props, fieldDef) => {
-  const { column, sortColumns } = props;
+  const { column, sortDirection, priority } = props;
   const isPrimaryKey = fieldDef.isPk;
-  const sortIndex = sortColumns?.findIndex((s) => s.columnKey === column.key);
-  const sorted = sortIndex !== void 0 && sortIndex !== -1;
-  const sortColumn = sorted ? sortColumns[sortIndex] : null;
+  const sorted = sortDirection !== void 0;
+  const sortIndex = (priority ?? 1) - 1;
   const getSortColor = (index) => {
     if (index === 0) return "#000000";
     if (index === 1) return "#555555";
@@ -1484,8 +1800,8 @@ var defaultColumnHeaderCellRenderer = (props, fieldDef) => {
     return "#AAAAAA";
   };
   const sortColor = sorted ? getSortColor(sortIndex) : "transparent";
-  return /* @__PURE__ */ jsxs4(
-    Box2,
+  return /* @__PURE__ */ jsxs5(
+    Box3,
     {
       sx: {
         display: "flex",
@@ -1497,8 +1813,8 @@ var defaultColumnHeaderCellRenderer = (props, fieldDef) => {
         width: "100%"
       },
       children: [
-        /* @__PURE__ */ jsx4(
-          Typography,
+        /* @__PURE__ */ jsx6(
+          Typography2,
           {
             variant: "body2",
             sx: {
@@ -1514,55 +1830,61 @@ var defaultColumnHeaderCellRenderer = (props, fieldDef) => {
             children: column.name
           }
         ),
-        sorted && /* @__PURE__ */ jsx4(Box2, { sx: { color: sortColor, display: "flex", alignItems: "center", ml: 0.5, fontSize: "0.7rem" }, children: sortColumn?.direction === "ASC" ? "\u25B2" : "\u25BC" })
+        sorted && /* @__PURE__ */ jsx6(Box3, { sx: { color: sortColor, display: "flex", alignItems: "center", ml: 0.5, fontSize: "0.7rem" }, children: sortDirection === "ASC" ? "\u25B2" : "\u25BC" })
       ]
     }
   );
 };
-var actionsColumnHeaderCellRenderer = (props, isFilterRowVisible, toggleFilterVisibility, handleDataGridOptions, handleAddRow, allowInsert) => {
-  return /* @__PURE__ */ jsxs4(Box2, { sx: { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 0.2 }, children: [
-    allowInsert && /* @__PURE__ */ jsx4(
-      IconButton,
+var ActionsColumnHeaderCell = ({
+  toggleFilterVisibility,
+  handleDataGridOptions,
+  handleAddRow,
+  allowInsert
+}) => {
+  const { isFilterRowVisible } = useVistaGrilla();
+  return /* @__PURE__ */ jsxs5(Box3, { sx: { display: "flex", flexDirection: "row", alignItems: "center", justifyContent: "center", gap: 0.2 }, children: [
+    allowInsert && /* @__PURE__ */ jsx6(
+      IconButton2,
       {
         color: "inherit",
-        onClick: handleAddRow,
+        onClick: () => handleAddRow(),
         size: "small",
         title: "A\xF1adir registro",
         sx: { p: 0.25 },
-        children: /* @__PURE__ */ jsx4(AddIcon, { sx: { fontSize: 18, color: "success.main" } })
+        children: /* @__PURE__ */ jsx6(AddIcon, { sx: { fontSize: 18, color: "success.main" } })
       }
     ),
-    /* @__PURE__ */ jsx4(
-      IconButton,
+    /* @__PURE__ */ jsx6(
+      IconButton2,
       {
         color: "inherit",
         onClick: toggleFilterVisibility,
         size: "small",
         title: isFilterRowVisible ? "Ocultar filtros" : "Mostrar filtros",
         sx: { p: 0.25 },
-        children: isFilterRowVisible ? /* @__PURE__ */ jsx4(SearchOffIcon, { sx: { fontSize: 18 } }) : /* @__PURE__ */ jsx4(SearchIcon, { sx: { fontSize: 18 } })
+        children: isFilterRowVisible ? /* @__PURE__ */ jsx6(SearchOffIcon, { sx: { fontSize: 18 } }) : /* @__PURE__ */ jsx6(SearchIcon, { sx: { fontSize: 18 } })
       }
     ),
-    /* @__PURE__ */ jsx4(
-      IconButton,
+    /* @__PURE__ */ jsx6(
+      IconButton2,
       {
         onClick: (event) => handleDataGridOptions(event),
         size: "small",
         title: "Opciones de esta tabla",
         sx: { p: 0.25 },
-        children: /* @__PURE__ */ jsx4(MoreVertIcon, { sx: { fontSize: 20, variant: "filled", size: "small" } })
+        children: /* @__PURE__ */ jsx6(MoreVertIcon, { sx: { fontSize: 20, variant: "filled", size: "small" } })
       }
     )
   ] });
 };
-var detailColumnCellHeaderRenderer = (props, detailTable) => /* @__PURE__ */ jsx4(Tooltip, { title: detailTable.label, children: /* @__PURE__ */ jsx4(Typography, { variant: "caption", sx: { fontSize: "0.75rem", fontWeight: "bold" }, children: detailTable.abr.toUpperCase() }) });
+var detailColumnCellHeaderRenderer = (props, detailTable) => /* @__PURE__ */ jsx6(Tooltip2, { title: detailTable.label, children: /* @__PURE__ */ jsx6(Typography2, { variant: "caption", sx: { fontSize: "0.75rem", fontWeight: "bold" }, children: detailTable.abr.toUpperCase() }) });
 
 // src/components/grid/FilterInputRender.tsx
-import { InputBase, Box as Box3 } from "@mui/material";
-import React4 from "react";
+import { InputBase, Box as Box4 } from "@mui/material";
+import React6 from "react";
 
 // src/components/forms/TypedField.tsx
-import { useState as useState7, useEffect as useEffect2, useMemo as useMemo4, useCallback as useCallback7 } from "react";
+import { useState as useState7, useEffect as useEffect3, useMemo as useMemo5, useCallback as useCallback7 } from "react";
 import {
   TextField,
   FormControl,
@@ -1573,12 +1895,12 @@ import {
   InputAdornment,
   useTheme
 } from "@mui/material";
-import typeStore2 from "type-store";
-import { useRef } from "react";
-import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+import typeStore3 from "type-store";
+import { useRef as useRef4 } from "react";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 var TypedField = ({ fieldDef, value, onChange, onCommit, disabled, isFilterMode = false, feedback, isMandatory = false }) => {
   const theme = useTheme();
-  const typer = useMemo4(() => typeStore2.typerFrom(fieldDef), [fieldDef]);
+  const typer = useMemo5(() => typeStore3.typerFrom(fieldDef), [fieldDef]);
   const isBoolean = fieldDef.typeName === "boolean";
   const [localString, setLocalString] = useState7(() => {
     if (isBoolean) return "";
@@ -1590,9 +1912,9 @@ var TypedField = ({ fieldDef, value, onChange, onCommit, disabled, isFilterMode
     }
   });
   const [errorMsg, setErrorMsg] = useState7(null);
-  const lastValueRef = useRef(value);
-  const lastCommittedStringRef = useRef(localString);
-  useEffect2(() => {
+  const lastValueRef = useRef4(value);
+  const lastCommittedStringRef = useRef4(localString);
+  useEffect3(() => {
     if (!isBoolean) {
       if (value !== lastValueRef.current) {
         lastValueRef.current = value;
@@ -1623,7 +1945,7 @@ var TypedField = ({ fieldDef, value, onChange, onCommit, disabled, isFilterMode
         typer.validateTypedData(parsedValue);
       } catch (err) {
         isValid = false;
-        pErrorMsg = err.message;
+        pErrorMsg = mensajeDeError(err);
       }
     }
     setErrorMsg(pErrorMsg);
@@ -1682,28 +2004,28 @@ var TypedField = ({ fieldDef, value, onChange, onCommit, disabled, isFilterMode
     }
     const cellBackgroundColor2 = feedback === "error" ? theme.palette.error.light : feedback === "success" ? theme.palette.success.light : defaultBgColor;
     const transitionStyle2 = "background-color 0.3s ease-in-out";
-    return /* @__PURE__ */ jsxs5(FormControl, { fullWidth: true, error: !!errorMsg && !isFilterMode, disabled: isDisabled, size: "small", margin: "dense", children: [
-      !isFilterMode && /* @__PURE__ */ jsx5(InputLabel, { shrink: true, children: fieldDef.name }),
-      /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6(FormControl, { fullWidth: true, error: !!errorMsg && !isFilterMode, disabled: isDisabled, size: "small", margin: "dense", children: [
+      !isFilterMode && /* @__PURE__ */ jsx7(InputLabel, { shrink: true, children: fieldDef.name }),
+      /* @__PURE__ */ jsxs6(
         Select,
         {
           value: boolVal,
           label: !isFilterMode ? fieldDef.name : void 0,
           onChange: handleBooleanChange,
-          startAdornment: isMandatory && isEmpty && !isFilterMode ? /* @__PURE__ */ jsx5(InputAdornment, { position: "start", sx: { color: "text.secondary", ml: 0.5 }, children: "*" }) : void 0,
+          startAdornment: isMandatory && isEmpty && !isFilterMode ? /* @__PURE__ */ jsx7(InputAdornment, { position: "start", sx: { color: "text.secondary", ml: 0.5 }, children: "*" }) : void 0,
           displayEmpty: true,
           sx: isFilterMode ? { height: 25, fontSize: "0.8rem", backgroundColor: "background.paper" } : {
             backgroundColor: cellBackgroundColor2,
             transition: transitionStyle2
           },
           children: [
-            fieldDef.nullable !== false && /* @__PURE__ */ jsx5(MenuItem, { value: "", children: /* @__PURE__ */ jsx5("em", { children: "Nulo / Sin Especificar" }) }),
-            /* @__PURE__ */ jsx5(MenuItem, { value: "true", children: "S\xED (Verdadero)" }),
-            /* @__PURE__ */ jsx5(MenuItem, { value: "false", children: "No (Falso)" })
+            fieldDef.nullable !== false && /* @__PURE__ */ jsx7(MenuItem, { value: "", children: /* @__PURE__ */ jsx7("em", { children: "Nulo / Sin Especificar" }) }),
+            /* @__PURE__ */ jsx7(MenuItem, { value: "true", children: "S\xED (Verdadero)" }),
+            /* @__PURE__ */ jsx7(MenuItem, { value: "false", children: "No (Falso)" })
           ]
         }
       ),
-      errorMsg && !isFilterMode && /* @__PURE__ */ jsx5(FormHelperText, { children: errorMsg })
+      errorMsg && !isFilterMode && /* @__PURE__ */ jsx7(FormHelperText, { children: errorMsg })
     ] });
   }
   let inputType = "text";
@@ -1717,7 +2039,7 @@ var TypedField = ({ fieldDef, value, onChange, onCommit, disabled, isFilterMode
   }
   const cellBackgroundColor = feedback === "error" ? theme.palette.error.light : feedback === "success" ? theme.palette.success.light : defaultTextBgColor;
   const transitionStyle = "background-color 0.3s ease-in-out";
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx7(
     TextField,
     {
       fullWidth: true,
@@ -1733,7 +2055,7 @@ var TypedField = ({ fieldDef, value, onChange, onCommit, disabled, isFilterMode
       helperText: !isFilterMode ? errorMsg || (isMandatory ? "Obligatorio" : "") : void 0,
       InputLabelProps: !isFilterMode ? { shrink: true } : void 0,
       InputProps: !isFilterMode && isMandatory && isEmptyText ? {
-        startAdornment: /* @__PURE__ */ jsx5(InputAdornment, { position: "start", sx: { color: "text.secondary", mr: 0.5 }, children: "*" })
+        startAdornment: /* @__PURE__ */ jsx7(InputAdornment, { position: "start", sx: { color: "text.secondary", mr: 0.5 }, children: "*" })
       } : {},
       inputProps: {
         style: {
@@ -1764,7 +2086,7 @@ var TypedField = ({ fieldDef, value, onChange, onCommit, disabled, isFilterMode
 };
 
 // src/components/grid/FilterInputRender.tsx
-import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
 function FilterInputRenderer({
   columnKey,
   currentFilter,
@@ -1787,8 +2109,8 @@ function FilterInputRenderer({
         [columnKey]: { operator: newOp, value: formattedVal }
       }));
     };
-    return /* @__PURE__ */ jsxs6(Box3, { sx: { mt: 0, display: "flex", alignItems: "center", gap: 0.5, pr: 1 }, children: [
-      /* @__PURE__ */ jsx6(
+    return /* @__PURE__ */ jsxs7(Box4, { sx: { mt: 0, display: "flex", alignItems: "center", gap: 0.5, pr: 1 }, children: [
+      /* @__PURE__ */ jsx8(
         "select",
         {
           value: operator,
@@ -1804,10 +2126,10 @@ function FilterInputRenderer({
             textAlign: "center",
             cursor: "pointer"
           },
-          children: filterOperators.map((op) => /* @__PURE__ */ jsx6("option", { value: op.value, children: op.label }, op.value))
+          children: filterOperators.map((op) => /* @__PURE__ */ jsx8("option", { value: op.value, children: op.label }, op.value))
         }
       ),
-      /* @__PURE__ */ jsx6(
+      /* @__PURE__ */ jsx8(
         TypedField,
         {
           fieldDef,
@@ -1818,7 +2140,7 @@ function FilterInputRenderer({
       )
     ] });
   }
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx8(
     InputBase,
     {
       value: currentFilter || "",
@@ -1841,19 +2163,19 @@ function FilterInputRenderer({
     }
   );
 }
-var FilterInputRender_default = React4.memo(FilterInputRenderer);
+var FilterInputRender_default = React6.memo(FilterInputRenderer);
 
 // src/components/grid/renderers/summaryCellRenderers.tsx
-import { Box as Box4 } from "@mui/material";
-import { jsx as jsx7, jsxs as jsxs7 } from "react/jsx-runtime";
-var defaultColumnSummaryCellRenderer = (props, fixedFields, isFilterRowVisible) => {
+import { Box as Box5 } from "@mui/material";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+var defaultColumnSummaryCellRenderer = (props, fixedFields) => {
   const { column, row } = props;
   if (row.id === "filterRow") {
     const { filters, setFilters } = row;
     const fixedFieldEntry = fixedFields?.find((f) => f.fieldName === column.key);
-    if (fixedFieldEntry && fixedFieldEntry.until === void 0 || !isFilterRowVisible) return null;
-    const fieldDef = column.fieldDef;
-    return /* @__PURE__ */ jsx7(Box4, { sx: { width: "100%", height: "100%", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx7(
+    if (fixedFieldEntry && fixedFieldEntry.until === void 0) return null;
+    const fieldDef = esColumnaPropia(column) && column.customType === "default" ? column.fieldDef : void 0;
+    return /* @__PURE__ */ jsx9(Box5, { sx: { width: "100%", height: "100%", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx9(
       FilterInputRender_default,
       {
         columnKey: column.key,
@@ -1863,8 +2185,8 @@ var defaultColumnSummaryCellRenderer = (props, fixedFields, isFilterRowVisible)
       }
     ) });
   }
-  const summaryData = row[column.key];
-  if (!summaryData || typeof summaryData !== "object") return null;
+  const summaryData = row.totales[column.key];
+  if (!summaryData) return null;
   const { type, value } = summaryData;
   let label = "";
   let formattedValue = value;
@@ -1895,7 +2217,7 @@ var defaultColumnSummaryCellRenderer = (props, fixedFields, isFilterRowVisible)
       label = "Cant S\xED: ";
       break;
   }
-  return /* @__PURE__ */ jsxs7(Box4, { sx: {
+  return /* @__PURE__ */ jsxs8(Box5, { sx: {
     px: 0,
     fontWeight: "bold",
     fontSize: "0.875rem",
@@ -1909,40 +2231,40 @@ var defaultColumnSummaryCellRenderer = (props, fixedFields, isFilterRowVisible)
     formattedValue
   ] });
 };
-var actionsColumnSummaryCellRenderer = (props) => null;
-var detailColumnCellSummaryRenderer = (props) => null;
+var actionsColumnSummaryCellRenderer = (_props) => null;
+var detailColumnCellSummaryRenderer = (_props) => null;
 
 // src/components/grid/renderers/cellRenderers.tsx
-import { Box as Box7, Button as Button2, IconButton as IconButton2, Tooltip as Tooltip3, Typography as Typography4, useTheme as useTheme2 } from "@mui/material";
-import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
+import React7 from "react";
+import { Box as Box8, Button as Button2, Tooltip as Tooltip4, useTheme as useTheme2 } from "@mui/material";
 import ViewHeadlineIcon from "@mui/icons-material/ViewHeadline";
 import DeleteIcon from "@mui/icons-material/Delete";
 import AddIcon2 from "@mui/icons-material/Add";
 
 // src/components/grid/ExampleClientSideComponent.tsx
-import { Box as Box5, Typography as Typography2 } from "@mui/material";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { Box as Box6, Typography as Typography3 } from "@mui/material";
+import { jsx as jsx10 } from "react/jsx-runtime";
 var ExampleClientSideComponent = ({ row, column, fieldDefinition }) => {
   const value = row[column.key];
-  return /* @__PURE__ */ jsx8(Box5, { sx: {
+  return /* @__PURE__ */ jsx10(Box6, { sx: {
     padding: 0.5,
     width: "100%",
     height: "100%",
     display: "flex",
     alignItems: "center",
     backgroundColor: value === "Special" ? "lightblue" : "transparent"
-  }, children: /* @__PURE__ */ jsx8(Typography2, { variant: "body2", sx: { fontWeight: "bold" }, children: value ? `CS: ${value}` : "N/A" }) });
+  }, children: /* @__PURE__ */ jsx10(Typography3, { variant: "body2", sx: { fontWeight: "bold" }, children: value ? `CS: ${value}` : "N/A" }) });
 };
 var ExampleClientSideComponent_default = ExampleClientSideComponent;
 
 // src/components/grid/FallbackClientSideRenderer.tsx
-import { Box as Box6, Typography as Typography3, Tooltip as Tooltip2 } from "@mui/material";
-import WarningAmberIcon from "@mui/icons-material/WarningAmber";
-import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+import { Box as Box7, Typography as Typography4, Tooltip as Tooltip3 } from "@mui/material";
+import WarningAmberIcon2 from "@mui/icons-material/WarningAmber";
+import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 var FallbackClientSideRenderer = ({ column, row, fieldDefinition }) => {
   const clientSideName = fieldDefinition?.clientSide || "Desconocido";
-  return /* @__PURE__ */ jsx9(Tooltip2, { title: `Componente clientSide '${clientSideName}' no implementado. Mostrando valor por defecto.`, children: /* @__PURE__ */ jsxs8(
-    Box6,
+  return /* @__PURE__ */ jsx11(Tooltip3, { title: `Componente clientSide '${clientSideName}' no implementado. Mostrando valor por defecto.`, children: /* @__PURE__ */ jsxs9(
+    Box7,
     {
       sx: {
         display: "flex",
@@ -1962,9 +2284,9 @@ var FallbackClientSideRenderer = ({ column, row, fieldDefinition }) => {
         // Evita que el contenido se desborde
       },
       children: [
-        /* @__PURE__ */ jsx9(Typography3, { variant: "body2", noWrap: true, sx: { flexGrow: 1 }, children: clientSideName + " not found" }),
-        /* @__PURE__ */ jsx9(
-          WarningAmberIcon,
+        /* @__PURE__ */ jsx11(Typography4, { variant: "body2", noWrap: true, sx: { flexGrow: 1 }, children: clientSideName + " not found" }),
+        /* @__PURE__ */ jsx11(
+          WarningAmberIcon2,
           {
             sx: {
               fontSize: 18,
@@ -1991,91 +2313,71 @@ var extendClientSides = (newRenderers) => {
 };
 
 // src/components/grid/renderers/cellRenderers.tsx
-import typeStore3 from "type-store";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var allColumnsCellRenderer = (props, onOpenDetail, ancestors = [], currentFixedFields = []) => {
+import { jsx as jsx12 } from "react/jsx-runtime";
+var CeldaDato = React7.memo(function CeldaDato2({ row, columnKey, defaultColumn }) {
   const theme = useTheme2();
-  const column = props.column;
-  const { row } = props;
+  const { primaryKey, fixedFields, typer, isMandatory, isNumeric } = defaultColumn;
+  const rowId = getPrimaryKeyValues(row, primaryKey);
+  const currentCellFeedback = useFeedbackCelda(`${rowId}-${columnKey}`);
+  const pendiente = useCeldaPendiente(rowId, columnKey);
+  const value = row[columnKey];
+  const hasValue = value !== null && value !== void 0 && String(value).trim() !== "";
+  let cellBackgroundColor = "transparent";
+  if (currentCellFeedback) {
+    cellBackgroundColor = currentCellFeedback.type === "error" ? theme.palette.error.light : theme.palette.success.light;
+  } else if (fixedFields?.some((f) => f.fieldName === columnKey)) {
+    cellBackgroundColor = theme.palette.action.selected;
+  } else if (isMandatory && !hasValue || pendiente) {
+    cellBackgroundColor = "#e3f2fd";
+  }
+  let displayValue = value !== null && value !== void 0 ? typer.toLocalString(value) : "";
+  if (!hasValue && isMandatory) {
+    displayValue = "* " + displayValue;
+  }
+  const signal = displayValue === "--" ? "typed-controls-signal-no-data" : displayValue === "//" ? "typed-controls-signal-unknown-data" : "";
+  const celda = /* @__PURE__ */ jsx12(
+    "div",
+    {
+      className: `fpr-celda ${isNumeric ? "fpr-celda-numerica" : ""} ${signal} ${row[NEW_ROW_INDICATOR] ? "new-row-cell-animation" : ""}`,
+      style: { backgroundColor: cellBackgroundColor },
+      children: displayValue
+    }
+  );
+  return currentCellFeedback?.message ? /* @__PURE__ */ jsx12(Tooltip4, { title: currentCellFeedback.message, children: celda }) : celda;
+});
+var allColumnsCellRenderer = (props) => {
+  const { row, column } = props;
+  if (!esColumnaPropia(column)) return void 0;
+  if (esFilaDetalle(row)) {
+    return column.customType === "action" ? /* @__PURE__ */ jsx12(CeldaDetalle, { fila: row }) : null;
+  }
   switch (column.customType) {
     case "default": {
       const defaultColumn = column;
-      const { fieldDef, tableDefinition, primaryKey, cellFeedbackMap, fixedFields, localCellChanges } = defaultColumn;
-      const rowId = getPrimaryKeyValues(row, primaryKey);
-      const cellKey = `${rowId}-${props.column.key}`;
-      const currentCellFeedback = cellFeedbackMap.get(cellKey);
+      const { fieldDef, tableDefinition, primaryKey } = defaultColumn;
       if (fieldDef?.clientSide) {
         const ClientSideComponent = clientSides[fieldDef.clientSide];
         if (ClientSideComponent) {
-          return /* @__PURE__ */ jsx10(ClientSideComponent, { ...props, fieldDefinition: fieldDef, tableDefinition, primaryKey });
-        }
-        return /* @__PURE__ */ jsx10(FallbackClientSideRenderer_default, { ...props, fieldDefinition: fieldDef, tableDefinition, primaryKey });
-      }
-      let cellBackgroundColor = "transparent";
-      const isMandatory = tableDefinition.primaryKey.includes(props.column.key) || tableDefinition.fields.find((f) => f.name === props.column.key)?.nullable === false;
-      const hasValue = row[props.column.key] !== null && row[props.column.key] !== void 0 && String(row[props.column.key]).trim() !== "";
-      if (currentCellFeedback) {
-        cellBackgroundColor = currentCellFeedback.type === "error" ? theme.palette.error.light : theme.palette.success.light;
-      } else {
-        const isNewRowLocalCheck = row[NEW_ROW_INDICATOR2];
-        const isFixedFieldCurrent = fixedFields?.some((f) => f.fieldName === props.column.key);
-        if (isFixedFieldCurrent) {
-          cellBackgroundColor = theme.palette.action.selected;
-        } else if (isMandatory && !hasValue || localCellChanges.has(rowId) && localCellChanges.get(rowId)?.has(props.column.key)) {
-          cellBackgroundColor = "#e3f2fd";
+          return /* @__PURE__ */ jsx12(ClientSideComponent, { ...props, fieldDefinition: fieldDef, tableDefinition, primaryKey });
         }
+        return /* @__PURE__ */ jsx12(FallbackClientSideRenderer_default, { ...props, fieldDefinition: fieldDef, tableDefinition, primaryKey });
       }
-      const value = row[props.column.key];
-      const typer = typeStore3.typerFrom(fieldDef);
-      let displayValue = value !== null ? typer.toLocalString(value) : "";
-      const isNumeric = isNumericType(fieldDef?.typeName);
-      if (!hasValue && isMandatory) {
-        displayValue = "* " + displayValue;
-      }
-      return /* @__PURE__ */ jsx10(Tooltip3, { title: currentCellFeedback?.message || "", children: /* @__PURE__ */ jsx10(
-        Box7,
-        {
-          className: `${displayValue === "--" ? "typed-controls-signal-no-data" : displayValue === "//" ? "typed-controls-signal-unknown-data" : ""} ${row[NEW_ROW_INDICATOR2] ? "new-row-cell-animation" : ""}`,
-          sx: { position: "absolute", top: 0, left: 0, width: "100%", height: "100%", backgroundColor: cellBackgroundColor, transition: "background-color 0.3s ease-in-out", display: "flex", alignItems: "center", justifyContent: isNumeric ? "flex-end" : "flex-start", paddingLeft: "8px", paddingRight: "12px", boxSizing: "border-box" },
-          children: /* @__PURE__ */ jsx10(Typography4, { variant: "body2", sx: { fontSize: "0.875rem", whiteSpace: "nowrap" }, children: displayValue })
-        }
-      ) });
+      return /* @__PURE__ */ jsx12(CeldaDato, { row, columnKey: props.column.key, defaultColumn });
     }
     case "detail": {
-      const detailColumn = column;
-      const { detailTable, primaryKey, tableData, setTableData, detailKey, tableDefinition } = detailColumn;
-      return /* @__PURE__ */ jsx10(Tooltip3, { title: detailTable.label, children: /* @__PURE__ */ jsx10(Box7, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%" }, children: /* @__PURE__ */ jsx10(
-        IconButton2,
+      const { detailTable, primaryKey } = column;
+      return /* @__PURE__ */ jsx12(
+        BotonDetalle,
         {
-          onClick: () => {
-            if (detailTable && onOpenDetail) {
-              const detailFixedFields = detailTable.fields.map((f) => {
-                if (typeof f === "string") return { fieldName: f, value: row[f] };
-                if ("source" in f) return { fieldName: f.target, value: row[f.source] };
-                return { fieldName: f.target, value: f.value };
-              });
-              const rawFixedFields = [...currentFixedFields, ...detailFixedFields];
-              const deduplicatedMap = /* @__PURE__ */ new Map();
-              rawFixedFields.forEach((ff) => deduplicatedMap.set(ff.fieldName, ff));
-              const allFixedFields = Array.from(deduplicatedMap.values());
-              const filterDescription = allFixedFields.map((ff) => `${cambiarGuionesBajosPorEspacios(ff.fieldName)}: ${ff.value}`).join(", ");
-              const label = `${cambiarGuionesBajosPorEspacios(detailTable.table).toUpperCase()} (${filterDescription})`;
-              const newAncestors = [...ancestors, {
-                tableName: tableDefinition.name,
-                row,
-                tableDefinition,
-                fixedFields: allFixedFields
-              }];
-              onOpenDetail(detailTable.table, allFixedFields, label, newAncestors);
-            }
-          },
-          children: /* @__PURE__ */ jsx10(KeyboardArrowRightIcon, {})
+          row,
+          rowId: getPrimaryKeyValues(row, primaryKey),
+          detailTable,
+          deshabilitado: !!row[NEW_ROW_INDICATOR]
         }
-      ) }) });
+      );
     }
     case "action": {
-      const actionColumn = column;
-      const { tableDefinition, handleDeleteRow, handleAddRow, handleVerticalEditRow } = actionColumn;
+      const { tableDefinition, handleDeleteRow, handleAddRow, handleVerticalEditRow } = column;
       const gridActionButtons = [
         {
           action: "insert",
@@ -2099,7 +2401,7 @@ var allColumnsCellRenderer = (props, onOpenDetail, ancestors = [], currentFixedF
           color: "primary"
         }
       ];
-      return /* @__PURE__ */ jsx10(Box7, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", gap: 0.5 }, children: gridActionButtons.map((actionDef) => tableDefinition.allow[actionDef.action] ? /* @__PURE__ */ jsx10(
+      return /* @__PURE__ */ jsx12(Box8, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100%", gap: 0.5 }, children: gridActionButtons.map((actionDef) => tableDefinition.allow[actionDef.action] ? /* @__PURE__ */ jsx12(
         Button2,
         {
           variant: "outlined",
@@ -2108,7 +2410,7 @@ var allColumnsCellRenderer = (props, onOpenDetail, ancestors = [], currentFixedF
           onClick: () => actionDef.handler(row),
           title: actionDef.title,
           sx: { width: 22, minWidth: 22, height: 22, "& .MuiButton-startIcon": { m: 0 } },
-          children: /* @__PURE__ */ jsx10(actionDef.icon, { sx: { fontSize: 18 } })
+          children: /* @__PURE__ */ jsx12(actionDef.icon, { sx: { fontSize: 18 } })
         },
         actionDef.action
       ) : null) });
@@ -2119,7 +2421,7 @@ var allColumnsCellRenderer = (props, onOpenDetail, ancestors = [], currentFixedF
 };
 
 // src/components/grid/InputRenderer.tsx
-import React5, { useCallback as useCallback9, useMemo as useMemo5, useState as useState8 } from "react";
+import React8, { useCallback as useCallback9, useEffect as useEffect4, useMemo as useMemo6, useState as useState8 } from "react";
 
 // src/hooks/useTableRecordSave.ts
 import { useCallback as useCallback8 } from "react";
@@ -2167,16 +2469,16 @@ var useTableRecordSave = () => {
       oldRow: isNewRow ? {} : initialData,
       status
     });
-    return response;
+    return requerido(response, "la respuesta del guardado");
   }, [callApi]);
   return { saveRecord, loading, error };
 };
 
 // src/components/grid/InputRenderer.tsx
 import InputBase2 from "@mui/material/InputBase";
-import { useTheme as useTheme3 } from "@mui/material";
+import { Tooltip as Tooltip5, useTheme as useTheme3 } from "@mui/material";
 import typeStore4 from "type-store";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 function findChangedValues(oldRowData, newRowData, isNewRow) {
   let changes = [];
   for (const key in newRowData) {
@@ -2193,27 +2495,25 @@ function InputRenderer({
   tableDefinition,
   onRowChange,
   onClose,
-  cellFeedbackMap,
-  // Tipo: CellFeedbackMap
-  setCellFeedbackMap,
-  // Tipo: Dispatch<SetStateAction<CellFeedbackMap>>
   onKeyPress,
+  registrarEditor,
   setTableData,
-  setLocalCellChanges,
-  localCellChanges,
   primaryKey
 }) {
-  const fieldDefinition = tableDefinition.fields.find((f) => f.name === column.key);
-  const typer = useMemo5(() => typeStore4.typerFrom(fieldDefinition), [fieldDefinition]);
+  const estadoGrilla = useEstadoGrilla();
+  const setCellFeedbackMap = estadoGrilla.setFeedback;
+  const setLocalCellChanges = estadoGrilla.setCambiosLocales;
+  const fieldDefinition = requerido(tableDefinition.fields.find((f) => f.name === column.key), `el campo '${column.key}'`);
+  const typer = useMemo6(() => typeStore4.typerFrom(fieldDefinition), [fieldDefinition]);
   const [editingValue, setEditingValue] = useState8(() => row[column.key] !== null ? isNumericType(fieldDefinition?.typeName) ? row[column.key] : typer.toLocalString(row[column.key]) : null);
-  const isCommitInProgress = React5.useRef(false);
+  const isCommitInProgress = React8.useRef(false);
   const theme = useTheme3();
   const { showSuccess, showError } = useSnackbar();
   const { saveRecord } = useTableRecordSave();
   const tableName = tableDefinition.tableName;
   const rowId = getPrimaryKeyValues(row, primaryKey);
   const cellKey = `${rowId}-${column.key}`;
-  const currentCellFeedback = cellFeedbackMap.get(cellKey);
+  const currentCellFeedback = useFeedbackCelda(cellKey);
   const isMandatory = tableDefinition.primaryKey.includes(column.key) || fieldDefinition?.nullable === false;
   const isEmpty = editingValue === null || editingValue === void 0 || String(editingValue).trim() === "";
   let cellBackgroundColor;
@@ -2222,7 +2522,7 @@ function InputRenderer({
     cellBackgroundColor = currentCellFeedback.type === "error" ? theme.palette.error.light : theme.palette.success.light;
     cellBorderColor = currentCellFeedback.type === "error" ? theme.palette.error.main : theme.palette.success.main;
   }
-  const initialRowId = useMemo5(() => getPrimaryKeyValues(row, primaryKey), [row, primaryKey]);
+  const initialRowId = useMemo6(() => getPrimaryKeyValues(row, primaryKey), [row, primaryKey]);
   const handleCommit = useCallback9(async (currentValue, closeEditor, focusNextCell) => {
     if (isCommitInProgress.current) return;
     isCommitInProgress.current = true;
@@ -2231,7 +2531,7 @@ function InputRenderer({
       processedNewValue = getBestTypedValue(currentValue, typer);
       typer.validateTypedData(processedNewValue);
     } catch (err) {
-      showError(err.message);
+      showError(mensajeDeError(err));
       isCommitInProgress.current = false;
       return;
     }
@@ -2239,7 +2539,7 @@ function InputRenderer({
     const arePKValuesFilled = tableDefinition.primaryKey.every(
       (key) => potentialUpdatedRow[key] !== void 0 && potentialUpdatedRow[key] !== null && String(potentialUpdatedRow[key]).trim() !== ""
     );
-    const isNewRow = !arePKValuesFilled || potentialUpdatedRow[NEW_ROW_INDICATOR2];
+    const isNewRow = !arePKValuesFilled || !!potentialUpdatedRow[NEW_ROW_INDICATOR];
     const isMandatoryField = tableDefinition.primaryKey.includes(column.key) || tableDefinition.fields.find((f) => f.name === column.key)?.nullable === false;
     const isMandatoryFieldEmpty = isNewRow && isMandatoryField && (processedNewValue === null || processedNewValue === void 0 || String(processedNewValue).trim() === "");
     if (sameValue(processedNewValue, row[column.key]) && !isNewRow && !isMandatoryFieldEmpty) {
@@ -2295,7 +2595,7 @@ function InputRenderer({
         initialData: oldRowData,
         targetFieldName: column.key
       });
-      const responseRow = response.row;
+      const responseRow = response.row ?? potentialUpdatedRow;
       let finalRowIdForFeedback;
       let persistedRowData;
       if (response.row && isNewRow) {
@@ -2320,7 +2620,8 @@ function InputRenderer({
         persistedRowData = responseRow;
         const isPrimaryKeyColumn = tableDefinition.primaryKey.includes(column.key);
         finalRowIdForFeedback = isPrimaryKeyColumn ? getPrimaryKeyValues(potentialUpdatedRow, tableDefinition.primaryKey) : currentRowIdBeforeUpdate;
-        onRowChange({ ...responseRow }, true);
+        const mismaFila = (fila) => tableDefinition.primaryKey.every((k) => fila[k] === potentialUpdatedRow[k]);
+        setTableData((prevData) => prevData.map((fila) => mismaFila(fila) ? { ...fila, ...responseRow } : fila));
       }
       const changes = findChangedValues(oldRowData, responseRow, isNewRow);
       setCellFeedbackMap((prevFeedback) => {
@@ -2340,7 +2641,7 @@ function InputRenderer({
           rowId: currentRowIdBeforeUpdate,
           columnKey: column.key,
           type: "error",
-          message: err.message
+          message: mensajeDeError(err)
         });
         return newFeedback;
       });
@@ -2362,7 +2663,6 @@ function InputRenderer({
     onClose,
     setTableData,
     setLocalCellChanges,
-    localCellChanges,
     initialRowId,
     typer
   ]);
@@ -2375,18 +2675,26 @@ function InputRenderer({
       return;
     }
     if (["Enter", "Tab", "ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft"].includes(event.key)) {
-      await handleCommit(editingValue, true, true);
+      void handleCommit(editingValue, true, true);
       if (onKeyPress) {
         onKeyPress(rowIdx, column.key, event, handleCommit);
       }
     }
   }, [handleCommit, editingValue, column.key, rowIdx, onKeyPress]);
+  const procesarTecla = React8.useRef(() => {
+  });
+  procesarTecla.current = (key) => {
+    if (key === "F4" && onKeyPress) {
+      onKeyPress(rowIdx, column.key, { key, target: document.activeElement ?? document.body }, handleCommit);
+    }
+  };
+  useEffect4(() => registrarEditor?.((key) => procesarTecla.current(key)), []);
   const handleBlur = useCallback9(() => {
     handleCommit(editingValue, true, false);
   }, [handleCommit, editingValue]);
   const isFieldEditable = fieldDefinition?.editable !== false;
   const isNumeric = isNumericType(fieldDefinition?.typeName);
-  return /* @__PURE__ */ jsx11(
+  const editor = /* @__PURE__ */ jsx13(
     InputBase2,
     {
       autoFocus: true,
@@ -2413,14 +2721,15 @@ function InputRenderer({
       disabled: !isFieldEditable
     }
   );
+  return currentCellFeedback?.message ? /* @__PURE__ */ jsx13(Tooltip5, { title: currentCellFeedback.message, children: /* @__PURE__ */ jsx13("div", { style: { width: "100%" }, children: editor }) }) : editor;
 }
 var InputRenderer_default = InputRenderer;
 
 // src/components/grid/renderers/editCellRenderers.tsx
-import { Box as Box8, Tooltip as Tooltip4 } from "@mui/material";
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var allColumnsEditCellRenderer = (props, allColumns) => {
   const column = props.column;
+  if (!esColumnaPropia(column)) return void 0;
   switch (column.customType) {
     case "default": {
       const defaultColumn = column;
@@ -2429,11 +2738,8 @@ var allColumnsEditCellRenderer = (props, allColumns) => {
         fixedFields,
         primaryKey,
         setTableData,
-        cellFeedbackMap,
-        setCellFeedbackMap,
         handleKeyPressInEditor,
-        localCellChanges,
-        setLocalCellChanges
+        registrarEditor
       } = defaultColumn;
       if (column.editable) {
         const fieldDefinition = tableDefinition.fields.find((f) => f.name === column.key);
@@ -2442,25 +2748,16 @@ var allColumnsEditCellRenderer = (props, allColumns) => {
         if (!isFieldEditableByUI) {
           return void 0;
         }
-        const rowId = getPrimaryKeyValues(props.row, primaryKey);
-        const cellKey = `${rowId}-${props.column.key}`;
-        const currentCellFeedback = cellFeedbackMap.get ? cellFeedbackMap.get(cellKey) : cellFeedbackMap[cellKey];
-        return (
-          // --- TOOLTIP ADAPTADO: Lee el mensaje de error desde el Mapa ---
-          /* @__PURE__ */ jsx12(Tooltip4, { title: currentCellFeedback?.message || "", children: /* @__PURE__ */ jsx12(Box8, { children: /* @__PURE__ */ jsx12(
-            InputRenderer_default,
-            {
-              ...props,
-              tableDefinition,
-              setCellFeedbackMap,
-              cellFeedbackMap,
-              onKeyPress: (rowIndex, columnKey, event, handleCommit) => handleKeyPressInEditor(rowIndex, columnKey, event, allColumns, handleCommit),
-              setTableData,
-              setLocalCellChanges,
-              localCellChanges,
-              primaryKey
-            }
-          ) }) })
+        return /* @__PURE__ */ jsx14(
+          InputRenderer_default,
+          {
+            ...props,
+            tableDefinition,
+            onKeyPress: (rowIndex, columnKey, event, handleCommit) => handleKeyPressInEditor(rowIndex, columnKey, event, allColumns, handleCommit),
+            registrarEditor,
+            setTableData,
+            primaryKey
+          }
         );
       }
       return void 0;
@@ -2477,79 +2774,81 @@ var allColumnsEditCellRenderer = (props, allColumns) => {
 };
 
 // src/hooks/grid/useGridColumns.ts
-import typeStore5 from "type-store";
+var estimateTextWidth = (text) => text.length * 8 + 16;
+var calcularAnchosDeColumnas = (tableDefinition, filas) => {
+  const anchos = /* @__PURE__ */ new Map();
+  const muestra = filas.slice(0, 50);
+  tableDefinition.fields.forEach((fieldDef) => {
+    const headerLabel = fieldDef.label || fieldDef.name;
+    const type = fieldDef.typeName?.toLowerCase() || "";
+    let typeMinWidth = 60;
+    if (type.includes("boolean") || type.includes("checkbox")) typeMinWidth = 60;
+    else if (type.includes("date") || type.includes("timestamp")) typeMinWidth = 110;
+    else if (type.includes("integer") || type.includes("numeric")) typeMinWidth = 80;
+    const headerWidth = estimateTextWidth(headerLabel) + 20;
+    const typer = typerFrom(fieldDef);
+    const maxDataWidth = muestra.reduce((maxW, row) => {
+      const valor = row[fieldDef.name];
+      if (valor === null || valor === void 0) return maxW;
+      let texto;
+      try {
+        texto = typer.toLocalString(valor);
+      } catch {
+        texto = String(valor);
+      }
+      return Math.max(maxW, estimateTextWidth(texto));
+    }, 0);
+    anchos.set(fieldDef.name, Math.min(Math.max(headerWidth, maxDataWidth, typeMinWidth), 500));
+  });
+  return anchos;
+};
 var useGridColumns = ({
   tableDefinition,
-  tableData,
+  anchosCalculados,
   fixedFields,
-  isFilterRowVisible,
-  sortColumns,
   primaryKey,
-  localCellChanges,
-  cellFeedbackMap,
-  setCellFeedbackMap,
   setTableData,
-  setLocalCellChanges,
   handleKeyPressInEditor,
+  registrarEditor,
   handleDeleteRow,
   handleAddRow,
   handleVerticalEditRow,
   toggleFilterVisibility,
-  setDataGridOptionsAnchorEl,
-  setOpenDataGridOptions,
-  onOpenDetail,
-  ancestors
+  abrirOpcionesDeGrilla
 }) => {
-  const columns = useMemo6(() => {
+  const columns = useMemo7(() => {
     if (!tableDefinition) return [];
     const fieldsToShow = tableDefinition.fields.filter((field) => {
       const isFixedField = fixedFields?.some((f) => f.fieldName === field.name);
       return !isFixedField && field.visible !== false;
     });
-    const estimateTextWidth = (text) => text.length * 8 + 16;
-    const getColumnWidthFromData = (fieldDef) => {
-      const headerLabel = fieldDef.label || fieldDef.name;
-      const type = fieldDef.typeName?.toLowerCase() || "";
-      let typeMinWidth = 60;
-      if (type.includes("boolean") || type.includes("checkbox")) typeMinWidth = 60;
-      else if (type.includes("date") || type.includes("timestamp")) typeMinWidth = 110;
-      else if (type.includes("integer") || type.includes("numeric")) typeMinWidth = 80;
-      const headerWidth = estimateTextWidth(headerLabel) + 20;
-      const sampleRows = tableData.slice(0, 50);
-      const maxDataWidth = sampleRows.reduce((maxW, row) => {
-        const typer = typeStore5.typerFrom(fieldDef);
-        const cellValue = row[fieldDef.name] !== null && typer.toLocalString(row[fieldDef.name]);
-        if (cellValue === null || cellValue === void 0) return maxW;
-        return Math.max(maxW, estimateTextWidth(String(cellValue)));
-      }, 0);
-      return Math.min(Math.max(headerWidth, maxDataWidth, typeMinWidth), 500);
-    };
     const defaultColumns = fieldsToShow.map((fieldDef) => {
       const isFixedField = fixedFields?.some((f) => f.fieldName === fieldDef.name);
       const isFieldEditable = fieldDef.editable !== false && !isFixedField;
-      const colWidth = getColumnWidthFromData(fieldDef);
-      return {
+      const colWidth = anchosCalculados.get(fieldDef.name) ?? estimateTextWidth(fieldDef.label || fieldDef.name) + 20;
+      const column = {
         key: fieldDef.name,
         customType: "default",
         tableDefinition,
         fieldDef,
-        cellFeedbackMap,
-        setCellFeedbackMap,
+        typer: typerFrom(fieldDef),
+        isMandatory: tableDefinition.primaryKey.includes(fieldDef.name) || fieldDef.nullable === false,
+        isNumeric: isNumericType(fieldDef.typeName),
         primaryKey,
         fixedFields,
-        localCellChanges,
-        setLocalCellChanges,
         setTableData,
         name: fieldDef.label || cambiarGuionesBajosPorEspacios(fieldDef.name),
         resizable: true,
         sortable: true,
         editable: isFieldEditable,
         handleKeyPressInEditor,
+        registrarEditor,
         width: colWidth,
-        minWidth: colWidth,
-        renderHeaderCell: (props) => defaultColumnHeaderCellRenderer({ ...props, sortColumns }, fieldDef),
-        renderSummaryCell: (props) => defaultColumnSummaryCellRenderer(props, fixedFields, isFilterRowVisible)
+        minWidth: 40,
+        renderHeaderCell: (props) => defaultColumnHeaderCellRenderer(props, fieldDef),
+        renderSummaryCell: (props) => defaultColumnSummaryCellRenderer(props, fixedFields)
       };
+      return column;
     });
     const availableActions = [
       tableDefinition.allow?.insert,
@@ -2569,51 +2868,45 @@ var useGridColumns = ({
       editable: false,
       resizable: false,
       sortable: false,
-      renderHeaderCell: (props) => actionsColumnHeaderCellRenderer(
-        props,
-        isFilterRowVisible,
+      renderHeaderCell: () => React9.createElement(ActionsColumnHeaderCell, {
         toggleFilterVisibility,
-        (e) => {
-          setDataGridOptionsAnchorEl(e.currentTarget);
-          setOpenDataGridOptions(true);
-        },
+        handleDataGridOptions: (e) => abrirOpcionesDeGrilla(e.currentTarget),
         handleAddRow,
-        tableDefinition.allow?.insert
-      ),
+        allowInsert: tableDefinition.allow?.insert
+      }),
       renderSummaryCell: (props) => actionsColumnSummaryCellRenderer(props)
     };
-    const detailColumns = [];
-    if (tableDefinition.detailTables && tableDefinition.detailTables.length > 0) {
-      tableDefinition.detailTables.forEach((detailTable) => {
-        const detailKey = `detail_${detailTable.abr}`;
-        detailColumns.push({
-          key: detailKey,
-          customType: "detail",
-          tableDefinition,
-          detailTable,
-          primaryKey,
-          tableData,
-          setTableData,
-          detailKey,
-          name: detailTable.label || `Detalle ${detailTable.abr}`,
-          resizable: false,
-          sortable: false,
-          editable: false,
-          width: 30,
-          minWidth: 30,
-          renderHeaderCell: (props) => detailColumnCellHeaderRenderer(props, detailTable),
-          renderSummaryCell: (props) => detailColumnCellSummaryRenderer(props)
-        });
-      });
-    }
+    const detailColumns = (tableDefinition.detailTables ?? []).map((detailTable) => {
+      const detailKey = `detail_${detailTable.abr}`;
+      const column = {
+        key: detailKey,
+        customType: "detail",
+        tableDefinition,
+        detailTable,
+        primaryKey,
+        detailKey,
+        name: detailTable.label || `Detalle ${detailTable.abr}`,
+        resizable: false,
+        sortable: false,
+        editable: false,
+        width: 30,
+        minWidth: 30,
+        renderHeaderCell: (props) => detailColumnCellHeaderRenderer(props, detailTable),
+        renderSummaryCell: (props) => detailColumnCellSummaryRenderer(props)
+      };
+      return column;
+    });
     const allColumns = [actionsColumn, ...detailColumns, ...defaultColumns];
+    const cantidadDeColumnas = allColumns.length;
+    const colSpanDetalle = (args) => args.type === "ROW" && esFilaDetalle(args.row) ? cantidadDeColumnas : void 0;
     return allColumns.map((col) => ({
       ...col,
+      colSpan: col.customType === "action" ? colSpanDetalle : col.colSpan,
       editorOptions: { closeOnExternalRowChange: false },
       renderEditCell: (props) => allColumnsEditCellRenderer(props, allColumns),
-      renderCell: (props) => allColumnsCellRenderer(props, onOpenDetail, ancestors, fixedFields)
+      renderCell: (props) => allColumnsCellRenderer(props)
     }));
-  }, [tableDefinition, fixedFields, isFilterRowVisible, primaryKey, localCellChanges, handleKeyPressInEditor, handleDeleteRow, handleAddRow, handleVerticalEditRow, toggleFilterVisibility, tableData, cellFeedbackMap, sortColumns, setDataGridOptionsAnchorEl, setOpenDataGridOptions]);
+  }, [tableDefinition, anchosCalculados, fixedFields, primaryKey, setTableData, handleKeyPressInEditor, registrarEditor, handleDeleteRow, handleAddRow, handleVerticalEditRow, toggleFilterVisibility, abrirOpcionesDeGrilla]);
   return { columns };
 };
 
@@ -2633,7 +2926,7 @@ import {
   Divider
 } from "@mui/material";
 import FileUploadIcon2 from "@mui/icons-material/FileUpload";
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var ImportDialog = ({ open, onClose, onImport, loading }) => {
   const [file, setFile] = useState9(null);
   const [options, setOptions] = useState9({
@@ -2655,15 +2948,15 @@ var ImportDialog = ({ open, onClose, onImport, loading }) => {
       onClose();
     }
   };
-  return /* @__PURE__ */ jsxs9(Dialog2, { open, onClose: loading ? void 0 : onClose, maxWidth: "sm", fullWidth: true, children: [
-    /* @__PURE__ */ jsxs9(DialogTitle2, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-      /* @__PURE__ */ jsx13(FileUploadIcon2, { color: "primary" }),
+  return /* @__PURE__ */ jsxs10(Dialog2, { open, onClose: loading ? void 0 : onClose, maxWidth: "sm", fullWidth: true, children: [
+    /* @__PURE__ */ jsxs10(DialogTitle2, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+      /* @__PURE__ */ jsx15(FileUploadIcon2, { color: "primary" }),
       "Importar datos desde archivo"
     ] }),
-    /* @__PURE__ */ jsx13(DialogContent2, { dividers: true, children: /* @__PURE__ */ jsxs9(Stack, { spacing: 3, sx: { mt: 1 }, children: [
-      /* @__PURE__ */ jsxs9(Box9, { children: [
-        /* @__PURE__ */ jsx13(Typography5, { variant: "subtitle2", gutterBottom: true, fontWeight: "bold", children: "Seleccionar archivo" }),
-        /* @__PURE__ */ jsxs9(
+    /* @__PURE__ */ jsx15(DialogContent2, { dividers: true, children: /* @__PURE__ */ jsxs10(Stack, { spacing: 3, sx: { mt: 1 }, children: [
+      /* @__PURE__ */ jsxs10(Box9, { children: [
+        /* @__PURE__ */ jsx15(Typography5, { variant: "subtitle2", gutterBottom: true, fontWeight: "bold", children: "Seleccionar archivo" }),
+        /* @__PURE__ */ jsxs10(
           Box9,
           {
             sx: {
@@ -2676,7 +2969,7 @@ var ImportDialog = ({ open, onClose, onImport, loading }) => {
               position: "relative"
             },
             children: [
-              /* @__PURE__ */ jsx13(
+              /* @__PURE__ */ jsx15(
                 "input",
                 {
                   type: "file",
@@ -2693,19 +2986,19 @@ var ImportDialog = ({ open, onClose, onImport, loading }) => {
                   }
                 }
               ),
-              /* @__PURE__ */ jsx13(Typography5, { variant: "body2", color: file ? "textPrimary" : "textSecondary", children: file ? file.name : "Haz clic aqu\xED para seleccionar un archivo" })
+              /* @__PURE__ */ jsx15(Typography5, { variant: "body2", color: file ? "textPrimary" : "textSecondary", children: file ? file.name : "Haz clic aqu\xED para seleccionar un archivo" })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsx13(Divider, {}),
-      /* @__PURE__ */ jsxs9(Box9, { children: [
-        /* @__PURE__ */ jsx13(Typography5, { variant: "subtitle2", gutterBottom: true, fontWeight: "bold", children: "Opciones de importaci\xF3n" }),
-        /* @__PURE__ */ jsxs9(Stack, { children: [
-          /* @__PURE__ */ jsx13(
+      /* @__PURE__ */ jsx15(Divider, {}),
+      /* @__PURE__ */ jsxs10(Box9, { children: [
+        /* @__PURE__ */ jsx15(Typography5, { variant: "subtitle2", gutterBottom: true, fontWeight: "bold", children: "Opciones de importaci\xF3n" }),
+        /* @__PURE__ */ jsxs10(Stack, { children: [
+          /* @__PURE__ */ jsx15(
             FormControlLabel,
             {
-              control: /* @__PURE__ */ jsx13(
+              control: /* @__PURE__ */ jsx15(
                 Checkbox,
                 {
                   checked: options.skipUnknownFieldsAtImport,
@@ -2713,13 +3006,13 @@ var ImportDialog = ({ open, onClose, onImport, loading }) => {
                   size: "small"
                 }
               ),
-              label: /* @__PURE__ */ jsx13(Typography5, { variant: "body2", children: "Omitir campos desconocidos al importar" })
+              label: /* @__PURE__ */ jsx15(Typography5, { variant: "body2", children: "Omitir campos desconocidos al importar" })
             }
           ),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx15(
             FormControlLabel,
             {
-              control: /* @__PURE__ */ jsx13(
+              control: /* @__PURE__ */ jsx15(
                 Checkbox,
                 {
                   checked: options.simplificateSpaces,
@@ -2727,13 +3020,13 @@ var ImportDialog = ({ open, onClose, onImport, loading }) => {
                   size: "small"
                 }
               ),
-              label: /* @__PURE__ */ jsx13(Typography5, { variant: "body2", children: "Simplificar espacios" })
+              label: /* @__PURE__ */ jsx15(Typography5, { variant: "body2", children: "Simplificar espacios" })
             }
           ),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx15(
             FormControlLabel,
             {
-              control: /* @__PURE__ */ jsx13(
+              control: /* @__PURE__ */ jsx15(
                 Checkbox,
                 {
                   checked: options.replaceNewLineWithSpace,
@@ -2741,21 +3034,21 @@ var ImportDialog = ({ open, onClose, onImport, loading }) => {
                   size: "small"
                 }
               ),
-              label: /* @__PURE__ */ jsx13(Typography5, { variant: "body2", children: "Reemplazar saltos de l\xEDnea con espacios" })
+              label: /* @__PURE__ */ jsx15(Typography5, { variant: "body2", children: "Reemplazar saltos de l\xEDnea con espacios" })
             }
           )
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs9(DialogActions2, { sx: { px: 3, py: 2 }, children: [
-      /* @__PURE__ */ jsx13(Button3, { onClick: onClose, disabled: loading, children: "Cancelar" }),
-      /* @__PURE__ */ jsx13(
+    /* @__PURE__ */ jsxs10(DialogActions2, { sx: { px: 3, py: 2 }, children: [
+      /* @__PURE__ */ jsx15(Button3, { onClick: onClose, disabled: loading, children: "Cancelar" }),
+      /* @__PURE__ */ jsx15(
         Button3,
         {
           onClick: handleConfirm,
           variant: "contained",
           disabled: !file || loading,
-          startIcon: /* @__PURE__ */ jsx13(FileUploadIcon2, {}),
+          startIcon: /* @__PURE__ */ jsx15(FileUploadIcon2, {}),
           children: loading ? "Procesando..." : "Confirmar Importaci\xF3n"
         }
       )
@@ -2783,8 +3076,8 @@ import {
   CircularProgress as CircularProgress2
 } from "@mui/material";
 import * as XLSX from "xlsx";
-import typeStore6 from "type-store";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import typeStore5 from "type-store";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var ExportDialog = ({
   open,
   onClose,
@@ -2853,7 +3146,7 @@ var ExportDialog = ({
       data.push(fieldsToExport.map((fieldDef) => {
         const value = row[fieldDef.name];
         if (value == null) return "";
-        return typeStore6.typerFrom(fieldDef).toPlainString(value);
+        return typeStore5.typerFrom(fieldDef).toPlainString(value);
       }));
     });
     const content = data.map((line) => line.map(replacer).join(separator)).join("\r\n");
@@ -2872,7 +3165,7 @@ var ExportDialog = ({
       fieldsToExport.forEach((fieldDef, iColumn) => {
         const value = row[fieldDef.name];
         if (value != null) {
-          const typer = typeStore6.typerFrom(fieldDef);
+          const typer = typeStore5.typerFrom(fieldDef);
           const excelValue = typer.toExcelValue(value);
           const excelType = typer.toExcelType(value);
           const cell = { t: excelType, v: excelValue };
@@ -2929,63 +3222,63 @@ var ExportDialog = ({
       URL.revokeObjectURL(url);
     }, 0);
   };
-  return /* @__PURE__ */ jsxs10(Dialog3, { open, onClose, maxWidth: "xs", fullWidth: true, children: [
-    /* @__PURE__ */ jsx14(DialogTitle3, { children: "Exportar Datos" }),
-    /* @__PURE__ */ jsx14(DialogContent3, { children: isPreparing ? /* @__PURE__ */ jsxs10(Box10, { display: "flex", flexDirection: "column", alignItems: "center", py: 4, children: [
-      /* @__PURE__ */ jsx14(CircularProgress2, {}),
-      /* @__PURE__ */ jsx14(Typography6, { sx: { mt: 2 }, children: "Preparando exportaci\xF3n..." })
-    ] }) : /* @__PURE__ */ jsxs10(Box10, { sx: { mt: 1 }, children: [
-      /* @__PURE__ */ jsxs10(FormControl2, { component: "fieldset", children: [
-        /* @__PURE__ */ jsx14(FormLabel, { component: "legend", children: "Formato" }),
-        /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(Dialog3, { open, onClose, maxWidth: "xs", fullWidth: true, children: [
+    /* @__PURE__ */ jsx16(DialogTitle3, { children: "Exportar Datos" }),
+    /* @__PURE__ */ jsx16(DialogContent3, { children: isPreparing ? /* @__PURE__ */ jsxs11(Box10, { display: "flex", flexDirection: "column", alignItems: "center", py: 4, children: [
+      /* @__PURE__ */ jsx16(CircularProgress2, {}),
+      /* @__PURE__ */ jsx16(Typography6, { sx: { mt: 2 }, children: "Preparando exportaci\xF3n..." })
+    ] }) : /* @__PURE__ */ jsxs11(Box10, { sx: { mt: 1 }, children: [
+      /* @__PURE__ */ jsxs11(FormControl2, { component: "fieldset", children: [
+        /* @__PURE__ */ jsx16(FormLabel, { component: "legend", children: "Formato" }),
+        /* @__PURE__ */ jsxs11(
           RadioGroup,
           {
             value: format,
             onChange: (e) => setFormat(e.target.value),
             children: [
-              /* @__PURE__ */ jsx14(FormControlLabel2, { value: "xlsx", control: /* @__PURE__ */ jsx14(Radio, {}), label: "Excel (.xlsx)" }),
-              /* @__PURE__ */ jsx14(FormControlLabel2, { value: "tab", control: /* @__PURE__ */ jsx14(Radio, {}), label: "Tabulado (.tab | )" }),
-              /* @__PURE__ */ jsx14(FormControlLabel2, { value: "csv", control: /* @__PURE__ */ jsx14(Radio, {}), label: "CSV (.csv , )" })
+              /* @__PURE__ */ jsx16(FormControlLabel2, { value: "xlsx", control: /* @__PURE__ */ jsx16(Radio, {}), label: "Excel (.xlsx)" }),
+              /* @__PURE__ */ jsx16(FormControlLabel2, { value: "tab", control: /* @__PURE__ */ jsx16(Radio, {}), label: "Tabulado (.tab | )" }),
+              /* @__PURE__ */ jsx16(FormControlLabel2, { value: "csv", control: /* @__PURE__ */ jsx16(Radio, {}), label: "CSV (.csv , )" })
             ]
           }
         )
       ] }),
-      /* @__PURE__ */ jsxs10(Box10, { sx: { mt: 3 }, children: [
-        /* @__PURE__ */ jsx14(Typography6, { variant: "subtitle2", gutterBottom: true, children: "Opciones de campos:" }),
-        /* @__PURE__ */ jsxs10(FormGroup, { children: [
-          /* @__PURE__ */ jsx14(
+      /* @__PURE__ */ jsxs11(Box10, { sx: { mt: 3 }, children: [
+        /* @__PURE__ */ jsx16(Typography6, { variant: "subtitle2", gutterBottom: true, children: "Opciones de campos:" }),
+        /* @__PURE__ */ jsxs11(FormGroup, { children: [
+          /* @__PURE__ */ jsx16(
             FormControlLabel2,
             {
-              control: /* @__PURE__ */ jsx14(Checkbox2, { checked: options.fromOtherTables, onChange: handleOptionChange, name: "fromOtherTables" }),
+              control: /* @__PURE__ */ jsx16(Checkbox2, { checked: options.fromOtherTables, onChange: handleOptionChange, name: "fromOtherTables" }),
               label: "Desde otras tablas"
             }
           ),
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx16(
             FormControlLabel2,
             {
-              control: /* @__PURE__ */ jsx14(Checkbox2, { checked: options.readOnly, onChange: handleOptionChange, name: "readOnly" }),
+              control: /* @__PURE__ */ jsx16(Checkbox2, { checked: options.readOnly, onChange: handleOptionChange, name: "readOnly" }),
               label: "Solo lectura"
             }
           ),
-          /* @__PURE__ */ jsx14(
+          /* @__PURE__ */ jsx16(
             FormControlLabel2,
             {
-              control: /* @__PURE__ */ jsx14(Checkbox2, { checked: options.hiddens, onChange: handleOptionChange, name: "hiddens" }),
+              control: /* @__PURE__ */ jsx16(Checkbox2, { checked: options.hiddens, onChange: handleOptionChange, name: "hiddens" }),
               label: "Ocultos"
             }
           )
         ] })
       ] })
     ] }) }),
-    /* @__PURE__ */ jsxs10(DialogActions3, { children: [
-      /* @__PURE__ */ jsx14(Button4, { onClick: onClose, disabled: isPreparing, children: "Cancelar" }),
-      /* @__PURE__ */ jsx14(Button4, { onClick: handlePrepareExport, variant: "contained", disabled: isPreparing, children: "Descargar" })
+    /* @__PURE__ */ jsxs11(DialogActions3, { children: [
+      /* @__PURE__ */ jsx16(Button4, { onClick: onClose, disabled: isPreparing, children: "Cancelar" }),
+      /* @__PURE__ */ jsx16(Button4, { onClick: handlePrepareExport, variant: "contained", disabled: isPreparing, children: "Descargar" })
     ] })
   ] });
 };
 
 // src/pages/VerticalEditorPage.tsx
-import { useState as useState11, useCallback as useCallback10, useMemo as useMemo7, useRef as useRef2 } from "react";
+import { useState as useState11, useCallback as useCallback10, useMemo as useMemo8, useRef as useRef5 } from "react";
 import {
   DialogTitle as DialogTitle4,
   DialogContent as DialogContent4,
@@ -2998,7 +3291,7 @@ import {
   Typography as Typography7
 } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var VerticalEditorPage = ({
   tableName,
   tableDefinition,
@@ -3016,13 +3309,13 @@ var VerticalEditorPage = ({
   const [globalError, setGlobalError] = useState11(null);
   const [isSaving, setIsSaving] = useState11(false);
   const [fieldFeedback, setFieldFeedback] = useState11({});
-  const feedbackTimersRef = useRef2({});
+  const feedbackTimersRef = useRef5({});
   const handleFieldChange = useCallback10((fieldName, newValue, isValid) => {
     setFormData((prev) => ({ ...prev, [fieldName]: newValue }));
     setValidityMap((prev) => ({ ...prev, [fieldName]: isValid }));
     setGlobalError(null);
   }, []);
-  const isFormValid = useMemo7(() => {
+  const isFormValid = useMemo8(() => {
     for (const key in validityMap) {
       if (validityMap[key] === false) return false;
     }
@@ -3103,7 +3396,7 @@ var VerticalEditorPage = ({
       }
       onSaveSuccess(responseRow, wasNewItem);
     } catch (err) {
-      setGlobalError(err.message || "Error desconocido al guardar.");
+      setGlobalError(mensajeDeError(err, "Error desconocido al guardar."));
       setFieldFeedback((prev) => ({ ...prev, [fieldName]: "error" }));
       if (feedbackTimersRef.current[fieldName]) clearTimeout(feedbackTimersRef.current[fieldName]);
       feedbackTimersRef.current[fieldName] = setTimeout(
@@ -3126,21 +3419,21 @@ var VerticalEditorPage = ({
     tableDefinition,
     onSaveSuccess
   ]);
-  return /* @__PURE__ */ jsxs11(Box11, { sx: { p: 2, display: "flex", flexDirection: "column", height: "100%" }, children: [
-    /* @__PURE__ */ jsxs11(DialogTitle4, { sx: { px: 0, pt: 0, display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsxs11(Typography7, { component: "div", variant: "h6", children: [
+  return /* @__PURE__ */ jsxs12(Box11, { sx: { p: 2, display: "flex", flexDirection: "column", height: "100%" }, children: [
+    /* @__PURE__ */ jsxs12(DialogTitle4, { sx: { px: 0, pt: 0, display: "flex", justifyContent: "space-between", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxs12(Typography7, { component: "div", variant: "h6", children: [
         isNewRow ? "Nuevo Registro" : "Editar Registro",
         " - ",
         tableDefinition.title || tableName
       ] }),
-      /* @__PURE__ */ jsx15(IconButton3, { onClick: onClose, size: "small", edge: "end", children: /* @__PURE__ */ jsx15(CloseIcon, {}) })
+      /* @__PURE__ */ jsx17(IconButton3, { onClick: onClose, size: "small", edge: "end", children: /* @__PURE__ */ jsx17(CloseIcon, {}) })
     ] }),
-    /* @__PURE__ */ jsxs11(DialogContent4, { dividers: true, sx: { px: 2, flexGrow: 1, py: 1 }, children: [
-      globalError && /* @__PURE__ */ jsx15(Alert, { severity: "error", sx: { mb: 2 }, children: globalError }),
-      /* @__PURE__ */ jsx15(Box11, { sx: { display: "flex", flexDirection: "column", gap: 0.5 }, children: tableDefinition.fields.map((field) => {
+    /* @__PURE__ */ jsxs12(DialogContent4, { dividers: true, sx: { px: 2, flexGrow: 1, py: 1 }, children: [
+      globalError && /* @__PURE__ */ jsx17(Alert, { severity: "error", sx: { mb: 2 }, children: globalError }),
+      /* @__PURE__ */ jsx17(Box11, { sx: { display: "flex", flexDirection: "column", gap: 0.5 }, children: tableDefinition.fields.map((field) => {
         const isFixed = fixedFields?.some((ff) => ff.fieldName === field.name);
         const isMandatory = field.nullable === false || tableDefinition.primaryKey.includes(field.name);
-        return /* @__PURE__ */ jsx15(Box11, { sx: { width: "100%", maxWidth: "100%" }, children: /* @__PURE__ */ jsx15(
+        return /* @__PURE__ */ jsx17(Box11, { sx: { width: "100%", maxWidth: "100%" }, children: /* @__PURE__ */ jsx17(
           TypedField,
           {
             fieldDef: field,
@@ -3154,29 +3447,39 @@ var VerticalEditorPage = ({
         ) }, field.name);
       }) })
     ] }),
-    /* @__PURE__ */ jsxs11(DialogActions4, { sx: { px: 0, pb: 0, pt: 2, justifyContent: "space-between", alignItems: "center" }, children: [
-      /* @__PURE__ */ jsxs11(Box11, { children: [
-        isSaving && /* @__PURE__ */ jsx15(CircularProgress3, { size: 20, sx: { ml: 2 } }),
-        /* @__PURE__ */ jsx15("span", { style: { marginLeft: 10, fontSize: "0.8rem", color: "#666" }, children: isSaving ? "Guardando..." : "Cambios auto-guardados" })
+    /* @__PURE__ */ jsxs12(DialogActions4, { sx: { px: 0, pb: 0, pt: 2, justifyContent: "space-between", alignItems: "center" }, children: [
+      /* @__PURE__ */ jsxs12(Box11, { children: [
+        isSaving && /* @__PURE__ */ jsx17(CircularProgress3, { size: 20, sx: { ml: 2 } }),
+        /* @__PURE__ */ jsx17("span", { style: { marginLeft: 10, fontSize: "0.8rem", color: "#666" }, children: isSaving ? "Guardando..." : "Cambios auto-guardados" })
       ] }),
-      /* @__PURE__ */ jsx15(Button5, { variant: "outlined", onClick: onClose, children: "Cerrar" })
+      /* @__PURE__ */ jsx17(Button5, { variant: "outlined", onClick: onClose, children: "Cerrar" })
     ] })
   ] });
 };
 
 // src/components/grid/GenericDataGrid.tsx
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var SUMMARY_ROW_HEIGHT = 35;
 var FILTER_ROW_HEIGHT = 35;
 var HEADER_ROW_HEIGHT = 30;
 var ROW_HEIGHT = 30;
 var MIN_BODY_HEIGHT = 260;
-var NEW_ROW_INDICATOR2 = "$new";
-var StaticAncestorGrid = ({ ancestor, index, fieldsToHide, callApi, showSuccess, showError }) => {
+var DURACION_FEEDBACK_EXITO = 3e3;
+var ALTO_TITULO_ANIDADA = 26;
+var ALTO_MINIMO_CUERPO_ANIDADA = 120;
+var HOLGURA_ANIDADA = 24;
+var ANCHO_MINIMO_ANIDADA = 240;
+var SANGRIA_DETALLE = 28 + 8 + 3;
+var MARGEN_INFERIOR_PAGINA = 24;
+var PRIMERAS_FILAS_ANIDADA = 20;
+var LIMITE_PRIMERAS_FILAS_ANIDADA = 30;
+var esColumnaPropia = (columna) => "customType" in columna;
+var SIN_ANCESTROS = [];
+var cargasEnCurso = /* @__PURE__ */ new Map();
+var StaticAncestorGrid = ({ ancestor, index, fieldsToHide }) => {
   const theme = useTheme4();
   const { tableDefinition, row } = ancestor;
-  const [rowData, setRowData] = useState12(row);
-  const columns = useMemo8(() => {
+  const columns = useMemo9(() => {
     const filteredFields = tableDefinition.fields.filter(
       (field) => !fieldsToHide?.some((ff) => ff.fieldName === field.name)
     );
@@ -3186,8 +3489,8 @@ var StaticAncestorGrid = ({ ancestor, index, fieldsToHide, callApi, showSuccess,
         key: field.name,
         name: field.label || cambiarGuionesBajosPorEspacios(field.name),
         width: 150,
-        editable: field.editable !== false,
-        renderHeaderCell: () => /* @__PURE__ */ jsx16(Box12, { sx: { p: 0.5, height: "100%", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx16(
+        editable: false,
+        renderHeaderCell: () => /* @__PURE__ */ jsx18(Box12, { sx: { p: 0.5, height: "100%", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx18(
           Typography8,
           {
             variant: "caption",
@@ -3199,25 +3502,11 @@ var StaticAncestorGrid = ({ ancestor, index, fieldsToHide, callApi, showSuccess,
             children: field.label || cambiarGuionesBajosPorEspacios(field.name)
           }
         ) }),
-        renderCell: (props) => /* @__PURE__ */ jsx16(Box12, { sx: { px: 1, height: "100%", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx16(Typography8, { variant: "body2", sx: { fontSize: "0.875rem" }, noWrap: true, children: String(props.row[field.name] ?? "") }) })
+        renderCell: (props) => /* @__PURE__ */ jsx18(Box12, { sx: { px: 1, height: "100%", display: "flex", alignItems: "center" }, children: /* @__PURE__ */ jsx18(Typography8, { variant: "body2", sx: { fontSize: "0.875rem" }, noWrap: true, children: String(props.row[field.name] ?? "") }) })
       };
     });
   }, [tableDefinition, fieldsToHide]);
-  const handleRowsChange = async (newRows) => {
-    const updatedRow = newRows[0];
-    setRowData(updatedRow);
-    try {
-      await callApi("table_data_save", {
-        table: ancestor.tableName,
-        row: updatedRow
-      });
-      showSuccess(`Registro de ${cambiarGuionesBajosPorEspacios(ancestor.tableName)} actualizado.`);
-    } catch (err) {
-      showError(`Error al actualizar padre: ${err.message}`);
-      setRowData(row);
-    }
-  };
-  return /* @__PURE__ */ jsxs12(Box12, { sx: {
+  return /* @__PURE__ */ jsxs13(Box12, { sx: {
     mb: 1.5,
     ml: index * 4,
     // El primer ancestro (index 0) no tiene margen, los siguientes sí
@@ -3228,7 +3517,7 @@ var StaticAncestorGrid = ({ ancestor, index, fieldsToHide, callApi, showSuccess,
     boxShadow: theme.shadows[1],
     bgcolor: "background.paper"
   }, children: [
-    /* @__PURE__ */ jsx16(Box12, { sx: {
+    /* @__PURE__ */ jsx18(Box12, { sx: {
       bgcolor: "primary.main",
       color: "primary.contrastText",
       px: 1.5,
@@ -3239,14 +3528,13 @@ var StaticAncestorGrid = ({ ancestor, index, fieldsToHide, callApi, showSuccess,
       alignItems: "center",
       fontWeight: "bold",
       gap: 1
-    }, children: /* @__PURE__ */ jsx16(Typography8, { variant: "subtitle2", component: "div", children: cambiarGuionesBajosPorEspacios(ancestor.tableName) }) }),
-    /* @__PURE__ */ jsx16(
+    }, children: /* @__PURE__ */ jsx18(Typography8, { variant: "subtitle2", component: "div", children: cambiarGuionesBajosPorEspacios(ancestor.tableName) }) }),
+    /* @__PURE__ */ jsx18(
       DataGrid,
       {
         className: "rdg-light",
         columns,
-        rows: [rowData],
-        onRowsChange: handleRowsChange,
+        rows: [row],
         headerRowHeight: HEADER_ROW_HEIGHT,
         rowHeight: ROW_HEIGHT,
         rowKeyGetter: () => "single-row",
@@ -3257,32 +3545,49 @@ var StaticAncestorGrid = ({ ancestor, index, fieldsToHide, callApi, showSuccess,
 };
 var GenericDataGrid = ({
   tableName,
-  fixedFields,
+  fixedFields: fixedFieldsRecibidos,
   gridStyles,
   onOpenDetail,
-  ancestors = []
+  ancestors = SIN_ANCESTROS,
+  anidada = false,
+  titulo,
+  claveCache,
+  onAltoDeseado,
+  onAnchoDeseado,
+  altoDisponible,
+  altoMaximoDetalle
 }) => {
-  const [tableDefinition, setTableDefinition] = useState12(null);
-  const [tableData, setTableData] = useState12([]);
+  const claveFixedFields = JSON.stringify(fixedFieldsRecibidos ?? null);
+  const fixedFields = useMemo9(() => fixedFieldsRecibidos, [claveFixedFields]);
+  const cacheHeredado = useContext4(CacheGrillasContext);
+  const [cachePropio] = useState12(() => /* @__PURE__ */ new Map());
+  const cache = cacheHeredado ?? cachePropio;
+  const [guardada] = useState12(() => claveCache ? cache.get(claveCache) : void 0);
+  const claveCargadaRef = useRef6(guardada ? `${tableName}|${claveFixedFields}` : null);
+  const [tableDefinition, setTableDefinition] = useState12(guardada?.tableDefinition ?? null);
+  const [tableData, setTableData] = useState12(guardada?.tableData ?? []);
+  const [cargandoInicial, setCargandoInicial] = useState12(!guardada);
+  const [errorDeCarga, setErrorDeCarga] = useState12(null);
+  const [anchosCalculados, setAnchosCalculados] = useState12(() => guardada?.anchosCalculados ?? /* @__PURE__ */ new Map());
+  const [detallesAbiertos, setDetallesAbiertos] = useState12(guardada?.detallesAbiertos ?? []);
+  const [altosDetalle, setAltosDetalle] = useState12(() => guardada?.altosDetalle ?? /* @__PURE__ */ new Map());
+  const [anchosDetalle, setAnchosDetalle] = useState12(() => /* @__PURE__ */ new Map());
   const [selectedRows, setSelectedRows] = useState12(() => /* @__PURE__ */ new Set());
-  const [selectedCell, setSelectedCell] = useState12(void 0);
-  const [cellFeedbackMap, setCellFeedbackMap] = useState12(/* @__PURE__ */ new Map());
-  const [localCellChanges, setLocalCellChanges] = useState12(/* @__PURE__ */ new Map());
+  const [, setSelectedCell] = useState12(void 0);
+  const [estadoGrilla] = useState12(crearEstadoGrilla);
   const theme = useTheme4();
   const [openDataGridOptions, setOpenDataGridOptions] = useState12(false);
   const [dataGridOptionsAnchorEl, setDataGridOptionsAnchorEl] = useState12(null);
   const [exitingRowIds, setExitingRowIds] = useState12(/* @__PURE__ */ new Set());
-  const { showSuccess, showError, showWarning, showInfo } = useSnackbar();
-  const feedbackTimerRef = useRef3(null);
-  const dataGridRef = useRef3(null);
-  const rowAtEditStartRef = useRef3(null);
+  const { showError } = useSnackbar();
+  const { username: usuario } = useClientContext();
+  const dataGridRef = useRef6(null);
+  const rowAtEditStartRef = useRef6(null);
   const [openImportDialog, setOpenImportDialog] = useState12(false);
   const [openExportDialog, setOpenExportDialog] = useState12(false);
   const [columnWidths, setColumnWidths] = useState12(() => /* @__PURE__ */ new Map());
-  const { callApi, callApiUpload, loading, error } = useApiCall();
-  const getRowCount = () => tableData.length;
-  const getFilteredRowCount = () => filteredRows.length;
-  const primaryKey = useMemo8(() => {
+  const { callApi, callApiUpload, loading } = useApiCall();
+  const primaryKey = useMemo9(() => {
     if (!tableDefinition) return ["id"];
     return tableDefinition.primaryKey && tableDefinition.primaryKey.length > 0 ? tableDefinition.primaryKey : ["id"];
   }, [tableDefinition]);
@@ -3300,6 +3605,40 @@ var GenericDataGrid = ({
     summaryData,
     resetView
   } = useGridDataView({ tableData, tableDefinition });
+  const abiertos = useMemo9(() => new Set(detallesAbiertos), [detallesAbiertos]);
+  const filasDetalleRef = useRef6(/* @__PURE__ */ new Map());
+  const filasMostradas = useMemo9(() => {
+    const detailTables = tableDefinition?.detailTables ?? [];
+    if (abiertos.size === 0 || detailTables.length === 0) return filteredRows;
+    const anteriores = filasDetalleRef.current;
+    const nuevas = /* @__PURE__ */ new Map();
+    const filas = [];
+    filteredRows.forEach((row) => {
+      filas.push(row);
+      const rowId = getPrimaryKeyValues(row, primaryKey);
+      detailTables.forEach((detailTable) => {
+        const clave = claveDetalle(rowId, detailTable);
+        if (!abiertos.has(clave)) return;
+        const anterior = anteriores.get(clave);
+        const filaDetalle = anterior && anterior.filaPadre === row ? anterior : {
+          [DETALLE]: true,
+          clave,
+          filaPadre: row,
+          detailTable,
+          fixedFields: calcularFixedFieldsDetalle(detailTable, row)
+        };
+        nuevas.set(clave, filaDetalle);
+        filas.push(filaDetalle);
+      });
+    });
+    filasDetalleRef.current = nuevas;
+    return filas;
+  }, [filteredRows, abiertos, tableDefinition, primaryKey]);
+  const altoDeDetalle = useCallback11((clave) => altosDetalle.get(clave) ?? ALTO_INICIAL_DETALLE, [altosDetalle]);
+  const altoDetalles = useMemo9(
+    () => filasMostradas.reduce((total, row) => esFilaDetalle(row) ? total + altoDeDetalle(row.clave) : total, 0),
+    [filasMostradas, altoDeDetalle]
+  );
   const {
     handleAddRow,
     handleConfirmDelete,
@@ -3318,24 +3657,33 @@ var GenericDataGrid = ({
     primaryKey,
     fixedFields,
     setExitingRowIds,
-    setLocalCellChanges,
+    setLocalCellChanges: estadoGrilla.setCambiosLocales,
     setSelectedRows,
     setTableData,
     callApi,
     callApiUpload,
     resetView
   });
+  const firstDisplayCount = tableDefinition?.firstDisplayCount ?? PRIMERAS_FILAS_ANIDADA;
+  const firstDisplayOverLimit = tableDefinition?.firstDisplayOverLimit ?? LIMITE_PRIMERAS_FILAS_ANIDADA;
+  const filasVisiblesMax = anidada ? filteredRows.length <= firstDisplayOverLimit ? filteredRows.length : firstDisplayCount : void 0;
+  const conPie = !anidada || !!tableDefinition?.fields.some((field) => field.aggregate);
   const { gridHeight, bottomSummaryRow, summaryRows, filterHeight } = useGridLayout({
     filteredRows,
     isFilterRowVisible,
     tableData,
     summaryData,
     filters,
-    setFilters
+    setFilters,
+    altoDetalles,
+    altoMinimoCuerpo: anidada ? ALTO_MINIMO_CUERPO_ANIDADA : MIN_BODY_HEIGHT,
+    holgura: anidada ? HOLGURA_ANIDADA : void 0,
+    filasVisiblesMax,
+    conPie
   });
-  const { handleCellDoubleClick, handleCellClick, handleCellKeyDown, handleCellMouseDown, handleKeyPressInEditor, handleSelectedCellChange, handleRowsChange } = useGridEvents({
+  const { handleCellDoubleClick, handleCellClick, handleCellKeyDown, handleCellMouseDown, handleKeyPressInEditor, registrarEditor, handleSelectedCellChange, handleRowsChange } = useGridEvents({
     dataGridRef,
-    filteredRows,
+    filteredRows: filasMostradas,
     fixedFields,
     tableData,
     tableDefinition,
@@ -3343,103 +3691,273 @@ var GenericDataGrid = ({
     setTableData,
     setSortColumns
   });
-  useEffect3(() => {
+  const tableNameAnteriorRef = useRef6(tableName);
+  useEffect5(() => {
+    if (tableNameAnteriorRef.current === tableName) return;
+    tableNameAnteriorRef.current = tableName;
+    setDetallesAbiertos([]);
+    setAltosDetalle(/* @__PURE__ */ new Map());
     resetView();
     setSelectedRows(/* @__PURE__ */ new Set());
     setTableDefinition(null);
     setTableData([]);
-    setCellFeedbackMap(/* @__PURE__ */ new Map());
-    setLocalCellChanges(/* @__PURE__ */ new Map());
+    estadoGrilla.setFeedback(/* @__PURE__ */ new Map());
+    estadoGrilla.setCambiosLocales(/* @__PURE__ */ new Map());
     setExitingRowIds(/* @__PURE__ */ new Set());
     setColumnWidths(/* @__PURE__ */ new Map());
-    if (feedbackTimerRef.current) {
-      clearTimeout(feedbackTimerRef.current);
+  }, [tableName, estadoGrilla, resetView]);
+  useEffect5(() => {
+    const claveCarga = `${tableName}|${claveFixedFields}`;
+    if (claveCargadaRef.current === claveCarga) {
+      if (guardada) setSortColumns(guardada.sortColumns);
+      return;
     }
-  }, [tableName]);
-  useEffect3(() => {
+    let vigente = true;
     const fetchDataAndDefinition = async () => {
+      setCargandoInicial(true);
+      setErrorDeCarga(null);
       try {
-        const definition = await callApi("table_structure", { table: tableName }, { isCritical: true });
+        const clavePedido = `${tableName}|${claveFixedFields}`;
+        let pedido = cargasEnCurso.get(clavePedido);
+        if (!pedido) {
+          const nuevo = (async () => {
+            const definition2 = requerido(
+              await callApi("table_structure", { table: tableName }, { isCritical: true }),
+              `la estructura de '${tableName}'`
+            );
+            const validFixedFields = fixedFields?.filter(
+              (ff) => definition2.fields.some((field) => field.name === ff.fieldName)
+            );
+            const data2 = requerido(
+              await callApi("table_data", {
+                table: tableName,
+                fixedFields: validFixedFields ?? []
+              }, { isCritical: true }),
+              `los datos de '${tableName}'`
+            );
+            return { definition: definition2, data: data2 };
+          })();
+          cargasEnCurso.set(clavePedido, nuevo);
+          const sacar = () => {
+            cargasEnCurso.delete(clavePedido);
+          };
+          nuevo.then(sacar, sacar);
+          pedido = nuevo;
+        }
+        const { definition, data } = await pedido;
+        if (!vigente) return;
+        claveCargadaRef.current = claveCarga;
         setTableDefinition(definition);
         setSortColumns(getInitialSortColumns(definition));
-        const validFixedFields = fixedFields?.filter(
-          (ff) => definition.fields.some((field) => field.name === ff.fieldName)
-        );
-        const data = await callApi("table_data", {
-          table: tableName,
-          fixedFields: validFixedFields
-        }, { isCritical: true });
+        setAnchosCalculados(calcularAnchosDeColumnas(definition, data));
         setTableData(data);
       } catch (err) {
+        if (!vigente) return;
         setTableDefinition(null);
         setTableData([]);
-        showError(`Error al cargar datos para la tabla '${tableName}': ${err.message || "Error desconocido"}`);
+        const mensaje = `Error al cargar datos para la tabla '${tableName}': ${mensajeDeError(err)}`;
+        setErrorDeCarga(mensaje);
+        showError(mensaje);
+      } finally {
+        if (vigente) setCargandoInicial(false);
       }
     };
     fetchDataAndDefinition();
-  }, [tableName, fixedFields, showError]);
-  useEffect3(() => {
-    if (cellFeedbackMap.size > 0) {
-      if (feedbackTimerRef.current) {
-        clearTimeout(feedbackTimerRef.current);
-      }
-      const timerDuration = 3e3;
-      feedbackTimerRef.current = setTimeout(() => {
-        setCellFeedbackMap((prevMap) => {
-          const newMap = new Map(prevMap);
-          let mapChanged = false;
-          for (const [cellId, feedback] of prevMap.entries()) {
+    return () => {
+      vigente = false;
+    };
+  }, [tableName, claveFixedFields, fixedFields, showError, callApi, getInitialSortColumns, setSortColumns, guardada]);
+  useEffect5(() => {
+    if (!claveCache || !tableDefinition || cargandoInicial) return;
+    cache.set(claveCache, { tableDefinition, tableData, anchosCalculados, sortColumns, detallesAbiertos, altosDetalle });
+  }, [cache, claveCache, tableDefinition, tableData, anchosCalculados, sortColumns, detallesAbiertos, altosDetalle, cargandoInicial]);
+  useEffect5(() => {
+    let timer = null;
+    const desuscribir = estadoGrilla.suscribir(() => {
+      const hayExitos = Array.from(estadoGrilla.obtenerFeedback().values()).some((f) => f.type === "success");
+      if (!hayExitos || timer) return;
+      timer = setTimeout(() => {
+        timer = null;
+        estadoGrilla.setFeedback((anterior) => {
+          const nuevo = new Map(anterior);
+          let cambio = false;
+          for (const [cellId, feedback] of anterior.entries()) {
             if (feedback.type === "success") {
-              newMap.delete(cellId);
-              mapChanged = true;
+              nuevo.delete(cellId);
+              cambio = true;
             }
           }
-          return mapChanged ? newMap : prevMap;
+          return cambio ? nuevo : anterior;
         });
-        feedbackTimerRef.current = null;
-      }, timerDuration);
-    }
+      }, DURACION_FEEDBACK_EXITO);
+    });
     return () => {
-      if (feedbackTimerRef.current) {
-        clearTimeout(feedbackTimerRef.current);
-      }
+      desuscribir();
+      if (timer) clearTimeout(timer);
     };
-  }, [cellFeedbackMap]);
+  }, [estadoGrilla]);
+  const resetSortingDeLaTabla = useCallback11(() => {
+    if (tableDefinition) resetSorting(tableDefinition);
+  }, [tableDefinition, resetSorting]);
+  const abrirImportacion = useCallback11(() => setOpenImportDialog(true), []);
+  const abrirExportacion = useCallback11(() => setOpenExportDialog(true), []);
   const { menuOptions } = useGridMenu({
     tableDefinition,
     tableName,
     fixedFields,
     setTableData,
     callApi,
-    resetSorting: tableDefinition ? () => resetSorting(tableDefinition) : void 0,
-    triggerImport: () => setOpenImportDialog(true),
-    triggerExport: () => setOpenExportDialog(true)
+    resetSorting: tableDefinition ? resetSortingDeLaTabla : void 0,
+    triggerImport: abrirImportacion,
+    triggerExport: abrirExportacion
   });
+  const abrirOpcionesDeGrilla = useCallback11((anchorEl) => {
+    setDataGridOptionsAnchorEl(anchorEl);
+    setOpenDataGridOptions(true);
+  }, []);
+  const editarEnFicha = useCallback11((row) => {
+    rowAtEditStartRef.current = { ...row };
+    handleVerticalEditRow(row);
+  }, [handleVerticalEditRow]);
   const { columns } = useGridColumns({
     tableDefinition,
-    tableData,
+    anchosCalculados,
     fixedFields,
-    isFilterRowVisible,
-    sortColumns,
     primaryKey,
-    localCellChanges,
-    cellFeedbackMap,
-    setCellFeedbackMap,
     setTableData,
-    setLocalCellChanges,
     handleKeyPressInEditor,
+    registrarEditor,
     handleDeleteRow,
     handleAddRow,
-    handleVerticalEditRow: (row) => {
-      rowAtEditStartRef.current = { ...row };
-      handleVerticalEditRow(row);
-    },
+    handleVerticalEditRow: editarEnFicha,
     toggleFilterVisibility,
-    setDataGridOptionsAnchorEl,
-    setOpenDataGridOptions,
-    onOpenDetail,
-    ancestors: ancestors ?? []
+    abrirOpcionesDeGrilla
   });
+  const abrirDetalleEnPestana = useCallback11((row, detailTable) => {
+    if (!onOpenDetail || !tableDefinition || !detailTable.table) return;
+    const porCampo = /* @__PURE__ */ new Map();
+    [...fixedFields ?? [], ...calcularFixedFieldsDetalle(detailTable, row)].forEach((ff) => porCampo.set(ff.fieldName, ff));
+    const allFixedFields = Array.from(porCampo.values());
+    const filterDescription = allFixedFields.map((ff) => `${cambiarGuionesBajosPorEspacios(ff.fieldName)}: ${ff.value}`).join(", ");
+    const label = `${cambiarGuionesBajosPorEspacios(detailTable.table).toUpperCase()} (${filterDescription})`;
+    const newAncestors = [...ancestors, { tableName: tableDefinition.name, row, tableDefinition, fixedFields: allFixedFields }];
+    onOpenDetail(detailTable.table, allFixedFields, label, newAncestors);
+  }, [onOpenDetail, tableDefinition, fixedFields, ancestors]);
+  const abrirWScreenEnPestana = useCallback11((row, detailTable) => {
+    const parametros = new URLSearchParams();
+    calcularFixedFieldsDetalle(detailTable, row).forEach((ff) => parametros.set(ff.fieldName, String(ff.value)));
+    window.open(`${window.location.origin}/wScreens/${detailTable.wScreen}?${parametros}`, "_blank");
+  }, []);
+  const alternarDetalle = useCallback11((row, rowId, detailTable, enOtraPestana) => {
+    if (enOtraPestana && detailTable.wScreen) {
+      abrirWScreenEnPestana(row, detailTable);
+      return;
+    }
+    if (enOtraPestana && onOpenDetail) {
+      abrirDetalleEnPestana(row, detailTable);
+      return;
+    }
+    const clave = claveDetalle(rowId, detailTable);
+    setDetallesAbiertos((anteriores) => anteriores.includes(clave) ? anteriores.filter((c) => c !== clave) : [...anteriores, clave]);
+  }, [onOpenDetail, abrirDetalleEnPestana, abrirWScreenEnPestana]);
+  const [medidas, setMedidas] = useState12(null);
+  useEffect5(() => {
+    const elemento = dataGridRef.current?.element;
+    if (!elemento) return;
+    const medir = () => setMedidas((anteriores) => {
+      const nuevas = { ancho: elemento.clientWidth, alto: elemento.clientHeight, barra: elemento.offsetWidth - elemento.clientWidth };
+      return anteriores && anteriores.ancho === nuevas.ancho && anteriores.alto === nuevas.alto && anteriores.barra === nuevas.barra ? anteriores : nuevas;
+    });
+    medir();
+    const observador = new ResizeObserver(medir);
+    observador.observe(elemento);
+    return () => observador.disconnect();
+  }, [tableDefinition, cargandoInicial]);
+  const anchoVisible = medidas?.ancho ?? null;
+  const [altoDeVentana, setAltoDeVentana] = useState12(null);
+  useEffect5(() => {
+    if (anidada) return;
+    const elemento = dataGridRef.current?.element;
+    if (!elemento) return;
+    const calcular = () => setAltoDeVentana(Math.max(0, Math.round(window.innerHeight - elemento.getBoundingClientRect().top - MARGEN_INFERIOR_PAGINA)));
+    calcular();
+    window.addEventListener("resize", calcular);
+    return () => window.removeEventListener("resize", calcular);
+  }, [anidada, tableDefinition, cargandoInicial]);
+  const altoDeContexto = useContext4(AltoDisponibleContext);
+  const altoDeEstaGrilla = anidada ? altoDisponible ?? (altoDeContexto === void 0 ? void 0 : altoDeContexto - ALTO_TITULO_ANIDADA) : altoDeVentana ?? void 0;
+  const altoMaximoDetalleEfectivo = altoMaximoDetalle ?? (altoDeEstaGrilla !== void 0 ? Math.max(ALTO_MINIMO_DETALLE, altoDeEstaGrilla - HEADER_ROW_HEIGHT - (conPie ? SUMMARY_ROW_HEIGHT : 0) - ROW_HEIGHT - (isFilterRowVisible ? FILTER_ROW_HEIGHT : 0)) : void 0);
+  const cambiarAnchoDetalle = useCallback11((clave, ancho) => {
+    setAnchosDetalle((anteriores) => anteriores.get(clave) === ancho ? anteriores : new Map(anteriores).set(clave, ancho));
+  }, []);
+  const cambiarAltoDetalle = useCallback11((clave, altoDeseado2) => {
+    const alto = Math.min(Math.max(Math.round(altoDeseado2), ALTO_MINIMO_DETALLE), altoMaximoDetalleEfectivo ?? Infinity);
+    setAltosDetalle((anteriores) => anteriores.get(clave) === alto ? anteriores : new Map(anteriores).set(clave, alto));
+  }, [altoMaximoDetalleEfectivo]);
+  const renderDetalle = useCallback11((fila) => {
+    const { detailTable } = fila;
+    return /* @__PURE__ */ jsx18(
+      "div",
+      {
+        className: "fpr-detalle",
+        style: { maxWidth: anchoVisible ? anchoVisible - 2 : void 0 },
+        onKeyDown: (e) => e.stopPropagation(),
+        children: detailTable.table ? /* @__PURE__ */ jsx18(
+          GenericDataGrid,
+          {
+            tableName: detailTable.table,
+            fixedFields: fila.fixedFields,
+            anidada: true,
+            claveCache: `${claveCache ?? tableName}>${fila.clave}`,
+            onAltoDeseado: (alto) => cambiarAltoDetalle(fila.clave, alto),
+            onAnchoDeseado: (ancho) => cambiarAnchoDetalle(fila.clave, ancho),
+            altoDisponible: altoMaximoDetalleEfectivo === void 0 ? void 0 : altoMaximoDetalleEfectivo - ALTO_TITULO_ANIDADA - 8,
+            onOpenDetail,
+            ancestors: tableDefinition ? [...ancestors, { tableName: tableDefinition.name, row: fila.filaPadre, tableDefinition, fixedFields: fila.fixedFields }] : ancestors
+          }
+        ) : detailTable.wScreen ? /* @__PURE__ */ jsx18(
+          DetalleWScreen,
+          {
+            fila,
+            altoMaximo: altoMaximoDetalleEfectivo,
+            onAlto: (alto) => cambiarAltoDetalle(fila.clave, alto),
+            onAncho: (ancho) => cambiarAnchoDetalle(fila.clave, ancho)
+          }
+        ) : /* @__PURE__ */ jsxs13(Alert2, { severity: "warning", children: [
+          "El detalle '",
+          detailTable.abr,
+          "' no tiene ni tabla ni wScreen."
+        ] })
+      }
+    );
+  }, [anchoVisible, claveCache, tableName, cambiarAltoDetalle, cambiarAnchoDetalle, altoMaximoDetalleEfectivo, onOpenDetail, tableDefinition, ancestors]);
+  const detallesGrilla = useMemo9(() => ({ abiertos, alternarDetalle, renderDetalle }), [abiertos, alternarDetalle, renderDetalle]);
+  const altoDeseado = cargandoInicial ? ALTO_INICIAL_DETALLE : gridHeight + ALTO_TITULO_ANIDADA + 8;
+  useEffect5(() => {
+    onAltoDeseado?.(altoDeseado);
+  }, [onAltoDeseado, altoDeseado]);
+  const rowKeyGetter = useCallback11((row) => esFilaDetalle(row) ? `detalle:${row.clave}` : getPrimaryKeyValues(row, primaryKey), [primaryKey]);
+  const rowHeight = useCallback11((row) => esFilaDetalle(row) ? altoDeDetalle(row.clave) : ROW_HEIGHT, [altoDeDetalle]);
+  const rowClass = useCallback11(
+    (row) => esFilaDetalle(row) ? "fpr-fila-detalle" : exitingRowIds.has(getPrimaryKeyValues(row, primaryKey)) ? "fpr-fila-saliendo" : void 0,
+    [exitingRowIds, primaryKey]
+  );
+  const anchoContenido = useMemo9(() => {
+    if (!anidada || columns.length === 0) return void 0;
+    const sumaColumnas = columns.reduce((total, col) => {
+      const medido = columnWidths.get(col.key)?.width;
+      return total + (typeof medido === "number" ? medido : typeof col.width === "number" ? col.width : 100);
+    }, 0);
+    const propio = sumaColumnas + (medidas?.barra ?? 0) + 2;
+    const anchoDetalleMax = detallesAbiertos.reduce((max, clave) => Math.max(max, anchosDetalle.get(clave) ?? 0), 0);
+    return Math.max(ANCHO_MINIMO_ANIDADA, propio, anchoDetalleMax > 0 ? anchoDetalleMax + SANGRIA_DETALLE + (medidas?.barra ?? 0) + 2 : 0);
+  }, [anidada, columns, columnWidths, medidas?.barra, detallesAbiertos, anchosDetalle]);
+  useEffect5(() => {
+    if (anchoContenido !== void 0) onAnchoDeseado?.(anchoContenido);
+  }, [onAnchoDeseado, anchoContenido]);
+  const estiloGrilla = useMemo9(() => ({ height: "100%", width: "100%", boxSizing: "border-box", ...gridStyles }), [gridStyles]);
+  const bottomSummaryRows = useMemo9(() => conPie ? [bottomSummaryRow] : [], [conPie, bottomSummaryRow]);
+  const vistaGrilla = useMemo9(() => ({ isFilterRowVisible }), [isFilterRowVisible]);
   const getFallBackMessage = () => {
     if (tableData.length === 0) {
       return "No hay filas para mostrar";
@@ -3450,32 +3968,29 @@ var GenericDataGrid = ({
     return null;
   };
   const fallBackMessage = getFallBackMessage();
-  if (loading) {
-    return /* @__PURE__ */ jsxs12(Box12, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: [
-      /* @__PURE__ */ jsx16(CircularProgress4, {}),
-      /* @__PURE__ */ jsx16(Typography8, { variant: "h6", sx: { ml: 2 }, children: "Cargando tabla..." })
+  if (cargandoInicial) {
+    return /* @__PURE__ */ jsxs13(Box12, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: [
+      /* @__PURE__ */ jsx18(CircularProgress4, {}),
+      /* @__PURE__ */ jsx18(Typography8, { variant: "h6", sx: { ml: 2 }, children: "Cargando tabla..." })
     ] });
   }
-  if (error) {
-    return /* @__PURE__ */ jsx16(Box12, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx16(Alert2, { severity: "error", children: error.message }) });
+  if (errorDeCarga) {
+    return /* @__PURE__ */ jsx18(Box12, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx18(Alert2, { severity: "error", children: errorDeCarga }) });
   }
   if (!tableDefinition) {
-    return /* @__PURE__ */ jsx16(Box12, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx16(Alert2, { severity: "warning", children: "No se pudo cargar la definici\xF3n de la tabla." }) });
+    return /* @__PURE__ */ jsx18(Box12, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsx18(Alert2, { severity: "warning", children: "No se pudo cargar la definici\xF3n de la tabla." }) });
   }
-  return /* @__PURE__ */ jsxs12(Box12, { sx: { pt: 2, display: "flex", flexDirection: "column", height: "100%", boxSizing: "border-box" }, children: [
-    ancestors && ancestors.length > 0 && /* @__PURE__ */ jsx16(Box12, { sx: { px: 2, pt: 0, pb: 1, display: "flex", flexDirection: "column" }, children: ancestors.map((ancestor, index) => /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx18(CacheGrillasContext.Provider, { value: cache, children: /* @__PURE__ */ jsxs13(Box12, { sx: { pt: anidada ? 0 : 2, display: "flex", flexDirection: "column", height: "100%", boxSizing: "border-box", width: anchoContenido ?? void 0, maxWidth: "100%" }, children: [
+    !anidada && ancestors.length > 0 && /* @__PURE__ */ jsx18(Box12, { sx: { px: 2, pt: 0, pb: 1, display: "flex", flexDirection: "column" }, children: ancestors.map((ancestor, index) => /* @__PURE__ */ jsx18(
       StaticAncestorGrid,
       {
         ancestor,
         index,
-        fieldsToHide: index > 0 ? ancestors[index - 1].fixedFields : [],
-        callApi,
-        showSuccess,
-        showError
+        fieldsToHide: index > 0 ? ancestors[index - 1].fixedFields : []
       },
       index
     )) }),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsxs13(
       Box12,
       {
         sx: {
@@ -3488,75 +4003,81 @@ var GenericDataGrid = ({
           borderBottom: `1px solid ${theme.palette.divider}`,
           borderTopLeftRadius: theme.shape.borderRadius,
           borderTopRightRadius: theme.shape.borderRadius,
-          ml: 2 + ancestors.length * 4,
+          ml: anidada ? 0 : 2 + ancestors.length * 4,
           // Margen dinámico basado en jerarquía
-          mr: 2
+          mr: anidada ? 0 : 2,
+          minHeight: anidada ? ALTO_TITULO_ANIDADA : void 0,
+          boxSizing: "border-box",
+          display: "flex",
+          alignItems: "center",
+          gap: 1
         },
-        children: /* @__PURE__ */ jsxs12(Typography8, { variant: "subtitle2", component: "div", children: [
-          cambiarGuionesBajosPorEspacios(tableDefinition.title || tableDefinition.name),
-          " - ",
-          getFilteredRowCount() === getRowCount() ? `${getRowCount()} registros` : `${getFilteredRowCount()} (F)`
-        ] })
+        children: [
+          /* @__PURE__ */ jsxs13(Typography8, { variant: "subtitle2", component: "div", children: [
+            titulo ?? cambiarGuionesBajosPorEspacios(tableDefinition.title || tableDefinition.name),
+            " - ",
+            filteredRows.length === tableData.length ? `${tableData.length} registros` : `${filteredRows.length} (F)`
+          ] }),
+          loading && /* @__PURE__ */ jsx18(CircularProgress4, { size: 14, color: "inherit" })
+        ]
       }
     ),
-    /* @__PURE__ */ jsxs12(
+    /* @__PURE__ */ jsxs13(
       Box12,
       {
         sx: {
-          height: `min(${gridHeight}px, 100%)`,
-          // Altura dinámica aquí
+          // Una grilla anidada se acota con px (el alto que le dio la de arriba, o el de una wScreen): una wScreen
+          // tiene alto automático y ahí un porcentaje no se resuelve. La principal ocupa lo que quede de la pantalla.
+          height: anidada ? `${altoDeEstaGrilla === void 0 ? gridHeight : Math.min(gridHeight, altoDeEstaGrilla)}px` : `min(${gridHeight}px, 100%)`,
           maxHeight: "100%",
           boxSizing: "border-box",
           position: "relative",
           // CRÍTICO para el centrado del fallback
           overflowX: "auto",
           overflowY: "auto",
-          px: 2,
-          ml: ancestors.length * 4,
+          px: anidada ? 0 : 2,
+          ml: anidada ? 0 : ancestors.length * 4,
           // Indentación de la grilla principal
-          pb: 3
+          pb: anidada ? 0 : 3
         },
         children: [
-          /* @__PURE__ */ jsx16(
+          /* @__PURE__ */ jsx18(EstadoGrillaContext.Provider, { value: estadoGrilla, children: /* @__PURE__ */ jsx18(VistaGrillaContext.Provider, { value: vistaGrilla, children: /* @__PURE__ */ jsx18(DetallesGrillaContext.Provider, { value: detallesGrilla, children: /* @__PURE__ */ jsx18(
             DataGrid,
             {
               className: "rdg-light",
               ref: dataGridRef,
               columns,
-              rows: filteredRows.map((row) => ({
-                ...row,
-                style: exitingRowIds.has(getPrimaryKeyValues(row, primaryKey)) ? { maxHeight: 0, opacity: 0, overflow: "hidden" } : { maxHeight: "35px", opacity: 1 }
-              })),
+              rows: filasMostradas,
+              rowClass,
               columnWidths,
               onColumnWidthsChange: setColumnWidths,
               enableVirtualization: true,
-              rowKeyGetter: (row) => getPrimaryKeyValues(row, primaryKey),
+              rowKeyGetter,
               onSelectedRowsChange: setSelectedRows,
               onSelectedCellChange: handleSelectedCellChange,
               onRowsChange: handleRowsChange,
               sortColumns,
               onSortColumnsChange: handleSortColumnsChange,
               selectedRows,
-              rowHeight: (_row) => ROW_HEIGHT,
-              style: { ...{ height: "100%", width: "100%", boxSizing: "border-box" }, ...gridStyles },
+              rowHeight,
+              style: estiloGrilla,
               headerRowHeight: HEADER_ROW_HEIGHT,
               topSummaryRows: summaryRows,
-              bottomSummaryRows: [bottomSummaryRow],
+              bottomSummaryRows,
               summaryRowHeight: SUMMARY_ROW_HEIGHT,
-              renderers: void 0,
               onCellMouseDown: handleCellMouseDown,
               onCellDoubleClick: handleCellDoubleClick,
               onCellClick: handleCellClick,
               onCellKeyDown: handleCellKeyDown
             }
-          ),
-          fallBackMessage && /* @__PURE__ */ jsx16(
+          ) }) }) }),
+          fallBackMessage && /* @__PURE__ */ jsx18(
             Box12,
             {
               sx: {
                 position: "absolute",
                 top: filterHeight + HEADER_ROW_HEIGHT + 1,
-                bottom: 102,
+                bottom: anidada ? (conPie ? SUMMARY_ROW_HEIGHT : 0) + 4 : 102,
                 left: 18,
                 right: 0,
                 display: "flex",
@@ -3567,13 +4088,13 @@ var GenericDataGrid = ({
                 zIndex: tableData.length === 0 ? 10 : 1
                 // Mantenemos el zIndex superior para el estado vacío total
               },
-              children: /* @__PURE__ */ jsx16(Typography8, { variant: "body2", color: "textSecondary", children: fallBackMessage })
+              children: /* @__PURE__ */ jsx18(Typography8, { variant: "body2", color: "textSecondary", children: fallBackMessage })
             }
           )
         ]
       }
     ),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx18(
       ExportDialog,
       {
         open: openExportDialog,
@@ -3581,19 +4102,19 @@ var GenericDataGrid = ({
         tableDefinition,
         tableData,
         filteredRows,
-        username: window.my?.config?.username || "anonymous"
+        username: usuario || "anonymous"
       }
     ),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx18(
       ConfirmDialog,
       {
         open: openConfirmDialog,
         onClose: handleConfirmDelete,
         title: "Confirmar Eliminaci\xF3n",
-        message: rowToDelete && rowToDelete[NEW_ROW_INDICATOR2] ? `\xBFEst\xE1s seguro de que quieres eliminar esta nueva fila (ID: ${getPrimaryKeyValues(rowToDelete, primaryKey)}) localmente?` : rowToDelete ? `\xBFEst\xE1s seguro de que quieres eliminar la fila con ID: ${getPrimaryKeyValues(rowToDelete, primaryKey)} de la base de datos? Esta acci\xF3n es irreversible.` : "\xBFEst\xE1s seguro de que quieres eliminar este registro? Esta acci\xF3n es irreversible."
+        message: rowToDelete && rowToDelete[NEW_ROW_INDICATOR] ? `\xBFEst\xE1s seguro de que quieres eliminar esta nueva fila (ID: ${getPrimaryKeyValues(rowToDelete, primaryKey)}) localmente?` : rowToDelete ? `\xBFEst\xE1s seguro de que quieres eliminar la fila con ID: ${getPrimaryKeyValues(rowToDelete, primaryKey)} de la base de datos? Esta acci\xF3n es irreversible.` : "\xBFEst\xE1s seguro de que quieres eliminar este registro? Esta acci\xF3n es irreversible."
       }
     ),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx18(
       DataGridOptionsDialog,
       {
         open: openDataGridOptions,
@@ -3602,7 +4123,7 @@ var GenericDataGrid = ({
         anchorEl: dataGridOptionsAnchorEl
       }
     ),
-    /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx18(
       ImportDialog,
       {
         open: openImportDialog,
@@ -3611,21 +4132,21 @@ var GenericDataGrid = ({
         loading
       }
     ),
-    tableDefinition && /* @__PURE__ */ jsx16(
+    /* @__PURE__ */ jsx18(
       Dialog4,
       {
         open: openVerticalEditDialog,
         onClose: () => setOpenVerticalEditDialog(false),
         maxWidth: "sm",
         fullWidth: true,
-        children: rowToEditVertical && /* @__PURE__ */ jsx16(
+        children: rowToEditVertical && /* @__PURE__ */ jsx18(
           VerticalEditorPage,
           {
             tableName,
             tableDefinition,
             initialData: rowToEditVertical,
             fixedFields,
-            isNewRow: !!rowToEditVertical[NEW_ROW_INDICATOR2],
+            isNewRow: !!rowToEditVertical[NEW_ROW_INDICATOR],
             onSaveSuccess: (savedRow, isNewItem) => {
               setRowToEditVertical(savedRow);
               setTableData((prevData) => {
@@ -3643,11 +4164,11 @@ var GenericDataGrid = ({
             onClose: () => {
               const originalRow = rowAtEditStartRef.current;
               const serverRow = rowToEditVertical;
-              if (originalRow && serverRow && tableDefinition) {
+              if (originalRow && serverRow) {
                 const rowId = getPrimaryKeyValues(serverRow, primaryKey);
                 const changedFields = tableDefinition.fields.filter((f) => !sameValue(originalRow[f.name], serverRow[f.name])).map((f) => f.name);
                 if (changedFields.length > 0) {
-                  setCellFeedbackMap((prev) => {
+                  estadoGrilla.setFeedback((prev) => {
                     const next = new Map(prev);
                     changedFields.forEach((fieldName) => {
                       next.set(`${rowId}-${fieldName}`, { rowId, columnKey: fieldName, type: "success" });
@@ -3663,23 +4184,23 @@ var GenericDataGrid = ({
         )
       }
     )
-  ] });
+  ] }) });
 };
 var GenericDataGrid_default = GenericDataGrid;
 
 // src/App.tsx
-import React22, { useEffect as useEffect11 } from "react";
+import React25, { useEffect as useEffect13, useMemo as useMemo14 } from "react";
 import { BrowserRouter, Routes, Route, useLocation as useLocation6, Navigate as Navigate2, Outlet as Outlet2 } from "react-router-dom";
 
 // src/components/MainLayout.tsx
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect8 } from "react";
 import { Outlet } from "react-router-dom";
 import {
-  Box as Box15,
+  Box as Box14,
   AppBar,
   Toolbar,
-  Typography as Typography11,
-  Button as Button7,
+  Typography as Typography10,
+  Button as Button6,
   Drawer,
   CssBaseline,
   IconButton as IconButton4,
@@ -3688,13 +4209,13 @@ import {
 } from "@mui/material";
 
 // src/contexts/AppContext.tsx
-import { createContext as createContext2, useContext as useContext2, useState as useState13, useEffect as useEffect4, useCallback as useCallback12, useMemo as useMemo9, useRef as useRef4 } from "react";
+import { createContext as createContext4, useContext as useContext5, useState as useState13, useEffect as useEffect6, useCallback as useCallback12, useMemo as useMemo10, useRef as useRef7 } from "react";
 import { useLocation, useNavigate } from "react-router-dom";
 import { useSelector as useSelector2, useDispatch as useDispatch2 } from "react-redux";
-import { jsx as jsx17 } from "react/jsx-runtime";
-var AuthContext = createContext2(void 0);
+import { jsx as jsx19 } from "react/jsx-runtime";
+var AuthContext = createContext4(void 0);
 var useApp = () => {
-  const context = useContext2(AuthContext);
+  const context = useContext5(AuthContext);
   if (!context) {
     throw new Error("useApp must be used within an AppProvider");
   }
@@ -3705,9 +4226,11 @@ var AppProvider = ({ children, publicPaths = [] }) => {
   console.log("AppProvider rendered/re-rendered");
   const [isLoggedIn, setIsLoggedIn] = useState13(false);
   const [showSessionExpiredMessage, setShowSessionExpiredMessage] = useState13(false);
-  const isRedirectingRef = useRef4(false);
+  const isRedirectingRef = useRef7(false);
+  const huboSesionRef = useRef7(false);
   const dispatch = useDispatch2();
   const clientContext = useSelector2((state) => state.clientContext);
+  if (clientContext.status === "succeeded") huboSesionRef.current = true;
   const navigate = useNavigate();
   const handleExpiredSessionRedirect = useCallback12(() => {
     isRedirectingRef.current = true;
@@ -3729,6 +4252,7 @@ var AppProvider = ({ children, publicPaths = [] }) => {
       const response = await fetchApi("/keep-alive.json", { method: "GET" });
       if (isRedirectingRef.current) return;
       if (response.ok) {
+        huboSesionRef.current = true;
         setIsLoggedIn(true);
         setShowSessionExpiredMessage(false);
         if (clientContext.status === "idle" || clientContext.status === "failed") {
@@ -3743,11 +4267,11 @@ var AppProvider = ({ children, publicPaths = [] }) => {
       } else {
         setIsLoggedIn(false);
         dispatch(clearClientContext());
-        if (!showSessionExpiredMessage && !isCurrentPathPublic()) {
+        if (!showSessionExpiredMessage && !isCurrentPathPublic() && huboSesionRef.current) {
           console.warn("Sesi\xF3n inv\xE1lida en ruta protegida. Mostrando modal.");
           setShowSessionExpiredMessage(true);
         } else {
-          console.log("Sesi\xF3n inv\xE1lida, pero estamos en ruta p\xFAblica. Todo bien.");
+          console.log("Sesi\xF3n inv\xE1lida, pero no hay nada que avisar (ruta p\xFAblica o nunca hubo sesi\xF3n).");
         }
       }
     } catch (error) {
@@ -3755,19 +4279,19 @@ var AppProvider = ({ children, publicPaths = [] }) => {
       setIsLoggedIn(false);
       dispatch(clearClientContext());
       const isPublic = publicPaths.some((p) => location.pathname === p || location.pathname.startsWith(p + "/"));
-      if (!showSessionExpiredMessage && !isCurrentPathPublic()) {
+      if (!showSessionExpiredMessage && !isCurrentPathPublic() && huboSesionRef.current) {
         setShowSessionExpiredMessage(true);
       }
     }
-  }, [dispatch, clientContext.status, showSessionExpiredMessage]);
-  useEffect4(() => {
+  }, [dispatch, clientContext.status, showSessionExpiredMessage, isCurrentPathPublic]);
+  useEffect6(() => {
     checkSession();
     const intervalId = setInterval(checkSession, 15 * 1e3);
     return () => {
       clearInterval(intervalId);
     };
   }, [checkSession]);
-  const authContextValue = useMemo9(() => ({
+  const authContextValue = useMemo10(() => ({
     isLoggedIn,
     setIsLoggedIn,
     checkSession,
@@ -3782,7 +4306,7 @@ var AppProvider = ({ children, publicPaths = [] }) => {
     setShowSessionExpiredMessage,
     handleExpiredSessionRedirect
   ]);
-  return /* @__PURE__ */ jsx17(AuthContext.Provider, { value: authContextValue, children });
+  return /* @__PURE__ */ jsx19(AuthContext.Provider, { value: authContextValue, children });
 };
 
 // src/components/MainLayout.tsx
@@ -3791,8 +4315,8 @@ import MenuIcon from "@mui/icons-material/Menu";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 
 // src/components/SideMenu.tsx
-import React12, { useEffect as useEffect5 } from "react";
-import { List as List2, ListItem, ListItemButton as ListItemButton2, ListItemIcon as ListItemIcon2, ListItemText as ListItemText2, Divider as Divider2, Box as Box14, Typography as Typography10, Collapse } from "@mui/material";
+import React15, { useEffect as useEffect7 } from "react";
+import { List as List2, ListItem, ListItemButton as ListItemButton2, ListItemIcon as ListItemIcon2, ListItemText as ListItemText2, Divider as Divider2, Box as Box13, Typography as Typography9, Collapse } from "@mui/material";
 import ExpandLess from "@mui/icons-material/ExpandLess";
 import ExpandMore from "@mui/icons-material/ExpandMore";
 import TableChartIcon from "@mui/icons-material/TableChart";
@@ -3805,46 +4329,7 @@ import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
 import UnfoldLessIcon from "@mui/icons-material/UnfoldLess";
 import { useNavigate as useNavigate2, useLocation as useLocation2 } from "react-router-dom";
 import { blue, orange, teal, red, grey } from "@mui/material/colors";
-
-// src/pages/WScreens.tsx
-import { Box as Box13, Typography as Typography9, Paper as Paper2 } from "@mui/material";
-import ConstructionIcon from "@mui/icons-material/Construction";
-import WarningAmberIcon2 from "@mui/icons-material/WarningAmber";
-import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
-var MyCustomDashboard = ({ screenName }) => {
-  return /* @__PURE__ */ jsx18(Box13, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsxs13(Paper2, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600 }, children: [
-    /* @__PURE__ */ jsxs13(Typography9, { variant: "h5", component: "h1", gutterBottom: true, children: [
-      "\xA1Bienvenido a tu WScreen: ",
-      screenName,
-      "!"
-    ] }),
-    /* @__PURE__ */ jsx18(Typography9, { variant: "body1", color: "text.secondary", children: "Esta es una pantalla de interfaz de usuario personalizada." }),
-    /* @__PURE__ */ jsx18(Box13, { sx: { mt: 3 }, children: /* @__PURE__ */ jsx18(ConstructionIcon, { sx: { fontSize: 80, color: "primary.main" } }) })
-  ] }) });
-};
-var FallbackWScreen = ({ screenName }) => {
-  return /* @__PURE__ */ jsx18(Box13, { sx: { p: 4, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center", height: "100%" }, children: /* @__PURE__ */ jsxs13(Paper2, { elevation: 3, sx: { p: 4, textAlign: "center", maxWidth: 600, backgroundColor: "warning.light", border: "1px solid orange" }, children: [
-    /* @__PURE__ */ jsx18(Typography9, { variant: "h5", component: "h1", gutterBottom: true, color: "warning.dark", children: "WScreen No Implementada" }),
-    /* @__PURE__ */ jsxs13(Typography9, { variant: "body1", color: "warning.dark", children: [
-      'No se encontr\xF3 un componente implementado para la **WScreen**: **`"$',
-      screenName,
-      '"`**. Por favor, verifica el `menuType` en la definici\xF3n del men\xFA o aseg\xFArate de que el componente est\xE9 correctamente importado y mapeado en el frontend.'
-    ] }),
-    /* @__PURE__ */ jsx18(Box13, { sx: { mt: 3 }, children: /* @__PURE__ */ jsx18(WarningAmberIcon2, { sx: { fontSize: 80, color: "warning.dark" } }) })
-  ] }) });
-};
-var wScreens = {
-  "MyCustomDashboard": MyCustomDashboard
-  // Agrega más componentes de wScreen aquí:
-  // 'AnotherWScreen': AnotherWScreenComponent,
-};
-var extendWScreens = (newWScreens) => {
-  wScreens = { ...wScreens, ...newWScreens };
-  console.log("wScreens extendidos:", wScreens);
-};
-
-// src/components/SideMenu.tsx
-import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
 var MenuListItem = ({ item, level, onMenuItemClick }) => {
   const navigate = useNavigate2();
   const location = useLocation2();
@@ -3885,17 +4370,17 @@ var MenuListItem = ({ item, level, onMenuItemClick }) => {
   const getIcon = (item2) => {
     switch (item2.menuType) {
       case "table":
-        return /* @__PURE__ */ jsx19(TableChartIcon, { sx: { color: blue[700] } });
+        return /* @__PURE__ */ jsx20(TableChartIcon, { sx: { color: blue[700] } });
       case "proc":
-        return /* @__PURE__ */ jsx19(DnsIcon, { sx: { color: teal[700] } });
+        return /* @__PURE__ */ jsx20(DnsIcon, { sx: { color: teal[700] } });
       case "menu":
-        return /* @__PURE__ */ jsx19(FolderIcon, { sx: { color: orange[800] } });
+        return /* @__PURE__ */ jsx20(FolderIcon, { sx: { color: orange[800] } });
       default:
         const WScreenComponent = wScreens[item2.menuType];
         if (WScreenComponent !== void 0) {
-          return /* @__PURE__ */ jsx19(DesktopWindowsIcon, { sx: { color: grey[700] } });
+          return /* @__PURE__ */ jsx20(DesktopWindowsIcon, { sx: { color: grey[700] } });
         }
-        return /* @__PURE__ */ jsx19(WarningAmberIcon3, { sx: { color: red[500] } });
+        return /* @__PURE__ */ jsx20(WarningAmberIcon3, { sx: { color: red[500] } });
     }
   };
   const currentPath = location.pathname;
@@ -3909,8 +4394,8 @@ var MenuListItem = ({ item, level, onMenuItemClick }) => {
   } else if (item.menuType !== "menu") {
     isSelected = currentPath.startsWith(`/wScreens/${item.menuType}`) || currentPath.startsWith(`/wScreens-fallback/${item.menuType}`);
   }
-  const itemRef = React12.useRef(null);
-  useEffect5(() => {
+  const itemRef = React15.useRef(null);
+  useEffect7(() => {
     if (isSelected && itemRef.current) {
       itemRef.current.scrollIntoView({ behavior: "smooth", block: "nearest" });
     }
@@ -3923,13 +4408,13 @@ var MenuListItem = ({ item, level, onMenuItemClick }) => {
         sx: { pl: level * 2 },
         selected: isSelected,
         children: [
-          /* @__PURE__ */ jsx19(ListItemIcon2, { sx: { minWidth: "38px" }, children: getIcon(item) }),
-          /* @__PURE__ */ jsx19(ListItemText2, { primary: item.label || item.name }),
-          item.menuType === "menu" ? open ? /* @__PURE__ */ jsx19(ExpandLess, {}) : /* @__PURE__ */ jsx19(ExpandMore, {}) : null
+          /* @__PURE__ */ jsx20(ListItemIcon2, { sx: { minWidth: "38px" }, children: getIcon(item) }),
+          /* @__PURE__ */ jsx20(ListItemText2, { primary: item.label || item.name }),
+          item.menuType === "menu" ? open ? /* @__PURE__ */ jsx20(ExpandLess, {}) : /* @__PURE__ */ jsx20(ExpandMore, {}) : null
         ]
       }
     ),
-    item.menuType === "menu" && /* @__PURE__ */ jsx19(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsx19(List2, { component: "div", disablePadding: true, children: item.menuContent.map((subItem) => /* @__PURE__ */ jsx19(
+    item.menuType === "menu" && /* @__PURE__ */ jsx20(Collapse, { in: open, timeout: "auto", unmountOnExit: true, children: /* @__PURE__ */ jsx20(List2, { component: "div", disablePadding: true, children: item.menuContent.map((subItem) => /* @__PURE__ */ jsx20(
       MenuListItem,
       {
         item: subItem,
@@ -3959,10 +4444,10 @@ var SideMenu = ({ onMenuItemClick }) => {
     dispatch(setAllSubMenusOpen(!isMostlyOpen));
   };
   if (!clientContext || !clientContext.menu) {
-    return /* @__PURE__ */ jsx19(Box14, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx19(Typography10, { variant: "body2", color: "text.secondary", children: "Cargando men\xFA..." }) });
+    return /* @__PURE__ */ jsx20(Box13, { sx: { p: 2, textAlign: "center" }, children: /* @__PURE__ */ jsx20(Typography9, { variant: "body2", color: "text.secondary", children: "Cargando men\xFA..." }) });
   }
   const isHomeSelected = location.pathname === "/home";
-  useEffect5(() => {
+  useEffect7(() => {
     if (!clientContext?.menu) return;
     const expandParents = (items, targetPath, parentNames = []) => {
       const pathParts = targetPath.split("/");
@@ -3991,19 +4476,19 @@ var SideMenu = ({ onMenuItemClick }) => {
     };
     expandParents(clientContext.menu, location.pathname);
   }, [location.pathname, clientContext, dispatch]);
-  return /* @__PURE__ */ jsxs14(Box14, { sx: { width: "100%", flexShrink: 0 }, children: [
-    clientContext.menu.some((item) => item.menuType === "menu") && /* @__PURE__ */ jsx19(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs14(ListItemButton2, { onClick: handleToggleAllSubMenus, children: [
-      /* @__PURE__ */ jsx19(ListItemIcon2, { sx: { minWidth: "38px" }, children: isMostlyOpen ? /* @__PURE__ */ jsx19(UnfoldLessIcon, {}) : /* @__PURE__ */ jsx19(UnfoldMoreIcon, {}) }),
-      /* @__PURE__ */ jsx19(ListItemText2, { primary: isMostlyOpen ? "colapsar " : "expandir" })
+  return /* @__PURE__ */ jsxs14(Box13, { sx: { width: "100%", flexShrink: 0 }, children: [
+    clientContext.menu.some((item) => item.menuType === "menu") && /* @__PURE__ */ jsx20(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs14(ListItemButton2, { onClick: handleToggleAllSubMenus, children: [
+      /* @__PURE__ */ jsx20(ListItemIcon2, { sx: { minWidth: "38px" }, children: isMostlyOpen ? /* @__PURE__ */ jsx20(UnfoldLessIcon, {}) : /* @__PURE__ */ jsx20(UnfoldMoreIcon, {}) }),
+      /* @__PURE__ */ jsx20(ListItemText2, { primary: isMostlyOpen ? "colapsar " : "expandir" })
     ] }) }),
-    /* @__PURE__ */ jsx19(Divider2, {}),
+    /* @__PURE__ */ jsx20(Divider2, {}),
     /* @__PURE__ */ jsxs14(List2, { children: [
-      /* @__PURE__ */ jsx19(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs14(ListItemButton2, { onClick: handleHomeClick, selected: isHomeSelected, children: [
-        /* @__PURE__ */ jsx19(ListItemIcon2, { sx: { minWidth: "38px" }, children: /* @__PURE__ */ jsx19(HomeIcon, {}) }),
-        /* @__PURE__ */ jsx19(ListItemText2, { primary: "Inicio" })
+      /* @__PURE__ */ jsx20(ListItem, { disablePadding: true, children: /* @__PURE__ */ jsxs14(ListItemButton2, { onClick: handleHomeClick, selected: isHomeSelected, children: [
+        /* @__PURE__ */ jsx20(ListItemIcon2, { sx: { minWidth: "38px" }, children: /* @__PURE__ */ jsx20(HomeIcon, {}) }),
+        /* @__PURE__ */ jsx20(ListItemText2, { primary: "Inicio" })
       ] }) }),
-      /* @__PURE__ */ jsx19(Divider2, {}),
-      clientContext.menu.map((menuItem) => /* @__PURE__ */ jsx19(
+      /* @__PURE__ */ jsx20(Divider2, {}),
+      clientContext.menu.map((menuItem) => /* @__PURE__ */ jsx20(
         MenuListItem,
         {
           item: menuItem,
@@ -4046,7 +4531,7 @@ var useLogout = () => {
 var useLogout_default = useLogout;
 
 // src/components/MainLayout.tsx
-import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
 var drawerWidth = 240;
 var MainLayout = () => {
   const { clientContext } = useApp();
@@ -4055,7 +4540,7 @@ var MainLayout = () => {
   const dispatch = useAppDispatch();
   const theme = useTheme5();
   const isMobile = useMediaQuery(theme.breakpoints.down("sm"));
-  useEffect6(() => {
+  useEffect8(() => {
     if (isMobile && isDrawerOpen) {
       dispatch(setDrawerOpen(false));
     }
@@ -4069,12 +4554,12 @@ var MainLayout = () => {
     }
   };
   if (!clientContext) {
-    return /* @__PURE__ */ jsx20(Box15, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }, children: /* @__PURE__ */ jsx20(Typography11, { children: "Cargando dise\xF1o de la aplicaci\xF3n..." }) });
+    return /* @__PURE__ */ jsx21(Box14, { sx: { display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }, children: /* @__PURE__ */ jsx21(Typography10, { children: "Cargando dise\xF1o de la aplicaci\xF3n..." }) });
   }
   const appBarOffset = theme.mixins.toolbar;
-  return /* @__PURE__ */ jsxs15(Box15, { sx: { display: "flex", height: "100vh" }, children: [
-    /* @__PURE__ */ jsx20(CssBaseline, {}),
-    /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs15(Box14, { sx: { display: "flex", height: "100vh" }, children: [
+    /* @__PURE__ */ jsx21(CssBaseline, {}),
+    /* @__PURE__ */ jsx21(
       AppBar,
       {
         position: "fixed",
@@ -4094,7 +4579,7 @@ var MainLayout = () => {
           }
         },
         children: /* @__PURE__ */ jsxs15(Toolbar, { children: [
-          /* @__PURE__ */ jsx20(
+          /* @__PURE__ */ jsx21(
             IconButton4,
             {
               color: "inherit",
@@ -4104,10 +4589,10 @@ var MainLayout = () => {
               sx: {
                 marginRight: 2
               },
-              children: isDrawerOpen ? /* @__PURE__ */ jsx20(ChevronLeftIcon, {}) : /* @__PURE__ */ jsx20(MenuIcon, {})
+              children: isDrawerOpen ? /* @__PURE__ */ jsx21(ChevronLeftIcon, {}) : /* @__PURE__ */ jsx21(MenuIcon, {})
             }
           ),
-          !isDrawerOpen && /* @__PURE__ */ jsx20(
+          !isDrawerOpen && /* @__PURE__ */ jsx21(
             "img",
             {
               src: `${envConfig.backendUrl}/img/logo-128.png`,
@@ -4115,14 +4600,14 @@ var MainLayout = () => {
               style: { height: "32px", marginRight: "12px", objectFit: "contain" }
             }
           ),
-          /* @__PURE__ */ jsx20(Typography11, { variant: "h6", noWrap: true, component: "div", sx: { flexGrow: 1 }, children: isDrawerOpen ? "" : clientContext.config.title }),
-          /* @__PURE__ */ jsx20(Typography11, { variant: "subtitle1", component: "div", sx: { mr: 2 }, children: clientContext.username }),
-          /* @__PURE__ */ jsx20(
-            Button7,
+          /* @__PURE__ */ jsx21(Typography10, { variant: "h6", noWrap: true, component: "div", sx: { flexGrow: 1 }, children: isDrawerOpen ? "" : clientContext.config.title }),
+          /* @__PURE__ */ jsx21(Typography10, { variant: "subtitle1", component: "div", sx: { mr: 2 }, children: clientContext.username }),
+          /* @__PURE__ */ jsx21(
+            Button6,
             {
               color: "inherit",
               onClick: logout,
-              startIcon: /* @__PURE__ */ jsx20(LogoutIcon, {}),
+              startIcon: /* @__PURE__ */ jsx21(LogoutIcon, {}),
               children: "Salir"
             }
           )
@@ -4159,7 +4644,7 @@ var MainLayout = () => {
                 gap: 1.5
               },
               children: [
-                /* @__PURE__ */ jsx20(
+                /* @__PURE__ */ jsx21(
                   "img",
                   {
                     src: `${envConfig.backendUrl}/img/logo-128.png`,
@@ -4167,16 +4652,16 @@ var MainLayout = () => {
                     style: { height: "32px", objectFit: "contain" }
                   }
                 ),
-                /* @__PURE__ */ jsx20(Typography11, { variant: "h6", sx: { fontWeight: "bold" }, children: clientContext.config.title })
+                /* @__PURE__ */ jsx21(Typography10, { variant: "h6", sx: { fontWeight: "bold" }, children: clientContext.config.title })
               ]
             }
           ),
-          /* @__PURE__ */ jsx20(SideMenu_default, { onMenuItemClick: handleDrawerCloseMobile })
+          /* @__PURE__ */ jsx21(SideMenu_default, { onMenuItemClick: handleDrawerCloseMobile })
         ]
       }
     ),
-    /* @__PURE__ */ jsx20(
-      Box15,
+    /* @__PURE__ */ jsx21(
+      Box14,
       {
         component: "main",
         sx: {
@@ -4203,7 +4688,7 @@ var MainLayout = () => {
           flexDirection: "column",
           width: isDrawerOpen ? `calc(100% - ${drawerWidth}px)` : "100%"
         },
-        children: /* @__PURE__ */ jsx20(Outlet, {})
+        children: /* @__PURE__ */ jsx21(Outlet, {})
       }
     )
   ] });
@@ -4211,8 +4696,8 @@ var MainLayout = () => {
 var MainLayout_default = MainLayout;
 
 // src/components/SessionExpiredMessage.tsx
-import { Box as Box16, Typography as Typography12, Button as Button8, Modal } from "@mui/material";
-import { jsx as jsx21, jsxs as jsxs16 } from "react/jsx-runtime";
+import { Box as Box15, Typography as Typography11, Button as Button7, Modal } from "@mui/material";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 var style = {
   position: "absolute",
   top: "50%",
@@ -4231,7 +4716,7 @@ var SessionExpiredMessage = () => {
   const handleClose = () => {
     handleExpiredSessionRedirect();
   };
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx22(
     Modal,
     {
       open: showSessionExpiredMessage,
@@ -4251,10 +4736,10 @@ var SessionExpiredMessage = () => {
           }
         }
       },
-      children: /* @__PURE__ */ jsxs16(Box16, { sx: style, children: [
-        /* @__PURE__ */ jsx21(Typography12, { id: "session-expired-modal-title", variant: "h6", component: "h2", gutterBottom: true, children: "\xA1Sesi\xF3n Expirada!" }),
-        /* @__PURE__ */ jsx21(Typography12, { id: "session-expired-modal-description", sx: { mt: 2, mb: 3 }, children: "Tu sesi\xF3n ha expirado por inactividad o por seguridad. Por favor, inicia sesi\xF3n de nuevo." }),
-        /* @__PURE__ */ jsx21(Button8, { variant: "contained", color: "primary", onClick: handleClose, children: "Ir al Login" })
+      children: /* @__PURE__ */ jsxs16(Box15, { sx: style, children: [
+        /* @__PURE__ */ jsx22(Typography11, { id: "session-expired-modal-title", variant: "h6", component: "h2", gutterBottom: true, children: "\xA1Sesi\xF3n Expirada!" }),
+        /* @__PURE__ */ jsx22(Typography11, { id: "session-expired-modal-description", sx: { mt: 2, mb: 3 }, children: "Tu sesi\xF3n ha expirado por inactividad o por seguridad. Por favor, inicia sesi\xF3n de nuevo." }),
+        /* @__PURE__ */ jsx22(Button7, { variant: "contained", color: "primary", onClick: handleClose, children: "Ir al Login" })
       ] })
     }
   );
@@ -4262,27 +4747,27 @@ var SessionExpiredMessage = () => {
 var SessionExpiredMessage_default = SessionExpiredMessage;
 
 // src/pages/HomePage.tsx
-import { Box as Box17, Typography as Typography13 } from "@mui/material";
-import { jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
+import { Box as Box16, Typography as Typography12 } from "@mui/material";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 var HomePage = () => {
   const { clientContext } = useApp();
-  return /* @__PURE__ */ jsxs17(Box17, { sx: { p: 3 }, children: [
-    /* @__PURE__ */ jsx22(Typography13, { variant: "h4", component: "h1", gutterBottom: true, children: `Bienvenido/a ${clientContext?.username}` }),
-    /* @__PURE__ */ jsx22(Typography13, { variant: "body1", children: "Usa el men\xFA lateral para navegar por las diferentes secciones." })
+  return /* @__PURE__ */ jsxs17(Box16, { sx: { p: 3 }, children: [
+    /* @__PURE__ */ jsx23(Typography12, { variant: "h4", component: "h1", gutterBottom: true, children: `Bienvenido/a ${clientContext?.username}` }),
+    /* @__PURE__ */ jsx23(Typography12, { variant: "body1", children: "Usa el men\xFA lateral para navegar por las diferentes secciones." })
   ] });
 };
 var HomePage_default = HomePage;
 
 // src/pages/LogoutPage.tsx
-import { useEffect as useEffect7 } from "react";
-import { Box as Box18, Typography as Typography14, CircularProgress as CircularProgress5 } from "@mui/material";
-import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
+import { useEffect as useEffect9 } from "react";
+import { Box as Box17, Typography as Typography13, CircularProgress as CircularProgress5 } from "@mui/material";
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 var LogoutPage = () => {
   const logout = useLogout_default();
-  useEffect7(() => {
+  useEffect9(() => {
     logout();
   }, [logout]);
-  return /* @__PURE__ */ jsxs18(Box18, { sx: {
+  return /* @__PURE__ */ jsxs18(Box17, { sx: {
     display: "flex",
     flexDirection: "column",
     justifyContent: "center",
@@ -4290,21 +4775,21 @@ var LogoutPage = () => {
     height: "100vh",
     textAlign: "center"
   }, children: [
-    /* @__PURE__ */ jsx23(CircularProgress5, { size: 60 }),
-    /* @__PURE__ */ jsx23(Typography14, { variant: "h6", sx: { mt: 2 }, children: "Cerrando sesi\xF3n..." })
+    /* @__PURE__ */ jsx24(CircularProgress5, { size: 60 }),
+    /* @__PURE__ */ jsx24(Typography13, { variant: "h6", sx: { mt: 2 }, children: "Cerrando sesi\xF3n..." })
   ] });
 };
 var LogoutPage_default = LogoutPage;
 
 // src/pages/LoginPage.tsx
 import { useState as useState14 } from "react";
-import { Button as Button9, TextField as TextField2, Typography as Typography15, Alert as Alert3, AlertTitle, Box as Box19, CircularProgress as CircularProgress6 } from "@mui/material";
+import { Button as Button8, TextField as TextField2, Typography as Typography14, Alert as Alert3, AlertTitle, Box as Box18, CircularProgress as CircularProgress6 } from "@mui/material";
 import { useForm, Controller } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import * as z from "zod";
 import { useNavigate as useNavigate4 } from "react-router-dom";
 import { useDispatch as useDispatch4 } from "react-redux";
-import { Fragment as Fragment2, jsx as jsx24, jsxs as jsxs19 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 var loginSchema = z.object({
   username: z.string().min(1, "El usuario es requerido"),
   // Añadir validación básica
@@ -4355,13 +4840,13 @@ var LoginPage = () => {
     } catch (error) {
       console.error("Error al iniciar sesi\xF3n:", error);
       setIsLoggedIn(false);
-      setLoginError(error.message || "Ocurri\xF3 un error al iniciar sesi\xF3n. Int\xE9ntalo de nuevo.");
+      setLoginError(mensajeDeError(error, "Ocurri\xF3 un error al iniciar sesi\xF3n. Int\xE9ntalo de nuevo."));
     } finally {
       setIsSubmitting(false);
     }
   };
-  return /* @__PURE__ */ jsx24(
-    Box19,
+  return /* @__PURE__ */ jsx25(
+    Box18,
     {
       display: "flex",
       alignItems: "center",
@@ -4369,7 +4854,7 @@ var LoginPage = () => {
       minHeight: "100vh",
       bgcolor: "#f5f5f5",
       children: /* @__PURE__ */ jsxs19(
-        Box19,
+        Box18,
         {
           width: "100%",
           maxWidth: "400px",
@@ -4378,24 +4863,24 @@ var LoginPage = () => {
           borderRadius: 8,
           boxShadow: 3,
           children: [
-            /* @__PURE__ */ jsx24(Box19, { sx: { display: "flex", justifyContent: "center", mb: 3 }, children: /* @__PURE__ */ jsx24(
+            /* @__PURE__ */ jsx25(Box18, { sx: { display: "flex", justifyContent: "center", mb: 3 }, children: /* @__PURE__ */ jsx25(
               "img",
               {
                 src: `${envConfig.backendUrl}/img/login-logo-icon.png`,
                 alt: "Logo",
-                style: { height: "80px", maxWidth: "100%", objectFit: "contain" }
+                style: { height: "192px", maxWidth: "100%", objectFit: "contain" }
               }
             ) }),
-            /* @__PURE__ */ jsx24(Typography15, { variant: "h5", align: "center", gutterBottom: true, sx: { fontWeight: "bold", color: "primary.main" }, children: "Iniciar Sesi\xF3n" }),
+            /* @__PURE__ */ jsx25(Typography14, { variant: "h5", align: "center", gutterBottom: true, sx: { fontWeight: "bold", color: "primary.main" }, children: "Iniciar Sesi\xF3n" }),
             /* @__PURE__ */ jsxs19("form", { onSubmit: handleSubmit(onSubmit), className: "space-y-4", children: [
               /* @__PURE__ */ jsxs19("div", { children: [
-                /* @__PURE__ */ jsx24("label", { htmlFor: "username", children: /* @__PURE__ */ jsx24(Typography15, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Usuario" }) }),
-                /* @__PURE__ */ jsx24(
+                /* @__PURE__ */ jsx25("label", { htmlFor: "username", children: /* @__PURE__ */ jsx25(Typography14, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Usuario" }) }),
+                /* @__PURE__ */ jsx25(
                   Controller,
                   {
                     name: "username",
                     control,
-                    render: ({ field }) => /* @__PURE__ */ jsx24(
+                    render: ({ field }) => /* @__PURE__ */ jsx25(
                       TextField2,
                       {
                         ...field,
@@ -4412,13 +4897,13 @@ var LoginPage = () => {
                 )
               ] }),
               /* @__PURE__ */ jsxs19("div", { children: [
-                /* @__PURE__ */ jsx24("label", { htmlFor: "password", children: /* @__PURE__ */ jsx24(Typography15, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Contrase\xF1a" }) }),
-                /* @__PURE__ */ jsx24(
+                /* @__PURE__ */ jsx25("label", { htmlFor: "password", children: /* @__PURE__ */ jsx25(Typography14, { variant: "subtitle1", component: "div", sx: { fontWeight: "medium" }, children: "Contrase\xF1a" }) }),
+                /* @__PURE__ */ jsx25(
                   Controller,
                   {
                     name: "password",
                     control,
-                    render: ({ field }) => /* @__PURE__ */ jsx24(
+                    render: ({ field }) => /* @__PURE__ */ jsx25(
                       TextField2,
                       {
                         ...field,
@@ -4434,14 +4919,14 @@ var LoginPage = () => {
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsx24(Button9, { type: "submit", fullWidth: true, variant: "contained", color: "primary", disabled: isSubmitting, sx: { mt: 2 }, children: isSubmitting ? /* @__PURE__ */ jsxs19(Fragment2, { children: [
-                /* @__PURE__ */ jsx24(CircularProgress6, { size: 20, sx: { mr: 1 } }),
+              /* @__PURE__ */ jsx25(Button8, { type: "submit", fullWidth: true, variant: "contained", color: "primary", disabled: isSubmitting, sx: { mt: 2 }, children: isSubmitting ? /* @__PURE__ */ jsxs19(Fragment3, { children: [
+                /* @__PURE__ */ jsx25(CircularProgress6, { size: 20, sx: { mr: 1 } }),
                 "Iniciando sesi\xF3n..."
               ] }) : "Iniciar Sesi\xF3n" })
             ] }),
             loginError && /* @__PURE__ */ jsxs19(Alert3, { severity: "error", sx: { mt: 2, maxHeight: "200px" }, children: [
               " ",
-              /* @__PURE__ */ jsx24(AlertTitle, { children: "Error" }),
+              /* @__PURE__ */ jsx25(AlertTitle, { children: "Error" }),
               loginError
             ] })
           ]
@@ -4453,11 +4938,11 @@ var LoginPage = () => {
 var LoginPage_default = LoginPage;
 
 // src/components/ProcedureForm.tsx
-import React16, { useState as useState15, useCallback as useCallback14, useMemo as useMemo10 } from "react";
+import React19, { useState as useState15, useCallback as useCallback14, useMemo as useMemo11 } from "react";
 import { useParams } from "react-router-dom";
 import {
   TextField as TextField3,
-  Button as Button10,
+  Button as Button9,
   FormControl as FormControl3,
   InputLabel as InputLabel2,
   Select as Select2,
@@ -4465,8 +4950,8 @@ import {
   Checkbox as Checkbox3,
   FormControlLabel as FormControlLabel3,
   FormHelperText as FormHelperText2,
-  Typography as Typography17,
-  Box as Box21,
+  Typography as Typography16,
+  Box as Box20,
   CircularProgress as CircularProgress7,
   Alert as Alert4,
   Divider as Divider3,
@@ -4474,14 +4959,14 @@ import {
 } from "@mui/material";
 
 // src/pages/procedure-results/SuccessDisplay.tsx
-import { Box as Box20, Typography as Typography16, Paper as Paper3 } from "@mui/material";
-import { jsx as jsx25, jsxs as jsxs20 } from "react/jsx-runtime";
+import { Box as Box19, Typography as Typography15, Paper as Paper3 } from "@mui/material";
+import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 var SuccessDisplay = ({ data }) => {
   return /* @__PURE__ */ jsxs20(Paper3, { elevation: 2, sx: { p: 2, mt: 2, bgcolor: "success.light", color: "success.contrastText" }, children: [
-    /* @__PURE__ */ jsx25(Typography16, { variant: "h6", sx: { fontSize: "1rem", mb: 1 }, children: "\xA1Operaci\xF3n Exitosa!" }),
-    /* @__PURE__ */ jsx25(Typography16, { variant: "body2", sx: { fontSize: "0.85rem" }, children: "Detalles del resultado:" }),
-    /* @__PURE__ */ jsx25(Box20, { sx: { bgcolor: "success.dark", p: 1, borderRadius: 1, mt: 1, overflowX: "auto" }, children: /* @__PURE__ */ jsx25("pre", { style: { margin: 0, fontSize: "0.75rem", color: "white" }, children: JSON.stringify(data, null, 2) }) }),
-    /* @__PURE__ */ jsx25(Typography16, { variant: "body2", sx: { fontSize: "0.8rem", mt: 1 }, children: "Puedes revisar los detalles anteriores o cerrar este mensaje." })
+    /* @__PURE__ */ jsx26(Typography15, { variant: "h6", sx: { fontSize: "1rem", mb: 1 }, children: "\xA1Operaci\xF3n Exitosa!" }),
+    /* @__PURE__ */ jsx26(Typography15, { variant: "body2", sx: { fontSize: "0.85rem" }, children: "Detalles del resultado:" }),
+    /* @__PURE__ */ jsx26(Box19, { sx: { bgcolor: "success.dark", p: 1, borderRadius: 1, mt: 1, overflowX: "auto" }, children: /* @__PURE__ */ jsx26("pre", { style: { margin: 0, fontSize: "0.75rem", color: "white" }, children: JSON.stringify(data, null, 2) }) }),
+    /* @__PURE__ */ jsx26(Typography15, { variant: "body2", sx: { fontSize: "0.8rem", mt: 1 }, children: "Puedes revisar los detalles anteriores o cerrar este mensaje." })
   ] });
 };
 var SuccessDisplay_default = SuccessDisplay;
@@ -4495,7 +4980,7 @@ var extendResultsOk = (newComponents) => {
 };
 
 // src/components/ProcedureForm.tsx
-import { jsx as jsx26, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs21 } from "react/jsx-runtime";
 var ProcedureForm = () => {
   const { procedureName } = useParams();
   const { clientContext } = useApp();
@@ -4504,7 +4989,7 @@ var ProcedureForm = () => {
   const [successMessage, setSuccessMessage] = useState15(null);
   const [executionLog, setExecutionLog] = useState15([]);
   const [procedureResultData, setProcedureResultData] = useState15(null);
-  const procedure = useMemo10(() => {
+  const procedure = useMemo11(() => {
     if (procedureName && clientContext?.procedure) {
       return clientContext.procedure[procedureName];
     }
@@ -4535,7 +5020,7 @@ var ProcedureForm = () => {
     });
     return initialValues;
   });
-  React16.useEffect(() => {
+  React19.useEffect(() => {
     if (procedure) {
       setValidationErrors({});
       setSuccessMessage(null);
@@ -4607,8 +5092,8 @@ var ProcedureForm = () => {
           if (value === "" || value === null) {
             processedValue = null;
           } else {
-            processedValue = parseFloat(value);
-            if (isNaN(processedValue)) {
+            processedValue = parseFloat(String(value));
+            if (typeof processedValue === "number" && isNaN(processedValue)) {
               paramError = `El valor para "${param.label || param.name}" no es un n\xFAmero v\xE1lido.`;
             }
           }
@@ -4618,8 +5103,8 @@ var ProcedureForm = () => {
           if (value === "" || value === null) {
             processedValue = null;
           } else {
-            processedValue = parseInt(value, 10);
-            if (isNaN(processedValue)) {
+            processedValue = parseInt(String(value), 10);
+            if (typeof processedValue === "number" && isNaN(processedValue)) {
               paramError = `El valor para "${param.label || param.name}" no es un entero v\xE1lido.`;
             }
           }
@@ -4633,9 +5118,9 @@ var ProcedureForm = () => {
             processedValue = null;
           } else {
             try {
-              processedValue = JSON.parse(value);
+              processedValue = JSON.parse(String(value));
             } catch (jsonError) {
-              paramError = `Error en el formato JSON para "${param.label || param.name}": ${jsonError.message}`;
+              paramError = `Error en el formato JSON para "${param.label || param.name}": ${mensajeDeError(jsonError)}`;
             }
           }
           break;
@@ -4686,7 +5171,7 @@ var ProcedureForm = () => {
       }
     } catch (err) {
       console.error("Error al ejecutar el procedimiento (capturado en ProcedureForm):", err);
-      addLogMessage(`Error en la ejecuci\xF3n: ${err.message || "Error desconocido."}`, true);
+      addLogMessage(`Error en la ejecuci\xF3n: ${mensajeDeError(err, "Error desconocido.")}`, true);
     } finally {
       addLogMessage("Ejecuci\xF3n finalizada.");
     }
@@ -4711,7 +5196,7 @@ var ProcedureForm = () => {
     };
     if (param.options && param.options.length > 0) {
       return /* @__PURE__ */ jsxs21(FormControl3, { fullWidth: true, margin: "dense", size: "small", error: hasError, required: commonProps.required, children: [
-        /* @__PURE__ */ jsx26(InputLabel2, { id: `${param.name}-label`, sx: { fontSize: "0.8rem" }, children: param.label || param.name }),
+        /* @__PURE__ */ jsx27(InputLabel2, { id: `${param.name}-label`, sx: { fontSize: "0.8rem" }, children: param.label || param.name }),
         /* @__PURE__ */ jsxs21(
           Select2,
           {
@@ -4723,14 +5208,14 @@ var ProcedureForm = () => {
             label: param.label || param.name,
             disabled: apiLoading,
             sx: { fontSize: "0.8rem" },
-            renderValue: (selected) => /* @__PURE__ */ jsx26(Typography17, { sx: { fontSize: "0.8rem" }, children: selected }),
+            renderValue: (selected) => /* @__PURE__ */ jsx27(Typography16, { sx: { fontSize: "0.8rem" }, children: selected }),
             children: [
-              (!commonProps.required || formValues[param.name] === "") && /* @__PURE__ */ jsx26(MenuItem2, { value: "", sx: { fontSize: "0.8rem" }, children: /* @__PURE__ */ jsx26("em", { children: "Seleccione..." }) }),
-              param.options.map((option) => /* @__PURE__ */ jsx26(MenuItem2, { value: option, sx: { fontSize: "0.8rem" }, children: option }, option))
+              (!commonProps.required || formValues[param.name] === "") && /* @__PURE__ */ jsx27(MenuItem2, { value: "", sx: { fontSize: "0.8rem" }, children: /* @__PURE__ */ jsx27("em", { children: "Seleccione..." }) }),
+              param.options.map((option) => /* @__PURE__ */ jsx27(MenuItem2, { value: option, sx: { fontSize: "0.8rem" }, children: option }, option))
             ]
           }
         ),
-        (param.description || errorMessage) && /* @__PURE__ */ jsx26(FormHelperText2, { sx: { fontSize: "0.7rem" }, children: errorMessage || param.description })
+        (param.description || errorMessage) && /* @__PURE__ */ jsx27(FormHelperText2, { sx: { fontSize: "0.7rem" }, children: errorMessage || param.description })
       ] });
     }
     switch (param.typeName) {
@@ -4739,18 +5224,18 @@ var ProcedureForm = () => {
       case "tsrange":
       case "time_range":
       case "daterange":
-        return /* @__PURE__ */ jsx26(TextField3, { type: "text", value: formValues[param.name] || "", ...commonProps });
+        return /* @__PURE__ */ jsx27(TextField3, { type: "text", value: formValues[param.name] || "", ...commonProps });
       case "decimal":
       case "double":
-        return /* @__PURE__ */ jsx26(TextField3, { type: "number", inputProps: { step: "any", style: { fontSize: "0.8rem" } }, value: formValues[param.name] || "", ...commonProps });
+        return /* @__PURE__ */ jsx27(TextField3, { type: "number", inputProps: { step: "any", style: { fontSize: "0.8rem" } }, value: formValues[param.name] || "", ...commonProps });
       case "integer":
       case "bigint":
-        return /* @__PURE__ */ jsx26(TextField3, { type: "number", inputProps: { step: "1", style: { fontSize: "0.8rem" } }, value: formValues[param.name] || "", ...commonProps });
+        return /* @__PURE__ */ jsx27(TextField3, { type: "number", inputProps: { step: "1", style: { fontSize: "0.8rem" } }, value: formValues[param.name] || "", ...commonProps });
       case "boolean":
-        return /* @__PURE__ */ jsx26(
+        return /* @__PURE__ */ jsx27(
           FormControlLabel3,
           {
-            control: /* @__PURE__ */ jsx26(
+            control: /* @__PURE__ */ jsx27(
               Checkbox3,
               {
                 checked: !!formValues[param.name],
@@ -4761,21 +5246,21 @@ var ProcedureForm = () => {
                 size: "small"
               }
             ),
-            label: /* @__PURE__ */ jsx26(Typography17, { sx: { fontSize: "0.8rem", color: hasError ? "error.main" : "inherit" }, children: param.label || param.name }),
+            label: /* @__PURE__ */ jsx27(Typography16, { sx: { fontSize: "0.8rem", color: hasError ? "error.main" : "inherit" }, children: param.label || param.name }),
             sx: { mt: 1, mb: 0 }
           }
         );
       case "date":
       case "timestamp":
       case "time":
-        return /* @__PURE__ */ jsx26(TextField3, { type: param.typeName === "date" ? "date" : param.typeName === "timestamp" ? "datetime-local" : "time", value: formValues[param.name] || "", ...commonProps, InputLabelProps: { shrink: true, sx: { fontSize: "0.8rem" } } });
+        return /* @__PURE__ */ jsx27(TextField3, { type: param.typeName === "date" ? "date" : param.typeName === "timestamp" ? "datetime-local" : "time", value: formValues[param.name] || "", ...commonProps, InputLabelProps: { shrink: true, sx: { fontSize: "0.8rem" } } });
       case "jsonb":
       case "jsona":
-        return /* @__PURE__ */ jsx26(TextField3, { multiline: true, rows: 5, value: formValues[param.name] || "", ...commonProps, InputProps: { sx: { fontSize: "0.8rem" } } });
+        return /* @__PURE__ */ jsx27(TextField3, { multiline: true, rows: 5, value: formValues[param.name] || "", ...commonProps, InputProps: { sx: { fontSize: "0.8rem" } } });
       case "bytea":
         return /* @__PURE__ */ jsxs21(FormControl3, { fullWidth: true, margin: "dense", error: hasError, required: commonProps.required, children: [
-          /* @__PURE__ */ jsx26(Typography17, { variant: "body2", color: "textSecondary", component: "label", htmlFor: param.name, sx: { fontSize: "0.8rem", color: hasError ? "error.main" : "text.secondary" }, children: param.label || param.name }),
-          /* @__PURE__ */ jsx26(
+          /* @__PURE__ */ jsx27(Typography16, { variant: "body2", color: "textSecondary", component: "label", htmlFor: param.name, sx: { fontSize: "0.8rem", color: hasError ? "error.main" : "text.secondary" }, children: param.label || param.name }),
+          /* @__PURE__ */ jsx27(
             "input",
             {
               type: "file",
@@ -4789,34 +5274,34 @@ var ProcedureForm = () => {
               style: { padding: "6px 0", fontSize: "0.8rem" }
             }
           ),
-          (param.description || errorMessage) && /* @__PURE__ */ jsx26(FormHelperText2, { sx: { fontSize: "0.7rem" }, children: errorMessage || param.description })
+          (param.description || errorMessage) && /* @__PURE__ */ jsx27(FormHelperText2, { sx: { fontSize: "0.7rem" }, children: errorMessage || param.description })
         ] });
       default:
-        return /* @__PURE__ */ jsx26(TextField3, { type: "text", value: formValues[param.name] || "", ...commonProps });
+        return /* @__PURE__ */ jsx27(TextField3, { type: "text", value: formValues[param.name] || "", ...commonProps });
     }
   }, [formValues, handleChange, apiLoading, validationErrors]);
-  const ResultDisplayContent = useMemo10(() => {
+  const ResultDisplayContent = useMemo11(() => {
     if (!procedureResultData || !procedure?.resultOk) return null;
     const ComponentToRender = resultsOk[procedure.resultOk];
     if (ComponentToRender) {
-      return /* @__PURE__ */ jsx26(ComponentToRender, { data: procedureResultData });
+      return /* @__PURE__ */ jsx27(ComponentToRender, { data: procedureResultData });
     } else {
       return /* @__PURE__ */ jsxs21(Paper4, { elevation: 2, sx: { p: 2, mt: 0, bgcolor: "warning.light" }, children: [
-        /* @__PURE__ */ jsxs21(Typography17, { variant: "h6", sx: { fontSize: "1rem", mb: 1 }, children: [
+        /* @__PURE__ */ jsxs21(Typography16, { variant: "h6", sx: { fontSize: "1rem", mb: 1 }, children: [
           "el componente para resolver el resultOk: '",
           procedure.resultOk,
           "' definido en el procedure no existe o no est\xE1 mapeado."
         ] }),
-        /* @__PURE__ */ jsx26(Box21, { sx: {
+        /* @__PURE__ */ jsx27(Box20, { sx: {
           bgcolor: "warning.dark",
           p: 1,
           borderRadius: 1
-        }, children: /* @__PURE__ */ jsx26("pre", { style: { margin: 0, fontSize: "0.75rem", color: "white" }, children: JSON.stringify(procedureResultData, null, 2) }) })
+        }, children: /* @__PURE__ */ jsx27("pre", { style: { margin: 0, fontSize: "0.75rem", color: "white" }, children: JSON.stringify(procedureResultData, null, 2) }) })
       ] });
     }
   }, [procedureResultData, procedure]);
   if (!procedure) {
-    return /* @__PURE__ */ jsxs21(Box21, { sx: {
+    return /* @__PURE__ */ jsxs21(Box20, { sx: {
       p: 2,
       width: "100%",
       boxSizing: "border-box",
@@ -4826,13 +5311,13 @@ var ProcedureForm = () => {
       boxShadow: 3,
       textAlign: "center"
     }, children: [
-      /* @__PURE__ */ jsx26(CircularProgress7, { sx: { mb: 2 } }),
-      /* @__PURE__ */ jsx26(Typography17, { variant: "h6", color: "text.secondary", children: "Cargando procedimiento o no encontrado..." })
+      /* @__PURE__ */ jsx27(CircularProgress7, { sx: { mb: 2 } }),
+      /* @__PURE__ */ jsx27(Typography16, { variant: "h6", color: "text.secondary", children: "Cargando procedimiento o no encontrado..." })
     ] });
   }
   return (
     // Esta es la Box más externa que ahora controlará el scroll
-    /* @__PURE__ */ jsxs21(Box21, { sx: {
+    /* @__PURE__ */ jsxs21(Box20, { sx: {
       p: 2,
       ml: 1,
       mt: 2,
@@ -4849,17 +5334,17 @@ var ProcedureForm = () => {
       overflowX: "hidden"
       // Oculta el scroll horizontal si no es necesario para el contenedor principal
     }, children: [
-      /* @__PURE__ */ jsx26(Typography17, { variant: "h5", component: "h2", gutterBottom: true, align: "left", children: cambiarGuionesBajosPorEspacios(procedure.proceedLabel || procedure.action) }),
+      /* @__PURE__ */ jsx27(Typography16, { variant: "h5", component: "h2", gutterBottom: true, align: "left", children: cambiarGuionesBajosPorEspacios(procedure.proceedLabel || procedure.action) }),
       Object.values(validationErrors).some((err) => err !== null) && /* @__PURE__ */ jsxs21(Alert4, { severity: "error", sx: { mb: 2, fontSize: "0.8rem" }, children: [
         "Por favor, corrige los errores en el formulario antes de enviar.",
-        /* @__PURE__ */ jsx26("ul", { children: Object.values(validationErrors).map((err, idx) => err && /* @__PURE__ */ jsx26("li", { children: err }, idx)) })
+        /* @__PURE__ */ jsx27("ul", { children: Object.values(validationErrors).map((err, idx) => err && /* @__PURE__ */ jsx27("li", { children: err }, idx)) })
       ] }),
-      !Object.values(validationErrors).some((err) => err !== null) && apiError && /* @__PURE__ */ jsx26(Alert4, { severity: "error", sx: { mb: 2, fontSize: "0.8rem" }, children: apiError.message }),
-      !Object.values(validationErrors).some((err) => err !== null) && !apiError && successMessage && /* @__PURE__ */ jsx26(Alert4, { severity: "success", sx: { mb: 2, fontSize: "0.8rem" }, children: successMessage }),
+      !Object.values(validationErrors).some((err) => err !== null) && apiError && /* @__PURE__ */ jsx27(Alert4, { severity: "error", sx: { mb: 2, fontSize: "0.8rem" }, children: apiError.message }),
+      !Object.values(validationErrors).some((err) => err !== null) && !apiError && successMessage && /* @__PURE__ */ jsx27(Alert4, { severity: "success", sx: { mb: 2, fontSize: "0.8rem" }, children: successMessage }),
       /* @__PURE__ */ jsxs21("form", { onSubmit: handleSubmit, children: [
-        procedure.parameters.map((param) => /* @__PURE__ */ jsx26("div", { children: renderInputField(param) }, param.name)),
-        /* @__PURE__ */ jsx26(
-          Button10,
+        procedure.parameters.map((param) => /* @__PURE__ */ jsx27("div", { children: renderInputField(param) }, param.name)),
+        /* @__PURE__ */ jsx27(
+          Button9,
           {
             type: "submit",
             variant: "contained",
@@ -4867,20 +5352,20 @@ var ProcedureForm = () => {
             disabled: apiLoading || Object.values(validationErrors).some((err) => err !== null),
             sx: { mt: 2 },
             size: "medium",
-            startIcon: apiLoading ? /* @__PURE__ */ jsx26(CircularProgress7, { size: 20, color: "inherit" }) : null,
+            startIcon: apiLoading ? /* @__PURE__ */ jsx27(CircularProgress7, { size: 20, color: "inherit" }) : null,
             children: apiLoading ? "Ejecutando..." : procedure.proceedLabel || "Ejecutar"
           }
         )
       ] }),
-      ResultDisplayContent && /* @__PURE__ */ jsxs21(Box21, { sx: { mt: 2 }, children: [
+      ResultDisplayContent && /* @__PURE__ */ jsxs21(Box20, { sx: { mt: 2 }, children: [
         " ",
         ResultDisplayContent
       ] }),
-      executionLog.length > 0 && /* @__PURE__ */ jsxs21(Box21, { sx: { mt: 3 }, children: [
-        /* @__PURE__ */ jsx26(Divider3, { sx: { mb: 2 } }),
-        /* @__PURE__ */ jsx26(Typography17, { variant: "h6", gutterBottom: true, sx: { fontSize: "0.9rem" }, children: "Registro de Ejecuci\xF3n" }),
-        /* @__PURE__ */ jsx26(
-          Box21,
+      executionLog.length > 0 && /* @__PURE__ */ jsxs21(Box20, { sx: { mt: 3 }, children: [
+        /* @__PURE__ */ jsx27(Divider3, { sx: { mb: 2 } }),
+        /* @__PURE__ */ jsx27(Typography16, { variant: "h6", gutterBottom: true, sx: { fontSize: "0.9rem" }, children: "Registro de Ejecuci\xF3n" }),
+        /* @__PURE__ */ jsx27(
+          Box20,
           {
             sx: {
               bgcolor: "grey.100",
@@ -4893,8 +5378,8 @@ var ProcedureForm = () => {
               fontSize: "0.75rem",
               whiteSpace: "pre-wrap"
             },
-            children: executionLog.map((log, index) => /* @__PURE__ */ jsx26(
-              Typography17,
+            children: executionLog.map((log, index) => /* @__PURE__ */ jsx27(
+              Typography16,
               {
                 component: "pre",
                 sx: {
@@ -4919,9 +5404,9 @@ import { Provider } from "react-redux";
 import { PersistGate } from "redux-persist/integration/react";
 
 // src/components/PrivateRoute.tsx
-import { useEffect as useEffect8 } from "react";
+import { useEffect as useEffect10 } from "react";
 import { Navigate, useLocation as useLocation3 } from "react-router-dom";
-import { Fragment as Fragment3, jsx as jsx27 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx28 } from "react/jsx-runtime";
 var PrivateRoute = ({ children }) => {
   const location = useLocation3();
   const dispatch = useAppDispatch();
@@ -4929,7 +5414,7 @@ var PrivateRoute = ({ children }) => {
   const isAuthenticated = clientContextStatus === "succeeded";
   const isLoadingAuth = clientContextStatus === "loading";
   console.log(`[PrivateRoute] Render: Path=${location.pathname}, AuthStatus=${clientContextStatus}, IsAuthenticated=${isAuthenticated}, IsLoadingAuth=${isLoadingAuth}`);
-  useEffect8(() => {
+  useEffect10(() => {
     console.log(`[PrivateRoute] Effect: Path=${location.pathname}, AuthStatus=${clientContextStatus}, IsAuthenticated=${isAuthenticated}, IsLoadingAuth=${isLoadingAuth}`);
     if (!isAuthenticated && !isLoadingAuth && location.pathname !== "/login") {
       const path = location.pathname + location.search;
@@ -4945,19 +5430,19 @@ var PrivateRoute = ({ children }) => {
   }, [isAuthenticated, isLoadingAuth, location, dispatch, clientContextStatus]);
   if (isLoadingAuth) {
     console.log(`[PrivateRoute] Returning loading state...`);
-    return /* @__PURE__ */ jsx27("p", { children: "Verificando autenticaci\xF3n..." });
+    return /* @__PURE__ */ jsx28("p", { children: "Verificando autenticaci\xF3n..." });
   }
   if (!isAuthenticated) {
     console.log(`[PrivateRoute] User not authenticated, navigating to /login`);
-    return /* @__PURE__ */ jsx27(Navigate, { to: "/login", replace: true });
+    return /* @__PURE__ */ jsx28(Navigate, { to: "/login", replace: true });
   }
   console.log(`[PrivateRoute] User authenticated, rendering children.`);
-  return /* @__PURE__ */ jsx27(Fragment3, { children });
+  return /* @__PURE__ */ jsx28(Fragment4, { children });
 };
 var PrivateRoute_default = PrivateRoute;
 
 // src/components/InitialRedirectHandler.tsx
-import { useEffect as useEffect9 } from "react";
+import { useEffect as useEffect11, useRef as useRef8 } from "react";
 import { useLocation as useLocation4, useNavigate as useNavigate5 } from "react-router-dom";
 var InitialRedirectHandler = () => {
   const location = useLocation4();
@@ -4965,16 +5450,21 @@ var InitialRedirectHandler = () => {
   const dispatch = useAppDispatch();
   const redirectPath = useRedirectPath();
   const clientContextStatus = useClientContextStatus();
-  useEffect9(() => {
+  useEffect11(() => {
     dispatch(setCurrentPath(location.pathname + location.search));
   }, [location, dispatch]);
-  useEffect9(() => {
+  const navegandoRef = useRef8(false);
+  useEffect11(() => {
+    navegandoRef.current = false;
+  }, [location.pathname]);
+  useEffect11(() => {
     if (clientContextStatus === "succeeded") {
       if (redirectPath && redirectPath !== "/login") {
         console.log("Redirigiendo a la ruta guardada:", redirectPath);
+        navegandoRef.current = true;
         navigate(redirectPath);
         dispatch(setRedirectPath(null));
-      } else if (location.pathname === "/login" || location.pathname === "/") {
+      } else if (!navegandoRef.current && (location.pathname === "/login" || location.pathname === "/")) {
         console.log("Usuario autenticado, redirigiendo a /home por defecto.");
         navigate("/home");
       }
@@ -4985,11 +5475,11 @@ var InitialRedirectHandler = () => {
 var InitialRedirectHandler_default = InitialRedirectHandler;
 
 // src/pages/GenericDataGridPage.tsx
-import React19, { useState as useState16, useCallback as useCallback15 } from "react";
+import React22, { useState as useState16, useCallback as useCallback15 } from "react";
 import { useParams as useParams2, useLocation as useLocation5 } from "react-router-dom";
-import { Box as Box22, Alert as Alert5, Typography as Typography18, Tabs, Tab, IconButton as IconButton5 } from "@mui/material";
+import { Box as Box21, Alert as Alert5, Typography as Typography17, Tabs, Tab, IconButton as IconButton5 } from "@mui/material";
 import CloseIcon2 from "@mui/icons-material/Close";
-import { jsx as jsx28, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
 var GenericDataGridPage = ({
   initialTableName,
   initialFixedFields = []
@@ -5000,7 +5490,7 @@ var GenericDataGridPage = ({
   const [activeTabIdx, setActiveTabIdx] = useState16(0);
   const ffKey = JSON.stringify(initialFixedFields);
   const location = useLocation5();
-  React19.useEffect(() => {
+  React22.useEffect(() => {
     if (effectiveTableName) {
       setTabs([{
         id: `main-${effectiveTableName}-${ffKey}`,
@@ -5035,26 +5525,26 @@ var GenericDataGridPage = ({
     else if (activeTabIdx === index) setActiveTabIdx(index - 1);
   };
   if (!effectiveTableName) {
-    return /* @__PURE__ */ jsx28(Box22, { p: 3, children: /* @__PURE__ */ jsx28(Alert5, { severity: "error", children: "No se especific\xF3 una tabla." }) });
+    return /* @__PURE__ */ jsx29(Box21, { p: 3, children: /* @__PURE__ */ jsx29(Alert5, { severity: "error", children: "No se especific\xF3 una tabla." }) });
   }
-  return /* @__PURE__ */ jsxs22(Box22, { sx: { width: "100%", height: "calc(100vh - 64px)", display: "flex", flexDirection: "column" }, children: [
-    /* @__PURE__ */ jsx28(Box22, { sx: { borderBottom: 1, borderColor: "divider", bgcolor: "background.paper" }, children: /* @__PURE__ */ jsx28(Tabs, { value: activeTabIdx, onChange: (_, v) => setActiveTabIdx(v), variant: "scrollable", children: tabs.map((tab, index) => /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsxs22(Box21, { sx: { width: "100%", height: "calc(100vh - 64px)", display: "flex", flexDirection: "column" }, children: [
+    /* @__PURE__ */ jsx29(Box21, { sx: { borderBottom: 1, borderColor: "divider", bgcolor: "background.paper" }, children: /* @__PURE__ */ jsx29(Tabs, { value: activeTabIdx, onChange: (_, v) => setActiveTabIdx(v), variant: "scrollable", children: tabs.map((tab, index) => /* @__PURE__ */ jsx29(
       Tab,
       {
-        label: /* @__PURE__ */ jsxs22(Box22, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
-          /* @__PURE__ */ jsx28(Typography18, { variant: "caption", sx: { fontWeight: "bold" }, children: tab.label }),
-          index !== 0 && /* @__PURE__ */ jsx28(IconButton5, { size: "small", onClick: (e) => handleCloseTab(index, e), children: /* @__PURE__ */ jsx28(CloseIcon2, { fontSize: "inherit" }) })
+        label: /* @__PURE__ */ jsxs22(Box21, { sx: { display: "flex", alignItems: "center", gap: 1 }, children: [
+          /* @__PURE__ */ jsx29(Typography17, { variant: "caption", sx: { fontWeight: "bold" }, children: tab.label }),
+          index !== 0 && /* @__PURE__ */ jsx29(IconButton5, { size: "small", onClick: (e) => handleCloseTab(index, e), children: /* @__PURE__ */ jsx29(CloseIcon2, { fontSize: "inherit" }) })
         ] })
       },
       tab.id
     )) }) }),
-    tabs.map((tab, index) => /* @__PURE__ */ jsx28(
-      Box22,
+    tabs.map((tab, index) => /* @__PURE__ */ jsx29(
+      Box21,
       {
         role: "tabpanel",
         hidden: activeTabIdx !== index,
         sx: { flexGrow: 1, display: activeTabIdx === index ? "flex" : "none", flexDirection: "column", overflow: "hidden" },
-        children: /* @__PURE__ */ jsx28(
+        children: /* @__PURE__ */ jsx29(
           GenericDataGrid_default,
           {
             tableName: tab.tableName,
@@ -5070,11 +5560,30 @@ var GenericDataGridPage = ({
 };
 var GenericDataGridPage_default = GenericDataGridPage;
 
+// src/pages/PantallaDeRuta.tsx
+import { useMemo as useMemo12 } from "react";
+import { useSearchParams } from "react-router-dom";
+import { Box as Box22 } from "@mui/material";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var PantallaDeRuta = ({ screenName }) => {
+  const [busqueda] = useSearchParams();
+  const params = useMemo12(() => Object.fromEntries(busqueda.entries()), [busqueda]);
+  const Pantalla = wScreens[screenName];
+  return /* @__PURE__ */ jsx30(Box22, { sx: { pt: 3, pl: 4 }, children: Pantalla ? /* @__PURE__ */ jsx30(Pantalla, { screenName, params }) : /* @__PURE__ */ jsx30(FallbackWScreen, { screenName }) });
+};
+
 // src/pages/MenuTablePage.tsx
-import { useMemo as useMemo11 } from "react";
+import { useMemo as useMemo13 } from "react";
 import { useParams as useParams3 } from "react-router-dom";
-import { Box as Box23, Alert as Alert6, Typography as Typography19 } from "@mui/material";
-import { jsx as jsx29, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Box as Box23, Alert as Alert6, Typography as Typography18 } from "@mui/material";
+import { jsx as jsx31, jsxs as jsxs23 } from "react/jsx-runtime";
+function fixedFieldsDeMenu(ff) {
+  if (!ff) return [];
+  if (Array.isArray(ff)) {
+    return ff.map(({ fieldName, value }) => ({ fieldName, value }));
+  }
+  return Object.entries(ff).map(([fieldName, value]) => ({ fieldName, value }));
+}
 var MenuTablePage = () => {
   const { menuName } = useParams3();
   const { clientContext } = useApp();
@@ -5090,22 +5599,14 @@ var MenuTablePage = () => {
     }
     return void 0;
   };
-  const { currentTableName, currentFixedFields } = useMemo11(() => {
+  const { currentTableName, currentFixedFields } = useMemo13(() => {
     let tableName = void 0;
     let fixedFields = [];
     if (menuName && clientContext && clientContext.menu) {
       const menuItem = findMenuItem(clientContext.menu, menuName);
       if (menuItem) {
         tableName = menuItem.table || menuItem.name;
-        if (menuItem.ff) {
-          Object.keys(menuItem.ff || []).forEach((fixedFieldKey) => {
-            fixedFields.push({
-              fieldName: fixedFieldKey,
-              //@ts-ignore
-              value: menuItem.ff[fixedFieldKey]
-            });
-          });
-        }
+        fixedFields = fixedFieldsDeMenu(menuItem.ff);
       } else {
         console.warn(`[${menuName}] \xCDtem de men\xFA '${menuName}' no encontrado o no es de tipo 'table' en clientContext.menu.`);
       }
@@ -5116,12 +5617,12 @@ var MenuTablePage = () => {
     };
   }, [menuName, clientContext]);
   if (!currentTableName) {
-    return /* @__PURE__ */ jsx29(Box23, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsxs23(Alert6, { severity: "error", children: [
-      /* @__PURE__ */ jsx29(Typography19, { variant: "h6", children: "Error: No se pudo cargar la informaci\xF3n de la tabla." }),
-      /* @__PURE__ */ jsx29(Typography19, { variant: "body1", children: "Verifique la configuraci\xF3n del men\xFA o el nombre de la tabla en la URL." })
+    return /* @__PURE__ */ jsx31(Box23, { display: "flex", justifyContent: "center", alignItems: "center", minHeight: "200px", children: /* @__PURE__ */ jsxs23(Alert6, { severity: "error", children: [
+      /* @__PURE__ */ jsx31(Typography18, { variant: "h6", children: "Error: No se pudo cargar la informaci\xF3n de la tabla." }),
+      /* @__PURE__ */ jsx31(Typography18, { variant: "body1", children: "Verifique la configuraci\xF3n del men\xFA o el nombre de la tabla en la URL." })
     ] }) });
   }
-  return /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsx31(
     GenericDataGridPage_default,
     {
       initialTableName: currentTableName,
@@ -5133,84 +5634,60 @@ var MenuTablePage_default = MenuTablePage;
 
 // src/App.tsx
 import { Box as Box24 } from "@mui/material";
-import typeStore7 from "type-store";
-
-// src/utils/routeUtils.ts
-import { Children, isValidElement } from "react";
-var extractPathsFromRoutes = (node) => {
-  const paths = [];
-  Children.forEach(node, (child) => {
-    if (!isValidElement(child)) return;
-    if (child.props.path) {
-      paths.push(child.props.path);
-    }
-    if (child.props.children) {
-      paths.push(...extractPathsFromRoutes(child.props.children));
-    }
-  });
-  return paths;
-};
-
-// src/App.tsx
-import { jsx as jsx30, jsxs as jsxs24 } from "react/jsx-runtime";
+import typeStore6 from "type-store";
+import { Fragment as Fragment5, jsx as jsx32, jsxs as jsxs24 } from "react/jsx-runtime";
 var LocationTracker = () => {
   const location = useLocation6();
   const dispatch = useAppDispatch();
-  useEffect11(() => {
+  useEffect13(() => {
     dispatch(setCurrentPath(location.pathname + location.search));
   }, [location, dispatch]);
   return null;
 };
 function FrontendPlusReactRoutes({ myRoutes, myUnloggedRoutes, layout: Layout = MainLayout_default, unloggedLayout: UnloggedLayout }) {
-  return /* @__PURE__ */ jsxs24(Routes, { children: [
-    /* @__PURE__ */ jsxs24(Route, { element: UnloggedLayout ? /* @__PURE__ */ jsx30(UnloggedLayout, {}) : /* @__PURE__ */ jsx30(Outlet2, {}), children: [
-      /* @__PURE__ */ jsx30(Route, { path: "/login", element: /* @__PURE__ */ jsx30(LoginPage_default, {}) }),
-      /* @__PURE__ */ jsx30(Route, { path: "/logout", element: /* @__PURE__ */ jsx30(LogoutPage_default, {}) }),
-      myUnloggedRoutes
-    ] }),
-    /* @__PURE__ */ jsxs24(Route, { element: /* @__PURE__ */ jsxs24(PrivateRoute_default, { children: [
-      /* @__PURE__ */ jsx30(InitialRedirectHandler_default, {}),
-      /* @__PURE__ */ jsx30(Layout, {})
-    ] }), children: [
-      /* @__PURE__ */ jsx30(Route, { path: "/", element: /* @__PURE__ */ jsx30(HomePage_default, {}) }),
-      /* @__PURE__ */ jsx30(Route, { path: "/home", element: /* @__PURE__ */ jsx30(HomePage_default, {}) }),
-      /* @__PURE__ */ jsx30(Route, { path: "/table/:tableName", element: /* @__PURE__ */ jsx30(GenericDataGridPage_default, {}) }),
-      /* @__PURE__ */ jsx30(Route, { path: "/menu/:menuName", element: /* @__PURE__ */ jsx30(MenuTablePage_default, {}) }),
-      /* @__PURE__ */ jsx30(Route, { path: "/procedures/:procedureName", element: /* @__PURE__ */ jsx30(ProcedureForm_default, {}) }),
-      Object.keys(wScreens).map((screenName) => /* @__PURE__ */ jsx30(
-        Route,
-        {
-          path: `/wScreens/${screenName}`,
-          element: React22.createElement(
-            Box24,
-            {
-              sx: { pt: 3, pl: 4 }
-            },
-            React22.createElement(wScreens[screenName], { screenName })
-          )
-        },
-        screenName
-      )),
-      /* @__PURE__ */ jsx30(
-        Route,
-        {
-          path: "/wScreens-fallback/:screenName",
-          element: /* @__PURE__ */ jsx30(Box24, { sx: { p: 3 }, children: /* @__PURE__ */ jsx30(FallbackWScreen, { screenName: ":screenName" }) })
-        }
-      ),
-      myRoutes,
-      /* @__PURE__ */ jsx30(Route, { path: "*", element: /* @__PURE__ */ jsx30("div", { style: { marginTop: "20px", marginLeft: "10px" }, children: "404 - Recurso No Encontrado" }) })
-    ] }),
-    /* @__PURE__ */ jsx30(Route, { path: "*", element: /* @__PURE__ */ jsx30(Navigate2, { to: "/", replace: true }) })
+  return /* @__PURE__ */ jsxs24(Fragment5, { children: [
+    /* @__PURE__ */ jsx32(InitialRedirectHandler_default, {}),
+    /* @__PURE__ */ jsxs24(Routes, { children: [
+      /* @__PURE__ */ jsxs24(Route, { element: UnloggedLayout ? /* @__PURE__ */ jsx32(UnloggedLayout, {}) : /* @__PURE__ */ jsx32(Outlet2, {}), children: [
+        /* @__PURE__ */ jsx32(Route, { path: "/login", element: /* @__PURE__ */ jsx32(LoginPage_default, {}) }),
+        /* @__PURE__ */ jsx32(Route, { path: "/logout", element: /* @__PURE__ */ jsx32(LogoutPage_default, {}) }),
+        myUnloggedRoutes
+      ] }),
+      /* @__PURE__ */ jsxs24(Route, { element: /* @__PURE__ */ jsx32(PrivateRoute_default, { children: /* @__PURE__ */ jsx32(Layout, {}) }), children: [
+        /* @__PURE__ */ jsx32(Route, { path: "/", element: /* @__PURE__ */ jsx32(HomePage_default, {}) }),
+        /* @__PURE__ */ jsx32(Route, { path: "/home", element: /* @__PURE__ */ jsx32(HomePage_default, {}) }),
+        /* @__PURE__ */ jsx32(Route, { path: "/table/:tableName", element: /* @__PURE__ */ jsx32(GenericDataGridPage_default, {}) }),
+        /* @__PURE__ */ jsx32(Route, { path: "/menu/:menuName", element: /* @__PURE__ */ jsx32(MenuTablePage_default, {}) }),
+        /* @__PURE__ */ jsx32(Route, { path: "/procedures/:procedureName", element: /* @__PURE__ */ jsx32(ProcedureForm_default, {}) }),
+        Object.keys(wScreens).map((screenName) => /* @__PURE__ */ jsx32(
+          Route,
+          {
+            path: `/wScreens/${screenName}`,
+            element: /* @__PURE__ */ jsx32(PantallaDeRuta, { screenName })
+          },
+          screenName
+        )),
+        /* @__PURE__ */ jsx32(
+          Route,
+          {
+            path: "/wScreens-fallback/:screenName",
+            element: /* @__PURE__ */ jsx32(Box24, { sx: { p: 3 }, children: /* @__PURE__ */ jsx32(FallbackWScreen, { screenName: ":screenName" }) })
+          }
+        ),
+        myRoutes,
+        /* @__PURE__ */ jsx32(Route, { path: "*", element: /* @__PURE__ */ jsx32("div", { style: { marginTop: "20px", marginLeft: "10px" }, children: "404 - Recurso No Encontrado" }) })
+      ] }),
+      /* @__PURE__ */ jsx32(Route, { path: "*", element: /* @__PURE__ */ jsx32(Navigate2, { to: "/", replace: true }) })
+    ] })
   ] });
 }
 var FrontendPlusProviders = ({ children, publicPaths }) => {
-  return /* @__PURE__ */ jsx30(Provider, { store, children: /* @__PURE__ */ jsx30(PersistGate, { loading: null, persistor, children: /* @__PURE__ */ jsxs24(BrowserRouter, { children: [
-    /* @__PURE__ */ jsx30(LocationTracker, {}),
+  return /* @__PURE__ */ jsx32(Provider, { store, children: /* @__PURE__ */ jsx32(PersistGate, { loading: null, persistor, children: /* @__PURE__ */ jsxs24(BrowserRouter, { children: [
+    /* @__PURE__ */ jsx32(LocationTracker, {}),
     " ",
-    /* @__PURE__ */ jsx30(AppProvider, { publicPaths, children: /* @__PURE__ */ jsxs24(SnackbarProvider, { children: [
+    /* @__PURE__ */ jsx32(AppProvider, { publicPaths, children: /* @__PURE__ */ jsxs24(SnackbarProvider, { children: [
       children,
-      /* @__PURE__ */ jsx30(SessionExpiredMessage_default, {})
+      /* @__PURE__ */ jsx32(SessionExpiredMessage_default, {})
     ] }) })
   ] }) }) });
 };
@@ -5220,11 +5697,10 @@ var App = ({
   unloggedLayout,
   myWScreens,
   myClientSides,
-  myResultsOk
+  myResultsOk,
+  myConditions
 }) => {
-  useEffect11(() => {
-    typeStore7.messages = typeStore7.i18n.messages.es;
-    typeStore7.locale = typeStore7.i18n.locale.es;
+  useMemo14(() => {
     if (myClientSides) {
       extendClientSides(myClientSides);
     }
@@ -5234,17 +5710,24 @@ var App = ({
     if (myWScreens) {
       extendWScreens(myWScreens);
     }
+    if (myConditions) {
+      extendConditions(myConditions);
+    }
+  }, [myClientSides, myResultsOk, myWScreens, myConditions]);
+  useEffect13(() => {
+    typeStore6.messages = typeStore6.i18n.messages.es;
+    typeStore6.locale = typeStore6.i18n.locale.es;
     const link = document.querySelector("link[rel*='icon']") || document.createElement("link");
     link.type = "image/png";
     link.rel = "shortcut icon";
     link.href = `${envConfig.backendUrl}/img/logo-128.png`;
     document.getElementsByTagName("head")[0].appendChild(link);
-  }, [myClientSides, myResultsOk, myWScreens]);
-  const safePaths = React22.useMemo(() => {
+  }, []);
+  const safePaths = React25.useMemo(() => {
     const extracted = extractPathsFromRoutes(myUnloggedRoutes);
     return ["/login", "/logout", ...extracted];
   }, [myUnloggedRoutes]);
-  return /* @__PURE__ */ jsx30(FrontendPlusProviders, { publicPaths: safePaths, children: /* @__PURE__ */ jsx30(
+  return /* @__PURE__ */ jsx32(FrontendPlusProviders, { publicPaths: safePaths, children: /* @__PURE__ */ jsx32(
     FrontendPlusReactRoutes,
     {
       myRoutes,
@@ -5258,6 +5741,7 @@ export {
   App_default as App,
   AppProvider,
   ConfirmDialog,
+  DOM_TEMP_ID,
   FrontendPlusProviders,
   FrontendPlusReactRoutes,
   GenericDataGrid_default as GenericDataGrid,
@@ -5266,6 +5750,7 @@ export {
   cambiarGuionesBajosPorEspacios,
   clientSides,
   extendClientSides,
+  extendConditions,
   extendResultsOk,
   extendWScreens,
   extractPathsFromRoutes,